:root {
  color-scheme: dark;
  --ink: #070b0c;
  --panel: #101719;
  --panel-2: #151e20;
  --line: rgba(222, 239, 232, .11);
  --text: #edf5f1;
  --muted: #84938e;
  --faint: #51605b;
  --mint: #55e6ad;
  --mint-soft: rgba(85, 230, 173, .12);
  --amber: #f4b95e;
  --amber-soft: rgba(244, 185, 94, .12);
  --red: #ff716d;
  --blue: #73b7ff;
  --white: #f7fbf9;
  --radius: 22px;
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; background: var(--ink); color: var(--text); }
body {
  font-family: "Avenir Next", "PingFang SC", "Noto Sans CJK SC", sans-serif;
  background:
    radial-gradient(circle at 80% -20%, rgba(85,230,173,.08), transparent 32%),
    linear-gradient(135deg, #070b0c 0%, #090f10 55%, #070a0b 100%);
}
button, input, select { font: inherit; }
button { color: inherit; }

.tower-shell { min-height: 100vh; display: grid; grid-template-columns: 286px minmax(0, 1fr); }
.tower-sidebar {
  position: sticky; top: 0; height: 100vh; padding: 28px 20px 22px;
  border-right: 1px solid var(--line); background: rgba(8,13,14,.88); backdrop-filter: blur(24px);
  display: flex; flex-direction: column; z-index: 20;
}
.tower-brand { display: flex; align-items: center; gap: 13px; padding: 0 8px 30px; }
.brand-mark {
  width: 44px; height: 44px; border-radius: 15px; display: grid; place-items: center;
  background: var(--mint); color: #052218; font-size: 21px; font-weight: 900;
  box-shadow: 0 0 28px rgba(85,230,173,.18);
}
.tower-brand strong { display: block; font-size: 17px; letter-spacing: .02em; }
.tower-brand span { display: block; color: var(--muted); font-size: 9px; letter-spacing: .18em; margin-top: 4px; }

.tower-nav { display: grid; gap: 6px; }
.tower-nav-item {
  display: grid; grid-template-columns: 32px 1fr; gap: 1px 10px; width: 100%; padding: 13px 14px;
  border: 1px solid transparent; border-radius: 16px; background: transparent; text-align: left; cursor: pointer;
  transition: background .2s, border-color .2s, transform .2s;
}
.tower-nav-item:hover { background: rgba(255,255,255,.025); transform: translateX(2px); }
.tower-nav-item.is-active { background: var(--mint-soft); border-color: rgba(85,230,173,.19); }
.tower-nav-item > span { grid-row: 1 / 3; color: var(--faint); font-size: 10px; letter-spacing: .12em; padding-top: 3px; }
.tower-nav-item b { font-size: 14px; font-weight: 650; }
.tower-nav-item em { color: var(--muted); font-size: 10px; font-style: normal; }
.tower-nav-item.is-active b, .tower-nav-item.is-active > span { color: var(--mint); }

.sidebar-foot { margin-top: auto; border-top: 1px solid var(--line); padding: 20px 10px 0; display: flex; gap: 11px; align-items: center; }
.live-beacon { width: 10px; height: 10px; border-radius: 50%; background: var(--muted); box-shadow: 0 0 0 5px rgba(132,147,142,.08); }
.live-beacon.normal { background: var(--mint); box-shadow: 0 0 0 5px rgba(85,230,173,.09), 0 0 18px rgba(85,230,173,.35); }
.live-beacon.warning { background: var(--amber); }
.live-beacon.danger { background: var(--red); }
.sidebar-foot strong, .sidebar-foot small { display: block; }
.sidebar-foot strong { font-size: 12px; }
.sidebar-foot small { color: var(--muted); margin-top: 3px; font-size: 10px; }

.tower-main { min-width: 0; }
.tower-topbar {
  position: sticky; top: 0; z-index: 10; height: 108px; padding: 25px 38px;
  display: flex; align-items: center; gap: 15px; justify-content: space-between;
  background: linear-gradient(180deg, rgba(7,11,12,.96), rgba(7,11,12,.76)); backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--line);
}
.tower-topbar h1 { margin: 2px 0 0; font-size: 28px; line-height: 1; letter-spacing: -.03em; }
.eyebrow { margin: 0; color: var(--mint); font-size: 9px; letter-spacing: .25em; }
.topbar-actions { display: flex; align-items: center; gap: 14px; }
.clock { color: var(--muted); font-variant-numeric: tabular-nums; font-size: 12px; }
.ghost-button, .filter-button {
  border: 1px solid var(--line); background: rgba(255,255,255,.025); padding: 10px 15px; border-radius: 12px; cursor: pointer;
}
.ghost-button:hover, .filter-button:hover { border-color: rgba(85,230,173,.35); color: var(--mint); }
.mobile-menu { display: none; background: transparent; border: 0; font-size: 20px; }

