@font-face {
  font-family: Onest;
  src: url('./fonts/Onest-Variable.ttf') format('truetype');
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
}

/* Product chrome only. Map content, project data and interactions stay unchanged. */
:root {
  --ink: #202535;
  --muted: #657086;
  --forest: #3855ed;
  --lime: #e9edff;
  --line: #e1e5ee;
  --paper: #fff;
  --bg: #f3f5fa;
  font-family: Onest, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}
body { background: var(--bg); }
.icon { stroke-width: 1.7; }
button:focus-visible, a:focus-visible, summary:focus-visible,
input[type=range]:focus-visible { outline: 3px solid #526bf3; outline-offset: 3px; }
input:focus, textarea:focus { border-color: #526bf3 !important; box-shadow: 0 0 0 3px #3855ed14; }
input::placeholder, textarea::placeholder { color: #637087; opacity: 1; }

/* The header and project bar remain separate, with a clearer hierarchy. */
.app-header { height: 64px; padding-inline: 32px; gap: 22px; background: #1c2233; border-color: #1c2233; }
.brand { color: #fff; font-size: 27px; font-weight: 650; letter-spacing: -1.25px; }
.brand-icon { width: 32px; height: 34px; border-radius: 8px; background: #526cf3; color: #fff; transform: none; }
.brand-icon .icon { width: 21px; height: 21px; transform: none; stroke-width: 1.7; }
.brand-period { color: #899cff; }
.header-divider { background: #41495e; height: 20px; }
.header-caption { color: #c4ccdc; font-size: 12px; }
.local-status { color: #b8c2d6; font-size: 11px; }
.local-status > span { background: #9aacff; box-shadow: none; }
.project-bar { min-height: 104px; padding: 22px 32px; background: #fff; gap: 20px; }
.eyebrow { color: #727c90; font-size: 10px; font-weight: 600; letter-spacing: 1.2px; }
.project-heading { min-width: 0; }
.project-name-row { margin-top: 7px; gap: 15px; }
.project-heading input { color: #202535; width: 330px; font-size: 27px; font-weight: 600; letter-spacing: -.9px; line-height: 1.25; }
.project-heading input:focus { background: #f4f6ff; border-bottom-color: #526bf3; }
.saved-state { color: #657086; font-size: 11px; }
.saved-state .icon { color: #526bf3; width: 14px; height: 14px; }
.project-actions { gap: 10px; }
.button { border-radius: 7px; min-height: 44px; font-size: 13px; font-weight: 550; gap: 9px; padding: 11px 17px; }
.button-primary { background: #3855ed; color: #fff; box-shadow: 0 2px 4px #263ba51a; }
.button-primary:hover:not(:disabled) { background: #2d46d0; }
.button-outline { background: #fff; color: #424e66; border-color: #c3cbdc; box-shadow: 0 1px 2px #20253505; }
.button-outline:hover:not(:disabled) { background: #f5f7fc; border-color: #a4b0ca; }
.text-button { color: #455bd0; font-size: 12px; font-weight: 500; }
.text-button:hover { color: #263bb2; }
.dropdown { border-color: #e1e5ee; border-radius: 10px; box-shadow: 0 10px 35px #2025351a, 0 2px 6px #20253508; padding: 6px; }
.dropdown button { font-size: 13px; border-radius: 6px; color: #344057; }
.dropdown button:hover { background: #f0f3ff; }
.dropdown .icon { color: #697894; }

.workspace { min-height: calc(100vh - 168px); }
.sidebar { background: #fff; border-color: #e1e5ee; }
.editor-tabs { background: #fff; gap: 5px; padding: 11px 18px; align-items: center; }
.editor-tab { min-height: 36px; padding: 8px 13px; border-radius: 6px; color: #6c768b; font-size: 13px; font-weight: 500; gap: 7px; }
.editor-tab:hover { background: #f5f6fb; color: #344158; }
.editor-tab.active { background: #edf0ff; color: #354fd5; }
.editor-tab.active:after { content: none; }
.editor-tab > span { background: #e9edf5; color: #67758d; border-radius: 4px; font-size: 10px; padding: 1px 5px; }
.editor-tab.active > span { background: #dce3ff; color: #354fd5; }
.panel-scroll { height: calc(100vh - 268px); padding: 24px; scrollbar-color: #cbd2e0 transparent; }
.section-heading h1 { color: #202535; font-size: 22px; font-weight: 600; letter-spacing: -.65px; }
.section-heading p { color: #6b7589; font-size: 12px; line-height: 1.6; margin-top: 8px; margin-bottom: 20px; }
.search-form { height: 46px; background: #f6f8fc; border-color: #8692a8; border-radius: 7px; }
.search-form:focus-within { border-color: #526bf3; box-shadow: 0 0 0 3px #3855ed12; background: #fff; }
.search-icon { color: #7a879e; }
.search-form input { font-size: 13px; color: #344057; }
.search-form button { background: #3855ed; color: #fff; border-radius: 5px; width: 34px; }
.search-form button:hover:not(:disabled) { background: #2d46d0; }
.search-under { margin-top: 11px; }
.search-under > span { color: #727e93; font-size: 10px; }
.search-under .text-button { font-size: 11px; }
.search-status { color: #8b5a2c; font-size: 12px; }
.search-results { border-color: #d4dced; border-radius: 8px; box-shadow: 0 5px 20px #23305a12; }
.search-result { border-color: #e8ecf5; }
.search-result:hover { background: #f2f5ff; }
.search-result .icon { color: #536be6; }
.search-result b { font-size: 12px; color: #344057; }
.search-result small { font-size: 11px; color: #6e7b91; }

.places-heading { margin: 28px 0 12px; }
.places-heading .eyebrow { font-size: 10px; letter-spacing: 1px; }
.subtle { color: #6b778c; font-size: 11px; }
.branch-list { gap: 9px; }
.branch-row { min-width: 0; border: 1px solid #dfe4ef; border-radius: 8px; background: #fff; gap: 5px; padding-inline-end: 9px; }
.branch-row:hover { background: #fafbff; border-color: #b9c5e2; }
.branch-row.active { border-color: #9eaff7; background: #f2f5ff; box-shadow: 0 1px 3px #3855ed08; }
.branch-row.active:before { background: #526bf3; width: 3px; top: 14px; bottom: 14px; border-radius: 2px; }
.branch-select { min-height: 74px; padding: 13px 0 13px 13px; gap: 11px; }
.branch-number, .branch-row:nth-child(2) .branch-number { width: 30px; height: 34px; border-radius: 6px; background: #f0f2f8; color: #7a879e; font-size: 11px; font-weight: 500; font-variant-numeric: tabular-nums; }
.branch-row.active .branch-number { background: #3855ed; color: #fff; }
.branch-text b { font-size: 12px; font-weight: 550; color: #2b3650; line-height: 1.45; }
.branch-text small { font-size: 10px; color: #737f94; margin-top: 4px; }
.branch-delete { width: 30px; height: 32px; color: #8995aa; flex-shrink: 0; border-radius: 5px; }
.branch-delete:hover { background: #fff0f0; color: #b34949; }
.branch-delete .icon { width: 15px; height: 15px; }
.demo-note { color: #7a859a; font-size: 11px; line-height: 1.7; margin-top: 16px; }
.demo-note > .icon { color: #7b89a7; }
.demo-note button { color: #5264b8; text-underline-offset: 3px; }
.empty-pin { background: #edf1ff; color: #526bf3; border-radius: 12px; }
.empty-state h2 { color: #344057; }
.empty-state p { color: #6c788e; }

.branch-editor { margin-top: 26px; padding-top: 25px; border-color: #e3e8f1; }
.card-editor-heading { margin-bottom: 22px; }
.card-editor-heading h2 { font-size: 16px; font-weight: 600; color: #27324b; }
.tiny-tag { background: #f2f5ff; border: 0; color: #6578c8; padding: 4px 7px; font-size: 9px; border-radius: 4px; }
.field { margin-bottom: 18px; }
.field > label, .design-fieldset legend { color: #46516a; font-size: 12px; font-weight: 550; margin-bottom: 8px; }
.field > label > span { color: #7b869b; font-size: 10px; }
.field > input:not([type=range]), .field > textarea { background: #fff; border: 1px solid #8692a8; border-radius: 6px; color: #344057; padding: 11px 12px; font-size: 13px; line-height: 1.5; }
.field > textarea { min-height: 92px; }
.field-hint { color: #727f94; font-size: 11px; line-height: 1.65; }
.editor-details { border-color: #e3e8f1; }
.editor-details summary { color: #46516a; font-size: 13px; font-weight: 550; padding-block: 18px; }
.details-chevron { color: #7c88a0; }
.sidebar-footer { background: #fafbfe; border-color: #e4e8f0; color: #778298; font-size: 10px; padding-inline: 24px; }
.sidebar-footer .icon { color: #6579dc; }
.website-url-row { border-color: #8692a8; border-radius: 6px; }
.website-url-row:focus-within { border-color: #526bf3; box-shadow: 0 0 0 3px #3855ed12; }
.website-url-row input { color: #344057; font-size: 13px; padding: 11px 12px; }
.website-url-row button { background: #f3f5fc; border-color: #dbe1ef; color: #6175cb; }
.website-url-row button:hover:not(:disabled) { background: #e8edff; }
.website-photo { border-color: #e1e6f0; border-radius: 8px; }
.website-photo.is-favicon { background: #f6f8fc; }
.website-status.is-error { color: #a44747; }
.website-status[aria-busy=true] { color: #5265c8; }

.design-fieldset { margin-block: 25px; }
.theme-option { border-color: #d5ddea; border-radius: 7px; color: #69758c; font-size: 11px; padding: 5px 5px 9px; }
.theme-option[aria-pressed=true] { border-color: #526bf3; color: #4257c4; box-shadow: 0 0 0 1px #526bf3; }
.theme-option > .icon { background: #3855ed; }
.theme-thumb { border-radius: 4px; }
.color-options button { border-color: #fff; }
.custom-color { background: #f6f8fc; color: #6c7a96; border-color: #a2adc2; }
.color-value { color: #6c7890; font-size: 11px; }
.segmented { border-color: #e1e6ef; background: #f1f4fa; border-radius: 7px; padding: 4px; }
.marker-options button { border-radius: 5px; font-size: 11px; color: #6c7a91; }
.marker-options button[aria-pressed=true] { background: #fff; color: #3d55c7; box-shadow: 0 1px 4px #27355712; }
.range-field input { accent-color: #3855ed; }
.range-field output, .range-labels { font-size: 11px; color: #6e7a90; }
.switch-row b { color: #46516a; font-size: 12px; font-weight: 550; }
.switch-row small { color: #778298; font-size: 11px; }
.switch-track { background: #8692a8; }
.switch-row input:checked + .switch-track { background: #526bf3; }
.switch-row input:focus-visible + .switch-track { outline-color: #526bf3; }
.design-tip { background: #f3f5ff; border-color: #e0e6ff; border-radius: 8px; }
.design-tip > .icon { color: #6b7ddd; }
.design-tip p { color: #6978aa; font-size: 11px; }

.preview-area { padding: 0 32px 20px; background: #eef1f7; background-image: none; }
.preview-toolbar { height: 72px; }
.preview-label { color: #4c5870; font-size: 12px; font-weight: 550; gap: 10px; }
.live-badge { border: 1px solid #cfd8f8; background: #e6ecff; color: #536acc; padding: 3px 5px; border-radius: 4px; font-size: 8px; letter-spacing: .6px; }
.live-badge > span { background: #647ff0; }
.preview-tools { gap: 12px; }
.device-switch { background: #e0e5f0; border: 1px solid #d9dfed; padding: 3px; border-radius: 7px; }
.device-switch button { width: 33px; height: 29px; border-radius: 4px; color: #6c7a96; }
.device-switch button.active { background: #fff; color: #4b62d5; box-shadow: 0 1px 3px #27355714; }
.preview-divider { background: #d3dbea; }
.fit-button { color: #63718b; font-size: 11px; }
.preview-frame { border: 1px solid #d9e0ed; border-radius: 12px; box-shadow: 0 16px 40px #2431530b, 0 2px 5px #24315305; }
.browser-chrome { height: 38px; background: #fff; border-color: #e6eaf3; color: #79859b; font-size: 10px; }
.browser-dots { gap: 5px; }
.browser-dots i { width: 6px; height: 6px; background: #e1e5ef; border: 0; }
.browser-chrome > .icon { color: #8e9ab0; }
.map-wrap { padding: 10px; }
.preview-bottom { padding-block: 26px 22px; }
.preview-caption { gap: 12px; }
.preview-caption-icon { background: #fff; color: #667ed5; border-color: #dce3f3; border-radius: 9px; width: 36px; height: 38px; transform: none; }
.preview-caption-icon .icon { transform: none; }
.preview-caption b { font-size: 12px; color: #52607a; font-weight: 550; }
.preview-caption p { font-size: 11px; color: #7a879e; line-height: 1.7; }
.export-note > span { color: #76839b; font-size: 8px; letter-spacing: 1px; }
.export-note p { color: #657694; font-size: 13px; line-height: 1.5; }
.preview-footnote { border-color: #dce2ee; font-size: 10px; color: #78869f; }
.connection-dot { background: #7188cc; }
.footnote-divider { color: #a5b0c4; }
.placement-banner { background: #3855ed; color: #fff; border-radius: 7px; font-size: 12px; box-shadow: 0 3px 16px #253b9430; }
.placement-banner button { color: #fff; }

dialog { border: 1px solid #d9e1f0; border-radius: 14px; color: #27324b; box-shadow: 0 24px 80px #202e5638; font-family: Onest, Arial, sans-serif; }
dialog::backdrop { background: #18213a75; backdrop-filter: blur(4px); }
.dialog-symbol { background: #edf1ff; color: #526bf3; border-radius: 10px; }
.icon-button { background: #f1f4fa; color: #7d8aa3; border-radius: 6px; }
.icon-button:hover { background: #e7edfc; color: #526bf3; }
.export-dialog h2 { color: #27324b; font-size: 28px; font-weight: 600; letter-spacing: -.7px; }
.dialog-intro { color: #6d7a92; font-size: 13px; line-height: 1.75; }
.export-summary span { background: #f0f3fc; color: #6176b6; font-size: 10px; border-radius: 4px; padding: 6px 9px; }
.code-label { color: #546580; font-size: 12px; }
.code-label > span:last-child { color: #7f8ba0; }
.export-dialog textarea { border-color: #8692a8; background: #f7f9fd; color: #465c86; border-radius: 7px; font-size: 11px; }
.export-actions .button { font-size: 13px; }
.export-help { color: #77849a; font-size: 11px; }
.confirm-dialog > p { color: #6d7a92; font-size: 13px; }
.toast { background: #26334f; color: #fff; border-radius: 8px; font-size: 13px; box-shadow: 0 4px 25px #24345430; }

/* Secondary copy stays readable, including on the tinted preview canvas. */
.eyebrow, .subtle, .section-heading p, .search-under > span,
.branch-text small, .demo-note, .field-hint, .field > label > span,
.sidebar-footer, .color-value, .switch-row small, .range-labels,
.range-field output, .preview-caption p, .preview-footnote,
.export-note > span, .export-help, .code-label > span:last-child { color: #5f6c83; }
.live-badge { color: #4358b6; }
.tiny-tag { color: #5366ad; }
.design-tip p { color: #5b6b9c; }

.hover-color-options button[aria-pressed=true] { outline-color: #526bf3; }
.hover-color-options button[aria-pressed=true]:after { color: #46516a; }
.hover-color-fields { display: grid; grid-template-columns: minmax(90px, 1fr) minmax(0, 1.5fr); gap: 10px; margin-top: 16px; }
.hover-color-fields .field { min-width: 0; margin-bottom: 0; }
.hover-color-fields input { min-width: 0; font-family: Consolas, monospace; }
.hover-color-fields input[aria-invalid=true] { border-color: #b74444 !important; }
#hover-color-status.is-error { color: #a44747; }

@media (min-width: 1700px) {
  .panel-scroll { padding-inline: 28px; }
  .editor-tabs { padding-inline: 22px; }
  .preview-area { padding-inline: 44px; }
}
@media (max-width: 1200px) {
  .saved-state { display: none; }
  .project-heading input { width: 300px; }
  .preview-area { padding-inline: 24px; }
  .panel-scroll { padding-inline: 20px; }
  .editor-tabs { padding-inline: 14px; }
}
@media (max-width: 850px) {
  .app-header, .project-bar { padding-inline: 24px; }
  .project-heading input { width: 250px; font-size: 24px; }
  .preview-area { padding-inline: 18px; }
  .preview-label { font-size: 11px; gap: 6px; }
  .panel-scroll { padding-inline: 17px; }
  .editor-tabs { padding-inline: 10px; }
  .editor-tab { padding-inline: 10px; }
}
@media (max-width: 680px) {
  .app-header { height: 58px; padding-inline: 18px; gap: 14px; }
  .brand { font-size: 25px; }
  .brand-icon { width: 29px; height: 31px; }
  .header-caption { font-size: 10px; }
  .local-status { font-size: 0; }
  .project-bar { min-height: auto; padding: 20px 18px; }
  .project-heading input { width: 100%; font-size: 25px; }
  .project-actions .button { font-size: 12px; min-height: 43px; }
  .workspace { min-height: 0; }
  .editor-tabs { height: 58px; padding-inline: 16px; gap: 8px; }
  .editor-tab { padding-inline: 13px; }
  .panel-scroll { height: auto; min-height: 0; padding: 24px 22px; }
  .sidebar-footer { padding-inline: 22px; font-size: 9px; }
  .section-heading h1 { font-size: 22px; }
  .field > input:not([type=range]), .field > textarea, .website-url-row input, .search-form input { font-size: 16px; }
  .search-form { height: 48px; }
  .branch-select { min-height: 76px; }
  .branch-text b { font-size: 13px; }
  .branch-text small { font-size: 11px; }
  .preview-area { padding: 0 14px 18px; }
  .preview-toolbar { height: 60px; }
  .preview-tools { gap: 9px; }
  .preview-label { font-size: 11px; }
  .live-badge { font-size: 7px; padding: 2px 4px; }
  .device-switch button { width: 29px; height: 27px; }
  .browser-chrome { height: 32px; font-size: 9px; }
  .map-wrap { padding: 6px; }
  .placement-banner { font-size: 11px; white-space: normal; }
  .color-options { gap: 10px; }
  .color-options button, .custom-color { width: 28px; height: 28px; flex-shrink: 0; }
  .export-dialog { padding: 24px 20px; }
  .export-dialog h2 { font-size: 25px; }
  .export-summary { gap: 6px; }
  .export-summary span { font-size: 10px; }
  .export-help { font-size: 11px; }
}
@media (max-width: 360px) {
  .project-actions .button, .project-actions .menu-wrap .button { padding-inline: 9px; gap: 6px; font-size: 12px; }
  .project-actions .button-primary > .icon:last-child:not(:first-child) { margin-left: 0; }
  .color-options { gap: 9px; }
  .preview-label { gap: 5px; }
}