:root {
  --bg: #02040a;
  --bg-2: #060a16;
  --text: rgba(255,255,255,.94);
  --muted: rgba(255,255,255,.64);
  --muted-2: rgba(255,255,255,.44);
  --stroke: rgba(255,255,255,.14);
  --stroke-strong: rgba(255,255,255,.22);
  --glass: rgba(255,255,255,.07);
  --glass-strong: rgba(255,255,255,.12);
  --blue: #1c7cff;
  --blue-2: #56d4ff;
  --cyan: #77e8ff;
  --danger: #ff5b7a;
  --ok: #7cffc9;
  --radius-xl: 34px;
  --radius-lg: 26px;
  --radius-md: 18px;
  --shadow: 0 30px 120px rgba(0,30,120,.36);
  --ease: cubic-bezier(.2,.9,.16,1);
}

* { box-sizing: border-box; }
html { background: var(--bg); scroll-behavior: smooth; }
body {
  min-height: 100vh;
  margin: 0;
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", Inter, Segoe UI, Arial, sans-serif;
  background:
    radial-gradient(circle at 12% 8%, rgba(38,117,255,.36), transparent 32vw),
    radial-gradient(circle at 88% 16%, rgba(36,214,255,.16), transparent 28vw),
    radial-gradient(circle at 48% 92%, rgba(9,54,255,.28), transparent 36vw),
    linear-gradient(180deg, #010309 0%, #050712 48%, #02040a 100%);
  overflow-x: hidden;
}
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(circle at 50% 18%, black, transparent 72%);
}
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; }
button { cursor: pointer; }
img { max-width: 100%; display: block; }

