/* ==========================================================================
   Partner onboarding — shared styles (plain CSS; Tailwind handles layout)
   Component classes live in @layer components so Tailwind utilities
   (hidden, flex, p-*, …) can still override them.
   ========================================================================== */
@layer theme, base, components, utilities;
:root {
  --b-50:  color-mix(in oklab, var(--brand) 6%, white);
  --b-100: color-mix(in oklab, var(--brand) 12%, white);
  --b-200: color-mix(in oklab, var(--brand) 24%, white);
  --b-300: color-mix(in oklab, var(--brand) 42%, white);
  --b-400: color-mix(in oklab, var(--brand) 68%, white);
  --b-500: var(--brand);
  --b-600: color-mix(in oklab, var(--brand) 86%, black);
  --b-700: color-mix(in oklab, var(--brand) 72%, black);
  --b-800: color-mix(in oklab, var(--brand) 56%, black);
  --b-900: color-mix(in oklab, var(--brand) 40%, black);
  --b-950: color-mix(in oklab, var(--brand) 24%, black);
  --ring: color-mix(in oklab, var(--brand) 18%, transparent);
  --ease: cubic-bezier(.2, .8, .2, 1);
}

html { -webkit-tap-highlight-color: transparent; }
body { opacity: 0; transition: opacity .35s ease; }
body.ready { opacity: 1; }
button, [role="button"], select, label[for], summary { cursor: pointer; }
[hidden] { display: none !important; }
::selection { background: var(--b-200); }

