/* ============================================================
   AUTH — register steps, KYC upload zones, form layout
   ============================================================ */

.form-wrap {
  max-width: 560px;
  margin: 8px auto 0;
}

/* ---- Registration step indicator ---- */
.reg-steps {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 18px 0 22px;
}

.reg-step {
  display: flex;
  align-items: center;
  gap: 9px;
}

.reg-step__num {
  width: 30px; height: 30px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-weight: 700;
  font-size: 13px;
  flex-shrink: 0;
  background: var(--surface2);
  border: 1.5px solid var(--line);
  color: var(--muted);
  transition: background .2s, color .2s, border-color .2s;
}

.reg-step__label {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--muted);
  transition: color .2s;
}

.reg-step.is-done .reg-step__num {
  background: linear-gradient(135deg, var(--green), var(--cyan));
  color: var(--on-cyan);
  border-color: transparent;
}

.reg-step.is-active .reg-step__num {
  background: linear-gradient(135deg, var(--pink), var(--violet));
  color: var(--on-accent);
  border-color: transparent;
  box-shadow: 0 0 0 4px rgba(var(--pink-rgb), .18);
}
.reg-step.is-active .reg-step__label { color: var(--ink); }

.reg-steps__bar {
  height: 2px;
  flex: 1;
  background: var(--line);
  border-radius: 2px;
  transition: background .3s;
}
.reg-steps__bar.is-done { background: var(--cyan); }

/* ---- Registration pages (step content) ---- */
.reg-page { display: none; }
.reg-page.is-active { display: block; animation: fade-in .3s ease; }

/* ---- Social login buttons ---- */
.social-btns { display: flex; gap: 10px; }
.social-btn {
  flex: 1;
  padding: 12px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--ink);
  font-weight: 600;
  font-size: 13.5px;
  transition: border-color var(--ease);
}
.social-btn:hover { border-color: var(--cyan); }

/* ---- Divider ---- */
.divider {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--faint);
  font-size: 12px;
  margin: 18px 0;
}
.divider::before,
.divider::after { content: ""; flex: 1; height: 1px; background: var(--line-soft); }

/* ---- Form footer & links ---- */
.form-footer {
  text-align: center;
  color: var(--faint);
  font-size: 13px;
  margin-top: 14px;
}

.link-btn {
  background: none;
  border: 0;
  color: var(--cyan);
  font-size: inherit;
  font-weight: 600;
  cursor: pointer;
  padding: 0;
}
.link-btn:hover { text-decoration: underline; }

.form-actions { display: flex; gap: 10px; }

/* ---- Upload zones (KYC) ---- */
.upload-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 4px;
}

.upload-zone {
  border: 1.5px dashed var(--line);
  border-radius: 14px;
  padding: 22px 14px;
  text-align: center;
  cursor: pointer;
  transition: border-color var(--ease), background var(--ease);
  background: var(--surface);
}
.upload-zone:hover { border-color: var(--cyan); background: var(--surface2); }
.upload-zone.is-uploaded { border-style: solid; border-color: var(--green); }

.upload-zone--wide { margin-top: 4px; }

.upload-zone__icon  { font-size: 30px; }
.upload-zone__title { font-weight: 700; font-size: 13.5px; margin-top: 8px; }
.upload-zone__hint  { color: var(--faint); font-size: 11.5px; margin-top: 3px; }

@media (max-width: 520px) { .upload-grid { grid-template-columns: 1fr; } }
@media (max-width: 620px) { .reg-step__label { display: none; } }

/* ---- Quên mật khẩu · đăng nhập mạng xã hội ---- */
.auth-link {
  display: block; width: 100%; margin: 10px 0 0; padding: 4px;
  background: none; border: 0; cursor: pointer;
  color: var(--muted); font-size: 13px; font-weight: 600; text-align: center;
  transition: color var(--ease);
}
.auth-link:hover { color: var(--pink); text-decoration: underline; }

.auth-or {
  display: flex; align-items: center; gap: 12px; margin: 20px 0 16px;
  color: var(--faint); font-size: 12px; text-transform: uppercase; letter-spacing: .1em;
}
.auth-or::before, .auth-or::after { content: ""; flex: 1; height: 1px; background: var(--line); }

