:root{--bg:#0b1020;--surface:#111827;--surface-soft:#172033;--card:#f4f1e8;--card-blue:#f2f4f7;--card-pink:#f5f1f1;--card-green:#f2f5ef;--white:#fff;--text:#111827;--text-on-dark:#f8fafc;--muted:#687386;--muted-strong:#334155;--border:#0f172a29;--border-strong:#0f172a52;--accent:#f5b400;--accent-hover:#e5a800;--accent-soft:#f5b40024;--danger:#ef4444;--danger-soft:#ef444424;--success:#22c55e;--success-soft:#22c55e24;--radius-xl:28px;--radius-lg:22px;--radius-md:16px;--radius-sm:12px;--shadow:0 18px 50px #00000029}*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}html,body{min-height:100%;color:var(--text);background:radial-gradient(circle at 0 0,#f5b40014,#0000 34rem),linear-gradient(#0f172a 0%,#080b13 100%);margin:0;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif}body{min-height:100dvh}button,input,select{font:inherit}.app{width:min(100%,780px);min-height:100dvh;padding:max(24px, env(safe-area-inset-top)) 18px max(32px, env(safe-area-inset-bottom));margin:0 auto}.topbar{justify-content:space-between;align-items:flex-start;gap:18px;margin-bottom:26px;display:flex}.eyebrow,.section-label{color:var(--accent);letter-spacing:.14em;text-transform:uppercase;margin:0 0 5px;font-size:.72rem;font-weight:850}.topbar .eyebrow{letter-spacing:.22em;margin-bottom:10px;font-size:clamp(.95rem,2.2vw,1.25rem);font-weight:900}h1{color:var(--text-on-dark);letter-spacing:-.075em;flex-wrap:wrap;gap:.04em .32em;margin:0;font-size:clamp(2.8rem,8.8vw,5.4rem);line-height:.86;display:flex}h1 span{display:inline-block}h2{color:var(--text);letter-spacing:-.035em;margin:0;font-size:1.22rem;line-height:1.1}.card,.status-card,.ptt-card{border:1px solid var(--border);border-radius:var(--radius-xl);box-shadow:var(--shadow)}.card,.status-card{background:var(--card);margin-bottom:16px;padding:20px}.setup-card{background:var(--card)}.audio-settings-card{background:var(--card-blue)}.video-card{background:var(--card-pink)}.participants-card{background:var(--card-green)}.connection-pill{color:#cbd5e1;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);background:#ffffff14;border:1px solid #ffffff1f;border-radius:999px;flex-shrink:0;align-items:center;gap:8px;min-height:38px;padding:8px 13px;font-size:.84rem;font-weight:750;display:inline-flex}.status-dot{background:var(--danger);width:9px;height:9px;box-shadow:0 0 0 5px var(--danger-soft);border-radius:50%}.connection-pill.connected .status-dot{background:var(--success);box-shadow:0 0 0 5px var(--success-soft)}.connection-pill.connected{color:var(--text-on-dark)}.field-grid{grid-template-columns:1fr 1fr;gap:14px;display:grid}.field{color:var(--muted-strong);gap:7px;font-size:.86rem;font-weight:750;display:grid}.field input,select{border:1px solid var(--border-strong);border-radius:var(--radius-sm);width:100%;min-height:48px;color:var(--text);background:#ffffffc7;outline:none;padding:0 14px;font-size:.98rem;font-weight:650}.field input:focus,select:focus{border-color:var(--accent);box-shadow:0 0 0 4px var(--accent-soft);background:#fff}.button-row{gap:10px;margin-top:16px;display:flex}.button,.small-button,.video-placeholder button{cursor:pointer;border:0;border-radius:999px;font-weight:800;transition:background .12s,color .12s,opacity .12s,transform 80ms}.button:active,.small-button:active,.video-placeholder button:active{transform:scale(.98)}.button:disabled,.small-button:disabled{opacity:.42;cursor:not-allowed;transform:none}.button{min-height:46px;padding:0 19px}.button-primary{background:var(--accent);color:#1f1600}.button-primary:hover:not(:disabled){background:var(--accent-hover)}.button-secondary{color:var(--muted-strong);background:#0f172a14}.small-button{min-height:38px;color:var(--muted-strong);background:#0f172a14;padding:0 14px;font-size:.84rem}.small-button:hover:not(:disabled){background:#0f172a21}.section-header{justify-content:space-between;align-items:center;gap:16px;margin-bottom:16px;display:flex}.status-card{background:#fff;justify-content:space-between;align-items:center;display:flex}.status-text{color:var(--muted-strong);margin:0;font-weight:750}.ptt-card{text-align:center;background:#fff;place-items:center;gap:18px;min-height:330px;margin-bottom:16px;padding:28px 18px;display:grid}.ptt-info{width:100%}.ptt-status{color:var(--text);letter-spacing:-.04em;margin:0;font-size:1.28rem;font-weight:850}.ptt-button{background:var(--accent);color:#1f1600;cursor:pointer;-webkit-user-select:none;user-select:none;touch-action:none;border:0;border-radius:999px;place-items:center;width:min(58vw,250px);min-width:185px;max-width:250px;height:min(58vw,250px);min-height:185px;max-height:250px;transition:transform 80ms,background .12s,box-shadow .12s;display:grid;box-shadow:0 18px 40px #f5b40038}.ptt-button:hover{background:var(--accent-hover)}.ptt-button:active,.ptt-button.talking{transform:scale(.97)}.ptt-button.talking{background:var(--success);color:#03150a;box-shadow:0 18px 40px #22c55e3d}.ptt-button-main{letter-spacing:-.07em;margin-bottom:-16px;font-size:clamp(2.35rem,10vw,4rem);font-weight:950;display:block}.ptt-button-sub{color:#1f16009e;letter-spacing:.2em;margin-top:-16px;font-size:.9rem;font-weight:900;display:block}.ptt-button.talking .ptt-button-sub{color:#03150a9e}.hint{color:var(--muted);margin:0;font-size:.9rem;font-weight:650}.counter{background:var(--accent);color:#1f1600;border-radius:999px;place-items:center;min-width:34px;height:34px;padding:0 10px;font-weight:850;display:grid}.participants-list{gap:10px;display:grid}.empty-state{border-radius:var(--radius-lg);color:var(--muted);text-align:center;background:#ffffff73;border:1px dashed #0f172a47;margin:0;padding:18px;font-weight:650}.participant{border:1px solid var(--border);border-radius:var(--radius-lg);background:#ffffffb8;gap:12px;padding:14px;display:grid}.participant-header{justify-content:space-between;align-items:center;gap:12px;display:flex}.participant-name{letter-spacing:-.03em;font-weight:850}.track-badge{background:var(--success-soft);color:#15803d;text-transform:uppercase;border-radius:999px;padding:5px 9px;font-size:.72rem;font-weight:850}.control-line{grid-template-columns:auto 1fr auto;align-items:center;gap:12px;display:grid}.control-line label{color:var(--muted);font-size:.84rem;font-weight:750}.volume{width:100%;accent-color:var(--accent)}.video-placeholder{border-radius:var(--radius-md);color:var(--muted);background:#ffffff8c;justify-content:space-between;align-items:center;gap:8px;padding:10px 12px;font-size:.84rem;font-weight:650;display:flex}.video-placeholder button{min-height:34px;color:var(--muted-strong);background:#0f172a14;padding:0 12px}audio{display:none}.meter-block{margin-top:16px}.meter-header{color:var(--muted-strong);justify-content:space-between;align-items:center;gap:16px;margin-bottom:8px;font-size:.84rem;font-weight:750;display:flex}.meter{background:#0f172a1a;border-radius:999px;width:100%;height:12px;overflow:hidden}.meter-fill{background:linear-gradient(90deg, var(--success), var(--accent));border-radius:999px;width:0%;height:100%;transition:width 70ms linear}.remote-meter-block{gap:8px;display:grid}.remote-meter .meter-fill{background:linear-gradient(90deg, var(--success), var(--accent))}.participant-actions{flex-wrap:wrap;gap:8px;display:flex}.participant-mute-button.active{background:var(--danger-soft);color:#b91c1c}.participant.muted{opacity:.68}.participant.muted .track-badge{background:var(--danger-soft);color:#b91c1c}.participant-audio-slot{display:none}.hidden{display:none!important}.local-video-container,.remote-video-area{border:1px solid var(--border);border-radius:var(--radius-lg);background:#000;overflow:hidden}.local-video,.remote-video{aspect-ratio:16/9;object-fit:cover;background:#000;width:100%;display:block}.video-note{color:var(--muted);margin:12px 0 0;font-size:.86rem;font-weight:650}.participant-video-button:not(:disabled){color:#075985;background:#0ea5e91f}@media (width<=680px){.app{padding-left:14px;padding-right:14px}.topbar{align-items:flex-start}.connection-pill{margin-top:2px;font-size:.78rem}.field-grid{grid-template-columns:1fr}.button-row{grid-template-columns:1fr 1fr;display:grid}.button{width:100%}.ptt-card{min-height:310px}}@media (width<=390px){.topbar{display:grid}.connection-pill{width:fit-content}.button-row{grid-template-columns:1fr}.ptt-button{min-width:172px;min-height:172px}}