/* ===== 全局重置 ===== */
* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { height: 100%; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Microsoft YaHei', sans-serif; background: #0a0e17; color: #e5e7eb; overflow: hidden; }

/* ===== 整体布局 ===== */
#app { display: flex; height: 100vh; width: 100vw; }
html:not(.auth-authenticated) #app { display:none !important; }
html.control-zone-alert-active body::after { content:""; position:fixed; z-index:29999; inset:0; pointer-events:none; border:5px solid #ef4444; box-shadow:inset 0 0 32px rgba(239,68,68,.46); }
html.control-zone-alert-active.control-zone-alert-dark body::after { border-color:#050505; box-shadow:inset 0 0 24px rgba(0,0,0,.88); }
.control-zone-alert-banner {
  position:fixed; z-index:30000; left:50%; top:10px; width:min(920px,calc(100vw - 28px)); min-height:54px;
  display:flex; align-items:center; gap:12px; padding:9px 12px; border:2px solid #f87171; border-radius:10px;
  background:rgba(127,29,29,.97); color:#fff; box-shadow:0 12px 42px rgba(127,29,29,.58); transform:translateX(-50%);
}
html.control-zone-alert-dark .control-zone-alert-banner { border-color:#111827; background:rgba(3,7,18,.98); }
.control-zone-alert-banner[hidden] { display:none; }
.control-zone-alert-icon { flex:0 0 auto; font-size:26px; line-height:1; }
.control-zone-alert-copy { min-width:0; flex:1; }
.control-zone-alert-copy strong { display:block; overflow:hidden; font-size:14px; text-overflow:ellipsis; white-space:nowrap; }
.control-zone-alert-copy span { display:block; margin-top:3px; overflow:hidden; color:#fecaca; font-size:11px; text-overflow:ellipsis; white-space:nowrap; }
html.control-zone-alert-dark .control-zone-alert-copy span { color:#fca5a5; }
.control-zone-alert-actions { display:flex; align-items:center; gap:7px; flex:0 0 auto; }
.control-zone-alert-action { height:32px; padding:0 10px; border:1px solid rgba(255,255,255,.45); border-radius:7px; background:rgba(15,23,42,.36); color:#fff; cursor:pointer; font-size:12px; font-weight:700; }
.control-zone-alert-action:hover,.control-zone-alert-action:focus-visible { border-color:#fff; background:rgba(255,255,255,.14); outline:none; }
.control-zone-silence-settings { position:absolute; right:10px; top:62px; width:300px; padding:11px; border:1px solid #475569; border-radius:9px; background:#0f172a; box-shadow:0 14px 36px rgba(0,0,0,.55); }
.control-zone-silence-settings[hidden] { display:none; }
.control-zone-silence-row { display:flex; align-items:center; justify-content:space-between; gap:8px; color:#cbd5e1; font-size:12px; }
.control-zone-silence-times { display:flex; align-items:center; gap:7px; margin-top:9px; color:#94a3b8; font-size:11px; }
.control-zone-silence-times input { width:94px; height:30px; padding:3px 6px; border:1px solid #475569; border-radius:6px; background:#111827; color:#e2e8f0; }
@media(max-width:720px){.control-zone-alert-banner{align-items:flex-start;flex-wrap:wrap}.control-zone-alert-copy{min-width:220px}.control-zone-alert-actions{width:100%;justify-content:flex-end}.control-zone-silence-settings{left:10px;right:10px;top:102px;width:auto}}
#auth-bootstrap-gate {
  position:fixed; inset:0; z-index:31000; display:none; place-items:center;
  color:#9fb4c8; background:#050b12; font-size:13px; letter-spacing:.12em;
}
html.auth-pending #auth-bootstrap-gate { display:grid; }
.auth-bootstrap-card { display:grid; justify-items:center; gap:14px; }
.auth-bootstrap-spinner {
  width:30px; height:30px; border:2px solid rgba(87,215,255,.18);
  border-top-color:#57d7ff; border-radius:50%; animation:authBootstrapSpin .8s linear infinite;
}
@keyframes authBootstrapSpin { to { transform:rotate(360deg); } }

/* ===== 左侧边栏 ===== */
#sidebar {
  width: 200px; min-width: 200px; height: 100%;
  background: #0d1321; border-right: 1px solid #1f2937;
  display: flex; flex-direction: column; user-select: none; z-index: 10;
}
.sidebar-header {
  padding: 20px 16px; border-bottom: 1px solid #1f2937;
  text-align: center;
}
.sidebar-header .logo {
  font-size:calc(20px + var(--utm-text-delta, 0px) + var(--utm-area-text-delta, 0px)); font-weight: 700; color: #f3f4f6; letter-spacing: 2px;
}
.sidebar-header .subtitle {
  font-size:calc(10px + var(--utm-text-delta, 0px) + var(--utm-area-text-delta, 0px)); color: #6b7280; margin-top: 4px; letter-spacing: 1px;
}

.nav-list {
  flex: 1; min-height: 0; padding: 12px 0;
  overflow-y: auto; overflow-x: hidden; scrollbar-gutter: stable;
}
.nav-item {
  display: flex; align-items: center; gap: 10px;
  padding: 14px 20px; cursor: pointer; transition: all 0.2s;
  color: #9ca3af; font-size:calc(14px + var(--utm-text-delta, 0px) + var(--utm-area-text-delta, 0px)); border-left: 3px solid transparent;
  margin: 2px 0;
}
.nav-item:hover { background: #1a2332; color: #e5e7eb; }
.nav-item.active {
  background: #1a2332; color: #f3f4f6;
  border-left-color: #dc2626; font-weight: 600;
}
.nav-item .nav-icon { font-size:18px; width: 24px; text-align: center; }

.sidebar-footer {
  padding: 12px 16px; border-top: 1px solid #1f2937;
  font-size:calc(10px + var(--utm-text-delta, 0px) + var(--utm-area-text-delta, 0px)); color: #4b5563; text-align: center;
}

/* ===== 右侧内容区 ===== */
#content { flex: 1; height: 100%; overflow: hidden; position: relative; }
.tab-panel { display: none; width: 100%; height: calc(100% - 48px); }
.tab-panel.active { display: flex; }
html.auth-authenticated:not(.defense-context-ready) #content .tab-panel { visibility:hidden; pointer-events:none; }
.defense-zone-context-bar {
  height:48px; display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:0 18px; border-bottom:1px solid #26364a; background:#0d1623; color:#dbeafe;
  box-shadow:0 4px 14px rgba(0,0,0,.18); position:relative; z-index:2500;
}
.defense-zone-context-title { display:flex; align-items:center; gap:9px; min-width:0; }
.defense-zone-context-title i { width:8px; height:8px; border-radius:50%; background:#22d3ee; box-shadow:0 0 10px rgba(34,211,238,.7); }
.defense-zone-context-title span { color:#7890a8; font-size:11px; letter-spacing:.08em; }
.defense-zone-context-title strong { max-width:420px; overflow:hidden; color:#e8f6ff; font-size:13px; text-overflow:ellipsis; white-space:nowrap; }
.defense-zone-context-control { display:flex; align-items:center; gap:9px; }
.defense-zone-context-control label { color:#8197ad; font-size:11px; }
.defense-zone-context-select { min-width:220px; height:34px; padding:5px 30px 5px 10px; border:1px solid #31516d; border-radius:7px; background:#0b1b2a; color:#dff6ff; }
.defense-zone-context-readonly { padding:5px 10px; border:1px solid #294258; border-radius:999px; background:#101f2d; color:#b8e9ff; font-size:12px; }
.defense-zone-context-state { min-width:86px; color:#7dd3fc; font-size:11px; text-align:right; }
.defense-zone-context-state.error { color:#fca5a5; }
#defense-zone-context-gate {
  position:absolute; z-index:2400; inset:48px 0 0; display:none; place-items:center;
  background:#09111d; color:#abc1d4;
}
html.auth-authenticated.defense-context-pending #defense-zone-context-gate,
html.auth-authenticated.defense-context-error #defense-zone-context-gate { display:grid; }
.defense-zone-context-gate-card { width:min(440px,calc(100% - 32px)); padding:28px; border:1px solid #2a4056; border-radius:12px; background:#101b29; text-align:center; box-shadow:0 20px 45px rgba(0,0,0,.38); }
.defense-zone-context-gate-card h3 { margin:0 0 9px; color:#e5f4ff; font-size:18px; }
.defense-zone-context-gate-card p { margin:0 0 16px; color:#8196ab; font-size:12px; line-height:1.6; }
.defense-zone-context-gate-card .access-btn { display:none; margin:auto; }
html.defense-context-error .defense-zone-context-gate-card .access-btn { display:inline-flex; }