/* ============ TOKENS ============ */
:root{
  --bg:#FFFCF7; --bg-2:#F6F1E6;
  --surface:#FFFFFF; --surface-2:#F6F3EE;
  --ink:#1C1B33; --ink-soft:#4A4870; --muted:#726F97;
  --border:#EAE4D8; --ring:#DCD8CC;
  --accent:#FF6B35; --accent-strong:#C8601A; --accent-soft:#FFE3D5; --accent-ink:#C8601A; --accent-text:#9E4A10;
  --success:#16C47F; --success-soft:#DAFCEC; --success-ink:#0E9B62;
  --danger:#F04A5C; --danger-soft:#FEE2E5; --danger-ink:#C41F32;
  --gold:#FFB020; --gold-soft:#FFF3D6; --gold-ink:#C7860A;
  --info:#3E9BE8; --info-soft:#DCEEFC; --info-ink:#1E76BE;
  --disabled-bg:#F0EEE6; --disabled-edge:#E2DFD3; --disabled-ink:#B8B4CC;
  --staff-line:#2B2A55; --staff-line-soft:#9A93A0;
  --shadow-sm:0 2px 8px rgba(30,22,10,.08);
  --shadow-md:0 10px 28px rgba(30,22,10,.12);
  --shadow-lg:0 20px 48px rgba(30,22,10,.18);
  --radius-sm:12px; --radius-md:20px; --radius-lg:32px;
  --font-display:'Baloo 2',system-ui,sans-serif;
  --font-body:'Hanken Grotesk',system-ui,-apple-system,sans-serif;
  --font-mono:'JetBrains Mono',ui-monospace,'SF Mono',monospace;
  --font-music:'Noto Music','Bravura Text',serif;
  color-scheme: light;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#1A1611; --bg-2:#221C15;
    --surface:#241F1A; --surface-2:#2C251D;
    --ink:#FBF6EE; --ink-soft:#D9D0C1; --muted:#A89D89;
    --border:#443A2C; --ring:#55493A;
    --accent:#FF9066; --accent-strong:#FFCBA8; --accent-soft:#3B2118; --accent-ink:#FFCBA8; --accent-text:#FFCBA8;
    --success:#3ED2A2; --success-soft:#123829; --success-ink:#9CF0D4;
    --danger:#FF7590; --danger-soft:#3A1626; --danger-ink:#FFC2CE;
    --gold:#F0C05C; --gold-soft:#3A2E10; --gold-ink:#FFDD9E;
    --info:#6FB0FF; --info-soft:#122A47; --info-ink:#CFE6FF;
    --disabled-bg:#2C271F; --disabled-edge:#3A342A; --disabled-ink:#6E6656;
    --staff-line:#EDE7D8; --staff-line-soft:#8A8068;
    --shadow-sm:0 2px 8px rgba(0,0,0,.35);
    --shadow-md:0 10px 28px rgba(0,0,0,.45);
    --shadow-lg:0 20px 55px rgba(0,0,0,.55);
    color-scheme: dark;
  }
}
:root[data-theme="dark"]{
  --bg:#1A1611; --bg-2:#221C15;
  --surface:#241F1A; --surface-2:#2C251D;
  --ink:#FBF6EE; --ink-soft:#D9D0C1; --muted:#A89D89;
  --border:#443A2C; --ring:#55493A;
  --accent:#FF9066; --accent-strong:#FFCBA8; --accent-soft:#3B2118; --accent-ink:#FFCBA8; --accent-text:#FFCBA8;
  --success:#3ED2A2; --success-soft:#123829; --success-ink:#9CF0D4;
  --danger:#FF7590; --danger-soft:#3A1626; --danger-ink:#FFC2CE;
  --gold:#F0C05C; --gold-soft:#3A2E10; --gold-ink:#FFDD9E;
  --info:#6FB0FF; --info-soft:#122A47; --info-ink:#CFE6FF;
  --disabled-bg:#2C271F; --disabled-edge:#3A342A; --disabled-ink:#6E6656;
  --staff-line:#EDE7D8; --staff-line-soft:#8A8068;
  --shadow-sm:0 2px 8px rgba(0,0,0,.35);
  --shadow-md:0 10px 28px rgba(0,0,0,.45);
  --shadow-lg:0 20px 55px rgba(0,0,0,.55);
  color-scheme: dark;
}

*{box-sizing:border-box;}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:var(--font-body);
  background-image:radial-gradient(circle at 12% 8%, var(--bg-2), transparent 45%),
                    radial-gradient(circle at 90% 85%, var(--bg-2), transparent 40%);
  min-height:100vh;
}
h1,h2,h3{font-family:var(--font-display); font-weight:700; letter-spacing:-.01em; text-wrap:balance; margin:0;}
button{font-family:inherit; color:inherit;}
.num{font-family:var(--font-mono); font-variant-numeric:tabular-nums;}
[hidden]{display:none!important;}
:focus-visible{outline:2.5px solid var(--accent); outline-offset:2px; border-radius:6px;}

.app{max-width:1080px; margin:0 auto; padding:20px 20px 56px;}

/* ---------- Top bar ---------- */
.topbar{display:flex; align-items:center; gap:14px; padding:6px 4px 22px; flex-wrap:wrap;}
.brand{display:flex; align-items:center; gap:10px;}
.brand-mark{display:block; height:40px; width:auto; color:var(--ink);}
.brand-dot{fill:var(--accent);}
.mode-pill{
  font-family:var(--font-mono); font-size:12px; letter-spacing:.06em; text-transform:uppercase;
  color:var(--accent-text); background:var(--accent-soft); border:2px solid var(--border);
  padding:5px 12px; border-radius:999px;
}
.topbar-spacer{flex:1;}
.icon-btn{
  width:42px; height:42px; border-radius:12px; border:2px solid var(--border);
  background:var(--surface); color:var(--ink-soft); display:flex; align-items:center; justify-content:center;
  cursor:pointer; box-shadow:0 3px 0 var(--border); transition:transform .1s ease, color .12s ease, box-shadow .1s ease, border-color .12s ease;
}
.icon-btn:hover{color:var(--accent); border-color:var(--accent); transform:translateY(-2px); box-shadow:0 5px 0 var(--accent-ink);}
.icon-btn:active{transform:translateY(1px); box-shadow:0 1px 0 var(--accent-ink);}
.icon-btn svg{width:20px; height:20px;}

