:root{--bg:#f7f5f0;--card:#fff;--ink:#1c1c1e;--mute:#6b6b70;--acc:#1f5fbf;--warn:#c2410c;--ok:#15803d;--line:#e6e2d8;--tile:#1f2023}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;background:var(--bg);color:var(--ink);font-family:Inter,-apple-system,"Segoe UI",Roboto,sans-serif}
button{font:inherit;border:1px solid var(--line);background:var(--card);border-radius:10px;padding:9px 14px;cursor:pointer;color:var(--ink)}
button:hover{border-color:#cfc8b8}
button.primary{background:var(--acc);border-color:var(--acc);color:#fff;font-weight:600}
button.danger{background:#fff1f0;border-color:#fecdca;color:#b42318}
button.on{background:#e8eefb;border-color:#b9cbf2;color:var(--acc);font-weight:600}
.hidden{display:none!important}
.join{min-height:100%;display:flex;align-items:center;justify-content:center;padding:16px}
.joincard{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:28px;max-width:520px;width:100%;display:flex;flex-direction:column;gap:14px}
.joincard .brand{font-size:26px;font-weight:700}
.joincard video{width:100%;aspect-ratio:16/9;background:var(--tile);border-radius:12px;object-fit:cover}
.fine{font-size:13px;color:var(--mute)}
.app{height:100%;display:grid;grid-template-columns:1fr 340px}
main{position:relative;display:flex;flex-direction:column;min-width:0;padding:12px;gap:10px}
.grid{flex:1;display:grid;gap:10px;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));align-content:center;min-height:0;overflow:auto}
.grid.sharing{grid-template-columns:1fr 220px;grid-auto-rows:min-content}
.tile{position:relative;background:var(--tile);border-radius:14px;overflow:hidden;aspect-ratio:16/9;border:3px solid transparent;transition:border-color .15s}
.tile.speaking{border-color:#34c759}
.tile.current{box-shadow:0 0 0 2px var(--acc)}
.tile video{width:100%;height:100%;object-fit:cover}
.tile.screen{grid-row:span 3;aspect-ratio:auto}
.tile.screen video{object-fit:contain;background:#000}
.tile .name{position:absolute;left:10px;bottom:8px;color:#fff;font-size:14px;font-weight:600;background:rgba(0,0,0,.45);padding:3px 8px;border-radius:7px}
.tile .initial{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:54px;color:#fff;opacity:.85}
.bar{display:flex;gap:8px;align-items:center}
.spacer{flex:1}
.recbadge{font-size:13px;font-weight:600}
.recbadge.on{color:#b42318}.recbadge.paused{color:var(--ok)}
aside{background:var(--card);border-left:1px solid var(--line);padding:16px;overflow:auto;display:flex;flex-direction:column;gap:16px}
aside h2{font-size:12px;text-transform:uppercase;letter-spacing:.08em;color:var(--mute);margin-bottom:8px}
.now .title{font-size:20px;font-weight:700}
.now .clock{font-size:56px;font-weight:700;font-variant-numeric:tabular-nums;letter-spacing:-1px;line-height:1.1}
.now .sub{color:var(--mute);font-size:14px}
.now .private{margin-top:6px;font-size:14px;font-weight:600;color:var(--warn);min-height:18px}
.members{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-bottom:8px}
.members button{text-align:left;padding:8px 10px}
.members button.done{opacity:.5;text-decoration:line-through}
.members button.absent{opacity:.35}
.members button.current{background:var(--acc);border-color:var(--acc);color:#fff;font-weight:600}
.hintline{font-size:12px;color:var(--mute);margin-bottom:6px}
.btnrow{display:flex;gap:6px;margin-top:6px}
.btnrow button{flex:1;padding:8px 6px;font-size:13px}
.agenda{list-style:none;font-size:14px}
.agenda li{display:flex;justify-content:space-between;padding:4px 8px;border-radius:7px;color:var(--mute)}
.agenda li.done{text-decoration:line-through;opacity:.55}
.agenda li.current{background:#e8eefb;color:var(--acc);font-weight:650}
.radar{list-style:none;font-size:14px;margin-bottom:6px}
.radar li{padding:4px 0;border-bottom:1px solid var(--line)}
.radar li.empty{color:var(--mute);font-style:italic;border:none}
#radarin{width:100%;font:inherit;border:1px solid var(--line);border-radius:9px;padding:8px 10px}
.wide{width:100%}
.banner{position:absolute;top:84px;left:50%;transform:translateX(-50%);z-index:5;background:var(--ink);color:#fff;border-radius:14px;padding:12px 22px;display:flex;gap:16px;align-items:baseline;box-shadow:0 10px 30px rgba(0,0,0,.25);max-width:90%}
.banner .bt{font-size:24px;font-weight:700}.banner .bs{font-size:15px;opacity:.85}
.toast{position:fixed;right:356px;bottom:20px;background:#fff7ed;border:1px solid #fed7aa;color:#9a3412;padding:10px 14px;border-radius:10px;font-weight:600;box-shadow:0 6px 20px rgba(0,0,0,.12)}
@media (max-width:900px){.app{grid-template-columns:1fr;grid-template-rows:auto auto}aside{border-left:none;border-top:1px solid var(--line)}.toast{right:16px}main{padding:8px}}

/* Whose turn it is: a permanent bar, and the speaker on the big tile. */
.turnbar{display:flex;align-items:baseline;gap:14px;background:var(--card);border:1px solid var(--line);border-left:6px solid var(--acc);border-radius:12px;padding:10px 16px}
.turnwho{font-size:26px;font-weight:700}
.turnmeta{font-size:16px;color:var(--mute);font-variant-numeric:tabular-nums}
.turnbar.brk{border-left-color:#d97706}
.grid.stage{display:flex;flex-direction:column;align-items:stretch}
.grid.stage .big{flex:1;min-height:0;display:flex;justify-content:center}
.grid.stage .big .tile{height:100%;aspect-ratio:16/9;max-width:100%}
.grid.stage .strip{display:flex;gap:10px;justify-content:center;height:130px;flex:none}
.grid.stage .strip .tile{height:100%;aspect-ratio:16/9}
.tile.current{border-color:var(--acc);box-shadow:none}
.tile.current.speaking{border-color:#34c759}
.tile .now{position:absolute;top:10px;left:10px;background:var(--acc);color:#fff;font-size:12px;font-weight:700;letter-spacing:.06em;padding:3px 8px;border-radius:6px}

.sharewrap{position:relative}
.sharemenu{position:absolute;bottom:44px;left:0;background:var(--card);border:1px solid var(--line);border-radius:12px;padding:6px;display:flex;flex-direction:column;gap:4px;box-shadow:0 10px 30px rgba(0,0,0,.15);z-index:20;white-space:nowrap}
.sharemenu button{border:none;text-align:left}
.sharemenu button:hover{background:#f1efe9}
.cropper{position:fixed;inset:0;background:rgba(20,20,22,.6);z-index:50;display:flex;align-items:center;justify-content:center;padding:24px}
.cropcard{background:var(--card);border-radius:16px;padding:14px;max-width:min(1200px,96vw);width:100%;display:flex;flex-direction:column;gap:10px}
.crophead{display:flex;justify-content:space-between;align-items:center;gap:12px}
.cropstage{position:relative;cursor:crosshair;user-select:none;line-height:0}
.cropstage video{width:100%;max-height:72vh;object-fit:contain;background:#000;border-radius:8px}
.croprect{position:absolute;border:2px solid #34c759;background:rgba(52,199,89,.12);box-shadow:0 0 0 9999px rgba(0,0,0,.45);pointer-events:none}
.cropcard.narrow{max-width:520px;gap:12px}
.steps{padding-left:20px;display:flex;flex-direction:column;gap:6px;font-size:15px}
.sharemenu small{color:var(--mute)}

/* Zoom-style share picker */
.pickcard{background:var(--card);border-radius:16px;width:min(980px,96vw);display:grid;grid-template-columns:1fr 280px;grid-template-rows:1fr auto;overflow:hidden}
.pickmain{padding:18px;display:flex;flex-direction:column;gap:14px}
.sharetabs{align-self:center;display:flex;background:#eef2ff;border-radius:12px;padding:4px;gap:4px}
.sharetabs button{border:none;background:none;padding:6px 18px;border-radius:9px;font-weight:600;color:var(--mute)}
.sharetabs button.on{background:#fff;color:var(--ink);box-shadow:0 1px 3px rgba(0,0,0,.1)}
.tiles2{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.tile2{display:flex;flex-direction:column;align-items:center;gap:10px;padding:18px 10px;border-radius:14px;font-size:14px}
.tile2 .ic{font-size:30px;background:#fff;border-radius:10px;padding:12px 26px;box-shadow:0 1px 4px rgba(0,0,0,.08)}
.tile2.on{background:var(--acc);border-color:var(--acc);color:#fff;font-weight:600}
.pickside{background:#fafaf7;border-left:1px solid var(--line);padding:18px;display:flex;flex-direction:column;gap:10px}
.pickside h3{font-size:13px;color:var(--mute);font-weight:600}
.pickside label{font-size:14px;display:flex;gap:8px;align-items:center}
.lays{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.lay{display:flex;flex-direction:column;align-items:center;gap:6px;font-size:12px;padding:8px}
.lay.on{border-color:var(--acc);box-shadow:0 0 0 1px var(--acc)}
.lay:disabled{opacity:.4;cursor:not-allowed}
.lp{position:relative;width:70px;height:40px;background:#222;border-radius:5px;display:block}
.lp i{position:absolute;background:#ddd;border-radius:2px}
.lp b{position:absolute;background:#7aa7f0;border-radius:3px}
.lp-content i{inset:6px}.lp-content b{display:none}
.lp-side i{left:5px;top:8px;width:40px;height:24px}.lp-side b{right:5px;top:11px;width:18px;height:18px}
.lp-shoulder i{inset:6px}.lp-shoulder b{right:9px;bottom:9px;width:18px;height:12px}
.pickfoot{grid-column:1/-1;border-top:1px solid var(--line);padding:12px;display:flex;justify-content:center;gap:10px}
.pickfoot .primary{min-width:180px}
#camera2pick{font:inherit;padding:8px;border-radius:9px;border:1px solid var(--line)}
@media (max-width:760px){.pickcard{grid-template-columns:1fr}.pickside{border-left:none;border-top:1px solid var(--line)}.tiles2{grid-template-columns:repeat(2,1fr)}}
.ask{border-color:#c7d7f5;color:var(--acc);font-weight:600}
.ask.held{background:var(--acc);color:#fff;border-color:var(--acc)}
.howto p{font-size:13px;line-height:1.45;margin-bottom:4px}
.howto .eg{color:var(--mute)}
.offline{background:#fff7ed;border:1px solid #fed7aa;color:#9a3412;border-radius:10px;padding:8px 12px;font-size:14px;font-weight:600}