:root{--ink:#172239;--muted:#7a8496;--line:#e9edf3;--bg:#f7f8fb;--purple:#6d4cf6;--navy:#111a2f}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--ink);font-family:Manrope,Arial,sans-serif;font-size:13px}.app-shell{display:flex;min-height:100vh}.sidebar{width:252px;background:#fff;border-right:1px solid var(--line);padding:27px 15px 18px;display:flex;flex-direction:column;position:fixed;inset:0 auto 0 0}.brand{display:flex;align-items:center;gap:10px;font-size:21px;font-weight:800;letter-spacing:-1px;padding:0 12px 29px}.brand-mark{width:29px;height:29px;border-radius:9px;background:linear-gradient(135deg,#8c6bff,#5034d9);color:#fff;display:grid;place-items:center;font-size:16px;font-family:DM Mono}.workspace{border:1px solid #e6e9f1;border-radius:9px;padding:9px;display:flex;gap:9px;align-items:center;margin-bottom:25px}.workspace strong,.profile strong{font-size:11px;display:block}.workspace small,.profile small{color:#8891a1;font-size:10px}.chevron{margin-left:auto;color:#8992a3}.avatar{background:#ebd9cb;color:#8a5136;display:grid;place-items:center;border-radius:50%;width:30px;height:30px;font-weight:800;font-size:10px}.avatar.small{width:27px;height:27px}nav{padding:0 4px}.nav-label{font-size:9px;letter-spacing:.9px;font-weight:800;color:#a1a8b6;margin:12px 8px 8px}.nav-space{margin-top:25px}.nav-link{color:#687386;display:flex;align-items:center;gap:11px;height:39px;border-radius:7px;padding:0 9px;margin:2px 0;text-decoration:none;cursor:pointer;font-weight:600}.nav-link:hover{background:#f5f4ff;color:#5f43dd}.nav-link.active{background:#eeeaff;color:#6346df}.nav-link .ico{font-family:Arial;font-size:18px;width:16px;text-align:center}.nav-link b{font-size:10px;background:#e9edf4;border-radius:11px;padding:2px 7px;margin-left:auto;color:#637084}.side-bottom{margin-top:auto}.help-card{background:#f4f2ff;border-radius:9px;padding:13px;display:flex;gap:9px;margin:0 4px 17px;color:#6652b9}.help-card span{font-size:16px}.help-card strong{font-size:11px;display:block}.help-card small{font-size:9px;color:#877eb6}.profile{border-top:1px solid var(--line);padding:17px 5px 0;display:flex;gap:9px;align-items:center}.profile>span:last-child{margin-left:auto;font-size:18px;color:#8490a1}main{width:calc(100% - 252px);margin-left:252px;padding:0 38px 42px;max-width:1700px}header{height:116px;display:flex;align-items:center;justify-content:space-between}.breadcrumb,.eyebrow{color:#8993a4;font-weight:800;letter-spacing:.9px;font-size:9px;margin:0 0 9px}.breadcrumb span{color:#a2a9b5}h1{font-size:24px;letter-spacing:-.8px;margin:0;font-weight:800}h1 span{font-size:18px;color:#f2ae46}.top-actions{display:flex;gap:12px;align-items:center}.icon-button{border:1px solid var(--line);background:#fff;height:36px;width:36px;border-radius:8px;color:#6b7585;font-size:19px;position:relative}.icon-button i{width:5px;height:5px;border-radius:50%;background:#ed6373;position:absolute;top:8px;right:9px}.agent-status{height:36px;border:1px solid #dce9df;background:#fff;border-radius:8px;padding:0 11px;color:#566272;font:600 11px Manrope}.agent-status span,.activity-list .dot,.infra-status{display:inline-block;width:7px;height:7px;background:#43c787;border-radius:50%;margin-right:7px;box-shadow:0 0 0 3px #e5f8ef}.agent-status em{font-style:normal;color:#9ba4b3;margin-left:11px}.intro-row{display:flex;align-items:center;justify-content:space-between;margin:0 0 25px}.intro-row p{color:#778294;margin:0;font-size:13px}.primary,.secondary{border:0;border-radius:7px;height:37px;padding:0 14px;font:700 11px Manrope;cursor:pointer}.primary{background:#6a4ded;color:#fff;box-shadow:0 4px 10px #6d4cf62e}.primary:hover{background:#5938e0}.secondary{background:#fff;border:1px solid #dde3ec;color:#5c687a}.metrics{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:17px}.metrics article{background:#fff;border:1px solid var(--line);border-radius:9px;padding:17px;display:flex;align-items:center;gap:12px;min-width:0}.metric-icon{width:39px;height:39px;flex:0 0 39px;display:grid;place-items:center;border-radius:9px;font-size:18px}.purple{background:#eeeaff;color:#6e50e8}.blue{background:#e8f3ff;color:#3b8cdc}.green{background:#e6f8f0;color:#20a86e}.orange{background:#fff2df;color:#e68d28}.metrics small{font-size:9px;font-weight:800;letter-spacing:.65px;color:#929aaa;display:block;margin-bottom:3px}.metrics strong{font-size:20px;letter-spacing:-.5px;white-space:nowrap}.metrics em{font:500 9px Manrope;color:#8791a1;margin-left:3px;letter-spacing:0}.metrics .up{color:#20a66f}.metrics button,.icon-more{margin-left:auto;align-self:flex-start;border:0;background:none;color:#9da5b2;letter-spacing:1px}.content-grid{display:grid;grid-template-columns:minmax(0,1.74fr) minmax(300px,.84fr);gap:17px}.panel{background:#fff;border:1px solid var(--line);border-radius:9px}.panel-title{min-height:76px;padding:17px 20px;display:flex;align-items:center;justify-content:space-between}.panel h2{margin:0 0 4px;font-size:13px;letter-spacing:-.2px}.panel p{margin:0;color:#8c95a4;font-size:10px}.text-btn{border:0;background:transparent;color:#684ce2;font:700 10px Manrope;cursor:pointer}.text-btn span{font-size:15px;margin-left:5px}table{width:100%;border-collapse:collapse}th{text-align:left;height:32px;color:#9ca4b2;background:#fafbfc;border-top:1px solid var(--line);border-bottom:1px solid var(--line);font-size:8px;letter-spacing:.7px;padding:0 20px}td{height:57px;padding:0 20px;border-bottom:1px solid #f0f2f6;font-size:11px;font-weight:600;white-space:nowrap}tbody tr:last-child td{border-bottom:0}.instance{display:flex;align-items:center;gap:9px}.server-icon{width:24px;height:24px;border-radius:6px;background:#edf4ff;color:#4b94dc;display:grid;place-items:center;font-size:11px}.server-icon.linux{background:#f1edff;color:#795fe9}.server-icon.db{background:#e8f8f1;color:#2aac77}.sub{display:block;color:#9099a8;font-size:9px;margin-top:2px;font-weight:500}.mono{font-family:DM Mono;font-size:10px}.protocol{font:500 9px DM Mono;padding:3px 6px;border-radius:4px;background:#edf5ff;color:#407cbd}.protocol.udp{background:#fff0f2;color:#df6372}.status{font-size:9px;color:#3b9f71;font-weight:700}.status:before{content:"•";font-size:15px;vertical-align:-1px;margin-right:4px}.table-more{border:0;background:0;color:#9da5b2;font-size:17px}.infra-panel{min-height:319px}.infra-row{display:flex;align-items:center;padding:12px 20px;border-top:1px solid #f1f2f5}.infra-row .infra-status{width:6px;height:6px;margin-right:10px}.infra-row strong{font-size:10px}.infra-row small{font:9px DM Mono;color:#919baa;margin-left:auto}.agent-box{margin:12px 16px 16px;background:#f7f9fc;border-radius:7px;padding:12px;display:flex;align-items:center;gap:9px}.agent-circle{width:29px;height:29px;background:#e4f9ee;color:#21a86e;border-radius:50%;display:grid;place-items:center;font-size:15px}.agent-box strong{font-size:10px}.agent-box p{font-size:9px;margin-top:2px}.agent-box p span{display:inline-block;width:5px;height:5px;background:#36c683;border-radius:50%}.agent-box button{margin-left:auto;border:0;background:transparent;color:#674cdb;font:700 9px Manrope}.activity{margin-top:17px}.activity-list{padding:0 20px}.activity-row{display:flex;min-height:55px;align-items:center;border-top:1px solid #f0f2f5;gap:12px}.activity-icon{width:27px;height:27px;border-radius:50%;background:#f0edff;color:#704de5;display:grid;place-items:center;font-size:12px}.activity-copy{flex:1}.activity-copy strong{font-size:10px}.activity-copy span{font-size:10px;color:#8b95a4}.activity-time{color:#969eab;font-size:9px}.page{display:none}.active-page{display:block}.listing-title{margin-bottom:22px}.rule-list{overflow:hidden}.list-toolbar{display:flex;padding:16px;gap:10px;justify-content:space-between}.search{border:1px solid #e1e5ec;border-radius:7px;height:34px;width:260px;display:flex;align-items:center;padding:0 10px;color:#9da7b4;font-size:18px}.search input{border:0;outline:0;width:100%;font:500 11px Manrope;padding-left:6px;color:var(--ink)}.filters{display:flex;gap:7px}.filters button{border:1px solid #e1e5ec;background:#fff;border-radius:6px;color:#737f90;font:600 10px Manrope;padding:0 9px}.network-cards{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}.network-card{background:#fff;border:1px solid var(--line);border-radius:10px;padding:21px}.network-card header{height:auto;margin-bottom:18px}.network-card h2{font-size:15px;margin:0}.network-card .net-icon{color:#6c4de9;background:#f0edff;border-radius:8px;padding:7px}.network-card .public-ip{font:500 14px DM Mono;margin:13px 0 5px}.network-card small{color:#8994a4;font-size:10px}.net-foot{border-top:1px solid var(--line);padding-top:14px;margin-top:17px;display:flex;justify-content:space-between;color:#738095;font-size:10px}.settings{max-width:670px}.settings .panel{padding:22px}.settings .panel>p{margin-bottom:18px}.setting-row{display:flex;justify-content:space-between;align-items:center;border-top:1px solid var(--line);padding:15px 0}.setting-row strong,.setting-row small{display:block;font-size:11px}.setting-row small{color:#929aa7;font-size:10px;margin-top:4px}.enabled{font-size:10px;color:#249c6b;background:#e8f8f0;padding:5px 8px;border-radius:4px;font-weight:700}.modal-backdrop{display:none;position:fixed;top:0;right:0;bottom:0;left:0;background:#1a26406e;z-index:8;place-items:center;padding:20px}.modal-backdrop.show{display:grid}.modal{width:480px;background:#fff;border-radius:12px;padding:28px;position:relative;box-shadow:0 18px 55px #10192d40}.modal h2{margin:0;font-size:20px;letter-spacing:-.5px}.modal-sub{font-size:11px;color:#8590a0;margin:7px 0 22px}.modal-close{position:absolute;right:16px;top:14px;border:0;background:transparent;color:#98a1ae;font-size:25px;cursor:pointer}form{display:grid;gap:13px}label{font-size:10px;font-weight:800;color:#657083;display:grid;gap:6px}input,select{height:37px;border:1px solid #dce2eb;border-radius:6px;padding:0 10px;font:500 12px Manrope;color:#243047;background:#fff;outline-color:#7357ed}.field-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}.modal-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:9px}#toast{position:fixed;right:28px;bottom:25px;background:#1b293f;color:#fff;border-radius:8px;padding:12px 16px;font-size:11px;font-weight:600;transform:translateY(90px);opacity:0;transition:.25s;box-shadow:0 8px 25px #14203a40;z-index:10}#toast.show{transform:translateY(0);opacity:1}@media(max-width:1050px){.metrics{grid-template-columns:repeat(2,1fr)}.content-grid{grid-template-columns:1fr}.sidebar{width:215px}main{margin-left:215px;width:calc(100% - 215px);padding:0 24px}}@media(max-width:700px){.sidebar{display:none}main{margin:0;width:100%;padding:0 15px}header{height:92px}.metrics,.network-cards{grid-template-columns:1fr}.content-grid{display:block}.infra-panel{margin-top:16px}.top-actions .agent-status{display:none}.panel{overflow-x:auto}.intro-row{align-items:flex-start;gap:12px}.primary span{display:none}.list-toolbar{flex-direction:column}.search{width:100%}}.empty{height:92px!important;text-align:center;color:#8d97a7;font-weight:500}.empty-activity{justify-content:center;color:#8d97a7;font-size:11px}.agent-status .offline{background:#e36a73;box-shadow:0 0 0 3px #ffe8eb}.app-shell{display:none}body.authenticated .app-shell{display:flex}body.authenticated .auth-page{display:none}.auth-page{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;background:radial-gradient(circle at 15% 12%,#ede9ff 0,transparent 25%),#f7f8fb;padding:24px}.auth-brand{display:flex;gap:10px;align-items:center;font-size:22px;font-weight:800;letter-spacing:-1px;margin-bottom:28px}.auth-card{width:100%;max-width:410px;background:#fff;border:1px solid #e7eaf0;box-shadow:0 18px 55px #19264613;border-radius:12px;padding:31px}.auth-card h1{font-size:22px;margin-bottom:7px}.auth-card>p:not(.eyebrow){color:#7d8798;font-size:12px;margin:0 0 23px}.auth-form{display:grid;gap:15px}.auth-form label{font-size:11px}.auth-form input{width:100%}.auth-submit{width:100%;margin-top:3px}.auth-switch{display:block;margin:19px auto 0;border:0;color:#6648df;background:transparent;font:700 11px Manrope;cursor:pointer}.password-hint{margin:-6px 0 0;color:#8993a3;font-size:10px;line-height:1.5}.form-error{min-height:14px;margin:-5px 0 0;color:#c14958;font-size:10px}.hidden{display:none!important}.auth-footer{margin:20px 0 0;color:#939cab;font-size:10px}.rule-actions{display:flex;align-items:center;justify-content:flex-end;gap:9px}.handle-label{color:#8b95a5;font:500 8px DM Mono}.delete-rule{width:29px;height:29px;border:1px solid #f1cbd0;border-radius:6px;background:#fff5f6;color:#c34f60;cursor:pointer;font-size:15px}.delete-rule:hover{background:#ffe7ea}.delete-rule:disabled{opacity:.5;cursor:wait}[data-theme=dark]{--ink: #e8edf7;--muted: #98a4b8;--line: #2a3548;--bg: #0d1421;--navy: #080d17;color-scheme:dark}[data-theme=dark] body{background:#0d1421;color:var(--ink)}[data-theme=dark] .sidebar,[data-theme=dark] .panel,[data-theme=dark] .metrics article,[data-theme=dark] .network-card,[data-theme=dark] .modal,[data-theme=dark] .icon-button,[data-theme=dark] .agent-status,[data-theme=dark] .secondary,[data-theme=dark] .filters button{background:#151e2d;color:var(--ink);border-color:var(--line)}[data-theme=dark] .workspace,[data-theme=dark] input,[data-theme=dark] select,[data-theme=dark] .search{background:#111a28;color:var(--ink);border-color:#344157}[data-theme=dark] th{background:#111a28;border-color:var(--line);color:#95a2b6}[data-theme=dark] td,[data-theme=dark] .activity-row,[data-theme=dark] .infra-row,[data-theme=dark] .profile{border-color:#253044}[data-theme=dark] .nav-link{color:#a8b3c5}[data-theme=dark] .nav-link:hover{background:#211d3d;color:#c3b8ff}[data-theme=dark] .nav-link.active{background:#2a2250;color:#c6baff}[data-theme=dark] .nav-link b{background:#253044;color:#aeb9ca}[data-theme=dark] .help-card{background:#211d3a;color:#c5baff}[data-theme=dark] .agent-box{background:#101927}[data-theme=dark] .search input{background:transparent}[data-theme=dark] .modal-backdrop{background:#050914b8}[data-theme=dark] .delete-rule{background:#351b24;border-color:#61303c;color:#ff91a1}[data-theme=dark] .delete-rule:hover{background:#48212c}[data-theme=dark] #toast{background:#e8edf7;color:#111827}[data-theme=dark] .auth-page{background:radial-gradient(circle at 15% 12%,#252044 0,transparent 25%),#0d1421}[data-theme=dark] .auth-card{background:#151e2d;border-color:var(--line);box-shadow:0 18px 55px #0008}@media(max-width:700px){.handle-label{display:none}}