/* ═══ MeshMeet — Multi-Peer Design System ═══ */
:root{--clr-bg:#0b0d17;--clr-surface:#12152a;--clr-surface2:#1a1e38;--clr-border:rgba(255,255,255,.06);--clr-text:#e8eaf6;--clr-text-dim:#8a8fb5;--clr-accent:#6C63FF;--clr-accent2:#3CF0C5;--clr-danger:#FF5370;--gradient-brand:linear-gradient(135deg,var(--clr-accent),var(--clr-accent2));--ff:'Inter',system-ui,sans-serif;--fs-xs:.75rem;--fs-sm:.875rem;--fs-md:1rem;--fs-lg:1.25rem;--fs-xl:1.75rem;--fs-2xl:2.5rem;--fs-3xl:3.5rem;--sp-1:4px;--sp-2:8px;--sp-3:12px;--sp-4:16px;--sp-5:20px;--sp-6:24px;--sp-8:32px;--sp-10:40px;--sp-12:48px;--r-sm:8px;--r-md:12px;--r-lg:16px;--r-xl:24px;--r-full:9999px;--ease:cubic-bezier(.4,0,.2,1);--dur:.25s}
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%;font-family:var(--ff);font-size:16px;color:var(--clr-text);background:var(--clr-bg);-webkit-font-smoothing:antialiased;overflow:hidden}

/* ═══ Views ═══ */
.view{display:none;width:100%;height:100%;position:absolute;inset:0;overflow:hidden}.view.active{display:flex}

