/* 바로 앱 visual editor. Console chrome uses console.css tokens only (light/dark follow
   prefers-color-scheme there); the canvas uses --app-* vars from the runtime theme. */
.be-root { --be-gap: var(--space-4); --be-stage-bg: var(--color-bg-secondary); display: grid; gap: var(--be-gap); min-width: 0; }
.be-root *, .be-root *::before, .be-root *::after { box-sizing: border-box; }
.be-root h2 { font-size: var(--font-size-sm); font-weight: var(--font-weight-semibold); letter-spacing: 0.02em; color: var(--color-text-secondary); margin: 0 0 var(--space-2); }
.be-root h3 { font-size: var(--font-size-lg); margin: 0; }
.be-row { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.be-row-between { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); flex-wrap: wrap; }
.be-stack { display: grid; gap: var(--space-5); }
.be-hint, .be-note { font-size: var(--font-size-sm); color: var(--color-text-secondary); line-height: var(--line-height-normal); margin: 0; }
.be-note { padding: var(--space-3) var(--space-4); border-radius: var(--radius-base); background: var(--color-surface-secondary); border: 1px dashed var(--color-border-default); }
.be-empty { display: grid; justify-items: center; gap: var(--space-3); color: var(--color-text-secondary); font-size: var(--font-size-sm); padding: var(--space-6) var(--space-2); text-align: center; }
.be-empty p { margin: 0; }
.be-empty-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); width: 100%; }
.be-empty-list .be-btn { width: 100%; justify-content: flex-start; }
.be-notice { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); padding: var(--space-2) var(--space-3) var(--space-2) var(--space-4); border-radius: var(--radius-base); background: var(--color-surface-secondary); border: 1px solid var(--color-border-light); color: var(--color-text-primary); font-size: var(--font-size-sm); }
.be-closed { padding: var(--space-6); border: 1px solid var(--color-border-default); border-radius: var(--radius-lg); color: var(--color-text-secondary); }

/* Buttons */
.be-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); min-height: 40px; padding: 0 var(--space-3); border-radius: var(--radius-base); border: 1px solid var(--color-border-default); background: var(--color-surface-primary); color: var(--color-text-primary); font: inherit; font-size: var(--font-size-sm); cursor: pointer; transition: background var(--duration-fast) var(--easing-out), border-color var(--duration-fast) var(--easing-out), transform var(--duration-fast) var(--easing-out); }
.be-btn:hover:not(:disabled) { border-color: var(--color-text-secondary); }
.be-btn:active:not(:disabled) { transform: translateY(1px); }
.be-btn:disabled { opacity: 0.45; cursor: not-allowed; }
.be-btn.is-icon { width: 40px; padding: 0; }
.be-btn.is-on { background: var(--color-brand-soft); border-color: var(--color-brand); color: var(--color-brand-strong); }
/* Same tokens as console .btn-primary, which are tuned for both schemes. */
.be-btn.is-primary { background: var(--color-interactive-primary); border-color: var(--color-interactive-primary); color: var(--color-text-inverse); font-weight: var(--font-weight-semibold); }
.be-btn.is-primary:hover:not(:disabled) { background: var(--color-interactive-primary-hover); }
.be-btn.is-ghost { border-color: transparent; background: transparent; color: var(--color-text-secondary); min-height: 32px; }
.be-btn.is-danger:hover:not(:disabled) { color: var(--color-status-error); border-color: var(--color-status-error); }
.be-root :focus-visible { outline: 2px solid var(--color-brand); outline-offset: 2px; }

