:root{
    --ink:#1b2a4a; --ink-soft:#3c4d70;
    --paper:#f6f1e7; --paper-dim:#ece3cf; --panel:#fffdf8;
    --line:#d9cdae; --vermillion:#bf4332; --gold:#a9822f; --green:#3f6b4f;
    --radius:14px;
    --glow: rgba(169,130,47,0.08);
    --shadow: rgba(27,42,74,0.06);
    --correct-bg:#eef4ee; --wrong-bg:#f8eceb; --danger-bg:#fbeceb;
    --voice-active-bg:#fff8f7;
    --badge-female-bg:#fce8f0; --badge-female-text:#9c2b5e;
    --badge-male-bg:#e8eef8; --badge-male-text:#2b4a9c;
    --badge-neutral-bg:#f0ece0;
  }
  [data-theme="dark"]{
    --ink:#e7ecf7; --ink-soft:#8e9ab8;
    --paper:#0c1120; --paper-dim:#111830; --panel:#151d34;
    --line:#293252; --vermillion:#ff6b81; --gold:#ffb454; --green:#3ddc97;
    --glow: rgba(99,102,241,0.14);
    --shadow: rgba(0,0,0,0.45);
    --correct-bg:rgba(61,220,151,0.14); --wrong-bg:rgba(255,107,129,0.14); --danger-bg:rgba(255,107,129,0.16);
    --voice-active-bg:rgba(255,107,129,0.10);
    --badge-female-bg:rgba(255,107,129,0.16); --badge-female-text:#ff9fb2;
    --badge-male-bg:rgba(99,140,255,0.18); --badge-male-text:#a9c3ff;
    --badge-neutral-bg:rgba(255,180,84,0.14);
  }
  *{box-sizing:border-box;}
  html,body{margin:0;padding:0;}
  body{
    background:radial-gradient(ellipse at top left, var(--glow), transparent 55%), var(--paper);
    color:var(--ink); font-family:'Zen Maru Gothic','Noto Sans JP',sans-serif;
    line-height:1.7; padding:32px 18px 64px;
    min-height:100vh;
  }
  .app-shell{max-width:1180px;margin:0 auto;display:flex;align-items:flex-start;gap:28px;}
  .wrap{max-width:880px;flex:1 1 auto;min-width:0;}
  /* Logged out (login screen, no side nav): center the column in the page. */
  body:not(:has(.side-nav.show)) .wrap{margin:0 auto;}
  header.hero{border-bottom:2px solid var(--ink);padding-bottom:22px;margin-bottom:34px;}
  .eyebrow{font-family:'JetBrains Mono',monospace;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--gold);margin-bottom:10px;}
  h1{font-family:'Shippori Mincho B1',serif;font-weight:800;font-size:clamp(34px,6vw,52px);margin:0 0 6px;letter-spacing:.02em;}
  h1 .sub{display:block;font-family:'JetBrains Mono',monospace;font-weight:500;font-size:14px;letter-spacing:.08em;color:var(--ink-soft);margin-top:8px;text-transform:uppercase;}
  .lede{max-width:60ch;color:var(--ink-soft);font-size:15.5px;margin-top:14px;}
  section{margin-bottom:46px;}
  h2{font-family:'Shippori Mincho B1',serif;font-size:22px;font-weight:700;display:flex;align-items:baseline;gap:10px;margin-bottom:18px;}
  h2 .num{font-family:'JetBrains Mono',monospace;font-size:13px;color:var(--gold);border:1px solid var(--gold);border-radius:999px;padding:2px 9px;}

  .grid4{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;}
  @media(max-width:620px){.grid4{grid-template-columns:1fr;}}
  .typecard{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:16px 16px 14px;}
  .typecard .name{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:6px;}
  .typecard .jp{font-family:'Shippori Mincho B1',serif;font-weight:700;font-size:18px;}
  .typecard .romaji{font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--ink-soft);}
  .typecard p{font-size:13.5px;color:var(--ink-soft);margin:8px 0 0;}
  .typecard svg{display:block;margin-top:6px;}

  .quizpanel{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:26px 26px 24px;}
  .quiz-top{display:flex;justify-content:space-between;align-items:center;font-family:'JetBrains Mono',monospace;font-size:12px;color:var(--ink-soft);margin-bottom:18px;flex-wrap:wrap;gap:8px;}

  /* ---------------- auth gate ---------------- */
  .auth-gate{display:flex;min-height:80vh;align-items:center;justify-content:center;padding:20px;}
  .auth-card{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:36px 32px;max-width:400px;width:100%;box-shadow:0 4px 24px var(--shadow);}
  .auth-title{font-family:'Shippori Mincho B1',serif;font-weight:800;font-size:28px;margin:4px 0 6px;}
  .auth-sub{color:var(--ink-soft);font-size:13.5px;margin-bottom:22px;}
  .auth-form{display:flex;flex-direction:column;gap:14px;}
  .auth-form label{font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--ink-soft);display:flex;flex-direction:column;gap:6px;letter-spacing:.02em;}
  .auth-form input{font-family:'Zen Maru Gothic','Noto Sans JP',sans-serif;font-size:15px;padding:10px 12px;border:1.5px solid var(--line);border-radius:8px;background:var(--paper);color:var(--ink);}
  .auth-form input:focus{outline:none;border-color:var(--gold);}
  .auth-btn{margin-top:6px;background:var(--ink);color:var(--paper);border:none;border-radius:999px;padding:12px 18px;font-family:'Zen Maru Gothic','Noto Sans JP',sans-serif;font-weight:700;font-size:14.5px;cursor:pointer;transition:opacity .12s ease;}
  .auth-btn:hover{opacity:.88;}
  .auth-switch{font-size:12.5px;color:var(--ink-soft);margin-top:16px;text-align:center;}
  .auth-switch a{color:var(--vermillion);font-weight:700;}
  .auth-error{background:var(--danger-bg);border:1px solid var(--vermillion);color:var(--vermillion);border-radius:8px;padding:9px 12px;font-size:13px;margin-bottom:16px;}
  .auth-forgot{margin-top:10px;}
  .setup-hint{font-size:12px;line-height:1.6;color:var(--ink-soft);border:1px dashed var(--line);border-radius:8px;padding:8px 10px;margin:0;width:100%;}
  .setup-hint code{font-family:'JetBrains Mono',monospace;font-size:11px;}
  .auth-success{border:1px solid var(--green);border-radius:8px;padding:9px 12px;font-size:13px;line-height:1.6;margin-top:14px;color:var(--ink);}
  .auth-note{font-size:13px;line-height:1.6;color:var(--ink-soft);margin:0 0 16px;}
  .google-auth[hidden]{display:none;}
  .google-btn-slot{display:flex;justify-content:center;min-height:44px;}
  .auth-divider{display:flex;align-items:center;gap:10px;margin:16px 0;font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--ink-soft);letter-spacing:.02em;}
  .auth-divider::before,.auth-divider::after{content:"";flex:1;height:1px;background:var(--line);}
  .verify-banner{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:0 0 16px;padding:10px 12px 10px 14px;border:1px solid var(--gold);border-radius:8px;background:var(--panel);color:var(--ink);font-size:13px;line-height:1.5;}
  .verify-banner[hidden]{display:none;}
  .verify-banner[data-tone="ok"]{border-color:var(--green);}
  .verify-banner[data-tone="warn"]{border-color:var(--vermillion);background:var(--danger-bg);}
  .verify-text{flex:1;min-width:200px;overflow-wrap:anywhere;}
  .verify-resend{background:var(--ink);color:var(--paper);border:none;border-radius:999px;padding:6px 14px;font-family:'Zen Maru Gothic','Noto Sans JP',sans-serif;font-weight:700;font-size:12.5px;cursor:pointer;}
  .verify-resend[hidden]{display:none;}
  .verify-resend:disabled{opacity:.5;cursor:default;}
  .verify-close{background:none;border:none;color:var(--ink-soft);font-size:18px;line-height:1;cursor:pointer;padding:2px 4px;}

  /* ---------------- stats dashboard ---------------- */
  /* ---------------- overall accuracy hero (top of stats page) ---------------- */
  .overall{position:relative;display:flex;align-items:center;gap:28px;padding:24px 28px;margin-bottom:20px;overflow:hidden;
    border:1px solid var(--line);border-radius:var(--radius);
    background:radial-gradient(120% 140% at 0% 0%, color-mix(in srgb, var(--gold) 14%, var(--panel)) 0%, var(--panel) 55%),var(--panel);}
  .overall::before{content:'';position:absolute;left:0;right:0;top:0;height:3px;background:linear-gradient(90deg,var(--gold),var(--vermillion));}
  .ov-wave{position:absolute;right:18px;top:18px;width:34%;height:44px;opacity:.09;pointer-events:none;}
  .ov-wave polyline{fill:none;stroke:var(--gold);stroke-width:3;stroke-linejoin:round;stroke-linecap:round;}
  .ov-wave circle{fill:var(--gold);}
  .ov-ring{position:relative;flex:0 0 auto;width:156px;height:156px;}
  .ov-ring svg{width:100%;height:100%;transform:rotate(-90deg);overflow:visible;}
  .ov-ring-bg{fill:none;stroke:var(--paper-dim);stroke-width:12;}
  .ov-ring-fg{fill:none;stroke:url(#ovGrad);stroke-width:12;stroke-linecap:round;transition:stroke-dashoffset 1.4s cubic-bezier(.22,1,.36,1);
    filter:drop-shadow(0 0 6px color-mix(in srgb, var(--gold) 45%, transparent));}
  .overall.is-empty .ov-ring-fg{stroke:transparent;filter:none;}
  .ov-pct{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;line-height:1;}
  .ov-num{font-family:'Shippori Mincho B1',serif;font-weight:800;font-size:44px;color:var(--ink);font-variant-numeric:tabular-nums;}
  .ov-num small{font-size:19px;margin-left:2px;}
  .ov-num-cap{font-family:'JetBrains Mono',monospace;font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft);margin-top:6px;}
  .ov-body{position:relative;flex:1 1 auto;min-width:0;}
  .ov-label{font-family:'Shippori Mincho B1',serif;font-weight:800;font-size:21px;color:var(--ink);}
  .ov-label .sub{font-family:'JetBrains Mono',monospace;font-weight:500;font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-soft);margin-left:10px;}
  .ov-tierrow{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:10px;}
  .ov-tier{font-size:13.5px;font-weight:700;color:var(--ink);padding:4px 13px;border-radius:999px;background:color-mix(in srgb, var(--gold) 20%, transparent);}
  .ov-delta{font-size:12px;font-weight:800;color:var(--green);background:var(--correct-bg);border-radius:999px;padding:4px 11px;animation:patPop .55s cubic-bezier(.34,1.56,.64,1) 1.2s both;}
  .ov-ladder{position:relative;margin:30px 4px 8px;height:8px;border-radius:999px;background:var(--paper-dim);}
  .ov-ladder-fill{position:absolute;left:0;top:0;bottom:0;border-radius:999px;background:linear-gradient(90deg,var(--gold),var(--vermillion));transition:width 1.4s cubic-bezier(.22,1,.36,1);}
  .ov-stop{position:absolute;top:0;bottom:0;width:2px;background:var(--panel);transform:translateX(-1px);}
  .ov-stop span{position:absolute;bottom:13px;left:50%;transform:translateX(-50%);font-size:15px;line-height:1;opacity:.45;filter:grayscale(1);transition:opacity .3s,filter .3s;}
  .ov-stop.reached span{opacity:1;filter:none;}
  .ov-marker{position:absolute;top:50%;width:16px;height:16px;border-radius:50%;background:var(--panel);border:3px solid var(--vermillion);
    transform:translate(-50%,-50%);box-shadow:0 2px 6px var(--shadow);transition:left 1.4s cubic-bezier(.22,1,.36,1);}
  .overall.is-empty .ov-marker{display:none;}
  .ov-next{font-family:'JetBrains Mono',monospace;font-size:11.5px;color:var(--ink-soft);}
  .ov-count{font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--ink-soft);opacity:.85;margin-top:3px;}
  .ov-count b{color:var(--ink);font-weight:700;}
  @media(max-width:620px){
    .overall{flex-direction:column;text-align:center;padding:22px 18px;gap:16px;}
    .ov-tierrow{justify-content:center;}
    .ov-label .sub{display:block;margin:4px 0 0;}
    .ov-wave{display:none;}
  }

  /* ---------------- streaks + totals strip (below the pattern cards) ---------------- */
  .stat-strip{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:20px;}
  @media(max-width:620px){.stat-strip{grid-template-columns:1fr;}}
  .ss-card{position:relative;display:flex;align-items:center;gap:14px;padding:14px 16px;overflow:hidden;
    background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);transition:transform .2s, box-shadow .2s;}
  .ss-card:hover{transform:translateY(-2px);box-shadow:0 8px 20px var(--shadow);}
  .ss-icon{flex:0 0 auto;width:44px;height:44px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:22px;background:var(--paper-dim);}
  .ss-streak .ss-icon{background:color-mix(in srgb, var(--vermillion) 14%, transparent);}
  .ss-best .ss-icon{background:color-mix(in srgb, var(--gold) 18%, transparent);}
  .ss-total .ss-icon{background:color-mix(in srgb, var(--pat-heiban) 16%, transparent);}
  .ss-body{min-width:0;}
  .ss-value{font-family:'Shippori Mincho B1',serif;font-weight:800;font-size:28px;line-height:1.05;color:var(--ink);font-variant-numeric:tabular-nums;}
  .ss-label{font-family:'JetBrains Mono',monospace;font-size:10px;color:var(--ink-soft);margin-top:3px;letter-spacing:.02em;}
  .ss-sub{font-size:11.5px;font-weight:700;color:var(--ink-soft);margin-top:5px;min-height:15px;}
  .ss-sub.hot{color:var(--vermillion);}
  .ss-bar{height:4px;border-radius:999px;background:var(--paper-dim);margin-top:6px;overflow:hidden;width:120px;max-width:100%;}
  .ss-bar i{display:block;height:100%;border-radius:999px;background:var(--vermillion);transition:width 1.2s cubic-bezier(.22,1,.36,1);}
  .ss-streak.is-record{border-color:color-mix(in srgb, var(--vermillion) 50%, var(--line));}
  .ss-streak.is-record .ss-icon{animation:ssFlame 1.6s ease-in-out infinite;}
  @keyframes ssFlame{0%,100%{transform:scale(1) rotate(-3deg);}50%{transform:scale(1.08) rotate(3deg);}}
  @media (prefers-reduced-motion: reduce){
    .ov-ring-fg,.ov-ladder-fill,.ov-marker,.ss-bar i{transition:none;}
    .ov-delta,.ss-streak.is-record .ss-icon{animation:none;}
    .ss-card:hover{transform:none;}
  }
  .weak-words{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:16px 18px;}
  .weak-words h3{font-family:'Shippori Mincho B1',serif;font-size:15px;font-weight:700;margin:0 0 10px;}
  .weak-words ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px;}
  .weak-words li{display:flex;justify-content:space-between;align-items:center;font-size:13.5px;padding:6px 4px;border-bottom:1px solid var(--paper-dim);}
  .weak-words li:last-child{border-bottom:none;}

  .leaderboard-section{display:flex;flex-direction:column;gap:12px;}
  .leaderboard-table{width:100%;border-collapse:collapse;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;}
  .leaderboard-table th{text-align:left;font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.03em;color:var(--ink-soft);text-transform:uppercase;padding:12px 14px;border-bottom:1.5px solid var(--line);}
  .leaderboard-table td{padding:12px 14px;border-bottom:1px solid var(--paper-dim);font-size:14px;}
  .leaderboard-table tbody tr:last-child td{border-bottom:none;}
  .leaderboard-table tbody tr:hover td{background:var(--paper-dim);}
  .leaderboard-table tr.you td{background:var(--glow);}
  .leaderboard-table tr.you td:first-child{border-left:3px solid var(--vermillion);padding-left:11px;}
  .lb-rank{font-family:'JetBrains Mono',monospace;font-weight:700;color:var(--ink-soft);width:48px;}
  .lb-rank.medal{font-size:17px;}
  .lb-user{font-weight:700;}
  .lb-user .you-tag{font-family:'JetBrains Mono',monospace;font-size:10px;font-weight:700;color:var(--vermillion);margin-left:6px;letter-spacing:.03em;}
  .lb-words{font-family:'JetBrains Mono',monospace;}
  .lb-accuracy{font-family:'JetBrains Mono',monospace;color:var(--ink-soft);}
  .leaderboard-empty{padding:20px;text-align:center;color:var(--ink-soft);font-size:13.5px;}

  .lookup-section{display:flex;flex-direction:column;gap:10px;}
  .lookup-input{font-family:'Zen Maru Gothic','Noto Sans JP',sans-serif;font-size:16px;padding:12px 14px;border:1.5px solid var(--line);border-radius:10px;background:var(--panel);color:var(--ink);width:100%;box-sizing:border-box;}
  .lookup-input:focus{outline:none;border-color:var(--gold);}
  .lookup-count{font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--ink-soft);letter-spacing:.02em;min-height:14px;}
  .lookup-body{display:grid;grid-template-columns:minmax(0,260px) 1fr;gap:16px;align-items:start;}
  @media(max-width:720px){.lookup-body{grid-template-columns:1fr;}}
  .lookup-results{list-style:none;margin:0;padding:0;max-height:520px;overflow-y:auto;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);}
  .lookup-result{padding:10px 14px;border-bottom:1px solid var(--paper-dim);cursor:pointer;transition:background .12s ease;}
  .lookup-result:last-child{border-bottom:none;}
  .lookup-result:hover{background:var(--paper-dim);}
  .lookup-result.active{background:var(--glow);border-left:3px solid var(--vermillion);padding-left:11px;}
  .lookup-result-row{display:flex;align-items:center;justify-content:space-between;gap:10px;}
  .lookup-result-text{min-width:0;flex:1;}
  .lookup-result .jp{font-family:'Shippori Mincho B1',serif;font-weight:700;font-size:15px;}
  .lookup-result .reading{font-size:11.5px;color:var(--ink-soft);margin-left:6px;}
  .lookup-result .meaning{display:block;font-size:12px;color:var(--ink-soft);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
  .lookup-listen-btn{
    flex:none;display:flex;align-items:center;justify-content:center;
    width:28px;height:28px;border-radius:50%;
    background:none;border:1.5px solid var(--line);color:var(--ink-soft);
    cursor:pointer;transition:border-color .12s ease,color .12s ease,background .12s ease;
  }
  .lookup-listen-btn svg{width:13px;height:13px;}
  .lookup-listen-btn:hover{border-color:var(--gold);color:var(--ink);background:var(--badge-neutral-bg);}
  .lookup-listen-btn:active{transform:scale(.93);}
  .lookup-listen-btn:disabled{opacity:.5;cursor:default;}
  .lookup-empty-msg{padding:16px 14px;font-size:13px;color:var(--ink-soft);}
  .lookup-detail{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:22px 24px;min-height:200px;}
  .lookup-detail-empty{color:var(--ink-soft);font-size:13.5px;padding:20px 0;text-align:center;}
  .lookup-detail-head{display:flex;align-items:baseline;flex-wrap:wrap;gap:10px;margin-bottom:4px;}
  .lookup-detail-jp{font-family:'Shippori Mincho B1',serif;font-weight:700;font-size:28px;}
  .lookup-detail-reading{font-family:'Zen Maru Gothic','Noto Sans JP',sans-serif;font-size:16px;color:var(--ink-soft);}
  .lookup-listen-detail-btn{
    display:inline-flex;align-items:center;justify-content:center;
    width:34px;height:34px;border-radius:50%;flex:none;vertical-align:middle;
    background:none;border:1.5px solid var(--line);color:var(--ink-soft);
    cursor:pointer;transition:border-color .12s ease,color .12s ease,background .12s ease;
  }
  .lookup-listen-detail-btn svg{width:16px;height:16px;}
  .lookup-listen-detail-btn:hover{border-color:var(--gold);color:var(--ink);background:var(--badge-neutral-bg);}
  .lookup-listen-detail-btn:active{transform:scale(.93);}
  .lookup-listen-detail-btn:disabled{opacity:.5;cursor:default;}
  .lookup-detail-badges{display:flex;gap:6px;flex-wrap:wrap;margin:8px 0 14px;}
  .lookup-badge{font-family:'JetBrains Mono',monospace;font-size:10.5px;letter-spacing:.03em;padding:3px 8px;border-radius:20px;background:var(--badge-neutral-bg);color:var(--ink-soft);border:1px solid var(--line);}
  .lookup-detail-meaning{font-size:15px;margin-bottom:18px;line-height:1.5;}
  .lookup-detail-graph{background:var(--paper);border:1px solid var(--line);border-radius:10px;padding:10px 6px;overflow-x:auto;}
  .lookup-detail-type{font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--ink-soft);margin-top:8px;text-align:center;}
  .lookup-detail-alt{font-size:12px;color:var(--ink-soft);margin-top:4px;text-align:center;}
  .lookup-detail-alt-std{opacity:.75;}

  .lookup-detail-sentence{margin-top:16px;padding-top:16px;border-top:1px solid var(--line);}
  .lookup-sentence-heading{font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.04em;color:var(--ink-soft);margin-bottom:10px;}
  .lookup-sentence-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:14px;}
  .lookup-sentence-item{display:flex;align-items:flex-start;gap:10px;}
  .lookup-sentence-item + .lookup-sentence-item{padding-top:14px;border-top:1px dashed var(--line);}
  .lookup-sentence-listen{margin-top:3px;}
  .lookup-sentence-text{flex:1;min-width:0;}
  .lookup-detail-sentence .jp{font-family:'Shippori Mincho B1',serif;font-size:17px;line-height:1.7;}
  .lookup-detail-sentence .jp .target{color:var(--vermillion);border-bottom:2px solid var(--vermillion);padding-bottom:1px;}
  .lookup-detail-sentence .reading{font-size:12px;color:var(--ink-soft);font-family:'JetBrains Mono',monospace;margin-top:4px;}
  .lookup-detail-sentence .english{font-size:12.5px;color:var(--ink-soft);margin-top:4px;}
  .weak-word{font-family:'Shippori Mincho B1',serif;}
  .weak-acc{font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--vermillion);font-weight:700;}
  .weak-empty{color:var(--ink-soft);font-size:12.5px;border-bottom:none!important;}

  .jlpt-toggle,.particle-toggle{display:flex;gap:8px;margin-bottom:16px;flex-wrap:wrap;}
  .jlpt-btn,.particle-btn{background:var(--paper);border:1.5px solid var(--line);border-radius:999px;padding:6px 16px;font-family:'JetBrains Mono',monospace;font-weight:700;font-size:12px;color:var(--ink-soft);cursor:pointer;display:flex;align-items:baseline;gap:5px;transition:border-color .12s ease, background .12s ease, color .12s ease;}
  .jlpt-btn span,.particle-btn span{font-weight:500;text-transform:uppercase;font-size:10px;opacity:.75;}
  .jlpt-btn:hover,.particle-btn:hover{border-color:var(--gold);}
  .jlpt-btn.active,.particle-btn.active{background:var(--ink);border-color:var(--ink);color:var(--paper);}
  .jlpt-btn.active span,.particle-btn.active span{opacity:.9;}
  .score{color:var(--ink);font-weight:700;}
  .status{padding:40px 10px;text-align:center;color:var(--ink-soft);font-size:14px;}

  .sentence-box{text-align:center;padding:22px 10px 8px;}
  .sentence{font-family:'Shippori Mincho B1',serif;font-size:clamp(22px,4.4vw,30px);line-height:1.9;}
  .sentence .target{color:var(--vermillion);border-bottom:2px solid var(--vermillion);padding-bottom:1px;}
  .reading{font-size:13px;color:var(--ink-soft);font-family:'JetBrains Mono',monospace;margin-top:6px;}
  .meaning{font-size:12.5px;color:var(--ink-soft);margin-top:4px;}

  .playrow{display:flex;flex-direction:column;align-items:center;gap:6px;margin:16px 0 8px;}
  .playbtn{display:flex;align-items:center;gap:8px;background:var(--ink);color:var(--paper);border:none;border-radius:999px;padding:11px 22px;font-family:'Zen Maru Gothic',sans-serif;font-weight:700;font-size:14.5px;cursor:pointer;transition:transform .12s ease, background .12s ease;}
  .playbtn:hover{background:var(--ink-soft);}
  .playbtn:active{transform:scale(.97);}
  .playbtn svg{width:16px;height:16px;}
  .ttsnote{font-size:11.5px;color:var(--ink-soft);opacity:.8;font-family:'JetBrains Mono',monospace;}

  .target-word-label{text-align:center;font-size:13px;color:var(--ink-soft);margin-top:14px;}
  .target-word-label b{color:var(--ink);font-family:'Shippori Mincho B1',serif;font-size:17px;}

  .choices{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:18px;}
  @media(max-width:620px){.choices{grid-template-columns:1fr 1fr;}}
  .choice{background:var(--paper);border:1.5px solid var(--line);border-radius:10px;padding:12px 8px 10px;text-align:center;cursor:pointer;transition:border-color .12s ease, transform .1s ease;}
  .choice:hover{border-color:var(--ink);}
  .choice:active{transform:scale(.97);}
  .choice .jp{font-family:'Shippori Mincho B1',serif;font-weight:700;font-size:15px;}
  .choice .romaji{display:block;font-family:'JetBrains Mono',monospace;font-size:10px;color:var(--ink-soft);margin-top:2px;}
  .choice.correct{border-color:var(--green);background:var(--correct-bg);}
  .choice.wrong{border-color:var(--vermillion);background:var(--wrong-bg);}
  .choice[disabled]{cursor:default;}

  .feedback{margin-top:20px;border-top:1px dashed var(--line);padding-top:18px;display:none;}
  .feedback.show{display:block;}
  .verdict{font-family:'JetBrains Mono',monospace;font-size:13px;font-weight:700;letter-spacing:.04em;margin-bottom:10px;}
  .verdict.ok{color:var(--green);}
  .verdict.no{color:var(--vermillion);}
  .verdict.close{color:var(--gold);}
  /* pronunciation check (practice page) */
  .pron-box{margin-bottom:14px;}
  .pron-morae{display:flex;flex-wrap:wrap;gap:6px;margin:6px 0 4px;}
  .pron-mora{font-size:18px;padding:4px 9px;border-radius:8px;border:1.5px solid var(--green);color:var(--green);cursor:default;}
  .pron-mora.unclear{border-color:var(--gold);color:var(--gold);}
  .pron-mora.wrong{border-color:var(--vermillion);color:var(--vermillion);background:color-mix(in srgb, var(--vermillion) 10%, transparent);}
  .pron-msg.mispronounced,.pron-msg.different_word{color:var(--vermillion);}
  .compare{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:14px 0;}
  .compare.three{grid-template-columns:1fr 1fr 1fr;}
  @media(max-width:560px){.compare,.compare.three{grid-template-columns:1fr;}}
  .list-kind-toggle{margin-bottom:10px;}
  .list-kind-note{font-size:12.5px;color:var(--ink-soft);margin-bottom:14px;}
  .modal-box .list-kind-toggle{margin:4px 0 12px;}
  .stats-skill-toggle{margin-bottom:18px;}
  .answer-audio-btns{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;}
  .memory-note{text-align:center;font-size:12.5px;color:var(--ink-soft);margin:14px 0 8px;}
  .alt-graphs{display:flex;flex-direction:column;align-items:center;gap:10px;}
  .compare .label{font-size:11px;color:var(--ink-soft);font-family:'JetBrains Mono',monospace;text-align:center;margin-bottom:4px;}
  .note{font-size:14px;color:var(--ink-soft);}
  .nextrow{display:flex;justify-content:flex-end;margin-top:18px;}
  .nextbtn{background:none;border:1.5px solid var(--ink);color:var(--ink);border-radius:999px;padding:9px 20px;font-weight:700;font-size:13.5px;font-family:'Zen Maru Gothic',sans-serif;cursor:pointer;}
  .nextbtn:hover{background:var(--ink);color:var(--paper);}

  .loaderr{background:var(--danger-bg);border:1px solid var(--vermillion);border-radius:10px;padding:16px 18px;font-size:13.5px;color:var(--ink);}
  .loaderr code{background:var(--paper-dim);padding:2px 6px;border-radius:4px;font-family:'JetBrains Mono',monospace;}
  .nakadaka-challenge{margin-top:20px;border-top:1px dashed var(--line);padding-top:18px;}
  .nakadaka-prompt{font-family:'Shippori Mincho B1',serif;font-size:16px;font-weight:700;margin-bottom:4px;color:var(--ink);}
  .nakadaka-sub{font-size:13px;color:var(--ink-soft);margin-bottom:14px;}
  .nakadaka-choices{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;}
  @media(max-width:520px){.nakadaka-choices{grid-template-columns:1fr;}}
  .nchoice{background:var(--paper);border:1.5px solid var(--line);border-radius:10px;padding:12px 8px 10px;text-align:center;cursor:pointer;transition:border-color .12s ease,transform .1s ease;}
  .nchoice:hover{border-color:var(--ink);}
  .nchoice:active{transform:scale(.97);}
  .nchoice .nlabel{font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--ink-soft);margin-top:4px;}
  .nchoice.correct{border-color:var(--green);background:var(--correct-bg);}
  .nchoice.wrong{border-color:var(--vermillion);background:var(--wrong-bg);}
  .nchoice[disabled]{cursor:default;}
  .nakadaka-verdict{font-family:'JetBrains Mono',monospace;font-size:13px;font-weight:700;letter-spacing:.04em;margin-top:14px;}
  .nakadaka-verdict.ok{color:var(--green);}
  .nakadaka-verdict.no{color:var(--vermillion);}

  /* ---------------- save-word button (quiz + lookup) ---------------- */
  .save-word-btn{
    display:inline-flex;align-items:center;gap:5px;
    background:none;border:1.5px solid var(--line);color:var(--ink-soft);
    border-radius:999px;padding:4px 12px;margin-left:6px;
    font-family:'Zen Maru Gothic',sans-serif;font-weight:700;font-size:12px;
    cursor:pointer;vertical-align:middle;
    transition:border-color .12s ease, color .12s ease, background .12s ease;
  }
  .save-word-btn:hover{border-color:var(--gold);color:var(--ink);}
  .save-word-btn.saved{border-color:var(--gold);background:var(--badge-neutral-bg);color:var(--gold);}

  /* ---------------- save-word modal ---------------- */
  .modal-overlay{
    display:none;position:fixed;inset:0;z-index:100;
    background:rgba(0,0,0,0.45);
    align-items:center;justify-content:center;padding:20px;
  }
  .modal-overlay.show{display:flex;}
  .modal-box{
    position:relative;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);
    padding:26px 24px 22px;max-width:420px;width:100%;box-shadow:0 8px 32px var(--shadow);
    max-height:80vh;overflow-y:auto;
  }
  .modal-close{
    position:absolute;top:12px;right:14px;background:none;border:none;
    font-size:20px;line-height:1;color:var(--ink-soft);cursor:pointer;padding:4px;
  }
  .modal-close:hover{color:var(--ink);}
  .modal-title{font-family:'Shippori Mincho B1',serif;font-weight:800;font-size:19px;margin-bottom:4px;}
  .modal-word{font-family:'Shippori Mincho B1',serif;font-size:22px;font-weight:700;color:var(--vermillion);margin-bottom:16px;}
  .save-list-options{display:flex;flex-direction:column;gap:6px;margin-bottom:14px;max-height:220px;overflow-y:auto;}
  .save-list-option{
    display:flex;align-items:center;gap:10px;padding:8px 10px;border:1.5px solid var(--line);
    border-radius:8px;cursor:pointer;font-size:14px;transition:border-color .12s ease,background .12s ease;
  }
  .save-list-option:hover{border-color:var(--gold);}
  .save-list-option.checked{border-color:var(--gold);background:var(--badge-neutral-bg);}
  .save-list-option input{accent-color:var(--gold);width:16px;height:16px;flex:0 0 auto;}
  .save-list-option .save-list-option-name{flex:1;}
  .save-list-option .save-list-option-count{font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--ink-soft);}
  .save-list-empty{font-size:13px;color:var(--ink-soft);padding:8px 2px;}
  .save-list-new{display:flex;gap:8px;}
  .save-list-new input{
    flex:1;font-family:'Zen Maru Gothic',sans-serif;font-size:13.5px;padding:9px 11px;
    border:1.5px solid var(--line);border-radius:8px;background:var(--paper);color:var(--ink);min-width:0;
  }
  .save-list-new input:focus{outline:none;border-color:var(--gold);}
  .save-list-new button{
    background:var(--ink);color:var(--paper);border:none;border-radius:8px;padding:9px 14px;
    font-family:'Zen Maru Gothic',sans-serif;font-weight:700;font-size:13px;cursor:pointer;white-space:nowrap;
  }
  .save-list-new button:hover{opacity:.88;}
  .save-list-status{font-size:12.5px;color:var(--ink-soft);margin-top:10px;min-height:14px;}
  .save-list-status.error{color:var(--vermillion);}

  /* ---------------- my word lists page ---------------- */
  .list-create-row{display:flex;gap:8px;margin-bottom:18px;}
  .list-create-row input{
    flex:1;font-family:'Zen Maru Gothic',sans-serif;font-size:14.5px;padding:10px 13px;
    border:1.5px solid var(--line);border-radius:10px;background:var(--panel);color:var(--ink);min-width:0;
  }
  .list-create-row input:focus{outline:none;border-color:var(--gold);}
  .list-create-row button{
    background:var(--ink);color:var(--paper);border:none;border-radius:10px;padding:10px 16px;
    font-family:'Zen Maru Gothic',sans-serif;font-weight:700;font-size:13.5px;cursor:pointer;white-space:nowrap;
  }
  .list-create-row button:hover{opacity:.88;}
  .lists-status{color:var(--ink-soft);font-size:13.5px;padding:8px 2px;}
  .lists-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:14px;}
  .list-card{
    background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);
    padding:16px 16px 14px;cursor:pointer;transition:border-color .12s ease,transform .1s ease;
  }
  .list-card:hover{border-color:var(--gold);}
  .list-card:active{transform:scale(.98);}
  .list-card-name{font-family:'Shippori Mincho B1',serif;font-weight:700;font-size:16px;margin-bottom:6px;word-break:break-word;}
  .list-card-count{font-family:'JetBrains Mono',monospace;font-size:11.5px;color:var(--ink-soft);}
  .list-card-empty{
    grid-column:1/-1;text-align:center;color:var(--ink-soft);font-size:13.5px;
    padding:30px 10px;border:1.5px dashed var(--line);border-radius:var(--radius);
  }

  .list-detail-header{margin-bottom:20px;}
  .list-detail-back{margin-bottom:14px;padding:7px 14px;font-size:12.5px;}
  .list-detail-titlerow{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:4px;}
  .list-detail-titlerow h2{font-family:'Shippori Mincho B1',serif;font-size:24px;font-weight:800;}
  .list-icon-btn{
    background:none;border:1.5px solid var(--line);border-radius:8px;width:32px;height:32px;
    font-size:14px;cursor:pointer;color:var(--ink-soft);transition:border-color .12s ease,color .12s ease;
  }
  .list-icon-btn:hover{border-color:var(--gold);color:var(--ink);}
  .list-icon-btn.danger:hover{border-color:var(--vermillion);color:var(--vermillion);}
  .list-detail-count{font-family:'JetBrains Mono',monospace;font-size:12px;color:var(--ink-soft);margin-bottom:14px;}
  .practice-list-btn{
    background:var(--vermillion);color:#fff;border:none;border-radius:999px;padding:11px 22px;
    font-family:'Zen Maru Gothic',sans-serif;font-weight:700;font-size:14px;cursor:pointer;
    transition:opacity .12s ease;
  }
  .practice-list-btn:hover{opacity:.88;}
  .practice-list-btn:disabled{opacity:.45;cursor:default;}

  .list-word-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:14px;}
  .list-word-card{
    background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);
    padding:14px 14px 12px;position:relative;
  }
  .list-word-card .lw-head{display:flex;justify-content:space-between;align-items:baseline;gap:8px;margin-bottom:4px;}
  .list-word-card .lw-jp{font-family:'Shippori Mincho B1',serif;font-weight:700;font-size:17px;}
  .list-word-card .lw-reading{font-size:12px;color:var(--ink-soft);font-family:'JetBrains Mono',monospace;}
  .list-word-card .lw-meaning{font-size:12.5px;color:var(--ink-soft);margin-bottom:8px;min-height:16px;}
  .list-word-card .lw-graph{background:var(--paper);border:1px solid var(--line);border-radius:8px;padding:6px 4px;overflow-x:auto;}
  .list-word-remove{
    position:absolute;top:8px;right:8px;background:none;border:1.5px solid var(--line);border-radius:50%;
    width:24px;height:24px;line-height:1;font-size:13px;color:var(--ink-soft);cursor:pointer;
    transition:border-color .12s ease,color .12s ease;
  }
  .list-word-remove:hover{border-color:var(--vermillion);color:var(--vermillion);}
  .list-word-empty{
    grid-column:1/-1;text-align:center;color:var(--ink-soft);font-size:13.5px;
    padding:30px 10px;border:1.5px dashed var(--line);border-radius:var(--radius);
  }

  .lq-summary{text-align:center;padding:10px 0 4px;}
  .lq-summary-title{font-family:'Shippori Mincho B1',serif;font-size:22px;font-weight:800;margin-bottom:6px;}
  .lq-summary-score{font-family:'JetBrains Mono',monospace;font-size:15px;font-weight:700;margin-bottom:18px;}
  .lq-missed-label{font-size:12.5px;color:var(--ink-soft);margin-bottom:8px;}
  .lq-missed-list{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-bottom:20px;}
  .lq-missed-chip{
    display:inline-flex;align-items:baseline;gap:6px;background:var(--wrong-bg);border:1.5px solid var(--vermillion);
    border-radius:999px;padding:5px 12px;font-family:'Shippori Mincho B1',serif;font-weight:700;font-size:15px;
  }
  .lq-missed-chip small{font-family:'JetBrains Mono',monospace;font-size:11px;font-weight:400;color:var(--ink-soft);}
  .lq-missed-chip em{font-style:normal;font-size:11px;font-weight:400;color:var(--ink-soft);}
  .lq-summary-actions{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-top:6px;}
  .lq-skipped-note{font-size:11.5px;color:var(--ink-soft);margin-top:14px;}

  footer{margin-top:50px;border-top:1px solid var(--line);padding-top:16px;font-size:12px;color:var(--ink-soft);font-family:'JetBrains Mono',monospace;}

  /* ---- SPA page routing ---- */
  .page{display:none;}
  .page.active{display:block;}

  /* ---- patterns page nav button ---- */
  .patterns-link{
    display:inline-flex;align-items:center;gap:8px;
    margin-top:16px;
    background:none;border:1.5px solid var(--ink);color:var(--ink);
    border-radius:999px;padding:9px 18px;
    font-family:'Zen Maru Gothic',sans-serif;font-weight:700;font-size:13.5px;
    cursor:pointer;text-decoration:none;
    transition:background .12s, color .12s;
  }
  .patterns-link:hover{background:var(--ink);color:var(--paper);}
  .back-link{
    display:inline-flex;align-items:center;gap:8px;
    margin-bottom:28px;
    background:none;border:1.5px solid var(--ink);color:var(--ink);
    border-radius:999px;padding:8px 16px;
    font-family:'Zen Maru Gothic',sans-serif;font-weight:700;font-size:13px;
    cursor:pointer;text-decoration:none;
    transition:background .12s, color .12s;
  }
  .back-link:hover{background:var(--ink);color:var(--paper);}

  /* ---- persistent left-side nav: Home · Practice · Reference · Progress ---- */
  .side-nav{
    display:none;flex-direction:column;gap:4px;
    flex:0 0 200px;position:sticky;top:24px;
    background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);
    padding:16px 12px;
  }
  .side-nav.show{display:flex;}
  .side-nav-brand{
    font-family:'Shippori Mincho B1',serif;font-weight:800;font-size:19px;
    color:var(--ink);padding:2px 10px 14px;letter-spacing:.02em;line-height:1.2;
  }
  .side-nav-brand span{display:block;font-family:'JetBrains Mono',monospace;font-weight:500;font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft);margin-top:5px;}
  .side-nav-link{
    display:flex;align-items:center;gap:11px;padding:10px 11px;border-radius:10px;text-decoration:none;
    font-family:'Zen Maru Gothic','Noto Sans JP',sans-serif;font-weight:700;font-size:14px;line-height:1.25;
    color:var(--ink-soft);transition:background .12s ease,color .12s ease;
  }
  .side-nav-link .nav-ico{width:19px;height:19px;flex:0 0 auto;}
  .side-nav-link .nav-sub{display:block;font-family:'JetBrains Mono',monospace;font-weight:500;font-size:9.5px;letter-spacing:.08em;text-transform:uppercase;opacity:.75;margin-top:1px;}
  .side-nav-link:hover{background:var(--paper-dim);color:var(--ink);}
  .side-nav-link.active{background:var(--glow);color:var(--vermillion);}
  .side-nav-link:focus-visible{outline:2px solid var(--vermillion);outline-offset:1px;}
  @media(max-width:860px){
    body{padding-top:76px;}
    .app-shell{flex-direction:column;gap:0;}
    .side-nav{
      position:static;width:100%;flex:0 0 auto;flex-direction:row;gap:4px;padding:5px;
      margin-bottom:22px;top:auto;border-radius:999px;
    }
    .side-nav-brand{display:none;}
    .side-nav-link{flex:1 1 0;justify-content:center;gap:7px;padding:8px 6px;border-radius:999px;font-size:13px;text-align:center;}
    .side-nav-link .nav-sub{display:none;}
  }
  @media(max-width:480px){
    .side-nav-link{flex-direction:column;gap:2px;font-size:11px;padding:7px 2px;border-radius:14px;}
    .side-nav{border-radius:18px;}
    .side-nav-link .nav-ico{width:18px;height:18px;}
  }

  /* ---- voice picker ---- */
  .voice-section{margin-bottom:38px;}
  .voice-scroll{
    display:flex;gap:10px;overflow-x:auto;padding-bottom:10px;
    scrollbar-width:thin;scrollbar-color:var(--line) transparent;
  }
  .voice-scroll::-webkit-scrollbar{height:4px;}
  .voice-scroll::-webkit-scrollbar-track{background:transparent;}
  .voice-scroll::-webkit-scrollbar-thumb{background:var(--line);border-radius:99px;}
  .vcard{
    flex:0 0 auto;min-width:110px;
    background:var(--panel);border:1.5px solid var(--line);border-radius:12px;
    padding:12px 10px 10px;text-align:center;cursor:pointer;
    transition:border-color .12s, background .12s, transform .1s;
    position:relative;
  }
  .vcard:hover{border-color:var(--ink-soft);}
  .vcard:active{transform:scale(.97);}
  .vcard.active{border-color:var(--vermillion);background:var(--voice-active-bg);}
  .vcard .vname{font-family:'Shippori Mincho B1',serif;font-weight:700;font-size:13.5px;line-height:1.3;}
  .vcard .vstyle{font-family:'JetBrains Mono',monospace;font-size:10px;color:var(--ink-soft);margin-top:3px;}
  .vcard .vbadges{display:flex;justify-content:center;gap:4px;margin-top:7px;flex-wrap:wrap;}
  .badge{
    font-family:'JetBrains Mono',monospace;font-size:9px;font-weight:700;
    border-radius:99px;padding:2px 6px;letter-spacing:.04em;
  }
  .badge.female{background:var(--badge-female-bg);color:var(--badge-female-text);}
  .badge.male{background:var(--badge-male-bg);color:var(--badge-male-text);}
  .badge.neutral{background:var(--badge-neutral-bg);color:var(--gold);}
  .badge.id{background:var(--paper-dim);color:var(--ink-soft);}
  .badge.active-badge{background:var(--vermillion);color:#fff;}
  .voice-status{font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--ink-soft);margin-bottom:10px;}

  /* ---- top-right controls: language · theme · profile ---- */
  .top-controls{position:fixed;top:16px;right:16px;z-index:60;display:flex;align-items:center;gap:8px;}
  body.ob-focus .profile{display:none;}
  .theme-toggle,.profile-btn{
    width:40px;height:40px;border-radius:50%;padding:0;
    background:var(--panel);border:1.5px solid var(--line);color:var(--ink);
    display:flex;align-items:center;justify-content:center;cursor:pointer;
    transition:border-color .12s ease, transform .1s ease;
    box-shadow:0 2px 10px var(--shadow);
  }
  .theme-toggle:hover,.profile-btn:hover{border-color:var(--gold);}
  .theme-toggle:active,.profile-btn:active{transform:scale(.92);}
  .theme-toggle svg{width:18px;height:18px;}
  .theme-toggle .icon-moon{display:none;}
  [data-theme="dark"] .theme-toggle .icon-sun{display:none;}
  [data-theme="dark"] .theme-toggle .icon-moon{display:block;}
  .lang-toggle{
    height:40px;padding:0 14px;border-radius:20px;
    background:var(--panel);border:1.5px solid var(--line);color:var(--ink);
    display:flex;align-items:center;justify-content:center;cursor:pointer;
    font-family:'JetBrains Mono',monospace;font-size:12px;font-weight:700;letter-spacing:.03em;
    transition:border-color .12s ease, transform .1s ease;
    box-shadow:0 2px 10px var(--shadow);
  }
  .lang-toggle:hover{border-color:var(--gold);}
  .lang-toggle:active{transform:scale(.94);}
  .top-controls button:focus-visible,.top-controls a:focus-visible{outline:2px solid var(--vermillion);outline-offset:2px;}
  @media(max-width:480px){.lang-toggle{padding:0 10px;font-size:11px;}}

  /* profile menu (js/components/profileMenu.js) */
  .profile{position:relative;display:none;}
  body:has(.side-nav.show) .profile{display:block;}   /* only once logged in */
  .profile-btn{padding:3px;}
  .profile-btn[aria-expanded="true"]{border-color:var(--vermillion);}
  .profile-avatar{
    width:100%;height:100%;border-radius:50%;display:flex;align-items:center;justify-content:center;
    font-family:'Shippori Mincho B1',serif;font-weight:800;font-size:15px;color:var(--vermillion);
    background:var(--glow);
  }
  .profile-avatar.lg{width:42px;height:42px;flex:0 0 42px;font-size:19px;border:1px solid var(--line);}
  .profile-menu{
    position:absolute;right:0;top:calc(100% + 8px);width:272px;max-width:calc(100vw - 32px);
    background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);
    box-shadow:0 14px 40px var(--shadow);padding:8px;animation:pmIn .14s ease-out;
  }
  .profile-menu[hidden]{display:none;}
  @keyframes pmIn{from{opacity:0;transform:translateY(-4px);}to{opacity:1;transform:none;}}
  .pm-head{display:flex;align-items:center;gap:12px;padding:10px 10px 12px;border-bottom:1px solid var(--line);margin-bottom:6px;}
  .pm-id{min-width:0;}
  .pm-name{font-weight:700;font-size:15px;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
  .pm-meta{display:flex;flex-direction:column;font-size:11.5px;color:var(--ink-soft);line-height:1.45;margin-top:2px;}
  .pm-group{display:flex;flex-direction:column;padding:2px 0;}
  .pm-group + .pm-group{border-top:1px solid var(--line);margin-top:4px;padding-top:6px;}
  .pm-item{
    display:block;width:100%;text-align:left;padding:8px 10px;border-radius:9px;border:none;background:none;cursor:pointer;
    font-family:'Zen Maru Gothic','Noto Sans JP',sans-serif;font-weight:700;font-size:13.5px;color:var(--ink);text-decoration:none;line-height:1.35;
  }
  .pm-item span{display:block;font-family:'JetBrains Mono',monospace;font-weight:500;font-size:10px;letter-spacing:.04em;color:var(--ink-soft);margin-top:1px;}
  .pm-item:hover,.pm-item:focus-visible{background:var(--paper-dim);outline:none;}
  .pm-logout{color:var(--vermillion);}
  .pm-logout:hover,.pm-logout:focus-visible{background:var(--danger-bg);}
  .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;}

  /* ---------------- pitch practice page ---------------- */
  .record-btn.recording{
    background:var(--vermillion);
    animation:recPulse 1.1s ease-in-out infinite;
  }
  .record-btn[disabled]{opacity:.55;cursor:default;}
  @keyframes recPulse{0%,100%{opacity:1;}50%{opacity:.55;}}

  .compare-single{margin-top:16px;}
  .compare-single .label{font-size:11px;color:var(--ink-soft);font-family:'JetBrains Mono',monospace;text-align:center;margin-bottom:4px;}

  /* ---------------- onboarding diagnostic (js/onboarding/ui.js) ---------------- */
  /* Reuses the app's tokens and .quizpanel/.playbtn/.choice/.nextbtn; only
     layout specific to the diagnostic lives here. */
  body.ob-focus .side-nav{display:none !important;}
  body.ob-focus .wrap{max-width:720px;margin:0 auto;}
  .ob-root{max-width:760px;}
  .ob-hero{margin-bottom:24px;}
  .ob-title{font-size:clamp(28px,5vw,40px);}
  .ob-date{font-family:'JetBrains Mono',monospace;font-size:12px;color:var(--ink-soft);}
  .ob-fade{animation:obFade .28s ease both;}
  @keyframes obFade{from{opacity:0;transform:translateY(6px);}to{opacity:1;transform:none;}}
  .ob-row{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-top:14px;}
  .ob-points{margin:0 0 14px;padding-left:20px;color:var(--ink-soft);font-size:14.5px;}
  .ob-points li{margin-bottom:6px;}
  .ob-audio-status{font-family:'JetBrains Mono',monospace;font-size:12px;color:var(--ink-soft);margin:10px 0;}
  .ob-audio-status.ok{color:var(--green);}
  .ob-audio-missing{margin:12px 0;}
  .ob-intro-actions{margin-top:20px;}
  .ob-cta{font-size:16px;padding:13px 30px;}
  .playbtn[disabled]{opacity:.45;cursor:default;}
  .ob-link-btn{background:none;border:none;color:var(--ink-soft);font-family:'Zen Maru Gothic',sans-serif;font-weight:700;font-size:13px;cursor:pointer;text-decoration:underline;text-underline-offset:3px;padding:6px 8px;}
  .ob-link-btn:hover{color:var(--ink);}
  .nextbtn[disabled]{opacity:.45;cursor:default;}
  .ob-primary{background:var(--ink);color:var(--paper);}
  .ob-primary:hover{background:var(--ink-soft);}

  /* top bar + progress */
  .ob-topbar{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:10px;}
  .ob-chips{display:flex;gap:6px;flex-wrap:wrap;}
  .ob-chip{display:inline-flex;align-items:center;gap:6px;border:1.5px solid var(--line);border-radius:999px;padding:3px 11px 3px 4px;font-size:12px;font-weight:700;color:var(--ink-soft);background:var(--paper);}
  .ob-chip b{display:inline-flex;width:20px;height:20px;border-radius:50%;align-items:center;justify-content:center;background:var(--paper-dim);font-family:'JetBrains Mono',monospace;font-size:11px;}
  .ob-chip.current{border-color:var(--ink);color:var(--ink);}
  .ob-chip.current b{background:var(--ink);color:var(--paper);}
  .ob-chip.done{opacity:.6;}
  .ob-chip.done b{background:var(--green);color:var(--paper);}
  .ob-progress{height:6px;border-radius:999px;background:var(--paper-dim);overflow:hidden;}
  .ob-progress-fill{height:100%;background:linear-gradient(90deg,var(--gold),var(--vermillion));border-radius:999px;transition:width .35s ease;}
  .ob-qcount{font-family:'JetBrains Mono',monospace;font-size:11.5px;color:var(--ink-soft);text-align:right;margin:6px 0 14px;}

  /* section intro */
  .ob-section-intro{text-align:left;}
  .ob-section-num{font-family:'JetBrains Mono',monospace;font-size:12px;color:var(--gold);letter-spacing:.1em;}
  .ob-section-title{font-family:'Shippori Mincho B1',serif;font-size:22px;margin:4px 0 8px;display:block;}
  .ob-legend{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;margin-top:14px;}
  .ob-legend-item{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--ink-soft);background:var(--paper);border:1px solid var(--line);border-radius:10px;padding:4px 8px;}
  .ob-legend-item svg{margin:0 !important;flex:0 0 auto;}
  @media(max-width:560px){.ob-legend{grid-template-columns:1fr;}}

  /* question */
  .ob-question{text-align:center;}
  .ob-prompt{font-family:'Shippori Mincho B1',serif;font-weight:700;font-size:18px;margin:4px 0 2px;}
  .ob-hint{font-size:12.5px;color:var(--ink-soft);}
  .ob-word{font-family:'Shippori Mincho B1',serif;font-size:clamp(26px,5vw,34px);font-weight:700;margin:14px 0 2px;letter-spacing:.04em;}
  .ob-word-big{font-size:clamp(34px,7vw,46px);}
  .ob-pseudo{color:var(--ink-soft);}
  .ob-particle{color:var(--ink-soft);margin-left:2px;}
  .ob-reading{margin-top:0;}
  .ob-clips{display:flex;justify-content:center;gap:10px;margin-top:10px;}
  .ob-clip{width:38px;height:38px;border-radius:50%;border:1.5px solid var(--line);display:inline-flex;align-items:center;justify-content:center;font-family:'JetBrains Mono',monospace;font-weight:700;color:var(--ink-soft);transition:all .15s ease;}
  .ob-clip.on{background:var(--vermillion);border-color:var(--vermillion);color:var(--paper);transform:scale(1.08);}
  .ob-playrow{margin:14px 0 6px;}
  .ob-play{font-size:16px;padding:14px 28px;}
  .ob-play svg{width:20px;height:20px;}
  .ob-play.busy{opacity:.75;}
  .ob-play-err{font-size:12px;color:var(--vermillion);min-height:0;}
  .ob-choices{display:grid;gap:10px;margin-top:16px;}
  .ob-choices.two{grid-template-columns:1fr 1fr;max-width:420px;margin-left:auto;margin-right:auto;}
  .ob-choices.three{grid-template-columns:repeat(3,1fr);}
  .ob-choices.graphs{grid-template-columns:repeat(auto-fit,minmax(150px,1fr));}
  .ob-choices.patterns{grid-template-columns:repeat(4,1fr);}
  .ob-choices.list{grid-template-columns:1fr;max-width:520px;margin-left:auto;margin-right:auto;}
  @media(max-width:620px){
    .ob-choices.patterns{grid-template-columns:1fr 1fr;}
    .ob-choices.three{grid-template-columns:1fr;}
  }
  .ob-choice{font-family:inherit;color:var(--ink);font-size:14px;width:100%;}
  .ob-choice .jp{font-size:17px;}
  .ob-choice[disabled]{cursor:default;}
  .ob-choice:not(.correct):not(.wrong)[disabled]{opacity:.55;}
  .ob-choice.dim{opacity:.5;}
  .ob-choices.two .ob-choice{padding:16px 8px;}
  .ob-graph-choice svg,.ob-pattern-choice svg{max-width:100%;height:auto;}
  .ob-pat-label{display:block;font-weight:700;font-size:12.5px;line-height:1.45;margin-top:4px;}
  .ob-meaning{text-align:left;padding:11px 14px;}
  .ob-dontknow{color:var(--ink-soft);border-style:dashed;}
  .ob-feedback{text-align:left;}
  .ob-feedback-graph{margin:10px 0;}
  .ob-feedback-graph .label{font-size:11px;color:var(--ink-soft);font-family:'JetBrains Mono',monospace;text-align:center;margin-bottom:4px;}
  .ob-meaning-line{font-size:13.5px;color:var(--ink-soft);margin:8px 0;}

  /* results */
  .ob-results-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;margin-bottom:16px;}
  @media(max-width:560px){.ob-results-grid{grid-template-columns:1fr;}}
  .ob-score-card{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:18px 20px;}
  .ob-vocab-card{border-color:var(--gold);}
  .ob-score-title{font-family:'Shippori Mincho B1',serif;font-weight:700;font-size:16px;}
  .ob-score-sub{font-size:12px;color:var(--ink-soft);}
  .ob-score-value{font-family:'JetBrains Mono',monospace;font-size:34px;font-weight:700;margin-top:6px;}
  .ob-score-value span{font-size:14px;color:var(--ink-soft);font-weight:500;}
  .ob-score-value .ob-na{font-size:16px;}
  .ob-level{color:var(--vermillion);}
  .ob-bar{height:6px;border-radius:999px;background:var(--paper-dim);overflow:hidden;margin-top:6px;}
  .ob-bar-fill{height:100%;background:var(--ink);border-radius:999px;}
  .ob-conf{font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--ink-soft);margin-top:6px;}
  .ob-interp{margin-bottom:16px;}
  .ob-interp-text{font-size:15.5px;margin:0;}
  .ob-estimate-note{font-size:11.5px;color:var(--ink-soft);margin:8px 0 0;}
  .ob-recommend .eyebrow{margin-bottom:2px;}
  .ob-track{margin:2px 0 6px;display:block;}
  .ob-settings{font-family:'JetBrains Mono',monospace;font-size:12px;color:var(--ink-soft);}
  .ob-results-actions{margin-top:16px;}

  /* ear training */
  .ob-ear-stats{display:flex;gap:16px;align-items:center;flex-wrap:wrap;font-family:'JetBrains Mono',monospace;font-size:12.5px;color:var(--ink-soft);margin-bottom:12px;}
  .ob-ear-stats .ob-link-btn{margin-left:auto;}
  .ob-err-detail{font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--ink-soft);margin:4px 0;word-break:break-word;}
  .ob-tap{color:var(--gold);font-weight:700;font-size:13px;}

  /* ---------------- daily training (#daily) ---------------- */
  .dl-note{margin-bottom:14px;font-size:14px;color:var(--ink-soft);}
  .dl-stats{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:16px;}
  @media(max-width:560px){.dl-stats{grid-template-columns:1fr;}}
  .dl-level{margin-bottom:16px;}
  .dl-ladder{display:flex;align-items:center;flex-wrap:wrap;gap:4px;margin:14px 0 6px;}
  .dl-step{font-family:'JetBrains Mono',monospace;font-size:11.5px;font-weight:700;border:1.5px solid var(--line);border-radius:999px;padding:4px 10px;background:var(--paper);color:var(--ink-soft);}
  button.dl-step{cursor:pointer;}
  button.dl-step:hover{border-color:var(--gold);}
  .dl-step.done{background:var(--correct-bg);border-color:var(--green);color:var(--green);}
  .dl-step.current{background:var(--ink);border-color:var(--ink);color:var(--paper);}
  .dl-step-sep{width:10px;height:1.5px;background:var(--line);}
  .dl-picker-hint{font-size:12px;color:var(--ink-soft);margin:4px 0 0;}
  .dl-progress{margin-top:14px;}
  .dl-progress-label{font-size:12.5px;color:var(--ink-soft);margin-bottom:4px;}
  .dl-progress .ob-bar{position:relative;overflow:visible;}
  .dl-bar-mark{position:absolute;top:-3px;width:2px;height:12px;background:var(--gold);}
  .dl-progress-status{font-family:'JetBrains Mono',monospace;font-size:11.5px;color:var(--ink-soft);margin-top:6px;}
  .ob-bar-fill.dl-done{background:var(--green);}
  .dl-parts{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px;}
  .dl-part{font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--ink-soft);border:1px solid var(--line);border-radius:999px;padding:2px 8px;}
  .dl-role{border-color:var(--gold);color:var(--gold);}
  .dl-banner{border-radius:var(--radius);padding:14px 18px;margin-bottom:14px;font-weight:700;font-size:16px;}
  .dl-banner.up{background:var(--correct-bg);border:1px solid var(--green);color:var(--green);}
  .dl-banner.down{background:var(--paper-dim);border:1px solid var(--line);color:var(--ink-soft);}

  /* ---------------- practice mode cards (Home + Practice hub, js/pages/home.js) ---------------- */
  .mode-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;}
  @media(max-width:620px){.mode-grid{grid-template-columns:1fr;}}
  .mode-card{position:relative;display:grid;grid-template-columns:auto 1fr;column-gap:14px;row-gap:4px;align-items:center;
    background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:18px 40px 16px 18px;
    color:var(--ink);text-decoration:none;transition:border-color .15s, transform .15s, box-shadow .15s;}
  .mode-card:hover{border-color:var(--vermillion);transform:translateY(-2px);box-shadow:0 6px 20px var(--shadow);}
  .mode-card:focus-visible{outline:2px solid var(--vermillion);outline-offset:2px;}
  .mode-icon{grid-row:span 2;width:46px;height:46px;border-radius:12px;display:flex;align-items:center;justify-content:center;
    font-family:'Shippori Mincho B1',serif;font-weight:800;font-size:22px;color:var(--vermillion);
    background:var(--glow);border:1px solid var(--line);}
  .mode-name{font-family:'Shippori Mincho B1',serif;font-weight:700;font-size:18px;line-height:1.3;}
  .mode-name .sub{display:block;font-family:'JetBrains Mono',monospace;font-weight:500;font-size:11px;letter-spacing:.08em;color:var(--ink-soft);text-transform:uppercase;margin-top:2px;}
  .mode-desc{grid-column:2;font-size:13.5px;color:var(--ink-soft);line-height:1.6;}
  .mode-tags{grid-column:2;display:flex;flex-wrap:wrap;gap:6px;margin-top:6px;}
  .mode-tag{font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.04em;color:var(--ink-soft);border:1px solid var(--line);border-radius:999px;padding:1px 8px;}
  .mode-tag.is-accent{color:var(--vermillion);border-color:color-mix(in srgb, var(--vermillion) 45%, var(--line));}
  .mode-go{position:absolute;right:16px;top:50%;transform:translateY(-50%);font-size:16px;color:var(--ink-soft);opacity:.5;transition:transform .15s, opacity .15s, color .15s;}
  .mode-card:hover .mode-go{opacity:1;color:var(--vermillion);transform:translate(3px,-50%);}
  .mode-card.is-featured{grid-column:1 / -1;padding:22px 48px 20px 22px;
    background:radial-gradient(120% 160% at 0% 0%, color-mix(in srgb, var(--vermillion) 10%, var(--panel)) 0%, var(--panel) 60%),var(--panel);
    border-color:color-mix(in srgb, var(--vermillion) 35%, var(--line));}
  .mode-card.is-featured .mode-icon{width:56px;height:56px;font-size:27px;background:var(--vermillion);color:var(--panel);border-color:transparent;}
  .mode-card.is-featured .mode-name{font-size:21px;}
  @media (prefers-reduced-motion: reduce){.mode-card,.mode-go{transition:none;}.mode-card:hover{transform:none;}}

  /* ---------------- in-page tabs (Reference: lookup/patterns/lists, Progress: stats/calendar/leaderboard) ---------------- */
  .page-tabs{display:flex;flex-wrap:wrap;width:fit-content;max-width:100%;gap:4px;margin:16px 0 0;padding:4px;border:1px solid var(--line);border-radius:999px;background:var(--panel);}
  .page-tab{padding:5px 14px;border-radius:999px;font-size:13px;color:var(--ink-soft);text-decoration:none;white-space:nowrap;}
  .page-tab:hover{color:var(--ink);background:var(--paper-dim);}
  .page-tab:focus-visible{outline:2px solid var(--vermillion);outline-offset:1px;}
  .page-tab[aria-current="page"]{background:var(--ink);color:var(--paper);}
  @media(max-width:480px){.page-tabs{border-radius:16px;}.page-tab{padding:5px 10px;font-size:12px;}}

  /* ---------------- placement test link (Progress page, right of the stats/leaderboard tabs) ---------------- */
  .placement-chip{margin:12px 0 0;}

  /* ---------------- accuracy by pattern ---------------- */
  :root{ --pat-heiban:#3a5a9c; }
  [data-theme="dark"]{ --pat-heiban:#8fa8ff; }
  .pat-heiban{--pat:var(--pat-heiban);}
  .pat-atamadaka{--pat:var(--vermillion);}
  .pat-nakadaka{--pat:var(--gold);}
  .pat-odaka{--pat:var(--green);}
  .pattern-acc{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:16px 18px;margin-bottom:20px;}
  .pattern-acc-head{display:flex;align-items:baseline;justify-content:space-between;gap:10px;flex-wrap:wrap;margin-bottom:14px;}
  .pattern-acc h3{font-family:'Shippori Mincho B1',serif;font-size:15px;font-weight:700;margin:0;}
  .pattern-acc-sub{font-family:'JetBrains Mono',monospace;font-size:10.5px;color:var(--ink-soft);}
  .pattern-acc-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;}
  @media(max-width:720px){.pattern-acc-grid{grid-template-columns:repeat(2,1fr);}}
  .pat-card{position:relative;display:flex;flex-direction:column;align-items:center;gap:6px;padding:16px 8px 12px;border:1px solid var(--line);border-radius:12px;text-align:center;overflow:hidden;
    background:linear-gradient(180deg, color-mix(in srgb, var(--pat) 11%, transparent), transparent 72%);
    transition:transform .2s ease, box-shadow .2s ease;}
  .pat-card::before{content:'';position:absolute;left:0;right:0;top:0;height:3px;background:var(--pat);}
  .pat-card:hover{transform:translateY(-2px);box-shadow:0 8px 20px var(--shadow);}
  .pat-card.is-empty{opacity:.7;}
  .pat-card.is-best{border-color:color-mix(in srgb, var(--pat) 55%, var(--line));}
  .pat-name{display:flex;flex-direction:column;align-items:center;line-height:1.15;}
  .pat-jp{font-family:'Shippori Mincho B1',serif;font-weight:800;font-size:17px;color:var(--ink);}
  .pat-romaji{font-family:'JetBrains Mono',monospace;font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-soft);margin-top:2px;}
  .pat-contour{width:84px;height:28px;overflow:visible;}
  .pat-contour .pc-line{fill:none;stroke:var(--pat);stroke-width:2;stroke-linejoin:round;stroke-linecap:round;}
  .pat-contour .pc-dash{stroke-dasharray:2.5 3;opacity:.8;}
  .pat-contour .pc-dot{fill:var(--pat);}
  .pat-contour .pc-particle{fill:var(--panel);stroke:var(--pat);stroke-width:1.8;}
  .pat-ring{position:relative;width:96px;height:96px;margin:2px 0;}
  .pat-ring svg{width:100%;height:100%;transform:rotate(-90deg);}
  .pat-ring-bg{fill:none;stroke:var(--paper-dim);stroke-width:8;}
  .pat-ring-fg{fill:none;stroke:var(--pat);stroke-width:8;stroke-linecap:round;transition:stroke-dashoffset 1.2s cubic-bezier(.22,1,.36,1);}
  .pat-card.is-empty .pat-ring-fg{stroke:transparent;}
  .pat-pct{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-family:'Shippori Mincho B1',serif;font-weight:800;font-size:25px;color:var(--ink);font-variant-numeric:tabular-nums;}
  .pat-pct small{font-size:12px;font-weight:700;margin:7px 0 0 1px;}
  .pat-tier{font-size:12.5px;font-weight:700;color:var(--ink);padding:3px 11px;border-radius:999px;background:color-mix(in srgb, var(--pat) 16%, transparent);}
  .pat-foot{font-family:'JetBrains Mono',monospace;font-size:10.5px;color:var(--ink-soft);min-height:15px;}
  .pat-up{display:inline-block;color:var(--green);font-weight:800;font-size:11.5px;animation:patPop .55s cubic-bezier(.34,1.56,.64,1) 1s both;}
  .pat-count{font-family:'JetBrains Mono',monospace;font-size:10px;color:var(--ink-soft);opacity:.85;min-height:13px;}
  .pat-crown{position:absolute;top:8px;right:9px;font-size:16px;animation:patBob 2.6s ease-in-out infinite;}
  .pat-card.is-up .pat-ring svg{animation:patGlow 1.3s ease-out 1.05s 1;}
  .pat-spark{position:absolute;color:var(--pat);font-size:13px;opacity:0;pointer-events:none;animation:patSpark 1.1s ease-out 1.1s 1 both;}
  .pat-spark.s1{top:4px;left:6px;} .pat-spark.s2{top:10px;right:0;animation-delay:1.25s;} .pat-spark.s3{bottom:6px;left:2px;animation-delay:1.4s;}
  @keyframes patPop{0%{opacity:0;transform:scale(.4) translateY(4px);}100%{opacity:1;transform:none;}}
  @keyframes patBob{0%,100%{transform:translateY(0) rotate(-6deg);}50%{transform:translateY(-3px) rotate(6deg);}}
  @keyframes patGlow{0%{filter:drop-shadow(0 0 0 transparent);}40%{filter:drop-shadow(0 0 7px var(--pat));}100%{filter:drop-shadow(0 0 0 transparent);}}
  @keyframes patSpark{0%{opacity:0;transform:scale(.3);}35%{opacity:1;transform:scale(1.15);}100%{opacity:0;transform:scale(.6) translateY(-10px);}}
  @media (prefers-reduced-motion: reduce){
    .pat-ring-fg{transition:none;}
    .pat-up,.pat-crown,.pat-card.is-up .pat-ring svg{animation:none;}
    .pat-card:hover{transform:none;}
  }

  /* ---------------- accuracy over time (day / week / month) ---------------- */
  .trend{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:16px 18px 12px;margin-bottom:20px;transition:opacity .2s;}
  .trend.is-loading .trend-chart{opacity:.55;}
  .trend-head{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;margin-bottom:12px;}
  .trend h3{font-family:'Shippori Mincho B1',serif;font-size:15px;font-weight:700;margin:0;}
  .trend-seg{position:relative;display:grid;grid-template-columns:repeat(3,1fr);padding:3px;border-radius:999px;background:var(--paper-dim);border:1px solid var(--line);min-width:180px;}
  .trend-seg::before{content:'';position:absolute;top:3px;bottom:3px;left:3px;width:calc((100% - 6px) / 3);border-radius:999px;background:var(--panel);box-shadow:0 1px 4px var(--shadow);transition:transform .35s cubic-bezier(.34,1.4,.64,1);}
  .trend-seg[data-pos="1"]::before{transform:translateX(100%);}
  .trend-seg[data-pos="2"]::before{transform:translateX(200%);}
  .trend-seg button{position:relative;z-index:1;border:0;background:none;cursor:pointer;padding:5px 12px;font:inherit;font-size:12.5px;font-weight:700;color:var(--ink-soft);border-radius:999px;transition:color .2s;}
  .trend-seg button.active{color:var(--ink);}
  .trend-seg button:focus-visible{outline:2px solid var(--gold);outline-offset:1px;}
  .trend-hero{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:6px;min-height:56px;}
  .trh-big{font-family:'Shippori Mincho B1',serif;font-weight:800;font-size:38px;line-height:1;color:var(--ink);font-variant-numeric:tabular-nums;}
  .trh-big small{font-size:17px;margin-left:2px;}
  .trh-big.trh-muted{color:var(--ink-soft);}
  .trh-sub{font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--ink-soft);margin-top:5px;max-width:46ch;}
  .trh-side{display:flex;flex-direction:column;align-items:flex-end;gap:6px;}
  .trh-chip{display:inline-block;font-size:12px;font-weight:700;color:var(--ink-soft);background:var(--paper-dim);border-radius:999px;padding:4px 11px;animation:patPop .5s cubic-bezier(.34,1.56,.64,1) .5s both;}
  .trh-chip.up{color:var(--green);background:var(--correct-bg);}
  .trh-chip.best{color:var(--ink);background:color-mix(in srgb, var(--gold) 20%, transparent);}
  .trh-best{font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--ink-soft);}
  .trend-chart{position:relative;width:100%;min-height:120px;outline:none;border-radius:8px;}
  .trend-chart:focus-visible{box-shadow:0 0 0 2px var(--gold);}
  .tr-svg{display:block;width:100%;height:auto;overflow:visible;touch-action:pan-y;}
  .tr-grid{stroke:var(--paper-dim);stroke-width:1;}
  .tr-ylab,.tr-xlab{font-family:'JetBrains Mono',monospace;font-size:10px;fill:var(--ink-soft);}
  .tr-fill-top{stop-color:var(--vermillion);stop-opacity:.18;}
  .tr-fill-bot{stop-color:var(--vermillion);stop-opacity:0;}
  .tr-area.anim{animation:trFade .9s ease-out .35s both;}
  .tr-line{fill:none;stroke:var(--vermillion);stroke-width:2.2;stroke-linejoin:round;stroke-linecap:round;}
  .tr-dot{fill:var(--vermillion);stroke:var(--panel);stroke-width:2;transition:r .15s;}
  .tr-pt.is-best .tr-dot{fill:var(--gold);}
  .tr-pt.hover .tr-dot{r:7;}
  .tr-pt.pop{animation:trPop .45s cubic-bezier(.34,1.56,.64,1) both;transform-box:fill-box;transform-origin:center;}
  .tr-pulse{fill:none;stroke:var(--vermillion);stroke-width:2;transform-box:fill-box;transform-origin:center;animation:trPulse 2s ease-out infinite;}
  .tr-trophy{font-size:13px;pointer-events:none;}
  .tr-cross{stroke:var(--ink-soft);stroke-width:1;opacity:0;transition:opacity .12s;pointer-events:none;}
  .tr-cross.on{opacity:.45;}
  .tr-hit{fill:transparent;cursor:crosshair;}
  .tr-tip{position:absolute;pointer-events:none;background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:8px 11px;box-shadow:0 8px 22px var(--shadow);opacity:0;transform:translateY(4px);transition:opacity .12s,transform .12s;white-space:nowrap;z-index:2;}
  .tr-tip.on{opacity:1;transform:none;}
  .tr-tip-val{font-family:'Shippori Mincho B1',serif;font-weight:800;font-size:20px;color:var(--ink);line-height:1.1;}
  .tr-tip-when{font-size:12px;color:var(--ink-soft);margin-top:2px;}
  .tr-tip-cnt{font-family:'JetBrains Mono',monospace;font-size:10.5px;color:var(--ink-soft);margin-top:2px;}
  .tr-tip-diff{font-family:'JetBrains Mono',monospace;font-size:10.5px;font-weight:700;color:var(--ink-soft);margin-top:4px;}
  .tr-tip-diff.up{color:var(--green);}
  .trend-empty{display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center;padding:34px 16px;color:var(--ink-soft);font-size:13px;border:1px dashed var(--line);border-radius:10px;}
  .trend-empty-icon{font-size:28px;animation:patBob 2.6s ease-in-out infinite;}
  .trend-table{margin-top:8px;}
  .trend-table summary{cursor:pointer;font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--ink-soft);}
  .trend-tbl{width:100%;border-collapse:collapse;margin-top:8px;font-size:12.5px;}
  .trend-tbl th{text-align:left;font-family:'JetBrains Mono',monospace;font-size:10.5px;font-weight:500;color:var(--ink-soft);border-bottom:1px solid var(--line);padding:4px 6px;}
  .trend-tbl td{padding:5px 6px;border-bottom:1px solid var(--paper-dim);font-variant-numeric:tabular-nums;}
  @keyframes trPop{0%{opacity:0;transform:scale(0);}100%{opacity:1;transform:scale(1);}}
  @keyframes trFade{from{opacity:0;}to{opacity:1;}}
  @keyframes trPulse{0%{opacity:.7;transform:scale(1);}100%{opacity:0;transform:scale(2.6);}}
  @media (prefers-reduced-motion: reduce){
    .trend-seg::before,.tr-cross,.tr-tip{transition:none;}
    .tr-pulse,.tr-pt.pop,.tr-area.anim,.trh-chip,.trend-empty-icon{animation:none;}
  }