/* ═══ Landing ═══ */
#view-landing{flex-direction:column;align-items:center;overflow-y:auto;overflow-x:hidden}
.landing-bg{position:absolute;inset:0;pointer-events:none;z-index:0}
.orb{position:absolute;border-radius:50%;filter:blur(100px);opacity:.5;animation:orb-float 12s ease-in-out infinite alternate}
.orb-1{width:500px;height:500px;background:rgba(108,99,255,.35);top:-15%;left:-10%}
.orb-2{width:400px;height:400px;background:rgba(60,240,197,.25);bottom:-10%;right:-5%;animation-delay:-4s}
.orb-3{width:300px;height:300px;background:rgba(108,99,255,.2);top:40%;left:60%;animation-delay:-8s}
@keyframes orb-float{0%{transform:translate(0,0) scale(1)}100%{transform:translate(40px,-30px) scale(1.15)}}
.landing-content{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;text-align:center;gap:var(--sp-5);padding:var(--sp-8) var(--sp-6);animation:fadeUp .8s var(--ease) both;width:100%;max-width:800px;margin:auto 0}
@keyframes fadeUp{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:translateY(0)}}
.logo-mark svg{width:72px;height:72px;animation:pulse-logo 3s ease-in-out infinite}
@keyframes pulse-logo{0%,100%{transform:scale(1);filter:drop-shadow(0 0 12px rgba(108,99,255,.4))}50%{transform:scale(1.05);filter:drop-shadow(0 0 24px rgba(108,99,255,.6))}}
.hero-title{font-size:var(--fs-3xl);font-weight:800;letter-spacing:-1px;line-height:1.1}
.hero-title .accent{background:var(--gradient-brand);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.hero-subtitle{font-size:var(--fs-lg);color:var(--clr-text-dim);max-width:460px;line-height:1.6}
.name-input-row{width:100%;max-width:280px}
.name-input-row input{width:100%;padding:var(--sp-3) var(--sp-4);border-radius:var(--r-full);border:1px solid var(--clr-border);background:var(--clr-surface2);color:var(--clr-text);font-family:var(--ff);font-size:var(--fs-md);text-align:center;outline:none;transition:border-color var(--dur) var(--ease)}
.name-input-row input:focus{border-color:var(--clr-accent);box-shadow:0 0 0 3px rgba(108,99,255,.15)}
.name-input-row input::placeholder{color:var(--clr-text-dim);opacity:.6}

/* How it works */
.how-it-works{margin-top:var(--sp-2);padding:var(--sp-4) var(--sp-6);background:rgba(255,255,255,.02);border:1px solid var(--clr-border);border-radius:var(--r-lg);max-width:700px}
.how-it-works h3{font-size:var(--fs-xs);font-weight:600;color:var(--clr-text-dim);text-transform:uppercase;letter-spacing:1px;margin-bottom:var(--sp-3)}
.steps-row{display:flex;align-items:center;gap:var(--sp-3);flex-wrap:wrap;justify-content:center}
.step-chip{display:flex;align-items:center;gap:var(--sp-2);font-size:var(--fs-sm);color:var(--clr-text-dim);padding:var(--sp-2) var(--sp-3);background:var(--clr-surface2);border-radius:var(--r-sm)}
.step-chip strong{color:var(--clr-accent2)}.step-num{width:22px;height:22px;border-radius:50%;background:var(--gradient-brand);color:#fff;font-size:var(--fs-xs);font-weight:700;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.step-arrow{color:var(--clr-text-dim);opacity:.3;flex-shrink:0}

/* ═══ Buttons ═══ */
.btn{display:inline-flex;align-items:center;gap:var(--sp-2);padding:var(--sp-3) var(--sp-6);border:none;border-radius:var(--r-full);font-family:var(--ff);font-size:var(--fs-md);font-weight:600;cursor:pointer;transition:all var(--dur) var(--ease);white-space:nowrap}
.btn-primary{background:var(--gradient-brand);color:#fff;box-shadow:0 4px 24px rgba(108,99,255,.35)}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 8px 32px rgba(108,99,255,.5)}
.btn-primary:active{transform:translateY(0)}
.btn-secondary{background:var(--clr-surface2);color:var(--clr-text);border:1px solid var(--clr-border)}
.btn-secondary:hover{background:rgba(108,99,255,.12);border-color:rgba(108,99,255,.3);transform:translateY(-2px)}
.btn-ghost{background:transparent;color:var(--clr-text-dim);border:none;cursor:pointer;font-family:var(--ff);font-size:var(--fs-sm);font-weight:500;padding:var(--sp-2) var(--sp-4);border-radius:var(--r-sm);transition:all var(--dur) var(--ease)}
.btn-ghost:hover{color:var(--clr-text);background:rgba(255,255,255,.05)}
.btn-sm{font-size:var(--fs-sm);padding:var(--sp-2) var(--sp-4);border-radius:var(--r-md)}
.btn[disabled]{opacity:.4;cursor:not-allowed;pointer-events:none}
.full-width{width:100%;justify-content:center}
.features-strip{display:flex;gap:var(--sp-3);flex-wrap:wrap;justify-content:center}
.feature-chip{display:flex;align-items:center;gap:var(--sp-2);padding:var(--sp-2) var(--sp-4);border-radius:var(--r-full);background:rgba(255,255,255,.04);border:1px solid var(--clr-border);color:var(--clr-text-dim);font-size:var(--fs-xs);font-weight:500}

/* Mode cards */
.mode-cards{display:flex;gap:var(--sp-4);width:100%;max-width:600px}
.mode-card{flex:1;padding:var(--sp-5);background:var(--clr-surface);border:1px solid var(--clr-border);border-radius:var(--r-lg);display:flex;flex-direction:column;gap:var(--sp-3);transition:border-color var(--dur) var(--ease)}
.mode-card:hover{border-color:rgba(108,99,255,.25)}
.mode-header{display:flex;align-items:center;gap:var(--sp-2)}
.mode-header h3{font-size:var(--fs-md);font-weight:700}
.mode-icon{font-size:1.25rem}
.mode-desc{font-size:var(--fs-xs);color:var(--clr-text-dim);line-height:1.6}
.mode-btns{display:flex;gap:var(--sp-2);margin-top:auto}

/* Room code */
.room-code-display{padding:var(--sp-4);background:var(--clr-surface2);border:1px solid var(--clr-border);border-radius:var(--r-md);text-align:center;margin-bottom:var(--sp-3)}
.room-code-display span{font-family:'SF Mono','Fira Code',monospace;font-size:var(--fs-2xl);font-weight:800;letter-spacing:6px;background:var(--gradient-brand);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.room-code-input input{width:100%;padding:var(--sp-3) var(--sp-4);border-radius:var(--r-md);border:1px solid var(--clr-border);background:var(--clr-surface);color:var(--clr-text);font-family:'SF Mono','Fira Code',monospace;font-size:var(--fs-xl);font-weight:700;text-align:center;letter-spacing:4px;text-transform:uppercase;outline:none;transition:border-color var(--dur) var(--ease)}
.room-code-input input:focus{border-color:var(--clr-accent);box-shadow:0 0 0 3px rgba(108,99,255,.15)}
.room-code-input input::placeholder{font-size:var(--fs-sm);letter-spacing:0;text-transform:none;font-weight:400;color:var(--clr-text-dim);opacity:.5}

/* ═══ Setup Views ═══ */
#view-host,#view-join,#view-quick-host,#view-quick-join{align-items:center;justify-content:center;padding:var(--sp-6);overflow-y:auto;overflow-x:hidden}
.setup-container{display:flex;gap:var(--sp-10);align-items:flex-start;animation:fadeUp .6s var(--ease) both;max-width:1000px;width:100%;margin:auto 0}
.setup-preview{position:relative;width:400px;min-height:300px;border-radius:var(--r-lg);overflow:hidden;background:var(--clr-surface);border:1px solid var(--clr-border);flex-shrink:0}
.setup-preview video{width:100%;height:100%;object-fit:cover;transform:scaleX(-1);min-height:300px}
.preview-placeholder{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--sp-3);color:var(--clr-text-dim);font-size:var(--fs-sm)}
.preview-placeholder.hidden{display:none}
.preview-controls{position:absolute;bottom:var(--sp-4);left:50%;transform:translateX(-50%);display:flex;gap:var(--sp-3)}
.setup-panel{flex:1;min-width:0}
.setup-panel h2{font-size:var(--fs-xl);font-weight:700;margin-bottom:var(--sp-4)}
.setup-step{display:none}.setup-step.active{display:block;animation:fadeUp .4s var(--ease) both}
.step-header{margin-bottom:var(--sp-4)}
.step-header h2{margin-bottom:0}
.step-badge{display:inline-block;padding:var(--sp-1) var(--sp-3);border-radius:var(--r-full);background:rgba(108,99,255,.12);color:var(--clr-accent);font-size:var(--fs-xs);font-weight:600;margin-bottom:var(--sp-2)}
.step-desc{color:var(--clr-text-dim);font-size:var(--fs-sm);line-height:1.7;margin-bottom:var(--sp-4)}.step-desc strong{color:var(--clr-text)}

/* Participant list */
.participant-list{display:flex;flex-direction:column;gap:var(--sp-2);margin-bottom:var(--sp-3)}
.participant-item{display:flex;align-items:center;gap:var(--sp-3);padding:var(--sp-2) var(--sp-3);border-radius:var(--r-sm);background:var(--clr-surface);font-size:var(--fs-sm)}
.participant-item.self{opacity:.7}
.participant-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0}
.participant-dot.online{background:var(--clr-accent2)}
.participant-dot.pending{background:var(--clr-accent);animation:pulse 1.5s ease-in-out infinite}
.participant-name{font-weight:500}
.participant-count{font-size:var(--fs-xs);color:var(--clr-text-dim);margin-bottom:var(--sp-4)}

/* Exchange panel */
.exchange-panel{margin-bottom:var(--sp-2)}
.exch-state{display:none}.exch-state.active{display:block;animation:fadeUp .3s var(--ease) both}

/* SDP fields */
.sdp-field{margin-bottom:var(--sp-3)}
.sdp-field textarea{width:100%;padding:var(--sp-3);border-radius:var(--r-md);border:1px solid var(--clr-border);background:var(--clr-surface);color:var(--clr-text);font-family:'SF Mono','Fira Code',monospace;font-size:var(--fs-xs);line-height:1.6;resize:vertical;outline:none;transition:border-color var(--dur) var(--ease);margin-bottom:var(--sp-2)}
.sdp-field textarea::placeholder{color:var(--clr-text-dim);opacity:.5}
.sdp-field textarea:focus{border-color:var(--clr-accent);box-shadow:0 0 0 3px rgba(108,99,255,.15)}
.sdp-field textarea[readonly]{opacity:.85;cursor:default;background:var(--clr-surface2)}
.btn-row{display:flex;gap:var(--sp-2);flex-wrap:wrap}

/* Lobby status */
.lobby-status{display:flex;align-items:center;gap:var(--sp-3);padding:var(--sp-3) var(--sp-4);background:rgba(108,99,255,.08);border:1px solid rgba(108,99,255,.15);border-radius:var(--r-md);font-size:var(--fs-sm);color:var(--clr-text-dim)}
.lobby-status.connected{background:rgba(60,240,197,.08);border-color:rgba(60,240,197,.2);color:var(--clr-accent2)}
.pulse-dot{width:10px;height:10px;border-radius:50%;background:var(--clr-accent);animation:pulse 1.5s ease-in-out infinite;flex-shrink:0}
.lobby-status.connected .pulse-dot{background:var(--clr-accent2)}
@keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.4;transform:scale(.8)}}

