/* Athlete SMS login: phone step + one-time-code step.
   The code field is ONE real, full-size input (so iOS/Android autofill and paste attach to it);
   the six slots are a purely visual mirror drawn on top of it. */
.hiat-auth-card>.lg-title{margin:0 0 22px;text-align:center;font-size:1.05rem;font-weight:600!important}
.lg-form{display:grid;gap:12px}
.lg-label{margin:0!important;font-size:.88rem;font-weight:600;color:var(--text)}
.lg-error{min-height:1.4em;margin:0;font-size:.86rem;line-height:1.6}
.lg-hint{margin:2px 0 0;text-align:center;font-size:.8rem;line-height:1.8;color:var(--muted)}
.lg-resend{display:flex;justify-content:center;align-items:center;min-height:36px;font-size:.88rem;font-variant-numeric:tabular-nums}
.lg-resend .hiat-muted{display:inline!important}

.hiat-auth-card .lg-form input.lg-phone{min-height:60px;padding-inline:18px;border:1.5px solid var(--border);border-radius:18px;background:var(--surface);color:var(--text);font-size:1.4rem;font-weight:600;letter-spacing:.06em;text-align:center;font-variant-numeric:tabular-nums}
.hiat-auth-card .lg-form input.lg-phone::placeholder{color:var(--muted);opacity:.55;font-weight:400}
.hiat-auth-card .lg-form input.lg-phone:focus{outline:0;border-color:var(--primary);box-shadow:0 0 0 4px color-mix(in srgb,var(--primary) 14%,transparent)}
.hiat-auth-card .lg-form input.lg-phone[aria-invalid=true]{border-color:var(--error)}

.lg-recipient{display:grid;gap:4px;margin:-6px 0 6px;text-align:center}
.lg-recipient p{margin:0;font-size:.88rem;color:var(--muted)}
.lg-recipient div{display:flex;justify-content:center;align-items:center;gap:10px;flex-wrap:wrap}
.lg-recipient b{font-size:1.1rem;font-variant-numeric:tabular-nums;letter-spacing:.04em}

/* One plate, six cells: reads like a race-number plate rather than six separate boxes. */
.otp-plate{position:relative;border:1.5px solid var(--border);border-radius:18px;background:var(--surface);cursor:text;transition:border-color .15s,box-shadow .15s}
.otp-plate.is-focused{border-color:var(--primary);box-shadow:0 0 0 4px color-mix(in srgb,var(--primary) 14%,transparent)}
.otp-plate.has-error{border-color:var(--error);box-shadow:0 0 0 4px color-mix(in srgb,var(--error) 12%,transparent)}
.hiat-auth-card .otp-plate input.otp-real{position:absolute;inset:0;z-index:1;width:100%;height:100%;min-height:0;margin:0;padding:0;border:0;border-radius:inherit;background:transparent;box-shadow:none;outline:0;color:transparent;-webkit-text-fill-color:transparent;caret-color:transparent;font-size:16px;letter-spacing:0;text-align:center}
.otp-plate input.otp-real::selection{background:transparent}
.otp-plate input.otp-real:-webkit-autofill{-webkit-text-fill-color:transparent;transition:background-color 99999s}
.otp-slots{position:relative;z-index:2;display:grid;grid-template-columns:repeat(var(--otp-n,6),1fr);pointer-events:none}
.otp-slot{position:relative;display:grid;place-items:center;height:clamp(62px,18vw,76px);font:600 1.9rem/1 Vazirmatn,system-ui,sans-serif;font-variant-numeric:tabular-nums;color:var(--text)}
.otp-slot+.otp-slot::before{content:"";position:absolute;inset-block:24%;inset-inline-start:0;width:1px;background:var(--border)}
.otp-slot.is-active::after{content:"";position:absolute;inset-inline:26%;bottom:13px;height:3px;border-radius:3px;background:var(--primary);animation:otp-caret 1.05s steps(1,end) infinite}
.otp-plate.is-busy .otp-slot{opacity:.55}
.otp-plate.shake-a{animation:otp-shake-a .32s ease-in-out}
.otp-plate.shake-b{animation:otp-shake-b .32s ease-in-out}
@keyframes otp-caret{50%{opacity:0}}
@keyframes otp-shake-a{25%{transform:translateX(-6px)}75%{transform:translateX(6px)}}
@keyframes otp-shake-b{25%{transform:translateX(-6px)}75%{transform:translateX(6px)}}
@media (prefers-reduced-motion:reduce){.otp-plate,.otp-slot.is-active::after{animation:none!important;transition:none!important}}
@media (max-width:360px){.otp-slot{font-size:1.6rem}}

/* Unfinished gateway payments: continue or cancel, with the remaining hold time. */
.hiat-pending{display:grid;gap:12px;margin:0 0 16px;padding:16px;border:1px solid var(--border);border-inline-start:4px solid var(--primary);border-radius:18px;background:var(--surface)}
.hiat-pending h2{margin:0;font-size:1.05rem}
.hiat-pending.is-compact{margin:12px 0;padding:12px 14px;border-radius:14px}
.hiat-pending-item{display:grid;gap:12px}
.hiat-pending-item+.hiat-pending-item{padding-top:12px;border-top:1px solid var(--border)}
.hiat-pending-info{display:grid;grid-template-columns:1fr auto;gap:2px 12px;align-items:baseline}
.hiat-pending-info strong{font-size:.95rem}
.hiat-pending-amount{font-weight:700;font-variant-numeric:tabular-nums}
.hiat-pending-time{grid-column:1/-1;font-size:.82rem;color:var(--muted);font-variant-numeric:tabular-nums}
.hiat-pending-actions{display:flex;flex-wrap:wrap;gap:10px}
.hiat-pending-actions>*{flex:1 1 140px;min-height:48px;display:inline-flex;align-items:center;justify-content:center;text-decoration:none;text-align:center}
.hiat-pending-confirm{display:grid;gap:10px}
.hiat-pending-confirm p{margin:0;font-size:.86rem;line-height:1.9;color:var(--muted)}
.hiat-button.hiat-danger{background:var(--error);border-color:var(--error);color:#fff}
.hiat-pending .hiat-small{margin:0;color:var(--muted)}