@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Manrope:wght@400;500;600;700;800&display=swap');

:root { --ink:#102a43; --ink-soft:#486581; --paper:#f7f8f5; --surface:#fff; --line:#d9e2ec; --teal:#0d9488; --teal-pale:#d9f5ef; --amber:#c47b16; --amber-pale:#fff2d6; --coral:#d35c4b; --coral-pale:#fbe2dd; --shadow:0 14px 40px rgba(16,42,67,.08); }
* { box-sizing:border-box; }
body { margin:0; color:var(--ink); background:var(--paper); font-family:'Manrope', sans-serif; }
body:before { content:''; position:fixed; inset:0; pointer-events:none; opacity:.42; background-image:linear-gradient(rgba(16,42,67,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(16,42,67,.025) 1px,transparent 1px); background-size:32px 32px; }
button,input { font:inherit; }
button { cursor:pointer; }
.app-shell { position:relative; max-width:1440px; margin:auto; padding:0 42px 34px; }
.topbar { min-height:92px; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid var(--line); }
.brand-lockup,.topbar-meta,.panel-heading,.response-heading,.control-row { display:flex; align-items:center; }
.brand-lockup { gap:13px; }.brand-mark { width:42px; height:42px; display:grid; place-items:center; color:#fff; background:var(--ink); font-weight:800; letter-spacing:-1px; }
h1,h2,h3,p { margin:0; } h1 { font-size:21px; letter-spacing:-.7px; } h2 { margin-top:11px; font-size:clamp(34px,4.4vw,62px); line-height:1.03; letter-spacing:-2.8px; max-width:720px; } h2 em { color:var(--teal); font-style:normal; } h3 { font-size:18px; letter-spacing:-.5px; }.eyebrow,.panel-kicker,.stamp-label { font-family:'DM Mono',monospace; font-size:10px; font-weight:500; letter-spacing:1.2px; }.eyebrow { color:var(--ink-soft); }.accent { color:var(--teal); }
.topbar-meta { gap:10px; font-size:11px; font-weight:700; }.connection-badge,.network-badge,.sqlite-badge,.live-dot { padding:8px 11px; border:1px solid var(--line); background:var(--surface); }.connection-badge i,.live-dot i { display:inline-block; width:7px; height:7px; margin-right:6px; border-radius:50%; background:var(--teal); }.network-badge { color:var(--ink-soft); }.network-badge span { color:var(--teal); font-size:17px; vertical-align:-2px; }
.hero { display:flex; justify-content:space-between; align-items:end; gap:30px; padding:66px 0 48px; }.hero-copy { max-width:630px; margin-top:19px; color:var(--ink-soft); font-size:14px; line-height:1.7; }.hero-stamp { min-width:220px; padding:19px; border-left:3px solid var(--amber); background:var(--amber-pale); }.stamp-label { display:block; color:var(--amber); }.hero-stamp strong { display:block; margin:8px 0 4px; font-size:14px; }.hero-stamp span:last-child { color:var(--ink-soft); font-size:11px; }
.dashboard-grid { display:grid; grid-template-columns:1.15fr .85fr; gap:18px; }.panel { min-width:0; padding:25px; background:var(--surface); border:1px solid var(--line); box-shadow:var(--shadow); }.panel-heading { justify-content:space-between; gap:12px; margin-bottom:25px; }.panel-kicker { margin-bottom:8px; color:var(--teal); }.status-pill,.count-badge,.flow-label { font-family:'DM Mono',monospace; font-size:10px; letter-spacing:.8px; }.status-pill { padding:8px 10px; color:var(--ink-soft); background:#edf1f4; }.status-playing { color:#08786e; background:var(--teal-pale); }.status-paused { color:#a3640d; background:var(--amber-pale); }.status-stopped { color:#a6463b; background:var(--coral-pale); }.status-idle { color:var(--ink-soft); }.count-badge { min-width:30px; height:30px; display:grid; place-items:center; color:var(--teal); background:var(--teal-pale); border-radius:50%; }.room-id-block { position:relative; padding:16px; background:#f1f5f7; border:1px solid var(--line); }.room-id-block span,.facts-grid dt { display:block; color:var(--ink-soft); font-family:'DM Mono',monospace; font-size:10px; letter-spacing:.8px; }.room-id-block strong { display:block; margin-top:7px; overflow:hidden; text-overflow:ellipsis; font-family:'DM Mono',monospace; font-size:16px; }.icon-button { position:absolute; right:10px; bottom:10px; border:0; background:transparent; color:var(--teal); font-size:18px; }.icon-button:disabled { opacity:.35; cursor:not-allowed; }.facts-grid { display:grid; grid-template-columns:1fr 1fr; gap:20px 18px; margin:25px 0 0; }.facts-grid dd { margin:7px 0 0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-family:'DM Mono',monospace; font-size:12px; }
.participant-list { display:grid; gap:10px; }.participant { display:flex; align-items:center; gap:12px; padding:13px; border:1px solid var(--line); }.participant-avatar { width:32px; height:32px; display:grid; place-items:center; color:var(--teal); background:var(--teal-pale); font-family:'DM Mono',monospace; font-size:12px; font-weight:500; }.participant strong { display:block; font-size:12px; }.participant small { display:block; margin-top:3px; color:var(--ink-soft); font-family:'DM Mono',monospace; font-size:10px; }.role-tag { margin-left:auto; color:var(--ink-soft); font-family:'DM Mono',monospace; font-size:9px; }.empty-state { padding:22px 4px; color:var(--ink-soft); text-align:center; }.empty-icon { display:block; margin-bottom:10px; color:var(--teal); font-size:28px; }.empty-state p { font-size:13px; }.empty-state small { display:block; margin-top:7px; font-family:'DM Mono',monospace; font-size:10px; }
.controls-panel { grid-column:1 / -1; }.identity-fields { display:grid; grid-template-columns:1fr 1fr; gap:13px; margin-bottom:18px; }.identity-fields label { color:var(--ink-soft); font-family:'DM Mono',monospace; font-size:10px; letter-spacing:.5px; }.identity-fields input { display:block; width:100%; margin-top:8px; padding:12px; color:var(--ink); border:1px solid var(--line); outline-color:var(--teal); background:#fbfcfb; font-family:'DM Mono',monospace; font-size:12px; }.control-row { gap:12px; margin-top:12px; }.action-button { flex:1; min-height:48px; padding:12px 15px; color:var(--ink); border:1px solid var(--line); background:#fff; font-size:12px; font-weight:800; text-transform:uppercase; letter-spacing:.4px; transition:transform .18s,background .18s,border-color .18s; }.action-button span { margin-right:6px; color:var(--teal); font-size:17px; }.action-button:hover:not(:disabled) { transform:translateY(-2px); border-color:var(--teal); }.action-button:disabled { opacity:.4; cursor:not-allowed; }.action-button.primary { color:#fff; border-color:var(--ink); background:var(--ink); }.action-button.primary span { color:#fff; }.action-button.play { color:#08786e; border-color:#b6e6dc; background:var(--teal-pale); }.action-button.stop { color:#a6463b; border-color:#f1c1b9; background:var(--coral-pale); }.control-hint { margin-top:16px; color:var(--ink-soft); font-family:'DM Mono',monospace; font-size:10px; }
.persistence-panel { background:var(--ink); color:#fff; border-color:var(--ink); }.persistence-panel .panel-kicker,.persistence-panel .sqlite-badge { color:#88dfd0; }.persistence-panel .sqlite-badge { border-color:#315069; background:#173a55; }.evidence-list { display:grid; gap:17px; padding:0; margin:0; list-style:none; }.evidence-list li { display:flex; gap:12px; align-items:start; color:#66839a; }.evidence-list li > span { width:21px; height:21px; display:grid; place-items:center; border:1px solid #315069; color:#66839a; font-family:'DM Mono',monospace; font-size:11px; }.evidence-list li strong { display:block; font-size:12px; }.evidence-list li small { display:block; margin-top:4px; color:#66839a; font-family:'DM Mono',monospace; font-size:10px; }.evidence-list li.done { color:#d9f5ef; }.evidence-list li.done > span { color:#102a43; border-color:#88dfd0; background:#88dfd0; }.evidence-list li.done small { color:#88dfd0; }.evidence-list li.failed { color:#ffc0b5; }.evidence-list li.failed > span { color:#fff; border-color:#d35c4b; background:#d35c4b; }.evidence-list li.failed small { color:#ffc0b5; }
.flow-panel { grid-column:1 / -1; }.flow-label { color:var(--ink-soft); }.flow-diagram { display:grid; grid-template-columns:repeat(9,1fr); gap:8px; align-items:center; }.flow-node { padding:15px 8px; text-align:center; color:var(--ink-soft); border:1px solid var(--line); background:#fbfcfb; font-family:'DM Mono',monospace; font-size:10px; transition:.2s; }.flow-node span { display:block; margin-bottom:7px; color:var(--teal); font-size:9px; }.flow-node.active { color:#fff; border-color:var(--teal); background:var(--teal); transform:translateY(-4px); }.flow-node.active span { color:#d9f5ef; }.flow-diagram b { display:none; color:var(--teal); }.activity-list { display:grid; gap:10px; }.activity-item { display:flex; justify-content:space-between; gap:10px; padding-bottom:10px; border-bottom:1px solid var(--line); font-size:12px; }.activity-item strong { color:var(--teal); }.activity-item time { color:var(--ink-soft); font-family:'DM Mono',monospace; font-size:10px; white-space:nowrap; }.muted { color:var(--ink-soft); font-size:12px; }.response-section { margin-top:18px; padding:25px; background:#102a43; color:#d9f5ef; box-shadow:var(--shadow); }.response-heading { justify-content:space-between; margin-bottom:18px; }.response-heading .panel-kicker { color:#88dfd0; }.response-heading > span { color:#88dfd0; font-family:'DM Mono',monospace; font-size:10px; }.response-section pre { min-height:90px; max-height:250px; overflow:auto; padding:18px; margin:0; color:#d6e5ef; background:#0b2135; border:1px solid #315069; font-family:'DM Mono',monospace; font-size:11px; line-height:1.65; white-space:pre-wrap; }.notice { margin-bottom:18px; padding:13px 16px; border-left:3px solid var(--coral); color:#8b3c34; background:var(--coral-pale); font-size:12px; }.notice.success { color:#08786e; border-color:var(--teal); background:var(--teal-pale); } footer { display:flex; justify-content:space-between; gap:20px; padding-top:25px; color:var(--ink-soft); font-family:'DM Mono',monospace; font-size:10px; }
@media (max-width:900px) { .app-shell { padding:0 22px 28px; }.hero { align-items:start; flex-direction:column; padding:46px 0 34px; }.hero-stamp { width:100%; }.dashboard-grid { grid-template-columns:1fr; }.controls-panel,.flow-panel { grid-column:auto; }.flow-diagram { grid-template-columns:1fr; gap:5px; }.flow-node { text-align:left; }.flow-node span { display:inline; margin:0 8px 0 0; }.flow-diagram b { display:block; text-align:center; }.topbar { align-items:start; flex-direction:column; gap:15px; padding:20px 0; }.topbar-meta { flex-wrap:wrap; } }
@media (max-width:560px) { h2 { font-size:37px; letter-spacing:-1.8px; }.panel { padding:19px; }.identity-fields { grid-template-columns:1fr; }.control-row { align-items:stretch; flex-direction:column; }.facts-grid { gap:18px 10px; } footer { flex-direction:column; } }