:root{--dhw-primary: #153362;--dhw-secondary: #2353A1;--dhw-white: #FFFFFF;--dhw-black: #000000;--dhw-mint: #ABD4C4;--dhw-mint-light: #C7E4D8;--dhw-green-dark: #2A5D49;--dhw-green: #58AD83;--dhw-blue-light: #9FCAE4;--dhw-danger: #E64254;--dhw-danger-light: #F2A69F;--dhw-warning: #FBD235;--dhw-warning-light: #FCE393;--dhw-success: #58AD83;--dhw-bg: #F8F9FA;--dhw-light: #F3F4F6;--dhw-border: #E5E7EB;--dhw-text: #1F2937;--dhw-text-light: #6B7280;--spacing: 24px}*{margin:0;padding:0;box-sizing:border-box}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Helvetica,sans-serif;background:var(--dhw-bg);color:#333;line-height:1.6}.app{display:flex;min-height:100vh}.main{flex:1;padding:var(--spacing);max-width:1400px}.card,.device-card,.action-card,.stat-card,.vpn-section,.control-item,.wlan-card{background:#fff;border-radius:12px;padding:var(--spacing);margin-bottom:var(--spacing);box-shadow:0 1px 3px #1533621a;border-left:4px solid var(--dhw-mint);border-top:none;border-right:1px solid transparent;border-bottom:1px solid transparent}.card h2,.card h3{color:var(--dhw-primary);margin-bottom:16px}.btn{padding:10px 20px;border:none;border-radius:8px;font-weight:600;cursor:pointer;transition:all .2s;font-size:15px;display:inline-flex;align-items:center;justify-content:center;gap:.375rem}.btn-primary{background:var(--dhw-primary);color:#fff}.btn-primary:hover:not(:disabled){background:var(--dhw-secondary)}.btn-primary:disabled{opacity:.5;cursor:not-allowed}.btn-secondary{background:var(--dhw-mint);color:var(--dhw-primary);border:1px solid transparent}.btn-secondary:hover:not(:disabled){background:var(--dhw-mint-light)}.btn-secondary:disabled{opacity:.5;cursor:not-allowed}.btn-danger{background:var(--dhw-danger);color:#fff}.btn-danger:hover:not(:disabled){opacity:.9}.btn-danger:disabled{opacity:.5;cursor:not-allowed}.btn-success{background:var(--dhw-success);color:#fff}.btn-success:hover:not(:disabled){opacity:.9}.btn-success:disabled{opacity:.5;cursor:not-allowed}.btn-small{padding:8px 16px;font-size:14px}input,textarea,select{width:100%;padding:12px;border:2px solid #E5E7EB;border-radius:8px;font-size:16px;margin:8px 0;font-family:inherit}input:focus,textarea:focus,select:focus{outline:none;border-color:var(--dhw-primary);box-shadow:0 0 0 3px #abd4c44d}label{display:block;margin:16px 0 8px;color:var(--dhw-primary);font-weight:700}label:first-child{margin-top:0}.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:var(--spacing)}.grid-3{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}.header{background:#fff;padding:var(--spacing);border-bottom:3px solid var(--dhw-mint);margin:calc(var(--spacing) * -1) calc(var(--spacing) * -1) var(--spacing);display:flex;justify-content:space-between;align-items:center;position:relative}.user-info{color:#666;font-size:14px;position:relative;z-index:1}.user-info strong{color:var(--dhw-primary);font-size:24px;display:block;margin-bottom:4px}.info-box{background:#fff8e1;border-left:4px solid var(--dhw-yellow);padding:16px;border-radius:8px;margin-bottom:16px;font-size:14px}.sidebar{width:260px;background:var(--dhw-primary);color:#fff;padding:var(--spacing);display:flex;flex-direction:column}.logo-container{background:var(--dhw-mint);padding:16px;border-radius:12px;margin-bottom:var(--spacing);text-align:center}.logo-svg{max-width:140px;height:auto;margin-bottom:8px}.logo-subtitle{margin-top:8px;font-size:13px;color:var(--dhw-primary);font-weight:600;letter-spacing:.3px}nav{flex:1;display:flex;flex-direction:column}.nav-item{padding:12px 16px;margin:4px 0;border-radius:8px;cursor:pointer;transition:all .2s;display:flex;align-items:center;gap:12px;text-decoration:none;color:#fff}.nav-item:hover{background:#ffffff1a}.nav-item.router-link-active{background:var(--dhw-mint);color:var(--dhw-primary);font-weight:700}.nav-spacer{flex:1}.login-container{display:flex;align-items:center;justify-content:center;min-height:100vh;background:var(--dhw-bg)}.login-card{max-width:420px;width:100%}.login-card h1{text-align:center;color:var(--dhw-primary);margin:var(--spacing) 0 8px}.login-subtitle{text-align:center;color:#666;margin-bottom:24px;font-size:14px}.toggle-switch{position:relative;width:60px;height:32px}.toggle-switch input{opacity:0;width:0;height:0;margin:0}.slider{position:absolute;cursor:pointer;top:0;left:0;right:0;bottom:0;background-color:#ccc;transition:.3s;border-radius:32px}.slider:before{position:absolute;content:"";height:24px;width:24px;left:4px;bottom:4px;background-color:#fff;transition:.3s;border-radius:50%}input:checked+.slider{background-color:var(--dhw-green)}input:checked+.slider:before{transform:translate(28px)}.status{display:inline-block;padding:4px 12px;border-radius:20px;font-size:13px;font-weight:700;margin-top:4px}.status.active{background:var(--dhw-mint-light);color:var(--dhw-green)}.status.inactive{background:#fee;color:var(--dhw-red)}.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}.modal-content{background:#fff;border-radius:12px;padding:32px;max-width:500px;width:90%;max-height:90vh;overflow-y:auto}.modal-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:24px}.modal-close{background:none;border:none;font-size:28px;cursor:pointer;color:#999;line-height:1}.modal-actions{display:flex;gap:12px;margin-top:24px}@media (max-width: 768px){.dashboard-content,.devices-content,.credentials-content,.home-control-content,.wlan-content{margin-left:0!important}.dashboard-container,.devices-container,.credentials-container,.home-control-container,.wlan-container{padding:0 1rem 1rem!important}}#app{min-height:100vh}