/* =====================================================================
   KYC page. Builds on style.css tokens (dark navy, single red accent,
   pill = interactive, 20px = containers, 12px = inputs).
   ===================================================================== */

[hidden]{display:none!important}
.kyc-page .skip{inset-inline-start:8px;top:-60px}
.kyc-page .skip:focus{top:8px}
.kyc-page .nav__links a[aria-current=page]{color:var(--fg);background:rgba(255,255,255,.08)}

/* Hero */
.kyc-hero{padding-block:clamp(40px,6vw,80px) clamp(28px,4vw,48px);background:radial-gradient(800px 420px at 80% 0%,rgba(28,68,137,.5),transparent 70%),var(--bg);border-bottom:1px solid var(--line)}
html[dir=rtl] .kyc-hero{background:radial-gradient(800px 420px at 20% 0%,rgba(28,68,137,.5),transparent 70%),var(--bg)}
.kyc-hero__inner{display:grid;grid-template-columns:1.3fr .7fr;gap:clamp(24px,5vw,64px);align-items:end}
.kyc-hero__title{font-weight:800;font-size:clamp(32px,4.2vw,56px);line-height:1.2;margin:16px 0 14px;letter-spacing:-.01em}
html[lang=en] .kyc-hero__title{font-stretch:110%;line-height:1.06;letter-spacing:-.02em}
.kyc-hero__lead{color:var(--fg-2);max-width:56ch}
.lock{width:14px;height:14px;border:2px solid var(--accent);border-radius:3px;position:relative;margin-top:4px}
.lock::before{content:"";position:absolute;inset-inline-start:1px;top:-8px;width:8px;height:7px;border:2px solid var(--accent);border-bottom:0;border-radius:6px 6px 0 0}
.kyc-need{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-box);padding:20px 22px;font-size:14.5px}
.kyc-need b{display:block;margin-bottom:10px;font-size:15px}
.kyc-need ul{list-style:none;display:grid;gap:8px;color:var(--fg-2)}
.kyc-need li{display:flex;gap:10px;align-items:flex-start}
.kyc-need li::before{content:"";flex:none;width:6px;height:6px;border-radius:50%;background:var(--accent);margin-top:.7em}

/* Layout */
.kyc-body{padding-block:clamp(32px,5vw,64px) clamp(64px,8vw,112px)}
.kyc-grid{display:grid;grid-template-columns:240px minmax(0,1fr);gap:clamp(24px,4vw,56px);align-items:start}
.kyc-done{grid-column:1/-1}
.kyc-grid>*{min-width:0}

