/* The light/dark button (theme-toggle.mjs), then light-theme corrections the
   generated X.light.css files (scripts/build-light-theme.mjs) cannot know. */
.theme-toggle {
  display: inline-grid; place-items: center; flex: 0 0 auto;
  width: 38px; height: 38px; padding: 0; border-radius: 11px;
  border: 1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.04); color: inherit;
  cursor: pointer; transition: background .18s ease, border-color .18s ease, transform .18s ease;
}
.theme-toggle:hover { background: rgba(255,255,255,.09); transform: translateY(-1px); }
.theme-toggle:focus-visible, .theme-toggle-button:focus-visible { outline: 2px solid #ff4fb6; outline-offset: 2px; }
.theme-toggle-icon { display: inline-grid; place-items: center; line-height: 0; }
.theme-toggle-floating {
  position: fixed; top: 14px; right: 14px; z-index: 2147483000;
  background: rgba(22,20,26,.86); color: #f7f7fb; backdrop-filter: blur(10px);
}
html[dir="rtl"] .theme-toggle-floating { right: auto; left: 14px; }
.legal-topbar .theme-toggle { margin-inline-start: 12px; }
@media (prefers-reduced-motion: reduce) { .theme-toggle { transition: none; } .theme-toggle:hover { transform: none; } }

html[data-theme="light"] .theme-toggle { border-color: rgba(28,22,40,.14); background: rgba(28,22,40,.04); color: #1d1a24; }
html[data-theme="light"] .theme-toggle:hover { background: rgba(28,22,40,.08); }
html[data-theme="light"] .theme-toggle-floating { background: rgba(255,255,255,.92); }

/* First visit: choose dark or light (theme-toggle.mjs openThemeChooser). */
.theme-chooser-backdrop {
  position: fixed; inset: 0; z-index: 2147483600; display: grid; place-items: center; padding: 16px;
  background: rgba(6,5,10,.62); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  animation: theme-chooser-in .22s ease both;
}
.theme-chooser {
  width: min(560px, 100%); max-height: calc(100vh - 32px); overflow: auto; padding: 22px;
  border-radius: 22px; border: 1px solid rgba(255,255,255,.12);
  background: #16141b; color: #f5f4f8; box-shadow: 0 40px 120px rgba(0,0,0,.55);
  font: 500 15px/1.5 "Inter Variable", Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
}
.theme-chooser-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.theme-chooser-mark { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; color: #ff4fb6; background: rgba(255,79,182,.12); border: 1px solid rgba(255,79,182,.3); font-size: 20px; }
.theme-chooser-language select { max-width: 190px; padding: 7px 10px; border-radius: 10px; border: 1px solid rgba(255,255,255,.14); background: #1f1c25; color: inherit; font: inherit; font-size: 13px; }
.theme-chooser-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.theme-chooser h2 { margin: 16px 0 6px; font-size: 24px; line-height: 1.15; letter-spacing: -.02em; }
.theme-chooser p { margin: 0; color: #b4b1bd; font-size: 14px; }
.theme-chooser-options { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 18px 0; }
/* The app's styles.css clears every button's background, border, shadow and
   outline with !important, so the chooser's buttons set theirs the same way. */
.theme-chooser .theme-choice {
  display: grid; gap: 10px; padding: 10px; border-radius: 16px; cursor: pointer; text-align: start;
  border: 2px solid rgba(255,255,255,.1) !important; background: rgba(255,255,255,.03) !important; box-shadow: none !important;
  color: inherit; font: inherit; transition: border-color .18s ease, transform .18s ease, background .18s ease;
}
.theme-chooser .theme-choice:hover { transform: translateY(-2px); border-color: rgba(255,79,182,.45) !important; }
.theme-chooser .theme-choice[aria-checked="true"] { border-color: #ff4fb6 !important; background: rgba(255,79,182,.08) !important; box-shadow: 0 0 0 4px rgba(255,79,182,.16) !important; }
.theme-chooser .theme-choice:focus-visible, .theme-chooser .theme-chooser-confirm:focus-visible, .theme-chooser-language select:focus-visible { outline: 2px solid #ff4fb6 !important; outline-offset: 2px; }
.theme-choice-label { display: flex; align-items: center; gap: 8px; font-weight: 800; }
.theme-choice-label::before { content: ""; width: 16px; height: 16px; border-radius: 50%; border: 2px solid currentColor; opacity: .55; box-sizing: border-box; }
.theme-choice[aria-checked="true"] .theme-choice-label::before { opacity: 1; border-color: #ff4fb6; background: radial-gradient(circle, #ff4fb6 0 4px, transparent 5px); }
.theme-chooser .theme-chooser-confirm {
  width: 100%; padding: 13px 16px; border: 0; border-radius: 13px; cursor: pointer; color: #fff; font: inherit; font-weight: 900;
  background: linear-gradient(135deg, #ff4fb6, #ef2ad4 56%, #7d5cff) !important; box-shadow: 0 12px 30px rgba(235,48,194,.25) !important;
}
.theme-chooser .theme-chooser-confirm:hover { filter: brightness(1.06) !important; }
.theme-chooser .theme-chooser-confirm:focus-visible { box-shadow: 0 12px 30px rgba(235,48,194,.25) !important; }
@keyframes theme-chooser-in { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .theme-chooser-backdrop { animation: none; } .theme-chooser .theme-choice { transition: none; } .theme-chooser .theme-choice:hover { transform: none; } }
@media (max-width: 420px) { .theme-chooser { padding: 18px; } .theme-chooser h2 { font-size: 21px; } .theme-chooser-options { gap: 8px; } }

/* The real front page in each theme (theme-previews/, scripts/build-theme-previews.mjs).
   A picture that cannot load leaves the card in its theme's colour. */
.theme-preview { display: block; aspect-ratio: 8 / 5; border-radius: 11px; overflow: hidden; border: 1px solid rgba(127,127,140,.28); }
.theme-preview img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.theme-preview img[hidden] { display: none; }
.theme-preview-dark { background: #0e0c12; }
.theme-preview-light { background: #f9f7fd; }

html[data-theme="light"] .theme-chooser-backdrop { background: rgba(40,30,60,.34); }
html[data-theme="light"] .theme-chooser { background: #ffffff; color: #1d1a24; border-color: rgba(28,22,40,.12); box-shadow: 0 40px 120px rgba(28,22,40,.22); }
html[data-theme="light"] .theme-chooser p { color: #5d5a66; }
html[data-theme="light"] .theme-chooser-language select { background: #f6f4fa; border-color: rgba(28,22,40,.16); }
html[data-theme="light"] .theme-chooser .theme-choice { border-color: rgba(28,22,40,.12) !important; background: rgba(28,22,40,.02) !important; }
html[data-theme="light"] .theme-chooser .theme-choice:hover { border-color: rgba(224,53,155,.45) !important; }
html[data-theme="light"] .theme-chooser .theme-choice[aria-checked="true"] { border-color: #e0359b !important; background: rgba(255,79,182,.06) !important; box-shadow: 0 0 0 4px rgba(224,53,155,.14) !important; }

/* Asset Bridge belongs to the editor's existing Chat / Changes rail.
   No full-screen modal, background Sandbox, or independent media downloader. */
#assetBridgePanel { display: none; }
body:not(.builder-mode) .editor-panel-tabs [data-editor-panel="assets"] { display: none !important; }
body.builder-mode .editor-chat-panel.show-assets #assetBridgePanel:not([hidden]) {
  display: flex;
  flex: 1 1 0;
  min-height: 0;
  flex-direction: column;
  gap: 12px;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 14px 14px 20px;
  overscroll-behavior: contain;
  background: #18161c;
  color: #f3edf3;
  scrollbar-width: thin;
}
body.builder-mode .editor-chat-panel.show-assets #editorChatThread,
body.builder-mode .editor-chat-panel.show-assets #editorComposerForm,
body.builder-mode .editor-chat-panel.show-assets .editor-agent-ai-notice,
body.builder-mode .editor-chat-panel.show-assets #builderTodos { display: none !important; }
body.builder-mode .asset-bridge-head { display: grid; gap: 6px; }
body.builder-mode .asset-bridge-eyebrow { color: #ef81ba; font-size: 10px; font-weight: 760; letter-spacing: .16em; }
body.builder-mode .asset-bridge-head h3 { font-weight: 730; font-size: 21px; line-height: 1.25; letter-spacing: -.035em; margin: 0; }
body.builder-mode .asset-bridge-head p { color: #bdb0c0; font-size: 12px; line-height: 1.5; margin: 0; }
body.builder-mode .asset-bridge-toolbar { display: grid; grid-template-columns: minmax(0,1fr) 120px; gap: 7px; }
body.builder-mode .asset-bridge-search, body.builder-mode .asset-bridge-select {
  min-width: 0; min-height: 38px; width: 100%; border: 1px solid #423844; border-radius: 9px;
  padding: 8px 10px; color: #eee8ef; background: #231e26; font: inherit; font-size: 12px;
}
body.builder-mode .asset-bridge-search::placeholder { color: #938696; }
body.builder-mode .asset-bridge-scopes { display: flex; flex-wrap: wrap; gap: 6px; }
body.builder-mode .asset-bridge-button {
  border: 1px solid #4b3e4c; border-radius: 8px; padding: 7px 10px; min-height: 34px;
  background: #2a242c; color: #e4d8e4; font: inherit; font-size: 11px; font-weight: 630;
  cursor: pointer; transition: background 150ms ease, border-color 150ms ease, transform 150ms ease;
}
body.builder-mode .asset-bridge-button.asset-bridge-danger { border-color: rgba(229,91,106,.40); color: #ffc5ce; background: rgba(164,43,66,.09); }
.asset-bridge-button.asset-bridge-danger:hover { background: rgba(164,43,66,.20); border-color: rgba(229,91,106,.75); }
.asset-bridge-button:disabled { opacity: .48; cursor: not-allowed; }
html[data-theme="light"] .asset-bridge-button.asset-bridge-danger { color: #8d1737; border-color: #bc7286; background: #fff1f5; }
.asset-bridge-button:hover { background: #352939; border-color: #bb6f9d; }
body.builder-mode .asset-bridge-button:focus-visible,
body.builder-mode .asset-bridge-search:focus-visible,
body.builder-mode .asset-bridge-select:focus-visible { outline: 2px solid #f387c0; outline-offset: 2px; }
body.builder-mode .asset-bridge-button.asset-bridge-filter[aria-pressed="true"] {
  background: #472338; color: #ffe7f3; border-color: #c35a96;
}
body.builder-mode .asset-bridge-notice { color: #a99dab; font-size: 11px; line-height: 1.45; min-height: 16px; }
body.builder-mode .asset-bridge-grid { display: grid; gap: 10px; align-content: start; }
body.builder-mode .asset-bridge-card {
  display: grid; grid-template-columns: 76px minmax(0,1fr); gap: 10px;
  padding: 9px; border: 1px solid #392f3b; border-radius: 12px;
  background: #242029;
}
body.builder-mode .asset-bridge-visual {
  display: grid; place-items: center; position: relative; overflow: hidden;
  width: 76px; height: 80px; background: #302531;
  border-radius: 8px; border: 1px solid #493449;
}
body.builder-mode .asset-bridge-visual img { position: absolute; inset: 0; height: 100%; width: 100%; object-fit: cover; z-index: 1; }
body.builder-mode .asset-bridge-symbol { font-size: 30px; color: #ea77b5; }
body.builder-mode .asset-bridge-content { min-width: 0; display: grid; align-content: start; gap: 4px; }
body.builder-mode .asset-bridge-title { font-size: 12.5px; line-height: 1.35; overflow-wrap: anywhere; color: #fbf5fc; }
body.builder-mode .asset-bridge-meta { font-size: 11px; line-height: 1.4; color: #c4b5c7; overflow-wrap: anywhere; }
body.builder-mode .asset-bridge-warning { color: #f3be87; font-size: 11px; }
body.builder-mode .asset-bridge-actions { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 5px; align-items: center; }
body.builder-mode .asset-bridge-button.asset-bridge-primary { background: #923263; border-color: #b74885; color: #fff6fa; }
body.builder-mode .asset-bridge-button.asset-bridge-primary:hover { background: #ae3974; }
body.builder-mode .asset-bridge-tag { font-size: 10px; color: #c7a9bd; padding: 4px 0; }
body.builder-mode .asset-bridge-empty { padding: 34px 12px; border: 1px dashed #473a4b; border-radius: 12px; text-align: center; font-size: 12px; color: #baacc0; }
body.builder-mode .asset-bridge-button.asset-bridge-refresh { width: 100%; min-height: 36px; background: transparent; border-style: dashed; }
html[data-theme="light"] body.builder-mode .editor-chat-panel.show-assets #assetBridgePanel:not([hidden]) { background: #faf7fa; color: #362b38; }
html[data-theme="light"] body.builder-mode .asset-bridge-head p,
html[data-theme="light"] body.builder-mode .asset-bridge-meta,
html[data-theme="light"] body.builder-mode .asset-bridge-notice { color: #705d70; }
html[data-theme="light"] body.builder-mode .asset-bridge-eyebrow { color: #a22b68; }
html[data-theme="light"] body.builder-mode .asset-bridge-search,
html[data-theme="light"] body.builder-mode .asset-bridge-select,
html[data-theme="light"] body.builder-mode .asset-bridge-button { background: #fff; color: #432f41; border-color: #d4c2d1; }
html[data-theme="light"] body.builder-mode .asset-bridge-button.asset-bridge-primary { background: #983165; color: white; border-color: #983165; }
html[data-theme="light"] body.builder-mode .asset-bridge-button.asset-bridge-filter[aria-pressed="true"] { background: #f9deed; border-color: #bb5790; color: #703052; }
html[data-theme="light"] body.builder-mode .asset-bridge-card { background: #fff; border-color: #e4d4df; }
html[data-theme="light"] body.builder-mode .asset-bridge-title { color: #332334; }
html[data-theme="light"] body.builder-mode .asset-bridge-visual { background: #f5e8f1; border-color: #e3c7da; }
html[data-theme="light"] body.builder-mode .asset-bridge-empty { color: #715c70; border-color: #dcc6d5; }
html[data-theme="light"] body.builder-mode .asset-bridge-tag { color: #715c70; }
html[dir="rtl"] body.builder-mode .asset-bridge-panel { direction: rtl; text-align: start; }
@media (max-width: 520px) {
  body.builder-mode .asset-bridge-toolbar { grid-template-columns: minmax(0,1fr) 105px; }
  body.builder-mode .editor-chat-panel.show-assets #assetBridgePanel:not([hidden]) { padding: 12px; }
  body.builder-mode .asset-bridge-card { grid-template-columns: 66px minmax(0,1fr); }
  body.builder-mode .asset-bridge-visual { width: 66px; height: 74px; }
}
@media (prefers-reduced-motion: reduce) {
  body.builder-mode .asset-bridge-button { transition: none; }
}


/* Metadata + offline sorting: keep every control within the existing editor rail. */
body.builder-mode .asset-bridge-toolbar { grid-template-columns: minmax(0,1fr) minmax(88px,auto) minmax(100px,auto); }
body.builder-mode .asset-bridge-summary { font-variant-numeric: tabular-nums; }
body.builder-mode .asset-bridge-details { min-width: 0; font-size: 11px; color: #c4b5c7; }
body.builder-mode .asset-bridge-details summary { cursor: pointer; font-weight: 650; }
body.builder-mode .asset-bridge-details p { margin: 6px 0 0; overflow-wrap: anywhere; }
html[data-theme="light"] body.builder-mode .asset-bridge-details { color: #705d70; }
@media (max-width: 520px) {
 body.builder-mode .asset-bridge-toolbar { grid-template-columns: minmax(0,1fr) minmax(0,1fr); }
 body.builder-mode .asset-bridge-search { grid-column: 1 / -1; }
}

/* Heart quote is a read-only estimate, not a purchase action. */
body.builder-mode .asset-bridge-price {
  display: block; flex-basis: 100%; min-width: 0; overflow-wrap: anywhere;
  color: #e8c9da; font-size: 11px; font-variant-numeric: tabular-nums; line-height: 1.5;
}
html[data-theme="light"] body.builder-mode .asset-bridge-price { color: #804464; }
body.builder-mode .asset-bridge-details summary:focus-visible,
body.builder-mode .asset-bridge-button:focus-visible,
body.builder-mode .asset-bridge-select:focus-visible,
body.builder-mode .asset-bridge-search:focus-visible {
  outline: 2px solid #d677a9; outline-offset: 2px;
}

/* Liquid glass sidebar and top bar (end of styles.css) in the light theme:
   frosted white glass with white specular rims. The generated colors would
   turn the white highlights grey. */
html[data-theme="light"] :is(#sidebar, #responsivePreviewControl) {
  --lg-fill-top: rgba(255,255,255,.62);
  --lg-fill-bottom: rgba(250,246,255,.5);
  --lg-sheen: rgba(255,255,255,.75);
  --lg-glow: rgba(240,68,145,.1);
  --lg-glow-2: rgba(124,92,255,.09);
  --lg-edge: rgba(255,255,255,.8);
  --lg-rim: #fff;
  --lg-rim-low: rgba(70,44,100,.07);
  --lg-depth: rgba(255,255,255,.4);
  --lg-drop: rgba(70,40,110,.24);
  --lg-lens-top: rgba(255,255,255,.75);
  --lg-lens-bottom: rgba(255,255,255,.4);
  --lg-lens-rim: #fff;
  --lg-pill-top: rgba(255,255,255,.96);
  --lg-pill-bottom: rgba(255,255,255,.66);
  --lg-pill-rim: #fff;
  --lg-pill-edge: rgba(70,44,100,.08);
  --lg-pill-pink: rgba(240,68,145,.16);
  --lg-chip: rgba(255,255,255,.72);
  --lg-chip-rim: #fff;
  --lg-divider: rgba(70,44,100,.1);
  --lg-ink: #1d1a24;
}
html[data-theme="light"] #responsivePreviewControl { --lg-fill-top: rgba(255,255,255,.8); --lg-fill-bottom: rgba(250,246,255,.72); }
html[data-theme="light"] #sidebar#sidebar .tilt-float::after { background-image: radial-gradient(circle at var(--glare-x, 50%) var(--glare-y, 50%), rgba(255,255,255,.75), rgba(255,255,255,0) 62%); }
@media (max-width: 1024px) {
  html[data-theme="light"] body:not([data-preview-device]) #sidebar { --lg-fill-top: rgba(255,255,255,.9); --lg-fill-bottom: rgba(250,247,255,.94); }
}
html[data-theme="light"] body:is([data-preview-device="mobile"], [data-preview-device="tablet"]) #sidebar { --lg-fill-top: rgba(255,255,255,.9); --lg-fill-bottom: rgba(250,247,255,.94); }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  html[data-theme="light"] #sidebar#sidebar { --lg-fill-top: rgba(253,251,255,.97); --lg-fill-bottom: rgba(248,245,253,.98); }
}
@media (prefers-reduced-transparency: reduce) {
  html[data-theme="light"] #sidebar#sidebar { --lg-fill-top: rgba(253,251,255,.98); --lg-fill-bottom: rgba(248,245,253,.99); }
}


/* Agent composer: three real preview tools, not a stack over the Sandbox.
   This last-loaded stylesheet owns both dark and light designs. */
body:not(.builder-mode) #editorPreviewTools,
#editorPreviewTools:empty { display: none; }
body.builder-mode .builder-chat-tools {
  display: grid; grid-template-columns: repeat(3,minmax(0,1fr));
  gap: 8px; min-width: 0; margin: 9px 0 12px;
}
body.builder-mode .builder-chat-tools > button.builder-chat-tool {
  position: relative; inset: auto; z-index: auto;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 7px; width: 100%; min-width: 0; min-height: 78px;
  margin: 0; padding: 10px 6px;
  border: 1px solid rgba(255,255,255,.13) !important;
  border-radius: 12px; background: linear-gradient(145deg,#28202d,#1c1822) !important;
  color: #f5eaf4 !important; box-shadow: inset 0 1px rgba(255,255,255,.035) !important;
  font: inherit; cursor: pointer; text-align: center;
  transition: background .16s ease, border-color .16s ease, transform .16s ease;
}
body.builder-mode .builder-chat-tools .builder-chat-tool-icon {
  display: grid; place-items: center; flex: 0 0 auto; width: 28px; height: 28px;
  border-radius: 9px; border: 1px solid rgba(240,68,145,.25);
  background: rgba(240,68,145,.14); color: #ff88bb;
  font-size: 18px; font-weight: 700; line-height: 1;
}
body.builder-mode .builder-chat-tools .builder-chat-tool-label {
  display: block; min-width: 0; max-width: 100%;
  font-size: 11px; font-weight: 700; line-height: 1.28;
  overflow-wrap: anywhere; hyphens: auto; text-align: center;
}
body.builder-mode .builder-chat-tools > button.builder-chat-tool:hover:not(:disabled) {
  transform: translateY(-1px);
  border-color: rgba(240,68,145,.72) !important;
  background: #362435 !important;
}
body.builder-mode .builder-chat-tools > button.builder-chat-tool[aria-pressed="true"] {
  background: #49253c !important;
  border-color: #ef589c !important;
  color: #fff9fd !important;
}
body.builder-mode .builder-chat-tools > button.builder-chat-tool:focus-visible {
  outline: 2px solid #ff60a7 !important; outline-offset: 2px;
}
body.builder-mode .builder-chat-tools > button.builder-chat-tool:disabled {
  opacity: .48; cursor: not-allowed; transform: none;
}
/* Explicit light palette: don't rely on generated dark-to-light conversion. */
html[data-theme="light"] body.builder-mode .builder-chat-tools > button.builder-chat-tool {
  border-color: #e2ccd9 !important;
  background: linear-gradient(145deg,#fffafd,#f7eef7) !important;
  color: #342734 !important;
  box-shadow: 0 1px 3px rgba(84,37,65,.065) !important;
}
html[data-theme="light"] body.builder-mode .builder-chat-tools .builder-chat-tool-icon {
  border-color: #e9c4d8; background: #f9dfed; color: #98255f;
}
html[data-theme="light"] body.builder-mode .builder-chat-tools > button.builder-chat-tool:hover:not(:disabled) {
  border-color: #ba5c90 !important; background: #fff0f8 !important;
}
html[data-theme="light"] body.builder-mode .builder-chat-tools > button.builder-chat-tool[aria-pressed="true"] {
  border-color: #ae3b79 !important; background: #f8daeb !important;
  color: #522940 !important;
}
html[data-theme="light"] body.builder-mode .builder-chat-tools > button.builder-chat-tool:disabled {
  border-color: #e6dfe7 !important; background: #f8f5f8 !important;
  color: #766c78 !important; opacity: .64;
}
@media (max-width: 480px) {
  body.builder-mode .builder-chat-tools { gap: 6px; margin: 7px 0 9px; }
  body.builder-mode .builder-chat-tools > button.builder-chat-tool { min-height: 72px; padding: 8px 4px; }
  body.builder-mode .builder-chat-tools .builder-chat-tool-label { font-size: 10.5px; }
}
@media (max-width: 350px) {
  body.builder-mode .builder-chat-tools { gap: 4px; }
  body.builder-mode .builder-chat-tools .builder-chat-tool-icon { width: 25px; height: 25px; }
  body.builder-mode .builder-chat-tools .builder-chat-tool-label { font-size: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  body.builder-mode .builder-chat-tools > button.builder-chat-tool { transition: none; }
  body.builder-mode .builder-chat-tools > button.builder-chat-tool:hover { transform: none; }
}


/* BaseHeart premium motion suite — progressive visual feedback, no new copy.
   The existing heart and its pink/violet palette remain the single signature;
   secondary effects respond to real actions and never block controls. */

/* M3 — Build sends a single short light wave through the dashboard emblem. */
#dashboardView .hero-emblem { position: relative; }
#dashboardView .hero-emblem.bh-energy-burst::after {
  content:""; position:absolute; left:50%; top:50%; z-index:2;
  width:min(156px,32vw); aspect-ratio:1; border-radius:50%;
  border:1px solid rgba(255,130,201,.8); pointer-events:none;
  box-shadow:0 0 26px rgba(240,68,145,.38),inset 0 0 20px rgba(240,68,145,.2);
  animation:bh-heart-burst 1.15s cubic-bezier(.14,.72,.2,1) both;
}
@keyframes bh-heart-burst {
  0%{opacity:0;transform:translate(-50%,-50%) scale(.48)}
  22%{opacity:.85}
  100%{opacity:0;transform:translate(-50%,-50%) scale(1.5)}
}
html[data-theme="light"] #dashboardView .hero-emblem.bh-energy-burst::after {
  border-color:rgba(168,34,112,.82);
  box-shadow:0 0 16px rgba(191,56,130,.2),inset 0 0 12px rgba(189,52,133,.12);
}

/* M4 — Project Portal: pointer-driven, very low-amplitude physical tilt. */
.main-content .project-card { position:relative; transform-style:preserve-3d; }
.main-content .project-card::after {
  content:""; position:absolute; inset:0; z-index:5; pointer-events:none;
  opacity:0;
  background:radial-gradient(ellipse 220px 180px at var(--bh-card-x,50%) var(--bh-card-y,50%),rgba(255,176,214,.12),transparent 82%);
  transition:opacity .2s ease;
}
.main-content .project-card[data-bh-tilt="on"] {
  transform:perspective(1000px) translateY(-3px) rotateX(var(--bh-card-rotx,0deg)) rotateY(var(--bh-card-roty,0deg));
  box-shadow:0 20px 44px rgba(0,0,0,.22),0 0 0 1px rgba(240,68,145,.12);
  transition:transform .12s ease-out,box-shadow .2s ease;
}
.main-content .project-card[data-bh-tilt="on"]::after { opacity:1; }
html[data-theme="light"] .main-content .project-card::after {
  background:radial-gradient(ellipse 220px 180px at var(--bh-card-x,50%) var(--bh-card-y,50%),rgba(182,45,126,.075),transparent 82%);
}
html[data-theme="light"] .main-content .project-card[data-bh-tilt="on"] {
  box-shadow:0 18px 32px rgba(73,34,72,.11),0 0 0 1px rgba(175,58,126,.09);
}

/* M5 — Only server-confirmed Heart claims fly toward the existing balance. */
.bh-heart-flight {
  position:fixed;z-index:2147482500;pointer-events:none;user-select:none;
  color:#ff80b9;text-shadow:0 0 10px rgba(240,68,145,.72),0 0 23px rgba(255,126,184,.3);
  font-size:17px;line-height:1;opacity:0;
  animation:bh-hearts-collect 1.12s cubic-bezier(.22,.65,.27,1) var(--bh-fly-delay,0ms) forwards;
}
@keyframes bh-hearts-collect {
  0%{opacity:0;transform:translate3d(0,0,0) scale(.54)}
  12%{opacity:1}
  75%{opacity:.95}
  100%{opacity:0;transform:translate3d(var(--bh-fly-x,0px),var(--bh-fly-y,0px),0) scale(.2)}
}
.bh-wallet-received { animation:bh-wallet-confirm 1.05s ease-out both; }
@keyframes bh-wallet-confirm {
  0%,100%{filter:none}
  27%{filter:drop-shadow(0 0 9px rgba(255,102,177,.9))}
  60%{filter:drop-shadow(0 0 5px rgba(255,102,177,.32))}
}
html[data-theme="light"] .bh-heart-flight {
  color:#ac2d70;text-shadow:0 0 10px rgba(178,48,114,.28);
}
/* Hearts that fly into the balance (heart-wallet-motion.mjs): each heart
   follows its own arc, the button bumps as it lands, the number rolls up. */
.bh-heart-flight.bh-heart-arc {
  left:0;top:0;opacity:1;animation:none;will-change:transform;
}
.heart-balance-button.bh-wallet-tick :is(.heart-glyph,strong) { animation:bh-wallet-tick .16s ease-out; }
.heart-balance-button .heart-glyph { display:inline-block; }
@keyframes bh-wallet-tick { 0%,100%{transform:scale(1)} 45%{transform:scale(1.3)} }
strong.bh-rolling { display:inline-flex;font-variant-numeric:tabular-nums; }
.bh-roll-place { display:inline-block;height:1.2em;line-height:1.2em;overflow:hidden;vertical-align:bottom; }
.bh-roll-column { display:flex;flex-direction:column;transition:transform .2s cubic-bezier(.3,1.45,.5,1); }
.bh-roll-column > span { display:block;height:1.2em;line-height:1.2em;text-align:center; }
.bh-heart-gain {
  position:fixed;z-index:2147482500;pointer-events:none;transform:translate(-50%,0);
  font-size:13px;font-weight:800;color:#7ed8a3;text-shadow:0 0 12px rgba(126,216,163,.45);
  animation:bh-heart-gain 1.6s ease-out forwards;
}
html[data-theme="light"] .bh-heart-gain { color:#1d8a4f;text-shadow:none; }
@keyframes bh-heart-gain {
  0%{opacity:0;transform:translate(-50%,-6px) scale(.8)}
  18%{opacity:1;transform:translate(-50%,0) scale(1.06)}
  70%{opacity:1}
  100%{opacity:0;transform:translate(-50%,14px) scale(1)}
}

/* M6 — Connector Orbit follows server-authenticated status; never guess green. */
.main-content .tools-status-chip.is-connected i {
  animation:bh-connector-heartbeat 4.8s ease-in-out infinite;
}
@keyframes bh-connector-heartbeat {
  0%,92%,100%{box-shadow:0 0 0 3px rgba(127,200,155,.10)}
  95%{box-shadow:0 0 0 5px rgba(127,200,155,.26),0 0 12px rgba(127,200,155,.4)}
}
.main-content .tools-banner:has(.tools-status-list[data-connected-count="3"]) .tools-orbit::after {
  content:"";position:absolute;inset:3px;border-radius:50%;
  border:1px solid rgba(126,216,163,.12);border-top-color:rgba(126,216,163,.92);
  border-inline-end-color:rgba(240,68,145,.66);pointer-events:none;
  animation:bh-connector-orbit 9s linear infinite;
}
@keyframes bh-connector-orbit { to{transform:rotate(360deg)} }
html[data-theme="light"] .main-content .tools-status-chip.is-connected i {
  animation-name:bh-connector-heartbeat-light;
}
@keyframes bh-connector-heartbeat-light {
  0%,92%,100%{box-shadow:0 0 0 3px rgba(42,132,80,.1)}
  95%{box-shadow:0 0 0 5px rgba(42,132,80,.2)}
}

/* M7 — Eclipse theme transition: circular reveal starts at the actual button.
   Browsers without View Transitions use the unchanged instant switch. */
html.bh-theme-eclipse::after {
  content:"";position:fixed;inset:0;z-index:2147481000;pointer-events:none;
  background:radial-gradient(circle at var(--bh-eclipse-x,50%) var(--bh-eclipse-y,50%),rgba(240,68,145,.17),rgba(124,92,255,.07) 27%,transparent 57%);
  animation:bh-eclipse-reveal .62s cubic-bezier(.23,.72,.2,1) both;
}
html[data-theme="light"].bh-theme-eclipse::after {
  background:radial-gradient(circle at var(--bh-eclipse-x,50%) var(--bh-eclipse-y,50%),rgba(177,57,135,.14),rgba(124,92,255,.04) 27%,transparent 57%);
}
@keyframes bh-eclipse-reveal {
  0%{opacity:.6;clip-path:circle(0 at var(--bh-eclipse-x,50%) var(--bh-eclipse-y,50%))}
  52%{opacity:1}
  100%{opacity:0;clip-path:circle(150vmax at var(--bh-eclipse-x,50%) var(--bh-eclipse-y,50%))}
}

/* Sunrise (theme-toggle.mjs): the new theme is revealed in a circle growing
   from the button over a still picture of the old one; the icon turns in. */
html.bh-theme-sunrise::view-transition-old(root),
html.bh-theme-sunrise::view-transition-new(root) { animation:none;mix-blend-mode:normal; }
html.bh-theme-sunrise::view-transition-old(root) { z-index:1; }
html.bh-theme-sunrise::view-transition-new(root) { z-index:2; }
html.bh-theme-sunrise .theme-toggle-icon svg { animation:bh-theme-icon-turn .72s cubic-bezier(.3,1.4,.5,1); }
@keyframes bh-theme-icon-turn {
  0%{transform:rotate(-140deg) scale(.55);opacity:.2}
  100%{transform:none;opacity:1}
}

/* Departure board (heading-flap.mjs): when the language changes, a copy of the
   big heading lies over it and its letters flip to the new words. The real,
   translated heading stays in place (only see-through) for screen readers. */
.bh-flap-host { position:relative; }
.bh-flap-hidden { opacity:0 !important; }
.bh-flap-board {
  position:absolute !important;margin:0 !important;box-sizing:border-box;max-width:none !important;
  pointer-events:none;user-select:none;animation:none !important;transition:opacity .18s ease;
}
.bh-flap-board.bh-flap-fill { background-image:none !important; }
.bh-flap-board.bh-flap-leaving { opacity:0; }
.bh-flap-word { display:inline-block;white-space:nowrap; }
.bh-flap-word.bh-flap-open { display:inline;white-space:normal; }
.bh-flap-cell { position:relative;display:inline-block;text-align:center;white-space:pre;transform-origin:50% 50%;backface-visibility:hidden; }
.bh-flap-cell::after { content:"";position:absolute;left:0;right:0;top:50%;height:max(1px,.035em);background:var(--bh-flap-gap,rgba(11,9,15,.62));pointer-events:none; }
html[data-theme="light"] .bh-flap-board { --bh-flap-gap:rgba(255,255,255,.8); }
.bh-flap-fill .bh-flap-cell { -webkit-background-clip:text;background-clip:text;background-repeat:no-repeat;color:transparent; }
@media (prefers-reduced-motion:reduce) {
  .bh-flap-board { display:none !important; }
  .bh-flap-hidden { opacity:1 !important; }
}

/* Publishing is held, not clicked (hold-to-publish.mjs): the heart in the
   button fills while it is held and empties if it is let go too early. */
.bh-hold-button { display:inline-flex;align-items:center;justify-content:center;gap:10px;text-align:start;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;touch-action:none; }
.bh-hold-heart { width:24px;height:24px;flex:none;overflow:visible; }
.primary-button.bh-hold-button .bh-hold-heart { color:#fff; }
.bh-hold-heart .bh-hold-outline { fill:none;stroke:currentColor;stroke-width:2.2;stroke-linejoin:round; }
.bh-hold-heart .bh-hold-fill { fill:currentColor; }
.bh-hold-words { display:grid;gap:1px;line-height:1.15; }
.bh-hold-label { font-weight:700; }
.bh-hold-hint { display:grid;font-size:11px;font-weight:500;opacity:.84;font-variant-numeric:tabular-nums;white-space:nowrap; }
.bh-hold-hint > span { grid-area:1/1; }
.bh-hold-ghost { visibility:hidden; }
.bh-hold-button.bh-hold-done .bh-hold-heart { animation:bh-hold-pop .45s ease-out; }
.bh-hold-button.bh-hold-shake { animation:bh-hold-shake .35s; }
@keyframes bh-hold-shake { 20%{transform:translateX(-5px)} 40%{transform:translateX(5px)} 60%{transform:translateX(-3px)} 80%{transform:translateX(3px)} }
@keyframes bh-hold-pop { 0%{transform:scale(1)} 40%{transform:scale(1.35)} 100%{transform:scale(1)} }
.bh-hold-spark { position:fixed;z-index:2147482500;width:14px;height:14px;pointer-events:none; }
.bh-hold-spark path { fill:#ff80b9;filter:drop-shadow(0 0 6px rgba(240,68,145,.7)); }
html[data-theme="light"] .bh-hold-spark path { fill:#ac2d70;filter:none; }
@media (prefers-reduced-motion:reduce) {
  .bh-hold-button.bh-hold-shake,.bh-hold-button.bh-hold-done .bh-hold-heart { animation:none !important; }
  .bh-hold-spark { display:none !important; }
}

/* The big heading greets a signed-in owner by first name (hero-greeting.mjs),
   with the question on the next line; it is set a little smaller. */
body .main-content .hero-heading h1.bh-greeting { font-size:clamp(34px,3.6vw,46px);max-width:17em;margin-inline:auto;white-space:pre-line; }
@media (max-width:760px) { body .main-content .hero-heading h1.bh-greeting { font-size:clamp(29px,8vw,38px); } }
body[data-preview-device="mobile"] .main-content .hero-heading h1.bh-greeting { font-size:clamp(29px,8vw,38px); }

/* The plan before sign-in draws itself as a blueprint (plan-blueprint.mjs):
   thin lines on blueprint paper while the words type in, and it colors in
   when the visitor continues. The blueprint is the same in both themes. */
@property --bh-bp-grid { syntax:'<number>';inherits:false;initial-value:0; }
.main-content .start-plan-card.bh-bp .start-plan-mock {
  position:relative;
  background-image:linear-gradient(rgba(150,200,255,calc(.13*var(--bh-bp-grid))) 1px,transparent 1px),linear-gradient(90deg,rgba(150,200,255,calc(.13*var(--bh-bp-grid))) 1px,transparent 1px);
  background-size:12px 12px;
  transition:background-color .6s ease,color .6s ease,box-shadow .6s ease,--bh-bp-grid .6s ease;
}
.main-content .start-plan-card.bh-bp :is(.start-plan-mock-bar,.start-plan-mock-bar i,.start-plan-mock-nav span,.start-plan-mock-name,.start-plan-mock-line,.start-plan-mock-blocks b) { transition:background-color .6s ease,color .6s ease,box-shadow .6s ease,opacity .6s ease,filter .6s ease; }
.main-content .start-plan-card.bh-bp :is(.start-plan-name,.start-plan-tagline,.start-plan-pages strong,.start-plan-pages span,.start-plan-features li) { transition:color .6s ease; }
.main-content .start-plan-card.bh-blueprint .start-plan-mock { --bh-bp-grid:1;background-color:#0e2544;color:#d4e8ff;box-shadow:inset 0 0 0 1px rgba(159,208,255,.7),0 18px 40px rgba(0,0,0,.35); }
.main-content .start-plan-card.bh-blueprint .start-plan-mock-bar { background-color:transparent;box-shadow:inset 0 -1px rgba(159,208,255,.7); }
.main-content .start-plan-card.bh-blueprint .start-plan-mock-bar i { background-color:transparent;box-shadow:inset 0 0 0 1px rgba(159,208,255,.85); }
.main-content .start-plan-card.bh-blueprint .start-plan-mock-nav span { background-color:transparent;color:#cfe6ff;box-shadow:inset 0 0 0 1px rgba(159,208,255,.75); }
.main-content .start-plan-card.bh-blueprint :is(.start-plan-mock-name,.start-plan-mock-line) { color:#e3f1ff;filter:none;border-radius:3px;box-shadow:0 0 0 1px rgba(159,208,255,.38); }
.main-content .start-plan-card.bh-blueprint .start-plan-mock-blocks b { background-color:transparent;opacity:1;box-shadow:inset 0 0 0 1px rgba(159,208,255,.8); }
.main-content .start-plan-card.bh-blueprint :is(.start-plan-name,.start-plan-tagline,.start-plan-pages strong,.start-plan-pages span,.start-plan-features li,.start-plan-features li::before) { color:#9fd0ff; }
html[data-theme="light"] .main-content .start-plan-card.bh-blueprint :is(.start-plan-name,.start-plan-tagline,.start-plan-pages strong,.start-plan-pages span,.start-plan-features li,.start-plan-features li::before) { color:#1f5fae; }
/* While the lines are traced, the mock's own outlines and words wait. */
.main-content .start-plan-card.bh-bp-drawing .start-plan-mock { box-shadow:0 18px 40px rgba(0,0,0,.35); }
.main-content .start-plan-card.bh-bp-drawing :is(.start-plan-mock-bar,.start-plan-mock-bar i,.start-plan-mock-nav span,.start-plan-mock-name,.start-plan-mock-line,.start-plan-mock-blocks b) { box-shadow:none; }
.main-content .start-plan-card.bh-bp-drawing :is(.start-plan-mock-nav span,.start-plan-mock-name,.start-plan-mock-line) { color:transparent; }
.bh-bp-lines { position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none; }
.bh-bp-lines path { fill:none;stroke:#9fd0ff;stroke-width:1.2;vector-effect:non-scaling-stroke;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:1;animation:bh-bp-draw .55s ease-out var(--bh-bp-at,0ms) forwards;transition:opacity .4s ease; }
.bh-bp-lines path.bh-bp-dim { stroke-width:1;opacity:.75; }
.bh-bp-lines text { fill:#9fd0ff;font:600 8px/1 ui-monospace,SFMono-Regular,Menlo,monospace;opacity:0;animation:bh-bp-label .3s ease 1.5s forwards; }
.bh-bp-lines.bh-bp-lines-done path:not(.bh-bp-dim) { opacity:0; }
@keyframes bh-bp-draw { to { stroke-dashoffset:0; } }
@keyframes bh-bp-label { to { opacity:.85; } }
.main-content .start-plan-card .bh-bp-type { clip-path:inset(0 100% 0 0);animation:bh-bp-type var(--bh-bp-type,400ms) steps(var(--bh-bp-steps,12),end) var(--bh-bp-at,0ms) forwards; }
.main-content .start-plan-card .bh-bp-type:dir(rtl) { clip-path:inset(0 0 0 100%); }
@keyframes bh-bp-type { to { clip-path:inset(0 0 0 0); } }
/* Continue: a light sweeps over the drawing as the colors come in. */
.main-content .start-plan-card.bh-bp-color .start-plan-mock::after { content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(100deg,transparent 30%,rgba(255,255,255,.6) 50%,transparent 70%);animation:bh-bp-sweep .7s ease-out forwards; }
@keyframes bh-bp-sweep { from { transform:translateX(-110%); } to { transform:translateX(110%);opacity:.3; } }
/* The editor's preview as a real phone or tablet (device-flip.mjs turns it
   round): the bezel is drawn with shadows, so the preview keeps its exact
   width, and the camera sits on the stage just above it. */
.editor-stage[data-editor-device="mobile"],.editor-stage[data-editor-device="tablet"] { padding-top:46px; }
.editor-stage[data-editor-device="mobile"] .app-canvas { border-color:transparent;border-radius:38px;box-shadow:0 0 0 10px #0b0a0e,0 -16px 0 10px #0b0a0e,0 0 0 11.5px #3a3742,0 -16px 0 11.5px #3a3742,0 34px 80px rgba(0,0,0,.5); }
.editor-stage[data-editor-device="tablet"] .app-canvas { border-color:transparent;border-radius:24px;box-shadow:0 0 0 14px #0b0a0e,0 0 0 15.5px #3a3742,0 34px 80px rgba(0,0,0,.45); }
.editor-stage[data-editor-device="mobile"]::before,.editor-stage[data-editor-device="tablet"]::before { content:"";position:absolute;z-index:3;left:50%;pointer-events:none;background:#1d1b23;box-shadow:inset 0 0 0 1px rgba(255,255,255,.06);transition:opacity .2s ease; }
.editor-stage[data-editor-device="mobile"]::before { top:27px;width:76px;height:12px;margin-left:-38px;border-radius:8px; }
.editor-stage[data-editor-device="tablet"]::before { top:36px;width:6px;height:6px;margin-left:-3px;border-radius:50%; }
.editor-stage.bh-device-flipping::before { opacity:0; }
html[data-theme="light"] .editor-stage[data-editor-device="mobile"] .app-canvas { box-shadow:0 0 0 10px #1b1a1f,0 -16px 0 10px #1b1a1f,0 0 0 11.5px #55525c,0 -16px 0 11.5px #55525c,0 30px 70px rgba(30,20,40,.28); }
html[data-theme="light"] .editor-stage[data-editor-device="tablet"] .app-canvas { box-shadow:0 0 0 14px #1b1a1f,0 0 0 15.5px #55525c,0 30px 70px rgba(30,20,40,.24); }
.bh-device-glint { position:absolute;z-index:4;overflow:hidden;pointer-events:none;border-radius:38px; }
.editor-stage[data-editor-device="tablet"] .bh-device-glint { border-radius:24px; }
.bh-device-glint::before { content:"";position:absolute;inset:-10% -60%;background:linear-gradient(115deg,transparent 42%,rgba(255,255,255,.26) 50%,transparent 58%);transform:translateX(-60%);animation:bh-device-glint .95s ease-out forwards; }
@keyframes bh-device-glint { to { transform:translateX(60%);opacity:.2; } }

@media (prefers-reduced-motion:reduce) {
  .bh-device-glint { display:none !important; }
  .bh-bp-lines { display:none !important; }
  .main-content .start-plan-card .bh-bp-type { clip-path:none !important;animation:none !important; }
  .main-content .start-plan-card.bh-bp-color .start-plan-mock::after { display:none !important; }
}

/* M8 — The existing server-confirmed Rewards level dialog gets a restrained
   constellation halo; its translated text and close/focus controls stay intact. */
.rewards-celebration { position:relative;isolation:isolate; }
.rewards-celebration::before {
  content:"";position:absolute;z-index:0;inset:10px;pointer-events:none;
  background:
    radial-gradient(circle at 12% 23%,rgba(255,225,242,.85) 0 1px,transparent 2px),
    radial-gradient(circle at 78% 16%,rgba(255,185,220,.9) 0 1px,transparent 2px),
    radial-gradient(circle at 88% 52%,rgba(255,225,242,.86) 0 1px,transparent 2px),
    radial-gradient(circle at 21% 76%,rgba(255,144,207,.8) 0 1.4px,transparent 3px),
    radial-gradient(circle at 72% 87%,rgba(255,185,220,.85) 0 1px,transparent 3px);
  opacity:0;animation:bh-level-constellation 1.6s ease-out .1s both;
}
.rewards-celebration > * { position:relative;z-index:1; }
.rewards-celebration h2 { animation:bh-level-title .75s cubic-bezier(.18,.9,.26,1) both; }
@keyframes bh-level-constellation {
  0%{opacity:0;transform:scale(.86) rotate(-5deg)}
  35%{opacity:1}
  100%{opacity:.58;transform:scale(1.05) rotate(3deg)}
}
@keyframes bh-level-title {
  from{opacity:0;transform:translateY(10px) scale(.94)}
  to{opacity:1;transform:none}
}
html[data-theme="light"] .rewards-celebration::before { filter:saturate(.8); }

/* M9 — Prompt glow only while there is useful text, not an always-on pulse. */
#composerForm.bh-has-prompt {
  border-color:rgba(240,68,145,.42);
  box-shadow:0 22px 68px rgba(0,0,0,.24),0 0 0 1px rgba(240,68,145,.14),inset 0 1px rgba(255,255,255,.04);
}
#composerForm.bh-has-prompt .build-button:not(:disabled) {
  box-shadow:0 9px 28px rgba(240,68,145,.25);
}
body.builder-mode #editorComposerForm:has(#editorPrompt:not(:placeholder-shown)) {
  border-color:rgba(240,68,145,.44);
  box-shadow:0 0 0 1px rgba(240,68,145,.13),0 14px 40px rgba(0,0,0,.16);
}
html[data-theme="light"] #composerForm.bh-has-prompt {
  border-color:#c9709d;box-shadow:0 18px 40px rgba(90,40,72,.1),0 0 0 1px rgba(183,67,131,.13);
}
html[data-theme="light"] body.builder-mode #editorComposerForm:has(#editorPrompt:not(:placeholder-shown)) {
  border-color:#cb78a5;box-shadow:0 0 0 1px rgba(183,67,131,.13),0 14px 32px rgba(90,40,72,.1);
}

/* M10 — Morph the real device shell rather than adding a fake preview overlay. */
body.bh-preview-morph .app-shell,
body.bh-preview-morph .main-content {
  transition:width .4s cubic-bezier(.22,.74,.23,1),margin-inline-start .4s cubic-bezier(.22,.74,.23,1);
}
body.bh-preview-morph .editor-stage .app-canvas {
  transition:width .4s cubic-bezier(.22,.74,.23,1);
}

/* M11 — A momentary color-shift of the existing star field when account
   switching succeeds. No company/personal data is stored in the effect. */
.main-content.bh-universe-swap::after {
  content:"";position:fixed;inset:0;z-index:4;pointer-events:none;
  background:radial-gradient(ellipse at 50% 18%,rgba(240,68,145,.18),rgba(124,92,255,.07) 43%,transparent 76%);
  animation:bh-universe-shift .85s ease-out both;
}
@keyframes bh-universe-shift {
  0%{opacity:0;transform:scale(.94)}
  30%{opacity:1}
  100%{opacity:0;transform:scale(1.04)}
}
html[data-theme="light"] .main-content.bh-universe-swap::after {
  background:radial-gradient(ellipse at 50% 18%,rgba(189,58,138,.1),rgba(124,92,255,.045) 43%,transparent 76%);
}

/* M12 — A QA result only pulses on a real completed test action. */
.bh-qa-pass { animation:bh-qa-passed .85s ease-out both; }
.bh-qa-fail { animation:bh-qa-failed .85s ease-out both; }
@keyframes bh-qa-passed {
  0%,100%{box-shadow:none}
  27%{box-shadow:0 0 0 2px rgba(104,211,148,.45),0 0 22px rgba(104,211,148,.18)}
}
@keyframes bh-qa-failed {
  0%,100%{box-shadow:none}
  27%{box-shadow:0 0 0 2px rgba(245,117,138,.46),0 0 22px rgba(245,117,138,.16)}
}

/* M14 — Off-screen/hidden/reduced-motion states never pay the animation cost. */
@media (hover:none),(pointer:coarse) {
  .main-content .project-card[data-bh-tilt="on"] { transform:none; }
  .main-content .project-card::after { display:none; }
}
@media (prefers-reduced-motion:reduce) {
  #dashboardView .hero-emblem.bh-energy-burst::after,
  .main-content .project-card::after,
  .main-content .tools-status-chip.is-connected i,
  .main-content .tools-banner .tools-orbit::after,
  .bh-heart-flight,.bh-wallet-received,.bh-heart-gain,.bh-wallet-tick :is(.heart-glyph,strong),
  .rewards-celebration::before,.rewards-celebration h2,
  .main-content.bh-universe-swap::after,
  .bh-qa-pass,.bh-qa-fail { animation:none!important; }
  .bh-heart-flight,.bh-heart-gain,#dashboardView .hero-emblem.bh-energy-burst::after,
  .main-content.bh-universe-swap::after {display:none!important}
  .main-content .project-card[data-bh-tilt="on"] { transform:none!important; }
  body.bh-preview-morph .app-shell,body.bh-preview-morph .main-content,
  body.bh-preview-morph .editor-stage .app-canvas { transition:none!important; }
  html.bh-theme-eclipse::after {animation:none!important;display:none!important}
  html.bh-theme-sunrise .theme-toggle-icon svg {animation:none!important}
}


/* BaseHeart cinematic motion, generation II.
   One signature (particle heart and build), quiet authentic feedback elsewhere.
   Variables are deliberately tied to the existing pink/violet identity. */
:root{
  --bh-cine-pink:#f04491;--bh-cine-rose:#ffb1dc;--bh-cine-violet:#a77fff;
  --bh-cine-shade:rgba(23,13,32,.86);--bh-cine-ink:#fff5fb;
}
html[data-theme="light"]{
  --bh-cine-pink:#b12b75;--bh-cine-rose:#b24f8b;--bh-cine-violet:#7250ab;
  --bh-cine-shade:rgba(255,249,254,.96);--bh-cine-ink:#342036;
}
/* Galaxy is a third project view, not another database or a second copy of
   private/Workspace projects. Every existing native card action stays usable. */
.project-toolbar-view .bh-galaxy-toggle{
  display:inline-flex;align-items:center;justify-content:center;gap:5px;
  min-height:34px;min-width:38px;max-width:160px;padding:6px 10px;
  border:1px solid transparent;border-radius:9px;background:transparent;
  color:inherit;font:inherit;font-size:11px;font-weight:730;cursor:pointer;
}
.project-toolbar-view .bh-galaxy-toggle:hover,
.project-toolbar-view .bh-galaxy-toggle[aria-pressed="true"]{
  border-color:rgba(240,68,145,.44);
  background:rgba(240,68,145,.13);color:var(--bh-cine-ink);
}
.project-toolbar-view .bh-galaxy-toggle:focus-visible{
  outline:2px solid var(--bh-cine-pink);outline-offset:2px;
}
.project-toolbar-view .bh-galaxy-icon{color:var(--bh-cine-pink);font-size:19px;line-height:1}
html[data-theme="light"] .project-toolbar-view .bh-galaxy-toggle[aria-pressed="true"]{
  color:#5c2450;background:#f9e3ef;border-color:#cc83aa;
}
#projectGrid.bh-galaxy{
  position:relative;display:grid;min-width:0;min-height:300px;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,190px),1fr));
  align-content:start;align-items:stretch;gap:22px 24px;
  padding:34px 24px 42px;isolation:isolate;
  border-radius:24px;border:1px solid rgba(165,118,207,.15);
  background:
    radial-gradient(ellipse at 26% 29%,rgba(240,68,145,.09),transparent 53%),
    radial-gradient(ellipse at 76% 64%,rgba(122,86,214,.13),transparent 61%),
    radial-gradient(circle at 18% 17%,rgba(255,213,242,.76) 0 1px,transparent 1.7px),
    radial-gradient(circle at 71% 48%,rgba(203,174,255,.68) 0 1px,transparent 1.7px),
    radial-gradient(circle at 86% 84%,rgba(255,202,228,.66) 0 1px,transparent 1.7px),
    rgba(12,8,20,.32);
}
#projectGrid.bh-galaxy::before{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:-1;
  background:
    linear-gradient(128deg,transparent 24.8%,rgba(227,133,197,.09) 25%,transparent 25.2%),
    linear-gradient(31deg,transparent 58.8%,rgba(186,145,248,.08) 59%,transparent 59.2%);
}
#projectGrid.bh-galaxy > .project-card{
  position:relative;min-width:0;transform:none!important;
  border:1px solid rgba(240,68,145,.23);
  background:linear-gradient(145deg,rgba(34,23,46,.95),rgba(22,17,32,.9));
  box-shadow:0 10px 30px rgba(0,0,0,.16),0 0 16px rgba(240,68,145,.05);
  animation:bh-galaxy-arrive .65s cubic-bezier(.19,.85,.2,1) both;
}
#projectGrid.bh-galaxy > .project-card:nth-child(3n+2){animation-delay:70ms}
#projectGrid.bh-galaxy > .project-card:nth-child(3n){animation-delay:135ms}
#projectGrid.bh-galaxy > .project-card:hover{
  border-color:rgba(255,130,198,.74);
  box-shadow:0 12px 36px rgba(124,39,105,.22),0 0 20px rgba(240,68,145,.13);
}
#projectGrid.bh-galaxy > .project-card::before{
  content:"✦";position:absolute;top:-13px;inset-inline-start:calc(50% - 11px);
  display:grid;place-items:center;width:22px;height:22px;border-radius:50%;
  color:#fff6fd;background:radial-gradient(circle,#ff77c4 0 22%,#9f4fa2 78%,#43214d);
  font-size:11px;pointer-events:none;z-index:7;
  box-shadow:0 0 14px rgba(255,123,194,.55);
}
#projectGrid.bh-galaxy > .project-card .project-preview{min-height:128px}
html[data-theme="light"] #projectGrid.bh-galaxy{
  border-color:rgba(177,76,141,.15);
  background:radial-gradient(ellipse at 22% 30%,rgba(239,158,201,.13),transparent 58%),
    radial-gradient(ellipse at 74% 65%,rgba(176,158,239,.16),transparent 61%),
    #fdf8fd;
}
html[data-theme="light"] #projectGrid.bh-galaxy > .project-card{
  color:#39283a;border-color:#e0b7ce;
  background:#fffafb;box-shadow:0 11px 27px rgba(70,30,76,.09);
}
@keyframes bh-galaxy-arrive{
  from{opacity:0;transform:translate3d(0,16px,0) scale(.94)}
  to{opacity:1;transform:translate3d(0,0,0) scale(1)}
}

/* A confirmed Sandbox iframe load briefly turns its containing frame into
   a glowing architectural blueprint. Never hide actual UI or block input. */
#appCanvas.bh-genesis-live{position:relative;isolation:isolate}
#appCanvas.bh-genesis-live::after{
  content:"";position:absolute;inset:0;z-index:11;pointer-events:none;
  border-radius:inherit;border:1px solid rgba(240,68,145,.42);
  background:
    repeating-linear-gradient(0deg,transparent 0 22px,rgba(240,68,145,.095) 23px 24px),
    repeating-linear-gradient(90deg,transparent 0 22px,rgba(173,113,231,.09) 23px 24px),
    linear-gradient(105deg,transparent 30%,rgba(251,193,234,.14) 47%,transparent 65%);
  box-shadow:inset 0 0 35px rgba(240,68,145,.08),0 0 28px rgba(240,68,145,.08);
  transform-origin:center;animation:bh-genesis-build 1.7s ease-out both;
}
@keyframes bh-genesis-build{
  0%{opacity:0;clip-path:inset(0 0 100% 0);transform:scale(.985)}
  20%{opacity:.8}
  65%{opacity:.4;clip-path:inset(0 0 0 0);transform:scale(1)}
  100%{opacity:0;transform:scale(1)}
}
html[data-theme="light"] #appCanvas.bh-genesis-live::after{
  border-color:rgba(172,57,122,.37);
  background:repeating-linear-gradient(0deg,transparent 0 22px,rgba(176,60,121,.08) 23px 24px),
    repeating-linear-gradient(90deg,transparent 0 22px,rgba(132,90,182,.07) 23px 24px);
}

/* True streamed work log, Code DNA and build timeline.
   Animated points correspond only to real tool events / changed files. */
.builder-working .builder-work-steps{position:relative}
.builder-working .builder-work-steps::before{
  content:"";position:absolute;top:12px;bottom:12px;inset-inline-start:12px;
  border-inline-start:1px solid rgba(240,68,145,.25);pointer-events:none;
}
.builder-working .builder-tool-running .builder-tool-icon{
  box-shadow:0 0 0 1px rgba(240,68,145,.3),0 0 12px rgba(240,68,145,.26);
  animation:bh-code-active 2s ease-in-out infinite;
}
.builder-working .builder-tool-done .builder-tool-icon{
  animation:bh-code-done .56s ease-out both;
}
.builder-files-card .builder-file-row{
  position:relative;transition:background-color .18s ease,border-color .18s ease;
}
.builder-files-card .builder-file-row::after{
  content:"";position:absolute;inset-inline-start:8px;top:50%;
  width:0;height:1px;pointer-events:none;
  background:linear-gradient(90deg,transparent,var(--bh-cine-pink),transparent);
  opacity:0;transition:width .25s ease,opacity .25s ease;
}
.builder-files-card .builder-file-row:hover::after,
.builder-files-card .builder-file-row:focus-visible::after{width:65%;opacity:.38}
@keyframes bh-code-active{50%{box-shadow:0 0 0 2px rgba(240,68,145,.25),0 0 18px rgba(240,68,145,.44)}}
@keyframes bh-code-done{0%{filter:drop-shadow(0 0 9px var(--bh-cine-pink))}100%{filter:none}}

/* Confirmed production URL opens out of the real Publish button. */
.editor-header-actions{position:relative}
#publishBtn.bh-wormhole{animation:bh-wormhole .95s cubic-bezier(.19,.85,.2,1) both}
#publishBtn.bh-wormhole::after{
  content:"";position:absolute;inset:-6px;border:1px solid var(--bh-cine-rose);
  border-radius:inherit;pointer-events:none;animation:bh-portal-ring 1.5s ease-out both;
}
.bh-publish-domain{
  position:absolute;z-index:30;inset-inline-end:0;top:100%;margin-top:7px;
  pointer-events:none;max-width:min(320px,75vw);overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap;direction:ltr;text-align:center;
  border:1px solid rgba(240,68,145,.48);border-radius:11px;
  padding:8px 11px;background:var(--bh-cine-shade);color:var(--bh-cine-ink);
  font-size:11px;font-weight:760;box-shadow:0 9px 30px rgba(50,15,45,.2);
  animation:bh-domain-appear 4.6s ease-in-out both;
}
@keyframes bh-wormhole{0%,100%{filter:none}45%{filter:drop-shadow(0 0 18px var(--bh-cine-pink))}}
@keyframes bh-portal-ring{
  0%{opacity:0;transform:scale(.7)}
  28%{opacity:.85}
  100%{opacity:0;transform:scale(1.42)}
}
@keyframes bh-domain-appear{
  0%{opacity:0;transform:translateY(-7px)}
  12%,78%{opacity:1;transform:none}
  100%{opacity:0;transform:translateY(-4px)}
}

/* Real checkpoint records carry the depth; no fabricated preview images. */
#historyList .history-item{
  position:relative;isolation:isolate;
  transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease;
}
#historyList .history-item::before,
#historyList .history-item::after{
  content:"";position:absolute;z-index:-1;pointer-events:none;border-radius:inherit;
  inset:5px -4px -5px 4px;border:1px solid rgba(198,107,180,.1);opacity:.55;
}
#historyList .history-item::after{inset:10px -7px -10px 7px;opacity:.25}
#historyList .history-item:hover,
#historyList .history-item:focus-within{
  transform:translateY(-2px);border-color:rgba(240,68,145,.52);
  box-shadow:0 10px 28px rgba(50,13,48,.17);
}
#historyList .history-item:focus-within{outline:1px solid var(--bh-cine-pink)}

/* 3D birth uses ONLY the finished, successfully loaded viewer model. */
#m3dStage.bh-model-born{isolation:isolate;overflow:hidden}
#m3dStage.bh-model-born #m3dViewer{
  transform-origin:center;
  animation:bh-model-materialize 1.4s cubic-bezier(.15,.84,.23,1) both;
}
#m3dStage.bh-model-born::after{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:9;
  border:1px solid rgba(240,68,145,.33);
  background:repeating-linear-gradient(0deg,transparent 0 27px,rgba(240,68,145,.075) 28px 29px);
  animation:bh-genesis-build 1.5s ease-out both;
}
@keyframes bh-model-materialize{
  0%{filter:brightness(.6) saturate(.6);transform:perspective(900px) rotateY(7deg) scale(.95);opacity:.5}
  68%{filter:brightness(1.18) saturate(1.1);opacity:1}
  100%{filter:none;transform:none;opacity:1}
}

/* Secret Radar / Security Checklist only after an authorized local scan. */
.editor-security-dialog.bh-secret-scanned{isolation:isolate}
.editor-security-dialog.bh-secret-scanned::after{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:9;
  background:linear-gradient(to bottom,transparent 0 46%,rgba(240,68,145,.14) 49%,
    rgba(255,195,230,.32) 50%,rgba(240,68,145,.14) 51%,transparent 55%);
  animation:bh-security-sweep 1.2s ease-out both;
}
@keyframes bh-security-sweep{
  0%{opacity:0;transform:translateY(-95%)}
  13%,67%{opacity:1}
  100%{opacity:0;transform:translateY(95%)}
}
.editor-security-dialog.bh-secret-scanned .editor-security-finding{
  border-color:rgba(240,68,145,.2);
}

/* Moving glass reflection belongs to the topbar; no new floating glass cards. */
#responsivePreviewControl.bh-glass-active::after{
  content:"";position:absolute;inset:1px;z-index:98;pointer-events:none;
  border-radius:inherit;
  background:radial-gradient(ellipse 110px 65px at var(--bh-glass-x,50%) var(--bh-glass-y,50%),
    rgba(255,211,238,.13),transparent 90%);
}
html[data-theme="light"] #responsivePreviewControl.bh-glass-active::after{
  background:radial-gradient(ellipse 110px 65px at var(--bh-glass-x,50%) var(--bh-glass-y,50%),
    rgba(164,58,130,.07),transparent 90%);
}

/* Workspace collaborators are shown from real membership, not implied online.
   Realtime online indicators can only appear after verified presence events. */
.bh-people-arrived .dialog-list > button{
  animation:bh-people-arrive .52s cubic-bezier(.22,.8,.3,1) both;
}
.bh-people-arrived .dialog-list > button:nth-child(2n){animation-delay:65ms}
.bh-people-arrived .dialog-list > button:nth-child(3n){animation-delay:120ms}
@keyframes bh-people-arrive{from{opacity:.4;transform:translateY(9px)}to{opacity:1;transform:none}}
[data-collaborator-id].bh-online::before{
  content:"";display:inline-block;width:7px;height:7px;margin-inline-end:6px;
  border-radius:50%;background:#69cb98;box-shadow:0 0 8px rgba(88,204,152,.5);
}

/* Actual generated images: reveal cards once after the paid server call ends.
   No new image downloads or cloud processing. */
#photoResults.bh-photo-born .photo-card-large{
  animation:bh-photo-unveil 1.15s cubic-bezier(.19,.76,.22,1) both;
}
#photoResults.bh-photo-born .photo-card-large:nth-child(2n){animation-delay:80ms}
#photoResults.bh-photo-born .photo-card-large:nth-child(3n){animation-delay:145ms}
@keyframes bh-photo-unveil{
  from{opacity:.3;transform:translateY(9px) scale(.978);clip-path:inset(0 0 100% 0)}
  75%{opacity:1;clip-path:inset(0)}
  to{opacity:1;transform:none;clip-path:inset(0)}
}

/* Ctrl+K: one 3D depth transition, existing focus management unaffected. */
#commandDialog.baseheart-command-modal[open] .command-card,
#commandDialog.command-modal[open] .command-card{
  animation:bh-command-arrive .32s cubic-bezier(.18,.9,.24,1) both;
  transform-origin:50% 12%;
}
@keyframes bh-command-arrive{
  from{opacity:.5;transform:perspective(1000px) translateY(12px) rotateX(-5deg) scale(.985)}
  to{opacity:1;transform:none}
}

/* Error recovery only when a real failed turn is followed by a true success
   within the same project, never from a simulated all-green status. */
.builder-result-banner.bh-error-recovered{
  animation:bh-recovery-confirm 1.3s ease-out both;
}
@keyframes bh-recovery-confirm{
  0%,100%{box-shadow:none}
  32%{box-shadow:0 0 0 2px rgba(100,211,154,.44),0 0 22px rgba(100,211,154,.28)}
}

/* Prompt-to-Blueprint uses original user-entered (allowlisted) words only. */
.bh-prompt-blueprint{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:7px;
  max-width:100%;padding:8px 10px 11px;direction:inherit;
}
.bh-blueprint-node{
  display:inline-flex;align-items:center;min-height:28px;padding:5px 10px;
  border:1px solid rgba(240,68,145,.27);border-radius:10px;
  background:rgba(240,68,145,.08);color:var(--bh-cine-ink);
  font-size:11px;font-weight:660;max-width:150px;overflow:hidden;text-overflow:ellipsis;
  animation:bh-blueprint-form .6s cubic-bezier(.2,.8,.24,1) both;
}
.bh-blueprint-node:nth-child(2){animation-delay:75ms}
.bh-blueprint-node:nth-child(3){animation-delay:140ms}
.bh-blueprint-node + .bh-blueprint-node::before{
  content:"◇";color:var(--bh-cine-rose);margin-inline-end:7px;
}
@keyframes bh-blueprint-form{
  from{opacity:0;filter:blur(3px);transform:translateY(8px)}
  to{opacity:1;filter:none;transform:none}
}

/* Scroll journey: section headings reveal once as REAL content enters view.
   Hero heart remains the dominant visual, and content is NEVER hidden by JS. */
#dashboardView .section-heading.bh-scroll-revealed{
  animation:bh-scroll-heading .55s cubic-bezier(.23,.75,.32,1) both;
}
@keyframes bh-scroll-heading{
  from{opacity:.75;transform:translateY(12px)}
  to{opacity:1;transform:none}
}

/* Narrow layouts keep native actions and dialog controls fully accessible. */
@media(max-width:760px){
  #projectGrid.bh-galaxy{
    grid-template-columns:repeat(2,minmax(0,1fr));gap:20px 12px;
    padding:28px 12px 24px;border-radius:15px;
  }
  .project-toolbar-view .bh-galaxy-toggle{min-width:34px;padding:5px 6px}
  .project-toolbar-view .bh-galaxy-label{font-size:10px}
  .bh-publish-domain{max-width:75vw}
}
@media(max-width:380px){
  #projectGrid.bh-galaxy{grid-template-columns:minmax(0,1fr)}
  .project-toolbar-view .bh-galaxy-label{display:none}
}

/* OS reduced motion disables both looping and one-shot motion, even if JS
   receives an event. Static result/permission texts remain unchanged. */
@media(prefers-reduced-motion:reduce){
  #projectGrid.bh-galaxy > .project-card,
  #appCanvas.bh-genesis-live::after,
  .builder-working .builder-tool-running .builder-tool-icon,
  .builder-working .builder-tool-done .builder-tool-icon,
  #publishBtn.bh-wormhole,#publishBtn.bh-wormhole::after,.bh-publish-domain,
  #m3dStage.bh-model-born #m3dViewer,#m3dStage.bh-model-born::after,
  .editor-security-dialog.bh-secret-scanned::after,
  .bh-people-arrived .dialog-list > button,#photoResults.bh-photo-born .photo-card-large,
  #commandDialog.baseheart-command-modal[open] .command-card,
  .builder-result-banner.bh-error-recovered,.bh-blueprint-node,
  #dashboardView .section-heading.bh-scroll-revealed{animation:none!important}
  #appCanvas.bh-genesis-live::after,#m3dStage.bh-model-born::after,
  .editor-security-dialog.bh-secret-scanned::after,#publishBtn.bh-wormhole::after,
  .bh-publish-domain{display:none!important}
  .builder-working .builder-tool-running .builder-tool-icon{box-shadow:none!important}
  #projectGrid.bh-galaxy > .project-card{transform:none!important}
}

/* The original translated local Security Checklist is reachable in Code,
   never in the retired free-shortcut chat grid. */
#editorSecurityToolbar.editor-security-toolbar{display:none;align-items:center;min-width:0}
body.builder-mode.editor-code-open #editorSecurityToolbar.editor-security-toolbar{
  display:inline-flex;gap:5px;
}
#editorSecurityToolbar .editor-security-trigger{
  display:inline-flex;align-items:center;justify-content:center;max-width:min(200px,32vw);
  min-height:33px;margin:0;padding:6px 11px;white-space:nowrap;text-overflow:ellipsis;
  overflow:hidden;cursor:pointer;
  background:rgba(240,68,145,.09);color:var(--bh-cine-ink);
  border:1px solid rgba(240,68,145,.3);border-radius:9px;
  font-size:11px;font-weight:750;
}
#editorSecurityToolbar .editor-security-trigger:hover,
#editorSecurityToolbar .editor-security-trigger:focus-visible{
  background:rgba(240,68,145,.17);border-color:var(--bh-cine-pink);
}
#editorSecurityToolbar .editor-security-trigger:focus-visible{outline:2px solid var(--bh-cine-pink);outline-offset:2px}
html[data-theme="light"] #editorSecurityToolbar .editor-security-trigger{
  background:#faeaf3;color:#6c2853;border-color:#d7a4bf;
}
@media(max-width:760px){
  #editorSecurityToolbar .editor-security-trigger{
    max-width:105px;white-space:normal;overflow-wrap:anywhere;
    padding:5px 7px;font-size:10px;
  }
}

/* Command Center Warp dims the underlying workspace while retaining native
   dialog focus/keyboard controls. No new overlay node or script required. */
#commandDialog[open]::backdrop {
  background:rgba(9,6,16,.6);
  backdrop-filter:blur(5px);
}
html[data-theme="light"] #commandDialog[open]::backdrop {
  background:rgba(33,18,44,.23);
}

/* The native project view controls use a fixed 2-column grid. Galaxy is
   a third real mode, so extend it explicitly rather than wrapping a button. */
.main-content .project-toolbar-view{
  grid-template-columns:repeat(3,44px);
}
.main-content .project-toolbar-view .bh-galaxy-toggle{
  width:44px;height:40px;min-width:44px;max-width:44px;padding:0;
}
.main-content .project-toolbar-view .bh-galaxy-label{display:none}

/* Finishing pass: the original cinematic design has one consistent palette
   and one set of keyframes. Only the verified source-to-preview pulse and a
   compact galaxy breakpoint need additional rules. */
#appCanvas.bh-code-dna{
  animation:bh-code-to-preview 1.1s ease-out both;
}
@keyframes bh-code-to-preview {
  0%,100%{box-shadow:none}
  30%{box-shadow:inset 0 0 0 1px rgba(255,158,211,.45),0 0 20px rgba(240,68,145,.19)}
}
html[data-theme="light"] #appCanvas.bh-code-dna{
  --bh-code-glow:rgba(167,59,119,.15);
}
@media(max-width:640px){
  #projectGrid.bh-galaxy{grid-template-columns:minmax(0,1fr)}
  .project-toolbar-view .bh-galaxy-toggle{min-height:40px;min-width:40px}
  .project-toolbar-view .bh-galaxy-label{display:none}
}
@media(prefers-reduced-motion:reduce){
  #appCanvas.bh-code-dna{animation:none!important}
}



/* Cinematic II – functional star map. The authorized card remains the only
   source for project names, stored homepage covers, and guarded open actions. */
#projectGrid.bh-galaxy{
  display:block;min-height:var(--bh-galaxy-height,460px);height:var(--bh-galaxy-height,460px);
  overflow:hidden;overflow:clip;position:relative;
  background-color:rgba(8,7,23,.65);
}
#projectGrid.bh-galaxy>.project-card{
  position:absolute;left:var(--bh-star-x,50%);top:var(--bh-star-y,50%);
  width:70px;height:70px;min-height:0;border:0;background:none;
  box-shadow:none;overflow:visible;z-index:1;
  transform:translate(-50%,-50%)!important;
  animation:bh-constellation-enter .52s ease-out both;
}
#projectGrid.bh-galaxy>.project-card::before{content:"";display:none!important}
#projectGrid.bh-galaxy>.project-card:hover,
#projectGrid.bh-galaxy>.project-card:focus-within{z-index:30}
#projectGrid.bh-galaxy>.project-card>.bh-galaxy-star{
  display:grid;place-items:center;position:absolute;inset:0;z-index:3;
  width:100%;height:100%;padding:0;border-radius:50%;cursor:pointer;
  color:#ffe4f4;font-size:27px;
  border:1px solid rgba(255,192,233,.48);
  background:radial-gradient(circle at 36% 30%,#ffb2e2 0%,#bc408e 32%,#462265 67%,#1b153c 100%);
  box-shadow:0 0 16px rgba(246,84,181,.4),0 0 39px rgba(136,84,255,.22),
    inset 0 0 13px rgba(255,255,255,.28);
  transition:filter .24s ease,box-shadow .24s ease;
}
#projectGrid.bh-galaxy>.project-card:nth-child(3n)>.bh-galaxy-star{
  background:radial-gradient(circle at 36% 30%,#e5cfff,#8366d9 36%,#332b65 72%,#14132f);
}
#projectGrid.bh-galaxy>.project-card>.bh-galaxy-star:hover,
#projectGrid.bh-galaxy>.project-card>.bh-galaxy-star:focus-visible{
  filter:brightness(1.27);
  box-shadow:0 0 26px rgba(250,121,202,.58),0 0 65px rgba(166,119,255,.33);
}
#projectGrid.bh-galaxy>.project-card>.bh-galaxy-star:focus-visible{
  outline:3px solid #ffe0f0;outline-offset:5px;
}
#projectGrid.bh-galaxy>.project-card>.project-preview,
#projectGrid.bh-galaxy>.project-card>.project-body{
  position:absolute;inset-inline-start:-76px;width:222px;
  visibility:hidden;opacity:0;pointer-events:none;
  transition:opacity .18s ease,visibility .18s ease,transform .18s ease;
}
#projectGrid.bh-galaxy>.project-card>.project-preview{
  top:70px;height:142px;min-height:142px;overflow:hidden;
  border:1px solid rgba(245,146,207,.54);
  border-radius:14px 14px 0 0;background:#1d172b;
  transform:translateY(7px);
}
#projectGrid.bh-galaxy>.project-card>.project-body{
  top:210px;min-height:55px;padding:9px;border-radius:0 0 14px 14px;
  border:1px solid rgba(245,146,207,.54);border-top:0;
  background:#24182f;box-shadow:0 20px 45px rgba(4,3,13,.34);
  transform:translateY(7px);
}
#projectGrid.bh-galaxy>.project-card:hover>.project-preview,
#projectGrid.bh-galaxy>.project-card:hover>.project-body,
#projectGrid.bh-galaxy>.project-card:focus-within>.project-preview,
#projectGrid.bh-galaxy>.project-card:focus-within>.project-body{
  visibility:visible;opacity:1;pointer-events:auto;transform:none;
}
#projectGrid.bh-galaxy>.project-card .project-preview-open{position:absolute;inset:0}
#projectGrid.bh-galaxy>.project-card.bh-galaxy-launch>.bh-galaxy-star{
  animation:bh-star-launch .47s cubic-bezier(.16,.8,.19,1) both;
}
html[data-theme="light"] #projectGrid.bh-galaxy>.project-card>.project-preview{background:#fff8fe}
html[data-theme="light"] #projectGrid.bh-galaxy>.project-card>.project-body{background:#fff8fd;color:#342036}
html[data-theme="light"] #projectGrid.bh-galaxy{background-color:#faf1ff}
@keyframes bh-constellation-enter{
  from{opacity:0;filter:blur(5px)}
  to{opacity:1;filter:none}
}
@keyframes bh-star-launch{
  0%{transform:scale(1);opacity:1}
  75%{transform:scale(2.8);opacity:.85}
  100%{transform:scale(8);opacity:0}
}
#appCanvas .bh-code-stream{
  position:absolute;inset-inline-end:12px;bottom:16px;z-index:12;
  display:grid;gap:6px;max-width:min(220px,55%);pointer-events:none;
}
#appCanvas .bh-code-stream>span{
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;direction:ltr;
  padding:6px 9px;border:1px solid rgba(238,127,206,.38);border-radius:8px;
  background:var(--bh-cine-shade);color:var(--bh-cine-ink);
  font:600 11px ui-monospace,monospace;
  animation:bh-file-to-preview 1.5s ease-out both;
}
#appCanvas .bh-code-stream>span:nth-child(2){animation-delay:95ms}
#appCanvas .bh-code-stream>span:nth-child(3){animation-delay:190ms}
@keyframes bh-file-to-preview{
  0%{transform:translateX(-32px);opacity:0;filter:blur(3px)}
  35%,75%{opacity:1;filter:none}
  100%{transform:none;opacity:0}
}
.editor-header-actions .bh-publish-live{
  display:inline-flex;align-items:center;justify-content:center;
  position:absolute;top:calc(100% + 48px);inset-inline-end:0;z-index:31;
  min-height:36px;padding:8px 15px;white-space:nowrap;
  border-radius:11px;border:1px solid rgba(240,68,145,.5);
  background:var(--bh-cine-pink);color:#fff;box-shadow:0 12px 29px rgba(119,38,95,.24);
  font-size:12px;font-weight:800;animation:bh-domain-appear 11.8s ease-in-out both;
}
.editor-header-actions .bh-publish-live:focus-visible{outline:3px solid #fff;outline-offset:2px}
.builder-working .builder-work-steps.bh-timeline-progress::after{
  content:"";position:absolute;inset-inline-start:7px;
  top:var(--bh-step-top,12px);
  width:11px;height:11px;border-radius:50%;
  background:#ffb4e0;box-shadow:0 0 10px 2px rgba(245,80,170,.48);
  transition:top .35s cubic-bezier(.2,.8,.25,1);
  pointer-events:none;
}
.builder-working .builder-work-steps.bh-timeline-failed::after{display:none}
@media(max-width:640px){
  #projectGrid.bh-galaxy{height:var(--bh-galaxy-height,460px);min-height:var(--bh-galaxy-height,460px)}
  #projectGrid.bh-galaxy>.project-card{width:54px;height:54px}
  #projectGrid.bh-galaxy>.project-card>.bh-galaxy-star{font-size:21px}
  #projectGrid.bh-galaxy>.project-card>.project-preview,
  #projectGrid.bh-galaxy>.project-card>.project-body{width:168px;inset-inline-start:-57px}
  #projectGrid.bh-galaxy>.project-card>.project-preview{top:54px;height:113px;min-height:113px}
  #projectGrid.bh-galaxy>.project-card>.project-body{top:165px}
}
@media(prefers-reduced-motion:reduce){
  #projectGrid.bh-galaxy>.project-card,
  #projectGrid.bh-galaxy>.project-card.bh-galaxy-launch>.bh-galaxy-star,
  #appCanvas .bh-code-stream>span,
  .editor-header-actions .bh-publish-live{animation:none!important}
  .builder-working .builder-work-steps.bh-timeline-progress::after{transition:none!important}
}


/* Historical ghost layers use the actual saved project checkpoints. */
#historyList .bh-history-ghost-scene{
  display:grid;gap:11px;padding:17px;margin:9px 0 19px;
  border:1px solid rgba(239,110,190,.2);border-radius:17px;
  background:radial-gradient(ellipse at 50% 60%,rgba(164,91,215,.13),transparent 75%);
  isolation:isolate;
}
#historyList .bh-history-ghost-layers{position:relative;min-height:190px;perspective:900px;overflow:hidden}
#historyList .bh-history-ghost-layer{
  position:absolute;left:10%;right:10%;top:14%;height:136px;
  display:flex;flex-direction:column;gap:7px;align-items:flex-start;
  padding:16px 22px;border:1px solid rgba(242,135,214,.4);border-radius:12px;
  color:#ffe9fa;background:linear-gradient(135deg,rgba(75,35,94,.88),rgba(27,17,51,.85));
  box-shadow:0 17px 45px rgba(23,4,38,.35);
  opacity:calc(1 - var(--bh-layer-distance,0)*.16);
  transform:translate3d(calc(var(--bh-layer-direction,0)*8px),
    calc(var(--bh-layer-distance,0)*8px),calc(var(--bh-layer-distance,0)*-55px))
    rotateY(calc(var(--bh-layer-direction,0)*-4deg));
  z-index:calc(9 - var(--bh-layer-distance,0));
  transition:transform .47s cubic-bezier(.2,.8,.25,1),opacity .4s ease;
  pointer-events:none;
}
#historyList .bh-history-ghost-mark{position:absolute;right:13px;top:12px;font-size:24px;color:#fc9bdb}
#historyList .bh-history-ghost-name,#historyList .bh-history-ghost-route{
  display:block;max-width:calc(100% - 40px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis
}
#historyList .bh-history-ghost-name{font-size:15px}
#historyList .bh-history-ghost-route{font-size:11px;opacity:.72;direction:ltr}
#historyList .bh-history-ghost-elements{display:flex;gap:5px;flex-wrap:wrap;overflow:hidden;max-height:38px}
#historyList .bh-history-ghost-elements>span{
  font-size:10px;max-width:100%;overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap;padding:3px 6px;border-radius:5px;
  border:1px solid rgba(255,187,225,.2);background:rgba(255,255,255,.08)
}
#historyList .bh-history-ghost-range{
  width:100%;min-height:30px;cursor:pointer;accent-color:var(--bh-cine-pink);
}
#historyList .bh-history-ghost-range:focus-visible{outline:2px solid var(--bh-cine-pink);outline-offset:2px}
#historyList .bh-history-ghost-caption{min-height:18px;color:var(--bh-cine-ink);font-size:12px;font-weight:700}
#historyList .history-item.bh-history-chosen{
  border-color:rgba(240,68,145,.75);box-shadow:0 0 0 1px rgba(240,68,145,.18)
}
html[data-theme="light"] #historyList .bh-history-ghost-layer{
  color:#532450;background:linear-gradient(140deg,#fff5fc,#f5ebfc);border-color:rgba(144,81,140,.35);
}
@media(max-width:640px){
  #historyList .bh-history-ghost-layer{left:4%;right:4%;padding:12px 15px}
  #historyList .bh-history-ghost-name{font-size:13px}
}
@media(prefers-reduced-motion:reduce){#historyList .bh-history-ghost-layer{transition:none!important}}


/* The app appears only after its iframe has REALLY loaded. First the
   blueprint grid, then structural light and finally the existing live app. */
#appCanvas.bh-genesis-live::before{
  content:"";position:absolute;inset:0;z-index:12;pointer-events:none;
  border:1px solid rgba(255,146,211,.75);border-radius:inherit;
  background:
    repeating-linear-gradient(0deg,transparent 0 42px,rgba(249,130,200,.25) 43px 44px),
    repeating-linear-gradient(90deg,transparent 0 76px,rgba(196,145,240,.2) 77px 78px),
    linear-gradient(120deg,rgba(255,156,216,.09),rgba(118,77,204,.08));
  box-shadow:inset 0 0 55px rgba(237,84,181,.16),0 0 25px rgba(239,112,205,.18);
  animation:bh-genesis-structure 1.55s cubic-bezier(.17,.83,.26,1) both;
}
@keyframes bh-genesis-structure{
  0%{opacity:.05;clip-path:inset(0 100% 0 0);filter:blur(4px)}
  25%{opacity:.95;clip-path:inset(0 0 0 0);filter:none}
  55%{opacity:.65}
  100%{opacity:0;filter:blur(7px)}
}
html[data-theme="light"] #appCanvas.bh-genesis-live::before{
  border-color:rgba(154,53,117,.57);
  background:repeating-linear-gradient(0deg,transparent 0 42px,rgba(179,74,129,.13) 43px 44px),
    repeating-linear-gradient(90deg,transparent 0 76px,rgba(141,86,195,.14) 77px 78px);
}
/* Blueprint connections are actual accepted project keywords; no files or
   credentials are drawn into this decorative layer. */
.bh-prompt-blueprint{
  position:relative;padding:12px 14px;
  border:1px solid rgba(234,120,202,.16);border-radius:12px;
  background:linear-gradient(90deg,rgba(239,76,169,.055) 1px,transparent 1px),
    linear-gradient(rgba(239,76,169,.055) 1px,transparent 1px);
  background-size:21px 21px;isolation:isolate;
}
.bh-prompt-blueprint .bh-blueprint-node{
  position:relative;z-index:1;border-color:rgba(242,145,207,.5);
  box-shadow:inset 0 0 12px rgba(243,129,204,.07),0 3px 13px rgba(75,19,91,.09);
}
.bh-prompt-blueprint .bh-blueprint-node:not(:first-child)::before{
  content:"";position:absolute;top:50%;width:14px;height:1px;
  inset-inline-start:-17px;margin:0;background:var(--bh-cine-rose);
  box-shadow:0 0 8px rgba(240,68,145,.5);
}
.editor-security-dialog.bh-scan-findings .editor-security-finding{
  border-color:rgba(241,120,147,.55);
  box-shadow:inset 2px 0 0 rgba(241,120,147,.55);
}
.editor-security-dialog.bh-scan-clear:not(.bh-scan-findings) .editor-security-status{
  border-color:rgba(110,211,160,.35);
}
/* The view itself never causes an extra request. These overlays may protrude
   when a star near the constellation edge receives keyboard focus. */
@media(min-width:1200px){
  #projectGrid.bh-galaxy:has(>.project-card:hover),
  #projectGrid.bh-galaxy:has(>.project-card:focus-within){overflow:visible}
}
@media(prefers-reduced-motion:reduce){
  #appCanvas.bh-genesis-live::before{display:none!important;animation:none!important}
}


/* Accessible command warp uses the actual markup's command-modal class in
   every motion mode, including the reduced-motion override. */
@media(prefers-reduced-motion:reduce){
  #commandDialog.command-modal[open] .command-card{animation:none!important;transform:none!important}
}
/* The verified file chips send light toward the real preview boundary. */
#appCanvas .bh-code-stream::before{
  content:"";position:absolute;inset-inline-end:98%;top:50%;
  height:1px;width:clamp(28px,8vw,110px);pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(246,149,213,.75));
  box-shadow:0 0 8px rgba(238,108,203,.48);
  transform-origin:100% 50%;animation:bh-dna-link 1.45s ease-out both;
}
@keyframes bh-dna-link{0%{transform:scaleX(0);opacity:0}40%{transform:scaleX(1);opacity:1}100%{opacity:0}}
@media(prefers-reduced-motion:reduce){#appCanvas .bh-code-stream::before{animation:none;display:none}}

/* Galaxy remains within its parent when its content includes absolute stars. */
#projectGrid.bh-galaxy{box-sizing:border-box}


/* Verified Workspace presence: no status is drawn without a recent, scoped
   response from the existing authenticated collaboration endpoint. */
#genericDialogCard .bh-presence-live{
  margin-block:12px 4px;padding:12px;
  border:1px solid rgba(142,212,180,.27);
  border-radius:14px;
  background:linear-gradient(110deg,rgba(46,164,117,.07),rgba(127,90,185,.06));
}
#genericDialogCard .bh-presence-live[hidden]{display:none!important}
#genericDialogCard .bh-presence-title{
  display:block;margin-bottom:10px;font-size:12px;font-weight:750;
  color:var(--bh-cine-ink);letter-spacing:.01em;
}
#genericDialogCard .bh-presence-avatars{
  display:flex;flex-wrap:wrap;gap:8px;align-items:center;min-width:0;
}
#genericDialogCard .bh-presence-chip{
  display:inline-flex;align-items:center;gap:7px;
  min-height:38px;max-width:100%;padding:5px 10px 5px 5px;
  border:1px solid rgba(138,208,169,.3);border-radius:999px;
  background:var(--bh-cine-shade);color:var(--bh-cine-ink);
  box-shadow:0 5px 18px rgba(28,108,75,.06);
}
#genericDialogCard .bh-presence-initial{
  display:grid;place-items:center;flex:none;width:27px;height:27px;
  border-radius:50%;background:linear-gradient(140deg,#35795c,#8b5ac3);
  color:#fff;font-size:12px;font-weight:800;
  box-shadow:0 0 0 2px rgba(105,203,152,.15);
}
#genericDialogCard .bh-presence-name{
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  font-size:12px;font-weight:650;
}
/* M13: one verified activity trail beside the existing live participant chips. */
#genericDialogCard .bh-presence-file-panel{min-width:0;margin-top:11px;padding-top:10px;border-top:1px solid rgba(138,208,169,.2)}
#genericDialogCard .bh-presence-file-panel[hidden]{display:none!important}
#genericDialogCard .bh-presence-file-heading{display:block;margin-bottom:7px;font-size:11px;line-height:1.4;font-weight:750;color:var(--bh-cine-ink);opacity:.83}
#genericDialogCard .bh-presence-file-rows{display:grid;gap:6px;min-width:0}
#genericDialogCard .bh-presence-file-row{display:flex;flex-wrap:wrap;align-items:baseline;gap:3px 9px;min-width:0;padding:7px 9px;border:1px solid rgba(138,208,169,.18);border-radius:8px;background:rgba(83,168,130,.04)}
#genericDialogCard .bh-presence-file-actor{font-size:11px;font-weight:700;line-height:1.4;max-width:100%;overflow-wrap:anywhere;color:var(--bh-cine-ink)}
#genericDialogCard .bh-presence-file-path{font:11px/1.5 ui-monospace,SFMono-Regular,Consolas,monospace;direction:ltr;unicode-bidi:isolate;text-align:left;color:var(--bh-cine-ink);min-width:0;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media(max-width:600px){#genericDialogCard .bh-presence-file-row{padding:7px 8px}}