/* Toolbar */
.be-toolbar { position: sticky; top: 0; z-index: 5; display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3) var(--space-5); padding: var(--space-3); border: 1px solid var(--color-border-light); border-radius: var(--radius-lg); background: color-mix(in srgb, var(--color-surface-primary) 88%, transparent); backdrop-filter: blur(8px); box-shadow: var(--shadow-sm); }
.be-toolbar-end { margin-left: auto; }
.be-templates { position: relative; }
.be-template-list { position: absolute; top: calc(100% + var(--space-2)); left: 0; z-index: 6; display: grid; gap: var(--space-2); width: min(320px, calc(100vw - 2 * var(--space-4))); padding: var(--space-3); border: 1px solid var(--color-border-light); border-radius: var(--radius-lg); background: var(--color-surface-primary); box-shadow: var(--shadow-md); }
.be-template { display: grid; gap: var(--space-1); justify-items: start; text-align: left; white-space: normal; }
.be-template span { font-size: var(--font-size-sm); color: var(--color-text-secondary); }
@media (max-width: 759px) {
  /* Phones: the toolbar wraps to several rows, so it scrolls away instead of covering blocks. */
  .be-toolbar { position: static; }
  .be-toolbar-end { margin-left: 0; width: 100%; }
  .be-toolbar-end .be-btn.is-primary { flex: 1 1 100%; }
}
.be-status { min-height: 32px; padding: 0 var(--space-3); border-radius: var(--radius-full); border: 1px solid transparent; font: inherit; font-size: var(--font-size-xs); font-weight: var(--font-weight-semibold); cursor: pointer; }
.be-status.is-ok { background: color-mix(in srgb, var(--color-status-success) 14%, transparent); color: var(--color-text-primary); }
.be-status.is-bad { background: var(--color-status-error-soft); color: var(--color-status-error); border-color: var(--color-status-error-line); }
.be-saved { font-size: var(--font-size-xs); color: var(--color-text-secondary); }
.be-saved.is-bad { color: var(--color-status-error-strong, var(--color-status-error)); font-weight: var(--font-weight-semibold, 600); }
.be-notice.is-bad { border-color: var(--color-status-error-line); }

/* Layout: one column on phones, stage + inspector on tablets, three columns on desktop */
.be-layout { display: grid; gap: var(--be-gap); grid-template-columns: minmax(0, 1fr); grid-template-areas: "pal" "center" "right" "layers" "issues" "preview"; align-items: start; }
/* Below desktop the left column dissolves: palette above the canvas, structure + issues below it. */
@media (max-width: 1179px) {
  /* Specificity above the base .be-left rule below, so source order cannot undo it. */
  .be-layout > .be-left { display: contents; }
  .be-layout .be-palette { grid-area: pal; }
  .be-layout .be-layers { grid-area: layers; }
  .be-layout .be-issue-list { grid-area: issues; }
}
.be-left { grid-area: left; display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--be-gap); min-width: 0; }
.be-palette { min-width: 0; }
.be-center { grid-area: center; display: grid; gap: var(--be-gap); min-width: 0; }
.be-right { grid-area: right; min-width: 0; }
.be-preview-area { grid-area: preview; min-width: 0; }
/* Phones: the palette is a compact chip row above the canvas (drag source next to the drop target). */
@media (max-width: 759px) {
  /* Phones: two-column palette (nothing cut off), hints hidden to stay compact. */
  .be-pal-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .be-pal-hint, .be-palette .be-hint { display: none; }
  .be-pal-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
}
  .be-palette .be-hint { display: none; }
}
@media (min-width: 760px) {
  .be-layout { grid-template-columns: minmax(0, 1fr) minmax(280px, 340px); grid-template-areas: "pal pal" "center right" "layers right" "issues right" "preview right"; }
  .be-pal-list { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (min-width: 1180px) {
  .be-layout { grid-template-columns: 240px minmax(0, 1fr) 360px; grid-template-areas: "left center right" "left center preview"; grid-template-rows: auto 1fr; }
  .be-pal-list { grid-template-columns: minmax(0, 1fr); }
  .be-left { position: sticky; top: 72px; max-height: calc(100vh - 88px); overflow: auto; grid-row: 1 / span 2; }
  .be-center { grid-row: 1 / span 2; }
}
.be-panel { padding: var(--space-4); border: 1px solid var(--color-border-light); border-radius: var(--radius-lg); background: var(--color-surface-primary); }

/* Palette */
.be-pal-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); }
.be-pal-item { display: grid; grid-template-columns: 20px minmax(0, 1fr) auto; align-items: center; gap: var(--space-2); padding: var(--space-2) var(--space-2) var(--space-2) var(--space-1); border-radius: var(--radius-base); border: 1px solid var(--color-border-default); background: var(--color-surface-secondary); color: var(--color-text-primary); transition: border-color var(--duration-fast) var(--easing-out), box-shadow var(--duration-fast) var(--easing-out); }
.be-pal-item:not(.is-disabled):hover { border-color: var(--color-brand); box-shadow: var(--shadow-xs); }
.be-pal-item.is-disabled { border-style: dashed; background: transparent; color: var(--color-text-tertiary); }
.be-pal-item.is-disabled .be-pal-name { color: var(--color-text-secondary); }
.be-pal-item.is-dragging { opacity: 0.4; }
.be-pal-grip { display: grid; place-items: center; height: 36px; color: var(--color-text-tertiary); cursor: grab; touch-action: none; border-radius: var(--radius-sm); }
.be-pal-item:not(.is-disabled) .be-pal-grip:hover { color: var(--color-text-primary); background: var(--color-bg-tertiary); }
.be-pal-item.is-disabled .be-pal-grip { cursor: default; opacity: 0.4; }
.be-pal-text { display: grid; gap: 2px; min-width: 0; }
.be-pal-name { font-weight: var(--font-weight-semibold); font-size: var(--font-size-sm); }
.be-pal-hint { font-size: var(--font-size-xs); color: var(--color-text-secondary); line-height: 1.4; }
.be-pal-add { color: var(--color-brand); }