/* ═══ Call View ═══ */
#view-call{flex-direction:column;background:#000;overflow:hidden}
.call-grid{flex:1;display:grid;gap:var(--sp-2);padding:var(--sp-2);min-height:0}
/* Dynamic grid — set by JS via data attribute */
.call-grid[data-count="1"]{grid-template-columns:1fr}
.call-grid[data-count="2"]{grid-template-columns:1fr 1fr}
.call-grid[data-count="3"]{grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr}
.call-grid[data-count="3"] .video-tile:first-child{grid-column:1/3}
.call-grid[data-count="4"]{grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr}
.call-grid[data-count="5"]{grid-template-columns:1fr 1fr 1fr;grid-template-rows:1fr 1fr}
.call-grid[data-count="5"] .video-tile:nth-child(4){grid-column:1/2}
.call-grid[data-count="5"] .video-tile:nth-child(5){grid-column:2/4}
.call-grid[data-count="6"]{grid-template-columns:1fr 1fr 1fr;grid-template-rows:1fr 1fr}

.video-tile{position:relative;border-radius:var(--r-lg);overflow:hidden;background:var(--clr-surface);border:1px solid var(--clr-border);animation:tileIn .4s var(--ease) both}
@keyframes tileIn{from{opacity:0;transform:scale(.92)}to{opacity:1;transform:scale(1)}}
.video-tile video{width:100%;height:100%;object-fit:cover}
.video-tile.self video{transform:scaleX(-1)}
.tile-label{position:absolute;bottom:var(--sp-3);left:var(--sp-3);padding:var(--sp-1) var(--sp-3);background:rgba(0,0,0,.55);backdrop-filter:blur(6px);border-radius:var(--r-full);font-size:var(--fs-xs);font-weight:600;letter-spacing:.5px}
.tile-avatar{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:var(--clr-surface)}
.tile-avatar.hidden{display:none}
.avatar-circle{width:72px;height:72px;border-radius:50%;background:var(--clr-surface2);display:flex;align-items:center;justify-content:center;color:var(--clr-text-dim)}
.avatar-initial{font-size:28px;font-weight:700;background:var(--gradient-brand);-webkit-background-clip:text;-webkit-text-fill-color:transparent}