/* ---------------- practice calendar (daily streak heatmap) ---------------- */
.streak-cal{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:16px 18px 14px;margin-bottom:20px;}
.streak-cal:empty{display:none;}
.sc-head{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;}
.streak-cal h3{font-family:'Shippori Mincho B1',serif;font-size:15px;font-weight:700;margin:0;}
.sc-streak{display:inline-flex;align-items:baseline;gap:5px;padding:5px 14px;border-radius:999px;background:var(--paper-dim);}
.sc-streak.is-live{background:color-mix(in srgb, var(--vermillion) 15%, transparent);}
.sc-flame{font-size:15px;align-self:center;filter:grayscale(1);opacity:.6;}
.sc-streak.is-live .sc-flame{filter:none;opacity:1;animation:ssFlame 1.6s ease-in-out infinite;}
.sc-days{font-family:'Shippori Mincho B1',serif;font-weight:800;font-size:22px;line-height:1;color:var(--ink);font-variant-numeric:tabular-nums;}
.sc-unit{font-size:12px;font-weight:700;color:var(--ink-soft);}
.sc-note{font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--ink-soft);margin:6px 0 12px;}
.sc-wrap{display:flex;gap:6px;}
.sc-wd{display:grid;grid-template-rows:repeat(7,1fr);gap:3px;padding-top:17px;font-family:'JetBrains Mono',monospace;font-size:9px;color:var(--ink-soft);}
.sc-wd span{display:flex;align-items:center;}
.sc-main{flex:1;min-width:0;}
.sc-months{display:grid;height:14px;margin-bottom:3px;font-family:'JetBrains Mono',monospace;font-size:9.5px;color:var(--ink-soft);}
.sc-months span{white-space:nowrap;}
.sc-grid{display:grid;grid-template-rows:repeat(7,auto);grid-auto-flow:column;gap:3px;}
.sc-cell{display:block;aspect-ratio:1;border-radius:3px;background:var(--paper-dim);transition:transform .12s;}
.sc-grid .sc-cell:not(.sc-future):hover{transform:scale(1.35);position:relative;z-index:1;}
.sc-cell.l1{background:color-mix(in srgb, var(--vermillion) 25%, var(--paper-dim));}
.sc-cell.l2{background:color-mix(in srgb, var(--vermillion) 50%, var(--paper-dim));}
.sc-cell.l3{background:color-mix(in srgb, var(--vermillion) 78%, var(--paper-dim));}
.sc-cell.l4{background:linear-gradient(135deg,var(--gold),var(--vermillion));}
.sc-cell.sc-future{background:transparent;}
.sc-cell.sc-today{outline:1.5px solid var(--ink);outline-offset:1px;}
.sc-foot{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;margin-top:10px;font-family:'JetBrains Mono',monospace;font-size:10.5px;color:var(--ink-soft);}
.sc-foot b{color:var(--ink);}
.sc-legend{display:inline-flex;align-items:center;gap:3px;}
.sc-legend .sc-cell{width:10px;height:10px;}

