/* WGZ Portal v2 — Design System
   Single CSS file, CSS custom properties for theming.
   Node.js can validate JS files independently. */

:root {
  --bg: #080c14;
  --surface: #0f1520;
  --surface-2: #161f2e;
  --surface-3: #1e293b;
  --border: #1e293b;
  --border-light: rgba(255,255,255,.06);
  --text: #e2e8f0;
  --text-muted: #94a3b8;
  --text-dim: #64748b;
  --blue: #3b82f6;
  --green: #22c55e;
  --red: #ef4444;
  --amber: #f59e0b;
  --purple: #8b5cf6;
  --cyan: #06b6d4;
  --radius: 8px;
  --radius-sm: 5px;
  --shadow: 0 4px 24px rgba(0,0,0,.3);
  --font: system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono: 'SF Mono', 'Fira Code', 'JetBrains Mono', monospace;
}

* { margin:0; padding:0; box-sizing:border-box; }
html, body { height:100%; overflow:hidden; }
body { font-family:var(--font); background:var(--bg); color:var(--text); font-size:13px; line-height:1.5; }

/* ═══ LOGIN PAGE ═══ */
.login-page { display:flex; align-items:center; justify-content:center; height:100vh; background:linear-gradient(135deg, #080c14 0%, #0c1829 50%, #0a1020 100%); }
.login-card { width:380px; padding:40px; background:var(--surface); border:1px solid var(--border); border-radius:12px; box-shadow:var(--shadow); text-align:center; }
.login-logo { margin-bottom:16px; color:var(--blue); }
.login-card h1 { font-size:20px; font-weight:700; margin-bottom:4px; }
.login-subtitle { font-size:12px; color:var(--text-dim); margin-bottom:24px; }
.login-error { background:rgba(239,68,68,.1); border:1px solid rgba(239,68,68,.2); color:#fca5a5; padding:8px 12px; border-radius:var(--radius-sm); font-size:12px; margin-bottom:16px; }
.login-card label { display:block; text-align:left; font-size:11px; color:var(--text-muted); font-weight:600; margin:12px 0 4px; text-transform:uppercase; letter-spacing:.05em; }
.login-card input { width:100%; padding:10px 12px; border:1px solid var(--border); border-radius:var(--radius-sm); background:var(--surface-2); color:var(--text); font-size:13px; outline:none; transition:border-color .15s; }
.login-card input:focus { border-color:var(--blue); }
.login-card button { width:100%; padding:10px; border:none; border-radius:var(--radius-sm); background:var(--blue); color:#fff; font-size:13px; font-weight:600; cursor:pointer; margin-top:20px; transition:background .15s; }
.login-card button:hover { background:#2563eb; }
.login-footer { margin-top:24px; font-size:10px; color:var(--text-dim); line-height:1.8; }
.cmmc-tag { display:inline-block; padding:2px 8px; border-radius:3px; background:rgba(59,130,246,.1); color:var(--blue); font-size:9px; font-weight:600; letter-spacing:.03em; }

/* ═══ SHELL LAYOUT ═══ */
.shell { display:flex; height:100vh; }

/* ═══ SIDEBAR ═══ */
.sidebar { width:220px; background:var(--surface); border-right:1px solid var(--border); display:flex; flex-direction:column; flex-shrink:0; }
.sb-header { padding:16px 18px; display:flex; align-items:center; gap:10px; font-size:15px; font-weight:700; color:var(--text); border-bottom:1px solid var(--border); }
.sb-header svg { color:var(--blue); }
.sb-section { padding:8px 0; }
.sb-label { padding:8px 18px 4px; font-size:10px; font-weight:700; color:var(--text-dim); text-transform:uppercase; letter-spacing:.08em; }
.sb-item { display:flex; align-items:center; gap:10px; padding:7px 18px; color:var(--text-muted); cursor:pointer; transition:all .12s; text-decoration:none; font-size:12px; font-weight:500; border-left:2px solid transparent; }
.sb-item:hover { color:var(--text); background:rgba(255,255,255,.03); }
.sb-item.active { color:var(--text); background:rgba(59,130,246,.06); border-left-color:var(--blue); }
.sb-item svg { flex-shrink:0; opacity:.6; }
.sb-item.active svg { opacity:1; color:var(--blue); }
.sb-footer { margin-top:auto; padding:12px 14px; border-top:1px solid var(--border); display:flex; align-items:center; justify-content:space-between; }
.sb-user { display:flex; align-items:center; gap:10px; }
.sb-avatar { width:30px; height:30px; border-radius:50%; background:var(--surface-3); display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:700; color:var(--blue); }
.sb-username { font-size:12px; font-weight:600; }
.sb-role { font-size:10px; color:var(--text-dim); text-transform:capitalize; }
.sb-logout { color:var(--text-dim); transition:color .15s; }
.sb-logout:hover { color:var(--red); }

/* ═══ MAIN CONTENT ═══ */
.content { flex:1; overflow-y:auto; padding:20px; }
.tab-pane { display:none; }
.tab-pane.active { display:block; }
.tab-placeholder { padding:60px 20px; text-align:center; color:var(--text-dim); font-size:13px; }

/* ═══ CARDS ═══ */
.card { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); margin-bottom:16px; overflow:hidden; }
.card-header { display:flex; align-items:center; padding:0; border-bottom:1px solid var(--border); min-height:42px; }
.card-title { display:flex; align-items:center; gap:8px; padding:8px 14px; font-size:12px; font-weight:700; flex-shrink:0; }
.card-body { padding:16px; }
.accent-bar { display:inline-block; width:3px; height:16px; border-radius:2px; }

/* ═══ REMOTE CONSOLE ═══ */
.rc-panel { border:1px solid rgba(59,130,246,.15); }
.rc-panel .card-header { flex-wrap:wrap; background:rgba(10,15,28,.6); }
.rc-tabs { display:flex; align-items:center; gap:2px; overflow-x:auto; flex:1; min-width:0; padding:0 4px; }
.rc-tab { display:flex; align-items:center; gap:6px; padding:6px 12px; font-size:11px; font-weight:600; cursor:pointer; border-bottom:2px solid transparent; color:var(--text-muted); transition:all .15s; white-space:nowrap; border-radius:5px 5px 0 0; }
.rc-tab:hover { color:var(--text); background:rgba(255,255,255,.04); }
.rc-tab.active { color:var(--text); border-bottom-color:var(--blue); background:rgba(59,130,246,.06); }
.rc-tab .dot { width:8px; height:8px; border-radius:50%; flex-shrink:0; box-shadow:0 0 4px currentColor; }
.rc-tab .proto { font-size:8px; font-weight:800; padding:2px 5px; border-radius:3px; background:rgba(255,255,255,.06); letter-spacing:.03em; }
.rc-tab .close { margin-left:6px; opacity:.3; cursor:pointer; font-size:14px; line-height:1; width:18px; height:18px; display:flex; align-items:center; justify-content:center; border-radius:3px; transition:all .15s; }
.rc-tab .close:hover { opacity:1; color:var(--red); background:rgba(239,68,68,.1); }
.rc-toolbar { display:flex; align-items:center; gap:6px; padding:6px 12px; flex-shrink:0; }
.rc-clipboard { display:none; padding:8px 14px; background:rgba(15,23,42,.8); border-bottom:1px solid var(--border); gap:8px; align-items:center; backdrop-filter:blur(4px); }
.rc-clipboard.show { display:flex; }
.rc-clipboard input { flex:1; padding:7px 12px; border:1px solid var(--border); border-radius:var(--radius-sm); background:var(--surface-2); color:var(--text); font-family:var(--mono); font-size:11px; outline:none; }
.rc-clipboard input:focus { border-color:var(--blue); box-shadow:0 0 0 2px rgba(59,130,246,.15); }
.rc-body { display:none; background:#060a12; border-top:1px solid rgba(255,255,255,.05); position:relative; height:520px; overflow:hidden; resize:vertical; }
.rc-body.show { display:block; }
.rc-session { position:absolute; inset:0; display:none; }
.rc-session.active { display:block; }
.rc-empty { display:flex; flex-direction:column; align-items:center; justify-content:center; height:100%; color:var(--text-dim); font-size:13px; position:absolute; inset:0; gap:8px; }
.rc-empty strong { color:var(--blue); margin:0 3px; }
.rc-empty::before { content:''; display:block; width:48px; height:48px; border:2px dashed rgba(255,255,255,.08); border-radius:12px; margin-bottom:4px; }

/* ═══ CONNECTION CARDS (Redesigned) ═══ */

/* Loading state */
.conn-loading { display:flex; align-items:center; justify-content:center; gap:12px; padding:48px 20px; color:var(--text-dim); font-size:13px; }
.conn-loading-pulse { width:8px; height:8px; border-radius:50%; background:var(--blue); animation:conn-pulse 1.2s ease infinite; }
@keyframes conn-pulse { 0%,100%{opacity:.3;transform:scale(.8)} 50%{opacity:1;transform:scale(1.2)} }
.conn-error { padding:40px; text-align:center; color:var(--red); font-size:13px; }
.conn-empty { padding:60px 20px; text-align:center; color:var(--text-dim); }
.conn-empty-icon { font-size:40px; margin-bottom:12px; opacity:.3; }

/* Summary bar */
.conn-summary { display:flex; align-items:center; gap:20px; padding:12px 16px; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); margin-bottom:18px; }
.conn-summary-stat { display:flex; flex-direction:column; align-items:center; gap:1px; }
.conn-summary-num { font-size:18px; font-weight:800; color:var(--text); }
.conn-summary-label { font-size:9px; color:var(--text-dim); text-transform:uppercase; letter-spacing:.06em; font-weight:600; }
.conn-add-btn { display:inline-flex; align-items:center; gap:6px; padding:7px 16px; border:1px dashed rgba(255,255,255,.15); border-radius:var(--radius-sm); background:transparent; color:var(--text-muted); font-size:12px; font-weight:600; cursor:pointer; transition:all .2s; font-family:var(--font); }
.conn-add-btn:hover { border-color:var(--blue); color:var(--blue); background:rgba(59,130,246,.05); }

/* Group headers */
.conn-group { margin-bottom:24px; }
.conn-group-header { display:flex; align-items:center; gap:8px; margin-bottom:12px; }
.conn-group-icon { display:flex; align-items:center; justify-content:center; width:28px; height:28px; border-radius:6px; background:rgba(255,255,255,.04); }
.conn-group-name { font-size:13px; font-weight:700; color:var(--text); }
.conn-group-badge { display:inline-flex; align-items:center; justify-content:center; min-width:20px; height:20px; border-radius:10px; font-size:10px; font-weight:700; color:#fff; padding:0 6px; }

/* Card grid */
.conn-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(300px, 1fr)); gap:12px; }

/* Individual card */
.conn-card { position:relative; background:var(--surface); border:1px solid var(--border); border-radius:10px; overflow:hidden; transition:all .2s ease; cursor:default; }
.conn-card:hover { border-color:var(--card-border, rgba(255,255,255,.12)); background:var(--card-bg, var(--surface-2)); transform:translateY(-1px); box-shadow:0 4px 20px rgba(0,0,0,.2); }
.conn-card-accent { position:absolute; left:0; top:0; bottom:0; width:3px; background:var(--card-accent, var(--text-dim)); border-radius:3px 0 0 3px; opacity:.6; transition:opacity .2s; }
.conn-card:hover .conn-card-accent { opacity:1; }
.conn-card-body { padding:14px 16px 12px; }

/* Card top row (icon + name + status) */
.conn-card-top { display:flex; align-items:flex-start; gap:12px; margin-bottom:8px; }
.conn-card-icon { width:40px; height:40px; border-radius:10px; display:flex; align-items:center; justify-content:center; background:var(--card-bg, rgba(255,255,255,.04)); flex-shrink:0; transition:transform .2s; }
.conn-card:hover .conn-card-icon { transform:scale(1.05); }
.conn-card-meta { flex:1; min-width:0; }
.conn-card-name { font-size:13px; font-weight:700; color:var(--text); line-height:1.3; }
.conn-card-host { font-size:11px; color:var(--text-dim); font-family:var(--mono); margin-top:2px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

/* Status dot */
.conn-status { width:8px; height:8px; border-radius:50%; flex-shrink:0; margin-top:4px; transition:background .3s; }
.conn-status.checking { background:var(--surface-3); animation:conn-pulse 1.5s ease infinite; }
.conn-status.online { background:#22c55e; box-shadow:0 0 6px rgba(34,197,94,.4); }
.conn-status.offline { background:#ef4444; }

/* Description */
.conn-card-desc { font-size:11px; color:var(--text-dim); line-height:1.4; margin-bottom:8px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

/* Card footer (tags + action button) */
.conn-card-footer { display:flex; align-items:center; gap:6px; padding-top:10px; border-top:1px solid var(--border-light); }
.conn-proto-tag { display:inline-flex; align-items:center; padding:3px 8px; border-radius:4px; font-size:9px; font-weight:800; font-family:var(--mono); letter-spacing:.04em; border:1px solid; }
.conn-cred-tag { font-size:12px; opacity:.5; }

/* Action button — the star of the show */
.conn-action-btn { display:inline-flex; align-items:center; gap:5px; padding:6px 14px; border:1px solid color-mix(in srgb, var(--btn-color, var(--blue)) 40%, transparent); border-radius:6px; background:color-mix(in srgb, var(--btn-color, var(--blue)) 12%, transparent); color:var(--btn-color, var(--blue)); font-size:11px; font-weight:700; cursor:pointer; transition:all .2s ease; font-family:var(--font); letter-spacing:.02em; }
.conn-action-btn:hover { background:color-mix(in srgb, var(--btn-color, var(--blue)) 22%, transparent); border-color:color-mix(in srgb, var(--btn-color, var(--blue)) 60%, transparent); transform:translateY(-1px); box-shadow:0 2px 8px color-mix(in srgb, var(--btn-color, var(--blue)) 20%, transparent); }
.conn-action-btn:active { transform:translateY(0); }
.conn-action-btn.connecting { pointer-events:none; opacity:.7; }
.conn-action-btn svg { flex-shrink:0; }

/* Button spinner for connecting state */
.btn-spinner { width:12px; height:12px; border:2px solid rgba(255,255,255,.2); border-top-color:currentColor; border-radius:50%; animation:spin .6s linear infinite; }

/* Proto badge legacy compat */
.proto-badge { font-size:9px; font-weight:700; padding:2px 6px; border-radius:3px; font-family:var(--mono); }
.proto-badge.rdp { background:rgba(59,130,246,.12); color:#60a5fa; }
.proto-badge.ssh { background:rgba(34,197,94,.12); color:#4ade80; }
.proto-badge.vnc { background:rgba(139,92,246,.12); color:#a78bfa; }
.proto-badge.https { background:rgba(139,92,246,.12); color:#a78bfa; }

/* ═══ BUTTONS ═══ */
.btn { padding:6px 14px; border:1px solid var(--border); border-radius:var(--radius-sm); background:var(--surface-2); color:var(--text); cursor:pointer; font-size:12px; font-weight:600; transition:all .12s; font-family:var(--font); white-space:nowrap; }
.btn:hover { background:var(--surface-3); border-color:rgba(255,255,255,.12); }
.btn-sm { padding:4px 10px; font-size:11px; }
.btn-primary { background:var(--blue); border-color:var(--blue); color:#fff; }
.btn-primary:hover { background:#2563eb; }
.btn-danger { background:rgba(239,68,68,.15); border-color:rgba(239,68,68,.3); color:#fca5a5; }
.btn-danger:hover { background:rgba(239,68,68,.25); }
.btn-ghost { background:transparent; border-color:transparent; color:var(--text-muted); }
.btn-ghost:hover { color:var(--text); background:rgba(255,255,255,.05); }

/* ═══ BADGES ═══ */
.badge { font-size:9px; padding:2px 6px; border-radius:3px; font-weight:600; }
.badge.cmmc { background:rgba(59,130,246,.08); color:var(--blue); border:1px solid rgba(59,130,246,.15); }

/* ═══ MODALS ═══ */
.modal-backdrop { position:fixed; inset:0; background:rgba(0,0,0,.6); display:none; align-items:center; justify-content:center; z-index:1000; }
.modal-backdrop.show { display:flex; }
.modal { background:var(--surface); border:1px solid var(--border); border-radius:10px; padding:20px; width:440px; max-height:85vh; overflow-y:auto; box-shadow:0 16px 48px rgba(0,0,0,.4); }
.modal h3 { font-size:15px; margin-bottom:14px; }
.modal label { display:block; font-size:10px; color:var(--text-muted); font-weight:600; margin:10px 0 3px; text-transform:uppercase; letter-spacing:.04em; }
.modal input, .modal select { width:100%; padding:7px 10px; border:1px solid var(--border); border-radius:var(--radius-sm); background:var(--surface-2); color:var(--text); font-size:12px; outline:none; }
.modal input:focus, .modal select:focus { border-color:var(--blue); }
.form-row { display:flex; gap:10px; }
.form-row > * { flex:1; }
.form-group { margin-bottom:4px; }
.modal-actions { display:flex; gap:8px; margin-top:18px; justify-content:flex-end; }

/* ═══ TOASTS ═══ */
#toasts { position:fixed; bottom:16px; right:16px; z-index:9999; display:flex; flex-direction:column; gap:6px; }
.toast { padding:10px 16px; border-radius:var(--radius-sm); font-size:12px; font-weight:500; box-shadow:0 4px 16px rgba(0,0,0,.3); animation:toast-in .2s ease; max-width:360px; }
.toast.success { background:#065f46; color:#a7f3d0; border:1px solid #059669; }
.toast.error { background:#7f1d1d; color:#fecaca; border:1px solid #dc2626; }
.toast.info { background:#1e3a5f; color:#bfdbfe; border:1px solid #2563eb; }
@keyframes toast-in { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:translateY(0); } }

/* ═══ UTILITIES ═══ */
.spinner { display:inline-block; width:14px; height:14px; border:2px solid var(--border); border-top-color:var(--blue); border-radius:50%; animation:spin .6s linear infinite; vertical-align:middle; margin-right:6px; }
@keyframes spin { to { transform:rotate(360deg); } }

/* ═══ DASHBOARD ═══ */
.dash-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(280px, 1fr)); gap:14px; }
.stat-row { display:flex; align-items:center; gap:8px; padding:6px 0; border-bottom:1px solid var(--border-light); font-size:12px; }
.stat-row:last-child { border-bottom:none; }
.stat-label { color:var(--text-muted); flex:1; }
.stat-value { font-weight:600; font-size:12px; }
.stat-value.mono { font-family:var(--mono); font-size:11px; }
.stat-dot { width:6px; height:6px; border-radius:50%; flex-shrink:0; }
.stat-bar-wrap { flex:1; height:6px; background:var(--surface-3); border-radius:3px; overflow:hidden; margin:0 8px; min-width:60px; }
.stat-bar { height:100%; border-radius:3px; transition:width .5s ease; }

/* ═══ USERS TABLE ═══ */
.users-toolbar { display:flex; align-items:center; margin-bottom:14px; }
.data-table { width:100%; border-collapse:collapse; font-size:12px; }
.data-table th { text-align:left; padding:8px 12px; font-size:10px; font-weight:700; color:var(--text-dim); text-transform:uppercase; letter-spacing:.05em; border-bottom:2px solid var(--border); background:var(--surface); }
.data-table td { padding:8px 12px; border-bottom:1px solid var(--border-light); vertical-align:middle; }
.data-table tr:hover td { background:rgba(255,255,255,.02); }
.data-table .sub { font-size:10px; color:var(--text-dim); }
.data-table .actions { white-space:nowrap; }
.data-table .actions .btn { margin-left:4px; }
.role-badge { display:inline-block; padding:2px 8px; border-radius:10px; font-size:10px; font-weight:600; }
.role-admin { background:rgba(59,130,246,.12); color:#60a5fa; }
.role-user { background:rgba(34,197,94,.12); color:#4ade80; }
.role-auditor { background:rgba(139,92,246,.12); color:#a78bfa; }
.role-guest { background:rgba(245,158,11,.12); color:#fbbf24; }
.status-dot { display:inline-block; width:6px; height:6px; border-radius:50%; margin-right:6px; vertical-align:middle; }

/* ═══ SETTINGS ═══ */
.settings-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(250px, 1fr)); gap:10px; }
.settings-grid .form-group { margin-bottom:0; }
.settings-grid label { display:block; font-size:10px; color:var(--text-muted); font-weight:600; margin-bottom:3px; text-transform:uppercase; letter-spacing:.04em; }
.settings-grid input, .settings-grid select, .settings-grid textarea {
  width:100%; padding:7px 10px; border:1px solid var(--border); border-radius:var(--radius-sm);
  background:var(--surface-2); color:var(--text); font-size:12px; outline:none;
  font-family:var(--font);
}
.settings-grid input:focus, .settings-grid select:focus, .settings-grid textarea:focus { border-color:var(--blue); }
.settings-grid textarea { font-family:var(--mono); font-size:11px; resize:vertical; }

/* Toggle switch */
.toggle { position:relative; display:inline-block; width:36px; height:20px; }
.toggle input { opacity:0; width:0; height:0; }
.toggle-slider { position:absolute; cursor:pointer; inset:0; background:var(--surface-3); border-radius:10px; transition:.2s; }
.toggle-slider:before { content:""; position:absolute; height:14px; width:14px; left:3px; bottom:3px; background:#fff; border-radius:50%; transition:.2s; }
.toggle input:checked + .toggle-slider { background:var(--blue); }
.toggle input:checked + .toggle-slider:before { transform:translateX(16px); }

/* Channel cards */
.channel-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(200px, 1fr)); gap:8px; }
.channel-card { padding:10px 14px; border:1px solid var(--border); border-radius:var(--radius-sm); background:var(--surface-2); }
.channel-card.enabled { border-color:rgba(34,197,94,.3); }
.channel-header { display:flex; align-items:center; gap:8px; font-size:11px; font-weight:600; }
.channel-type { font-size:9px; font-weight:700; padding:2px 6px; border-radius:3px; background:rgba(255,255,255,.06); color:var(--text-muted); }

/* ═══ AUDIT LOG ═══ */
.audit-toolbar { display:flex; align-items:center; gap:8px; margin-bottom:14px; flex-wrap:wrap; }
.audit-toolbar select, .audit-toolbar input {
  padding:5px 10px; border:1px solid var(--border); border-radius:var(--radius-sm);
  background:var(--surface-2); color:var(--text); font-size:11px; outline:none;
}
.audit-toolbar select:focus, .audit-toolbar input:focus { border-color:var(--blue); }
.audit-toolbar input { min-width:180px; }

/* ═══ FIREWALL ═══ */
.fw-toolbar { display:flex; align-items:center; gap:8px; margin-bottom:14px; }

/* ═══ TOPOLOGY ═══ */
.topo-diagram { display:flex; flex-direction:column; align-items:center; padding:20px; }
.topo-section { text-align:center; }
.topo-zone-label { font-size:10px; font-weight:700; color:var(--text-dim); text-transform:uppercase; letter-spacing:.1em; margin-bottom:8px; }
.topo-row { display:flex; gap:16px; justify-content:center; flex-wrap:wrap; }
.topo-node { display:inline-flex; flex-direction:column; align-items:center; padding:16px 24px; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); min-width:160px; transition:border-color .15s; }
.topo-node:hover { border-color:rgba(255,255,255,.12); }
.topo-node.wan { border-color:rgba(239,68,68,.3); }
.topo-node.firewall { border-color:rgba(245,158,11,.3); }
.topo-node.server { border-color:rgba(59,130,246,.3); }
.topo-node.tunnel { border-color:rgba(139,92,246,.3); }
.topo-node.client { border-color:rgba(34,197,94,.3); }
.topo-icon { font-size:24px; margin-bottom:6px; }
.topo-label { font-size:12px; font-weight:700; }
.topo-detail { font-size:10px; color:var(--text-dim); font-family:var(--mono); margin-top:2px; }
.topo-caps { font-size:9px; color:var(--text-dim); margin-top:4px; }
.topo-connector { font-size:16px; color:var(--text-dim); padding:4px 0; }
.topo-stats { margin-top:20px; width:100%; max-width:400px; margin-left:auto; margin-right:auto; }

/* ═══ RESPONSIVE ═══ */
@media (max-width: 768px) {
  .shell { flex-direction:column; }
  .sidebar { width:100%; height:auto; flex-direction:row; overflow-x:auto; border-right:none; border-bottom:1px solid var(--border); }
  .sb-section { display:flex; padding:4px 0; }
  .sb-label { display:none; }
  .sb-item { padding:8px 12px; font-size:11px; border-left:none; border-bottom:2px solid transparent; }
  .sb-item.active { border-bottom-color:var(--blue); border-left-color:transparent; }
  .sb-footer { display:none; }
  .sb-header span { display:none; }
  .content { height:calc(100vh - 48px); }
  .dash-grid { grid-template-columns:1fr; }
  .conn-grid { grid-template-columns:1fr; }
}

/* ═══ CHANNEL EDITING ═══ */
.channel-edit-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(300px, 1fr)); gap:10px; }
.channel-edit-card { padding:10px 14px; border:1px solid var(--border); border-radius:var(--radius-sm); background:var(--surface-2); }
.channel-edit-card.enabled { border-color:rgba(34,197,94,.3); }
.channel-edit-header { display:flex; align-items:center; gap:6px; margin-bottom:4px; }
.channel-edit-card input[type="text"], .channel-edit-card input[type="password"] {
  width:100%; padding:4px 8px; border:1px solid var(--border); border-radius:3px;
  background:var(--surface); color:var(--text); font-family:var(--mono); outline:none;
}
.channel-edit-card input:focus { border-color:var(--blue); }
.alert-matrix td, .alert-matrix th { padding:6px 10px; }
.alert-matrix input[type="checkbox"] { width:16px; height:16px; cursor:pointer; accent-color:var(--blue); }

/* ═══ CHANNEL EDITING ═══ */
.channel-edit-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(260px, 1fr)); gap:10px; }
.channel-edit-card { padding:12px; border:1px solid var(--border); border-radius:var(--radius-sm); background:var(--surface-2); }
.channel-edit-card label { display:block; font-size:9px; color:var(--text-dim); font-weight:600; margin:6px 0 2px; text-transform:uppercase; letter-spacing:.04em; }
.channel-edit-card input { width:100%; padding:5px 8px; border:1px solid var(--border); border-radius:3px; background:var(--bg); color:var(--text); font-size:11px; outline:none; font-family:var(--mono); }
.channel-edit-card input:focus { border-color:var(--blue); }
.channel-edit-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:6px; }
.toggle-sm { width:28px; height:16px; }
.toggle-sm .toggle-slider:before { height:10px; width:10px; left:3px; bottom:3px; }
.toggle-sm input:checked + .toggle-slider:before { transform:translateX(12px); }