/* Stage + device */
.be-stage { box-shadow: inset 0 0 0 1px var(--color-border-light); display: grid; justify-items: center; padding: var(--space-6) var(--space-3); border-radius: var(--radius-xl); background:
  radial-gradient(circle at 1px 1px, color-mix(in srgb, var(--color-text-tertiary) 22%, transparent) 1px, transparent 0) 0 0 / 16px 16px, var(--be-stage-bg); border: 1px solid var(--color-border-light); min-width: 0; }
.be-device { --app-gap: 14px; background: var(--app-bg); color: var(--app-text); font-family: var(--app-font); border-radius: 28px; padding: 22px 16px 18px; box-shadow: 0 1px 0 var(--app-border), 0 18px 48px -18px rgba(0, 0, 0, 0.35); border: 1px solid var(--app-border); transition: width var(--duration-normal) var(--easing-out); min-height: 520px; }
.be-device.is-tablet { border-radius: 22px; padding: 28px 28px 22px; }
.be-app-head { display: flex; align-items: center; gap: 10px; margin-bottom: 18px; padding-left: 28px; }
.be-app-icon { color: var(--app-accent); flex: 0 0 auto; }
.be-app-title { font-size: 20px; font-weight: 700; margin: 0; letter-spacing: -0.01em; }
.be-app-desc { font-size: 13px; color: var(--app-muted); margin: 2px 0 0; }
.be-blocks { list-style: none; margin: 0; padding: 4px; display: grid; gap: var(--app-gap); border-radius: calc(var(--app-radius) + 6px); outline: 2px dashed transparent; transition: outline-color var(--duration-fast) var(--easing-out); }
.be-blocks.is-over { outline-color: color-mix(in srgb, var(--app-accent) 55%, transparent); }
.be-app-links { display: grid; gap: 8px; margin-top: 16px; padding-left: 28px; }
/* Same look as the runtime .links a: text colour on a bordered surface (accent is not a text colour). */
.be-app-link { display: block; padding: 10px 12px; border: 1px solid var(--app-border); border-radius: calc(var(--app-radius) * 0.7); background: var(--app-surface); color: var(--app-text); font-size: 14px; font-weight: 600; }
.be-app-made { font-size: 11px; color: var(--app-muted); text-align: center; margin: 18px 0 0; }

