/* ==========================================================================
   BHALLERI · Componentes da plataforma (prefixo .bh-)
   Todos compostos a partir de tokens.css + components.css
   ========================================================================== */

.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.bh-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; min-width: 0; }
.bh-between { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.bh-stack { display: grid; gap: 12px; }
.bh-eyebrow { font-size: var(--fs-label); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--text-muted); font-weight: 500; }
.bh-title { font-family: var(--font-display); font-weight: 400; color: var(--text-strong); margin: 0; line-height: 1.2; }
.bh-meta { font-size: var(--fs-caption); color: var(--text-muted); display: inline-flex; gap: 6px; align-items: center; min-width: 0; }
.bh-meta .b-icon { width: 14px; height: 14px; flex: none; }
.bh-clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.bh-ellipsis { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }

/* ==========================================================================
   1 · CONTE SUA HISTÓRIA (composer)
   ========================================================================== */
.bh-composer { border-radius: var(--r-xl); padding: 22px 22px 16px; display: grid; gap: 14px; position: relative; }
.bh-composer__head { display: flex; align-items: center; gap: 10px; }
.bh-composer__head .b-logo-mono { width: 20px; height: 20px; }
.bh-composer__area textarea {
  all: unset; display: block; width: 100%; min-height: 108px; box-sizing: border-box; white-space: pre-wrap; overflow-wrap: anywhere;
  font: 400 1.3125rem/1.5 var(--font-display); color: var(--text-strong); resize: none;
}
.bh-composer__area textarea::placeholder { color: var(--text-subtle); font-style: italic; }
.bh-composer__attachments { display: flex; gap: 8px; flex-wrap: wrap; }
.bh-attach { display: inline-flex; align-items: center; gap: 8px; padding: 4px 6px 4px 4px; border-radius: var(--r-sm); background: var(--glass-strong); border: var(--hair) solid var(--line-strong); font-size: var(--fs-caption); max-width: 210px; }
.bh-attach__thumb { width: 32px; height: 32px; border-radius: 7px; flex: none; }
.bh-attach__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bh-attach button { all: unset; cursor: pointer; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; color: var(--text-muted); flex: none; }
.bh-attach button:hover { background: var(--action-soft); color: var(--text); }
.bh-attach button:focus-visible { box-shadow: var(--focus-ring); }
.bh-composer__bar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding-top: 12px; border-top: var(--hair) solid var(--line-strong); }
.bh-composer__bar .bh-spacer { flex: 1; }
.bh-composer__status { font-size: var(--fs-caption); color: var(--text-muted); display: none; align-items: center; gap: 8px; }
.bh-composer__gen { display: none; align-items: center; gap: 12px; padding: 12px 14px; border-radius: var(--r-md); background: var(--action-soft); font-size: var(--fs-small); color: var(--text); }
.bh-composer__gen .bh-shimmer { background: linear-gradient(90deg, var(--text-muted) 0%, var(--text-strong) 50%, var(--text-muted) 100%); background-size: 200% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: bh-shine 2.2s linear infinite; }
@keyframes bh-shine { to { background-position: -200% 0; } }
.bh-composer [data-when] { display: none; }
.bh-composer[data-state="idle"] [data-when~="idle"],
.bh-composer[data-state="generating"] [data-when~="generating"],
.bh-composer[data-state="paused"] [data-when~="paused"] { display: inline-flex; }
.bh-composer[data-state="generating"] .bh-composer__gen, .bh-composer[data-state="paused"] .bh-composer__gen { display: flex; }
.bh-composer[data-state="paused"] .bh-shimmer { animation: none; color: var(--text-muted); background: none; }
.bh-composer[data-state="generating"]::after { content: ""; position: absolute; left: 28px; right: 28px; top: -.5px; height: 1.5px; background: linear-gradient(90deg, transparent, var(--action), transparent) no-repeat; background-size: 40% 100%; animation: bh-sweep 1.6s var(--ease-soft) infinite; }
@keyframes bh-sweep { from { background-position: -80% 0; } to { background-position: 180% 0; } }
.bh-composer.is-error { box-shadow: var(--shadow-glass), 0 0 0 1px var(--danger); }

/* ==========================================================================
   2 · SELETOR DE ESTILO
   ========================================================================== */
.bh-styles { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 12px; }
.bh-style {
  position: relative; display: grid; gap: 10px; align-content: start; padding: 20px 18px 16px; cursor: pointer;
  border-radius: var(--r-lg); background: var(--surface-raised); border: var(--stroke) solid var(--line);
  transition: border-color var(--dur-pop) ease, box-shadow var(--dur-2) ease, background-color var(--dur-pop) ease, transform var(--dur-press) var(--ease-out);
}
.bh-style__icon { width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; color: var(--text-accent); border: var(--hair) solid var(--line-accent); }
.bh-style__icon .b-icon { width: 24px; height: 24px; stroke-width: 1.1; }
.bh-style__name { font-family: var(--font-display); font-size: 1.1875rem; color: var(--text-strong); line-height: 1.2; }
.bh-style__desc { font-size: var(--fs-caption); color: var(--text-muted); line-height: 1.5; }
.bh-style__meters { display: grid; gap: 6px; padding-top: 10px; border-top: var(--hair) solid var(--line); }
.bh-meter { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 11px; color: var(--text-muted); letter-spacing: .04em; }
.bh-meter span { display: inline-flex; gap: 3px; }
.bh-meter i { width: 14px; height: 3px; border-radius: 2px; background: var(--line-strong); }
.bh-meter[data-v="1"] i:nth-child(-n+1), .bh-meter[data-v="2"] i:nth-child(-n+2), .bh-meter[data-v="3"] i:nth-child(-n+3), .bh-meter[data-v="4"] i:nth-child(-n+4) { background: var(--action); }
.bh-style__check { position: absolute; top: 16px; right: 16px; width: 22px; height: 22px; border-radius: 50%; border: var(--stroke) solid var(--line-strong); display: grid; place-items: center; transition: background-color var(--dur-pop) ease, border-color var(--dur-pop) ease; }
.bh-style__check::after { content: ""; width: 8px; height: 4px; border-left: 1.5px solid var(--on-action); border-bottom: 1.5px solid var(--on-action); transform: rotate(-45deg) translate(1px,-1px); clip-path: inset(0 100% 0 0); transition: clip-path var(--dur-exit) var(--ease-out); }
.bh-style.is-hover { border-color: var(--line-accent); transform: translateY(-2px); box-shadow: var(--shadow-2); }
@media (hover: hover) and (pointer: fine) { .bh-style:hover { border-color: var(--line-accent); transform: translateY(-2px); box-shadow: var(--shadow-2); } }
.bh-style:active { transform: scale(.98); }
.bh-style:has(input:focus-visible), .bh-style.is-focus { box-shadow: var(--focus-ring); }
.bh-style:has(input:checked), .bh-style.is-selected { border-color: var(--action); background: linear-gradient(180deg, var(--action-soft), transparent 70%), var(--surface-raised); box-shadow: inset 0 0 0 .5px var(--action); }
.bh-style:has(input:checked) .bh-style__check, .bh-style.is-selected .bh-style__check { background: var(--action); border-color: var(--action); }
.bh-style:has(input:checked) .bh-style__check::after, .bh-style.is-selected .bh-style__check::after { clip-path: inset(0 0 0 0); transition: clip-path var(--dur-pop) var(--ease-out) 60ms; }
.bh-style:has(input:checked) .bh-style__icon, .bh-style.is-selected .bh-style__icon { background: var(--action); color: var(--on-action); border-color: var(--action); }
.bh-style:has(input:disabled), .bh-style.is-disabled { opacity: .45; cursor: not-allowed; transform: none; box-shadow: none; }
.bh-style__lock { font-size: 11px; color: var(--text-muted); display: inline-flex; gap: 6px; align-items: center; }

