:root {
  font-family: var(--showcase-font, Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif);
  color: #f5f3ef;
  background: #050506;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
}
* { box-sizing: border-box; }
html, body, #app { width: 100%; height: 100%; margin: 0; overflow: hidden; background: #000; }
#app > .app-shell, #app > .player-screen, #app > .pdf-screen { position:fixed; width:1600px; height:900px; inset:auto; left:50%; top:50%; transform:translate(-50%,-50%) scale(var(--presentation-scale,1)); transform-origin:center center; container-type:size; }
button, input { font: inherit; }
button { -webkit-tap-highlight-color: transparent; }

.app-shell { position: fixed; inset: 0; width: 100cqw; height: 100dvh; background-color:#000; background-size:100% auto; background-position:center center; background-repeat:no-repeat; isolation:isolate; }
.app-shell.has-background .background-default { display:none; }
.background-default { position: absolute; inset: 0; z-index: -3; background: radial-gradient(circle at 72% 38%, #302c28 0, #111112 35%, #050506 74%); }
.background-default::before { content:""; position:absolute; inset:0; opacity:.5; background-image: linear-gradient(115deg, transparent 0 50%, rgba(255,255,255,.025) 50.2% 50.4%, transparent 50.6%), radial-gradient(circle at 70% 48%, rgba(220,185,126,.15), transparent 26%); }
.background-overlay { position:absolute; inset:0; z-index:-2; }
.background-overlay::after { content:""; position:absolute; inset:0; background:linear-gradient(0deg, rgba(0,0,0,.84) 0%, transparent 31%, rgba(0,0,0,.14) 70%, rgba(0,0,0,.45) 100%); }
.settings-button { position:absolute; top:max(24px, env(safe-area-inset-top)); right:max(28px, env(safe-area-inset-right)); width:48px; height:48px; border-radius:50%; border:1px solid rgba(255,255,255,.22); color:#fff; background:rgba(0,0,0,.38); backdrop-filter:blur(8px); font-size:21px; z-index:4; }
.settings-button:active { transform:scale(.95); }
.hero-copy { position:absolute; left:max(6cqw, env(safe-area-inset-left)); top:9cqh; width:min(66cqw, 980px); text-shadow:0 2px 24px rgba(0,0,0,.65); }
.brand-mark { font-size:clamp(9px, .82cqw, 15px); letter-spacing:.32em; font-weight:700; opacity:.75; margin-bottom:1.2cqh; }
.hero-copy h1 { font-family: var(--showcase-font, Georgia, serif); margin:0; font-size:clamp(46px, 6.2cqw, 118px); line-height:.88; letter-spacing:.025em; font-weight:500; text-wrap:balance; }
.hero-copy p { margin:2cqh 0 0; font-size:clamp(11px, 1cqw, 18px); letter-spacing:.24em; opacity:.78; font-weight:650; }
.row-title { position:absolute; left:max(6cqw, env(safe-area-inset-left)); bottom:39cqh; font-size:clamp(11px, 1cqw, 18px); letter-spacing:.19em; font-weight:750; }
.card-row { position:absolute; left:max(6cqw, env(safe-area-inset-left)); right:max(5cqw, env(safe-area-inset-right)); bottom:9cqh; height:26cqh; display:flex; gap:1.2cqw; align-items:stretch; overflow-x:auto; overflow-y:hidden; padding:3px 4px 8px; scrollbar-width:none; }
.card-row::-webkit-scrollbar { display:none; }
.media-card { position:relative; flex:0 0 min(26cqw, 450px); min-width:250px; border:1px solid rgba(255,255,255,.12); border-radius:9px; overflow:hidden; padding:0; color:#fff; background:#121214; box-shadow:0 15px 34px rgba(0,0,0,.28); text-align:left; transition:transform .18s ease, border-color .18s ease, box-shadow .18s ease; }
.media-card:not(.disabled):hover, .media-card:not(.disabled):focus-visible { transform:scale(1.035); border-color:rgba(239,214,167,.72); box-shadow:0 18px 48px rgba(0,0,0,.48); outline:none; }
.media-card img { width:100%; height:100%; object-fit:cover; display:block; }
.card-fallback { width:100%; height:100%; display:grid; place-items:center; background:radial-gradient(circle at 70% 30%, #40372c 0, #1b1918 38%, #0b0b0c 100%); }
.card-fallback span { font-size:clamp(36px, 4cqw, 72px); color:#d8c7a3; opacity:.9; }
.card-shade { position:absolute; inset:0; background:linear-gradient(0deg, rgba(0,0,0,.83), transparent 62%); }
.card-label { position:absolute; left:18px; bottom:16px; font-size:clamp(17px, 1.55cqw, 29px); font-weight:750; letter-spacing:.08em; text-shadow:0 2px 12px #000; }
.not-assigned { position:absolute; top:13px; right:13px; padding:6px 8px; border-radius:4px; font-size:9px; letter-spacing:.14em; background:rgba(0,0,0,.62); border:1px solid rgba(255,255,255,.14); }
.media-card.disabled { opacity:.48; }
.footer-hint { position:absolute; right:max(5cqw, env(safe-area-inset-right)); bottom:3cqh; font-size:10px; letter-spacing:.14em; opacity:.4; }

.modal-backdrop { position:fixed; inset:0; z-index:50; display:grid; place-items:center; padding:20px; background:rgba(0,0,0,.75); backdrop-filter:blur(8px); }
.password-card { width:min(520px, 92cqw); padding:30px; border:1px solid #34302b; border-radius:14px; background:#111112; box-shadow:0 30px 90px rgba(0,0,0,.65); }
.eyebrow { color:#bba77f; letter-spacing:.18em; font-size:11px; font-weight:750; }
.password-card h2 { margin:9px 0 5px; font-size:27px; }
.password-card p { margin:0 0 20px; opacity:.64; }
.password-card input, .settings-screen input:not([type="range"]):not([type="checkbox"]) { width:100%; padding:13px 14px; border:1px solid #3a3938; border-radius:7px; background:#080809; color:#fff; outline:none; }
.password-card input:focus, .settings-screen input:focus { border-color:#a99469; }
.error-text { color:#db7d72; margin-top:9px; font-size:13px; }
.modal-actions { display:flex; justify-content:flex-end; gap:10px; margin-top:20px; }
.modal-actions button, .settings-screen button { border:0; border-radius:7px; padding:11px 18px; background:#e7ddc6; color:#111; font-weight:750; }
button.secondary { background:#282727; color:#fff; border:1px solid #3d3b39; }

.player-screen, .pdf-screen { position:fixed; inset:0; background:#000; color:#fff; touch-action:none; }
.video-element { width:100%; height:100%; object-fit:contain; display:block; }
.video-controls { position:absolute; inset:0; opacity:0; pointer-events:none; transition:opacity .2s ease; background:linear-gradient(180deg,rgba(0,0,0,.58),transparent 23%,transparent 66%,rgba(0,0,0,.76)); }
.video-controls.is-visible { opacity:1; pointer-events:auto; }
.back-pill { position:absolute; top:max(26px, env(safe-area-inset-top)); left:max(28px, env(safe-area-inset-left)); height:48px; padding:0 17px; border:1px solid rgba(255,255,255,.2); border-radius:24px; color:#fff; background:rgba(0,0,0,.48); backdrop-filter:blur(8px); font-weight:700; letter-spacing:.08em; }
.back-pill span { margin-left:6px; }
.player-title { position:absolute; top:max(41px, calc(env(safe-area-inset-top) + 15px)); left:50%; transform:translateX(-50%); font-size:14px; letter-spacing:.18em; font-weight:750; }
.play-button { position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:72px; height:72px; border-radius:50%; border:1px solid rgba(255,255,255,.26); color:#fff; background:rgba(0,0,0,.45); backdrop-filter:blur(8px); font-size:30px; }
 .video-bottom-controls { position:absolute; left:max(4cqw, env(safe-area-inset-left)); right:max(4cqw, env(safe-area-inset-right)); bottom:max(24px, env(safe-area-inset-bottom)); display:grid; gap:10px; }
.timeline-wrap { position:relative; display:grid; grid-template-columns:52px 1fr 52px; align-items:center; gap:12px; font-size:11px; font-variant-numeric:tabular-nums; }
.video-volume-wrap { justify-self:end; display:grid; grid-template-columns:36px minmax(120px,220px) 44px; align-items:center; gap:8px; min-height:34px; padding:5px 9px; border:1px solid rgba(255,255,255,.15); border-radius:18px; background:rgba(0,0,0,.48); backdrop-filter:blur(8px); }
.video-mute { width:30px; height:28px; border:0; background:transparent; color:#fff; padding:0; font-size:16px; }
.video-volume { width:100%; accent-color:#d6c19a; }
.video-volume-wrap span { font-size:10px; text-align:right; color:#e9e4da; font-variant-numeric:tabular-nums; }
.timeline { width:100%; accent-color:#d6c19a; }

.pdf-screen { background:#000; display:grid; place-items:center; }
.pdf-stage { position:absolute; inset:max(12px,env(safe-area-inset-top)) max(12px,env(safe-area-inset-right)) max(12px,env(safe-area-inset-bottom)) max(12px,env(safe-area-inset-left)); display:grid; place-items:center; overflow:hidden; background:#000; }
.pdf-stage canvas { max-width:100%; max-height:100%; box-shadow:0 8px 45px rgba(0,0,0,.8); background:#000; }
.pdf-counter { position:absolute; bottom:max(25px,env(safe-area-inset-bottom)); left:50%; transform:translateX(-50%); padding:7px 12px; background:rgba(0,0,0,.54); border-radius:20px; font-size:11px; opacity:.72; }
.pdf-back { position:absolute; right:max(28px,env(safe-area-inset-right)); bottom:max(24px,env(safe-area-inset-bottom)); height:46px; padding:0 18px; border-radius:23px; border:1px solid rgba(255,255,255,.22); background:rgba(0,0,0,.68); color:#fff; font-weight:750; letter-spacing:.08em; }
.viewer-error { position:fixed; inset:0; display:grid; place-items:center; align-content:center; gap:14px; text-align:center; color:#fff; background:#080809; }
.viewer-error small { max-width:70cqw; opacity:.6; }
.viewer-error button { padding:10px 18px; }

.settings-screen { position:fixed; inset:0; overflow:auto; background:#09090a; color:#f4f0e8; padding-bottom:max(40px,env(safe-area-inset-bottom)); }
.settings-header { position:sticky; z-index:3; top:0; min-height:94px; display:flex; align-items:center; justify-content:space-between; gap:20px; padding:18px max(5cqw,env(safe-area-inset-right)) 18px max(5cqw,env(safe-area-inset-left)); background:rgba(9,9,10,.94); backdrop-filter:blur(12px); border-bottom:1px solid #272626; }
.settings-header h1 { margin:5px 0 0; font-size:24px; }
.settings-content { width:min(1100px,90cqw); margin:28px auto 60px; display:grid; gap:18px; }
.settings-section { padding:24px; border:1px solid #262523; border-radius:12px; background:#111112; }
.settings-section h2 { margin:0 0 18px; font-size:18px; }
.form-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; margin-bottom:15px; }
.settings-screen label { display:grid; gap:8px; color:#c8c2b8; font-size:12px; letter-spacing:.03em; }
.settings-screen label span { opacity:.55; }
.settings-screen input[type="range"] { width:100%; accent-color:#b7a077; }
.asset-row { min-height:65px; display:flex; align-items:center; justify-content:space-between; gap:16px; padding:12px 0; border-top:1px solid #242321; }
.asset-info { min-width:0; display:grid; gap:5px; }
.asset-info strong { font-size:13px; }
.asset-info span { opacity:.53; font-size:11px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:58cqw; }
.asset-actions { display:flex; gap:8px; flex-shrink:0; }
.settings-screen button.tiny { padding:8px 11px; font-size:11px; }
.settings-screen button.danger { background:#2a1717; color:#efaaa0; border:1px solid #4b2424; }
.slot-card { margin-top:14px; padding:18px; border:1px solid #2c2a27; border-radius:9px; background:#0c0c0d; }
.slot-top { display:grid; grid-template-columns:150px 1fr; gap:18px; align-items:end; margin-bottom:8px; }
.switch-label { display:flex !important; grid-auto-flow:column; justify-content:start; align-items:center; gap:9px !important; min-height:40px; }
.switch-label input { width:19px; height:19px; accent-color:#b7a077; }
.note-section p { color:#aaa49a; line-height:1.55; font-size:13px; }

@media (max-width: 800px) and (orientation: landscape) { .form-grid { grid-template-columns:1fr; } }

/* PWA / event additions */
.brand-mark { border:0; padding:0; color:inherit; background:transparent; text-align:left; cursor:default; }
.brand-mark.unlock-target { cursor:pointer; user-select:none; -webkit-user-select:none; }
.install-pill, .ready-pill {
  position:absolute; z-index:4; height:36px; padding:0 13px; border-radius:18px;
  border:1px solid rgba(255,255,255,.17); background:rgba(0,0,0,.42); color:#fff;
  backdrop-filter:blur(8px); font-size:9px; letter-spacing:.12em; font-weight:800;
}
.install-pill { top:max(30px, env(safe-area-inset-top)); right:max(88px, calc(env(safe-area-inset-right) + 60px)); }
.ready-pill { left:max(6cqw, env(safe-area-inset-left)); bottom:2.2cqh; }
.menu-volume { position:absolute; z-index:4; left:max(6cqw, env(safe-area-inset-left)); bottom:2.2cqh; display:grid; grid-template-columns:24px minmax(120px,190px) 38px; align-items:center; gap:8px; min-height:36px; padding:0 11px; border:1px solid rgba(255,255,255,.17); border-radius:18px; background:rgba(0,0,0,.42); color:#fff; backdrop-filter:blur(8px); }
.menu-volume .volume-icon { font-size:14px; line-height:1; }
.menu-volume input { width:100%; accent-color:#d6c19a; }
.menu-volume > span:last-child { font-size:9px; font-variant-numeric:tabular-nums; text-align:right; opacity:.82; }
.dot { display:inline-block; width:7px; height:7px; border-radius:50%; margin-right:6px; background:#888; box-shadow:0 0 10px rgba(255,255,255,.18); }
.dot.online { background:#c6b07d; }
.dot.offline { background:#7fc78e; }
.install-card p { line-height:1.55; }

.import-progress { width:min(430px,52cqw); height:3px; margin-top:3px; overflow:hidden; border-radius:3px; background:#252525; }
.import-progress i { display:block; height:100%; background:#cbb684; transition:width .08s linear; }
.settings-note { color:#aaa49a; line-height:1.55; font-size:13px; }
.readiness { border-color:#5b4931; background:linear-gradient(180deg,#17130f,#111112); }
.readiness.ready { border-color:#3b6348; background:linear-gradient(180deg,#101811,#111112); }
.readiness-head { display:flex; justify-content:space-between; align-items:center; gap:20px; }
.readiness-head h2 { margin:5px 0 0; }
.status-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; margin-top:18px; }
.status-grid > div, .storage-card > div { padding:12px 14px; border:1px solid #292826; border-radius:7px; background:#0b0b0c; display:grid; gap:5px; }
.status-grid span, .storage-card span { font-size:10px; color:#8f8a82; letter-spacing:.08em; text-transform:uppercase; }
.status-grid b, .storage-card strong { font-size:12px; color:#e9e2d4; letter-spacing:.05em; }
.storage-card { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px; }
.storage-actions { display:flex; gap:10px; margin-top:14px; }

.ready-modal { width:min(560px,92cqw); padding:30px; border:1px solid #443a2b; border-radius:14px; background:#111112; box-shadow:0 30px 90px rgba(0,0,0,.65); }
.ready-modal.all-ready { border-color:#3b6548; }
.ready-modal h2 { margin:8px 0 18px; font-size:29px; letter-spacing:.03em; }
.ready-list { border-top:1px solid #2b2926; }
.ready-list > div { display:flex; align-items:center; justify-content:space-between; gap:20px; min-height:42px; border-bottom:1px solid #242321; font-size:13px; }
.ready-list span { color:#c5beb2; }
.ready-list b { color:#dac493; }
.ready-modal.all-ready .ready-list b { color:#9ed3aa; }
.ready-modal p { color:#9f998f; line-height:1.5; font-size:13px; }

@media (max-width: 900px) {
  .status-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .storage-card { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
.pdf-native { position:absolute; inset:0; width:100%; height:100%; border:0; background:#050506; }
.pdf-swipe-layer { position:absolute; inset:0; z-index:2; background:transparent; touch-action:none; }
.pdf-counter,.pdf-back { z-index:4; }
@media (display-mode: standalone) { .install-pill { display:none!important; } }


/* v2.1 logo + internal PDF viewer */
.hero-logo-stage { width:min(66cqw,980px); height:clamp(85px,17cqh,230px); display:flex; align-items:center; justify-content:flex-start; overflow:visible; }
.hero-logo { display:block; max-width:none; max-height:100%; object-fit:contain; object-position:left center; transform-origin:left center; filter:drop-shadow(0 10px 28px rgba(0,0,0,.4)); }
.logo-controls { margin-top:15px; }
.pdf-loading { color:#a69e92; letter-spacing:.18em; font-size:11px; }
.pdf-nav { position:absolute; z-index:3; top:50%; transform:translateY(-50%); width:50px; height:76px; border:1px solid rgba(255,255,255,.18); border-radius:10px; background:rgba(0,0,0,.42); color:#fff; font-size:34px; backdrop-filter:blur(8px); }
.pdf-prev { left:max(14px,env(safe-area-inset-left)); }
.pdf-next { right:max(14px,env(safe-area-inset-right)); }
.viewer-error-inline { display:grid; place-items:center; gap:10px; text-align:center; padding:30px; color:#fff; }
.viewer-error-inline small { max-width:560px; color:#a8a29a; line-height:1.5; }

@media (max-height: 620px) and (orientation: landscape) {
  .menu-volume { bottom:1.4cqh; }
  .video-bottom-controls { bottom:max(14px, env(safe-area-inset-bottom)); gap:6px; }
}


/* v2.4 cleaner event UI + PDF page transitions */
.device-tools { display:flex; flex-wrap:wrap; gap:10px; margin-top:18px; }
.pdf-page { position:absolute; display:block; max-width:100%; max-height:100%; background:#000; transform:translateX(0); opacity:1; transition:transform .19s ease-out, opacity .19s ease-out; will-change:transform,opacity; }
.pdf-page.pdf-enter-right { transform:translateX(8%); opacity:0; }
.pdf-page.pdf-enter-left { transform:translateX(-8%); opacity:0; }
.pdf-page.pdf-enter-fade { opacity:0; }
.pdf-page.pdf-exit-left { transform:translateX(-8%); opacity:0; }
.pdf-page.pdf-exit-right { transform:translateX(8%); opacity:0; }

/* v2.5 dynamic two-row library */
.hero-copy {
  top: 4.5cqh;
  width: min(92cqw, 1500px);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  max-height: 48cqh;
}
.hero-copy p {
  position: relative;
  margin: 1.4cqh 0 0;
  flex: 0 0 auto;
}
.hero-logo-stage {
  width: 92cqw;
  height: auto;
  min-height: 0;
  display: block;
  overflow: visible;
  line-height: 0;
}
.hero-logo {
  display: block;
  height: auto;
  max-width: 92cqw;
  max-height: none;
  object-fit: contain;
  object-position: left top;
  transform-origin: left top;
}

.library-area {
  position: absolute;
  z-index: 2;
  left: max(6cqw, env(safe-area-inset-left));
  right: max(5cqw, env(safe-area-inset-right));
  bottom: 7.2cqh;
  height: 37cqh;
  display: grid;
  grid-template-rows: minmax(0, 1fr) minmax(0, 1fr);
  gap: 1.25cqh;
}
.library-block {
  min-height: 0;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: .55cqh;
}
.library-title {
  font-size: clamp(9px, .72cqw, 13px);
  letter-spacing: .2em;
  font-weight: 800;
  opacity: .78;
}
.library-row {
  min-height: 0;
  display: flex;
  align-items: stretch;
  gap: .85cqw;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 2px 3px 4px;
  scrollbar-width: none;
  scroll-snap-type: x proximity;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
}
.library-row::-webkit-scrollbar { display: none; }
.library-row .media-card {
  flex: 0 0 min(18.5cqw, 310px);
  min-width: 180px;
  height: 100%;
  min-height: 0;
  scroll-snap-align: start;
  border-radius: 7px;
}
.media-entry { position:relative; flex:0 0 min(18.5cqw,310px); min-width:180px; height:100%; scroll-snap-align:start; }
.media-entry .media-card { width:100%; height:100%; }
.download-link { position:absolute; z-index:5; right:12px; top:12px; display:inline-flex; align-items:center; gap:6px; padding:8px 10px; border:1px solid #ffffff55; border-radius:18px; background:#080809c9; color:#fff; font-size:10px; font-weight:750; letter-spacing:.08em; text-decoration:none; backdrop-filter:blur(8px); }
.download-link:hover { background:#282727; border-color:#e7ddc6; }
.asset-actions .download-link { position:static; border-radius:6px; padding:7px 9px; font-size:9px; }
.file-download-screen { display:grid; place-items:center; }
.file-download-card { width:min(680px,78cqw); min-height:360px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px; padding:44px; text-align:center; border:1px solid #ffffff25; border-radius:14px; background:radial-gradient(circle at 50% 0,#27221a,#101011 65%); }
.file-download-card h1 { margin:0; font:500 42px/1.1 var(--showcase-font,Georgia,serif); }
.file-download-card p { margin:0 0 18px; color:#c8c2b8; }
.file-download-card .file-icon { color:#d8c7a3; font-size:64px; }
.file-download-card .download-link { position:static; padding:13px 22px; border-radius:6px; font-size:12px; }
.library-row .card-label {
  left: 13px;
  bottom: 10px;
  font-size: clamp(12px, 1.05cqw, 19px);
}
.library-row .card-fallback span { font-size: clamp(25px, 2.5cqw, 46px); }
.library-row .not-assigned {
  top: 8px;
  right: 8px;
  padding: 4px 6px;
  font-size: 7px;
}
.empty-row {
  min-width: 100%;
  display: grid;
  place-items: center start;
  color: rgba(255,255,255,.35);
  font-size: 9px;
  letter-spacing: .14em;
  border-top: 1px solid rgba(255,255,255,.08);
}
.menu-volume { bottom: 1.2cqh; }

.section-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 12px;
}
.section-title-row h2 { margin-bottom: 4px; }
.section-title-row .settings-note { margin: 0; }
.slot-top {
  grid-template-columns: 130px minmax(220px,1fr) auto;
  align-items: end;
}
.slot-actions {
  display: flex;
  gap: 6px;
  justify-content: flex-end;
  align-items: center;
}
.slot-actions button:disabled { opacity: .28; pointer-events: none; }

.pdf-title {
  position: absolute;
  z-index: 4;
  top: max(22px, env(safe-area-inset-top));
  left: 50%;
  transform: translateX(-50%);
  font-size: 10px;
  letter-spacing: .18em;
  opacity: .62;
  pointer-events: none;
}

@media (min-width: 1600px) and (max-height: 700px) and (orientation: landscape) {
  .hero-copy { top: 3.2cqh; max-height: 45cqh; }
  .hero-copy p { margin-top: .8cqh; }
  .library-area { bottom: 7.8cqh; height: 39cqh; gap: .8cqh; }
  .library-row .media-card { min-width: 165px; flex-basis: 20cqw; }
  .menu-volume { bottom: .8cqh; }
}

@media (min-width: 1600px) and (max-width: 1800px) and (orientation: landscape) {
  .hero-copy { width: 92cqw; }
  .library-area { left: max(4cqw, env(safe-area-inset-left)); right: max(4cqw, env(safe-area-inset-right)); }
  .library-row .media-card { min-width: 165px; flex-basis: 23cqw; }
  .slot-top { grid-template-columns: 1fr; }
  .slot-actions { justify-content: flex-start; }
}


/* v2.6 cinematic screen transitions */
.screen-fade {
  position:fixed; inset:0; z-index:10000; background:#000; opacity:0; pointer-events:none;
  transition:opacity 320ms ease; will-change:opacity;
}
.screen-fade.is-black { opacity:1; pointer-events:auto; }
.screen-fade.instant { transition:none!important; }


/* v2.7 music controls + carousel edge fades */
.music-controls {
  z-index: 5;
  display: grid;
  grid-template-columns: 34px 34px 20px minmax(105px, 175px) 36px;
  align-items: center;
  gap: 7px;
  min-height: 38px;
  padding: 0 10px;
  border: 1px solid rgba(255,255,255,.17);
  border-radius: 20px;
  background: rgba(0,0,0,.48);
  color: #fff;
  backdrop-filter: blur(9px);
}
.music-action {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(255,255,255,.09);
  color: #fff;
  font-size: 13px;
  line-height: 1;
}
.music-action.restart { font-size: 18px; }
.music-controls .volume-icon { font-size: 13px; text-align: center; }
.music-controls input[type="range"] { width: 100%; accent-color: #d6c19a; }
.music-controls > span:last-child { font-size: 9px; font-variant-numeric: tabular-nums; text-align: right; opacity: .82; }
.menu-music-controls {
  position: absolute;
  left: max(6cqw, env(safe-area-inset-left));
  bottom: 1.2cqh;
}
.document-music-controls {
  position: absolute;
  left: max(24px, env(safe-area-inset-left));
  bottom: max(20px, env(safe-area-inset-bottom));
}

.library-row.fade-right {
  -webkit-mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 52px), transparent 100%);
  mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 52px), transparent 100%);
}
.library-row.fade-left {
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 52px, #000 100%);
  mask-image: linear-gradient(to right, transparent 0, #000 52px, #000 100%);
}
.library-row.fade-both {
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 52px, #000 calc(100% - 52px), transparent 100%);
  mask-image: linear-gradient(to right, transparent 0, #000 52px, #000 calc(100% - 52px), transparent 100%);
}
.library-row.fade-none {
  -webkit-mask-image: none;
  mask-image: none;
}

@media (max-height: 620px) and (orientation: landscape) {
  .menu-music-controls { bottom: .55cqh; }
  .document-music-controls { bottom: max(12px, env(safe-area-inset-bottom)); }
  .music-controls { grid-template-columns: 30px 30px 18px minmax(90px, 145px) 32px; min-height: 34px; gap: 5px; }
  .music-action { width: 27px; height: 27px; }
}

/* v2.7.3 build information */
.version-section { padding-top:18px; padding-bottom:18px; }
.version-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; margin-top:12px; }
.version-grid > div { padding:12px 14px; border:1px solid #292826; border-radius:7px; background:#0b0b0c; display:grid; gap:5px; }
.version-grid span { font-size:10px; color:#8f8a82; letter-spacing:.08em; text-transform:uppercase; }
.version-grid strong { font-size:13px; color:#e9e2d4; letter-spacing:.05em; }
@media (max-width:700px){ .version-grid { grid-template-columns:1fr; } }

@font-face{font-family:PTCustom;src:url('/brand/font.otf')} .web-gate{min-height:100dvh;display:grid;place-items:center;background:linear-gradient(#0008,#000c),url('/brand/background.png') center/cover;color:#eee;font-family:Arial,sans-serif}.web-gate form{width:min(430px,85cqw);text-align:center;padding:36px;background:#08090ad9;border:1px solid #ffffff20;border-radius:4px}.web-gate img{width:100%;margin-bottom:30px}.web-gate h2{font-family:PTCustom,serif;font-size:24px;letter-spacing:2px}.web-gate label{text-align:left;display:block;margin:26px 0 16px}.web-gate input{width:100%;box-sizing:border-box;padding:14px;background:#151515;border:1px solid #555;color:white;margin-top:8px}.web-gate button{width:100%;padding:15px;margin-bottom:16px}.web-gate p{line-height:1.6;color:#b9b9b9}.web-gate small{font-size:10px;letter-spacing:2px}#loginError{color:#ffbbbb}.settings-screen input[type=password]{padding:12px;width:100%;margin:8px 0 16px}.settings-screen{font-family:Arial,sans-serif}

.fullscreen-toggle{position:fixed;top:max(20px,env(safe-area-inset-top));right:76px;z-index:10000;width:40px;height:40px;display:grid;place-items:center;padding:0;border:1px solid #ffffff35;border-radius:50%;background:#0c0c0dc9;color:#eee;font-family:Arial,sans-serif;font-size:25px;cursor:pointer;backdrop-filter:blur(8px)}.fullscreen-toggle:hover{background:#29292a;border-color:#ffffff80}.fullscreen-toggle:focus-visible{outline:2px solid white;outline-offset:4px}.fullscreen-toggle[hidden]{display:none}@media(max-width:600px){.fullscreen-toggle{top:max(14px,env(safe-area-inset-top));right:65px;width:36px;height:36px}}

.pdf-stage.zoom-stage{inset:76px 18px 110px;touch-action:none;user-select:none}.zoom-stage .zoom-page{left:50%;top:50%;max-width:none;max-height:none;transition:none;transform-origin:center;pointer-events:none}.zoom-stage.is-zoomed{cursor:grab}.zoom-stage.is-dragging{cursor:grabbing}.pdf-zoom-controls{position:absolute;bottom:max(64px,env(safe-area-inset-bottom));left:50%;transform:translateX(-50%);z-index:5;display:flex;align-items:center;gap:12px;padding:10px 15px;border:1px solid #ffffff25;border-radius:24px;background:#131315e8;color:#eee;font:12px Arial,sans-serif;white-space:nowrap}.pdf-zoom-controls input{width:150px;accent-color:#bfb69c}.pdf-zoom-controls output{width:38px;text-align:right}.pdf-zoom-controls button{padding:0;width:28px;height:28px;border:0;background:transparent;color:white;font-size:21px}.pdf-zoom-controls input:focus-visible,.pdf-zoom-controls button:focus-visible{outline:2px solid white;outline-offset:3px}@media(max-width:600px){.pdf-zoom-controls{gap:8px;padding:8px 10px}.pdf-zoom-controls input{width:105px}.pdf-stage.zoom-stage{inset:65px 8px 120px}}

/* Continuous rows retain native touch scrolling and precise mouse edge movement. */
.library-row.is-looping{scroll-snap-type:none;scroll-behavior:auto}
.library-row.is-looping .media-entry{scroll-snap-align:none}
.download-link[aria-busy="true"]{cursor:progress;opacity:.75}
.workbook-screen{display:flex;flex-direction:column;background:#151619;font-family:Arial,sans-serif}
.workbook-toolbar{display:flex;align-items:center;gap:18px;padding:18px 76px 18px 22px;flex:0 0 auto;border-bottom:1px solid #ffffff20;background:#141518;color:#eee}
.workbook-toolbar button{white-space:nowrap;font:12px Arial,sans-serif}
.workbook-heading{flex:1;min-width:0}.workbook-heading h1{margin:0 0 5px;font:600 19px Arial,sans-serif;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.workbook-heading span{font-size:10px;color:#aaa;letter-spacing:.1em}
.workbook-toolbar .download-link{position:static;white-space:nowrap;flex-shrink:0}
.workbook-zoom{display:flex;align-items:center;gap:8px;font-size:10px;letter-spacing:.08em}.workbook-zoom input{width:120px;accent-color:#bfb69c}.workbook-zoom output{width:40px;text-align:right}
.workbook-viewport{flex:1;min-height:0;overflow:auto;padding:16px;background:#272a2e;cursor:grab;overscroll-behavior:contain;touch-action:pan-x pan-y;scrollbar-color:#696d74 #272a2e;scrollbar-width:thin}
.workbook-viewport.is-dragging{cursor:grabbing}.workbook-viewport:focus-visible{outline:2px solid #bfb69c;outline-offset:-2px}
.workbook-surface{position:relative;background:white;box-shadow:0 4px 24px #0005}
.workbook-table{position:absolute;left:0;top:0;table-layout:fixed;border-collapse:collapse;background:white;color:#18232e;transform-origin:top left;font-family:Arial,sans-serif;font-size:13px;user-select:none}
.workbook-table td{box-sizing:border-box;padding:2px 4px;overflow:hidden;line-height:1.2}
.workbook-message{display:grid;place-items:center;min-height:200px;padding:35px;text-align:center;color:#ddd;font-size:15px;line-height:1.5}
.workbook-footer{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:10px 20px;background:#141518;border-top:1px solid #ffffff20;flex:0 0 auto}
.workbook-tabs{display:flex;gap:6px;overflow-x:auto;min-width:0;padding:3px;scrollbar-width:thin}.workbook-tabs button{flex-shrink:0;background:#25262a;color:#bbb;border:1px solid #ffffff15;border-radius:6px;padding:11px 18px;font:13px Arial,sans-serif}.workbook-tabs button[aria-selected="true"]{background:#d4c7aa;color:#171719;border-color:#d4c7aa}.workbook-tabs button:focus-visible{outline:2px solid white;outline-offset:2px}
.workbook-footer .workbook-music-controls{position:static;transform:none;flex-shrink:0;margin:0;padding:6px 10px}.workbook-music-controls input{width:85px}
.workbook-notice{padding:8px 20px;background:#3d3221;color:#f0dfbc;font:12px Arial,sans-serif}