/* Block card in the canvas */
.be-card { position: relative; display: grid; grid-template-columns: 24px minmax(0, 1fr); align-items: stretch; border-radius: calc(var(--app-radius) + 4px); outline: 2px solid transparent; outline-offset: 3px; transition: outline-color var(--duration-fast) var(--easing-out), box-shadow var(--duration-fast) var(--easing-out); }
.be-card:hover { outline-color: color-mix(in srgb, var(--app-accent) 35%, transparent); }
.be-card.is-selected { outline-color: var(--app-accent); }
.be-card.is-dragging { opacity: 0.35; }
.be-grip { display: grid; place-items: center; border: 0; background: transparent; color: var(--app-muted); cursor: grab; border-radius: 6px; touch-action: none; padding: 0; }
.be-grip:hover { color: var(--app-text); background: color-mix(in srgb, var(--app-text) 6%, transparent); }
.be-card-body { cursor: pointer; border-radius: var(--app-radius); min-width: 0; }
.be-card-body:focus-visible { outline: 2px solid var(--app-accent); outline-offset: 2px; }
.be-face { background: var(--app-surface); border: 1px solid var(--app-border); border-radius: var(--app-radius); padding: 16px; display: grid; gap: 12px; }
/* Same as the runtime: plain only drops the card fill and border, the layout does not move. */
.be-face.is-plain { background: transparent; border-color: transparent; }
.be-face-head { display: flex; gap: 10px; align-items: flex-start; }
.be-face-icon { color: var(--app-accent); flex: 0 0 auto; margin-top: 1px; }
.be-face-titles { min-width: 0; }
.be-face-title { font-size: 16px; font-weight: 700; margin: 0; overflow-wrap: anywhere; }
.be-face-sub { font-size: 13px; color: var(--app-muted); margin: 3px 0 0; line-height: 1.45; overflow-wrap: anywhere; }
.be-face-inputs { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.be-face-input { height: 34px; border-radius: calc(var(--app-radius) * 0.7); border: 1px solid var(--app-border); background: var(--app-bg); grid-column: span 2; }
.be-face-input.is-short { grid-column: span 1; }
.be-face-input.is-tall { height: 64px; }
.be-face-button { display: block; text-align: center; padding: 10px; border-radius: var(--app-radius); background: var(--app-accent); color: var(--app-on-accent); font-size: 14px; font-weight: 600; }
.be-overlay { width: min(358px, 80vw); color: var(--app-text); font-family: var(--app-font); box-shadow: 0 24px 48px -16px rgba(0, 0, 0, 0.45); border-radius: var(--app-radius); transform: rotate(-1.5deg); }

/* Inspector */
.be-tabs { display: flex; gap: 2px; padding: 3px; border-radius: var(--radius-base); background: var(--color-surface-secondary); margin-bottom: var(--space-5); }
.be-tab { flex: 1 1 0; min-height: 36px; border: 0; border-radius: calc(var(--radius-base) - 2px); background: transparent; color: var(--color-text-secondary); font: inherit; font-size: var(--font-size-sm); font-weight: var(--font-weight-medium); cursor: pointer; }
.be-tab.is-on { background: var(--color-surface-primary); color: var(--color-text-primary); box-shadow: var(--shadow-xs); }
.be-field { display: grid; gap: var(--space-2); min-width: 0; }
.be-field-top { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-2); }
.be-field label, .be-label, .be-root legend { font-size: var(--font-size-sm); font-weight: var(--font-weight-medium); color: var(--color-text-primary); }
.be-root input[type="text"], .be-root input[type="url"], .be-root input[type="number"], .be-root textarea, .be-root select { width: 100%; min-height: 40px; padding: var(--space-2) var(--space-3); border-radius: var(--radius-base); border: 1px solid var(--color-border-default); background: var(--color-surface-primary); color: var(--color-text-primary); font: inherit; font-size: var(--font-size-sm); }
.be-root textarea { resize: vertical; line-height: var(--line-height-normal); }
.be-root [aria-invalid="true"] { border-color: var(--color-status-error); box-shadow: 0 0 0 1px var(--color-status-error-line); }
.be-counter { font-size: var(--font-size-xs); color: var(--color-text-secondary); font-variant-numeric: tabular-nums; }
.be-counter.is-over { color: var(--color-status-error); font-weight: var(--font-weight-semibold); }
.be-issues { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.be-issue { font-size: var(--font-size-xs); margin: 0; }
.be-issue.is-error { color: var(--color-status-error); }
.be-issue.is-warning { color: var(--color-status-warning); }
.be-root fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
.be-root legend { padding: 0; margin-bottom: var(--space-2); }
.be-seg-row { display: flex; padding: 3px; gap: 2px; border-radius: var(--radius-base); background: var(--color-surface-secondary); }
.be-seg-item { flex: 1 1 0; position: relative; display: grid; place-items: center; min-height: 34px; border-radius: calc(var(--radius-base) - 2px); font-size: var(--font-size-sm); color: var(--color-text-secondary); cursor: pointer; }
.be-seg-item input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.be-seg-item.is-on { background: var(--color-surface-primary); color: var(--color-text-primary); box-shadow: var(--shadow-xs); font-weight: var(--font-weight-medium); }
.be-seg-item:has(input:focus-visible) { outline: 2px solid var(--color-brand); outline-offset: 1px; }
.be-check { display: flex; gap: var(--space-2); align-items: center; font-size: var(--font-size-sm); }
.be-check small { color: var(--color-text-tertiary); }
.be-links { display: grid; gap: var(--space-3); }
.be-link { display: grid; gap: var(--space-2); padding: var(--space-3); border-radius: var(--radius-base); border: 1px solid var(--color-border-light); }
.be-icons-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(40px, 1fr)); gap: 4px; }
.be-icon-opt { position: relative; display: grid; place-items: center; height: 40px; border-radius: var(--radius-base); border: 1px solid var(--color-border-light); color: var(--color-text-secondary); cursor: pointer; }
.be-icon-opt input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.be-icon-opt:hover { color: var(--color-text-primary); border-color: var(--color-border-default); }
.be-icon-opt.is-on { color: var(--color-brand-strong); border-color: var(--color-brand); background: var(--color-brand-soft); }
.be-icon-opt.is-none { grid-column: span 2; font-size: var(--font-size-xs); }
.be-icon-opt:has(input:focus-visible) { outline: 2px solid var(--color-brand); outline-offset: 1px; }
.be-themes-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-2); }
.be-theme { position: relative; display: grid; gap: 6px; padding: var(--space-2); border-radius: var(--radius-base); border: 1px solid var(--color-border-light); font-size: var(--font-size-xs); cursor: pointer; text-align: center; }
.be-theme input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.be-theme.is-on { border-color: var(--color-brand); box-shadow: inset 0 0 0 1px var(--color-brand); }
.be-theme:has(input:focus-visible) { outline: 2px solid var(--color-brand); outline-offset: 1px; }
.be-theme-sw { display: grid; grid-template-columns: 1fr 1fr 10px; height: 26px; border-radius: 6px; overflow: hidden; border: 1px solid var(--color-border-light); }
.be-accent { display: grid; grid-template-columns: minmax(0, 1fr) 108px; gap: var(--space-3); align-items: start; }
.be-accent .react-colorful { width: 100%; height: 150px; }
.be-accent-side { display: grid; gap: var(--space-2); min-width: 0; }
.be-hex input { min-width: 0; }
.be-hex { display: grid; gap: 4px; font-size: var(--font-size-xs); color: var(--color-text-secondary); }
.be-hex input { font-family: var(--font-family-mono); text-transform: lowercase; }
.be-accent-demo { display: grid; place-items: center; min-height: 40px; border-radius: var(--radius-base); font-size: var(--font-size-sm); font-weight: var(--font-weight-semibold); }
.be-ratios { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.be-ratio { display: flex; justify-content: space-between; gap: var(--space-2); font-size: var(--font-size-xs); padding: 6px var(--space-2); border-radius: var(--radius-sm); }
.be-ratio strong { font-variant-numeric: tabular-nums; font-weight: var(--font-weight-semibold); }
.be-ratio.is-ok { background: color-mix(in srgb, var(--color-status-success) 10%, transparent); }
.be-ratio.is-bad { background: var(--color-status-error-soft); color: var(--color-status-error); }

/* Issues + preview */
.be-issue-list ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.be-issue-link { width: 100%; text-align: left; border: 0; background: transparent; font: inherit; font-size: var(--font-size-xs); padding: 6px var(--space-2); border-radius: var(--radius-sm); cursor: pointer; line-height: 1.4; }
.be-issue-link.is-error { color: var(--color-status-error); background: var(--color-status-error-soft); }
.be-issue-link.is-warning { color: var(--color-text-primary); background: color-mix(in srgb, var(--color-status-warning) 14%, transparent); }
.be-preview summary { cursor: pointer; list-style-position: inside; }
.be-preview summary h2 { display: inline; }
.be-preview-bar { display: flex; justify-content: flex-end; margin: var(--space-3) 0; }
.be-preview-bar select { width: auto; max-width: 100%; }
.be-preview-box { position: relative; }
.be-preview-state { position: absolute; inset: 0; display: grid; place-items: center; margin: 0; padding: var(--space-6); text-align: center; font-size: var(--font-size-sm); color: var(--color-text-secondary); background: var(--color-surface-secondary); border-radius: var(--radius-lg); border: 1px solid var(--color-border-light); }
.be-preview-state.is-error { color: var(--color-status-error); }
.be-preview-frame { display: block; width: 100%; height: min(640px, 70svh); border: 1px solid var(--color-border-light); border-radius: var(--radius-lg); background: var(--color-surface-secondary); }

/* Stage fills the viewport height on wide screens; device zoom via CSS zoom. */
.be-device-wrap { width: 100%; min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr); justify-items: safe center; }
.be-stage { overflow-x: auto; scrollbar-gutter: stable; }
@media (min-width: 1180px) {
  .be-stage { min-height: calc(100vh - 190px); align-content: start; }
}
.be-device { --app-gap: calc(14px * var(--app-density, 1)); min-width: 0; }
.be-face { padding: calc(16px * var(--app-density, 1)); gap: calc(12px * var(--app-density, 1)); }
.be-face.is-plain { padding-inline: calc(16px * var(--app-density, 1)); }
.be-zoom-val { min-width: 58px; font-variant-numeric: tabular-nums; }
.be-dev-btn { flex-direction: column; gap: 0; min-width: 44px; padding: 2px 6px; line-height: 1; }
.be-dev-w { font-size: 10px; color: var(--color-text-secondary); font-variant-numeric: tabular-nums; }
.be-dev-btn.is-on .be-dev-w { color: var(--color-brand-strong); }
@media (max-width: 759px) { .be-zoom { margin-left: auto; } }

