:root { color-scheme: light; --ink:#17332f; --paper:#f5f3ec; --card:#fff; --line:#d6dfd9; --accent:#16634f; --gold:#c99c48; --muted:#5c6f68; font-family: system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; }
* { box-sizing:border-box; }
[hidden] { display:none !important; }
body { margin:0; color:var(--ink); background:var(--paper); }
button, input, select, textarea { font:inherit; }
button { cursor:pointer; }
.topbar { background:var(--ink); color:white; padding:22px max(18px,calc((100vw - 920px)/2)); display:flex; align-items:center; justify-content:space-between; gap:16px; border-bottom:5px solid var(--gold); }
.topbar h1 { font-size:clamp(1.3rem,4vw,1.9rem); margin:4px 0 0; line-height:1.15; }
.eyebrow { font-size:.68rem; font-weight:800; letter-spacing:.13em; color:#e7ce97; }
.network { flex:none; font-size:.78rem; background:#35574d; border-radius:20px; padding:7px 10px; }
.network.offline { background:#70512a; }
main { max-width:920px; margin:auto; padding:18px 18px 90px; }
.status-panel { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:16px 18px; background:var(--card); border:1px solid var(--line); border-radius:14px; box-shadow:0 4px 20px #17332f0a; }
.status-panel strong { font-size:1.6rem; }
.primary { border:0; background:var(--accent); color:#fff; border-radius:9px; padding:11px 15px; font-weight:700; }
.primary:disabled { opacity:.55; cursor:wait; }
.quiet { border:1px solid var(--line); background:#fff; color:var(--ink); border-radius:8px; padding:8px 12px; }
.notice { min-height:2.7em; padding:10px 12px; border-left:3px solid var(--gold); color:#40564e; background:#fff9ec; font-size:.88rem; }
.notice.error { color:#8a2d2d; border-color:#b34b42; background:#fff0ee; }
.tabs { display:grid; grid-template-columns:repeat(4,1fr); gap:5px; margin:22px 0; border-bottom:1px solid var(--line); }
.tabs button { background:transparent; border:0; border-bottom:3px solid transparent; padding:11px 4px; color:var(--muted); font-weight:700; }
.tabs button.active { color:var(--accent); border-bottom-color:var(--accent); }
.page { display:none; }
.page.active { display:block; }
h2 { font-size:1.25rem; margin:0 0 12px; }
h3 { font-size:1.05rem; margin:0; }
.page-heading { display:flex; justify-content:space-between; align-items:center; gap:10px; }
.page-heading span,.muted { color:var(--muted); font-size:.9rem; }
.filters { display:grid; grid-template-columns:2fr 1fr; gap:10px; margin:12px 0 18px; }
.view-switch { display:flex; gap:7px; margin:4px 0 12px; }
.view-switch .selected-mode { background:var(--accent); color:white; border-color:var(--accent); }
.map { min-height:450px; border:1px solid var(--line); border-radius:12px; background:#dce8e0; }
.filters label,.form label { display:grid; gap:5px; color:#35554c; font-size:.84rem; font-weight:700; }
input,select,textarea { width:100%; color:var(--ink); background:#fff; border:1px solid #b7c7bd; border-radius:8px; padding:11px; outline-offset:2px; }
input:focus,select:focus,textarea:focus { outline:2px solid #65a48e; }
.cards { display:grid; gap:10px; }
.card { width:100%; text-align:left; background:#fff; border:1px solid var(--line); border-radius:12px; padding:15px; color:inherit; box-shadow:0 2px 10px #17332f06; }
button.card:hover { border-color:var(--accent); }
.card-top { display:flex; justify-content:space-between; align-items:flex-start; gap:12px; }
.card strong { font-size:1rem; }
.card p { color:var(--muted); margin:7px 0 0; font-size:.86rem; }
.badge { font-size:.72rem; font-weight:750; padding:5px 8px; border-radius:20px; background:#ecf1eb; color:#315949; white-space:nowrap; }
.badge.demo { background:#fff0ce; color:#705218; }
.badge.pending { background:#ffe5d7; color:#78402a; }
.selected,.admin { margin-top:20px; padding:18px; border:1px solid var(--line); border-radius:12px; background:#fff; }
.selected p { color:var(--muted); margin:0 0 18px; }
.form { display:grid; gap:13px; max-width:600px; padding:17px; background:#fff; border:1px solid var(--line); border-radius:12px; }
.selected .form,.admin .form { padding:0; border:0; }
.form button { justify-self:start; }
.form details { border-top:1px solid var(--line); padding:12px 0 0; }
.form summary { font-weight:750; cursor:pointer; }
.optional-fields { display:grid; gap:12px; margin-top:14px; }
.check { display:flex !important; align-items:center; gap:9px !important; }
.check input { width:auto; }
.compact { max-width:480px; }
.source-note { font-size:.78rem; line-height:1.5; margin-top:26px; color:var(--muted); }
.empty { border:1px dashed #aac0b3; padding:25px; border-radius:12px; text-align:center; color:var(--muted); }
@media(max-width:550px) { .topbar { align-items:flex-start; flex-direction:column; } .filters { grid-template-columns:1fr; } .status-panel { padding:12px; } .status-panel span { display:block; font-size:.75rem; } .tabs button { font-size:.79rem; } }