:root{--bg-0:#070b14;--bg-1:#0a1120;--surface:#131e339e;--surface-solid:#111c31;--surface-hover:#1e2c47b3;--border:#7891be24;--border-strong:#7891be42;--text:#e9eef7;--text-dim:#aab6cc;--muted:#6f7f99;--accent:#4f8cff;--accent-2:#6ea8ff;--accent-soft:#4f8cff24;--accent-glow:#4f8cff73;--up:#2ee6a6;--down:#ff5a6a;--warn:#ffb347;--danger:#ff5a6a;--radius:14px;--radius-sm:10px;--shadow:0 10px 30px -12px #0009;--shadow-lg:0 24px 60px -20px #000000b3;--ring:0 0 0 3px var(--accent-soft)}*{box-sizing:border-box}html,body{height:100%}body{color:var(--text);-webkit-font-smoothing:antialiased;text-rendering:optimizelegibility;background:radial-gradient(900px 600px at 12% -8%, #4f8cff1f, transparent 60%), radial-gradient(1000px 700px at 100% 0%, #2ee6a60f, transparent 55%), var(--bg-0);background-attachment:fixed;margin:0;font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,sans-serif;font-size:14px;line-height:1.5}a{color:var(--accent-2);text-decoration:none}a:hover{color:#9cc2ff}h1{letter-spacing:-.02em;margin:0 0 4px;font-size:24px;font-weight:650}h2{letter-spacing:-.01em;margin:0 0 4px;font-size:18px}h3{margin:0;font-size:15px;font-weight:600}.muted{color:var(--muted);font-size:13px}.error{color:#ffd4d9;border-radius:var(--radius-sm);background:#ff5a6a1a;border:1px solid #ff5a6a4d;margin:8px 0;padding:8px 12px;font-size:13px}::-webkit-scrollbar{width:10px;height:10px}::-webkit-scrollbar-thumb{background:#7891be38 padding-box padding-box;border:2px solid #0000;border-radius:20px}::-webkit-scrollbar-thumb:hover{background:#7891be59 padding-box padding-box}.app{min-height:100vh;display:flex}.sidebar{-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-right:1px solid var(--border);background:linear-gradient(#111c31bf,#0a112099);flex-direction:column;flex-shrink:0;width:244px;height:100vh;padding:22px 16px;display:flex;position:sticky;top:0}.brand{letter-spacing:-.01em;align-items:center;gap:10px;padding:6px 10px 22px;font-size:15px;font-weight:700;display:flex}.brand .brand-mark{color:#fff;background:linear-gradient(135deg, var(--accent), #7a5cff);width:34px;height:34px;box-shadow:0 6px 18px -6px var(--accent-glow);border-radius:10px;place-items:center;display:grid}.sidebar nav{flex-direction:column;flex:1;gap:3px;display:flex}.sidebar nav a{border-radius:var(--radius-sm);color:var(--text-dim);align-items:center;gap:11px;padding:10px 12px;font-weight:500;transition:background .16s,color .16s;display:flex;position:relative}.sidebar nav a svg{opacity:.85}.sidebar nav a:hover{background:var(--surface-hover);color:var(--text)}.sidebar nav a.active{background:var(--accent-soft);color:#cfe0ff}.sidebar nav a.active:before{content:"";background:linear-gradient(var(--accent), var(--accent-2));width:3px;box-shadow:0 0 10px var(--accent-glow);border-radius:0 3px 3px 0;position:absolute;top:8px;bottom:8px;left:-16px}.sidebar-footer{border-top:1px solid var(--border);justify-content:space-between;align-items:center;gap:8px;margin-top:8px;padding-top:14px;display:flex}.sidebar-footer .who{align-items:center;gap:9px;min-width:0;display:flex}.sidebar-footer .avatar{color:#fff;background:linear-gradient(135deg,#3a6df0,#7a5cff);border-radius:50%;flex-shrink:0;place-items:center;width:30px;height:30px;font-size:12px;font-weight:700;display:grid}.sidebar-footer .uname{color:var(--text-dim);text-overflow:ellipsis;white-space:nowrap;font-size:13px;overflow:hidden}.content{flex:1;min-width:0;padding:30px 40px;animation:.3s fade;overflow:auto}@keyframes fade{0%{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}.page-head{flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:16px;margin-bottom:20px;display:flex}.page-head h1,.page-head h3{align-items:center;gap:10px;display:flex}.breadcrumb{color:var(--muted);align-items:center;gap:6px;margin-bottom:10px;font-size:13px;display:flex}.card{background:var(--surface);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);padding:18px}.grid{grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:16px;margin-top:18px;display:grid}.stat-row{grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:16px;margin-bottom:8px;display:grid}.stat{flex-direction:column;gap:6px;display:flex;position:relative;overflow:hidden}.stat:after{content:"";background:radial-gradient(circle, var(--accent-soft), transparent 70%);border-radius:50%;width:100px;height:100px;position:absolute;top:-30px;right:-30px}.stat-num{letter-spacing:-.03em;font-size:30px;font-weight:700;line-height:1}.device-card{color:var(--text);flex-direction:column;gap:10px;transition:transform .16s,border-color .16s,box-shadow .16s;display:flex}.device-card:hover{border-color:var(--border-strong);box-shadow:var(--shadow-lg);transform:translateY(-3px)}.device-head{justify-content:space-between;align-items:center;display:flex}.links{flex-direction:column;gap:7px;margin-top:4px;display:flex}.link-row{align-items:center;gap:9px;font-size:13px;display:flex}.link-name{min-width:58px;font-weight:500}.badge{text-transform:uppercase;letter-spacing:.05em;border:1px solid #0000;border-radius:999px;padding:3px 9px;font-size:10.5px;font-weight:600}.badge.sophos{color:#6fc3ff;background:#0091d624;border-color:#0091d64d}.badge.unifi{color:#8fd6ff;background:#58c7ff1f;border-color:#58c7ff47}.badge.action-accept{color:var(--up);background:#2ee6a61f;border-color:#2ee6a64d}.badge.action-drop{color:#ff9aa4;background:#ff5a6a1f;border-color:#ff5a6a4d}.badge.action-reject{color:#ffca7a;background:#ffb3471f;border-color:#ffb3474d}.dot{background:var(--muted);border-radius:50%;flex-shrink:0;width:9px;height:9px;display:inline-block}.dot.up{background:var(--up);box-shadow:0 0 0 3px #2ee6a62e, 0 0 8px var(--up)}.dot.down{background:var(--down);box-shadow:0 0 0 3px #ff5a6a2e, 0 0 8px var(--down)}.dot.unknown{background:var(--muted)}.table{border-collapse:separate;border-spacing:0;width:100%;margin-top:14px}.table th,.table td{text-align:left;padding:12px 14px}.table thead th{color:var(--muted);text-transform:uppercase;letter-spacing:.06em;border-bottom:1px solid var(--border);font-size:11px;font-weight:600}.table tbody tr{transition:background .14s}.table tbody tr:hover{background:var(--surface-hover)}.table tbody td{border-bottom:1px solid var(--border)}.table tbody tr:last-child td{border-bottom:none}.actions{gap:14px;display:flex}button{cursor:pointer;font:inherit}.primary{background:linear-gradient(135deg, var(--accent), var(--accent-2));color:#fff;border-radius:var(--radius-sm);box-shadow:0 8px 20px -8px var(--accent-glow);border:none;align-items:center;gap:7px;padding:9px 16px;font-weight:600;transition:transform .12s,box-shadow .16s,filter .16s;display:inline-flex}.primary:hover{box-shadow:0 12px 26px -8px var(--accent-glow);filter:brightness(1.05);transform:translateY(-1px)}.primary:active{transform:translateY(0)}.primary:disabled{opacity:.55;cursor:not-allowed;box-shadow:none;transform:none}.link{color:var(--accent-2);background:0 0;border:none;padding:0;font-weight:500;transition:color .14s}.link:hover{color:#a9cbff}.link.danger{color:#ff8892}.link.danger:hover{color:#ffb0b7}input,select{width:100%;color:var(--text);border:1px solid var(--border-strong);border-radius:var(--radius-sm);background:#090f1cb3;padding:10px 12px;transition:border-color .14s,box-shadow .14s,background .14s}input:focus,select:focus{border-color:var(--accent);box-shadow:var(--ring);background:#090f1ce6;outline:none}input::placeholder{color:#4f5d75}label{color:var(--text-dim);flex-direction:column;gap:6px;margin-bottom:14px;font-size:12.5px;font-weight:500;display:flex}label.check{color:var(--text);cursor:pointer;flex-direction:row;align-items:center;gap:9px}label.check input{width:auto;accent-color:var(--accent)}.row{gap:12px;display:flex}.grow{flex:1}fieldset{border:1px solid var(--border);border-radius:var(--radius-sm);margin:0 0 14px;padding:14px}legend{color:var(--muted);padding:0 6px;font-size:12px}.login-wrap{justify-content:center;align-items:center;min-height:100vh;padding:20px;display:flex}.login-card{width:360px;box-shadow:var(--shadow-lg);flex-direction:column;padding:32px;animation:.4s rise;display:flex}@keyframes rise{0%{opacity:0;transform:translateY(14px)scale(.99)}to{opacity:1;transform:none}}.login-card .login-logo{color:#fff;background:linear-gradient(135deg, var(--accent), #7a5cff);width:52px;height:52px;box-shadow:0 10px 26px -8px var(--accent-glow);border-radius:14px;place-items:center;margin-bottom:16px;display:grid}.login-card h1{margin-bottom:4px}.login-card .primary{justify-content:center;margin-top:8px;padding:11px}.modal-backdrop{-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);z-index:50;background:#04081099;justify-content:center;align-items:center;padding:20px;animation:.18s fade;display:flex;position:fixed;inset:0}.modal{width:720px;max-width:94vw;max-height:90vh;box-shadow:var(--shadow-lg);padding:24px 26px;animation:.22s rise;overflow:auto}.modal h2{margin-bottom:18px}.modal-actions{justify-content:flex-end;align-items:center;gap:14px;margin-top:10px;display:flex}.form-grid{grid-template-columns:1fr 1fr;gap:0 18px;display:grid}.form-grid>.span-2{grid-column:1/-1}.form-grid label{margin-bottom:14px}.field-inline{flex-wrap:wrap;align-items:center;gap:20px;margin:4px 0 8px;display:flex}.field-inline label{margin-bottom:0}@media (width<=620px){.form-grid{grid-template-columns:1fr}}.vendor-toggle,.tabs,.range-toggle{border:1px solid var(--border);background:#090f1c99;border-radius:12px;gap:4px;padding:4px;display:inline-flex}.vendor-toggle{margin-bottom:18px;display:flex}.vendor-toggle button,.tabs button,.range-toggle button{color:var(--text-dim);background:0 0;border:none;border-radius:9px;flex:1;padding:8px 14px;font-weight:500;transition:background .14s,color .14s}.vendor-toggle button:hover,.tabs button:hover,.range-toggle button:hover{color:var(--text)}.vendor-toggle button.active,.tabs button.active,.range-toggle button.active{background:linear-gradient(135deg, var(--accent), var(--accent-2));color:#fff;box-shadow:0 6px 16px -8px var(--accent-glow)}.tabs{margin:18px 0 22px}.range-toggle button{flex:none}.chart-head{justify-content:space-between;align-items:center;margin:22px 0 12px;display:flex}.chart-card{padding:16px 12px 8px}.link-status-row{flex-wrap:wrap;gap:14px;margin-bottom:6px;display:flex}.link-status{flex:1;min-width:210px}.link-status-head{align-items:center;gap:9px;margin-bottom:4px;font-weight:600;display:flex}.rates{color:var(--text-dim);gap:14px;margin-top:8px;font-size:13px;display:flex}.rates span{align-items:center;gap:4px;display:inline-flex}.inline-form{margin:14px 0}.sync-bar{border:1px solid var(--border);border-radius:var(--radius-sm);background:#090f1c80;justify-content:space-between;align-items:center;gap:12px;margin:2px 0 14px;padding:8px 12px;font-size:13px;display:flex}.sync-err{color:#ffb0b7}.toast-wrap{z-index:200;flex-direction:column;gap:10px;max-width:380px;display:flex;position:fixed;bottom:22px;right:22px}.toast{border-radius:var(--radius-sm);background:var(--surface-solid);border:1px solid var(--border-strong);color:var(--text);box-shadow:var(--shadow-lg);cursor:pointer;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);align-items:center;gap:11px;padding:12px 15px;font-size:13.5px;animation:.22s toastIn;display:flex}@keyframes toastIn{0%{opacity:0;transform:translate(20px)}to{opacity:1;transform:none}}.toast-icon{color:#fff;border-radius:50%;flex-shrink:0;place-items:center;width:22px;height:22px;font-size:12px;font-weight:700;display:grid}.toast-success{border-color:#2ee6a666}.toast-success .toast-icon{background:var(--up)}.toast-error{border-color:#ff5a6a73}.toast-error .toast-icon{background:var(--danger)}.toast-info .toast-icon{background:var(--accent)}.banner-warn{border-radius:var(--radius-sm);color:#ffdca6;background:#ffb3471a;border:1px solid #ffb3474d;align-items:flex-start;gap:10px;margin:4px 0 18px;padding:11px 14px;font-size:13px;display:flex}.banner-warn svg{flex-shrink:0;margin-top:1px}.sdwan-grid{grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:16px;display:grid}.wan-card{border:1px solid var(--border);flex-direction:column;gap:12px;transition:border-color .16s,box-shadow .16s;display:flex}.wan-card.is-active{box-shadow:0 0 0 1px #2ee6a640, var(--shadow);border-color:#2ee6a673}.wan-top{justify-content:space-between;align-items:center;gap:8px;display:flex}.wan-title{align-items:center;gap:9px;font-size:15px;font-weight:600;display:flex}.wan-meta{grid-template-columns:1fr 1fr;gap:8px 12px;font-size:13px;display:grid}.wan-meta .k{color:var(--muted)}.wan-meta .v{color:var(--text-dim);text-align:right}.pill{text-transform:uppercase;letter-spacing:.05em;border:1px solid #0000;border-radius:999px;padding:2px 9px;font-size:10.5px;font-weight:600}.pill.active{color:var(--up);background:#2ee6a624;border-color:#2ee6a659}.pill.role{color:var(--text-dim);border-color:var(--border-strong);background:#7891be1f}.wan-card .primary.sm,.btn-ghost{padding:8px 12px;font-size:13px}.btn-ghost{background:var(--surface-hover);color:var(--text);border:1px solid var(--border-strong);border-radius:var(--radius-sm);justify-content:center;align-items:center;gap:6px;font-weight:600;transition:background .14s,border-color .14s;display:inline-flex}.btn-ghost:hover:not(:disabled){color:#bff5e2;background:#2ee6a61f;border-color:#2ee6a666}.btn-ghost:disabled{opacity:.5;cursor:default}.btn-ghost.sm{padding:6px 10px;font-size:12.5px}.route-list{flex-direction:column;gap:12px;display:flex}.route-card{flex-direction:column;gap:10px;display:flex}.route-head{justify-content:space-between;align-items:center;gap:10px;display:flex}.route-head strong{font-size:15px}.route-meta{grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:8px 18px;font-size:13px;display:grid}.route-meta>div{flex-direction:column;gap:2px;min-width:0;display:flex}.route-meta .k{color:var(--muted);text-transform:uppercase;letter-spacing:.04em;font-size:11px}.route-meta>div>span:last-child{color:var(--text-dim);word-break:break-word}.route-path{border-top:1px solid var(--border);align-items:center;gap:8px;padding-top:10px;font-size:13.5px;display:flex}.path-chain{flex-wrap:wrap;align-items:center;gap:8px;display:inline-flex}.path-chain .arrow{color:var(--muted);margin:0 2px}@media (width<=780px){.sidebar{width:68px;padding:18px 10px}.brand span,.sidebar nav a span,.sidebar-footer .who .uname{display:none}.content{padding:22px 18px}}