:root {
  --bg: #050b0a;
  --panel: rgba(10, 20, 18, .91);
  --panel-2: rgba(14, 28, 24, .84);
  --line: rgba(160, 211, 196, .13);
  --muted: #789087;
  --text: #effaf6;
  --green: #39f0a5;
  --green-2: #0cbf7a;
  --amber: #ffbc57;
  --red: #ff5d62;
  --blue: #65c8ff;
  --radius: 18px;
  --shadow: 0 24px 80px rgba(0,0,0,.42);
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; background: var(--bg); color: var(--text); }
body {
  font-family: "Aptos", "Trebuchet MS", sans-serif;
  overflow: hidden;
  background:
    radial-gradient(circle at 65% 15%, rgba(27,122,87,.12), transparent 34%),
    #050b0a;
}
button, input { font: inherit; }
button { color: inherit; }

.app-shell {
  display: grid;
  grid-template-columns: 228px minmax(0, 1fr);
  height: 100vh;
  min-height: 680px;
}

.sidebar {
  position: relative;
  z-index: 20;
  display: flex;
  flex-direction: column;
  padding: 26px 18px 18px;
  background: rgba(5,12,10,.92);
  border-right: 1px solid var(--line);
  backdrop-filter: blur(22px);
}
.brand { display:flex; align-items:center; gap:12px; padding: 0 9px 31px; }
.brand-mark {
  width: 36px; height: 36px; display:grid; place-items:center;
  border: 1px solid rgba(57,240,165,.45); border-radius: 11px;
  background: linear-gradient(145deg, rgba(57,240,165,.22), rgba(57,240,165,.04));
  box-shadow: inset 0 0 22px rgba(57,240,165,.08), 0 0 28px rgba(57,240,165,.09);
}
.brand-mark svg { width:21px; }
.brand strong { display:block; font-family: "Bahnschrift", sans-serif; letter-spacing:.04em; font-size:16px; }
.brand small { display:block; color:var(--muted); font-size:9px; letter-spacing:.2em; margin-top:3px; }
.nav-label { color:#52675f; font-size:9px; font-weight:800; letter-spacing:.18em; padding: 0 12px 10px; }
.nav { display:grid; gap:5px; }
.nav button {
  appearance:none; border:0; background:transparent; color:#8ba097; cursor:pointer;
  display:flex; align-items:center; gap:12px; width:100%; border-radius:12px; padding:11px 12px;
  text-align:left; font-size:13px; transition:.2s ease;
}
.nav button svg { width:17px; opacity:.72; }
.nav button:hover { color:#d8eee5; background:rgba(255,255,255,.035); }
.nav button.active { color:#dfffee; background:rgba(57,240,165,.10); box-shadow: inset 2px 0 var(--green); }
.nav button.active svg { color:var(--green); opacity:1; }
.side-spacer { flex:1; }
.network-card {
  padding:14px; border:1px solid var(--line); border-radius:14px;
  background:linear-gradient(150deg,rgba(57,240,165,.08),rgba(255,255,255,.015));
}
.network-card .row { display:flex; align-items:center; justify-content:space-between; }
.network-card small { color:var(--muted); font-size:10px; }
.network-card strong { display:block; font-size:22px; margin-top:8px; font-family:"Bahnschrift",sans-serif; }
.status-dot { width:7px; height:7px; border-radius:50%; background:var(--green); box-shadow:0 0 12px var(--green); }
.capacity { height:4px; margin-top:11px; background:rgba(255,255,255,.06); border-radius:10px; overflow:hidden; }
.capacity i { display:block; height:100%; width:68%; background:linear-gradient(90deg,var(--green-2),var(--green)); border-radius:inherit; }
.operator { display:flex; align-items:center; gap:10px; padding:18px 9px 0; }
.avatar { width:32px; height:32px; border-radius:50%; display:grid; place-items:center; background:#173329; border:1px solid #285444; color:#9ef7d0; font-size:11px; font-weight:800; }
.operator strong { font-size:11px; display:block; }.operator small { font-size:9px; color:var(--muted); }

.workspace { position:relative; min-width:0; display:grid; grid-template-rows:72px minmax(0,1fr); }
.topbar {
  z-index:15; display:flex; align-items:center; justify-content:space-between; padding:0 25px;
  border-bottom:1px solid var(--line); background:rgba(7,15,13,.72); backdrop-filter:blur(18px);
}
.page-title h1 { font-family:"Bahnschrift",sans-serif; font-size:17px; margin:0; letter-spacing:.02em; }
.page-title p { font-size:10px; color:var(--muted); margin:4px 0 0; }
.top-actions { display:flex; align-items:center; gap:10px; }
.search {
  height:36px; width:210px; display:flex; align-items:center; gap:8px; padding:0 12px;
  background:rgba(255,255,255,.035); border:1px solid var(--line); border-radius:10px;
}
.search svg { width:14px; color:var(--muted); }.search input { width:100%; border:0; outline:0; background:transparent; color:var(--text); font-size:11px; }
.search input::placeholder { color:#536961; }
.icon-btn, .simulate {
  height:36px; border-radius:10px; border:1px solid var(--line); cursor:pointer; transition:.2s ease;
}
.icon-btn { width:36px; background:rgba(255,255,255,.035); display:grid; place-items:center; position:relative; }
.icon-btn svg { width:15px; }.icon-btn b { position:absolute; top:7px; right:7px; width:5px; height:5px; background:var(--amber); border-radius:50%; }
.simulate { padding:0 14px; background:var(--green); color:#042117; border-color:transparent; font-size:10px; font-weight:900; letter-spacing:.04em; }
.simulate:hover { background:#70ffc3; transform:translateY(-1px); }
.add-device { height:36px;padding:0 12px;border:1px solid rgba(57,240,165,.27);border-radius:10px;background:rgba(57,240,165,.08);color:var(--green);font-size:9px;font-weight:900;letter-spacing:.04em;cursor:pointer;white-space:nowrap }.add-device:hover{background:rgba(57,240,165,.15)}

.dashboard {
  min-height:0; display:grid; grid-template-columns:minmax(560px,1fr) 310px; grid-template-rows:minmax(0,1fr) 180px;
  gap:12px; padding:12px; background-image:linear-gradient(rgba(255,255,255,.014) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.014) 1px,transparent 1px); background-size:34px 34px;
}
.map-card { grid-row:1 / 3; position:relative; min-height:0; overflow:hidden; border:1px solid var(--line); border-radius:var(--radius); background:#08100e; box-shadow:var(--shadow); }
.map-card:before { content:""; position:absolute; inset:0; pointer-events:none; z-index:2; background:radial-gradient(circle at 50% 43%,transparent 15%,rgba(3,8,7,.18) 65%,rgba(3,8,7,.72) 120%); }
.map-toolbar { position:absolute; z-index:1000; top:18px; left:18px; right:18px; display:flex; align-items:flex-start; justify-content:space-between; pointer-events:none; }
.map-heading { padding:12px 14px; border:1px solid var(--line); border-radius:13px; background:rgba(6,14,12,.78); backdrop-filter:blur(12px); }
.eyebrow { display:flex; align-items:center; gap:7px; font-size:8px; font-weight:900; color:#759087; letter-spacing:.18em; text-transform:uppercase; }
.eyebrow i { width:6px; height:6px; background:var(--green); border-radius:50%; box-shadow:0 0 12px var(--green); }
.map-heading strong { display:block; margin-top:6px; font-family:"Bahnschrift",sans-serif; font-size:14px; }
.filters { pointer-events:auto; display:flex; padding:4px; gap:3px; background:rgba(6,14,12,.82); border:1px solid var(--line); border-radius:11px; backdrop-filter:blur(12px); }
.filters button { border:0; background:transparent; color:#748a81; padding:7px 10px; border-radius:7px; font-size:9px; font-weight:700; cursor:pointer; }
.filters button.active { color:#eafff4; background:rgba(255,255,255,.08); }

#networkMap { width:100%; height:100%; min-height:500px; display:block; background:radial-gradient(circle at 48% 35%,#10231d 0,#091310 47%,#060c0b 100%); }
#networkMap{cursor:grab}#networkMap:active{cursor:grabbing}.leaflet-container{font-family:"Aptos","Trebuchet MS",sans-serif;background:#07100e}.leaflet-tile-pane{filter:saturate(.65) brightness(.72) contrast(1.12);opacity:.9}.leaflet-control-attribution{background:rgba(5,12,10,.74)!important;color:#5d746b!important;font-size:7px!important}.leaflet-control-attribution a{color:#79a692!important}.leaflet-network-link{stroke-linecap:round;stroke-dashoffset:0;animation:flow 1.15s linear infinite!important}.leaflet-network-link.down{animation:none!important}.noc-marker{background:transparent!important;border:0!important}
.leaflet-node{position:relative;width:190px;height:42px;display:flex;align-items:center;gap:10px;color:#d9eee6;filter:drop-shadow(0 2px 4px #020605);cursor:grab}.leaflet-node:active{cursor:grabbing}.leaflet-node i{position:relative;flex:0 0 auto;width:15px;height:15px;border:2px solid var(--green);border-radius:50%;background:#082119;box-shadow:0 0 9px var(--green),0 0 0 5px rgba(57,240,165,.09)}.leaflet-node i:after{content:"";position:absolute;inset:3px;border-radius:50%;background:var(--green)}.leaflet-node span{font-size:9px;font-weight:900;letter-spacing:.04em;white-space:nowrap;text-shadow:0 1px 3px #000}.leaflet-node small{display:block;margin-top:2px;color:#789087;font-size:7px;font-weight:500}.leaflet-node.warn i{border-color:var(--amber);box-shadow:0 0 9px var(--amber),0 0 0 5px rgba(255,188,87,.09)}.leaflet-node.warn i:after{background:var(--amber)}.leaflet-node.down i{border-color:var(--red);box-shadow:0 0 9px var(--red),0 0 0 5px rgba(255,93,98,.1)}.leaflet-node.down i:after{background:var(--red)}.leaflet-node.selected i{box-shadow:0 0 15px currentColor,0 0 0 8px rgba(57,240,165,.13);transform:scale(1.12)}.map-error{position:absolute;inset:0;display:grid;place-items:center;padding:40px;color:#ff9a9d;font-size:11px;text-align:center}
.region { fill:rgba(129,164,151,.025); stroke:rgba(149,190,175,.1); stroke-width:1; vector-effect:non-scaling-stroke; }
.coast { fill:#050a09; stroke:rgba(149,190,175,.08); stroke-width:1; }
.map-grid { stroke:rgba(139,186,168,.035); stroke-width:1; }
.link-halo { fill:none; stroke:rgba(57,240,165,.12); stroke-width:10; stroke-linecap:round; }
.link { fill:none; stroke:var(--green-2); stroke-width:2.4; stroke-linecap:round; stroke-dasharray:7 5; animation:flow 1.4s linear infinite; filter:url(#softGlow); transition:.3s ease; }
.link.warn { stroke:var(--amber); }.link.down { stroke:var(--red); animation:none; stroke-dasharray:3 4; }
@keyframes flow { to { stroke-dashoffset:-24; } }
.node { cursor:pointer; transition:.2s ease; }
.node:hover { transform:scale(1.12); transform-box:fill-box; transform-origin:center; }
.node .pulse { fill:rgba(57,240,165,.10); stroke:rgba(57,240,165,.15); transform-origin:center; animation:pulse 2.8s ease-out infinite; }
.node .core { fill:#082119; stroke:var(--green); stroke-width:2.4; filter:url(#nodeGlow); }
.node.warn .core { stroke:var(--amber); fill:#291d0a; }.node.warn .pulse { fill:rgba(255,188,87,.12); stroke:rgba(255,188,87,.2); }
.node.down .core { stroke:var(--red); fill:#2a0d10; }.node.down .pulse { fill:rgba(255,93,98,.14); stroke:rgba(255,93,98,.22); }
.node.selected .core { stroke-width:4; }
.node text { fill:#d9eee6; font:700 10px "Aptos",sans-serif; letter-spacing:.04em; paint-order:stroke; stroke:#07100d; stroke-width:3px; stroke-linejoin:round; }
.node text.sub { fill:#698178; font-size:7px; font-weight:500; stroke-width:2px; }
@keyframes pulse { 0%{transform:scale(.6);opacity:.8} 70%,100%{transform:scale(1.8);opacity:0} }

.map-legend { position:absolute; z-index:1000; left:18px; bottom:18px; display:flex; align-items:center; gap:13px; padding:10px 12px; border:1px solid var(--line); border-radius:11px; background:rgba(6,14,12,.82); backdrop-filter:blur(12px); }
.legend-item { display:flex; align-items:center; gap:6px; color:#758b82; font-size:8px; text-transform:uppercase; letter-spacing:.08em; }
.legend-item i { width:6px; height:6px; border-radius:50%; }
.zoom { position:absolute; z-index:1000; bottom:18px; right:18px; display:grid; border:1px solid var(--line); border-radius:10px; overflow:hidden; background:rgba(6,14,12,.82); }
.zoom button { width:31px; height:30px; border:0; color:#a8beb5; cursor:pointer; background:transparent; }.zoom button+button{border-top:1px solid var(--line)}.zoom button:hover{background:rgba(255,255,255,.07)}
.map-scale { position:absolute; z-index:1000; right:64px; bottom:22px; color:#4d635b; font-size:8px; letter-spacing:.08em; }

.side-panel { display:flex; flex-direction:column; min-height:0; border:1px solid var(--line); border-radius:var(--radius); background:var(--panel); box-shadow:var(--shadow); overflow:hidden; }
.panel-head { display:flex; align-items:center; justify-content:space-between; padding:16px 17px 13px; border-bottom:1px solid var(--line); }
.panel-head h2 { margin:0; font-family:"Bahnschrift",sans-serif; font-size:12px; letter-spacing:.04em; }
.live-chip { display:flex; align-items:center; gap:6px; color:#73aa94; font-size:8px; font-weight:800; letter-spacing:.1em; }
.live-chip i { width:5px;height:5px;border-radius:50%;background:var(--green);box-shadow:0 0 10px var(--green); }
.node-detail { padding:16px 17px; border-bottom:1px solid var(--line); background:linear-gradient(145deg,rgba(57,240,165,.05),transparent 60%); }
.detail-title { display:flex; align-items:center; justify-content:space-between; }
.detail-title strong { font-size:14px; }.health { font-size:8px; padding:5px 7px; border-radius:20px; background:rgba(57,240,165,.1); color:var(--green); font-weight:900; letter-spacing:.08em; }
.detail-meta { color:var(--muted); font-size:9px; margin-top:4px; }
.metrics { display:grid; grid-template-columns:repeat(3,1fr); gap:7px; margin-top:14px; }
.metric { padding:9px 7px; border:1px solid rgba(255,255,255,.055); border-radius:9px; background:rgba(255,255,255,.025); }
.metric small { display:block; color:#60766d; font-size:7px; text-transform:uppercase; letter-spacing:.08em; }
.metric strong { display:block; margin-top:5px; font-family:"Bahnschrift",sans-serif; font-size:12px; }
.detail-actions{display:flex;gap:7px;margin-top:12px}.detail-actions button{height:30px;padding:0 10px;border-radius:8px;border:1px solid var(--line);background:rgba(255,255,255,.035);color:#9bb0a7;font-size:8px;font-weight:800;cursor:pointer}.detail-actions button:hover{border-color:rgba(57,240,165,.35);color:var(--green)}.detail-actions .danger:hover{border-color:rgba(255,93,98,.35);color:var(--red)}
.events-title { display:flex; justify-content:space-between; align-items:center; padding:13px 17px 8px; }
.events-title span { font-size:9px; font-weight:900; letter-spacing:.12em; color:#8ca198; }.events-title b { font-size:8px; color:#5f756c; font-weight:500; }
.events { min-height:0; overflow:auto; padding:0 11px 12px; scrollbar-width:thin; scrollbar-color:#284137 transparent; }
.event { display:grid; grid-template-columns:8px 1fr auto; gap:9px; align-items:start; padding:10px 7px; border-bottom:1px solid rgba(255,255,255,.045); }
.event i { width:7px; height:7px; margin-top:3px; border-radius:50%; background:var(--green); box-shadow:0 0 10px currentColor; }.event.warn i{background:var(--amber)}.event.down i{background:var(--red)}
.event strong { display:block; font-size:9px; font-weight:700; }.event p { color:#687d75; font-size:8px; margin:3px 0 0; line-height:1.35; }.event time { color:#53675f; font-size:7px; white-space:nowrap; }

.traffic-card { border:1px solid var(--line); border-radius:var(--radius); background:var(--panel); box-shadow:var(--shadow); padding:15px 16px 12px; overflow:hidden; }
.traffic-head { display:flex; align-items:flex-start; justify-content:space-between; }
.traffic-head h2 { margin:0; font-family:"Bahnschrift",sans-serif; font-size:11px; }.traffic-head p { margin:3px 0 0;color:var(--muted);font-size:8px; }
.traffic-values { display:flex; gap:16px; }.traffic-values div { text-align:right; }.traffic-values small { display:block; color:var(--muted);font-size:7px;text-transform:uppercase;letter-spacing:.08em }.traffic-values strong {font:700 12px "Bahnschrift",sans-serif}.traffic-values .in{color:var(--green)}.traffic-values .out{color:var(--blue)}
.chart-wrap { height:104px; position:relative; margin-top:6px; }.chart-wrap canvas { width:100%;height:100%;display:block; }
.chart-axis { position:absolute; inset:8px 0 14px; display:flex; flex-direction:column; justify-content:space-between; pointer-events:none; }.chart-axis i { display:block; border-top:1px dashed rgba(255,255,255,.05); }
.toast { position:fixed; z-index:6000; left:50%; top:84px; transform:translate(-50%,-18px); opacity:0; pointer-events:none; display:flex;align-items:center;gap:9px;padding:10px 14px;border:1px solid rgba(255,93,98,.3);border-radius:11px;background:rgba(35,11,13,.94);box-shadow:0 16px 40px rgba(0,0,0,.45);font-size:10px;transition:.35s ease; }.toast.show{opacity:1;transform:translate(-50%,0)}.toast i{width:7px;height:7px;border-radius:50%;background:var(--red);box-shadow:0 0 12px var(--red)}

@media(max-width:1100px){
  .app-shell{grid-template-columns:78px minmax(0,1fr)}.sidebar{padding:26px 12px 16px}.brand{padding-left:8px}.brand-copy,.nav span,.nav-label,.network-card,.operator-copy{display:none}.nav button{justify-content:center;padding:12px}.operator{justify-content:center;padding-left:0;padding-right:0}.dashboard{grid-template-columns:minmax(480px,1fr) 280px}.search{width:170px}
}
@media(max-width:820px){
  body{overflow:auto}.app-shell{display:block;height:auto;min-height:100vh}.sidebar{position:fixed;z-index:30;left:10px;right:10px;bottom:10px;height:58px;padding:6px 10px;border:1px solid var(--line);border-radius:16px;flex-direction:row;box-shadow:var(--shadow)}.brand,.nav-label,.side-spacer,.operator{display:none}.nav{display:flex;width:100%;justify-content:space-around}.nav button{width:52px}.nav button:nth-child(n+5){display:none}.workspace{display:block}.topbar{height:65px;padding:0 14px;position:sticky;top:0}.page-title p,.search,.icon-btn{display:none}.dashboard{display:flex;flex-direction:column;padding:8px 8px 80px}.map-card{height:65vh;min-height:500px}.side-panel{height:420px}.traffic-card{height:185px;order:2}.map-card{order:0}.side-panel{order:1}.filters{display:none}.map-heading{padding:10px}.simulate{padding:0 11px}.map-toolbar{top:12px;left:12px;right:12px}.node text{font-size:9px}
}
@media(max-width:520px){.page-title h1{font-size:14px}.dashboard{gap:8px}.map-card{height:64vh;min-height:460px}.map-legend{left:10px;bottom:10px;gap:8px}.zoom{right:10px;bottom:10px}.map-scale{display:none}.metrics{gap:4px}.metric{padding:8px 5px}}

@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important}}

/* Secure access */
.auth-page { min-height:100vh; overflow:auto; display:grid; place-items:center; padding:28px; background:radial-gradient(circle at 20% 20%,rgba(57,240,165,.11),transparent 30%),radial-gradient(circle at 85% 80%,rgba(12,191,122,.08),transparent 35%),#050b0a; }
.auth-page:before { content:"";position:fixed;inset:0;pointer-events:none;background-image:linear-gradient(rgba(255,255,255,.018) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.018) 1px,transparent 1px);background-size:34px 34px;mask-image:linear-gradient(to bottom,black,transparent); }
.auth-shell { position:relative;z-index:1;width:min(430px,100%); }
.auth-brand { display:flex;align-items:center;justify-content:center;gap:11px;margin-bottom:22px; }
.auth-brand-mark { width:38px;height:38px;border:1px solid rgba(57,240,165,.5);border-radius:11px;display:grid;place-items:center;color:var(--green);font:800 18px "Bahnschrift",sans-serif;background:rgba(57,240,165,.09);box-shadow:0 0 30px rgba(57,240,165,.08); }
.auth-brand strong { display:block;font:700 15px "Bahnschrift",sans-serif;letter-spacing:.08em; }.auth-brand small{display:block;margin-top:3px;color:var(--muted);font-size:8px;letter-spacing:.2em}
.auth-card { padding:31px;border:1px solid var(--line);border-radius:22px;background:rgba(9,19,16,.94);box-shadow:0 32px 100px rgba(0,0,0,.55);backdrop-filter:blur(20px); }
.auth-kicker { display:flex;align-items:center;gap:7px;color:#718a80;font-size:8px;font-weight:900;letter-spacing:.17em; }.auth-kicker i{width:6px;height:6px;border-radius:50%;background:var(--green);box-shadow:0 0 11px var(--green)}
.auth-card h1 { margin:12px 0 7px;font:700 25px "Bahnschrift",sans-serif;letter-spacing:-.02em; }.auth-card>p{margin:0 0 24px;color:var(--muted);font-size:11px;line-height:1.6}
.auth-card form { display:grid;gap:16px; }.auth-card label{display:grid;gap:7px;color:#a5b9b0;font-size:9px;font-weight:800;letter-spacing:.06em;text-transform:uppercase}.auth-card label>small{color:#586e65;font-weight:500;text-transform:none;letter-spacing:0}
.auth-card input { width:100%;height:43px;border:1px solid rgba(160,211,196,.16);border-radius:10px;outline:none;background:rgba(255,255,255,.035);color:var(--text);padding:0 12px;font-size:12px;transition:.2s }.auth-card input:focus{border-color:rgba(57,240,165,.55);box-shadow:0 0 0 3px rgba(57,240,165,.07)}
.password-field { position:relative; }.password-field input{padding-right:64px}.password-field button{position:absolute;right:7px;top:7px;height:29px;border:0;border-radius:7px;padding:0 8px;background:rgba(255,255,255,.06);color:#8ca198;font-size:8px;cursor:pointer}
.auth-submit { height:44px;margin-top:4px;border:0;border-radius:10px;background:var(--green);color:#042117;font-size:9px;font-weight:900;letter-spacing:.09em;cursor:pointer;transition:.2s }.auth-submit:hover{background:#75ffc6;transform:translateY(-1px)}
.auth-error { margin:-10px 0 17px;padding:10px 12px;border:1px solid rgba(255,93,98,.22);border-radius:9px;background:rgba(255,93,98,.07);color:#ff9a9d;font-size:10px;line-height:1.45 }
.auth-card footer { display:flex;justify-content:space-between;margin-top:22px;padding-top:15px;border-top:1px solid var(--line);color:#4f655d;font-size:8px; }
.logout-form{margin:0}.logout-btn{height:36px;padding:0 11px;border:1px solid var(--line);border-radius:10px;background:rgba(255,255,255,.035);color:#8ba097;font-size:9px;font-weight:800;cursor:pointer}.logout-btn:hover{color:var(--text);border-color:rgba(255,255,255,.2)}
.modal-backdrop{position:fixed;z-index:5000;inset:0;display:grid;place-items:center;padding:20px;background:rgba(1,6,5,.76);backdrop-filter:blur(9px);opacity:0;visibility:hidden;transition:.2s}.modal-backdrop.open{opacity:1;visibility:visible}.modal-card{position:relative;z-index:1;width:min(580px,100%);border:1px solid rgba(160,211,196,.17);border-radius:20px;background:#0a1512;box-shadow:0 30px 100px rgba(0,0,0,.7);transform:translateY(12px);transition:.2s}.modal-backdrop.open .modal-card{transform:translateY(0)}.modal-card.small{width:min(440px,100%)}
.modal-card header{display:flex;align-items:center;justify-content:space-between;padding:20px 22px 16px;border-bottom:1px solid var(--line)}.modal-card header small{color:var(--green);font-size:8px;font-weight:900;letter-spacing:.16em}.modal-card h2{margin:5px 0 0;font:700 17px "Bahnschrift",sans-serif}.modal-close{width:32px;height:32px;border:1px solid var(--line);border-radius:9px;background:rgba(255,255,255,.03);color:#879d94;font-size:19px;cursor:pointer}.modal-card form{padding:20px 22px}.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}.form-grid label{display:grid;gap:7px;color:#8fa49b;font-size:8px;font-weight:800;letter-spacing:.06em;text-transform:uppercase}.form-grid .span-2{grid-column:1/-1}.form-grid input,.form-grid select{width:100%;height:40px;border:1px solid var(--line);border-radius:9px;outline:0;background:#0d1c18;color:var(--text);padding:0 11px;font-size:11px}.form-grid input:focus,.form-grid select:focus{border-color:rgba(57,240,165,.5);box-shadow:0 0 0 3px rgba(57,240,165,.06)}.form-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:20px;padding-top:16px;border-top:1px solid var(--line)}.form-actions button{height:38px;padding:0 14px;border-radius:9px;font-size:9px;font-weight:900;cursor:pointer}.form-actions .secondary{border:1px solid var(--line);background:transparent;color:#869b92}.form-actions .primary{border:0;background:var(--green);color:#042117}
.confirm-body{padding:20px 22px}.confirm-body p{margin:0;color:#8ea39a;font-size:11px;line-height:1.6}.confirm-body strong{color:var(--text)}.danger-confirm{border:0;background:var(--red);color:#240406}
@media(max-width:520px){.auth-page{padding:16px}.auth-card{padding:25px 21px}.auth-card h1{font-size:22px}}
@media(max-width:680px){.add-device{font-size:0;width:36px;padding:0}.add-device:first-letter{font-size:18px}.logout-btn{font-size:0;width:34px}.logout-btn:after{content:'↗';font-size:14px}.form-grid{grid-template-columns:1fr}.form-grid .span-2{grid-column:auto}.modal-card form{padding:16px}.modal-card header{padding:17px 16px}}