/* Card states */
.be-card-main { position: relative; min-width: 0; }
/* Hidden: dashed and receded, but titles keep full text contrast (axe color-contrast). */
.be-card.is-hidden .be-face { border-style: dashed; background: transparent; }
.be-card.is-hidden .be-face-inputs, .be-card.is-hidden .be-face-icon { opacity: 0.45; }
.be-card.is-hidden .be-face-button { background: transparent; color: var(--app-muted); border: 1px dashed var(--app-muted); }
.be-card.is-locked .be-grip { cursor: not-allowed; color: var(--app-accent); opacity: 1; }
.be-card.is-locked .be-grip svg { width: 16px; height: 16px; }
.be-card.is-locked .be-grip:disabled { opacity: 1; }
.be-card.is-selected { outline-offset: 4px; }
.be-card.is-primary { outline-width: 2px; }
.be-card.is-selected:not(.is-primary) { outline-color: color-mix(in srgb, var(--app-accent) 70%, transparent); }
.be-blocks { gap: max(var(--app-gap), 10px); }
.be-badge { display: inline-flex; align-items: center; gap: 4px; margin: 0 0 6px; padding: 3px 9px; border-radius: 999px; font-size: 12px; font-weight: 600; background: var(--app-surface); border: 1px dashed var(--app-muted); color: var(--app-text); }

