:root { color-scheme: dark; font-family: system-ui, -apple-system, "Segoe UI", sans-serif; background:#0f172a; color:#f1f5f9; -webkit-tap-highlight-color:transparent }
* { box-sizing:border-box }
html,body { margin:0; min-height:100%; background:#0f172a }
body { padding-bottom:4rem; user-select:none }
button,input { font:inherit }
button { cursor:pointer; touch-action:manipulation }
.hidden { display:none!important }
.app-header { position:sticky; top:0; z-index:20; display:flex; align-items:center; justify-content:space-between; padding:1rem; background:#1e293b; border-bottom:1px solid #334155; box-shadow:0 4px 8px #0003 }
.header-title-wrap { display:flex; align-items:center; gap:.5rem }
h1 { margin:0; color:#fbbf24; font-size:1rem }
h2 { margin:0 }
.icon-button { padding:.25rem; border:0; background:transparent; color:#cbd5e1; font-size:1.2rem }
.secondary-button,.primary-button,.danger-button,.mode-tab,.check-button,.practice-button,.word-chip { border-radius:.55rem; transition:transform .12s,background-color .12s }
button:active { transform:scale(.96) }
button:focus-visible,input:focus-visible { outline:2px solid #fbbf24; outline-offset:2px }
.secondary-button { padding:.45rem .75rem; color:#cbd5e1; background:#334155; border:1px solid #475569; font-size:.75rem }
.primary-button { padding:.65rem; color:#0f172a; background:#f59e0b; border:1px solid #fbbf24; font-weight:700 }
.danger-button { padding:.65rem; color:#fda4af; background:#4c0519; border:1px solid #be123c; font-weight:700 }
.full-width { width:100%; margin-top:.65rem }
.settings-panel { margin:1rem; padding:1rem; background:#1e293b; border:1px solid #334155; border-radius:.8rem; box-shadow:0 8px 20px #0004 }
.settings-panel h2 { margin-bottom:.55rem; font-size:.85rem }
.settings-panel input { width:100%; padding:.65rem; color:#fff; background:#0f172a; border:1px solid #475569; border-radius:.4rem; font:.75rem ui-monospace,monospace; user-select:text }
.status { min-height:1.2em; margin:.65rem 0 0; text-align:center; font-size:.75rem; font-weight:600 }
.status.loading,.eyebrow { color:#fbbf24 }.status.success { color:#34d399 }.status.error,.error-title { color:#fb7185 }
.curriculum-view { display:grid; gap:1rem; padding:1rem }.centered { text-align:center }.muted { color:#94a3b8 }.loading-message { padding:2rem 0; font-size:.8rem }
.card { padding:1rem; background:#1e293b; border:1px solid #334155; border-radius:.8rem; box-shadow:0 2px 8px #0003 }
.card-meta { display:flex; justify-content:space-between; gap:.5rem; margin-bottom:.3rem; color:#fbbf24; font-size:.75rem; font-weight:700 }.card-meta .muted { font-weight:400 }
.card h2 { color:#fff; font-size:1rem }
.verse-preview { display:-webkit-box; overflow:hidden; margin:.35rem 0 .8rem; color:#cbd5e1; font-size:.8rem; line-height:1.5; -webkit-box-orient:vertical; -webkit-line-clamp:2 }
.practice-button { width:100%; padding:.7rem; color:#0f172a; background:#f59e0b; border:0; font-size:.8rem; font-weight:700 }
.checkoff-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:.45rem }.card .checkoff-grid { margin-top:.8rem; padding-top:.8rem; border-top:1px solid #334155 }
.check-button { min-width:0; padding:.55rem .25rem; color:#94a3b8; background:#0f172a; border:1px solid #334155; font-size:.75rem }.check-button.complete { color:#34d399; background:#10b98126; border-color:#059669 }
.practice-view { position:fixed; inset:57px 0 0; z-index:10; display:flex; flex-direction:column; overflow-y:auto; padding:1rem; background:#0f172a }
.practice-heading { display:flex; align-items:flex-start; justify-content:space-between; gap:1rem; margin-bottom:.8rem }.practice-heading h2 { margin-top:.15rem; font-size:1.15rem }.eyebrow { font-size:.75rem; font-weight:700 }
.mode-tabs { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:.25rem; margin-bottom:1rem; padding:.25rem; background:#1e293b; border-radius:.75rem }
.mode-tab { padding:.55rem .2rem; color:#94a3b8; background:transparent; border:0; font-size:.75rem; font-weight:600 }.mode-tab.active { color:#0f172a; background:#f59e0b }
.practice-board { flex-grow:1; margin-bottom:1rem; padding:1.25rem; color:#e2e8f0; background:#1e293bd9; border:1px solid #334155; border-radius:1rem; line-height:1.65 }.practice-board p { margin:0 }
.instruction { margin-bottom:1rem!important; color:#fbbf24; text-align:center; text-transform:uppercase; letter-spacing:.08em; font-size:.7rem; font-weight:700 }.initials { font-family:ui-monospace,monospace; letter-spacing:.08em }
.blank-word { display:inline-block; padding:0 .3rem; color:transparent; background:#fbbf2433; border:0; border-bottom:1px solid #fbbf24; border-radius:.25rem }.blank-word.revealed { color:#f1f5f9 }
.checkoff-panel { margin-top:auto; padding:1rem; background:#1e293b; border:1px solid #334155; border-radius:1rem }.checkoff-panel h3 { margin:0 0 .65rem; color:#94a3b8; text-align:center; text-transform:uppercase; letter-spacing:.08em; font-size:.7rem }
.scramble-toolbar { display:flex; align-items:center; justify-content:space-between; gap:.5rem; margin-bottom:.75rem }.scramble-toolbar .instruction { margin:0!important; text-align:left }
.word-area { display:flex; flex-wrap:wrap; align-content:flex-start; gap:.5rem; min-height:100px; margin-bottom:1rem; padding:.75rem; background:#0f172a; border:1px solid #334155; border-radius:.75rem }.word-pool { display:flex; flex-wrap:wrap; gap:.5rem }
.word-chip { padding:.4rem .7rem; color:#fff; background:#334155; border:1px solid #475569; font-size:.85rem }.word-chip.placed { color:#fcd34d; background:#f59e0b29; border-color:#a16207 }
.complete-message { margin-top:1.25rem!important; color:#34d399; text-align:center; font-size:.85rem; font-weight:700 }
.error-box { padding:1rem; text-align:center; background:#4c051980; border:1px solid #881337; border-radius:.75rem }.error-detail { color:#fda4af; overflow-wrap:anywhere; font:.75rem ui-monospace,monospace; user-select:text }
@media (min-width:700px) { .curriculum-view,.settings-panel { max-width:720px; margin-left:auto; margin-right:auto }.practice-view { left:50%; width:720px; transform:translateX(-50%) } }