/* ---------- Screens ---------- */
.screen{display:none;}
.screen.active{display:block;}

/* ---------- Menu ---------- */
.hero{
  background:linear-gradient(155deg, var(--surface) 0%, var(--surface-2) 100%);
  border:2px solid var(--border); border-radius:var(--radius-lg); box-shadow:var(--shadow-md);
  padding:34px 34px 28px; margin-bottom:22px; position:relative; overflow:hidden;
}
.hero-staff{width:100%; height:auto; display:block; margin-bottom:6px;}
.hero h1{font-size:clamp(28px,4vw,40px); font-weight:800; margin-bottom:8px;}
.hero p{color:var(--muted); font-size:15.5px; max-width:56ch; line-height:1.55; margin:0;}

.mode-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:16px; margin-bottom:20px;}
@media (max-width:520px){.mode-grid{grid-template-columns:1fr;}}
/* ---- The launcher, grouped by what you'd be doing ----
   Seven peer cards asked the same question seven times over. Grouping them by
   verb answers it once: one card to learn from, four to practise with, and
   the graded ones set apart — Test in particular read as a seventh way to
   play when it is the one card that is a bad idea to open first. */
.mode-section{margin-bottom:6px;}
.mode-section-head{display:flex; align-items:baseline; gap:10px; margin:0 2px 10px; flex-wrap:wrap;}
.msh-label{font-size:11px; text-transform:uppercase; letter-spacing:.09em; font-weight:800; color:var(--accent-text);}
.msh-note{font-size:12.5px; color:var(--muted);}
/* A single card in a group shouldn't stretch to the full width of four. */
.mode-grid.one{grid-template-columns:repeat(auto-fit,minmax(200px,340px));}
.mode-card{
  text-align:left; cursor:pointer; border:2.5px solid var(--border); background:var(--surface);
  border-radius:var(--radius-md); padding:20px; box-shadow:0 4px 0 var(--border);
  display:flex; flex-direction:column; gap:10px; transition:transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}
.mode-card:hover{transform:translateY(-3px); box-shadow:0 7px 0 var(--accent-ink); border-color:var(--accent);}
.mode-card:active{transform:translateY(1px); box-shadow:0 2px 0 var(--accent-ink);}
.mode-card .tag{
  align-self:flex-start; font-family:var(--font-mono); font-size:11px; letter-spacing:.06em; text-transform:uppercase;
  padding:3px 9px; border-radius:999px;
}
.mode-card.lessons .tag{background:var(--gold-soft); color:var(--accent-text);}
.mode-card.training .tag{background:var(--success-soft); color:var(--success-ink);}
.mode-card.songs .tag{background:var(--info-soft); color:var(--info-ink);}
.mode-card.arcade .tag{background:var(--accent-soft); color:var(--accent-text);}
.mode-card.test .tag{background:var(--danger-soft); color:var(--danger-ink);}
.mode-card.compose .tag{background:var(--info-soft); color:var(--info-ink);}
.mode-card.pulse .tag{background:var(--gold-soft); color:var(--accent-text);}
.mode-card.dictation .tag{background:var(--info-soft); color:var(--info-ink);}
.mode-card h3{font-size:20px; color:var(--ink);}
.mode-card p{margin:0; color:var(--muted); font-size:13.5px; line-height:1.5;}
.mode-card ul{margin:0; padding-left:18px; color:var(--ink-soft); font-size:12.5px; line-height:1.7;}
.mode-card .best{margin-top:auto; font-size:12px; color:var(--muted); font-family:var(--font-mono); padding-top:6px; border-top:1px dashed var(--border);}

/* .settings-row / .toggle-field / .level-field / .level-caption are gone with
   the home page's settings panel. .level-switch and .level-btn below stay —
   they're the stage range control and the Appearance picker. */
.level-switch{display:flex; background:var(--surface-2); border:2px solid var(--border); border-radius:12px; padding:3px; gap:3px;}
.level-btn{
  border:none; background:transparent; cursor:pointer; font-family:var(--font-body); font-weight:700;
  font-size:12.5px; color:var(--muted); padding:6px 12px; border-radius:9px;
  display:flex; flex-direction:column; align-items:center; line-height:1.3; transition:background .12s ease, color .12s ease;
}
.level-btn span{font-family:var(--font-mono); font-weight:500; font-size:10px; opacity:.85;}
.level-btn:hover{color:var(--ink);}
.level-btn.active{background:var(--surface); color:var(--accent-text); box-shadow:0 2px 0 var(--border);}
.level-btn.active span{color:var(--accent-text);}
.switch{position:relative; width:44px; height:25px; flex:none;}
.switch input{opacity:0; width:0; height:0;}
/* The off-state track sits on --surface (white) on the game stage, where
   plain --border is so faint the control reads as decoration rather than
   something you can press. The inset ring gives it an edge at rest; it
   disappears under the accent fill when checked. */
.switch .track{position:absolute; inset:0; background:var(--border); border-radius:999px; cursor:pointer; transition:background .15s, box-shadow .15s; box-shadow:inset 0 0 0 2px var(--ring);}
.switch input:checked + .track{box-shadow:none;}
.switch .thumb{position:absolute; top:3px; left:3px; width:19px; height:19px; border-radius:50%; background:var(--surface); box-shadow:var(--shadow-sm); transition:transform .15s;}
.switch input:checked + .track{background:var(--accent);}
.switch input:checked + .track .thumb{transform:translateX(19px);}
.mini-btn{
  border:2px solid var(--border); background:var(--surface-2); color:var(--ink-soft); font-size:13px; font-weight:700;
  padding:8px 14px; border-radius:10px; cursor:pointer; display:flex; align-items:center; gap:6px;
  box-shadow:0 3px 0 var(--border); transition:transform .1s ease, color .12s ease, border-color .12s ease, box-shadow .1s ease;
}
.mini-btn:hover{color:var(--accent); border-color:var(--accent); transform:translateY(-2px); box-shadow:0 4px 0 var(--accent-ink);}
.mini-btn:active{transform:translateY(1px); box-shadow:0 1px 0 var(--accent-ink);}

