/* CoClock — Apple-style design system (original stylesheet) */
:root{
  --navy:#253c70; --navy-deep:#161f3d; --sky:#99c5d6; --sky-soft:#c7e2ec;
  --paper:#f6f8fb; --ink:#0d1526; --amber:#e0a458; --ok:#5fae8a; --danger:#d9534f;
  --accent:var(--sky);
  --glass:rgba(255,255,255,0.55); --glass-brd:rgba(255,255,255,0.6);
  --radius-lg:28px; --radius-md:18px; --radius-sm:12px;
  --font:-apple-system,BlinkMacSystemFont,"SF Pro Display","SF Pro Text","Inter",system-ui,sans-serif;
  --mono:"SF Mono",ui-monospace,"Roboto Mono",Menlo,Consolas,monospace;
  --muted:#5b6a8a; --muted2:#8090ab; --line:rgba(37,60,112,0.12);
}
*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{
  background:
    radial-gradient(1200px 500px at 10% -10%, rgba(153,197,214,0.35), transparent 60%),
    radial-gradient(900px 600px at 100% 0%, rgba(37,60,112,0.10), transparent 55%),
    var(--paper);
  color:var(--ink);font-family:var(--font);-webkit-font-smoothing:antialiased;overflow:hidden;
}
body[data-role="landing"],body[data-role="auth"],body[data-role="dashboard"]{overflow:auto}
#app{height:100vh;height:100dvh}
h1,h2,h3,h4{margin:0 0 .4em;font-weight:700;letter-spacing:-.3px;color:var(--navy-deep)}
p{margin:0 0 .8em;line-height:1.5}
button,input,select,textarea{font-family:inherit;font-size:14px;color:inherit}
a{color:var(--navy);text-decoration:none}
code{font-family:var(--mono);background:rgba(37,60,112,.08);padding:1px 6px;border-radius:6px}
.icon{width:20px;height:20px;fill:currentColor;display:block}
.muted{color:var(--muted)} .small{font-size:12px} .spacer{flex:1}

/* brand */
.brand{display:flex;align-items:center;gap:9px;font-weight:700;font-size:15px;color:var(--navy);letter-spacing:-.2px}
.brand.big{font-size:22px;color:var(--navy-deep)}
.logo-dot{width:9px;height:9px;border-radius:50%;background:var(--sky);box-shadow:0 0 0 4px rgba(153,197,214,.35)}

/* buttons */
.btn{display:inline-flex;align-items:center;gap:7px;background:#fff;border:1px solid var(--line);color:var(--navy);
  padding:10px 16px;border-radius:14px;cursor:pointer;font-weight:600;font-size:14px;transition:.15s}
