.onb-wrap {
      min-height: calc(100vh - 68px);
      padding: 40px 20px 80px;
      background: var(--bg);
    }
    .onb-card {
      background: #fff; border-radius: var(--radius); box-shadow: var(--shadow-lg);
      padding: 40px; max-width: 720px; margin: 0 auto;
    }
    .onb-header { text-align: center; margin-bottom: 32px; }
    .onb-header h1 { font-size: 1.9rem; margin-bottom: 8px; }
    .onb-header p { color: var(--text-light); font-size: 1rem; max-width: 520px; margin: 0 auto; }
    .onb-progress {
      display: flex; gap: 6px; justify-content: center; margin: 24px 0 8px;
    }
    .onb-progress span {
      width: 36px; height: 6px; border-radius: 3px; background: var(--border);
      transition: background .25s;
    }
    .onb-progress span.active { background: var(--primary-light); }
    .onb-progress span.done { background: var(--success, #2a7d59); }

    .onb-step { display: none; animation: fadeSlide .35s ease; }
    .onb-step.active { display: block; }
    @keyframes fadeSlide {
      from { opacity: 0; transform: translateY(10px); }
      to   { opacity: 1; transform: translateY(0); }
    }

    .onb-step h2 {
      font-size: 1.4rem; margin-bottom: 8px;
    }
    .onb-step .step-hint {
      color: var(--text-light); margin-bottom: 24px; font-size: .95rem;
    }

    .onb-options {
      display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 16px;
    }
    .onb-options.single { grid-template-columns: 1fr; }
    .onb-opt {
      background: var(--bg-subtle); border: 2px solid var(--border);
      border-radius: var(--radius-sm); padding: 16px 18px;
      cursor: pointer; font-weight: 600; color: var(--text-dark, #1b2620);
      transition: all .2s; text-align: left; font-family: var(--font);
      font-size: .98rem;
    }
    .onb-opt:hover {
      border-color: var(--primary-light); background: #fff;
      transform: translateY(-1px);
    }
    .onb-opt.selected {
      border-color: var(--primary-light);
      background: #eef4e8;
      box-shadow: 0 0 0 3px rgba(29,107,74,.15);
    }
    .onb-opt .opt-sub {
      display: block; font-size: .82rem; font-weight: 500;
      color: var(--text-light); margin-top: 4px;
    }

    .onb-field { margin: 12px 0; }
    .onb-field label {
      display: block; font-size: .85rem; font-weight: 600;
      color: var(--text-light); margin-bottom: 6px;
    }
    .onb-field input[type="text"],
    .onb-field input[type="email"],
    .onb-field input[type="date"] {
      width: 100%; padding: 12px 16px; border: 1px solid var(--border);
      border-radius: var(--radius-sm); font-size: 1rem; font-family: var(--font);
      transition: border-color .2s;
    }
    .onb-field input[type="text"]:focus,
    .onb-field input[type="email"]:focus,
    .onb-field input[type="date"]:focus {
      outline: none; border-color: var(--primary-light);
      box-shadow: 0 0 0 3px rgba(29,107,74,.15);
    }
    .onb-field-row {
      display: grid; grid-template-columns: 1fr 1fr; gap: 12px;
    }
    @media (max-width: 560px) {
      .onb-field-row { grid-template-columns: 1fr; }
    }
    .onb-consent {
      display: flex; align-items: flex-start; gap: 10px;
      padding: 14px 16px; background:var(--bg-subtle); border:1px solid var(--border);
      border-radius: var(--radius-sm); margin-top: 14px; cursor: pointer;
    }
    .onb-consent input[type="checkbox"] {
      width: 20px; height: 20px; flex-shrink: 0; margin-top: 2px;
      accent-color: var(--primary-light);
    }
    .onb-consent__text { font-size: .92rem; color: var(--text-dark, #1b2620); line-height: 1.45; }
    .onb-consent__text small { display:block; color: var(--text-light); font-size: .78rem; margin-top: 4px; }

    .onb-nav {
      display: flex; justify-content: space-between; gap: 12px;
      margin-top: 24px; padding-top: 24px; border-top: 1px solid var(--border);
    }
    .onb-nav .btn:disabled {
      opacity: .5; cursor: not-allowed;
    }
    .onb-hint {
      font-size: .82rem; color: var(--text-light);
      text-align: right; margin: 8px 0 -6px;
    }
    .onb-skip {
      background: transparent; color: var(--text-light); border: none;
      font-size: .9rem; cursor: pointer; font-family: var(--font);
    }
    .onb-skip:hover { color: var(--primary-light); text-decoration: underline; }

    /* conditional panel */
    .conditional { display: none; margin-top: 16px; padding-top: 16px;
                   border-top: 1px dashed var(--border); }
    .conditional.show { display: block; }

    @media (max-width: 560px) {
      .onb-card { padding: 28px 22px; }
      .onb-options { grid-template-columns: 1fr; }
      .onb-header h1 { font-size: 1.5rem; }
    }