/* ---------- Game screen ---------- */
.hud{display:flex; gap:12px; margin-bottom:16px; flex-wrap:wrap;}
.hud-stat{
  background:var(--surface); border:2px solid var(--border); border-radius:var(--radius-sm);
  padding:10px 16px; min-width:88px;
}
.hud-stat .label{font-size:10.5px; text-transform:uppercase; letter-spacing:.07em; color:var(--muted); font-weight:700;}
.hud-stat .value{font-family:var(--font-mono); font-size:21px; font-weight:700; line-height:1.3;}
.hud-stat.score .value{color:var(--accent-text);}
.hud-stat.streak .value{color:var(--success-ink);}
.hud-stat.mistakes .value{color:var(--danger-ink);}
.hud-exit{margin-left:auto; align-self:center;}

.stage{
  background:var(--surface); border:2px solid var(--border); border-radius:var(--radius-lg);
  box-shadow:var(--shadow-md); padding:22px 22px 26px; position:relative;
}
.stage-top{display:flex; justify-content:space-between; align-items:center; margin-bottom:6px;}
.stage-top .prompt{font-size:14px; color:var(--muted); font-weight:600;}
.speed-control{display:flex; align-items:center; gap:8px;}
.stage-controls{display:flex; align-items:center; gap:14px; flex-wrap:wrap; justify-content:flex-end;}
.range-control{display:flex; align-items:center; gap:8px;}
.range-control .rc-caption{font-size:12px; font-weight:600; color:var(--muted); cursor:pointer;}
/* In Training this control sits in a row with the range switch and the speed
   stepper and borrows their weight. In Songs it's alone on the right of an
   otherwise empty row, where it was easy to miss entirely — so give it its
   own surface and make it look like the control it is. */
#namesControl{background:var(--surface-2); border:2px solid var(--border); border-radius:10px; padding:5px 10px;}
#namesControl .rc-caption{color:var(--ink-soft);}
/* Slightly smaller switch on the stage than the one the settings rows use. */
#namesControl .switch{width:38px; height:21px;}
#namesControl .switch .thumb{width:15px; height:15px;}
#namesControl .switch input:checked + .track .thumb{transform:translateX(17px);}
.range-control .level-btn{padding:4px 10px; font-size:11.5px;}
.range-control .level-btn span{font-size:9px;}
.speed-btn{
  width:22px; height:22px; border-radius:7px; border:2.5px solid var(--border); background:var(--surface-2);
  color:var(--ink-soft); font-size:15px; font-weight:700; line-height:1; cursor:pointer; display:flex;
  align-items:center; justify-content:center; padding:0;
}
.speed-btn:hover:not(:disabled){color:var(--accent); border-color:var(--accent);}
.speed-btn:disabled{opacity:.4; cursor:default;}
.timebar-wrap{width:100%; height:6px; border-radius:999px; background:var(--surface-2); overflow:hidden; margin:4px 0 14px; border:2px solid var(--border);}
.timebar{height:100%; width:100%; background:var(--success); border-radius:999px; transform-origin:left; transition:background-color .2s;}

.staff-wrap{width:100%; position:relative; cursor:pointer;}
#staffSvg{width:100%; height:auto; display:block; overflow:visible;}

.tap-flash{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%) scale(.6); opacity:0;
  width:60px; height:60px; border-radius:50%; background:var(--ink); color:var(--surface);
  display:flex; align-items:center; justify-content:center; font-size:24px;
  pointer-events:none; transition:opacity .3s ease, transform .3s ease; z-index:6;
}
.tap-flash.show{opacity:.8; transform:translate(-50%,-50%) scale(1);}

