/* UI Structure Plan
       1) Keep logic IDs stable, upgrade visual system only.
       2) Header = brand + status + actions (theme/login/logout + role segmented).
       3) Bottom nav = primary nav; role-aware items; fixed safe-area aware.
       4) Home = dashboard cards (daily, quick stats, leaderboard).
       5) N5 = segmented-like mode buttons + finder + pager + polished cards.
       6) Stats screen = intentional student/teacher stats layouts.
       7) Preserve auth/routing/kana/n5 features; mobile-first responsive behavior.
    */
    :root{
      --bg:#f2f5f3;
      --card:#ffffff;
      --text:#1b2431;
      --muted:#607185;
      --border:rgba(27,36,49,.13);
      --chip:#e7eef9;
      --good:#067647;
      --bad:#b42318;
      --shadow: 0 12px 28px rgba(12,23,38,.09);
      --ring:#15212f;
      --radius:18px;
      --radius-sm:14px;
      --focus:0 0 0 3px rgba(37,99,235,.24);
      --surface-1:linear-gradient(180deg,rgba(255,255,255,.94) 0%, rgba(255,255,255,.9) 100%);
    }
    body.dark{
      --bg:#0f1520;
      --card:#162131;
      --text:#f8fafc;
      --muted:#aab8cb;
      --border:rgba(255,255,255,.10);
      --chip:rgba(120,146,186,.20);
      --shadow: 0 10px 30px rgba(0,0,0,.35);
      --ring:#e5e7eb;
      --surface-1:linear-gradient(180deg,rgba(22,33,49,.94) 0%, rgba(19,30,45,.9) 100%);
    }
    *{box-sizing:border-box}
    body{
      margin:0;
      font-family:"Solway", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
      background:
        radial-gradient(1200px 500px at 50% -120px, color-mix(in srgb, var(--chip) 42%, transparent), transparent 70%),
        var(--bg);
      color:var(--text);
    }
    .brand b,.tab,.bottomNavBtn,.btn,.card h3,.roleSegBtn{
      font-family:"Solway", ui-serif, Georgia, serif;
    }
    .wrap{
      max-width:1080px;
      margin:0 auto;
      padding:14px 14px calc(112px + env(safe-area-inset-bottom));
    }
    .topbar{
      display:flex; gap:12px; align-items:center; justify-content:space-between;
      padding:10px 12px; border:1px solid var(--border);
      border-radius:var(--radius); background:var(--card); box-shadow:var(--shadow);
      position:sticky; top:10px; z-index:80;
      backdrop-filter:blur(6px);
    }
    .brand{display:flex;flex-direction:column;gap:2px}
    .brand b{letter-spacing:.2px;font-size:19px}
    .pill{font-size:12px;color:var(--muted)}
    .btn{
      appearance:none;border:1px solid var(--border);
      background:var(--card); color:var(--text);
      border-radius:999px; padding:10px 14px;
      cursor:pointer; font-weight:700;
      min-height:44px;
      touch-action:manipulation;
      transition:transform .14s ease, box-shadow .18s ease, background-color .18s ease;
    }
    .btn:hover{filter:brightness(.98);transform:translateY(-1px);box-shadow:0 8px 18px rgba(14,24,38,.08)}
    .btn.primary{background:var(--chip);border-color:transparent}
    .btn.small{padding:8px 12px;min-height:40px;font-weight:800}
    .btn.danger{border-color:rgba(180,35,24,.25); color:var(--bad)}
    .row{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
    .headerActions{
      display:flex;
      align-items:center;
      gap:8px;
      flex-wrap:wrap;
      justify-content:flex-end;
    }
    .roleSeg{
      display:inline-grid;
      grid-template-columns:repeat(2,minmax(0,1fr));
      gap:4px;
      padding:4px;
      border:1px solid var(--border);
      border-radius:999px;
      background:var(--card);
      min-height:44px;
    }
    .roleSegBtn{
      border:1px solid transparent;
      border-radius:999px;
      min-height:34px;
      padding:0 10px;
      font-weight:800;
      font-size:12px;
      color:var(--muted);
      background:transparent;
      cursor:pointer;
      min-width:78px;
      touch-action:manipulation;
    }
    .roleSegBtn.active{
      background:var(--chip);
      color:var(--text);
      border-color:transparent;
    }
    .roleSegBtn:disabled{
      opacity:.45;
      cursor:not-allowed;
    }
    button:focus-visible,.btn:focus-visible,.tab:focus-visible,.choice:focus-visible,.seg:focus-visible,.bottomNavBtn:focus-visible,.input:focus-visible,.teacherStudentRowBtn:focus-visible{
      outline:none;
      box-shadow:var(--focus);
    }

    .tabs{
      display:flex; gap:10px; flex-wrap:wrap;
      margin-top:14px;
    }
    .tab{
      padding:14px 20px;
      border-radius:999px;
      border:1px solid var(--border);
      background:var(--card);
      font-size:15px;
      font-weight:800;
      color:var(--muted);
      cursor:pointer;
      min-height:50px;
      min-width:120px;
      line-height:1;
      display:flex;align-items:center;justify-content:center;
    }
    .tab.active{color:var(--text); border-color:transparent; background:var(--chip)}
    .tab.locked{opacity:.70}
    .tab.locked::after{
      content:"SOON";
      margin-left:10px;
      font-size:11px;
      font-weight:900;
      letter-spacing:.10em;
      padding:6px 10px;
      border-radius:999px;
      border:1px solid var(--border);
      background:var(--card);
      color:var(--muted);
    }
    #tabs{display:none !important}
    #bottomNav{
      position:fixed;
      left:0;
      right:0;
      bottom:0;
      z-index:40;
      display:flex;
      justify-content:center;
      padding:10px 12px calc(10px + env(safe-area-inset-bottom));
      pointer-events:none;
    }
    #bottomNav .bottomNavBar{
      pointer-events:auto;
      width:min(980px,100%);
      display:grid;
      grid-template-columns:repeat(5,minmax(0,1fr));
      gap:8px;
      padding:8px;
      border:1px solid var(--border);
      border-radius:20px;
      background:color-mix(in srgb, var(--card) 88%, transparent);
      box-shadow:var(--shadow);
      backdrop-filter:blur(8px);
    }
    .bottomNavBtn{
      min-height:44px;
      border-radius:999px;
      border:1px solid var(--border);
      background:var(--card);
      color:var(--muted);
      font-weight:800;
      cursor:pointer;
      padding:8px 10px;
      font-size:13px;
      white-space:nowrap;
    }
    .bottomNavBtn.active{
      color:var(--text);
      border-color:transparent;
      background:var(--chip);
    }
    .bottomNavBtn:hover{transform:translateY(-1px)}
    .bottomNavBtn[hidden]{display:none !important}

    .grid{
      display:grid; grid-template-columns: 1.1fr .9fr; gap:14px;
      margin-top:14px;
    }
    @media (max-width:900px){ .grid{grid-template-columns:1fr} }

    .card{
      border:1px solid var(--border);
      background:var(--surface-1);
      border-radius:var(--radius);
      padding:14px;
      box-shadow:var(--shadow);
      animation:fadeUp .28s ease;
      transition:transform .18s ease, box-shadow .2s ease, border-color .2s ease;
    }
    .card:hover{
      transform:translateY(-2px);
      box-shadow:0 16px 34px rgba(9,20,36,.12);
      border-color:color-mix(in srgb, var(--border) 65%, var(--text) 35%);
    }
    .card h3{margin:0 0 8px 0;font-size:14px;color:var(--muted);font-weight:900;letter-spacing:.08em;text-transform:uppercase}
    .homeGrid{
      display:grid;
      grid-template-columns:1.15fr .85fr;
      gap:14px;
      margin-top:14px;
    }
    .homeGrid .span2{grid-column:1 / -1}
    .homePremiumGrid{
      display:grid;
      grid-template-columns:1.2fr .8fr;
      gap:14px;
      margin-top:14px;
    }
    .homeSpanAll{grid-column:1 / -1}
    .homeHero{
      background:
        linear-gradient(125deg,
          color-mix(in srgb, var(--chip) 44%, var(--card) 56%) 0%,
          color-mix(in srgb, var(--card) 85%, transparent) 58%,
          color-mix(in srgb, var(--chip) 22%, var(--card) 78%) 100%);
    }
    .homeHeroInner{
      display:flex;
      align-items:flex-start;
      justify-content:space-between;
      gap:14px;
      flex-wrap:wrap;
    }
    .homeHeroTitle{
      font-size:28px;
      line-height:1.15;
      font-weight:950;
      letter-spacing:-.02em;
      margin-top:4px;
      font-family:"Solway", ui-serif, Georgia, serif;
    }
    .homeHeroSub{
      margin-top:8px;
      color:var(--muted);
      font-size:13px;
      line-height:1.45;
    }
    .homeProgressCard .ringWrap{
      align-items:flex-start;
    }
    .homeStatHeadline{
      font-size:20px;
      font-weight:950;
      letter-spacing:-.01em;
    }
    .homeActionGrid{
      display:grid;
      grid-template-columns:repeat(3,minmax(0,1fr));
      gap:8px;
    }
    .homeRecommendRow{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:10px;
      flex-wrap:wrap;
    }
    .big{
      font-size:64px; font-weight:950; letter-spacing:-1px;
      text-align:center; padding:10px 0;
    }
    .hint{color:var(--muted);font-size:13px;line-height:1.4}
    .choices{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-top:10px}
    @media(min-width:740px){ .choices{grid-template-columns:repeat(3,1fr)} }
    .choice{
      border:1px solid var(--border);
      border-radius:14px;
      padding:12px;
      min-height:46px;
      font-weight:900;
      background:var(--card);
      cursor:pointer;
    }
    .choice:hover{filter:brightness(.98)}
    .choice.good{border-color:rgba(6,118,71,.35)}
    .choice.bad{border-color:rgba(180,35,24,.35)}
    .feedback{margin-top:10px;font-weight:900}
    .feedback.good{color:var(--good)}
    .feedback.bad{color:var(--bad)}
    .divider{height:1px;background:var(--border);margin:12px 0}

    .segrow{display:flex;gap:8px;flex-wrap:wrap}
    .seg{
      border:1px solid var(--border);
      background:var(--card);
      padding:10px 12px;
      border-radius:999px;
      cursor:pointer;
      font-weight:900;
      color:var(--muted);
      min-height:44px;
    }
    .seg.active{background:var(--chip);border-color:transparent;color:var(--text)}

    /* Ring */
    .ringWrap{display:flex;gap:14px;align-items:center}
    .ring{
      width:96px;
      height:96px;
      border-radius:999px;
      position:relative;
      display:grid;
      place-items:center;
      background:
        conic-gradient(var(--ring) var(--progress, 0deg),
        color-mix(in srgb, var(--border) 60%, transparent) 0deg);
      border:1px solid color-mix(in srgb, var(--border) 70%, transparent);
      box-shadow:
        inset 0 2px 6px rgba(0,0,0,.06),
        0 6px 16px rgba(0,0,0,.06);
    }
    body.dark .ring{
      background:
        conic-gradient(var(--ring) var(--progress, 0deg),
        rgba(255,255,255,.08) 0deg);
      box-shadow:
        inset 0 2px 6px rgba(0,0,0,.4),
        0 6px 18px rgba(0,0,0,.4);
    }
    .ringInner{
      width:74px;
      height:74px;
      border-radius:999px;
      background:
        linear-gradient(180deg,
          color-mix(in srgb, var(--card) 96%, white 4%) 0%,
          var(--card) 100%);
      border:1px solid color-mix(in srgb, var(--border) 70%, transparent);
      display:grid;
      place-items:center;
      font-weight:950;
      font-size:14px;
      box-shadow:
        inset 0 1px 3px rgba(0,0,0,.05);
    }
    .ring::after{
      content:"";
      position:absolute;
      inset:-6px;
      border-radius:999px;
      background:radial-gradient(circle,
        color-mix(in srgb, var(--ring) 18%, transparent) 0%,
        transparent 70%);
      z-index:-1;
    }

    .toast{
      position:fixed; left:50%; bottom:22px;
      transform:translateX(-50%);
      background:var(--card);
      border:1px solid var(--border);
      box-shadow:var(--shadow);
      border-radius:14px;
      padding:12px 14px;
      min-width:280px;
      display:none;
      z-index:99;
    }
    .toast b{display:block;margin-bottom:2px}
    .toast span{color:var(--muted);font-size:13px}
    .miniList{display:flex;flex-wrap:wrap;gap:8px}
    .miniTag{
      border:1px solid var(--border);
      border-radius:999px;
      padding:8px 10px;
      background:color-mix(in srgb, var(--card) 90%, var(--chip) 10%);
      font-weight:900;
      font-size:12px;
      color:var(--muted);
    }
    .listItem{
      border:1px solid var(--border);
      border-radius:var(--radius-sm);
      padding:12px;
      background:var(--card);
      display:flex;justify-content:space-between;gap:10px;align-items:center;
      min-height:86px;
    }
    .listItem b{font-weight:950}
    .muted{color:var(--muted)}
    a, a:visited{color:inherit}
    .settingsGrid{
      display:grid;
      grid-template-columns:repeat(2,minmax(0,1fr));
      gap:14px;
    }
    .input{
      width:100%;
      min-height:44px;
      border-radius:12px;
      border:1px solid var(--border);
      background:var(--card);
      color:var(--text);
      padding:10px 12px;
      transition:border-color .18s ease, box-shadow .18s ease;
    }
    .input::placeholder{color:var(--muted)}
    .input:focus{
      border-color:transparent;
      box-shadow:var(--focus);
    }
    .note{
      font-size:12px;
      color:var(--muted);
      line-height:1.4;
    }
    .bars{
      margin-top:10px;
      display:grid;
      grid-template-columns:repeat(7,minmax(0,1fr));
      gap:8px;
      align-items:end;
    }
    .barCol{display:flex;flex-direction:column;align-items:center;gap:6px}
    .barTrack{
      width:100%;
      height:70px;
      border-radius:10px;
      border:1px solid var(--border);
      background:var(--card);
      display:flex;
      align-items:flex-end;
      overflow:hidden;
    }
    .barFill{
      width:100%;
      background:linear-gradient(180deg,#2f6cbf 0%, #7ea7dc 100%);
      min-height:2px;
    }
    .barLbl{
      font-size:11px;
      color:var(--muted);
      font-weight:700;
    }
    .sparkWrap{
      margin-top:12px;
      border:1px solid var(--border);
      border-radius:14px;
      background:var(--card);
      padding:8px;
    }
    .sparkSvg{
      width:100%;
      height:74px;
      display:block;
    }
    .progressTrack{
      width:100%;
      height:10px;
      border-radius:999px;
      border:1px solid var(--border);
      background:var(--card);
      overflow:hidden;
      margin-top:8px;
    }
    .progressFill{
      height:100%;
      width:0%;
      background:linear-gradient(90deg,#2f6cbf 0%, #7ea7dc 100%);
      transition:width .24s ease;
    }
    .badgeHistory{
      margin-top:10px;
      display:flex;
      flex-direction:column;
      gap:8px;
    }
    .winnerMain{
      font-size:18px;
      font-weight:900;
      letter-spacing:.01em;
    }
    .winnerMeta{
      margin-top:6px;
      color:var(--muted);
      font-size:13px;
    }
    .pager{
      display:flex;
      align-items:center;
      gap:8px;
      margin-bottom:10px;
      flex-wrap:wrap;
      justify-content:flex-end;
    }
    .finderRow{
      display:flex;
      gap:8px;
      align-items:center;
      margin-bottom:10px;
      flex-wrap:wrap;
    }
    .n5ModeRow{
      display:grid;
      grid-template-columns:repeat(4,minmax(0,1fr));
      gap:8px;
    }
    .n5TopMode{
      display:flex;
      gap:8px;
      flex-wrap:wrap;
      margin-bottom:10px;
    }
    .panelHeader{
      position:sticky;
      top:0;
      z-index:2;
      background:var(--surface-1);
      margin:-14px -14px 12px -14px;
      padding:14px 14px 12px;
      border-bottom:1px solid var(--border);
      border-radius:var(--radius) var(--radius) 0 0;
    }
    .panelHeader .hint{margin-top:4px}
    .segGroup{
      margin-top:10px;
      display:grid;
      grid-template-columns:repeat(4,minmax(0,1fr));
      gap:6px;
      padding:6px;
      border:1px solid var(--border);
      border-radius:999px;
      background:var(--card);
    }
    .segGroup .btn.small{
      min-height:38px;
      border-radius:999px;
      padding:7px 10px;
      box-shadow:none;
      font-size:12px;
      font-weight:900;
    }
    .segGroup .btn.small:not(.primary){
      background:transparent;
      color:var(--muted);
    }
    /* N5 workspace */
    .practiceHeader{
      display:flex;
      align-items:flex-start;
      justify-content:space-between;
      gap:16px;
      padding-bottom:6px;
    }
    .practiceHeaderLeft{
      display:flex;
      flex-direction:column;
      gap:6px;
      min-width:0;
    }
    .practiceTitle{
      font-size:28px;
      font-weight:950;
      letter-spacing:-.02em;
      margin:0;
      font-family:"Solway", ui-serif, Georgia, serif;
    }
    .practiceSub{
      font-size:14px;
      color:var(--muted);
      line-height:1.55;
      margin:0;
      max-width:62ch;
    }
    .practiceActions{
      display:grid;
      grid-template-columns:1fr;
      gap:12px;
      margin-top:18px;
    }
    .practicePrimaryRow{
      display:grid;
      grid-template-columns:repeat(3,minmax(0,1fr));
      gap:8px;
    }
    .practiceSecondaryRow{
      display:flex;
      gap:12px;
      flex-wrap:wrap;
      align-items:center;
      justify-content:space-between;
      margin-top:0;
    }
    .practiceSection{
      margin-top:12px;
      padding-top:10px;
      border-top:1px solid var(--border);
    }
    .practiceChip{
      display:inline-flex;
      align-items:center;
      gap:6px;
      padding:8px 12px;
      border-radius:999px;
      border:1px solid var(--border);
      background:color-mix(in srgb, var(--card) 92%, var(--chip) 8%);
      font-weight:900;
      font-size:12px;
      color:var(--muted);
      font-family:"Solway", ui-serif, Georgia, serif;
    }
    .miniLinkBtn{
      border:none;
      background:transparent;
      color:var(--muted);
      font-weight:900;
      cursor:pointer;
      padding:8px 10px;
      border-radius:999px;
      font-family:"Solway", ui-serif, Georgia, serif;
      white-space:nowrap;
    }
    .miniLinkBtn:hover{
      background:color-mix(in srgb, var(--card) 70%, var(--chip) 30%);
      color:var(--text);
    }
    .practiceDrawer{
      border:1px solid var(--border);
      border-radius:24px;
      background:
        linear-gradient(180deg,
          color-mix(in srgb, var(--card) 98%, var(--chip) 2%) 0%,
          color-mix(in srgb, var(--card) 95%, var(--chip) 5%) 100%);
      padding:18px;
      margin-top:14px;
      box-shadow:0 18px 32px rgba(14,24,38,.05);
    }
    .tierPyramid {
      margin-top:16px;
      display:flex;
      flex-direction:column;
      align-items:center;
      gap:8px;
      position:relative;
    }
    .tierRow {
      display:flex;
      gap:10px;
    }
    .tierRow.current .tierCircle.active{
      box-shadow:0 0 14px rgba(0,0,0,.10);
      animation:tierGlow 1.4s ease-in-out infinite;
    }
    .tierCircle {
      appearance:none;
      padding:0;
      width:18px;
      height:18px;
      border-radius:999px;
      border:1px solid var(--border);
      background:var(--card);
      transition:all .2s ease;
      cursor:pointer;
    }
    .tierCircle.active {
      background:var(--chip);
      border-color:transparent;
      box-shadow:0 0 12px rgba(0,0,0,.08);
    }
    .tierCircle.locked {
      opacity:.35;
    }
    .tierTooltip{
      position:absolute;
      bottom:-34px;
      left:50%;
      transform:translateX(-50%);
      border:1px solid var(--border);
      background:var(--card);
      color:var(--text);
      border-radius:999px;
      padding:6px 10px;
      font-size:11px;
      font-weight:800;
      box-shadow:var(--shadow);
      white-space:nowrap;
      pointer-events:none;
      opacity:0;
      transition:opacity .16s ease;
      z-index:2;
    }
    .tierTooltip.show{opacity:1}
    .tierPyramid.tierUpgrade{
      animation:tierUpgradePulse .36s ease;
    }
    @keyframes tierGlow{
      0%,100%{box-shadow:0 0 10px rgba(0,0,0,.08)}
      50%{box-shadow:0 0 16px rgba(0,0,0,.14)}
    }
    @keyframes tierUpgradePulse{
      0%{transform:scale(.98)}
      100%{transform:scale(1)}
    }
    .n5PracticeChoices{
      display:grid;
      grid-template-columns:repeat(2,minmax(0,1fr));
      gap:10px;
      margin-top:10px;
    }
    .n5PracticePrompt{
      font-size:48px;
      font-weight:900;
      text-align:center;
      line-height:1.1;
      margin-top:8px;
    }
    .n5PracticeFeedback{
      margin-top:10px;
      font-weight:900;
    }
    .n5PracticeFeedback.good{color:var(--good)}
    .n5PracticeFeedback.bad{color:var(--bad)}
    .n5ModeRow .btn{border-radius:12px}
    #n5ContentCard #n5PracticePanel{
      margin-top:0;
    }
    #n5MainGrid{
      justify-items:center;
      margin-top:18px;
    }
    #n5ContentCard{
      width:min(1040px,100%);
      margin-inline:auto;
      background:
        linear-gradient(180deg,
          color-mix(in srgb, var(--card) 99%, var(--chip) 1%) 0%,
          color-mix(in srgb, var(--card) 97%, var(--chip) 3%) 100%);
    }
    .n5HeaderShell{
      display:flex;
      flex-direction:column;
      gap:20px;
    }
    .n5HeaderShell h3{
      margin:0;
      font-size:36px;
      line-height:1;
      letter-spacing:-.03em;
    }
    .n5HeroMain{
      display:flex;
      align-items:flex-start;
      justify-content:space-between;
      gap:18px;
    }
    .n5HeroCopy{
      display:flex;
      flex-direction:column;
      gap:8px;
      min-width:0;
      max-width:56ch;
    }
    .n5HeaderEyebrow,
    .n5MetaLabel,
    .n5StepNumber,
    .n5SetupLabel,
    .n5WorkspaceEyebrow,
    .n5FlowBadge,
    .n5ExamFactLabel{
      font-size:11px;
      font-weight:900;
      letter-spacing:.08em;
      text-transform:uppercase;
      color:var(--muted);
    }
    .n5HeaderHint{
      font-size:15px;
      line-height:1.55;
      max-width:48ch;
    }
    .n5HeroTools{
      display:flex;
      align-items:flex-start;
      justify-content:flex-end;
      gap:12px;
      flex-wrap:wrap;
      min-width:min(430px,100%);
    }
    .n5StatusCard{
      min-width:min(360px,100%);
      display:flex;
      flex-direction:column;
      gap:6px;
      padding:16px 18px;
      border:1px solid var(--border);
      border-radius:22px;
      background:
        linear-gradient(180deg,
          color-mix(in srgb, var(--card) 99%, var(--chip) 1%) 0%,
          color-mix(in srgb, var(--card) 97%, var(--chip) 3%) 100%);
      box-shadow:0 10px 18px rgba(14,24,38,.04);
    }
    .n5StatusHeadline{
      font-size:16px;
      font-weight:900;
      line-height:1.35;
    }
    .n5StatusCounts{
      line-height:1.5;
      white-space:normal;
    }
    .n5QuietAction{
      background:transparent;
      box-shadow:none;
      color:var(--muted);
      min-height:46px;
    }
    .n5ControlGrid{
      display:grid;
      grid-template-columns:minmax(0,1fr) minmax(0,1.12fr);
      gap:16px;
    }
    .n5StepCard{
      display:flex;
      flex-direction:column;
      justify-content:flex-start;
      gap:10px;
      min-width:0;
      padding:18px;
      border:1px solid var(--border);
      border-radius:24px;
      background:
        linear-gradient(180deg,
          color-mix(in srgb, var(--card) 99%, var(--chip) 1%) 0%,
          color-mix(in srgb, var(--card) 97%, var(--chip) 3%) 100%);
      box-shadow:0 10px 20px rgba(14,24,38,.04);
      transition:transform .16s ease, box-shadow .18s ease, border-color .18s ease;
    }
    .n5StepCard:hover{
      transform:translateY(-1px);
      box-shadow:0 18px 28px rgba(14,24,38,.06);
    }
    .n5StepHeading{
      font-size:20px;
      font-weight:950;
      letter-spacing:-.01em;
      font-family:"Solway", ui-serif, Georgia, serif;
    }
    .n5StepSupporting{
      font-size:13px;
      line-height:1.5;
      color:var(--muted);
      max-width:40ch;
    }
    .n5CategorySeg{
      margin-top:2px;
      gap:10px;
      padding:10px;
      background:color-mix(in srgb, var(--card) 94%, var(--chip) 6%);
    }
    .n5CategorySeg .btn.small,
    .n5SetRow .btn.small,
    .n5ExamEntryGrid .btn.small,
    .n5StageActions .btn.small,
    #n5QuizActionRow .btn.small,
    #n5QuizActionRow .miniLinkBtn,
    .n5HeroTools .btn.small{
      display:flex;
      align-items:center;
      justify-content:center;
      min-width:0;
      max-width:100%;
      overflow:hidden;
      text-overflow:ellipsis;
      white-space:nowrap;
      text-align:center;
    }
    .n5CategorySeg .btn.small{
      width:100%;
      min-height:52px;
      font-size:14px;
      padding:11px 16px;
    }
    .n5InlineActionRow{
      display:grid;
      grid-template-columns:repeat(4,minmax(0,1fr));
      gap:12px;
      align-items:stretch;
    }
    .n5ActionBtn{
      display:flex;
      flex-direction:column;
      align-items:center;
      justify-content:center;
      gap:6px;
      min-width:0;
      width:100%;
      min-height:96px;
      padding:16px 14px;
      border-radius:22px;
      text-align:center;
      overflow:hidden;
      background:
        linear-gradient(180deg,
          color-mix(in srgb, var(--card) 99%, var(--chip) 1%) 0%,
          color-mix(in srgb, var(--card) 94%, var(--chip) 6%) 100%);
      box-shadow:none;
    }
    .n5ActionBtn:hover{
      transform:translateY(-1px);
    }
    .n5ActionBtnTitle{
      display:block;
      width:100%;
      font-size:15px;
      font-weight:950;
      line-height:1.2;
      color:var(--text);
      overflow:hidden;
      text-overflow:ellipsis;
      white-space:nowrap;
    }
    .n5ActionBtnHint{
      display:block;
      width:100%;
      font-size:12px;
      font-weight:700;
      line-height:1.4;
      color:var(--muted);
      max-width:none;
      overflow:hidden;
      text-overflow:ellipsis;
      white-space:nowrap;
    }
    .n5ActionBtn.primary{
      box-shadow:0 18px 28px rgba(14,24,38,.08);
    }
    .n5Workspace{
      margin-top:2px;
    }
    .n5WorkspaceShell{
      display:grid;
      grid-template-columns:220px minmax(0,1fr);
      gap:18px;
      align-items:start;
    }
    .n5FlowRail{
      display:flex;
      flex-direction:column;
      gap:12px;
    }
    .n5FlowCard{
      display:flex;
      flex-direction:column;
      gap:8px;
      padding:16px;
      border:1px solid var(--border);
      border-radius:22px;
      background:
        linear-gradient(180deg,
          color-mix(in srgb, var(--card) 99%, var(--chip) 1%) 0%,
          color-mix(in srgb, var(--card) 97%, var(--chip) 3%) 100%);
      box-shadow:0 9px 18px rgba(14,24,38,.04);
    }
    .n5FlowCardPrimary{
      background:
        linear-gradient(180deg,
          color-mix(in srgb, var(--card) 98%, var(--chip) 2%) 0%,
          color-mix(in srgb, var(--card) 95%, var(--chip) 5%) 100%);
    }
    .n5FlowTitle{
      font-size:18px;
      font-weight:950;
      letter-spacing:-.01em;
      font-family:"Solway", ui-serif, Georgia, serif;
    }
    .n5FlowHint{
      font-size:13px;
      line-height:1.5;
      color:var(--muted);
    }
    .n5WorkspaceMain{
      display:flex;
      flex-direction:column;
      gap:14px;
      min-width:0;
    }
    .n5WorkspaceSurface{
      border:1px solid var(--border);
      border-radius:28px;
      background:
        radial-gradient(220px 120px at 100% 0%, color-mix(in srgb, var(--chip) 7%, transparent), transparent 72%),
        linear-gradient(180deg,
          color-mix(in srgb, var(--card) 99%, var(--chip) 1%) 0%,
          color-mix(in srgb, var(--card) 97%, var(--chip) 3%) 100%);
      padding:22px;
      box-shadow:0 14px 30px rgba(14,24,38,.06);
    }
    .n5WorkspaceSurface.n5PanelReveal{
      animation:n5PanelReveal .22s ease;
    }
    @keyframes n5PanelReveal{
      0%{opacity:.72; transform:translateY(8px)}
      100%{opacity:1; transform:translateY(0)}
    }
    .n5WorkspaceMeta{
      display:flex;
      flex-wrap:wrap;
      justify-content:flex-end;
      gap:8px;
      max-width:340px;
    }
    .n5WorkspaceStage{
      margin-top:18px;
      padding:18px;
      border:1px solid var(--border);
      border-radius:24px;
      background:
        linear-gradient(180deg,
          color-mix(in srgb, var(--card) 99%, var(--chip) 1%) 0%,
          color-mix(in srgb, var(--card) 97%, var(--chip) 3%) 100%);
      box-shadow:0 10px 20px rgba(14,24,38,.04);
    }
    .n5StageHead{
      display:flex;
      align-items:flex-start;
      justify-content:space-between;
      gap:14px;
    }
    .n5StageCopy{
      display:flex;
      flex-direction:column;
      gap:5px;
      min-width:0;
    }
    .n5StageTitle{
      font-size:20px;
      font-weight:950;
      letter-spacing:-.01em;
      font-family:"Solway", ui-serif, Georgia, serif;
    }
    .n5StageText{
      line-height:1.55;
      max-width:62ch;
    }
    .n5StageActions{
      display:flex;
      align-items:center;
      gap:10px;
      flex-wrap:wrap;
    }
    .n5WorkspaceSearchRow{
      margin-top:16px;
      display:grid;
      grid-template-columns:minmax(0,1fr) auto;
      gap:10px;
      align-items:center;
    }
    #n5WorkspaceSearch{
      min-height:50px;
      border-radius:16px;
      background:color-mix(in srgb, var(--card) 97%, var(--chip) 3%);
    }
    .n5WorkspaceStats{
      min-height:50px;
      display:flex;
      align-items:center;
      justify-content:center;
      padding:0 14px;
      border:1px solid var(--border);
      border-radius:16px;
      background:var(--card);
      font-size:12px;
      font-weight:800;
      color:var(--muted);
      text-align:center;
      white-space:nowrap;
    }
    .n5WorkspaceFilters{
      margin-top:12px;
      display:flex;
      flex-wrap:wrap;
      gap:8px;
    }
    .n5FilterTag{
      display:inline-flex;
      align-items:center;
      gap:6px;
      padding:8px 12px;
      border-radius:999px;
      border:1px solid var(--border);
      background:color-mix(in srgb, var(--card) 94%, var(--chip) 6%);
      font-size:12px;
      font-weight:800;
      color:var(--muted);
    }
    .n5WorkspaceGrid{
      margin-top:14px;
      display:grid;
      grid-template-columns:repeat(3,minmax(0,1fr));
      gap:12px;
    }
    .n5PreviewCard{
      min-height:152px;
      display:flex;
      flex-direction:column;
      justify-content:space-between;
      gap:12px;
      padding:14px;
      border:1px solid var(--border);
      border-radius:20px;
      background:
        linear-gradient(180deg,
          color-mix(in srgb, var(--card) 99%, var(--chip) 1%) 0%,
          color-mix(in srgb, var(--card) 97%, var(--chip) 3%) 100%);
      box-shadow:0 10px 18px rgba(14,24,38,.04);
    }
    .n5PreviewLead{
      font-size:24px;
      font-weight:950;
      letter-spacing:-.02em;
      line-height:1.1;
      word-break:break-word;
      font-family:"Solway", ui-serif, Georgia, serif;
    }
    .n5PreviewLead.small{
      font-size:18px;
      letter-spacing:-.01em;
    }
    .n5PreviewMeta{
      display:flex;
      flex-direction:column;
      gap:4px;
      color:var(--muted);
      font-size:13px;
      line-height:1.5;
    }
    .n5PreviewFooter{
      display:flex;
      flex-wrap:wrap;
      gap:8px;
      font-size:12px;
      font-weight:800;
      color:var(--muted);
    }
    .n5PreviewPill{
      display:inline-flex;
      align-items:center;
      padding:6px 10px;
      border-radius:999px;
      border:1px solid var(--border);
      background:color-mix(in srgb, var(--card) 92%, var(--chip) 8%);
    }
    .n5PreviewEmpty{
      grid-column:1 / -1;
      padding:28px 18px;
      border:1px dashed color-mix(in srgb, var(--border) 70%, transparent);
      border-radius:20px;
      background:color-mix(in srgb, var(--card) 96%, var(--chip) 4%);
      text-align:center;
      color:var(--muted);
      line-height:1.55;
    }
    #n5QuizActionRow{
      padding:14px 16px;
      border:1px solid var(--border);
      border-radius:22px;
      background:color-mix(in srgb, var(--card) 98%, var(--chip) 2%);
    }
    #n5PracticeStartBtn{
      min-width:170px;
      min-height:50px;
      padding-inline:20px;
    }
    .n5QuizSetupGrid{
      display:grid;
      grid-template-columns:minmax(0,180px) 1fr;
      gap:16px;
      align-items:start;
    }
    .n5SetupBlock{
      display:flex;
      flex-direction:column;
      gap:8px;
      min-width:0;
    }
    .n5CountField{
      display:flex;
      flex-direction:column;
      gap:8px;
    }
    .n5CountField .input{
      min-height:54px;
      border-radius:18px;
      font-size:28px;
      font-weight:900;
      padding:10px 14px;
    }
    .n5SetRow{
      display:grid;
      grid-template-columns:repeat(4,minmax(0,1fr));
      gap:8px;
    }
    .n5SetRow .btn.small{
      min-height:44px;
      width:100%;
      padding-inline:12px;
    }
    .n5ExamEntry{
      margin-top:16px;
      border:1px solid var(--border);
      border-radius:24px;
      background:
        linear-gradient(180deg,
          color-mix(in srgb, var(--card) 99%, var(--chip) 1%) 0%,
          color-mix(in srgb, var(--card) 97%, var(--chip) 3%) 100%);
      padding:18px;
      box-shadow:0 12px 22px rgba(14,24,38,.04);
    }
    .n5ExamEntryHead{
      font-weight:900;
      letter-spacing:.08em;
      text-transform:uppercase;
      font-size:11px;
      color:var(--muted);
      margin-bottom:12px;
    }
    .n5ExamOverview{
      display:grid;
      grid-template-columns:repeat(3,minmax(0,1fr));
      gap:10px;
      margin-bottom:14px;
    }
    .n5ExamFact{
      display:flex;
      flex-direction:column;
      gap:6px;
      padding:14px;
      border:1px solid var(--border);
      border-radius:18px;
      background:color-mix(in srgb, var(--card) 97%, var(--chip) 3%);
    }
    .n5ExamFact b{
      font-size:18px;
      line-height:1.1;
      font-family:"Solway", ui-serif, Georgia, serif;
    }
    .n5ExamFact span:last-child{
      font-size:12px;
      line-height:1.45;
      color:var(--muted);
    }
    #n5QuizArea{
      margin-top:16px;
      padding:8px 0 2px;
    }
    #n5PracticeSummary{
      margin-top:16px;
      padding:16px;
      border:1px solid var(--border);
      border-radius:20px;
      background:color-mix(in srgb, var(--card) 98%, var(--chip) 2%);
    }
    .n5PanelFooter{
      margin-top:16px;
      justify-content:flex-end;
    }
    #n5PracticeExitBtn{
      background:transparent;
      color:var(--muted);
      box-shadow:none;
    }
    .n5FooterBar{
      display:flex;
      align-items:flex-start;
      justify-content:space-between;
      gap:12px;
      padding:14px 16px;
      border:1px solid var(--border);
      border-radius:20px;
      background:
        linear-gradient(180deg,
          color-mix(in srgb, var(--card) 99%, var(--chip) 1%) 0%,
          color-mix(in srgb, var(--card) 97%, var(--chip) 3%) 100%);
    }
    .n5FooterCopy{
      display:flex;
      flex-direction:column;
      gap:4px;
      min-width:0;
    }
    .n5FooterStatus{
      font-size:14px;
      font-weight:900;
      line-height:1.4;
    }
    .n5FooterCounts,
    .n5FooterMeta{
      font-size:13px;
      line-height:1.5;
      color:var(--muted);
    }
    .n5ActionBtn:focus-visible,
    .n5CategorySeg .btn:focus-visible,
    #n5WorkspaceSearch:focus-visible,
    .n5PreviewCard:focus-within{
      outline:2px solid color-mix(in srgb, var(--chip) 72%, white 28%);
      outline-offset:2px;
    }
    .n5BrowseModalCard{
      width:min(1040px,96vw);
      max-height:min(84vh,920px);
      display:flex;
      flex-direction:column;
      gap:14px;
      padding:18px;
      overflow:hidden;
    }
    .n5BrowseModalHeader{
      display:flex;
      align-items:flex-start;
      justify-content:space-between;
      gap:12px;
    }
    .n5BrowseModalBody{
      border:1px solid var(--border);
      border-radius:20px;
      background:
        radial-gradient(300px 160px at 100% 0%, color-mix(in srgb, var(--chip) 16%, transparent), transparent 72%),
        color-mix(in srgb, var(--card) 97%, var(--chip) 3%);
      padding:14px;
      max-height:min(56vh,620px);
      overflow:auto;
    }
    .n5BrowseModalMeta{
      display:flex;
      align-items:flex-start;
      justify-content:space-between;
      gap:12px;
      margin-bottom:12px;
    }
    .n5Grid{
      display:grid !important;
      grid-template-columns:repeat(3,minmax(0,1fr));
      gap:10px;
      align-items:stretch;
    }
    .n5Grid .listItem,
    .n5Grid .card{
      height:100%;
      display:flex;
      flex-direction:column;
      justify-content:space-between;
      align-items:flex-start;
      padding:14px;
    }
    .n5Grid .miniTag{
      margin-top:10px;
    }
    #screenN5{position:relative}
    #screenN5.examActive #n5MainGrid{display:none !important}
    #screenN5.examActive #n5ExamOverlay{display:flex}
    body.examMode #bottomNav{display:none !important}
    .n5ExamEntryGrid{
      display:grid;
      grid-template-columns:repeat(2,minmax(0,1fr));
      gap:8px;
    }
    .n5ExamOverlay{
      display:none;
      position:fixed;
      inset:0;
      z-index:88;
      background:var(--bg);
      color:var(--text);
      flex-direction:column;
    }
    .n5ExamTopbar{
      position:sticky;
      top:0;
      z-index:2;
      display:grid;
      grid-template-columns:auto 1fr auto;
      align-items:center;
      gap:10px;
      min-height:58px;
      padding:10px 12px;
      border-bottom:1px solid var(--border);
      background:color-mix(in srgb, var(--card) 94%, transparent);
      backdrop-filter:blur(6px);
    }
    .n5ExamMeta{
      display:flex;
      flex-direction:column;
      align-items:flex-end;
      gap:4px;
    }
    .n5ExamMeta .miniTag{
      min-width:88px;
      text-align:center;
    }
    #n5ExamTimer.warn{
      border-color:rgba(180,35,24,.32);
      color:var(--bad);
    }
    .n5ExamTitle{
      text-align:center;
      font-weight:900;
      letter-spacing:.02em;
      white-space:nowrap;
      overflow:hidden;
      text-overflow:ellipsis;
    }
    .n5ExamBody{
      flex:1;
      overflow:auto;
      padding:18px 12px calc(16px + env(safe-area-inset-bottom));
      max-width:900px;
      width:100%;
      margin:0 auto;
    }
    .n5ExamPrompt{
      font-size:13px;
      color:var(--muted);
      font-weight:800;
      letter-spacing:.03em;
      text-transform:uppercase;
    }
    .n5ExamQuestion{
      margin-top:10px;
      font-size:46px;
      font-weight:900;
      letter-spacing:-.01em;
      line-height:1.1;
      text-align:center;
      word-break:break-word;
    }
    .n5ExamChoices{
      margin-top:16px;
      display:grid;
      grid-template-columns:1fr;
      gap:10px;
    }
    .n5ExamChoice{
      width:100%;
      min-height:48px;
      border-radius:12px;
      border:1px solid var(--border);
      background:var(--card);
      color:var(--text);
      font-weight:800;
      text-align:left;
      padding:10px 12px;
      cursor:pointer;
    }
    .n5ExamChoice.correct{
      border-color:rgba(6,118,71,.38);
      background:color-mix(in srgb, var(--chip) 55%, var(--card) 45%);
    }
    .n5ExamChoice.wrong{
      border-color:rgba(180,35,24,.38);
      background:color-mix(in srgb, #ffd9d5 32%, var(--card) 68%);
    }
    .n5ExamFeedback{
      margin-top:12px;
      min-height:22px;
      font-weight:900;
    }
    .n5ExamFeedback.good{color:var(--good)}
    .n5ExamFeedback.bad{color:var(--bad)}
    .n5ExamResultScore{
      margin-top:8px;
      font-size:28px;
      font-weight:950;
      letter-spacing:-.02em;
    }
    .n5ExamWeakList{
      margin-top:10px;
      display:flex;
      flex-direction:column;
      gap:8px;
    }
    @media (min-width:760px){
      .n5ExamChoices{grid-template-columns:repeat(2,minmax(0,1fr))}
    }
    .pageInfo{
      font-size:12px;
      color:var(--muted);
      font-weight:800;
      min-width:84px;
      text-align:center;
    }
    .teacherHealthGrid{
      margin-top:10px;
      display:grid;
      grid-template-columns:repeat(2,minmax(0,1fr));
      gap:10px;
    }
    .metricTile{
      border:1px solid var(--border);
      border-radius:var(--radius-sm);
      background:var(--card);
      padding:12px;
      min-height:88px;
      display:flex;
      flex-direction:column;
      justify-content:space-between;
    }
    .metricTile b{
      font-size:30px;
      line-height:1;
      letter-spacing:-.02em;
      font-weight:950;
    }
    .metricTile .muted{
      font-size:12px;
      font-weight:800;
      text-transform:uppercase;
      letter-spacing:.05em;
    }
    .teacherRows{
      margin-top:10px;
      display:flex;
      flex-direction:column;
      gap:10px;
    }
    .radarRows{
      margin-top:8px;
      display:flex;
      flex-direction:column;
      gap:10px;
    }
    .radarRow{
      display:grid;
      grid-template-columns:minmax(88px,120px) minmax(54px,64px) 1fr auto;
      align-items:center;
      gap:8px;
    }
    .radarLabel{
      font-weight:900;
      letter-spacing:.02em;
    }
    .radarPct{
      font-weight:900;
      text-align:right;
      font-size:13px;
    }
    .radarTrack{
      height:8px;
      border-radius:999px;
      border:1px solid var(--border);
      background:var(--card);
      overflow:hidden;
    }
    .radarFill{
      height:100%;
      width:0%;
      background:linear-gradient(90deg,#2f6cbf 0%, #7ea7dc 100%);
      transition:width .2s ease;
    }
    .radarFocus{
      margin-top:10px;
      font-weight:900;
      font-size:13px;
      color:var(--muted);
    }
    .teacherStudentRowBtn{
      display:block;
      width:100%;
      cursor:pointer;
      transition:transform .14s ease, box-shadow .18s ease;
    }
    .teacherStudentRowBtn:hover{
      transform:translateY(-1px);
      box-shadow:0 10px 20px rgba(9,20,36,.10);
    }
    .teacherDrawerBack{
      position:fixed;
      inset:0;
      z-index:85;
      background:rgba(8,14,24,.44);
      backdrop-filter:blur(3px);
      display:none;
      justify-content:flex-end;
    }
    .teacherDrawerBack.open{display:flex}
    .teacherDrawer{
      width:min(420px,100%);
      height:100%;
      border-left:1px solid var(--border);
      background:var(--card);
      box-shadow:var(--shadow);
      padding:14px 14px calc(14px + env(safe-area-inset-bottom));
      overflow:auto;
      display:flex;
      flex-direction:column;
      gap:10px;
      outline:none;
    }
    .drawerWeek{
      margin-top:2px;
      display:grid;
      grid-template-columns:repeat(7,minmax(0,1fr));
      gap:6px;
      align-items:end;
    }
    .drawerBar{
      height:58px;
      border:1px solid var(--border);
      border-radius:10px;
      background:var(--card);
      overflow:hidden;
      display:flex;
      align-items:flex-end;
    }
    .drawerFill{
      width:100%;
      background:linear-gradient(180deg,#2f6cbf 0%, #7ea7dc 100%);
      min-height:2px;
    }
    .drawerBarLbl{
      margin-top:4px;
      text-align:center;
      font-size:10px;
      color:var(--muted);
      font-weight:800;
    }
    .nudgeMinRow{
      display:flex;
      gap:8px;
      flex-wrap:wrap;
      margin-top:4px;
    }
    @media (max-width:900px){
      .teacherDrawerBack{align-items:flex-end}
      .teacherDrawer{
        width:100%;
        height:min(70vh,640px);
        border-left:none;
        border-top:1px solid var(--border);
        border-radius:18px 18px 0 0;
      }
    }
    @keyframes fadeUp{
      from{opacity:0;transform:translateY(8px)}
      to{opacity:1;transform:translateY(0)}
    }
    .modalBack{
      position:fixed;
      inset:0;
      z-index:60;
      background:rgba(8,14,24,.46);
      backdrop-filter:blur(4px);
      display:none;
      align-items:center;
      justify-content:center;
      padding:14px;
    }
    .modalCard{
      width:min(560px,96vw);
      border:1px solid var(--border);
      border-radius:var(--radius);
      background:var(--card);
      box-shadow:var(--shadow);
      padding:14px;
    }
    @keyframes sessionSummaryReveal{
      from{opacity:0;transform:translateY(8px) scale(.985)}
      to{opacity:1;transform:translateY(0) scale(1)}
    }
    .sessionSummaryModalCard{
      width:min(520px,96vw);
      padding:20px;
      border-radius:24px;
      animation:sessionSummaryReveal .18s ease;
      background:
        linear-gradient(180deg,
          color-mix(in srgb, var(--card) 96%, white 4%) 0%,
          var(--card) 100%);
    }
    .sessionSummaryTop{
      display:flex;
      align-items:flex-start;
      justify-content:space-between;
      gap:12px;
    }
    .sessionSummaryEyebrow{
      font-size:11px;
      letter-spacing:.12em;
      text-transform:uppercase;
      color:var(--muted);
      font-weight:900;
    }
    .sessionSummaryHeadline{
      margin:6px 0 0;
      font-size:28px;
      line-height:1.12;
      letter-spacing:-.02em;
      font-family:"Solway", ui-serif, Georgia, serif;
    }
    .sessionSummaryScoreCard{
      margin-top:16px;
      border:1px solid var(--border);
      border-radius:22px;
      padding:18px;
      background:color-mix(in srgb, var(--card) 88%, var(--chip) 12%);
      text-align:center;
    }
    .sessionSummaryScoreValue{
      font-size:42px;
      line-height:1;
      font-weight:950;
      letter-spacing:-.04em;
      font-family:"Solway", ui-serif, Georgia, serif;
    }
    .sessionSummaryScoreMeta{
      margin-top:10px;
      color:var(--muted);
      font-weight:800;
    }
    .sessionSummaryXpGain{
      margin-top:10px;
      font-size:14px;
      font-weight:900;
      color:#2f6cbf;
    }
    .sessionSummaryXpGain.isGlow{
      text-shadow:0 0 14px rgba(47,108,191,.28);
      transform:scale(1.02);
      transition:transform .18s ease, text-shadow .18s ease;
    }
    .sessionSummaryContext{
      margin-top:8px;
      display:inline-flex;
      align-items:center;
      justify-content:center;
      min-height:30px;
      padding:0 12px;
      border-radius:999px;
      border:1px solid var(--border);
      background:var(--card);
      color:var(--muted);
      font-size:12px;
      font-weight:900;
    }
    .sessionSummaryWeakWrap,
    .sessionSummaryReviewWrap{
      margin-top:16px;
      border:1px solid var(--border);
      border-radius:20px;
      padding:14px;
      background:color-mix(in srgb, var(--card) 92%, var(--chip) 8%);
    }
    .sessionSummarySectionTitle{
      font-size:12px;
      letter-spacing:.1em;
      text-transform:uppercase;
      color:var(--muted);
      font-weight:900;
    }
    .sessionSummaryWeakChips{
      display:flex;
      flex-wrap:wrap;
      gap:8px;
      margin-top:10px;
    }
    .sessionSummaryChip{
      display:inline-flex;
      align-items:center;
      min-height:34px;
      padding:0 12px;
      border-radius:999px;
      border:1px solid var(--border);
      background:var(--card);
      font-weight:800;
    }
    .sessionSummaryReviewList{
      display:grid;
      gap:10px;
      margin-top:10px;
    }
    .sessionSummaryReviewItem{
      border:1px solid var(--border);
      border-radius:16px;
      padding:12px;
      background:var(--card);
    }
    .sessionSummaryReviewPrompt{
      font-weight:900;
    }
    .sessionSummaryReviewMeta{
      margin-top:6px;
      color:var(--muted);
      font-size:12px;
      line-height:1.5;
    }
    .sessionSummaryActions{
      display:grid;
      grid-template-columns:1fr;
      gap:10px;
      margin-top:18px;
    }
    .onboardingBack{
      position:fixed;
      inset:0;
      z-index:95;
      background:rgba(8,14,24,.46);
      backdrop-filter:blur(8px);
      display:none;
      align-items:center;
      justify-content:center;
      padding:18px;
    }
    .onboardingBack.open{display:flex}
    .onboardingCard{
      width:min(720px,96vw);
      max-height:min(92vh,900px);
      overflow:auto;
      border:1px solid var(--border);
      border-radius:26px;
      background:
        radial-gradient(640px 220px at 100% 0%, color-mix(in srgb, var(--chip) 22%, transparent), transparent 72%),
        var(--card);
      box-shadow:0 24px 50px rgba(9,20,36,.18);
      padding:18px;
      display:grid;
      gap:14px;
    }
    .onboardingTop{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:12px;
    }
    .onboardingStepMeta{
      display:grid;
      gap:6px;
    }
    .onboardingStepEyebrow{
      font-size:11px;
      font-weight:900;
      letter-spacing:.08em;
      text-transform:uppercase;
      color:var(--muted);
    }
    .onboardingDots{
      display:flex;
      gap:6px;
      flex-wrap:wrap;
      align-items:center;
    }
    .onboardingDot{
      width:9px;
      height:9px;
      border-radius:999px;
      background:color-mix(in srgb, var(--border) 84%, transparent);
      transition:transform .18s ease, background-color .18s ease;
    }
    .onboardingDot.active{
      width:22px;
      background:var(--text);
    }
    .onboardingBody{
      display:grid;
      gap:14px;
    }
    .onboardingPane{
      display:none;
      gap:14px;
    }
    .onboardingPane.active{
      display:grid;
    }
    .onboardingHero{
      display:grid;
      gap:12px;
      padding:20px;
      border:1px solid var(--border);
      border-radius:24px;
      background:
        linear-gradient(135deg, color-mix(in srgb, var(--chip) 24%, var(--card) 76%) 0%, color-mix(in srgb, var(--card) 98%, transparent) 86%),
        var(--surface-1);
    }
    .onboardingTitle{
      margin:0;
      font-size:clamp(30px,4.2vw,46px);
      line-height:1;
      letter-spacing:-.04em;
      font-family:"Solway", ui-serif, Georgia, serif;
    }
    .onboardingLead{
      max-width:50ch;
      color:var(--muted);
      font-size:15px;
      line-height:1.6;
    }
    .onboardingGrid{
      display:grid;
      grid-template-columns:repeat(2,minmax(0,1fr));
      gap:10px;
    }
    .onboardingChoice{
      width:100%;
      padding:14px;
      border:1px solid var(--border);
      border-radius:20px;
      background:color-mix(in srgb, var(--card) 96%, var(--chip) 4%);
      text-align:left;
      display:grid;
      gap:6px;
      cursor:pointer;
      transition:transform .14s ease, box-shadow .18s ease, border-color .18s ease, background-color .18s ease;
    }
    .onboardingChoice:hover{
      transform:translateY(-1px);
      box-shadow:0 10px 20px rgba(9,20,36,.08);
    }
    .onboardingChoice.active{
      border-color:transparent;
      background:
        linear-gradient(145deg, color-mix(in srgb, var(--chip) 28%, var(--card) 72%) 0%, color-mix(in srgb, var(--card) 99%, transparent) 84%),
        var(--surface-1);
      box-shadow:0 12px 24px rgba(9,20,36,.08);
    }
    .onboardingChoiceLabel{
      font-weight:900;
      font-size:15px;
      line-height:1.25;
    }
    .onboardingChoiceText{
      font-size:12px;
      line-height:1.45;
      color:var(--muted);
    }
    .onboardingChipRow{
      display:flex;
      flex-wrap:wrap;
      gap:8px;
    }
    .onboardingChip{
      min-height:40px;
      padding:8px 12px;
      border-radius:999px;
      border:1px solid var(--border);
      background:var(--card);
      font-weight:800;
      color:var(--muted);
      cursor:pointer;
      transition:background-color .18s ease, border-color .18s ease, color .18s ease;
    }
    .onboardingChip.active{
      color:var(--text);
      border-color:transparent;
      background:color-mix(in srgb, var(--chip) 74%, var(--card) 26%);
    }
    .onboardingField{
      display:grid;
      gap:6px;
    }
    .onboardingField label{
      font-size:12px;
      font-weight:800;
      color:var(--muted);
    }
    .onboardingField .input{
      width:100%;
    }
    .onboardingAssessmentCard,
    .onboardingRecommendationCard,
    .onboardingReadyCard{
      display:grid;
      gap:12px;
      padding:16px;
      border:1px solid var(--border);
      border-radius:22px;
      background:
        linear-gradient(180deg, color-mix(in srgb, var(--card) 99%, var(--chip) 1%) 0%, color-mix(in srgb, var(--card) 96%, var(--chip) 4%) 100%);
    }
    .onboardingRecommendationTitle,
    .onboardingReadyTitle{
      font-size:24px;
      line-height:1.15;
      font-weight:950;
      letter-spacing:-.03em;
      font-family:"Solway", ui-serif, Georgia, serif;
    }
    .onboardingMiniList{
      display:grid;
      gap:8px;
    }
    .onboardingMiniRow{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:10px;
      padding:10px 12px;
      border:1px solid var(--border);
      border-radius:16px;
      background:color-mix(in srgb, var(--card) 96%, var(--chip) 4%);
    }
    .onboardingMiniRow span{
      color:var(--muted);
      font-size:12px;
      font-weight:800;
      text-transform:uppercase;
      letter-spacing:.08em;
    }
    .onboardingActions{
      display:flex;
      justify-content:space-between;
      gap:10px;
      flex-wrap:wrap;
      align-items:center;
    }
    .onboardingActions .row{
      gap:8px;
    }
    .onboardingActions .btn{
      min-width:140px;
    }
    .studentHeroMeta,
    .studentHeroAction,
    .studentQuickActionGrid,
    .studentExtraDetails,
    .aiMobileContextRow{
      display:none;
    }
    @media (max-width:768px){
      body.mobile-layout.onboarding-open{
        overflow:hidden;
      }
      body.mobile-layout.onboarding-open .appMainScroll{
        overflow:hidden;
      }
      body.mobile-layout .onboardingBack{
        align-items:flex-end;
        justify-content:center;
        padding:12px 12px calc(12px + env(safe-area-inset-bottom));
      }
      body.mobile-layout .onboardingCard{
        width:min(100%, 520px);
        max-height:min(91svh, 820px);
        border-radius:24px 24px 18px 18px;
        padding:14px 14px 12px;
        gap:12px;
        box-shadow:0 20px 40px rgba(9,20,36,.16);
      }
      body.mobile-layout .onboardingTop{
        gap:8px;
        align-items:flex-start;
      }
      body.mobile-layout .onboardingStepMeta{
        gap:3px;
      }
      body.mobile-layout .onboardingStepEyebrow{
        font-size:11px;
        line-height:1.2;
      }
      body.mobile-layout #onboardingStepHint{
        font-size:12px;
        line-height:1.4;
      }
      body.mobile-layout .onboardingDots{
        gap:4px;
        justify-content:flex-end;
      }
      body.mobile-layout .onboardingDot{
        width:8px;
        height:8px;
      }
      body.mobile-layout .onboardingDot.active{
        width:16px;
      }
      body.mobile-layout .onboardingBody,
      body.mobile-layout .onboardingPane{
        gap:12px;
      }
      body.mobile-layout .onboardingHero,
      body.mobile-layout .onboardingAssessmentCard,
      body.mobile-layout .onboardingRecommendationCard,
      body.mobile-layout .onboardingReadyCard{
        padding:14px;
        gap:10px;
        border-radius:22px;
      }
      body.mobile-layout .onboardingTitle{
        font-size:26px;
        line-height:1.02;
      }
      body.mobile-layout .onboardingRecommendationTitle,
      body.mobile-layout .onboardingReadyTitle{
        font-size:22px;
        line-height:1.12;
      }
      body.mobile-layout .onboardingLead{
        font-size:14px;
        line-height:1.48;
        max-width:none;
        margin:0;
      }
      body.mobile-layout .onboardingGrid{
        grid-template-columns:1fr;
        gap:8px;
      }
      body.mobile-layout .onboardingChoice{
        min-height:78px;
        padding:12px 13px;
        gap:5px;
        border-radius:18px;
      }
      body.mobile-layout .onboardingChoiceLabel{
        font-size:14px;
        line-height:1.2;
      }
      body.mobile-layout .onboardingChoiceText{
        font-size:12px;
        line-height:1.4;
        display:-webkit-box;
        -webkit-line-clamp:2;
        -webkit-box-orient:vertical;
        overflow:hidden;
      }
      body.mobile-layout .onboardingChipRow{
        gap:6px;
      }
      body.mobile-layout .onboardingChip{
        min-height:34px;
        padding:7px 11px;
        font-size:11px;
      }
      body.mobile-layout .onboardingMiniList{
        gap:6px;
      }
      body.mobile-layout .onboardingMiniRow{
        padding:9px 10px;
        gap:8px;
        border-radius:14px;
      }
      body.mobile-layout .onboardingMiniRow span{
        font-size:11px;
      }
      body.mobile-layout .onboardingField{
        gap:5px;
      }
      body.mobile-layout .onboardingField label{
        font-size:11px;
        line-height:1.25;
      }
      body.mobile-layout .onboardingField .input{
        min-height:42px;
        font-size:15px;
        border-radius:14px;
      }
      body.mobile-layout .onboardingActions{
        flex-direction:column-reverse;
        align-items:stretch;
        gap:8px;
      }
      body.mobile-layout .onboardingActions .row{
        width:100%;
        display:grid;
        grid-template-columns:1fr;
      }
      body.mobile-layout .onboardingActions .btn{
        width:100%;
        min-width:0;
        min-height:48px;
        border-radius:15px;
      }
      body.mobile-layout #onboardingPane1 .onboardingHero{
        gap:8px;
        padding:16px 14px;
      }
      body.mobile-layout #onboardingPane1 .hint{
        font-size:11px;
        letter-spacing:.08em;
        text-transform:uppercase;
      }
      body.mobile-layout #onboardingPane1 .onboardingMiniList{
        gap:5px;
      }
      body.mobile-layout #onboardingPane1 .onboardingMiniRow{
        padding:8px 10px;
      }
      body.mobile-layout #onboardingPane2 .onboardingAssessmentCard{
        gap:12px;
      }
      body.mobile-layout #onboardingPane2 .onboardingRecommendationTitle{
        font-size:24px;
        line-height:1.12;
      }
      body.mobile-layout #onboardingPane2 .onboardingField + .onboardingField{
        margin-top:2px;
      }
      body.mobile-layout #onboardingPane2 .onboardingGrid{
        gap:8px;
      }
      body.mobile-layout #onboardingPane3 .onboardingAssessmentCard{
        gap:10px;
      }
      body.mobile-layout #onboardingPane3 .onboardingRecommendationTitle{
        font-size:24px;
        line-height:1.12;
      }
      body.mobile-layout #onboardingPane3 .onboardingLead{
        font-size:13px;
        line-height:1.46;
      }
      body.mobile-layout #onboardingPane4 .onboardingRecommendationCard,
      body.mobile-layout #onboardingPane5 .onboardingReadyCard{
        gap:10px;
      }
      body.mobile-layout #onboardingPane4 .onboardingRecommendationTitle,
      body.mobile-layout #onboardingPane5 .onboardingReadyTitle{
        font-size:24px;
      }
      body.mobile-layout #onboardingPane4 .onboardingMiniRow,
      body.mobile-layout #onboardingPane5 .onboardingMiniRow{
        align-items:flex-start;
      }
      body.mobile-layout #onboardingPane5 .onboardingLead{
        font-size:13px;
      }
      body.mobile-layout #onboardingSecondaryBtn{
        min-height:42px;
      }
    }
    .kanaPracticeHeader{
      display:flex;
      align-items:flex-start;
      justify-content:space-between;
      gap:14px;
      margin-bottom:12px;
    }
    .kanaToolbar{
      display:flex;
      gap:8px;
      flex-wrap:wrap;
      justify-content:flex-end;
    }
    .kanaQuestionShell{
      margin-top:14px;
      padding:16px;
      border:1px solid var(--border);
      border-radius:24px;
      background:
        radial-gradient(240px 120px at 100% 0%, color-mix(in srgb, var(--chip) 18%, transparent), transparent 72%),
        color-mix(in srgb, var(--card) 95%, var(--chip) 5%);
    }
    .kanaPromptLabel{
      display:inline-flex;
      align-items:center;
      gap:8px;
      padding:6px 10px;
      border-radius:999px;
      border:1px solid var(--border);
      background:color-mix(in srgb, var(--chip) 68%, transparent);
      font-size:12px;
      font-weight:800;
      letter-spacing:.08em;
      text-transform:uppercase;
      color:var(--muted);
    }
    .kanaChartModalCard{
      width:min(880px,96vw);
      max-height:min(84vh,920px);
      display:flex;
      flex-direction:column;
      gap:14px;
      padding:18px;
      overflow:hidden;
    }
    .kanaChartHeader{
      display:flex;
      align-items:flex-start;
      justify-content:space-between;
      gap:12px;
    }
    .kanaChartSeg{
      display:grid;
      grid-template-columns:repeat(2,minmax(0,1fr));
    }
    .kanaChartBody{
      flex:1 1 auto;
      overflow:auto;
      padding:16px;
      border:1px solid var(--border);
      border-radius:24px;
      background:
        radial-gradient(320px 180px at 100% 0%, color-mix(in srgb, var(--chip) 16%, transparent), transparent 72%),
        color-mix(in srgb, var(--card) 97%, var(--chip) 3%);
      display:flex;
      flex-direction:column;
      gap:16px;
    }
    .kanaChartSection{
      display:flex;
      flex-direction:column;
      gap:10px;
    }
    .kanaChartSectionHead{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:10px;
    }
    .kanaChartRows{
      display:flex;
      flex-direction:column;
      gap:10px;
    }
    .kanaChartRow{
      display:grid;
      grid-template-columns:repeat(5,minmax(0,1fr));
      gap:10px;
    }
    .kanaChartRow.isCompact{
      grid-template-columns:repeat(3,minmax(0,1fr));
    }
    .kanaChartCell{
      min-height:92px;
      padding:14px 10px;
      border:1px solid var(--border);
      border-radius:18px;
      background:color-mix(in srgb, var(--card) 94%, var(--chip) 6%);
      display:flex;
      flex-direction:column;
      align-items:center;
      justify-content:center;
      gap:8px;
      text-align:center;
      box-shadow:0 12px 28px rgba(15,23,42,.06);
    }
    .kanaChartChar{
      font-size:30px;
      font-weight:900;
      line-height:1;
      letter-spacing:-.03em;
    }
    .kanaChartRomaji{
      font-size:13px;
      font-weight:700;
      color:var(--muted);
    }
    .kanaChartFooter{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:12px;
      flex-wrap:wrap;
    }
    .kanaAssessmentModalCard{
      width:min(640px,96vw);
      display:flex;
      flex-direction:column;
      gap:14px;
      padding:18px;
    }
    .kanaAssessmentHero{
      display:flex;
      flex-direction:column;
      gap:10px;
    }
    .kanaAssessmentEyebrow{
      display:inline-flex;
      align-items:center;
      gap:8px;
      width:max-content;
      padding:6px 10px;
      border-radius:999px;
      border:1px solid var(--border);
      background:color-mix(in srgb, var(--chip) 72%, transparent);
      font-size:12px;
      font-weight:800;
      letter-spacing:.08em;
      text-transform:uppercase;
      color:var(--muted);
    }
    .kanaAssessmentHero h3{
      margin:0;
      font-size:28px;
      line-height:1.06;
      letter-spacing:-.03em;
    }
    .kanaAssessmentBullets{
      display:grid;
      gap:8px;
      margin:0;
      padding:0;
      list-style:none;
    }
    .kanaAssessmentBullets li{
      display:flex;
      align-items:flex-start;
      gap:10px;
      padding:10px 12px;
      border:1px solid var(--border);
      border-radius:16px;
      background:color-mix(in srgb, var(--card) 95%, var(--chip) 5%);
    }
    .kanaAssessmentBullets li::before{
      content:"";
      width:8px;
      height:8px;
      border-radius:999px;
      background:linear-gradient(135deg,#2f6cbf 0%, #7ea7dc 100%);
      margin-top:6px;
      flex:0 0 auto;
    }
    .kanaAssessmentHint{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:12px;
      flex-wrap:wrap;
      padding:10px 12px;
      border-radius:16px;
      border:1px dashed color-mix(in srgb, var(--border) 80%, var(--text) 20%);
      background:color-mix(in srgb, var(--card) 95%, transparent);
      color:var(--muted);
      font-size:13px;
      font-weight:700;
    }
    .kanaAssessmentProgressHead{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:12px;
      flex-wrap:wrap;
    }
    .kanaAssessmentProgressBar{
      width:100%;
      height:10px;
      border-radius:999px;
      background:color-mix(in srgb, var(--border) 80%, transparent);
      overflow:hidden;
    }
    .kanaAssessmentProgressFill{
      height:100%;
      width:0%;
      border-radius:999px;
      background:linear-gradient(90deg,#2f6cbf 0%, #7ea7dc 100%);
      transition:width .22s ease;
    }
    .kanaAssessmentQuestionShell{
      display:flex;
      flex-direction:column;
      gap:14px;
      padding:16px;
      border:1px solid var(--border);
      border-radius:24px;
      background:
        radial-gradient(240px 140px at 100% 0%, color-mix(in srgb, var(--chip) 18%, transparent), transparent 72%),
        color-mix(in srgb, var(--card) 96%, var(--chip) 4%);
    }
    .kanaAssessmentQuestionMeta{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:12px;
      flex-wrap:wrap;
    }
    .kanaAssessmentScriptTag{
      display:inline-flex;
      align-items:center;
      gap:8px;
      padding:6px 10px;
      border-radius:999px;
      border:1px solid var(--border);
      background:color-mix(in srgb, var(--chip) 72%, transparent);
      font-size:12px;
      font-weight:800;
      color:var(--muted);
      text-transform:uppercase;
      letter-spacing:.08em;
    }
    .kanaAssessmentChar{
      font-size:clamp(52px, 10vw, 88px);
      font-weight:900;
      letter-spacing:-.04em;
      line-height:1;
      text-align:center;
    }
    .kanaAssessmentChoices{
      display:grid;
      grid-template-columns:repeat(2,minmax(0,1fr));
      gap:10px;
    }
    .kanaAssessmentFooter{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:12px;
      flex-wrap:wrap;
    }
    .kanaAssessmentResult{
      display:flex;
      flex-direction:column;
      gap:14px;
      padding:16px;
      border:1px solid var(--border);
      border-radius:24px;
      background:
        radial-gradient(240px 140px at 0% 0%, color-mix(in srgb, var(--chip) 18%, transparent), transparent 72%),
        color-mix(in srgb, var(--card) 96%, var(--chip) 4%);
    }
    .kanaAssessmentResultGrid{
      display:grid;
      grid-template-columns:repeat(3,minmax(0,1fr));
      gap:10px;
    }
    .kanaAssessmentMetric{
      padding:12px;
      border:1px solid var(--border);
      border-radius:18px;
      background:color-mix(in srgb, var(--card) 94%, var(--chip) 6%);
      display:flex;
      flex-direction:column;
      gap:6px;
    }
    .kanaAssessmentMetricLabel{
      font-size:12px;
      font-weight:800;
      letter-spacing:.08em;
      text-transform:uppercase;
      color:var(--muted);
    }
    .kanaAssessmentMetricValue{
      font-size:24px;
      font-weight:900;
      letter-spacing:-.03em;
    }
    .kanaAssessmentWeakList{
      display:flex;
      flex-wrap:wrap;
      gap:8px;
    }
    .kanaAssessmentWeakChip{
      min-width:40px;
      padding:8px 12px;
      border:1px solid var(--border);
      border-radius:999px;
      background:color-mix(in srgb, var(--card) 94%, var(--chip) 6%);
      font-weight:900;
      text-align:center;
    }
    .kanaAssessmentConfusions{
      display:grid;
      gap:8px;
    }
    .kanaAssessmentConfusionRow{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:10px;
      padding:10px 12px;
      border:1px solid var(--border);
      border-radius:16px;
      background:color-mix(in srgb, var(--card) 96%, var(--chip) 4%);
    }
    .kanaAssessmentConfusionKana{
      font-size:22px;
      font-weight:900;
      line-height:1;
    }
    .kanaAssessmentConfusionMeta{
      display:flex;
      align-items:center;
      gap:8px;
      flex-wrap:wrap;
      color:var(--muted);
      font-size:13px;
      font-weight:700;
    }
    .kanaAssessmentActions{
      display:flex;
      gap:8px;
      flex-wrap:wrap;
    }
    .kanaAssessmentResultDetailGrid{
      display:grid;
      grid-template-columns:repeat(2,minmax(0,1fr));
      gap:10px;
    }
    .kanaAssessmentResultDetail{
      padding:12px 14px;
      border:1px solid var(--border);
      border-radius:18px;
      background:color-mix(in srgb, var(--card) 94%, var(--chip) 6%);
      display:flex;
      flex-direction:column;
      gap:6px;
    }
    .kanaAssessmentResultDetailValue{
      font-size:18px;
      font-weight:900;
      letter-spacing:-.02em;
    }
    .n5AssessmentQuestionLead{
      font-size:clamp(22px, 4vw, 32px);
      font-weight:900;
      letter-spacing:-.02em;
      line-height:1.2;
    }
    .n5AssessmentCategoryRows{
      display:grid;
      gap:10px;
    }
    .n5AssessmentCategoryRow{
      display:grid;
      grid-template-columns:minmax(78px,110px) minmax(56px,72px) 1fr;
      align-items:center;
      gap:10px;
    }
    .n5AssessmentCategoryLabel{
      font-weight:900;
      letter-spacing:.02em;
    }
    .n5AssessmentCategoryPct{
      font-weight:900;
      text-align:right;
      color:var(--muted);
      font-size:13px;
    }
    .n5AssessmentCategoryTrack{
      height:10px;
      border-radius:999px;
      border:1px solid var(--border);
      background:color-mix(in srgb, var(--border) 80%, transparent);
      overflow:hidden;
    }
    .n5AssessmentCategoryFill{
      height:100%;
      width:0%;
      border-radius:999px;
      background:linear-gradient(90deg,#2f6cbf 0%, #7ea7dc 100%);
      transition:width .22s ease;
    }
    .n5AssessmentRecommendation{
      padding:12px 14px;
      border:1px solid var(--border);
      border-radius:18px;
      background:color-mix(in srgb, var(--card) 94%, var(--chip) 6%);
      display:flex;
      flex-direction:column;
      gap:6px;
    }
    @media (max-width:740px){
      .kanaAssessmentModalCard{
        padding:16px;
      }
      .kanaAssessmentHero h3{
        font-size:24px;
      }
      .kanaAssessmentChoices,
      .kanaAssessmentResultGrid,
      .kanaAssessmentResultDetailGrid{
        grid-template-columns:1fr;
      }
      .kanaAssessmentFooter{
        align-items:flex-start;
      }
    }
    #payModalCard{
      padding-bottom:calc(14px + env(safe-area-inset-bottom));
    }
    .payModalPrice{
      margin-top:10px;
      font-size:14px;
      font-weight:900;
      color:var(--muted);
    }
    #premiumModalCard{
      padding-bottom:calc(14px + env(safe-area-inset-bottom));
    }
    .premiumModalPrice{
      margin-top:10px;
      font-size:14px;
      font-weight:900;
      color:var(--muted);
    }
    .aiProgress{
      margin-top:8px;
      height:6px;
      border-radius:999px;
      background:var(--border);
      overflow:hidden;
    }
    .aiProgressInner{
      height:100%;
      width:40%;
      border-radius:999px;
      background:color-mix(in srgb, var(--muted) 42%, transparent);
      animation:aiLoad 1.2s infinite ease-in-out alternate;
    }
    @keyframes aiLoad{
      from{width:20%}
      to{width:80%}
    }
    @media (prefers-reduced-motion: reduce){
      .aiProgressInner{animation:none;width:60%}
    }
    .skel{
      display:flex;
      flex-direction:column;
      gap:8px;
    }
    .skelLine,.skelBlock{
      border-radius:10px;
      border:1px solid var(--border);
      background:
        linear-gradient(90deg,
          color-mix(in srgb, var(--card) 85%, var(--border) 15%) 0%,
          color-mix(in srgb, var(--card) 75%, var(--border) 25%) 50%,
          color-mix(in srgb, var(--card) 85%, var(--border) 15%) 100%);
      background-size:220% 100%;
      animation:skelShift 1.3s ease-in-out infinite;
    }
    .skelLine{height:14px}
    .skelBlock{height:88px;margin-top:2px}
    @keyframes skelShift{
      0%{background-position:0% 50%}
      100%{background-position:100% 50%}
    }
    @media (prefers-reduced-motion: reduce){
      .skelLine,.skelBlock{animation:none}
    }
    .flashCardFront{
      margin-top:10px;
      min-height:128px;
      border:1px solid var(--border);
      border-radius:var(--radius-sm);
      background:var(--card);
      display:flex;
      align-items:center;
      justify-content:center;
      cursor:pointer;
      user-select:none;
      transition:transform .16s ease, box-shadow .16s ease, border-color .16s ease;
    }
    .flashCardFront:hover{
      border-color:color-mix(in srgb, var(--border) 55%, var(--text) 45%);
    }
    .flashModeSeg{
      display:grid;
      grid-template-columns:repeat(3,minmax(0,1fr));
      gap:6px;
      padding:6px;
      margin-top:10px;
      border:1px solid var(--border);
      border-radius:999px;
      background:var(--card);
    }
    .flashModeBtn{
      min-height:34px;
      border:1px solid transparent;
      border-radius:999px;
      background:transparent;
      color:var(--muted);
      font-weight:800;
      font-size:12px;
      cursor:pointer;
      padding:0 10px;
      line-height:1.1;
    }
    .flashModeBtn.active{
      background:var(--chip);
      color:var(--text);
    }
    .flashTapHint{
      text-align:center;
      margin-top:8px;
    }
    .flashRevealPanel{
      display:none;
      margin-top:10px;
      box-shadow:none;
      width:100%;
      opacity:0;
      transform:translateY(6px);
    }
    .flashRevealPanel.revealIn{
      display:block;
      animation:flashRevealIn .2s ease forwards;
    }
    .flashCardFront.popIn{
      animation:flashCardPop .2s ease;
    }
    @keyframes flashRevealIn{
      from{opacity:0;transform:translateY(6px)}
      to{opacity:1;transform:translateY(0)}
    }
    @keyframes flashCardPop{
      from{transform:scale(.98)}
      to{transform:scale(1)}
    }
    .levelGrid{
      display:grid;
      grid-template-columns:repeat(3,minmax(0,1fr));
      gap:8px;
      margin-top:10px;
    }
    .levelBtn{
      min-height:44px;
      border-radius:12px;
      border:1px solid var(--border);
      background:var(--card);
      color:var(--text);
      font-weight:800;
      cursor:pointer;
    }
    .levelBtn.active{
      border-color:transparent;
      background:var(--chip);
    }
    @media (max-width:900px){
      .homeGrid,.homePremiumGrid{grid-template-columns:1fr}
      #bottomNav .bottomNavBar{grid-template-columns:repeat(5,minmax(0,1fr))}
      .settingsGrid{grid-template-columns:1fr}
      .levelGrid{grid-template-columns:repeat(2,minmax(0,1fr))}
      .n5Grid{grid-template-columns:repeat(2,minmax(0,1fr))}
      .n5ModeRow{grid-template-columns:repeat(2,minmax(0,1fr))}
      .segGroup{grid-template-columns:repeat(2,minmax(0,1fr))}
      .homeActionGrid{grid-template-columns:1fr}
      .homeHeroTitle{font-size:24px}
      .n5PracticePrompt{font-size:42px}
      .n5ExamQuestion{font-size:38px}
      .n5ExamEntryGrid{grid-template-columns:1fr}
      .radarRow{
        grid-template-columns:minmax(70px,100px) minmax(48px,58px) 1fr auto;
      }
    }
    @media (max-width:760px){
      .wrap{padding:12px 10px calc(112px + env(safe-area-inset-bottom))}
      #bottomNav .bottomNavBar{width:min(760px,100%)}
      .topbar{padding:9px 10px}
      .row{gap:8px}
      .n5Grid{grid-template-columns:1fr}
      .headerActions{gap:6px;width:100%;justify-content:flex-start}
      .roleSeg{width:100%;grid-template-columns:repeat(2,1fr)}
      .topbar{align-items:flex-start}
      .flashModeSeg{grid-template-columns:1fr}
      .panelHeader{
        position:static;
        margin:-14px -14px 10px -14px;
      }
      .practicePrimaryRow{ grid-template-columns:1fr; }
    }
    @media (min-width:769px){
      .wrap{
        max-width:1280px;
        padding:20px 20px 48px;
      }
      .topbar{
        top:16px;
        min-height:78px;
        gap:18px;
        padding:14px 18px;
        border-radius:24px;
        box-shadow:0 20px 40px rgba(12,23,38,.09);
      }
      .brand b{font-size:22px}
      .headerActions{gap:10px}
      .card{
        padding:18px;
        border-radius:22px;
        box-shadow:0 18px 34px rgba(12,23,38,.08);
      }
      .card h3{
        font-size:12px;
        letter-spacing:.1em;
      }
      .miniTag{
        padding:9px 12px;
        background:color-mix(in srgb, var(--card) 92%, var(--chip) 8%);
      }
      .listItem{
        min-height:92px;
        padding:14px;
        border-radius:18px;
        background:color-mix(in srgb, var(--card) 96%, var(--chip) 4%);
      }
      #bottomNav{
        position:sticky;
        left:auto;
        right:auto;
        bottom:auto;
        top:110px;
        padding:16px 0 0;
        justify-content:stretch;
        z-index:70;
        pointer-events:auto;
      }
      #bottomNav .bottomNavBar{
        width:100%;
        gap:10px;
        padding:10px;
        border-radius:24px;
        grid-template-columns:repeat(auto-fit,minmax(132px,1fr));
        background:color-mix(in srgb, var(--card) 92%, transparent);
        box-shadow:0 18px 36px rgba(12,23,38,.08);
      }
      .bottomNavBtn{
        min-height:48px;
        padding:10px 14px;
        border-radius:16px;
        font-size:14px;
        background:color-mix(in srgb, var(--card) 96%, var(--chip) 4%);
      }
      .bottomNavBtn.active{
        background:linear-gradient(135deg,
          color-mix(in srgb, var(--chip) 72%, var(--card) 28%) 0%,
          color-mix(in srgb, var(--chip) 46%, var(--card) 54%) 100%);
        box-shadow:0 10px 22px rgba(27,50,90,.10);
      }
      body.dark .bottomNavBtn.active{
        box-shadow:0 12px 22px rgba(3,10,20,.34);
      }

      #screenHome{margin-top:18px !important}
      .homePremiumGrid{
        grid-template-columns:repeat(12,minmax(0,1fr));
        gap:18px;
        align-items:start;
      }
      .homeHero.homeSpanAll{
        grid-column:1 / -1;
        padding:26px 28px;
        border-radius:28px;
        overflow:hidden;
        background:
          radial-gradient(780px 260px at 100% 0%, color-mix(in srgb, var(--chip) 28%, transparent), transparent 64%),
          linear-gradient(135deg,
            color-mix(in srgb, var(--chip) 34%, var(--card) 66%) 0%,
            color-mix(in srgb, var(--card) 96%, var(--chip) 4%) 100%);
      }
      .homeHeroInner{
        display:grid;
        grid-template-columns:minmax(0,1.35fr) auto;
        gap:18px;
        align-items:end;
      }
      .homeHeroTitle{
        margin-top:6px;
        font-size:clamp(36px,4vw,50px);
        line-height:1.02;
        letter-spacing:-.04em;
      }
      .homeHeroSub{
        margin-top:12px;
        max-width:54ch;
        font-size:15px;
        line-height:1.55;
      }
      .homeProgressCard{
        grid-column:span 7;
        min-height:248px;
        padding:24px;
      }
      .homeMissionCard{
        grid-column:span 5;
        min-height:248px;
      }
      .homeRecommendationCard,
      .homeQuickStatsCard,
      .homeTierCard{
        grid-column:span 4;
        min-height:208px;
      }
      .homeLeaderboardCard{
        grid-column:span 7;
      }
      .homeWinnerCard{
        grid-column:span 5;
      }
      .homeProgressCard .ring{
        width:108px;
        height:108px;
      }
      .homeProgressCard .ringInner{
        width:82px;
        height:82px;
      }
      .homeStatHeadline{
        font-size:24px;
        letter-spacing:-.03em;
      }
      .homeActionGrid{
        gap:10px;
        margin-top:12px;
      }
      .homeActionGrid .btn{
        width:100%;
      }
      .homeRecommendRow{
        align-items:flex-start;
        gap:16px;
      }
      #leaderList{gap:12px !important}
      .winnerMain{
        font-size:28px;
        letter-spacing:-.02em;
      }
      .winnerMeta{
        font-size:14px;
        line-height:1.5;
      }

      #screenKana .grid{
        grid-template-columns:minmax(0,900px);
        justify-content:center;
        gap:18px;
        align-items:start;
      }
      #screenKana .kanaJourneyCard{
        padding:24px;
        background:
          radial-gradient(380px 220px at 0% 0%, color-mix(in srgb, var(--chip) 18%, transparent), transparent 72%),
          var(--surface-1);
      }
      #screenKana .kanaJourneyHeader{
        display:flex;
        align-items:flex-start;
        justify-content:space-between;
        gap:16px;
        flex-wrap:wrap;
      }
      #screenKana .kanaJourneyEyebrow{
        display:inline-flex;
        align-items:center;
        gap:8px;
        padding:6px 10px;
        border-radius:999px;
        border:1px solid var(--border);
        background:color-mix(in srgb, var(--chip) 72%, transparent);
        font-size:12px;
        font-weight:800;
        letter-spacing:.08em;
        text-transform:uppercase;
        color:var(--muted);
      }
      #screenKana .kanaJourneyTitle{
        margin:10px 0 0;
        font-size:clamp(28px, 4vw, 36px);
        letter-spacing:-.03em;
        line-height:1.05;
      }
      #screenKana .kanaJourneyMeta{
        display:flex;
        gap:8px;
        flex-wrap:wrap;
      }
      #screenKana .kanaJourneyGrid{
        display:grid;
        grid-template-columns:repeat(2,minmax(0,1fr));
        gap:14px;
        margin-top:16px;
      }
      #screenKana .kanaJourneyBlock{
        display:flex;
        flex-direction:column;
        gap:10px;
        padding:16px;
        border:1px solid var(--border);
        border-radius:22px;
        background:color-mix(in srgb, var(--card) 95%, var(--chip) 5%);
      }
      #screenKana .kanaFocusChips{
        display:flex;
        flex-wrap:wrap;
        gap:8px;
      }
      #screenKana .kanaFocusChip{
        min-width:44px;
        padding:10px 12px;
        border:1px solid var(--border);
        border-radius:999px;
        background:color-mix(in srgb, var(--card) 92%, var(--chip) 8%);
        font-weight:900;
        text-align:center;
      }
      #screenKana .kanaFocusChip.isEmpty{
        min-width:0;
        font-weight:700;
        color:var(--muted);
      }
      #screenKana .kanaQuickActions{
        display:grid;
        grid-template-columns:repeat(2,minmax(0,1fr));
        gap:10px;
      }
      #screenKana .kanaPracticePanel{
        padding:26px;
        background:
          radial-gradient(420px 220px at 100% 0%, color-mix(in srgb, var(--chip) 16%, transparent), transparent 70%),
          var(--surface-1);
      }
      #screenKana .kanaModeTabs{
        display:grid;
        grid-template-columns:repeat(3,minmax(0,1fr));
      }
      #screenKana .kanaSetTabs{
        display:grid;
        grid-template-columns:repeat(4,minmax(0,1fr));
      }
      #screenKana .kanaModeTabs .seg,
      #screenKana .kanaSetTabs .seg{
        justify-content:center;
        text-align:center;
      }
      #screenKana .big{
        min-height:240px;
        margin-top:14px;
        padding:18px;
        border:none;
        border-radius:22px;
        background:transparent;
        font-size:clamp(108px,11vw,168px);
      }
      #screenKana .kanaActionBar{
        margin-top:16px;
        gap:10px;
        justify-content:center;
      }
      #screenKana .kanaActionBar .btn{
        flex:0 0 auto;
        min-width:136px;
      }
      #screenKana .choices{
        margin-top:18px;
        gap:14px;
        grid-template-columns:repeat(2,minmax(0,1fr));
      }
      #screenKana .choice{
        min-height:88px;
        border-radius:18px;
        font-size:22px;
      }
      #screenKana .feedback{
        margin-top:14px;
        padding:12px 14px;
        border-radius:14px;
        background:color-mix(in srgb, var(--card) 92%, var(--chip) 8%);
      }
      #screenKana .feedback:empty{
        display:none;
      }

      #screenN5 .grid{
        grid-template-columns:minmax(0,1040px);
        justify-content:center;
        gap:18px;
        align-items:start;
      }
      #n5ContentCard{
        min-height:560px;
        width:min(1024px,100%);
        padding:0 24px 24px;
        border-radius:28px;
      }
      #n5ContentCard .panelHeader{
        margin:-24px -24px 22px -24px;
        padding:24px 24px 22px;
        border-radius:28px 28px 0 0;
        background:
          linear-gradient(180deg,
            color-mix(in srgb, var(--card) 98%, var(--chip) 2%) 0%,
            color-mix(in srgb, var(--card) 95%, var(--chip) 5%) 100%);
      }
      #screenN5 .n5HeroMain{
        align-items:flex-start;
      }
      #screenN5 .n5ControlGrid{
        grid-template-columns:minmax(0,1fr) minmax(0,1.08fr);
      }
      #screenN5 .n5StepCard{
        min-height:228px;
      }
      #screenN5 .n5WorkspaceShell{
        grid-template-columns:220px minmax(0,1fr);
      }
      #screenN5 .n5WorkspaceSurface{
        padding:24px;
      }
      #n5Search{
        min-height:48px;
        border-radius:16px;
        background:color-mix(in srgb, var(--card) 96%, var(--chip) 4%);
      }
      #n5List{
        display:grid !important;
        grid-template-columns:repeat(2,minmax(0,1fr));
        gap:14px;
      }
      #n5List .listItem,
      #n5List .card{
        min-height:176px;
        border-radius:20px;
        align-items:flex-start;
        flex-direction:column;
        justify-content:space-between;
        background:
          linear-gradient(180deg,
            color-mix(in srgb, var(--card) 96%, var(--chip) 4%) 0%,
            color-mix(in srgb, var(--card) 92%, var(--chip) 8%) 100%);
      }
      .practicePrimaryRow{
        gap:10px;
        grid-template-columns:repeat(2,minmax(0,1fr));
      }
      #screenN5 .n5InlineActionRow{
        grid-template-columns:repeat(4,minmax(0,1fr));
      }
      #screenN5 .n5ActionBtn{
        min-height:100px;
      }
      #screenN5 .n5WorkspaceGrid{
        grid-template-columns:repeat(3,minmax(0,1fr));
      }
      #screenN5 .n5ExamOverview{
        grid-template-columns:repeat(3,minmax(0,1fr));
      }
      #screenN5 .n5ExamEntryGrid{
        grid-template-columns:repeat(2,minmax(0,1fr));
      }
      #screenN5 .n5QuizSetupGrid{
        grid-template-columns:minmax(0,180px) 1fr;
      }
      .n5PracticeChoices{
        gap:12px;
      }
      .n5ExamChoices{
        gap:12px;
      }
      #n5ExamQuestionWrap,
      #n5ExamResultWrap,
      #n5ExamEmptyWrap,
      .modalCard{
        border-radius:24px;
      }

      #studentStatsView{
        grid-template-columns:repeat(12,minmax(0,1fr));
        gap:18px;
      }
      #studentStatsView > .card{
        position:relative;
        overflow:hidden;
        grid-column:span 6;
        border-radius:24px;
        background:var(--surface-1);
      }
      #studentStatsView > .card::before{
        content:"";
        position:absolute;
        inset:0;
        background:radial-gradient(320px 180px at 100% 0%, color-mix(in srgb, var(--chip) 16%, transparent), transparent 72%);
        pointer-events:none;
      }
      #studentStatsView > .card > *{
        position:relative;
        z-index:1;
      }
      #studentStatsView > .studentSummaryCard{
        grid-column:span 7;
        background:
          radial-gradient(460px 220px at 100% 0%, color-mix(in srgb, var(--chip) 18%, transparent), transparent 72%),
          linear-gradient(135deg,
            color-mix(in srgb, var(--chip) 18%, var(--card) 82%) 0%,
            color-mix(in srgb, var(--card) 96%, var(--chip) 4%) 100%);
      }
      #studentStatsView > .studentProfileCard,
      #studentStatsView > .studentHistoryCard{
        display:none;
      }
      #studentStatsView > .studentWeakCard{
        grid-column:span 5;
      }
      #studentStatsView > .studentCategoryCard,
      #studentStatsView > .studentWeekCard{
        grid-column:span 6;
      }
      #studentStatsView > .studentMilestoneCard{
        grid-column:1 / -1;
      }
      #screenStudent #studentMiniRing{
        width:120px;
        height:120px;
      }
      #screenStudent #studentMiniRing .ringInner{
        width:86px;
        height:86px;
      }
      #screenStudent .studentSectionIntro{
        display:flex;
        align-items:flex-start;
        justify-content:space-between;
        gap:14px;
        flex-wrap:wrap;
      }
      #screenStudent .studentSectionTitle{
        font-size:24px;
        line-height:1.1;
        font-weight:950;
        letter-spacing:-.02em;
        margin:2px 0 0;
        font-family:"Solway", ui-serif, Georgia, serif;
      }
      #screenStudent .studentSummaryBody{
        display:grid;
        grid-template-columns:minmax(240px,.92fr) minmax(0,1.08fr);
        gap:18px;
        align-items:center;
      }
      #screenStudent .studentSummaryRingBlock{
        display:flex;
        flex-direction:column;
        gap:14px;
      }
      #screenStudent .studentOverviewHero{
        display:flex;
        align-items:center;
        gap:18px;
        flex-wrap:wrap;
      }
      #screenStudent .studentRingContent{
        display:flex;
        flex-direction:column;
        gap:6px;
        align-items:center;
        justify-content:center;
        text-align:center;
      }
      #screenStudent .studentRingLabel{
        font-size:11px;
        letter-spacing:.08em;
        text-transform:uppercase;
        color:var(--muted);
        font-weight:900;
      }
      #screenStudent .studentRingValue{
        font-size:clamp(28px,3.6vw,42px);
        line-height:1;
        font-weight:950;
        letter-spacing:-.03em;
      }
      #screenStudent .studentRingSub{
        font-size:11px;
        line-height:1.35;
        color:var(--muted);
        max-width:92px;
      }
      #screenStudent .studentSummaryFocus{
        display:flex;
        flex-direction:column;
        gap:12px;
        min-width:0;
        flex:1 1 220px;
      }
    #screenStudent .studentSummaryHeadline{
      font-size:24px;
      line-height:1.2;
      font-weight:950;
      letter-spacing:-.02em;
      font-family:"Solway", ui-serif, Georgia, serif;
    }
    #screenStudent .studentIdentityShell{
      display:grid;
      gap:16px;
    }
    #screenStudent .studentIdentityHeader{
      display:grid;
      grid-template-columns:minmax(0, 1fr) auto;
      gap:16px;
      align-items:center;
    }
    #screenStudent .studentIdentityProfile{
      display:flex;
      align-items:center;
      gap:14px;
      min-width:0;
    }
    #screenStudent .studentIdentityAvatar{
      width:56px;
      height:56px;
      border-radius:999px;
      display:grid;
      place-items:center;
      flex:0 0 auto;
      font-size:20px;
      line-height:1;
      font-weight:950;
      letter-spacing:-.03em;
      color:var(--text);
      border:1px solid color-mix(in srgb, var(--chip) 34%, var(--border) 66%);
      background:
        radial-gradient(circle at 30% 30%, color-mix(in srgb, white 74%, var(--chip) 26%), transparent 58%),
        color-mix(in srgb, var(--card) 88%, var(--chip) 12%);
      box-shadow:inset 0 1px 0 rgba(255,255,255,.35);
    }
    #screenStudent .studentIdentityMeta{
      min-width:0;
      display:grid;
      gap:6px;
    }
    #screenStudent .studentIdentityName{
      font-size:24px;
      line-height:1.08;
      font-weight:950;
      letter-spacing:-.03em;
      overflow-wrap:anywhere;
      font-family:"Solway", ui-serif, Georgia, serif;
    }
    #screenStudent .studentIdentitySub{
      font-size:13px;
      line-height:1.5;
      color:var(--muted);
    }
    #screenStudent .studentLevelBadge{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      min-height:30px;
      padding:6px 12px;
      border-radius:999px;
      border:1px solid color-mix(in srgb, var(--chip) 30%, var(--border) 70%);
      background:color-mix(in srgb, var(--card) 92%, var(--chip) 8%);
      font-size:12px;
      font-weight:900;
      letter-spacing:.02em;
      color:var(--text);
      width:max-content;
      transition:transform .2s ease;
    }
    #screenStudent .studentLevelBadge.isLevelUp{
      transform:scale(1.04);
    }
    #screenStudent .studentIdentityHeader .btn{
      min-width:180px;
    }
    #screenStudent .studentXpCard{
      display:grid;
      gap:10px;
      padding:16px;
      border:1px solid color-mix(in srgb, var(--border) 88%, var(--chip) 12%);
      border-radius:22px;
      background:color-mix(in srgb, var(--card) 95%, var(--chip) 5%);
    }
    #screenStudent .studentXpTop{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:10px;
      flex-wrap:wrap;
    }
    #screenStudent .studentXpLabel{
      font-size:11px;
      font-weight:900;
      letter-spacing:.08em;
      text-transform:uppercase;
      color:var(--muted);
    }
    #screenStudent .studentXpValue{
      font-size:24px;
      line-height:1;
      font-weight:950;
      letter-spacing:-.03em;
      font-family:"Solway", ui-serif, Georgia, serif;
    }
    #screenStudent .studentXpTrack{
      height:10px;
      border-radius:999px;
      overflow:hidden;
      border:1px solid var(--border);
      background:color-mix(in srgb, var(--card) 88%, var(--chip) 12%);
    }
    #screenStudent .studentXpFill{
      width:0;
      height:100%;
      border-radius:999px;
      background:linear-gradient(90deg,#2f6cbf 0%, #7ea7dc 100%);
      transition:width .2s ease, transform .2s ease;
      transform-origin:left center;
    }
    #screenStudent .studentXpFill.isLevelUp{
      transform:scaleY(1.18);
    }
    #screenStudent .studentXpMeta{
      font-size:13px;
      line-height:1.5;
      color:var(--muted);
    }
    #screenStudent .studentIdentityStats{
      display:grid;
      grid-template-columns:repeat(3, minmax(0,1fr));
      gap:12px;
    }
    #screenStudent .studentIdentityStat{
      min-height:108px;
      padding:16px;
      border:1px solid color-mix(in srgb, var(--border) 88%, var(--chip) 12%);
      border-radius:20px;
      background:color-mix(in srgb, var(--card) 94%, var(--chip) 6%);
      display:grid;
      gap:8px;
      align-content:start;
    }
    #screenStudent .studentIdentityStatValue{
      font-size:clamp(28px,3.2vw,40px);
      line-height:1;
      font-weight:950;
      letter-spacing:-.03em;
      font-family:"Solway", ui-serif, Georgia, serif;
    }
    #screenStudent .studentIdentityStatLabel{
      font-size:12px;
      line-height:1.45;
      color:var(--muted);
      font-weight:800;
    }
    #screenStudent .studentIdentityNote{
      display:grid;
      gap:8px;
    }
    #screenStudent .studentIdentityMetaRow{
      display:flex;
      flex-wrap:wrap;
      gap:8px;
    }
    #screenStudent .studentIdentityMetaRow .miniTag{
      min-height:32px;
      padding:7px 10px;
    }
      #screenStudent .studentMetricGrid{
        display:grid;
        grid-template-columns:repeat(2,minmax(0,1fr));
        gap:12px;
      }
      #screenStudent .studentMetricTile,
      #screenStudent .studentMilestoneTile{
        min-height:108px;
        padding:16px;
        border:1px solid color-mix(in srgb, var(--border) 88%, var(--chip) 12%);
        border-radius:20px;
        background:color-mix(in srgb, var(--card) 94%, var(--chip) 6%);
      }
      #screenStudent .studentMetricTile b,
      #screenStudent .studentMilestoneTile b{
        display:block;
        margin-top:10px;
        font-size:clamp(28px,3.2vw,40px);
        line-height:1;
        font-weight:950;
        letter-spacing:-.03em;
      }
      #screenStudent .studentMetricTile .note,
      #screenStudent .studentMilestoneTile .note{
        margin-top:10px;
      }
      #screenStudent .studentWeakList{
        display:flex;
        flex-direction:column;
        gap:12px;
      }
      #screenStudent .studentWeakGroup{
        display:flex;
        flex-direction:column;
        align-items:flex-start;
        justify-content:flex-start;
        gap:10px;
        padding:14px;
        border:1px solid color-mix(in srgb, var(--border) 88%, var(--chip) 12%);
        border-radius:20px;
        background:color-mix(in srgb, var(--card) 95%, var(--chip) 5%);
      }
      #screenStudent .studentWeakGroupHead{
        display:flex;
        align-items:center;
        justify-content:space-between;
        gap:12px;
        width:100%;
      }
      #screenStudent .studentWeakGroupTitle{
        font-weight:900;
      }
      #screenStudent .studentWeakGroupMeta,
      #screenStudent .studentWeakItemMeta{
        font-size:12px;
        color:var(--muted);
      }
      #screenStudent .studentWeakChips{
        display:flex;
        flex-wrap:wrap;
        gap:8px;
      }
      #screenStudent .studentWeakChip{
        display:inline-flex;
        align-items:center;
        min-height:34px;
        padding:8px 12px;
        border-radius:999px;
        border:1px solid var(--border);
        background:color-mix(in srgb, var(--card) 90%, var(--chip) 10%);
        font-weight:800;
        font-size:13px;
      }
      #screenStudent .studentWeakChip.isEmpty{
        color:var(--muted);
        font-weight:700;
      }
      #screenStudent .studentCardActions{
        display:flex;
        align-items:center;
        gap:10px;
        flex-wrap:wrap;
        margin-top:12px;
      }
      #screenStudent .studentActivityGrid{
        display:grid;
        grid-template-columns:repeat(3,minmax(0,1fr));
        gap:12px;
      }
      #screenStudent .studentActivityTile{
        min-height:108px;
        padding:16px;
        border:1px solid color-mix(in srgb, var(--border) 88%, var(--chip) 12%);
        border-radius:20px;
        background:color-mix(in srgb, var(--card) 95%, var(--chip) 5%);
      }
      #screenStudent .studentActivityValue{
        margin-top:10px;
        font-size:clamp(30px,3.5vw,42px);
        line-height:1;
        font-weight:950;
        letter-spacing:-.03em;
      }
      #screenStudent .studentActivityValueSmall{
        font-size:clamp(18px,2vw,24px);
        line-height:1.2;
      }
      #screenStudent .studentSuggestedAction{
        margin-top:16px;
        padding:16px;
        border:1px solid color-mix(in srgb, var(--border) 86%, var(--chip) 14%);
        border-radius:20px;
        background:color-mix(in srgb, var(--card) 94%, var(--chip) 6%);
      }
      #screenStudent .studentSuggestedLabel{
        font-size:12px;
        letter-spacing:.08em;
        text-transform:uppercase;
        color:var(--muted);
        font-weight:900;
      }
      #screenStudent .studentSuggestedTitle{
        margin-top:8px;
        font-size:22px;
        line-height:1.2;
        font-weight:950;
        letter-spacing:-.02em;
        font-family:"Solway", ui-serif, Georgia, serif;
      }
      #screenStudent .studentPerfRows{
        display:flex;
        flex-direction:column;
        gap:12px;
      }
      #screenStudent .studentPerfRow{
        display:flex;
        flex-direction:column;
        gap:10px;
        padding:14px;
        border:1px solid color-mix(in srgb, var(--border) 88%, var(--chip) 12%);
        border-radius:20px;
        background:color-mix(in srgb, var(--card) 95%, var(--chip) 5%);
      }
      #screenStudent .studentPerfRow.isEmpty{
        opacity:.82;
      }
      #screenStudent .studentPerfHead{
        display:flex;
        align-items:center;
        justify-content:space-between;
        gap:10px;
      }
      #screenStudent .studentPerfLabel{
        font-weight:900;
      }
      #screenStudent .studentPerfValue{
        font-weight:950;
        font-size:18px;
        letter-spacing:-.02em;
      }
      #screenStudent .studentPerfTrack{
        width:100%;
        height:10px;
        border-radius:999px;
        border:1px solid var(--border);
        background:color-mix(in srgb, var(--card) 96%, var(--chip) 4%);
        overflow:hidden;
      }
      #screenStudent .studentPerfFill{
        height:100%;
        width:0%;
        background:linear-gradient(90deg,#2f6cbf 0%, #7ea7dc 100%);
        transition:width .24s ease;
      }
      #screenStudent .studentPerfMeta{
        font-size:12px;
        color:var(--muted);
        line-height:1.5;
      }
      #screenStudent .studentWeekMeta{
        margin-top:12px;
      }
      #screenStudent .studentMilestoneGrid{
        display:grid;
        grid-template-columns:repeat(4,minmax(0,1fr));
        gap:12px;
      }
      #screenStudent .studentMilestoneDetails{
        display:grid;
        grid-template-columns:minmax(0,1.04fr) minmax(280px,.96fr);
        gap:16px;
        align-items:start;
      }
      #screenStudent .studentMilestonePanel{
        display:flex;
        flex-direction:column;
        gap:12px;
      }
      #screenStudent .miniTag{
        background:color-mix(in srgb, var(--card) 92%, var(--chip) 8%);
      }
      #screenStudent .barTrack{
        height:88px;
        border-radius:14px;
        background:color-mix(in srgb, var(--card) 92%, var(--chip) 8%);
      }
      #screenStudent .bars{
        margin-top:14px;
        gap:10px;
      }

      #screenTeacher .teacherDashboardGrid{
        grid-template-columns:repeat(12,minmax(0,1fr));
        gap:18px;
      }
      #screenTeacher .teacherDashboardGrid > .card{
        position:relative;
        overflow:hidden;
        grid-column:span 6;
        border-radius:24px;
        background:var(--surface-1);
      }
      #screenTeacher .teacherDashboardGrid > .card::before{
        content:"";
        position:absolute;
        inset:0;
        background:radial-gradient(360px 180px at 100% 0%, color-mix(in srgb, var(--chip) 16%, transparent), transparent 72%);
        pointer-events:none;
      }
      #screenTeacher .teacherDashboardGrid > .card > *{
        position:relative;
        z-index:1;
      }
      #screenTeacher .teacherHeroCard{
        grid-column:1 / -1;
        background:
          radial-gradient(520px 220px at 100% 0%, color-mix(in srgb, var(--chip) 22%, transparent), transparent 70%),
          linear-gradient(135deg,
            color-mix(in srgb, var(--chip) 18%, var(--card) 82%) 0%,
            color-mix(in srgb, var(--card) 96%, var(--chip) 4%) 100%);
      }
      #screenTeacher .teacherHealthCard{
        grid-column:span 7;
      }
      #screenTeacher .teacherTopCard{
        grid-column:span 5;
      }
      #screenTeacher .teacherNeedsCard,
      #screenTeacher .teacherNudgeCard{
        grid-column:span 6;
      }
      #screenTeacher .teacherPrototypeCard,
      #screenTeacher .teacherActionsCard{
        grid-column:span 6;
      }
      #screenTeacher .teacherRadarCard{
        grid-column:1 / -1;
      }
      #screenTeacher .teacherHealthGrid{
        grid-template-columns:repeat(4,minmax(0,1fr));
        gap:12px;
      }
      #screenTeacher .metricTile{
        min-height:108px;
        padding:16px;
        border-radius:18px;
        background:color-mix(in srgb, var(--card) 94%, var(--chip) 6%);
      }
      #screenTeacher .metricTile b{
        font-size:clamp(30px,3.4vw,42px);
      }
      #screenTeacher .teacherRows{
        gap:12px;
      }
      #screenTeacher .teacherNeedsCard .listItem{
        background:color-mix(in srgb, var(--card) 88%, #ffe9ec 12%);
        border-color:color-mix(in srgb, var(--border) 72%, #ef9fb0 28%);
      }
      #screenTeacher .teacherNudgeCard .listItem{
        background:color-mix(in srgb, var(--card) 88%, #e8f0ff 12%);
        border-color:color-mix(in srgb, var(--border) 70%, #9fbcf7 30%);
      }

      #screenSettings .settingsGrid{
        grid-template-columns:minmax(0,1.08fr) minmax(320px,.92fr);
        gap:18px;
      }
      #screenSettings .card{
        min-height:100%;
        border-radius:24px;
      }
      #screenSettings .input{
        min-height:48px;
        border-radius:14px;
        background:color-mix(in srgb, var(--card) 96%, var(--chip) 4%);
      }
    }
    @media (min-width:769px) and (max-width:1120px){
      .homeProgressCard,
      .homeMissionCard,
      .homeRecommendationCard,
      .homeQuickStatsCard,
      .homeTierCard,
      .homeLeaderboardCard,
      .homeWinnerCard{
        grid-column:span 6;
      }
      #screenKana .grid,
      #screenN5 .grid{
        grid-template-columns:1fr;
      }
      #screenN5 .n5HeroMain{
        flex-direction:column;
      }
      #screenN5 .n5HeroTools{
        width:100%;
        justify-content:flex-start;
      }
      #screenN5 .n5ControlGrid,
      #screenN5 .n5WorkspaceShell{
        grid-template-columns:1fr;
      }
      #screenN5 .n5WorkspaceGrid,
      #screenN5 .n5ExamOverview{
        grid-template-columns:repeat(2,minmax(0,1fr));
      }
      #screenN5 .n5ExamEntryGrid,
      #screenN5 .practicePrimaryRow{
        grid-template-columns:repeat(2,minmax(0,1fr));
      }
      #screenN5 .n5QuizSetupGrid{
        grid-template-columns:1fr;
      }
      .n5SetRow{
        grid-template-columns:repeat(2,minmax(0,1fr));
      }
      #studentStatsView > .studentSummaryCard,
      #studentStatsView > .studentWeakCard,
      #studentStatsView > .studentCategoryCard,
      #studentStatsView > .studentWeekCard{
        grid-column:span 6;
      }
      #studentStatsView > .studentMilestoneCard{
        grid-column:1 / -1;
      }
      #screenStudent .studentSummaryBody,
      #screenStudent .studentMilestoneDetails{
        grid-template-columns:1fr;
      }
      #screenStudent .studentActivityGrid{
        grid-template-columns:1fr;
      }
      #screenStudent .studentMilestoneGrid{
        grid-template-columns:repeat(2,minmax(0,1fr));
      }
      #screenTeacher .teacherHealthCard,
      #screenTeacher .teacherTopCard,
      #screenTeacher .teacherNeedsCard,
      #screenTeacher .teacherNudgeCard,
      #screenTeacher .teacherPrototypeCard,
      #screenTeacher .teacherActionsCard{
        grid-column:span 6;
      }
      #screenTeacher .teacherHealthGrid{
        grid-template-columns:repeat(2,minmax(0,1fr));
      }
    }
    @media (max-width:740px){
      #studentStatsView{
        grid-template-columns:1fr;
        gap:14px;
      }
      #studentStatsView > .studentSummaryCard,
      #studentStatsView > .studentWeakCard,
      #studentStatsView > .studentCategoryCard,
      #studentStatsView > .studentWeekCard,
      #studentStatsView > .studentMilestoneCard{
        grid-column:1 / -1;
      }
      #screenStudent .studentSummaryBody,
      #screenStudent .studentMilestoneDetails{
        grid-template-columns:1fr;
      }
      #screenStudent .studentOverviewHero{
        flex-direction:column;
        align-items:flex-start;
      }
      #screenStudent .studentMetricGrid,
      #screenStudent .studentMilestoneGrid,
      #screenStudent .studentActivityGrid{
        grid-template-columns:1fr;
      }
      #screenKana .kanaJourneyGrid,
      #screenKana .kanaQuickActions{
        grid-template-columns:1fr;
      }
      #screenStudent .studentCardActions .btn{
        width:100%;
      }
      .kanaPracticeHeader,
      .kanaChartHeader,
      .kanaChartFooter,
      .n5HeroMain,
      .n5HeroTools,
      .practiceHeader,
      .n5WorkspaceMeta,
      .n5StageHead,
      .n5FooterBar,
      .n5BrowseModalHeader,
      .n5BrowseModalMeta{
        flex-direction:column;
        align-items:stretch;
      }
      .kanaToolbar .btn{
        flex:1 1 auto;
      }
      .n5InlineActionRow{
        grid-template-columns:repeat(2,minmax(0,1fr));
      }
      .n5ControlGrid,
      .n5WorkspaceShell,
      .n5WorkspaceSearchRow,
      .n5ExamOverview{
        grid-template-columns:1fr;
      }
      .n5CategorySeg{
        grid-template-columns:repeat(2,minmax(0,1fr));
      }
      .n5ActionBtn{
        min-height:96px;
      }
      .n5SetRow{
        grid-template-columns:repeat(2,minmax(0,1fr));
      }
      .n5WorkspaceGrid{
        grid-template-columns:1fr;
      }
      #n5QuizActionRow{
        flex-direction:column;
        align-items:stretch;
      }
      .n5QuizSetupGrid{
        grid-template-columns:1fr;
      }
      .n5StageActions .btn,
      #n5PracticeStartBtn{
        width:100%;
      }
      .n5WorkspaceStats{
        white-space:normal;
        justify-content:flex-start;
      }
      .n5PanelFooter{
        justify-content:stretch;
      }
      .n5PanelFooter .btn{
        width:100%;
      }
      .n5BrowseModalCard{
        padding:14px;
      }
      .n5BrowseModalBody{
        padding:12px;
        max-height:min(58vh,620px);
      }
      .kanaChartRow,
      .kanaChartRow.isCompact{
        grid-template-columns:repeat(2,minmax(0,1fr));
      }
      .kanaChartModalCard{
        padding:14px;
      }
      .kanaChartBody{
        padding:12px;
      }
      .kanaChartCell{
        min-height:82px;
      }
    }
    .appLayoutBody{
      min-height:100vh;
      position:relative;
    }
    .appLayoutBody::after{
      content:"";
      position:fixed;
      inset:0;
      z-index:32;
      pointer-events:none;
      opacity:0;
      background:
        linear-gradient(180deg,
          color-mix(in srgb, var(--bg) 78%, transparent) 0%,
          color-mix(in srgb, var(--card) 68%, transparent) 100%);
      backdrop-filter:blur(0px);
      transition:opacity .32s ease, backdrop-filter .32s ease;
    }
    .isRoleTransitioning.appLayoutBody::after{
      opacity:.34;
      backdrop-filter:blur(6px);
    }
    .isRoleTransitioning.roleTransitionEntering.appLayoutBody::after{
      opacity:.14;
      backdrop-filter:blur(2px);
    }
    .appBootOverlay{
      position:fixed;
      inset:0;
      z-index:140;
      display:flex;
      align-items:center;
      justify-content:center;
      padding:24px;
      background:
        radial-gradient(720px 320px at 50% 18%, color-mix(in srgb, var(--chip) 22%, transparent), transparent 70%),
        linear-gradient(180deg, color-mix(in srgb, var(--bg) 97%, var(--card) 3%) 0%, var(--bg) 100%);
      opacity:1;
      visibility:visible;
      transition:opacity .42s ease, visibility 0s linear .42s;
    }
    .appBootOverlay.isBootLeaving{
      opacity:0;
      visibility:hidden;
    }
    .appBootOverlay.isBootReady{
      display:none;
    }
    .appBootInner{
      min-width:min(360px,100%);
      display:flex;
      flex-direction:column;
      align-items:center;
      justify-content:center;
      gap:16px;
      text-align:center;
    }
    .appBootTitle{
      font-family:"Solway", ui-serif, Georgia, serif;
      font-size:clamp(42px,8vw,78px);
      line-height:1;
      letter-spacing:-.06em;
      font-weight:950;
      color:var(--text);
    }
    .appBootDots{
      display:flex;
      align-items:center;
      justify-content:center;
      gap:10px;
      min-height:14px;
    }
    .appBootDot{
      width:10px;
      height:10px;
      border-radius:999px;
      background:color-mix(in srgb, var(--chip) 62%, var(--text) 38%);
      box-shadow:0 0 0 1px color-mix(in srgb, var(--border) 56%, transparent);
      animation:appBootDotPulse 1.05s ease-in-out infinite;
    }
    .appBootDot:nth-child(2){animation-delay:.14s}
    .appBootDot:nth-child(3){animation-delay:.28s}
    @keyframes appBootDotPulse{
      0%,80%,100%{
        opacity:.26;
        transform:translateY(0) scale(.84);
      }
      40%{
        opacity:1;
        transform:translateY(-2px) scale(1);
      }
    }
    .appLayout{
      min-height:100vh;
      width:100%;
      display:flex;
      background:transparent;
    }
    .appMainPane{
      flex:1;
      min-height:100vh;
      display:flex;
      flex-direction:column;
    }
    .appMainScroll{
      flex:1;
      overflow-y:auto;
      transition:opacity .26s ease, transform .28s ease;
    }
    .isRoleTransitioning .appMainScroll{
      opacity:.78;
      transform:translateY(8px);
    }
    .appSidebar{
      width:248px;
      height:100vh;
      position:sticky;
      top:0;
      flex-shrink:0;
      overflow:auto;
      display:flex;
      flex-direction:column;
      background:
        linear-gradient(180deg, color-mix(in srgb, var(--card) 96%, var(--chip) 4%) 0%, color-mix(in srgb, var(--card) 90%, var(--chip) 10%) 100%);
      border-right:1px solid color-mix(in srgb, var(--border) 82%, transparent);
      box-shadow:inset -1px 0 0 color-mix(in srgb, var(--border) 35%, transparent);
      transition:width .2s ease, opacity .24s ease, transform .24s ease;
    }
    body[data-app-role="teacher"] .appSidebar{
      background:
        linear-gradient(180deg, color-mix(in srgb, var(--card) 96%, #dde9ff 4%) 0%, color-mix(in srgb, var(--card) 90%, #d9e5fb 10%) 100%);
    }
    body.dark .appSidebar,
    body.dark[data-app-role="teacher"] .appSidebar{
      background:
        linear-gradient(180deg, color-mix(in srgb, var(--card) 94%, var(--chip) 6%) 0%, color-mix(in srgb, var(--card) 88%, var(--chip) 12%) 100%);
      border-right-color:color-mix(in srgb, var(--border) 78%, transparent);
      box-shadow:inset -1px 0 0 color-mix(in srgb, var(--border) 28%, transparent);
    }
    .isRoleTransitioning .appSidebar{
      opacity:.86;
      transform:translateX(-6px);
    }
    body.examMode .appSidebar{
      width:0 !important;
      opacity:0;
      transform:translateX(-18px);
      pointer-events:none;
      overflow:hidden;
      border-right-color:transparent;
      box-shadow:none;
    }
    .appSidebarBrand{
      min-height:72px;
      padding:14px 16px;
      border-bottom:1px solid color-mix(in srgb, var(--border) 82%, transparent);
      display:flex;
      align-items:center;
      gap:12px;
    }
    .appSidebarLogo{
      width:38px;
      height:38px;
      border-radius:14px;
      display:grid;
      place-items:center;
      background:linear-gradient(135deg, color-mix(in srgb, var(--chip) 82%, var(--card) 18%) 0%, color-mix(in srgb, var(--chip) 52%, var(--card) 48%) 100%);
      font-size:11px;
      font-weight:900;
      color:var(--text);
      box-shadow:0 10px 24px rgba(27,50,90,.10);
    }
    .appSidebarBrandText{
      font-family:"Solway", ui-serif, Georgia, serif;
      font-weight:950;
      font-size:19px;
      letter-spacing:-.02em;
    }
    .appSidebarNav{
      flex:1;
      display:flex;
      flex-direction:column;
      gap:8px;
      padding:14px 12px;
    }
    .appSidebarBtn{
      width:100%;
      min-height:48px;
      border:1px solid transparent;
      border-radius:16px;
      background:transparent;
      color:var(--muted);
      display:flex;
      align-items:center;
      gap:10px;
      padding:0 14px;
      text-align:left;
      font-weight:800;
      letter-spacing:-.01em;
      cursor:pointer;
      transition:transform .16s ease, background-color .18s ease, color .18s ease, box-shadow .18s ease;
    }
    .appSidebarBtn[hidden]{display:none !important}
    .appSidebarBtn:hover{
      transform:translateY(-1px);
      background:color-mix(in srgb, var(--chip) 38%, var(--card) 62%);
      color:var(--text);
    }
    .appSidebarBtn.active{
      background:linear-gradient(135deg, color-mix(in srgb, var(--chip) 74%, var(--card) 26%) 0%, color-mix(in srgb, var(--chip) 52%, var(--card) 48%) 100%);
      color:var(--text);
      box-shadow:0 12px 22px rgba(27,50,90,.12);
    }
    body[data-app-role="teacher"] .appSidebarBtn.active{
      background:linear-gradient(135deg, color-mix(in srgb, #d9e9ff 76%, var(--card) 24%) 0%, color-mix(in srgb, #c8dbff 52%, var(--card) 48%) 100%);
    }
    body.dark .appSidebarBtn:hover{
      background:color-mix(in srgb, var(--chip) 26%, var(--card) 74%);
    }
    body.dark .appSidebarBtn.active,
    body.dark[data-app-role="teacher"] .appSidebarBtn.active{
      background:linear-gradient(135deg, color-mix(in srgb, var(--chip) 52%, var(--card) 48%) 0%, color-mix(in srgb, var(--chip) 38%, var(--card) 62%) 100%);
      box-shadow:0 12px 22px rgba(3,10,20,.34);
    }
    .appSidebarGlyph{
      width:30px;
      height:30px;
      border-radius:10px;
      display:grid;
      place-items:center;
      font-size:10px;
      font-weight:900;
      letter-spacing:.08em;
      color:var(--text);
      background:color-mix(in srgb, var(--card) 92%, var(--chip) 8%);
      box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--border) 56%, transparent);
      flex:0 0 30px;
    }
    .appSidebarFooter{
      padding:12px;
      border-top:1px solid color-mix(in srgb, var(--border) 82%, transparent);
      display:flex;
      flex-direction:column;
      gap:10px;
    }
    .appSidebarMeta{
      display:block;
      padding:8px 10px;
      text-align:center;
      background:color-mix(in srgb, var(--card) 92%, var(--chip) 8%);
    }
    .appSidebarToggle{
      width:100%;
      min-height:42px;
      border:1px solid var(--border);
      border-radius:14px;
      background:color-mix(in srgb, var(--card) 92%, var(--chip) 8%);
      color:var(--muted);
      cursor:pointer;
      font-weight:800;
    }
    .appSidebar.collapsed{
      width:84px;
    }
    .appSidebar.collapsed .appSidebarBrandText,
    .appSidebar.collapsed .appSidebarLabel,
    .appSidebar.collapsed .appSidebarMeta{
      display:none;
    }
    .appSidebar.collapsed .appSidebarBtn{
      justify-content:center;
      padding:0;
    }
    .appLayout .wrap.appLayoutWrap{
      margin:0;
      max-width:1380px;
      width:100%;
      padding:18px 22px calc(120px + env(safe-area-inset-bottom));
    }
    .topbar.appTopbar{
      min-height:68px;
      border-radius:22px;
      border:1px solid color-mix(in srgb, var(--border) 80%, transparent);
      background:color-mix(in srgb, var(--card) 92%, transparent);
      box-shadow:0 18px 34px rgba(16,24,40,.06);
      backdrop-filter:blur(14px);
    }
    body.dark .topbar.appTopbar{
      background:color-mix(in srgb, var(--card) 88%, transparent);
      border-color:color-mix(in srgb, var(--border) 78%, transparent);
      box-shadow:0 18px 34px rgba(3,10,20,.34);
    }
    .appTopbarLeft{
      display:flex;
      align-items:center;
      gap:12px;
    }
    .appTopbarBrand b{
      font-size:20px;
      letter-spacing:-.02em;
    }
    .appTopbarBrand .pill{
      margin-top:2px;
    }
    .appTopbarRight{
      gap:8px;
      align-items:center;
    }
    .appTopbar .roleSeg{
      display:inline-grid;
    }
    .appTopbarAvatar{
      width:38px;
      height:38px;
      border-radius:999px;
      border:1px solid var(--border);
      background:color-mix(in srgb, var(--chip) 70%, var(--card) 30%);
      color:var(--text);
      display:grid;
      place-items:center;
      font-weight:900;
      box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--border) 46%, transparent);
      flex:0 0 38px;
    }
    body.dark .appTopbarAvatar{
      background:color-mix(in srgb, var(--chip) 52%, var(--card) 48%);
    }
    @media (min-width:769px){
      .appLayoutBody #bottomNav{
        display:none !important;
      }
      .appLayout .wrap.appLayoutWrap{
        padding:20px 24px 42px;
      }
      .topbar.appTopbar{
        top:16px;
        padding:14px 18px;
      }
      .appTopbarRight .btn{
        min-height:40px;
      }
    }
    @media (max-width:768px){
      .appLayout{
        display:block;
      }
      .appSidebar{
        display:none !important;
      }
      .appMainPane,
      .appMainScroll{
        min-height:auto;
        overflow:visible;
      }
      .appLayout .wrap.appLayoutWrap{
        padding:12px 10px calc(112px + env(safe-area-inset-bottom));
      }
      .topbar.appTopbar{
        border-radius:18px;
      }
      .appTopbarRight{
        width:100%;
        justify-content:flex-start;
      }
      .appTopbarAvatar{
        display:none;
      }
      .appTopbarBrand b{
        font-size:17px;
      }
    }
    /* Home daily path
       Keep Home focused on the next study move without changing the shared
       app shell, navigation, or downstream feature flows. */
    #screenHome .homePremiumGrid{
      grid-template-columns:repeat(12,minmax(0,1fr));
      gap:18px;
      align-items:start;
    }
    #screenHome .homeHero.homeSpanAll{
      grid-column:1 / -1;
      padding:30px;
      border-radius:28px;
      overflow:hidden;
      background:
        radial-gradient(760px 280px at 100% 0%, color-mix(in srgb, var(--chip) 30%, transparent), transparent 64%),
        linear-gradient(135deg,
          color-mix(in srgb, var(--chip) 34%, var(--card) 66%) 0%,
          color-mix(in srgb, var(--card) 97%, var(--chip) 3%) 100%);
    }
    #screenHome .homeHeroShell{
      display:grid;
      grid-template-columns:minmax(0,1.12fr) minmax(300px,.88fr);
      gap:24px;
      align-items:center;
    }
    #screenHome .homeHeroIntro{
      display:grid;
      gap:12px;
      align-content:center;
    }
    #screenHome .homeGreeting{
      font-size:12px;
      font-weight:900;
      letter-spacing:.12em;
      text-transform:uppercase;
      color:var(--muted);
    }
    #screenHome .homeHeroTitle{
      font-size:clamp(34px,4.1vw,52px);
      line-height:1.04;
      letter-spacing:-.04em;
      font-family:"Solway", ui-serif, Georgia, serif;
    }
    #screenHome .homeHeroLevel{
      font-size:14px;
      font-weight:900;
      letter-spacing:.08em;
      text-transform:uppercase;
      color:var(--muted);
    }
    #screenHome .homeHeroSub{
      max-width:52ch;
      font-size:15px;
      line-height:1.7;
      color:var(--muted);
    }
    #screenHome .homeHeroMeta{
      display:flex;
      flex-wrap:wrap;
      gap:8px;
      margin-top:2px;
    }
    #screenHome .homeHeroProgressCard{
      display:grid;
      gap:14px;
      padding:20px;
      border:1px solid var(--border);
      border-radius:24px;
      background:
        linear-gradient(180deg,
          color-mix(in srgb, var(--card) 99%, var(--chip) 1%) 0%,
          color-mix(in srgb, var(--card) 95%, var(--chip) 5%) 100%);
      box-shadow:0 12px 24px rgba(14,24,38,.06);
    }
    #screenHome .homeHeroProgressTop{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:18px;
    }
    #screenHome .homeHeroProgressEyebrow{
      font-size:11px;
      font-weight:900;
      letter-spacing:.08em;
      text-transform:uppercase;
      color:var(--muted);
    }
    #screenHome .homeHeroProgressValue{
      margin-top:6px;
      font-size:clamp(30px,4vw,46px);
      line-height:1;
      font-weight:950;
      font-family:"Solway", ui-serif, Georgia, serif;
      letter-spacing:-.04em;
    }
    #screenHome .homeHeroProgressText{
      font-size:13px;
      line-height:1.55;
      color:var(--muted);
      max-width:24ch;
    }
    #screenHome .homeHeroRingWrap{
      justify-content:flex-end;
      min-width:118px;
    }
    #screenHome .homeHeroProgressCard .ring{
      width:116px;
      height:116px;
    }
    #screenHome .homeHeroProgressCard .ringInner{
      width:84px;
      height:84px;
    }
    #screenHome .homeLevelRail{
      width:100%;
      height:10px;
      border-radius:999px;
      overflow:hidden;
      background:color-mix(in srgb, var(--card) 88%, var(--chip) 12%);
      border:1px solid var(--border);
    }
    #screenHome .homeLevelRailFill{
      height:100%;
      width:0;
      background:linear-gradient(90deg,#2f6cbf 0%, #7ea7dc 100%);
      transition:width .24s ease;
    }
    #screenHome .homeSectionHead{
      display:flex;
      align-items:flex-start;
      justify-content:space-between;
      gap:14px;
      flex-wrap:wrap;
    }
    #screenHome .homeSectionHead h3{
      margin:0;
    }
    #screenHome .homeSectionSub{
      margin-top:6px;
      max-width:56ch;
      color:var(--muted);
      line-height:1.55;
      font-size:13px;
    }
    #screenHome .homePathCard{
      grid-column:span 7;
      display:grid;
      gap:16px;
      min-height:100%;
    }
    #screenHome .homePathProgress{
      display:grid;
      gap:10px;
      padding:16px;
      border:1px solid var(--border);
      border-radius:20px;
      background:
        linear-gradient(180deg,
          color-mix(in srgb, var(--card) 99%, var(--chip) 1%) 0%,
          color-mix(in srgb, var(--card) 95%, var(--chip) 5%) 100%);
    }
    #screenHome .homePathProgressTop{
      display:flex;
      align-items:flex-start;
      justify-content:space-between;
      gap:12px;
      flex-wrap:wrap;
    }
    #screenHome .homePathSummary{
      font-size:14px;
      line-height:1.6;
      color:var(--muted);
      max-width:54ch;
    }
    #screenHome .homePathList{
      display:grid;
      gap:10px;
    }
    #screenHome .homePathStep{
      display:grid;
      grid-template-columns:auto minmax(0,1fr);
      gap:12px;
      align-items:flex-start;
      padding:14px 16px;
      border:1px solid var(--border);
      border-radius:18px;
      background:color-mix(in srgb, var(--card) 97%, var(--chip) 3%);
    }
    #screenHome .homePathStep.isCurrent{
      border-color:color-mix(in srgb, var(--ink) 22%, var(--border) 78%);
      box-shadow:0 0 0 1px color-mix(in srgb, var(--ink) 10%, transparent);
    }
    #screenHome .homePathStep.isComplete{
      background:color-mix(in srgb, var(--chip) 12%, var(--card) 88%);
    }
    #screenHome .homePathMarker{
      width:30px;
      height:30px;
      display:grid;
      place-items:center;
      border-radius:999px;
      border:1px solid var(--border);
      background:color-mix(in srgb, var(--card) 92%, var(--chip) 8%);
      font-size:12px;
      font-weight:900;
      line-height:1;
    }
    #screenHome .homePathStep.isComplete .homePathMarker{
      background:var(--ink);
      border-color:var(--ink);
      color:var(--card);
    }
    #screenHome .homePathBody{
      display:grid;
      gap:6px;
      min-width:0;
    }
    #screenHome .homePathTitleRow{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:12px;
      flex-wrap:wrap;
    }
    #screenHome .homePathTitle{
      font-size:15px;
      line-height:1.4;
      font-weight:900;
    }
    #screenHome .homePathBadge{
      flex:0 0 auto;
    }
    #screenHome .homePathText{
      font-size:13px;
      line-height:1.55;
      color:var(--muted);
    }
    #screenHome .homeContinueAction{
      display:grid;
      gap:10px;
    }
    #screenHome .homeContinueBtn{
      width:100%;
      min-height:72px;
      padding:18px 20px;
      border-radius:20px;
      justify-content:center;
      text-align:center;
      font-size:17px;
    }
    #screenHome .homeContinueMeta{
      font-size:13px;
      line-height:1.55;
      color:var(--muted);
    }
    #screenHome .homeQuickActionsCard{
      grid-column:span 5;
      display:grid;
      gap:16px;
      min-height:100%;
    }
    #screenHome .homeProgressIdentityCard{
      grid-column:span 5;
      display:grid;
      gap:16px;
      min-height:100%;
      background:
        radial-gradient(380px 180px at 100% 0%, color-mix(in srgb, var(--chip) 20%, transparent), transparent 72%),
        linear-gradient(145deg,
          color-mix(in srgb, var(--chip) 18%, var(--card) 82%) 0%,
          color-mix(in srgb, var(--card) 97%, var(--chip) 3%) 100%);
    }
    #screenHome .homeProgressIdentityHead{
      display:flex;
      align-items:flex-start;
      justify-content:space-between;
      gap:12px;
      flex-wrap:wrap;
    }
    #screenHome .homeProgressIdentityTitle{
      font-size:24px;
      line-height:1.1;
      letter-spacing:-.03em;
      font-weight:950;
      font-family:"Solway", ui-serif, Georgia, serif;
    }
    #screenHome .homeProgressIdentitySub{
      margin-top:6px;
      font-size:13px;
      line-height:1.55;
      color:var(--muted);
    }
    #screenHome .homeProgressLevelPill{
      min-height:32px;
      padding:7px 12px;
    }
    #screenHome .homeProgressIdentityRail{
      display:grid;
      gap:10px;
      padding:16px;
      border:1px solid var(--border);
      border-radius:20px;
      background:color-mix(in srgb, var(--card) 95%, var(--chip) 5%);
    }
    #screenHome .homeProgressIdentityTop{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:10px;
      flex-wrap:wrap;
    }
    #screenHome .homeProgressIdentityValue{
      font-size:24px;
      line-height:1;
      font-weight:950;
      letter-spacing:-.03em;
      font-family:"Solway", ui-serif, Georgia, serif;
    }
    #screenHome .homeProgressMiniTrack{
      height:10px;
      border-radius:999px;
      overflow:hidden;
      border:1px solid var(--border);
      background:color-mix(in srgb, var(--card) 88%, var(--chip) 12%);
    }
    #screenHome .homeProgressMiniFill{
      width:0;
      height:100%;
      border-radius:999px;
      background:linear-gradient(90deg,#2f6cbf 0%, #7ea7dc 100%);
      transition:width .2s ease, transform .2s ease;
      transform-origin:left center;
    }
    #screenHome .homeProgressMiniFill.isLevelUp{
      transform:scaleY(1.18);
    }
    #screenHome .homeProgressMiniMeta{
      font-size:13px;
      line-height:1.55;
      color:var(--muted);
    }
    #screenHome .homeProgressStats{
      display:grid;
      grid-template-columns:repeat(3, minmax(0,1fr));
      gap:10px;
    }
    #screenHome .homeProgressStat{
      padding:14px;
      border:1px solid var(--border);
      border-radius:18px;
      background:color-mix(in srgb, var(--card) 96%, var(--chip) 4%);
      display:grid;
      gap:6px;
    }
    #screenHome .homeProgressStatValue{
      font-size:22px;
      line-height:1;
      font-weight:950;
      letter-spacing:-.03em;
      font-family:"Solway", ui-serif, Georgia, serif;
    }
    #screenHome .homeProgressStatLabel{
      font-size:12px;
      line-height:1.45;
      color:var(--muted);
      font-weight:800;
    }
    #screenHome .homeQuickActionsGrid{
      display:grid;
      grid-template-columns:repeat(2,minmax(0,1fr));
      gap:12px;
    }
    #screenHome .homeQuickActionBtn{
      width:100%;
      min-height:96px;
      padding:16px 18px;
      border-radius:20px;
      display:flex;
      flex-direction:column;
      align-items:flex-start;
      justify-content:flex-start;
      gap:6px;
      text-align:left;
      white-space:normal;
    }
    #screenHome .homeQuickActionLabel{
      font-size:15px;
      font-weight:900;
      line-height:1.35;
    }
    #screenHome .homeQuickActionText{
      font-size:12px;
      line-height:1.5;
      color:var(--muted);
    }
    #screenHome .homeQuickSupportRow{
      gap:10px;
      flex-wrap:wrap;
      margin-top:auto;
    }
    #screenHome .homeInsightCard{
      grid-column:span 7;
      display:grid;
      gap:16px;
    }
    #screenHome .homeInsightSurface{
      display:grid;
      gap:14px;
      padding:18px;
      border:1px solid var(--border);
      border-radius:22px;
      background:
        linear-gradient(180deg,
          color-mix(in srgb, var(--card) 99%, var(--chip) 1%) 0%,
          color-mix(in srgb, var(--card) 95%, var(--chip) 5%) 100%);
    }
    #screenHome .homeInsightEyebrow{
      font-size:11px;
      font-weight:900;
      letter-spacing:.08em;
      text-transform:uppercase;
      color:var(--muted);
    }
    #screenHome .homeInsightTitle{
      font-size:22px;
      line-height:1.25;
      font-weight:950;
      letter-spacing:-.02em;
      font-family:"Solway", ui-serif, Georgia, serif;
    }
    #screenHome .homeInsightText{
      color:var(--muted);
      line-height:1.6;
      max-width:60ch;
    }
    #screenHome .homeInsightMetaGrid{
      display:grid;
      grid-template-columns:repeat(3,minmax(0,1fr));
      gap:10px;
    }
    #screenHome .homeInsightMetric{
      display:grid;
      gap:6px;
      padding:14px 16px;
      border:1px solid var(--border);
      border-radius:18px;
      background:color-mix(in srgb, var(--card) 96%, var(--chip) 4%);
    }
    #screenHome .homeInsightMetricLabel{
      font-size:11px;
      font-weight:900;
      letter-spacing:.08em;
      text-transform:uppercase;
      color:var(--muted);
    }
    #screenHome .homeInsightMetricValue{
      font-size:14px;
      line-height:1.5;
      font-weight:800;
    }
    #screenHome .homeInsightActions{
      gap:10px;
      flex-wrap:wrap;
    }
    #screenHome .homeStatsCard{
      grid-column:span 5;
      display:grid;
      gap:16px;
      min-height:100%;
    }
    #screenHome .homeStatsGrid{
      display:grid;
      grid-template-columns:repeat(3,minmax(0,1fr));
      gap:10px;
    }
    #screenHome .homeStatTile{
      padding:16px;
      border:1px solid var(--border);
      border-radius:18px;
      background:
        linear-gradient(180deg,
          color-mix(in srgb, var(--card) 99%, var(--chip) 1%) 0%,
          color-mix(in srgb, var(--card) 95%, var(--chip) 5%) 100%);
    }
    #screenHome .homeStatValue{
      font-size:clamp(24px,3vw,34px);
      line-height:1;
      font-weight:950;
      letter-spacing:-.03em;
      font-family:"Solway", ui-serif, Georgia, serif;
    }
    #screenHome .homeStatLabel{
      margin-top:8px;
      font-size:12px;
      line-height:1.45;
      color:var(--muted);
    }
    #screenHome .homeTierRail{
      display:grid;
      gap:8px;
      padding:16px;
      border:1px solid var(--border);
      border-radius:20px;
      background:color-mix(in srgb, var(--card) 96%, var(--chip) 4%);
    }
    #screenHome .homeTierRailHeader{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:12px;
      flex-wrap:wrap;
    }
    #screenHome .homeTierRailTitle{
      font-size:13px;
      font-weight:900;
      letter-spacing:.02em;
    }
    #screenHome .homeStatsUtilityRow{
      margin-top:auto;
      gap:10px;
      flex-wrap:wrap;
    }
    #screenHome .homeLeaderboardCard{
      grid-column:span 7;
    }
    #screenHome .homeWinnerCard{
      grid-column:span 5;
    }
    @media (max-width:1100px){
      #screenHome .homePathCard,
      #screenHome .homeProgressIdentityCard,
      #screenHome .homeQuickActionsCard,
      #screenHome .homeInsightCard,
      #screenHome .homeStatsCard,
      #screenHome .homeLeaderboardCard,
      #screenHome .homeWinnerCard{
        grid-column:1 / -1;
      }
      #screenHome .homeHeroShell{
        grid-template-columns:1fr;
      }
    }
    @media (max-width:768px){
      #screenHome .homePremiumGrid{
        grid-template-columns:1fr;
      }
      #screenHome .homeHero.homeSpanAll,
      #screenHome .homePathCard,
      #screenHome .homeQuickActionsCard,
      #screenHome .homeInsightCard,
      #screenHome .homeStatsCard,
      #screenHome .homeLeaderboardCard,
      #screenHome .homeWinnerCard{
        grid-column:1 / -1;
      }
      #screenHome .homeHero.homeSpanAll{
        padding:20px;
      }
      #screenHome .homeHeroProgressTop,
      #screenHome .homeTierRailHeader,
      #screenHome .homePathProgressTop{
        flex-direction:column;
        align-items:flex-start;
      }
      #screenHome .homeQuickActionsGrid,
      #screenHome .homeInsightMetaGrid,
      #screenHome .homeStatsGrid{
        grid-template-columns:repeat(2,minmax(0,1fr));
      }
      #screenHome .homeHeroRingWrap{
        min-width:0;
      }
    }
    @media (max-width:560px){
      #screenHome .homeQuickActionsGrid,
      #screenHome .homeInsightMetaGrid,
      #screenHome .homeStatsGrid{
        grid-template-columns:1fr;
      }
      #screenHome .homeContinueBtn,
      #screenHome .homeQuickActionBtn{
        min-height:64px;
      }
    }
    /* AI screen
       Keep the AI hub self-contained so Coach and Sensei can grow without
       leaking layout rules into Home, Kana, N5, Student, Teacher, or Settings. */
    #screenAI{
      position:relative;
      width:100%;
      min-width:0;
      isolation:isolate;
    }
    #screenAI > *{
      min-width:0;
    }
    #screenAI .aiHubShell{
      display:grid;
      gap:18px;
      width:100%;
      min-width:0;
    }
    #screenAI .aiHeroCard{
      display:grid;
      gap:16px;
      padding:22px;
      background:
        radial-gradient(130% 130% at 100% 0%, color-mix(in srgb, var(--chip) 46%, transparent), transparent 48%),
        var(--surface-1);
    }
    #screenAI .aiHeroTitle{
      margin:0;
      font-size:clamp(26px, 4vw, 38px);
      line-height:1;
      letter-spacing:-.03em;
      font-family:"Solway", ui-serif, Georgia, serif;
      font-weight:800;
    }
    #screenAI .aiHeroSub{
      margin-top:8px;
      max-width:58ch;
      color:var(--muted);
    }
    #screenAI .aiHeroMeta{
      display:flex;
      flex-wrap:wrap;
      gap:8px;
    }
    #screenAI .aiModeGrid{
      display:grid;
      gap:14px;
      width:100%;
      min-width:0;
    }
    #screenAI .aiModeCard{
      appearance:none;
      width:100%;
      text-align:left;
      cursor:pointer;
      color:inherit;
      font:inherit;
      display:grid;
      gap:10px;
      border:1px solid var(--border);
      transition:transform .14s ease, box-shadow .18s ease, border-color .18s ease, background-color .18s ease;
    }
    #screenAI .aiModeCard:hover{
      transform:translateY(-1px);
      box-shadow:0 12px 26px rgba(14,24,38,.08);
    }
    #screenAI .aiModeCard.active{
      border-color:transparent;
      background:color-mix(in srgb, var(--chip) 48%, var(--card) 52%);
      box-shadow:0 16px 30px rgba(14,24,38,.09);
    }
    #screenAI .aiModeTitle{
      margin:0;
      font-size:20px;
      font-family:"Solway", ui-serif, Georgia, serif;
      font-weight:800;
    }
    #screenAI .aiModeText{
      color:var(--muted);
      line-height:1.55;
    }
    #screenAI .aiModeAction{
      font-weight:900;
      letter-spacing:.04em;
      text-transform:uppercase;
      font-size:11px;
      color:var(--text);
    }
    #screenAI .aiDetailGrid{
      display:grid;
      gap:18px;
      width:100%;
      min-width:0;
      align-items:start;
    }
    #screenAI .aiPanelCard{
      display:grid;
      gap:16px;
      min-width:0;
    }
    #screenAI .aiPanelHeader{
      display:flex;
      justify-content:space-between;
      align-items:flex-start;
      gap:12px;
      flex-wrap:wrap;
    }
    #screenAI .aiPanelHeader h2{
      margin:0;
      font-size:24px;
      font-family:"Solway", ui-serif, Georgia, serif;
      font-weight:800;
    }
    #screenAI .aiCoachStats{
      display:flex;
      flex-wrap:wrap;
      gap:8px;
    }
    #screenAI .aiCoachInsightGrid{
      display:grid;
      grid-template-columns:repeat(2,minmax(0,1fr));
      gap:12px;
    }
    #screenAI .aiCoachInsightCard{
      display:grid;
      gap:10px;
      padding:16px;
      border:1px solid var(--border);
      border-radius:18px;
      background:var(--card);
      min-width:0;
    }
    #screenAI .aiCoachInsightValue{
      font-size:20px;
      line-height:1.2;
      font-weight:900;
    }
    #screenAI .aiCoachMissedItems{
      display:flex;
      flex-wrap:wrap;
      gap:8px;
      min-height:32px;
    }
    #screenAI .aiCoachMissedItem{
      display:inline-flex;
      align-items:center;
      min-height:32px;
      padding:7px 11px;
      border-radius:999px;
      border:1px solid var(--border);
      background:color-mix(in srgb, var(--card) 90%, var(--chip) 10%);
      font-weight:800;
      font-size:13px;
      max-width:100%;
    }
    #screenAI .aiCoachMissedItem.isEmpty{
      color:var(--muted);
      font-weight:700;
    }
    #screenAI .aiCoachFocus{
      display:grid;
      gap:12px;
      padding:18px;
      border:1px solid var(--border);
      border-radius:20px;
      background:color-mix(in srgb, var(--card) 92%, var(--chip) 8%);
      min-width:0;
    }
    #screenAI .aiCoachFocusLabel{
      font-size:12px;
      letter-spacing:.08em;
      text-transform:uppercase;
      color:var(--muted);
      font-weight:900;
    }
    #screenAI .aiCoachFocusTitle{
      font-size:22px;
      line-height:1.2;
      font-weight:900;
    }
    #screenAI .aiCoachFocusText{
      color:var(--muted);
      line-height:1.6;
    }
    #screenAI .aiCoachChecklist{
      list-style:none;
      margin:0;
      padding:0;
      display:grid;
      gap:8px;
    }
    #screenAI .aiCoachChecklist li{
      display:flex;
      align-items:flex-start;
      gap:10px;
      padding:12px 14px;
      border:1px solid var(--border);
      border-radius:16px;
      background:var(--card);
      min-width:0;
    }
    #screenAI .aiCoachChecklist li::before{
      content:"";
      width:9px;
      height:9px;
      flex:0 0 9px;
      margin-top:7px;
      border-radius:999px;
      background:var(--ring);
      opacity:.72;
    }
    #screenAI .aiCoachActions{
      display:flex;
      flex-wrap:wrap;
      gap:10px;
    }
    #screenAI .aiCoachResponse{
      display:grid;
      gap:12px;
      padding:16px;
      border:1px solid var(--border);
      border-radius:18px;
      background:var(--card);
    }
    #screenAI .senseiMessages{
      display:flex;
      flex-direction:column;
      gap:12px;
      max-height:360px;
      overflow:auto;
      padding-right:4px;
    }
    #screenAI .senseiMessage{
      display:flex;
      flex-direction:column;
      gap:6px;
    }
    #screenAI .senseiMessage.user{
      align-items:flex-end;
    }
    #screenAI .senseiMessage.sensei{
      align-items:flex-start;
    }
    #screenAI .senseiLabel{
      font-size:11px;
      letter-spacing:.08em;
      text-transform:uppercase;
      color:var(--muted);
      font-weight:900;
    }
    #screenAI .senseiBubble{
      max-width:min(100%, 520px);
      padding:13px 15px;
      border-radius:18px;
      border:1px solid var(--border);
      background:var(--card);
      line-height:1.6;
      white-space:pre-wrap;
      word-break:break-word;
    }
    #screenAI .senseiBubble.isTyping{
      color:var(--muted);
      letter-spacing:.12em;
    }
    #screenAI .senseiMessage.user .senseiBubble{
      background:color-mix(in srgb, var(--chip) 58%, var(--card) 42%);
      border-color:transparent;
    }
    #screenAI .senseiQuickPrompts{
      display:flex;
      flex-wrap:wrap;
      gap:8px;
    }
    #screenAI .senseiComposer{
      display:grid;
      grid-template-columns:minmax(0,1fr) auto;
      gap:10px;
      align-items:center;
    }
    #screenAI .senseiComposer .input{
      width:100%;
    }
    #screenAI .senseiFooterNote{
      color:var(--muted);
      font-size:12px;
      line-height:1.5;
    }
    @media (min-width:769px){
      #screenAI .aiModeGrid{
        grid-template-columns:repeat(2,minmax(0,1fr));
      }
      #screenAI .aiDetailGrid{
        grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);
      }
    }
    @media (max-width:768px){
      #screenAI .aiHeroCard{
        padding:18px;
      }
      #screenAI .aiCoachInsightGrid{
        grid-template-columns:1fr;
      }
      #screenAI .aiModeGrid,
      #screenAI .aiDetailGrid,
      #screenAI .senseiComposer{
        grid-template-columns:1fr;
      }
      #screenAI .senseiComposer .btn{
        width:100%;
      }
    }
    /* Screen architecture safeguards
       Keep layout ownership inside each screen so broad selectors like
       .grid, .card, .panelHeader, and .segGroup cannot easily drift screens. */
    #screenHome,
    #screenAI,
    #screenKana,
    #screenN5,
    #screenStudent,
    #screenTeacher,
    #screenSettings{
      position:relative;
      width:100%;
      min-width:0;
      isolation:isolate;
    }
    #screenHome > *,
    #screenAI > *,
    #screenKana > *,
    #screenN5 > *,
    #screenStudent > *,
    #screenTeacher > *,
    #screenSettings > *{
      min-width:0;
    }
    #screenHome .homeGrid,
    #screenHome .homePremiumGrid,
    #screenKana .grid,
    #screenN5 .grid,
    #screenStudent #studentStatsView,
    #screenTeacher .teacherDashboardGrid,
    #screenSettings .settingsGrid{
      width:100%;
      min-width:0;
      align-items:start;
    }
    #screenHome .card,
    #screenAI .card,
    #screenKana .card,
    #screenN5 .card,
    #screenStudent .card,
    #screenTeacher .card,
    #screenSettings .card,
    #screenHome .listItem,
    #screenAI .listItem,
    #screenKana .listItem,
    #screenN5 .listItem,
    #screenStudent .listItem,
    #screenTeacher .listItem,
    #screenSettings .listItem{
      min-width:0;
    }
    #screenKana .segrow,
    #screenKana .seg,
    #screenKana .kanaPracticeHeader,
    #screenKana .kanaToolbar,
    #screenKana .kanaQuestionShell,
    #screenKana .choices{
      min-width:0;
    }
    #screenN5 .panelHeader,
    #screenN5 .segGroup,
    #screenN5 .n5ControlGrid,
    #screenN5 .n5InlineActionRow,
    #screenN5 .n5WorkspaceShell,
    #screenN5 .n5WorkspaceSurface,
    #screenN5 .n5WorkspaceStage,
    #screenN5 .n5QuizSetupGrid,
    #screenN5 .n5SetRow,
    #screenN5 .n5ExamOverview,
    #screenN5 .n5ExamEntryGrid,
    #screenN5 .practiceHeader,
    #screenN5 .practiceActions,
    #screenN5 .practicePrimaryRow,
    #screenN5 .practiceSecondaryRow,
    #screenN5 .practiceDrawer{
      min-width:0;
    }
    #screenStudent #studentStatsView,
    #screenStudent #studentStatsView > .card,
    #screenTeacher .teacherDashboardGrid,
    #screenTeacher .teacherDashboardGrid > .card,
    #screenSettings .settingsGrid{
      min-width:0;
    }
    @media (min-width:769px){
      #screenHome .homePremiumGrid{
        grid-template-columns:repeat(12,minmax(0,1fr));
        gap:18px;
        align-items:start;
      }
      #screenHome .homeGrid{
        grid-template-columns:1.15fr .85fr;
        gap:14px;
      }
      #screenKana .grid{
        grid-template-columns:minmax(0,900px);
        justify-content:center;
        gap:18px;
      }
      #screenN5 .grid{
        grid-template-columns:minmax(0,1040px);
        justify-content:center;
        gap:18px;
      }
      #screenStudent #studentStatsView{
        grid-template-columns:repeat(12,minmax(0,1fr));
        gap:18px;
      }
      #screenTeacher .teacherDashboardGrid{
        grid-template-columns:repeat(12,minmax(0,1fr));
        gap:18px;
      }
      #screenSettings .settingsGrid{
        grid-template-columns:minmax(0,1.08fr) minmax(320px,.92fr);
        gap:18px;
      }
    }
    @media (max-width:768px){
      #screenHome .homeGrid,
      #screenHome .homePremiumGrid,
      #screenKana .grid,
      #screenN5 .grid,
      #screenStudent #studentStatsView,
      #screenTeacher .teacherDashboardGrid,
      #screenSettings .settingsGrid{
        grid-template-columns:1fr;
      }
      #screenKana .kanaPracticeHeader,
      #screenKana .kanaChartHeader,
      #screenKana .kanaChartFooter,
      #screenN5 .n5HeroMain,
      #screenN5 .n5HeroTools,
      #screenN5 .practiceHeader,
      #screenN5 .n5WorkspaceMeta,
      #screenN5 .n5StageHead,
      #screenN5 .n5FooterBar,
      #screenN5 .n5BrowseModalHeader,
      #screenN5 .n5BrowseModalMeta{
        flex-direction:column;
        align-items:stretch;
      }
      #screenN5 .n5ControlGrid,
      #screenN5 .n5WorkspaceShell,
      #screenN5 .n5WorkspaceSearchRow,
      #screenN5 .n5ExamOverview,
      #screenN5 .n5QuizSetupGrid{
        grid-template-columns:1fr;
      }
      #screenN5 .n5CategorySeg,
      #screenN5 .n5InlineActionRow,
      #screenN5 .n5SetRow,
      #screenN5 .n5ExamEntryGrid{
        grid-template-columns:repeat(2,minmax(0,1fr));
      }
      #screenN5 #n5QuizActionRow{
        flex-direction:column;
        align-items:stretch;
      }
    }
    /* Architecture stabilization
       Keep the sidebar app shell as the only desktop layout owner, keep
       bottom-nav ownership mobile-only, and scope the leak-prone layout
       selectors to the screens and modals that actually own them. */
    #tabs{
      display:none !important;
      visibility:hidden;
      height:0;
      margin:0 !important;
      pointer-events:none;
    }
    .appLayout,
    .appMainPane,
    .appMainScroll,
    .appLayout .wrap.appLayoutWrap{
      min-width:0;
    }
    .appLayout{
      align-items:stretch;
      isolation:isolate;
    }
    .appMainPane{
      flex:1 1 auto;
      min-width:0;
    }
    .appMainScroll{
      min-width:0;
      overscroll-behavior-y:contain;
    }
    .appLayout .wrap.appLayoutWrap{
      display:flex;
      flex-direction:column;
      gap:14px;
    }
    .appLayout .wrap.appLayoutWrap > section{
      min-width:0;
    }
    #screenHome .homePremiumGrid,
    #screenStudent #studentStatsView,
    #screenTeacher .teacherDashboardGrid,
    #screenSettings .settingsGrid{
      display:grid;
      width:100%;
      min-width:0;
    }
    #screenKana .grid,
    #screenN5 .grid{
      display:grid;
      width:100%;
      min-width:0;
    }
    #screenN5 .panelHeader{
      position:sticky;
      top:0;
      z-index:2;
      background:var(--surface-1);
      margin:-14px -14px 12px -14px;
      padding:14px 14px 12px;
      border-bottom:1px solid var(--border);
      border-radius:var(--radius) var(--radius) 0 0;
    }
    #screenN5 .panelHeader .hint{
      margin-top:4px;
    }
    :is(#screenN5, #n5BrowseModalBack) .segGroup{
      margin-top:10px;
      display:grid;
      grid-template-columns:repeat(4,minmax(0,1fr));
      gap:6px;
      padding:6px;
      border:1px solid var(--border);
      border-radius:999px;
      background:var(--card);
    }
    :is(#screenN5, #n5BrowseModalBack) .segGroup .btn.small{
      min-height:38px;
      border-radius:999px;
      padding:7px 10px;
      box-shadow:none;
      font-size:12px;
      font-weight:900;
    }
    :is(#screenN5, #n5BrowseModalBack) .segGroup .btn.small:not(.primary){
      background:transparent;
      color:var(--muted);
    }
    :is(#screenHome, #screenAI, #screenKana, #screenN5, #screenStudent, #screenTeacher, #screenSettings, #n5BrowseModalBack) .card,
    :is(#screenHome, #screenAI, #screenN5, #screenStudent, #screenTeacher, #screenSettings, #n5BrowseModalBack, #teacherDrawerBack) .listItem{
      min-width:0;
    }
    /* N5 isolation
       Re-own the N5 workspace and browse modal containers so global layout
       selectors and future screen changes do not become accidental owners. */
    #screenN5 #n5MainGrid,
    #screenN5 #n5ContentCard,
    #screenN5 #n5PracticePanel,
    #screenN5 .n5HeaderShell,
    #screenN5 .n5HeroMain,
    #screenN5 .n5HeroCopy,
    #screenN5 .n5HeroTools,
    #screenN5 .n5StatusCard,
    #screenN5 .n5ControlGrid,
    #screenN5 .n5StepCard,
    #screenN5 .n5InlineActionRow,
    #screenN5 .n5Workspace,
    #screenN5 .n5WorkspaceShell,
    #screenN5 .n5FlowRail,
    #screenN5 .n5WorkspaceMain,
    #screenN5 .n5WorkspaceSurface,
    #screenN5 .n5WorkspaceStage,
    #screenN5 .n5StageHead,
    #screenN5 .n5WorkspaceSearchRow,
    #screenN5 .n5WorkspaceFilters,
    #screenN5 .n5WorkspaceGrid,
    #screenN5 .n5PreviewCard,
    #screenN5 .n5QuizSetupGrid,
    #screenN5 .n5SetRow,
    #screenN5 .n5ExamEntry,
    #screenN5 .n5ExamOverview,
    #screenN5 .n5ExamEntryGrid,
    #screenN5 .n5FooterBar,
    #screenN5 #n5QuizActionRow,
    #screenN5 .n5PracticeChoices,
    #screenN5 .n5ExamOverlay,
    #screenN5 .n5ExamTopbar,
    #screenN5 .n5ExamBody,
    #screenN5 .n5ExamChoices,
    #screenN5 .n5ExamWeakList,
    #n5BrowseModalBack .n5BrowseModalCard,
    #n5BrowseModalBack .n5BrowseModalHeader,
    #n5BrowseModalBack .n5BrowseModalBody,
    #n5BrowseModalBack .n5BrowseModalMeta,
    #n5BrowseModalBack #n5BrowsePanel,
    #n5BrowseModalBack #n5List,
    #n5BrowseModalBack .n5Grid{
      min-width:0;
    }
    #n5BrowseModalBack .segGroup,
    #n5BrowseModalBack .listItem{
      min-width:0;
    }
    @media (min-width:769px){
      .appLayout{
        display:flex;
      }
      .appLayout > .appSidebar{
        display:flex !important;
        position:sticky;
        top:0;
        align-self:stretch;
        z-index:20;
      }
      .appLayout > .appMainPane,
      .appLayout > .appMainPane > .appMainScroll{
        min-width:0;
      }
      .appLayout > .appMainPane > .appMainScroll{
        overflow-y:auto;
      }
      .appLayout > .appMainPane > .appMainScroll > .wrap.appLayoutWrap{
        display:flex;
        flex-direction:column;
        gap:14px;
        width:100%;
        max-width:1380px;
        margin:0;
        padding:20px 24px 42px;
      }
      .appLayout > .appMainPane > .appMainScroll > .wrap.appLayoutWrap > .topbar.appTopbar{
        display:flex;
        gap:12px;
        align-items:center;
        justify-content:space-between;
        min-height:68px;
        padding:14px 18px;
        border-radius:22px;
        position:sticky;
        top:16px;
        z-index:80;
      }
      :is(#screenHome, #screenAI, #screenKana, #screenStudent, #screenTeacher, #screenSettings) .card{
        padding:18px;
        border-radius:22px;
        box-shadow:0 18px 34px rgba(12,23,38,.08);
      }
      #screenN5 .card{
        padding:18px;
        border-radius:22px;
        box-shadow:0 18px 34px rgba(12,23,38,.08);
      }
      :is(#screenHome, #screenAI, #screenKana, #screenStudent, #screenTeacher, #screenSettings) .card h3{
        font-size:12px;
        letter-spacing:.1em;
      }
      #screenN5 .card h3{
        font-size:12px;
        letter-spacing:.1em;
      }
      :is(#screenHome, #screenAI, #screenStudent, #screenTeacher, #screenSettings, #teacherDrawerBack) .listItem{
        min-height:92px;
        padding:14px;
        border-radius:18px;
        background:color-mix(in srgb, var(--card) 96%, var(--chip) 4%);
      }
      #screenN5 .listItem,
      #n5BrowseModalBack .listItem{
        min-height:92px;
        padding:14px;
        border-radius:18px;
        background:color-mix(in srgb, var(--card) 96%, var(--chip) 4%);
      }
      .appLayoutBody #bottomNav{
        display:none !important;
        position:fixed;
        left:0;
        right:0;
        bottom:0;
        top:auto;
        padding:0;
        opacity:0;
        visibility:hidden;
        pointer-events:none;
      }
    }
    @media (max-width:768px){
      .appLayout{
        display:block;
      }
      .appLayout > .appSidebar{
        display:none !important;
        width:0;
        opacity:0;
        pointer-events:none;
        overflow:hidden;
      }
      .appMainPane,
      .appMainScroll{
        min-height:auto;
        min-width:0;
      }
      .appMainScroll{
        overflow:visible;
      }
      .appLayout .wrap.appLayoutWrap{
        padding:12px 10px calc(112px + env(safe-area-inset-bottom));
      }
      #screenN5 .panelHeader{
        position:static;
        margin:-14px -14px 10px -14px;
      }
      :is(#screenN5, #n5BrowseModalBack) .segGroup{
        grid-template-columns:repeat(2,minmax(0,1fr));
      }
      .appLayoutBody #bottomNav{
        display:flex !important;
        position:fixed;
        left:0;
        right:0;
        bottom:0;
        top:auto;
        z-index:40;
        padding:10px 12px calc(10px + env(safe-area-inset-bottom));
        opacity:1;
        visibility:visible;
        pointer-events:none;
      }
      .appLayoutBody #bottomNav .bottomNavBar{
        pointer-events:auto;
        width:min(760px,100%);
      }
      body.examMode #bottomNav{
        display:none !important;
        opacity:0;
        visibility:hidden;
      }
    }
    /* Shared responsive guardrails
       Keep one app shell and one set of screens while making desktop own the
       sidebar layout and mobile own the stacked bottom-nav layout. */
    .appLayout > .appMainPane > .appMainScroll > .wrap.appLayoutWrap > .topbar.appTopbar,
    .appLayout > .appMainPane > .appMainScroll > .wrap.appLayoutWrap > :is(#screenHome, #screenAI, #screenKana, #screenN5, #screenStudent, #screenTeacher, #screenSettings){
      width:100%;
      min-width:0;
    }
    :is(#screenHome .homePremiumGrid,
        #screenAI .aiHubShell,
        #screenKana .grid,
        #screenN5 .grid,
        #screenStudent #studentStatsView,
        #screenTeacher .teacherDashboardGrid,
        #screenSettings .settingsGrid){
      width:100%;
      min-width:0;
      align-content:start;
    }
    @media (min-width:769px){
      .appLayout > .appSidebar{
        flex:0 0 auto;
      }
      .appLayout > .appMainPane{
        min-height:100vh;
      }
      .appLayout > .appMainPane > .appMainScroll > .wrap.appLayoutWrap{
        align-items:stretch;
      }
      #screenHome .homePremiumGrid,
      #screenAI .aiHubShell,
      #screenStudent #studentStatsView,
      #screenTeacher .teacherDashboardGrid{
        max-width:1240px;
        margin-inline:auto;
      }
      #screenSettings .settingsGrid{
        max-width:1180px;
        margin-inline:auto;
      }
      #screenKana .grid{
        max-width:920px;
        margin-inline:auto;
      }
      #screenN5 .grid{
        max-width:1080px;
        margin-inline:auto;
      }
    }
    @media (max-width:768px){
      .appLayoutBody{
        overflow-x:hidden;
      }
      .appLayout > .appMainPane > .appMainScroll > .wrap.appLayoutWrap{
        gap:12px;
      }
      :is(#screenHome .homePremiumGrid,
          #screenAI .aiHubShell,
          #screenKana .grid,
          #screenN5 .grid,
          #screenStudent #studentStatsView,
          #screenTeacher .teacherDashboardGrid,
          #screenSettings .settingsGrid){
        margin-inline:0;
        gap:14px;
      }
      #screenHome .homeHero.homeSpanAll,
      #screenAI .aiHeroCard,
      #screenKana .kanaJourneyCard,
      #screenKana .kanaPracticePanel,
      #screenStudent #studentStatsView > .card,
      #screenTeacher .teacherDashboardGrid > .card,
      #screenSettings .card{
        border-radius:20px;
      }
      #screenAI .aiCoachActions,
      #screenKana .kanaJourneyMeta,
      #screenStudent .studentCardActions{
        align-items:stretch;
      }
    }
    /* Layout mode ownership
       The runtime layout controller sets body classes so mobile and desktop
       rules do not compete once the viewport mode is known. */
    body.desktop-layout .appLayout{
      display:flex;
    }
    body.desktop-layout .appLayout > .appSidebar{
      display:flex !important;
      position:sticky;
      top:0;
      width:auto;
      opacity:1;
      pointer-events:auto;
      overflow:auto;
    }
    body.desktop-layout .appLayout > .appMainPane,
    body.desktop-layout .appLayout > .appMainPane > .appMainScroll{
      min-height:100vh;
      min-width:0;
    }
    body.desktop-layout .appLayout > .appMainPane > .appMainScroll{
      overflow-y:auto;
    }
    body.desktop-layout .appLayout > .appMainPane > .appMainScroll > .wrap.appLayoutWrap{
      max-width:1380px;
      padding:20px 24px 42px;
    }
    body.desktop-layout .topbar.appTopbar{
      top:16px;
      padding:14px 18px;
    }
    body.desktop-layout #bottomNav{
      display:none !important;
      opacity:0;
      visibility:hidden;
      pointer-events:none;
    }
    body.mobile-layout .appLayout{
      display:block;
    }
    body.mobile-layout .appLayout > .appSidebar{
      display:none !important;
      width:0;
      opacity:0;
      pointer-events:none;
      overflow:hidden;
    }
    body.mobile-layout .appMainPane,
    body.mobile-layout .appMainScroll{
      min-height:auto;
      min-width:0;
    }
    body.mobile-layout .appMainScroll{
      overflow:visible;
    }
    body.mobile-layout .appLayout > .appMainPane > .appMainScroll > .wrap.appLayoutWrap{
      max-width:none;
      padding:12px 10px calc(112px + env(safe-area-inset-bottom));
      gap:12px;
    }
    body.mobile-layout .topbar.appTopbar{
      top:8px;
      padding:10px 12px;
      border-radius:18px;
    }
    body.mobile-layout #bottomNav{
      display:flex !important;
      position:fixed;
      left:0;
      right:0;
      bottom:0;
      top:auto;
      padding:10px 12px calc(10px + env(safe-area-inset-bottom));
      opacity:1;
      visibility:visible;
      pointer-events:none;
    }
    body.mobile-layout #bottomNav .bottomNavBar{
      pointer-events:auto;
      width:min(760px,100%);
    }
    body.mobile-layout #screenHome .homeSectionSub,
    body.mobile-layout #screenAI .aiHeroMeta,
    body.mobile-layout #screenAI .aiHeroSub,
    body.mobile-layout #screenStudent .studentMilestoneHint,
    body.mobile-layout #screenSettings .note{
      font-size:12px;
      line-height:1.45;
    }
    .homeMobileMoreCard,
    .kanaMobileActionGrid,
    .n5MobileHubCard,
    .n5MobilePanelBar,
    .studentMobileMoreCard,
    .settingsMobileQuickGrid,
    #kanaMobileHubBtn{
      display:none;
    }
    #screenN5 .n5MobileContinueCard{
      display:none;
    }
    body.mobile-layout #screenHome .homeMobileMoreCard{
      display:grid;
      gap:14px;
      grid-column:1 / -1;
    }
    body.mobile-layout #screenHome .homeMobileMoreGrid{
      display:grid;
      grid-template-columns:repeat(3,minmax(0,1fr));
      gap:10px;
    }
    body.mobile-layout #screenHome .homeMobileMoreGrid .btn{
      min-height:56px;
      border-radius:18px;
      padding:12px 10px;
      font-size:12px;
    }
    body.mobile-layout #screenHome .homeInsightCard,
    body.mobile-layout #screenHome .homeStatsCard,
    body.mobile-layout #screenHome .homeLeaderboardCard,
    body.mobile-layout #screenHome .homeWinnerCard{
      display:none;
    }
    body.mobile-layout #screenHome[data-mobile-panel="insight"] .homeInsightCard,
    body.mobile-layout #screenHome[data-mobile-panel="stats"] .homeStatsCard,
    body.mobile-layout #screenHome[data-mobile-panel="leaderboard"] .homeLeaderboardCard,
    body.mobile-layout #screenHome[data-mobile-panel="leaderboard"] .homeWinnerCard{
      display:grid;
    }
    body.mobile-layout #screenHome .homeHero.homeSpanAll{
      padding:18px;
    }
    body.mobile-layout #screenHome .homeQuickActionsGrid{
      grid-template-columns:repeat(2,minmax(0,1fr));
      gap:10px;
    }
    body.mobile-layout #screenHome .homeQuickActionBtn{
      min-height:78px;
      padding:14px;
    }
    body.mobile-layout #screenKana .kanaMobileActionGrid{
      display:grid;
      grid-template-columns:repeat(2,minmax(0,1fr));
      gap:10px;
      margin-top:16px;
    }
    body.mobile-layout #screenKana .kanaMobileActionGrid .btn{
      min-height:64px;
      border-radius:18px;
      padding:12px;
    }
    body.mobile-layout #screenKana .kanaJourneyGrid{
      display:none;
    }
    body.mobile-layout #screenKana .kanaJourneyText{
      max-width:none;
    }
    body.mobile-layout #screenKana[data-mobile-pane="hub"] .kanaPracticePanel{
      display:none;
    }
    body.mobile-layout #screenKana[data-mobile-pane="practice"] .kanaJourneyCard{
      display:none;
    }
    body.mobile-layout #screenKana[data-mobile-pane="practice"] #kanaMobileHubBtn{
      display:inline-flex;
    }
    body.mobile-layout #screenN5 .n5MobileHubCard{
      display:grid;
      gap:14px;
    }
    body.mobile-layout #screenN5 .n5MobileHubTop{
      display:flex;
      align-items:flex-start;
      justify-content:space-between;
      gap:12px;
      flex-wrap:wrap;
    }
    body.mobile-layout #screenN5 .n5MobileHubGrid,
    body.mobile-layout #screenN5 .n5MobileSubhubGrid{
      display:grid;
      grid-template-columns:repeat(2,minmax(0,1fr));
      gap:10px;
    }
    body.mobile-layout #screenN5 .n5MobileHubGrid .btn,
    body.mobile-layout #screenN5 .n5MobileSubhubGrid .btn{
      min-height:72px;
      border-radius:20px;
      padding:14px 12px;
      white-space:normal;
      text-align:left;
      justify-content:flex-start;
    }
    body.mobile-layout #screenN5 .n5MobileSubhub{
      display:grid;
      gap:10px;
      padding:14px;
      border:1px solid var(--border);
      border-radius:20px;
      background:color-mix(in srgb, var(--card) 94%, var(--chip) 6%);
    }
    body.mobile-layout #screenN5 .n5MobilePanelBar{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:10px;
      flex-wrap:wrap;
      margin-bottom:10px;
    }
    body.mobile-layout #screenN5 .n5ControlGrid,
    body.mobile-layout #screenN5 .n5HeroTools,
    body.mobile-layout #screenN5 .n5FlowRail,
    body.mobile-layout #screenN5 .n5FooterBar{
      display:none;
    }
    body.mobile-layout #screenN5[data-mobile-pane="hub"] #n5ContentCard,
    body.mobile-layout #screenN5[data-mobile-pane="study-options"] #n5ContentCard,
    body.mobile-layout #screenN5[data-mobile-pane="practice-options"] #n5ContentCard,
    body.mobile-layout #screenN5[data-mobile-pane="exam-options"] #n5ContentCard{
      display:none;
    }
    body.mobile-layout #screenN5[data-mobile-pane="practice"] .n5MobileHubCard,
    body.mobile-layout #screenN5[data-mobile-pane="exam"] .n5MobileHubCard{
      display:none;
    }
    body.mobile-layout #screenN5 .panelHeader{
      margin:-18px -18px 14px -18px;
      padding:18px;
      position:static;
      border-radius:22px 22px 0 0;
    }
    body.mobile-layout #screenN5 .n5HeroMain{
      gap:8px;
    }
    body.mobile-layout #screenN5 .n5HeaderHint{
      display:none;
    }
    body.mobile-layout #screenAI .aiHeroCard{
      padding:16px;
    }
    body.mobile-layout #screenAI .aiHeroMeta{
      display:none;
    }
    body.mobile-layout #screenAI .aiModeGrid{
      grid-template-columns:repeat(2,minmax(0,1fr));
      gap:10px;
    }
    body.mobile-layout #screenAI .aiModeCard{
      min-height:110px;
      padding:16px;
    }
    body.mobile-layout #screenAI .aiModeText{
      display:none;
    }
    body.mobile-layout #screenAI .aiPanelCard{
      display:none;
    }
    body.mobile-layout #screenAI .aiPanelCard.isActive{
      display:grid;
    }
    body.mobile-layout #screenStudent .studentMobileMoreCard{
      display:grid;
      gap:12px;
    }
    body.mobile-layout #screenStudent .studentMobileMoreGrid{
      display:grid;
      grid-template-columns:repeat(3,minmax(0,1fr));
      gap:10px;
    }
    body.mobile-layout #screenStudent .studentMobileMoreGrid .btn{
      min-height:54px;
      padding:10px 8px;
      border-radius:18px;
      font-size:12px;
    }
    body.mobile-layout #screenStudent .studentCategoryCard,
    body.mobile-layout #screenStudent .studentMilestoneCard{
      display:none;
    }
    body.mobile-layout #screenStudent .studentActivityGrid,
    body.mobile-layout #screenStudent #studentWeekBars,
    body.mobile-layout #screenStudent #studentWeekHint{
      display:none;
    }
    body.mobile-layout #screenStudent[data-mobile-panel="performance"] .studentCategoryCard,
    body.mobile-layout #screenStudent[data-mobile-panel="milestones"] .studentMilestoneCard{
      display:grid;
    }
    body.mobile-layout #screenStudent[data-mobile-panel="activity"] .studentActivityGrid{
      display:grid;
      grid-template-columns:1fr;
    }
    body.mobile-layout #screenStudent[data-mobile-panel="activity"] #studentWeekBars{
      display:flex;
    }
    body.mobile-layout #screenStudent[data-mobile-panel="activity"] #studentWeekHint{
      display:block;
    }
    body.mobile-layout #screenStudent .studentMetricGrid{
      grid-template-columns:repeat(2,minmax(0,1fr));
      gap:10px;
    }
    body.mobile-layout #screenStudent .studentMetricTile b{
      font-size:26px;
    }
    body.mobile-layout #screenStudent .studentWeakCard,
    body.mobile-layout #screenStudent .studentWeekCard,
    body.mobile-layout #screenStudent .studentSummaryCard{
      gap:14px;
    }
    body.mobile-layout #screenSettings .settingsMobileQuickGrid{
      display:grid;
      grid-template-columns:repeat(2,minmax(0,1fr));
      gap:10px;
      margin:10px 0 14px;
    }
    body.mobile-layout #screenSettings .settingsMobileQuickGrid .btn{
      min-height:48px;
      border-radius:16px;
    }
    body.mobile-layout #screenSettings .divider{
      margin:12px 0;
    }
    body.mobile-layout #screenSettings .row{
      gap:8px;
    }
    body.mobile-layout #screenSettings .input{
      min-height:46px;
    }
    /* Mobile-first refinement
       Keep the same routes and logic, but make the handheld experience feel
       like a focused app instead of a compressed desktop dashboard. */
    body.mobile-layout{
      background:
        radial-gradient(1200px 540px at 50% -180px, color-mix(in srgb, var(--chip) 52%, transparent), transparent 72%),
        linear-gradient(180deg, color-mix(in srgb, var(--card) 58%, transparent) 0%, transparent 28%),
        var(--bg);
    }
    body.mobile-layout .appMainScroll{
      scroll-padding-top:104px;
      scroll-padding-bottom:140px;
    }
    body.mobile-layout .appLayout > .appMainPane > .appMainScroll > .wrap.appLayoutWrap{
      padding:10px 10px calc(106px + env(safe-area-inset-bottom));
      gap:14px;
    }
    body.mobile-layout .topbar.appTopbar{
      display:grid;
      grid-template-columns:minmax(0,1fr) auto;
      grid-template-areas:"brand actions";
      top:max(8px, env(safe-area-inset-top));
      gap:10px 10px;
      padding:10px 12px;
      min-height:auto;
      border-radius:20px;
      background:color-mix(in srgb, var(--card) 90%, transparent);
      box-shadow:0 14px 28px rgba(12,23,38,.10);
      transition:
        transform .22s ease,
        opacity .22s ease,
        padding .22s ease,
        gap .22s ease,
        background-color .22s ease,
        box-shadow .22s ease;
      transform:translateY(0);
      will-change:transform, opacity;
    }
    body.mobile-layout .appTopbarLeft{
      grid-area:brand;
      width:100%;
      align-items:flex-start;
      min-width:0;
    }
    body.mobile-layout .appTopbarBrand{
      width:100%;
    }
    body.mobile-layout .appTopbarBrand b{
      display:block;
      font-size:20px;
      line-height:1;
      letter-spacing:-.03em;
    }
    body.mobile-layout .appTopbarOptional{
      display:block;
      margin-top:4px;
      font-size:11px;
      line-height:1.25;
      white-space:nowrap;
      overflow:hidden;
      text-overflow:ellipsis;
      opacity:.82;
    }
    body.mobile-layout .appTopbarRight{
      grid-area:actions;
      display:grid;
      grid-template-columns:minmax(0,1fr) auto;
      grid-template-areas:
        "role utility"
        "auth auth";
      width:min(100%, 252px);
      gap:8px 10px;
      align-items:start;
      min-width:0;
    }
    body.mobile-layout .appTopbar .roleSeg{
      grid-area:role;
      width:100%;
      min-height:42px;
      padding:3px;
      border-radius:16px;
      background:color-mix(in srgb, var(--card) 86%, var(--chip) 14%);
      box-shadow:inset 0 1px 0 rgba(255,255,255,.18);
    }
    body.mobile-layout .appTopbarChip{
      justify-content:center;
      min-height:40px;
      padding-inline:14px;
      border-radius:14px;
      font-size:12px;
      font-weight:800;
    }
    body.mobile-layout .roleSegBtn{
      min-height:36px;
      min-width:0;
      padding:0 12px;
      font-size:12px;
    }
    body.mobile-layout .roleSegBtn.active{
      box-shadow:0 8px 14px rgba(12,23,38,.08);
    }
    body.mobile-layout #themeBtn.appTopbarChip{
      grid-area:utility;
      align-self:start;
      width:44px;
      min-width:44px;
      padding:0;
      font-size:0;
      line-height:0;
      justify-self:end;
    }
    body.mobile-layout #themeBtn.appTopbarChip::before{
      content:"DK";
      font-size:10px;
      line-height:1;
      letter-spacing:.08em;
    }
    body.mobile-layout.dark #themeBtn.appTopbarChip::before{
      content:"LT";
    }
    body.mobile-layout #loginBtn.appTopbarChip,
    body.mobile-layout #logoutBtn.appTopbarChip{
      grid-area:auth;
      width:100%;
      min-width:0;
      white-space:nowrap;
      overflow:hidden;
      text-overflow:ellipsis;
    }
    body.mobile-layout #loginBtn.appTopbarChip{
      min-height:42px;
    }
    body.mobile-layout #logoutBtn.appTopbarChip{
      justify-self:stretch;
    }
    body.mobile-layout #loginBtn.appTopbarChip,
    body.mobile-layout #logoutBtn.appTopbarChip,
    body.mobile-layout .appTopbarRight .roleSeg{
      max-width:100%;
    }
    body.mobile-layout .appTopbarAvatar{
      display:none;
      margin-left:0;
      width:0;
      height:0;
      flex-basis:0;
    }
    body.mobile-layout .appTopbarRight .btn{
      box-shadow:none;
    }
    body.mobile-layout .appTopbarRight .btn:hover{
      transform:none;
      box-shadow:none;
    }
    body.mobile-layout .appTopbarRight .btn.primary{
      background:color-mix(in srgb, var(--chip) 74%, var(--card) 26%);
    }
    body.mobile-layout #themeBtn.appTopbarChip,
    body.mobile-layout #loginBtn.appTopbarChip,
    body.mobile-layout #logoutBtn.appTopbarChip{
      touch-action:manipulation;
    }
    body.mobile-layout #themeBtn.appTopbarChip:hover{
      transform:none;
    }
    body.mobile-layout #themeBtn.appTopbarChip{
      background:color-mix(in srgb, var(--card) 90%, var(--chip) 10%);
    }
    body.mobile-layout #loginBtn.appTopbarChip,
    body.mobile-layout #logoutBtn.appTopbarChip{
      justify-content:flex-start;
      text-align:left;
    }
    body.mobile-layout #loginBtn.appTopbarChip::before{
      content:"Account";
      margin-right:8px;
      font-size:10px;
      letter-spacing:.08em;
      opacity:.7;
    }
    body.mobile-layout #logoutBtn.appTopbarChip::before{
      content:"Signed In";
      margin-right:8px;
      font-size:10px;
      letter-spacing:.08em;
      opacity:.7;
    }
    body.mobile-layout #loginBtn.appTopbarChip,
    body.mobile-layout #logoutBtn.appTopbarChip{
      justify-content:flex-start;
      padding-inline:12px;
    }
    body.mobile-layout.mobile-chrome-collapsed .topbar.appTopbar{
      transform:translateY(-48px);
      opacity:.96;
      box-shadow:0 8px 18px rgba(12,23,38,.08);
      background:color-mix(in srgb, var(--card) 86%, transparent);
    }
    body.mobile-layout #bottomNav{
      padding:6px 10px calc(6px + env(safe-area-inset-bottom));
    }
    body.mobile-layout #bottomNav .bottomNavBar{
      width:100%;
      padding:6px;
      gap:6px;
      border-radius:22px;
      border-color:color-mix(in srgb, var(--border) 82%, transparent);
      background:color-mix(in srgb, var(--card) 94%, transparent);
      box-shadow:0 12px 24px rgba(9,20,36,.13);
      backdrop-filter:blur(14px);
    }
    body.mobile-layout #bottomNav .bottomNavBtn{
      min-height:56px;
      padding:7px 4px 8px;
      border-radius:18px;
      display:grid;
      grid-auto-flow:row;
      justify-items:center;
      align-content:center;
      gap:4px;
      font-size:10px;
      font-weight:900;
      letter-spacing:.08em;
      line-height:1.1;
      text-transform:uppercase;
    }
    body.mobile-layout #bottomNav .bottomNavBtn::before{
      display:grid;
      place-items:center;
      width:28px;
      height:28px;
      border-radius:999px;
      border:1px solid color-mix(in srgb, var(--border) 78%, transparent);
      background:color-mix(in srgb, var(--card) 82%, var(--chip) 18%);
      font-size:10px;
      letter-spacing:.08em;
    }
    body.mobile-layout #bottomNav .bottomNavBtn[data-route="home"]::before{content:"HM";}
    body.mobile-layout #bottomNav .bottomNavBtn[data-route="kana"]::before{content:"KN";}
    body.mobile-layout #bottomNav .bottomNavBtn[data-route="n5"]::before{content:"N5";}
    body.mobile-layout #bottomNav .bottomNavBtn[data-route="ai"]::before{content:"AI";}
    body.mobile-layout #bottomNav .bottomNavBtn[data-route="student"]::before{content:"ST";}
    body.mobile-layout #bottomNav .bottomNavBtn[data-route="teacher"]::before{content:"TC";}
    body.mobile-layout #bottomNav .bottomNavBtn[data-route="settings"]::before{content:"SE";}
    body.mobile-layout #bottomNav .bottomNavBtn.active{
      transform:none;
      box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--chip) 30%, transparent);
    }
    body.mobile-layout #bottomNav .bottomNavBtn.active::before{
      background:color-mix(in srgb, var(--text) 92%, var(--chip) 8%);
      color:var(--card);
      border-color:transparent;
    }
    body.mobile-layout :is(#screenHome, #screenAI, #screenKana, #screenN5, #screenStudent, #screenTeacher, #screenSettings){
      margin-top:0 !important;
    }
    body.mobile-layout :is(#screenHome, #screenAI, #screenKana, #screenN5, #screenStudent, #screenTeacher, #screenSettings) .card{
      padding:16px;
      border-radius:22px;
      box-shadow:0 16px 30px rgba(9,20,36,.09);
    }
    body.mobile-layout :is(#screenHome, #screenAI, #screenKana, #screenN5, #screenStudent, #screenTeacher, #screenSettings) .hint{
      line-height:1.45;
    }
    body.mobile-layout :is(#screenHome, #screenAI, #screenKana, #screenN5, #screenStudent, #screenTeacher, #screenSettings) .miniTag{
      min-height:34px;
      display:inline-flex;
      align-items:center;
      justify-content:center;
    }
    body.mobile-layout :is(#screenHome, #screenKana, #screenN5, #screenAI, #screenStudent, #screenTeacher, #screenSettings) .btn{
      touch-action:manipulation;
    }
    body.mobile-layout #screenHome .homePremiumGrid{
      gap:12px;
    }
    body.mobile-layout #screenHome .homeHero.homeSpanAll{
      overflow:hidden;
      padding:18px;
      background:
        linear-gradient(135deg, color-mix(in srgb, var(--chip) 48%, var(--card) 52%) 0%, color-mix(in srgb, var(--card) 96%, transparent) 68%),
        var(--surface-1);
    }
    body.mobile-layout #screenHome .homeHeroShell{
      gap:16px;
    }
    body.mobile-layout #screenHome .homeGreeting{
      font-size:11px;
      letter-spacing:.12em;
      text-transform:uppercase;
    }
    body.mobile-layout #screenHome .homeHeroTitle{
      font-size:30px;
      line-height:.95;
      letter-spacing:-.04em;
    }
    body.mobile-layout #screenHome .homeHeroLevel{
      display:inline-flex;
      width:max-content;
      padding:7px 12px;
      border-radius:999px;
      background:color-mix(in srgb, var(--card) 72%, transparent);
    }
    body.mobile-layout #screenHome .homeHeroSub{
      max-width:32ch;
      font-size:14px;
    }
    body.mobile-layout #screenHome .homeHeroMeta{
      display:grid;
      grid-template-columns:repeat(2, minmax(0, 1fr));
      gap:8px;
      width:100%;
    }
    body.mobile-layout #screenHome .homeHeroProgressText,
    body.mobile-layout #screenHome .homeContinueMeta,
    body.mobile-layout #screenHome .homeQuickActionText{
      display:none;
    }
    body.mobile-layout #screenHome .homeHeroProgressCard{
      padding:14px;
      border-radius:20px;
      background:color-mix(in srgb, var(--card) 92%, var(--chip) 8%);
    }
    body.mobile-layout #screenHome .homePathCard,
    body.mobile-layout #screenHome .homeProgressIdentityCard,
    body.mobile-layout #screenHome .homeQuickActionsCard,
    body.mobile-layout #screenHome .homeMobileMoreCard{
      gap:14px;
    }
    body.mobile-layout #screenHome .homePathList{
      gap:10px;
    }
    body.mobile-layout #screenHome .homePathStep{
      border-radius:18px;
      padding:12px;
    }
    body.mobile-layout #screenHome .homeContinueAction{
      gap:10px;
    }
    body.mobile-layout #screenHome .homeContinueBtn,
    body.mobile-layout #screenHome .homeQuickActionBtn{
      min-height:64px;
      text-align:left;
      justify-content:flex-start;
    }
    body.mobile-layout #screenHome .homeQuickActionLabel{
      font-size:14px;
    }
    body.mobile-layout #screenHome .homeInsightSurface{
      gap:14px;
    }
    body.mobile-layout #screenHome .homePathSummary,
    body.mobile-layout #screenHome .homePathText,
    body.mobile-layout #screenHome .homeHeroSub{
      display:-webkit-box;
      -webkit-line-clamp:2;
      -webkit-box-orient:vertical;
      overflow:hidden;
    }
    body.mobile-layout #screenHome .homeInsightCard{
      display:grid;
    }
    body.mobile-layout #screenHome .homeMobileMoreCard{
      display:grid;
      gap:10px;
    }
    body.mobile-layout #screenHome .homeMobileMoreGrid .btn{
      min-height:48px;
      padding:10px 12px;
    }
    body.mobile-layout #screenHome .homeInsightMetaGrid{
      grid-template-columns:1fr;
      gap:8px;
    }
    body.mobile-layout #screenHome .homeInsightMetric:nth-child(2),
    body.mobile-layout #screenHome .homeInsightMetric:nth-child(3){
      display:none;
    }
    body.mobile-layout #screenHome .homeInsightActions .btn:last-child{
      display:none;
    }
    body.mobile-layout #screenKana .kanaJourneyCard{
      background:
        linear-gradient(145deg, color-mix(in srgb, var(--chip) 34%, var(--card) 66%) 0%, color-mix(in srgb, var(--card) 96%, transparent) 72%),
        var(--surface-1);
    }
    body.mobile-layout #screenKana .kanaJourneyHeader{
      gap:14px;
    }
    body.mobile-layout #screenKana .kanaJourneyTitle{
      font-size:28px;
      letter-spacing:-.03em;
    }
    body.mobile-layout #screenKana .kanaJourneyMeta{
      display:grid;
      grid-template-columns:repeat(2, minmax(0, 1fr));
      gap:8px;
      width:100%;
    }
    body.mobile-layout #screenKana .kanaMobileActionGrid .btn{
      min-height:64px;
      justify-content:flex-start;
      text-align:left;
    }
    body.mobile-layout #screenKana #kanaMobileBrowseBtn{
      display:none;
    }
    body.mobile-layout #screenKana .kanaMobileActionGrid{
      grid-template-columns:repeat(2,minmax(0,1fr));
    }
    body.mobile-layout #screenKana .kanaJourneyActionHint{
      display:none;
    }
    body.mobile-layout #screenKana .kanaPracticePanel{
      min-height:calc(100svh - 220px);
    }
    body.mobile-layout #screenKana .kanaQuestionShell{
      padding:18px;
      border-radius:20px;
      background:color-mix(in srgb, var(--card) 90%, var(--chip) 10%);
    }
    body.mobile-layout #screenKana .big{
      font-size:72px;
      line-height:.95;
    }
    body.mobile-layout #screenKana .kanaActionBar{
      display:grid;
      grid-template-columns:repeat(2, minmax(0, 1fr));
    }
    body.mobile-layout #screenKana .choices{
      grid-template-columns:1fr;
    }
    body.mobile-layout #screenN5 .n5MobileHubCard{
      background:
        linear-gradient(145deg, color-mix(in srgb, var(--chip) 28%, var(--card) 72%) 0%, color-mix(in srgb, var(--card) 98%, transparent) 76%),
        var(--surface-1);
    }
    body.mobile-layout #screenN5 .n5MobileHubTop{
      gap:14px;
    }
    body.mobile-layout #screenN5 .n5MobileHubTop .hint:last-child{
      max-width:30ch;
    }
    body.mobile-layout #screenN5 .n5MobileHubGrid .btn,
    body.mobile-layout #screenN5 .n5MobileSubhubGrid .btn{
      min-height:84px;
      padding:16px 14px;
      border-radius:20px;
    }
    body.mobile-layout #screenN5 .n5MobilePanelBar{
      position:sticky;
      top:92px;
      z-index:5;
      margin:-4px 0 12px;
      padding:10px 12px;
      border:1px solid var(--border);
      border-radius:18px;
      background:color-mix(in srgb, var(--card) 92%, transparent);
      backdrop-filter:blur(12px);
    }
    body.mobile-layout #screenN5 #n5ContentCard{
      min-height:calc(100svh - 210px);
    }
    body.mobile-layout #screenN5 .n5WorkspaceSurface{
      gap:16px;
    }
    body.mobile-layout #n5PracticeSummary{
      margin-top:8px !important;
      display:grid;
      gap:10px;
      justify-items:center;
      text-align:center;
    }
    body.mobile-layout #n5PracticeSummaryText{
      font-size:13px;
      line-height:1.35;
      font-weight:800 !important;
      color:var(--muted);
    }
    body.mobile-layout #n5PracticeSummary .n5PracticeSummaryMobile{
      display:grid;
      gap:8px;
      width:100%;
      max-width:100%;
    }
    body.mobile-layout #n5PracticeSummary .n5PracticeSummaryScore{
      font-size:32px;
      line-height:1;
      font-weight:950;
      letter-spacing:-.04em;
      color:var(--text);
    }
    body.mobile-layout #n5PracticeSummary .n5PracticeSummaryAdvice{
      font-size:12px;
      line-height:1.45;
      color:var(--muted);
    }
    body.mobile-layout #n5PracticeSummary .n5PracticeSummaryWeakBtn{
      width:100%;
      min-height:46px;
      border-radius:15px;
    }
    body.mobile-layout #n5PracticeSummary > .row{
      width:100%;
      margin-top:0 !important;
    }
    body.mobile-layout #n5PracticeSummary > .row .btn{
      width:100%;
    }
    body.mobile-layout #screenN5 .practiceHeader{
      gap:12px;
    }
    body.mobile-layout #screenN5 .practiceActions .btn,
    body.mobile-layout #screenN5 .n5ExamEntryGrid .btn{
      min-height:48px;
    }
    body.mobile-layout #screenAI .aiHeroCard{
      background:
        linear-gradient(145deg, color-mix(in srgb, var(--chip) 34%, var(--card) 66%) 0%, color-mix(in srgb, var(--card) 96%, transparent) 74%),
        var(--surface-1);
    }
    body.mobile-layout #screenAI .aiModeCard{
      min-height:120px;
      text-align:left;
      justify-content:space-between;
    }
    body.mobile-layout #screenAI .aiMobileBackBtn{
      display:inline-flex;
      min-height:36px;
      border-radius:12px;
    }
    body.mobile-layout #screenAI .aiModeAction{
      margin-top:auto;
    }
    body.mobile-layout #screenAI .aiPanelCard{
      display:none;
    }
    body.mobile-layout #screenAI[data-mobile-detail="open"] .aiPanelCard.isActive{
      min-height:calc(100svh - 250px);
      display:grid;
    }
    body.mobile-layout #screenStudent .studentSummaryCard{
      background:
        linear-gradient(145deg, color-mix(in srgb, var(--chip) 30%, var(--card) 70%) 0%, color-mix(in srgb, var(--card) 96%, transparent) 72%),
        var(--surface-1);
    }
    body.mobile-layout #screenStudent .studentSectionTitle{
      font-size:28px;
      line-height:1;
      letter-spacing:-.03em;
    }
    body.mobile-layout #screenStudent .studentSummaryBody{
      gap:14px;
    }
    body.mobile-layout #screenStudent .studentOverviewHero{
      gap:14px;
    }
    body.mobile-layout #screenStudent .studentMetricTile,
    body.mobile-layout #screenStudent .studentMilestoneTile{
      min-height:108px;
      border-radius:18px;
    }
    body.mobile-layout #screenStudent .studentMetricTile .note{
      display:none;
    }
    body.mobile-layout #screenStudent .studentMetricTile:nth-child(3),
    body.mobile-layout #screenStudent .studentMetricTile:nth-child(4){
      display:none;
    }
    body.mobile-layout #screenStudent .studentMobileMoreCard{
      display:grid;
      gap:10px;
    }
    body.mobile-layout #screenStudent[data-mobile-panel="none"] .studentCategoryCard,
    body.mobile-layout #screenStudent[data-mobile-panel="none"] .studentMilestoneCard{
      display:none;
    }
    body.mobile-layout #screenStudent .studentWeekCard{
      display:grid;
      gap:12px;
    }
    body.mobile-layout #screenStudent .studentWeekCard > h3,
    body.mobile-layout #screenStudent .studentWeekCard > .hint{
      display:none;
    }
    body.mobile-layout #screenStudent .studentActivityGrid,
    body.mobile-layout #screenStudent #studentWeekBars,
    body.mobile-layout #screenStudent #studentWeekHint{
      display:none;
    }
    body.mobile-layout #screenStudent .studentSuggestedAction{
      margin-top:0;
    }
    body.mobile-layout #screenStudent .studentCardActions{
      gap:10px;
    }
    body.mobile-layout #screenStudent .studentCardActions .btn{
      flex:1 1 100%;
    }
    body.mobile-layout #screenStudent .studentWeakGroup{
      border-radius:18px;
    }
    body.mobile-layout #screenTeacher .teacherHeroCard,
    body.mobile-layout #screenTeacher .teacherHealthCard{
      background:
        linear-gradient(145deg, color-mix(in srgb, var(--chip) 22%, var(--card) 78%) 0%, color-mix(in srgb, var(--card) 98%, transparent) 76%),
        var(--surface-1);
    }
    body.mobile-layout #screenTeacher .teacherDashboardGrid{
      gap:12px;
    }
    body.mobile-layout #screenTeacher .teacherHealthGrid{
      grid-template-columns:repeat(2, minmax(0, 1fr));
      gap:10px;
    }
    body.mobile-layout #screenTeacher .row .btn{
      flex:1 1 calc(50% - 5px);
    }
    body.mobile-layout #screenSettings .settingsGrid{
      gap:12px;
    }
    body.mobile-layout #screenSettings .note{
      line-height:1.35;
    }
    body.mobile-layout #screenSettings #studentSettingsCard > .note,
    body.mobile-layout #screenSettings #teacherSettingsCard > .note{
      display:none;
    }
    body.mobile-layout #screenSettings #studentSettingsCard .row .note,
    body.mobile-layout #screenSettings #teacherSettingsCard .row .note{
      margin-bottom:4px;
    }
    body.mobile-layout #screenSettings .settingsMobileQuickGrid{
      position:sticky;
      top:92px;
      z-index:4;
      margin:0 0 14px;
      padding:6px;
      border:1px solid var(--border);
      border-radius:18px;
      background:color-mix(in srgb, var(--card) 92%, transparent);
      backdrop-filter:blur(10px);
    }
    body.mobile-layout #screenSettings [id$="Anchor"]{
      scroll-margin-top:152px;
    }
    body.mobile-layout #screenSettings .row .btn{
      flex:1 1 100%;
    }
    body.mobile-layout{
      --mobile-topbar-space:92px;
      --mobile-bottom-nav-space:98px;
    }
    body.mobile-layout.appLayoutBody{
      height:100svh;
      overflow:hidden;
    }
    body.mobile-layout .appLayout,
    body.mobile-layout .appMainPane,
    body.mobile-layout .appMainScroll{
      height:100svh;
      max-height:100svh;
    }
    body.mobile-layout .appMainScroll{
      overflow-x:hidden;
      overflow-y:auto;
    }
    body.mobile-layout .appLayout > .appMainPane > .appMainScroll > .wrap.appLayoutWrap{
      min-height:100%;
      height:auto;
      padding:4px 8px calc(70px + env(safe-area-inset-bottom));
      gap:6px;
      overflow:visible;
      box-sizing:border-box;
    }
    body.mobile-layout .topbar.appTopbar{
      flex:0 0 auto;
      min-height:50px;
      padding:4px 8px;
      border-radius:13px;
      box-shadow:0 7px 14px rgba(12,23,38,.06);
    }
    body.mobile-layout .topbar.appTopbar{
      grid-template-columns:minmax(0,1fr) auto;
      grid-template-areas:"brand actions";
    }
    body.mobile-layout :is(#screenHome, #screenAI, #screenKana, #screenN5, #screenStudent, #screenTeacher, #screenSettings){
      flex:1 1 auto;
      min-height:0;
      overflow:visible;
    }
    body.mobile-layout :is(#screenHome .homePremiumGrid,
        #screenAI .aiHubShell,
        #screenKana .grid,
        #screenN5 .grid,
        #screenStudent #studentStatsView,
        #screenTeacher .teacherDashboardGrid,
        #screenSettings .settingsGrid){
      min-height:0;
      height:auto;
      overflow:visible;
      align-content:stretch;
    }
    body.mobile-layout :is(#screenHome .card,
        #screenAI .card,
        #screenKana .card,
        #screenN5 .card,
        #screenStudent .card,
        #screenTeacher .card,
        #screenSettings .card){
      min-height:0;
      padding:10px;
      border-radius:16px;
    }
    body.mobile-layout #screenHome .homePremiumGrid{
      grid-template-columns:1fr;
      grid-template-rows:auto;
      gap:8px;
    }
    #screenHome .homeMissionCard{
      display:none;
    }
    #n5PracticeSummary .n5PracticeSummaryMobile{
      display:none;
    }
    body.mobile-layout #screenHome .homeHero.homeSpanAll{
      order:1;
      overflow:hidden;
      padding:12px;
      background:
        linear-gradient(135deg, color-mix(in srgb, var(--chip) 40%, var(--card) 60%) 0%, color-mix(in srgb, var(--card) 97%, transparent) 72%),
        var(--surface-1);
    }
    body.mobile-layout #screenHome .homePathCard{
      order:3;
      border-color:color-mix(in srgb, var(--chip) 40%, var(--border) 60%);
      background:
        linear-gradient(145deg, color-mix(in srgb, var(--chip) 22%, var(--card) 78%) 0%, color-mix(in srgb, var(--card) 98%, transparent) 78%),
        var(--surface-1);
      box-shadow:0 10px 20px rgba(9,20,36,.08);
    }
    body.mobile-layout #screenHome .homeQuickActionsCard{
      order:4;
      background:color-mix(in srgb, var(--card) 98%, var(--chip) 2%);
    }
    body.mobile-layout #screenHome .homeMobileMoreCard{
      order:5;
      background:color-mix(in srgb, var(--card) 98%, transparent);
    }
    body.mobile-layout #screenHome .homeMissionCard{
      order:0;
      display:grid;
      gap:8px;
      padding:14px;
      border-radius:18px;
      border:1px solid color-mix(in srgb, var(--chip) 34%, var(--border) 66%);
      background:
        linear-gradient(145deg, color-mix(in srgb, var(--chip) 24%, var(--card) 76%) 0%, color-mix(in srgb, var(--card) 98%, transparent) 78%),
        var(--surface-1);
      box-shadow:0 10px 20px rgba(9,20,36,.08);
    }
    body.mobile-layout #screenHome .homeMissionHeader{
      display:grid;
      grid-template-columns:minmax(0,1fr) auto;
      gap:8px;
      align-items:start;
    }
    body.mobile-layout #screenHome .homeMissionEyebrow{
      font-size:11px;
      line-height:1.1;
      letter-spacing:.12em;
      text-transform:uppercase;
      color:var(--muted);
    }
    body.mobile-layout #screenHome .homeMissionTitle{
      margin-top:4px;
      font-size:17px;
      line-height:1.15;
      font-weight:900;
      letter-spacing:-.02em;
    }
    body.mobile-layout #screenHome .homeMissionStreak{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      min-height:32px;
      padding:0 10px;
      border-radius:999px;
      background:color-mix(in srgb, var(--card) 82%, var(--chip) 18%);
      color:var(--text);
      font-size:12px;
      font-weight:900;
      white-space:nowrap;
    }
    body.mobile-layout #screenHome .homeMissionTasks{
      display:grid;
      gap:8px;
    }
    body.mobile-layout #screenHome .homeMissionTask{
      display:grid;
      grid-template-columns:auto minmax(0,1fr);
      gap:10px;
      align-items:center;
      padding:10px 11px;
      border-radius:16px;
      border:1px solid color-mix(in srgb, var(--border) 82%, transparent);
      background:color-mix(in srgb, var(--card) 92%, transparent);
    }
    body.mobile-layout #screenHome .homeMissionCheck{
      width:20px;
      height:20px;
      border-radius:999px;
      border:1.5px solid color-mix(in srgb, var(--border) 78%, transparent);
      background:color-mix(in srgb, var(--card) 88%, transparent);
      box-shadow:inset 0 0 0 3px transparent;
    }
    body.mobile-layout #screenHome .homeMissionTask.isDone .homeMissionCheck{
      border-color:transparent;
      background:var(--ok);
      box-shadow:inset 0 0 0 4px color-mix(in srgb, var(--ok) 28%, #fff 72%);
    }
    body.mobile-layout #screenHome .homeMissionTaskBody{
      min-width:0;
      display:grid;
      gap:2px;
    }
    body.mobile-layout #screenHome .homeMissionTaskTitle{
      font-size:13px;
      line-height:1.2;
      font-weight:800;
    }
    body.mobile-layout #screenHome .homeMissionTaskMeta,
    body.mobile-layout #screenHome .homeMissionContinueMeta,
    body.mobile-layout #screenHome .homeMissionReward,
    body.mobile-layout #screenHome .homeMissionProgressLabel,
    body.mobile-layout #screenHome .homeMissionProgressPct{
      font-size:12px;
      line-height:1.4;
      color:var(--muted);
    }
    body.mobile-layout #screenHome .homeMissionProgress{
      display:grid;
      gap:8px;
    }
    body.mobile-layout #screenHome .homeMissionProgressTop{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:8px;
    }
    body.mobile-layout #screenHome .homeMissionProgressTrack{
      width:100%;
      height:6px;
      overflow:hidden;
      border-radius:999px;
      background:color-mix(in srgb, var(--border) 84%, transparent);
    }
    body.mobile-layout #screenHome .homeMissionProgressFill{
      height:100%;
      width:0;
      border-radius:inherit;
      background:linear-gradient(90deg, color-mix(in srgb, var(--chip) 50%, var(--text) 50%) 0%, var(--text) 100%);
      transition:width .22s ease;
    }
    body.mobile-layout #screenHome .homeMissionReward{
      min-height:18px;
    }
    body.mobile-layout #screenHome .homeMissionCard.isComplete .homeMissionReward{
      color:var(--ok);
      font-weight:800;
    }
    body.mobile-layout #screenHome .homeMissionAction{
      display:grid;
      gap:6px;
    }
    body.mobile-layout #screenHome .homeMissionContinueBtn{
      width:100%;
      min-height:50px;
      border-radius:16px;
      font-size:15px;
      font-weight:900;
    }
    body.mobile-layout #screenHome .homePathCard .homeContinueAction{
      display:none;
    }
    body.mobile-layout #screenHome .homeHero.homeSpanAll,
    body.mobile-layout #screenHome .homePathCard,
    body.mobile-layout #screenHome .homeProgressIdentityCard,
    body.mobile-layout #screenHome .homeQuickActionsCard,
    body.mobile-layout #screenHome .homeInsightCard,
    body.mobile-layout #screenHome .homeStatsCard,
    body.mobile-layout #screenHome .homeLeaderboardCard,
    body.mobile-layout #screenHome .homeWinnerCard{
      overflow:hidden;
    }
    body.mobile-layout #screenHome .homeHeroShell,
    body.mobile-layout #screenHome .homePathCard,
    body.mobile-layout #screenHome .homeQuickActionsCard{
      height:100%;
    }
    body.mobile-layout #screenHome .homeHeroShell{
      grid-template-columns:1fr;
      gap:8px;
      align-items:start;
    }
    body.mobile-layout #screenHome .homeHeroIntro{
      gap:8px;
    }
    body.mobile-layout #screenHome .homeHeroTitle{
      font-size:21px;
      line-height:1;
      letter-spacing:-.035em;
    }
    body.mobile-layout #screenHome .homeHeroSub{
      font-size:13px;
      line-height:1.45;
      max-width:none;
      margin:0;
    }
    body.mobile-layout #screenHome .homeHeroMeta{
      gap:6px;
      grid-template-columns:repeat(2, minmax(0, 1fr));
    }
    body.mobile-layout #screenHome .homeHeroMeta .miniTag{
      min-height:28px;
      font-size:11px;
      justify-content:flex-start;
      padding-inline:9px;
    }
    body.mobile-layout #screenHome .homeHeroProgressCard{
      gap:6px;
      padding:8px 9px;
      border-radius:14px;
      grid-template-columns:minmax(0,1fr);
    }
    body.mobile-layout #screenHome .homeProgressIdentityCard{
      gap:12px;
      padding:12px;
      border-radius:20px;
    }
    body.mobile-layout #screenHome .homeProgressIdentityTitle{
      font-size:20px;
    }
    body.mobile-layout #screenHome .homeProgressIdentitySub,
    body.mobile-layout #screenHome .homeProgressMiniMeta{
      font-size:12px;
      line-height:1.45;
    }
    body.mobile-layout #screenHome .homeProgressIdentityRail{
      padding:12px;
      border-radius:16px;
      gap:8px;
    }
    body.mobile-layout #screenHome .homeProgressIdentityValue{
      font-size:20px;
    }
    body.mobile-layout #screenHome .homeProgressStats{
      gap:8px;
    }
    body.mobile-layout #screenHome .homeProgressStat{
      padding:12px;
      border-radius:16px;
    }
    body.mobile-layout #screenHome .homeProgressStatValue{
      font-size:20px;
    }
    body.mobile-layout #screenHome .homeHeroProgressTop{
      gap:10px;
      align-items:center;
    }
    body.mobile-layout #screenHome .homeHeroProgressValue{
      margin-top:3px;
      font-size:24px;
    }
    body.mobile-layout #screenHome .homeHeroRingWrap{
      min-width:76px;
    }
    body.mobile-layout #screenHome .homeHeroProgressCard .ring{
      width:74px;
      height:74px;
    }
    body.mobile-layout #screenHome .homeHeroProgressCard .ringInner{
      width:54px;
      height:54px;
    }
    body.mobile-layout #screenHome .homeLevelRail{
      height:7px;
    }
    body.mobile-layout #screenHome .homeLevelRailHint{
      font-size:11px;
      line-height:1.3;
    }
    body.mobile-layout #screenHome .homeGreeting,
    body.mobile-layout #screenHome .homeHeroLevel{
      display:none;
    }
    body.mobile-layout #screenHome .homeSectionHead{
      gap:8px;
      align-items:center;
    }
    body.mobile-layout #screenHome .homeSectionHead h3{
      font-size:13px;
      letter-spacing:.06em;
    }
    body.mobile-layout #screenHome .homePathProgress{
      gap:6px;
      padding:10px;
      border-radius:14px;
    }
    body.mobile-layout #screenHome .homePathProgressTop{
      gap:8px;
    }
    body.mobile-layout #screenHome .homePathSummary{
      font-size:12px;
      line-height:1.45;
    }
    body.mobile-layout #screenHome .homePathStep:nth-child(n+4){
      display:none;
    }
    body.mobile-layout #screenHome .homeQuickActionsGrid{
      grid-template-columns:repeat(2, minmax(0, 1fr));
      gap:6px;
    }
    body.mobile-layout #screenHome .homeQuickActionBtn{
      min-height:42px;
      padding:8px 9px;
      background:color-mix(in srgb, var(--card) 94%, var(--chip) 6%);
      border-radius:14px;
      gap:2px;
    }
    body.mobile-layout #screenHome .homeQuickActionLabel{
      font-size:13px;
    }
    body.mobile-layout #screenHome .homeQuickActionsCard .homeSectionSub{
      display:none;
    }
    body.mobile-layout #screenHome .homeQuickActionText{
      display:none;
    }
    body.mobile-layout #screenHome .homeContinueBtn{
      min-height:52px;
      font-size:15px;
      justify-content:flex-start;
      padding:10px 12px;
      border-radius:15px;
      box-shadow:0 10px 18px rgba(9,20,36,.10);
    }
    body.mobile-layout #screenHome .homePathCard,
    body.mobile-layout #screenHome .homeQuickActionsCard,
    body.mobile-layout #screenHome .homeMobileMoreCard{
      gap:6px;
    }
    body.mobile-layout #screenHome .homePathList{
      gap:4px;
    }
    body.mobile-layout #screenHome .homePathStep{
      padding:7px 9px;
      border-radius:14px;
    }
    body.mobile-layout #screenHome .homePathMarker{
      width:24px;
      height:24px;
      font-size:10px;
    }
    body.mobile-layout #screenHome .homePathBody{
      gap:4px;
    }
    body.mobile-layout #screenHome .homePathTitle{
      font-size:13px;
      line-height:1.3;
    }
    body.mobile-layout #screenHome .homePathText{
      font-size:12px;
      line-height:1.35;
    }
    body.mobile-layout #screenHome .homeContinueAction{
      margin-top:auto;
      gap:6px;
    }
    body.mobile-layout #screenHome .homeContinueMeta{
      font-size:11px;
      line-height:1.35;
    }
    body.mobile-layout #screenHome .homeMobileMoreGrid{
      grid-template-columns:repeat(3, minmax(0,1fr));
      gap:6px;
    }
    body.mobile-layout #screenHome .homeMobileMoreGrid .btn{
      min-height:42px;
      padding:8px 6px;
      border-radius:14px;
      font-size:11px;
    }
    body.mobile-layout #screenHome .homeInsightSurface{
      gap:8px;
      padding:10px;
      border-radius:14px;
    }
    body.mobile-layout #screenHome .homeInsightMetric{
      padding:10px;
      border-radius:14px;
    }
    body.mobile-layout #screenHome .homeStatsGrid{
      grid-template-columns:repeat(3, minmax(0, 1fr));
      gap:6px;
    }
    body.mobile-layout #screenHome .homeStatTile{
      padding:10px;
      border-radius:14px;
    }
    body.mobile-layout #screenHome .homeStatValue{
      font-size:20px;
    }
    body.mobile-layout #screenHome .homeStatLabel{
      margin-top:4px;
      font-size:11px;
    }
    body.mobile-layout #screenHome .homeInsightCard,
    body.mobile-layout #screenHome .homeStatsCard,
    body.mobile-layout #screenHome .homeLeaderboardCard,
    body.mobile-layout #screenHome .homeWinnerCard{
      display:none !important;
    }
    body.mobile-layout #screenHome[data-mobile-panel="insight"] .homeInsightCard,
    body.mobile-layout #screenHome[data-mobile-panel="stats"] .homeStatsCard,
    body.mobile-layout #screenHome[data-mobile-panel="leaderboard"] .homeLeaderboardCard,
    body.mobile-layout #screenHome[data-mobile-panel="leaderboard"] .homeWinnerCard{
      display:grid !important;
    }
    body.mobile-layout #screenHome[data-mobile-panel]:not([data-mobile-panel="none"]) .homeMobileMoreCard{
      display:none !important;
    }
    body.mobile-layout #screenKana .grid{
      grid-template-rows:minmax(0,1fr);
    }
    body.mobile-layout #screenKana .kanaJourneyCard,
    body.mobile-layout #screenKana .kanaPracticePanel{
      height:auto;
      overflow:auto;
    }
    body.mobile-layout #screenKana .kanaJourneyCard{
      display:grid;
      grid-template-rows:auto auto minmax(0,1fr);
      gap:6px;
    }
    body.mobile-layout #screenKana #kanaMobileBrowseBtn{
      display:none;
    }
    body.mobile-layout #screenKana .kanaMobileActionGrid{
      align-content:start;
    }
    body.mobile-layout #screenKana .kanaPracticePanel{
      min-height:0;
      padding:10px;
    }
    body.mobile-layout #screenKana .kanaJourneyHeader{
      gap:6px;
    }
    body.mobile-layout #screenKana .kanaJourneyMeta{
      gap:4px;
    }
    body.mobile-layout #screenN5 .grid{
      grid-template-rows:minmax(0,1fr);
    }
    body.mobile-layout #screenN5 .n5MobileHubCard,
    body.mobile-layout #screenN5 #n5ContentCard{
      height:auto;
      min-height:0;
    }
    body.mobile-layout #screenN5 .n5MobileHubCard{
      overflow:auto;
      display:grid;
      grid-auto-rows:max-content;
      align-content:start;
      gap:8px;
      background:
        linear-gradient(145deg, color-mix(in srgb, var(--chip) 22%, var(--card) 78%) 0%, color-mix(in srgb, var(--card) 99%, transparent) 82%),
        var(--surface-1);
    }
    body.mobile-layout #screenN5 .n5MobileHubTop{
      display:grid;
      gap:4px;
      justify-items:start;
    }
    body.mobile-layout #screenN5 .n5MobileHubTop .hint:first-child{
      margin:0;
      font-size:11px;
      letter-spacing:.08em;
      text-transform:uppercase;
    }
    body.mobile-layout #screenN5 .n5MobileHubTop h3{
      margin:0;
      font-size:0;
      line-height:0;
    }
    body.mobile-layout #screenN5 .n5MobileHubTop h3::before{
      content:"N5 Practice";
      display:block;
      font-size:20px;
      line-height:1.02;
      letter-spacing:-.03em;
      color:var(--text);
    }
    body.mobile-layout #screenN5 .n5MobileHubTop .hint:last-child{
      max-width:none;
      margin:0;
      font-size:12px;
      line-height:1.4;
    }
    body.mobile-layout #screenN5 .n5MobileHubTop .miniTag{
      display:none;
    }
    body.mobile-layout #screenN5 .n5MobileContinueCard{
      display:grid;
      gap:8px;
      padding:10px;
      border:1px solid color-mix(in srgb, var(--chip) 36%, var(--border) 64%);
      border-radius:16px;
      background:
        linear-gradient(145deg, color-mix(in srgb, var(--chip) 18%, var(--card) 82%) 0%, color-mix(in srgb, var(--card) 98%, transparent) 84%),
        var(--surface-1);
      box-shadow:0 10px 20px rgba(9,20,36,.08);
    }
    body.mobile-layout #screenN5 .n5MobileContinueIntro{
      display:grid;
      gap:4px;
    }
    body.mobile-layout #screenN5 .n5MobileContinueTitle{
      font-size:16px;
      line-height:1.2;
      font-weight:900;
    }
    body.mobile-layout #screenN5 .n5MobileContinueHint{
      font-size:12px;
      line-height:1.4;
    }
    body.mobile-layout #screenN5 .n5MobileContinueMeta{
      display:grid;
      grid-template-columns:repeat(2, minmax(0,1fr));
      gap:6px;
    }
    body.mobile-layout #screenN5 .n5MobileContinueMeta .miniTag{
      min-height:28px;
      justify-content:flex-start;
      padding-inline:9px;
      font-size:11px;
    }
    body.mobile-layout #screenN5 #n5MobileContinueBtn{
      min-height:50px;
      padding:10px 12px;
      justify-content:flex-start;
      text-align:left;
      border-radius:15px;
    }
    body.mobile-layout #screenN5 .n5MobileHubTop .hint:last-child{
      max-width:none;
    }
    body.mobile-layout #screenN5 .n5MobileHubGrid{
      grid-template-columns:repeat(2, minmax(0,1fr));
      gap:8px;
    }
    body.mobile-layout #screenN5 .n5MobileHubGrid [data-n5-mobile-pane="study"],
    body.mobile-layout #screenN5 .n5MobileHubGrid [data-n5-mobile-pane="practice"],
    body.mobile-layout #screenN5 .n5MobileHubGrid [data-n5-mobile-pane="exam"],
    body.mobile-layout #screenN5 #n5MobileAiCoachBtn{
      min-height:68px;
      padding:10px 12px;
      justify-content:flex-start;
      text-align:left;
      font-size:14px;
      border-radius:15px;
      background:color-mix(in srgb, var(--card) 96%, var(--chip) 4%);
    }
    body.mobile-layout #screenN5 #n5MobileAiCoachBtn{
      background:
        linear-gradient(145deg, color-mix(in srgb, var(--chip) 12%, var(--card) 88%) 0%, color-mix(in srgb, var(--card) 99%, transparent) 84%),
        var(--surface-1);
    }
    body.mobile-layout #screenN5[data-mobile-pane="study-options"] .n5MobileContinueCard,
    body.mobile-layout #screenN5[data-mobile-pane="practice-options"] .n5MobileContinueCard,
    body.mobile-layout #screenN5[data-mobile-pane="exam-options"] .n5MobileContinueCard,
    body.mobile-layout #screenN5[data-mobile-pane="study-options"] .n5MobileHubGrid,
    body.mobile-layout #screenN5[data-mobile-pane="practice-options"] .n5MobileHubGrid,
    body.mobile-layout #screenN5[data-mobile-pane="exam-options"] .n5MobileHubGrid{
      display:none;
    }
    body.mobile-layout #screenN5 .n5MobileSubhub{
      margin-top:0;
      padding:10px;
      border-radius:15px;
      gap:8px;
    }
    body.mobile-layout #screenN5 .n5MobileSubhubBackBtn{
      justify-content:center;
      min-height:34px;
      padding:6px 10px;
      background:color-mix(in srgb, var(--card) 96%, var(--chip) 4%);
    }
    body.mobile-layout #screenN5 .n5MobileSubhub .note{
      margin-bottom:4px;
      font-size:11px;
      text-transform:uppercase;
      letter-spacing:.08em;
    }
    body.mobile-layout #screenN5 .n5MobileSubhubGrid{
      grid-template-columns:1fr;
      gap:6px;
    }
    body.mobile-layout #screenN5 .n5MobilePanelBar{
      position:static;
      margin:0 0 4px;
      padding:6px 8px;
    }
    body.mobile-layout #screenN5 #n5ContentCard{
      overflow:auto;
      padding:8px;
      border-radius:16px;
      box-shadow:0 10px 20px rgba(9,20,36,.07);
    }
    body.mobile-layout #screenN5[data-mobile-pane="practice"] .panelHeader,
    body.mobile-layout #screenN5[data-mobile-pane="exam"] .panelHeader{
      margin:0 0 6px;
      padding:8px;
      border-radius:14px;
      background:color-mix(in srgb, var(--card) 97%, var(--chip) 3%);
    }
    body.mobile-layout #screenN5[data-mobile-pane="practice"] .n5HeaderEyebrow,
    body.mobile-layout #screenN5[data-mobile-pane="exam"] .n5HeaderEyebrow,
    body.mobile-layout #screenN5[data-mobile-pane="practice"] .n5HeaderHint,
    body.mobile-layout #screenN5[data-mobile-pane="exam"] .n5HeaderHint,
    body.mobile-layout #screenN5[data-mobile-pane="practice"] .n5WorkspaceMeta,
    body.mobile-layout #screenN5[data-mobile-pane="exam"] .n5WorkspaceMeta{
      display:none;
    }
    body.mobile-layout #screenN5[data-mobile-pane="practice"] .practiceTitle,
    body.mobile-layout #screenN5[data-mobile-pane="exam"] .practiceTitle{
      font-size:18px;
      line-height:1.1;
    }
    body.mobile-layout #screenN5[data-mobile-pane="practice"] .practiceSub,
    body.mobile-layout #screenN5[data-mobile-pane="exam"] .practiceSub{
      font-size:12px;
      line-height:1.35;
      margin:0;
    }
    body.mobile-layout #screenN5 .n5WorkspaceSurface{
      gap:10px;
    }
    body.mobile-layout #screenN5 .practiceActions{
      margin-top:0;
    }
    body.mobile-layout #screenN5 .practiceSecondaryRow{
      gap:6px;
      align-items:stretch;
    }
    body.mobile-layout #screenN5 .practiceSecondaryRow .btn,
    body.mobile-layout #screenN5 .practiceSecondaryRow .miniLinkBtn,
    body.mobile-layout #screenN5 .n5ExamEntryGrid .btn{
      min-height:42px;
    }
    body.mobile-layout #screenN5 .n5ExamEntry{
      gap:8px;
    }
    body.mobile-layout #screenN5 .n5ExamEntryGrid{
      grid-template-columns:1fr;
      gap:6px;
    }
    body.mobile-layout #screenN5 .n5ExamOverview{
      grid-template-columns:1fr;
      gap:6px;
    }
    body.mobile-layout #screenAI .aiHubShell{
      display:grid;
      grid-template-rows:auto auto auto;
      gap:10px;
      align-content:start;
    }
    body.mobile-layout[data-current-route="ai"] .topbar.appTopbar{
      min-height:44px;
      padding:3px 7px;
      border-radius:12px;
    }
    body.mobile-layout[data-current-route="ai"] .appTopbarBrand b{
      font-size:16px;
    }
    body.mobile-layout[data-current-route="ai"] #themeBtn.appTopbarChip{
      min-height:28px;
      width:32px;
      min-width:32px;
      border-radius:10px;
    }
    body.mobile-layout[data-current-route="ai"] .appTopbarAvatar{
      display:none;
    }
    body.mobile-layout #screenAI .aiModeGrid,
    body.mobile-layout #screenAI .aiDetailGrid{
      min-height:0;
    }
    body.mobile-layout #screenAI .aiHeroCard{
      padding:12px 14px;
      border-radius:20px;
      min-height:auto;
      background:
        linear-gradient(145deg, color-mix(in srgb, var(--chip) 22%, var(--card) 78%) 0%, color-mix(in srgb, var(--card) 98%, transparent) 84%),
        var(--surface-1);
      box-shadow:0 12px 24px rgba(9,20,36,.07);
    }
    body.mobile-layout #screenAI .aiHeroCard > div{
      gap:4px;
    }
    body.mobile-layout #screenAI .aiHeroTitle{
      font-size:19px;
      line-height:1.06;
      letter-spacing:-.03em;
      margin:0;
    }
    body.mobile-layout #screenAI .aiHeroSub{
      display:block;
      margin:0;
      font-size:12px;
      line-height:1.42;
      max-width:32ch;
      display:-webkit-box;
      -webkit-line-clamp:2;
      -webkit-box-orient:vertical;
      overflow:hidden;
    }
    body.mobile-layout #screenAI .aiHeroMeta{
      display:none;
    }
    body.mobile-layout #screenAI .aiModeGrid{
      grid-template-columns:1fr;
      align-content:start;
      gap:10px;
    }
    body.mobile-layout #screenAI #aiCoachCardBtn{
      min-height:128px;
      padding:14px 16px;
      border-radius:22px;
      border-color:color-mix(in srgb, var(--chip) 34%, var(--border) 66%);
      background:
        linear-gradient(145deg, color-mix(in srgb, var(--chip) 28%, var(--card) 72%) 0%, color-mix(in srgb, var(--card) 98%, transparent) 80%),
        var(--surface-1);
      box-shadow:0 14px 28px rgba(9,20,36,.09);
    }
    body.mobile-layout #screenAI #senseiCardBtn{
      min-height:112px;
      padding:14px 16px;
      border-radius:20px;
      opacity:1;
      background:color-mix(in srgb, var(--card) 97%, var(--chip) 3%);
    }
    body.mobile-layout #screenAI .aiModeCard{
      gap:6px;
      text-align:left;
      justify-content:flex-start;
      box-shadow:0 10px 20px rgba(9,20,36,.06);
    }
    body.mobile-layout #screenAI .aiModeCard .hint{
      font-size:11px;
      line-height:1.2;
      text-transform:uppercase;
      letter-spacing:.08em;
    }
    body.mobile-layout #screenAI .aiModeTitle{
      font-size:19px;
      line-height:1.12;
      margin:0;
    }
    body.mobile-layout #screenAI .aiModeText{
      display:block;
      margin:0;
      font-size:12px;
      line-height:1.42;
      display:-webkit-box;
      -webkit-line-clamp:2;
      -webkit-box-orient:vertical;
      overflow:hidden;
      min-height:34px;
    }
    body.mobile-layout #screenAI .aiModeAction{
      margin-top:auto;
      display:inline-flex;
      align-items:center;
      justify-content:center;
      min-height:44px;
      width:100%;
      padding:10px 12px;
      border-radius:15px;
      border:1px solid color-mix(in srgb, var(--border) 78%, transparent);
      background:color-mix(in srgb, var(--card) 92%, var(--chip) 8%);
      font-size:13px;
      font-weight:900;
      color:var(--text);
    }
    body.mobile-layout #screenAI #aiCoachCardBtn .aiModeAction{
      background:color-mix(in srgb, var(--text) 92%, var(--chip) 8%);
      color:var(--card);
      border-color:transparent;
      box-shadow:0 8px 16px rgba(9,20,36,.08);
    }
    body.mobile-layout #screenAI .aiMobileContextRow{
      display:grid;
      grid-template-columns:repeat(3, minmax(0,1fr));
      gap:6px;
    }
    body.mobile-layout #screenAI .aiMobileContextRow .btn{
      min-height:34px;
      padding:7px 8px;
      border-radius:999px;
      font-size:11px;
      justify-content:center;
    }
    body.mobile-layout #screenAI[data-mobile-detail="open"] .aiHeroCard,
    body.mobile-layout #screenAI[data-mobile-detail="open"] .aiModeGrid,
    body.mobile-layout #screenAI[data-mobile-detail="open"] .aiMobileContextRow{
      display:none;
    }
    body.mobile-layout #screenAI[data-mobile-detail="closed"] .aiDetailGrid{
      display:none;
    }
    body.mobile-layout #screenAI .aiPanelCard{
      height:auto;
      overflow:auto;
      padding:12px;
      border-radius:20px;
      gap:10px;
    }
    body.mobile-layout #screenAI[data-mobile-detail="open"] .aiDetailGrid{
      height:auto;
      display:grid;
    }
    body.mobile-layout #screenAI[data-mobile-detail="open"] .aiPanelCard.isActive{
      min-height:calc(100svh - 188px);
      display:grid;
    }
    body.mobile-layout #screenAI .aiPanelHeader{
      gap:8px;
      padding-bottom:0;
    }
    body.mobile-layout #screenAI .aiPanelHeader h2{
      font-size:18px;
      line-height:1.12;
      margin:0;
    }
    body.mobile-layout #screenAI .aiPanelHeader .hint{
      font-size:12px;
      line-height:1.4;
      margin-top:2px;
    }
    body.mobile-layout #screenAI .aiCoachStats{
      gap:6px;
    }
    body.mobile-layout #screenAI .aiCoachStats .miniTag{
      min-height:30px;
      font-size:10px;
      padding-inline:8px;
    }
    body.mobile-layout #screenAI .aiCoachInsightGrid{
      gap:8px;
      grid-template-columns:1fr;
    }
    body.mobile-layout #screenAI .aiCoachInsightCard,
    body.mobile-layout #screenAI .aiCoachFocus,
    body.mobile-layout #screenAI .aiCoachResponse{
      padding:12px;
      border-radius:16px;
      gap:8px;
    }
    body.mobile-layout #screenAI .aiCoachInsightValue,
    body.mobile-layout #screenAI .aiCoachFocusTitle{
      font-size:16px;
      line-height:1.18;
    }
    body.mobile-layout #screenAI .aiCoachFocusText,
    body.mobile-layout #screenAI .aiCoachCtaText,
    body.mobile-layout #screenAI .senseiFooterNote{
      font-size:12px;
      line-height:1.42;
    }
    body.mobile-layout #screenAI .aiCoachChecklist{
      gap:6px;
    }
    body.mobile-layout #screenAI .aiCoachChecklist li{
      padding-left:18px;
      font-size:12px;
      line-height:1.4;
    }
    body.mobile-layout #screenAI .aiCoachActions{
      gap:6px;
      grid-template-columns:1fr;
    }
    body.mobile-layout #screenAI .aiCoachActions .btn,
    body.mobile-layout #screenAI #aiCoachOpenSuggestionBtn{
      min-height:44px;
      border-radius:15px;
      width:100%;
      justify-content:flex-start;
      text-align:left;
    }
    body.mobile-layout #screenAI .senseiMessages{
      min-height:0;
      max-height:none;
      flex:1 1 auto;
      padding:10px 2px 8px;
      border-radius:16px;
      background:color-mix(in srgb, var(--card) 98%, var(--chip) 2%);
      border:1px solid color-mix(in srgb, var(--border) 82%, transparent);
      gap:8px;
      overscroll-behavior:contain;
      scroll-behavior:smooth;
    }
    body.mobile-layout #screenAI .senseiMessage{
      gap:4px;
    }
    body.mobile-layout #screenAI .senseiMessage.grouped{
      margin-top:-2px;
    }
    body.mobile-layout #screenAI .senseiMessage.grouped .senseiLabel{
      display:none;
    }
    body.mobile-layout #screenAI .senseiLabel{
      font-size:11px;
      line-height:1.2;
      padding-inline:4px;
    }
    body.mobile-layout #screenAI .senseiBubble{
      max-width:80%;
      padding:10px 12px;
      border-radius:18px;
      font-size:14px;
      line-height:1.46;
      box-shadow:0 6px 14px rgba(9,20,36,.04);
    }
    body.mobile-layout #screenAI .senseiMessage.sensei .senseiBubble{
      border-bottom-left-radius:8px;
    }
    body.mobile-layout #screenAI .senseiMessage.user .senseiBubble{
      border-bottom-right-radius:8px;
    }
    body.mobile-layout #screenAI .senseiEmptyState{
      display:grid;
      gap:8px;
      align-content:center;
      justify-items:start;
      min-height:100%;
      padding:8px;
    }
    body.mobile-layout #screenAI .senseiEmptyTitle{
      font-size:17px;
      line-height:1.15;
      font-weight:900;
      letter-spacing:-.02em;
    }
    body.mobile-layout #screenAI .senseiEmptyText{
      font-size:13px;
      line-height:1.45;
      color:var(--muted);
      max-width:28ch;
    }
    body.mobile-layout #screenAI .senseiPromptBlock{
      display:grid;
      gap:6px;
    }
    body.mobile-layout #screenAI .senseiPromptLabel{
      margin:0 !important;
      font-size:11px;
      line-height:1.2;
      text-transform:uppercase;
      letter-spacing:.08em;
    }
    body.mobile-layout #screenAI .senseiQuickPrompts{
      display:flex;
      flex-wrap:nowrap;
      overflow-x:auto;
      overflow-y:hidden;
      gap:6px;
      padding-bottom:2px;
      scroll-snap-type:x proximity;
    }
    body.mobile-layout #screenAI .senseiQuickPrompts .btn{
      min-height:34px;
      padding:7px 10px;
      font-size:11px;
      border-radius:999px;
      flex:0 0 auto;
      width:auto;
      white-space:nowrap;
      justify-content:center;
      scroll-snap-align:start;
    }
    body.mobile-layout #screenAI .senseiComposer{
      gap:8px;
      grid-template-columns:minmax(0,1fr) auto;
      align-items:end;
      padding:8px;
      border:1px solid color-mix(in srgb, var(--border) 82%, transparent);
      border-radius:18px;
      background:color-mix(in srgb, var(--card) 97%, var(--chip) 3%);
      position:sticky;
      bottom:0;
      z-index:2;
    }
    body.mobile-layout #screenAI .senseiComposer .input{
      min-height:44px;
      border-radius:15px;
      padding:11px 13px;
      font-size:15px;
    }
    body.mobile-layout #screenAI .senseiComposer .btn{
      width:42px;
      min-width:42px;
      min-height:42px;
      padding:0;
      border-radius:14px;
      justify-content:center;
    }
    body.mobile-layout #screenAI #senseiSendBtn{
      font-size:0;
      position:relative;
    }
    body.mobile-layout #screenAI #senseiSendBtn::before{
      content:attr(data-label);
      font-size:12px;
      font-weight:900;
      line-height:1;
    }
    body.mobile-layout #screenAI .senseiFooterNote{
      font-size:11px;
      line-height:1.35;
      margin-top:2px;
    }
    body.mobile-layout #screenAI #aiSenseiPanel{
      grid-template-rows:auto minmax(0,1fr) auto auto auto;
      overflow:hidden;
    }
    body.mobile-layout #screenStudent #studentStatsView{
      grid-template-rows:minmax(0,.98fr) minmax(0,.88fr) minmax(0,.78fr) auto;
    }
    body.mobile-layout #screenStudent .studentSummaryCard{
      order:1;
    }
    body.mobile-layout #screenStudent .studentWeekCard{
      order:2;
      border-color:color-mix(in srgb, var(--chip) 34%, var(--border) 66%);
      background:
        linear-gradient(145deg, color-mix(in srgb, var(--chip) 18%, var(--card) 82%) 0%, color-mix(in srgb, var(--card) 98%, transparent) 78%),
        var(--surface-1);
    }
    body.mobile-layout #screenStudent .studentWeakCard{
      order:3;
    }
    body.mobile-layout #screenStudent .studentMobileMoreCard{
      order:4;
    }
    body.mobile-layout #screenStudent .studentSummaryCard,
    body.mobile-layout #screenStudent .studentWeakCard,
    body.mobile-layout #screenStudent .studentWeekCard,
    body.mobile-layout #screenStudent .studentCategoryCard,
    body.mobile-layout #screenStudent .studentMilestoneCard{
      overflow:auto;
    }
    body.mobile-layout #screenStudent .studentSummaryCard{
      overflow:hidden;
    }
    body.mobile-layout #screenStudent .studentWeakList{
      max-height:102px;
      overflow:auto;
    }
    body.mobile-layout #screenStudent .studentMobileMoreCard{
      padding:7px 9px;
    }
    body.mobile-layout #screenStudent .studentMobileMoreCard .hint{
      display:none;
    }
    body.mobile-layout #screenStudent .studentCategoryCard,
    body.mobile-layout #screenStudent .studentMilestoneCard{
      display:none !important;
    }
    body.mobile-layout #screenStudent[data-mobile-panel="performance"] .studentCategoryCard,
    body.mobile-layout #screenStudent[data-mobile-panel="milestones"] .studentMilestoneCard{
      display:grid !important;
    }
    body.mobile-layout #screenStudent[data-mobile-panel]:not([data-mobile-panel="none"]) .studentMobileMoreCard{
      display:none !important;
    }
    body.mobile-layout #screenTeacher .teacherDashboardGrid{
      overflow:visible;
    }
    body.mobile-layout #screenTeacher .teacherDashboardGrid > .card{
      overflow:auto;
    }
    body.mobile-layout #screenSettings .settingsGrid{
      grid-template-rows:minmax(0,1fr);
    }
    body.mobile-layout #screenSettings .card{
      height:100%;
      overflow:auto;
    }
    body.mobile-layout #screenSettings .settingsMobileQuickGrid{
      position:static;
      top:auto;
      margin:0 0 8px;
    }
    body.mobile-layout .topbar.appTopbar{
      min-height:48px;
      padding:4px 8px;
      border-radius:13px;
    }
    body.mobile-layout .appTopbarBrand b{
      font-size:17px;
    }
    body.mobile-layout .appTopbarOptional{
      display:none;
    }
    body.mobile-layout .appTopbarRight{
      width:auto;
      display:flex;
      align-items:center;
      justify-content:flex-end;
      gap:3px;
      flex-wrap:nowrap;
      min-width:0;
    }
    body.mobile-layout .appTopbar .roleSeg{
      min-height:30px;
      padding:1px;
      border-radius:12px;
    }
    body.mobile-layout .roleSegBtn{
      min-height:26px;
      font-size:11px;
      padding:0 8px;
    }
    body.mobile-layout .appTopbarChip{
      min-height:30px;
      border-radius:11px;
      padding-inline:8px;
      font-size:11px;
    }
    body.mobile-layout .appTopbar .roleSeg,
    body.mobile-layout #loginBtn.appTopbarChip,
    body.mobile-layout #logoutBtn.appTopbarChip{
      display:none;
    }
    body.mobile-layout #themeBtn.appTopbarChip{
      width:34px;
      min-width:34px;
    }
    body.mobile-layout[data-current-route="settings"] .appTopbarRight{
      width:min(100%, 232px);
      display:grid;
      grid-template-columns:minmax(0,1fr) auto;
      grid-template-areas:
        "role utility"
        "auth auth";
      gap:6px 8px;
      align-items:start;
    }
    body.mobile-layout[data-current-route="settings"] .appTopbar .roleSeg,
    body.mobile-layout[data-current-route="settings"] #loginBtn.appTopbarChip,
    body.mobile-layout[data-current-route="settings"] #logoutBtn.appTopbarChip{
      display:flex;
    }
    body.mobile-layout[data-current-route="settings"] .appTopbar .roleSeg{
      display:grid;
    }
    body.mobile-layout.mobile-chrome-collapsed .topbar.appTopbar{
      transform:none;
      opacity:1;
      box-shadow:0 8px 16px rgba(12,23,38,.06);
      background:color-mix(in srgb, var(--card) 90%, transparent);
    }
    body.mobile-layout.mobile-quiz-active .topbar.appTopbar{
      min-height:44px;
      padding:4px 8px;
      border-radius:12px;
      background:color-mix(in srgb, var(--card) 84%, transparent);
      box-shadow:0 6px 14px rgba(12,23,38,.05);
    }
    body.mobile-layout.mobile-quiz-active .appTopbarBrand b{
      font-size:16px;
    }
    body.mobile-layout.mobile-quiz-active .appTopbarRight{
      width:auto;
      display:flex;
      align-items:center;
      justify-content:flex-end;
      gap:6px;
    }
    body.mobile-layout.mobile-quiz-active .appTopbar .roleSeg,
    body.mobile-layout.mobile-quiz-active #loginBtn.appTopbarChip,
    body.mobile-layout.mobile-quiz-active #logoutBtn.appTopbarChip{
      display:none;
    }
    body.mobile-layout.mobile-quiz-active #themeBtn.appTopbarChip{
      min-height:30px;
      width:34px;
      min-width:34px;
      border-radius:11px;
    }
    body.mobile-layout :is(.btn, .miniTag, .hint, .note, h1, h2, h3, .homeHeroTitle, .practiceTitle, .studentSectionTitle, .aiModeTitle){
      min-width:0;
      overflow-wrap:anywhere;
      word-break:break-word;
    }
    body.mobile-layout :is(#screenHome, #screenAI, #screenKana, #screenN5, #screenStudent, #screenTeacher, #screenSettings) .card{
      overflow:hidden;
    }
    body.mobile-layout .miniTag{
      max-width:100%;
    }
    body.mobile-layout #bottomNav{
      padding:2px 6px calc(2px + env(safe-area-inset-bottom));
    }
    body.mobile-layout #bottomNav .bottomNavBar{
      padding:2px;
      gap:3px;
      border-radius:14px;
      box-shadow:0 8px 16px rgba(9,20,36,.11);
    }
    body.mobile-layout #bottomNav .bottomNavBtn{
      min-height:42px;
      padding:3px 2px 4px;
      font-size:9px;
      overflow:hidden;
      text-overflow:ellipsis;
      min-width:0;
    }
    body.mobile-layout #bottomNav .bottomNavBtn::before{
      width:20px;
      height:20px;
      font-size:9px;
    }
    body.mobile-layout #screenHome .homeHero.homeSpanAll,
    body.mobile-layout #screenHome .homePathCard,
    body.mobile-layout #screenHome .homeQuickActionsCard,
    body.mobile-layout #screenHome .homeMobileMoreCard,
    body.mobile-layout #screenKana .kanaJourneyCard,
    body.mobile-layout #screenN5 .n5MobileHubCard,
    body.mobile-layout #screenAI .aiHeroCard,
    body.mobile-layout #screenStudent .studentSummaryCard,
    body.mobile-layout #screenStudent .studentWeakCard,
    body.mobile-layout #screenStudent .studentMobileMoreCard,
    body.mobile-layout #screenSettings .card{
      box-shadow:0 12px 24px rgba(9,20,36,.07);
    }
    body.mobile-layout #screenTeacher .teacherDashboardGrid{
      grid-template-rows:minmax(0,1fr);
    }
    body.mobile-layout #screenTeacher .teacherDashboardGrid > :not(.teacherHeroCard):not(.teacherHealthCard):not(.teacherActionsCard){
      display:none;
    }
    body.mobile-layout #screenTeacher .teacherHeroCard,
    body.mobile-layout #screenTeacher .teacherHealthCard,
    body.mobile-layout #screenTeacher .teacherActionsCard{
      height:100%;
      overflow:auto;
    }
    body.mobile-layout #screenTeacher .teacherActionsCard .row .btn{
      flex:1 1 100%;
    }
    body.mobile-layout #screenHome .homeQuickActionsGrid,
    body.mobile-layout #screenKana .kanaMobileActionGrid,
    body.mobile-layout #screenN5 .n5MobileHubGrid,
    body.mobile-layout #screenN5 .n5MobileSubhubGrid,
    body.mobile-layout #screenStudent .studentMobileMoreGrid,
    body.mobile-layout #screenSettings .settingsMobileQuickGrid{
      grid-template-columns:repeat(2, minmax(0,1fr));
      gap:5px;
    }
    body.mobile-layout #screenHome .homeQuickActionBtn,
    body.mobile-layout #screenKana .kanaMobileActionGrid .btn,
    body.mobile-layout #screenN5 .n5MobileHubGrid .btn,
    body.mobile-layout #screenN5 .n5MobileSubhubGrid .btn,
    body.mobile-layout #screenStudent .studentMobileMoreGrid .btn,
    body.mobile-layout #screenSettings .settingsMobileQuickGrid .btn{
      width:100%;
      min-width:0;
      min-height:40px;
      padding:7px 9px;
      justify-content:flex-start;
      text-align:left;
      line-height:1.25;
      white-space:normal;
    }
    body.mobile-layout #screenKana .kanaMobileActionGrid #kanaMobileAssessmentBtn,
    body.mobile-layout #screenKana .kanaMobileActionGrid #kanaMobileQuizBtn{
      grid-column:1 / -1;
      min-height:46px;
      font-size:14px;
      box-shadow:0 8px 16px rgba(9,20,36,.07);
    }
    body.mobile-layout #screenSettings .row,
    body.mobile-layout #screenTeacher .row,
    body.mobile-layout #studentSettingsCard .row,
    body.mobile-layout #teacherSettingsCard .row{
      align-items:stretch;
    }
    body.mobile-layout #screenSettings .row .btn,
    body.mobile-layout #screenTeacher .row .btn,
    body.mobile-layout #studentSettingsCard .row .btn,
    body.mobile-layout #teacherSettingsCard .row .btn{
      width:100%;
      min-width:0;
    }
    body.mobile-layout #screenSettings .input,
    body.mobile-layout #screenTeacher .input{
      min-width:0;
      font-size:16px;
    }
    body.mobile-layout #screenHome .homeHeroTitle,
    body.mobile-layout #screenKana .kanaJourneyTitle,
    body.mobile-layout #screenStudent .studentSectionTitle{
      font-size:20px;
      line-height:1.02;
    }
    body.mobile-layout #screenAI .aiHeroTitle,
    body.mobile-layout #screenN5 .n5MobileHubTop h3{
      font-size:18px;
      line-height:1.04;
    }
    body.mobile-layout #screenStudent #studentSuggestedActionBtn{
      min-height:44px;
      font-size:14px;
      box-shadow:0 8px 14px rgba(9,20,36,.07);
    }
    body.mobile-layout #screenStudent #studentReviewWeakItemsBtn{
      box-shadow:0 7px 14px rgba(9,20,36,.06);
    }
    body.mobile-layout #screenStudent #studentReviewWeakItemsBtn{
      min-height:40px;
    }
    body.mobile-layout[data-current-route="student"] .topbar.appTopbar{
      min-height:44px;
      padding:3px 7px;
      border-radius:12px;
    }
    body.mobile-layout[data-current-route="student"] .appTopbarBrand b{
      font-size:16px;
    }
    body.mobile-layout[data-current-route="student"] #themeBtn.appTopbarChip{
      min-height:28px;
      width:32px;
      min-width:32px;
      border-radius:10px;
    }
    body.mobile-layout #screenStudent #studentStatsView{
      grid-template-rows:auto auto auto auto;
      gap:10px;
    }
    body.mobile-layout #screenStudent .studentProfileCard{
      order:1;
      display:none;
      gap:10px;
      padding:14px;
      border-radius:20px;
      background:
        linear-gradient(148deg, color-mix(in srgb, var(--chip) 24%, var(--card) 76%) 0%, color-mix(in srgb, var(--card) 97%, transparent) 84%),
        var(--surface-1);
      border-color:color-mix(in srgb, var(--chip) 30%, var(--border) 70%);
    }
    body.mobile-layout #screenStudent .studentSummaryCard{
      order:1;
      padding:12px 12px 11px;
    }
    body.mobile-layout #screenStudent .studentActionCard{
      order:3;
      padding:12px;
      background:
        linear-gradient(145deg, color-mix(in srgb, var(--chip) 22%, var(--card) 78%) 0%, color-mix(in srgb, var(--card) 98%, transparent) 82%),
        var(--surface-1);
    }
    body.mobile-layout #screenStudent .studentHistoryCard{
      order:5;
      display:grid;
      gap:10px;
      padding:12px;
      border-radius:20px;
      background:
        linear-gradient(145deg, color-mix(in srgb, var(--chip) 14%, var(--card) 86%) 0%, color-mix(in srgb, var(--card) 98%, transparent) 84%),
        var(--surface-1);
    }
    body.mobile-layout #screenStudent .studentWeekCard{
      order:7;
      display:grid !important;
      padding:11px;
      gap:8px;
      border-color:color-mix(in srgb, var(--chip) 34%, var(--border) 66%);
      background:
        linear-gradient(145deg, color-mix(in srgb, var(--chip) 18%, var(--card) 82%) 0%, color-mix(in srgb, var(--card) 98%, transparent) 78%),
        var(--surface-1);
    }
    body.mobile-layout #screenStudent .studentMobileMoreCard{
      order:6;
      display:grid;
      gap:8px;
      padding:12px;
      background:
        linear-gradient(145deg, color-mix(in srgb, var(--chip) 16%, var(--card) 84%) 0%, color-mix(in srgb, var(--card) 98%, transparent) 82%),
        var(--surface-1);
    }
    body.mobile-layout #screenStudent .studentWeakCard{
      order:4;
      padding:12px;
    }
    body.mobile-layout #screenStudent .studentWeekCard,
    body.mobile-layout #screenStudent .studentCategoryCard,
    body.mobile-layout #screenStudent .studentMilestoneCard{
      display:none !important;
    }
    body.mobile-layout #screenStudent[data-mobile-panel="activity"] .studentWeekCard,
    body.mobile-layout #screenStudent[data-mobile-panel="performance"] .studentCategoryCard,
    body.mobile-layout #screenStudent[data-mobile-panel="milestones"] .studentMilestoneCard{
      display:grid !important;
      order:7;
    }
    body.mobile-layout #screenStudent .studentSectionIntro{
      gap:6px;
    }
    body.mobile-layout #screenStudent .studentSummaryCard h3,
    body.mobile-layout #screenStudent .studentProfileCard h3,
    body.mobile-layout #screenStudent .studentHistoryCard h3,
    body.mobile-layout #screenStudent .studentWeakCard h3,
    body.mobile-layout #screenStudent .studentMobileMoreCard h3,
    body.mobile-layout #screenStudent .studentWeekCard h3,
    body.mobile-layout #screenStudent .studentCategoryCard h3,
    body.mobile-layout #screenStudent .studentMilestoneCard h3{
      font-size:15px;
      line-height:1.15;
      letter-spacing:.02em;
      text-transform:none;
      color:var(--text);
      margin:0;
    }
    body.mobile-layout #screenStudent .studentSectionTitle{
      font-size:16px;
      line-height:1.18;
      letter-spacing:-.02em;
      margin:0;
    }
    body.mobile-layout #screenStudent .studentSummaryCard .studentSectionIntro > .miniList,
    body.mobile-layout #screenStudent .studentSummaryCard .divider,
    body.mobile-layout #screenStudent .studentSummaryRingBlock > .note,
    body.mobile-layout #screenStudent .studentWeakCard .hint,
    body.mobile-layout #screenStudent .studentQuickActionGrid,
    body.mobile-layout #screenStudent .studentSummaryFocus > .miniList,
    body.mobile-layout #screenStudent .studentHeroMeta,
    body.mobile-layout #screenStudent .studentHeroAction{
      display:none;
    }
    body.mobile-layout #screenStudent .studentProfileRow{
      display:grid;
      grid-template-columns:auto minmax(0, 1fr);
      gap:12px;
      align-items:center;
    }
    body.mobile-layout #screenStudent .studentAvatarPlaceholder{
      width:58px;
      height:58px;
      border-radius:999px;
      display:grid;
      place-items:center;
      flex:0 0 auto;
      font-size:20px;
      line-height:1;
      font-weight:950;
      letter-spacing:-.03em;
      color:var(--text);
      border:1px solid color-mix(in srgb, var(--chip) 34%, var(--border) 66%);
      background:
        radial-gradient(circle at 30% 30%, color-mix(in srgb, white 72%, var(--chip) 28%), transparent 58%),
        color-mix(in srgb, var(--card) 88%, var(--chip) 12%);
      box-shadow:inset 0 1px 0 rgba(255,255,255,.35);
    }
    body.mobile-layout #screenStudent .studentProfileMeta{
      min-width:0;
      display:grid;
      gap:4px;
    }
    body.mobile-layout #screenStudent .studentProfileName{
      font-size:18px;
      line-height:1.12;
      font-weight:950;
      letter-spacing:-.02em;
      color:var(--text);
      overflow-wrap:anywhere;
    }
    body.mobile-layout #screenStudent .studentProfileSub,
    body.mobile-layout #screenStudent .studentProfileTrack,
    body.mobile-layout #screenStudent .studentProfileFooter,
    body.mobile-layout #screenStudent .studentHistoryFooter{
      font-size:12px;
      line-height:1.45;
      color:var(--muted);
      margin:0;
    }
    body.mobile-layout #screenStudent .studentProfileTrack b{
      color:var(--text);
      font-weight:900;
    }
    body.mobile-layout #screenStudent .studentProfileChips{
      display:flex;
      flex-wrap:wrap;
      gap:6px;
    }
    body.mobile-layout #screenStudent .studentProfileChips .miniTag{
      min-height:32px;
      padding:7px 10px;
      border-radius:999px;
      background:color-mix(in srgb, var(--card) 90%, var(--chip) 10%);
      border:1px solid color-mix(in srgb, var(--chip) 20%, var(--border) 80%);
    }
    body.mobile-layout #screenStudent .studentHistoryHead{
      display:flex;
      align-items:flex-start;
      justify-content:space-between;
      gap:10px;
    }
    body.mobile-layout #screenStudent .studentHistoryHead .miniTag{
      min-height:30px;
      padding-inline:9px;
    }
    body.mobile-layout #screenStudent .studentHistoryGrid{
      display:grid;
      grid-template-columns:repeat(2, minmax(0,1fr));
      gap:8px;
    }
    body.mobile-layout #screenStudent .studentHistoryItem{
      min-width:0;
      display:grid;
      gap:5px;
      padding:10px 11px;
      border-radius:16px;
      border:1px solid color-mix(in srgb, var(--chip) 18%, var(--border) 82%);
      background:color-mix(in srgb, var(--card) 94%, var(--chip) 6%);
    }
    body.mobile-layout #screenStudent .studentHistoryLabel{
      font-size:11px;
      line-height:1.2;
      font-weight:900;
      letter-spacing:.06em;
      text-transform:uppercase;
      color:var(--muted);
    }
    body.mobile-layout #screenStudent .studentHistoryValue{
      font-size:13px;
      line-height:1.32;
      font-weight:800;
      color:var(--text);
      overflow-wrap:anywhere;
    }
    body.mobile-layout #screenStudent .studentSummaryBody{
      grid-template-columns:1fr;
      gap:8px;
    }
    body.mobile-layout #screenStudent .studentSummaryRingBlock{
      gap:8px;
    }
    body.mobile-layout #screenStudent .studentOverviewHero{
      gap:8px;
      align-items:flex-start;
      flex-wrap:nowrap;
    }
    body.mobile-layout #screenStudent #studentMiniRing{
      width:78px;
      height:78px;
      flex:0 0 auto;
    }
    body.mobile-layout #screenStudent #studentMiniRing .ringInner{
      width:56px;
      height:56px;
    }
    body.mobile-layout #screenStudent .studentRingLabel{
      font-size:9px;
    }
    body.mobile-layout #screenStudent .studentRingValue{
      font-size:18px;
    }
    body.mobile-layout #screenStudent .studentRingSub{
      font-size:9px;
      max-width:58px;
    }
    body.mobile-layout #screenStudent .studentSummaryFocus{
      gap:8px;
    }
    body.mobile-layout #screenStudent .studentSummaryHeadline{
      font-size:16px;
      line-height:1.15;
    }
    body.mobile-layout #screenStudent .studentIdentityHeader{
      grid-template-columns:minmax(0, 1fr);
      gap:12px;
    }
    body.mobile-layout #screenStudent .studentIdentityProfile{
      align-items:flex-start;
      gap:12px;
    }
    body.mobile-layout #screenStudent .studentIdentityAvatar{
      width:56px;
      height:56px;
      font-size:19px;
    }
    body.mobile-layout #screenStudent .studentIdentityName{
      font-size:20px;
    }
    body.mobile-layout #screenStudent .studentIdentitySub,
    body.mobile-layout #screenStudent .studentXpMeta{
      font-size:12px;
      line-height:1.45;
    }
    body.mobile-layout #screenStudent .studentIdentityHeader .btn{
      width:100%;
      min-width:0;
      min-height:48px;
    }
    body.mobile-layout #screenStudent .studentXpCard{
      padding:14px 12px;
      border-radius:18px;
      gap:8px;
    }
    body.mobile-layout #screenStudent .studentXpValue{
      font-size:20px;
    }
    body.mobile-layout #screenStudent .studentIdentityStats{
      gap:8px;
    }
    body.mobile-layout #screenStudent .studentIdentityStat{
      min-height:88px;
      padding:12px;
      border-radius:16px;
    }
    body.mobile-layout #screenStudent .studentIdentityStatValue{
      font-size:24px;
    }
    body.mobile-layout #screenStudent .studentIdentityMetaRow{
      gap:6px;
    }
    body.mobile-layout #screenStudent .studentIdentityMetaRow .miniTag{
      min-height:30px;
      padding:6px 9px;
      font-size:11px;
    }
    body.mobile-layout #screenStudent #studentSummaryMotivation{
      font-size:12px;
      line-height:1.42;
      margin:0;
    }
    body.mobile-layout #screenStudent .studentSummaryCard .studentSectionIntro .hint{
      font-size:12px;
      line-height:1.4;
      margin:0;
    }
    body.mobile-layout #screenStudent .studentMetricGrid{
      grid-template-columns:repeat(3, minmax(0,1fr));
      gap:6px;
    }
    body.mobile-layout #screenStudent .studentMetricTile{
      min-height:68px;
      padding:9px 10px;
      border-radius:16px;
    }
    body.mobile-layout #screenStudent .studentMetricTile:nth-child(4){
      display:none;
    }
    body.mobile-layout #screenStudent .studentMetricTile .muted{
      font-size:10px;
      line-height:1.15;
    }
    body.mobile-layout #screenStudent .studentMetricTile b{
      margin-top:5px;
      font-size:24px;
      line-height:1;
    }
    body.mobile-layout #screenStudent .studentExtraDetails{
      display:block;
      border-top:1px solid color-mix(in srgb, var(--border) 82%, transparent);
      padding-top:8px;
    }
    body.mobile-layout #screenStudent .studentExtraDetails summary{
      list-style:none;
      cursor:pointer;
      font-size:12px;
      font-weight:900;
      letter-spacing:.06em;
      text-transform:uppercase;
      color:var(--muted);
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:8px;
    }
    body.mobile-layout #screenStudent .studentExtraDetails summary::-webkit-details-marker{
      display:none;
    }
    body.mobile-layout #screenStudent .studentExtraDetails summary::after{
      content:"+";
      font-size:16px;
      line-height:1;
      color:var(--text);
    }
    body.mobile-layout #screenStudent .studentExtraDetails[open] summary::after{
      content:"-";
    }
    body.mobile-layout #screenStudent .studentExtraDetails .studentMobileMoreGrid{
      display:grid;
      margin-top:8px;
    }
    body.mobile-layout #screenStudent[data-mobile-panel]:not([data-mobile-panel="none"]) .studentMobileMoreCard{
      display:grid !important;
    }
    body.mobile-layout #screenStudent .studentWeakCard > h3{
      margin:0 0 2px;
    }
    body.mobile-layout #screenStudent .studentWeakList{
      gap:8px;
      max-height:none;
      overflow:visible;
    }
    body.mobile-layout #screenStudent .studentWeakGroup{
      gap:8px;
      padding:10px 11px;
      border-radius:16px;
    }
    body.mobile-layout #screenStudent .studentWeakGroupHead{
      align-items:flex-start;
      gap:6px;
      flex-direction:column;
    }
    body.mobile-layout #screenStudent .studentWeakChips{
      gap:6px;
    }
    body.mobile-layout #screenStudent .studentWeakChip{
      min-height:32px;
      padding:7px 11px;
      font-size:11px;
    }
    body.mobile-layout #screenStudent #studentWeakFocus{
      margin-top:6px !important;
      font-size:12px;
      line-height:1.4;
    }
    body.mobile-layout #screenStudent .studentCardActions{
      margin-top:8px;
      gap:6px;
    }
    body.mobile-layout #screenStudent #studentOpenAiModalBtn{
      display:none;
    }
    body.mobile-layout #screenStudent #studentReviewWeakItemsBtn{
      min-height:42px;
      width:100%;
      justify-content:flex-start;
      text-align:left;
      border-radius:15px;
    }
    body.mobile-layout #screenStudent .studentWeekCard > h3{
      display:block;
      margin:0;
    }
    body.mobile-layout #screenStudent .studentWeekCard > .hint,
    body.mobile-layout #screenStudent .studentActivityGrid,
    body.mobile-layout #screenStudent #studentWeekBars,
    body.mobile-layout #screenStudent #studentWeekHint{
      display:none;
    }
    body.mobile-layout #screenStudent .studentSuggestedAction{
      margin-top:0;
      padding:0;
      border:none;
      background:transparent;
      border-radius:0;
      display:grid;
      gap:8px;
    }
    body.mobile-layout #screenStudent .studentSuggestedLabel{
      font-size:11px;
    }
    body.mobile-layout #screenStudent .studentSuggestedTitle{
      margin-top:0;
      font-size:17px;
      line-height:1.15;
    }
    body.mobile-layout #screenStudent #studentSuggestedActionText{
      font-size:12px;
      line-height:1.45;
      margin:0;
    }
    body.mobile-layout #screenStudent .studentActionCard .studentCardActions,
    body.mobile-layout #screenStudent .studentWeekCard .studentCardActions{
      margin-top:0;
      gap:6px;
    }
    body.mobile-layout #screenStudent .studentActionCard .studentCardActions .miniTag,
    body.mobile-layout #screenStudent .studentWeekCard .studentCardActions .miniTag{
      font-size:10px;
      min-height:30px;
      padding-inline:8px;
    }
    body.mobile-layout #screenStudent #studentSuggestedActionBtn{
      min-height:44px;
      width:100%;
      justify-content:flex-start;
      text-align:left;
      border-radius:15px;
      box-shadow:0 9px 16px rgba(9,20,36,.08);
    }
    body.mobile-layout #screenStudent .studentActionCard > h3,
    body.mobile-layout #screenStudent .studentActionCard .divider{
      display:none;
    }
    body.mobile-layout #screenStudent .studentWeekCard,
    body.mobile-layout #screenStudent .studentCategoryCard,
    body.mobile-layout #screenStudent .studentMilestoneCard{
      padding:11px;
      gap:8px;
    }
    body.mobile-layout .modalBack{
      align-items:flex-end;
      justify-content:stretch;
      padding:4px 6px calc(4px + env(safe-area-inset-bottom));
      overflow:hidden;
    }
    body.mobile-layout .modalCard{
      width:100%;
      max-width:none;
      max-height:min(86svh, 760px);
      border-radius:20px 20px 14px 14px;
      padding:8px;
      overflow:auto;
      overscroll-behavior:contain;
    }
    body.mobile-layout .kanaChartModalCard,
    body.mobile-layout .n5BrowseModalCard,
    body.mobile-layout .kanaAssessmentModalCard{
      width:100%;
      max-width:none;
      max-height:min(86svh, 820px);
      padding:8px;
      border-radius:20px 20px 14px 14px;
    }
    body.mobile-layout .sessionSummaryModalCard{
      width:100%;
      max-width:none;
      max-height:min(88svh, 820px);
      padding:16px;
      border-radius:22px 22px 18px 18px;
    }
    body.mobile-layout .sessionSummaryHeadline{
      font-size:24px;
    }
    body.mobile-layout .sessionSummaryScoreCard{
      padding:16px;
      border-radius:20px;
    }
    body.mobile-layout .sessionSummaryScoreValue{
      font-size:36px;
    }
    body.mobile-layout .n5BrowseModalBody,
    body.mobile-layout .kanaChartBody{
      max-height:none;
      min-height:0;
    }
    body.mobile-layout .n5BrowseModalHeader,
    body.mobile-layout .n5BrowseModalMeta,
    body.mobile-layout .kanaChartHeader,
    body.mobile-layout .kanaChartFooter{
      gap:4px;
      flex-direction:column;
      align-items:stretch;
    }
    body.mobile-layout #flashModalBack .hint,
    body.mobile-layout #kanaChartModalBack .hint,
    body.mobile-layout #n5BrowseModalBack .hint,
    body.mobile-layout #premiumModalBack .hint,
    body.mobile-layout #payModalBack .hint{
      margin-top:6px !important;
    }
    body.mobile-layout .flashModeSeg{
      grid-template-columns:1fr;
    }
    body.mobile-layout #flashModalBack .row,
    body.mobile-layout #kanaAssessmentPromptBack .row,
    body.mobile-layout #kanaAssessmentGateBack .row,
    body.mobile-layout #kanaAssessmentFlowBack .row,
    body.mobile-layout #n5KanaFirstGateBack .row,
    body.mobile-layout #n5AssessmentGateBack .row,
    body.mobile-layout #n5AssessmentFlowBack .row,
    body.mobile-layout #premiumModalBack .row,
    body.mobile-layout #payModalBack .row{
      flex-direction:column;
      align-items:stretch !important;
      justify-content:flex-start !important;
    }
    body.mobile-layout #flashModalBack .row .btn,
    body.mobile-layout #kanaAssessmentPromptBack .row .btn,
    body.mobile-layout #kanaAssessmentGateBack .row .btn,
    body.mobile-layout #kanaAssessmentFlowBack .row .btn,
    body.mobile-layout #n5KanaFirstGateBack .row .btn,
    body.mobile-layout #n5AssessmentGateBack .row .btn,
    body.mobile-layout #n5AssessmentFlowBack .row .btn,
    body.mobile-layout #premiumModalBack .row .btn,
    body.mobile-layout #payModalBack .row .btn{
      width:100%;
    }
    body.mobile-layout #flashModalBack .flashCardFront{
      min-height:142px;
      padding:14px 10px;
      font-size:clamp(38px, 14vw, 54px);
    }
    body.mobile-layout #flashModalBack #n5FlashBack{
      padding:10px;
    }
    body.mobile-layout #n5BrowseModalBack #n5List{
      display:grid !important;
      grid-template-columns:1fr;
      gap:8px;
    }
    body.mobile-layout #n5BrowseModalBack .pager,
    body.mobile-layout #n5BrowseModalBack .finderRow{
      justify-content:stretch;
    }
    body.mobile-layout #n5BrowseModalBack .pager .btn,
    body.mobile-layout #n5BrowseModalBack .finderRow .input{
      width:100%;
    }
    body.mobile-layout #n5BrowseModalBack .segGroup{
      grid-template-columns:repeat(2, minmax(0,1fr));
    }
    body.mobile-layout .toast{
      left:10px;
      right:10px;
      bottom:calc(74px + env(safe-area-inset-bottom));
      transform:none;
      min-width:0;
      width:auto;
      padding:8px 10px;
    }
    body.mobile-layout #screenKana[data-mobile-quiz-state="active"] .kanaPracticePanel{
      display:grid;
      grid-template-rows:auto auto auto auto minmax(0,1fr) auto;
      gap:8px;
      padding:10px 10px 8px;
      overflow:hidden;
      min-height:0;
      border-radius:18px;
    }
    body.mobile-layout #screenKana[data-mobile-quiz-state="active"] .kanaPracticeHeader{
      gap:4px;
      padding-bottom:0;
    }
    body.mobile-layout #screenKana[data-mobile-quiz-state="active"] .kanaPracticeHeader h3,
    body.mobile-layout #screenKana[data-mobile-quiz-state="active"] .kanaPracticeHeader .hint{
      display:none;
    }
    body.mobile-layout #screenKana[data-mobile-quiz-state="active"] #kanaBrowseBtn,
    body.mobile-layout #screenKana[data-mobile-quiz-state="active"] #resetKana{
      display:none;
    }
    body.mobile-layout #screenKana[data-mobile-quiz-state="active"] .kanaToolbar{
      justify-content:flex-start;
    }
    body.mobile-layout #screenKana[data-mobile-quiz-state="active"] .kanaModeTabs,
    body.mobile-layout #screenKana[data-mobile-quiz-state="active"] .kanaSetTabs{
      margin-bottom:0 !important;
      gap:6px;
    }
    body.mobile-layout #screenKana[data-mobile-quiz-state="active"] .seg{
      min-height:32px;
      padding:7px 9px;
      font-size:11px;
      border-radius:12px;
    }
    body.mobile-layout #screenKana[data-mobile-quiz-state="active"] .kanaQuestionShell{
      padding:14px 14px 12px;
      display:grid;
      gap:10px;
      align-content:start;
      justify-items:center;
      min-height:0;
      border-radius:22px;
      background:
        radial-gradient(220px 120px at 100% 0%, color-mix(in srgb, var(--chip) 16%, transparent), transparent 74%),
        color-mix(in srgb, var(--card) 96%, var(--chip) 4%);
    }
    body.mobile-layout #screenKana[data-mobile-quiz-state="active"] .kanaPromptLabel,
    body.mobile-layout #screenKana[data-mobile-quiz-state="active"] #kanaHint{
      font-size:11px;
      line-height:1.35;
      text-align:center;
      margin:0;
    }
    body.mobile-layout #screenKana[data-mobile-quiz-state="active"] .big{
      min-height:auto;
      padding:4px 0 2px;
      font-size:clamp(76px, 24vw, 108px);
      line-height:1;
      text-align:center;
    }
    body.mobile-layout #screenKana[data-mobile-quiz-state="active"] .kanaActionBar{
      gap:6px;
      margin-top:0 !important;
    }
    body.mobile-layout #screenKana[data-mobile-quiz-state="active"] .kanaActionBar .btn{
      min-height:40px;
      min-width:0;
      padding:8px 10px;
      font-size:12px;
      border-radius:13px;
    }
    body.mobile-layout #screenKana[data-mobile-quiz-state="active"] .choices{
      margin-top:0;
      gap:8px;
      align-content:start;
      grid-template-columns:1fr;
    }
    body.mobile-layout #screenKana[data-mobile-quiz-state="active"] .choice{
      min-height:50px;
      padding:11px 13px;
      border-radius:15px;
      font-size:16px;
      line-height:1.22;
      text-align:left;
      overflow-wrap:anywhere;
    }
    body.mobile-layout #screenKana[data-mobile-quiz-state="active"] .feedback{
      margin-top:0;
      min-height:26px;
      padding:2px 4px 0;
      border-radius:0;
      background:transparent;
      text-align:center;
      line-height:1.35;
      font-size:13px;
    }
    body.mobile-layout #kanaAssessmentFlowBack .kanaAssessmentModalCard{
      width:100%;
      max-width:none;
      max-height:min(88svh, 760px);
      padding:10px;
      border-radius:22px 22px 16px 16px;
      gap:10px;
      overflow:auto;
    }
    body.mobile-layout #kanaAssessmentFlowBack .row:first-child{
      align-items:center !important;
      gap:8px;
    }
    body.mobile-layout #kanaAssessmentFlowTitle{
      font-size:16px;
      line-height:1.15;
    }
    body.mobile-layout #kanaAssessmentFlowSubtitle{
      font-size:12px;
      line-height:1.4;
      margin-top:2px;
    }
    body.mobile-layout #kanaAssessmentFlowCloseBtn{
      min-height:34px;
      padding:7px 10px;
      border-radius:12px;
    }
    body.mobile-layout #kanaAssessmentProgressText{
      min-height:24px;
      font-size:12px;
      padding:5px 10px;
    }
    body.mobile-layout #kanaAssessmentProgressNote{
      font-size:11px;
      line-height:1.35;
    }
    body.mobile-layout #kanaAssessmentQuestionPanel{
      display:grid;
      gap:10px;
    }
    body.mobile-layout #kanaAssessmentQuestionPanel .kanaAssessmentQuestionShell{
      gap:10px;
      padding:14px;
      border-radius:22px;
    }
    body.mobile-layout #kanaAssessmentQuestionPanel .kanaAssessmentQuestionMeta{
      gap:8px;
    }
    body.mobile-layout #kanaAssessmentQuestionPanel .kanaAssessmentScriptTag{
      min-height:28px;
      padding:6px 10px;
      font-size:11px;
    }
    body.mobile-layout #kanaAssessmentQuestionHint{
      font-size:11px;
      line-height:1.35;
    }
    body.mobile-layout #kanaAssessmentChar{
      font-size:clamp(76px, 24vw, 108px);
      line-height:1;
      text-align:center;
      padding:0;
    }
    body.mobile-layout #kanaAssessmentChoices{
      grid-template-columns:1fr;
      gap:8px;
    }
    body.mobile-layout #kanaAssessmentChoices .choice{
      min-height:50px;
      padding:11px 13px;
      border-radius:15px;
      font-size:15px;
      line-height:1.24;
      text-align:left;
      justify-content:flex-start;
    }
    body.mobile-layout #kanaAssessmentFeedback{
      margin-top:0 !important;
      min-height:26px;
      padding:2px 4px 0;
      font-size:13px;
      line-height:1.35;
      text-align:center;
    }
    body.mobile-layout #screenN5[data-mobile-quiz-state="active"] #n5ContentCard{
      display:grid;
      grid-template-rows:minmax(0,1fr);
      padding:10px 10px 8px;
      overflow:hidden;
      border-radius:18px;
    }
    body.mobile-layout #screenN5[data-mobile-quiz-state="active"] .n5MobilePanelBar,
    body.mobile-layout #screenN5[data-mobile-quiz-state="active"] .panelHeader,
    body.mobile-layout #screenN5[data-mobile-quiz-state="active"] .n5FlowRail,
    body.mobile-layout #screenN5[data-mobile-quiz-state="active"] .practiceHeader,
    body.mobile-layout #screenN5[data-mobile-quiz-state="active"] .practiceActions,
    body.mobile-layout #screenN5[data-mobile-quiz-state="active"] .practiceDrawer,
    body.mobile-layout #screenN5[data-mobile-quiz-state="active"] .n5FooterBar,
    body.mobile-layout #screenN5[data-mobile-quiz-state="active"] .divider,
    body.mobile-layout #screenN5[data-mobile-quiz-state="active"] .n5PanelFooter{
      display:none !important;
    }
    body.mobile-layout #screenN5[data-mobile-quiz-state="active"] #n5PracticePanel,
    body.mobile-layout #screenN5[data-mobile-quiz-state="active"] .n5WorkspaceShell,
    body.mobile-layout #screenN5[data-mobile-quiz-state="active"] .n5WorkspaceMain,
    body.mobile-layout #screenN5[data-mobile-quiz-state="active"] .n5WorkspaceSurface{
      height:100%;
      min-height:0;
    }
    body.mobile-layout #screenN5[data-mobile-quiz-state="active"] .n5WorkspaceSurface{
      padding:0;
      gap:0;
    }
    body.mobile-layout #screenN5[data-mobile-quiz-state="active"] #n5QuizArea{
      display:grid !important;
      grid-template-columns:1fr;
      grid-template-areas:
        "progress"
        "prompt"
        "sub"
        "choices"
        "feedback";
      align-content:start;
      gap:10px;
      height:100%;
      min-height:0;
      overflow:hidden;
      padding:2px 0 0;
    }
    body.mobile-layout #screenN5[data-mobile-quiz-state="active"] #n5QuizProgress{
      grid-area:progress;
      margin:0;
      text-align:center;
      font-size:12px;
      line-height:1.25;
      letter-spacing:.03em;
      min-height:24px;
      display:flex;
      align-items:center;
      justify-content:center;
      padding:0 10px;
      border-radius:999px;
      border:1px solid color-mix(in srgb, var(--border) 82%, transparent);
      background:color-mix(in srgb, var(--card) 96%, var(--chip) 4%);
    }
    body.mobile-layout #screenN5[data-mobile-quiz-state="active"] #n5QuizPrompt{
      grid-area:prompt;
      margin:0;
      padding:14px 16px 6px;
      border-radius:22px 22px 16px 16px;
      background:
        radial-gradient(220px 120px at 100% 0%, color-mix(in srgb, var(--chip) 14%, transparent), transparent 74%),
        color-mix(in srgb, var(--card) 96%, var(--chip) 4%);
      font-size:clamp(28px, 8vw, 34px);
      line-height:1.16;
      text-align:center;
      letter-spacing:-.03em;
      overflow-wrap:anywhere;
    }
    body.mobile-layout #screenN5[data-mobile-quiz-state="active"] #n5QuizSubPrompt{
      grid-area:sub;
      margin:0;
      font-size:12px;
      line-height:1.42;
      text-align:center;
      padding:0 10px;
      color:var(--muted);
      min-height:18px;
    }
    body.mobile-layout #screenN5[data-mobile-quiz-state="active"] #n5QuizChoices{
      grid-area:choices;
      margin-top:0;
      gap:8px;
      align-content:start;
      grid-template-columns:1fr;
    }
    body.mobile-layout #screenN5[data-mobile-quiz-state="active"] #n5QuizChoices .btn{
      width:100%;
      min-height:50px;
      padding:11px 13px;
      border-radius:15px;
      justify-content:flex-start;
      text-align:left;
      font-size:14px;
      white-space:normal;
      line-height:1.28;
      font-weight:800;
      overflow-wrap:anywhere;
      box-shadow:none;
    }
    body.mobile-layout #screenN5[data-mobile-quiz-state="active"] #n5QuizFeedback{
      grid-area:feedback;
      margin-top:0;
      min-height:26px;
      padding:2px 4px 0;
      text-align:center;
      font-size:13px;
      line-height:1.35;
    }
    body.mobile-layout #screenN5[data-mobile-quiz-state="active"] #n5PracticePanel{
      min-height:0;
    }
    body.mobile-layout #screenN5[data-mobile-quiz-state="active"] .n5WorkspaceMain{
      min-height:0;
      overflow:hidden;
    }
    body.mobile-layout #n5AssessmentFlowBack .kanaAssessmentModalCard{
      width:100%;
      max-width:none;
      max-height:min(88svh, 760px);
      padding:10px;
      border-radius:22px 22px 16px 16px;
      display:grid;
      gap:10px;
      overflow:auto;
    }
    body.mobile-layout #n5AssessmentFlowBack .row:first-child{
      align-items:center !important;
      gap:8px;
    }
    body.mobile-layout #n5AssessmentFlowTitle{
      font-size:16px;
      line-height:1.15;
    }
    body.mobile-layout #n5AssessmentFlowSubtitle{
      font-size:12px;
      line-height:1.4;
      margin-top:2px;
    }
    body.mobile-layout #n5AssessmentFlowCloseBtn{
      min-height:34px;
      padding:7px 10px;
      border-radius:12px;
    }
    body.mobile-layout #n5AssessmentFlowBack .kanaAssessmentProgressHead{
      gap:8px;
    }
    body.mobile-layout #n5AssessmentProgressText{
      min-height:24px;
      font-size:12px;
      padding:5px 10px;
    }
    body.mobile-layout #n5AssessmentProgressNote{
      font-size:11px;
      line-height:1.35;
    }
    body.mobile-layout #n5AssessmentQuestionPanel{
      display:grid;
      gap:10px;
    }
    body.mobile-layout #n5AssessmentQuestionPanel .kanaAssessmentQuestionShell{
      gap:10px;
      padding:14px;
      border-radius:22px;
    }
    body.mobile-layout #n5AssessmentQuestionPanel .kanaAssessmentQuestionMeta{
      gap:8px;
    }
    body.mobile-layout #n5AssessmentQuestionPanel .kanaAssessmentScriptTag{
      min-height:28px;
      padding:6px 10px;
      font-size:11px;
    }
    body.mobile-layout #n5AssessmentQuestionHint{
      font-size:11px;
      line-height:1.35;
    }
    body.mobile-layout #n5AssessmentQuestionPrompt{
      font-size:22px;
      line-height:1.2;
      text-align:center;
    }
    body.mobile-layout #n5AssessmentQuestionText{
      font-size:clamp(28px, 8vw, 34px);
      line-height:1.15;
      padding:0 !important;
      text-align:center;
      overflow-wrap:anywhere;
    }
    body.mobile-layout #n5AssessmentChoices{
      grid-template-columns:1fr;
      gap:8px;
    }
    body.mobile-layout #n5AssessmentChoices .choice{
      min-height:50px;
      padding:11px 13px;
      border-radius:15px;
      font-size:14px;
      line-height:1.28;
      text-align:left;
      justify-content:flex-start;
    }
    body.mobile-layout #n5AssessmentFeedback{
      margin-top:0 !important;
      min-height:26px;
      padding:2px 4px 0;
      font-size:13px;
      line-height:1.35;
      text-align:center;
    }
    body.mobile-layout .n5ExamTopbar{
      min-height:48px;
      padding:6px 8px;
    }
    body.mobile-layout .n5ExamTitle{
      font-size:13px;
      line-height:1.2;
    }
    body.mobile-layout .n5ExamMeta{
      gap:3px;
    }
    body.mobile-layout .n5ExamMeta .miniTag{
      min-height:24px;
      min-width:72px;
      font-size:10px;
      padding:4px 7px;
    }
    body.mobile-layout .n5ExamBody{
      padding:10px 10px calc(10px + env(safe-area-inset-bottom));
      overflow:hidden;
    }
    body.mobile-layout #n5ExamQuestionWrap{
      height:100%;
      display:grid;
      align-content:start;
      gap:10px;
      overflow:hidden;
    }
    body.mobile-layout .n5ExamPrompt{
      text-align:center;
      font-size:12px;
    }
    body.mobile-layout .n5ExamQuestion{
      margin-top:0;
      font-size:clamp(28px, 8vw, 34px);
      line-height:1.16;
      overflow-wrap:anywhere;
    }
    body.mobile-layout .n5ExamChoices{
      margin-top:0;
      gap:8px;
      align-content:start;
      grid-template-columns:1fr;
    }
    body.mobile-layout .n5ExamChoice{
      min-height:50px;
      padding:11px 13px;
      border-radius:15px;
      font-size:14px;
      line-height:1.28;
      overflow-wrap:anywhere;
    }
    body.mobile-layout .n5ExamFeedback{
      margin-top:0;
      min-height:26px;
      padding:2px 4px 0;
      text-align:center;
      font-size:13px;
      line-height:1.35;
    }
    @media (max-width:560px){
      body.mobile-layout #screenHome .homeMobileMoreGrid,
      body.mobile-layout #screenStudent .studentMobileMoreGrid,
      body.mobile-layout #screenSettings .settingsMobileQuickGrid,
      body.mobile-layout #screenN5 .n5MobileHubGrid,
      body.mobile-layout #screenN5 .n5MobileSubhubGrid{
        grid-template-columns:1fr;
      }
      body.mobile-layout #screenAI .aiModeGrid,
      body.mobile-layout #screenKana .kanaMobileActionGrid{
        grid-template-columns:1fr;
      }
      body.mobile-layout #screenAI .aiPanelCard.isActive{
        min-height:auto;
      }
      body.mobile-layout .topbar.appTopbar{
        grid-template-columns:minmax(0,1fr);
        grid-template-areas:"brand";
        gap:6px;
        padding:8px 10px;
      }
      body.mobile-layout .appTopbarRight{
        width:auto;
      }
      body.mobile-layout.mobile-chrome-collapsed .topbar.appTopbar{
        transform:none;
      }
      body.mobile-layout #themeBtn.appTopbarChip{
        justify-self:end;
      }
      body.mobile-layout .appTopbarBrand b{
        font-size:17px;
      }
      body.mobile-layout #bottomNav .bottomNavBtn{
        min-height:48px;
        font-size:8px;
      }
      body.mobile-layout #bottomNav .bottomNavBtn::before{
        width:22px;
        height:22px;
        font-size:8px;
      }
      body.mobile-layout[data-current-route="settings"] .topbar.appTopbar{
        grid-template-areas:
          "brand"
          "actions";
        gap:8px;
      }
      body.mobile-layout[data-current-route="settings"] .appTopbarRight{
        width:100%;
        grid-template-columns:1fr;
        grid-template-areas:
          "utility"
          "role"
          "auth";
      }
      body.mobile-layout #screenHome .homeHeroMeta,
      body.mobile-layout #screenKana .kanaJourneyMeta,
      body.mobile-layout #screenTeacher .teacherHealthGrid{
        grid-template-columns:1fr;
      }
      body.mobile-layout #screenKana .kanaActionBar{
        grid-template-columns:1fr;
      }
      body.mobile-layout #screenN5 .n5MobilePanelBar,
      body.mobile-layout #screenSettings .settingsMobileQuickGrid{
        top:88px;
      }
    }
    @media (max-width: 768px){
      body.mobile-layout{
        --space-xs:4px;
        --space-sm:8px;
        --space-md:12px;
        --space-lg:16px;
      }
      body.mobile-layout .appLayout > .appMainPane > .appMainScroll > .wrap.appLayoutWrap{
        padding:8px 10px calc(68px + env(safe-area-inset-bottom));
        gap:8px;
      }
      body.mobile-layout .topbar.appTopbar{
        position:sticky;
        top:4px;
        min-height:50px;
        padding:6px 10px;
        border-radius:12px;
        gap:6px;
        grid-template-columns:minmax(0,1fr) auto;
        grid-template-areas:"brand actions";
        align-items:center;
        box-shadow:0 4px 10px rgba(12,23,38,.05);
        backdrop-filter:blur(8px);
        transform:none !important;
      }
      body.mobile-layout.mobile-chrome-collapsed .topbar.appTopbar{
        transform:none !important;
        opacity:1;
      }
      body.mobile-layout .appTopbarLeft{
        min-width:0;
      }
      body.mobile-layout .appTopbarBrand{
        min-width:0;
        gap:6px;
        align-items:center;
      }
      body.mobile-layout .appTopbarBrand b{
        font-size:16px;
      }
      body.mobile-layout .appTopbarOptional,
      body.mobile-layout .appTopbarAvatar{
        display:none;
      }
      body.mobile-layout .appTopbarRight{
        width:auto;
        display:flex;
        align-items:center;
        justify-content:flex-end;
        gap:6px;
      }
      body.mobile-layout .appTopbar .roleSeg{
        min-height:34px;
        border-radius:12px;
      }
      body.mobile-layout .roleSegBtn{
        min-height:34px;
        font-size:11px;
        padding:6px 10px;
      }
      body.mobile-layout .appTopbarChip{
        min-height:34px;
        padding:6px 10px;
        border-radius:12px;
        font-size:12px;
      }
      body.mobile-layout #loginBtn.appTopbarChip,
      body.mobile-layout #logoutBtn.appTopbarChip{
        padding-inline:10px;
      }
      body.mobile-layout #themeBtn.appTopbarChip{
        min-height:34px;
        min-width:34px;
        width:34px;
        padding:6px;
        justify-content:center;
      }
      body.mobile-layout :is(#screenHome, #screenAI, #screenKana, #screenN5, #screenStudent, #screenTeacher, #screenSettings){
        width:100%;
      }
      body.mobile-layout :is(#screenHome, #screenAI, #screenKana, #screenN5, #screenStudent, #screenTeacher, #screenSettings) .card{
        padding:14px;
        border-radius:18px;
        gap:8px;
        box-shadow:0 8px 16px rgba(9,20,36,.06);
      }
      body.mobile-layout :is(#screenHome, #screenAI, #screenKana, #screenN5, #screenStudent, #screenTeacher, #screenSettings) :is(.card + .card, .card + .homeMobileMoreCard, .card + .studentMobileMoreCard){
        margin-top:12px;
      }
      body.mobile-layout :is(#screenHome, #screenAI, #screenKana, #screenN5, #screenStudent, #screenTeacher, #screenSettings) :is(h1, h2, h3){
        font-size:20px;
        line-height:1.15;
        font-weight:900;
        margin:0 0 8px;
      }
      body.mobile-layout :is(#screenHome, #screenAI, #screenKana, #screenN5, #screenStudent, #screenTeacher, #screenSettings) :is(p, .hint, .note, .muted, .homeSectionSub, .homePathSummary, .homePathText){
        font-size:13px;
        line-height:1.45;
      }
      body.mobile-layout :is(#screenHome, #screenAI, #screenKana, #screenN5, #screenStudent, #screenTeacher, #screenSettings) :is(.miniTag, .label, .n5HeaderEyebrow, .homeGreeting, .homeMissionEyebrow){
        font-size:11px;
        line-height:1.25;
      }
      body.mobile-layout :is(#screenHome, #screenKana, #screenN5, #screenAI, #screenStudent, #screenTeacher, #screenSettings) .btn{
        min-height:44px;
        padding:0 12px;
        border-radius:14px;
        font-size:14px;
        line-height:1.2;
        width:100%;
        max-width:100%;
        overflow-wrap:anywhere;
      }
      body.mobile-layout :is(#screenHome, #screenKana, #screenN5, #screenAI, #screenStudent, #screenTeacher, #screenSettings) .btn.primary{
        min-height:48px;
        font-weight:800;
      }
      body.mobile-layout :is(#screenHome, #screenKana, #screenN5, #screenAI, #screenStudent, #screenTeacher, #screenSettings) :is(.row, .stack, .actions, .homeQuickActionsGrid, .homeMobileMoreGrid, .kanaMobileActionGrid, .n5MobileHubGrid, .n5MobileSubhubGrid, .studentQuickGrid, .settingsMobileQuickGrid){
        gap:8px;
      }
      body.mobile-layout :is(#screenHome, #screenAI, #screenKana, #screenN5, #screenStudent, #screenTeacher, #screenSettings) :is(.row, .actions){
        flex-wrap:wrap;
      }
      body.mobile-layout :is(#screenHome, #screenAI, #screenKana, #screenN5, #screenStudent, #screenTeacher, #screenSettings) :is(.row > *, .actions > *, .stack > *, .homeQuickActionsGrid > *, .homeMobileMoreGrid > *, .studentQuickGrid > *){
        min-width:0;
      }
      body.mobile-layout #screenHome .homePremiumGrid,
      body.mobile-layout #screenAI .aiHubShell,
      body.mobile-layout #screenKana .grid,
      body.mobile-layout #screenN5 .grid,
      body.mobile-layout #screenStudent #studentStatsView,
      body.mobile-layout #screenTeacher .teacherDashboardGrid,
      body.mobile-layout #screenSettings .settingsGrid{
        gap:12px;
      }
      body.mobile-layout #screenAI .aiHubShell{
        grid-template-rows:auto auto;
        gap:10px;
      }
      body.mobile-layout #screenAI .aiHeroCard{
        padding:12px 14px;
        min-height:auto;
      }
      body.mobile-layout #screenAI .aiHeroTitle{
        font-size:18px;
      }
      body.mobile-layout #screenAI .aiHeroSub{
        font-size:12px;
        max-width:30ch;
      }
      body.mobile-layout #screenAI .aiModeGrid{
        gap:10px;
      }
      body.mobile-layout #screenAI #aiCoachCardBtn{
        min-height:122px;
        padding:14px 16px;
        border-radius:20px;
      }
      body.mobile-layout #screenAI #senseiCardBtn{
        min-height:112px;
        padding:14px 16px;
        border-radius:20px;
      }
      body.mobile-layout #screenAI .aiModeCard{
        gap:6px;
      }
      body.mobile-layout #screenAI .aiModeTitle{
        font-size:18px;
      }
      body.mobile-layout #screenAI .aiModeText{
        font-size:12px;
        line-height:1.45;
        display:-webkit-box;
        -webkit-line-clamp:2;
        -webkit-box-orient:vertical;
        overflow:hidden;
      }
      body.mobile-layout #screenAI .aiModeAction{
        min-height:44px;
        border-radius:14px;
      }
      body.mobile-layout #screenAI .aiMobileContextRow{
        display:none;
      }
      body.mobile-layout #screenHome .homeHero.homeSpanAll,
      body.mobile-layout #screenHome .homePathCard,
      body.mobile-layout #screenHome .homeQuickActionsCard,
      body.mobile-layout #screenHome .homeMissionCard{
        padding:14px;
      }
      body.mobile-layout #screenHome .homeHeroTitle,
      body.mobile-layout #screenKana .kanaJourneyTitle,
      body.mobile-layout #screenStudent .studentSectionTitle{
        font-size:20px;
      }
      body.mobile-layout #screenN5 .n5MobileHubGrid .btn,
      body.mobile-layout #screenN5 .n5MobileSubhubGrid .btn,
      body.mobile-layout #screenKana .kanaMobileActionGrid .btn,
      body.mobile-layout #screenAI .aiModeCard{
        min-height:44px;
        padding:14px;
        border-radius:16px;
      }
      body.mobile-layout #screenN5 .n5MobilePanelBar,
      body.mobile-layout #screenSettings .settingsMobileQuickGrid{
        top:66px;
        padding:8px;
        border-radius:16px;
      }
      body.mobile-layout :is(.input, input, textarea, select){
        min-height:44px;
        padding:10px 12px;
        border-radius:12px;
        font-size:14px;
        line-height:1.35;
        max-width:100%;
      }
      body.mobile-layout :is(#screenHome, #screenAI, #screenKana, #screenN5, #screenStudent, #screenTeacher, #screenSettings){
        overflow-x:hidden;
      }
      body.mobile-layout :is(#screenHome, #screenAI, #screenKana, #screenN5, #screenStudent, #screenTeacher, #screenSettings) :is(.grid, .row, .actions, .segGroup, .segrow){
        max-width:100%;
      }
      body.mobile-layout #screenHome .homeHeroShell,
      body.mobile-layout #screenHome .homeSectionHead,
      body.mobile-layout #screenHome .homePathCard,
      body.mobile-layout #screenHome .homeQuickActionsCard,
      body.mobile-layout #screenAI .aiHeroCard,
      body.mobile-layout #screenAI .aiModeCard,
      body.mobile-layout #screenN5 .n5MobileHubTop,
      body.mobile-layout #screenN5 #n5ContentCard,
      body.mobile-layout #screenStudent .studentSummaryBody,
      body.mobile-layout #screenStudent .studentOverviewHero{
        gap:8px;
      }
      body.mobile-layout #screenHome .homeHero.homeSpanAll,
      body.mobile-layout #screenAI .aiHeroCard,
      body.mobile-layout #screenKana .kanaJourneyCard,
      body.mobile-layout #screenKana .kanaPracticePanel,
      body.mobile-layout #screenN5 .n5MobileHubCard,
      body.mobile-layout #screenStudent .studentSummaryCard,
      body.mobile-layout #screenStudent .studentProfileCard,
      body.mobile-layout #screenStudent .studentHistoryCard,
      body.mobile-layout #screenSettings .card{
        border-radius:20px;
      }
      body.mobile-layout #screenHome .homeHeroSub,
      body.mobile-layout #screenAI .aiHeroSub,
      body.mobile-layout #screenN5 .hint,
      body.mobile-layout #screenStudent .hint{
        margin:0;
      }
      body.mobile-layout #bottomNav{
        padding:6px 10px calc(6px + env(safe-area-inset-bottom));
      }
      body.mobile-layout #bottomNav .bottomNavBar{
        padding:6px;
        gap:6px;
        border-radius:18px;
        box-shadow:0 8px 18px rgba(9,20,36,.1);
      }
      body.mobile-layout #bottomNav .bottomNavBtn{
        min-height:44px;
        padding:6px;
        border-radius:12px;
        font-size:12px;
        line-height:1.1;
      }
      body.mobile-layout #bottomNav .bottomNavBtn::before{
        width:22px;
        height:22px;
        font-size:8px;
      }
      body.mobile-layout [data-current-route]:not([data-current-route="settings"]) .appTopbar .roleSeg,
      body.mobile-layout [data-current-route]:not([data-current-route="settings"]) #loginBtn.appTopbarChip,
      body.mobile-layout [data-current-route]:not([data-current-route="settings"]) #logoutBtn.appTopbarChip{
        display:none;
      }
      body.mobile-layout .modalBack,
      body.mobile-layout .teacherDrawerBack,
      body.mobile-layout .onboardingBack{
        align-items:flex-end;
        padding:8px 8px calc(8px + env(safe-area-inset-bottom));
      }
      body.mobile-layout .modalCard,
      body.mobile-layout .n5BrowseModalCard,
      body.mobile-layout .kanaAssessmentModalCard,
      body.mobile-layout .teacherDrawer{
        width:100%;
        max-width:none;
        max-height:85svh;
        padding:14px 16px;
        border-radius:22px 22px 16px 16px;
        box-shadow:0 12px 26px rgba(9,20,36,.12);
        overflow:auto;
        overscroll-behavior:contain;
      }
      body.mobile-layout .n5BrowseModalBody,
      body.mobile-layout .kanaChartBody,
      body.mobile-layout .teacherDrawer{
        min-height:0;
      }
      body.mobile-layout #screenHome .homeQuickActionsGrid .btn,
      body.mobile-layout #screenHome .homeMobileMoreGrid .btn,
      body.mobile-layout #screenN5 .practiceActions .btn,
      body.mobile-layout #screenN5 .n5ExamEntryGrid .btn,
      body.mobile-layout #screenStudent .studentCardActions .btn,
      body.mobile-layout #screenSettings .settingsMobileQuickGrid .btn{
        min-height:44px;
      }
      body.mobile-layout #screenKana .kanaQuestionShell,
      body.mobile-layout #screenN5[data-mobile-quiz-state="active"] .practiceDrawer,
      body.mobile-layout #screenN5[data-mobile-quiz-state="active"] .kanaAssessmentQuestionShell{
        padding:14px;
        border-radius:20px;
      }
      body.mobile-layout #screenAI .senseiComposer{
        padding:8px;
        border-radius:18px;
      }
      body.mobile-layout :is(.card, .btn, .bottomNavBtn, .appTopbarChip, .roleSegBtn){
        transition:none;
      }
    }
    /* Friendly AI chat-only shell
       Keep the existing route and logic, but present AI as one clean chat surface. */
    #screenAI[data-ai-chat-only="true"] .aiHubShell{
      max-width:780px;
      margin:0 auto;
      gap:0;
    }
    #screenAI[data-ai-chat-only="true"] .aiHeroCard,
    #screenAI[data-ai-chat-only="true"] .aiModeGrid,
    #screenAI[data-ai-chat-only="true"] .aiMobileContextRow,
    #screenAI[data-ai-chat-only="true"] #aiCoachPanel{
      display:none !important;
    }
    #screenAI[data-ai-chat-only="true"] .aiDetailGrid{
      grid-template-columns:minmax(0,1fr) !important;
      gap:0;
    }
    #screenAI[data-ai-chat-only="true"] #aiSenseiPanel{
      display:grid !important;
      gap:14px;
      min-height:min(720px, calc(100svh - 170px));
      padding:20px;
      border-radius:24px;
      box-shadow:0 18px 36px rgba(12,23,38,.08);
    }
    #screenAI[data-ai-chat-only="true"] .aiPanelHeader{
      align-items:center;
      padding-bottom:8px;
      border-bottom:1px solid color-mix(in srgb, var(--border) 72%, transparent);
    }
    #screenAI[data-ai-chat-only="true"] .aiPanelHeader .hint{
      max-width:44ch;
    }
    #screenAI[data-ai-chat-only="true"] .aiMobileBackBtn{
      display:none !important;
    }
    #screenAI[data-ai-chat-only="true"] .senseiMessages{
      flex:1 1 auto;
      min-height:420px;
      max-height:calc(100svh - 320px);
      padding-right:2px;
      padding-bottom:4px;
    }
    #screenAI[data-ai-chat-only="true"] .senseiPromptBlock{
      display:grid;
      gap:10px;
      padding:0;
    }
    #screenAI[data-ai-chat-only="true"] .senseiQuickPrompts{
      gap:10px;
    }
    #screenAI[data-ai-chat-only="true"] .senseiComposer{
      padding:10px;
      border:1px solid color-mix(in srgb, var(--border) 78%, transparent);
      border-radius:18px;
      background:color-mix(in srgb, var(--card) 96%, var(--chip) 4%);
    }
    #screenAI[data-ai-chat-only="true"] .senseiFooterNote{
      margin-top:-2px;
    }
    @media (min-width:769px) and (max-width:1100px){
      .appLayout > .appMainPane > .appMainScroll > .wrap.appLayoutWrap > .topbar.appTopbar{
        min-height:auto;
        padding:10px 14px;
        gap:8px 12px;
        align-items:center;
      }
      .appTopbarLeft{
        min-width:0;
      }
      .appTopbarBrand .pill{
        display:none;
      }
      .appTopbarBrand b{
        font-size:18px;
      }
      .appTopbarRight{
        gap:6px;
        flex-wrap:wrap;
        justify-content:flex-end;
      }
      .appTopbar .roleSeg{
        min-height:40px;
      }
      .appTopbarRight .btn{
        min-height:38px;
        padding:8px 12px;
      }
      .appTopbarAvatar{
        display:none;
      }
    }
    @media (max-width:768px){
      body.mobile-layout .appLayout > .appMainPane > .appMainScroll > .wrap.appLayoutWrap{
        padding:8px 8px calc(68px + env(safe-area-inset-bottom));
        gap:6px;
      }
      body.mobile-layout .topbar.appTopbar{
        top:max(10px, env(safe-area-inset-top));
        min-height:auto;
        padding:6px 8px 7px;
        padding-top:calc(6px + min(env(safe-area-inset-top), 6px));
        gap:6px 8px;
        border-radius:12px;
      }
      body.mobile-layout .appTopbarBrand b{
        font-size:15px;
      }
      body.mobile-layout .appTopbarRight{
        gap:4px;
      }
      body.mobile-layout .appMainScroll{
        scroll-padding-top:96px;
      }
      body.mobile-layout .appLayout > .appMainPane > .appMainScroll > .wrap.appLayoutWrap > :is(#screenHome, #screenAI, #screenKana, #screenN5, #screenStudent, #screenTeacher, #screenSettings){
        margin-top:8px;
      }
      body.mobile-layout #screenAI[data-ai-chat-only="true"]{
        margin-top:12px !important;
      }
      body.mobile-layout #screenAI[data-ai-chat-only="true"] .aiHubShell{
        max-width:none;
      }
      body.mobile-layout #screenAI .aiHubShell{
        gap:12px;
      }
      body.mobile-layout #screenAI .aiHeroCard{
        margin-top:0;
      }
      body.mobile-layout #screenAI[data-ai-chat-only="true"] .aiDetailGrid,
      body.mobile-layout #screenAI[data-ai-chat-only="true"][data-mobile-detail="closed"] .aiDetailGrid,
      body.mobile-layout #screenAI[data-ai-chat-only="true"][data-mobile-detail="open"] .aiDetailGrid{
        display:grid !important;
      }
      body.mobile-layout #screenAI[data-ai-chat-only="true"] #aiSenseiPanel,
      body.mobile-layout #screenAI[data-ai-chat-only="true"] .aiPanelCard.isActive{
        min-height:calc(100svh - 144px);
        padding:14px;
        border-radius:20px;
        box-shadow:0 10px 20px rgba(9,20,36,.07);
      }
      body.mobile-layout #screenAI[data-ai-chat-only="true"] .aiPanelHeader{
        gap:6px;
        padding-bottom:6px;
      }
      body.mobile-layout #screenAI[data-ai-chat-only="true"] .senseiMessages{
        min-height:calc(100svh - 330px);
        max-height:none;
      }
      body.mobile-layout #screenAI[data-ai-chat-only="true"] .senseiQuickPrompts{
        display:grid;
        grid-template-columns:repeat(3,minmax(0,1fr));
        gap:8px;
      }
      body.mobile-layout #screenAI[data-ai-chat-only="true"] .senseiQuickPrompts .btn{
        width:100%;
        min-height:36px;
      }
      body.mobile-layout #screenAI[data-ai-chat-only="true"] .senseiComposer{
        position:sticky;
        bottom:0;
        z-index:2;
        padding:8px;
      }
    }
    @media (prefers-reduced-motion: reduce){
      .flashCardFront,
      .flashRevealPanel,
      .flashCardFront.popIn,
      .flashRevealPanel.revealIn,
      .tierCircle,
      .tierPyramid.tierUpgrade,
      .tierRow.current .tierCircle.active,
      .appBootDot,
      .appMainScroll,
      .appSidebar,
      .appLayoutBody::after,
      .appBootOverlay{
        transition:none !important;
        animation:none !important;
      }
    }