:root {
  --brand-indigo: #0E0071;
  --brand-blue: #0070FC;
  --bg-page: #F2F8FF;
  --surface: #FFFFFF;
  --border-soft: #CCE3FF;
  --text: #333333;
  --text-muted: #657180;

  --pill-pending-bg: #FFF7E5;
  --pill-pending-fg: #9A6601;
  --pill-submitted-bg: #E5F1FF;
  --pill-submitted-fg: #0E0071;
  --pill-done-bg: #D0FEE5;
  --pill-done-fg: #003F1D;
  --accent-success: #00C158;
  --danger: #D9342B;

  --radius-card: 12px;
  --radius-ctrl: 8px;
  --radius-pill: 20px;
  --radius-badge: 4px;
  --shadow-card: 0 1px 3px rgba(14, 11, 26, 0.08);

  --font-body: "Noto Sans", system-ui, sans-serif;
  --font-brand: Barlow, "Playfair Display", serif;
  --font-mono: "JetBrains Mono", ui-monospace, monospace;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 23.8px;
  color: var(--text);
  background: var(--bg-page);
}
button { font-family: var(--font-body); cursor: pointer; }
input, select, textarea { font-family: var(--font-body); }

/* ---------- Layout ---------- */
.shell { display: flex; min-height: 100vh; }
.sidebar {
  width: 220px;
  flex: 0 0 220px;
  background: var(--brand-indigo);
  color: #fff;
  padding: 20px 14px 24px;
  border-right: 0.5px solid rgba(255,255,255,0.07);
  position: sticky; top: 0; height: 100vh;
  display: flex; flex-direction: column; gap: 18px;
  overflow-y: auto;
}
.main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.topbar {
  display: flex; align-items: center; justify-content: flex-end; gap: 14px;
  padding: 18px 32px 0;
}
.content { padding: 24px 32px 40px; }

/* ---------- Sidebar ---------- */
.brand-block { padding: 4px 8px; }
.brand-row { display: flex; align-items: center; gap: 8px; }
.brand-logo { width: 24px; height: 18px; flex: 0 0 auto; display: block; }
.brand-mark { display: block; width: 140px; height: auto; margin-bottom: 4px; }
.brand-name {
  font-family: var(--font-brand);
  font-size: 20px; line-height: 34px; font-weight: 700;
  letter-spacing: -0.2px; color: #fff;
}
.brand-sub { font-size: 12px; color: var(--brand-blue); }

.side-group-label {
  text-transform: uppercase;
  font-size: 10px; font-weight: 500; letter-spacing: 0.8px;
  color: rgba(255,255,255,0.3);
  padding: 0 8px 6px;
}