/* ═══ Tile Controls Overlay ═══ */
.tile-controls{position:absolute;bottom:32px;left:0;right:0;padding:0 var(--sp-2);opacity:0;transform:translateY(4px);transition:all var(--dur) var(--ease);pointer-events:none;z-index:5}
.video-tile:not(.self):hover .tile-controls{opacity:1;transform:translateY(0);pointer-events:all}
.tile-ctrl-bar{display:flex;align-items:center;gap:var(--sp-2);padding:var(--sp-1) var(--sp-2);background:rgba(0,0,0,.7);backdrop-filter:blur(10px);border-radius:var(--r-md);border:1px solid rgba(255,255,255,.08)}
.tile-ctrl-btn{width:26px;height:26px;border-radius:50%;border:none;background:rgba(255,255,255,.1);color:var(--clr-text);cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:all .15s var(--ease);padding:0}
.tile-ctrl-btn:hover{background:rgba(255,255,255,.22);transform:scale(1.1)}
.tile-ctrl-btn.off{color:var(--clr-danger);background:rgba(255,83,112,.2)}
.vol-slider{flex:1;min-width:40px;height:4px;-webkit-appearance:none;appearance:none;background:rgba(255,255,255,.18);border-radius:2px;outline:none;cursor:pointer}
.vol-slider::-webkit-slider-thumb{-webkit-appearance:none;width:12px;height:12px;border-radius:50%;background:var(--clr-accent2);cursor:pointer;box-shadow:0 0 6px rgba(60,240,197,.4)}
.vol-slider::-moz-range-thumb{width:12px;height:12px;border-radius:50%;background:var(--clr-accent2);cursor:pointer;border:none}
.tile-quality-wrap{position:relative}
.tile-quality-btn{width:auto;border-radius:var(--r-sm);padding:2px 6px;font-size:10px;font-weight:700;font-family:var(--ff);letter-spacing:.5px}
.tile-quality-dd{display:none;position:absolute;bottom:calc(100% + 6px);right:0;background:var(--clr-surface);border:1px solid var(--clr-border);border-radius:var(--r-md);padding:var(--sp-1);min-width:90px;z-index:10;box-shadow:0 8px 24px rgba(0,0,0,.5)}
.tile-quality-dd.open{display:block;animation:fadeIn .15s var(--ease)}
.tile-quality-dd button{display:block;width:100%;padding:var(--sp-1) var(--sp-3);border:none;background:none;color:var(--clr-text-dim);font-family:var(--ff);font-size:var(--fs-xs);font-weight:500;cursor:pointer;border-radius:var(--r-sm);text-align:left;transition:all .12s var(--ease)}
.tile-quality-dd button:hover{background:rgba(255,255,255,.06);color:var(--clr-text)}
.tile-quality-dd button.active{color:var(--clr-accent2);background:rgba(60,240,197,.08)}
.tile-vid-hidden .tile-avatar{display:flex!important}

