:root{--bg:#0c1222;--bg-deep:#060910;--card:#111827;--line:#243041;--text:#f8fafc;--muted:#94a3b8;--primary:#2563eb;--danger:#dc2626;--success:#22c55e}*{box-sizing:border-box}body{min-height:100vh;color:var(--text);background:radial-gradient(ellipse 110% 75% at 50% -12%, #2563eb33, transparent 52%), linear-gradient(168deg, var(--bg-deep) 0%, var(--bg) 44%, #0f172a 100%);margin:0;font-family:Inter,Arial,sans-serif}a{color:inherit}.container{max-width:1120px;margin:0 auto;padding:32px 16px}.container.wide{max-width:1680px}.container.wide.call-page{max-width:none;min-height:100vh;padding:14px}.home-shell{align-items:center;min-height:100vh;display:flex}.home-grid{grid-template-columns:minmax(0,1fr) minmax(340px,440px);align-items:center;gap:48px;width:100%;display:grid}.card{border:1px solid var(--line);background:#111827f5;border-radius:20px;padding:24px;box-shadow:0 20px 40px #00000040}h1,h2{margin-top:0}.muted{color:var(--muted);line-height:1.55}.home-hero-lead{max-width:44ch}.home-features{color:var(--muted);gap:10px;margin:24px 0 0;padding:0;list-style:none;display:grid}.home-features li{padding-left:22px;position:relative}.home-features li:before{content:"";background:var(--primary);border-radius:50%;width:7px;height:7px;position:absolute;top:.55em;left:0}.home-card-header,.meeting-topbar,.row{align-items:center;gap:12px;display:flex}.home-card-header,.meeting-topbar{justify-content:space-between}.centered{justify-content:center}.stack{flex-direction:column;gap:18px;display:flex}.field{flex-direction:column;gap:8px;display:flex}input{border:1px solid var(--line);color:#fff;width:100%;font:inherit;background:#0b1220;border-radius:12px;padding:12px 14px}input[type=range]{accent-color:var(--primary);padding:0}.btn,.icon-btn,.toggle-btn{cursor:pointer;font:inherit;border:0;border-radius:12px;padding:12px 16px}.btn.primary{background:var(--primary);color:#fff}.btn.secondary,.toggle-btn{color:#111827;background:#f8fafc}.btn.danger{background:var(--danger);color:#fff}.btn:disabled{opacity:.6;cursor:not-allowed}.link-btn{justify-content:center;text-decoration:none;display:inline-flex}.icon-btn{color:#fff;background:#1f2937;justify-content:center;align-items:center;min-width:50px;min-height:50px;display:inline-flex}.icon-btn.small{min-width:44px;min-height:44px;padding:0}.icon-btn.is-off{color:#fecaca;background:#3a1111}.toggle-btn.active{color:#fff;background:#13274f;border:1px solid #355cae}.toggle-btn.inactive{color:#cbd5e1;background:#1f2937;border:1px solid #4b5563}.toggle-btn{justify-content:center;align-items:center;gap:10px;display:inline-flex}.control-icon{object-fit:contain;width:24px;height:24px;display:block}.icon-btn .control-icon{width:26px;height:26px}.home-actions{grid-template-columns:1fr auto;gap:12px;display:grid}.settings-wrap{position:relative}.settings-menu{z-index:20;border:1px solid var(--line);background:#111827fa;border-radius:14px;width:260px;padding:14px;position:absolute;top:calc(100% + 8px);right:0}.checkbox-line{align-items:center;gap:10px;display:flex}.checkbox-line input{width:18px;height:18px}.qr-box{background:#fff;border-radius:14px;padding:12px;display:inline-flex}.toast-stack{z-index:1000;gap:10px;max-width:min(420px,100vw - 32px);display:grid;position:fixed;top:16px;right:16px}.toast{border:1px solid var(--line);background:#111827f5;border-radius:14px;padding:12px 16px;box-shadow:0 12px 32px #00000059}.toast.success{border-color:#22c55e80}.toast.error{border-color:#ef44448c}.error-page{justify-content:center;align-items:center;min-height:100vh;display:flex}.error-card{text-align:center;max-width:500px}.error-code{color:var(--muted);letter-spacing:.12em;margin:0 0 12px}.join-card{margin-bottom:20px}.prejoin-layout{grid-template-columns:minmax(320px,1.2fr) minmax(300px,.9fr);gap:20px;display:grid}.preview-stage{background:#020617;border:1px solid #94a3b829;border-radius:18px;justify-content:center;align-items:center;min-height:420px;display:flex;overflow:hidden}.prejoin-preview-video{object-fit:cover;width:100%;height:100%;transform:scaleX(-1)}.preview-placeholder{flex-direction:column;align-items:center;gap:10px;display:flex}.meeting-card{margin-bottom:20px}.call-layout{grid-template-columns:minmax(0,1fr) minmax(320px,380px);align-items:stretch;gap:20px;min-height:calc(100vh - 28px);display:grid}.call-layout .meeting-card{flex-direction:column;min-height:calc(100vh - 28px);display:flex}.meeting-title{text-transform:uppercase;letter-spacing:.1em;color:var(--muted);font-size:11px;font-weight:700}.meeting-room-name{margin-bottom:0}.meeting-controls{flex-wrap:wrap;justify-content:flex-end;align-items:center;gap:10px;display:flex}.meeting-timer{text-align:center;color:#93c5fd;min-width:74px;font-size:18px;font-weight:700}.videos{flex:auto;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));grid-auto-rows:minmax(320px,1fr);gap:20px;display:grid}.video-tile{border:1px solid var(--line);background:#0b1220;border-radius:18px;flex-direction:column;min-height:0;display:flex;position:relative;overflow:hidden}.video-tile.speaking{border-color:var(--success);box-shadow:0 0 0 2px #22c55e59}.video-label-row{border-bottom:1px solid var(--line);justify-content:space-between;align-items:center;gap:12px;padding:10px 12px;display:flex}.tile-actions{flex-shrink:0;align-items:center;gap:8px;display:inline-flex}.tile-action-btn{width:30px;height:30px;color:var(--text);cursor:pointer;background:#0f172acc;border:1px solid #94a3b84d;border-radius:9px;justify-content:center;align-items:center;display:inline-flex}.tile-action-btn:hover{background:#2563eb40}.participant-volume{color:var(--muted);gap:8px;font-size:13px;display:grid}.participant-volume-popover{z-index:20;border:1px solid var(--line);background:#111827fa;border-radius:14px;width:min(260px,100% - 20px);padding:12px;position:absolute;top:48px;right:10px;box-shadow:0 14px 34px #00000059}.screen-slot{background:#020617;flex:auto;min-height:260px}.media-slot{background:#020617;flex:auto;justify-content:center;align-items:center;min-height:280px;display:flex}.media-slot video,.screen-slot video{width:100%;height:100%;min-height:inherit;object-fit:cover}.screen-share-video{object-fit:contain!important}.local-video{transform:scaleX(-1)}.avatar-placeholder{color:#fff;background:linear-gradient(135deg,#1d4ed8,#3b82f6);border-radius:50%;justify-content:center;align-items:center;width:120px;height:120px;font-size:44px;font-weight:800;display:flex}.hidden-audio{opacity:0;width:0;height:0}.chat-card{flex-direction:column;min-height:calc(100vh - 28px);margin-bottom:96px;display:flex;position:sticky;top:14px}.chat-messages{border:1px solid var(--line);background:#0b1220;border-radius:16px;flex-direction:column;flex:auto;gap:10px;min-height:360px;max-height:calc(100vh - 260px);padding:12px;display:flex;overflow-y:auto}.chat-message{background:#111827;border:1px solid #223046;border-radius:12px;padding:10px 12px}.chat-message.own{background:#102143;border-color:#274b8f}.chat-author{color:#93c5fd;margin-bottom:6px;font-size:12px;font-weight:700}.chat-text{word-break:break-word}.chat-form{flex-wrap:wrap;gap:10px;margin-top:14px;display:flex}.chat-form input[type=text]{flex:260px;min-width:220px}.hidden-file-input{display:none}.attachment-btn{flex:none}.file-link{color:#93c5fd}.call-bottom-actions{z-index:50;border:1px solid var(--line);background:#0b1220f5;border-radius:18px;gap:12px;padding:14px 18px;display:flex;position:fixed;bottom:18px;left:50%;transform:translate(-50%);box-shadow:0 16px 32px #00000038}.screen-slot:fullscreen{background:#000;width:100vw;height:100vh}.screen-slot video:fullscreen{background:#000;width:100vw;height:100vh}:is(.screen-slot:fullscreen video,.screen-slot video:fullscreen){width:100%;height:100%;object-fit:contain!important}@media (width<=900px){.home-grid,.call-layout,.prejoin-layout{grid-template-columns:1fr}.container.wide.call-page{padding:10px}.call-layout,.call-layout .meeting-card{min-height:auto}.chat-card{min-height:auto;position:static}.meeting-topbar{flex-direction:column;align-items:flex-start}.meeting-controls{grid-template-columns:repeat(4,minmax(0,1fr));justify-content:stretch;gap:8px;width:100%;display:grid}.meeting-controls .icon-btn,.meeting-controls .btn{width:100%;min-width:0;padding-left:8px;padding-right:8px}.meeting-timer{text-align:center;grid-column:1/-1;width:100%;padding-top:2px}}@media (width<=640px){.container{padding:20px 12px}.home-actions,.row{flex-direction:column;grid-template-columns:1fr;align-items:stretch}.card{padding:18px 14px}.preview-stage{min-height:280px}.call-bottom-actions{flex-direction:column;width:calc(100% - 24px)}}@media (width<=760px) and (orientation:landscape){.container.wide.call-page{padding:6px}.meeting-topbar{margin-bottom:8px}.meeting-room-name,.meeting-topbar .muted{margin:0}.meeting-controls{grid-template-columns:repeat(5,minmax(0,1fr))}.meeting-timer{grid-column:auto;align-self:center}.videos{grid-template-columns:repeat(auto-fit,minmax(220px,1fr));grid-auto-rows:minmax(220px,1fr);gap:8px}.media-slot,.screen-slot{min-height:190px}}
