/* =========================================================================
   GRAPHIC DESIGN STUDIO  (design-studio.js)
   Uses the app's theme variables so light/dark mode both work.
   ========================================================================= */
.dz-page { display: flex; flex-direction: column; gap: 20px; }

.dz-hero {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 24px;
  background: linear-gradient(135deg, var(--blue-50), var(--bg));
  border: 1px solid var(--border); border-radius: var(--radius); padding: 24px 26px;
}
.dz-hero-title { margin: 0 0 6px; font-size: 22px; font-weight: 800; color: var(--text); }
.dz-hero-sub { margin: 0; font-size: 14px; line-height: 1.55; color: var(--muted); max-width: 760px; }
.dz-hero-badge {
  flex: none; font-size: 11px; font-weight: 800; letter-spacing: 0.12em;
  color: #92400e; background: #fef3c7; border: 1px solid #fcd34d;
  border-radius: 999px; padding: 6px 12px;
}

/* sub navigation */
.dz-subnav { display: flex; gap: 10px; flex-wrap: wrap; }
.dz-subtab {
  display: flex; align-items: center; gap: 12px; flex: 1; min-width: 220px;
  padding: 12px 16px; background: var(--bg); border: 1px solid var(--border);
  border-radius: var(--radius); cursor: pointer; text-align: left;
  transition: border-color .15s, box-shadow .15s;
}
.dz-subtab:hover { border-color: var(--blue-400); }
.dz-subtab.is-active { border-color: var(--blue-500); box-shadow: 0 0 0 2px var(--blue-100) inset; }
.dz-subtab-icon { font-size: 22px; }
.dz-subtab-text { display: flex; flex-direction: column; }
.dz-subtab-text strong { font-size: 14px; color: var(--text); }
.dz-subtab-text small { font-size: 12px; color: var(--muted); }

/* ----- Ad Studio layout (Canva-style: big canvas left, properties right) ----- */
.dz-studio { display: grid; grid-template-columns: minmax(0, 1fr) 384px; gap: 18px; align-items: start; }
@media (max-width: 1080px) { .dz-studio { grid-template-columns: 1fr; } }

/* Canva-style editor: controls rail on the LEFT, big canvas on the right. */
.dz-canva { display: grid; grid-template-columns: 326px minmax(0, 1fr); gap: 18px; align-items: start; }
@media (max-width: 1080px) { .dz-canva { grid-template-columns: 1fr; } }
.dz-rail-head { padding: 2px 4px 8px; }
.dz-rail-head strong { display: block; font-size: 15px; font-weight: 800; color: var(--text); }
.dz-rail-head small { display: block; font-size: 12px; color: var(--muted); line-height: 1.45; margin-top: 2px; }
.dz-rail-back {
  display: flex; align-items: center; gap: 6px; width: 100%;
  font-size: 12.5px; font-weight: 700; cursor: pointer; text-align: left;
  padding: 9px 13px; border-radius: 10px; margin-bottom: 4px;
  background: var(--bg-subtle); border: 1px solid var(--border); color: var(--blue-600);
  transition: border-color .14s, transform .12s;
}
.dz-rail-back:hover { border-color: var(--blue-400); transform: translateX(-2px); }

/* colour pickers (text colour, shadow colour) */
.dz-colorrow { display: flex; align-items: center; gap: 9px; margin-bottom: 10px; }
.dz-color {
  flex: none; width: 48px; height: 34px; padding: 2px; cursor: pointer;
  border: 1px solid var(--border); border-radius: 9px; background: var(--bg-subtle);
}
.dz-color-lbl { font-size: 12px; font-weight: 700; color: var(--muted); }
.dz-color-reset { margin-left: auto; padding: 6px 11px; font-size: 11.5px; }

.dz-controls {
  display: flex; flex-direction: column; gap: 12px;
  position: sticky; top: 12px;
  max-height: calc(100vh - 150px); overflow: auto;
  padding: 2px;
}
.dz-group {
  background: linear-gradient(180deg, var(--bg), var(--bg-subtle));
  border: 1px solid var(--border);
  border-radius: 16px; padding: 15px 16px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55), 0 1px 2px rgba(15, 23, 42, 0.04);
}
.dz-group-head { display: flex; flex-direction: column; margin-bottom: 12px; }
.dz-group-head strong { font-size: 14px; color: var(--text); }
.dz-group-head small { font-size: 12px; color: var(--muted); }

.dz-field { display: flex; flex-direction: column; gap: 5px; margin-bottom: 10px; }
.dz-field span { font-size: 12px; font-weight: 600; color: var(--muted); }
.dz-input {
  width: 100%; padding: 9px 11px; font-size: 13px; color: var(--text);
  background: var(--bg-subtle); border: 1px solid var(--border); border-radius: 8px;
}
.dz-input:focus { outline: none; border-color: var(--blue-500); }