.auth-oauth { display: flex; align-items: center; justify-content: center; gap: 10px; font-weight: 600; }
.auth-oauth__ic {
  width: 22px; height: 22px; flex-shrink: 0; border-radius: 50%;
  display: grid; place-items: center; font-weight: 800; font-size: 13px; color: var(--on-accent);
}
.auth-oauth__ic--g { background: linear-gradient(135deg, #EA4335, #FBBC05 60%, #4285F4); }
.auth-oauth__ic--f { background: #1877F2; }

/* ============================================================
   NEBULA 2.0 — skin màn KYC (#kycflow) · 1 DOM · CSS-only. Khớp GamerLink KYC.dc.html.
   Cấu trúc app (.form-wrap · .eyebrow · .h-title · .sub · .card · .field-label · .inp ·
   .upload-zone · .kyc-note · .btn--block) đã sát mẫu → chỉ tô chất liệu. Neon giữ nguyên.
   kycflow ∈ NEB_SCREENS. ============================================================ */
:root[data-theme="nebula"] .app.is-neb #content > #kycflow.screen { padding: 36px 24px 90px; }
/* 500 = 560 outer − 2×30 padding của mockup → card khớp bề rộng mẫu */
:root[data-theme="nebula"] #kycflow .form-wrap { max-width: 500px; margin: 0 auto; }
/* Tiêu đề: kicker muted + h1 26px như mẫu (h1 sẵn có → không cần .screen-title) */
:root[data-theme="nebula"] #kycflow .eyebrow { color: var(--n-label); letter-spacing: .1em; margin-bottom: 6px; }
:root[data-theme="nebula"] #kycflow .h-title { font-size: 26px; letter-spacing: -.02em; margin: 0 0 6px; }
:root[data-theme="nebula"] #kycflow .sub { font-size: 14px; color: var(--muted); margin: 0 0 22px; }
/* Thẻ form glass phẳng */
:root[data-theme="nebula"] #kycflow .card {
  background: rgba(var(--hl-rgb), .04); border: 1px solid rgba(var(--hl-rgb), .08); box-shadow: none; border-radius: 16px;
}
/* Nhãn field: 600 · ink-soft như mẫu (.lb) */
:root[data-theme="nebula"] #kycflow .field-label { font-weight: 600; color: var(--ink-soft); margin: 16px 0 8px; }
:root[data-theme="nebula"] #kycflow .card__body > .field-label:first-child { margin-top: 0; }
/* Input glass */
:root[data-theme="nebula"] #kycflow .inp {
  height: 44px; padding: 0 14px; border-radius: 11px;
  background: rgba(var(--hl-rgb), .05); border: 1px solid rgba(var(--hl-rgb), .1);
}
/* Ô tải ảnh (dashed) → viền trắng mờ, nền trong như mẫu */
:root[data-theme="nebula"] #kycflow .upload-zone {
  border: 1.5px dashed rgba(var(--hl-rgb), .2); border-radius: 14px; padding: 22px 14px;
  background: rgba(var(--hl-rgb), .02);
}
:root[data-theme="nebula"] #kycflow .upload-zone:hover { border-color: rgba(var(--hl-rgb), .35); background: rgba(var(--hl-rgb), .04); }
:root[data-theme="nebula"] #kycflow .upload-zone__icon { font-size: 26px; }
:root[data-theme="nebula"] #kycflow .upload-zone__title { font-weight: 600; font-size: 13.5px; }
:root[data-theme="nebula"] #kycflow .upload-zone__hint { color: var(--faint); font-size: 12px; }
/* Note bảo mật → CYAN như mẫu (app mặc định vàng), chữ ink-soft */
:root[data-theme="nebula"] #kycflow .kyc-note {
  background: rgba(var(--cyan-rgb), .08); border: 1px solid rgba(var(--cyan-rgb), .2);
  color: var(--ink-soft); border-radius: 12px;
}
/* Nút gửi = violet đặc #7A5BFF full-width như mẫu */
:root[data-theme="nebula"] #kycflow .btn--block {
  background: var(--violet2); color: #fff; box-shadow: none; font-size: 15px; padding: 14px; border-radius: 13px;
}
@media (max-width: 560px) {
  :root[data-theme="nebula"] .app.is-neb #content > #kycflow.screen { padding: 24px 16px 70px; }
  /* Mẫu giữ CCCD trước/sau 2 cột cả mobile (app gốc stack ở 520px) */
  :root[data-theme="nebula"] #kycflow .upload-grid { grid-template-columns: 1fr 1fr; }
}

/* ============================================================
   NEBULA skin — màn AUTH (#auth) 1:1 mockup "GamerLink Auth":
   card giữa toàn màn (ẩn top-nav) + logo + segmented tab + form kính.
   auth ∈ NEB_SCREENS + `.is-auth` (main.js). Neon BYTE-NGUYÊN.
   ============================================================ */
