:root {
  --bg: #0b1020;
  --panel: #11182c;
  --panel-2: #151d34;
  --ink: #f6f7fb;
  --muted: #8f98b1;
  --line: rgba(255,255,255,.1);
  --lime: #d8f36b;
  --coral: #ff7867;
}

* { box-sizing: border-box; }
body { margin: 0; min-width: 320px; background: var(--bg); color: var(--ink); font-family: Manrope, system-ui, sans-serif; }
button, input { font: inherit; }
button { cursor: pointer; }
.app-shell { position: relative; min-height: 100vh; min-height: 100dvh; overflow: hidden; background: radial-gradient(circle at 78% 34%, #1b2547 0, rgba(27,37,71,.36) 17%, transparent 42%), var(--bg); }
.app-shell::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .34; background-image: linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px); background-size: 72px 72px; mask-image: linear-gradient(to bottom, black, transparent 80%); }
.view { position: relative; z-index: 1; max-width: 1240px; margin: auto; }
.room-heading-right { display: flex; align-items: center; gap: 24px; }
.connection-state { display: flex; align-items: center; gap: 8px; color: var(--muted); font: 11px "DM Mono", monospace; text-transform: uppercase; letter-spacing: .06em; }
.status-dot { width: 7px; height: 7px; display: inline-block; border-radius: 50%; background: var(--lime); box-shadow: 0 0 14px var(--lime); }.status-dot.offline { background: var(--coral); box-shadow: 0 0 14px var(--coral); }
.lobby { position: fixed; inset: 0; width: auto; max-width: none; min-height: 100vh; min-height: 100dvh; display: flex; align-items: center; justify-content: center; margin: 0; padding: 40px 24px; }
.eyebrow, .card-kicker { color: var(--lime); font: 11px "DM Mono", monospace; letter-spacing: .16em; }.eyebrow { display: flex; gap: 10px; align-items: center; }.eyebrow-line { width: 24px; height: 1px; background: var(--lime); }
h1 { max-width: 700px; margin: 22px 0 24px; font-size: clamp(52px, 7vw, 96px); line-height: .98; letter-spacing: -.07em; }.lobby h1 span { color: var(--lime); }
.lede { max-width: 470px; color: var(--muted); font-size: 15px; line-height: 1.9; }.feature-row { display: flex; gap: 38px; margin-top: 54px; }.feature-row div { display: flex; gap: 12px; }.feature-row strong { color: var(--lime); font: 11px "DM Mono", monospace; }.feature-row span { color: #bcc3d4; font-size: 11px; line-height: 1.5; }
.join-card { width: min(100%, 390px); padding: 38px; background: rgba(17,24,44,.9); border: 1px solid var(--line); box-shadow: 0 28px 80px rgba(0,0,0,.28); }.join-card h2 { margin: 14px 0 34px; font-size: 34px; line-height: 1.05; letter-spacing: -.06em; }.join-card label { display: block; margin: 19px 0 8px; color: var(--muted); font: 10px "DM Mono", monospace; letter-spacing: .12em; }
input { width: 100%; padding: 13px 0; border: 0; border-bottom: 1px solid #3a435b; outline: none; background: transparent; color: var(--ink); font-size: 14px; transition: border .2s; } input:focus { border-color: var(--lime); } input::placeholder { color: #626b84; }.input-with-prefix { display: flex; align-items: center; gap: 8px; border-bottom: 1px solid #3a435b; }.input-with-prefix:focus-within { border-color: var(--lime); }.input-with-prefix span { color: var(--lime); font: 12px "DM Mono", monospace; }.input-with-prefix input { border: 0; }
.primary-button { width: 100%; margin-top: 35px; padding: 16px 18px; display: flex; align-items: center; justify-content: space-between; border: 0; color: var(--bg); background: var(--lime); font-size: 13px; font-weight: 800; transition: transform .2s, background .2s; }.primary-button:hover { transform: translateY(-2px); background: #e7ff89; }.primary-button b { font-size: 18px; }.form-error { min-height: 18px; margin: 14px 0 0; color: var(--coral); font-size: 11px; line-height: 1.5; }.card-foot { margin-top: 26px; padding-top: 20px; border-top: 1px solid var(--line); color: #66718b; font: 10px "DM Mono", monospace; }.lock-icon { color: var(--lime); margin-right: 6px; }
.hidden { display: none !important; }.room { min-height: 100vh; padding: 52px 42px 42px; }.room-heading { display: flex; align-items: end; justify-content: space-between; margin-bottom: 34px; }.room-heading h2 { margin: 13px 0 0; font-size: 42px; letter-spacing: -.06em; }.connection-state { color: var(--lime); }.ghost-button { padding: 10px 14px; border: 1px solid var(--line); background: transparent; color: var(--ink); font-size: 11px; }.ghost-button:hover { border-color: var(--lime); }.ghost-button span { color: var(--lime); margin-left: 8px; }.room-error { padding: 12px 16px; margin-bottom: 18px; border: 1px solid rgba(255,120,103,.3); color: var(--coral); font-size: 12px; }.participant-grid { min-height: 490px; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; }.participant-tile { position: relative; min-height: 250px; overflow: hidden; background: var(--panel); border: 1px solid var(--line); }.participant-tile.speaking { border-color: var(--lime); box-shadow: 0 0 0 1px var(--lime); }.participant-media { width: 100%; height: 100%; min-height: 250px; display: flex; align-items: center; justify-content: center; }.participant-media video { width: 100%; height: 100%; min-height: 250px; object-fit: cover; }.participant-media audio { display: none; }.avatar { width: 64px; height: 64px; display: grid; place-items: center; border-radius: 50%; color: var(--bg); background: var(--lime); font-size: 24px; font-weight: 800; }.tile-label { position: absolute; bottom: 13px; left: 14px; right: 14px; display: flex; align-items: center; justify-content: space-between; color: white; font-size: 12px; text-shadow: 0 1px 10px #000; }.tile-label small { color: var(--lime); font: 10px "DM Mono", monospace; }.room-footer { margin-top: 24px; display: flex; align-items: center; justify-content: space-between; }.participant-count, .room-clock { color: var(--muted); font: 11px "DM Mono", monospace; }.count-icon { color: var(--lime); margin-right: 7px; }.controls { display: flex; gap: 8px; }.control-button { min-width: 82px; padding: 10px 13px; display: flex; align-items: center; justify-content: center; gap: 7px; border: 1px solid var(--line); background: var(--panel); color: var(--ink); font-size: 11px; }.control-button:hover, .control-button.active { border-color: rgba(216,243,107,.55); }.control-button.active .control-icon { color: var(--lime); }.control-button.danger { color: var(--coral); }.control-icon { color: var(--muted); font-size: 15px; }
@media (max-width: 800px) { .lobby { min-height: 100vh; min-height: 100dvh; padding: 24px; }.join-card { padding: 28px 24px; }.room { padding: 36px 20px 28px; }.room-heading { align-items: start; flex-direction: column; gap: 20px; }.room-heading h2 { font-size: 34px; }.room-heading-right { width: 100%; justify-content: space-between; }.participant-grid { min-height: 360px; grid-template-columns: 1fr 1fr; }.participant-tile, .participant-media, .participant-media video { min-height: 180px; }.room-footer { flex-wrap: wrap; gap: 20px; }.controls { order: 3; width: 100%; }.control-button { flex: 1; min-width: auto; }.room-clock { display: none; } }
@media (max-width: 460px) { .participant-grid { grid-template-columns: 1fr; }.participant-tile, .participant-media, .participant-media video { min-height: 240px; }.feature-row { flex-wrap: wrap; } }