:root{
  --bg:#f7f5f0;
  --surface:#fffdf8;
  --panel:#ffffff;
  --border:#e6dfd1;
  --text:#2a2418;
  --muted:#7a7060;
  --accent:#6b4c1e;
  --accent-light:#c89352;
  --accent2:#f0e6d0;
  --sidebar-bg:#2d3b2d;
  --sidebar-text:#f0e6d0;
  --sidebar-muted:#a3b3a3;
  --shadow:0 8px 24px rgba(50,35,10,.06);
  --radius:16px;
  --sidebar-w:280px;
  font-family:Inter,system-ui,-apple-system,sans-serif;
}
*{box-sizing:border-box}
html{transition:background .3s ease}
body{margin:0;background:var(--bg);color:var(--text);transition:background .3s ease;min-height:100vh}
.app-shell{display:grid;grid-template-columns:var(--sidebar-w) 1fr;min-height:100vh}

/* SIDEBAR */
.sidebar{background:var(--sidebar-bg);color:var(--sidebar-text);padding:28px 22px;display:flex;flex-direction:column;gap:12px}
.brand-block{display:flex;flex-direction:column;align-items:center;gap:2px;padding-bottom:18px;border-bottom:1px solid rgba(255,255,255,.08);margin-bottom:8px}
.brand-icon{color:var(--accent-light);margin-bottom:6px}
.brand{font-family:Georgia,serif;font-size:24px;font-weight:700;letter-spacing:.18em;color:var(--sidebar-text);text-align:center}
.tagline{font-size:12px;color:var(--sidebar-muted);font-style:italic;letter-spacing:.02em;margin-top:2px}
.sidebar label{display:flex;flex-direction:column;gap:6px;font-size:11px;color:var(--sidebar-muted);text-transform:uppercase;letter-spacing:.08em;font-weight:600}
.label-row{display:inline-flex;align-items:center;gap:6px}
.label-row svg{color:var(--accent-light);flex-shrink:0}
.label-hash{display:inline-flex;align-items:center;justify-content:center;width:13px;height:13px;color:var(--accent-light);font-weight:800;font-size:14px;line-height:1}
.sidebar select{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.1);color:var(--sidebar-text);padding:10px 12px;border-radius:8px;font:inherit;font-size:13px;text-transform:none;letter-spacing:normal;font-weight:400;appearance:none;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a3b3a3' stroke-width='2'><polyline points='6 9 12 15 18 9'/></svg>");background-repeat:no-repeat;background-position:right 10px center;background-size:14px;padding-right:32px;cursor:pointer}
.sidebar select option{background:#2d3b2d;color:var(--sidebar-text)}
.nav-pill{display:inline-flex;align-items:center;gap:10px;background:rgba(0,0,0,.18);color:var(--sidebar-text);border:1px solid rgba(255,255,255,.04);padding:12px 14px;border-radius:10px;font:inherit;font-size:13px;font-weight:600;cursor:pointer;text-align:left;transition:background .15s ease,border-color .15s ease}
.nav-pill.active{background:rgba(0,0,0,.28);border-color:rgba(200,147,82,.4)}
.nav-pill svg{color:var(--accent-light)}
.side-primary{display:inline-flex;align-items:center;justify-content:center;gap:8px;background:linear-gradient(180deg,#a37232,#7a5223);color:#fff;border:none;padding:13px 14px;border-radius:10px;font:inherit;font-size:14px;font-weight:600;cursor:pointer;box-shadow:0 6px 18px rgba(0,0,0,.25);margin-top:6px;transition:transform .12s ease,box-shadow .2s ease}
.side-primary:hover{transform:translateY(-1px);box-shadow:0 10px 24px rgba(0,0,0,.32)}
.psalm-quote{margin-top:auto;padding:18px 4px 0;border-top:1px solid rgba(255,255,255,.08);font-family:Georgia,serif;font-style:italic;color:var(--sidebar-muted);font-size:12.5px;line-height:1.55;text-align:center;display:flex;flex-direction:column;align-items:center;gap:8px}
.psalm-icon{color:rgba(200,147,82,.7)}
.psalm-ref{font-style:normal;font-size:11px;color:var(--sidebar-muted);margin-top:6px;letter-spacing:.04em;font-weight:600}

/* MAIN PANEL */
.main-panel{padding:24px 36px 20px;max-width:1280px;width:100%;display:flex;flex-direction:column;gap:18px}
.top-bar{display:flex;justify-content:flex-end;align-items:center;gap:12px}
.stat-pill{display:inline-flex;align-items:center;gap:10px;padding:8px 14px 8px 12px;background:var(--panel);border:1px solid var(--border);border-radius:14px;box-shadow:0 2px 6px rgba(50,35,10,.03)}
.stat-pill svg{color:var(--accent);flex-shrink:0}
.stat-pill > div{display:flex;flex-direction:column;line-height:1.1}
.stat-label{font-size:10px;color:var(--muted);text-transform:uppercase;letter-spacing:.08em;font-weight:600}
.stat-value{font-size:17px;font-weight:700;color:var(--text);margin-top:1px}
.icon-btn,.profile-button{display:inline-flex;align-items:center;gap:4px;width:40px;height:40px;border-radius:50%;background:var(--panel);border:1px solid var(--border);color:var(--muted);cursor:pointer;padding:0;justify-content:center;transition:transform .2s ease,color .2s ease,box-shadow .2s ease}
.profile-button{width:auto;padding:0 10px 0 12px;border-radius:22px;gap:4px}
.icon-btn:hover{color:var(--accent);transform:rotate(30deg);box-shadow:0 4px 12px rgba(50,35,10,.08)}
.profile-button:hover{transform:translateY(-1px);box-shadow:0 4px 12px rgba(50,35,10,.08)}

/* VERSE HEADER */
.verse-header{display:flex;justify-content:space-between;align-items:flex-start;gap:20px}
.verse-header-left{display:flex;gap:14px;align-items:flex-start}
.verse-badge{width:48px;height:48px;border-radius:12px;background:#3a4f3a;color:var(--accent2);display:inline-flex;align-items:center;justify-content:center;flex-shrink:0}
.verse-ref{font-size:30px;font-weight:700;color:var(--text);font-family:Georgia,serif;letter-spacing:-.01em;line-height:1.1}
.meta-info{font-size:14px;color:var(--muted);margin-top:4px}
.timer-box{display:inline-flex;align-items:center;gap:12px;background:var(--panel);border:1px solid var(--border);padding:10px 18px 10px 14px;border-radius:16px;box-shadow:var(--shadow);position:relative;overflow:hidden;transition:transform .2s ease}
.timer-icon{color:#3a4f3a}
.timer-value{font-size:24px;font-weight:700;color:var(--text);line-height:1.1;font-variant-numeric:tabular-nums}
.timer-label{font-size:10px;color:var(--muted);text-transform:uppercase;letter-spacing:.08em;font-weight:600;margin-top:2px}
.timer-box::after{content:'';position:absolute;inset:auto 0 0 0;height:3px;background:linear-gradient(90deg,#d8c08a,#6b4c1e)}
.timer-box:hover{transform:translateY(-1px)}

/* VERSE CARD */
.card{background:var(--panel);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);transition:box-shadow .25s ease}
.verse-card{padding:32px 36px}
.verse-card:hover{box-shadow:0 14px 36px rgba(50,35,10,.08)}
.verse-text{font-family:Georgia,serif;font-size:24px;line-height:1.95;color:var(--text);display:flex;flex-wrap:wrap;gap:.3em;align-items:baseline}
.blank-wrap{display:inline-flex;align-items:baseline;gap:4px}
.blank{border:1px solid var(--border);border-bottom:2px solid var(--accent);border-radius:6px;min-width:6ch;font:inherit;background:rgba(247,245,240,.5);outline:none;padding:2px 10px;transition:border-color .2s ease,background .2s ease,color .2s ease;text-align:center}
.blank:focus{border-color:var(--accent);background:var(--panel)}
.blank.correct{border-color:rgba(47,107,47,.4);border-bottom-color:#2f6b2f;color:#2f6b2f;background:rgba(47,107,47,.06)}
.blank.incorrect{border-color:rgba(139,32,32,.4);border-bottom-color:#8b2020;color:#8b2020;background:rgba(139,32,32,.06)}
.correction{font-family:Georgia,serif;font-size:0.68em;color:#2f6b2f;font-style:italic;vertical-align:baseline}
.correction::before{content:'→ ';opacity:.6}
.verse-tip{display:flex;align-items:center;gap:8px;margin-top:20px;padding-top:18px;border-top:1px solid var(--border);color:var(--muted);font-size:13px}
.verse-tip svg{color:var(--accent-light);flex-shrink:0}

/* FEEDBACK */
.feedback{font-size:14px;min-height:4px;padding:0;transition:background .3s ease}
.feedback.success,.feedback.error{padding:18px 22px;border-radius:var(--radius);display:flex;align-items:center;gap:14px;font-weight:500}
.feedback.success{background:rgba(143,188,108,.12);color:#2f6b2f;border:1px solid rgba(143,188,108,.3)}
.feedback.error{background:rgba(139,32,32,.05);color:#8b2020;border:1px solid rgba(139,32,32,.12)}
.feedback strong{font-size:17px;font-weight:700;display:block;margin-bottom:2px}
.feedback .badge-correct{margin-left:auto;background:#2f6b2f;color:#fff;padding:6px 12px;border-radius:8px;font-size:12px;font-weight:600;display:inline-flex;align-items:center;gap:4px;flex-shrink:0}
.feedback .ref-tag{margin-left:auto;display:flex;flex-direction:column;align-items:flex-end;gap:6px;font-size:13px;color:var(--muted)}

/* CONTROLS */
.controls{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.controls .secondary{display:inline-flex;align-items:center;gap:8px;background:var(--panel);color:var(--text);border:1px solid var(--border);padding:12px 18px;border-radius:12px;font:inherit;font-size:14px;font-weight:500;cursor:pointer;transition:transform .12s ease,box-shadow .2s ease,background .2s ease}
.controls .secondary.outlined{background:transparent;border-width:1.5px}
.controls .secondary:hover{transform:translateY(-1px);box-shadow:0 4px 12px rgba(50,35,10,.08)}
.controls-primary{margin-left:auto;display:inline-flex;align-items:center;gap:8px;background:linear-gradient(180deg,#8d6228,#5f4318);color:#fff;border:none;padding:12px 22px;border-radius:12px;font:inherit;font-size:14px;font-weight:600;cursor:pointer;box-shadow:0 6px 18px rgba(95,67,24,.22);transition:transform .12s ease,box-shadow .2s ease}
.controls-primary:hover{transform:translateY(-1px);box-shadow:0 10px 24px rgba(95,67,24,.32)}

/* FOOTER STATS */
.stats-footer{display:flex;align-items:center;gap:32px;padding:16px 24px;background:var(--panel);border:1px solid var(--border);border-radius:var(--radius);margin-top:6px;color:var(--muted);font-size:13px;flex-wrap:wrap}
.stat-item{display:inline-flex;align-items:center;gap:8px}
.stat-item svg{color:var(--accent);flex-shrink:0}
.stat-item strong{color:var(--text);font-weight:700}

/* RESPONSIVE */
@media (max-width:980px){
  .app-shell{grid-template-columns:1fr}
  .sidebar{position:relative;height:auto;padding-bottom:18px}
  .main-panel{padding:18px}
  .verse-header{flex-direction:column}
  .verse-text{font-size:20px}
  .stats-footer{gap:16px}
  .controls-primary{margin-left:0;width:100%;justify-content:center}
}

/* THEMES */
:root[data-theme="modern"]{--bg:#f9fafb;--surface:#fff;--panel:#fff;--border:#e5e7eb;--text:#0f172a;--muted:#64748b;--accent:#0f172a;--accent-light:#475569;--accent2:#f1f5f9;--sidebar-bg:#0f172a;--sidebar-text:#f8fafc;--sidebar-muted:#94a3b8;--shadow:0 2px 12px rgba(15,23,42,.05);--radius:12px}
:root[data-theme="modern"] body{background:#f9fafb}
:root[data-theme="modern"] .side-primary,:root[data-theme="modern"] .controls-primary{background:#0f172a;box-shadow:0 4px 12px rgba(15,23,42,.15)}
:root[data-theme="modern"] .side-primary:hover,:root[data-theme="modern"] .controls-primary:hover{box-shadow:0 8px 20px rgba(15,23,42,.22)}
:root[data-theme="modern"] .verse-badge{background:#1e293b;color:#f1f5f9}
:root[data-theme="modern"] .timer-icon{color:#1e293b}
:root[data-theme="modern"] .timer-box::after{background:linear-gradient(90deg,#94a3b8,#0f172a)}
:root[data-theme="modern"] .sidebar select{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.08)}
:root[data-theme="modern"] .feedback.success{background:rgba(21,128,61,.07);color:#15803d;border-color:rgba(21,128,61,.18)}
:root[data-theme="modern"] .feedback.error{background:rgba(185,28,28,.05);color:#b91c1c;border-color:rgba(185,28,28,.15)}
:root[data-theme="modern"] .feedback .badge-correct{background:#15803d}

:root[data-theme="vibrant"]{--bg:#fce7f3;--surface:#fff;--panel:#fff;--border:rgba(139,92,246,.18);--text:#3b0764;--muted:#7c3aed;--accent:#c026d3;--accent-light:#d946ef;--accent2:#fae8ff;--sidebar-bg:#4c1d95;--sidebar-text:#fae8ff;--sidebar-muted:#c4b5fd;--shadow:0 8px 32px rgba(192,38,211,.12);--radius:18px}
:root[data-theme="vibrant"] body{background:linear-gradient(135deg,#fce7f3 0%,#e9d5ff 50%,#c7d2fe 100%);background-attachment:fixed}
:root[data-theme="vibrant"] .side-primary,:root[data-theme="vibrant"] .controls-primary{background:linear-gradient(135deg,#c026d3,#7c3aed);box-shadow:0 8px 24px rgba(192,38,211,.28)}
:root[data-theme="vibrant"] .side-primary:hover,:root[data-theme="vibrant"] .controls-primary:hover{box-shadow:0 14px 32px rgba(192,38,211,.38)}
:root[data-theme="vibrant"] .verse-badge{background:linear-gradient(135deg,#c026d3,#7c3aed);color:#fff}
:root[data-theme="vibrant"] .verse-ref{background:linear-gradient(135deg,#c026d3,#7c3aed);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:#c026d3}
:root[data-theme="vibrant"] .timer-icon{color:#c026d3}
:root[data-theme="vibrant"] .timer-box::after{background:linear-gradient(90deg,#c026d3,#7c3aed)}
:root[data-theme="vibrant"] .feedback.success{background:rgba(22,163,74,.1);color:#15803d;border-color:rgba(22,163,74,.2)}
:root[data-theme="vibrant"] .feedback.error{background:rgba(220,38,38,.06);color:#b91c1c;border-color:rgba(220,38,38,.15)}
:root[data-theme="vibrant"] .feedback .badge-correct{background:linear-gradient(135deg,#c026d3,#7c3aed)}

:root[data-theme="slate"]{--bg:#18150f;--surface:#1f1b14;--panel:#26221a;--border:#3a3327;--text:#ebe4d3;--muted:#968a76;--accent:#d4a35a;--accent-light:#c89352;--accent2:#3a2f1f;--sidebar-bg:#0e0c08;--sidebar-text:#ebe4d3;--sidebar-muted:#968a76;--shadow:0 12px 32px rgba(0,0,0,.5);--radius:16px}
:root[data-theme="slate"] body{background:linear-gradient(180deg,#1a1610,#131008)}
:root[data-theme="slate"] .side-primary,:root[data-theme="slate"] .controls-primary{background:linear-gradient(180deg,#c89352,#8a6526);color:#1f1b14;box-shadow:0 8px 22px rgba(0,0,0,.4)}
:root[data-theme="slate"] .verse-badge{background:#3a2f1f;color:#d4a35a}
:root[data-theme="slate"] .timer-icon{color:#d4a35a}
:root[data-theme="slate"] .timer-box::after{background:linear-gradient(90deg,#d4a35a,#8a6526)}
:root[data-theme="slate"] .blank{background:rgba(56,48,32,.5);border-color:var(--border);color:var(--text)}
:root[data-theme="slate"] .blank:focus{background:#2a261c;border-color:var(--accent)}
:root[data-theme="slate"] .blank.correct{border-bottom-color:#8fbc6c;color:#8fbc6c;background:rgba(143,188,108,.12)}
:root[data-theme="slate"] .blank.incorrect{border-bottom-color:#d4836b;color:#d4836b;background:rgba(212,131,107,.12)}
:root[data-theme="slate"] .correction{color:#8fbc6c}
:root[data-theme="slate"] .feedback.success{background:rgba(143,188,108,.12);color:#a8c98f;border-color:rgba(143,188,108,.22)}
:root[data-theme="slate"] .feedback.error{background:rgba(212,131,107,.12);color:#e0a290;border-color:rgba(212,131,107,.2)}
:root[data-theme="slate"] .feedback .badge-correct{background:#8a6526;color:#1f1b14}
:root[data-theme="slate"] select option{background:#26221a;color:var(--text)}

body,.card,button,select,.blank,.verse-ref,.verse-text,.stat-pill,.stats-footer{transition:background .3s ease,color .3s ease,border-color .3s ease}