:root, [data-theme="dark"] {
  color-scheme: dark;
  --bg:#0b0f17; --bg2:#121826; --bg3:#182033; --line:#243049; --tx:#e6ebf5; --tx2:#9aa7bf; --tx3:#66738d;
  --acc:#4c8dff; --acc2:#7aa9ff; --ok:#2fd27f; --warn:#f2b441; --err:#ff5d6c; --ext:#8b97b0; --off:#566078;
  --shadow:0 8px 30px rgba(0,0,0,.35);
}
[data-theme="light"] {
  color-scheme: light;
  --bg:#f3f5f9; --bg2:#ffffff; --bg3:#eef1f7; --line:#dbe1ec; --tx:#1b2333; --tx2:#566178; --tx3:#8a94a8;
  --acc:#2a62e6; --acc2:#2a62e6; --ok:#10a35a; --warn:#c98300; --err:#d83a4a; --ext:#6e7a92; --off:#9aa3b5;
  --shadow:0 8px 24px rgba(30,40,70,.12);
}
* { box-sizing: border-box; }
html, body { margin:0; background:var(--bg); color:var(--tx); font:14px/1.45 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; -webkit-text-size-adjust:100%; }
input, button, select { font:inherit; color:inherit; }
.muted { color:var(--tx2); }
.btn { border:1px solid var(--line); background:var(--bg3); padding:9px 14px; border-radius:10px; cursor:pointer; }
.btn.primary { background:var(--acc); border-color:var(--acc); color:#fff; }
.btn:disabled { opacity:.6; cursor:default; }

/* вход */
.login { min-height:100vh; display:grid; place-items:center; padding:20px; }
.login-card { width:100%; max-width:360px; background:var(--bg2); border:1px solid var(--line); border-radius:18px; padding:28px; box-shadow:var(--shadow); display:flex; flex-direction:column; gap:10px; }
.login-card .logo { width:52px; height:52px; border-radius:14px; background:var(--acc); color:#fff; display:grid; place-items:center; }
.login-card h1 { margin:6px 0 0; font-size:22px; }
.login-card p { margin:0 0 8px; }
.login-card input { padding:11px 12px; border-radius:10px; border:1px solid var(--line); background:var(--bg); }
.err { color:var(--err); font-size:13px; }

/* каркас */
.app { min-height:100vh; display:flex; flex-direction:column; }
.top { display:flex; align-items:center; gap:14px; padding:calc(10px + env(safe-area-inset-top,0px)) calc(16px + env(safe-area-inset-right,0px)) 10px calc(16px + env(safe-area-inset-left,0px)); background:var(--bg2); border-bottom:1px solid var(--line); position:sticky; top:0; z-index:20; flex-wrap:wrap; }
.brand { display:flex; align-items:center; gap:8px; color:var(--acc2); }
.brand b { color:var(--tx); font-size:15px; }
.live { width:8px; height:8px; border-radius:50%; background:var(--ok); box-shadow:0 0 0 0 rgba(47,210,127,.6); animation:pulse 2s infinite; }
.live.off { background:var(--err); animation:none; }
@keyframes pulse { 70% { box-shadow:0 0 0 7px rgba(47,210,127,0); } 100% { box-shadow:0 0 0 0 rgba(47,210,127,0); } }
.tabs { display:flex; gap:4px; overflow-x:auto; scrollbar-width:none; flex:1; min-width:0; }
.tabs::-webkit-scrollbar { display:none; }
.tabs button { background:none; border:0; padding:8px 12px; border-radius:9px; color:var(--tx2); cursor:pointer; white-space:nowrap; }
.tabs button.on { background:var(--bg3); color:var(--tx); }
.top-actions { display:flex; gap:6px; }
.icon-btn { background:var(--bg3); border:1px solid var(--line); width:34px; height:34px; border-radius:9px; cursor:pointer; }
.content { flex:1; padding:16px calc(16px + env(safe-area-inset-right,0px)) calc(24px + env(safe-area-inset-bottom,0px)) calc(16px + env(safe-area-inset-left,0px)); max-width:1500px; width:100%; margin:0 auto; }
.tab { display:none; } .tab.on { display:block; }

/* карточки */
.grid { display:grid; gap:12px; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); }
.grid.wide { grid-template-columns:repeat(auto-fill,minmax(380px,1fr)); }
.card { background:var(--bg2); border:1px solid var(--line); border-radius:14px; padding:14px 16px; min-width:0; }
.card h3 { margin:0 0 10px; font-size:13px; font-weight:600; color:var(--tx2); text-transform:uppercase; letter-spacing:.04em; }
.kpi { font-size:28px; font-weight:650; letter-spacing:-.02em; }
.kpi small { font-size:13px; color:var(--tx2); font-weight:400; margin-left:4px; }
.sub { color:var(--tx2); font-size:12.5px; margin-top:2px; }
.spark { width:100%; height:44px; margin-top:8px; display:block; }
.bar { height:8px; background:var(--bg3); border-radius:6px; overflow:hidden; margin:6px 0; }
.bar i { display:block; height:100%; background:var(--acc); border-radius:6px; transition:width .6s; }
.bar.warn i { background:var(--warn); } .bar.err i { background:var(--err); }
.kv { display:flex; justify-content:space-between; gap:12px; padding:5px 0; border-bottom:1px dashed var(--line); font-size:13px; }
.kv:last-child { border-bottom:0; } .kv span:first-child { color:var(--tx2); } .kv span:last-child { text-align:right; word-break:break-word; }
.pill { display:inline-block; padding:1px 8px; border-radius:20px; font-size:12px; background:var(--bg3); color:var(--tx2); border:1px solid var(--line); }
.pill.ok { color:var(--ok); border-color:rgba(47,210,127,.4); } .pill.err { color:var(--err); border-color:rgba(255,93,108,.4); }
.pill.warn { color:var(--warn); border-color:rgba(242,180,65,.4); } .pill.ext { color:var(--ext); }
table { width:100%; border-collapse:collapse; font-size:13px; }
th, td { text-align:left; padding:7px 8px; border-bottom:1px solid var(--line); vertical-align:top; }
th { color:var(--tx2); font-weight:500; font-size:12px; text-transform:uppercase; letter-spacing:.03em; }
.scroll-x { overflow-x:auto; }
.dot { display:inline-block; width:9px; height:9px; border-radius:50%; margin-right:6px; background:var(--off); }
.dot.ok { background:var(--ok); } .dot.down { background:var(--err); } .dot.warn { background:var(--warn); } .dot.ext { background:var(--ext); }
.sec-title { margin:20px 2px 10px; font-size:15px; font-weight:600; }
.search { width:100%; max-width:340px; padding:9px 12px; border-radius:10px; border:1px solid var(--line); background:var(--bg2); }
.row { display:flex; gap:10px; flex-wrap:wrap; align-items:center; margin-bottom:12px; }
.toast { position:fixed; left:50%; bottom:calc(20px + env(safe-area-inset-bottom,0px)); transform:translateX(-50%); background:var(--bg3); border:1px solid var(--line); padding:10px 16px; border-radius:10px; box-shadow:var(--shadow); z-index:50; }

/* карта */
.map-wrap { position:relative; border:1px solid var(--line); border-radius:14px; background:var(--bg2); overflow:hidden; height:calc(100vh - 150px); min-height:480px; touch-action:none; }
.map-wrap svg { width:100%; height:100%; display:block; cursor:grab; user-select:none; -webkit-user-select:none; }
.map-wrap svg.dragging { cursor:grabbing; }
.map-tools { position:absolute; top:10px; left:10px; display:flex; gap:6px; z-index:3; flex-wrap:wrap; }
.map-tools .btn { padding:6px 10px; background:var(--bg3); }
.map-tools .search { max-width:200px; padding:6px 10px; }
.map-legend { position:absolute; left:10px; bottom:10px; display:flex; gap:12px; flex-wrap:wrap; font-size:12px; color:var(--tx2); background:var(--bg2); border:1px solid var(--line); padding:6px 10px; border-radius:9px; z-index:3; }
.map-info { position:absolute; top:10px; right:10px; width:320px; max-width:calc(100% - 20px); max-height:calc(100% - 20px); overflow:auto; background:var(--bg2); border:1px solid var(--line); border-radius:12px; padding:14px; box-shadow:var(--shadow); z-index:4; }
.map-info h4 { margin:0 0 2px; font-size:16px; } .map-info .close { float:right; background:none; border:0; font-size:18px; cursor:pointer; color:var(--tx2); }
.lane-bg { fill:var(--bg3); opacity:.45; stroke:var(--line); }
.lane-title { fill:var(--tx3); font-size:12px; font-weight:600; letter-spacing:.05em; text-transform:uppercase; }
.node { cursor:pointer; }
.node rect.body { fill:var(--bg2); stroke:var(--line); stroke-width:1.2; transition:stroke .2s; }
.node:hover rect.body, .node.sel rect.body { stroke:var(--acc); stroke-width:2; }
.node .nm { fill:var(--tx); font-size:12.5px; font-weight:600; } .node .sb { fill:var(--tx2); font-size:10.5px; }
.node .ico { stroke:var(--tx2); fill:none; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.node .st { stroke:var(--bg2); stroke-width:2; }
.node.ok .st { fill:var(--ok); } .node.down .st { fill:var(--err); } .node.warn .st { fill:var(--warn); } .node.ext .st { fill:var(--ext); } .node.off .st { fill:var(--off); }
.node.down rect.body { stroke:var(--err); }
.node.dim, .edge.dim, .elabel.dim { opacity:.18; }
.node.hit rect.body { stroke:var(--warn); stroke-width:2.5; }
.edge { fill:none; stroke:var(--line); stroke-width:1.6; }
.edge.flow { stroke:var(--acc); stroke-opacity:.7; stroke-dasharray:6 6; animation:dash 1.2s linear infinite; }
.edge.dash { stroke-dasharray:3 5; stroke:var(--tx3); }
.edge.hl { stroke:var(--warn); stroke-opacity:1; stroke-width:2.4; }
@keyframes dash { to { stroke-dashoffset:-24; } }
.elabel { fill:var(--tx3); font-size:10px; paint-order:stroke; stroke:var(--bg2); stroke-width:3px; }
@media (max-width:700px) {
  .tabs { order:3; flex-basis:100%; }
  .top-actions { margin-left:auto; }
  .map-wrap { height:calc(100vh - 190px); }
  .map-info { width:auto; left:10px; top:auto; bottom:10px; max-height:55%; }
  .map-legend { display:none; }
  .kpi { font-size:24px; }
}

.modal { position:fixed; inset:0; background:rgba(0,0,0,.55); display:grid; place-items:center; padding:16px; z-index:60; }
.modal-card { background:var(--bg2); border:1px solid var(--line); border-radius:16px; padding:20px; width:100%; max-width:420px; box-shadow:var(--shadow); display:flex; flex-direction:column; gap:8px; }
.modal-card h3 { margin:0; font-size:17px; text-transform:none; letter-spacing:0; color:var(--tx); }
.modal-card p { margin:0; }
.modal-card label { margin-top:6px; color:var(--tx2); font-size:13px; }
.modal-card input { padding:10px 12px; border-radius:10px; border:1px solid var(--line); background:var(--bg); }

.prov-card { border:1px solid var(--line); border-radius:14px; padding:16px; background:var(--bg2); margin-bottom:12px; }
.prov-card h3 { margin:0 0 4px; font-size:15px; color:var(--tx); text-transform:none; letter-spacing:0; }
.prov-card .sub { margin-bottom:10px; }
.prov-row { display:flex; gap:8px; flex-wrap:wrap; align-items:center; margin-top:10px; }
.field { display:flex; flex-direction:column; gap:4px; margin-bottom:10px; }
.field label { font-size:12.5px; color:var(--tx2); }
.field input, .field select { padding:9px 11px; border-radius:9px; border:1px solid var(--line); background:var(--bg); }
.badge-active { background:var(--acc); color:#fff; padding:2px 9px; border-radius:20px; font-size:11.5px; margin-left:8px; }

/* Чат */
.chat-log { display:flex; flex-direction:column; gap:10px; max-height:55vh; overflow-y:auto; padding:4px 2px; }
.chat-msg { max-width:80%; padding:10px 13px; border-radius:14px; font-size:14px; line-height:1.4; }
.chat-msg.me { align-self:flex-end; background:var(--acc); color:#fff; border-bottom-right-radius:4px; }
.chat-msg.ai { align-self:flex-start; background:var(--bg3); border:1px solid var(--line); border-bottom-left-radius:4px; }
.chat-msg p { margin:0 0 6px; } .chat-msg p:last-child { margin-bottom:0; }
.chat-msg .code-block { background:rgba(0,0,0,.25); padding:8px 10px; border-radius:8px; font-size:12.5px; overflow-x:auto; white-space:pre; margin:6px 0; }
.chat-input { flex:1; min-width:200px; padding:10px 12px; border-radius:10px; border:1px solid var(--line); background:var(--bg); resize:vertical; font-family:inherit; }