* { box-sizing: border-box; }
:root {
  --bg: #ffffff; --surface: #f3f4f6; --text: #0f172a; --muted: #64748b;
  --primary: #2563eb; --danger: #dc2626; --border: #e5e7eb; --shadow: 0 1px 3px rgba(0,0,0,.06);
}
body[data-theme="dark"] {
  --bg: #0f172a; --surface: #1e293b; --text: #e2e8f0; --muted: #94a3b8;
  --primary: #3b82f6; --danger: #ef4444; --border: #334155; --shadow: 0 1px 3px rgba(0,0,0,.4);
}
html, body { margin: 0; padding: 0; background: var(--bg); color: var(--text); font-family: system-ui, -apple-system, Segoe UI, Roboto, sans-serif; min-height: 100vh; }
.topbar { display:flex; align-items:center; justify-content:space-between; padding:12px 16px; background:var(--surface); border-bottom:1px solid var(--border); position:sticky; top:0; z-index:10; }
.topbar h1 { margin:0; font-size:18px; }
.topbar .actions { display:flex; gap:8px; flex-wrap:wrap; }
button { background: var(--primary); color: #fff; border: none; padding: 9px 14px; border-radius: 8px; cursor: pointer; font-size: 14px; }
button[disabled] { opacity: .6; cursor: progress; }
button.secondary, .topbar button { background: transparent; color: var(--text); border: 1px solid var(--border); }
main { padding: 16px; max-width: 760px; margin: 0 auto; }
.card { background: var(--surface); padding: 20px; border-radius: 12px; box-shadow: var(--shadow); }
.tabs { display:flex; gap:4px; margin-bottom: 16px; border-bottom: 1px solid var(--border); }
.tab { background: transparent; color: var(--muted); border: none; padding: 8px 16px; border-bottom: 2px solid transparent; }
.tab.active { color: var(--primary); border-bottom-color: var(--primary); }
form label { display:block; margin: 10px 0; }
form input, form textarea, form select { width: 100%; padding: 10px; border: 1px solid var(--border); background: var(--bg); color: var(--text); border-radius: 8px; font-size: 15px; font-family: inherit; }
form textarea { resize: vertical; font-family: ui-monospace, SFMono-Regular, monospace; }
.hint { color: var(--muted); font-size: 13px; }
.error { color: var(--danger); margin: 8px 0 0; min-height: 1em; }
.toolbar { display:flex; gap:8px; margin-bottom: 12px; flex-wrap:wrap; }
.toolbar input, .toolbar select { flex: 1 1 200px; padding: 10px; background: var(--surface); color: var(--text); border:1px solid var(--border); border-radius: 8px; }
.notes-list { list-style:none; padding:0; margin:0; display:grid; gap: 10px; }
.notes-list li { background: var(--surface); padding: 14px; border-radius: 10px; cursor: pointer; box-shadow: var(--shadow); }
.notes-list h3 { margin:0 0 6px; font-size: 16px; }
.notes-list p { margin: 0; color: var(--muted); font-size: 13px; white-space: pre-wrap; max-height: 3em; overflow: hidden; }
.notes-list .tags { display:flex; gap:6px; flex-wrap:wrap; margin-top: 8px; }
.notes-list .tag { background: var(--bg); border:1px solid var(--border); padding: 2px 8px; border-radius: 999px; font-size: 11px; color: var(--muted); }
#editor-form input, #editor-form textarea { margin: 6px 0; }
.row { display:flex; gap:8px; margin-top: 10px; flex-wrap:wrap; }
#ed-delete { background: var(--danger); }
#audit-list { font-family: ui-monospace, monospace; font-size: 13px; padding-left: 20px; }
#audit-list li { margin: 6px 0; word-break: break-all; }
#toast { position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%); background: #111827; color: #f9fafb; padding: 10px 18px; border-radius: 8px; box-shadow: 0 4px 12px rgba(0,0,0,.3); z-index: 100; }
@media (max-width: 600px) { .topbar h1 { font-size: 16px; } main { padding: 12px; } .toolbar input, .toolbar select { flex-basis: 100%; } }