/* ---------------- rank-up celebration ---------------- */
.rankup-confetti{position:fixed;inset:0;width:100vw;height:100vh;pointer-events:none;z-index:9998;}
.rankup-toast{position:fixed;top:22px;left:50%;z-index:9999;display:flex;align-items:center;gap:14px;
  padding:14px 18px 14px 16px;min-width:260px;max-width:calc(100vw - 32px);
  background:var(--panel);border:1px solid color-mix(in srgb, var(--gold) 60%, var(--line));border-radius:16px;
  box-shadow:0 14px 40px var(--shadow),0 0 0 4px color-mix(in srgb, var(--gold) 14%, transparent);
  transform:translateX(-50%);animation:ruIn .6s cubic-bezier(.34,1.56,.64,1) both;}
.rankup-toast.is-out{animation:ruOut .35s ease-in both;}
.ru-icon{font-size:38px;line-height:1;animation:ruIcon 1.1s cubic-bezier(.34,1.56,.64,1) .2s both;}
.ru-kicker{font-family:'JetBrains Mono',monospace;font-size:10.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  background:linear-gradient(90deg,var(--gold),var(--vermillion));-webkit-background-clip:text;background-clip:text;color:transparent;}
.ru-name{font-family:'Shippori Mincho B1',serif;font-weight:800;font-size:22px;color:var(--ink);line-height:1.2;}
.ru-what{font-size:12px;color:var(--ink-soft);}
.ru-close{margin-left:auto;align-self:flex-start;border:0;background:none;color:var(--ink-soft);font-size:18px;cursor:pointer;padding:0 2px;}
@keyframes ruIn{from{opacity:0;transform:translate(-50%,-24px) scale(.9);}to{opacity:1;transform:translate(-50%,0) scale(1);}}
@keyframes ruOut{to{opacity:0;transform:translate(-50%,-16px) scale(.96);}}
@keyframes ruIcon{0%{transform:scale(.2) rotate(-30deg);}100%{transform:scale(1) rotate(0);}}
@media (prefers-reduced-motion: reduce){
  .rankup-toast,.rankup-toast.is-out,.ru-icon,.sc-streak.is-live .sc-flame{animation:none;}
}


  /* ---- pronunciation practice: pitch-over-time comparison chart ---- */
  .pcc{position:relative;max-width:560px;margin:0 auto;}
  .pcc svg{display:block;width:100%;height:auto;}
  .pcc-legend{display:flex;gap:16px;justify-content:center;font-size:12px;color:var(--ink-soft);margin-bottom:4px;}
  .pcc-legend span,.pcc-tip span{display:inline-flex;align-items:center;gap:6px;}
  .pcc-key{display:inline-block;width:16px;height:0;border-top:2.5px solid;border-radius:2px;}
  .pcc-key.ref{border-color:var(--ink-soft);}
  .pcc-key.you{border-color:var(--gold);}
  .pcc-band{fill:transparent;cursor:pointer;}
  .pcc-band.alt{fill:var(--paper-dim);fill-opacity:.45;}
  .pcc-band.on{fill:var(--gold);fill-opacity:.12;}
  .pcc-grid{stroke:var(--line);stroke-width:1;}
  .pcc-grid.zero{stroke-dasharray:3 3;}
  .pcc-tick{font-family:'JetBrains Mono',monospace;font-size:9.5px;fill:var(--ink-soft);}
  .pcc-mora{font-family:'Shippori Mincho B1',serif;font-size:13px;fill:var(--ink);}
  .pcc-end{font-size:11px;fill:var(--ink-soft);}
  .pcc-line{fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;pointer-events:none;}
  .pcc-line.ref{stroke:var(--ink-soft);}
  .pcc-line.you{stroke:var(--gold);stroke-width:2.5;}
  .pcc-tip{position:absolute;top:calc(100% - 6px);z-index:5;display:flex;flex-direction:column;gap:2px;padding:7px 10px;border-radius:8px;
    background:var(--panel);border:1px solid var(--line);box-shadow:0 4px 14px var(--shadow, rgba(0,0,0,.12));
    font-size:12px;color:var(--ink);pointer-events:none;white-space:nowrap;}
  .pcc-tip b{font-family:'Shippori Mincho B1',serif;font-size:14px;}
  .pcc-tip small{color:var(--ink-soft);font-size:10.5px;}

