:root{--navy:#102b46;--blue:#1e5fa4;--teal:#198c84;--ink:#152a3f;--muted:#738397;--line:#e4ebf0;--bg:#f2f6f8;--white:#fff;--green:#16a36a;--red:#e34f52;--amber:#e9a32b;--shadow:0 18px 60px rgba(15,42,68,.16)}
*{box-sizing:border-box}
body{margin:0;color:var(--ink);font-family:"DM Sans",Arial,sans-serif;background:var(--bg);font-size:14px}
button,input,select{font:inherit}
button{cursor:pointer}
.topbar{height:68px;background:#fff;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;padding:0 26px;position:relative;z-index:500}
.brand{display:flex;align-items:center;gap:11px}
.brand-mark{width:58px;height:58px;border-radius:18px;background:linear-gradient(145deg,#148f8a,#1d65a2);color:#fff;display:flex;align-items:center;justify-content:center;font:800 19px Manrope,sans-serif;letter-spacing:.04em;box-shadow:0 8px 22px rgba(29,101,162,.2)}
.brand-mark.small{width:38px;height:38px;border-radius:12px;font-size:13px}
.brand strong{display:block;font:800 15px Manrope,sans-serif;letter-spacing:-.02em}
.brand span{display:block;color:#8190a1;font-size:9px;font-weight:700;letter-spacing:.14em;margin-top:3px}
.top-actions{display:flex;align-items:center;gap:9px}
.button{border:0;border-radius:10px;padding:10px 14px;font-weight:700;font-size:12px;transition:transform .15s ease,background .15s ease;display:inline-flex;align-items:center;justify-content:center;gap:8px}
.button:hover{transform:translateY(-1px)}
.button:disabled{opacity:.6;cursor:wait;transform:none}
.button.primary{background:var(--blue);color:#fff;box-shadow:0 6px 15px rgba(30,95,164,.18)}
.button.primary:hover{background:#184f8c}
.button.secondary{background:#edf3f7;color:#34516c}
.button.secondary:hover{background:#e1ebf1}
.button.ghost{background:#f5f8fa;color:#38536b;border:1px solid #e8eef2}
.button.danger-outline{background:#fff;color:#cf4144;border:1px solid #f0b7b8}
.button.tiny{padding:7px 10px;font-size:11px}
.button.full{width:100%}
.count-pill{background:#dce9f2;border-radius:8px;padding:2px 7px;font-size:10px}
.logout-form{margin:0}
.user-button{border:0;background:transparent;color:#4e667c;font-size:12px;font-weight:700;padding:9px 7px}
.app-shell{height:calc(100dvh - 68px);min-height:480px;display:grid;grid-template-columns:380px minmax(0,1fr)}
.sidebar{background:#fff;border-right:1px solid var(--line);display:flex;flex-direction:column;min-height:0;z-index:300}
.sidebar-head{padding:22px 20px 14px;display:flex;justify-content:space-between;align-items:center}
.eyebrow{color:#168782;font-size:9px;font-weight:800;letter-spacing:.16em;margin:0 0 6px}
h1,h2,h3,p{margin-top:0}
.sidebar h1{font:800 21px Manrope,sans-serif;margin:0;letter-spacing:-.04em}
.icon-button{border:1px solid var(--line);background:#fff;color:#61768b;border-radius:9px;width:34px;height:34px;font-size:19px;line-height:1}
.stats-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;padding:0 20px 16px}
.stat{background:#f6f9fb;border:1px solid #edf2f5;border-radius:12px;padding:11px 12px}
.stat span{display:block;font-size:10px;color:#7d8d9c;font-weight:600}
.stat strong{display:block;font:800 21px Manrope,sans-serif;margin-top:4px;color:#173b5c}
.green-text{color:var(--green)!important}.red-text{color:var(--red)!important}
.action-stack{padding:0 20px 15px}
.action-stack>.button{width:100%;height:40px}
.button-row{display:flex;gap:8px;margin-top:8px}
.button-row .button{flex:1;padding:9px 7px}
.button.active{background:#d9f0e8;color:#10744c;box-shadow:inset 0 0 0 1px #9cd7bc}
.draw-hint{margin-top:10px;background:#eff8f4;border:1px solid #cde9dc;border-radius:10px;padding:8px 9px;display:flex;align-items:center;gap:7px;flex-wrap:wrap;font-size:10px;color:#356a56}
.draw-hint[hidden]{display:none}
.draw-hint span{flex:1;min-width:120px}
.text-button{border:0;background:transparent;color:#24669a;font-size:11px;font-weight:700;padding:6px}
.filter-row{display:flex;gap:8px;padding:0 20px 12px}
.filter-row input,.filter-row select{min-width:0;border:1px solid #e4ebf0;background:#f9fbfc;border-radius:9px;padding:9px 10px;font-size:11px;color:#426078;outline:none}
.filter-row input{flex:1}
.filter-row select{width:116px}
.filter-row input:focus,.filter-row select:focus,input:focus,select:focus{border-color:#86b2d5;box-shadow:0 0 0 3px rgba(58,127,184,.1)}
.legend{display:flex;gap:9px 13px;flex-wrap:wrap;padding:0 20px 13px;color:#8090a0;font-size:9px;border-bottom:1px solid #eef2f4}
.legend span{display:flex;align-items:center;gap:5px}
.dot,.status-dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:#8b9aaa}
.dot.up,.status-dot.up{background:var(--green)}.dot.down,.status-dot.down{background:var(--red)}
.dot.unreachable,.status-dot.unreachable{background:var(--amber)}.dot.unknown,.status-dot.unknown{background:#8b9aaa}
.feature-list{overflow:auto;flex:1;padding:5px 10px}
.feature-item{width:100%;text-align:left;background:#fff;border:0;border-bottom:1px solid #f0f3f5;display:flex;align-items:center;gap:10px;padding:12px 10px;border-radius:9px;color:var(--ink)}
.feature-item:hover,.feature-item.selected{background:#f3f8fb}
.feature-item.selected{box-shadow:inset 3px 0 #1d72ad}
.feature-icon{width:28px;height:28px;border-radius:9px;background:#edf4f8;color:#49718e;display:flex;align-items:center;justify-content:center;font-size:13px;flex:none}
.feature-icon.link{background:#eff3f6;font-size:18px}
.feature-icon.up{color:var(--green);background:#e4f5ed}.feature-icon.down{color:var(--red);background:#fff0f0}
.feature-icon.unreachable{color:#bd8418;background:#fff5df}
.feature-copy{flex:1;min-width:0}
.feature-copy strong{display:block;font-size:11px;font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.feature-copy small{display:block;color:#8694a1;font-size:9px;margin-top:4px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.status-dot{width:7px;height:7px;flex:none}
.sidebar-foot{border-top:1px solid #edf1f3;padding:9px 20px;color:#9aa7b2;font-size:9px}
.map-wrap{position:relative;min-width:0}
#map{width:100%;height:100%;background:#e6eef1;z-index:1}
#map.drawing{cursor:crosshair}
.map-locate{position:absolute;z-index:450;top:16px;left:16px;border:1px solid #e1e9ef;border-radius:9px;background:rgba(255,255,255,.97);color:#315c7d;padding:9px 12px;box-shadow:0 4px 14px rgba(26,56,79,.12);font-size:11px;font-weight:700;display:flex;align-items:center;gap:7px}
.map-locate:hover{background:#fff;color:#126aa9}
.map-locate:disabled{opacity:.72;cursor:wait}
.map-locate.loading{color:#1677c8}
.map-note{position:absolute;z-index:400;top:16px;left:50%;transform:translateX(-50%);max-width:calc(100% - 35px);border:1px solid #e2eaf0;background:rgba(255,255,255,.95);color:#557086;border-radius:9px;box-shadow:0 5px 20px rgba(17,49,76,.1);padding:9px 13px;font-size:10px;text-align:center}
.map-note[hidden]{display:none}
.map-controls{position:absolute;z-index:400;left:16px;bottom:16px;padding:9px 11px;background:rgba(255,255,255,.96);border:1px solid #e8eef1;border-radius:9px;color:#657b8f;font-size:10px;box-shadow:0 4px 14px rgba(26,56,79,.08);display:flex;align-items:center;gap:7px}
.live-indicator{width:7px;height:7px;background:#16a36a;border-radius:50%;box-shadow:0 0 0 3px #dff2e9}
.leaflet-popup-content-wrapper{border-radius:12px!important;box-shadow:0 8px 28px rgba(15,42,68,.16)!important}
.leaflet-popup-content{margin:13px 15px!important;min-width:160px}
.map-popup{display:flex;flex-direction:column;gap:5px}
.map-popup strong{font-size:12px;color:#163b59}
.map-popup span,.map-popup small{color:#738497;font-size:10px}
.map-popup b{font-size:9px;letter-spacing:.08em}
.popup-edit{align-self:flex-start;border:0;background:#edf4f8;color:#286492;border-radius:6px;padding:6px 9px;font-size:10px;font-weight:700;margin-top:4px}
.toast-root{position:fixed;z-index:10000;right:18px;bottom:18px;display:flex;flex-direction:column;gap:8px;pointer-events:none}
.toast{background:#193c59;color:#fff;padding:11px 14px;border-radius:10px;box-shadow:var(--shadow);max-width:340px;font-size:12px;animation:toastin .2s ease}
.toast.success{background:#16764d}.toast.error{background:#b63e41}
@keyframes toastin{from{transform:translateY(8px);opacity:0}to{transform:none;opacity:1}}
.modal{border:0;border-radius:17px;padding:22px;width:min(510px,calc(100% - 24px));box-shadow:var(--shadow);color:var(--ink);max-height:calc(100dvh - 28px)}
.modal::backdrop{background:rgba(14,35,52,.48);backdrop-filter:blur(3px)}
.modal form{margin:0}
.modal-head{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:18px}
.modal-head h2{font:800 20px Manrope,sans-serif;letter-spacing:-.04em;margin:0}
.modal h3{font:700 13px Manrope,sans-serif;margin:0 0 12px}
.modal label{display:block;color:#52697d;font-size:11px;font-weight:700;margin-bottom:12px}
.modal input:not([type=checkbox]),.modal select{display:block;width:100%;margin-top:6px;border:1px solid #dce5eb;border-radius:9px;background:#fbfcfd;padding:10px 11px;color:#193a56;outline:none;font-size:12px}
.modal input[type=checkbox]{accent-color:#168982}
.modal label small{display:block;color:#8b99a5;font-weight:400;margin-top:5px;font-size:9px}
.field-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.form-help{font-size:10px;color:#81909d;line-height:1.5;margin:-2px 0 13px}
.modal-actions{display:flex;align-items:center;gap:8px;padding-top:12px;border-top:1px solid #edf1f3;margin-top:15px}
.spacer{flex:1}
.check-row{display:flex!important;align-items:center;gap:8px;margin-bottom:8px!important}
.success-text{color:#16764d!important}
.modal-wide{width:min(850px,calc(100% - 24px))}
.router-layout{display:grid;grid-template-columns:1fr 1.2fr;gap:22px}
.user-layout{display:grid;grid-template-columns:1fr 1.2fr;gap:22px}
.user-list{display:flex;flex-direction:column;gap:8px;margin-bottom:10px;max-height:360px;overflow:auto}
.account-card{border:1px solid #e8eef2;background:#f9fbfc;border-radius:10px;padding:11px;display:grid;grid-template-columns:1fr auto;gap:5px 8px;align-items:center}
.account-card strong{font-size:11px}.account-card small{grid-column:1;font-size:9px;color:#7c8d9a}
.account-badge{grid-column:1;grid-row:2;font-size:9px;color:#426b88;font-weight:700}
.account-badge.inactive{color:#bd4548}
.account-card .text-button{grid-column:2;grid-row:1/3}
.user-form{border-left:1px solid #edf1f4;padding-left:20px}
.router-list{display:flex;flex-direction:column;gap:8px;margin-bottom:10px;max-height:330px;overflow:auto}
.router-card{border:1px solid #e8eef2;background:#f9fbfc;border-radius:10px;padding:11px;display:grid;grid-template-columns:1fr auto;gap:4px 8px;align-items:center}
.router-card strong{font-size:11px}.router-card small{grid-column:1/-1;font-size:9px;color:#7c8d9a}
.router-state{font-size:9px;grid-column:1;grid-row:2;color:#82909c}
.router-state.online{color:#168c59}.router-state.offline{color:#c14145}
.router-card .text-button{grid-column:2;grid-row:1/3}
.router-form{border-left:1px solid #edf1f4;padding-left:20px}
.modal-footnote{font-size:9px;color:#8493a0;border-top:1px solid #edf1f4;padding-top:12px;margin-top:15px}
.setup-body{min-height:100dvh;display:grid;place-items:center;padding:25px;background:radial-gradient(circle at 10% 10%,#d9edf1,transparent 32%),linear-gradient(135deg,#eff4f7,#e8eef2)}
.setup-card{width:min(490px,100%);background:#fff;border:1px solid #e7edf1;border-radius:20px;padding:30px;box-shadow:0 20px 70px rgba(18,48,73,.12)}
.setup-card .brand-mark{margin-bottom:16px}
.setup-card h1{font:800 25px Manrope,sans-serif;letter-spacing:-.05em;margin-bottom:5px}
.setup-card h2{font:700 12px Manrope,sans-serif;margin:20px 0 10px;color:#31516d}
.setup-card .muted{color:#8a98a4;font-size:12px;margin-bottom:20px}
.setup-card form label{display:block;color:#52697d;font-size:11px;font-weight:700;margin:12px 0}
.setup-card input{display:block;width:100%;margin-top:6px;border:1px solid #dce5eb;border-radius:9px;background:#fbfcfd;padding:11px;color:#193a56;outline:none}
.setup-card .button{margin-top:10px;min-height:42px}
.login-card{width:min(400px,100%)}
.notice{padding:11px 13px;border-radius:9px;font-size:11px;margin:13px 0}
.notice.error{background:#fff0f0;color:#a4383b;border:1px solid #f5cccc}
.notice.success{background:#edf8f1;color:#1e7449;border:1px solid #caead5;line-height:1.5}
.empty-state{padding:24px 12px;text-align:center;color:#93a0ab;font-size:11px;line-height:1.6}
@media(max-width:900px){
  .app-shell{grid-template-columns:320px minmax(0,1fr)}
  .sidebar-head{padding-left:15px;padding-right:15px}
  .stats-grid,.action-stack,.filter-row{padding-left:15px;padding-right:15px}
  .legend{padding-left:15px;padding-right:15px}
  .hide-mobile{display:none}
}
@media(max-width:650px){
  .topbar{height:58px;padding:0 12px}
  .brand-mark.small{width:34px;height:34px}
  .brand strong{font-size:13px}
  .app-shell{height:calc(100dvh - 58px);grid-template-columns:1fr;grid-template-rows:minmax(220px,38vh) 1fr}
  .map-wrap{grid-row:1}
  .sidebar{grid-row:2;border-right:0;border-top:1px solid var(--line)}
  .sidebar-head{padding:12px 14px 9px}
  .sidebar h1{font-size:17px}
  .stats-grid{padding:0 14px 9px;gap:6px}
  .stat{padding:7px 9px}
  .stat strong{font-size:16px;margin-top:2px}
  .action-stack{padding:0 14px 8px}
  .action-stack>.button{height:34px}
  .button-row .button{padding:7px;font-size:10px}
  .filter-row{padding:0 14px 8px}
  .legend{padding:0 14px 8px;gap:6px 10px}
  .feature-list{max-height:28vh}
  .sidebar-foot{display:none}
  .map-controls{left:9px;bottom:8px;padding:7px 9px}
  .map-locate{top:9px;left:9px;padding:8px 10px;font-size:10px}
  .leaflet-bottom.leaflet-right{bottom:0}
  .router-layout{grid-template-columns:1fr;gap:14px}
  .user-layout{grid-template-columns:1fr;gap:14px}
  .router-form{border-left:0;border-top:1px solid #edf1f4;padding:14px 0 0}
  .user-form{border-left:0;border-top:1px solid #edf1f4;padding:14px 0 0}
  .modal{padding:17px}
  .field-grid{gap:8px}
  .user-button{font-size:10px}
  .top-actions{gap:5px}
  .top-actions .button{padding:8px 10px}
  .setup-card{padding:22px}
}