/* My Typing Lab v10 — Step Electric Workspace
 * UI-only design layer. Existing test engine, account system, timing and result save are untouched.
 * Reference look: solid electric-blue navigation, fresh white surfaces, dark blue text,
 * simple blue actions, restrained low-profile keyboard keycaps.
 */
:root{
 --st-blue:#076dff;--st-blue-dark:#0924be;--st-deep:#082b68;
 --st-ink:#11274d;--st-quiet:#65758d;--st-border:#dde5f0;
 --st-bg:#f5f7fb;--st-white:#fff;--st-panel:#f8fafe;
 --st-shadow:0 4px 16px rgba(18,57,115,.055);
 --brand-gradient:linear-gradient(180deg,#088aff 0%,#0757e6 54%,#0623c2 100%);
}
html[data-theme="light"]{
 --bg:#f5f7fb;--shell:#fff;--sidebar:#0769f4;--panel:#fff;--panel2:#f8fafe;
 --soft:#eaf3ff;--text:#162c4b;--muted:#667792;--line:#dce5f1;
 --line2:#e4ebf5;--blue:#076af4;--deepblue:#052fce;--purple:#0e6ce9;
 --green:#078f79;--amber:#cb7b18;--red:#d54266;
 --card-gradient:#fff;--head-gradient:linear-gradient(110deg,#fff,#f8fbff);
 --shadow:var(--st-shadow);
}
/* Main application tone intentionally matches the Step To Toppers screenshot. */
html[data-theme="light"] body:not(.guest),
html[data-theme="light"] body{background:var(--st-bg)!important;color:var(--st-ink)}
.app-shell{max-width:none;box-shadow:none}
html[data-theme="light"] body:not(.guest) .shell-main{background:#f5f7fb}
/* Desktop navigation: white on electric blue. Replaces dark sidebar of previous builds. */
@media(min-width:801px){
 html:not(.sidebar-drawer-open) .sidebar{width:248px;min-width:248px;visibility:visible;transform:none}
 html:not(.sidebar-drawer-open).sidebar-is-collapsed .sidebar{width:0!important;min-width:0!important;visibility:hidden;transform:translateX(-100%)}
}
html[data-theme="light"] .sidebar,
html[data-theme="light"] body:not(.guest) .sidebar,
html[data-theme="light"] .guest .sidebar{
 background:linear-gradient(178deg,#1088ff 0%,#0a5ff1 36%,#093edf 69%,#081eb6 100%)!important;
 border-right:0;box-shadow:inset -1px 0 rgba(255,255,255,.12);
 color:#fff;
}
.sidebar{isolation:isolate}
.sidebar .brand{height:84px;min-height:84px;padding:14px 13px;border-bottom:1px solid rgba(255,255,255,.2);gap:10px}
.sidebar .brand-mark{width:49px;height:49px;min-width:49px;border-radius:11px;
 color:#fff;background:rgba(255,255,255,.16)!important;border:1px solid rgba(255,255,255,.45);
 box-shadow:inset 0 1px rgba(255,255,255,.25)}
.sidebar .brand-mark .ico{width:28px;height:28px}
.sidebar .brand strong{font-size:18px;font-weight:850;letter-spacing:-.4px;color:#fff;white-space:nowrap}
.sidebar .brand em{color:#e6f5ff!important;font-style:normal}
.sidebar .brand small{font-size:8px;font-weight:850;letter-spacing:1.05px;color:#dbeeff!important;margin-top:6px}
.sidebar-quicklinks{display:flex;flex-direction:column;gap:7px;padding:17px 14px 10px}
.sidebar-quicklinks a{display:flex;align-items:center;gap:10px;min-height:43px;padding:9px 11px;
 color:#fff;background:rgba(255,255,255,.13);border:1px solid rgba(227,242,255,.3);
 border-radius:10px;font-size:12px;font-weight:790;box-shadow:inset 0 1px rgba(255,255,255,.10)}
.sidebar-quicklinks a:hover{background:rgba(255,255,255,.23)}
.sidebar-quicklinks a .ico{width:19px;height:19px}
.sidebar .side-nav{padding:4px 14px 6px;gap:4px}
.sidebar-group-label{font-size:9px;font-weight:900;letter-spacing:1.5px;color:#accfff;
 padding:15px 8px 5px;white-space:nowrap}
.sidebar .side-link{min-height:43px;height:43px;padding:5px 9px;gap:9px;border:1px solid transparent;
 color:#f3f8ff;font-size:12px;font-weight:700;border-radius:9px;box-shadow:none;transition:background .15s}
.sidebar .side-link:hover{background:rgba(255,255,255,.17);color:#fff;border-color:rgba(255,255,255,.15)}
.sidebar .side-link .side-icon{width:31px;height:31px;min-width:31px;display:grid;place-items:center;
 background:rgba(255,255,255,.13);border:1px solid rgba(255,255,255,.15);border-radius:8px}
.sidebar .side-link .side-icon .ico{color:#fff!important;width:18px;height:18px}
.sidebar .side-link>.ico{margin-left:auto;width:14px;height:14px;opacity:.65;color:inherit}
html[data-theme="light"] .sidebar .side-link.active,
.sidebar .side-link.active{background:#fff!important;color:#0547cf!important;border-color:#fff;
 box-shadow:0 4px 11px rgba(4,23,135,.1)}
.sidebar .side-link.active .side-icon{background:#e7f1ff;border-color:#d8eaff}
.sidebar .side-link.active .side-icon .ico{color:#095be9!important}
.sidebar .side-link.active>.ico{color:#095be9!important;opacity:1}
.sidebar-bottom{flex:0 0 auto;padding:10px 13px 16px;border-top:1px solid rgba(255,255,255,.17)}
.sidebar-bottom form{margin:0}
.sidebar-logout{height:42px;width:100%;display:flex;align-items:center;gap:10px;border-radius:10px;
 padding:0 10px;background:rgba(255,255,255,.13);border:1px solid rgba(255,255,255,.27);
 color:#fff;font-size:12px;font-weight:790}
.sidebar-logout>.ico:last-child{margin-left:auto;opacity:.85}
.sidebar-logout:hover{background:rgba(255,255,255,.22)}
.sidebar-credit{text-align:center;margin-top:13px;font-size:9px;color:#d3e8ff;display:flex;gap:5px;align-items:center;justify-content:center}
.sidebar .sidebar-promo{display:none!important}
/* Simple airy toolbar / prominent brand and dedicated workspace title */
html[data-theme="light"] body:not(.guest) .topbar,
html[data-theme="light"] .topbar{background:#fff!important;border-bottom:1px solid #e1e8f2!important;box-shadow:0 2px 8px rgba(18,69,131,.024);
 height:75px;min-height:75px;padding:0 clamp(13px,1.3vw,25px);gap:15px}
.topbar .top-title{font-size:18px;font-weight:800;min-width:210px;gap:12px}
.topbar .desktop-page-title{display:flex;flex-direction:column;gap:2px;white-space:nowrap}
.topbar .desktop-page-title strong{color:#152641;font-size:18px;letter-spacing:-.35px;line-height:1.25}
.topbar .desktop-page-title small{color:#076dff;font-size:9px;font-weight:900;letter-spacing:1.45px}
.topbar .studio-menu{height:35px;width:35px;min-width:35px;border:1px solid #c9ddfa;border-radius:9px;
 background:#f5f9ff;color:#1765dd;box-shadow:none}
.topbar .search-box,html[data-theme="light"] body:not(.guest) .topbar .search-box{
 height:40px;max-width:390px;min-width:120px;background:#fff;border:1px solid #d6e3f7;
 border-radius:22px;box-shadow:none;padding:0 12px;color:#216dd7}
.topbar .search-box input{font-size:11px;color:#1a3d71}
.topbar .search-box kbd{background:#f5f8ff;border:1px solid #dfebfc;color:#668bb9;font-size:10px}
.workspace-identity{display:flex;flex-direction:column;text-align:right;min-width:115px;max-width:160px;white-space:nowrap;
 border-right:1px solid #e4e9f1;padding-right:14px;gap:1px}
.workspace-identity small{font-size:9px;letter-spacing:1.55px;font-weight:900;color:#8590a3}
.workspace-identity strong{font-size:15px;color:#13243e;font-weight:830}
.topbar .top-actions{gap:8px}
.topbar .icon-btn{color:#166cea}
html[data-theme="light"] .topbar .theme-button{color:#086aff;filter:none}
.topbar .fullscreen-control{background:#f6faff;border:1px solid #9fc5ff;border-radius:8px;width:34px;height:34px}
.topbar .theme-button{padding:5px;width:32px;height:34px}
.topbar .theme-button .ico{width:23px;height:23px}
.topbar .notify-btn{padding:4px}
.topbar .notify-btn b{width:7px;height:7px;right:1px;top:2px;box-shadow:0 0 0 3px #fff}
html[data-theme="light"] .topbar .streak{color:#bc731d;background:#fff7e9;border:1px solid #f9e1bd;
 border-radius:9px;padding:8px 10px;font-size:11px;font-weight:700}
.topbar .streak svg{width:16px;height:16px}
.topbar .profile-short{gap:8px;font-size:12px;font-weight:600}
.topbar .profile-short>b{height:35px;width:35px;font-size:14px;background:linear-gradient(125deg,#009dff,#0a47e6)}
.topbar .profile-short>.ico{width:13px;color:#1d67ce}
/* Body is an intentionally uncluttered workspace, not a full-card blue background. */
html[data-theme="light"] .page{padding:15px 18px 14px}
html[data-theme="light"] body:not(.guest) .panel,
html[data-theme="light"] .panel{background:#fff;border:1px solid #dce5ef;border-radius:11px;box-shadow:var(--st-shadow)}
html[data-theme="light"] body:not(.guest) .metric,
html[data-theme="light"] .metric{background:#fff;border:1px solid #dce5ef;border-radius:10px;box-shadow:0 3px 9px rgba(40,80,140,.035)}
html[data-theme="light"] .metric .metric-label{font-size:11px;color:#687b98;font-weight:700}
html[data-theme="light"] .metric strong{color:#182f50;font-weight:850}
html[data-theme="light"] .metric small{color:#8b9aac}
html[data-theme="light"] body:not(.guest) .metric-icon{
 background:#e9f2ff;border:1px solid #d5e6ff;color:#0965e8;
 box-shadow:none;border-radius:9px}
html[data-theme="light"] body:not(.guest) .metric-icon.green,
html[data-theme="light"] body:not(.guest) .metric-icon.amber,
html[data-theme="light"] body:not(.guest) .metric-icon.red,
html[data-theme="light"] body:not(.guest) .metric-icon.purple{
 background:#e9f2ff;border:1px solid #d5e6ff;color:#0965e8;box-shadow:none}
html[data-theme="light"] body:not(.guest) .page-heading.panel,
html[data-theme="light"] body:not(.guest) body[data-page="lessons"] .page-heading.panel{
 background:#fff;border:1px solid #dce5f1;box-shadow:0 4px 14px rgba(25,67,135,.045);border-radius:12px}
html[data-theme="light"] .page-heading::before,html[data-theme="light"] .page-heading::after{display:none!important}
html[data-theme="light"] body:not(.guest) .page-heading{min-height:85px;padding:12px 15px}
html[data-theme="light"] .page-heading .heading-copy h1{color:#0635b7!important;font-weight:850;font-size:25px;letter-spacing:-.5px}
html[data-theme="light"] .page-heading .heading-copy p{color:#667891!important;opacity:1;font-size:12px}
html[data-theme="light"] body:not(.guest) .page-heading .heading-icon{background:linear-gradient(160deg,#1baaff,#075af3 70%,#063cc9);
 border:1px solid #3e9afa;border-radius:10px;box-shadow:0 4px 11px rgba(0,87,204,.16)}
html[data-theme="light"] .page-heading .heading-icon .ico{width:29px;height:29px}
html[data-theme="light"] .page-heading .heading-eyebrow{color:#1768dc!important}
html[data-theme="light"] .page-heading .heading-extra{color:#293e60}
html[data-theme="light"] .page-heading .heading-extra label{color:#647797}
html[data-theme="light"] .page-heading select,html[data-theme="light"] .typing-settings select,
html[data-theme="light"] .heading-extra select{background:#f9fbfe;border:1px solid #d3e2f3;color:#1b416c}
html[data-theme="light"] .gradient-button,
html[data-theme="light"] .start-button,
html[data-theme="light"] body:not(.guest) .typing-footer .start-button,
html[data-theme="light"] .tab-buttons button.selected,
html[data-theme="light"] .period-tabs button.selected,
html[data-theme="light"] .auth-tabs button.active{
 background:linear-gradient(180deg,#008bff 0%,#086af4 45%,#0327c8 100%);color:#fff;
 border:1px solid #1171f3;box-shadow:0 3px 8px rgba(0,58,160,.16);border-radius:8px}
html[data-theme="light"] .gradient-button:hover,html[data-theme="light"] .start-button:hover{filter:brightness(1.04)}
html[data-theme="light"] .outline-button,html[data-theme="light"] body:not(.guest) .typing-footer .outline-button{
 background:#fff;border:1px solid #bfd5f4;color:#1a61be;border-radius:8px;box-shadow:none}
html[data-theme="light"] .ghost-button{background:#f8fbff;border-color:#d4e5fa;color:#1859ad}
html[data-theme="light"] .section-head h2,html[data-theme="light"] .section-head h3{color:#1c3250}
html[data-theme="light"] .section-head .ico{color:#076af4}
html[data-theme="light"] .section-head .link-button{color:#096ce8}
html[data-theme="light"] .result-row{border-bottom-color:#e2e9f3}
html[data-theme="light"] .result-dot{background:linear-gradient(145deg,#147cf2,#062bc6);color:#fff}
html[data-theme="light"] .result-details strong{color:#294469}
html[data-theme="light"] .result-numbers b{color:#0678ed}
html[data-theme="light"] .right-rail .rail-box{background:#fff!important}
html[data-theme="light"] .right-rail .rail-box .rail-subtitle{color:#72839c}
/* Typing reader: white primary canvas with a defined writing position. */
html[data-theme="light"] body:not(.guest) .typing-zone{
 background:#fff;border:1px solid #d9e5f4;box-shadow:0 3px 12px rgba(28,84,157,.044)}
html[data-theme="light"] body:not(.guest) .typing-zone .passage{
 background:#fff;color:#2a4667;border:1px solid #d9e5f1;box-shadow:inset 0 1px rgba(255,255,255,.4)}
html[data-theme="light"] body:not(.guest) .typing-zone .typing-input{
 background:#fcfdff;color:#153855;border:1px solid #cedff2;box-shadow:none}
html[data-theme="light"] body:not(.guest) .typing-zone .typing-input:focus{border-color:#1b84fb;box-shadow:0 0 0 2px rgba(40,126,253,.08)}
html[data-theme="light"] .typing-zone .typing-section-label{color:#3976bd;font-weight:850}
html[data-theme="light"] .typing-zone .passage-refresh{color:#2c88eb}
html[data-theme="light"] .typing-zone .typing-hint{color:#7184a0}
/* Low-bevel professional keyboard: preserve key dimensions and live key highlight logic. */
html[data-theme="light"] body:not(.guest) .keyboard{
 background:linear-gradient(180deg,#eaf1fa,#e0eaf6);
 border:1px solid #cbdcf0;border-radius:10px;
 box-shadow:0 3px 9px rgba(33,77,133,.07),inset 0 1px rgba(255,255,255,.75)}
html[data-theme="light"] body:not(.guest) .key,
html[data-theme="light"] body:not(.guest) .key.wide,
html[data-theme="light"] body:not(.guest) .key.space{
 background:linear-gradient(165deg,#fff,#f1f5fa);border:1px solid #c6d4e4;
 border-bottom-color:#bacddd;border-radius:6px;color:#264568;
 box-shadow:inset 0 1px rgba(255,255,255,.8),0 1px 1px rgba(26,63,106,.06);
 transform:none;text-shadow:none}
html[data-theme="light"] body:not(.guest) .key.home-left{
 background:linear-gradient(150deg,#099bff,#076dea);border-color:#218cff;border-bottom-color:#1260c5;
 box-shadow:inset 0 1px rgba(255,255,255,.11),0 1px 1px rgba(20,95,185,.08);color:#fff}
html[data-theme="light"] body:not(.guest) .key.home-right{
 background:linear-gradient(150deg,#0dbb9b,#089883);border-color:#1ab69d;border-bottom-color:#0e8a79;
 box-shadow:inset 0 1px rgba(255,255,255,.11),0 1px 1px rgba(12,95,81,.08);color:#fff}
html[data-theme="light"] body:not(.guest) .key.pressed{transform:translateY(1px)!important;filter:brightness(.95);
 box-shadow:inset 0 1px 2px rgba(16,52,99,.14),0 0 0 1px #1d87f4!important}
html[data-theme="light"] .history-view-all{background:#eaf3ff;border-color:#c8ddfa;color:#095bd9}
html[data-theme="light"] .developer-footer{background:#fff;border-top:1px solid #e1e9f3;color:#7c8da6}
html[data-theme="light"] .developer-footer a{color:#075eed}
/* Lesson right-rail: white panels and a blue-selected row, not the v9 navy/purple scheme. */
html[data-theme="light"] body[data-page="lessons"] .lesson-rail-box{background:#fff;border:1px solid #dce5ef}
html[data-theme="light"] body[data-page="lessons"] .lesson-list-row.active{background:linear-gradient(180deg,#188cff,#0551df);
 border-color:#2487ed;box-shadow:0 3px 8px rgba(5,77,178,.13)}
html[data-theme="light"] body[data-page="lessons"] .lesson-list-row:not(.active):hover{background:#edf5ff}
html[data-theme="light"] body[data-page="lessons"] .lesson-list-row{border-bottom:1px solid #edf1f6}
html[data-theme="light"] body[data-page="lessons"] .lesson-number{background:#e4eeff;color:#285faa}
html[data-theme="light"] body[data-page="lessons"] .lesson-list-row.active .lesson-number{background:rgba(255,255,255,.22);color:#fff}
html[data-theme="light"] body[data-page="lessons"] .lesson-total{background:#eef5ff;border-color:#d7e7ff;color:#527aa4}
html[data-theme="light"] body[data-page="lessons"] .lesson-search{background:#f8fbff;border-color:#dbe7f6}
/* Generic dashboard/test widgets share the reference card style. */
html[data-theme="light"] body:not(.guest) .hero.panel{background:linear-gradient(113deg,#087eeb,#0752d8 55%,#071da9);border:1px solid #268cf1}
html[data-theme="light"] .hero h1,html[data-theme="light"] .hero p{color:#fff}
html[data-theme="light"] .hero h1 span{color:#d4f4ff}
html[data-theme="light"] .hero .hero-eyebrow{color:#cae9ff}
html[data-theme="light"] .hero .hero-quote{color:#eff8ff}
html[data-theme="light"] .progress-bar{background:#e8effb}
html[data-theme="light"] .progress-bar i{background:linear-gradient(90deg,#108dfd,#063bcf)}
html[data-theme="light"] .streak{box-shadow:none}
/* Dark mode remains available as the complementary midnight-blue version. */
html[data-theme="dark"] .sidebar{background:linear-gradient(178deg,#077df8,#0753e8 48%,#071eb7)!important}
html[data-theme="dark"] .sidebar .brand strong,html[data-theme="dark"] .sidebar .brand em,
html[data-theme="dark"] .sidebar .side-link,html[data-theme="dark"] .sidebar .sidebar-group-label{color:#fff}
html[data-theme="dark"] .sidebar .side-link.active{background:#fff!important;color:#0752cf!important}
html[data-theme="dark"] .sidebar .side-link.active .side-icon .ico{color:#0752cf!important}
html[data-theme="dark"] .sidebar .side-link.active>.ico{color:#0752cf!important}
html[data-theme="dark"] .topbar .desktop-page-title strong,html[data-theme="dark"] .workspace-identity strong{color:#f1f7ff}
html[data-theme="dark"] .workspace-identity{border-color:#244c86}
html[data-theme="dark"] .topbar .desktop-page-title small{color:#70caff}
html[data-theme="dark"] .sidebar-group-label{color:#c5e3ff}
/* Responsiveness: retain working fit layout; allow internal scrolling at laptop size. */
@media(min-width:801px) and (max-width:1450px){
 html:not(.sidebar-drawer-open) .sidebar{width:226px;min-width:226px}
 .topbar .top-title{min-width:172px}
 .topbar .desktop-page-title strong{font-size:16px}
 .topbar .workspace-identity{min-width:108px}
 .topbar .profile-short>span,.topbar .streak{display:none}
}
@media(min-width:801px) and (max-width:1170px){
 html:not(.sidebar-drawer-open) .sidebar{width:204px;min-width:204px}
 .topbar .search-box{max-width:230px}
 .topbar .workspace-identity{display:none}
 .sidebar .brand strong{font-size:15px}
 .sidebar .brand small{font-size:7px;letter-spacing:.6px}
 .sidebar .side-link{font-size:11px}
}
@media(max-width:800px){
 .sidebar{width:256px!important;min-width:256px!important;transform:translateX(-100%)}
 .sidebar .side-link{justify-content:flex-start!important;gap:10px!important;padding:5px 9px!important}
 .sidebar .side-link span{display:inline-flex!important}
 .sidebar .side-link>.ico{margin-left:auto}
 .sidebar .side-nav{padding:4px 14px 6px}
 .topbar .workspace-identity{display:none}
 .topbar .desktop-page-title{display:none}
 .topbar .search-box{max-width:none;min-width:0}
 .sidebar .brand{padding-right:46px}
 .sidebar .brand strong{font-size:18px}
 .sidebar .brand small{font-size:8px}
 .topbar .top-title{min-width:0}
 .topbar .studio-menu{height:34px;width:34px}
 html[data-theme="light"] .page{padding:10px}
 html[data-theme="light"] .page-heading .heading-copy h1{font-size:20px}
}
@media(max-width:520px){
 .topbar .search-box{display:none}
 .topbar .top-actions{margin-left:auto}
 .topbar .streak{display:none}
 .topbar .profile-short>span{display:none}
 .sidebar .sidebar-bottom{padding-bottom:22px}
}
/* Final responsive/editor corrections found in browser previews. */
@media(min-width:801px){
 html.sidebar-is-collapsed:not(.sidebar-drawer-open)[data-theme] body:not(.guest) .sidebar{
  width:0!important;min-width:0!important;border:0!important;visibility:hidden!important;
  overflow:hidden!important;transform:translateX(-100%)!important;
 }
}
html[data-fit="on"] body:is([data-page="lessons"],[data-page="typing-test"],[data-page="practice"],[data-page="mock-test"]) .typing-zone .passage{
 font-size:clamp(15px,1.02vw,18px);line-height:1.42;letter-spacing:.55px;overflow-y:auto;
 scrollbar-width:thin;scrollbar-color:#bcd0e9 transparent;
}
@media(min-width:1121px) and (min-height:650px) and (max-height:810px){
 html[data-fit="on"] body[data-page="typing-test"] .page-heading,
 html[data-fit="on"] body[data-page="practice"] .page-heading,
 html[data-fit="on"] body[data-page="mock-test"] .page-heading{min-height:70px!important;height:70px!important}
 html[data-fit="on"] body:is([data-page="typing-test"],[data-page="practice"],[data-page="mock-test"]) .typing-metrics .metric{
  min-height:55px!important;height:55px!important}
 html[data-fit="on"] body:is([data-page="typing-test"],[data-page="practice"],[data-page="mock-test"]) .key-row{height:37px!important}
 html[data-fit="on"] body:is([data-page="typing-test"],[data-page="practice"],[data-page="mock-test"]) .keyboard{gap:4px!important;padding:6px 9px!important}
 html[data-fit="on"] body:is([data-page="typing-test"],[data-page="practice"],[data-page="mock-test"]) .page{padding-top:10px!important}
}