/* =====================================================================
   study calendar (#planner)
   ===================================================================== */
:root{
  --cat-grammar:#7a5c9e; --cat-vocab:#c0762a; --cat-pitch:#bf4332; --cat-listening:#3a5a9c;
  --cat-reading:#3f6b4f; --cat-shadowing:#2a8383; --cat-conversation:#c2577f; --cat-writing:#7d7a2a; --cat-custom:#8a7a5c;
}
[data-theme="dark"]{
  --cat-grammar:#b79bff; --cat-vocab:#ffb454; --cat-pitch:#ff6b81; --cat-listening:#8fa8ff;
  --cat-reading:#3ddc97; --cat-shadowing:#4fd6d6; --cat-conversation:#ff8fc1; --cat-writing:#d8d36a; --cat-custom:#c9b98f;
}

#plannerRoot{--ease-pop:cubic-bezier(.34,1.56,.64,1);--ease-out:cubic-bezier(.22,1,.36,1);}
.pl-loading,.pl-error{display:flex;align-items:center;gap:12px;justify-content:center;flex-direction:column;padding:60px 20px;color:var(--ink-soft);
  background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);text-align:center;}
.pl-spinner{width:26px;height:26px;border-radius:50%;border:3px solid var(--paper-dim);border-top-color:var(--vermillion);animation:plSpin .8s linear infinite;}
@keyframes plSpin{to{transform:rotate(360deg);}}