.dz-seasons { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.dz-season {
  font-size: 12px; padding: 5px 10px; border-radius: 999px; cursor: pointer;
  background: var(--bg-subtle); border: 1px solid var(--border); color: var(--muted);
}
.dz-season:hover { border-color: var(--blue-400); }
.dz-season.is-active { background: var(--blue-500); border-color: var(--blue-500); color: #fff; }

.dz-bg-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.dz-bg-thumb {
  padding: 0; border: 2px solid var(--border); border-radius: 10px; overflow: hidden;
  cursor: pointer; background: var(--bg); display: flex; flex-direction: column;
}
.dz-bg-thumb:hover { border-color: var(--blue-400); }
.dz-bg-thumb.is-active { border-color: var(--blue-500); box-shadow: 0 0 0 2px var(--blue-100); }
.dz-bg-thumb svg { width: 100%; height: auto; display: block; }
.dz-bg-thumb span { font-size: 11px; padding: 5px 6px; color: var(--text); font-weight: 600; }

.dz-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.dz-chip {
  font-size: 12px; padding: 6px 12px; border-radius: 8px; cursor: pointer;
  background: var(--bg-subtle); border: 1px solid var(--border); color: var(--text);
}
.dz-chip:hover { border-color: var(--blue-400); }
.dz-chip.is-active { background: var(--blue-500); border-color: var(--blue-500); color: #fff; }

.dz-uprow { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.dz-up-preview {
  width: 64px; height: 64px; object-fit: contain; border-radius: 8px;
  border: 1px solid var(--border); background: var(--bg-subtle); padding: 4px;
}
.dz-up-empty {
  width: 64px; height: 64px; border-radius: 8px; border: 1px dashed var(--border);
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; color: var(--muted); text-align: center;
}
.dz-up-btn { position: relative; overflow: hidden; }
.dz-check { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text); cursor: pointer; }

.dz-kp-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 10px; }
.dz-kp-row { display: flex; gap: 8px; align-items: center; }
.dz-kp-icon {
  padding: 8px; font-size: 12px; border-radius: 8px; border: 1px solid var(--border);
  background: var(--bg-subtle); color: var(--text);
}
.dz-kp-row .dz-input { flex: 1; }
.dz-kp-del {
  flex: none; width: 32px; height: 32px; border-radius: 8px; cursor: pointer;
  background: var(--bg-subtle); border: 1px solid var(--border); color: var(--danger);
}
.dz-kp-del:hover { background: var(--danger); color: #fff; }
.dz-gal-up {
  flex: none; width: 44px; height: 44px; border-radius: 8px; cursor: pointer;
  border: 1px solid var(--border); background: var(--bg-subtle);
  display: flex; align-items: center; justify-content: center; overflow: hidden;
  font-size: 20px; font-weight: 700; color: var(--blue-600);
}
.dz-gal-up:hover { border-color: var(--blue-500); }
.dz-gal-up img { width: 100%; height: 100%; object-fit: cover; display: block; }
.dz-add {
  font-size: 13px; padding: 7px 12px; border-radius: 8px; cursor: pointer;
  background: var(--bg-subtle); border: 1px dashed var(--border); color: var(--blue-600);
}
.dz-add:hover { border-color: var(--blue-500); }

/* ----- studio stage / preview ----- */
.dz-stage-wrap {
  position: sticky; top: 12px;
  display: flex; flex-direction: column; align-items: center; gap: 14px;
  padding: 34px 34px 26px;
  border-radius: 24px;
  background:
    radial-gradient(130% 100% at 50% -10%, rgba(99, 102, 241, 0.14), transparent 62%),
    linear-gradient(180deg, var(--bg-subtle), var(--bg));
  border: 1px solid var(--border);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55), 0 1px 2px rgba(15, 23, 42, 0.04);
  min-height: 460px;
}
.dz-stage {
  position: relative;
  width: 100%; max-width: 600px;
  border-radius: 18px; overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.55);
  background: #0b1437;
  box-shadow:
    0 2px 6px rgba(15, 23, 42, 0.2),
    0 26px 50px -16px rgba(15, 23, 42, 0.5),
    inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}
.dz-stage svg { width: 100%; height: auto; display: block; }
.dz-stage .dz-el { cursor: move; }
#dz-svg-host { display: block; }
.dz-stage-note {
  margin: 0; font-size: 12px; color: var(--muted); text-align: center;
  letter-spacing: 0.01em;
}

/* ----- Background library ----- */
.dz-lib { display: flex; flex-direction: column; gap: 24px; }
.dz-lib-intro { margin: 0; font-size: 13px; line-height: 1.55; color: var(--muted); }
.dz-lib-season-head {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 0 12px;
}
.dz-lib-season-title {
  margin: 0; font-size: 15px; font-weight: 800; color: var(--text);
  display: flex; align-items: center; gap: 8px;
}
.dz-lib-season-title span {
  font-size: 11px; font-weight: 700; color: var(--muted);
  background: var(--bg-subtle); border: 1px solid var(--border); border-radius: 999px; padding: 2px 9px;
}
.dz-lib-season-up { flex: none; padding: 7px 13px; font-size: 12.5px; }
.dz-lib-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; }
.dz-lib-card {
  position: relative;
  border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; background: var(--bg);
}
.dz-lib-card.is-custom { border-color: var(--blue-400); }
.dz-lib-tag {
  position: absolute; top: 8px; left: 8px; z-index: 1;
  font-size: 10px; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase;
  color: #fff; background: var(--blue-500); border-radius: 999px; padding: 3px 9px;
  box-shadow: 0 2px 6px rgba(15, 23, 42, 0.35);
}
.dz-lib-card svg { width: 100%; height: auto; display: block; }
.dz-lib-card-foot {
  display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 12px;
}
.dz-lib-card-foot span {
  flex: 1; min-width: 0; font-size: 13px; font-weight: 700; color: var(--text);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.dz-lib-card-foot .btn { flex: none; padding: 5px 10px; font-size: 12px; }
.dz-lib-name { cursor: text; }
.dz-lib-name:hover { text-decoration: underline dotted; text-underline-offset: 3px; }
.dz-lib-rename {
  flex: 1; min-width: 0; padding: 5px 8px; font-size: 12px; font-weight: 700;
}

/* ----- Uploads — media library ----- */
.dz-media-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(184px, 1fr)); gap: 14px;
}
.dz-media-card {
  position: relative; border: 1px solid var(--border); border-radius: 14px;
  overflow: hidden; background: var(--bg);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), 0 1px 3px rgba(15, 23, 42, 0.05);
}
.dz-media-thumb {
  aspect-ratio: 1 / 1;
  background-color: #ffffff;
  background-image:
    linear-gradient(45deg, #e2e8f0 25%, transparent 25%, transparent 75%, #e2e8f0 75%),
    linear-gradient(45deg, #e2e8f0 25%, transparent 25%, transparent 75%, #e2e8f0 75%);
  background-size: 22px 22px;
  background-position: 0 0, 11px 11px;
}
.dz-media-thumb img { width: 100%; height: 100%; object-fit: contain; display: block; }
.dz-media-tag {
  position: absolute; top: 8px; left: 8px; z-index: 1;
  font-size: 10px; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase;
  color: #fff; background: #16a34a; border-radius: 999px; padding: 3px 9px;
  box-shadow: 0 2px 6px rgba(15, 23, 42, 0.35);
}
.dz-media-foot { padding: 9px 11px 0; }
.dz-media-name {
  display: block; font-size: 12.5px; font-weight: 700; color: var(--text); cursor: text;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.dz-media-name:hover { text-decoration: underline dotted; text-underline-offset: 3px; }
.dz-media-actions { display: flex; gap: 6px; padding: 8px 11px 11px; }
.dz-media-actions .btn { flex: 1; padding: 6px 7px; font-size: 11.5px; }
.dz-media-bg { color: var(--blue-600) !important; }
.dz-media-bg:disabled { opacity: 0.6; cursor: progress; }
.dz-gal-lib { color: var(--blue-600) !important; }
.dz-gal-lib:hover { background: var(--blue-500) !important; color: #fff !important; }

/* media picker modal */
.dz-mp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.dz-mp-card {
  position: relative; padding: 0; cursor: pointer; text-align: left;
  border: 2px solid var(--border); border-radius: 12px; overflow: hidden; background: var(--bg);
  transition: border-color .14s, transform .12s, box-shadow .14s;
}
.dz-mp-card:hover {
  border-color: var(--blue-500); transform: translateY(-2px);
  box-shadow: 0 10px 22px -10px rgba(37, 99, 235, 0.5);
}
.dz-mp-name {
  display: block; font-size: 12px; font-weight: 700; color: var(--text);
  padding: 7px 9px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
html.theme-dark .dz-media-thumb {
  background-color: #0b1220;
  background-image:
    linear-gradient(45deg, #1e293b 25%, transparent 25%, transparent 75%, #1e293b 75%),
    linear-gradient(45deg, #1e293b 25%, transparent 25%, transparent 75%, #1e293b 75%);
}
.dz-season b { color: var(--blue-600); font-weight: 800; }
.dz-season.is-active b { color: #fff; }

/* ----- Client picks ----- */
.dz-picks { display: flex; flex-direction: column; gap: 16px; }
.dz-picks-stats { display: flex; gap: 12px; flex-wrap: wrap; }
.dz-stat {
  flex: 1; min-width: 140px; background: var(--bg); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 14px 18px;
}
.dz-stat-num { font-size: 26px; font-weight: 800; color: var(--text); }
.dz-stat-label { font-size: 12px; color: var(--muted); }

.dz-pick-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 14px; }
.dz-pick-card {
  background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 16px; display: flex; flex-direction: column; gap: 11px;
}
.dz-pick-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.dz-pick-head strong { font-size: 14px; color: var(--text); display: block; }
.dz-pick-head small { font-size: 12px; color: var(--muted); }
.dz-pick-count {
  flex: none; font-size: 11px; font-weight: 700; border-radius: 999px; padding: 3px 9px;
  background: var(--bg-subtle); border: 1px solid var(--border); color: var(--muted);
}
.dz-pick-count.is-on { background: #dcfce7; border-color: #86efac; color: #166534; }
.dz-pick-linkbox { display: flex; gap: 6px; }
.dz-pick-linkbox input {
  flex: 1; min-width: 0; padding: 7px 9px; font-size: 11px; color: var(--muted);
  background: var(--bg-subtle); border: 1px solid var(--border); border-radius: 8px;
}
.dz-pick-linkbox .btn { padding: 6px 12px; font-size: 12px; }
.dz-pick-thumbs { display: flex; flex-wrap: wrap; gap: 6px; }
.dz-pick-thumb {
  width: 56px; height: 56px; border-radius: 7px; overflow: hidden; border: 1px solid var(--border);
}
.dz-pick-thumb svg { width: 100%; height: 100%; display: block; }
.dz-pick-none { font-size: 12px; color: var(--muted); font-style: italic; }
.dz-pick-actions { display: flex; }
.dz-pick-actions .btn { flex: 1; font-size: 13px; }
.dz-empty { padding: 40px; text-align: center; color: var(--muted); font-size: 14px; }

/* ----- client picker modal ----- */
.dz-modal {
  position: fixed; inset: 0; z-index: 9000; display: none;
  background: rgba(8, 12, 24, 0.62); padding: 28px; overflow: auto;
}
.dz-modal.is-open { display: flex; align-items: flex-start; justify-content: center; }
.dz-modal-box {
  width: 100%; max-width: 920px; background: var(--bg); border: 1px solid var(--border);
  border-radius: 16px; box-shadow: 0 24px 70px rgba(0,0,0,0.5); display: flex; flex-direction: column;
}
.dz-modal-head {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 16px;
  padding: 22px 24px 16px; border-bottom: 1px solid var(--border);
}
.dz-modal-eyebrow {
  font-size: 10px; font-weight: 800; letter-spacing: 0.12em; color: var(--blue-600); margin-bottom: 5px;
}
.dz-modal-head h3 { margin: 0 0 4px; font-size: 19px; color: var(--text); }
.dz-modal-head p { margin: 0; font-size: 13px; color: var(--muted); }
.dz-modal-x {
  flex: none; width: 34px; height: 34px; border-radius: 8px; cursor: pointer; font-size: 15px;
  background: var(--bg-subtle); border: 1px solid var(--border); color: var(--text);
}
.dz-modal-body { padding: 18px 24px; max-height: 62vh; overflow: auto; display: flex; flex-direction: column; gap: 20px; }
.dz-modal-season h4 { margin: 0 0 10px; font-size: 14px; color: var(--text); }
.dz-modal-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; }
.dz-modal-card {
  position: relative; padding: 0; border: 2px solid var(--border); border-radius: 10px;
  overflow: hidden; cursor: pointer; background: var(--bg);
}
.dz-modal-card:hover { border-color: var(--blue-400); }
.dz-modal-card.is-on { border-color: #ec4899; box-shadow: 0 0 0 2px rgba(236,72,153,0.25); }
.dz-modal-card svg { width: 100%; height: auto; display: block; }
.dz-modal-heart {
  position: absolute; top: 7px; right: 7px; width: 30px; height: 30px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; font-size: 17px;
  background: rgba(255,255,255,0.92); color: #ec4899;
}
.dz-modal-name {
  display: block; font-size: 12px; font-weight: 700; padding: 6px 8px; color: var(--text);
}
.dz-modal-foot {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 16px 24px; border-top: 1px solid var(--border);
}
.dz-modal-foot span { font-size: 13px; font-weight: 600; color: var(--muted); }
.dz-modal-foot > div { display: flex; gap: 10px; }

/* dark-mode touch-ups for hard-coded light colors */
html.theme-dark .dz-hero-badge { background: #422006; border-color: #854d0e; color: #fcd34d; }
html.theme-dark .dz-pick-count.is-on { background: #14331f; border-color: #166534; color: #86efac; }

/* =========================================================================
   v2 — client-aware studio: search, workspace, live ads, editor, drag
   ========================================================================= */

/* local-mode notice */
.dz-notice {
  font-size: 12.5px; line-height: 1.5; color: #92400e;
  background: #fef3c7; border: 1px solid #fcd34d; border-radius: var(--radius);
  padding: 10px 14px;
}
.dz-notice code {
  background: rgba(0,0,0,0.08); border-radius: 4px; padding: 1px 5px; font-size: 11.5px;
}
html.theme-dark .dz-notice { background: #422006; border-color: #854d0e; color: #fde68a; }

/* ----- client search ----- */
.dz-search-wrap { display: flex; flex-direction: column; gap: 16px; }
.dz-search-head h3 { margin: 0 0 4px; font-size: 17px; color: var(--text); }
.dz-search-head p { margin: 0; font-size: 13px; color: var(--muted); max-width: 720px; line-height: 1.55; }
.dz-search-input {
  width: 100%; padding: 12px 14px; font-size: 14px; color: var(--text);
  background: var(--bg-subtle); border: 1px solid var(--border); border-radius: 10px;
}
.dz-search-input:focus { outline: none; border-color: var(--blue-500); }
.dz-client-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 10px; }
.dz-client-card {
  display: flex; align-items: center; gap: 12px; text-align: left; cursor: pointer;
  padding: 12px 14px; background: var(--bg); border: 1px solid var(--border); border-radius: 12px;
  transition: border-color .15s, box-shadow .15s;
}
.dz-client-card:hover { border-color: var(--blue-400); box-shadow: var(--shadow); }
.dz-client-avatar {
  position: relative; overflow: hidden;
  flex: none; width: 42px; height: 42px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 14px; font-weight: 800; color: #fff;
  background: linear-gradient(135deg, var(--blue-500), #7c3aed);
}
.dz-client-logo {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; border-radius: 50%; background: #fff;
}
.dz-client-meta { display: flex; flex-direction: column; min-width: 0; }
.dz-client-meta strong { font-size: 14px; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dz-client-meta small { font-size: 12px; color: var(--muted); }

/* ----- workspace ----- */
.dz-ws { display: flex; flex-direction: column; gap: 18px; }
.dz-ws-head { display: flex; align-items: center; gap: 14px; }
.dz-back {
  flex: none; font-size: 13px; font-weight: 600; cursor: pointer;
  padding: 8px 14px; border-radius: 8px; color: var(--text);
  background: var(--bg-subtle); border: 1px solid var(--border);
}
.dz-back:hover { border-color: var(--blue-400); }
.dz-ws-title h3 { margin: 0; font-size: 18px; color: var(--text); }
.dz-ws-title small { font-size: 12px; color: var(--muted); }
.dz-ws-section {
  background: var(--bg); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 16px 18px;
}
.dz-ws-sec-head { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.dz-ws-sec-head strong { font-size: 14px; color: var(--text); }
.dz-ws-sec-head small { font-size: 12px; color: var(--muted); }
.dz-ws-sec-head .btn { margin-left: auto; padding: 6px 14px; font-size: 13px; }

/* live ads (view only) */
.dz-loading { padding: 26px; text-align: center; color: var(--muted); font-size: 13px; }
.dz-live-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
.dz-live-card {
  border: 1px solid var(--border); border-radius: 12px; overflow: hidden; background: var(--bg-subtle);
}
.dz-live-img { aspect-ratio: 1 / 1; background: #0b1437; }
.dz-live-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.dz-live-img-empty {
  display: flex; align-items: center; justify-content: center;
  color: #94a3b8; font-size: 12px;
}
.dz-live-body { padding: 10px 12px; display: flex; flex-direction: column; gap: 6px; }
.dz-live-body strong { font-size: 13px; color: var(--text); }
.dz-live-headline { margin: 0; font-size: 12px; color: var(--muted); line-height: 1.45; }
.dz-live-stats { display: flex; flex-wrap: wrap; gap: 6px; }
.dz-live-stats span {
  font-size: 11px; font-weight: 700; color: var(--muted);
  background: var(--bg); border: 1px solid var(--border); border-radius: 999px; padding: 2px 9px;
}
.dz-live-cta { color: var(--blue-600) !important; border-color: var(--blue-400) !important; }

/* saved studio ads */
.dz-saved-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; }
.dz-saved-card {
  border: 1px solid var(--border); border-radius: 12px; overflow: hidden; background: var(--bg);
}
.dz-saved-thumb { background: #0b1437; }
.dz-saved-thumb svg { width: 100%; height: auto; display: block; }
.dz-saved-foot { padding: 10px 12px; display: flex; flex-direction: column; gap: 8px; }
.dz-saved-foot strong { font-size: 13px; color: var(--text); }
.dz-saved-actions { display: flex; gap: 6px; }
.dz-saved-actions .btn { flex: 1; padding: 6px 8px; font-size: 12px; }

/* ----- editor ----- */
.dz-editor { display: flex; flex-direction: column; gap: 16px; }
.dz-editor-bar {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px; border-radius: 16px;
  background: linear-gradient(180deg, var(--bg), var(--bg-subtle));
  border: 1px solid var(--border);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6), 0 1px 2px rgba(15, 23, 42, 0.05);
}
.dz-editor-bar .dz-back {
  width: 38px; height: 38px; padding: 0; font-size: 17px; border-radius: 11px;
  display: flex; align-items: center; justify-content: center;
}
.dz-editor-bar .btn { flex: none; }
.dz-ad-name {
  flex: 1; min-width: 0; padding: 10px 13px; font-size: 14px; font-weight: 700; color: var(--text);
  background: var(--bg-subtle); border: 1px solid var(--border); border-radius: 11px;
}
.dz-ad-name:focus { outline: none; border-color: var(--blue-500); box-shadow: 0 0 0 3px var(--blue-100); }
.dz-savestate {
  flex: none; font-size: 12px; font-weight: 600; color: var(--muted);
  padding: 6px 11px; border-radius: 999px; background: var(--bg-subtle); border: 1px solid var(--border);
}
.dz-savestate.is-saving { color: var(--blue-600); }
.dz-savestate.is-error { color: var(--danger); border-color: var(--danger); }

/* selection chrome over the canvas */
.dz-sel {
  position: absolute; display: none; pointer-events: none; z-index: 5;
  border: 2px dashed #ec4899; border-radius: 4px;
  box-shadow: 0 0 0 1px rgba(255,255,255,0.6);
}
.dz-eltools {
  position: absolute; display: none; z-index: 6; gap: 3px; align-items: center;
  padding: 3px 4px; border-radius: 8px;
  background: #1f2937; box-shadow: 0 6px 18px rgba(0,0,0,0.45);
}
.dz-eltools-name {
  font-size: 11px; font-weight: 700; color: #fff; padding: 0 6px; white-space: nowrap;
}
.dz-eltools button {
  width: 24px; height: 24px; border-radius: 6px; cursor: pointer;
  font-size: 13px; font-weight: 700; color: #1f2937;
  background: #fff; border: none;
}
.dz-eltools button:hover { background: #fde047; }

/* ----- background library upload ----- */
.dz-lib-upload {
  display: flex; align-items: center; justify-content: space-between; gap: 18px;
  background: linear-gradient(135deg, var(--blue-50), var(--bg));
  border: 1px solid var(--border); border-radius: var(--radius); padding: 16px 20px;
}
.dz-lib-upload strong { font-size: 14px; color: var(--text); }
.dz-lib-upload p { margin: 4px 0 0; font-size: 12.5px; color: var(--muted); max-width: 520px; }
.dz-lib-upload.is-busy { opacity: 0.55; pointer-events: none; }
.dz-lib-upload .btn { flex: none; }

/* =========================================================================
   v3 — glossy / crystal polish
   ========================================================================= */

/* hero */
.dz-hero {
  background:
    radial-gradient(120% 140% at 0% 0%, rgba(99, 102, 241, 0.16), transparent 55%),
    linear-gradient(135deg, var(--blue-50), var(--bg));
  border-radius: 20px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6), 0 1px 2px rgba(15, 23, 42, 0.05);
}

/* sub-navigation tabs */
.dz-subtab {
  border-radius: 15px;
  background: linear-gradient(180deg, var(--bg), var(--bg-subtle));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55), 0 1px 2px rgba(15, 23, 42, 0.04);
  transition: border-color .15s, box-shadow .15s, transform .12s;
}
.dz-subtab:hover { transform: translateY(-1px); }
.dz-subtab.is-active {
  background: linear-gradient(180deg, var(--blue-50), var(--bg));
  box-shadow: 0 0 0 2px var(--blue-100) inset, 0 6px 16px -8px rgba(37, 99, 235, 0.5);
}

/* glossy cards across the studio */
.dz-ws-section, .dz-stat, .dz-pick-card, .dz-saved-card,
.dz-live-card, .dz-client-card, .dz-lib-card {
  border-radius: 16px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), 0 1px 3px rgba(15, 23, 42, 0.05);
}
.dz-client-card:hover, .dz-saved-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 26px -12px rgba(15, 23, 42, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.5);
}
.dz-saved-card, .dz-client-card, .dz-live-card { transition: transform .14s, box-shadow .14s; }

/* inputs */
.dz-input, .dz-search-input, .dz-kp-icon {
  border-radius: 10px;
  transition: border-color .14s, box-shadow .14s;
}
.dz-input:focus, .dz-search-input:focus {
  box-shadow: 0 0 0 3px var(--blue-100);
}

/* chips, season + bg pills */
.dz-chip, .dz-season {
  border-radius: 999px;
  transition: border-color .14s, background .14s, transform .12s, box-shadow .14s;
}
.dz-chip:hover, .dz-season:hover { transform: translateY(-1px); }
.dz-chip.is-active, .dz-season.is-active {
  box-shadow: 0 6px 14px -6px rgba(37, 99, 235, 0.6);
}
.dz-bg-thumb {
  border-radius: 13px;
  transition: border-color .14s, box-shadow .14s, transform .12s;
}
.dz-bg-thumb:hover { transform: translateY(-2px); }
.dz-bg-thumb.is-active {
  box-shadow: 0 0 0 3px var(--blue-100), 0 8px 20px -10px rgba(37, 99, 235, 0.55);
}

/* primary / ghost buttons inside the studio */
.dz-page .btn-primary {
  background: linear-gradient(180deg, var(--blue-500), var(--blue-600));
  border: 1px solid var(--blue-600); color: #fff;
  box-shadow: 0 2px 6px -1px rgba(37, 99, 235, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.32);
  transition: filter .14s, transform .12s, box-shadow .14s;
}
.dz-page .btn-primary:hover { filter: brightness(1.07); transform: translateY(-1px); }
.dz-page .btn-primary:active { transform: translateY(0); }
.dz-page .btn-ghost {
  background: linear-gradient(180deg, var(--bg), var(--bg-subtle));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5);
  transition: border-color .14s, transform .12s;
}
.dz-page .btn-ghost:hover { transform: translateY(-1px); }

/* element toolbar — frosted glass */
.dz-eltools {
  border-radius: 11px;
  background: rgba(17, 24, 39, 0.92);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  box-shadow: 0 10px 26px -8px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.12);
}
.dz-eltools button {
  background: linear-gradient(180deg, #ffffff, #e9eef5);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8);
}

/* selection box — soft glow */
.dz-sel {
  border-radius: 6px;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.65), 0 0 16px rgba(236, 72, 153, 0.45);
}

/* notice + upload card gloss */
.dz-notice, .dz-lib-upload {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), 0 1px 2px rgba(15, 23, 42, 0.04);
}

/* dark-mode: tone down the glossy white highlights */
html.theme-dark .dz-hero,
html.theme-dark .dz-subtab,
html.theme-dark .dz-group,
html.theme-dark .dz-editor-bar,
html.theme-dark .dz-stage-wrap,
html.theme-dark .dz-ws-section,
html.theme-dark .dz-stat,
html.theme-dark .dz-pick-card,
html.theme-dark .dz-saved-card,
html.theme-dark .dz-live-card,
html.theme-dark .dz-client-card,
html.theme-dark .dz-lib-card,
html.theme-dark .dz-notice,
html.theme-dark .dz-lib-upload {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 1px 3px rgba(0, 0, 0, 0.35);
}
html.theme-dark .dz-stage { border-color: rgba(255, 255, 255, 0.12); }
html.theme-dark .dz-page .btn-ghost { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05); }

/* =========================================================================
   v4 — workspace: big centered Studio ads + collapsible right rail
   ========================================================================= */
.dz-ws-grid {
  display: grid; grid-template-columns: minmax(0, 1fr) 366px;
  gap: 18px; align-items: start;
}
@media (max-width: 1080px) { .dz-ws-grid { grid-template-columns: 1fr; } }

.dz-ws-main { min-width: 0; }
/* Studio ads is the main event — bigger cards */
.dz-ws-main .dz-saved-grid {
  grid-template-columns: repeat(auto-fill, minmax(252px, 1fr));
  gap: 16px;
}

.dz-ws-side {
  position: sticky; top: 12px;
  display: flex; flex-direction: column; gap: 12px;
}

/* collapsible panels */
.dz-panel {
  background: linear-gradient(180deg, var(--bg), var(--bg-subtle));
  border: 1px solid var(--border); border-radius: 16px; overflow: hidden;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), 0 1px 3px rgba(15, 23, 42, 0.05);
}
.dz-panel > summary {
  list-style: none; cursor: pointer; user-select: none;
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 13px 15px;
}
.dz-panel > summary::-webkit-details-marker { display: none; }
.dz-panel > summary:hover { background: var(--bg-subtle); }
.dz-panel-title { font-size: 13.5px; font-weight: 800; color: var(--text); }
.dz-panel-caret { font-size: 11px; color: var(--muted); transition: transform .18s ease; }
.dz-panel[open] .dz-panel-caret { transform: rotate(180deg); }
.dz-panel-body {
  padding: 4px 15px 16px; display: flex; flex-direction: column; gap: 11px;
}
.dz-panel-note { margin: 0; font-size: 11.5px; color: var(--muted); line-height: 1.5; }
.dz-panel-wide { width: 100%; }

/* live ads inside the narrow rail — 2-up, compact */
.dz-ws-side .dz-live-grid { grid-template-columns: 1fr 1fr; gap: 9px; }
.dz-ws-side .dz-live-body { padding: 8px 9px; gap: 4px; }
.dz-ws-side .dz-live-body strong { font-size: 12px; }
.dz-ws-side .dz-live-headline {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.dz-ws-side .dz-live-stats span { padding: 2px 7px; }

html.theme-dark .dz-panel {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 1px 3px rgba(0, 0, 0, 0.35);
}

/* =========================================================================
   v5 — always-on editor: ad strip, inline text editing, richer controls
   ========================================================================= */
.dz-ed-loading { font-size: 13px; color: var(--muted); padding: 4px 6px; }

/* ----- studio-ads strip ----- */
.dz-adstrip {
  background: linear-gradient(180deg, var(--bg), var(--bg-subtle));
  border: 1px solid var(--border); border-radius: 16px; padding: 12px 14px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), 0 1px 3px rgba(15, 23, 42, 0.05);
}
.dz-adstrip-head { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.dz-adstrip-head strong { font-size: 13.5px; color: var(--text); }
.dz-adstrip-head small { font-size: 12px; color: var(--muted); }
.dz-adstrip-tools { margin-left: auto; display: flex; gap: 6px; }
.dz-adstrip-tools .btn { padding: 6px 11px; font-size: 12px; }
.dz-adstrip-rail {
  display: flex; gap: 10px; overflow-x: auto; padding: 4px 2px 6px;
}
.dz-adtile {
  position: relative; flex: none; width: 116px; cursor: pointer;
  display: flex; flex-direction: column; gap: 5px; padding: 0;
  background: transparent; border: none; text-align: center;
}
.dz-adtile-thumb {
  border-radius: 11px; overflow: hidden; background: #0b1437;
  border: 2px solid var(--border); transition: border-color .14s, box-shadow .14s, transform .12s;
}
.dz-adtile-thumb svg { width: 100%; height: auto; display: block; }
.dz-adtile:hover .dz-adtile-thumb { transform: translateY(-2px); border-color: var(--blue-400); }
.dz-adtile.is-active .dz-adtile-thumb {
  border-color: var(--blue-500);
  box-shadow: 0 0 0 3px var(--blue-100), 0 8px 18px -8px rgba(37, 99, 235, 0.6);
}
.dz-adtile-name {
  font-size: 11.5px; font-weight: 600; color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.dz-adtile.is-active .dz-adtile-name { color: var(--blue-600); font-weight: 800; }
.dz-adtile-del {
  position: absolute; top: -7px; right: -7px; width: 22px; height: 22px;
  border-radius: 50%; cursor: pointer; font-size: 11px; line-height: 1;
  background: #ef4444; color: #fff; border: 2px solid var(--bg);
  display: none;
}
.dz-adtile:hover .dz-adtile-del { display: block; }
.dz-adtile-del:hover { background: #dc2626; }
.dz-adtile-new {
  align-items: center; justify-content: center;
  border: 2px dashed var(--border); border-radius: 11px; min-height: 116px;
  color: var(--blue-600); background: var(--bg-subtle);
}
.dz-adtile-new:hover { border-color: var(--blue-500); }
.dz-adtile-plus { font-size: 26px; font-weight: 700; line-height: 1; }

/* ----- panels stacked below the canvas ----- */
.dz-ed-panels {
  width: 100%; max-width: 600px;
  display: flex; flex-direction: column; gap: 10px;
}

/* ----- inline canvas text editor — sits exactly over the text ----- */
.dz-inline { position: absolute; display: none; z-index: 8; }
.dz-inline input {
  width: 100%; height: 100%; box-sizing: border-box;
  margin: 0; padding: 0 7px;
  text-align: center; font-weight: 900; line-height: 1;
  color: #0f172a; background: #ffffff;
  border: 2px solid #6366f1; border-radius: 7px; outline: none;
  box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.30), 0 12px 28px rgba(0, 0, 0, 0.4);
}

/* ----- richer controls ----- */
.dz-sublabel {
  font-size: 10.5px; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase;
  color: var(--muted); margin: 12px 0 7px;
}
.dz-fontsel { cursor: pointer; }
.dz-eltools button[data-elt="edit"] { color: var(--blue-600); }

html.theme-dark .dz-adstrip {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 1px 3px rgba(0, 0, 0, 0.35);
}

/* =========================================================================
   GLOSSY / CRYSTAL POLISH  — overrides on top of the base styles to give
   the studio a frosted-glass, soft-glow look (cyan/indigo accent). Layout
   and JS hooks are untouched; only chrome (gradients, shine, glow,
   transitions) is swapped in.
   ========================================================================= */

/* shared accent vars on the studio root so we can tweak in one place */
.dz-page {
  --dz-shine: rgba(255, 255, 255, 0.95);
  --dz-glow-indigo: rgba(99, 102, 241, 0.45);
  --dz-glow-cyan: rgba(56, 189, 248, 0.55);
  --dz-glow-soft: rgba(99, 102, 241, 0.22);
  --dz-glass: linear-gradient(180deg, rgba(255,255,255,0.88), rgba(255,255,255,0.55));
  --dz-glass-edge: rgba(255, 255, 255, 0.7);
}
html.theme-dark .dz-page {
  --dz-shine: rgba(255, 255, 255, 0.12);
  --dz-glass: linear-gradient(180deg, rgba(255,255,255,0.07), rgba(255,255,255,0.02));
  --dz-glass-edge: rgba(255, 255, 255, 0.08);
}

/* ----- crystal panels: every dz-group + the stage + ad strip ----- */
.dz-group {
  background:
    radial-gradient(120% 80% at 50% -20%, rgba(99,102,241,0.10), transparent 65%),
    var(--dz-glass);
  border: 1px solid var(--dz-glass-edge);
  border-radius: 18px;
  box-shadow:
    inset 0 1px 0 var(--dz-shine),
    inset 0 0 0 1px rgba(255,255,255,0.35),
    0 1px 2px rgba(15,23,42,0.05),
    0 14px 36px -22px var(--dz-glow-soft);
  backdrop-filter: blur(14px) saturate(125%);
  -webkit-backdrop-filter: blur(14px) saturate(125%);
}
html.theme-dark .dz-group {
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.08),
    inset 0 0 0 1px rgba(255,255,255,0.04),
    0 1px 2px rgba(0,0,0,0.3),
    0 16px 38px -18px rgba(99,102,241,0.45);
}

/* ----- ad strip at the top — frosted card ----- */
.dz-adstrip {
  background:
    radial-gradient(140% 80% at 50% -20%, rgba(99,102,241,0.14), transparent 65%),
    var(--dz-glass);
  border: 1px solid var(--dz-glass-edge);
  border-radius: 18px;
  box-shadow:
    inset 0 1px 0 var(--dz-shine),
    0 1px 3px rgba(15,23,42,0.06),
    0 18px 40px -20px var(--dz-glow-soft);
  backdrop-filter: blur(14px) saturate(125%);
  -webkit-backdrop-filter: blur(14px) saturate(125%);
}

/* ----- ad tiles: crystal hover lift + cyan active glow ----- */
.dz-adtile-thumb {
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.55);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.35),
    0 1px 3px rgba(15,23,42,0.08),
    0 10px 24px -12px rgba(99,102,241,0.35);
  transition: transform .22s cubic-bezier(.2,.8,.2,1),
              box-shadow .22s ease,
              border-color .22s ease;
}
.dz-adtile:hover .dz-adtile-thumb {
  transform: translateY(-3px) scale(1.015);
  border-color: rgba(99,102,241,0.7);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.4),
    0 18px 36px -14px var(--dz-glow-indigo);
}
.dz-adtile.is-active .dz-adtile-thumb {
  border-color: rgba(56,189,248,0.9);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.4),
    0 0 0 3px rgba(56,189,248,0.22),
    0 22px 40px -14px var(--dz-glow-cyan);
}
.dz-adtile-new {
  background: var(--dz-glass);
  border: 2px dashed rgba(99,102,241,0.42);
  border-radius: 14px;
  color: var(--blue-600);
  box-shadow: inset 0 1px 0 var(--dz-shine);
  transition: transform .2s cubic-bezier(.2,.8,.2,1),
              border-color .2s ease, box-shadow .2s ease;
}
.dz-adtile-new:hover {
  transform: translateY(-2px);
  border-color: rgba(99,102,241,0.85);
  box-shadow:
    inset 0 1px 0 var(--dz-shine),
    0 16px 32px -14px var(--dz-glow-indigo);
}
.dz-adtile-plus {
  background: linear-gradient(180deg, #6366f1, #2563eb);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ----- background swatches: glass tiles with subtle hover zoom ----- */
.dz-bg-grid { gap: 12px; }
.dz-bg-thumb {
  border-radius: 14px;
  border: 1px solid var(--dz-glass-edge);
  background: var(--dz-glass);
  box-shadow:
    inset 0 1px 0 var(--dz-shine),
    0 1px 3px rgba(15,23,42,0.06),
    0 10px 22px -14px var(--dz-glow-soft);
  overflow: hidden;
  transition: transform .22s cubic-bezier(.2,.8,.2,1),
              box-shadow .22s ease,
              border-color .22s ease;
}
.dz-bg-thumb svg {
  transition: transform .4s cubic-bezier(.2,.8,.2,1);
}
.dz-bg-thumb:hover {
  transform: translateY(-3px);
  border-color: rgba(99,102,241,0.65);
  box-shadow:
    inset 0 1px 0 var(--dz-shine),
    0 18px 36px -14px var(--dz-glow-indigo);
}
.dz-bg-thumb:hover svg { transform: scale(1.06); }
.dz-bg-thumb.is-active {
  border-color: rgba(56,189,248,0.95);
  box-shadow:
    inset 0 1px 0 var(--dz-shine),
    0 0 0 3px rgba(56,189,248,0.25),
    0 22px 40px -14px var(--dz-glow-cyan);
}
.dz-bg-thumb span {
  padding: 7px 8px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.01em;
  background: linear-gradient(180deg, transparent, rgba(255,255,255,0.55));
}
html.theme-dark .dz-bg-thumb span {
  background: linear-gradient(180deg, transparent, rgba(0,0,0,0.35));
}

/* ----- "Background finish" chips → glossy gel pills ----- */
.dz-chip {
  padding: 7px 14px;
  border-radius: 999px;
  font-weight: 600;
  background: var(--dz-glass);
  border: 1px solid var(--dz-glass-edge);
  color: var(--text);
  box-shadow:
    inset 0 1px 0 var(--dz-shine),
    0 1px 2px rgba(15,23,42,0.05);
  transition: transform .14s ease,
              box-shadow .18s ease,
              border-color .18s ease,
              color .18s ease;
}
.dz-chip:hover {
  transform: translateY(-1px);
  border-color: rgba(99,102,241,0.55);
  box-shadow:
    inset 0 1px 0 var(--dz-shine),
    0 8px 18px -8px var(--dz-glow-indigo);
}
.dz-chip.is-active {
  background: linear-gradient(180deg, #60a5fa, #2563eb);
  border-color: rgba(255,255,255,0.55);
  color: #fff;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.5),
    0 10px 24px -10px rgba(37,99,235,0.7),
    0 0 0 1px rgba(37,99,235,0.4);
}

/* ----- season pills (same gel treatment) ----- */
.dz-season {
  background: var(--dz-glass);
  border: 1px solid var(--dz-glass-edge);
  box-shadow: inset 0 1px 0 var(--dz-shine);
  transition: transform .14s ease,
              box-shadow .18s ease,
              border-color .18s ease,
              color .18s ease;
}
.dz-season:hover {
  transform: translateY(-1px);
  border-color: rgba(99,102,241,0.55);
  box-shadow:
    inset 0 1px 0 var(--dz-shine),
    0 8px 16px -8px var(--dz-glow-indigo);
}
.dz-season.is-active {
  background: linear-gradient(180deg, #60a5fa, #2563eb);
  border-color: rgba(255,255,255,0.55);
  color: #fff;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.5),
    0 10px 22px -10px rgba(37,99,235,0.7);
}

/* ----- "Add to your ad" — upload preview/empty boxes + check row ----- */
.dz-up-preview, .dz-up-empty {
  border-radius: 12px;
  background: var(--dz-glass);
  border: 1px solid var(--dz-glass-edge);
  box-shadow:
    inset 0 1px 0 var(--dz-shine),
    0 1px 3px rgba(15,23,42,0.05),
    0 8px 20px -14px var(--dz-glow-soft);
}
.dz-up-empty {
  border-style: dashed;
  border-color: rgba(99,102,241,0.4);
  color: var(--muted);
  font-weight: 600;
}
.dz-up-btn { border-radius: 10px; }
.dz-check {
  padding: 8px 10px;
  border-radius: 10px;
  background: var(--dz-glass);
  border: 1px solid var(--dz-glass-edge);
  box-shadow: inset 0 1px 0 var(--dz-shine);
  transition: border-color .14s ease, box-shadow .18s ease;
}
.dz-check:hover {
  border-color: rgba(99,102,241,0.5);
  box-shadow:
    inset 0 1px 0 var(--dz-shine),
    0 6px 14px -8px var(--dz-glow-indigo);
}

/* ----- text inputs: glassy fields, focus glow ----- */
.dz-input, .dz-search-input {
  background: var(--dz-glass);
  border: 1px solid var(--dz-glass-edge);
  box-shadow:
    inset 0 1px 0 var(--dz-shine),
    inset 0 -1px 0 rgba(15,23,42,0.04);
  transition: border-color .14s ease, box-shadow .18s ease;
}
.dz-input:focus, .dz-search-input:focus {
  border-color: rgba(99,102,241,0.75);
  box-shadow:
    inset 0 1px 0 var(--dz-shine),
    0 0 0 3px rgba(99,102,241,0.2);
}

/* ----- stage container: crystal cradle around the 1080×1080 canvas ----- */
.dz-stage-wrap {
  background:
    radial-gradient(140% 100% at 50% -10%, rgba(99,102,241,0.20), transparent 60%),
    radial-gradient(120% 80% at 50% 110%, rgba(56,189,248,0.12), transparent 65%),
    var(--dz-glass);
  border: 1px solid var(--dz-glass-edge);
  box-shadow:
    inset 0 1px 0 var(--dz-shine),
    0 1px 3px rgba(15,23,42,0.05),
    0 28px 60px -26px var(--dz-glow-indigo);
  backdrop-filter: blur(16px) saturate(130%);
  -webkit-backdrop-filter: blur(16px) saturate(130%);
}
.dz-stage {
  border-radius: 22px;
  box-shadow:
    0 0 0 1px rgba(255,255,255,0.45),
    0 4px 14px rgba(15,23,42,0.18),
    0 36px 80px -28px rgba(15,23,42,0.55),
    inset 0 0 0 1px rgba(255,255,255,0.12);
}

/* ----- color swatches in the rail (text/shadow color) ----- */
.dz-color {
  border-radius: 10px;
  border: 1px solid var(--dz-glass-edge);
  box-shadow:
    inset 0 1px 0 var(--dz-shine),
    0 1px 3px rgba(15,23,42,0.06);
  transition: transform .14s ease, box-shadow .18s ease, border-color .18s ease;
}
.dz-color:hover {
  transform: translateY(-1px);
  border-color: rgba(99,102,241,0.55);
  box-shadow:
    inset 0 1px 0 var(--dz-shine),
    0 8px 16px -8px var(--dz-glow-indigo);
}

/* ----- KP rows (key-point list inputs) and gallery upload tile ----- */
.dz-kp-icon, .dz-gal-up {
  border-radius: 10px;
  background: var(--dz-glass);
  border: 1px solid var(--dz-glass-edge);
  box-shadow: inset 0 1px 0 var(--dz-shine);
}
.dz-gal-up:hover {
  border-color: rgba(99,102,241,0.7);
  box-shadow:
    inset 0 1px 0 var(--dz-shine),
    0 10px 20px -10px var(--dz-glow-indigo);
}

/* ----- rail-back pill ----- */
.dz-rail-back {
  background: var(--dz-glass);
  border: 1px solid var(--dz-glass-edge);
  box-shadow:
    inset 0 1px 0 var(--dz-shine),
    0 1px 3px rgba(15,23,42,0.05);
}
.dz-rail-back:hover {
  border-color: rgba(99,102,241,0.6);
  box-shadow:
    inset 0 1px 0 var(--dz-shine),
    0 8px 18px -10px var(--dz-glow-indigo);
}

/* ----- sublabel: small caps with a crystal underline ----- */
.dz-sublabel {
  position: relative;
  color: var(--blue-600);
  opacity: 0.95;
}

/* ----- ad-name input (above the canvas) ----- */
.dz-ad-name {
  background: var(--dz-glass);
  border: 1px solid var(--dz-glass-edge);
  box-shadow:
    inset 0 1px 0 var(--dz-shine),
    0 1px 3px rgba(15,23,42,0.05);
}

/* =========================================================================
   CANVA-STYLE TOP TOOLBAR — when an element is selected on the canvas,
   the edit controls lift out of the left rail and become a horizontal
   strip above the stage (toggled by .is-toolbar on .dz-canva from JS).
   ========================================================================= */
.dz-canva.is-toolbar {
  grid-template-columns: 1fr;
  gap: 14px;
}
.dz-canva.is-toolbar .dz-controls {
  position: static;
  max-height: none;
  overflow: visible;
  padding: 12px 16px;
  flex-direction: column;
  gap: 6px;
  background:
    radial-gradient(140% 80% at 50% -20%, rgba(99,102,241,0.10), transparent 65%),
    var(--dz-glass);
  border: 1px solid var(--dz-glass-edge);
  border-radius: 18px;
  box-shadow:
    inset 0 1px 0 var(--dz-shine),
    0 1px 3px rgba(15,23,42,0.05),
    0 16px 36px -20px var(--dz-glow-soft);
  backdrop-filter: blur(14px) saturate(125%);
  -webkit-backdrop-filter: blur(14px) saturate(125%);
}

.dz-canva.is-toolbar .dz-rail-back {
  width: auto;
  align-self: flex-start;
  margin: 0;
  padding: 6px 12px;
  font-size: 12px;
  font-weight: 700;
}
.dz-canva.is-toolbar .dz-rail-head {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 0 2px 10px;
  margin: 0;
  border-bottom: 1px solid rgba(99, 102, 241, 0.18);
}
.dz-canva.is-toolbar .dz-rail-head strong { font-size: 14px; letter-spacing: -0.01em; }
.dz-canva.is-toolbar .dz-rail-head small {
  margin: 0;
  font-size: 11.5px;
  color: var(--muted);
}

/* Drop the panel chrome — the wrapper is the panel now. Inline children
   horizontally and let them wrap on narrower screens. */
.dz-canva.is-toolbar .dz-group {
  background: none;
  border: none;
  box-shadow: none;
  border-radius: 0;
  padding: 8px 0 2px;
  display: flex;
  flex-flow: row wrap;
  align-items: center;
  gap: 10px 16px;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.dz-canva.is-toolbar .dz-group-head { display: none; }

.dz-canva.is-toolbar .dz-group > .dz-field {
  margin: 0;
  min-width: 150px;
  flex: 0 1 220px;
  gap: 3px;
}
.dz-canva.is-toolbar .dz-group > .dz-field span {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}

.dz-canva.is-toolbar .dz-group > .dz-sublabel {
  margin: 0;
  padding-left: 14px;
  border-left: 1px solid rgba(99, 102, 241, 0.18);
  align-self: center;
  flex: 0 0 auto;
}
/* The first .dz-sublabel after the field shouldn't show a divider on the
   wrap-line, because nothing is to its left. */
.dz-canva.is-toolbar .dz-group > .dz-sublabel:first-of-type {
  padding-left: 0;
  border-left: none;
}

.dz-canva.is-toolbar .dz-group > .dz-chips,
.dz-canva.is-toolbar .dz-group > .dz-seasons {
  margin: 0;
  flex: 0 1 auto;
  max-width: 100%;
  gap: 6px;
}
.dz-canva.is-toolbar .dz-group > .dz-colorrow,
.dz-canva.is-toolbar .dz-group > .dz-check {
  margin: 0;
  flex: 0 0 auto;
}
.dz-canva.is-toolbar .dz-group > .dz-uprow {
  margin: 0;
  flex: 1 1 100%;
}
.dz-canva.is-toolbar .dz-group > .dz-kp-list {
  margin: 0;
  flex: 1 1 100%;
}
.dz-canva.is-toolbar .dz-group > .dz-bg-grid {
  margin: 0;
  flex: 1 1 100%;
}

/* Slightly tighter chips inside the toolbar so the row reads as a strip
   rather than a card-grid. */
.dz-canva.is-toolbar .dz-chip {
  padding: 5px 11px;
  font-size: 11.5px;
}

@media (max-width: 1080px) {
  .dz-canva.is-toolbar { grid-template-columns: 1fr; }
}

/* =========================================================================
   CANVA-STYLE POPOVER BUTTONS  (<details class="dz-pop">)
   "Effects", "Color (A)", "Shadow", "Button style", "Box design" — heavy
   chip-grids and color pickers collapse into a single compact button on
   the toolbar; click to reveal a floating panel below.
   ========================================================================= */
details.dz-pop {
  position: relative;
  margin: 0;
}
details.dz-pop > summary {
  list-style: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 12px;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--text);
  background: var(--dz-glass);
  border: 1px solid var(--dz-glass-edge);
  border-radius: 10px;
  box-shadow:
    inset 0 1px 0 var(--dz-shine),
    0 1px 2px rgba(15, 23, 42, 0.05);
  transition: transform .14s ease,
              border-color .18s ease,
              box-shadow .18s ease;
  user-select: none;
}
details.dz-pop > summary::-webkit-details-marker { display: none; }
details.dz-pop > summary::marker { content: ''; display: none; }
details.dz-pop > summary:hover {
  transform: translateY(-1px);
  border-color: rgba(99, 102, 241, 0.5);
  box-shadow:
    inset 0 1px 0 var(--dz-shine),
    0 8px 18px -8px var(--dz-glow-indigo);
}
details.dz-pop[open] > summary {
  border-color: rgba(99, 102, 241, 0.75);
  box-shadow:
    inset 0 1px 0 var(--dz-shine),
    0 0 0 3px rgba(99, 102, 241, 0.18),
    0 10px 22px -10px var(--dz-glow-indigo);
}
.dz-pop-icon { font-size: 14px; line-height: 1; }
.dz-pop-value {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--muted);
  padding-left: 6px;
  border-left: 1px solid color-mix(in srgb, var(--dz-glass-edge), transparent 40%);
}
.dz-pop-chev { font-size: 10px; color: var(--muted); }

/* Color swatch button — "A" with a current-color bar underneath */
details.dz-pop-color > summary {
  flex-direction: column;
  gap: 2px;
  padding: 4px 10px 5px;
  min-width: 36px;
  align-items: center;
}
.dz-pop-A {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 15px;
  font-weight: 800;
  line-height: 1;
  color: var(--text);
}
.dz-pop-color-bar {
  display: block;
  width: 22px;
  height: 4px;
  border-radius: 2px;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.15);
}
details.dz-pop-color .dz-pop-chev { display: none; }

/* The floating panel itself */
.dz-pop-panel {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  z-index: 40;
  min-width: 240px;
  max-width: 480px;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  background:
    radial-gradient(120% 80% at 50% -20%, rgba(99, 102, 241, 0.10), transparent 65%),
    var(--dz-glass);
  border: 1px solid var(--dz-glass-edge);
  border-radius: 14px;
  box-shadow:
    inset 0 1px 0 var(--dz-shine),
    0 14px 36px -12px var(--dz-glow-indigo),
    0 4px 12px rgba(15, 23, 42, 0.08);
  backdrop-filter: blur(16px) saturate(125%);
  -webkit-backdrop-filter: blur(16px) saturate(125%);
  animation: dzPopIn .14s cubic-bezier(.2, .8, .2, 1);
}
.dz-pop-panel-wide { min-width: 320px; max-width: 520px; }
.dz-pop-panel .dz-chips {
  display: flex;
  flex-flow: row wrap;
  gap: 6px;
  margin: 0;
}
.dz-pop-panel .dz-colorrow { margin: 0; }

@keyframes dzPopIn {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* In horizontal toolbar mode the popovers are children of .dz-group flex —
   keep them block (their parent is .dz-group, not the popover itself). The
   popover element collapses to its summary width when closed. */
.dz-canva.is-toolbar .dz-group > details.dz-pop {
  flex: 0 0 auto;
  margin: 0;
}

/* =========================================================================
   v6 — CANVA LAYOUT: left icon sidebar + tab pane + stage column with a
   floating pill toolbar above the canvas. Built on top of the existing
   editor structure; .dz-canva-v2 opts the new tree in.
   ========================================================================= */

/* The new editor grid: [icon sidebar][tab panel][stage column] */
.dz-canva-v2 {
  display: grid;
  grid-template-columns: 72px 296px minmax(0, 1fr);
  gap: 14px;
  align-items: start;
}
@media (max-width: 1100px) {
  .dz-canva-v2 { grid-template-columns: 72px 1fr; }
  .dz-canva-v2 .dz-stage-col { grid-column: 1 / -1; }
}
@media (max-width: 720px) {
  .dz-canva-v2 { grid-template-columns: 1fr; }
  .dz-canva-v2 .dz-leftbar { flex-direction: row; overflow-x: auto; }
}

/* ----- left icon sidebar ----- */
.dz-leftbar {
  position: sticky; top: 12px;
  display: flex; flex-direction: column; gap: 4px;
  padding: 8px 6px;
  background:
    radial-gradient(110% 60% at 50% 0%, rgba(99,102,241,0.10), transparent 60%),
    var(--dz-glass);
  border: 1px solid var(--dz-glass-edge);
  border-radius: 18px;
  box-shadow:
    inset 0 1px 0 var(--dz-shine),
    0 1px 3px rgba(15,23,42,0.05),
    0 14px 36px -22px var(--dz-glow-soft);
  backdrop-filter: blur(14px) saturate(125%);
  -webkit-backdrop-filter: blur(14px) saturate(125%);
}
.dz-side-btn {
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  width: 100%; padding: 9px 4px;
  border-radius: 12px; cursor: pointer;
  background: transparent; border: 1px solid transparent; color: var(--muted);
  transition: background .14s, color .14s, border-color .14s, transform .12s;
}
.dz-side-btn:hover {
  background: rgba(99, 102, 241, 0.08);
  color: var(--text);
  border-color: rgba(99, 102, 241, 0.18);
  transform: translateY(-1px);
}
.dz-side-btn.is-active {
  background: linear-gradient(180deg, var(--blue-500), var(--blue-600));
  color: #fff;
  border-color: var(--blue-600);
  box-shadow:
    0 6px 16px -6px rgba(37, 99, 235, 0.55),
    inset 0 1px 0 rgba(255, 255, 255, 0.28);
}
.dz-side-ico { font-size: 18px; line-height: 1; }
.dz-side-lbl { font-size: 10.5px; font-weight: 700; letter-spacing: 0.01em; }

/* ----- tab pane (sliding panel for the active sidebar category) ----- */
.dz-tabpane {
  position: sticky; top: 12px;
  display: flex; flex-direction: column; gap: 12px;
  max-height: calc(100vh - 130px); overflow: auto;
  padding: 14px; padding-right: 12px;
  background:
    radial-gradient(140% 80% at 50% -20%, rgba(99,102,241,0.10), transparent 65%),
    var(--dz-glass);
  border: 1px solid var(--dz-glass-edge);
  border-radius: 18px;
  box-shadow:
    inset 0 1px 0 var(--dz-shine),
    0 1px 3px rgba(15,23,42,0.05),
    0 14px 36px -22px var(--dz-glow-soft);
  backdrop-filter: blur(14px) saturate(125%);
  -webkit-backdrop-filter: blur(14px) saturate(125%);
}
.dz-tabpane .dz-group {
  /* The pane itself already has the panel chrome — strip per-group cards. */
  background: transparent;
  border: none;
  box-shadow: none;
  border-radius: 0;
  padding: 0 0 8px;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.dz-tabpane .dz-group + .dz-group {
  border-top: 1px solid rgba(99, 102, 241, 0.12);
  padding-top: 12px;
}
.dz-tabpane .dz-rail-head,
.dz-tabpane .dz-rail-head strong,
.dz-tabpane .dz-rail-head small,
.dz-tabpane .dz-group-head,
.dz-tabpane .dz-group-head strong,
.dz-tabpane .dz-group-head small {
  text-align: center;
}
.dz-tabpane .dz-group-head { margin-bottom: 8px; align-items: center; }

/* Chips stacked (one per row) in the Templates tab — easier to read. */
.dz-chips-stack { display: flex; flex-direction: column; gap: 6px; }
.dz-chips-stack .dz-chip { text-align: left; padding: 9px 12px; font-size: 12.5px; border-radius: 10px; }

/* "Add a text slot" cards in the Text tab + the Uploads pick grid. */
.dz-add-card {
  display: flex; align-items: center; gap: 11px;
  width: 100%; padding: 10px 12px;
  background: var(--bg-subtle);
  border: 1px solid var(--border);
  border-radius: 12px;
  cursor: pointer;
  text-align: left;
  transition: border-color .14s, background .14s, transform .12s;
}
.dz-add-card + .dz-add-card { margin-top: 6px; }
.dz-add-card:hover {
  border-color: var(--blue-400);
  background: var(--bg);
  transform: translateY(-1px);
}
.dz-add-ico {
  flex: none; width: 32px; height: 32px;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(180deg, var(--blue-500), var(--blue-600));
  color: #fff; border-radius: 8px;
  font-size: 16px; font-weight: 900; line-height: 1;
}
.dz-add-text { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.dz-add-text strong { font-size: 13px; color: var(--text); font-weight: 700; }
.dz-add-text small { font-size: 11.5px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Uploads quick-pick grid inside the sidebar pane. */
.dz-up-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 8px;
}
.dz-up-card {
  position: relative; padding: 0; cursor: pointer; text-align: left;
  background: var(--bg);
  border: 2px solid var(--border); border-radius: 10px; overflow: hidden;
  transition: border-color .14s, transform .12s, box-shadow .14s;
}
.dz-up-card:hover {
  border-color: var(--blue-500); transform: translateY(-2px);
  box-shadow: 0 10px 22px -10px rgba(37, 99, 235, 0.5);
}
.dz-up-card .dz-media-thumb { aspect-ratio: 1 / 1; }
.dz-up-card-name {
  display: block; font-size: 11px; font-weight: 700; color: var(--text);
  padding: 5px 7px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.dz-slot-pick {
  position: absolute; z-index: 9500;
  display: flex; flex-direction: column; gap: 2px; padding: 8px;
  width: 220px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: 0 16px 38px -12px rgba(15, 23, 42, 0.45);
  animation: dzPopIn .14s cubic-bezier(.2, .8, .2, 1);
}
.dz-slot-pick-head {
  font-size: 11px; font-weight: 700; color: var(--muted);
  padding: 4px 8px 6px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 4px;
}
.dz-slot-pick button {
  text-align: left; padding: 8px 10px; font-size: 13px; font-weight: 600;
  background: transparent; border: none; border-radius: 8px; cursor: pointer; color: var(--text);
}
.dz-slot-pick button:hover { background: var(--bg-subtle); color: var(--blue-600); }

/* ----- stage column (center area) ----- */
.dz-canva-v2 .dz-stage-col {
  display: flex; flex-direction: column; gap: 12px; min-width: 0;
}

/* The pill toolbar above the stage. Mimics Canva's floating white pill. */
.dz-topbar {
  display: flex; align-items: center; justify-content: center;
  min-height: 50px;
  padding: 6px 10px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 999px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.6),
    0 1px 2px rgba(15, 23, 42, 0.06),
    0 12px 28px -16px rgba(99, 102, 241, 0.4);
  overflow: hidden;
}
html.theme-dark .dz-topbar {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.05),
    0 1px 2px rgba(0, 0, 0, 0.3),
    0 14px 32px -16px rgba(99, 102, 241, 0.5);
}
.dz-topbar-empty {
  font-size: 12.5px; font-weight: 600; color: var(--muted);
  padding: 6px 14px;
}
.dz-topbar-inner {
  display: flex; flex-flow: row nowrap;
  align-items: center; gap: 4px;
  width: 100%;
  overflow-x: auto;
  scrollbar-width: thin;
}
.dz-topbar-name {
  flex: none; font-size: 11.5px; font-weight: 800;
  letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--muted);
  padding: 0 12px;
}
.dz-topbar-sep {
  flex: none; width: 1px; height: 22px;
  background: var(--border);
  margin: 0 4px;
}
/* Flatten the .dz-group inside the topbar (no card chrome, just a flex row). */
.dz-topbar .dz-group {
  background: none; border: none; box-shadow: none; padding: 0;
  display: flex; flex-flow: row nowrap; align-items: center; gap: 6px;
  backdrop-filter: none; -webkit-backdrop-filter: none;
}
.dz-topbar .dz-group-head { display: none; }
.dz-topbar .dz-field {
  margin: 0;
  display: flex; flex-flow: row nowrap; align-items: center; gap: 6px;
}
.dz-topbar .dz-field span {
  font-size: 10px; font-weight: 800; letter-spacing: 0.07em;
  text-transform: uppercase; color: var(--muted);
}
.dz-topbar .dz-input,
.dz-topbar .dz-fontsel {
  height: 32px; padding: 4px 9px;
  font-size: 13px; min-width: 140px; max-width: 180px;
  border-radius: 8px;
}
.dz-topbar .dz-sublabel {
  font-size: 10px; font-weight: 800; letter-spacing: 0.07em;
  text-transform: uppercase; color: var(--muted);
  margin: 0 4px 0 4px; padding-left: 8px;
  border-left: 1px solid var(--border);
}
.dz-topbar .dz-sublabel:first-of-type { border-left: none; padding-left: 0; }
.dz-topbar .dz-chips { flex: 0 1 auto; gap: 4px; }
.dz-topbar .dz-chip { padding: 5px 10px; font-size: 11.5px; }
.dz-topbar details.dz-pop > summary {
  padding: 6px 11px; font-size: 12px; border-radius: 8px;
}
.dz-topbar .dz-uprow,
.dz-topbar .dz-kp-list,
.dz-topbar .dz-bg-grid {
  flex: 1 1 100%;
}

/* ----- new Canva-style element popup (replaces old dz-eltools) ----- */
#dz-eltools.dz-eltools {
  display: none;
  position: absolute; z-index: 60;
  flex-direction: row;
  align-items: center; gap: 2px;
  padding: 4px 5px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.65),
    0 10px 26px -10px rgba(15, 23, 42, 0.55);
  white-space: nowrap;
}
html.theme-dark #dz-eltools.dz-eltools {
  background: #111827;
  border-color: rgba(255, 255, 255, 0.08);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 12px 28px -10px rgba(0, 0, 0, 0.6);
}
.dz-eltools .dz-pop-btn {
  height: 30px;
  padding: 0 12px;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--text);
  background: transparent;
  border: none;
  border-radius: 7px;
  cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
}
.dz-eltools .dz-pop-btn:hover {
  background: var(--bg-subtle);
}
.dz-eltools .dz-pop-icon-btn { width: 32px; padding: 0; }
.dz-eltools-icon { font-size: 14px; line-height: 1; }
.dz-eltools-sep {
  width: 1px; height: 18px; background: var(--border); margin: 0 3px;
}
/* The "More" dropdown menu under the ⋯ button. */
.dz-eltools-menu {
  display: none;
  position: absolute; top: calc(100% + 4px); right: 0;
  z-index: 70;
  flex-direction: column; gap: 2px;
  min-width: 178px; padding: 6px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: 0 16px 36px -10px rgba(15, 23, 42, 0.5);
}
.dz-eltools-menu .dz-menu-item {
  display: block; width: 100%;
  text-align: left; padding: 7px 10px;
  font-size: 12.5px; font-weight: 600; color: var(--text);
  background: transparent; border: none; border-radius: 7px; cursor: pointer;
}
.dz-eltools-menu .dz-menu-item:hover {
  background: var(--bg-subtle); color: var(--blue-600);
}

/* Locked element — different selection color and a "no drag" cursor. */
.dz-sel.is-locked {
  border-color: #f59e0b;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.65), 0 0 16px rgba(245, 158, 11, 0.45);
}

/* ----- editor bar — all chips/buttons the same height & feel ----- */
.dz-editor-bar {
  display: flex;
  align-items: center;
  gap: 8px;
}
.dz-editor-bar .dz-savestate,
.dz-editor-bar .dz-ed-act,
.dz-editor-bar .btn-primary {
  flex: none;
  height: 36px;
  padding: 0 14px;
  font-size: 12.5px;
  font-weight: 700;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  line-height: 1;
}
.dz-editor-bar .dz-savestate {
  background: var(--bg-subtle);
  border: 1px solid var(--border);
  color: var(--muted);
  font-weight: 600;
}
.dz-editor-bar .dz-ed-act {
  background: linear-gradient(180deg, var(--bg), var(--bg-subtle));
  border: 1px solid var(--border);
  color: var(--text);
  cursor: pointer;
  transition: border-color .14s, transform .12s, box-shadow .14s;
}
.dz-editor-bar .dz-ed-act:hover {
  border-color: var(--blue-400);
  transform: translateY(-1px);
  box-shadow: 0 6px 14px -8px var(--dz-glow-indigo);
}
.dz-editor-bar .btn-primary { padding: 0 16px; }

/* ----- Elements / Brand panel — uniform 3-up tile row ----- */
/* Replace the old uneven mix (small dashed box + two big buttons) with a
   consistent grid where every tile has the same height and visual weight. */
.dz-tabpane .dz-uprow {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 8px;
  margin: 0 0 4px;
}
.dz-tabpane .dz-uprow .dz-up-preview,
.dz-tabpane .dz-uprow .dz-up-empty,
.dz-tabpane .dz-uprow .dz-up-btn,
.dz-tabpane .dz-uprow .btn {
  width: 100%;
  height: 86px;
  margin: 0;
  padding: 8px;
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-size: 12.5px;
  font-weight: 700;
  text-align: center;
  line-height: 1.2;
  background: linear-gradient(180deg, var(--bg), var(--bg-subtle));
  border: 1px solid var(--border);
  color: var(--text);
  cursor: pointer;
  transition: border-color .14s, transform .12s, box-shadow .14s, background .14s;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), 0 1px 3px rgba(15, 23, 42, 0.04);
}
.dz-tabpane .dz-uprow .dz-up-preview {
  padding: 6px;
  object-fit: contain;
}
.dz-tabpane .dz-uprow .dz-up-empty {
  border-style: dashed;
  border-color: rgba(99, 102, 241, 0.4);
  color: var(--muted);
  font-size: 11.5px;
  font-weight: 600;
}
.dz-tile-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px; height: 26px;
  font-size: 17px; line-height: 1;
  color: var(--blue-600);
}
.dz-tabpane .dz-uprow .dz-up-btn:hover,
.dz-tabpane .dz-uprow .btn:hover {
  border-color: var(--blue-400);
  transform: translateY(-1px);
  box-shadow: 0 8px 18px -10px var(--dz-glow-indigo);
}
/* The "Remove" button is the 4th tile — span all 3 columns as a slim row. */
.dz-tabpane .dz-uprow [id$="-clear"] {
  grid-column: 1 / -1;
  height: 36px;
  flex-direction: row;
  font-size: 12px;
  font-weight: 700;
  color: var(--danger);
  background: var(--bg-subtle);
}
.dz-tabpane .dz-uprow [id$="-clear"]:hover {
  background: var(--danger);
  color: #fff;
  border-color: var(--danger);
}
/* The "Show 5-star badge" checkbox row — uniform card look. */
.dz-tabpane .dz-check {
  padding: 12px 14px;
  border-radius: 12px;
  font-weight: 600;
}

