:root{--paper:#F6F7FA;--surface:#fff;--ink:#141824;--muted:#5B6274;--line:#E3E6EE;
    --accent:#2E52F2;--accent-soft:#E9EDFF;--ok:#1E9A5A;--ok-soft:#E4F5EC;
    --warn:#B27A08;--warn-soft:#FBF0D8;--bad:#CE3B37;--bad-soft:#FBE6E5;
    --mono:ui-monospace,Menlo,Consolas,monospace}
  @media(prefers-color-scheme:dark){:root{--paper:#0D0F16;--surface:#141824;--ink:#E8EAF1;
    --muted:#98A0B4;--line:#232838;--accent:#7C97FF;--accent-soft:#1B2138;
    --ok:#43C07C;--ok-soft:#13271C;--warn:#DDA637;--warn-soft:#2A2213;--bad:#F0625F;--bad-soft:#2B1514}}
  *{box-sizing:border-box}
  body{margin:0;background:var(--paper);color:var(--ink);
    font:15px/1.5 system-ui,-apple-system,"Segoe UI",sans-serif}
  .wrap{margin:0 auto;padding:10px 20px 12px}
  h1{font-size:1.3rem;margin:0}
  .muted{color:var(--muted)} .mono{font-family:var(--mono);font-size:.85em}
  .card{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:18px;margin:14px 0}
  button{font:600 .85rem system-ui;padding:8px 14px;border-radius:9px;border:1px solid var(--line);
    background:var(--surface);color:var(--ink);cursor:pointer}
  button:hover{border-color:var(--accent);color:var(--accent)}
  button.primary{background:var(--accent);border-color:var(--accent);color:#fff}
  button.primary:hover{opacity:.9;color:#fff}
  button.small{padding:4px 9px;font-size:.75rem}
  button:disabled{opacity:.45;cursor:default}
  button.mtog.on{background:var(--accent);border-color:var(--accent);color:#fff}
  button.mtog.on:hover{color:#fff;opacity:.9}
  select,input[type=text]{font:inherit;padding:7px 10px;border-radius:8px;
    border:1px solid var(--line);background:var(--surface);color:var(--ink)}
  .cfgstem{flex:none;width:16px;height:1px;background:var(--line)}
  /* the Sessions history table: height-resizable, scrolls inside */
  .sesswrap{resize:vertical;overflow-y:auto;height:200px;min-height:64px;
    border:1px solid var(--line);border-radius:10px;padding:8px 12px;margin-top:6px}
  .sesstbl{display:grid;grid-template-columns:auto auto auto 1fr auto auto;gap:2px 16px;
    font-size:.85rem;align-items:center}
  .sesstbl .th{font:600 .66rem var(--mono);letter-spacing:.06em;text-transform:uppercase;
    color:var(--muted);padding-bottom:4px;position:relative;white-space:nowrap}
  .colgrip{position:absolute;top:-2px;bottom:-2px;right:-11px;width:10px;cursor:col-resize}
  .colgrip:hover{background:var(--accent-soft);border-radius:3px}
  .sesstbl .tc{text-align:right;font-family:var(--mono)}
  /* + Session modal: a card floating over a dimmed console */
  #sesModal{position:fixed;inset:0;background:rgba(12,16,44,.42);display:flex;
    align-items:center;justify-content:center;z-index:60}
  .smcard{position:relative;background:var(--surface);border-radius:16px;padding:24px 28px 20px;
    min-width:480px;min-height:150px;box-shadow:0 24px 70px rgba(10,14,40,.35);
    display:flex;flex-direction:column;gap:14px;resize:both;overflow:auto}
  .smcard .cfgrow{display:flex;gap:10px;align-items:center;flex-wrap:nowrap}
  .smcard h3{margin:0;font-size:1.02rem}
  .smcard .smx{position:absolute;top:8px;right:8px;border:none;background:none;
    font-size:.95rem;color:var(--muted);padding:6px 9px;cursor:pointer}
  .smcard .smx:hover{color:var(--ink)}
  /* Overlay boxes: rounded squares; ON = projected */
  .ovlbox{width:96px;height:96px;border-radius:18px;border:1px solid var(--line);
    background:var(--surface);font:600 .9rem system-ui;cursor:pointer;color:var(--ink)}
  .ovlbox:hover{border-color:var(--accent);color:var(--accent)}
  .ovlbox.on{background:var(--accent);border-color:var(--accent);color:#fff}
  .ovlbox.on:hover{opacity:.92;color:#fff}
  .row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
  .chip{display:inline-block;font:600 .7rem var(--mono);padding:2px 8px;border-radius:6px;margin:2px 3px 2px 0}
  .chip.ok{background:var(--ok-soft);color:var(--ok)} .chip.warn{background:var(--warn-soft);color:var(--warn)}
  .chip.bad{background:var(--bad-soft);color:var(--bad)} .chip.dim{background:var(--accent-soft);color:var(--accent)}
  /* role chips: which held roles you're acting as */
  .rchip{cursor:pointer;user-select:none;font:600 .72rem var(--mono);letter-spacing:.04em;
    padding:3px 10px;border-radius:999px;border:1px solid var(--line);
    background:var(--surface);color:var(--muted)}
  .rchip.on{background:var(--accent);border-color:var(--accent);color:#fff}
  .chip.sec{cursor:pointer;border:1px solid transparent}
  .chip.sec:hover{border-color:var(--accent)}
  .chip.sec.sel{border-color:var(--accent);outline:1px solid var(--accent)}
  .grp{font:700 .78rem var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--accent);
    border-bottom:2px solid var(--accent-soft);padding:14px 0 6px;margin-top:6px;
    display:flex;justify-content:space-between;align-items:center;gap:10px}
  #tree > .grp:first-child{padding-top:0;margin-top:0}
  .clsrow{padding:8px 0;display:flex;gap:14px;align-items:flex-start;
    border-bottom:2px solid var(--accent-soft)}
  .clsrow .info{flex:1;min-width:0}
  .clsrow b.num{font-family:var(--mono)}
  .clshead{cursor:pointer;user-select:none}
  .clshead:hover b.num{color:var(--accent)}
  .clshead .tw{color:var(--muted);font-family:var(--mono);font-size:.8em}
  .clsdetail{margin-top:8px;padding:8px 0 2px}
  .clsdetail .lbl{font:600 .68rem var(--mono);letter-spacing:.06em;text-transform:uppercase;
    color:var(--muted);min-width:104px}
  /* Action rail: reveals on its own hover; each row's buttons on that row's band */
  #actionsCard{opacity:0;transform:translateX(-12px);margin:0;
    transition:opacity .25s ease,transform .25s ease}
  #actionsCard:hover{opacity:1;transform:none}
  #actions{position:relative}
  .acell{position:absolute;left:0;right:0;display:flex;flex-direction:row;align-items:center;
    gap:6px;flex-wrap:wrap;opacity:0;transition:opacity .12s ease}
  .acell:hover{opacity:1}
  .plus{font-weight:700;color:var(--accent);background:var(--accent-soft);border:none}
  .note{font-size:.78rem;color:var(--muted)}
  /* fold animation: newly-opened content grows in; closing shrinks before the
     re-render removes it — the page reflows in a glide, not a jump */
  .fold{display:grid;grid-template-rows:1fr;opacity:1;
    transition:grid-template-rows .28s ease,opacity .22s ease}
  .fold>div{min-height:0;overflow:clip}
  .fold.closed{grid-template-rows:0fr;opacity:0}
  /* check-in cards */
  .ci{border:1px solid var(--line);border-radius:12px;padding:12px 14px;margin:10px 0;background:var(--warn-soft)}
  .ci.live{border-color:var(--ok);background:var(--ok-soft)}
  /* the headcount: dead-center in the card's summary area, part of the card */
  .ci .count{font-size:2.6rem;font-weight:700;line-height:1;text-align:center;
    position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
    padding:10px 20px 14px}
  .ci .count span{font:600 .62rem var(--mono);letter-spacing:.08em;text-transform:uppercase;
    color:var(--muted);display:block;margin-top:5px}
  .ci .tw{cursor:pointer;user-select:none;color:var(--muted);font-family:var(--mono);font-size:.8rem}
  .plist{margin-top:10px;border-top:1px solid var(--line);padding-top:8px}
  .plist .prow{display:flex;gap:10px;align-items:center;padding:4px 0;font-size:.88rem;flex-wrap:wrap}
  .plist .prow .em{color:var(--muted);font-family:var(--mono);font-size:.78rem}
  .plist .prow .sp{flex:1}
  #login .userbtn{margin:4px 6px 4px 0}
  /* symmetric layout: the main column sits dead-center — the fixed-width
     Admin rail on the right is mirrored by an empty gutter on the left */
  #setup{display:flex;gap:18px;justify-content:center;align-items:flex-start}
  #lgutter{flex:none;width:280px}
  /* the right column mirrors #cols' structure: a hidden clone pill matches
     the tab row's height, so the card tops align without magic numbers */
  #rightcol{flex:none;width:280px;display:flex;flex-direction:column;
    height:calc(100vh - 22px)}
  #rtabspacer{visibility:hidden;flex:none;display:flex}
  #cols{flex:0 0 auto;display:flex;flex-direction:column;height:calc(100vh - 22px)}
  #cols > .card{margin:10px 0 0;flex:1;min-height:0;overflow:hidden}
  /* the selected tab's echo on the section edge — slides between tabs */
  #tabLine{position:absolute;height:3px;background:var(--accent);border-radius:2px;
    display:none;z-index:2;transition:left .25s ease,width .25s ease}
  #paneTabs{display:flex;gap:8px;flex:none;flex-wrap:nowrap}
  .ptab{white-space:nowrap}
  #paneTabs .spacer{flex:1}
  #paneNav{flex:none}
  /* Screen mode: one control, both options visible */
  .seg2{display:inline-flex;border:1px solid var(--line);border-radius:9px;overflow:hidden;flex:none}
  .seg2 button{border:none;background:var(--surface);font:600 .75rem system-ui;
    padding:6px 13px;color:var(--muted);cursor:pointer}
  .seg2 button+button{border-left:1px solid var(--line)}
  .seg2 button.on{background:var(--accent);color:#fff}
  .seg2 button:disabled{opacity:.4;cursor:default;filter:blur(.4px)}
  .detect{color:var(--accent);cursor:pointer}
  .detect:hover{text-decoration:underline}
  /* In Session nav: [‹] ORG › CLASS › type · time · instructor — slim, its
     rule running the full card width. It lives ABOVE the scroll body: a
     scroll container would clip the negative-margin overhang. */
  .sesnav{display:flex;align-items:center;gap:10px;margin:0 -18px 12px;padding:0 18px 6px;
    border-bottom:1px solid var(--line)}
  .sesback{width:28px;height:24px;border-radius:8px;border:1px solid var(--line);
    background:var(--surface);font-size:.95rem;line-height:1;color:var(--muted);
    cursor:pointer;padding:0;flex:none}
  .sesback:hover:not(:disabled){border-color:var(--accent);color:var(--accent)}
  .sesback:disabled{opacity:.4;cursor:default}
  .lslive{cursor:pointer}
  .lslive:hover b.num{color:var(--accent)}
  .lslive .info{display:flex;align-items:baseline;gap:8px;min-width:0;flex-wrap:wrap;flex:1}
  .sespath{display:flex;align-items:center;gap:10px;font:600 .85rem var(--mono);
    min-width:0;white-space:nowrap;overflow:hidden}
  .sespath .bc,.sespath .sep{color:var(--muted)}
  .sespath .sep{opacity:.6}
  .sespath .leaf{color:var(--ink)}
  /* Screen tab: presenter controls + a wireframe mimic of the projector */
  /* the shared section separator: the heading continues as a line to the
     pane's edge — SCREEN MODE ───────────── */
  .shead{font:600 .68rem var(--mono);letter-spacing:.06em;text-transform:uppercase;
    color:var(--muted);margin:26px 0 8px;display:flex;align-items:center;gap:10px}
  .shead::before{content:"";width:16px;border-top:1px solid currentColor}
  .shead::after{content:"";flex:1;border-top:1px solid currentColor}
  #screenPane > .shead:first-child{margin-top:14px}
  .mimic{display:grid;gap:2px;border:2px solid var(--line);border-radius:10px;
    overflow:hidden;height:150px;background:var(--line)}
  .mimic .mslot{background:var(--surface);display:flex;align-items:center;justify-content:center;
    flex-direction:column;gap:6px;font:600 .72rem system-ui;color:var(--muted);min-width:0}
  .mimic select{font:600 .72rem system-ui;padding:2px 6px;border-radius:7px;max-width:90%}

  .ptab{font:600 .78rem system-ui;padding:5px 16px;border-radius:999px;cursor:pointer;
    border:1px solid var(--line);background:var(--surface);color:var(--muted);user-select:none}
  .ptab:hover{border-color:var(--accent);color:var(--accent)}
  .ptab.on{background:var(--accent);border-color:var(--accent);color:#fff}
  #paneBody{flex:1;min-height:0;overflow-y:auto}
  #activityPane .arow{display:flex;gap:10px;align-items:baseline;padding:8px 2px;
    border-bottom:1px solid var(--line);font-size:.92rem}
  #activityPane .amark.ok{color:var(--ok)} #activityPane .amark.warn{color:var(--warn)}
  #activityPane .awhat{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  #activityPane .awhen{color:var(--muted);font-size:.78rem;font-family:var(--mono);flex:none}
  #actionsCard{margin:10px 0 0;flex:1;min-height:0;overflow:hidden}
  /* the heading hugs the card's top-right corner (the card pads 18px) */
  #actionsHead{justify-content:flex-end;margin:-10px -9px 6px 0}
  /* tab switches crossfade: the incoming pane's content fades in */
  @keyframes panefade{from{opacity:0}to{opacity:1}}
  .panefade{animation:panefade .22s ease}
  /* who's signed in — pinned to the page's bottom-left corner */
  #whoami{position:fixed;left:16px;bottom:10px;z-index:5;
    font:600 .72rem var(--mono);letter-spacing:.04em;color:var(--muted)}
  /* the Roles tab: identity, the active-role radio, test identities */
  #ridentity b{font-size:1.05rem;display:block;overflow:hidden;
    text-overflow:ellipsis;white-space:nowrap}
  #ridentity .sub{color:var(--muted);font-size:.78rem;margin-top:2px}
  .lrole{display:flex;align-items:center;gap:8px;padding:7px 10px;border:1px solid var(--line);
    border-radius:10px;cursor:pointer;font-weight:600;font-size:.84rem;margin:4px 0;
    user-select:none;max-width:320px}
  .lrole .dot{width:13px;height:13px;border-radius:50%;border:2px solid var(--line);flex:none}
  .lrole.on{border-color:var(--accent)}
  .lrole.on .dot{border-color:var(--accent);background:var(--accent)}
  #rpersonas .prow{display:flex;gap:5px;align-items:center;margin:4px 0}
  #rpersonas .plbl{font:600 .56rem var(--mono);color:var(--muted);text-transform:uppercase;
    width:56px;flex:none}
  #rpersonas button{font:600 .64rem system-ui;padding:2px 6px;border-radius:7px}
  #rpersonas button.on{background:var(--accent);border-color:var(--accent);color:#fff}
  #racting{font-size:.78rem;color:var(--warn);margin-top:8px}
  #racting a{color:var(--accent)}
  /* column resize handles — invisible; the cursor is the only affordance */
  .rz{position:absolute;top:0;bottom:0;width:9px;cursor:col-resize;z-index:6}

/* shared warning card (Screen tab hints) */
.warncard{margin-top:10px;padding:10px 14px;border-radius:10px;
  background:var(--warn-soft);color:var(--warn);font-size:.85rem;line-height:1.5}