:root { --accent:#2563eb; --accent-d:#1d4ed8; --ink:#1f2937; --muted:#6b7280; --line:#e5e7eb; --bg:#f8fafc; --card:#fff; --ok:#16a34a; --warn:#d97706; --bad:#dc2626; --r:10px; }
* { box-sizing:border-box; }
html,body { margin:0; font-family: system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; color:var(--ink); background:var(--bg); font-size:15px; }
h1 { font-size:1.5rem; margin:0 0 .25rem; } h2 { font-size:1.15rem; margin:1.4rem 0 .5rem; } h3 { font-size:1rem; margin:0 0 .6rem; }
a { color:var(--accent); text-decoration:none; } a:hover { text-decoration:underline; }
.muted { color:var(--muted); } .small { font-size:.82rem; }
.shell { display:grid; grid-template-columns:230px 1fr; min-height:100vh; }
.topbar { display:none; }
.side { background:#fff; border-right:1px solid var(--line); padding:1rem .75rem; display:flex; flex-direction:column; gap:2px; position:sticky; top:0; height:100vh; }
.brand { display:flex; gap:.6rem; align-items:center; font-weight:700; padding:.2rem .6rem 1rem; color:var(--accent); } .brand small { color:var(--muted); font-weight:500; }
.side a { display:flex; gap:.65rem; align-items:center; padding:.6rem .7rem; border-radius:8px; color:var(--ink); } .side a:hover { background:#f1f5f9; text-decoration:none; }
.side a.active { background:#eff6ff; color:var(--accent); font-weight:600; }
.content { padding:1.4rem 1.6rem 3rem; min-width:0; max-width:1200px; }
.head { display:flex; justify-content:space-between; align-items:flex-start; gap:1rem; flex-wrap:wrap; margin-bottom:1rem; }
.actions { display:flex; gap:.5rem; flex-wrap:wrap; }
.btn { border:1px solid var(--line); background:#fff; color:var(--ink); border-radius:8px; padding:.5rem .9rem; font:inherit; cursor:pointer; display:inline-flex; gap:.4rem; align-items:center; min-height:38px; }
.btn:hover { border-color:#cbd5e1; background:#f8fafc; text-decoration:none; } .btn:disabled { opacity:.5; cursor:default; }
.btn.primary { background:var(--accent); border-color:var(--accent); color:#fff; } .btn.primary:hover { background:var(--accent-d); }
.btn.on { background:#eff6ff; border-color:var(--accent); color:var(--accent); }
.icon-btn { background:none; border:0; padding:.4rem; cursor:pointer; color:inherit; position:relative; }
.card { background:var(--card); border:1px solid var(--line); border-radius:var(--r); padding:1rem; }
.cards { display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:1rem; }
.stat { font-size:1.9rem; font-weight:700; } .stat-l { color:var(--muted); font-size:.85rem; }
.tablewrap { overflow-x:auto; background:var(--card); border:1px solid var(--line); border-radius:var(--r); }
table { border-collapse:collapse; width:100%; } th,td { text-align:left; padding:.6rem .8rem; border-bottom:1px solid var(--line); white-space:nowrap; }
th { font-size:.78rem; text-transform:uppercase; letter-spacing:.04em; color:var(--muted); background:#f8fafc; } tr:last-child td { border-bottom:0; }
tbody tr:hover { background:#f8fafc; } td.wrap { white-space:normal; }
.tag { display:inline-block; padding:.12rem .55rem; border-radius:99px; font-size:.78rem; background:#f1f5f9; }
.tag.ok { background:#dcfce7; color:#166534; } .tag.warn { background:#fef3c7; color:#92400e; } .tag.bad { background:#fee2e2; color:#991b1b; } .tag.info { background:#dbeafe; color:#1e40af; }
input[type=text],input[type=search],input[type=number],input[type=datetime-local],select,textarea { font:inherit; border:1px solid #cbd5e1; border-radius:8px; padding:.5rem .65rem; width:100%; background:#fff; min-height:38px; }
input:focus,select:focus,textarea:focus { outline:2px solid #bfdbfe; border-color:var(--accent); }
label { display:block; font-size:.82rem; color:var(--muted); margin:.7rem 0 .25rem; }
.form { display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:0 1rem; max-width:900px; } .form .full { grid-column:1/-1; }
.err { color:var(--bad); font-size:.85rem; margin-top:.2rem; } .notice { background:#fffbeb; border:1px solid #fde68a; color:#78350f; padding:.6rem .8rem; border-radius:8px; margin:.6rem 0; }
.notice.info { background:#eff6ff; border-color:#bfdbfe; color:#1e3a8a; } .notice.bad { background:#fef2f2; border-color:#fecaca; color:#7f1d1d; } .notice.ok { background:#f0fdf4; border-color:#bbf7d0; color:#14532d; }
.searchbar { display:flex; gap:.6rem; flex-wrap:wrap; align-items:flex-end; margin-bottom:.4rem; } .searchbar .grow { flex:1 1 260px; } .searchbar .facet { flex:0 1 200px; position:relative; }
.facet-list { position:absolute; z-index:5; left:0; right:0; background:#fff; border:1px solid var(--line); border-radius:8px; box-shadow:0 8px 20px rgba(0,0,0,.08); margin:2px 0 0; padding:.25rem; list-style:none; }
.facet-list button, .options button { width:100%; text-align:left; background:none; border:0; padding:.5rem .6rem; border-radius:6px; font:inherit; cursor:pointer; display:flex; justify-content:space-between; gap:.5rem; } .facet-list button:hover, .options button:hover { background:#eff6ff; }
.options { list-style:none; margin:.2rem 0 0; padding:.25rem; border:1px solid var(--line); border-radius:8px; max-height:220px; overflow:auto; background:#fff; }
.chips { display:flex; gap:.4rem; flex-wrap:wrap; margin:.4rem 0; } .chip { display:inline-flex; gap:.4rem; align-items:center; background:#eff6ff; color:#1e40af; border-radius:99px; padding:.2rem .3rem .2rem .7rem; font-size:.85rem; } .chip button { border:0; background:none; cursor:pointer; color:inherit; font-size:1rem; line-height:1; padding:0 .3rem; }
.pager { display:flex; gap:.8rem; align-items:center; justify-content:flex-end; margin:.8rem 0; }
.split { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:1rem; align-items:start; } .mapbox { position:sticky; top:1rem; }
#sitemap { height:520px; border-radius:var(--r); border:1px solid var(--line); } .maptools { display:flex; gap:.5rem; flex-wrap:wrap; margin-bottom:.5rem; }
.drawing .maplibregl-marker, .drawing .maplibregl-popup { pointer-events:none; } .drawing .maplibregl-canvas-container { touch-action:none; }
.area-del { background:#fff; border:1px solid var(--accent); color:var(--accent); border-radius:99px; padding:.2rem .6rem; font:inherit; font-size:.8rem; cursor:pointer; box-shadow:0 1px 4px rgba(0,0,0,.2); }
.kv { display:grid; grid-template-columns:minmax(120px,200px) 1fr; gap:.4rem 1rem; } .kv dt { color:var(--muted); } .kv dd { margin:0; }
.bars { display:flex; flex-direction:column; gap:.4rem; } .bar-row { display:grid; grid-template-columns:minmax(80px,150px) 1fr 44px; gap:.6rem; align-items:center; font-size:.88rem; }
.bar-label { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .bar-track { background:#f1f5f9; border-radius:4px; height:14px; } .bar-fill { display:block; background:var(--accent); height:100%; border-radius:4px; min-width:2px; } .bar-val { text-align:right; font-variant-numeric:tabular-nums; }
.notes { position:fixed; right:0; top:0; bottom:0; width:340px; max-width:100%; background:#fff; border-left:1px solid var(--line); box-shadow:-8px 0 24px rgba(0,0,0,.08); padding:1rem; overflow:auto; z-index:50; }
.notes-h { display:flex; justify-content:space-between; align-items:center; margin-bottom:.6rem; } .note { display:flex; gap:.6rem; padding:.5rem 0; border-bottom:1px solid var(--line); } .dot { width:8px; height:8px; border-radius:50%; margin-top:.4rem; background:var(--accent); flex:none; } .dot.created { background:var(--ok); } .dot.deleted { background:var(--bad); }
.toast { position:fixed; bottom:1rem; left:50%; transform:translateX(-50%); background:#111827; color:#fff; padding:.6rem 1rem; border-radius:99px; font-size:.88rem; z-index:60; max-width:92vw; }
.badge { position:absolute; top:-2px; right:-4px; background:var(--bad); color:#fff; border-radius:99px; font-size:.65rem; padding:0 .35rem; }
.empty { text-align:center; padding:2rem 1rem; color:var(--muted); } .picker { margin-top:.3rem; }
@media (max-width: 820px) {
  .shell { grid-template-columns:1fr; }
  .topbar { display:flex; align-items:center; justify-content:space-between; padding:.4rem .6rem; background:#fff; border-bottom:1px solid var(--line); position:sticky; top:0; z-index:40; }
  .brand-s { font-weight:700; color:var(--accent); }
  .side { display:none; position:fixed; z-index:45; top:49px; left:0; bottom:0; width:260px; height:auto; box-shadow:8px 0 24px rgba(0,0,0,.12); } .nav-open .side { display:flex; }
  .content { padding:1rem .8rem 3rem; } .split { grid-template-columns:1fr; } .mapbox { position:static; order:-1; } #sitemap { height:360px; }
  .kv { grid-template-columns:1fr; } .kv dt { margin-top:.4rem; }
}
.rel { list-style:none; margin:0; padding:0; } .rel li { padding:.35rem 0; border-bottom:1px solid var(--line); } .rel li:last-child { border-bottom:0; }