:root{color-scheme:dark;font-family:system-ui,-apple-system,Segoe UI,sans-serif;--bg: #14121c;--surface: #1e1b2b;--surface-strong: #272338;--border: #322c47;--text: #ece9f5;--text-muted: #a49fc0;--accent: #8b7cf6;--success: #6ee7a8;--danger: #f87e7e}*{box-sizing:border-box}body{margin:0;min-height:100vh;background:var(--bg);color:var(--text)}#root{min-height:100vh;display:flex;padding:1.5rem}.join,.room-shell{margin:auto}.join{width:min(24rem,100%);text-align:center}.join__logo{margin:0;font-size:3rem;letter-spacing:-.03em}.join__tagline{margin:.25rem 0 2rem;color:var(--text-muted)}.join__form{display:grid;gap:1rem;text-align:left}.join__error,.room__error{margin:0;padding:.75rem;border-radius:.5rem;background:#f87e7e1f;color:var(--danger);font-size:.9rem;text-align:center}.field{display:grid;gap:.375rem}.field__label{font-size:.85rem;color:var(--text-muted)}.field__input{padding:.7rem .85rem;border:1px solid var(--border);border-radius:.5rem;background:var(--surface);color:inherit;font:inherit}.field__input:focus-visible{outline:2px solid var(--accent);outline-offset:1px}.button{padding:.7rem 1rem;border:1px solid var(--border);border-radius:.5rem;background:var(--surface-strong);color:inherit;font:inherit;cursor:pointer;transition:filter .12s ease}.button:hover:not(:disabled){filter:brightness(1.15)}.button:disabled{opacity:.6;cursor:progress}.button--primary{border-color:transparent;background:var(--accent);color:#120f1c;font-weight:600}.button--active{border-color:#6ee7a866;color:var(--success)}.button--muted{border-color:#f87e7e66;color:var(--danger)}.button--danger{border-color:transparent;background:#f87e7e26;color:var(--danger)}.room-shell{width:min(64rem,100%)}.room{display:grid;gap:1.25rem}.room__header{display:flex;align-items:center;justify-content:space-between;gap:1rem}.room__code{margin:0;font-size:1.5rem;letter-spacing:-.02em}.room__meta,.room__empty{margin:.25rem 0 0;color:var(--text-muted);font-size:.9rem}.badge{padding:.3rem .65rem;border-radius:999px;background:var(--surface-strong);color:var(--text-muted);font-size:.8rem;white-space:nowrap}.badge--connected{color:var(--success)}.badge--reconnecting,.badge--signalReconnecting{color:#f5c469}.badge--disconnected{color:var(--danger)}.room__controls{display:flex;flex-wrap:wrap;gap:.5rem}.room__controls .button{flex:1;min-width:8rem}.stage{display:grid;gap:.75rem;grid-template-columns:repeat(auto-fit,minmax(20rem,1fr))}.stage--empty{place-items:center;padding:3rem 1rem;border:1px dashed var(--border);border-radius:.75rem;color:var(--text-muted)}.stage--empty p{margin:0}.stage__item{margin:0;border:1px solid var(--border);border-radius:.75rem;overflow:hidden;background:#000}.stage__video{display:block;width:100%;object-fit:contain;aspect-ratio:16 / 9;max-height:50vh;background:#000}.stage__caption{padding:.5rem .75rem;background:var(--surface);font-size:.85rem;color:var(--text-muted)}.share-options{display:flex;flex-wrap:wrap;align-items:center;gap:1rem;font-size:.9rem}.field--inline{display:flex;align-items:center;gap:.5rem}.field--inline .field__input{padding:.35rem .5rem;font-size:.85rem}.checkbox{display:flex;align-items:center;gap:.45rem;color:var(--text-muted);cursor:pointer}.checkbox input{accent-color:var(--accent)}.tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(11rem,1fr));gap:.6rem;margin:0;padding:0;list-style:none}.tile{display:grid;grid-template-columns:auto 1fr;grid-template-areas:"avatar nome" "avatar status";align-items:center;gap:.15rem .7rem;padding:.7rem .85rem;border:1px solid var(--border);border-radius:.6rem;background:var(--surface);transition:border-color .12s ease,box-shadow .12s ease}.tile--speaking{border-color:var(--success);box-shadow:0 0 0 1px var(--success)}.tile__avatar{grid-area:avatar;display:grid;place-items:center;width:2.25rem;height:2.25rem;border-radius:50%;background:var(--surface-strong);font-weight:600}.tile--speaking .tile__avatar{background:#6ee7a82e;color:var(--success)}.tile__name{grid-area:nome;font-weight:500;overflow-wrap:anywhere}.tile__you{color:var(--text-muted);font-weight:400}.tile__status{grid-area:status;display:flex;flex-wrap:wrap;gap:.3rem}.tile__badge{font-size:.75rem;color:var(--text-muted)}.tile__badge--live{color:var(--success)}.tile__badge--muted{color:var(--danger)}.tile__badge--sharing{color:var(--accent)}.room__identity{min-width:0}.room__header-actions{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap;justify-content:flex-end}.banner{padding:.7rem .9rem;border-radius:.5rem;font-size:.9rem;text-align:center}.banner--warning{background:#f5c46924;color:#f5c469}.button--ghost{background:transparent;font-size:.85rem;padding:.45rem .7rem}.copy{display:grid;gap:.35rem;justify-items:end}.copy__fallback{width:min(18rem,60vw);padding:.35rem .5rem;border:1px solid var(--border);border-radius:.4rem;background:var(--surface);color:inherit;font-size:.8rem}.field__group{display:flex;gap:.5rem}.field__group .field__input{flex:1;min-width:0}.join__notice{margin:0 0 1rem;padding:.75rem;border-radius:.5rem;background:#f5c46924;color:#f5c469;font-size:.9rem}.recent{margin-top:2rem;text-align:left}.recent__title{margin:0 0 .5rem;font-size:.8rem;font-weight:500;color:var(--text-muted);text-transform:uppercase;letter-spacing:.05em}.recent__list{display:grid;gap:.35rem;margin:0;padding:0;list-style:none}.recent__item{display:flex;align-items:center;gap:.35rem}.recent__enter{flex:1;padding:.55rem .75rem;border:1px solid var(--border);border-radius:.5rem;background:var(--surface);color:inherit;font:inherit;text-align:left;cursor:pointer}.recent__enter:hover:not(:disabled){border-color:var(--accent)}.recent__forget{padding:.35rem .6rem;border:1px solid transparent;border-radius:.5rem;background:transparent;color:var(--text-muted);font-size:1.1rem;line-height:1;cursor:pointer}.recent__forget:hover{color:var(--danger)}