/* 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;
     --accent: #06b6d4;
     --accent2: #7c3aed;
     --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;
     --accent: #0077b6;
     --accent2: #00b4d8;

     --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(--accent) 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;
}

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

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;
     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
}

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

.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;
}

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

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

.navbtn.primary {
     background: linear-gradient(90deg, var(--accent2), var(--accent));
     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;
}

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

:root[data-theme="ocean"] .iconbtn .dot {
     background: radial-gradient(circle at 30% 30%, #fff, color-mix(in srgb, var(--accent) 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: 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;
}

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

.btn.primary {
     background: linear-gradient(90deg, var(--accent2), var(--accent));
     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
}

/* 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(--accent));
     border-color: transparent;
     color: #fff
}

/* Program */
.programbody {
     padding: 16px 14px 18px
}

.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 1fr auto;
     gap: 12px;
     padding: 12px 12px;
     border: 1px solid var(--line);
     border-radius: var(--radius);
     background: color-mix(in srgb, var(--panel2) 92%, transparent);
}

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

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

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

.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: flex;
     align-items: center;
     gap: 10px
}

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

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

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

.ph {
     display: inline-flex;
     align-items: center;
     justify-content: center;
     width: 34px;
     height: 34px;
     border-radius: 12px;
     border: 1px solid var(--line);
     background: transparent
}

/* 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(860px, 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(--panel) 92%, var(--bg));
     box-shadow: var(--shadow);
     backdrop-filter: blur(6px);
}

.modalcard .kicker {
     margin-bottom: 6px
}

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

.mtitle {
     font-weight: 1000;
     font-size: 22px;
     margin-top: 6px
}

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

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

.mtext {
     white-space: pre-wrap;
     line-height: 1.4;
     font-weight: 700
}

.modalft {
     display: flex;
     justify-content: flex-end;
     gap: 10px;
     padding: 14px 16px;
     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
     }
}

/* Photos list */
.list {
     padding: 14px 14px 18px;
     display: grid;
     gap: 10px
}

.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
}

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

.viewer-top {
     position: fixed;
     top: 12px;
     left: 12px;
     right: 12px;
     display: flex;
     align-items: flex-start;
     justify-content: space-between;
     gap: 12px
}

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

.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;
     flex-wrap: wrap;
     justify-content: flex-end
}

.viewer-bottom {
     position: fixed;
     bottom: 14px;
     left: 50%;
     transform: translateX(-50%);
     display: flex;
     gap: 10px;
     align-items: center
}

/* Admin */
.adminsplit {
     display: grid;
     gap: 16px;
     padding: 14px
}

@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: hidden
}

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

.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
}

.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
}

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