/* Scoped to the home, rooms and presenter templates only. */
.home-ui, .rooms-ui { background: #f7f8fa; --slate: #606979; --beam-deep: #936000; }
:is(.home-ui,.rooms-ui) .nav { max-width: 1320px; padding-block: 22px; }
:is(.home-ui,.rooms-ui) .page { max-width: 1320px; }
:is(.home-ui,.rooms-ui) .btn { border-radius: 10px; min-height: 42px; }
:is(.home-ui,.rooms-ui) .nav-links .btn { background: #171d2b; color: #fff; box-shadow: none; }
:is(.home-ui,.rooms-ui) .footer { max-width: 1208px; padding: 24px 0; margin-inline: auto; }
.home-ui .hero { gap: 64px; padding: 66px 0 54px; isolation: isolate; }
.home-ui .hero-beam { inset: 0; width: 100%; height: 100%; background: radial-gradient(ellipse at 85% 45%, #ffedcc 0, transparent 58%); }
.home-ui .eyebrow { font-family: var(--font-body); font-size: 12px; letter-spacing: .1em; color: #616977; }
.home-ui .hero-copy h1 { font-size: clamp(40px,4.5vw,62px); letter-spacing: -.045em; line-height: 1.08; margin-bottom: 24px; }
.home-ui .lede { font-size: 16px; line-height: 1.8; max-width: 49ch; }
.home-ui .hero-copy .accent { color: #9b6700; background: none; padding: 0; }
.home-ui .pin-join { padding-top: 24px; border-top: 1px solid #dfe3e9; margin-top: 28px; }
.home-ui .pin-label { color: #343e50; font-size: 14px; }
.home-ui .pin-row { flex-wrap: nowrap; gap: 7px; }
.home-ui .pin-cell { width: clamp(32px,3.6vw,46px); height: 52px; border-width: 1px; box-shadow: 0 2px 3px #10131c05; }
.home-ui .pin-go { margin-left: 5px; }
.home-ui .hero-frame { padding: 24px; background: #fff; border: 1px solid #e1e5eb; border-radius: 22px; box-shadow: 0 24px 60px -35px #3b465e66; }
.upload-heading { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; font-size: 13px; font-weight: 600; color: #596476; }
.upload-heading span:last-child { color: #8b620b; background: #fff4dc; padding: 4px 9px; border-radius: 6px; font-size: 11px; }
.home-ui .drop-frame { aspect-ratio: auto; min-height: 252px; background: #fbfcfe; border: 1.5px dashed #c9d0dc; box-shadow: none; border-radius: 14px; }
.home-ui .drop-frame:hover { background: #fffbf1; border-color: #ba830b; }
.home-ui .drop-glyph { width: 54px; height: 54px; background: #fff0d1; padding: 10px; border-radius: 15px; margin-bottom: 10px; }
.home-ui .drop-frame-inner { gap: 9px; }
.home-ui .drop-frame-inner strong { font-size: 23px; }
.home-ui .drop-frame-inner .upload-cta { margin-top: 12px; background: #ffb224; color: #302000; padding: 12px 22px; border-radius: 9px; font-size: 14px; font-weight: 600; }
.upload-note { text-align: center; color: #737b89; font-size: 12px; margin: 18px 0 0; }
.home-ui .features { gap: 0; border-top: 1px solid #dfe3e9; padding-top: 28px; }
.home-ui .feature-card { border: 0; border-radius: 0; background: transparent; padding: 0 28px; }
.home-ui .feature-card:first-child { padding-left: 0; }
.home-ui .feature-card + .feature-card { border-left: 1px solid #dfe3e9; }
.home-ui .feature-card::before { display: none; }
.home-ui .feature-key { display: inline-block; font-size: 11px; background: #eeeef2; color: #596272; padding: 4px 8px; border-radius: 5px; }
.home-ui .feature-card h3 { margin-block: 12px 7px; font-size: 18px; }
.home-ui .feature-card p { font-size: 14px; line-height: 1.7; }
.rooms-ui .wide { margin-top: 52px; }
.rooms-heading { display: flex; justify-content: space-between; align-items: center; gap: 24px; padding-bottom: 30px; border-bottom: 1px solid #dfe3e9; }
.rooms-heading .lede { margin: 0; font-size: 15px; }
.rooms-ui .eyebrow { font-family: var(--font-body); font-size: 11px; color: #737d8e; letter-spacing: .12em; }
.rooms-ui .page-title { font-size: 40px; letter-spacing: -.04em; }
.rooms-list-label { font-size: 13px; font-weight: 600; color: #606979; margin: 26px 0 16px; }
.rooms-ui .room-grid { grid-template-columns: repeat(auto-fill,minmax(min(100%,350px),1fr)); gap: 22px; }
.rooms-ui .room-card { padding: 26px; border-radius: 18px; gap: 22px; box-shadow: 0 5px 18px -12px #27324840; }
.rooms-ui .room-card-head { align-items: center; }
.rooms-ui .room-title { font-size: 22px; }
.rooms-ui .status-pill { letter-spacing: .04em; font-family: var(--font-body); font-size: 10px; padding: 5px 10px; }
.rooms-ui .pill-active { color: #227345; }
.rooms-ui .room-meta { background: #f7f8fa; border-radius: 10px; padding: 16px; gap: 16px; grid-template-columns: minmax(0,1.4fr) minmax(0,1fr); }
.rooms-ui .room-meta dt { font-size: 10px; color: #737d8e; margin-bottom: 5px; }
.rooms-ui .room-meta dd { font-size: 13px; overflow-wrap: anywhere; word-break: normal; }
.rooms-ui .room-actions { gap: 9px; border-top: 1px solid #edf0f4; padding-top: 18px; }
.rooms-ui .room-actions .btn { font-size: 12px; padding: 10px 12px; min-height: 38px; }
.rooms-ui .room-actions .btn-primary { flex: 1; }
.rooms-ui .room-actions .btn-danger { margin-left: auto; border-color: transparent; }
.rooms-ui .empty-state { background: #fff; border: 1px dashed #cbd2de; border-radius: 18px; margin-top: 28px; padding: 48px 20px; }
.presenter-ui { height: 100dvh; overflow: hidden; background: #0c1019; }
.presenter-ui .stage { height: 100dvh; min-height: 0; }
.presenter-ui .presenter { display: grid; grid-template-rows: auto minmax(0,1fr) auto auto; height: 100%; overflow: hidden; }
.presenter-ui .stage-top { padding: 14px 24px; flex-wrap: nowrap; background: #121824; gap: 24px; }
.presenter-ui .stage-brand { color: #eef1f8; font-size: 18px; }
.presenter-ui .stage-brand .brand-mark { width: 21px; height: 15px; border: 2px solid #ffb224; border-radius: 4px; position: relative; }
.presenter-ui .stage-brand .brand-mark::after { content: ''; position: absolute; width: 9px; height: 2px; background: #ffb224; bottom: -6px; left: 4px; }
.presenter-ui .stage-title { text-align: left; border-left: 1px solid #354053; padding-left: 24px; font-size: 14px; }
.presenter-ui .stage-top-right { width: auto; flex-wrap: nowrap; }
.presenter-ui .btn-stage { border-radius: 9px; min-height: 38px; font-size: 13px; background: #1b2332; border-color: #303b4d; }
.presenter-ui [data-share], .presenter-ui [data-next] { background: #ffb224; border-color: #ffb224; color: #302000; }
.presenter-ui .viewer-chip { border: 0; padding-inline: 4px; font-size: 12px; white-space: nowrap; }
.presenter-ui .viewer-chip strong { color: #e9edf5; }
.viewer-label { font-family: var(--font-body); color: #9ca8bb; }
.presenter-ui .stage-main { overflow: hidden; padding: 20px 30px; background: radial-gradient(ellipse at 50% 45%,#1c2534,#0c1019 75%); }
.presenter-ui .stage-slide { width: 100%; height: 100%; min-height: 0; }
.presenter-ui .stage-slide img { width: auto; height: auto; max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 5px; box-shadow: 0 12px 45px #0006; }
.presenter-ui .filmstrip { padding: 12px 24px; gap: 12px; background: #111722; min-width: 0; }
.presenter-ui .thumb { width: 112px; border-radius: 7px; }
.presenter-ui .thumb.current { box-shadow: 0 0 0 2px #ffb22435; }
.presenter-ui .stage-controls { padding: 12px 24px; gap: 10px; background: #151c28; }
.presenter-ui .ctrl-cluster { flex-wrap: nowrap; }
.presenter-ui .slide-counter { min-width: 74px; text-align: center; font-size: 13px; }
.presenter-ui .key-hints { color: #94a0b5; font-family: var(--font-body); font-size: 11px; }
.presenter-ui kbd { font: inherit; border: 1px solid #3a4558; border-radius: 4px; padding: 2px 5px; margin-left: 7px; color: #b6c0d1; }
@media(max-width:920px) {
 .home-ui .hero { gap: 34px; padding-top: 34px; } .home-ui .hero-copy .lede { max-width: 60ch; }
 .home-ui .hero-frame { max-width: 600px; width: 100%; } .home-ui .pin-cell { width: 44px; }
 .home-ui .features { gap: 24px; } .home-ui .feature-card { padding: 0!important; border: 0!important; }
 .presenter-ui .stage-title { display: block; } .presenter-ui .stage-top { gap: 14px; }
}
@media(max-width:600px) {
 :is(.home-ui,.rooms-ui) .nav { padding: 16px 20px; } :is(.home-ui,.rooms-ui) .brand-word { font-size: 18px; }
 :is(.home-ui,.rooms-ui) .nav-links { gap: 10px; } :is(.home-ui,.rooms-ui) .nav-links a { font-size: 12px; }
 :is(.home-ui,.rooms-ui) .nav-links a[href='/rooms'] { display: inline; } :is(.home-ui,.rooms-ui) .nav-links .btn { padding: 9px 10px; }
 :is(.home-ui,.rooms-ui) .footer { margin-inline: 20px; } .home-ui .hero-copy h1 { font-size: 40px; }
 .home-ui .pin-row { flex-wrap: wrap; } .home-ui .pin-cell { width: calc((100% - 35px)/6); max-width: 48px; }
 .home-ui .pin-go { width: 100%; margin: 5px 0 0; } .home-ui .hero-frame { padding: 18px; }
 .rooms-heading { align-items: flex-start; flex-direction: column; gap: 16px; } .rooms-ui .wide { margin-top: 28px; }
 .presenter-ui .stage-top { padding: 10px 12px; flex-wrap: wrap; gap: 9px; } .presenter-ui .stage-brand { font-size: 15px; }
 .presenter-ui .stage-title { padding-left: 12px; } .presenter-ui .stage-top-right { width: 100%; justify-content: flex-end; }
 .presenter-ui .viewer-chip { margin-right: auto; } .presenter-ui .stage-main { padding: 12px; }
 .presenter-ui .filmstrip { padding: 10px 12px; } .presenter-ui .thumb { width: 80px; }
 .presenter-ui .stage-controls { padding: 10px 12px; justify-content: center; } .presenter-ui .btn-stage { padding: 9px 12px; }
 .presenter-ui .ctrl-tools { justify-content: center; } .presenter-ui kbd { display: none; }
}
@media(max-height:550px) and (min-width:601px) {
 .presenter-ui .stage-top { padding-block: 6px; } .presenter-ui .filmstrip { padding-block: 6px; }
 .presenter-ui .thumb { width: 72px; } .presenter-ui .stage-controls { padding-block: 6px; }
 .presenter-ui .key-hints { display: none; } .presenter-ui .stage-main { padding: 10px; }
}
/* Keep the upload icon stable when its copy wraps. */
.home-ui .drop-glyph { flex-shrink: 0; }
.home-ui .drop-frame { min-height: 300px; }
.home-ui .drop-frame-inner strong { font-size: 21px; line-height: 1.3; max-width: 24ch; }
:is(.home-ui,.rooms-ui) .footer { width: calc(100% - 112px); }
@media(max-width:600px) { :is(.home-ui,.rooms-ui) .footer { width: auto; } }

/* Immersive presenter: slide geometry is independent of overlay visibility. */
.presenter-ui .presenter.immersive-ready { display: block; position: relative; isolation: isolate; }
.presenter-ui .immersive-ready .stage-main { position: absolute; inset: 0; padding: 0; background: #0c1019; }
.presenter-ui .immersive-ready .stage-slide { z-index: 1; }
.presenter-ui .immersive-ready .stage-slide img { border-radius: 0; flex: none; max-width: 100%; max-height: 100%; box-shadow: 0 0 70px #0005; }
.slide-ambient { position: absolute; inset: -40px; background-size: cover; background-position: center; filter: blur(35px) brightness(.45); opacity: .7; pointer-events: none; }
.presenter-ui .immersive-ready .stage-top,
.presenter-ui .presenter-dock {
 position: absolute; z-index: 10; left: max(12px,env(safe-area-inset-left)); right: max(12px,env(safe-area-inset-right));
 border: 1px solid #ffffff30; border-radius: 20px;
 background: linear-gradient(125deg,#344052b8,#131b28d9);
 -webkit-backdrop-filter: blur(24px) saturate(145%); backdrop-filter: blur(24px) saturate(145%);
 box-shadow: inset 0 1px 0 #ffffff22,0 12px 40px #0005;
 transition: opacity .25s ease, transform .3s ease;
}
.presenter-ui .immersive-ready .stage-top { top: max(12px,env(safe-area-inset-top)); padding: 12px 18px; }
.presenter-ui .presenter-dock { bottom: max(12px,env(safe-area-inset-bottom)); overflow: hidden; }
.presenter-ui .presenter-dock .filmstrip { background: transparent; border-top: 0; padding: 12px 16px 10px; scrollbar-color: #ffffff40 transparent; }
.presenter-ui .presenter-dock .stage-controls { background: transparent; border-color: #ffffff20; padding: 10px 16px; }
.presenter-ui .immersive-ready .btn-stage { background: #ffffff10; border-color: #ffffff25; box-shadow: inset 0 1px 0 #ffffff0d; }
.presenter-ui .immersive-ready .btn-stage:hover { background: #ffffff25; border-color: #ffffff50; }
.presenter-ui .immersive-ready :is([data-next],[data-share],.btn-stage.is-on) { background: #ffbd45; color: #302000; border-color: #ffcf78; }
.presenter-ui .immersive-ready .thumb { background: #ffffff10; }
.presenter-ui .immersive-ready .key-hints { color: #bec8d8; }
.presenter-ui .immersive-ready.chrome-hidden .stage-top { opacity: 0; transform: translateY(calc(-100% - 24px)); pointer-events: none; }
.presenter-ui .chrome-hidden .presenter-dock { opacity: 0; transform: translateY(calc(100% + 24px)); pointer-events: none; }
/* Blackout must remain above the floating chrome. */
.presenter-ui .immersive-ready .stage-slide:has(.blackout-veil.is-active) { z-index: 40; }
@media(max-width:600px) {
 .presenter-ui .immersive-ready .stage-top { padding: 10px 12px; border-radius: 16px; }
 .presenter-ui .presenter-dock { border-radius: 16px; }
 .presenter-ui .presenter-dock .filmstrip { padding: 10px 12px; }
 .presenter-ui .presenter-dock .stage-controls { padding: 8px; gap: 8px; }
 .presenter-ui .presenter-dock .btn { min-height: 40px; }
}
@media(max-height:500px) {
 .presenter-ui .immersive-ready .stage-top { top: 6px; padding-block: 5px; flex-wrap: nowrap; }
 .presenter-ui .immersive-ready .stage-top-right { width: auto; }
 .presenter-ui .presenter-dock { bottom: 6px; }
 .presenter-ui .presenter-dock .thumb { width: 64px; }
 .presenter-ui .presenter-dock .filmstrip { padding-block: 6px; }
 .presenter-ui .presenter-dock .stage-controls { padding-block: 6px; }
 .presenter-ui .presenter-dock .key-hints { display: none; }
}
@media(prefers-reduced-motion:reduce) { .presenter-ui .immersive-ready .stage-top,.presenter-ui .presenter-dock { transition: none; } }

/* Keep offscreen chrome from creating a programmatically scrollable stage. */
.presenter-ui .stage { position: fixed; inset: 0; overflow: clip; }
.presenter-ui .presenter.immersive-ready { overflow: clip; }
.presenter-ui .immersive-ready .stage-main { overflow: clip; }