:root { color-scheme: dark; --ink: #eff4fb; --muted: #95a5b9; --subtle: #617088; --line: rgba(167, 191, 219, .15); --panel: rgba(13, 27, 47, .76); --panel-solid: #0d1b2f; --accent: #b9f56f; --accent-ink: #14220a; --purple: #a8a2ff; }
* { box-sizing: border-box; }
html, body { min-height: 100%; margin: 0; }
body { background: #07111f; color: var(--ink); font-family: "DM Sans", sans-serif; overflow-x: hidden; }
body::before { content: ""; position: fixed; inset: 0; opacity: .32; pointer-events: none; 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: 48px 48px; mask-image: linear-gradient(to bottom, black, transparent 85%); }
.background-glow { position: fixed; width: 34rem; height: 34rem; border-radius: 50%; filter: blur(100px); opacity: .16; pointer-events: none; }
.glow-one { top: -20rem; right: 10%; background: #6e60ff; }
.glow-two { bottom: -22rem; left: -10rem; background: #5ec5a3; }
.app-shell { width: min(1180px, calc(100% - 44px)); min-height: 100vh; margin: 0 auto; position: relative; z-index: 1; }
.login-layout { min-height: 100vh; display: grid; grid-template-columns: 1.05fr .95fr; align-items: center; gap: clamp(3rem, 9vw, 9rem); padding: 4rem 0; }
.brand-mark { width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; gap: 3px; transform: rotate(-12deg); margin-bottom: 2rem; }
.brand-mark span { display: block; width: 6px; border-radius: 8px; background: var(--accent); box-shadow: 0 0 16px rgba(185, 245, 111, .38); }
.brand-mark span:nth-child(1) { height: 16px; }.brand-mark span:nth-child(2) { height: 29px; }.brand-mark span:nth-child(3) { height: 38px; }.brand-mark span:nth-child(4) { height: 23px; }
.brand-mark.small { width: 25px; height: 25px; margin: 0; gap: 2px; }.brand-mark.small span { width: 3px; }.brand-mark.small span:nth-child(1) { height: 9px; }.brand-mark.small span:nth-child(2) { height: 16px; }.brand-mark.small span:nth-child(3) { height: 22px; }.brand-mark.small span:nth-child(4) { height: 14px; }
.eyebrow, .panel-kicker, .card-topline, .you-label { letter-spacing: .18em; font-size: .69rem; font-weight: 700; color: var(--subtle); margin: 0; }
h1, h2, p { margin-top: 0; } h1, h2 { font-family: "Space Grotesk", sans-serif; }
h1 { font-size: clamp(3rem, 5.3vw, 5.4rem); line-height: .99; letter-spacing: -.065em; margin: 1.1rem 0 1.5rem; }
h1 em { color: var(--purple); font-style: normal; }
.brand-copy { width: min(380px, 100%); color: var(--muted); line-height: 1.65; font-size: 1rem; }
.signal-line { display: flex; gap: .6rem; align-items: center; color: var(--subtle); font-size: .78rem; margin-top: 2rem; }.signal-dot, .live-dot { width: 7px; height: 7px; display: inline-block; background: var(--accent); border-radius: 50%; box-shadow: 0 0 0 5px rgba(185,245,111,.08), 0 0 13px rgba(185,245,111,.65); }
.card { background: linear-gradient(140deg, rgba(21, 39, 65, .87), rgba(8, 19, 35, .81)); border: 1px solid var(--line); box-shadow: 0 25px 75px rgba(0, 0, 0, .23); backdrop-filter: blur(16px); }
.login-card { width: min(450px, 100%); padding: clamp(2rem, 5vw, 3.2rem); border-radius: 24px; justify-self: end; }.card-topline { display: flex; gap: .65rem; align-items: center; margin-bottom: 2.6rem; color: var(--purple); }.card-topline::before { content: ""; width: 27px; height: 1px; background: var(--purple); opacity: .7; }
.login-card h2 { font-size: 2.25rem; letter-spacing: -.055em; margin-bottom: .6rem; }.muted { color: var(--muted); line-height: 1.55; }.login-card > .muted { margin-bottom: 2rem; font-size: .9rem; }
label { display: block; font-size: .76rem; font-weight: 600; color: #c5d0df; margin: 1.15rem 0 .55rem; } input { width: 100%; border: 1px solid var(--line); background: rgba(4, 12, 24, .72); color: var(--ink); border-radius: 10px; outline: none; padding: .92rem 1rem; font: inherit; transition: border .2s, box-shadow .2s; } input:focus { border-color: var(--purple); box-shadow: 0 0 0 3px rgba(168, 162, 255, .12); } input::placeholder { color: #52647d; }
.primary-button { cursor: pointer; width: 100%; margin-top: 1.7rem; display: flex; align-items: center; justify-content: space-between; border: 0; border-radius: 10px; background: var(--accent); color: var(--accent-ink); font: 700 .9rem "DM Sans", sans-serif; padding: 1rem 1.15rem; transition: transform .2s, box-shadow .2s; }.primary-button:hover { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(185,245,111,.18); }.button-arrow { font-size: 1.25rem; }.error-message { color: #ff9d9d; min-height: 1.25rem; font-size: .78rem; margin: .7rem 0 0; }.privacy-note { color: var(--subtle); font-size: .69rem; display: flex; gap: .45rem; margin: 2.5rem 0 0; align-items: center; }.lock-icon { color: var(--accent); font-size: 1rem; }
.hidden { display: none !important; }.room-layout { padding: 1.75rem 0 2.3rem; min-height: 100vh; }.room-header { display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--line); padding-bottom: 1.4rem; }.header-brand { display: flex; align-items: center; gap: .75rem; font: 600 .78rem "Space Grotesk", sans-serif; letter-spacing: .12em; }.header-brand strong { color: var(--purple); }.room-status { color: var(--subtle); font-size: .75rem; display: flex; align-items: center; gap: .55rem; }.ghost-button { background: transparent; color: var(--muted); border: 1px solid var(--line); border-radius: 8px; padding: .58rem .85rem; cursor: pointer; font: 600 .75rem "DM Sans", sans-serif; }.ghost-button:hover { color: var(--ink); border-color: #71819a; }.ghost-button span { color: var(--purple); margin-left: .35rem; }
.header-actions { display: flex; align-items: center; gap: .55rem; }
.room-main { display: grid; grid-template-columns: .8fr 1.2fr; gap: clamp(2rem, 8vw, 8rem); align-items: start; padding: 7rem 0 5.5rem; }.room-intro h1 { font-size: clamp(3.2rem, 6vw, 6.6rem); }.room-intro .muted { font-size: 1rem; }
.participants-panel { border-radius: 18px; min-height: 360px; padding: 1.5rem; }.panel-heading { display: flex; align-items: flex-start; justify-content: space-between; padding-bottom: 1.2rem; border-bottom: 1px solid var(--line); }.panel-heading h2 { font-size: 1.55rem; letter-spacing: -.04em; margin: .4rem 0 0; }.room-pill { color: var(--subtle); border: 1px solid var(--line); border-radius: 50px; padding: .35rem .55rem; font-size: .62rem; font-weight: 700; letter-spacing: .1em; }.participants-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; padding-top: 1.2rem; }.participant { display: flex; align-items: center; gap: .75rem; padding: .75rem; border: 1px solid rgba(167,191,219,.1); border-radius: 12px; background: rgba(0, 0, 0, .12); }.participant-meta { min-width: 0; }.participant-name { display: block; font-weight: 600; font-size: .88rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.participant-state { color: var(--subtle); font-size: .69rem; display: flex; gap: .32rem; align-items: center; margin-top: .15rem; }.participant-state::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--accent); }.participant-state.muted::before { background: #f29ca4; }.avatar { width: 38px; height: 38px; flex: 0 0 38px; border-radius: 12px; display: grid; place-items: center; background: #303265; color: var(--purple); font: 700 1rem "Space Grotesk", sans-serif; }.avatar:nth-child(3n) { background: #263b3e; color: var(--accent); }.avatar-local { background: rgba(185,245,111,.16); color: var(--accent); }.empty-state { min-height: 245px; display: flex; flex-direction: column; justify-content: center; align-items: center; color: var(--subtle); }.empty-icon { font-size: 2rem; color: var(--purple); }.empty-state p { margin: .7rem 0 .15rem; color: var(--muted); }.empty-state span:last-child { font-size: .78rem; }
.room-controls { display: flex; align-items: center; gap: 1.6rem; padding: 1rem 1.2rem; border-radius: 16px; }.control-user { display: flex; align-items: center; gap: .7rem; min-width: 140px; }.control-user strong { display: block; font-size: .86rem; margin-top: .2rem; }.controls-divider { height: 30px; width: 1px; background: var(--line); }.control-button { cursor: pointer; display: flex; align-items: center; gap: .5rem; background: rgba(185,245,111,.1); color: var(--accent); border: 1px solid rgba(185,245,111,.16); border-radius: 8px; padding: .65rem .85rem; font: 600 .76rem "DM Sans", sans-serif; }.control-button.is-muted { color: #ff9d9d; background: rgba(255, 157, 157, .1); border-color: rgba(255, 157, 157, .2); }.volume-control { display: flex; align-items: center; gap: .6rem; margin-left: auto; color: var(--muted); font-size: .75rem; }.volume-icon { color: var(--purple); font-size: 1.2rem; }.volume-control input { width: 115px; padding: 0; accent-color: var(--purple); border: 0; background: transparent; }
.toast { position: fixed; left: 50%; bottom: 1.5rem; transform: translate(-50%, 150%); padding: .7rem 1rem; background: #182944; border: 1px solid var(--line); border-radius: 9px; color: var(--ink); font-size: .78rem; box-shadow: 0 12px 35px rgba(0,0,0,.3); transition: transform .25s; z-index: 5; }.toast.visible { transform: translate(-50%, 0); }
.settings-modal { position: fixed; inset: 0; z-index: 10; display: grid; place-items: center; padding: 1.25rem; }
.settings-backdrop { position: absolute; inset: 0; background: rgba(2, 8, 17, .76); backdrop-filter: blur(7px); }
.settings-card { position: relative; width: min(520px, 100%); max-height: calc(100vh - 2.5rem); overflow: auto; border-radius: 18px; padding: clamp(1.35rem, 4vw, 2rem); }
.settings-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; padding-bottom: 1.15rem; border-bottom: 1px solid var(--line); }
.settings-heading h2 { margin: .35rem 0 0; font-size: 1.75rem; letter-spacing: -.045em; }
.icon-button { width: 2rem; height: 2rem; border: 1px solid var(--line); border-radius: 8px; background: transparent; color: var(--muted); cursor: pointer; font-size: 1.4rem; line-height: 1; }
.icon-button:hover { color: var(--ink); border-color: #71819a; }
select { width: 100%; border: 1px solid var(--line); background: rgba(4, 12, 24, .72); color: var(--ink); border-radius: 10px; outline: none; padding: .82rem 1rem; font: inherit; }
select:focus { border-color: var(--purple); box-shadow: 0 0 0 3px rgba(168, 162, 255, .12); }
select:disabled { cursor: not-allowed; opacity: .58; }
.settings-help { color: var(--subtle); font-size: .72rem; line-height: 1.45; margin: .45rem 0 1.1rem; }
.mic-test { margin-top: 1.6rem; border-top: 1px solid var(--line); padding-top: 1.35rem; }
.mic-test-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.mic-test-row strong { display: block; margin-top: .35rem; font-size: .87rem; }
.level-meter { height: 9px; margin-top: 1.15rem; border-radius: 99px; overflow: hidden; background: rgba(4, 12, 24, .82); border: 1px solid var(--line); }
.level-meter span { display: block; width: 0; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--accent), #f4df75, #ff9d9d); transition: width .08s linear; }
@media (max-width: 800px) { .app-shell { width: min(100% - 32px, 560px); }.login-layout, .room-main { grid-template-columns: 1fr; gap: 2.5rem; }.login-layout { padding: 3rem 0; align-content: center; }.login-card { justify-self: stretch; }.brand-mark { margin-bottom: 1.2rem; }.brand-copy { max-width: 470px; }.room-main { padding: 4.5rem 0 3rem; }.room-intro h1 { font-size: 4rem; }.room-controls { flex-wrap: wrap; gap: 1rem; }.controls-divider { display: none; }.volume-control { margin-left: 0; width: 100%; }.volume-control input { flex: 1; }.participants-list { grid-template-columns: 1fr; } }
@media (max-width: 480px) { h1 { font-size: 3.5rem; }.room-intro h1 { font-size: 3.5rem; }.room-status { display: none; }.header-brand { font-size: .67rem; }.header-actions { gap: .35rem; }.header-actions .ghost-button { padding: .52rem .58rem; }.header-actions .ghost-button span { display: none; }.login-card { padding: 1.5rem; }.room-controls { padding: .85rem; }.mic-test-row { align-items: flex-start; flex-direction: column; }.mic-test-row .control-button { width: 100%; justify-content: center; } }