.noise {
  position: fixed;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  opacity: .055;
  mix-blend-mode: soft-light;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 220 220' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.7'/%3E%3C/svg%3E");
}
.orb {
  position: fixed;
  z-index: 0;
  width: 36vw;
  height: 36vw;
  min-width: 360px;
  min-height: 360px;
  border-radius: 999px;
  filter: blur(58px);
  pointer-events: none;
  opacity: .32;
  animation: floatOrb 13s var(--ease) infinite alternate;
}
.orb-a { left: -12vw; top: 10vh; background: #005cff; }
.orb-b { right: -15vw; top: 44vh; background: #00d4ff; animation-delay: -5s; opacity: .18; }
@keyframes floatOrb {
  from { transform: translate3d(0,0,0) scale(1); }
  to { transform: translate3d(4vw,-4vh,0) scale(1.08); }
}

.topbar {
  position: sticky;
  top: 18px;
  z-index: 20;
  width: min(1440px, calc(100% - 32px));
  margin: 18px auto 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 10px 12px 10px 18px;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 999px;
  background: rgba(2,5,13,.66);
  backdrop-filter: blur(26px);
  box-shadow: 0 18px 70px rgba(0,0,0,.32);
}
.brand { display: inline-flex; align-items: center; gap: 10px; font-weight: 680; letter-spacing: -.03em; }
.brand-mark {
  width: 28px;
  height: 28px;
  border-radius: 10px;
  background: radial-gradient(circle at 30% 24%, rgba(255,255,255,.92), transparent 18%), linear-gradient(135deg,#65e4ff,#146dff 42%,#001dcb);
  box-shadow: 0 0 30px rgba(27,126,255,.62);
}
.top-actions { display: flex; align-items: center; gap: 8px; }
.top-actions a, .ghost-btn {
  min-height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 9px 13px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.11);
  background: rgba(255,255,255,.055);
  color: rgba(255,255,255,.76);
  transition: .26s var(--ease);
}
.top-actions a:hover, .ghost-btn:hover { color: #fff; background: rgba(255,255,255,.1); border-color: rgba(86,212,255,.26); }
.ghost-btn { appearance: none; }
.admin-link {
  color: #e9fbff !important;
  border-color: rgba(86,212,255,.22) !important;
  background: linear-gradient(135deg, rgba(41,143,255,.18), rgba(38,222,255,.08)) !important;
}
.admin-link::before {
  content: "";
  width: 7px;
  height: 7px;
  margin-right: 7px;
  border-radius: 999px;
  background: #65e4ff;
  box-shadow: 0 0 14px rgba(101,228,255,.72);
}

.app-shell {
  position: relative;
  z-index: 2;
  width: min(1440px, calc(100% - 40px));
  margin: 0 auto;
  padding: clamp(30px, 3.4vw, 54px) 0 72px;
}
.hero-section {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 360px);
  gap: clamp(24px, 3vw, 48px);
  align-items: center;
  margin-bottom: 22px;
}
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
  padding: 8px 12px;
  border: 1px solid rgba(255,255,255,.13);
  border-radius: 999px;
  color: rgba(255,255,255,.72);
  font-size: 13px;
  line-height: 1;
  background: rgba(255,255,255,.055);
  backdrop-filter: blur(18px);
}
.dot {
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: var(--cyan);
  box-shadow: 0 0 20px var(--cyan);
}
h1, h2, h3, p { margin: 0; }
h1 {
  max-width: 820px;
  font-size: clamp(46px, 5.2vw, 82px);
  line-height: .94;
  letter-spacing: -.065em;
  font-weight: 740;
  background: linear-gradient(92deg,#fff 0%,#dbeaff 32%,#54d8ff 63%,#1d75ff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.hero-copy {
  max-width: 720px;
  margin-top: 18px;
  color: var(--muted);
  font-size: clamp(16px, 1.25vw, 19px);
  line-height: 1.48;
  letter-spacing: -.025em;
}
.hero-panel, .toolbar-card, .creative-card, .dialog-shell, .player-stage, .creative-sidebar {
  border: 1px solid var(--stroke);
  background: linear-gradient(145deg, rgba(255,255,255,.105), rgba(255,255,255,.04));
  backdrop-filter: blur(24px);
  box-shadow: var(--shadow), inset 0 1px rgba(255,255,255,.12);
}
.hero-panel {
  border-radius: 28px;
  padding: 14px;
  display: grid;
  gap: 8px;
}
.panel-row {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  align-items: center;
  padding: 12px 14px;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(0,0,0,.16);
}
.panel-row span { color: var(--muted-2); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; }
.panel-row strong { color: #fff; font-size: 14px; text-align: right; }

.toolbar-card {
  position: sticky;
  top: 80px;
  z-index: 15;
  border-radius: 26px;
  padding: 14px;
  display: grid;
  grid-template-columns: minmax(220px, 1.35fr) repeat(5, minmax(138px, .68fr));
  gap: 10px;
  margin-bottom: 18px;
}
.search-wrap, .filter-wrap { display: grid; gap: 7px; }
.search-wrap label, .filter-wrap label {
  color: var(--muted-2);
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  padding-left: 4px;
}
input, select, textarea {
  width: 100%;
  min-height: 46px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.1);
  background: rgba(0,0,0,.22);
  color: var(--text);
  padding: 0 14px;
  outline: none;
}
textarea { min-height: 120px; padding: 12px 14px; resize: vertical; }
input:focus, select:focus, textarea:focus { border-color: rgba(86,212,255,.38); box-shadow: 0 0 0 4px rgba(86,212,255,.08); }
select option { color: #111827; }
.status-line {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  align-items: center;
  min-height: 28px;
  margin: 0 2px 14px;
  color: var(--muted-2);
  font-size: 13px;
}

.gallery-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}
.creative-card {
  min-height: 420px;
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: transform .28s var(--ease), border-color .28s var(--ease), background .28s var(--ease);
}
.creative-card:hover { transform: translateY(-4px); border-color: rgba(86,212,255,.26); background: linear-gradient(145deg, rgba(255,255,255,.14), rgba(255,255,255,.052)); }
.card-button {
  appearance: none;
  width: 100%;
  height: 100%;
  border: 0;
  background: transparent;
  color: inherit;
  text-align: left;
  padding: 14px;
  display: grid;
  grid-template-rows: 210px 1fr;
  gap: 16px;
}
.card-visual {
  position: relative;
  border-radius: 22px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.09);
  background: radial-gradient(circle at 30% 26%, rgba(86,212,255,.42), transparent 30%), linear-gradient(135deg, rgba(28,124,255,.72), rgba(4,29,255,.2));
}
.card-cover { width: 100%; height: 100%; object-fit: cover; opacity: .92; }
.card-visual::after {
  content: "";
  position: absolute;
  inset: -40%;
  background: linear-gradient(120deg, transparent 34%, rgba(255,255,255,.20), transparent 58%);
  transform: translateX(-60%) rotate(8deg);
  animation: shine 4s var(--ease) infinite;
}
@keyframes shine {
  0%, 22% { transform: translateX(-58%) rotate(8deg); opacity: 0; }
  34% { opacity: .8; }
  58%, 100% { transform: translateX(58%) rotate(8deg); opacity: 0; }
}
.card-badges { position: absolute; left: 12px; right: 12px; top: 12px; z-index: 2; display: flex; flex-wrap: wrap; gap: 7px; }
.badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 9px;
  border-radius: 999px;
  background: rgba(0,0,0,.34);
  border: 1px solid rgba(255,255,255,.1);
  color: rgba(255,255,255,.84);
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
  backdrop-filter: blur(12px);
}
.card-copy { display: grid; align-content: start; gap: 10px; padding: 0 2px 2px; }
.card-category { color: var(--cyan); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; }
.card-copy h2 { font-size: 27px; line-height: 1; letter-spacing: -.052em; }
.card-copy p { color: var(--muted); line-height: 1.42; font-size: 15px; }
.card-meta { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.meta-pill {
  padding: 8px 10px;
  border-radius: 999px;
  background: rgba(0,0,0,.22);
  border: 1px solid rgba(255,255,255,.08);
  color: rgba(255,255,255,.7);
  font-size: 12px;
}
.empty-state, .error-state {
  grid-column: 1 / -1;
  min-height: 260px;
  display: grid;
  place-items: center;
  text-align: center;
  border: 1px dashed rgba(255,255,255,.16);
  border-radius: 28px;
  color: var(--muted);
  background: rgba(255,255,255,.04);
  padding: 32px;
}
.error-state strong { color: var(--danger); display: block; margin-bottom: 10px; }

.creative-dialog {
  width: min(1460px, calc(100vw - 28px));
  max-height: calc(100dvh - 28px);
  border: 0;
  padding: 0;
  color: var(--text);
  background: transparent;
  overflow: visible;
}
.creative-dialog::backdrop { background: rgba(0,0,0,.64); backdrop-filter: blur(20px); }
.dialog-shell {
  border-radius: 34px;
  overflow: hidden;
  max-height: calc(100dvh - 28px);
  display: flex;
  flex-direction: column;
  background: radial-gradient(circle at 16% 0%, rgba(28,124,255,.23), transparent 36%), rgba(6,9,18,.94);
}
.dialog-head {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  align-items: flex-start;
  padding: 28px 24px 22px;
  border-bottom: 1px solid rgba(255,255,255,.08);
  flex: 0 0 auto;
}
.back-btn {
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--cyan);
  padding: 0 0 10px;
  font-weight: 650;
}
.dialog-head h2 { font-size: clamp(30px, 3.7vw, 52px); line-height: 1.02; letter-spacing: -.06em; padding-top: 2px; }
.dialog-head p { margin-top: 10px; color: var(--muted); }
.dialog-actions { display: flex; gap: 8px; align-items: center; }
.close-btn {
  width: 44px;
  height: 44px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.07);
  color: white;
  font-size: 24px;
  display: grid;
  place-items: center;
  transition: .28s var(--ease);
}
.close-btn:hover { background: rgba(255,255,255,.14); transform: rotate(90deg); }
.dialog-body {
  display: grid;
  grid-template-columns: minmax(280px, 360px) minmax(0, 1fr);
  gap: 14px;
  padding: 14px;
  min-height: 0;
  flex: 1 1 auto;
  overflow: hidden;
}
.creative-sidebar, .player-stage { border-radius: 26px; }
.creative-sidebar {
  padding: 18px;
  display: grid;
  align-content: start;
  gap: 18px;
  overflow: auto;
  max-height: none;
  min-height: 0;
}
.creative-sidebar p { color: var(--muted); line-height: 1.45; }
.chip-cloud { display: flex; flex-wrap: wrap; gap: 7px; }
.chip { padding: 8px 10px; border-radius: 999px; background: rgba(86,212,255,.1); border: 1px solid rgba(86,212,255,.14); color: rgba(255,255,255,.76); font-size: 12px; }
.selector-block h3 { color: var(--muted-2); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; margin-bottom: 8px; }
.segmented { display: flex; flex-wrap: wrap; gap: 8px; }
.segmented button, .material-item {
  appearance: none;
  border: 1px solid rgba(255,255,255,.1);
  background: rgba(0,0,0,.22);
  color: rgba(255,255,255,.72);
  border-radius: 999px;
  padding: 9px 12px;
  transition: .24s var(--ease);
}
.segmented button.active, .material-item.active { color: #fff; background: linear-gradient(135deg, rgba(86,212,255,.24), rgba(28,124,255,.42)); border-color: rgba(86,212,255,.32); }
.material-list { display: grid; gap: 8px; }
.material-item { border-radius: 16px; text-align: left; display: grid; gap: 4px; padding: 12px; }
.material-item strong { font-size: 13px; color: #fff; }
.material-item span { font-size: 12px; color: var(--muted-2); }
.player-stage {
  min-height: min(620px, calc(100dvh - 190px));
  height: 100%;
  position: relative;
  overflow: hidden;
  display: grid;
  place-items: center;
  padding: clamp(16px, 2vw, 28px);
  background:
    radial-gradient(circle at 28% 18%, rgba(86,212,255,.16), transparent 30%),
    radial-gradient(circle at 82% 78%, rgba(28,124,255,.22), transparent 36%),
    linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.02));
}
.empty-player { color: var(--muted); text-align: center; }
.player-shell { width: 100%; height: 100%; min-height: 0; display: grid; place-items: center; }
.media-toolbar {
  position: absolute;
  z-index: 5;
  left: 22px;
  top: 22px;
  right: 22px;
  display: flex;
  justify-content: space-between;
  gap: 12px;
  pointer-events: none;
}
.media-toolbar > * { pointer-events: auto; }
.media-label {
  display: inline-flex;
  gap: 8px;
  align-items: center;
  padding: 10px 12px;
  border-radius: 999px;
  background: rgba(0,0,0,.32);
  border: 1px solid rgba(255,255,255,.1);
  color: rgba(255,255,255,.82);
  backdrop-filter: blur(12px);
  font-size: 12px;
}
.open-link {
  display: inline-flex;
  min-height: 40px;
  align-items: center;
  justify-content: center;
  padding: 9px 12px;
  border-radius: 999px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.12);
  color: white;
  font-size: 12px;
}
.player-video {
  width: min(100%, 980px);
  max-height: min(72vh, 600px);
  border-radius: 26px;
  border: 1px solid rgba(255,255,255,.14);
  background: #000;
  box-shadow: 0 30px 100px rgba(0,0,0,.44);
}
.desktop-emulator, .phone-emulator {
  position: relative;
  box-shadow: 0 30px 100px rgba(0,0,0,.48), 0 0 90px rgba(28,124,255,.20);
}
.phone-emulator[data-emulator="mobile-viewport"] {
  box-shadow: 0 26px 92px rgba(0,0,0,.42), 0 0 70px rgba(28,124,255,.16);
}
.desktop-emulator {
  width: min(100%, 1060px);
  height: min(74vh, 640px);
  min-height: 500px;
  border-radius: 28px;
  padding: 56px 14px 14px;
  background: rgba(3,5,14,.88);
  border: 1px solid rgba(255,255,255,.16);
}
.desktop-emulator::before {
  content: "";
  position: absolute;
  top: 16px;
  left: 16px;
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: rgba(255,255,255,.24);
  box-shadow: 18px 0 rgba(255,255,255,.18), 36px 0 rgba(255,255,255,.14);
}
.desktop-emulator::after {
  content: "live preview";
  position: absolute;
  left: 76px;
  right: 16px;
  top: 11px;
  height: 30px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  color: rgba(255,255,255,.52);
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  background: rgba(255,255,255,.055);
  border: 1px solid rgba(255,255,255,.08);
}
.desktop-emulator iframe, .phone-emulator iframe {
  width: 100%;
  height: 100%;
  border: 0;
  background: #fff;
}
.desktop-emulator iframe { border-radius: 20px; }
.phone-emulator {
  --preview-w: 320;
  --preview-h: 568;
  height: min(68dvh, 620px);
  max-height: calc(100dvh - 240px);
  aspect-ratio: var(--preview-w) / var(--preview-h);
  border-radius: 46px;
  padding: 14px 12px 12px;
  background: rgba(2,4,10,.94);
  border: 1px solid rgba(255,255,255,.18);
  overflow: hidden;
}
.phone-emulator::before {
  content: "";
  position: absolute;
  top: 18px;
  left: 50%;
  transform: translateX(-50%);
  width: 84px;
  height: 24px;
  border-radius: 999px;
  background: #02040a;
  z-index: 2;
}
.phone-emulator iframe { border-radius: 34px; overflow: hidden; }

