:root{--bg: #0f1115;--bg-secondary: #0a0c10;--card: #161a22;--text: #e5e7eb;--text-secondary: #cbd5e1;--muted: #9aa4b2;--accent: #37ff14;--accent-hover: #2ee60f;--accent-contrast: #0b1220;--border: #232938;--danger: #ef4444;--danger-hover: #dc2626;--success: #10b981;--warning: #f59e0b;--info: #3b82f6;--input: #0f1115;--shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, .2);--shadow: 0 1px 3px 0 rgba(0, 0, 0, .3), 0 1px 2px -1px rgba(0, 0, 0, .3);--shadow-md: 0 4px 6px -1px rgba(0, 0, 0, .3), 0 2px 4px -2px rgba(0, 0, 0, .3);--shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, .4), 0 4px 6px -4px rgba(0, 0, 0, .4);--shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, .4), 0 8px 10px -6px rgba(0, 0, 0, .4)}@media (prefers-color-scheme: light){:root{--bg: #f8fafc;--bg-secondary: #f1f5f9;--card: #ffffff;--text: #0f172a;--text-secondary: #475569;--muted: #64748b;--accent: #0ea5e9;--accent-hover: #0284c7;--accent-contrast: #ffffff;--border: #e2e8f0;--success: #10b981;--warning: #f59e0b;--info: #3b82f6;--shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, .05);--shadow: 0 1px 3px 0 rgba(0, 0, 0, .1), 0 1px 2px -1px rgba(0, 0, 0, .1);--shadow-md: 0 4px 6px -1px rgba(0, 0, 0, .1), 0 2px 4px -2px rgba(0, 0, 0, .1);--shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, .1), 0 4px 6px -4px rgba(0, 0, 0, .1);--shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, .1), 0 8px 10px -6px rgba(0, 0, 0, .1)}}:root[data-theme=light]{--bg: #f8fafc;--bg-secondary: #f1f5f9;--card: #ffffff;--text: #0f172a;--text-secondary: #475569;--muted: #64748b;--accent: #0ea5e9;--accent-hover: #0284c7;--accent-contrast: #ffffff;--border: #e2e8f0;--danger: #dc2626;--danger-hover: #b91c1c;--success: #10b981;--warning: #f59e0b;--info: #3b82f6;--input: #ffffff;--shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, .05);--shadow: 0 1px 3px 0 rgba(0, 0, 0, .1), 0 1px 2px -1px rgba(0, 0, 0, .1);--shadow-md: 0 4px 6px -1px rgba(0, 0, 0, .1), 0 2px 4px -2px rgba(0, 0, 0, .1);--shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, .1), 0 4px 6px -4px rgba(0, 0, 0, .1);--shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, .1), 0 8px 10px -6px rgba(0, 0, 0, .1)}:root[data-theme=dark]{--bg: #0f1115;--bg-secondary: #0a0c10;--card: #161a22;--text: #e5e7eb;--text-secondary: #cbd5e1;--muted: #9aa4b2;--accent: #37ff14;--accent-hover: #2ee60f;--accent-contrast: #0b1220;--border: #232938;--danger: #ef4444;--danger-hover: #dc2626;--success: #10b981;--warning: #f59e0b;--info: #3b82f6;--input: #0f1115;--shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, .2);--shadow: 0 1px 3px 0 rgba(0, 0, 0, .3), 0 1px 2px -1px rgba(0, 0, 0, .3);--shadow-md: 0 4px 6px -1px rgba(0, 0, 0, .3), 0 2px 4px -2px rgba(0, 0, 0, .3);--shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, .4), 0 4px 6px -4px rgba(0, 0, 0, .4);--shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, .4), 0 8px 10px -6px rgba(0, 0, 0, .4)}html,body,#root{height:100%}body{margin:0;background:var(--bg);color:var(--text);font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Helvetica Neue,Arial,"Apple Color Emoji","Segoe UI Emoji"}.nav{display:flex;gap:12px;align-items:center;padding:12px 20px;border-bottom:1px solid var(--border);background:var(--card);box-shadow:var(--shadow-sm);position:sticky;top:0;z-index:100}.nav-header,.nav-links{display:flex;align-items:center;gap:12px}.nav a{color:var(--muted);text-decoration:none;padding:8px 12px;border-radius:8px;border:1px solid transparent;transition:all .2s ease;font-weight:500}.nav a:hover{color:var(--text);background:#ffffff0d}.nav a.active{color:var(--text);border-color:var(--border);background:#ffffff14;box-shadow:var(--shadow-sm)}.nav-logo{max-height:28px!important;max-width:auto!important;height:auto;width:auto;object-fit:contain;margin-right:14px;display:inline-block}.nav .nav-status{color:var(--muted)!important}.container{max-width:1600px;margin:32px auto;padding:0 20px}.card{background:var(--card);border:1px solid var(--border);border-radius:12px;padding:24px;box-shadow:var(--shadow);transition:box-shadow .2s ease}.card:hover{box-shadow:var(--shadow-md)}.table-wrapper{width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;border-radius:12px;border:1px solid var(--border);box-shadow:var(--shadow-sm)}table{width:100%;border-collapse:collapse;background:var(--card);border:none;border-radius:0;overflow:hidden}th,td{padding:10px 12px;border-bottom:1px solid var(--border);text-align:left}thead th{background:#ffffff0a}.btn{background:var(--accent);color:var(--accent-contrast);border:1px solid transparent;border-radius:8px;padding:8px 16px;cursor:pointer;text-decoration:none;display:inline-block;font-size:.9rem;font-family:inherit;text-align:center;line-height:1.5;font-weight:600;transition:all .2s ease;box-shadow:var(--shadow-sm)}.btn:hover:not(:disabled){background:var(--accent-hover);box-shadow:var(--shadow-md);transform:translateY(-1px)}.btn:active:not(:disabled){transform:translateY(0);box-shadow:var(--shadow-sm)}.btn.red{background:var(--danger);color:#fff}.btn.red:hover:not(:disabled){background:var(--danger-hover)}.btn:disabled{opacity:.5;cursor:not-allowed}.btn-sm{padding:6px 12px;font-size:.85rem}.input,input,select,textarea{max-width:100%;box-sizing:border-box;background:var(--input);color:var(--text);border:2px solid var(--border);border-radius:8px;padding:10px 14px;outline:none;transition:all .2s ease;font-family:inherit}.input:focus,input:focus,select:focus,textarea:focus{border-color:var(--accent);box-shadow:0 0 0 3px #37ff1426}.login-wrap{display:grid;place-items:center;min-height:calc(50vh - 60px)}.login-card{width:100%;max-width:420px;background:var(--card);border:1px solid var(--border);border-radius:16px;padding:32px;box-sizing:border-box;box-shadow:var(--shadow-lg)}.login-container{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:40px}.login-logo{width:64px;height:64px;margin-bottom:16px}.login-title{margin-bottom:24px;font-size:1.5rem;color:var(--text)}.theme-toggle{background:transparent;color:var(--muted);border:1px solid var(--border);border-radius:10px;padding:6px 10px;cursor:pointer}.icon-toggle{width:36px;height:36px;display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--border);border-radius:9999px;background:transparent;color:var(--muted);cursor:pointer;transition:all .2s ease}.icon-toggle:hover{background:#ffffff14;color:var(--text);border-color:var(--accent);box-shadow:var(--shadow-sm)}.icon-toggle svg{width:18px;height:18px;display:block;transition:transform .2s ease}.icon-toggle:hover svg{transform:rotate(20deg)}.status-indicator:hover{transform:translateY(-1px);box-shadow:var(--shadow-md);border-color:var(--accent)!important}.status-indicator:active{transform:translateY(0)}th.sortable{cursor:pointer;-webkit-user-select:none;user-select:none;position:relative;padding-right:24px;transition:background .2s ease}th.sortable:hover{background:var(--bg-secondary)}th.sortable:after{content:"⇅";position:absolute;right:8px;opacity:.3;font-size:.9em}th.sortable.sort-asc:after{content:"↑";opacity:1;color:var(--accent)}th.sortable.sort-desc:after{content:"↓";opacity:1;color:var(--accent)}.empty-state{text-align:center;padding:48px 24px;color:var(--muted)}.empty-state-icon{font-size:48px;margin-bottom:16px;opacity:.5}.empty-state-title{font-size:1.25em;font-weight:600;color:var(--text);margin-bottom:8px}.empty-state-description{font-size:.95em;line-height:1.6;max-width:400px;margin:0 auto 24px}.empty-state-action{margin-top:16px}.status{display:inline-flex;align-items:center;gap:6px}.status-dot{width:10px;height:10px;border-radius:9999px;border:1px solid var(--border)}.status-online{background:#22c55e}.status-offline{background:#ef4444}.badge{display:inline-block;padding:4px 12px;border-radius:12px;font-size:.8rem;font-weight:600;box-shadow:var(--shadow-sm);transition:all .2s ease}.badge.online{background:#10b981;color:#fff}.badge.offline{background:#64748b;color:#fff}.badge:hover{box-shadow:var(--shadow)}.modal-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:#00000080;display:flex;align-items:center;justify-content:center;z-index:1000;padding:16px}.modal-content{background:var(--card);border:1px solid var(--border);padding:32px;border-radius:16px;max-width:700px;width:100%;max-height:90vh;overflow:auto;box-shadow:var(--shadow-xl)}body{font-size:16px;line-height:1.6}h1{font-size:1.75rem;line-height:1.3}h2{font-size:1.4rem;line-height:1.35}h3{font-size:1.15rem;line-height:1.4}h4{font-size:1rem;line-height:1.4}p,div,span{font-size:1rem}small{font-size:.875rem}code{font-size:.9em}.nav-spacer{flex:1}.grid{display:grid;gap:20px}.mobile-menu-toggle{display:none;width:40px;height:40px;align-items:center;justify-content:center;background:transparent;border:1px solid var(--border);border-radius:8px;color:var(--text);cursor:pointer;padding:0;transition:all .2s ease}.mobile-menu-toggle:hover{background:#ffffff0d;border-color:var(--accent)}.mobile-menu-toggle svg{width:24px;height:24px}.mobile-only{display:none}.desktop-only{display:initial}.mobile-card-item{background:var(--input);border:1px solid var(--border);border-radius:8px;padding:12px;margin-bottom:12px}.mobile-card-item-header{display:flex;justify-content:space-between;align-items:start;margin-bottom:8px;gap:8px}.mobile-card-item-title{font-weight:700;font-size:1rem;color:var(--text)}.mobile-card-item-row{font-size:.9rem;color:var(--muted);margin-bottom:4px}.mobile-card-item-actions{display:flex;gap:6px;margin-top:8px;flex-wrap:wrap}.config-panel{font-size:inherit}.config-grid{display:grid;gap:8px;font-size:inherit}.config-row{display:grid;grid-template-columns:180px 1fr;gap:12px;align-items:start}.config-row strong{color:var(--muted);font-weight:600}.config-row span{color:var(--text)}.config-row code{padding:2px 6px;background:var(--bg);border-radius:4px}.vlan-mode-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:12px}.vlan-mode-selector{font-size:1rem;padding:16px}.vlan-mode-card{padding:16px}.vlan-mode-title{font-size:1.05rem}.vlan-mode-description{font-size:.9rem}.vlan-mode-note{font-size:.85rem}@media (max-width: 768px){.container{padding:0 12px;margin:16px auto}body{font-size:14px}h1{font-size:1.4rem}h2{font-size:1.2rem}h3{font-size:1rem}h4{font-size:.95rem}.node-config-panel{font-size:12px!important;max-width:100%!important;overflow-x:hidden!important}.node-config-panel h3{font-size:14px!important}.node-config-panel h4{font-size:13px!important}.node-config-panel h5{font-size:12px!important}.node-config-panel .btn{font-size:11px!important;padding:6px 10px!important}.node-config-panel .badge,.node-config-panel code{font-size:10px!important}.node-config-panel .config-panel{padding:10px!important;font-size:inherit!important}.node-config-panel .config-grid,.node-config-panel .config-row,.node-config-panel .config-row strong,.node-config-panel .config-row span,.node-config-panel .config-row code{font-size:inherit!important}.node-config-panel .vlan-mode-selector{padding:8px!important}.node-config-panel .vlan-mode-grid{grid-template-columns:1fr!important;gap:8px!important}.node-config-panel .vlan-mode-card{padding:10px!important;max-width:100%!important;min-width:0!important;width:100%!important;box-sizing:border-box!important;font-size:inherit!important}.node-config-panel .vlan-mode-card *{font-size:inherit!important}.node-config-panel .vlan-mode-selector{max-width:100%!important;width:100%!important;box-sizing:border-box!important;overflow:hidden!important;font-size:inherit!important}.node-config-panel .vlan-mode-selector *{font-size:inherit!important}.nav{flex-wrap:wrap;padding:10px 12px;position:relative}.mobile-menu-toggle{display:inline-flex}.mobile-only{display:initial}.desktop-only{display:none!important}.nav-links{display:none;width:100%;flex-direction:column;gap:4px;margin-top:8px}.nav-links.open{display:flex}.nav a,.nav button.btn{padding:12px;font-size:.95rem;width:100%;text-align:left}.nav-header{display:flex;align-items:center;gap:12px;width:100%}.nav-logo{max-height:24px!important}.hide-mobile{display:none!important}.card{padding:12px;border-radius:10px}.table-wrapper{margin:-12px;width:calc(100% + 24px);border-radius:0;border-left:none;border-right:none}.card:has(table){overflow-x:auto;-webkit-overflow-scrolling:touch}table{min-width:600px;font-size:.9rem}th,td{padding:8px 6px;white-space:nowrap;font-size:.9rem}td:has(.node-config-panel){white-space:normal!important;overflow:visible!important;max-width:100vw!important;padding:8px!important}table .btn{padding:6px 10px;font-size:.85rem}input,select,textarea{font-size:16px;max-width:100%;box-sizing:border-box}.card>div:has(input,select),.card>div>div:has(input,select){flex-wrap:wrap}.card input[type=text],.card input[type=number],.card select,.card textarea{min-width:0}.card>div>div:has(button),td>div:has(button){display:flex;flex-wrap:wrap;gap:6px}.btn{padding:8px 14px}.container>div:first-child:has(.card){grid-template-columns:1fr!important}.modal-overlay{padding:0;align-items:flex-end}.modal-content{max-width:100%;max-height:95vh;border-radius:16px 16px 0 0;padding:12px;font-size:.8rem!important}.modal-content h3{font-size:1rem!important;margin-bottom:12px!important}.modal-content input[type=text],.modal-content input[type=number],.modal-content textarea,.modal-content select{width:100%!important;max-width:100%!important;box-sizing:border-box!important}.modal-content>div{margin-bottom:12px}.modal-content h3{font-size:1.2em}@media (max-width: 640px){th:last-child,td:last-child{padding:6px 4px}}}@media (max-width: 480px){body{font-size:13px}.node-config-panel{font-size:10px!important;max-width:100%!important;overflow-x:hidden!important}.node-config-panel *{font-size:inherit!important}.node-config-panel h3{font-size:12px!important;margin-bottom:8px!important}.node-config-panel h4{font-size:11px!important;margin-bottom:6px!important}.node-config-panel h5{font-size:10px!important;margin:0 0 4px!important}.node-config-panel .badge{font-size:8px!important;padding:2px 4px!important}.node-config-panel .btn{font-size:9px!important;padding:4px 8px!important}.node-config-panel code{font-size:8px!important;padding:1px 3px!important}.node-config-panel strong{font-size:9px!important}.node-config-panel label{font-size:10px!important}.node-config-panel p{font-size:9px!important;margin:4px 0!important}.node-config-panel span,.node-config-panel div{font-size:9px!important}.node-config-panel .config-panel{padding:6px!important;margin-bottom:8px!important;max-width:100%!important;width:100%!important;box-sizing:border-box!important;font-size:inherit!important}.node-config-panel .config-grid,.node-config-panel .config-row,.node-config-panel .config-row strong,.node-config-panel .config-row span,.node-config-panel .config-row code{font-size:inherit!important}.node-config-panel .vlan-mode-selector{padding:5px!important;margin-bottom:8px!important;max-width:100%!important;width:100%!important;box-sizing:border-box!important;overflow:hidden!important;font-size:inherit!important}.node-config-panel .vlan-mode-selector *{font-size:inherit!important}.node-config-panel .vlan-mode-grid{grid-template-columns:1fr!important;gap:6px!important;max-width:100%!important;width:100%!important}.node-config-panel .vlan-mode-card{padding:6px!important;max-width:100%!important;min-width:0!important;width:100%!important;box-sizing:border-box!important;font-size:inherit!important}.node-config-panel .vlan-mode-card *{font-size:inherit!important}.node-config-panel input[type=text],.node-config-panel input[type=number],.node-config-panel select{font-size:10px!important;padding:5px 6px!important}.node-config-panel .vlan-mode-title{font-size:10px!important}.node-config-panel .vlan-mode-description{font-size:9px!important}.node-config-panel .vlan-mode-note{font-size:8px!important}h1{font-size:1.4rem}h2{font-size:1.1rem}h3{font-size:.95rem}h4{font-size:.9rem}h5{font-size:.85rem}*{max-font-size:1.4rem!important}.nav{font-size:.9rem}.nav a{padding:5px 7px;font-size:.85rem!important}.btn{padding:7px 12px;font-size:.85rem!important}table{font-size:.8rem}th,td{padding:6px 4px;font-size:.8rem!important}.modal-content>div:has(input),.modal-content>div:has(select),.modal-content>div:has(textarea){margin-bottom:12px!important}.modal-content input,.modal-content select,.modal-content textarea{width:100%!important;box-sizing:border-box}.modal-content{font-size:.75rem!important}.modal-content *{font-size:inherit!important}.modal-content label{font-size:.8rem!important}.modal-content h3{font-size:.95rem!important}.modal-content h4{font-size:.85rem!important}.modal-content h5{font-size:.8rem!important}.modal-content p,.modal-content div,.modal-content span,.modal-content strong{font-size:.75rem!important}.modal-content small,.modal-content code{font-size:.7rem!important}.modal-content>div:has(button){display:flex!important;flex-direction:column!important;gap:8px!important}.modal-content .btn{width:100%;font-size:.85rem!important}.badge{font-size:.7rem!important;padding:3px 8px}p[style*=fontSize],div[style*=fontSize],span[style*=fontSize],strong[style*=fontSize]{font-size:.8rem!important}h4[style*=fontSize],h5[style*=fontSize]{font-size:.85rem!important}code[style*=fontSize]{font-size:.75rem!important}.config-row{grid-template-columns:1fr;gap:4px;padding:6px 0;border-bottom:1px solid var(--border)}.config-row:last-child{border-bottom:none}.config-row strong{font-size:.75rem!important;text-transform:uppercase;letter-spacing:.3px}.config-row span{font-size:.8rem!important}.config-row code{font-size:.7rem!important}.config-panel{padding:10px!important;font-size:.8rem!important}.config-panel h4{font-size:.9rem!important;margin-bottom:8px!important}.config-panel h5{font-size:.85rem!important;margin:0 0 6px!important}.config-panel strong,.config-panel span,.config-panel div{font-size:.75rem!important}.config-panel code{font-size:.7rem!important}.config-panel .badge{font-size:.65rem!important;padding:2px 6px}.vlan-mode-grid{grid-template-columns:1fr;gap:8px}.vlan-mode-selector{padding:8px}.vlan-mode-card{padding:10px}.vlan-mode-title{font-size:.85rem}.vlan-mode-description{font-size:.75rem}.vlan-mode-note{font-size:.7rem}}.toast-container{position:fixed;top:80px;right:20px;z-index:9999;display:flex;flex-direction:column;gap:12px;max-width:400px;pointer-events:none}.toast{display:flex;align-items:center;gap:12px;background:var(--card);border:1px solid var(--border);border-radius:12px;padding:16px;box-shadow:var(--shadow-lg);pointer-events:all;animation:slideIn .3s ease-out;min-width:300px}@keyframes slideIn{0%{transform:translate(400px);opacity:0}to{transform:translate(0);opacity:1}}.toast-icon{flex-shrink:0;width:20px;height:20px;display:flex;align-items:center;justify-content:center}.toast-icon svg{width:100%;height:100%}.toast-message{flex:1;font-size:.95rem;line-height:1.4;color:var(--text)}.toast-close{flex-shrink:0;width:20px;height:20px;padding:0;border:none;background:transparent;color:var(--muted);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:color .2s ease}.toast-close:hover{color:var(--text)}.toast-close svg{width:16px;height:16px}.toast-success{border-left:4px solid var(--success)}.toast-success .toast-icon{color:var(--success)}.toast-error{border-left:4px solid var(--danger)}.toast-error .toast-icon{color:var(--danger)}.toast-warning{border-left:4px solid var(--warning)}.toast-warning .toast-icon{color:var(--warning)}.toast-info{border-left:4px solid var(--info)}.toast-info .toast-icon{color:var(--info)}@media (max-width: 768px){.toast-container{right:16px;left:16px;max-width:none}.toast{min-width:0}}.confirm-modal{max-width:500px}.confirm-modal-header{padding:20px 24px;border-bottom:1px solid var(--border);border-top-left-radius:16px;border-top-right-radius:16px;margin:-32px -32px 0}.confirm-modal-danger{background:#ef44441a;border-left:4px solid var(--danger)}.confirm-modal-warning{background:#f59e0b1a;border-left:4px solid var(--warning)}.confirm-modal-info{background:#3b82f61a;border-left:4px solid var(--info)}.confirm-modal-body{padding:24px 0}.confirm-modal-footer{display:flex;gap:12px;justify-content:flex-end;padding-top:16px;border-top:1px solid var(--border)}@media (max-width: 768px){.confirm-modal{max-width:100%}.confirm-modal-footer{flex-direction:column-reverse}.confirm-modal-footer .btn{width:100%}}