@import"https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600&family=Syne:wght@400;600;700;800&display=swap";:root{--bg: #080c10;--bg1: #0d1117;--bg2: #111820;--bg3: #161e29;--bg4: #1c2535;--border: #1f2d3d;--border2: #243347;--text: #c9d5e0;--text2: #7a8fa3;--text3: #4a5f74;--accent: #00c8b4;--accent2: #0094ff;--accent-dim: rgba(0,200,180,.12);--accent2-dim: rgba(0,148,255,.12);--red: #f04c5a;--red-dim: rgba(240,76,90,.12);--yellow: #f0b429;--yellow-dim: rgba(240,180,41,.12);--green: #2de08a;--green-dim: rgba(45,224,138,.12);--mono: "JetBrains Mono", monospace;--sans: "Syne", sans-serif;--sidebar-w: 228px}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}html,body{height:100%}body{background:var(--bg);color:var(--text);font-family:var(--mono);font-size:13px;line-height:1.6;display:flex;height:100vh;overflow:hidden}#app{display:flex;width:100%;height:100%;overflow:hidden}::-webkit-scrollbar{width:5px;height:5px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:var(--bg4);border-radius:3px}::-webkit-scrollbar-thumb:hover{background:var(--border2)}.sidebar{width:var(--sidebar-w);background:var(--bg1);border-right:1px solid var(--border);display:flex;flex-direction:column;flex-shrink:0}.logo{padding:18px 16px 14px;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:9px}.logo-icon{width:28px;height:28px;background:linear-gradient(135deg,var(--accent),var(--accent2));border-radius:7px;display:flex;align-items:center;justify-content:center;font-size:14px;flex-shrink:0}.logo-text{font-family:var(--sans);font-weight:800;font-size:17px;color:#fff;letter-spacing:-.4px}.logo-text span{color:var(--accent)}.server-select-wrap{padding:10px 10px 8px;border-bottom:1px solid var(--border);position:relative}.server-select-label{font-size:9px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--text3);padding:0 4px;margin-bottom:5px}.server-select-btn{width:100%;background:var(--bg2);border:1px solid var(--border2);border-radius:7px;padding:7px 10px;display:flex;align-items:center;gap:8px;cursor:pointer;position:relative;transition:border-color .15s;-webkit-user-select:none;user-select:none}.server-select-btn:hover,.server-select-btn.open{border-color:var(--accent)}.srv-dot{width:7px;height:7px;border-radius:50%;background:var(--green);box-shadow:0 0 5px var(--green);flex-shrink:0}.srv-dot.warn{background:var(--yellow);box-shadow:0 0 5px var(--yellow)}.srv-dot.offline{background:var(--red);box-shadow:0 0 5px var(--red)}.srv-name{flex:1;font-size:12px;font-weight:500;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.srv-caret{font-size:10px;color:var(--text3);flex-shrink:0;transition:transform .15s}.server-select-btn.open .srv-caret{transform:rotate(180deg)}.server-dropdown{display:none;position:absolute;left:10px;right:10px;top:calc(100% + 4px);background:var(--bg3);border:1px solid var(--border2);border-radius:8px;z-index:100;overflow:hidden;box-shadow:0 8px 24px #0006}.server-dropdown.open{display:block}.srv-option{display:flex;align-items:center;gap:8px;padding:8px 12px;cursor:pointer;transition:background .1s}.srv-option:hover{background:var(--bg4)}.srv-option.active{background:var(--accent-dim)}.srv-option-name{font-size:12px;color:var(--text);font-weight:500;flex:1}.srv-option-ip{font-size:10px;color:var(--text3)}.sidebar nav{flex:1;padding:10px 8px;overflow-y:auto}.nav-section{margin-bottom:4px}.nav-item{display:flex;align-items:center;gap:8px;padding:7px 10px;border-radius:6px;cursor:pointer;color:var(--text2);transition:all .12s;-webkit-user-select:none;user-select:none;text-decoration:none}.nav-item:hover{background:var(--bg3);color:var(--text)}.nav-item.active{background:var(--accent-dim);color:var(--accent)}.nav-item.section-open{color:var(--text)}.nav-icon{font-size:14px;flex-shrink:0;width:16px;text-align:center}.nav-label{font-size:12px;font-weight:500;flex:1}.nav-caret{font-size:9px;color:var(--text3);transition:transform .15s;margin-left:auto}.section-open>.nav-caret,.nav-item.section-open .nav-caret{transform:rotate(90deg)}.nav-sub{display:none;padding-left:24px;margin-top:2px}.nav-sub.open{display:block}.nav-sub-group{margin-bottom:2px}.nav-sub-group-label{display:flex;align-items:center;gap:6px;padding:5px 8px;border-radius:5px;cursor:pointer;color:var(--text2);font-size:11px;font-weight:500;transition:all .12s;-webkit-user-select:none;user-select:none}.nav-sub-group-label:hover{background:var(--bg3);color:var(--text)}.nav-sub-group-label.open{color:var(--text)}.sub-group-caret{font-size:8px;color:var(--text3);transition:transform .15s;margin-left:auto}.nav-sub-group-label.open .sub-group-caret{transform:rotate(90deg)}.nav-sub-items{display:none;padding-left:12px}.nav-sub-items.open{display:block}.nav-leaf{display:flex;align-items:center;gap:6px;padding:5px 8px;border-radius:5px;cursor:pointer;color:var(--text3);font-size:11px;transition:all .12s;text-decoration:none}.nav-leaf:hover{background:var(--bg3);color:var(--text)}.nav-leaf.active{color:var(--accent);background:var(--accent-dim)}.nav-leaf:before{content:"–";font-size:10px;color:var(--text3)}.nav-leaf.active:before{color:var(--accent)}.sidebar-footer{padding:10px;border-top:1px solid var(--border)}.sidebar-version{font-size:10px;color:var(--text3);padding:4px 6px}.main{flex:1;display:flex;flex-direction:column;overflow:hidden;min-width:0}.topbar{height:52px;background:var(--bg1);border-bottom:1px solid var(--border);display:flex;align-items:center;padding:0 20px;gap:12px;flex-shrink:0}.breadcrumb{display:flex;align-items:center;gap:5px;font-size:12px;color:var(--text3)}.breadcrumb span{color:var(--text)}.topbar-search{flex:1;max-width:300px;margin-left:auto;position:relative}.topbar-search input{width:100%;background:var(--bg2);border:1px solid var(--border);border-radius:6px;padding:6px 10px 6px 30px;color:var(--text);font-family:var(--mono);font-size:12px;outline:none;transition:border-color .15s}.topbar-search input:focus{border-color:var(--accent)}.topbar-search input::placeholder{color:var(--text3)}.search-icon{position:absolute;left:9px;top:50%;transform:translateY(-50%);color:var(--text3);font-size:13px;pointer-events:none}.topbar-actions{display:flex;align-items:center;gap:6px}.icon-btn{width:30px;height:30px;background:var(--bg2);border:1px solid var(--border);border-radius:6px;display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--text2);font-size:13px;transition:all .15s}.icon-btn:hover{background:var(--bg3);color:var(--text);border-color:var(--border2)}.avatar{width:30px;height:30px;background:linear-gradient(135deg,#0066cc,var(--accent));border-radius:50%;display:flex;align-items:center;justify-content:center;font-family:var(--sans);font-weight:700;font-size:11px;color:#fff;cursor:pointer;flex-shrink:0}.content{flex:1;overflow-y:auto;padding:22px 24px}@keyframes fadeIn{0%{opacity:0;transform:translateY(3px)}to{opacity:1;transform:none}}.view-enter-active{animation:fadeIn .15s ease}.page-header{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:20px}.page-title{font-family:var(--sans);font-size:20px;font-weight:700;color:#fff;letter-spacing:-.3px}.page-subtitle{font-size:11px;color:var(--text2);margin-top:2px}.actions{display:flex;gap:7px;align-items:center}.btn{display:inline-flex;align-items:center;gap:5px;padding:6px 13px;border-radius:6px;font-family:var(--mono);font-size:12px;font-weight:500;cursor:pointer;border:1px solid transparent;transition:all .15s;white-space:nowrap;background:none;color:var(--text)}.btn-primary{background:var(--accent);color:#000;border-color:var(--accent)}.btn-primary:hover{background:#00deca;border-color:#00deca}.btn-secondary{background:var(--bg3);color:var(--text);border-color:var(--border2)}.btn-secondary:hover{background:var(--bg4);border-color:var(--accent);color:var(--accent)}.btn-danger{background:var(--red-dim);color:var(--red);border-color:transparent}.btn-danger:hover{background:#f04c5a33}.btn-sm{padding:4px 9px;font-size:11px}.btn-ghost{background:transparent;border-color:transparent;color:var(--text2)}.btn-ghost:hover{background:var(--bg3);color:var(--text);border-color:transparent}.tabs{display:flex;gap:0;border-bottom:1px solid var(--border);margin-bottom:20px}.tab{padding:8px 16px;font-size:12px;font-weight:500;color:var(--text2);cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-1px;transition:all .15s}.tab:hover{color:var(--text)}.tab.active{color:var(--accent);border-bottom-color:var(--accent)}.card{background:var(--bg1);border:1px solid var(--border);border-radius:10px;overflow:hidden;margin-bottom:16px}.card-header{display:flex;align-items:center;justify-content:space-between;padding:14px 18px;border-bottom:1px solid var(--border)}.card-title{font-family:var(--sans);font-size:13px;font-weight:700;color:#fff}.card-subtitle{font-size:11px;color:var(--text2);margin-top:2px}.card-body{padding:18px}.card-footer{padding:10px 18px;border-top:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;background:var(--bg)}.stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:20px}.stat-card{background:var(--bg1);border:1px solid var(--border);border-radius:9px;padding:16px 18px;position:relative;overflow:hidden}.stat-card:before{content:"";position:absolute;top:0;left:0;right:0;height:2px}.stat-card.teal:before{background:linear-gradient(90deg,var(--accent),transparent)}.stat-card.blue:before{background:linear-gradient(90deg,var(--accent2),transparent)}.stat-card.green:before{background:linear-gradient(90deg,var(--green),transparent)}.stat-card.yellow:before{background:linear-gradient(90deg,var(--yellow),transparent)}.stat-label{font-size:10px;color:var(--text2);letter-spacing:.05em;text-transform:uppercase;margin-bottom:6px}.stat-value{font-family:var(--sans);font-size:28px;font-weight:800;color:#fff;line-height:1;letter-spacing:-1px}.stat-change{font-size:10px;color:var(--text2);margin-top:5px}.stat-icon{position:absolute;right:14px;top:14px;font-size:20px;opacity:.12}table{width:100%;border-collapse:collapse}thead th{padding:9px 14px;text-align:left;font-size:10px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--text3);border-bottom:1px solid var(--border);background:var(--bg);white-space:nowrap}thead th:first-child{padding-left:18px}thead th:last-child{padding-right:18px;text-align:right}tbody tr{border-bottom:1px solid var(--border);transition:background .1s;cursor:pointer}tbody tr:last-child{border-bottom:none}tbody tr:hover{background:var(--bg2)}td{padding:10px 14px;font-size:12px;color:var(--text);vertical-align:middle}td:first-child{padding-left:18px}td:last-child{padding-right:18px}.td-actions{display:flex;gap:3px;justify-content:flex-end;opacity:0;transition:opacity .15s}tr:hover .td-actions{opacity:1}.badge{display:inline-flex;align-items:center;gap:3px;padding:2px 7px;border-radius:4px;font-size:10px;font-weight:600;letter-spacing:.04em;text-transform:uppercase}.badge:before{content:"●";font-size:6px}.badge-primary{background:var(--accent-dim);color:var(--accent)}.badge-secondary{background:var(--accent2-dim);color:var(--accent2)}.badge-stub{background:var(--yellow-dim);color:var(--yellow)}.badge-online{background:var(--green-dim);color:var(--green)}.badge-offline{background:var(--red-dim);color:var(--red)}.badge-warning{background:var(--yellow-dim);color:var(--yellow)}.form-grid{display:grid;gap:16px}.form-grid-2{grid-template-columns:1fr 1fr}.form-grid-3{grid-template-columns:1fr 1fr 1fr}.form-label{display:block;font-size:10px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--text3);margin-bottom:6px}.form-input{width:100%;background:var(--bg2);border:1px solid var(--border2);border-radius:6px;padding:8px 11px;color:var(--text);font-family:var(--mono);font-size:12px;outline:none;transition:border-color .15s}.form-input:focus{border-color:var(--accent)}.form-input::placeholder{color:var(--text3)}.form-input:disabled{opacity:.5;cursor:not-allowed}select.form-input{cursor:pointer}.form-hint{font-size:10px;color:var(--text3);margin-top:5px}.form-divider{border:none;border-top:1px solid var(--border);margin:20px 0}.toggle-row{display:flex;align-items:center;justify-content:space-between;padding:10px 0;border-bottom:1px solid var(--border)}.toggle-row:last-child{border-bottom:none}.toggle-name{font-size:12px;color:var(--text);font-weight:500}.toggle-desc{font-size:11px;color:var(--text3);margin-top:2px}.toggle{width:36px;height:20px;background:var(--bg4);border:1px solid var(--border2);border-radius:10px;position:relative;cursor:pointer;transition:all .2s;flex-shrink:0}.toggle:after{content:"";position:absolute;width:14px;height:14px;border-radius:50%;background:var(--text3);top:2px;left:2px;transition:all .2s}.toggle.on{background:var(--accent-dim);border-color:var(--accent)}.toggle.on:after{background:var(--accent);left:18px}.rtype{display:inline-block;padding:1px 6px;border-radius:3px;font-size:10px;font-weight:700;letter-spacing:.04em;font-family:var(--mono)}.rtype-A{background:#00c8b426;color:var(--accent)}.rtype-AAAA{background:#0094ff26;color:var(--accent2)}.rtype-CNAME{background:#f0b42926;color:var(--yellow)}.rtype-MX{background:#2de08a26;color:var(--green)}.rtype-TXT{background:#b464ff26;color:#c06fff}.rtype-NS{background:#ff646426;color:#ff8a8a}.rtype-SOA{background:#64b4ff26;color:#7ac4ff}.rtype-PTR{background:#ff963226;color:#fa6}.mono{font-family:var(--mono)}.text-muted{color:var(--text2)}.text-dim{color:var(--text3)}.text-accent{color:var(--accent)}.text-green{color:var(--green)}.text-red{color:var(--red)}.text-yellow{color:var(--yellow)}.breadcrumb-nav{display:flex;align-items:center;gap:5px;font-size:11px;color:var(--text3);margin-bottom:14px}.breadcrumb-nav a{color:var(--accent);text-decoration:none;cursor:pointer}.breadcrumb-nav a:hover{text-decoration:underline}.filter-row{display:flex;gap:8px;align-items:center}.filter-input{background:var(--bg2);border:1px solid var(--border);border-radius:5px;padding:5px 9px;color:var(--text);font-family:var(--mono);font-size:11px;outline:none;transition:border-color .15s}.filter-input:focus{border-color:var(--accent)}.filter-input::placeholder{color:var(--text3)}select.filter-input{cursor:pointer}.pagination{display:flex;gap:3px}.page-count{font-size:11px;color:var(--text3)}input[type=checkbox]{accent-color:var(--accent);width:12px;height:12px;cursor:pointer}@keyframes pulse{0%,to{opacity:1}50%{opacity:.4}}.pulse{animation:pulse 2s infinite}.info-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:20px;padding:16px 18px}.info-label{font-size:10px;color:var(--text3);text-transform:uppercase;letter-spacing:.1em;margin-bottom:5px}.info-value{font-size:12px;color:#fff;font-family:var(--mono)}.alert{display:flex;align-items:flex-start;gap:10px;padding:11px 14px;border-radius:7px;margin-bottom:16px;font-size:12px}.alert-warn{background:var(--yellow-dim);border:1px solid rgba(240,180,41,.2);color:var(--yellow)}.alert-info{background:var(--accent-dim);border:1px solid rgba(0,200,180,.2);color:var(--accent)}.two-col{display:grid;grid-template-columns:1fr 1fr;gap:16px}.tag{display:inline-flex;align-items:center;gap:5px;background:var(--bg3);border:1px solid var(--border2);border-radius:5px;padding:3px 8px;font-size:11px;color:var(--text2);font-family:var(--mono)}.tag .tag-del{cursor:pointer;color:var(--text3)}.tag .tag-del:hover{color:var(--red)}a{color:inherit;text-decoration:none}