/* Page Grabber is not shown in a fake iPhone shell: it is shown as a clean mobile viewport.
   This removes the black top wedges/notch and keeps the creative closer to the real 320×568 placement. */
.phone-emulator[data-emulator="mobile-viewport"] {
  height: min(60dvh, 540px);
  max-height: calc(100dvh - 270px);
  border-radius: 20px;
  padding: 0;
  background: #f5f7fb;
}
.phone-emulator[data-emulator="mobile-viewport"]::before { display: none; }
.phone-emulator[data-emulator="mobile-viewport"] iframe { border-radius: 18px; background: #f5f7fb; }

.toast {
  position: fixed;
  z-index: 100;
  left: 50%;
  bottom: 24px;
  transform: translateX(-50%) translateY(20px);
  opacity: 0;
  padding: 12px 14px;
  border-radius: 999px;
  background: rgba(0,0,0,.72);
  border: 1px solid rgba(255,255,255,.12);
  color: white;
  backdrop-filter: blur(16px);
  transition: .28s var(--ease);
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

@media (min-width: 1181px) and (max-height: 980px) {
  .app-shell { padding-top: 28px; }
  .hero-section { gap: 34px; margin-bottom: 16px; }
  .hero-section h1 { max-width: 760px; font-size: clamp(48px, 4.8vw, 72px); }
  .hero-section .hero-copy { margin-top: 14px; font-size: 17px; }
  .hero-panel { padding: 12px; gap: 7px; }
  .panel-row { padding: 10px 12px; }
  .toolbar-card { padding: 12px; }
}

@media (max-width: 1180px) {
  .gallery-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .toolbar-card { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dialog-body { grid-template-columns: 1fr; }
  .creative-sidebar { max-height: none; }
}
@media (max-width: 760px) {
  .topbar { top: 10px; width: calc(100% - 20px); padding: 9px 10px; }
  .top-actions .ghost-btn:not(.admin-link) { display: none; }
  .app-shell { width: calc(100% - 20px); padding-top: 40px; }
  .hero-section { grid-template-columns: 1fr; }
  h1 { font-size: clamp(44px, 14vw, 68px); }
  .toolbar-card { position: relative; top: auto; grid-template-columns: 1fr; border-radius: 24px; }
  .gallery-grid { grid-template-columns: 1fr; }
  .creative-card { min-height: 380px; }
  .card-button { grid-template-rows: 190px 1fr; }
  .dialog-head { display: grid; }
  .dialog-actions { justify-content: space-between; }
  .creative-dialog { width: calc(100vw - 12px); max-height: calc(100dvh - 12px); }
  .dialog-shell { border-radius: 24px; max-height: calc(100dvh - 12px); }
  .dialog-body { padding: 10px; min-height: 0; }
  .player-stage { min-height: 520px; padding: 12px; }
  .player-shell { min-height: 0; }
  .desktop-emulator { min-height: 420px; height: 58vh; padding-top: 50px; }
  .phone-emulator { height: 62dvh; max-height: calc(100dvh - 220px); }
  .phone-emulator[data-emulator="mobile-viewport"] { height: 58dvh; max-height: calc(100dvh - 240px); }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
}

/* Fixed-size preview renderer -------------------------------------------------
   The iframe always receives its natural viewport (for example 390×844 or
   1200×2600). The complete device is then scaled as one object. This prevents
   external pages from recalculating their responsive layout at the tiny visual
   width of the phone mockup. */
.player-shell--preview {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  min-height: 0;
}
.scaled-preview-host {
  position: absolute;
  inset: 54px 0 0;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
}
.preview-device {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) scale(var(--preview-scale, 1));
  transform-origin: center;
  width: var(--viewport-width);
  height: var(--viewport-height);
  box-sizing: content-box;
  background: #fff;
  border: 1px solid rgba(255,255,255,.18);
  box-shadow: 0 30px 100px rgba(0,0,0,.48), 0 0 90px rgba(28,124,255,.20);
  will-change: transform;
}
.preview-device-mask {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  transform-origin: center;
  min-width: 1px;
  min-height: 1px;
  overflow: visible;
}
.preview-device-mask > .preview-device {
  left: 0;
  top: 0;
  transform: scale(var(--preview-scale, 1));
  transform-origin: 0 0;
}


/* DESKTOP_CATS_LAYOUT_ZOOM_FIX_START
   Embedded desktop CATS Skins consist of several independently composited
   iframes. Scaling their common parent with transform makes Chromium repaint
   those surfaces on different frames while the publisher page scrolls. CSS
   zoom keeps the inner iframe viewport at its natural size (for example
   1440×900) but avoids the transformed ancestor used by the normal renderer. */
@supports (zoom: 1) {
  /* The base mask is centered with translate(-50%, -50%). That transform would
     still be an ancestor of the CATS iframes, so center the known-size mask with
     absolute inset + auto margins instead. */
  .preview-device-mask[data-scale-mode="layout-zoom"] {
    inset: 0;
    margin: auto;
    transform: none;
    transform-origin: initial;
  }
}
.preview-device-mask[data-scale-mode="layout-zoom"] > .preview-device {
  transform: none;
  zoom: var(--preview-zoom, 1);
  will-change: auto;
  backface-visibility: visible;
}

/* Backdrop blur creates another full-screen compositor pass around the modal.
   It is visually unnecessary while a multi-iframe desktop Skin is active. */
.creative-dialog.is-desktop-cats-preview::backdrop {
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
.creative-dialog.is-desktop-cats-preview .dialog-shell,
.creative-dialog.is-desktop-cats-preview .player-stage,
.creative-dialog.is-desktop-cats-preview .creative-sidebar {
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

/* Fallback for engines without CSS zoom. Chromium and Safari use the branch
   above; unsupported engines retain the previous transform behaviour. */
@supports not (zoom: 1) {
  .preview-device-mask[data-scale-mode="layout-zoom"] > .preview-device {
    transform: scale(var(--preview-zoom, 1));
    transform-origin: 0 0;
  }
}
/* DESKTOP_CATS_LAYOUT_ZOOM_FIX_END */

/* MOBILE_CATS_LAYOUT_ZOOM_FIX_START
   Mobile CATS previews use the same untransformed layout-zoom branch as
   Desktop CATS Skins. The phone mask keeps its final display-size clipping
   boundary while the inner device and iframe retain the manifest viewport. */
.creative-dialog.is-mobile-cats-preview::backdrop {
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
.creative-dialog.is-mobile-cats-preview .dialog-shell,
.creative-dialog.is-mobile-cats-preview .player-stage,
.creative-dialog.is-mobile-cats-preview .creative-sidebar {
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

/* Avoid keeping an unnecessary backface/compositor hint on the untransformed
   final-size mask. Clipping remains owned by overflow + clip-path. */
.preview-device-mask[data-scale-mode="layout-zoom"][data-emulator="phone"] {
  backface-visibility: visible;
  will-change: auto;
}
/* MOBILE_CATS_LAYOUT_ZOOM_FIX_END */

/* Chrome promotes nested cross-origin iframes to a compositor surface. When
   the same node is also transformed, border-radius + overflow can be skipped
   at the top corners. The mask itself is deliberately NOT scaled: JavaScript
   gives it the final display-size dimensions, so Chromium has a real paint
   boundary to clip against. */
.preview-device-mask[data-emulator="phone"] {
  overflow: hidden;
  isolation: isolate;
  contain: paint;
  border-radius: var(--preview-mask-radius, 42px);
  background: #02040a;
  clip-path: inset(0 round var(--preview-mask-radius, 42px));
  -webkit-clip-path: inset(0 round var(--preview-mask-radius, 42px));
  box-shadow: 0 24px 84px rgba(0,0,0,.48), 0 0 72px rgba(28,124,255,.18);
  backface-visibility: hidden;
}
.preview-device-mask[data-emulator="phone"] > .preview-device {
  box-shadow: none;
}
.preview-viewport {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #fff;
}
.preview-viewport iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  background: #fff;
}
.preview-device[data-emulator="phone"] {
  /* Keep the creative at its exact natural viewport and draw the phone bezel
     as an inset overlay. Padding used to make the shell wider than the test
     viewport, which produced the small top "ears" visible on both sides. */
  padding: 0;
  border: 0;
  border-radius: 42px;
  overflow: hidden;
  isolation: isolate;
  background: #02040a;
}
.preview-device[data-emulator="phone"]::before {
  content: "";
  position: absolute;
  z-index: 7;
  top: 12px;
  left: 50%;
  transform: translateX(-50%);
  width: 84px;
  height: 24px;
  border-radius: 999px;
  background: #02040a;
  pointer-events: none;
}
.preview-device[data-emulator="phone"]::after {
  content: "";
  position: absolute;
  z-index: 6;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  box-shadow:
    inset 0 0 0 10px #02040a,
    inset 0 0 0 11px rgba(255,255,255,.14);
}
.preview-device[data-emulator="phone"] .preview-viewport,
.preview-device[data-emulator="phone"] iframe { border-radius: inherit; }

/* CATS fullscreen creatives are rendered by a second iframe inside the CATS
   viewer. That iframe has rounded top corners of its own. The light publisher
   page behind those corners can otherwise show through as two silver tabs.
   Keep the underlay black and mask only the outside of the rounded corners. */
.preview-device[data-emulator="phone"][data-viewer="inlab-cats-viewer"] .preview-viewport,
.preview-device[data-emulator="phone"][data-viewer="inlab-cats-viewer"] .preview-viewport > iframe {
  background: #02040a;
}
.preview-device[data-emulator="phone"][data-viewer="inlab-cats-viewer"] .preview-viewport::before,
.preview-device[data-emulator="phone"][data-viewer="inlab-cats-viewer"] .preview-viewport::after {
  content: "";
  position: absolute;
  z-index: 8;
  top: 0;
  width: 46px;
  height: 46px;
  pointer-events: none;
}
.preview-device[data-emulator="phone"][data-viewer="inlab-cats-viewer"] .preview-viewport::before {
  left: 0;
  background: radial-gradient(circle at 46px 46px, transparent 0 42px, #02040a 43px);
}
.preview-device[data-emulator="phone"][data-viewer="inlab-cats-viewer"] .preview-viewport::after {
  right: 0;
  background: radial-gradient(circle at 0 46px, transparent 0 42px, #02040a 43px);
}
.preview-device[data-emulator="mobile-viewport"] {
  padding: 0;
  border-radius: 20px;
  background: #f5f7fb;
  box-shadow: 0 26px 92px rgba(0,0,0,.42), 0 0 70px rgba(28,124,255,.16);
}
.preview-device[data-emulator="mobile-viewport"] .preview-viewport,
.preview-device[data-emulator="mobile-viewport"] iframe { border-radius: 18px; }
.preview-device[data-emulator="desktop-browser"] {
  padding: 52px 14px 14px;
  border-radius: 28px;
  background: rgba(3,5,14,.94);
}
.preview-device[data-emulator="desktop-browser"]::before {
  content: "";
  position: absolute;
  top: 18px;
  left: 18px;
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: rgba(255,255,255,.25);
  box-shadow: 18px 0 rgba(255,255,255,.18), 36px 0 rgba(255,255,255,.14);
}
.preview-device[data-emulator="desktop-browser"]::after {
  content: "live preview";
  position: absolute;
  left: 76px;
  right: 16px;
  top: 12px;
  height: 28px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  color: rgba(255,255,255,.52);
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  background: rgba(255,255,255,.055);
  border: 1px solid rgba(255,255,255,.08);
}
.preview-device[data-emulator="desktop-browser"] .preview-viewport,
.preview-device[data-emulator="desktop-browser"] iframe { border-radius: 20px; }
.preview-device[data-emulator="tablet"] {
  padding: 16px;
  border-radius: 38px;
  background: rgba(2,4,10,.96);
}
.preview-device[data-emulator="tablet"] .preview-viewport,
.preview-device[data-emulator="tablet"] iframe { border-radius: 24px; }
.preview-device[data-emulator="none"] { border-radius: 12px; }

.preview-status {
  position: absolute;
  z-index: 8;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: min(86%, 380px);
  padding: 15px 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  border-radius: 17px;
  color: #f8fbff;
  background: rgba(5,9,20,.91);
  border: 1px solid rgba(255,255,255,.18);
  box-shadow: 0 20px 70px rgba(0,0,0,.36);
  backdrop-filter: blur(14px);
  transition: opacity .22s var(--ease), visibility .22s var(--ease), transform .22s var(--ease);
}
.preview-status.is-hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translate(-50%, -46%);
}
.preview-status.is-error {
  background: rgba(58,8,20,.94);
  border-color: rgba(255,105,133,.38);
}
.preview-spinner {
  width: 21px;
  height: 21px;
  flex: 0 0 auto;
  border-radius: 999px;
  border: 2px solid rgba(255,255,255,.22);
  border-top-color: var(--cyan);
  animation: preview-spin .8s linear infinite;
}
.preview-status.is-error .preview-spinner {
  animation: none;
  border-color: #ff6f8b;
}
.preview-status-copy { min-width: 0; display: grid; gap: 3px; }
.preview-status-copy strong { font-size: 13px; }
.preview-status-copy > span { color: rgba(255,255,255,.65); font-size: 11px; line-height: 1.4; }
.preview-fallback { margin-top: 5px; color: #8deaff; font-size: 11px; }
@keyframes preview-spin { to { transform: rotate(360deg); } }

@media (max-width: 760px) {
  .scaled-preview-host { inset: 52px 0 0; }
  .preview-status { width: min(90%, 340px); }
}

/* SKIN_EMBED_PHONE_VIEWPORT_FIX_START */
/* The manifest viewport is the SCREEN size, not the outside size of the phone.
   Give the bezel its own physical space instead of painting it over the CATS
   publisher iframe. The inner iframe therefore remains exactly 390x844 (or the
   configured material size), while the device shell becomes 20px wider/taller. */
.preview-device[data-emulator="phone"] {
  --phone-frame-size: 10px;
  --phone-screen-radius: 32px;
  width: calc(var(--viewport-width) + 20px);
  height: calc(var(--viewport-height) + 20px);
  box-sizing: border-box;
  padding: var(--phone-frame-size);
  border-radius: 42px;
  overflow: hidden;
  background: #02040a;
}
.preview-device[data-emulator="phone"] .preview-viewport {
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  border-radius: var(--phone-screen-radius);
  overflow: hidden;
  background: #fff;
}
.preview-device[data-emulator="phone"] .preview-viewport > iframe {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: var(--phone-screen-radius);
}
.preview-device[data-emulator="phone"]::after {
  inset: 0;
  border-radius: inherit;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.14),
    inset 0 0 0 var(--phone-frame-size) #02040a;
}
/* Recalculate the CATS corner underlay for the actual 32px screen radius. */
.preview-device[data-emulator="phone"][data-viewer="inlab-cats-viewer"] .preview-viewport::before,
.preview-device[data-emulator="phone"][data-viewer="inlab-cats-viewer"] .preview-viewport::after {
  width: 36px;
  height: 36px;
}
.preview-device[data-emulator="phone"][data-viewer="inlab-cats-viewer"] .preview-viewport::before {
  background: radial-gradient(circle at 36px 36px, transparent 0 31px, #02040a 32px);
}
.preview-device[data-emulator="phone"][data-viewer="inlab-cats-viewer"] .preview-viewport::after {
  background: radial-gradient(circle at 0 36px, transparent 0 31px, #02040a 32px);
}
/* SKIN_EMBED_PHONE_VIEWPORT_FIX_END */
/* ADMIN_DEEP_LINK_START */
.edit-creative-btn {
  width: 42px;
  height: 42px;
  flex: 0 0 auto;
  display: inline-grid;
  place-items: center;
  border-radius: 999px;
  border: 1px solid rgba(86,212,255,.2);
  background: linear-gradient(135deg, rgba(41,143,255,.18), rgba(38,222,255,.08));
  color: #dffaff;
  transition: .24s var(--ease);
}
.edit-creative-btn:hover {
  transform: translateY(-1px);
  border-color: rgba(86,212,255,.42);
  background: rgba(86,212,255,.14);
}
.edit-creative-btn svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
@media (max-width: 700px) {
  .edit-creative-btn { width: 40px; height: 40px; }
  .dialog-actions #copyCreativeLink { display: none; }
}
/* ADMIN_DEEP_LINK_END */

/* BRAND_ASSETS_UPDATE_START */
.brand {
  min-width: 0;
  gap: 12px;
}
.brand-logo {
  display: block;
  width: clamp(178px, 16vw, 228px);
  height: auto;
  flex: 0 0 auto;
  object-fit: contain;
  object-position: left center;
  filter: drop-shadow(0 0 24px rgba(77, 183, 255, .08));
}
.brand-context {
  flex: 0 0 auto;
  padding: 5px 8px;
  border: 1px solid rgba(255,255,255,.11);
  border-radius: 999px;
  color: rgba(255,255,255,.58);
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.admin-topbar .brand-logo {
  width: clamp(172px, 14vw, 214px);
}
@media (max-width: 900px) {
  .brand-logo,
  .admin-topbar .brand-logo { width: 168px; }
  .brand-context { display: none; }
}
@media (max-width: 560px) {
  .brand-logo,
  .admin-topbar .brand-logo { width: 142px; }
}
/* BRAND_ASSETS_UPDATE_END */

/* MOBILE_CATS_PHONE_SHELL_FIX_START
   A cross-origin CATS iframe can be promoted to its own compositor layer.
   Keep the physical bezel and Dynamic Island explicitly above that layer. */
.preview-device[data-emulator="phone"] .preview-viewport {
  position: relative;
  z-index: 1;
}
.preview-device[data-emulator="phone"]::before {
  z-index: 30;
}
.preview-device[data-emulator="phone"]::after {
  z-index: 29;
}
/* MOBILE_CATS_PHONE_SHELL_FIX_END */