/* Armá tu once */
.ob-grid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:30px;align-items:start;margin-bottom:60px}
.ob-left{position:sticky;top:96px;min-width:0}
.ob-forms{max-width:100%;display:flex;gap:8px;overflow-x:auto;padding:2px 2px 12px;scrollbar-width:thin}
.ob-forms .hub-chip{flex:none}
.ob-pitch{border:1px solid var(--line-2);border-radius:22px;background:#0b241d;overflow:hidden;box-shadow:0 34px 80px -36px rgba(0,229,190,.35)}
#obSvg{display:block;width:100%;height:auto;touch-action:none;user-select:none;-webkit-user-select:none}
.ob-p{cursor:grab}
.ob-p.drag{cursor:grabbing}
.ob-hit{fill:transparent}
.ob-dot{fill:#00e5be;stroke:rgba(4,20,15,.8);stroke-width:.6;transition:r .15s}
.ob-p:hover .ob-dot,.ob-p.drag .ob-dot{r:4.3;fill:#4fe9d0}
.ob-n{font:700 3.5px 'Space Grotesk',sans-serif;fill:#04140f;text-anchor:middle;pointer-events:none}
.ob-nm{font:600 3.1px 'Inter',sans-serif;fill:#f4f8fc;text-anchor:middle;pointer-events:none;paint-order:stroke;stroke:rgba(5,12,20,.9);stroke-width:.9px;stroke-linejoin:round}
.ob-hint{margin:0;padding:11px 14px;color:var(--muted);font-size:12.5px;background:rgba(5,12,20,.7);border-top:1px solid var(--line);display:flex;gap:9px;align-items:center}
.ob-hint i{color:var(--cyan)}
.ob-card{border:1px solid var(--line);border-radius:20px;background:var(--glass);padding:22px;margin-bottom:18px}
.ob-card h2{display:flex;align-items:center;gap:12px;font:600 19px 'Space Grotesk',sans-serif;margin-bottom:16px}
.ob-card h2 span{width:28px;height:28px;border-radius:50%;background:var(--grad);color:#04140f;display:grid;place-items:center;font-size:14px}
.ob-field{display:grid;gap:7px;margin-bottom:14px}
.ob-field span{font-size:12px;color:var(--dim);letter-spacing:.06em;text-transform:uppercase}
.ob-field input,.ob-name input{width:100%;padding:12px 14px;border-radius:12px;border:1px solid var(--line-2);background:rgba(255,255,255,.05);color:var(--ink);font:400 15px 'Inter',sans-serif;outline:none;transition:border-color .2s}
.ob-field input:focus,.ob-name input:focus{border-color:var(--cyan)}
.ob-names{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}
.ob-name{display:grid;grid-template-columns:22px 38px minmax(0,1fr);gap:8px;align-items:center}
.ob-name b{color:var(--cyan);font:700 13px 'Space Grotesk',sans-serif;text-align:center}
.ob-name em{font-style:normal;color:var(--dim);font-size:11px;letter-spacing:.06em}
.ob-name input{padding:10px 12px;font-size:14px}
.ob-trait{display:grid;gap:8px;margin-bottom:14px}
.ob-trait>span{font:600 13px 'Inter',sans-serif;color:var(--muted)}
.seg{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
.seg button{padding:11px 8px;border-radius:12px;border:1px solid var(--line);background:rgba(255,255,255,.04);color:var(--muted);font:500 13px 'Inter',sans-serif;cursor:pointer;transition:all .18s}
.seg button:hover{color:var(--ink);border-color:var(--line-2)}
.seg button.on{background:rgba(0,229,190,.14);border-color:var(--cyan);color:var(--cyan);font-weight:600}
.ob-result{background:linear-gradient(135deg,rgba(0,229,190,.08),rgba(139,123,255,.06));border-color:var(--line-2)}
.ob-profile{color:var(--ink);font-size:16px;line-height:1.6;margin-bottom:18px}
.ob-match{margin-bottom:14px}
.ob-match-h{display:flex;align-items:baseline;gap:10px;margin-bottom:7px}
.ob-match-h b{font:600 17px 'Space Grotesk',sans-serif}
.ob-match-h span{color:var(--dim);font-size:12.5px;flex:1}
.ob-match-h em{font:700 18px 'Space Grotesk',sans-serif;font-style:normal;color:var(--cyan)}
.ob-match.top .ob-match-h b{font-size:22px}
.ob-match.top .ob-match-h em{font-size:24px}
.bar{height:8px;border-radius:8px;background:rgba(255,255,255,.08);overflow:hidden}
.bar i{display:block;height:100%;border-radius:8px;background:var(--grad);transition:width .5s cubic-bezier(.2,.75,.2,1)}
.ob-match a{display:inline-flex;gap:8px;align-items:center;margin-top:9px;color:var(--gold);font:600 13px 'Space Grotesk',sans-serif}
.ob-note{color:var(--dim);font-size:12px;margin-top:6px;line-height:1.5}
.ob-actions{display:flex;flex-wrap:wrap;gap:10px}
.ob-modal{position:fixed;inset:0;z-index:99999;background:rgba(3,9,19,.82);backdrop-filter:blur(8px);display:flex;align-items:center;justify-content:center;padding:16px;overflow-y:auto}
.ob-modal[hidden]{display:none}
.ob-modal-in{position:relative;width:100%;max-width:520px;margin:auto;padding:22px;border-radius:22px;border:1px solid var(--line-2);background:linear-gradient(165deg,#10233f,#0a1628);text-align:center}
.ob-x{position:absolute;top:12px;right:12px;width:36px;height:36px;border-radius:50%;border:1px solid var(--line);background:rgba(255,255,255,.05);color:var(--ink);cursor:pointer}
.ob-fmt{display:flex;gap:8px;justify-content:center;margin:6px 0 16px}
#obImg{width:100%;max-height:62vh;object-fit:contain;border-radius:14px;border:1px solid var(--line);background:#050811}
.ob-modal-actions{display:flex;gap:10px;justify-content:center;margin:16px 0 12px;flex-wrap:wrap}
.ob-modal-cta{color:var(--muted);font-size:13.5px;line-height:1.55}
.ob-modal-cta a{color:var(--cyan);text-decoration:underline;text-underline-offset:3px}
@media(max-width:1020px){.ob-grid{grid-template-columns:minmax(0,1fr)}.ob-left{position:static}}
@media(max-width:520px){.ob-names{grid-template-columns:1fr}.seg button{font-size:12px;padding:10px 6px}.ob-card{padding:18px}}