:root { color-scheme: dark; --bg: #080d1b; --card: #121b32; --card-hi: #172343; --line: #283654; --text: #f1f5ff; --muted: #9dacca; --accent: #68e0ae; --blue: #80aaff; --amber: #f3b754; --danger: #ff7185; --shadow: 0 22px 60px #0006; }
* { box-sizing: border-box; }
body { min-height: 100vh; margin: 0; background: radial-gradient(900px 530px at 90% 2%, #223766 0%, transparent 70%), radial-gradient(760px 440px at 2% 100%, #112d38 0%, transparent 68%), var(--bg); color: var(--text); font: 15px/1.5 Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
button, input, textarea, select { font: inherit; }
button { cursor: pointer; border: 0; border-radius: 10px; color: #042014; background: linear-gradient(135deg, #73e4b6, #54c998); font-weight: 800; padding: 11px 15px; box-shadow: 0 8px 18px #0003; transition: transform .15s ease, filter .15s ease, opacity .15s ease; }
button:hover:not(:disabled) { filter: brightness(1.06); transform: translateY(-1px); }
button:disabled { cursor: not-allowed; opacity: .45; box-shadow: none; }
button.secondary { color: var(--text); background: #243456; } button.danger { color: #fff; background: linear-gradient(135deg, #bd4156, #963142); }
.shell { max-width: 1520px; margin: 0 auto; padding: 32px 24px 76px; }
.card { background: linear-gradient(145deg, color-mix(in srgb, var(--card-hi) 82%, transparent), color-mix(in srgb, var(--card) 95%, transparent)); border: 1px solid color-mix(in srgb, var(--line) 88%, white 2%); border-radius: 18px; padding: 24px; box-shadow: var(--shadow); }
.login-card { max-width: 470px; margin: 12vh auto; }.login-card .brand-mark { margin-bottom: 16px; }
.heading-wrap, header, .header-actions, .actions, .section-heading, .event-controls, .event-meta { display: flex; align-items: center; gap: 14px; }
header, .section-heading { justify-content: space-between; } header { margin-bottom: 24px; }.header-actions, .actions { flex-wrap: wrap; }
.brand-mark { display: grid; place-items: center; width: 42px; height: 42px; border: 1px solid #4dd8a4; border-radius: 13px; color: #82f2c1; background: #0d332e; box-shadow: inset 0 0 18px #65d6a425; font-size: 27px; line-height: 1; }.brand-mark::first-letter { transform: translateY(-1px); }
.eyebrow { color: var(--accent); font-size: 11px; font-weight: 800; letter-spacing: .15em; margin: 0 0 7px; text-transform: uppercase; }h1, h2 { margin: 0; line-height: 1.13; }h1 { font-size: clamp(29px, 4vw, 45px); letter-spacing: -.03em; }h2 { font-size: 19px; letter-spacing: -.01em; }
.metric-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-bottom: 18px; }.metric-card { display: flex; align-items: center; gap: 13px; min-height: 92px; padding: 16px; border: 1px solid var(--line); border-radius: 16px; background: #0f1830b8; }.metric-card small { display: block; color: var(--muted); font-size: 12px; font-weight: 700; }.metric-card strong { display: block; font-size: 25px; line-height: 1.15; margin-top: 2px; }.metric-icon { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; font-weight: 900; font-size: 19px; }.metric-icon.teal { color: #76f0c0; background: #164e3d; }.metric-icon.blue { color: #b7ccff; background: #2a437e; }.metric-icon.amber { color: #ffe0a2; background: #6f4c18; }.metric-icon.red { color: #ffc1cb; background: #6b2939; }
.connection-card { margin-bottom: 18px; }.connection-grid { display: grid; grid-template-columns: minmax(240px, .85fr) minmax(250px, auto) minmax(300px, 1.25fr); gap: 22px; align-items: start; }.connection-grid > section { min-width: 0; }.connection-grid dl { margin-bottom: 12px; }.pairing-qr { display: grid; justify-items: center; gap: 10px; padding: 14px; border: 1px solid #416083; border-radius: 14px; background: #e9f2ff; color: #1b2943; }.pairing-qr img { display: block; width: min(240px, 100%); height: auto; background: white; image-rendering: pixelated; }.pairing-qr p { max-width: 245px; margin: 0; font-size: 12px; line-height: 1.4; }.session-log-wrap h3 { margin: 0 0 10px; color: #cbd9f5; font-size: 13px; }.session-events { display: grid; max-height: 208px; overflow: auto; gap: 0; padding: 0; margin: 0; border: 1px solid #263454; border-radius: 12px; background: #090f1f; list-style: none; }.session-events li { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; align-items: center; gap: 9px; padding: 9px 10px; border-top: 1px solid #202d4b; font-size: 12px; }.session-events li:first-child { border-top: 0; }.session-events li > div { display: grid; gap: 1px; }.session-events li > div span { color: var(--muted); }.session-event-icon { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 8px; background: #263552; color: #c5d5f5; }.session-events li.tone-success .session-event-icon { background: #164b3a; color: #98eec3; }.session-events li.tone-warning .session-event-icon { background: #67491c; color: #ffdc9b; }.session-events li.tone-danger .session-event-icon { background: #662b3c; color: #ffc5ce; }.session-events .ui-icon { width: 15px; height: 15px; stroke-width: 2; }
.grid { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(320px, .85fr); gap: 18px; }.wide { margin-top: 18px; }.section-heading { margin-bottom: 18px; }.section-icon { display: grid; place-items: center; width: 34px; height: 34px; border: 1px solid #386081; border-radius: 11px; color: #a9d3ff; background: #172c4b; font-size: 21px; }.live-icon { color: var(--accent); border-color: #31735b; background: #123d32; }
label { display: grid; gap: 7px; font-weight: 700; } input, textarea, select { width: 100%; color: var(--text); background: #0a1225; border: 1px solid var(--line); border-radius: 10px; padding: 11px; outline: none; } input:focus, textarea:focus, select:focus { border-color: var(--accent); box-shadow: 0 0 0 3px #65d6a420; }textarea { resize: vertical; min-height: 116px; }.actions { margin-top: 15px; }.muted { color: var(--muted); }.status, .error { min-height: 23px; margin: 12px 0 0; font-weight: 650; }.status { color: var(--accent); }.status.error, .error { color: var(--danger); }
.badge, .connection-status { display: inline-flex; align-items: center; gap: 7px; border-radius: 999px; padding: 7px 11px; font-size: 13px; font-weight: 800; }.badge { color: #d9e4ff; background: #26375e; }.badge.ok { color: #bff9d9; background: #1a6047; }.badge.warn { color: #ffe0a1; background: #79511c; }.connection-status { color: #bdd2ff; background: #25365b; }.connection-status i { width: 8px; height: 8px; border-radius: 50%; background: #9aa9c3; }.connection-status.online { color: #bcf5d5; background: #174f3d; }.connection-status.online i { background: var(--accent); box-shadow: 0 0 0 4px #65d6a42b; animation: pulse 1.8s infinite; }.connection-status.offline { color: #ffe0a1; background: #74511e; }.connection-status.offline i { background: var(--amber); }.icon-button { min-width: 42px; min-height: 39px; padding: 7px 11px; font-size: 18px; }
dl { display: grid; grid-template-columns: 1fr auto; gap: 13px; margin: 0 0 20px; }dt { color: var(--muted); }dd { margin: 0; font-weight: 800; }.notice { display: flex; align-items: flex-start; gap: 9px; border: 1px solid #29465a; border-radius: 12px; padding: 11px; color: #b9d9e8; background: #11263a; }.notice span { color: #8dcaff; font-size: 18px; }.notice p { margin: 0; font-size: 13px; }
.table-wrap { overflow-x: auto; border: 1px solid #253250; border-radius: 12px; }table { width: 100%; min-width: 1120px; border-collapse: collapse; }th, td { border-top: 1px solid #253250; padding: 11px 12px; text-align: left; vertical-align: top; white-space: nowrap; }thead th { border-top: 0; color: #9faed0; background: #101a32; font-size: 11px; letter-spacing: .04em; text-transform: uppercase; }tbody tr:hover { background: #1b294830; }.state { display: inline-flex; border-radius: 999px; padding: 3px 8px; background: #2a3752; color: #cdd9f6; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11px; font-weight: 800; }.state.success { background: #184d3c; color: #aaf0cc; }.state.warning { background: #60431c; color: #ffe1a6; }.state.danger { background: #652a3b; color: #ffc5ce; }.empty { color: var(--muted); text-align: center; padding: 22px; }
.event-card { padding-bottom: 18px; }.event-heading { align-items: flex-start; }.event-controls { justify-content: flex-end; flex-wrap: wrap; }.event-controls label { display: flex; align-items: center; gap: 7px; color: var(--muted); font-size: 12px; }.event-controls select { width: auto; min-width: 115px; padding: 7px 9px; }.toggle { white-space: nowrap; }.toggle input { width: 15px; height: 15px; accent-color: var(--accent); }.event-meta { justify-content: space-between; margin: -4px 0 11px; font-size: 12px; }.event-meta > span:first-child { color: #bbcbeb; font-weight: 750; }.event-feed { max-height: 430px; overflow: auto; border: 1px solid #263454; border-radius: 12px; background: #090f1f; }.event-row { display: grid; grid-template-columns: 30px minmax(150px, 1fr) minmax(180px, 1.2fr) auto; align-items: center; gap: 12px; padding: 11px 14px; border-top: 1px solid #202d4b; font: 12px/1.35 ui-monospace, SFMono-Regular, Menlo, monospace; }.event-row:first-child { border-top: 0; }.event-row:hover { background: #14213c; }.event-symbol { display: grid; place-items: center; width: 25px; height: 25px; border-radius: 8px; color: #c5d5f5; background: #263552; font-family: Inter, sans-serif; font-weight: 900; }.event-row.success .event-symbol { color: #98eec3; background: #164b3a; }.event-row.warning .event-symbol { color: #ffdc9b; background: #67491c; }.event-row.danger .event-symbol { color: #ffc5ce; background: #662b3c; }.event-main { display: grid; gap: 2px; }.event-main strong { color: #e6edff; }.event-main span { color: var(--muted); font-size: 11px; }.event-context { display: flex; flex-wrap: wrap; gap: 6px; color: #b9c8e5; }.event-context code { color: #7be7b4; background: #163c33; border-radius: 4px; padding: 1px 5px; }time { color: #9caed0; white-space: nowrap; }.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }.visually-hidden + input { position: absolute; opacity: 0; pointer-events: none; }
@keyframes pulse { 0%, 100% { box-shadow: 0 0 0 3px #65d6a426; } 50% { box-shadow: 0 0 0 7px #65d6a400; } }
@media (max-width: 980px) { .metric-grid { grid-template-columns: repeat(2, 1fr); }.grid { grid-template-columns: 1fr; }.event-heading { align-items: flex-start; flex-direction: column; }.event-controls { justify-content: flex-start; }.event-row { grid-template-columns: 30px 1fr; }.event-context, .event-row time { grid-column: 2; } }
@media (max-width: 640px) { .shell { padding: 20px 13px 48px; } header { align-items: flex-start; flex-direction: column; }.heading-wrap { align-items: flex-start; }.header-actions { width: 100%; }.metric-grid { grid-template-columns: 1fr 1fr; }.metric-card { min-height: 82px; padding: 12px; }.metric-icon { width: 34px; height: 34px; }.card { padding: 17px; }.event-meta { align-items: flex-start; flex-direction: column; gap: 3px; }.event-controls { align-items: flex-start; flex-direction: column; } }

.metric-grid { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
.metric-icon.slate { color: #c6d4f1; background: #344463; }
.progress-value { display: grid; justify-items: end; gap: 5px; min-width: 150px; }
.progress-track { appearance: none; -webkit-appearance: none; width: 150px; height: 7px; overflow: hidden; border: 0; border-radius: 999px; background: #283957; }
.progress-track::-webkit-progress-bar { background: #283957; border-radius: 999px; }
.progress-track::-webkit-progress-value { border-radius: 999px; background: linear-gradient(90deg, #54c998, #80aaff); transition: width .25s ease; }
.progress-track::-moz-progress-bar { border-radius: 999px; background: linear-gradient(90deg, #54c998, #80aaff); }
.estimate-note { display: block; max-width: 185px; color: var(--muted); font-size: 11px; font-weight: 600; line-height: 1.25; text-align: right; }

/* Native SVG symbols keep the console self-contained: no icon CDN is loaded. */
.icon-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.ui-icon { width: 1em; height: 1em; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 0; }
.state .ui-icon, .badge .ui-icon, .event-symbol .ui-icon { width: 14px; height: 14px; }
.filters { display: flex; align-items: end; flex-wrap: wrap; gap: 12px; margin: -2px 0 18px; }
.filters label { min-width: 180px; flex: 1 1 180px; color: var(--muted); font-size: 12px; }
.filters select, .filters input { min-width: 0; padding: 9px 10px; }
.filters label.compact-filter { min-width: 132px; flex-basis: 132px; }
.table-heading { align-items: flex-start; }
.contact-button { display: inline-flex; align-items: center; gap: 8px; min-width: 0; padding: 2px; color: var(--text); background: transparent; box-shadow: none; font-weight: 750; text-align: left; }
.contact-button:hover:not(:disabled) { color: var(--accent); background: transparent; transform: none; }
.chevron { display: grid; place-items: center; width: 18px; height: 18px; border-radius: 6px; color: #a9c8ff; background: #203357; font-size: 16px; line-height: 1; }
.state { align-items: center; gap: 6px; font-family: inherit; white-space: nowrap; }
.state.tone-success, .badge.tone-success { color: #aaf0cc; background: #184d3c; }
.state.tone-warning, .badge.tone-warning { color: #ffe1a6; background: #60431c; }
.state.tone-danger, .badge.tone-danger { color: #ffc5ce; background: #652a3b; }
.state.tone-active, .badge.tone-active { color: #bdd7ff; background: #294775; }
.state.tone-neutral, .badge.tone-neutral { color: #cdd9f6; background: #2a3752; }
.state.compact { padding: 3px 7px; font-size: 11px; }
.call-detail td { padding: 0 12px 14px; white-space: normal; background: #0d172d; }
.detail-grid { display: grid; grid-template-columns: minmax(250px, 1.2fr) minmax(220px, .8fr); gap: 14px; padding: 14px; border: 1px solid #2a3b61; border-radius: 12px; background: #101d37; }
.detail-grid section { min-width: 0; }.detail-grid h3 { margin: 0 0 10px; font-size: 13px; color: #cbd9f5; }
.detail-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }.attempt-result { grid-template-columns: 1fr auto; gap: 8px 12px; margin: 0; font-size: 12px; }.attempt-result dt { font-size: 12px; }.attempt-result dd { font-size: 12px; }
.call-history { display: grid; gap: 7px; padding: 0; margin: 0; list-style: none; }.call-history li { display: flex; align-items: center; justify-content: space-between; gap: 9px; }.call-history time { font-size: 11px; }
.telemetry-list { display: grid; gap: 6px; padding-left: 18px; margin: 0; color: #c9d7f1; }.telemetry-list li::marker { color: var(--accent); }.transmission-note { margin: 11px 0 0; color: #b9d9e8; font-size: 12px; }
.event-row.tone-success .event-symbol { color: #98eec3; background: #164b3a; }.event-row.tone-warning .event-symbol { color: #ffdc9b; background: #67491c; }.event-row.tone-danger .event-symbol { color: #ffc5ce; background: #662b3c; }.event-row.tone-active .event-symbol { color: #b9d4ff; background: #294775; }.event-row.tone-neutral .event-symbol { color: #c5d5f5; background: #263552; }
.event-symbol .ui-icon { width: 15px; height: 15px; }.event-group { color: #8dd9b7; background: #123d32; border-radius: 999px; padding: 2px 7px; }
.metric-icon .ui-icon { width: 21px; height: 21px; stroke-width: 2; }
.event-contact { display: inline-flex; align-items: center; gap: 4px; color: #a9d3ff; font-weight: 750; }.event-contact .ui-icon { width: 13px; height: 13px; stroke-width: 2; }
@media (max-width: 980px) { .detail-grid { grid-template-columns: 1fr; } }
@media (max-width: 640px) { .filters label { flex-basis: 100%; }.table-heading { flex-direction: column; gap: 5px; } }
@media (max-width: 1120px) { .connection-grid { grid-template-columns: 1fr 1fr; }.session-log-wrap { grid-column: 1 / -1; } }
@media (max-width: 640px) { .connection-grid { grid-template-columns: 1fr; }.session-log-wrap { grid-column: auto; } }