:root { --fg:#1c1b19; --muted:#6b675f; --bg:#f6f5f2; --card:#fff; --line:#dedad0; --accent:#7a2e1d; --danger:#a12a2a; --ok:#2d6a3e; }
@media (prefers-color-scheme: dark) { :root { --fg:#f1ece2; --muted:#a39d90; --bg:#161513; --card:#1f1e1b; --line:#37342d; --accent:#e0a78f; --danger:#e08a8a; --ok:#8fd1a2; } }
* { box-sizing: border-box; }
body { margin:0; background:var(--bg); color:var(--fg); font:16px/1.45 system-ui, -apple-system, 'Segoe UI', sans-serif; }
main { max-width:860px; margin:0 auto; padding:16px; }
h1 { font-size:1.5rem; margin:.4em 0; } h2 { font-size:1.1rem; margin:.2em 0 .6em; }
a { color:var(--accent); }
.muted { color:var(--muted); } .warn { color:var(--danger); font-style:normal; }
.bar { display:flex; flex-wrap:wrap; gap:8px 20px; align-items:center; justify-content:space-between; padding:10px 16px; background:var(--card); border-bottom:1px solid var(--line); }
.bar nav { display:flex; flex-wrap:wrap; gap:6px 16px; align-items:center; }
.brand { text-decoration:none; color:var(--fg); } .brand span { color:var(--muted); }
.card { background:var(--card); border:1px solid var(--line); border-radius:10px; padding:14px; margin:12px 0; }
.card.ok { border-color:var(--ok); } .narrow { max-width:380px; margin:48px auto; }
.grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(260px, 1fr)); gap:12px; }
label { display:block; margin:.6em 0; font-size:.92rem; color:var(--muted); }
label.check { display:inline-flex; gap:6px; align-items:center; margin:.25em 12px .25em 0; color:var(--fg); }
input:not([type=checkbox]), select { display:block; width:100%; padding:9px 10px; margin-top:4px; font:inherit; color:var(--fg); background:var(--bg); border:1px solid var(--line); border-radius:7px; }
.row { display:flex; flex-wrap:wrap; gap:8px; align-items:center; } .row input:not([type=checkbox]) { width:auto; flex:1 1 200px; margin:0; }
.row.small { margin:8px 0; }
button { font:inherit; padding:9px 14px; border:0; border-radius:7px; background:var(--accent); color:#fff; cursor:pointer; }
@media (prefers-color-scheme: dark) { button { color:#161513; } }
button.secondary { background:transparent; color:var(--fg); border:1px solid var(--line); }
button.danger { background:transparent; color:var(--danger); border:1px solid var(--danger); }
button.link { background:none; color:var(--accent); padding:0; }
form.inline { display:inline; }
.flash { padding:10px 12px; border-radius:8px; border:1px solid var(--line); background:var(--card); }
.flash.ok { border-color:var(--ok); } .flash.error { border-color:var(--danger); color:var(--danger); }
fieldset { border:1px solid var(--line); border-radius:8px; margin:10px 0; } legend { color:var(--muted); font-size:.85rem; padding:0 6px; }
details.item { border-top:1px solid var(--line); padding:8px 0; } summary { cursor:pointer; padding:4px 0; }
.dish { margin-bottom:6px; } .dish input { margin-bottom:2px; }
.publish { margin:20px 0; display:flex; gap:12px; align-items:center; flex-wrap:wrap; }
.table-scroll { overflow-x:auto; } table { border-collapse:collapse; width:100%; } th, td { text-align:left; padding:8px; border-bottom:1px solid var(--line); vertical-align:middle; }
code { background:var(--bg); padding:1px 5px; border-radius:4px; }
.bars { display:flex; align-items:flex-end; gap:2px; height:64px; margin:8px 0; } .bars span { flex:1; background:var(--accent); border-radius:2px 2px 0 0; min-width:3px; }
tfoot th { border-top:2px solid var(--line); border-bottom:0; }
td input:not([type=checkbox]) { max-width:120px; }