:root{
  --bg:#faf7f0; --surface:#ffffff; --surface2:#f1ead9; --text:#211d15; --muted:#7a6f59;
  --border:#e3dac4; --accent:#8a5a12; --accent2:#b5811f; --on-accent:#fff;
  --hl-yellow:#ffedb3; --hl-green:#cdeec9; --hl-blue:#c9def5; --hl-pink:#f7cdd8;
  --shadow:0 8px 28px rgba(80,60,10,.10);
}
html[data-theme="dark"]{
  --bg:#12100c; --surface:#1e1a14; --surface2:#2a241a; --text:#f2ecdd; --muted:#b3a586;
  --border:#3a3222; --accent:#e0aa3e; --accent2:#c08f22; --on-accent:#1a1405;
  --hl-yellow:#5c4d12; --hl-green:#274d24; --hl-blue:#1f3b5c; --hl-pink:#5c2432;
  --shadow:0 8px 28px rgba(0,0,0,.4);
}
*{box-sizing:border-box}
body{margin:0;font-family:Georgia,'Times New Roman',serif;background:var(--bg);color:var(--text)}
button,input,select,textarea{font:inherit;color:inherit}
.topbar{position:sticky;top:0;z-index:20;display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:space-between;padding:12px 18px;background:var(--surface);border-bottom:1px solid var(--border)}
.brand{display:flex;gap:12px;align-items:center;color:var(--accent)}
.brand h1{font-size:21px;margin:0;color:var(--text)}
.tagline{margin:2px 0 0;font-size:13px;color:var(--muted)}
.top-controls{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.top-controls input[type=search]{max-width:170px}
input,select,textarea{background:var(--surface);border:1px solid var(--border);border-radius:10px;padding:9px 12px}
textarea{width:100%;margin-top:6px}
label{display:block;margin:12px 0}
.icon-btn{background:var(--surface2);border:1px solid var(--border);border-radius:10px;padding:8px 12px;cursor:pointer}
.tabs{display:flex;gap:6px;flex-wrap:wrap;padding:10px 18px 0;max-width:980px;margin:0 auto}
.tab-btn{background:transparent;border:1px solid transparent;border-bottom:none;border-radius:12px 12px 0 0;padding:10px 14px;cursor:pointer;color:var(--muted)}
.tab-btn.active{background:var(--surface);border-color:var(--border);color:var(--text);font-weight:700;box-shadow:var(--shadow)}
main{max-width:980px;margin:0 auto;padding:18px}
.tab-panel{background:var(--surface);border:1px solid var(--border);border-radius:0 16px 16px 16px;padding:20px;box-shadow:var(--shadow)}
.card{border:1px solid var(--border);border-radius:16px;padding:18px;margin-bottom:16px;background:var(--surface2)}
.daily-card{background:linear-gradient(140deg,var(--surface2),var(--surface))}
.daily-text{font-size:23px;line-height:1.55;font-style:italic}
.daily-ref{font-weight:700;color:var(--accent)}
.btn{background:var(--accent);color:var(--on-accent);border:none;border-radius:10px;padding:10px 16px;cursor:pointer;font-weight:700}
.btn.secondary{background:var(--surface2);color:var(--text);border:1px solid var(--border)}
.btn:disabled{opacity:.45;cursor:default}
.row{display:flex;gap:8px;align-items:center;margin:10px 0}
.row.wrap{flex-wrap:wrap}.row.between{justify-content:space-between}
.row input[type=search],.row input[type=text]{flex:1}
.muted{color:var(--muted)} .error{color:#b3261e}
.continue-row{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-bottom:16px}
.chip{background:var(--surface2);border:1px solid var(--border);border-radius:999px;padding:7px 13px;cursor:pointer}
.book-grid{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:8px}
.book-btn{background:var(--surface2);border:1px solid var(--border);border-radius:999px;padding:7px 13px;cursor:pointer;font-size:15px}
.book-btn.active{background:var(--accent);color:var(--on-accent);border-color:var(--accent)}
.pill-row{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:14px}
.pill{width:42px;height:42px;border-radius:50%;border:1px solid var(--border);background:var(--surface2);cursor:pointer}
.pill.active{background:var(--accent);color:var(--on-accent)}
.verses{line-height:1.75}
.verse{margin:0 0 6px;padding:4px 8px;border-radius:8px;cursor:pointer}
.verse:hover{background:var(--surface2)}
.verse.selected{outline:2px solid var(--accent)}
.verse sup{color:var(--accent);font-weight:700;margin-right:2px}
.hl-yellow{background:var(--hl-yellow)} .hl-green{background:var(--hl-green)}
.hl-blue{background:var(--hl-blue)} .hl-pink{background:var(--hl-pink)}
.reader-head{display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;align-items:start}
.verse-actions{position:sticky;bottom:12px;background:var(--surface);border:1px solid var(--border);border-radius:16px;padding:14px;box-shadow:var(--shadow);margin-top:14px}
.swatch{width:30px;height:30px;border-radius:50%;border:1px solid var(--border);cursor:pointer}
.sw-yellow{background:#ffd94d}.sw-green{background:#8fd07f}.sw-blue{background:#7fb2e5}.sw-pink{background:#ef9db4}
.note-label{display:block;margin-top:10px}
.result-line{line-height:1.6;border-bottom:1px solid var(--border);padding:8px 4px}
.ref-link{background:none;border:none;color:var(--accent);font-weight:700;cursor:pointer;padding:0}
.compare-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 18px}
.compare-grid p{line-height:1.65;border-bottom:1px solid var(--border);padding:8px 0;margin:0}
.compare-head{font-weight:700;padding:8px 0;border-bottom:2px solid var(--accent)}
@media(max-width:640px){.compare-grid{grid-template-columns:1fr 1fr;gap:0 10px;font-size:15px}}
.plan-day{padding:9px 6px;border-bottom:1px solid var(--border);line-height:1.6}
.plan-day.done{opacity:.65}
.card-preview{display:flex;justify-content:center;margin:14px 0}
.card-preview canvas{width:min(420px,90vw);height:auto;border-radius:16px;box-shadow:var(--shadow)}
.footer{max-width:980px;margin:0 auto;padding:6px 18px 26px;color:var(--muted);font-size:14px}
.toast{position:fixed;left:50%;bottom:22px;transform:translateX(-50%);background:var(--accent);color:var(--on-accent);padding:10px 18px;border-radius:999px;box-shadow:var(--shadow);z-index:50;max-width:92vw;text-align:center}
select{max-width:100%;min-width:0}
input{min-width:0}
#version-select{flex:1 1 220px;width:min(360px,100%)}
.row select{flex:1 1 auto}
.row input[type=search],.row input[type=text]{min-width:0}
.compare-grid>*{min-width:0;overflow-wrap:break-word}
.verses,.result-line,.plan-day{overflow-wrap:break-word}
@media(max-width:640px){
  .topbar{padding:10px 12px;gap:8px}
  .brand h1{font-size:19px}
  .tagline{font-size:12px}
  .top-controls{display:grid;grid-template-columns:1fr auto auto;width:100%;gap:8px}
  .top-controls input[type=search]{max-width:none;width:100%;grid-column:1/-1}
  #version-select{width:100%;grid-column:1/-1}
  .top-controls .icon-btn{padding:8px 10px}
  .tabs{padding:10px 12px 0;gap:4px}
  .tab-btn{padding:9px 11px;font-size:15px}
  main{padding:12px}
  .tab-panel{padding:14px;border-radius:0 12px 12px 12px}
  .card{padding:14px}
  .daily-text{font-size:20px}
  .row{flex-wrap:wrap}
  .btn{padding:10px 14px}
  #plan-select{width:100%}
  .verse-actions{bottom:8px;padding:12px}
  .footer{padding:6px 12px 22px}
}