/* ---------- shared bits ---------- */
.pl-btn{font-family:inherit;font-weight:700;font-size:14px;border-radius:999px;padding:10px 20px;cursor:pointer;border:1.5px solid var(--ink);
  background:var(--panel);color:var(--ink);transition:transform .15s var(--ease-pop),background .15s,color .15s,opacity .15s,box-shadow .15s;}
.pl-btn:hover:not(:disabled){transform:translateY(-1px);box-shadow:0 4px 14px var(--shadow);}
.pl-btn:active:not(:disabled){transform:translateY(0) scale(.97);}
.pl-btn:disabled{opacity:.4;cursor:not-allowed;}
.pl-btn.primary{background:var(--ink);color:var(--paper);}
.pl-btn.ghost{border-color:var(--line);background:transparent;}
.pl-btn.ghost:hover:not(:disabled){border-color:var(--ink);}
.pl-btn.sm{padding:6px 14px;font-size:12.5px;}
.pl-link{background:none;border:none;padding:4px 2px;font-family:inherit;font-size:13px;font-weight:700;color:var(--vermillion);cursor:pointer;}
.pl-link:hover{text-decoration:underline;}
.pl-iconbtn{width:34px;height:34px;border-radius:50%;border:1.5px solid var(--line);background:transparent;color:var(--ink);font-size:16px;line-height:1;cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;transition:border-color .15s,transform .15s var(--ease-pop);}
.pl-iconbtn:hover{border-color:var(--ink);transform:scale(1.06);}
.pl-pill{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:700;padding:4px 12px;border-radius:999px;
  background:color-mix(in srgb, var(--gold) 16%, transparent);color:var(--ink);border:none;font-family:inherit;}
.pl-pill.is-btn{cursor:pointer;margin-left:6px;}
.pl-pill.is-btn:hover{background:color-mix(in srgb, var(--gold) 28%, transparent);}
.pl-note{font-size:12.5px;color:var(--ink-soft);margin:0 0 12px;}
.pl-badge{flex:0 0 auto;width:32px;height:32px;border-radius:9px;display:inline-flex;align-items:center;justify-content:center;
  font-family:'Shippori Mincho B1',serif;font-weight:800;font-size:16px;color:var(--c);background:color-mix(in srgb, var(--c) 14%, transparent);}

/* ---------- wizard ---------- */
.pl-wizard{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:24px 26px 22px;position:relative;overflow:hidden;}
.pl-wizard::before{content:'';position:absolute;left:0;right:0;top:0;height:3px;background:linear-gradient(90deg,var(--gold),var(--vermillion));}
.pl-steps{list-style:none;display:flex;gap:0;margin:2px 0 26px;padding:0;counter-reset:s;}
.pl-steps li{flex:1;position:relative;}
.pl-steps li + li::before{content:'';position:absolute;left:-50%;right:50%;top:15px;height:2px;background:var(--line);z-index:0;transition:background .3s;}
.pl-steps li.is-done + li::before,.pl-steps li.is-done + li.is-current::before{background:var(--gold);}
.pl-steps button{position:relative;z-index:1;width:100%;display:flex;flex-direction:column;align-items:center;gap:6px;background:none;border:none;cursor:pointer;
  font-family:inherit;color:var(--ink-soft);padding:0;}
.pl-steps button:disabled{cursor:default;}
.pl-step-num{width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-family:'JetBrains Mono',monospace;font-weight:700;font-size:13px;
  background:var(--panel);border:2px solid var(--line);transition:all .3s var(--ease-pop);}
.pl-step-label{font-size:12px;font-weight:700;}
.pl-steps .is-current .pl-step-num{border-color:var(--vermillion);color:var(--vermillion);transform:scale(1.12);box-shadow:0 0 0 5px color-mix(in srgb, var(--vermillion) 14%, transparent);}
.pl-steps .is-current .pl-step-label{color:var(--ink);}
.pl-steps .is-done .pl-step-num{background:var(--gold);border-color:var(--gold);color:var(--panel);}
.pl-wiz-body{animation:plIn .4s var(--ease-out);}
@keyframes plIn{from{opacity:0;transform:translateY(8px);}to{opacity:1;transform:none;}}
.pl-q{font-family:'Shippori Mincho B1',serif;font-size:22px;font-weight:800;margin:0 0 4px;}
.pl-q-sub{color:var(--ink-soft);font-size:13.5px;margin:0 0 18px;}
.pl-wiz-nav{display:flex;justify-content:space-between;align-items:center;margin-top:22px;padding-top:18px;border-top:1px dashed var(--line);}
.pl-wiz-nav-r{display:flex;gap:10px;}
.pl-wiz-error{display:none;margin-top:14px;background:var(--danger-bg);border:1px solid var(--vermillion);color:var(--vermillion);border-radius:8px;padding:8px 12px;font-size:13px;}
.pl-wiz-error.show{display:block;animation:plShake .4s;}
@keyframes plShake{25%{transform:translateX(-4px);}75%{transform:translateX(4px);}}

/* level cards */
.pl-levels{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;}
.pl-level{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:8px;text-align:left;padding:18px 16px 16px;cursor:pointer;
  background:var(--paper);border:1.5px solid var(--line);border-radius:var(--radius);color:var(--ink);font-family:inherit;
  transition:transform .2s var(--ease-pop),border-color .2s,box-shadow .2s,background .2s;}
.pl-level:hover{transform:translateY(-3px);border-color:var(--ink-soft);box-shadow:0 8px 22px var(--shadow);}
.pl-level.is-selected{border-color:var(--vermillion);background:color-mix(in srgb, var(--vermillion) 5%, var(--panel));box-shadow:0 0 0 3px color-mix(in srgb, var(--vermillion) 16%, transparent),0 8px 22px var(--shadow);}
.pl-level-kanji{font-family:'Shippori Mincho B1',serif;font-weight:800;font-size:26px;width:48px;height:48px;border-radius:12px;display:flex;align-items:center;justify-content:center;
  background:var(--ink);color:var(--paper);}
.pl-level.is-selected .pl-level-kanji{background:var(--vermillion);}
.pl-level-name{font-family:'Shippori Mincho B1',serif;font-weight:800;font-size:19px;line-height:1.2;}
.pl-level-name small{display:block;font-family:'JetBrains Mono',monospace;font-weight:500;font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-soft);margin-top:3px;}
.pl-level-desc{font-size:12.5px;color:var(--ink-soft);line-height:1.55;min-height:3.1em;}
.pl-level .pl-stack{width:100%;height:8px;}
.pl-level-items{list-style:none;padding:0;margin:2px 0 0;width:100%;display:flex;flex-direction:column;gap:3px;}
.pl-level-items li{display:flex;align-items:center;gap:7px;font-size:12px;}
.pl-level-items i{width:8px;height:8px;border-radius:3px;background:var(--c);flex:0 0 auto;}
.pl-level-items span{flex:1;min-width:0;}
.pl-level-items em{font-style:normal;font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--ink-soft);}
.pl-level-check{position:absolute;top:12px;right:12px;width:24px;height:24px;border-radius:50%;background:var(--vermillion);color:#fff;font-size:13px;font-weight:800;
  display:flex;align-items:center;justify-content:center;transform:scale(0);transition:transform .3s var(--ease-pop);}
.pl-level.is-selected .pl-level-check{transform:scale(1);}
@media(max-width:700px){.pl-levels{grid-template-columns:1fr;}.pl-level-desc{min-height:0;}}

/* stacked weight bar */
.pl-stack{display:flex;gap:2px;height:14px;border-radius:999px;overflow:hidden;background:var(--paper-dim);}
.pl-stack.is-big{height:30px;border-radius:10px;gap:3px;}
.pl-seg{background:var(--c);min-width:3px;display:flex;align-items:center;justify-content:center;transition:flex .45s var(--ease-out);}
.pl-seg b{font-family:'Shippori Mincho B1',serif;font-size:13px;color:#fff;opacity:.92;}
[data-theme="dark"] .pl-seg b{color:#0c1120;}
.pl-legend{display:flex;flex-wrap:wrap;gap:6px 16px;margin-top:12px;}
.pl-leg{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;}
.pl-leg i{width:10px;height:10px;border-radius:3px;background:var(--c);}
.pl-leg em{font-style:normal;font-family:'JetBrains Mono',monospace;font-size:11.5px;color:var(--ink-soft);}

/* time step */
.pl-time{display:flex;flex-direction:column;align-items:center;padding:6px 0 18px;}
.pl-time-big{font-family:'Shippori Mincho B1',serif;font-weight:800;font-size:64px;line-height:1;color:var(--ink);font-variant-numeric:tabular-nums;}
.pl-time-big small{font-family:'JetBrains Mono',monospace;font-size:13px;font-weight:500;color:var(--ink-soft);margin-left:8px;letter-spacing:.06em;}
.pl-range{-webkit-appearance:none;appearance:none;width:100%;max-width:520px;height:8px;border-radius:999px;margin:22px 0 6px;
  background:linear-gradient(90deg,var(--gold),var(--vermillion));outline:none;cursor:pointer;}
.pl-range::-webkit-slider-thumb{-webkit-appearance:none;width:26px;height:26px;border-radius:50%;background:var(--panel);border:3px solid var(--vermillion);
  box-shadow:0 2px 8px var(--shadow);transition:transform .15s var(--ease-pop);}
.pl-range::-webkit-slider-thumb:hover,.pl-range:active::-webkit-slider-thumb{transform:scale(1.18);}
.pl-range::-moz-range-thumb{width:22px;height:22px;border-radius:50%;background:var(--panel);border:3px solid var(--vermillion);}
.pl-range-scale{display:flex;justify-content:space-between;width:100%;max-width:520px;font-family:'JetBrains Mono',monospace;font-size:10.5px;color:var(--ink-soft);}
.pl-chiprow{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-top:16px;}
.pl-chipbtn{font-family:inherit;font-weight:700;font-size:13px;padding:6px 14px;border-radius:999px;border:1.5px solid var(--line);background:transparent;color:var(--ink);cursor:pointer;
  transition:all .18s var(--ease-pop);}
.pl-chipbtn:hover{border-color:var(--ink);}
.pl-chipbtn.is-on{background:var(--ink);border-color:var(--ink);color:var(--paper);transform:scale(1.05);}
.pl-preview{background:var(--paper);border:1px solid var(--line);border-radius:12px;padding:14px;}

/* editor */
.pl-ed-head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;flex-wrap:wrap;}
.pl-ed-head .pl-q-sub{margin-bottom:14px;}
.pl-meter{display:flex;align-items:center;gap:10px;margin:12px 0 16px;font-size:12.5px;}
.pl-meter-bar{flex:1;height:6px;border-radius:999px;background:var(--paper-dim);overflow:hidden;}
.pl-meter-bar i{display:block;height:100%;background:var(--gold);border-radius:999px;transition:width .3s var(--ease-out);}
.pl-meter-num{font-family:'JetBrains Mono',monospace;font-weight:700;font-size:13px;min-width:48px;text-align:right;}
.pl-meter-num.is-ok{color:var(--green);}
.pl-meter-num.is-off{color:var(--vermillion);}
.pl-meter-msg{color:var(--green);font-weight:700;}
.pl-rows{display:flex;flex-direction:column;gap:10px;}
.pl-row{display:grid;grid-template-columns:auto 1fr auto auto auto;grid-template-areas:"badge name freq opt del" "amt amt amt amt amt";
  align-items:center;gap:8px 10px;padding:12px 14px;border-radius:12px;background:var(--paper);border:1px solid var(--line);
  border-left:4px solid var(--c);transition:box-shadow .2s;}
.pl-row:focus-within{box-shadow:0 0 0 3px color-mix(in srgb, var(--c) 18%, transparent);}
.pl-row.is-new{animation:plIn .4s var(--ease-pop);}
.pl-row .pl-badge{grid-area:badge;}
.pl-name{grid-area:name;min-width:0;font-family:inherit;font-weight:700;font-size:14.5px;color:var(--ink);background:transparent;border:1.5px solid transparent;border-radius:8px;padding:5px 8px;}
.pl-name:hover{border-color:var(--line);}
.pl-name:focus{outline:none;border-color:var(--c);background:var(--panel);}
.pl-name::placeholder{color:var(--ink);opacity:1;}
.pl-name:focus::placeholder{opacity:.4;}
.pl-seg2{grid-area:freq;display:inline-flex;background:var(--paper-dim);border-radius:999px;padding:3px;}
.pl-seg2 button{font-family:inherit;font-size:12px;font-weight:700;border:none;background:transparent;color:var(--ink-soft);padding:4px 11px;border-radius:999px;cursor:pointer;transition:all .18s;}
.pl-seg2 button.is-on{background:var(--panel);color:var(--ink);box-shadow:0 1px 4px var(--shadow);}
.pl-opt{grid-area:opt;display:inline-flex;align-items:center;gap:5px;font-size:12px;color:var(--ink-soft);cursor:pointer;user-select:none;}
.pl-opt input{accent-color:var(--c);width:15px;height:15px;cursor:pointer;}
.pl-del{grid-area:del;width:28px;height:28px;border-radius:50%;border:none;background:transparent;color:var(--ink-soft);font-size:18px;cursor:pointer;transition:all .15s;}
.pl-del:hover:not(:disabled){background:var(--danger-bg);color:var(--vermillion);}
.pl-del:disabled{opacity:.25;cursor:not-allowed;}
.pl-amt{grid-area:amt;display:flex;align-items:center;gap:12px;padding-left:42px;}
.pl-amt .pl-range.sm{margin:0;height:6px;flex:1;max-width:none;background:linear-gradient(90deg,var(--c) var(--fill,0%),var(--paper-dim) var(--fill,0%));
  background:color-mix(in srgb, var(--c) 30%, var(--paper-dim));}
.pl-amt .pl-range.sm::-webkit-slider-thumb{width:18px;height:18px;border-width:3px;border-color:var(--c);}
.pl-amt .pl-range.sm::-moz-range-thumb{width:14px;height:14px;border-color:var(--c);}
.pl-num{display:inline-flex;align-items:center;gap:4px;font-family:'JetBrains Mono',monospace;font-size:12px;color:var(--ink-soft);white-space:nowrap;}
.pl-num input{width:54px;font-family:'JetBrains Mono',monospace;font-size:13px;font-weight:700;text-align:right;padding:4px 6px;border:1.5px solid var(--line);border-radius:7px;background:var(--panel);color:var(--ink);}
.pl-num input:focus{outline:none;border-color:var(--c);}
.pl-min{font-family:'JetBrains Mono',monospace;font-size:12.5px;font-weight:700;color:var(--c);min-width:62px;text-align:right;white-space:nowrap;}
.pl-amt.is-weekly{flex-wrap:wrap;}
.pl-days{display:flex;gap:4px;flex-wrap:wrap;}
.pl-day{width:34px;height:30px;border-radius:8px;border:1.5px solid var(--line);background:transparent;color:var(--ink-soft);font-family:inherit;font-size:12px;font-weight:700;cursor:pointer;
  transition:all .15s var(--ease-pop);}
.pl-day.is-on{background:var(--c);border-color:var(--c);color:#fff;transform:scale(1.04);}
[data-theme="dark"] .pl-day.is-on{color:#0c1120;}
.pl-add{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:14px;padding:12px 14px;border:1.5px dashed var(--line);border-radius:12px;}
.pl-add-label{font-size:12px;font-weight:700;color:var(--ink-soft);margin-right:4px;}
.pl-addchip{display:inline-flex;align-items:center;gap:6px;font-family:inherit;font-size:12.5px;font-weight:700;padding:5px 12px 5px 6px;border-radius:999px;cursor:pointer;
  border:1.5px solid color-mix(in srgb, var(--c, var(--ink-soft)) 40%, transparent);background:transparent;color:var(--ink);transition:all .18s var(--ease-pop);}
.pl-addchip b{width:22px;height:22px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-family:'Shippori Mincho B1',serif;
  background:color-mix(in srgb, var(--c, var(--ink-soft)) 16%, transparent);color:var(--c, var(--ink));font-size:12px;}
.pl-addchip:hover{transform:translateY(-1px);border-color:var(--c, var(--ink));}
.pl-addchip.is-custom{--c:var(--cat-custom);}
@media(max-width:620px){
  .pl-wizard{padding:20px 16px 18px;}
  .pl-row{grid-template-columns:auto 1fr auto;grid-template-areas:"badge name del" "freq freq opt" "amt amt amt";}
  .pl-amt{padding-left:0;flex-wrap:wrap;}
  .pl-amt .pl-range.sm{flex-basis:100%;}
  .pl-time-big{font-size:52px;}
}

/* ---------- calendar: top stats ---------- */
.pl-cal.is-new .pl-top,.pl-cal.is-new .pl-daypanel,.pl-cal.is-new .pl-month{animation:plIn .5s var(--ease-out) both;}
.pl-cal.is-new .pl-daypanel{animation-delay:.08s;}
.pl-cal.is-new .pl-month{animation-delay:.16s;}
.pl-top{display:grid;grid-template-columns:1.3fr 1fr 1fr 1fr;gap:12px;margin-bottom:16px;}
.pl-stat{display:flex;align-items:center;gap:12px;padding:14px 16px;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);min-width:0;}
.pl-stat-k{font-family:'JetBrains Mono',monospace;font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-soft);}
.pl-stat-v{font-family:'Shippori Mincho B1',serif;font-weight:800;font-size:22px;line-height:1.2;white-space:nowrap;}
.pl-stat-v small{font-size:13px;margin-left:2px;}
.pl-stat-icon{width:38px;height:38px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:18px;background:var(--paper-dim);flex:0 0 auto;color:var(--gold);}
.pl-stat-icon.is-hot{background:color-mix(in srgb, var(--vermillion) 15%, transparent);animation:plFlame 2.4s ease-in-out infinite;}
@keyframes plFlame{50%{transform:scale(1.08) rotate(-4deg);}}
.pl-ring-wrap{position:relative;width:64px;height:64px;flex:0 0 auto;}
.pl-ring-wrap > span{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-family:'Shippori Mincho B1',serif;font-weight:800;font-size:20px;}
.pl-ring-wrap > span small{font-size:12px;color:var(--ink-soft);}
.pl-ring{transform:rotate(-90deg);}
.pl-ring-bg{fill:none;stroke:var(--paper-dim);stroke-width:7;}
.pl-ring-fg{fill:none;stroke:var(--vermillion);stroke-width:7;stroke-linecap:round;transition:stroke-dashoffset .7s var(--ease-out),stroke .3s;}
.pl-stat-today.is-complete{border-color:var(--green);background:color-mix(in srgb, var(--green) 7%, var(--panel));}
.pl-stat-today.is-complete .pl-ring-fg{stroke:var(--green);}
.pl-top-actions{grid-column:1 / -1;display:flex;align-items:center;justify-content:flex-end;gap:8px;flex-wrap:wrap;}
.pl-top-actions .pl-pill{margin-right:auto;}
@media(max-width:760px){.pl-top{grid-template-columns:1fr 1fr;}.pl-stat{padding:12px;}.pl-stat-v{font-size:19px;}}

/* ---------- calendar: day panel ---------- */
.pl-dp{position:relative;overflow:hidden;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:20px 22px 18px;margin-bottom:18px;
  transition:border-color .4s,background .4s;}
.pl-dp::before{content:'';position:absolute;left:0;right:0;top:0;height:3px;background:linear-gradient(90deg,var(--gold),var(--vermillion));}
.pl-dp.is-complete{border-color:color-mix(in srgb, var(--green) 55%, var(--line));background:color-mix(in srgb, var(--green) 4%, var(--panel));}
.pl-dp.is-complete::before{background:var(--green);}
.pl-dp-head{display:flex;justify-content:space-between;align-items:flex-end;gap:12px;flex-wrap:wrap;}
.pl-dp-kicker{font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--gold);}
.pl-dp-title{font-family:'Shippori Mincho B1',serif;font-weight:800;font-size:24px;margin:2px 0 0;}
.pl-dp-right{display:flex;align-items:center;gap:12px;}
.pl-dp-min{font-family:'JetBrains Mono',monospace;font-size:12.5px;font-weight:700;color:var(--ink-soft);}
.pl-dp-bar{height:6px;border-radius:999px;background:var(--paper-dim);margin:12px 0 14px;overflow:hidden;}
.pl-dp-bar i{display:block;height:100%;border-radius:999px;background:linear-gradient(90deg,var(--gold),var(--vermillion));transition:width .6s var(--ease-out);}
.pl-dp.is-complete .pl-dp-bar i{background:var(--green);}
.pl-tasks{display:flex;flex-direction:column;gap:8px;position:relative;z-index:1;}
.pl-empty{padding:18px;text-align:center;color:var(--ink-soft);font-size:13.5px;background:var(--paper);border-radius:12px;}

