:root {color-scheme:dark; --bg:#121a25; --panel:#1d2938; --line:#344456; --text:#f2f5f8; --muted:#a1b1c2; --accent:#63b5ff; --warn:#ffcc71}
*{box-sizing:border-box} body{background:var(--bg);color:var(--text);font:16px/1.45 -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;margin:0;min-height:100dvh}
header{display:flex;align-items:center;justify-content:space-between;padding:24px 22px 12px;max-width:560px;margin:auto}main{max-width:560px;padding:0 18px 34px;margin:auto}h1{font-size:19px;margin:0}h2{font-size:17px;margin:8px 0 12px}section{margin-top:16px}.panel{border:1px solid var(--line);border-radius:20px;background:var(--panel);padding:18px}.quiet{color:var(--muted);font-size:13px}.note{font-size:14px;white-space:pre-wrap;max-height:260px;overflow:auto;line-height:1.5}
button,input,select{font:inherit}button{background:#2a4258;border:1px solid #49647c;color:var(--text);border-radius:12px;padding:12px 15px;cursor:pointer;touch-action:manipulation}button:disabled{opacity:.44;cursor:default}.primary{background:#1863aa;border-color:#388be0;font-weight:650}.danger{background:#5e2f3f;border-color:#96516b}.subtle{background:none;border:0;padding:7px 0;color:var(--accent);font-size:13px}.row{display:flex;gap:9px;align-items:center;flex-wrap:wrap}.spread{justify-content:space-between}.stack{display:grid;gap:12px}.hidden{display:none!important}input[type=password],select{width:100%;border:1px solid var(--line);border-radius:11px;padding:13px;background:#101721;color:var(--text)}
.recorder{text-align:center;padding:20px 10px}.mic{width:106px;height:106px;border:2px solid #51748e;background:#243d51;border-radius:100%;font-size:50px;margin:8px auto 18px;display:grid;place-items:center}.mic.active{border-color:#ff7777;box-shadow:0 0 0 10px #7f333336}.clock{font-size:30px;font-variant-numeric:tabular-nums;margin:6px 0 18px}.list{display:grid;gap:8px}.item{display:flex;justify-content:space-between;gap:8px;text-align:left;width:100%;background:#162232}.item.selected{border-color:var(--accent)}audio{width:100%;margin-top:8px}#feedback{min-height:24px;color:var(--warn);font-size:14px;margin-top:10px;white-space:pre-wrap}#transcript{border:1px solid var(--line);border-radius:12px;padding:12px;background:#131e2a}

body.reading { overflow:hidden; }
.reader {
  position:fixed;
  inset:0;
  z-index:1000;
  background:var(--bg);
  display:flex;
  flex-direction:column;
  padding-top:env(safe-area-inset-top);
  padding-bottom:env(safe-area-inset-bottom);
}
.reader-toolbar {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:12px 18px;
  border-bottom:1px solid var(--line);
  flex-shrink:0;
}
.reader-text {
  flex:1;
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
  padding:22px 20px 60px;
  font-size:19px;
  line-height:1.7;
  white-space:pre-wrap;
  overflow-wrap:anywhere;
  user-select:text;
  -webkit-user-select:text;
}