.hubos-navigator {
  --nav-bg: rgba(255,255,255,.88); --nav-panel: #fff; --nav-text: #13223a; --nav-muted: #60708a;
  --nav-line: rgba(39,55,82,.13); --nav-accent: #6657e8; --nav-accent-2: #3b82f6; --nav-soft: #f4f2ff;
  width: 100%; max-width: 760px; margin: 24px auto; color: var(--nav-text); font-family: inherit;
}
@media (prefers-color-scheme: dark) {
  .hubos-navigator { --nav-bg: rgba(17,24,39,.9); --nav-panel: #182235; --nav-text: #f7f8fc; --nav-muted: #a7b2c6; --nav-line: rgba(255,255,255,.12); --nav-soft: rgba(102,87,232,.15); }
}
html.dark .hubos-navigator,
html[data-color-mode="dark"] .hubos-navigator {
  --nav-bg: rgba(17,24,39,.94); --nav-panel: #182235; --nav-text: #f7f8fc; --nav-muted: #a7b2c6; --nav-line: rgba(255,255,255,.12); --nav-soft: rgba(102,87,232,.15);
}
html:not(.dark)[data-color-mode="light"] .hubos-navigator {
  --nav-bg: rgba(255,255,255,.88); --nav-panel: #fff; --nav-text: #13223a; --nav-muted: #60708a; --nav-line: rgba(39,55,82,.13); --nav-soft: #f4f2ff;
}
.hubos-nav-card { position: relative; overflow: hidden; padding: clamp(28px,5vw,54px); background: var(--nav-bg); border: 1px solid var(--nav-line); border-radius: 24px; box-shadow: 0 24px 70px rgba(28,35,58,.12); backdrop-filter: blur(18px); }
.hubos-nav-card:before { content:""; position:absolute; width:260px; height:260px; right:-130px; top:-140px; border-radius:50%; background:radial-gradient(circle,rgba(102,87,232,.2),transparent 68%); pointer-events:none; }
.hubos-navigator h2 { position:relative; margin: 8px 0 14px; color:var(--nav-text); font-size:clamp(27px,4vw,40px); line-height:1.16; letter-spacing:-.025em; }
.hubos-nav-eyebrow { margin:22px 0 4px; color:var(--nav-accent); font-size:12px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; }
.hubos-nav-lead { color:var(--nav-muted); font-size:17px; line-height:1.7; max-width:650px; }
.hubos-nav-mark { display:grid; place-items:center; width:48px; height:48px; border-radius:15px; color:#fff; font-weight:800; font-size:20px; background:linear-gradient(135deg,var(--nav-accent),var(--nav-accent-2)); box-shadow:0 12px 30px rgba(102,87,232,.28); }
.hubos-nav-meta { display:flex; flex-wrap:wrap; gap:10px; margin:24px 0; }
.hubos-nav-meta span,.hubos-nav-stage { padding:7px 11px; color:var(--nav-muted); background:var(--nav-soft); border-radius:999px; font-size:13px; font-weight:700; }
.hubos-nav-primary,.hubos-nav-secondary,.hubos-nav-option,.hubos-nav-link { font:inherit; cursor:pointer; }
.hubos-nav-primary { border:0; border-radius:12px; padding:14px 20px; color:#fff; background:linear-gradient(135deg,var(--nav-accent),var(--nav-accent-2)); font-weight:800; box-shadow:0 10px 24px rgba(102,87,232,.22); }
.hubos-nav-primary:disabled { opacity:.48; cursor:not-allowed; box-shadow:none; }
.hubos-nav-secondary { border:1px solid var(--nav-line); border-radius:12px; padding:13px 18px; color:var(--nav-text); background:transparent; font-weight:750; }
.hubos-nav-link { display:block; margin:18px auto 0; padding:3px; color:var(--nav-muted); background:none; border:0; text-decoration:underline; }
.hubos-nav-progress-head { display:flex; justify-content:space-between; color:var(--nav-muted); font-size:13px; font-weight:700; }
.hubos-nav-progress { height:6px; margin:9px 0 30px; overflow:hidden; background:var(--nav-line); border-radius:999px; }
.hubos-nav-progress span { display:block; height:100%; border-radius:inherit; background:linear-gradient(90deg,var(--nav-accent),var(--nav-accent-2)); transition:width .25s ease; }
.hubos-nav-options { display:grid; gap:10px; margin:26px 0; }
.hubos-nav-option { display:flex; align-items:center; gap:13px; width:100%; padding:16px 17px; color:var(--nav-text); text-align:left; line-height:1.45; background:var(--nav-panel); border:1px solid var(--nav-line); border-radius:13px; transition:.15s ease; }
.hubos-nav-option:hover,.hubos-nav-option.is-selected { border-color:var(--nav-accent); transform:translateY(-1px); box-shadow:0 8px 24px rgba(50,58,82,.08); }
.hubos-nav-option.is-selected { background:var(--nav-soft); }
.hubos-nav-radio { flex:0 0 18px; width:18px; height:18px; border:2px solid #a3adc0; border-radius:50%; }
.hubos-nav-option.is-selected .hubos-nav-radio { border:5px solid var(--nav-accent); }
.hubos-nav-buttons { display:flex; justify-content:space-between; align-items:center; gap:16px; margin-top:24px; }
.hubos-nav-result-head { display:flex; justify-content:space-between; align-items:flex-start; gap:20px; }
.hubos-nav-result-head .hubos-nav-eyebrow { margin-top:0; }
.hubos-nav-action-block,.hubos-nav-done,.hubos-nav-complete { margin:22px 0; padding:20px; border-radius:15px; }
.hubos-nav-action-block { background:linear-gradient(135deg,var(--nav-soft),transparent); border:1px solid rgba(102,87,232,.25); }
.hubos-nav-done { background:var(--nav-panel); border:1px solid var(--nav-line); }
.hubos-nav-action-block span,.hubos-nav-done span { display:block; margin-bottom:7px; color:var(--nav-muted); font-size:12px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; }
.hubos-nav-action-block p,.hubos-nav-done p,.hubos-nav-complete p { margin:0; line-height:1.62; }
.hubos-nav-complete { border:1px solid rgba(35,168,112,.3); background:rgba(35,168,112,.1); }
.hubos-nav-complete strong { display:block; margin-bottom:6px; color:#23a870; }
.hubos-nav-resources { margin:22px 0; padding:20px; background:var(--nav-panel); border:1px solid var(--nav-line); border-radius:15px; }
.hubos-nav-resources>span { display:block; margin-bottom:12px; color:var(--nav-muted); font-size:12px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; }
.hubos-nav-resources>div { display:grid; gap:9px; }
.hubos-nav-resources a { display:flex; justify-content:space-between; align-items:center; gap:16px; padding:12px 14px; color:var(--nav-text); background:var(--nav-soft); border:1px solid var(--nav-line); border-radius:10px; font-weight:750; text-decoration:none; }
.hubos-nav-resources a:hover { border-color:var(--nav-accent); color:var(--nav-accent); }
.hubos-nav-resources b { font-size:15px; }
.hubos-nav-confirm { margin:20px 0 0; padding:18px; background:var(--nav-soft); border:1px solid rgba(102,87,232,.3); border-radius:13px; }
.hubos-nav-confirm strong { display:block; margin-bottom:5px; }
.hubos-nav-confirm p { margin:0; color:var(--nav-muted); line-height:1.5; }
.hubos-nav-confirm>div { display:flex; justify-content:flex-end; gap:10px; margin-top:15px; }
.hubos-navigator.is-pathway { max-width:900px; }
.hubos-path-header { display:flex; justify-content:space-between; align-items:flex-start; gap:24px; }
.hubos-path-header .hubos-nav-eyebrow { margin-top:0; }
.hubos-path-header h2 { margin-bottom:8px; }
.hubos-path-score { flex:0 0 auto; min-width:130px; padding:15px; text-align:center; background:var(--nav-soft); border:1px solid var(--nav-line); border-radius:14px; }
.hubos-path-score strong { display:block; color:var(--nav-text); font-size:20px; }
.hubos-path-score span { color:var(--nav-muted); font-size:12px; }
.hubos-path-progress { margin:22px 0; }
.hubos-path-start { margin:0 0 25px; padding:18px 20px; background:var(--nav-panel); border:1px solid var(--nav-line); border-radius:14px; }
.hubos-path-start span,.hubos-path-destination>div>span { display:block; margin-bottom:6px; color:var(--nav-accent); font-size:12px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; }
.hubos-path-start p,.hubos-path-destination p { margin:0; color:var(--nav-muted); line-height:1.6; }
.hubos-path-list { position:relative; display:grid; gap:0; margin:0; padding:0; list-style:none; }
.hubos-path-list:before { content:""; position:absolute; top:20px; bottom:20px; left:19px; width:2px; background:var(--nav-line); }
.hubos-path-step { position:relative; display:grid; grid-template-columns:40px 1fr; gap:16px; padding:0 0 18px; }
.hubos-path-node { position:relative; z-index:1; display:grid; place-items:center; width:40px; height:40px; box-sizing:border-box; color:var(--nav-muted); background:var(--nav-panel); border:2px solid var(--nav-line); border-radius:50%; font-size:13px; font-weight:850; }
.hubos-path-step.is-complete .hubos-path-node { color:#fff; background:#23a870; border-color:#23a870; }
.hubos-path-step.is-current .hubos-path-node { color:#fff; background:linear-gradient(135deg,var(--nav-accent),var(--nav-accent-2)); border-color:transparent; box-shadow:0 8px 22px rgba(102,87,232,.28); }
.hubos-path-summary { display:flex; flex-direction:column; justify-content:center; min-height:40px; padding:0 14px; }
.hubos-path-summary span { color:var(--nav-muted); font-size:12px; }
.hubos-path-summary strong { margin-top:3px; color:var(--nav-text); font-size:15px; }
.hubos-path-step.is-complete .hubos-path-summary strong { color:var(--nav-muted); text-decoration:line-through; text-decoration-thickness:1px; }
.hubos-path-current { margin-bottom:6px; padding:22px; background:var(--nav-panel); border:2px solid rgba(102,87,232,.4); border-radius:16px; box-shadow:0 14px 38px rgba(28,35,58,.08); }
.hubos-path-current .hubos-nav-eyebrow { margin-top:0; }
.hubos-path-current h3,.hubos-path-destination h3 { margin:10px 0 8px; color:var(--nav-text); font-size:23px; line-height:1.25; }
.hubos-path-current>p { color:var(--nav-muted); line-height:1.65; }
.hubos-path-destination { display:grid; grid-template-columns:40px 1fr; gap:16px; margin-top:4px; padding-top:20px; border-top:1px solid var(--nav-line); }
.hubos-path-destination .hubos-path-node { color:#fff; background:linear-gradient(135deg,#ef8f35,#e85278); border:0; }
.hubos-path-destination>div:last-child { padding:4px 14px 0; }
.hubos-path-success { display:flex; gap:13px; margin:0 0 20px; padding:16px 18px; background:rgba(35,168,112,.1); border:1px solid rgba(35,168,112,.3); border-radius:13px; }
.hubos-path-success>span { display:grid; place-items:center; flex:0 0 28px; width:28px; height:28px; color:#fff; background:#23a870; border-radius:50%; font-weight:900; }
.hubos-path-success strong { color:#23a870; }
.hubos-path-success p { margin:3px 0 0; color:var(--nav-muted); line-height:1.5; }
.hubos-navigator.is-all-complete .hubos-path-destination { padding:22px; background:rgba(35,168,112,.08); border:1px solid rgba(35,168,112,.28); border-radius:15px; }
.hubos-nav-error { min-height:20px; margin:12px 0 0; color:#d94b55; font-size:14px; }
.hubos-nav-notice { padding:16px; border:1px solid #e0e4ec; border-radius:10px; }
@media (max-width:540px) { .hubos-nav-card{padding:25px 20px;border-radius:18px}.hubos-nav-buttons{align-items:stretch}.hubos-nav-buttons button{flex:1}.hubos-nav-result-head .hubos-nav-mark{display:none}.hubos-nav-confirm>div{align-items:stretch;flex-direction:column-reverse}.hubos-nav-confirm button{width:100%}.hubos-path-header{display:block}.hubos-path-score{margin-top:16px}.hubos-path-current{padding:18px 16px}.hubos-path-step{gap:10px}.hubos-path-summary{padding-right:0}.hubos-path-destination>div:last-child{padding-right:0} }