html, body {
background: #000;
overflow-x: hidden;
max-width: 100%;
}

/*
Base stage background.
- First gradient = jemne zosvetlenie hore. Zníž alpha alebo ho zmaž, ak chceš čistejšiu čiernu.
- Second gradient = hlavná tma celej plochy. Tu najviac nastavíš, ako "black" celé pozadie pôsobí.
*/
#stage.display-style--default {
background:
radial-gradient(circle at top, rgba(255, 255, 255, 0.015), transparent 38%),
linear-gradient(180deg, #272727 0%, #141414 46%, #040c2e 100%);
}

/*
Very subtle moving color band.
Najdôležitejšie ovládače:
- top/left/width/height = kde pás sedí a aký je široký.
- rgba alpha vo farbách = koľko farby reálne uvidíš.
- blur = mäkkosť pásu.
- opacity = celková sila efektu.
- animation duration = rýchlosť pohybu; vyššie číslo = pomalšie.
*/
#stage.display-style--default::before {
content: "";
position: absolute;
top: 3%;
left: 4%;
width: 92%;
height: 62%;
border-radius: 50%;
background: linear-gradient(
108deg,
rgba(56, 189, 248, 0) 39%,
rgba(56, 189, 248, 0.004) 47%,
rgba(45, 212, 191, 0.007) 50%,
rgba(244, 114, 182, 0.004) 53%,
rgba(244, 114, 182, 0) 61%
);
filter: blur(34px);
opacity: 0.14;
transform: translate3d(-1.5%, 0, 0) rotate(-5deg);
animation: displayAmbientBand 5s ease-in-out infinite alternate;
pointer-events: none;
will-change: transform;
}

/*
Dark overlay above the background, but below the cards.
- Prvý gradient = rovnomerné stmavenie celej plochy.
- Druhý gradient = jemná vignette ku krajom.
Ak chceš tmavšie pozadie bez zmeny farieb, upravuj hlavne tento blok.
*/
#stage.display-style--default::after {
content: "";
position: absolute;
inset: 0;
background:
linear-gradient(180deg, rgba(0, 0, 0, 0.18), rgba(0, 0, 0, 0.28)),
radial-gradient(circle at center, transparent 0%, rgba(0, 0, 0, 0.28) 100%);
pointer-events: none;
}

#stage.display-style--grid {
background: linear-gradient(180deg, #020202 0%, #05070d 100%);
}

#stage.display-style--grid::after {
content: "";
position: absolute;
inset: 0;
background: radial-gradient(circle at center, transparent 0%, rgba(0, 0, 0, 0.22) 100%);
pointer-events: none;
}

#gridWall {
position: absolute;
top: 0;
left: 0;
display: grid;
grid-template-columns: repeat(var(--grid-cols, 30), 1fr);
grid-template-rows: repeat(var(--grid-rows, 30), 1fr);
gap: 0;
pointer-events: none;
z-index: 0;
}

#gridWall[hidden] {
display: none;
}

.display-grid__item {
width: 100%;
height: 100%;
position: relative;
overflow: hidden;
border-radius: 0;
background: rgba(255, 255, 255, 0.035);
box-shadow: none;
}

.display-grid__image,
.display-grid__placeholder {
display: block;
width: 100%;
height: 100%;
position: relative;
z-index: 1;
}

.display-grid__image {
object-fit: cover;
}

.display-grid__item .display-card__overlay-layer {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
z-index: 2;
pointer-events: none;
}

.display-grid__item--text-only {
background: linear-gradient(135deg, rgba(15, 23, 42, 0.92), rgba(51, 65, 85, 0.68));
}

.display-grid__text {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
padding: 6%;
gap: 4px;
text-align: center;
color: rgba(255, 255, 255, 0.92);
overflow: hidden;
}

.display-grid__text-name {
font-size: clamp(0.55rem, 1vw, 1rem);
font-weight: 700;
line-height: 1.1;
letter-spacing: 0.02em;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
line-clamp: 2;
-webkit-box-orient: vertical;
max-width: 100%;
}

.display-grid__text-body {
font-size: clamp(0.45rem, 0.85vw, 0.85rem);
line-height: 1.2;
opacity: 0.9;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 4;
line-clamp: 4;
-webkit-box-orient: vertical;
max-width: 100%;
}

.display-grid__placeholder {
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(135deg, rgba(15, 23, 42, 0.92), rgba(51, 65, 85, 0.68));
color: rgba(255, 255, 255, 0.9);
font-size: clamp(0.35rem, 0.65vw, 0.72rem);
font-weight: 700;
letter-spacing: 0.04em;
text-transform: uppercase;
}

#stage.display-style--grid #displayHud {
top: 12px;
right: 12px;
left: auto;
z-index: 3;
}

#floats {
pointer-events: none;
perspective: 1600px;
perspective-origin: 50% 48%;
transform-style: preserve-3d;
}

#floats .display-card {
transform-style: preserve-3d;
backface-visibility: hidden;
}

/*
Movement path for the ambient band.
Menšie translate hodnoty = menej pohybu.
Menší rozdiel v rotate = pokojnejší efekt.
*/
@keyframes displayAmbientBand {
0% {
transform: translate3d(-2%, -0.6%, 0) rotate(-5.5deg);
}
50% {
transform: translate3d(0%, 0.3%, 0) rotate(-5deg);
}
100% {
transform: translate3d(2%, 0.8%, 0) rotate(-4.4deg);
}
}

.display-card {
position: relative;
display: flex;
flex-direction: column;
gap: 4px;
overflow: hidden;
/* --d2-radius-scale je nastavované iba na #d2-photos v Plavanie móde
   (display2/index.php), INVERZNE k --d2-photo-scale (väčšia fotka = menšie
   relatívne zaoblenie). Vsšade inde defaultne fallbackuje na 1. Percentá
   (nie pevné px) — zaoblenie tak škáluje s reálnou VEĽKOSŤOU KAŽDEJ karty
   (tá je náhodná 11..18vw + admin scale), nie len s viewport šírkou. */
border-radius: calc(9% * var(--d2-radius-scale, 1));
/* Padding must track the SAME radius — inak by zaoblený roh karty (nad
   určený väčšou fotkou) orezal meta/text panel v spodných rohoch. */
padding: calc(9% * var(--d2-radius-scale, 1));
color: #fff;
}

.display-card::before {
content: "";
position: absolute;
inset: 1px;
border-radius: inherit;
pointer-events: none;
opacity: 0.75;
}

.display-card__image {
position: relative;
z-index: 0;
display: block;
width: 100%;
height: auto;
border-radius: calc(8% * var(--d2-radius-scale, 1));
box-shadow: 0 16px 40px rgba(15, 23, 42, 0.32);
}

.display-card__placeholder {
position: relative;
z-index: 0;
display: flex;
align-items: center;
justify-content: center;
width: 100%;
min-height: 180px;
border-radius: calc(8% * var(--d2-radius-scale, 1));
background: linear-gradient(135deg, rgba(15, 23, 42, 0.88), rgba(71, 85, 105, 0.55));
box-shadow: 0 16px 40px rgba(15, 23, 42, 0.32);
color: rgba(255, 255, 255, 0.88);
font-size: clamp(2.2rem, 6vw, 3.6rem);
font-weight: 800;
letter-spacing: 0.08em;
text-transform: uppercase;
}

.display-card__placeholder::after {
content: "NO PHOTO";
position: absolute;
right: 16px;
bottom: 14px;
font-size: 0.65rem;
letter-spacing: 0.24em;
opacity: 0.38;
}

.display-card__meta {
position: relative;
z-index: 1;
padding: 0 6px 6px;
text-rendering: geometricPrecision;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}

.display-card__name {
font-size: calc(0.95rem * var(--d2-text-scale, 1));
font-weight: 800;
line-height: 1.1;
letter-spacing: 0.01em;
text-shadow: 0 2px 16px rgba(15, 23, 42, 0.35);
color: rgba(255, 255, 255, 0.95);
overflow-wrap: anywhere;
word-break: break-word;
}

.display-card__text {
margin-top: 1px;
color: rgba(255, 255, 255, 0.92);
font-size: calc(0.73rem * var(--d2-text-scale, 1));
line-height: 1.3;
text-shadow: 0 2px 16px rgba(15, 23, 42, 0.35);
display: -webkit-box;
overflow: hidden;
line-clamp: 2;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow-wrap: anywhere;
word-break: break-word;
}

/* Display2 (SSE) nikdy neskracuje komentár — uploader text je aj tak
   limitovaný na pár desiatok znakov pri nahrávaní, nemá zmysel ho ešte
   orézavať na karte. Špecifickosť #d2-stage prebije line-clamp vyššie
   (aj --text-only varovanie zvyšuje ho na 4). */
