:root{
    --bg:#0D0A22; --paper:#F5F3FF; --cyan:#33F5D0; --magenta:#FF3E8C; --violet:#8A5CFF; --gold:#FFC857;
    --ink-soft:rgba(245,243,255,0.68); --line:rgba(245,243,255,0.12); --glass:rgba(255,255,255,0.06);
    --red:#FF5C6C; --orange:#FFA657; --purple:#C084FC; --green:#4ADE80;
  }
  *{box-sizing:border-box; margin:0; padding:0;}
  html{scroll-behavior:smooth;}
  body{background:var(--bg); color:var(--paper); font-family:'Sora',sans-serif; line-height:1.55; -webkit-font-smoothing:antialiased; overflow-x:hidden; position:relative;}
  ::selection{background:var(--magenta); color:#fff;}
  a{color:inherit;}
  .display{font-family:'Space Grotesk',sans-serif;}
  .mono{font-family:'IBM Plex Mono',monospace;}
  .wrap{max-width:1220px; margin:0 auto; padding:0 32px; position:relative; z-index:2;}

  .blob{position:fixed; border-radius:50%; filter:blur(90px); opacity:0.32; z-index:0; pointer-events:none;}
  .blob1{width:520px; height:520px; background:var(--violet); top:-160px; left:-120px; animation:float1 16s ease-in-out infinite;}
  .blob2{width:460px; height:460px; background:var(--magenta); top:20%; right:-160px; animation:float2 20s ease-in-out infinite;}
  .blob3{width:400px; height:400px; background:var(--cyan); bottom:-140px; left:30%; animation:float3 18s ease-in-out infinite;}
  @keyframes float1{0%,100%{transform:translate(0,0) scale(1);}50%{transform:translate(60px,80px) scale(1.15);}}
  @keyframes float2{0%,100%{transform:translate(0,0) scale(1);}50%{transform:translate(-70px,60px) scale(1.1);}}
  @keyframes float3{0%,100%{transform:translate(0,0) scale(1);}50%{transform:translate(50px,-60px) scale(1.2);}}
  .grid-overlay{position:fixed; inset:0; z-index:1; pointer-events:none; background-image:linear-gradient(rgba(245,243,255,0.035) 1px,transparent 1px),linear-gradient(90deg,rgba(245,243,255,0.035) 1px,transparent 1px); background-size:48px 48px; mask-image:radial-gradient(circle at 50% 20%,black,transparent 75%);}

  header{position:sticky; top:0; z-index:100; background:rgba(13,10,34,0.75); backdrop-filter:blur(14px); border-bottom:1px solid var(--line);}
  nav{display:flex; align-items:center; justify-content:space-between; gap:18px; padding:16px 0;}
  .logo{font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:32px; display:flex; align-items:center; gap:11px; letter-spacing:-0.5px;}
  @media (max-width:600px){ .logo{font-size:25px;} }
  .logo-mark{width:54px; height:54px; border-radius:50%; flex-shrink:0; box-shadow:0 4px 16px rgba(0,0,0,0.25); overflow:visible;}
  @media (max-width:600px){ .logo-mark{width:42px; height:42px;} }
  .logo-mark svg{width:100%; height:100%; display:block; overflow:visible;}
  .logo.sm{font-size:19px;}
  .logo.sm .logo-mark{width:34px; height:34px;}
  .logo span{background:linear-gradient(90deg,var(--gold),#FF7A3D); -webkit-background-clip:text; background-clip:text; color:transparent;}
  .navlinks{display:flex; gap:20px; list-style:none; font-size:13.5px; font-weight:500; white-space:nowrap;}
  .logo{flex-shrink:0;}
  .acct-area{flex-shrink:0;}
  @media (max-width:1240px){ .navlinks{display:none;} }
  .navlinks a{text-decoration:none; opacity:0.85; transition:opacity .2s;}
  .navlinks a:hover{opacity:1; color:var(--cyan);}
  .nav-cta{background:var(--accent); color:#FFFFFF; padding:9px 20px; border-radius:var(--r-sm); text-decoration:none; font-weight:600; font-size:13.5px; transition:box-shadow .25s,transform .2s,background .2s,box-shadow .25s;}
  .nav-cta:hover{background:var(--accent-2); box-shadow:0 4px 16px -4px rgba(14,124,102,.55); transform:translateY(-1px);}

  .hero{padding:100px 0 80px; position:relative; overflow:hidden;}
  .shorthand-bg{position:absolute; inset:0; z-index:0; pointer-events:none; overflow:hidden;}
  .shorthand-bg svg{width:110%; height:110%; position:absolute; top:-5%; left:-5%;}
  .shorthand-bg path{fill:none; stroke-linecap:round; stroke-linejoin:round;}
  .sh-stroke-1{stroke:var(--cyan); opacity:0.16; stroke-width:3; stroke-dasharray:1400; stroke-dashoffset:1400; animation:shDraw1 7s ease-in-out infinite, shDrift1 13s ease-in-out infinite;}
  .sh-stroke-2{stroke:var(--magenta); opacity:0.13; stroke-width:3; stroke-dasharray:1200; stroke-dashoffset:1200; animation:shDraw2 8.5s ease-in-out infinite 1s, shDrift2 15s ease-in-out infinite;}
  .sh-stroke-3{stroke:var(--gold); opacity:0.14; stroke-width:2.6; stroke-dasharray:1000; stroke-dashoffset:1000; animation:shDraw3 6.5s ease-in-out infinite 2s, shDrift1 11s ease-in-out infinite reverse;}
  .sh-stroke-4{stroke:var(--violet); opacity:0.12; stroke-width:2.6; stroke-dasharray:900; stroke-dashoffset:900; animation:shDraw2 9s ease-in-out infinite 0.5s, shDrift2 12s ease-in-out infinite reverse;}
  @keyframes shDraw1{0%{stroke-dashoffset:1400;} 45%,100%{stroke-dashoffset:0;}}
  @keyframes shDraw2{0%{stroke-dashoffset:1200;} 45%,100%{stroke-dashoffset:0;}}
  @keyframes shDraw3{0%{stroke-dashoffset:1000;} 45%,100%{stroke-dashoffset:0;}}
  @keyframes shDrift1{0%,100%{transform:translateY(0) translateX(0);} 50%{transform:translateY(-18px) translateX(8px);}}
  @keyframes shDrift2{0%,100%{transform:translateY(0) translateX(0);} 50%{transform:translateY(16px) translateX(-10px);}}
  @media (prefers-reduced-motion: reduce){ .shorthand-bg path{animation:none !important; stroke-dashoffset:0 !important;} }
  .hero .wrap{display:grid; grid-template-columns:1.05fr 0.95fr; gap:56px; align-items:center;}
  .badge{display:inline-flex; align-items:center; gap:8px; font-family:'IBM Plex Mono',monospace; font-size:11.5px; letter-spacing:1px; padding:7px 14px; border-radius:100px; border:1px solid var(--line); background:var(--glass); margin-bottom:24px; color:var(--cyan);}
  .badge .dot{width:7px; height:7px; border-radius:50%; background:var(--cyan); animation:pulse 1.6s ease-in-out infinite;}
  @keyframes pulse{0%,100%{opacity:1;} 50%{opacity:0.5;}}
  h1{font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:clamp(34px,5vw,54px); line-height:1.08; letter-spacing:-1px; margin-bottom:20px;}
  .gradient-text{background:linear-gradient(90deg,var(--cyan),var(--violet) 55%,var(--magenta)); background-size:200% auto; -webkit-background-clip:text; background-clip:text; color:transparent; animation:shine 5s linear infinite;}
  @keyframes shine{to{background-position:200% center;}}
  .hero p.lede{font-size:17.5px; color:var(--ink-soft); max-width:480px; margin-bottom:30px;}
  .hero-ctas{display:flex; gap:14px; margin-bottom:36px; flex-wrap:wrap;}
  .btn{display:inline-flex; align-items:center; gap:8px; padding:14px 26px; text-decoration:none; font-weight:700; font-size:14.5px; border-radius:100px; transition:transform .2s,box-shadow .3s; cursor:pointer; border:none; font-family:'Sora',sans-serif;}
  .btn-primary{background:linear-gradient(90deg,var(--magenta),var(--violet)); color:#fff; box-shadow:0 8px 30px rgba(255,62,140,0.35);}
  .btn-primary:hover{transform:translateY(-3px) scale(1.02);}
  .btn-ghost{border:1.5px solid var(--line); color:var(--paper); background:var(--glass);}
  .btn-ghost:hover{border-color:var(--cyan); color:var(--cyan);}
  .btn-sm{padding:9px 16px; font-size:13px;}
  .tagrow{display:flex; gap:10px; flex-wrap:wrap;}
  .tag{font-family:'IBM Plex Mono',monospace; font-size:11.5px; padding:6px 12px; border-radius:100px; border:1px solid var(--line); color:var(--ink-soft); background:var(--glass);}
  .tag.new{color:var(--gold); border-color:rgba(255,200,87,0.4);}
  .tag.popular{color:var(--magenta); border-color:rgba(255,62,140,0.4);}
  .tag.free{color:var(--green); border-color:rgba(74,222,128,0.4);}

  .steno-card{background:linear-gradient(160deg,rgba(255,255,255,0.09),rgba(255,255,255,0.02)); border:1px solid var(--line); backdrop-filter:blur(20px); border-radius:20px; padding:24px; box-shadow:0 30px 70px rgba(0,0,0,0.4);}
  .steno-topbar{display:flex; justify-content:space-between; align-items:center; margin-bottom:16px;}
  .live-badge{font-family:'IBM Plex Mono',monospace; font-size:11px; letter-spacing:1.5px; display:flex; align-items:center; gap:7px; color:var(--magenta); font-weight:600;}
  .live-badge .dot{width:7px; height:7px; border-radius:50%; background:var(--magenta); animation:pulse 1.4s infinite;}
  .steno-speed{font-family:'IBM Plex Mono',monospace; font-size:13px; color:var(--gold); font-weight:600;}
  .steno-text{font-family:'IBM Plex Mono',monospace; font-size:14.5px; line-height:1.85; min-height:140px; color:#E8E5FA;}
  .steno-cursor{display:inline-block; width:8px; height:15px; background:var(--cyan); vertical-align:middle; animation:blink 1s step-start infinite;}
  @keyframes blink{50%{opacity:0;}}
  .steno-stats{display:flex; gap:22px; margin-top:18px; padding-top:16px; border-top:1px solid var(--line);}
  .steno-stats .num{font-size:20px; font-weight:700; font-family:'Space Grotesk',sans-serif;}
  .steno-stats .num.c1{color:var(--cyan);} .steno-stats .num.c2{color:var(--gold);} .steno-stats .num.c3{color:var(--magenta);}
  .steno-stats .lbl{font-size:10px; letter-spacing:1px; text-transform:uppercase; color:var(--ink-soft);}

  .marquee-wrap{border-top:1px solid var(--line); border-bottom:1px solid var(--line); padding:18px 0; overflow:hidden; background:rgba(255,255,255,0.02);}
  .marquee-track{display:flex; gap:56px; white-space:nowrap; animation:scroll-left 26s linear infinite; width:max-content;}
  @keyframes scroll-left{from{transform:translateX(0);} to{transform:translateX(-50%);}}
  .marquee-track span{font-family:'IBM Plex Mono',monospace; font-size:13.5px; color:var(--ink-soft);}
  .marquee-track span b{color:var(--cyan);}

  section{padding:100px 0; position:relative;}
  .sec-head{max-width:660px; margin-bottom:48px;}
  .reveal{opacity:0; transform:translateY(26px); transition:opacity .7s ease,transform .7s ease;}
  .reveal.show{opacity:1; transform:translateY(0);}
  .sec-eyebrow{font-family:'IBM Plex Mono',monospace; font-size:11.5px; letter-spacing:2px; text-transform:uppercase; color:var(--cyan); margin-bottom:12px;}
  .sec-head h2{font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:clamp(26px,3.4vw,40px); line-height:1.15; margin-bottom:14px;}
  .sec-head p{color:var(--ink-soft); font-size:16px;}

  .features-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:18px;}
  .feature{background:var(--glass); border:1px solid var(--line); border-radius:16px; padding:28px 24px; transition:transform .3s ease,border-color .3s ease,background .3s ease;}
  .feature:hover{transform:translateY(-6px); border-color:var(--violet); background:rgba(138,92,255,0.08);}
  .feature-top{display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:16px;}
  .ficon{width:40px; height:40px; border-radius:11px; display:flex; align-items:center; justify-content:center; font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:15px; color:#0D0A22;}
  .feature:nth-child(6n+1) .ficon{background:var(--cyan);} .feature:nth-child(6n+2) .ficon{background:var(--gold);}
  .feature:nth-child(6n+3) .ficon{background:var(--magenta); color:#fff;} .feature:nth-child(6n+4) .ficon{background:var(--violet); color:#fff;}
  .feature:nth-child(6n+5) .ficon{background:var(--cyan);} .feature:nth-child(6n+6) .ficon{background:var(--gold);}
  .feature h3{font-family:'Space Grotesk',sans-serif; font-size:18px; margin-bottom:8px;}
  .feature p{color:var(--ink-soft); font-size:14px;}

  /* LIBRARY */
  .filter-row{display:flex; gap:10px; flex-wrap:wrap; margin-bottom:30px;}
  .chip{font-family:'IBM Plex Mono',monospace; font-size:12.5px; padding:8px 16px; border-radius:100px; border:1px solid var(--line); background:var(--glass); cursor:pointer; transition:all .2s; color:var(--ink-soft);}
  .chip:hover{border-color:var(--cyan);}
  .chip.active{background:linear-gradient(90deg,var(--cyan),var(--violet)); color:#0D0A22; font-weight:600; border-color:transparent;}
  .lib-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:18px;}
  .lib-card{background:var(--glass); border:1px solid var(--line); border-radius:16px; padding:24px; transition:transform .3s;}
  .lib-card:hover{transform:translateY(-5px); border-color:var(--cyan);}
  .lib-card .tagrow{margin-bottom:14px;}
  .lib-card h3{font-family:'Space Grotesk',sans-serif; font-size:16.5px; margin-bottom:8px;}
  .lib-card p{color:var(--ink-soft); font-size:13.5px; margin-bottom:14px;}
  .lib-card .meta{font-family:'IBM Plex Mono',monospace; font-size:12px; color:var(--gold); display:flex; justify-content:space-between;}

  /* TOOL */
  .tool-panel{background:var(--glass); border:1px solid var(--line); border-radius:22px; padding:36px; backdrop-filter:blur(16px);}
  .tool-steps{display:flex; gap:10px; margin-bottom:30px; flex-wrap:wrap;}
  .tool-step-badge{font-family:'IBM Plex Mono',monospace; font-size:12px; padding:7px 14px; border-radius:100px; background:rgba(255,255,255,0.05); border:1px solid var(--line); color:var(--ink-soft);}
  .tool-grid{display:grid; grid-template-columns:1fr 1fr; gap:24px; margin-bottom:24px;}
  .field label{display:block; font-family:'IBM Plex Mono',monospace; font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--text-3); margin-bottom:8px;}
  select, textarea, input[type="text"], input[type="password"], input[type="email"]{
    width:100%; background:rgba(255,255,255,0.04); border:1px solid var(--line); border-radius:10px;
    color:var(--paper); padding:12px 14px; font-family:'Sora',sans-serif; font-size:14.5px; resize:vertical;
  }
  select:focus, textarea:focus, input:focus{outline:none; border-color:var(--cyan);}
  textarea{min-height:130px; line-height:1.6;}
  .filerow{display:flex; align-items:center; gap:12px; flex-wrap:wrap;}
  .filebtn{display:inline-flex; align-items:center; gap:8px; padding:10px 16px; border:1px dashed var(--line); border-radius:10px; cursor:pointer; font-size:13px; color:var(--ink-soft); background:rgba(255,255,255,0.03);}
  .filebtn:hover{border-color:var(--cyan); color:var(--cyan);}
  audio{width:100%; margin-top:10px; filter:invert(0.9) hue-rotate(180deg);}
  .toggle-link{font-family:'IBM Plex Mono',monospace; font-size:12px; color:var(--violet); cursor:pointer; text-decoration:underline; background:none; border:none;}
  .master-preview{margin-top:10px; font-family:'IBM Plex Mono',monospace; font-size:13px; color:var(--ink-soft); background:rgba(255,255,255,0.03); border:1px solid var(--line); border-radius:10px; padding:12px; display:none;}
  .master-preview.show{display:block;}
  .tool-actions{display:flex; gap:14px; align-items:center; flex-wrap:wrap; margin-top:8px;}

  .results{margin-top:36px; display:none;}
  .results.show{display:block; animation:fadein .5s ease;}
  @keyframes fadein{from{opacity:0; transform:translateY(10px);} to{opacity:1; transform:translateY(0);}}
  .score-cards{display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-bottom:26px;}
  .score-card{background:rgba(255,255,255,0.04); border:1px solid var(--line); border-radius:14px; padding:18px; text-align:center; transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;}
  .score-card:hover{transform:translateY(-3px); border-color:rgba(138,92,255,0.4); box-shadow:0 12px 26px rgba(13,10,34,0.28);}
  .score-card .num{font-family:'Space Grotesk',sans-serif; font-weight:800; font-size:27px; line-height:1.1; letter-spacing:-0.2px;}
  .score-card .lbl{font-family:'IBM Plex Mono',monospace; font-size:10.5px; letter-spacing:1.1px; text-transform:uppercase; color:var(--ink-soft); margin-top:5px;}
  .err-breakdown{display:grid; grid-template-columns:repeat(5,1fr); gap:12px; margin-bottom:28px;}
  .err-chip{border-radius:12px; padding:14px; text-align:center; border:1px solid var(--line); transition:transform .2s ease, box-shadow .2s ease;}
  .err-chip:hover{transform:translateY(-2px); box-shadow:0 10px 22px rgba(13,10,34,0.22);}
  .err-chip .n{font-family:'Space Grotesk',sans-serif; font-weight:800; font-size:20px; line-height:1.15;}
  .err-chip .l{font-size:11px; color:var(--ink-soft); margin-top:4px;}
  .err-missing{background:rgba(255,92,108,0.12); border-color:rgba(255,92,108,0.3);} .err-missing .n{color:var(--red);}
  .err-extra{background:rgba(255,166,87,0.12); border-color:rgba(255,166,87,0.3);} .err-extra .n{color:var(--orange);}
  .err-spelling{background:rgba(255,62,140,0.12); border-color:rgba(255,62,140,0.3);} .err-spelling .n{color:var(--magenta);}
  .err-cap{background:rgba(192,132,252,0.12); border-color:rgba(192,132,252,0.3);} .err-cap .n{color:var(--purple);}
  .err-punct{background:rgba(51,245,208,0.12); border-color:rgba(51,245,208,0.3);} .err-punct .n{color:var(--cyan);}

  .review-box{background:rgba(255,255,255,0.03); border:1px solid var(--line); border-radius:14px; padding:22px; font-family:'IBM Plex Mono',monospace; font-size:14.5px; line-height:2.1; margin-bottom:20px;}
  .review-box .ok{color:#E8E5FA;}
  .review-box .miss{color:var(--red); text-decoration:line-through; opacity:0.85; font-size:13px;}
  .review-box .extra{background:rgba(255,166,87,0.18); color:var(--orange); padding:1px 4px; border-radius:4px; text-decoration:line-through;}
  .review-box .spell{background:rgba(255,62,140,0.18); color:var(--magenta); padding:1px 4px; border-radius:4px;}
  .review-box .cap{background:rgba(192,132,252,0.18); color:var(--purple); padding:1px 4px; border-radius:4px;}
  .review-box .punct{background:rgba(51,245,208,0.18); color:var(--cyan); padding:1px 4px; border-radius:4px;}
  .legend{display:flex; gap:16px; flex-wrap:wrap; font-size:12px; color:var(--ink-soft); margin-bottom:24px;}
  .legend span{display:inline-flex; align-items:center; gap:6px;}
  .legend i{width:10px; height:10px; border-radius:3px; display:inline-block;}

  /* LEADERBOARD */
  .board{width:100%; border-collapse:collapse; font-size:14px;}
  .board th{text-align:left; font-family:'IBM Plex Mono',monospace; font-size:11px; letter-spacing:1px; text-transform:uppercase; color:var(--text-3); padding:10px 12px; border-bottom:1px solid var(--line);}
  .board td{padding:12px; border-bottom:1px solid var(--line); color:var(--ink-soft);}
  .board tr:hover td{color:var(--paper);}
  .rank-badge{font-family:'Space Grotesk',sans-serif; font-weight:700; width:26px; height:26px; border-radius:8px; display:inline-flex; align-items:center; justify-content:center; font-size:12.5px; background:rgba(255,255,255,0.06);}
  .rank-badge.r1{background:linear-gradient(135deg,var(--gold),#FFD98A); color:#3a2c00;}
  /* r2/r3 were rgba(255,255,255,.18)/rgba(255,166,87,.35) with white text — legible
     on the old dark-cosmic card, invisible on the current light paper card. Rebuilt
     on the app's own brass/ink tokens so the medal set reads gold → silver → bronze. */
  .rank-badge.r2{background:rgba(16,23,37,.08); color:var(--text); border:1px solid rgba(16,23,37,.14);}
  .rank-badge.r3{background:var(--brass-soft); color:var(--brass);}

  /* STEPS */
  .steps{display:grid; grid-template-columns:repeat(4,1fr); gap:18px;}
  .step{background:var(--glass); border:1px solid var(--line); border-radius:16px; padding:26px 22px;}
  .step .stepnum{font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:40px; background:linear-gradient(160deg,var(--cyan),var(--violet)); -webkit-background-clip:text; background-clip:text; color:transparent; margin-bottom:12px; display:block;}
  .step h3{font-family:'Space Grotesk',sans-serif; font-size:16.5px; margin-bottom:8px;}
  .step p{color:var(--ink-soft); font-size:13.5px;}

  .stats-band{background:linear-gradient(120deg,rgba(138,92,255,0.14),rgba(255,62,140,0.10)); border-top:1px solid var(--line); border-bottom:1px solid var(--line);}
  .stats-row{display:grid; grid-template-columns:repeat(4,1fr); gap:18px; text-align:center; padding:64px 0;}
  .stat .num{font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:40px; background:linear-gradient(90deg,var(--cyan),var(--magenta)); -webkit-background-clip:text; background-clip:text; color:transparent;}
  .stat .lbl{font-size:13px; color:var(--ink-soft); margin-top:6px; font-family:'IBM Plex Mono',monospace;}

  .testi-row{display:grid; grid-template-columns:repeat(3,1fr); gap:18px;}
  .testi{background:var(--glass); border:1px solid var(--line); border-radius:16px; padding:26px; transition:transform .3s;}
  .testi:hover{transform:translateY(-5px);}
  .testi .mark{font-family:'Space Grotesk',sans-serif; font-size:32px; color:var(--gold); margin-bottom:8px;}
  .testi p.quote{font-size:14.5px; margin-bottom:16px; color:#EDEBFF;}
  .testi .who{font-family:'IBM Plex Mono',monospace; font-size:12px; color:var(--ink-soft);}
  .testi .who strong{color:var(--paper); display:block; font-family:'Sora',sans-serif; font-size:14px;}

  /* FAQ */
  .faq-item{border-bottom:1px solid var(--line); padding:22px 0;}
  .faq-q{display:flex; justify-content:space-between; align-items:center; cursor:pointer; font-family:'Space Grotesk',sans-serif; font-size:16.5px; font-weight:600;}
  .faq-q .plus{font-size:22px; color:var(--cyan); transition:transform .3s;}
  .faq-item.open .plus{transform:rotate(45deg);}
  .faq-a{max-height:0; overflow:hidden; transition:max-height .35s ease; color:var(--ink-soft); font-size:14.5px;}
  .faq-item.open .faq-a{max-height:200px; padding-top:14px;}

  .price-row{display:grid; grid-template-columns:repeat(3,1fr); gap:20px;}
  .price{border:1.5px solid var(--line); border-radius:16px; padding:30px 26px; background:var(--glass); display:flex; flex-direction:column; transition:transform .3s;}
  .price:hover{transform:translateY(-6px);}
  .price.featured{border-color:var(--magenta); box-shadow:0 20px 60px rgba(255,62,140,0.25); position:relative; background:rgba(255,62,140,0.06);}
  .price.featured::before{content:'MOST CHOSEN'; position:absolute; top:-12px; right:22px; background:linear-gradient(90deg,var(--magenta),var(--violet)); color:#fff; font-family:'IBM Plex Mono',monospace; font-size:10px; letter-spacing:1px; padding:5px 11px; border-radius:100px; font-weight:600;}
  .price h3{font-family:'Space Grotesk',sans-serif; font-size:17px; margin-bottom:6px;}
  .price .amt{font-size:34px; font-weight:700; margin:12px 0 4px; font-family:'Space Grotesk',sans-serif;}
  .price .per{color:var(--ink-soft); font-size:12.5px; margin-bottom:20px;}
  .price ul{list-style:none; margin-bottom:24px; flex-grow:1;}
  .price li{font-size:14px; padding:8px 0; border-top:1px solid var(--line); color:var(--ink-soft);}
  .price li:first-child{border-top:none;}
  .price li::before{content:'✦ '; color:var(--cyan);}
  .price .btn{justify-content:center; width:100%;}

  .cta-band{text-align:center; padding:100px 0;}
  .cta-band h2{font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:clamp(28px,4.2vw,44px); margin-bottom:16px;}
  .cta-band p{color:var(--ink-soft); margin-bottom:28px; font-size:15.5px;}

  footer{padding:50px 0 40px; border-top:1px solid var(--line);}
  .foot-grid{display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:30px; margin-bottom:34px;}
  .foot-col h4{font-family:'Space Grotesk',sans-serif; font-size:13px; letter-spacing:1px; text-transform:uppercase; color:var(--cyan); margin-bottom:14px;}
  .foot-col ul{list-style:none;}
  .foot-col li{margin-bottom:10px;}
  .foot-col a{text-decoration:none; color:var(--ink-soft); font-size:14px;}
  .foot-col a:hover{color:var(--paper);}
  .foot-copy{font-family:'IBM Plex Mono',monospace; font-size:12px; color:var(--ink-soft); border-top:1px solid var(--line); padding-top:20px;}

  @media (max-width:980px){
    .hero .wrap{grid-template-columns:1fr;}
    .features-grid, .lib-grid{grid-template-columns:1fr 1fr;}
    .steps{grid-template-columns:1fr 1fr;}
    .stats-row{grid-template-columns:1fr 1fr;}
    .testi-row{grid-template-columns:1fr;}
    .price-row{grid-template-columns:1fr;}
    .tool-grid{grid-template-columns:1fr;}
    .score-cards{grid-template-columns:1fr 1fr;}
    .err-breakdown{grid-template-columns:1fr 1fr;}
    .foot-grid{grid-template-columns:1fr 1fr;}
  }
  @media (prefers-reduced-motion: reduce){ *{animation:none !important; transition:none !important;} }
  a:focus-visible, button:focus-visible, select:focus-visible{outline:2px solid var(--cyan); outline-offset:3px;}

  /* LIGHT SECTIONS — mix of dark + light for visual contrast */
  .light-section{
    background:#F5F3FF; color:#1A1533;
    --ink-soft:#5B5480; --line:rgba(22,17,58,0.13); --glass:rgba(22,17,58,0.045);
  }
  .light-section .sec-eyebrow{color:var(--violet);}
  .light-section .grid-overlay{display:none;}
  .light-section .price.featured{background:rgba(255,62,140,0.06);}
  .light-section select, .light-section textarea, .light-section input[type="text"], .light-section input[type="password"], .light-section input[type="email"]{
    color:#1A1533; background:rgba(22,17,58,0.04); border-color:rgba(22,17,58,0.15);
  }
  .light-section select option{ color:#1A1533; background:#fff; }
  .light-section .typing-input::placeholder{ color:#8C87A6; }

  /* ============ APP DASHBOARD ============ */
  #appShell{display:none; position:fixed; inset:0; z-index:500; background:#F3F1FB;}
  #appShell.show{display:flex;}
  .dash-bg{position:absolute; inset:0; z-index:0; overflow:hidden; pointer-events:none;}
  .dash-bg svg{width:100%; height:100%;}
  .dash-bg path{fill:none; stroke-linecap:round; opacity:0.10; stroke-width:2.6;}
  .dsh-1{stroke:var(--violet); stroke-dasharray:1400; stroke-dashoffset:1400; animation:dshDraw 8s ease-in-out infinite, dshDrift 16s ease-in-out infinite;}
  .dsh-2{stroke:var(--magenta); stroke-dasharray:1300; stroke-dashoffset:1300; animation:dshDraw 9s ease-in-out infinite 1.2s, dshDrift 18s ease-in-out infinite reverse;}
  .dsh-3{stroke:var(--gold); stroke-dasharray:600; stroke-dashoffset:600; animation:dshDraw 6s ease-in-out infinite 0.6s, dshDrift 12s ease-in-out infinite;}
  .dsh-4{stroke:var(--cyan); stroke-dasharray:500; stroke-dashoffset:500; animation:dshDraw 7s ease-in-out infinite 1.8s, dshDrift 14s ease-in-out infinite reverse;}
  @keyframes dshDraw{0%{stroke-dashoffset:1400;} 50%,100%{stroke-dashoffset:0;}}
  @keyframes dshDrift{0%,100%{transform:translate(0,0);} 50%{transform:translate(14px,-16px);}}

  /* distinct dashboard-only ambience: soft drifting orbs + faint grid + floating keycaps */
  .dash-grid{position:absolute; inset:0; z-index:0; pointer-events:none;
    background-image:linear-gradient(rgba(22,17,58,0.045) 1px,transparent 1px),linear-gradient(90deg,rgba(22,17,58,0.045) 1px,transparent 1px);
    background-size:56px 56px; mask-image:radial-gradient(circle at 30% 20%, black, transparent 78%);}
  .dash-orb{position:absolute; border-radius:50%; filter:blur(80px); opacity:0.16; z-index:0; pointer-events:none;}
  .dash-orb.o1{width:420px; height:420px; background:var(--violet); top:-120px; right:-80px; animation:orbA 20s ease-in-out infinite;}
  .dash-orb.o2{width:360px; height:360px; background:var(--cyan); bottom:-140px; left:8%; animation:orbB 24s ease-in-out infinite;}
  .dash-orb.o3{width:300px; height:300px; background:var(--magenta); top:38%; right:22%; animation:orbA 27s ease-in-out infinite reverse;}
  @keyframes orbA{0%,100%{transform:translate(0,0) scale(1);}50%{transform:translate(-50px,60px) scale(1.14);}}
  @keyframes orbB{0%,100%{transform:translate(0,0) scale(1);}50%{transform:translate(60px,-50px) scale(1.1);}}
  .dash-keys{position:absolute; inset:0; z-index:0; pointer-events:none; overflow:hidden;}
  .dash-key{position:absolute; font-family:'IBM Plex Mono',monospace; font-size:13px; font-weight:600;
    color:rgba(90,70,180,0.16); border:1px solid rgba(90,70,180,0.14); border-radius:7px; padding:5px 9px;
    animation:keyFloat linear infinite;}
  @keyframes keyFloat{0%{transform:translateY(110%) rotate(-6deg); opacity:0;}
    12%{opacity:1;} 88%{opacity:1;} 100%{transform:translateY(-130%) rotate(6deg); opacity:0;}}
  @media (prefers-reduced-motion: reduce){ .dash-orb,.dash-key{animation:none !important;} }

  .dash-sidebar{width:250px; flex-shrink:0; background:#161232; display:flex; flex-direction:column; padding:24px 18px; position:relative; z-index:2; height:100%; overflow-y:auto;}
  .dash-logo{display:flex; align-items:center; gap:9px; font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:19px; color:#F5F3FF; padding:0 8px; margin-bottom:34px;}
  .dash-logo .logo-mark{width:30px; height:30px;}
  .dash-logo span{background:linear-gradient(90deg,var(--gold),#FF7A3D); -webkit-background-clip:text; background-clip:text; color:transparent;}
  .dash-nav{display:flex; flex-direction:column; gap:6px; flex:1; justify-content:flex-start; align-content:flex-start;}
  .dash-nav-item{flex:0 0 auto;}
  .dash-nav-item{display:flex; align-items:center; gap:12px; text-align:left; background:none; border:none; color:rgba(245,243,255,0.68); font-family:'Sora',sans-serif; font-size:14.5px; font-weight:500; padding:12px 14px; border-radius:12px; cursor:pointer; transition:background .2s, color .2s;}
  .dash-nav-item:hover{background:rgba(255,255,255,0.06); color:#fff;}
  .dash-nav-item.active{background:linear-gradient(90deg,rgba(51,245,208,0.18),rgba(138,92,255,0.18)); color:#fff; box-shadow:inset 0 0 0 1px rgba(255,255,255,0.08);}
  .dni-icon{font-size:17px;}
  .dash-sidebar-foot{display:flex; flex-direction:column; gap:10px; padding-top:16px; border-top:1px solid rgba(255,255,255,0.1);}
  .dash-sidebar-foot a{color:rgba(245,243,255,0.55); font-size:13px; text-decoration:none;}
  .dash-sidebar-foot a:hover{color:#fff;}
  .dash-logout{background:rgba(255,92,108,0.12); border:1px solid rgba(255,92,108,0.3); color:#FF8A94; font-family:'Sora',sans-serif; font-size:13.5px; font-weight:600; padding:10px; border-radius:10px; cursor:pointer;}
  .dash-logout:hover{background:rgba(255,92,108,0.22);}

  .dash-main{flex:1; display:flex; flex-direction:column; position:relative; z-index:2; height:100%; min-width:0;}
  .dash-topbar{display:flex; align-items:center; justify-content:space-between; padding:16px 28px; background:rgba(255,255,255,0.7); backdrop-filter:blur(10px); border-bottom:1px solid rgba(22,17,58,0.08); flex-shrink:0;}
  .dash-search{display:flex; align-items:center; gap:8px; background:#fff; border:1px solid rgba(22,17,58,0.1); border-radius:100px; padding:9px 16px; font-size:13px; color:#8C87A6; flex:1; max-width:340px;}
  .dash-search input{border:none; outline:none; background:none; font-family:'Sora',sans-serif; font-size:13.5px; color:#1A1533; width:100%;}
  .dash-top-right{display:flex; align-items:center; gap:14px;}
  .dash-plan-badge{font-family:'IBM Plex Mono',monospace; font-size:11px; font-weight:700; padding:5px 12px; border-radius:100px; background:rgba(255,200,87,0.18); color:#8a5c00;}
  .dash-user{display:flex; align-items:center; gap:9px; font-family:'Sora',sans-serif; font-size:14px; font-weight:600; color:#1A1533;}
  .dash-avatar{width:34px; height:34px; border-radius:50%; background:linear-gradient(135deg,var(--cyan),var(--violet)); display:flex; align-items:center; justify-content:center; font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:14px; color:#0D0A22;}

  .dash-scroll{flex:1; overflow-y:auto; padding:34px 32px 60px;}
  .dash-view{display:none;}
  .dash-view.active{display:block; animation:dashFadeIn .35s ease;}
  @keyframes dashFadeIn{from{opacity:0; transform:translateY(8px);} to{opacity:1; transform:translateY(0);}}
  .dash-h1{font-family:'Space Grotesk',sans-serif; font-weight:800; font-size:28px; color:#1A1533; margin-bottom:6px;}
  .dash-h3{font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:17px; color:#1A1533; margin-bottom:14px;}
  .dash-sub{color:#5B5480; font-size:15px; margin-bottom:28px;}

  .dash-card-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:18px;}
  .dash-card{background:#fff; border:1px solid rgba(22,17,58,0.08); border-radius:18px; padding:24px; box-shadow:0 8px 24px rgba(22,17,58,0.06); cursor:pointer; transition:transform .25s, box-shadow .25s;}
  .dash-card:hover{transform:translateY(-5px); box-shadow:0 16px 34px rgba(22,17,58,0.12);}
  .dc-icon{width:48px; height:48px; border-radius:14px; display:flex; align-items:center; justify-content:center; font-size:22px; margin-bottom:16px;}
  .dash-card h3{font-family:'Space Grotesk',sans-serif; font-size:16.5px; color:#1A1533; margin-bottom:8px;}
  .dash-card p{font-size:13.5px; color:#5B5480; margin-bottom:16px; line-height:1.5;}
  .dash-card .btn-sm{padding:9px 18px; font-size:13px;}

  /* dashboard home extras */
  .dash-stat-row{display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:14px;}
  .dash-stat{background:#fff; border:1px solid rgba(22,17,58,0.08); border-radius:14px; padding:18px; text-align:center; box-shadow:0 6px 18px rgba(22,17,58,0.05);}
  .ds-n{font-family:'Space Grotesk',sans-serif; font-weight:800; font-size:26px; color:var(--violet);}
  .ds-l{font-size:12px; color:#5B5480; margin-top:4px;}
  .quick-row{display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:12px;}
  .quick-btn{display:flex; flex-direction:column; align-items:flex-start; gap:3px; text-align:left; cursor:pointer;
    background:#fff; border:1px solid rgba(22,17,58,0.1); border-radius:12px; padding:14px 16px;
    font-family:'Sora',sans-serif; font-size:14.5px; font-weight:600; color:#14102E; transition:transform .2s, border-color .2s, box-shadow .2s;}
  .quick-btn span{font-family:'IBM Plex Mono',monospace; font-size:11px; font-weight:400; color:#5B5480;}
  .quick-btn:hover{transform:translateY(-3px); border-color:var(--violet); box-shadow:0 10px 24px rgba(138,92,255,0.16);}
  .dash-two-col{display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:18px; margin-top:34px;}
  .dash-info-card{background:#fff; border:1px solid rgba(22,17,58,0.08); border-radius:16px; padding:22px 24px; box-shadow:0 6px 18px rgba(22,17,58,0.05);}
  .dash-info-card h4{font-family:'IBM Plex Sans Condensed',sans-serif; font-size:16px; color:#14102E; margin-bottom:12px;}
  .dash-info-card ul{list-style:none; display:flex; flex-direction:column; gap:9px;}
  .dash-info-card li{font-size:13.5px; color:#4A4370; line-height:1.55; padding-left:18px; position:relative;}
  .dash-info-card li::before{content:'▸'; position:absolute; left:0; color:var(--violet);}
  .dash-info-card b{color:#14102E;}

  /* reuse existing component classes (tool-panel, board, review-box etc) inside dashboard views: force light styling */
  #appShell .tool-panel{background:#fff; border-color:rgba(22,17,58,0.08); box-shadow:0 8px 24px rgba(22,17,58,0.05);}
  #appShell .sec-head{max-width:none;}
  #appShell .sec-eyebrow{color:var(--violet);}
  #appShell .sec-head h2{color:#1A1533;}
  #appShell .sec-head p{color:#5B5480;}
  #appShell label{color:var(--violet);}
  #appShell .score-card{background:rgba(22,17,58,0.04); border-color:rgba(22,17,58,0.1);}
  #appShell .score-card .lbl{color:#5B5480;}
  #appShell .review-box{background:rgba(22,17,58,0.04); border-color:rgba(22,17,58,0.12); color:#1A1533;}
  #appShell .review-box .ok{color:#332C55;}
  #appShell .review-box .miss{color:#D0342C;}
  #appShell .review-box .extra{background:rgba(242,120,47,0.14); color:#C2540E;}
  #appShell .review-box .spell{background:rgba(216,20,105,0.12); color:#B1005A;}
  #appShell .review-box .cap{background:rgba(138,92,255,0.14); color:#6B3FD4;}
  #appShell .review-box .punct{background:rgba(14,138,158,0.14); color:#0E7A8E;}
  #appShell .board td{color:#5B5480;} #appShell .board th{color:var(--text-3);} #appShell .board tr:hover td{color:#1A1533;}
  #appShell .passage-meta-bar, #appShell .wpm-graph-wrap, #appShell .master-preview{background:rgba(22,17,58,0.04); border-color:rgba(22,17,58,0.12);}
  #appShell .pmb-title, #appShell .typing-target{color:#1A1533;}
  #appShell .admin-stat, #appShell .admin-table-wrap, #appShell .mist-card{background:#fff; border-color:rgba(22,17,58,0.08);}
  #appShell select, #appShell textarea, #appShell input[type="text"], #appShell input[type="password"]{ color:#1A1533; background:rgba(22,17,58,0.04); border-color:rgba(22,17,58,0.15); }
  #appShell .tool-step-badge{background:rgba(22,17,58,0.05); color:#5B5480;}
  #appShell .chip{background:#fff; border-color:rgba(22,17,58,0.18); color:#3A3358; font-weight:600;}
  #appShell .chip:hover{border-color:var(--violet); color:var(--violet);}
  #appShell .chip.active{background:linear-gradient(90deg,var(--cyan),var(--violet)); color:#0D0A22; border-color:transparent;}
  #appShell .chip:disabled{opacity:0.45; cursor:not-allowed;}
  #appShell .toggle-link{color:var(--violet); font-weight:600;}
  #appShell .pmb-tags{color:#5B5480;}
  #appShell .btn-ghost{color:#3A3358; border-color:rgba(22,17,58,0.2); background:#fff;}
  #appShell .btn-ghost:hover{border-color:var(--violet); color:var(--violet);}
  #appShell .legend{color:#5B5480;}
  #appShell .err-chip .l{color:#5B5480;}
  #appShell #noAudioNote{color:#5B5480 !important;}
  #appShell .steno-stats .lbl, #appShell .lbl{color:#5B5480;}
  #appShell .wpm-graph-label{color:#5B5480;}
  #appShell .score-card .num{color:#14102E;}
  #appShell .display{color:#14102E;}
  #appShell .dash-h3{color:#14102E;}

  @media (max-width:900px){
    .dash-sidebar{position:fixed; left:-260px; top:0; bottom:0; transition:left .25s ease; box-shadow:10px 0 30px rgba(0,0,0,0.3);}
    .dash-sidebar.open{left:0;}
    .dash-search{display:none;}
  }

  /* SAMPLE DEMO SECTION (Rapid-Steno style, light) */
  .demo-card{background:#fff; border:1px solid rgba(22,17,58,0.09); border-radius:18px; padding:26px; margin-bottom:20px; box-shadow:0 6px 24px rgba(22,17,58,0.05);}
  .demo-card h3{font-family:'Space Grotesk',sans-serif; font-size:17px; margin-bottom:14px; display:flex; align-items:center; gap:8px; color:#1A1533;}
  .demo-text{font-size:15px; line-height:1.9; color:#332C55; max-height:280px; overflow-y:auto; padding-right:6px;}
  .demo-text.compare{font-family:'IBM Plex Mono',monospace; font-size:13.5px; line-height:2.1;}
  .demo-text::-webkit-scrollbar{width:6px;}
  .demo-text::-webkit-scrollbar-thumb{background:rgba(22,17,58,0.2); border-radius:6px;}
  .demo-stat-row{display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-bottom:20px;}
  .demo-stat{background:#fff; border:1px solid rgba(22,17,58,0.09); border-radius:14px; padding:16px; text-align:center;}
  .demo-stat .n{font-family:'Space Grotesk',sans-serif; font-weight:800; font-size:26px;}
  .demo-stat .l{font-size:11.5px; color:#5B5480; margin-top:4px;}
  .mist-band{background:linear-gradient(90deg,var(--violet),var(--magenta)); border-radius:16px 16px 0 0; padding:18px 24px; color:#fff;}
  .mist-band h3{font-size:18px; font-family:'Space Grotesk',sans-serif; margin-bottom:2px;}
  .mist-band p{font-size:13px; opacity:0.9;}
  .mist-grid{display:grid; grid-template-columns:repeat(5,1fr); gap:12px; background:#fff; border:1px solid rgba(22,17,58,0.09); border-top:none; border-radius:0 0 16px 16px; padding:18px;}
  .mist-grid .mist-card{padding:12px 13px;}
  .mist-grid .mist-card-head b{font-size:12.5px;}
  .mist-grid .mist-item{font-size:12px; padding:3px 0; gap:5px; flex-wrap:wrap;}
  .mist-grid .mist-count{font-size:11px; padding:2px 8px;}
  @media (max-width:1000px){ .mist-grid{grid-template-columns:repeat(2,1fr);} }
  @media (max-width:560px){ .mist-grid{grid-template-columns:1fr;} }
  .mist-card{background:#F8F7FD; border-radius:12px; padding:16px 18px;}
  .mist-card-head{display:flex; align-items:center; justify-content:space-between; margin-bottom:10px;}
  .mist-card-head b{font-size:14.5px; color:#1A1533;}
  .mist-count{font-family:'IBM Plex Mono',monospace; font-size:12px; font-weight:700; padding:3px 10px; border-radius:100px; color:#fff;}
  .mist-item{font-size:13.5px; padding:5px 0; color:#332C55; display:flex; align-items:center; gap:8px;}
  .mist-item.single{color:#B4453A;}
  .mist-item .wrong{color:#B4453A; text-decoration:line-through;}
  .mist-item .arrow{color:#8C87A6;}
  .mist-item .right{color:#1C8A6E; font-weight:600;}

  /* TYPING TEST - new elements */
  .passage-meta-bar{display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:10px; background:rgba(255,255,255,0.04); border:1px solid var(--line); border-radius:10px; padding:10px 14px; margin-bottom:14px;}
  .pmb-title{font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:14.5px; margin-right:10px;}
  .pmb-tags{font-family:'IBM Plex Mono',monospace; font-size:11.5px; color:var(--ink-soft);}
  .wpm-graph-wrap{margin:18px 0; background:rgba(255,255,255,0.03); border:1px solid var(--line); border-radius:12px; padding:12px 16px;}
  .wpm-graph-label{font-family:'IBM Plex Mono',monospace; font-size:10.5px; letter-spacing:1px; text-transform:uppercase; color:var(--ink-soft); margin-bottom:6px;}
  .wpm-graph{width:100%; height:50px; display:block;}

  /* BIG TIMER */
  .big-timer-bar{display:flex; align-items:center; justify-content:center; gap:0; background:linear-gradient(90deg,var(--violet),var(--magenta)); border-radius:14px; padding:16px; margin-bottom:16px; color:#fff;}
  .bt-item{text-align:center; padding:0 24px;}
  .bt-label{font-family:'IBM Plex Mono',monospace; font-size:10.5px; letter-spacing:1.5px; text-transform:uppercase; opacity:0.85; margin-bottom:4px;}
  .bt-val{font-family:'Space Grotesk',sans-serif; font-weight:800; font-size:30px;}
  .bt-remaining .bt-val{color:#FFE9A8;}
  .bt-divider{width:1px; height:40px; background:rgba(255,255,255,0.3);}

  /* PASSAGE PICKER LIST */
  .passage-pick-item{display:flex; align-items:center; justify-content:space-between; gap:12px; padding:14px 12px; border-bottom:1px solid var(--line); cursor:pointer; border-radius:8px; transition:background .15s;}
  .passage-pick-item:hover{background:rgba(255,255,255,0.05);}
  .ppi-title{font-family:'IBM Plex Sans Condensed',sans-serif; font-weight:600; font-size:14.5px; margin-bottom:3px;}
  .ppi-meta{font-family:'IBM Plex Mono',monospace; font-size:11px; color:var(--text-3);}
  .ppi-arrow{font-size:18px; color:var(--cyan); flex-shrink:0;}

  /* light-section overrides for review box used inside typing results */
  .light-section .review-box{background:rgba(22,17,58,0.04); border-color:rgba(22,17,58,0.12); color:#1A1533;}
  .light-section .review-box .ok{color:#332C55;}
  .light-section .review-box .miss{color:#D0342C;}
  .light-section .review-box .extra{background:rgba(242,120,47,0.14); color:#C2540E;}
  .light-section .review-box .spell{background:rgba(216,20,105,0.12); color:#B1005A;}
  .light-section .review-box .cap{background:rgba(138,92,255,0.14); color:#6B3FD4;}
  .light-section .review-box .punct{background:rgba(14,138,158,0.14); color:#0E7A8E;}
  .light-section .tool-panel{background:rgba(255,255,255,0.85); border-color:rgba(22,17,58,0.1);}
  .light-section .score-card{background:rgba(22,17,58,0.04); border-color:rgba(22,17,58,0.12);}
  .light-section .score-card .lbl{color:#5B5480;}
  .light-section .passage-meta-bar{background:rgba(22,17,58,0.04); border-color:rgba(22,17,58,0.12);}
  .light-section .pmb-title{color:#1A1533;}
  .light-section .typing-target{color:#332C55;}
  .light-section .wpm-graph-wrap{background:rgba(22,17,58,0.03); border-color:rgba(22,17,58,0.12);}
  .light-section .board td{color:#5B5480;}
  .light-section .board tr:hover td{color:#1A1533;}
  .light-section .board th{color:var(--text-3);}
  .demo-text.compare .ok{color:#332C55;}
  .demo-text.compare .miss{color:#D0342C; text-decoration:line-through; opacity:0.85; font-size:12.5px;}
  .demo-text.compare .extra{background:rgba(242,120,47,0.14); color:#C2540E; padding:1px 4px; border-radius:4px; text-decoration:line-through;}
  .demo-text.compare .spell{background:rgba(216,20,105,0.12); color:#B1005A; padding:1px 4px; border-radius:4px;}
  .demo-text.compare .cap{background:rgba(138,92,255,0.14); color:#6B3FD4; padding:1px 4px; border-radius:4px;}
  .demo-text.compare .punct{background:rgba(14,138,158,0.14); color:#0E7A8E; padding:1px 4px; border-radius:4px;}

  /* ACCOUNT NAV */
  .acct-area{display:flex; align-items:center; gap:10px;}
  .nav-ghost-btn{background:none; border:1.5px solid var(--line); color:var(--paper); padding:9px 18px; border-radius:100px; font-size:13.5px; font-weight:600; cursor:pointer; font-family:'Sora',sans-serif;}
  .nav-ghost-btn:hover{border-color:var(--cyan); color:var(--cyan);}
  .acct-chip{display:flex; align-items:center; gap:8px; background:var(--glass); border:1px solid var(--line); padding:6px 14px 6px 8px; border-radius:100px; font-size:13px;}
  .acct-avatar{width:26px; height:26px; border-radius:50%; background:linear-gradient(135deg,var(--cyan),var(--violet)); display:flex; align-items:center; justify-content:center; font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:12px; color:#0D0A22;}
  .plan-badge{font-family:'IBM Plex Mono',monospace; font-size:10px; padding:2px 8px; border-radius:100px; background:rgba(255,200,87,0.18); color:var(--gold); font-weight:600;}

  /* MODAL */
  .modal-overlay{display:none; position:fixed; inset:0; background:rgba(16,23,37,0.52); -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px); z-index:1000; align-items:center; justify-content:center; padding:20px;}
  .modal-overlay.show{display:flex;}
  /* Auth modal — was #161232 with muted-on-dark text and a cyan/violet gradient tab.
     Now a paper surface: ink heading, readable labels, one teal active state. */
  .modal-box{background:#FFFFFF; border:1px solid var(--rule); border-radius:14px;
    padding:30px 28px; max-width:420px; width:100%;
    box-shadow:0 4px 12px rgba(16,23,37,.12), 0 32px 64px -24px rgba(16,23,37,.45);
    position:relative; color:var(--text);}
  .modal-close{position:absolute; top:14px; right:14px; width:34px; height:34px;
    background:none; border:1px solid transparent; border-radius:8px; color:var(--text-2);
    font-size:20px; cursor:pointer; line-height:1; transition:background .15s, color .15s, border-color .15s;}
  .modal-close:hover{background:var(--paper-2); color:var(--text); border-color:var(--rule);}
  .modal-tabs{display:flex; gap:4px; margin-bottom:22px; background:var(--paper-2);
    border:1px solid var(--rule-soft); border-radius:8px; padding:4px;}
  .modal-tab{flex:1; text-align:center; padding:9px; border-radius:6px; font-size:13.5px;
    font-weight:600; cursor:pointer; color:var(--text-2); transition:background .15s, color .15s;}
  .modal-tab:hover{color:var(--text);}
  .modal-tab.active{background:var(--accent); color:#FFFFFF;}
  .modal-title{font-family:'IBM Plex Sans Condensed','IBM Plex Sans',sans-serif; font-size:21px;
    font-weight:700; color:var(--text); margin-bottom:6px; letter-spacing:-.016em;}
  .modal-sub{font-size:13.5px; color:var(--text-2); margin-bottom:20px; line-height:1.55;}
  .modal-box .field{margin-bottom:14px;}
  .modal-box label{display:block; font-size:12.5px; color:var(--ink-soft); margin-bottom:6px;}
  /* SEC-3 Increment B (Finding 5): disclosure copy under the private "Your name"
     and public "Public leaderboard name" signup fields. */
  .field-note{font-size:11px; color:var(--text-3); margin-top:5px; line-height:1.4;}
  .modal-err{font-size:12.5px; color:var(--red); margin-bottom:12px; display:none;}
  .modal-err.show{display:block;}
  .modal-box .btn{width:100%; justify-content:center; margin-top:6px;}

  /* ADMIN PANEL */
  #adminSection{display:none;}
  #adminSection.show{display:block;}
  .admin-tabs{display:flex; gap:10px; margin-bottom:26px; flex-wrap:wrap;}
  .admin-tab-btn{background:#fff; border:1px solid var(--rule); color:var(--text); padding:10px 20px; border-radius:100px; font-size:13.5px; cursor:pointer; font-family:'IBM Plex Sans',sans-serif;}
  .admin-tab-btn.active{background:linear-gradient(90deg,var(--cyan),var(--violet)); color:#0D0A22; font-weight:700; border-color:transparent;}
  .admin-panel-view{display:none;}
  .admin-panel-view.active{display:block;}
  .admin-stats{display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-bottom:32px;}
  .admin-stat{background:var(--glass); border:1px solid var(--line); border-radius:14px; padding:20px; text-align:center;}
  .admin-stat .n{font-family:'IBM Plex Mono',monospace; font-weight:700; font-size:28px; color:var(--cyan);}
  .admin-stat .l{font-size:11.5px; color:var(--text-3); margin-top:4px;}
  .admin-table-wrap{overflow-x:auto; background:var(--glass); border:1px solid var(--line); border-radius:14px; padding:10px;}
  .admin-table{width:100%; border-collapse:collapse; font-size:13.5px;}
  .admin-table th{text-align:left; font-family:'IBM Plex Mono',monospace; font-size:10.5px; letter-spacing:1px; text-transform:uppercase; color:var(--text-3); padding:12px; border-bottom:1px solid var(--line);}
  .admin-table td{padding:12px; border-bottom:1px solid var(--line); color:var(--text-2);}
  .del-btn{background:rgba(255,92,108,0.15); border:1px solid rgba(255,92,108,0.4); color:var(--red); padding:6px 12px; border-radius:8px; font-size:12px; cursor:pointer; font-family:'IBM Plex Sans',sans-serif;}
  .del-btn:hover{background:rgba(255,92,108,0.3);}
  @media (max-width:700px){ .admin-stats{grid-template-columns:1fr 1fr;} }

  /* LOCKED / GATED SECTIONS */
  .locked-wrap{position:relative; border-radius:22px; overflow:hidden;}
  .locked-blur{filter:blur(6px); pointer-events:none; user-select:none;}
  .lock-overlay{position:absolute; inset:0; background:rgba(13,10,34,0.82); display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:30px; border-radius:22px; z-index:10;}
  .lock-icon{font-size:34px; margin-bottom:14px;}
  .lock-overlay h3{font-family:'Space Grotesk',sans-serif; font-size:20px; margin-bottom:10px;}
  .lock-overlay p{color:var(--ink-soft); font-size:14px; max-width:380px; margin-bottom:22px;}

  .trial-banner{display:none; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap; background:rgba(255,200,87,0.1); border:1px solid rgba(255,200,87,0.35); border-radius:14px; padding:14px 20px; margin-bottom:24px;}
  .trial-banner.show{display:flex;}
  .trial-banner.expired{background:rgba(255,92,108,0.1); border-color:rgba(255,92,108,0.35);}
  .trial-banner span{font-family:'IBM Plex Mono',monospace; font-size:13px; color:var(--gold);}
  .trial-banner.expired span{color:var(--red);}
  /* Sync status: only rendered when something is actually waiting to reach the server. */
  .sync-badge{display:none; align-items:center; max-width:1100px; margin-left:auto; margin-right:auto; gap:8px; font-family:'IBM Plex Mono',monospace; font-size:12px; color:var(--ink-soft); background:rgba(138,92,255,0.08); border:1px solid rgba(138,92,255,0.28); border-radius:12px; padding:9px 14px; margin-bottom:16px;}
  .sync-badge.show{display:flex;}
  .sync-badge.offline{background:rgba(255,200,87,0.1); border-color:rgba(255,200,87,0.35); color:var(--gold);}

  .teaser-grid{display:grid; grid-template-columns:1fr 1fr; gap:20px;}
  .teaser-card{background:var(--glass); border:1px solid var(--line); border-radius:18px; padding:32px; position:relative; overflow:hidden;}
  .teaser-card .lock-icon{font-size:28px; margin-bottom:14px;}
  .teaser-card h3{font-family:'Space Grotesk',sans-serif; font-size:20px; margin-bottom:10px;}
  .teaser-card p{color:var(--ink-soft); font-size:14.5px; margin-bottom:20px;}



  .lib-list{display:flex; flex-direction:column; gap:10px;}
  .lib-row{display:flex; align-items:center; justify-content:space-between; gap:14px; background:#fff; border:1px solid rgba(22,17,58,0.09); border-radius:12px; padding:14px 18px;}
  .lib-row .lr-title{font-family:'IBM Plex Sans Condensed',sans-serif; font-weight:600; font-size:14.5px; color:#14102E;}
  .lib-row .lr-meta{font-family:'IBM Plex Mono',monospace; font-size:11px; color:#5B5480; margin-top:3px;}
  .lib-row .lr-kind{font-family:'IBM Plex Mono',monospace; font-size:10px; font-weight:700; padding:3px 9px; border-radius:100px; white-space:nowrap;}
  /* Was hardcoded purple/cyan from the pre-redesign palette — retinted onto the
     app's own two accent families so Dictation/Typing stay distinguishable
     without reintroducing a legacy color. */
  .lr-kind.sh{background:var(--brass-soft); color:var(--brass);}
  .lr-kind.type{background:var(--accent-soft); color:var(--accent);}


  .dict-player{display:flex; align-items:center; gap:9px; flex-wrap:wrap;}
  .dict-btn{background:linear-gradient(90deg,var(--violet),var(--magenta)); color:#fff; border:none; cursor:pointer;
    font-family:'Sora',sans-serif; font-weight:700; font-size:13px; padding:9px 16px; border-radius:100px;}
  .dict-btn:hover{filter:brightness(1.08);}
  .dict-btn.ghost{background:#fff; color:#3A3358; border:1px solid rgba(22,17,58,0.18);}
  .dict-btn:disabled{opacity:0.45; cursor:not-allowed;}
  .dict-speed-label{font-family:'IBM Plex Mono',monospace; font-size:10.5px; letter-spacing:1px; text-transform:uppercase; color:#5B5480;}
  .dict-speed{margin-bottom:0 !important; gap:5px !important;}
  .dict-speed .chip{padding:5px 11px; font-size:11.5px;}
  .dict-note, .dict-progress{font-family:'IBM Plex Mono',monospace; font-size:11px; color:#5B5480;}


  .admin-nav-btn{margin-left:10px; background:rgba(255,200,87,0.14); border:1px solid rgba(255,200,87,0.45);
    color:var(--gold); font-family:'Sora',sans-serif; font-weight:700; font-size:13px; padding:9px 16px;
    border-radius:100px; cursor:pointer; white-space:nowrap; transition:background .2s, transform .2s;}
  .admin-nav-btn:hover{background:rgba(255,200,87,0.26); transform:translateY(-1px);}
  /* Bug fix (Admin Content Studio Phase 1): this rule used to be display:none below
     900px, which removed the ONLY prominent admin entry point on every phone and
     most tablets — the footer link still existed but was easy to miss, so admins
     on mobile effectively lost the button. Collapse to an icon-only 44x44 tap
     target instead of vanishing, so admin login is always reachable. */
  @media (max-width:900px){
    .admin-nav-btn{ padding:0; width:44px; height:44px; font-size:0; display:flex;
      align-items:center; justify-content:center; margin-left:6px; }
    .admin-nav-btn::before{ content:"🔐"; font-size:19px; }
  }
  /* The nav row was 69px wider than a 1280 viewport because nothing could shrink.
     Allow the link list to compress before the account controls do. */
  /* The header row overflowed a 1280 viewport by 45px: four fixed-width children
     with nothing allowed to shrink. The link list is the one item that can give
     way, so it becomes the flexible child and the controls stay whole. */
  header nav{ flex-wrap:nowrap; min-width:0; gap:12px; }
  header nav .navlinks{ min-width:0; flex:1 1 auto; overflow:hidden; }
  header nav .acct-area,.admin-nav-btn{ flex:none; }
  @media (max-width:1150px){ header nav .navlinks li:nth-child(n+5){ display:none; } }
  @media (max-width:1000px){ header nav .navlinks li:nth-child(n+3){ display:none; } }


  .forgot-row{display:flex; justify-content:center; margin-top:14px;}
  .reset-note{display:none; margin-top:12px; font-size:13px; line-height:1.55; border-radius:10px; padding:11px 14px;}
  .reset-note.show{display:block;}
  .reset-note.ok{background:rgba(34,197,139,0.14); border:1px solid rgba(34,197,139,0.4); color:#7CE8BE;}
  .reset-note.err{background:rgba(255,92,108,0.12); border:1px solid rgba(255,92,108,0.35); color:#FF8A94;}


  .lib-row{cursor:pointer; transition:transform .18s, border-color .18s, box-shadow .18s;}
  .lib-row:hover{transform:translateX(3px); border-color:var(--violet); box-shadow:0 6px 18px rgba(138,92,255,0.14);}
  .lib-row:focus-visible{outline:2px solid var(--violet); outline-offset:2px;}
  .lr-right{display:flex; align-items:center; gap:12px; flex-shrink:0;}
  .lr-open{font-family:'Sora',sans-serif; font-size:12.5px; font-weight:700; color:var(--violet); opacity:.55; transition:opacity .18s;}
  .lib-row:hover .lr-open,.lib-row:focus-visible .lr-open{opacity:1;}


  .chip-locked{opacity:0.62;}
  .lib-row.locked{opacity:0.72;}
  .lib-row.locked .lr-open{content:'';}


  .prog-panel{background:#fff; border:1px solid rgba(22,17,58,0.08); border-radius:16px; padding:20px 22px; margin-bottom:22px; box-shadow:0 6px 18px rgba(22,17,58,0.05);}
  .pp-head{display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap; margin-bottom:14px;}
  .pp-note{font-size:12.5px; color:#5B5480; margin-bottom:12px;}
  .trend-svg{width:100%; height:180px; display:block;}
  .streak-stat .ds-n{background:linear-gradient(90deg,#FF7A3D,#FFC857); -webkit-background-clip:text; background-clip:text; color:transparent;}
  .weak-list{display:flex; flex-wrap:wrap; gap:8px;}
  .weak-chip{display:inline-flex; align-items:center; gap:7px; background:#FDF2F6; border:1px solid rgba(177,0,90,0.22); color:#8C0046; border-radius:100px; padding:6px 13px; font-size:13.5px; font-family:'IBM Plex Mono',monospace;}
  .weak-chip b{background:#B1005A; color:#fff; border-radius:100px; padding:1px 7px; font-size:11px;}
  /* Responsive QWERTY heatmap: rows are percentage-sized and staggered with
     margin-left offsets (not fixed px) so keys never overflow a narrow card
     and stay proportioned to whatever width the card actually has. */
  .key-heat{display:flex; flex-direction:column; gap:6px; width:100%; max-width:420px; margin:0 auto;}
  .key-row{display:flex; gap:2.4%; width:100%;}
  .key-row:nth-child(2){width:94%; margin-left:6%;}
  .key-row:nth-child(3){width:82%; margin-left:16%;}
  .key-cap{flex:1 1 0; min-width:0; aspect-ratio:1/1; border-radius:6px; display:flex; align-items:center; justify-content:center; font-family:'IBM Plex Mono',monospace; font-size:clamp(9px,2.6vw,13px); font-weight:600; border:1px solid rgba(22,17,58,0.12); background:#F7F6FC; color:#3A3358;}


  /* ===== WELCOME POPUP ===== */
  #welcomeOverlay{display:none; position:fixed; inset:0; z-index:1200; background:rgba(9,7,26,0.72); backdrop-filter:blur(8px); align-items:center; justify-content:center; padding:20px;}
  #welcomeOverlay.show{display:flex; animation:welFade .3s ease;}
  @keyframes welFade{from{opacity:0}to{opacity:1}}
  .wel-card{position:relative; width:100%; max-width:420px; background:linear-gradient(165deg,#1B1640,#241B4D); border:1px solid rgba(255,255,255,0.13); border-radius:26px; padding:38px 30px 30px; text-align:center; overflow:hidden; box-shadow:0 30px 80px rgba(0,0,0,.5); animation:welPop .5s cubic-bezier(.2,.9,.3,1.3);}
  @keyframes welPop{from{transform:translateY(26px) scale(.92); opacity:0}to{transform:none; opacity:1}}
  .wel-orb{position:absolute; width:300px; height:300px; border-radius:50%; top:-150px; left:50%; transform:translateX(-50%); background:radial-gradient(circle,rgba(138,92,255,.6),transparent 68%); filter:blur(26px); animation:welOrb 6s ease-in-out infinite;}
  @keyframes welOrb{0%,100%{transform:translateX(-50%) scale(1)}50%{transform:translateX(-50%) scale(1.18)}}
  .wel-close{position:absolute; top:14px; right:16px; background:none; border:none; color:rgba(245,243,255,.55); font-size:24px; cursor:pointer; line-height:1; z-index:3;}
  .wel-close:hover{color:#fff;}
  .wel-avatar{position:relative; z-index:2; width:74px; height:74px; margin:0 auto 16px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-family:'Space Grotesk',sans-serif; font-weight:800; font-size:30px; color:#0D0A22; background:linear-gradient(135deg,#33F5D0,#8A5CFF); box-shadow:0 0 0 6px rgba(138,92,255,.16); animation:welAv .7s ease .1s both;}
  @keyframes welAv{from{transform:scale(.5) rotate(-14deg); opacity:0}to{transform:none; opacity:1}}
  .wel-greet{position:relative; z-index:2; font-family:'IBM Plex Mono',monospace; font-size:11.5px; letter-spacing:2px; text-transform:uppercase; color:#33F5D0; margin-bottom:6px;}
  .wel-name{position:relative; z-index:2; font-family:'Space Grotesk',sans-serif; font-size:26px; color:#fff; margin-bottom:8px;}
  .wel-sub{position:relative; z-index:2; font-size:14.5px; color:rgba(245,243,255,.72); margin-bottom:20px; line-height:1.55;}
  .wel-stats{position:relative; z-index:2; display:flex; gap:10px; justify-content:center; flex-wrap:wrap; margin-bottom:24px;}
  .wel-stat{background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12); border-radius:14px; padding:10px 15px; min-width:88px;}
  .wel-stat .n{font-family:'Space Grotesk',sans-serif; font-weight:800; font-size:20px; color:#FFC857;}
  .wel-stat .l{font-size:10.5px; color:rgba(245,243,255,.6); margin-top:2px;}
  .wel-actions{position:relative; z-index:2; display:flex; flex-direction:column; gap:10px;}
  .wel-actions .btn{width:100%; justify-content:center;}
  .wel-confetti{position:absolute; inset:0; pointer-events:none; z-index:1; overflow:hidden;}
  .confetti-bit{position:absolute; width:8px; height:12px; border-radius:2px; opacity:0; animation:confFall linear forwards;}
  @keyframes confFall{0%{opacity:0; transform:translateY(-40px) rotate(0)}12%{opacity:1}100%{opacity:0; transform:translateY(420px) rotate(600deg)}}

  /* ===== RESULT FEEDBACK ===== */
  .feedback-card{display:none; border-radius:16px; padding:20px 22px; margin-bottom:22px; border:1px solid; animation:fbIn .45s ease;}
  .feedback-card.show{display:block;}
  @keyframes fbIn{from{opacity:0; transform:translateY(10px)}to{opacity:1; transform:none}}
  .fb-top{display:flex; align-items:center; gap:12px; margin-bottom:8px;}
  .fb-emoji{font-size:30px; line-height:1; animation:fbPulse 1.6s ease-in-out infinite;}
  @keyframes fbPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.14)}}
  .fb-title{font-family:'Space Grotesk',sans-serif; font-weight:800; font-size:19px;}
  .fb-msg{font-size:14px; line-height:1.6;}
  .fb-tip{margin-top:10px; font-size:13px; padding-top:10px; border-top:1px dashed currentColor; opacity:.85;}
  .fb-great{background:linear-gradient(135deg,rgba(34,197,139,.14),rgba(255,200,87,.12)); border-color:rgba(34,197,139,.45); color:#0B6E4F;}
  .fb-good {background:rgba(138,92,255,.10); border-color:rgba(138,92,255,.38); color:#5B3FD4;}
  .fb-okay {background:rgba(242,120,47,.10); border-color:rgba(242,120,47,.38); color:#A8480C;}
  .fb-push {background:rgba(14,138,158,.10); border-color:rgba(14,138,158,.35); color:#0E6A7A;}


  /* ===== CELEBRATION / WELCOME MODAL ===== */
  #cheerOverlay{display:none; position:fixed; inset:0; z-index:1200; background:rgba(10,7,28,0.72);
    backdrop-filter:blur(7px); align-items:center; justify-content:center; padding:20px;}
  #cheerOverlay.show{display:flex; opacity:1; animation:cheerFade .28s ease both;}
  @keyframes cheerFade{from{opacity:0;} to{opacity:1;}}
  #cheerCanvas{position:absolute; inset:0; width:100%; height:100%; pointer-events:none;}
  .cheer-box{position:relative; z-index:2; width:100%; max-width:440px; background:#fff; border-radius:26px;
    padding:38px 32px 30px; text-align:center; box-shadow:0 30px 90px rgba(10,7,28,0.5);
    opacity:1; animation:cheerPop .5s cubic-bezier(.2,1.3,.4,1) both;}
  @keyframes cheerPop{from{transform:scale(.82) translateY(24px); opacity:0;} to{transform:scale(1) translateY(0); opacity:1;}}
  .cheer-close{position:absolute; top:14px; right:16px; background:none; border:none; font-size:24px;
    line-height:1; color:#B7B2CC; cursor:pointer;}
  .cheer-close:hover{color:#5B5480;}
  .cheer-badge{width:82px; height:82px; margin:0 auto 18px; border-radius:50%; display:flex;
    align-items:center; justify-content:center; font-size:38px; position:relative;
    animation:badgeIn .6s cubic-bezier(.2,1.4,.4,1) .1s both;}
  @keyframes badgeIn{from{transform:scale(0) rotate(-25deg);} to{transform:scale(1) rotate(0);}}
  .cheer-badge::after{content:''; position:absolute; inset:-9px; border-radius:50%;
    border:2px solid currentColor; opacity:.28; animation:ringPulse 2.2s ease-out infinite;}
  @keyframes ringPulse{0%{transform:scale(.9); opacity:.4;} 70%{transform:scale(1.25); opacity:0;} 100%{opacity:0;}}
  .cheer-kicker{font-family:'IBM Plex Mono',monospace; font-size:11px; letter-spacing:2px;
    text-transform:uppercase; font-weight:700; margin-bottom:8px;}
  .cheer-title{font-family:'Space Grotesk',sans-serif; font-weight:800; font-size:25px;
    color:#14102E; line-height:1.22; margin-bottom:10px;}
  .cheer-msg{font-size:14.5px; line-height:1.6; color:#5B5480; margin-bottom:20px;}
  .cheer-stats{display:flex; justify-content:center; gap:10px; flex-wrap:wrap; margin-bottom:18px;}
  .cheer-stat{background:#F6F4FE; border:1px solid rgba(22,17,58,0.08); border-radius:14px;
    padding:11px 16px; min-width:88px;}
  .cheer-stat .n{font-family:'Space Grotesk',sans-serif; font-weight:800; font-size:20px; color:#14102E;}
  .cheer-stat .l{font-size:10.5px; color:#8C87A6; margin-top:2px; letter-spacing:.4px;}
  .cheer-tip{font-size:13px; line-height:1.55; color:#4A4370; background:#FBFAFF;
    border:1px dashed rgba(138,92,255,.35); border-radius:12px; padding:12px 15px;
    margin-bottom:20px; text-align:left;}
  .cheer-tip b{color:#5B3FD4;}
  .cheer-actions{display:flex; gap:10px; justify-content:center; flex-wrap:wrap;}
  .cheer-actions .btn{padding:12px 22px; font-size:14px;}
  @media (max-width:520px){ .cheer-box{padding:32px 22px 26px;} .cheer-title{font-size:22px;} }


  .exam-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(168px,1fr)); gap:9px;}
  .exam-btn{text-align:left; cursor:pointer; background:#fff; border:1.5px solid rgba(22,17,58,0.12);
    border-radius:12px; padding:11px 13px; font-family:'Sora',sans-serif; transition:transform .18s, border-color .18s, box-shadow .18s;}
  .exam-btn:hover{transform:translateY(-2px); border-color:var(--violet); box-shadow:0 8px 20px rgba(138,92,255,.14);}
  .exam-btn.active{border-color:var(--violet); background:linear-gradient(180deg,#F6F2FF,#fff); box-shadow:0 8px 20px rgba(138,92,255,.18);}
  .dash-view .exam-btn .eb-name{font-weight:700; font-size:13px; color:#14102E; line-height:1.3;}
  .dash-view .exam-btn .eb-spec{font-family:'IBM Plex Mono',monospace; font-size:10.5px; color:#5B5480; margin-top:4px;}
  .dash-view .exam-btn .eb-fmt{display:inline-block; margin-top:5px; font-family:'IBM Plex Mono',monospace; font-size:9.5px;
    background:rgba(255,200,87,.22); color:#8a5c00; border-radius:100px; padding:2px 7px; font-weight:700;}
  .exam-spec{margin-top:12px; font-size:12.5px; line-height:1.55; color:#4A4370;
    background:#F8F6FF; border:1px solid rgba(138,92,255,.22); border-radius:10px; padding:11px 14px;}
  .exam-spec b{color:#14102E;}
  .exam-spec .warn{color:#C2540E;}
  .fmt-bar{display:flex; gap:6px; flex-wrap:wrap; padding:8px 12px; background:#EFEBFF;
    border-bottom:1px solid rgba(22,17,58,.1); flex-shrink:0; align-items:center;}
  .fmt-btn{border:1px solid rgba(22,17,58,.18); background:#fff; border-radius:7px; width:32px; height:30px;
    cursor:pointer; font-family:Georgia,serif; font-size:14px; color:#14102E;}
  .fmt-btn.on{background:var(--violet); color:#fff; border-color:var(--violet);}
  .fmt-hint{font-family:'IBM Plex Mono',monospace; font-size:10.5px; color:#5B3FD4; margin-left:6px;}
  #typingInputBox b, #typingInputBox i, #typingInputBox u{font-weight:inherit;}
  .fmt-rich{flex:1; overflow-y:auto; padding:18px 20px; font-family:'IBM Plex Mono',monospace;
    font-size:var(--tt-fs,18px); line-height:2; color:#000; background:#fff; outline:none;}
  .fmt-rich:empty:before{content:attr(data-ph); color:#9A94B8;}


  .fmt-err{background:rgba(216,20,105,0.14); color:#B1005A; border-radius:4px; padding:1px 4px; text-decoration:underline wavy rgba(177,0,90,.5);}
  .fmt-err sup{font-size:9px; margin-left:2px;}
  .fmt-tag{display:inline-block; font-family:'IBM Plex Mono',monospace; font-size:10px; font-weight:700;
    background:rgba(255,200,87,.25); color:#8a5c00; border-radius:100px; padding:2px 8px; margin-left:8px;}


  /* ===== PREMIUM PASS: richer exam cards, larger type, more depth ===== */
  .exam-grid{grid-template-columns:repeat(auto-fill,minmax(215px,1fr)); gap:14px;}
  .exam-btn{position:relative; overflow:hidden; padding:18px 18px 16px; border-radius:18px;
    border:1.5px solid rgba(22,17,58,0.10);
    background:linear-gradient(160deg,#FFFFFF 0%,#FBFAFF 100%);
    box-shadow:0 2px 4px rgba(22,17,58,.04), 0 10px 24px -12px rgba(22,17,58,.18);
    transition:transform .22s cubic-bezier(.2,.9,.3,1), box-shadow .22s, border-color .22s;}
  .exam-btn::before{content:''; position:absolute; inset:0 auto 0 0; width:4px;
    background:linear-gradient(180deg,var(--cyan),var(--violet)); opacity:0; transition:opacity .22s;}
  .exam-btn::after{content:''; position:absolute; top:-40%; right:-30%; width:150px; height:150px;
    border-radius:50%; background:radial-gradient(circle,rgba(138,92,255,.14),transparent 70%); opacity:0; transition:opacity .3s;}
  .exam-btn:hover{transform:translateY(-4px); border-color:rgba(138,92,255,.42);
    box-shadow:0 4px 8px rgba(22,17,58,.05), 0 22px 44px -16px rgba(138,92,255,.42);}
  .exam-btn:hover::before, .exam-btn:hover::after{opacity:1;}
  .exam-btn.active{border-color:var(--violet);
    background:linear-gradient(160deg,#F7F3FF 0%,#FFFFFF 70%);
    box-shadow:0 0 0 3px rgba(138,92,255,.16), 0 22px 44px -18px rgba(138,92,255,.5);}
  .exam-btn.active::before{opacity:1;}
  .dash-view .exam-btn .eb-name{font-size:16px; font-weight:800; letter-spacing:-.2px; line-height:1.25;
    color:#14102E; position:relative;}
  .dash-view .exam-btn .eb-spec{font-size:12.5px; color:#6A6390; margin-top:7px; letter-spacing:.2px; position:relative;}
  .dash-view .exam-btn .eb-spec b{color:var(--violet); font-weight:700;}
  .dash-view .exam-btn .eb-fmt{margin-top:10px; font-size:10px; letter-spacing:1px; padding:4px 10px;
    background:linear-gradient(90deg,#FFC857,#FF9A3C); color:#4A2C00; box-shadow:0 3px 10px rgba(255,154,60,.4);}

  .exam-spec{margin-top:16px; padding:18px 20px; border-radius:16px; font-size:14px; line-height:1.65;
    background:linear-gradient(160deg,#F7F3FF,#FDFCFF);
    border:1px solid rgba(138,92,255,.20); box-shadow:0 10px 26px -18px rgba(138,92,255,.5);}
  .exam-spec b{font-size:15px;}
  .exam-spec .spec-title{font-family:'Space Grotesk',sans-serif; font-weight:800; font-size:17px;
    color:#14102E; margin-bottom:6px; display:block;}

  /* labels + chips */
  #appShell label{font-size:12px; letter-spacing:1.4px; font-weight:700;}
  #appShell .chip{padding:10px 20px; font-size:13.5px; border-radius:100px;}
  #appShell .chip.active{box-shadow:0 6px 18px -6px rgba(138,92,255,.6);}
  .tt-pc-title{font-size:18px;}
  .tt-pc-meta{font-size:12.5px;}
  .tt-pc-preview{font-size:15px; line-height:2;}
  .dash-h1{font-size:32px; letter-spacing:-.6px;}
  .dash-h3{font-size:19px;}
  .dash-sub{font-size:16px;}
  #appShell .sec-head h2{font-size:clamp(28px,3.6vw,38px); letter-spacing:-.7px;}
  #appShell .sec-head p{font-size:16.5px;}
  #appShell .btn{font-size:15px; padding:14px 26px;}
  #appShell .btn-xs{font-size:13px; padding:9px 16px;}
  .score-card .num{font-size:30px;}
  .score-card .lbl{font-size:11.5px;}
  .dash-card h3{font-size:18px;}
  .dash-card p{font-size:14.5px;}
  .dash-nav-item{font-size:15px; padding:13px 15px;}

  /* the formatting paper should read like a court document */
  #examMode .exam-passage p{margin:0 0 14px;}
  .fmt-paper{background:#FFFDF8 !important; font-family:'Georgia',serif !important; font-size:17px !important;
    line-height:2.05 !important; padding:26px 34px !important; color:#14100A !important;}
  .fmt-paper b{font-weight:700;} .fmt-paper u{text-underline-offset:3px;}
  .fmt-bar{background:linear-gradient(180deg,#F3EEFF,#EAE2FF); padding:10px 14px; gap:7px;}
  .fmt-btn{width:38px; height:34px; font-size:15px; border-radius:9px;
    box-shadow:0 2px 6px rgba(22,17,58,.08); transition:all .16s;}
  .fmt-btn:hover{border-color:var(--violet); color:var(--violet); transform:translateY(-1px);}
  .fmt-btn.on{box-shadow:0 4px 12px -2px rgba(138,92,255,.55);}
  .fmt-hint{font-size:11.5px;}
  .fmt-rich{font-family:'Georgia',serif !important; font-size:17px !important; line-height:2.05 !important;
    padding:26px 34px !important; background:#FFFDF8 !important;}


  /* press feedback everywhere */
  /* 1px press, not a scale: scaling resamples the label and looks blurry. */
  button:active,.chip:active,.exam-btn:active,.quick-btn:active,.dash-card:active{transform:translateY(1px);}
  .btn{transition:transform .16s cubic-bezier(.2,.9,.3,1), box-shadow .22s, filter .2s;}
  .btn-primary:hover{filter:brightness(1.06);}

  /* sidebar nav slides its highlight in */
  .dash-nav-item{transition:background .15s, color .15s;}
  /* no padding shift on hover — it moves the label under the pointer */
  .dash-nav-item.active{position:relative;}
  .dash-nav-item.active::before{content:''; position:absolute; left:0; top:8px; bottom:8px; width:3px;
    border-radius:0 3px 3px 0; background:linear-gradient(180deg,var(--cyan),var(--magenta));
    animation:navBar .32s cubic-bezier(.2,1.2,.3,1);}
  @keyframes navBar{from{transform:scaleY(0);} to{transform:scaleY(1);}}

  /* dashboard views arrive with a soft rise */
  .dash-view.active{animation:viewRise .42s cubic-bezier(.2,.9,.3,1);}
  @keyframes viewRise{from{opacity:0; transform:translateY(14px);} to{opacity:1; transform:none;}}

  /* cards stagger in when a view opens */
  .dash-view.active .dash-card,
  .dash-view.active .exam-btn,
  .dash-view.active .quick-btn,
  .dash-view.active .dash-stat{animation:cardIn .5s cubic-bezier(.2,.9,.3,1) both;}
  @keyframes cardIn{from{opacity:0; transform:translateY(12px) scale(.985);} to{opacity:1; transform:none;}}
  .dash-view.active .exam-btn:nth-child(1),.dash-view.active .dash-card:nth-child(1),.dash-view.active .quick-btn:nth-child(1),.dash-view.active .dash-stat:nth-child(1){animation-delay:.02s;}
  .dash-view.active .exam-btn:nth-child(2),.dash-view.active .dash-card:nth-child(2),.dash-view.active .quick-btn:nth-child(2),.dash-view.active .dash-stat:nth-child(2){animation-delay:.06s;}
  .dash-view.active .exam-btn:nth-child(3),.dash-view.active .dash-card:nth-child(3),.dash-view.active .quick-btn:nth-child(3),.dash-view.active .dash-stat:nth-child(3){animation-delay:.10s;}
  .dash-view.active .exam-btn:nth-child(4),.dash-view.active .dash-card:nth-child(4),.dash-view.active .quick-btn:nth-child(4),.dash-view.active .dash-stat:nth-child(4){animation-delay:.14s;}
  .dash-view.active .exam-btn:nth-child(n+5){animation-delay:.18s;}

  /* the logo: a slow sheen, and a spin-in whenever it is clicked */
  .logo-mark{position:relative;}
  .logo-mark::after{content:''; position:absolute; inset:0; border-radius:50%; pointer-events:none;
    background:linear-gradient(115deg,transparent 35%,rgba(255,255,255,.75) 50%,transparent 65%);
    background-size:250% 250%; animation:sheen 5.5s ease-in-out infinite;}
  @keyframes sheen{0%,72%{background-position:180% 0;} 100%{background-position:-60% 0;}}
  .logo, .dash-logo{cursor:pointer;}


  @keyframes logoPop{0%{transform:scale(1);}45%{transform:scale(1.14) rotate(-7deg);}100%{transform:scale(1);}}
  @keyframes logoSpin{0%{transform:rotate(0) scale(1);}55%{transform:rotate(200deg) scale(1.16);}100%{transform:rotate(360deg) scale(1);}}

  /* result numbers count up rather than snapping */
  .score-card .num, .demo-stat .n, .ds-n{transition:color .3s;}
  .score-card{animation:none;}
  .err-chip{animation:none;}

  @media (prefers-reduced-motion: reduce){
    .rip{display:none;}
    .dash-view.active, .dash-view.active *, .score-card, .err-chip{animation:none !important;}
    .logo-mark::after{animation:none;}
  }


  /* ===== EXAM NEWS / ARTICLES ===== */
  .news-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:20px;}
  .news-card{background:#fff; border:1px solid rgba(22,17,58,0.09); border-radius:16px; overflow:hidden; display:flex; flex-direction:column; transition:transform .25s, box-shadow .25s; text-decoration:none;}
  .news-card:hover{transform:translateY(-5px); box-shadow:0 16px 34px rgba(22,17,58,0.13);}
  .news-thumb{height:132px; position:relative; display:flex; align-items:flex-end; padding:12px 14px; overflow:hidden;}
  .news-thumb svg{position:absolute; inset:0; width:100%; height:100%;}
  .news-court{position:relative; font-family:'IBM Plex Mono',monospace; font-size:10.5px; letter-spacing:1.2px; text-transform:uppercase; font-weight:700; color:#fff; background:rgba(0,0,0,0.35); padding:4px 10px; border-radius:100px; backdrop-filter:blur(4px);}
  .news-body{padding:16px 18px 18px; display:flex; flex-direction:column; flex:1;}
  .news-tagrow{display:flex; gap:7px; flex-wrap:wrap; margin-bottom:9px;}
  .news-tag{font-family:'IBM Plex Mono',monospace; font-size:10px; padding:3px 9px; border-radius:100px; font-weight:600;}
  .news-tag.steno{background:rgba(51,245,208,0.16); color:#0B7A6A;}
  /* .exam/.result were hardcoded violet/magenta from the pre-redesign palette;
     retinted onto the app's own brass/teal accent families. !important matches
     the later blanket ".news-tag{background:var(--paper-2)!important}" safety
     rule (added for a separate white-on-white bug) so these two variants can
     show their own color again instead of being flattened to neutral by it. */
  .news-tag.exam{background:var(--brass-soft) !important; color:var(--brass) !important; border-color:transparent !important;}
  .news-tag.result{background:var(--accent-soft) !important; color:var(--accent) !important; border-color:transparent !important;}
  .news-card h3{font-family:'Space Grotesk',sans-serif; font-size:15.5px; color:#14102E; margin-bottom:7px; line-height:1.35;}
  .news-card p{font-size:13px; color:#5B5480; line-height:1.55; flex:1;}
  .news-meta{display:flex; justify-content:space-between; align-items:center; margin-top:12px; font-family:'IBM Plex Mono',monospace; font-size:10.5px; color:#8C87A6;}
  .news-meta .src{color:var(--violet); font-weight:600;}
  .news-disclaimer{margin-top:20px; font-size:12.5px; color:#5B5480; background:var(--brass-soft); border:1px solid rgba(168,116,26,0.35); border-radius:10px; padding:12px 15px;}

  /* ===== SHORTHAND PRACTICE ===== */
  .sh-audio-row{display:flex; align-items:center; gap:12px; flex-wrap:wrap; padding:12px 18px; border-bottom:1px solid rgba(22,17,58,0.09); background:#FDFCFF;}
  .sh-audio-label{font-family:'IBM Plex Mono',monospace; font-size:11px; letter-spacing:1px; text-transform:uppercase; color:#5B3FD4; font-weight:700;}
  .sh-audio-row audio{height:36px; flex:1; min-width:200px;}
  .sh-preview-lock{padding:14px 18px; font-size:13px; color:#5B5480; background:#FBFAFF; display:flex; align-items:center; gap:10px; flex-wrap:wrap;}
  .sh-custom-meta{font-family:'IBM Plex Mono',monospace; font-size:12px; color:#5B5480; margin-top:6px;}
  .sh-details{margin-top:20px; border:1px solid rgba(22,17,58,0.12); border-radius:12px; background:#fff; overflow:hidden;}
  .sh-details summary{cursor:pointer; padding:14px 18px; font-family:'Space Grotesk',sans-serif; font-weight:600; font-size:14.5px; color:#14102E; background:#FBFAFF;}
  .sh-master-full{padding:18px; font-family:'IBM Plex Mono',monospace; font-size:14px; line-height:1.95; color:#14102E; max-height:300px; overflow-y:auto;}

  #shExamMode{display:none; position:fixed; inset:0; z-index:900; background:#F4F2FB; flex-direction:column;}
  #shExamMode.show{display:flex;}
  .sh-audio-bar{display:flex; align-items:center; gap:14px; flex-wrap:wrap; padding:10px 20px; background:#EFEBFF; border-bottom:1px solid rgba(22,17,58,0.1); flex-shrink:0;}
  .sh-ab-label{font-family:'IBM Plex Mono',monospace; font-size:11px; letter-spacing:1.2px; text-transform:uppercase; color:#5B3FD4; font-weight:700;}
  .sh-audio-bar audio{height:38px; flex:1; min-width:220px; max-width:560px;}
  .sh-ab-note{font-family:'IBM Plex Mono',monospace; font-size:11px; color:#5B5480;}
  #shExamInput{flex:1; width:100%; border:none !important; border-radius:0 !important; resize:none; font-family:'IBM Plex Mono',monospace !important; font-size:17px !important; line-height:2; padding:18px 20px !important; color:#000000 !important; background:#fff !important; -webkit-text-fill-color:#000000 !important; caret-color:#8A5CFF;}
  #shExamInput:focus{outline:none;}
  #shExamInput::placeholder{color:#9A94B8;}
  #shReadAlong{color:#000000;}
  #shExamMode .exam-pane-bottom .exam-pane-label{background:var(--accent-soft); color:var(--accent);}

  /* ===== TYPING TEST — setup panel ===== */
  .tt-setup-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:18px;}
  .btn-xs{padding:7px 14px; font-size:12.5px;}
  .tt-opts{display:flex; flex-wrap:wrap; gap:16px;}
  .tt-opt{display:flex; align-items:center; gap:8px; font-size:13.5px; color:#3A3358; font-family:'Sora',sans-serif; cursor:pointer; background:#fff; border:1px solid rgba(22,17,58,0.14); padding:9px 14px; border-radius:10px;}
  .tt-opt input{accent-color:#8A5CFF; width:15px; height:15px;}
  .tt-passage-card{background:#fff; border:1px solid rgba(22,17,58,0.12); border-radius:14px; overflow:hidden; margin-bottom:20px;}
  .tt-pc-head{display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; padding:16px 18px; border-bottom:1px solid rgba(22,17,58,0.09); background:#FBFAFF;}
  .tt-pc-title{font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:16px; color:#14102E;}
  .tt-pc-meta{font-family:'IBM Plex Mono',monospace; font-size:11.5px; color:#5B5480; margin-top:3px;}
  .tt-pc-actions{display:flex; gap:8px; flex-wrap:wrap;}
  .tt-pc-preview{padding:18px; max-height:150px; overflow-y:auto; font-family:'IBM Plex Mono',monospace; font-size:14px; line-height:1.9; color:#14102E;}

  /* ===== TYPING EXAM MODE (full screen) ===== */
  #examMode{display:none; position:fixed; inset:0; z-index:900; background:#F4F2FB; flex-direction:column;}
  #examMode.show{display:flex;}
  .exam-topbar{display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap; padding:12px 20px; background:#14102E; color:#fff; flex-shrink:0;}
  .exam-tb-left{display:flex; align-items:center; gap:10px; min-width:0;}
  .exam-passage-name{font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:15px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:34vw;}
  .exam-badge{font-family:'IBM Plex Mono',monospace; font-size:10.5px; padding:3px 9px; border-radius:100px; background:rgba(255,255,255,0.14); color:#D9D4FF; white-space:nowrap;}
  .exam-timers{display:flex; align-items:center; gap:18px;}
  .exam-timer{display:flex; flex-direction:column; align-items:center; line-height:1.1;}
  .et-label{font-family:'IBM Plex Mono',monospace; font-size:9.5px; letter-spacing:1.4px; text-transform:uppercase; color:rgba(255,255,255,0.55);}
  .et-val{font-family:'Space Grotesk',sans-serif; font-weight:800; font-size:20px; color:#fff;}
  .exam-timer.big .et-val{font-size:30px; color:#FFD86B;}
  .exam-timer.big.danger .et-val{color:#FF6B7A; animation:etPulse 1s ease-in-out infinite;}
  @keyframes etPulse{0%,100%{opacity:1;}50%{opacity:0.45;}}
  .exam-tb-right{display:flex; align-items:center; gap:8px;}
  .exam-btn{border:none; cursor:pointer; font-family:'Sora',sans-serif; font-weight:700; font-size:13px; padding:9px 16px; border-radius:100px;}
  .exam-btn.ghost{background:rgba(255,255,255,0.12); color:#fff;}
  .exam-btn.ghost:hover{background:rgba(255,255,255,0.22);}
  .exam-btn.submit{background:linear-gradient(90deg,#22C58B,#0E9E6E); color:#fff;}
  .exam-btn.submit:hover{filter:brightness(1.08);}

  .exam-progress{height:5px; background:rgba(22,17,58,0.1); flex-shrink:0;}
  .exam-progress-fill{height:100%; width:0%; background:linear-gradient(90deg,#33F5D0,#8A5CFF); transition:width .25s ease;}
  .exam-progress-meta{display:flex; justify-content:space-between; padding:5px 20px; font-family:'IBM Plex Mono',monospace; font-size:11px; color:#5B5480; flex-shrink:0;}

  .exam-split{flex:1; display:flex; flex-direction:column; min-height:0; padding:0 16px 10px;}
  .exam-pane{flex:1 1 50%; min-height:0; display:flex; flex-direction:column; background:#fff; border:1px solid rgba(22,17,58,0.13); border-radius:12px; overflow:hidden;}
  .exam-pane-top{margin-bottom:10px;}
  .exam-pane-label{padding:7px 16px; font-family:'IBM Plex Mono',monospace; font-size:10.5px; letter-spacing:1.4px; text-transform:uppercase; font-weight:700; flex-shrink:0;}
  .exam-pane-top .exam-pane-label{background:#EFEBFF; color:#5B3FD4;}
  .exam-pane-bottom .exam-pane-label{background:#E9FBF3; color:#0E8A5C;}
  .exam-passage{position:relative; flex:1; overflow-y:auto; padding:18px 20px; scroll-behavior:auto; font-family:'IBM Plex Mono',monospace; font-size:var(--tt-fs,18px); line-height:2; letter-spacing:0.3px; color:#000000; white-space:pre-wrap; word-break:break-word;}
  #typingInputBox{flex:1; width:100%; border:none !important; border-radius:0 !important; resize:none; font-family:'IBM Plex Mono',monospace !important; font-size:var(--tt-fs,18px) !important; line-height:2; padding:18px 20px !important; color:#000000 !important; background:#fff !important; -webkit-text-fill-color:#000000 !important; caret-color:#8A5CFF;}
  #typingInputBox:focus{outline:none;}
  #typingInputBox::placeholder{color:#9A94B8;}

  /* character states — always high contrast on white */
  #typingTarget .tc-correct{color:#0B7A50 !important; background:rgba(14,138,92,0.14); border-radius:2px;}
  #typingTarget .tc-wrong{color:#B3120F !important; background:rgba(255,60,60,0.18); border-radius:2px; text-decoration:underline; text-decoration-color:#B3120F;}
  #typingTarget .tc-pending{color:#000000 !important;}
  #typingTarget .tc-cursor{background:#FFD86B !important; color:#000000 !important; border-radius:2px; animation:tcBlink 1s step-start infinite;}
  @keyframes tcBlink{50%{background:#FFF0BF !important;}}

  .exam-hint{text-align:center; padding:6px 0 10px; font-family:'IBM Plex Mono',monospace; font-size:10.5px; color:#8C87A6; flex-shrink:0;}
  .exam-paste-warn{display:none; position:fixed; bottom:18px; left:50%; transform:translateX(-50%); background:#B3120F; color:#fff; font-size:13px; padding:10px 20px; border-radius:100px; z-index:950; box-shadow:0 8px 24px rgba(0,0,0,0.25);}
  .exam-paste-warn.show{display:block;}

  .exam-countdown{display:none; position:absolute; inset:0; background:rgba(20,16,46,0.94); z-index:960; align-items:center; justify-content:center;}
  .exam-countdown.show{display:flex;}
  #examCountdownNum{font-family:'IBM Plex Mono',monospace; font-weight:800; font-size:130px; color:var(--accent); animation:cdPop .8s ease;}
  @keyframes cdPop{from{transform:scale(0.5); opacity:0;} to{transform:scale(1); opacity:1;}}

  .exam-paused{display:none; position:absolute; inset:0; background:rgba(20,16,46,0.9); z-index:955; align-items:center; justify-content:center;}
  .exam-paused.show{display:flex;}
  .exam-paused-box{background:#fff; border-radius:18px; padding:34px 40px; text-align:center; max-width:340px;}
  .exam-paused-box h3{font-family:'Space Grotesk',sans-serif; font-size:21px; color:#14102E; margin-bottom:8px;}
  .exam-paused-box p{font-size:14px; color:#5B5480; margin-bottom:20px;}

  @media (max-width:700px){
    .exam-topbar{padding:10px 12px; gap:8px;}
    .exam-passage-name{max-width:100%; font-size:13.5px;}
    .exam-timers{gap:12px;}
    .exam-timer.big .et-val{font-size:24px;}
    .exam-split{padding:0 8px 6px;}
    .exam-hint{display:none;}
    /* .exam-tb-right (text-size steps + Pause/Submit/Quit) stayed nowrap while
       its parent .exam-topbar wrapped around it — the row's own ~400px of
       content just ran off the right edge instead, taking Quit with it.
       Letting this row wrap too keeps every control reachable. */
    .exam-tb-right{flex-wrap:wrap; justify-content:flex-end; row-gap:8px;}
  }

  .typing-meta{display:flex; gap:22px; flex-wrap:wrap; margin:16px 0;}
  .typing-meta .m{background:rgba(255,255,255,0.04); border:1px solid var(--line); border-radius:12px; padding:12px 20px; text-align:center; min-width:100px;}
  .typing-meta .m .v{font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:22px; color:var(--cyan);}
  .typing-meta .m .l{font-size:10.5px; color:var(--ink-soft); text-transform:uppercase; letter-spacing:1px; margin-top:2px;}
  .duration-row{display:flex; gap:10px; margin-bottom:20px; flex-wrap:wrap;}

  .qualify-badge{display:inline-block; font-family:'IBM Plex Mono',monospace; font-size:12.5px; padding:8px 16px; border-radius:100px; font-weight:600; margin-bottom:20px;}
  .qualify-yes{background:rgba(74,222,128,0.15); color:var(--green); border:1px solid rgba(74,222,128,0.4);}
  .qualify-no{background:rgba(255,92,108,0.15); color:var(--red); border:1px solid rgba(255,92,108,0.4);}

  .admin-form{display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-bottom:20px;}
  .admin-form .full{grid-column:1/-1;}
  .upload-progress{font-family:'IBM Plex Mono',monospace; font-size:12px; color:var(--cyan); margin-top:8px; display:none;}
  .upload-progress.show{display:block;}
  @media (max-width:700px){ .teaser-grid{grid-template-columns:1fr;} .admin-form{grid-template-columns:1fr;} }
  /* ================= READABILITY & CONTRAST OVERHAUL =================
     Typing UIs live or die on how the passage reads. The changes below follow what the
     leading typing platforms settle on: a large clean sans (not a cramped mono), a
     controlled measure so the eye never hunts for the next line, generous leading, and
     genuinely high contrast rather than grey-on-grey. */
  :root{
    --ink-900:#0B0820;      /* body text — near black, not grey */
    --ink-700:#302A52;
    --ink-500:#5A5280;
    --paper-warm:#FFFDF7;   /* the typing surface */
    --paper-line:#EFEAFB;
    --tt-fs:22px;           /* passage size, overridden by the S/M/L control */
  }

  /* ---- the two typing surfaces ---- */
  #examMode .exam-pane, #shExamMode .exam-pane{
    background:var(--paper-warm);
    border:1px solid #E4DEF6;
    box-shadow:0 1px 2px rgba(11,8,32,.04), 0 18px 40px -28px rgba(11,8,32,.35);
    border-radius:16px;
  }
  .exam-passage, #typingInputBox, #shExamInput, .fmt-rich, #shReadAlong{
    font-family:'Inter', -apple-system, 'Segoe UI', Roboto, sans-serif !important;
    font-size:var(--tt-fs) !important;
    line-height:2.05 !important;
    letter-spacing:.005em !important;
    color:var(--ink-900) !important;
    -webkit-text-fill-color:var(--ink-900) !important;
    background:var(--paper-warm) !important;
    padding:26px clamp(20px,5vw,54px) !important;
    max-width:none;
    /* never split a word across lines — it destroys reading rhythm while typing */
    word-break:normal !important;
    overflow-wrap:normal !important;
    white-space:pre-wrap !important;
    hyphens:none !important;
  }
  /* a controlled measure keeps the eye from losing its place on wide screens */
  /* the passage fills the pane; a narrow centred column left the box looking empty */
  .exam-passage > *, #typingTarget, #shReadAlong{ max-width:none; margin-inline:0; }
  #typingInputBox, #shExamInput, .fmt-rich{ max-width:none; }

  .exam-passage::-webkit-scrollbar, #typingInputBox::-webkit-scrollbar{width:10px;}
  .exam-passage::-webkit-scrollbar-thumb{background:#DCD4F2; border-radius:10px;}

  /* ---- character states: clearly readable, not decorative ---- */
  #typingTarget .tc-pending{ color:#6B6390 !important; }
  #typingTarget .tc-correct{ color:#0B0820 !important; background:rgba(34,197,139,.16); border-radius:3px; }
  #typingTarget .tc-wrong{ color:#fff !important; background:#E23B4E; border-radius:3px;
    text-decoration:none; box-shadow:0 0 0 1px rgba(226,59,78,.35); }
  #typingTarget .tc-cursor{ background:#FFD34D !important; color:#0B0820 !important;
    border-radius:3px; box-shadow:0 0 0 2px rgba(255,211,77,.45); }

  /* ---- exam chrome ---- */
  .exam-topbar{ background:linear-gradient(100deg,#171232 0%,#241B4D 55%,#2E2060 100%);
    box-shadow:0 6px 26px -12px rgba(11,8,32,.7); padding:14px 22px; }
  .exam-passage-name{ font-size:16.5px; }
  .exam-timer.big .et-val{ font-size:34px; letter-spacing:-.5px; }
  .et-val{ font-size:22px; }
  .et-label{ font-size:10.5px; }
  .exam-btn.submit, .exam-btn.ghost{ font-size:14px; padding:11px 20px; }
  .exam-pane-label{ font-size:11.5px; letter-spacing:1.6px; padding:10px 20px; }
  .exam-pane-top .exam-pane-label{ background:#EFEAFB; color:#4A34B8; }
  .exam-pane-bottom .exam-pane-label{ background:#E4F9F0; color:#0A7A55; }
  .exam-progress{height:6px;}
  .exam-progress-meta{ font-size:12px; color:var(--ink-500); padding:7px 22px; }
  .exam-hint{ font-size:12px; color:#8A83AD; }

  /* ---- global type scale: bigger, darker, easier ---- */
  /* only the light dashboard gets the dark ink — the public site keeps its own
     dark theme, where near-black text would be invisible on a dark background */
  #appShell{ color:var(--ink-900); }
  #publicSite .light-section{ color:var(--ink-900); }
  #appShell label{ font-size:12.5px; letter-spacing:1.2px; color:#4A34B8; font-weight:800; }
  #appShell .pp-note, #appShell .dash-sub{ color:var(--ink-500); }
  .dash-h1{ font-size:34px; color:var(--ink-900); }
  .dash-h3{ font-size:20px; color:var(--ink-900); }
  .dash-sub{ font-size:16.5px; }
  #appShell .btn{ font-size:15.5px; font-weight:700; }
  #appShell .chip{ font-size:14px; padding:11px 21px; color:#2E2750; font-weight:700; }
  #appShell .chip.active{ color:#0B0820; }
  .dash-view .exam-btn .eb-name{ font-size:17px; color:var(--ink-900); }
  .dash-view .exam-btn .eb-spec{ font-size:13px; color:var(--ink-500); }
  .exam-spec{ font-size:14.5px; color:var(--ink-700); }
  .exam-spec .spec-title{ font-size:18px; }
  .tt-pc-title{ font-size:19px; color:var(--ink-900); }
  .tt-pc-meta{ font-size:13px; color:var(--ink-500); }
  .tt-pc-preview{ font-family:'Inter',sans-serif; font-size:16px; line-height:1.95; color:var(--ink-700); }
  .tt-opt{ font-size:14px; color:var(--ink-700); }
  .score-card .num{ font-size:32px; }
  .score-card .lbl{ font-size:12px; color:var(--ink-500); letter-spacing:.4px; }
  .err-chip .n{ font-size:23px; }
  .err-chip .l{ font-size:12px; }
  .board{ font-size:14.5px; }
  .board th{ font-size:11.5px; }
  .review-box{ font-family:'Inter',sans-serif; font-size:16px; line-height:2.05; }
  .dash-nav-item{ font-size:15.5px; }
  .dash-card h3{ font-size:19px; }
  .dash-card p{ font-size:15px; color:var(--ink-500); }
  .quick-btn{ font-size:15.5px; }
  .quick-btn span{ font-size:12px; }
  .dash-info-card li{ font-size:14.5px; color:var(--ink-700); }
  .dash-info-card h4{ font-size:17px; }
  .ds-n{ font-size:29px; }
  .ds-l{ font-size:13px; }

  /* ---- richer surface: warmer, less flat ---- */
  #appShell{ background:linear-gradient(165deg,#F6F3FF 0%,#FBF7FF 45%,#FFF6F9 100%); }
  .dash-topbar{ background:rgba(255,255,255,.82); border-bottom:1px solid #EBE4FA;
    box-shadow:0 6px 22px -20px rgba(11,8,32,.6); }
  .dash-sidebar{ background:linear-gradient(180deg,#181334 0%,#120E29 100%); }
  .prog-panel, .dash-info-card, .dash-stat, .dash-card, .tt-passage-card, .mist-card{
    box-shadow:0 1px 2px rgba(11,8,32,.04), 0 14px 34px -24px rgba(11,8,32,.4); }

  /* court paper keeps its serif identity but gets the same generous sizing */
  .fmt-paper{ font-family:Georgia,'Times New Roman',serif !important; font-size:calc(var(--tt-fs) - 3px) !important;
    line-height:2.1 !important; background:#FFFCF3 !important; color:#100C05 !important; }

  @media (max-width:640px){
    :root{ --tt-fs:19px; }
    .exam-passage, #typingInputBox, #shExamInput, .fmt-rich{ padding:18px 18px !important; }
    .dash-h1{ font-size:27px; }
  }



  /* ===== HINDI TYPING ===== */
  .hi-note{margin-top:11px; font-size:13.5px; line-height:1.6; color:#4A4370;
    background:#FBF8FF; border:1px dashed rgba(138,92,255,.35); border-radius:11px; padding:11px 14px;}
  .hik-title{font-family:'IBM Plex Mono',monospace; font-size:11.5px; letter-spacing:1.1px;
    text-transform:uppercase; color:#4A34B8; font-weight:800; margin-bottom:10px;}
  .hik-board{background:linear-gradient(170deg,#1B1540,#241B4D); border-radius:16px; padding:16px 14px;
    box-shadow:inset 0 2px 10px rgba(0,0,0,.35), 0 16px 34px -22px rgba(11,8,32,.7); overflow-x:auto;}
  .hik-row{display:flex; gap:7px; margin-bottom:7px;}
  .hik-row:last-child{margin-bottom:0;}
  .hik{position:relative; flex:0 0 auto; width:52px; height:52px; border-radius:10px;
    background:linear-gradient(180deg,#2E2560,#241C4C); border:1px solid rgba(255,255,255,.10);
    box-shadow:0 2px 0 rgba(0,0,0,.45); display:flex; align-items:center; justify-content:center;
    transition:transform .1s, box-shadow .1s, background .1s;}
  .hik-dev{font-family:'Noto Sans Devanagari',sans-serif; font-size:20px; color:#FFF; line-height:1;}
  .hik-eng{position:absolute; right:5px; bottom:3px; font-family:'IBM Plex Mono',monospace;
    font-size:9.5px; color:rgba(255,255,255,.42);}
  .hik-shift{position:absolute; left:5px; top:3px; font-family:'Noto Sans Devanagari',sans-serif;
    font-size:11px; color:rgba(255,211,77,.85); line-height:1;}
  .hik.hit{background:linear-gradient(180deg,#8A5CFF,#5B3FD4); transform:translateY(2px);
    box-shadow:0 0 0 2px rgba(138,92,255,.5), 0 0 18px rgba(138,92,255,.6);}
  @media (max-width:620px){ .hik{width:42px; height:44px;} .hik-dev{font-size:17px;} }

  /* Devanagari needs a bit more leading and its own face */
  body.hindi-mode .exam-passage,
  body.hindi-mode #typingInputBox,
  body.hindi-mode .tt-pc-preview,
  body.hindi-mode .review-box,
  body.hindi-mode #shExamInput{
    font-family:'Noto Sans Devanagari','Mangal',sans-serif !important;
    line-height:2.25 !important;
  }


  /* ===== EXAM CARDS: distinct soft tones, bigger bolder type ===== */
  .exam-grid{grid-template-columns:repeat(auto-fill,minmax(238px,1fr)); gap:16px;}
  .exam-btn{padding:22px 20px 20px; border-radius:20px; border:1.5px solid transparent;}
  .dash-view .exam-btn .eb-name{font-size:19px; font-weight:800; letter-spacing:-.3px;}
  .dash-view .exam-btn .eb-spec{font-size:13.5px; font-weight:600; margin-top:9px;}
  .dash-view .exam-btn .eb-fmt{font-size:10.5px; margin-top:12px;}
  .exam-btn::before{width:5px;}

  .exam-btn.tone-0{background:linear-gradient(160deg,#EEF4FF,#FBFCFF); border-color:#D5E2FB;}
  .exam-btn.tone-0 .eb-name{color:#14306B;} .exam-btn.tone-0 .eb-spec b{color:#2E5BC7;}
  .exam-btn.tone-1{background:linear-gradient(160deg,#EDFBF4,#FBFEFC); border-color:#CDEEDF;}
  .exam-btn.tone-1 .eb-name{color:#0B4A33;} .exam-btn.tone-1 .eb-spec b{color:#0E8A5C;}
  .exam-btn.tone-2{background:linear-gradient(160deg,#FFF3EC,#FFFCFA); border-color:#FBDDCA;}
  .exam-btn.tone-2 .eb-name{color:#6B2D0B;} .exam-btn.tone-2 .eb-spec b{color:#C2540E;}
  .exam-btn.tone-3{background:linear-gradient(160deg,#F5EEFF,#FDFBFF); border-color:#E3D5FB;}
  .exam-btn.tone-3 .eb-name{color:#3A1470;} .exam-btn.tone-3 .eb-spec b{color:#6B3FD4;}
  .exam-btn.tone-4{background:linear-gradient(160deg,#FFF0F5,#FFFBFC); border-color:#FBD3E1;}
  .exam-btn.tone-4 .eb-name{color:#6B0B38;} .exam-btn.tone-4 .eb-spec b{color:#B1005A;}
  .exam-btn.tone-5{background:linear-gradient(160deg,#EAFAFC,#FAFEFF); border-color:#C9E9F0;}
  .exam-btn.tone-5 .eb-name{color:#083E4A;} .exam-btn.tone-5 .eb-spec b{color:#0E7A8E;}
  .exam-btn.tone-6{background:linear-gradient(160deg,#FFF9E8,#FFFEF9); border-color:#F7E4B5;}
  .exam-btn.tone-6 .eb-name{color:#5E4405;} .exam-btn.tone-6 .eb-spec b{color:#A07708;}
  .exam-btn.tone-7{background:linear-gradient(160deg,#F0F1FB,#FCFCFE); border-color:#D9DBF2;}
  .exam-btn.tone-7 .eb-name{color:#22265E;} .exam-btn.tone-7 .eb-spec b{color:#454BAE;}

  .exam-btn:hover{transform:translateY(-5px); box-shadow:0 24px 46px -18px rgba(22,17,58,.4);}
  .exam-btn.active{border-width:2.5px; border-color:currentColor;
    box-shadow:0 0 0 4px rgba(138,92,255,.13), 0 24px 46px -18px rgba(138,92,255,.5);}
  .exam-btn.active .eb-name::after{content:' ✓'; color:#0E8A5C;}

  /* ===== LANGUAGE ENTRY GATE ===== */
  .lang-gate{display:grid; grid-template-columns:1fr 1fr; gap:20px; margin-bottom:26px;}
  .lang-card{position:relative; overflow:hidden; cursor:pointer; text-align:left;
    padding:30px 26px; border-radius:24px; border:2px solid transparent;
    transition:transform .25s cubic-bezier(.2,.9,.3,1), box-shadow .25s, border-color .25s;}
  .lang-card.en{background:linear-gradient(150deg,#EEF3FF 0%,#F8FAFF 65%); border-color:#D3E0FB;}
  .lang-card.hi{background:linear-gradient(150deg,#FFF2EC 0%,#FFFBF8 65%); border-color:#FBD9C7;}
  .lang-card:hover{transform:translateY(-6px); box-shadow:0 30px 56px -22px rgba(22,17,58,.42);}
  .lang-card.on{border-color:#8A5CFF; box-shadow:0 0 0 4px rgba(138,92,255,.15), 0 30px 56px -24px rgba(138,92,255,.55);}
  .lang-flag{font-size:34px; line-height:1; margin-bottom:14px;}
  .lang-title{font-family:'Space Grotesk',sans-serif; font-weight:800; font-size:25px; letter-spacing:-.5px; margin-bottom:6px;}
  .lang-card.en .lang-title{color:#14306B;} .lang-card.hi .lang-title{color:#6B2D0B;}
  .lang-sub{font-size:14.5px; line-height:1.6; color:#4A4370; margin-bottom:14px;}
  .lang-meta{display:flex; gap:8px; flex-wrap:wrap;}
  .lang-pill{font-family:'IBM Plex Mono',monospace; font-size:11px; font-weight:700;
    background:rgba(255,255,255,.8); border:1px solid rgba(22,17,58,.1); border-radius:100px; padding:5px 11px; color:#3A3358;}
  .lang-go{margin-top:16px; font-weight:800; font-size:14.5px;}
  .lang-card.en .lang-go{color:#2E5BC7;} .lang-card.hi .lang-go{color:#C2540E;}
  @media (max-width:760px){ .lang-gate{grid-template-columns:1fr;} }


  /* ===== WHAT YOU GET ===== */
  /* WHAT YOU GET — was still on the retired neon system: purple gradients, a violet
     hover glow, Space Grotesk (no longer loaded) and a gradient-clipped figure that
     rendered as transparent text. Rewritten in place on the paper/teal system rather
     than overridden, so there is one rule per property. */
  .wyg-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(272px,1fr)); gap:16px;}
  .wyg-card{background:#fff; border:1px solid var(--rule); border-radius:14px;
    padding:22px 20px; box-shadow:0 1px 2px rgba(16,23,37,.04);
    transition:transform .15s cubic-bezier(.2,.7,.3,1), box-shadow .15s, border-color .15s;}
  .wyg-card:hover{transform:translateY(-2px); border-color:rgba(16,23,37,.24);
    box-shadow:0 1px 2px rgba(16,23,37,.05), 0 8px 24px -12px rgba(16,23,37,.18);}
  .wyg-hero{grid-column:span 2; background:var(--paper); border-color:var(--rule);}
  .wyg-icon{font-size:26px; line-height:1; margin-bottom:10px;}
  .wyg-card h3{font-family:'IBM Plex Sans Condensed','IBM Plex Sans',sans-serif; font-weight:700;
    font-size:18px; color:var(--text); margin-bottom:8px; letter-spacing:-.014em;}
  .wyg-card p{font-size:14.5px; line-height:1.62; color:var(--text-2);}
  .wyg-card b{color:var(--text); font-weight:600;}
  .wyg-tags{display:flex; gap:6px; flex-wrap:wrap; margin-top:14px;}
  .wyg-tags span{font-family:'IBM Plex Mono',monospace; font-size:10.5px; font-weight:600;
    letter-spacing:.06em; text-transform:uppercase; color:var(--accent);
    background:var(--accent-soft); border:1px solid rgba(14,124,102,.22);
    border-radius:4px; padding:4px 9px;}
  .wyg-strip{display:grid; grid-template-columns:repeat(auto-fit,minmax(132px,1fr)); gap:14px;
    margin-top:22px; background:var(--ink); border:1px solid var(--ink-3);
    border-radius:14px; padding:22px 20px;}
  .wyg-strip > div{text-align:center;}
  /* was background-clip:text with color:transparent — if the gradient failed to paint,
     the figure rendered invisible. Solid colour, tabular figures. */
  .wyg-strip b{display:block; font-family:'IBM Plex Mono',monospace; font-weight:600;
    font-size:26px; color:#FFFFFF; letter-spacing:-.02em;
    font-variant-numeric:tabular-nums lining-nums; background:none; -webkit-text-fill-color:currentColor;}
  .wyg-strip span{display:block; font-family:'IBM Plex Mono',monospace; font-size:10.5px;
    letter-spacing:.09em; text-transform:uppercase; color:var(--on-ink-3); margin-top:6px;}
  @media (max-width:900px){ .wyg-hero{grid-column:span 1;} }
  @media (max-width:560px){
    .wyg-grid{grid-template-columns:1fr; gap:12px;}
    .wyg-card{padding:18px 16px; border-radius:12px;}
    .wyg-card h3{font-size:17px;}
    .wyg-strip{padding:18px 16px; gap:12px; grid-template-columns:repeat(2,1fr);}
    .wyg-strip b{font-size:22px;}
  }


  .fmt-sep{width:1px; height:22px; background:rgba(22,17,58,.16); margin:0 4px;}
  .fs-steps{display:flex; gap:5px; margin-right:6px;}
  .fs-step{border:1px solid rgba(255,255,255,.22); background:rgba(255,255,255,.10); color:#fff;
    font-family:'Space Grotesk',sans-serif; font-weight:800; font-size:12.5px; cursor:pointer;
    border-radius:9px; padding:7px 11px; transition:background .18s, transform .12s;}
  .fs-step:hover{background:rgba(255,255,255,.22);}
  .fs-step:active{transform:scale(.94);}
  .exam-btn.ghost#examQuitBtn, .exam-btn.ghost#shQuitBtn{font-size:15px;}


  .exam-topbar.nofs #examQuitBtn, .exam-topbar.nofs #shQuitBtn{
    background:rgba(255,92,108,.28); box-shadow:0 0 0 2px rgba(255,92,108,.45);}


  /* ===== DICTATION SERIES ===== */
  .series-row{display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:14px;}
  .series-btn{position:relative; overflow:hidden; text-align:left; cursor:pointer; padding:20px 18px;
    border-radius:20px; border:1.5px solid transparent; font-family:'Sora',sans-serif;
    box-shadow:0 2px 4px rgba(22,17,58,.04), 0 16px 34px -24px rgba(22,17,58,.5);
    transition:transform .22s cubic-bezier(.2,.9,.3,1), box-shadow .22s, border-color .22s;}
  .series-btn:hover{transform:translateY(-5px); box-shadow:0 24px 46px -18px rgba(22,17,58,.42);}
  .series-btn.active{border-width:2.5px; border-color:currentColor;
    box-shadow:0 0 0 4px rgba(138,92,255,.13), 0 24px 46px -18px rgba(138,92,255,.5);}
  .sb-tag{display:inline-block; font-family:'IBM Plex Mono',monospace; font-size:10px; font-weight:800;
    letter-spacing:.9px; text-transform:uppercase; background:rgba(255,255,255,.75);
    border-radius:100px; padding:4px 10px; margin-bottom:10px;}
  .sb-name{display:block; font-size:18px; font-weight:800; letter-spacing:-.3px; margin-bottom:6px;}
  .sb-desc{display:block; font-size:13px; line-height:1.55; color:#4A4370;}
  .series-btn.tone-0{background:linear-gradient(160deg,#EEF4FF,#FBFCFF); border-color:#D5E2FB;} .series-btn.tone-0 .sb-name{color:#14306B;}
  .series-btn.tone-1{background:linear-gradient(160deg,#EDFBF4,#FBFEFC); border-color:#CDEEDF;} .series-btn.tone-1 .sb-name{color:#0B4A33;}
  .series-btn.tone-2{background:linear-gradient(160deg,#FFF3EC,#FFFCFA); border-color:#FBDDCA;} .series-btn.tone-2 .sb-name{color:#6B2D0B;}
  .series-btn.tone-3{background:linear-gradient(160deg,#F5EEFF,#FDFBFF); border-color:#E3D5FB;} .series-btn.tone-3 .sb-name{color:#3A1470;}
  .series-note{margin-top:12px; font-size:12.5px; line-height:1.55; color:#5B5480;
    background:#FBF8FF; border:1px dashed rgba(138,92,255,.3); border-radius:10px; padding:10px 13px;}

  .series-drill{margin-top:16px; padding:18px; border-radius:18px;
    background:linear-gradient(160deg,#F8F5FF,#FFFDFF); border:1px solid rgba(138,92,255,.2);}
  .vol-row{display:flex; gap:10px; flex-wrap:wrap; margin-bottom:14px;}
  .vol-btn{cursor:pointer; border-radius:14px; padding:12px 18px; font-family:'Sora',sans-serif;
    font-weight:700; font-size:14.5px; color:#2E2750; background:#fff;
    border:1.5px solid rgba(22,17,58,.14); transition:all .2s; display:flex; flex-direction:column; gap:3px;}
  .vol-btn:hover{border-color:var(--violet); transform:translateY(-2px);}
  .vol-btn.active{background:linear-gradient(135deg,#8A5CFF,#5B3FD4); color:#fff; border-color:transparent;
    box-shadow:0 10px 24px -8px rgba(138,92,255,.6);}
  .vb-wpm{font-family:'IBM Plex Mono',monospace; font-size:10.5px; opacity:.75; font-weight:600;}
  .cat-row{display:flex; gap:10px; flex-wrap:wrap; margin-bottom:14px;}
  .cat-btn{cursor:pointer; border-radius:100px; padding:10px 20px; font-family:'Sora',sans-serif;
    font-weight:700; font-size:14px; border:1.5px solid rgba(22,17,58,.14); background:#fff; color:#2E2750;
    transition:all .2s;}
  .cat-btn.general.active{background:linear-gradient(90deg,#33C9F5,#2E7BC7); color:#fff; border-color:transparent;}
  .cat-btn.legal.active{background:linear-gradient(90deg,#F2793C,#C2540E); color:#fff; border-color:transparent;}
  .dict-list{display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:9px; max-height:330px; overflow-y:auto; padding-right:4px;}
  .dict-item{display:flex; align-items:center; gap:12px; cursor:pointer; text-align:left;
    background:#fff; border:1px solid rgba(22,17,58,.1); border-radius:12px; padding:11px 13px;
    font-family:'Sora',sans-serif; transition:all .18s;}
  .dict-item:hover{border-color:var(--violet); transform:translateX(3px); box-shadow:0 8px 18px -10px rgba(138,92,255,.5);}
  .di-n{flex:0 0 30px; height:30px; border-radius:9px; background:rgba(138,92,255,.12); color:#5B3FD4;
    display:flex; align-items:center; justify-content:center; font-weight:800; font-size:13px;}
  .di-body{flex:1; min-width:0;}
  .di-body b{display:block; font-size:14px; color:#14102E; font-weight:700;}
  .di-body em{display:block; font-style:normal; font-family:'IBM Plex Mono',monospace; font-size:11px; color:#5B5480; margin-top:2px;}
  .di-go{font-size:12.5px; font-weight:800; color:var(--violet); opacity:0; transition:opacity .18s;}
  .dict-item:hover .di-go{opacity:1;}

  /* ===== TWO-PILLAR COMPARISON ===== */
  .pillars{display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-top:20px;}
  .pillar{position:relative; overflow:hidden; border-radius:18px; border:1px solid rgba(22,17,58,.1);
    box-shadow:0 2px 4px rgba(22,17,58,.04), 0 18px 40px -28px rgba(22,17,58,.45);}
  .pillar::after{content:''; position:absolute; inset:0; pointer-events:none; opacity:.55;
    background:radial-gradient(680px 220px at 12% -10%, rgba(138,92,255,.16), transparent 70%);
    animation:pillarDrift 13s ease-in-out infinite;}
  .pillar-typed::after{background:radial-gradient(680px 220px at 88% -10%, rgba(34,197,139,.18), transparent 70%);
    animation-delay:-6s;}
  @keyframes pillarDrift{0%,100%{transform:translate3d(0,0,0);} 50%{transform:translate3d(0,14px,0) scale(1.05);}}
  .pillar-master{background:linear-gradient(165deg,#F7F4FF 0%,#FFFDFF 60%);}
  .pillar-typed{background:linear-gradient(165deg,#F1FBF6 0%,#FFFEFC 60%);}
  .pillar-head{position:relative; z-index:1; display:flex; align-items:center; gap:8px; flex-wrap:wrap;
    padding:12px 18px; font-family:'IBM Plex Mono',monospace; font-size:11.5px; letter-spacing:1.3px;
    text-transform:uppercase; font-weight:800; border-bottom:1px solid rgba(22,17,58,.08);}
  .pillar-master .pillar-head{color:#5B3FD4; background:rgba(138,92,255,.09);}
  .pillar-typed .pillar-head{color:#0A7A55; background:rgba(34,197,139,.12);}
  .ph-dot{width:9px; height:9px; border-radius:50%; background:currentColor; box-shadow:0 0 0 4px rgba(255,255,255,.6);}
  .ph-sub{margin-left:auto; font-size:10.5px; letter-spacing:.6px; opacity:.8; text-transform:none;}
  .pillar-body{position:relative; z-index:1; padding:18px 20px; max-height:330px; overflow-y:auto;
    font-family:'Inter',sans-serif; font-size:15.5px; line-height:2.05; color:#14102E;}
  .pillar-body .pw{border-radius:4px; padding:1px 3px;}
  .pw-ok{color:#0B7A50;}
  .pw-sub{background:rgba(216,20,105,.15); color:#8C0046; font-weight:600;}
  .pw-miss{background:rgba(208,52,44,.13); color:#A32019; text-decoration:line-through;}
  .pw-extra{background:rgba(194,84,14,.15); color:#8A3A05; text-decoration:line-through;}
  .pw-cap{background:rgba(107,63,212,.15); color:#4A2AA8;}
  .pw-punct{background:rgba(14,122,142,.15); color:#0A5A68;}
  .pw-gap{opacity:.32;}
  @media (max-width:860px){ .pillars{grid-template-columns:1fr;} }


  /* ===== EXAM READINESS ===== */
  .rdy-hero{display:grid; grid-template-columns:auto 1fr; gap:26px; align-items:center;
    background:linear-gradient(150deg,#F6F1FF 0%,#FFF8FB 60%,#FFFFFF 100%);
    border:1px solid #E3D5FB; border-radius:22px; padding:26px 28px; margin-bottom:20px;
    box-shadow:0 2px 4px rgba(22,17,58,.04), 0 20px 44px -28px rgba(22,17,58,.45);}
  .rdy-dial{position:relative; width:150px; height:150px; flex:0 0 150px;}
  .rdy-dial svg{transform:rotate(-90deg); width:150px; height:150px;}
  .rdy-dial .rd-num{position:absolute; inset:0; display:flex; flex-direction:column;
    align-items:center; justify-content:center;}
  .rdy-dial .rd-num b{font-family:'Space Grotesk',sans-serif; font-weight:800; font-size:40px; color:#14102E; line-height:1;}
  .rdy-dial .rd-num span{font-size:12px; color:#5B5480; margin-top:3px;}
  .rdy-title{font-family:'Space Grotesk',sans-serif; font-weight:800; font-size:23px; color:#14102E; margin-bottom:6px;}
  .rdy-level{display:inline-block; font-family:'IBM Plex Mono',monospace; font-size:12px; font-weight:800;
    letter-spacing:1px; text-transform:uppercase; border-radius:100px; padding:6px 14px; margin-bottom:10px;}
  .lvl-ready{background:rgba(34,197,139,.16); color:#0A7A55;}
  .lvl-near{background:rgba(138,92,255,.16); color:#5B3FD4;}
  .lvl-dev{background:rgba(255,200,87,.22); color:#8a5c00;}
  .lvl-not{background:rgba(226,59,78,.14); color:#B3120F;}
  .rdy-note{font-size:14.5px; color:#4A4370; line-height:1.6;}
  .rdy-scope{font-family:'IBM Plex Mono',monospace; font-size:11.5px; color:#8C87A6; margin-top:8px;}

  /* Mandatory exam requirements — deliberately plain and legible, not decorative. */
  .rdy-reqs{background:#fff; border:1px solid rgba(22,17,58,.09); border-radius:18px; padding:20px 24px; margin-bottom:20px;}
  .rdy-reqs h4{font-family:'Space Grotesk',sans-serif; font-size:15px; color:var(--ink); margin-bottom:12px;}
  .rdy-req{display:flex; align-items:center; gap:10px; flex-wrap:wrap; padding:9px 0; border-top:1px solid rgba(22,17,58,.07);}
  .rdy-req:first-of-type{border-top:none;}
  .rdy-req .rq-mark{width:20px; height:20px; flex:none; border-radius:50%; display:grid; place-items:center; font-size:12px; font-weight:700; color:#fff;}
  .rdy-req.met .rq-mark{background:#22C58B;}
  .rdy-req.unmet .rq-mark{background:#E23B4E;}
  .rdy-req.unknown .rq-mark{background:#A9A4C0;}
  .rdy-req .rq-label{font-weight:600; font-size:14px; color:var(--ink); min-width:110px;}
  .rdy-req .rq-need,.rdy-req .rq-have{font-family:'IBM Plex Mono',monospace; font-size:12px; color:var(--ink-soft);}
  .rdy-req.unmet .rq-have{color:#E23B4E; font-weight:600;}
  .rdy-req.met .rq-have{color:#0E8A5C; font-weight:600;}
  .rdy-req-note{margin-top:12px; font-size:13px; line-height:1.6; color:var(--ink-soft); background:rgba(22,17,58,.035); border-radius:10px; padding:10px 13px;}
  .rdy-req-note.unmet{background:rgba(226,59,78,.07); color:#9B2233;}
  .rdy-bars{background:#fff; border:1px solid rgba(22,17,58,.09); border-radius:18px; padding:22px 24px; margin-bottom:20px;}
  .rdy-bar{display:grid; grid-template-columns:130px 1fr 52px; gap:14px; align-items:center; margin-bottom:13px;}
  .rdy-bar:last-child{margin-bottom:0;}
  .rb-label{font-size:14.5px; font-weight:600; color:#14102E;}
  .rb-track{height:11px; border-radius:100px; background:rgba(22,17,58,.08); overflow:hidden;}
  .rb-fill{height:100%; border-radius:100px; transition:width .7s cubic-bezier(.2,.9,.3,1);}
  .rb-val{font-family:'Space Grotesk',sans-serif; font-weight:800; font-size:16px; text-align:right; color:#14102E;}
  .rb-na{font-size:12.5px; color:#8C87A6; font-style:italic;}
  .rdy-weak{background:linear-gradient(150deg,#FFF3EC,#FFFCFA); border:1px solid #FBDDCA;
    border-radius:18px; padding:20px 22px; margin-bottom:20px;}
  .rdy-weak h4{font-family:'Space Grotesk',sans-serif; font-size:17px; color:#6B2D0B; margin-bottom:8px;}
  .rdy-weak p{font-size:14.5px; line-height:1.62; color:#4A4370;}
  .rdy-ev{margin-top:10px; font-size:13.5px; color:#8A3A05; background:rgba(255,255,255,.7);
    border-radius:10px; padding:10px 13px;}
  .rdy-target{display:flex; gap:12px; align-items:center; flex-wrap:wrap; background:#fff;
    border:1px solid rgba(22,17,58,.09); border-radius:16px; padding:16px 20px; margin-bottom:20px;}
  .rdy-target b{font-family:'Space Grotesk',sans-serif; font-size:17px; color:#14102E;}
  .rdy-plan{background:#fff; border:1px solid rgba(22,17,58,.09); border-radius:18px; padding:24px; margin-bottom:20px;}
  .rdy-plan h4{font-family:'Space Grotesk',sans-serif; font-size:19px; color:#14102E; margin-bottom:6px;}
  .rdy-plan .why{font-size:14px; color:#5B5480; margin-bottom:14px;}
  .rdy-plan ul{list-style:none; margin-bottom:20px;}
  .rdy-plan li{font-size:14.5px; color:#4A4370; line-height:1.6; padding-left:20px; position:relative; margin-bottom:8px;}
  .rdy-plan li::before{content:'▸'; position:absolute; left:0; color:var(--violet);}
  .rdy-empty{background:#fff; border:1px dashed rgba(138,92,255,.4); border-radius:18px; padding:30px 26px; text-align:center;}
  .rdy-empty h3{font-family:'Space Grotesk',sans-serif; font-size:21px; color:#14102E; margin-bottom:10px;}
  .rdy-empty p{font-size:15px; color:#5B5480; line-height:1.65; max-width:520px; margin:0 auto 18px;}
  .rdy-steps{display:flex; gap:10px; justify-content:center; flex-wrap:wrap;}
  @media (max-width:700px){
    .rdy-hero{grid-template-columns:1fr; justify-items:center; text-align:center; gap:18px;}
    .rdy-bar{grid-template-columns:108px 1fr 44px; gap:10px;}
    .rb-label{font-size:13.5px;}
  }


/* ==========================================================================
   STENOCORE DESIGN SYSTEM  —  "the pad and the instrument"
   --------------------------------------------------------------------------
   Two surfaces, each with a job, so the light/dark split is a decision rather
   than an accident:

     PAPER      reading and reference — dashboard, readiness, progress, library.
                Warm off-white, ink-navy type, hairline rules, the steno pad's
                ruled page and its vertical centre rule used as real structure.

     INSTRUMENT doing the work — typing test, dictation, exam mode. Deep ink,
                high contrast, monospaced figures, almost no chrome. A candidate
                mid-attempt should see the passage, the clock, and nothing else.

   Type is the IBM Plex superfamily: an engineering family with a matched
   Devanagari, which this app genuinely needs for Hindi typing. Condensed for
   headings, Mono for every figure. All figures are tabular so a live WPM
   counter cannot jitter as it counts.

   Nothing below changes behaviour: presentation only.
   ========================================================================== */

:root{
  /* ink — authority, court record, the instrument surface */
  --ink:#101725; --ink-1:#18203247; --ink-2:#1B2436; --ink-3:#28324A;
  /* paper — the steno pad page */
  --paper:#FBFAF6; --paper-2:#F4F2EC; --paper-3:#EAE7DE;
  /* type on paper */
  --text:#101725; --text-2:#414B60; --text-3:#5D6678;
  /* type on ink */
  --on-ink:#F2F4F8; --on-ink-2:rgba(242,244,248,0.72); --on-ink-3:rgba(242,244,248,0.46);
  /* hairlines */
  --rule:rgba(16,23,37,0.13); --rule-soft:rgba(16,23,37,0.07); --rule-ink:rgba(242,244,248,0.14);
  /* signature accent: deep teal (brand) + brass (highlight) */
  --accent:#0E7C66; --accent-2:#0A5F4E; --accent-soft:rgba(14,124,102,0.10);
  --brass:#8A5F15; --brass-soft:rgba(168,116,26,0.12);
  /* semantic — this product is fundamentally pass / not yet */
  --pass:#0E7C66; --pass-soft:rgba(14,124,102,0.10);
  --fail:#A32219; --fail-soft:rgba(163,34,25,0.09);
  --hold:#8A5F15; --hold-soft:rgba(168,116,26,0.12);

  /* legacy names kept so untouched rules stay coherent */
  --bg:#101725; --cyan:#0E7C66; --magenta:#A32219; --violet:#0E7C66; --gold:#8A5F15;
  --ink-soft:rgba(242,244,248,0.72); --line:rgba(242,244,248,0.14); --glass:rgba(255,255,255,0.05);
  --red:#A32219; --orange:#8A5F15; --purple:#0E7C66; --green:#0E7C66;

  --accent-3:#3FD9B4;   /* the teal intended for INK surfaces (10.07:1 on ink) */
  --surface:#FFFFFF;    /* card/modal fill on paper */
  --r-sm:6px; --r:10px; --r-lg:14px;
  --shadow:0 1px 2px rgba(16,23,37,.05), 0 8px 24px -12px rgba(16,23,37,.18);
  --shadow-lg:0 2px 4px rgba(16,23,37,.06), 0 24px 48px -20px rgba(16,23,37,.28);
  --t:150ms cubic-bezier(.2,.7,.3,1);
}

/* ---------- base ---------- */
body{ font-family:'IBM Plex Sans',system-ui,sans-serif; background:var(--ink); color:var(--on-ink);
      line-height:1.55; letter-spacing:-0.005em; }
.display,h1,h2,h3,h4,.dash-h1,.dash-h3{ font-family:'IBM Plex Sans Condensed','IBM Plex Sans',sans-serif;
      letter-spacing:-0.015em; }
.mono,code,kbd{ font-family:'IBM Plex Mono',ui-monospace,monospace; }
::selection{ background:var(--accent); color:#fff; }

/* Every figure in the app is tabular: counters must not reflow while counting. */
.rd-num b,.dash-stat b,.stat b,.exam-timer,.tt-live b,.res-num,.cheer-stat b,
.lb-wpm,.hist-wpm,.vb-wpm,.key-cap,.steno-stats .num,.rdy-bar b,#resWpm,#resGross,
#resAcc,#resMarks,#resTyped,#shMarks,#shAcc,.exam-progress-meta,.dash-stat-row b{
  font-variant-numeric:tabular-nums lining-nums; font-feature-settings:"tnum" 1,"lnum" 1;
}

/* ---------- ambience: replace the gradient wash with the steno pad page ----------
   A pad is ruled horizontally with a vertical centre rule. Used at very low
   contrast it gives the surface a reason to exist without decorating it. */
.blob,.blob1,.blob2,.blob3{ display:none !important; }
.grid-overlay{
  background-image:repeating-linear-gradient(to bottom,transparent 0 31px,rgba(242,244,248,0.045) 31px 32px);
  background-size:auto; mask-image:linear-gradient(to bottom,black,transparent 92%);
}
.dash-orb{ display:none !important; }
.dash-bg{ opacity:.5; }
.dash-bg path{ opacity:.05; stroke-width:1.6; }
.dash-grid{
  background-image:repeating-linear-gradient(to bottom,transparent 0 31px,rgba(16,23,37,0.035) 31px 32px);
  background-size:auto;
}
.dash-keys{ opacity:.5; }

/* ==========================================================================
   BUTTONS — one shape language: 6px radius, real states, no pills
   ========================================================================== */
.btn{
  font-family:'IBM Plex Sans',sans-serif; font-weight:600; font-size:14px;
  letter-spacing:0.005em; border-radius:var(--r-sm); padding:11px 20px;
  border:1px solid transparent; transition:background var(--t),border-color var(--t),
  color var(--t),transform var(--t),box-shadow var(--t); position:relative;
}
.btn:active{ transform:translateY(1px); }
.btn-primary{ background:var(--accent); color:#fff; border-color:var(--accent-2);
  box-shadow:0 1px 0 rgba(255,255,255,.14) inset, 0 2px 8px -2px rgba(14,124,102,.5); }
.btn-primary:hover{ background:var(--accent-2); box-shadow:0 2px 14px -3px rgba(14,124,102,.55); }
.btn-ghost{ background:transparent; color:var(--on-ink); border-color:var(--rule-ink); }
.btn-ghost:hover{ background:rgba(242,244,248,.07); border-color:rgba(242,244,248,.3); }
#appShell .btn-ghost{ color:var(--text); border-color:var(--rule); background:#fff; }
#appShell .btn-ghost:hover{ background:var(--paper-2); border-color:rgba(16,23,37,.28); }
.btn-sm{ padding:8px 15px; font-size:13px; }
.btn-xs{ padding:6px 12px; font-size:12px; border-radius:5px; }

/* keyboard focus must always be obvious — this is a keyboard-first product */
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,
textarea:focus-visible,[contenteditable]:focus-visible,.chip:focus-visible{
  outline:2px solid var(--accent); outline-offset:2px; border-radius:var(--r-sm);
}
#appShell a:focus-visible,#appShell button:focus-visible{ outline-color:var(--accent); }

/* ==========================================================================
   PAPER SURFACES
   ========================================================================== */
#appShell{ background:var(--paper-2); }
.dash-scroll{ padding-bottom:64px; }
.dash-h1{ font-weight:700; font-size:30px; color:var(--text); letter-spacing:-0.022em; margin-bottom:4px; }
.dash-sub{ color:var(--text-2); font-size:14.5px; }
.dash-h3{ font-weight:700; font-size:17px; color:var(--text); letter-spacing:-0.012em; }

/* Section headings carry the pad's centre rule as a real marker. */
.dash-h3,.rdy-reqs h4,.rdy-weak h4{ position:relative; padding-left:13px; }
.dash-h3::before,.rdy-reqs h4::before,.rdy-weak h4::before{
  content:''; position:absolute; left:0; top:.18em; bottom:.18em; width:2px;
  background:var(--accent); border-radius:1px;
}

/* Cards: hairline + paper, not glass. Shadow only on lift. */
.dash-card,.dash-info-card,.lib-card,.news-card,.rdy-bars,.rdy-reqs,.rdy-hero,
.tt-passage-card,.exam-spec,.cheer-box,.modal-box,.dash-stat,.stat{
  background:#fff; border:1px solid var(--rule); border-radius:var(--r-lg);
  box-shadow:0 1px 2px rgba(16,23,37,.04);
}
.dash-card{ transition:border-color var(--t),box-shadow var(--t),transform var(--t); }
.dash-card:hover{ border-color:rgba(16,23,37,.24); box-shadow:var(--shadow); transform:translateY(-2px); }

/* Stat tiles read as instrument readouts: label above, figure in mono below. */
.dash-stat,.stat{ padding:18px 20px; text-align:left; }
.dash-stat b,.stat b{ font-family:'IBM Plex Mono',monospace; font-size:30px; font-weight:600;
  color:var(--text); letter-spacing:-0.02em; display:block; line-height:1.1; }
.dash-stat span,.stat span{ display:block; font-family:'IBM Plex Mono',monospace; font-size:10.5px;
  letter-spacing:0.11em; text-transform:uppercase; color:var(--text-3); margin-top:7px; }

/* ==========================================================================
   SIDEBAR — ink rail, rule-marked active state (no layout-shifting hover)
   ========================================================================== */
.dash-sidebar{ background:var(--ink); border-right:1px solid rgba(0,0,0,.4); padding:20px 14px; }
.dash-logo{ padding:0 6px 18px; border-bottom:1px solid var(--rule-ink); margin-bottom:16px; }
.dash-nav{ gap:2px; }
.dash-nav-item{
  font-family:'IBM Plex Sans',sans-serif; font-size:14px; font-weight:500; gap:11px;
  color:var(--on-ink-2); border-radius:var(--r-sm); padding:10px 12px; position:relative;
  transition:background var(--t),color var(--t);
}
.dash-nav-item:hover{ background:rgba(242,244,248,.06); color:var(--on-ink); padding-left:12px; }
.dash-nav-item.active{
  background:rgba(14,124,102,.16); color:#fff; box-shadow:none;
}
.dash-nav-item.active::before{
  content:''; position:absolute; left:0; top:7px; bottom:7px; width:2.5px;
  background:var(--accent); border-radius:0 2px 2px 0;
}
.dni-icon{ width:17px; height:17px; flex:none; display:inline-flex; align-items:center;
  justify-content:center; opacity:.9; }
.dni-icon svg{ width:17px; height:17px; stroke:currentColor; fill:none;
  stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }
.dash-nav-item.active .dni-icon{ color:#3FD9B4; opacity:1; }
.dash-sidebar-foot{ border-top:1px solid var(--rule-ink); }
.dash-sidebar-foot a{ color:var(--on-ink-3); font-size:12.5px; }
.dash-logout{ border-radius:var(--r-sm) !important; }

/* ---------- topbar ---------- */
.dash-topbar{ background:rgba(251,250,246,.92); backdrop-filter:blur(10px);
  border-bottom:1px solid var(--rule); }
.dash-search{ background:#fff; border:1px solid var(--rule); border-radius:var(--r);
  box-shadow:none; transition:border-color var(--t),box-shadow var(--t); }
.dash-search:focus-within{ border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft); }
.dash-search input{ font-family:'IBM Plex Sans',sans-serif; font-size:14px; color:var(--text); }
.dash-search input::placeholder{ color:var(--text-3); }
.dash-plan-badge{ font-family:'IBM Plex Mono',monospace; font-size:10.5px; letter-spacing:.09em;
  text-transform:uppercase; border-radius:100px; padding:5px 11px;
  background:var(--brass-soft); color:var(--brass); border:1px solid rgba(168,116,26,.28); }
.dash-avatar{ border-radius:var(--r-sm); background:var(--accent); font-family:'IBM Plex Mono',monospace;
  font-weight:600; }

/* ==========================================================================
   EXAM READINESS — the diagnosis has to read like an instrument, and the
   colour of a component must never contradict the requirement verdict.
   ========================================================================== */
.rdy-hero{ padding:26px 28px; background:#fff; }
.rdy-title{ font-family:'IBM Plex Sans Condensed',sans-serif; font-weight:700;
  font-size:24px; color:var(--text); letter-spacing:-0.018em; }
.rd-num b{ font-family:'IBM Plex Mono',monospace; font-weight:600; letter-spacing:-0.03em; }
.rd-num span{ font-family:'IBM Plex Mono',monospace; font-size:9.5px; letter-spacing:.12em;
  text-transform:uppercase; color:var(--text-3); }
.rdy-level{ font-family:'IBM Plex Mono',monospace; font-size:11px; font-weight:600;
  letter-spacing:.13em; text-transform:uppercase; border-radius:4px; padding:6px 11px;
  border:1px solid transparent; }
.rdy-level.lvl-ready{ background:var(--pass-soft); color:var(--pass); border-color:rgba(14,124,102,.3); }
.rdy-level.lvl-near{ background:var(--hold-soft); color:var(--hold); border-color:rgba(168,116,26,.3); }
.rdy-level.lvl-dev{ background:var(--hold-soft); color:var(--hold); border-color:rgba(168,116,26,.3); }
.rdy-level.lvl-not{ background:var(--fail-soft); color:var(--fail); border-color:rgba(163,34,25,.28); }
.rdy-note{ color:var(--text-2); font-size:14.5px; line-height:1.6; }
.rdy-scope{ font-family:'IBM Plex Mono',monospace; font-size:11px; color:var(--text-3);
  letter-spacing:.02em; }

/* requirement rows — the part that decides pass or fail, so it leads */
.rdy-reqs{ padding:22px 26px; }
.rdy-reqs h4{ font-size:13px; font-weight:600; letter-spacing:.02em; text-transform:none;
  color:var(--text); margin-bottom:14px; }
.rdy-req{ padding:12px 0; gap:12px; border-top:1px solid var(--rule-soft); }
.rdy-req .rq-mark{ width:19px; height:19px; font-size:11px; font-weight:700; }
.rdy-req.met .rq-mark{ background:var(--pass); }
.rdy-req.unmet .rq-mark{ background:var(--fail); }
.rdy-req.unknown .rq-mark{ background:var(--text-3); }
.rdy-req .rq-label{ font-size:14px; font-weight:600; color:var(--text); min-width:96px; }
/* these were near-invisible before: the bar and the reading are the whole point */
.rdy-req .rq-need{ font-family:'IBM Plex Mono',monospace; font-size:12px; color:var(--text-2);
  background:var(--paper-2); border:1px solid var(--rule-soft); border-radius:4px; padding:3px 8px; }
.rdy-req .rq-have{ font-family:'IBM Plex Mono',monospace; font-size:12.5px; font-weight:600;
  color:var(--text-2); margin-left:auto; }
.rdy-req.unmet .rq-have{ color:var(--fail); }
.rdy-req.met .rq-have{ color:var(--pass); }
.rdy-req-note{ font-size:13px; line-height:1.6; border-radius:var(--r-sm); padding:11px 13px;
  background:var(--paper-2); color:var(--text-2); border:1px solid var(--rule-soft); }
.rdy-req-note.unmet{ background:var(--fail-soft); color:#7E1A13; border-color:rgba(163,34,25,.22); }

/* component bars */
.rdy-bars{ padding:20px 26px; }
.rdy-bar{ padding:11px 0; border-top:1px solid var(--rule-soft); }
.rdy-bar:first-child{ border-top:none; }
.rdy-bar>span:first-child{ font-size:14px; color:var(--text); font-weight:500; }
.rdy-bar b{ font-family:'IBM Plex Mono',monospace; font-weight:600; color:var(--text); }
.rdy-weak{ background:var(--paper); border:1px solid var(--rule); border-radius:var(--r-lg); }
.rdy-weak h4{ color:var(--text); }
.rdy-weak p{ color:var(--text-2); }
.rdy-target,.rdy-plan,.rdy-steps,.rdy-ev{ color:var(--text-2); }
.rdy-empty{ color:var(--text-2); }

/* ==========================================================================
   INSTRUMENT SURFACES — typing, dictation, exam
   ========================================================================== */
.exam-pane,.exam-topbar,.exam-split{ font-family:'IBM Plex Sans',sans-serif; }
.exam-topbar{ background:var(--ink); border-bottom:1px solid var(--rule-ink); }
.exam-timer{ font-family:'IBM Plex Mono',monospace; font-weight:600; letter-spacing:-0.01em; }
.exam-passage{ font-family:'IBM Plex Serif','IBM Plex Sans',Georgia,serif; }
.exam-progress{ background:rgba(242,244,248,.12); border-radius:100px; overflow:hidden; }
.exam-progress-fill{ background:var(--accent); transition:width .3s cubic-bezier(.2,.7,.3,1); }
.exam-progress-meta{ font-family:'IBM Plex Mono',monospace; font-size:11.5px; }

/* The passage a candidate reads from and the box they type into are the two
   things that matter; both get generous measure and calm colour. */
#typingInputBox,#shInput,.fmt-rich,.fmt-paper{
  font-family:'IBM Plex Mono',monospace; font-size:15px; line-height:1.85;
  border-radius:var(--r); border:1px solid var(--rule); background:#fff; color:var(--text);
  transition:border-color var(--t),box-shadow var(--t);
}
#typingInputBox:focus,#shInput:focus,.fmt-rich:focus{
  outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft);
}
.tt-passage-card{ padding:20px 22px; }
.tt-pc-title{ font-family:'IBM Plex Sans Condensed',sans-serif; font-weight:700; font-size:19px;
  color:var(--text); letter-spacing:-0.012em; }
.tt-pc-meta{ font-family:'IBM Plex Mono',monospace; font-size:11.5px; color:var(--text-3); }
.tt-pc-preview{ font-family:'IBM Plex Serif','IBM Plex Sans',Georgia,serif; font-size:15px;
  line-height:1.75; color:var(--text-2); }
/* .exam-btn is used BOTH for the exam-picker cards on the paper dashboard AND for the
   controls in the dark exam topbar. Giving all of them a white card fill made the
   topbar's Submit/Pause/Exit white-on-white — present in the DOM, invisible on screen.
   The card treatment is therefore scoped to the picker. */
.tt-opt,.dash-view .exam-btn,.passage-pick-item,.chip{
  border-radius:var(--r-sm); border:1px solid var(--rule); background:#fff; color:var(--text);
  font-family:'IBM Plex Sans',sans-serif; transition:border-color var(--t),background var(--t),
  color var(--t),box-shadow var(--t);
}
.tt-opt:hover,.dash-view .exam-btn:hover,.passage-pick-item:hover,.chip:hover{
  border-color:var(--accent); background:var(--accent-soft);
}
.tt-opt.active,.dash-view .exam-btn.active,.chip.active,.passage-pick-item.active{
  border-color:var(--accent); background:var(--accent); color:#fff;
  box-shadow:0 2px 8px -3px rgba(14,124,102,.5);
}
.chip-locked{ opacity:.5; }

/* mistake marking — semantic, legible, never decorative */
.ok{ color:var(--text-2); }
.spell,.err-spelling{ background:rgba(163,34,25,.1); color:#7E1A13; border-radius:3px; padding:0 2px; }
.miss,.err-missing{ background:rgba(168,116,26,.14); color:#6E4A0E; border-radius:3px; padding:0 2px; }
.extra,.err-extra{ background:rgba(16,23,37,.08); color:var(--text-2); border-radius:3px;
  padding:0 2px; text-decoration:line-through; }
.err-chip{ font-family:'IBM Plex Mono',monospace; font-size:11.5px; border-radius:5px;
  border:1px solid var(--rule); background:var(--paper-2); color:var(--text-2); padding:5px 10px; }

/* ==========================================================================
   TABLES / PROGRESS / LEADERBOARD
   ========================================================================== */
table{ border-collapse:collapse; width:100%; }
th{ font-family:'IBM Plex Mono',monospace; font-size:10.5px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--text-3); font-weight:500; text-align:left;
  padding:10px 12px; border-bottom:1px solid var(--rule); }
td{ padding:11px 12px; border-bottom:1px solid var(--rule-soft); font-size:14px; color:var(--text-2); }
tbody tr{ transition:background var(--t); }
tbody tr:hover{ background:var(--paper-2); }
.lib-row,.quick-btn{ border:1px solid var(--rule); border-radius:var(--r); background:#fff;
  transition:border-color var(--t),transform var(--t),box-shadow var(--t); }
.lib-row:hover,.quick-btn:hover{ border-color:var(--accent); transform:translateY(-1px);
  box-shadow:var(--shadow); }

/* ==========================================================================
   FORMS / MODALS
   ========================================================================== */
input,select,textarea{ font-family:'IBM Plex Sans',sans-serif; }
.field input,.field select,#appShell input:not([type=checkbox]),#appShell select{
  border-radius:var(--r-sm); border:1px solid var(--rule); padding:11px 13px; font-size:14.5px;
  background:#fff; color:var(--text); transition:border-color var(--t),box-shadow var(--t);
}
.field input:focus,#appShell input:focus,#appShell select:focus{
  outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft);
}
.field label{ font-family:'IBM Plex Mono',monospace; font-size:10.5px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--text-3); }
.modal-box{ border-radius:var(--r-lg); box-shadow:var(--shadow-lg); }
.modal-title{ font-family:'IBM Plex Sans Condensed',sans-serif; font-weight:700; letter-spacing:-0.015em; }
.modal-tab{ border-radius:var(--r-sm) var(--r-sm) 0 0; font-weight:600; }
.modal-err{ border-radius:var(--r-sm); background:var(--fail-soft); color:#7E1A13;
  border:1px solid rgba(163,34,25,.22); font-size:13.5px; }

/* ==========================================================================
   BADGES / EYEBROWS / TAGS
   ========================================================================== */
.sec-eyebrow,.rdy-scope,.exam-pane-label{
  font-family:'IBM Plex Mono',monospace; font-size:10.5px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--accent);
}
.badge,.tag,.exam-badge,.news-tag,.fmt-tag{
  font-family:'IBM Plex Mono',monospace; font-size:10.5px; letter-spacing:.08em;
  border-radius:4px; border:1px solid var(--rule); background:var(--paper-2); color:var(--text-2);
  padding:4px 9px; text-transform:uppercase;
}
.trial-banner,.sync-badge{ border-radius:var(--r); }

/* ==========================================================================
   LOADING / EMPTY / ERROR — direction, not mood
   ========================================================================== */
.sc-skeleton{ position:relative; overflow:hidden; background:var(--paper-3); border-radius:var(--r-sm); }
.sc-skeleton::after{ content:''; position:absolute; inset:0; transform:translateX(-100%);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.7),transparent);
  animation:scShimmer 1.4s ease-in-out infinite; }
@keyframes scShimmer{ to{ transform:translateX(100%); } }
.sc-empty{ text-align:center; padding:44px 24px; border:1px dashed var(--rule);
  border-radius:var(--r-lg); background:var(--paper); }
.sc-empty h4{ font-family:'IBM Plex Sans Condensed',sans-serif; font-size:18px; font-weight:700;
  color:var(--text); margin-bottom:6px; }
.sc-empty p{ color:var(--text-2); font-size:14px; max-width:44ch; margin:0 auto 16px; }
.rdy-empty{ text-align:left; }

/* ==========================================================================
   MICRO-INTERACTIONS — transform/opacity only, short, never during typing
   ========================================================================== */
@keyframes scRise{ from{ opacity:0; transform:translateY(6px); } to{ opacity:1; transform:none; } }
.dash-view.active .dash-h1{ animation:scRise 260ms cubic-bezier(.2,.7,.3,1) both; }
.dash-view.active .dash-sub{ animation:scRise 260ms cubic-bezier(.2,.7,.3,1) 40ms both; }

/* the typing surface never animates — a repaint mid-keystroke is a real cost */
#typingInputBox,#shInput,.fmt-rich,.exam-passage,.exam-pane{ animation:none !important; }

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important;
    transition-duration:.001ms !important; scroll-behavior:auto !important; }
  .sc-skeleton::after{ display:none; }
}

/* ==========================================================================
   RESPONSIVE — Android-first: 44px targets, no overflow, calmer spacing
   ========================================================================== */
@media (max-width:760px){
  .dash-h1{ font-size:24px; }
  .dash-sub{ font-size:13.5px; }
  .dash-stat{ padding:15px 16px; }
  .dash-stat b,.stat b{ font-size:25px; }
  .dash-nav-item{ padding:13px 12px; font-size:15px; min-height:46px; }
  .btn{ padding:12px 18px; min-height:44px; }
  .btn-sm{ min-height:40px; }
  .rdy-hero,.rdy-reqs,.rdy-bars{ padding:18px 16px; }
  .rdy-req{ gap:8px; }
  .rdy-req .rq-label{ min-width:0; flex:1 1 auto; }
  .rdy-req .rq-have{ margin-left:0; width:100%; padding-left:31px; }
  .rdy-req .rq-need{ font-size:11.5px; }
  .rdy-title{ font-size:20px; }
  .tt-pc-title{ font-size:17px; }
  th,td{ padding:9px 8px; font-size:13px; }
  .dash-topbar{ padding-left:12px; padding-right:12px; }
}
@media (max-width:420px){
  .dash-h1{ font-size:22px; }
  .dash-stat b,.stat b{ font-size:23px; }
}

/* ---------- PASS 2: correcting for the real markup ---------- */

/* stat tiles use .ds-n / .ds-l, and the base rule centres them */
#appShell .dash-stat{ text-align:left; padding:17px 19px; box-shadow:0 1px 2px rgba(16,23,37,.04); }
#appShell .dash-stat .ds-n{
  font-family:'IBM Plex Mono',monospace; font-size:29px; font-weight:600; line-height:1.05;
  color:var(--text); letter-spacing:-0.025em; font-variant-numeric:tabular-nums lining-nums;
}
#appShell .dash-stat .ds-l{
  font-family:'IBM Plex Mono',monospace; font-size:10.5px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--text-3); margin-top:8px; line-height:1.4;
}

/* the reveal animation was leaving cards invisible on slower paints and it
   staggered every tile; keep one short rise, no per-child delays */
.dash-view.active .dash-stat,.dash-view.active .dash-card,
.dash-view.active .quick-btn,.dash-view.active .exam-btn{
  animation:scRise 220ms cubic-bezier(.2,.7,.3,1) both !important; animation-delay:0ms !important;
}

/* card icon tiles: one accent family instead of four unrelated gradients */
.dash-card .dc-icon,.ficon{
  background:var(--accent-soft) !important; color:var(--accent) !important;
  border:1px solid rgba(14,124,102,.22); border-radius:var(--r-sm);
  font-family:'IBM Plex Mono',monospace; font-weight:600;
  display:flex; align-items:center; justify-content:center;
}
.dash-card h3,.dash-card .dc-title{
  font-family:'IBM Plex Sans Condensed',sans-serif; font-weight:700; letter-spacing:-0.014em;
  color:var(--text);
}
.dash-card p,.dash-card .dc-sub{ color:var(--text-2); font-size:14px; line-height:1.6; }

/* quick-start rows */
.quick-btn{ padding:13px 15px; text-align:left; }
.quick-btn b,.quick-btn>div:first-child{ color:var(--text); font-weight:600; font-size:14px; }
.quick-btn span,.quick-btn small{ font-family:'IBM Plex Mono',monospace; font-size:11px;
  color:var(--text-3); letter-spacing:.02em; }

/* log out reads as a quiet exit, not an alarm */
.dash-logout{ background:transparent !important; border:1px solid var(--rule-ink) !important;
  color:var(--on-ink-2) !important; font-weight:500 !important; }
.dash-logout:hover{ background:rgba(242,244,248,.07) !important; color:#fff !important; }

/* leaderboard + library + news cards inherit the paper language */
.lb-row,.news-card,.lib-card{ border-radius:var(--r-lg); }
.news-card h4,.lib-card h4{ font-family:'IBM Plex Sans Condensed',sans-serif; font-weight:700;
  color:var(--text); letter-spacing:-0.012em; }
.news-body,.lib-card p{ color:var(--text-2); }

/* section headings on dark (landing) keep the rule marker but in accent-on-ink */
body>.wrap .sec-eyebrow{ color:#3FD9B4; }
h1,h2{ color:inherit; }

/* ---------- PASS 3 ---------- */

/* inline icons inside buttons/tabs */
svg.ti{ width:16px; height:16px; flex:none; stroke:currentColor; fill:none; stroke-width:1.6;
  stroke-linecap:round; stroke-linejoin:round; margin-right:7px; vertical-align:-3px; }

/* form labels in the dashboard read as instrument labels */
#appShell label{ font-family:'IBM Plex Mono',monospace; font-size:10.5px; letter-spacing:.12em;
  text-transform:uppercase; color:var(--text-3); display:block; margin-bottom:8px; }

/* native select needs to match the inputs */
#appShell select{
  -webkit-appearance:none; appearance:none; background-color:#fff; padding-right:38px;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235D6678' stroke-width='2' stroke-linecap='round'><path d='M6 9l6 6 6-6'/></svg>");
  background-repeat:no-repeat; background-position:right 12px center; background-size:16px;
  border-radius:var(--r-sm); border:1px solid var(--rule); font-size:14.5px; color:var(--text);
  min-height:44px;
}

/* requirement row: keep the reading next to what it is being judged against,
   not flung to the far edge of a 1100px card */
.rdy-req{ display:flex; align-items:center; }
.rdy-req .rq-have{ margin-left:10px; }
.rdy-req::after{ content:''; flex:1 1 auto; }

/* the dial */
.rdy-dial circle{ transition:stroke-dasharray .6s cubic-bezier(.2,.7,.3,1); }

/* ---------- INSTRUMENT: typing + exam mode ---------- */
.exam-pane-top,.exam-pane-bottom{ border-radius:var(--r-lg); }
.exam-pane-label{ color:var(--accent); }
.exam-split{ gap:16px; }
.exam-hint,.exam-paste-warn{ font-family:'IBM Plex Mono',monospace; font-size:11.5px; }
.exam-timers .exam-timer{ font-size:clamp(20px,2.4vw,26px); }
.exam-countdown{ font-family:'IBM Plex Mono',monospace; font-variant-numeric:tabular-nums; }

/* live stat strip during a test — readouts, evenly weighted, no jitter */
.passage-meta-bar,.tt-opts{ gap:10px; }
.passage-meta-bar span,.sh-custom-meta{ font-family:'IBM Plex Mono',monospace; font-size:11.5px;
  color:var(--text-3); letter-spacing:.02em; }

/* formatting toolbar */
.fmt-bar{ background:var(--paper-2); border:1px solid var(--rule); border-radius:var(--r) var(--r) 0 0; }
.fmt-btn{ border-radius:var(--r-sm); border:1px solid transparent; background:transparent;
  color:var(--text-2); min-width:34px; min-height:34px; transition:background var(--t),color var(--t); }
.fmt-btn:hover{ background:#fff; color:var(--text); border-color:var(--rule); }
.fmt-btn.active{ background:var(--accent); color:#fff; }
.fmt-hint{ color:var(--text-3); font-size:12px; }

/* result screen */
.cheer-box{ border-radius:var(--r-lg); box-shadow:var(--shadow-lg); }
.cheer-kicker{ font-family:'IBM Plex Mono',monospace; font-size:10.5px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--accent); }
.cheer-title{ font-family:'IBM Plex Sans Condensed',sans-serif; font-weight:700;
  letter-spacing:-0.018em; color:var(--text); }
.cheer-stat b{ font-family:'IBM Plex Mono',monospace; font-weight:600; color:var(--text); }
.cheer-stat span{ font-family:'IBM Plex Mono',monospace; font-size:10px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--text-3); }
.cheer-tip,.cheer-msg{ color:var(--text-2); }

/* key heatmap */
.key-cap{ border-radius:var(--r-sm); border:1px solid var(--rule); background:#fff;
  font-family:'IBM Plex Mono',monospace; color:var(--text-2); }

/* ---------- LANDING (ink surface) ---------- */
/* Scoped to the site header. `header` also matches <header class="ptier__head">
   inside the pricing cards, which was inheriting an 82% ink panel and rendering
   the tier name as ink-on-ink. */
body > header,#publicSite > header{ background:rgba(16,23,37,.82); border-bottom:1px solid var(--rule-ink); }
.ptier__head,.card header,.fcard header{ background:transparent; border-bottom:none; }
h1{ font-family:'IBM Plex Sans Condensed',sans-serif; font-weight:700;
  font-size:clamp(36px,5.2vw,60px); line-height:1.04; letter-spacing:-0.03em; }
.sec-head h2{ font-family:'IBM Plex Sans Condensed',sans-serif; font-weight:700;
  letter-spacing:-0.022em; }
/* Scoped to the ink surfaces only. Unscoped, this painted near-white text onto the
   light sections — the paragraph under every section heading was rendering at about
   1.1:1 against a pale background, which read as a large blank gap rather than as
   missing text. */
.hero p,.hero .lede{ color:var(--on-ink-2); }
body>.wrap .sec-head p,.feature p{ color:var(--on-ink-2); }
.light-section .sec-head p,.light-section .feature p,.light-section p{ color:var(--text-2); }
.light-section .sec-head h2,.light-section h2,.light-section h3{ color:var(--text); }
.light-section .sec-eyebrow{ color:var(--accent); }
/* Warm paper, not lavender: the section background was still on the retired palette. */
.light-section{ background:var(--paper) !important; }
.steno-text{ font-family:'IBM Plex Mono',monospace; color:#DCE2EC; }
.steno-speed{ color:var(--brass); }
.live-badge{ color:#3FD9B4; }
.feature{ background:rgba(255,255,255,.035); border:1px solid var(--rule-ink);
  border-radius:var(--r-lg); transition:border-color var(--t),transform var(--t); }
.feature:hover{ border-color:rgba(63,217,180,.45); transform:translateY(-2px); }
.feature h3{ font-family:'IBM Plex Sans Condensed',sans-serif; font-weight:700; }
.marquee-track span{ font-family:'IBM Plex Mono',monospace; color:var(--on-ink-3); }
.price,.price-row{ font-family:'IBM Plex Mono',monospace; font-variant-numeric:tabular-nums; }
.badge{ color:#3FD9B4; border-color:var(--rule-ink); background:rgba(255,255,255,.05);
  border-radius:100px; }

/* logo wordmark ties to the brass accent rather than a stray orange */
.logo span,.dash-logo span{ color:var(--brass); }

/* landing tags/chips on ink */
body>.wrap .tag,body>.wrap .chip{ background:rgba(255,255,255,.05); color:var(--on-ink-2);
  border-color:var(--rule-ink); }
body>.wrap .chip:hover{ border-color:#3FD9B4; background:rgba(63,217,180,.1); color:#fff; }
body>.wrap .chip.active{ background:var(--accent); border-color:var(--accent); color:#fff; }

/* ---------- PASS 4: mobile navigation + search icon ---------- */
.dash-burger{
  display:none; width:42px; height:42px; flex:none; align-items:center; justify-content:center;
  background:#fff; border:1px solid var(--rule); border-radius:var(--r-sm); color:var(--text);
  cursor:pointer; transition:background var(--t),border-color var(--t);
}
.dash-burger svg{ width:20px; height:20px; stroke:currentColor; fill:none; stroke-width:1.8;
  stroke-linecap:round; }
.dash-burger:hover{ background:var(--paper-2); border-color:rgba(16,23,37,.28); }
.dash-scrim{
  position:fixed; inset:0; z-index:3; background:rgba(16,23,37,.5);
  backdrop-filter:blur(2px); animation:scFade 160ms ease both;
}
@keyframes scFade{ from{ opacity:0; } to{ opacity:1; } }
.dash-scrim[hidden]{ display:none; }
.ds-mag{ width:17px; height:17px; flex:none; stroke:var(--text-3); fill:none; stroke-width:1.7;
  stroke-linecap:round; }
@media (max-width:900px){
  .dash-burger{ display:inline-flex; }
  .dash-sidebar{ z-index:4; box-shadow:14px 0 40px rgba(16,23,37,.32); }
  .dash-topbar{ gap:10px; }
}
@media (min-width:901px){ .dash-scrim{ display:none !important; } }

/* ---------- PASS 5: exam picker, language gate, contrast repairs ---------- */

/* Twelve exams were rendering in twelve unrelated pastel tints, which read as
   decoration rather than information. One surface for all of them; the accent is
   reserved for the one that is actually selected. */
.dash-view .exam-btn{
  background:#fff !important; border:1px solid var(--rule) !important; border-radius:var(--r-lg) !important;
  box-shadow:0 1px 2px rgba(16,23,37,.04) !important; padding:15px 16px !important;
  transition:transform var(--t),border-color var(--t),box-shadow var(--t) !important;
}
.dash-view .exam-btn::after{ display:none !important; }
.dash-view .exam-btn::before{ background:var(--accent) !important; width:2.5px !important;
  border-radius:0 2px 2px 0; }
.dash-view .exam-btn:hover{ transform:translateY(-2px) !important; border-color:rgba(16,23,37,.26) !important;
  box-shadow:var(--shadow) !important; }
.dash-view .exam-btn.active{
  background:var(--accent) !important; border-color:var(--accent-2) !important;
  box-shadow:0 2px 10px -3px rgba(14,124,102,.55) !important;
}
.dash-view .exam-btn .eb-name{ font-family:'IBM Plex Sans Condensed',sans-serif; font-weight:700;
  font-size:15px; color:var(--text); letter-spacing:-0.01em; }
.dash-view .exam-btn .eb-spec{ font-family:'IBM Plex Mono',monospace; font-size:11px; color:var(--text-3);
  margin-top:5px; letter-spacing:.01em; }
.dash-view .exam-btn .eb-fmt{ background:var(--brass-soft); color:var(--brass); border:1px solid rgba(168,116,26,.3);
  border-radius:4px; padding:2px 7px; font-size:9.5px; letter-spacing:.09em; }
/* the selected card is dark: every child has to invert with it */
.dash-view .exam-btn.active .eb-name{ color:#fff; }
.dash-view .exam-btn.active .eb-spec{ color:rgba(255,255,255,.82); }
.dash-view .exam-btn.active .eb-fmt{ background:rgba(255,255,255,.18); color:#fff; border-color:rgba(255,255,255,.34); }

/* Devanagari gets the matched Plex face rather than a mismatched fallback */
[lang="hi"],.hi,.lang-gate:nth-of-type(2),.key-cap.dev,#hiInput,.hi-text{
  font-family:'IBM Plex Sans Devanagari','IBM Plex Sans',sans-serif;
}

/* small inline toggles were 14px tall — under any reasonable thumb target */
.toggle-link,a.toggle-link{ display:inline-flex; align-items:center; min-height:36px;
  padding:6px 2px; color:var(--accent); font-weight:600; }
@media (max-width:760px){ .toggle-link,a.toggle-link{ min-height:44px; } }

/* dark-on-dark repairs anywhere a surface inverts */
.btn-primary,.btn-primary *{ color:#fff; }
.lock-overlay{ background:rgba(251,250,246,.72); backdrop-filter:blur(3px); border-radius:var(--r-lg); }
.lock-icon{ color:var(--text-2); }

/* ---------- PASS 6: language cards, exam spec figures, score cards ---------- */

/* .lang-gate is the grid; the cards are .lang-card.en / .lang-card.hi */
.lang-card{ border-radius:var(--r-lg) !important; border:1px solid var(--rule) !important;
  padding:24px 22px !important; box-shadow:0 1px 2px rgba(16,23,37,.04) !important;
  transition:transform var(--t),border-color var(--t),box-shadow var(--t) !important; }
.lang-card.en,.lang-card.hi{ background:#fff !important; border-color:var(--rule) !important; }
.lang-card:hover{ transform:translateY(-2px) !important; border-color:var(--accent) !important;
  box-shadow:var(--shadow) !important; }
.lang-card.on{ border-color:var(--accent) !important;
  box-shadow:0 0 0 3px var(--accent-soft), var(--shadow) !important; }
.lang-flag{ font-size:0 !important; width:38px; height:38px; margin-bottom:14px;
  border-radius:var(--r-sm); background:var(--accent-soft); border:1px solid rgba(14,124,102,.22);
  display:flex; align-items:center; justify-content:center; }
.lang-flag::after{ font-family:'IBM Plex Mono',monospace; font-size:13px; font-weight:600;
  color:var(--accent); letter-spacing:.03em; }
.lang-card.en .lang-flag::after{ content:'EN'; }
.lang-card.hi .lang-flag::after{ content:'हि'; font-family:'IBM Plex Sans Devanagari',sans-serif; }
.lang-title,.lang-card.en .lang-title,.lang-card.hi .lang-title{
  font-family:'IBM Plex Sans Condensed',sans-serif; font-weight:700; font-size:23px;
  letter-spacing:-0.018em; color:var(--text) !important; }
.lang-card.hi .lang-title{ font-family:'IBM Plex Sans Devanagari',sans-serif; font-size:21px; }
.lang-sub{ color:var(--text-2) !important; font-size:14px; }
.lang-card.hi .lang-sub,.lang-card.hi .lang-pill,.lang-card.hi .lang-go{
  font-family:'IBM Plex Sans Devanagari','IBM Plex Sans',sans-serif; }
.lang-pill{ background:var(--paper-2) !important; border:1px solid var(--rule) !important;
  border-radius:4px !important; color:var(--text-2) !important; font-weight:500 !important; }
.lang-go,.lang-card.en .lang-go,.lang-card.hi .lang-go{
  color:var(--accent) !important; font-weight:600 !important; font-size:14px !important; }

/* the exam figure was tinted per family; it is data, so it reads as data */
.dash-view .exam-btn .eb-spec b{ color:var(--text) !important; font-weight:600 !important; }
.dash-view .exam-btn.active .eb-spec b{ color:#fff !important; }

/* score cards carry inline colours from the original markup */
.score-card .num{ color:var(--text) !important; font-family:'IBM Plex Mono',monospace;
  font-weight:600; font-variant-numeric:tabular-nums lining-nums; }
.score-card{ background:#fff; border:1px solid var(--rule); border-radius:var(--r); padding:14px 16px; }
.score-card .lbl{ font-family:'IBM Plex Mono',monospace; font-size:10px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--text-3); margin-top:6px; }
.err-chip .n{ font-family:'IBM Plex Mono',monospace; font-weight:600; font-size:19px;
  font-variant-numeric:tabular-nums; }
.err-chip .l{ font-family:'IBM Plex Mono',monospace; font-size:9.5px; letter-spacing:.09em;
  text-transform:uppercase; margin-top:4px; }

/* ---------- PASS 7: neutralise the per-exam tone palette ---------- */
/* Twelve exams were assigned .tone-0..n, colouring the name and the figure
   differently per family. Exam identity is carried by the name itself; colour
   here competes with the accent that marks the actual selection. */
.dash-view .exam-btn[class*="tone-"] .eb-name{ color:var(--text) !important; }
.dash-view .exam-btn[class*="tone-"] .eb-spec b{ color:var(--text) !important; }
.dash-view .exam-btn[class*="tone-"]{ background:#fff !important; border-color:var(--rule) !important; }
.dash-view .exam-btn[class*="tone-"]::before{ background:var(--accent) !important; }
.dash-view .exam-btn.active[class*="tone-"]{ background:var(--accent) !important;
  border-color:var(--accent-2) !important; }
.dash-view .exam-btn.active[class*="tone-"] .eb-name{ color:#fff !important; }
.dash-view .exam-btn.active[class*="tone-"] .eb-spec,
.dash-view .exam-btn.active[class*="tone-"] .eb-spec b{ color:rgba(255,255,255,.88) !important; }

/* ---------- PASS 8: final alignment + polish ---------- */
.dash-nav-item{ justify-content:flex-start !important; text-align:left !important; width:100%; }
.dash-sidebar-foot .dash-logout{ text-align:center; justify-content:center; }
/* keep the ink rail's own scrollbar unobtrusive */
.dash-sidebar::-webkit-scrollbar{ width:6px; }
.dash-sidebar::-webkit-scrollbar-thumb{ background:rgba(242,244,248,.16); border-radius:3px; }
.dash-scroll::-webkit-scrollbar{ width:10px; }
.dash-scroll::-webkit-scrollbar-thumb{ background:rgba(16,23,37,.16); border-radius:5px; }
.dash-scroll::-webkit-scrollbar-track{ background:transparent; }


/* ==========================================================================
   LANDING: HERO · PRICING · FAQ   (spec: stenocore-homepage-pricing.md)
   ========================================================================== */

/* ---------- HERO ---------- */
.hero{
  position:relative;
  background:radial-gradient(120% 90% at 50% 0%, #1B2436 0%, #101725 62%);
  padding:96px 0 88px; overflow:hidden;
}
.hero::before{
  content:''; position:absolute; inset:0; pointer-events:none; z-index:0;
  background:repeating-linear-gradient(to bottom, transparent 0 31px, rgba(242,244,248,.045) 31px 32px);
  -webkit-mask-image:linear-gradient(to bottom, black, transparent 92%);
  mask-image:linear-gradient(to bottom, black, transparent 92%);
}
.hero .shorthand-bg{ opacity:.28; }
.hero>.wrap{
  position:relative; z-index:1;
  display:grid;
  grid-template-columns:1.02fr .98fr;
  grid-template-areas:"copy demo" "badges badges";
  gap:52px 56px; align-items:center;
}
/* Named areas, not column indices: the trust bar sits in the DOM between the copy
   and the demo, and index-based placement pushed the demo into a second row with a
   dead half-screen beside it. */
.hero__copy{ grid-area:copy; }
.hero__demo{ grid-area:demo; }
.tbadges{ grid-area:badges; }
.hero__eyebrow{ color:var(--accent-3,#3FD9B4); margin-bottom:20px; }
.hero__title{
  font-family:'IBM Plex Sans Condensed','IBM Plex Sans',sans-serif; font-weight:700;
  font-size:clamp(34px,5.2vw,60px); line-height:1.04; letter-spacing:-.03em;
  color:#FFFFFF; margin:0;
}
.hero__sub{ font-size:17px; line-height:1.6; color:var(--on-ink-2);
            margin:20px 0 32px; max-width:46ch; }
.hero__ctas{ display:flex; gap:12px; flex-wrap:wrap; }

.tbadges{
  list-style:none; margin:44px 0 0; padding:26px 0 0;
  border-top:1px solid var(--rule-ink);
  display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:24px;
}
.tbadge{ display:flex; flex-direction:column; gap:6px; }
.tbadge svg{ width:22px; height:22px; margin-bottom:6px; fill:none;
  stroke:var(--accent-3,#3FD9B4); stroke-width:1.55; stroke-linecap:round; stroke-linejoin:round; }
.tbadge b{ font-size:14px; font-weight:600; color:#FFFFFF; line-height:1.35; }
.tbadge span{ font-family:'IBM Plex Mono',monospace; font-size:11px; line-height:1.55;
              color:var(--on-ink-3); }

.hero__demo{
  background:rgba(255,255,255,.045); border:1px solid var(--rule-ink);
  border-radius:14px; padding:20px 22px 18px;
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
}
.demo__bar{ display:flex; align-items:center; gap:10px;
            padding-bottom:14px; border-bottom:1px solid var(--rule-ink); }
.demo__dot{ width:7px; height:7px; border-radius:50%; background:var(--accent-3,#3FD9B4);
            animation:sc-pulse 1.9s ease-in-out infinite; }
.demo__label{ font-family:'IBM Plex Mono',monospace; font-size:11px; letter-spacing:.09em;
              text-transform:uppercase; color:var(--on-ink-2); }
.demo__speed{ margin-left:auto; font-family:'IBM Plex Mono',monospace; font-size:12px;
              font-weight:600; color:#D9A94A; }
.demo__text{
  font-family:'IBM Plex Serif',Georgia,serif; font-size:15px; line-height:1.9;
  color:#DCE2EC; min-height:170px; margin:16px 0 0; max-width:none;
}
.demo__text::after{ content:'\258D'; color:var(--accent-3,#3FD9B4);
                    animation:sc-caret 1s step-end infinite; }
.demo__foot{ display:flex; gap:28px; border-top:1px solid var(--rule-ink);
             margin-top:16px; padding-top:14px; }
.demo__foot b{ display:block; font-family:'IBM Plex Mono',monospace; font-size:18px;
               font-weight:600; color:#FFFFFF; font-variant-numeric:tabular-nums; }
.demo__foot span{ display:block; font-family:'IBM Plex Mono',monospace; font-size:9.5px;
                  letter-spacing:.1em; text-transform:uppercase; color:var(--on-ink-3); margin-top:4px; }
@keyframes sc-pulse{ 0%,100%{opacity:1;} 50%{opacity:.35;} }
@keyframes sc-caret{ 0%,100%{opacity:1;} 50%{opacity:0;} }

/* hero load sequence — 3 beats, 620ms */
.hero__eyebrow{ animation:scRise 380ms cubic-bezier(.2,.7,.3,1) 40ms both; }
.hero__title  { animation:scRise 460ms cubic-bezier(.2,.7,.3,1) 90ms both; }
.hero__sub    { animation:scRise 460ms cubic-bezier(.2,.7,.3,1) 170ms both; }
.hero__ctas   { animation:scRise 420ms cubic-bezier(.2,.7,.3,1) 240ms both; }
.hero__demo   { animation:scRise 520ms cubic-bezier(.2,.7,.3,1) 200ms both; }
.tbadges      { animation:scRise 420ms cubic-bezier(.2,.7,.3,1) 310ms both; }

@media (max-width:980px){
  .hero{ padding:56px 0 48px; }
  .hero>.wrap{ grid-template-columns:1fr; grid-template-areas:"copy" "demo" "badges"; gap:26px; }
  .tbadges{ grid-template-columns:repeat(2,1fr); gap:20px; }
  .demo__text{ min-height:120px; font-size:14px; }
}
@media (max-width:560px){
  .hero{ padding:52px 0 44px; }
  .hero__ctas{ flex-direction:column; }
  .hero__ctas .btn{ width:100%; }
  .tbadges{ grid-template-columns:1fr; gap:16px; }
}

/* ---------- PRICING ---------- */
.pricing__head{ text-align:center; margin-bottom:44px; }
.pricing__head .label{ margin-bottom:10px; }
.pricing__head h2{ margin:0; }
.pricing__sub{ color:var(--text-2); font-size:17px; margin:12px auto 0; max-width:54ch; }

.pricing__grid{
  display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);
  gap:20px; align-items:start; max-width:940px; margin:0 auto;
}
.ptier{
  position:relative; display:flex; flex-direction:column;
  background:#FFFFFF; border:1px solid var(--rule); border-radius:14px;
  padding:28px 26px 26px; box-shadow:0 1px 2px rgba(16,23,37,.04);
  transition:border-color 150ms cubic-bezier(.2,.7,.3,1),
             box-shadow 150ms cubic-bezier(.2,.7,.3,1),
             transform 150ms cubic-bezier(.2,.7,.3,1);
}
.ptier:hover{ border-color:rgba(16,23,37,.24); transform:translateY(-3px);
  box-shadow:0 1px 2px rgba(16,23,37,.05), 0 8px 24px -12px rgba(16,23,37,.18); }

/* The paid tier is the only dark card on the page — it wins attention with no decoration. */
.ptier--featured{
  background:var(--ink); border-color:var(--ink-3); padding-top:34px;
  box-shadow:0 2px 4px rgba(16,23,37,.06), 0 24px 48px -20px rgba(16,23,37,.28);
}
.ptier--featured:hover{ transform:translateY(-4px); }
.ptier--featured .ptier__name{ color:var(--on-ink); }
.ptier--featured .ptier__desc{ color:var(--on-ink-2); }
.ptier--featured .ptier__amt{ color:#FFFFFF; }
.ptier--featured .ptier__per{ color:var(--on-ink-3); }
.ptier--featured .ptier__list li{ color:var(--on-ink-2); border-color:var(--rule-ink); }
.ptier--featured .ptier__list li.yes::before{ background:var(--accent-3,#3FD9B4); color:var(--ink); }
.ptier--featured .ptier__list em{ color:#FFFFFF; font-style:normal; font-weight:600; }
.ptier--featured .ptier__note,.ptier--featured .ptier__pay{ color:var(--on-ink-3); }

.ptier__badge{
  position:absolute; top:-11px; left:26px;
  font-family:'IBM Plex Mono',monospace; font-size:10px; font-weight:600;
  letter-spacing:.12em; text-transform:uppercase;
  background:var(--brass); color:#FFFFFF; border-radius:4px; padding:5px 10px;
  box-shadow:0 2px 8px -2px rgba(138,95,21,.55);
}
.ptier__name{ font-family:'IBM Plex Sans Condensed',sans-serif; font-size:21px;
              font-weight:700; letter-spacing:-.016em; color:var(--text); margin:0; }
.ptier__desc{ color:var(--text-2); font-size:13.5px; margin:6px 0 0; line-height:1.55; }
.ptier__price{ margin:22px 0 0; display:flex; align-items:baseline; gap:9px; flex-wrap:wrap; }
.ptier__amt{ font-family:'IBM Plex Mono',monospace; font-size:38px; font-weight:600;
             letter-spacing:-.03em; color:var(--text); font-variant-numeric:tabular-nums; }
.ptier__per{ font-family:'IBM Plex Mono',monospace; font-size:11.5px; color:var(--text-3); }
.ptier__list{ list-style:none; margin:22px 0 24px; padding:0; flex:1; }
.ptier__list li{ position:relative; padding:10px 0 10px 28px; font-size:14px;
                 line-height:1.55; color:var(--text-2); border-top:1px solid var(--rule-soft); }
.ptier__list li:first-child{ border-top:none; }
.ptier__list li::before{ position:absolute; left:0; top:11px; width:18px; height:18px;
  border-radius:50%; display:grid; place-items:center; font-size:10px; font-weight:700; line-height:1; }
.ptier__list li.yes::before{ content:'\2713'; background:var(--pass-soft); color:var(--pass); }
.ptier__list li.no::before{ content:'\2212'; background:var(--paper-2); color:var(--text-3); }
.ptier__list li.no{ color:var(--text-3); }
.ptier__pay{ display:flex; align-items:center; gap:8px; justify-content:center;
  margin-top:14px; font-family:'IBM Plex Mono',monospace; font-size:11px;
  color:var(--text-3); text-align:center; line-height:1.4; }
.pay-lock svg{ width:14px; height:14px; fill:none; stroke:currentColor;
               stroke-width:1.7; stroke-linecap:round; display:block; }
.ptier__note{ font-family:'IBM Plex Mono',monospace; font-size:11px; color:var(--text-3);
              text-align:center; margin:10px 0 0; }
.btn--block{ display:flex; width:100%; justify-content:center; }
.btn--lg{ padding:14px 26px; min-height:50px; font-size:15px; border-radius:var(--r); }

@media (max-width:860px){
  .pricing__grid{ grid-template-columns:1fr; max-width:480px; }
  .ptier--featured{ order:-1; }    /* the real product leads on mobile */
}

/* ---------- FAQ (native details/summary: keyboard + a11y for free) ---------- */
.faq__head{ text-align:center; margin-bottom:36px; }
.faq__head h2{ margin:8px 0 0; }
.faq__item{
  background:#FFFFFF; border:1px solid var(--rule); border-radius:10px;
  margin-bottom:10px; overflow:hidden;
  transition:border-color 150ms cubic-bezier(.2,.7,.3,1), box-shadow 150ms cubic-bezier(.2,.7,.3,1);
}
.faq__item:hover{ border-color:rgba(16,23,37,.24); }
.faq__item[open]{ border-color:var(--accent);
  box-shadow:0 1px 2px rgba(16,23,37,.05), 0 8px 24px -14px rgba(16,23,37,.2); }
.faq__item summary{
  position:relative; list-style:none; cursor:pointer;
  padding:16px 48px 16px 18px; font-size:15px; font-weight:600;
  color:var(--text); line-height:1.5;
}
.faq__item summary::-webkit-details-marker{ display:none; }
.faq__item summary:focus-visible{ outline:2px solid var(--accent); outline-offset:-2px; border-radius:10px; }
.faq__item summary::after{
  content:''; position:absolute; right:18px; top:50%;
  width:9px; height:9px; margin-top:-6px;
  border-right:2px solid var(--text-3); border-bottom:2px solid var(--text-3);
  transform:rotate(45deg);
  transition:transform 180ms cubic-bezier(.2,.7,.3,1), border-color 150ms;
}
.faq__item[open] summary::after{ transform:rotate(-135deg); margin-top:-2px; border-color:var(--accent); }
.faq__body{ padding:0 18px 18px; }
.faq__body p{ margin:0; font-size:14.5px; line-height:1.68; color:var(--text-2); max-width:none; }
.faq__item[open] .faq__body{ animation:faqOpen 220ms cubic-bezier(.2,.7,.3,1) both; }
@keyframes faqOpen{ from{opacity:0; transform:translateY(-4px);} to{opacity:1; transform:none;} }
@media (max-width:560px){
  .faq__item summary{ font-size:14.5px; padding:14px 42px 14px 15px; }
  .faq__body{ padding:0 15px 15px; }
}

/* ==========================================================================
   PRACTICE SURFACE  (spec: stenocore-practice-interface.md)
   ========================================================================== */

/* Measure cap. Full-width lines run ~180 characters on a 1440px screen, well past
   where the eye loses its place on the return sweep — and a skipped line is
   catastrophic under −0.4 per word. Single highest-value readability fix here. */
.exam-passage{ max-width:68ch; margin-left:auto; margin-right:auto;
               font-size:17px; line-height:1.85; }
#typingInputBox,.fmt-rich{ max-width:68ch; margin-left:auto; margin-right:auto;
                           font-size:15.5px; line-height:1.95; }

/* Pane labels: SVG, not emoji — emoji render differently on every Android skin. */
.exam-pane-label{ display:flex; align-items:center; gap:7px; }
.exam-pane-label svg{ width:14px; height:14px; fill:none; stroke:currentColor;
                      stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }

/* Timer: colour shift only. A flashing clock beside a text field costs frames on
   the input and adds panic without adding information. */
.exam-timer.big.danger{ animation:none !important; }

/* Mode gate — exam mode shows the candidate nothing, exactly like the hall. */
.exam-pane-wrap[data-mode="exam"] .p-stats{ display:none; }

@media (max-width:760px){
  .exam-passage{ font-size:15.5px; line-height:1.75; }
  #typingInputBox,.fmt-rich{ font-size:16px; line-height:1.85; }  /* 16px stops iOS zoom */
}

/* ==========================================================================
   MICRO-INTERACTIONS
   ========================================================================== */
.spinner{ width:18px; height:18px; border-radius:50%;
  border:2px solid var(--rule); border-top-color:var(--accent);
  animation:scSpin 620ms linear infinite; display:inline-block; }
.spinner--lg{ width:30px; height:30px; border-width:2.5px; }
@keyframes scSpin{ to{ transform:rotate(360deg); } }

.btn[data-loading]{ color:transparent !important; pointer-events:none; position:relative; }
.btn[data-loading]::after{
  content:''; position:absolute; top:50%; left:50%; width:15px; height:15px;
  margin:-7.5px 0 0 -7.5px; border:2px solid currentColor; border-top-color:transparent;
  border-radius:50%; color:#fff; opacity:.9; animation:scSpin 620ms linear infinite;
}
.btn.is-done{ background:#146B4E !important; border-color:#0E5138 !important; }

.toast{
  position:fixed; left:50%; bottom:24px; z-index:2000;
  display:flex; align-items:center; gap:10px;
  max-width:calc(100vw - 32px); padding:12px 16px;
  background:var(--surface,#fff); border:1px solid var(--rule); border-radius:10px;
  box-shadow:0 4px 12px rgba(16,23,37,.12), 0 28px 56px -22px rgba(16,23,37,.4);
  font-size:14px; color:var(--text); transform:translateX(-50%);
  animation:toastIn 260ms cubic-bezier(.2,.7,.3,1) both;
}
@keyframes toastIn{ from{opacity:0; transform:translateX(-50%) translateY(12px);}
                    to{opacity:1; transform:translateX(-50%) translateY(0);} }
.toast.is-out{ animation:toastOut 200ms cubic-bezier(.2,.7,.3,1) both; }
@keyframes toastOut{ to{ opacity:0; transform:translateX(-50%) translateY(8px); } }
.toast--success{ border-color:rgba(14,124,102,.3); background:#F2FAF7; color:#0A5F4E; }
.toast--error  { border-color:rgba(163,34,25,.28); background:#FDF4F3; color:#7E1A13; }
.toast--hold   { border-color:rgba(138,95,21,.3);  background:#FCF8F0; color:#6E4A0E; }

.progress{ height:4px; border-radius:2px; background:var(--paper-3); overflow:hidden; }
.progress__fill{ height:100%; background:var(--accent); border-radius:2px;
                 transition:width 400ms cubic-bezier(.2,.7,.3,1); }

/* THE OVERRIDING RULE: nothing in the typing path animates. A repaint mid-keystroke
   is a real cost to the person whose keystrokes are being measured. */
#typingInputBox,.fmt-rich,.exam-passage,.exam-pane{
  animation:none !important; transition:none !important;
}


/* ==========================================================================
   SIDEBAR GROUPS + NOISE SUPPRESSION  (final word on these components)
   ========================================================================== */
.dash-nav-group{
  font-family:'IBM Plex Mono',monospace; font-size:9.5px; letter-spacing:.16em;
  text-transform:uppercase; color:rgba(242,244,248,.42);
  margin:18px 0 6px; padding:0 12px; font-weight:500;
  align-self:stretch; text-align:left;   /* the nav is a flex column — stretch or it centres */
}
.dash-nav-group:first-child{ margin-top:0; }
.dash-nav{ display:flex; flex-direction:column; gap:1px; }

/* Floating keycaps and orbs were ambient decoration on a screen where the user is
   trying to read. Off. */
.dash-keys,.dash-orb,.blob,.blob1,.blob2,.blob3{ display:none !important; }
.logo-mark,.dash-logo .logo-mark{ animation:none !important; }

/* One press behaviour across the product. */
.btn:active,button:active{ transform:translateY(1px); }

@media (max-width:900px){
  .dash-nav-group{ font-size:10px; margin:18px 0 6px; }
}

/* ==========================================================================
   TABLES ON SMALL SCREENS
   Rank list and history are genuinely tabular — collapsing them to cards loses
   the comparison. Instead the table scrolls inside its own container, with the
   first column pinned so a row never loses its label.
   ========================================================================== */
@media (max-width:760px){
  .dash-view table{ min-width:520px; }
  .dash-view .tbl-wrap,
  .dash-view .lb-table,
  .dash-view .table-wrap{ overflow-x:auto; -webkit-overflow-scrolling:touch; }
  /* Any table not already inside a wrapper still gets a scrollable parent. */
  .dash-view table{ display:block; overflow-x:auto; white-space:nowrap; }
  .dash-view table thead,.dash-view table tbody{ display:table; width:100%; min-width:520px; }
  .dash-view th,.dash-view td{ white-space:nowrap; }
  .dash-view th:first-child,.dash-view td:first-child{
    position:sticky; left:0; z-index:1; background:#fff;
  }
  .dash-view thead th:first-child{ background:var(--paper-2); }
}

/* ---- Minimum legible label size. 10px mono uppercase is fine on a desktop
        monitor and too small on a 360px phone held at arm's length. ---- */
@media (max-width:430px){
  .sb-tag,.lr-kind,.eb-fmt,.pcard__level,.ptier__per,.ptier__note,
  .tbadge span,.dash-stat .ds-l,.rdy-scope{ font-size:11px !important; }
  .dash-nav-group{ font-size:10.5px; }
}

/* ==========================================================================
   FINAL QA CORRECTIONS
   ========================================================================== */

/* ---- Auth modal: fields, Google button, secondary links ---- */
.modal-box .field input,.modal-box input:not([type=checkbox]){
  width:100%; background:#FFFFFF; color:var(--text); font-family:'IBM Plex Sans',sans-serif;
  border:1px solid var(--rule); border-radius:6px; padding:11px 13px; font-size:15px;
}
.modal-box input::placeholder{ color:var(--text-3); opacity:1; }
.modal-box input:focus{ outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft); }
.modal-box .btn-primary{ background:var(--accent); border-color:var(--accent-2); color:#FFFFFF; }
/* Google button is a neutral control on a white modal, so it needs a real border */
#googleAuthBtn{
  background:#FFFFFF !important; color:var(--text) !important;
  border:1px solid var(--rule) !important; font-weight:600;
}
#googleAuthBtn:hover{ background:var(--paper-2) !important; border-color:rgba(16,23,37,.28) !important; }
#googleAuthBtn svg,#googleAuthBtn img{ width:18px; height:18px; flex:none; }
.modal-box a,.modal-box .link,.modal-box .muted-link{ color:var(--accent); font-weight:500; }
.modal-box a:hover{ text-decoration:underline; }
.modal-box .modal-err{ background:var(--fail-soft); color:#7E1A13; border:1px solid rgba(163,34,25,.22); }
.modal-box .or-sep,.modal-box .modal-hint,.modal-box small{ color:var(--text-3); }
.modal-box .modal-title{ padding-right:40px; }   /* clear of the close button */

/* ---- Admin Content Studio Phase 1 fix: this used to be
        `.admin-nav-btn{ display:none !important; }` with the ONLY way back in
        being a secret `/#adminNavBtn` URL fragment (see the :target rule that
        used to sit below this comment) — that is effectively "the Admin Login
        button disappeared": nothing in the UI told even the admin that
        fragment existed, and it broke the moment anyone landed on the page
        without it. The original concern behind that rule — a loud
        "🔐 Admin Panel" pill looking odd on a public marketing header — is
        addressed by the responsive .admin-nav-btn rule near the top of this
        file instead (full pill on desktop, compact icon on narrow screens),
        so no separate override is needed here any more. The footer
        "Admin Login" text link (#adminLoginLink) remains the unchanged,
        always-present secondary entry point. ---- */

/* ---- Mobile header: three fixed-width controls in one row ---- */
@media (max-width:430px){
  header .wrap{ padding-left:12px; padding-right:12px; }
  header nav{ gap:8px; }
  .logo{ font-size:17px; gap:7px; min-width:0; }
  .logo-mark{ width:30px; height:30px; flex:none; }
  .acct-area{ gap:6px; }
  .nav-ghost-btn,.nav-cta{ padding:8px 12px; font-size:13px; white-space:nowrap; }
}
@media (max-width:360px){
  .logo{ font-size:16px; }
  .nav-ghost-btn{ padding:8px 10px; }
}

/* ---- Landing rhythm on phones: the sections were spaced for a desktop column ---- */
@media (max-width:560px){
  .light-section{ padding-top:56px; padding-bottom:56px; }
  .sec-head{ margin-bottom:24px; }
  .sec-head h2{ font-size:24px; }
  .sec-head p{ font-size:14.5px; }
}

/* The fixed decorative grid overlay measured 2px wider than the layout viewport on a
   360px handset and was the only remaining source of horizontal scroll. It is purely
   ambient, so it is clamped rather than repositioned. */
.grid-overlay{ left:0; right:auto; width:100%; max-width:100vw; }

/* The passage-library preview grid sat 2px past a 360px viewport: two fixed-minimum
   columns plus the gap exceeded the available width. Single column below 400px. */
@media (max-width:400px){
  .lib-grid{ grid-template-columns:1fr !important; }
  .lib-card{ min-width:0; }
}
.lib-grid{ min-width:0; }
.lib-card{ min-width:0; max-width:100%; }

/* ---- Ink-band sections whose cards are paper ----
   #library sits on the ink band but its cards were given a white surface, so the
   headings inherited the on-ink white and rendered white-on-white. Card interiors
   are paper and take paper type. */
#library .lib-card,#library .lib-card *{ color:var(--text-2); }
#library .lib-card h3,#library .lib-card h4,#library .lib-card b{ color:var(--text); }
#library .lib-card .lc-meta,#library .lib-card small{ color:var(--text-3); }

/* Eyebrows and the wordmark need the lighter tones on dark surfaces. */
#library .sec-eyebrow,.hero .sec-eyebrow,header .sec-eyebrow{ color:var(--accent-3,#3FD9B4); }
#library .sec-head h2,.hero .sec-head h2{ color:#FFFFFF; }
#library .sec-head p{ color:var(--on-ink-2); }
.logo span,header .logo span{ color:#D9A94A; }   /* brass reads muddy on ink */

/* ==========================================================================
   HOMEPAGE COMPOSITION — deliberate rhythm
   Every section was the same warm paper, which produced the "stack of identical
   cards" read. The page now alternates three surfaces so each section is felt as a
   distinct beat, with hairline seams rather than shadows doing the separation.
   ========================================================================== */

/* 1 hero (ink) · 2 why-us (paper) · 3 library (ink band) · 4 sample (paper)
   5 how (paper-2 recessed) · 6 stats (ink band) · 7 what-you-get (paper)
   8 news (paper-2) · 9 pricing (paper) · 10 about (paper-2) · 11 faq (paper)
   12 cta (ink) */
#features,#sample,#whatyouget,#pricing,#faq{ background:var(--paper) !important; }
#how,#news,#about{ background:var(--paper-2) !important; }
#library,#testimonials{ background:var(--ink) !important; }

/* Hairline seams. One border per boundary — no doubling. */
#publicSite > section{ border-top:1px solid var(--rule); border-bottom:none; }
#library,#testimonials,.stats-band,.cta-band{ border-top:1px solid var(--ink-3); }
#features{ border-top:none; }

/* Vertical rhythm: sections breathe, headings sit closer to their own content
   than to the section above. */
.light-section,#library,#testimonials{ padding:96px 0; }
.sec-head{ margin-bottom:44px; max-width:64ch; }
.sec-head h2{ font-size:clamp(26px,2.6vw,38px); line-height:1.14; letter-spacing:-.022em; margin:10px 0 0; }
.sec-head p{ font-size:16px; line-height:1.62; margin-top:12px; }
.sec-eyebrow{ font-family:'IBM Plex Mono',monospace; font-size:10.5px; letter-spacing:.14em;
  text-transform:uppercase; }

/* Ink bands invert their type. */
#library .sec-head h2,#testimonials .sec-head h2,.stats-band h2,.cta-band h2{ color:#FFFFFF; }
#library .sec-head p,#testimonials .sec-head p,.cta-band p{ color:var(--on-ink-2); }
#library .sec-eyebrow,#testimonials .sec-eyebrow{ color:var(--accent-3,#3FD9B4); }

/* The marquee was a decorative ticker directly under the hero, competing with the
   first real section. Quietened to a seam. */
.marquee-wrap{ border-top:1px solid var(--ink-3); border-bottom:1px solid var(--ink-3);
  background:var(--ink); padding:14px 0; }
.marquee-track span{ font-size:11.5px; letter-spacing:.06em; color:var(--on-ink-3); }
.marquee-track b{ color:var(--accent-3,#3FD9B4); }

/* Final CTA band closes the page on ink, matching the hero it opened with. */
.cta-band{ background:var(--ink) !important; padding:80px 0; }
.cta-band h2{ font-size:clamp(24px,2.4vw,34px); letter-spacing:-.02em; }
.cta-band p{ margin:12px auto 26px; max-width:52ch; }

@media (max-width:760px){
  .light-section,#library,#testimonials{ padding:60px 0; }
  .cta-band{ padding:56px 0; }
  .sec-head{ margin-bottom:28px; }
  .sec-head h2{ font-size:24px; }
  .sec-head p{ font-size:15px; }
}

/* ==========================================================================
   SURFACE-CORRECT TYPE  —  the single rule that governs all of it
   Ink colours belong to ink surfaces and paper colours to paper surfaces. Every
   contrast failure in this build came from one of the two crossing over, so the
   mapping is stated once, explicitly, rather than patched per component.
   ========================================================================== */

/* --- PAPER SURFACES --- */
.light-section, .light-section .feature, .light-section .wyg-card,
.light-section .ptier:not(.ptier--featured), .light-section .faq__item{
  color:var(--text-2);
}
.light-section h1,.light-section h2,.light-section h3,.light-section h4,
.light-section .feature h3,.light-section .price h3,.light-section b,.light-section strong{
  color:var(--text);
}
.light-section p,.light-section li,.light-section td{ color:var(--text-2); }
.light-section small,.light-section .muted,.light-section .arrow,
.light-section .lbl,.light-section .per{ color:var(--text-3); }
.light-section .feature{ background:#fff; border:1px solid var(--rule); }
.light-section .feature p{ color:var(--text-2); }

/* --- INK SURFACES --- */
.hero,#library,#testimonials,.stats-band,.cta-band,.marquee-wrap,header,.dash-sidebar{ color:var(--on-ink); }
.hero h1,.hero h2,#library h2,#testimonials h2,.stats-band h2,.cta-band h2{ color:#FFFFFF; }
.hero p,#library .sec-head p,#testimonials .sec-head p,.cta-band p{ color:var(--on-ink-2); }
.marquee-track b{ color:var(--accent-3,#3FD9B4) !important; }

/* --- BUTTONS: the ghost variant takes its colour from the surface it sits on --- */
.btn-ghost,.btn--ghost{ color:var(--on-ink); border-color:var(--rule-ink); background:transparent; }
.light-section .btn-ghost,#appShell .btn-ghost,.modal-box .btn-ghost,
.ptier:not(.ptier--featured) .btn-ghost{
  color:var(--text) !important; border-color:var(--rule) !important; background:#FFFFFF !important;
}
.light-section .btn-ghost:hover,#appShell .btn-ghost:hover,
.ptier:not(.ptier--featured) .btn-ghost:hover{
  background:var(--paper-2) !important; border-color:rgba(16,23,37,.28) !important;
}
/* Header sign-up: had lost its fill and was dark-on-dark. */
.nav-cta{ background:var(--accent) !important; color:#FFFFFF !important;
  border:1px solid var(--accent-2) !important; font-weight:600; }
.nav-cta:hover{ background:var(--accent-2) !important; }
.nav-ghost-btn{ background:transparent; color:var(--on-ink) !important;
  border:1px solid var(--rule-ink) !important; font-weight:600; }
.nav-ghost-btn:hover{ background:rgba(242,244,248,.08); }

/* --- Legacy muted greys from the retired palette --- */
.arrow,.rb-na,.rdy-empty,.lbl,.muted{ color:var(--text-3) !important; }
#library .lib-card .arrow{ color:var(--accent) !important; }

/* Sample-marking legend: the "correct" green measured 4.02:1 on the demo's tinted
   panel. Moved onto the semantic tokens, which are AA on every paper tone. */
.right,.ok,.correct{ color:var(--pass) !important; }
.wrong,.err,.incorrect{ color:var(--fail) !important; }
.demo-line .right{ background:var(--pass-soft); border-radius:3px; padding:0 2px; }
.demo-line .wrong{ background:var(--fail-soft); border-radius:3px; padding:0 2px; }

/* The stats band sits on ink; its figures were inheriting the paper ink colour and
   rendering at 1:1 — the headline numbers were invisible. */
.stats-band{ background:var(--ink) !important; }
.stats-band b,.stats-band .num{ color:#FFFFFF !important; background:none !important;
  -webkit-text-fill-color:#FFFFFF !important;
  font-family:'IBM Plex Mono',monospace; font-variant-numeric:tabular-nums lining-nums;
  font-weight:600; letter-spacing:-.02em; }
.stats-band span,.stats-band .lbl{ color:var(--on-ink-3) !important;
  font-family:'IBM Plex Mono',monospace; font-size:10.5px; letter-spacing:.1em;
  text-transform:uppercase; }

/* News tags carried a white-on-white combination from the retired palette. */
.news-court,.news-tag,.news-src{ background:var(--paper-2) !important; color:var(--text-2) !important;
  border:1px solid var(--rule); border-radius:4px; padding:3px 8px;
  font-family:'IBM Plex Mono',monospace; font-size:10.5px; letter-spacing:.06em; }
.news-verify,.news-card span.muted{ color:var(--text-3) !important; }

/* Ink islands inside paper sections (the figures strip) must keep their own type
   colours: the blanket `.light-section b` rule was overriding them at equal
   specificity and painting ink figures onto an ink panel. */
.light-section .wyg-strip b,.light-section .wyg-strip .num{
  color:#FFFFFF !important; -webkit-text-fill-color:#FFFFFF !important; background:none !important;
}
.light-section .wyg-strip span,.light-section .wyg-strip .lbl{ color:var(--on-ink-3) !important; }
.light-section .wyg-strip{ color:var(--on-ink-2); }

/* Remaining legacy muted grey (#8C87A6) used for verification links. */
.news-verify,.news-card .verify,.light-section span.verify,
.light-section .news-card span:not([class]){ color:var(--text-3) !important; }

/* Footer column headings were the deep teal on ink (3.49:1). The lighter accent is
   the one intended for dark surfaces. */
footer h4,footer .foot-h,.cta-band .sec-eyebrow{ color:var(--accent-3,#3FD9B4) !important; }
footer{ background:var(--ink); color:var(--on-ink-2); border-top:1px solid var(--ink-3); }
footer a{ color:var(--on-ink-2); }
footer a:hover{ color:#FFFFFF; }

/* Pricing tiers state their own type explicitly so no ancestor can bleed into them. */
.ptier .ptier__name{ color:var(--text); }
.ptier .ptier__desc{ color:var(--text-2); }
.ptier--featured .ptier__name{ color:var(--on-ink) !important; }
.ptier--featured .ptier__desc{ color:var(--on-ink-2) !important; }

/* ==========================================================================
   DASHBOARD HOME — hierarchy
   Everything was a card of equal weight, so nothing answered "what do I do next?".
   Three levels: the recommended action leads, the metrics strip is a compact
   readout rather than four large tiles, and everything else is supporting.
   ========================================================================== */

/* LEVEL 1 — the welcome block and the one recommended action */
#view-home .dash-h1{ font-size:clamp(24px,2.4vw,32px); margin-bottom:6px; }
#view-home > .wrap > .dash-sub{ font-size:15px; margin-bottom:26px; }

/* LEVEL 2 — metrics as one banded strip, not four competing cards */
#view-home .dash-stats,#view-home .stats-row{
  display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:0;
  background:#fff; border:1px solid var(--rule); border-radius:14px;
  overflow:hidden; margin-bottom:26px; box-shadow:0 1px 2px rgba(16,23,37,.04);
}
#view-home .dash-stats .dash-stat,#view-home .stats-row .dash-stat{
  border:0; border-right:1px solid var(--rule-soft); border-radius:0;
  box-shadow:none; padding:16px 18px; animation:none !important;
}
#view-home .dash-stats .dash-stat:last-child{ border-right:0; }
#view-home .dash-stat .ds-n{ font-size:26px; }

/* LEVEL 2 — the two primary destinations keep card weight */
#view-home .dash-card{ box-shadow:0 1px 2px rgba(16,23,37,.04); }

/* LEVEL 3 — quick actions become a compact row, not a wall of tiles */
#view-home .quick-btn{
  padding:12px 14px; border-radius:10px; box-shadow:none;
  background:var(--paper); border:1px solid var(--rule);
}
#view-home .quick-btn:hover{ background:#fff; border-color:var(--accent); transform:none; }

/* Section headings inside the dashboard sit closer to their content */
#view-home .dash-h3{ margin-top:6px; margin-bottom:14px; }

@media (max-width:760px){
  #view-home .dash-stats,#view-home .stats-row{ grid-template-columns:repeat(2,1fr); }
  #view-home .dash-stats .dash-stat:nth-child(2n){ border-right:0; }
  #view-home .dash-stats .dash-stat:nth-child(-n+2){ border-bottom:1px solid var(--rule-soft); }
  #view-home .dash-stat .ds-n{ font-size:23px; }
}

/* Dashboard icon tiles carry SVG on the accent, not emoji — emoji render
   differently on every Android OEM skin and read as a template. */
.dc-icon svg,.qb-ico svg,.ficon svg{ width:19px; height:19px; stroke:var(--accent);
  fill:none; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }
.dc-icon,.ficon{ width:40px; height:40px; display:grid; place-items:center; }
.qb-ico{ display:inline-flex; align-items:center; }
.qb-ico svg{ width:16px; height:16px; }

/* Metrics as one banded readout (the container is .dash-stat-row). */
#view-home .dash-stat-row,
#view-history .dash-stat-row{
  display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:0;
  background:#fff; border:1px solid var(--rule); border-radius:14px;
  overflow:hidden; box-shadow:0 1px 2px rgba(16,23,37,.04);
}
#view-home .dash-stat-row .dash-stat,
#view-history .dash-stat-row .dash-stat{
  border:0; border-right:1px solid var(--rule-soft);
  border-radius:0; box-shadow:none; padding:16px 18px; animation:none !important;
}
#view-home .dash-stat-row .dash-stat:last-child,
#view-history .dash-stat-row .dash-stat:last-child{ border-right:0; }
#view-home .dash-stat-row .dash-stat:hover,
#view-history .dash-stat-row .dash-stat:hover{ transform:none; background:var(--paper); }
/* My Progress has 5 metrics; a fifth column would be too narrow to read, so it
   wraps onto a second band row (4 + 1) rather than squeezing every figure. */
#view-history .dash-stat-row{ grid-template-columns:repeat(4,minmax(0,1fr)); }
#view-history .dash-stat-row .dash-stat:nth-child(-n+4){ border-bottom:1px solid var(--rule-soft); }
#view-history .dash-stat-row .dash-stat:nth-child(4){ border-right:0; }
@media (max-width:760px){
  #view-home .dash-stat-row,
  #view-history .dash-stat-row{ grid-template-columns:repeat(2,1fr); }
  /* Home's 4 labels aren't all the same length ("Best shorthand marks" wraps
     to two lines while the others don't), so the two rows were coming out
     different heights and stepping the card's bottom edge. Row 5 (My
     Progress) doesn't have this problem, so this is #view-home only. */
  #view-home .dash-stat-row{ grid-auto-rows:1fr; }
  #view-home .dash-stat-row .dash-stat:nth-child(2n),
  #view-history .dash-stat-row .dash-stat:nth-child(2n){ border-right:0; }
  #view-home .dash-stat-row .dash-stat:nth-child(-n+2){ border-bottom:1px solid var(--rule-soft); }
  /* five items at two columns: rows of 2/2/1 — the last (odd) card spans both
     columns so it reads as a closing figure, not a stray half-empty box */
  #view-history .dash-stat-row .dash-stat:nth-child(-n+4){ border-bottom:1px solid var(--rule-soft); }
  #view-history .dash-stat-row .dash-stat:nth-child(5){ grid-column:1 / -1; border-right:0; }
}

/* ==========================================================================
   EXAM CHROME — controls on the dark topbar, with real hierarchy
   ========================================================================== */
.exam-topbar .exam-btn,.exam-topbar button{ font-family:'IBM Plex Sans',sans-serif;
  font-weight:600; font-size:13.5px; border-radius:6px; padding:9px 16px;
  transition:background .15s,border-color .15s,color .15s; }

/* PRIMARY — Submit */
.exam-topbar .exam-btn.submit,#examSubmit,#shExamSubmit{
  background:var(--accent) !important; color:#FFFFFF !important;
  border:1px solid var(--accent-2) !important;
}
.exam-topbar .exam-btn.submit:hover{ background:var(--accent-2) !important; }

/* SECONDARY — Pause / Resume */
.exam-topbar .exam-btn.ghost,#examPause,#shExamPause{
  background:rgba(255,255,255,.10) !important; color:#FFFFFF !important;
  border:1px solid rgba(255,255,255,.32) !important;
}
.exam-topbar .exam-btn.ghost:hover{ background:rgba(255,255,255,.20) !important;
  border-color:rgba(255,255,255,.5) !important; }

/* DESTRUCTIVE — Exit reads distinct from the quiet controls */
.exam-topbar .exam-btn.exit,#examExit,#shExamExit,
.exam-topbar .exam-btn.ghost:last-child{
  background:transparent !important; color:#FFC9C4 !important;
  border:1px solid rgba(242,114,106,.45) !important;
}
.exam-topbar .exam-btn.exit:hover,#examExit:hover{
  background:rgba(242,114,106,.16) !important; color:#FFFFFF !important; }

/* Font-size steppers */
.fs-step{ background:rgba(255,255,255,.10) !important; color:#FFFFFF !important;
  border:1px solid rgba(255,255,255,.28) !important; font-weight:600; }
.fs-step:hover{ background:rgba(255,255,255,.22) !important; }
.fs-step[disabled],.fs-step:disabled{ opacity:.42 !important; color:rgba(255,255,255,.6) !important; }

/* Toggle chips in the topbar (backspace / live errors) */
.exam-topbar .chip,.exam-toggle{
  background:rgba(255,255,255,.10) !important; color:rgba(255,255,255,.86) !important;
  border:1px solid rgba(255,255,255,.26) !important;
}
.exam-topbar .chip.active,.exam-toggle.active{
  background:var(--accent) !important; color:#FFFFFF !important;
  border-color:var(--accent-2) !important;
}
.exam-topbar,.exam-topbar *{ -webkit-text-fill-color:currentColor; }
.exam-topbar svg{ stroke:currentColor; fill:none; }

/* Disabled controls anywhere: visibly disabled, still readable */
button:disabled,.btn:disabled,.exam-btn:disabled{ opacity:.5; cursor:not-allowed; }

/* ==========================================================================
   TYPING WORKSPACE — document flow, not a presentation card
   ========================================================================== */
#typingInputBox,#shExamInput,.fmt-rich{
  text-align:left !important;
  margin-left:0 !important; margin-right:0 !important;   /* was 0 auto: box centred */
  max-width:none !important;
  align-self:stretch;
  padding:22px 28px !important;
  overflow-y:auto;
}
.exam-pane-bottom{ display:flex; flex-direction:column; align-items:stretch;
  justify-content:flex-start; }
#typingInputBox{ flex:1 1 auto; }
.fmt-rich{ flex:1 1 auto; }
/* placeholder sits top-left with the text, not floating in the middle */
#typingInputBox::placeholder{ text-align:left; }
.fmt-rich:empty::before{ display:block; text-align:left; color:var(--text-3); }

/* ==========================================================================
   PUBLIC SITE — LIGHT-DOMINANT SURFACE
   The public site opened on a full-height ink hero, which read as a dark
   application dashboard rather than a premium public page. Paper is now the
   dominant surface; ink survives only as two short accent bands (the ticker and
   the closing CTA) so it still punctuates the page without owning it.
   ========================================================================== */

/* ---- header ---- */
body > header,#publicSite > header{
  background:rgba(251,250,246,.92) !important;
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  border-bottom:1px solid var(--rule) !important;
}
header .logo,header .logo span:first-child{ color:var(--text); }
header .logo span{ color:var(--brass); }
header .navlinks a{ color:var(--text-2); font-weight:500; }
header .navlinks a:hover{ color:var(--text); }
.nav-ghost-btn{ background:#FFFFFF !important; color:var(--text) !important;
  border:1px solid var(--rule) !important; }
.nav-ghost-btn:hover{ background:var(--paper-2) !important;
  border-color:rgba(16,23,37,.28) !important; }

/* ---- hero on paper ---- */
.hero{
  background:var(--paper) !important;
  color:var(--text);
  border-bottom:1px solid var(--rule);
}
/* the steno-pad ruling stays, inverted for a light page */
.hero::before{
  background:repeating-linear-gradient(to bottom, transparent 0 31px, rgba(16,23,37,.045) 31px 32px) !important;
}
.hero .shorthand-bg{ opacity:.10; }
.hero .shorthand-bg path{ stroke:var(--text); }
.hero__eyebrow{ color:var(--accent) !important; }
.hero__title,.hero h1{ color:var(--text) !important; }
.hero__sub,.hero p{ color:var(--text-2) !important; }
.hero .btn-ghost{ background:#FFFFFF !important; color:var(--text) !important;
  border:1px solid var(--rule) !important; }
.hero .btn-ghost:hover{ background:var(--paper-2) !important; border-color:rgba(16,23,37,.28) !important; }

/* trust bar on paper */
.tbadges{ border-top:1px solid var(--rule) !important; }
.tbadge svg{ stroke:var(--accent) !important; }
.tbadge b{ color:var(--text) !important; }
.tbadge span{ color:var(--text-3) !important; }

/* ---- the demo panel becomes a document preview: paper card, ink screen ---- */
.hero__demo{
  background:#FFFFFF !important;
  border:1px solid var(--rule) !important;
  box-shadow:0 1px 2px rgba(16,23,37,.05), 0 18px 44px -24px rgba(16,23,37,.30) !important;
  -webkit-backdrop-filter:none; backdrop-filter:none;
  padding:0 !important; overflow:hidden;
}
.demo__bar{ padding:13px 18px !important; border-bottom:1px solid var(--rule) !important;
  background:var(--paper-2); }
.demo__label{ color:var(--text-2) !important; }
.demo__speed{ color:var(--brass) !important; }
.demo__dot{ background:var(--accent) !important; }
.demo__text{ color:var(--text) !important; padding:18px 20px 4px; margin:0 !important; }
.demo__text::after{ color:var(--accent) !important; }
.demo__foot{ border-top:1px solid var(--rule) !important; margin:0 !important;
  padding:14px 20px !important; background:var(--paper); }
.demo__foot b{ color:var(--text) !important; }
.demo__foot span{ color:var(--text-3) !important; }

/* ---- library becomes paper; testimonials stays as the one mid-page ink band ---- */
#library{ background:var(--paper-2) !important; border-top:1px solid var(--rule) !important; }
#library .sec-head h2{ color:var(--text) !important; }
#library .sec-head p{ color:var(--text-2) !important; }
#library .sec-eyebrow{ color:var(--accent) !important; }
#library .lib-card{ background:#FFFFFF !important; border:1px solid var(--rule) !important; }
#library .chip{ background:#FFFFFF !important; color:var(--text) !important;
  border:1px solid var(--rule) !important; }
#library .chip.active{ background:var(--accent) !important; color:#FFFFFF !important;
  border-color:var(--accent-2) !important; }

/* the ticker is a thin ink seam, not a band */
.marquee-wrap{ padding:11px 0 !important; }

/* ---- stats strip inside What You Get keeps its ink island (it is a figure panel) ---- */

@media (max-width:760px){
  .hero{ padding:44px 0 40px !important; }
}

/* header must sit on the same paper as the hero, or it reads as a separate grey band */
body > header,#publicSite > header{ background:rgba(251,250,246,.94) !important; }
/* logo mark carried a legacy cyan ring */
.logo-mark,.dash-logo .logo-mark{
  background:var(--ink) !important; border:1px solid var(--ink-3) !important;
  box-shadow:none !important; color:var(--accent-3) !important;
}

/* header list items inherited the ink text colour from the old dark header */
header .navlinks,header .navlinks li{ color:var(--text-2) !important; }
/* the featured (ink) pricing tier: price row was taking the paper secondary colour */
.ptier--featured .ptier__price,.ptier--featured .ptier__price *{ color:var(--on-ink-2) !important; }
.ptier--featured .ptier__amt{ color:#FFFFFF !important; }
.ptier--featured .ptier__per{ color:var(--on-ink-3) !important; }

/* ==========================================================================
   REFERENCE PASS — warm ivory, serif display, product preview as the hero
   ========================================================================== */
:root{
  --paper:#FAF6EF;        /* warmer ivory, per the reference */
  --paper-2:#F3EEE4;
  --paper-3:#E8E1D4;
  --rule:rgba(16,23,37,.12);
  --rule-soft:rgba(16,23,37,.07);
  --font-display:'IBM Plex Serif','IBM Plex Sans Condensed',Georgia,serif;
}
.light-section{ background:var(--paper) !important; }
#how,#news,#about{ background:var(--paper-2) !important; }
#library{ background:var(--paper-2) !important; }

/* ---- display type: serif for the editorial voice, sans for the interface ---- */
.hero__title,.sec-head h2,.pricing__head h2,.faq__head h2,.cta-band h2,
.wyg-card h3,.fcard__title,.ptier__name,.modal-title{
  font-family:var(--font-display) !important; font-weight:700;
}
.hero__title{ font-size:clamp(28px,4.2vw,50px); line-height:1.08; letter-spacing:-.022em;
  color:var(--text) !important; }
.hero__title .hl{
  font-style:normal; color:var(--brass);
  background-image:linear-gradient(var(--brass),var(--brass));
  background-size:100% 3px; background-repeat:no-repeat; background-position:0 92%;
  padding-bottom:2px;
}
.sec-head h2,.pricing__head h2,.faq__head h2{ font-size:clamp(27px,3vw,42px); letter-spacing:-.018em; }
.hero__sub{ font-size:17.5px; line-height:1.6; color:var(--text-2) !important; max-width:44ch; }

/* ---- eyebrow pill ---- */
.hero__pill{
  display:inline-flex; align-items:center; gap:10px; margin:0 0 22px;
  background:#FFFFFF; border:1px solid var(--rule); border-radius:100px;
  padding:7px 16px 7px 7px; box-shadow:0 1px 2px rgba(16,23,37,.05);
}
.hp-ico{ width:28px; height:28px; border-radius:50%; background:var(--ink);
  display:grid; place-items:center; flex:none; }
.hp-ico svg{ width:15px; height:15px; stroke:var(--accent-3); fill:none; stroke-width:1.6;
  stroke-linecap:round; stroke-linejoin:round; }
.hp-t{ font-size:13.5px; font-weight:600; color:var(--text); }
.hp-sep{ width:1px; height:14px; background:var(--rule); }
.hp-m{ font-size:13px; color:var(--accent); font-weight:600; }

/* ---- CTAs ---- */
.hero__ctas{ gap:14px; margin-bottom:26px; }
.hero-cta{ gap:10px; border-radius:var(--r-sm) !important; padding:14px 22px !important; }
.cta-ico{ width:26px; height:26px; border-radius:50%; display:grid; place-items:center; flex:none;
  background:rgba(255,255,255,.22); }
.cta-ico svg{ width:13px; height:13px; fill:currentColor; stroke:none; }
.cta-ico--q{ background:var(--accent-soft); color:var(--accent); }
.cta-ico--q svg{ fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; }
.cta-arrow{ margin-left:2px; font-size:16px; }
.btn-ghost.hero-cta{ background:#FFFFFF !important; border:1px solid var(--rule) !important;
  color:var(--text) !important; box-shadow:0 1px 2px rgba(16,23,37,.05); }

/* ---- compact trust row under the CTAs ---- */
.hero-mini{ list-style:none; display:flex; flex-wrap:wrap; gap:10px 26px; margin:4px 0 0; padding:0; }
.hero-mini li{ display:inline-flex; align-items:center; gap:8px;
  font-size:13px; color:var(--text-2); font-weight:500; }
.hero-mini svg{ width:20px; height:20px; padding:4px; box-sizing:content-box; flex:none;
  border-radius:50%; background:var(--accent-soft); stroke:var(--accent); fill:none;
  stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }

/* ==========================================================================
   HERO PRODUCT PREVIEW — a real device frame showing the real interface
   ========================================================================== */
.hero__demo{
  background:#FFFFFF !important; border:1px solid rgba(16,23,37,.10) !important;
  border-radius:18px !important; padding:0 !important; overflow:hidden;
  box-shadow:0 2px 6px rgba(16,23,37,.06), 0 34px 70px -30px rgba(16,23,37,.42) !important;
  transform:perspective(1600px) rotateY(-3deg) rotateX(1.2deg);
  transform-origin:left center;
}
.demo__bar{
  background:var(--ink) !important; border-bottom:0 !important;
  padding:15px 20px !important; color:var(--on-ink);
}
.demo__dot{ background:var(--accent-3) !important; }
.demo__label{ color:#FFFFFF !important; font-weight:600; }
.demo__speed{ color:#E7C46B !important; }
.demo__text{
  font-family:var(--font-display) !important; font-size:15.5px !important; line-height:1.95 !important;
  color:var(--text) !important; padding:22px 24px 10px !important; min-height:150px !important;
  background:#FFFFFF;
}
.demo__text::after{ color:var(--accent) !important; }
.demo__foot{
  display:flex !important; align-items:center; gap:0 !important;
  border-top:1px solid var(--rule) !important; padding:16px 24px !important;
  background:var(--paper); position:relative;
}
.demo__foot > div{ flex:1; }
.demo__foot b{ color:var(--text) !important; font-size:21px !important; }
.demo__foot span{ color:var(--text-3) !important; }
.demo__foot::after{
  content:''; position:absolute; right:22px; top:50%; transform:translateY(-50%);
  width:46px; height:46px; border-radius:50%; background:var(--accent);
  box-shadow:0 4px 14px -4px rgba(14,124,102,.6);
  background-image:linear-gradient(#fff,#fff),linear-gradient(#fff,#fff);
  background-size:4px 16px,4px 16px; background-position:19px 15px,25px 15px;
  background-repeat:no-repeat;
}

/* ==========================================================================
   VALUE STRIP — one card, four readings, not four competing cards
   ========================================================================== */
.vstrip{
  grid-area:badges; list-style:none; margin:44px 0 0; padding:0;
  display:grid; grid-template-columns:repeat(4,minmax(0,1fr));
  background:#FFFFFF; border:1px solid var(--rule); border-radius:16px;
  box-shadow:0 1px 2px rgba(16,23,37,.05), 0 20px 44px -32px rgba(16,23,37,.3);
  overflow:hidden;
}
.vs-item{ display:flex; align-items:center; gap:14px; padding:22px 24px;
  border-right:1px solid var(--rule-soft); }
.vs-item:last-child{ border-right:0; }
.vs-ico{ width:42px; height:42px; border-radius:50%; flex:none; display:grid; place-items:center; }
.vs-ico svg{ width:19px; height:19px; fill:none; stroke-width:1.8;
  stroke-linecap:round; stroke-linejoin:round; }
.vs-ico--teal{ background:rgba(14,124,102,.10); } .vs-ico--teal svg{ stroke:var(--accent); }
.vs-ico--rose{ background:rgba(163,34,25,.09); }  .vs-ico--rose svg{ stroke:var(--fail); }
.vs-ico--blue{ background:rgba(31,78,121,.10); }  .vs-ico--blue svg{ stroke:#1F4E79; }
.vs-ico--gold{ background:rgba(138,95,21,.12); }  .vs-ico--gold svg{ stroke:var(--brass); fill:var(--brass); }
.vs-body{ display:flex; flex-direction:column; min-width:0; }
.vs-n{ font-family:var(--font-display); font-size:27px; font-weight:700; color:var(--text);
  line-height:1.05; letter-spacing:-.02em; font-variant-numeric:tabular-nums lining-nums; }
.vs-l{ font-size:13.5px; color:var(--text); font-weight:600; margin-top:2px; }
.vs-s{ font-size:12px; color:var(--text-3); margin-top:2px; }

@media (max-width:980px){
  .hero__demo{ transform:none; }
  .vstrip{ grid-template-columns:repeat(2,1fr); }
  .vs-item:nth-child(2n){ border-right:0; }
  .vs-item:nth-child(-n+2){ border-bottom:1px solid var(--rule-soft); }
}
@media (max-width:560px){
  .vstrip{ grid-template-columns:1fr; margin-top:26px; }
  .vs-item{ border-right:0; border-bottom:1px solid var(--rule-soft); padding:16px 18px; }
  .vs-item:last-child{ border-bottom:0; }
  .hero-mini{ gap:10px 18px; }
  .hero-mini li{ font-size:12.5px; }
  .hero__pill{ padding:6px 13px 6px 6px; }
  .hp-t{ font-size:12.5px; } .hp-m{ font-size:12px; }
}

/* ---- header: same ivory as the page, not a grey band ---- */
body > header,#publicSite > header{
  background:rgba(250,246,239,.94) !important;
  border-bottom:1px solid var(--rule) !important;
}
header .wrap{ padding-top:6px; padding-bottom:6px; }
/* wordmark in the display serif, per the reference */
.logo,.dash-logo{ font-family:var(--font-display); font-weight:700; letter-spacing:-.01em; }
.logo span,.dash-logo span{ color:var(--brass) !important; }
.nav-cta,.nav-ghost-btn{ border-radius:var(--r-sm) !important; padding:10px 20px !important; }

/* ---- SC brand mark: navy disc, teal stroke, gold arc ---- */
.logo-mark,.dash-logo .logo-mark{
  width:44px; height:44px; border-radius:50%;
  background:var(--ink) !important; border:1px solid var(--ink-3) !important;
  box-shadow:0 2px 6px -2px rgba(16,23,37,.4) !important;
  display:grid; place-items:center; overflow:hidden;
}
.logo-mark svg{ width:44px; height:44px; }
/* neutralise the legacy gradient fills so the mark reads as one object */
@media (max-width:560px){ .logo-mark,.dash-logo .logo-mark{ width:36px; height:36px; }
  .logo-mark svg{ width:36px; height:36px; } }

/* ---- hero: CTAs side by side, trust row on one line ---- */
.hero__ctas{ flex-wrap:nowrap; align-items:stretch; }
.hero-cta{ padding:13px 20px !important; font-size:14.5px !important; white-space:nowrap; }
.hero-mini{ gap:8px 20px; }
.hero-mini li{ font-size:12.5px; }
.hero-mini svg{ width:17px; height:17px; padding:3.5px; }
@media (max-width:1180px){
  .hero-cta{ padding:12px 16px !important; font-size:13.5px !important; }
  .hero-cta .cta-arrow{ display:none; }
}
@media (max-width:560px){
  .hero__ctas{ flex-wrap:wrap; }
  .hero-cta{ width:100%; justify-content:center; white-space:normal; }
  .hero-cta .cta-arrow{ display:inline; }
}

/* The trust row sits inside .hero__ctas, so nowrap squeezed it into a column and
   stretched the buttons into ovals. The row takes a full line of its own instead. */
.hero__ctas{ flex-wrap:wrap !important; align-items:center; row-gap:18px; }
.hero-cta{ flex:0 0 auto; width:auto !important; border-radius:var(--r-sm) !important;
  min-height:52px; align-self:center; }
.hero-mini{ flex:0 0 100%; width:100%; margin-top:2px; }

/* header sits on solid ivory — the translucent fill was picking up the body ink */
body > header,#publicSite > header{ background:#FAF6EF !important; }

/* CTAs sit side by side; the left column has room once the padding is tuned */
.hero__ctas{ column-gap:12px; }
.hero-cta{ padding:13px 18px !important; font-size:14px !important; }
.hero-cta .cta-ico{ width:24px; height:24px; }
@media (max-width:1279px){ .hero-cta{ padding:12px 14px !important; font-size:13.5px !important; } }

/* SC mark: the legacy artwork is small and low-contrast inside the disc.
   Scale the glyph and let the disc carry the identity. */

/* ==========================================================================
   PALETTE RECONCILIATION
   Warming the paper tones for the reference pass darkened --paper-2/--paper-3 and
   silently cost the muted text, accent and brass their AA margin (table headers
   landed at 4.44:1). Solved rather than patched per component: the muted grey is
   one step darker and the deepest paper tone one step lighter, so every semantic
   colour clears AA on every surface it is allowed to sit on.
   ========================================================================== */
:root{
  --text-3:#5B6375;   /* 6.02 on white · 5.59 paper · 5.21 paper-2 · 5.45 paper-3 */
  --paper-3:#FAF3E4;  /* accent 4.64 · brass 5.10 · text-3 5.45 */
}
/* table headers use the muted tone on the recessed panel */
.dash-view th{ color:var(--text-3); }

/* small status tags */
.tag.free,.tag,.badge{ color:var(--text-2) !important; background:var(--paper-2) !important;
  border:1px solid var(--rule) !important; }
.tag.free{ color:var(--accent) !important; background:var(--accent-soft) !important;
  border-color:rgba(14,124,102,.24) !important; }

/* the mark's glyph is painted with fill; declare colour too so the two agree */
.logo-mark,.logo-mark svg,.logo-mark svg text{ color:#FFFFFF; }
.logo-mark svg{ display:block; width:100%; height:100%; }

/* the glyph is painted with fill="#FFFFFF"; align the span's inherited colour so
   nothing downstream re-tints it */
.logo-mark{ color:#FFFFFF !important; }

/* ==========================================================================
   LANDING — "Daylight on the pad"                       (public site only)

   The brief: light, cinematic, and unmistakably about serious exam study.
   Cinema here is depth and pacing under daylight, not darkness and particles.
   Three devices carry it, and nothing else is added:

     1. LIGHT. The hero is lit from the upper left like a desk by a window:
        a warm rake across the page, a shaded floor where it recedes, and a
        paper grain that gives the ivory a surface. Depth comes from that
        gradient stack, so there is no canvas, no WebGL and no extra DOM.
     2. PAPER. The steno pad's horizontal ruling stays under the hero, and
        every section head is marked with a short brass rule — the margin
        line of a court paper, used as a structural device rather than an
        ornament.
     3. INK. Two shorthand strokes are drawn once on load and then hold
        still. They were looping forever, which is restlessness, not cinema.

   Everything is scoped to #publicSite. #appShell, exam mode, the typing
   surfaces and the dictation UI are deliberately untouched — a working
   instrument should not have weather in it.
   ========================================================================== */

#publicSite{
  --lp-light:#FFFDF7;                  /* the lit part of the page   */
  --lp-page:#FAF6EF;                   /* ivory, the pad page        */
  --lp-shade:#F3EEE4;                  /* the page as it recedes     */
  --lp-rule:rgba(16,23,37,.12);
  --lp-margin:rgba(138,95,21,.55);     /* brass margin rule          */
}

/* ---------- 1. THE HERO: one still moment of daylight ---------- */
#publicSite .hero{
  background:var(--lp-page) !important;
  border-bottom:1px solid var(--lp-rule) !important;
  padding:112px 0 96px !important;
  isolation:isolate;
}

/* pad ruling + paper grain — static, behind everything */
#publicSite .hero::after{
  content:''; position:absolute; inset:0; z-index:0; pointer-events:none;
  background-image:
    repeating-linear-gradient(to bottom, transparent 0 31px, rgba(16,23,37,.05) 31px 32px),
    url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='150' height='150'><filter id='g'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='matrix' values='0 0 0 0 0.06 0 0 0 0 0.09 0 0 0 0 0.14 0 0 0 0.055 0'/></filter><rect width='150' height='150' filter='url%28%23g%29'/></svg>") !important;
  background-size:auto, 150px 150px !important;
  background-repeat:repeat, repeat !important;
  -webkit-mask-image:linear-gradient(to bottom, rgba(0,0,0,.95) 0%, rgba(0,0,0,.4) 66%, transparent 96%) !important;
  mask-image:linear-gradient(to bottom, rgba(0,0,0,.95) 0%, rgba(0,0,0,.4) 66%, transparent 96%) !important;
}

/* the daylight itself: warm rake from the upper left, shade at the lower right.
   Oversized and clipped by the hero, so the slow drift never exposes an edge. */
#publicSite .hero::before{
  content:''; position:absolute; inset:-18% -12%; z-index:0; pointer-events:none;
  background:
    radial-gradient(56% 60% at 18% 2%,  var(--lp-light) 0%, rgba(255,253,247,.70) 34%, rgba(255,253,247,0) 72%),
    radial-gradient(50% 54% at 92% 96%, rgba(232,225,212,.62) 0%, rgba(232,225,212,0) 70%) !important;
  -webkit-mask-image:none !important; mask-image:none !important;
  animation:lpDaylight 26s ease-in-out infinite alternate;
  will-change:transform;
}
@keyframes lpDaylight{
  from{ transform:translate3d(0,0,0) scale(1); }
  to  { transform:translate3d(1.6%,1.2%,0) scale(1.045); }
}

/* ---------- ink strokes: drawn once, then still ---------- */
#publicSite .hero .shorthand-bg{ z-index:1; opacity:1 !important; }
#publicSite .hero .sh-stroke-2,
#publicSite .hero .sh-stroke-4{ display:none !important; }
#publicSite .hero .sh-stroke-1,
#publicSite .hero .sh-stroke-3{
  stroke-dasharray:1500 !important;
  animation:lpInk 2600ms cubic-bezier(.25,.8,.35,1) both !important;
}
#publicSite .hero .sh-stroke-1{ stroke:var(--brass) !important; opacity:.15 !important;
  stroke-width:1.7 !important; animation-delay:260ms !important; }
#publicSite .hero .sh-stroke-3{ stroke:var(--accent) !important; opacity:.11 !important;
  stroke-width:1.5 !important; animation-delay:560ms !important; }
@keyframes lpInk{ from{ stroke-dashoffset:1500; } to{ stroke-dashoffset:0; } }

/* ---------- negative space and the lifted sheet ---------- */
#publicSite .hero>.wrap{ gap:56px 64px; align-items:center; }
#publicSite .hero__sub{ max-width:46ch; }

/* the demo reads as a real sheet resting on the desk: a short contact shadow
   plus a long soft cast. This is the page you are actually graded on. */
#publicSite .hero__demo{
  box-shadow:
    0 1px 2px rgba(16,23,37,.05),
    0 10px 24px -14px rgba(16,23,37,.20),
    0 52px 92px -44px rgba(16,23,37,.44) !important;
}
#publicSite .vstrip{
  margin-top:6px;
  box-shadow:0 1px 2px rgba(16,23,37,.04), 0 26px 52px -38px rgba(16,23,37,.32) !important;
}

/* ---------- 2. SECTION RHYTHM ---------- */
#publicSite>section,
#publicSite .light-section{ padding:104px 0; }
#publicSite>section{ border-top:1px solid var(--lp-rule) !important; border-bottom:none !important; }
#publicSite .hero{ border-top:none !important; }

#publicSite .sec-head,
#publicSite .pricing__head,
#publicSite .faq__head{ margin-bottom:52px; max-width:62ch; }
#publicSite .sec-head h2{ margin-top:14px; }
#publicSite .sec-head p{ margin-top:14px; max-width:58ch; }

/* the eyebrow carries the pad's margin rule — a marker, not a decoration */
#publicSite .sec-eyebrow,
#publicSite .pricing__head .label,
#publicSite .faq__head .label{
  display:inline-flex !important; align-items:center; gap:11px;
  font-family:'IBM Plex Mono',monospace !important; font-size:11px !important;
  letter-spacing:.155em !important; text-transform:uppercase !important;
  color:var(--brass) !important;
}
#publicSite .sec-eyebrow::before,
#publicSite .pricing__head .label::before,
#publicSite .faq__head .label::before{
  content:''; flex:none; width:22px; height:1.5px;
  background:var(--lp-margin); border-radius:1px;
}

/* alternating paper tones give the page its pacing, top to bottom */
#publicSite #features   { background:var(--lp-page)  !important; }
#publicSite #library    { background:var(--lp-shade) !important; }
#publicSite #sample     { background:var(--lp-page)  !important; }
#publicSite #how        { background:var(--lp-shade) !important; }
#publicSite #whatyouget { background:var(--lp-page)  !important; }
#publicSite #news       { background:var(--lp-shade) !important; }
#publicSite #testimonials{ background:var(--lp-page) !important; }
#publicSite #pricing    { background:var(--lp-shade) !important; }
#publicSite #about      { background:var(--lp-page)  !important; }
#publicSite #faq        { background:var(--lp-shade) !important; }

/* ---------- 3. CARD SURFACES ON LIGHT ---------- */
#publicSite .feature,
#publicSite .lib-card,
#publicSite .wyg-card,
#publicSite .news-card,
#publicSite .testi{
  background:#FFFFFF !important;
  border:1px solid var(--lp-rule) !important;
  border-radius:14px !important;
  box-shadow:0 1px 2px rgba(16,23,37,.04) !important;
  transition:transform 220ms cubic-bezier(.2,.7,.3,1),
             box-shadow 220ms cubic-bezier(.2,.7,.3,1),
             border-color 220ms cubic-bezier(.2,.7,.3,1) !important;
}
#publicSite .feature:hover,
#publicSite .lib-card:hover,
#publicSite .wyg-card:hover,
#publicSite .news-card:hover,
#appShell .news-card:hover,
#publicSite .testi:hover{
  transform:translateY(-3px) !important;
  border-color:rgba(16,23,37,.2) !important;
  box-shadow:0 1px 2px rgba(16,23,37,.05),
             0 22px 42px -28px rgba(16,23,37,.34) !important;
}
/* an accordion should not levitate when you reach for it */
#publicSite .faq__item{
  background:#FFFFFF !important; border:1px solid var(--lp-rule) !important;
  border-radius:12px !important; transition:border-color 200ms ease !important;
}
#publicSite .faq__item:hover{ border-color:rgba(16,23,37,.22) !important; transform:none !important; }

/* ---------- the ticker: a seam on paper, not an ink band ---------- */
#publicSite .marquee-wrap{
  background:var(--lp-shade) !important; padding:12px 0 !important;
  border-top:1px solid var(--lp-rule) !important;
  border-bottom:1px solid var(--lp-rule) !important;
}
#publicSite .marquee-track span{ color:var(--text-3) !important; }
#publicSite .marquee-track b{ color:var(--lp-margin) !important; }

/* ---------- what you get: paper, with the tick as a quiet stamp ---------- */
#publicSite #testimonials .sec-head h2{ color:var(--text) !important; }
#publicSite #testimonials .sec-head p{ color:var(--text-2) !important; }
#publicSite #testimonials .testi h3{
  font-family:var(--font-display) !important; font-size:17px !important;
  color:var(--text) !important; letter-spacing:-.012em;
}
#publicSite #testimonials .testi p.quote{ color:var(--text-2) !important; font-size:14.5px !important; }
#publicSite #testimonials .testi .mark{
  width:30px; height:30px; border-radius:50%;
  display:grid !important; place-items:center;
  font-family:'IBM Plex Mono',monospace !important; font-size:14px !important;
  background:var(--accent-soft) !important; color:var(--accent) !important;
  margin-bottom:14px !important;
}

/* ---------- closing band + footer: the page ends on paper ---------- */
#publicSite .cta-band,
#publicSite #library,
#publicSite #testimonials{ border-top:1px solid var(--lp-rule) !important; }
#publicSite .cta-band{ background:var(--lp-page) !important; padding:96px 0 !important; }
#publicSite .cta-band h2{ color:var(--text) !important; }
#publicSite .cta-band p{ color:var(--text-2) !important; }
#publicSite .cta-band .sec-eyebrow{ color:var(--brass) !important; }

#publicSite>footer{
  background:var(--lp-shade) !important; color:var(--text-2) !important;
  border-top:1px solid var(--lp-rule) !important;
}
#publicSite>footer h4,
#publicSite>footer .foot-h{
  font-family:'IBM Plex Mono',monospace !important; font-size:11px !important;
  letter-spacing:.14em !important; text-transform:uppercase !important;
  color:var(--brass) !important;
}
#publicSite>footer p,
#publicSite>footer .foot-copy{ color:var(--text-3) !important; }
#publicSite>footer a{ color:var(--text-2) !important; transition:color 160ms ease; }
#publicSite>footer a:hover{ color:var(--accent) !important; }
#publicSite>footer .foot-copy a{ color:var(--text-3) !important; }

/* ---------- header: same ivory as the page it sits on ---------- */
#publicSite>header{ border-bottom:1px solid var(--lp-rule) !important; }
#publicSite .navlinks a{ transition:color 160ms ease; }
#publicSite .navlinks a:hover{ color:var(--accent) !important; }

/* ---------- 4. MOTION BUDGET ---------- */
/* phones do not need an ambient light loop running behind a scroll */
@media (max-width:560px){
  /* a later rule set .hero-cta to width:auto, which left the stacked buttons ragged */
  #publicSite .hero__ctas{ flex-direction:column; align-items:stretch; }
  #publicSite .hero-cta{ width:100% !important; justify-content:center; }
  /* the floating pause control sat on top of the duration readout at phone widths;
     the sheet reads perfectly well without it */
  #publicSite .demo__foot::after{ display:none !important; }
  #publicSite .demo__foot{ padding:14px 18px !important; }
  #publicSite .demo__text{ min-height:96px !important; }
}
@media (max-width:760px){
  #publicSite .hero::before{ animation:none !important; }
  #publicSite .hero{ padding:60px 0 52px !important; }
  #publicSite>section,#publicSite .light-section{ padding:64px 0; }
  #publicSite .sec-head,#publicSite .pricing__head,#publicSite .faq__head{ margin-bottom:34px; }
}
@media (max-width:980px){
  #publicSite .hero{ padding:76px 0 64px !important; }
  #publicSite>section,#publicSite .light-section{ padding:76px 0; }
}

@media (prefers-reduced-motion:reduce){
  #publicSite .hero::before{ animation:none !important; transform:none !important; }
  #publicSite .hero .sh-stroke-1,
  #publicSite .hero .sh-stroke-3{ animation:none !important; stroke-dashoffset:0 !important; }
  /* .reveal starts at opacity 0 and is raised by the observer; with motion off
     the content must simply be present rather than waiting for a transition */
  #publicSite .reveal{ opacity:1 !important; transform:none !important; }
  #publicSite .feature:hover,#publicSite .lib-card:hover,#publicSite .wyg-card:hover,
  #publicSite .news-card:hover,#publicSite .testi:hover{ transform:none !important; }
}

/* ==========================================================================
   5. FINAL DETAIL PASS — small gaps left after the passes above:
   the hero figure panel had no lift, the ink strip had no internal rhythm,
   icons sat static inside hovering cards, and the CTA arrow never moved.
   Landing page only — every rule below is scoped under #publicSite.
   ========================================================================== */

/* the hero stat panel is a figure, like the demo panel beside it —
   it should sit very slightly off the page, not flush with it */
#publicSite .vstrip{
  box-shadow:0 1px 2px rgba(16,23,37,.04), 0 14px 32px -22px rgba(16,23,37,.22);
}

/* a card that lifts should feel like its contents rise with it —
   icon glyphs get a small deliberate nudge, not a bounce */
#publicSite .feature:hover .ficon,
#publicSite .wyg-card:hover .wyg-icon,
#publicSite .vs-item:hover .vs-ico,
#publicSite .news-card:hover .news-thumb,
#appShell .news-card:hover .news-thumb{
  transform:scale(1.06);
}
#publicSite .ficon{ transition:transform 220ms cubic-bezier(.2,.7,.3,1); }
#publicSite .wyg-icon,
#publicSite .vs-ico{ transition:transform 220ms cubic-bezier(.2,.7,.3,1); }
#publicSite .news-thumb,
#appShell .news-thumb{ transition:transform 260ms cubic-bezier(.2,.7,.3,1); }

/* the ink strip was one flat rectangle; a light column rule between
   figures reads as a ledger, which is the point of the number */
@media (min-width:561px){
  #publicSite .wyg-strip > div{
    position:relative;
  }
  #publicSite .wyg-strip > div::before{
    content:''; position:absolute; left:0; top:2px; bottom:2px; width:1px;
    background:var(--ink-3);
  }
  #publicSite .wyg-strip > div:first-child::before{ display:none; }
}

/* an arrow that never moves is just a glyph; on hover it should read
   as an invitation to continue, not decoration */
#publicSite .btn .cta-arrow{
  display:inline-block; transition:transform 200ms cubic-bezier(.2,.7,.3,1);
}
#publicSite .btn:hover .cta-arrow{ transform:translateX(3px); }

/* nav links currently only change colour; a short underline that grows
   from the baseline gives the same feedback with more precision */
#publicSite .navlinks a{
  position:relative; padding-bottom:2px;
}
#publicSite .navlinks a::after{
  content:''; position:absolute; left:0; right:100%; bottom:0; height:1.5px;
  background:var(--accent); transition:right 220ms cubic-bezier(.2,.7,.3,1);
}
#publicSite .navlinks a:hover::after{ right:0; }

@media (prefers-reduced-motion:reduce){
  #publicSite .feature:hover .ficon,
  #publicSite .wyg-card:hover .wyg-icon,
  #publicSite .vs-item:hover .vs-ico,
  #publicSite .news-card:hover .news-thumb,
  #appShell .news-card:hover .news-thumb,
  #publicSite .btn:hover .cta-arrow{ transform:none !important; }
  #publicSite .navlinks a::after{ transition:none !important; }
}

/* ==========================================================================
   DASHBOARD — MY PROGRESS + RANK LIST: table cards + mobile rhythm
   The attempts tables sat directly on the page background (no card, no
   zebra, no rounded edges) while everything around them had become a
   polished card — a "raw data" read against the rest of the page. Scoped
   to #appShell only; landing page and other dash views are untouched.
   Rank List's leaderboard tables share the identical .board markup and
   the same problem, so the selector list is simply extended rather than
   duplicating the block. */

#view-history .board,
#view-rank .board{
  background:#fff; border:1px solid var(--rule); border-radius:14px;
  overflow:hidden; box-shadow:0 1px 2px rgba(16,23,37,.04);
}
#view-history .board th,
#view-rank .board th{
  background:var(--paper-2); font-weight:700; padding:12px 16px;
}
#view-history .board td,
#view-rank .board td{ padding:13px 16px; }
#view-history .board tbody tr:nth-child(even),
#view-rank .board tbody tr:nth-child(even){ background:var(--paper-2); }
#view-history .board tbody tr:hover td,
#view-rank .board tbody tr:hover td{ background:var(--accent-soft); }

/* Card surfaces on My Progress get the same lift language used elsewhere on
   the dashboard, so the weak-word and key-fumble panels feel like part of
   the same product rather than a plainer, later addition. */
#view-history .prog-panel{
  transition:box-shadow 220ms cubic-bezier(.2,.7,.3,1), border-color 220ms cubic-bezier(.2,.7,.3,1);
}
#view-history .prog-panel:hover{
  border-color:rgba(16,23,37,.16);
  box-shadow:0 1px 2px rgba(16,23,37,.05), 0 16px 32px -22px rgba(16,23,37,.28);
}
#view-history .weak-chip{ transition:transform 160ms ease, box-shadow 160ms ease; }
#view-history .weak-chip:hover{ transform:translateY(-1px); box-shadow:0 4px 10px -4px rgba(177,0,90,.35); }
#view-history .key-cap{ transition:transform 140ms ease; }
#view-history .key-cap:hover{ transform:scale(1.08); z-index:1; position:relative; }

/* Phones were inheriting the desktop dashboard's fixed padding (34px/22px),
   which on a 360–430px screen leaves very little room for card content —
   directly contributing to the keyboard overflow this pass also fixes. */
@media (max-width:600px){
  .dash-scroll{ padding:20px 16px 48px; }
  .prog-panel{ padding:16px 16px; margin-bottom:16px; }
  .dash-two-col{ gap:14px; margin-top:24px; }
  #view-history .board th,#view-history .board td,
  #view-rank .board th,#view-rank .board td{ padding:10px 10px; font-size:13px; }
}

/* ==========================================================================
   TYPING TEST SETUP — mobile hierarchy pass
   Root cause of the compressed/clipped mobile layout: .tool-panel carries
   its full 36px desktop padding at every width, so on a 360px phone the
   exam grid's actual content box is ~190px — narrower than its own fixed
   238px card column, which is what was clipping the exam cards. Fixing the
   padding fixes most of the downstream squeeze; the rest of this block adds
   the step hierarchy the flow was missing. Scoped to the typing setup only.
   ========================================================================== */

@media (max-width:600px){
  /* .tool-panel is shared by the Typing Test and Shorthand Practice setup
     screens (and one inline-styled usage elsewhere that already overrides
     padding itself) — fixing the class directly keeps both in sync instead
     of drifting the way they did when this was scoped to #ttSetup alone. */
  .tool-panel{ padding:18px 16px; }
  #examGrid.exam-grid,
  #shExamGrid.exam-grid{ grid-template-columns:1fr; gap:10px; }
  #examGrid .exam-btn,
  #shExamGrid .exam-btn{ padding:16px 16px 14px; }
  #shSeriesRow.series-row{ grid-template-columns:1fr; gap:10px; }
  #shSeriesRow .series-btn{ padding:16px 16px 14px; }
}

/* Language cards: correct for choosing a mode, oversized for the amount of
   decision they carry. Compact them on phones so "choose your exam" — the
   step with real content to scan — is reached in one screen, not three. */
@media (max-width:600px){
  .lang-gate{ gap:10px; margin-bottom:18px; }
  .lang-card{ padding:16px 16px 14px !important; }
  .lang-flag,#hiLangRow .lang-flag{ width:28px !important; height:28px !important; margin-bottom:8px !important; }
  .lang-title{ font-size:17px !important; margin-bottom:4px; }
  .lang-card.hi .lang-title{ font-size:16px !important; }
  .lang-sub{ font-size:12.5px !important; margin-bottom:8px !important; line-height:1.45; }
  .lang-meta{ display:none; }
  .lang-go{ margin-top:6px !important; font-size:13px !important; }
}

/* Step hierarchy: the flow reads Language -> Exam -> Review -> Configure ->
   Start, but nothing on screen said so. These eyebrows use :has() to find
   the right field without adding markup; browsers without :has() simply
   don't show the number — the existing label text still works as a header. */
/* .lang-gate is itself the grid (two .lang-card columns), so a ::before here
   would become a grid item and shove the cards out of their 1fr/1fr track —
   it must span every column explicitly to sit above them as its own row. */
#ttSetup .lang-gate::before{
  content:'Step 1 of 5 — Language'; display:block; grid-column:1 / -1;
  font-family:'IBM Plex Mono',monospace; font-size:10.5px; font-weight:700;
  letter-spacing:.12em; text-transform:uppercase; color:var(--accent);
  margin-bottom:10px;
}
#ttSetup .field:has(#examGrid)::before{
  content:'Step 2 of 5 — Exam'; display:block;
  font-family:'IBM Plex Mono',monospace; font-size:10.5px; font-weight:700;
  letter-spacing:.12em; text-transform:uppercase; color:var(--accent);
  margin-bottom:6px;
}
#ttSetup .field:has(#examGrid) label{ display:none; }
#ttSetup .exam-spec::before{
  content:'Step 3 of 5 — Exam brief'; display:block;
  font-family:'IBM Plex Mono',monospace; font-size:10.5px; font-weight:700;
  letter-spacing:.12em; text-transform:uppercase; color:var(--accent);
  margin-bottom:8px;
}
#ttSetup .field:has(#ttLevelRow)::before{
  content:'Step 4 of 5 — Configure test'; display:block;
  font-family:'IBM Plex Mono',monospace; font-size:10.5px; font-weight:700;
  letter-spacing:.12em; text-transform:uppercase; color:var(--accent);
  margin-bottom:10px;
}
/* Step 5 (Start test) needs no eyebrow of its own — the passage card's own
   head already labels it, and the Start Test button below is the obvious
   terminal action. */

/* Settings fields (Difficulty, Duration+Size, Options) read as one loose
   list; a shared rhythm and a hairline under the group ties them together
   as "Configure test" without needing a new wrapper element. */
#ttSetup .field:has(#ttLevelRow){ margin-bottom:14px !important; }
#ttSetup .tt-setup-grid{ margin-bottom:14px; }
#ttSetup .field:has(#optBackspace){ padding-bottom:16px; border-bottom:1px solid var(--rule-soft); }

/* Passage preview: useful, not dominant. Tighter on phones specifically. */
@media (max-width:600px){
  .tt-passage-card{ margin-bottom:16px; }
  .tt-pc-head{ padding:12px 14px; }
  .tt-pc-preview{ padding:12px 14px; max-height:90px; font-size:13.5px; line-height:1.7; }
}

/* Start Test: the terminal action of the flow — full width and unmissable
   on a phone, where a left-aligned inline button is easy to skim past. */
@media (max-width:600px){
  #ttSetup .tool-actions{ margin-top:4px; }
  #ttSetup .tool-actions #typingStartBtn{
    width:100%; justify-content:center; padding:15px 20px; font-size:15.5px;
    box-shadow:0 10px 24px -10px rgba(14,124,102,.45);
  }
}

@media (prefers-reduced-motion:reduce){
  #ttSetup .tool-actions #typingStartBtn{ transition:none !important; }
}

/* ==========================================================================
   SHORTHAND DICTATION PRACTICE — bringing the setup screen in line
   The exam picker below it (.exam-btn) was neutralised to the editorial
   white-card system in an earlier pass; .series-btn ("Dictation courses")
   never got the same treatment and was still four different pastel
   gradients — the one visibly "promotional" surface left on the page,
   sitting first and pulling focus from the actual practice workflow.
   ========================================================================== */

.dash-view .series-btn{
  background:#fff !important; border:1px solid var(--rule) !important; border-radius:var(--r-lg) !important;
  box-shadow:0 1px 2px rgba(16,23,37,.04) !important; padding:15px 16px !important;
  border-width:1px !important;
  transition:transform var(--t),border-color var(--t),box-shadow var(--t) !important;
}
.dash-view .series-btn::before{
  content:''; position:absolute; inset:0 auto 0 0; width:2.5px; background:var(--accent);
  border-radius:0 2px 2px 0; opacity:0; transition:opacity var(--t);
}
.dash-view .series-btn:hover{
  transform:translateY(-2px) !important; border-color:rgba(16,23,37,.26) !important;
  box-shadow:var(--shadow) !important;
}
.dash-view .series-btn:hover::before{ opacity:1; }
.dash-view .series-btn.active{
  background:var(--accent) !important; border-color:var(--accent-2) !important;
  box-shadow:0 2px 10px -3px rgba(14,124,102,.55) !important;
}
.dash-view .series-btn.active::before{ opacity:1; background:#fff; }
.dash-view .sb-tag{
  background:var(--paper-2) !important; color:var(--text-3) !important; border:1px solid var(--rule) !important;
  font-weight:700 !important;
}
.dash-view .sb-name{ color:var(--text) !important; font-family:'IBM Plex Sans Condensed',sans-serif; }
.dash-view .sb-desc{ color:var(--text-2) !important; }
.dash-view .series-btn.active .sb-tag{ background:rgba(255,255,255,.18) !important; color:#fff !important; border-color:rgba(255,255,255,.34) !important; }
.dash-view .series-btn.active .sb-name,
.dash-view .series-btn.active .sb-desc{ color:#fff !important; }
.dash-view .series-btn.active .sb-desc{ color:rgba(255,255,255,.82) !important; }
.dash-view .series-note{
  background:var(--paper-2) !important; border:1px solid var(--rule) !important; color:var(--text-2) !important;
}

@media (max-width:600px){
  #shSetup .series-row{ grid-template-columns:1fr; gap:10px; }
  #shSetup .series-btn{ padding:16px 16px 14px !important; }
}

/* Step hierarchy, matching the pattern already used on the Typing Test
   setup screen. Courses and "practise a specific exam" are two parallel
   ways to reach the same decision (what to dictate), so they share one
   step rather than each claiming a number — the two field labels already
   say "Dictation courses" / "Or practise a specific exam", which reads
   fine as an alternative once the step context is set above them. */
#shSetup > .field:first-child::before{
  content:'Step 1 of 4 — Choose your dictation'; display:block;
  font-family:'IBM Plex Mono',monospace; font-size:10.5px; font-weight:700;
  letter-spacing:.12em; text-transform:uppercase; color:var(--accent);
  margin-bottom:8px;
}
#shSetup .field:has(#shModeRow)::before{
  content:'Step 2 of 4'; display:block;
  font-family:'IBM Plex Mono',monospace; font-size:10.5px; font-weight:700;
  letter-spacing:.12em; text-transform:uppercase; color:var(--accent);
  margin-bottom:6px;
}
#shSetup .field:has(#shSlotRow)::before{
  content:'Step 3 of 4'; display:block;
  font-family:'IBM Plex Mono',monospace; font-size:10.5px; font-weight:700;
  letter-spacing:.12em; text-transform:uppercase; color:var(--accent);
  margin-bottom:6px;
}
#shSetup .field:has(#shOptReadAlong)::before{
  content:'Step 4 of 4'; display:block;
  font-family:'IBM Plex Mono',monospace; font-size:10.5px; font-weight:700;
  letter-spacing:.12em; text-transform:uppercase; color:var(--accent);
  margin-bottom:6px;
}
/* Custom-matter mode has no difficulty step (it's the candidate's own
   text) — the field simply isn't in the DOM at that point (display:none
   on its container), so no orphan "Step 3" label is possible here. */

/* Settings rhythm: difficulty and options should read as one group
   between "what to practise" and "start", same treatment as Typing Test. */
#shSetup .field:has(#shOptReadAlong){ padding-bottom:16px; border-bottom:1px solid var(--rule-soft); }

/* Start Dictation Test: full width and unmissable on a phone. */
@media (max-width:600px){
  #shSetup .tool-actions{ margin-top:4px; }
  #shSetup .tool-actions #shStartBtn{
    width:100%; justify-content:center; padding:15px 20px; font-size:15.5px;
    box-shadow:0 10px 24px -10px rgba(14,124,102,.45);
  }
}

@media (prefers-reduced-motion:reduce){
  #shSetup .series-btn{ transition:none !important; }
  #shSetup .series-btn:hover{ transform:none !important; }
  #shSetup .tool-actions #shStartBtn{ transition:none !important; }
}

/* ==========================================================================
   EXAM READINESS — confirmed-findings pass
   Four targeted fixes from the readiness audit. No formulas, thresholds,
   gating, or scoring touched — every rule below is presentation-only.
   ========================================================================== */

/* 1. Exam selector on mobile: a defensive CSS layer only. The real fix
   (short exam name below 480px) lives in renderRdyExamSelect(); this just
   lets any browser that does honour text-overflow on <select> degrade a
   little more gracefully, and trims the wasted padding on narrow screens. */
@media (max-width:480px){
  #rdyExamSelect{ font-size:13.5px; padding:11px 12px; text-overflow:ellipsis; }
}

/* 2. Component score numbers were the last figures on the dashboard still
   on the pre-redesign display font — every other number (.rd-num b,
   .dash-stat .ds-n) already moved to IBM Plex Mono with tabular figures. */
.rb-val{
  font-family:'IBM Plex Mono',monospace; font-variant-numeric:tabular-nums lining-nums;
}

/* 3. "This exam requires" used a different display face than "AHC PS
   readiness" on the same screen — bringing it onto .rdy-title's family. */
.rdy-reqs h4{ font-family:'IBM Plex Sans Condensed',sans-serif; }

/* 4. "Start recommended practice" is the terminal action of this screen,
   same role as Start Test / Start Dictation Test — matching their already-
   shipped full-width mobile treatment exactly. */
@media (max-width:600px){
  .rdy-plan .btn-primary{
    width:100%; justify-content:center; padding:15px 20px; font-size:15.5px;
    box-shadow:0 10px 24px -10px rgba(14,124,102,.45);
  }
}

@media (prefers-reduced-motion:reduce){
  .rdy-plan .btn-primary{ transition:none !important; }
}

/* ==========================================================================
   RANK LIST — confirmed-findings pass
   Badge contrast fix lives in place (.rank-badge.r2/.r3, base rule block).
   This block covers the current-user row highlight and the mobile
   horizontal-scroll affordance. No ranking/sort/data logic touched —
   renderBoard()/renderTypingBoard() only gained a presentation class.
   ========================================================================== */

/* Current-user row: a tinted wash + left edge, not a loud badge — it must
   read clearly without competing with the #1 rank's gold treatment. */
#view-rank .board tbody tr.is-me td{
  background:var(--accent-soft);
}
#view-rank .board tbody tr.is-me td:first-child{
  box-shadow:inset 3px 0 0 var(--accent);
}
#view-rank .board tbody tr.is-me:hover td{ background:var(--accent-soft); }

/* Mobile: the table is intentionally wider than the phone (more columns than
   fit), scrollable inside .board-wrap. A persistent right-edge fade signals
   there is more without a banner or removing any column. */
@media (max-width:600px){
  .board-wrap{ position:relative; }
  .board-wrap::after{
    content:''; position:absolute; top:0; right:0; bottom:0; width:28px;
    background:linear-gradient(to right, rgba(255,255,255,0), #fff 75%);
    pointer-events:none;
  }
}

/* ==========================================================================
   LIBRARY — confirmed-findings pass
   .lr-title, .lr-kind.sh/.type, and .lr-open were fixed in place (base rule
   block above). This is only the mobile filter-chip layout fix, scoped to
   #libFilterRow specifically — .duration-row is shared by several other
   chip rows across the app and must not be touched. renderLibrary(),
   openLibraryItem(), and filter state are untouched.
   ========================================================================== */
@media (max-width:430px){
  #libFilterRow{ display:grid; grid-template-columns:1fr 1fr; gap:8px; }
  #libFilterRow .chip[data-lib="all"]{ grid-column:1 / -1; }
}

/* ==========================================================================
   EXAM GUIDE — desktop grid balance
   .dash-two-col's 3-column auto-fit leaves the 4th of 4 cards orphaned with
   a large empty gap at desktop widths. Scoped to #view-guide only (the
   class is shared with My Account, which is unaffected) and to desktop
   widths only — mobile keeps its existing single-column stack.
   ========================================================================== */
@media (min-width:901px){
  #view-guide .dash-two-col{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
}

/* ==========================================================================
   DASHBOARD/HOME — Quick Start desktop grid balance
   .quick-row's auto-fit produces a 4+2 split for 6 buttons at desktop width,
   leaving two columns of empty space beside the second row. .quick-row has
   exactly one usage in the project (this view), but the fix is still scoped
   to #view-home to keep intent explicit and avoid any future ambiguity.
   Mobile keeps the existing single-column stack — unaffected below 901px.
   ========================================================================== */
@media (min-width:901px){
  #view-home .quick-row{ grid-template-columns:repeat(3, minmax(0, 1fr)); }
}

/* ==========================================================================
   MY ACCOUNT — mobile CTA width
   "Buy lifetime access" was sized to its own content (~260px) inside a
   ~278px card on a 360px phone, falling short of the card edge unlike the
   terminal CTAs on other setup screens. Scoped narrowly — not a change to
   .btn-primary itself, which is shared globally.
   ========================================================================== */
@media (max-width:600px){
  #acUpgradeWrap .btn-primary{ width:100%; justify-content:center; }
}

/* ==========================================================================
   CHEER OVERLAY — secondary action button on a light surface
   #cheerOverlay is a sibling to #appShell, not nested inside it, so the
   existing #appShell .btn-ghost / .hero .btn-ghost light-surface fixes never
   reached it — the ghost button fell through to the unscoped .btn-ghost rule,
   whose --on-ink/--rule-ink tokens are built for a dark ink surface, not
   .cheer-box's white card. Same light-surface pattern already proven for
   #appShell, scoped to this overlay only.
   ========================================================================== */
#cheerOverlay .btn-ghost{background:#fff; color:var(--text); border-color:var(--rule);}
/* ==========================================================================
   TYPING WORKSPACE POLISH — Test Task 2 (scoped to #examMode only)
   Presentation only: no behaviour, IDs, classes, handlers, or calculations
   changed. The typing path (.exam-passage / #typingInputBox / .fmt-rich /
   .exam-pane) still carries the site's "no animation during typing" rule,
   so every change here targets the surrounding chrome only: topbar, timers,
   progress zone, pane labels, buttons, hint and overlays.
   ========================================================================== */
/* 1. Topbar hierarchy: one quiet band, the clock is the hero */
#examMode .exam-topbar{ box-shadow:0 4px 22px -8px rgba(16,23,37,.55); }
#examMode .exam-passage-name{
  font-family:'IBM Plex Sans Condensed','IBM Plex Sans',sans-serif;
  font-weight:700; font-size:15.5px; letter-spacing:-0.01em; color:#FFFFFF;
}
#examMode .exam-badge{ font-size:10px; letter-spacing:.08em; padding:4px 10px; }
#examMode .exam-timers{ gap:22px; }
#examMode .exam-timer{ gap:3px; }
#examMode .et-label{ font-size:9.5px; letter-spacing:.14em; color:rgba(242,244,248,.5); }
#examMode .et-val{ letter-spacing:-0.02em; }
#examMode .exam-timer.big .et-val{
  font-size:34px; font-weight:700; letter-spacing:-0.03em;
  font-feature-settings:"tnum" 1,"lnum" 1;
}
/* 2. Progress zone: one calm readout band */
#examMode .exam-progress{ height:7px; }
#examMode .exam-progress-meta{
  gap:12px; padding:8px 22px; font-size:11.5px; letter-spacing:.04em;
}
/* 3. Panes: the same hairline language as the rest of the product */
#examMode .exam-pane{ border-color:var(--rule); }
#examMode .exam-split{ padding:0 16px 12px; gap:14px; }
#examMode .exam-pane-label{ padding:11px 20px; }
/* 4. Hint, warnings and overlays: the quiet finish around the typing path,
      which itself must never animate while keystrokes are being measured */
#examMode .exam-hint{ padding:8px 0 12px; color:#5D6678; }
#examMode .exam-paste-warn{
  font-size:12.5px; padding:11px 22px;
  box-shadow:0 10px 28px rgba(163,34,25,.35);
}
#examMode .exam-paused-box{
  padding:36px 42px;
  box-shadow:0 18px 48px -16px rgba(16,23,37,.5);
}
/* 5. Keyboard usability: visible focus for every topbar control */
#examMode .fs-step:focus-visible{
  outline:none; box-shadow:0 0 0 3px var(--accent-soft);
}
#examMode .exam-btn:focus-visible{
  outline:none; box-shadow:0 0 0 3px rgba(242,244,248,.3);
}
/* 6. Countdown keeps its drama, loses the wobble */
#examMode .exam-countdown{ backdrop-filter:blur(4px); }
#examMode #examCountdownNum{
  letter-spacing:-0.04em; font-feature-settings:"tnum" 1,"lnum" 1;
}
@media (prefers-reduced-motion:reduce){
  #examMode .exam-countdown{ backdrop-filter:none; }
}
@media (max-width:700px){
  #examMode .exam-timers{ gap:14px; }
  #examMode .exam-timer.big .et-val{ font-size:26px; }
  #examMode .exam-progress-meta{ padding:7px 12px; }
}

/* ==========================================================================
   STATISTICS / PERFORMANCE BAND POLISH — Test Task 3
   Scope: ONLY the two existing stat bands —
     #view-home   .dash-stat-row  ("Your progress": tests, best WPM,
                                   best shorthand marks, best rank)
     #view-history .dash-stat-row ("My Progress": streak, attempts,
                                   avg accuracy, best WPM, best AHC marks)
   Presentation only. No new metrics, no data changes, no DOM edits: the
   bands are populated through the same nine IDs (myTests, myBestWpm,
   myBestSh, myRank, hStreak, hTotal, hAvgAcc, hBestWpm, hBestSh) and the
   existing .ds-n / .ds-l classes, all of which are untouched here.
   Design language: the existing "banded readout" surface (one hairline
   card, rule dividers, paper-tint hover, no lift — the design system
   deliberately keeps the band quiet during hover) is preserved; this pass
   refines type scale, weight, rhythm and proportions only.
   ========================================================================== */
/* ---- per-tile figures: clearer hierarchy, still restrained ---- */
#appShell #view-home .dash-stat-row .ds-n,
#appShell #view-history .dash-stat-row .ds-n{
  font-size:30px;
  font-weight:700;
  line-height:1.02;
  letter-spacing:-0.03em;
}
/* ---- per-tile labels: readable secondary line, aligned rhythm ---- */
#appShell #view-home .dash-stat-row .ds-l,
#appShell #view-history .dash-stat-row .ds-l{
  font-size:11px;
  letter-spacing:.11em;
  margin-top:9px;
  line-height:1.4;
}
/* ---- tile proportions: a touch more air inside each readout cell ---- */
#appShell #view-home .dash-stat-row .dash-stat,
#appShell #view-history .dash-stat-row .dash-stat{
  padding:18px 20px;
}
/* ---- the streak tile keeps its accent emphasis (existing gradient) ---- */
/* ---- band surface: keep the existing hairline + 14px radius card,
         add one faint inner highlight so the band reads as a surface,
         not a sticker — invisible at a glance, felt on a retina screen ---- */
#appShell #view-home .dash-stat-row,
#appShell #view-history .dash-stat-row{
  box-shadow:0 1px 0 rgba(242,244,248,.75) inset,
             0 1px 2px rgba(16,23,37,.04),
             0 12px 34px -26px rgba(16,23,37,.35);
}
@media (max-width:760px){
  /* two-up banding preserved; figures shrink so long labels never collide */
  #appShell #view-home .dash-stat-row .ds-n,
  #appShell #view-history .dash-stat-row .ds-n{ font-size:24px; }
  #appShell #view-history .dash-stat-row .ds-l{ font-size:10.5px; }
}
@media (max-width:480px){
  #appShell #view-home .dash-stat-row .ds-n,
  #appShell #view-history .dash-stat-row .ds-n{ font-size:22px; }
  #appShell #view-home .dash-stat-row .ds-l,
  #appShell #view-history .dash-stat-row .ds-l{ font-size:10px; }
  #appShell #view-home .dash-stat-row .dash-stat,
  #appShell #view-history .dash-stat-row .dash-stat{ padding:14px 14px; }
}

/* ==========================================================================
   PHASE 1 — FIRST HIGH-IMPACT BATCH
   One product, one language: dashboard shell & nav, home hierarchy, CTA /
   button system, shared card surfaces, type hierarchy, mobile navigation.
   Presentation only. No IDs, classes, handlers, engines, scoring, Firebase,
   entitlements, or content touched. Test 1–3 rules remain untouched and
   sit above this block.
   ========================================================================== */

/* ---------- A. BUTTON LANGUAGE — kill the legacy pill, one squared system ----------
   The public site's legacy .btn declared a 100px pill in Sora with a gradient
   primary. The app's design system uses a 6px squared Plex Sans button. Two
   shapes on one product reads as two products. The radius is retinted onto the
   shared squared language here — the landing keeps its own sizes/weights and
   its ink-surface colours. */
.btn{ border-radius:var(--r-sm); }
.btn-primary{
  background:var(--accent); box-shadow:0 1px 0 rgba(255,255,255,.14) inset,
    0 2px 8px -2px rgba(14,124,102,.5);
}
.btn-primary:hover{
  background:var(--accent-2); box-shadow:0 2px 14px -3px rgba(14,124,102,.55);
  transform:translateY(-1px);
}
/* large CTAs (hero, terminal actions) share the same squared language */
.btn--lg{ padding:13px 26px; font-size:15px; }
.btn-sm{ padding:8px 15px; font-size:13px; }
.btn-xs{ padding:6px 12px; font-size:12px; border-radius:5px; }

/* ---------- B. DASHBOARD SHELL — sidebar + topbar ----------
   The nav was drifting between the legacy Sora 14.5px pill rule and the design
   system; the active item had correct colour but flat weight. Active items now
   carry the section's weight (700) so the current page reads before any icon. */
#appShell .dash-nav-item{
  font-family:'IBM Plex Sans',sans-serif; font-weight:500;
}
#appShell .dash-nav-item.active{ font-weight:700; }
#appShell .dash-nav-item .dni-icon svg{ stroke-width:1.7; }
#appShell .dash-nav-item.active .dni-icon svg{ stroke-width:1.9; }
/* the plan badge and avatar share the sidebar rail's ink rhythm */
.dash-topbar{ padding-left:22px; padding-right:22px; }

/* ---------- C. HOME HIERARCHY — one confident welcome, then the work ---------- */
#view-home > .wrap > .dash-h1{
  letter-spacing:-0.026em;
}
/* Quick start rows share the band's 14px radius so the home page reads as one
   family of surfaces (band 14px, cards 14px, rows were 10px). */
#view-home .quick-btn{ border-radius:var(--r-lg); }
/* info cards keep the same top-rule rhythm as the dash-h3 sections */
.dash-info-card h4{
  font-family:'IBM Plex Sans Condensed',sans-serif; font-weight:700;
  letter-spacing:-0.012em; color:var(--text);
}

/* ---------- D. SHARED SURFACES — one hover physics ----------
   Cards already lift on hover; quick-btn hover in the home context was a flat
   border swap. Give it the same single-pixel lift as every other card so the
   whole dashboard moves at one speed. */
#view-home .quick-btn{ transition:border-color var(--t),box-shadow var(--t),transform var(--t); }
#view-home .quick-btn:hover{ transform:translateY(-1px); box-shadow:var(--shadow); }

/* ---------- E. MOBILE NAV — the sheet gets a head and a floor ----------
   At ≤900px the sidebar becomes the only navigation, so its top edge needs a
   branded label row (already present in markup as .dash-logo) and its footer
   needs breathing room above the safe area. */
@media (max-width:900px){
  .dash-sidebar{ padding-top:6px; }
  .dash-sidebar-foot{ padding-bottom:10px; }
}
/* phones: the burger, the search and the avatar must never touch each other */
@media (max-width:480px){
  .dash-topbar{ gap:8px; padding-left:12px; padding-right:12px; }
  .dash-search input{ font-size:13.5px; }
  .dash-logout{ font-size:13px; padding:10px 12px !important; }
}

/* reduced motion stays absolute for every rule in this batch — the global
   @media (prefers-reduced-motion:reduce) at L1819 already kills all
   transitions/animations, so nothing here needs its own guard */

/* ---------- F. REMAINING LEGACY PILL CONTROLS — squared, scoped ----------
   Four control families still declared a 100px pill radius in the legacy app
   CSS: the typing-setup category buttons, admin tabs, exam-mode action buttons,
   and app-shell filter chips. They are the only leftover "second product" in
   the control language; they keep every other declaration (colours, gradients,
   sizes, hover physics) exactly as they are. */
.cat-btn{ border-radius:var(--r-sm); }
.admin-tab-btn{ border-radius:var(--r-sm); }
.exam-btn{ border-radius:var(--r-sm); }
#appShell .chip{ border-radius:var(--r-lg); }

/* ============ ADMIN CONTENT STUDIO (Phase 1) ============
   Mobile-first: everything here works down to a 360px viewport without
   horizontal scroll. Reuses .admin-table / .admin-form / .modal-box / .field
   tokens already defined above rather than inventing a parallel style system. */
.cs-type-tabs{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:14px; }
.cs-type-tab{ font-family:'Sora',sans-serif; font-weight:700; font-size:13px;
  padding:9px 14px; border-radius:100px; border:1.5px solid var(--rule,#ddd);
  /* Readability fix: these modals render outside #appShell's DOM scope (see the
     Phase 1 comment on #csEditorModal), so var(--ink-soft) here resolves to the
     dark-theme value meant for light text on a dark page, not the light-panel
     value — nearly invisible on this panel's white background. Every color
     below is the exact ink/placeholder/border palette the site already defines
     for its light panels (see .light-section, css/style.css ~L264), stated
     explicitly so it renders correctly regardless of where in the DOM this
     markup sits. */
  background:transparent; color:#5B5480; cursor:pointer; min-height:40px; }
.cs-type-tab.active{ background:var(--brass,#a8741a); border-color:var(--brass,#a8741a); color:#fff; }
.cs-toolbar{ display:flex; flex-wrap:wrap; gap:10px; align-items:center; }
.cs-toolbar input[type="text"], .cs-toolbar select{ padding:10px 12px; border-radius:8px;
  border:1px solid rgba(22,17,58,0.15); font-size:14px; min-height:42px; flex:1 1 160px; min-width:0;
  color:#1A1533; background:rgba(22,17,58,0.04); }
.cs-toolbar input[type="text"]::placeholder{ color:#8C87A6; }
.cs-toolbar select option{ color:#1A1533; background:#fff; }
.cs-toolbar .btn{ flex:0 0 auto; min-height:42px; }
.cs-storage-note{ font-size:12px; color:var(--text-3,#888); margin-top:10px; padding:8px 10px;
  background:rgba(255,200,87,0.10); border:1px solid rgba(255,200,87,0.35); border-radius:8px; }
.cs-status-pill{ display:inline-block; padding:3px 10px; border-radius:100px; font-size:11px;
  font-weight:700; font-family:'Sora',sans-serif; }
.cs-status-pill.published{ background:rgba(60,170,110,0.15); color:#1e8a53; }
.cs-status-pill.draft{ background:rgba(160,160,60,0.15); color:#8a7a1e; }
.cs-status-pill.unpublished{ background:rgba(170,60,60,0.15); color:#a83c3c; }
.cs-badge-override{ font-size:10px; color:var(--brass,#a8741a); border:1px solid currentColor;
  border-radius:6px; padding:1px 6px; margin-left:6px; }
.cs-row-actions{ display:flex; flex-wrap:wrap; gap:6px; }
.cs-row-actions button{ font-size:12px; padding:6px 10px; min-height:32px; border-radius:6px;
  border:1px solid rgba(22,17,58,0.15); background:#fff; color:#1A1533; cursor:pointer; }
.cs-row-actions button.danger{ color:#a83c3c; border-color:#a83c3c; }
@media (max-width:700px){
  .admin-table-wrap table.cs-cards, #csListTable{ display:block; }
  #csListTable thead{ display:none; }
  #csListTable tbody{ display:block; }
  #csListTable tr{ display:block; border:1px solid var(--rule,#ddd); border-radius:10px;
    margin-bottom:10px; padding:12px; }
  #csListTable td{ display:block; border:none !important; padding:4px 0 !important; }
  #csListTable td[data-label]::before{ content:attr(data-label); display:block;
    font-size:10px; text-transform:uppercase; letter-spacing:.04em; color:var(--text-3,#888); }
}
.cs-editor-box{ max-width:760px; width:94vw; max-height:88vh; overflow-y:auto; }
.cs-editor-body .field{ margin-bottom:14px; }
.cs-editor-body label{ display:block; font-size:12.5px; font-weight:600; margin-bottom:5px; color:#5B5480; }
.cs-editor-body input[type="text"], .cs-editor-body input[type="number"],
.cs-editor-body select, .cs-editor-body textarea{ width:100%; padding:10px 12px; border-radius:8px;
  border:1px solid rgba(22,17,58,0.15); font-size:14px; box-sizing:border-box; min-height:42px;
  color:#1A1533; background:rgba(22,17,58,0.04); }
.cs-editor-body input[type="text"]::placeholder, .cs-editor-body input[type="number"]::placeholder,
.cs-editor-body textarea::placeholder{ color:#8C87A6; }
.cs-editor-body select option{ color:#1A1533; background:#fff; }
.cs-editor-body input[type="text"]:focus, .cs-editor-body input[type="number"]:focus,
.cs-editor-body select:focus, .cs-editor-body textarea:focus{
  outline:2px solid var(--brass,#a8741a); outline-offset:1px; border-color:var(--brass,#a8741a); }
.cs-editor-body input:disabled, .cs-editor-body select:disabled, .cs-editor-body textarea:disabled{
  color:#8C87A6; background:rgba(22,17,58,0.02); cursor:not-allowed; }
.cs-editor-body textarea{ min-height:110px; font-family:'IBM Plex Sans',sans-serif; line-height:1.5; resize:vertical; }
.cs-editor-2col{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
@media (max-width:560px){ .cs-editor-2col{ grid-template-columns:1fr; } }
.cs-para-block{ border:1px solid var(--rule,#ddd); border-radius:10px; padding:10px; margin-bottom:12px; background:#fafafa; }
.cs-para-toolbar{ display:flex; gap:6px; margin-bottom:8px; flex-wrap:wrap; }
.cs-para-toolbar button{ min-width:36px; min-height:36px; border-radius:6px; border:1px solid rgba(22,17,58,0.15);
  background:#fff; color:#1A1533; cursor:pointer; font-size:13px; }
.cs-para-toolbar button.b{ font-weight:800; }
.cs-para-toolbar button.i{ font-style:italic; }
.cs-para-toolbar button.u{ text-decoration:underline; }
.cs-para-toolbar button.cite{ font-size:11px; font-weight:700; color:var(--brass,#a8741a); }
.cs-para-toolbar button.del{ margin-left:auto; color:#a83c3c; }
.cs-para-text{ width:100%; min-height:90px; font-family:'IBM Plex Sans',sans-serif; }
.cs-add-para-btn{ width:100%; padding:10px; border-radius:8px; border:1.5px dashed rgba(22,17,58,0.25);
  background:transparent; cursor:pointer; color:#5B5480; min-height:44px; }
.cs-citation-hint{ font-size:11.5px; color:var(--text-3,#888); margin-top:4px; }
.cs-citation-hint.bad{ color:#a83c3c; font-weight:600; }
.cs-editor-actions{ display:flex; align-items:center; gap:12px; margin-top:16px; flex-wrap:wrap;
  position:sticky; bottom:0; background:#fff; padding-top:10px; }
.cs-wordcount{ font-size:12.5px; color:var(--ink-soft,#555); font-weight:600; margin-right:auto; }
.cs-preview-box{ max-width:760px; width:94vw; max-height:88vh; overflow-y:auto; }
.cs-preview-body{ font-family:'Times New Roman',serif; line-height:1.6; }
.cs-preview-body p{ margin:0 0 12px; }

/* ==========================================================================
 * Phase 4 — Adaptive Dictator V1: minimal, isolated, additive card styles.
 * New class prefix (.ad-) only — nothing here redefines or overrides any
 * existing selector, so no existing screen can be affected by this block.
 * ========================================================================== */
.ad-card{ margin:0 0 18px; padding:16px 18px; border-radius:12px;
  background:rgba(138,92,255,0.07); border:1px solid rgba(138,92,255,0.28); }
.ad-card-eyebrow{ font-family:'IBM Plex Mono',monospace; font-size:11px; letter-spacing:1px;
  text-transform:uppercase; color:var(--violet); margin-bottom:6px; }
.ad-card-title{ font-family:'Space Grotesk',sans-serif; font-weight:800; font-size:16px; margin-bottom:8px; }
.ad-card-row{ font-size:13.5px; line-height:1.5; margin-bottom:6px; color:inherit; }
.ad-card-row b{ font-weight:700; }
.ad-card-meta{ display:flex; flex-wrap:wrap; gap:8px; margin:10px 0; }
.ad-chip{ font-family:'IBM Plex Mono',monospace; font-size:11.5px; padding:4px 9px; border-radius:999px;
  background:rgba(138,92,255,0.14); border:1px solid rgba(138,92,255,0.3); }
.ad-card-actions{ margin-top:10px; display:flex; gap:10px; flex-wrap:wrap; }
.ad-limitation{ font-size:12.5px; color:#C2540E; margin-top:6px; }

/* ==========================================================================
 * Phase 5 — Zero-Choice Coach V1: minimal, isolated, additive view styles.
 * New class prefix (.zcc-) only, reusing the existing .ad-card/.ad-chip/
 * .chip/.duration-row/.btn primitives everywhere possible — nothing here
 * redefines or overrides any existing selector, so no existing screen can
 * be affected by this block.
 * ========================================================================== */
.zcc-root{ max-width:640px; }
.zcc-picker{ padding:18px 20px; border-radius:12px; background:rgba(63,217,180,0.07); border:1px solid rgba(63,217,180,0.28); }
.zcc-picker-label{ font-family:'IBM Plex Mono',monospace; font-size:12px; letter-spacing:0.5px; text-transform:uppercase; color:var(--ink-soft,#5B5480); margin-bottom:10px; }
.zcc-plan-card{ margin:0 0 14px; padding:16px 18px; border-radius:12px; background:rgba(63,217,180,0.07); border:1px solid rgba(63,217,180,0.28); }
.zcc-block-list{ margin:6px 0 12px; }
.zcc-block-row{ display:flex; align-items:center; gap:10px; padding:8px 0; border-bottom:1px solid rgba(0,0,0,0.06); font-size:13.5px; }
.zcc-block-row:last-child{ border-bottom:none; }
.zcc-block-num{ font-family:'IBM Plex Mono',monospace; font-weight:700; min-width:22px; text-align:center; }
.zcc-block-label{ flex:1 1 auto; }
.zcc-block-dur{ font-family:'IBM Plex Mono',monospace; font-size:12px; color:var(--ink-soft,#5B5480); }
.zcc-block-current{ font-weight:700; }
.zcc-block-status-completed{ opacity:0.65; text-decoration:line-through; }
.zcc-block-status-superseded{ opacity:0.4; text-decoration:line-through; display:none; }
.zcc-why summary{ cursor:pointer; font-size:12.5px; font-weight:600; color:var(--violet); margin:8px 0; }
.zcc-limitations{ margin-top:10px; }
.zcc-rebuild{ text-align:right; }

/* RC1 release hardening — compact public header on narrow phones.
   Later brand rules use !important, so this final media override intentionally
   sits at EOF and wins only at phone widths. Keeps login/signup/admin reachable
   without clipping or horizontal overflow. */
@media (max-width:480px){
  header .wrap{ padding-left:8px !important; padding-right:8px !important; }
  header nav{ gap:5px !important; }
  header .logo{ font-size:15px !important; gap:5px !important; min-width:0; flex:1 1 auto; overflow:hidden; white-space:nowrap; }
  header .logo > span:not(.logo-mark){ display:none; }
  header .logo-mark{ width:30px !important; height:30px !important; }
  header .logo-mark svg{ width:30px !important; height:30px !important; }
  header .acct-area{ gap:4px !important; flex:none; }
  header .nav-ghost-btn,
  header .nav-cta{ padding:7px 8px !important; font-size:12px !important; min-height:36px; white-space:nowrap; }
  header .admin-nav-btn{ width:36px !important; height:36px !important; margin-left:0 !important; flex:none; }
  header .admin-nav-btn::before{ font-size:16px; }
}

/* ========================================================================== 
   RC1 UI REMEDIATION PASS — 2026-09-20
   Scope: public-facing presentation only. No scoring, auth, payment, Firebase,
   Coach, Readiness, Brain, or entitlement behaviour is changed here.
   ========================================================================== */

/* Public desktop header: the previous 1220px container was narrower than the
   intrinsic width of the logo + eight navigation links + account controls.
   `.navlinks{overflow:hidden}` therefore clipped Exam News / FAQ even on wide
   desktop screens. Give only the public header the width it actually needs and
   never use clipping as a layout strategy. */
#publicSite > header .wrap{
  max-width:1440px;
  padding-left:24px;
  padding-right:24px;
}
#publicSite > header nav{ gap:14px; }
#publicSite > header .navlinks{
  flex:0 1 auto;
  min-width:0;
  overflow:visible;
  gap:18px;
}
#publicSite > header .navlinks li,
#publicSite > header .navlinks a{ white-space:nowrap; }

/* Compact the same header before the existing <=1240px mobile/tablet collapse.
   This preserves every desktop link instead of letting the final items sit under
   Log in / Sign up. */
@media (min-width:1241px) and (max-width:1320px){
  #publicSite > header .logo{ font-size:28px; gap:8px; }
  #publicSite > header .logo-mark{ width:44px; height:44px; }
  #publicSite > header .navlinks{ gap:11px; font-size:12.5px; }
  #publicSite > header .nav-ghost-btn,
  #publicSite > header .nav-cta{ padding:8px 14px; font-size:12.5px; }
  #publicSite > header .admin-nav-btn{
    width:42px; height:42px; padding:0; margin-left:0; font-size:0;
    display:flex; align-items:center; justify-content:center;
  }
  #publicSite > header .admin-nav-btn::before{ content:"🔐"; font-size:17px; }
}

/* Homepage metrics band: `.stat` is also used on paper cards elsewhere and its
   global white card background was winning here, while this dark band correctly
   assigned white type. The result was literal white-on-white content. Scope the
   presentation to this band and use dividers rather than four unrelated cards. */
#publicSite .stats-band .stats-row{
  gap:0;
  padding-top:44px;
  padding-bottom:44px;
}
#publicSite .stats-band .stat{
  background:transparent !important;
  border:0 !important;
  border-right:1px solid var(--ink-3) !important;
  border-radius:0 !important;
  box-shadow:none !important;
  padding:8px 28px !important;
  text-align:center !important;
  min-width:0;
}
#publicSite .stats-band .stat:last-child{ border-right:0 !important; }
#publicSite .stats-band .stat .num{
  color:#FFFFFF !important;
  -webkit-text-fill-color:#FFFFFF !important;
  background:none !important;
}
#publicSite .stats-band .stat .lbl{
  color:var(--on-ink-2) !important;
  margin-top:6px;
  line-height:1.45;
}
@media (max-width:700px){
  #publicSite .stats-band .stats-row{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  #publicSite .stats-band .stat{ padding:18px 14px !important; }
  #publicSite .stats-band .stat:nth-child(2n){ border-right:0 !important; }
  #publicSite .stats-band .stat:nth-child(-n+2){ border-bottom:1px solid var(--ink-3) !important; }
}
@media (max-width:420px){
  #publicSite .stats-band .stat .num{ font-size:30px !important; }
  #publicSite .stats-band .stat .lbl{ font-size:9.5px !important; letter-spacing:.075em; }
}

/* Public homepage accessibility cleanup: the legacy semantic accents were just
   below AA on the warm-paper redesign. Darken the foregrounds without changing
   the error categories or their backgrounds. */
#publicSite .demo-text.compare .miss,
#publicSite .review-box .miss{ color:#B4231C !important; }
#publicSite .demo-text.compare .extra,
#publicSite .review-box .extra{ color:#A64A00 !important; }
#publicSite .demo-text.compare .punct,
#publicSite .review-box .punct{ color:#096B78 !important; }
#publicSite .right,#publicSite .ok,#publicSite .correct,
#publicSite .ficon,#publicSite .mark,#publicSite .tag.free,
#publicSite .qualify-badge.qualify-yes,#publicSite .news-tag.result{
  color:#0B705E !important;
}
#publicSite .wyg-tags span,
#publicSite #testimonials .testi .mark{ color:#0B705E !important; }

/* App-shell contrast repairs found by the same remediation audit. The lock
   overlays were restyled from dark to light in an earlier pass, but their copy
   kept the old on-dark colour token; the text was nearly invisible. */
#appShell .lock-overlay{ color:var(--text) !important; }
#appShell .lock-overlay h3{ color:var(--text) !important; }
#appShell .lock-overlay p{ color:var(--text-2) !important; }
#appShell .dash-avatar{ color:#FFFFFF !important; }
#appShell .sec-eyebrow{ color:#0B705E !important; }


/* ========================================================================
   Coach Snapshot — visibility layer over existing intelligence only.
   ======================================================================== */
#view-home .scs-panel{
  margin:0 0 26px;
  padding:20px;
  background:linear-gradient(180deg,#fff 0%,var(--paper) 100%);
  border:1px solid var(--rule);
  border-radius:16px;
  box-shadow:0 1px 2px rgba(16,23,37,.04),0 16px 34px -30px rgba(16,23,37,.35);
}
#view-home .scs-head{display:flex;align-items:flex-start;justify-content:space-between;gap:18px;margin-bottom:16px;}
#view-home .scs-eyebrow{font-size:10.5px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--accent);margin-bottom:4px;}
#view-home .scs-head h2{font-family:'IBM Plex Sans Condensed','IBM Plex Sans',sans-serif;font-size:21px;line-height:1.15;color:var(--text);margin:0 0 5px;letter-spacing:-.01em;}
#view-home .scs-head p{font-size:13.5px;line-height:1.5;color:var(--text-2);margin:0;max-width:720px;}
#view-home .scs-open-coach{flex:0 0 auto;white-space:nowrap;}
#view-home .scs-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border:1px solid var(--rule-soft);border-radius:12px;overflow:hidden;background:#fff;}
#view-home .scs-card{min-width:0;padding:16px 16px 15px;border-right:1px solid var(--rule-soft);background:#fff;display:flex;flex-direction:column;align-items:flex-start;}
#view-home .scs-card:last-child{border-right:0;}
#view-home .scs-label{font-size:10px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--text-3,#767083);margin-bottom:8px;}
#view-home .scs-card h3{font-family:'IBM Plex Sans Condensed','IBM Plex Sans',sans-serif;font-size:17px;line-height:1.22;color:var(--text);margin:0 0 7px;overflow-wrap:anywhere;}
#view-home .scs-card p{font-size:12.5px;line-height:1.5;color:var(--text-2);margin:0 0 10px;}
#view-home .scs-meta{font-size:11px;line-height:1.4;color:var(--text-3,#767083);margin-top:auto;padding-top:4px;min-height:19px;}
#view-home .scs-link{appearance:none;border:0;background:transparent;color:var(--accent);font:600 12.5px/1.2 'IBM Plex Sans',sans-serif;padding:9px 0 0;cursor:pointer;text-align:left;}
#view-home .scs-link:hover{text-decoration:underline;text-underline-offset:3px;}
#view-home .scs-link:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:2px;}
#view-home .scs-link:disabled{color:var(--text-3,#767083);cursor:default;text-decoration:none;}
#view-home .scs-foot{font-size:10.5px;line-height:1.45;color:var(--text-3,#767083);margin-top:10px;}
@media (max-width:1050px){
  #view-home .scs-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
  #view-home .scs-card:nth-child(2){border-right:0;}
  #view-home .scs-card:nth-child(-n+2){border-bottom:1px solid var(--rule-soft);}
}
@media (max-width:620px){
  #view-home .scs-panel{padding:16px;margin-bottom:22px;}
  #view-home .scs-head{display:block;}
  #view-home .scs-open-coach{margin-top:12px;}
  #view-home .scs-grid{grid-template-columns:1fr;}
  #view-home .scs-card{border-right:0;border-bottom:1px solid var(--rule-soft);padding:15px;}
  #view-home .scs-card:nth-child(2){border-right:0;}
  #view-home .scs-card:nth-child(-n+2){border-bottom:1px solid var(--rule-soft);}
  #view-home .scs-card:last-child{border-bottom:0;}
}


/* ========================================================================
   Dashboard clarity + home ordering hotfix (2026-09-20)
   Fixes: bottom-aligned action buttons, stronger logged-in typography,
   and coach snapshot positioned after the four primary practice cards.
   ======================================================================== */
#view-home .dash-card-grid{ align-items:stretch; }
#view-home .dash-card{
  display:flex;
  flex-direction:column;
  min-height:100%;
}
#view-home .dash-card .btn-sm{
  margin-top:auto;
  align-self:flex-start;
}
#view-home .dash-card h3{
  font-size:20px;
  line-height:1.24;
}
#view-home .dash-card p{
  font-size:15px;
  line-height:1.66;
  color:#4E475C;
}
#view-home .dash-sub,
#view-home .scs-head p,
#view-home .scs-card p,
#view-home .scs-meta,
#view-home .dash-stat .ds-l,
#view-home .quick-btn span{
  color:#5A5269;
}
#view-home .dash-sub{ font-size:15.5px; }
#view-home .scs-panel{ margin:28px 0 26px; }
#view-home .scs-head h2{ font-size:24px; }
#view-home .scs-head p{ font-size:14.5px; line-height:1.58; }
#view-home .scs-card h3{ font-size:18.5px; line-height:1.28; }
#view-home .scs-card p{ font-size:14px; line-height:1.62; }
#view-home .scs-link{ font-size:13.5px; }
#appShell .dash-nav-item,
#appShell .dash-search input,
#appShell .dash-user span,
#appShell .dash-plan-badge{
  font-size:14.5px;
}
@media (max-width:760px){
  #view-home .dash-card h3{ font-size:18.5px; }
  #view-home .dash-card p{ font-size:14.5px; }
  #view-home .dash-sub{ font-size:14.5px; }
}

/* Typing formatting paper — show party names left and labels right,
   closer to the real High Court layout the candidate must reproduce. */
.typing-party-line{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:18px;
  width:100%;
}
.typing-party-line .tpl-left,
.typing-party-line .tpl-right{ display:inline-block; }
.typing-party-line .tpl-right{
  margin-left:auto;
  text-align:right;
  white-space:nowrap;
}

/* ========================================================================
   LOGGED-IN READABILITY OVERHAUL V1 — 2026-09-20
   Goal: clean, larger, high-contrast app typography and roomier exam cards.
   UI only. Typing/dictation engines and exam editor fonts remain untouched.
   ======================================================================== */

/* Use the already-loaded IBM Plex Sans as the plain, clean app face. */
#appShell .dash-main,
#appShell .dash-sidebar,
#appShell .dash-view,
#appShell .tool-panel,
#appShell .modal-box{
  font-family:'IBM Plex Sans','Segoe UI',Arial,sans-serif;
  color:#18202C;
}

/* Remove the condensed/mono look from ordinary UI copy while preserving
   specialist typing/editor/readout surfaces that have their own stronger IDs. */
#appShell .dash-h1,
#appShell .dash-h3,
#appShell .dash-card h3,
#appShell .dash-card .dc-title,
#appShell .tool-panel h2,
#appShell .tool-panel h3,
#appShell .exam-spec .spec-title,
#appShell .dash-view .exam-btn .eb-name,
#appShell .dash-view .sb-name,
#appShell .scs-head h2,
#appShell .scs-card h3,
#appShell .lib-row .lr-title,
#appShell .tt-pc-title,
#appShell .ppi-title{
  font-family:'IBM Plex Sans','Segoe UI',Arial,sans-serif !important;
  letter-spacing:-.015em;
}

/* Main app scale: readable from a normal laptop viewing distance. */
#appShell .dash-h1{
  font-size:36px !important;
  line-height:1.16;
  font-weight:700;
  color:#111827;
}
#appShell .dash-sub{
  font-size:17px !important;
  line-height:1.55;
  color:#4B5563 !important;
}
#appShell .dash-h3{
  font-size:22px !important;
  line-height:1.28;
  color:#111827;
}
#appShell .dash-view p,
#appShell .tool-panel p,
#appShell .series-note{
  font-size:16px;
  line-height:1.65;
  color:#4B5563;
}

/* Sidebar/topbar are navigation, not micro-copy. */
#appShell .dash-nav-item{
  font-family:'IBM Plex Sans','Segoe UI',Arial,sans-serif !important;
  font-size:15.5px !important;
  font-weight:600;
  min-height:46px;
}
#appShell .dash-nav-label{
  font-family:'IBM Plex Sans','Segoe UI',Arial,sans-serif !important;
  font-size:11.5px !important;
  letter-spacing:.11em;
}
#appShell .dash-search input{
  font-family:'IBM Plex Sans','Segoe UI',Arial,sans-serif !important;
  font-size:15.5px !important;
  color:#111827;
}
#appShell .dash-user span{ font-size:15px !important; font-weight:600; color:#111827; }
#appShell .dash-plan-badge{ font-size:12.5px !important; letter-spacing:.06em; }

/* Home action cards: stronger titles/body and a little more breathing room. */
#view-home .dash-card{
  padding:26px 24px !important;
  min-height:268px;
}
#view-home .dash-card h3{
  font-size:22px !important;
  line-height:1.28;
  font-weight:700;
  color:#111827;
}
#view-home .dash-card p{
  font-size:16px !important;
  line-height:1.66;
  color:#4B5563 !important;
}
#view-home .dash-card .btn-sm{
  font-family:'IBM Plex Sans','Segoe UI',Arial,sans-serif !important;
  font-size:15px !important;
  font-weight:700;
  min-width:120px;
  min-height:48px;
}

/* Coach snapshot follows the same clear type system. */
#view-home .scs-head h2{ font-size:27px !important; font-weight:700; }
#view-home .scs-head p{ font-size:15.5px !important; color:#4B5563 !important; }
#view-home .scs-eyebrow,
#view-home .scs-label{
  font-family:'IBM Plex Sans','Segoe UI',Arial,sans-serif !important;
  font-size:12px !important;
  font-weight:700;
  letter-spacing:.08em;
}
#view-home .scs-card{ padding:20px 18px 18px !important; }
#view-home .scs-card h3{ font-size:20px !important; line-height:1.32; }
#view-home .scs-card p{ font-size:15px !important; line-height:1.62; color:#4B5563 !important; }
#view-home .scs-meta{ font-family:'IBM Plex Sans','Segoe UI',Arial,sans-serif !important; font-size:13px !important; color:#667085 !important; }
#view-home .scs-link{ font-size:14.5px !important; font-weight:700 !important; }
#view-home .scs-foot{ font-family:'IBM Plex Sans','Segoe UI',Arial,sans-serif !important; font-size:12.5px !important; color:#667085 !important; }

/* Form/setup labels: readable without the tiny typewriter effect. */
#appShell .field label,
#appShell .sec-eyebrow,
#appShell .dict-speed-label,
#appShell .sh-audio-label,
#appShell .sh-ab-label{
  font-family:'IBM Plex Sans','Segoe UI',Arial,sans-serif !important;
  font-size:12.5px !important;
  font-weight:700 !important;
  letter-spacing:.08em !important;
  color:#536071 !important;
}

/* Exam pickers: larger card body, larger name/spec, still four across on
   typical desktop widths. */
#appShell #examGrid.exam-grid,
#appShell #shExamGrid.exam-grid{
  grid-template-columns:repeat(auto-fill,minmax(250px,1fr));
  gap:16px;
}
#appShell #examGrid .exam-btn,
#appShell #shExamGrid .exam-btn{
  min-height:94px;
  padding:20px 20px 18px !important;
  border-radius:14px !important;
}
#appShell .dash-view .exam-btn .eb-name{
  font-size:18px !important;
  line-height:1.3;
  font-weight:700 !important;
  color:#111827;
}
#appShell .dash-view .exam-btn .eb-spec{
  font-family:'IBM Plex Sans','Segoe UI',Arial,sans-serif !important;
  font-size:13.5px !important;
  line-height:1.5;
  font-weight:500;
  color:#586474 !important;
  letter-spacing:0 !important;
  margin-top:8px !important;
}
#appShell .dash-view .exam-btn .eb-spec b{ font-weight:700 !important; }
#appShell .dash-view .exam-btn .eb-fmt{
  font-family:'IBM Plex Sans','Segoe UI',Arial,sans-serif !important;
  font-size:11.5px !important;
  letter-spacing:.04em !important;
}

/* Dictation course cards should visually match the larger exam cards. */
#appShell #shSeriesRow.series-row{ gap:16px; }
#appShell #shSeriesRow .series-btn{
  min-height:132px;
  padding:20px 20px 18px !important;
  border-radius:14px !important;
}
#appShell #shSeriesRow .sb-name{
  font-size:19px !important;
  line-height:1.3;
  font-weight:700 !important;
}
#appShell #shSeriesRow .sb-desc{
  font-family:'IBM Plex Sans','Segoe UI',Arial,sans-serif !important;
  font-size:14.5px !important;
  line-height:1.55;
  color:#4B5563 !important;
}
#appShell #shSeriesRow .sb-tag{
  font-family:'IBM Plex Sans','Segoe UI',Arial,sans-serif !important;
  font-size:11.5px !important;
  letter-spacing:.06em !important;
}

/* Supporting panels/cards inside logged-in views. */
#appShell .exam-spec .spec-title{ font-size:20px !important; }
#appShell .exam-spec p,
#appShell .exam-spec div:not(.spec-title){ font-size:15.5px; line-height:1.6; }
#appShell .lib-row .lr-title{ font-size:16.5px !important; }
#appShell .lib-row .lr-meta,
#appShell .tt-pc-meta,
#appShell .ppi-meta{
  font-family:'IBM Plex Sans','Segoe UI',Arial,sans-serif !important;
  font-size:13px !important;
  color:#667085 !important;
}

/* Keep compact scaling on smaller screens. */
@media (max-width:760px){
  #appShell .dash-h1{ font-size:28px !important; }
  #appShell .dash-h3{ font-size:20px !important; }
  #appShell .dash-sub{ font-size:15px !important; }
  #view-home .dash-card{ min-height:0; padding:22px 20px !important; }
  #view-home .dash-card h3{ font-size:20px !important; }
  #view-home .dash-card p{ font-size:15px !important; }
  #appShell #examGrid.exam-grid,
  #appShell #shExamGrid.exam-grid{ grid-template-columns:1fr; gap:12px; }
  #appShell #examGrid .exam-btn,
  #appShell #shExamGrid .exam-btn{ min-height:84px; padding:18px 17px !important; }
  #appShell #shSeriesRow .series-btn{ min-height:0; }
}

/* ========================================================================
   CONSOLIDATED UX PATCH — 2026-09-21
   Auth layout, account menu, selected-exam contrast and passage empty state.
   ======================================================================== */

/* Auth modal: keep the close control in its own clear header space so it can
   never cover the Log in / Sign up tabs. */
#authModal .auth-modal-box{
  max-width:440px;
  padding:58px 30px 30px;
  max-height:calc(100vh - 40px);
  overflow-y:auto;
}
#authModal .auth-modal-box .modal-close{
  top:14px;
  right:14px;
  z-index:3;
  background:#fff;
  border-color:var(--rule);
  box-shadow:0 1px 3px rgba(16,23,37,.08);
}
#authModal .auth-modal-box .modal-tabs{ margin-top:0; }
#authModal .auth-fields-grid{ display:block; }
#authModal .auth-fields-col{ min-width:0; }
#authModal .auth-modal-box.signup-mode{ max-width:820px; }
#authModal .auth-modal-box.signup-mode .auth-fields-grid{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:0 22px;
  align-items:start;
}
#authModal .auth-modal-box.signup-mode .auth-fields-left,
#authModal .auth-modal-box.signup-mode .auth-fields-right{
  min-width:0;
}
#authModal .auth-modal-box.signup-mode .field{ margin-bottom:16px; }
#authModal .auth-modal-box.signup-mode .modal-title{ font-size:25px; }
#authModal .auth-modal-box.signup-mode .modal-sub{ font-size:14.5px; }
#authModal .auth-modal-box input{
  min-height:48px;
  font-family:'IBM Plex Sans','Segoe UI',Arial,sans-serif;
  font-size:15.5px;
}
@media (max-width:760px){
  #authModal .auth-modal-box,
  #authModal .auth-modal-box.signup-mode{
    max-width:460px;
    padding:56px 20px 24px;
  }
  #authModal .auth-modal-box.signup-mode .auth-fields-grid{ display:block; }
}

/* Logged-in user menu in the top-right corner. */
#appShell .dash-profile-wrap{ position:relative; }
#appShell .dash-user-trigger{
  appearance:none;
  border:0;
  background:transparent;
  padding:5px 6px;
  border-radius:10px;
  cursor:pointer;
  font:inherit;
}
#appShell .dash-user-trigger:hover,
#appShell .dash-user-trigger[aria-expanded="true"]{ background:var(--paper-2); }
#appShell .dash-user-chevron{
  width:16px;
  height:16px;
  fill:none;
  stroke:currentColor;
  stroke-width:2;
  stroke-linecap:round;
  stroke-linejoin:round;
  color:#667085;
  transition:transform .15s ease;
}
#appShell .dash-user-trigger[aria-expanded="true"] .dash-user-chevron{ transform:rotate(180deg); }
#appShell .dash-user-menu{
  position:absolute;
  top:calc(100% + 10px);
  right:0;
  z-index:120;
  width:min(310px,calc(100vw - 28px));
  padding:12px;
  background:#fff;
  border:1px solid var(--rule);
  border-radius:14px;
  box-shadow:0 18px 48px -18px rgba(16,23,37,.35),0 4px 12px rgba(16,23,37,.08);
}
#appShell .dash-user-menu[hidden]{ display:none !important; }
#appShell .dum-head{ display:flex; gap:11px; align-items:center; padding:5px 5px 12px; }
#appShell .dum-avatar{
  width:40px;
  height:40px;
  flex:0 0 40px;
  border-radius:10px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:var(--accent);
  color:#fff;
  font-weight:700;
  font-size:17px;
}
#appShell .dum-name{ font-size:15.5px; font-weight:700; color:#111827; line-height:1.25; }
#appShell .dum-email{ font-size:13px; color:#667085; margin-top:2px; overflow-wrap:anywhere; }
#appShell .dum-plan{
  margin:0 4px 10px;
  padding:8px 10px;
  border-radius:8px;
  background:var(--accent-soft);
  color:var(--accent-2);
  font-size:13px;
  font-weight:600;
}
#appShell .dum-action{
  width:100%;
  display:flex;
  align-items:center;
  min-height:42px;
  padding:9px 10px;
  border:0;
  border-radius:8px;
  background:transparent;
  color:#1F2937;
  font-family:'IBM Plex Sans','Segoe UI',Arial,sans-serif;
  font-size:14.5px;
  font-weight:600;
  text-align:left;
  cursor:pointer;
}
#appShell .dum-action:hover{ background:var(--paper-2); }
#appShell .dum-logout{ color:#9B2C24; }

/* Selected exam cards must keep every requirement readable on the green state. */
#appShell .dash-view .exam-btn.active[class*="tone-"] .eb-name,
#appShell .dash-view .exam-btn.active[class*="tone-"] .eb-spec,
#appShell .dash-view .exam-btn.active[class*="tone-"] .eb-spec b{
  color:#FFFFFF !important;
  opacity:1 !important;
}
#appShell .dash-view .exam-btn.active[class*="tone-"] .eb-fmt{
  color:#FFFFFF !important;
  background:rgba(255,255,255,.18) !important;
  border-color:rgba(255,255,255,.52) !important;
}
#appShell .dash-view .exam-btn.active .eb-name::after{ color:#FFFFFF !important; }

/* Passage selection begins empty instead of silently opening a matter. */
#appShell .tt-pc-empty{
  color:#667085 !important;
  font-style:normal;
  background:#FBFCFD;
}
#appShell #typingStartBtn:disabled{
  opacity:.5;
  cursor:not-allowed;
  box-shadow:none;
}

/* ========================================================================== 
   POST-REVIEW UX FIX — profile overlay + AHC formatting exam controls
   2026-09-21. UI-only; protected external grading/document JS stays frozen.
   ========================================================================== */

/* Keep the profile popover in a real top-layer stacking context so dashboard
   cards rendered later in the document can never paint through it. */
#appShell .dash-topbar{
  position:relative;
  z-index:60;
  overflow:visible;
}
#appShell .dash-profile-wrap{ z-index:61; }
#appShell .dash-user-menu{
  z-index:1000;
  width:min(292px,calc(100vw - 24px));
  padding:10px;
  background:#FFFFFF;
  border:1px solid rgba(16,23,37,.16);
  box-shadow:0 22px 60px -18px rgba(16,23,37,.50),0 8px 20px -10px rgba(16,23,37,.22);
  isolation:isolate;
}
#appShell .dash-user-menu::before{
  content:'';
  position:absolute;
  top:-6px;
  right:22px;
  width:11px;
  height:11px;
  background:#FFFFFF;
  border-left:1px solid rgba(16,23,37,.16);
  border-top:1px solid rgba(16,23,37,.16);
  transform:rotate(45deg);
}
#appShell .dum-head{ padding:3px 4px 8px; }
#appShell .dum-avatar{ width:38px; height:38px; flex-basis:38px; font-size:16px; }
#appShell .dum-name{ font-size:15px; }
#appShell .dum-email{ font-size:12.5px; }
#appShell .dum-plan{
  margin:0 3px 6px;
  padding:6px 9px;
  font-size:12.5px;
}
#appShell .dum-action{
  min-height:36px;
  padding:7px 9px;
  font-size:14px;
}
#appShell .dum-logout{ margin-top:2px; }

/* AHC formatting paper: make the candidate's editor meaningfully larger than
   the read-only master pane. Non-formatting tests retain their existing 50/50. */
#examMode.fmt-mode .exam-pane-top{
  flex:0 1 41%;
  min-height:170px;
  position:relative;
}
#examMode.fmt-mode .exam-pane-bottom{
  flex:1 1 59%;
  min-height:230px;
}
#examMode.fmt-mode .fmt-rich{
  min-height:0;
}

/* Master passage is deliberately not directly mouse/trackpad-scrollable in the
   AHC formatting simulation. The only visible navigation is the controlled
   up/down pair below. */
#examMode.fmt-mode #typingTarget.fmt-master-locked{
  scrollbar-width:none;
  -ms-overflow-style:none;
  overscroll-behavior:none;
  padding-right:34px !important;
}
#examMode.fmt-mode #typingTarget.fmt-master-locked::-webkit-scrollbar{
  width:0;
  height:0;
  display:none;
}
.master-scroll-controls{
  position:absolute;
  z-index:8;
  top:48px;
  right:7px;
  bottom:9px;
  width:24px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:space-between;
  pointer-events:none;
}
.master-scroll-controls[hidden]{ display:none !important; }
.master-scroll-controls::before{
  content:'';
  position:absolute;
  top:20px;
  bottom:20px;
  left:50%;
  width:4px;
  transform:translateX(-50%);
  border-radius:999px;
  background:rgba(16,23,37,.09);
  pointer-events:none;
}
.master-scroll-btn{
  position:relative;
  z-index:1;
  pointer-events:auto;
  width:24px;
  height:24px;
  padding:0;
  display:grid;
  place-items:center;
  border:1px solid rgba(16,23,37,.18);
  border-radius:6px;
  background:#FFFFFF;
  color:#5F6672;
  box-shadow:0 2px 6px rgba(16,23,37,.10);
  font:700 11px/1 'IBM Plex Sans','Segoe UI',sans-serif;
  cursor:pointer;
  user-select:none;
}
.master-scroll-btn:hover:not(:disabled){
  color:var(--accent-2);
  border-color:var(--accent);
  background:var(--accent-soft);
}
.master-scroll-btn:disabled{
  opacity:.32;
  cursor:default;
}

/* Case conversion is a formatting tool, not a keyboard mode. */
#examMode .fmt-case-btn{
  width:42px;
  font-family:'IBM Plex Sans','Segoe UI',sans-serif;
  font-weight:800;
  letter-spacing:-.4px;
}
#examMode .fmt-case-btn.on::after{
  content:'↑';
  font-size:9px;
  margin-left:2px;
  vertical-align:top;
}
#examMode.fmt-mode .fmt-hint{
  margin-left:auto;
  color:#596273;
  font-family:'IBM Plex Sans','Segoe UI',sans-serif;
  font-size:11.5px;
  font-weight:600;
}

@media (max-height:720px){
  #examMode.fmt-mode .exam-pane-top{ flex-basis:39%; min-height:145px; }
  #examMode.fmt-mode .exam-pane-bottom{ flex-basis:61%; min-height:190px; }
  .master-scroll-controls{ top:44px; bottom:7px; }
}


/* ========================================================================
   POST-DEPLOY PUBLIC UI + LEGAL PASS — 2026-09-21
   ======================================================================== */

/* Four-step public path: compact, balanced cards without the oversized blank slab. */
#publicSite #how .steps{align-items:stretch; gap:16px;}
#publicSite #how .step{
  min-height:0 !important;
  padding:20px 20px 18px !important;
  border-radius:14px;
  display:flex;
  flex-direction:column;
  justify-content:flex-start;
}
#publicSite #how .step .stepnum{font-size:34px !important; line-height:1; margin:0 0 14px !important;}
#publicSite #how .step h3{font-size:16px !important; line-height:1.25; margin:0 0 7px !important;}
#publicSite #how .step p{font-size:13.5px !important; line-height:1.5; margin:0 !important;}

/* The six-metric strip should read as a light data panel, not a black slab. */
#publicSite .light-section .wyg-strip{
  background:#FFFFFF !important;
  color:var(--text) !important;
  border:1px solid var(--rule) !important;
  box-shadow:0 1px 2px rgba(16,23,37,.04),0 14px 28px -28px rgba(16,23,37,.28);
  padding:18px 14px !important;
  gap:0 !important;
}
#publicSite .light-section .wyg-strip > div{
  padding:4px 14px;
  border-right:1px solid var(--rule-soft);
}
#publicSite .light-section .wyg-strip > div:last-child{border-right:0;}
#publicSite .light-section .wyg-strip > div::before{display:none !important;}
#publicSite .light-section .wyg-strip b,
#publicSite .light-section .wyg-strip .num{
  color:var(--text) !important;
  -webkit-text-fill-color:var(--text) !important;
  font-size:24px !important;
}
#publicSite .light-section .wyg-strip span,
#publicSite .light-section .wyg-strip .lbl{
  color:var(--text-2) !important;
  font-size:10.5px !important;
  letter-spacing:.075em !important;
}
@media (max-width:700px){
  #publicSite .light-section .wyg-strip{grid-template-columns:repeat(2,minmax(0,1fr)) !important;}
  #publicSite .light-section .wyg-strip > div{border-right:0; border-bottom:1px solid var(--rule-soft); padding:12px 8px;}
  #publicSite .light-section .wyg-strip > div:nth-last-child(-n+2){border-bottom:0;}
}

/* Signup consent: separate from form fields and never visually mistaken for marketing copy. */
#authModal .auth-legal-consent{
  grid-column:1/-1;
  margin:2px 0 13px;
  padding:11px 12px;
  border:1px solid var(--rule);
  border-radius:10px;
  background:var(--paper-2,#F7F6F2);
}
#authModal .auth-legal-row{display:flex;align-items:flex-start;gap:9px;font-size:12.5px;line-height:1.45;color:var(--text-2);}
#authModal .auth-legal-consent input{width:16px;height:16px;margin-top:1px;flex:0 0 auto;accent-color:var(--accent);}
#authModal .auth-legal-copy{min-width:0;}
#authModal .auth-legal-consent a{position:relative;z-index:2;color:var(--accent);font-weight:700;text-decoration:underline;text-underline-offset:2px;cursor:pointer;}
#authModal .auth-legal-consent .field-note{margin:6px 0 0 25px;font-size:10.5px;line-height:1.4;}

/* Five footer columns on wide screens; existing tablet/mobile rules remain compact. */
#publicSite footer .foot-grid{grid-template-columns:1.45fr repeat(4,1fr);gap:26px;}
@media (max-width:900px){#publicSite footer .foot-grid{grid-template-columns:1fr 1fr;}}
@media (max-width:520px){#publicSite footer .foot-grid{grid-template-columns:1fr;gap:22px;}}

/* Legal documents are real clean routes rendered inside the same verified SPA shell. */
#legalCenter{display:none;background:var(--paper);border-top:1px solid var(--line);min-height:60vh;}
body.sc-legal-route #publicSite > section:not(#legalCenter),
body.sc-legal-route #publicSite > .stats-band,
body.sc-legal-route #publicSite > .cta-band{display:none !important;}
body.sc-legal-route #legalCenter{display:block !important;}
body.sc-legal-route #publicSite > footer{display:block !important;}
.legal-wrap{max-width:920px;padding-top:44px;padding-bottom:64px;}
.legal-route-nav{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 28px;padding-bottom:18px;border-bottom:1px solid var(--rule);}
.legal-route-nav a{display:inline-flex;align-items:center;min-height:36px;padding:8px 12px;border:1px solid var(--rule);border-radius:8px;background:#fff;color:var(--text-2);font-size:12px;font-weight:700;text-decoration:none;}
.legal-route-nav a:hover,.legal-route-nav a.active{border-color:var(--accent);color:var(--accent);background:var(--accent-soft);}
.legal-doc{display:none;background:#fff;border:1px solid var(--rule);border-radius:16px;padding:38px 42px;box-shadow:0 1px 2px rgba(16,23,37,.04);}
.legal-doc.active{display:block;}
.legal-doc .legal-kicker{font-family:'IBM Plex Mono',monospace;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);font-weight:700;margin:0 0 6px;}
.legal-doc h1{font-family:'IBM Plex Sans Condensed','IBM Plex Sans',sans-serif;font-size:34px;line-height:1.12;color:var(--text);margin:0 0 5px;letter-spacing:-.02em;}
.legal-doc .legal-updated{font-size:12px;color:var(--text-3);margin:0 0 28px;}
.legal-doc h2{font-family:'IBM Plex Sans Condensed','IBM Plex Sans',sans-serif;font-size:20px;line-height:1.25;color:var(--text);margin:30px 0 9px;}
.legal-doc p,.legal-doc li{font-size:14px;line-height:1.72;color:var(--text-2);}
.legal-doc p{margin:0 0 13px;}
.legal-doc ul{margin:8px 0 16px 20px;padding:0;}
.legal-doc li{margin:5px 0;padding-left:2px;}
.legal-doc a{color:var(--accent);font-weight:600;text-decoration:underline;text-underline-offset:2px;}
.legal-doc b{color:var(--text);}
@media (max-width:700px){
  .legal-wrap{padding-top:24px;padding-bottom:40px;}
  .legal-doc{padding:26px 20px;border-radius:12px;}
  .legal-doc h1{font-size:28px;}
  .legal-doc h2{font-size:18px;margin-top:25px;}
  .legal-doc p,.legal-doc li{font-size:13.5px;line-height:1.68;}
  .legal-route-nav{gap:6px;margin-bottom:18px;}
  .legal-route-nav a{font-size:11.5px;padding:7px 9px;}
}


/* ==========================================================================
   SUBSCRIPTION PLAN PATCH — fixed-duration Pro, plan checkout and admin grant
   ========================================================================== */
#publicSite .logo{color:inherit;text-decoration:none;}
#publicSite .logo:visited{color:inherit;}
.public-plan-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:14px 0 16px;}
.public-plan-card{appearance:none;border:1px solid var(--rule);border-radius:12px;background:#fff;padding:13px 12px;text-align:left;cursor:pointer;color:var(--text);transition:border-color .18s ease,box-shadow .18s ease,transform .18s ease;}
.public-plan-card:hover{border-color:rgba(14,124,102,.55);transform:translateY(-1px);}
.public-plan-card.active{border:2px solid var(--accent);background:var(--accent-soft);box-shadow:0 0 0 3px rgba(14,124,102,.08);padding:12px 11px;}
.public-plan-card .ppc-top{display:flex;justify-content:space-between;align-items:center;gap:6px;margin-bottom:8px;}
.public-plan-card .ppc-top b{font-size:13px;}
.public-plan-card .ppc-top em{font-style:normal;font-size:9.5px;font-weight:800;letter-spacing:.04em;color:var(--text-3);}
.public-plan-card .ppc-top em.save{color:var(--accent);background:rgba(14,124,102,.10);padding:3px 5px;border-radius:999px;}
.public-plan-card strong{display:block;font-family:'IBM Plex Sans Condensed','IBM Plex Sans',sans-serif;font-size:25px;line-height:1;color:var(--text);}
.public-plan-card small{display:block;margin-top:6px;color:var(--text-2);font-size:10.5px;line-height:1.35;}
@media(max-width:640px){.public-plan-grid{grid-template-columns:1fr}.public-plan-card{display:grid;grid-template-columns:1fr auto;align-items:center}.public-plan-card .ppc-top{margin:0}.public-plan-card strong{text-align:right}.public-plan-card small{grid-column:1/-1}}

.sc-pay-modal{width:min(760px,96vw);max-width:760px;max-height:92vh;overflow:auto;}
.sc-checkout-plan-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:18px 0;}
.sc-checkout-plan{appearance:none;border:1px solid var(--rule);border-radius:12px;background:#fff;padding:13px;text-align:left;cursor:pointer;color:var(--text);}
.sc-checkout-plan.active{border:2px solid var(--accent);background:var(--accent-soft);padding:12px;box-shadow:0 0 0 3px rgba(14,124,102,.08);}
.sc-checkout-plan>span{display:flex;justify-content:space-between;gap:6px;align-items:center;margin-bottom:7px;}
.sc-checkout-plan b{font-size:13px}.sc-checkout-plan em{font-style:normal;font-size:9.5px;font-weight:800;color:var(--text-3)}.sc-checkout-plan em.save{color:var(--accent)}
.sc-checkout-plan strong{display:block;font-size:24px;line-height:1.1}.sc-checkout-plan small{display:block;color:var(--text-2);font-size:10.5px;margin-top:4px}
.sc-pay-summary{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:0 0 14px;}
.sc-pay-summary>div{border:1px solid var(--rule-soft);border-radius:10px;padding:10px 11px;background:var(--paper-2,#f8f7f3);}
.sc-pay-summary span{display:block;font-size:10px;text-transform:uppercase;letter-spacing:.06em;color:var(--text-3);margin-bottom:3px}.sc-pay-summary b{font-size:13px;color:var(--text)}
.sc-pay-grid{display:grid;grid-template-columns:210px 1fr;gap:20px;align-items:start;border-top:1px solid var(--rule);padding-top:18px;}
.sc-pay-qr-wrap{text-align:center}.sc-pay-qr-wrap img{display:block;width:190px;height:190px;max-width:100%;margin:0 auto;border:1px solid var(--rule);border-radius:10px;background:#fff;padding:7px}.sc-pay-exact{font-size:10.5px;line-height:1.4;color:var(--text-3);margin-top:7px}
.sc-pay-details{min-width:0}.sc-pay-line{display:flex;justify-content:space-between;gap:12px;padding:10px 0;border-bottom:1px solid var(--rule-soft);font-size:13px}.sc-pay-line span{color:var(--text-3)}.sc-pay-line b{color:var(--text);overflow-wrap:anywhere}.sc-pay-actions{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0}.sc-pay-note{font-size:12px;line-height:1.55;color:var(--text-2);margin:10px 0}.sc-pay-legal{font-size:10.5px;line-height:1.5;color:var(--text-3);margin:15px 0 0;border-top:1px solid var(--rule-soft);padding-top:12px}.sc-pay-legal a{color:var(--accent);font-weight:700}
.admin-plan-action{display:flex;flex-wrap:wrap;gap:6px;align-items:center}.admin-plan-select{min-height:34px;border:1px solid var(--rule);border-radius:7px;background:#fff;padding:5px 7px;color:var(--text);font:inherit;font-size:11px}.admin-grant-btn{background:var(--brass-soft)!important;border-color:rgba(168,116,26,.4)!important;color:var(--brass)!important;}
@media(max-width:640px){.sc-checkout-plan-grid,.sc-pay-summary{grid-template-columns:1fr}.sc-pay-grid{grid-template-columns:1fr}.sc-pay-qr-wrap img{width:175px;height:175px}}


/* ==========================================================================
   POST-SUBSCRIPTION VISUAL HOTFIX — brand/readability/admin password toggle
   ========================================================================== */
#publicSite > header .logo,
#publicSite > header .logo:visited{
  color:#101725 !important;
}
#publicSite > header .logo > span:not(.logo-mark){
  color:#9A6813 !important;
}

/* The Pro card sits on a dark parent, so a translucent active fill became dark.
   Use an opaque light selection surface and explicit foreground colors. */
.ptier--featured .public-plan-card.active{
  background:#E8F4F1 !important;
  color:#101725 !important;
  border-color:#0E7C66 !important;
}
.ptier--featured .public-plan-card.active .ppc-top b,
.ptier--featured .public-plan-card.active strong{
  color:#101725 !important;
}
.ptier--featured .public-plan-card.active small{
  color:#414B60 !important;
}
.ptier--featured .public-plan-card.active .ppc-top em{
  color:#5D6678 !important;
}
.ptier--featured .public-plan-card.active .ppc-top em.save{
  color:#0E7C66 !important;
  background:#D8EEE8 !important;
}

.password-input-wrap{
  position:relative;
}
.password-input-wrap > input{
  width:100%;
  padding-right:46px !important;
}
#adminPassword::-ms-reveal,
#adminPassword::-ms-clear{
  display:none;
}
.password-eye-btn{
  position:absolute;
  top:50%;
  right:9px;
  transform:translateY(-50%);
  width:34px;
  height:34px;
  display:grid;
  place-items:center;
  border:0;
  border-radius:7px;
  background:transparent;
  color:#5D6678;
  cursor:pointer;
}
.password-eye-btn:hover{ background:rgba(16,23,37,.06); color:#101725; }
.password-eye-btn:focus-visible{ outline:2px solid #0E7C66; outline-offset:1px; }
.password-eye-btn svg{ width:19px; height:19px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.password-eye-btn .password-eye-slash{ display:none; }
.password-eye-btn.is-visible .password-eye-slash{ display:block; }


/* ========================================================================
   STANDALONE AUTH ROUTES — 2026-09-21
   /login and /signup remain SPA routes, but render as dedicated full-page
   account views instead of a dialog floating over the marketing homepage.
   ======================================================================== */
body.sc-auth-route{overflow:hidden;}
#authModal.show{
  display:grid;
  grid-template-columns:minmax(280px,360px) minmax(440px,820px);
  grid-template-rows:auto minmax(0,1fr);
  column-gap:clamp(34px,5vw,84px);
  align-items:center;
  justify-content:center;
  padding:24px clamp(24px,5vw,72px) 40px;
  overflow-y:auto;
  background:
    radial-gradient(circle at 14% 18%,rgba(18,134,111,.10),transparent 28%),
    radial-gradient(circle at 88% 78%,rgba(193,139,32,.10),transparent 25%),
    #F7F3E9;
  -webkit-backdrop-filter:none;
  backdrop-filter:none;
}
#authModal::before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  opacity:.32;
  background-image:linear-gradient(rgba(16,23,37,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(16,23,37,.035) 1px,transparent 1px);
  background-size:44px 44px;
}
#authModal .auth-page-brand{
  grid-column:1/-1;
  align-self:start;
  justify-self:start;
  display:inline-flex;
  align-items:center;
  gap:12px;
  position:relative;
  z-index:2;
  color:#101725;
  text-decoration:none;
  padding:6px 2px;
}
#authModal .auth-page-brand:hover{text-decoration:none;}
#authModal .auth-page-logo{width:46px;height:46px;display:block;flex:0 0 auto;filter:drop-shadow(0 2px 3px rgba(16,23,37,.16));}
#authModal .auth-page-logo svg{display:block;width:100%;height:100%;}
#authModal .auth-page-wordmark{font-family:'IBM Plex Serif',Georgia,serif;font-size:29px;font-weight:700;letter-spacing:-.025em;color:#101725;}
#authModal .auth-page-wordmark b{color:#8A5A08;font-weight:700;}
#authModal .auth-page-intro{
  grid-column:1;
  grid-row:2;
  position:relative;
  z-index:1;
  align-self:center;
  color:#101725;
  padding:10px 0 36px;
}
#authModal .auth-page-kicker{font-family:'IBM Plex Mono',monospace;font-size:10.5px;font-weight:700;letter-spacing:.16em;color:#0F7E69;margin-bottom:14px;}
#authModal .auth-page-intro h1{font-family:'IBM Plex Sans Condensed','IBM Plex Sans',sans-serif;font-size:clamp(34px,3.4vw,50px);line-height:1.03;letter-spacing:-.035em;margin:0 0 18px;color:#101725;}
#authModal .auth-page-intro p{font-family:'IBM Plex Sans','Segoe UI',sans-serif;font-size:15.5px;line-height:1.7;color:#536075;margin:0 0 22px;}
#authModal .auth-page-intro ul{list-style:none;margin:0 0 24px;padding:0;display:grid;gap:11px;}
#authModal .auth-page-intro li{position:relative;padding-left:28px;font-size:14px;line-height:1.5;color:#263246;font-weight:600;}
#authModal .auth-page-intro li::before{content:"✓";position:absolute;left:0;top:0;width:19px;height:19px;border-radius:50%;display:grid;place-items:center;background:#DDF3EC;color:#0F7E69;font-size:11px;font-weight:800;}
#authModal .auth-page-note{border-top:1px solid rgba(16,23,37,.12);padding-top:15px;font-family:'IBM Plex Mono',monospace;font-size:10.5px;line-height:1.6;color:#6A7280;}
#authModal .auth-modal-box{
  grid-column:2;
  grid-row:2;
  justify-self:end;
  align-self:center;
  z-index:2;
  width:100%;
  max-width:500px;
  max-height:none;
  margin:18px 0 30px;
  padding:58px 34px 32px;
  overflow:visible;
  border-radius:18px;
  border:1px solid rgba(16,23,37,.12);
  box-shadow:0 2px 5px rgba(16,23,37,.05),0 28px 80px -36px rgba(16,23,37,.38);
}
#authModal .auth-modal-box.signup-mode{max-width:820px;}
#authModal .auth-modal-box .modal-title{font-size:27px;}
#authModal .auth-modal-box .modal-sub{font-size:14.5px;}
#authModal .auth-modal-box .modal-close{background:#fff;}
#authModal .modal-tabs{margin-bottom:26px;}
#authModal .modal-tab{font-size:14px;padding:10px 12px;}
#authModal .auth-legal-consent{background:#F7F3E9;}

@media (max-width:1120px){
  #authModal.show{grid-template-columns:minmax(0,820px);grid-template-rows:auto auto;padding-left:clamp(18px,4vw,44px);padding-right:clamp(18px,4vw,44px);}
  #authModal .auth-page-brand{grid-column:1;}
  #authModal .auth-page-intro{display:none;}
  #authModal .auth-modal-box,#authModal .auth-modal-box.signup-mode{grid-column:1;grid-row:2;justify-self:center;max-width:820px;}
  #authModal .auth-modal-box:not(.signup-mode){max-width:520px;}
}
@media (max-width:760px){
  body.sc-auth-route{overflow:hidden;}
  #authModal.show{display:block;padding:0;background:#F7F3E9;}
  #authModal::before{display:none;}
  #authModal .auth-page-brand{display:flex;margin:0;padding:15px 18px;border-bottom:1px solid rgba(16,23,37,.10);background:rgba(247,243,233,.96);position:sticky;top:0;z-index:5;}
  #authModal .auth-page-logo{width:38px;height:38px;}
  #authModal .auth-page-wordmark{font-size:24px;}
  #authModal .auth-modal-box,#authModal .auth-modal-box.signup-mode{
    display:block;
    width:calc(100% - 24px);
    max-width:none;
    margin:18px auto 28px;
    padding:54px 18px 24px;
    border-radius:14px;
    max-height:none;
    overflow:visible;
  }
  #authModal .auth-modal-box.signup-mode .auth-fields-grid{display:block;}
  #authModal .auth-modal-box .modal-title{font-size:24px;}
}

/* ========================================================================
   TYPING LIVE FEEDBACK RESYNC — 2026-09-21
   AR-style reading flow: completed correct = faded, current = highlighted,
   wrong completed word = isolated red, future text = normal.
   ======================================================================== */
#typingTarget .tc-word-done{
  color:#A19BAD !important;
  background:transparent !important;
  opacity:.72;
}
#typingTarget .tc-word-wrong{
  color:#B42318 !important;
  background:#FEE4E2 !important;
  border-radius:5px;
  box-shadow:inset 0 0 0 1px rgba(180,35,24,.14);
  text-decoration:none !important;
}
#typingTarget .tc-word-pending{
  color:var(--ink-900,#0B0820) !important;
  background:transparent !important;
}
#typingTarget .tc-word-current{
  display:inline;
  color:var(--ink-900,#0B0820) !important;
  background:#FFF1A8 !important;
  border-radius:5px;
  box-shadow:0 0 0 2px rgba(209,154,0,.16);
}
#typingTarget .tc-word-current .tc-current-ok{
  color:#0B0820 !important;
  background:transparent !important;
}
#typingTarget .tc-word-current .tc-current-wrong{
  color:#B42318 !important;
  background:#FFD4D1 !important;
  border-radius:3px;
  box-shadow:inset 0 -2px 0 rgba(180,35,24,.42);
}
#typingTarget .tc-word-current .tc-current-pending{
  color:#0B0820 !important;
  background:transparent !important;
}
#typingTarget .tc-word-current .tc-cursor{
  color:#0B0820 !important;
  background:#FFD34D !important;
  border-radius:3px;
  box-shadow:0 0 0 1px rgba(183,129,0,.28) !important;
  animation:tcBlink 1s step-start infinite;
}
#typingTarget .tc-word-current .tc-cursor-after{
  display:inline-block;
  width:2px;
  min-width:2px;
  margin-left:1px;
  padding:0;
}



/* ========================================================================
   AHC FORMATTING INPUT PARITY — 2026-09-21
   The read-only master and candidate editor intentionally share one document
   type system. Toolbar-applied formatting may differ, but the base paper must
   not change font merely because the text is being typed rather than read.
   ======================================================================== */
#examMode.fmt-mode #typingTarget.fmt-paper,
#examMode.fmt-mode #fmtEditor.fmt-paper{
  font-family:Georgia,'Times New Roman',serif !important;
  font-size:calc(var(--tt-fs,20px) - 3px) !important;
  line-height:2.1 !important;
  letter-spacing:0 !important;
  color:#100C05 !important;
  background:#FFFCF3 !important;
  padding:26px 34px !important;
}
#examMode.fmt-mode #typingTarget.fmt-paper p,
#examMode.fmt-mode #fmtEditor.fmt-paper p,
#examMode.fmt-mode #fmtEditor.fmt-paper div{
  font-family:inherit !important;
  font-size:inherit !important;
  line-height:inherit !important;
  letter-spacing:inherit !important;
  color:inherit;
}

/* ========================================================================
   POST-LAUNCH ADMIN EDITOR + TYPING NAVIGATION FIXES — 2026-09-21
   ======================================================================== */
.cs-judge-editor{display:flex;flex-direction:column;gap:9px;margin-top:2px;}
.cs-judge-list{display:flex;flex-direction:column;gap:8px;}
.cs-judge-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px;align-items:center;}
.cs-judge-row .cs-judge-input{width:100%;min-width:0;}
.cs-judge-add,.cs-judge-remove{border:1px solid rgba(20,16,46,.16);background:#fff;border-radius:9px;min-height:38px;padding:8px 12px;font:600 12.5px 'IBM Plex Sans',sans-serif;cursor:pointer;color:#30294d;}
.cs-judge-add{align-self:flex-start;color:#08775f;border-color:rgba(8,119,95,.28);background:rgba(8,119,95,.055);}
.cs-judge-remove{color:#a33737;}
.cs-judge-remove:disabled{opacity:.35;cursor:not-allowed;}
.cs-judge-add:hover{background:rgba(8,119,95,.1);}
.cs-judge-remove:not(:disabled):hover{background:rgba(179,49,49,.07);}
#typingResults.show{scroll-margin-top:18px;overflow-anchor:none;}
#examMode.fmt-mode #fmtEditor.fmt-paper{white-space:pre-wrap !important;tab-size:4;-moz-tab-size:4;}
@media(max-width:640px){.cs-judge-row{grid-template-columns:1fr}.cs-judge-remove{justify-self:start}}

/* ========================================================================
   ADMIN CONTENT STUDIO — SECTION HEADINGS + PERMANENT DELETE — 2026-09-22
   ======================================================================== */
.sc-doc-heading-field{grid-column:1/-1;margin-top:2px;}
.sc-secondary-section{margin-top:14px;padding-top:14px;border-top:1px solid rgba(22,17,58,.12);}
.sc-secondary-heading-field{margin-bottom:12px !important;}
.sc-secondary-paras-label{display:block;margin:0 0 8px;font-size:12.5px;font-weight:600;color:#5B5480;}
#csSecondaryParaList:empty{display:none;}
#csAddSecondaryParaBtn{margin-top:4px;}
.cs-row-actions .sc-permanent-delete{font-weight:700;background:#fff7f7;border-color:#b42318;color:#b42318;}
.cs-row-actions .sc-permanent-delete:hover{background:#fde8e7;}
.cs-row-actions .sc-permanent-delete:disabled{opacity:.55;cursor:wait;}


/* ========================================================================
   POST-LAUNCH TYPING UX + CONTRAST CONSOLIDATION — 2026-09-22
   Scope: user-requested typing result cleanup, larger AHC master viewport,
   familiar formatting controls, native scrolling, and light-surface contrast.
   No scoring, timer, formatting commands, or corpus behavior changes.
   ======================================================================== */

/* AHC formatting test: reclaim chrome instead of stealing height from Your Typing.
   Hiding the master label grows the actual document viewport within the same pane;
   hiding the footer hint gives the split itself more vertical room. */
#examMode.fmt-mode .exam-pane-top > .exam-pane-label{ display:none !important; }
#examMode.fmt-mode > .exam-hint{ display:none !important; }
#examMode.fmt-mode .exam-split{ padding-bottom:12px; }

/* Native master-passage scrolling. The passage remains independently scrollable,
   now with a familiar draggable thumb and mouse/trackpad wheel support. */
#examMode.fmt-mode #typingTarget{
  overflow-y:auto !important;
  overscroll-behavior:contain;
  scrollbar-width:auto;
  scrollbar-color:#AEB5C0 #F3F1EA;
  padding-right:24px !important;
}
#examMode.fmt-mode #typingTarget::-webkit-scrollbar{ width:11px; }
#examMode.fmt-mode #typingTarget::-webkit-scrollbar-track{ background:#F3F1EA; }
#examMode.fmt-mode #typingTarget::-webkit-scrollbar-thumb{
  background:#AEB5C0;
  border:2px solid #F3F1EA;
  border-radius:999px;
}
#examMode.fmt-mode #typingTarget::-webkit-scrollbar-thumb:hover{ background:#858E9C; }
.master-scroll-controls{ display:none !important; }

/* Word-familiar formatting toolbar: neutral ribbon surface, standard alignment/list
   pictograms, and recognizable grouped controls. Commands/data-fmt stay unchanged. */
#examMode.fmt-mode .fmt-bar{
  background:#F7F6F2;
  border-color:#D5D2CA;
  gap:4px;
  padding:8px 12px;
  align-items:center;
}
#examMode.fmt-mode .fmt-btn{
  width:36px;
  height:34px;
  min-width:36px;
  min-height:34px;
  border:1px solid transparent;
  border-radius:5px;
  background:transparent;
  color:#202735;
  box-shadow:none;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:0 7px;
  font-family:'IBM Plex Sans','Segoe UI',sans-serif;
  font-size:16px;
  line-height:1;
}
#examMode.fmt-mode .fmt-btn:hover{
  background:#E8F0FE;
  border-color:#B9CAE8;
  color:#101725;
  transform:none;
}
#examMode.fmt-mode .fmt-btn.on,
#examMode.fmt-mode .fmt-btn.active{
  background:#DCE9F8;
  border-color:#94B4DA;
  color:#101725;
  box-shadow:inset 0 0 0 1px rgba(16,23,37,.04);
}
#examMode.fmt-mode .fmt-btn svg{
  width:20px;
  height:20px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.8;
  stroke-linecap:round;
  stroke-linejoin:round;
  pointer-events:none;
}
#examMode.fmt-mode .fmt-case-btn{
  width:auto;
  min-width:86px;
  padding:0 10px;
  font-size:12.5px;
  font-weight:700;
  letter-spacing:0;
  white-space:nowrap;
}
#examMode.fmt-mode .fmt-case-btn.on::after{ content:''; margin:0; }
#examMode.fmt-mode .fmt-sep{
  width:1px;
  height:24px;
  margin:0 3px;
  background:#D5D2CA;
  flex:0 0 1px;
}
#examMode.fmt-mode .fmt-number-list{
  gap:3px;
  font-family:'IBM Plex Sans','Segoe UI',sans-serif;
  font-size:8.5px;
  line-height:6px;
  align-items:center;
}
#examMode.fmt-mode .fmt-number-mark{ text-align:right; line-height:6px; }
#examMode.fmt-mode .fmt-number-lines{ font-size:10px; line-height:6px; letter-spacing:1px; }
#examMode.fmt-mode .fmt-script-btn{ font-family:Georgia,serif; font-size:16px; }
#examMode.fmt-mode .fmt-script-btn sup,
#examMode.fmt-mode .fmt-script-btn sub{ font-size:10px; line-height:0; }

/* Readability/contrast pass for light StenoCore surfaces. The retired palette left
   several light lavender/white text tokens on white/cream panels (e.g. sync status,
   placeholders and helper copy). These values are all >= ~4.5:1 on the site's
   white/paper surfaces while preserving the same hierarchy. */
#appShell .sync-badge{
  color:#414B60 !important;
  background:#F0EDF8 !important;
  border-color:#C7BEDA !important;
  font-weight:600;
}
#appShell .sync-badge.offline{
  color:#7A4E08 !important;
  background:#FFF5DB !important;
  border-color:#D7B96F !important;
}
#appShell input::placeholder,
#appShell textarea::placeholder,
#authModal input::placeholder,
#authModal textarea::placeholder,
.modal-overlay input::placeholder,
.modal-overlay textarea::placeholder,
.cs-toolbar input[type="text"]::placeholder,
.cs-editor-body input::placeholder,
.cs-editor-body textarea::placeholder{
  color:#5D6678 !important;
  opacity:1 !important;
}
#appShell .fmt-hint,
#appShell .rdy-scope,
#appShell .rb-na,
#appShell .mist-item .arrow,
#appShell .news-meta,
#appShell .cheer-stat .l{
  color:#5D6678 !important;
}
#appShell .rdy-req .rq-need,
#appShell .rdy-req .rq-have,
#appShell .rdy-req-note{
  color:#4B5565 !important;
}
#appShell button:disabled,
#appShell input:disabled,
#appShell select:disabled,
#appShell textarea:disabled,
.cs-editor-body input:disabled,
.cs-editor-body select:disabled,
.cs-editor-body textarea:disabled{
  color:#667085 !important;
  opacity:.78;
}
.reset-note.ok{ color:#0A5F4E !important; }
.reset-note.err{ color:#8F1D16 !important; }
#cheerOverlay .cheer-stat .l{ color:#5D6678 !important; }
#cheerOverlay .cheer-msg,
#cheerOverlay .cheer-tip{ color:#414B60 !important; }

/* Empty typing-result action row should not reserve any visual space. Welcome and
   shorthand cheers still render their own actions normally. */
#cheerActions:empty{ display:none; }
/* Remaining light-surface placeholder/meta cases outside #appShell. */
#typingInputBox::placeholder,
#shExamInput::placeholder,
#publicSite .light-section input::placeholder,
#publicSite .light-section textarea::placeholder{
  color:#5D6678 !important;
  opacity:1 !important;
}
#examMode .fmt-rich:empty::before{ color:#5D6678 !important; }
#publicSite .light-section .news-meta{ color:#5D6678 !important; }

/* ========================================================================== 
   STENOCORE BRAND MARK — approved book + fountain-nib identity
   2026-09-23 V2 REBASE: branding only, layered on the accepted typing UX build.
   ========================================================================== */
.logo-mark,
.dash-logo .logo-mark{
  border:0 !important;
  border-radius:0 !important;
  background:transparent !important;
  box-shadow:none !important;
  overflow:visible !important;
  color:inherit !important;
  display:inline-flex !important;
  align-items:center;
  justify-content:center;
}
.logo-mark::after{ display:none !important; content:none !important; }
.logo-mark .stenocore-brand-mark,
.auth-page-logo .stenocore-brand-mark{
  width:100%;
  height:100%;
  display:block;
  object-fit:contain;
}
#publicSite > header .logo-mark{ width:48px !important; height:48px !important; }
.dash-logo .logo-mark{ width:36px !important; height:36px !important; }
.logo.sm .logo-mark{ width:36px !important; height:36px !important; }
#authModal .auth-page-logo{
  width:52px !important;
  height:52px !important;
  filter:drop-shadow(0 2px 3px rgba(16,23,37,.10)) !important;
}
@media (max-width:560px){
  #publicSite > header .logo-mark{ width:40px !important; height:40px !important; }
  .dash-logo .logo-mark{ width:34px !important; height:34px !important; }
  #authModal .auth-page-logo{ width:42px !important; height:42px !important; }
}