:root {
  --navy:#0d1b3e; --navy-light:#1a2a6c; --gold:#f0b429; --gold-dark:#c8860a;
  --ink:#1e2230; --muted:#6b7280; --bg:#f4f5f8; --card:#ffffff; --card-alt:#f8fafc; --line:#e3e6ee;
  /* chrome-from/to control the drawer + topbar gradient independently of --navy,
     so light-content themes can keep a dark sidebar/topbar */
  --chrome-from:#0d1b3e; --chrome-to:#070f28;
  --green:#1f9d55; --red:#e03e3e;
  --signal-bg:#eef4ff; --signal-bd:#1a4a8a;
  --watch-bg:#fff7ed; --watch-bd:#c8860a;
  --qbq-bg:#f5f1fb; --qbq-bd:#7c3aed;
  --carl-c:#2563eb; --carl-a:#d97706; --carl-r:#1f9d55; --carl-l:#7c3aed; --carl-q:#94a3b8;
  --drawer-w:280px;
}
* { box-sizing:border-box; }
html,body { margin:0; padding:0; }
a { color:var(--gold); text-decoration:none; }
a:hover { color:var(--gold-dark); text-decoration:underline; }
body {
  font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  background:var(--bg); color:var(--ink); line-height:1.6; -webkit-font-smoothing:antialiased;
}
.hidden { display:none !important; }

/* Base form-field reset: ensure inputs/textareas/selects follow the theme
   (dark on dark themes) instead of the browser-default white background. */
input, textarea, select {
  background:var(--card);
  color:var(--ink);
}
input::placeholder, textarea::placeholder { color:var(--muted); }

/* ===== LOGIN ===== */
.login-wrap {
  min-height:100vh; display:flex; align-items:center; justify-content:center; padding:24px;
  background:linear-gradient(135deg,var(--chrome-from) 0%,var(--chrome-to) 100%);
}
.login-card {
  background:#fff; border-radius:20px; padding:44px 40px; max-width:420px; width:100%;
  text-align:center; box-shadow:0 20px 60px rgba(0,0,0,.35);
}
.login-card .dot { width:14px; height:14px; border-radius:50%; background:var(--gold);
  box-shadow:0 0 0 6px rgba(240,180,41,.25); display:inline-block; margin-bottom:18px; }
.login-card h1 { font-size:24px; margin:0 0 8px; color:var(--navy); }
.login-card .sub { font-size:14px; color:var(--muted); margin-bottom:30px; }
.btn-google {
  display:inline-flex; align-items:center; gap:12px; background:#fff; color:#1f2328;
  border:1.5px solid var(--line); border-radius:10px; padding:12px 22px; font-size:15px;
  font-weight:600; cursor:pointer; text-decoration:none; transition:all .15s;
}
.btn-google:hover { border-color:var(--navy-light); box-shadow:0 3px 12px rgba(13,27,62,.12); }
.btn-google img { width:20px; height:20px; }
.login-note { font-size:12px; color:var(--muted); margin-top:22px; line-height:1.5; }
.login-error { background:#fef2f2; border:1px solid #f4c9c9; color:#b42318; border-radius:10px;
  padding:12px 14px; font-size:13px; font-weight:600; margin-bottom:20px; line-height:1.5; }
.login-error.hidden { display:none; }
.setup-box {
  text-align:left; background:#fff7ed; border:1px solid #f4d9b0; border-radius:12px;
  padding:18px 20px; margin-top:10px; font-size:13px; color:#5b4a2a;
}
.setup-box code { background:#fff; border:1px solid var(--line); border-radius:5px;
  padding:1px 6px; font-size:12px; }
.setup-box b { color:var(--gold-dark); }

/* ===== PRODUCT OVERVIEW / LANDING ===== */
.ov-page {
  /* The landing page always uses its own fixed light palette, independent of the
     in-app theme the user may have saved (which can flip --card/--bg/--ink to dark). */
  --navy:#0d1b3e; --navy-light:#1a2a6c; --gold:#f0b429; --gold-dark:#c8860a;
  --ink:#1e2230; --muted:#6b7280; --bg:#f4f5f8; --card:#ffffff; --card-alt:#f8fafc;
  --line:#e3e6ee; --green:#1f9d55;
  --chrome-from:#0d1b3e; --chrome-to:#070f28;
  min-height:100vh; background:var(--bg); color:var(--ink);
  overflow-y:auto;
}

/* click-to-zoom lightbox */
.ov-zoom { cursor:zoom-in; }
.ov-lightbox {
  position:fixed; inset:0; background:rgba(5,10,25,.93); z-index:1000;
  display:none; align-items:center; justify-content:center; padding:28px; cursor:zoom-out;
}
.ov-lightbox.show { display:flex; }
.ov-lightbox img { max-width:96vw; max-height:94vh; border-radius:10px; box-shadow:0 24px 80px rgba(0,0,0,.6); }
.ov-lightbox-close {
  position:fixed; top:14px; right:26px; color:#fff; font-size:38px; line-height:1;
  font-weight:300; cursor:pointer; opacity:.85;
}
.ov-lightbox-close:hover { opacity:1; }
.ov-page .btn-google.ov-cta { padding:13px 26px; font-size:15.5px; box-shadow:0 4px 16px rgba(13,27,62,.14); }

