:root{--bg:#111;--bg-dim:#1a1a1a;--bg-subtle:#222;--fg:#eee;--fg-dim:#888;--border:#333;--accent:#3b82f6;--red:#dc2626;--green:#22c55e}*{box-sizing:border-box;margin:0;padding:0}html,body{overflow:hidden;height:100%}body{background:var(--bg);color:var(--fg);-webkit-text-size-adjust:100%;font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Noto Sans,Ubuntu,Cantarell,Helvetica Neue,sans-serif;font-size:14px}#root,.app{display:flex;flex-direction:column;height:100%}input,button{font-family:inherit;font-size:inherit}.lobby{display:flex;overflow:auto;flex-direction:column;flex:1;justify-content:center;align-items: center;padding:24px}.lobby-card{width:100%;max-width:360px}.lobby-card h1{color:var(--fg);margin-bottom:24px;font-size:18px;font-weight:600}.field{margin-bottom:16px}.field label{display:block;color:var(--fg-dim);margin-bottom:6px;font-size:12px}.field input{border:1px solid var(--border);background:var(--bg-dim);color:var(--fg);outline:none;-webkit-appearance:none;border-radius:0;width:100%;padding:10px 12px}.field input:focus{border-color:var(--accent)}.field input::placeholder{color:var(--fg-dim)}.btn{background:var(--bg-subtle);color:var(--fg);cursor:pointer;-webkit-appearance:none;border:none;border-radius:0;padding:10px 16px;font-weight:500}.btn:hover{background:var(--border)}.btn:disabled{opacity:.5;cursor:not-allowed}.btn-primary{background:var(--accent);color:#fff}.btn-primary:hover{background:#2563eb}.btn-block{width:100%}.divider{display:flex;color:var(--fg-dim);align-items: center;gap:12px;margin:20px 0;font-size:12px}.divider:before,.divider:after{content:"";background:var(--border);flex:1;height:1px}.join-row{display:flex;gap:8px}.join-row input{border:1px solid var(--border);background:var(--bg-dim);color:var(--fg);outline:none;text-align:center;text-transform:uppercase;letter-spacing:.1em;-webkit-appearance:none;border-radius:0;flex:1;padding:10px 12px;font-family:monospace}.join-row input:focus{border-color:var(--accent)}.status{display:flex;color:var(--fg-dim);align-items: center;gap:8px;margin-top:20px;font-size:12px}.status-dot{background:var(--red);border-radius:50%;width:6px;height:6px}.status-dot.online{background:var(--green)}.settings-toggle{display:flex;border:1px solid var(--border);color:var(--fg-dim);cursor:pointer;background:0 0;justify-content:center;align-items: center;gap:6px;width:100%;margin-top:16px;padding:10px;font-size:13px}.settings-toggle:hover{color:var(--fg);border-color:var(--fg-dim)}.lobby-settings{background:var(--bg);border:1px solid var(--border);margin-top:12px;padding:12px}.lobby-settings .settings-field{margin-bottom:10px}.lobby-settings .settings-field:last-of-type{margin-bottom:0}.lobby-settings .settings-field label{display:block;color:var(--fg-dim);text-transform:uppercase;letter-spacing:.05em;margin-bottom:4px;font-size:11px}.lobby-settings .settings-field select{background:var(--bg-dim);border:1px solid var(--border);color:var(--fg);outline:none;cursor:pointer;-webkit-appearance:none;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-position:right 8px center;background-repeat:no-repeat;width:100%;padding:8px 10px;font-size:13px}.lobby-settings .settings-field select:focus{border-color:var(--accent)}.lobby-settings .settings-info{color:var(--fg-dim);border-top:1px solid var(--border);margin-top:12px;padding-top:10px;font-size:11px}.error{background:var(--red);color:#fff;margin-top:16px;padding:10px 12px;font-size:13px}.call{display:flex;position:relative;flex-direction:column;flex:1;height:100%;min-height:0}.call .error{position:absolute;z-index:100;white-space:nowrap;background:#dc2626e6;margin:0;padding:8px 16px;top:52px;left:50%;transform:translate(-50%)}.call-header{display:flex;background:var(--bg-dim);border-bottom:1px solid var(--border);flex-shrink:0;justify-content:space-between;align-items: center;height:44px;min-height:44px;padding:0 12px}.room-code{display:flex;align-items: center;gap:8px;font-size:13px}.room-code span:first-child{color:var(--fg-dim)}.room-code code{color:var(--fg);background:var(--bg-subtle);padding:2px 6px;font-family:monospace}.header-btn{color:var(--fg-dim);cursor:pointer;display:flex;background:0 0;border:none;padding:8px}.header-btn:hover{color:var(--fg)}.call-main{display:flex;overflow:hidden;position:relative;flex:1;min-height:0}.grid{display:grid;background:var(--bg);flex:1;gap:2px;min-width:0;min-height:0;padding:2px}.grid.g1{grid-template-columns:1fr;grid-template-rows:1fr}.grid.g2{grid-template-columns:1fr 1fr;grid-template-rows:1fr}.grid.g4{grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr}.grid.g6{grid-template-columns:repeat(3,1fr);grid-template-rows:1fr 1fr}.grid.gn{grid-template-columns:repeat(auto-fit,minmax(200px,1fr));grid-auto-rows:1fr}.grid.spotlight{grid-template-columns:1fr 180px;grid-template-rows:1fr;gap:4px;padding:4px}.spotlight-main{display:flex;justify-content:center;align-items: center;min-width:0;min-height:0}.spotlight-main .tile{width:100%;height:100%}.spotlight-side{display:flex;overflow-y:auto;overflow-x:hidden;flex-direction:column;gap:4px;min-height:0}.spotlight-side .tile{aspect-ratio:16/9;flex-shrink:0;width:100%}.tile{position:relative;background:var(--bg-dim);display:flex;overflow:hidden;justify-content:center;align-items: center;min-width:0;min-height:0}.tile.speaking,.tile.focused{outline:2px solid var(--accent);outline-offset:-2px}.tile video{object-fit:contain;background:#000;width:100%;height:100%}.tile.mirror video{transform:scaleX(-1)}.tile video.off{display:none}.avatar{display:flex;background:var(--bg-subtle);color:var(--fg-dim);border-radius:50%;flex-shrink:0;justify-content:center;align-items: center;width:56px;height:56px;font-size:20px;font-weight:500}.tile-info{position:absolute;display:flex;background:linear-gradient(#0000,#000000b3);justify-content:space-between;align-items: center;padding:6px 8px;bottom:0;left:0;right:0}.tile-name{color:#fff;display:flex;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;align-items: center;gap:4px;font-size:11px}.tile-icons{display:flex;flex-shrink:0;gap:3px}.tile-icon{display:flex;background:var(--red);color:#fff;justify-content:center;align-items: center;width:18px;height:18px;font-size:10px}.tile-icon.screen-icon{background:var(--accent)}.pin-btn{position:absolute;color:#fff;cursor:pointer;display:flex;opacity:0;background:#00000080;border:none;justify-content:center;align-items: center;width:26px;height:26px;transition:opacity .15s;top:4px;right:4px}.tile:hover .pin-btn,.tile:active .pin-btn{opacity:1}.pin-btn.active{background:var(--accent);opacity:1}.controls{background:var(--bg-dim);border-top:1px solid var(--border);display:flex;flex-shrink:0;justify-content:center;align-items: center;gap:6px;height:56px;min-height:56px;padding:0 8px}.ctrl-btn{background:var(--bg-subtle);color:var(--fg);cursor:pointer;display:flex;position:relative;-webkit-tap-highlight-color:transparent;border:none;flex-shrink:0;justify-content:center;align-items: center;width:40px;height:40px}.ctrl-btn:hover,.ctrl-btn:active{background:var(--border)}.ctrl-btn.active{background:var(--accent);color:#fff}.ctrl-btn.off{color:var(--red)}.ctrl-btn.leave{background:var(--red);color:#fff;gap:6px;width:auto;padding:0 12px}.ctrl-btn.leave:hover,.ctrl-btn.leave:active{background:#b91c1c}.badge{position:absolute;background:var(--red);color:#fff;display:flex;justify-content:center;align-items: center;min-width:14px;height:14px;padding:0 3px;font-size:9px;top:4px;right:4px}.panel{background:var(--bg-dim);border-left:1px solid var(--border);display:flex;flex-direction:column;flex-shrink:0;width:280px;max-width:100%}.panel-header{display:flex;border-bottom:1px solid var(--border);flex-shrink:0;justify-content:space-between;align-items: center;height:44px;min-height:44px;padding:0 12px;font-size:13px;font-weight:500}.panel-close{color:var(--fg-dim);cursor:pointer;display:flex;-webkit-tap-highlight-color:transparent;background:0 0;border:none;padding:8px}.panel-close:hover{color:var(--fg)}.panel-body{overflow-y:auto;flex:1;min-height:0;padding:12px}.chat-empty{color:var(--fg-dim);text-align:center;padding:24px;font-size:13px}.msg{margin-bottom:12px}.msg-header{display:flex;align-items:baseline;gap:8px;margin-bottom:2px}.msg-name{color:var(--fg-dim);font-size:12px;font-weight:600}.msg.local .msg-name{color:var(--accent)}.msg-time{color:#555;font-size:10px}.msg-text{background:var(--bg-subtle);color:var(--fg);display:inline-block;word-break:break-word;padding:8px 10px;font-size:13px}.chat-input{border-top:1px solid var(--border);display:flex;flex-shrink:0;gap:8px;padding:12px}.chat-input input{background:var(--bg);border:1px solid var(--border);color:var(--fg);outline:none;-webkit-appearance:none;border-radius:0;flex:1;padding:8px 10px;font-size:13px}.chat-input input:focus{border-color:var(--accent)}.chat-input button{background:var(--accent);color:#fff;cursor:pointer;display:flex;-webkit-tap-highlight-color:transparent;border:none;flex-shrink:0;justify-content:center;align-items: center;width:36px;height:36px}.participant{display:flex;align-items: center;gap:10px;margin-bottom:2px;padding:8px}.participant:hover{background:var(--bg-subtle)}.participant-avatar{display:flex;background:var(--bg-subtle);border-radius:50%;flex-shrink:0;justify-content:center;align-items: center;width:28px;height:28px;font-size:12px;font-weight:600}.participant-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1;font-size:13px}.hand-icon{color:#f59e0b}.settings-body{padding:16px}.settings-notice{color:var(--fg-dim);background:var(--bg);border:1px solid var(--border);margin-bottom:16px;padding:8px 10px;font-size:11px}.settings-section{margin-bottom:20px}.settings-section h3{color:var(--fg);text-transform:uppercase;letter-spacing:.05em;margin-bottom:12px;font-size:13px;font-weight:600}.settings-field{margin-bottom:12px}.settings-field label{display:block;color:var(--fg-dim);margin-bottom:4px;font-size:12px}.settings-field select{background:var(--bg);border:1px solid var(--border);color:var(--fg);outline:none;cursor:pointer;-webkit-appearance:none;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-position:right 8px center;background-repeat:no-repeat;width:100%;padding:8px 10px;font-size:13px}.settings-field select:focus{border-color:var(--accent)}.settings-info{color:var(--fg-dim);border-top:1px solid var(--border);padding-top:12px;font-size:11px}.settings-info p{margin:0}@media (max-width:640px){.call-header{height:40px;min-height:40px;padding:0 8px}.room-code{font-size:12px}.call .error{padding:6px 12px;font-size:12px;top:48px}.grid.g2{grid-template-columns:1fr;grid-template-rows:1fr 1fr}.grid.g4{grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr}.grid.g6{grid-template-columns:1fr 1fr;grid-template-rows:repeat(3,1fr)}.grid.spotlight{grid-template-columns:1fr;grid-template-rows:1fr 70px}.spotlight-side{overflow-x:auto;overflow-y:hidden;flex-direction:row}.spotlight-side .tile{aspect-ratio:unset;width:100px;height:100%}.controls{gap:4px;height:52px;min-height:52px;padding:0 4px}.ctrl-btn{width:36px;height:36px}.ctrl-btn.leave{padding:0 10px}.ctrl-btn.leave span{display:none}.panel{position:fixed;z-index:50;border-left:none;width:100%;inset:0}.tile-info{padding:4px 6px}.tile-name{font-size:10px}.tile-icon{width:16px;height:16px;font-size:9px}.avatar{width:40px;height:40px;font-size:16px}}@media (hover:none){.pin-btn{opacity:1}}@supports (padding-bottom: env(safe-area-inset-bottom)){.controls{padding-bottom:env(safe-area-inset-bottom);height:calc(56px + env(safe-area-inset-bottom));min-height:calc(56px + env(safe-area-inset-bottom))}@media (max-width:640px){.controls{height:calc(52px + env(safe-area-inset-bottom));min-height:calc(52px + env(safe-area-inset-bottom))}}}