.pl-task{display:flex;align-items:center;gap:12px;padding:10px 14px 10px 10px;border-radius:12px;background:var(--paper);border:1px solid var(--line);
  transition:background .3s,border-color .3s,transform .2s var(--ease-pop);}
.pl-task:hover:not(.is-future){border-color:color-mix(in srgb, var(--c) 50%, var(--line));}
.pl-task.is-done{background:color-mix(in srgb, var(--c) 9%, var(--panel));border-color:color-mix(in srgb, var(--c) 35%, var(--line));}
.pl-task.is-future{opacity:.62;}
.pl-task.just-done{animation:plRowPop .45s var(--ease-pop);}
@keyframes plRowPop{40%{transform:scale(1.018);}}
.pl-task-body{flex:1;min-width:0;}
.pl-task-name{font-weight:700;font-size:15px;line-height:1.35;}
.pl-task-name span{position:relative;background:linear-gradient(currentColor,currentColor) no-repeat 0 55% / 0 1.5px;transition:background-size .35s var(--ease-out),color .3s;}
.pl-task.is-done .pl-task-name span{background-size:100% 1.5px;color:var(--ink-soft);}
.pl-task-meta{display:flex;align-items:center;gap:6px;font-family:'JetBrains Mono',monospace;font-size:11.5px;color:var(--ink-soft);margin-top:1px;}
.pl-tag{font-family:'Zen Maru Gothic',sans-serif;font-size:10.5px;font-weight:700;padding:1px 8px;border-radius:999px;background:var(--paper-dim);color:var(--ink-soft);}
.pl-tag.is-weekly{background:color-mix(in srgb, var(--c) 14%, transparent);color:var(--c);}
.pl-go{font-size:12px;font-weight:700;color:var(--c);text-decoration:none;padding:5px 12px;border-radius:999px;border:1.5px solid color-mix(in srgb, var(--c) 40%, transparent);white-space:nowrap;
  transition:all .15s;}
.pl-go:hover{background:var(--c);color:var(--panel);}

/* big satisfying checkbox */
.pl-check{position:relative;flex:0 0 auto;width:40px;height:40px;padding:0;border:none;background:none;cursor:pointer;border-radius:50%;
  transition:transform .15s var(--ease-pop);-webkit-tap-highlight-color:transparent;}
.pl-check:hover:not(:disabled){transform:scale(1.08);}
.pl-check:active:not(:disabled){transform:scale(.88);}
.pl-check:disabled{cursor:not-allowed;}
.pl-check:focus-visible{outline:2px solid var(--c);outline-offset:2px;}
.pl-check svg{width:100%;height:100%;display:block;overflow:visible;}
.pl-check-ring{fill:transparent;stroke:color-mix(in srgb, var(--c) 55%, var(--line));stroke-width:2.2;transition:fill .25s,stroke .25s;}
.pl-check:hover:not(:disabled) .pl-check-ring{fill:color-mix(in srgb, var(--c) 10%, transparent);}
.pl-check-mark{fill:none;stroke:#fff;stroke-width:3.2;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:22;stroke-dashoffset:22;transition:stroke-dashoffset .3s var(--ease-out) .05s;}
[data-theme="dark"] .pl-check-mark{stroke:#0c1120;}
.pl-check[aria-pressed="true"] .pl-check-ring{fill:var(--c);stroke:var(--c);}
.pl-check[aria-pressed="true"] .pl-check-mark{stroke-dashoffset:0;}
.pl-check.just-done svg{animation:plCheckPop .45s var(--ease-pop);}
@keyframes plCheckPop{0%{transform:scale(.6);}60%{transform:scale(1.18);}100%{transform:scale(1);}}
.pl-burst{position:absolute;inset:0;pointer-events:none;}
.pl-burst i{position:absolute;left:50%;top:50%;width:5px;height:5px;margin:-2.5px;border-radius:50%;background:var(--c);opacity:0;}
.pl-check.just-done .pl-burst i{animation:plBurst .55s var(--ease-out) forwards;}
.pl-burst i:nth-child(1){--a:0deg;} .pl-burst i:nth-child(2){--a:45deg;} .pl-burst i:nth-child(3){--a:90deg;} .pl-burst i:nth-child(4){--a:135deg;}
.pl-burst i:nth-child(5){--a:180deg;} .pl-burst i:nth-child(6){--a:225deg;} .pl-burst i:nth-child(7){--a:270deg;} .pl-burst i:nth-child(8){--a:315deg;}
.pl-burst i:nth-child(even){width:4px;height:4px;background:var(--gold);}
@keyframes plBurst{0%{opacity:1;transform:rotate(var(--a)) translateY(0) scale(1);}100%{opacity:0;transform:rotate(var(--a)) translateY(-30px) scale(.3);}}

/* hanko stamp when the day is complete */
.pl-stamp{position:absolute;right:22px;bottom:16px;width:74px;height:74px;border-radius:50%;border:3px solid var(--vermillion);color:var(--vermillion);
  font-family:'Shippori Mincho B1',serif;font-weight:800;font-size:36px;display:flex;align-items:center;justify-content:center;
  transform:rotate(-14deg) scale(0);opacity:0;pointer-events:none;z-index:0;
  box-shadow:inset 0 0 0 3px color-mix(in srgb, var(--vermillion) 25%, transparent);}
.pl-dp.is-complete .pl-stamp{transform:rotate(-14deg) scale(1);opacity:.16;}
.pl-dp.just-complete .pl-stamp{animation:plStamp .7s var(--ease-pop) both;}
@keyframes plStamp{0%{transform:rotate(-30deg) scale(2.4);opacity:0;}55%{transform:rotate(-12deg) scale(.92);opacity:.9;}100%{transform:rotate(-14deg) scale(1);opacity:.16;}}
.pl-done-msg{margin-top:12px;font-weight:700;color:var(--green);font-size:14px;animation:plIn .5s var(--ease-out);}

/* ---------- calendar: month grid ---------- */
.pl-month{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:18px 18px 16px;}
.pl-month-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px;}
.pl-month-title{font-family:'Shippori Mincho B1',serif;font-weight:800;font-size:20px;margin:0;}
.pl-month-nav{display:flex;align-items:center;gap:6px;}
.pl-wdays{display:grid;grid-template-columns:repeat(7,1fr);text-align:center;font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--ink-soft);padding-bottom:6px;}
.pl-wdays .is-sun{color:var(--vermillion);} .pl-wdays .is-sat{color:var(--cat-listening);}
.pl-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));border-top:1px solid var(--line);border-left:1px solid var(--line);border-radius:10px;overflow:hidden;}
.pl-cell{position:relative;min-height:112px;padding:6px 5px 6px;border-right:1px solid var(--line);border-bottom:1px solid var(--line);cursor:pointer;
  transition:background .25s;outline:none;}
.pl-cell:hover{background:color-mix(in srgb, var(--paper-dim) 55%, transparent);}
.pl-cell:focus-visible{box-shadow:inset 0 0 0 2px var(--vermillion);}
.pl-cell.is-out{background:color-mix(in srgb, var(--paper-dim) 35%, transparent);}
.pl-cell.is-out .pl-cell-num{opacity:.45;}
.pl-cell.is-selected{box-shadow:inset 0 0 0 2px var(--ink);}
.pl-cell.is-complete{background:color-mix(in srgb, var(--green) 9%, transparent);}
.pl-cell.is-missed .pl-cell-num{opacity:.55;}
.pl-cell-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:4px;min-height:24px;padding:0 2px;}
.pl-cell-num{font-family:'JetBrains Mono',monospace;font-size:12px;font-weight:700;color:var(--ink-soft);order:2;}
.pl-cell.is-today .pl-cell-num{background:var(--vermillion);color:#fff;border-radius:999px;min-width:24px;height:24px;padding:0 6px;display:inline-flex;align-items:center;justify-content:center;}
.pl-cell-stamp{order:1;width:22px;height:22px;border-radius:50%;border:1.5px solid var(--vermillion);color:var(--vermillion);font-family:'Shippori Mincho B1',serif;font-weight:800;
  font-size:11px;display:inline-flex;align-items:center;justify-content:center;transform:rotate(-12deg);opacity:.85;}
.pl-cell.just-complete .pl-cell-stamp{animation:plStampSm .6s var(--ease-pop) both;}
@keyframes plStampSm{0%{transform:rotate(-40deg) scale(2.6);opacity:0;}100%{transform:rotate(-12deg) scale(1);opacity:.85;}}
.pl-chips{display:flex;flex-direction:column;gap:3px;}
.pl-chip{display:flex;align-items:center;gap:5px;width:100%;min-width:0;padding:3px 5px;border-radius:6px;border:none;cursor:pointer;text-align:left;
  background:color-mix(in srgb, var(--c) 10%, var(--panel));color:var(--ink);font-family:inherit;font-size:11px;font-weight:700;line-height:1.3;
  box-shadow:inset 3px 0 0 var(--c);transition:background .2s,transform .15s var(--ease-pop),opacity .2s;}
.pl-chip:hover:not(:disabled){background:color-mix(in srgb, var(--c) 20%, var(--panel));}
.pl-chip:active:not(:disabled){transform:scale(.96);}
.pl-chip:disabled{cursor:default;opacity:.55;}
.pl-chip.is-opt{box-shadow:inset 3px 0 0 color-mix(in srgb, var(--c) 45%, transparent);}
.pl-chip-box{flex:0 0 auto;width:12px;height:12px;border-radius:3.5px;border:1.5px solid color-mix(in srgb, var(--c) 70%, var(--ink-soft));position:relative;transition:all .2s var(--ease-pop);}
.pl-chip.is-done .pl-chip-box{background:var(--c);border-color:var(--c);}
.pl-chip.is-done .pl-chip-box::after{content:'';position:absolute;left:3px;top:0;width:3.5px;height:7px;border:solid #fff;border-width:0 1.8px 1.8px 0;transform:rotate(45deg);}
[data-theme="dark"] .pl-chip.is-done .pl-chip-box::after{border-color:#0c1120;}
.pl-chip.just-done .pl-chip-box{animation:plCheckPop .4s var(--ease-pop);}
.pl-chip-name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.pl-chip.is-done .pl-chip-name{color:var(--ink-soft);text-decoration:line-through;text-decoration-color:color-mix(in srgb, var(--c) 70%, transparent);}
.pl-dots{display:none;flex-wrap:wrap;gap:3px;justify-content:center;padding-top:2px;}
.pl-dots i{width:7px;height:7px;border-radius:50%;border:1.5px solid var(--c);}
.pl-dots i.is-done{background:var(--c);}
@media(max-width:760px){
  .pl-month{padding:14px 10px 12px;}
  .pl-cell{min-height:62px;padding:4px 2px;}
  .pl-chips{display:none;}
  .pl-dots{display:flex;}
  .pl-cell-head{justify-content:center;flex-direction:column;gap:2px;}
  .pl-cell-stamp{width:16px;height:16px;font-size:8.5px;order:3;}
  .pl-dp{padding:16px 14px 14px;}
  .pl-dp-title{font-size:20px;}
  .pl-stamp{width:58px;height:58px;font-size:28px;right:14px;}
}

.pl-toast{position:fixed;left:50%;bottom:28px;transform:translateX(-50%);z-index:9999;background:var(--ink);color:var(--paper);padding:10px 18px;border-radius:999px;
  font-size:13.5px;font-weight:700;box-shadow:0 8px 24px var(--shadow);animation:plToast 3.5s var(--ease-out) both;max-width:calc(100vw - 32px);}
@keyframes plToast{0%{opacity:0;transform:translate(-50%,16px);}8%,85%{opacity:1;transform:translate(-50%,0);}100%{opacity:0;transform:translate(-50%,8px);}}

@media (prefers-reduced-motion: reduce){
  #plannerRoot *,#plannerRoot *::before,#plannerRoot *::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important;}
}
.pl-dp-opt{display:block;text-align:right;font-size:10.5px;font-weight:500;opacity:.8;}
@media(max-width:760px){.pl-cell-mon{display:none;}}
.pl-pill.is-btn.is-first{margin-left:0;}
.pl-pill.is-btn{transition:background .15s,transform .15s var(--ease-pop);}
.pl-pill.is-btn:hover{transform:translateY(-1px);}
.pl-pill-edit{font-size:11px;opacity:.55;transition:opacity .15s;}
.pl-pill.is-btn:hover .pl-pill-edit{opacity:1;}

  /* dev-only attempt capture on the practice page */
  .attempt-capture{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:12px;padding:10px 12px;
    border:1px dashed var(--line);border-radius:8px;font-size:12px;color:var(--ink-soft);}
  .attempt-capture select{font-size:12px;padding:4px 6px;border:1px solid var(--line);border-radius:6px;background:var(--panel);color:var(--ink);}

/* =====================================================================
   Home dashboard (#main) + Practice hub (#modes) — js/pages/home.js
   ===================================================================== */
header.hero.hero-compact{padding-bottom:16px;margin-bottom:26px;}
.hero-compact h1{font-size:clamp(30px,5vw,44px);margin:0;}
.hero-compact h1 .sub{margin-top:2px;}
.hero-compact .lede{margin:10px 0 0;}
.section-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:14px;flex-wrap:wrap;}
.section-head h2{margin:0;}
h2 small,.hp-head h3 small{font-family:'JetBrains Mono',monospace;font-weight:500;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-soft);margin-left:6px;}
.section-link{font-size:13px;font-weight:700;color:var(--vermillion);text-decoration:none;white-space:nowrap;border-radius:6px;}
.section-link:hover{text-decoration:underline;text-underline-offset:3px;}
.section-link:focus-visible{outline:2px solid var(--vermillion);outline-offset:2px;}

/* ---- today's training ---- */
.home-today{margin-bottom:34px;}
.ht-card{
  position:relative;overflow:hidden;display:grid;grid-template-columns:1fr auto;gap:8px 28px;align-items:center;
  padding:26px 28px 22px;border:1px solid var(--line);border-radius:calc(var(--radius) + 4px);
  background:radial-gradient(120% 140% at 0% 0%, color-mix(in srgb, var(--vermillion) 12%, var(--panel)) 0%, var(--panel) 58%),var(--panel);
  box-shadow:0 10px 30px var(--shadow);
}
.ht-card::before{content:'';position:absolute;left:0;right:0;top:0;height:3px;background:linear-gradient(90deg,var(--vermillion),var(--gold));}
.ht-card.is-done::before{background:linear-gradient(90deg,var(--green),var(--gold));}
.ht-text{min-width:0;}
.ht-text .eyebrow{margin-bottom:6px;color:var(--vermillion);}
.ht-title{font-family:'Shippori Mincho B1',serif;font-weight:800;font-size:clamp(22px,3.4vw,28px);line-height:1.3;margin:0 0 4px;display:block;}
.ht-sub{margin:0 0 18px;color:var(--ink-soft);font-size:14px;font-variant-numeric:tabular-nums;}
.ht-error{margin:4px 0 14px;color:var(--ink-soft);font-size:14px;}
.ht-bar{height:8px;border-radius:999px;background:var(--paper-dim);overflow:hidden;max-width:380px;margin-bottom:18px;}
.ht-bar i{display:block;height:100%;border-radius:999px;background:linear-gradient(90deg,var(--vermillion),var(--gold));transition:width .9s cubic-bezier(.22,1,.36,1);}
.ht-card.is-done .ht-bar i{background:var(--green);}
.ht-actions{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;}
.ht-cta{
  display:inline-flex;align-items:center;gap:10px;padding:12px 22px;border-radius:999px;border:none;
  background:var(--vermillion);color:#fff;text-decoration:none;font-weight:700;font-size:15px;
  box-shadow:0 6px 18px color-mix(in srgb, var(--vermillion) 35%, transparent);transition:transform .12s, box-shadow .12s, filter .12s;
}
[data-theme="dark"] .ht-cta{color:#1a0f14;}
.ht-cta:hover{transform:translateY(-1px);filter:brightness(1.05);box-shadow:0 10px 24px color-mix(in srgb, var(--vermillion) 40%, transparent);}
.ht-cta:focus-visible{outline:3px solid var(--ink);outline-offset:3px;}
.ht-secondary{background:none;border:none;padding:4px 2px;cursor:pointer;font:inherit;font-size:13.5px;font-weight:700;color:var(--ink-soft);text-decoration:none;border-radius:6px;}
.ht-secondary:hover{color:var(--ink);text-decoration:underline;text-underline-offset:3px;}
.ht-secondary:focus-visible{outline:2px solid var(--vermillion);outline-offset:2px;}
.ht-ring{position:relative;width:138px;height:138px;grid-row:1;grid-column:2;}
.ht-ring svg{width:100%;height:100%;transform:rotate(-90deg);}
.ht-ring-bg{fill:none;stroke:var(--paper-dim);stroke-width:11;}
.ht-ring-fg{fill:none;stroke:var(--vermillion);stroke-width:11;stroke-linecap:round;transition:stroke-dashoffset 1.1s cubic-bezier(.22,1,.36,1);}
.ht-ring-fg.is-done{stroke:var(--green);}
.ht-ring-num{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;line-height:1.05;font-variant-numeric:tabular-nums;}
.ht-ring-num b{font-family:'Shippori Mincho B1',serif;font-weight:800;font-size:36px;color:var(--ink);}
.ht-ring-num span{font-family:'JetBrains Mono',monospace;font-size:12px;color:var(--ink-soft);}
.ht-ring-num em{font-style:normal;font-family:'JetBrains Mono',monospace;font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-soft);margin-top:3px;}
.ht-facts{grid-column:1 / -1;display:flex;flex-wrap:wrap;gap:10px 28px;margin-top:14px;padding-top:14px;border-top:1px dashed var(--line);}
.ht-fact{display:flex;flex-direction:column;min-width:0;}
.ht-fact-v{font-family:'Shippori Mincho B1',serif;font-weight:800;font-size:22px;color:var(--ink);line-height:1.15;font-variant-numeric:tabular-nums;}
.ht-fact-v small{font-size:13px;margin-left:2px;color:var(--ink-soft);}
.ht-fact-v.ht-fact-level{font-size:15px;font-family:'Zen Maru Gothic','Noto Sans JP',sans-serif;font-weight:700;padding-top:4px;}
.ht-fact-l{font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.04em;color:var(--ink-soft);margin-top:2px;}
.ht-card.is-loading{display:block;min-height:180px;}
.ht-skel-line{height:14px;border-radius:7px;background:var(--paper-dim);margin:12px 0;animation:htPulse 1.3s ease-in-out infinite;}
.ht-skel-line.w40{width:40%;}.ht-skel-line.w70{width:70%;height:24px;}.ht-skel-line.w30{width:30%;height:38px;border-radius:999px;margin-top:22px;}
@keyframes htPulse{0%,100%{opacity:1;}50%{opacity:.45;}}
@media(max-width:620px){
  .ht-card{grid-template-columns:1fr;padding:22px 18px 18px;}
  .ht-ring{grid-row:auto;grid-column:auto;width:112px;height:112px;justify-self:center;order:-1;}
  .ht-ring-num b{font-size:30px;}
  .ht-bar{max-width:none;}
  .ht-actions{flex-direction:column;align-items:stretch;}
  .ht-cta{justify-content:center;}
  .ht-secondary{text-align:center;}
  .ht-facts{justify-content:space-around;text-align:center;gap:10px 18px;}
}

/* ---- review + this week panels ---- */
.home-split{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-bottom:40px;}
@media(max-width:720px){.home-split{grid-template-columns:1fr;}}
.home-split > section{margin-bottom:0;}
.home-panel{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:18px 18px 16px;display:flex;flex-direction:column;}
.hp-head{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin-bottom:12px;}
.hp-head h3{font-family:'Shippori Mincho B1',serif;font-size:17px;font-weight:700;margin:0;}
.hp-loading{color:var(--ink-soft);font-size:13px;padding:6px 0;animation:htPulse 1.3s ease-in-out infinite;}
.hp-empty{color:var(--ink-soft);font-size:13.5px;margin:0 0 4px;}
.hp-empty p{margin:0 0 12px;}
.hp-actions{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;margin-top:auto;padding-top:12px;}
.hp-btn{display:inline-flex;align-items:center;padding:7px 16px;border-radius:999px;border:1.5px solid var(--vermillion);color:var(--vermillion);
  font-weight:700;font-size:13px;text-decoration:none;transition:background .12s,color .12s;}
.hp-btn:hover{background:var(--vermillion);color:var(--panel);}
.hp-btn:focus-visible{outline:2px solid var(--ink);outline-offset:2px;}
.hp-note{font-size:11.5px;color:var(--ink-soft);}
.hr-pattern{display:grid;grid-template-columns:1fr auto;align-items:center;gap:0 10px;padding:10px 12px;border-radius:10px;margin-bottom:10px;
  background:color-mix(in srgb, var(--pat, var(--vermillion)) 10%, transparent);border:1px solid color-mix(in srgb, var(--pat, var(--vermillion)) 30%, var(--line));}
.hr-pattern-l{grid-column:1;font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-soft);}
.hr-pattern-v{grid-column:1;font-family:'Shippori Mincho B1',serif;font-weight:700;font-size:17px;}
.hr-pattern-v small{font-family:'JetBrains Mono',monospace;font-weight:500;font-size:10.5px;color:var(--ink-soft);margin-left:8px;}
.hr-pattern-acc{grid-column:2;grid-row:1 / span 2;font-family:'Shippori Mincho B1',serif;font-weight:800;font-size:22px;color:var(--pat, var(--vermillion));font-variant-numeric:tabular-nums;}
.hr-words{list-style:none;margin:0;padding:0;}
.hr-words li{display:grid;grid-template-columns:minmax(0,1fr) 72px 40px;align-items:center;gap:10px;padding:6px 2px;border-bottom:1px solid var(--paper-dim);font-size:13.5px;}
.hr-words li:last-child{border-bottom:none;}
.hr-w{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.hr-w-jp{font-family:'Shippori Mincho B1',serif;font-weight:700;}
.hr-w-rd{font-size:11.5px;color:var(--ink-soft);margin-left:6px;}
.hr-meter{height:5px;border-radius:999px;background:var(--paper-dim);overflow:hidden;}
.hr-meter i{display:block;height:100%;background:var(--vermillion);border-radius:999px;}
.hr-acc{font-family:'JetBrains Mono',monospace;font-size:12px;color:var(--ink-soft);text-align:right;font-variant-numeric:tabular-nums;}

.hw-summary{font-family:'JetBrains Mono',monospace;font-size:11.5px;color:var(--ink-soft);margin-bottom:8px;}
.hw-chart{display:grid;grid-template-columns:repeat(7,1fr);gap:6px;align-items:end;height:92px;margin-bottom:6px;}
.hw-day{display:flex;flex-direction:column;align-items:center;gap:5px;height:100%;}
.hw-track{flex:1 1 auto;width:100%;max-width:26px;border-radius:7px;background:var(--paper-dim);display:flex;align-items:flex-end;overflow:hidden;}
.hw-track i{display:block;width:100%;background:color-mix(in srgb, var(--vermillion) 55%, var(--paper-dim));border-radius:7px;transition:height .8s cubic-bezier(.22,1,.36,1);}
.hw-day.is-goal .hw-track i{background:var(--vermillion);}
.hw-day.is-future .hw-track{opacity:.45;}
.hw-lbl{font-family:'JetBrains Mono',monospace;font-size:10px;color:var(--ink-soft);}
.hw-day.is-today .hw-lbl{color:var(--vermillion);font-weight:700;}
.hw-day.is-today .hw-track{box-shadow:0 0 0 1.5px var(--vermillion);}
.hw-plan{margin-top:12px;padding-top:12px;border-top:1px dashed var(--line);}
.hw-plan-empty p{margin:0 0 10px;font-size:13.5px;color:var(--ink-soft);}
.hw-plan-head{display:flex;justify-content:space-between;align-items:baseline;gap:10px;margin-bottom:6px;font-weight:700;font-size:13.5px;}
.hw-tasks{list-style:none;margin:0;padding:0;}
.hw-tasks li{display:grid;grid-template-columns:18px 24px minmax(0,1fr) auto;align-items:center;gap:8px;padding:5px 0;font-size:13.5px;}
.hw-check{width:18px;height:18px;border-radius:5px;border:1.5px solid var(--line);display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:800;color:var(--panel);}
.hw-tasks li.is-done .hw-check{background:var(--green);border-color:var(--green);}
.hw-tasks li.is-done .hw-task-name{color:var(--ink-soft);text-decoration:line-through;text-decoration-color:color-mix(in srgb, var(--ink-soft) 60%, transparent);}
.hw-task-ico{width:24px;height:24px;border-radius:7px;display:flex;align-items:center;justify-content:center;font-family:'Shippori Mincho B1',serif;font-weight:800;font-size:12.5px;
  color:var(--c);background:color-mix(in srgb, var(--c) 14%, transparent);}
.hw-task-name{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.hw-task-min{font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--ink-soft);}
.hw-more{display:block !important;font-size:12px;color:var(--ink-soft);padding-left:26px !important;}
@media (prefers-reduced-motion: reduce){
  .ht-bar i,.ht-ring-fg,.hw-track i{transition:none;}
  .ht-skel-line,.hp-loading{animation:none;}
  .ht-cta:hover{transform:none;}
  .profile-menu{animation:none;}
}

/* lookup page: dictionary words (every other Kanjium word, searched on the server) */
.lookup-dict-heading{padding:8px 14px 6px;font-family:'JetBrains Mono',monospace;font-size:10.5px;letter-spacing:.04em;color:var(--ink-soft);background:var(--paper-dim);border-bottom:1px solid var(--line);list-style:none;}
.lookup-dict-tag{display:inline-block;margin-left:6px;padding:0 6px;border-radius:10px;font-family:'JetBrains Mono',monospace;font-size:9.5px;line-height:15px;vertical-align:1px;color:var(--ink-soft);border:1px solid var(--line);}

/* =====================================================================
   Learn tab (#learn) — js/learn/. Uses the app tokens only, so light and
   dark mode both work; reuses .playbtn/.nextbtn/.choice/.verdict/.back-link.
   ===================================================================== */
.lx-loading{padding:40px 0;color:var(--ink-soft);font-family:'JetBrains Mono',monospace;font-size:13px;}
.lx-warn{border:1px solid var(--gold);background:var(--panel);border-radius:10px;padding:10px 14px;font-size:13px;margin-bottom:18px;}

/* landing cards */
.lx-cards{display:flex;flex-direction:column;gap:14px;}
.lx-card{display:grid;grid-template-columns:auto 1fr auto;gap:18px;align-items:center;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:20px 22px;transition:border-color .15s, box-shadow .15s;}
.lx-card:hover{border-color:color-mix(in srgb, var(--vermillion) 45%, var(--line));box-shadow:0 6px 20px var(--shadow);}
.lx-card-num{width:52px;height:52px;border-radius:14px;display:flex;align-items:center;justify-content:center;font-family:'Shippori Mincho B1',serif;font-weight:800;font-size:26px;color:var(--vermillion);background:var(--glow);border:1px solid var(--line);align-self:start;}
.lx-card.is-completed .lx-card-num{background:var(--correct-bg);color:var(--green);border-color:color-mix(in srgb, var(--green) 40%, var(--line));}
.lx-card-main{min-width:0;}
.lx-card-eyebrow{font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--gold);}
.lx-card-ja{text-transform:none;letter-spacing:.04em;}
.lx-card-title{font-family:'Shippori Mincho B1',serif;font-size:21px;font-weight:800;margin:4px 0 0;display:block;line-height:1.3;}
.lx-card-sub{font-weight:700;font-size:14px;color:var(--ink);margin-top:2px;}
.lx-card-desc{font-size:14px;color:var(--ink-soft);margin:6px 0 10px;max-width:62ch;}
.lx-card-meta{display:flex;flex-wrap:wrap;align-items:center;gap:8px;}
.lx-chip{font-family:'JetBrains Mono',monospace;font-size:11px;border:1px solid var(--line);border-radius:999px;padding:2px 10px;color:var(--ink-soft);}
.lx-status.is-in_progress{color:var(--gold);border-color:color-mix(in srgb, var(--gold) 50%, var(--line));}
.lx-status.is-completed{color:var(--green);border-color:color-mix(in srgb, var(--green) 50%, var(--line));background:var(--correct-bg);}
.lx-card-metatext{font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--ink-soft);}
.lx-card-bar{height:6px;border-radius:999px;background:var(--paper-dim);margin-top:12px;overflow:hidden;max-width:420px;}
.lx-card-bar>div{height:100%;border-radius:999px;background:linear-gradient(90deg,var(--gold),var(--vermillion));}
.lx-card.is-completed .lx-card-bar>div{background:var(--green);}
.lx-card-go{text-decoration:none;white-space:nowrap;align-self:center;}
@media(max-width:640px){
  .lx-card{grid-template-columns:auto 1fr;padding:16px;gap:12px 14px;}
  .lx-card-num{width:42px;height:42px;font-size:21px;}
  .lx-card-go{grid-column:1 / -1;justify-content:center;}
}

