/* Euromeet 2026 — Belgium (kiosk) */

:root {
     --radius: 18px;
     --radius2: 26px;
     --shadow: 0 18px 60px rgba(0, 0, 0, .35);
     --shadow2: 0 10px 26px rgba(0, 0, 0, .25);
     --max: 90%;

     --bg: #050b13;
     --panel: rgba(255, 255, 255, .06);
     --panel2: rgba(255, 255, 255, .09);
     --line: rgba(255, 255, 255, .12);
     --text: #e9eef5;
     --muted: #a7b4c2;
     --accent1: #2a8db7;
     --accent2: #49c0d9;
     --accent3: #4b82c5;
     --accent4: #2f5f9b;
     --accent5: #4a8f79;
     --accent6: #2f6f63;
     --ok: #22c55e;
     --err: #ef4444;

     --watermark-opacity: .10;
}

:root[data-theme="ocean"] {
     --bg: rgba(238, 251, 255, .1);
     --panel: rgba(0, 0, 0, .2);
     --panel2: rgba(0, 0, 0, .01);
     --line: rgba(0, 0, 0, .10);
     --text: #04161f;
     --muted: #2c4a56;
     --accent1: #0b6ea3;
     --accent2: #2ea7c4;
     --accent3: #6e8fbe;
     --accent4: #4e6f9f;
     --accent5: #5a907f;
     --accent6: #3f7467;

     --watermark-opacity: .12;
}

* {
     box-sizing: border-box
}

html,
body {
     height: 100%
}

