:root{color-scheme:dark;--bg:#10131a;--card:#191e29;--text:#edf2f7;--muted:#a9b4c6;--accent:#52d1b1;--pivot:#ff6e78}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--text);font:16px system-ui,sans-serif}
header,main{max-width:1100px;margin:auto;padding:18px}
header{display:flex;gap:16px;align-items:center}
h1{font-size:1.3rem;margin:0}
#status{color:var(--muted);flex:1}

/* ---------- import panel ---------- */
.panel{background:var(--card);border-radius:12px;padding:18px;margin:10px 0}
textarea,input{background:#0d1016;color:inherit;border:1px solid #394354;border-radius:7px;padding:10px;font:inherit}
textarea{width:100%;min-height:120px}
button,.fileBtn{background:#273348;color:inherit;border:0;border-radius:7px;padding:9px 12px;cursor:pointer;font:inherit}
button:hover,.fileBtn:hover{background:#34435d}
.row,.urlrow,.toolbar,#meta{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-top:10px}
.searchrow{display:flex;gap:8px;align-items:center;margin-bottom:10px}
.searchrow .ddg{font-weight:700;color:var(--accent);white-space:nowrap;letter-spacing:.3px}
.searchrow input{flex:1}
.fileBtn input{display:none}
.urlrow input{flex:1}
#dropZone{border:2px dashed #536078;border-radius:9px;padding:8px 14px;text-align:center;color:var(--muted);font-size:.9rem;flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#dropZone.drag{border-color:var(--accent);color:var(--accent)}
#searchResults{margin-top:10px;border-top:1px solid #303849;padding-top:8px}
#searchResults h3{margin:0 0 8px;font-size:1rem;color:var(--muted)}
.searchItem{display:flex;align-items:center;gap:8px;padding:9px 0;border-bottom:1px solid #2a3240}
.searchItem .srLoad{flex:1;text-align:left;background:none;padding:4px 6px;font-size:1.02rem;line-height:1.35}
.searchItem .srLoad:hover{background:#273348}
.searchItem .srHost{color:var(--muted);font-size:.8rem;white-space:nowrap}
small,details{color:var(--muted);display:block;margin-top:8px}

/* ---- tabs (Browser / Files / Recent) ---- */
nav.tabs{max-width:1100px;margin:0 auto;padding:0 18px;display:flex;gap:6px}
nav.tabs .tab{background:transparent;border:1px solid #394354;border-radius:8px 8px 0 0;border-bottom:0;padding:9px 16px;cursor:pointer;font:inherit;color:var(--muted)}
nav.tabs .tab.active{background:var(--card);color:var(--accent);border-color:var(--accent)}
/* ---- browser search page ---- */
.browserBar{display:flex;gap:8px;align-items:center;margin:4px 0 4px}
.browserBar input{flex:1;height:52px;font-size:1.15rem;padding:0 16px}
.browserBar button{height:52px;font-size:1.05rem;padding:0 26px}
.hint{color:var(--muted);font-size:.92rem;margin:0 0 10px}

/* ---------- reader: one-screen layout ---------- */
/* The reader is ALWAYS exactly one viewport tall; nothing scrolls inside it.
   The word is vertically centred in the space left by a compact single-row
   toolbar on top and a slim progress bar on bottom. */
#reader,body:has(#reader:not([hidden])){height:100dvh;max-height:100dvh;overflow:hidden}
body:has(#reader:not([hidden])) main{height:100dvh;max-height:100dvh;display:flex;flex-direction:column;padding:0;overflow:hidden}
body:has(#reader:not([hidden])) header,body:has(#reader:not([hidden])) footer,body:has(#reader:not([hidden])) nav{display:none}
#reader{display:flex;flex-direction:column;padding:0}
body:has(#reader:not([hidden])) #reader{flex:1}
#meta{flex:0 0 auto;margin:0;padding:4px 12px}
.toolbar{flex:0 0 auto;background:var(--bg);padding:6px 10px;display:flex;gap:4px;align-items:center;flex-wrap:nowrap;overflow-x:auto;white-space:nowrap}
.speedBar{flex:0 0 auto;display:flex;gap:8px;align-items:center;padding:4px 12px 6px;background:var(--bg)}
.speedBar .speedLabel{font-size:.82rem;color:var(--muted);white-space:nowrap}
.speedBar input[type=range]{flex:1;min-width:0}
.speedReadout{font-weight:700;color:var(--accent);min-width:3.2em;text-align:center;font-variant-numeric:tabular-nums}
#summarizeBtn{background:#333b52;border:1px solid var(--accent);color:var(--accent);font-weight:700;padding:7px 14px;white-space:nowrap;border-radius:8px}
#summarizeBtn:hover{background:#3d4664}
input[type=number]{width:62px;padding:5px}
input[type=range]{width:74px;padding:0}
#rsvp{flex:1 1 0;min-height:0;display:grid;place-items:center;position:relative;font-size:clamp(2rem,7vw,5.5rem);font-weight:650;font-family:Georgia,serif;overflow:hidden}
body:has(#reader:not([hidden])) #rsvp{flex:1;min-height:0}

.focusLine{height:24px;border-left:2px dashed #60708c;opacity:.5;position:absolute;left:50%;top:calc(50% - 12px)}
.focusMarker{position:absolute;top:6%;left:calc(50% - .35em);font-size:1rem;color:var(--accent);opacity:0;transition:opacity .3s}
#word{white-space:pre}
.before{text-align:right;display:inline-block}
.pivot{color:var(--pivot);text-decoration:underline}
.after{text-align:left;display:inline-block}

#steady{display:none;max-width:850px;margin:30px auto;font-family:Georgia,serif;font-size:22px;line-height:1.65;white-space:pre-wrap}
#steady .active{background:var(--pivot);color:#111;border-radius:3px}
body.steady #rsvp{display:none}
body.steady #steady{display:block}
footer{color:var(--muted);text-align:center;padding:20px}
kbd{background:#2d3748;padding:2px 4px;border-radius:3px}
.historyItem{display:flex;justify-content:space-between;gap:12px;padding:10px;border-bottom:1px solid #303849}
.historyItem button{padding:5px 8px}

@media(max-width:600px){
  header{align-items:flex-start;flex-wrap:wrap}
  .toolbar{gap:4px;overflow-x:auto;flex-wrap:nowrap;padding-bottom:4px}
  .toolbar button,.toolbar label{font-size:.8rem;padding:6px;white-space:nowrap}
  .toolbar input[type=range]{width:50px}
  #presets{display:flex}
  #meta{margin-top:6px}
  .searchrow{flex-wrap:wrap}
  .searchItem .srHost{display:none}
}
body.light{--bg:#f5f7fa;--card:#fff;--text:#172033;--muted:#536078;--accent:#087f67;--pivot:#d42d3a;color-scheme:light}

/* ---------- AI panel ---------- */
.presetRow{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 12px}
.presetRow button{background:#1f2b40;border:1px solid #394354;white-space:nowrap}
.presetRow button:hover{background:#2b3a57;border-color:var(--accent)}
#ai textarea{min-height:90px;margin-bottom:10px}
.aiField{display:flex;flex-direction:column;gap:4px;margin-bottom:10px}
.aiField label{font-size:.82rem;color:var(--muted)}
.aiField small{display:inline;margin:0;color:var(--muted)}
.aiField input{width:100%}
.conRow{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-top:4px}
.conRow button{flex:1;min-width:120px}
.primaryBtn{background:var(--accent);color:#0a0d12;font-weight:700}
.primaryBtn:hover{background:var(--accent);opacity:.9}
#ai h2{margin-top:0}
#ai .hint:last-of-type{margin-top:12px;padding-top:10px;border-top:1px dashed #394354}
.tempRow{display:flex;align-items:center;gap:10px}
.tempRow input[type=range]{flex:1}
.tempRow b{min-width:34px;text-align:center;color:var(--accent)}
#aiSavePrompt{flex:0 0 auto}
.aiPromptsBox{margin-top:14px;padding-top:10px;border-top:1px solid #2a3444}
.aiPromptsBox h3{font-size:.82rem;color:var(--muted);margin:0 0 8px;display:flex;justify-content:space-between;align-items:center}
.miniBtn{background:none;border:none;color:#73809a;cursor:pointer;font-size:.8rem;text-decoration:underline;padding:0}
.miniBtn:hover{color:var(--accent)}
.aiPromptItem{display:flex;align-items:center;gap:8px;padding:7px 10px;border-radius:8px;background:#1d2533;margin-bottom:6px;font-size:.86rem;flex-wrap:wrap}
.aiPromptItem button.promptUse{background:var(--accent);border:none;color:#0a0d12;font-weight:700;border-radius:6px;width:26px;height:26px;cursor:pointer;flex:none;padding:0}
.aiPromptItem small{color:#73809a;width:100%;margin-top:-4px}