:root { --bg:#0e1116; --panel:#171b22; --line:#2a313c; --text:#e8ecf1; --dim:#8b96a5; --accent:#7cc4ff; --ok:#5fd38d; --bad:#ff7b72; --warn:#e3b341;
        --winter:#cfe6ff; --spring:#7fe0a8; --summer:#ffc84a; --autumn:#e0743a; --me:#1f2a3a; }
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) { --bg:#f5f6f8; --panel:#fff; --line:#d8dde4; --text:#14181d; --dim:#5e6875; --accent:#1769b8; --ok:#1a7f37; --bad:#cf222e; --warn:#9a6700;
          --winter:#5a8fc9; --spring:#2f9e5f; --summer:#c98a00; --autumn:#b8501c; --me:#e8f1fb; }
}
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--bg); color: var(--text); font: 16px/1.45 system-ui, -apple-system, Segoe UI, sans-serif; }
a { color: var(--accent); }
header { position: sticky; top: 0; z-index: 2; background: var(--bg); border-bottom: 1px solid var(--line); }
header .in { max-width: 900px; margin: 0 auto; padding: 10px 16px; display: flex; gap: 14px; align-items: center; }
header b { font-size: 15px; margin-right: auto; }
header nav a { text-decoration: none; color: var(--dim); padding: 6px 10px; border-radius: 8px; }
header nav a.on { color: var(--text); background: var(--panel); border: 1px solid var(--line); }
main { max-width: 900px; margin: 0 auto; padding: 16px; }
.panel { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 14px; margin-bottom: 14px; }
.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 14px; }
.grid .panel { margin: 0; }
h2 { font-size: 14px; color: var(--dim); font-weight: 600; margin: 0 0 8px; text-transform: uppercase; letter-spacing: .04em; }
.big { font-size: 24px; font-weight: 650; }
.dim { color: var(--dim); font-size: 13px; }
.dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 6px; background: var(--dim); }
.dot.ok { background: var(--ok); } .dot.bad { background: var(--bad); } .dot.warn { background: var(--warn); }
button, select, input, textarea { font: inherit; color: var(--text); }
button { background: transparent; border: 1px solid var(--line); border-radius: 10px; padding: 8px 12px; cursor: pointer; }
button.on, button.primary { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 18%, transparent); }
button:disabled { opacity: .45; cursor: not-allowed; }
select, input[type=number], textarea, input[type=password] { background: var(--bg); border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px; }
input[type=range] { width: 100%; }
.row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.kv { display: grid; grid-template-columns: auto 1fr; gap: 2px 12px; font-size: 14px; }
.kv span:nth-child(odd) { color: var(--dim); }
.err { color: var(--bad); font-size: 13px; min-height: 18px; }
/* chat */
.chat { display: flex; flex-direction: column; height: calc(100dvh - 53px); }
.log { flex: 1; overflow-y: auto; padding: 16px 0; }
.log .in { max-width: 900px; margin: 0 auto; padding: 0 16px; }
.msg { margin: 10px 0; }
.msg.user { background: var(--me); border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; white-space: pre-wrap; }
.msg.user .q { color: var(--dim); font-size: 12px; }
.msg.text p { margin: 0 0 8px; } .msg.text pre { background: var(--panel); border: 1px solid var(--line); border-radius: 8px; padding: 8px; overflow-x: auto; }
.msg.text code { background: var(--panel); border-radius: 4px; padding: 0 3px; }
.msg.activity { color: var(--dim); font-size: 13px; margin: 2px 0 2px 4px; }
.msg.activity::before { content: '· '; }
.msg.notice, .msg.stopped { color: var(--warn); font-size: 13px; }
.msg.error { color: var(--bad); font-size: 14px; }
.msg.result { color: var(--dim); font-size: 12px; border-bottom: 1px solid var(--line); padding-bottom: 10px; }
.composer { border-top: 1px solid var(--line); background: var(--bg); }
.composer .in { max-width: 900px; margin: 0 auto; padding: 10px 16px 14px; }
.composer textarea { width: 100%; min-height: 64px; max-height: 40vh; resize: vertical; }
.composer .row { justify-content: space-between; margin-top: 8px; }
.login { max-width: 360px; margin: 18vh auto 0; padding: 16px; }
.login input { width: 100%; margin: 10px 0; }
.swatch { display: inline-block; width: 18px; height: 18px; border-radius: 4px; margin-right: 3px; border: 1px solid var(--line); }
iframe.map { width: 100%; height: 70vh; border: 1px solid var(--line); border-radius: 12px; background: #fff; }

header nav { display: flex; gap: 2px; overflow-x: auto; }
header nav a { white-space: nowrap; }
@media (max-width: 640px) { header b { display: none; } header .in { gap: 6px; } }
table.eq { width: 100%; border-collapse: collapse; font-size: 14px; }
table.eq td { padding: 8px 6px; border-top: 1px solid var(--line); vertical-align: top; }
table.eq td:first-child { white-space: nowrap; font-weight: 600; }
table.eq .addr { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12.5px; color: var(--dim); }
table.eq a { margin-right: 8px; white-space: nowrap; }
@media (max-width: 640px) { table.eq td:nth-child(3) { display: none; } }
.summary { display: flex; gap: 18px; flex-wrap: wrap; align-items: baseline; }
.cams { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 14px; }
.cams img { width: 100%; border-radius: 8px; background: #000; min-height: 120px; }