:root { color-scheme: dark; font-family: Inter, ui-sans-serif, system-ui, sans-serif; background: #101315; color: #f0f4f1; }
* { box-sizing: border-box; }
body { margin: 0; min-width: 320px; background: #101315; color: #f0f4f1; }
button, input { font: inherit; }
button { border: 0; border-radius: 6px; background: #26bd66; color: #07150d; cursor: pointer; font-weight: 750; min-height: 42px; padding: 0 16px; }
button:hover { background: #42ce7e; }
button:focus-visible, input:focus-visible { outline: 3px solid #9ee9ba; outline-offset: 2px; }
.topbar { align-items: center; border-bottom: 1px solid #28312c; display: flex; justify-content: space-between; min-height: 84px; padding: 16px max(24px, calc((100vw - 1160px) / 2)); }
h1, h2, h3, p { margin: 0; }
h1 { font-size: 1.5rem; letter-spacing: 0; }
h2 { font-size: 1.25rem; letter-spacing: 0; }
h3 { font-size: 1rem; }
.eyebrow { color: #81dca3; font-size: .75rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.lede { color: #aab6ad; margin-top: 8px; }
.dashboard { margin: 0 auto; max-width: 1160px; padding: 36px 24px 56px; }
.session-create { border-bottom: 1px solid #28312c; display: grid; gap: 24px; grid-template-columns: minmax(200px, .8fr) minmax(360px, 1.2fr); padding: 0 0 32px; }
.session-create p:not(.eyebrow) { color: #aab6ad; margin-top: 8px; max-width: 45ch; }
.pair-form { align-items: end; display: grid; gap: 12px; grid-template-columns: 1fr 1fr auto; }
label { color: #c4cec7; display: grid; font-size: .8rem; font-weight: 700; gap: 7px; }
input { background: #171d19; border: 1px solid #405047; border-radius: 5px; color: #f0f4f1; min-height: 42px; padding: 0 12px; width: 100%; }
.section-heading { align-items: end; display: flex; justify-content: space-between; margin: 32px 0 14px; }
.session-count { color: #aab6ad; font-size: .875rem; }
.sessions { border-top: 1px solid #28312c; }
.session-row { align-items: center; border-bottom: 1px solid #28312c; display: grid; gap: 16px; grid-template-columns: minmax(180px, 1.1fr) minmax(180px, 1fr) auto; min-height: 112px; padding: 16px 0; }
.session-summary { align-items: center; display: flex; gap: 12px; }
.session-number, .session-state { color: #aab6ad; font-size: .875rem; margin-top: 5px; }
.session-detail { min-width: 0; }
.pairing-code { color: #8ae9ad; display: inline-block; font-size: 1.15rem; font-weight: 800; letter-spacing: .1em; margin-top: 6px; }
.session-error, .form-error { color: #ff9e9e; font-size: .8rem; margin-top: 6px; }
.session-actions, .header-actions { align-items: center; display: flex; gap: 10px; }
.button-secondary { background: transparent; border: 1px solid #526159; color: #e7eee9; }
.button-secondary:hover { background: #202923; }
.button-danger { background: transparent; border: 1px solid #a44d4d; color: #ffb2b2; }
.button-danger:hover { background: #4c2424; }
.status-dot, .session-status { align-items: center; color: #aab6ad; display: inline-flex; font-size: .78rem; font-weight: 700; gap: 6px; text-transform: capitalize; }
.status-dot::before, .session-status::before { background: #7e8a82; border-radius: 99px; content: ""; height: 8px; width: 8px; }
.status-connected::before { background: #3cdc7a; }.status-pairing::before, .status-connecting::before { background: #e6bb4b; }.status-error::before, .status-logged_out::before { background: #ec6464; }.status-disconnected::before { background: #96a29b; }
.empty-state { color: #aab6ad; padding: 24px 0; }.login-page { align-items: center; display: grid; min-height: 100vh; padding: 24px; place-items: center; }.login-shell { max-width: 360px; width: 100%; }.login-form { display: grid; gap: 14px; margin-top: 30px; }
@media (max-width: 760px) { .topbar { align-items: flex-start; gap: 14px; padding: 16px 20px; }.dashboard { padding: 28px 20px; }.session-create, .pair-form, .session-row { grid-template-columns: 1fr; }.session-row { align-items: start; }.session-actions { width: 100%; }.session-actions button { flex: 1; }.header-actions { align-items: flex-end; flex-direction: column; }.topbar h1 { font-size: 1.25rem; } }