/* Inline text editing on the canvas */
.be-inline { display: block; }
.be-inline.is-editable { cursor: text; border-radius: 4px; box-shadow: 0 0 0 1px transparent; transition: box-shadow var(--duration-fast) var(--easing-out); display: block; }
.be-inline.is-editable:hover, .be-inline.is-editable:focus-visible { box-shadow: 0 0 0 1px color-mix(in srgb, var(--app-accent) 60%, transparent); outline: none; }
.be-inline.is-default { color: inherit; }
.be-face-sub.be-inline.is-default { color: var(--app-muted); }
.be-inline-input { display: block; width: 100%; box-sizing: border-box; font: inherit; line-height: inherit; color: var(--app-text); background: var(--app-bg); border: 1px solid var(--app-accent); border-radius: 4px; padding: 0 3px; margin: -1px -4px; width: calc(100% + 8px); resize: none; }
input.be-inline-input { height: 1.45em; }
textarea.be-inline-input { font-size: 13px; line-height: 1.45; }

/* Floating block toolbar */
.be-tb { position: absolute; z-index: 3; bottom: calc(100% + 8px); left: 0; right: 0; width: max-content; max-width: 100%; display: flex; align-items: center; gap: 2px; padding: 3px; border-radius: 10px; background: var(--color-surface-elevated, var(--color-surface-primary)); border: 1px solid var(--color-border-default); box-shadow: var(--shadow-md); font-family: var(--font-family-primary); overflow-x: auto; scrollbar-width: thin; }
.be-tb-btn { display: grid; place-items: center; width: 30px; height: 30px; border: 0; border-radius: 7px; background: transparent; color: var(--color-text-primary); cursor: pointer; flex: 0 0 auto; }
.be-tb-btn:hover:not(:disabled) { background: var(--color-bg-tertiary); }
.be-tb-btn.is-on { background: var(--color-brand-soft); color: var(--color-brand-strong); }
.be-tb-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.be-tb-sep { width: 1px; height: 18px; background: var(--color-border-light); margin: 0 3px; flex: 0 0 auto; }
.be-tb-pop-anchor { position: relative; }
.be-tb-pop { position: absolute; z-index: 20; top: 0; left: 0; width: min(320px, calc(100vw - 32px)); max-height: 360px; overflow: auto; padding: var(--space-3); border-radius: var(--radius-lg); background: var(--color-surface-primary); border: 1px solid var(--color-border-default); box-shadow: var(--shadow-lg); color: var(--color-text-primary); }
.be-card.is-primary { margin-top: 44px; }
.be-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Layers */
.be-layer-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.be-layer { display: grid; grid-template-columns: 22px minmax(0, 1fr) 28px 28px; align-items: center; gap: 2px; border-radius: var(--radius-sm); padding: 2px; }
.be-layer.is-selected { background: var(--color-brand-soft); }
.be-layer.is-hidden .be-layer-name { color: var(--color-text-tertiary); text-decoration: line-through; text-decoration-thickness: 1px; }
.be-layer.is-dragging { opacity: 0.4; }
.be-layer-grip, .be-layer-tog { display: grid; place-items: center; height: 28px; border: 0; background: transparent; color: var(--color-text-secondary); border-radius: var(--radius-sm); cursor: pointer; }
.be-layer-grip { cursor: grab; touch-action: none; }
.be-layer-grip:disabled { cursor: not-allowed; opacity: 0.35; }
.be-layer-tog:hover, .be-layer-grip:hover:not(:disabled) { background: var(--color-bg-tertiary); color: var(--color-text-primary); }
.be-layer-tog.is-on { color: var(--color-brand-strong); }
.be-layer-tog:disabled { opacity: 0.35; cursor: not-allowed; }
.be-layer-name { overflow: hidden; display: flex; align-items: center; gap: 6px; min-width: 0; height: 28px; border: 0; background: transparent; color: var(--color-text-primary); font: inherit; font-size: var(--font-size-sm); text-align: left; cursor: pointer; border-radius: var(--radius-sm); padding: 0 4px; }
.be-layer-name span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.be-layer-num { font-size: 11px; color: var(--color-text-tertiary); font-variant-numeric: tabular-nums; width: 12px; }

