/* Mahyar character refresh — Stage 3 final cohesion layer.
   Scope: login + TEEN dashboard + TEEN lesson surfaces only.
   No layout/permission/backend behavior is defined here. */
:root {
    --mahyar-purple-950: #2c145f;
    --mahyar-purple-900: #3f1f83;
    --mahyar-purple-700: #6d3ad7;
    --mahyar-purple-600: #7c4be8;
    --mahyar-purple-100: #eee7ff;
    --mahyar-purple-50: #f8f5ff;
    --mahyar-mint: #5bd8c3;
    --mahyar-mint-soft: #e8fbf6;
    --mahyar-gold: #ffd56a;
    --mahyar-ink: #2a2340;
    --mahyar-muted: #746d84;
    --mahyar-border: #e8e0f3;
    --mahyar-surface: rgba(255, 255, 255, .96);
    --mahyar-radius-sm: .95rem;
    --mahyar-radius-md: 1.25rem;
    --mahyar-radius-lg: 1.65rem;
    --mahyar-shadow-sm: 0 10px 28px rgba(70, 43, 124, .07);
    --mahyar-shadow-md: 0 18px 44px rgba(70, 43, 124, .11);
    --mahyar-focus: 0 0 0 .2rem rgba(124, 75, 232, .18);
}

/* Shared surface rhythm and keyboard accessibility. */
body[data-ui-surface="login"],
body[data-ui-role="student"] {
    overflow-x: clip;
}
body[data-ui-role="student"] :where(a, button, input, textarea, select):focus-visible,
body[data-ui-surface="login"] :where(a, button, input, textarea, select):focus-visible {
    outline: 2px solid var(--mahyar-purple-600);
    outline-offset: 2px;
    box-shadow: var(--mahyar-focus);
}

