.obp { --obp-ink:#183047; --obp-soft:#e8eef2; --obp-red:#aa2a31; --obp-bg:#f7f9fa; color:var(--obp-ink); font:inherit; max-width:1160px; margin:2rem auto; }
.obp * { box-sizing:border-box; }
.obp.obp-planner { width:100%; max-width:1600px; position:relative; left:auto; transform:none; margin:.65rem auto; container-type:inline-size; }
.obp-commandbar { display:flex; align-items:center; justify-content:space-between; gap:.5rem; flex-wrap:wrap; background:#183047; color:#fff; border-radius:9px; padding:.5rem .75rem; position:relative; }
.obp-commandbar h2 { color:#fff; margin:0; font-size:1.18rem; }
.obp-commandbar .obp-kicker { color:#c6dce9; font-size:.63rem; }
.obp-command-actions { display:flex; flex-wrap:wrap; gap:.4rem; }
.obp-commandbar .obp-command-actions button.obp-secondary { background:#28485e; color:#fff; border-color:#7495a9; }
.obp-toolbar-status { flex-basis:100%; margin:0; font-size:.78rem; line-height:1.3; }
.obp-toolbar-status:empty { display:none; }
.obp-screenreader { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
body.obp-editor-open { overflow:hidden; }
.obp.obp-planner.is-fullscreen { position:fixed; z-index:1000000; inset:0; left:0; transform:none; width:100vw; max-width:none; height:100vh; height:100dvh; display:flex; flex-direction:column; overflow:hidden; overscroll-behavior:contain; margin:0; padding:.5rem max(.65rem,env(safe-area-inset-right)) 0 max(.65rem,env(safe-area-inset-left)); background:#eaf0f4; }
.obp-planner.is-fullscreen .obp-commandbar { flex:0 0 auto; z-index:12; }
.obp-planner.is-fullscreen .obp-workspace { flex:1 1 auto; min-height:0; overflow-y:auto; overscroll-behavior:contain; align-content:start; padding-bottom:max(1.5rem,env(safe-area-inset-bottom)); }
.obp-planner.is-fullscreen .obp-main { top:.5rem; }
.obp-planner.is-fullscreen .obp-side { padding-bottom:.5rem; }
.obp-planner.is-fullscreen .obp-results { position:static; box-shadow:0 6px 18px rgba(25,44,62,.13); }
.obp h2,.obp h3,.obp h4 { color:var(--obp-ink); line-height:1.25; }
.obp h2 { margin:.35rem 0 1rem; }
.obp h3 { margin:0 0 1rem; font-size:1.2rem; }
.obp h4 { margin:1.2rem 0 .4rem; }
.obp p { line-height:1.5; }
.obp-kicker { font-size:.72rem; text-transform:uppercase; letter-spacing:.11em; font-weight:800; color:var(--obp-red); }
.obp-intro { padding:1.3rem 1.6rem; margin-bottom:1rem; border-radius:12px; background:#f3f6f5; border-left:5px solid var(--obp-red); }
.obp-intro p { max-width:72ch; margin-bottom:0; }
.obp-workspace { display:grid; grid-template-columns:minmax(0,1fr); gap:.5rem; align-items:start; margin-top:.5rem; }
.obp-editor-grid { display:grid; grid-template-columns:minmax(0,1.55fr) minmax(320px,1fr); gap:.5rem; align-items:start; min-width:0; }
.obp-main,.obp-side { display:grid; min-width:0; gap:.5rem; align-content:start; }
.obp-main { position:sticky; top:.5rem; align-self:start; }
.obp-bill,.obp-export { min-width:0; }
.obp-main .obp-results { position:static; }
.obp-panel { background:#fff; border:1px solid #d7e0e7; border-radius:12px; padding:1.15rem; box-shadow:0 3px 12px rgba(25,44,62,.035); min-width:0; }
.obp-planner .obp-panel { padding:.6rem .75rem; }
.obp-planner .obp-starters h3 { font-size:.92rem; margin-bottom:.2rem; }
.obp-starter-categories { display:flex; gap:.35rem; overflow-x:auto; margin:0 0 .35rem; padding:2px 1px .2rem; scrollbar-width:thin; }
.obp button.obp-category { flex:0 0 auto; min-height:32px; padding:.2rem .55rem; border-color:#b6c9d2; background:#fff; color:var(--obp-ink); font-size:.78rem; }
.obp button.obp-category[aria-pressed=true] { background:#183047; color:#fff; border-color:#183047; }
.obp-starter-grid { display:flex; gap:.5rem; overflow-x:auto; padding:2px 2px .35rem; scroll-snap-type:x proximity; scrollbar-width:thin; }
.obp button.obp-starter { display:block; flex:0 0 min(225px,86%); scroll-snap-align:start; padding:.4rem .5rem; background:#fff; color:var(--obp-ink); text-align:left; border:1px solid #b6c9d2; min-height:90px; }
.obp button.obp-starter[aria-pressed=true] { border:2px solid #a72a31; box-shadow:0 0 0 2px #f5e1e1; }
.obp-starter strong,.obp-starter small { display:-webkit-box; -webkit-box-orient:vertical; overflow:hidden; overflow-wrap:anywhere; }
.obp-starter strong { -webkit-line-clamp:2; line-clamp:2; line-height:1.25; }
.obp-starter small { -webkit-line-clamp:2; line-clamp:2; line-height:1.35; font-weight:400; margin-top:.1rem; color:#52677a; font-size:.72rem; }
.obp-sponsor { display:flex; align-items:center; gap:.35rem; margin-top:.3rem; color:#315769; font-size:.69rem; font-weight:700; }
.obp-sponsor img { display:block; width:auto; max-width:82px; height:22px; object-fit:contain; }
.obp-starter-stack { display:flex; height:12px; gap:2px; margin:.3rem 0; overflow:hidden; border-radius:4px; }
.obp-starter-stack span { display:block; min-width:3px; background:#d9c5ad; }
.obp-starter-stack span:nth-child(3n+2) { background:#a9c9d2; }
.obp-starter-stack span:nth-child(3n+3) { background:#c7d4aa; }
.obp-setup { padding:.45rem .7rem !important; }
.obp-setup summary { cursor:pointer; font-weight:700; }
.obp-setup summary span { font-weight:400; margin-left:.5rem; color:#516676; font-size:.83rem; }
.obp-setup[open] .obp-fields { margin-top:.55rem; }
.obp-kind-advanced { margin-top:.55rem; padding:.45rem .55rem; border:1px solid #dce5ea; border-radius:7px; }
.obp-kind-advanced summary { color:#315769; font-size:.82rem; font-weight:600; }
.obp-kind-advanced label { margin-top:.5rem; }
.obp-mobile-summary { display:none; }
.obp-planner .obp-diagram-panel { background:#f7f9fa; display:flex; flex-direction:column; min-height:0; }
.obp-planner .obp-layer-panel { overflow:visible; max-height:none; scrollbar-gutter:auto; }
.obp-diagram-panel { background:#f7f9fa; }
.obp-section-head { display:flex; align-items:center; justify-content:space-between; gap:.5rem; flex-wrap:wrap; margin-bottom:.45rem; }
.obp-section-head h3 { margin:0; }
.obp-pill { color:#214d5c; background:#e1edf1; padding:.33rem .65rem; border-radius:100px; font-size:.82rem; font-weight:700; }
.obp-fields { display:grid; grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); gap:.5rem .65rem; align-items:end; }
.obp label { font-size:.88rem; display:block; font-weight:650; line-height:1.35; }
.obp input:not([type=checkbox]),.obp select,.obp-product-dialog input { width:100%; min-height:42px; margin-top:.3rem; border:1px solid #9cabb8; border-radius:7px; padding:.5rem .6rem; background:#fff; color:var(--obp-ink); font:inherit; }
.obp input:focus-visible,.obp select:focus-visible,.obp button:focus-visible,.obp a:focus-visible,.obp-product-dialog button:focus-visible { outline:3px solid #2275a4; outline-offset:2px; }
.obp button,.obp-product-dialog button { border:1px solid var(--obp-red); border-radius:7px; background:var(--obp-red); color:#fff; min-height:39px; padding:.35rem .7rem; cursor:pointer; font:inherit; font-weight:650; }
.obp button:hover,.obp-product-dialog button:hover { filter:brightness(.92); }
.obp button:disabled,.obp-product-dialog button:disabled { opacity:.45; cursor:not-allowed; }
.obp button.obp-secondary,.obp-layer-controls button { background:#fff; color:var(--obp-ink); border-color:#aab7c1; }
.obp-actions,.obp-layer-controls { display:flex; gap:.45rem; flex-wrap:wrap; align-items:center; }
.obp-muted { font-size:.82rem; color:#52677a; margin:.7rem 0 0; }
.obp-diagram { overflow:auto; border:1px solid #d7e0e7; border-radius:8px; background:#f8fafc; text-align:center; }
.obp-planner .obp-diagram { flex:0 1 auto; display:flex; flex-direction:column; justify-content:flex-start; align-items:stretch; min-height:250px; max-height:clamp(300px,46vh,520px); }
.obp-planner .obp-diagram > svg,.obp-planner .obp-diagram > .obp-diagram-legend { flex-shrink:0; }
.obp-diagram svg { display:block; width:100%; min-width:0; height:auto; max-width:none; }
.obp-diagram-legend { display:grid; grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); gap:.2rem .45rem; list-style:none; margin:.15rem 0 0; padding:.4rem; text-align:left; border-top:1px solid #d7e0e7; }
.obp-diagram-legend li { margin:0; min-width:0; }
.obp button.obp-legend-button { display:flex; align-items:flex-start; gap:.4rem; width:100%; min-height:32px; padding:.25rem; text-align:left; color:var(--obp-ink); background:transparent; border:1px solid transparent; font-size:.78rem; font-weight:500; line-height:1.3; overflow-wrap:anywhere; }
.obp button.obp-legend-button:hover,.obp button.obp-legend-button[data-selected=true] { background:#fff8f8; border-color:#a72a31; }
.obp-legend-number { display:inline-flex; flex:0 0 1.25rem; justify-content:center; align-items:center; height:1.25rem; border-radius:50%; background:#183047; color:#fff; font-weight:700; font-size:.72rem; }
.obp-svg-label { fill:#3e5265; font-size:12px; font-weight:700; letter-spacing:.04em; }
.obp-svg-number { fill:#192c41; font-size:25px; font-weight:750; }
.obp-svg-mm { fill:#192c41; font-size:11px; }
.obp-svg-name { fill:#1e3249; font-size:11px; }
.obp-svg-leader { stroke:#445c6f; stroke-width:1.2; fill:none; }
.obp-svg-badge { fill:#fff; stroke:#445c6f; stroke-width:1.4; }
.obp-svg-badge-text { fill:#183047; font-size:11px; font-weight:800; }
.obp-svg-mark { fill:#54697a; font-size:10px; }
.obp-diagram g[role=button] { cursor:pointer; }
.obp-diagram g[role=button]:hover rect,.obp-diagram g[role=button]:focus rect { stroke:#a72a31; stroke-width:3px; }
.obp-diagram g[data-selected=true] rect:first-child { stroke:#a72a31; stroke-width:4px; }
.obp-diagram g[role=button]:focus-visible { outline:3px solid #2275a4; outline-offset:2px; }
.obp-layers { display:grid; gap:.35rem; }
.obp-layer { border:1px solid #c5d2dc; border-left:4px solid #9d383d; border-radius:7px; padding:.4rem .55rem; background:#fff; }
.obp-layer { scroll-margin-top:.8rem; }
.obp-layer[data-selected=true] { border-color:#a72a31; border-left-width:6px; background:#fff8f8; box-shadow:0 0 0 2px #f4d7d9; }
.obp-layer-title { display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:.35rem; margin-bottom:.4rem; }
.obp-layer-row { display:flex; align-items:center; gap:.4rem; }
.obp button.obp-layer-select { display:block; flex:1; min-width:0; text-align:left; background:transparent; color:var(--obp-ink); border:0; padding:.1rem; min-height:34px; }
.obp-drag-handle { display:flex; align-items:center; align-self:stretch; padding:0 .4rem; color:#607587; cursor:grab; user-select:none; font-size:1.25rem; }
.obp-layer-select strong,.obp-layer-select small { display:block; overflow-wrap:anywhere; }
.obp-layer-select small { font-size:.76rem; color:#516676; font-weight:400; }
.obp-layer-editor[hidden] { display:none !important; }
.obp-layer-controls button { min-height:32px; padding:.15rem .45rem; font-size:.85rem; }
.obp-layer-source { border:1px solid #dce5ea; border-radius:8px; padding:.45rem; margin-bottom:.5rem; background:#f7f9fa; }
.obp-layer-source .obp-actions { margin:.35rem 0 0; }
.obp-layer-source button[aria-pressed=true] { background:#183047; border-color:#183047; color:#fff; }
.obp-layer-source p { margin:.4rem 0 0; font-size:.78rem; color:#52677a; }
.obp-layer details { border-top:1px solid #dce5ea; margin-top:.5rem; padding-top:.4rem; }
.obp-layer summary { cursor:pointer; font-weight:700; color:#315769; margin-bottom:.4rem; }
.obp-empty { background:#f7f9fa; border:1px dashed #9cabb8; padding:1rem; border-radius:8px; }
.obp-planner .obp-results .obp-section-head { margin-bottom:.5rem; }
.obp-planner .obp-results h3 { font-size:1rem; }
.obp-result-cards { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:.35rem; }
.obp-result { background:#f2f6f8; border-radius:7px; padding:.35rem .45rem; min-width:0; }
.obp-result span,.obp-result strong,.obp-result small { display:block; overflow-wrap:anywhere; }
.obp-result span { font-size:.74rem; color:#516676; line-height:1.3; }
.obp-result strong { font-size:.98rem; line-height:1.25; margin:.12rem 0; }
.obp-result small { color:#7e3034; font-size:.69rem; line-height:1.3; }
.obp-result-details { margin-top:.35rem; }
.obp-result-details summary { cursor:pointer; font-size:.82rem; font-weight:700; }
.obp-tabs { display:flex; gap:4px; }
.obp-tabs button[aria-pressed=false] { background:#fff; color:var(--obp-ink); border-color:#aab7c1; }
.obp-table-scroll { overflow-x:auto; }
.obp table,.obp-card table { width:100%; border-collapse:collapse; margin:.6rem 0; font-size:.87rem; }
.obp th,.obp td,.obp-card th,.obp-card td { text-align:left; padding:.55rem .45rem; border-bottom:1px solid #dce5ea; vertical-align:top; }
.obp th,.obp-card th { font-weight:700; }
.obp-card { max-width:1000px; }
.obp-product-photo { width:min(100%,640px); margin:1rem 0; border:1px solid #d7e0e7; border-radius:10px; overflow:hidden; background:#f7f9fa; }
.obp-product-photo img { display:block; width:100%; max-height:480px; height:auto; object-fit:contain; }
.obp-review-notice { padding:.6rem; background:#fff4dc; border-left:4px solid #ad7b19; }
.obp-card table th { width:38%; }
.obp-filter { display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); align-items:end; gap:.6rem; background:#f4f7f9; padding:.8rem; border-radius:9px; }
.obp-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(225px,1fr)); gap:.7rem; margin:1rem 0; }
.obp-product { border:1px solid #d5dfe5; border-radius:10px; padding:.95rem; }
.obp-product h2 { font-size:1.04rem; }
.obp-page { display:inline-block; padding:.25rem .55rem; border:1px solid #b6c2ca; border-radius:4px; margin:.2rem; }
.obp-page[aria-current=page] { background:#183047; color:#fff; }
.obp-comparison { margin-top:1.5rem; }
.obp-product-dialog { width:min(680px,calc(100vw - 24px)); max-height:85vh; border:1px solid #becbd5; border-radius:12px; padding:1.2rem; color:var(--obp-ink); }
.obp-picker-dialog { width:min(820px,calc(100vw - 24px)); max-height:90vh; overflow-y:auto; }
.obp-picker-dialog h3 { margin:0 2rem .35rem 0; }
.obp-picker-dialog .obp-muted { margin:.35rem 0 .6rem; }
.obp-picker-fields { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:.55rem; align-items:end; margin-top:.8rem; }
.obp-picker-fields label { min-width:0; margin:0; }
.obp-picker-search { margin-top:.75rem !important; }
.obp-picker-status { min-height:1.4em; }
.obp-product-technical { padding:.7rem .8rem; background:#f7f9fa; border:1px solid #d7e0e7; border-radius:8px; }
.obp-picker-thumbnail { display:block; width:110px; height:110px; object-fit:contain; float:right; margin:0 0 .6rem .8rem; border:1px solid #d7e0e7; border-radius:7px; background:#fff; }
.obp-product-technical h4 { margin:0 0 .3rem; font-size:1.02rem; }
.obp-product-technical button { margin-top:.65rem; }
.obp-technical-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0 .8rem; margin:.7rem 0; }
.obp-technical-grid div { display:grid; grid-template-columns:minmax(105px,42%) minmax(0,1fr); border-bottom:1px solid #dce5ea; padding:.33rem 0; gap:.5rem; min-width:0; }
.obp-technical-grid dt { font-size:.78rem; color:#52677a; }
.obp-technical-grid dd { margin:0; font-size:.85rem; font-weight:600; overflow-wrap:anywhere; }
.obp-product-dialog::backdrop { background:rgba(15,34,48,.65); }
.obp-close { float:right; font-size:1.3rem; }
.obp-local-options { margin-top:1.1rem; border-top:1px solid #dce5ea; padding-top:.8rem; }
.obp-local-options summary { cursor:pointer; font-weight:700; }
.obp-local-options .obp-actions { margin-top:.65rem; }
.obp-product-dialog label { display:block; font-weight:700; margin:.65rem 0; }
.obp-product-dialog [hidden] { display:none !important; }
.obp-product-dialog [data-file-error] { color:#9c232a; font-weight:700; min-height:1.4em; }
.obp-product-choice { display:flex; gap:.6rem; align-items:center; flex-wrap:wrap; padding:.55rem 0; border-bottom:1px solid #dbe5eb; }
.obp-product-choice span { color:#526777; flex:1 1 200px; font-size:.8rem; }
.obp-print { display:none; }
@media (max-width:1150px) {
  .obp-editor-grid { grid-template-columns:minmax(0,1.35fr) minmax(320px,1fr); }
  .obp-result-cards { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:920px) {
  .obp-editor-grid { grid-template-columns:minmax(0,1fr); }
  .obp-main,.obp-planner.is-fullscreen .obp-main { position:static; }
  .obp-layer { scroll-margin-top:3.5rem; }
  .obp-main .obp-results { position:static; }
  .obp-mobile-summary { display:block; position:sticky; top:0; z-index:9; background:#183047; color:#fff; font-size:.78rem; font-weight:700; line-height:1.4; padding:.5rem .7rem; border-radius:8px; box-shadow:0 3px 12px rgba(20,40,56,.15); }
  .obp-planner .obp-layer-panel { max-height:none; overflow:visible; }
  .obp-planner .obp-diagram-panel { min-height:350px; }
  .obp-planner.is-fullscreen .obp-results { position:static; }
  .obp button.obp-starter { flex-basis:min(240px,80%); }
}
@media (max-width:760px) {
  .obp { margin:1rem auto; }
  .obp-panel { padding:.85rem; }
  .obp-intro { padding:1rem; }
  .obp-fields { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .obp-layer .obp-fields { grid-template-columns:1fr; }
  .obp-result-cards { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .obp.obp-planner { width:100%; }
  .obp.obp-planner.is-fullscreen { width:100vw; }
  .obp-planner .obp-diagram { min-height:260px; }
  .obp-diagram svg { min-width:720px; }
  .obp button,.obp-product-dialog button,.obp input:not([type=checkbox]),.obp select { min-height:44px; }
  .obp-commandbar { align-items:flex-start; }
  .obp-command-actions { width:100%; }
  .obp-command-actions button { flex:1 1 145px; }
  .obp-picker-fields,.obp-technical-grid { grid-template-columns:minmax(0,1fr); }
  .obp-picker-thumbnail { width:76px; height:76px; }
}
/* The theme may place the editor in a narrower content column than the viewport. */
@container (max-width:920px) {
  .obp-editor-grid { grid-template-columns:minmax(0,1fr); }
  .obp-main,.obp-planner.is-fullscreen .obp-main,.obp-main .obp-results { position:static; }
  .obp-layer { scroll-margin-top:3.5rem; }
  .obp-mobile-summary { display:block; position:sticky; top:0; z-index:9; background:#183047; color:#fff; font-size:.78rem; font-weight:700; line-height:1.4; padding:.5rem .7rem; border-radius:8px; box-shadow:0 3px 12px rgba(20,40,56,.15); }
}
@media (max-width:440px) {
  .obp-fields { grid-template-columns:1fr; }
  .obp-result-cards { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .obp-result span { font-size:.72rem; }
  .obp-result strong { font-size:.94rem; }
  .obp-setup summary span { display:block; margin:.15rem 0 0; }
}
@page { size:A4; margin:14mm; }
@media print {
  body.obp-editor-open { overflow:visible !important; }
  body.obp-print-mode > :not(.obp-print-document) { display:none !important; }
  body.obp-print-mode .obp-print-document { display:block !important; position:static; width:100%; margin:0; padding:0; background:#fff; color:#171f27; font:10pt/1.35 Arial,sans-serif; }
  body.obp-print-mode .obp-print-header { display:flex; align-items:flex-start; justify-content:space-between; border-bottom:2px solid #8e2c32; padding-bottom:8mm; }
  body.obp-print-mode .obp-print h1 { font-size:18pt; margin:2mm 0; }
  body.obp-print-mode .obp-print h2 { font-size:12pt; margin:8mm 0 2mm; break-after:avoid; }
  body.obp-print-mode .obp-print p { margin:2mm 0; overflow-wrap:anywhere; }
  body.obp-print-mode .obp-print svg { width:100%; max-width:100%; height:auto; }
  body.obp-print-mode .obp-diagram-legend { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1mm 4mm; list-style:none; padding:2mm 0; margin:0; font-size:8pt; break-inside:avoid; }
  body.obp-print-mode .obp-diagram-legend .obp-legend-button { display:flex; align-items:flex-start; gap:2mm; border:0; background:#fff; color:#172d40; font:inherit; text-align:left; overflow-wrap:anywhere; }
  body.obp-print-mode .obp-legend-number { display:inline-block; flex:0 0 5mm; text-align:center; border:1px solid #54697a; border-radius:50%; }
  body.obp-print-mode .obp-print table { width:100%; border-collapse:collapse; font-size:8pt; table-layout:fixed; }
  body.obp-print-mode .obp-print tr { break-inside:avoid; }
  body.obp-print-mode .obp-print td,body.obp-print-mode .obp-print th { border:1px solid #aab4bb; padding:2mm; overflow-wrap:anywhere; }
  body.obp-print-mode .obp-print footer { margin-top:10mm; border-top:1px solid #9caeb8; padding-top:3mm; font-size:8pt; }
  body.obp-print-mode .obp-print .obp-table-scroll { overflow:visible; }
}