/* v11: Adapted directly from Step To Toppers theme tokens & global-control-system.
   Never import Step To Toppers app logic, branding, credentials, or database. */
:root{
 --theme-start:#0084FF;--theme-end:#0013B3;--theme-accent:#007BFF;
 --theme-background:#F5F7FB;--theme-surface:#FFFFFF;
 --theme-dark-background:#06172F;--theme-dark-surface:#0D2346;
 --stt-gradient:linear-gradient(to bottom,var(--theme-start),var(--theme-end));
 --stt-horizontal:linear-gradient(to right,var(--theme-start),var(--theme-end));
 --stt-soft:color-mix(in srgb,var(--theme-accent) 9%,white);
 --stt-border:color-mix(in srgb,var(--theme-accent) 17%,#d9e2ef);
 --stt-shadow:0 4px 14px rgba(20,50,90,.055);
 --st-blue:var(--theme-accent);--st-blue-dark:var(--theme-end);
 --st-bg:var(--theme-background);--st-white:var(--theme-surface);
 --brand-gradient:var(--stt-gradient);
}
html[data-theme="light"]{
 --bg:var(--theme-background);--shell:var(--theme-surface);
 --sidebar:var(--theme-start);--panel:var(--theme-surface);
 --panel2:var(--stt-soft);--soft:var(--stt-soft);
 --blue:var(--theme-accent);--deepblue:var(--theme-end);--purple:var(--theme-accent);
 --card-gradient:var(--theme-surface);--head-gradient:linear-gradient(110deg,var(--theme-surface),var(--stt-soft));
}
html[data-theme="dark"]{
 --bg:var(--theme-dark-background);--shell:var(--theme-dark-surface);
 --panel:var(--theme-dark-surface);--panel2:color-mix(in srgb,var(--theme-accent) 10%,var(--theme-dark-surface));
 --blue:var(--theme-accent);--deepblue:var(--theme-end);--purple:var(--theme-accent);
}
html[data-theme="light"] body,html[data-theme="light"] body:not(.guest) .shell-main,
html[data-theme="light"] .app-shell,html[data-theme="light"] .page,
html[data-theme="light"] .auth-main{background:var(--theme-background)!important}
html[data-theme="dark"] body,html[data-theme="dark"] body:not(.guest) .shell-main,
html[data-theme="dark"] .app-shell,html[data-theme="dark"] .page,
html[data-theme="dark"] .auth-main{background:var(--theme-dark-background)!important}
/* Step To Toppers vertical gradient on desktop + mobile sidebar */
html[data-theme] .sidebar,html[data-theme] body:not(.guest) .sidebar,html[data-theme] .guest .sidebar{
 background:var(--stt-gradient)!important;color:white!important;border:0!important;
}
.sidebar .brand-mark,.sidebar .side-icon{border-color:rgba(255,255,255,.19)!important}
.sidebar .side-link.active,html[data-theme] .sidebar .side-link.active,
html[data-theme] .sidebar .side-link.active:hover{
 background:#fff!important;color:var(--theme-end)!important;border-color:white!important;
 box-shadow:0 3px 10px rgba(2,12,65,.12)!important;
}
.sidebar .side-link.active .side-icon{background:var(--stt-soft)!important;border-color:var(--stt-border)!important}
.sidebar .side-link.active .side-icon svg,.sidebar .side-link.active>svg{color:var(--theme-end)!important}
html[data-theme="light"] .topbar,html[data-theme="light"] .guest-toolbar{
 background:var(--theme-surface)!important;border-bottom:1px solid var(--stt-border)!important;
}
html[data-theme="light"] .topbar .desktop-page-title small,
html[data-theme="light"] .guest-workspace-name strong{color:var(--theme-accent)!important}
html[data-theme="light"] .sidebar-quicklinks a{color:white!important}
html[data-theme="light"] .panel,html[data-theme="light"] body:not(.guest) .panel,
html[data-theme="light"] .metric,html[data-theme="light"] .rail-box,
html[data-theme="light"] .auth-card,html[data-theme="light"] .lesson-rail-box,
html[data-theme="light"] .auth-numbers{
 background:var(--theme-surface)!important;border-color:var(--stt-border)!important;
 box-shadow:var(--stt-shadow)!important;
}
html[data-theme="dark"] .panel,html[data-theme="dark"] .metric,
html[data-theme="dark"] .rail-box{background:var(--theme-dark-surface)!important}
/* Reference bright blue CTA geometry: compact radius, contrast, distinct upper/lower gradient */
html[data-theme] .gradient-button,html[data-theme] .start-button,
html[data-theme] body:not(.guest) .typing-footer .start-button,
html[data-theme] .tab-buttons button.selected,
html[data-theme] .period-tabs button.selected,
html[data-theme] .auth-tabs button.active,
html[data-theme] .action-primary{
 background:var(--stt-gradient)!important;background-image:var(--stt-gradient)!important;
 color:#fff!important;border:1px solid color-mix(in srgb,var(--theme-end) 25%,var(--theme-start))!important;
 border-radius:8px!important;box-shadow:0 3px 9px color-mix(in srgb,var(--theme-end) 21%,transparent)!important;
 text-shadow:0 1px rgba(0,0,0,.08);
}
html[data-theme] .gradient-button:hover,html[data-theme] .start-button:hover{
 filter:brightness(1.06);box-shadow:0 5px 12px color-mix(in srgb,var(--theme-end) 25%,transparent)!important;
}
html[data-theme] .outline-button,html[data-theme] .ghost-button,
html[data-theme="light"] body:not(.guest) .typing-footer .outline-button{
 color:var(--theme-end)!important;border:1px solid var(--stt-border)!important;
 border-radius:8px!important;box-shadow:none!important;
}
html[data-theme="light"] .outline-button,html[data-theme="light"] .ghost-button{background:var(--theme-surface)!important}
html[data-theme] .tab-buttons button:not(.selected):hover,
html[data-theme] .outline-button:hover{background:var(--stt-soft)!important}
html[data-theme] .metric-icon,html[data-theme] body:not(.guest) .metric-icon,
html[data-theme] body:not(.guest) .metric-icon:is(.green,.amber,.purple,.red),
html[data-theme="light"] .topbar .studio-menu{
 background:var(--stt-soft)!important;color:var(--theme-accent)!important;
 border:1px solid var(--stt-border)!important;box-shadow:none!important;
}
html[data-theme="light"] .page-heading .heading-copy h1,html[data-theme="light"] .section-head .ico,
html[data-theme="light"] .link-button,html[data-theme="light"] .history-view-all,
html[data-theme="light"] .sidebar-admin-link a{color:var(--theme-end)!important}
html[data-theme="light"] .page-heading .heading-icon,
html[data-theme="light"] body:not(.guest) .page-heading .heading-icon,
html[data-theme] .profile-short>b{background:var(--stt-gradient)!important;border:1px solid var(--stt-border)!important}
html[data-theme="light"] .page-heading.panel{background:var(--theme-surface)!important;border-color:var(--stt-border)!important}
html[data-theme="light"] .progress-bar i,html[data-theme="light"] .progress-fill,
html[data-theme="light"] .hero.panel,
html[data-theme="light"] body:not(.guest) .hero.panel,
html[data-theme="light"] body[data-page="lessons"] .lesson-list-row.active{
 background:var(--stt-gradient)!important;background-image:var(--stt-gradient)!important;
}
html[data-theme="light"] .hero.panel{border-color:var(--stt-border)!important}
html[data-theme="light"] body[data-page="lessons"] .lesson-list-row.active{color:white!important;border-color:var(--theme-accent)!important}
html[data-theme="light"] body:not(.guest) .typing-zone{background:var(--theme-surface)!important;border-color:var(--stt-border)!important}
html[data-theme="light"] body:not(.guest) .typing-zone .passage,
html[data-theme="light"] body:not(.guest) .typing-zone .typing-input{
 background:var(--theme-surface)!important;border-color:var(--stt-border)!important;
}
html[data-theme="light"] .typing-zone .typing-section-label,
html[data-theme="light"] .typing-zone .passage-refresh{color:var(--theme-accent)!important}
html[data-theme="light"] body:not(.guest) .typing-zone .typing-input:focus,
html[data-theme] input:focus-visible,html[data-theme] select:focus-visible,
html[data-theme] textarea:focus-visible{border-color:var(--theme-accent)!important;outline-offset:1px;outline-color:var(--theme-accent)}
/* Retain approved low-bevel keys; only left-hand training highlight follows admin brand. */
html[data-theme="light"] body:not(.guest) .key.home-left{
 background:linear-gradient(150deg,var(--theme-start),var(--theme-accent))!important;
 border-color:color-mix(in srgb,var(--theme-accent) 55%,#fff)!important;
 box-shadow:inset 0 1px rgba(255,255,255,.12),0 1px 1px rgba(20,95,185,.07)!important;
 color:white!important;
}
html[data-theme="light"] body:not(.guest) .key.home-right{
 box-shadow:inset 0 1px rgba(255,255,255,.1),0 1px 1px rgba(12,95,81,.08)!important;
}
html[data-theme="light"] .developer-footer{background:var(--theme-surface)!important;border-color:var(--stt-border)!important}
html[data-theme="light"] .auth-tabs{border-color:var(--stt-border)!important}
html[data-theme="light"] .auth-card .auth-submit{background:var(--stt-gradient)!important}
html[data-theme="light"] .auth-left h1 span,html[data-theme="light"] .auth-switch a{color:var(--theme-end)!important}
html[data-theme="light"] .auth-field:focus-within{border-color:var(--theme-accent)!important;box-shadow:0 0 0 3px var(--stt-soft)!important}
html[data-theme="light"] .auth-left .feature-badge{color:var(--theme-end)!important;background:var(--stt-soft)!important}
.sidebar-admin-link{padding:7px 13px}
.sidebar-admin-link a{display:flex;align-items:center;gap:10px;color:white!important;border:1px solid rgba(255,255,255,.26);background:rgba(255,255,255,.14);border-radius:9px;padding:10px;text-decoration:none;font-size:12px;font-weight:750}
.sidebar-admin-link a:hover{background:rgba(255,255,255,.23)}
.theme-readonly{color:var(--theme-end);font-size:12px;max-width:50%;text-align:right}
/* Admin theme changes must never be overridden by the student's old accent preference. */
html[data-accent] .gradient-button{background:var(--stt-gradient)!important}

html[data-theme="dark"] body:not(.guest) .key.home-left{
 background:linear-gradient(150deg,var(--theme-start),var(--theme-accent))!important;
 border-color:color-mix(in srgb,var(--theme-accent) 55%,#fff)!important;
 box-shadow:inset 0 1px rgba(255,255,255,.12),0 1px 1px rgba(20,95,185,.07)!important;
 color:#fff!important;
}