/* Login: keep Stage 1 composition while aligning it with the final character system. */
body[data-ui-surface="login"] .ui-auth-layout--mahyar-v2 {
    border-color: rgba(109, 58, 215, .15);
    box-shadow: 0 28px 80px rgba(49, 28, 95, .16);
}
body[data-ui-surface="login"] .ui-auth-panel--mahyar-v2 {
    background:
        radial-gradient(circle at 92% 8%, rgba(231, 221, 255, .45), transparent 12rem),
        radial-gradient(circle at 4% 94%, rgba(232, 251, 246, .52), transparent 12rem),
        rgba(255,255,255,.985);
}
body[data-ui-surface="login"] .ui-auth-wordmark__title { color: var(--mahyar-purple-900); }
body[data-ui-surface="login"] .ui-auth-wordmark__line {
    background: linear-gradient(90deg, var(--mahyar-mint), var(--mahyar-purple-600));
}
body[data-ui-surface="login"] .ui-auth-input {
    min-height: 3.55rem;
    border-color: var(--mahyar-border);
    border-radius: var(--mahyar-radius-sm);
    background: #fff;
}
body[data-ui-surface="login"] .ui-auth-input:hover { border-color: #d4c6eb; }
body[data-ui-surface="login"] .ui-auth-submit {
    min-height: 3.55rem;
    border-radius: var(--mahyar-radius-sm);
    background: linear-gradient(135deg, var(--mahyar-purple-600), var(--mahyar-purple-900));
    box-shadow: 0 13px 28px rgba(91, 51, 177, .23);
}
body[data-ui-surface="login"] .ui-auth-memorial {
    border-color: #e4dcf1;
    color: #746a83;
    background: #faf8fe;
}

/* Teen application chrome. */
body[data-ui-role="student"] {
    color: var(--mahyar-ink);
    background:
        radial-gradient(circle at 92% 0, rgba(124,75,232,.09), transparent 27rem),
        radial-gradient(circle at 5% 22%, rgba(91,216,195,.07), transparent 22rem),
        #f8f7fc;
}
body[data-ui-role="student"] .ui1-sidebar {
    border-color: #e4deee;
    background: linear-gradient(180deg, #fff 0%, #fbf9ff 100%);
}
body[data-ui-role="student"] .ui1-sidebar__avatar,
body[data-ui-role="student"] .ui1-topbar__profile-icon {
    background: linear-gradient(135deg, var(--mahyar-purple-700), var(--mahyar-purple-600));
}
body[data-ui-role="student"] .ui1-nav__item.is-active,
body[data-ui-role="student"] .ui1-nav__item[aria-current="page"] {
    color: var(--mahyar-purple-900);
    background: linear-gradient(135deg, #f1ebff, var(--mahyar-mint-soft));
}
body[data-ui-role="student"] .ui1-topbar {
    border-color: #e8e2f1;
    background: rgba(255,255,255,.92);
    box-shadow: var(--mahyar-shadow-sm);
}

/* Dashboard: same visual language as the selected login/internal concepts. */
body[data-ui-role="student"] .ui2-hero {
    border: 1px solid rgba(255,255,255,.13);
    border-radius: var(--mahyar-radius-lg);
    background:
        radial-gradient(circle at 12% 15%, rgba(91,216,195,.22), transparent 17rem),
        radial-gradient(circle at 92% 12%, rgba(201,166,255,.28), transparent 15rem),
        linear-gradient(125deg, #211854, #54309c 56%, #7650d2);
    box-shadow: 0 22px 48px rgba(64, 38, 132, .22);
}
body[data-ui-role="student"] .ui2-hero__rank { border-radius: var(--mahyar-radius-md); }
body[data-ui-role="student"] .ui2-hero__portrait { border-radius: var(--mahyar-radius-md); }
body[data-ui-role="student"] .ui2-panel,
body[data-ui-role="student"] .ui2-stat {
    border-color: var(--mahyar-border);
    box-shadow: var(--mahyar-shadow-sm);
}
body[data-ui-role="student"] .ui2-panel { border-radius: var(--mahyar-radius-md); }
body[data-ui-role="student"] .ui2-mahyar-nudge {
    border-color: #e6dcf7;
    background: linear-gradient(135deg, #fffefd, var(--mahyar-purple-50) 60%, var(--mahyar-mint-soft));
}
body[data-ui-role="student"] .ui2-mahyar-nudge > div > span,
body[data-ui-role="student"] .ui2-kicker { color: var(--mahyar-purple-700); }
body[data-ui-role="student"] .ui2-mahyar-nudge > img { border: 1px solid rgba(109,58,215,.1); }

/* Shared Mahyar guide cards on all teen surfaces. */
body[data-ui-role="student"] .mahyar-guide-card {
    border-color: #e5dcf5;
    border-radius: var(--mahyar-radius-md);
    background: linear-gradient(135deg, #fffefc, var(--mahyar-purple-50) 58%, var(--mahyar-mint-soft));
    box-shadow: var(--mahyar-shadow-sm);
}
body[data-ui-role="student"] .mahyar-guide-card__visual {
    background: linear-gradient(145deg, #eadfff, #fff8f0 62%, #e8fbf6);
}
body[data-ui-role="student"] .mahyar-guide-card__eyebrow { color: var(--mahyar-purple-700); }
body[data-ui-role="student"] .mahyar-guide-card h2,
body[data-ui-role="student"] .mahyar-guide-card h3 { color: var(--mahyar-purple-950); }

/* Lesson-plan teen pages: harmonize hero, cards, progress, and spacing with dashboard. */
body[data-ui-role="student"][data-ui-surface="lesson-student"] .uil-main { max-width: 94rem; margin-inline: auto; }
body[data-ui-role="student"][data-ui-surface="lesson-student"] .uild-student-hero,
body[data-ui-role="student"][data-ui-surface="lesson-student"] .uild-quest-hero {
    border: 1px solid rgba(255,255,255,.12);
    background:
        radial-gradient(circle at 14% 14%, rgba(91,216,195,.22), transparent 18rem),
        radial-gradient(circle at 90% 8%, rgba(199,164,255,.25), transparent 16rem),
        linear-gradient(125deg, #211854, #54309c 58%, #7448c9);
    box-shadow: 0 20px 46px rgba(64,38,132,.2);
}
body[data-ui-role="student"][data-ui-surface="lesson-student"] .uild-student-library,
body[data-ui-role="student"][data-ui-surface="lesson-student"] .uild-quest-map,
body[data-ui-role="student"][data-ui-surface="lesson-student"] .uild-student-card,
body[data-ui-role="student"][data-ui-surface="lesson-student"] .uild-quest-list > article {
    border-color: var(--mahyar-border);
    box-shadow: var(--mahyar-shadow-sm);
}
body[data-ui-role="student"][data-ui-surface="lesson-student"] .uild-student-library,
body[data-ui-role="student"][data-ui-surface="lesson-student"] .uild-quest-map { border-radius: var(--mahyar-radius-md); }
body[data-ui-role="student"][data-ui-surface="lesson-student"] .uild-card-sky {
    background:
        radial-gradient(circle at 15% 20%, rgba(91,216,195,.23), transparent 7rem),
        linear-gradient(135deg, #33216f, #7144c8);
}
body[data-ui-role="student"][data-ui-surface="lesson-student"] .uild-current-stop {
    color: var(--mahyar-purple-900);
    background: var(--mahyar-purple-50);
}
body[data-ui-role="student"][data-ui-surface="lesson-student"] .uild-quest-list article.is-current {
    border-color: #bfa9e9;
    background: #fdfbff;
    box-shadow: 0 10px 28px rgba(97,49,185,.1);
}
body[data-ui-role="student"][data-ui-surface="lesson-student"] .uild-quest-list article.is-current .uild-node span {
    background: linear-gradient(145deg, var(--mahyar-purple-600), var(--mahyar-purple-900));
}
body[data-ui-role="student"][data-ui-surface="lesson-student"] .uild-progress [role="progressbar"] i,
body[data-ui-role="student"][data-ui-surface="lesson-student"] .uild-quest-progress [role="progressbar"] i {
    background: linear-gradient(90deg, var(--mahyar-mint), var(--mahyar-gold));
}
body[data-ui-role="student"][data-ui-surface="lesson-student"] .uild-final-medal {
    background:
        radial-gradient(circle at 90% 0, rgba(124,75,232,.28), transparent 13rem),
        linear-gradient(120deg, #211854, #322867);
}

/* Final responsive gate. */
@media (max-width: 767.98px) {
    body[data-ui-role="student"] .ui1-topbar__action,
    body[data-ui-role="student"] .ui1-topbar__profile,
    body[data-ui-role="student"] [data-ui-toggle="sidebar"] { min-width: 2.75rem; min-height: 2.75rem; }
    body[data-ui-role="student"] .ui2-hero { border-radius: 1.3rem; }
    body[data-ui-role="student"] .ui2-hero__content { padding: 1.25rem 1.1rem; }
    body[data-ui-role="student"] .ui2-hero__mahyar { min-height: 15.5rem; }
    body[data-ui-role="student"] .ui2-hero__portrait { inset: .5rem; }
    body[data-ui-role="student"] .ui2-hero__speech { margin: 0; }
    body[data-ui-role="student"][data-ui-surface="lesson-student"] .uild-student-hero,
    body[data-ui-role="student"][data-ui-surface="lesson-student"] .uild-quest-hero { border-radius: 1.3rem; }
}

@media (max-width: 575.98px) {
    body[data-ui-surface="login"] .ui-auth-input { font-size: 1rem; } /* prevents iOS focus zoom */
    body[data-ui-surface="login"] .ui-auth-layout--mahyar-v2 { min-height: 100dvh; }
    body[data-ui-surface="login"] .ui-auth-panel--mahyar-v2 { padding-bottom: max(1.4rem, env(safe-area-inset-bottom)); }
    body[data-ui-role="student"] .ui2-panel,
    body[data-ui-role="student"] .ui2-stat { border-radius: 1rem; }
    body[data-ui-role="student"] .mahyar-guide-card { margin-block: .75rem; }
    body[data-ui-role="student"][data-ui-surface="lesson-student"] .uil-main { padding-bottom: max(5.5rem, calc(4.5rem + env(safe-area-inset-bottom))); }
}

@media (max-width: 390px) {
    body[data-ui-role="student"] .ui2-hero__mahyar { min-height: 14rem; }
    body[data-ui-role="student"] .ui2-hero__speech small { display: none; }
    body[data-ui-role="student"] .mahyar-guide-card { grid-template-columns: 1fr; }
    body[data-ui-role="student"] .mahyar-guide-card__visual { height: 7.5rem; min-height: 0; }
}

@media (prefers-reduced-motion: reduce) {
    body[data-ui-role="student"] *,
    body[data-ui-surface="login"] * { scroll-behavior: auto !important; }
}

@media (forced-colors: active) {
    body[data-ui-role="student"] :where(.ui2-panel,.ui2-stat,.mahyar-guide-card,.uild-student-card,.uild-quest-list > article),
    body[data-ui-surface="login"] :where(.ui-auth-layout--mahyar-v2,.ui-auth-input,.ui-auth-submit) { border: 1px solid CanvasText; }
}