/* ── OTP VERIFY ROW (registration + report) ── */
.otp-row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.otp-row .btn{flex-shrink:0}
.otp-row input{flex:1;min-width:110px;padding:10px 12px;border:1px solid var(--border);border-radius:var(--radius);background:var(--page-bg);color:var(--text);font-family:inherit;transition:all .15s;-webkit-appearance:none;appearance:none}
.otp-row input:focus{outline:none;border-color:var(--cta);background:var(--surface);box-shadow:0 0 0 3px rgba(var(--cta-rgb),0.12)}
.otp-status{font-size:13px;margin-top:6px;display:none;align-items:center;gap:5px}
/* ── SEGMENTED OTP BOXES + BIG CTA (favorites phone sync) ── */
.fav-sync-cta-btn{width:100%;min-height:48px;padding:12px 18px;border-radius:var(--radius);border:1px solid var(--info-border2);background:var(--info-bg);color:var(--text);font-size:14.5px;font-weight:600;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:6px;margin-top:14px;transition:all .15s}
.fav-sync-cta-btn:hover:not(:disabled){background:var(--info-bg-hover);border-color:var(--info-border)}
.fav-sync-cta-btn:disabled{opacity:.5;cursor:not-allowed}
#fav-sync-phone-send-btn{background:transparent;color:var(--cta);border-color:var(--cta)}
#fav-sync-phone-send-btn:hover:not(:disabled){background:rgba(var(--cta-rgb),0.06);border-color:var(--cta)}
#reg-phone-otp-send-btn{background:transparent;color:var(--cta);border-color:var(--cta)}
#reg-phone-otp-send-btn:hover:not(:disabled){background:rgba(var(--cta-rgb),0.06);border-color:var(--cta)}
#report-phone-send-btn{background:transparent;color:var(--cta);border-color:var(--cta)}
#report-phone-send-btn:hover:not(:disabled){background:rgba(var(--cta-rgb),0.06);border-color:var(--cta)}
#fav-login-phone-send-btn{background:transparent;color:var(--cta);border-color:var(--cta)}
#fav-login-phone-send-btn:hover:not(:disabled){background:rgba(var(--cta-rgb),0.06);border-color:var(--cta)}
/* !important here: #reg-phone-otp-send-btn also carries .reg-wiz-pill-btn
   (register.css), which sets the same properties !important for its
   "ready" soft-blue look — this still needs to win while not-ready. */
#fav-sync-phone-send-btn.not-ready,#reg-phone-otp-send-btn.not-ready,#report-phone-send-btn.not-ready,#fav-login-phone-send-btn.not-ready{background:var(--surface)!important;color:var(--text-sub)!important;border-color:var(--border)!important}
#fav-sync-phone-send-btn.not-ready:hover,#reg-phone-otp-send-btn.not-ready:hover,#report-phone-send-btn.not-ready:hover,#fav-login-phone-send-btn.not-ready:hover{background:var(--surface)!important}
/* Visually six boxes, but functionally ONE real, fully-transparent
   <input> (position:absolute, covering the whole row) that captures
   every keystroke, paste AND autofill/autocomplete suggestion — the
   six .otp-box spans underneath are pure display, mirrored from that
   real input's value. Browsers/keyboards only ever reliably autofill
   a SINGLE field; six separate real inputs kept losing the SMS-code
   keyboard-suggestion-chip no matter how the value was redistributed
   after the fact, so this removes the ambiguity at the source. */
.otp-box-row{display:flex;position:relative}
.otp-box{width:38px;height:42px;display:inline-flex;align-items:center;justify-content:center;font-size:16px;font-weight:700;border:1px solid var(--border);border-radius:var(--radius);background:var(--page-bg);color:var(--text);transition:all .15s}
.otp-box:not(:last-child){margin-right:8px}
.otp-box.active{border-color:var(--cta);background:var(--surface);box-shadow:0 0 0 3px rgba(var(--cta-rgb),.12)}
.otp-box-row.otp-disabled .otp-box{opacity:.6}
.otp-real-input{position:absolute;inset:0;width:100%;height:100%;opacity:0;border:0;padding:0;margin:0;background:transparent;cursor:text;-webkit-appearance:none;appearance:none}
/* ── PHOTO UPLOAD ROW ── */
.photo-upload-row{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.photo-upload-preview{width:72px;height:72px;border-radius:50%;background:var(--page-bg);border:1px solid var(--border);display:flex;align-items:center;justify-content:center;overflow:hidden;flex-shrink:0}
.report-screenshot-preview{width:72px;height:56px;border-radius:8px;background:var(--page-bg);border:1px solid var(--border);display:flex;align-items:center;justify-content:center;overflow:hidden;flex-shrink:0}
.photo-upload-info{flex:1;min-width:180px}
@media(max-width:420px){
  .otp-row{flex-direction:column;align-items:stretch}
  .otp-row input{max-width:100%!important;width:100%}
  .otp-row .btn{width:100%;justify-content:center}
  .photo-upload-row{justify-content:center;text-align:center}
  .photo-upload-info{min-width:100%;text-align:center}
  .photo-upload-info input[type=file]{width:100%}
}
.status-msg{font-size:13px;padding:10px 14px;border-radius:var(--radius);margin-top:10px;display:none;align-items:center;gap:8px}
.status-msg i{font-size:16px;flex-shrink:0}
.status-msg.ok{background:var(--info-bg);color:var(--link-light);display:flex;border:1px solid var(--info-border)}
.status-msg.err{background:var(--danger-bg);color:var(--danger);display:flex;border:1px solid var(--danger-border)}