:root {
  --bg: #f3f5f8;
  --surface: #ffffff;
  --panel: #102026;
  --ink: #182226;
  --muted: #64717d;
  --line: #d9e2e8;
  --accent: #1473e6;
  --accent-ink: #ffffff;
  --coral: #ff6b4a;
  --gold: #f3b23c;
  --danger: #c8334d;
  --ok: #168a5f;
  --warn: #a96b00;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  color: var(--ink);
  background: var(--bg);
}

body.has-free-ad {
  padding-bottom: calc(var(--free-ad-height, 102px) + env(safe-area-inset-bottom, 0px) + 14px);
}

body.theme-dark {
  --bg: #071217;
  --surface: #0d171b;
  --panel: #101418;
  --ink: #edf4f7;
  --muted: #9baab0;
  --line: #23343b;
  --accent: #1db954;
  --accent-ink: #06110b;
  --ok: #1db954;
  --gold: #f5c24b;
}

body.superadmin-skin {
  --bg: #f3f6f8;
  --surface: #ffffff;
  --panel: #0f1f28;
  --ink: #12212a;
  --muted: #60717b;
  --line: #d8e1e7;
  --accent: #1473e6;
  --accent-ink: #ffffff;
  --gold: #f5b940;
  background:
    radial-gradient(circle at top left, rgba(20,115,230,.08), transparent 24%),
    radial-gradient(circle at top right, rgba(15,31,40,.06), transparent 20%),
    var(--bg);
}

