:root{--bg-primary: #000000;--bg-secondary: #1a1a1a;--bg-tertiary: #252525;--accent-primary: #0080ff;--accent-wan: #ff6b00;--accent-lan: #00cc66;--accent-wifi: #9b59b6;--accent-connection: #0080ff;--status-up: #00ff00;--status-down: #ff0000;--status-warning: #ff8800;--text-primary: #ffffff;--text-secondary: #808080;--text-subtle: hsl(213deg 10% 50%);--border-default: #404040;--border-active: #0080ff;--border-error: #ff0000;--border-radius: 8px;--border-radius-sm: 4px;--transition-fast: .15s ease;--transition-normal: .3s ease}*{margin:0;padding:0;box-sizing:border-box}html,body{height:100%;width:100%}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,sans-serif;background:var(--bg-primary);color:var(--text-primary);line-height:1.5}.app{display:flex;flex-direction:column;min-height:100vh}.topbar{position:fixed;top:0;left:0;right:0;height:75px;background:var(--bg-secondary);border-bottom:1px solid var(--border-default);display:flex;align-items:center;justify-content:space-between;padding:0 30px;gap:20px;z-index:110}.sidebar{position:fixed;left:0;top:75px;bottom:0;width:60px;background:var(--bg-secondary);border-right:1px solid var(--border-default);display:flex;flex-direction:column;z-index:100}.sidebar-nav{display:flex;flex-direction:column;gap:4px;padding:12px 8px;flex:1}.nav-link{position:relative;display:flex;align-items:center;justify-content:center;padding:12px;border-radius:var(--border-radius);color:var(--text-secondary);text-decoration:none;transition:all var(--transition-fast)}.nav-link svg{flex-shrink:0;width:24px;height:24px}.nav-link span{position:absolute;left:100%;margin-left:12px;padding:6px 12px;background:var(--bg-tertiary);border:1px solid var(--border-default);border-radius:var(--border-radius-sm);color:var(--text-primary);font-size:.9em;white-space:nowrap;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .15s ease,visibility .15s ease;z-index:200}.nav-link span:before{content:"";position:absolute;right:100%;top:50%;transform:translateY(-50%);border:6px solid transparent;border-right-color:var(--border-default)}.nav-link span:after{content:"";position:absolute;right:100%;top:50%;transform:translateY(-50%);margin-right:-1px;border:6px solid transparent;border-right-color:var(--bg-tertiary)}.nav-link:hover span{opacity:1;visibility:visible}.nav-link:hover{color:var(--text-primary);background:var(--bg-tertiary)}.nav-link.active{color:var(--accent-primary);background:#0080ff26}.sidebar-overlay{display:none;position:fixed;top:0;right:0;bottom:0;left:0;background:#0009;z-index:99}.app-content{margin-left:60px;margin-top:75px;display:flex;flex-direction:column;flex:1;min-height:calc(100vh - 75px)}.topbar-left{display:flex;align-items:center;gap:15px}.topbar-brand{display:flex;align-items:center;gap:12px;text-decoration:none}.topbar-logo{height:42px;width:auto}.topbar-title{color:var(--accent-primary);font-size:1.4em;font-weight:600}.topbar-right{display:flex;align-items:center;gap:15px}.hamburger{display:none;background:transparent;border:none;color:var(--text-secondary);cursor:pointer;padding:8px;border-radius:var(--border-radius-sm)}.hamburger:hover{color:var(--text-primary);background:var(--bg-tertiary)}.hamburger svg{width:24px;height:24px}.btn-sm{padding:6px 12px;font-size:.85em}.logout-icon{width:16px;height:16px}@media(max-width:768px){.sidebar{transform:translate(-100%);width:200px}.sidebar.open{transform:translate(0)}.sidebar .nav-link{justify-content:flex-start;gap:12px}.sidebar .nav-link span{position:static;margin-left:0;padding:0;background:none;border:none;opacity:1;visibility:visible}.sidebar .nav-link span:before,.sidebar .nav-link span:after{display:none}.sidebar-overlay{display:block;top:75px}.app-content{margin-left:0}.hamburger{display:flex}}.main{flex:1;padding:30px;overflow:auto}.container{max-width:1400px;margin:0 auto}.page-header{margin-bottom:30px}.page-title{font-size:1.5em;font-weight:600;color:var(--text-primary);margin-bottom:5px}.page-subtitle{color:var(--text-secondary);font-size:.95em}.btn{padding:8px 16px;background:transparent;color:var(--text-secondary);border:1px solid var(--border-default);border-radius:var(--border-radius-sm);cursor:pointer;font-size:.9em;transition:all var(--transition-fast);text-decoration:none;display:inline-flex;align-items:center;gap:6px}.btn:hover{border-color:var(--accent-primary);color:var(--accent-primary)}.btn-primary{background:var(--accent-primary);color:var(--text-primary);border-color:var(--accent-primary)}.btn-primary:hover{background:#06c;border-color:#06c;color:var(--text-primary)}.btn-success{background:var(--status-up);color:#000;border-color:var(--status-up)}.btn-success:hover{background:#0c0;border-color:#0c0}.btn-danger{background:transparent;color:var(--status-down);border-color:var(--status-down)}.btn-danger:hover{background:#ff00001a}.btn:disabled{opacity:.5;cursor:not-allowed}.btn.active{background:#0080ff1a;border-color:var(--accent-primary);color:var(--accent-primary)}.card{background:var(--bg-secondary);border:1px solid var(--border-default);border-radius:var(--border-radius);padding:20px;transition:border-color var(--transition-fast)}.card:hover{border-color:var(--accent-primary)}.card-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:15px;padding-bottom:15px;border-bottom:1px solid var(--border-default)}.card-title{font-size:1.2em;font-weight:600;color:var(--accent-primary)}.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}@media(max-width:1200px){.grid-4{grid-template-columns:repeat(2,1fr)}}@media(max-width:768px){.grid-2,.grid-3,.grid-4{grid-template-columns:1fr}}.status-badge{padding:4px 12px;border-radius:20px;font-size:.85em;font-weight:500}.status-up{background:#0f03;color:var(--status-up);border:1px solid var(--status-up)}.status-down{background:#f003;color:var(--status-down);border:1px solid var(--status-down)}.status-warning{background:#f803;color:var(--status-warning);border:1px solid var(--status-warning)}.status-unknown{background:#80808033;color:var(--text-secondary);border:1px solid var(--text-secondary)}.stats-row{display:flex;justify-content:space-between;padding:8px 0;border-bottom:1px solid var(--border-default)}.stats-row:last-child{border-bottom:none}.stats-label{color:var(--text-secondary);font-size:.9em}.stats-value{color:var(--text-primary);font-family:Monaco,Menlo,monospace;font-size:.9em}.form-group{margin-bottom:15px}.form-label{display:block;color:var(--text-secondary);font-size:.85em;margin-bottom:6px}.form-input{width:100%;padding:10px 12px;background:var(--bg-primary);border:1px solid var(--border-default);border-radius:var(--border-radius-sm);color:var(--text-primary);font-size:.95em;transition:border-color var(--transition-fast)}.form-input:focus{outline:none;border-color:var(--accent-primary)}.form-input::-moz-placeholder{color:var(--text-subtle)}.form-input::placeholder{color:var(--text-subtle)}.form-select{width:100%;padding:10px 12px;background:var(--bg-primary);border:1px solid var(--border-default);border-radius:var(--border-radius-sm);color:var(--text-primary);font-size:.95em;cursor:pointer}.form-select:focus{outline:none;border-color:var(--accent-primary)}.form-error{color:var(--status-down);font-size:.85em;margin-top:5px}.modal-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#000c;display:flex;align-items:center;justify-content:center;z-index:1000}.modal{background:var(--bg-secondary);border:1px solid var(--border-default);border-radius:var(--border-radius);padding:25px;min-width:400px;max-width:600px;max-height:80vh;overflow-y:auto}.modal-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px;padding-bottom:15px;border-bottom:1px solid var(--border-default)}.modal-title{font-size:1.2em;font-weight:600;color:var(--text-primary)}.modal-close{background:transparent;border:none;color:var(--text-secondary);font-size:1.5em;cursor:pointer;padding:0;line-height:1}.modal-close:hover{color:var(--text-primary)}.modal-footer{display:flex;justify-content:flex-end;gap:10px;margin-top:20px;padding-top:15px;border-top:1px solid var(--border-default)}.tabs{display:flex;border-bottom:1px solid var(--border-default);margin-bottom:15px}.tab{padding:10px 20px;background:transparent;border:none;color:var(--text-secondary);cursor:pointer;font-size:.95em;border-bottom:2px solid transparent;transition:all var(--transition-fast)}.tab:hover{color:var(--text-primary)}.tab.active{color:var(--accent-primary);border-bottom-color:var(--accent-primary)}.login-container{display:flex;align-items:center;justify-content:center;min-height:100vh;background:var(--bg-primary)}.login-box{background:var(--bg-secondary);border:1px solid var(--border-default);border-radius:var(--border-radius);padding:40px;width:100%;max-width:400px}.login-header{text-align:center;margin-bottom:30px}.login-logo{height:60px;margin-bottom:15px}.login-title{font-size:1.5em;color:var(--accent-primary);margin-bottom:5px}.login-subtitle{color:var(--text-secondary);font-size:.9em}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-track{background:var(--bg-primary)}::-webkit-scrollbar-thumb{background:var(--border-default);border-radius:4px}::-webkit-scrollbar-thumb:hover{background:var(--text-subtle)}.text-muted{color:var(--text-secondary)}.text-center{text-align:center}.text-success{color:var(--status-up)}.text-danger{color:var(--status-down)}.text-warning{color:var(--status-warning)}.mt-1{margin-top:5px}.mt-2{margin-top:10px}.mt-3{margin-top:15px}.mt-4{margin-top:20px}.mb-1{margin-bottom:5px}.mb-2{margin-bottom:10px}.mb-3{margin-bottom:15px}.mb-4{margin-bottom:20px}.flex{display:flex}.flex-col{flex-direction:column}.items-center{align-items:center}.justify-between{justify-content:space-between}.gap-2{gap:10px}.gap-3{gap:15px}.gap-4{gap:20px}.user-info{display:flex;align-items:center;gap:8px;color:var(--text-secondary);font-size:.9em}.user-icon{width:20px;height:20px;stroke:var(--text-secondary)}.stat-card{background:var(--bg-secondary);border:1px solid var(--border-default);border-radius:var(--border-radius);padding:20px;transition:border-color var(--transition-fast)}.stat-card:hover{border-color:var(--accent-primary)}.stat-label{color:var(--text-secondary);font-size:.85em;margin-bottom:8px}.stat-value{font-size:2em;font-weight:600;color:var(--text-primary)}.chart-container{background:var(--bg-secondary);border:1px solid var(--border-default);border-radius:var(--border-radius);padding:20px}.chart-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px}.chart-title{font-size:1.1em;font-weight:600;color:var(--text-primary)}