:root{--primary: #2563eb;--primary-soft: #dbeafe;--secondary: #0ea5e9;--bg: #f8fafc;--fg: #0f172a;--muted: #64748b;--border: #cbd5e1;--danger: #dc2626;--radius: 12px;font-family:IBM Plex Sans Thai,system-ui,sans-serif;color:var(--fg);background:var(--bg)}*{box-sizing:border-box}body{margin:0;min-height:100vh;background:radial-gradient(1200px 600px at 10% -10%,#dbeafe 0%,transparent 55%),radial-gradient(900px 500px at 100% 0%,#e0f2fe 0%,transparent 50%),var(--bg)}#root{min-height:100vh}button,input,select{font:inherit}.shell{max-width:900px;margin:0 auto;padding:1.25rem 1rem 2.5rem}.call-card{padding:1rem}.call-header{display:flex;justify-content:space-between;align-items:flex-start;gap:.75rem;margin-bottom:.75rem}.call-code{font-size:1.5rem;margin:.35rem 0 0;text-align:left;letter-spacing:.18em}.pill.rec{margin-left:.4rem;background:#fee2e2;color:#b91c1c}.status{color:#1e40af;font-size:.88rem;margin:.55rem 0 0;word-break:break-all}.brand{display:flex;align-items:center;gap:.75rem;font-size:2rem;font-weight:700;letter-spacing:-.02em;color:var(--primary);margin:0 0 .35rem}.brand:before{content:"";display:block;flex:0 0 40px;height:40px;background:url(/callma-mark.svg) center / contain no-repeat}.lead{color:var(--muted);margin:0 0 1.75rem;line-height:1.5}.card{background:#ffffffeb;border:1px solid var(--border);border-radius:var(--radius);padding:1.25rem;margin-bottom:1rem}.card h2{margin:0 0 1rem;font-size:1.05rem}label{display:block;font-size:.85rem;color:var(--muted);margin-bottom:.35rem}input,select{width:100%;padding:.7rem .85rem;border:1px solid var(--border);border-radius:10px;background:#fff;margin-bottom:.85rem}.row{display:flex;gap:.75rem;flex-wrap:wrap}.btn{-webkit-appearance:none;-moz-appearance:none;appearance:none;border:none;border-radius:10px;padding:.75rem 1.1rem;cursor:pointer;font-weight:600;background:linear-gradient(135deg,var(--primary),var(--secondary));color:#fff}.btn:disabled{opacity:.55;cursor:not-allowed}.btn.secondary{background:#fff;color:var(--primary);border:1px solid var(--border)}.btn.danger{background:var(--danger)}.error{color:var(--danger);font-size:.9rem;margin:.5rem 0 0}.code-xl{font-size:2.4rem;font-weight:700;letter-spacing:.2em;color:var(--primary);text-align:center;margin:.5rem 0 1rem}.call-stage{position:relative;width:100%;aspect-ratio:16 / 9;max-height:min(62vh,520px);height:auto;background:#000;border-radius:var(--radius);overflow:hidden;border:1px solid #1e293b}.party-grid{position:absolute;top:0;right:0;bottom:0;left:0;display:grid;grid-template-columns:repeat(var(--cols, 1),minmax(0,1fr));gap:4px;background:#000;padding:4px}.party-grid[data-focus="1"]{display:flex;flex-direction:column;gap:6px;padding:6px;box-sizing:border-box}.party-grid[data-focus="1"] .tile.is-focus{flex:1 1 0;min-height:0;width:100%;max-height:none}.filmstrip{flex:0 0 88px;display:grid;grid-template-columns:repeat(var(--pips, 2),minmax(0,1fr));gap:6px;width:100%;min-width:0;min-height:88px;max-height:88px;overflow:hidden;box-sizing:border-box}.filmstrip[data-count="1"]{grid-template-columns:minmax(0,42%);justify-content:center}.filmstrip[data-count="2"]{grid-template-columns:repeat(2,minmax(0,1fr))}.filmstrip[data-count="3"]{grid-template-columns:repeat(3,minmax(0,1fr))}.filmstrip[data-count="4"]{grid-template-columns:repeat(4,minmax(0,1fr))}.filmstrip .tile.is-pip{width:100%;min-width:0;min-height:0;height:88px;max-width:none;border-radius:8px;border:1px solid rgba(255,255,255,.45);cursor:pointer}.filmstrip .tile.is-pip .tile-video,.filmstrip .tile.is-pip .tile-media video,.filmstrip .tile.is-pip .tile-media>div{object-fit:cover!important;min-width:0!important;min-height:0!important}.tile{position:relative;min-width:0;min-height:0;background:#000;overflow:hidden;border-radius:8px;cursor:pointer}.tile:focus-visible,.tile.is-focus{outline:2px solid #38bdf8;outline-offset:-2px}.tile-media{width:100%;height:100%;display:flex;align-items:center;justify-content:center;background:#000}.tile-video,.tile-media video,.tile-media>div{width:100%!important;height:100%!important;max-width:100%;max-height:100%;object-fit:contain!important;background:#000;pointer-events:none}.tile-label{position:absolute;left:8px;bottom:8px;z-index:3;padding:.2rem .55rem;border-radius:999px;background:#0f172abf;color:#f8fafc;font-size:.75rem;font-weight:600;pointer-events:none}.tile-local .tile-label{background:#2563ebe6}.hint{margin:.25rem 0 0;color:var(--muted);font-size:.82rem}.call-controls{display:flex;gap:.5rem;flex-wrap:wrap;justify-content:center;margin-top:.65rem}.ctrl{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:2.75rem;height:2.75rem;border:1px solid #334155;border-radius:999px;padding:0;background:#1e293b;color:#e2e8f0;cursor:pointer;display:grid;place-items:center;transition:background .15s ease,border-color .15s ease}.ctrl:hover:not(:disabled){border-color:var(--primary)}.ctrl:disabled{opacity:.55;cursor:not-allowed}.ctrl.is-off{background:#0f172a;color:#94a3b8}.ctrl.is-rec{background:#7f1d1d;border-color:#991b1b;color:#fecaca}.ctrl.is-rec.is-locked{opacity:1;cursor:not-allowed}.check-row{display:flex;align-items:center;gap:.5rem;margin:0 0 .85rem;font-size:.9rem;color:var(--text);cursor:pointer}.check-row input{width:auto;margin:0;accent-color:var(--primary)}.ctrl.is-hangup{background:var(--danger);border-color:var(--danger);color:#fff}.ctrl-caption{display:none}.ctrl-ico{width:1.25rem;height:1.25rem;display:block;background:currentColor;mask-size:contain;mask-repeat:no-repeat;mask-position:center;-webkit-mask-size:contain;-webkit-mask-repeat:no-repeat;-webkit-mask-position:center}.ctrl-mic{mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3a3 3 0 0 0-3 3v6a3 3 0 0 0 6 0V6a3 3 0 0 0-3-3Z'/%3E%3Cpath d='M19 10v1a7 7 0 0 1-14 0v-1'/%3E%3Cline x1='12' y1='19' x2='12' y2='22'/%3E%3C/svg%3E");-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3a3 3 0 0 0-3 3v6a3 3 0 0 0 6 0V6a3 3 0 0 0-3-3Z'/%3E%3Cpath d='M19 10v1a7 7 0 0 1-14 0v-1'/%3E%3Cline x1='12' y1='19' x2='12' y2='22'/%3E%3C/svg%3E")}.ctrl-mic.off{mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='1' y1='1' x2='23' y2='23'/%3E%3Cpath d='M9 9v3a3 3 0 0 0 5.12 2.12M15 9.34V6a3 3 0 0 0-5.94-.6'/%3E%3Cpath d='M17 16.95A7 7 0 0 1 5 11v-1'/%3E%3Cline x1='12' y1='19' x2='12' y2='22'/%3E%3C/svg%3E");-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='1' y1='1' x2='23' y2='23'/%3E%3Cpath d='M9 9v3a3 3 0 0 0 5.12 2.12M15 9.34V6a3 3 0 0 0-5.94-.6'/%3E%3Cpath d='M17 16.95A7 7 0 0 1 5 11v-1'/%3E%3Cline x1='12' y1='19' x2='12' y2='22'/%3E%3C/svg%3E")}.ctrl-cam{mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M23 7l-7 5 7 5V7z'/%3E%3Crect x='1' y='5' width='15' height='14' rx='2'/%3E%3C/svg%3E");-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M23 7l-7 5 7 5V7z'/%3E%3Crect x='1' y='5' width='15' height='14' rx='2'/%3E%3C/svg%3E")}.ctrl-cam.off{mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 16v1a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V7a2 2 0 0 1 2-2h2m5.66 0H14a2 2 0 0 1 2 2v3.34l1 1L23 7v10'/%3E%3Cline x1='1' y1='1' x2='23' y2='23'/%3E%3C/svg%3E");-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 16v1a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V7a2 2 0 0 1 2-2h2m5.66 0H14a2 2 0 0 1 2 2v3.34l1 1L23 7v10'/%3E%3Cline x1='1' y1='1' x2='23' y2='23'/%3E%3C/svg%3E")}.ctrl-rec{border-radius:50%;width:1.15rem;height:1.15rem;margin:.2rem 0;background:#dc2626;mask:none;-webkit-mask:none}.ctrl-rec.on{border-radius:3px;width:.95rem;height:.95rem;background:#b91c1c}.ctrl-hang{mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10.68 13.31a16 16 0 0 0 3.41 2.6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7 2 2 0 0 1 1.72 2v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91'/%3E%3Cline x1='23' y1='1' x2='1' y2='23'/%3E%3C/svg%3E");-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10.68 13.31a16 16 0 0 0 3.41 2.6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7 2 2 0 0 1 1.72 2v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91'/%3E%3Cline x1='23' y1='1' x2='1' y2='23'/%3E%3C/svg%3E");background:#fff}.tile-avatar{width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.45rem;background:linear-gradient(160deg,#1e293b,#0f172a)}.tile-avatar-bubble{width:4.5rem;height:4.5rem;border-radius:999px;display:grid;place-items:center;background:linear-gradient(135deg,#2563eb,#0ea5e9);color:#fff;font-weight:700;font-size:1.35rem;letter-spacing:.02em}.tile-avatar-caption{color:#94a3b8;font-size:.78rem;font-weight:600}.status.muted-path{color:var(--muted);font-size:.78rem}.call-stream-bar{display:flex;flex-wrap:wrap;gap:.65rem 1rem;align-items:flex-end;margin:0 0 .75rem}.stream-field{display:flex;flex-direction:column;gap:.25rem;font-size:.75rem;color:var(--muted);font-weight:600}.stream-field select{min-width:8.5rem;padding:.4rem .55rem;border-radius:8px;border:1px solid #cbd5e1;background:#fff;color:#0f172a;font-size:.9rem}.stream-field select:disabled{opacity:.65;cursor:not-allowed}.stream-debug-btn.is-on{border-color:var(--primary);color:var(--primary)}.call-debug{margin:.65rem 0 0;padding:.65rem .75rem;background:#0f172a;color:#e2e8f0;border-radius:8px;font-size:.7rem;line-height:1.4;white-space:pre-wrap;overflow:auto;max-height:min(42vh,22rem);font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace}.admin-link-row{margin:-.25rem 0 1rem}button.linkish{background:none;border:none;color:var(--primary);font-weight:600;cursor:pointer;padding:0;font-size:.95rem}button.linkish:hover{text-decoration:underline}.admin-card .admin-title{margin:.35rem 0 .25rem;font-size:1.35rem}.admin-login{display:flex;flex-direction:column;gap:.5rem;max-width:28rem}.admin-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:1rem;margin-top:.75rem}.admin-grid h3{margin:0 0 .5rem;font-size:.95rem}.admin-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.45rem}.admin-list>li{display:flex;gap:.4rem;align-items:flex-start;justify-content:space-between}.admin-row{flex:1;text-align:left;display:flex;justify-content:space-between;gap:.5rem;padding:.55rem .65rem;border-radius:8px;border:1px solid #e2e8f0;background:#fff;cursor:pointer}.admin-row.is-active{border-color:var(--primary);background:var(--primary-soft)}.admin-participant{padding:.55rem .65rem;border-radius:8px;border:1px solid #e2e8f0;background:#f8fafc}.admin-tracks{display:flex;flex-wrap:wrap;gap:.25rem;margin-top:.35rem}.admin-actions{display:flex;flex-direction:column;gap:.25rem}.admin-form{display:flex;flex-direction:column;gap:.45rem;margin-bottom:1rem}.admin-form label{display:flex;flex-direction:column;gap:.25rem;font-size:.85rem}.admin-form textarea,.admin-form input:not([type=checkbox]),.admin-form select{width:100%}.admin-inline{display:flex;gap:.4rem}.admin-inline>*{flex:1}.admin-check{flex-direction:row!important;align-items:center;gap:.4rem!important}.admin-participant-block{flex-direction:column;align-items:stretch}.admin-detail{margin-top:.4rem;padding:.55rem .65rem;border-radius:8px;border:1px dashed #cbd5e1;background:#fff}.admin-mini{padding:.3rem .55rem;font-size:.78rem;width:auto}.tile-badges{position:absolute;top:8px;right:8px;display:flex;gap:4px;z-index:2}.tile-badge{width:32px;height:32px;border-radius:999px;display:grid;place-items:center;background:#0f172aeb;color:#fff;line-height:0}.tile-badge svg{display:block}.tile-badge.is-mic-off{background:#b91c1ceb}.tile-badge.is-speaking{background:#16a34aeb;box-shadow:0 0 8px #16a34a99}.tile-badge.is-speak-muted{background:#f59e0bf2;box-shadow:0 0 8px #f59e0b8c;animation:pulse-speak .9s ease-in-out infinite}@keyframes pulse-speak{50%{transform:scale(1.08)}}.tile.is-speaking-ring{outline:2px solid #16a34a;outline-offset:-2px}.tile.is-speak-muted-ring{outline:2px solid #f59e0b;outline-offset:-2px}.muted-speaking-banner{margin:.5rem 0 0;padding:.45rem .65rem;border-radius:8px;background:#fef3c7;color:#92400e;font-size:.85rem;font-weight:600;text-align:center}@media(max-width:640px){.call-stage{max-height:min(68vh,480px)}.filmstrip{flex-basis:76px;min-height:76px;max-height:76px}.filmstrip .tile.is-pip{height:76px}.ctrl{width:2.75rem;height:2.75rem}}.pill{display:inline-block;padding:.2rem .55rem;border-radius:999px;background:var(--primary-soft);color:#1e40af;font-size:.8rem;font-weight:600}