/* Stepper */
.steps{position:sticky;top:96px}
.steps__bar{height:4px;border-radius:4px;background:var(--line);overflow:hidden;margin-bottom:18px}
.steps__bar span{display:block;height:100%;width:0;background:var(--accent);transition:width .5s var(--ease)}
html[dir=rtl] .steps__bar span{margin-inline-start:auto}
.steps ol{list-style:none;display:grid;gap:2px}
.steps button{display:flex;align-items:center;gap:12px;width:100%;background:none;border:0;padding:9px 10px;border-radius:var(--r-inner);color:var(--muted);cursor:pointer;text-align:start;font-size:15px;transition:background .2s,color .2s}
.steps button:not(:disabled):hover{background:rgba(255,255,255,.05);color:var(--fg)}
.steps button:disabled{cursor:default;opacity:.55}
.steps__n{flex:none;width:28px;height:28px;border-radius:50%;display:grid;place-items:center;border:1px solid rgba(238,241,247,.22);font-family:var(--f-num);font-size:13px}
.steps li.is-done .steps__n{background:rgba(61,220,151,.14);border-color:transparent;color:var(--dn)}
.steps li.is-cur button{color:var(--fg);background:var(--surface)}
.steps li.is-cur .steps__n{background:var(--accent);border-color:var(--accent);color:#fff}
.steps__save{font-size:12.5px;color:var(--muted);margin-top:16px;padding-inline:10px;opacity:0;transition:opacity .3s}
.steps__save.on{opacity:1}

/* Form */
.kyc-form{position:relative;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-box);padding:clamp(20px,3.5vw,44px);min-width:0}
.kyc-loading{color:var(--muted)}
.kstep__title{font-size:clamp(24px,2.4vw,32px);font-weight:800;line-height:1.3;margin-bottom:8px;outline:none}
html[lang=en] .kstep__title{font-stretch:108%;line-height:1.15}
.kstep__intro{color:var(--fg-2);margin-bottom:8px;max-width:64ch;font-size:15.5px}
.kstep .grid{margin-top:24px}
.grid{display:grid;grid-template-columns:1fr 1fr;gap:20px 18px}
.fld{display:flex;flex-direction:column;gap:8px;min-width:0;border:0}
.fld--full{grid-column:1/-1}
.fld legend{padding:0;margin-bottom:10px}
.fld__lbl{font-size:14px;color:var(--fg-2);line-height:1.6}
.fld legend .fld__lbl{font-size:15px;color:var(--fg)}
.req{color:var(--accent);font-style:normal}
.fld__hint{font-size:12.5px;color:var(--muted)}
.fld__err{font-size:13px;color:#FF9A9A;min-height:0}
.fld__err:empty{display:none}
.fld input,.fld select,.fld textarea{width:100%;min-height:50px;border-radius:var(--r-inner);border:1px solid rgba(238,241,247,.2);background:var(--bg);padding:12px 14px;color:var(--fg);font:inherit;font-size:16px;transition:border-color .2s,box-shadow .2s}
.fld textarea{resize:vertical;min-height:96px;line-height:1.6}
.fld select{appearance:none;-webkit-appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),linear-gradient(135deg,var(--muted) 50%,transparent 50%);background-size:6px 6px;background-repeat:no-repeat;background-position:calc(100% - 22px) 50%,calc(100% - 16px) 50%;padding-inline-end:40px}
html[dir=rtl] .fld select{background-position:22px 50%,16px 50%}
.fld input:focus,.fld select:focus,.fld textarea:focus{outline:none;border-color:var(--fg);box-shadow:0 0 0 3px rgba(238,241,247,.08)}
html[dir=rtl] .fld input[dir=ltr]{text-align:right}
.fld input[type=date]{color-scheme:dark}
.fld.is-err input,.fld.is-err select,.fld.is-err textarea,.fld.is-err .drop,.fld.is-err .sig{border-color:#FF6B6B}
.fld[hidden],.fld-h[hidden]{display:none}

.fld-h{grid-column:1/-1;font-size:18px;font-weight:700;padding-top:18px;margin-top:6px;border-top:1px solid var(--line)}

/* Segmented radios + chips (reuse .seg from style.css) */
.fld .seg{gap:8px}
.seg--wrap span{height:40px;font-size:13.5px}
.seg input[type=checkbox]:checked+span{background:rgba(227,31,38,.16);border-color:var(--accent);color:var(--fg)}
.seg label{display:inline-flex}

/* Declaration ticks */
.tick{grid-column:1/-1;display:grid;grid-template-columns:24px 1fr;gap:6px 14px;align-items:start;padding:16px 18px;border:1px solid var(--line);border-radius:var(--r-inner);background:var(--bg);cursor:pointer;font-size:15px;color:var(--fg-2);transition:border-color .2s}
.tick input{position:absolute;opacity:0;pointer-events:none}
.tick__box{width:22px;height:22px;border-radius:6px;border:1.5px solid rgba(238,241,247,.4);margin-top:3px;display:grid;place-items:center;transition:background .2s,border-color .2s}
.tick input:checked~.tick__box{background:var(--accent);border-color:var(--accent)}
.tick input:checked~.tick__box::after{content:"";width:10px;height:6px;border:2px solid #fff;border-top:0;border-inline-end:0;transform:rotate(-45deg) translate(1px,-1px)}
html[dir=rtl] .tick input:checked~.tick__box::after{border-inline-end:2px solid #fff;border-inline-start:0;transform:rotate(45deg) translate(-1px,-1px)}
.tick input:focus-visible~.tick__box{outline:2px solid var(--fg);outline-offset:2px}
.tick:has(input:checked){border-color:rgba(238,241,247,.3);color:var(--fg)}
.tick .fld__err{grid-column:2}
.tick.is-err{border-color:#FF6B6B}

/* Repeat groups */
.rep{display:grid;gap:14px}
.rep__item{border:1px solid var(--line);border-radius:var(--r-inner);padding:18px;background:rgba(7,18,42,.5)}
.rep__item .grid{margin-top:14px}
.rep__head{display:flex;align-items:center;gap:6px;font-size:15px}
.rep__n{font-family:var(--f-num)}
.rep__opt{font-style:normal;font-size:12px;color:var(--muted);border:1px solid var(--line);border-radius:var(--r-pill);padding:1px 10px;margin-inline-start:8px}
.rep__rm{margin-inline-start:auto;background:none;border:0;color:var(--muted);font-size:13px;cursor:pointer;padding:6px 10px;border-radius:var(--r-pill)}
.rep__rm:hover{color:#FF9A9A;background:rgba(255,107,107,.08)}
.rep__add{margin-top:14px;height:42px}

/* File drop zones */
.drop{position:relative;display:flex;align-items:center;gap:14px;min-height:64px;padding:14px 16px;border:1.5px dashed rgba(238,241,247,.24);border-radius:var(--r-inner);background:var(--bg);cursor:pointer;transition:border-color .2s,background .2s}
.drop:hover,.drop.is-over{border-color:var(--fg);background:rgba(255,255,255,.03)}
.drop__ic{flex:none;width:34px;height:34px;border-radius:50%;background:rgba(227,31,38,.14);position:relative}
.drop__ic::before{content:"";position:absolute;left:50%;top:9px;width:2px;height:14px;background:var(--accent);transform:translateX(-50%)}
.drop__ic::after{content:"";position:absolute;left:50%;top:10px;width:8px;height:8px;border-top:2px solid var(--accent);border-left:2px solid var(--accent);transform:translateX(-50%) rotate(45deg)}
.drop__txt{font-size:14px;color:var(--fg-2);pointer-events:none}
.drop__btn{pointer-events:auto;background:none;border:0;color:var(--fg);font-weight:600;text-decoration:underline;text-decoration-color:var(--accent);text-underline-offset:4px;cursor:pointer;padding:0}
.drop__input{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.drop__list{list-style:none;display:grid;gap:6px;margin-top:8px}
.drop__list:empty{display:none;margin:0}
.drop__list li{display:flex;align-items:center;gap:12px;padding:8px 8px 8px 14px;border-radius:10px;background:var(--surface-2);font-size:14px}
html[dir=rtl] .drop__list li{padding:8px 14px 8px 8px}
.drop__name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.drop__size{font-family:var(--f-num);font-size:12px;color:var(--muted)}
.drop__rm{width:30px;height:30px;border-radius:50%;border:0;background:rgba(255,255,255,.06);color:var(--fg);font-size:18px;line-height:1;cursor:pointer}
.drop__rm:hover{background:rgba(255,107,107,.18)}

/* Signature */
.sig{position:relative;border:1px solid rgba(238,241,247,.2);border-radius:var(--r-inner);background:#F4F6FB;overflow:hidden}
.sig__pad{display:block;width:100%;height:auto;aspect-ratio:900/260;touch-action:none;cursor:crosshair}
.sig__hint{position:absolute;inset:auto 0 40%;text-align:center;color:#8A94AB;font-size:14px;pointer-events:none;transition:opacity .2s}
.sig.is-signed .sig__hint{opacity:0}
.sig::after{content:"";position:absolute;inset-inline:24px;bottom:28%;border-bottom:1px dashed #B5BDD0;pointer-events:none}
.sig__clr{position:absolute;top:10px;inset-inline-end:10px;height:34px;padding:0 14px;font-size:13px;color:#0A1733;border-color:rgba(10,23,51,.25);background:#fff;z-index:1}
.sig__clr:hover{background:#eef1f7}

/* Note */
.note{grid-column:1/-1;border-inline-start:3px solid var(--accent);background:rgba(227,31,38,.06);padding:14px 18px;border-radius:0 var(--r-inner) var(--r-inner) 0;font-size:14px;color:var(--fg-2);line-height:1.7}
html[dir=rtl] .note{border-radius:var(--r-inner) 0 0 var(--r-inner)}

/* Review */
.review{display:grid;gap:10px;margin-top:20px}
.review__sec{border:1px solid var(--line);border-radius:var(--r-inner);background:var(--bg)}
.review__sec summary{display:flex;align-items:center;gap:12px;padding:14px 18px;cursor:pointer;list-style:none}
.review__sec summary::-webkit-details-marker{display:none}
.review__sec summary::before{content:"";width:8px;height:8px;border-inline-end:2px solid var(--muted);border-bottom:2px solid var(--muted);transform:rotate(-45deg);transition:transform .2s}
html[dir=rtl] .review__sec summary::before{transform:rotate(45deg)}
.review__sec[open] summary::before{transform:rotate(45deg)}
.review__edit{margin-inline-start:auto;background:none;border:1px solid var(--line);border-radius:var(--r-pill);color:var(--fg-2);font-size:13px;padding:4px 14px;cursor:pointer}
.review__edit:hover{color:var(--fg);border-color:rgba(238,241,247,.4)}
.review dl{padding:0 18px 14px;display:grid}
.review dl div{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:16px;padding:9px 0;border-top:1px solid var(--line);font-size:14px}
.review dt{color:var(--muted)}
.review dd{overflow-wrap:anywhere}

/* Actions + upload progress */
.kyc-actions{display:flex;align-items:center;gap:12px;margin-top:36px;padding-top:24px;border-top:1px solid var(--line)}
.kyc-actions__count{margin-inline:auto;font-size:13px;color:var(--muted)}
.kyc-actions #prevBtn[hidden]+.kyc-actions__count{margin-inline-start:0}
.kyc-actions .btn:disabled{opacity:.6;cursor:progress}
.upload{margin-top:16px}
.upload__bar{height:6px;border-radius:6px;background:var(--line);overflow:hidden}
.upload__bar span{display:block;height:100%;width:0;background:var(--accent);transition:width .2s}
.upload p{font-size:13px;color:var(--fg-2);margin-top:8px}
.hp{position:absolute!important;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;opacity:0}

/* Done */
.kyc-done{max-width:640px;margin-inline:auto;text-align:center;display:flex;flex-direction:column;align-items:center;gap:16px;padding-block:24px;outline:none}
.kyc-done p{color:var(--fg-2)}
.kyc-done__icon{width:72px;height:72px;border-radius:50%;background:rgba(61,220,151,.14);display:grid;place-items:center}
.kyc-done__icon svg{width:34px;height:34px;fill:none;stroke:var(--dn);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.kyc-done__ref{display:flex;flex-direction:column;gap:4px;padding:16px 28px;border:1px solid var(--line);border-radius:var(--r-box);background:var(--surface)}
.kyc-done__ref b{font-family:var(--f-num);font-size:24px;color:var(--fg)}

@media (max-width:960px){
  .kyc-grid{grid-template-columns:1fr}
  .kyc-hero__inner{grid-template-columns:1fr}
  .steps{position:sticky;top:64px;z-index:5;background:rgba(7,18,42,.94);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);padding:12px 0 10px;border-bottom:1px solid var(--line)}
  .steps__bar{margin-bottom:10px}
  .steps ol{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none}
  .steps ol::-webkit-scrollbar{display:none}
  .steps button{padding:6px 10px 6px 6px;white-space:nowrap;font-size:13.5px;border-radius:var(--r-pill)}
  .steps li:not(.is-cur) .steps__t{display:none}
  .steps__n{width:26px;height:26px}
  .steps__save{display:none}
}
@media (max-width:640px){
  .grid{grid-template-columns:1fr}
  .kyc-form{padding:20px 16px;border-radius:16px}
  .kyc-actions{flex-wrap:wrap}
  .kyc-actions .btn{flex:1}
  .kyc-actions__count{order:-1;flex-basis:100%;text-align:center}
  .review dl div{grid-template-columns:1fr;gap:2px}
  .drop{flex-wrap:wrap}
}
@media (max-width:560px){ .steps{top:64px} }
.kyc-page button.btn--ghost,body.admin button.btn--ghost{background:transparent}
.kyc-page button.btn--ghost:hover,body.admin button.btn--ghost:hover{background:rgba(255,255,255,.06)}