.role-select {
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.12);
  color: rgba(255,255,255,0.9);
  font-size: 13px; font-weight: 500;
  padding: 8px 28px 8px 10px;
  border-radius: 8px;
  width: 100%;
  appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path d='M1 1l4 4 4-4' stroke='white' stroke-opacity='0.7' stroke-width='1.5' fill='none'/></svg>");
  background-repeat: no-repeat;
  background-position: right 10px center;
}
.role-select option { color: #111; }

.scope-row { display: flex; gap: 6px; align-items: center; }
.switch-btn {
  background: rgba(255,255,255,0.05);
  color: rgba(255,255,255,0.6);
  border: none;
  padding: 7px 9px;
  border-radius: 8px;
  font-size: 12px; font-weight: 600;
}

.nav { display: flex; flex-direction: column; gap: 2px; }
.nav a {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 12px;
  border-radius: 8px;
  color: #fff; text-decoration: none;
  font-size: 14px; font-weight: 400;
}
.nav a:hover { background: rgba(255,255,255,0.05); }
.nav a.active { background: var(--brand-blue); }
.nav .icon { width: 16px; height: 16px; display: inline-flex; align-items: center; justify-content: center; }
.nav .icon svg { width: 16px; height: 16px; stroke: #fff; stroke-width: 1.5; fill: none; }

.side-stat {
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 8px; padding: 10px 12px;
}
.side-stat .label { font-size: 10px; letter-spacing: 0.8px; text-transform: uppercase; color: rgba(255,255,255,0.5); }
.side-stat .value { font-family: var(--font-mono); font-size: 16px; font-weight: 500; color: #fff; margin-top: 2px; }

/* ---------- Topbar ---------- */
/* Left side reserved for context switchers (e.g. dealer-acting-as picker). The
   topbar was originally right-aligned via justify-content:flex-end; the left
   container + .spacer between left and right divides the bar cleanly now. */
.topbar { justify-content: flex-start; }
.topbar-left { display: flex; align-items: center; gap: 10px; min-height: 28px; }
.topbar-left-label {
  font-size: 10px; font-weight: 600; letter-spacing: 0.8px;
  text-transform: uppercase; color: var(--text-muted);
}
.dealer-switcher {
  background: #fff; color: var(--text);
  border: 1px solid var(--border-soft); border-radius: 8px;
  padding: 6px 30px 6px 10px;
  font-size: 13px; font-weight: 600;
  min-width: 240px; max-width: 320px;
  appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path d='M1 1l4 4 4-4' stroke='%230070FC' stroke-width='1.5' fill='none'/></svg>");
  background-repeat: no-repeat;
  background-position: right 10px center;
}
.dealer-switcher:focus { outline: none; border-color: var(--brand-blue); box-shadow: 0 0 0 3px rgba(0,112,252,0.10); }
.topbar .username { font-size: 14px; color: var(--text); }
.avatar {
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--brand-blue); color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 600;
}
.avatar-btn { border: none; cursor: pointer; padding: 0; }
.avatar-wrap { position: relative; display: inline-block; }
.user-menu {
  position: absolute; right: 0; top: calc(100% + 8px);
  min-width: 280px; background: #fff;
  border: 0.5px solid var(--border-soft); border-radius: 10px;
  box-shadow: 0 6px 24px rgba(14, 11, 26, 0.12);
  padding: 6px; z-index: 50;
  display: none;
}
.user-menu.open { display: block; }
.user-menu-section {
  font-size: 10px; font-weight: 600; letter-spacing: 0.8px;
  text-transform: uppercase; color: var(--text-muted);
  padding: 8px 10px 4px;
}
.user-menu-info { padding: 6px 12px 8px; border-bottom: 1px solid var(--border-soft); margin-bottom: 2px; }
.user-menu-name { font-size: 13px; font-weight: 600; color: var(--text); }
.user-menu-role { font-size: 11px; color: var(--text-muted); margin-top: 1px; }
.user-menu-item {
  position: relative;
  display: block; width: 100%; text-align: left;
  background: transparent; border: none; cursor: pointer;
  padding: 8px 10px; border-radius: 6px;
}
.user-menu-item:hover { background: var(--bg-page); }
.user-menu-item.current { background: var(--bg-page); }
.user-menu-item-label { font-size: 13px; font-weight: 600; color: var(--text); }
.user-menu-item-sub { font-size: 11px; color: var(--text-muted); margin-top: 1px; }
.user-menu-check {
  position: absolute; right: 12px; top: 50%; transform: translateY(-50%);
  color: var(--brand-blue); font-weight: 700;
}
.dot-sep { color: var(--text-muted); }
.btn-outline-blue-sm {
  background: transparent; color: var(--brand-blue);
  border: 0.5px solid var(--brand-blue);
  padding: 5px 12px; border-radius: 8px;
  font-size: 12px; font-weight: 500;
}

/* ---------- Page Headers ---------- */
.page-head {
  display: flex; align-items: flex-end; justify-content: space-between;
  margin-bottom: 18px;
}
h1.page-title {
  font-size: 24px; line-height: 40.8px; font-weight: 700;
  letter-spacing: -0.48px; color: var(--text);
  margin: 0;
}
.page-sub { font-size: 14px; color: var(--text-muted); margin-top: 2px; }

/* ---------- Cards ---------- */
.sp-card {
  background: var(--surface);
  border: 0.5px solid var(--border-soft);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  padding: 20px 24px;
}
.card-stack > * + * { margin-top: 14px; }
.section-label {
  font-size: 13px; font-weight: 600; letter-spacing: 0.78px;
  text-transform: uppercase; color: #444;
  margin-bottom: 10px;
}
.card-title { font-size: 16px; font-weight: 600; margin: 0 0 4px; color: var(--text); }
.card-sub { font-size: 13px; color: var(--text-muted); margin: 0; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  border: none; cursor: pointer;
  font-size: 14px; font-weight: 500;
  padding: 10px 20px;
  border-radius: 8px;
  text-decoration: none;
}
/* Primary CTA — the canonical "do this thing" button (downloads, saves, creates).
   Previously only set bg/color, so browsers fell back to default <button> chrome
   (sharp corners, 2px outset border, cramped padding). Now fully owns its styling
   so every .btn-primary in the app reads as a confident solid CTA. */
.btn-primary {
  background: var(--brand-blue); color: #fff;
  padding: 8px 16px;
  border-radius: 8px;
  font-size: 14px; font-weight: 600;
  border: none; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  line-height: 1.3;
  transition: filter 120ms, transform 80ms, box-shadow 120ms;
}
.btn-primary:hover:not([disabled]) { filter: brightness(0.95); box-shadow: 0 2px 6px rgba(0,112,252,0.25); }
.btn-primary:active:not([disabled]) { transform: translateY(1px); }
.btn-primary-sm { background: var(--brand-blue); color: #fff; padding: 6px 14px; border-radius: 8px; font-size: 14px; font-weight: 500; border: none; cursor: pointer;}
/* Outline — paired with btn-primary in CTA rows. Bumped to match btn-primary's height
   (28→32px-ish) so the two read as a clean pair instead of size-mismatched. */
.btn-outline {
  background: transparent; color: var(--brand-blue);
  border: 1px solid var(--brand-blue);
  padding: 7px 16px;
  border-radius: 8px;
  font-size: 13px; font-weight: 600;
  cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  line-height: 1.3;
  transition: background 120ms, color 120ms;
}
.btn-outline:hover:not([disabled]) { background: rgba(0,112,252,0.06); }
.btn-outline-sm {
  background: transparent; color: var(--brand-blue);
  border: 0.5px solid var(--brand-blue);
  padding: 6px 12px; border-radius: 8px;
  font-size: 12px; font-weight: 500; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  line-height: 1.3; text-decoration: none;
  transition: background 120ms;
}
.btn-outline-sm:hover:not([disabled]) { background: rgba(0,112,252,0.06); }
.gallery-tile-body .btn-outline-sm { width: 100%; }
.gallery-tile-controls a, .gallery-tile-controls button { width: 100%; }
.btn-outline-xs { background: transparent; color: var(--brand-blue); border: 0.5px solid var(--brand-blue); padding: 4px 10px; border-radius: 8px; font-size: 11px; font-weight: 500; cursor: pointer;}
.btn-success { background: #1FB161; color: #fff; padding: 8px 16px; border-radius: 8px; font-size: 13px; font-weight: 500; border: none; cursor: pointer;}
.btn-danger-outline { background: transparent; color: var(--danger); border: 0.5px solid var(--danger); padding: 4px 10px; border-radius: 8px; font-size: 11px; font-weight: 500; cursor: pointer;}
.btn-ai-outline { background: transparent; color: var(--brand-blue); border: 1px dashed var(--brand-blue); padding: 4px 10px; border-radius: 8px; font-size: 11px; font-weight: 500; cursor: pointer;}
/* Disabled — was opacity:0.45 which made buttons nearly invisible. Bumped to a softer
   gray treatment that still clearly reads as disabled but stays legible. */
.btn[disabled], button[disabled] {
  cursor: not-allowed;
  filter: grayscale(0.35);
  opacity: 0.65;
}

/* ---------- Filter tabs ---------- */
.filter-tabs { display: flex; flex-wrap: wrap; gap: 8px; }
.tab {
  padding: 5px 12px; border-radius: 20px;
  font-size: 12px; font-weight: 500;
  background: transparent; color: var(--brand-blue);
  border: 1px solid var(--border-soft); cursor: pointer;
}
.tab.active { background: var(--brand-blue); color: #fff; border-color: var(--brand-blue); font-weight: 600; }

/* ---------- Pills ---------- */
.pill {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 4px;
  font-size: 11px; font-weight: 500;
  letter-spacing: 0.66px; text-transform: uppercase;
}
.pill-pending { background: var(--pill-pending-bg); color: var(--pill-pending-fg); }
.pill-submitted { background: var(--pill-submitted-bg); color: var(--pill-submitted-fg); }
.pill-done { background: var(--pill-done-bg); color: var(--pill-done-fg); }
.pill-muted { background: #EEF2F6; color: #657180; }

/* ---------- Inputs ---------- */
.field { display: flex; flex-direction: column; gap: 6px; }
.field-label {
  font-size: 12px; font-weight: 600; letter-spacing: 0.48px;
  text-transform: uppercase; color: var(--text);
}
.field-help { font-size: 12px; color: var(--text-muted); }
input[type="text"], input[type="email"], input[type="number"], input[type="date"], select, textarea {
  background: #fff; border: 1px solid var(--border-soft);
  border-radius: 8px; padding: 9px 12px;
  font-size: 14px; font-weight: 400; color: var(--text);
  outline: none;
}
input::placeholder, textarea::placeholder { color: var(--text-muted); }
select { appearance: none; padding-right: 32px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path d='M1 1l4 4 4-4' stroke='%23657180' stroke-width='1.5' fill='none'/></svg>");
  background-repeat: no-repeat; background-position: right 10px center;
}
.search-input {
  position: relative; display: flex; align-items: center;
}
.search-input input { padding-left: 34px; width: 100%; }
.search-input::before {
  content: ""; position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
  width: 14px; height: 14px;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23657180' stroke-width='1.5'><circle cx='7' cy='7' r='5'/><path d='m11 11 3 3'/></svg>") no-repeat center / contain;
}

/* ---------- Tables ---------- */
table.sp-table { width: 100%; border-collapse: collapse; }
.sp-table th {
  text-align: left; font-size: 12px; font-weight: 500;
  color: var(--text-muted); padding: 10px 16px;
  border-bottom: 0.5px solid var(--border-soft);
  text-transform: uppercase; letter-spacing: 0.4px;
}
.sp-table td {
  font-size: 13px; font-weight: 500; color: var(--text);
  padding: 14px 16px; border-bottom: 1px solid #F2F8FF;
}
.sp-table tr:hover td { background: rgba(0, 112, 252, 0.03); }
.mono { font-family: var(--font-mono); }
.right { text-align: right; }

/* ---------- Stat grid ---------- */
.stat-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; }
@media (max-width: 1100px) { .stat-grid { grid-template-columns: repeat(2, 1fr); } }
.stat-card { background: #fff; border: 0.5px solid var(--border-soft); border-radius: 12px; box-shadow: var(--shadow-card); padding: 16px 18px;}
.stat-label { font-size: 12px; text-transform: uppercase; letter-spacing: 0.48px; color: var(--text-muted); font-weight: 500; }
.stat-value { font-family: var(--font-mono); font-size: 22px; font-weight: 500; color: var(--text); margin-top: 6px; }

/* ---------- Creative grid ---------- */
.cre-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; }
.cre-grid-compact { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; }
.cre-card-compact .cre-meta { padding: 10px 12px 8px; gap: 4px; }
.cre-card-compact .cre-actions { padding: 8px 12px; }
.cre-card-compact .cre-thumb { aspect-ratio: 4 / 3; }
.cre-card { background: #fff; border: 0.5px solid var(--border-soft); border-radius: 12px; box-shadow: var(--shadow-card); overflow: hidden; display: flex; flex-direction: column;}
.cre-thumb {
  position: relative; aspect-ratio: 4/3; background: #F2F8FF;
  display: flex; align-items: center; justify-content: center; overflow: hidden;
}
.cre-thumb .canvas { position: absolute; inset: 0; }
.cre-meta { padding: 12px 14px; display: flex; flex-direction: column; gap: 6px; }
.cre-title { font-size: 14px; font-weight: 600; color: var(--text); }
.cre-tags { display: flex; flex-wrap: wrap; gap: 4px; }
.cre-tags .pill { font-size: 10px; letter-spacing: 0.5px; padding: 2px 8px; }
.cre-actions { display: flex; gap: 6px; align-items: center; padding: 10px 14px; border-top: 1px solid #F2F8FF; justify-content: space-between;}

/* ---------- Editor ---------- */
.editor-wrap { display: grid; grid-template-columns: 1fr 320px; gap: 16px; }
@media (max-width: 1000px) { .editor-wrap { grid-template-columns: 1fr; } }
.canvas-stage {
  position: relative; width: 100%;
  aspect-ratio: 4/3; background: #F2F8FF;
  border: 0.5px dashed var(--border-soft); border-radius: 8px;
  overflow: hidden;
}
/* ---------- Modal ---------- */
.modal-overlay {
  position: fixed; inset: 0; background: rgba(15,23,42,0.45);
  display: flex; align-items: center; justify-content: center; z-index: 100;
}
.modal {
  background: #fff; border-radius: 16px; width: 480px; max-width: calc(100% - 32px);
  max-height: calc(100vh - 48px); overflow-y: auto;
  padding: 24px 28px; box-shadow: 0 10px 40px rgba(14,11,26,0.18);
}
.modal.lg { width: 640px; }
.modal.preview { width: 560px; padding: 20px 22px; }
.modal.preview .canvas-stage { max-height: 50vh; aspect-ratio: 4 / 3; }
.modal-head { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 14px;}
.modal-title { font-size: 18px; font-weight: 700; margin: 0; }
.modal-sub { font-size: 13px; color: var(--text-muted); margin-top: 4px; }
.modal-close { background: none; border: none; font-size: 22px; color: var(--text-muted); cursor: pointer; }
.modal-foot { margin-top: 20px; display: flex; gap: 10px; justify-content: flex-end; }

/* ---------- Util ---------- */
.row { display: flex; align-items: center; gap: 10px; }
.row-between { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.col { display: flex; flex-direction: column; gap: 10px; }
.gap-16 { gap: 16px; }
.muted { color: var(--text-muted); }
.success-text { color: var(--accent-success); font-weight: 600; font-size: 12px; }
.spacer { flex: 1; }
.hr { height: 1px; background: var(--border-soft); margin: 12px 0; }
.kbd { font-family: var(--font-mono); font-size: 12px; }
.toast {
  position: fixed; bottom: 24px; right: 24px; z-index: 200;
  background: #0E0071; color: #fff; padding: 10px 14px;
  border-radius: 8px; box-shadow: 0 4px 12px rgba(0,0,0,.2);
  font-size: 13px;
}

/* ---------- Login page ---------- */
/* Full-viewport gate. No sidebar/topbar — the only thing the user can do is sign in. */
.auth-shell {
  min-height: 100vh;
  display: flex; align-items: center; justify-content: center;
  background:
    radial-gradient(circle at 20% 30%, rgba(0, 112, 252, 0.10), transparent 55%),
    radial-gradient(circle at 80% 70%, rgba(14, 0, 113, 0.10), transparent 55%),
    var(--bg-page);
  padding: 24px;
}
.auth-card {
  width: 100%; max-width: 420px;
  background: var(--surface);
  border: 0.5px solid var(--border-soft);
  border-radius: 16px;
  box-shadow: 0 20px 50px rgba(14, 11, 26, 0.10);
  padding: 32px 32px 28px;
}
/* Stacked brand block — logo on top, product name below. The wordmark already carries
   the brand identity, so a vertical layout gives it room and avoids competing for the
   visual hierarchy with the "Welcome back" headline. */
.auth-brand {
  display: flex; flex-direction: column; gap: 6px;
  margin-bottom: 22px;
}
/* Logo asset is white wordmark + coloured dots, designed for the dark indigo sidebar.
   On the white auth-card it'd disappear entirely, so we wrap it in the same indigo
   chip the sidebar uses — the wordmark reads cleanly against the brand colour. */
.auth-brand-mark {
  display: block; width: 160px; height: auto;
  background: var(--brand-indigo);
  padding: 12px 16px;
  border-radius: 10px;
  box-sizing: content-box;
}
.auth-brand-name {
  font-family: var(--font-brand);
  font-size: 16px; font-weight: 600; color: var(--brand-indigo);
  letter-spacing: -0.2px;
}
.auth-title {
  font-size: 22px; font-weight: 700; color: var(--text);
  margin: 0 0 6px; line-height: 1.2;
}
.auth-sub {
  font-size: 13px; color: var(--text-muted);
  margin-bottom: 22px;
}
.auth-field { display: flex; flex-direction: column; gap: 5px; margin-bottom: 14px; }
.auth-label {
  font-size: 11px; font-weight: 600; letter-spacing: 0.6px;
  text-transform: uppercase; color: var(--text-muted);
}
.auth-input {
  width: 100%; padding: 11px 13px;
  border-radius: 8px; border: 1px solid var(--border-soft);
  font-size: 14px; background: #fff; color: var(--text);
}
.auth-input:focus {
  outline: none; border-color: var(--brand-blue);
  box-shadow: 0 0 0 3px rgba(0, 112, 252, 0.12);
}
.auth-error {
  background: rgba(217, 52, 43, 0.08);
  color: var(--danger);
  border: 1px solid rgba(217, 52, 43, 0.30);
  padding: 9px 12px; border-radius: 8px;
  font-size: 13px;
  margin-bottom: 14px;
}
.auth-submit {
  width: 100%; padding: 11px 18px;
  background: var(--brand-blue); color: #fff;
  border: none; border-radius: 8px;
  font-size: 14px; font-weight: 600; cursor: pointer;
  transition: filter 120ms;
  margin-top: 6px;
}
.auth-submit:hover  { filter: brightness(0.95); }
.auth-submit:active { filter: brightness(0.90); }
.auth-submit:disabled { opacity: 0.6; cursor: progress; }
/* Login method tabs (Password / Mobile OTP / Email OTP) */
.auth-tabs { display: flex; gap: 4px; margin: 4px 0 18px; padding: 4px; background: var(--surface-2, #f3f3f7); border-radius: 10px; }
.auth-tab {
  flex: 1; padding: 8px 6px; border: none; background: transparent; cursor: pointer;
  font-size: 13px; font-weight: 600; color: var(--muted, #6b6b78); border-radius: 7px; transition: background 120ms, color 120ms;
}
.auth-tab:hover { color: var(--text, #1a1a24); }
.auth-tab.active { background: var(--surface, #fff); color: var(--text, #1a1a24); box-shadow: 0 1px 3px rgba(14,11,26,0.08); }
.auth-form { display: flex; flex-direction: column; }
.auth-dev-hint {
  margin-top: 10px; padding: 8px 11px; border-radius: 8px; font-size: 12.5px; font-weight: 600;
  background: rgba(0,112,252,0.08); color: var(--brand-blue, #0070fc); border: 1px dashed rgba(0,112,252,0.35);
}
/* Checkbox "pill" used by the RBAC pickers (functionalities, brands, locations) */
.chk-pill { display: inline-flex; align-items: center; gap: 7px; padding: 6px 11px; border: 1px solid var(--border-soft, #e3e3ea);
  border-radius: 999px; font-size: 13px; cursor: pointer; user-select: none; background: var(--surface, #fff); }
.chk-pill:hover { border-color: var(--brand-blue, #0070fc); }
.chk-pill input { margin: 0; cursor: pointer; }
/* Tabbed sub-page (Manage user) */
.tabbar { display: flex; gap: 4px; border-bottom: 1px solid var(--border-soft, #e3e3ea); margin-bottom: 16px; }
.tabbtn { padding: 10px 16px; border: none; background: transparent; cursor: pointer; font-size: 14px; font-weight: 600;
  color: var(--muted, #6b6b78); border-bottom: 2px solid transparent; margin-bottom: -1px; transition: color 120ms, border-color 120ms; }
.tabbtn:hover { color: var(--text, #1a1a24); }
.tabbtn.active { color: var(--brand-blue, #0070fc); border-bottom-color: var(--brand-blue, #0070fc); }
.btn-link { background: none; border: none; padding: 0; margin-bottom: 8px; cursor: pointer; font-size: 13px; font-weight: 600; color: var(--brand-blue, #0070fc); }
.btn-link:hover { text-decoration: underline; }
/* Per-brand location selector (Manage user → Brands & Locations tab) */
.scope-brand { border: 1px solid var(--border-soft, #e3e3ea); border-radius: 12px; padding: 14px 16px; }
.scope-brand-head { display: flex; align-items: center; gap: 10px; cursor: pointer; }
.scope-brand-head input { margin: 0; cursor: pointer; }
.auth-hint {
  margin-top: 16px;
  font-size: 11px; color: var(--text-muted);
  background: var(--bg-page);
  border: 1px dashed var(--border-soft);
  border-radius: 8px; padding: 10px 12px;
  line-height: 1.5;
}
.auth-hint strong { color: var(--text); }
.auth-foot {
  margin-top: 18px;
  font-size: 12px; text-align: center; color: var(--text-muted);
}

/* Sign-out item in the avatar menu — same shape as switcher rows, danger-tinted. */
.user-menu-item-danger .user-menu-item-label { color: var(--danger); }
.user-menu-item-danger:hover { background: rgba(217, 52, 43, 0.06); }

/* ---------- Backgrounds Library — redesigned UX (stats, picker, library grid) ---------- */
/* Stats banner up top — instant "what's the state of the library" answer. */
.bg-stats {
  display: flex; gap: 12px; flex-wrap: wrap; margin: 0;
}
.bg-stat {
  flex: 0 0 auto; min-width: 140px;
  background: var(--surface);
  border: 0.5px solid var(--border-soft);
  border-radius: var(--radius-card);
  padding: 14px 18px;
  box-shadow: var(--shadow-card);
  display: flex; flex-direction: column; gap: 2px;
}
.bg-stat-num { font-family: var(--font-mono); font-size: 22px; font-weight: 600; color: var(--text); line-height: 1.1; }
.bg-stat-label { font-size: 11px; text-transform: uppercase; letter-spacing: 0.6px; color: var(--text-muted); }
.bg-stat.good    .bg-stat-num { color: var(--accent-success); }
.bg-stat.warn    .bg-stat-num { color: var(--pill-pending-fg); }
.bg-stat.pending .bg-stat-num { color: var(--brand-blue); }

/* Upload card — collapsible by default; head + numbered steps. */
.bg-upload-head { margin-bottom: 14px; }
.bg-step-label {
  display: flex; align-items: center; gap: 8px;
  font-size: 14px; font-weight: 600; color: var(--text);
  margin-bottom: 10px; margin-top: 4px;
}
.bg-step-num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--brand-blue); color: #fff;
  font-size: 12px; font-weight: 600;
}
.bg-step-locked {
  padding: 14px 16px; border-radius: 8px;
  background: var(--bg-page); color: var(--text-muted);
  font-size: 13px; margin-top: 12px;
  border: 1px dashed var(--border-soft);
}

/* Theme search + grouped picker — replaces the wall of 35 chips. */
.bg-theme-search {
  width: 100%; max-width: 480px;
  padding: 9px 12px; border-radius: 8px;
  border: 1px solid var(--border-soft);
  font-size: 13px; margin-bottom: 14px;
  background: #fff;
}
.bg-theme-search:focus { outline: none; border-color: var(--brand-blue); box-shadow: 0 0 0 3px rgba(0,112,252,0.10); }
.bg-theme-groups { display: flex; flex-direction: column; gap: 12px; }
.bg-theme-group {
  display: flex; flex-direction: column; gap: 6px;
}
.bg-theme-group-label {
  font-size: 11px; font-weight: 600; letter-spacing: 0.6px;
  text-transform: uppercase; color: var(--text-muted);
}
.bg-theme-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.bg-theme-chip-custom { border-style: dashed !important; }

/* Save bar at the bottom of the upload card. */
.bg-save-bar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap;
  margin-top: 16px; padding-top: 16px;
  border-top: 1px solid var(--border-soft);
}
.bg-save-status { font-size: 13px; color: var(--text-muted); }
.bg-save-status.warn { color: var(--pill-pending-fg); font-weight: 500; }

/* Library toolbar — search + filter chips. */
.bg-library-toolbar {
  display: flex; gap: 12px; align-items: center; flex-wrap: wrap;
  margin-bottom: 16px;
}
.bg-library-search { flex: 1; min-width: 240px; max-width: 360px; }
.bg-library-search input {
  width: 100%; padding: 9px 12px;
  border-radius: 8px; border: 1px solid var(--border-soft);
  font-size: 13px; background: #fff;
}
.bg-library-search input:focus { outline: none; border-color: var(--brand-blue); box-shadow: 0 0 0 3px rgba(0,112,252,0.10); }
.bg-library-filters { display: flex; gap: 6px; flex-wrap: wrap; }
.bg-filter-chip { display: inline-flex; align-items: center; gap: 6px; }
.bg-filter-count {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 20px; height: 16px; padding: 0 5px;
  border-radius: 8px; background: rgba(14, 11, 26, 0.08);
  font-size: 10px; font-weight: 600; color: var(--text-muted);
}
.bg-filter-chip.active .bg-filter-count {
  background: rgba(255, 255, 255, 0.25); color: #fff;
}

/* Library grid — compact, scannable cards. */
.bg-library-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(380px, 1fr));
  gap: 14px;
}
.bg-library-card {
  background: var(--bg-page);
  border: 0.5px solid var(--border-soft);
  border-radius: var(--radius-card);
  padding: 14px;
  display: flex; flex-direction: column; gap: 12px;
  transition: box-shadow 150ms, transform 150ms;
}
.bg-library-card:hover {
  box-shadow: 0 4px 14px rgba(14, 11, 26, 0.10);
  transform: translateY(-1px);
}
.bg-library-card-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 10px;
}
.bg-library-card-title { font-size: 15px; font-weight: 600; color: var(--text); line-height: 1.3; }
.bg-library-card-sub { font-size: 11px; color: var(--text-muted); margin-top: 2px; }
.bg-status-pill { font-size: 10px; white-space: nowrap; }

/* Thumb row — three aspect ratios in a tidy line. */
.bg-library-thumbs {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 8px;
}
.bg-thumb-cell { display: flex; flex-direction: column; gap: 4px; }
.bg-thumb {
  position: relative;
  background: #fff;
  background-size: cover; background-position: center;
  border-radius: 6px;
  border: 1px solid var(--border-soft);
  overflow: hidden;
}
.bg-thumb.is-missing {
  background: repeating-linear-gradient(45deg,
    rgba(204, 227, 255, 0.18) 0 6px,
    rgba(204, 227, 255, 0.36) 6px 12px);
  display: flex; align-items: center; justify-content: center;
  border-style: dashed;
}
.bg-thumb-missing-label {
  font-size: 10px; color: var(--text-muted);
  text-transform: uppercase; letter-spacing: 0.4px;
}
.bg-thumb-cell.bg-thumb-square    .bg-thumb { aspect-ratio: 1 / 1; }
.bg-thumb-cell.bg-thumb-landscape .bg-thumb { aspect-ratio: 1200 / 628; }
.bg-thumb-cell.bg-thumb-portrait  .bg-thumb { aspect-ratio: 4 / 5; }
.bg-thumb-caption {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 4px; font-size: 10px;
}
.bg-thumb-name { color: var(--text); font-weight: 600; }
.bg-thumb-dim  { color: var(--text-muted); font-family: var(--font-mono); }
.bg-thumb-remove {
  position: absolute; top: 4px; right: 4px;
  width: 20px; height: 20px; border-radius: 50%;
  background: rgba(14, 11, 26, 0.55); color: #fff;
  border: none; cursor: pointer;
  font-size: 14px; line-height: 1;
  display: none; align-items: center; justify-content: center;
}
.bg-thumb.has-image:hover .bg-thumb-remove { display: flex; }

/* Empty state — distinguishes "no library yet" from "no matches" */
.bg-empty-state {
  padding: 40px 24px; text-align: center;
  border: 1px dashed var(--border-soft); border-radius: var(--radius-card);
  background: var(--bg-page);
}
.bg-empty-icon { font-size: 32px; color: var(--brand-blue); margin-bottom: 8px; opacity: 0.7; }
.bg-empty-title { font-size: 16px; font-weight: 600; color: var(--text); margin-bottom: 4px; }
.bg-empty-sub { font-size: 13px; color: var(--text-muted); max-width: 420px; margin: 0 auto; }

/* ---------- Download progress overlay ---------- */
.download-progress-overlay {
  position: fixed; inset: 0; z-index: 300;
  background: rgba(14, 11, 26, 0.55);
  backdrop-filter: blur(2px);
  display: flex; align-items: center; justify-content: center;
  animation: fadeIn 180ms ease-out;
}
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
.download-progress-card {
  background: #fff; border-radius: 14px;
  padding: 28px 32px; min-width: 340px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.22);
  text-align: center;
}
.download-progress-spark {
  font-size: 28px; line-height: 1;
  color: var(--brand-blue);
  animation: dpSpin 1.2s ease-in-out infinite;
  display: inline-block;
}
@keyframes dpSpin {
  0%, 100% { transform: scale(1) rotate(0deg); opacity: 0.85; }
  50%      { transform: scale(1.15) rotate(180deg); opacity: 1; }
}
.download-progress-title {
  font-size: 16px; font-weight: 700; color: var(--text);
  margin-top: 10px;
}
.download-progress-sub {
  font-size: 13px; color: var(--text-muted);
  margin-top: 4px;
}
.download-progress-track {
  margin-top: 16px;
  height: 6px; width: 100%;
  background: #E2E8F0; border-radius: 3px;
  overflow: hidden;
}
.download-progress-bar {
  height: 100%; width: 0%;
  background: linear-gradient(90deg, var(--brand-blue), #5BAEFF);
  border-radius: 3px;
}
.empty {
  padding: 32px; text-align: center; color: var(--text-muted);
  border: 1px dashed var(--border-soft); border-radius: 12px; background: #fff;
}

/* slot indicator */
.slot-thumb { position: relative; width: 56px; height: 42px; border-radius: 6px; background: #F2F8FF; border: 0.5px solid var(--border-soft); display:inline-flex; align-items:center;justify-content:center; font-size: 10px; color: var(--text-muted); overflow:hidden;}
.slot-thumb.empty { border-style: dashed; }
.slot-thumb .canvas { position: absolute; inset: 0; }
.slot-row { display: flex; align-items: center; gap: 10px; }
.slot-tag { font-size: 10px; font-weight: 600; letter-spacing: 0.6px; text-transform: uppercase; color: var(--text-muted); }

/* Dealer slot-assign page (First / Second / Third) */
.slot-assign-card { padding: 16px 20px; }
.slot-assign-body { display: flex; gap: 18px; align-items: flex-start; flex-wrap: wrap; }
.slot-assign-thumb { position: relative; width: 200px; aspect-ratio: 4/3; flex: 0 0 200px; border-radius: 8px; overflow: hidden; background: #F2F8FF; border: 0.5px solid var(--border-soft); }
.slot-assign-thumb .canvas { position: absolute; inset: 0; }
.cre-card.selected { outline: 2px solid var(--brand-blue); outline-offset: -1px; }
@media (max-width: 600px) {
  .slot-assign-thumb { width: 100%; flex-basis: auto; }
}

/* coverage bar */
.coverage { height: 6px; background: #F2F8FF; border-radius: 3px; overflow: hidden; width: 160px;}
.coverage > span { display: block; height: 100%; background: var(--accent-success); }

/* tabs in page head */
.subnav { display: flex; gap: 4px; border-bottom: 0.5px solid var(--border-soft); margin-bottom: 16px;}
.subnav button {
  background: transparent; border: none;
  padding: 8px 12px; border-bottom: 2px solid transparent;
  font-size: 13px; font-weight: 500; color: var(--text-muted);
  cursor: pointer;
}
.subnav button.active { color: var(--brand-blue); border-bottom-color: var(--brand-blue); }

/* checkbox row */
.check-row { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; }

/* AI prompt chips */
.ai-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.ai-chip {
  background: var(--bg-page); border: 1px solid var(--border-soft);
  color: var(--text); padding: 5px 12px; border-radius: 20px;
  font-size: 12px; font-weight: 400; cursor: pointer;
}

/* Slot picker */
.slot-pick { display: inline-flex; gap: 4px; }
.slot-pick button {
  font-size: 10px; padding: 3px 8px; border-radius: 4px;
  border: 1px solid var(--border-soft); background: #fff; color: var(--text-muted);
  letter-spacing: 0.5px; text-transform: uppercase; font-weight: 600; cursor: pointer;
}
.slot-pick button.on { background: var(--brand-blue); color: #fff; border-color: var(--brand-blue); }

/* Background gallery */
.bg-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 10px; max-height: 280px; overflow-y: auto; padding: 4px;}
.bg-tile { aspect-ratio: 4/3; border-radius: 8px; border: 0.5px solid var(--border-soft); cursor: pointer; position: relative; overflow: hidden;}
.bg-tile.selected { outline: 2px solid var(--brand-blue); outline-offset: 1px; }
.bg-tile .lab { position: absolute; bottom: 4px; left: 4px; background: rgba(0,0,0,0.5); color:#fff; font-size: 10px; padding: 1px 6px; border-radius: 4px; }

/* Grouped predefined-bg picker (creative editor → Background → Predefined) */
.bg-section + .bg-section { margin-top: 18px; }
.bg-section-head { display: flex; align-items: baseline; gap: 8px; }
.bg-section-title { font-size: 11px; text-transform: uppercase; letter-spacing: 0.8px; color: var(--text-strong, #1a1a1a); font-weight: 700; }
.bg-section-count { font-size: 11px; color: var(--text-muted, #64748b); background: var(--border-soft, #e5e7eb); padding: 1px 7px; border-radius: 999px; }
.bg-section-help { font-size: 11px; color: var(--text-muted, #64748b); margin: 2px 0 8px; }
.bg-gallery.rich { max-height: none; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 12px; }
.bg-tile.rich { aspect-ratio: 4/3; }
.bg-tile.rich .bg-tile-label,
.bg-tile.compact .bg-tile-label {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 22px 10px 8px;
  background: linear-gradient(to top, rgba(0,0,0,0.78) 0%, rgba(0,0,0,0.45) 55%, rgba(0,0,0,0) 100%);
  color: #fff;
}
.bg-tile-title { font-size: 13px; font-weight: 600; line-height: 1.2; text-shadow: 0 1px 2px rgba(0,0,0,0.55); }
.bg-tile-chips { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 5px; }
.bg-tile-chip {
  font-size: 9px; padding: 1px 6px; border-radius: 3px;
  background: rgba(255,255,255,0.22); color: rgba(255,255,255,0.95);
  text-transform: lowercase; letter-spacing: 0.2px; backdrop-filter: blur(2px);
}

/* Compact bg picker: single tabbed grid with fixed scroll height (no multi-section sprawl) */
.bg-gallery.compact {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  gap: 10px; max-height: 320px; overflow-y: auto; padding: 4px;
  border: 0.5px solid var(--border-soft); border-radius: 8px; background: #FAFBFC;
}
.bg-tile.compact { aspect-ratio: 4/3; border-radius: 6px; cursor: pointer; position: relative; overflow: hidden; border: 0.5px solid var(--border-soft); }
.bg-tile.compact.selected { outline: 2px solid var(--brand-blue); outline-offset: 1px; }
.bg-tile.compact .bg-tile-title { font-size: 11px; }
.bg-tile.compact .bg-tile-chip { font-size: 8px; padding: 1px 5px; }

/* Tag-chip input (Add Background modal) */
.chip-input {
  display: flex; flex-wrap: wrap; gap: 6px; align-items: center;
  padding: 6px; min-height: 38px;
  border: 0.5px solid var(--border-soft); border-radius: 6px; background: #fff;
}
.chip-input:focus-within { border-color: var(--brand-blue); }
.chip-input input { flex: 1; min-width: 80px; border: 0; outline: 0; padding: 4px 6px; font-size: 13px; background: transparent; }
.chip-input .chip {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 4px 3px 10px; border-radius: 999px;
  font-size: 11px; font-weight: 500;
  background: var(--brand-blue); color: #fff;
}
.chip-input .chip .x {
  cursor: pointer; padding: 0 6px; border-radius: 10px;
  background: rgba(255,255,255,0.25); line-height: 16px; font-weight: 700;
}

/* Toggle */
.toggle { position: relative; display: inline-block; width: 34px; height: 20px; }
.toggle input { display: none; }
.toggle .slider { position: absolute; inset: 0; background: #CBD5E1; border-radius: 999px; transition: 0.15s; }
.toggle .slider::before { content:""; position:absolute; top:2px; left:2px; width: 16px; height: 16px; background: #fff; border-radius: 50%; transition: 0.15s; }
.toggle input:checked + .slider { background: var(--brand-blue); }
.toggle input:checked + .slider::before { transform: translateX(14px); }
.toggle input:disabled + .slider { opacity: 0.5; }

/* drawer */
.drawer-overlay { position: fixed; inset: 0; background: rgba(15,23,42,0.45); z-index: 90; }
.drawer { position: fixed; top: 0; right: 0; bottom: 0; width: 720px; max-width: 100%; background: #fff; z-index: 91; box-shadow: -10px 0 40px rgba(14,11,26,0.18); display: flex; flex-direction: column;}
.drawer-head { padding: 20px 24px; border-bottom: 0.5px solid var(--border-soft); display: flex; justify-content: space-between; align-items: flex-start;}
.drawer-body { padding: 20px 24px; overflow-y: auto; flex: 1; }

/* ---------- Dealer Creative Studio (DCS) ---------- */
.studio-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(260px, 340px);
  gap: 18px;
  align-items: start;
}
/* When no model is picked, the live-preview column hides and the steps column expands
   to full width — gives the model-picker hero center stage. */
.studio-layout.studio-layout-hero { grid-template-columns: 1fr; }
.studio-layout.studio-layout-hero .studio-preview-col { display: none; }
@media (max-width: 980px) { .studio-layout { grid-template-columns: 1fr; } }

/* ---------- Studio model-picker section (shown when state.productId is null) ----------
   Renamed from `.studio-hero` because that name is already used for the car-image
   overlay inside the canvas (position:absolute + pointer-events:none) — a name clash
   that made every tile in the picker unclickable. Using a unique prefix avoids it. */
.studio-pick-model {
  background: var(--surface);
  border: 0.5px solid var(--border-soft);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  padding: 32px 32px 28px;
}
.studio-pick-model-head { text-align: center; margin-bottom: 24px; }
.studio-pick-model-title {
  font-size: 22px; font-weight: 700; color: var(--text);
  margin: 0 0 6px; letter-spacing: -0.3px;
}
.studio-pick-model-sub {
  font-size: 13px; color: var(--text-muted);
  margin: 0; max-width: 640px; margin-left: auto; margin-right: auto;
}
.studio-pick-model-grid .studio-tile-grid {
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 16px;
}
.studio-pick-model-grid .studio-tile-thumb { aspect-ratio: 4/3; }
.studio-pick-model-grid .studio-tile { transition: transform 150ms, box-shadow 150ms, outline-color 120ms; }
.studio-pick-model-grid .studio-tile:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 14px rgba(14,11,26,0.10);
}
.studio-pick-model-foot {
  text-align: center; margin-top: 22px;
  font-size: 13px;
}
.studio-pick-model-foot .muted { color: var(--text-muted); margin-right: 8px; }

/* "Composing for: <model>" chip that replaces Step 1 once a model is picked. */
.studio-context-chip {
  display: flex; align-items: center; gap: 12px;
  background: var(--surface);
  border: 0.5px solid var(--border-soft);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  padding: 12px 14px;
}
.studio-context-chip-thumb {
  width: 56px; height: 56px; flex: 0 0 auto;
  background: #F2F8FF center/contain no-repeat;
  border-radius: 8px;
}
.studio-context-chip-meta { flex: 1; min-width: 0; }
.studio-context-chip-label {
  font-size: 10px; font-weight: 600; letter-spacing: 0.6px;
  text-transform: uppercase; color: var(--text-muted);
}
.studio-context-chip-name {
  font-size: 16px; font-weight: 700; color: var(--text);
  margin-top: 2px;
}
.studio-steps { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.studio-step { padding: 16px 18px; }
.studio-step.disabled { opacity: 0.5; pointer-events: none; }
.studio-step-num {
  width: 24px; height: 24px; border-radius: 50%;
  background: var(--brand-blue); color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 700;
}
.studio-step-title { font-size: 15px; font-weight: 600; color: var(--text); }
.studio-step-summary {
  margin-left: auto;
  font-size: 11px; font-weight: 500;
  color: var(--brand-blue);
  background: var(--bg-page); padding: 2px 10px; border-radius: 12px;
}
.studio-tile-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 10px;
}
.studio-tile {
  border: 1px solid var(--border-soft); border-radius: 8px;
  background: #fff; cursor: pointer;
  overflow: hidden;
  transition: outline-color 120ms;
}
.studio-tile:hover { outline: 1px solid var(--brand-blue); outline-offset: -1px; }
.studio-tile.selected { outline: 2px solid var(--brand-blue); outline-offset: -2px; }
.studio-tile-thumb {
  width: 100%; aspect-ratio: 4/3;
  /* `contain` (not `cover`) so the whole vehicle is visible — the uploaded asset is a
     side-on pose with empty padding around it; cropping it crops away the car body. */
  background: #F2F8FF center/contain no-repeat;
}
.studio-tile-thumb.empty { background: repeating-linear-gradient(45deg, #F2F8FF 0 8px, #E5F1FF 8px 16px); }
.studio-tile-label { font-size: 12px; font-weight: 600; padding: 6px 8px 2px; color: var(--text); }
.studio-tile-sub { font-size: 11px; padding: 0 8px 6px; color: var(--text-muted); }
.studio-input {
  width: 100%;
  padding: 8px 10px; border-radius: 8px;
  border: 0.5px solid var(--border-soft); background: #fff;
  font-size: 13px; color: var(--text);
}
.studio-input-readonly {
  background: var(--bg-page); color: var(--text-muted);
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--font-mono); font-weight: 600;
}

/* Preview pane */
.studio-preview-col { position: sticky; top: 18px; }
.studio-preview-card { padding: 16px 18px; }
/* Studio live-preview pane (dealer side).
   Layout:
     row 1: landscape hero, full width
     row 2: square (5fr) + portrait (4fr) — the 5:4 column ratio makes both bottom tiles
            land at identical pixel heights (square h = w; portrait h = w × 5/4; with widths
            5:4 the heights collapse to the same value).
   This replaces the older "huge square + two skinny thumbs" zigzag with a balanced trio. */
.studio-preview-body {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.studio-preview-body-empty {
  min-height: 220px;
  background: #FAFCFF;
  box-shadow: inset 0 0 0 0.5px var(--border-soft);
  border-radius: 10px;
}
.studio-preview-bottom-row {
  display: grid;
  grid-template-columns: 5fr 4fr;
  gap: 12px;
  align-items: start;
}
.studio-preview-tile {
  display: flex; flex-direction: column; gap: 6px;
  min-width: 0;
}
.studio-preview-tile-label {
  font-size: 10px; font-weight: 600; letter-spacing: 0.4px;
  text-transform: uppercase; color: var(--text-muted);
  padding-left: 2px;
}
.studio-preview-frame {
  position: relative;
  background: #0E0B1A;
  border-radius: 10px;
  overflow: hidden;
  cursor: zoom-in;
  box-shadow: 0 1px 3px rgba(14,11,26,0.08);
  transition: box-shadow 150ms, transform 150ms;
}
.studio-preview-frame:hover {
  box-shadow: 0 4px 14px rgba(14,11,26,0.22);
  transform: translateY(-1px);
}
.studio-preview-square    .studio-preview-frame { aspect-ratio: 1 / 1; }
.studio-preview-portrait  .studio-preview-frame { aspect-ratio: 4 / 5; }
.studio-preview-landscape .studio-preview-frame { aspect-ratio: 1200 / 628; }
.studio-preview-frame svg { display: block; width: 100%; height: 100%; }

/* Corner expand button — overlays each frame; opens the all-sizes popup. */
.studio-preview-expand {
  position: absolute; top: 8px; right: 8px;
  width: 28px; height: 28px;
  border: 0; border-radius: 50%;
  background: rgba(14,11,26,0.55);
  color: #fff; font-size: 14px; line-height: 1;
  display: flex; align-items: center; justify-content: center;
  cursor: zoom-in;
  opacity: 0.85;
  transition: background 120ms, transform 120ms, opacity 120ms;
}
.studio-preview-frame:hover .studio-preview-expand { opacity: 1; }
.studio-preview-expand:hover { background: rgba(14,11,26,0.9); transform: scale(1.06); }

/* Loader during the 900ms compose animation — sits in the landscape hero slot. */
.studio-preview-loader {
  position: relative;
  aspect-ratio: 1200 / 628;
  background: linear-gradient(135deg, #EAF3FF 0%, #F7FAFF 100%);
  border-radius: 10px;
  overflow: hidden;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 10px;
}

/* All-aspects popup — grid puts square + portrait on top row, landscape full-width below. */
.studio-modal-body { padding: 0 4px; }
.studio-modal-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.studio-modal-tile {
  display: flex; flex-direction: column; gap: 6px;
  min-width: 0;
}
.studio-modal-tile-landscape { grid-column: 1 / -1; }
.studio-modal-tile-label {
  font-size: 11px; font-weight: 600; letter-spacing: 0.4px;
  text-transform: uppercase; color: var(--text-muted);
}
.studio-modal-tile.focused .studio-modal-tile-label { color: var(--brand-blue); }
.studio-modal-frame {
  background: #0E0B1A;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(14,11,26,0.18);
}
.studio-modal-tile.focused .studio-modal-frame {
  box-shadow: 0 0 0 2px var(--brand-blue), 0 4px 14px rgba(14,11,26,0.22);
}
.studio-modal-tile-square    .studio-modal-frame { aspect-ratio: 1 / 1; }
.studio-modal-tile-portrait  .studio-modal-frame { aspect-ratio: 4 / 5; }
.studio-modal-tile-landscape .studio-modal-frame { aspect-ratio: 1200 / 628; }
.studio-modal-frame svg { display: block; width: 100%; height: 100%; }
@media (max-width: 720px) {
  .studio-modal-grid { grid-template-columns: 1fr; }
  .studio-modal-tile-landscape { grid-column: auto; }
}

/* Magical loader — shimmer + spark + sub-text. Runs for ~900ms after each bg pick. */
.studio-loader {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 10px;
  background: linear-gradient(135deg, #EAF3FF 0%, #F7FAFF 100%);
}
.studio-loader-shimmer {
  position: absolute; inset: 0;
  background: linear-gradient(
    100deg,
    rgba(255,255,255,0) 30%,
    rgba(255,255,255,0.85) 50%,
    rgba(255,255,255,0) 70%
  );
  background-size: 300% 100%;
  animation: studio-shimmer 1.4s linear infinite;
}
.studio-loader-spark {
  position: relative;
  font-size: 28px;
  color: var(--brand-blue);
  animation: studio-spark 1.2s ease-in-out infinite;
  text-shadow: 0 0 12px rgba(0,112,252,0.45);
}
.studio-loader-text {
  position: relative;
  font-size: 12px; font-weight: 500; letter-spacing: 0.4px;
  color: var(--text-muted);
}
@keyframes studio-shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -100% 0; }
}
@keyframes studio-spark {
  0%, 100% { transform: scale(1) rotate(0deg); opacity: 0.85; }
  50%      { transform: scale(1.25) rotate(180deg); opacity: 1; }
}
/* Reveal wrapper that fades the composition in once the loader resolves. */
.studio-reveal { position: absolute; inset: 0; animation: studio-fade-in 280ms ease-out; }
@keyframes studio-fade-in {
  from { opacity: 0; transform: scale(0.985); }
  to   { opacity: 1; transform: scale(1); }
}
.studio-vignette {
  position: absolute; inset: 0;
  background: radial-gradient(ellipse at center, rgba(0,0,0,0) 45%, rgba(0,0,0,0.5) 100%);
  pointer-events: none;
}
.studio-hero {
  /* The uploaded hero PNG is pre-sized to the canvas: it's a transparent PNG with the
     car already positioned correctly for its aspect ratio. Overlay it 1:1 on top of
     the background — no rescaling box, no bottom-anchored fit. */
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: contain;
  object-position: center;
  pointer-events: none;
}
.studio-hero-placeholder {
  position: absolute; inset: 18% 10% 28%;
  border: 1px dashed rgba(255,255,255,0.6); border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-weight: 600; letter-spacing: 0.3px;
  background: rgba(0,0,0,0.18);
}
.studio-logo {
  position: absolute; top: 14px;
  background: rgba(255,255,255,0.92); color: var(--brand-indigo);
  font-family: var(--font-brand); font-weight: 700;
  font-size: 12px; letter-spacing: 1.5px;
  padding: 6px 10px; border-radius: 6px;
}
.studio-logo.tl { left: 14px; }
.studio-logo.tr { right: 14px; }
.studio-tagline {
  position: absolute; top: 14px; left: 50%; transform: translateX(-50%);
  max-width: 70%; text-align: center;
  color: #fff;
  font-family: var(--font-brand); font-weight: 700;
  font-size: 18px; letter-spacing: 0.2px;
  text-shadow: 0 2px 6px rgba(0,0,0,0.45);
}
.studio-offer {
  position: absolute; right: 16px; top: 56px;
  text-align: right; color: #fff;
  text-shadow: 0 2px 8px rgba(0,0,0,0.45);
}
.studio-offer-qual { font-size: 11px; letter-spacing: 0.6px; text-transform: uppercase; opacity: 0.85; }
.studio-offer-value { font-family: var(--font-mono); font-size: 30px; font-weight: 700; line-height: 1; color: #FFD86B; }
.studio-offer-label { font-size: 12px; margin-top: 2px; font-weight: 500; }
.studio-dealer {
  position: absolute; left: 0; right: 0; bottom: 14px;
  text-align: center; color: #fff;
  text-shadow: 0 2px 6px rgba(0,0,0,0.55);
}
.studio-dealer-name { font-weight: 700; font-size: 14px; }
.studio-dealer-phone { font-family: var(--font-mono); font-weight: 600; font-size: 15px; margin-top: 1px; }
.studio-dealer-addr { font-size: 11px; opacity: 0.9; margin-top: 1px; padding: 0 16px; line-height: 1.3; }

/* DCS Admin — product grid + background grid */
.studio-admin-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 14px;
}
.studio-admin-grid.sm { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.studio-admin-card {
  background: #fff;
  border: 0.5px solid var(--border-soft);
  border-radius: 10px;
  box-shadow: var(--shadow-card);
  overflow: hidden;
  cursor: pointer;
  transition: outline-color 120ms, transform 120ms;
}
.studio-admin-card:hover { outline: 1px solid var(--brand-blue); outline-offset: -1px; }
.studio-admin-thumb {
  position: relative;
  width: 100%; aspect-ratio: 4/3;
  /* `contain` (not `cover`) so the full vehicle is shown on the catalog tile —
     uploaded poses have transparent padding; `cover` cropped them mid-body. */
  background: #F2F8FF center/contain no-repeat;
}
.studio-admin-thumb-empty {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  color: var(--text-muted); font-size: 12px;
  background: repeating-linear-gradient(45deg, #F2F8FF 0 8px, #E5F1FF 8px 16px);
}
.studio-admin-meta { padding: 10px 12px; }
.studio-admin-name { font-size: 13px; font-weight: 600; color: var(--text); }
.studio-admin-sub { font-size: 11px; color: var(--text-muted); margin-top: 2px; }
.studio-admin-stat {
  display: flex; flex-wrap: wrap; gap: 4px;
  margin-top: 6px;
}
.studio-admin-stat .pill { font-size: 10px; padding: 1px 6px; }

/* DCS Admin — upload slots & action buttons (theme-aligned with brand-blue + border-soft) */
.studio-upload-slot { display: flex; flex-direction: column; gap: 6px; }
.studio-upload-tile {
  position: relative;
  width: 100%; aspect-ratio: 4/3;
  border: 1px dashed var(--border-soft);
  border-radius: var(--radius-ctrl);
  background: #FAFCFF center/cover no-repeat;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: border-color 120ms, background-color 120ms, box-shadow 120ms;
}
.studio-upload-tile:hover {
  border-color: var(--brand-blue);
  background-color: var(--bg-page);
  box-shadow: 0 0 0 3px rgba(0,112,252,0.10);
}
.studio-upload-tile.has-image {
  border-style: solid;
  border-color: var(--border-soft);
}
.studio-upload-tile.uploading::after {
  content: "Uploading…";
  position: absolute; inset: 0;
  background: rgba(242,248,255,0.92);
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 600; color: var(--brand-blue);
  border-radius: var(--radius-ctrl);
}
.studio-upload-placeholder {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  font-size: 12px; font-weight: 500; color: var(--text-muted);
  padding: 4px 8px; text-align: center;
}
.studio-upload-plus {
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--brand-blue); color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 22px; font-weight: 400; line-height: 1;
}

/* Overlay action buttons — theme-styled pills, surfaced on hover */
.studio-upload-overlay {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 8px; display: flex; gap: 6px; justify-content: flex-end; flex-wrap: wrap;
  background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.45) 100%);
  opacity: 0; transition: opacity 120ms;
  border-bottom-left-radius: var(--radius-ctrl);
  border-bottom-right-radius: var(--radius-ctrl);
}
.studio-upload-tile.has-image:hover .studio-upload-overlay,
.studio-bg-card:hover .studio-upload-overlay { opacity: 1; }
.studio-upload-action {
  background: #fff;
  border-radius: var(--radius-ctrl);
  padding: 4px 10px;
  font-size: 11px; font-weight: 500;
  box-shadow: 0 1px 2px rgba(14, 11, 26, 0.12);
}
.studio-upload-action:hover { filter: brightness(0.96); }
.studio-bg-remove { /* sits at the bottom-right of the bg thumb */ }

/* "Staged" badge — shown when a file is staged locally but not yet committed to the server */
.studio-staged-badge {
  position: absolute; top: 6px; left: 6px;
  font-size: 9px; padding: 2px 6px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  box-shadow: 0 1px 2px rgba(14, 11, 26, 0.18);
}

/* Default-variant radio toggle — looks like a pill, not a raw radio */
.studio-default-variant-toggle {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 12px;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-pill);
  font-size: 12px; font-weight: 500;
  color: var(--brand-blue);
  background: #fff;
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
}
.studio-default-variant-toggle:hover { background: var(--bg-page); }
.studio-default-variant-toggle.is-on {
  background: var(--brand-blue); color: #fff;
  border-color: var(--brand-blue); font-weight: 600;
}
.studio-default-variant-toggle input { display: none; }

/* Tighter default-slot — square only, smaller max */
/* Default side-pose tile: full car must fit inside, no cropping or stretching.
   The source PNG often carries transparent padding around the car — `contain`
   keeps the proportions and lets the tile background show around it. */
.studio-default-slot .studio-upload-tile {
  width: 260px; max-width: 100%;
  aspect-ratio: 16 / 10;
  background-color: #FAFCFF;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}

/* Variant editor row (single-aspect — legacy, kept for safety) */
.studio-variant-row {
  display: flex; gap: 14px; align-items: flex-start;
  padding: 12px 0; border-top: 0.5px solid var(--border-soft);
}
.studio-variant-row:first-of-type { border-top: none; padding-top: 0; }

/* Variant block — name on top, three aspect-ratio tiles below */
.studio-variant-block {
  padding: 14px 0;
  border-top: 0.5px solid var(--border-soft);
}
.studio-variant-block:first-of-type { border-top: none; padding-top: 0; }

/* Aspect-ratio row of three upload tiles */
.studio-aspect-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}
@media (max-width: 720px) { .studio-aspect-row { grid-template-columns: 1fr; } }
.studio-aspect-slot { display: flex; flex-direction: column; gap: 6px; }
.studio-aspect-header { display: flex; align-items: baseline; justify-content: space-between; gap: 6px; }
.studio-aspect-name { font-size: 12px; font-weight: 600; color: var(--text); }
.studio-aspect-dim  { font-size: 10px; color: var(--text-muted); font-family: var(--font-mono); }

/* The aspect upload tile inherits .studio-upload-tile sizing, then overrides for each ratio */
.studio-aspect-slot .studio-upload-tile { width: 100%; }
.studio-aspect-slot .studio-upload-tile.aspect-square    { aspect-ratio: 1 / 1; }
.studio-aspect-slot .studio-upload-tile.aspect-landscape { aspect-ratio: 1200 / 628; }
.studio-aspect-slot .studio-upload-tile.aspect-portrait  { aspect-ratio: 960 / 1200; }

/* ---------- Brand template editor ---------- */
.tpl-chip {
  display: inline-flex; align-items: center; gap: 12px;
  padding: 10px 14px;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-ctrl);
  background: #fff;
}
.tpl-chip.active { border-color: var(--brand-blue); box-shadow: 0 0 0 2px rgba(0,112,252,0.10); }
.tpl-chip.editing { background: var(--bg-page); }

.tpl-toggle-grid {
  display: grid; gap: 10px;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
}
/* Translation section is short enough to always fit on one row. */
.tpl-toggle-grid.tpl-toggle-grid-row {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
@media (max-width: 720px) {
  .tpl-toggle-grid.tpl-toggle-grid-row {
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  }
}
.tpl-toggle {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 10px 12px;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-ctrl);
  background: #fff;
  cursor: pointer;
}
.tpl-toggle input[type="checkbox"] { margin-top: 2px; accent-color: var(--brand-blue); }
.tpl-toggle:hover { background: var(--bg-page); }

.tpl-logo-tile {
  position: relative;
  width: 100%; max-width: 320px; aspect-ratio: 170 / 56;
  border: 1px dashed var(--border-soft);
  border-radius: var(--radius-ctrl);
  /* Light grey solid — visible against both white and dark transparent logos. */
  background: #D9DEE6 center/contain no-repeat;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: border-color 120ms, background-color 120ms, box-shadow 120ms;
}
.tpl-logo-tile:hover { border-color: var(--brand-blue); box-shadow: 0 0 0 3px rgba(0,112,252,0.10); }
/* Once a logo is uploaded, the tile shows a checker-pattern background so transparent
   PNGs with white content stay visible against the surrounding white form. The actual
   logo image is layered on a child .tpl-logo-tile-img element above it. */
.tpl-logo-tile.has-image {
  border-style: solid; border-color: var(--border-soft);
  background-color: #E5EAF0;
  background-image:
    linear-gradient(45deg, #C8CDD6 25%, transparent 25%),
    linear-gradient(-45deg, #C8CDD6 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, #C8CDD6 75%),
    linear-gradient(-45deg, transparent 75%, #C8CDD6 75%);
  background-size: 14px 14px;
  background-position: 0 0, 0 7px, 7px -7px, -7px 0;
}
.tpl-logo-tile-img {
  position: absolute; inset: 6px;
  background: center/contain no-repeat;
  pointer-events: none;
}
.tpl-logo-tile.has-image:hover .studio-upload-overlay { opacity: 1; }
.tpl-logo-tile.uploading::after {
  content: "Uploading…";
  position: absolute; inset: 0;
  background: rgba(242,248,255,0.92);
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 600; color: var(--brand-blue);
  border-radius: var(--radius-ctrl);
}

/* ---------- Template page: list cards (default view) ---------- */
.tpl-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 14px;
}
.tpl-card {
  display: flex; flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-card);
  overflow: hidden;
  cursor: pointer;
  transition: border-color 0.15s, box-shadow 0.15s, transform 0.15s;
}
.tpl-card:hover {
  border-color: var(--brand-blue);
  box-shadow: 0 4px 12px rgba(14, 11, 26, 0.10);
  transform: translateY(-1px);
}
.tpl-card.active {
  border-color: var(--brand-blue);
  box-shadow: 0 0 0 2px rgba(0, 112, 252, 0.12);
}
.tpl-card-thumb {
  width: 100%; aspect-ratio: 1 / 1;
  background: #1A1230;
  overflow: hidden;
}
.tpl-card-thumb svg { display: block; width: 100%; height: 100%; }
.tpl-card-body { padding: 12px; display: flex; flex-direction: column; gap: 10px; }
.tpl-card-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.tpl-card-name { font-size: 14px; font-weight: 600; color: var(--text); }
.tpl-card-badge {
  font-size: 10px; font-weight: 600; letter-spacing: 0.4px;
  text-transform: uppercase;
  color: var(--brand-blue);
  background: rgba(0, 112, 252, 0.08);
  padding: 3px 8px; border-radius: 10px;
  white-space: nowrap;
}
.tpl-card-badge.muted { color: var(--text-muted); background: var(--bg-page); }
.tpl-card-actions { display: flex; gap: 6px; flex-wrap: wrap; }

/* ---------- Template page: editor (form + preview) ---------- */
.tpl-form-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 420px);
  gap: 16px;
  align-items: start;
}
@media (max-width: 1100px) {
  .tpl-form-row { grid-template-columns: 1fr; }
}
.tpl-editor-head {
  display: flex; align-items: center; gap: 12px;
  padding-bottom: 12px; margin-bottom: 14px;
  border-bottom: 1px solid var(--border-soft);
}
.tpl-back-btn {
  display: inline-flex; align-items: center; gap: 6px;
  background: transparent; border: 1px solid var(--border-soft);
  color: var(--brand-blue);
  font-size: 12px; font-weight: 500;
  padding: 6px 10px; border-radius: 8px;
  cursor: pointer;
}
.tpl-back-btn:hover { background: var(--bg-page); }
.tpl-back-btn svg { display: block; }
.tpl-editor-title {
  font-size: 14px; font-weight: 600; color: var(--text);
}

#tpl-previews-card {
  position: sticky; top: 16px;
  max-height: calc(100vh - 32px);
  overflow-y: auto;
}
.tpl-aspect-tabs { gap: 4px; }
.tpl-zoom-btn { display: inline-flex; align-items: center; gap: 6px; }
.tpl-zoom-btn svg { display: block; }

.tpl-preview-tile {
  background: #0E0B1A; border-radius: var(--radius-ctrl);
  padding: 8px; display: flex; flex-direction: column; gap: 6px;
}
.tpl-preview-tile.tpl-preview-big { padding: 10px; }
.tpl-preview-meta {
  font-size: 11px; font-weight: 500;
  color: rgba(255,255,255,0.72);
  text-align: center;
  padding: 4px 2px 0;
}
.tpl-preview-frame {
  width: 100%; overflow: hidden; border-radius: 6px;
  background: #1A1230; margin: 0 auto;
}
.tpl-preview-frame svg { display: block; }
.tpl-preview-big.tpl-preview-square    .tpl-preview-frame { aspect-ratio: 1 / 1;      max-width: 380px; }
.tpl-preview-big.tpl-preview-portrait  .tpl-preview-frame { aspect-ratio: 4 / 5;      max-width: 320px; }
.tpl-preview-big.tpl-preview-landscape .tpl-preview-frame { aspect-ratio: 1200 / 628; max-width: 100%; }

/* ---------- Zoom modal ---------- */
.tpl-zoom-body { padding: 0 24px 24px; display: flex; justify-content: center; }
.tpl-zoom-frame { width: 100%; background: #1A1230; border-radius: 8px; overflow: hidden; }
.tpl-zoom-frame svg { display: block; }
.tpl-zoom-square    { max-width: 720px;  aspect-ratio: 1 / 1; }
.tpl-zoom-portrait  { max-width: 580px;  aspect-ratio: 4 / 5; }
.tpl-zoom-landscape { max-width: 1100px; aspect-ratio: 1200 / 628; }

/* ---------- Dealer Library (saved Studio compositions) ---------- */
.lib-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 16px;
}
.lib-tile {
  background: var(--surface);
  border: 0.5px solid var(--border-soft);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  overflow: hidden;
  transition: transform 150ms, box-shadow 150ms;
}
.lib-tile:hover { transform: translateY(-2px); box-shadow: 0 4px 14px rgba(14,11,26,0.12); }
.lib-tile-thumb {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  background: #0E0B1A;
  cursor: zoom-in;
  overflow: hidden;
}
.lib-tile-thumb svg { display: block; width: 100%; height: 100%; }
.lib-tile-hover {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  background: rgba(14,11,26,0.55);
  color: #fff; font-size: 14px; font-weight: 600; letter-spacing: 0.2px;
  opacity: 0; transition: opacity 140ms;
}
.lib-tile-thumb:hover .lib-tile-hover { opacity: 1; }
.lib-tile-fallback {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  color: rgba(255,255,255,0.55); font-size: 12px;
}
.lib-tile-meta { padding: 10px 14px 12px; }
.lib-tile-name {
  font-size: 13px; font-weight: 600; color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.lib-tile-sub {
  font-size: 11px; color: var(--text-muted);
  margin-top: 2px;
}
.lib-tile-actions {
  display: flex; gap: 6px; margin-top: 10px;
}

/* Library empty state */
.lib-empty {
  text-align: center;
  padding: 56px 32px;
}
.lib-empty-icon { font-size: 48px; margin-bottom: 12px; }
.lib-empty-title {
  font-size: 18px; font-weight: 700; color: var(--text);
  margin: 0 0 8px;
}
.lib-empty-body {
  font-size: 13px; color: var(--text-muted);
  max-width: 520px; margin: 0 auto 20px;
}
.lib-empty-cta { display: flex; justify-content: center; }

/* ---------- Creative Agent (chat-left / preview-right) ---------- */
.agent-layout {
  display: grid;
  /* Preview is the product — give it more room. Chat narrows on wider screens
     but stays readable; below 1100px we collapse the side-by-side to stacked. */
  grid-template-columns: minmax(0, 1fr) minmax(420px, 560px);
  gap: 18px;
  align-items: start;
}
@media (max-width: 980px) {
  .agent-layout { grid-template-columns: 1fr; }
}

/* Left column — chat panel, fills viewport height for scrollable transcript. */
.agent-chat-col { min-width: 0; }
.agent-chat-card {
  display: flex; flex-direction: column;
  min-height: calc(100vh - 200px);
  max-height: calc(100vh - 140px);
  padding: 16px 18px;
}
.agent-chat-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; margin-bottom: 10px;
}
.agent-chat-hint { font-size: 11px; color: var(--text-muted); }

/* "New chat" button — explicit hard reset in the chat head. Subtle on default,
   slightly emphasised on hover. Sits opposite the "CHAT" label. */
.agent-new-chat-btn {
  display: inline-flex; align-items: center; gap: 6px;
  background: transparent;
  border: 1px solid var(--border-soft);
  color: var(--brand-blue);
  font-size: 11px; font-weight: 600;
  padding: 5px 10px; border-radius: 999px;
  cursor: pointer; font-family: var(--font-body);
  transition: background 120ms, border-color 120ms;
}
.agent-new-chat-btn:hover {
  background: rgba(0, 112, 252, 0.06);
  border-color: var(--brand-blue);
}
.agent-new-chat-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 14px; height: 14px; border-radius: 50%;
  background: var(--brand-blue); color: #fff;
  font-size: 12px; line-height: 1; font-weight: 700;
}
.agent-chat-log {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 4px 2px 8px;
  display: flex; flex-direction: column; gap: 10px;
  border-top: 0.5px solid var(--border-soft);
  border-bottom: 0.5px solid var(--border-soft);
  margin: 0 -2px;
  background: linear-gradient(to bottom, rgba(242,248,255,0.3), transparent 40px);
}
.agent-chat-compose {
  display: flex; flex-direction: column; gap: 8px;
  padding-top: 10px;
}
.agent-chat-input {
  width: 100%;
  border: 1px solid var(--border-soft);
  border-radius: 8px;
  padding: 9px 12px;
  font-size: 14px; line-height: 1.45;
  resize: vertical;
  min-height: 44px; max-height: 160px;
  font-family: var(--font-body);
}
.agent-chat-input:focus {
  outline: none; border-color: var(--brand-blue);
  box-shadow: 0 0 0 3px rgba(0,112,252,0.10);
}
.agent-status {
  min-height: 16px;
  display: inline-flex; align-items: center; gap: 8px;
}
.agent-status.agent-status-active::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: var(--brand-blue);
  animation: agent-pulse 1.2s ease-in-out infinite;
}
@keyframes agent-pulse {
  0%, 100% { opacity: 0.35; transform: scale(0.85); }
  50%      { opacity: 1;    transform: scale(1.15); }
}

/* Message bubbles */
.agent-msg { max-width: 90%; display: flex; flex-direction: column; gap: 4px; }
.agent-msg-body { white-space: pre-wrap; line-height: 1.5; }
.agent-msg-user {
  align-self: flex-end;
  background: var(--brand-blue);
  color: #fff;
  padding: 8px 12px; border-radius: 12px 12px 2px 12px;
  font-size: 13px;
}
.agent-msg-assistant {
  align-self: flex-start;
  background: #F2F8FF;
  color: var(--text);
  padding: 8px 12px; border-radius: 12px 12px 12px 2px;
  font-size: 13px;
  border: 0.5px solid var(--border-soft);
}
.agent-msg-tool {
  align-self: flex-start;
  font-size: 11px; color: var(--text-muted);
  font-family: var(--font-mono);
  padding: 2px 8px; border-radius: 4px;
  background: rgba(14, 11, 26, 0.04);
  display: inline-flex; gap: 6px; align-items: center;
}
.agent-msg-tag {
  font-size: 9px; letter-spacing: 0.6px; text-transform: uppercase;
  color: var(--brand-blue); font-weight: 700;
}
.agent-msg-tool-text { color: var(--text-muted); }
.agent-msg-error {
  align-self: flex-start;
  background: rgba(217,52,43,0.08); color: var(--danger);
  border: 1px solid rgba(217,52,43,0.30);
  padding: 8px 12px; border-radius: 8px;
  font-size: 12px;
}

/* Right column — preview pane, sticky just like /studio. Right-click and
   image-drag are blocked in JS; these CSS rules add visual + selection
   reinforcement so the dealer can't bypass the Download button. */
.agent-preview-col {
  position: sticky; top: 18px;
  -webkit-user-select: none; user-select: none;
}
.agent-preview-col img,
.agent-preview-col svg image {
  -webkit-user-drag: none; user-drag: none;
  pointer-events: none;
}
.agent-preview-card { padding: 16px 18px; }
.agent-preview-body {
  display: flex; flex-direction: column; gap: 12px; margin-top: 6px;
}
.agent-preview-bottom {
  display: grid; grid-template-columns: 5fr 4fr; gap: 12px;
}
.agent-preview-tile {
  background: #F2F8FF;
  border: 0.5px solid var(--border-soft);
  border-radius: 10px; overflow: hidden;
  position: relative;
}
.agent-preview-landscape { aspect-ratio: 1200 / 628; }
.agent-preview-square    { aspect-ratio: 1 / 1; }
.agent-preview-portrait  { aspect-ratio: 4 / 5; }

/* ---------- Ghost tiles — used for both empty AND busy states. Same DOM, the
   .agent-preview-ghost-empty / .agent-preview-ghost-busy class flips the look. ---------- */
.agent-preview-ghost {
  display: flex; flex-direction: column; gap: 12px;
}
.agent-preview-ghost .agent-preview-tile {
  background: var(--bg-page);
  border: 1px dashed var(--border-soft);
}
/* Empty: still tiles, soft dashed border, no motion. */
.agent-preview-ghost-empty .agent-preview-tile {
  background:
    repeating-linear-gradient(45deg,
      rgba(204, 227, 255, 0.20) 0 8px,
      rgba(204, 227, 255, 0.40) 8px 16px);
}
/* Busy: the same tiles get a slow left-to-right shimmer + a scan-line glow on top.
   This is the canonical "AI is composing" cue from Lovable / v0 / Cursor. */
.agent-preview-ghost-busy .agent-preview-tile {
  position: relative; overflow: hidden;
  background:
    linear-gradient(90deg,
      var(--bg-page) 0%, rgba(0, 112, 252, 0.10) 50%, var(--bg-page) 100%);
  background-size: 200% 100%;
  animation: agent-shimmer 1.6s ease-in-out infinite;
  border-color: var(--brand-blue);
  border-style: solid; border-width: 0.5px;
}
@keyframes agent-shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* Empty-state caption + sample prompt chips */
.agent-preview-empty-cap {
  text-align: center; padding: 12px 6px 2px;
}
.agent-preview-empty-title {
  font-size: 14px; font-weight: 600; color: var(--text); margin-bottom: 4px;
}
.agent-preview-empty-sub {
  font-size: 12px; color: var(--text-muted);
  line-height: 1.55; max-width: 420px; margin: 0 auto 14px;
}
.agent-preview-empty-prompts {
  display: flex; flex-wrap: wrap; gap: 6px; justify-content: center;
}

/* Post-creation action chips — appear once the agent has filled productId + bgId
   so the dealer sees the two next steps clearly: save the result, or download it.
   Two visible buttons just above the textarea, side-by-side. */
.agent-actions {
  display: flex; flex-direction: column; gap: 6px;
  margin-bottom: 4px;
  padding-bottom: 8px;
  border-bottom: 0.5px dashed var(--border-soft);
}
.agent-actions-label {
  font-size: 10px; color: var(--text-muted);
  letter-spacing: 0.6px; text-transform: uppercase; font-weight: 600;
}
.agent-actions-list {
  display: flex; flex-wrap: wrap; gap: 6px; align-items: center;
}
.agent-action-chip {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--surface);
  border: 1px solid var(--brand-blue);
  color: var(--brand-blue);
  font-size: 12px; font-weight: 600;
  padding: 7px 14px; border-radius: 999px;
  cursor: pointer; font-family: var(--font-body);
  transition: background 120ms, color 120ms, transform 80ms;
}
.agent-action-chip:hover { background: rgba(0, 112, 252, 0.08); }
.agent-action-chip:active { transform: translateY(1px); }
.agent-action-chip:disabled { opacity: 0.5; cursor: not-allowed; }
.agent-action-primary {
  background: var(--brand-blue); color: #fff;
}
.agent-action-primary:hover {
  background: var(--brand-blue); color: #fff;
  filter: brightness(0.95);
  box-shadow: 0 2px 6px rgba(0,112,252,0.25);
}
.agent-action-icon { font-size: 13px; line-height: 1; }

/* While the agent is mid-turn the chips would act on a stale/in-flight state.
   Grey them out and block clicks — re-enabled the moment setBusy(false) lifts
   the .agent-actions-busy class. */
.agent-actions-busy {
  position: relative;
}
.agent-actions-busy .agent-action-chip {
  opacity: 0.45;
  pointer-events: none;
  cursor: not-allowed;
  filter: grayscale(0.4);
}
.agent-actions-busy .agent-actions-label::after {
  content: " · updating…";
  color: var(--brand-blue);
  font-weight: 500;
}

/* Sample-prompt chips — sit INSIDE the compose section, just above the textarea,
   so the dealer's eye is already on the input area when they see suggestions.
   Auto-removed once they send their first message. */
.agent-suggestions {
  display: flex; flex-direction: column; gap: 6px;
  margin-bottom: 4px;
  padding-bottom: 8px;
  border-bottom: 0.5px dashed var(--border-soft);
}
.agent-suggestions-label {
  font-size: 10px; color: var(--text-muted);
  letter-spacing: 0.6px; text-transform: uppercase; font-weight: 600;
}
.agent-suggestions-list {
  display: flex; flex-wrap: wrap; gap: 5px; align-items: flex-start;
}
.agent-prompt-chip {
  background: var(--surface);
  border: 1px solid var(--border-soft);
  color: var(--brand-blue);
  font-size: 11px; font-weight: 500;
  padding: 6px 11px; border-radius: 999px;
  cursor: pointer; text-align: left;
  transition: background 120ms, border-color 120ms, transform 80ms;
  font-family: var(--font-body);
  max-width: 100%;
}
.agent-prompt-chip:hover {
  background: rgba(0, 112, 252, 0.06);
  border-color: var(--brand-blue);
}
.agent-prompt-chip:active { transform: translateY(1px); }

/* Busy-state caption — heartbeat dot + gerund label */
.agent-preview-busy-cap {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  margin-top: 10px;
  font-size: 13px; color: var(--text);
  font-weight: 500;
}
.agent-preview-busy-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--brand-blue);
  animation: agent-pulse 1.2s ease-in-out infinite;
}

/* Active scan-line under the preview block while the agent is still working
   AFTER the first state arrives — soft 2px gradient sweep, ~2s loop, stops the
   moment the "done" event re-renders without this class. */
.agent-preview-block { position: relative; display: flex; flex-direction: column; gap: 12px; }
.agent-preview-block-active::before {
  content: "";
  position: absolute; top: -3px; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg,
    transparent 0%, var(--brand-blue) 50%, transparent 100%);
  background-size: 50% 100%;
  background-repeat: no-repeat;
  animation: agent-scanline 2.2s ease-in-out infinite;
  border-radius: 999px;
  z-index: 2;
}
@keyframes agent-scanline {
  0%   { background-position: -50% 0; opacity: 0.0; }
  20%  { opacity: 1.0; }
  80%  { opacity: 1.0; }
  100% { background-position: 150% 0; opacity: 0.0; }
}

/* Cross-fade when a tile re-renders due to a new state event */
.agent-preview-just-updated { animation: agent-tile-fadein 360ms ease-out; }
@keyframes agent-tile-fadein {
  0%   { opacity: 0.0; transform: translateY(4px); }
  100% { opacity: 1.0; transform: translateY(0); }
}

/* WIP blur — applied while the agent has emitted state but not yet finished
   the turn (no "done" event yet). Reads as "this is still being composed"
   without hiding what the dealer is about to see. */
/* WIP blur is applied to the SVG INSIDE each tile — not the tile itself — so
   the pill (positioned on the block) stays sharp on top. */
.agent-preview-block-wip .agent-preview-tile svg {
  filter: blur(6px) saturate(0.85);
  opacity: 0.92;
  transition: filter 320ms ease-out, opacity 320ms ease-out;
}
/* "Still composing…" pill — implemented as a real DOM element (not a pseudo)
   so it doesn't collide with the scan-line ::before on .agent-preview-block-active.
   Pinned to the geometric centre of the WHOLE preview block (landscape + bottom
   row together). NO opacity pulse — only the green dot pulses, the label stays
   solid. Strong contrast + drop shadow so it reads clearly above the blurred
   tiles even on bright/festive backgrounds. */
.agent-preview-wip-pill {
  position: absolute;
  top: 50%; left: 50%; transform: translate(-50%, -50%);
  display: inline-flex; align-items: center; gap: 8px;
  padding: 11px 20px; border-radius: 999px;
  background: rgba(14, 11, 26, 0.92); color: #fff;
  font-size: 13px; font-weight: 600; letter-spacing: 0.2px;
  z-index: 10; pointer-events: none;
  backdrop-filter: blur(4px);
  box-shadow: 0 6px 20px rgba(14, 11, 26, 0.30);
  white-space: nowrap;
}
.agent-preview-wip-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: #00C158;
  animation: agent-dot-pulse 1.4s ease-in-out infinite;
  flex: 0 0 auto;
}
@keyframes agent-dot-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(0, 193, 88, 0.55); }
  70%  { box-shadow: 0 0 0 8px rgba(0, 193, 88, 0); }
  100% { box-shadow: 0 0 0 0 rgba(0, 193, 88, 0); }
}

/* ---------- Inline build-plan checklist inside the assistant bubble ----------
   While the agent runs, each tool call lands as a pulsing dot. Previous steps
   complete with a checkmark. On "done" the entire list collapses to a one-line
   "Created in X.Xs · N steps ▾" summary that the dealer can re-expand. */
.agent-plan { margin-bottom: 6px; }
.agent-plan-list { display: flex; flex-direction: column; gap: 2px; }
.agent-plan-step {
  display: flex; align-items: center; gap: 8px;
  font-size: 12px; line-height: 1.55;
  padding: 1px 0;
  color: var(--text-muted);
  transition: color 200ms;
}
.agent-plan-dot {
  display: inline-flex; align-items: center; justify-content: center;
  width: 14px; height: 14px; border-radius: 50%;
  font-size: 10px; font-weight: 700;
  background: var(--bg-page); color: var(--text-muted);
  border: 1px solid var(--border-soft);
}
.agent-plan-step-active .agent-plan-dot {
  background: var(--brand-blue);
  border-color: var(--brand-blue);
  color: #fff;
  animation: agent-pulse 1.2s ease-in-out infinite;
}
.agent-plan-step-active .agent-plan-text { color: var(--brand-indigo); font-weight: 500; }
.agent-plan-step-done .agent-plan-dot {
  background: rgba(0, 193, 88, 0.16);
  border-color: rgba(0, 193, 88, 0.40);
  color: var(--accent-success);
  font-size: 9px;
}
.agent-plan-step-done .agent-plan-text { color: var(--text-muted); }

/* Collapsed: hide the list and show the summary button instead. */
.agent-plan.agent-plan-collapsed .agent-plan-list { display: none; }
.agent-plan-summary {
  display: none;
  align-items: center; gap: 6px;
  background: none; border: none; padding: 4px 0 6px;
  font-family: var(--font-body); font-size: 11px;
  color: var(--text-muted); cursor: pointer;
  text-align: left;
}
.agent-plan.agent-plan-collapsed .agent-plan-summary { display: inline-flex; }
.agent-plan-summary-icon {
  display: inline-flex; width: 12px; height: 12px; border-radius: 50%;
  background: rgba(0, 193, 88, 0.16); color: var(--accent-success);
  font-size: 8px; font-weight: 700;
  align-items: center; justify-content: center;
}
.agent-plan-summary:hover .agent-plan-summary-text { color: var(--text); }
.agent-plan-summary-caret { font-size: 10px; opacity: 0.6; }
.agent-plan.agent-plan-collapsed:hover .agent-plan-summary-caret { opacity: 1; }

/* ===== Admin: Layouts editor ===== */
.lay-editor { margin-top: 8px; }
.lay-tabs { display: flex; gap: 8px; margin-bottom: 16px; }
.lay-aspects-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
.tab.tab-sm { padding: 4px 12px; font-size: 12px; }
.lay-body { display: flex; gap: 28px; align-items: flex-start; flex-wrap: wrap; }
.lay-stage {
  position: relative; flex: 0 0 auto;
  background:
    linear-gradient(0deg, rgba(14,0,113,.04), rgba(14,0,113,.04)),
    repeating-linear-gradient(0deg, transparent 0 23px, rgba(14,0,113,.05) 23px 24px),
    repeating-linear-gradient(90deg, transparent 0 23px, rgba(14,0,113,.05) 23px 24px);
  border: 1px solid var(--border-soft, #CCE3FF);
  border-radius: 10px; overflow: hidden;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.4);
}
/* Default staged-scene backdrop behind the slot boxes (first child of .lay-stage).
   pointer-events:none so it never intercepts drags; boxes paint above it by tree order. */
.lay-stage-photo {
  position: absolute; inset: 0; pointer-events: none;
  background-position: center; background-size: cover; background-repeat: no-repeat;
}
.lay-box {
  position: absolute; box-sizing: border-box;
  border: 1.5px solid; border-radius: 4px;
  display: flex; align-items: center; justify-content: center;
  cursor: grab; user-select: none; overflow: hidden;
  transition: box-shadow .12s ease;
}
.lay-box:active { cursor: grabbing; }
.lay-box-label {
  font-size: 9px; font-weight: 700; letter-spacing: .3px; text-transform: uppercase;
  padding: 0 3px; white-space: nowrap; pointer-events: none;
  text-overflow: ellipsis; overflow: hidden; max-width: 100%;
}
.lay-box.lay-text  { border-color: #0070FC; background: rgba(0,112,252,.12);  color: #0a4ea8; }
.lay-box.lay-cta   { border-color: #00C158; background: rgba(0,193,88,.16);   color: #065F46; }
.lay-box.lay-logo  { border-color: #7C3AED; background: rgba(124,58,237,.12); color: #5B21B6; }
.lay-box.lay-hero  { border-color: #F59E0B; background: rgba(245,158,11,.12); color: #92400E; border-style: dashed; }
.lay-box.lay-rect  { border-color: #64748B; background: rgba(100,116,139,.16); color: #334155; }
.lay-box.lay-image { border-color: #0EA5E9; background: rgba(14,165,233,.12); color: #075985; border-style: dashed; }
.lay-box.lay-hidden { opacity: .42; border-style: dotted; }
.lay-box.lay-grouped { outline: 1px dashed rgba(124,58,237,.5); outline-offset: 1px; }
.lay-group-head { display: flex; align-items: center; gap: 6px; margin-top: 8px; padding: 2px 0; }
.lay-group-name { flex: 1 1 auto; min-width: 0; font-size: 12px; font-weight: 600; border: 1px solid var(--border-soft, #CCE3FF); border-radius: 6px; padding: 3px 6px; background: transparent; }
.lay-group-pick { cursor: pointer; color: #7C3AED; font-size: 13px; padding: 0 2px; }
.lay-el-row.lay-el-indent { margin-left: 14px; }
.lay-box.selected  { box-shadow: 0 0 0 2px #fff, 0 0 0 4px currentColor; z-index: 5; overflow: visible; }
/* Resize + rotate handles on the selected element (children of .lay-box). */
.lay-handle { position: absolute; width: 10px; height: 10px; box-sizing: border-box; background: #fff;
  border: 1.5px solid #0070FC; border-radius: 2px; transform: translate(-50%, -50%); z-index: 6; }
.lay-handle-nw, .lay-handle-se { cursor: nwse-resize; }
.lay-handle-ne, .lay-handle-sw { cursor: nesw-resize; }
.lay-handle-n, .lay-handle-s { cursor: ns-resize; }
.lay-handle-e, .lay-handle-w { cursor: ew-resize; }
.lay-rot-handle { position: absolute; left: 50%; top: -22px; width: 12px; height: 12px; transform: translateX(-50%);
  background: #fff; border: 1.5px solid #7C3AED; border-radius: 50%; cursor: grab; z-index: 6; }
.lay-rot-handle::before { content: ""; position: absolute; left: 50%; top: 11px; width: 1.5px; height: 11px;
  background: #7C3AED; transform: translateX(-50%); }
/* Element list + toolbar in the editor panel */
.lay-frozen-note { font-size: 12px; line-height: 1.4; color: #92400E; background: rgba(245,158,11,.10);
  border: 1px solid rgba(245,158,11,.4); border-radius: 8px; padding: 8px 10px; margin-bottom: 10px; }
.lay-el-list { border-top: 1px solid var(--border-soft, #CCE3FF); padding-top: 10px; }
.lay-el-row { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 7px; cursor: pointer; font-size: 13px; }
.lay-el-row:hover { background: rgba(0,112,252,.06); }
.lay-el-row.active { background: rgba(0,112,252,.12); font-weight: 600; }
.lay-el-name { flex: 1 1 auto; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lay-el-z { font-size: 11px; color: #64748B; font-variant-numeric: tabular-nums; }
.lay-el-hidden { font-size: 10px; text-transform: uppercase; letter-spacing: .3px; color: #92400E;
  background: rgba(245,158,11,.16); border-radius: 4px; padding: 1px 5px; }
.lay-el-forced-vis { font-size: 10px; text-transform: uppercase; letter-spacing: .3px; color: #065F46;
  background: rgba(0,193,88,.14); border-radius: 4px; padding: 1px 5px; }
.lay-el-vis-toggle { margin: 0; flex-shrink: 0; }
.lay-panel {
  flex: 1 1 280px; min-width: 260px;
  background: var(--surface, #fff); border: 1px solid var(--border-soft, #CCE3FF);
  border-radius: 10px; padding: 16px;
}
.lay-num { width: 84px; }
.lay-num input { width: 100%; }

/* ===== Admin: Layouts library ===== */
.lay-grid {
  display: grid; gap: 16px; margin-top: 8px;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
}
.lay-card {
  display: flex; flex-direction: column;
  background: var(--surface, #fff); border: 1px solid var(--border-soft, #CCE3FF);
  border-radius: 12px; overflow: hidden;
}
.lay-card-preview {
  display: flex; align-items: center; justify-content: center;
  padding: 14px; background: rgba(14,0,113,.02); border-bottom: 1px solid var(--border-soft, #CCE3FF);
}
/* The mini preview is a static thumbnail — its boxes aren't draggable. */
.lay-stage-mini .lay-box { cursor: default; border-width: 1px; border-radius: 2px; }
.lay-card-body { display: flex; flex-direction: column; gap: 10px; padding: 14px; }
.lay-card-title { font-weight: 700; font-size: 15px; display: flex; align-items: center; gap: 8px; justify-content: space-between; }
.lay-card-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.lay-card-sub { font-size: 12px; color: var(--text-muted, #6B7280); }
.lay-source {
  font-size: 10px; font-weight: 700; letter-spacing: .3px; text-transform: uppercase;
  padding: 2px 8px; border-radius: 999px;
  background: rgba(14,0,113,.06); color: var(--text-muted, #6B7280);
}
.lay-source-figma { background: rgba(124,58,237,.12); color: #5B21B6; }
.lay-apply-row { display: flex; gap: 8px; align-items: center; }
.lay-apply-select {
  flex: 1 1 auto; min-width: 0; padding: 6px 8px; font-size: 13px;
  border: 1px solid var(--border-soft, #CCE3FF); border-radius: 8px; background: #fff;
}
.lay-card-actions { display: flex; gap: 8px; justify-content: space-between; }
.lay-name-input {
  font-size: 22px; font-weight: 700; padding: 4px 8px; margin: -4px -8px 2px;
  border: 1px solid transparent; border-radius: 8px; background: transparent; width: 100%; max-width: 420px;
}
.lay-name-input:hover { border-color: var(--border-soft, #CCE3FF); }
.lay-name-input:focus { border-color: var(--brand-blue, #0070FC); background: #fff; outline: none; }
.lay-chip {
  font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 999px;
  background: rgba(0,112,252,.10); color: var(--brand-blue, #0070FC);
}
/* Draft / Active / Inactive lifecycle pill */
.status-chip {
  font-size: 10px; font-weight: 700; letter-spacing: .4px; text-transform: uppercase;
  padding: 2px 8px; border-radius: 999px; white-space: nowrap;
}
.status-draft    { background: rgba(100,116,139,.16); color: #475569; }
.status-active   { background: rgba(0,193,88,.16);   color: #047857; }
.status-inactive { background: rgba(148,163,184,.20); color: #64748b; }
.tpl-toggle.disabled { opacity: .55; }
.tpl-card-sub { font-size: 11px; color: var(--text-muted, #6B7280); margin-top: 3px; }
.lay-count { margin-left: auto; font-size: 12px; font-weight: 600; color: var(--text-muted, #6B7280); white-space: nowrap; }

/* ===== Admin: Lineage report ===== */
.lin-layout { padding: 14px 16px; margin-bottom: 14px; }
.lin-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.lin-name { font-weight: 600; }
.lin-name.strong { font-size: 16px; font-weight: 700; }
.lin-count { margin-left: auto; font-size: 12px; color: var(--text-muted, #6B7280); white-space: nowrap; }
.lin-node { margin: 10px 0 2px 6px; border-left: 2px solid var(--border-soft, #CCE3FF); padding: 8px 0 2px 14px; }
.lin-cfg { display: flex; align-items: center; gap: 8px; margin-top: 6px; padding: 4px 0 4px 14px; }
.lin-cfg .lin-name { font-weight: 400; font-size: 13px; }
.lin-empty { font-size: 12px; color: var(--text-muted, #6B7280); padding: 6px 0 2px 14px; margin-left: 6px; border-left: 2px dashed var(--border-soft, #CCE3FF); }
.lin-badge {
  font-size: 10px; font-weight: 700; letter-spacing: .3px; text-transform: uppercase;
  padding: 2px 7px; border-radius: 6px; white-space: nowrap;
}
.lin-badge-layout { background: rgba(124,58,237,.14); color: #5B21B6; }
.lin-badge-tpl    { background: rgba(0,112,252,.12); color: #0a4ea8; }
.lin-badge-cfg    { background: rgba(0,193,88,.16); color: #065F46; }

/* ===== Product list (brand view) ===== */
.product-list { display: flex; flex-direction: column; }
.product-list-row { display: flex; align-items: center; gap: 12px; padding: 12px 4px; border-bottom: 1px solid var(--border-soft); cursor: pointer; transition: background .1s; border-radius: 6px; }
.product-list-row:last-child { border-bottom: none; }
.product-list-row:hover { background: var(--hover); }
.product-list-name { font-weight: 600; font-size: 14px; color: var(--text); flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.product-list-cat { font-size: 12px; color: var(--text-muted); width: 140px; flex-shrink: 0; }
.product-list-right { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.product-list-arrow { font-size: 18px; color: var(--text-muted); margin-left: 4px; }

/* ===== Brand Gallery ===== */
.gallery-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; }
.gallery-tile { border: 1px solid var(--border-soft); border-radius: 10px; overflow: hidden; background: var(--surface); display: flex; flex-direction: column; }
.gallery-tile-thumb { position: relative; aspect-ratio: 1 / 1; background-size: cover; background-position: center; background-repeat: no-repeat; background-color: #EEF3FB; }
.gallery-tile-thumb.contain { background-size: contain; }
.gallery-count { position: absolute; top: 6px; right: 6px; background: rgba(15,20,40,.72); color: #fff; font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 999px; }
.gallery-tile-click { cursor: pointer; transition: border-color .15s, box-shadow .15s, transform .05s; }
.gallery-tile-click:hover { border-color: #6D5BD0; box-shadow: 0 4px 16px rgba(109,91,208,.14); transform: translateY(-1px); }
.gallery-tile-sub { font-size: 12px; color: var(--text-muted); }
.gallery-bulk-row-thumb.contain { background-size: contain; background-repeat: no-repeat; }
.gallery-tile-body { padding: 10px; display: flex; flex-direction: column; gap: 8px; }
.gallery-tile-name { font-weight: 600; font-size: 13px; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gallery-chip { display: inline-block; font-size: 11px; padding: 2px 7px; border-radius: 999px; background: #EEF3FB; color: var(--text-muted); }
.gallery-tile-controls { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.gallery-tile-controls select { width: 100%; font-size: 12px; }
.gallery-bulk-rows { display: flex; flex-direction: column; gap: 8px; max-height: 360px; overflow: auto; }
.gallery-bulk-row { display: grid; grid-template-columns: 48px 1fr; gap: 10px; align-items: center; border: 1px solid var(--border-soft); border-radius: 8px; padding: 8px; }
.gallery-bulk-row-thumb { width: 48px; height: 48px; border-radius: 6px; background-size: cover; background-position: center; background-color: #EEF3FB; }
.gallery-bulk-row-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); gap: 6px; }
.gallery-bulk-row-fields select { width: 100%; font-size: 12px; }

/* ===== Gallery: product manager (colour blocks + aspect thumbnails) ===== */
.gallery-colour-block { border: 0.5px solid var(--border-soft); border-radius: 10px; padding: 12px 14px; }
.grp-label { font-size: 12px; color: var(--text-muted); margin: 8px 0 6px; }
.gallery-aspect-row { display: flex; gap: 8px; flex-wrap: wrap; align-items: flex-end; }
.gallery-aspect-thumb { position: relative; background-size: contain; background-position: center; background-repeat: no-repeat; background-color: #EEF3FB; border: 0.5px solid var(--border-soft); border-radius: 8px; }
.gallery-aspect-thumb.thumb-square { width: 76px; height: 76px; }
.gallery-aspect-thumb.thumb-landscape { width: 120px; height: 76px; }
.gallery-aspect-thumb.thumb-portrait { width: 61px; height: 76px; }
.gallery-aspect-thumb .alabel { position: absolute; bottom: 3px; left: 5px; font-size: 10px; color: var(--text-muted); background: rgba(255,255,255,.72); padding: 0 3px; border-radius: 3px; }
.gallery-aspect-thumb .thumb-del { position: absolute; top: 3px; right: 3px; width: 18px; height: 18px; padding: 0; border-radius: 50%; border: none; background: rgba(15,20,40,.6); color: #fff; font-size: 13px; line-height: 18px; text-align: center; cursor: pointer; display: none; }
.gallery-aspect-thumb:hover .thumb-del { display: block; }
.gallery-aspect-thumb.add { display: flex; align-items: center; justify-content: center; width: 61px; height: 76px; border-style: dashed; color: var(--text-muted); font-size: 22px; cursor: pointer; background-color: transparent; }
.gallery-aspect-thumb.add:hover { border-color: #6D5BD0; color: #6D5BD0; }

/* ===== Gallery: image set cards ===== */
.gallery-product-filter { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
.gallery-filter-chip { font-size: 12px; padding: 4px 12px; border-radius: 999px; border: 1px solid var(--border-soft); background: var(--surface); color: var(--text-muted); cursor: pointer; transition: background .12s, color .12s, border-color .12s; }
.gallery-filter-chip:hover { border-color: #6D5BD0; color: #6D5BD0; }
.gallery-filter-chip.active { background: #6D5BD0; border-color: #6D5BD0; color: #fff; }
.gallery-sets-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; }
.gallery-modal-aspects { display: flex; gap: 16px; flex-wrap: wrap; align-items: flex-start; }
.gallery-modal-slot { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.gallery-modal-label { font-size: 11px; color: var(--text-muted); text-transform: capitalize; }
.gallery-aspect-thumb.gallery-modal-thumb { height: 140px; background-color: #EEF3FB; }
.gallery-aspect-thumb.gallery-modal-thumb.thumb-square { width: 140px; }
.gallery-aspect-thumb.gallery-modal-thumb.thumb-landscape { width: 220px; }
.gallery-aspect-thumb.gallery-modal-thumb.thumb-portrait { width: 110px; }
.gallery-set-card { border: 1px solid var(--border-soft); border-radius: 10px; overflow: hidden; background: var(--surface); display: flex; flex-direction: column; }
.gallery-set-header { padding: 10px 12px; display: flex; flex-direction: column; gap: 6px; border-bottom: 1px solid var(--border-soft); }
.gallery-set-meta { display: flex; align-items: center; gap: 8px; min-width: 0; }
.gallery-set-name { font-weight: 600; font-size: 13px; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1 1 auto; min-width: 0; }
.gallery-set-variant { font-weight: 400; color: var(--text-muted); }
.badge-with-bg { display: inline-block; font-size: 10px; padding: 1px 7px; border-radius: 999px; background: rgba(0,193,88,.14); color: #065F46; white-space: nowrap; flex-shrink: 0; }
.badge-without-bg { display: inline-block; font-size: 10px; padding: 1px 7px; border-radius: 999px; background: rgba(109,91,208,.12); color: #4B3AB0; white-space: nowrap; flex-shrink: 0; }
.gallery-tone-tag { font-size: 11px; padding: 1px 7px; border-radius: 999px; background: var(--hover); color: var(--text-muted); white-space: nowrap; }
.gallery-set-slots { display: flex; gap: 8px; padding: 12px; align-items: flex-end; flex-wrap: wrap; }
/* Larger slot thumbs inside set cards (override base sizes) */
.gallery-aspect-thumb.gallery-set-thumb { height: 96px; }
.gallery-aspect-thumb.gallery-set-thumb.thumb-square { width: 96px; }
.gallery-aspect-thumb.gallery-set-thumb.thumb-landscape { width: 150px; }
.gallery-aspect-thumb.gallery-set-thumb.thumb-portrait { width: 76px; }
.gallery-set-slot-empty { border-style: dashed; background-color: transparent !important; display: flex; align-items: center; justify-content: center; font-size: 22px; color: var(--text-muted); cursor: pointer; }
.gallery-set-slot-empty:hover { border-color: #6D5BD0; color: #6D5BD0; }

/* ===== Dealer mode chooser — compact option selector ===== */
.mode-option-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; max-width: 760px; margin: 4px auto 0; }
@media (max-width: 680px) { .mode-option-grid { grid-template-columns: 1fr; } }
.mode-option {
  display: flex; align-items: center; gap: 14px; padding: 16px;
  border: 1.5px solid var(--border-soft); border-radius: 12px; background: var(--surface);
  cursor: pointer; transition: border-color .15s, box-shadow .15s, transform .05s;
}
.mode-option:hover, .mode-option:focus-visible { border-color: #6D5BD0; box-shadow: 0 4px 16px rgba(109,91,208,.15); outline: none; }
.mode-option:active { transform: translateY(1px); }
.mode-option-icon { flex: 0 0 auto; width: 48px; height: 48px; }
.mode-option-icon svg { width: 48px; height: 48px; display: block; }
.mode-option-text { flex: 1 1 auto; min-width: 0; }
.mode-option-label { font-weight: 700; font-size: 14px; color: var(--text); }
.mode-option-sub { font-size: 12.5px; color: var(--text-muted); margin-top: 2px; }
.mode-option-radio { flex: 0 0 auto; width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--border-soft); transition: border-color .15s, box-shadow .15s; }
.mode-option:hover .mode-option-radio, .mode-option:focus-visible .mode-option-radio { border-color: #6D5BD0; box-shadow: inset 0 0 0 3px #6D5BD0; }

/* ===== Dealer model picker — name-only cards (no cover thumbnails) ===== */
.model-name-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); gap: 12px; }
.model-name-card {
  display: flex; flex-direction: column; gap: 3px; justify-content: center; min-height: 62px;
  padding: 14px 16px; border: 1.5px solid var(--border-soft); border-radius: 12px; background: var(--surface);
  cursor: pointer; transition: border-color .15s, box-shadow .15s, transform .05s;
}
.model-name-card:hover, .model-name-card:focus-visible { border-color: #6D5BD0; box-shadow: 0 4px 16px rgba(109,91,208,.14); outline: none; }
.model-name-card:active { transform: translateY(1px); }
.model-name-card-label { font-weight: 700; font-size: 15px; color: var(--text); }
.model-name-card-sub { font-size: 12px; color: var(--text-muted); }
.model-name-card.disabled { opacity: 0.5; cursor: not-allowed; }
.model-name-card.disabled:hover, .model-name-card.disabled:focus-visible { border-color: var(--border-soft); box-shadow: none; transform: none; }