/* ----- per-client photo library — single unified gallery ----- */
.dz-photo-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 8px;
  margin: 0 0 12px;
}
.dz-photo-tile {
  position: relative;
  padding: 0;
  background: var(--bg);
  border: 2px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
  cursor: pointer;
  transition: border-color .14s, transform .12s, box-shadow .14s;
  display: flex; flex-direction: column;
}
.dz-photo-tile:hover {
  border-color: var(--blue-500);
  transform: translateY(-2px);
  box-shadow: 0 10px 22px -10px rgba(37, 99, 235, 0.5);
}
.dz-photo-tile.is-on {
  border-color: #ec4899;
  box-shadow: 0 0 0 2px rgba(236, 72, 153, 0.18), 0 10px 22px -10px rgba(236, 72, 153, 0.5);
}
.dz-photo-thumb {
  aspect-ratio: 1 / 1;
  background-color: #fff;
  background-image:
    linear-gradient(45deg, #e2e8f0 25%, transparent 25%, transparent 75%, #e2e8f0 75%),
    linear-gradient(45deg, #e2e8f0 25%, transparent 25%, transparent 75%, #e2e8f0 75%);
  background-size: 18px 18px;
  background-position: 0 0, 9px 9px;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
.dz-photo-thumb img { width: 100%; height: 100%; object-fit: contain; display: block; }
html.theme-dark .dz-photo-thumb {
  background-color: #0b1220;
  background-image:
    linear-gradient(45deg, #1e293b 25%, transparent 25%, transparent 75%, #1e293b 75%),
    linear-gradient(45deg, #1e293b 25%, transparent 25%, transparent 75%, #1e293b 75%);
}
.dz-photo-name {
  display: block;
  padding: 4px 6px;
  font-size: 10.5px; font-weight: 700; color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.dz-photo-tag {
  position: absolute; top: 5px; left: 5px;
  font-size: 9px; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase;
  color: #fff; padding: 2px 7px; border-radius: 999px;
  box-shadow: 0 2px 6px rgba(15, 23, 42, 0.35);
}
.dz-photo-tag-logo { background: var(--blue-500); }
.dz-photo-tag-hero { background: #ec4899; }
.dz-photo-cutout {
  position: absolute; top: 5px; right: 26px;
  font-size: 9px; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase;
  color: #fff; background: #16a34a; padding: 2px 6px; border-radius: 999px;
  box-shadow: 0 2px 6px rgba(15, 23, 42, 0.35);
}
.dz-photo-del {
  position: absolute; top: 4px; right: 4px;
  width: 20px; height: 20px;
  border-radius: 50%;
  font-size: 11px; line-height: 1;
  background: rgba(15, 23, 42, 0.6);
  color: #fff; border: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  opacity: 0;
  transition: opacity .14s, background .14s;
}
.dz-photo-tile:hover .dz-photo-del { opacity: 1; }
.dz-photo-del:hover { background: var(--danger); }
.dz-photo-up-btn {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%;
  height: 40px;
  padding: 0 14px;
  font-size: 13px; font-weight: 800;
  border-radius: 10px;
  cursor: pointer;
}
.dz-photo-up-btn .dz-tile-ico { color: #fff; }
.dz-photo-hint {
  margin: 8px 0 0;
  text-align: center;
  font-size: 11px;
  color: var(--muted);
  font-style: italic;
}
.dz-photo-tile { cursor: grab; }
.dz-photo-tile:active { cursor: grabbing; }
.dz-photo-tag-row { background: #f59e0b; }
/* While dragging a photo, dim the canvas and outline the drop targets. */
body.dz-dragging-photo .dz-stage { box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.35), 0 26px 50px -16px rgba(15, 23, 42, 0.5); }
body.dz-dragging-photo svg [data-el="product"],
body.dz-dragging-photo svg [data-el="logo"],
body.dz-dragging-photo svg [data-el="gallery"],
body.dz-dragging-photo svg [data-el="badge"] {
  outline: 2px dashed rgba(99, 102, 241, 0.5);
  outline-offset: 2px;
}
svg [data-el].is-dropping {
  outline: 3px solid #ec4899 !important;
  outline-offset: 3px;
  filter: brightness(1.04);
}
.dz-empty-tight {
  padding: 18px; font-size: 12px; border: 1px dashed var(--border); border-radius: 10px;
  background: var(--bg-subtle);
}

/* In v2, the stage-wrap drops its sticky behavior so it scrolls with the
   page; the left sidebar + tab pane are already sticky. */
.dz-canva-v2 .dz-stage-wrap {
  position: static;
}
.dz-canva-v2 .dz-stage { max-width: 720px; margin: 0 auto; }