/* =====================================================================
   QuantsBroker Portal — shared design system (neo-brutalist)
   Auth · forms · multi-step wizard · progress · liveness · badges
   Pages link: portal.css (+ portal-dash.css for dashboards)
   ===================================================================== */
:root {
  --paper: #F4F1E8; --paper-2: #ECE7D7; --ink: #0A0A0A;
  --yellow: #E8FF00; --blue: #2B5BFF; --pink: #FF4D8D; --green: #16d97f; --red: #ff4d4d;
  --display: "Archivo Black", system-ui, sans-serif;
  --body: "Space Grotesk", system-ui, sans-serif;
  --mono: "Space Mono", ui-monospace, monospace;
  --bw: 3px; --bw-thick: 4px;
  --shadow: 8px 8px 0 var(--ink); --shadow-sm: 5px 5px 0 var(--ink); --shadow-lg: 14px 14px 0 var(--ink);
  --gutter: clamp(1.1rem, 0.6rem + 2.5vw, 3rem);
  --d-fast: 120ms; --d-norm: 320ms;
  --ease: cubic-bezier(0.2, 0.9, 0.25, 1); --ease-back: cubic-bezier(0.34, 1.56, 0.64, 1);
}
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--body); color: var(--ink); background: var(--paper);
  background-image: linear-gradient(var(--paper-2) 1px, transparent 1px), linear-gradient(90deg, var(--paper-2) 1px, transparent 1px);
  background-size: 46px 46px; -webkit-font-smoothing: antialiased; line-height: 1.5; min-height: 100vh; overflow-x: hidden;
}
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; border: none; background: none; color: inherit; }
ul, ol { list-style: none; padding: 0; }
img, svg, video { display: block; max-width: 100%; }
::selection { background: var(--yellow); color: var(--ink); }
:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* =================== TYPE =================== */
.h-display { font-family: var(--display); text-transform: uppercase; letter-spacing: -.02em; line-height: .95; }
.mono { font-family: var(--mono); }
.eyebrow {
  display: inline-block; font-family: var(--mono); font-size: .72rem; letter-spacing: .14em; text-transform: uppercase;
  background: var(--ink); color: var(--paper); padding: .3rem .6rem;
}
.eyebrow--y { background: var(--yellow); color: var(--ink); }

/* =================== BRAND =================== */
.brand { display: inline-flex; align-items: center; gap: .55rem; font-family: var(--display); }
.brand__mark { display: grid; place-items: center; width: 2rem; height: 2rem; background: var(--yellow); border: var(--bw) solid var(--ink); font-size: 1.1rem; transform: rotate(-4deg); }
.brand__word { font-size: 1.2rem; letter-spacing: -.02em; }
.brand__b { color: var(--blue); }
.brand--light .brand__word { color: var(--paper); } .brand--light .brand__b { color: var(--yellow); }

