:root {
  color-scheme: dark;
  --bg: #030105;
  --surface: rgba(7, 5, 11, .86);
  --surface-strong: rgba(12, 8, 18, .96);
  --text: #f8f6fb;
  --muted: #aaa4b2;
  --cyan: #00efff;
  --pink: #ff20bd;
  --yellow: #ffe323;
  --green: #68ff1e;
  --violet: #8247ff;
  --red: #ff3b65;
  --border: rgba(255,255,255,.12);
  --radius: 24px;
  --shadow: 0 22px 70px rgba(0,0,0,.55);
  --font-display: "Arial Black", "Trebuchet MS", system-ui, sans-serif;
  --font-body: "Trebuchet MS", system-ui, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  min-width: 320px;
  color: var(--text);
  background:
    radial-gradient(circle at 15% 10%, rgba(255, 32, 189, .09), transparent 25rem),
    radial-gradient(circle at 88% 16%, rgba(0, 239, 255, .09), transparent 28rem),
    linear-gradient(180deg, #020103, #08030b 40%, #020103);
  font-family: var(--font-body);
  line-height: 1.5;
  overflow-x: hidden;
}
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: .15;
  background-image:
    linear-gradient(rgba(255,255,255,.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px);
  background-size: 50px 50px;
  mask-image: linear-gradient(to bottom, black, transparent 85%);
}
img, video { max-width: 100%; display: block; }
a { color: inherit; }
button, input, select, textarea { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }

.ambient {
  position: fixed;
  z-index: -1;
  width: 420px;
  height: 420px;
  border-radius: 50%;
  filter: blur(100px);
  opacity: .13;
  pointer-events: none;
}
.ambient-one { top: 18%; left: -180px; background: var(--pink); }
.ambient-two { top: 52%; right: -190px; background: var(--cyan); }

.shell { width: min(1440px, calc(100% - 42px)); margin-inline: auto; }

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 22px;
  min-height: 78px;
  padding: 10px max(22px, calc((100vw - 1440px) / 2));
  border-bottom: 1px solid rgba(0, 239, 255, .17);
  background: rgba(3, 1, 5, .82);
  backdrop-filter: blur(18px);
}
.brand { display: inline-flex; align-items: center; gap: 13px; text-decoration: none; font-weight: 900; letter-spacing: .08em; color: var(--yellow); }
.brand img { width: 45px; height: 45px; object-fit: contain; object-position: 46% 50%; border-radius: 50%; }
.main-nav { display: flex; align-items: center; gap: clamp(18px, 3vw, 42px); }
.main-nav a { position: relative; color: #dcd7e2; text-decoration: none; text-transform: uppercase; letter-spacing: .1em; font-size: .86rem; }
.main-nav a::after { content: ""; position: absolute; left: 0; right: 100%; bottom: -7px; height: 2px; background: var(--cyan); box-shadow: 0 0 10px var(--cyan); transition: right .2s ease; }
.main-nav a:hover::after, .main-nav a:focus-visible::after { right: 0; }
.nav-toggle { display: none; color: var(--cyan); border: 1px solid var(--cyan); background: transparent; border-radius: 12px; padding: 8px 12px; }

.neon-card {
  position: relative;
  border: 1px solid transparent;
  border-radius: var(--radius);
  background:
    linear-gradient(var(--surface-strong), var(--surface-strong)) padding-box,
    linear-gradient(120deg, var(--cyan), var(--pink) 34%, var(--yellow) 68%, var(--green)) border-box;
  box-shadow: var(--shadow), 0 0 26px rgba(0, 239, 255, .08), inset 0 0 35px rgba(255,255,255,.018);
  overflow: hidden;
}
.neon-card::after {
  content: "";
  position: absolute;
  pointer-events: none;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(115deg, rgba(255,255,255,.08), transparent 16%, transparent 84%, rgba(255,255,255,.05));
  mix-blend-mode: screen;
}

.hero {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(340px, .7fr);
  gap: 24px;
  padding-top: 34px;
}
.hero-main { min-height: 740px; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: clamp(28px, 4.5vw, 68px); text-align: center; }
.hero-main::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 50% 26%, rgba(0, 239, 255, .12), transparent 27%),
    radial-gradient(circle at 32% 8%, rgba(255, 105, 0, .13), transparent 22%),
    radial-gradient(circle at 70% 35%, rgba(255, 32, 189, .13), transparent 24%);
}
.hero-main > * { position: relative; z-index: 1; }
.hero-logo { width: min(860px, 100%); filter: drop-shadow(0 0 11px rgba(255, 61, 0, .48)) drop-shadow(0 0 22px rgba(0, 239, 255, .18)); }
.eyebrow { margin: 16px 0 8px; color: var(--cyan); text-transform: uppercase; letter-spacing: .22em; font-weight: 900; font-size: .83rem; }
.hero h1 { margin: 8px 0 24px; color: #fff4a8; font-family: var(--font-display); text-transform: uppercase; font-style: italic; font-size: clamp(2rem, 4.4vw, 4.25rem); line-height: 1.03; letter-spacing: .02em; text-shadow: 0 0 9px #ffc400, 0 0 30px rgba(255, 174, 0, .45); }
.event-chips { width: 100%; display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.chip { min-height: 88px; display: flex; flex-direction: column; justify-content: center; padding: 12px; border: 1px solid currentColor; border-radius: 15px; background: rgba(0,0,0,.42); box-shadow: inset 0 0 16px color-mix(in srgb, currentColor 15%, transparent); }
.chip span { text-transform: uppercase; letter-spacing: .13em; font-size: .72rem; opacity: .83; }
.chip strong { font-size: clamp(.88rem, 1.35vw, 1.12rem); line-height: 1.2; }
.chip-cyan { color: var(--cyan); } .chip-pink { color: var(--pink); } .chip-yellow { color: var(--yellow); } .chip-green { color: var(--green); }
.tagline { margin: 28px 0 0; display: flex; flex-direction: column; line-height: .95; transform: rotate(-1deg); }
.tagline span, .tagline strong { font-family: "Brush Script MT", "Segoe Script", cursive; font-weight: 700; }
.tagline span { color: #ff69cb; font-size: clamp(2.1rem, 4.2vw, 4rem); text-shadow: 0 0 12px var(--pink); }
.tagline strong { color: #23dcff; font-size: clamp(1.8rem, 3.5vw, 3.4rem); text-shadow: 0 0 12px var(--cyan); }
.hero-copy { max-width: 710px; margin: 20px auto; color: #d5d0db; letter-spacing: .045em; }
.hero-actions { display: flex; justify-content: center; flex-wrap: wrap; gap: 14px; width: 100%; }
.button { position: relative; z-index: 1; display: inline-flex; align-items: center; justify-content: center; min-height: 50px; padding: 12px 22px; border-radius: 12px; border: 1px solid currentColor; background: rgba(8, 5, 12, .88); color: #fff; text-decoration: none; text-transform: uppercase; letter-spacing: .08em; font-weight: 900; cursor: pointer; transition: transform .16s ease, box-shadow .16s ease, background .16s ease; }
.button:hover, .button:focus-visible { transform: translateY(-2px); background: rgba(255,255,255,.06); }
.button-pink { color: #ff8ee2; box-shadow: 0 0 9px rgba(255,32,189,.65), inset 0 0 16px rgba(255,32,189,.14); }
.button-cyan { color: #71f7ff; box-shadow: 0 0 9px rgba(0,239,255,.55), inset 0 0 16px rgba(0,239,255,.12); }
.button-wide { width: 100%; }
.countdown { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; width: min(560px, 100%); margin-top: 26px; }
.countdown div { padding: 10px 8px; border-top: 1px solid rgba(0,239,255,.38); background: rgba(0,0,0,.25); }
.countdown strong { display: block; color: var(--yellow); font-family: var(--font-display); font-size: 1.55rem; text-shadow: 0 0 10px rgba(255,227,35,.5); }
.countdown span { color: var(--muted); text-transform: uppercase; font-size: .69rem; letter-spacing: .12em; }

.wall-panel { min-height: 740px; display: flex; flex-direction: column; padding: 25px 22px; }
.panel-heading { position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; gap: 18px; }
.panel-heading h2 { margin: 0; color: var(--pink); font-family: "Brush Script MT", "Segoe Script", cursive; font-size: clamp(2.2rem, 4vw, 3.4rem); line-height: 1; text-shadow: 0 0 13px var(--pink); }
.panel-heading span, .lightning { color: var(--pink); font-size: 1.8rem; }
.panel-note { position: relative; z-index: 1; margin: 10px 0 20px; color: var(--muted); text-align: center; font-size: .9rem; }
.wall-list { position: relative; z-index: 1; flex: 1; min-height: 330px; max-height: 430px; overflow: auto; padding-right: 8px; scrollbar-color: var(--cyan) rgba(255,255,255,.06); }
.wall-loading, .wall-empty { padding: 45px 10px; color: var(--muted); text-align: center; }
.wall-item { display: grid; grid-template-columns: 48px 1fr; gap: 13px; padding: 15px 5px; border-bottom: 1px solid rgba(255,255,255,.09); }
.wall-avatar { width: 48px; height: 48px; display: grid; place-items: center; border: 1px solid currentColor; border-radius: 50%; color: var(--cyan); font-weight: 900; box-shadow: 0 0 12px currentColor; }
.wall-item:nth-child(4n + 2) .wall-avatar, .wall-item:nth-child(4n + 2) .wall-name { color: var(--pink); }
.wall-item:nth-child(4n + 3) .wall-avatar, .wall-item:nth-child(4n + 3) .wall-name { color: var(--yellow); }
.wall-item:nth-child(4n) .wall-avatar, .wall-item:nth-child(4n) .wall-name { color: var(--green); }
.wall-meta { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.wall-name { color: var(--cyan); font-weight: 900; }
.wall-time { color: #8f8997; font-size: .73rem; white-space: nowrap; }
.wall-message { margin: 4px 0 0; color: #f0edf2; overflow-wrap: anywhere; }
.wall-form { position: relative; z-index: 1; display: grid; grid-template-columns: .72fr 1.5fr auto; align-items: end; gap: 9px; padding-top: 18px; }
.wall-form label, .rsvp-form label, .admin-login label { display: flex; flex-direction: column; gap: 6px; color: #c9c3cd; text-transform: uppercase; letter-spacing: .08em; font-weight: 800; font-size: .72rem; }
.wall-form textarea { height: 48px; min-height: 48px; resize: vertical; }
.wall-form .button { min-height: 48px; padding-inline: 16px; }
.form-status { grid-column: 1 / -1; min-height: 1.4em; margin: 2px 0 0; color: var(--cyan); font-size: .82rem; text-align: center; }
.form-status.error { color: #ff829c; }
.honeypot { position: absolute !important; left: -10000px !important; width: 1px !important; height: 1px !important; overflow: hidden !important; }

input, select, textarea {
  width: 100%;
  color: var(--text);
  border: 1px solid rgba(255,255,255,.22);
  border-radius: 10px;
  background: rgba(255,255,255,.045);
  outline: none;
  padding: 12px 13px;
  transition: border-color .15s ease, box-shadow .15s ease;
}
input:focus, select:focus, textarea:focus { border-color: var(--cyan); box-shadow: 0 0 0 3px rgba(0,239,255,.11), 0 0 10px rgba(0,239,255,.2); }

.feature-grid, .content-grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(310px, .7fr); gap: 24px; margin-top: 24px; }
.video-card { min-height: 410px; }
.video-card video { width: 100%; height: 100%; min-height: 410px; object-fit: cover; }
.video-placeholder { position: relative; min-height: 410px; display: grid; align-content: center; justify-items: center; padding: 28px; text-align: center; background:
  linear-gradient(rgba(2,1,5,.25), rgba(2,1,5,.78)),
  url("../img/flyer_front.webp") center 26% / cover no-repeat;
}
.video-placeholder::after { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(to bottom, transparent 0 4px, rgba(255,255,255,.025) 5px); pointer-events: none; }
.play-orb { width: 96px; height: 96px; display: grid; place-items: center; padding-left: 6px; border-radius: 50%; border: 3px solid var(--cyan); color: white; font-size: 2.2rem; background: rgba(0,0,0,.58); box-shadow: 0 0 0 4px var(--pink), 0 0 28px var(--cyan), inset 0 0 26px rgba(255,32,189,.4); }
.video-title { margin: 25px 0 0; color: white; font-family: var(--font-display); text-transform: uppercase; letter-spacing: .08em; font-size: clamp(1.3rem, 2vw, 2rem); text-shadow: 0 0 13px var(--cyan); }
.video-placeholder > p:last-child { color: #cac4cd; }
.dress-card { min-height: 410px; display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 38px; text-align: center; }
.dress-card h2 { margin: 0; color: var(--yellow); font-family: var(--font-display); font-size: clamp(2.2rem, 4vw, 4rem); text-transform: uppercase; text-shadow: 0 0 15px rgba(255,227,35,.6); }
.dress-card p:not(.eyebrow) { max-width: 440px; color: #d7d1dc; font-size: 1.05rem; }
.dress-years { color: var(--pink); text-transform: uppercase; letter-spacing: .14em; font-weight: 900; }
.equalizer { display: flex; align-items: end; gap: 4px; width: min(420px, 100%); height: 74px; margin-top: 28px; }
.equalizer i { flex: 1; min-width: 3px; border-radius: 8px 8px 2px 2px; background: linear-gradient(to top, var(--pink), var(--yellow), var(--green), var(--cyan)); box-shadow: 0 0 8px currentColor; animation: equalize 1.2s ease-in-out infinite alternate; }
.equalizer i:nth-child(5n+1) { height: 28%; animation-delay: -.3s; }
.equalizer i:nth-child(5n+2) { height: 68%; animation-delay: -.8s; }
.equalizer i:nth-child(5n+3) { height: 100%; animation-delay: -.45s; }
.equalizer i:nth-child(5n+4) { height: 47%; animation-delay: -.9s; }
.equalizer i:nth-child(5n) { height: 82%; animation-delay: -.1s; }
@keyframes equalize { to { transform: scaleY(.4); transform-origin: bottom; opacity: .7; } }

.content-grid { grid-template-columns: minmax(0, .88fr) minmax(0, 1.12fr); }
.rsvp-card, .reach-card { padding: clamp(24px, 3vw, 38px); }
.rsvp-form { position: relative; z-index: 1; display: grid; gap: 20px; margin-top: 26px; }
.form-row { display: grid; grid-template-columns: 1fr 130px; gap: 12px; }
.rsvp-form textarea { min-height: 122px; resize: vertical; }
.rsvp-form fieldset { margin: 0; padding: 0; border: 0; }
.rsvp-form legend { margin-bottom: 9px; color: #c9c3cd; text-transform: uppercase; letter-spacing: .08em; font-weight: 800; font-size: .72rem; }
.attendance-options { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; }
.attendance { position: relative; }
.attendance input { position: absolute; opacity: 0; pointer-events: none; }
.attendance span { display: grid; place-items: center; min-height: 48px; padding: 8px; border: 1px solid currentColor; border-radius: 11px; color: #aaa; background: rgba(0,0,0,.28); text-align: center; transition: all .15s ease; }
.attendance.yes span { color: var(--green); } .attendance.maybe span { color: var(--yellow); } .attendance.no span { color: var(--pink); }
.attendance input:checked + span { background: color-mix(in srgb, currentColor 13%, transparent); box-shadow: 0 0 12px currentColor, inset 0 0 16px color-mix(in srgb, currentColor 11%, transparent); transform: translateY(-1px); }
.map-frame { position: relative; z-index: 1; display: block; margin-top: 22px; border: 1px solid rgba(0,239,255,.5); border-radius: 18px; overflow: hidden; text-decoration: none; }
.map-frame img { width: 100%; aspect-ratio: 1.88 / 1; object-fit: cover; }
.map-frame span { position: absolute; right: 12px; bottom: 12px; padding: 7px 10px; border: 1px solid var(--cyan); border-radius: 9px; background: rgba(0,0,0,.76); color: var(--cyan); text-transform: uppercase; font-size: .7rem; letter-spacing: .09em; }
.gps-link { position: relative; z-index: 1; display: block; margin: 14px 0; padding: 13px; border: 1px solid var(--yellow); border-radius: 12px; color: var(--yellow); text-align: center; text-decoration: none; letter-spacing: .08em; font-weight: 900; box-shadow: 0 0 12px rgba(255,227,35,.18); }
.route-steps { position: relative; z-index: 1; display: grid; gap: 10px; margin: 18px 0 0; padding-left: 25px; color: #d4cfd8; }
.route-steps li::marker { color: var(--cyan); font-weight: 900; }

.flyer-strip { display: grid; grid-template-columns: minmax(180px, 290px) 1fr; align-items: center; gap: clamp(25px, 5vw, 70px); margin-top: 24px; padding: 26px; border-top: 1px solid rgba(255,32,189,.45); border-bottom: 1px solid rgba(0,239,255,.42); }
.flyer-strip img { border-radius: 16px; box-shadow: 0 0 22px rgba(255,32,189,.22); }
.flyer-strip h2 { margin: 0; color: var(--yellow); font-family: var(--font-display); text-transform: uppercase; font-size: clamp(2rem, 4vw, 4.1rem); line-height: 1; }
.flyer-strip p:last-child { color: #c8c2cc; max-width: 720px; }
.site-footer { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 10px; min-height: 110px; padding: 30px 20px; color: var(--yellow); text-transform: uppercase; letter-spacing: .11em; text-align: center; font-size: .78rem; }
.site-footer span { color: var(--cyan); text-shadow: 0 0 9px var(--cyan); }
.site-footer a { margin-left: 16px; color: #625d68; text-decoration: none; text-transform: none; letter-spacing: normal; }

/* Admin */
.admin-page { min-height: 100vh; }
.admin-login-wrap { min-height: 100vh; display: grid; place-items: center; padding: 25px; }
.admin-login { width: min(460px, 100%); padding: 35px; text-align: center; }
.admin-login img { width: 100%; margin: 0 auto 12px; }
.admin-login h1 { color: var(--pink); text-transform: uppercase; letter-spacing: .1em; }
.admin-login form { display: grid; gap: 18px; text-align: left; }
.back-link { display: inline-block; margin-top: 20px; color: var(--cyan); }
.flash { padding: 10px; border-radius: 10px; background: rgba(255,59,101,.12); color: #ff9caf; }
.admin-header { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 14px max(22px, calc((100vw - 1500px) / 2)); border-bottom: 1px solid rgba(0,239,255,.18); background: #050208; }
.admin-shell { width: min(1500px, calc(100% - 32px)); margin: 30px auto 70px; }
.stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.stat { padding: 24px; }
.stat span { display: block; color: var(--muted); text-transform: uppercase; letter-spacing: .08em; font-size: .72rem; }
.stat strong { color: var(--yellow); font-family: var(--font-display); font-size: 2.6rem; }
.admin-section { margin-top: 22px; padding: 24px; overflow: visible; }
.admin-section-head { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 18px; }
.admin-section-head h1 { margin: 0; color: white; }
.admin-section-head .eyebrow { margin: 0 0 4px; }
.table-wrap { position: relative; z-index: 1; overflow: auto; }
table { width: 100%; border-collapse: collapse; min-width: 820px; }
th, td { padding: 12px 10px; border-bottom: 1px solid rgba(255,255,255,.09); text-align: left; vertical-align: top; }
th { color: var(--cyan); text-transform: uppercase; letter-spacing: .08em; font-size: .7rem; }
td { color: #ddd7e1; }
.status-badge { display: inline-block; min-width: 54px; padding: 4px 7px; border: 1px solid currentColor; border-radius: 999px; text-align: center; text-transform: uppercase; font-size: .68rem; }
.status-badge.yes { color: var(--green); } .status-badge.maybe { color: var(--yellow); } .status-badge.no { color: var(--pink); }
.actions-cell { display: flex; gap: 7px; }
.actions-cell form { margin: 0; }
.table-action { border: 1px solid var(--cyan); border-radius: 8px; background: transparent; color: var(--cyan); padding: 6px 9px; cursor: pointer; }
.table-action.danger { border-color: var(--red); color: #ff7893; }

@media (max-width: 1050px) {
  .hero { grid-template-columns: 1fr; }
  .wall-panel { min-height: auto; }
  .wall-list { max-height: 430px; }
  .feature-grid, .content-grid { grid-template-columns: 1fr; }
  .dress-card { min-height: 330px; }
}

@media (max-width: 760px) {
  .shell { width: min(100% - 24px, 680px); }
  .site-header { min-height: 66px; padding-inline: 13px; }
  .brand span { display: none; }
  .nav-toggle { display: block; }
  .main-nav { display: none; position: absolute; top: 66px; left: 12px; right: 12px; flex-direction: column; align-items: stretch; gap: 0; padding: 10px; border: 1px solid var(--cyan); border-radius: 14px; background: rgba(3,1,5,.96); box-shadow: 0 16px 40px rgba(0,0,0,.55); }
  .main-nav.open { display: flex; }
  .main-nav a { padding: 13px; }
  .hero { padding-top: 16px; gap: 14px; }
  .hero-main { min-height: auto; padding: 28px 17px; }
  .hero-logo { width: 100%; }
  .hero h1 { font-size: clamp(1.75rem, 9vw, 2.7rem); }
  .event-chips { grid-template-columns: repeat(2, 1fr); }
  .tagline span { font-size: 2.45rem; }
  .tagline strong { font-size: 2.05rem; }
  .hero-actions { flex-direction: column; }
  .hero-actions .button { width: 100%; }
  .wall-panel { padding: 22px 15px; }
  .wall-form { grid-template-columns: 1fr; }
  .wall-form .button { width: 100%; }
  .feature-grid, .content-grid { gap: 14px; margin-top: 14px; }
  .video-card, .video-placeholder, .video-card video { min-height: 320px; }
  .form-row { grid-template-columns: 1fr 100px; }
  .attendance-options { grid-template-columns: 1fr; }
  .map-frame img { aspect-ratio: 1.45 / 1; }
  .flyer-strip { grid-template-columns: 110px 1fr; gap: 18px; padding-inline: 4px; }
  .flyer-strip h2 { font-size: 1.65rem; }
  .flyer-strip p:last-child { font-size: .88rem; }
  .stats-grid { grid-template-columns: repeat(2, 1fr); }
  .admin-section-head { align-items: flex-start; flex-direction: column; }
}

@media (max-width: 440px) {
  .event-chips { grid-template-columns: 1fr; }
  .chip { min-height: 70px; }
  .countdown { gap: 4px; }
  .countdown strong { font-size: 1.15rem; }
  .form-row { grid-template-columns: 1fr; }
  .flyer-strip { grid-template-columns: 1fr; text-align: center; }
  .flyer-strip img { max-width: 190px; margin-inline: auto; }
  .stats-grid { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}

/* v0.3 — personal invitations */
.personal-welcome {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-top: 24px;
  padding: 18px 22px;
  border: 1px solid rgba(0,239,255,.55);
  border-radius: 18px;
  background: linear-gradient(100deg, rgba(0,239,255,.08), rgba(255,32,189,.08));
  box-shadow: 0 0 24px rgba(0,239,255,.1);
}
.personal-welcome span { display: block; color: var(--cyan); text-transform: uppercase; letter-spacing: .18em; font-size: .7rem; }
.personal-welcome strong { display: block; margin-top: 2px; color: #fff; font-size: clamp(1.2rem, 2.2vw, 1.8rem); }
.personal-welcome p { margin: 4px 0 0; color: #cfc8d4; }
.form-hint { margin: -8px 0 0; color: var(--cyan); font-size: .82rem; }
.invitation-replay img { width: 100%; aspect-ratio: 1200 / 630; object-fit: cover; }
.invitation-replay .button { margin-top: 12px; }
.flyer-strip-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }

.flash.success { background: rgba(104,255,30,.11); color: #baff9b; }
.status-badge.pending { color: var(--cyan); }
.invitation-create {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(220px, 1.2fr) 160px minmax(250px, 1.4fr) auto;
  gap: 12px;
  align-items: end;
  margin-bottom: 24px;
  padding: 18px;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 16px;
  background: rgba(0,0,0,.22);
}
.invitation-create label { display: grid; gap: 7px; color: #c9c3cd; text-transform: uppercase; letter-spacing: .08em; font-size: .72rem; font-weight: 800; }
.invitation-import-box {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(300px, 1fr) minmax(260px, .9fr);
  gap: 14px;
  align-items: center;
  margin: -10px 0 24px;
  padding: 16px 18px;
  border: 1px solid rgba(0,239,255,.22);
  border-radius: 16px;
  background: rgba(0,239,255,.035);
}
.invitation-import { display: grid; grid-template-columns: 1fr auto; gap: 12px; align-items: end; }
.invitation-import label { display: grid; gap: 7px; color: #c9c3cd; text-transform: uppercase; letter-spacing: .08em; font-size: .72rem; font-weight: 800; }
.invitation-import input[type="file"] { min-height: 48px; padding: 10px; color: #d9d3dd; }
.invitation-import-help { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 10px; }
.invitation-import-help p { flex: 1 1 260px; margin: 0; color: var(--muted); font-size: .78rem; line-height: 1.55; }
.invitation-import-help code { color: var(--cyan); }
.invitation-import-help a { display: inline-grid; place-items: center; text-decoration: none; white-space: nowrap; }
.invitation-list { position: relative; z-index: 1; display: grid; gap: 13px; }
.invitation-item { padding: 18px; border: 1px solid rgba(0,239,255,.2); border-radius: 16px; background: rgba(0,0,0,.26); }
.invitation-item.inactive { opacity: .58; filter: grayscale(.4); }
.invitation-item-main { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; }
.invitation-item h2 { margin: 0; color: #fff; font-size: 1.22rem; }
.invitation-item p { margin: 3px 0 0; color: var(--muted); }
.invitation-url-row { display: grid; grid-template-columns: minmax(280px, 1fr) auto auto auto; gap: 8px; margin-top: 14px; }
.invitation-url-row input { min-width: 0; }
.invitation-url-row a { display: inline-grid; place-items: center; text-decoration: none; }
.invitation-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 9px; margin-top: 12px; }
.invitation-actions form { margin: 0; }
.invitation-actions .button { padding: 7px 11px; min-height: auto; font-size: .72rem; }
.invitation-rsvp { margin-left: auto; color: var(--yellow); font-size: .75rem; }

@media (max-width: 1050px) {
  .invitation-create { grid-template-columns: 1fr 160px; }
  .invitation-import-box { grid-template-columns: 1fr; }
  .invitation-create .wide { grid-column: 1 / -1; }
  .invitation-create .button { width: 100%; }
  .invitation-url-row { grid-template-columns: 1fr auto auto; }
  .invitation-url-row .copy-source { grid-column: 1 / -1; }
}

@media (max-width: 760px) {
  .personal-welcome { align-items: stretch; flex-direction: column; }
  .personal-welcome .button { width: 100%; }
  .invitation-create { grid-template-columns: 1fr; }
  .invitation-import { grid-template-columns: 1fr; }
  .invitation-import .button { width: 100%; }
  .invitation-import-help { justify-content: flex-start; }
  .invitation-create .wide { grid-column: auto; }
  .invitation-item-main { flex-direction: column; }
  .invitation-url-row { grid-template-columns: 1fr 1fr; }
  .invitation-url-row .copy-source { grid-column: 1 / -1; }
  .invitation-url-row .copy-link { grid-column: 1 / -1; }
  .invitation-rsvp { width: 100%; margin-left: 0; }
}


/* WhatsApp desktop/web hand-off */
.whatsapp-launch-page {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 24px;
}
.whatsapp-launch-shell { width: min(680px, 100%); }
.whatsapp-launch-card { padding: clamp(28px, 6vw, 52px); text-align: center; }
.whatsapp-launch-card h1 { margin: 8px 0 16px; }
.whatsapp-launch-status { margin: 24px 0; color: var(--cyan, #20e7ff); }
.whatsapp-launch-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; align-items: center; }


.site-splash {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  place-items: center;
  background:
    radial-gradient(circle, rgba(0,234,255,.16), transparent 18rem),
    radial-gradient(circle at 50% 55%, rgba(255,43,214,.09), transparent 23rem),
    #020104;
  transition: opacity .52s ease, visibility .52s ease;
}

.site-splash.is-gone {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.site-splash-mark {
  position: relative;
  z-index: 1;
  width: clamp(112px, 20vw, 210px);
  height: auto;
  object-fit: contain;
  filter:
    drop-shadow(0 0 7px rgba(255,255,255,.7))
    drop-shadow(0 0 18px rgba(0,234,255,.65))
    drop-shadow(0 0 34px rgba(255,43,214,.52));
  animation: siteSplashPulse 1.18s ease-in-out infinite alternate;
}

.site-splash-ring,
.site-splash-ring::after {
  position: absolute;
  content: "";
  width: clamp(156px, 29vw, 286px);
  aspect-ratio: 1;
  border-radius: 50%;
  border: 1px solid rgba(0,234,255,.65);
  box-shadow: 0 0 18px rgba(0,234,255,.7), inset 0 0 16px rgba(255,43,214,.44);
  animation: siteSplashRing 1.75s cubic-bezier(.16, 1, .3, 1) infinite;
}

.site-splash-ring::after {
  inset: 14%;
  width: auto;
  border-color: rgba(255,43,214,.58);
  animation-delay: .38s;
}

.site-splash-copy {
  position: absolute;
  top: calc(50% + clamp(105px, 18vw, 168px));
  letter-spacing: .36em;
  padding-left: .36em;
  font-size: clamp(.65rem, 1.7vw, .9rem);
  color: rgba(255,255,255,.72);
  text-transform: uppercase;
}

@keyframes siteSplashPulse {
  from { transform: scale(.95) rotate(-1.2deg); }
  to { transform: scale(1.045) rotate(1.2deg); }
}

@keyframes siteSplashRing {
  0% { transform: scale(.58); opacity: 0; }
  32% { opacity: 1; }
  100% { transform: scale(1.3); opacity: 0; }
}

.event-page { overflow-x: hidden; }
@media (prefers-reduced-motion: reduce) {
  .site-splash { display: none; }
}

/* Upload experience */
.compact-header { position: sticky; }
.upload-nav { gap: 24px; }
.upload-shell, .gallery-shell { padding-top: 34px; padding-bottom: 70px; }
.upload-intro, .upload-workspace, .upload-after, .gallery-hero, .gallery-empty { padding: clamp(26px, 4vw, 52px); }
.upload-intro { text-align: center; }
.upload-intro h1, .gallery-hero h1 { margin: 0; font-family: var(--font-display); font-size: clamp(2.4rem, 6vw, 5.6rem); line-height: .95; text-transform: uppercase; color: var(--yellow); text-shadow: 0 0 18px rgba(255,227,35,.35); }
.upload-intro > p:not(.eyebrow), .gallery-hero p { max-width: 760px; margin: 18px auto 0; color: #d3ccd9; }
.upload-recipient { font-size: 1.08rem; }
.upload-recipient strong { color: var(--pink); }
.upload-facts { position: relative; z-index: 1; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 24px; }
.upload-facts span { padding: 8px 12px; border: 1px solid rgba(0,239,255,.35); border-radius: 999px; color: var(--cyan); background: rgba(0,0,0,.2); text-transform: uppercase; letter-spacing: .08em; font-size: .72rem; }
.upload-workspace { margin-top: 22px; }
.upload-dropzone { position: relative; z-index: 1; min-height: 380px; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 36px 20px; border: 2px dashed rgba(0,239,255,.38); border-radius: 20px; text-align: center; background: radial-gradient(circle, rgba(255,32,189,.08), transparent 48%), rgba(0,0,0,.2); transition: border-color .2s ease, transform .2s ease, background .2s ease; }
.upload-dropzone.is-dragging { border-color: var(--pink); transform: scale(1.008); background: rgba(255,32,189,.08); }
.upload-dropzone.has-files { min-height: 220px; }
.upload-dropzone img { width: 110px; height: 110px; object-fit: contain; filter: drop-shadow(0 0 18px rgba(0,239,255,.4)); }
.upload-dropzone h2, .upload-queue-head h2, .upload-after h2 { margin: 10px 0 0; font-family: var(--font-display); text-transform: uppercase; color: #fff; font-size: clamp(1.5rem, 3vw, 2.5rem); }
.upload-dropzone p { margin: 8px 0 18px; color: var(--muted); }
.upload-dropzone small { margin-top: 14px; color: #827b89; }
.upload-dropzone input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.upload-queue-wrap { position: relative; z-index: 1; margin-top: 26px; }
.upload-queue-head { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 14px; }
.upload-queue-head .eyebrow { margin: 0; }
.upload-queue { display: grid; gap: 10px; margin-bottom: 18px; }
.upload-file { display: grid; grid-template-columns: 46px minmax(0, 1fr) auto 34px; align-items: center; gap: 12px; padding: 12px; border: 1px solid rgba(255,255,255,.1); border-radius: 14px; background: rgba(0,0,0,.28); }
.upload-file.done { border-color: rgba(104,255,30,.35); }
.upload-file.error { border-color: rgba(255,59,101,.5); }
.upload-file-icon { display: grid; place-items: center; width: 42px; height: 42px; border: 1px solid var(--cyan); border-radius: 50%; color: var(--cyan); background: rgba(0,239,255,.05); }
.upload-file-details { min-width: 0; display: grid; gap: 4px; }
.upload-file-details strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.upload-file-details span { color: var(--muted); font-size: .78rem; }
.upload-progress { height: 5px; overflow: hidden; border-radius: 99px; background: rgba(255,255,255,.08); }
.upload-progress i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--cyan), var(--pink), var(--yellow)); box-shadow: 0 0 9px var(--cyan); transition: width .22s ease; }
.upload-file-state { min-width: 90px; color: var(--yellow); font-size: .72rem; text-align: right; }
.upload-remove { border: 0; background: transparent; color: #8c8591; font-size: 1.5rem; cursor: pointer; }
.upload-remove:disabled { opacity: .25; cursor: default; }
.upload-after { margin-top: 22px; display: flex; align-items: center; justify-content: space-between; gap: 30px; }
.upload-after p { max-width: 760px; color: #cbc4d0; }

/* Public gallery, slideshow and Event timeline */
.gallery-hero { display: flex; align-items: end; justify-content: space-between; gap: 36px; }
.gallery-hero > div:first-child { max-width: 820px; }
.gallery-hero-actions { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: flex-end; gap: 14px; }
.gallery-count { color: var(--cyan); text-transform: uppercase; letter-spacing: .08em; font-size: .78rem; }
.gallery-toolbar { display: flex; justify-content: center; gap: 8px; margin: 22px auto; }
.gallery-tab { min-width: 180px; padding: 12px 18px; border: 1px solid rgba(255,255,255,.16); border-radius: 999px; color: #bbb4c2; background: rgba(0,0,0,.34); cursor: pointer; text-transform: uppercase; letter-spacing: .1em; font-size: .75rem; }
.gallery-tab.active { color: #fff; border-color: var(--cyan); box-shadow: 0 0 15px rgba(0,239,255,.32), inset 0 0 16px rgba(255,32,189,.08); }
.gallery-view { opacity: 0; transform: translateY(8px); transition: opacity .25s ease, transform .25s ease; }
.gallery-view.active { opacity: 1; transform: none; }
.media-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 16px; }
.media-card { overflow: hidden; padding: 0; border: 1px solid rgba(255,255,255,.12); border-radius: 18px; color: inherit; background: rgba(8,4,12,.88); box-shadow: 0 16px 38px rgba(0,0,0,.34); cursor: pointer; text-align: left; transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease; }
.media-card:hover, .media-card:focus-visible { transform: translateY(-3px); border-color: var(--cyan); box-shadow: 0 18px 45px rgba(0,0,0,.45), 0 0 20px rgba(0,239,255,.18); }
.media-card-visual { position: relative; display: block; aspect-ratio: 4 / 3; overflow: hidden; background: #020104; }
.media-card-visual > img { width: 100%; height: 100%; object-fit: cover; transition: transform .35s ease; }
.media-card:hover .media-card-visual > img { transform: scale(1.035); }
.media-kind { position: absolute; left: 10px; top: 10px; padding: 5px 8px; border: 1px solid rgba(0,239,255,.55); border-radius: 999px; color: var(--cyan); background: rgba(0,0,0,.72); text-transform: uppercase; letter-spacing: .08em; font-size: .62rem; }
.media-card-meta { display: grid; gap: 4px; padding: 13px 14px 15px; }
.media-card-meta strong { color: #fff; }
.media-card-meta time { color: var(--muted); font-size: .75rem; }
.video-poster { width: 100%; height: 100%; display: grid; place-items: center; background: radial-gradient(circle, rgba(255,32,189,.17), transparent 35%), linear-gradient(140deg, #030105, #100518); }
.video-poster img { width: 38%; max-height: 58%; object-fit: contain; filter: drop-shadow(0 0 18px rgba(0,239,255,.42)); }
.video-poster.has-poster img { width: 100%; height: 100%; max-height: none; object-fit: cover; filter: none; }
.video-poster i { position: absolute; display: grid; place-items: center; width: 62px; height: 62px; border: 2px solid var(--yellow); border-radius: 50%; color: #fff; background: rgba(0,0,0,.62); box-shadow: 0 0 22px rgba(255,227,35,.42); font-style: normal; }
.video-state-badge { position: absolute; right: 9px; bottom: 9px; max-width: calc(100% - 18px); padding: 5px 8px; overflow: hidden; border: 1px solid rgba(255,227,35,.55); border-radius: 999px; color: var(--yellow); background: rgba(0,0,0,.78); text-overflow: ellipsis; white-space: nowrap; font-style: normal; font-size: .58rem; text-transform: uppercase; letter-spacing: .06em; }
.video-state-badge.ready { border-color: rgba(104,255,30,.55); color: var(--green); }
.video-state-badge.failed { border-color: rgba(255,75,75,.6); color: #ff8c8c; }
.timeline-summary { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; margin-bottom: 16px; padding: 1px; }
.timeline-summary > div { position: relative; z-index: 1; padding: 18px 22px; background: rgba(3,1,5,.82); }
.timeline-summary span { display: block; color: var(--muted); text-transform: uppercase; letter-spacing: .09em; font-size: .66rem; }
.timeline-summary strong { color: var(--yellow); }
.timeline-scroll { overflow-x: auto; padding: 8px 0 18px; scrollbar-color: var(--cyan) rgba(255,255,255,.05); }
.timeline-track { position: relative; min-width: 1150px; height: 372px; border: 1px solid rgba(255,255,255,.09); border-radius: 20px; background: rgba(0,0,0,.24); }
.timeline-line { position: absolute; left: 45px; right: 45px; top: 330px; height: 2px; background: linear-gradient(90deg, var(--cyan), var(--pink), var(--yellow), var(--green)); box-shadow: 0 0 12px rgba(0,239,255,.45); }
.timeline-item { position: absolute; width: 92px; padding: 0; border: 0; background: transparent; color: #fff; transform: translateX(-50%); cursor: pointer; }
.timeline-item::after { content: ""; position: absolute; left: 50%; top: 76px; width: 1px; height: var(--connector-height, 240px); background: linear-gradient(var(--cyan), rgba(0,239,255,.1)); }
.timeline-item::before { content: ""; position: absolute; left: calc(50% - 5px); top: var(--marker-top, 325px); width: 10px; height: 10px; border-radius: 50%; background: var(--yellow); box-shadow: 0 0 12px var(--yellow); }
.timeline-preview { position: relative; z-index: 1; display: grid; place-items: center; width: 82px; height: 62px; margin-inline: auto; overflow: hidden; border: 1px solid var(--cyan); border-radius: 10px; background: #030104; box-shadow: 0 0 12px rgba(0,239,255,.2); }
.timeline-preview img { width: 100%; height: 100%; object-fit: cover; }
.timeline-video { position: absolute; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; color: #fff; background: rgba(0,0,0,.64); box-shadow: 0 0 10px rgba(255,32,189,.48); font-size: 1rem; }
.timeline-item time { display: block; margin-top: 6px; color: #d3ccd8; font-size: .65rem; white-space: nowrap; }
.gallery-empty { margin-top: 24px; text-align: center; }
.gallery-empty img { width: 130px; margin: 0 auto; }
.gallery-empty h2 { color: var(--yellow); font-family: var(--font-display); text-transform: uppercase; }
.lightbox-open { overflow: hidden; }
.media-lightbox { position: fixed; inset: 0; z-index: 300; }
.lightbox-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,.93); backdrop-filter: blur(10px); }
.lightbox-panel { position: absolute; inset: 14px; display: grid; grid-template-rows: minmax(0, 1fr) auto; border: 1px solid rgba(0,239,255,.35); border-radius: 20px; background: #020104; box-shadow: 0 0 45px rgba(0,239,255,.15); overflow: hidden; }
.lightbox-stage { position: relative; min-height: 0; display: block; overflow: hidden; background: #010102; touch-action: pan-y; user-select: none; }
.lightbox-image-shell { position: relative; display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; overflow: hidden; padding: clamp(10px, 1.6vw, 24px) clamp(12px, 3vw, 52px); transition: transform .2s ease, opacity .2s ease; box-sizing: border-box; }
.lightbox-image-shell.is-swiping, .video-processing-panel.is-swiping { transition: none; }
.lightbox-image-backdrop { position: absolute; inset: -5%; width: 110%; height: 110%; object-fit: cover; filter: blur(30px) brightness(.32) saturate(.8); transform: scale(1.08); opacity: .78; pointer-events: none; }
.lightbox-image-frame { position: relative; z-index: 1; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; }
.lightbox-image { position: relative; z-index: 1; width: 100%; height: 100%; object-fit: contain; object-position: center; box-shadow: 0 18px 60px rgba(0,0,0,.56); }
.lightbox-video-wrap { position: relative; display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; padding: clamp(10px, 1.6vw, 24px) clamp(12px, 3vw, 52px); box-sizing: border-box; }
.lightbox-video-wrap video { width: 100%; height: 100%; object-fit: contain; box-shadow: 0 18px 60px rgba(0,0,0,.56); }
.video-watermark { position: absolute; right: clamp(20px, 3.2vw, 60px); bottom: clamp(20px, 3.6vh, 48px); width: min(16vw, 190px); max-width: 190px; max-height: 13%; object-fit: contain; opacity: 1; pointer-events: none; filter: drop-shadow(0 0 8px rgba(0,0,0,.7)); }
.video-play-overlay { position: absolute; inset: auto auto 50% 50%; transform: translate(-50%, 50%); width: clamp(72px, 10vw, 112px); height: clamp(72px, 10vw, 112px); border-radius: 999px; border: 1px solid rgba(0,255,255,.55); background: rgba(2,6,18,.62); box-shadow: 0 0 28px rgba(0,255,255,.16); display: grid; place-items: center; color: #00ecff; font-size: clamp(2rem, 4vw, 3rem); cursor: pointer; backdrop-filter: blur(8px); }
.video-play-overlay:hover { box-shadow: 0 0 36px rgba(255,0,180,.22); }
.video-play-overlay span { transform: translateX(4%); }
.lightbox-video-wrap.is-playing .video-play-overlay { opacity: 0; pointer-events: none; }
.lightbox-close { position: absolute; z-index: 7; right: 18px; top: 18px; width: 44px; height: 44px; border: 1px solid rgba(255,255,255,.25); border-radius: 50%; color: #fff; background: rgba(0,0,0,.58); backdrop-filter: blur(8px); cursor: pointer; font-size: 1.7rem; }
.lightbox-nav { position: absolute; z-index: 6; top: 50%; width: clamp(42px, 5vw, 66px); height: 110px; padding: 0; border: 0; color: #fff; background: transparent; transform: translateY(-50%); opacity: .92; cursor: pointer; font-size: clamp(3rem, 6vw, 5rem); line-height: 1; text-shadow: 0 2px 5px #000, 0 0 14px rgba(0,0,0,.95), 0 0 15px rgba(0,239,255,.55); transition: opacity .24s ease, transform .18s ease; }
.lightbox-nav:hover, .lightbox-nav:focus-visible { transform: translateY(-50%) scale(1.08); opacity: 1; }
.lightbox-nav.previous { left: max(6px, env(safe-area-inset-left)); }
.lightbox-nav.next { right: max(6px, env(safe-area-inset-right)); }
.media-lightbox.controls-hidden .lightbox-nav { opacity: 0; pointer-events: none; }
.lightbox-footer { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 13px 18px; border-top: 1px solid rgba(255,255,255,.1); background: rgba(7,4,10,.96); }
.lightbox-footer > div:first-child { display: grid; gap: 3px; min-width: 0; }
.lightbox-footer strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lightbox-footer span { color: var(--muted); font-size: .78rem; }
.lightbox-actions { display: flex; align-items: center; gap: 10px; }


.video-processing-panel { display: grid; place-items: center; align-content: center; width: min(620px, calc(100% - 34px)); padding: clamp(24px, 5vw, 48px); border: 1px solid rgba(0,239,255,.35); border-radius: 22px; background: radial-gradient(circle at 50% 0, rgba(255,32,189,.12), transparent 45%), rgba(5,2,8,.88); box-shadow: 0 22px 65px rgba(0,0,0,.5); text-align: center; transition: transform .2s ease, opacity .2s ease; }
.video-processing-panel > img { width: clamp(80px, 18vw, 130px); max-height: 120px; object-fit: contain; filter: drop-shadow(0 0 18px rgba(0,239,255,.4)); }
.video-processing-panel h2 { margin: 8px 0; color: var(--yellow); font-family: var(--font-display); font-size: clamp(2rem, 5vw, 4rem); line-height: .95; text-transform: uppercase; }
.video-processing-panel p:not(.eyebrow) { max-width: 470px; color: #d4cdd8; }
.video-processing-panel.failed { border-color: rgba(255,75,75,.5); }
.video-processing-progress { width: min(430px, 100%); height: 11px; margin: 22px 0 9px; overflow: hidden; border: 1px solid rgba(255,255,255,.13); border-radius: 999px; background: rgba(255,255,255,.06); }
.video-processing-progress i { display: block; width: 0; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--cyan), var(--pink), var(--yellow)); box-shadow: 0 0 14px rgba(0,239,255,.55); transition: width .3s ease; }
.video-processing-panel > strong { color: var(--cyan); }

/* Admin media moderation */
.media-admin-summary { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 18px; }
.media-admin-summary span { padding: 7px 10px; border: 1px solid rgba(0,239,255,.24); border-radius: 999px; color: var(--cyan); font-size: .72rem; }
.admin-media-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; }
.admin-media-card { position: relative; z-index: 1; overflow: hidden; border: 1px solid rgba(255,255,255,.11); border-radius: 16px; background: rgba(0,0,0,.27); }
.admin-media-preview { display: block; aspect-ratio: 4 / 3; overflow: hidden; background: #020104; }
.admin-media-preview img, .admin-media-preview video { width: 100%; height: 100%; object-fit: cover; }
.admin-media-preview.video-preview img { object-fit: contain; padding: 12%; filter: drop-shadow(0 0 16px rgba(0,239,255,.34)); }
.admin-media-preview.video-preview.ready img { padding: 0; object-fit: cover; filter: none; }
.admin-media-body { padding: 14px; }
.admin-media-body h3 { margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.admin-media-body p { margin: 6px 0; color: var(--muted); font-size: .78rem; }
.admin-media-actions { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 12px; }
.admin-media-time { display: grid; grid-template-columns: 1fr auto; gap: 7px; margin-top: 10px; }
.admin-media-time input { min-width: 0; }
.admin-video-status { margin-top: 12px; padding: 10px; border: 1px solid rgba(0,239,255,.2); border-radius: 12px; background: rgba(0,0,0,.22); }
.admin-video-status-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; color: #fff; font-size: .72rem; }
.admin-video-status-head strong { color: var(--cyan); }
.admin-video-progress { height: 8px; margin: 8px 0 6px; overflow: hidden; border-radius: 999px; background: rgba(255,255,255,.08); }
.admin-video-progress i { display: block; width: 0; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--cyan), var(--pink), var(--yellow)); transition: width .3s ease; }
.admin-video-status small { display: block; color: var(--muted); line-height: 1.35; }
.admin-video-status[data-status="ready"] { border-color: rgba(104,255,30,.3); }
.admin-video-status[data-status="ready"] .admin-video-status-head strong { color: var(--green); }
.admin-video-status[data-status="failed"] { border-color: rgba(255,75,75,.38); }
.admin-video-status[data-status="failed"] .admin-video-status-head strong { color: #ff8c8c; }
.invitation-upload-row { margin-top: 8px; }

@media (max-width: 760px) {
  .upload-nav { display: flex; gap: 12px; }
  .upload-nav a { font-size: .67rem; }
  .upload-shell, .gallery-shell { width: min(100% - 20px, 680px); padding-top: 16px; }
  .upload-intro, .upload-workspace, .upload-after, .gallery-hero { padding: 24px 16px; }
  .upload-facts { gap: 6px; }
  .upload-facts span { font-size: .62rem; }
  .upload-dropzone { min-height: 330px; }
  .upload-file { grid-template-columns: 38px minmax(0, 1fr) 28px; }
  .upload-file-state { grid-column: 2 / 3; min-width: 0; text-align: left; }
  .upload-remove { grid-column: 3; grid-row: 1 / 3; }
  .upload-after, .gallery-hero { align-items: stretch; flex-direction: column; }
  .gallery-hero-actions { align-items: stretch; }
  .gallery-tab { min-width: 0; flex: 1; }
  .media-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
  .media-card-meta { padding: 9px; }
  .media-card-meta strong { font-size: .8rem; }
  .lightbox-panel { inset: 0; border-radius: 0; border: 0; }
  .lightbox-image-shell, .lightbox-video-wrap { padding: 10px 12px 18px; }
  .lightbox-image { width: 100%; height: 100%; }
  .lightbox-image-backdrop { filter: blur(22px) brightness(.3) saturate(.8); }
  .lightbox-nav { width: 42px; height: 86px; font-size: 3.5rem; }
  .lightbox-nav.previous { left: max(1px, env(safe-area-inset-left)); }
  .lightbox-nav.next { right: max(1px, env(safe-area-inset-right)); }
  .lightbox-close { right: 9px; top: 9px; }
  .lightbox-footer { align-items: stretch; flex-direction: column; padding: 10px; }
  .lightbox-actions { width: 100%; }
  .lightbox-actions > * { flex: 1; text-align: center; }
  .video-watermark { width: 30vw; right: 18px; bottom: 82px; }
}

@media (max-width: 440px) {
  .media-grid { grid-template-columns: 1fr; }
  .upload-dropzone img { width: 90px; height: 90px; }
  .upload-queue-head { align-items: flex-start; }
  .timeline-summary { grid-template-columns: 1fr; }
}

.button-yellow { border-color: var(--yellow); color: var(--yellow); box-shadow: 0 0 18px rgba(255,227,35,.18), inset 0 0 16px rgba(255,227,35,.05); }
.personal-welcome-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 9px; }
.memories-banner { display: flex; align-items: center; justify-content: space-between; gap: 34px; margin-top: 24px; padding: clamp(24px, 3.5vw, 44px); }
.memories-banner h2 { margin: 0; color: var(--yellow); font-family: var(--font-display); text-transform: uppercase; font-size: clamp(2rem, 4vw, 4rem); }
.memories-banner p:not(.eyebrow) { max-width: 760px; color: #cbc4d0; }
.memories-banner-actions { position: relative; z-index: 1; display: flex; flex-wrap: wrap; gap: 10px; }
@media (max-width: 760px) {
  .personal-welcome-actions, .memories-banner, .memories-banner-actions { align-items: stretch; flex-direction: column; }
  .memories-banner { margin-top: 14px; padding: 24px 17px; }
}
@media (max-width: 760px) {
  .compact-header .upload-nav {
    position: static;
    display: flex;
    flex-direction: row;
    align-items: center;
    width: auto;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
  }
}


/* Upload reliability overlay */
.upload-guard[hidden] { display: none; }
.upload-guard {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: grid;
  place-items: center;
  padding: max(18px, env(safe-area-inset-top)) max(14px, env(safe-area-inset-right)) max(18px, env(safe-area-inset-bottom)) max(14px, env(safe-area-inset-left));
  background: rgba(2, 1, 4, .9);
  backdrop-filter: blur(14px);
}
.upload-guard-card {
  width: min(620px, 100%);
  max-height: 100%;
  overflow: auto;
  padding: clamp(26px, 5vw, 48px);
  border: 1px solid rgba(0,239,255,.6);
  border-radius: 24px;
  background:
    radial-gradient(circle at 50% 0%, rgba(255,32,189,.12), transparent 45%),
    linear-gradient(180deg, rgba(14,7,20,.98), rgba(4,2,7,.98));
  box-shadow: 0 0 30px rgba(0,239,255,.2), 0 0 46px rgba(255,32,189,.16), inset 0 0 28px rgba(255,255,255,.025);
  text-align: center;
}
.upload-guard-card > img {
  width: clamp(86px, 20vw, 132px);
  height: auto;
  margin: 0 auto 12px;
  filter: drop-shadow(0 0 14px rgba(0,239,255,.45)) drop-shadow(0 0 24px rgba(255,32,189,.35));
}
.upload-guard-card h2 {
  margin: 5px 0 12px;
  color: var(--yellow);
  font-family: var(--font-display);
  font-size: clamp(2rem, 7vw, 4rem);
  line-height: .95;
  text-transform: uppercase;
  text-shadow: 0 0 17px rgba(255,227,35,.32);
}
.upload-guard-card > p:not(.eyebrow) { color: #d6cfdb; }
.upload-guard-progress {
  height: 13px;
  margin-top: 28px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 99px;
  background: rgba(255,255,255,.06);
}
.upload-guard-progress i {
  display: block;
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--cyan), var(--pink), var(--yellow));
  box-shadow: 0 0 15px var(--cyan);
  transition: width .22s ease;
}
.upload-guard-stats {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 18px;
  margin-top: 12px;
}
.upload-guard-stats strong { color: #fff; font-size: 1.7rem; }
.upload-guard-stats span { color: var(--muted); font-size: .82rem; }
.upload-guard-current {
  min-height: 2.7em;
  margin: 22px 0 8px;
  overflow-wrap: anywhere;
  color: #fff !important;
  font-weight: 800;
}
.upload-guard-wake {
  margin: 8px auto 15px;
  padding: 10px 12px;
  border: 1px solid rgba(0,239,255,.25);
  border-radius: 12px;
  color: var(--cyan) !important;
  background: rgba(0,239,255,.05);
  font-size: .82rem;
}
.upload-guard-wake[data-tone="warning"] { border-color: rgba(255,227,35,.35); color: var(--yellow) !important; background: rgba(255,227,35,.05); }
.upload-guard-wake[data-tone="ok"] { border-color: rgba(104,255,30,.34); color: var(--green) !important; background: rgba(104,255,30,.05); }
.upload-guard-card small { display: block; color: #8f8795; line-height: 1.5; }
.upload-file.skipped { border-color: rgba(0,239,255,.42); }
.upload-file.skipped .upload-file-state { color: var(--cyan); }
.upload-is-active { overflow: hidden; }
@media (max-width: 620px) {
  .upload-guard-card { padding: 24px 17px; border-radius: 20px; }
  .upload-guard-stats { align-items: center; flex-direction: column; gap: 2px; }
}

.upload-file.needs-reselection { border-color: rgba(255,227,35,.58); }
.upload-file.needs-reselection .upload-file-state { color: var(--yellow); }
.upload-file-actions { display: flex; align-items: center; justify-content: flex-end; gap: 7px; }
.upload-reselect { border: 1px solid var(--yellow); border-radius: 8px; padding: 6px 8px; background: rgba(255,227,35,.06); color: var(--yellow); cursor: pointer; font-size: .66rem; text-transform: uppercase; letter-spacing: .05em; white-space: nowrap; }
.upload-reselect:hover { box-shadow: 0 0 12px rgba(255,227,35,.28); }
.retained-file-input { display: none !important; }
@media (max-width: 760px) {
  .upload-file { grid-template-columns: 38px minmax(0, 1fr) auto; }
  .upload-file-actions { grid-column: 3; grid-row: 1 / 3; flex-direction: column-reverse; }
  .upload-file-state { grid-column: 2 / 3; }
  .upload-reselect { padding: 5px 6px; font-size: .58rem; }
}

/* v0.4.6 immersive fullscreen viewer */
.fullscreen-corner {
  position: absolute;
  z-index: 8;
  right: 72px;
  top: 18px;
  display: none;
  width: 44px;
  height: 44px;
  border: 1px solid rgba(255,255,255,.25);
  border-radius: 50%;
  color: #fff;
  background: rgba(0,0,0,.58);
  backdrop-filter: blur(8px);
  cursor: pointer;
  font-size: 1.2rem;
  transition: opacity .24s ease, transform .18s ease;
}
.fullscreen-corner:hover,
.fullscreen-corner:focus-visible { transform: scale(1.06); }

.media-lightbox:fullscreen,
.media-lightbox.is-fullscreen {
  width: 100vw;
  height: 100dvh;
  background: #000;
}
.media-lightbox.is-fullscreen .lightbox-backdrop { display: none; }
.media-lightbox.is-fullscreen .lightbox-panel {
  inset: 0;
  grid-template-rows: minmax(0, 1fr);
  border: 0;
  border-radius: 0;
  background: #000;
  box-shadow: none;
}
.media-lightbox.is-fullscreen .lightbox-stage { grid-row: 1; width: 100%; height: 100%; }
.media-lightbox.is-fullscreen .fullscreen-corner { display: grid; place-items: center; }
.media-lightbox.is-fullscreen .lightbox-footer {
  position: absolute;
  z-index: 7;
  right: 0;
  bottom: 0;
  left: 0;
  min-height: 66px;
  padding: 12px max(18px, env(safe-area-inset-right)) max(12px, env(safe-area-inset-bottom)) max(18px, env(safe-area-inset-left));
  border-top: 0;
  background: linear-gradient(180deg, transparent, rgba(0,0,0,.76) 38%, rgba(0,0,0,.9));
  backdrop-filter: none;
  transition: opacity .24s ease, transform .24s ease;
}
.media-lightbox.is-fullscreen .lightbox-actions { gap: 8px; }
.media-lightbox.is-fullscreen .lightbox-actions > * {
  min-height: 38px;
  padding-top: 8px;
  padding-bottom: 8px;
  background: rgba(0,0,0,.46);
  backdrop-filter: blur(8px);
}
.media-lightbox.is-fullscreen .lightbox-image-shell,
.media-lightbox.is-fullscreen .lightbox-video-wrap { padding: 10px clamp(12px, 3vw, 56px); }
.media-lightbox.is-fullscreen .video-watermark { bottom: clamp(82px, 11vh, 126px); }

.media-lightbox.is-fullscreen.controls-hidden .lightbox-footer {
  opacity: 0;
  pointer-events: none;
  transform: translateY(18px);
}
.media-lightbox.is-fullscreen.controls-hidden .lightbox-close,
.media-lightbox.is-fullscreen.controls-hidden .fullscreen-corner {
  opacity: 0;
  pointer-events: none;
}

.media-lightbox.is-presentation .lightbox-footer { display: none; }
.media-lightbox.is-presentation .lightbox-image-shell,
.media-lightbox.is-presentation .lightbox-video-wrap { padding: 0; }
.media-lightbox.is-presentation .video-watermark { bottom: clamp(72px, 10vh, 112px); }
.media-lightbox.is-presentation.controls-hidden .lightbox-nav,
.media-lightbox.is-presentation.controls-hidden .lightbox-close,
.media-lightbox.is-presentation.controls-hidden .fullscreen-corner {
  opacity: 0;
  pointer-events: none;
}

@media (max-width: 760px) {
  .fullscreen-corner { right: 61px; top: 9px; }
  .media-lightbox.is-fullscreen .lightbox-footer {
    flex-direction: row;
    align-items: center;
    gap: 10px;
    min-height: 58px;
    padding: 8px max(10px, env(safe-area-inset-right)) max(8px, env(safe-area-inset-bottom)) max(10px, env(safe-area-inset-left));
  }
  .media-lightbox.is-fullscreen .lightbox-footer > div:first-child { display: none; }
  .media-lightbox.is-fullscreen .lightbox-actions { width: 100%; }
  .media-lightbox.is-fullscreen .lightbox-actions > * { min-height: 36px; font-size: .7rem; }
  .media-lightbox.is-fullscreen .video-watermark { right: 18px; bottom: 78px; }
  .media-lightbox.is-presentation .video-watermark { bottom: 74px; }
}

/* Per-media reactions and comments */
.media-card-social { color: rgba(255,255,255,.72); font-size: .72rem; letter-spacing: .02em; }
.social-panel-button { white-space: nowrap; }
.social-floating-button { display: none; position: absolute; z-index: 10; left: 18px; top: 18px; min-width: 62px; height: 42px; padding: 0 13px; border: 1px solid rgba(255,255,255,.24); border-radius: 999px; color: #fff; background: rgba(0,0,0,.48); box-shadow: 0 8px 24px rgba(0,0,0,.25); backdrop-filter: blur(10px); cursor: pointer; }
.social-floating-button.has-activity { border-color: rgba(255,32,189,.48); box-shadow: 0 0 20px rgba(255,32,189,.13); }
.media-lightbox.is-fullscreen .social-floating-button { display: block; }
.media-lightbox.controls-hidden .social-floating-button { opacity: 0; pointer-events: none; }

.media-social-panel { position: absolute; z-index: 20; top: 0; right: 0; bottom: 0; width: min(430px, 100%); display: grid; grid-template-rows: auto minmax(0, 1fr); border-left: 1px solid rgba(0,239,255,.28); background: rgba(5,2,8,.96); box-shadow: -24px 0 70px rgba(0,0,0,.55); backdrop-filter: blur(18px); transform: translateX(105%); transition: transform .28s ease; pointer-events: none; }
.media-lightbox.social-open .media-social-panel { transform: translateX(0); pointer-events: auto; }
.media-social-head { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 20px 20px 15px; border-bottom: 1px solid rgba(255,255,255,.1); }
.media-social-head h2 { margin: 2px 0 0; color: var(--yellow); font-family: var(--font-display); font-size: clamp(1.8rem, 4vw, 2.8rem); line-height: .95; text-transform: uppercase; }
.media-social-close { flex: 0 0 auto; width: 42px; height: 42px; border: 1px solid rgba(255,255,255,.22); border-radius: 50%; color: #fff; background: rgba(0,0,0,.35); font-size: 1.65rem; cursor: pointer; }
.media-social-scroll { min-height: 0; overflow-y: auto; padding: 18px 20px 28px; overscroll-behavior: contain; }
.media-social-name { display: grid; gap: 7px; }
.media-social-name > span, .media-comment-form > label { color: #fff; font-size: .78rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.media-social-name strong { color: var(--pink); font-size: .65rem; }
.media-social-name input, .media-comment-form textarea { width: 100%; box-sizing: border-box; border: 1px solid rgba(255,255,255,.18); border-radius: 12px; color: #fff; background: rgba(0,0,0,.34); outline: none; }
.media-social-name input { height: 44px; padding: 0 13px; }
.media-comment-form textarea { min-height: 92px; padding: 12px 13px; resize: vertical; font: inherit; }
.media-social-name input:focus, .media-comment-form textarea:focus { border-color: rgba(0,239,255,.62); box-shadow: 0 0 0 3px rgba(0,239,255,.08); }
.media-social-help { margin: 7px 0 16px; color: var(--muted); font-size: .72rem; line-height: 1.4; }
.media-reactions { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-bottom: 20px; }
.media-reactions button { display: grid; place-items: center; gap: 3px; min-height: 66px; border: 1px solid rgba(255,255,255,.13); border-radius: 13px; color: #fff; background: rgba(255,255,255,.035); cursor: pointer; transition: transform .15s ease, border-color .15s ease, background .15s ease; }
.media-reactions button:hover { transform: translateY(-2px); border-color: rgba(0,239,255,.4); }
.media-reactions button.active { border-color: rgba(255,32,189,.75); background: rgba(255,32,189,.14); box-shadow: 0 0 18px rgba(255,32,189,.11); }
.media-reactions button span { font-size: 1.55rem; }
.media-reactions button strong { color: var(--cyan); font-size: .75rem; }
.media-comment-form { display: grid; gap: 8px; padding: 16px 0 19px; border-top: 1px solid rgba(255,255,255,.09); border-bottom: 1px solid rgba(255,255,255,.09); }
.media-comment-form > div { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.media-comment-form small { min-height: 1.2em; color: var(--green); font-size: .72rem; }
.media-comment-form small.error { color: #ff8c8c; }
.form-trap { position: absolute !important; left: -10000px !important; width: 1px !important; height: 1px !important; opacity: 0 !important; }
.media-comments-head { display: flex; align-items: center; justify-content: space-between; margin: 18px 0 10px; }
.media-comments-head h3 { margin: 0; color: #fff; }
.media-comments-head span { min-width: 28px; padding: 4px 8px; border: 1px solid rgba(0,239,255,.25); border-radius: 999px; color: var(--cyan); text-align: center; font-size: .7rem; }
.media-comments-list { display: grid; gap: 10px; }
.media-comments-empty { color: var(--muted); font-size: .8rem; }
.media-comment { padding: 11px 12px; border: 1px solid rgba(255,255,255,.09); border-radius: 12px; background: rgba(255,255,255,.025); }
.media-comment > div { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.media-comment strong { color: var(--yellow); font-size: .8rem; }
.media-comment time { color: var(--muted); font-size: .63rem; }
.media-comment p { margin: 7px 0 0; color: #e9e3ec; font-size: .84rem; line-height: 1.42; overflow-wrap: anywhere; }

.fullscreen-social-ticker { position: absolute; z-index: 11; left: 50%; bottom: 78px; transform: translateX(-50%); display: flex; align-items: center; gap: 10px; width: min(72vw, 920px); min-height: 40px; padding: 8px 18px; overflow: hidden; border: 0; border-radius: 999px; color: #fff; background: linear-gradient(90deg, transparent, rgba(0,0,0,.5) 12%, rgba(0,0,0,.5) 88%, transparent); text-align: left; text-shadow: 0 2px 7px #000; cursor: pointer; transition: opacity .26s ease, bottom .26s ease; }
.fullscreen-social-ticker[hidden] { display: none; }
.fullscreen-social-ticker.is-changing { opacity: 0; }
.fullscreen-social-icon { color: var(--cyan); text-shadow: 0 0 12px rgba(0,239,255,.75); }
.fullscreen-social-text { display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: clamp(.76rem, 1.5vw, 1rem); }
.media-lightbox.is-fullscreen.controls-hidden .fullscreen-social-ticker { bottom: 14px; }
.media-lightbox.is-fullscreen.showing-video .fullscreen-social-ticker { bottom: 74px; }
.media-lightbox.is-presentation .fullscreen-social-ticker { bottom: 14px; }
.media-lightbox.is-presentation.showing-video .fullscreen-social-ticker { bottom: 70px; }
.media-lightbox.social-open .fullscreen-social-ticker { display: none; }
.media-lightbox.has-social-ticker.is-presentation .video-watermark { bottom: clamp(104px, 15vh, 158px); }

@media (max-width: 760px) {
  .media-social-panel { top: auto; left: 0; width: 100%; height: min(78vh, 680px); border-top: 1px solid rgba(0,239,255,.28); border-left: 0; border-radius: 20px 20px 0 0; transform: translateY(105%); }
  .media-lightbox.social-open .media-social-panel { transform: translateY(0); }
  .media-social-head { padding: 15px 16px 12px; }
  .media-social-scroll { padding: 15px 16px calc(22px + env(safe-area-inset-bottom)); }
  .media-reactions button { min-height: 59px; }
  .social-panel-button { min-width: 76px; }
  .fullscreen-social-ticker { width: calc(100% - 30px); min-height: 36px; padding: 7px 13px; }
  .media-lightbox.is-fullscreen.showing-video .fullscreen-social-ticker,
  .media-lightbox.is-presentation.showing-video .fullscreen-social-ticker { bottom: 72px; }
  .media-lightbox.has-social-ticker.is-presentation .video-watermark { bottom: 118px; }
}
.media-lightbox.has-social-ticker.showing-video .video-watermark { bottom: clamp(126px, 17vh, 180px); }
@media (max-width: 760px) {
  .media-lightbox.has-social-ticker.showing-video .video-watermark { bottom: 120px; }
}

/* v0.4.8 faster gallery, uploader filter and mobile zoom */
.gallery-filter-bar {
  position: relative;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin: 14px 0 18px;
  padding: 14px 16px;
  overflow: visible;
  isolation: isolate;
}
.gallery-filter-bar.neon-card::after { z-index: -1; }
.gallery-filter-bar p { margin: 0 0 2px; }
.gallery-filter-bar > div > strong { color: #fff; font-size: .9rem; }
.uploader-filter { position: relative; z-index: 101; width: min(360px, 100%); }
.uploader-filter summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  min-height: 44px;
  padding: 0 14px;
  border: 1px solid rgba(0,239,255,.3);
  border-radius: 12px;
  color: #fff;
  background: rgba(0,0,0,.35);
  cursor: pointer;
  list-style: none;
}
.uploader-filter summary::-webkit-details-marker { display: none; }
.uploader-filter summary i { color: var(--cyan); font-style: normal; transition: transform .18s ease; }
.uploader-filter[open] summary i { transform: rotate(180deg); }
.uploader-filter-menu {
  position: absolute;
  z-index: 102;
  top: calc(100% + 8px);
  right: 0;
  width: 100%;
  max-height: min(58vh, 430px);
  overflow: auto;
  border: 1px solid rgba(0,239,255,.34);
  border-radius: 14px;
  background: rgba(5,2,8,.98);
  box-shadow: 0 22px 60px rgba(0,0,0,.62);
  backdrop-filter: blur(16px);
}
.uploader-filter-actions { position: sticky; top: 0; z-index: 2; display: flex; gap: 8px; padding: 10px; border-bottom: 1px solid rgba(255,255,255,.08); background: rgba(5,2,8,.98); }
.uploader-filter-actions button { flex: 1; min-height: 34px; border: 1px solid rgba(255,255,255,.14); border-radius: 9px; color: var(--cyan); background: rgba(255,255,255,.04); cursor: pointer; }
.uploader-filter-options { display: grid; gap: 2px; padding: 8px; }
.uploader-filter-options label { display: flex; align-items: center; gap: 10px; min-height: 40px; padding: 7px 9px; border-radius: 9px; color: #eee8f1; cursor: pointer; }
.uploader-filter-options label:hover { background: rgba(255,255,255,.055); }
.uploader-filter-options input { width: 18px; height: 18px; accent-color: var(--pink); }

.zoomable-image-frame { touch-action: none; overflow: hidden; }
.zoomable-image-frame .lightbox-image { transform-origin: center center; will-change: transform; cursor: zoom-in; }
.zoomable-image-frame .lightbox-image.is-zoomed { cursor: grab; }
.zoomable-image-frame .lightbox-image.animate-zoom { transition: transform .24s ease; }
.lightbox-image-shell:not(.image-ready) .lightbox-image { opacity: 0; }
.lightbox-image-shell.image-ready .lightbox-image { opacity: 1; transition: opacity .18s ease; }

@media (max-width: 760px) {
  .gallery-filter-bar { align-items: stretch; flex-direction: column; gap: 10px; padding: 13px; }
  .uploader-filter { width: 100%; }
  .uploader-filter-menu { right: auto; left: 0; }

  .lightbox-footer { max-height: min(34dvh, 210px); overflow-y: auto; }
  .lightbox-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .lightbox-actions > * { width: 100%; min-width: 0; box-sizing: border-box; justify-content: center; }

  .media-lightbox.is-fullscreen .lightbox-footer { max-height: none; }
  .media-lightbox.is-fullscreen .lightbox-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
  .media-lightbox.is-fullscreen .lightbox-actions > * { min-height: 34px; padding: 7px 5px; font-size: .66rem; }
}

@media (max-width: 760px) and (orientation: portrait) {
  .lightbox-panel { grid-template-rows: minmax(0, 1fr) auto; }
  .lightbox-footer { padding-bottom: max(10px, env(safe-area-inset-bottom)); }
}

.gallery-filter-empty { margin: 18px 0; padding: 28px; border: 1px dashed rgba(0,239,255,.28); border-radius: 14px; color: var(--muted); text-align: center; }