/* DeskKit design v2 — the website builder (sites.html), phase 4a.
   Spec: docs/design-v2-spec.md ("dark shell, real document").

   Loaded by sites.html only, after css/theme-v2.css and
   css/workspace-v2.css, on <body class="theme-v2" data-tool="site">.
   It dresses the editor's own chrome dark — top bar, side panel, dock,
   toolbars, menus, popovers, the add-section gallery, the publish /
   share / upgrade dialogs, the AI panels and the creation wizard — in the
   site tool's electric blue (--v2-site).

   Never touched here: the site itself. The canvas iframe, the gallery
   and wizard preview iframes and every published page render exactly as
   before (tests/sites/render_all.js == baseline_render_hashes.json); the
   white frame around the canvas is the "lit page on a dark desk".

   Every rule starts with
     html:not(.hv-light):not(.dka-contrast-light) body.theme-v2
   so taking theme-v2 off <body> brings the light editor straight back,
   and the accessibility panel's light high-contrast mode gets the light
   editor too (its forced black-on-white then applies to a light page;
   the stage's own floating tools are exempt from that mode, so they
   simply keep their light look there).

   Sections: 1 tokens · 2 top bar · 3 menus, popovers, AI + help
   · 4 stage + canvas frame · 5 side panel + fields · 6 on-canvas
   overlays · 7 dock, toasts, preview bar · 8 dialogs + add-section
   gallery · 9 publish, share, upgrade · 10 page screens (intro, my
   sites, wizard, AI dialogs, legacy sidebar) · 11 phones · 12 motion
   + accessibility modes. */

/* ============================================================ 1 tokens */
html:not(.hv-light):not(.dka-contrast-light) body.theme-v2 {
  --sx: var(--v2-site);                 /* #3d8bff: lines, rings, glows */
  --sx-hi: #8cbcff;                     /* accent text on dark: 8.9:1 */
  --sx-fill: #1f68e6;                   /* solid fills under white text: 5:1 */
  --sx-fill-hi: #4a93ff;
  --sx-on: #031432;                     /* dark text on the bright blue: 5.6:1 */
  --sx-soft: rgba(61, 139, 255, .14);
  --sx-ring: rgba(var(--v2-site-rgb), .55);
  --sx-pop-bg: linear-gradient(180deg, #121926, #0c111b);
  --sx-pop-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1), 0 24px 60px -18px rgba(var(--v2-shade-rgb), calc(.9 * var(--v2-shade-k))), 0 2px 8px rgba(var(--v2-shade-rgb), calc(.4 * var(--v2-shade-k)));
}
/* The editor's own tokens (css/site-editor.css reads these everywhere) and
   the older shared names its pieces from css/builder-shell.css read. */
html:not(.hv-light):not(.dka-contrast-light) body.theme-v2 :is(.bsx, .bsx-modal-back, .bsx-pop, .bsx-help, .dk-publish-overlay, .domain-guide-overlay) {
  --bsx-accent: var(--sx);
  --bsx-accent-dark: var(--sx-hi);
  --bsx-accent-soft: var(--sx-soft);
  --bsx-ink: var(--v2-hi);
  --bsx-text: var(--v2-text);
  --bsx-muted: var(--v2-muted);
  --bsx-line: var(--v2-line);
  --bsx-line-strong: var(--v2-line-2);
  --bsx-surface: var(--v2-panel);
  --bsx-stage: var(--v2-bg);
  --bsx-danger: var(--v2-danger);
  --bsx-shadow: var(--sx-pop-shadow);
  --primary: var(--sx); --primary-dark: var(--sx-hi); --primary-light: var(--sx-soft);
  --brand-color: var(--sx); --brand-dark: var(--sx-fill);
  --success: var(--v2-ok); --warning: var(--v2-warn); --error: var(--v2-danger);
  --tool: var(--sx);
}
html:not(.hv-light):not(.dka-contrast-light) body.theme-v2 .bsx { color-scheme: dark; }
html:not(.hv-light):not(.dka-contrast-light) body.theme-v2 .bsx :focus-visible { outline: 2px solid var(--sx-hi); outline-offset: 2px; }

