:root {
  color-scheme: dark;
  --bg: #090c10; --surface: #10151b; --surface-2: #151c24; --line: #24303b;
  --text: #e8edf2; --muted: #83909c; --accent: #57e3a0; --accent-2: #24b877;
  --blue: #66a8ff; --warn: #ffc45b; --danger: #ff6f78; --radius: 12px;
}
* { box-sizing: border-box; }
body { margin: 0; min-width: 0; min-height: 100vh; background: radial-gradient(circle at 75% 0, #13251f 0, var(--bg) 32%); color: var(--text); font: 16px/1.45 Inter, "Segoe UI", sans-serif; }
button, input, select { font: inherit; color: inherit; }
button { cursor: pointer; }
.hidden { display: none !important; }
.login-shell { min-height: 100vh; display: grid; place-items: center; }
.login-card { width: 410px; display: grid; gap: 18px; padding: 36px; background: rgba(16,21,27,.94); border: 1px solid var(--line); border-radius: 18px; box-shadow: 0 24px 80px #0009; }
.brand-mark { width: 58px; height: 58px; display: grid; place-items: center; border-radius: 14px; background: var(--accent); color: #07110c; font-weight: 900; letter-spacing: -.08em; font-size: 22px; }
.brand-mark.small { width: 38px; height: 38px; border-radius: 9px; font-size: 15px; }
h1,h2,h3,h4,p { margin: 0; } h1 { font-size: 30px; margin-top: 3px; } h2 { font-size: 24px; } h3 { font-size: 15px; letter-spacing: .03em; }
.eyebrow { color: var(--accent); font: 700 10px/1.2 ui-monospace, monospace; letter-spacing: .18em; }
.muted { color: var(--muted); } .error { min-height: 18px; color: var(--danger); }
label { display: grid; gap: 7px; color: #aeb8c2; font-size: 14px; }
input, select { width: 100%; padding: 10px 12px; background: #0b1015; border: 1px solid var(--line); border-radius: 8px; outline: none; }
input:focus, select:focus { border-color: var(--accent-2); box-shadow: 0 0 0 3px #24b8771f; }
.primary, .ghost { padding: 10px 14px; border: 1px solid transparent; border-radius: 8px; font-weight: 700; }
.primary { background: var(--accent); color: #06130d; } .primary:hover { background: #74efb5; }
.ghost { background: transparent; border-color: var(--line); color: #aeb8c2; } .ghost:hover { background: var(--surface-2); color: var(--text); }
.shell { min-width: 0; min-height: 100vh; display: grid; grid-template-columns: 220px minmax(0,1fr); }
aside { position: sticky; top: 0; height: 100vh; padding: 20px 14px; background: #0c1015ee; border-right: 1px solid var(--line); display: flex; flex-direction: column; }
.brand { display: flex; align-items: center; gap: 10px; padding: 0 6px 26px; }.brand strong,.brand small { display: block; }.brand small { font-size: 9px; color: var(--accent); letter-spacing: .2em; }
nav { display: grid; gap: 4px; } nav button { padding: 11px 12px; text-align: left; color: var(--muted); background: transparent; border: 0; border-radius: 8px; } nav button:hover { background: var(--surface); color: var(--text); } nav button.active { color: var(--accent); background: #173126; }
.aside-foot { margin-top: auto; display: flex; gap: 8px; align-items: center; padding: 10px; color: var(--muted); font-size: 11px; }.dot { width: 8px; height: 8px; border-radius: 50%; background: var(--danger); }.dot.online { background: var(--accent); box-shadow: 0 0 10px var(--accent); }
main { min-width: 0; padding: 0 28px 40px; overflow: hidden; } header { height: 88px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--line); margin-bottom: 24px; }.userbox { display: flex; gap: 10px; align-items: center; }.role { padding: 4px 8px; border-radius: 99px; background: #173126; color: var(--accent); font: 700 12px ui-monospace, monospace; text-transform: uppercase; }
.view { display: none; }.view.active { display: block; }.stats { display: grid; grid-template-columns: repeat(4, minmax(150px,1fr)); gap: 14px; margin-bottom: 18px; }.stat { padding: 18px; background: linear-gradient(145deg,var(--surface),#0d1217); border: 1px solid var(--line); border-radius: var(--radius); }.stat .value { margin-top: 8px; font-size: 30px; font-weight: 750; }.stat .label { color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: .12em; }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }.panel { background: rgba(16,21,27,.93); border: 1px solid var(--line); border-radius: var(--radius); }.panel-head { min-height: 48px; padding: 13px 16px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--line); }.panel-head span { color: var(--muted); font-size: 11px; }
.health-list,.event-list,.artifact-list { display: grid; }.health-row,.event-row,.artifact-row { display: grid; gap: 8px; padding: 12px 16px; border-bottom: 1px solid #1b252e; }.health-row { grid-template-columns: 12px 1fr auto; align-items: center; }.health-row:last-child,.event-row:last-child,.artifact-row:last-child { border-bottom: 0; }.status-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--muted); }.status-dot.online,.status-dot.active,.status-dot.ready { background: var(--accent); }.status-dot.warning,.status-dot.degraded { background: var(--warn); }.status-dot.offline,.status-dot.critical,.status-dot.fault { background: var(--danger); }.health-row small,.event-row small,.artifact-row small { color: var(--muted); }
.event-row { grid-template-columns: 84px 1fr auto; align-items: start; }.level { text-transform: uppercase; font: 700 10px ui-monospace,monospace; }.level.error { color: var(--danger); }.level.warning { color: var(--warn); }.level.info { color: var(--blue); }.event-row.acked { opacity: .55; }
.toolbar { display: flex; gap: 10px; justify-content: space-between; align-items: center; margin-bottom: 14px; }.toolbar input { max-width: 420px; }.toolbar select { width: 200px; }.table-wrap { overflow: auto; }table { width: 100%; border-collapse: collapse; }th,td { padding: 12px 14px; text-align: left; border-bottom: 1px solid #1b252e; }th { color: var(--muted); font: 700 12px ui-monospace, monospace; letter-spacing: .1em; text-transform: uppercase; }td strong,td small { display: block; }td small { color: var(--muted); }.metric { display: inline-block; margin: 2px 4px 2px 0; padding: 3px 6px; border: 1px solid var(--line); border-radius: 5px; color: #b6c2cc; font: 12px ui-monospace,monospace; }.status { display: inline-flex; align-items: center; gap: 7px; }.row-actions { display: flex; flex-wrap: wrap; gap: 6px; }
.card-grid { display: grid; grid-template-columns: repeat(3,minmax(220px,1fr)); gap: 14px; }.card { padding: 18px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }.card-head { display: flex; justify-content: space-between; margin-bottom: 16px; }.card dl { display: grid; grid-template-columns: auto 1fr; gap: 8px 12px; margin: 0; }.card dt { color: var(--muted); }.card dd { margin: 0; text-align: right; }
.form-panel { padding-bottom: 16px; }.form-panel label,.form-panel > button,.form-panel > p { margin: 14px 16px 0; }.jobs-panel { margin-top: 18px; }.artifact-row { grid-template-columns: 1fr auto; }.hash { max-width: 210px; overflow: hidden; text-overflow: ellipsis; font: 10px ui-monospace,monospace; color: var(--muted); }.progress { height: 6px; overflow: hidden; border-radius: 99px; background: #080b0e; }.progress i { display: block; height: 100%; background: var(--accent); }
dialog { width: 520px; padding: 0; color: var(--text); background: var(--surface); border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 25px 100px #000d; }dialog::backdrop { background: #020405b8; backdrop-filter: blur(5px); }#dialog-fields { display: grid; gap: 12px; padding: 16px; }.dialog-actions { display: flex; justify-content: flex-end; gap: 10px; padding: 0 16px 16px; }.icon-btn { border: 0; background: none; color: var(--muted); font-size: 24px; }.empty { padding: 28px; text-align: center; color: var(--muted); }

.map-layout { display: grid; grid-template-columns: minmax(0,1fr) 340px; gap: 18px; }.map-panel { overflow: hidden; }.map-panel .panel-head > div { display: grid; gap: 3px; }.map-canvas { position: relative; height: min(68vh,680px); min-height: 440px; overflow: hidden; background: #0b1216; }.map-basemap { position:absolute; inset:0; width:100%; height:100%; }.map-grid { position: absolute; z-index:1; inset: 0; pointer-events:none; background-image: linear-gradient(#26413718 1px,transparent 1px),linear-gradient(90deg,#26413718 1px,transparent 1px); background-size: 25% 25%,25% 25%; }.map-grid::after { content:"N"; position:absolute; right:18px; top:16px; color:var(--accent); font:700 13px ui-monospace,monospace; }.map-grid::before { content:"Офлайн · OpenStreetMap (ODbL)"; position:absolute; left:18px; bottom:15px; color:#91a49a; font:12px ui-monospace,monospace; letter-spacing:.03em; text-shadow:0 1px 3px #000; }.map-marker { position:absolute; z-index:3; transform:translate(-50%,-50%); border:0; padding:0; color:var(--text); background:transparent; }.reference-marker { position:absolute; z-index:2; width:7px; height:7px; transform:translate(-50%,-50%); border:1px solid #c3d0ca; border-radius:50%; background:#687a71; opacity:.8; }.map-marker i { display:block; width:20px; height:20px; margin:auto; border:5px solid #08100c; border-radius:50%; background:var(--muted); box-shadow:0 0 0 2px #ffffff20,0 5px 18px #000; }.map-marker.online i,.map-marker.active i,.map-marker.ready i { background:var(--accent); }.map-marker.degraded i,.map-marker.warning i { background:var(--warn); }.map-marker.offline i,.map-marker.fault i,.map-marker.critical i { background:var(--danger); }.map-marker span { display:block; max-width:170px; margin-top:7px; padding:5px 8px; overflow:hidden; color:#dfe9e3; background:#08100ddd; border:1px solid #314339; border-radius:6px; white-space:nowrap; text-overflow:ellipsis; font-size:12px; }.map-marker:hover,.map-marker:focus-visible { z-index:4; }.map-marker:hover span,.map-marker:focus-visible span { border-color:var(--accent); }.map-empty { position:absolute; inset:0; z-index:4; display:grid; place-items:center; padding:40px; text-align:center; color:var(--muted); pointer-events:none; }.map-legend { display:flex; gap:20px; padding:12px 16px; border-top:1px solid var(--line); color:var(--muted); font-size:13px; }.map-legend span { display:flex; align-items:center; gap:7px; }.map-device-list { max-height:calc(min(68vh,680px) + 50px); overflow:auto; }.map-list-row { width:100%; display:grid; grid-template-columns:10px 1fr auto; align-items:center; gap:10px; padding:13px 15px; color:var(--text); background:transparent; border:0; border-bottom:1px solid #1b252e; text-align:left; }.map-list-row:hover { background:var(--surface-2); }.map-list-row strong,.map-list-row small { display:block; }.map-list-row small,.map-list-row > span:last-child { color:var(--muted); font-size:12px; }
.reference-dot { display:inline-block; width:8px; height:8px; flex:none; border:1px solid #c3d0ca; border-radius:50%; background:#687a71; }

.device-dialog { width:min(1180px,calc(100vw - 48px)); max-width:none; height:min(900px,calc(100vh - 48px)); overflow:auto; padding:0 20px 24px; }.detail-head { position:sticky; top:0; z-index:5; display:flex; justify-content:space-between; align-items:center; gap:18px; margin:0 -20px 18px; padding:18px 20px; background:#10151bf2; border-bottom:1px solid var(--line); backdrop-filter:blur(12px); }.detail-head-actions { display:flex; align-items:center; gap:8px; }.detail-summary { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin-bottom:16px; }.detail-summary > div { display:grid; gap:7px; min-height:84px; padding:15px; background:#0d1319; border:1px solid var(--line); }.detail-summary span:first-child { color:var(--muted); font-size:12px; text-transform:uppercase; letter-spacing:.08em; }.detail-grid { display:grid; grid-template-columns:1.2fr .8fr; gap:16px; }.detail-panel { margin-bottom:16px; overflow:hidden; }.state-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line); }.state-card { min-height:82px; display:grid; grid-template-columns:10px 1fr; gap:5px 9px; align-content:center; padding:13px 15px; background:var(--surface); }.state-card i { grid-row:1/3; align-self:center; width:9px; height:9px; border-radius:50%; background:var(--muted); }.state-card span { color:var(--muted); font-size:12px; }.state-card strong { font-size:14px; }.state-card.active i { background:var(--accent); box-shadow:0 0 10px #57e3a066; }.state-card.fault i { background:var(--danger); box-shadow:0 0 10px #ff6f7866; }.metric-groups { padding:4px 16px 16px; }.metric-group { margin-top:14px; }.metric-group h4 { margin-bottom:8px; color:var(--accent); font-size:13px; }.metric-group > div { display:grid; grid-template-columns:repeat(4,1fr); gap:8px; }.metric-group article { min-width:0; display:grid; gap:5px; padding:12px; background:#0b1015; border:1px solid #1e2a33; }.metric-group article span,.metric-group article small { overflow:hidden; color:var(--muted); font-size:12px; text-overflow:ellipsis; white-space:nowrap; }.metric-group article strong { font:700 16px ui-monospace,monospace; }.history-controls > div { display:flex; gap:8px; }.history-controls select { width:auto; min-width:150px; padding:7px 10px; }.history-status { min-height:35px; padding:10px 16px 0; font-size:13px; }.history-chart { display:block; width:100%; height:250px; overflow:visible; }.chart-axis { stroke:#506058; stroke-width:1; }.chart-grid { stroke:#26372f; stroke-width:1; stroke-dasharray:4 6; }.chart-line { fill:none; stroke:var(--accent); stroke-width:3; stroke-linejoin:round; stroke-linecap:round; }.chart-point { fill:#0b1210; stroke:var(--accent); stroke-width:3; }.chart-label { fill:#8b9a91; font:12px "Segoe UI",sans-serif; }.history-table-wrap { max-height:320px; overflow:auto; border-top:1px solid var(--line); }.event-list.compact .event-row { grid-template-columns:68px 1fr auto; }

@media (max-width: 1200px) { .stats { grid-template-columns:repeat(2,1fr); }.grid-2,.detail-grid { grid-template-columns:1fr; }.card-grid { grid-template-columns:repeat(2,1fr); }.map-layout { grid-template-columns:1fr; }.map-device-list { max-height:300px; }.metric-group > div { grid-template-columns:repeat(3,1fr); } }
@media (max-width: 820px) { .shell { grid-template-columns:minmax(0,1fr); }.shell > aside { position:static; width:100%; height:auto; padding:12px; }.brand { padding-bottom:12px; }.shell nav { display:flex; overflow-x:auto; }.shell nav button { white-space:nowrap; }.aside-foot { display:none; }main { width:100%; min-width:0; padding:0 14px 28px; }header { height:auto; min-height:76px; gap:12px; }.userbox #user-name,.userbox .role { display:none; }.stats,.detail-summary { grid-template-columns:repeat(2,1fr); }.metric-group > div,.state-grid { grid-template-columns:repeat(2,1fr); }.device-dialog { width:calc(100vw - 20px); height:calc(100vh - 20px); }.detail-head { align-items:flex-start; }.detail-head-actions { flex-wrap:wrap; justify-content:flex-end; }.map-layout { grid-template-columns:minmax(0,1fr); }.map-canvas { min-height:380px; }.map-legend { flex-wrap:wrap; }.login-card { width:min(410px,calc(100vw - 28px)); } }
@media (max-width: 520px) { .stats,.detail-summary,.metric-group > div,.state-grid { grid-template-columns:1fr; }.toolbar,.detail-head { flex-direction:column; align-items:stretch; }.history-controls { align-items:flex-start; }.history-controls > div { width:100%; flex-direction:column; }.history-controls select { width:100%; }.event-row { grid-template-columns:64px 1fr; }.event-row > :last-child { grid-column:2; }.map-legend { flex-wrap:wrap; } }