body {
     margin: 0;
     color: var(--text);
     background:
          radial-gradient(900px 500px at 20% 0%, color-mix(in srgb, var(--accent2) 35%, transparent), transparent 55%),
          radial-gradient(900px 500px at 80% 0%, color-mix(in srgb, var(--accent1) 28%, transparent), transparent 55%),
          linear-gradient(180deg, var(--bg), color-mix(in srgb, var(--bg) 80%, #000) 70%);
     font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Inter, Roboto, Arial, sans-serif;
     -webkit-font-smoothing: antialiased;
     text-rendering: geometricPrecision;
     overflow-x: hidden;
}

:root[data-theme="ocean"] body {
     background:
          radial-gradient(900px 500px at 20% 0%, color-mix(in srgb, var(--accent2) 35%, transparent), transparent 55%),
          radial-gradient(900px 500px at 80% 0%, color-mix(in srgb, var(--accent1) 28%, transparent), transparent 55%),
          linear-gradient(180deg, var(--bg), color-mix(in srgb, var(--bg) 80%, #000) 70%);
     background-repeat: no-repeat;
     background-size: 100% 100%, 100% 100%, 100% 100%;
     background-attachment: fixed;
     background-position: top center;
}

a {
     color: inherit;
     text-decoration: none
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
     outline: 2px solid color-mix(in srgb, var(--accent1) 70%, #fff 30%);
     outline-offset: 2px
}

img {
     max-width: 100%;
     height: auto
}

.bg-watermark {
     position: fixed;
     inset: 0;
     z-index: -1;
     background-position: center;
     background-size: cover;
     background-repeat: no-repeat;
     filter: blur(2px) saturate(.9);
     opacity: var(--watermark-opacity);
     transform: scale(1.05);
}

/* Top bar */
.topbar {
     position: sticky;
     top: 0;
     z-index: 5;
     display: flex;
     align-items: center;
     justify-content: space-between;
     gap: 14px;
     flex-wrap: wrap;
     padding: 10px 14px;
     background: color-mix(in srgb, var(--bg) 70%, transparent);
     backdrop-filter: blur(10px);
     border-bottom: 1px solid var(--line);
}

.brand {
     display: flex;
     align-items: center;
     gap: 10px
}

.brand img {
     width: 38px;
     height: 38px
}

.brandtxt {
     line-height: 1.1
}

.brandtitle {
     font-weight: 900;
     letter-spacing: .2px
}

.brandsub {
     font-size: 12px;
     color: var(--muted)
}

.nav {
     display: flex;
     gap: 10px;
     flex-wrap: wrap;
     align-items: center;
     min-width: 0
}

.actions {
     display: flex;
     gap: 10px;
     align-items: center;
     flex-wrap: wrap;
     justify-content: flex-end;
     min-width: 0
}

.desktop-only {
     display: inline-flex
}

.navbtn {
     display: inline-flex;
     align-items: center;
     justify-content: center;
     padding: 10px 14px;
     border-radius: 999px;
     border: 1px solid var(--line);
     background: color-mix(in srgb, var(--panel) 90%, transparent);
     font-weight: 800;
     touch-action: manipulation;
     white-space: nowrap;
}

.navbtn:hover {
     transform: translateY(-1px)
}

.navbtn.active {
     outline: 2px solid color-mix(in srgb, var(--accent1) 55%, transparent)
}

.navbtn.primary {
     background: linear-gradient(90deg, var(--accent2), var(--accent1));
     border-color: transparent;
     color: #fff
}

.navbtn.ghost {
     background: transparent
}

.iconbtn {
     width: 44px;
     height: 44px;
     border-radius: 999px;
     border: 1px solid var(--line);
     background: color-mix(in srgb, var(--panel) 90%, transparent);
     display: grid;
     place-items: center;
     cursor: pointer;
     touch-action: manipulation;
}

.menubtn {
     display: none
}

.menubars {
     position: relative;
     width: 18px;
     height: 2px;
     background: var(--text);
     border-radius: 2px;
     display: inline-block
}

.menubars::before,
.menubars::after {
     content: "";
     position: absolute;
     left: 0;
     width: 18px;
     height: 2px;
     background: var(--text);
     border-radius: 2px
}

.menubars::before {
     top: -6px
}

.menubars::after {
     top: 6px
}

.nav-mobile-extras {
     display: none
}

.iconbtn .dot {
     width: 18px;
     height: 18px;
     border-radius: 999px;
     background: radial-gradient(circle at 30% 30%, #fff, color-mix(in srgb, var(--accent1) 70%, #000));
     box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent1) 20%, transparent);
}

:root[data-theme="ocean"] .iconbtn .dot {
     background: radial-gradient(circle at 30% 30%, #fff, color-mix(in srgb, var(--accent1) 70%, #003));
}

.userpill {
     max-width: 340px;
     border: 1px solid var(--line);
     border-radius: 999px;
     padding: 8px 12px;
     background: color-mix(in srgb, var(--panel) 90%, transparent);
     display: flex;
     flex-direction: column;
     gap: 2px;
}

.userpill .u1 {
     font-weight: 900;
     letter-spacing: .5px
}

.userpill .u2 {
     font-size: 12px;
     color: var(--muted);
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis
}

/* Main stage */
.stage {
     max-width: var(--max);
     margin: 0 auto;
     padding: 18px 14px 60px
}

@media (min-width: 920px) {
     .stage {
          padding: 22px 18px 70px
     }
}

.toast {
     margin: 0 auto 14px;
     max-width: var(--max);
     border: 1px solid var(--line);
     border-radius: var(--radius);
     padding: 12px 14px;
     background: color-mix(in srgb, var(--panel2) 90%, transparent);
     font-weight: 800;
}

.toast.ok {
     border-color: color-mix(in srgb, var(--ok) 60%, var(--line));
}

.toast.err {
     border-color: color-mix(in srgb, var(--err) 60%, var(--line));
}

.panel {
     display: flex;
     justify-content: center;
     align-items: flex-start
}

.card {
     width: 100%;
     border: 1px solid var(--line);
     border-radius: var(--radius2);
     background: color-mix(in srgb, var(--panel) 92%, transparent);
     box-shadow: var(--shadow);
     overflow: hidden;
}

.cardhd {
     padding: 18px 18px 16px;
     border-bottom: 1px solid var(--line)
}

.kicker {
     font-weight: 900;
     color: var(--muted);
     text-transform: uppercase;
     letter-spacing: .12em;
     font-size: 12px
}

.cardhd h1 {
     margin: 8px 0 0;
     font-size: clamp(28px, 5vw, 38px);
     line-height: 1.05
}

.cardhd p {
     margin: 10px 0 0
}

.muted {
     color: var(--muted)
}

.kiosk {
     max-width: 720px
}

.bigtitle {
     font-size: 56px
}

.kioskactions {
     display: grid;
     gap: 14px;
     padding: 18px
}

@media (min-width: 640px) {
     .kioskactions {
          grid-template-columns: 1fr 1fr
     }
}

.btn {
     display: inline-flex;
     align-items: center;
     justify-content: center;
     gap: 10px;
     padding: 12px 14px;
     border-radius: 14px;
     border: 1px solid var(--line);
     background: color-mix(in srgb, var(--panel2) 92%, transparent);
     font-weight: 900;
     cursor: pointer;
     user-select: none;
     touch-action: manipulation;
}

.btn:hover {
     transform: translateY(-1px)
}

.btn.primary {
     background: linear-gradient(90deg, var(--accent2) 20%, var(--accent1) 80%);
     border-color: transparent;
     color: #fff
}

.btn.photo {
     background: linear-gradient(90deg, var(--accent3) 20%, var(--accent4) 80%);
     border-color: transparent;
     color: #fff
}

.btn.detail {
     background: linear-gradient(90deg, var(--accent5), var(--accent6));
     border-color: transparent;
     color: #fff
}

.btn.ghost {
     background: transparent
}

.btn.big {
     padding: 18px 18px;
     font-size: 20px;
     border-radius: 18px
}

.btn[aria-disabled="true"] {
     pointer-events: none;
     opacity: .55;
     cursor: not-allowed
}

.hint {
     padding: 0 18px 18px;
     color: var(--muted)
}

.chip {
     display: inline-flex;
     padding: 4px 10px;
     border-radius: 999px;
     border: 1px solid var(--line);
     background: color-mix(in srgb, var(--panel2) 92%, transparent);
     font-weight: 800;
     font-size: 12px
}

.form {
     padding: 18px;
     display: grid;
     gap: 12px
}

.form label {
     display: grid;
     gap: 6px
}

.form label span {
     font-weight: 900;
     color: var(--muted);
     font-size: 12px;
     letter-spacing: .06em;
     text-transform: uppercase
}

.form input,
.form select,
.form textarea {
     padding: 12px 12px;
     border-radius: 14px;
     border: 1px solid var(--line);
     background: color-mix(in srgb, var(--bg) 70%, transparent);
     color: var(--text);
     font-size: 16px;
}

:root[data-theme="ocean"] .form input,
:root[data-theme="ocean"] .form select,
:root[data-theme="ocean"] .form textarea {
     background: rgba(255, 255, 255, .65)
}

.form textarea {
     resize: vertical
}

.form .check {
     display: flex;
     align-items: center;
     gap: 10px
}

.form .check input {
     width: 18px;
     height: 18px
}

.rowwrap {
     display: flex;
     align-items: center;
     gap: 12px;
     flex-wrap: wrap
}

label.inline {
     display: flex;
     align-items: center;
     gap: 8px
}

label.inline span {
     font-weight: 900;
     color: var(--muted)
}

label.inline select {
     min-width: 220px;
     max-width: 100%
}

/* Segmented control */
.seg {
     display: flex;
     gap: 8px;
     flex-wrap: wrap
}

.segbtn {
     display: inline-flex;
     align-items: center;
     justify-content: center;
     padding: 10px 14px;
     border-radius: 999px;
     border: 1px solid var(--line);
     background: color-mix(in srgb, var(--panel2) 92%, transparent);
     font-weight: 900;
}

.segbtn.on {
     background: linear-gradient(90deg, var(--accent2), var(--accent1));
     border-color: transparent;
     color: #fff
}

/* Program */
.programbody {
     padding: 16px 14px 18px;
     content-visibility: auto;
     contain-intrinsic-size: 1px 900px
}

.programbody.weekend-view {
     display: grid;
     gap: 16px
}

.dayblock {
     margin: 12px 0 22px
}

.daytitle {
     font-weight: 1000;
     font-size: 22px;
     margin: 0 4px 12px
}

.table {
     display: grid;
     gap: 10px
}

.programbody.weekend-view .dayblock {
     margin: 0;
     border: 1px solid var(--line);
     border-radius: var(--radius2);
     padding: 14px;
     background: color-mix(in srgb, var(--panel) 92%, transparent);
}

.programbody.weekend-view .daytitle {
     margin: 0 2px 12px;
     padding-bottom: 10px;
     border-bottom: 1px solid var(--line);
}

.row {
     display: grid;
     grid-template-columns: 120px minmax(0, 1fr);
     grid-template-areas:
          "time what"
          "actions actions";
     gap: 12px;
     padding: 12px 12px;
     border: 1px solid var(--line);
     border-radius: var(--radius);
     background: color-mix(in srgb, var(--panel2) 92%, transparent);
}

.row--bg-green {
     background: linear-gradient(rgba(34, 197, 94, .16), rgba(34, 197, 94, .16)),
          color-mix(in srgb, var(--panel2) 92%, transparent);
     border-color: color-mix(in srgb, #22c55e 34%, var(--line));
}

.row--bg-blue {
     background: linear-gradient(rgba(59, 130, 246, .16), rgba(59, 130, 246, .16)),
          color-mix(in srgb, var(--panel2) 92%, transparent);
     border-color: color-mix(in srgb, #3b82f6 34%, var(--line));
}

@media (max-width: 720px) {
     .row {
          grid-template-columns: 96px minmax(0, 1fr);
     }

     .row .actions {
          grid-column: 1 / -1;
          justify-content: flex-start
     }
}

.time {
     display: flex;
     align-items: center;
     gap: 10px;
     flex-wrap: wrap;
     grid-area: time
}

.time .t1,
.time .t2 {
     display: inline-flex;
     align-items: baseline;
     gap: 6px
}

.time .tl {
     font-size: 11px;
     font-weight: 900;
     color: var(--muted);
     text-transform: uppercase;
     letter-spacing: .08em
}

.time .tv {
     font-weight: 1000;
     font-size: 16px
}

.time .t2 .tv {
     color: var(--muted)
}

.what .w1 {
     font-weight: 1000;
     font-size: 18px;
     display: block;
     overflow-wrap: break-word;
     word-break: normal
}

.what .w2 {
     margin-top: 4px;
     color: var(--muted);
     font-weight: 800;
     overflow-wrap: break-word
}

.what {
     grid-area: what;
     min-width: 0;
}

.row .actions {
     display: flex;
     gap: 10px;
     align-items: center;
     flex-wrap: wrap;
     justify-content: flex-start;
     grid-area: actions
}

@media (min-width: 980px) {
     .programbody.weekend-view {
          grid-template-columns: repeat(auto-fit, minmax(420px, 1fr));
          align-items: start
     }
}

/* Modal */
.modal {
     position: fixed;
     inset: 0;
     display: none;
     z-index: 50
}

.modal[aria-hidden="false"] {
     display: block
}

.modalbg {
     position: absolute;
     inset: 0;
     background: rgba(0, 0, 0, .74)
}

:root[data-theme="ocean"] .modalbg {
     background: rgba(0, 0, 0, .48)
}

.modalcard {
     position: absolute;
     left: 50%;
     top: 50%;
     transform: translate(-50%, -50%);
     width: min(780px, calc(100vw - 24px));
     max-height: calc(100vh - 24px);
     overflow: auto;
     border-radius: var(--radius2);
     border: 1px solid var(--line);
     background: color-mix(in srgb, var(--bg) 90%, #000 10%);
     box-shadow: var(--shadow);
     backdrop-filter: blur(8px);
}

:root[data-theme="ocean"] .modalcard {
     background: color-mix(in srgb, #fff 94%, #e8f6ff 6%);
}

.modalcard .kicker {
     margin-bottom: 8px;
     color: color-mix(in srgb, var(--text) 72%, var(--muted));
     letter-spacing: .14em;
}

.modalhd {
     display: flex;
     align-items: flex-start;
     justify-content: space-between;
     gap: 14px;
     padding: 18px 20px;
     border-bottom: 1px solid var(--line)
}

.mtitle {
     font-weight: 1000;
     font-size: clamp(23px, 2.5vw, 30px);
     margin-top: 6px
}

#mTime {
     font-size: 15px;
     line-height: 1.45;
     color: color-mix(in srgb, var(--text) 75%, var(--muted));
}

.modalbody {
     padding: 18px 20px;
     display: grid;
     gap: 16px
}

.block {
     border: 1px solid var(--line);
     border-radius: var(--radius);
     padding: 14px 14px;
     background: color-mix(in srgb, var(--bg) 82%, var(--panel2) 18%);
}

:root[data-theme="ocean"] .block {
     background: color-mix(in srgb, #fff 92%, #eaf5fb 8%);
}

.mtext {
     white-space: pre-wrap;
     line-height: 1.62;
     font-weight: 600;
     font-size: 16px;
     color: var(--text);
     overflow-wrap: anywhere;
}

.modalft {
     display: flex;
     justify-content: flex-end;
     gap: 10px;
     padding: 16px 20px;
     border-top: 1px solid var(--line);
     flex-wrap: wrap
}

.mapbtn {
     margin-top: 10px
}

@media (min-width: 900px) {
     .modalbody {
          grid-template-columns: 1fr 1fr
     }

     .modalbody .block:first-child {
          grid-column: 1 / -1
     }
}

@media (max-width: 640px) {
     .modalcard {
          width: calc(100vw - 16px);
          max-height: calc(100vh - 16px);
     }

     .modalhd {
          padding: 16px 14px;
     }

     .modalbody {
          padding: 14px;
          gap: 12px;
     }

     .block {
          padding: 12px;
     }

     .mtext {
          font-size: 15px;
          line-height: 1.55;
     }

     .modalft {
          padding: 14px;
          justify-content: stretch;
     }
}

/* Photos list */
.list {
     padding: 14px 14px 18px;
     display: grid;
     gap: 10px;
     content-visibility: auto;
     contain-intrinsic-size: 1px 720px
}

.item {
     display: flex;
     align-items: center;
     justify-content: space-between;
     gap: 12px;
     padding: 12px 12px;
     border: 1px solid var(--line);
     border-radius: var(--radius);
     background: color-mix(in srgb, var(--panel2) 92%, transparent);
}

.item.disabled {
     opacity: .55
}

.it-main {
     display: flex;
     flex-direction: column;
     gap: 6px
}

.it-title {
     font-weight: 1000;
     font-size: 18px
}

.it-meta {
     display: flex;
     gap: 10px;
     flex-wrap: wrap;
     align-items: center
}

.it-side {
     display: flex;
     gap: 12px;
     align-items: center
}

.count {
     font-weight: 1000;
     min-width: 56px;
     text-align: right
}

.empty {
     padding: 18px;
     color: var(--muted);
     font-weight: 800
}

/* Viewer */
.viewer {
     background: var(--bg)
}

.viewer-stage {
     position: fixed;
     inset: 0;
     display: flex;
     align-items: center;
     justify-content: center;
     padding: 12px;
     padding-top: calc(132px + env(safe-area-inset-top));
     padding-bottom: calc(170px + env(safe-area-inset-bottom));
}

.viewer-img {
     max-width: 100%;
     max-height: min(100%, calc(100vh - 350px));
     border-radius: var(--radius2);
     border: 1px solid var(--line);
     box-shadow: var(--shadow);
     background: color-mix(in srgb, var(--panel2) 92%, transparent);
     object-fit: contain
}

.viewer-top {
     position: fixed;
     top: 12px;
     left: 12px;
     right: 12px;
     display: grid;
     grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
     align-items: start;
     gap: 12px;
     padding: max(0px, env(safe-area-inset-top)) 0 0;
     z-index: 16;
}

.viewer-left {
     min-width: 0;
     display: flex;
     align-items: center;
     gap: 10px
}

.viewer-brand {
     display: inline-flex;
     align-items: center;
     gap: 8px;
     padding: 10px 12px;
     border-radius: var(--radius);
     border: 1px solid var(--line);
     background: color-mix(in srgb, var(--panel) 92%, transparent);
     font-weight: 1000;
     white-space: nowrap
}

.viewer-brand img {
     width: 28px;
     height: 28px;
     object-fit: contain
}

.viewer-center {
     justify-self: center;
     align-self: center
}

.viewer-right {
     justify-self: end;
     display: grid;
     gap: 8px;
     justify-items: end;
     min-width: 0;
}

.viewer-menu-panel {
     display: contents;
}

.viewer-title-menu {
     display: none;
}

.viewer-top .viewer-menu-toggle {
     display: none
}

.viewer-top.mobile-menu {
     grid-template-columns: minmax(0, 1fr) auto;
     align-items: start;
}

.viewer-top.mobile-menu .viewer-left {
     align-items: stretch;
     flex-direction: column;
     gap: 8px;
}

.viewer-top.mobile-menu .viewer-brand {
     align-self: flex-start;
}

.viewer-top.mobile-menu .viewer-left .viewer-title {
     display: none;
}

.viewer-top.mobile-menu .viewer-menu-panel {
     display: none;
}

.viewer-top.mobile-menu .viewer-menu-toggle {
     display: inline-grid;
     align-self: start;
}

.viewer-top.mobile-menu.menu-open .viewer-menu-panel {
     display: grid;
     grid-column: 1 / -1;
     border-top: 2px solid color-mix(in srgb, var(--accent1) 68%, #fff 32%);
     border-radius: 12px;
     background: #061222;
     box-shadow: 0 24px 52px rgba(0, 0, 0, .58);
     padding: 10px;
     gap: 8px;
}

.viewer-top.mobile-menu.menu-open .viewer-center {
     display: block;
}

.viewer-top.mobile-menu.menu-open .viewer-right {
     display: grid;
     gap: 8px;
}

.viewer-top.mobile-menu.menu-open .viewer-center,
.viewer-top.mobile-menu.menu-open .viewer-right {
     justify-self: stretch;
}

.viewer-top.mobile-menu.menu-open .viewer-right {
     justify-items: stretch;
}

.viewer-top.mobile-menu.menu-open .viewer-title-menu {
     display: block;
     max-width: none;
}

:root[data-theme="ocean"] .viewer-top.mobile-menu.menu-open .viewer-menu-panel {
     background: #f4fbff;
}

.viewer-top.mobile-menu.menu-open .viewer-nav {
     width: 100%;
     display: grid;
     grid-template-columns: repeat(3, minmax(0, 1fr));
}

.viewer-top.mobile-menu.menu-open .viewer-nav .btn {
     width: 100%;
}

.viewer-top.mobile-menu.menu-open .viewer-modes {
     width: 100%;
     display: grid;
     grid-template-columns: repeat(3, minmax(0, 1fr));
     gap: 8px;
}

.viewer-top.mobile-menu.menu-open .viewer-mode-btn {
     width: 100%;
}

.viewer-top.mobile-menu.menu-open .viewer-actions {
     width: 100%;
     display: grid;
     grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
     gap: 8px;
}

.viewer-top.mobile-menu.menu-open .viewer-actions .btn {
     width: 100%;
}

.viewer-title {
     min-width: 0;
     padding: 10px 12px;
     border-radius: var(--radius);
     border: 1px solid var(--line);
     background: color-mix(in srgb, var(--panel) 92%, transparent);
     max-width: min(58vw, 680px)
}

.viewer-title .vt {
     font-weight: 1000;
     font-size: 16px;
     margin-top: 6px;
     word-break: break-word
}

.viewer-title .vm {
     color: var(--muted);
     font-weight: 800;
     margin-top: 6px
}

.viewer-actions {
     display: flex;
     gap: 10px;
     align-items: center;
     justify-content: flex-end;
     min-width: 0
}

.viewer-modes {
     display: flex;
     align-items: center;
     gap: 8px;
     flex-wrap: wrap
}

.viewer-mode-btn {
     padding: 10px 12px;
     font-size: 13px
}

.viewer-mode-btn.is-active {
     background: linear-gradient(90deg, var(--accent2), var(--accent1));
     border-color: transparent;
     color: #fff
}

.viewer-nav {
     display: flex;
     gap: 10px;
     align-items: center
}

.viewer-strip {
     position: fixed;
     left: 12px;
     right: 12px;
     bottom: calc(12px + env(safe-area-inset-bottom));
     padding: 10px;
     border: 1px solid var(--line);
     border-radius: var(--radius);
     background: color-mix(in srgb, var(--panel) 96%, transparent);
     backdrop-filter: blur(8px);
     z-index: 11;
}

.viewer-thumbs {
     display: flex;
     gap: 12px;
     overflow-x: auto;
     -webkit-overflow-scrolling: touch;
     scroll-snap-type: x proximity;
}

.viewer-thumb {
     flex: 0 0 min(220px, 56vw);
     display: grid;
     gap: 8px;
     padding: 8px;
     border: 1px solid var(--line);
     border-radius: 12px;
     background: color-mix(in srgb, var(--panel2) 92%, transparent);
     scroll-snap-align: center;
}

.viewer-thumb.active {
     border-color: color-mix(in srgb, var(--accent1) 58%, var(--line));
     outline: 2px solid color-mix(in srgb, var(--accent1) 30%, transparent);
}

.viewer-thumb-main {
     display: grid;
     gap: 8px;
     border: 0;
     padding: 0;
     text-align: left;
     background: transparent;
     color: inherit;
     cursor: pointer;
}

.viewer-thumb-img {
     width: 100%;
     aspect-ratio: 16 / 10;
     border-radius: 10px;
     border: 1px solid var(--line);
     background: color-mix(in srgb, var(--panel2) 92%, transparent);
     object-fit: cover;
}

.viewer-thumb-name {
     font-size: 12px;
     font-weight: 800;
     color: var(--muted);
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
}

.viewer-thumb-dl {
     display: inline-flex;
     align-items: center;
     justify-content: center;
     padding: 8px 10px;
     border-radius: 10px;
     border: 1px solid var(--line);
     background: color-mix(in srgb, var(--panel2) 92%, transparent);
     font-size: 13px;
     font-weight: 900;
}

.viewer-overview {
     width: 100%;
     max-width: min(1260px, 100%);
     margin: 0 auto;
     border: 1px solid var(--line);
     border-radius: var(--radius);
     background: color-mix(in srgb, var(--panel) 96%, transparent);
     padding: 10px;
}

.viewer-overview-grid {
     display: grid;
     gap: 12px;
     grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
}

.viewer-thumb-overview {
     min-width: 0;
     flex: 0 0 auto;
     scroll-snap-align: none;
}

.viewer-thumb-overview .viewer-thumb-img {
     aspect-ratio: 4 / 3;
}

.viewer.viewer-mode-full .viewer-strip,
.viewer.viewer-mode-full .viewer-overview,
.viewer.viewer-mode-banner .viewer-overview,
.viewer.viewer-mode-gallery .viewer-strip {
     display: none;
}

.viewer.viewer-mode-full .viewer-stage {
     padding-bottom: calc(12px + env(safe-area-inset-bottom));
}

.viewer.viewer-mode-full .viewer-img {
     max-height: min(100%, calc(100vh - 220px));
}

.viewer.viewer-mode-gallery .viewer-stage {
     display: block;
     overflow-y: auto;
     padding-top: calc(164px + env(safe-area-inset-top));
     padding-bottom: calc(12px + env(safe-area-inset-bottom));
}

.viewer.viewer-mode-gallery .viewer-img {
     display: none;
}

/* Admin */
.adminsplit {
     display: grid;
     gap: 16px;
     padding: 14px;
     content-visibility: auto;
     contain-intrinsic-size: 1px 1100px
}

@media (min-width: 980px) {
     .adminsplit {
          grid-template-columns: 420px 1fr
     }
}

.sectiontitle {
     font-weight: 1000;
     margin: 0 0 10px;
     font-size: 18px
}

.tablemini {
     border: 1px solid var(--line);
     border-radius: var(--radius);
     overflow: auto
}

.thead,
.trow {
     display: grid;
     grid-template-columns: 1fr 140px 70px 92px;
     gap: 10px;
     align-items: center;
     padding: 10px 12px;
     min-width: 560px
}

.thead {
     background: color-mix(in srgb, var(--panel2) 92%, transparent);
     font-weight: 1000;
     color: var(--muted)
}

.trow {
     border-top: 1px solid var(--line)
}

.trow form {
     margin: 0
}

.activitylist {
     display: grid;
     gap: 10px;
     content-visibility: auto;
     contain-intrinsic-size: 1px 900px
}

.actitem {
     border: 1px solid var(--line);
     border-radius: var(--radius);
     overflow: hidden;
     background: color-mix(in srgb, var(--panel2) 92%, transparent)
}

.actitem summary {
     padding: 12px 12px;
     cursor: pointer;
     display: flex;
     gap: 10px;
     align-items: center;
     flex-wrap: wrap
}

.sumtitle {
     font-weight: 1000;
     font-size: 16px
}

.inscribe-wrap {
     padding: 14px;
}

.inscribe-head {
     display: flex;
     align-items: flex-start;
     justify-content: space-between;
     gap: 12px;
     flex-wrap: wrap;
}

.inscribe-head .btn {
     align-self: flex-start;
}

.inscribe-agenda {
     display: grid;
     gap: 12px;
     content-visibility: auto;
     contain-intrinsic-size: 1px 700px;
}

.agenda-day {
     border: 1px solid var(--line);
     border-radius: var(--radius);
     overflow: hidden;
     background: color-mix(in srgb, var(--panel2) 92%, transparent);
}

.agenda-day-head {
     display: flex;
     justify-content: space-between;
     align-items: center;
     gap: 10px;
     padding: 10px 12px;
     border-bottom: 1px solid var(--line);
     background: color-mix(in srgb, var(--panel) 88%, transparent);
}

.agenda-day-date {
     font-weight: 1000;
}

.agenda-day-count {
     color: var(--muted);
     font-size: 12px;
     font-weight: 900;
     text-transform: uppercase;
     letter-spacing: .06em;
}

.agenda-day-list {
     display: grid;
}

.agenda-item {
     display: grid;
     grid-template-columns: 92px 1fr auto;
     gap: 12px;
     align-items: center;
     padding: 12px;
}

.agenda-item+.agenda-item {
     border-top: 1px solid var(--line);
}

.agenda-item.is-current {
     background: color-mix(in srgb, var(--ok) 16%, transparent);
}

.agenda-item.is-full {
     opacity: .75;
}

.agenda-time {
     display: grid;
     gap: 4px;
}

.agenda-time-main {
     font-weight: 1000;
     font-size: 17px;
     line-height: 1;
}

.agenda-time-sub {
     color: var(--muted);
     font-size: 12px;
     font-weight: 900;
}

.agenda-content {
     display: grid;
     gap: 4px;
}

.agenda-title {
     font-weight: 900;
     font-size: 15px;
}

.agenda-meta {
     color: var(--muted);
     font-size: 13px;
}

.agenda-action form {
     margin: 0;
}

.inscribe-booking {
     margin-top: 14px;
     border: 1px solid var(--line);
     border-radius: var(--radius);
     padding: 12px;
     background: color-mix(in srgb, var(--panel2) 92%, transparent);
     display: flex;
     flex-wrap: wrap;
     gap: 12px;
     justify-content: space-between;
     align-items: center;
}

.inscribe-slot {
     padding: 12px;
}

.inscribe-slot-meta {
     display: flex;
     flex-wrap: wrap;
     gap: 8px;
     margin-bottom: 10px;
}

@media (max-width: 860px) {
     .agenda-item {
          grid-template-columns: 1fr;
          gap: 10px;
     }

     .agenda-time {
          display: flex;
          align-items: baseline;
          gap: 8px;
     }

     .agenda-action .btn {
          width: 100%;
     }
}

@media (prefers-reduced-motion: reduce) {
     * {
          transition: none !important;
          animation: none !important
     }
}

@media (max-width: 1024px) {
     .topbar {
          gap: 10px
     }

     .nav {
          order: 3;
          width: 100%;
          flex-wrap: nowrap;
          overflow-x: auto;
          padding-bottom: 2px
     }

     .actions {
          margin-left: auto
     }

     .userpill {
          max-width: 260px
     }
}

@media (max-width: 1200px),
(hover: none) and (pointer: coarse) {
     .topbar {
          padding: 10px 10px;
          flex-wrap: nowrap;
          align-items: center
     }

     .menubtn {
          display: inline-grid
     }

     .nav {
          display: none
     }

     .nav.open {
          display: grid;
          position: absolute;
          left: 0;
          right: 0;
          top: calc(100% + 1px);
          width: auto;
          transform: none;
          padding: 10px 10px 12px;
          gap: 8px;
          border-top: 2px solid color-mix(in srgb, var(--accent1) 68%, #fff 32%);
          border-bottom: 0;
          border-left: 0;
          border-right: 0;
          border-radius: 0;
          background: #061222;
          box-shadow: 0 24px 52px rgba(0, 0, 0, .58);
          z-index: 25;
          max-height: calc(100vh - 120px);
          overflow: auto
     }

     :root[data-theme="ocean"] .nav.open {
          background: #f4fbff
     }

     .nav.open .navbtn {
          width: 100%;
          justify-content: flex-start;
          border-radius: 12px
     }

     .nav-mobile-extras {
          display: grid;
          gap: 8px;
          margin-top: 4px;
          padding-top: 8px;
          border-top: 1px solid color-mix(in srgb, var(--accent1) 42%, var(--line))
     }

     .brandtxt .brandsub {
          display: none
     }

     .actions {
          width: auto;
          margin-left: auto;
          justify-content: flex-end;
          gap: 8px
     }

     .desktop-only {
          display: none !important
     }
}

/* Runtime fallback: JS adds this class when desktop nav does not fit. */
.topbar.mobile-nav {
     padding: 10px 10px;
     flex-wrap: nowrap;
     align-items: center
}

.topbar.mobile-nav .menubtn {
     display: inline-grid
}

.topbar.mobile-nav .nav {
     display: none
}

.topbar.mobile-nav .nav.open {
     display: grid;
     position: absolute;
     left: 0;
     right: 0;
     top: calc(100% + 1px);
     width: auto;
     transform: none;
     padding: 10px 10px 12px;
     gap: 8px;
     border-top: 2px solid color-mix(in srgb, var(--accent1) 68%, #fff 32%);
     border-bottom: 0;
     border-left: 0;
     border-right: 0;
     border-radius: 0;
     background: #061222;
     box-shadow: 0 24px 52px rgba(0, 0, 0, .58);
     z-index: 25;
     max-height: calc(100vh - 120px);
     overflow: auto
}

:root[data-theme="ocean"] .topbar.mobile-nav .nav.open {
     background: #f4fbff
}

.topbar.mobile-nav .nav.open .navbtn {
     width: 100%;
     justify-content: flex-start;
     border-radius: 12px
}

.topbar.mobile-nav .nav-mobile-extras {
     display: grid;
     gap: 8px;
     margin-top: 4px;
     padding-top: 8px;
     border-top: 1px solid color-mix(in srgb, var(--accent1) 42%, var(--line))
}

.topbar.mobile-nav .brandtxt .brandsub {
     display: none
}

.topbar.mobile-nav .actions {
     width: auto;
     margin-left: auto;
     justify-content: flex-end;
     gap: 8px
}

.topbar.mobile-nav .desktop-only {
     display: none !important
}

@media (max-width: 760px) {
     .userpill {
          max-width: calc(100vw - 150px)
     }

     .userpill .u2 {
          display: none
     }

     label.inline {
          width: 100%;
          flex-direction: column;
          align-items: stretch
     }

     label.inline select {
          width: 100%;
          min-width: 0
     }

     .seg {
          flex-wrap: nowrap;
          overflow-x: auto;
          -webkit-overflow-scrolling: touch;
          padding-bottom: 2px
     }

     .segbtn {
          white-space: nowrap
     }

     .item {
          flex-direction: column;
          align-items: stretch
     }

     .it-side {
          justify-content: space-between
     }

     .it-side .btn {
          flex: 1
     }

     .count {
          text-align: left;
          min-width: 0
     }

     .row {
          grid-template-columns: 1fr;
          grid-template-areas:
               "time"
               "what"
               "actions";
          gap: 10px
     }

     .row .actions {
          grid-column: auto;
          justify-content: stretch
     }

     .row .actions .btn {
          flex: 1
     }

     .time {
          justify-content: space-between
     }

     .viewer-top {
          top: 8px;
          left: 8px;
          right: 8px;
          grid-template-columns: minmax(0, 1fr) auto;
          align-items: start
     }

     .viewer-stage {
          padding-top: calc(112px + env(safe-area-inset-top));
          padding-bottom: calc(150px + env(safe-area-inset-bottom))
     }

     .viewer-img {
          max-height: min(100%, calc(100vh - 340px))
     }

     .viewer-left {
          align-items: stretch;
          flex-direction: column;
          gap: 8px
     }

     .viewer-brand {
          align-self: flex-start
     }

     .viewer-title {
          max-width: none
     }

     .viewer-strip {
          left: 8px;
          right: 8px;
          bottom: calc(8px + env(safe-area-inset-bottom));
          padding: 8px
     }

     .viewer-thumbs {
          gap: 8px
     }

     .viewer-thumb {
          flex-basis: min(180px, 70vw);
          gap: 6px
     }

     .viewer-overview {
          padding: 8px
     }

     .viewer-overview-grid {
          grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
          gap: 8px
     }

     .viewer.viewer-mode-full .viewer-stage {
          padding-bottom: calc(8px + env(safe-area-inset-bottom))
     }

     .viewer.viewer-mode-full .viewer-img {
          max-height: min(100%, calc(100vh - 190px))
     }

     .viewer.viewer-mode-gallery .viewer-stage {
          padding-top: calc(120px + env(safe-area-inset-top));
          padding-bottom: calc(8px + env(safe-area-inset-bottom))
     }

     .viewer.viewer-mode-gallery .viewer-img {
          display: none
     }

     .adminsplit {
          padding: 10px
     }
}

@media (max-width: 390px) {
     .stage {
          padding: 12px 8px 44px
     }

     .topbar {
          gap: 8px;
          padding: 8px
     }

     .brand {
          gap: 8px
     }

     .brand img {
          width: 32px;
          height: 32px
     }

     .brandtitle {
          font-size: 14px
     }

     .navbtn,
     .btn,
     .segbtn {
          padding: 9px 11px;
          font-size: 13px
     }

     .iconbtn {
          width: 40px;
          height: 40px
     }

     .card {
          border-radius: 18px
     }

     .cardhd {
          padding: 14px 12px 12px
     }

     .cardhd h1 {
          font-size: clamp(23px, 9vw, 30px)
     }

     .programbody,
     .list {
          padding: 12px 10px 14px
     }

     .daytitle {
          font-size: 20px;
          margin-bottom: 10px
     }

     .row,
     .item {
          padding: 10px
     }

     .what .w1,
     .it-title {
          font-size: 16px
     }

     .modalcard {
          width: calc(100vw - 8px);
          max-height: calc(100vh - 8px);
          border-radius: 16px
     }

     .modalhd {
          gap: 8px;
          padding: 12px 10px
     }

     .modalbody,
     .modalft {
          padding: 10px
     }

     .viewer-stage {
          padding-left: 8px;
          padding-right: 8px;
          padding-top: calc(104px + env(safe-area-inset-top));
          padding-bottom: calc(132px + env(safe-area-inset-bottom))
     }

     .viewer-img {
          max-height: min(100%, calc(100vh - 360px))
     }

     .viewer-title {
          padding: 10px
     }

     .viewer-title .vt {
          font-size: 14px
     }

     .viewer-title .vm {
          font-size: 13px
     }

     .viewer-top {
          left: 6px;
          right: 6px
     }

     .viewer-brand {
          padding: 8px 10px;
          font-size: 13px
     }

     .viewer-brand img {
          width: 24px;
          height: 24px
     }

     .viewer-top.mobile-menu.menu-open .viewer-menu-panel {
          padding: 8px;
          gap: 6px
     }

     .viewer-strip {
          left: 6px;
          right: 6px;
          bottom: calc(6px + env(safe-area-inset-bottom));
          padding: 6px
     }

     .viewer-thumb {
          flex-basis: min(150px, 78vw)
     }

     .viewer-overview {
          padding: 6px
     }

     .viewer-overview-grid {
          grid-template-columns: repeat(auto-fill, minmax(132px, 1fr));
          gap: 6px
     }

     .viewer.viewer-mode-full .viewer-stage {
          padding-bottom: calc(6px + env(safe-area-inset-bottom))
     }

     .viewer.viewer-mode-full .viewer-img {
          max-height: min(100%, calc(100vh - 220px))
     }

     .viewer.viewer-mode-gallery .viewer-stage {
          padding-top: calc(112px + env(safe-area-inset-top));
          padding-bottom: calc(6px + env(safe-area-inset-bottom))
     }

     .viewer.viewer-mode-gallery .viewer-img {
          display: none
     }

}