html[data-theme="light"] #genericDialogCard .bh-presence-live{
  background:linear-gradient(110deg,#f2fff9,#fbf3ff);
  border-color:rgba(54,146,103,.28);
}
html[data-theme="light"] #genericDialogCard .bh-presence-chip{
  background:#fff;color:#294c39;border-color:rgba(54,146,103,.3);
}
@media(max-width:600px){
  #genericDialogCard .bh-presence-live{padding:10px;margin-block:8px}
  #genericDialogCard .bh-presence-chip{max-width:100%}
}
@media(prefers-reduced-motion:reduce){
  [data-collaborator-id].bh-online::before{box-shadow:none!important}
  #genericDialogCard .bh-presence-chip,
  #genericDialogCard .bh-presence-initial{animation:none!important;transition:none!important}
}


/* A genuine, remote, successfully persisted source edit flashes the matching
   file in Code. Never on keystrokes, presence heartbeats or failed saves. */
.code-workspace .code-tree-row.bh-remote-file-saved > .code-tree-item{
  position:relative;
  border-color:rgba(123,216,170,.75)!important;
  animation:bh-verified-file-save 1.35s ease-out both;
}
@keyframes bh-verified-file-save{
  0%{box-shadow:inset 0 0 0 1px rgba(123,216,170,.9),0 0 19px rgba(103,224,157,.4);background:rgba(90,196,141,.22)}
  55%{box-shadow:inset 0 0 0 1px rgba(123,216,170,.55),0 0 9px rgba(103,224,157,.2)}
  100%{box-shadow:none;background:transparent}
}
html[data-theme="light"] .code-workspace .code-tree-row.bh-remote-file-saved > .code-tree-item{
  color:#16543d;
}
@media(prefers-reduced-motion:reduce){
  .code-workspace .code-tree-row.bh-remote-file-saved > .code-tree-item{
    animation:none!important;border-inline-start:3px solid #368c60!important;
  }
}


/* Real remote saved-file receipt appears briefly beside confirmed teammates. */
#genericDialogCard .bh-presence-saved-notice{
  display:flex;align-items:center;max-width:100%;margin-block-start:9px;
  padding:9px 11px;border:1px solid rgba(115,212,168,.42);
  border-radius:9px;background:rgba(107,204,160,.09);color:var(--bh-cine-ink);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;direction:auto;
  font-size:12px;font-weight:700;
  animation:bh-verified-save-notice 1.55s ease-out both;
}
#genericDialogCard .bh-presence-saved-notice[hidden]{display:none!important}
@keyframes bh-verified-save-notice{
  from{opacity:0;transform:translateY(5px);box-shadow:0 0 20px rgba(103,224,157,.34)}
  35%{opacity:1;transform:none}
  to{opacity:1;box-shadow:none}
}
@media(prefers-reduced-motion:reduce){
  #genericDialogCard .bh-presence-saved-notice{animation:none!important}
}