/* ══════════════════════════════════════════════════════════
       ONBOARDING — Refined ambient design
       ══════════════════════════════════════════════════════════ */
    .onboarding-container {
      position: fixed;
      inset: 0;
      z-index: 101;
      background: var(--bg);
      display: flex;
      flex-direction: column;
      align-items: center;
      padding: max(48px, env(safe-area-inset-top, 48px)) 24px max(24px, env(safe-area-inset-bottom, 24px));
      overflow: hidden;
    }

    /* ── Living ambient glow — dual orbs that drift ── */
    .ob-glow {
      position: absolute;
      top: 15%;
      left: 50%;
      width: 500px;
      height: 500px;
      border-radius: 50%;
      background: radial-gradient(circle, rgba(74,124,255,0.13) 0%, rgba(99,102,241,0.04) 40%, transparent 65%);
      transform: translateX(-50%);
      pointer-events: none;
      animation: obGlowDrift 12s ease-in-out infinite alternate;
    }
    .ob-glow::after {
      content: '';
      position: absolute;
      bottom: -30%;
      right: -40%;
      width: 400px;
      height: 400px;
      border-radius: 50%;
      background: radial-gradient(circle, rgba(14,165,233,0.08) 0%, rgba(99,102,241,0.03) 45%, transparent 70%);
      animation: obGlowDrift2 10s ease-in-out 1s infinite alternate;
    }
    @keyframes obGlowDrift {
      0% { transform: translateX(-50%) translateY(0); }
      100% { transform: translateX(-45%) translateY(-20px); }
    }
    @keyframes obGlowDrift2 {
      0% { transform: translateX(0) translateY(0) scale(1); }
      100% { transform: translateX(-15px) translateY(15px) scale(1.08); }
    }
    [data-theme="light"] .ob-glow {
      background: radial-gradient(circle, rgba(59,130,246,0.07) 0%, rgba(99,102,241,0.03) 40%, transparent 65%);
    }
    [data-theme="light"] .ob-glow::after {
      background: radial-gradient(circle, rgba(14,165,233,0.05) 0%, transparent 60%);
    }

    /* ── Steps container ── */
    .ob-steps {
      flex: 1;
      position: relative;
      display: flex;
      align-items: stretch;
      justify-content: center;
      overflow: hidden;
      z-index: 2;
      width: 100%;
      max-width: 400px;
    }
    .ob-step {
      position: absolute;
      inset: 0;
      display: flex;
      flex-direction: column;
      align-items: center;
      opacity: 0;
      pointer-events: none;
      transform: translateY(30px);
    }
    .ob-step.active {
      position: relative;
      opacity: 1;
      pointer-events: auto;
      transform: translateY(0);
      animation: obStepIn 0.55s var(--ease-out) both;
    }
    .ob-step.exiting {
      animation: obStepOut 0.3s ease-in both;
      pointer-events: none;
    }

    @keyframes obStepIn {
      from { opacity: 0; transform: translateY(30px) scale(0.98); }
      to { opacity: 1; transform: translateY(0) scale(1); }
    }
    @keyframes obStepOut {
      from { opacity: 1; transform: translateY(0) scale(1); }
      to { opacity: 0; transform: translateY(-20px) scale(0.98); }
    }

    /* ── Content stagger — children animate in sequence ── */
    @keyframes obContentIn {
      from { opacity: 0; transform: translateY(18px); }
      to { opacity: 1; transform: translateY(0); }
    }
    .ob-step.active .ob-logo { animation: obContentIn 0.5s var(--ease-out) 0s both; }
    .ob-step.active .ob-title { animation: obContentIn 0.5s var(--ease-out) 0.06s both; }
    .ob-step.active .ob-subtitle { animation: obContentIn 0.45s var(--ease-out) 0.12s both; }
    .ob-step.active .ob-input { animation: obContentIn 0.45s var(--ease-out) 0.18s both; }
    .ob-step.active .ob-example { animation: obContentIn 0.45s var(--ease-out) 0.14s both; }
    .ob-step.active .ob-theme-cards,
    .ob-step.active .ob-currency-grid,
    .ob-step.active .ob-categories,
    .ob-step.active .ob-nw-groups,
    .ob-step.active .ob-features { animation: obContentIn 0.5s var(--ease-out) 0.18s both; }
    .ob-step.active .ob-bottom { animation: obContentIn 0.4s var(--ease-out) 0.24s both; }

    /* ── Back button ── */
    .ob-back {
      position: absolute;
      top: 0;
      left: 0;
      z-index: 3;
      width: 40px;
      height: 40px;
      border-radius: 50%;
      border: none;
      background: rgba(255,255,255,0.06);
      color: var(--text-2);
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: background var(--duration-fast) ease, color var(--duration-fast) ease, transform var(--duration-fast) var(--ease-spring);
    }
    .ob-back:hover {
      background: rgba(255,255,255,0.1);
      color: var(--text-1);
    }
    .ob-back:active {
      transform: scale(0.9);
    }
    [data-theme="light"] .ob-back {
      background: rgba(0,0,0,0.04);
      color: var(--text-2);
    }
    [data-theme="light"] .ob-back:hover {
      background: rgba(0,0,0,0.07);
      color: var(--text-1);
    }

    /* ── Step content ── */
    .ob-content {
      flex: 1;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      max-width: 380px;
      width: 100%;
      margin: 0 auto;
    }
    .ob-content-scroll {
      justify-content: flex-start;
      overflow-y: auto;
      padding-top: 8px;
      -webkit-overflow-scrolling: touch;
      scrollbar-width: none;
    }
    .ob-content-scroll::-webkit-scrollbar { display: none; }
    .ob-logo {
      margin-bottom: 24px;
    }

    /* ── Title — gradient text on dark ── */
    .ob-title {
      font-size: 32px;
      font-weight: 700;
      color: var(--text-1);
      letter-spacing: -0.03em;
      line-height: 1.15;
      text-align: center;
      margin: 0 0 10px;
      background: linear-gradient(135deg, #e0e7ff 0%, #ffffff 40%, #c7d2fe 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
    }
    [data-theme="light"] .ob-title {
      background: linear-gradient(135deg, #1e293b 0%, #0f172a 50%, #334155 100%);
      -webkit-background-clip: text;
      background-clip: text;
    }

    .ob-subtitle {
      font-size: 15px;
      color: var(--text-3);
      line-height: var(--lh-normal);
      text-align: center;
      margin: 0 0 28px;
      max-width: 300px;
    }

    /* ── Input — refined glass ── */
    .ob-input {
      width: 100%;
      max-width: 320px;
      height: 52px;
      padding: 0 20px;
      font-size: 17px;
      font-family: var(--font-sans);
      font-weight: 500;
      color: var(--text-1);
      background: rgba(255,255,255,0.05);
      border: 1px solid rgba(255,255,255,0.08);
      border-radius: 14px;
      outline: none;
      transition: border-color var(--duration-normal) ease, background var(--duration-normal) ease, box-shadow var(--duration-normal) ease;
      text-align: center;
    }
    .ob-input:focus {
      border-color: rgba(74,124,255,0.5);
      background: rgba(255,255,255,0.08);
      box-shadow: 0 0 0 4px rgba(74,124,255,0.1), 0 0 20px rgba(74,124,255,0.08);
    }
    .ob-input::placeholder {
      color: var(--text-3);
      opacity: 0.5;
      font-weight: 400;
    }
    [data-theme="light"] .ob-input {
      background: rgba(0,0,0,0.03);
      border-color: rgba(0,0,0,0.06);
      color: var(--text-1);
    }
    [data-theme="light"] .ob-input:focus {
      background: rgba(0,0,0,0.04);
      border-color: rgba(59,130,246,0.4);
      box-shadow: 0 0 0 4px rgba(59,130,246,0.08), 0 0 16px rgba(59,130,246,0.06);
    }

    /* ── Bottom area ── */
    .ob-bottom {
      flex-shrink: 0;
      display: flex;
      flex-direction: column;
      align-items: center;
      width: 100%;
      max-width: 380px;
      margin: 0 auto;
      padding-top: 16px;
    }

    /* ── Progress track — dots on a line ── */
    .ob-progress {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 4px;
      padding: 14px 0;
      position: relative;
    }
    .ob-dot {
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background: var(--text-3);
      opacity: 0.2;
      transition: width 0.4s var(--ease-spring),
                  border-radius 0.4s var(--ease-spring),
                  background 0.3s ease,
                  opacity 0.3s ease,
                  box-shadow 0.3s ease;
      position: relative;
    }
    .ob-dot + .ob-dot { margin-left: 4px; }
    .ob-dot.active {
      width: 24px;
      border-radius: 4px;
      background: var(--blue);
      opacity: 1;
      box-shadow: 0 0 10px rgba(74,124,255,0.4);
    }
    .ob-dot.done {
      background: var(--blue);
      opacity: 0.4;
    }

    /* ── Actions ── */
    .ob-actions {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 12px;
      width: 100%;
    }

    /* ── Continue button — shimmer sweep ── */
    @keyframes obBtnShimmer {
      0% { transform: translateX(-100%) skewX(-15deg); }
      100% { transform: translateX(350%) skewX(-15deg); }
    }
    .ob-continue {
      width: 100%;
      height: 54px;
      border: none;
      border-radius: 16px;
      background: linear-gradient(135deg, #3b82f6 0%, #6366f1 50%, #0ea5e9 100%);
      color: #fff;
      font-size: 16px;
      font-weight: 600;
      font-family: var(--font-sans);
      letter-spacing: 0.02em;
      cursor: pointer;
      box-shadow: 0 4px 24px rgba(59,130,246,0.35), 0 1px 3px rgba(0,0,0,0.1);
      transition: transform var(--duration-fast) var(--ease-spring), box-shadow var(--duration-normal) ease;
      position: relative;
      overflow: hidden;
    }
    /* Top highlight */
    .ob-continue::before {
      content: '';
      position: absolute;
      inset: 0;
      border-radius: 16px;
      background: linear-gradient(180deg, rgba(255,255,255,0.18) 0%, transparent 45%);
      pointer-events: none;
    }
    /* Traveling shimmer */
    .ob-continue::after {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 40%;
      height: 100%;
      background: linear-gradient(90deg, transparent, rgba(255,255,255,0.18), transparent);
      pointer-events: none;
      animation: obBtnShimmer 4s ease-in-out 1s infinite;
    }
    .ob-continue:hover {
      box-shadow: 0 6px 32px rgba(59,130,246,0.45), 0 2px 6px rgba(0,0,0,0.08);
    }
    .ob-continue:active {
      transform: scale(0.97);
    }

    /* Finish button — emerald */
    .ob-finish {
      background: linear-gradient(135deg, #22c55e 0%, #10b981 50%, #34d399 100%) !important;
      box-shadow: 0 4px 24px rgba(34,197,94,0.35), 0 1px 3px rgba(0,0,0,0.1) !important;
    }
    .ob-finish:hover {
      box-shadow: 0 6px 32px rgba(34,197,94,0.45), 0 2px 6px rgba(0,0,0,0.08) !important;
    }

    .ob-skip {
      background: none;
      border: none;
      color: var(--text-3);
      font-size: 14px;
      font-family: var(--font-sans);
      cursor: pointer;
      padding: 8px 16px;
      border-radius: 8px;
      transition: color var(--duration-fast) ease, background var(--duration-fast) ease;
    }
    .ob-skip:hover { color: var(--text-2); background: rgba(255,255,255,0.04); }
    .ob-skip:active { opacity: 0.7; }
    [data-theme="light"] .ob-skip:hover { background: rgba(0,0,0,0.03); }

    /* ── Example callout — blue-tinted glass ── */
    .ob-example {
      width: 100%;
      padding: 14px 16px;
      border-radius: 12px;
      background: linear-gradient(135deg, rgba(74,124,255,0.08) 0%, rgba(99,102,241,0.04) 100%);
      border: 1px solid rgba(74,124,255,0.14);
      margin-bottom: 20px;
      position: relative;
      overflow: hidden;
    }
    .ob-example::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      height: 1px;
      background: linear-gradient(90deg, transparent, rgba(74,124,255,0.3), transparent);
    }
    [data-theme="light"] .ob-example {
      background: linear-gradient(135deg, rgba(59,130,246,0.06) 0%, rgba(99,102,241,0.03) 100%);
      border-color: rgba(59,130,246,0.12);
    }
    .ob-example-label {
      display: block;
      font-size: 10px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: var(--ls-spread);
      color: var(--blue);
      margin-bottom: 10px;
      opacity: 0.8;
    }
    .ob-example-flow {
      display: flex;
      align-items: center;
      gap: 6px;
      flex-wrap: wrap;
    }
    .ob-example-parent {
      font-size: 13px;
      font-weight: 700;
      color: var(--text-1);
      font-family: var(--font-sans);
      padding: 4px 10px;
      background: rgba(74,124,255,0.12);
      border-radius: 6px;
    }
    [data-theme="light"] .ob-example-parent {
      background: rgba(59,130,246,0.08);
    }
    .ob-example-arrow {
      color: var(--blue);
      flex-shrink: 0;
      opacity: 0.6;
    }
    .ob-example-child {
      font-size: 12px;
      color: var(--text-2);
      padding: 4px 10px;
      border-radius: 6px;
      background: rgba(255,255,255,0.06);
      border: 1px solid rgba(255,255,255,0.06);
      font-family: var(--font-sans);
    }
    [data-theme="light"] .ob-example-child {
      background: rgba(0,0,0,0.03);
      border-color: rgba(0,0,0,0.04);
    }

    /* ── Theme cards — with glow halo on selection ── */
    .ob-theme-cards {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 14px;
      width: 100%;
      max-width: 320px;
    }
    .ob-theme-card {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 12px;
      padding: 12px;
      border-radius: 18px;
      border: 2px solid rgba(255,255,255,0.06);
      background: rgba(255,255,255,0.03);
      cursor: pointer;
      transition: border-color var(--duration-normal) ease, background var(--duration-normal) ease, box-shadow var(--duration-normal) ease, transform var(--duration-fast) var(--ease-spring);
      position: relative;
    }
    .ob-theme-card:active { transform: scale(0.96); }
    .ob-theme-card.active {
      border-color: rgba(74,124,255,0.6);
      background: rgba(74,124,255,0.06);
      box-shadow: 0 0 24px rgba(74,124,255,0.18), 0 0 0 1px rgba(74,124,255,0.1);
    }
    /* Check badge on active card */
    .ob-theme-card.active::after {
      content: '';
      position: absolute;
      top: 8px;
      right: 8px;
      width: 22px;
      height: 22px;
      border-radius: 50%;
      background: var(--blue);
      box-shadow: 0 2px 8px rgba(74,124,255,0.4);
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
      background-size: 13px;
      background-position: center;
      background-repeat: no-repeat;
      animation: obCheckPop 0.35s var(--ease-spring) both;
    }
    @keyframes obCheckPop {
      from { transform: scale(0); opacity: 0; }
      to { transform: scale(1); opacity: 1; }
    }
    [data-theme="light"] .ob-theme-card {
      background: rgba(0,0,0,0.015);
      border-color: rgba(0,0,0,0.07);
    }
    [data-theme="light"] .ob-theme-card.active {
      border-color: rgba(59,130,246,0.5);
      background: rgba(59,130,246,0.05);
      box-shadow: 0 0 20px rgba(59,130,246,0.12), 0 0 0 1px rgba(59,130,246,0.06);
    }
    .ob-theme-label {
      font-size: 13px;
      font-family: var(--font-sans);
      color: var(--text-3);
      font-weight: 500;
      letter-spacing: 0.02em;
    }
    .ob-theme-card.active .ob-theme-label { color: var(--blue); font-weight: 600; }

    /* Mini mockup — richer depth */
    .ob-theme-preview {
      width: 100%;
      aspect-ratio: 9 / 14;
      border-radius: 12px;
      overflow: hidden;
      display: flex;
      flex-direction: column;
      padding: 10px;
      gap: 6px;
    }
    .ob-preview-dark {
      background: linear-gradient(180deg, #0a0d1a 0%, #0f1225 100%);
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.04);
    }
    .ob-preview-light {
      background: linear-gradient(180deg, #fafbfe 0%, #f1f3f8 100%);
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.8);
    }
    .ob-tp-bar {
      height: 6px;
      border-radius: 3px;
      width: 50%;
    }
    .ob-preview-dark .ob-tp-bar { background: rgba(255,255,255,0.12); }
    .ob-preview-light .ob-tp-bar { background: rgba(0,0,0,0.06); }
    .ob-tp-hero {
      height: 32%;
      border-radius: 8px;
    }
    .ob-preview-dark .ob-tp-hero { background: linear-gradient(135deg, rgba(74,124,255,0.2), rgba(99,102,241,0.1)); }
    .ob-preview-light .ob-tp-hero { background: linear-gradient(135deg, rgba(59,130,246,0.1), rgba(99,102,241,0.06)); }
    .ob-tp-rows {
      flex: 1;
      display: flex;
      flex-direction: column;
      gap: 5px;
      margin-top: 3px;
    }
    .ob-tp-row {
      height: 8px;
      border-radius: 4px;
    }
    .ob-tp-row:nth-child(1) { width: 100%; }
    .ob-tp-row:nth-child(2) { width: 85%; }
    .ob-tp-row:nth-child(3) { width: 65%; }
    .ob-preview-dark .ob-tp-row { background: rgba(255,255,255,0.05); }
    .ob-preview-light .ob-tp-row { background: rgba(0,0,0,0.035); }

    /* ── Currency grid — larger flags, glass pills ── */
    .ob-currency-grid {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      justify-content: center;
      width: 100%;
      max-width: 340px;
    }
    .ob-currency-pill {
      display: flex;
      align-items: center;
      gap: 7px;
      padding: 10px 14px;
      border-radius: 12px;
      border: 1px solid rgba(255,255,255,0.06);
      background: rgba(255,255,255,0.035);
      cursor: pointer;
      font-size: 14px;
      font-family: var(--font-sans);
      color: var(--text-2);
      transition: border-color var(--duration-normal) ease, background var(--duration-normal) ease, color var(--duration-normal) ease, box-shadow var(--duration-normal) ease, transform var(--duration-fast) var(--ease-spring);
    }
    .ob-currency-pill:active { transform: scale(0.96); }
    .ob-currency-pill.active {
      border-color: rgba(74,124,255,0.45);
      background: rgba(74,124,255,0.10);
      color: var(--text-1);
      box-shadow: 0 0 12px rgba(74,124,255,0.12);
    }
    [data-theme="light"] .ob-currency-pill {
      background: rgba(0,0,0,0.02);
      border-color: rgba(0,0,0,0.05);
    }
    [data-theme="light"] .ob-currency-pill.active {
      background: rgba(59,130,246,0.07);
      border-color: rgba(59,130,246,0.35);
      box-shadow: 0 0 10px rgba(59,130,246,0.08);
    }
    .ob-currency-flag {
      font-size: 22px;
      line-height: 1;
    }
    .ob-currency-code {
      font-weight: 600;
      font-size: 14px;
      letter-spacing: 0.02em;
    }
    .ob-currency-check {
      width: 16px;
      height: 16px;
      color: var(--blue);
      opacity: 0;
      transform: scale(0.5);
      transition: opacity var(--duration-fast) ease, transform var(--duration-normal) var(--ease-spring);
    }
    .ob-currency-pill.active .ob-currency-check {
      opacity: 1;
      transform: scale(1);
    }

    /* ── Categories — color-coded sections ── */
    .ob-categories {
      width: 100%;
      display: flex;
      flex-direction: column;
      gap: 20px;
    }
    .ob-cat-section {
      width: 100%;
      border-radius: 14px;
      padding: 14px;
      background: rgba(255,255,255,0.02);
      border: 1px solid rgba(255,255,255,0.04);
      position: relative;
      overflow: hidden;
    }
    /* Colored top accent per type */
    .ob-cat-section::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      height: 2px;
      border-radius: 14px 14px 0 0;
    }
    .ob-cat-section[data-type="Income"]::before { background: linear-gradient(90deg, #30d158, rgba(48,209,88,0.2)); }
    .ob-cat-section[data-type="Expenses"]::before { background: linear-gradient(90deg, #ff453a, rgba(255,69,58,0.2)); }
    .ob-cat-section[data-type="Savings"]::before { background: linear-gradient(90deg, #0a84ff, rgba(10,132,255,0.2)); }
    .ob-cat-section[data-type="Debt"]::before { background: linear-gradient(90deg, #ff9f0a, rgba(255,159,10,0.2)); }
    [data-theme="light"] .ob-cat-section {
      background: rgba(0,0,0,0.015);
      border-color: rgba(0,0,0,0.04);
    }
    .ob-cat-header {
      display: flex;
      align-items: center;
      gap: 8px;
      margin-bottom: 12px;
      cursor: pointer;
    }
    .ob-cat-dot {
      width: 10px;
      height: 10px;
      border-radius: 50%;
      flex-shrink: 0;
      box-shadow: 0 0 8px currentColor;
    }
    .ob-cat-section[data-type="Income"] .ob-cat-dot { background: #30d158; box-shadow: 0 0 8px rgba(48,209,88,0.4); }
    .ob-cat-section[data-type="Expenses"] .ob-cat-dot { background: #ff453a; box-shadow: 0 0 8px rgba(255,69,58,0.4); }
    .ob-cat-section[data-type="Savings"] .ob-cat-dot { background: #0a84ff; box-shadow: 0 0 8px rgba(10,132,255,0.4); }
    .ob-cat-section[data-type="Debt"] .ob-cat-dot { background: #ff9f0a; box-shadow: 0 0 8px rgba(255,159,10,0.4); }
    .ob-cat-name {
      font-size: 12px;
      font-weight: 700;
      color: var(--text-2);
      text-transform: uppercase;
      letter-spacing: var(--ls-wide);
    }
    .ob-cat-count {
      font-size: 10px;
      color: var(--text-3);
      margin-left: auto;
      background: rgba(255,255,255,0.06);
      padding: 2px 7px;
      border-radius: 10px;
    }
    [data-theme="light"] .ob-cat-count { background: rgba(0,0,0,0.04); }
    .ob-cat-chevron {
      width: 14px;
      height: 14px;
      color: var(--text-3);
      transition: transform var(--duration-normal) var(--ease-out);
      flex-shrink: 0;
    }
    .ob-cat-section.collapsed .ob-cat-chevron {
      transform: rotate(-90deg);
    }
    .ob-cat-section.collapsed .ob-cat-parents {
      display: none;
    }

    /* Parent category groups */
    .ob-cat-parents {
      display: flex;
      flex-direction: column;
      gap: 10px;
    }
    .ob-cat-parent {
      background: rgba(255,255,255,0.03);
      border: 1px solid rgba(255,255,255,0.05);
      border-radius: 10px;
      padding: 10px 12px;
    }
    [data-theme="light"] .ob-cat-parent {
      background: rgba(0,0,0,0.02);
      border-color: rgba(0,0,0,0.04);
    }
    .ob-cat-parent-header {
      display: flex;
      align-items: center;
      gap: 6px;
      margin-bottom: 8px;
    }
    .ob-cat-parent-name {
      font-size: 13px;
      font-weight: 700;
      color: var(--text-1);
      font-family: var(--font-sans);
    }
    .ob-cat-parent-count {
      font-size: 10px;
      color: var(--text-3);
      margin-left: auto;
    }

    /* Subcategory chips */
    .ob-cat-chips {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
      margin-bottom: 8px;
    }
    .ob-chip {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      padding: 5px 10px;
      border-radius: 8px;
      background: rgba(255,255,255,0.05);
      border: 1px solid rgba(255,255,255,0.06);
      font-size: 12px;
      font-family: var(--font-sans);
      color: var(--text-2);
      animation: obChipIn 0.3s var(--ease-spring) both;
    }
    [data-theme="light"] .ob-chip {
      background: rgba(0,0,0,0.03);
      border-color: rgba(0,0,0,0.04);
    }
    @keyframes obChipIn {
      from { opacity: 0; transform: scale(0.85); }
      to { opacity: 1; transform: scale(1); }
    }
    .ob-chip-x {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 15px;
      height: 15px;
      border-radius: 50%;
      background: transparent;
      border: none;
      color: var(--text-3);
      cursor: pointer;
      padding: 0;
      font-size: 13px;
      line-height: 1;
      transition: color var(--duration-fast) ease, background var(--duration-fast) ease;
      opacity: 0.6;
    }
    .ob-chip-x:hover {
      opacity: 1;
      color: var(--red);
      background: rgba(248,113,113,0.12);
    }
    .ob-cat-add {
      display: flex;
      align-items: center;
      gap: 6px;
    }
    .ob-cat-add-input {
      flex: 1;
      height: 32px;
      padding: 0 10px;
      font-size: 12px;
      font-family: var(--font-sans);
      color: var(--text-1);
      background: rgba(255,255,255,0.04);
      border: 1px solid transparent;
      border-radius: 8px;
      outline: none;
      transition: border-color var(--duration-fast) ease, background var(--duration-fast) ease, box-shadow var(--duration-fast) ease;
    }
    .ob-cat-add-input:focus {
      border-color: rgba(255,255,255,0.1);
      background: rgba(255,255,255,0.06);
      box-shadow: 0 0 0 3px rgba(74,124,255,0.06);
    }
    .ob-cat-add-input::placeholder {
      color: var(--text-3);
      opacity: 0.4;
    }
    [data-theme="light"] .ob-cat-add-input {
      background: rgba(0,0,0,0.02);
    }
    [data-theme="light"] .ob-cat-add-input:focus {
      background: rgba(0,0,0,0.04);
      border-color: rgba(0,0,0,0.06);
    }

    /* Add parent category row */
    .ob-cat-add-parent {
      margin-top: 6px;
      padding: 4px 0;
    }
    .ob-cat-add-parent .ob-cat-add-input {
      width: 100%;
      border: 1px dashed rgba(255,255,255,0.08);
      border-radius: 8px;
      font-weight: 500;
    }
    .ob-cat-add-parent .ob-cat-add-input::placeholder {
      color: var(--text-3);
      opacity: 0.5;
    }
    [data-theme="light"] .ob-cat-add-parent .ob-cat-add-input {
      border-color: rgba(0,0,0,0.08);
    }

    /* ── Features overview (Step 7) — unique colors per feature ── */
    .ob-features {
      width: 100%;
      display: flex;
      flex-direction: column;
      gap: 10px;
      max-width: 340px;
    }
    .ob-feature {
      display: flex;
      align-items: center;
      gap: 14px;
      padding: 14px 16px;
      border-radius: 14px;
      background: rgba(255,255,255,0.03);
      border: 1px solid rgba(255,255,255,0.05);
      animation: obFeatureIn 0.5s var(--ease-out) both;
      transition: background var(--duration-fast) ease;
      position: relative;
      overflow: hidden;
    }
    /* Subtle left accent per feature */
    .ob-feature::before {
      content: '';
      position: absolute;
      left: 0;
      top: 8px;
      bottom: 8px;
      width: 3px;
      border-radius: 0 3px 3px 0;
    }
    .ob-feature:nth-child(1)::before { background: var(--emerald); }
    .ob-feature:nth-child(2)::before { background: var(--blue); }
    .ob-feature:nth-child(3)::before { background: #a78bfa; }
    .ob-feature:nth-child(4)::before { background: var(--amber); }
    .ob-feature:nth-child(1) { animation-delay: 0.08s; }
    .ob-feature:nth-child(2) { animation-delay: 0.16s; }
    .ob-feature:nth-child(3) { animation-delay: 0.24s; }
    .ob-feature:nth-child(4) { animation-delay: 0.32s; }
    [data-theme="light"] .ob-feature {
      background: rgba(0,0,0,0.02);
      border-color: rgba(0,0,0,0.04);
    }
    @keyframes obFeatureIn {
      from { opacity: 0; transform: translateX(-12px); }
      to { opacity: 1; transform: translateX(0); }
    }
    .ob-feature-icon {
      width: 42px;
      height: 42px;
      border-radius: 11px;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
    }
    /* Per-feature icon colors */
    .ob-feature:nth-child(1) .ob-feature-icon {
      background: rgba(48,209,88,0.12);
    }
    .ob-feature:nth-child(1) .ob-feature-icon svg { color: var(--emerald); }
    .ob-feature:nth-child(2) .ob-feature-icon {
      background: rgba(74,124,255,0.12);
    }
    .ob-feature:nth-child(2) .ob-feature-icon svg { color: var(--blue); }
    .ob-feature:nth-child(3) .ob-feature-icon {
      background: rgba(167,139,250,0.12);
    }
    .ob-feature:nth-child(3) .ob-feature-icon svg { color: #a78bfa; }
    .ob-feature:nth-child(4) .ob-feature-icon {
      background: rgba(232,164,53,0.12);
    }
    .ob-feature:nth-child(4) .ob-feature-icon svg { color: var(--amber); }
    .ob-feature-icon svg {
      width: 20px;
      height: 20px;
    }
    .ob-feature-text {
      display: flex;
      flex-direction: column;
      gap: 3px;
    }
    .ob-feature-title {
      font-size: 14px;
      font-weight: 650;
      color: var(--text-1);
      font-family: var(--font-sans);
      letter-spacing: -0.01em;
    }
    .ob-feature-desc {
      font-size: 12px;
      color: var(--text-3);
      line-height: var(--lh-normal);
      font-family: var(--font-sans);
    }

    @media (prefers-reduced-motion: reduce) {
      .ob-feature { animation: none; opacity: 1; transform: none; }
    }

    /* ── Net Worth Groups — gradient icons, accent items ── */
    .ob-nw-groups {
      width: 100%;
      display: flex;
      flex-direction: column;
      gap: 14px;
    }
    .ob-nw-group {
      width: 100%;
      background: rgba(255,255,255,0.025);
      border: 1px solid rgba(255,255,255,0.05);
      border-radius: 14px;
      padding: 14px;
      position: relative;
      overflow: hidden;
    }
    [data-theme="light"] .ob-nw-group {
      background: rgba(0,0,0,0.015);
      border-color: rgba(0,0,0,0.04);
    }
    .ob-nw-group-header {
      display: flex;
      align-items: center;
      gap: 10px;
      margin-bottom: 10px;
    }
    .ob-nw-group-icon {
      width: 32px;
      height: 32px;
      border-radius: 9px;
      background: linear-gradient(135deg, rgba(74,124,255,0.18) 0%, rgba(99,102,241,0.10) 100%);
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
    }
    .ob-nw-group-icon svg {
      width: 15px;
      height: 15px;
      color: var(--blue);
    }
    .ob-nw-group.ob-nw-liability .ob-nw-group-icon {
      background: linear-gradient(135deg, rgba(255,69,58,0.18) 0%, rgba(255,159,10,0.08) 100%);
    }
    .ob-nw-group.ob-nw-liability .ob-nw-group-icon svg {
      color: var(--red);
    }
    .ob-nw-group-name {
      font-size: 14px;
      font-weight: 650;
      color: var(--text-1);
      font-family: var(--font-sans);
      letter-spacing: -0.01em;
    }
    .ob-nw-group-count {
      font-size: 10px;
      color: var(--text-3);
      margin-left: auto;
      background: rgba(255,255,255,0.06);
      padding: 2px 7px;
      border-radius: 10px;
    }
    [data-theme="light"] .ob-nw-group-count { background: rgba(0,0,0,0.04); }
    .ob-nw-group-remove {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 22px;
      height: 22px;
      border-radius: 50%;
      border: none;
      background: transparent;
      color: var(--text-3);
      font-size: 15px;
      line-height: 1;
      cursor: pointer;
      padding: 0;
      opacity: 0.4;
      transition: opacity var(--duration-fast) ease, color var(--duration-fast) ease, background var(--duration-fast) ease;
    }
    .ob-nw-group-remove:hover {
      opacity: 1;
      color: var(--red);
      background: rgba(248,113,113,0.12);
    }

    /* Items within a group */
    .ob-nw-items {
      display: flex;
      flex-direction: column;
      gap: 6px;
      margin-bottom: 10px;
    }
    .ob-nw-item {
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 8px 10px 8px 12px;
      border-radius: 10px;
      background: rgba(255,255,255,0.035);
      border: 1px solid rgba(255,255,255,0.05);
      animation: obChipIn 0.3s var(--ease-spring) both;
      position: relative;
    }
    /* Left accent bar */
    .ob-nw-item::before {
      content: '';
      position: absolute;
      left: 0;
      top: 6px;
      bottom: 6px;
      width: 2px;
      border-radius: 0 2px 2px 0;
      background: var(--blue);
      opacity: 0.4;
    }
    .ob-nw-group.ob-nw-liability .ob-nw-item::before {
      background: var(--red);
    }
    [data-theme="light"] .ob-nw-item {
      background: rgba(0,0,0,0.02);
      border-color: rgba(0,0,0,0.04);
    }
    .ob-nw-item-name {
      font-size: 13px;
      font-family: var(--font-sans);
      font-weight: 500;
      color: var(--text-1);
      flex: 1;
      min-width: 0;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .ob-nw-item-balance {
      width: 110px;
      height: 32px;
      padding: 0 8px;
      font-size: 13px;
      font-family: var(--font-mono);
      color: var(--text-1);
      background: rgba(255,255,255,0.04);
      border: 1px solid transparent;
      border-radius: 8px;
      outline: none;
      text-align: right;
      flex-shrink: 0;
      transition: border-color var(--duration-fast) ease, background var(--duration-fast) ease, box-shadow var(--duration-fast) ease;
    }
    .ob-nw-item-balance:focus {
      border-color: rgba(74,124,255,0.4);
      background: rgba(255,255,255,0.06);
      box-shadow: 0 0 0 3px rgba(74,124,255,0.08), 0 0 12px rgba(74,124,255,0.06);
    }
    .ob-nw-item-balance::placeholder {
      color: var(--text-3);
      opacity: 0.4;
      font-family: var(--font-sans);
    }
    [data-theme="light"] .ob-nw-item-balance {
      background: rgba(0,0,0,0.02);
    }
    [data-theme="light"] .ob-nw-item-balance:focus {
      background: rgba(0,0,0,0.03);
      border-color: rgba(59,130,246,0.3);
    }

    /* Add item row within group */
    .ob-nw-add {
      display: flex;
      align-items: center;
      gap: 6px;
    }
    .ob-nw-add-input {
      flex: 1;
      height: 34px;
      padding: 0 10px;
      font-size: 12px;
      font-family: var(--font-sans);
      color: var(--text-1);
      background: rgba(255,255,255,0.03);
      border: 1px solid transparent;
      border-radius: 8px;
      outline: none;
      transition: border-color var(--duration-fast) ease, background var(--duration-fast) ease, box-shadow var(--duration-fast) ease;
    }
    .ob-nw-add-input:focus {
      border-color: rgba(255,255,255,0.08);
      background: rgba(255,255,255,0.05);
      box-shadow: 0 0 0 3px rgba(74,124,255,0.06);
    }
    .ob-nw-add-input::placeholder {
      color: var(--text-3);
      opacity: 0.4;
    }
    [data-theme="light"] .ob-nw-add-input {
      background: rgba(0,0,0,0.02);
    }
    [data-theme="light"] .ob-nw-add-input:focus {
      background: rgba(0,0,0,0.03);
      border-color: rgba(0,0,0,0.06);
    }
    .ob-nw-add-btn {
      width: 34px;
      height: 34px;
      border-radius: 9px;
      border: 1px solid rgba(255,255,255,0.06);
      background: rgba(255,255,255,0.04);
      color: var(--text-3);
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      transition: background var(--duration-fast) ease, border-color var(--duration-fast) ease, color var(--duration-fast) ease, transform var(--duration-fast) var(--ease-spring);
    }
    .ob-nw-add-btn:hover {
      background: rgba(74,124,255,0.1);
      border-color: rgba(74,124,255,0.3);
      color: var(--blue);
    }
    .ob-nw-add-btn:active { transform: scale(0.9); }
    [data-theme="light"] .ob-nw-add-btn {
      background: rgba(0,0,0,0.025);
      border-color: rgba(0,0,0,0.05);
    }
    [data-theme="light"] .ob-nw-add-btn:hover {
      background: rgba(59,130,246,0.08);
      border-color: rgba(59,130,246,0.2);
    }

    /* Add category row */
    .ob-nw-add-group {
      display: flex;
      align-items: center;
      gap: 6px;
      padding: 10px 14px;
      border-radius: 14px;
      border: 1px dashed rgba(255,255,255,0.08);
      background: transparent;
      transition: border-color var(--duration-fast) ease, background var(--duration-fast) ease;
    }
    .ob-nw-add-group:focus-within {
      border-color: rgba(74,124,255,0.2);
      background: rgba(74,124,255,0.02);
    }
    [data-theme="light"] .ob-nw-add-group {
      border-color: rgba(0,0,0,0.08);
    }
    [data-theme="light"] .ob-nw-add-group:focus-within {
      border-color: rgba(59,130,246,0.2);
      background: rgba(59,130,246,0.02);
    }
    .ob-nw-add-group-input {
      font-weight: 500;
    }
    .ob-nw-add-group-input::placeholder {
      color: var(--text-3);
      opacity: 0.5;
    }

    /* ── Reduced motion ── */
    @media (prefers-reduced-motion: reduce) {
      .ob-glow { animation: none; }
      .ob-glow::after { animation: none; }
      .ob-step.active { animation: none; opacity: 1; transform: none; }
      .ob-step.exiting { animation: none; opacity: 0; }
      .ob-step.active .ob-logo,
      .ob-step.active .ob-title,
      .ob-step.active .ob-subtitle,
      .ob-step.active .ob-input,
      .ob-step.active .ob-example,
      .ob-step.active .ob-theme-cards,
      .ob-step.active .ob-currency-grid,
      .ob-step.active .ob-categories,
      .ob-step.active .ob-nw-groups,
      .ob-step.active .ob-features,
      .ob-step.active .ob-bottom { animation: none; opacity: 1; transform: none; }
      .ob-chip { animation: none; opacity: 1; transform: none; }
      .ob-nw-item { animation: none; opacity: 1; transform: none; }
      .ob-feature { animation: none; opacity: 1; transform: none; }
      .ob-continue::after { animation: none; }
      .ob-theme-card.active::after { animation: none; }
      .ob-dot { transition: none; }
    }