/* ═══ Self Tile Name Edit ═══ */
.tile-name-edit{position:absolute;bottom:var(--sp-3);left:var(--sp-3);right:var(--sp-3);display:flex;align-items:center;gap:var(--sp-1);z-index:5}
.tile-label{cursor:default}
.video-tile.self .tile-label{cursor:pointer;transition:background .15s var(--ease)}
.video-tile.self .tile-label:hover{background:rgba(108,99,255,.35)}
.tile-label .edit-hint{margin-left:4px;opacity:0;font-size:10px;transition:opacity .15s var(--ease)}
.video-tile.self:hover .tile-label .edit-hint{opacity:.6}
.tile-name-input{position:absolute;bottom:var(--sp-3);left:var(--sp-3);padding:var(--sp-1) var(--sp-3);background:rgba(0,0,0,.7);backdrop-filter:blur(6px);border-radius:var(--r-full);font-size:var(--fs-xs);font-weight:600;color:var(--clr-text);border:1px solid var(--clr-accent);outline:none;font-family:var(--ff);z-index:6;width:auto;max-width:calc(100% - 24px)}

/* ═══ Emoji Reactions ═══ */
.emoji-container{position:absolute;inset:0;pointer-events:none;z-index:4;overflow:hidden}
.emoji-float{position:absolute;bottom:20%;left:50%;font-size:48px;animation:emojiUp 2.2s var(--ease) forwards;pointer-events:none;filter:drop-shadow(0 2px 8px rgba(0,0,0,.4));z-index:4}
@keyframes emojiUp{0%{transform:translateX(-50%) translateY(0) scale(.6);opacity:0}12%{transform:translateX(-50%) translateY(-10px) scale(1.2);opacity:1}30%{transform:translateX(-50%) translateY(-30px) scale(1);opacity:1}100%{transform:translateX(-50%) translateY(-120px) scale(.8);opacity:0}}

/* ═══ Emoji Picker ═══ */
.emoji-picker{position:absolute;bottom:calc(100% + 12px);left:50%;transform:translateX(-50%);background:var(--clr-surface);border:1px solid var(--clr-border);border-radius:var(--r-lg);padding:var(--sp-3);display:grid;grid-template-columns:repeat(5,1fr);gap:var(--sp-1);z-index:60;box-shadow:0 12px 40px rgba(0,0,0,.5);animation:fadeUp .2s var(--ease) both;min-width:220px}
.emoji-picker.hidden{display:none}
.emoji-picker::after{content:'';position:absolute;bottom:-6px;left:50%;transform:translateX(-50%) rotate(45deg);width:12px;height:12px;background:var(--clr-surface);border-right:1px solid var(--clr-border);border-bottom:1px solid var(--clr-border)}
.emoji-pick-btn{width:40px;height:40px;border:none;background:none;border-radius:var(--r-sm);font-size:24px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .12s var(--ease)}
.emoji-pick-btn:hover{background:rgba(255,255,255,.08);transform:scale(1.2)}