/* Batch */
.be-batch { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-2); }
.be-batch .be-btn { justify-content: flex-start; }
.be-plain-fieldset:disabled { opacity: 0.6; }

/* Theme: presets + sliders */
.be-presets-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-2); }
.be-preset { position: relative; display: grid; gap: 4px; cursor: pointer; font-size: var(--font-size-xs); text-align: center; }
.be-preset input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.be-preset-card { display: grid; grid-template-columns: 1fr 22px; gap: 6px; padding: 8px; border: 1px solid var(--color-border-light); transition: box-shadow var(--duration-fast) var(--easing-out), transform var(--duration-fast) var(--easing-out); }
.be-preset:hover .be-preset-card { transform: translateY(-1px); box-shadow: var(--shadow-sm); }
.be-preset.is-on .be-preset-card { box-shadow: 0 0 0 2px var(--color-brand); }
.be-preset:has(input:focus-visible) .be-preset-card { outline: 2px solid var(--color-brand); outline-offset: 2px; }
.be-preset-chip { display: grid; gap: 5px; padding: 6px; border: 1px solid; font-size: 14px; font-weight: 700; text-align: left; }
.be-preset-btn { display: block; height: 8px; }
.be-preset-dark { border-radius: 4px; padding: 4px; display: grid; }
.be-preset-dark span { border-radius: 3px; }
.be-preset-name { color: var(--color-text-primary); }
.be-range { width: 100%; accent-color: var(--color-brand); height: 22px; background: transparent; }
.be-range::-webkit-slider-runnable-track { height: 4px; border-radius: 2px; background: var(--color-border-default); }
.be-range::-moz-range-track { height: 4px; border-radius: 2px; background: var(--color-border-default); }
.be-range::-moz-range-progress { height: 4px; border-radius: 2px; background: var(--color-brand); }
.be-range::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 16px; height: 16px; margin-top: -6px; border-radius: 50%; background: var(--color-brand); border: 2px solid var(--color-surface-primary); box-shadow: var(--shadow-sm); }
.be-range { -webkit-appearance: none; appearance: none; }
.be-range-ticks { display: flex; justify-content: space-between; font-size: 11px; color: var(--color-text-tertiary); }
.be-icon-search { display: flex; align-items: center; gap: 6px; padding: 0 var(--space-2); margin-bottom: var(--space-2); border: 1px solid var(--color-border-default); border-radius: var(--radius-base); color: var(--color-text-tertiary); }
.be-icon-search input { color: var(--color-text-primary); border: 0 !important; min-height: 34px !important; padding: 0 !important; background: transparent !important; }
.be-icon-count { margin: 6px 0 0; font-size: 11px; color: var(--color-text-tertiary); }
.be-icons.is-compact .be-icons-grid { grid-template-columns: repeat(auto-fill, minmax(34px, 1fr)); }
.be-icons.is-compact .be-icon-opt { height: 34px; }

