.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:min(1600px,calc(100vw - 32px)); max-width:none; position:relative; left:50%; transform:translateX(-50%); margin:1rem 0; }
.obp-commandbar { display:flex; align-items:center; justify-content:space-between; gap:.8rem; flex-wrap:wrap; background:#183047; color:#fff; border-radius:12px; padding:.65rem 1rem; 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:.8rem; line-height:1.4; }
.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; height:100vh; height:100dvh; display:flex; flex-direction:column; overflow:hidden; overscroll-behavior:contain; margin:0; padding:.65rem max(.65rem,env(safe-area-inset-right)) 1rem 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; overflow-y:auto; overscroll-behavior:contain; align-content:start; }
.obp-planner.is-fullscreen .obp-results { position:sticky; top:0; z-index:10; 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:.65rem; align-items:start; margin-top:.65rem; }
.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:.8rem 1rem; }
.obp-planner .obp-starters h3 { font-size:.92rem; margin-bottom:.35rem; }
.obp-starter-grid { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:.5rem; }
.obp button.obp-starter { display:block; width:100%; padding:.45rem .6rem; background:#fff; color:var(--obp-ink); text-align:left; border:1px solid #b6c9d2; min-height:76px; }
.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:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.obp-starter small { font-weight:400; margin-top:.1rem; color:#52677a; font-size:.72rem; }
.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 .85rem !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:.85rem; }
.obp-editor { display:grid; grid-template-columns:minmax(0,1.8fr) minmax(330px,1fr); gap:.65rem; align-items:start; min-width:0; }
.obp-mobile-summary { display:none; }
.obp-planner .obp-diagram-panel { background:#f7f9fa; display:flex; flex-direction:column; min-height:clamp(430px,66vh,800px); }
.obp-planner .obp-layer-panel { overflow-y:auto; max-height:clamp(430px,66vh,800px); overscroll-behavior:contain; scrollbar-gutter:stable; }
.obp-diagram-panel { background:#f7f9fa; }
.obp-section-head { display:flex; align-items:center; justify-content:space-between; gap:.6rem; flex-wrap:wrap; margin-bottom:.8rem; }
.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(190px,1fr)); gap:.85rem; 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,.obp-dialog-pagination 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:1; display:flex; align-items:center; min-height:330px; }
.obp-diagram svg { display:block; width:100%; min-width:720px; height:auto; max-width:none; }
.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-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:.5rem; }
.obp-layer { border:1px solid #c5d2dc; border-left:4px solid #9d383d; border-radius:8px; padding:.55rem .65rem; background:#fff; }
.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:.5rem; margin-bottom:.65rem; }
.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 details { border-top:1px solid #dce5ea; margin-top:.7rem; padding-top:.55rem; }
.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(6,minmax(0,1fr)); gap:.45rem; }
.obp-result { background:#f2f6f8; border-radius:9px; padding:.5rem .6rem; min-width:0; }
.obp-result span,.obp-result strong,.obp-result small { display:block; overflow-wrap:anywhere; }
.obp-result span { font-size:.8rem; color:#516676; }
.obp-result strong { font-size:1.05rem; margin:.15rem 0; }
.obp-result small { color:#7e3034; font-size:.75rem; }
.obp-result-details { margin-top:.5rem; }
.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-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-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-dialog-pagination { display:flex; align-items:center; justify-content:center; gap:.7rem; margin:1rem 0 0; }
.obp-print { display:none; }
@media (max-width:1250px) {
  .obp-result-cards { grid-template-columns:repeat(3,minmax(0,1fr)); }
}
@media (max-width:920px) {
  .obp-editor { grid-template-columns:1fr; }
  .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-starter-grid { display:flex; overflow-x:auto; padding:2px; }
  .obp button.obp-starter { flex:0 0 195px; }
}
@media (max-width:760px) {
  .obp { margin:1rem auto; }
  .obp-workspace { display:grid; }
  .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:calc(100vw - 16px); }
  .obp-planner .obp-diagram { min-height:260px; }
  .obp-commandbar { align-items:flex-start; }
  .obp-command-actions { width:100%; }
  .obp-command-actions button { flex:1 1 145px; }
}
@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-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; }
}