@font-face { font-family: BCsans; src: url('/assets/fonts/DejaVuSans.ttf') format('truetype'); font-display: swap; }
@font-face { font-family: BCbold; src: url('/assets/fonts/DejaVuSans-Bold.ttf') format('truetype'); font-display: swap; }
@font-face { font-family: BCserif; src: url('/assets/fonts/DejaVuSerif.ttf') format('truetype'); font-display: swap; }
.bce-page { margin: 0; color: #f7f5ee; background: #111b2c; }
html:has(.bce-page) { scroll-behavior: auto; scroll-padding-top: 90px; }
.bce-page * { box-sizing: border-box; }
.bce-page a { color: inherit; }
.bce-wrap { max-width: 1200px; margin: auto; padding: 0 20px; }
.bce-intro { padding: 32px 0 22px; }
.bce-intro nav { color: #bdd0db; font-size: .84rem; }
.bce-intro h1 { margin: 18px 0 12px; font-size: clamp(2rem,4vw,3.2rem); }
.bce-intro p { color: #c1d0dd; margin: 8px 0; }
.bce-kicker { color: #82dcea !important; font-size: .85rem; }
.bce-intro-actions,.bce-actions,.bce-tabs,.bce-draft { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.bce-wrap .btn,.bce-button { display: inline-flex; justify-content: center; align-items: center; padding: 10px 16px; border: 1px solid #567084; border-radius: 9px; min-height: 44px; font-size: .88rem; text-decoration: none; }
.bce-button { color: #f7f5ee; background: #1c3348; }
.bce-page button:disabled { opacity: .45; cursor: not-allowed; transform: none; }
.bce-steps { display: flex; flex-wrap: wrap; gap: 10px 22px; padding: 0; margin: 22px 0; list-style: none; color: #c1d0dd; font-size: .83rem; }
.bce-steps a { text-decoration: none; }
.bce-steps b { color: #70d5ed; margin-right: 5px; }
.bce-section-title { font-size: 1.35rem; margin: 0 0 18px; }
.bce-gallery { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 16px; padding-bottom: 30px; }
.bce-design { border: 1px solid #536c7d; border-radius: 13px; padding: 12px; background: #182d40; color: inherit; text-align: left; min-width: 0; }
.bce-design[aria-pressed=true] { border-color: #71d4ed; box-shadow: 0 0 0 2px #71d4ed; }
.bce-design h3 { margin: 12px 0 4px; font-size: 1.1rem; }
.bce-design p { margin: 4px 0; color: #c1d0dd; font-size: .74rem; }
.bce-design small { color: #9bb3c5; font-size: .7rem; }
.bce-thumb { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; align-items: center; }
.bce-thumb svg { display: block; width: 100%; height: auto; background: white; }
.bce-layout { display: grid; grid-template-columns: minmax(0,440px) minmax(0,1fr); gap: 24px; align-items: start; }
.bce-panel { border: 1px solid #4a6277; border-radius: 15px; background: #182b3f; padding: 22px; margin-bottom: 20px; min-width: 0; }
.bce-fields { display: grid; gap: 13px; }
.bce-field { display: grid; gap: 6px; font-size: .85rem; }
.bce-field input,.bce-field select,.bce-field textarea { width: 100%; min-width: 0; background: #102237; color: #f7f5ee; border: 1px solid #60788c; border-radius: 7px; padding: 10px 11px; min-height: 44px; font-size: .9rem; }
.bce-field [aria-invalid=true] { border-color: #ffa4a4; }
.bce-error { color: #ffb9b0; font-size: .77rem; line-height: 1.5; overflow-wrap: anywhere; }
.bce-small { color: #c1d0dd; font-size: .79rem; line-height: 1.6; overflow-wrap: anywhere; }
.bce-page fieldset.bce-accents { margin-top: 22px; }
.bce-accents legend { font-size: 1rem; font-weight: 600; }
.bce-accent-group { margin-bottom: 18px; font-size: .85rem; }
.bce-accent-picker { display: flex; gap: 12px; align-items: center; margin: 8px 0; }
.bce-accent-picker input[type=color] { width: 48px; height: 44px; padding: 3px; border: 1px solid #94acbe; border-radius: 7px; background: #102237; cursor: pointer; }
.bce-accent-picker output { font-variant-numeric: tabular-nums; color: #c1d0dd; }
.bce-swatches { display: flex; flex-wrap: wrap; gap: 5px; }
.bce-swatch { display: grid; place-items: center; flex: 0 0 44px; width: 44px; height: 44px; padding: 6px; border: 2px solid transparent; border-radius: 50%; background: transparent; cursor: pointer; }
.bce-swatch span { display: block; width: 28px; height: 28px; border-radius: 50%; border: 1px solid #ffffff80; }
.bce-swatch[aria-pressed=true] { border-color: #fff; }
.bce-swatch:focus-visible,.bce-accent-picker input:focus-visible { outline: 3px solid #78d8ec; outline-offset: 2px; }
.bce-preview-track { display: flow-root; min-width: 0; }
.bce-preview-panel { position: static; }
.bce-stage { background: #dce2e3; border-radius: 9px; padding: 22px; margin: 18px 0; }
.bce-stage svg { display: block; width: 100%; height: auto; box-shadow: 0 12px 26px #0002; }
.bce-stage p { color: #263f4e; }
.bce-tabs button[aria-pressed=true] { color: #102337; background: #78d8ec; }
.bce-price { border-top: 1px solid #4b6276; padding-top: 16px; }
.bce-price strong { display: block; font-size: 2.2rem; letter-spacing: -.035em; }
.bce-check { display: flex; align-items: flex-start; gap: 10px; margin: 16px 0; font-size: .84rem; }
.bce-check input { flex: 0 0 auto; width: 18px; height: 18px; margin: 3px 0; accent-color: #50cde8; }
.bce-notice { border-left: 3px solid #81d9ea; padding-left: 13px; }
.bce-status { min-height: 1.5em; font-size: .85rem; overflow-wrap: anywhere; }
.bce-status[data-state=error] { color: #ffb9b0; }
.bce-status[data-state=success] { color: #9ce0b0; }
.bce-dialog { position: fixed; inset: 0; margin: auto; width: min(900px,calc(100% - 24px)); max-height: calc(100dvh - 24px); overflow: auto; padding: 24px; border: 1px solid #607d91; border-radius: 15px; background: #182b3f; color: #fff; }
.bce-dialog::backdrop { background: #06101bd9; }
.bce-dialog h2 { margin-top: 0; font-size: 1.4rem; }
.bce-proof-pages { display: grid; gap: 20px; }
.bce-proof-pages figure { margin: 0; }
.bce-proof-pages figcaption { margin: 6px 0 10px; font-size: .85rem; color: #c1d0dd; }
.bce-proof-pages canvas { display: block; width: 100%; height: auto; }
.bce-proof-text { white-space: pre-wrap; font-size: .84rem; overflow-wrap: anywhere; }
.bce-page [hidden] { display: none !important; }
.bce-page fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
.bce-page footer { padding: 20px 0 32px; color: #c1d0dd; font-size: .85rem; }
@media (min-width: 1024px) {
  .bce-preview-track { height: var(--bce-preview-track-height,auto); }
  .bce-preview-panel { position: sticky; top: var(--bce-preview-top,89px); }
}
@media (max-width: 800px) { .bce-gallery { grid-template-columns: repeat(2,minmax(0,1fr)); } .bce-layout { grid-template-columns: 1fr; } .bce-preview-panel { position: static; } .bce-preview-column { display: contents; } .bce-stage { padding: 14px; } }
@media (max-width: 480px) { .bce-wrap { padding: 0 12px; } .bce-panel { padding: 16px; } .bce-gallery { gap: 10px; } .bce-design { padding: 8px; } .bce-thumb { grid-template-columns: 1fr; } .bce-design h3 { font-size: .9rem; } .bce-dialog { width: 100%; max-width: 100vw; max-height: 100dvh; height: 100dvh; margin: 0; border-radius: 0; padding: 16px; } .bce-intro { padding-top: 24px; } }
@media (prefers-reduced-motion: reduce) { .bce-page *, .bce-page *::after { transition: none !important; animation: none !important; } }