/* lesson header, stepper, nav */
.lx-head{border-bottom:2px solid var(--ink);padding-bottom:18px;margin-bottom:16px;}
.lx-h1{font-size:clamp(28px,5vw,42px);}
.lx-progress-track{height:6px;border-radius:999px;background:var(--paper-dim);overflow:hidden;margin-top:14px;}
.lx-progress-fill{height:100%;background:linear-gradient(90deg,var(--gold),var(--vermillion));border-radius:999px;transition:width .3s ease;}
.lx-steps{display:flex;gap:6px;overflow-x:auto;padding:4px 2px 10px;margin-bottom:22px;scrollbar-width:thin;width:0;min-width:100%;}
.lx-step{flex:0 0 auto;display:flex;align-items:center;gap:7px;padding:6px 12px 6px 6px;border:1px solid var(--line);border-radius:999px;background:var(--panel);color:var(--ink-soft);text-decoration:none;font-size:12.5px;white-space:nowrap;}
.lx-step:hover{color:var(--ink);border-color:var(--ink-soft);}
.lx-step:focus-visible{outline:2px solid var(--vermillion);outline-offset:1px;}
.lx-step-n{width:22px;height:22px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-family:'JetBrains Mono',monospace;font-size:11px;background:var(--paper-dim);}
.lx-step.is-seen .lx-step-n{background:color-mix(in srgb, var(--gold) 22%, transparent);color:var(--ink);}
.lx-step.is-current{background:var(--ink);color:var(--paper);border-color:var(--ink);}
.lx-step.is-current .lx-step-n{background:var(--vermillion);color:#fff;}
@media(max-width:620px){.lx-step:not(.is-current) .lx-step-t{display:none;}.lx-step:not(.is-current){padding:6px;}}
.lx-section{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:26px 28px 28px;}
@media(max-width:620px){.lx-section{padding:18px 16px 20px;}}
.lx-h2{margin-top:0;}
.lx-p,.lx-list,.lx-h3,.lx-callout,.lx-essay{max-width:66ch;}
.lx-p{font-size:15.5px;line-height:1.85;margin:0 0 14px;}
.lx-lede{font-family:'Shippori Mincho B1',serif;font-size:18px;font-weight:700;}
.lx-h3{font-family:'Shippori Mincho B1',serif;font-size:18px;font-weight:700;margin:26px 0 10px;}
.lx-list{font-size:15px;line-height:1.8;padding-left:1.4em;margin:0 0 16px;}
.lx-list li{margin-bottom:4px;}
.lx-small{font-size:13px;color:var(--ink-soft);margin:8px 0 0;}
.lx-inline-link{color:var(--vermillion);font-weight:700;text-decoration:none;border-bottom:1.5px solid currentColor;}
.lx-nav{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:18px;flex-wrap:wrap;}
.lx-nav a{text-decoration:none;}
.lx-where{font-family:'JetBrains Mono',monospace;font-size:12px;color:var(--ink-soft);}
.lx-nav .is-disabled{opacity:.4;cursor:not-allowed;}
.lx-save-status{font-size:12px;color:var(--vermillion);min-height:1em;margin-top:8px;text-align:right;}
@media(max-width:480px){.lx-where{order:-1;width:100%;text-align:center;}.lx-nav a,.lx-nav span.nextbtn{flex:1 1 0;min-width:0;justify-content:center;text-align:center;padding-left:10px;padding-right:10px;}}

/* callouts + essay */
.lx-callout{border-left:3px solid var(--gold);background:color-mix(in srgb, var(--gold) 7%, var(--panel));border-radius:0 10px 10px 0;padding:12px 16px;margin:18px 0;font-size:14.5px;line-height:1.75;}
.lx-callout.is-tip{border-left-color:var(--green);background:color-mix(in srgb, var(--green) 7%, var(--panel));}
.lx-callout.is-fix{border-left-color:var(--vermillion);background:color-mix(in srgb, var(--vermillion) 6%, var(--panel));}
.lx-callout-title{font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-soft);margin-bottom:4px;}
.lx-essay{border-top:2px solid var(--ink);padding-top:18px;}
.lx-essay-eyebrow{font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--gold);margin-bottom:12px;}
.lx-essay p{font-family:'Shippori Mincho B1',serif;font-size:17px;line-height:1.95;margin:0 0 18px;}
.lx-essay p:first-of-type{font-size:18.5px;font-weight:700;}

/* example cards, mora tiles */
.lx-grid2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:14px 0 18px;}
.lx-grid3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:14px 0 18px;}
@media(max-width:700px){.lx-grid3{grid-template-columns:1fr 1fr;}}
@media(max-width:520px){.lx-grid2,.lx-grid3{grid-template-columns:1fr;}}
.lx-example{background:var(--paper);border:1px solid var(--line);border-radius:12px;padding:14px 14px 12px;margin:12px 0;display:flex;flex-direction:column;gap:8px;min-width:0;}
.lx-grid2 .lx-example,.lx-grid3 .lx-example{margin:0;}
.lx-wordhead{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px;}
.lx-jp{font-family:'Shippori Mincho B1',serif;font-weight:800;font-size:26px;line-height:1.2;}
.lx-kanji{font-family:'Shippori Mincho B1',serif;font-size:16px;color:var(--ink-soft);}
.lx-romaji{font-family:'JetBrains Mono',monospace;font-size:12px;color:var(--ink-soft);}
.lx-meaning{font-size:13px;color:var(--ink-soft);flex-basis:100%;}
.lx-count-badge,.lx-type-badge{font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--vermillion);border:1px solid color-mix(in srgb, var(--vermillion) 45%, var(--line));border-radius:999px;padding:1px 9px;}
.lx-tiles{display:flex;flex-wrap:wrap;gap:6px;}
.lx-tile{min-width:44px;border:1.5px solid var(--line);border-radius:10px;background:var(--panel);display:flex;flex-direction:column;align-items:center;padding:6px 8px 4px;}
.lx-tile-kana{font-family:'Shippori Mincho B1',serif;font-weight:700;font-size:21px;line-height:1.2;}
.lx-tile-n{font-family:'JetBrains Mono',monospace;font-size:10px;color:var(--gold);}
.lx-rhythm{font-size:13px;color:var(--ink-soft);}
.lx-pair{margin:10px 0 20px;}
.lx-pair-title{font-weight:700;font-size:14.5px;margin-bottom:4px;}
.lx-tip{font-size:14px;line-height:1.75;background:var(--paper-dim);border-radius:10px;padding:10px 14px;}

/* tables */
/* width:0 + min-width:100% keeps the table's min width from widening the page on phones; it scrolls inside instead */
.lx-table-wrap{overflow-x:auto;margin:16px 0 8px;border:1px solid var(--line);border-radius:12px;width:0;min-width:100%;}
.lx-table{width:100%;border-collapse:collapse;font-size:14px;min-width:560px;}
.lx-table caption{text-align:left;font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-soft);padding:10px 12px 0;}
.lx-table th,.lx-table td{padding:9px 12px;text-align:left;border-bottom:1px solid var(--line);vertical-align:top;}
.lx-table th{font-size:12px;color:var(--ink-soft);font-weight:700;}
.lx-table tr:last-child td{border-bottom:none;}
.lx-table .is-num{text-align:right;font-variant-numeric:tabular-nums;}
.lx-table [lang="ja"]{font-family:'Shippori Mincho B1',serif;font-weight:700;}

/* pitch graphs */
.lpg{margin:0;display:flex;flex-direction:column;align-items:center;}
.lpg-svg{max-width:100%;height:auto;overflow:visible;}
.lpg-guide{stroke:var(--line);stroke-width:1;stroke-dasharray:2 4;}
.lpg-axis{font-family:'JetBrains Mono',monospace;font-size:10px;fill:var(--ink-soft);}
.lpg-line{fill:none;stroke:var(--vermillion);stroke-width:3;stroke-linecap:round;stroke-linejoin:round;}
.lpg-line-particle{stroke-dasharray:4 5;stroke-width:2.5;opacity:.85;}
.lpg-divider{stroke:var(--ink-soft);stroke-width:1;stroke-dasharray:3 3;opacity:.5;}
.lpg-dot{fill:var(--ink);stroke:var(--ink);stroke-width:1.5;}
.lpg-dot-particle{fill:var(--panel);stroke:var(--ink-soft);stroke-width:2;}
.lpg-drop{fill:var(--vermillion);}
.lpg-kana{font-family:'Shippori Mincho B1',serif;font-size:15px;font-weight:700;fill:var(--ink);text-anchor:middle;}
.lpg-kana-particle{fill:var(--ink-soft);font-weight:500;}
.lpg-caption{font-size:12.5px;color:var(--ink-soft);margin-top:4px;text-align:center;}
.lx-figure{margin:16px 0 20px;}
.lx-figure > .lx-wordhead{margin-bottom:8px;}
.lx-graph-panes{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px;}
.lx-graph-pane{background:var(--paper);border:1px solid var(--line);border-radius:12px;padding:12px 12px 12px;display:flex;flex-direction:column;align-items:center;gap:6px;}
.lx-pane-label{font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-soft);align-self:flex-start;}
.lx-contour{font-family:'JetBrains Mono',monospace;font-size:12.5px;font-weight:700;color:var(--ink);letter-spacing:.04em;text-align:center;}
.lx-contrast .lx-example{align-items:center;}
.lx-contrast .lx-wordhead{justify-content:center;text-align:center;}
.is-diagram{align-items:center;}

/* audio */
.lx-audio{display:inline-flex;align-items:center;gap:10px;flex-wrap:wrap;}
.lx-play{display:inline-flex;align-items:center;gap:7px;background:var(--ink);color:var(--paper);border:none;border-radius:999px;padding:8px 16px;font-family:'Zen Maru Gothic',sans-serif;font-weight:700;font-size:13.5px;cursor:pointer;}
.lx-play:hover{background:var(--ink-soft);}
.lx-play:focus-visible{outline:2px solid var(--vermillion);outline-offset:2px;}
.lx-play[aria-busy="true"]{opacity:.6;cursor:progress;}
.lx-play svg{width:14px;height:14px;}
.lx-audio.is-small .lx-play{padding:6px 13px;font-size:12.5px;}
.lx-audio-status{font-size:12px;color:var(--ink-soft);}
.lx-audio-status.is-error{color:var(--vermillion);}
.lx-audio-row{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin:6px 0 4px;}

