:root {
  --bg: #f6f1e7; --panel: #fffdf8; --panel2: #efe7d8; --line: #ddd1bb; --ink: #2a2420; --muted: #74685c;
  --accent: #8a3b23; --accent-ink: #fff; --gold: #b0802a; --ok: #2f6b3d; --warn: #9a5b00; --bad: #a12a2a;
  --scene: #8a3b23; --character: #2c5d8a; --location: #3d7a3a; --shop: #b0802a; --item: #7a4c96; --faction: #5d5d5d; --quest: #b24f7c; --note: #6d6252;
  --radius: 10px; --shadow: 0 1px 2px rgba(40,30,20,.06), 0 4px 16px rgba(40,30,20,.06);
  --head: 'Cinzel', Georgia, serif; --body: 'Inter', system-ui, -apple-system, Segoe UI, sans-serif;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #17140f; --panel: #211d17; --panel2: #2a251e; --line: #3a3329; --ink: #ece4d6; --muted: #a69a88;
    --accent: #d0774f; --accent-ink: #1a120c; --gold: #d8aa52; --scene: #d0774f; --character: #6aa3d8; --location: #78b872; --shop: #d8aa52; --item: #b48ad6; --faction: #a0a0a0; --quest: #e083ad; --note: #b3a68f;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #17140f; --panel: #211d17; --panel2: #2a251e; --line: #3a3329; --ink: #ece4d6; --muted: #a69a88;
  --accent: #d0774f; --accent-ink: #1a120c; --gold: #d8aa52; --scene: #d0774f; --character: #6aa3d8; --location: #78b872; --shop: #d8aa52; --item: #b48ad6; --faction: #a0a0a0; --quest: #e083ad; --note: #b3a68f;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--bg); color: var(--ink); font: 15px/1.5 var(--body); }
h1, h2, h3 { font-family: var(--head); font-weight: 600; letter-spacing: .02em; margin: 0 0 .5em; }
a { color: var(--accent); }
button, input, select, textarea { font: inherit; color: inherit; }
input, select, textarea { background: var(--panel); border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; width: 100%; }
input:focus, select:focus, textarea:focus { outline: 2px solid color-mix(in srgb, var(--accent) 45%, transparent); border-color: var(--accent); }
textarea { resize: vertical; min-height: 120px; line-height: 1.55; }
label { display: block; font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); margin: 12px 0 4px; }
.btn { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--line); background: var(--panel); border-radius: 8px; padding: 7px 12px; cursor: pointer; text-decoration: none; color: var(--ink); white-space: nowrap; }
.btn:hover { border-color: var(--accent); }
.btn.primary { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.btn.danger { color: var(--bad); }
.btn.small { padding: 4px 8px; font-size: 13px; }
.btn.ghost { background: transparent; border-color: transparent; }
.btn.ghost:hover { border-color: var(--line); }
.muted { color: var(--muted); }
.card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); }
.pill { display: inline-block; font-size: 11px; padding: 1px 8px; border-radius: 99px; border: 1px solid currentColor; text-transform: capitalize; }
.t-scene { color: var(--scene); } .t-character { color: var(--character); } .t-location { color: var(--location); } .t-shop { color: var(--shop); }
.t-item { color: var(--item); } .t-faction { color: var(--faction); } .t-quest { color: var(--quest); } .t-note { color: var(--note); }
.err { color: var(--bad); min-height: 1.4em; font-size: 14px; }
.md p:first-child { margin-top: 0; } .md img { max-width: 100%; }
.md a.wl { text-decoration: none; border-bottom: 1px dashed var(--accent); }
.md a.wl.missing { color: var(--muted); border-bottom-color: var(--muted); }
.md table { border-collapse: collapse; } .md td, .md th { border: 1px solid var(--line); padding: 4px 8px; }
.md blockquote { margin: 0; padding-left: 12px; border-left: 3px solid var(--gold); color: var(--muted); }
.toast { position: fixed; bottom: 18px; left: 50%; transform: translateX(-50%); background: var(--ink); color: var(--bg); padding: 8px 14px; border-radius: 8px; z-index: 99; font-size: 14px; }