/* ═══ Send Quality Dropdown ═══ */
.sq-panel{position:absolute;bottom:calc(100% + 12px);left:50%;transform:translateX(-50%);background:var(--clr-surface);border:1px solid var(--clr-border);border-radius:var(--r-lg);padding:var(--sp-3);z-index:60;box-shadow:0 12px 40px rgba(0,0,0,.5);animation:fadeUp .2s var(--ease) both;min-width:180px}
.sq-panel.hidden{display:none}
.sq-panel::after{content:'';position:absolute;bottom:-6px;left:50%;transform:translateX(-50%) rotate(45deg);width:12px;height:12px;background:var(--clr-surface);border-right:1px solid var(--clr-border);border-bottom:1px solid var(--clr-border)}
.sq-title{font-size:var(--fs-xs);font-weight:600;color:var(--clr-text-dim);text-transform:uppercase;letter-spacing:.5px;margin-bottom:var(--sp-2);text-align:center}
.sq-btn{display:block;width:100%;padding:var(--sp-2) var(--sp-3);border:none;background:none;color:var(--clr-text-dim);font-family:var(--ff);font-size:var(--fs-sm);font-weight:500;cursor:pointer;border-radius:var(--r-sm);text-align:left;transition:all .12s var(--ease)}
.sq-btn:hover{background:rgba(255,255,255,.06);color:var(--clr-text)}
.sq-btn.active{color:var(--clr-accent2);background:rgba(60,240,197,.08)}
.sq-btn .sq-bps{font-size:var(--fs-xs);color:var(--clr-text-dim);margin-left:var(--sp-2)}
.sq-btn.active .sq-bps{color:rgba(60,240,197,.6)}

/* ═══ Extra call bar button overrides ═══ */
#ctl-emoji .icon-on,#ctl-emoji .icon-off,#ctl-send-q .icon-on,#ctl-send-q .icon-off{display:none}
#ctl-emoji svg,#ctl-send-q svg{display:block}
#ctl-emoji:not(.active),#ctl-send-q:not(.active){background:var(--clr-surface2);color:var(--clr-text)}
#ctl-emoji.active{background:rgba(108,99,255,.15);color:var(--clr-accent)}
#ctl-send-q.active{background:rgba(60,240,197,.15);color:var(--clr-accent2)}
.call-controls-wrap{position:relative;display:flex;gap:var(--sp-3);align-items:center}


/* ═══ Landing Footer ═══ */
.landing-footer{margin-top:var(--sp-4);padding:var(--sp-4) 0;text-align:center}
.github-link{display:inline-flex;align-items:center;gap:var(--sp-2);color:var(--clr-text-dim);text-decoration:none;font-size:var(--fs-sm);font-weight:500;padding:var(--sp-2) var(--sp-4);border-radius:var(--r-full);border:1px solid var(--clr-border);transition:all var(--dur) var(--ease)}
.github-link:hover{color:var(--clr-text);border-color:rgba(255,255,255,.2);background:rgba(255,255,255,.04);transform:translateY(-1px)}

/* Add participant overlay */
.add-overlay{position:absolute;inset:0;z-index:50;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.6);backdrop-filter:blur(8px);animation:fadeIn .25s var(--ease)}
.add-overlay.hidden{display:none}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
.add-overlay-card{background:var(--clr-surface);border:1px solid var(--clr-border);border-radius:var(--r-lg);padding:var(--sp-6);width:90%;max-width:460px;position:relative}
.add-overlay-card h3{font-size:var(--fs-lg);font-weight:700;margin-bottom:var(--sp-4)}
.modal-close{position:absolute;top:var(--sp-4);right:var(--sp-4);background:none;border:none;color:var(--clr-text-dim);cursor:pointer;border-radius:var(--r-sm);padding:var(--sp-1);transition:all var(--dur) var(--ease)}
.modal-close:hover{color:var(--clr-text);background:rgba(255,255,255,.06)}

/* Call bar */
.call-bar{padding:var(--sp-2) var(--sp-4) var(--sp-4)}
.call-bar-inner{display:flex;align-items:center;justify-content:space-between;background:var(--clr-surface);border:1px solid var(--clr-border);border-radius:var(--r-xl);padding:var(--sp-3) var(--sp-5)}
.call-info{display:flex;align-items:center;gap:var(--sp-3);font-size:var(--fs-sm);color:var(--clr-text-dim);min-width:160px}
.call-separator{opacity:.3}
.call-label-p2p{font-size:var(--fs-xs);padding:var(--sp-1) var(--sp-2);background:rgba(60,240,197,.1);color:var(--clr-accent2);border-radius:var(--r-full);font-weight:600}
.call-controls{display:flex;gap:var(--sp-3)}
.call-actions-right{min-width:60px;display:flex;justify-content:flex-end}