.tower-content { padding: 30px 38px 70px; max-width: 1520px; margin: 0 auto; }
.loading-state { min-height: 55vh; display: grid; place-items: center; align-content: center; color: var(--muted); gap: 16px; }
.loading-state span { width: 36px; height: 36px; border: 2px solid var(--line); border-top-color: var(--mint); border-radius: 50%; animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

.section-heading { display: flex; justify-content: space-between; align-items: end; margin: 28px 0 14px; gap: 20px; }
.section-heading h2 { margin: 0; font-size: 18px; letter-spacing: -.02em; }
.section-heading p { margin: 3px 0 0; color: var(--muted); font-size: 11px; }
.grid { display: grid; gap: 16px; }
.grid.metrics { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grid.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.panel-card {
  border: 1px solid var(--line); border-radius: var(--radius); background: linear-gradient(145deg, rgba(21,30,32,.92), rgba(13,20,22,.92));
  padding: 21px; min-width: 0; box-shadow: 0 20px 50px rgba(0,0,0,.16);
}
.health-card {
  display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 16px;
  border-color: rgba(85,230,173,.18);
}
.health-card[data-state="waiting"], .health-card[data-state="stale"] { border-color: rgba(244,185,94,.25); }
.health-card[data-state="restricted"], .health-card[data-state="stalled"], .health-card[data-state="offline"] { border-color: rgba(255,113,109,.28); }
.health-card strong { display: block; margin-top: 7px; font-size: 42px; letter-spacing: -.06em; color: var(--mint); }
.health-card p { margin: 5px 0 0; color: var(--muted); font-size: 12px; }
.metric-card .metric-label { color: var(--muted); font-size: 11px; }
.metric-card strong { display: block; margin-top: 12px; font-size: 36px; letter-spacing: -.05em; }
.metric-card small { color: var(--muted); font-size: 10px; }
.metric-card.is-alert { border-color: rgba(255,113,109,.28); }
.is-clickable, .signal-row[data-signal-target] { cursor: pointer; }
.is-clickable:hover, .signal-row[data-signal-target]:hover { border-color: rgba(85,230,173,.28); transform: translateY(-1px); }

.signal-list, .task-list, .source-list, .delivery-list { display: grid; gap: 9px; }
.signal-row, .task-row, .source-row, .delivery-row {
  border: 1px solid var(--line); background: rgba(255,255,255,.018); border-radius: 15px; padding: 14px 16px;
  transition: border-color .18s, transform .18s;
}
.signal-row { display: grid; grid-template-columns: 12px minmax(150px, .55fr) minmax(220px, 1.4fr) auto; align-items: center; gap: 12px; }
.state-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--muted); }
.state-dot.normal { background: var(--mint); box-shadow: 0 0 12px rgba(85,230,173,.35); }
.state-dot.busy { background: var(--blue); }
.state-dot.waiting, .state-dot.stale { background: var(--amber); }
.state-dot.restricted, .state-dot.stalled, .state-dot.offline { background: var(--red); }
.signal-row b { font-size: 13px; }
.signal-row p { margin: 0; color: #b6c2be; font-size: 11px; }
.signal-row time { color: var(--muted); font-size: 10px; white-space: nowrap; }

.issue-row { border-left: 2px solid var(--amber); }
.issue-row[data-state="stalled"], .issue-row[data-state="offline"], .issue-row[data-state="restricted"] { border-left-color: var(--red); }
.empty-state { padding: 45px 20px; text-align: center; color: var(--muted); border: 1px dashed var(--line); border-radius: var(--radius); }

.task-toolbar { display: flex; gap: 9px; flex-wrap: wrap; margin-bottom: 14px; }
.task-toolbar input, .task-toolbar select {
  color: var(--text); background: var(--panel); border: 1px solid var(--line); border-radius: 11px; padding: 10px 12px; outline: none;
}
.task-toolbar input { flex: 1; min-width: 220px; }
.task-toolbar input:focus, .task-toolbar select:focus { border-color: rgba(85,230,173,.45); }
.task-row { display: grid; grid-template-columns: minmax(220px, 1.2fr) 120px 90px 90px 110px; align-items: center; gap: 12px; cursor: pointer; }
.task-row:hover, .delivery-row:hover { border-color: rgba(85,230,173,.25); }
.task-title b { display: block; font-size: 13px; }
.task-title small { display: block; color: var(--muted); margin-top: 4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.status-chip { display: inline-flex; align-items: center; width: fit-content; border-radius: 999px; padding: 5px 9px; background: rgba(115,183,255,.1); color: var(--blue); font-size: 9px; }
.status-chip.stalled, .status-chip.failed, .status-chip.offline { background: rgba(255,113,109,.1); color: var(--red); }
.status-chip.completed, .status-chip.deliverable, .status-chip.normal { background: var(--mint-soft); color: var(--mint); }
.progress-track { height: 5px; border-radius: 9px; overflow: hidden; background: rgba(255,255,255,.06); margin-top: 8px; }
.progress-track i { display: block; height: 100%; background: var(--mint); }

.brain-card { position: relative; overflow: hidden; }
.brain-card::after { content: ""; position: absolute; width: 110px; height: 110px; border-radius: 50%; right: -45px; top: -45px; background: var(--mint-soft); }
.brain-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; position: relative; z-index: 1; }
.brain-name { font-size: 20px; font-weight: 750; }
.brain-role { color: var(--muted); font-size: 10px; margin-top: 4px; }
.brain-stat { margin-top: 25px; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.brain-stat div { border-top: 1px solid var(--line); padding-top: 11px; }
.brain-stat span { display: block; color: var(--muted); font-size: 9px; }
.brain-stat b { display: block; margin-top: 3px; font-size: 12px; }
.handoff-list { display: grid; gap: 10px; }
.handoff-row {
  border: 1px solid var(--line); border-radius: 16px; padding: 14px 16px;
  background: rgba(255,255,255,.018);
}
.handoff-row b { display: block; color: var(--mint); font-size: 13px; }
.handoff-row p { margin: 7px 0 0; color: #d6e2de; font-size: 11px; }
.handoff-row small { display: block; margin-top: 8px; color: var(--muted); font-size: 10px; line-height: 1.55; }

.model-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 12px; }
.model-card { border: 1px solid var(--line); border-radius: 15px; padding: 15px; display: flex; justify-content: space-between; gap: 10px; }
.model-card.running { border-color: rgba(85,230,173,.3); background: var(--mint-soft); }
.model-card b { font-size: 12px; overflow-wrap: anywhere; }
.model-card span { color: var(--muted); font-size: 10px; white-space: nowrap; }
.topology-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; }
.topology-node {
  border: 1px solid var(--line); border-radius: 16px; padding: 14px;
  background: rgba(255,255,255,.018); display: grid; gap: 10px;
}
.topology-node[data-state="normal"] { border-color: rgba(85,230,173,.2); }
.topology-node[data-state="busy"] { border-color: rgba(115,183,255,.2); }
.topology-node[data-state="waiting"], .topology-node[data-state="stale"] { border-color: rgba(244,185,94,.25); }
.topology-node[data-state="restricted"], .topology-node[data-state="stalled"], .topology-node[data-state="offline"] { border-color: rgba(255,113,109,.28); }
.topology-node b, .topology-node small { display: block; }
.topology-node b { font-size: 12px; }
.topology-node small, .topology-node p { color: var(--muted); font-size: 10px; margin: 4px 0 0; }

.delivery-row { display: grid; grid-template-columns: minmax(220px,1fr) 100px 70px 95px; align-items: center; gap: 12px; }
.delivery-row b { font-size: 12px; }
.delivery-row small { color: var(--muted); display: block; margin-top: 4px; }
.artifact-count { color: var(--blue); font-size: 10px; }

.tower-dialog { width: min(760px, calc(100vw - 32px)); max-height: calc(100vh - 40px); overflow: auto; border: 1px solid var(--line); border-radius: 24px; background: #101719; color: var(--text); padding: 28px; }
.tower-dialog::backdrop { background: rgba(0,0,0,.7); backdrop-filter: blur(8px); }
.dialog-close { position: sticky; float: right; top: 0; border: 0; background: rgba(255,255,255,.05); border-radius: 50%; width: 32px; height: 32px; cursor: pointer; }
.detail-grid { display: grid; grid-template-columns: 130px 1fr; gap: 10px; margin-top: 20px; }
.detail-grid dt { color: var(--muted); font-size: 10px; }
.detail-grid dd { margin: 0; font-size: 11px; overflow-wrap: anywhere; }
.trace-summary {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-top: 18px;
}
.trace-summary div {
  border: 1px solid var(--line); border-radius: 14px; padding: 12px;
  background: rgba(255,255,255,.018);
}
.trace-summary span { display: block; color: var(--muted); font-size: 9px; }
.trace-summary b { display: block; margin-top: 6px; font-size: 17px; color: var(--mint); }
.blocker-box {
  margin-top: 12px; border: 1px solid rgba(255,113,109,.28); border-radius: 16px;
  background: rgba(255,113,109,.08); padding: 14px;
}
.blocker-box b { color: var(--red); font-size: 12px; }
.blocker-box p { margin: 7px 0 0; color: #ffd6d4; font-size: 11px; line-height: 1.6; }
.event-list { margin-top: 20px; display: grid; gap: 8px; }
.event-item { border-left: 2px solid var(--line); padding: 8px 12px; font-size: 10px; color: #bdc9c5; }
.event-item time { display: block; color: var(--muted); margin-top: 4px; }
.detail-subtitle { margin: 24px 0 10px; font-size: 13px; color: var(--mint); letter-spacing: .04em; }
.gate-list { display: grid; gap: 8px; }
.gate-item {
  border: 1px solid var(--line); border-radius: 14px; padding: 12px;
  background: rgba(255,255,255,.018);
}
.gate-item.high { border-color: rgba(255,113,109,.28); background: rgba(255,113,109,.08); }
.gate-item.medium { border-color: rgba(244,185,94,.3); background: rgba(244,185,94,.08); }
.gate-item b { display: block; font-size: 12px; color: var(--amber); }
.gate-item.high b { color: var(--red); }
.gate-item p { margin: 6px 0 0; color: #c9d5d1; font-size: 11px; line-height: 1.55; }
.evidence-list { display: grid; gap: 8px; }
.evidence-item {
  border: 1px solid var(--line); border-radius: 14px; padding: 12px;
  background: rgba(255,255,255,.018); font-size: 11px;
}
.evidence-item b, .evidence-item small, .evidence-item code { display: block; }
.evidence-item small { color: var(--muted); margin-top: 5px; }
.evidence-item code { margin-top: 8px; color: var(--blue); white-space: pre-wrap; overflow-wrap: anywhere; }
.evidence-item p { margin: 8px 0 0; color: #c9d5d1; }
.feedback-evidence { border-color: rgba(85,230,173,.22); }
.empty-state.compact { padding: 18px 12px; font-size: 11px; }

.sidebar-scrim { display: none; }

@media (max-width: 1080px) {
  .grid.metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid.three { grid-template-columns: 1fr; }
  .task-row { grid-template-columns: minmax(220px, 1fr) 110px 80px; }
  .task-row > :nth-child(4), .task-row > :nth-child(5) { display: none; }
}

@media (max-width: 760px) {
  .tower-shell { display: block; }
  .tower-sidebar { position: fixed; left: 0; transform: translateX(-105%); width: 286px; transition: transform .2s; }
  body.sidebar-open .tower-sidebar { transform: translateX(0); }
  .sidebar-scrim { position: fixed; inset: 0; background: rgba(0,0,0,.55); z-index: 15; }
  body.sidebar-open .sidebar-scrim { display: block; }
  .mobile-menu { display: block; }
  .tower-topbar { height: 86px; padding: 18px; }
  .tower-topbar h1 { font-size: 22px; }
  .clock { display: none; }
  .tower-content { padding: 20px 16px 55px; }
  .grid.metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid.two { grid-template-columns: 1fr; }
  .signal-row { grid-template-columns: 10px 1fr; }
  .signal-row p, .signal-row time { grid-column: 2; }
  .task-row, .delivery-row { grid-template-columns: 1fr auto; }
  .task-row > :not(:first-child):not(:nth-child(2)), .delivery-row > :not(:first-child):not(:nth-child(2)) { display: none; }
  .trace-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}