/* Phone bottom sheet for the inspector while a block is selected. */
.be-right.is-sheet { position: fixed; z-index: 40; left: 0; right: 0; bottom: 0; max-height: 58svh; overflow: auto; overscroll-behavior: contain; border-radius: 18px 18px 0 0; background: var(--color-surface-primary); box-shadow: 0 -12px 32px -12px rgba(0, 0, 0, 0.35); padding: 0 var(--space-3) var(--space-4); animation: be-sheet-in var(--duration-normal) var(--easing-out); }
.be-right.is-sheet .be-inspector { border: 0; padding: 0; }
.be-sheet-bar { position: sticky; top: 0; z-index: 1; display: flex; align-items: center; justify-content: flex-end; padding: var(--space-2) 0; background: var(--color-surface-primary); }
.be-sheet-handle { position: absolute; left: 50%; top: 8px; width: 40px; height: 4px; margin-left: -20px; border-radius: 2px; background: var(--color-border-default); }
.be-root.has-sheet { padding-bottom: 60svh; }
@keyframes be-sheet-in { from { transform: translateY(24px); opacity: 0; } to { transform: none; opacity: 1; } }
.be-card-body { scroll-margin-top: 72px; }

@media (prefers-color-scheme: dark) {
  .be-root { --be-stage-bg: color-mix(in srgb, var(--color-bg-primary) 70%, black); }
  .be-stage { background:
    radial-gradient(circle at 1px 1px, color-mix(in srgb, var(--color-text-tertiary) 38%, transparent) 1px, transparent 0) 0 0 / 16px 16px, var(--be-stage-bg); }
  .be-device { box-shadow: 0 0 0 1px color-mix(in srgb, var(--app-border) 70%, white 10%), 0 18px 48px -18px rgba(0, 0, 0, 0.7); }
}

@media (prefers-reduced-motion: reduce) {
  .be-root *, .be-overlay { transition: none !important; }
  .be-overlay { transform: none; }
}

/* Deploy kit dialog (portaled to <body>, outside .be-root: repeats its box-sizing + focus ring) */
.be-modal { position: fixed; inset: 0; z-index: 1000; display: grid; place-items: center; padding: var(--space-4); background: color-mix(in srgb, var(--color-bg-primary) 30%, rgba(0, 0, 0, 0.55)); overflow-y: auto; }
.be-modal *, .be-modal *::before, .be-modal *::after { box-sizing: border-box; }
.be-modal :focus-visible { outline: 2px solid var(--color-brand); outline-offset: 2px; }
.be-modal-box { width: 100%; max-width: 560px; display: grid; gap: var(--space-3); padding: var(--space-5); border-radius: var(--radius-xl); border: 1px solid var(--color-border-light); background: var(--color-surface-elevated, var(--color-surface-primary)); color: var(--color-text-primary); box-shadow: var(--shadow-lg); font-size: var(--font-size-sm); line-height: var(--line-height-normal); max-height: calc(100vh - 2 * var(--space-4)); max-height: calc(100dvh - 2 * var(--space-4)); overflow-y: auto; overscroll-behavior: contain; }
.be-modal-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
.be-modal-head h2 { margin: 0; font-size: var(--font-size-lg); font-weight: var(--font-weight-semibold); color: var(--color-text-primary); }
.be-modal-text, .be-modal-status, .be-modal-links { margin: 0; }
.be-modal code { font-family: var(--font-family-mono); font-size: 0.92em; padding: 1px 5px; border-radius: var(--radius-sm); background: var(--color-bg-tertiary); color: var(--color-text-primary); overflow-wrap: anywhere; }
.be-modal-files { margin: 0; padding-left: var(--space-5); display: grid; gap: var(--space-1); color: var(--color-text-secondary); }
.be-modal-files code { margin-right: var(--space-1); }
.be-modal-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.be-modal-actions .be-btn { flex: 1 1 180px; }
.be-modal-status { min-height: 1.5em; color: var(--color-text-secondary); }
.be-modal-label { font-weight: var(--font-weight-semibold); color: var(--color-text-secondary); }
.be-modal-prompt { width: 100%; resize: vertical; padding: var(--space-2) var(--space-3); border-radius: var(--radius-base); border: 1px solid var(--color-border-default); background: var(--color-surface-secondary); color: var(--color-text-primary); font-family: var(--font-family-mono); font-size: var(--font-size-xs); line-height: 1.6; }
.be-modal-links { display: flex; flex-wrap: wrap; gap: var(--space-4); }
.be-modal-links a { color: var(--color-link); font-weight: var(--font-weight-semibold); }
@media (max-width: 759px) {
  .be-modal { place-items: end stretch; padding: 0; }
  .be-modal-box { max-width: none; max-height: 92vh; max-height: 92dvh; border-radius: var(--radius-xl) var(--radius-xl) 0 0; padding: var(--space-4) var(--space-4) calc(var(--space-4) + env(safe-area-inset-bottom)); }
}