@layer components {
/* ---------------------------------------------------------------- inputs */
.field-label { display: block; font-size: 13px; font-weight: 600; color: #334155; margin-bottom: .4rem; }
.field-label .req-star { color: #f43f5e; margin-left: 2px; }
.field-input {
  width: 100%; border-radius: 14px; border: 1.5px solid #e2e8f0; background: #fff;
  padding: .78rem 1rem; font-size: 15px; line-height: 1.4; color: #0f172a;
  transition: border-color .2s, box-shadow .2s, background .2s;
}
.field-input:hover { border-color: #cbd5e1; }
.field-input:focus { outline: none; border-color: var(--b-500); box-shadow: 0 0 0 4px var(--ring); }
.field-input::placeholder { color: #a0aec0; }
.field-input[readonly] { background: #f8fafc; color: #475569; }
.field-input.is-invalid { border-color: #f43f5e; box-shadow: 0 0 0 4px rgb(244 63 94 / .12); }
.field-input.is-valid { border-color: #34d399; }
.field-input.upper { text-transform: uppercase; letter-spacing: .04em; }
.field-input.upper::placeholder { text-transform: none; letter-spacing: normal; }
select.field-input {
  appearance: none; -webkit-appearance: none; padding-right: 2.6rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right .9rem center;
}
textarea.field-input { resize: vertical; min-height: 110px; }
.hint { margin-top: .4rem; font-size: 12.5px; color: #64748b; line-height: 1.45; }
.err  { margin-top: .4rem; font-size: 12.5px; color: #e11d48; font-weight: 500; display: flex; gap: .35rem; align-items: flex-start; }
.warn { margin-top: .4rem; font-size: 12.5px; color: #b45309; font-weight: 500; }
@media (max-width: 640px) { .field-input { font-size: 16px; } }

/* OTP-like code boxes */
.code-box {
  width: 3.4rem; height: 3.8rem; text-align: center; font-size: 1.5rem; font-weight: 700; text-transform: uppercase;
  border-radius: 16px; border: 1.5px solid #e2e8f0; background: #fff; color: #0f172a; transition: all .2s var(--ease);
}
.code-box:focus { outline: none; border-color: var(--b-500); box-shadow: 0 0 0 4px var(--ring); transform: translateY(-2px); }
.code-box.filled { border-color: var(--b-300); background: var(--b-50); }

/* --------------------------------------------------------------- buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  border-radius: 14px; padding: .78rem 1.3rem; font-weight: 600; font-size: 15px; line-height: 1.2;
  transition: transform .15s var(--ease), box-shadow .2s, background-color .2s, color .2s, opacity .2s, border-color .2s;
  user-select: none; white-space: nowrap; border: 1.5px solid transparent;
}
.btn:active { transform: scale(.97); }
.btn:disabled, .btn.is-busy { opacity: .6; pointer-events: none; }
.btn-primary { background: var(--b-500); color: #fff; box-shadow: 0 10px 24px -10px color-mix(in oklab, var(--brand) 75%, transparent); }
.btn-primary:hover { background: var(--b-600); box-shadow: 0 14px 30px -12px color-mix(in oklab, var(--brand) 85%, transparent); }
.btn-dark { background: #0f172a; color: #fff; }
.btn-dark:hover { background: #1e293b; }
.btn-soft { background: var(--b-50); color: var(--b-700); }
.btn-soft:hover { background: var(--b-100); }
.btn-ghost { background: transparent; color: #475569; }
.btn-ghost:hover { background: #f1f5f9; color: #0f172a; }
.btn-outline { background: #fff; color: #334155; border-color: #e2e8f0; }
.btn-outline:hover { border-color: #cbd5e1; background: #f8fafc; }
.btn-danger { background: #fff1f2; color: #be123c; }
.btn-danger:hover { background: #ffe4e6; }
.btn-success { background: #10b981; color: #fff; }
.btn-success:hover { background: #059669; }
.btn-sm { padding: .5rem .85rem; font-size: 13px; border-radius: 11px; }
.btn-xs { padding: .35rem .6rem; font-size: 12px; border-radius: 9px; gap: .3rem; }
.btn-icon { padding: .6rem; border-radius: 12px; }
.btn-lg { padding: 1rem 1.6rem; font-size: 16px; border-radius: 16px; }

/* ---------------------------------------------------------------- surfaces */
.card { background: #fff; border-radius: 22px; border: 1px solid rgb(226 232 240 / .9); box-shadow: 0 1px 2px rgb(15 23 42 / .04), 0 14px 34px -18px rgb(15 23 42 / .14); }
.glass { background: rgb(255 255 255 / .74); backdrop-filter: blur(18px) saturate(1.5); -webkit-backdrop-filter: blur(18px) saturate(1.5); }
.chip { display: inline-flex; align-items: center; gap: .35rem; border-radius: 999px; padding: .25rem .65rem; font-size: 12px; font-weight: 600; }
.gradient-text { background: linear-gradient(120deg, var(--b-500), #8b5cf6 55%, #ec4899); -webkit-background-clip: text; background-clip: text; color: transparent; }
.bg-mesh {
  background:
    radial-gradient(60rem 40rem at 110% -10%, color-mix(in oklab, var(--brand) 22%, transparent), transparent 60%),
    radial-gradient(50rem 36rem at -20% 110%, rgb(236 72 153 / .10), transparent 60%),
    radial-gradient(40rem 30rem at 50% 50%, rgb(139 92 246 / .06), transparent 70%),
    #f8fafc;
}
.bg-brand-gradient { background: linear-gradient(135deg, var(--b-600), var(--b-800) 55%, #1e1b4b); background-size: 200% 200%; animation: gradientMove 14s ease infinite; }

}

/* ----------------------------------------------------------- animations */
@keyframes fadeUp   { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@keyframes fadeIn   { from { opacity: 0; } to { opacity: 1; } }
@keyframes scaleIn  { from { opacity: 0; transform: scale(.94); } to { opacity: 1; transform: none; } }
@keyframes popIn    { 0% { opacity: 0; transform: scale(.5); } 60% { opacity: 1; transform: scale(1.08); } 100% { transform: scale(1); } }
@keyframes slideInR { from { opacity: 0; transform: translateX(48px); } to { opacity: 1; transform: none; } }
@keyframes slideInL { from { opacity: 0; transform: translateX(-48px); } to { opacity: 1; transform: none; } }
@keyframes shake    { 10%, 90% { transform: translateX(-1px); } 20%, 80% { transform: translateX(3px); } 30%, 50%, 70% { transform: translateX(-6px); } 40%, 60% { transform: translateX(6px); } }
@keyframes float    { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }
@keyframes blob     { 0%, 100% { transform: translate(0, 0) scale(1); } 33% { transform: translate(40px, -50px) scale(1.12); } 66% { transform: translate(-30px, 25px) scale(.9); } }
@keyframes spin     { to { transform: rotate(360deg); } }
@keyframes shimmer  { 100% { transform: translateX(100%); } }
@keyframes drawCheck { to { stroke-dashoffset: 0; } }
@keyframes pulseRing { 0% { transform: scale(.85); opacity: .7; } 100% { transform: scale(2.1); opacity: 0; } }
@keyframes gradientMove { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } }
@keyframes glow { 0%, 100% { box-shadow: 0 0 0 0 color-mix(in oklab, var(--brand) 45%, transparent); } 50% { box-shadow: 0 0 0 10px transparent; } }
@keyframes slideDown { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: none; } }

.a-fade-up { animation: fadeUp .65s var(--ease) both; }
.a-fade    { animation: fadeIn .5s ease both; }
.a-scale   { animation: scaleIn .45s var(--ease) both; }
.a-pop     { animation: popIn .65s var(--ease) both; }
.a-float   { animation: float 6s ease-in-out infinite; }
.a-shake   { animation: shake .5s both; }
.a-glow    { animation: glow 2s ease-in-out infinite; }
.a-slide-down { animation: slideDown .35s var(--ease) both; }
.d-1 { animation-delay: .06s; } .d-2 { animation-delay: .12s; } .d-3 { animation-delay: .18s; }
.d-4 { animation-delay: .24s; } .d-5 { animation-delay: .30s; } .d-6 { animation-delay: .36s; }
.d-7 { animation-delay: .42s; } .d-8 { animation-delay: .48s; }
.phase-enter-next { animation: slideInR .5s var(--ease) both; }
.phase-enter-prev { animation: slideInL .5s var(--ease) both; }
.stagger > * { animation: fadeUp .55s var(--ease) both; }
.stagger > *:nth-child(1) { animation-delay: .04s; } .stagger > *:nth-child(2) { animation-delay: .08s; }
.stagger > *:nth-child(3) { animation-delay: .12s; } .stagger > *:nth-child(4) { animation-delay: .16s; }
.stagger > *:nth-child(5) { animation-delay: .20s; } .stagger > *:nth-child(6) { animation-delay: .24s; }
.stagger > *:nth-child(7) { animation-delay: .28s; } .stagger > *:nth-child(8) { animation-delay: .32s; }
.stagger > *:nth-child(n+9) { animation-delay: .36s; }

.blob { position: absolute; border-radius: 9999px; filter: blur(64px); opacity: .55; animation: blob 18s ease-in-out infinite; pointer-events: none; }
.spinner { width: 1.1em; height: 1.1em; border: 2.5px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: spin .7s linear infinite; display: inline-block; flex-shrink: 0; }
.skeleton { position: relative; overflow: hidden; background: #eef2f7; }
.skeleton::after { content: ''; position: absolute; inset: 0; transform: translateX(-100%); background: linear-gradient(90deg, transparent, rgb(255 255 255 / .65), transparent); animation: shimmer 1.3s infinite; }
.check-draw path, .check-draw polyline { stroke-dasharray: 60; stroke-dashoffset: 60; animation: drawCheck .7s .3s ease forwards; }
.pulse-ring::before { content: ''; position: absolute; inset: 0; border-radius: inherit; background: currentColor; animation: pulseRing 1.8s ease-out infinite; z-index: -1; }
.progress-bar { transition: width .9s var(--ease); }
.ring-progress circle.val { transition: stroke-dashoffset 1s var(--ease); }
.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { scrollbar-width: none; }
.safe-bottom { padding-bottom: max(env(safe-area-inset-bottom), 12px); }

/* -------------------------------------------------------------- toasts */
#toasts { position: fixed; z-index: 120; left: 50%; transform: translateX(-50%); top: calc(env(safe-area-inset-top) + 14px); display: flex; flex-direction: column; gap: 8px; width: min(92vw, 420px); pointer-events: none; }
.toast { pointer-events: auto; display: flex; align-items: center; gap: .7rem; padding: .8rem 1rem; border-radius: 16px; background: #0f172a; color: #fff; font-size: 14px; font-weight: 500; box-shadow: 0 18px 40px -12px rgb(15 23 42 / .45); animation: slideDown .35s var(--ease) both; transition: opacity .3s, transform .3s; }
.toast.hide { opacity: 0; transform: translateY(-8px) scale(.98); }
.toast .t-ico { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 9px; flex-shrink: 0; }
.toast.success .t-ico { background: #10b981; } .toast.error .t-ico { background: #f43f5e; }
.toast.info .t-ico { background: var(--b-500); } .toast.warn .t-ico { background: #f59e0b; }

@layer components {
/* --------------------------------------------------------------- modals */
.modal-backdrop { position: fixed; inset: 0; z-index: 90; display: flex; align-items: center; justify-content: center; padding: 16px; background: rgb(15 23 42 / .5); backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px); opacity: 0; transition: opacity .25s ease; }
.modal-backdrop.show { opacity: 1; }
.modal-panel { transform: translateY(26px) scale(.97); opacity: 0; transition: transform .35s var(--ease), opacity .25s ease; max-height: calc(100dvh - 32px); overflow-y: auto; }
.modal-backdrop.show .modal-panel { transform: none; opacity: 1; }
@media (max-width: 639px) {
  .modal-backdrop:has(.sheet) { align-items: flex-end; padding: 0; }
  .modal-panel.sheet { width: 100%; max-width: 100%; border-radius: 26px 26px 0 0; transform: translateY(100%); padding-bottom: max(env(safe-area-inset-bottom), 20px); max-height: 94dvh; }
}
.drawer { position: fixed; top: 0; bottom: 0; right: 0; width: min(420px, 92vw); z-index: 95; transform: translateX(105%); transition: transform .4s var(--ease); }
.drawer.show { transform: none; }
@media (max-width: 639px) {
  .drawer.sheet-mobile { top: auto; left: 0; width: 100%; max-height: 86dvh; border-radius: 26px 26px 0 0; transform: translateY(105%); }
  .drawer.sheet-mobile.show { transform: none; }
}

/* ------------------------------------------------------ wizard pieces */
.type-card { position: relative; display: flex; gap: .9rem; align-items: flex-start; padding: 1rem; border-radius: 18px; border: 1.5px solid #e2e8f0; background: #fff; transition: all .25s var(--ease); text-align: left; width: 100%; }
.type-card:hover { border-color: var(--b-300); transform: translateY(-2px); box-shadow: 0 12px 26px -16px rgb(15 23 42 / .25); }
.type-card .tc-ico { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 14px; background: #f1f5f9; color: #475569; flex-shrink: 0; transition: all .25s var(--ease); }
.type-card .tc-check { position: absolute; top: 12px; right: 12px; width: 22px; height: 22px; border-radius: 999px; border: 1.5px solid #cbd5e1; display: grid; place-items: center; color: #fff; transition: all .25s var(--ease); }
.type-card.selected { border-color: var(--b-500); background: var(--b-50); box-shadow: 0 0 0 4px var(--ring); }
.type-card.selected .tc-ico { background: var(--b-500); color: #fff; transform: rotate(-6deg) scale(1.05); }
.type-card.selected .tc-check { background: var(--b-500); border-color: var(--b-500); }

.nav-step { position: relative; display: flex; align-items: center; gap: .75rem; width: 100%; padding: .6rem .7rem; border-radius: 14px; color: #475569; font-size: 14px; font-weight: 500; transition: all .2s ease; text-align: left; }
.nav-step:hover { background: #f1f5f9; color: #0f172a; }
.nav-step .ns-dot { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 10px; background: #f1f5f9; color: #64748b; flex-shrink: 0; font-size: 12px; font-weight: 700; transition: all .3s var(--ease); }
.nav-step.done .ns-dot { background: #d1fae5; color: #059669; }
.nav-step.flag .ns-dot { background: #fef3c7; color: #b45309; }
.nav-step.active { background: var(--b-50); color: var(--b-800); font-weight: 600; }
.nav-step.active .ns-dot { background: var(--b-500); color: #fff; box-shadow: 0 6px 16px -6px var(--b-500); }

.step-chip { display: inline-flex; align-items: center; gap: .4rem; padding: .45rem .8rem; border-radius: 999px; background: #fff; border: 1px solid #e2e8f0; font-size: 12.5px; font-weight: 600; color: #64748b; white-space: nowrap; transition: all .25s var(--ease); }
.step-chip.done { color: #059669; border-color: #a7f3d0; background: #ecfdf5; }
.step-chip.flag { color: #b45309; border-color: #fde68a; background: #fffbeb; }
.step-chip.active { color: #fff; background: var(--b-500); border-color: var(--b-500); box-shadow: 0 8px 18px -8px var(--b-500); }

.dropzone { border: 2px dashed #cbd5e1; border-radius: 20px; transition: all .2s ease; }
.dropzone.drag { border-color: var(--b-500); background: var(--b-50); transform: scale(1.01); }
.file-tile { position: relative; overflow: hidden; border-radius: 16px; border: 1px solid #e2e8f0; background: #f8fafc; aspect-ratio: 4 / 3; animation: scaleIn .4s var(--ease) both; }
.file-tile img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s var(--ease); }
.file-tile:hover img { transform: scale(1.05); }
.add-tile { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .4rem; aspect-ratio: 4 / 3; border-radius: 16px; border: 2px dashed #cbd5e1; color: #64748b; font-size: 13px; font-weight: 600; transition: all .2s ease; background: #fff; }
.add-tile:hover { border-color: var(--b-400); color: var(--b-600); background: var(--b-50); }

.flag-note { margin-top: .6rem; display: flex; gap: .6rem; align-items: flex-start; border-radius: 14px; background: #fffbeb; border: 1px solid #fde68a; padding: .7rem .8rem; font-size: 13px; color: #92400e; animation: fadeUp .5s var(--ease) both; }

}

/* camera */
.cam-wrap { position: relative; background: #000; overflow: hidden; border-radius: 20px; }
.cam-wrap video { width: 100%; height: 100%; object-fit: cover; display: block; }
.cam-frame { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); border: 3px solid rgb(255 255 255 / .92); border-radius: 18px; box-shadow: 0 0 0 9999px rgb(0 0 0 / .42); transition: all .3s var(--ease); }
.cam-frame::after { content: ''; position: absolute; inset: -3px; border-radius: 18px; border: 3px solid transparent; border-top-color: var(--b-300); animation: spin 3s linear infinite; opacity: .0; }
.shutter { width: 70px; height: 70px; border-radius: 999px; background: #fff; border: 5px solid rgb(255 255 255 / .35); background-clip: padding-box; transition: transform .15s; }
.shutter:active { transform: scale(.9); }
.flash { position: absolute; inset: 0; background: #fff; opacity: 0; pointer-events: none; }
.flash.go { animation: fadeIn .08s reverse both; opacity: 0; }

/* cropper theme */
.crop-stage { background: #0f172a; border-radius: 18px; overflow: hidden; }
.cropper-view-box { outline: 2px solid var(--b-400); outline-color: var(--b-400); }
.cropper-line, .cropper-point { background-color: var(--b-400); }
.cropper-point { width: 10px !important; height: 10px !important; border-radius: 50%; opacity: 1; }
.cropper-point.point-se { width: 14px !important; height: 14px !important; }

@layer components {
/* tabs (admin) */
.tab-btn { position: relative; padding: .7rem .2rem; font-size: 14px; font-weight: 600; color: #64748b; white-space: nowrap; transition: color .2s; }
.tab-btn::after { content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 2.5px; border-radius: 3px; background: var(--b-500); transform: scaleX(0); transition: transform .3s var(--ease); }
.tab-btn:hover { color: #0f172a; }
.tab-btn.active { color: var(--b-700); }
.tab-btn.active::after { transform: scaleX(1); }
.tab-panel { animation: fadeUp .45s var(--ease) both; }

/* toggle switch */
.switch { position: relative; display: inline-block; width: 44px; height: 26px; flex-shrink: 0; }
.switch input { opacity: 0; width: 0; height: 0; }
.switch span { position: absolute; inset: 0; border-radius: 999px; background: #cbd5e1; transition: .25s; }
.switch span::before { content: ''; position: absolute; width: 20px; height: 20px; left: 3px; top: 3px; border-radius: 999px; background: #fff; box-shadow: 0 2px 6px rgb(0 0 0 / .2); transition: .25s var(--ease); }
.switch input:checked + span { background: var(--b-500); }
.switch input:checked + span::before { transform: translateX(18px); }
.switch input:focus-visible + span { box-shadow: 0 0 0 4px var(--ring); }

/* tables */
.tbl th { font-size: 11.5px; text-transform: uppercase; letter-spacing: .06em; color: #64748b; font-weight: 700; text-align: left; padding: .8rem 1rem; background: #f8fafc; }
.tbl td { padding: .9rem 1rem; border-top: 1px solid #f1f5f9; vertical-align: middle; }
.tbl tbody tr { transition: background .15s; }
.tbl tbody tr:hover { background: #fafbff; }

}

/* lightbox */
#lightbox img { max-width: 100%; max-height: 82dvh; object-fit: contain; border-radius: 12px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}
@media print {
  .no-print { display: none !important; }
  body { opacity: 1 !important; background: #fff !important; }
  .card { box-shadow: none !important; }
}

/* help step numbering (renumbers when conditional steps are hidden) */
.help-steps { counter-reset: hs; }
.help-steps > li:not([hidden]) { counter-increment: hs; }
.help-steps > li .n::before { content: counter(hs); }