/* ============================================================ 2 top bar */
html:not(.hv-light):not(.dka-contrast-light) body.theme-v2 .bsx-top {
  background: linear-gradient(180deg, var(--v2-well), var(--v2-bg-2)); border-bottom: 1px solid var(--v2-line);
  box-shadow: 0 10px 30px -18px rgba(var(--v2-shade-rgb), calc(.9 * var(--v2-shade-k)));
}
html:not(.hv-light):not(.dka-contrast-light) body.theme-v2 .bsx-top::after { /* a hairline of the tool's light along the base */
  content: ""; position: absolute; inset-inline: 0; bottom: -1px; height: 1px; pointer-events: none;
  background: linear-gradient(90deg, transparent 4%, rgba(var(--v2-site-rgb), .55) 50%, transparent 96%); opacity: .75;
}
html:not(.hv-light):not(.dka-contrast-light) body.theme-v2 .bsx-icon-btn { color: var(--v2-text-3); }
html:not(.hv-light):not(.dka-contrast-light) body.theme-v2 .bsx-icon-btn:hover:not(:disabled) { background: rgba(var(--v2-fg-rgb), .07); color: var(--v2-hi); }
html:not(.hv-light):not(.dka-contrast-light) body.theme-v2 .bsx-icon-btn:active:not(:disabled) { background: rgba(var(--v2-fg-rgb), .11); }
html:not(.hv-light):not(.dka-contrast-light) body.theme-v2 .bsx-icon-btn:disabled { opacity: .3; }
html:not(.hv-light):not(.dka-contrast-light) body.theme-v2 :is(.bsx-icon-btn, .bsx-btn-ghost).is-on { background: var(--sx-soft); color: var(--sx-hi); box-shadow: inset 0 0 0 1px rgba(var(--v2-site-rgb), .4); }
html:not(.hv-light):not(.dka-contrast-light) body.theme-v2 .bsx-btn { background: rgba(var(--v2-fg-rgb), .04); border-color: var(--v2-line-2); color: var(--v2-text); }
html:not(.hv-light):not(.dka-contrast-light) body.theme-v2 .bsx-btn:hover:not(:disabled) { background: rgba(var(--v2-fg-rgb), .08); border-color: var(--v2-line-3); color: var(--v2-hi); }
html:not(.hv-light):not(.dka-contrast-light) body.theme-v2 .bsx-btn-ghost { background: transparent; border-color: transparent; color: var(--v2-text-3); }
html:not(.hv-light):not(.dka-contrast-light) body.theme-v2 .bsx-btn-ghost:hover:not(:disabled) { background: rgba(var(--v2-fg-rgb), .07); border-color: transparent; }
/* Primary (Publish, "apply" in panels, the AI send): the site's neon. */
html:not(.hv-light):not(.dka-contrast-light) body.theme-v2 .bsx-btn-primary {
  color: var(--sx-on); border-color: transparent; font-weight: 700;
  background: linear-gradient(180deg, #7fb4ff, var(--sx));
  box-shadow: inset 0 0 0 1px rgba(170, 205, 255, .6), inset 0 1px 0 rgba(255, 255, 255, .45), 0 10px 28px -12px rgba(var(--v2-site-rgb), calc(.85 * var(--v2-glow-k))), 0 0 36px -14px rgba(var(--v2-site-rgb), calc(.8 * var(--v2-glow-k)));
  transition: background .15s var(--v2-ease), box-shadow var(--v2-fast) var(--v2-ease), transform var(--v2-fast) var(--v2-ease);
}
html:not(.hv-light):not(.dka-contrast-light) body.theme-v2 .bsx-btn-primary:hover:not(:disabled) {
  color: var(--sx-on); border-color: transparent; background: linear-gradient(180deg, #9cc6ff, #5a9dff); transform: translateY(-1px);
  box-shadow: inset 0 0 0 1px rgba(200, 225, 255, .8), inset 0 1px 0 rgba(255, 255, 255, .55), 0 14px 34px -12px rgba(var(--v2-site-rgb), calc(.95 * var(--v2-glow-k))), 0 0 48px -12px rgba(var(--v2-site-rgb), calc(.9 * var(--v2-glow-k)));
}
html:not(.hv-light):not(.dka-contrast-light) body.theme-v2 .bsx-btn-primary:active:not(:disabled) { transform: none; background: var(--sx); }
html:not(.hv-light):not(.dka-contrast-light) body.theme-v2 .bsx-btn-primary:focus-visible { outline-color: var(--v2-hi); outline-offset: 3px; }
html:not(.hv-light):not(.dka-contrast-light) body.theme-v2 .bsx-btn-danger { color: var(--v2-danger); }
html:not(.hv-light):not(.dka-contrast-light) body.theme-v2 .bsx-btn-danger:hover:not(:disabled) { background: var(--v2-danger-bg); border-color: rgba(var(--v2-danger-rgb), .4); color: var(--v2-danger-hi); }
html:not(.hv-light):not(.dka-contrast-light) body.theme-v2 .bsx-btn-danger.bsx-btn-solid { background: #c2414f; border-color: #c2414f; color: #fff; }
html:not(.hv-light):not(.dka-contrast-light) body.theme-v2 #bshell-publish-btn { border-radius: 999px; padding-inline: 18px; }

html:not(.hv-light):not(.dka-contrast-light) body.theme-v2 .bsx-back { color: var(--v2-dim); }
html:not(.hv-light):not(.dka-contrast-light) body.theme-v2 .bsx-back:hover { background: rgba(var(--v2-fg-rgb), .06); color: var(--v2-hi); }
html:not(.hv-light):not(.dka-contrast-light) body.theme-v2 .bsx-top-sep { background: var(--v2-line-2); }
html:not(.hv-light):not(.dka-contrast-light) body.theme-v2 .bsx-name { color: var(--v2-hi); letter-spacing: -.005em; }
html:not(.hv-light):not(.dka-contrast-light) body.theme-v2 .bsx .dk-crumb, html:not(.hv-light):not(.dka-contrast-light) body.theme-v2 .bsx .dk-crumb-current { color: var(--v2-hi); }
/* Save status: a small lit pill */
html:not(.hv-light):not(.dka-contrast-light) body.theme-v2 .bsx .bshell-top-status { color: var(--v2-muted); }
html:not(.hv-light):not(.dka-contrast-light) body.theme-v2 .bsx .bshell-top-status.saved { color: var(--v2-ok); background: rgba(var(--v2-ok-rgb), .08); box-shadow: inset 0 0 0 1px rgba(var(--v2-ok-rgb), .22); }
html:not(.hv-light):not(.dka-contrast-light) body.theme-v2 .bsx .bshell-top-status.saved::before { box-shadow: 0 0 8px var(--v2-ok); }
html:not(.hv-light):not(.dka-contrast-light) body.theme-v2 .bsx .bshell-top-status.saving { color: var(--v2-warn); background: rgba(var(--v2-warn-rgb), .08); box-shadow: inset 0 0 0 1px rgba(var(--v2-warn-rgb), .22); }
html:not(.hv-light):not(.dka-contrast-light) body.theme-v2 .bsx .bshell-top-status.failed, html:not(.hv-light):not(.dka-contrast-light) body.theme-v2 .bsx .bshell-top-status.limit { color: var(--v2-danger); background: var(--v2-danger-bg); box-shadow: inset 0 0 0 1px rgba(var(--v2-danger-rgb), .3); }
html:not(.hv-light):not(.dka-contrast-light) body.theme-v2 .bsx-status-retry { color: var(--v2-danger-hi); }
/* Phone / tablet / desktop switch */
html:not(.hv-light):not(.dka-contrast-light) body.theme-v2 .bsx-devices { background: rgba(var(--v2-fg-rgb), .035); box-shadow: inset 0 0 0 1px var(--v2-line); }
html:not(.hv-light):not(.dka-contrast-light) body.theme-v2 .bsx .bshell-device-btn { color: var(--v2-muted); background: transparent; border: 0; }
html:not(.hv-light):not(.dka-contrast-light) body.theme-v2 .bsx .bshell-device-btn:hover:not(.active) { color: var(--v2-hi); background: rgba(var(--v2-fg-rgb), .05); }
html:not(.hv-light):not(.dka-contrast-light) body.theme-v2 .bsx .bshell-device-btn.active { color: var(--v2-hi); background: var(--sx-soft); box-shadow: inset 0 0 0 1px rgba(var(--v2-site-rgb), .55), 0 0 16px -6px var(--sx); }

/* ======================================= 3 menus, popovers, AI + help */
html:not(.hv-light):not(.dka-contrast-light) body.theme-v2 :is(.bsx-menu, .bsx-pop, .bsx-help, .bsx .bsx-ai-panel) {
  background: var(--sx-pop-bg); border: 0; box-shadow: var(--sx-pop-shadow); color: var(--v2-text);
}
html:not(.hv-light):not(.dka-contrast-light) body.theme-v2 :is(.bsx-menu-item, .bsx-pop-item) { color: var(--v2-text); }
html:not(.hv-light):not(.dka-contrast-light) body.theme-v2 :is(.bsx-menu-item, .bsx-pop-item):is(:hover, :focus-visible) { background: rgba(var(--v2-fg-rgb), .06); color: var(--v2-hi); }
html:not(.hv-light):not(.dka-contrast-light) body.theme-v2 .bsx-menu-item svg { color: var(--v2-muted); }
html:not(.hv-light):not(.dka-contrast-light) body.theme-v2 .bsx-menu-item:hover svg { color: var(--sx-hi); }
html:not(.hv-light):not(.dka-contrast-light) body.theme-v2 :is(.bsx-menu-sep, .bsx-pop-sep) { background: var(--v2-line); }
html:not(.hv-light):not(.dka-contrast-light) body.theme-v2 .bsx-pop-item.is-on { background: var(--sx-soft); color: var(--sx-hi); }
html:not(.hv-light):not(.dka-contrast-light) body.theme-v2 .bsx-pop-item small { color: var(--v2-muted); }
html:not(.hv-light):not(.dka-contrast-light) body.theme-v2 .bsx-pop-row label { color: var(--v2-dim) !important; } /* inline colour in js/builder-shell.js */
html:not(.hv-light):not(.dka-contrast-light) body.theme-v2 .bsx-pop-row input:is([type="number"], [type="text"]) { background: var(--v2-panel-2); border-color: var(--v2-line-2); color: var(--v2-text); }
html:not(.hv-light):not(.dka-contrast-light) body.theme-v2 .bsx-pop-row input[type="color"] { background: var(--v2-panel-2); border-color: var(--v2-line-2) !important; }
html:not(.hv-light):not(.dka-contrast-light) body.theme-v2 .bsx-pop-colors button { border-color: var(--v2-panel-2); box-shadow: 0 0 0 1px var(--v2-line-3); }
html:not(.hv-light):not(.dka-contrast-light) body.theme-v2 .bsx-pop-colors button.is-on { box-shadow: 0 0 0 2px var(--sx); }
html:not(.hv-light):not(.dka-contrast-light) body.theme-v2 .bsx-help h3 { color: var(--v2-hi); }
html:not(.hv-light):not(.dka-contrast-light) body.theme-v2 .bsx-help ol { color: var(--v2-dim); }
html:not(.hv-light):not(.dka-contrast-light) body.theme-v2 .bsx-help kbd { background: rgba(var(--v2-fg-rgb), .06); border-color: var(--v2-line-2); color: var(--v2-hi); }
/* AI helper (top bar "⋯" → AI) */
html:not(.hv-light):not(.dka-contrast-light) body.theme-v2 .bsx .bsx-ai-panel { border-radius: 18px; }
html:not(.hv-light):not(.dka-contrast-light) body.theme-v2 .bsx .bsx-ai-panel::before { /* a soft blue light in its corner */
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: radial-gradient(90% 60% at 100% 0%, rgba(var(--v2-site-rgb), .14), transparent 60%);
}
html:not(.hv-light):not(.dka-contrast-light) body.theme-v2 .bsx-ai-head { color: var(--v2-hi); position: relative; }
html:not(.hv-light):not(.dka-contrast-light) body.theme-v2 .bsx .bsx-ai-panel input[type="text"] { background: var(--v2-panel-2); border-color: var(--v2-line-2); color: var(--v2-text); caret-color: var(--sx-hi); position: relative; }
html:not(.hv-light):not(.dka-contrast-light) body.theme-v2 .bsx .bsx-ai-panel input[type="text"]:focus { outline: none; border-color: var(--sx-ring); box-shadow: 0 0 0 4px rgba(var(--v2-site-rgb), .16); }
html:not(.hv-light):not(.dka-contrast-light) body.theme-v2 .bsx .bsx-ai-panel input::placeholder { color: var(--v2-faint); }
html:not(.hv-light):not(.dka-contrast-light) body.theme-v2 .bsx .bshell-ai-hint, html:not(.hv-light):not(.dka-contrast-light) body.theme-v2 .bsx .bshell-ai-note { color: var(--v2-muted); position: relative; }
html:not(.hv-light):not(.dka-contrast-light) body.theme-v2 .bsx .bshell-ai-examples { position: relative; }
html:not(.hv-light):not(.dka-contrast-light) body.theme-v2 .bsx .bshell-ai-examples button { background: rgba(var(--v2-fg-rgb), .035); border-color: var(--v2-line-2); color: var(--v2-dim); }
html:not(.hv-light):not(.dka-contrast-light) body.theme-v2 .bsx .bshell-ai-examples button:hover { border-color: var(--sx-ring); color: var(--v2-hi); background: var(--sx-soft); }
html:not(.hv-light):not(.dka-contrast-light) body.theme-v2 .bsx .bshell-ai-note .bshell-ai-confirm-row button { background: rgba(var(--v2-fg-rgb), .05); border-color: var(--v2-line-2); color: var(--v2-text); }
html:not(.hv-light):not(.dka-contrast-light) body.theme-v2 .bsx .bshell-ai-note .bshell-ai-confirm-row .bshell-ai-confirm-yes { background: var(--sx); border-color: var(--sx); color: var(--sx-on); }
html:not(.hv-light):not(.dka-contrast-light) body.theme-v2 .site-ai-skipped { color: var(--v2-warn); background: rgba(var(--v2-warn-rgb), .08); }
html:not(.hv-light):not(.dka-contrast-light) body.theme-v2 .site-ai-swatch { border-color: rgba(var(--v2-fg-rgb), .25); }

/* ============================================ 4 stage + canvas frame */
/* A deep desk lit faintly from above, with a fine dot grid, and the site
   on it as a lit page. */
html:not(.hv-light):not(.dka-contrast-light) body.theme-v2 .bsx.active { background: var(--v2-bg); }
html:not(.hv-light):not(.dka-contrast-light) body.theme-v2 .bsx-stage {
  background:
    radial-gradient(60% 46% at 50% -6%, rgba(var(--v2-site-rgb), .09), transparent 70%),
    radial-gradient(rgba(var(--v2-lift-rgb), .045) 1px, transparent 1.3px) 0 0 / 22px 22px,
    var(--v2-bg);
}
html:not(.hv-light):not(.dka-contrast-light) body.theme-v2 .bsx .bsx-frame {
  border-radius: 14px;
  box-shadow: 0 0 0 1px rgba(var(--v2-fg-rgb), .07), 0 2px 0 rgba(var(--v2-fg-rgb), .03), 0 40px 90px -30px rgba(var(--v2-shade-rgb), calc(.95 * var(--v2-shade-k))), 0 0 140px -50px rgba(var(--v2-site-rgb), calc(.45 * var(--v2-glow-k)));
}
/* Phone and tablet: the frame reads as a device on the desk (a ring drawn
   outside it, so the canvas keeps its true 390 / 768px width). */
html:not(.hv-light):not(.dka-contrast-light) body.theme-v2 .bsx .bsx-holder:is(.device-mobile, .device-tablet) .bsx-frame {
  border-radius: 22px; box-shadow: 0 0 0 1px rgba(var(--v2-fg-rgb), .1), 0 0 0 7px #10151f, 0 0 0 8px rgba(var(--v2-fg-rgb), .08), 0 40px 90px -30px rgba(var(--v2-shade-rgb), calc(.95 * var(--v2-shade-k))), 0 0 140px -50px rgba(var(--v2-site-rgb), calc(.5 * var(--v2-glow-k)));
}

/* ===================================== 5 side panel + its fields */
html:not(.hv-light):not(.dka-contrast-light) body.theme-v2 .bsx-panel {
  background: linear-gradient(180deg, #0c111b, var(--v2-card)); border-inline-start: 1px solid var(--v2-line);
  box-shadow: -24px 0 60px -40px rgba(var(--v2-shade-rgb), calc(.9 * var(--v2-shade-k)));
}
html:not(.hv-light):not(.dka-contrast-light) body.theme-v2 .bsx-panel-head { border-bottom: 1px solid var(--v2-line); }
html:not(.hv-light):not(.dka-contrast-light) body.theme-v2 .bsx-panel-title { color: var(--v2-hi); font-size: 15.5px; letter-spacing: -.005em; }
html:not(.hv-light):not(.dka-contrast-light) body.theme-v2 .bsx-panel-body { scrollbar-color: rgba(var(--v2-fg-rgb), .16) transparent; }
html:not(.hv-light):not(.dka-contrast-light) body.theme-v2 .bsx-pgroup { border-bottom-color: var(--v2-line); }
html:not(.hv-light):not(.dka-contrast-light) body.theme-v2 .bsx-pgroup-title, html:not(.hv-light):not(.dka-contrast-light) body.theme-v2 .bsx-panel-body .bshell-props-title { color: var(--sx-hi); letter-spacing: .04em; font-size: 11.5px; }
html:not(.hv-light):not(.dka-contrast-light) body.theme-v2 .bsx-label, html:not(.hv-light):not(.dka-contrast-light) body.theme-v2 .bsx-panel-body label { color: var(--v2-dim); }
html:not(.hv-light):not(.dka-contrast-light) body.theme-v2 .bsx-hint, html:not(.hv-light):not(.dka-contrast-light) body.theme-v2 .bsx-panel-body .field-hint { color: var(--v2-muted); }
html:not(.hv-light):not(.dka-contrast-light) body.theme-v2 .bsx-note-global { color: var(--sx-hi); background: var(--sx-soft); border-color: rgba(var(--v2-site-rgb), .3); }
html:not(.hv-light):not(.dka-contrast-light) body.theme-v2 :is(.bsx-input, .bsx-panel-body :is(input[type="text"], input[type="url"], input[type="number"], input[type="tel"], input[type="email"], input[type="search"], textarea, select), .bsx-tools-field input) {
  background: var(--v2-panel-2); border: 1px solid var(--v2-line-2); color: var(--v2-text); caret-color: var(--sx-hi);
}
html:not(.hv-light):not(.dka-contrast-light) body.theme-v2 :is(.bsx-input, .bsx-panel-body :is(input, textarea, select), .bsx-tools-field input):hover { border-color: var(--v2-line-3); }
html:not(.hv-light):not(.dka-contrast-light) body.theme-v2 :is(.bsx-input, .bsx-panel-body :is(input, textarea, select), .bsx-tools-field input):focus { outline: none; border-color: var(--sx-ring); box-shadow: 0 0 0 4px rgba(var(--v2-site-rgb), .16); background: var(--v2-field-focus); }
html:not(.hv-light):not(.dka-contrast-light) body.theme-v2 :is(.bsx-input, .bsx-panel-body :is(input, textarea), .bsx-tools-field input)::placeholder { color: var(--v2-faint); }
html:not(.hv-light):not(.dka-contrast-light) body.theme-v2 .bsx-panel-body select option { background: var(--v2-panel-2); color: var(--v2-text); }
html:not(.hv-light):not(.dka-contrast-light) body.theme-v2 .bsx-panel-body input[type="color"] { background: var(--v2-panel-2); border-color: var(--v2-line-2); }
/* Switches */
html:not(.hv-light):not(.dka-contrast-light) body.theme-v2 .bsx-toggle { color: var(--v2-text); }
html:not(.hv-light):not(.dka-contrast-light) body.theme-v2 .bsx-toggle input { background: rgba(var(--v2-fg-rgb), .1); box-shadow: inset 0 0 0 1px var(--v2-line-2); }
html:not(.hv-light):not(.dka-contrast-light) body.theme-v2 .bsx-toggle input::after { background: var(--v2-knob); box-shadow: 0 1px 3px rgba(var(--v2-shade-rgb), calc(.5 * var(--v2-shade-k))); }
html:not(.hv-light):not(.dka-contrast-light) body.theme-v2 .bsx-toggle input:checked { background: color-mix(in srgb, var(--sx) 70%, var(--v2-panel)); box-shadow: inset 0 0 0 1px var(--sx), 0 0 14px -4px var(--sx); }
html:not(.hv-light):not(.dka-contrast-light) body.theme-v2 .bsx-toggle input:checked::after { background: #fff; }
/* Segmented buttons */
html:not(.hv-light):not(.dka-contrast-light) body.theme-v2 .bsx-seg { background: rgba(var(--v2-fg-rgb), .035); box-shadow: inset 0 0 0 1px var(--v2-line); }
html:not(.hv-light):not(.dka-contrast-light) body.theme-v2 .bsx-seg button { color: var(--v2-dim); }
html:not(.hv-light):not(.dka-contrast-light) body.theme-v2 .bsx-seg button:hover:not(.is-on) { color: var(--v2-hi); background: rgba(var(--v2-fg-rgb), .04); }
html:not(.hv-light):not(.dka-contrast-light) body.theme-v2 .bsx-seg button.is-on { background: var(--sx-soft); color: var(--v2-hi); box-shadow: inset 0 0 0 1px rgba(var(--v2-site-rgb), .55); }
/* Colours, lists, thumbs */
html:not(.hv-light):not(.dka-contrast-light) body.theme-v2 .bsx-swatch { border-color: #0c111b; box-shadow: 0 0 0 1px var(--v2-line-3); }
html:not(.hv-light):not(.dka-contrast-light) body.theme-v2 .bsx-swatch.is-on { box-shadow: 0 0 0 2px var(--sx), 0 0 12px -2px var(--sx); }
html:not(.hv-light):not(.dka-contrast-light) body.theme-v2 .bsx-palette-strip { border-color: var(--v2-line-2); }
html:not(.hv-light):not(.dka-contrast-light) body.theme-v2 .bsx-list-row { background: rgba(var(--v2-fg-rgb), .025); border-color: var(--v2-line); color: var(--v2-text); }
html:not(.hv-light):not(.dka-contrast-light) body.theme-v2 .bsx-list-row:hover { border-color: var(--v2-line-2); background: rgba(var(--v2-fg-rgb), .04); }
html:not(.hv-light):not(.dka-contrast-light) body.theme-v2 .bsx-list-row.is-selected { border-color: var(--sx-ring); background: rgba(var(--v2-site-rgb), .08); box-shadow: 0 0 18px -10px var(--sx); }
html:not(.hv-light):not(.dka-contrast-light) body.theme-v2 .bsx-list-row.is-fixed { background: rgba(var(--v2-fg-rgb), .012); }
html:not(.hv-light):not(.dka-contrast-light) body.theme-v2 .bsx-list-row.is-hidden .bsx-list-name { color: var(--v2-faint); text-decoration-color: rgba(139, 149, 168, .5); }
html:not(.hv-light):not(.dka-contrast-light) body.theme-v2 .bsx-grip { color: var(--v2-faint); }
html:not(.hv-light):not(.dka-contrast-light) body.theme-v2 .bsx-grip:hover { color: var(--v2-dim); }
html:not(.hv-light):not(.dka-contrast-light) body.theme-v2 .bsx-tag { color: var(--v2-muted); background: rgba(var(--v2-fg-rgb), .06); }
html:not(.hv-light):not(.dka-contrast-light) body.theme-v2 .bsx-thumb { background: var(--v2-panel-2); }
html:not(.hv-light):not(.dka-contrast-light) body.theme-v2 .bsx-thumb.is-on { border-color: var(--sx); box-shadow: 0 0 14px -4px var(--sx); }
html:not(.hv-light):not(.dka-contrast-light) body.theme-v2 .bsx-focal { border-color: var(--v2-line-2); }
html:not(.hv-light):not(.dka-contrast-light) body.theme-v2 .bsx-focal button.is-on::after { background: var(--sx); }
html:not(.hv-light):not(.dka-contrast-light) body.theme-v2 .bsx-empty { color: var(--v2-muted); }
html:not(.hv-light):not(.dka-contrast-light) body.theme-v2 .bsx-logo-thumb {
  border-color: var(--v2-line-2); background-color: var(--v2-panel-2);
  background-image: linear-gradient(45deg, #161c28 25%, transparent 25%, transparent 75%, #161c28 75%), linear-gradient(45deg, #161c28 25%, transparent 25%, transparent 75%, #161c28 75%);
}
html:not(.hv-light):not(.dka-contrast-light) body.theme-v2 .bsx-logo-thumb span { color: var(--v2-faint); }
html:not(.hv-light):not(.dka-contrast-light) body.theme-v2 .bsx-fav-thumb { border-color: var(--v2-line-2); background: var(--v2-panel-2); }
/* Design moods, SEO, share image (css/builder-shell.css pieces) */
html:not(.hv-light):not(.dka-contrast-light) body.theme-v2 .bsx .bshell-mood-btn { background: rgba(var(--v2-fg-rgb), .03); border-color: var(--v2-line-2); color: var(--v2-text); }
html:not(.hv-light):not(.dka-contrast-light) body.theme-v2 .bsx .bshell-mood-btn:hover { border-color: var(--sx-ring); }
html:not(.hv-light):not(.dka-contrast-light) body.theme-v2 .bsx .bshell-mood-btn.active { border-color: var(--sx); background: var(--sx-soft); color: var(--v2-hi); box-shadow: 0 0 18px -8px var(--sx); }
html:not(.hv-light):not(.dka-contrast-light) body.theme-v2 .bsx .bshell-mood-swatch { border-color: rgba(var(--v2-fg-rgb), .18); }
html:not(.hv-light):not(.dka-contrast-light) body.theme-v2 .bsx .bshell-mood-restore { color: var(--sx-hi); }
html:not(.hv-light):not(.dka-contrast-light) body.theme-v2 .bsx .bshell-seo-count.is-good { color: var(--v2-ok); }
html:not(.hv-light):not(.dka-contrast-light) body.theme-v2 .bsx .bshell-seo-count.is-warn { color: var(--v2-warn); }
html:not(.hv-light):not(.dka-contrast-light) body.theme-v2 .bsx .bshell-serp-toggle { border-color: var(--v2-line-2); }
html:not(.hv-light):not(.dka-contrast-light) body.theme-v2 .bsx .bshell-serp-toggle button { color: var(--v2-dim); }
html:not(.hv-light):not(.dka-contrast-light) body.theme-v2 .bsx .bshell-serp-toggle button.active { background: var(--sx-soft); color: var(--v2-hi); }
html:not(.hv-light):not(.dka-contrast-light) body.theme-v2 .bsx .bshell-serp-scroll { border-color: var(--v2-line-2); } /* the Google result itself stays white */
html:not(.hv-light):not(.dka-contrast-light) body.theme-v2 .bsx .bshell-og-opt { background: rgba(var(--v2-fg-rgb), .03); border-color: var(--v2-line-2); color: var(--v2-dim); }
html:not(.hv-light):not(.dka-contrast-light) body.theme-v2 .bsx .bshell-og-opt.active { border-color: var(--sx); background: var(--sx-soft); color: var(--v2-hi); }
html:not(.hv-light):not(.dka-contrast-light) body.theme-v2 .bsx .bshell-og-opt :is(img, .site-photo-placeholder) { background: var(--v2-panel-2); }
/* Site address in the settings panel */
html:not(.hv-light):not(.dka-contrast-light) body.theme-v2 .bsx-site-address .publish-url-box { background: var(--v2-panel-2); border-color: var(--v2-line-2); }
html:not(.hv-light):not(.dka-contrast-light) body.theme-v2 .bsx-site-address .publish-url-text { color: var(--sx-hi); }
html:not(.hv-light):not(.dka-contrast-light) body.theme-v2 .bsx-site-address :is(.publish-copy-btn, .btn-mini) { background: rgba(var(--v2-fg-rgb), .05); color: var(--v2-text); border-color: var(--v2-line-2); }
html:not(.hv-light):not(.dka-contrast-light) body.theme-v2 .bsx-site-address :is(.publish-copy-btn, .btn-mini):hover { background: rgba(var(--v2-fg-rgb), .1); color: var(--v2-hi); }
html:not(.hv-light):not(.dka-contrast-light) body.theme-v2 .bsx-site-address .btn-teal { color: var(--sx-on); background: linear-gradient(180deg, #7fb4ff, var(--sx)); box-shadow: inset 0 0 0 1px rgba(170, 205, 255, .6), 0 10px 26px -12px rgba(var(--v2-site-rgb), calc(.8 * var(--v2-glow-k))); }
html:not(.hv-light):not(.dka-contrast-light) body.theme-v2 .bsx-site-address .btn-teal:hover { background: linear-gradient(180deg, #9cc6ff, #5a9dff); color: var(--sx-on); }
html:not(.hv-light):not(.dka-contrast-light) body.theme-v2 .bsx-site-address .host-info-box { background: rgba(var(--v2-fg-rgb), .03) !important; border-color: var(--v2-line-2); color: var(--v2-dim) !important; }
html:not(.hv-light):not(.dka-contrast-light) body.theme-v2 .bsx-site-address .host-info-box b { color: var(--v2-hi); }

/* =============================================== 6 on-canvas overlays
   They sit over the customer's site, which can be any colour: every
   outline is the site blue with a thin white keyline (visible on dark
   and on blue sites) and a soft glow (visible on white ones). */
html:not(.hv-light):not(.dka-contrast-light) body.theme-v2 .bsx-box.is-hover { box-shadow: 0 0 0 1.5px var(--sx), 0 0 0 2.5px rgba(255, 255, 255, .7); }
html:not(.hv-light):not(.dka-contrast-light) body.theme-v2 .bsx-box.is-sel { box-shadow: 0 0 0 2px var(--sx), 0 0 0 3px rgba(255, 255, 255, .9), 0 0 22px 2px rgba(61, 139, 255, .45); }
html:not(.hv-light):not(.dka-contrast-light) body.theme-v2 .bsx-box.is-editing { box-shadow: 0 0 0 2px var(--sx-fill), 0 0 0 3px rgba(255, 255, 255, .9), 0 0 0 7px rgba(61, 139, 255, .22); }
html:not(.hv-light):not(.dka-contrast-light) body.theme-v2 .bsx-box.is-sec { box-shadow: inset 0 0 0 1.5px rgba(61, 139, 255, .8), inset 0 0 0 2.5px rgba(255, 255, 255, .4); }
html:not(.hv-light):not(.dka-contrast-light) body.theme-v2 .bsx-box.is-sec.is-sel { box-shadow: inset 0 0 0 2px var(--sx), inset 0 0 0 3px rgba(255, 255, 255, .7), inset 0 0 40px -18px rgba(61, 139, 255, .7); }
html:not(.hv-light):not(.dka-contrast-light) body.theme-v2 .bsx-chip {
  color: #fff; background: linear-gradient(180deg, #3a83ff, var(--sx-fill));
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .55), 0 4px 12px -4px rgba(10, 40, 110, .6); letter-spacing: .01em;
}
html:not(.hv-light):not(.dka-contrast-light) body.theme-v2 .bsx-chip.is-sec { background: linear-gradient(180deg, #2a72f0, #1858cc); box-shadow: 0 0 0 1px rgba(255, 255, 255, .45); }
html:not(.hv-light):not(.dka-contrast-light) body.theme-v2 .bsx-chip.is-global { background: #0c111b; color: #fff; box-shadow: 0 0 0 1px rgba(255, 255, 255, .35); }
/* The element toolbar: a dark floating glass bar */
html:not(.hv-light):not(.dka-contrast-light) body.theme-v2 .bsx-tools {
  background: rgba(13, 18, 28, .96); border: 0; color: var(--v2-text); border-radius: 14px;
  box-shadow: inset 0 0 0 1px rgba(var(--v2-fg-rgb), .12), 0 18px 44px -14px rgba(var(--v2-shade-rgb), calc(.85 * var(--v2-shade-k))), 0 0 0 1px rgba(var(--v2-shade-rgb), calc(.35 * var(--v2-shade-k)));
  -webkit-backdrop-filter: blur(10px) saturate(140%); backdrop-filter: blur(10px) saturate(140%);
}
html:not(.hv-light):not(.dka-contrast-light) body.theme-v2 .bsx-tools .bsx-icon-btn { color: #dfe6f1; }
html:not(.hv-light):not(.dka-contrast-light) body.theme-v2 .bsx-tools-sep { background: var(--v2-line-2); }
html:not(.hv-light):not(.dka-contrast-light) body.theme-v2 .bsx-tool-txt { color: var(--v2-text); }
html:not(.hv-light):not(.dka-contrast-light) body.theme-v2 :is(.bsx-tool-txt, .bsx-tool-color):hover { background: rgba(var(--v2-fg-rgb), .08); color: var(--v2-hi); }
html:not(.hv-light):not(.dka-contrast-light) body.theme-v2 .bsx-tool-color i { box-shadow: inset 0 0 0 1px rgba(var(--v2-fg-rgb), .3); }
html:not(.hv-light):not(.dka-contrast-light) body.theme-v2 .bsx-tools .bsx-danger:hover { color: var(--v2-danger-hi); background: var(--v2-danger-bg); }
html:not(.hv-light):not(.dka-contrast-light) body.theme-v2 .bsx-tools-note { color: var(--sx-hi); }
/* The section toolbar: solid site blue */
html:not(.hv-light):not(.dka-contrast-light) body.theme-v2 .bsx-sectools {
  background: linear-gradient(180deg, #2f78f5, var(--sx-fill)); border: 0;
  box-shadow: inset 0 0 0 1px rgba(var(--v2-fg-rgb), .3), 0 12px 30px -10px rgba(10, 50, 140, .7);
}
html:not(.hv-light):not(.dka-contrast-light) body.theme-v2 .bsx-sectools .bsx-icon-btn, html:not(.hv-light):not(.dka-contrast-light) body.theme-v2 .bsx-sectools .bsx-grip, html:not(.hv-light):not(.dka-contrast-light) body.theme-v2 .bsx-sectools .bsx-tool-txt { color: var(--v2-hi); }
html:not(.hv-light):not(.dka-contrast-light) body.theme-v2 .bsx-sectools .bsx-icon-btn:hover:not(:disabled), html:not(.hv-light):not(.dka-contrast-light) body.theme-v2 .bsx-sectools .bsx-tool-txt:hover { background: rgba(var(--v2-fg-rgb), .18); }
html:not(.hv-light):not(.dka-contrast-light) body.theme-v2 .bsx-sectools .bsx-tools-sep { background: rgba(var(--v2-fg-rgb), .3); }
/* "+" between sections */
html:not(.hv-light):not(.dka-contrast-light) body.theme-v2 .bsx-insert {
  border: 2px solid #fff; color: #fff; background: linear-gradient(180deg, #4a93ff, var(--sx-fill));
  box-shadow: 0 0 0 1px rgba(10, 40, 110, .25), 0 8px 22px -6px rgba(31, 104, 230, .75), 0 0 26px -6px rgba(var(--v2-site-rgb), calc(.7 * var(--v2-glow-k)));
  transition: transform var(--v2-fast) var(--v2-ease), box-shadow var(--v2-fast) var(--v2-ease);
}
html:not(.hv-light):not(.dka-contrast-light) body.theme-v2 .bsx-insert:hover { background: linear-gradient(180deg, #6aa6ff, #2a74f0); transform: translate(-50%, -50%) scale(1.04); box-shadow: 0 0 0 1px rgba(10, 40, 110, .25), 0 10px 26px -6px rgba(31, 104, 230, .9), 0 0 34px -4px rgba(var(--v2-site-rgb), calc(.85 * var(--v2-glow-k))); }
html:not(.hv-light):not(.dka-contrast-light) body.theme-v2 .bsx-insert:focus-visible { outline: 2px solid var(--v2-hi); outline-offset: 2px; box-shadow: 0 0 0 5px var(--sx-fill); }
html:not(.hv-light):not(.dka-contrast-light) body.theme-v2 .bsx-insert-line { border-top: 2px dashed rgba(61, 139, 255, .85); filter: drop-shadow(0 0 1px rgba(255, 255, 255, .8)); }
html:not(.hv-light):not(.dka-contrast-light) body.theme-v2 .bsx-drop-line { background: var(--sx); box-shadow: 0 0 0 1px #fff, 0 0 14px 2px rgba(var(--v2-site-rgb), calc(.6 * var(--v2-glow-k))); }
html:not(.hv-light):not(.dka-contrast-light) body.theme-v2 .bsx-drag-ghost { background: linear-gradient(180deg, #2f78f5, var(--sx-fill)); box-shadow: inset 0 0 0 1px rgba(var(--v2-fg-rgb), .3), 0 14px 34px -10px rgba(var(--v2-shade-rgb), calc(.7 * var(--v2-shade-k))); }

/* ===================================== 7 dock, toasts, preview bar */
html:not(.hv-light):not(.dka-contrast-light) body.theme-v2 .bsx-dock {
  background: rgba(11, 15, 24, .9); border: 0; border-radius: 20px; padding: 6px;
  box-shadow: inset 0 0 0 1px rgba(var(--v2-fg-rgb), .1), 0 24px 60px -20px rgba(var(--v2-shade-rgb), calc(.95 * var(--v2-shade-k))), 0 0 60px -30px rgba(var(--v2-site-rgb), calc(.5 * var(--v2-glow-k)));
  -webkit-backdrop-filter: blur(14px) saturate(150%); backdrop-filter: blur(14px) saturate(150%);
}
html:not(.hv-light):not(.dka-contrast-light) body.theme-v2 .bsx-dock-btn { color: #b9c2d0; border-radius: 14px; transition: background var(--v2-fast) var(--v2-ease), color var(--v2-fast) var(--v2-ease), box-shadow var(--v2-fast) var(--v2-ease); }
html:not(.hv-light):not(.dka-contrast-light) body.theme-v2 .bsx-dock-btn:hover { background: rgba(var(--v2-fg-rgb), .06); color: var(--v2-hi); }
html:not(.hv-light):not(.dka-contrast-light) body.theme-v2 .bsx-dock-btn:hover svg { color: var(--sx-hi); }
html:not(.hv-light):not(.dka-contrast-light) body.theme-v2 .bsx-dock-btn.is-primary {
  color: #fff; background: linear-gradient(180deg, #4a93ff, var(--sx-fill));
  box-shadow: inset 0 0 0 1px rgba(170, 205, 255, .45), inset 0 1px 0 rgba(255, 255, 255, .3), 0 8px 24px -10px rgba(var(--v2-site-rgb), calc(.9 * var(--v2-glow-k)));
}
html:not(.hv-light):not(.dka-contrast-light) body.theme-v2 .bsx-dock-btn.is-primary:hover { background: linear-gradient(180deg, #6aa6ff, #2a74f0); }
html:not(.hv-light):not(.dka-contrast-light) body.theme-v2 .bsx-dock-btn.is-primary:hover svg { color: #fff; }
html:not(.hv-light):not(.dka-contrast-light) body.theme-v2 .bsx-dock-btn.is-on { background: var(--sx-soft); color: var(--sx-hi); box-shadow: inset 0 0 0 1px rgba(var(--v2-site-rgb), .45); }
html:not(.hv-light):not(.dka-contrast-light) body.theme-v2 .bsx-dock-sep { background: var(--v2-line-2); }
html:not(.hv-light):not(.dka-contrast-light) body.theme-v2 .bsx-toast {
  background: rgba(var(--v2-raise-rgb), .97); color: var(--v2-text); border-inline-start: 3px solid var(--sx);
  box-shadow: inset 0 0 0 1px var(--v2-line-2), 0 20px 50px -16px rgba(var(--v2-shade-rgb), calc(.9 * var(--v2-shade-k)));
}
html:not(.hv-light):not(.dka-contrast-light) body.theme-v2 .bsx-toast button { background: var(--sx-soft); color: var(--sx-hi); }
html:not(.hv-light):not(.dka-contrast-light) body.theme-v2 .bsx-toast button:hover { background: rgba(var(--v2-site-rgb), .26); color: var(--v2-hi); }
html:not(.hv-light):not(.dka-contrast-light) body.theme-v2 .bsx-toast.is-error { background: #24121a; border-inline-start-color: var(--v2-danger); }
html:not(.hv-light):not(.dka-contrast-light) body.theme-v2 .bsx-preview-bar {
  background: rgba(11, 15, 24, .92); color: var(--v2-text);
  box-shadow: inset 0 0 0 1px rgba(var(--v2-fg-rgb), .12), 0 18px 44px -14px rgba(var(--v2-shade-rgb), calc(.9 * var(--v2-shade-k)));
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
}
html:not(.hv-light):not(.dka-contrast-light) body.theme-v2 .bsx-preview-bar button { background: rgba(var(--v2-fg-rgb), .08); color: var(--v2-hi); }
html:not(.hv-light):not(.dka-contrast-light) body.theme-v2 .bsx-preview-bar button:hover { background: rgba(var(--v2-fg-rgb), .14); }
html:not(.hv-light):not(.dka-contrast-light) body.theme-v2 .bsx-preview-bar button.is-primary { background: linear-gradient(180deg, #7fb4ff, var(--sx)); color: var(--sx-on); }

/* ================================ 8 dialogs + the add-section gallery */
html:not(.hv-light):not(.dka-contrast-light) body.theme-v2 .bsx-modal-back { background: rgba(var(--v2-scrim-rgb), calc(.74 * var(--v2-scrim-k))); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
html:not(.hv-light):not(.dka-contrast-light) body.theme-v2 .bsx-modal {
  border-radius: 24px; color: var(--v2-text);
  background: radial-gradient(90% 60% at 100% 0%, rgba(var(--v2-site-rgb), .09), transparent 55%), linear-gradient(180deg, var(--v2-raise), var(--v2-panel));
  box-shadow: inset 0 0 0 1px var(--v2-line-2), 0 40px 100px -30px rgba(var(--v2-shade-rgb), calc(.95 * var(--v2-shade-k))), 0 0 90px -40px rgba(var(--v2-site-rgb), calc(.45 * var(--v2-glow-k)));
}
html[dir="rtl"]:not(.hv-light):not(.dka-contrast-light) body.theme-v2 .bsx-modal { background: radial-gradient(90% 60% at 0% 0%, rgba(var(--v2-site-rgb), .09), transparent 55%), linear-gradient(180deg, var(--v2-raise), var(--v2-panel)); }
html:not(.hv-light):not(.dka-contrast-light) body.theme-v2 .bsx-modal-head { border-bottom-color: var(--v2-line); padding: 18px 20px; }
html:not(.hv-light):not(.dka-contrast-light) body.theme-v2 .bsx-modal-head h2 { color: var(--v2-hi); letter-spacing: -.01em; }
html:not(.hv-light):not(.dka-contrast-light) body.theme-v2 .bsx-modal-head p { color: var(--v2-muted); }
html:not(.hv-light):not(.dka-contrast-light) body.theme-v2 .bsx-modal-x { color: var(--v2-dim); background: rgba(var(--v2-fg-rgb), .05); border-radius: 999px; }
html:not(.hv-light):not(.dka-contrast-light) body.theme-v2 .bsx-modal-x:hover { background: rgba(var(--v2-fg-rgb), .11); color: var(--v2-hi); }
html:not(.hv-light):not(.dka-contrast-light) body.theme-v2 .bsx-modal-text { color: var(--v2-dim); }
html:not(.hv-light):not(.dka-contrast-light) body.theme-v2 .bsx-modal-text :is(b, strong) { color: var(--v2-hi); }
html:not(.hv-light):not(.dka-contrast-light) body.theme-v2 .bsx-modal-foot button { background: rgba(var(--v2-fg-rgb), .05); border-color: var(--v2-line-2); color: var(--v2-text); border-radius: 999px; }
html:not(.hv-light):not(.dka-contrast-light) body.theme-v2 .bsx-modal-foot button:hover { background: rgba(var(--v2-fg-rgb), .1); color: var(--v2-hi); }
html:not(.hv-light):not(.dka-contrast-light) body.theme-v2 .bsx-modal-foot button.is-primary { background: linear-gradient(180deg, #7fb4ff, var(--sx)); border-color: transparent; color: var(--sx-on); box-shadow: 0 10px 26px -12px rgba(var(--v2-site-rgb), calc(.85 * var(--v2-glow-k))); }
html:not(.hv-light):not(.dka-contrast-light) body.theme-v2 .bsx-modal-foot button.is-danger { background: #c2414f; border-color: #c2414f; color: #fff; box-shadow: 0 10px 26px -12px rgba(194, 65, 79, .8); }
html:not(.hv-light):not(.dka-contrast-light) body.theme-v2 .bsx-modal-foot button.is-danger:hover { background: #d24b5a; }
html:not(.hv-light):not(.dka-contrast-light) body.theme-v2 .bsx-modal :focus-visible { outline: 2px solid var(--sx-hi); outline-offset: 2px; }
/* Categories rail */
html:not(.hv-light):not(.dka-contrast-light) body.theme-v2 .bsx-cats { border-inline-end-color: var(--v2-line); scrollbar-color: rgba(var(--v2-fg-rgb), .14) transparent; }
html:not(.hv-light):not(.dka-contrast-light) body.theme-v2 .bsx-cat { color: var(--v2-dim); }
html:not(.hv-light):not(.dka-contrast-light) body.theme-v2 .bsx-cat:hover { background: rgba(var(--v2-fg-rgb), .05); color: var(--v2-hi); }
html:not(.hv-light):not(.dka-contrast-light) body.theme-v2 .bsx-cat.is-on { background: var(--sx-soft); color: var(--v2-hi); box-shadow: inset 0 0 0 1px rgba(var(--v2-site-rgb), .45); }
html:not(.hv-light):not(.dka-contrast-light) body.theme-v2 .bsx-cat small { color: var(--v2-faint); }
html:not(.hv-light):not(.dka-contrast-light) body.theme-v2 .bsx-cat.is-on small { color: var(--sx-hi); }
/* Section cards: a dark card holding a small lit page */
html:not(.hv-light):not(.dka-contrast-light) body.theme-v2 .bsx-cards { scrollbar-color: rgba(var(--v2-fg-rgb), .14) transparent; }
html:not(.hv-light):not(.dka-contrast-light) body.theme-v2 .bsx-card {
  background: linear-gradient(180deg, rgba(var(--v2-lift-rgb), .04), rgba(var(--v2-lift-rgb), .012)), #0b1018; border-color: var(--v2-line-2); border-radius: 16px;
  transition: border-color var(--v2-fast) ease, box-shadow var(--v2-med) var(--v2-ease), transform var(--v2-med) var(--v2-ease);
}
html:not(.hv-light):not(.dka-contrast-light) body.theme-v2 .bsx-card:is(:hover, :focus-visible) { border-color: var(--sx-ring); transform: translateY(-2px); box-shadow: 0 22px 44px -26px rgba(var(--v2-site-rgb), calc(.8 * var(--v2-glow-k))), 0 0 0 1px rgba(var(--v2-site-rgb), .25); }
html:not(.hv-light):not(.dka-contrast-light) body.theme-v2 .bsx-card:focus-visible { outline: 2px solid var(--sx-hi); outline-offset: 2px; }
html:not(.hv-light):not(.dka-contrast-light) body.theme-v2 .bsx-card.is-current { border-color: var(--sx); box-shadow: inset 0 0 0 1px var(--sx), 0 0 26px -12px var(--sx); }
html:not(.hv-light):not(.dka-contrast-light) body.theme-v2 .bsx-card-prev { background: var(--v2-panel-2); border-bottom-color: var(--v2-line); }
html:not(.hv-light):not(.dka-contrast-light) body.theme-v2 .bsx-card-name { color: var(--v2-hi); }
html:not(.hv-light):not(.dka-contrast-light) body.theme-v2 .bsx-card-sub { color: var(--v2-muted); }
html:not(.hv-light):not(.dka-contrast-light) body.theme-v2 .bsx-card-badge { color: var(--sx-hi); background: var(--sx-soft); box-shadow: inset 0 0 0 1px rgba(var(--v2-site-rgb), .35); }

/* ================================ 9 publish, share, upgrade dialogs */
/* "Almost ready" checklist + the AI dialogs use the shared
   .domain-guide-modal (already dark in css/theme-v2.css); here they get
   the site's light. */
html:not(.hv-light):not(.dka-contrast-light) body.theme-v2 .domain-guide-modal { background: radial-gradient(120% 70% at 100% 0%, rgba(var(--v2-site-rgb), .09), transparent 55%), linear-gradient(180deg, var(--v2-raise), var(--v2-panel)); box-shadow: inset 0 0 0 1px var(--v2-line-2), 0 40px 100px -30px rgba(var(--v2-shade-rgb), calc(.95 * var(--v2-shade-k))), 0 0 80px -40px rgba(var(--v2-site-rgb), calc(.45 * var(--v2-glow-k))); }
html:not(.hv-light):not(.dka-contrast-light) body.theme-v2 .dk-checklist-item { color: var(--v2-text); }
html:not(.hv-light):not(.dka-contrast-light) body.theme-v2 .dk-checklist-item .ok { color: var(--v2-ok); }
html:not(.hv-light):not(.dka-contrast-light) body.theme-v2 .dk-checklist-item .warn { color: var(--v2-warn); }
html:not(.hv-light):not(.dka-contrast-light) body.theme-v2 .dk-publish-error { background: var(--v2-danger-bg); border-color: rgba(var(--v2-danger-rgb), .35); color: #ffb0b7; }
html:not(.hv-light):not(.dka-contrast-light) body.theme-v2 #dk-checklist-confirm.is-loading::before { border-color: rgba(3, 20, 50, .35); border-top-color: var(--sx-on); }
/* The editor's publish buttons and the result dialog's buttons: site blue */
html:not(.hv-light):not(.dka-contrast-light) body.theme-v2 :is(.domain-guide-modal :is(.btn-teal, .dk-btn-primary), .dk-publish-modal :is(.btn-teal, .dk-btn-primary:not(.dk-pro-btn))) {
  color: var(--sx-on); background: linear-gradient(180deg, #7fb4ff, var(--sx)); border: 0; border-radius: 999px;
  box-shadow: inset 0 0 0 1px rgba(170, 205, 255, .6), inset 0 1px 0 rgba(255, 255, 255, .45), 0 12px 30px -12px rgba(var(--v2-site-rgb), calc(.85 * var(--v2-glow-k))), 0 0 40px -14px rgba(var(--v2-site-rgb), calc(.8 * var(--v2-glow-k)));
}
html:not(.hv-light):not(.dka-contrast-light) body.theme-v2 :is(.domain-guide-modal :is(.btn-teal, .dk-btn-primary), .dk-publish-modal :is(.btn-teal, .dk-btn-primary:not(.dk-pro-btn))):hover { color: var(--sx-on); background: linear-gradient(180deg, #9cc6ff, #5a9dff); box-shadow: inset 0 0 0 1px rgba(200, 225, 255, .8), 0 16px 38px -12px rgba(var(--v2-site-rgb), calc(.95 * var(--v2-glow-k))), 0 0 54px -12px rgba(var(--v2-site-rgb), calc(.9 * var(--v2-glow-k))); }
html:not(.hv-light):not(.dka-contrast-light) body.theme-v2 :is(.domain-guide-modal :is(.btn-teal, .dk-btn-primary), .dk-publish-modal :is(.btn-teal, .dk-btn-primary:not(.dk-pro-btn))):active { background: var(--sx); transform: scale(.98); }
html:not(.hv-light):not(.dka-contrast-light) body.theme-v2 :is(.domain-guide-modal .dk-btn, .dk-publish-modal .btn, .dk-publish-modal .dk-btn):focus-visible { outline: 2px solid var(--sx-hi); outline-offset: 3px; }
/* Result dialog */
html:not(.hv-light):not(.dka-contrast-light) body.theme-v2 .dk-publish-overlay { background: rgba(var(--v2-scrim-rgb), calc(.74 * var(--v2-scrim-k))); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
html:not(.hv-light):not(.dka-contrast-light) body.theme-v2 .dk-publish-modal {
  border-radius: 24px; color: var(--v2-text); scrollbar-color: rgba(var(--v2-fg-rgb), .16) transparent;
  background: radial-gradient(120% 60% at 50% 0%, rgba(var(--v2-site-rgb), .13), transparent 60%), linear-gradient(180deg, var(--v2-raise), var(--v2-panel));
  box-shadow: inset 0 0 0 1px var(--v2-line-2), 0 40px 100px -30px rgba(var(--v2-shade-rgb), calc(.95 * var(--v2-shade-k))), 0 0 100px -40px rgba(var(--v2-site-rgb), calc(.55 * var(--v2-glow-k)));
}
html:not(.hv-light):not(.dka-contrast-light) body.theme-v2 .dk-publish-modal h2 { color: var(--v2-hi); letter-spacing: -.01em; }
html:not(.hv-light):not(.dka-contrast-light) body.theme-v2 .dk-publish-modal .domain-guide-close { background: rgba(var(--v2-fg-rgb), .06); color: var(--v2-dim); box-shadow: inset 0 0 0 1px var(--v2-line); }
html:not(.hv-light):not(.dka-contrast-light) body.theme-v2 .dk-publish-modal .domain-guide-close:hover { background: rgba(var(--v2-fg-rgb), .12); color: var(--v2-hi); }
html:not(.hv-light):not(.dka-contrast-light) body.theme-v2 .dk-publish-modal .dk-publish-result { background: rgba(var(--v2-fg-rgb), .03); border-color: var(--v2-line-2); }
html:not(.hv-light):not(.dka-contrast-light) body.theme-v2 .dk-publish-modal .publish-live-head { color: var(--v2-ok) !important; }
html:not(.hv-light):not(.dka-contrast-light) body.theme-v2 .dk-publish-modal .publish-url-box { background: var(--v2-panel-2); border: 1px solid rgba(var(--v2-site-rgb), .35); box-shadow: 0 0 22px -12px var(--sx); }
html:not(.hv-light):not(.dka-contrast-light) body.theme-v2 .dk-publish-modal :is(#publish-url-text, .publish-url-text) { color: var(--sx-hi); }
html:not(.hv-light):not(.dka-contrast-light) body.theme-v2 .dk-publish-modal :is(.publish-copy-btn, .btn-mini) { background: rgba(var(--v2-fg-rgb), .06); color: var(--v2-text); border: 1px solid var(--v2-line-2); }
html:not(.hv-light):not(.dka-contrast-light) body.theme-v2 .dk-publish-modal :is(.publish-copy-btn, .btn-mini):hover { background: rgba(var(--v2-fg-rgb), .12); color: var(--v2-hi); border-color: var(--v2-line-3); }
html:not(.hv-light):not(.dka-contrast-light) body.theme-v2 .dk-publish-modal :is(.finish-gate-note, .claim-steps, .unlock-note) { color: var(--v2-muted); }
html:not(.hv-light):not(.dka-contrast-light) body.theme-v2 .dk-publish-modal .claim-steps b { color: var(--v2-hi); }
html:not(.hv-light):not(.dka-contrast-light) body.theme-v2 .dk-publish-modal :is(.host-info-box, .go-live-box) { background: rgba(var(--v2-fg-rgb), .03) !important; border: 1px solid var(--v2-line-2); color: var(--v2-dim) !important; }
html:not(.hv-light):not(.dka-contrast-light) body.theme-v2 .dk-publish-modal :is(.host-info-box, .go-live-box) :is(b, strong) { color: var(--v2-hi); }
html:not(.hv-light):not(.dka-contrast-light) body.theme-v2 .dk-publish-modal :is(.host-info-box, .go-live-box) a { color: var(--sx-hi); }
html:not(.hv-light):not(.dka-contrast-light) body.theme-v2 .dk-publish-modal .cx-link-btn { color: var(--sx-hi); }
html:not(.hv-light):not(.dka-contrast-light) body.theme-v2 .dk-publish-modal .dk-details summary { color: var(--v2-dim); }
html:not(.hv-light):not(.dka-contrast-light) body.theme-v2 .dk-publish-modal .dk-details summary:hover { color: var(--v2-hi); }
html:not(.hv-light):not(.dka-contrast-light) body.theme-v2 .dk-publish-modal :is(input[type="text"], #license-input) { background: var(--v2-panel-2); border: 1px solid var(--v2-line-2); color: var(--v2-text); caret-color: var(--sx-hi); }
html:not(.hv-light):not(.dka-contrast-light) body.theme-v2 .dk-publish-modal :is(input[type="text"], #license-input):focus { outline: none; border-color: var(--sx-ring); box-shadow: 0 0 0 4px rgba(var(--v2-site-rgb), .16); }
html:not(.hv-light):not(.dka-contrast-light) body.theme-v2 .dk-publish-modal input::placeholder { color: var(--v2-faint); }
html:not(.hv-light):not(.dka-contrast-light) body.theme-v2 .dk-publish-modal .unlock-note.err { color: var(--v2-danger); }
html:not(.hv-light):not(.dka-contrast-light) body.theme-v2 .dk-publish-modal .unlock-note.ok { color: var(--v2-ok); }
/* "Choose your own address" (js/site-builder.js builds it with inline
   styles; in the result dialog and in the settings panel) */
html:not(.hv-light):not(.dka-contrast-light) body.theme-v2 .slug-rename-box > div:has(> [data-slug-rename-input]) { background: var(--v2-panel-2) !important; border: 1px solid var(--v2-line-2) !important; }
html:not(.hv-light):not(.dka-contrast-light) body.theme-v2 .slug-rename-box > div:has(> [data-slug-rename-input]):focus-within { border-color: var(--sx-ring) !important; box-shadow: 0 0 0 4px rgba(var(--v2-site-rgb), .16); }
html:not(.hv-light):not(.dka-contrast-light) body.theme-v2 .slug-rename-box [data-slug-rename-input] { color: var(--v2-text); caret-color: var(--sx-hi); background: transparent !important; border: 0 !important; box-shadow: none !important; height: auto !important; padding: 0 !important; }
html:not(.hv-light):not(.dka-contrast-light) body.theme-v2 .slug-rename-box [data-slug-rename-status][style*="rgb(30, 122, 76)"] { color: var(--v2-ok) !important; }
html:not(.hv-light):not(.dka-contrast-light) body.theme-v2 .slug-rename-box [data-slug-rename-status][style*="rgb(179, 64, 30)"] { color: var(--v2-danger-hi) !important; }
/* Share row */
html:not(.hv-light):not(.dka-contrast-light) body.theme-v2 .publish-share { border-top-color: var(--v2-line); }
html:not(.hv-light):not(.dka-contrast-light) body.theme-v2 .publish-share-title { color: var(--v2-dim); }
html:not(.hv-light):not(.dka-contrast-light) body.theme-v2 .publish-share-btn { background: rgba(var(--v2-fg-rgb), .04); border-color: var(--v2-line-2); color: var(--v2-text); border-radius: 999px; transition: border-color var(--v2-fast) ease, background-color var(--v2-fast) ease, color var(--v2-fast) ease; }
html:not(.hv-light):not(.dka-contrast-light) body.theme-v2 .publish-share-btn:hover { border-color: var(--sx-ring); background: var(--sx-soft); color: var(--v2-hi); }
html:not(.hv-light):not(.dka-contrast-light) body.theme-v2 .publish-share-btn:focus-visible { outline-color: var(--sx-hi); }
/* The upgrade ("remove the DeskKit tag") card */
html:not(.hv-light):not(.dka-contrast-light) body.theme-v2 .dk-publish-modal .dk-pro-card, html:not(.hv-light):not(.dka-contrast-light) body.theme-v2 .dk-pro-card {
  background: radial-gradient(100% 80% at 100% 0%, rgba(var(--v2-site-rgb), .12), transparent 60%), rgba(var(--v2-lift-rgb), .025);
  border: 1px solid rgba(var(--v2-site-rgb), .3); border-radius: 18px; box-shadow: 0 0 40px -24px var(--sx);
}
html:not(.hv-light):not(.dka-contrast-light) body.theme-v2 :is(.dk-publish-modal, body) .dk-pro-chip { color: var(--sx-hi); background: var(--sx-soft); box-shadow: inset 0 0 0 1px rgba(var(--v2-site-rgb), .45); }
html:not(.hv-light):not(.dka-contrast-light) body.theme-v2 .dk-pro-title { color: var(--v2-hi); }
html:not(.hv-light):not(.dka-contrast-light) body.theme-v2 .dk-pro-sub { color: var(--v2-dim); }
html:not(.hv-light):not(.dka-contrast-light) body.theme-v2 .dk-pro-perks { color: var(--v2-text); }
html:not(.hv-light):not(.dka-contrast-light) body.theme-v2 .dk-pro-perks li::before { color: var(--sx-hi) !important; }
html:not(.hv-light):not(.dka-contrast-light) body.theme-v2 :is(.dk-publish-modal, body) .dk-btn.dk-pro-btn { color: var(--v2-hi); background: rgba(var(--v2-site-rgb), .1); border: 1px solid var(--sx-ring); box-shadow: 0 0 26px -12px var(--sx); }
html:not(.hv-light):not(.dka-contrast-light) body.theme-v2 :is(.dk-publish-modal, body) .dk-btn.dk-pro-btn:hover { color: var(--v2-hi); background: rgba(var(--v2-site-rgb), .2); border-color: var(--sx); }
html:not(.hv-light):not(.dka-contrast-light) body.theme-v2 .dk-publish-modal #watermark-removed { background: rgba(var(--v2-ok-rgb), .06); border-color: rgba(var(--v2-ok-rgb), .3); color: var(--v2-ok) !important; }
html:not(.hv-light):not(.dka-contrast-light) body.theme-v2 #hosting-paused .host-info-box { background: rgba(var(--v2-warn-rgb), .08) !important; color: var(--v2-warn) !important; }

/* ============ 10 page screens: intro, my sites, wizard, AI dialogs */
/* The page behind the editor (seen while it loads, in the creation flow
   and in the old ?shell=0 sidebar). */
html:not(.hv-light):not(.dka-contrast-light) body.theme-v2 .sites-hero-band { background: radial-gradient(70% 120% at 50% -20%, rgba(var(--v2-site-rgb), .16), transparent 65%), var(--v2-bg); border-bottom: 1px solid var(--v2-line); }
html:not(.hv-light):not(.dka-contrast-light) body.theme-v2 .sites-hero-blob { display: none; }
html:not(.hv-light):not(.dka-contrast-light) body.theme-v2 .sites-hero-eyebrow { color: var(--sx-hi); background: var(--sx-soft); box-shadow: inset 0 0 0 1px rgba(var(--v2-site-rgb), .35); }
html:not(.hv-light):not(.dka-contrast-light) body.theme-v2 .sites-hero-h1 { color: var(--v2-hi); }
html:not(.hv-light):not(.dka-contrast-light) body.theme-v2 .sites-hero-sub { color: var(--v2-dim); }
html:not(.hv-light):not(.dka-contrast-light) body.theme-v2 .sites-hero-sub a { color: var(--sx-hi); }
html:not(.hv-light):not(.dka-contrast-light) body.theme-v2 #sites-seo-content .bg-ice { background: linear-gradient(180deg, var(--v2-bg-2), var(--v2-bg)); }
html:not(.hv-light):not(.dka-contrast-light) body.theme-v2 #sites-seo-content .section-head h2, html:not(.hv-light):not(.dka-contrast-light) body.theme-v2 #sites-seo-content .feature h4 { color: var(--v2-hi); }
html:not(.hv-light):not(.dka-contrast-light) body.theme-v2 #sites-seo-content :is(.section-head p, .feature p) { color: var(--v2-dim); }
html:not(.hv-light):not(.dka-contrast-light) body.theme-v2 #sites-seo-content .section-head .kicker { color: var(--sx-hi); background: var(--sx-soft); }
html:not(.hv-light):not(.dka-contrast-light) body.theme-v2 #sites-seo-content .feature { background: linear-gradient(180deg, rgba(var(--v2-lift-rgb), .035), rgba(var(--v2-lift-rgb), .01)); box-shadow: inset 0 0 0 1px var(--v2-line); border-radius: var(--v2-r); }
html:not(.hv-light):not(.dka-contrast-light) body.theme-v2 #sites-seo-content .feature:hover { box-shadow: inset 0 0 0 1px rgba(var(--v2-site-rgb), .45), 0 24px 50px -30px rgba(var(--v2-site-rgb), calc(.7 * var(--v2-glow-k))); }
html:not(.hv-light):not(.dka-contrast-light) body.theme-v2 #sites-seo-content .feature .icon { background: var(--sx-soft) !important; box-shadow: inset 0 0 0 1px rgba(var(--v2-site-rgb), .3) !important; }
/* "Let's build you a site" intro */
html:not(.hv-light):not(.dka-contrast-light) body.theme-v2 .dk-sites-intro { position: relative; isolation: isolate; }
html:not(.hv-light):not(.dka-contrast-light) body.theme-v2 .dk-sites-intro::before {
  content: ""; position: absolute; inset: -60px -20vw auto; height: 360px; z-index: -1; pointer-events: none;
  background: radial-gradient(46% 60% at 50% 30%, rgba(var(--v2-site-rgb), .16), transparent 70%);
}
html:not(.hv-light):not(.dka-contrast-light) body.theme-v2 .dk-sites-intro h1 { color: var(--v2-hi); letter-spacing: -.025em; font-size: var(--v2-fs-title); }
html:not(.hv-light):not(.dka-contrast-light) body.theme-v2 .dk-sites-intro p.lead { color: var(--v2-dim); }
html:not(.hv-light):not(.dka-contrast-light) body.theme-v2 .dk-sites-intro-facts span { color: var(--v2-dim); background: rgba(var(--v2-fg-rgb), .035); box-shadow: inset 0 0 0 1px var(--v2-line); padding: 7px 14px; border-radius: 999px; }
/* My websites */
html:not(.hv-light):not(.dka-contrast-light) body.theme-v2 .dk-mysites-head h1 { color: var(--v2-hi); letter-spacing: -.02em; }
html:not(.hv-light):not(.dka-contrast-light) body.theme-v2 :is(#tpl-catalog-section, #dk-sites-intro-section, #dk-mysites-section) :is(.dk-btn-primary, .btn-teal) { border-radius: 999px; }
/* Wizard (js/site-ai-generate.js, in the shared .domain-guide-modal) */
html:not(.hv-light):not(.dka-contrast-light) body.theme-v2 .wizard-progress { color: var(--v2-muted); }
html:not(.hv-light):not(.dka-contrast-light) body.theme-v2 .wizard-progress-bar { background: rgba(var(--v2-fg-rgb), .07); }
html:not(.hv-light):not(.dka-contrast-light) body.theme-v2 .wizard-progress-fill { background: linear-gradient(90deg, var(--sx-fill), var(--sx-hi)); box-shadow: 0 0 12px var(--sx); }
html:not(.hv-light):not(.dka-contrast-light) body.theme-v2 .wizard-question { color: var(--v2-hi); }
html:not(.hv-light):not(.dka-contrast-light) body.theme-v2 .wizard-chip { background: rgba(var(--v2-fg-rgb), .035); border-color: var(--v2-line-2); color: var(--v2-text); }
html:not(.hv-light):not(.dka-contrast-light) body.theme-v2 .wizard-chip:hover { background: rgba(var(--v2-fg-rgb), .07); border-color: var(--sx-ring); }
html:not(.hv-light):not(.dka-contrast-light) body.theme-v2 .wizard-chip.selected { background: var(--sx-soft); border-color: var(--sx); color: var(--v2-hi); box-shadow: 0 0 18px -8px var(--sx); }
html:not(.hv-light):not(.dka-contrast-light) body.theme-v2 :is(.wizard-search, .wizard-other-input, #wizard-step-body textarea, #wizard-step-body input[type="text"], .ats-textarea) {
  background: var(--v2-panel-2); border-color: var(--v2-line-2); color: var(--v2-text); caret-color: var(--sx-hi);
}
html:not(.hv-light):not(.dka-contrast-light) body.theme-v2 :is(.wizard-search, .wizard-other-input, #wizard-step-body textarea, #wizard-step-body input[type="text"], .ats-textarea):focus { border-color: var(--sx-ring); box-shadow: 0 0 0 4px rgba(var(--v2-site-rgb), .16); }
html:not(.hv-light):not(.dka-contrast-light) body.theme-v2 :is(.wizard-search, .wizard-other-input, #wizard-step-body textarea, #wizard-step-body input, .ats-textarea)::placeholder { color: var(--v2-faint); }
html:not(.hv-light):not(.dka-contrast-light) body.theme-v2 .wizard-note { color: var(--v2-danger-hi); }
html:not(.hv-light):not(.dka-contrast-light) body.theme-v2 :is(.dk-style-chip, .dk-ms-chip) { background: rgba(var(--v2-fg-rgb), .03); border-color: var(--v2-line-2); color: var(--v2-text); }
html:not(.hv-light):not(.dka-contrast-light) body.theme-v2 :is(.dk-style-chip, .dk-ms-chip):hover { border-color: var(--sx-ring); }
html:not(.hv-light):not(.dka-contrast-light) body.theme-v2 :is(.dk-style-chip, .dk-ms-chip).selected, html:not(.hv-light):not(.dka-contrast-light) body.theme-v2 .dk-style-chip-auto { background: var(--sx-soft); border-color: var(--sx); color: var(--v2-hi); box-shadow: 0 0 18px -8px var(--sx); }
html:not(.hv-light):not(.dka-contrast-light) body.theme-v2 .dk-style-chip span, html:not(.hv-light):not(.dka-contrast-light) body.theme-v2 .dk-style-chip-auto span { color: var(--v2-hi); }
html:not(.hv-light):not(.dka-contrast-light) body.theme-v2 .dk-style-chip-auto::before { color: var(--sx-hi); }
/* "Building your site…" + the generated preview */
html:not(.hv-light):not(.dka-contrast-light) body.theme-v2 .dk-transition-wrap h2, html:not(.hv-light):not(.dka-contrast-light) body.theme-v2 .dk-genpreview-head h1 { color: var(--v2-hi); }
html:not(.hv-light):not(.dka-contrast-light) body.theme-v2 .dk-transition-step { color: var(--v2-faint); }
html:not(.hv-light):not(.dka-contrast-light) body.theme-v2 .dk-transition-step.active { color: var(--v2-hi); }
html:not(.hv-light):not(.dka-contrast-light) body.theme-v2 .dk-transition-step.done { color: var(--v2-ok); }
html:not(.hv-light):not(.dka-contrast-light) body.theme-v2 .dk-transition-dot { border-color: var(--v2-line-3); }
html:not(.hv-light):not(.dka-contrast-light) body.theme-v2 .dk-transition-step.active .dk-transition-dot { border-color: var(--sx); box-shadow: 0 0 12px -2px var(--sx); }
html:not(.hv-light):not(.dka-contrast-light) body.theme-v2 .dk-transition-step.active .dk-transition-dot::after { background: var(--sx); }
html:not(.hv-light):not(.dka-contrast-light) body.theme-v2 .dk-transition-step.done .dk-transition-dot { border-color: var(--v2-ok); background: var(--v2-ok); color: var(--v2-on-teal); }
html:not(.hv-light):not(.dka-contrast-light) body.theme-v2 .dk-genpreview-frame-wrap { border-color: rgba(var(--v2-fg-rgb), .08); border-radius: 18px; box-shadow: 0 40px 90px -30px rgba(var(--v2-shade-rgb), calc(.95 * var(--v2-shade-k))), 0 0 120px -50px rgba(var(--v2-site-rgb), calc(.5 * var(--v2-glow-k))); }
html:not(.hv-light):not(.dka-contrast-light) body.theme-v2 .dk-pill { color: var(--sx-hi); background: var(--sx-soft); box-shadow: inset 0 0 0 1px rgba(var(--v2-site-rgb), .35); }
/* AI review / improve / limit dialogs (ats-* from css/style.css) */
html:not(.hv-light):not(.dka-contrast-light) body.theme-v2 :is(.ats-attempts, .ats-score-label, .ats-keywords-empty) { color: var(--v2-muted); }
html:not(.hv-light):not(.dka-contrast-light) body.theme-v2 .ats-result h3 { color: var(--v2-hi); }
html:not(.hv-light):not(.dka-contrast-light) body.theme-v2 .ats-tips { color: var(--v2-dim); }
html:not(.hv-light):not(.dka-contrast-light) body.theme-v2 :is(.ats-error, .ats-keyword-chip) { background: var(--v2-danger-bg); color: #ffb0b7; }
html:not(.hv-light):not(.dka-contrast-light) body.theme-v2 .ats-upgrade-card { background: rgba(var(--v2-site-rgb), .07); box-shadow: inset 0 0 0 1px rgba(var(--v2-site-rgb), .25); }
html:not(.hv-light):not(.dka-contrast-light) body.theme-v2 .ats-upgrade-card p { color: var(--v2-dim); }
html:not(.hv-light):not(.dka-contrast-light) body.theme-v2 .site-ai-action-card { background: rgba(var(--v2-fg-rgb), .03); border-color: var(--v2-line-2); color: var(--v2-text); }
/* The old full-page sidebar (sites.html?shell=0) */
html:not(.hv-light):not(.dka-contrast-light) body.theme-v2 .builder-sidebar :is(.builder-section, .builder-sidebar-head) { border-color: var(--v2-line); }
html:not(.hv-light):not(.dka-contrast-light) body.theme-v2 .builder-sidebar .builder-section-head { color: var(--v2-hi); }
html:not(.hv-light):not(.dka-contrast-light) body.theme-v2 :is(.services-item, .site-gallery-thumb) { border-color: var(--v2-line-2); }
html:not(.hv-light):not(.dka-contrast-light) body.theme-v2 .preview-tab-btn { background: rgba(var(--v2-fg-rgb), .04); border-color: var(--v2-line-2); color: var(--v2-dim); }
html:not(.hv-light):not(.dka-contrast-light) body.theme-v2 .preview-tab-btn.active { border-color: var(--sx); background: var(--sx-soft); color: var(--v2-hi); }
html:not(.hv-light):not(.dka-contrast-light) body.theme-v2 #site-preview-frame { border-color: var(--v2-line-2); box-shadow: 0 40px 90px -30px rgba(var(--v2-shade-rgb), calc(.95 * var(--v2-shade-k))); }
html:not(.hv-light):not(.dka-contrast-light) body.theme-v2 .publish-url-box { background: var(--v2-panel-2); border-color: var(--v2-line-2); }
html:not(.hv-light):not(.dka-contrast-light) body.theme-v2 .publish-url-box span { color: var(--sx-hi); }

/* ================================================ 11 phones + tablets */
@media (max-width: 900px) {
  html:not(.hv-light):not(.dka-contrast-light) body.theme-v2 .bsx-top::after { opacity: .5; }
  html:not(.hv-light):not(.dka-contrast-light) body.theme-v2 .bsx-panel {
    background: linear-gradient(180deg, var(--v2-raise), var(--v2-panel)); border-top: 0; border-radius: 22px 22px 0 0;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1), 0 -24px 60px -10px rgba(var(--v2-shade-rgb), calc(.85 * var(--v2-shade-k))), 0 -2px 40px -20px rgba(var(--v2-site-rgb), calc(.45 * var(--v2-glow-k)));
  }
  html:not(.hv-light):not(.dka-contrast-light) body.theme-v2 .bsx-panel-head::before { background: rgba(var(--v2-fg-rgb), .22); }
  html:not(.hv-light):not(.dka-contrast-light) body.theme-v2 .bsx-cats { border-bottom-color: var(--v2-line); }
  html:not(.hv-light):not(.dka-contrast-light) body.theme-v2 .bsx .bsx-holder:is(.device-mobile, .device-tablet) .bsx-frame { border-radius: 14px; box-shadow: 0 0 0 1px rgba(var(--v2-fg-rgb), .08), 0 30px 70px -30px rgba(var(--v2-shade-rgb), calc(.95 * var(--v2-shade-k))); }
}
@media (max-width: 520px) {
  html:not(.hv-light):not(.dka-contrast-light) body.theme-v2 .bsx-dock { border-radius: 18px; }
  html:not(.hv-light):not(.dka-contrast-light) body.theme-v2 .bsx-dock-btn { border-radius: 12px; }
  html:not(.hv-light):not(.dka-contrast-light) body.theme-v2 #bshell-publish-btn { padding-inline: 14px; }
}

/* ================================== 12 motion + accessibility modes */
@media (prefers-reduced-motion: reduce) {
  body.theme-v2 :is(.bsx-btn-primary, .bsx-insert, .bsx-card, .bsx-dock-btn, .publish-share-btn, .domain-guide-modal .dk-btn, .dk-publish-modal .btn, .dk-publish-modal .dk-btn, .dk-publish-overlay, .wizard-chip) { transition: none !important; animation: none !important; }
  body.theme-v2 :is(.bsx-btn-primary, .bsx-card, .domain-guide-modal .dk-btn, .dk-publish-modal .btn, .dk-publish-modal .dk-btn):is(:hover, :active) { transform: none !important; }
  body.theme-v2 .bsx-insert:hover { transform: translate(-50%, -50%) !important; }
}
html.dka-still body.theme-v2 :is(.bsx-btn-primary, .bsx-card, .domain-guide-modal .dk-btn, .dk-publish-modal .btn, .dk-publish-modal .dk-btn):is(:hover, :active) { transform: none !important; }
html.dka-still body.theme-v2 .bsx-insert:hover { transform: translate(-50%, -50%) !important; }
/* High contrast (dark or light): no decorative light drawn by
   pseudo-elements, and the selection outline is a plain solid ring. */
html:is(.dka-contrast-dark, .dka-contrast-light) body.theme-v2 :is(.bsx-top, .bsx .bsx-ai-panel, .dk-sites-intro)::before,
html:is(.dka-contrast-dark, .dka-contrast-light) body.theme-v2 .bsx-top::after { display: none; }
html.dka-contrast-dark body.theme-v2 .bsx-box.is-sel { box-shadow: 0 0 0 3px #FDE047, 0 0 0 4px #000; }
html.dka-contrast-dark body.theme-v2 .bsx-box.is-hover { box-shadow: 0 0 0 2px #FDE047; }

/* ============================================ 13 light theme ("מצב בהיר")
   Tokens: css/theme-v2.css (html.dk-light). White chrome and frosted
   white toolbars around the site; the site itself (the canvas iframe) and
   the on-canvas selection colours are unchanged. */
html.dk-light:not(.dka-contrast-dark, .dka-contrast-light) body.theme-v2 {
  --sx-hi: #1a56c4;                     /* accent text on white: 6.3:1 */
  --sx-fill: #1a66d8;
  --sx-fill-hi: #3b82f6;
  --sx-on: #ffffff;
  --sx-soft: rgba(26, 102, 216, .09);
  --sx-pop-bg: #ffffff;
  --sx-pop-shadow: inset 0 0 0 1px rgba(11, 16, 32, .08), 0 24px 56px -20px rgba(15, 23, 42, .3), 0 2px 8px rgba(15, 23, 42, .06);
}
html.dk-light:not(.dka-contrast-dark, .dka-contrast-light) body.theme-v2 .bsx { color-scheme: light; }
html.dk-light:not(.dka-contrast-dark, .dka-contrast-light) body.theme-v2 .bsx-top { background: rgba(255, 255, 255, .92); box-shadow: 0 1px 0 rgba(11, 16, 32, .06), 0 8px 20px -16px rgba(15, 23, 42, .25); }
html.dk-light:not(.dka-contrast-dark, .dka-contrast-light) body.theme-v2 .bsx-stage {
  background:
    radial-gradient(60% 46% at 50% -6%, rgba(26, 102, 216, .06), transparent 70%),
    radial-gradient(rgba(11, 16, 32, .08) 1px, transparent 1.3px) 0 0 / 22px 22px,
    #eef1f6;
}
html.dk-light:not(.dka-contrast-dark, .dka-contrast-light) body.theme-v2 .bsx .bsx-frame { box-shadow: 0 0 0 1px rgba(11, 16, 32, .08), 0 30px 70px -30px rgba(15, 23, 42, .35); }
html.dk-light:not(.dka-contrast-dark, .dka-contrast-light) body.theme-v2 .bsx .bsx-holder:is(.device-mobile, .device-tablet) .bsx-frame { box-shadow: 0 0 0 1px rgba(11, 16, 32, .12), 0 0 0 7px #fff, 0 0 0 8px rgba(11, 16, 32, .12), 0 30px 70px -30px rgba(15, 23, 42, .35); }
html.dk-light:not(.dka-contrast-dark, .dka-contrast-light) body.theme-v2 .bsx-panel { background: #fff; box-shadow: -20px 0 50px -40px rgba(15, 23, 42, .3); }
html.dk-light:not(.dka-contrast-dark, .dka-contrast-light) body.theme-v2 .bsx-swatch { border-color: #fff; }
html.dk-light:not(.dka-contrast-dark, .dka-contrast-light) body.theme-v2 .bsx-logo-thumb { background-image: linear-gradient(45deg, #e9ecf2 25%, transparent 25%, transparent 75%, #e9ecf2 75%), linear-gradient(45deg, #e9ecf2 25%, transparent 25%, transparent 75%, #e9ecf2 75%); }
/* Blue buttons: deep site blue with white text (5:1 and up). */
html.dk-light:not(.dka-contrast-dark, .dka-contrast-light) body.theme-v2 :is(.bsx-btn-primary, .bsx-site-address .btn-teal, .bsx-preview-bar button.is-primary, .bsx-modal-foot button.is-primary),
html.dk-light:not(.dka-contrast-dark, .dka-contrast-light) body.theme-v2 :is(.domain-guide-modal :is(.btn-teal, .dk-btn-primary), .dk-publish-modal :is(.btn-teal, .dk-btn-primary:not(.dk-pro-btn))) {
  color: #fff; background: linear-gradient(180deg, #2369d9, #1a5fcf);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22), 0 1px 2px rgba(15, 23, 42, .12), 0 10px 24px -12px rgba(26, 102, 216, .7);
}
html.dk-light:not(.dka-contrast-dark, .dka-contrast-light) body.theme-v2 .bsx-btn-primary:hover:not(:disabled),
html.dk-light:not(.dka-contrast-dark, .dka-contrast-light) body.theme-v2 :is(.domain-guide-modal :is(.btn-teal, .dk-btn-primary), .dk-publish-modal :is(.btn-teal, .dk-btn-primary:not(.dk-pro-btn))):hover {
  color: #fff; background: linear-gradient(180deg, #236ee0, #1a66d8);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25), 0 14px 30px -12px rgba(26, 102, 216, .8);
}
/* Floating glass bars: frosted white. The section toolbar stays solid blue. */
html.dk-light:not(.dka-contrast-dark, .dka-contrast-light) body.theme-v2 :is(.bsx-tools, .bsx-dock, .bsx-preview-bar) {
  background: rgba(255, 255, 255, .92);
  box-shadow: inset 0 0 0 1px rgba(11, 16, 32, .08), 0 18px 40px -16px rgba(15, 23, 42, .3), 0 2px 6px rgba(15, 23, 42, .06);
}
html.dk-light:not(.dka-contrast-dark, .dka-contrast-light) body.theme-v2 .bsx-tools .bsx-icon-btn { color: #2a3247; }
html.dk-light:not(.dka-contrast-dark, .dka-contrast-light) body.theme-v2 .bsx-dock-btn { color: #3d4559; }
html.dk-light:not(.dka-contrast-dark, .dka-contrast-light) body.theme-v2 .bsx-dock-btn.is-primary { color: #fff; background: linear-gradient(180deg, #2369d9, #1a5fcf); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22), 0 8px 18px -10px rgba(26, 102, 216, .8); }
html.dk-light:not(.dka-contrast-dark, .dka-contrast-light) body.theme-v2 .bsx-dock-btn.is-primary:hover { background: linear-gradient(180deg, #236ee0, #1a66d8); }
html.dk-light:not(.dka-contrast-dark, .dka-contrast-light) body.theme-v2 .bsx-sectools { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .3), 0 12px 26px -10px rgba(26, 102, 216, .6); }
html.dk-light:not(.dka-contrast-dark, .dka-contrast-light) body.theme-v2 .bsx-sectools .bsx-icon-btn,
html.dk-light:not(.dka-contrast-dark, .dka-contrast-light) body.theme-v2 .bsx-sectools .bsx-grip,
html.dk-light:not(.dka-contrast-dark, .dka-contrast-light) body.theme-v2 .bsx-sectools .bsx-tool-txt { color: #fff; }
html.dk-light:not(.dka-contrast-dark, .dka-contrast-light) body.theme-v2 .bsx-sectools .bsx-icon-btn:hover:not(:disabled),
html.dk-light:not(.dka-contrast-dark, .dka-contrast-light) body.theme-v2 .bsx-sectools .bsx-tool-txt:hover { background: rgba(255, 255, 255, .18); }
html.dk-light:not(.dka-contrast-dark, .dka-contrast-light) body.theme-v2 .bsx-sectools .bsx-tools-sep { background: rgba(255, 255, 255, .3); }
html.dk-light:not(.dka-contrast-dark, .dka-contrast-light) body.theme-v2 .bsx-drag-ghost { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .3), 0 14px 30px -10px rgba(15, 23, 42, .3); }
html.dk-light:not(.dka-contrast-dark, .dka-contrast-light) body.theme-v2 .bsx-insert:focus-visible { outline-color: #0b1020; }
html.dk-light:not(.dka-contrast-dark, .dka-contrast-light) body.theme-v2 .bsx-toast.is-error { background: #fff1f2; }
html.dk-light:not(.dka-contrast-dark, .dka-contrast-light) body.theme-v2 :is(.dk-publish-error, .ats-error, .ats-keyword-chip) { color: var(--v2-danger-hi); }
html.dk-light:not(.dka-contrast-dark, .dka-contrast-light) body.theme-v2 #dk-checklist-confirm.is-loading::before { border-color: rgba(255, 255, 255, .4); }
html.dk-light:not(.dka-contrast-dark, .dka-contrast-light) body.theme-v2 .bsx-card { background: #fff; }
html.dk-light:not(.dka-contrast-dark, .dka-contrast-light) body.theme-v2 .bsx-card-prev { background: #f3f5f9; }
html.dk-light:not(.dka-contrast-dark, .dka-contrast-light) body.theme-v2 :is(.bsx-modal, .dk-publish-modal, .domain-guide-modal) { box-shadow: inset 0 0 0 1px rgba(11, 16, 32, .08), var(--v2-lift-3); }