/* top bar */
.ov-topbar {
  position:sticky; top:0; z-index:20;
  background:linear-gradient(135deg,var(--chrome-from) 0%,var(--chrome-to) 100%);
  box-shadow:0 2px 14px rgba(0,0,0,.18);
}
.ov-topbar-inner {
  max-width:1120px; margin:0 auto; padding:16px 28px;
  display:flex; align-items:center; justify-content:space-between;
}
.ov-brand { color:#fff; font-size:18px; font-weight:800; letter-spacing:.2px; display:flex; align-items:center; gap:10px; }
.ov-brand .dot { width:11px; height:11px; border-radius:50%; background:var(--gold);
  box-shadow:0 0 0 5px rgba(240,180,41,.25); display:inline-block; }
.ov-nav-signin {
  color:var(--navy); background:var(--gold); font-weight:700; font-size:14px;
  padding:9px 18px; border-radius:9px; text-decoration:none; transition:all .15s;
}
.ov-nav-signin:hover { background:var(--gold-dark); color:#fff; text-decoration:none; }

/* hero */
.ov-hero {
  background:linear-gradient(160deg,#0d1b3e 0%,#152a63 55%,#1a2a6c 100%);
  padding:70px 28px 80px;
}
.ov-hero-inner {
  max-width:1120px; margin:0 auto;
  display:grid; grid-template-columns:1fr 1fr; gap:54px; align-items:center;
}
.ov-eyebrow {
  display:inline-block; text-transform:uppercase; letter-spacing:1.4px; font-size:12px;
  font-weight:800; color:var(--gold); margin-bottom:16px;
}
.ov-hero-copy h1 {
  color:#fff; font-size:42px; line-height:1.12; margin:0 0 18px; font-weight:800; letter-spacing:-.5px;
}
.ov-lead { color:#c7d0e6; font-size:17px; line-height:1.6; margin:0 0 26px; }
.ov-hero-copy .login-error { max-width:460px; }
.ov-hero-copy #loginBtnWrap { margin-bottom:4px; }
.ov-note { font-size:12.5px; color:#8f9bbd; margin-top:18px; }
.ov-hero-shot img {
  width:100%; height:auto; border-radius:14px; display:block;
  box-shadow:0 26px 70px rgba(0,0,0,.5); border:1px solid rgba(255,255,255,.08);
}

/* section scaffolding */
.ov-section-title { text-align:center; font-size:30px; font-weight:800; color:var(--navy); margin:0 0 8px; letter-spacing:-.3px; }
.ov-section-sub { text-align:center; color:var(--muted); font-size:16px; margin:0 auto 46px; max-width:620px; }

/* how it works */
.ov-how { max-width:1120px; margin:0 auto; padding:72px 28px 24px; }
.ov-steps { display:grid; grid-template-columns:repeat(3,1fr); gap:26px; }
.ov-step {
  background:var(--card); border:1px solid var(--line); border-radius:16px; padding:30px 26px;
  box-shadow:0 6px 22px rgba(13,27,62,.05);
}
.ov-step-num {
  width:40px; height:40px; border-radius:50%; background:var(--navy); color:var(--gold);
  display:flex; align-items:center; justify-content:center; font-weight:800; font-size:18px; margin-bottom:16px;
}
.ov-step h3 { margin:0 0 8px; font-size:18px; color:var(--navy); }
.ov-step p { margin:0; color:var(--ink); font-size:14.5px; line-height:1.6; }

/* feature sections */
.ov-feature { padding:64px 28px; }
.ov-feature-alt { background:var(--card-alt); }
.ov-feature-inner {
  max-width:1120px; margin:0 auto;
  display:grid; grid-template-columns:1fr 1fr; gap:54px; align-items:center;
}
.ov-feature-alt .ov-feature-inner { direction:rtl; }
.ov-feature-alt .ov-feature-inner > * { direction:ltr; }
.ov-feature-copy h2 { font-size:28px; color:var(--navy); margin:6px 0 16px; line-height:1.2; letter-spacing:-.3px; }
.ov-feature-copy p { color:var(--ink); font-size:15.5px; line-height:1.65; margin:0 0 18px; }
.ov-checks { list-style:none; padding:0; margin:0; }
.ov-checks li { position:relative; padding-left:28px; margin-bottom:11px; font-size:14.5px; color:var(--ink); }
.ov-checks li::before {
  content:"✓"; position:absolute; left:0; top:0; color:var(--green); font-weight:800;
  background:rgba(31,157,85,.12); width:20px; height:20px; border-radius:50%;
  display:flex; align-items:center; justify-content:center; font-size:12px;
}
.ov-feature-shot img {
  width:100%; height:auto; border-radius:14px; display:block;
  box-shadow:0 18px 48px rgba(13,27,62,.18); border:1px solid var(--line);
}

/* export */
.ov-export { padding:72px 28px; background:var(--card-alt); }
.ov-export-inner { max-width:900px; margin:0 auto; text-align:center; }
.ov-eyebrow-center { display:block; }
.ov-export-cards { display:grid; grid-template-columns:repeat(2,1fr); gap:24px; margin-top:12px; }
.ov-export-card {
  background:var(--card); border:1px solid var(--line); border-radius:16px; padding:30px 28px;
  box-shadow:0 6px 22px rgba(13,27,62,.05); text-align:left;
}
.ov-export-badge {
  display:inline-block; font-weight:800; font-size:13px; letter-spacing:.5px;
  color:#fff; background:var(--navy); border-radius:7px; padding:5px 12px; margin-bottom:16px;
}
.ov-export-badge-alt { background:var(--gold-dark); }
.ov-export-card h3 { margin:0 0 8px; font-size:18px; color:var(--navy); }
.ov-export-card p { margin:0; color:var(--ink); font-size:14.5px; line-height:1.6; }

/* final cta */
.ov-final {
  text-align:center; padding:76px 28px 84px;
  background:linear-gradient(160deg,#0d1b3e 0%,#152a63 100%);
}
.ov-final h2 { color:#fff; font-size:30px; margin:0 0 10px; font-weight:800; }
.ov-final p { color:#c7d0e6; font-size:16px; margin:0 0 28px; }
.ov-footer { margin-top:36px; color:#7e8bb0; font-size:12.5px; letter-spacing:.3px; }

@media (max-width:860px) {
  .ov-hero-inner, .ov-feature-inner { grid-template-columns:1fr; gap:34px; }
  .ov-feature-alt .ov-feature-inner { direction:ltr; }
  .ov-hero-copy h1 { font-size:34px; }
  .ov-steps { grid-template-columns:1fr; }
  .ov-hero-shot { order:-1; }
  .ov-feature .ov-feature-shot { order:-1; }
}

/* ===== APP SHELL ===== */
.app-shell { display:flex; min-height:100vh; }
.drawer {
  width:var(--drawer-w); flex-shrink:0; background:linear-gradient(180deg,var(--chrome-from),var(--chrome-to));
  color:#fff; display:flex; flex-direction:column; position:fixed; left:0; top:0; height:100vh;
  overflow-y:auto; z-index:40; transition:transform .22s ease;
}
.drawer-user { display:flex; align-items:center; gap:12px; padding:20px 18px; border-bottom:1px solid rgba(255,255,255,.1); }
.drawer-user img { width:40px; height:40px; border-radius:50%; background:#334; object-fit:cover; }
.avatar-fallback { width:40px; height:40px; border-radius:50%; background:#334 center/cover no-repeat;
  flex-shrink:0; display:flex; align-items:center; justify-content:center; font-size:18px; color:#b9c3de; }
.drawer-user .u-name { font-size:14px; font-weight:700; line-height:1.2; }
.drawer-user .u-email { font-size:11.5px; color:#b9c3de; word-break:break-all; }
.drawer-new {
  margin:16px 16px 8px; background:var(--gold); color:var(--navy); border:none; border-radius:10px;
  padding:12px; font-size:14px; font-weight:700; cursor:pointer; display:flex; align-items:center;
  justify-content:center; gap:8px; transition:all .15s;
}
.drawer-new:hover { background:#ffc843; }
.drawer-sec-title { font-size:11px; text-transform:uppercase; letter-spacing:.8px; color:#8b97b8;
  padding:12px 18px 6px; font-weight:700; }
.session-list { flex:1; padding:0 10px; overflow-y:auto; }
.session-item {
  border-radius:10px; padding:11px 12px; margin-bottom:4px; cursor:pointer; transition:background .15s;
  border:1px solid transparent;
}
.session-item:hover { background:rgba(255,255,255,.07); }
.session-item.active { background:rgba(240,180,41,.16); border-color:rgba(240,180,41,.4); }
.session-item .s-name { font-size:13.5px; font-weight:600; color:#fff; white-space:nowrap;
  overflow:hidden; text-overflow:ellipsis; }
.session-item .s-role { font-size:11.5px; color:#b9c3de; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.session-item .s-meta { display:flex; align-items:center; gap:8px; margin-top:5px; }
.chip { font-size:10.5px; font-weight:700; padding:2px 8px; border-radius:6px; background:rgba(255,255,255,.14); color:#dbe3f7; }
.chip.gen { background:rgba(240,180,41,.25); color:#ffe1a0; }
.chip.err { background:rgba(224,62,62,.3); color:#ffc9c9; }
.s-actions { display:flex; gap:6px; margin-top:8px; }
.s-actions button { background:transparent; border:none; color:#8b97b8; font-size:11px; cursor:pointer;
  padding:2px 4px; border-radius:4px; }
.s-actions button:hover { color:#fff; background:rgba(255,255,255,.1); }
.drawer-foot { padding:14px 18px; border-top:1px solid rgba(255,255,255,.1); }
.drawer-foot a { color:#b9c3de; font-size:13px; text-decoration:none; cursor:pointer; }
.drawer-foot a:hover { color:#fff; }

.content { flex:1; min-width:0; display:flex; flex-direction:column; margin-left:var(--drawer-w); transition:margin-left .22s ease; }
.topbar {
  background:linear-gradient(135deg,var(--chrome-from) 0%,var(--navy-light) 100%); color:#fff;
  padding:0 22px; display:flex; flex-direction:column; gap:0;
  position:sticky; top:0; z-index:20; box-shadow:0 2px 12px rgba(13,27,62,.25);
}
/* Row 1: hamburger + title + action buttons on the left, actions on the right */
.tb-row1 { display:flex; align-items:center; gap:12px; min-height:56px; width:100%; }
.topbar .tb-left { display:flex; align-items:center; gap:12px; min-width:0; flex:1 1 auto; }
.hamburger { display:inline-block; background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.2);
  color:#fff; border-radius:8px; padding:9px 13px; font-size:16px; cursor:pointer; transition:background .15s; }
.hamburger:hover { background:rgba(255,255,255,.22); }
.tb-title { font-size:15px; font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.tb-sub { font-size:12px; color:#b9c3de; }
/* Row 2: view tabs — natural second row (a direct sibling of .tb-row1) */
.view-tabs {
  display:flex; gap:4px; background:rgba(255,255,255,.1); padding:4px; border-radius:10px;
  width:100%; margin-bottom:10px;
}
.view-tabs button { border:none; background:transparent; color:#cdd6ee; padding:8px 14px; border-radius:7px;
  font-size:13px; font-weight:600; cursor:pointer; white-space:nowrap; flex:1; text-align:center; }
.view-tabs button.active { background:#fff; color:var(--navy); }

/* ---- token usage counter (topbar) ---- */
.token-counter { position:relative; display:inline-flex; align-items:center; cursor:default; outline:none; }
.token-counter .tc-label {
  font-size:12px; font-weight:600; color:#c7d0ea; letter-spacing:.2px;
  background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.14);
  padding:4px 10px; border-radius:999px; white-space:nowrap; transition:background .15s,color .15s;
}
.token-counter:hover .tc-label, .token-counter:focus-within .tc-label { background:rgba(240,180,41,.18); color:#ffe6a6; }
.token-pop {
  position:absolute; top:calc(100% + 8px); left:0; z-index:40;
  min-width:230px; background:var(--card); color:var(--ink); border:1px solid var(--line);
  border-radius:10px; box-shadow:0 8px 26px rgba(13,27,62,.22); padding:12px 14px;
  opacity:0; visibility:hidden; transform:translateY(-4px); transition:opacity .15s,transform .15s;
}
.token-counter:hover .token-pop, .token-counter:focus-within .token-pop { opacity:1; visibility:visible; transform:translateY(0); }
.token-pop .tp-row { display:flex; justify-content:space-between; gap:24px; font-size:13px; padding:3px 0; }
.token-pop .tp-row span { color:var(--muted); }
.token-pop .tp-row b { color:var(--ink); font-variant-numeric:tabular-nums; }
.token-pop .tp-note { margin-top:9px; padding-top:9px; border-top:1px solid var(--line);
  font-size:11px; line-height:1.5; color:var(--muted); }

.view { padding:24px 18px 80px; }
main.view-practice { max-width:820px; margin:0 auto; width:100%; }

/* drawer backdrop (mobile overlay) */
.backdrop { display:none; position:fixed; inset:0; background:rgba(0,0,0,.45); z-index:39; }
.backdrop.show { display:block; }

/* ===== DESKTOP DRAWER COLLAPSE ===== */
/* When the shell has .drawer-collapsed, slide the drawer off-screen and
   shrink the content margin — works at ALL viewport widths > 768 px */
.app-shell.drawer-collapsed .drawer { transform:translateX(-100%); }
.app-shell.drawer-collapsed .content { margin-left:0; }

/* ===== GENERATING BANNER ===== */
.gen-banner { background:var(--card-alt); border:1px solid var(--line); border-left:4px solid var(--gold-dark); border-radius:12px; padding:16px 18px;
  display:flex; align-items:center; gap:14px; margin-bottom:18px; color:var(--ink); font-size:14px; }
.gen-banner .spinner { width:24px; height:24px; }

/* ===== CONTROLS / QUESTION CARD (practice) ===== */
.controls-top { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:18px; flex-wrap:wrap; }
.mode-toggle { display:flex; gap:6px; background:var(--card-alt); border:1px solid var(--line); padding:4px; border-radius:10px; }
.mode-toggle button { border:none; background:transparent; padding:8px 14px; border-radius:7px; font-size:13px;
  font-weight:600; color:var(--muted); cursor:pointer; transition:all .15s; }
.mode-toggle button.active { background:var(--card); color:var(--ink); box-shadow:0 1px 4px rgba(0,0,0,.1); }
.nav-btns { display:flex; gap:8px; }
.nav-btns button { border:1px solid var(--line); background:var(--card); color:var(--ink); padding:9px 16px;
  border-radius:9px; font-size:13px; font-weight:600; cursor:pointer; transition:all .15s; }
.nav-btns button:hover:not(:disabled) { border-color:var(--navy-light); color:var(--ink); }
.nav-btns button:disabled { opacity:.4; cursor:not-allowed; }
.nav-btns button.shuffle { background:var(--navy); color:#fff; border-color:var(--navy); }

.card { background:var(--card); border:1px solid var(--line); border-radius:16px; padding:26px 26px 24px;
  box-shadow:0 4px 20px rgba(13,27,62,.06); }
.q-meta { display:flex; align-items:center; gap:10px; margin-bottom:14px; }
.q-num { background:var(--gold); color:var(--navy); font-weight:800; font-size:13px; padding:4px 11px;
  border-radius:7px; letter-spacing:.5px; }
.q-count { font-size:12.5px; color:var(--muted); }
.q-text { font-size:23px; font-weight:700; line-height:1.35; margin:0 0 20px; color:var(--ink); }

.recorder { background:var(--card-alt); border:1px dashed var(--line); border-radius:14px; padding:20px; text-align:center; }
.rec-timer { font-size:40px; font-weight:800; font-variant-numeric:tabular-nums; color:var(--ink);
  letter-spacing:1px; margin-bottom:4px; }
.rec-timer.over { color:var(--red); }
.rec-hint { font-size:12.5px; color:var(--muted); margin-bottom:16px; }
.rec-hint b { color:var(--gold-dark); }
.rec-controls { display:flex; align-items:center; justify-content:center; gap:14px; flex-wrap:wrap; }
.btn-rec { display:inline-flex; align-items:center; gap:10px; border:none; cursor:pointer; font-size:15px;
  font-weight:700; padding:14px 26px; border-radius:40px; transition:all .15s; box-shadow:0 3px 10px rgba(224,62,62,.3); }
.btn-rec.idle { background:var(--red); color:#fff; }
.btn-rec.idle:hover { transform:translateY(-1px); box-shadow:0 5px 16px rgba(224,62,62,.4); }
.btn-rec.recording { background:var(--ink); color:#fff; box-shadow:0 3px 10px rgba(30,34,48,.3); }
.btn-rec .mic-dot { width:12px; height:12px; border-radius:50%; background:#fff; }
.btn-rec.recording .mic-dot { animation:pulse 1s infinite; background:var(--red); }
@keyframes pulse { 0%,100%{opacity:1;} 50%{opacity:.25;} }
.waveform { display:flex; align-items:center; justify-content:center; gap:3px; height:34px; margin:14px 0 4px; }
.waveform .bar { width:3px; background:var(--gold); border-radius:2px; height:6px; transition:height .1s; }
audio { width:100%; margin-top:16px; }
.playback-row { margin-top:14px; display:none; }
.playback-row.show { display:block; }
.saved-actions { display:flex; gap:10px; margin-top:18px; flex-wrap:wrap; }
.btn-load-saved { background:#1e3a5f; color:#fff; border:none; border-radius:6px; padding:8px 16px;
  font-size:.85rem; font-weight:600; cursor:pointer; }
.btn-load-saved:hover { background:#254d80; }
.btn-clear-saved { background:transparent; color:#b91c1c; border:1.5px solid #b91c1c; border-radius:6px;
  padding:8px 16px; font-size:.85rem; font-weight:600; cursor:pointer; }
.btn-clear-saved:hover { background:#b91c1c; color:#fff; }
.rerecord { background:transparent; border:none; color:var(--navy-light); font-size:13px; font-weight:600;
  cursor:pointer; margin-top:10px; text-decoration:underline; }
.err { background:#fef2f2; border:1px solid #fecaca; color:#991b1b; padding:12px 14px; border-radius:10px;
  font-size:13px; margin-top:14px; display:none; }
.err.show { display:block; }

.reveal-bar { margin-top:20px; }
.btn-reveal { width:100%; background:var(--navy); color:#fff; border:none; cursor:pointer; padding:13px;
  border-radius:11px; font-size:14px; font-weight:700; display:flex; align-items:center; justify-content:center; gap:8px; }
.btn-reveal:hover { background:var(--navy-light); }
.btn-reveal .chev { transition:transform .2s; }
.btn-reveal.open .chev { transform:rotate(180deg); }
.hints { margin-top:16px; display:none; }
.hints.show { display:block; animation:fade .25s ease; }
@keyframes fade { from{opacity:0;transform:translateY(-4px);} to{opacity:1;transform:none;} }
.callout { border-radius:11px; padding:13px 15px; margin-bottom:12px; font-size:14px; }
.callout .lbl { display:block; font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:.8px; margin-bottom:5px; }
.callout.signal { background:var(--card-alt); border-left:4px solid var(--signal-bd); } .callout.signal .lbl { color:var(--signal-bd); }
.callout.qbq { background:var(--card-alt); border-left:4px solid var(--qbq-bd); } .callout.qbq .lbl { color:var(--qbq-bd); }
.callout.structure { background:var(--card-alt); border-left:4px solid var(--green); } .callout.structure .lbl { color:var(--green); }
.callout.watch { background:var(--card-alt); border-left:4px solid var(--watch-bd); } .callout.watch .lbl { color:var(--gold-dark); }
.scaffold { background:var(--card-alt); border:1px solid var(--line); border-radius:12px; padding:16px; margin-top:6px; }
.scaffold-title { font-size:12px; font-weight:800; text-transform:uppercase; letter-spacing:.8px; color:var(--gold-dark); margin-bottom:12px; }
.scaffold-item { margin-bottom:12px; } .scaffold-item:last-child { margin-bottom:0; }
.scaffold-item .sl { display:inline-block; font-size:11px; font-weight:800; color:var(--ink); background:var(--card-alt); border:1px solid var(--line); padding:2px 9px; border-radius:5px; margin-bottom:5px; }
.scaffold-item .st { font-size:14px; color:var(--ink); }

.pb-actions { display:flex; align-items:center; justify-content:center; gap:18px; margin-top:12px; flex-wrap:wrap; }
.upload-answer { margin-top:18px; padding-top:16px; border-top:1px dashed var(--border,#d9cdb0); }
.upload-answer .ua-hint { font-size:12.5px; color:var(--muted); margin-bottom:10px; }
.upload-answer .ua-hint b { color:var(--gold-dark); }
.ua-filename { font-size:12.5px; color:var(--muted); font-style:italic; }
.btn-score { background:linear-gradient(135deg,var(--gold-dark),var(--gold)); color:var(--navy); border:none;
  cursor:pointer; font-size:14px; font-weight:800; padding:12px 24px; border-radius:40px;
  box-shadow:0 3px 10px rgba(200,134,10,.35); transition:all .15s; }
.btn-score:hover:not(:disabled) { transform:translateY(-1px); box-shadow:0 5px 16px rgba(200,134,10,.45); }
.btn-score:disabled { opacity:.5; cursor:not-allowed; }

.rating { display:none; margin-top:18px; } .rating.show { display:block; animation:fade .3s ease; }
.scoring-status { display:none; align-items:center; gap:16px; background:var(--card-alt); border:1px solid var(--line); border-radius:14px; padding:20px; }
.scoring-status.show { display:flex; }
.ss-title { font-weight:700; color:var(--ink); font-size:15px; } .ss-sub { font-size:13px; color:var(--muted); }
.spinner { width:30px; height:30px; border-radius:50%; flex-shrink:0; border:3px solid #e3e6ee; border-top-color:var(--gold-dark); animation:spin .8s linear infinite; }
@keyframes spin { to{transform:rotate(360deg);} }
.rating-body { display:none; } .rating-body.show { display:block; }
.score-hero { display:flex; align-items:center; gap:22px; background:linear-gradient(135deg,var(--navy),var(--navy-light)); border-radius:16px; padding:22px 24px; color:#fff; margin-bottom:18px; }
.score-ring { width:108px; height:108px; border-radius:50%; flex-shrink:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:0; background:conic-gradient(var(--gold) var(--pct,0%),rgba(255,255,255,.14) 0); position:relative; }
.score-ring::before { content:""; position:absolute; inset:9px; border-radius:50%; background:var(--navy); }
.score-val { position:relative; font-size:27px; font-weight:800; color:var(--gold); line-height:1; }
.score-max { position:relative; font-size:11px; color:#b9c3de; font-weight:600; line-height:1; margin-top:2px; }
.sv-label { font-size:11px; text-transform:uppercase; letter-spacing:1px; color:var(--gold); font-weight:700; margin-bottom:6px; }
.sv-text { font-size:16px; font-weight:600; line-height:1.45; }
.dims { display:grid; gap:10px; margin-bottom:18px; }
.dim-row { background:var(--card-alt); border:1px solid var(--line); border-radius:11px; padding:12px 14px; }
.dim-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:7px; }
.dim-name { font-weight:700; font-size:14px; color:var(--ink); }
.dim-score { font-weight:800; font-size:14px; font-variant-numeric:tabular-nums; }
.dim-bar { height:7px; border-radius:4px; background:var(--line); overflow:hidden; margin-bottom:7px; }
.dim-fill { height:100%; border-radius:4px; transition:width .5s ease; }
.dim-note { font-size:13px; color:var(--muted); }
.feedback-cols { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-bottom:14px; }
.fb { border-radius:12px; padding:14px 16px; } .fb-title { font-size:13px; font-weight:800; margin-bottom:8px; }
.fb ul { margin:0; padding-left:18px; } .fb li { font-size:13.5px; margin-bottom:6px; color:var(--ink); }
.fb-good { background:var(--card-alt); border:1px solid var(--line); border-left:4px solid var(--green); } .fb-good .fb-title { color:var(--green); }
.fb-improve { background:var(--card-alt); border:1px solid var(--line); border-left:4px solid var(--watch-bd); } .fb-improve .fb-title { color:var(--gold-dark); }
.fb-missing { background:var(--card-alt); border:1px solid var(--line); border-left:4px solid var(--red); margin-bottom:14px; } .fb-missing .fb-title { color:var(--red); }

/* ===== CARL breakdown ===== */
.carl-box { background:var(--card-alt); border:1px solid var(--line); border-radius:11px; padding:14px 16px; margin-top:14px; }
.carl-title { font-size:12px; font-weight:800; text-transform:uppercase; letter-spacing:.8px; color:var(--ink); margin-bottom:10px; }
.carl-legend { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:12px; }
.carl-legend span { font-size:11px; font-weight:700; padding:2px 9px; border-radius:20px; color:#fff; }
.carl-seg-wrap { line-height:2.1; }
.carl-seg { display:inline; padding:2px 0; }
.carl-seg .pill { display:inline-block; font-size:10px; font-weight:800; color:#fff; padding:1px 7px;
  border-radius:20px; margin:0 5px 0 3px; vertical-align:middle; }
.lbl-C { background:var(--carl-c); } .lbl-A { background:var(--carl-a); } .lbl-R { background:var(--carl-r); }
.lbl-L { background:var(--carl-l); } .lbl-Q { background:var(--carl-q); }
.seg-C { background:rgba(37,99,235,.10); } .seg-A { background:rgba(217,119,6,.12); }
.seg-R { background:rgba(31,157,85,.12); } .seg-L { background:rgba(124,58,237,.12); }
.seg-Q { background:rgba(148,163,184,.15); }

.transcript-box { background:var(--card-alt); border:1px solid var(--line); border-radius:11px; padding:4px 14px; margin-top:14px; }
.transcript-box summary { cursor:pointer; font-size:13px; font-weight:600; color:var(--ink); padding:10px 0; }
.transcript-box p { font-size:13.5px; color:var(--muted); font-style:italic; margin:4px 0 12px; }

/* ===== DAY-OF PREP ===== */
.dayof-head { display:flex; align-items:center; justify-content:space-between; gap:14px; margin-bottom:20px; flex-wrap:wrap; }
.dayof-head h2 { margin:0; color:var(--ink); font-size:22px; }
.dayof-head .do-sub { font-size:13px; color:var(--muted); }
.toggle-btn { background:var(--card); border:1.5px solid var(--line); border-radius:9px; padding:9px 16px; font-size:13px;
  font-weight:600; color:var(--ink); cursor:pointer; }
.toggle-btn:hover { border-color:var(--navy-light); }
.tile-grid { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.tile { background:var(--card); border:1px solid var(--line); border-radius:14px; padding:18px; cursor:pointer;
  transition:box-shadow .15s,transform .15s; position:relative; display:flex; flex-direction:column; }
.tile:hover { box-shadow:0 6px 22px rgba(13,27,62,.10); transform:translateY(-2px); }
.tile-top { display:flex; align-items:flex-start; gap:10px; margin-bottom:12px; }
.tile-num { background:var(--gold); color:var(--navy); font-weight:800; font-size:12px; padding:3px 9px; border-radius:6px; flex-shrink:0; cursor:pointer; transition:filter .12s; }
.tile-num:hover { filter:brightness(.92); }
.tile-q { font-size:15px; font-weight:700; color:var(--ink); line-height:1.35; display:-webkit-box;
  -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.tile-carl { display:flex; flex-direction:column; gap:6px; margin-bottom:12px; }
.tile-carl.hidden { display:none; }
.carl-row { display:flex; gap:8px; font-size:12px; color:var(--muted); line-height:1.4; }
.carl-row .k { flex-shrink:0; font-weight:800; }
.carl-row .k.C { color:var(--carl-c); } .carl-row .k.A { color:var(--carl-a); }
.carl-row .k.R { color:var(--carl-r); } .carl-row .k.L { color:var(--carl-l); }
.tile-foot { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:auto; }
.score-chip { font-size:12px; font-weight:800; padding:3px 11px; border-radius:20px; }
.score-chip.none { background:var(--card-alt); color:var(--muted); font-weight:600; }
.tile-rec { background:var(--red); color:#fff; border:none; border-radius:40px; padding:7px 14px; font-size:13px;
  font-weight:700; cursor:pointer; display:inline-flex; align-items:center; gap:6px; }
.tile-rec.recording { background:var(--ink); }
.tile-rec:disabled { opacity:.5; cursor:not-allowed; }
.tile-mini { margin-top:12px; font-size:12px; color:var(--muted); border-top:1px dashed var(--line); padding-top:10px; display:none; }
.tile-mini.show { display:block; }
.tile-mini .mini-score { font-weight:800; }

/* ===== DAY-OF POINTS ===== */
.points-controls { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
/* segmented size control */
.size-seg { display:inline-flex; border:1.5px solid var(--line); border-radius:9px; overflow:hidden; background:var(--card); }
.size-seg button { background:transparent; border:none; padding:8px 13px; font-size:12.5px; font-weight:600;
  color:var(--muted); cursor:pointer; border-left:1px solid var(--line); }
.size-seg button:first-child { border-left:none; }
.size-seg button:hover { color:var(--ink); }
.size-seg button.active { background:var(--navy); color:#fff; }
.toggle-btn.active { background:var(--navy); color:#fff; border-color:var(--navy); }

/* minmax(0, 1fr) (not the default minmax(auto,1fr)) lets each column shrink
   below its content width, so tiles never push the grid past the container and
   get cut off on narrow windows — especially in dense mini (5-col) mode. */
.points-grid { display:grid; gap:14px; grid-template-columns:repeat(2, minmax(0, 1fr)); }
.points-grid.size-normal  { grid-template-columns:repeat(2, minmax(0, 1fr)); }
.points-grid.size-compact { grid-template-columns:repeat(3, minmax(0, 1fr)); gap:11px; }
.points-grid.size-mini    { grid-template-columns:repeat(5, minmax(0, 1fr)); gap:8px; }
.points-empty, .points-grid > div[style] { grid-column:1/-1; }
.points-empty { color:var(--muted); font-size:13.5px; padding:20px; text-align:center; }

.points-tile { background:var(--card); border:1px solid var(--line); border-radius:12px; padding:14px;
  display:flex; flex-direction:column; gap:9px; position:relative; transition:box-shadow .15s;
  min-width:0; overflow:hidden; }
.points-tile:hover { box-shadow:0 5px 18px rgba(13,27,62,.09); }
.points-tile.pt-loading { opacity:.5; pointer-events:none; }

/* ---- "Most likely 9" highlight (colored outline + ask-order badge) ---- */
.points-tile.pt-likely { border-color:transparent;
  outline:2.5px solid var(--gold, #d4af37); outline-offset:1px;
  box-shadow:0 4px 16px color-mix(in srgb, var(--gold, #d4af37) 32%, transparent); }
.pt-star { line-height:1; }
.pt-star.active { color:var(--navy, #0d1b3e);
  background:color-mix(in srgb, var(--gold, #d4af37) 40%, var(--card));
  border-color:var(--gold, #d4af37); }
.pt-star.active:hover { color:var(--navy, #0d1b3e); }
.pt-likely-badge { position:absolute; top:-11px; right:-11px; z-index:3;
  min-width:26px; height:26px; padding:0 6px; border-radius:999px;
  display:inline-flex; align-items:center; justify-content:center;
  background:var(--gold, #d4af37); color:var(--navy, #0d1b3e);
  font-size:13px; font-weight:900; line-height:1;
  border:2px solid var(--card); box-shadow:0 2px 6px rgba(13,27,62,.28); }

/* ---- Hidden tiles section (de-emphasised, at the bottom of the page) ---- */
.points-hidden-section { margin-top:26px; padding-top:16px; border-top:1px dashed var(--line); }
.points-hidden-head { font-size:13px; font-weight:800; letter-spacing:.04em; text-transform:uppercase;
  color:var(--muted); margin:0 0 12px; }
.points-hidden-head span { font-weight:700; opacity:.75; }
.points-hidden-grid { display:flex; flex-direction:column; gap:8px; }
.points-hidden-tile { display:flex; align-items:center; gap:10px; padding:8px 12px; border-radius:9px;
  background:color-mix(in srgb, var(--ink) 7%, transparent);
  border:1px solid color-mix(in srgb, var(--ink) 10%, transparent);
  opacity:.62; transition:opacity .15s, filter .15s; }
.points-hidden-tile:hover { opacity:.9; }
.pht-num { background:color-mix(in srgb, var(--gold) 55%, var(--card)); color:var(--navy); font-weight:800;
  font-size:10.5px; padding:2px 8px; border-radius:6px; flex-shrink:0; }
.pht-q { flex:1; font-size:12.5px; font-weight:700; color:var(--ink); line-height:1.3;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.pht-unhide { flex-shrink:0; background:var(--card); border:1px solid var(--navy-light); color:var(--navy);
  border-radius:6px; padding:4px 12px; font-size:11.5px; font-weight:700; cursor:pointer; line-height:1.4;
  transition:background .12s, color .12s; }
.pht-unhide:hover { background:var(--navy); color:#fff; border-color:var(--navy); }
.pt-top { display:flex; align-items:center; gap:8px; min-width:0; }
.pt-num { background:var(--gold); color:var(--navy); font-weight:800; font-size:11px; padding:2px 8px; border-radius:6px; flex-shrink:0; }
.pt-num-link { cursor:pointer; transition:filter .12s, box-shadow .12s; }
.pt-num-link:hover { filter:brightness(1.08); box-shadow:0 0 0 2px rgba(0,0,0,.12) inset; }
.pt-edited-dot { color:var(--gold); font-size:9px; line-height:1; }
/* Drag-to-reorder (Day-of Points only) */
.pt-drag { flex-shrink:0; cursor:grab; color:var(--muted); font-size:14px; line-height:1;
  padding:2px 3px; border-radius:5px; user-select:none; -webkit-user-select:none; letter-spacing:-1px; }
.pt-drag:hover { color:var(--ink); background:var(--card-alt); }
.pt-drag:active { cursor:grabbing; }
.points-tile.pt-dragging { opacity:.45; box-shadow:0 8px 24px rgba(13,27,62,.18);
  outline:2px dashed var(--navy-light); outline-offset:2px; }
.pt-toolbar { margin-left:auto; display:flex; align-items:center; gap:4px; }
.pt-btn { background:var(--card-alt); border:1px solid var(--line); border-radius:6px; padding:3px 8px; font-size:12px;
  font-weight:700; color:var(--muted); cursor:pointer; line-height:1.4; }
.pt-btn:hover { color:var(--ink); border-color:var(--navy-light); }
.pt-toggle { font-size:11px; padding:3px 9px; }
.pt-q { font-size:13px; font-weight:700; color:var(--ink); line-height:1.3; display:-webkit-box;
  -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.pt-q[contenteditable] { cursor:text; border-radius:4px; padding:1px 3px; margin:-1px -3px; }
.pt-q[contenteditable]:hover { background:var(--card-alt); }
.pt-q[contenteditable]:focus { outline:none; background:var(--card-alt); box-shadow:0 0 0 1.5px var(--navy-light);
  display:block; -webkit-line-clamp:unset; overflow:visible; }
.pt-cues { display:flex; flex-direction:column; gap:5px; min-width:0; }
/* Global "Hide points" toggle: hide ALL cue points, keep tile shells + titles visible */
.points-grid.points-hide-cues .pt-cues,
.points-grid.points-hide-cues .pt-empty { display:none; }
.pt-row { display:flex; gap:8px; align-items:baseline; font-size:12.5px; line-height:1.35; min-width:0; }
.pt-k { flex-shrink:0; font-weight:800; font-size:11px; min-width:20px; }
.pt-txt { color:var(--ink); flex:1; min-width:0; border-radius:4px; padding:1px 3px; overflow-wrap:anywhere; word-break:break-word; }
.pt-txt[contenteditable] { cursor:text; }
.pt-txt[contenteditable]:hover { background:var(--card-alt); }
.pt-txt[contenteditable]:focus { outline:none; background:var(--card-alt); box-shadow:0 0 0 1.5px var(--navy-light); }
.pt-empty { font-size:12px; color:var(--muted); }
.pt-empty .pt-gen-one { background:var(--navy); color:#fff; border:none; border-radius:6px; padding:4px 10px;
  font-size:12px; font-weight:700; cursor:pointer; margin-left:4px; }

/* Compact tightening */
.points-grid.size-compact .points-tile { padding:11px; gap:7px; border-radius:10px; }
.points-grid.size-compact .pt-q { font-size:12px; -webkit-line-clamp:1; }
.points-grid.size-compact .pt-row { font-size:11.5px; }

/* Mini: dense one-screen glance */
.points-grid.size-mini .points-tile { padding:8px; gap:5px; border-radius:8px; }
.points-grid.size-mini .pt-num { font-size:10px; padding:1px 6px; }
.points-grid.size-mini .pt-drag { font-size:12px; padding:1px 2px; }
.points-grid.size-mini .pt-q { font-size:11px; -webkit-line-clamp:1; margin-bottom:1px; }
.points-grid.size-mini .pt-row { font-size:10.5px; gap:5px; line-height:1.25; }
.points-grid.size-mini .pt-k { min-width:15px; font-size:9.5px; }
.points-grid.size-mini .pt-btn { padding:1px 5px; font-size:10px; }
.points-grid.size-mini .pt-toggle { font-size:9.5px; padding:1px 5px; }
.points-grid.size-mini .pt-toolbar { gap:3px; }

@media (max-width:1060px) {
  .points-grid.size-normal { grid-template-columns:1fr; }
  .points-grid.size-compact { grid-template-columns:repeat(2, 1fr); }
  .points-grid.size-mini { grid-template-columns:repeat(3, 1fr); }
}
@media (max-width:560px) {
  .points-grid.size-compact, .points-grid.size-mini { grid-template-columns:repeat(2, 1fr); }
}

/* ===== MODAL ===== */
.modal-backdrop { display:none; position:fixed; inset:0; background:rgba(9,15,34,.55); z-index:60;
  align-items:center; justify-content:center; padding:20px; }
.modal-backdrop.show { display:flex; }
.modal { background:var(--card); border-radius:18px; width:100%; max-width:520px; max-height:90vh; overflow-y:auto;
  box-shadow:0 24px 70px rgba(0,0,0,.4); }
.modal-head { padding:22px 24px 6px; }
.modal-head h2 { margin:0 0 4px; font-size:20px; color:var(--ink); }
.modal-head p { margin:0; font-size:13px; color:var(--muted); }
.modal-body { padding:16px 24px 8px; }
.field { margin-bottom:16px; }
.field label { display:block; font-size:12.5px; font-weight:700; color:var(--ink); margin-bottom:6px; }
.field .hint { font-weight:500; color:var(--muted); font-size:11.5px; }
.field input, .field textarea { width:100%; border:1.5px solid var(--line); border-radius:9px; padding:10px 12px;
  font-size:14px; font-family:inherit; color:var(--ink); }
.field input:focus, .field textarea:focus { outline:none; border-color:var(--navy-light); }
.field textarea { resize:vertical; min-height:72px; }
.divider-or { text-align:center; font-size:11px; color:var(--muted); text-transform:uppercase; letter-spacing:1px;
  margin:6px 0 14px; position:relative; }
.modal-foot { padding:8px 24px 22px; display:flex; gap:10px; justify-content:flex-end; }
.btn-secondary { background:var(--card); border:1.5px solid var(--line); color:var(--ink); border-radius:9px;
  padding:11px 18px; font-size:14px; font-weight:600; cursor:pointer; }
.btn-secondary:hover { border-color:var(--navy-light); }
.btn-primary { background:var(--navy); color:#fff; border:none; border-radius:9px; padding:11px 20px;
  font-size:14px; font-weight:700; cursor:pointer; display:inline-flex; align-items:center; gap:8px; }
.btn-primary:hover { background:var(--navy-light); }
.btn-primary:disabled { opacity:.6; cursor:not-allowed; }
.btn-primary .spinner { width:16px; height:16px; border-width:2px; border-top-color:#fff; border-color:rgba(255,255,255,.35); border-top-color:#fff; }

footer { text-align:center; font-size:11.5px; color:var(--muted); padding:20px; }

/* ===== RESPONSIVE ===== */

/* ── Medium (foldable unfolded, large tablets: 769 – 1200 px) ── */
@media (min-width:769px) and (max-width:1200px) {
  /* Let practice view use the full available width */
  main.view-practice { max-width:100%; }
}

/* ── Action buttons shrink to icon-only below 960px ── */
@media (max-width:960px) {
  .tb-icon-btn .btn-label { display:none; }
  .tb-icon-btn .btn-icon { margin-right:0; }
  .tb-icon-btn { padding:7px 10px; }
  .tb-title { font-size:13px; }
}

/* Tile grid: 2-col when content area can fit it */
@media (max-width:1060px) { .tile-grid { grid-template-columns:1fr; } }

/* ── Mobile overlay (≤ 768 px) ── */
@media (max-width:768px) {
  /* Drawer becomes a full-screen overlay — no layout shift */
  .drawer { transform:translateX(-100%); box-shadow:0 0 40px rgba(0,0,0,.4); }
  .drawer.open { transform:translateX(0); }
  /* Content fills the full width; drawer overlays on top */
  .content { margin-left:0 !important; }
  /* Collapsed state is irrelevant on mobile — override it */
  .app-shell.drawer-collapsed .content { margin-left:0; }
}

@media (max-width:560px) {
  .feedback-cols { grid-template-columns:1fr; }
  .score-hero { flex-direction:column; text-align:center; }
  .q-text { font-size:20px; } .rec-timer { font-size:34px; }
}



/* ============================================================= THEMES */

/* ── DARK THEMES ── */
/* Each dark theme overrides both chrome vars (drawer/topbar) and
   content vars (bg/card/card-alt/ink/line/muted) so the whole UI goes dark. */

body[data-theme="midnight"] {
  --navy:#0a0d14; --navy-light:#241b45; --gold:#7c3aed; --gold-dark:#6d28d9;
  --chrome-from:#12152a; --chrome-to:#0c0f1e;
  --bg:#141728; --card:#1c2040; --card-alt:#232752; --ink:#d4d8f0; --muted:#7279a0; --line:rgba(255,255,255,.09);
}
body[data-theme="forest"] {
  --navy:#0d2b1f; --navy-light:#12432f; --gold:#10b981; --gold-dark:#059669;
  --chrome-from:#0f2218; --chrome-to:#091610;
  --bg:#111d14; --card:#172a1c; --card-alt:#1e3525; --ink:#c8e6d0; --muted:#6b9477; --line:rgba(255,255,255,.09);
}
body[data-theme="slate"] {
  --navy:#1e293b; --navy-light:#334155; --gold:#38bdf8; --gold-dark:#0284c7;
  --chrome-from:#253347; --chrome-to:#1a2535;
  --bg:#161e2b; --card:#1e2a3b; --card-alt:#253347; --ink:#dde3f0; --muted:#8b97b8; --line:rgba(255,255,255,.09);
}
body[data-theme="warm"] {
  --navy:#1c1209; --navy-light:#4a2f12; --gold:#f59e0b; --gold-dark:#d97706;
  --chrome-from:#241808; --chrome-to:#160e04;
  --bg:#181108; --card:#241a0d; --card-alt:#2e2212; --ink:#eddcc4; --muted:#9a7e58; --line:rgba(255,255,255,.09);
}
body[data-theme="charcoal"] {
  --navy:#111827; --navy-light:#374151; --gold:#f97316; --gold-dark:#ea580c;
  --chrome-from:#1a1a1a; --chrome-to:#111111;
  --bg:#181818; --card:#222222; --card-alt:#2a2a2a; --ink:#e4e4e7; --muted:#71717a; --line:rgba(255,255,255,.09);
}
body[data-theme="ocean"] {
  --navy:#0a1930; --navy-light:#0f2d4a; --gold:#22d3ee; --gold-dark:#06b6d4;
  --chrome-from:#0d1e35; --chrome-to:#081428;
  --bg:#0e1c30; --card:#152640; --card-alt:#1b304e; --ink:#cce8f4; --muted:#5b8fa8; --line:rgba(255,255,255,.09);
}
body[data-theme="crimson"] {
  --navy:#1c0a0a; --navy-light:#3d1010; --gold:#fb7185; --gold-dark:#f43f5e;
  --chrome-from:#1a0c0c; --chrome-to:#110808;
  --bg:#1a0d0f; --card:#251518; --card-alt:#2e1c20; --ink:#f4d0d5; --muted:#a06070; --line:rgba(255,255,255,.09);
}
body[data-theme="dusk"] {
  --navy:#12102a; --navy-light:#1e1b45; --gold:#a78bfa; --gold-dark:#8b5cf6;
  --chrome-from:#19163a; --chrome-to:#100e28;
  --bg:#17152e; --card:#201d3e; --card-alt:#28254c; --ink:#d8d4f5; --muted:#7b74b0; --line:rgba(255,255,255,.09);
}

/* ── LIGHT THEMES ── */
/* Light themes: dark chrome (sidebar + topbar stay dark via --chrome-from/to),
   but content area uses light --bg / --card / --ink / --line */

/* paper — clean white, navy accent */
body[data-theme="paper"] {
  --navy:#1e3a5f; --navy-light:#2d5282; --gold:#2563eb; --gold-dark:#1d4ed8;
  --ink:#0f172a; --muted:#64748b; --bg:#f8fafc; --card:#ffffff; --line:#e2e8f0;
  --chrome-from:#0f172a; --chrome-to:#020617;
}
/* sand — warm cream, terracotta accent */
body[data-theme="sand"] {
  --navy:#7c2d12; --navy-light:#9a3412; --gold:#ea580c; --gold-dark:#c2410c;
  --ink:#431407; --muted:#92400e; --bg:#fef9f0; --card:#fffdf7; --line:#fed7aa;
  --chrome-from:#3d1207; --chrome-to:#1c0702;
}
/* sky — airy blue, indigo accent */
body[data-theme="sky"] {
  --navy:#1e3a8a; --navy-light:#1d4ed8; --gold:#4f46e5; --gold-dark:#4338ca;
  --ink:#1e1b4b; --muted:#6b7280; --bg:#eff6ff; --card:#ffffff; --line:#bfdbfe;
  --chrome-from:#1e1b4b; --chrome-to:#0f0e2a;
}
/* mint — fresh white, emerald accent */
body[data-theme="mint"] {
  --navy:#064e3b; --navy-light:#065f46; --gold:#059669; --gold-dark:#047857;
  --ink:#022c22; --muted:#4b7a64; --bg:#f0fdf4; --card:#ffffff; --line:#bbf7d0;
  --chrome-from:#022c22; --chrome-to:#011812;
}

/* ===== THEME PICKER (drawer footer) ===== */
.theme-picker { display:flex; flex-direction:column; gap:8px; margin-bottom:12px; }
.tp-section { display:flex; align-items:center; gap:8px; }
.tp-row-label { font-size:10px; text-transform:uppercase; letter-spacing:.8px;
  color:#8b97b8; font-weight:700; width:30px; flex-shrink:0; line-height:1; }
.tp-dots { display:flex; flex-wrap:wrap; gap:5px; }
.tp-dot { width:20px; height:20px; border-radius:50%; cursor:pointer; padding:0;
  border:2px solid rgba(255,255,255,.22); flex-shrink:0;
  background:linear-gradient(135deg,var(--c1) 0 55%,var(--c2) 55% 100%); }
.tp-dot:hover { transform:scale(1.15); border-color:rgba(255,255,255,.5); }
.tp-dot.active { border-color:#fff; box-shadow:0 0 0 2px rgba(255,255,255,.4); }
/* light theme dots: dark border so they're visible on the light half */
.tp-dot[data-light] { border-color:rgba(0,0,0,.25); }
.tp-dot[data-light]:hover { border-color:rgba(0,0,0,.5); }
.tp-dot[data-light].active { border-color:rgba(0,0,0,.7); box-shadow:0 0 0 2px rgba(0,0,0,.2); }

/* ===== TOPBAR right cluster + icon buttons ===== */
.tb-right { display:flex; align-items:center; gap:8px; flex-shrink:0; flex-wrap:wrap; justify-content:flex-end; }
.tb-icon-btn { background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.22);
  color:#fff; border-radius:8px; padding:9px 14px; font-size:13px; font-weight:600;
  cursor:pointer; white-space:nowrap; }
.tb-icon-btn:hover { background:rgba(255,255,255,.22); }

/* Short labels at medium widths: hide the text span, keep the icon */
.tb-icon-btn .btn-label { display:inline; }
.tb-icon-btn .btn-icon { display:inline; margin-right:5px; }
.export-wrap { position:relative; }
.export-menu { display:none; position:absolute; right:0; top:calc(100% + 6px); background:var(--card);
  border:1px solid var(--line); border-radius:10px; box-shadow:0 8px 26px rgba(0,0,0,.18);
  min-width:200px; z-index:50; overflow:hidden; }
.export-menu.show { display:block; }
.export-menu a { display:block; padding:11px 16px; font-size:13.5px; color:var(--ink);
  text-decoration:none; font-weight:600; }
.export-menu a:hover { background:var(--card-alt); color:var(--ink); }
.export-sep { height:1px; background:var(--line); margin:2px 0; }
.export-menu { min-width:230px; }

/* ===== EDIT QUESTION ===== */
.q-edit-btn { margin-left:auto; background:transparent; border:1px solid var(--line);
  color:var(--muted); border-radius:7px; padding:4px 10px; font-size:12px; font-weight:600;
  cursor:pointer; }
.q-edit-btn:hover { color:var(--ink); border-color:var(--navy-light); }
.q-star-btn { background:transparent; border:1px solid var(--line);
  color:var(--muted); border-radius:7px; padding:4px 10px; font-size:14px; font-weight:600;
  cursor:pointer; line-height:1; }
.q-star-btn:hover { color:var(--ink); border-color:var(--navy-light); }
.q-star-btn.active { color:var(--navy, #0d1b3e);
  background:color-mix(in srgb, var(--gold, #d4af37) 40%, var(--card));
  border-color:var(--gold, #d4af37); }
.q-star-btn.active:hover { color:var(--navy, #0d1b3e); }
.q-delete-btn { background:transparent; border:1px solid var(--line);
  color:#e05555; border-radius:7px; padding:4px 9px; font-size:12px; font-weight:600;
  cursor:pointer; line-height:1; }
.q-delete-btn:hover { color:#fff; background:#e05555; border-color:#e05555; }
.q-delete-btn:disabled { opacity:0.55; cursor:default; }
.q-text[contenteditable="true"] { outline:2px solid var(--gold); outline-offset:3px;
  border-radius:6px; background:var(--card-alt); cursor:text; }
.q-edit-row { display:flex; gap:8px; margin:-8px 0 16px; flex-wrap:wrap; }
.q-edit-row.hidden { display:none; }
.btn-mini { background:var(--navy); color:#fff; border:none; border-radius:7px; padding:7px 14px;
  font-size:12.5px; font-weight:700; cursor:pointer; }
.btn-mini:hover { background:var(--navy-light); }
.btn-mini.ghost { background:var(--card); color:var(--ink); border:1px solid var(--line); }
.btn-mini.ghost:hover { border-color:var(--navy-light); color:var(--ink); }
.btn-mini.gold { background:linear-gradient(135deg,var(--gold-dark),var(--gold)); color:var(--navy); }

/* Rebuild actions row on the Session Info page */
.rebuild-actions { display:flex; flex-wrap:wrap; gap:10px; }
.rebuild-actions .btn-mini.hidden { display:none; }

/* Regen-scaffold "Base on" story picker */
.regen-story-pick { display:inline-flex; align-items:center; gap:6px; }
.regen-story-pick.hidden { display:none; }
.regen-story-label { font-size:12px; font-weight:700; color:var(--muted); }
.regen-story-pick select {
  background:var(--card); color:var(--ink); border:1px solid var(--line);
  border-radius:7px; padding:6px 10px; font-size:12.5px; font-weight:600;
  max-width:230px; cursor:pointer; }
.regen-story-pick select:hover { border-color:var(--navy-light); }

/* ===== ANSWER MODE TABS ===== */
.answer-tabs { display:flex; gap:6px; background:var(--card-alt); border:1px solid var(--line); padding:4px; border-radius:10px;
  margin-bottom:14px; width:fit-content; }
.answer-tabs button { border:none; background:transparent; padding:8px 18px; border-radius:7px;
  font-size:13px; font-weight:600; color:var(--muted); cursor:pointer; }
.answer-tabs button.active { background:var(--card); color:var(--ink); box-shadow:0 1px 4px rgba(0,0,0,.1); }

/* ===== TEXT ANSWER MODE ===== */
.text-answer { margin-bottom:4px; }
.text-answer.hidden { display:none; }
.text-answer textarea { width:100%; min-height:150px; border:1.5px solid var(--line); border-radius:12px;
  padding:14px; font-size:14.5px; font-family:inherit; color:var(--ink); resize:vertical; line-height:1.6; }
.text-answer textarea:focus { outline:none; border-color:var(--navy-light); }
.text-answer .pb-actions { margin-top:12px; }

/* ===== ADD QUESTION ===== */
.add-q-row { text-align:center; margin-top:20px; display:flex; gap:10px; justify-content:center; flex-wrap:wrap; }
.btn-add-q { background:var(--card); border:1.5px dashed var(--navy-light); color:var(--ink);
  border-radius:11px; padding:12px 22px; font-size:14px; font-weight:700; cursor:pointer; }
.btn-add-q:hover { background:var(--card-alt); }
.btn-add-blank { opacity:0.72; font-weight:600; }
.btn-add-blank:hover { opacity:1; }

/* ===== SPLIT VIEW ===== */
.split-wrap { display:grid; grid-template-columns:var(--sc-left,1.4fr) 6px var(--sc-mid,1fr) 6px var(--sc-right,1fr);
  gap:0; padding:16px 18px 40px; align-items:stretch; min-height:0; }
.split-wrap.hidden { display:none; }
.split-panel { min-width:0; overflow:auto; }
.split-panel.split-doc { background:var(--card); border:1px solid var(--line); border-radius:14px;
  display:flex; flex-direction:column; max-height:calc(100vh - 120px); }
#splitLeft { overflow:auto; max-height:calc(100vh - 120px); padding-right:6px; }
#splitLeft .view-practice { max-width:none; padding:0 6px; }
.sp-head { display:flex; align-items:center; justify-content:space-between; padding:12px 16px;
  border-bottom:1px solid var(--line); font-weight:800; font-size:13px; color:var(--ink);
  background:var(--card-alt); border-radius:14px 14px 0 0; position:sticky; top:0; z-index:2; }
.sp-close { background:transparent; border:none; font-size:18px; color:var(--muted); cursor:pointer; line-height:1; }
.sp-close:hover { color:var(--red); }
.sp-body { padding:16px; font-size:13.5px; color:var(--ink); white-space:pre-wrap; line-height:1.65; overflow-wrap:anywhere; }
.split-handle { cursor:col-resize; background:transparent; position:relative; }
.split-handle::before { content:""; position:absolute; left:50%; top:12px; bottom:12px; width:3px;
  transform:translateX(-50%); background:var(--line); border-radius:3px; }
.split-handle:hover::before { background:var(--navy-light); }
.split-panel.collapsed { display:none; }

/* Prep + Day-of split: two equal, independently-scrolling app-view panes */
.split-wrap-2 { grid-template-columns:var(--sc2-left,1fr) 6px var(--sc2-right,1fr); }
#splitPaneA, #splitPaneB { overflow:auto; max-height:calc(100vh - 120px); padding:0 6px; }
#splitPaneA .view, #splitPaneB .view { max-width:none; padding:0 4px; }
/* Views are shown inside the panes even though setView's .hidden toggling is
   suppressed while this split is active — force them visible here defensively. */
#splitPaneA > .view, #splitPaneB > .view { display:block; }

/* ===== CARL GUIDE VIEW ===== */
.guide-wrap { max-width:820px; margin:0 auto; width:100%; }
.guide-body { background:var(--card); border:1px solid var(--line); border-radius:16px; padding:30px 34px;
  box-shadow:0 4px 20px rgba(13,27,62,.06); line-height:1.7; color:var(--ink); }
.guide-body h1 { color:var(--ink); font-size:24px; margin-top:0; }
.guide-body h2 { color:var(--ink); font-size:18px; margin:22px 0 8px; padding-bottom:6px;
  border-bottom:2px solid var(--gold); display:inline-block; }
.guide-body h3 { color:var(--ink); font-size:15px; margin:16px 0 6px; }
.guide-body p { margin:8px 0; font-size:14.5px; }
.guide-body ul, .guide-body ol { padding-left:22px; }
.guide-body li { margin:5px 0; font-size:14.5px; }
.guide-body strong { color:var(--ink); }
.guide-empty { text-align:center; background:var(--card); border:1px solid var(--line); border-radius:16px;
  padding:44px 30px; color:var(--muted); }
.guide-empty p { margin-bottom:18px; font-size:15px; }
.guide-loading { display:flex; align-items:center; gap:14px; justify-content:center; padding:60px 20px;
  color:var(--muted); font-size:15px; }
.guide-loading.hidden, .guide-empty.hidden, .guide-body.hidden { display:none; }

/* ===== RESUME SECTION (modal) ===== */
.resume-section .resume-pick { display:flex; gap:8px; margin-bottom:8px; }
.resume-section select { flex:1; border:1.5px solid var(--line); border-radius:9px; padding:10px 12px;
  font-size:14px; font-family:inherit; color:var(--ink); background:var(--card); }
.resume-section select:focus { outline:none; border-color:var(--navy-light); }
.resume-save-row { display:flex; align-items:center; gap:12px; margin-top:8px; flex-wrap:wrap; }
.resume-save-row .chk { display:flex; align-items:center; gap:7px; font-size:12.5px; font-weight:600;
  color:var(--ink); cursor:pointer; }
.resume-save-row .resume-name { flex:1; min-width:160px; }
.resume-save-row .resume-name.hidden { display:none; }

/* split view disabled on mobile */
@media (max-width:768px) {
  #splitBtn { display:none !important; }
}



/* ===== PDF UPLOAD (modal resume section) ===== */
.resume-upload-row { display:flex; align-items:center; gap:12px; margin-bottom:8px; flex-wrap:wrap; }
.btn-upload { background:var(--card); border:1.5px dashed var(--navy-light); color:var(--ink);
  border-radius:9px; padding:9px 16px; font-size:13px; font-weight:700; cursor:pointer;
  display:inline-flex; align-items:center; gap:8px; }
.btn-upload:hover { background:var(--card-alt); }
.btn-upload:disabled { opacity:.6; cursor:not-allowed; }
.upload-state { font-size:12.5px; color:var(--muted); font-weight:600; }
.upload-state.ok { color:var(--green); }
.upload-state.err { color:var(--red); }

/* ===== SESSION INFO VIEW ===== */
.info-wrap { max-width:820px; margin:0 auto; width:100%; }
.info-head { margin-bottom:20px; }
.info-head h2 { margin:0 0 4px; color:var(--ink); font-size:22px; }
.info-head .info-sub { font-size:13px; color:var(--muted); line-height:1.55; }
.info-card { background:var(--card); border:1px solid var(--line); border-radius:16px; padding:20px 22px;
  box-shadow:0 4px 20px rgba(13,27,62,.06); margin-bottom:18px; }
.info-card-head { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:6px; }
.info-card-head h3 { margin:0; color:var(--ink); font-size:16px; }
.info-card-note { font-size:12.5px; color:var(--muted); margin:0 0 14px; line-height:1.55; }
.save-state { font-size:12px; color:var(--muted); font-weight:600; }
.save-state.saving { color:var(--gold-dark); }
.save-state.saved { color:var(--green); }
.save-state.err { color:var(--red); }
.info-textarea { width:100%; min-height:150px; border:1.5px solid var(--line); border-radius:12px;
  padding:14px; font-size:14px; font-family:inherit; color:var(--ink); resize:vertical; line-height:1.6; }
.info-textarea:focus { outline:none; border-color:var(--navy-light); }
.info-textarea-tall { min-height:240px; }

/* context stories */
.story-list { display:flex; flex-direction:column; gap:14px; margin-bottom:12px; }
.story-empty { font-size:13px; color:var(--muted); font-style:italic; padding:6px 0 2px; }
.story-empty.hidden { display:none; }
.story-card { border:1px solid var(--line); border-radius:12px; padding:14px 16px; background:var(--card-alt); }
.story-card-head { display:flex; align-items:center; gap:10px; margin-bottom:10px; }
.story-title { flex:1; border:1.5px solid transparent; background:transparent; border-radius:8px;
  padding:6px 8px; font-size:14.5px; font-weight:700; color:var(--ink); font-family:inherit; }
.story-title:focus { outline:none; border-color:var(--navy-light); background:var(--card); }
.story-del { background:transparent; border:none; color:var(--muted); font-size:18px; line-height:1;
  cursor:pointer; padding:4px 8px; border-radius:6px; }
.story-del:hover { color:var(--red); background:#fef2f2; }
.story-content { width:100%; min-height:90px; border:1.5px solid var(--line); border-radius:10px;
  padding:11px 12px; font-size:13.5px; font-family:inherit; color:var(--ink); resize:vertical; line-height:1.6; }
.story-content:focus { outline:none; border-color:var(--navy-light); }
.story-card .story-save { font-size:11.5px; color:var(--muted); font-weight:600; margin-top:6px; display:block; min-height:14px; }
.story-card .story-save.saving { color:var(--gold-dark); }
.story-card .story-save.saved { color:var(--green); }
.story-card .story-save.err { color:var(--red); }

/* regenerate-all button busy state */
#regenAllBtn .mini-spin { display:inline-block; width:12px; height:12px; border-radius:50%;
  border:2px solid rgba(255,255,255,.4); border-top-color:#fff; animation:spin .8s linear infinite;
  vertical-align:-2px; margin-right:6px; }
#regenAllBtn:disabled { opacity:.75; cursor:progress; }

@media (max-width:560px) {
  .info-card { padding:16px; }
}

/* ===== CONTEXT STORY SELECTION (checkbox rows) ===== */
.drawer-new.ghost { background:rgba(255,255,255,.06); color:#dbe3f7; border:1px solid rgba(255,255,255,.18);
  margin:0 16px 12px; font-weight:600; }
.drawer-new.ghost:hover { background:rgba(255,255,255,.13); }
.story-select { display:flex; flex-direction:column; gap:2px; margin-bottom:10px; }
.story-select.hidden { display:none; }
.story-check { display:flex; align-items:center; gap:10px; padding:9px 10px; border-radius:9px;
  cursor:pointer; border:1px solid transparent; transition:background .12s; }
.story-check:hover { background:var(--card-alt); border-color:var(--line); }
.story-check input[type=checkbox] { width:16px; height:16px; accent-color:var(--gold-dark); flex-shrink:0; cursor:pointer; }
.story-check .sc-title { font-size:13.5px; color:var(--ink); font-weight:600; line-height:1.4; }
.btn-mini { border:none; border-radius:8px; padding:6px 12px; font-size:12.5px; font-weight:700;
  cursor:pointer; background:var(--card-alt); color:var(--ink); }
.btn-mini.gold { background:var(--gold); color:var(--navy); }
.btn-mini.gold:hover { background:#ffc843; }

/* ===== SCAFFOLD SOURCE STORY NOTE ===== */
.scaffold-source { margin-top:10px; font-size:12px; color:var(--muted); font-style:italic;
  padding:8px 12px; background:var(--card-alt); border-left:3px solid var(--gold); border-radius:6px; line-height:1.5; }

/* ===== CROSS-SIZE OVERFLOW PROTECTION ===== */
html, body { max-width:100%; overflow-x:hidden; }

/* Mobile topbar & modal polish */
@media (max-width:768px) {
  .topbar { padding:0 14px; }
  .tb-row1 { min-height:50px; }
  .topbar .tb-left { flex:1 1 auto; }
  .tb-right { gap:4px; flex-wrap:wrap; justify-content:flex-end; }
  .view-tabs button { padding:7px 10px; font-size:12px; }
  .view { padding:18px 14px 80px; }
  .info-wrap, main.view-practice { max-width:100%; }
  .modal { width:94vw; max-width:94vw; }
  .story-check .sc-title { font-size:13px; }
}
@media (max-width:560px) {
  .topbar .tb-sub { display:none; }
  .info-textarea { min-height:120px; }
  .info-textarea-tall { min-height:180px; }
  .modal-body, .modal-head, .modal-foot { padding-left:16px; padding-right:16px; }
  .modal-foot { flex-wrap:wrap; }
  .modal-foot button { flex:1 1 auto; }
}
@media (max-width:480px) {
  .tb-right { gap:3px; }
  .view-tabs button { padding:6px 8px; font-size:11px; }
}



/* ===== BRAND (drawer) ===== */
.drawer-brand {
  font-weight:800; font-size:16px; color:#fff; padding:18px 20px 12px;
  letter-spacing:-0.02em; border-bottom:1px solid rgba(255,255,255,0.1); margin-bottom:8px;
}

/* ===== SESSION TOKEN USAGE (info card) ===== */
.token-usage-block { display:flex; flex-direction:column; gap:8px; padding:4px 0; }
.token-usage-block #tokenCount { font-size:15px; font-weight:700; color:var(--ink); }
.token-pop-inline { display:flex; flex-direction:column; gap:4px; }
.token-pop-inline .tp-row { font-size:12.5px; color:var(--muted); display:flex; justify-content:space-between; max-width:260px; }
.token-pop-inline .tp-row b { color:var(--ink); font-variant-numeric:tabular-nums; }

/* ===== FOLLOW-UP QUESTIONS (rating panel) ===== */
.followup-box {
  background:var(--card-alt); border:1px solid var(--line); border-left:4px solid var(--gold-dark);
  border-radius:10px; padding:16px 18px; margin-top:16px;
}
.followup-title { font-size:14px; font-weight:700; color:var(--ink); margin:0 0 10px; }
.followup-list { margin:0; padding-left:18px; color:var(--ink); }
.followup-list li { font-size:13.5px; line-height:1.5; margin-bottom:6px; color:var(--muted); }


/* ============ SESSION TYPE PICKER ============ */
.session-type-pick { display:flex; gap:12px; flex-wrap:wrap; }
.type-option { flex:1 1 220px; margin:0; cursor:pointer; position:relative; }
.type-option input[type="radio"] { position:absolute; opacity:0; pointer-events:none; }
.type-card {
  display:flex; flex-direction:column; gap:4px;
  border:1.5px solid var(--line); border-radius:12px; padding:14px 16px;
  background:var(--card-alt); transition:border-color .15s, background .15s, box-shadow .15s; height:100%;
}
.type-option:hover .type-card { border-color:var(--gold-dark); }
.type-option input[type="radio"]:checked + .type-card {
  border-color:var(--gold);
  background:color-mix(in srgb, var(--gold) 12%, var(--card));
  box-shadow:0 0 0 3px color-mix(in srgb, var(--gold) 25%, transparent);
}
.type-option input[type="radio"]:focus-visible + .type-card {
  box-shadow:0 0 0 3px color-mix(in srgb, var(--gold) 40%, transparent);
}
.type-icon { font-size:22px; line-height:1; }
.type-name { font-weight:800; font-size:15px; color:var(--ink); }
.type-desc { font-size:12.5px; line-height:1.45; color:var(--muted); }

/* session type card in Session Info */
.type-card-section .type-save-state { font-size:12px; color:var(--muted); }
.type-card-section .type-save-state.saving { color:var(--gold-dark); }
.type-card-section .type-save-state.saved { color:#1a7f37; }
.type-card-section .type-save-state.err { color:#b42318; }
#regenAfterTypeBtn { margin-top:14px; }

/* session type badge in the sidebar list */
.type-badge, .type-badge.tech, .type-badge.beh, .type-badge.scr {
  font-weight:700; background:rgba(255,255,255,.14); color:#dbe3f7; }


/* ============ GITHUB IMPORT (context stories) ============ */
.gh-import-card { border-left:4px solid var(--navy-light); }
.gh-import-row { display:flex; gap:10px; flex-wrap:wrap; align-items:center; }
.gh-import-row input[type="url"] {
  flex:1 1 320px; min-width:220px;
  border:1.5px solid var(--line); border-radius:10px; padding:11px 14px; font-size:14px;
}
.gh-import-row .btn-primary { flex:0 0 auto; white-space:nowrap; }
.gh-import-state { font-size:13px; margin-top:10px; min-height:18px; }
.gh-import-state.working { color:var(--gold-dark); }
.gh-import-state.saved { color:#1a7f37; }
.gh-import-state.err { color:#b42318; }