:root { color-scheme: dark; --bg:#0f172a; --card:#111827; --text:#f8fafc; --muted:#94a3b8; --line:#334155; --accent:#38bdf8; --danger:#fb7185; }
* { box-sizing: border-box; }
body { margin: 0; font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; background: var(--bg); color: var(--text); }
main { width: min(760px, 100%); margin: 0 auto; padding: 1rem; }
.topbar { display:flex; align-items:center; justify-content:space-between; padding: .8rem 1rem; border-bottom:1px solid var(--line); position: sticky; top:0; background:rgba(15,23,42,.95); backdrop-filter: blur(8px); }
h1 { font-size: 1.45rem; margin: 0 0 1rem; }
h2 { font-size: 1rem; margin-top: 1.25rem; }
.card { background: var(--card); border:1px solid var(--line); border-radius: 18px; padding: 1rem; box-shadow: 0 10px 25px rgba(0,0,0,.22); }
.login-body { min-height: 100vh; display:grid; place-items:center; padding:1rem; }
.login-card { width:min(420px,100%); }
label { display:block; font-weight: 650; margin: .9rem 0 .35rem; }
input, textarea, select, button { width:100%; border-radius: 12px; border:1px solid var(--line); font: inherit; }
input, textarea, select { background:#020617; color:var(--text); padding:.8rem; }
textarea { resize: vertical; min-height: 10rem; }
button { margin-top:.8rem; padding:.85rem 1rem; background:var(--accent); color:#001018; border:0; font-weight:800; cursor:pointer; }
button:disabled { opacity:.45; cursor:not-allowed; filter:grayscale(1); }
.secondary { background:#1e293b; color:var(--text); border:1px solid var(--line); }
.small { width:auto; padding:.5rem .75rem; margin-top:0; }
.wide { width:100%; }
.row { display:flex; gap:.6rem; align-items:end; }
.row > * { flex:1; }
.space-between { justify-content:space-between; align-items:center; }
.date-line { font-size:1.1rem; font-weight:800; margin-bottom:.6rem; }
.muted { color:var(--muted); }
.error { color:var(--danger); font-weight:700; }
.note-list { padding-left:1.1rem; }
.note-list li { margin:.55rem 0; white-space:pre-wrap; }
.grid-two { display:grid; grid-template-columns:1fr 1fr; gap:.75rem; }
.export-actions { display:grid; grid-template-columns:1fr 1fr; gap:.75rem; }
.log-date { border-top:1px solid var(--line); padding-top:1rem; margin-top:1rem; }
.log-note { background:#020617; border:1px solid var(--line); border-radius:12px; padding:.75rem; margin:.5rem 0; }
.log-note p { white-space:pre-wrap; margin:.2rem 0 .6rem; }
.note-actions { display:flex; gap:.5rem; }
.note-actions button { width:auto; padding:.45rem .65rem; margin:0; }
@media (max-width: 560px) { .grid-two, .export-actions { grid-template-columns:1fr; } .row { align-items:stretch; } }