:root{
  --bg:#14161a; --card:#1d2027; --card2:#22262e; --fg:#e8eaed; --muted:#9aa0a8;
  --accent:#7aa2f7; --accent-fg:#0b0d10; --err:#f7768e; --ok:#9ece6a; --border:#2c313a;
}
@media (prefers-color-scheme: light){
  :root{ --bg:#f4f5f7; --card:#fff; --card2:#f0f1f4; --fg:#1a1c20; --muted:#606770;
    --accent:#3d5afe; --accent-fg:#fff; --border:#e0e2e8; }
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--fg);
  font:16px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;}
#app{max-width:720px;margin:0 auto;padding:24px 16px 64px}
.hidden{display:none !important}
h1{font-size:1.35rem;margin:0}
.sub{color:var(--muted);margin:.3rem 0 1.2rem}
.card{background:var(--card);border:1px solid var(--border);border-radius:14px;padding:20px}
.hint{color:var(--muted);font-size:.82rem;line-height:1.45}
.hint.footer{margin-top:24px;text-align:center}
.err{color:var(--err);min-height:1.2em;margin:.4rem 0 0;font-size:.9rem}

/* auth */
#auth{max-width:420px;margin:8vh auto 0}
form label{display:block;margin:0 0 14px;font-size:.85rem;color:var(--muted)}
input,textarea{width:100%;margin-top:6px;padding:11px 12px;border-radius:10px;
  border:1px solid var(--border);background:var(--card2);color:var(--fg);font-size:1rem}
textarea{margin-top:0;resize:vertical;font-family:inherit}
input:focus,textarea:focus{outline:2px solid var(--accent);outline-offset:0;border-color:transparent}
button{cursor:pointer;border:none;border-radius:10px;padding:11px 16px;font-size:.95rem;
  font-weight:600;background:var(--accent);color:var(--accent-fg)}
button:hover{filter:brightness(1.08)}
button:disabled{opacity:.55;cursor:default}
button.ghost{background:transparent;color:var(--fg);border:1px solid var(--border);font-weight:500}
#authBtn{width:100%;margin-top:4px}

/* journal */
#journal header{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px}
.tools{display:flex;align-items:center;gap:12px}
.sync{color:var(--muted);font-size:.8rem}
.sync.ok{color:var(--ok)} .sync.busy{color:var(--accent)} .sync.err{color:var(--err)}
.composer{margin-bottom:22px}
.composer-actions{display:flex;align-items:center;gap:10px;margin-top:12px}
.spacer{flex:1}
.micstate{color:var(--accent);font-size:.82rem}
button.rec{background:var(--err);color:#fff}

.entry{background:var(--card);border:1px solid var(--border);border-radius:12px;
  padding:14px 16px;margin-bottom:12px}
.entry .meta{display:flex;justify-content:space-between;align-items:center;
  color:var(--muted);font-size:.78rem;margin-bottom:6px}
.entry .body{white-space:pre-wrap;word-wrap:break-word}
.entry .row-actions{display:flex;gap:8px}
.entry .row-actions button{padding:4px 8px;font-size:.78rem;background:transparent;
  color:var(--muted);border:1px solid var(--border);font-weight:500}
.entry .row-actions button:hover{color:var(--fg)}
.empty{color:var(--muted);text-align:center;padding:32px 0}