@import url("https://fonts.googleapis.com/css2?family=Inter:wght@420;560;680&family=JetBrains+Mono:wght@460;680&display=swap");
:root {
  color-scheme: light;
  --bg:#f4f7fb; --panel:#ffffff; --ink:#172033; --muted:#5d6b82; --line:#d5deea;
  --accent:#0f9f6e; --accent-ink:#ffffff; --danger:#a33b3b; --shadow:0 18px 40px rgba(23,32,51,.08);
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg:#09090b; --panel:#18181b; --ink:#e4e4e7; --muted:#a1a1aa; --line:#27272a;
  --accent:#00ff94; --accent-ink:#062116; --danger:#ffb4b4; --shadow:none;
}
* { box-sizing:border-box; }
body { margin:0; min-height:100vh; background:var(--bg); color:var(--ink); font:16px/1.5 Inter, sans-serif; }
button, input, textarea { font:inherit; color:inherit; }
button { cursor:pointer; }
.app-shell { display:grid; grid-template-columns:250px minmax(0,1fr); min-height:100vh; }
.sidebar, .panel, .auth-modal { background:var(--panel); border:1px solid var(--line); }
.sidebar { padding:22px 16px; border-width:0 1px 0 0; }
.brand { display:flex; gap:10px; align-items:center; }
.brand-mark { width:34px; height:34px; background:#e07a3d url("/icon.svg") center/cover; }
.brand strong { display:block; }
.brand small, .eyebrow, .meta, .sync-pill { color:var(--muted); font:460 12px/1.4 "JetBrains Mono", monospace; letter-spacing:.04em; }
.sync-pill[data-state="synced"] { color:var(--accent); }
.sync-pill[data-state="offline"], .sync-pill[data-state="error"] { color:var(--danger); }
.account-chip, .nav-item, .new-note-button, .theme-button { width:100%; display:flex; justify-content:space-between; align-items:center; margin-top:8px; padding:10px 12px; border:1px solid var(--line); background:transparent; text-align:left; }
.nav-item.active, .new-note-button, .primary-button { background:var(--accent); color:var(--accent-ink); border-color:var(--accent); }
.nav-list { display:grid; gap:6px; margin-top:18px; }
.workspace { padding:24px clamp(14px,3vw,40px) 70px; }
.topbar { display:flex; justify-content:space-between; gap:16px; align-items:end; margin-bottom:18px; }
h1, h2 { margin:0; font-size:clamp(32px,4vw,48px); letter-spacing:-.04em; }
h2 { font-size:34px; }
.search-box, .field input, .field textarea, .title-input, .editor-body { width:100%; border:1px solid var(--line); background:var(--panel); padding:10px; }
.title-input { font-size:28px; font-weight:680; }
.editor-body { min-height:280px; resize:vertical; }
.workspace-layout { display:grid; grid-template-columns:minmax(220px,320px) minmax(0,1fr); gap:14px; }
.note-list { display:grid; align-content:start; gap:8px; max-height:70vh; overflow:auto; padding:10px; }
.note-card { display:grid; gap:4px; width:100%; padding:12px; border:1px solid transparent; background:transparent; text-align:left; }
.note-card.active { border-color:var(--accent); }
.note-card span, .reminder-row small, .empty { color:var(--muted); }
.editor-scroll, .stack { display:grid; gap:12px; padding:16px; }
.toolbar, .form-actions { display:flex; gap:8px; align-items:center; }
.primary-button, .quiet-button, .text-button { padding:10px 14px; border:1px solid var(--line); background:transparent; }
.quiet-button.danger { color:var(--danger); }
.list { display:grid; gap:8px; }
.reminder-row { display:flex; justify-content:space-between; gap:12px; padding:12px; border:1px solid var(--line); background:var(--panel); }
.modal-backdrop { position:fixed; inset:0; display:grid; place-items:center; padding:18px; background:color-mix(in srgb, var(--bg) 30%, #000 70%); }
.auth-modal { width:min(440px,100%); padding:24px; box-shadow:var(--shadow); }
.auth-modal form, .field { display:grid; gap:8px; }
.form-error { min-height:1.2em; color:var(--danger); }
.update-banner { position:fixed; left:16px; right:16px; bottom:16px; display:flex; justify-content:space-between; gap:12px; align-items:center; padding:12px; background:var(--panel); border:1px solid var(--accent); }
@media (max-width:800px) {
  .app-shell, .workspace-layout { display:block; }
  .sidebar { border-width:0 0 1px; }
  .nav-list { display:flex; overflow:auto; }
  .nav-item { min-width:118px; }
  .note-list { max-height:none; }
}