/* MY TYPING LAB v9 — ELECTRIC BLUE
   Design layer inspired by the Step To Toppers Electric Blue system.
   Pure CSS skin over v8 Premium Studio: lesson flow, timer, scoring, storage,
   login, keyboard event handling and existing UI controls stay unchanged.
   This sheet loads AFTER app.css and studio-v8.css. */
:root{
  --bg:#061429;--shell:#06162f;--sidebar:#071a34;--panel:#0a2243;
  --panel2:#0c284b;--soft:#10345e;--text:#f7fbff;--muted:#a7c2e4;
  --line:#295687;--line2:#1c406b;--blue:#36b7ff;--deepblue:#096bfa;
  --purple:#3477ff;--green:#16d6a1;--amber:#ffc55a;--red:#ff5b85;
  --card-gradient:linear-gradient(130deg,#0b2548 0%,#0a1e3b 100%);
  --head-gradient:linear-gradient(112deg,#0a73ed 0%,#0959d7 46%,#1536a4 100%);
  --brand-gradient:linear-gradient(105deg,#02aafa 0%,#086ff5 49%,#174dd6 100%);
  --shadow:0 7px 22px rgba(0,11,37,.15);
  --electric-border:rgba(71,154,255,.39);
  --electric-glow:rgba(0,117,255,.17);
}
html[data-theme="light"]{
  --bg:#eff6ff;--shell:#f7fbff;--sidebar:#fff;--panel:#fff;
  --panel2:#f3f8ff;--soft:#e7f2ff;--text:#143152;--muted:#587391;
  --line:#cadef7;--line2:#d6e7fc;--blue:#096cf4;
  --card-gradient:linear-gradient(135deg,#fff,#f7fbff);
  --head-gradient:linear-gradient(108deg,#0877ed,#1264df 52%,#1742ac);
  --shadow:0 6px 22px rgba(31,98,185,.08);
  --electric-border:rgba(70,132,210,.24);
  --electric-glow:rgba(0,116,255,.12);
}
body{background:radial-gradient(ellipse at 47% -15%,rgba(20,100,228,.15),transparent 47%),var(--bg)}
body:not(.guest){background:radial-gradient(ellipse at 45% -8%,rgba(17,113,246,.12),transparent 48%),var(--bg)}
.sidebar{background:linear-gradient(180deg,#081f3e,#06162d 68%,#07162d);border-right:1px solid #204676}
.topbar,body:not(.guest) .topbar{background:linear-gradient(98deg,#071d3c,#091d3e 64%,#0b2151);border-bottom:1px solid #26558d;box-shadow:0 1px 0 rgba(56,146,255,.08)}
.guest-toolbar{background:linear-gradient(95deg,#071d3d,#071833);border-bottom:1px solid #24518b}
.topbar .search-box,body:not(.guest) .topbar .search-box{background:#0d2b52;border-color:#28578b;box-shadow:inset 0 1px 0 rgba(164,214,255,.04)}
.topbar .search-box:focus-within,.guest-toolbar button:focus-visible{border-color:#30b5ff;box-shadow:0 0 0 3px rgba(20,130,255,.17)}
.brand-mark,.heading-icon,.promo-cup,.pick-icon{background:var(--brand-gradient);box-shadow:0 5px 14px rgba(0,117,255,.19)}
.brand em,.mobile-brand em,.brand small,.section-head .link-button{color:#4dbbff}
.side-link{border:1px solid transparent;transition:background .16s,border-color .16s,color .16s}
.side-link .ico{color:#80b7ef}
.side-link.active{background:linear-gradient(102deg,#118eff,#0c65ea 68%,#1453cf);border-color:rgba(113,197,255,.38);box-shadow:0 5px 15px rgba(0,93,241,.21);color:#fff}
.side-link:not(.active):hover{background:#12375d;border-color:#23548d}
.sidebar-promo{background:linear-gradient(135deg,#0d4281,#092857 59%,#123d94);border:1px solid #358cec;box-shadow:inset 0 1px 0 rgba(160,219,255,.11)}
.sidebar-promo small{color:#bcdafa}
.sidebar-promo .wave{border-color:rgba(51,184,255,.45);filter:none}
.sidebar-promo .wave:after{border-color:rgba(33,107,251,.45)}
.panel,body:not(.guest) .panel{background:var(--card-gradient);border:1px solid var(--electric-border);box-shadow:inset 0 1px 0 rgba(189,225,255,.045),var(--shadow)}
.metric,body:not(.guest) .metric{background:linear-gradient(128deg,#0e2d55,#0b2447 82%);border-radius:12px}
.metric-icon,body:not(.guest) .metric-icon{background:linear-gradient(142deg,#0e86f9,#094bbd);border:1px solid rgba(73,171,255,.55);box-shadow:inset 0 1px rgba(255,255,255,.13),0 3px 9px rgba(0,93,230,.12);color:#eafaff}
.metric-icon.purple,body:not(.guest) .metric-icon.purple{background:linear-gradient(145deg,#0b65df,#143c9a);border-color:#357df8;color:#d5edff}
.metric-icon.green,body:not(.guest) .metric-icon.green{background:linear-gradient(145deg,#096c83,#07586a);border-color:#2197b1;color:#50f4d7}
.metric-icon.amber,body:not(.guest) .metric-icon.amber{background:linear-gradient(145deg,#614c23,#44381b);border-color:#91713b;color:#ffd47e}
.metric-icon.red,body:not(.guest) .metric-icon.red{background:linear-gradient(145deg,#6e3150,#4a2540);border-color:#a85277;color:#ff83a6}
.gradient-button,.start-button,.auth-tabs button.active,.tab-buttons button.selected,.period-tabs button.selected{background:var(--brand-gradient);color:#fff;border-color:rgba(77,181,255,.28);box-shadow:0 4px 14px rgba(0,104,244,.21)}
.gradient-button:hover,.start-button:hover{filter:brightness(1.07)}
.ghost-button,.outline-button,.fit-control{background:#0c284d;border:1px solid #326293;color:#d8ecff}
.ghost-button:hover,.outline-button:hover,.fit-control:hover{background:#103967;border-color:#398df3}
.feature-badge,.level-pill{background:#0a3252;border:1px solid #176eaf;color:#83d5ff}
.progress-bar{background:#163a67}
.progress-bar i{background:linear-gradient(90deg,#00b5fc,#0d7aff 58%,#225ada)}
.profile-short>b,.avatar-circle{background:linear-gradient(135deg,#00bcff,#0d72f8 65%,#1850c8)}
.fit-control.is-active{border-color:#2fa7ff;background:#0e3763;color:#91daff}
.page-heading{position:relative;overflow:hidden;background:var(--head-gradient);border-color:#469cff;box-shadow:inset 0 1px 0 rgba(203,240,255,.22),0 8px 19px rgba(4,48,123,.16)}
.page-heading::before{content:"";position:absolute;pointer-events:none;inset:0;background:radial-gradient(ellipse at 5% -75%,rgba(188,238,255,.24),transparent 57%),radial-gradient(ellipse at 83% 145%,rgba(25,175,255,.13),transparent 54%)}
.page-heading .heading-copy,.page-heading .heading-extra{position:relative;z-index:1}
.page-heading .heading-copy h1,.page-heading .heading-copy p{color:#fff}
.page-heading .heading-copy p{opacity:.88}
.page-heading .heading-icon,body[data-page="lessons"] .page-heading .heading-icon{background:linear-gradient(140deg,#2dc7ff,#0879fa 60%,#1657d2);border:1px solid rgba(219,244,255,.37);box-shadow:0 4px 12px rgba(5,66,164,.2)}
body[data-page="lessons"] .page-heading{background:linear-gradient(109deg,#0879ed,#0d56c8 58%,#1742a6);border-color:#459afb}
body[data-page="lessons"] .page-heading::after{background:linear-gradient(103deg,transparent,rgba(48,173,255,.14),transparent);right:-6%;width:41%;transform:skewX(-25deg)}
body[data-page="lessons"] .heading-eyebrow{color:#bfebff}
body[data-page="lessons"] .level-pill{background:rgba(4,41,98,.55);border:1px solid #54b7ff;color:#d6f3ff}
body[data-page="lessons"] .page-heading .outline-button{background:rgba(5,54,145,.43);border-color:#8ac5ff;color:#fff}
body[data-page="lessons"] .lesson-rail-box{background:linear-gradient(150deg,#0a2447,#081c39)}
body[data-page="lessons"] .lesson-total{background:#13345c;border-color:#3b689c;color:#bddbff}
body[data-page="lessons"] .lesson-search{background:#0d2c53;border-color:#2a5789}
body[data-page="lessons"] .lesson-list-row{border-bottom-color:rgba(62,113,177,.24)}
body[data-page="lessons"] .lesson-list-row.active{background:linear-gradient(110deg,#00a6fa,#0b72fa 56%,#1950ce);border-color:#5bb4ff;box-shadow:inset 0 1px rgba(255,255,255,.15),0 4px 11px rgba(8,71,167,.24)}
body[data-page="lessons"] .lesson-list-row:not(.active):hover{background:#11375f}
body[data-page="lessons"] .lesson-number{background:#153e70}
body[data-page="lessons"] .lesson-list-row.active .lesson-number{background:#048bd9}
body:not(.guest) .typing-zone{background:linear-gradient(135deg,#0a2447,#091e3c);border:1px solid #2c609e;box-shadow:inset 0 1px rgba(180,224,255,.035)}
body:not(.guest) .typing-zone .passage{background:linear-gradient(180deg,#071b37,#0a2549);border-color:#285487;color:#d4e5fe;box-shadow:inset 0 1px 0 rgba(126,197,255,.025)}
body:not(.guest) .typing-zone .typing-input{background:#081f3c;border-color:#3477c1;color:#fff;box-shadow:none}
body:not(.guest) .typing-zone .typing-input:focus{border-color:#35b4ff;box-shadow:0 0 0 2px rgba(35,151,255,.16)}
.typing-zone .typing-section-label{color:#a5d4fc}
body:not(.guest) .keyboard{background:linear-gradient(150deg,#0a2040,#081b34);border:1px solid #316095;box-shadow:inset 0 1px 0 rgba(147,202,255,.07),0 4px 12px rgba(0,10,28,.13)}
body:not(.guest) .key{border:1px solid #436284;border-bottom-color:#355273;background:linear-gradient(150deg,#294564,#203755);box-shadow:inset 0 1px rgba(215,238,255,.06),0 1px 1px rgba(0,10,34,.16);transform:none}
body:not(.guest) .key.wide,body:not(.guest) .key.space{background:linear-gradient(155deg,#294b6c,#1d3654)}
body:not(.guest) .key.home-left{background:linear-gradient(135deg,#0b9dff,#0667ef);border-color:#359ffe;border-bottom-color:#1466c7;box-shadow:inset 0 1px rgba(255,255,255,.13),0 1px 1px rgba(4,73,169,.14)}
body:not(.guest) .key.home-right{background:linear-gradient(135deg,#09bc9c,#08967d);border-color:#29c8ae;border-bottom-color:#0b8f75;box-shadow:inset 0 1px rgba(255,255,255,.13),0 1px 1px rgba(4,91,78,.12)}
body:not(.guest) .key.pressed{transform:translateY(1px)!important;filter:brightness(1.12)}
body:not(.guest) .typing-footer .start-button{background:var(--brand-gradient);border:1px solid #3d9dff;box-shadow:0 4px 13px rgba(0,105,244,.2)}
body:not(.guest) .typing-footer .outline-button{background:#0d2a51;border-color:#306096;color:#d6edff}
.hero{background:radial-gradient(ellipse at 70% 61%,rgba(28,156,255,.29),transparent 54%),linear-gradient(112deg,#072e67 0%,#0b4da5 50%,#122b76 100%);border-color:#3f94f0;box-shadow:inset 0 1px rgba(181,228,255,.13),0 9px 25px rgba(5,59,137,.15)}
.hero:after{border-color:#37bbff;filter:none;opacity:.29}
.hero h1 span{color:#67d9ff}
.hero-quote{color:#c7e7ff;text-shadow:none}
.hero-eyebrow{color:#a9eaff}
.auth-main:after{border-color:rgba(0,150,255,.35);box-shadow:none}
.guest{background:radial-gradient(ellipse at 81% 35%,rgba(16,92,205,.24),transparent 46%),#061429}
.guest .sidebar{background:linear-gradient(175deg,#082147,#07152d)}
.auth-left h1 span{background:linear-gradient(95deg,#63d9ff,#1b90ff);-webkit-background-clip:text;background-clip:text;color:transparent}
.auth-card{background:linear-gradient(145deg,#102c51,#0b1d3b 85%);border:1px solid #3b8fec;box-shadow:0 15px 35px rgba(1,21,55,.17),inset 0 1px rgba(255,255,255,.04)}
.auth-tabs{background:#0c2444;border:1px solid #1e4779}
.auth-field{background:#0e2b50;border-color:#316093;color:#8ccfff}
.auth-field:focus-within{border-color:#38baff;box-shadow:0 0 0 3px rgba(20,139,255,.13)}
.auth-separator{color:#a6c2e4}
.auth-numbers{background:linear-gradient(145deg,#0d2b52,#0b2040);border-color:#2d649c}
.auth-highlights b{background:#103761;color:#6bd4ff;border:1px solid #295994}
.guest .feature-badge{background:#0a3156;border-color:#286ba8;color:#b8e6ff}
.guest .auth-switch a,.guest .remember-line a{color:#72cfff}
/* Electric Blue extends to less prominent controls on other app pages. */
.pick-row,.live-stats,.setting-row,.rank-stats{border-color:var(--line2)}
.rank-dot,.lesson-done-count{color:#45d9bc}
.cal-days span.today{background:#137df4}
.tab-buttons button:hover,.period-tabs button:hover{border-color:#43a5ff}
:where(a,button,input,textarea,select):focus-visible{outline-color:#49baff}
/* Light surface implementation is intentionally complete (v8's dark selectors have higher specificity). */
html[data-theme="light"] body,html[data-theme="light"] body:not(.guest){background:radial-gradient(ellipse at 40% -10%,rgba(76,169,255,.12),transparent 49%),#eff6ff}
html[data-theme="light"] .sidebar,html[data-theme="light"] .guest .sidebar{background:linear-gradient(165deg,#fff,#f1f7ff);border-right:1px solid #d3e5fa}
html[data-theme="light"] .topbar,html[data-theme="light"] body:not(.guest) .topbar,html[data-theme="light"] .guest-toolbar{background:linear-gradient(96deg,#fff,#f0f7ff);border-bottom-color:#d3e4f8}
html[data-theme="light"] .topbar .search-box,html[data-theme="light"] body:not(.guest) .topbar .search-box{background:#fff;border-color:#cbdcf3;color:#306faf}
html[data-theme="light"] .panel,html[data-theme="light"] body:not(.guest) .panel{background:linear-gradient(135deg,#fff,#f6faff);border-color:#cbdef6;box-shadow:0 5px 20px rgba(24,94,172,.075)}
html[data-theme="light"] .metric,html[data-theme="light"] body:not(.guest) .metric{background:linear-gradient(130deg,#fff,#f5f9ff)}
html[data-theme="light"] .side-link:not(.active):hover{background:#e8f3ff;color:#174679;border-color:#d2e6fd}
html[data-theme="light"] .side-link .ico{color:#397cbd}
html[data-theme="light"] .side-link.active .ico{color:#fff}
html[data-theme="light"] .sidebar-promo{background:linear-gradient(120deg,#e7f4ff,#d8ebff 62%,#c9deff);border-color:#8cbdff;color:#15396e}
html[data-theme="light"] .sidebar-promo small{color:#4d739d}
html[data-theme="light"] .ghost-button,html[data-theme="light"] .outline-button,html[data-theme="light"] .fit-control{background:#fff;color:#26568d;border-color:#bdd8f5}
html[data-theme="light"] .gradient-button,html[data-theme="light"] .start-button{color:#fff}
html[data-theme="light"] .progress-bar{background:#dfecfa}
html[data-theme="light"] .hero{background:radial-gradient(ellipse at 67% 56%,rgba(116,195,255,.52),transparent 56%),linear-gradient(110deg,#fafdff,#d5eafe 71%,#cfe2ff);border-color:#91bdf5}
html[data-theme="light"] .hero h1{color:#16416f}
html[data-theme="light"] .hero p{color:#536f8f}
html[data-theme="light"] .hero-quote{color:#2268aa}
html[data-theme="light"] body[data-page="lessons"] .page-heading,html[data-theme="light"] .page-heading{background:linear-gradient(110deg,#0878ee,#0c60d4 59%,#1745b2);border-color:#4399fb}
html[data-theme="light"] .page-heading .heading-copy h1,html[data-theme="light"] .page-heading .heading-copy p{color:#fff}
html[data-theme="light"] body[data-page="lessons"] .lesson-rail-box{background:linear-gradient(140deg,#fff,#f4f9ff)}
html[data-theme="light"] body[data-page="lessons"] .lesson-list-row:not(.active):hover{background:#e9f3ff}
html[data-theme="light"] body[data-page="lessons"] .lesson-total{background:#edf5ff;border-color:#d4e4f8;color:#486d9e}
html[data-theme="light"] body[data-page="lessons"] .lesson-search{background:#fff;border-color:#c8dcf5}
html[data-theme="light"] body:not(.guest) .typing-zone{background:linear-gradient(135deg,#fcfdff,#eff6ff);border-color:#c1d9f7}
html[data-theme="light"] body:not(.guest) .typing-zone .passage{background:#fff;color:#244766;border-color:#cddff5}
html[data-theme="light"] body:not(.guest) .typing-zone .typing-input{background:#fff;color:#183c60;border-color:#b9d4f8}
html[data-theme="light"] body:not(.guest) .typing-zone .typing-input:focus{border-color:#128bfa;box-shadow:0 0 0 2px rgba(8,119,235,.11)}
html[data-theme="light"] .typing-zone .typing-section-label{color:#527da8}
html[data-theme="light"] body:not(.guest) .keyboard{background:linear-gradient(150deg,#e3f0ff,#d6e8fa);border-color:#bad5ef}
html[data-theme="light"] body:not(.guest) .key{background:linear-gradient(145deg,#fff,#edf5fc);border-color:#bed1e4;border-bottom-color:#b3c9df;color:#2b5075;box-shadow:inset 0 1px rgba(255,255,255,.66),0 1px 1px rgba(29,76,134,.08)}
html[data-theme="light"] body:not(.guest) .key.wide,html[data-theme="light"] body:not(.guest) .key.space{background:linear-gradient(150deg,#fff,#e6f0fb)}
html[data-theme="light"] body:not(.guest) .key.home-left{background:linear-gradient(135deg,#079aff,#0766ed);border-color:#319dff;border-bottom-color:#1867c6;color:#fff;box-shadow:inset 0 1px rgba(255,255,255,.13),0 1px rgba(18,99,205,.1)}
html[data-theme="light"] body:not(.guest) .key.home-right{background:linear-gradient(135deg,#09bc9c,#08967d);border-color:#29c8ae;border-bottom-color:#0b8f75;color:#fff;box-shadow:inset 0 1px rgba(255,255,255,.13),0 1px rgba(6,112,82,.1)}
html[data-theme="light"] body:not(.guest) .typing-footer .outline-button{background:#fff;border-color:#bfd7f5;color:#28578a}
html[data-theme="light"] .auth-card{color:#173c62;background:linear-gradient(145deg,#fff,#f7fbff);border-color:#a4cdfa;box-shadow:0 15px 34px rgba(36,109,197,.12)}
html[data-theme="light"] .auth-tabs{background:#e6f2ff;border-color:#cfdef1}
html[data-theme="light"] .auth-tabs button{color:#486989}
html[data-theme="light"] .auth-tabs button.active{color:#fff}
html[data-theme="light"] .auth-field{background:#f4faff;border-color:#bfd6f1;color:#2867a7}
html[data-theme="light"] .auth-field input{color:#173856}
html[data-theme="light"] .auth-numbers{background:#fff;border-color:#c7ddf7}
html[data-theme="light"] .auth-highlights b{background:#e4f4ff;border-color:#ccdef7;color:#1376d2}
html[data-theme="light"] .guest{background:radial-gradient(ellipse at 80% 22%,rgba(83,178,255,.2),transparent 53%),#f0f7ff}
html[data-theme="light"] .guest .feature-badge{background:#e5f3ff;border-color:#bcdaf8;color:#185c95}
html[data-theme="light"] .guest .auth-switch a,html[data-theme="light"] .guest .remember-line a{color:#066bdf}
html[data-theme="light"] .cal-days span.today{color:#fff}
@media(max-width:800px){
  .sidebar{background:linear-gradient(165deg,#081e3d,#06172e)}
  .page-heading{border-radius:12px}
  html[data-theme="light"] .sidebar{background:linear-gradient(165deg,#fff,#f3f8ff)}
}
@media(prefers-reduced-motion:reduce){.side-link,.gradient-button,.key{transition:none!important}}

/* High-specificity correction: v8 generic .panel must not flatten banner gradients. */
body:not(.guest) .hero.panel{background:radial-gradient(ellipse at 72% 48%,rgba(27,156,255,.27),transparent 53%),linear-gradient(112deg,#07306d,#0d55af 54%,#153784 100%);border-color:#3f94f0}
body:not(.guest) .page-heading.panel{background:linear-gradient(111deg,#0876ec,#105fd9 53%,#1740a5);border-color:#4096f7;box-shadow:inset 0 1px rgba(222,245,255,.17),0 8px 19px rgba(4,48,123,.16)}
html[data-theme="light"] body:not(.guest) .hero.panel{background:radial-gradient(ellipse at 69% 51%,rgba(119,198,255,.45),transparent 56%),linear-gradient(108deg,#f9fdff,#d7ecff 68%,#cfe2ff);border-color:#94bff3}
html[data-theme="light"] body:not(.guest) .page-heading.panel{background:linear-gradient(111deg,#0876ec,#105fd9 53%,#1740a5);border-color:#4096f7}
/* Four guest highlights are blue-tonal, not the former purple/orange/pink rainbow. */
.guest .auth-highlights div:nth-child(1) b,.guest .auth-highlights div:nth-child(2) b,.guest .auth-highlights div:nth-child(3) b,.guest .auth-highlights div:nth-child(4) b{background:linear-gradient(135deg,#104e99,#0b3675);border:1px solid #2f7abd;color:#86d6ff;box-shadow:inset 0 1px rgba(161,227,255,.07)}
html[data-theme="light"] .guest .auth-highlights div:nth-child(1) b,html[data-theme="light"] .guest .auth-highlights div:nth-child(2) b,html[data-theme="light"] .guest .auth-highlights div:nth-child(3) b,html[data-theme="light"] .guest .auth-highlights div:nth-child(4) b{background:#e4f3ff;border-color:#b8d9f8;color:#0b75d7}