*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

    :root {
      --primary: #6c63ff;
      --primary-dark: #4f46e5;
      --primary-glow: rgba(108,99,255,.15);
      --success: #22c55e;
      --danger: #ef4444;
      --text: #0f172a;
      --text-muted: #64748b;
      --border: #e2e8f0;
      --input-bg: #f8fafc;
      --card: #ffffff;
      --radius: 16px;
    }

    html, body {
      min-height: 100%;
      font-family: 'Inter', sans-serif;
      background: linear-gradient(135deg, #0f0c29 0%, #302b63 55%, #24243e 100%);
      color: var(--text);
    }

    .reg-page {
      min-height: 100vh;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: flex-start;
      padding: 48px 20px 64px;
      position: relative;
    }
    .reg-page::before {
      content: '';
      position: fixed; inset: 0;
      background:
        radial-gradient(ellipse at 15% 50%, rgba(108,99,255,.18) 0%, transparent 55%),
        radial-gradient(ellipse at 85% 15%, rgba(79,70,229,.12) 0%, transparent 50%);
      pointer-events: none;
      z-index: 0;
    }

    .reg-brand {
      text-align: center;
      margin-bottom: 30px;
      position: relative; z-index: 1;
    }
    .reg-brand img {
      width: 58px; height: 58px;
      border-radius: 18px;
      box-shadow: 0 8px 28px rgba(108,99,255,.45);
      margin-bottom: 14px;
    }
    .reg-brand h1 { font-size: 23px; font-weight: 800; color: #fff; letter-spacing: -.5px; }
    .reg-brand p { font-size: 13.5px; color: rgba(255,255,255,.55); margin-top: 5px; }

    .step-bar {
      display: flex;
      align-items: center;
      justify-content: center;
      margin-bottom: 26px;
      width: 100%; max-width: 540px;
      position: relative; z-index: 1;
    }
    .sb-step {
      display: flex; flex-direction: column; align-items: center; gap: 7px;
      position: relative; z-index: 1; flex: 1;
    }
    .sb-circle {
      width: 40px; height: 40px; border-radius: 50%;
      border: 2px solid rgba(255,255,255,.2);
      background: rgba(255,255,255,.07);
      display: flex; align-items: center; justify-content: center;
      font-size: 13px; font-weight: 700; color: rgba(255,255,255,.45);
      transition: all .3s; backdrop-filter: blur(6px);
    }
    .sb-label { font-size: 10.5px; font-weight: 500; color: rgba(255,255,255,.4); white-space: nowrap; transition: color .3s; }
    .sb-step.active .sb-circle {
      background: var(--primary); border-color: var(--primary); color: #fff;
      box-shadow: 0 0 0 5px rgba(108,99,255,.25), 0 4px 18px rgba(108,99,255,.5);
    }
    .sb-step.active .sb-label { color: #fff; font-weight: 600; }
    .sb-step.done .sb-circle { background: var(--success); border-color: var(--success); color: #fff; box-shadow: 0 0 0 4px rgba(34,197,94,.2); }
    .sb-step.done .sb-label { color: rgba(255,255,255,.55); }
    .sb-line { flex: 1; height: 2px; background: rgba(255,255,255,.12); margin-bottom: 26px; transition: background .3s; }
    .sb-line.done { background: var(--success); }

    .reg-card {
      background: var(--card);
      border-radius: 24px;
      box-shadow: 0 28px 72px rgba(0,0,0,.28), 0 1px 0 rgba(255,255,255,.06) inset;
      width: 100%; max-width: 640px;
      padding: 38px 42px;
      border: 1px solid rgba(255,255,255,.07);
      position: relative; z-index: 1;
    }

    .reg-alert {
      padding: 13px 16px; border-radius: 12px; font-size: 13px;
      margin-bottom: 20px; display: flex; align-items: flex-start; gap: 10px;
    }
    .reg-alert.success { background: #f0fdf4; border: 1px solid #bbf7d0; color: #16a34a; }
    .reg-alert.danger  { background: #fef2f2; border: 1px solid #fecaca; color: #dc2626; }
    .reg-alert.warning { background: #fffbeb; border: 1px solid #fde68a; color: #d97706; }

    .reg-step-panel { display: none !important; }
    .reg-step-panel.active { display: block !important; }

    .at-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 20px; }
    .at-opt { display: none; }
    .at-label {
      display: flex; align-items: flex-start; gap: 11px;
      padding: 14px 15px; border: 1.5px solid var(--border);
      border-radius: 13px; background: var(--input-bg);
      cursor: pointer; transition: all .2s; user-select: none;
    }
    .at-label:hover { border-color: var(--primary); background: var(--primary-glow); }
    .at-icon {
      width: 38px; height: 38px; border-radius: 11px;
      display: flex; align-items: center; justify-content: center;
      font-size: 15px; flex-shrink: 0;
      background: #f1f0ff; color: var(--primary); transition: all .2s;
    }
    .at-text { min-width: 0; }
    .at-name { font-size: 12.5px; font-weight: 700; color: var(--text); line-height: 1.2; }
    .at-desc { font-size: 11px; color: var(--text-muted); margin-top: 2px; line-height: 1.3; }
    .at-opt:checked + .at-label { border-color: var(--primary); background: var(--primary-glow); box-shadow: 0 0 0 3px rgba(108,99,255,.12); }
    .at-opt:checked + .at-label .at-icon { background: var(--primary); color: #fff; }
    .at-opt:checked + .at-label .at-name { color: var(--primary); }

    .cur-picker { position: relative; margin-bottom: 4px; }
    .cur-search-wrap { position: relative; margin-bottom: 8px; }
    .cur-search-wrap i { position: absolute; left: 13px; top: 50%; transform: translateY(-50%); color: #94a3b8; font-size: 13px; pointer-events: none; }
    .cur-search {
      width: 100%; padding: 11px 13px 11px 36px;
      border: 1.5px solid var(--border); border-radius: 12px;
      font-family: 'Inter', sans-serif; font-size: 13px;
      background: var(--input-bg); color: var(--text);
      outline: none; transition: border-color .2s, box-shadow .2s;
    }
    .cur-search:focus { border-color: var(--primary); box-shadow: 0 0 0 4px var(--primary-glow); background: #fff; }
    .cur-search::placeholder { color: #b0b6c4; }
    .cur-list {
      display: grid; grid-template-columns: 1fr 1fr; gap: 7px;
      max-height: 230px; overflow-y: auto; padding: 2px 1px 4px;
      scrollbar-width: thin; scrollbar-color: #c4b5fd #f4f6fb;
    }
    .cur-list::-webkit-scrollbar { width: 5px; }
    .cur-list::-webkit-scrollbar-track { background: #f4f6fb; border-radius: 3px; }
    .cur-list::-webkit-scrollbar-thumb { background: #c4b5fd; border-radius: 3px; }
    .cur-opt { display: none; }
    .cur-label {
      display: flex; align-items: center; gap: 8px; padding: 10px 12px;
      border: 1.5px solid var(--border); border-radius: 10px;
      background: var(--input-bg); cursor: pointer; transition: all .18s; user-select: none;
    }
    .cur-label:hover { border-color: var(--primary); background: var(--primary-glow); }
    .cur-sym { font-size: 13px; font-weight: 700; line-height: 1; flex-shrink: 0; min-width: 22px; text-align: center; color: var(--primary); }
    .cur-info { min-width: 0; }
    .cur-code { font-size: 12px; font-weight: 700; color: var(--text); }
    .cur-name { font-size: 10.5px; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 90px; }
    .cur-opt:checked + .cur-label { border-color: var(--primary); background: var(--primary-glow); box-shadow: 0 0 0 3px rgba(108,99,255,.12); }
    .cur-opt:checked + .cur-label .cur-code { color: var(--primary); }
    .cur-none { display: none; font-size: 13px; color: var(--text-muted); text-align: center; padding: 18px; grid-column: 1/-1; }
    .cur-none.show { display: block; }
    .cur-selected-badge { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text-muted); margin-bottom: 10px; }
    .cur-selected-badge strong { color: var(--primary); font-size: 13px; }

    .sub-section {
      font-size: 11px; font-weight: 700; text-transform: uppercase;
      letter-spacing: .06em; color: var(--text-muted); margin-bottom: 10px;
      display: flex; align-items: center; gap: 6px;
    }
    .sub-section::after { content:''; flex:1; height:1px; background:var(--border); }

    .step-title { margin-bottom: 24px; }
    .step-title h3 { font-size: 19px; font-weight: 800; color: var(--text); }
    .step-title p { font-size: 13px; color: var(--text-muted); margin-top: 4px; }

    .fg { display: grid; gap: 16px; }
    .fg-3 { grid-template-columns: 1fr 1fr 1fr; }
    .fg-2 { grid-template-columns: 1fr 1fr; }
    .fg-1 { grid-template-columns: 1fr; }

    .field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 4px; }
    .field label { font-size: 12px; font-weight: 600; color: #374151; letter-spacing: .2px; }
    .field label span { font-weight: 400; color: var(--text-muted); }

    .field input, .field select {
      background: var(--input-bg); border: 1.5px solid var(--border); border-radius: 12px;
      color: var(--text); font-family: 'Inter', sans-serif; font-size: 14px;
      padding: 12px 15px; width: 100%;
      transition: border-color .2s, box-shadow .2s, background .2s;
      outline: none; appearance: none; -webkit-appearance: none;
    }
    .field select {
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%236b7280' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
      background-repeat: no-repeat; background-position: right 15px center; padding-right: 38px;
    }
    .field input:focus, .field select:focus {
      border-color: var(--primary); box-shadow: 0 0 0 4px var(--primary-glow); background: #fff;
    }
    .field input::placeholder { color: #b0b6c4; }
    .field input[type="date"]::-webkit-calendar-picker-indicator { cursor: pointer; opacity: 0.5; }
    .field input.invalid, .field select.invalid { border-color: var(--danger); box-shadow: 0 0 0 3px rgba(239,68,68,0.1); }

    .gender-group { display: flex; gap: 12px; }
    .gender-opt { display: none; }
    .gender-label {
      flex: 1; display: flex; align-items: center; justify-content: center;
      gap: 9px; padding: 13px 12px;
      border: 1.5px solid var(--border); border-radius: 12px;
      background: var(--input-bg); cursor: pointer; transition: all .2s;
      font-size: 13px; font-weight: 600; color: var(--text-muted);
    }
    .gender-label i { font-size: 16px; }
    .gender-opt:checked + .gender-label {
      border-color: var(--primary); background: var(--primary-glow);
      color: var(--primary); box-shadow: 0 0 0 3px rgba(108,99,255,.1);
    }

    .step-actions { display: flex; gap: 12px; margin-top: 28px; }
    .btn-back {
      flex: 1; padding: 14px; border-radius: var(--radius);
      border: 1.5px solid var(--border); background: #fff;
      color: var(--text-muted); font-family: 'Inter', sans-serif;
      font-size: 14px; font-weight: 600; cursor: pointer; transition: all .2s;
    }
    .btn-back:hover { border-color: var(--primary); color: var(--primary); background: var(--primary-glow); }
    .btn-next, .btn-submit {
      flex: 2; padding: 14px; border-radius: var(--radius);
      border: none; background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
      color: #fff; font-family: 'Inter', sans-serif;
      font-size: 14px; font-weight: 700; cursor: pointer;
      transition: opacity .2s, box-shadow .2s, transform .15s;
      box-shadow: 0 6px 22px rgba(108,99,255,.38);
      display: flex; align-items: center; justify-content: center; gap: 8px;
    }
    .btn-next:hover, .btn-submit:hover {
      opacity: .92; box-shadow: 0 10px 30px rgba(108,99,255,.5); transform: translateY(-1px);
    }

    .reg-bottom-note { text-align: center; margin-top: 20px; font-size: 12.5px; color: var(--text-muted); }
    .reg-bottom-note a { color: var(--primary); text-decoration: none; font-weight: 600; }
    .reg-bottom-note a:hover { text-decoration: underline; }

    .field-divider { height: 1px; background: var(--border); margin: 20px 0; }

    .info-notice {
      background: #eff6ff; border: 1px solid #bfdbfe; border-radius: 12px;
      padding: 13px 16px; font-size: 12.5px; color: #1d4ed8;
      display: flex; gap: 10px; align-items: flex-start; margin-bottom: 20px;
    }
    .info-notice i { margin-top: 1px; flex-shrink: 0; }

    .ac-wrap { position: relative; }
    .ac-dropdown {
      position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: 999;
      background: #fff; border: 1.5px solid var(--border); border-radius: 13px;
      box-shadow: 0 12px 36px rgba(0,0,0,.12); max-height: 220px; overflow-y: auto; display: none;
    }
    .ac-dropdown.open { display: block; }
    .ac-item {
      padding: 11px 15px; font-size: 13px; color: var(--text); cursor: pointer;
      border-bottom: 1px solid var(--border);
      display: flex; align-items: flex-start; gap: 9px; transition: background .15s;
    }
    .ac-item:last-child { border-bottom: none; }
    .ac-item:hover, .ac-item.focused { background: #f8fafc; }
    .ac-item i { color: var(--primary); margin-top: 2px; flex-shrink: 0; font-size: 12px; }
    .ac-item-main { font-weight: 600; }
    .ac-item-sub { font-size: 11px; color: var(--text-muted); margin-top: 1px; }
    .ac-spinner {
      display: none; position: absolute; right: 13px; top: 50%; transform: translateY(-50%);
      width: 16px; height: 16px;
      border: 2px solid var(--border); border-top-color: var(--primary);
      border-radius: 50%; animation: spin .6s linear infinite;
    }
    .ac-spinner.visible { display: block; }
    @keyframes spin { to { transform: translateY(-50%) rotate(360deg); } }
    .zip-filled { border-color: var(--success) !important; box-shadow: 0 0 0 3px rgba(34,197,94,0.12) !important; }

    .review-section { margin-bottom: 20px; }
    .review-section-title {
      font-size: 11px; font-weight: 700; text-transform: uppercase;
      letter-spacing: .06em; color: var(--text-muted); margin-bottom: 10px;
      display: flex; align-items: center; gap: 6px;
    }
    .review-section-title::after { content:''; flex:1; height:1px; background:var(--border); }
    .review-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
    .review-item {
      display: flex; flex-direction: column; gap: 3px;
      padding: 11px 14px; background: var(--input-bg);
      border-radius: 11px; border: 1px solid var(--border);
    }
    .review-label { font-size: 10.5px; color: var(--text-muted); font-weight: 600; text-transform: uppercase; letter-spacing: .05em; }
    .review-value { font-size: 13.5px; color: var(--text); font-weight: 600; word-break: break-all; }
    .review-item.full { grid-column: 1 / -1; }
    .terms-check {
      display: flex; align-items: flex-start; gap: 12px;
      padding: 14px 16px; background: #faf5ff;
      border: 1.5px solid #e9d5ff; border-radius: 13px;
      margin-top: 20px; margin-bottom: 4px; cursor: pointer;
    }
    .terms-check input[type="checkbox"] { width: 18px; height: 18px; flex-shrink: 0; margin-top: 2px; accent-color: var(--primary); cursor: pointer; }
    .terms-check label { font-size: 12.5px; color: var(--text-muted); line-height: 1.6; cursor: pointer; }
    .terms-check label a { color: var(--primary); text-decoration: none; font-weight: 600; }
    .terms-check label a:hover { text-decoration: underline; }

    @media (max-width: 640px) {
      .reg-card { padding: 26px 22px; border-radius: 20px; }
      .fg-3 { grid-template-columns: 1fr 1fr; }
      .fg-2 { grid-template-columns: 1fr; }
      .at-grid { grid-template-columns: 1fr; }
      .cur-list { grid-template-columns: 1fr; }
      .review-grid { grid-template-columns: 1fr; }
    }
    @media (max-width: 480px) {
      .reg-page { padding: 26px 14px 52px; }
      .reg-card { padding: 22px 18px; border-radius: 18px; }
      .sb-label { font-size: 9.5px; }
      .sb-circle { width: 33px; height: 33px; font-size: 11px; }
      .step-title h3 { font-size: 17px; }
      .step-actions { flex-direction: column; }
      .btn-back, .btn-next, .btn-submit { flex: none; width: 100%; justify-content: center; }
      .gender-group { flex-direction: column; }
      .gender-label { padding: 12px 10px; }
      .at-grid { grid-template-columns: 1fr; }
      .cur-list { grid-template-columns: 1fr; max-height: 200px; }
    }
    @media (max-width: 400px) {
      .fg-3 { grid-template-columns: 1fr; }
      .sb-label { display: none; }
      .sb-circle { width: 30px; height: 30px; font-size: 10px; }
    }
    @media (max-width: 360px) {
      .reg-page { padding: 18px 10px 44px; }
      .reg-card { padding: 18px 14px; }
    }