#d2-stage .display-card__text {
display: block;
overflow: visible;
line-clamp: unset;
-webkit-line-clamp: unset;
}

.display-card__text[hidden] {
display: none;
}

.display-card--text-only {
min-width: 180px;
max-width: min(72vw, 340px);
padding: 14px 16px;
gap: 6px;
background: linear-gradient(135deg, rgba(15, 23, 42, 0.88), rgba(71, 85, 105, 0.55));
box-shadow: 0 16px 40px rgba(15, 23, 42, 0.32);
}

.display-card--text-only .display-card__meta {
padding: 0;
}

.display-card--text-only .display-card__name {
font-size: calc(1.05rem * var(--d2-text-scale, 1));
}

.display-card--text-only .display-card__text {
-webkit-line-clamp: 4;
line-clamp: 4;
font-size: calc(0.85rem * var(--d2-text-scale, 1));
}

/* ── BLUR toggle (admin-controlled) ──────────────────────────────────────────
   Default OFF. Keď admin zapne .blur-on, fotka ostáva ostrá a iba meta panel
   (rámik s menom + textom) získa frosted-glass backdrop-filter. */

/* Vždy: vypni backdrop-filter z kariet (per-template pravidlá ho zapínajú,
   tu ho jednorazovo zhasneme aby sme mali deterministický základ). */
#stage .display-card,
#stage .display-card *,
#d2-stage .display-card,
#d2-stage .display-card * {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

/* ON: iOS Liquid-Glass efekt — celá karta je frosted glass.
   Karta dostane semi-transparentný background + backdrop-filter blur,
   čím rozmaže to, čo je ZA kartou (susedné prekrývajúce sa karty alebo
   stage pozadie). Fotka aj meta panel ostávajú v normal flow nedotknuté. */
#stage.blur-on .display-card,
#d2-stage.blur-on .display-card {
    background: rgba(255, 255, 255, 0.12) !important;
    backdrop-filter: blur(40px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(40px) saturate(180%) !important;
    border: 1px solid rgba(255, 255, 255, 0.18) !important;
    box-shadow:
        0 8px 32px rgba(0, 0, 0, 0.35),
        inset 0 1px 0 rgba(255, 255, 255, 0.25) !important;
}

.display-card.template--glass {
background:
linear-gradient(180deg, rgba(255, 255, 255, 0.26), rgba(255, 255, 255, 0.08) 38%, rgba(255, 255, 255, 0.03) 100%),
rgba(10, 16, 31, 0.34);
border: 1px solid rgba(255, 255, 255, 0.24);
box-shadow:
0 24px 60px rgba(0, 0, 0, 0.34),
inset 0 1px 0 rgba(255, 255, 255, 0.35),
inset 0 -14px 28px rgba(255, 255, 255, 0.05);
backdrop-filter: blur(12px) saturate(165%);
-webkit-backdrop-filter: blur(12px) saturate(165%);
}

.display-card.template--glass::before {
background: linear-gradient(135deg, rgba(255, 255, 255, 0.32), rgba(255, 255, 255, 0.05) 35%, rgba(255, 255, 255, 0) 65%);
}

.display-card.template--glass .display-card__meta {
padding: 11px 13px 13px;
border-radius: calc(6% * var(--d2-radius-scale, 1));
background: linear-gradient(180deg, rgba(9, 14, 29, 0.24), rgba(9, 14, 29, 0.62));
border: 1px solid rgba(255, 255, 255, 0.16);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14);
backdrop-filter: blur(16px) saturate(150%);
-webkit-backdrop-filter: blur(16px) saturate(150%);
}

.display-card.template--glass .display-card__placeholder {
background: linear-gradient(135deg, rgba(255, 255, 255, 0.28), rgba(15, 23, 42, 0.22));
}

.display-card.template--studio {
background: linear-gradient(180deg, rgba(15, 23, 42, 0.92), rgba(30, 41, 59, 0.88));
border: 1px solid rgba(148, 163, 184, 0.2);
box-shadow:
0 24px 56px rgba(2, 6, 23, 0.52),
0 0 0 1px rgba(255, 255, 255, 0.04) inset;
}

.display-card.template--studio::before {
background:
radial-gradient(circle at top left, rgba(56, 189, 248, 0.22), transparent 44%),
radial-gradient(circle at bottom right, rgba(244, 114, 182, 0.18), transparent 42%);
}

.display-card.template--studio .display-card__meta {
padding: 2px 4px 4px;
}

.display-card.template--postcard {
background: linear-gradient(180deg, rgba(255, 248, 237, 0.96), rgba(245, 234, 218, 0.93));
border: 1px solid rgba(146, 110, 76, 0.18);
box-shadow:
0 20px 44px rgba(72, 48, 29, 0.24),
inset 0 1px 0 rgba(255, 255, 255, 0.78);
color: #312013;
}

.display-card.template--postcard::before {
background: linear-gradient(180deg, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0));
opacity: 0.45;
}

.display-card.template--postcard .display-card__image {
box-shadow: 0 12px 28px rgba(84, 57, 37, 0.2);
}

.display-card.template--postcard .display-card__meta {
padding: 2px 4px 4px;
}

.display-card.template--postcard .display-card__name,
.display-card.template--postcard .display-card__text {
text-shadow: none;
}

.display-card.template--postcard .display-card__text {
color: rgba(49, 32, 19, 0.82);
}

.display-card.template--postcard .display-card__placeholder {
background: linear-gradient(135deg, rgba(255, 251, 245, 0.98), rgba(233, 214, 191, 0.92));
color: rgba(49, 32, 19, 0.82);
box-shadow: 0 12px 28px rgba(84, 57, 37, 0.2);
}

.display-card.template--postcard .display-card__placeholder::after {
color: rgba(49, 32, 19, 0.52);
}

/* ============== PRO templates ============== */