.btn:hover{border-color:var(--sky)}
.btn.accent{background:var(--navy);color:#fff;border-color:transparent;box-shadow:0 8px 20px rgba(37,60,112,.28)}
.btn.accent:hover{background:#2c4885}
.btn.ghost{background:transparent}
.btn.sm{padding:6px 12px;font-size:13px;border-radius:10px}
.btn.lg{padding:13px 22px;font-size:15px}
.btn.on{background:var(--navy);color:#fff;border-color:transparent}
.btn.danger-btn{background:var(--danger);color:#fff;border-color:transparent}
.icon-btn{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:10px;
  background:transparent;border:1px solid transparent;color:var(--muted);cursor:pointer}
.icon-btn:hover{background:rgba(37,60,112,.06);color:var(--navy)}
.icon-btn.danger:hover{color:var(--danger)}
input,select,textarea{background:#fff;border:1px solid var(--line);border-radius:var(--radius-sm);padding:11px 14px;width:100%;color:var(--navy-deep)}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--sky);box-shadow:0 0 0 3px rgba(153,197,214,.25)}
textarea{resize:vertical}

/* toast */
.toast{position:fixed;bottom:28px;left:50%;transform:translateX(-50%) translateY(20px);background:var(--navy-deep);color:#fff;
  padding:11px 20px;border-radius:24px;opacity:0;transition:.2s;z-index:9999;pointer-events:none;font-size:14px;box-shadow:0 12px 34px rgba(22,31,61,.4)}
.toast.show{opacity:.97;transform:translateX(-50%) translateY(0)}

/* modal / glass sheet */
.modal-overlay{position:fixed;inset:0;background:rgba(22,31,61,.35);display:flex;align-items:center;justify-content:center;
  padding:20px 16px;z-index:1000;backdrop-filter:blur(6px);overflow:auto}
.modal{background:rgba(255,255,255,0.8);backdrop-filter:blur(28px) saturate(180%);border:1px solid rgba(255,255,255,0.85);
  border-radius:var(--radius-lg);width:min(540px,100%);box-shadow:0 30px 70px rgba(37,60,112,.25);
  max-height:92vh;display:flex;flex-direction:column;overflow:hidden}
.modal-head{display:flex;align-items:center;justify-content:space-between;padding:14px 20px;border-bottom:1px solid var(--line);flex:0 0 auto}
.modal-head h3{margin:0;font-size:18px}
.modal-body{padding:16px 20px;overflow:auto;flex:1 1 auto}
.modal-body input,.modal-body select,.modal-body textarea{padding:9px 12px}
.modal-body h4{margin:6px 0 8px;font-size:14px}
.modal-foot{display:flex;justify-content:flex-end;gap:10px;margin-top:14px;position:sticky;bottom:-16px;
  padding:12px 0 2px;background:linear-gradient(to top,var(--paper) 65%,transparent)}
body.dark .modal-foot{background:linear-gradient(to top,#1f2a49 65%,transparent)}
.field{display:block;margin-bottom:12px}
.field>span{display:block;font-size:12px;color:var(--navy);font-weight:600;margin-bottom:5px;letter-spacing:.2px}
.chkrow{margin:4px 0}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.grid-inline{display:flex;gap:8px}
.chkrow{display:flex;flex-wrap:wrap;gap:10px 16px;margin:8px 0}
.chk{display:flex;align-items:center;gap:6px;font-size:13px;white-space:nowrap}.chk input{width:auto;flex:0 0 auto}
.empty{color:var(--muted2);text-align:center;padding:22px;font-size:13px}

/* =============== CONTROLLER =============== */
.controller{display:flex;flex-direction:column;height:100vh;height:100dvh}
.ctl-header{display:flex;align-items:center;gap:12px;padding:16px 24px;flex-wrap:wrap;
  background:rgba(246,248,251,.75);backdrop-filter:blur(20px) saturate(160%);border-bottom:1px solid var(--line);z-index:5}
.room-title{max-width:280px;background:transparent;border:1px solid transparent;font-weight:700;font-size:16px;color:var(--navy-deep)}
.room-title:hover{border-color:var(--line);background:#fff}
.topbtn{display:inline-flex;align-items:center;justify-content:center;gap:7px;background:#fff;border:1px solid var(--line);color:var(--navy);
  height:40px;padding:0 16px;border-radius:12px;cursor:pointer;font-weight:600;font-size:13px;line-height:1;transition:.15s}
.topbtn .icon{width:17px;height:17px}
.topbtn:hover{border-color:var(--sky)}
.topbtn.accent{background:var(--navy);color:#fff;border-color:transparent;box-shadow:0 6px 16px rgba(37,60,112,.24)}
.topbtn.on{background:var(--amber);color:var(--navy-deep);border-color:transparent}
.status-pill{background:#fff;border:1px solid var(--line);border-radius:999px;padding:6px 13px;font-size:12px;color:var(--muted);cursor:pointer;display:inline-flex;align-items:center;gap:7px}
.status-pill:before{content:"";width:7px;height:7px;border-radius:50%;background:var(--muted2)}
.status-pill[data-state="online"]{color:var(--navy)}.status-pill[data-state="online"]:before{background:var(--ok);box-shadow:0 0 0 3px rgba(95,174,138,.2)}
.status-pill[data-state="local"]:before{background:var(--sky)}
.status-pill[data-state="offline"]{color:var(--danger)}.status-pill[data-state="offline"]:before{background:var(--danger)}
.device-badge{display:inline-flex;align-items:center;font-size:11px;font-weight:700;color:var(--amber);border:1px solid var(--amber);border-radius:999px;padding:3px 11px}

.ctl-body{flex:1;display:grid;grid-template-columns:3fr 2fr;gap:22px;padding:24px;overflow:auto;align-content:start}
.ctl-main{display:flex;flex-direction:column;gap:18px;min-width:0}
.ctl-side{display:flex;flex-direction:column;gap:16px;min-width:0}

/* hero card + ring */
.hero-card{background:linear-gradient(160deg,var(--navy) 0%,var(--navy-deep) 100%);border-radius:var(--radius-lg);
  padding:22px;color:#fff;position:relative;overflow:hidden;box-shadow:0 20px 50px rgba(22,31,61,.35)}
.hero-card::before{content:"";position:absolute;inset:0;background:radial-gradient(500px 300px at 90% -10%,rgba(153,197,214,.35),transparent 60%);pointer-events:none}
.hero-top{display:flex;justify-content:space-between;align-items:center;position:relative;z-index:1}
.hero-top .label{font-size:12.5px;font-weight:600;letter-spacing:.5px;text-transform:uppercase;color:var(--sky-soft);opacity:.9}
.live-pill{background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.18);padding:5px 12px;border-radius:999px;
  font-size:12px;font-weight:600;display:flex;align-items:center;gap:6px}
.live-pill .r{width:6px;height:6px;border-radius:50%;background:#7f8db0}
.live-pill[data-live="1"] .r{background:#ff6b6b;box-shadow:0 0 0 3px rgba(255,107,107,.25)}
.ring-wrap{display:flex;align-items:center;justify-content:center;gap:34px;margin:12px 0 4px;position:relative;z-index:1;flex-wrap:wrap}
.ring{position:relative;width:158px;height:158px;flex-shrink:0}
.ring svg{transform:rotate(-90deg);width:100%;height:100%}
.ring .track{stroke:rgba(255,255,255,.12)}
.ring .prog{stroke:var(--sky);transition:stroke-dashoffset .25s linear,stroke .3s}
.ring-center{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center}
.ring-center .time{font-family:var(--mono);font-size:36px;font-weight:600;letter-spacing:-1px;font-variant-numeric:tabular-nums}
.ring-center .of{font-size:12px;color:var(--sky-soft);opacity:.8;margin-top:2px}
.ring[data-band="yellow"] .prog{stroke:var(--amber)} .ring[data-band="yellow"] .time{color:var(--amber)}
.ring[data-band="red"] .prog,.ring[data-band="overtime"] .prog{stroke:#ff6b6b} .ring[data-band="red"] .time,.ring[data-band="overtime"] .time{color:#ff8a8a}
.session-info{flex:1;min-width:200px}
.session-info h2{font-size:21px;margin:0 0 6px;font-weight:650;color:#fff}
.session-info .sub{font-size:13px;color:var(--sky-soft);opacity:.85;margin-bottom:16px;min-height:16px}
.transport{display:flex;gap:10px}
.tbtn{width:50px;height:50px;border-radius:15px;border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.08);
  display:flex;align-items:center;justify-content:center;cursor:pointer;color:#fff;transition:.15s}
.tbtn:hover{background:rgba(255,255,255,.16);transform:translateY(-1px)}
.tbtn .icon{width:20px;height:20px}
.tbtn.primary{background:var(--sky);color:var(--navy-deep);border-color:transparent;width:62px;height:62px}
.tbtn.primary:hover{background:#a9d0de}
.tbtn.sm{width:auto;height:40px;padding:0 12px;font-weight:600}
.quick-adjust{display:flex;gap:8px;margin-top:10px;flex-wrap:wrap;position:relative;z-index:1}
.chip{background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.14);color:#fff;padding:8px 14px;border-radius:12px;
  font-size:12.5px;font-weight:600;cursor:pointer}
.chip:hover{background:rgba(255,255,255,.16)}
.hero-timeline{position:relative;z-index:1;margin-top:10px}
.scrub{width:100%;accent-color:var(--sky)}
.ts{display:flex;gap:18px;font-size:11.5px;color:var(--sky-soft);opacity:.85;margin-top:6px;font-variant-numeric:tabular-nums}
.ts span span{color:#fff;opacity:1}
.adjrow{display:flex;align-items:center;gap:8px;margin-top:12px;position:relative;z-index:1}
.adjrow .chip,.adj-select{display:inline-flex;align-items:center;justify-content:center;height:38px;padding:0 16px;
  border-radius:12px;font-size:13px;font-weight:600;line-height:1;font-family:inherit;cursor:pointer}
.adj-select{width:auto;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.16);color:#fff;
  text-align:center;text-align-last:center}
.adj-select option{color:var(--navy-deep)}
.monitor-cap{display:none}

/* glass panels */
.panel,.preview-card,.side-msgs,.timers-wrap{background:var(--glass);backdrop-filter:blur(24px) saturate(160%);
  border:1px solid var(--glass-brd);border-radius:var(--radius-md);box-shadow:0 10px 30px rgba(37,60,112,.08)}
.preview-card{overflow:hidden}
.preview-head{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;font-size:13px;font-weight:600;color:var(--navy-deep);border-bottom:1px solid var(--line)}
.preview{position:relative;aspect-ratio:16/9;background:var(--navy-deep)}
.side-msgs{padding:20px;display:flex;flex-direction:column}
.side-msgs-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
.side-msgs-head h3{margin:0;font-size:14.5px}
.panel{padding:20px}
.panel h3{margin:0 0 12px;font-size:14.5px;font-weight:700;color:var(--navy-deep);display:flex;justify-content:space-between;align-items:center}
.panel h3 .count{font-weight:600;color:var(--navy);opacity:.55;font-size:12.5px}
.device-row{display:flex;align-items:center;gap:12px;padding:10px 6px;border-radius:12px;transition:background .15s}
.device-row:hover{background:rgba(37,60,112,.05)}
.device-icon{width:38px;height:38px;border-radius:11px;background:linear-gradient(150deg,var(--sky),var(--sky-soft));
  display:flex;align-items:center;justify-content:center;flex-shrink:0;color:var(--navy-deep)}
.device-icon .icon{width:20px;height:20px}
.device-meta{flex:1;min-width:0}
.device-meta .name{font-size:13.5px;font-weight:600;color:var(--navy-deep);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.device-meta .sub{font-size:11.5px;color:var(--muted2)}
.status-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0}
.status-dot.on{background:var(--ok);box-shadow:0 0 0 3px rgba(95,174,138,.2)}
.status-dot.off{background:#d7dce6}
body.dark .device-meta .name{color:#fff}
body.dark .device-row:hover{background:rgba(255,255,255,.05)}

/* rundown */
.timers-head{display:flex;align-items:center;justify-content:space-between}
.timers-head h3{margin:0;font-size:16px}
.timer-list{display:flex;flex-direction:column;gap:10px}
.timer-card{display:grid;grid-template-columns:auto auto 1fr 132px 62px auto;align-items:center;gap:12px;
  background:var(--glass);backdrop-filter:blur(20px) saturate(150%);border:1px solid var(--glass-brd);
  border-radius:var(--radius-md);padding:13px 15px;cursor:pointer;box-shadow:0 6px 18px rgba(37,60,112,.06)}
.timer-card:hover{border-color:var(--sky)}
.timer-card.active{border-color:var(--sky);box-shadow:0 0 0 2px var(--sky),0 10px 26px rgba(37,60,112,.18);background:rgba(153,197,214,.16)}
.timer-card.cued{border-color:var(--sky);border-style:dashed;background:rgba(153,197,214,.10)}
.timer-card.dragging{opacity:.4}
.tc-grip{color:var(--muted2);cursor:grab}.tc-grip .icon{width:16px;height:16px}
.tc-idx{width:24px;height:24px;border-radius:8px;background:rgba(37,60,112,.08);display:flex;align-items:center;justify-content:center;font-size:12px;color:var(--navy);font-weight:600}
.timer-card.active .tc-idx{background:var(--sky);color:var(--navy-deep)}
body.dark .timer-card.active{background:rgba(153,197,214,.20);border-color:var(--sky);box-shadow:0 0 0 2px var(--sky)}
body.dark .timer-card.cued{background:rgba(153,197,214,.10);border-color:var(--sky)}
.tc-body{min-width:0}
.tc-line1{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.tc-title{font-weight:650;color:var(--navy-deep)}
.tc-line2{display:flex;gap:10px;font-size:12px;color:var(--muted);margin-top:2px}
.tc-start{font-variant-numeric:tabular-nums}.tc-start.hard{color:var(--navy-deep);font-weight:600}
.trig{font-size:10px;text-transform:uppercase;letter-spacing:.05em;padding:2px 7px;border-radius:6px;background:rgba(37,60,112,.08);color:var(--muted)}
.trig.linked{color:var(--navy);background:rgba(37,60,112,.12)}.trig.scheduled{color:#b5791f;background:rgba(224,164,88,.18)}
.tc-dur{font-family:var(--mono);font-variant-numeric:tabular-nums;color:var(--navy);font-weight:600;text-align:right}
.tc-actions{display:flex;gap:2px;justify-self:end}
.mini-select{width:auto;padding:6px 8px;font-size:12px;border-radius:9px}
.timer-card .mini-select{width:100%}
.chip.pick,.chip.add{color:#fff}
.timer-card .chip,.ag-name .chip{font-size:10px;font-weight:700;color:#fff;padding:2px 8px;border-radius:999px;text-shadow:0 1px 1px rgba(0,0,0,.25)}
.label-editor{display:flex;flex-wrap:wrap;gap:6px}
.label-editor .chip{cursor:pointer}.label-editor .chip.pick{opacity:.5;border:none}.label-editor .chip.pick.on{opacity:1}
.label-editor .chip.add{background:rgba(37,60,112,.12);color:var(--navy)}

/* messages */
.msg-compose{display:flex;gap:8px;margin-bottom:12px}
.msg-input{flex:1}
.msg-list{display:flex;flex-direction:column;gap:10px}
.msg-row{background:#fff;border:1px solid var(--line);border-radius:14px;padding:10px 12px;border-left:4px solid var(--muted2)}
.msg-row[data-color="green"]{border-left-color:var(--ok)}
.msg-row[data-color="red"]{border-left-color:var(--danger)}
.msg-row.showing{box-shadow:0 0 0 2px var(--sky)}
.msg-row.audience{background:linear-gradient(90deg,rgba(153,197,214,.16),transparent)}
.msg-top{display:flex;gap:6px;align-items:center}.msg-text{flex:1}
.msg-tools{display:flex;align-items:center;gap:5px;margin-top:9px;flex-wrap:wrap}
.sw{width:22px;height:22px;border-radius:50%;border:2px solid var(--line);cursor:pointer;padding:0}
.sw[data-c="white"]{background:#fff}.sw[data-c="green"]{background:var(--ok)}.sw[data-c="red"]{background:var(--danger)}
.sw.on{border-color:var(--navy)}
.sep{width:1px;height:18px;background:var(--line);margin:0 4px}
.tgl{min-width:30px;height:28px;border-radius:8px;background:#fff;border:1px solid var(--line);cursor:pointer;font-weight:700;font-size:12px;color:var(--navy)}
.tgl.on{background:var(--navy);color:#fff;border-color:transparent}
.show-btn{margin-left:auto}

/* room progress */
.roomprog{display:flex;align-items:center;gap:12px;padding:12px 24px;background:rgba(246,248,251,.75);backdrop-filter:blur(20px);
  border-top:1px solid var(--line);font-family:var(--mono);font-size:13px;color:var(--muted)}
.roomprog-bar{flex:1;height:6px;background:rgba(37,60,112,.1);border-radius:99px;overflow:hidden}
.roomprog-fill{height:100%;background:linear-gradient(90deg,var(--sky),var(--navy));width:0;border-radius:99px}

/* menu */
.menu{position:relative}
.menu-pop{position:absolute;right:0;top:calc(100% + 6px);background:rgba(255,255,255,.9);backdrop-filter:blur(20px);
  border:1px solid var(--glass-brd);border-radius:14px;min-width:210px;padding:6px;display:none;z-index:50;box-shadow:0 16px 40px rgba(37,60,112,.2)}
.menu.open .menu-pop{display:block}
.menu-item{display:block;width:100%;text-align:left;background:transparent;border:none;color:var(--navy-deep);padding:9px 11px;border-radius:9px;cursor:pointer;font-size:13.5px}
.menu-item:hover{background:rgba(37,60,112,.06)}
.link-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 0;border-bottom:1px solid var(--line)}
.link-actions{display:flex;gap:6px}
.server-box{margin-top:14px;padding-top:14px;border-top:1px solid var(--line)}
.warn-box{background:rgba(224,164,88,.15);border:1px solid var(--amber);border-radius:12px;padding:11px 13px;font-size:13px;margin-bottom:14px;line-height:1.5;color:var(--navy-deep)}
.import-preview{margin:10px 0;max-height:200px;overflow:auto;font-size:13px}
.imp-row{display:flex;justify-content:space-between;padding:3px 0;border-bottom:1px solid var(--line)}
.sc-table{width:100%;border-collapse:collapse}.sc-table td{padding:7px 4px;border-bottom:1px solid var(--line)}
kbd{background:rgba(37,60,112,.08);border:1px solid var(--line);border-radius:6px;padding:2px 8px;font-family:var(--mono);font-size:12px}

/* share tokens */
.token-new{display:grid;grid-template-columns:1fr 1fr auto;gap:8px;margin:12px 0 16px}
.token-list{display:flex;flex-direction:column;gap:10px}
.token-row{display:flex;gap:14px;background:#fff;border:1px solid var(--line);border-radius:14px;padding:12px}
.token-qr{width:120px;height:120px;flex:0 0 120px;display:flex;align-items:center;justify-content:center;background:#fff;border-radius:10px;font-size:11px;color:#333;text-align:center;padding:6px;border:1px solid var(--line)}
.token-info{min-width:0;display:flex;flex-direction:column;gap:4px}
.token-actions{display:flex;gap:6px;margin-top:auto;flex-wrap:wrap}

/* setup sheet extras (segmented, swatch, stepper) */
.seg{display:flex;background:#eef2f7;border-radius:12px;padding:4px;gap:4px}
.seg button{flex:1;border:none;background:transparent;padding:9px 0;border-radius:9px;font-size:13px;font-weight:600;color:var(--navy);opacity:.55;cursor:pointer}
.seg button.active{background:#fff;opacity:1;box-shadow:0 2px 8px rgba(37,60,112,.12)}
.color-row{display:flex;gap:10px}
.swatch{width:34px;height:34px;border-radius:10px;cursor:pointer;border:2px solid transparent}
.swatch.sel{border-color:var(--navy)}

/* =============== STAGE DISPLAY (viewer) =============== */
/* container-type lets the display scale to ITS OWN box (via cq* units), so it
   looks right both fullscreen and inside the small controller preview. */
.display{position:relative;width:100%;height:100%;background:var(--navy-deep);overflow:hidden;display:flex;
  flex-direction:column;align-items:center;justify-content:center;color:#fff;container-type:size}
.display::before{content:"";position:absolute;inset:0;background:
  radial-gradient(90cqw 50cqw at 15% 10%,rgba(153,197,214,.14),transparent 60%),
  radial-gradient(70cqw 50cqw at 85% 90%,rgba(37,60,112,.5),transparent 60%)}
.disp-logo{position:absolute;top:5%;left:5%;display:flex;align-items:center;gap:.55em;font-weight:700;letter-spacing:-.2px;font-size:clamp(9px,2.6cqmin,22px);color:rgba(255,255,255,.82);z-index:1}
.disp-logo .logo-dot{width:.6em;height:.6em;box-shadow:0 0 0 .27em rgba(153,197,214,.35)}
.disp-onair{position:absolute;top:5%;right:5%;background:#ff6b6b;color:#fff;font-weight:800;font-size:clamp(9px,2.6cqmin,26px);padding:.4em .8em;border-radius:.4em;letter-spacing:.15em;z-index:1}
.disp-center{display:flex;flex-direction:column;align-items:center;justify-content:center;flex:1;width:100%;position:relative;z-index:1}
.disp-title{font-size:clamp(10px,3cqmin,40px);font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--sky);opacity:.9;margin-bottom:2.5cqmin;text-align:center;padding:0 4cqw;line-height:1.1}
.disp-time{font-family:var(--mono);font-weight:600;font-size:clamp(22px,24cqmin,320px);line-height:.92;font-variant-numeric:tabular-nums;letter-spacing:-.03em;color:#fff}
.disp-tod{font-family:var(--mono);font-size:clamp(12px,7cqmin,90px);opacity:.7;margin-top:1cqmin;color:var(--sky-soft)}
.disp-speaker{position:absolute;bottom:9%;font-size:clamp(11px,3.4cqmin,48px);color:var(--sky-soft);opacity:.85;text-align:center;padding:0 4cqw;z-index:1}
.disp-bar{position:absolute;bottom:15%;left:50%;transform:translateX(-50%);width:min(70cqw,760px);height:clamp(3px,1.1cqmin,8px);border-radius:99px;background:rgba(255,255,255,.1);overflow:hidden;z-index:1}
.disp-bar-fill{height:100%;width:0%;border-radius:99px;background:linear-gradient(90deg,var(--sky),#fff);transition:width .2s linear}
.display[data-band="yellow"] .disp-time{color:var(--amber)} .display[data-band="yellow"] .disp-bar-fill{background:linear-gradient(90deg,var(--amber),#f3d3a6)}
.display[data-band="red"] .disp-time,.display[data-band="overtime"] .disp-time{color:#ff8a8a}
.display[data-band="red"] .disp-bar-fill,.display[data-band="overtime"] .disp-bar-fill{background:#ff6b6b}
.display[data-band="overtime"] .disp-bar-fill{width:100%!important}
.display.has-message .disp-time{font-size:clamp(16px,15cqmin,200px)}
.disp-message{position:absolute;bottom:26%;left:0;width:100%;padding:0 6cqw;display:none;align-items:center;justify-content:center;
  text-align:center;font-size:clamp(12px,5.5cqmin,70px);font-weight:500;color:var(--sky-soft);min-height:14cqmin;z-index:2}
.disp-message[data-color="green"]{color:#8fe3bf} .disp-message[data-color="red"]{color:#ff8a8a}
.disp-message.bold{font-weight:800;color:#fff}
.disp-message[data-fullscreen="1"]{position:absolute;inset:0;background:var(--navy-deep);z-index:5;font-size:clamp(16px,8.5cqmin,96px);padding:0 6cqw}
.disp-message.flash{animation:msgflash 1s steps(1) infinite}
@keyframes msgflash{50%{opacity:.15}}
.disp-blackout{position:absolute;inset:0;background:#000;display:none;z-index:8}
.disp-flash{position:absolute;inset:0;background:#fff;display:none;z-index:9;animation:flashwin 1.6s ease-out}
@keyframes flashwin{0%,100%{opacity:0}10%,30%,50%{opacity:.9}20%,40%{opacity:0}}

.viewer-wrap{position:relative;width:100%;height:100%;background:var(--navy-deep)}
.viewer-wrap>div:first-child{width:100%;height:100%}
.viewer-overlay{position:absolute;top:14px;right:14px;display:flex;gap:8px;opacity:0;transition:.2s;z-index:20}
.viewer-wrap:hover .viewer-overlay{opacity:1}
.ov-btn{width:40px;height:40px;border-radius:12px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.18);color:#fff;
  display:flex;align-items:center;justify-content:center;cursor:pointer;backdrop-filter:blur(6px)}
.ov-btn.off{opacity:.4}
.conn-dot{position:absolute;top:16px;left:16px;width:10px;height:10px;border-radius:50%;z-index:25;transition:.3s;box-shadow:0 0 0 3px rgba(0,0,0,.3)}
.conn-dot[data-state="online"],.conn-dot[data-state="local"]{background:var(--ok);opacity:.4}
.conn-dot[data-state="connecting"]{background:var(--amber);opacity:1;animation:pulse 1s infinite}
.conn-dot[data-state="offline"]{background:var(--danger);opacity:1;animation:pulse 1s infinite}
@keyframes pulse{50%{opacity:.3}}

/* =============== AGENDA =============== */
.agenda{max-width:900px;margin:0 auto;padding:32px 24px;height:100%;overflow:auto}
.ag-head{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:20px;position:sticky;top:0;
  background:rgba(246,248,251,.85);backdrop-filter:blur(12px);padding:8px 0 12px}
.ag-title{font-size:28px;font-weight:700;color:var(--navy-deep)}
.ag-clock{font-family:var(--mono);font-size:22px;color:var(--muted)}
.ag-list{display:flex;flex-direction:column;gap:6px}
.ag-row{display:grid;grid-template-columns:110px 1fr auto;gap:16px;align-items:center;padding:15px 18px;border-radius:16px;border:1px solid transparent;background:var(--glass)}
.ag-row:hover{border-color:var(--line)}
.ag-row.active{border-color:var(--sky);box-shadow:0 8px 22px rgba(37,60,112,.1)}
.ag-time{font-family:var(--mono);font-size:20px;color:var(--muted)}
.ag-row.active .ag-time{color:var(--navy)}
.ag-name{font-size:18px;font-weight:650;color:var(--navy-deep);display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.ag-speaker{color:var(--muted);font-size:14px;margin-top:2px}
.ag-dur{font-family:var(--mono);color:var(--muted)}

/* =============== MODERATOR =============== */
.moderator{display:grid;grid-template-columns:1fr 1fr;height:100%;min-height:0}
.mod-left{border-right:1px solid var(--line);padding:22px;overflow:auto}
.mod-right{padding:22px;overflow:auto;display:flex;flex-direction:column}
.mod-head{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:12px}
.mod-head>div{font-weight:700;color:var(--navy-deep)}
.mod-time{font-family:var(--mono);color:var(--muted)}
.mod-cue{font-size:22px;font-weight:650;padding:16px 18px;background:linear-gradient(160deg,var(--navy),var(--navy-deep));color:#fff;border-radius:16px;margin-bottom:16px;font-variant-numeric:tabular-nums}
.mod-cue[data-band="yellow"]{color:var(--amber)}.mod-cue[data-band="red"],.mod-cue[data-band="overtime"]{color:#ff8a8a}
.mod-rundown{display:flex;flex-direction:column;gap:4px}
.mod-row{display:grid;grid-template-columns:auto 1fr auto;gap:10px;padding:10px 12px;border-radius:10px}
.mod-row.active{background:var(--glass);border:1px solid var(--sky)}
.mod-idx{color:var(--muted2)}.mod-name{color:var(--navy-deep)}.mod-dur{font-family:var(--mono);color:var(--muted)}
.mod-right h3{font-size:15px}

/* =============== OPERATOR =============== */
.operator{display:flex;flex-direction:column;height:100%;padding:22px;gap:16px;max-width:780px;margin:0 auto;width:100%;
  background:var(--navy-deep)}
.op-screen{flex:1;background:linear-gradient(160deg,rgba(153,197,214,.12),rgba(255,255,255,.02));border:1px solid rgba(255,255,255,.08);
  border-radius:24px;display:flex;flex-direction:column;align-items:center;justify-content:center;position:relative;overflow:hidden;color:#fff}
.op-cue{font-size:2.4vmin;letter-spacing:.2em;text-transform:uppercase;color:var(--sky);opacity:.85;margin-bottom:1.6vmin}
.op-time{font-family:var(--mono);font-weight:600;font-size:clamp(70px,20vw,240px);line-height:.9;font-variant-numeric:tabular-nums;letter-spacing:-.03em}
.op-screen[data-band="yellow"] .op-time{color:var(--amber)}
.op-screen[data-band="red"] .op-time,.op-screen[data-band="overtime"] .op-time{color:#ff8a8a}
.op-next{margin-top:1.4vmin;opacity:.6;color:var(--sky-soft)}
.op-bar{position:absolute;bottom:0;left:0;width:100%;height:1.4vmin;background:rgba(255,255,255,.1)}
.op-bar-fill{height:100%;width:0;background:linear-gradient(90deg,var(--sky),#fff)}
.op-screen[data-band="red"] .op-bar-fill,.op-screen[data-band="overtime"] .op-bar-fill{background:#ff6b6b}
.op-adjrow{display:flex;gap:12px}
.op-adj{flex:1;height:54px;border-radius:14px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);color:#fff;font-size:18px;font-weight:700;cursor:pointer}
.op-controls{display:flex;gap:12px}
.op-btn{flex:1;height:88px;border-radius:18px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);color:#fff;
  display:flex;align-items:center;justify-content:center;cursor:pointer}
.op-btn .icon{width:34px;height:34px}
.op-btn.primary{background:var(--sky);color:var(--navy-deep);border-color:transparent;flex:1.6}
.op-btn.big .icon{width:44px;height:44px}

/* =============== LANDING =============== */
.landing{max-width:960px;margin:0 auto;padding:32px 24px 80px}
.land-head{display:flex;align-items:center;justify-content:space-between}
.hero{padding:56px 0 28px}
.hero h1{font-size:clamp(34px,5vw,52px);line-height:1.03;max-width:16ch;color:var(--navy-deep)}
.hero p{font-size:18px;color:var(--muted);max-width:54ch}
.hero-actions{display:flex;flex-wrap:wrap;gap:14px;align-items:center;margin:24px 0 8px}
.join{display:flex;gap:8px}.join-input{width:150px;text-transform:uppercase;font-family:var(--mono)}
.banner{background:var(--amber);color:var(--navy-deep);padding:11px 16px;text-align:center;font-size:14px;font-weight:600;border-radius:12px;margin-bottom:8px}
.quick{margin-top:26px}
.quick-row{display:flex;flex-wrap:wrap;gap:8px}
.chip-btn{background:#fff;border:1px solid var(--line);padding:9px 16px;border-radius:999px;cursor:pointer;font-weight:600;color:var(--navy);font-family:var(--mono)}
.chip-btn:hover{border-color:var(--sky)}
.recent{margin-top:40px}
.room-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:14px}
.room-card{display:flex;flex-direction:column;gap:4px;text-align:left;background:var(--glass);backdrop-filter:blur(20px);
  border:1px solid var(--glass-brd);border-radius:16px;padding:16px;cursor:pointer}
.room-card:hover{border-color:var(--sky)}
.land-foot{margin-top:60px;color:var(--muted2);font-size:13px;text-align:center}

/* =============== AUTH =============== */
.auth-page{min-height:100vh;min-height:100dvh;display:flex;align-items:center;justify-content:center;padding:24px}
.auth-card{background:rgba(255,255,255,.75);backdrop-filter:blur(28px) saturate(180%);border:1px solid rgba(255,255,255,.8);
  border-radius:32px;padding:32px;max-width:440px;width:100%;box-shadow:0 30px 70px rgba(37,60,112,.18)}
.auth-card .brand{margin-bottom:18px}
.auth-card h1{font-size:22px;margin-top:6px}
.auth-err{color:var(--danger);font-size:13px;min-height:18px;margin-bottom:6px}
.auth-card .btn.accent,.auth-card .btn.lg{width:100%;justify-content:center;margin-top:6px}
.auth-toggle{text-align:center;margin-top:10px}
.mode-block{border:1px solid var(--line);border-radius:var(--radius-md);padding:18px;background:rgba(255,255,255,.4)}
.mode-block.primary{border-color:var(--sky);background:rgba(153,197,214,.12)}
.mode-tag{font-size:11px;font-weight:700;letter-spacing:.08em;color:var(--navy)}
.mode-tag.muted{color:var(--muted2)}
.mode-perks{list-style:none;padding:0;margin:14px 0 0;display:flex;flex-direction:column;gap:6px}
.mode-perks li{font-size:12px;color:var(--muted);padding-left:20px;position:relative}
.mode-perks li:before{content:"✓";position:absolute;left:0;color:var(--ok);font-weight:700}
.mode-or{display:flex;align-items:center;gap:10px;color:var(--muted2);font-size:12px;margin:16px 0}
.mode-or:before,.mode-or:after{content:"";flex:1;height:1px;background:var(--line)}
.linklike{background:none;border:none;color:var(--navy);cursor:pointer;font-size:13px;text-decoration:underline}

/* =============== DASHBOARD =============== */
.dashboard{min-height:100vh;min-height:100dvh}
.dash-head{display:flex;align-items:center;gap:12px;padding:16px 24px;border-bottom:1px solid var(--line);
  background:rgba(246,248,251,.75);backdrop-filter:blur(20px)}
.dash-body{max-width:960px;margin:0 auto;padding:32px 24px}
.dash-title{display:flex;align-items:center;justify-content:space-between;margin-bottom:22px}
.dash-title h1{margin:0;font-size:28px}
.dash-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:16px}
.dash-card{background:var(--glass);backdrop-filter:blur(20px);border:1px solid var(--glass-brd);border-radius:20px;padding:18px;display:flex;flex-direction:column;gap:12px;box-shadow:0 10px 30px rgba(37,60,112,.08)}
.dash-card:hover{border-color:var(--sky)}
.dash-open{flex:1;text-align:left;background:transparent;border:none;color:var(--navy-deep);cursor:pointer;display:flex;flex-direction:column;gap:4px}
.dash-open strong{font-size:17px}
.dash-actions{display:flex;gap:6px;align-items:center}
.dash-actions .btn{margin-right:auto}

/* =============== SUBMIT =============== */
.submit-page{min-height:100%;display:flex;align-items:center;justify-content:center;padding:24px;overflow:auto}
.submit-card{background:rgba(255,255,255,.8);backdrop-filter:blur(24px);border:1px solid var(--glass-brd);border-radius:24px;padding:28px;max-width:440px;width:100%;box-shadow:0 20px 50px rgba(37,60,112,.15)}
.submit-card .sub-text{margin:12px 0}
.submit-card .btn.accent{width:100%;justify-content:center}

/* =============== DARK MODE (controller/landing/dashboard/auth) =============== */
body.dark{background:
  radial-gradient(1000px 500px at 15% -10%,rgba(153,197,214,.10),transparent 60%),
  radial-gradient(900px 700px at 100% 100%,rgba(37,60,112,.35),transparent 55%),
  var(--navy-deep);color:#fff}
body.dark h1,body.dark h2,body.dark h3,body.dark h4{color:#fff}
body.dark .ctl-header,body.dark .dash-head,body.dark .roomprog,body.dark .ag-head{background:rgba(22,31,61,.6);border-color:rgba(255,255,255,.08)}
body.dark .room-title{color:#fff}
body.dark .topbtn,body.dark .btn{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.1);color:#fff}
body.dark .topbtn.accent,body.dark .btn.accent{background:var(--sky);color:var(--navy-deep)}
body.dark .status-pill{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.1);color:rgba(255,255,255,.7)}
body.dark .panel,body.dark .preview-card,body.dark .side-msgs,body.dark .timer-card,body.dark .ag-row,body.dark .room-card,body.dark .dash-card{
  background:rgba(255,255,255,.045);border-color:rgba(255,255,255,.08);box-shadow:0 10px 30px rgba(0,0,0,.25)}
body.dark .tc-title,body.dark .tc-dur,body.dark .ag-name,body.dark .ag-title,body.dark .mod-name,body.dark .dash-open{color:#fff}
body.dark .tc-idx{background:rgba(255,255,255,.1);color:#fff}
body.dark .msg-row{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.1)}
body.dark .msg-input,body.dark input,body.dark select,body.dark textarea{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.12);color:#fff}
body.dark .tgl,body.dark .chip-btn{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.12);color:#fff}
body.dark .menu-pop,body.dark .modal{background:rgba(31,42,73,.92);border-color:rgba(255,255,255,.1)}
body.dark .menu-item,body.dark .field>span{color:#fff}
body.dark .muted{color:rgba(255,255,255,.55)}
body.dark .hero-card{background:linear-gradient(160deg,rgba(153,197,214,.14) 0%,rgba(255,255,255,.03) 100%);border:1px solid rgba(255,255,255,.08)}
/* contrast fixes + remaining light surfaces */
body.dark .preview-head,body.dark .side-msgs-head h3,body.dark .timers-head h3,body.dark .panel h3{color:#fff}
body.dark .room-title{color:#fff}
body.dark .brand{color:#fff}
body.dark .room-title:hover,body.dark .room-title:focus{background:rgba(255,255,255,.08);color:#fff;border-color:rgba(255,255,255,.14)}
body.dark .auth-card,body.dark .submit-card{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.1);box-shadow:0 30px 70px rgba(0,0,0,.4)}
body.dark .mode-block{background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.1)}
body.dark .mode-block.primary{background:rgba(153,197,214,.12);border-color:var(--sky)}
body.dark .mode-tag{color:var(--sky)}
body.dark .linklike{color:var(--sky)}
body.dark .seg{background:rgba(255,255,255,.06)}
body.dark .seg button{color:#fff}
body.dark .seg button.active{background:rgba(255,255,255,.16)}
body.dark .token-row{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.1)}
body.dark .token-info strong,body.dark .link-row strong,body.dark .dash-open strong{color:#fff}
body.dark .warn-box{color:#fff}
body.dark .sw{border-color:rgba(255,255,255,.25)}
body.dark .join-input,body.dark .chip-btn{color:#fff}
body.dark .preview-head{border-color:rgba(255,255,255,.08)}
body.dark .empty{color:rgba(255,255,255,.5)}

/* responsive */
@media(max-width:900px){
  .ctl-body{grid-template-columns:1fr}
  .moderator{grid-template-columns:1fr}
  .mod-left{border-right:none;border-bottom:1px solid var(--line)}
  .ring{width:190px;height:190px}
}