a { color: #087f7e; }

.wrap {
  max-width: 1040px;
  margin: 0 auto;
  padding: 32px 18px;
}

.home-page {
  min-height: 100vh;
  background:
    linear-gradient(120deg, rgba(20, 115, 230, .12), transparent 38%),
    linear-gradient(250deg, rgba(14, 165, 164, .11), transparent 42%),
    var(--bg);
}

body.theme-dark.home-page {
  background:
    radial-gradient(circle at top left, rgba(29,185,84,.14), transparent 18%),
    radial-gradient(circle at top right, rgba(20,115,230,.12), transparent 20%),
    linear-gradient(180deg, #081217, #0a1114 42%, #081115);
}

body.dj-booth-page {
  background:
    radial-gradient(circle at top left, rgba(20,115,230,.08), transparent 22%),
    linear-gradient(180deg, #eef4f8, #f6f8fa);
}

body.theme-dark.dj-booth-page {
  background:
    radial-gradient(circle at top left, rgba(29,185,84,.12), transparent 18%),
    radial-gradient(circle at top right, rgba(20,115,230,.11), transparent 20%),
    linear-gradient(180deg, #081216, #0a1216 42%, #091116);
}

body.guest-event-page {
  background:
    radial-gradient(circle at top right, rgba(14,165,164,.08), transparent 20%),
    linear-gradient(180deg, #f4f7fa, #f7f9fb);
}

body.theme-dark.guest-event-page {
  background:
    radial-gradient(circle at top right, rgba(29,185,84,.12), transparent 18%),
    linear-gradient(180deg, #081216, #0a1216);
}

body.superadmin-skin.theme-dark {
  --bg: #071217;
  --surface: #0d171b;
  --panel: #101418;
  --ink: #edf4f7;
  --muted: #9baab0;
  --line: #23343b;
  --accent: #1db954;
  --accent-ink: #06110b;
  --gold: #f5c24b;
  background:
    radial-gradient(circle at top left, rgba(29,185,84,.11), transparent 22%),
    radial-gradient(circle at top right, rgba(20,115,230,.09), transparent 18%),
    linear-gradient(180deg, #081216, #091116);
}

.ad-banner {
  position: fixed;
  left: 0;
  right: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 8px 14px;
  background: #102026;
  color: #fffaf2;
  font-size: .9rem;
  text-align: center;
}

.ad-banner.top { top: 0; }
.ad-banner.bottom { bottom: 0; }

.ad-banner-free {
  --free-ad-height: 102px;
  height: var(--free-ad-height);
  max-height: 25vh;
  padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px));
  justify-content: center;
  gap: 0;
  background:
    linear-gradient(135deg, rgba(7, 17, 22, .97), rgba(12, 36, 29, .98) 58%, rgba(7, 17, 22, .99)),
    #081216;
  border-top: 1px solid rgba(255,255,255,.08);
  box-shadow: 0 -18px 42px rgba(0,0,0,.28);
  overflow: hidden;
}

.ad-banner-label {
  display: inline-flex;
  align-items: center;
  padding: 5px 9px;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 999px;
  color: #9be7b4;
  font-size: .68rem;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
  background: rgba(255,255,255,.03);
}

.ad-banner-topline,
.ad-banner-bottomline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.ad-banner-copy {
  min-width: 0;
  display: grid;
  gap: 4px;
  text-align: left;
}

.ad-banner-copy strong {
  font-size: clamp(.92rem, 1.2vw, 1.05rem);
  color: #f4fbf6;
  line-height: 1.15;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ad-banner-copy span {
  color: #b8c7cd;
  line-height: 1.25;
  font-size: .82rem;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.ad-banner-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 112px;
  min-height: 38px;
  padding: 9px 14px;
  border-radius: 999px;
  background: #1db954;
  color: #06110b;
  text-decoration: none;
  font-weight: 900;
  box-shadow: 0 10px 24px rgba(29,185,84,.2);
}

.ad-player {
  width: 100%;
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  min-height: 0;
}

.ad-player-mark {
  display: grid;
  place-items: center;
}

.ad-player-mark img {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  object-fit: contain;
  background: #ffffff;
  padding: 7px;
}

.ad-player-stage {
  min-width: 0;
  display: grid;
  gap: 6px;
  align-content: center;
  min-height: 66px;
}

.ad-banner-meta {
  color: #8cc7ff;
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ad-player-dots {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: 0 0 auto;
}

.ad-dot {
  width: 8px;
  height: 8px;
  border: 0;
  border-radius: 999px;
  background: rgba(255,255,255,.22);
  cursor: pointer;
  transition: transform .2s ease, background .2s ease;
}

.ad-dot.is-active {
  background: #dcf84e;
  transform: scale(1.18);
}

.ad-player-progress {
  grid-column: 1 / -1;
  height: 4px;
  border-radius: 999px;
  background: rgba(255,255,255,.08);
  overflow: hidden;
  margin-top: 6px;
}

.ad-player-progress span {
  display: block;
  width: 100%;
  height: 100%;
  transform-origin: left center;
  transform: scaleX(0);
  background: linear-gradient(90deg, #0000fe, #1db954 60%, #dcf84e);
}

@keyframes adProgress {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}

.auth-shell {
  width: min(1120px, calc(100% - 32px));
  min-height: calc(100vh - 96px);
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(360px, .72fr);
  gap: 24px;
  align-items: center;
  padding: 36px 0 24px;
}

.auth-shell-home {
  align-items: start;
  grid-template-areas:
    "brand ."
    "intro auth";
}

.auth-shell-home > .brand-mark {
  grid-area: brand;
  margin-bottom: 12px;
}

.auth-shell-home > .intro-card {
  grid-area: intro;
}

.auth-shell-home > .auth-card {
  grid-area: auth;
  align-self: start;
}

.brand-panel {
  display: grid;
  gap: 22px;
}

.brand-mark {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: var(--ink);
  text-decoration: none;
}

.brand-mark-hero {
  width: 100%;
}

.brand-mark-copy strong {
  display: block;
  font-size: 1.18rem;
  letter-spacing: 0;
}

.brand-mark-copy small {
  display: block;
  color: var(--muted);
  margin-top: 2px;
}

.logo-badge {
  width: 52px;
  height: 52px;
  display: inline-grid;
  place-items: center;
  border-radius: 8px;
  color: var(--surface);
  background: var(--panel);
  box-shadow: 0 14px 26px rgba(16, 32, 38, .18);
}

.logo-badge svg {
  width: 34px;
  height: 34px;
}

.logo-badge img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  border-radius: 8px;
  background: #fff;
}

.logo-badge-brand {
  width: 92px;
  height: 92px;
  border-radius: 14px;
}

.brand-mark-hero.has-logo .logo-badge-brand {
  width: 100%;
  height: auto;
  min-height: 168px;
  aspect-ratio: 16 / 7.9;
  padding: 0;
  border-radius: 24px;
  background: transparent;
  box-shadow: 0 24px 60px rgba(16, 32, 38, .12);
}

.logo-badge-brand img {
  border-radius: 14px;
}

.brand-mark-hero.has-logo .logo-badge-brand img {
  width: 100%;
  height: 100%;
  border-radius: 24px;
  object-fit: contain;
  background: transparent;
}

.logo-badge-brand svg {
  width: 56px;
  height: 56px;
}

.brand-mark-panel {
  margin-bottom: 14px;
}

.logo-badge-panel {
  width: 72px;
  height: 72px;
  border-radius: 12px;
}

.logo-badge-panel img {
  border-radius: 12px;
}

.logo-badge-panel svg {
  width: 42px;
  height: 42px;
}

.brand-mark.has-logo {
  gap: 0;
}

.intro-card,
.auth-card,
.card {
  background: rgba(255, 255, 255, .94);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: 0 18px 44px rgba(16, 34, 50, .08);
}

body.theme-dark .intro-card,
body.theme-dark .auth-card,
body.theme-dark .card,
body.theme-dark .signal-grid div,
body.theme-dark .qr-entry-card {
  background: linear-gradient(180deg, rgba(16, 22, 26, .96), rgba(11, 17, 20, .98));
  color: var(--ink);
  box-shadow: 0 20px 44px rgba(0, 0, 0, .36);
}

body.theme-dark .eyebrow {
  color: #7fe1ac;
}

body.theme-dark .signal-grid div,
body.theme-dark .stat-box,
body.theme-dark .qr-entry-card {
  border-color: #29414b;
}

body.theme-dark .segmented {
  background: #0e181d;
  border-color: #23343b;
}

body.theme-dark .segmented button.active {
  background: #16232a;
  color: #f2f6f8;
  box-shadow: 0 8px 18px rgba(0, 0, 0, .26);
}

body.theme-dark .input,
body.theme-dark textarea,
body.theme-dark select {
  background: #0f1c21;
  color: var(--ink);
  border-color: #29414b;
}

body.theme-dark .input::placeholder,
body.theme-dark textarea::placeholder {
  color: #7f9198;
}

body.theme-dark .social-btn,
body.theme-dark .notice,
body.theme-dark .pill,
body.theme-dark .btn.secondary {
  background: #111b20;
  color: #e7eef2;
  border-color: #29414b;
}

body.theme-dark .btn.secondary {
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.02);
}

body.theme-dark .btn {
  box-shadow: 0 10px 24px rgba(29,185,84,.18);
}

body.theme-dark .notice {
  background: #0f181d;
}

body.theme-dark .site-footer,
body.theme-dark .site-footer a {
  color: #9db0b7;
}

body.theme-dark .brand-mark-copy small {
  color: #9db0b7;
}

body.theme-dark .panel-sidebar-card,
body.theme-dark .admin-tools-card,
body.theme-dark .fold-card,
body.theme-dark .fold-card-nested,
body.theme-dark .queue-zone,
body.theme-dark .active-qr-card,
body.theme-dark .panel-nav a,
body.theme-dark .modal-card,
body.theme-dark .modal-list-item,
body.theme-dark .cookie-banner,
body.theme-dark .backend-panel,
body.theme-dark .cms-card,
body.theme-dark .summary-card,
body.theme-dark .active-event-card,
body.theme-dark .backend-login-card,
body.theme-dark .event-access-gate,
body.theme-dark .admin-tools-summary,
body.theme-dark .superadmin-fold > .fold-summary,
body.theme-dark .stat-box {
  background: linear-gradient(180deg, rgba(16, 22, 26, .96), rgba(11, 17, 20, .98));
  color: var(--ink);
  border-color: #29414b;
  box-shadow: 0 20px 44px rgba(0, 0, 0, .32);
}

body.theme-dark .panel-nav a {
  background: #101a1f;
  color: #dfe8ec;
}

body.theme-dark .panel-nav a:hover {
  background: #132128;
  border-color: #29414b;
}

body.theme-dark .panel-nav a.is-active,
body.theme-dark .panel-nav a[aria-current="true"] {
  background: linear-gradient(180deg, rgba(29,185,84,.22), rgba(29,185,84,.12));
  border-color: rgba(29,185,84,.34);
  color: #bdf5cf;
  box-shadow: inset 0 0 0 1px rgba(29,185,84,.12);
}

body.theme-dark .admin-tools-summary,
body.theme-dark .superadmin-fold > .fold-summary {
  background: linear-gradient(180deg, #0e171b, #0b1317);
}

body.theme-dark .admin-tools-toggle,
body.theme-dark .pill-link {
  background: #111b20;
  color: #e7eef2;
  border-color: #29414b;
}

body.theme-dark .queue-zone-primary {
  background: linear-gradient(180deg, rgba(29,185,84,.12), rgba(11, 17, 20, .98));
}

body.theme-dark .queue-zone-history {
  background: linear-gradient(180deg, rgba(20,115,230,.08), rgba(11, 17, 20, .98));
}

body.theme-dark .dj-booth-page .admin-header-card,
body.superadmin-skin.theme-dark .superadmin-hero {
  background: linear-gradient(135deg, #0c1519, #132229 56%, #0f2c22);
  border-color: #23343b;
  color: #eef5f7;
}

body.theme-dark .dj-booth-page .admin-header-card p,
body.theme-dark .dj-booth-page .admin-header-card .muted,
body.superadmin-skin.theme-dark .superadmin-hero p,
body.superadmin-skin.theme-dark .superadmin-hero .eyebrow {
  color: #a8bbc2;
}

body.theme-dark .summary-card strong {
  color: #f1f7fa;
}

body.theme-dark .event-media-placeholder {
  color: #cae9d5;
  background: linear-gradient(135deg, rgba(29,185,84,.18), rgba(20,115,230,.1));
}

body.theme-dark .modal-backdrop {
  background: rgba(3, 8, 10, .68);
}

.intro-card {
  padding: clamp(28px, 6vw, 58px);
}

.intro-card h1 {
  max-width: 780px;
  font-size: clamp(2.35rem, 5.5vw, 5.35rem);
  line-height: .96;
  margin: 12px 0 18px;
  letter-spacing: 0;
}

.intro-card p {
  max-width: 660px;
  font-size: 1.08rem;
}

.auth-card {
  padding: 26px;
}

.auth-card .qr-entry-card {
  margin-top: 18px;
}

.auth-header h2,
.auth-state h2,
h1, h2, h3 {
  margin: 0 0 12px;
  letter-spacing: 0;
}

p {
  color: var(--muted);
  line-height: 1.55;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #23517d;
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.signal-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-top: 28px;
}

.signal-grid div {
  min-height: 108px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #ffffffa8;
}

.signal-grid strong,
.signal-grid span {
  display: block;
}

.signal-grid span {
  color: var(--muted);
  margin-top: 6px;
}

.segmented {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  padding: 4px;
  margin: 18px 0;
  background: #eaf0f4;
  border: 1px solid var(--line);
  border-radius: 8px;
}

.segmented button {
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--muted);
  padding: 10px;
  font: inherit;
  font-weight: 800;
  cursor: pointer;
}

.segmented button.active {
  color: var(--ink);
  background: var(--surface);
  box-shadow: 0 6px 18px rgba(24, 34, 38, .08);
}

.auth-form {
  display: grid;
  gap: 12px;
}

label {
  display: grid;
  gap: 7px;
  color: var(--ink);
  font-weight: 760;
}

.input,
select,
textarea {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px 14px;
  background: #ffffff;
  color: var(--ink);
  font: inherit;
}

textarea { min-height: 90px; }

.input:focus,
select:focus,
textarea:focus {
  outline: 3px solid rgba(0, 167, 165, .18);
  border-color: var(--accent);
}

.checkline {
  grid-template-columns: auto 1fr;
  align-items: start;
  font-weight: 600;
  color: var(--muted);
}

.checkline input {
  margin-top: 3px;
}

.btn {
  border: 0;
  border-radius: 8px;
  padding: 12px 16px;
  background: var(--accent);
  color: var(--accent-ink);
  font: inherit;
  font-weight: 850;
  cursor: pointer;
}

.btn.secondary { background: #eaf0f6; color: var(--ink); }
.btn.danger { background: var(--danger); color: #fff; }
.btn.ok { background: var(--ok); color: #fff; }
.btn.warn { background: var(--gold); color: #271800; }
.btn.full { width: 100%; }
.btn:disabled { opacity: .55; cursor: not-allowed; }

.divider {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 12px;
  align-items: center;
  color: var(--muted);
  font-size: .9rem;
  margin: 18px 0 14px;
}

.divider::before,
.divider::after {
  content: "";
  height: 1px;
  background: var(--line);
}

.social-actions {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

.social-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #ffffff;
  color: var(--ink);
  font: inherit;
  font-weight: 800;
  cursor: pointer;
}

body.theme-dark .social-btn {
  background: #0f181d;
}

.provider-dot {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  display: inline-block;
}

.google-dot { background: conic-gradient(#4285f4 0 25%, #34a853 0 50%, #fbbc05 0 75%, #ea4335 0); }
.apple-dot { background: #111; }
.microsoft-dot { background: conic-gradient(#7fba00 0 25%, #00a4ef 0 50%, #ffb900 0 75%, #f25022 0); }

.card {
  padding: 22px;
  margin: 16px 0;
}

.hero { padding: 34px 0; }
.row { display: flex; gap: 12px; flex-wrap: wrap; }
.row > * { flex: 1; }
.muted { color: var(--muted); font-size: .95rem; }

.track,
.request,
.eventitem {
  display: grid;
  grid-template-columns: 64px 1fr auto;
  gap: 14px;
  align-items: center;
  border-top: 1px solid var(--line);
  padding: 14px 0;
}

.public-request {
  grid-template-columns: 64px 1fr;
}

.track img,
.request img {
  width: 64px;
  height: 64px;
  border-radius: 8px;
  object-fit: cover;
  background: #e8dfd2;
}

.pill {
  display: inline-block;
  padding: 4px 9px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--muted);
  font-size: .82rem;
}

body.theme-dark .status-pending { color: #f5c24b; }
body.theme-dark .status-accepted { color: #4ce28c; }
body.theme-dark .status-played { color: #7fe1ac; }

.status-pending { color: var(--warn); }
.status-accepted { color: var(--ok); }
.status-rejected,
.status-blocked { color: var(--danger); }
.status-played { color: #087f7e; }
.actions { display: flex; gap: 8px; flex-wrap: wrap; }
.small { font-size: .88rem; }
.hidden { display: none !important; }

.topnav {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: center;
}

.notice {
  border-left: 4px solid var(--accent);
  padding: 10px 12px;
  background: #ffffff;
  border-radius: 8px;
  color: var(--ink);
}

.notice.error { border-left-color: var(--danger); }

.site-footer {
  width: min(1120px, calc(100% - 32px));
  margin: 0 auto 24px;
  display: flex;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  color: var(--muted);
  font-size: .94rem;
}

.site-footer nav {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.panel-shell {
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr);
  gap: 18px;
  align-items: start;
}

.panel-main {
  min-width: 0;
  display: grid;
  gap: 16px;
}

.panel-sidebar {
  position: sticky;
  top: 18px;
}

.panel-sidebar-card {
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255,255,255,.96);
  box-shadow: 0 18px 44px rgba(16, 34, 50, .08);
}

.panel-sidebar-card h3 {
  margin: 6px 0 12px;
}

.panel-nav {
  display: grid;
  gap: 6px;
}

.panel-nav a {
  display: block;
  padding: 10px 12px;
  border: 1px solid transparent;
  border-radius: 8px;
  color: var(--ink);
  text-decoration: none;
  background: #f6f9fb;
  font-weight: 700;
}

.panel-nav a:hover {
  border-color: var(--line);
  background: #eef5fb;
}

.panel-nav a.is-active,
.panel-nav a[aria-current="true"] {
  border-color: rgba(20, 115, 230, .22);
  background: linear-gradient(180deg, #eaf3ff, #f5f9ff);
  color: #0f4fa6;
  box-shadow: inset 0 0 0 1px rgba(20, 115, 230, .06);
}

.queue-group-row {
  cursor: pointer;
}

.modal-shell {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: grid;
  place-items: center;
  padding: 20px;
}

.modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 31, 40, .42);
}

.modal-card {
  position: relative;
  width: min(720px, calc(100vw - 24px));
  max-height: min(80vh, 840px);
  overflow: auto;
  padding: 22px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #ffffff;
  box-shadow: 0 26px 80px rgba(16, 34, 50, .22);
}

.modal-body {
  display: grid;
  gap: 14px;
}

.modal-meta {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.modal-list {
  display: grid;
  gap: 10px;
}

.modal-list-item {
  display: grid;
  gap: 8px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f9fbfd;
}

.cookie-banner {
  position: fixed;
  left: 16px;
  right: 16px;
  bottom: 16px;
  z-index: 20;
  max-width: 960px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  box-shadow: 0 18px 54px rgba(24, 34, 38, .18);
}

.cookie-banner p {
  margin: 4px 0 0;
}

.legal-page {
  background: var(--bg);
}

.legal-doc {
  max-width: 860px;
  margin: 0 auto;
  padding: 32px 18px;
}

.legal-doc .brand-mark {
  margin-bottom: 24px;
}

.legal-doc article {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: clamp(22px, 5vw, 44px);
}

.admin-page {
  max-width: 1440px;
}

.admin-stack {
  display: grid;
  gap: 16px;
}

.admin-header-card h1 {
  margin: 0;
}

.dj-booth-page .admin-header-card {
  background: linear-gradient(135deg, #10212b, #183646);
  color: #eef5fb;
  border-color: #183646;
}

.dj-booth-page .admin-header-card p,
.dj-booth-page .admin-header-card .muted {
  color: #c8d8e6;
}

.studio-header {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: center;
}

.studio-header > div:first-child {
  min-width: 0;
}

.dj-booth-page .admin-header-card {
  overflow: hidden;
}

.admin-tools-card {
  padding: 0;
  overflow: hidden;
  background: rgba(255,255,255,.96);
}

.admin-tools-summary {
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 18px 22px;
  cursor: pointer;
  background: linear-gradient(180deg, #ffffff, #f7fbfd);
}

.admin-tools-summary::-webkit-details-marker {
  display: none;
}

.admin-tools-summary strong,
.admin-tools-summary span {
  display: block;
}

.admin-tools-summary span {
  color: var(--muted);
  font-size: .95rem;
  font-weight: 500;
}

.admin-tools-toggle {
  min-width: 72px;
  text-align: center;
  padding: 8px 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #ffffff;
  color: var(--ink);
  font-weight: 800;
}

.admin-tools-card[open] .admin-tools-toggle::after {
  content: " abierto";
  font-weight: 600;
  color: var(--muted);
}

.admin-tools-card:not([open]) .admin-tools-toggle::after {
  content: "";
}

.admin-tools-body {
  display: grid;
  gap: 0;
  border-top: 1px solid var(--line);
}

.admin-tools-body > section {
  padding: 22px;
}

.admin-tools-body > section + section {
  border-top: 1px solid var(--line);
}

.admin-token-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: end;
  margin-top: 16px;
}

.admin-token-field {
  margin: 0;
}

.admin-login-card {
  display: grid;
  gap: 16px;
  max-width: 520px;
}

.active-qr-card {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  gap: 18px;
  align-items: center;
  margin: 10px 0 2px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #ffffff;
}

.active-qr-preview {
  display: grid;
  place-items: center;
}

.active-qr-preview img {
  width: min(100%, 220px);
  height: auto;
  display: block;
  border-radius: 8px;
  background: #fff;
}

.active-qr-copy {
  display: grid;
  gap: 10px;
}

.active-qr-copy h3 {
  margin: 0;
}

.active-qr-copy .event-meta {
  margin-top: 0;
}

.summary-strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin: 14px 0 6px;
}

.summary-strip.compact {
  margin-bottom: 0;
}

.stat-box {
  min-height: 78px;
  display: grid;
  align-content: center;
  gap: 4px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #ffffff;
}

.stat-box strong {
  font-size: 1.35rem;
}

.stat-box span {
  color: var(--muted);
  font-size: .9rem;
}

.event-admin-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 14px;
  padding: 16px 0;
  border-top: 1px solid var(--line);
}

.event-admin-item.is-selected {
  background: rgba(20, 115, 230, .05);
}

.event-admin-heading {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
  margin-bottom: 6px;
}

.event-admin-main .small {
  margin: 10px 0 0;
}

.studio-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, .9fr);
  gap: 16px;
}

.studio-form,
.studio-list {
  display: grid;
  gap: 12px;
}

.studio-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  padding: 14px 0;
  border-top: 1px solid var(--line);
}

.pill-link {
  display: inline-flex;
  align-items: center;
  padding: 4px 9px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--ink);
  text-decoration: none;
  font-size: .82rem;
}

.studio-queue-card {
  display: grid;
  gap: 16px;
}

.queue-layout {
  display: grid;
  gap: 16px;
}

.queue-zone {
  display: grid;
  gap: 10px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #ffffff;
}

.queue-zone-primary {
  background: linear-gradient(180deg, rgba(20, 115, 230, .06), rgba(14, 165, 164, .03));
}

.queue-zone-history {
  background: rgba(16, 32, 38, .03);
}

.queue-zone-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
}

.queue-zone-head h3 {
  margin: 0;
  font-size: 1rem;
}

.admin-request-row {
  grid-template-columns: 48px minmax(0, 1fr) auto;
  gap: 10px;
  padding: 10px 0;
}

.admin-request-row img {
  width: 48px;
  height: 48px;
}

.blocked-track-badge {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  background: rgba(200, 51, 77, .12);
  color: var(--danger);
  font-weight: 900;
  font-size: 1rem;
}

.admin-request-main {
  min-width: 0;
}

.admin-request-head {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: start;
  margin-bottom: 2px;
}

.admin-request-head strong {
  min-width: 0;
  font-size: .98rem;
  line-height: 1.2;
}

.admin-request-meta {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.admin-request-main .muted {
  display: block;
  font-size: .88rem;
  line-height: 1.35;
}

.admin-request-main .small {
  margin: 6px 0 0;
  line-height: 1.35;
}

.admin-request-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(64px, auto));
  gap: 6px;
  align-content: start;
}

.mini-btn {
  min-height: 34px;
  padding: 8px 10px;
  font-size: .82rem;
  font-weight: 800;
}

.compact-btn {
  min-height: 36px;
  padding: 8px 12px;
  font-size: .84rem;
}

.event-meta {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 14px;
}

.nested-tool {
  margin: 12px 0 0;
}

.public-queue-layout {
  display: grid;
  gap: 16px;
}

.mine-request {
  background: rgba(20, 115, 230, .05);
}

.qr-entry-card {
  display: grid;
  gap: 14px;
  margin: 0 0 22px;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255,255,255,.62);
}

.qr-entry-card h3 {
  margin: 6px 0 8px;
}

.qr-entry-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.qr-video {
  width: 100%;
  max-width: 420px;
  aspect-ratio: 1 / 1;
  border-radius: 8px;
  object-fit: cover;
  background: #0f1619;
}

.fold-card {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255,255,255,.96);
}

.fold-card[open] {
  box-shadow: 0 18px 44px rgba(16, 34, 50, .08);
}

.fold-card-nested {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fbfdff;
}

.fold-summary {
  list-style: none;
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: center;
  padding: 16px 18px;
  cursor: pointer;
}

.fold-summary::-webkit-details-marker {
  display: none;
}

.fold-summary strong,
.fold-summary span {
  display: block;
}

.fold-summary > div span,
.fold-summary .fold-toggle {
  color: var(--muted);
  font-size: .92rem;
  font-weight: 600;
}

.fold-card[open] > .fold-summary .fold-toggle {
  color: var(--accent);
}

.fold-body {
  border-top: 1px solid var(--line);
  padding: 18px;
}

.event-access-gate,
.backend-login-card,
.backend-panel,
.cms-card,
.summary-card,
.active-event-card,
.superadmin-hero {
  background: rgba(255, 255, 255, .94);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: 0 18px 44px rgba(16, 34, 50, .08);
}

.event-access-gate {
  display: grid;
  gap: 18px;
  padding: 24px;
}

.event-access-gate .auth-form {
  margin-top: 12px;
}

.legal-nav {
  margin-top: 18px;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.superadmin-page {
  max-width: 1500px;
}

.superadmin-page .wrap,
.superadmin-page.wrap {
  max-width: 1500px;
}

.superadmin-hero {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  align-items: end;
  padding: 28px;
  margin-bottom: 16px;
  background: linear-gradient(135deg, #0f1f28, #183444);
  border-color: #183444;
  color: #eef5fb;
}

.superadmin-hero h1 {
  font-size: clamp(2rem, 4vw, 3.2rem);
  margin-bottom: 8px;
}

.superadmin-hero p,
.superadmin-hero .eyebrow {
  color: #c8d8e6;
}

.superadmin-stack {
  display: grid;
  gap: 16px;
}

.superadmin-fold {
  padding: 0;
  overflow: hidden;
}

.superadmin-fold > .fold-summary {
  background: linear-gradient(180deg, #ffffff, #f6f9fc);
}

.superadmin-summary-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.summary-card {
  min-height: 112px;
  padding: 18px;
  display: grid;
  align-content: center;
  gap: 6px;
  background: linear-gradient(180deg, #ffffff, #f8fbfd);
}

.summary-card strong {
  font-size: 2rem;
  color: #0f1f28;
}

.summary-card span {
  color: var(--muted);
}

.superadmin-grid {
  display: grid;
  grid-template-columns: 1.25fr .95fr;
  gap: 16px;
  align-items: start;
}

.superadmin-grid-primary {
  grid-template-columns: minmax(0, 1.18fr) minmax(420px, .82fr);
}

.backend-panel {
  padding: 22px;
  background: rgba(255,255,255,.96);
}

.active-event-grid {
  display: grid;
  gap: 14px;
}

.active-event-card {
  display: grid;
  grid-template-columns: 180px minmax(0, 1fr);
  overflow: hidden;
  align-items: stretch;
}

.active-event-media {
  min-height: 100%;
  background: #e8f0f6;
}

.active-event-media img,
.active-event-media .event-media-placeholder {
  width: 100%;
  height: 100%;
  min-height: 180px;
  object-fit: cover;
  display: grid;
  place-items: center;
}

.event-media-placeholder {
  color: #2b4758;
  font-weight: 900;
  font-size: 1.4rem;
  background: linear-gradient(135deg, rgba(20,115,230,.14), rgba(15,31,40,.08));
}

.active-event-body {
  display: grid;
  gap: 12px;
  padding: 18px;
  align-content: start;
}

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

.active-event-head h3 {
  margin: 4px 0 0;
}

.active-event-title {
  min-width: 0;
}

.active-event-subhead {
  margin: 8px 0 0;
  color: var(--muted);
  font-weight: 600;
}

.active-event-meta-row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

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

.active-event-stats .stat-box {
  min-height: 88px;
  padding: 16px 14px;
  background: linear-gradient(180deg, #ffffff, #f7fbff);
  border: 1px solid #dbe6f1;
}

.active-event-actions {
  margin-top: 4px;
}

@media (min-width: 1361px) {
  .active-event-card {
    grid-template-columns: 220px minmax(0, 1fr);
  }

  .active-event-media img,
  .active-event-media .event-media-placeholder {
    min-height: 220px;
  }

  .active-event-body {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "head"
      "meta"
      "stats"
      "actions";
    row-gap: 14px;
    align-items: start;
  }

  .active-event-head {
    grid-area: head;
  }

  .active-event-meta-row {
    grid-area: meta;
  }

  .active-event-stats {
    grid-area: stats;
  }

  .active-event-actions {
    grid-area: actions;
    margin-top: 2px;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    align-content: start;
    min-width: 0;
  }

  .active-event-actions .btn {
    width: 100%;
    min-width: 0;
    justify-content: center;
  }
}

.cms-grid {
  display: grid;
  grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
  gap: 14px;
}

.superadmin-grid-cms {
  grid-template-columns: minmax(340px, .88fr) minmax(0, 1.12fr);
}

.backend-panel-admins,
.backend-panel-cms,
.cms-grid-settings,
.cms-card-brand,
.cms-card-menu {
  min-width: 0;
}

.cms-grid-settings {
  grid-template-columns: minmax(280px, .92fr) minmax(340px, 1.08fr);
  align-items: start;
}

.backend-panel-admins .studio-item {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
}

.backend-panel-admins .studio-item .actions {
  justify-content: flex-end;
}

.backend-panel-cms .topnav {
  margin-bottom: 8px;
}

.cms-card-brand {
  display: grid;
  align-content: start;
  gap: 12px;
}

.cms-card-menu {
  display: grid;
  align-content: start;
}

.backend-dj-grid {
  grid-template-columns: 1fr;
}

.backend-dj-form-card,
.backend-dj-side-card {
  min-width: 0;
}

.backend-dj-side-card {
  display: grid;
  gap: 14px;
  align-content: start;
}

.cms-grid-pages {
  grid-template-columns: minmax(280px, .72fr) minmax(0, 1.28fr);
}

.cms-card {
  padding: 16px;
  background: #fbfdff;
  border: 1px solid var(--line);
  border-radius: 8px;
}

.cms-card h3 {
  margin-bottom: 12px;
}

.cms-textarea,
.cms-editor {
  min-height: 220px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

.cms-card-menu .cms-textarea {
  min-height: 360px;
}

.backend-login-form {
  max-width: 520px;
}

.backend-onboarding-note {
  display: grid;
  gap: 8px;
  margin-bottom: 0;
}

.backend-form-intro h3,
.backend-onboarding-note h3 {
  margin-bottom: 6px;
}

.backend-tip-card {
  padding: 14px;
  border: 1px solid #d9e7fb;
  background: linear-gradient(180deg, #f7fbff, #f2f8ff);
  border-radius: 8px;
}

.backend-fresh-card {
  display: grid;
  gap: 12px;
  padding: 14px;
  margin-bottom: 16px;
  border: 1px solid #d9e7fb;
  background: linear-gradient(180deg, #f7fbff, #eef6ff);
  border-radius: 8px;
}

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

.backend-credential-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 16px;
}

.backend-credential-list div {
  display: grid;
  gap: 3px;
}

.backend-credential-list strong {
  font-size: .82rem;
  color: var(--muted);
  text-transform: uppercase;
}

.backend-logo-stack {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  align-items: start;
  margin: 14px 0 18px;
}

.brand-upload-panel {
  gap: 10px;
}

.brand-logo-preview {
  min-height: 140px;
  display: grid;
  place-items: center;
  padding: 12px;
  border: 1px dashed #c9d7e3;
  border-radius: 8px;
  background: linear-gradient(180deg, #ffffff, #f8fbfd);
}

.brand-logo-preview-large {
  min-height: 180px;
  padding: 18px;
}

.brand-logo-preview img {
  width: 100%;
  max-height: 144px;
  object-fit: contain;
}

.brand-logo-empty {
  color: var(--muted);
  font-weight: 700;
  text-align: center;
}

.brand-upload-actions,
.brand-theme-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.brand-theme-actions {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: stretch;
}

.brand-theme-actions .btn,
.brand-upload-actions .btn {
  width: 100%;
  min-width: 0;
  justify-content: center;
}

.field-help {
  color: var(--muted);
  font-size: .84rem;
  font-weight: 520;
}

.backend-checklist {
  margin: 0;
  padding-left: 18px;
  color: var(--muted);
}

.backend-checklist li + li {
  margin-top: 6px;
}

@media (min-width: 1200px) {
  .auth-shell {
    width: min(1240px, calc(100% - 40px));
    grid-template-columns: minmax(0, 1.15fr) minmax(380px, .7fr);
  }

  .intro-card {
    min-height: 560px;
    display: grid;
    align-content: center;
  }

  .public-queue-layout {
    grid-template-columns: minmax(320px, .9fr) minmax(0, 1.1fr);
  }

  .queue-layout {
    grid-template-columns: minmax(0, 1.15fr) minmax(320px, .9fr);
    align-items: start;
  }

  .queue-zone-primary {
    grid-column: 1;
    grid-row: 1 / span 2;
  }

  .queue-zone-history {
    grid-column: 2;
  }

  .panel-shell {
    grid-template-columns: 250px minmax(0, 1fr);
  }
}

@media (max-width: 1360px) {
  .superadmin-grid-primary {
    grid-template-columns: 1fr;
  }

  .superadmin-grid-cms {
    grid-template-columns: 1fr;
  }

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

  .active-event-card {
    grid-template-columns: 160px minmax(0, 1fr);
  }

  .active-event-actions {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 1180px) {
  .panel-shell {
    grid-template-columns: 1fr;
  }

  .panel-sidebar {
    position: static;
  }
}

@media (max-width: 860px) {
  .auth-shell {
    grid-template-columns: 1fr;
    min-height: auto;
  }

  .auth-shell-home {
    grid-template-areas:
      "brand"
      "intro"
      "auth";
  }

  .signal-grid,
  .social-actions,
  .superadmin-summary-grid,
  .superadmin-grid,
  .superadmin-grid-cms,
  .cms-grid,
  .cms-grid-settings,
  .active-event-card,
  .backend-dj-grid,
  .cms-grid-pages,
  .backend-logo-stack {
    grid-template-columns: 1fr;
  }

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

  .active-event-actions {
    grid-template-columns: 1fr;
  }

  .brand-theme-actions {
    grid-template-columns: 1fr;
  }

  .studio-grid,
  .active-qr-card,
  .panel-shell {
    grid-template-columns: 1fr;
  }

  .superadmin-hero {
    flex-direction: column;
    align-items: start;
  }

  .studio-header {
    flex-direction: column;
    align-items: stretch;
    gap: 14px;
  }

  .studio-header .actions {
    width: 100%;
    display: grid;
  }

  .studio-header .actions .btn,
  .studio-header .actions .btn.secondary {
    width: 100%;
    justify-content: center;
    min-height: 46px;
    border-radius: 14px;
  }

  .dj-booth-page .admin-header-card {
    padding: 16px;
  }

  .dj-booth-page .admin-header-card h1 {
    font-size: clamp(2rem, 7vw, 2.6rem);
    line-height: 1;
    margin-top: 2px;
  }

  .dj-booth-page .admin-header-card .brand-mark-panel {
    margin-bottom: 10px;
  }

  .dj-booth-page .admin-header-card .muted {
    font-size: .92rem;
  }

  .panel-sidebar {
    position: static;
  }

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

  .logo-badge-brand {
    width: 74px;
    height: 74px;
  }

  .logo-badge-brand svg {
    width: 46px;
    height: 46px;
  }

  .logo-badge-panel {
    width: 62px;
    height: 62px;
  }

  .logo-badge-panel svg {
    width: 38px;
    height: 38px;
  }

  .backend-credential-list {
    grid-template-columns: 1fr;
  }

  .brand-mark.has-logo,
  .brand-mark-panel.has-logo,
  .brand-mark-hero.has-logo {
    width: 100%;
    display: block;
  }

  .brand-mark.has-logo .logo-badge-brand,
  .brand-mark.has-logo .logo-badge-panel,
  .brand-mark-panel.has-logo .logo-badge-panel,
  .brand-mark-hero.has-logo .logo-badge-brand {
    width: 100%;
    height: auto;
    min-height: 148px;
    aspect-ratio: 16 / 7.9;
    padding: 0;
    border-radius: 24px;
    background: transparent;
    box-shadow: 0 22px 48px rgba(16, 32, 38, .14);
  }

  .brand-mark.has-logo .logo-badge-brand img,
  .brand-mark.has-logo .logo-badge-panel img,
  .brand-mark-panel.has-logo .logo-badge-panel img,
  .brand-mark-hero.has-logo .logo-badge-brand img {
    width: 100%;
    height: 100%;
    border-radius: 24px;
    object-fit: contain;
    background: transparent;
  }

  .brand-mark-panel {
    margin-bottom: 16px;
  }

  .ad-banner-free {
    --free-ad-height: 112px;
    align-items: center;
    height: var(--free-ad-height);
    max-height: 25vh;
  }

  .ad-player {
    grid-template-columns: 52px minmax(0, 1fr);
    gap: 10px;
  }

  .ad-player-dots {
    justify-content: flex-end;
  }
}

@media (max-width: 720px) {
  body {
    overflow-x: hidden;
  }

  .track,
  .request,
  .eventitem {
    grid-template-columns: 54px 1fr;
  }

  .track .actions,
  .request .actions,
  .eventitem .actions {
    grid-column: 1 / -1;
  }

  .wrap { padding: 22px 12px; }
  .auth-shell { width: min(100% - 20px, 1120px); padding-top: 18px; gap: 14px; }
  .intro-card, .auth-card { padding: 20px; }
  .cookie-banner { align-items: stretch; flex-direction: column; }
  .cookie-banner .actions { width: 100%; }
  .cookie-banner .btn { flex: 1; }
  .admin-token-row,
  .event-admin-item,
  .studio-item {
    grid-template-columns: 1fr;
  }

  .admin-request-row {
    grid-template-columns: 48px minmax(0, 1fr);
  }

  .admin-request-actions {
    grid-column: 1 / -1;
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .admin-request-head {
    flex-direction: column;
  }

  .admin-request-meta {
    justify-content: flex-start;
  }

  .ad-banner-free {
    --free-ad-height: 118px;
    align-items: center;
    height: var(--free-ad-height);
  }

  .ad-player-mark img {
    width: 46px;
    height: 46px;
    border-radius: 12px;
  }

  .ad-banner-topline,
  .ad-banner-bottomline {
    gap: 8px;
  }

  .ad-banner-copy span,
  .ad-banner-meta {
    font-size: .78rem;
  }

  .ad-banner-copy strong {
    font-size: .94rem;
  }

  .ad-player-stage {
    min-height: 64px;
  }

  .ad-banner-cta {
    min-width: 96px;
    min-height: 36px;
    padding: 8px 12px;
    font-size: .84rem;
  }
}