:root { --bg:#f5f7fa; --card:#fff; --ink:#1b2430; --muted:#5b6774; --line:#dfe5ec; --accent:#0b6fd6; --danger:#c62828; --ok:#2e7d32; --warn:#ef6c00; }
@media (prefers-color-scheme: dark) { :root { --bg:#0f1418; --card:#171e25; --ink:#e7edf3; --muted:#9aa7b4; --line:#2a343e; --accent:#5aa3ff; } }
* { box-sizing:border-box }
body { margin:0; font:15px/1.45 -apple-system, system-ui, "Segoe UI", Roboto, sans-serif; background:var(--bg); color:var(--ink) }
a { color:var(--accent); text-decoration:none }
.top { display:flex; align-items:center; gap:14px; padding:10px 16px; background:var(--card); border-bottom:1px solid var(--line); position:sticky; top:0; z-index:5 }
.brand { display:flex; align-items:center; gap:8px; font-weight:700; color:var(--ink) }
.nav { display:flex; gap:4px; flex-wrap:wrap }
.nav a { padding:6px 10px; border-radius:8px; color:var(--ink) }
.nav a.active, .nav a:hover { background:var(--bg) }
.dl { padding:6px 12px; border-radius:8px; background:var(--accent); color:#fff; white-space:nowrap; font-size:14px }
.dl:hover { opacity:.9; text-decoration:none }
.spacer { flex:1 }
.top select.lang { width:auto; flex:0 0 auto }
.lang, input, select, textarea, button { font:inherit; color:inherit }
input, select, textarea { background:var(--card); border:1px solid var(--line); border-radius:8px; padding:8px 10px; width:100% }
textarea { min-height:70px }
button { background:var(--accent); color:#fff; border:0; border-radius:8px; padding:8px 14px; cursor:pointer }
button.secondary { background:var(--bg); color:var(--ink); border:1px solid var(--line) }
button.danger { background:var(--danger) }
button.link { background:none; color:var(--accent); padding:4px 6px }
button:disabled { opacity:.5; cursor:default }
.view { max-width:1100px; margin:0 auto; padding:16px }
.card { background:var(--card); border:1px solid var(--line); border-radius:12px; padding:14px; margin-bottom:12px }
.row { display:flex; gap:10px; flex-wrap:wrap; align-items:center }
.row > * { flex:1 1 160px }
.row > .fit { flex:0 0 auto }
.grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(280px,1fr)); gap:12px }
.muted { color:var(--muted); font-size:13px }
.title { font-size:20px; font-weight:700; margin:0 0 10px }
.item { display:flex; justify-content:space-between; gap:10px; padding:10px 0; border-bottom:1px solid var(--line); cursor:pointer }
.item:last-child { border-bottom:0 }
.item b { display:block }
.badge { display:inline-block; padding:1px 8px; border-radius:999px; font-size:12px; background:rgba(239,108,0,.15); color:var(--warn) }
.badge.ok { background:rgba(46,125,50,.15); color:var(--ok) }
.badge.bad { background:rgba(198,40,40,.15); color:var(--danger) }
.auth { max-width:420px; margin:40px auto }
.auth h1 { margin-top:0 }
.auth .providers { display:flex; flex-direction:column; gap:8px; margin-top:12px }
#map { height:360px; border-radius:12px; border:1px solid var(--line) }
.sitegrid { display:grid; grid-template-columns:1fr 1fr; gap:12px }
@media (max-width:820px) { .sitegrid { grid-template-columns:1fr } }
dialog { border:1px solid var(--line); border-radius:12px; background:var(--card); color:var(--ink); max-width:560px; width:96%; padding:16px }
dialog::backdrop { background:rgba(0,0,0,.35) }
dialog form > * { margin-bottom:8px }
label { display:block; font-size:13px; color:var(--muted) }
.toast { position:fixed; bottom:20px; left:50%; transform:translateX(-50%); background:var(--ink); color:var(--bg); padding:10px 16px; border-radius:10px; z-index:10; max-width:90% }
.foot { text-align:center; color:var(--muted); font-size:12px; padding:20px }
.code { font-family:ui-monospace, Menlo, monospace; font-size:22px; letter-spacing:2px }
.apple-btn { background:#000; color:#fff }
[hidden] { display:none !important }
.item.found { background:var(--bg); border-style:dashed }