/* =================== BUTTONS =================== */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .45rem;
  font-family: var(--mono); font-weight: 700; text-transform: uppercase; letter-spacing: .02em; font-size: .85rem;
  padding: .85rem 1.3rem; border: var(--bw) solid var(--ink); background: var(--paper); color: var(--ink); box-shadow: var(--shadow-sm);
  transition: transform var(--d-fast) var(--ease), box-shadow var(--d-fast) var(--ease), background var(--d-fast);
}
.btn:hover { transform: translate(-2px, -2px); box-shadow: 7px 7px 0 var(--ink); }
.btn:active { transform: translate(3px, 3px); box-shadow: 0 0 0 var(--ink); }
.btn:disabled { opacity: .5; cursor: not-allowed; transform: none; box-shadow: var(--shadow-sm); }
.btn--solid { background: var(--ink); color: var(--paper); } .btn--solid:hover { background: var(--blue); color: #fff; }
.btn--accent { background: var(--yellow); } .btn--accent:hover { background: #fff; }
.btn--pink { background: var(--pink); color: var(--ink); }
.btn--ghost { box-shadow: none; border-color: transparent; } .btn--ghost:hover { border-color: var(--ink); box-shadow: var(--shadow-sm); }
.btn--block { width: 100%; }
.btn--lg { padding: 1.05rem 1.6rem; font-size: .95rem; }
.btn--sm { padding: .5rem .8rem; font-size: .72rem; box-shadow: 4px 4px 0 var(--ink); }

/* =================== BADGES =================== */
.badge { display: inline-flex; align-items: center; gap: .4rem; font-family: var(--mono); font-weight: 700; font-size: .68rem; letter-spacing: .06em; text-transform: uppercase; padding: .3rem .55rem; border: 2px solid var(--ink); }
.badge::before { content: ""; width: .55rem; height: .55rem; border: 2px solid var(--ink); background: currentColor; }
.badge--pending { background: var(--yellow); color: var(--ink); }
.badge--approved { background: var(--green); color: var(--ink); }
.badge--rejected { background: var(--red); color: var(--ink); }
.badge--neutral { background: var(--paper); color: var(--ink); }

/* =================== AUTH LAYOUT (split) =================== */
.auth { min-height: 100vh; display: grid; grid-template-columns: 1.05fr 1fr; }
.auth__brand {
  position: relative; overflow: hidden; background: var(--ink); color: var(--paper);
  padding: clamp(1.5rem, 1rem + 3vw, 3.5rem); display: flex; flex-direction: column; justify-content: space-between; gap: 2rem;
  border-right: var(--bw-thick) solid var(--ink);
  background-image: linear-gradient(#161616 1px, transparent 1px), linear-gradient(90deg, #161616 1px, transparent 1px);
  background-size: 42px 42px;
}
.auth__big { font-family: var(--display); text-transform: uppercase; line-height: .9; letter-spacing: -.03em; font-size: clamp(2.2rem, 1rem + 6vw, 5rem); }
.auth__big .y { color: var(--yellow); -webkit-text-stroke: 2px var(--paper); }
.auth__lede { max-width: 42ch; color: #cfcabb; font-size: 1.05rem; }
.auth__points { display: flex; flex-direction: column; gap: .6rem; font-family: var(--mono); font-size: .9rem; }
.auth__points li { display: flex; gap: .5rem; } .auth__points span { color: var(--yellow); }
.auth__brandnav { display: flex; align-items: center; justify-content: space-between; }
.auth__brandnav a { font-family: var(--mono); font-size: .78rem; text-transform: uppercase; letter-spacing: .06em; color: var(--yellow); border-bottom: 2px solid transparent; }
.auth__brandnav a:hover { border-color: var(--yellow); }

.auth__panel { display: grid; place-items: center; padding: clamp(1.5rem, 1rem + 3vw, 3.5rem); }
.auth-card { width: min(100%, 440px); background: var(--paper); border: var(--bw-thick) solid var(--ink); box-shadow: var(--shadow); padding: clamp(1.5rem, 1rem + 2vw, 2.5rem); }
.auth-card__title { font-family: var(--display); text-transform: uppercase; font-size: clamp(1.6rem, 1rem + 2vw, 2.3rem); line-height: 1; letter-spacing: -.02em; margin-bottom: .4rem; }
.auth-card__sub { color: #555; font-size: .95rem; margin-bottom: 1.6rem; }
.auth-card__foot { margin-top: 1.4rem; font-family: var(--mono); font-size: .82rem; text-align: center; }
.auth-card__foot a { color: var(--blue); font-weight: 700; border-bottom: 2px solid var(--blue); }
.auth-mini { margin-top: 1rem; text-align: center; font-family: var(--mono); font-size: .72rem; }
.auth-mini a { color: #777; border-bottom: 1px dashed #999; }

/* =================== FORM FIELDS =================== */
.field { display: flex; flex-direction: column; gap: .4rem; margin-bottom: 1.1rem; }
.field--row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.label { font-family: var(--mono); font-size: .74rem; text-transform: uppercase; letter-spacing: .08em; font-weight: 700; }
.label .req { color: var(--pink); }
.input, .select, .textarea {
  width: 100%; font-family: var(--body); font-size: 1rem; padding: .85rem 1rem; color: var(--ink);
  background: var(--paper); border: var(--bw) solid var(--ink); box-shadow: var(--shadow-sm);
  transition: transform var(--d-fast), box-shadow var(--d-fast), background var(--d-fast);
}
.input::placeholder { color: #8a857a; }
.input:focus, .select:focus, .textarea:focus { outline: none; transform: translate(-2px, -2px); box-shadow: 7px 7px 0 var(--ink); }
.input.is-error, .select.is-error { background: #ffe4e4; border-color: var(--red); }
.select { appearance: none; -webkit-appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--ink) 50%), linear-gradient(135deg, var(--ink) 50%, transparent 50%); background-position: calc(100% - 20px) 1.25rem, calc(100% - 13px) 1.25rem; background-size: 7px 7px, 7px 7px; background-repeat: no-repeat; cursor: pointer; }
.hint { font-family: var(--mono); font-size: .72rem; color: #777; }
.error-text { font-family: var(--mono); font-size: .72rem; color: var(--red); font-weight: 700; }
.with-prefix { display: flex; }
.with-prefix .pre { display: grid; place-items: center; padding: 0 .9rem; background: var(--ink); color: var(--paper); border: var(--bw) solid var(--ink); border-right: 0; font-family: var(--mono); font-size: .85rem; box-shadow: var(--shadow-sm); }
.with-prefix .input { box-shadow: var(--shadow-sm); }

.checkbox { display: flex; align-items: flex-start; gap: .6rem; font-size: .85rem; cursor: pointer; }
.checkbox input { position: absolute; opacity: 0; }
.checkbox .box { flex: none; width: 1.3rem; height: 1.3rem; border: var(--bw) solid var(--ink); background: var(--paper); display: grid; place-items: center; box-shadow: 3px 3px 0 var(--ink); }
.checkbox input:checked + .box { background: var(--yellow); } .checkbox input:checked + .box::after { content: "✓"; font-weight: 900; }
.checkbox input:focus-visible + .box { outline: 3px solid var(--blue); outline-offset: 2px; }

/* upload dropzone (mock) */
.upload { border: var(--bw) dashed var(--ink); background: var(--paper-2); padding: 1.2rem; text-align: center; cursor: pointer; transition: background var(--d-fast); }
.upload:hover, .upload.is-drag { background: var(--yellow); }
.upload.is-done { background: var(--green); border-style: solid; }
.upload__icon { font-size: 1.6rem; } .upload__txt { font-family: var(--mono); font-size: .78rem; margin-top: .3rem; }

/* =================== WIZARD =================== */
.wiz-shell { min-height: 100vh; display: flex; flex-direction: column; }
.wiz-top { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem var(--gutter); border-bottom: var(--bw-thick) solid var(--ink); background: var(--paper); }
.wiz-top a.exit { font-family: var(--mono); font-size: .78rem; text-transform: uppercase; letter-spacing: .06em; }
.wiz-body { flex: 1; width: min(100%, 760px); margin: 0 auto; padding: clamp(1.4rem, 1rem + 3vw, 3rem) var(--gutter); }

.progress { margin-bottom: 1.4rem; }
.progress__meta { display: flex; align-items: baseline; justify-content: space-between; font-family: var(--mono); font-size: .78rem; text-transform: uppercase; letter-spacing: .06em; margin-bottom: .5rem; }
.progress__pct { font-family: var(--display); font-size: 1.4rem; }
.progress__bar { height: 18px; border: var(--bw) solid var(--ink); background: var(--paper); box-shadow: var(--shadow-sm); overflow: hidden; }
.progress__fill { height: 100%; width: 0; background: var(--yellow); border-right: var(--bw) solid var(--ink); transition: width .5s var(--ease); background-image: repeating-linear-gradient(45deg, transparent 0 8px, rgba(0,0,0,.08) 8px 16px); }

.steps { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1.6rem; }
.step-chip { display: flex; align-items: center; gap: .5rem; font-family: var(--mono); font-size: .72rem; text-transform: uppercase; letter-spacing: .04em; padding: .4rem .6rem; border: 2px solid var(--ink); background: var(--paper); color: #999; }
.step-chip b { display: grid; place-items: center; width: 1.3rem; height: 1.3rem; border: 2px solid currentColor; font-family: var(--display); font-size: .7rem; }
.step-chip.is-active { background: var(--ink); color: var(--paper); }
.step-chip.is-done { background: var(--green); color: var(--ink); }
.step-chip.is-done b::after { content: "✓"; } .step-chip.is-done b span { display: none; }

.wiz-card { background: var(--paper); border: var(--bw-thick) solid var(--ink); box-shadow: var(--shadow); padding: clamp(1.4rem, 1rem + 2vw, 2.4rem); }
.wiz-step { animation: wizIn .4s var(--ease) both; }
@keyframes wizIn { from { opacity: 0; transform: translateX(18px); } to { opacity: 1; transform: none; } }
.wiz-step__eyebrow { font-family: var(--mono); font-size: .72rem; text-transform: uppercase; letter-spacing: .1em; color: var(--blue); margin-bottom: .4rem; }
.wiz-step__title { font-family: var(--display); text-transform: uppercase; font-size: clamp(1.5rem, 1rem + 2vw, 2.2rem); line-height: 1; letter-spacing: -.02em; margin-bottom: .4rem; }
.wiz-step__sub { color: #555; margin-bottom: 1.6rem; max-width: 54ch; }
.wiz-nav { display: flex; gap: .8rem; margin-top: 1.8rem; }
.wiz-nav .spacer { flex: 1; }

/* =================== LIVENESS =================== */
.liveness { display: grid; gap: 1.2rem; }
.liveness__frame { position: relative; width: min(100%, 340px); aspect-ratio: 1; margin: 0 auto; border: var(--bw-thick) solid var(--ink); box-shadow: var(--shadow); background: #0c0c0c; overflow: hidden; }
.liveness__frame video { width: 100%; height: 100%; object-fit: cover; transform: scaleX(-1); }
.liveness__reticle { position: absolute; inset: 14% 22%; border: var(--bw) dashed var(--yellow); border-radius: 50%; pointer-events: none; }
.liveness__scan { position: absolute; left: 0; right: 0; height: 3px; background: var(--yellow); box-shadow: 0 0 12px var(--yellow); animation: scan 2.4s var(--ease) infinite; }
@keyframes scan { 0%,100% { top: 12%; } 50% { top: 86%; } }
.liveness__ring { position: absolute; top: 10px; right: 10px; width: 54px; height: 54px; border-radius: 50%; display: grid; place-items: center; font-family: var(--display); font-size: .85rem; color: var(--paper); background: conic-gradient(var(--green) calc(var(--p,0) * 1%), rgba(255,255,255,.15) 0); }
.liveness__ring span { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; background: #0c0c0c; }
.liveness__prompt { text-align: center; font-family: var(--mono); font-weight: 700; text-transform: uppercase; letter-spacing: .04em; min-height: 1.4em; }
.liveness__bars { display: flex; gap: .4rem; justify-content: center; }
.liveness__bars i { width: 30px; height: 8px; border: 2px solid var(--ink); background: var(--paper); }
.liveness__bars i.on { background: var(--green); }
.liveness__stamp { display: none; position: absolute; inset: 0; place-items: center; background: rgba(22,217,127,.18); }
.liveness__stamp.show { display: grid; }
.liveness__stamp b { font-family: var(--display); text-transform: uppercase; color: var(--ink); background: var(--green); border: var(--bw-thick) solid var(--ink); box-shadow: var(--shadow); padding: .5rem 1rem; transform: rotate(-8deg); }

/* =================== STAMP / TOAST / MISC =================== */
.stamp { display: inline-block; font-family: var(--display); text-transform: uppercase; border: var(--bw-thick) solid var(--ink); box-shadow: var(--shadow); padding: .5rem 1.1rem; transform: rotate(-4deg); }
.stamp--pending { background: var(--yellow); } .stamp--approved { background: var(--green); } .stamp--rejected { background: var(--red); }
.divider { display: flex; align-items: center; gap: .8rem; margin: 1.2rem 0; font-family: var(--mono); font-size: .72rem; color: #999; text-transform: uppercase; }
.divider::before, .divider::after { content: ""; flex: 1; height: 2px; background: var(--ink); opacity: .25; }
.toast { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%) translateY(120%); z-index: 999; background: var(--ink); color: var(--paper); border: var(--bw) solid var(--ink); box-shadow: var(--shadow); padding: .8rem 1.2rem; font-family: var(--mono); font-size: .82rem; transition: transform .4s var(--ease-back); }
.toast.show { transform: translateX(-50%) translateY(0); }
.note { font-family: var(--mono); font-size: .72rem; color: #777; border: 2px dashed #bbb; padding: .6rem .8rem; }

/* =================== RESPONSIVE =================== */
@media (max-width: 880px) {
  .auth { grid-template-columns: 1fr; }
  .auth__brand { min-height: 38vh; border-right: 0; border-bottom: var(--bw-thick) solid var(--ink); }
}
@media (max-width: 560px) {
  .field--row { grid-template-columns: 1fr; }
  .steps { gap: .35rem; } .step-chip { font-size: .64rem; padding: .35rem .45rem; }
  .wiz-nav { flex-wrap: wrap; }
}
@media (prefers-reduced-motion: reduce) {
  .wiz-step { animation: none; } .liveness__scan { animation: none; } .progress__fill { transition: none; }
}