.feedback-banner{
  position:absolute; left:50%; top:8px; transform:translateX(-50%) translateY(-8px); opacity:0;
  font-family:var(--font-display); padding:8px 20px; border-radius:999px; font-weight:700; font-size:15px; letter-spacing:.02em;
  pointer-events:none; transition:opacity .18s ease, transform .18s ease; z-index:5;
}
.feedback-banner.show{opacity:1; transform:translateX(-50%) translateY(0);}
.feedback-banner.correct{background:var(--success); color:#fff;}
.feedback-banner.incorrect{background:var(--danger); color:#fff;}
.feedback-banner.missed{background:var(--muted); color:#fff;}

.answers{display:grid; grid-template-columns:repeat(7,1fr); gap:10px; margin-top:22px;}
@media (max-width:680px){.answers{grid-template-columns:repeat(4,1fr);}}
.ans-btn{
  position:relative; border-radius:var(--radius-md); padding:16px 0 12px;
  background:var(--surface); border:2.5px solid var(--border); color:var(--ink);
  font-family:var(--font-display); font-size:26px; font-weight:800; cursor:pointer;
  box-shadow:0 4px 0 var(--border); transition:transform .08s ease, background .12s ease, border-color .12s ease, box-shadow .08s ease;
}
.ans-btn .key{display:block; font-family:var(--font-mono); font-size:10px; color:var(--muted); font-weight:500; margin-top:3px;}
.ans-btn:hover:not(:disabled){transform:translateY(-2px); border-color:var(--accent); box-shadow:0 6px 0 var(--accent-ink);}
.ans-btn:active:not(:disabled){transform:translateY(2px) scale(.98); box-shadow:0 1px 0 var(--accent-ink);}
.ans-btn:disabled{cursor:default; opacity:.55;}
.ans-btn.correct{background:var(--success-soft); border-color:var(--success); color:var(--success-ink); opacity:1; box-shadow:none;}
.ans-btn.incorrect{background:var(--danger-soft); border-color:var(--danger); color:var(--danger-ink); opacity:1; box-shadow:none;}

.hint-row{display:flex; justify-content:center; margin-top:14px; min-height:18px;}
.hint-row span{font-size:12.5px; color:var(--muted); font-style:italic;}

/* ---------- Start countdown ---------- */
.countdown{
  position:absolute; left:50%; top:52%; transform:translate(-50%,-50%);
  z-index:8; pointer-events:none; text-align:center;
  background:var(--surface); border:2px solid var(--border); border-radius:var(--radius-md);
  box-shadow:var(--shadow-lg); padding:14px 28px 12px; width:min(440px, calc(100% - 40px));
}
.countdown .cd-caption{font-size:13px; font-weight:700; color:var(--ink-soft); margin-bottom:2px;}
.countdown .cd-number{
  font-family:var(--font-mono); font-size:54px; font-weight:700; line-height:1.1;
  color:var(--accent-text);
}
.countdown .cd-number.pop{animation:cdPop .35s ease;}
@keyframes cdPop{from{transform:scale(.6); opacity:.3;} to{transform:scale(1); opacity:1;}}
.countdown .cd-hint{font-size:11px; color:var(--muted); font-style:italic;}

/* ---------- Training's paused-session stats ---------- */
.pause-stats{
  position:absolute; left:50%; top:52%; transform:translate(-50%,-50%);
  z-index:7; pointer-events:none;           /* taps fall through to the staff */
  background:var(--surface); border:2px solid var(--border); border-radius:var(--radius-md);
  box-shadow:var(--shadow-lg); padding:16px 20px 14px; width:min(420px, calc(100% - 40px));
}
.pause-stats .ps-title{
  font-size:10.5px; text-transform:uppercase; letter-spacing:.07em; color:var(--muted);
  font-weight:700; margin-bottom:10px; text-align:center;
}
.pause-stats .stat-grid{grid-template-columns:repeat(3,1fr); gap:10px; margin-bottom:0;}
.pause-stats .stat-tile{padding:10px 8px; text-align:center;}
.pause-stats .stat-tile .value{font-size:19px;}
.pause-stats .ps-hint{font-size:11px; color:var(--muted); text-align:center; margin-top:10px; font-style:italic;}

/* ---------- Pause (any mode) ---------- */
.stage.is-paused .staff-wrap{opacity:.35; filter:grayscale(.3);} /* stays clickable so a tap can resume it */
.stage.is-paused .answers{opacity:.35; pointer-events:none; filter:grayscale(.3);}

/* ---------- Training: live mastery strip + speed-up nudge ---------- */
.mastery-strip{display:flex; align-items:center; gap:10px; margin:2px 0 14px; flex-wrap:wrap;}
.ms-label{font-size:10.5px; text-transform:uppercase; letter-spacing:.07em; color:var(--muted); font-weight:700; flex:none;}
.ms-dots{display:flex; gap:6px;}
/* Training's strip reuses the Lessons chip (.lqp-chip) verbatim — same
   component, same meaning — so there is no .ms-chip styling any more. */
.ms-dots .lqp-chip{font-size:10.5px; padding:3px 8px;}

/* ---------- Songs: fixed-tune progress + completion ---------- */
.song-progress{display:flex; align-items:center; gap:10px; margin:2px 0 14px; flex-wrap:wrap;}
.sp-title{font-size:13px; font-weight:700; color:var(--ink-soft); flex:none;}
.sp-dots{display:flex; gap:4px; flex-wrap:wrap;}
.sp-dot{
  width:10px; height:10px; border-radius:50%; background:var(--surface-2); border:2.5px solid var(--border);
  transition:background .2s ease, border-color .2s ease, transform .2s ease;
}
.sp-dot.done{background:var(--info); border-color:var(--info);}
.sp-dot.current{background:var(--gold); border-color:var(--gold); transform:scale(1.4);}
/* Test's readout reuses these dots but means something different by them:
   Songs marks progress (done / here / to come), Test marks RESULT. A test
   that only showed how far you'd got would hide the one thing it exists to
   tell you. */
.sp-dot.right{background:var(--success); border-color:var(--success);}
.sp-dot.wrong{background:var(--danger); border-color:var(--danger);}
/* Pulse mode's strip carries FOUR states, because the mode's whole claim is
   that accuracy and timing come apart: both right, right note at the wrong
   moment, right moment with the wrong note, neither. The strip is the
   diagnosis, not just a score. */
.sp-dot.note-only{background:var(--info); border-color:var(--info);}
.sp-dot.time-only{background:var(--gold); border-color:var(--gold);}

.song-complete{text-align:center; padding:36px 20px;}
.song-complete .sc-emoji{font-size:44px; margin-bottom:8px;}
.song-complete h3{margin-bottom:6px;}
.song-complete p{color:var(--muted); margin:0 0 18px;}

.song-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:14px;}
.song-card{
  text-align:left; cursor:pointer; border:2.5px solid var(--border); background:var(--surface);
  border-radius:16px; padding:16px 18px; display:flex; gap:12px; align-items:flex-start;
  box-shadow:0 4px 0 var(--border); transition:transform .12s ease, border-color .12s ease, box-shadow .12s ease;
}
.song-card:hover{transform:translateY(-2px); border-color:var(--info); box-shadow:0 6px 0 var(--info-ink);}
.song-card:active{transform:translateY(1px); box-shadow:0 1px 0 var(--info-ink);}
.song-card .num{
  flex:none; width:30px; height:30px; border-radius:50%; background:var(--surface); border:2.5px solid var(--border);
  box-shadow:0 2px 0 var(--border);
  display:flex; align-items:center; justify-content:center; font-family:var(--font-mono); font-weight:700; font-size:13px; color:var(--muted);
}
.song-card.done .num{background:var(--info); border-color:var(--info); color:#fff;}
.song-card h4{font-family:var(--font-display); font-size:16px; font-weight:700; margin:0 0 3px;}
.song-card p{margin:0 0 6px; font-size:12.5px; color:var(--muted); line-height:1.5;}
.song-card .diff-tag{
  display:inline-block; font-family:var(--font-mono); font-size:10px; letter-spacing:.05em; text-transform:uppercase;
  padding:2px 8px; border-radius:999px; background:var(--info-soft); color:var(--info-ink);
}
.song-card .diff-tag.edited{background:var(--gold-soft); color:var(--accent-text);}
.song-card .diff-tag.yours{background:var(--accent-soft); color:var(--accent-text);}
.song-preview-btn{
  flex:none; margin-left:auto; align-self:center; width:34px; height:34px; border-radius:50%;
  border:2.5px solid var(--border); background:var(--surface); color:var(--info); font-size:12px;
  cursor:pointer; display:flex; align-items:center; justify-content:center; padding:0 0 0 2px;
  transition:background .15s ease, color .15s ease, border-color .15s ease, transform .15s ease;
}
.song-preview-btn:hover{border-color:var(--info); background:var(--info-soft);}
.song-preview-btn.playing{background:var(--info); border-color:var(--info); color:#fff; padding-left:0;}

.nudge-banner{
  display:flex; align-items:center; gap:14px; flex-wrap:wrap;
  background:var(--success-soft); border:2.5px solid var(--success); border-radius:14px;
  padding:12px 16px; margin:0 0 16px; animation:nudgeIn .25s ease;
}
.nudge-banner .nudge-text{flex:1; min-width:200px; font-size:13.5px; font-weight:600; color:var(--success-ink);}
.nudge-banner .nudge-actions{display:flex; gap:8px;}
.nudge-banner .mini-btn.primary{background:var(--success); border-color:var(--success); color:#fff; box-shadow:0 3px 0 var(--success-ink);}
.nudge-banner .mini-btn.primary:hover{color:#fff; border-color:var(--success); box-shadow:0 4px 0 var(--success-ink);}
.nudge-banner .mini-btn.primary:active{box-shadow:0 1px 0 var(--success-ink);}
/* The ease-off banner is deliberately NOT success-green: it isn't a reward,
   and dressing a "you're struggling" prompt as a congratulation reads as
   sarcasm. Info-blue keeps it matter-of-fact and helpful. */
.nudge-banner.ease{background:var(--info-soft); border-color:var(--info);}
.nudge-banner.ease .nudge-text{color:var(--info-ink);}
.nudge-banner.ease .mini-btn.primary{background:var(--info); border-color:var(--info); color:#fff; box-shadow:0 3px 0 var(--info-ink);}
.nudge-banner.ease .mini-btn.primary:hover{border-color:var(--info); box-shadow:0 4px 0 var(--info-ink);}
@keyframes nudgeIn{from{opacity:0; transform:translateY(-6px);} to{opacity:1; transform:translateY(0);}}

/* ---------- Compose ---------- */
.compose-task{background:var(--info-soft); border:2px solid var(--info); border-radius:var(--radius-md);
  padding:14px 16px; margin-bottom:14px; display:flex; flex-direction:column; gap:10px;}
.ct-head{display:flex; gap:10px; align-items:baseline; flex-wrap:wrap;}
.ct-step{font-size:11px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--info-ink);}
.ct-prompt{font-size:14px; font-weight:700; color:var(--ink);}
.ct-target{display:flex; gap:8px; flex-wrap:wrap;}
/* The target letters are chips rather than a sentence, so "the third one is a
   G" is a thing you can see at a glance while placing note three. */
.ct-target span{font-family:var(--font-mono); font-size:15px; font-weight:700;
  background:var(--surface); border:2px solid var(--border); border-radius:var(--radius-sm);
  padding:3px 10px; color:var(--ink);}
.ct-target span.hit{background:var(--success-soft); border-color:var(--success); color:var(--success-ink);}
.ct-target span.miss{background:var(--danger-soft); border-color:var(--danger); color:var(--danger-ink);}
.ct-legend{font-size:12.5px; color:var(--info-ink); margin:-2px 0 2px;}
.ct-legend b{font-weight:700;}
/* Mono ONLY on the chip examples, so they read as quotations of what is on
   screen rather than as emphasis. */
.ct-legend i{font-family:var(--font-mono); font-style:normal; font-weight:700;}
.ct-actions{display:flex; gap:10px; align-items:center; flex-wrap:wrap;}
.ct-status{font-size:13px; font-weight:600; color:var(--ink-soft);}
.ct-status.ok{color:var(--success-ink);}
.ct-status.bad{color:var(--danger-ink);}
/* ---- Lesson 12: the beat ---- */
.beat-stage{display:flex; flex-direction:column; align-items:center; gap:16px; margin:8px 0 16px;}
.beat-heart{width:132px; height:132px; border-radius:50%; cursor:pointer; user-select:none;
  display:flex; align-items:center; justify-content:center; border:3px solid var(--border);
  background:var(--surface-2); color:var(--muted); font-family:var(--font-mono);
  font-size:42px; font-weight:700; transition:transform .16s ease, background .16s ease, border-color .16s ease, color .16s ease;}
/* Set ON by the beat drain and released by transition — no keyframe animation,
   which would free-run beside the audio clock instead of tracking it. */
.beat-heart.pulse{transform:scale(1.12); background:var(--accent-soft); border-color:var(--accent);
  color:var(--accent-text); transition:none;}
.beat-heart.accent{transform:scale(1.2); background:var(--gold-soft); border-color:var(--gold); transition:none;}
.beat-heart.hit{background:var(--success-soft); border-color:var(--success); color:var(--success-ink);}
.beat-heart.near{background:var(--gold-soft); border-color:var(--gold);}
.beat-heart.off{background:var(--danger-soft); border-color:var(--danger); color:var(--danger-ink);}
/* The silent half of the hold task: the circle goes quiet too, so there is
   nothing to react to and the pulse has to come from the player. */
.beat-heart.hush{opacity:.45; border-style:dashed;}
.beat-bar{display:flex; gap:10px;}
.beat-bar span{width:34px; height:8px; border-radius:4px; background:var(--border); transition:background .18s ease;}
.beat-bar span.on{background:var(--accent); transition:none;}
.beat-bar span.on.accent{background:var(--gold);}
.beat-progress{justify-content:center;}
/* ---- Lesson 15: note lengths ---- */
.len-stage{display:flex; flex-direction:column; align-items:center; gap:10px; margin:6px 0 12px;
  background:var(--surface-2); border:2px solid var(--border); border-radius:16px; padding:12px;}
#lenSvg{width:100%; max-width:600px; height:auto; display:block;}
.len-answers{display:grid; grid-template-columns:repeat(4,1fr); gap:8px; max-width:440px; margin:0 auto 4px;}
#earAnswers{grid-template-columns:repeat(7,1fr); max-width:520px;}
#earAnswers[data-set="dir"]{grid-template-columns:repeat(2,1fr); max-width:300px;}
#earAnswers[data-set="triad"]{grid-template-columns:repeat(3,1fr); max-width:340px;}
@media (max-width:520px){ #earAnswers{grid-template-columns:repeat(4,1fr);} }
#earSvg{width:100%; max-width:400px; height:auto; display:block;}
#barSvg{width:100%; max-width:600px; height:auto; display:block;}
#barAnswers[data-set="verdict"]{grid-template-columns:repeat(3,1fr); max-width:420px;}
#patSvg{width:100%; max-width:640px; height:auto; display:block;}
/* The three notated choices in task 3 are BARS, not words, so they need real
   width — a rhythm you have to read cannot be squeezed into a chip. */
#patAnswers[data-set="pick"]{grid-template-columns:1fr; max-width:520px; gap:10px;}
#patAnswers .ans-btn.pat-opt{padding:8px 10px;}
#patAnswers .pat-opt svg{width:100%; height:auto; display:block;}
.len-answers .ans-btn{padding:12px 0 10px; font-size:17px;}
.len-answers .ans-btn .sub{display:block; font-size:10.5px; color:var(--muted); font-weight:600; margin-top:2px;}
/* ---- Lesson 14: reading on the beat ---- */
.glide-stage{background:var(--surface-2); border:2px solid var(--border); border-radius:16px;
  padding:8px; margin:10px 0 12px; overflow:hidden;}
#glideSvg{width:100%; height:auto; display:block;}
.pulse-head{display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-bottom:10px;}
.pulse-report{margin-top:18px; padding-top:16px; border-top:2px solid var(--border); text-align:center;}
.pulse-report .cap{font-size:11px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--muted);}
.pulse-report .big{font-family:var(--font-mono); font-size:52px; font-weight:700; color:var(--accent-text); line-height:1.1; margin:2px 0 4px;}
.pulse-report #pulseReportVerdict{color:var(--ink-soft);}
.glide-pulse-row{display:flex; align-items:center; justify-content:center; gap:12px; margin:-4px 0 10px;}
.gp-label{font-family:var(--font-mono); font-size:15px; font-weight:700; color:var(--muted); min-width:18px; text-align:center;}
.gp-label.accent{color:var(--gold);}
#beatFeedback, #patFeedback{text-align:center;}
.pat-hint{font-size:12.5px; color:var(--muted); text-align:center; margin-top:-4px;}
.pat-hint b{color:var(--ink-soft);}
/* touch-action stops the browser waiting to see whether a tap is the start of
   a scroll or a double-tap zoom — which on a phone delays the event a rhythm
   task is timing. */
.pat-heart{touch-action:manipulation; user-select:none;}
.pat-heart.ready{border-color:var(--accent); color:var(--accent-text); background:var(--accent-soft);}
.beat-heart .bh-tap{font-family:var(--font-body); font-size:20px; font-weight:800; letter-spacing:.06em;}
.compose-toolbar{display:flex; gap:14px; align-items:center; flex-wrap:wrap; margin-bottom:14px;}
.dur-group{display:flex; gap:6px; background:var(--surface-2); border:2px solid var(--border); border-radius:12px; padding:4px;}
.dur-btn{
  border:none; background:transparent; cursor:pointer; border-radius:9px; padding:4px 10px 2px;
  color:var(--muted); display:flex; flex-direction:column; align-items:center; gap:1px;
  transition:background .12s ease, color .12s ease;
}
.dur-btn:hover{color:var(--ink);}
.dur-btn.active{background:var(--surface); color:var(--accent-text); box-shadow:var(--shadow-sm);}
.dur-btn .dur-glyph{width:22px; height:32px; display:block;}
.dur-btn span{font-family:var(--font-mono); font-size:9.5px;}
.dot-btn{min-width:40px; justify-content:center;}
/* Drawn, not typed: a middle-dot character depends on the font having it,
   and the whole point of this button is that the mark is unmistakable. */
.dot-btn .dot-mark{width:9px; height:9px; border-radius:50%; background:currentColor; margin:11px 0 6px;}
.compose-actions{display:flex; gap:8px; margin-left:auto; flex-wrap:wrap;}
.compose-staff-wrap{
  overflow-x:auto; background:var(--surface-2); border:2px solid var(--border);
  border-radius:16px; padding:6px 0;
}
#composeSvg{display:block; height:auto; cursor:crosshair;}
.compose-readout{
  margin-top:12px; font-family:var(--font-mono); font-size:12px; color:var(--muted);
  display:flex; gap:10px; flex-wrap:wrap; align-items:center; min-height:18px;
}
.compose-readout b{font-family:var(--font-body); color:var(--ink-soft);}
.compose-lib{margin-top:18px; padding-top:16px; border-top:2px solid var(--border); display:flex; flex-direction:column; gap:10px;}
.cl-row{display:flex; gap:10px; align-items:center; flex-wrap:wrap;}
.cl-label{font-size:11px; text-transform:uppercase; letter-spacing:.06em; color:var(--muted); font-weight:700;}
.compose-lib select, .compose-lib input[type=text]{
  font-family:var(--font-body); font-size:13px; color:var(--ink);
  background:var(--surface-2); border:2px solid var(--border); border-radius:10px; padding:7px 10px;
}
.compose-lib input[type=text]{flex:1; min-width:150px;}
.cl-status{font-size:12px; color:var(--success-ink); font-weight:600;}
.cl-export{
  width:100%; font-family:var(--font-mono); font-size:11.5px; line-height:1.5;
  color:var(--ink); background:var(--surface-2); border:2px solid var(--border);
  border-radius:12px; padding:10px 12px; resize:vertical;
}

/* ---------- Progress screen ---------- */
.panel{background:var(--surface); border:2px solid var(--border); border-radius:var(--radius-lg); box-shadow:var(--shadow-md); padding:26px 28px; margin-bottom:20px;}
.panel h2{font-size:22px; margin-bottom:4px;}
.panel .sub{color:var(--muted); font-size:13.5px; margin-bottom:18px;}
.panel .sub-note{display:inline-block; margin-top:6px; font-size:12.5px; color:var(--ink-soft); font-style:italic;}
.stat-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(120px,1fr)); gap:14px; margin-bottom:6px;}
.arcade-over-stats{display:grid; grid-template-columns:repeat(auto-fit,minmax(110px,1fr)); gap:12px; max-width:480px; margin:0 auto 20px;}
.arcade-over-stats .stat-tile{text-align:center;}
.stat-tile{background:var(--surface-2); border:2px solid var(--border); border-radius:14px; padding:14px 16px;}
.stat-tile .label{font-size:11px; text-transform:uppercase; letter-spacing:.06em; color:var(--muted); font-weight:700;}
.stat-tile .value{font-family:var(--font-mono); font-size:24px; font-weight:700; margin-top:4px;}
.xp-bar-wrap{margin-top:16px;}
.xp-label{display:flex; justify-content:space-between; font-size:12.5px; color:var(--muted); margin-bottom:5px; font-family:var(--font-mono);}
.xp-track{height:10px; background:var(--surface-2); border:2px solid var(--border); border-radius:999px; overflow:hidden;}
.xp-fill{height:100%; background:linear-gradient(90deg,var(--accent),var(--gold)); border-radius:999px;}

/* ---- Progress: the journey rows ----
   One row per strand of the app. Every row is the same three parts — what it
   is, how far through it you are, and what that means — so a strand that has
   no record yet still occupies its line instead of vanishing. A progress
   screen that only lists what you have done cannot tell you what is left. */
.jrn{display:flex; flex-direction:column; gap:14px;}
.jrn-row{background:var(--surface-2); border:2px solid var(--border); border-radius:14px; padding:13px 16px;}
.jrn-top{display:flex; align-items:baseline; justify-content:space-between; gap:12px;}
.jrn-name{font-size:14px; font-weight:700; color:var(--ink-soft);}
.jrn-count{font-family:var(--font-mono); font-size:12.5px; color:var(--muted); flex:none;}
.jrn-track{height:8px; background:var(--surface); border:2px solid var(--border); border-radius:999px; overflow:hidden; margin:8px 0 7px;}
.jrn-fill{height:100%; background:linear-gradient(90deg,var(--accent),var(--gold)); border-radius:999px; transition:width .3s ease;}
.jrn-row.full .jrn-fill{background:var(--success);}
.jrn-note{font-size:12.5px; color:var(--muted); line-height:1.5;}
.jrn-note b{color:var(--ink-soft); font-weight:700;}

/* ---- Dictation report: the bar you heard, above the bar you wrote ---- */
.dict-rows{display:flex; flex-direction:column; gap:16px;}
.dict-row{background:var(--surface-2); border:2px solid var(--border); border-radius:14px; padding:12px 14px;}
.dict-row.perfect{border-color:var(--success); }
.dict-head{display:flex; align-items:baseline; gap:10px; margin-bottom:8px; flex-wrap:wrap;}
.dict-head .n{font-family:var(--font-mono); font-size:12.5px; color:var(--muted);}
.dict-head .v{font-size:13px; font-weight:700;}
.dict-head .v.ok{color:var(--success-ink);} .dict-head .v.no{color:var(--danger-ink);}
.dict-pair{display:grid; grid-template-columns:1fr; gap:6px;}
@media (min-width:760px){.dict-pair{grid-template-columns:1fr 1fr; gap:14px;}}
.dict-half{min-width:0;}
.dict-half .cap{font-size:10.5px; text-transform:uppercase; letter-spacing:.07em; color:var(--muted); font-weight:700; margin-bottom:2px;}
.dict-half svg{width:100%; height:auto; display:block;}

.messages{display:flex; flex-direction:column; gap:8px; margin-top:18px;}
.message{
  background:var(--accent-soft); color:var(--accent-text); border-radius:12px; padding:10px 14px;
  font-size:13.5px; font-weight:600; display:flex; gap:8px; align-items:flex-start;
}
.message .dot{width:6px; height:6px; border-radius:50%; background:var(--accent); margin-top:6px; flex:none;}

.note-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:14px;}
.note-card{background:var(--surface-2); border:2px solid var(--border); border-radius:16px; padding:16px;}
.note-card .top{display:flex; align-items:center; justify-content:space-between;}
.note-card .letter{font-family:var(--font-display); font-size:26px; font-weight:700;}
.stars{font-size:14px; letter-spacing:1px; color:var(--gold);}
.stars .empty{color:var(--border);}
.note-card .metrics{display:flex; justify-content:space-between; margin-top:10px; font-family:var(--font-mono); font-size:12px; color:var(--ink-soft);}
.note-card .tag{display:inline-block; margin-top:9px; font-size:10.5px; padding:3px 8px; border-radius:999px; font-weight:700; letter-spacing:.03em;}
.tag.fast-accurate{background:var(--success-soft); color:var(--success-ink);}
.tag.slow-accurate{background:var(--gold-soft); color:var(--accent-text);}
.tag.fast-inaccurate{background:var(--danger-soft); color:var(--danger-ink);}
.tag.slow-inaccurate{background:var(--danger-soft); color:var(--danger-ink);}
.tag.new{background:var(--border); color:var(--muted);}
.sparkline{display:flex; gap:3px; margin-top:10px;}
.sparkline i{width:8px; height:8px; border-radius:50%; background:var(--border); flex:none;}
.sparkline i.hit{background:var(--success);}
.sparkline i.miss{background:var(--danger);}

.back-row{display:flex; justify-content:flex-start; margin-top:20px;}

/* ---------- Lessons screen ---------- */
.lesson-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:14px;}
.lesson-card{
  text-align:left; cursor:pointer; border:2.5px solid var(--border); background:var(--surface);
  border-radius:16px; padding:16px 18px; display:flex; gap:12px; align-items:flex-start;
  box-shadow:0 4px 0 var(--border); transition:transform .12s ease, border-color .12s ease, box-shadow .12s ease;
}
.lesson-card:hover{transform:translateY(-2px); border-color:var(--accent); box-shadow:0 6px 0 var(--accent-ink);}
.lesson-card:active{transform:translateY(1px); box-shadow:0 1px 0 var(--accent-ink);}
.lesson-card .num{
  flex:none; width:30px; height:30px; border-radius:50%; background:var(--surface); border:2.5px solid var(--border);
  box-shadow:0 2px 0 var(--border);
  display:flex; align-items:center; justify-content:center; font-family:var(--font-mono); font-weight:700; font-size:13px; color:var(--muted);
}
.lesson-card.done .num{background:var(--success); border-color:var(--success); color:#fff;}
.lesson-card h4{font-family:var(--font-display); font-size:16px; font-weight:700; margin:0 0 3px;}
.lesson-card p{margin:0; font-size:12.5px; color:var(--muted); line-height:1.5;}
.song-card.locked{cursor:not-allowed; opacity:.55;}
.song-card.locked:hover{transform:none; border-color:var(--border); box-shadow:0 4px 0 var(--border);}
.lesson-card.locked{cursor:not-allowed; opacity:.55;}
.lesson-card.locked:hover{transform:none; border-color:var(--border); box-shadow:0 4px 0 var(--border);}
.lesson-card.locked .num{background:var(--surface-2);}
.lesson-card .lock-note{margin:4px 0 0; font-size:11.5px; color:var(--muted); font-style:italic;}

.lesson-dots{display:flex; gap:6px; margin-bottom:14px;}
.lesson-dots i{width:8px; height:8px; border-radius:50%; background:var(--border); flex:none;}
.lesson-dots i.done{background:var(--success);}
.lesson-dots i.current{background:var(--accent); transform:scale(1.3);}

.lesson-stage{display:grid; grid-template-columns:1.1fr 1fr; gap:26px; align-items:start; margin-bottom:6px;}
@media (max-width:760px){.lesson-stage{grid-template-columns:1fr;}}
/* A lesson with no diagram (lesson 12) must also drop the diagram's COLUMN,
   not just hide the box — otherwise the prose stays crammed into half the
   width with an empty half beside it. */
.lesson-stage.solo{grid-template-columns:1fr;}
.lesson-diagram-wrap{background:var(--surface-2); border:2px solid var(--border); border-radius:16px; padding:14px;}
#lessonStaffSvg{width:100%; height:auto; display:block;}
.lesson-body p{color:var(--ink-soft); font-size:14.5px; line-height:1.65; margin:0 0 12px;}
.lesson-body p:last-child{margin-bottom:0;}
.lesson-tip{
  background:var(--gold-soft); border-radius:12px; padding:10px 14px; font-size:13px; color:var(--accent-text);
  font-weight:600; display:flex; gap:8px; margin-top:4px;
}

.lesson-quiz{background:var(--surface-2); border:2px solid var(--border); border-radius:16px; padding:18px; margin-top:20px;}
.lesson-quiz .prompt{font-size:13.5px; font-weight:700; color:var(--ink); margin-bottom:4px;}
.lesson-quiz-sub{font-size:12px; color:var(--muted); margin-bottom:12px;}
.lesson-quiz-progress{display:flex; flex-wrap:wrap; gap:10px; margin-bottom:14px;}
.lqp-chip{display:flex; align-items:center; gap:5px; font-family:var(--font-mono); font-size:11px; color:var(--muted); background:var(--surface); border:2px solid var(--border); border-radius:999px; padding:4px 9px;}
.lqp-chip .letter{font-weight:700; color:var(--ink-soft);}
.lqp-chip .dots{letter-spacing:1px;}
.lqp-chip .dots .on{color:var(--accent);}
.lqp-chip .dots .off{color:var(--border);}
.lqp-chip.mastered{border-color:var(--success); background:var(--success-soft);}
.lqp-chip.mastered .dots .on{color:var(--success-ink);}
.lesson-quiz-stage{display:flex; align-items:center; gap:18px; flex-wrap:wrap;}
#lessonQuizSvg{width:180px; height:auto; flex:none;}
.lesson-quiz-answers{display:grid; grid-template-columns:repeat(7,1fr); gap:7px; flex:1; min-width:260px;}
@media (max-width:520px){.lesson-quiz-answers{grid-template-columns:repeat(4,1fr);}}
.lesson-quiz-answers .ans-btn{padding:11px 0 8px; font-size:19px;}
.lesson-quiz-feedback{margin-top:10px; font-size:13px; font-weight:700; min-height:18px;}
.lesson-quiz-feedback.correct{color:var(--success-ink);}
.lesson-quiz-feedback.incorrect{color:var(--danger-ink);}

.lesson-nav{display:flex; justify-content:space-between; align-items:center; margin-top:22px; gap:10px;}
.lesson-complete-cta{
  margin-top:20px; background:var(--success-soft); border-radius:16px; padding:18px 20px; text-align:center;
}
.lesson-complete-cta p{margin:0 0 12px; color:var(--success-ink); font-weight:700; font-size:14.5px;}

/* ---------- Report screen ---------- */
.report-hero{text-align:center; padding:12px 0 4px;}
.report-hero .big{font-family:var(--font-mono); font-size:56px; font-weight:700; color:var(--accent-text);}
.report-hero .cap{color:var(--muted); font-size:13px; text-transform:uppercase; letter-spacing:.08em; font-weight:700;}

.cta-row{display:flex; gap:12px; flex-wrap:wrap; margin-top:8px;}
.btn{
  font-family:var(--font-display); cursor:pointer; border-radius:var(--radius-sm); font-weight:700; font-size:15px;
  background:var(--surface); color:var(--ink); border:2.5px solid var(--border);
  padding:12.5px 22px; box-shadow:0 4px 0 var(--border);
  transition:transform .08s ease, box-shadow .08s ease, border-color .12s ease, background .12s ease;
}
.btn:hover:not(:disabled){transform:translateY(-2px); border-color:var(--accent); box-shadow:0 6px 0 var(--accent-ink);}
.btn:active:not(:disabled){transform:translateY(2px); box-shadow:0 1px 0 var(--accent-ink);}
.btn.primary{background:var(--accent); color:#fff; border-color:var(--accent); box-shadow:0 5px 0 var(--accent-ink);}
.btn.primary:hover:not(:disabled){border-color:var(--accent); box-shadow:0 7px 0 var(--accent-ink);}
.btn.primary:active:not(:disabled){box-shadow:0 1px 0 var(--accent-ink);}
.btn.ghost{background:var(--surface); color:var(--ink);}
.btn:disabled{cursor:default; opacity:1; color:var(--disabled-ink); background:var(--disabled-bg); border-color:var(--disabled-bg); box-shadow:0 4px 0 var(--disabled-edge); transform:none;}

footer.credit{text-align:center; color:var(--muted); font-size:12px; margin-top:30px;}

/* modal */
.modal-backdrop{position:fixed; inset:0; background:rgba(10,9,25,.42); display:flex; align-items:center; justify-content:center; z-index:50; padding:20px;}
.modal{background:var(--surface); border-radius:var(--radius-lg); box-shadow:var(--shadow-lg); padding:26px; max-width:380px; width:100%; border:2px solid var(--border);}
.modal h3{margin-bottom:14px;}
.modal .field-row{display:flex; align-items:center; justify-content:space-between; padding:10px 0; border-bottom:2px solid var(--border);}
.modal .field-row:last-of-type{border-bottom:none;}
.modal-close{margin-top:16px; width:100%;}
.danger-row{margin-top:18px; padding-top:16px; border-top:2px solid var(--border); display:flex;}
.mini-btn.danger{color:var(--danger-ink); border-color:var(--danger-soft); background:var(--danger-soft); box-shadow:0 3px 0 var(--danger-soft);}
.mini-btn.danger:hover{color:#fff; background:var(--danger); border-color:var(--danger); box-shadow:0 4px 0 var(--danger-ink);}
.mini-btn.danger:active{box-shadow:0 1px 0 var(--danger-ink);}