/* Local aliases → Web Design Team tokens. Editing tokens.css cascades to
   every rule below without touching this file. Anything not mapped to a
   WDT token is a purely-editor concern (compact panel surfaces, denser
   radii, tool-density typography) — keeping the fallback keeps the editor
   feeling like a tool rather than a marketing page. */
:root {
  --bg:         var(--wdt-bg,       #f4f4f6);
  --panel:      var(--wdt-surface,  #ffffff);
  /* Tinted panel-alt (blush) so hover states pick up WDT character instead of
     reading as flat grey. */
  --panel-alt:  var(--wdt-surface-tint, #fafafa);
  --border:     var(--wdt-line-2,   #e0e0e4);
  --text:       var(--wdt-ink,      #1a1a1c);
  --muted:      var(--wdt-ink-muted, #6b6b73);
  --accent:     var(--wdt-accent-strong, #e51b15);
  --accent-dark: #b8140f;
  /* Secondary accent — WDT mauve. Used for the Asana / handoff context cues
     (loaded-newsletter bar, per-component comment) so they read as a distinct
     but on-brand channel next to the red primary accent. */
  --accent-2:      var(--wdt-accent,    #995c85);
  --accent-2-tint: var(--gen-purple-01, #f0e7ed);
  --ok:         var(--wdt-success, #1a8f3e);
  --warn:       var(--wdt-warning, #c2750c);
  --danger:     var(--wdt-danger,  #b00020);
  --mono:       var(--font-mono,   ui-monospace, SFMono-Regular, Menlo, monospace);
  /* Chunkier radius (12px) — reads more modern than the previous 6px. Small
     chips/badges keep their own hardcoded 4px so they stay compact. */
  --radius:     var(--r-md,        12px);
  --shadow:     var(--sh-sm,       0 1px 3px rgba(0,0,0,0.08));
  --focus-ring: var(--focus-glow-mauve, 0 0 0 3px rgba(153,92,133,.18));
}

/* Global focus ring — WDT mauve glow instead of the default 2px outline.
   Keeps the accessibility win of a visible focus indicator with a softer,
   more designed look. */
:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
  border-radius: 4px;
}

* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body {
  font-family: var(--font, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif);
  color: var(--text);
  background: var(--bg);
  font-size: 14px;
  display: flex;
  flex-direction: column;
}

/* ─── Toolbar ─────────────────────────────────────────── */
#toolbar {
  min-height: 52px;
  background: var(--panel);
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 16px;
  gap: 8px;
  flex-wrap: nowrap;
}
.tb-left, .tb-right { display: flex; align-items: center; gap: 10px; flex-wrap: nowrap; }
/* Left group absorbs any width shortfall so the right-side actions never wrap. */
.tb-left { flex: 1 1 auto; min-width: 0; }
.tb-left > * { flex: none; }
.tb-right { flex: 0 0 auto; }
#toolbar button { white-space: nowrap; }
/* Semantic clusters within the bar. */
.tb-brand { display: flex; align-items: baseline; gap: 8px; }
.tb-title { font-weight: 700; font-size: 15px; letter-spacing: -0.2px; white-space: nowrap; }
.tb-identity { display: flex; align-items: center; gap: 8px; }
.tb-status { display: flex; align-items: center; gap: 6px; }
.tb-group { display: flex; align-items: center; gap: 6px; }
.tb-group.tb-icons { gap: 2px; }
/* "You're editing" cue — shown while you hold a newsletter's soft lock. */
.tb-lock {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 10px; border-radius: 999px; font-size: 12px; font-weight: 600;
  color: var(--wdt-success, #1FAE5A); background: rgba(31, 174, 90, .12);
  white-space: nowrap;
}
.tb-lock[hidden] { display: none; }
.tb-lock .ds-icon { width: 13px; height: 13px; }
/* Mode pill (Design/Content view) — now the only user of .tb-mode. */
.tb-mode {
  font-size: 12px; font-weight: 600;
  background: var(--panel-alt); border: 1px solid var(--border);
  padding: 5px 11px; border-radius: 999px; color: var(--muted);
  white-space: nowrap;
}
button.tb-toggle { cursor: pointer; font: inherit; }
button.tb-toggle:hover { filter: brightness(0.95); }
/* Campaign picker — custom dropdown showing each campaign's brand swatch. */
.tb-campaign { display: flex; align-items: center; gap: 8px; white-space: nowrap; }
.tb-campaign-label {
  font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.6px;
  color: var(--muted);
}
.tb-campaign-control { position: relative; }
.tb-campaign-btn {
  display: flex; align-items: center; gap: 8px;
  font: inherit; font-size: 13px; font-weight: 600;
  padding: 5px 10px; border: 1px solid var(--wdt-line-2, var(--border)); border-radius: var(--r-md, 8px);
  background: var(--wdt-surface-tint, var(--panel-alt)); color: var(--text); cursor: pointer; box-shadow: none;
}
.tb-campaign-btn:hover { border-color: var(--accent); }
.tb-campaign-swatch {
  flex: none; width: 13px; height: 13px; border-radius: 50%;
  border: 1px solid rgba(0, 0, 0, 0.18); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.25);
}
.tb-campaign-caret { color: var(--muted); font-size: 10px; margin-left: 2px; }
.tb-campaign-menu {
  position: absolute; top: calc(100% + 6px); left: 0; z-index: 300;
  min-width: 180px; max-height: 320px; overflow-y: auto;
  background: var(--panel); border: 1px solid var(--border);
  border-radius: var(--r-md, 10px); box-shadow: var(--sh-lg, 0 12px 32px rgba(0,0,0,0.16));
  padding: 5px;
}
.tb-campaign-opt {
  display: flex; align-items: center; gap: 9px; width: 100%;
  font: inherit; font-size: 13px; text-align: left;
  padding: 7px 9px; border: 0; border-radius: 6px; background: transparent;
  color: var(--text); cursor: pointer; box-shadow: none;
}
.tb-campaign-opt:hover { background: var(--panel-alt); }
.tb-campaign-opt.is-active { font-weight: 700; background: var(--wdt-surface-tint, var(--panel-alt)); }
.tb-campaign-opt .tb-campaign-name { flex: 1; }
.tb-campaign-check { color: var(--accent); font-size: 12px; }
.tb-sep {
  width: 1px; height: 22px; align-self: center; flex: none;
  background: var(--border); margin: 0 2px;
}
/* Icon-only utility buttons (Preview / Copy / Download / Test / Help / Clear). */
.tb-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; padding: 0; border-radius: 8px;
  border: 1px solid transparent; background: transparent; color: var(--muted);
}
.tb-icon:hover { background: var(--panel-alt); color: var(--text); border-color: transparent; }
.tb-icon:disabled { opacity: .35; cursor: not-allowed; }
.tb-icon:disabled:hover { background: transparent; }
/* Preflight button reflects state: red = errors, amber = warnings only. */
.tb-icon.tb-pf-err { color: var(--wdt-danger, #E51B15); }
.tb-icon.tb-pf-err:hover { background: var(--wdt-tint-danger, #fdeceb); color: var(--wdt-danger, #E51B15); }
.tb-icon.tb-pf-warn { color: #FE712C; }
.tb-icon.tb-pf-warn:hover { background: rgba(254, 113, 44, .12); color: #FE712C; }
.tb-icon .ds-icon { width: 17px; height: 17px; }
.tb-icon-danger:hover { background: var(--wdt-tint-danger, #fdeceb); color: var(--danger); }
/* Connection chips (Metis / Asana) — click to set/update the token. */
.tb-chip {
  display: inline-flex; align-items: center; gap: 6px;
  font: inherit; font-size: 12px; white-space: nowrap;
  padding: 4px 10px; border-radius: 999px;
  border: 1px solid var(--border); background: var(--panel);
  cursor: pointer; color: var(--muted);
}
.tb-chip:hover { border-color: var(--accent); color: var(--text); }
.tb-chip .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--warn); }
.tb-chip.ok .dot { background: var(--ok); }
.tb-chip.ok .lbl { color: var(--text); }
.tb-chip.warn .lbl { color: var(--warn); }
.tb-chip.err .dot { background: var(--danger); }
.tb-chip.err .lbl { color: var(--danger); }
.tb-chip.checking .dot { background: var(--muted); animation: chip-pulse 1s ease-in-out infinite; }
.tb-chip.checking .lbl { color: var(--muted); }
@keyframes chip-pulse { 0%, 100% { opacity: 0.35; } 50% { opacity: 1; } }
/* Buttons follow Generator DS: secondary = surface + pill; primary = the
   mauve↔red gradient with the red action shadow; ghost = link-style. */
button {
  font: inherit; font-weight: 600;
  border: 1px solid var(--border); background: var(--panel);
  padding: 7px 14px; border-radius: var(--r-pill, 999px); cursor: pointer; color: var(--text);
  transition: border-color var(--dur, 0.15s) var(--ease, ease),
              background-color var(--dur, 0.15s) var(--ease, ease),
              box-shadow var(--dur, 0.15s) var(--ease, ease),
              transform var(--dur, 0.15s) var(--ease, ease);
}
/* Outline (default) buttons — Load / New / Preview / Copy. Hover picks up the
   DS golden-rule gradient tint (op15) + a soft lift. */
button:hover {
  background: var(--wdt-gradient-pink, var(--panel-alt));
  border-color: var(--wdt-line-2, var(--border));
  transform: translateY(-1px);
}
/* Primary — the signature gradient, red action shadow, 3px lift. Used once per
   view (the main workflow action: Save/Create). */
button.primary {
  background: var(--wdt-gradient, var(--accent)); color: #fff;
  border-color: transparent; box-shadow: var(--sh-action-red, none);
}
button.primary:hover {
  background: var(--wdt-gradient, var(--accent-dark));
  box-shadow: var(--sh-action-red-hover, var(--sh-action-red, none));
  filter: brightness(1.02); transform: translateY(-3px);
}
/* Secondary — soft-pink fill, mauve text (DS). */
button.secondary {
  background: var(--wdt-pink-50, #fceff2); color: var(--accent-2);
  border-color: transparent; box-shadow: none;
}
button.secondary:hover {
  background: var(--wdt-mauve-50, #f3d9e4); color: var(--accent-2);
  border-color: transparent; transform: translateY(-1px);
}
button.ghost { background: transparent; border-color: transparent; color: var(--muted); box-shadow: none; }
button.ghost:hover { background: var(--panel-alt); color: var(--text); border-color: transparent; }

/* ─── Layout ──────────────────────────────────────────── */
#toolbar { flex: none; }
#layout {
  display: grid;
  grid-template-columns: 240px 1fr 320px;
  flex: 1 1 auto;
  min-height: 0;
}
aside { background: var(--panel); border-right: 1px solid var(--border); overflow-y: auto; }
#properties-pane { border-right: none; border-left: 1px solid var(--border); }
#canvas-pane { overflow-y: auto; padding: 24px; background: var(--bg); }

/* ─── Loaded-newsletter context bar (below the nav) ───── */
#nl-context {
  flex: none;
  display: flex; align-items: center; gap: 12px;
  padding: 8px 16px; min-width: 0;
  border-bottom: 1px solid var(--border);
  background: var(--panel-alt); font-size: 13px;
}
#nl-context.loaded { border-left: 3px solid var(--accent-2); }
#nl-context.empty { background: var(--panel); }
.nlc-label {
  flex: none; text-transform: uppercase; letter-spacing: 0.5px;
  font-size: 10px; font-weight: 700; color: var(--muted);
}
.nlc-name {
  flex: 0 1 auto; min-width: 0;
  font-size: 15px; font-weight: 600; color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.nlc-id {
  flex: none; display: inline-flex; align-items: center; gap: 6px;
  border: 1px solid var(--border); background: var(--panel);
  border-radius: 999px; padding: 3px 10px; cursor: pointer;
  font: inherit; color: var(--muted);
}
.nlc-id:hover { border-color: var(--accent); color: var(--text); }
.nlc-id-tag { font-size: 10px; text-transform: uppercase; letter-spacing: 0.4px; font-weight: 600; }
.nlc-id code { font-family: var(--mono); font-size: 12px; color: var(--text); }
.nlc-link {
  flex: none; margin-left: auto; white-space: nowrap;
  font-size: 12px; font-weight: 600; color: var(--accent); text-decoration: none;
}
.nlc-link:hover { text-decoration: underline; }
.nlc-hint { color: var(--muted); }
.pane-title {
  position: sticky; top: 0; z-index: 1;
  background: var(--panel); padding: 12px 16px;
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.5px;
  color: var(--muted); border-bottom: 1px solid var(--border);
}

/* ─── Library ─────────────────────────────────────────── */
#library-search {
  width: calc(100% - 24px); margin: 10px 12px 2px; padding: 7px 10px;
  font: inherit; font-size: 13px; color: var(--text);
  background: var(--panel-alt); border: 1px solid var(--border);
  border-radius: var(--radius); outline: none;
}
#library-search:focus { border-color: var(--accent-2); box-shadow: var(--focus-ring); }
#library { padding: 12px; }
.lib-cat-title {
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.4px;
  color: var(--muted); padding: 8px 4px 6px;
}
.lib-item {
  display: flex; align-items: center; gap: 10px;
  background: var(--panel-alt); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 9px 12px; margin-bottom: 6px;
  cursor: grab; user-select: none;
}
.lib-item[hidden] { display: none; }
.lib-item:hover { border-color: var(--accent); background: #fff; }
.lib-item:active { cursor: grabbing; }
.lib-item-icon {
  flex: none; display: flex; align-items: center; justify-content: center;
  width: 24px; color: var(--accent-2); /* DS mauve — restrained brand accent */
}
.lib-item:hover .lib-item-icon { color: var(--accent); } /* red — bold hover */
.lib-item-body { display: flex; flex-direction: column; min-width: 0; }
.lib-item-name { font-weight: 500; font-size: 13px; }
.lib-item-shape { font-size: 11px; color: var(--muted); margin-top: 1px; }
/* Floating hover preview of a palette block, rendered at 600px and scaled. */
.lib-preview {
  position: fixed; z-index: 1000;
  background: #fff; border: 1px solid var(--border);
  border-radius: 8px; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
  overflow: hidden; pointer-events: none;
}
.lib-preview iframe {
  border: 0; display: block;
  width: 600px; height: 810px; /* oversized; parent clips to scaled height */
  transform-origin: 0 0;
}

/* ─── Canvas ──────────────────────────────────────────── */
#canvas {
  max-width: 680px; margin: 0 auto;
  min-height: 100%;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 20px;
}
.canvas-empty {
  border: 2px dashed var(--border); border-radius: var(--radius);
  padding: 60px 20px; text-align: center; color: var(--muted);
  font-style: italic;
}
#canvas.drop-active, .nested-zone.drop-active {
  outline: 2px dashed var(--accent); outline-offset: -4px;
}
/* Static header/footer preview frames bracketing the editable blocks. */
.canvas-wrapframe {
  position: relative; margin-bottom: 12px;
  border: 1px dashed var(--wdt-line-2, var(--border)); border-radius: var(--radius);
  background: repeating-linear-gradient(45deg, transparent, transparent 8px, rgba(153,92,133,.03) 8px, rgba(153,92,133,.03) 16px);
  overflow: hidden;
}
.canvas-wrapframe--footer { margin-top: 12px; margin-bottom: 0; }
.wrapframe-label {
  position: absolute; top: 6px; right: 8px; z-index: 1;
  font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em;
  color: var(--wdt-accent, var(--muted)); background: var(--wdt-surface, #fff);
  padding: 2px 7px; border-radius: 999px; border: 1px solid var(--wdt-line, var(--border));
  pointer-events: none;
}
.wrapframe-iframe { display: block; width: 100%; border: 0; }
.block-shell {
  position: relative; margin-bottom: 12px;
  border: 1px solid transparent; border-radius: var(--radius);
  transition: border-color 0.1s;
  cursor: pointer;
}
.block-shell:hover { border-color: var(--border); }
.block-shell.is-selected { border-color: var(--accent); box-shadow: 0 0 0 2px rgba(229,27,21,0.12); }
/* Flash a block when jumped to from the preflight checklist. */
.block-shell.flash { animation: block-flash 1.1s var(--ease, ease); }
@keyframes block-flash {
  0%, 100% { box-shadow: 0 0 0 2px rgba(229, 27, 21, 0.12); }
  20% { box-shadow: 0 0 0 4px rgba(153, 92, 133, .55); }
  60% { box-shadow: 0 0 0 4px rgba(153, 92, 133, .28); }
}
@media (prefers-reduced-motion: reduce) { .block-shell.flash { animation: none; } }
.block-toolbar {
  position: absolute; top: -1px; right: -1px;
  display: none;
  background: var(--panel); border: 1px solid var(--border);
  border-radius: 0 var(--radius) 0 var(--radius);
  padding: 2px;
  z-index: 5;
  gap: 2px;
  align-items: center;
}
.block-shell:hover .block-toolbar,
.block-shell.is-selected .block-toolbar { display: flex; }
.block-name { font-size: 11px; color: var(--muted); padding: 0 6px; }
/* DS stroke icons (assets/icons.svg) used across editor UI controls. */
.ds-icon { display: inline-block; vertical-align: middle; flex: none; }
.block-btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 3px; border: none; cursor: pointer;
  background: transparent; color: var(--muted); border-radius: 3px;
}
.block-btn:hover { background: var(--panel-alt); color: var(--text); }
.block-btn.danger:hover { background: var(--danger); color: #fff; }
.block-iframe {
  display: block;
  width: 100%;
  border: 0;
  min-height: 4px;
  background: #fff;
  /* Lets mouse events fall through to the parent block-shell for hover/click/drag */
  pointer-events: none;
}
.block-iframe-slot { min-height: 4px; }

/* nested zones */
.nested-zone {
  margin: 8px 0 0; padding: 12px;
  background: var(--panel-alt);
  border: 1px dashed var(--border);
  border-radius: var(--radius);
}
.nested-label {
  font-size: 11px; color: var(--muted); margin-bottom: 6px;
  text-transform: uppercase; letter-spacing: 0.4px;
}
.nested-empty {
  padding: 24px; text-align: center; color: var(--muted);
  font-style: italic; font-size: 12px;
}

/* ─── Properties ──────────────────────────────────────── */
.props-empty {
  padding: 40px 20px; text-align: center; color: var(--muted);
  font-style: italic; font-size: 13px;
}
.props-header { padding: 12px 16px; border-bottom: 1px solid var(--border); }
.props-header h3 { margin: 0; font-size: 14px; }
.props-body { padding: 12px 16px; }
.props-row { margin-bottom: 12px; }
.props-row label {
  display: block; font-size: 11px; text-transform: uppercase;
  letter-spacing: 0.4px; color: var(--muted); margin-bottom: 4px;
}
.props-row input[type="text"],
.props-row input[type="url"],
.props-row textarea,
.props-row select {
  width: 100%; font: inherit;
  padding: 8px 10px;
  border: 1px solid rgba(0, 0, 0, 0.12); border-radius: 8px;
  background: var(--wdt-surface, var(--panel));
}
.props-row input:focus, .props-row textarea:focus, .props-row select:focus {
  outline: none; border-color: var(--wdt-accent, var(--accent-2));
  box-shadow: var(--focus-glow-mauve, var(--focus-ring));
}
.flag-preset-row select { height: 34px; padding-top: 0; padding-bottom: 0; }
.props-row textarea { resize: vertical; min-height: 60px; font-family: inherit; }
.props-hint { color: var(--muted); font-size: 12px; line-height: 1.4; }
/* Character-limit counter under an input. */
.field-counter { font-size: 11px; color: var(--muted); text-align: right; margin-top: 3px; }
.field-counter.reached { color: var(--danger); font-weight: 600; }
/* Fill-from-SKU control on product cards — webdesignteam.pt DS form field. */
.sku-fill {
  display: flex; flex-direction: column; gap: 6px;
  margin-bottom: 12px; padding: 12px; border-radius: var(--r-lg, 16px);
  background: var(--wdt-surface-tint, var(--panel-alt));
  border: 1px solid var(--wdt-line, var(--border));
}
.sku-fill .sku-label {
  font-family: var(--font-mono, "JetBrains Mono", monospace);
  font-size: 12px; font-weight: 500; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--wdt-accent);
}
.sku-fill .sku-row { display: flex; align-items: center; gap: 8px; }
.sku-fill .sku-input {
  flex: 1 1 auto; min-width: 0; margin: 0; box-sizing: border-box;
  background: var(--wdt-surface, #fff); color: var(--wdt-ink, #26221F);
  border: 1px solid rgba(54, 54, 54, .12); border-radius: var(--r-md, 12px);
  padding: 11px 14px; font-size: 14px;
  transition: border-color var(--dur, 240ms) var(--ease, ease),
    box-shadow var(--dur, 240ms) var(--ease, ease), background var(--dur, 240ms) var(--ease, ease);
}
.sku-fill .sku-input::placeholder { color: var(--wdt-ink-faint, #949494); }
.sku-fill .sku-input:hover { border-color: var(--wdt-line-2, #E0CEDA); }
.sku-fill .sku-input:focus {
  outline: none; border-color: var(--wdt-accent);
  box-shadow: var(--focus-glow-mauve, 0 0 0 3px rgba(153, 92, 133, .18));
  background: var(--wdt-surface, #fff);
}
.sku-fill .sku-input.err {
  border-color: var(--wdt-danger, var(--danger));
}
.sku-fill .sku-fill-btn {
  flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px;
  padding: 11px 18px; font-size: 13px; font-weight: 600; line-height: 1;
  color: var(--wdt-accent); background: var(--wdt-surface-tint, #F8EBF0);
  border: 1px solid transparent; border-radius: var(--r-pill, 999px); cursor: pointer;
  transition: background var(--dur, 240ms) var(--ease, ease), transform var(--dur, 240ms) var(--ease, ease);
}
.sku-fill .sku-fill-btn:hover { background: #F7DDE7; transform: translateY(-1px); }
.sku-fill .sku-fill-btn:active { transform: translateY(0); }
.sku-fill .sku-fill-btn:disabled { opacity: .5; cursor: not-allowed; transform: none; }
.sku-fill .sku-status { font-size: 11px; line-height: 1.4; color: var(--wdt-ink-muted, var(--muted)); min-height: 14px; }
.sku-fill .sku-status.err { color: var(--wdt-danger, var(--danger)); font-weight: 600; }
/* Bulk fill (product-grid container). */
.sku-bulk .sku-bulk-input {
  width: 100%; box-sizing: border-box; resize: vertical; font: inherit; font-size: 14px;
  background: var(--wdt-surface, #fff); color: var(--wdt-ink, #26221F);
  border: 1px solid rgba(54, 54, 54, .12); border-radius: var(--r-md, 12px);
  padding: 10px 12px; line-height: 1.4;
  transition: border-color var(--dur, 240ms) var(--ease, ease), box-shadow var(--dur, 240ms) var(--ease, ease);
}
.sku-bulk .sku-bulk-input::placeholder { color: var(--wdt-ink-faint, #949494); }
.sku-bulk .sku-bulk-input:focus {
  outline: none; border-color: var(--wdt-accent);
  box-shadow: var(--focus-glow-mauve, 0 0 0 3px rgba(153, 92, 133, .18));
}
.sku-bulk .sku-bulk-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.sku-bulk .sku-bulk-foot .sku-status { flex: 1 1 auto; }

/* Rich-text formatting toolbar (Text Block description). */
.rich-field { display: flex; flex-direction: column; }
.rich-toolbar {
  display: flex; align-items: center; gap: 3px;
  padding: 3px; border: 1px solid var(--border); border-bottom: 0;
  border-radius: 8px 8px 0 0; background: var(--panel-alt);
}
.rich-btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 28px; height: 26px; padding: 0 6px; font-size: 13px;
  border: 1px solid transparent; border-radius: 6px; background: transparent;
  color: var(--text); cursor: pointer;
}
.rich-btn:hover { background: var(--panel); border-color: var(--border); }
.rich-trigger { gap: 5px; font-size: 12px; font-weight: 600; }
.rich-caret { color: var(--muted); font-size: 10px; }
.rich-cdot { width: 12px; height: 12px; border-radius: 3px; background: #E51B15; border: 1px solid rgba(0,0,0,0.15); }
.rich-field textarea { border-radius: 0 0 8px 8px; }
/* WYSIWYG editing surface (contenteditable). */
.rich-editor {
  min-height: 84px; padding: 10px 12px;
  border: 1px solid rgba(0, 0, 0, 0.12); border-top: 0; border-radius: 0 0 8px 8px;
  background: var(--wdt-surface, var(--panel)); color: var(--wdt-ink, var(--text));
  font: inherit; font-size: 14px; line-height: 1.5;
  overflow-wrap: anywhere; cursor: text;
}
.rich-editor:focus {
  outline: none; border-color: var(--wdt-accent, var(--accent-2));
  box-shadow: var(--focus-glow-mauve, var(--focus-ring));
}
.rich-editor:empty::before {
  content: attr(aria-label); color: var(--wdt-ink-faint, var(--muted)); pointer-events: none;
}
.rich-editor a { color: inherit; }
/* Rich-text popovers (weight menu / colour swatches). */
.rich-popover {
  position: fixed; z-index: 400; padding: 6px;
  background: var(--panel); border: 1px solid var(--border);
  border-radius: 10px; box-shadow: var(--sh-lg, 0 12px 32px rgba(0,0,0,0.16));
}
.rich-pop-list { display: flex; flex-direction: column; min-width: 160px; }
.rich-pop-list button {
  display: flex; justify-content: space-between; align-items: center; gap: 14px;
  border: 0; background: transparent; color: var(--text); cursor: pointer;
  padding: 7px 10px; border-radius: 6px; font-size: 14px; text-align: left;
}
.rich-pop-list button:hover { background: var(--panel-alt); }
.rich-pop-num { color: var(--muted); font-size: 11px; font-family: var(--mono); font-weight: 400; }
.rich-pop-swatches { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; padding: 2px; }
.rich-pop-sw {
  width: 26px; height: 26px; padding: 0; border-radius: 6px;
  border: 1px solid rgba(0,0,0,0.15); cursor: pointer; transition: transform 0.08s ease;
}
.rich-pop-sw:hover { transform: scale(1.1); }
.rich-pop-custom {
  position: relative; overflow: hidden; display: inline-flex;
  align-items: center; justify-content: center;
  background: var(--panel-alt); color: var(--muted); font-size: 16px; line-height: 1;
}
.rich-pop-custom input { position: absolute; inset: 0; opacity: 0; cursor: pointer; border: 0; padding: 0; }
/* Flag design-preset control: color swatch (left) + named dropdown (right),
   sitting above the flag color picker. */
.flag-preset-row { display: flex; align-items: center; gap: 8px; margin-bottom: 0; }
.flag-preset-swatch {
  flex: 0 0 auto; width: 34px; height: 34px; border-radius: 8px;
  border: 1px solid rgba(0, 0, 0, 0.12);
}
/* Theme / auto = no explicit color: a subtle checker so it reads as "unset". */
.flag-preset-swatch.is-theme {
  background:
    linear-gradient(45deg, var(--wdt-line, #eee) 25%, transparent 25%, transparent 75%, var(--wdt-line, #eee) 75%) 0 0 / 12px 12px,
    linear-gradient(45deg, var(--wdt-line, #eee) 25%, transparent 25%, transparent 75%, var(--wdt-line, #eee) 75%) 6px 6px / 12px 12px,
    var(--wdt-surface, #fff);
}
.flag-preset-row select { flex: 1; margin: 0; }
/* Raw hex picker for a flag color only shows when "Custom…" is chosen. */
.color-field--flag { margin-top: 8px; }

/* Field hover hint — floating card wireframe pointing at the field's region. */
.field-hint-pop {
  position: fixed; z-index: 60; pointer-events: none;
  padding: 10px; width: max-content;
  background: var(--wdt-surface, #fff);
  border: 1px solid var(--wdt-line, var(--border));
  border-radius: var(--r-lg, 16px);
  box-shadow: var(--sh-md, 0 10px 28px rgba(54, 54, 54, .16));
  animation: field-hint-in 120ms var(--ease, ease);
}
.field-hint-pop svg { display: block; }
.field-hint-cap {
  margin-top: 8px; text-align: center;
  font-family: var(--font-mono, "JetBrains Mono", monospace);
  font-size: 10px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--wdt-accent);
}
@keyframes field-hint-in { from { opacity: 0; transform: translateX(4px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .field-hint-pop { animation: none; } }

/* two-slot (dbl_img) swap control */
.props-slots-bar {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 12px; padding-bottom: 10px; border-bottom: 1px solid var(--border);
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.4px; color: var(--muted);
}
.props-swap-btn {
  font: inherit; font-size: 12px; text-transform: none; letter-spacing: 0;
  cursor: pointer; padding: 4px 10px; border-radius: 999px;
  border: 1px solid var(--border); background: var(--panel); color: var(--text);
}
.props-swap-btn:hover { border-color: var(--accent); color: var(--accent); }

/* per-component comment (syncs to the Asana subtask description) */
.props-comment {
  margin-bottom: 14px; padding: 10px; border-radius: var(--radius);
  background: var(--panel-alt); border: 1px solid var(--border);
  border-left: 3px solid var(--accent-2);
}
.props-comment label {
  display: flex; align-items: center; gap: 8px; margin-bottom: 6px;
  font-size: 12px; font-weight: 600;
}
.props-comment-tag {
  font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.4px;
  color: var(--accent-2); background: var(--accent-2-tint);
  padding: 2px 6px; border-radius: 4px;
}
.props-comment textarea {
  width: 100%; font: inherit; resize: vertical; min-height: 54px;
  padding: 6px 8px; border: 1px solid var(--border); border-radius: 4px;
  background: var(--panel);
}
.props-comment textarea:focus { outline: none; border-color: var(--accent-2); box-shadow: var(--focus-ring); }

/* container items */
.props-item {
  border: 1px solid var(--border); border-radius: var(--radius);
  margin-bottom: 6px; background: var(--panel-alt);
}
.props-item summary {
  padding: 8px 12px; font-weight: 500; font-size: 13px;
  cursor: pointer; user-select: none;
  display: flex; align-items: center; gap: 6px;
}
.props-item summary::-webkit-details-marker { display: none; }
.props-item summary::before { content: "▶"; font-size: 9px; color: var(--muted); }
.props-item[open] summary::before { content: "▼"; }
.props-grip {
  color: var(--muted); font-size: 12px; line-height: 1;
  cursor: grab; user-select: none; padding: 0 2px;
}
.props-grip:active { cursor: grabbing; }
.props-item-title { flex: 1; }
.props-item.item-dragging { opacity: 0.5; }
.props-item.item-drop-before { box-shadow: 0 -2px 0 var(--accent); }
.props-item.item-drop-after { box-shadow: 0 2px 0 var(--accent); }
.props-item-body { padding: 8px 12px 12px; }
.props-remove {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 3px; border: none; cursor: pointer;
  background: transparent; color: var(--muted); border-radius: 3px;
}
.props-remove:hover { color: var(--danger); background: rgba(176,0,32,0.08); }
.props-add-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  width: 100%; margin-top: 8px;
  border: 1px dashed var(--border); background: transparent;
  color: var(--muted);
}
.props-add-btn:hover { border-color: var(--accent); color: var(--accent); }
.props-add-btn:disabled { opacity: .5; cursor: not-allowed; }
.props-add-btn:disabled:hover { border-color: var(--border); color: var(--muted); }
/* Container "too many cards" warning + over-limit card markers. */
.props-warning {
  display: flex; align-items: flex-start; gap: 8px;
  margin-bottom: 12px; padding: 10px 12px; border-radius: var(--r-md, 10px);
  font-size: 12px; line-height: 1.45;
  background: rgba(254, 113, 44, .12); color: #A8480C;
  border: 1px solid rgba(254, 113, 44, .35);
}
.props-warning svg { flex: 0 0 auto; margin-top: 1px; }
.props-item-hidden > summary { opacity: .6; }
.props-item-flag {
  font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
  padding: 1px 6px; border-radius: 999px; margin-left: 6px;
  background: rgba(254, 113, 44, .18); color: #A8480C;
}

/* color field */
.color-field { display: flex; align-items: center; gap: 8px; }
.color-picker {
  flex: 0 0 auto; width: 34px; height: 34px; padding: 0;
  border: 1px solid rgba(0, 0, 0, 0.12); border-radius: 8px;
  background: var(--panel); cursor: pointer;
}
.color-picker::-webkit-color-swatch-wrapper { padding: 2px; }
.color-picker::-webkit-color-swatch { border: none; border-radius: 6px; }
.color-hex {
  flex: 1; min-width: 0; font-family: var(--mono); font-size: 12px;
  padding: 8px 10px; height: 34px; box-sizing: border-box;
  border: 1px solid rgba(0, 0, 0, 0.12); border-radius: 8px;
}
.color-hex:focus {
  outline: none; border-color: var(--wdt-accent);
  box-shadow: var(--focus-glow-mauve, var(--focus-ring));
}
.color-reset {
  flex: none; width: 34px; height: 34px; padding: 0;
  border: 1px solid rgba(0, 0, 0, 0.12); border-radius: 8px;
  background: var(--wdt-surface-tint, var(--panel-alt)); color: var(--muted); cursor: pointer;
  font-size: 14px; line-height: 1;
}
.color-reset:hover { border-color: var(--accent); color: var(--accent); }

/* image field */
.img-field {
  border: 1px solid var(--border); border-radius: var(--radius);
  padding: 8px; background: var(--panel);
}
.img-preview {
  max-width: 100%; max-height: 120px; display: block;
  margin: 0 auto 8px; border-radius: 3px;
}
.img-empty {
  height: 60px; display: flex; align-items: center; justify-content: center;
  color: var(--muted); font-size: 12px; font-style: italic;
  background: var(--panel-alt); border-radius: 3px; margin-bottom: 8px;
}
.img-url {
  width: 100%; font-family: var(--mono); font-size: 11px;
  padding: 4px 6px; border: 1px solid var(--border); border-radius: 3px;
  margin-bottom: 4px;
}
.img-upload-btn {
  display: block; text-align: center;
  background: var(--panel-alt); border: 1px solid var(--border);
  border-radius: 3px; padding: 6px; font-size: 12px; cursor: pointer;
}
.img-upload-btn:hover { border-color: var(--accent); color: var(--accent); }
.img-status { font-size: 11px; color: var(--muted); margin-top: 4px; min-height: 1em; }
.img-status.ok { color: var(--ok); }
.img-status.error { color: var(--danger); }

/* ─── Badge editor modal ──────────────────────────────── */
.img-btn-row { display: flex; gap: 6px; flex-wrap: wrap; }
.img-btn-row .img-upload-btn { flex: 1; }
.img-badge-btn {
  font: inherit; font-size: 12px; padding: 6px 10px;
  border: 1px solid var(--border); background: var(--panel-alt);
  border-radius: 3px; cursor: pointer; color: var(--text);
}
.img-badge-btn:hover { border-color: var(--accent); color: var(--accent); }
/* Revert-to-original: full-width on its own line + undo icon so the fallback
   is obvious once an image has been badged. */
.img-reset-btn {
  flex-basis: 100%;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  font: inherit; font-size: 12px; font-weight: 600; padding: 7px 10px;
  border: 1px solid var(--accent-2); background: var(--accent-2-tint);
  border-radius: var(--radius); cursor: pointer; color: var(--accent-2);
}
.img-reset-btn:hover { border-color: var(--danger); color: var(--danger); background: var(--wdt-tint-danger, #fdeceb); }
.img-reset-btn[hidden] { display: none; }
/* "Original kept as fallback" reassurance chip. */
.img-orig-saved {
  display: inline-flex; align-items: center; gap: 5px; margin-top: 6px;
  font-size: 11px; font-weight: 600; color: var(--ok);
}
.img-orig-saved[hidden] { display: none; }

.badge-modal-overlay {
  position: fixed; inset: 0; z-index: 1000;
  background: rgba(0,0,0,0.5);
  display: flex; align-items: center; justify-content: center;
  animation: fade-in 0.15s ease;
}
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
.badge-modal {
  background: var(--panel); border-radius: 8px; box-shadow: 0 10px 40px rgba(0,0,0,0.3);
  width: 720px; max-width: 92vw; max-height: 88vh; overflow: hidden;
  display: flex; flex-direction: column;
}
.badge-modal-header {
  display: flex; justify-content: space-between; align-items: center;
  padding: 12px 18px; border-bottom: 1px solid var(--border);
}
.badge-modal-header h3 { margin: 0; font-size: 15px; }
.badge-modal-close {
  display: inline-flex; align-items: center; justify-content: center;
  border: none; background: transparent; color: var(--muted);
  padding: 5px; border-radius: 3px; cursor: pointer;
}
.badge-modal-close:hover { background: var(--panel-alt); color: var(--text); }
.badge-modal-body {
  display: grid; grid-template-columns: 1fr 240px; gap: 16px;
  padding: 16px 18px; overflow: auto; min-height: 0;
}
.badge-canvas-wrap {
  background: #f4f4f6;
  border: 1px solid var(--border); border-radius: 4px;
  display: flex; align-items: center; justify-content: center;
  padding: 8px; min-height: 240px;
}
.badge-canvas {
  display: block;
  max-width: 100%; max-height: 60vh;
  width: auto; height: auto;
  /* aspect-ratio is set inline from the loaded image so both
     max-width/max-height constraints scale proportionally */
}
.badge-controls { display: flex; flex-direction: column; gap: 10px; }
.badge-controls label {
  display: flex; flex-direction: column; font-size: 11px;
  text-transform: uppercase; letter-spacing: 0.4px; color: var(--muted); gap: 4px;
}
.badge-controls input[type="text"], .badge-controls input:not([type]) {
  font: inherit; padding: 6px 8px; border: 1px solid var(--border); border-radius: 4px;
}
.badge-controls input[type="color"] {
  width: 100%; height: 32px; padding: 2px; border: 1px solid var(--border); border-radius: 4px; cursor: pointer;
}
.badge-controls label.badge-check {
  flex-direction: row; align-items: center; gap: 8px; text-transform: none; letter-spacing: 0; cursor: pointer;
}
.badge-controls label.badge-check input { width: auto; cursor: pointer; }
.badge-color-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.badge-pos-row { display: flex; flex-direction: column; gap: 4px; }
.badge-pos-row > span {
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.4px; color: var(--muted);
}
.badge-pos-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 4px;
}
.badge-pos-btn {
  border: 1px solid var(--border); background: var(--panel);
  padding: 8px; border-radius: 4px; cursor: pointer; font-size: 18px;
}
.badge-pos-btn:hover { border-color: var(--accent); }
.badge-pos-btn.active { background: var(--accent); color: #fff; border-color: var(--accent); }
.badge-align-row { display: flex; flex-direction: column; gap: 4px; }
.badge-align-row > span {
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.4px; color: var(--muted);
}
.badge-align-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 4px; }
.badge-modal-footer {
  display: flex; justify-content: flex-end; gap: 8px;
  padding: 12px 18px; border-top: 1px solid var(--border);
}

/* ─── Toasts ──────────────────────────────────────────── */
#toasts {
  position: fixed; bottom: 16px; right: 16px;
  display: flex; flex-direction: column; gap: 8px; z-index: 100;
}
.toast {
  background: var(--text); color: #fff;
  padding: 10px 16px; border-radius: var(--radius);
  font-size: 13px; box-shadow: var(--shadow);
  animation: toast-in 0.2s ease;
}
.toast.error { background: var(--danger); }
.toast-action { display: flex; align-items: center; gap: 14px; }
.toast-btn {
  appearance: none; border: 1px solid rgba(255,255,255,0.4); background: transparent;
  color: #fff; font: inherit; font-size: 12px; font-weight: 600;
  padding: 3px 12px; border-radius: 6px; cursor: pointer;
}
.toast-btn:hover { background: rgba(255,255,255,0.15); }
@keyframes toast-in {
  from { transform: translateY(12px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

/* ─── Inline input dialog (replaces window.prompt) ────── */
.modal-backdrop {
  position: fixed; inset: 0; background: rgba(0,0,0,0.4);
  display: flex; align-items: center; justify-content: center;
  z-index: 200; animation: toast-in 0.15s ease;
}
.modal {
  background: var(--panel); border-radius: var(--radius);
  box-shadow: 0 8px 32px rgba(0,0,0,0.18);
  width: min(480px, calc(100vw - 32px));
  padding: 20px; display: flex; flex-direction: column; gap: 12px;
}
.modal-title { font-size: 15px; font-weight: 600; margin: 0; }
.modal-label { font-size: 13px; color: var(--muted); margin: 0; }
.modal-input {
  font: inherit; font-family: var(--mono); font-size: 13px;
  padding: 8px 10px; border: 1px solid var(--border); border-radius: 4px;
  background: var(--panel); color: var(--text); width: 100%;
}
.modal-input:focus { outline: 2px solid var(--accent-2); outline-offset: -1px; }
.modal-hint {
  font-size: 12px; color: var(--muted); margin: 0;
}
.modal-hint a { color: var(--accent); text-decoration: none; }
.modal-hint a:hover { text-decoration: underline; }
.modal-actions {
  display: flex; justify-content: flex-end; gap: 8px; margin-top: 4px;
}
.modal-picker { width: min(560px, calc(100vw - 32px)); }

/* Confirm dialog (DS-styled replacement for window.confirm). */
.modal-confirm { width: min(440px, calc(100vw - 32px)); gap: 14px; }
.modal-confirm-head { display: flex; align-items: flex-start; gap: 10px; }
.modal-confirm-head .ds-icon { flex: 0 0 auto; margin-top: 1px; }
.modal-confirm-head .modal-title { font-size: 16px; letter-spacing: -0.01em; }
.modal-message { font-size: 14px; line-height: 1.5; color: var(--wdt-ink-soft, var(--text)); margin: 0; }
.modal-confirm--warning .modal-confirm-head .ds-icon { color: #FF6B35; }
.modal-confirm--danger .modal-confirm-head .ds-icon { color: var(--wdt-danger, var(--danger)); }
.modal-confirm--warning .primary {
  background: linear-gradient(90deg, #FF6B35, #FF8C42); box-shadow: none;
}
.modal-confirm--danger .primary { background: var(--wdt-danger, var(--danger)); box-shadow: none; }

/* Help / setup modal */
.tb-help {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; padding: 0; border-radius: 50%;
  border: 1px solid var(--border); background: var(--panel-alt);
  color: var(--accent); cursor: pointer; /* functional icon → brand red (DS) */
}
.tb-help:hover { border-color: var(--accent); color: var(--accent); }
.help-modal { width: min(560px, calc(100vw - 32px)); gap: 16px; }
.help-section {
  border: 1px solid var(--border); border-radius: var(--radius);
  padding: 12px 14px; background: var(--panel-alt);
}
.help-section h4 {
  margin: 0 0 8px; font-size: 14px; display: flex; align-items: center; gap: 8px;
}
.help-brand { width: 20px; height: 20px; flex: none; object-fit: contain; }
.help-tag {
  font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.4px;
  color: var(--muted); background: var(--panel); border: 1px solid var(--border);
  padding: 2px 6px; border-radius: 4px;
}
.help-steps { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 6px; }
.help-steps li { font-size: 13px; line-height: 1.45; }
.help-steps code, .help-note code {
  font-family: var(--mono); font-size: 12px;
  background: var(--panel); border: 1px solid var(--border);
  border-radius: 4px; padding: 1px 5px;
}
.help-note { font-size: 12px; color: var(--muted); margin: 8px 0 0; line-height: 1.5; }
.help-dot {
  display: inline-block; width: 8px; height: 8px; border-radius: 50%; vertical-align: middle;
}
.help-dot.ok { background: var(--ok); }
.help-dot.warn { background: var(--warn); }
.modal-list {
  list-style: none; margin: 0; padding: 0;
  max-height: 50vh; overflow-y: auto;
  border: 1px solid var(--border); border-radius: 4px;
}
.modal-list-item {
  padding: 10px 12px; cursor: pointer;
  border-bottom: 1px solid var(--border);
  display: flex; flex-direction: column; gap: 2px;
}
.modal-list-item:last-child { border-bottom: 0; }
.modal-list-item:hover { background: rgba(0,0,0,0.04); }
.mli-main { display: flex; align-items: center; gap: 8px; }
.mli-label { font-size: 13px; font-weight: 500; }
.mli-badge {
  font-size: 10px; padding: 1px 6px; border-radius: 4px;
  background: rgba(0,150,0,0.15); color: #058005;
  text-transform: uppercase; letter-spacing: 0.04em;
}
.mli-sub { font-size: 11px; color: var(--muted); font-family: var(--mono); }

/* ─── Preflight checklist ─────────────────────────────── */
.preflight-summary {
  display: flex; align-items: center; flex-wrap: wrap; gap: 8px;
  font-size: 13px; padding: 10px 12px; border-radius: var(--r-md, 10px);
  background: var(--wdt-surface-tint, var(--panel-alt));
}
.preflight-summary.ok { color: var(--wdt-success, #1FAE5A); font-weight: 600; background: rgba(31, 174, 90, .1); }
.pf-pill { font-size: 11px; font-weight: 700; padding: 2px 9px; border-radius: 999px; }
.pf-err { background: rgba(229, 27, 21, .12); color: var(--wdt-danger, #E51B15); }
.pf-warn { background: rgba(254, 113, 44, .15); color: #C4560F; }
.pf-hint { font-size: 11px; color: var(--muted); }
.pf-size {
  margin-left: auto; font-size: 11px; font-family: var(--mono); font-weight: 600;
  padding: 2px 8px; border-radius: 999px;
}
.pf-size-ok { background: rgba(31, 174, 90, .12); color: var(--wdt-success, #1FAE5A); }
.pf-size-warn { background: rgba(254, 113, 44, .15); color: #C4560F; }
.pf-size-err { background: rgba(229, 27, 21, .12); color: var(--wdt-danger, #E51B15); }
.preflight-list .pf-item { flex-direction: row; align-items: flex-start; gap: 10px; }
.pf-dot { flex: 0 0 auto; width: 8px; height: 8px; margin-top: 5px; border-radius: 50%; }
.pf-dot.pf-error { background: var(--wdt-danger, #E51B15); }
.pf-dot.pf-warn { background: #FE712C; }
.pf-main { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.pf-where { font-size: 12px; font-weight: 600; color: var(--text); }
.pf-msg { font-size: 12px; color: var(--muted); }

/* ─── Refresh product data modal ──────────────────────── */
.refresh-summary {
  font-size: 13px; padding: 10px 12px; border-radius: var(--r-md, 10px);
  background: var(--wdt-surface-tint, var(--panel-alt)); color: var(--text);
}
.refresh-summary.has-changes { color: var(--wdt-success, #1FAE5A); font-weight: 600; background: rgba(31, 174, 90, .1); }
.refresh-row { flex-direction: row; align-items: center; gap: 10px; cursor: default; }
.rf-dot { flex: 0 0 auto; width: 8px; height: 8px; border-radius: 50%; background: var(--wdt-line-2, #ccc); }
.rf-dot[data-state="pending"] { background: var(--wdt-line-2, #ccc); animation: rf-pulse 1s ease-in-out infinite; }
.rf-dot[data-state="ok"] { background: var(--wdt-line-2, #bbb); }
.rf-dot[data-state="changed"] { background: var(--wdt-success, #1FAE5A); }
.rf-dot[data-state="err"] { background: var(--wdt-danger, #E51B15); }
@keyframes rf-pulse { 0%, 100% { opacity: .3; } 50% { opacity: 1; } }
.rf-main { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1; }
.rf-name { font-size: 12px; font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rf-detail { font-size: 11px; color: var(--muted); font-family: var(--mono); }
.rf-old { text-decoration: line-through; opacity: .7; }
.rf-new { color: var(--wdt-success, #1FAE5A); }
@media (prefers-reduced-motion: reduce) { .rf-dot[data-state="pending"] { animation: none; } }

/* ─── Asana save progress modal ───────────────────────── */
.save-progress-modal { gap: 14px; }
.save-progress-header { display: flex; align-items: center; gap: 12px; }
.save-progress-title { font-size: 15px; font-weight: 600; }
.save-progress-label {
  font-size: 13px; color: var(--muted); font-family: var(--mono);
  min-height: 1.4em;
}
.save-progress-spinner {
  width: 20px; height: 20px; border-radius: 50%;
  border: 2px solid var(--border); border-top-color: var(--accent);
  animation: save-spin 0.8s linear infinite;
}
@keyframes save-spin { to { transform: rotate(360deg); } }
/* ─── Login gate ─────────────────────────────────────── */
body.login-screen {
  display: flex; align-items: center; justify-content: center; min-height: 100vh;
  background: var(--bg); padding: 24px;
}
.login-card {
  width: 100%; max-width: 340px; display: flex; flex-direction: column; gap: 14px;
  background: var(--panel); border: 1px solid var(--border);
  border-radius: var(--r-lg, 16px); padding: 28px; box-shadow: var(--sh-md, 0 12px 34px rgba(0,0,0,.1));
}
.login-title { margin: 0; font-size: 20px; font-weight: 800; letter-spacing: -0.02em; }
.login-sub { margin: -6px 0 4px; font-size: 13px; color: var(--muted); }
.login-card label { display: flex; flex-direction: column; gap: 5px; font-size: 12px; font-weight: 600; color: var(--muted); }
.login-card input {
  font: inherit; padding: 9px 11px; border: 1px solid var(--border);
  border-radius: var(--radius); background: var(--panel); color: var(--text);
}
.login-card input:focus { outline: none; border-color: var(--accent-2); box-shadow: var(--focus-ring); }
.login-card button { margin-top: 4px; }
.login-error {
  font-size: 12px; color: var(--danger); background: var(--wdt-tint-danger, #fdeceb);
  border-radius: var(--radius); padding: 8px 10px;
}

/* DS progress bar — 10px pill track (blush) + gradient fill. */
.save-progress-bar-wrap {
  height: 10px; background: var(--wdt-line, var(--border));
  border-radius: var(--r-pill, 999px); overflow: hidden;
}
.save-progress-bar {
  height: 100%; background: var(--gen-grad-h, var(--accent));
  border-radius: inherit; transition: width 600ms var(--ease, ease);
}

/* ─── Property field groups (Price details, etc) ─────── */
.props-group {
  margin-top: 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--panel-alt);
  overflow: hidden;
}
.props-group > summary {
  cursor: pointer;
  list-style: none;
  padding: 10px 14px;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
  user-select: none;
  position: relative;
}
.props-group > summary::-webkit-details-marker { display: none; }
.props-group > summary::after {
  content: "▾";
  position: absolute;
  right: 14px;
  transition: transform 150ms ease;
  color: var(--muted);
  font-size: 10px;
}
.props-group:not([open]) > summary::after { transform: rotate(-90deg); }
.props-group-body {
  padding: 4px 12px 12px;
  background: var(--panel);
  border-top: 1px solid var(--border);
}
.props-group-body .props-row:last-child { margin-bottom: 0; }

/* ─── Team mode pill ──────────────────────────────────── */
.tb-team-design { background: rgba(0, 120, 200, 0.15); color: #0078c8; }
.tb-team-content { background: rgba(180, 100, 0, 0.15); color: #b46400; }
/* Account button + dropdown — team, email and sign-out live in the menu. */
.tb-account { position: relative; }
.tb-account-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; padding: 0; border-radius: 50%;
  border: 1px solid var(--wdt-line-2, var(--border)); background: var(--wdt-surface, var(--panel));
  color: var(--wdt-ink-soft, var(--muted)); cursor: pointer;
}
.tb-account-btn:hover { filter: brightness(0.97); }
.tb-account-btn .ds-icon { width: 17px; height: 17px; }
.tb-account-btn.tb-team-design { border-color: #0078c8; color: #0078c8; background: rgba(0, 120, 200, 0.1); }
.tb-account-btn.tb-team-content { border-color: #b46400; color: #b46400; background: rgba(180, 100, 0, 0.1); }
.tb-account-menu {
  position: absolute; top: calc(100% + 6px); right: 0; z-index: 300; min-width: 210px;
  background: var(--wdt-surface, var(--panel)); border: 1px solid var(--wdt-line, var(--border));
  border-radius: var(--r-md, 10px); box-shadow: var(--sh-lg, 0 12px 32px rgba(0,0,0,0.16)); padding: 6px;
}
.tb-account-head {
  display: flex; align-items: center; gap: 10px; padding: 8px 8px 10px;
  border-bottom: 1px solid var(--wdt-line, var(--border)); margin-bottom: 4px;
}
.tb-account-avatar {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 32px; height: 32px; border-radius: 50%;
}
.tb-account-avatar.tb-team-design { background: rgba(0, 120, 200, 0.15); color: #0078c8; }
.tb-account-avatar.tb-team-content { background: rgba(180, 100, 0, 0.15); color: #b46400; }
.tb-account-who { display: flex; flex-direction: column; min-width: 0; }
.tb-account-email { font-size: 13px; font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tb-account-sub { font-size: 11px; color: var(--muted); text-transform: capitalize; }
.tb-account-team { display: flex; align-items: center; gap: 8px; padding: 6px 8px; font-size: 12px; color: var(--muted); }
.tb-account-dot { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.tb-account-dot.tb-team-design { background: #0078c8; }
.tb-account-dot.tb-team-content { background: #b46400; }
.tb-account-item {
  display: block; width: 100%; text-align: left; font: inherit; font-size: 13px;
  padding: 8px; border: 0; border-radius: 8px; background: none; color: var(--text); cursor: pointer;
}
.tb-account-item:hover { background: var(--wdt-surface-tint, var(--panel-alt)); }
.tb-account-item.danger { color: var(--danger); }
.tb-account-item.danger:hover { background: var(--wdt-tint-danger, #fdeceb); }
.tb-account-ver {
  margin-top: 4px; padding: 8px 8px 4px; border-top: 1px solid var(--wdt-line, var(--border));
  font-size: 10px; font-family: var(--mono); letter-spacing: .02em; color: var(--wdt-ink-faint, var(--muted));
}

/* ─── Content mode lockdown ───────────────────────────────
   Subdomain-detected (or ?mode=content). Content team builds
   layout + copy; only image and color editing stay locked
   (design owns those). Everything else (library, drag-reorder,
   container cards, variant selector, clear) is unlocked. */
/* Content can add badges to images, but not swap them: keep the badge/revert
   buttons, hide only Upload (and the URL stays readonly). */
body.mode-content .img-upload-btn { display: none !important; }
/* Hide color rows in content mode — EXCEPT flag rows, which keep their preset
   dropdown (named choices, content-safe). The raw hex picker stays design-only. */
body.mode-content .props-row:has(.color-field):not(:has(.flag-preset-row)) { display: none; }
body.mode-content .props-row:has(.flag-preset-row) .color-field { display: none; }
body.mode-content .props-row--content-hidden { display: none; }
body.mode-content .img-url[readonly] {
  background: var(--panel-alt); color: var(--muted); cursor: not-allowed;
}