/* Control buttons */
.control-btn{width:48px;height:48px;border-radius:50%;border:none;background:var(--clr-surface2);color:var(--clr-text);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all var(--dur) var(--ease)}
.control-btn:hover{background:rgba(255,255,255,.12);transform:scale(1.08)}
.control-btn.active .icon-off{display:none}.control-btn.active .icon-on{display:block}
.control-btn:not(.active) .icon-on{display:none}.control-btn:not(.active) .icon-off{display:block}
.control-btn:not(.active){background:rgba(255,83,112,.15);color:var(--clr-danger)}
#ctl-screen .icon-on,#ctl-screen .icon-off,#ctl-add .icon-on,#ctl-add .icon-off,#ctl-full .icon-on,#ctl-full .icon-off{display:none}
#ctl-screen svg,#ctl-add svg,#ctl-full svg{display:block}
#ctl-screen:not(.active),#ctl-add:not(.active),#ctl-full:not(.active){background:var(--clr-surface2);color:var(--clr-text)}
#ctl-screen.active{background:rgba(60,240,197,.15);color:var(--clr-accent2)}
.btn-danger{background:var(--clr-danger)!important;color:#fff!important}
.btn-danger:hover{background:#ff6b86!important;box-shadow:0 4px 20px rgba(255,83,112,.4)}

/* Toast */
.toast{position:fixed;bottom:var(--sp-8);left:50%;transform:translateX(-50%);padding:var(--sp-3) var(--sp-6);background:var(--clr-surface2);border:1px solid var(--clr-border);border-radius:var(--r-full);font-size:var(--fs-sm);font-weight:500;color:var(--clr-text);z-index:200;animation:toastIn .35s var(--ease);box-shadow:0 8px 32px rgba(0,0,0,.4)}
.toast.hidden{display:none}
@keyframes toastIn{from{opacity:0;transform:translateX(-50%) translateY(16px)}to{opacity:1;transform:translateX(-50%) translateY(0)}}

/* ═══ Responsive ═══ */
@media(max-width:960px){
  .setup-container{flex-direction:column;gap:var(--sp-6);align-items:center}
  .setup-preview{width:100%;max-width:480px;min-height:200px}
  .setup-preview video{min-height:200px}
  .setup-panel{max-width:480px;width:100%}
}
@media(max-width:680px){
  .mode-cards{flex-direction:column}
  .hero-title{font-size:var(--fs-2xl)}
  .hero-subtitle{font-size:var(--fs-sm)}
  .landing-content{gap:var(--sp-3);padding:var(--sp-6) var(--sp-4)}
  .logo-mark svg{width:56px;height:56px}
  .landing-actions{flex-direction:column;width:100%;max-width:300px}
  .landing-actions .btn{justify-content:center}
  .how-it-works{padding:var(--sp-3) var(--sp-4)}
  .steps-row{flex-direction:column}
  .step-arrow{transform:rotate(90deg)}
  .features-strip{gap:var(--sp-2)}
  .feature-chip{font-size:.65rem;padding:var(--sp-1) var(--sp-3)}
  .setup-preview{min-height:180px}
  .setup-preview video{min-height:180px}
  .call-grid[data-count="2"],
  .call-grid[data-count="3"],
  .call-grid[data-count="4"]{grid-template-columns:1fr;grid-template-rows:repeat(auto-fit,1fr)}
  .call-grid[data-count="3"] .video-tile:first-child{grid-column:auto}
  .call-grid[data-count="5"],
  .call-grid[data-count="6"]{grid-template-columns:1fr 1fr}
  .call-bar{padding:var(--sp-1) var(--sp-2) var(--sp-2)}
  .call-bar-inner{flex-direction:column;gap:var(--sp-2);padding:var(--sp-3)}
  .call-info{min-width:auto;font-size:var(--fs-xs)}
  .call-controls{gap:var(--sp-2)}
  .control-btn{width:40px;height:40px}
  .call-actions-right{min-width:auto}
}