/* Neon Pulse */
.display-card.template--neon {
background: linear-gradient(180deg, #08051a 0%, #14082b 100%);
border: 1px solid rgba(236, 72, 153, 0.45);
box-shadow:
0 0 0 1px rgba(236, 72, 153, 0.35) inset,
0 0 28px rgba(236, 72, 153, 0.45),
0 0 60px rgba(56, 189, 248, 0.35);
color: #f0f9ff;
animation: neonPulse 3.2s ease-in-out infinite;
}
.display-card.template--neon::before {
background: linear-gradient(135deg, rgba(56, 189, 248, 0.25), transparent 55%, rgba(236, 72, 153, 0.25));
mix-blend-mode: screen;
}
.display-card.template--neon .display-card__name {
color: #fff;
text-shadow: 0 0 12px rgba(255, 255, 255, 0.6);
letter-spacing: 0.04em;
}
.display-card.template--neon .display-card__text { color: #bae6fd; }
@keyframes neonPulse {
0%, 100% { box-shadow: 0 0 0 1px rgba(236,72,153,.35) inset, 0 0 22px rgba(236,72,153,.4), 0 0 50px rgba(56,189,248,.3); }
50%      { box-shadow: 0 0 0 1px rgba(56,189,248,.45) inset, 0 0 36px rgba(236,72,153,.6), 0 0 70px rgba(56,189,248,.5); }
}

/* Polaroid */
.display-card.template--polaroid {
background: #fafaf7;
border: 1px solid rgba(0, 0, 0, 0.08);
border-bottom-width: 56px;
border-bottom-color: #fafaf7;
box-shadow: 0 18px 40px rgba(0, 0, 0, 0.4), 0 2px 4px rgba(0, 0, 0, 0.15);
color: #1f2937;
border-radius: 6px;
transform: rotate(-1.2deg);
}
.display-card.template--polaroid::before { display: none; }
.display-card.template--polaroid .display-card__image { border-radius: 2px; }
.display-card.template--polaroid .display-card__meta {
position: absolute;
left: 0; right: 0; bottom: -50px;
padding: 6px 14px 8px;
text-align: center;
font-family: 'Caveat', 'Comic Sans MS', cursive;
}
.display-card.template--polaroid .display-card__name { color: #111827; font-size: 1.15rem; }
.display-card.template--polaroid .display-card__text  { color: #4b5563; font-size: 0.95rem; }

/* Noir Film */
.display-card.template--noir {
background: linear-gradient(180deg, #0a0a0a, #1a1a1a);
border: 1px solid rgba(255, 255, 255, 0.08);
box-shadow: 0 24px 60px rgba(0, 0, 0, 0.7);
color: #e5e5e5;
}
.display-card.template--noir::before {
background: repeating-linear-gradient(0deg, rgba(255,255,255,0.03) 0 1px, transparent 1px 3px);
opacity: 0.6;
}
.display-card.template--noir .display-card__image { filter: grayscale(1) contrast(1.15); }
.display-card.template--noir .display-card__name {
font-family: 'Playfair Display', Georgia, serif;
letter-spacing: 0.08em;
text-transform: uppercase;
font-weight: 700;
}
.display-card.template--noir .display-card__text { color: #9ca3af; font-style: italic; }

/* Sunset Haze */
.display-card.template--sunset {
background: linear-gradient(135deg, #ff7e5f 0%, #feb47b 45%, #ffd28a 100%);
border: 1px solid rgba(255, 255, 255, 0.35);
box-shadow: 0 24px 56px rgba(255, 126, 95, 0.35);
color: #3b1106;
}
.display-card.template--sunset::before {
background: radial-gradient(circle at 30% 20%, rgba(255,255,255,0.5), transparent 50%);
}
.display-card.template--sunset .display-card__name { color: #2d0d04; }
.display-card.template--sunset .display-card__text  { color: rgba(74, 18, 8, 0.78); }

/* Minimal White */
.display-card.template--minimal {
background: #ffffff;
border: 1px solid #e5e7eb;
box-shadow: 0 8px 24px rgba(15, 23, 42, 0.08);
color: #0f172a;
border-radius: 14px;
}
.display-card.template--minimal::before { display: none; }
.display-card.template--minimal .display-card__name { color: #0f172a; font-weight: 600; }
.display-card.template--minimal .display-card__text  { color: #475569; }
.display-card.template--minimal .display-card__meta {
border-top: 1px solid #f1f5f9;
padding-top: 10px;
}

/* Gold Luxe */
.display-card.template--gold {
background:
linear-gradient(180deg, rgba(0,0,0,0.65), rgba(0,0,0,0.85)),
radial-gradient(circle at 50% 0%, #d4af37 0%, transparent 70%);
border: 1px solid #d4af37;
box-shadow:
0 24px 60px rgba(0, 0, 0, 0.6),
inset 0 0 0 1px rgba(212, 175, 55, 0.4),
inset 0 1px 0 rgba(255, 224, 138, 0.5);
color: #fef3c7;
}
.display-card.template--gold::before {
background: linear-gradient(135deg, rgba(255, 224, 138, 0.25), transparent 50%);
}
.display-card.template--gold .display-card__name {
color: #fff;
font-family: 'Playfair Display', Georgia, serif;
letter-spacing: 0.06em;
}
.display-card.template--gold .display-card__text { color: #fbbf24; }

/* Pop Art */
.display-card.template--popart {
background:
repeating-radial-gradient(circle at 0 0, #fde047 0 6px, transparent 6px 12px),
linear-gradient(135deg, #f43f5e 0%, #fb7185 100%);
border: 4px solid #0f172a;
box-shadow: 8px 8px 0 #0f172a;
color: #0f172a;
border-radius: 8px;
}
.display-card.template--popart::before {
background: linear-gradient(135deg, rgba(255,255,255,0.4), transparent 50%);
}
.display-card.template--popart .display-card__name {
color: #0f172a;
font-weight: 900;
text-transform: uppercase;
letter-spacing: 0.05em;
}
.display-card.template--popart .display-card__text { color: #1e293b; font-weight: 600; }

/* Magazine */
.display-card.template--magazine {
background: #f8fafc;
border: 1px solid #cbd5e1;
border-left: 6px solid #0f172a;
box-shadow: 0 16px 36px rgba(15, 23, 42, 0.18);
color: #0f172a;
border-radius: 10px;
}
.display-card.template--magazine::before { display: none; }
.display-card.template--magazine .display-card__name {
font-family: 'Playfair Display', Georgia, serif;
font-weight: 700;
font-size: 1.25rem;
border-bottom: 2px solid #0f172a;
padding-bottom: 4px;
margin-bottom: 6px;
display: inline-block;
}
.display-card.template--magazine .display-card__text {
color: #334155;
font-family: Georgia, serif;
line-height: 1.45;
}

/* Custom (frame-only): strips all decorative background/border/shadow so the
   admin-uploaded Frame PNG (uploads/frames) is the only visual framing.
   Corners stay rounded (inherits the default 28px/20px radii) — only the
   background/border/shadow/padding decoration is stripped. */
.display-card.template--custom {
background: none;
border: none;
box-shadow: none;
backdrop-filter: none;
-webkit-backdrop-filter: none;
padding: 0;
}
.display-card.template--custom::before { display: none; }
.display-card.template--custom .display-card__image {
box-shadow: none;
}
.display-card.template--custom .display-card__placeholder {
box-shadow: none;
}
/* padding:0 above means the frame-layer's box coincides exactly with the
   card's outer edge (no inset gap), so it must match the card's own %
   radius exactly — otherwise a thin unrounded sliver shows at the corners. */
.display-card.template--custom .display-card__frame-layer {
border-radius: calc(9% * var(--d2-radius-scale, 1));
}

.upload-preview-stage {
position: relative;
display: flex;
align-items: center;
justify-content: center;
min-height: 320px;
}

.upload-preview-card {
width: min(100%, 420px);
margin: 0 auto;
gap: 4px;
transition: transform 200ms ease, opacity 200ms ease;
}

/* Image/placeholder box matches the camera video exactly: same width, 1:1 square. */
.upload-preview-card .display-card__image,
.upload-preview-card .display-card__placeholder {
aspect-ratio: 1 / 1;
height: auto;
min-height: 0;
max-height: none;
object-fit: cover;
}

/* Slightly translucent "frame" behind the editable name/message. */
.upload-preview-card .display-card__meta {
background: rgba(255, 255, 255, 0.1);
border-radius: 14px;
padding: 8px 10px;
}

.upload-preview-camera {
width: 100%;
max-width: 420px;
aspect-ratio: 1 / 1;
object-fit: cover;
border-radius: 24px;
background: #020617;
box-shadow: 0 24px 48px rgba(2, 8, 23, 0.34);
}

/* Live WYSIWYG watermark preview, aligned to the exact same square box as the camera/photo.
   Pinned to the stage's top edge (not vertically centered) because the previewCard's
   meta text below the square can grow the stage height, which would otherwise drag a
   vertically-centered overlay down away from the actual photo square. */
.upload-preview-overlay {
position: absolute;
top: 0;
left: 0;
right: 0;
margin: 0 auto;
width: 100%;
max-width: 420px;
aspect-ratio: 1 / 1;
object-fit: fill;
border-radius: 24px;
pointer-events: none;
z-index: 5;
}


/* Name shown on the preview card is a real input — tap it to type directly. */
.upload-name-input {
display: block;
width: 100%;
background: transparent;
border: none;
outline: none;
padding: 0;
margin: 0;
appearance: none;
-webkit-appearance: none;
}
.upload-name-input::placeholder {
color: rgba(255, 255, 255, 0.5);
}
.upload-name-input:focus {
outline: 2px solid rgba(52, 211, 153, 0.55);
outline-offset: 3px;
border-radius: 4px;
}

.upload-template-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
gap: 12px;
}

.upload-template-option {
display: flex;
flex-direction: column;
gap: 10px;
padding: 12px;
border-radius: 20px;
border: 1px solid rgba(148, 163, 184, 0.18);
background: rgba(15, 23, 42, 0.55);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
transition: transform 200ms ease, border-color 200ms ease, background 200ms ease, box-shadow 200ms ease;
text-align: left;
}

.upload-template-option:hover {
transform: translateY(-1px);
border-color: rgba(52, 211, 153, 0.4);
}

.upload-template-option.is-selected {
border-color: rgba(52, 211, 153, 0.9);
background: rgba(6, 95, 70, 0.2);
box-shadow: 0 0 0 1px rgba(52, 211, 153, 0.35) inset, 0 16px 28px rgba(2, 8, 23, 0.22);
}

.upload-template-option__label {
font-size: 0.85rem;
font-weight: 700;
color: #e2e8f0;
}

.upload-template-option__preview {
width: 100%;
min-height: 120px;
gap: 8px;
padding: 8px;
border-radius: 18px;
}

.upload-template-option__preview .display-card__placeholder {
min-height: 70px;
font-size: 1.25rem;
border-radius: 14px;
}

.upload-template-option__preview .display-card__placeholder::after {
right: 10px;
bottom: 9px;
font-size: 0.45rem;
letter-spacing: 0.18em;
}

.upload-template-option__preview .display-card__meta {
padding: 0 2px 2px;
}

.upload-template-option__preview .display-card__name {
font-size: 0.78rem;
}

.upload-template-option__preview .display-card__text {
font-size: 0.62rem;
line-clamp: 1;
-webkit-line-clamp: 1;
}

@media (max-width: 640px) {
.upload-preview-stage {
min-height: 280px;
}

.upload-template-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}

/* ===== Redesign 2026-05-02 — global shell / admin / upload ===== */

body.app-shell {
    background:
        radial-gradient(1200px 700px at 12% -10%, rgba(56, 189, 248, 0.18), transparent 60%),
        radial-gradient(1100px 700px at 95% 0%,   rgba(168, 85, 247, 0.16), transparent 55%),
        radial-gradient(900px 600px at 50% 110%,  rgba(16, 185, 129, 0.14), transparent 60%),
        linear-gradient(160deg, #060814 0%, #0b1024 45%, #0a0820 100%);
    background-attachment: fixed;
}

.app-shell__bg {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    background:
        radial-gradient(circle at 20% 30%, rgba(255, 255, 255, 0.04), transparent 40%),
        radial-gradient(circle at 80% 70%, rgba(255, 255, 255, 0.03), transparent 45%);
    mix-blend-mode: screen;
}

body.app-shell > *:not(.app-shell__bg) { position: relative; z-index: 1; }
/* Sticky admin bar must outrank cards (which inherit z-index:1 from the rule above). */
body.app-shell > .admin-topbar { z-index: 60; }
body.app-shell > #impersonateBar { z-index: 70; }

/* ----- top admin bar ----- */
.admin-topbar {
    position: sticky;
    top: 0;
    z-index: 40;
    background: linear-gradient(180deg, rgba(8, 11, 26, 0.92), rgba(8, 11, 26, 0.78));
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    border-bottom: 1px solid rgba(148, 163, 184, 0.12);
}
/* When impersonating, the orange bar above is sticky too — push the header down. */
#impersonateBar ~ .admin-topbar { top: 44px; }

.admin-topbar__brand { color: #f1f5f9; font-size: 1.05rem; }
.admin-topbar__logo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px; height: 32px;
    border-radius: 10px;
    background: linear-gradient(135deg, #34d399, #6366f1);
    box-shadow: 0 8px 20px rgba(99, 102, 241, 0.35);
}

.admin-topbar__link {
    display: inline-flex;
    align-items: center;
    padding: 0.5rem 0.85rem;
    border-radius: 0.65rem;
    font-size: 0.875rem;
    font-weight: 500;
    color: #cbd5e1;
    transition: background 0.2s ease, color 0.2s ease, transform 0.15s ease;
}
.admin-topbar__link:hover { background: rgba(148, 163, 184, 0.12); color: #f1f5f9; }
.admin-topbar__link.is-active {
    background: linear-gradient(135deg, rgba(52, 211, 153, 0.22), rgba(99, 102, 241, 0.22));
    color: #ecfeff;
    box-shadow: inset 0 0 0 1px rgba(148, 163, 184, 0.18);
}
.admin-topbar__link--mobile { display: block; padding: 0.65rem 0.85rem; }

/* ----- mobile burger menu ----- */
.admin-burger > summary {
    list-style: none;
    cursor: pointer;
    user-select: none;
}
.admin-burger > summary::-webkit-details-marker { display: none; }
.admin-burger > summary::marker { content: ''; }

.admin-burger__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 12px;
    border: 1px solid rgba(148, 163, 184, 0.18);
    background: rgba(15, 23, 42, 0.55);
    color: #e2e8f0;
    transition: background 0.2s ease, border-color 0.2s ease;
}
.admin-burger__btn:hover { background: rgba(30, 41, 59, 0.75); border-color: rgba(148, 163, 184, 0.32); }
.admin-burger[open] > .admin-burger__btn {
    background: rgba(99, 102, 241, 0.22);
    border-color: rgba(99, 102, 241, 0.55);
}

.admin-burger__icon,
.admin-burger__icon::before,
.admin-burger__icon::after {
    display: block;
    width: 20px;
    height: 2px;
    background: currentColor;
    border-radius: 2px;
    transition: transform 0.2s ease, opacity 0.2s ease;
}
.admin-burger__icon { position: relative; }
.admin-burger__icon::before,
.admin-burger__icon::after {
    content: '';
    position: absolute;
    left: 0;
}
.admin-burger__icon::before { top: -6px; }
.admin-burger__icon::after  { top:  6px; }
.admin-burger[open] .admin-burger__icon { background: transparent; }
.admin-burger[open] .admin-burger__icon::before { transform: translateY(6px) rotate(45deg); }
.admin-burger[open] .admin-burger__icon::after  { transform: translateY(-6px) rotate(-45deg); }

.admin-burger__panel {
    position: absolute;
    right: 0;
    top: calc(100% + 0.5rem);
    width: min(20rem, calc(100vw - 1.5rem));
    overflow: hidden;
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(2, 6, 23, 0.96);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    box-shadow: 0 25px 60px -20px rgba(0, 0, 0, 0.7);
    z-index: 50;
}

/* ----- admin shell + cards ----- */
.admin-shell {
    max-width: 80rem;
    margin: 0 auto;
    padding: 1.25rem 1rem 3rem;
}
@media (min-width: 640px) { .admin-shell { padding: 1.75rem 1.5rem 3.5rem; } }

.admin-page-title {
    font-size: 1.6rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    background: linear-gradient(135deg, #ffffff, #cbd5e1 70%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.admin-card {
    position: relative;
    border-radius: 1.25rem;
    padding: 1.25rem;
    background:
        linear-gradient(150deg, rgba(30, 41, 59, 0.78), rgba(15, 23, 42, 0.78));
    border: 1px solid rgba(148, 163, 184, 0.14);
    box-shadow: 0 18px 40px -24px rgba(2, 6, 23, 0.7);
    backdrop-filter: blur(10px);
}
.admin-card::before {
    content: "";
    position: absolute; inset: 0;
    border-radius: inherit;
    pointer-events: none;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.06), transparent 35%);
}
@media (min-width: 640px) { .admin-card { padding: 1.5rem; } }

.admin-stat {
    position: relative;
    border-radius: 1rem;
    padding: 0.75rem 0.9rem;
    overflow: hidden;
    border: 1px solid rgba(148, 163, 184, 0.16);
    background: linear-gradient(135deg, rgba(15, 23, 42, 0.85), rgba(30, 41, 59, 0.65));
    box-shadow: 0 18px 40px -28px rgba(2, 6, 23, 0.85);
}
.admin-stat::after {
    content: "";
    position: absolute;
    right: -30px; top: -30px;
    width: 90px; height: 90px;
    border-radius: 50%;
    background: radial-gradient(circle, var(--stat-accent, rgba(56, 189, 248, 0.35)), transparent 70%);
    opacity: 0.55;
    pointer-events: none;
}
.admin-stat__label { font-size: 0.65rem; color: #94a3b8; text-transform: uppercase; letter-spacing: 0.08em; }
.admin-stat__value { font-size: 1.25rem; font-weight: 700; margin-top: 0.15rem; line-height: 1.1; }
@media (min-width: 640px) {
    .admin-stat { padding: 1rem 1.1rem; }
    .admin-stat__label { font-size: 0.72rem; }
    .admin-stat__value { font-size: 1.5rem; }
}

/* event-detail collapsible cards */
.ev-card {
    background: rgba(15, 23, 42, 0.65);
    border: 1px solid rgba(148, 163, 184, 0.14);
    border-radius: 1rem;
    overflow: hidden;
    transition: border-color 0.2s ease, background 0.2s ease;
}
.ev-card[open] {
    background: rgba(15, 23, 42, 0.85);
    border-color: rgba(148, 163, 184, 0.25);
}
.ev-card--danger {
    background: rgba(76, 5, 25, 0.35);
    border-color: rgba(190, 18, 60, 0.45);
}
.ev-summary {
    list-style: none;
    cursor: pointer;
    padding: 0.85rem 1rem;
    font-weight: 600;
    font-size: 0.95rem;
    color: #e2e8f0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    user-select: none;
}
.ev-summary::-webkit-details-marker { display: none; }
.ev-summary::after {
    content: "▾";
    margin-left: auto;
    font-size: 0.8rem;
    opacity: 0.55;
    transition: transform 0.2s ease;
}
.ev-card[open] > .ev-summary::after { transform: rotate(180deg); }
.ev-summary:hover { background: rgba(148, 163, 184, 0.06); }
.ev-body { padding: 0 1rem 1rem; }
.ev-input {
    width: 100%;
    background: rgba(2, 6, 23, 0.6);
    border: 1px solid rgba(71, 85, 105, 0.6);
    border-radius: 0.5rem;
    padding: 0.5rem 0.7rem;
    margin-top: 0.25rem;
    color: #f1f5f9;
    font-size: 0.9rem;
}
.ev-input:focus {
    outline: none;
    border-color: rgba(52, 211, 153, 0.7);
    box-shadow: 0 0 0 2px rgba(52, 211, 153, 0.18);
}
textarea.ev-input { resize: vertical; min-height: 72px; }
.ev-input--compact { padding: 0.3rem 0.5rem; font-size: 0.8rem; margin-top: 0; min-width: 7rem; }

/* ===== Compact event-detail layout (redesign) ===== */
.ev-detail { display: flex; flex-direction: column; gap: 0.85rem; }

.ev-header {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    align-items: flex-start;
    padding-bottom: 0.25rem;
    border-bottom: 1px solid rgba(148, 163, 184, 0.1);
}
@media (min-width: 640px) {
    .ev-header { flex-direction: row; align-items: flex-end; justify-content: space-between; gap: 1rem; }
}
.ev-title {
    font-size: clamp(1.25rem, 2.4vw, 1.7rem);
    font-weight: 700;
    line-height: 1.15;
    color: #f1f5f9;
    letter-spacing: -0.01em;
}
.ev-slug {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.7rem;
    color: #64748b;
    margin-top: 0.15rem;
    word-break: break-all;
}
.ev-header__actions { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.ev-pill {
    background: rgba(51, 65, 85, 0.7);
    color: #e2e8f0;
    padding: 0.35rem 0.7rem;
    border-radius: 0.55rem;
    font-size: 0.75rem;
    font-weight: 500;
    transition: background 0.15s ease;
}
.ev-pill:hover { background: rgba(71, 85, 105, 0.85); }

.ev-grid {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 0.7rem;
}
.ev-panel {
    grid-column: span 12;
    background: rgba(15, 23, 42, 0.7);
    border: 1px solid rgba(148, 163, 184, 0.13);
    border-radius: 0.85rem;
    padding: 0.7rem 0.85rem 0.85rem;
    display: flex;
    flex-direction: column;
}
.ev-panel--danger { background: rgba(76, 5, 25, 0.32); border-color: rgba(190, 18, 60, 0.4); }
.ev-panel__title {
    font-size: 0.78rem;
    font-weight: 600;
    color: #cbd5e1;
    margin-bottom: 0.55rem;
    letter-spacing: 0.01em;
    display: flex;
    align-items: center;
    gap: 0.35rem;
}
.ev-panel__body { flex: 1 1 auto; }

@media (min-width: 768px) {
    .ev-panel--span-4  { grid-column: span 6; }
    .ev-panel--span-6  { grid-column: span 6; }
    .ev-panel--span-8  { grid-column: span 12; }
    .ev-panel--span-12 { grid-column: span 12; }
}
@media (min-width: 1024px) {
    .ev-panel--span-4  { grid-column: span 4; }
    .ev-panel--span-6  { grid-column: span 6; }
    .ev-panel--span-8  { grid-column: span 8; }
    .ev-panel--span-12 { grid-column: span 12; }
}

.ev-panel .ev-input {
    padding: 0.4rem 0.6rem;
    font-size: 0.8rem;
    border-radius: 0.45rem;
    margin-top: 0.2rem;
}
.ev-panel textarea.ev-input { min-height: 56px; }

.ev-tag {
    color: #94a3b8;
    font-size: 0.6rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 600;
}
.ev-badge {
    display: inline-block;
    font-size: 0.58rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 700;
    padding: 0.1rem 0.45rem;
    border-radius: 0.3rem;
    line-height: 1.4;
}
.ev-badge--free  { background: rgba(16, 185, 129, 0.18); color: #6ee7b7; }
.ev-badge--lock  { background: rgba(245, 158, 11, 0.2); color: #fcd34d; }
.ev-badge--super { background: rgba(217, 70, 239, 0.2); color: #f0abfc; }

/* ── Public links & QR (mobile-first card grid) ─────────────────────────── */
.ev-links-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.6rem;
}
@media (min-width: 640px) {
    .ev-links-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1280px) {
    .ev-links-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.ev-link-card {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    gap: 0.7rem;
    padding: 0.65rem;
    background: rgba(15, 23, 42, 0.55);
    border: 1px solid rgba(148, 163, 184, 0.18);
    border-radius: 0.7rem;
    min-width: 0;
}
.ev-link-card__qr {
    flex: 0 0 auto;
    width: 96px;
    height: 96px;
    background: #fff;
    border-radius: 0.5rem;
    padding: 4px;
    align-self: flex-start;
}
@media (min-width: 640px) {
    .ev-link-card__qr { width: 110px; height: 110px; }
}
.ev-link-card__body {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}
.ev-link-card__head {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}
.ev-link-card__icon { font-size: 0.95rem; line-height: 1; }
.ev-link-card__label {
    font-size: 0.78rem;
    font-weight: 700;
    color: #e2e8f0;
    letter-spacing: 0.01em;
}
.ev-link-card__desc {
    font-size: 0.66rem;
    color: #94a3b8;
    margin: 0;
    line-height: 1.35;
}
.ev-link-card__url {
    font-size: 0.65rem;
    color: #6ee7b7;
    text-decoration: none;
    word-break: break-all;
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.ev-link-card__url:hover { text-decoration: underline; }
.ev-link-card__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    margin-top: auto;
    padding-top: 0.25rem;
}
.ev-link-card__btn {
    flex: 1 1 auto;
    min-width: 90px;
    padding: 0.4rem 0.55rem;
    font-size: 0.7rem;
    font-weight: 600;
    border-radius: 0.45rem;
    text-align: center;
    text-decoration: none;
    border: 1px solid transparent;
    cursor: pointer;
    transition: background 120ms ease, border-color 120ms ease;
    -webkit-tap-highlight-color: transparent;
}
.ev-link-card__btn--primary {
    background: rgba(16, 185, 129, 0.85);
    color: #052e22;
}
.ev-link-card__btn--primary:hover { background: rgb(16, 185, 129); }
.ev-link-card__btn--ghost {
    background: rgba(51, 65, 85, 0.55);
    color: #e2e8f0;
    border-color: rgba(148, 163, 184, 0.2);
}
.ev-link-card__btn--ghost:hover { background: rgba(71, 85, 105, 0.7); }
.ev-link-card__btn.is-copied {
    background: rgba(34, 197, 94, 0.85) !important;
    color: #042f1d !important;
}

/* ── Display state (live indicator) ─────────────────────────────────────── */
.ev-display-state {
    background: rgba(15, 23, 42, 0.55);
    border: 1px solid rgba(148, 163, 184, 0.16);
    border-radius: 0.55rem;
    padding: 0.55rem 0.7rem;
}
.ev-display-state__head {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    font-size: 0.62rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: #94a3b8;
    margin-bottom: 0.3rem;
}
.ev-display-state__dot {
    width: 8px; height: 8px;
    border-radius: 50%;
    background: #475569;
    flex: 0 0 auto;
    transition: background 250ms ease, box-shadow 250ms ease;
}
.ev-display-state__dot.is-mosaic    { background: #34d399; box-shadow: 0 0 0 3px rgba(52, 211, 153, 0.18); }
.ev-display-state__dot.is-flow      { background: #fbbf24; box-shadow: 0 0 0 3px rgba(251, 191, 36, 0.18); }
.ev-display-state__dot.is-reset     { background: #94a3b8; }
.ev-display-state__body {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.5rem;
    flex-wrap: wrap;
}
.ev-display-state__kind {
    font-size: 0.85rem;
    font-weight: 700;
    color: #e2e8f0;
}
.ev-display-state__time {
    font-size: 0.65rem;
    color: #64748b;
    font-variant-numeric: tabular-nums;
}

.ev-savebar {
    position: sticky;
    bottom: 0.4rem;
    z-index: 10;
    margin-top: 0.85rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.55rem 0.85rem;
    background: rgba(15, 23, 42, 0.92);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(148, 163, 184, 0.18);
    border-radius: 0.85rem;
    box-shadow: 0 12px 30px -12px rgba(0, 0, 0, 0.6);
}

/* buttons */
.admin-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    padding: 0.55rem 1rem;
    border-radius: 0.7rem;
    font-size: 0.875rem;
    font-weight: 600;
    transition: transform 0.15s ease, box-shadow 0.2s ease, background 0.2s ease;
    min-height: 40px;
}
.admin-btn--primary {
    color: #052e1f;
    background: linear-gradient(135deg, #34d399 0%, #22d3ee 100%);
    box-shadow: 0 12px 30px -12px rgba(34, 211, 238, 0.6);
}
.admin-btn--primary:hover { transform: translateY(-1px); box-shadow: 0 18px 36px -14px rgba(34, 211, 238, 0.7); }
.admin-btn--ghost {
    color: #e2e8f0;
    background: rgba(148, 163, 184, 0.12);
    border: 1px solid rgba(148, 163, 184, 0.18);
}
.admin-btn--ghost:hover { background: rgba(148, 163, 184, 0.2); }
.admin-btn--danger {
    color: #fff;
    background: linear-gradient(135deg, #fb7185, #ef4444);
    box-shadow: 0 12px 26px -12px rgba(239, 68, 68, 0.5);
}

/* form fields */
.admin-input,
.admin-select,
.admin-textarea {
    width: 100%;
    background: rgba(2, 6, 23, 0.55);
    border: 1px solid rgba(148, 163, 184, 0.2);
    border-radius: 0.7rem;
    padding: 0.65rem 0.85rem;
    color: #f1f5f9;
    font-size: 0.95rem;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    min-height: 44px;
}
.admin-input:focus,
.admin-select:focus,
.admin-textarea:focus {
    outline: none;
    border-color: rgba(52, 211, 153, 0.65);
    box-shadow: 0 0 0 3px rgba(52, 211, 153, 0.15);
}
.admin-textarea { min-height: 88px; resize: vertical; }
.admin-field-label {
    display: block;
    font-size: 0.8rem;
    color: #94a3b8;
    margin-bottom: 0.3rem;
}

/* ----- upload page ----- */
.upload-shell {
    max-width: 720px;
    margin: 0 auto;
    padding: 1.25rem 1rem 3rem;
}
@media (min-width: 640px) { .upload-shell { padding: 2rem 1.5rem 3.5rem; } }

.upload-hero { text-align: center; margin-bottom: 1.5rem; }
.upload-hero__title {
    font-size: clamp(1.5rem, 4.5vw, 2.1rem);
    font-weight: 800;
    letter-spacing: -0.02em;
    background: linear-gradient(135deg, #ffffff 0%, #a5f3fc 50%, #c4b5fd 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
.upload-hero__lead {
    color: #94a3b8;
    margin-top: 0.35rem;
    font-size: 0.95rem;
}

.upload-card {
    position: relative;
    border-radius: 1.75rem;
    padding: 1.25rem;
    background: linear-gradient(160deg, rgba(30, 41, 59, 0.85), rgba(15, 23, 42, 0.85));
    border: 1px solid rgba(148, 163, 184, 0.16);
    box-shadow: 0 30px 80px -40px rgba(2, 6, 23, 0.85);
    backdrop-filter: blur(14px);
}
.upload-card::before {
    content: "";
    position: absolute; inset: 0; border-radius: inherit;
    background: linear-gradient(135deg, rgba(56, 189, 248, 0.14), transparent 40%);
    pointer-events: none;
}
@media (min-width: 640px) { .upload-card { padding: 1.75rem; } }

.upload-section-title {
    font-size: 0.78rem;
    font-weight: 700;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: 0.12em;
}

/* primary action */
.upload-submit {
    width: 100%;
    color: #052e1f;
    font-weight: 700;
    padding: 0.95rem 1rem;
    border-radius: 0.9rem;
    background: linear-gradient(135deg, #34d399 0%, #22d3ee 100%);
    box-shadow: 0 18px 40px -16px rgba(34, 211, 238, 0.55);
    transition: opacity 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease;
    min-height: 52px;
}
.upload-submit:disabled { opacity: 0.45; box-shadow: none; cursor: not-allowed; }
.upload-submit:not(:disabled):hover { transform: translateY(-1px); }

.upload-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    padding: 0.7rem 0.85rem;
    border-radius: 0.8rem;
    font-weight: 600;
    font-size: 0.9rem;
    min-height: 46px;
    transition: transform 0.15s ease, background 0.2s ease;
}
.upload-action--primary {
    color: #052e1f;
    background: linear-gradient(135deg, #34d399, #22d3ee);
}
.upload-action--accent {
    color: #052e1f;
    background: linear-gradient(135deg, #facc15, #fb923c);
}
.upload-action--ghost {
    color: #e2e8f0;
    background: rgba(148, 163, 184, 0.14);
    border: 1px solid rgba(148, 163, 184, 0.18);
}
.upload-action:hover { transform: translateY(-1px); }

/* ----- template carousel ----- */
.template-carousel {
    position: relative;
    margin-top: 0.75rem;
}
.template-carousel__track {
    display: flex;
    gap: 1rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    padding: 0.5rem 0.25rem 1rem;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}
.template-carousel__track::-webkit-scrollbar { display: none; }

.template-carousel__slide {
    flex: 0 0 80%;
    max-width: 320px;
    scroll-snap-align: center;
    border-radius: 1.5rem;
    padding: 1rem;
    background: linear-gradient(160deg, rgba(15, 23, 42, 0.7), rgba(2, 6, 23, 0.7));
    border: 1px solid rgba(148, 163, 184, 0.16);
    cursor: pointer;
    transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
    text-align: center;
    color: #cbd5e1;
}
.template-carousel__slide:hover { transform: translateY(-2px); }
.template-carousel__slide.is-selected {
    border-color: rgba(52, 211, 153, 0.65);
    box-shadow: 0 22px 40px -22px rgba(34, 211, 238, 0.55), inset 0 0 0 1px rgba(52, 211, 153, 0.55);
    color: #ecfeff;
}
.template-carousel__label {
    display: block;
    font-weight: 700;
    font-size: 0.95rem;
    margin-bottom: 0.65rem;
    letter-spacing: 0.01em;
}
.template-carousel__preview {
    margin-inline: auto;
    width: 100%;
    max-width: 220px;
}
.template-carousel__nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 38px; height: 38px;
    border-radius: 999px;
    background: rgba(15, 23, 42, 0.7);
    border: 1px solid rgba(148, 163, 184, 0.25);
    color: #f1f5f9;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(8px);
    cursor: pointer;
    z-index: 2;
    transition: background 0.2s ease, transform 0.15s ease;
}
.template-carousel__nav:hover { background: rgba(15, 23, 42, 0.9); }
.template-carousel__nav--prev { left: -4px; }
.template-carousel__nav--next { right: -4px; }
@media (min-width: 640px) {
    .template-carousel__slide { flex: 0 0 45%; max-width: 280px; }
    .template-carousel__nav--prev { left: -10px; }
    .template-carousel__nav--next { right: -10px; }
}

.template-carousel__dots {
    display: flex;
    justify-content: center;
    gap: 0.4rem;
    margin-top: 0.25rem;
}
.template-carousel__dot {
    width: 8px; height: 8px;
    border-radius: 999px;
    background: rgba(148, 163, 184, 0.35);
    transition: background 0.2s ease, transform 0.2s ease;
}
.template-carousel__dot.is-active {
    background: linear-gradient(135deg, #34d399, #22d3ee);
    transform: scale(1.3);
}

/* ===== Preview-stage template carousel + camera icon ===== */

.preview-stage-carousel {
    position: relative;
    width: 100%;
    overflow: hidden;
    border-radius: 1.25rem;
}

.preview-stage-carousel__viewport {
    position: relative;
    width: 100%;
    overflow: hidden;
    touch-action: pan-y;
    border-radius: 1.25rem;
}

.preview-stage-carousel__inner {
    transition: transform 0.32s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.22s ease;
    will-change: transform, opacity;
}

.preview-stage-carousel__inner.is-swiping {
    transition: none;
}

.preview-stage-carousel__inner.is-out-left  { transform: translateX(-105%); opacity: 0; }
.preview-stage-carousel__inner.is-out-right { transform: translateX( 105%); opacity: 0; }
.preview-stage-carousel__inner.is-in-left   { transform: translateX(-105%); opacity: 0; transition: none; }
.preview-stage-carousel__inner.is-in-right  { transform: translateX( 105%); opacity: 0; transition: none; }

.preview-stage-carousel__nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 42px; height: 42px;
    border-radius: 999px;
    background: rgba(15, 23, 42, 0.78);
    border: 1px solid rgba(148, 163, 184, 0.28);
    color: #f1f5f9;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(8px);
    cursor: pointer;
    z-index: 4;
    font-size: 1.4rem;
    line-height: 1;
    transition: background 0.2s ease, transform 0.15s ease, opacity 0.2s ease;
}
.preview-stage-carousel__nav:hover { background: rgba(15, 23, 42, 0.95); }
.preview-stage-carousel__nav:active { transform: translateY(-50%) scale(0.94); }
.preview-stage-carousel__nav--prev { left: 8px; }
.preview-stage-carousel__nav--next { right: 8px; }

.preview-stage-carousel__label {
    position: absolute;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 4;
    padding: 0.25rem 0.75rem;
    border-radius: 999px;
    background: rgba(15, 23, 42, 0.78);
    border: 1px solid rgba(148, 163, 184, 0.28);
    font-size: 0.72rem;
    font-weight: 600;
    color: #e2e8f0;
    letter-spacing: 0.04em;
    backdrop-filter: blur(8px);
    pointer-events: none;
}

.preview-stage-carousel__dots {
    display: flex;
    justify-content: center;
    gap: 0.4rem;
    margin-top: 0.6rem;
}

/* upload action row — single horizontal row */
.upload-action-row {
    display: flex;
    flex-wrap: nowrap;
    gap: 0.6rem;
    align-items: stretch;
    overflow-x: auto;
    scrollbar-width: none;
    padding-bottom: 0.25rem;
}
.upload-action-row::-webkit-scrollbar { display: none; }
.upload-action-row > * {
    flex: 1 1 0;
    min-width: 0;
    white-space: nowrap;
}

/* camera icon placeholder (replaces YN initials before any input) */
.preview-camera-icon {
    width: clamp(48px, 11vw, 72px);
    height: clamp(48px, 11vw, 72px);
    color: rgba(255, 255, 255, 0.85);
    filter: drop-shadow(0 4px 14px rgba(15, 23, 42, 0.45));
}

.display-card__placeholder--icon {
    font-size: 0; /* hide any text fallback */
    letter-spacing: 0;
}
.display-card__placeholder--icon::after {
    content: "";
    display: none;
}

/* ===== Plan layers (frame/overlay) + watermark — 2026-05-02 =====
   Frame   = decorative background UNDER the photo (passe-partout, mat).
   Overlay = transparent PNG ABOVE the photo (watermark, logo, stickers).
*/
.display-card { position: relative; }
/* Frame stays a passe-partout around the WHOLE card (photo + name/meta).
   % radius (not px) — stays proportional to this card's own real size. */
.display-card__frame-layer {
position: absolute; inset: 0; pointer-events: none;
width: 100%; height: 100%;
object-fit: cover; object-position: center;
border-radius: calc(8% * var(--d2-radius-scale, 1));
z-index: 0;
}
/* Overlay must sit only above the PHOTO, not stretch over the whole card
   (meta/name area). .display-card__photo is a tight wrapper around the
   image, so an absolutely-positioned overlay inside it matches the photo
   bounds exactly instead of the full card. */
.display-card__photo { position: relative; }
.display-card__photo > .display-card__overlay-layer {
position: absolute; inset: 0; pointer-events: none;
width: 100%; height: 100%;
object-fit: cover; object-position: center;
/* Bez tohto by roh watermarku/loga zostal vždy hranatý nad zaoblenou fotkou. */
border-radius: calc(8% * var(--d2-radius-scale, 1));
z-index: 2;
}
.display-card__image           { position: relative; z-index: 1; }
.display-card__placeholder     { position: relative; z-index: 1; }
.display-card__meta            { position: relative; z-index: 3; }

/* Locked feature placeholder hint (admin) */
[data-locked="1"] { opacity: 0.6; }

/* ===== Mosaic bare-photo mode =====
   Cards strip all decoration (frame, overlay, meta) and show only the raw photo
   while in mosaic position. Class added/removed in display.js enterMosaic/exitMosaic. */
.display-card__overlay-layer,
.display-card__frame-layer,
.display-card__meta {
  transition: opacity 500ms ease;
}
.display-card--mosaic {
  padding: 0 !important;
  gap: 0 !important;
  border-radius: 0 !important;
  background: #000 !important;
  border: none !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  animation: none !important;
}
.display-card--mosaic::before { display: none !important; }
.display-card--mosaic .display-card__overlay-layer,
.display-card--mosaic .display-card__frame-layer,
.display-card--mosaic .display-card__meta {
  opacity: 0 !important;
  transition: opacity 800ms ease !important;
  pointer-events: none;
}
.display-card--mosaic .display-card__meta {
  height: 0 !important;
  min-height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  overflow: hidden !important;
}
.display-card--mosaic .display-card__image {
  border-radius: 0 !important;
  box-shadow: none !important;
  margin: 0;
  display: block;
  width: 100%;
}

/* ===== Plan nav badge ===== */
.plan-nav-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.2rem 0.6rem;
    border-radius: 9999px;
    font-size: 0.6rem;
    font-weight: 800;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    cursor: pointer;
    border: 0;
    transition: opacity 0.15s, transform 0.15s;
    flex-shrink: 0;
}
.plan-nav-badge:hover { opacity: 0.85; transform: scale(1.05); }
.plan-nav-badge--free  { background: rgba(148,163,184,0.18); color: #cbd5e1; border: 1px solid rgba(148,163,184,0.3); }
.plan-nav-badge--basic { background: rgba(16,185,129,0.18); color: #6ee7b7; border: 1px solid rgba(16,185,129,0.4); }
.plan-nav-badge--pro   { background: rgba(168,85,247,0.2); color: #d8b4fe; border: 1px solid rgba(168,85,247,0.4); }

/* ===== FREE plan locked overlay ===== */
.free-locked-overlay {
    position: relative;
    isolation: isolate;
}
.free-locked-overlay::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: rgba(2, 6, 23, 0.72);
    backdrop-filter: blur(2px);
    z-index: 10;
    pointer-events: none;
}
.free-lock-banner {
    position: absolute;
    inset: 0;
    z-index: 20;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    text-align: center;
    padding: 1.5rem;
    pointer-events: none;
}
.free-lock-icon {
    font-size: 2rem;
    line-height: 1;
}
.free-lock-title {
    font-size: 0.85rem;
    font-weight: 700;
    color: #f1f5f9;
}
.free-lock-desc {
    font-size: 0.7rem;
    color: #94a3b8;
    max-width: 220px;
}
.free-lock-cta {
    pointer-events: auto;
    margin-top: 0.25rem;
    font-size: 0.7rem;
    font-weight: 700;
    padding: 0.35rem 1rem;
    border-radius: 9999px;
    background: linear-gradient(135deg, #059669, #10b981);
    color: #052e1c;
    text-decoration: none;
    display: inline-block;
    transition: opacity 0.15s;
}
.free-lock-cta:hover { opacity: 0.85; }

/* ===== Template picker (admin event-detail "Allowed templates") ===== */
.template-picker-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
	gap: 0.75rem;
}
.template-picker-card {
	display: flex;
	flex-direction: column;
	gap: 0.4rem;
	padding: 0.5rem;
	background: rgba(15, 23, 42, 0.6);
	border: 1px solid rgba(71, 85, 105, 0.6);
	border-radius: 0.75rem;
	cursor: pointer;
	transition: border-color 0.15s, transform 0.15s;
	position: relative;
}
.template-picker-card:hover { border-color: rgba(16, 185, 129, 0.6); transform: translateY(-1px); }
.template-picker-card.is-checked { border-color: #10b981; box-shadow: 0 0 0 1px #10b981 inset; }
.template-picker-card.is-locked {
	cursor: not-allowed;
	border-color: rgba(245, 158, 11, 0.55);
	background: linear-gradient(180deg, rgba(120, 53, 15, 0.18), rgba(15, 23, 42, 0.65));
	box-shadow: 0 0 0 1px rgba(245, 158, 11, 0.25) inset;
}
.template-picker-card.is-locked:hover {
	transform: translateY(-1px);
	border-color: rgba(252, 211, 77, 0.85);
	box-shadow:
		0 0 0 1px rgba(252, 211, 77, 0.4) inset,
		0 8px 24px -8px rgba(245, 158, 11, 0.45);
}
.template-picker-card.is-locked .template-picker-card__label {
	color: #fcd34d;
}
.template-picker-card__preview { position: relative; overflow: hidden; }
.template-picker-card__lock {
	position: absolute;
	inset: 0;
	z-index: 5;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 0.4rem;
	background:
		radial-gradient(circle at center, rgba(245, 158, 11, 0.28) 0%, transparent 65%),
		linear-gradient(135deg, rgba(15, 23, 42, 0.55) 0%, rgba(2, 6, 23, 0.65) 100%);
	color: #fde68a;
	pointer-events: none;
	transition: background 0.2s ease;
}
.template-picker-card.is-locked:hover .template-picker-card__lock {
	background:
		radial-gradient(circle at center, rgba(245, 158, 11, 0.38) 0%, transparent 65%),
		linear-gradient(135deg, rgba(15, 23, 42, 0.45) 0%, rgba(2, 6, 23, 0.55) 100%);
}
.template-picker-card__lock svg {
	width: 44%;
	max-width: 56px;
	min-width: 28px;
	color: #fde68a;
	filter:
		drop-shadow(0 0 8px rgba(245, 158, 11, 0.6))
		drop-shadow(0 4px 8px rgba(0, 0, 0, 0.7));
	animation: lockPulse 2.4s ease-in-out infinite;
}
@keyframes lockPulse {
	0%, 100% { transform: scale(1); }
	50%      { transform: scale(1.08); }
}
.template-picker-card > input[type="checkbox"] {
	position: absolute;
	top: 0.4rem;
	right: 0.4rem;
	z-index: 2;
	accent-color: #10b981;
}
.template-picker-card__preview {
	width: 100%;
	border-radius: 0.5rem;
	pointer-events: none;
	padding: 6px;
	gap: 4px;
}
.template-picker-card__preview .display-card__placeholder {
	min-height: 64px;
	font-size: 1.2rem;
	letter-spacing: 0.05em;
	border-radius: 10px;
}
.template-picker-card__preview .display-card__placeholder::after { display: none; }
.template-picker-card__preview .display-card__name {
	font-size: 0.7rem;
	line-height: 1;
}
.template-picker-card__preview .display-card__text { display: none; }
.template-picker-card__preview::before { opacity: 0.85; }
.template-picker-card__label {
	display: flex;
	flex-direction: column;
	gap: 0.2rem;
	font-size: 0.78rem;
	color: #e2e8f0;
	text-align: center;
}
.template-picker-card__badge {
	display: inline-block;
	font-size: 0.6rem;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	padding: 0.1rem 0.45rem;
	border-radius: 9999px;
	background: rgba(245, 158, 11, 0.2);
	color: #fbbf24;
	align-self: center;
}
.template-picker-card__badge--pro {
	background: rgba(217, 70, 239, 0.2);
	color: #f0abfc;
}
.template-picker-card__badge--locked {
	background: rgba(245, 158, 11, 0.25);
	color: #fcd34d;
	border: 1px solid rgba(245, 158, 11, 0.5);
}

/* ===== Display card photo wrap ===== */
.display-card__photo-wrap {
	position: relative;
	display: inline-block;
	line-height: 0;
}

/* Segmented control (button-style radio group) */
.seg-control {
	display: inline-flex;
	flex-wrap: wrap;
	gap: 6px;
	padding: 4px;
	background: rgba(255, 255, 255, 0.04);
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: 10px;
}
.seg-control__opt {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 6px 12px;
	border-radius: 7px;
	cursor: pointer;
	font-size: 12px;
	line-height: 1;
	color: rgba(226, 232, 240, 0.85);
	background: transparent;
	border: 1px solid transparent;
	transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
	user-select: none;
}
.seg-control__opt:hover {
	background: rgba(255, 255, 255, 0.06);
	color: #f8fafc;
}
.seg-control__opt input[type="radio"] {
	position: absolute;
	opacity: 0;
	pointer-events: none;
	width: 0;
	height: 0;
}
.seg-control__opt.is-active {
	background: linear-gradient(135deg, rgba(56, 189, 248, 0.22), rgba(99, 102, 241, 0.22));
	border-color: rgba(125, 211, 252, 0.55);
	color: #f8fafc;
	box-shadow: 0 1px 0 rgba(255, 255, 255, 0.06) inset, 0 0 0 1px rgba(125, 211, 252, 0.15);
}
.seg-control__opt:focus-within {
	outline: 2px solid rgba(125, 211, 252, 0.55);
	outline-offset: 1px;
}
.seg-control__opt.is-locked {
	opacity: 0.55;
	cursor: not-allowed;
}
.seg-control__opt.is-locked:hover {
	background: transparent;
	color: rgba(226, 232, 240, 0.85);
}
.seg-control__icon {
	font-size: 14px;
	line-height: 1;
}
.seg-control__label {
	font-weight: 500;
	letter-spacing: 0.01em;
}

/* ---- Corner logo (legacy, no longer rendered per-card) ---- */
.display-card__corner-logo { display: none; }

/* ---- Screen-level branding overlay (logo, sponsor, event title/date) ---- */
.display-branding__img {
        position: absolute;
        width: clamp(48px, 8vw, 140px);
        height: clamp(48px, 8vw, 140px);
        object-fit: contain;
        filter: drop-shadow(0 2px 10px rgba(0,0,0,0.7));
        pointer-events: none;
}
.display-branding--tl { top:    2.5%; left:  2.5%; }
.display-branding--tr { top:    2.5%; right: 2.5%; }
.display-branding--bl { bottom: 2.5%; left:  2.5%; }
.display-branding--br { bottom: 2.5%; right: 2.5%; }

/* QR kód (odkaz na upload stránku) — biele pozadie kvôli skenovateľnosti
   (moduly loga potrebujú kontrast bez ohľadu na to, čo je pod nimi na obrazovke). */
.display-branding__qr {
        position: absolute;
        width: clamp(64px, 9vw, 160px);
        height: clamp(64px, 9vw, 160px);
        background: #fff;
        border-radius: 12px;
        padding: 6px;
        box-shadow: 0 2px 10px rgba(0,0,0,0.5);
        pointer-events: none;
}
.display-branding__qr img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: contain;
}

.display-branding__meta {
        position: absolute;
        bottom: 2.5%;
        left: 50%;
        transform: translateX(-50%);
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 4px;
        text-align: center;
        pointer-events: none;
        max-width: 80vw;
}
.display-branding__title {
        font-size: clamp(14px, 2.2vw, 32px);
        font-weight: 700;
        color: rgba(255,255,255,0.92);
        text-shadow: 0 2px 14px rgba(0,0,0,0.85);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 100%;
        letter-spacing: 0.02em;
}
.display-branding__date {
        font-size: clamp(11px, 1.4vw, 20px);
        font-weight: 400;
        color: rgba(255,255,255,0.6);
        text-shadow: 0 2px 8px rgba(0,0,0,0.8);
        white-space: nowrap;
}

/* ── Fullscreen button ─────────────────────────────────────── */
#fsBtn {
        position: fixed;
        top: 14px;
        right: 14px;
        z-index: 9999;
        width: 40px;
        height: 40px;
        padding: 8px;
        border: none;
        border-radius: 10px;
        background: rgba(0, 0, 0, 0.45);
        color: rgba(255, 255, 255, 0.75);
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        backdrop-filter: blur(8px);
        -webkit-backdrop-filter: blur(8px);
        box-shadow: 0 2px 12px rgba(0,0,0,0.5);
        opacity: 1;
        transition: opacity 400ms ease, background 200ms ease;
}
#fsBtn:hover {
        background: rgba(255, 255, 255, 0.18);
        color: #fff;
}
#fsBtn svg {
        width: 100%;
        height: 100%;
        display: block;
}
#fsBtn.ui-hidden,
#stage.cursor-hidden #fsBtn {
        opacity: 0;
        pointer-events: none;
}
#stage.cursor-hidden {
        cursor: none;
}

/* ===== Autosave toast (admin event-detail) ===== */
.autosave-indicator {
    position: fixed;
    left: 50%;
    bottom: 24px;
    transform: translate(-50%, 20px);
    z-index: 9000;
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.55rem 1rem;
    border-radius: 999px;
    background: rgba(15, 23, 42, 0.95);
    border: 1px solid rgba(148, 163, 184, 0.25);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45);
    color: #e2e8f0;
    font-size: 0.78rem;
    font-weight: 500;
    pointer-events: none;
    opacity: 0;
    transition: opacity 220ms ease, transform 220ms ease;
}
.autosave-indicator.is-visible {
    opacity: 1;
    transform: translate(-50%, 0);
}
.autosave-indicator__dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #64748b;
    flex-shrink: 0;
}
.autosave-indicator[data-state="dirty"] .autosave-indicator__dot { background: #fbbf24; }
.autosave-indicator[data-state="saving"] .autosave-indicator__dot { background: #38bdf8; animation: autosave-pulse 1.1s ease-in-out infinite; }
.autosave-indicator[data-state="saved"] .autosave-indicator__dot { background: #22c55e; }
.autosave-indicator[data-state="error"] .autosave-indicator__dot { background: #ef4444; }
.autosave-indicator[data-state="error"] {
    border-color: rgba(239, 68, 68, 0.5);
    background: rgba(69, 10, 10, 0.95);
}
@keyframes autosave-pulse {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.35; }
}

/* ===== Collapsible sections in admin event-detail ===== */
.ev-collapse {
    border: 1px solid rgba(148, 163, 184, 0.25);
    border-radius: 0.5rem;
    background: rgba(15, 23, 42, 0.35);
}
.ev-collapse[hidden] { display: none; }
.ev-collapse__summary {
    cursor: pointer;
    padding: 0.55rem 0.75rem;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #cbd5e1;
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    user-select: none;
}
.ev-collapse__summary::-webkit-details-marker { display: none; }
.ev-collapse__summary::before {
    content: "▸";
    color: #64748b;
    font-size: 0.7rem;
    transition: transform 180ms ease;
    margin-right: 0.4rem;
}
.ev-collapse[open] > .ev-collapse__summary::before { transform: rotate(90deg); display: inline-block; }
.ev-collapse__hint {
    margin-left: auto;
    font-size: 0.62rem;
    text-transform: none;
    letter-spacing: 0;
    color: #64748b;
    font-weight: 400;
}
.ev-collapse[open] .ev-collapse__hint { display: none; }
.ev-collapse__body {
    padding: 0 0.75rem 0.75rem;
}