/* exercises */
.lx-exercise{margin:22px 0 6px;}
.lx-set{border:1.5px solid var(--ink);border-radius:var(--radius);background:var(--paper);overflow:hidden;}
.lx-top{display:flex;justify-content:space-between;align-items:center;gap:8px;flex-wrap:wrap;padding:10px 16px;border-bottom:1px solid var(--line);background:var(--panel);font-family:'JetBrains Mono',monospace;font-size:11.5px;color:var(--ink-soft);}
.lx-title{font-weight:700;color:var(--ink);letter-spacing:.06em;text-transform:uppercase;}
.lx-stage{padding:18px 18px 20px;}
@media(max-width:520px){.lx-stage{padding:14px 12px 16px;}}
.lx-group{font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--gold);margin-bottom:6px;}
.lx-synth{display:inline-block;font-family:'JetBrains Mono',monospace;font-size:10.5px;color:var(--ink-soft);border:1px dashed var(--ink-soft);border-radius:999px;padding:2px 10px;margin-bottom:8px;}
.lx-prompt{font-family:'Shippori Mincho B1',serif;font-size:18px;font-weight:700;margin:0 0 10px;outline:none;}
.lx-q-jp{font-size:1.25em;}
.lx-body{margin:6px 0 10px;}
.lx-q-word{font-family:'Shippori Mincho B1',serif;font-size:26px;font-weight:800;text-align:center;margin:4px 0 6px;}
.lx-q-kanji{font-size:17px;color:var(--ink-soft);font-weight:700;}
.lx-q-meaning{display:block;font-family:'Zen Maru Gothic',sans-serif;font-size:13px;font-weight:400;color:var(--ink-soft);}
.lx-opts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:14px;}
.lx-opts.is-graph{grid-template-columns:repeat(auto-fit,minmax(150px,1fr));}
@media(max-width:520px){.lx-opts:not(.is-graph){grid-template-columns:1fr;}}
.lx-opt{font-family:'Zen Maru Gothic',sans-serif;font-size:14px;line-height:1.5;color:var(--ink);padding:12px 12px 10px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;min-height:52px;}
.lx-opt:focus-visible{outline:2px solid var(--vermillion);outline-offset:2px;}
.lx-opt .romaji{display:block;font-family:'JetBrains Mono',monospace;font-size:10.5px;color:var(--ink-soft);font-weight:400;}
.lx-opt-label{font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--ink-soft);}
.lx-feedback:empty{display:none;}
.lx-feedback{margin-top:16px;border-top:1px dashed var(--line);padding-top:14px;}
.lx-expl{font-size:14.5px;line-height:1.75;}
.lx-reveal{margin-top:10px;}
.lx-actions{display:flex;flex-wrap:wrap;gap:10px;justify-content:flex-end;margin-top:14px;}
.lx-actions a{text-decoration:none;}
.lx-ghost{border-color:var(--line);color:var(--ink-soft);}
.lx-summary{text-align:center;padding:10px 0 4px;}
.lx-sum-score{font-family:'Shippori Mincho B1',serif;font-weight:800;font-size:44px;line-height:1.1;}
.lx-sum-score small{font-size:20px;color:var(--ink-soft);}
.lx-sum-text{color:var(--ink-soft);font-size:14px;}
.lx-summary .lx-actions{justify-content:center;}
.lx-mora-row{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin:14px 0;}
.lx-mcell{display:flex;flex-direction:column;align-items:center;gap:6px;padding:8px;border:1.5px solid var(--line);border-radius:12px;background:var(--panel);}
.lx-mcell.is-particle{border-style:dashed;}
.lx-mcell.is-right{border-color:var(--green);background:var(--correct-bg);}
.lx-mcell.is-wrong{border-color:var(--vermillion);background:var(--wrong-bg);}
.lx-mkana{font-family:'Shippori Mincho B1',serif;font-weight:800;font-size:24px;}
.lx-mseg{display:flex;flex-direction:column;gap:4px;}
.lx-mbtn{border:1.5px solid var(--line);background:var(--paper);color:var(--ink);border-radius:8px;padding:4px 10px;font-size:12px;font-weight:700;cursor:pointer;min-width:52px;}
.lx-mbtn[aria-pressed="true"]{background:var(--ink);color:var(--paper);border-color:var(--ink);}
.lx-mbtn:focus-visible{outline:2px solid var(--vermillion);outline-offset:1px;}
.lx-check{margin:4px auto 0;}
.lx-check[disabled]{opacity:.45;cursor:default;}

/* completion */
.lx-complete{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:30px 28px;text-align:center;}
.lx-complete-mark{width:64px;height:64px;margin:0 auto 10px;border-radius:50%;background:var(--correct-bg);color:var(--green);display:flex;align-items:center;justify-content:center;font-size:30px;font-weight:800;border:2px solid var(--green);}
.lx-complete .lx-h2{justify-content:center;}
.lx-complete-summary{text-align:left;max-width:56ch;margin:16px auto 0;}
.lx-complete-actions{justify-content:center;}
.lx-finish-inline{text-decoration:none;}
@media (prefers-reduced-motion: reduce){.lx-card,.lx-progress-fill{transition:none;}}

/* ---------------- spaced repetition (FSRS) review cards: js/srs/ ----------------
   Reuses .quizpanel/.choice/.playbtn/.nextbtn/.ob-chip/.ob-progress; only
   the review-specific parts are new. Works in light + dark via the tokens. */
.srs-top{flex-wrap:wrap;}
.srs-top-right{display:flex;align-items:center;gap:10px;margin-left:auto;}
.srs-left{font-family:'JetBrains Mono',monospace;font-size:11.5px;color:var(--ink-soft);white-space:nowrap;}
.srs .nchoice{color:var(--ink);font-family:inherit;}
.srs .ob-progress{margin-bottom:14px;}
.srs-chip{padding:3px 11px;}
.srs-chip.is-new{border-color:var(--gold);color:var(--gold);}
.srs-card{text-align:center;}
.srs-prompt{font-weight:700;font-size:15px;margin:0 0 4px;}
.srs-newnote{font-size:12.5px;color:var(--gold);margin:0 0 6px;}
.srs-word{font-family:'Shippori Mincho B1',serif;font-size:clamp(34px,7vw,46px);font-weight:700;margin:12px 0 2px;letter-spacing:.04em;}
.srs-ending{color:var(--ink-soft);font-size:.6em;margin-left:2px;}
.srs-reading{margin-bottom:4px;}
.srs-playrow{flex-direction:row;justify-content:center;flex-wrap:wrap;margin:10px 0 4px;}
.srs-playrow .ttsnote{flex-basis:100%;text-align:center;}
.srs-playrow .ttsnote:empty{display:none;}
.srs-sentence-btn{background:var(--ink-soft);}
.srs-choices{margin-top:14px;}
.srs-choice{color:var(--ink);font-family:inherit;}
.srs-choice[disabled]{opacity:.55;}
.srs-choice.correct[disabled],.srs-choice.wrong[disabled]{opacity:1;}
.srs-hint{font-size:12.5px;margin-top:10px;}
.srs-keys{font-family:'JetBrains Mono',monospace;font-size:10.5px;color:var(--ink-soft);opacity:.7;margin:14px 0 0;}
@media (hover:none){.srs-keys{display:none;}}
.srs-step2{margin-top:16px;}
.srs-card .verdict{margin:8px 0 0;}
.srs-answer{margin-top:16px;border-top:1px dashed var(--line);padding-top:14px;}
.srs-graph svg{max-width:100%;height:auto;}
.srs-pattern{margin-top:4px;font-size:15px;}
.srs-pattern .romaji{font-family:'JetBrains Mono',monospace;font-size:12px;color:var(--ink-soft);}
.srs-alts{display:block;font-size:12px;color:var(--ink-soft);}
.srs-meaning{margin:10px auto 0;max-width:52ch;font-size:15px;}
.srs-meaning .label,.srs-example .label{display:block;font-family:'JetBrains Mono',monospace;font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--gold);}
.srs-example{margin:12px auto 0;max-width:52ch;font-size:14px;}
.srs-example-jp{font-family:'Shippori Mincho B1',serif;}
.srs-example-en{font-size:12.5px;color:var(--ink-soft);}
/* Tatoeba author-credit link under example sentences (CC BY 2.0 FR) */
.sentence-credit{font-size:11px;color:var(--ink-soft);text-decoration:none;opacity:.8;}
.sentence-credit:hover{text-decoration:underline;opacity:1;}
.sentence-credit-row{margin-top:4px;}
.srs-rate{margin-top:18px;border-top:1px dashed var(--line);padding-top:14px;text-align:left;}
.srs-rate[hidden]{display:none;}
.srs-rate-title{font-weight:700;font-size:14px;margin-bottom:8px;}
.srs-rate-row{display:grid;grid-template-columns:96px 1fr;align-items:center;gap:6px 12px;margin:8px 0;}
.srs-rate-label{font-weight:700;font-size:13px;}
.srs-rate-btns{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;}
.srs-rate-btn{display:flex;flex-direction:column;align-items:center;gap:1px;background:var(--paper);border:1.5px solid var(--line);border-radius:10px;padding:8px 4px 6px;cursor:pointer;color:var(--ink);font-family:'Zen Maru Gothic',sans-serif;transition:border-color .12s ease,transform .1s ease;}
.srs-rate-btn b{font-size:14px;}
.srs-rate-btn small{font-size:10.5px;color:var(--ink-soft);}
.srs-rate-btn em{font-style:normal;font-family:'JetBrains Mono',monospace;font-size:10.5px;color:var(--ink-soft);}
.srs-rate-btn:hover:not([disabled]){transform:translateY(-1px);}
.srs-rate-btn:active:not([disabled]){transform:scale(.97);}
.srs-rate-btn.r1:hover:not([disabled]),.srs-rate-btn.r1.is-on{border-color:var(--vermillion);background:var(--wrong-bg);}
.srs-rate-btn.r2:hover:not([disabled]),.srs-rate-btn.r2.is-on{border-color:var(--gold);}
.srs-rate-btn.r3:hover:not([disabled]),.srs-rate-btn.r3.is-on{border-color:var(--green);background:var(--correct-bg);}
.srs-rate-btn.r4:hover:not([disabled]),.srs-rate-btn.r4.is-on{border-color:var(--ink);}
.srs-rate-btn[disabled]{opacity:.35;cursor:default;}
.srs-rate-btn.is-on[disabled]{opacity:1;}
.srs-rate-note{grid-column:2;font-size:12px;color:var(--ink-soft);margin:0;}
.srs-rate-help{font-size:11.5px;color:var(--ink-soft);margin:10px 0 0;line-height:1.6;}
.srs-status{margin-top:10px;font-size:13px;}
.srs-rate .nextrow{justify-content:flex-end;}
@media(max-width:560px){
  .srs-rate-row{grid-template-columns:1fr;}
  .srs-rate-note{grid-column:1;}
  .srs-rate-btns{gap:6px;}
  .srs-rate-btn small{display:none;}
}
.srs-done{text-align:center;}
.srs-done-title{justify-content:center;margin-bottom:6px;}
.srs-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:16px auto 6px;max-width:460px;}
.srs-stat{background:var(--paper);border:1px solid var(--line);border-radius:10px;padding:10px 6px;display:flex;flex-direction:column;}
.srs-stat b{font-family:'JetBrains Mono',monospace;font-size:24px;}
.srs-stat span{font-size:11.5px;color:var(--ink-soft);}
.srs-done .ob-row{justify-content:center;}
/* due banner on the quiz / memory / pronunciation pages */
.srs-banner{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;border:1px dashed var(--line);border-radius:10px;padding:10px 14px;margin-bottom:16px;}
.srs-banner[hidden],.srs-root[hidden],.srs-pron-bar[hidden]{display:none;}
.srs-banner.has-due{border-style:solid;border-color:var(--gold);background:var(--paper);}
.srs-banner-text{display:flex;flex-direction:column;}
.srs-banner-text b{font-size:14px;}
.srs-banner-text span{font-size:11.5px;color:var(--ink-soft);}
.srs-banner-btn{padding:8px 18px;font-size:13.5px;}
.srs-root .quizpanel{border:none;padding:0;background:none;}
.srs-pron-bar{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;margin-bottom:14px;}
.srs-pron-bar > span{display:flex;align-items:center;gap:10px;}
/* Daily Training home (word levels) */
.srs-daily-stats{grid-template-columns:repeat(4,1fr);}
@media(max-width:760px){.srs-daily-stats{grid-template-columns:1fr 1fr;}}
.srs-daily-stats .ob-score-value{font-size:28px;}
.srs-setting{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:18px;border-top:1px dashed var(--line);padding-top:14px;font-size:13.5px;}
.srs-setting label{font-weight:700;}
.srs-setting input{width:74px;font-family:'JetBrains Mono',monospace;font-size:14px;padding:6px 8px;border:1.5px solid var(--line);border-radius:8px;background:var(--paper);color:var(--ink);}
.srs-setting input:focus{outline:none;border-color:var(--gold);}
.srs-setting-msg{font-size:12px;color:var(--ink-soft);}
@media (prefers-reduced-motion: reduce){.srs-rate-btn{transition:none;}}

/* ======================================================================
   XP / leaderboard periods / achievements (js/components/xp.js,
   js/pages/achievements.js, leaderboard in js/pages/stats.js)
   ====================================================================== */
.xp-toast{
  position:fixed;left:50%;bottom:24px;z-index:9000;transform:translate(-50%,8px);opacity:0;pointer-events:none;
  display:flex;align-items:center;gap:8px;flex-wrap:wrap;justify-content:center;max-width:calc(100vw - 32px);
  padding:8px 16px;border-radius:999px;background:var(--ink);color:var(--paper);
  font-family:'JetBrains Mono',monospace;font-size:13px;box-shadow:0 8px 24px var(--shadow);
  transition:opacity .18s ease, transform .18s ease;
}
.xp-toast b{color:var(--gold);font-weight:700;}
.xp-toast.show{opacity:1;transform:translate(-50%,0);}
.xp-toast.is-big{font-size:13.5px;padding:10px 18px;}
.xp-toast-sep{opacity:.5;}
@media (prefers-reduced-motion: reduce){ .xp-toast{transition:none;transform:translate(-50%,0);} }

.xp-level{display:flex;align-items:center;gap:14px;min-width:0;}
.xp-level-badge{
  flex:none;width:46px;height:46px;border-radius:50%;display:grid;place-items:center;
  font-family:'JetBrains Mono',monospace;font-weight:700;font-size:18px;color:var(--gold);
  border:2px solid var(--gold);background:var(--glow);
}
.xp-level-main{flex:1;min-width:0;}
.xp-level-row{display:flex;justify-content:space-between;align-items:baseline;gap:10px;font-size:15px;}
.xp-level-total{font-family:'JetBrains Mono',monospace;font-size:12.5px;color:var(--ink-soft);font-variant-numeric:tabular-nums;}
.xp-bar{height:8px;border-radius:999px;background:var(--paper-dim);overflow:hidden;margin:6px 0 4px;}
.xp-bar i{display:block;height:100%;border-radius:999px;background:linear-gradient(90deg,var(--gold),var(--vermillion));transition:width .9s cubic-bezier(.22,1,.36,1);}
.xp-level-next{font-size:12px;color:var(--ink-soft);}

/* Home card */
.home-progress{margin:-18px 0 34px;}
.hx-card{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:18px 20px;display:flex;flex-direction:column;gap:16px;}
.hx-card.is-loading{min-height:92px;}
.hx-facts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;}
@media(max-width:720px){.hx-facts{grid-template-columns:repeat(2,minmax(0,1fr));}}
.hx-fact{display:flex;flex-direction:column;gap:3px;padding:10px 12px;border-radius:10px;background:var(--paper);border:1px solid var(--paper-dim);min-width:0;}
.hx-fact.is-done{border-color:var(--green);}
.hx-fact-l{font-family:'JetBrains Mono',monospace;font-size:10.5px;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-soft);}
.hx-fact-v{font-weight:800;font-size:20px;font-variant-numeric:tabular-nums;}
.hx-fact-v small{font-size:12px;font-weight:600;color:var(--ink-soft);margin-left:3px;}
.hx-fact-s{font-size:12px;color:var(--ink-soft);text-decoration:none;}
a.hx-fact-s:hover{color:var(--vermillion);}
.hx-goal-bar{display:block;height:5px;border-radius:999px;background:var(--paper-dim);overflow:hidden;margin-top:3px;}
.hx-goal-bar i{display:block;height:100%;background:var(--vermillion);border-radius:999px;}
.hx-fact.is-done .hx-goal-bar i{background:var(--green);}
.hx-ach .hp-head{margin-bottom:8px;}

/* Achievements */
.ach-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:10px;}
.ach-grid-compact{grid-template-columns:repeat(auto-fill,minmax(200px,1fr));}
.ach-card{display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto auto;column-gap:10px;row-gap:2px;
  padding:12px;border-radius:12px;border:1px solid var(--line);background:var(--paper);opacity:.72;}
.ach-card.is-earned{opacity:1;border-color:var(--gold);background:linear-gradient(180deg,var(--glow),transparent);}
.ach-icon{grid-row:1 / span 3;font-size:24px;line-height:1;filter:grayscale(1);}
.ach-card.is-earned .ach-icon{filter:none;}
.ach-title{font-weight:700;font-size:14px;}
.ach-desc{font-size:12px;color:var(--ink-soft);line-height:1.4;}
.ach-state{display:flex;align-items:center;gap:6px;margin-top:4px;font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--ink-soft);}
.ach-card.is-earned .ach-state{color:var(--gold);}
.ach-bar{flex:1;height:4px;border-radius:999px;background:var(--paper-dim);overflow:hidden;}
.ach-bar i{display:block;height:100%;background:var(--gold);}
.ach-count{flex:none;font-variant-numeric:tabular-nums;}

/* Progress page panel */
.stats-progression{display:flex;flex-direction:column;gap:14px;margin-top:22px;}
.sp-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;}
@media(max-width:720px){.sp-grid{grid-template-columns:1fr;}}
.sp-panel{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:18px 20px;min-width:0;}
.sp-panel h3{margin:0 0 12px;font-size:16px;}
.sp-panel h3 small{font-family:'JetBrains Mono',monospace;font-weight:500;font-size:11px;color:var(--ink-soft);margin-left:6px;}
.sp-xp-periods{display:flex;flex-wrap:wrap;gap:6px 18px;margin-top:12px;font-size:13px;color:var(--ink-soft);}
.sp-xp-periods b{color:var(--ink);font-variant-numeric:tabular-nums;}
.pw-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:12px;}
.pw-stats div{display:flex;flex-direction:column;}
.pw-stats b{font-size:20px;font-variant-numeric:tabular-nums;}
.pw-stats b small{font-size:12px;color:var(--ink-soft);}
.pw-stats span{font-size:11.5px;color:var(--ink-soft);}
.pw-bars{display:grid;grid-template-columns:repeat(7,1fr);gap:6px;height:84px;}
.pw-day{display:flex;flex-direction:column;align-items:center;gap:4px;min-width:0;}
.pw-bar{flex:1;width:100%;max-width:26px;display:flex;align-items:flex-end;background:var(--paper-dim);border-radius:6px;overflow:hidden;}
.pw-bar i{display:block;width:100%;background:var(--gold);border-radius:6px 6px 0 0;min-height:0;}
.pw-day.is-goal .pw-bar i{background:var(--green);}
.pw-label{font-family:'JetBrains Mono',monospace;font-size:10.5px;color:var(--ink-soft);}
.pm{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;}
@media(max-width:480px){.pm{grid-template-columns:repeat(2,minmax(0,1fr));}}
.pm-cell{display:flex;flex-direction:column;align-items:center;padding:10px 6px;border-radius:10px;background:var(--paper);border:1px solid var(--paper-dim);}
.pm-cell b{font-size:20px;font-variant-numeric:tabular-nums;}
.pm-cell span{font-size:11.5px;color:var(--ink-soft);}
.pm-mastered{border-color:var(--gold);}
.pm-mastered b{color:var(--gold);}
.pm-note{margin:10px 0 0;font-size:12px;color:var(--ink-soft);line-height:1.5;}

/* Leaderboard periods */
.lb-controls{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px 16px;}
.lb-controls .particle-toggle{margin-bottom:0;}
.lb-lede{margin:0;font-size:13px;color:var(--ink-soft);}
.lb-me-card{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 14px;padding:12px 16px;border-radius:12px;
  background:var(--glow);border:1px solid var(--line);border-left:3px solid var(--vermillion);font-size:14px;}
.lb-me-rank{font-family:'JetBrains Mono',monospace;font-weight:700;font-size:20px;color:var(--vermillion);}
.lb-me-xp{font-family:'JetBrains Mono',monospace;font-weight:700;}
.lb-me-clock{margin-left:auto;font-family:'JetBrains Mono',monospace;font-size:12px;color:var(--ink-soft);}
.lb-table-wrap{overflow-x:auto;}
.lb-xp{font-family:'JetBrains Mono',monospace;font-weight:700;font-variant-numeric:tabular-nums;}
.lb-more{align-self:center;background:var(--paper);border:1.5px solid var(--line);border-radius:999px;padding:8px 20px;
  font-weight:700;font-size:13px;color:var(--ink-soft);cursor:pointer;}
.lb-more:hover{border-color:var(--gold);color:var(--ink);}
@media(max-width:480px){
  .lb-col-words,.lb-words{display:none;}
  .leaderboard-table th,.leaderboard-table td{padding:10px 8px;}
  .lb-me-clock{margin-left:0;width:100%;}
}
.particle-btn:focus-visible,.lb-more:focus-visible{outline:2px solid var(--gold);outline-offset:2px;}