:root{--bg-gradient: radial-gradient(1100px circle at 12% -10%, #232326 0%, transparent 55%), linear-gradient(180deg, #0a0a0c 0%, #0d0d10 100%);--panel: #1a1a1d;--panel-alt: #141416;--card-gradient: linear-gradient(160deg, #202023 0%, #171719 100%);--panel-border: #2f2f33;--text: #e4e4e7;--text-muted: #9a9aa1;--accent: #6b7280;--accent-soft: #71717a;--accent-gradient: linear-gradient(135deg, #3f3f46, #52525b);--accent-gradient-hover: linear-gradient(135deg, #52525b, #71717a);--success: #22c55e;--warning: #f59e0b;--danger: #f87171;--dot-stale: #52525b;--track-bg: rgba(161, 161, 170, .15);--shadow-card: 0 1px 2px rgba(0, 0, 0, .3);--shadow-card-hover: 0 10px 28px rgba(0, 0, 0, .35);--shadow-panel: 0 12px 32px rgba(0, 0, 0, .35);--header-gradient: linear-gradient(120deg, #0d0d0f 0%, #232326 55%, #17171a 100%);--header-text: #f4f4f5;--header-text-muted: rgba(244, 244, 245, .68);--header-border: rgba(255, 255, 255, .08);--header-chip-bg: rgba(255, 255, 255, .08);--header-chip-border: rgba(255, 255, 255, .16);--header-chip-hover: rgba(255, 255, 255, .16)}:root[data-theme=light]{--bg-gradient: radial-gradient(1100px circle at 12% -10%, #f4f4f5 0%, transparent 55%), linear-gradient(180deg, #e4e4e7 0%, #f4f4f5 100%);--panel: #f4f4f5;--panel-alt: #e4e4e7;--card-gradient: linear-gradient(160deg, #ffffff 0%, #f4f4f5 100%);--panel-border: #d4d4d8;--text: #18181b;--text-muted: #52525b;--accent: #3f3f46;--accent-soft: #27272a;--accent-gradient: linear-gradient(135deg, #3f3f46, #52525b);--accent-gradient-hover: linear-gradient(135deg, #27272a, #3f3f46);--success: #157347;--warning: #9a5b09;--danger: #b42318;--dot-stale: #a1a1aa;--track-bg: rgba(82, 82, 91, .16);--shadow-card: 0 1px 2px rgba(22, 32, 46, .08);--shadow-card-hover: 0 10px 22px rgba(22, 32, 46, .12);--shadow-panel: 0 12px 26px rgba(22, 32, 46, .1)}*{box-sizing:border-box}body{margin:0;min-height:100vh;font-family:system-ui,sans-serif;background:var(--bg-gradient);background-attachment:fixed;color:var(--text);transition:background .15s ease,color .15s ease}.login-page{position:relative;display:flex;align-items:center;justify-content:center;min-height:100vh}.login-page-toggle{position:absolute;top:1.25rem;right:1.5rem}.login-form{display:flex;flex-direction:column;gap:.75rem;background:var(--card-gradient);border:1px solid var(--panel-border);padding:2rem;border-radius:10px;box-shadow:var(--shadow-panel);width:320px}.login-form h1{margin:0 0 .25rem;font-size:1.25rem}.login-form label{display:flex;flex-direction:column;gap:.25rem;font-size:.9rem}.login-form input{padding:.5rem;border-radius:6px;border:1px solid var(--panel-border);background:var(--panel-alt);color:var(--text)}.login-form button{padding:.6rem;border-radius:6px;border:none;background:var(--accent-gradient);color:#fff;font-weight:600;cursor:pointer}.login-form button:hover{background:var(--accent-gradient-hover)}.error{color:var(--danger)}.app-header{display:flex;justify-content:space-between;align-items:center;padding:.9rem 1.5rem;background:var(--header-gradient);border-bottom:1px solid var(--header-border);box-shadow:0 2px 10px #0003}.app-header h1{font-size:1.05rem;margin:0;letter-spacing:.01em;color:var(--header-text)}.app-title-link{color:inherit;text-decoration:none}.app-nav{display:flex;gap:.4rem;align-items:center}.app-nav a{color:var(--header-text-muted);text-decoration:none;font-size:.88rem;padding:.4rem .7rem;border-radius:6px;transition:background .15s ease,color .15s ease}.app-nav a:hover{background:var(--header-chip-bg);color:var(--header-text)}.app-nav span{color:var(--header-text-muted);font-size:.85rem;margin-left:.5rem}.app-nav button{background:var(--header-chip-bg);border:1px solid var(--header-chip-border);color:var(--header-text);padding:.4rem .8rem;border-radius:6px;cursor:pointer;font-size:.85rem}.app-nav button:hover{background:var(--header-chip-hover)}.theme-toggle{position:relative;width:48px;height:26px;margin-left:.4rem;border-radius:999px;border:1px solid var(--header-chip-border);background:var(--header-chip-bg);cursor:pointer;transition:background .2s ease}.theme-toggle:hover{background:var(--header-chip-hover)}.theme-toggle.is-dark{background:#1c1e22;border-color:#3a3d42}.theme-toggle.is-dark:hover{background:#24272c}.theme-toggle-knob{position:absolute;top:1px;left:2px;display:flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:50%;background:#fde68a;box-shadow:0 1px 3px #0006;font-size:13px;line-height:1;transition:left .2s ease,background .2s ease}.theme-toggle.is-dark .theme-toggle-knob{left:22px;background:#e5e7eb}.delivered-yes{color:var(--success)}.delivered-no{color:var(--danger)}main{padding:1.5rem}.card-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:1rem}.firewall-card{display:block;background:var(--card-gradient);border:1px solid var(--panel-border);padding:1.1rem 1.2rem;border-radius:10px;text-decoration:none;color:inherit;box-shadow:var(--shadow-card);transition:transform .15s ease,box-shadow .15s ease,border-color .15s ease,background .15s ease,border .15s ease}.firewall-card:hover{transform:translateY(-2px);box-shadow:var(--shadow-card-hover);border-color:var(--accent-soft)}.card-top{display:flex;align-items:flex-start;gap:.6rem;margin-bottom:.9rem}.status-dot{width:9px;height:9px;border-radius:50%;margin-top:.4rem;flex-shrink:0}.status-online{background:var(--success);box-shadow:0 0 0 3px #22c55e2e}.status-stale{background:var(--dot-stale)}.firewall-card h3{margin:0;font-size:1rem}.firewall-card .location{color:var(--text-muted);font-size:.82rem;margin:.15rem 0 0}.metric-list{display:flex;flex-direction:column;gap:.55rem}.metric-head{display:flex;align-items:center;gap:.5rem}.metric-icon{display:flex;color:var(--text-muted);flex-shrink:0}.metric-label{color:var(--text-muted);font-size:.82rem;flex:1}.metric-value{font-weight:600;font-size:.85rem;font-variant-numeric:tabular-nums}.metric-bar{height:4px;margin-left:1.4rem;border-radius:2px;background:var(--track-bg);overflow:hidden}.metric-bar-fill{height:100%;border-radius:2px;transition:width .3s ease}.firewall-card .stale{margin-top:.75rem;font-size:.8rem;color:var(--warning)}.add-firewall-toggle{margin-bottom:1rem;padding:.5rem 1rem;border-radius:6px;border:none;background:var(--accent-gradient);color:#fff;font-weight:600;cursor:pointer}.add-firewall-toggle:hover{background:var(--accent-gradient-hover)}.add-firewall-form{background:var(--card-gradient);border:1px solid var(--panel-border);padding:1.1rem;border-radius:10px;margin-bottom:1.5rem;max-width:640px}.add-firewall-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:.5rem;margin-bottom:.5rem}.add-firewall-form input,.add-firewall-form select{padding:.5rem;border-radius:6px;border:1px solid var(--panel-border);background:var(--panel-alt);color:var(--text)}.form-hint{color:var(--text-muted);font-size:.85rem;margin:.75rem 0 .5rem}.rule-scope-list{display:flex;flex-wrap:wrap;gap:.4rem 1rem;margin:.4rem 0 .6rem 1.4rem}.rule-scope-option{display:flex;align-items:center;gap:.4rem;font-size:.88rem;margin-top:.4rem;cursor:pointer}.add-firewall-actions{display:flex;gap:.5rem;margin-top:.5rem}.add-firewall-actions button[type=submit]{background:var(--accent-gradient);color:#fff;border:none;padding:.5rem 1rem;border-radius:6px;font-weight:600;cursor:pointer}.add-firewall-actions button[type=submit]:hover{background:var(--accent-gradient-hover)}.add-firewall-actions button[type=button]{background:transparent;border:1px solid var(--panel-border);color:var(--text);padding:.5rem 1rem;border-radius:6px;cursor:pointer}.log-viewer{background:var(--card-gradient);border:1px solid var(--panel-border);border-radius:10px;padding:1.25rem 1.5rem 1.5rem}.back-link{color:var(--text);text-decoration:none;font-size:.9rem}.back-link:hover{text-decoration:underline}.log-viewer h2{margin-top:0;font-size:1.1rem}.log-viewer table{width:100%;border-collapse:collapse;margin-top:1rem;font-size:.9rem}.log-viewer th,.log-viewer td{text-align:left;padding:.55rem .6rem;border-bottom:1px solid var(--panel-border)}.log-viewer th{cursor:pointer;-webkit-user-select:none;user-select:none;color:var(--text-muted);font-weight:600;font-size:.78rem;text-transform:uppercase;letter-spacing:.03em}.log-viewer tbody tr:hover{background:var(--track-bg)}.filters{display:flex;gap:.5rem;margin-top:1rem}.filters input{padding:.4rem;border-radius:6px;border:1px solid var(--panel-border);background:var(--panel-alt);color:var(--text)}.user-create-form{display:flex;gap:.5rem;margin-top:1rem;flex-wrap:wrap}.user-create-form input,.user-create-form select,.log-viewer select{padding:.4rem;border-radius:6px;border:1px solid var(--panel-border);background:var(--panel-alt);color:var(--text)}.user-create-form button{padding:.4rem .8rem;border-radius:6px;border:none;background:var(--accent-gradient);color:#fff;font-weight:600;cursor:pointer}.user-create-form button:hover{background:var(--accent-gradient-hover)}.password-reset-cell{display:flex;gap:.4rem}.password-reset-cell input{width:140px}.delete-button{background:transparent;border:1px solid #7f1d1d;color:var(--danger);padding:.3rem .6rem;border-radius:6px;cursor:pointer}.delete-button:hover{background:#f8717114}.edit-button{background:transparent;border:1px solid var(--panel-border);color:var(--text);padding:.3rem .6rem;border-radius:6px;cursor:pointer;margin-right:.4rem}.edit-button:hover{background:var(--track-bg)}.password-field{display:flex;align-items:center;gap:.3rem}.password-field input{flex:1;min-width:0}.password-field-toggle{flex-shrink:0;background:transparent;border:1px solid var(--panel-border);border-radius:6px;padding:.4rem .5rem;cursor:pointer;line-height:1}.password-field-toggle:hover{background:var(--track-bg)}