:root {
  color-scheme: dark;
  --bg: #06101c;
  --panel: rgba(12, 27, 44, .91);
  --panel-strong: #0d2033;
  --line: rgba(177, 213, 239, .16);
  --text: #edf7ff;
  --muted: #94aec3;
  --faint: #607e96;
  --accent: #68d3b2;
  --accent-hot: #f3b760;
  --danger: #ff8d88;
  --shadow: 0 24px 70px rgba(0, 0, 0, .26);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
html { min-width: 320px; background: var(--bg); }
body {
  min-height: 100vh;
  margin: 0;
  color: var(--text);
  background: radial-gradient(circle at 18% 0%, #102b43 0, var(--bg) 42rem), var(--bg);
}

.ambient { position: fixed; z-index: -1; width: 30rem; height: 30rem; border-radius: 50%; filter: blur(90px); opacity: .18; pointer-events: none; }
.ambient-one { top: -12rem; right: -8rem; background: #3ab69d; }
.ambient-two { bottom: -16rem; left: -10rem; background: #2a6db2; }
.shell { width: min(1840px, calc(100% - 40px)); margin: 0 auto; padding: 38px 0 46px; }
.hero { display: flex; justify-content: space-between; gap: 28px; align-items: flex-end; margin-bottom: 26px; }
.eyebrow { margin: 0 0 10px; color: var(--accent); font-size: .72rem; font-weight: 800; letter-spacing: .18em; }
h1 { margin: 0; font-size: clamp(2.1rem, 4vw, 4.7rem); line-height: .95; letter-spacing: -.065em; }
.lede { max-width: 760px; margin: 18px 0 0; color: var(--muted); font-size: 1rem; line-height: 1.55; }
.hero-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 10px; }
.button { border: 1px solid var(--line); border-radius: 999px; padding: 11px 16px; color: var(--text); background: rgba(13, 32, 51, .78); cursor: pointer; font: inherit; font-size: .84rem; font-weight: 750; transition: transform .15s ease, border-color .15s ease, background .15s ease; }
.button:hover { transform: translateY(-1px); border-color: rgba(177, 213, 239, .4); }
.button-primary { border-color: transparent; color: #04151a; background: var(--accent); }
.connection-badge { align-self: center; border: 1px solid var(--line); border-radius: 999px; padding: 9px 12px; font-size: .72rem; font-weight: 800; letter-spacing: .08em; }
.connection-live { color: #a7f5d9; border-color: rgba(104, 211, 178, .45); background: rgba(42, 134, 111, .18); }
.connection-reconnecting { color: var(--accent-hot); border-color: rgba(243, 183, 96, .44); background: rgba(160, 100, 31, .16); }
.connection-unknown { color: var(--muted); }
.notice { margin: 0 0 18px; border: 1px solid rgba(255, 141, 136, .35); border-radius: 16px; padding: 13px 16px; color: #ffd3d0; background: rgba(136, 44, 50, .19); line-height: 1.45; }
.hidden { display: none !important; }
.connect-panel { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(300px, .7fr); gap: 22px; align-items: end; margin: 0 0 20px; border: 1px solid rgba(243, 183, 96, .38); border-radius: 21px; padding: 20px; background: linear-gradient(145deg, rgba(82, 57, 30, .42), rgba(12, 27, 44, .92)); box-shadow: var(--shadow); }
.connect-panel h2 { margin: 0; font-size: 1.25rem; }
.connect-panel p:not(.eyebrow) { max-width: 720px; margin: 10px 0 0; color: var(--muted); font-size: .84rem; line-height: 1.5; }
.connect-panel code { color: var(--accent-hot); }
.connect-form { display: grid; gap: 8px; }
.connect-form label { color: var(--muted); font-size: .72rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.connect-form input { width: 100%; border: 1px solid var(--line); border-radius: 12px; outline: none; padding: 12px; color: var(--text); background: rgba(7, 18, 31, .88); font: .78rem ui-monospace, SFMono-Regular, Consolas, monospace; }
.connect-form input:focus { border-color: rgba(243, 183, 96, .7); box-shadow: 0 0 0 3px rgba(243, 183, 96, .12); }

.summary-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-bottom: 20px; }
.summary-card { min-height: 130px; border: 1px solid var(--line); border-radius: 21px; padding: 19px; background: var(--panel); box-shadow: var(--shadow); }
.summary-card-hot { border-color: rgba(104, 211, 178, .42); background: linear-gradient(145deg, rgba(26, 71, 74, .9), rgba(12, 27, 44, .92)); }
.summary-label { display: block; color: var(--muted); font-size: .72rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.summary-card strong { display: block; margin: 12px 0 5px; font-size: 2.1rem; letter-spacing: -.05em; }
.summary-note { color: var(--faint); font-size: .8rem; }

.toolbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin: 0 0 14px; }
.search-box { flex: 1; min-width: 0; }
.search-box input { width: 100%; border: 1px solid var(--line); border-radius: 14px; outline: none; padding: 13px 15px; color: var(--text); background: rgba(7, 18, 31, .85); font: inherit; }
.search-box input:focus { border-color: rgba(104, 211, 178, .65); box-shadow: 0 0 0 3px rgba(104, 211, 178, .12); }
.locked-mode { flex: none; border: 1px solid rgba(104, 211, 178, .3); border-radius: 999px; padding: 11px 14px; color: var(--accent); background: rgba(104, 211, 178, .08); font-size: .72rem; font-weight: 850; letter-spacing: .08em; }
.status-strip { display: flex; justify-content: space-between; gap: 14px; margin: 0 0 16px; padding: 0 3px; color: var(--muted); font-size: .78rem; }
.status-strip > div { display: flex; align-items: center; gap: 8px; }
.live-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 5px rgba(104, 211, 178, .12), 0 0 18px var(--accent); }

.card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(480px, 1fr)); gap: 18px; align-items: start; }
.session-card { min-width: 0; border: 1px solid rgba(104, 211, 178, .25); border-radius: 22px; padding: 19px; background: linear-gradient(160deg, rgba(15, 42, 55, .96), rgba(9, 22, 36, .96)); box-shadow: var(--shadow); }
.card-top { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.status-pill { border: 1px solid rgba(104, 211, 178, .48); border-radius: 999px; padding: 6px 9px; color: #b6ffe6; background: rgba(104, 211, 178, .12); font-size: .67rem; font-weight: 900; letter-spacing: .1em; }
.card-number { color: var(--faint); font-size: .75rem; font-weight: 800; letter-spacing: .1em; }
.card-title-row { display: flex; align-items: flex-start; gap: 10px; margin-top: 16px; }
.attention-mark { flex: none; color: var(--accent); font-size: .75rem; line-height: 1.45; }
.card-title { min-width: 0; margin: 0; color: var(--text); font-size: 1.15rem; line-height: 1.25; overflow-wrap: anywhere; }
.chip-row { display: flex; flex-wrap: wrap; gap: 7px; margin: 13px 0 0; }
.chip { max-width: 100%; overflow: hidden; border: 1px solid var(--line); border-radius: 999px; padding: 5px 8px; color: var(--muted); background: rgba(5, 15, 26, .42); font-size: .68rem; text-overflow: ellipsis; white-space: nowrap; }

.live-transcript { display: flex; flex-direction: column; min-height: 390px; margin-top: 16px; overflow: hidden; border: 1px solid rgba(104, 211, 178, .25); border-radius: 16px; background: #020912; }
.transcript-heading { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; border-bottom: 1px solid rgba(177, 213, 239, .12); padding: 10px 12px; background: rgba(16, 42, 58, .62); }
.transcript-title { color: var(--accent); font-size: .68rem; font-weight: 900; letter-spacing: .12em; }
.transcript-state { color: var(--faint); font-size: .68rem; }
.transcript-scroll { min-height: 330px; max-height: 560px; overflow: auto; padding: 10px; overscroll-behavior: contain; scrollbar-color: #2a5968 #07131f; }
.transcript-entry { margin: 0 0 12px; border-left: 2px solid rgba(104, 211, 178, .52); padding-left: 10px; }
.transcript-entry:last-child { margin-bottom: 0; }
.transcript-entry-meta { display: flex; justify-content: space-between; gap: 8px; margin-bottom: 5px; color: var(--faint); font-size: .65rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.transcript-entry-kind { color: #9ad7c8; }
.transcript-text { margin: 0; color: #e6f5ff; font: 500 .78rem/1.48 ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", monospace; white-space: pre-wrap; overflow-wrap: anywhere; tab-size: 2; }
.transcript-empty { padding: 15px 4px; color: var(--muted); font-size: .82rem; line-height: 1.5; }
.transcript-warning { margin-top: 8px; color: var(--accent-hot); font-size: .7rem; }

.metric-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 15px; }
.metric { min-width: 0; border-top: 1px solid var(--line); padding-top: 10px; }
.metric-label { display: block; color: var(--faint); font-size: .65rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.metric-value { display: block; margin-top: 5px; color: var(--text); font-size: .82rem; font-weight: 800; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.progress-line { margin-top: 12px; color: var(--accent-hot); font-size: .76rem; font-weight: 750; line-height: 1.4; }
details { margin-top: 14px; border-top: 1px solid var(--line); padding-top: 11px; }
summary { color: var(--muted); cursor: pointer; font-size: .76rem; font-weight: 750; }
.detail-list { display: grid; gap: 8px; margin-top: 11px; }
.detail-row { display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 10px; font-size: .72rem; line-height: 1.35; }
.detail-key { color: var(--faint); }
.detail-value { color: var(--muted); overflow-wrap: anywhere; }
.empty-state { margin-top: 22px; border: 1px dashed rgba(177, 213, 239, .25); border-radius: 22px; padding: 54px 20px; text-align: center; background: rgba(9, 22, 36, .62); }
.empty-icon { color: var(--accent); font-size: 2rem; }
.empty-state h2 { margin: 12px 0 7px; font-size: 1.25rem; }
.empty-state p { max-width: 560px; margin: 0 auto; color: var(--muted); line-height: 1.5; }
.footer { display: flex; justify-content: space-between; gap: 16px; margin-top: 24px; color: var(--faint); font-size: .72rem; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }

@media (max-width: 1200px) {
  .card-grid { grid-template-columns: repeat(auto-fit, minmax(390px, 1fr)); }
  .summary-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 780px) {
  .shell { width: min(100% - 24px, 620px); padding-top: 23px; }
  .hero { display: block; }
  .hero-actions { justify-content: flex-start; margin-top: 18px; }
  .lede { font-size: .9rem; }
  .connect-panel { display: block; padding: 16px; border-radius: 17px; }
  .connect-form { margin-top: 16px; }
  .summary-grid { gap: 9px; }
  .summary-card { min-height: 108px; padding: 14px; border-radius: 16px; }
  .summary-card strong { margin-top: 8px; font-size: 1.65rem; }
  .summary-note { font-size: .7rem; }
  .toolbar { display: block; }
  .locked-mode { display: inline-block; margin-top: 10px; }
  .status-strip, .footer { display: block; }
  .status-strip > span, .footer > span { display: block; margin-top: 7px; }
  .card-grid { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .session-card { padding: 14px; border-radius: 17px; }
  .live-transcript { min-height: 330px; }
  .transcript-scroll { min-height: 270px; max-height: 52vh; }
  .transcript-text { font-size: .72rem; }
  .metric-row { gap: 7px; }
  .metric-value { font-size: .74rem; }
}