/* ==========================================================================
   3 · TIMELINE DA JORNADA (noivos + IA)
   ========================================================================== */
.bh-journey { list-style: none; margin: 0; padding: 0; display: grid; gap: 22px; position: relative; }
.bh-journey::before { content: ""; position: absolute; left: 19px; top: 20px; bottom: 20px; border-left: var(--hair) dashed var(--line-strong); }
.bh-journey__item { display: grid; grid-template-columns: 40px 1fr; gap: 16px; position: relative; }
.bh-journey__node { position: relative; z-index: 1; }
.bh-journey__meta { font-size: var(--fs-caption); color: var(--text-muted); margin-bottom: 6px; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.bh-journey__meta b { color: var(--text); font-weight: 600; }
.bh-journey__bubble { font-size: var(--fs-body); color: var(--text); padding: 14px 16px; border-radius: 4px var(--r-lg) var(--r-lg) var(--r-lg); background: var(--bg-sunken); max-width: 60ch; overflow-wrap: anywhere; }
.bh-journey__item--ai .bh-journey__bubble { background: var(--glass-strong); border: var(--hair) solid var(--glass-border); box-shadow: var(--shadow-glass); }
.bh-journey__bubble h4 { margin: 0 0 6px; font: 400 1.125rem/1.3 var(--font-display); color: var(--text-strong); }
.bh-journey__bubble p { margin: 0; }
.bh-journey__swatches { display: flex; gap: 6px; margin-top: 12px; }
.bh-journey__swatches i { width: 28px; height: 28px; border-radius: 50%; box-shadow: inset 0 0 0 .5px rgba(0,0,0,.15); }
.bh-journey__actions { display: flex; gap: 4px; margin-top: 10px; flex-wrap: wrap; align-items: center; }
.bh-journey__actions .b-btn { --btn-h: 32px; --btn-px: 12px; font-size: var(--fs-caption); gap: 6px; }
.bh-journey__actions .b-btn .b-icon { width: 15px; height: 15px; }
.bh-journey__actions .b-btn[aria-pressed="true"] { color: var(--text-accent); background: var(--action-soft); }
.bh-journey__actions .b-btn[aria-pressed="true"] .b-icon { fill: currentColor; }
.bh-journey__item.is-decided .bh-journey__bubble { box-shadow: var(--shadow-glass), inset 0 0 0 1px var(--success); }
.bh-journey__decided { display: none; }
.bh-journey__item.is-decided .bh-journey__decided { display: inline-flex; }
.bh-journey__item.is-decided [data-decide] { display: none; }
.bh-typing { display: inline-flex; gap: 4px; padding: 14px 16px; border-radius: 4px var(--r-lg) var(--r-lg) var(--r-lg); background: var(--glass-strong); border: var(--hair) solid var(--glass-border); }
.bh-typing i { width: 5px; height: 5px; border-radius: 50%; background: var(--text-muted); animation: bh-dot 1.2s infinite; }
.bh-typing i:nth-child(2) { animation-delay: .15s; } .bh-typing i:nth-child(3) { animation-delay: .3s; }
@keyframes bh-dot { 0%, 60%, 100% { opacity: .25; transform: none; } 30% { opacity: 1; transform: translateY(-2px); } }

/* ==========================================================================
   4 · PLANEJAMENTO EM ANDAMENTO
   ========================================================================== */
.bh-plan { border-radius: var(--r-xl); padding: 24px; display: grid; gap: 20px; }
.bh-plan__top { display: flex; gap: 18px; align-items: center; }
.bh-ring { --p: 62; position: relative; width: 76px; height: 76px; flex: none; }
.bh-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.bh-ring circle { fill: none; stroke-width: 1.5; }
.bh-ring .bh-ring__track { stroke: var(--line-strong); }
.bh-ring .bh-ring__fill { stroke: var(--action); stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: calc(100 - var(--p)); transition: stroke-dashoffset var(--dur-3) var(--ease); }
.bh-ring__label { position: absolute; inset: 0; display: grid; place-items: center; font: 400 1.25rem/1 var(--font-display); color: var(--text-strong); }
.bh-ring__label small { font-size: .6em; }
.bh-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.bh-steps li { display: grid; grid-template-columns: 22px 1fr auto; gap: 12px; align-items: center; padding: 9px 0; font-size: var(--fs-small); border-bottom: var(--hair) solid var(--line); }
.bh-steps li:last-child { border-bottom: 0; }
.bh-steps__dot { width: 18px; height: 18px; border-radius: 50%; border: var(--stroke) solid var(--line-strong); display: grid; place-items: center; }
.bh-steps li[data-state="done"] .bh-steps__dot { background: var(--action); border-color: var(--action); }
.bh-steps li[data-state="done"] .bh-steps__dot::after { content: ""; width: 7px; height: 3.5px; border-left: 1.25px solid var(--on-action); border-bottom: 1.25px solid var(--on-action); transform: rotate(-45deg) translate(.5px,-.5px); }
.bh-steps li[data-state="done"] { color: var(--text-muted); }
.bh-steps li[data-state="active"] .bh-steps__dot { border-color: var(--action); border-top-color: transparent; animation: b-spin 1s linear infinite; }
.bh-steps li[data-state="active"] { color: var(--text-strong); font-weight: 500; }
.bh-steps li[data-state="todo"] { color: var(--text-subtle); }
.bh-steps li[data-state="error"] .bh-steps__dot { border-color: var(--danger); background: var(--danger-bg); }
.bh-steps li[data-state="error"] .bh-steps__dot::after { content: "!"; font-size: 11px; font-weight: 700; color: var(--danger); }
.bh-steps li[data-state="error"] { color: var(--danger); }
.bh-steps time { font-size: 11px; color: var(--text-muted); font-variant-numeric: tabular-nums; }

/* ==========================================================================
   5 · CARD DE IDENTIDADE VISUAL
   ========================================================================== */
.bh-identity { border-radius: var(--r-xl); overflow: hidden; background: var(--surface-raised); border: var(--hair) solid var(--line-strong); box-shadow: var(--shadow-2); display: grid; }
.bh-identity__cover { position: relative; min-height: 180px; display: grid; place-items: center; text-align: center; color: #F8F0DE; padding: 28px 20px; }
.bh-identity__mono { font-family: var(--font-display); font-size: 2.6rem; letter-spacing: .08em; line-height: 1; }
.bh-identity__mono em { font-family: var(--font-script); font-style: normal; font-size: 1.4em; margin: 0 .1em; letter-spacing: 0; }
.bh-identity__cover small { display: block; margin-top: 10px; font-size: 10.5px; letter-spacing: .3em; text-transform: uppercase; opacity: .85; }
.bh-identity__body { padding: 20px 22px 22px; display: grid; gap: 18px; }
.bh-palette { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
.bh-palette__sw { display: grid; gap: 6px; font-size: 10.5px; color: var(--text-muted); font-variant-numeric: tabular-nums; min-width: 0; }
.bh-palette__sw i { display: block; height: 44px; border-radius: 10px; box-shadow: inset 0 0 0 .5px rgba(0,0,0,.12); }
.bh-palette__sw span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bh-typepair { display: grid; grid-template-columns: auto 1fr; gap: 16px; align-items: center; padding: 14px 0; border-top: var(--hair) solid var(--line); border-bottom: var(--hair) solid var(--line); }
.bh-typepair__aa { font: 400 3rem/1 var(--font-display); color: var(--text-strong); }
.bh-typepair__aa em { font-family: var(--font-script); font-style: normal; font-size: .9em; color: var(--text-accent); }
.bh-typepair dl { margin: 0; display: grid; gap: 4px; font-size: var(--fs-caption); }
.bh-typepair dt { color: var(--text-muted); display: inline; } .bh-typepair dd { display: inline; margin: 0 0 0 4px; color: var(--text); font-weight: 500; }
.bh-identity.is-applied .bh-identity__apply { display: none; }
.bh-identity__applied { display: none; }
.bh-identity.is-applied .bh-identity__applied { display: flex; }

/* ==========================================================================
   6 · CARD DE FORNECEDOR
   ========================================================================== */
.bh-vendor { border-radius: var(--r-lg); overflow: hidden; background: var(--surface-raised); border: var(--hair) solid var(--line-strong); box-shadow: var(--shadow-1); display: grid; transition: box-shadow var(--dur-3) ease, transform var(--dur-3) var(--ease-out); }
.bh-vendor.is-hover { box-shadow: var(--shadow-2); transform: translateY(-2px); }
@media (hover: hover) and (pointer: fine) { .bh-vendor:hover { box-shadow: var(--shadow-2); transform: translateY(-2px); } }
.bh-vendor__media { position: relative; aspect-ratio: 16 / 10; }
.bh-vendor__media .b-badge { position: absolute; left: 12px; top: 12px; z-index: 1; }
.bh-vendor__save { position: absolute; right: 10px; top: 10px; z-index: 1; }
.bh-vendor__save[aria-pressed="true"] .b-icon { fill: var(--rubi-700); stroke: var(--rubi-700); }
.bh-vendor__body { padding: 16px 18px 18px; display: grid; gap: 10px; min-width: 0; }
.bh-vendor__name { font: 400 1.25rem/1.2 var(--font-display); color: var(--text-strong); margin: 0; overflow-wrap: anywhere; }
.bh-rating { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-caption); color: var(--text-muted); }
.bh-rating b { color: var(--text); font-weight: 600; font-variant-numeric: tabular-nums; }
.bh-stars { display: inline-flex; gap: 1px; color: #B58A2E; }
.bh-stars .b-icon { width: 13px; height: 13px; fill: currentColor; stroke-width: 0; }
.bh-stars .b-icon.is-empty { fill: none; stroke-width: 1.25; color: var(--line-strong); }
.bh-vendor__foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-top: 12px; border-top: var(--hair) solid var(--line); flex-wrap: wrap; }
.bh-price { font-size: var(--fs-caption); color: var(--text-muted); }
.bh-price b { font: 400 1.0625rem/1 var(--font-display); color: var(--text-strong); }
.bh-vendor__match { font-size: 11px; color: var(--success); display: inline-flex; gap: 5px; align-items: center; }

/* ==========================================================================
   8 · PRÉVIA VISUAL (convite / site)
   ========================================================================== */
.bh-preview { border-radius: var(--r-xl); background: var(--surface-raised); border: var(--hair) solid var(--line-strong); box-shadow: var(--shadow-2); overflow: hidden; }
.bh-preview__stage { position: relative; min-height: 380px; display: grid; place-items: center; padding: 36px 20px; }
.bh-preview__head { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 16px 18px; border-bottom: var(--hair) solid var(--line); flex-wrap: wrap; }
.bh-preview__foot { display: flex; gap: 8px; padding: 14px 18px; border-top: var(--hair) solid var(--line); flex-wrap: wrap; align-items: center; }
.bh-preview__foot .bh-spacer { flex: 1; }
.bh-preview [data-view] { display: none; }
.bh-preview[data-current="convite"] [data-view="convite"], .bh-preview[data-current="site"] [data-view="site"], .bh-preview[data-current="story"] [data-view="story"] { display: block; }
.bh-preview.is-loading [data-view] { display: none !important; }
.bh-preview__loading { display: none; width: min(260px, 80%); gap: 10px; }
.bh-preview.is-loading .bh-preview__loading { display: grid; }

.bh-invite {
  width: min(250px, 78vw); aspect-ratio: 5 / 7; padding: 28px 22px; text-align: center; position: relative;
  background: #FBF7EC; color: #4A0E14; box-shadow: 0 1px 1px rgba(0,0,0,.04), 0 30px 50px -24px rgba(74,14,20,.5);
  display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 10px; transform: rotate(-2deg);
}
.bh-invite::before { content: ""; position: absolute; inset: 9px; border: var(--hair) solid rgba(119,20,37,.45); pointer-events: none; }
.bh-invite__over { font-size: 8px; letter-spacing: .32em; text-transform: uppercase; color: #817C68; }
.bh-invite__names { font: 400 1.75rem/1.05 var(--font-display); letter-spacing: .04em; }
.bh-invite__names em { display: block; font: 400 1.9rem/1 var(--font-script); color: #B8321F; margin: 2px 0; }
.bh-invite__date { font-size: 9px; letter-spacing: .28em; text-transform: uppercase; }
.bh-invite__place { font: italic 400 .8rem/1.3 var(--font-display); color: #6E6958; }
.bh-invite__mono { width: 22px; height: 22px; color: #771425; }
.bh-invite--back { position: absolute; transform: rotate(5deg) translate(34px, 8px); background: #771425; box-shadow: 0 20px 40px -20px rgba(0,0,0,.5); }
.bh-invite--back::before { border-color: rgba(252,246,218,.3); }

.bh-browser { width: min(460px, 100%); border-radius: 14px; overflow: hidden; background: #FBF7EC; box-shadow: 0 30px 60px -30px rgba(74,14,20,.55), 0 0 0 .5px rgba(0,0,0,.08); }
.bh-browser__bar { display: flex; align-items: center; gap: 6px; padding: 9px 12px; background: rgba(243,240,231,.9); border-bottom: .5px solid rgba(0,0,0,.08); }
.bh-browser__bar i { width: 7px; height: 7px; border-radius: 50%; background: rgba(0,0,0,.14); }
.bh-browser__url { flex: 1; margin-left: 8px; text-align: center; font-size: 10px; color: #6E6958; background: rgba(255,255,255,.7); border-radius: 6px; padding: 3px 8px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bh-site-hero { position: relative; height: 170px; display: grid; place-items: center; text-align: center; color: #FBF7EC; }
.bh-site-hero h5 { margin: 0; font: 400 1.75rem/1 var(--font-display); letter-spacing: .06em; text-transform: uppercase; }
.bh-site-hero h5 em { display: block; font: 1.6rem/1 var(--font-script); text-transform: none; letter-spacing: 0; margin-top: 4px; }
.bh-site-hero p { margin: 8px 0 0; font-size: 8px; letter-spacing: .3em; text-transform: uppercase; }
.bh-site-body { padding: 16px 20px 20px; text-align: center; color: #4A0E14; display: grid; gap: 10px; justify-items: center; }
.bh-site-body .bh-count { display: flex; gap: 14px; font: 400 1.1rem/1 var(--font-display); }
.bh-site-body .bh-count small { display: block; font: 7px/1.6 var(--font-sans); letter-spacing: .2em; text-transform: uppercase; color: #817C68; }
.bh-site-line { height: 5px; border-radius: 3px; background: rgba(74,14,20,.1); }

.bh-story { width: 190px; aspect-ratio: 9 / 16; border-radius: 22px; overflow: hidden; position: relative; color: #FBF7EC; display: grid; place-items: center; text-align: center; box-shadow: 0 30px 60px -30px rgba(74,14,20,.6); }
.bh-story__text { position: relative; z-index: 1; padding: 20px; }
.bh-story__text strong { display: block; font: 400 1.5rem/1.05 var(--font-display); text-transform: uppercase; letter-spacing: .05em; }
.bh-story__text em { font: 1.5rem/1 var(--font-script); display: block; margin: 6px 0; }
.bh-story__text small { font-size: 8px; letter-spacing: .28em; text-transform: uppercase; }

/* ==========================================================================
   9 · ÁREA DE UPLOAD
   ========================================================================== */
.bh-drop {
  display: grid; justify-items: center; gap: 10px; text-align: center; padding: 34px 20px; cursor: pointer;
  border-radius: var(--r-lg); border: var(--stroke) dashed var(--line-strong); background: var(--glass); transition: border-color var(--dur-pop) ease, background-color var(--dur-pop) ease, box-shadow var(--dur-2) ease, transform var(--dur-pop) var(--ease-out);
}
.bh-drop:hover, .bh-drop.is-hover, .bh-drop.is-dragover { border-color: var(--action); background: var(--action-soft); }
.bh-drop:focus-within, .bh-drop.is-focus { box-shadow: var(--focus-ring); }
.bh-drop.is-dragover { border-style: solid; transform: scale(1.005); }
.bh-drop__icon { width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; border: var(--hair) solid var(--line-accent); color: var(--text-accent); }
.bh-drop__title { font: 400 1.125rem/1.3 var(--font-display); color: var(--text-strong); }
.bh-drop__title u { text-decoration: none; border-bottom: 1px solid var(--line-accent); color: var(--text-accent); }
.bh-drop.is-disabled { opacity: .45; pointer-events: none; }
.bh-files { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 8px; }
.bh-file { display: grid; grid-template-columns: 44px 1fr auto; gap: 12px; align-items: center; padding: 10px 12px 10px 10px; border-radius: var(--r-md); background: var(--surface-raised); border: var(--hair) solid var(--line-strong); }
.bh-file__thumb { width: 44px; height: 44px; border-radius: 9px; }
.bh-file__main { min-width: 0; display: grid; gap: 5px; }
.bh-file__name { font-size: var(--fs-small); font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bh-file__meta { font-size: 11px; color: var(--text-muted); display: flex; gap: 8px; font-variant-numeric: tabular-nums; }
.bh-file.is-error { border-color: var(--danger); background: linear-gradient(90deg, var(--danger-bg), transparent 60%), var(--surface-raised); }
.bh-file.is-error .bh-file__meta { color: var(--danger); }
.bh-file.is-done .bh-file__meta { color: var(--success); }
.bh-file__actions { display: flex; gap: 2px; }

/* ==========================================================================
   10 · CARD DE ESPECIALISTA
   ========================================================================== */
.bh-expert { border-radius: var(--r-lg); padding: 20px; display: grid; gap: 16px; background: var(--surface-raised); border: var(--hair) solid var(--line-strong); box-shadow: var(--shadow-1); min-width: 0; }
.bh-expert--glass { background: var(--glass); -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(1.4); backdrop-filter: blur(var(--glass-blur)) saturate(1.4); border-color: var(--glass-border); box-shadow: var(--shadow-glass); }
.bh-expert__top { display: flex; gap: 14px; align-items: center; min-width: 0; }
.bh-expert__name { font: 400 1.1875rem/1.2 var(--font-display); color: var(--text-strong); margin: 0; }
.bh-expert__role { font-size: var(--fs-caption); color: var(--text-muted); }
.bh-expert__tools { display: flex; flex-wrap: wrap; gap: 6px; }
.bh-status { display: inline-flex; align-items: center; gap: 7px; font-size: var(--fs-caption); color: var(--text-muted); }
.bh-status i { width: 7px; height: 7px; border-radius: 50%; background: var(--fendi-500); }
.bh-status--online i { background: #6F8A4A; box-shadow: 0 0 0 3px rgba(111,138,74,.18); }
.bh-status--busy i { background: var(--terracota-500); }
.bh-status--away i { background: #D2B34B; }
.bh-status--live i { background: var(--rubi-700); position: relative; }
.bh-status--live i::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--rubi-700); animation: bh-pulse 1.8s var(--ease-out) infinite; }
@keyframes bh-pulse { from { transform: scale(1); opacity: .45; } to { transform: scale(2.6); opacity: 0; } }

/* ==========================================================================
   11 · SELETOR DE FERRAMENTAS
   ========================================================================== */
.bh-tools { border-radius: var(--r-xl); padding: 8px; display: grid; gap: 2px; }
.bh-tool { display: grid; grid-template-columns: 40px 1fr auto; gap: 14px; align-items: center; padding: 12px; border-radius: var(--r-md); cursor: pointer; transition: background var(--dur-2); }
.bh-tool:hover, .bh-tool.is-hover { background: var(--action-soft); }
.bh-tool__icon { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: var(--surface-raised); border: var(--hair) solid var(--line-strong); color: var(--text-accent); }
.bh-tool__name { font-size: var(--fs-small); font-weight: 600; color: var(--text); }
.bh-tool__desc { font-size: var(--fs-caption); color: var(--text-muted); }
.bh-tool:has(input:checked) .bh-tool__icon { background: var(--action); color: var(--on-action); border-color: var(--action); }
.bh-tool:has(input:disabled) { opacity: .45; cursor: not-allowed; }
.bh-toolbar { display: inline-flex; gap: 4px; padding: 4px; border-radius: var(--r-pill); flex-wrap: wrap; }
.bh-toolbar .b-chip { height: 34px; border-color: transparent; background: transparent; }
.bh-toolbar .b-chip:hover { background: var(--action-soft); }
.bh-toolbar .b-chip[aria-pressed="true"] { background: var(--surface-raised); color: var(--text-strong); border-color: var(--line-strong); box-shadow: 0 2px 8px -4px rgba(74,14,20,.2); }
.bh-toolbar .b-chip[aria-pressed="true"] .b-icon { color: var(--text-accent); }

/* ==========================================================================
   12 · ETAPA DE CHECKLIST
   ========================================================================== */
.bh-checklist { display: grid; gap: 8px; }
.bh-task { border-radius: var(--r-md); background: var(--surface-raised); border: var(--hair) solid var(--line-strong); transition: box-shadow var(--dur-2); }
.bh-task[open] { box-shadow: var(--shadow-2); }
.bh-task summary { list-style: none; display: grid; grid-template-columns: 26px 1fr auto auto; gap: 14px; align-items: center; padding: 14px 16px; cursor: pointer; border-radius: inherit; }
.bh-task summary::-webkit-details-marker { display: none; }
.bh-task summary:hover { background: var(--action-soft); }
.bh-task summary:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.bh-task__state { width: 22px; height: 22px; border-radius: 50%; border: var(--stroke) solid var(--line-strong); display: grid; place-items: center; position: relative; }
.bh-task[data-state="doing"] .bh-task__state { border-color: var(--warning); background: conic-gradient(var(--warning) 0 50%, transparent 50% 100%); box-shadow: inset 0 0 0 3px var(--surface-raised); }
.bh-task[data-state="approved"] .bh-task__state { background: var(--success); border-color: var(--success); }
.bh-task[data-state="approved"] .bh-task__state::after { content: ""; width: 8px; height: 4px; border-left: 1.5px solid #fff; border-bottom: 1.5px solid #fff; transform: rotate(-45deg) translate(1px,-1px); }
[data-theme="noite"] .bh-task[data-state="approved"] .bh-task__state::after { border-color: var(--bordo-950); }
.bh-task[data-state="pending"] .bh-task__state { border-color: var(--danger); border-style: dashed; }
.bh-task[data-state="pending"] .bh-task__state::after { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--danger); }
.bh-task__title { font-size: var(--fs-body); color: var(--text); min-width: 0; }
.bh-task__title small { display: block; font-size: var(--fs-caption); color: var(--text-muted); margin-top: 1px; }
.bh-task[data-state="approved"] .bh-task__title > span { color: var(--text-muted); }
.bh-task__chev { color: var(--text-muted); transition: transform var(--dur-3) var(--ease-in-out); }
.bh-task[open] .bh-task__chev { transform: rotate(180deg); }
.bh-task__body { padding: 4px 16px 18px 56px; display: grid; gap: 14px; }
.bh-task__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 12px; }
.bh-kv { display: grid; gap: 2px; font-size: var(--fs-small); min-width: 0; }
.bh-kv dt, .bh-kv > span:first-child { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted); }
.bh-kv dd { margin: 0; }
.bh-task__note { font-size: var(--fs-small); color: var(--text-muted); padding: 12px 14px; border-radius: var(--r-sm); background: var(--bg-sunken); margin: 0; }

/* ==========================================================================
   13 · CONFIRMAÇÃO DE ESCOLHA
   ========================================================================== */
.bh-confirm { border-radius: var(--r-xl); padding: 26px; display: grid; gap: 18px; }
.bh-confirm__head { display: flex; gap: 14px; align-items: flex-start; }
.bh-confirm__list { margin: 0; display: grid; grid-template-columns: 1fr auto; gap: 0; font-size: var(--fs-small); }
.bh-confirm__list dt, .bh-confirm__list dd { padding: 10px 0; border-bottom: var(--hair) solid var(--line); margin: 0; }
.bh-confirm__list dt { color: var(--text-muted); }
.bh-confirm__list dd { text-align: right; color: var(--text); font-weight: 500; font-variant-numeric: tabular-nums; }
.bh-confirm__list dd.is-total { font: 400 1.375rem/1 var(--font-display); color: var(--text-strong); border-bottom: 0; padding-top: 14px; }
.bh-confirm__list dt.is-total { border-bottom: 0; padding-top: 14px; align-self: end; }
.bh-confirm__actions { display: flex; gap: 10px; flex-wrap: wrap; }
.bh-confirm__actions .b-btn { flex: 1 1 180px; }
.bh-confirm__done { display: none; }
.bh-confirm.is-approved .bh-confirm__done { display: flex; }
.bh-confirm.is-approved .bh-confirm__actions { display: none; }
.bh-confirm.is-alternatives .bh-confirm__actions .b-btn--primary { display: none; }

/* ==========================================================================
   14 · CARD DO CASAMENTO
   ========================================================================== */
.bh-wedding { border-radius: var(--r-xl); overflow: hidden; background: var(--surface-raised); border: var(--hair) solid var(--line-strong); box-shadow: var(--shadow-2); display: grid; grid-template-columns: minmax(0, 1fr); }
.bh-wedding__cover { position: relative; padding: 26px 24px 22px; color: #F8F0DE; display: grid; gap: 6px; min-height: 180px; align-content: end; }
.bh-wedding__cover .b-badge { position: absolute; top: 18px; left: 20px; }
.bh-wedding__count { position: absolute; top: 16px; right: 18px; text-align: right; font: 400 2rem/1 var(--font-display); }
.bh-wedding__count small { display: block; font: 500 9.5px/1.6 var(--font-sans); letter-spacing: .24em; text-transform: uppercase; opacity: .85; }
.bh-wedding__names { font: 400 clamp(1.75rem, 3.2vw, 2.25rem)/1.05 var(--font-display); margin: 0; overflow-wrap: anywhere; }
.bh-wedding__names em { font-family: var(--font-script); font-style: normal; font-size: 1.15em; margin: 0 .08em; }
.bh-wedding__when { font-size: var(--fs-caption); letter-spacing: .08em; opacity: .92; display: flex; gap: 14px; flex-wrap: wrap; }
.bh-wedding__body { padding: 18px 22px 20px; display: grid; gap: 16px; }
.bh-wedding__stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; border: var(--hair) solid var(--line-strong); border-radius: var(--r-md); }
.bh-wedding__stats > div { padding: 12px 14px; display: grid; gap: 2px; min-width: 0; }
.bh-wedding__stats > div + div { border-left: var(--hair) solid var(--line-strong); }
.bh-wedding__stats b { font: 400 1.375rem/1.1 var(--font-display); color: var(--text-strong); }
.bh-wedding__stats span { font-size: 11px; color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bh-activity { display: flex; gap: 10px; align-items: center; font-size: var(--fs-caption); color: var(--text-muted); padding-top: 14px; border-top: var(--hair) solid var(--line); min-width: 0; }
.bh-activity b { color: var(--text); font-weight: 600; }

/* ==========================================================================
   15 · MEDIDOR DE ORÇAMENTO
   ========================================================================== */
.bh-budget { border-radius: var(--r-xl); padding: 24px; display: grid; gap: 20px; }
.bh-budget__nums { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.bh-budget__nums > div { display: grid; gap: 4px; min-width: 0; }
.bh-budget__nums b { font: 400 clamp(1.25rem, 2.4vw, 1.75rem)/1.05 var(--font-display); color: var(--text-strong); font-variant-numeric: lining-nums; overflow-wrap: anywhere; }
.bh-budget__nums .is-ok b { color: var(--success); }
.bh-bar { position: relative; height: 14px; border-radius: 8px; background: var(--bg-sunken); display: flex; overflow: visible; gap: 2px; }
.bh-bar__seg { height: 100%; flex: none; transition: filter var(--dur-2); }
.bh-bar__seg:first-child { border-radius: 8px 0 0 8px; }
.bh-bar__seg:hover { filter: brightness(1.1); }
.bh-bar__limit { position: absolute; top: -6px; bottom: -6px; width: 0; border-left: 1px dashed var(--text-strong); }
.bh-bar__limit span { position: absolute; top: -18px; left: 50%; transform: translateX(-50%); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--text-muted); white-space: nowrap; }
.bh-legend { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 2px 22px; }
.bh-legend__row { display: grid; grid-template-columns: 10px 1fr auto; gap: 10px; align-items: center; padding: 8px 0; border-bottom: var(--hair) solid var(--line); font-size: var(--fs-small); min-width: 0; }
.bh-legend__row i { width: 10px; height: 10px; border-radius: 3px; }
.bh-legend__row span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bh-legend__row b { font-weight: 500; font-variant-numeric: tabular-nums; font-size: var(--fs-caption); }
.bh-legend__row.is-over b { color: var(--danger); }
.bh-legend__row.is-over span::after { content: " · acima"; color: var(--danger); font-size: 11px; }

/* ==========================================================================
   16 · ACESSO RÁPIDO (paleta de comandos)
   ========================================================================== */
.bh-quick { width: min(620px, 100%); border-radius: var(--r-xl); overflow: hidden; }
.bh-quick__search { display: flex; align-items: center; gap: 12px; padding: 18px 20px; border-bottom: var(--hair) solid var(--line-strong); }
.bh-quick__search input { all: unset; flex: 1; min-width: 0; font: 400 1.125rem/1.3 var(--font-display); color: var(--text-strong); }
.bh-quick__search input::placeholder { color: var(--text-subtle); font-style: italic; }
.bh-quick__list { max-height: 340px; overflow: auto; padding: 8px; }
.bh-quick__group { padding: 10px 12px 6px; font-size: 10.5px; letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--text-muted); }
.bh-quick__item { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: var(--r-sm); cursor: pointer; font-size: var(--fs-small); color: var(--text); }
.bh-quick__item .b-icon { width: 18px; height: 18px; color: var(--text-muted); }
.bh-quick__item > span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bh-quick__item small { color: var(--text-muted); }
.bh-quick__item .bh-keys { display: inline-flex; gap: 3px; }
.bh-quick__item[aria-selected="true"], .bh-quick__item:hover { background: var(--action-soft); color: var(--text-strong); }
.bh-quick__item[aria-selected="true"] .b-icon { color: var(--text-accent); }
.bh-quick__foot { display: flex; gap: 16px; padding: 10px 18px; border-top: var(--hair) solid var(--line-strong); font-size: 11px; color: var(--text-muted); flex-wrap: wrap; }
.bh-quick__foot span { display: inline-flex; gap: 6px; align-items: center; }
.bh-quick__empty { padding: 28px; text-align: center; color: var(--text-muted); font-size: var(--fs-small); display: none; }
.bh-quick.is-empty .bh-quick__empty { display: block; }
.bh-quick-dialog .b-modal__panel { background: transparent; border: 0; box-shadow: none; width: min(620px, calc(100vw - 32px)); overflow: visible; }
.bh-quick-dialog { margin-top: 12vh; }

/* ==========================================================================
   17 · ESTADO VAZIO · SKELETON · ORÇAMENTO AJUSTADO
   ========================================================================== */
.bh-empty { display: grid; justify-items: center; text-align: center; gap: 12px; padding: 40px 24px; border-radius: var(--r-xl); border: var(--hair) dashed var(--line-strong); }
.bh-empty__art { width: 96px; height: 96px; position: relative; display: grid; place-items: center; color: var(--text-accent); }
.bh-empty__art::before { content: ""; position: absolute; inset: 0; border-radius: 50%; border: var(--hair) solid var(--line-accent); }
.bh-empty__art::after { content: ""; position: absolute; inset: 12px; border-radius: 50%; border: var(--hair) dashed var(--line-strong); }
.bh-empty h4 { margin: 0; font: 400 1.375rem/1.25 var(--font-display); color: var(--text-strong); }
.bh-empty p { margin: 0; color: var(--text-muted); max-width: 38ch; font-size: var(--fs-small); }
.bh-skel-card { border-radius: var(--r-lg); background: var(--surface-raised); border: var(--hair) solid var(--line-strong); overflow: hidden; display: grid; }
.bh-skel-card .b-skel { border-radius: 6px; }
.bh-adjusted { border-radius: var(--r-xl); padding: 22px; display: grid; gap: 16px; position: relative; overflow: hidden; }
.bh-adjusted__compare { display: grid; grid-template-columns: 1fr auto 1fr; gap: 12px; align-items: center; }
.bh-adjusted__compare > div { padding: 14px 16px; border-radius: var(--r-md); background: var(--surface-raised); border: var(--hair) solid var(--line-strong); min-width: 0; }
.bh-adjusted__compare .is-before b { text-decoration: line-through; text-decoration-thickness: 1px; color: var(--text-muted); }
.bh-adjusted__compare b { display: block; font: 400 1.375rem/1.2 var(--font-display); color: var(--text-strong); }
.bh-adjusted__compare .is-after { border-color: var(--success); background: linear-gradient(180deg, var(--success-bg), transparent), var(--surface-raised); }
.bh-adjusted ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; font-size: var(--fs-small); }
.bh-adjusted li { display: grid; grid-template-columns: 18px 1fr auto; gap: 10px; align-items: baseline; }
.bh-adjusted li .b-icon { width: 16px; height: 16px; color: var(--success); align-self: center; }
.bh-adjusted li b { font-weight: 500; font-variant-numeric: tabular-nums; color: var(--success); }

/* ==========================================================================
   18 · JOIA RECOMENDADA
   ========================================================================== */
.bh-jewel { border-radius: var(--r-xl); overflow: hidden; display: grid; grid-template-columns: minmax(0, 1fr); background: var(--surface-raised); border: var(--hair) solid var(--line-strong); box-shadow: var(--shadow-2); }
.bh-jewel__media { position: relative; aspect-ratio: 4 / 4.2; overflow: hidden; background: #6b3a1a; }
.bh-jewel__media img { transition: transform 700ms var(--ease-out); }
.bh-jewel__media .b-badge { position: absolute; left: 14px; top: 14px; }
.bh-jewel__media .bh-vendor__save { top: 12px; right: 12px; }
.bh-jewel__try { position: absolute; left: 14px; right: 14px; bottom: 14px; }
.bh-jewel__body { padding: 18px 20px 20px; display: grid; gap: 10px; }
.bh-jewel__name { font: 400 1.375rem/1.2 var(--font-display); color: var(--text-strong); margin: 0; }
.bh-jewel__name em { font-family: var(--font-script); font-style: normal; font-size: 1.3em; color: var(--text-accent); }
.bh-jewel__specs { display: flex; gap: 6px; flex-wrap: wrap; }
.bh-jewel__try.is-loading { pointer-events: none; }

/* ==========================================================================
   19 · SELETOR DE JOIAS
   ========================================================================== */
.bh-jpicker { display: grid; grid-template-columns: 260px 1fr; gap: 24px; align-items: start; }
.bh-jpicker__filters { display: grid; gap: 22px; padding: 22px; border-radius: var(--r-xl); }
.bh-jpicker__filters fieldset { border: 0; margin: 0; padding: 0; display: grid; gap: 10px; }
.bh-jpicker__filters legend { padding: 0; margin-bottom: 10px; }
.bh-swatch-opt { display: flex; align-items: center; gap: 10px; font-size: var(--fs-small); cursor: pointer; }
.bh-swatch-opt i { width: 18px; height: 18px; border-radius: 50%; box-shadow: inset 0 0 0 .5px rgba(0,0,0,.2), 0 0 0 2px var(--bg), 0 0 0 2.5px transparent; flex: none; transition: box-shadow var(--dur-2); }
.bh-swatch-opt input:checked + i { box-shadow: inset 0 0 0 .5px rgba(0,0,0,.2), 0 0 0 2px var(--bg), 0 0 0 3px var(--action); }
.bh-swatch-opt input:focus-visible + i { box-shadow: var(--focus-ring); }
.bh-swatch-opt small { margin-left: auto; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.bh-jgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 12px; }
.bh-jitem { border-radius: var(--r-lg); overflow: hidden; background: var(--surface-raised); border: var(--hair) solid var(--line-strong); display: grid; transition: transform var(--dur-3) var(--ease-out), box-shadow var(--dur-3) ease, opacity var(--dur-3) var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .bh-jitem:hover { transform: translateY(-2px); box-shadow: var(--shadow-2); } }
.bh-jitem[hidden] { display: none; }
.bh-jitem__art { aspect-ratio: 1; display: grid; place-items: center; position: relative; }
.bh-jitem__art svg { width: 58%; height: 58%; position: relative; z-index: 1; filter: drop-shadow(0 8px 10px rgba(74,14,20,.25)); }
.bh-jitem__body { padding: 12px 14px 14px; display: grid; gap: 3px; }
.bh-jitem__body strong { font: 400 1rem/1.25 var(--font-display); color: var(--text-strong); }
.bh-jitem__body span { font-size: 11px; color: var(--text-muted); }
.bh-jitem__body b { font-size: var(--fs-small); font-weight: 500; margin-top: 4px; font-variant-numeric: tabular-nums; }
.bh-jpicker__result { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; gap: 12px; flex-wrap: wrap; }

/* ==========================================================================
   20 · DASHBOARD DO FORNECEDOR
   ========================================================================== */
.bh-dash { display: grid; gap: 16px; }
.bh-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.bh-kpi { border-radius: var(--r-lg); padding: 18px; background: var(--surface-raised); border: var(--hair) solid var(--line-strong); display: grid; gap: 8px; min-width: 0; }
.bh-kpi__label { font-size: var(--fs-caption); color: var(--text-muted); display: flex; justify-content: space-between; gap: 6px; align-items: center; }
.bh-kpi__label .b-icon { width: 16px; height: 16px; }
.bh-kpi__value { font: 400 2.25rem/1 var(--font-display); color: var(--text-strong); font-variant-numeric: lining-nums; }
.bh-kpi__delta { font-size: 11px; color: var(--success); display: inline-flex; gap: 4px; align-items: center; }
.bh-kpi__delta.is-down { color: var(--danger); }
.bh-kpi__delta .b-icon { width: 13px; height: 13px; }
.bh-spark { width: 100%; height: 34px; }
.bh-spark path { fill: none; stroke: var(--action); stroke-width: 1.25; vector-effect: non-scaling-stroke; }
.bh-spark .area { fill: var(--action-soft); stroke: none; }
.bh-dash__grid { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 16px; }
.bh-panel { border-radius: var(--r-lg); background: var(--surface-raised); border: var(--hair) solid var(--line-strong); padding: 18px; min-width: 0; }
.bh-panel__head { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 10px; flex-wrap: wrap; }
.bh-table { width: 100%; border-collapse: collapse; font-size: var(--fs-small); }
.bh-table th { text-align: left; font-weight: 500; font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--text-muted); padding: 8px 10px; border-bottom: var(--hair) solid var(--line-strong); }
.bh-table td { padding: 12px 10px; border-bottom: var(--hair) solid var(--line); vertical-align: middle; }
.bh-table tr:last-child td { border-bottom: 0; }
.bh-table tbody tr { transition: background var(--dur-1); cursor: pointer; }
.bh-table tbody tr:hover { background: var(--action-soft); }
.bh-table .bh-who { display: flex; gap: 10px; align-items: center; min-width: 0; }
.bh-table .bh-who strong { font-weight: 500; display: block; }
.bh-table .bh-who small { color: var(--text-muted); font-size: 11px; }
.bh-table .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.bh-cal { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; text-align: center; font-size: var(--fs-caption); }
.bh-cal__dow { font-size: 10px; letter-spacing: .12em; color: var(--text-muted); padding: 6px 0; text-transform: uppercase; }
.bh-cal__day { all: unset; position: relative; aspect-ratio: 1; display: grid; place-items: center; border-radius: 50%; cursor: pointer; font-variant-numeric: tabular-nums; color: var(--text); }
.bh-cal__day:hover { background: var(--action-soft); }
.bh-cal__day:focus-visible { box-shadow: var(--focus-ring); }
.bh-cal__day.is-muted { color: var(--text-subtle); }
.bh-cal__day.is-today { box-shadow: inset 0 0 0 1px var(--action); }
.bh-cal__day.has-event::after { content: ""; position: absolute; bottom: 12%; width: 4px; height: 4px; border-radius: 50%; background: var(--accent); }
.bh-cal__day.has-wedding { background: var(--action); color: var(--on-action); }
.bh-cal__day.has-wedding::after { background: var(--on-action); }
.bh-cal__day[aria-pressed="true"] { box-shadow: 0 0 0 1.5px var(--text-strong); }
.bh-agenda { display: grid; gap: 8px; margin-top: 14px; padding-top: 14px; border-top: var(--hair) solid var(--line); }
.bh-agenda__item { display: grid; grid-template-columns: 48px 1fr; gap: 12px; align-items: center; font-size: var(--fs-small); }
.bh-agenda__item time { font: 400 1.125rem/1 var(--font-display); color: var(--text-strong); text-align: center; }
.bh-agenda__item time small { display: block; font: 10px/1.5 var(--font-sans); letter-spacing: .12em; text-transform: uppercase; color: var(--text-muted); }

/* ==========================================================================
   21 · GERADOR DE SITE
   ========================================================================== */
.bh-sitegen { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 0; border-radius: var(--r-xl); overflow: hidden; border: var(--hair) solid var(--line-strong); background: var(--surface-raised); box-shadow: var(--shadow-2); }
.bh-sitegen__side { padding: 20px; border-right: var(--hair) solid var(--line-strong); display: grid; gap: 16px; align-content: start; background: var(--surface); }
.bh-sections { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.bh-section-row { display: grid; grid-template-columns: 18px 32px 1fr auto; gap: 10px; align-items: center; padding: 8px 10px 8px 6px; border-radius: var(--r-sm); font-size: var(--fs-small); background: var(--surface-raised); border: var(--hair) solid var(--line); cursor: grab; }
.bh-section-row:hover { border-color: var(--line-accent); }
.bh-section-row.is-dragging { opacity: .5; }
.bh-section-row.is-over { box-shadow: 0 -2px 0 var(--action); }
.bh-section-row > .b-icon:first-child { color: var(--text-subtle); width: 16px; height: 16px; }
.bh-section-row__icon { width: 32px; height: 32px; border-radius: 9px; display: grid; place-items: center; background: var(--bg-sunken); color: var(--text-accent); }
.bh-section-row__icon .b-icon { width: 16px; height: 16px; }
.bh-section-row .b-switch input { width: 34px; height: 20px; }
.bh-section-row .b-switch input::after { width: 14px; height: 14px; }
.bh-section-row .b-switch input:checked::after { transform: translateX(14px); }
.bh-section-row:has(input:not(:checked)) > span { color: var(--text-subtle); }
.bh-sitegen__main { display: grid; grid-template-rows: auto 1fr; min-width: 0; }
.bh-sitegen__top { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 14px 18px; border-bottom: var(--hair) solid var(--line-strong); flex-wrap: wrap; }
.bh-sitegen__canvas { position: relative; padding: 28px 20px; display: grid; place-items: start center; min-height: 560px; overflow: hidden; }
.bh-device { width: 100%; max-width: 620px; border-radius: 14px; overflow: hidden; background: #FBF7EC; color: #4A0E14; box-shadow: 0 30px 70px -30px rgba(74,14,20,.55), 0 0 0 .5px rgba(0,0,0,.1); position: relative; z-index: 1; }
.bh-device[data-device="tablet"] { max-width: 420px; border-radius: 22px; }
.bh-device[data-device="mobile"] { max-width: 250px; border-radius: 30px; box-shadow: 0 0 0 6px #1d1d1d, 0 30px 70px -30px rgba(0,0,0,.6); }
.bh-device[data-device="whatsapp"], .bh-device[data-device="story"] { display: none; }
.bh-device__scroll { max-height: 500px; overflow: auto; scrollbar-width: thin; }
.bh-sec { padding: 22px 22px; text-align: center; border-bottom: .5px solid rgba(74,14,20,.1); display: grid; gap: 8px; justify-items: center; }
.bh-sec h6 { margin: 0; font: 400 1.05rem/1.2 var(--font-display); letter-spacing: .12em; text-transform: uppercase; }
.bh-sec h6 em { font: 1.3rem/1 var(--font-script); text-transform: none; letter-spacing: 0; color: #B8321F; }
.bh-sec p { margin: 0; font-size: 10.5px; line-height: 1.6; color: #6E6958; max-width: 42ch; }
.bh-sec--hero { padding: 0; position: relative; height: 200px; place-items: center; color: #FBF7EC; border: 0; align-content: center; }
.bh-sec--hero h6 { font-size: 1.6rem; letter-spacing: .06em; position: relative; }
.bh-sec--hero h6 em { color: #FBF7EC; display: block; font-size: 1.6rem; }
.bh-sec--hero p { color: rgba(251,247,236,.9); font-size: 8px; letter-spacing: .3em; text-transform: uppercase; position: relative; }
.bh-sec__rows { display: grid; gap: 4px; width: min(240px, 100%); font-size: 10px; }
.bh-sec__rows div { display: flex; justify-content: space-between; border-bottom: .5px solid rgba(74,14,20,.12); padding: 4px 0; }
.bh-sec__gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; width: 100%; }
.bh-sec__gallery div { aspect-ratio: 1; }
.bh-sec__btn { font-size: 8.5px; letter-spacing: .24em; text-transform: uppercase; padding: 8px 18px; border: .5px solid #771425; color: #771425; }
.bh-device[data-device="mobile"] .bh-sec--hero { height: 260px; }
.bh-channel { display: none; position: relative; z-index: 1; }
.bh-sitegen[data-device="whatsapp"] .bh-channel--wa, .bh-sitegen[data-device="story"] .bh-channel--story { display: block; }
.bh-sitegen[data-device="whatsapp"] .bh-device, .bh-sitegen[data-device="story"] .bh-device { display: none; }
.bh-wa { width: 280px; border-radius: 26px; background: #E9E1D2; padding: 16px 12px 20px; box-shadow: 0 0 0 6px #1d1d1d, 0 30px 60px -30px rgba(0,0,0,.5); display: grid; gap: 8px; }
.bh-wa__head { display: flex; gap: 8px; align-items: center; font-size: 11px; color: #2D2E21; padding-bottom: 8px; border-bottom: .5px solid rgba(0,0,0,.1); }
.bh-wa__msg { justify-self: end; width: 86%; background: #F7F2E8; border-radius: 12px 4px 12px 12px; overflow: hidden; box-shadow: 0 1px 1px rgba(0,0,0,.08); font-size: 10.5px; color: #2D2E21; }
.bh-wa__msg .bh-wa__img { height: 110px; display: grid; place-items: center; color: #FBF7EC; text-align: center; font: 400 1rem/1.1 var(--font-display); letter-spacing: .08em; text-transform: uppercase; }
.bh-wa__msg p { margin: 0; padding: 8px 10px 2px; }
.bh-wa__msg small { display: block; padding: 0 10px 8px; color: #817C68; font-size: 9px; }
.bh-wa__link { margin: 0 10px 8px; padding: 6px 8px; border-radius: 6px; background: rgba(0,0,0,.04); font-size: 9.5px; color: #4D6275; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ==========================================================================
   22 · LINHA DO TEMPO INTERATIVA (noivado → grande dia)
   ========================================================================== */
.bh-tl { display: grid; gap: 22px; }
.bh-tl__track { position: relative; overflow-x: auto; padding: 8px 4px 4px; scrollbar-width: thin; }
.bh-tl__rail { position: relative; display: flex; gap: 0; min-width: 900px; padding-top: 56px; }
.bh-tl__rail::before { content: ""; position: absolute; left: 20px; right: 20px; top: 74px; border-top: var(--hair) solid var(--line-strong); }
.bh-tl__progress { position: absolute; left: 20px; top: 73.5px; height: 1.5px; background: var(--action); width: var(--tl, 50%); }
.bh-tl__stop { all: unset; position: relative; flex: 1; display: grid; justify-items: center; gap: 10px; text-align: center; cursor: pointer; padding: 0 4px 6px; border-radius: var(--r-sm); min-width: 0; }
.bh-tl__when { position: absolute; top: -48px; font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--text-muted); white-space: nowrap; }
.bh-tl__dot { width: 36px; height: 36px; border-radius: 50%; background: var(--surface-raised); border: var(--stroke) solid var(--line-strong); display: grid; place-items: center; color: var(--text-muted); transition: background-color var(--dur-3) ease, border-color var(--dur-3) ease, color var(--dur-3) ease, box-shadow var(--dur-3) ease, transform var(--dur-press) var(--ease-out); position: relative; z-index: 1; }
.bh-tl__dot .b-icon { width: 16px; height: 16px; }
.bh-tl__name { font-size: var(--fs-caption); color: var(--text-muted); line-height: 1.3; max-width: 11ch; }
.bh-tl__stop.is-done .bh-tl__dot { background: var(--action); color: var(--on-action); border-color: var(--action); }
.bh-tl__stop.is-now .bh-tl__dot { border-color: var(--action); color: var(--text-accent); box-shadow: 0 0 0 5px var(--action-soft-hover); }
.bh-tl__stop.is-now .bh-tl__name { color: var(--text-strong); font-weight: 600; }
.bh-tl__stop.is-final .bh-tl__dot { width: 46px; height: 46px; margin-top: -5px; background: var(--bordo-900); color: var(--linho-300); border-color: var(--bordo-900); }
.bh-tl__stop.is-final .bh-tl__dot svg { width: 22px; height: 22px; }
@media (hover: hover) and (pointer: fine) { .bh-tl__stop:hover .bh-tl__dot { transform: scale(1.08); border-color: var(--action); } }
.bh-tl__stop:active .bh-tl__dot { transform: scale(.94); }
.bh-tl__stop:focus-visible { box-shadow: var(--focus-ring); }
.bh-tl__stop[aria-selected="true"] .bh-tl__name { color: var(--text-strong); }
.bh-tl__stop[aria-selected="true"]::after { content: ""; position: absolute; bottom: -14px; width: 10px; height: 10px; transform: rotate(45deg); background: var(--glass-strong); border-left: var(--hair) solid var(--glass-border); border-top: var(--hair) solid var(--glass-border); z-index: 2; }
.bh-tl__detail { border-radius: var(--r-xl); padding: 22px 24px; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 18px; align-items: start; }
.bh-tl__detail h4 { margin: 4px 0 6px; }
.bh-tl__detail p { margin: 0; color: var(--text-muted); font-size: var(--fs-small); max-width: 60ch; }
.bh-tl__tasks { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 12px; }

/* ==========================================================================
   Responsivo
   ========================================================================== */
@media (max-width: 900px) {
  .bh-jpicker, .bh-sitegen, .bh-dash__grid { grid-template-columns: minmax(0, 1fr); }
  .bh-sitegen__side { border-right: 0; border-bottom: var(--hair) solid var(--line-strong); }
  .bh-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .bh-composer { padding: 18px 16px 14px; border-radius: var(--r-lg); }
  .bh-composer__area textarea { font-size: 1.125rem; }
  .bh-budget__nums { grid-template-columns: 1fr 1fr; }
  .bh-budget__nums > div:first-child { grid-column: 1 / -1; }
  .bh-adjusted__compare { grid-template-columns: 1fr; }
  .bh-adjusted__compare > .b-icon { transform: rotate(90deg); justify-self: center; }
  .bh-palette { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 4px; }
  .bh-palette__sw span { font-size: 9px; }
  .bh-task__body { padding-left: 16px; }
  .bh-task summary { grid-template-columns: 24px 1fr auto; }
  .bh-task summary .b-badge { display: none; }
  .bh-tl__detail { grid-template-columns: 1fr; }
  .bh-table .hide-sm { display: none; }
  .bh-kpi__value { font-size: 1.75rem; }
  .bh-confirm, .bh-budget, .bh-plan { padding: 20px 18px; }
}
@media (max-width: 560px) { .hide-xs { display: none; } }

/* Atmosfera sem recorte: permite menus/tooltips vazarem da área (ex.: composer) */
.b-atmo--open { overflow: visible; }
.b-atmo--open::before { inset: 0; filter: blur(0); border-radius: inherit; }
.b-atmo--open::after { border-radius: inherit; }

/* Grades de coluna única nunca crescem além do contêiner (textos longos) */
.bh-vendor, .bh-identity, .bh-jitem, .bh-skel-card, .bh-expert, .bh-vendor__body, .bh-jewel__body, .bh-identity__body, .bh-wedding__body { grid-template-columns: minmax(0, 1fr); }
.bh-quick__item > .bh-keys { flex: none; }
.bh-legend { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); }
.bh-legend__row { grid-template-columns: 10px minmax(0, 1fr); row-gap: 2px; align-items: baseline; }
.bh-legend__row i { align-self: center; }
.bh-legend__row span { white-space: normal; }
.bh-legend__row b { grid-column: 2; }
.bh-invite__names em { font-size: 2.6rem; margin: 4px 0 -2px; }
.bh-jewel__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(42,8,12,.28), transparent 30%, transparent 62%, rgba(42,8,12,.42)); pointer-events: none; }
.bh-jewel__media > :not(img) { z-index: 1; }
.bh-glass-dark { background: rgba(42,8,12,.32) !important; border-color: rgba(255,255,255,.22) !important; color: #FBF4E4 !important; -webkit-backdrop-filter: blur(14px) saturate(1.3); backdrop-filter: blur(14px) saturate(1.3); }
/* recorte focado no pingente da foto de campanha */
.bh-jewel__media img { position: absolute; height: 190%; width: auto; max-width: none; left: 50%; bottom: 24%; object-fit: initial; transform: translateX(-78.5%); transform-origin: 78.5% 90%; }
@media (hover: hover) and (pointer: fine) { .bh-jewel:hover .bh-jewel__media img { transform: translateX(-78.5%) scale(1.06); } }
.bh-table td.nowrap, .bh-table td:nth-child(2) { white-space: nowrap; }
.bh-jewel__try { position: static; }
.bh-jewel__media { aspect-ratio: 4 / 3.8; }
.bh-jewel__media img { height: 172%; bottom: 0; }
.bh-jewel__media::after { background: linear-gradient(180deg, rgba(42,8,12,.3), transparent 32%); }