:root { --bg:#f6f6f4; --card:#fff; --text:#1f1f1d; --muted:#6b6b66; --line:#e2e2dd; --accent:#1a5fb4; --accent-text:#fff; }
@media (prefers-color-scheme: dark) {
  :root { --bg:#1b1b1a; --card:#262625; --text:#f0f0ec; --muted:#a3a39d; --line:#3a3a38; --accent:#6aa3f0; --accent-text:#10161f; }
}
* { box-sizing: border-box; }
body { margin:0; background:var(--bg); color:var(--text); font:15px/1.5 system-ui, -apple-system, "Segoe UI", sans-serif; }
a { color:var(--accent); }
.wrap { max-width:640px; margin:0 auto; padding:16px; }
header { display:flex; justify-content:space-between; align-items:baseline; gap:12px; margin-bottom:12px; flex-wrap:wrap; }
h1 { font-size:20px; font-weight:600; margin:0; }
.who { font-size:12px; color:var(--muted); }
form.inline { display:inline; }
button.link { background:none; border:0; padding:0; color:var(--accent); font:inherit; font-size:12px; cursor:pointer; text-decoration:underline; }
nav, .tabs { display:flex; gap:6px; margin-bottom:16px; }
nav a, .tabs a { flex:1; text-align:center; padding:10px 8px; border:1px solid var(--line); background:var(--card); color:var(--text); border-radius:8px; text-decoration:none; }
nav a.on, .tabs a.on { background:var(--accent); color:var(--accent-text); border-color:var(--accent); }
.card { background:var(--card); border:1px solid var(--line); border-radius:12px; padding:14px; margin-bottom:12px; }
.gap { height:12px; }
label { display:block; font-size:13px; color:var(--muted); margin:0 0 6px; }
input, textarea, select { width:100%; padding:10px; border:1px solid var(--line); border-radius:8px; background:var(--bg); color:var(--text); font:inherit; }
textarea { min-height:90px; resize:vertical; }
input[type=file] { padding:14px; border:2px dashed var(--line); }
.primary { width:100%; margin-top:12px; padding:12px; border:0; border-radius:8px; background:var(--accent); color:var(--accent-text); font:inherit; font-weight:600; cursor:pointer; }
.primary:disabled { opacity:.5; cursor:default; }
.hint { font-size:12px; color:var(--muted); margin:6px 0 0; }
.msg { padding:10px 12px; border-radius:8px; margin-bottom:10px; font-size:14px; background:var(--card); border:1px solid var(--line); }
.msg.ok { border-color:#a9cf9c; }
.msg.warn { border-color:#e8d38a; }
.msg.error { border-color:#c0392b; color:#c0392b; }
.row1 { display:flex; justify-content:space-between; gap:10px; align-items:baseline; }
.vendor { font-weight:600; }
.amount { font-weight:600; white-space:nowrap; }
.meta { font-size:13px; color:var(--muted); margin-top:2px; }
.note { font-size:13px; margin-top:6px; }
.muted { color:var(--muted); }
.chiprow { margin-top:6px; }
.chip { display:inline-block; font-size:12px; padding:2px 8px; border-radius:6px; border:1px solid var(--line); }
.chip.kontr { background:#fff2cc; color:#6b4e00; border-color:#e8d38a; }
.chip.dub { background:#fce5cd; color:#7a3f00; border-color:#e8bd93; }
.chip.fel { background:#f4cccc; color:#7a1c1c; border-color:#e3a0a0; }
.chip.ok { background:#d9ead3; color:#274e13; border-color:#a9cf9c; }
.chip.avv { background:#d9d9d9; color:#333; border-color:#bdbdbd; }
.actions { display:flex; gap:8px; margin-top:10px; flex-wrap:wrap; align-items:center; }
.actions form { margin:0; }
.actions button, .actions a { padding:8px 12px; border:1px solid var(--line); border-radius:8px; background:var(--card); color:var(--text); font:inherit; font-size:14px; cursor:pointer; text-decoration:none; }
.actions .approve { background:#2f7d32; color:#fff; border-color:#2f7d32; }
.empty { text-align:center; color:var(--muted); padding:24px 0; }
.grid3 { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:10px; margin-top:12px; }
.span2 { grid-column: span 2; }