.room-clock,.clock-stage-surface{box-sizing:border-box;color:var(--text,rgb(var(--rooms-rgb-eef4ff,238,244,255)));background:var(--room-control,rgb(var(--rooms-rgb-14263b,20,38,59)));border:1px solid var(--line-strong,rgb(var(--rooms-rgb-2c455f,44,69,95)));border-radius:18px;position:relative}
.room-clock button,.clock-stage-surface button{font-family:inherit;box-shadow:none!important;cursor:pointer}
.room-clock button:disabled,.clock-stage-surface button:disabled{cursor:default;opacity:.55}
.room-clock svg,.clock-stage-surface svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;flex:none}
.clock-sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}
.clock-panel{display:flex;align-items:center;justify-content:center;flex-wrap:nowrap;gap:8px;padding:9px 10px;min-height:56px;flex:none;min-width:0;max-width:100%}
.clock-top{display:flex;align-items:center;gap:14px;flex:none}
.clock-tabs{display:flex;gap:2px;padding:3px;border-radius:999px;background:rgba(var(--rooms-rgb-7c99be,124,153,190),0.1)}
.clock-tabs button{border:0!important;border-radius:999px!important;padding:7px 9px!important;min-height:30px!important;background:transparent!important;color:var(--muted,rgb(var(--rooms-rgb-9aabc1,154,171,193)))!important;font-size:10px!important;white-space:nowrap}
.clock-tabs button[aria-selected=true]{background:rgba(var(--rooms-rgb-88a5ca,136,165,202),0.18)!important;color:var(--text,#fff)!important}
.clock-tabs button:disabled{opacity:1}
.clock-face{position:relative;text-align:center;min-width:74px;flex:none}
.clock-digits,[data-clock-digits]{font:500 29px/1.1 'Segoe UI',sans-serif;letter-spacing:-.055em;font-variant-numeric:tabular-nums;white-space:nowrap}
.clock-digits small{font-size:.4em;color:var(--muted,rgb(var(--rooms-rgb-95a8c1,149,168,193)));margin-left:4px;letter-spacing:0}
.clock-status{font-size:10px;color:var(--muted,rgb(var(--rooms-rgb-95a8c1,149,168,193)));margin-top:8px}
.clock-panel .clock-status,.clock-panel .clock-progress{display:none}
.clock-playback,.clock-surfaces{display:flex;align-items:center;gap:4px;flex:none}
.clock-playback{justify-content:center}
.room-clock button.clock-icon,.clock-stage-surface button.clock-icon{flex:0 0 auto!important;padding:0!important;width:30px!important;min-width:30px!important;height:30px!important;min-height:30px!important;display:inline-grid!important;place-items:center!important;border:1px solid var(--line-strong,rgb(var(--rooms-rgb-304761,48,71,97)))!important;border-radius:9px!important;background:rgba(var(--rooms-rgb-7c99be,124,153,190),0.06)!important;color:var(--text,rgb(var(--rooms-rgb-edf4ff,237,244,255)))!important}
.room-clock button.primary-control,.clock-stage-surface button.primary-control{border-radius:50%!important;color:#291c0e!important;border-color:#f5a04f!important;background:#f5a04f!important}
.room-clock button.stage-active{color:#f6be84!important;background:#f5a04f1c!important;border-color:#a87748!important}
.clock-divider{height:22px;border-left:1px solid var(--line-strong);margin:0 2px}
.clock-surfaces button:hover:not(:disabled){border-color:#f5a04f!important;color:#f5bc7b!important}
.clock-viewer-caption{font-size:9px;color:var(--muted);white-space:nowrap}
.clock-visibility-note{font-size:9px;color:var(--muted);text-align:center;line-height:1.4;margin-top:9px}
.clock-panel .clock-visibility-note{flex:0 0 6px;order:-1;width:6px;height:6px;max-width:6px;margin:0;background:rgb(var(--rooms-rgb-7794b4,119,148,180));border-radius:50%;font-size:0;overflow:hidden;white-space:nowrap}
.clock-panel:has(.stage-active) .clock-visibility-note{background:#f5a04f}
.room-clock button:focus-visible{outline:2px solid #e6ad72;outline-offset:2px}
html[data-theme] .room-clock button.clock-close{background:transparent!important;color:var(--muted)!important;border-color:transparent!important}
html[data-theme] .room-clock button.clock-close:is(:hover,:focus-visible){background:var(--red,#ff8494)!important;border-color:var(--red,#ff8494)!important;outline-color:var(--red,#ff8494)!important;color:#1b1011!important}
.clock-edit-toggle{display:none}
.clock-duration-editor{position:relative;display:flex;align-items:center;justify-content:center;flex-wrap:nowrap;gap:6px;margin:0;padding:0;border:0;min-width:0;flex:none}
.clock-quick-times{display:flex;gap:4px;flex:none}
.clock-quick-times button{display:inline-flex;align-items:center;justify-content:center;height:32px;min-height:32px;padding:0 7px!important;border:1px solid var(--line-strong);border-radius:9px;font-size:10px;font-weight:500;background:rgba(var(--rooms-rgb-7c99be,124,153,190),0.04);color:var(--muted);white-space:nowrap}
.clock-quick-times button:hover{background:rgba(var(--rooms-rgb-7c99be,124,153,190),0.12);color:var(--text)}
.clock-quick-times button[aria-pressed=true]{border-color:#ae7947;color:#f5be85;background:#f5a04f0d}
.clock-custom-time{display:flex;align-items:center;gap:5px;min-width:0}
.clock-time-fields{display:flex;align-items:center;height:32px;padding:0 3px;background:rgba(var(--rooms-rgb-7c99be,124,153,190),0.04);border:1px solid var(--line-strong);border-radius:9px;transition:border-color .15s}
.clock-time-fields:focus-within{border-color:#dba267;box-shadow:0 0 0 2px #f5a04f12}
.clock-time-segment{display:flex;align-items:center;gap:2px;min-width:0}
.clock-time-segment label{display:block;margin:0!important;padding:0!important;flex:none}
.clock-custom-time input{display:block!important;appearance:textfield!important;-moz-appearance:textfield!important;width:27px!important;min-width:0!important;height:28px!important;min-height:28px!important;padding:0!important;border:0!important;border-radius:4px!important;background:transparent!important;font:500 14px/1 'Segoe UI',sans-serif!important;font-variant-numeric:tabular-nums!important;color:var(--text)!important;text-align:center!important;outline:0!important;box-shadow:none!important}
.clock-custom-time input::-webkit-inner-spin-button,.clock-custom-time input::-webkit-outer-spin-button{-webkit-appearance:none!important;margin:0!important}
.clock-custom-time input:focus-visible{background:rgba(var(--rooms-rgb-7c99be,124,153,190),0.12)!important}
.clock-time-unit{font-size:9px;color:var(--muted);user-select:none}
.clock-time-steppers{display:flex;flex-direction:column;margin-left:1px}
html[data-theme] .room-clock .clock-time-steppers button{display:grid;place-items:center;width:17px!important;min-width:17px!important;height:14px!important;min-height:14px!important;padding:0!important;margin:0!important;border:0!important;border-radius:4px!important;background:transparent!important;color:var(--muted)!important}
.clock-time-steppers svg{width:12px;height:12px;stroke-width:1.8}
html[data-theme] .room-clock .clock-time-steppers button:hover{color:var(--text)!important;background:rgba(var(--rooms-rgb-7c99be,124,153,190),0.18)!important}
.clock-colon{align-self:center;padding:0 3px;font-size:12px;line-height:1;color:var(--muted)}
.clock-duration-editor .clock-apply{display:grid;place-items:center;width:30px;height:32px;min-height:32px;padding:0;border:1px solid var(--line-strong);border-radius:9px;color:var(--muted);background:rgba(var(--rooms-rgb-7c99be,124,153,190),0.04)}
.clock-apply svg{width:16px;height:16px}
.clock-duration-editor.is-dirty .clock-apply,.clock-apply:hover{background:#f5a04f1c;color:#f5b87a;border-color:#ac7a49}
.clock-duration-editor.is-invalid .clock-time-fields{border-color:var(--red,#e54e5f)}
.clock-duration-editor.is-invalid .clock-duration-message{position:absolute!important;top:calc(100% + 7px);left:0;z-index:60;width:max-content!important;max-width:100%!important;height:auto!important;margin:0!important;padding:7px 10px!important;overflow:visible!important;clip:auto!important;white-space:normal!important;border:1px solid var(--red,#e54e5f)!important;border-radius:8px;background:var(--room-control,rgb(var(--rooms-rgb-14263b,20,38,59)));color:var(--text);box-shadow:0 6px 20px #0003;text-align:left;font-size:10px}
.clock-widget{position:fixed;z-index:35;right:24px;top:100px;width:284px;max-width:calc(100vw - 16px);max-height:calc(100dvh - 88px);overflow:auto;padding:10px 14px 14px;box-shadow:0 16px 55px #0006}
.clock-widget .clock-top,.clock-external .clock-top{flex-direction:column;align-items:stretch;gap:8px}
.clock-widget .clock-tabs,.clock-external .clock-tabs{align-self:center}
.clock-drag{display:flex;align-items:center;gap:7px;font-size:11px;cursor:grab;touch-action:none;user-select:none;min-height:24px}
.clock-drag svg{color:var(--muted);stroke-width:3}.clock-drag:active{cursor:grabbing}
.clock-drag small{margin-left:auto;color:var(--muted);font-size:9px}
.clock-drag:focus-visible{outline:2px solid #f5a04f;outline-offset:3px;border-radius:5px}
.room-clock .clock-face.round{width:166px;height:166px;display:flex;flex-direction:column;justify-content:center;margin:12px auto 10px}
.clock-face.round .clock-digits{font-size:42px}
.clock-progress{position:absolute;inset:0;width:100%!important;height:100%!important;color:rgba(var(--rooms-rgb-85a1c6,133,161,198),0.14);stroke-width:3!important}
.clock-progress-value{stroke:#f5a04f;stroke-dasharray:654;stroke-dashoffset:654;transform:rotate(-90deg);transform-origin:50% 50%;stroke-linecap:round}
.clock-widget .clock-status{font-size:9px}
.clock-widget .clock-playback .clock-icon,.clock-external .clock-playback .clock-icon{width:36px!important;height:36px!important}
.clock-widget .clock-duration-editor,.clock-external .clock-duration-editor{margin-top:12px}
.clock-widget .clock-time-unit{display:none}
.clock-widget .clock-surfaces,.clock-external .clock-surfaces{margin-top:12px;padding-top:10px;border-top:1px solid var(--line-strong);justify-content:center}
.clock-popout-body{display:flex!important;flex-direction:column;min-height:100dvh;height:auto!important;overflow:auto!important;background:var(--bg,rgb(var(--rooms-rgb-091320,9,19,32)))!important;color:var(--text,rgb(var(--rooms-rgb-eef4ff,238,244,255)));margin:0;padding:0;font-family:'Segoe UI',sans-serif}
.clock-popout-header{padding:15px 20px;border-bottom:1px solid var(--line-strong);font-size:11px}
.clock-external{margin:16px;padding:15px 18px 20px}
.clock-external .clock-drag{cursor:default}.clock-external .clock-face.round{width:min(230px,64vw);height:min(230px,64vw);margin:20px auto 18px}.clock-external .clock-digits{font-size:60px}
.clock-popout-footer{text-align:center;padding:0 14px 16px;color:var(--muted);font-size:10px}
.clock-stub-copy,.clock-stub-actions{display:flex;align-items:center;gap:10px}.clock-stub-copy{font-size:11px;color:var(--muted)}.clock-stub-copy [data-clock-digits]{font-size:25px;color:var(--text)}
.clock-panel.clock-narrow{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:8px 6px;padding:9px 10px;justify-content:stretch}
.clock-narrow .clock-top{grid-row:1;grid-column:1;justify-content:flex-start;min-width:0}
.clock-narrow .clock-tabs{gap:1px;padding:2px}.clock-narrow .clock-tabs button{padding:7px 8px!important;font-size:10px!important}
.clock-narrow .clock-face{grid-row:1;grid-column:2;min-width:65px}.clock-narrow .clock-digits{font-size:25px}
.clock-narrow .clock-playback{grid-row:1;grid-column:3;gap:4px}.clock-narrow .clock-playback .clock-icon{width:28px!important;min-width:28px!important;height:28px!important;min-height:28px!important}
.clock-narrow .clock-viewer-caption{max-width:58px;white-space:normal;text-align:center;line-height:1.3}
.clock-narrow .clock-surfaces{grid-row:2;grid-column:1/4;justify-content:flex-end;gap:5px}.clock-narrow .clock-surfaces .clock-icon{width:28px!important;min-width:28px!important;height:28px!important;min-height:28px!important}
.clock-narrow .clock-visibility-note{display:none}
.clock-narrow .clock-duration-editor{display:none;grid-row:3;grid-column:1/4;justify-content:center;gap:10px;padding-top:8px;margin:0;border-top:1px solid var(--line-strong)}
.clock-narrow.clock-editor-expanded .clock-duration-editor{display:flex}
.clock-narrow .clock-edit-toggle{display:inline-flex;align-items:center;justify-content:center;gap:3px;grid-row:2;grid-column:1;justify-self:start;z-index:1;height:28px;min-height:28px;padding:0 7px;font-size:10px;border:1px solid var(--line-strong);border-radius:8px;color:var(--muted);background:rgba(var(--rooms-rgb-7c99be,124,153,190),0.04)}
.clock-edit-toggle svg{width:13px;height:13px}.clock-edit-toggle[aria-expanded=true]{color:#f5b87a;border-color:#ac7a49;background:#f5a04f12}
.clock-narrow.clock-popout-stub{display:flex;flex-wrap:wrap}
html[data-theme] #roomView.clock-stage-active .room-main{display:grid!important;grid-template-columns:minmax(0,1fr) 174px!important;grid-template-rows:minmax(0,1fr)!important;gap:12px!important;min-height:0!important}
html[data-theme] #roomView.clock-stage-active #videoGrid{display:grid!important;grid-column:2!important;grid-row:1!important;grid-template-columns:1fr!important;grid-auto-rows:minmax(100px,1fr)!important;gap:10px!important;width:auto!important;min-height:0!important;max-height:100%!important;overflow:auto!important}
html[data-theme] #roomView.clock-stage-active #videoGrid .participant-tile{display:block!important;grid-column:auto!important;grid-row:auto!important;width:100%!important;max-width:none!important;min-width:0!important;height:auto!important;max-height:none!important;min-height:100px!important;aspect-ratio:auto!important;justify-self:stretch!important;align-self:stretch!important}
html[data-theme] #roomView.clock-stage-active .group-shape-controls{display:none!important}
.clock-stage-surface{grid-column:1;grid-row:1;min-width:0;height:100%;min-height:0;display:flex;flex-direction:column;align-items:center;justify-content:center;background:radial-gradient(ellipse at 50% 30%,rgb(var(--rooms-rgb-1b3047,27,48,71)) 0%,rgb(var(--rooms-rgb-0a1524,10,21,36)) 72%);color:rgb(var(--rooms-rgb-eef4ff,238,244,255));overflow:hidden}
.clock-stage-label{position:absolute;top:20px;left:22px;display:flex;align-items:center;gap:8px;font-size:11px;color:rgb(var(--rooms-rgb-a7b8cf,167,184,207))}.clock-stage-label i{width:6px;height:6px;background:#f5a04f;border-radius:50%}
.clock-stage-surface .clock-face{width:min(350px,38vh);height:min(350px,38vh);display:flex;flex-direction:column;justify-content:center}.clock-stage-surface .clock-digits{font-size:clamp(48px,6.5vw,92px);color:#f4f6fa}.clock-stage-surface .clock-status{font-size:13px;color:rgb(var(--rooms-rgb-a5b4c8,165,180,200));margin-top:14px}.clock-stage-surface .clock-playback{margin-top:24px}
.clock-stage-stop{position:absolute;right:18px;top:13px;display:flex;gap:7px;align-items:center;border:1px solid rgb(var(--rooms-rgb-405670,64,86,112));border-radius:10px;padding:8px 11px;background:rgb(var(--rooms-rgb-203449,32,52,73));color:rgb(var(--rooms-rgb-dce8f8,220,232,248));font-size:11px}
.clock-stage-active .clock-widget .clock-face{display:none}.clock-stage-active .clock-widget .clock-playback{margin-top:14px}
@media(max-width:1100px){.clock-panel .clock-time-unit{display:none}.clock-panel .clock-quick-times button{padding:0 6px!important}}
@media(max-width:850px){.clock-panel:not(.clock-narrow){gap:5px}.clock-panel:not(.clock-narrow) .clock-tabs button{padding:7px 6px!important}.clock-panel:not(.clock-narrow) .clock-icon{width:28px!important;min-width:28px!important;height:28px!important;min-height:28px!important}.clock-panel:not(.clock-narrow) .clock-duration-editor{gap:5px}}
@media(max-width:750px){
 /* Beat the native open-panel 16:9 stage, including its selector specificity. */
 html[data-theme][data-buddy-room-view="active"] #roomView.room.clock-stage-active #roomShell .room-main{aspect-ratio:auto!important;height:auto!important;min-height:366px!important;max-height:none!important;grid-template-columns:1fr!important;grid-template-rows:minmax(220px,1fr) 112px!important;gap:8px!important}
 html[data-theme] #roomView.clock-stage-active .room-main{grid-template-columns:1fr!important;grid-template-rows:minmax(220px,1fr) 112px!important;gap:8px!important;min-height:366px!important}
 html[data-theme] #roomView.clock-stage-active #videoGrid{grid-column:1!important;grid-row:2!important;grid-template-columns:repeat(3,minmax(100px,1fr))!important;grid-auto-flow:column!important;grid-auto-columns:100px!important;grid-template-rows:1fr!important;gap:6px!important}
 /* Reserve header, playback and focus-outline space inside the existing stage.
    cqh measures its content box, so the ring shrinks before the panel grows. */
 .clock-stage-surface{container-type:size;padding:48px 12px 16px;gap:12px}
 .clock-stage-surface>.clock-top{position:absolute;top:0;left:0;width:100%;height:0}
 .clock-stage-surface .clock-face{width:min(210px,26vh,calc(100cqh - 42px));height:min(210px,26vh,calc(100cqh - 42px))}.clock-stage-surface .clock-digits{font-size:clamp(32px,calc((100cqh - 42px)*.24),48px)}.clock-stage-surface .clock-status{font-size:10px;margin-top:9px}.clock-stage-surface .clock-playback{margin-top:0}.clock-stage-label{left:12px;top:13px;font-size:9px}.clock-stage-stop{right:8px;top:8px;font-size:0;padding:7px}.clock-stage-stop svg{width:15px;height:15px}
}
@media(max-width:350px){.clock-panel.clock-narrow{padding:8px;column-gap:4px}.clock-narrow .clock-tabs button{padding:6px!important;font-size:9px!important}.clock-narrow .clock-face{min-width:58px}.clock-narrow .clock-digits{font-size:23px}.clock-narrow .clock-duration-editor{gap:7px}.clock-narrow .clock-time-unit{display:none}}
@media(prefers-reduced-motion:reduce){.room-clock *{transition:none!important;animation:none!important}}