/* Logo chỉ-Nebula (base ẩn) */
.auth-logo { display: none; }
.auth-logo__ic {
  width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center;
  background: linear-gradient(135deg, var(--violet), var(--pink));
  box-shadow: 0 6px 16px -6px rgba(var(--violet-rgb), .8);
}
.auth-logo__tx { font-weight: 800; font-size: 22px; color: var(--ink); }
.auth-logo__tx span { color: var(--violet); }

/* Card giữa toàn màn: ẩn top-nav app, căn giữa */
:root[data-theme="nebula"] .app.is-neb.is-auth .glnav { display: none; }
:root[data-theme="nebula"] .app.is-neb.is-auth #content > #auth.screen {
  min-height: 100vh; max-width: none; margin: 0; padding: 40px 24px;
  display: flex; align-items: center; justify-content: center;
}
:root[data-theme="nebula"] #auth .form-wrap { max-width: 420px; width: 100%; margin: 0; }
:root[data-theme="nebula"] #auth .auth-logo { display: flex; align-items: center; gap: 10px; justify-content: center; margin-bottom: 26px; }

/* Header căn giữa */
:root[data-theme="nebula"] #auth { text-align: center; }
:root[data-theme="nebula"] #auth .eyebrow {
  color: var(--n-label); font-size: 12px; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; margin-bottom: 6px;
}
:root[data-theme="nebula"] #auth .h-title { font-size: 26px; font-weight: 800; letter-spacing: -.02em; margin: 0 0 6px; }
:root[data-theme="nebula"] #auth .sub { font-size: 14px; color: var(--muted); }

/* Segmented tab (Đăng nhập / Đăng ký) */
:root[data-theme="nebula"] #authTabs {
  display: flex; gap: 6px; background: rgba(var(--hl-rgb), .05); border-radius: 12px;
  padding: 5px; margin: 22px 0 20px;
}
:root[data-theme="nebula"] #authTabs .itab {
  flex: 1; text-align: center; padding: 10px; border-radius: 8px; border: 0; background: none;
  font-size: 14px; font-weight: 500; color: var(--ink-soft);
}
:root[data-theme="nebula"] #authTabs .itab.is-active { background: var(--violet-tint); color: var(--bg); font-weight: 600; }

/* Card form = material kính (mockup) */
:root[data-theme="nebula"] #auth .card {
  background: linear-gradient(180deg, rgba(var(--hl-rgb), .06), rgba(var(--hl-rgb), .022));
  border: 1px solid rgba(var(--hl-rgb), .1); border-radius: 18px;
  box-shadow: inset 0 1px 0 rgba(var(--hl-rgb), .08), 0 24px 50px -26px rgba(0, 0, 0, .7);
  text-align: left;
}
:root[data-theme="nebula"] #auth .card__body { padding: 24px; }
:root[data-theme="nebula"] #auth .field-label { color: var(--ink-soft); font-weight: 500; }
:root[data-theme="nebula"] #auth .inp {
  background: rgba(var(--hl-rgb), .05); border: 1px solid rgba(var(--hl-rgb), .1); color: var(--ink);
}
:root[data-theme="nebula"] #auth .inp:focus { border-color: rgba(var(--violet-rgb), .5); }

/* Nút submit = violet đặc */
:root[data-theme="nebula"] #auth .btn--block {
  background: var(--violet2); color: #fff; border-radius: 12px; padding: 14px; font-weight: 700;
  font-size: 15px; box-shadow: none;
}
/* Link quên MK · divider · oauth ghost */
:root[data-theme="nebula"] #auth .auth-link { color: var(--violet-tint); }
:root[data-theme="nebula"] #auth .auth-link:hover { color: var(--ink); }
:root[data-theme="nebula"] #auth .auth-or { color: var(--faint); }
:root[data-theme="nebula"] #auth .auth-or::before,
:root[data-theme="nebula"] #auth .auth-or::after { background: rgba(var(--hl-rgb), .1); }
:root[data-theme="nebula"] #auth .auth-oauth {
  background: rgba(var(--hl-rgb), .05); border: 1px solid rgba(var(--hl-rgb), .14); color: var(--ink);
  border-radius: 11px; padding: 12px;
}
:root[data-theme="nebula"] #auth .auth-oauth__ic--g { background: #fff; color: #4285f4; }
:root[data-theme="nebula"] #auth .auth-oauth__ic--f { background: #1877f2; color: #fff; }