/* ============================================================
   Javis Login – Stylesheet v1.1
   ============================================================ */

@font-face {
    font-family: 'JvsFont';
    src: url('../fonts/jvsfont.woff2') format('woff2');
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}

.jvs-wrap {
    --jvs-c1:          var(--jvs-color1, #4ccb70);
    --jvs-c2:          var(--jvs-color2, #2d9e4a);
    --jvs-green:       var(--jvs-c1);
    --jvs-green-dark:  var(--jvs-c2);
    --jvs-green-light: #edfbf2;
    --jvs-text:        #1a1a2e;
    --jvs-muted:       #6b7280;
    --jvs-light:       #9ca3af;
    --jvs-border:      #e5e7eb;
    --jvs-white:       #ffffff;
    --jvs-red:         #ef4444;
    --jvs-red-light:   #fef2f2;
    --jvs-input-bg:    #f9fafb;
    --jvs-radius:      20px;
    font-family: 'JvsFont', 'Vazirmatn', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
    font-size: var(--jvs-font-size, 15px);
    direction: rtl;
    position: relative;
}
.jvs-wrap *, .jvs-wrap *::before, .jvs-wrap *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    font-family: 'JvsFont', 'Vazirmatn', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif !important;
}
/* Override theme body font only inside our wrapper */
#jvsLoginWrap, #jvsBioManagerWrap { font-family: 'JvsFont', 'Vazirmatn', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif !important; }

/* ── CONFETTI ── */
.jvs-confetti { position:fixed; inset:0; pointer-events:none; z-index:9999; opacity:0; transition:opacity .5s; }
.jvs-confetti.active { opacity:1; }

/* ── CARD ── */
.jvs-card {
    background: #fff;
    border-radius: var(--jvs-radius);
    box-shadow: 0 20px 60px rgba(0,0,0,.08), 0 4px 20px rgba(0,0,0,.04);
    border: 1px solid rgba(0,0,0,.06);
    padding: 36px 32px;
    max-width: 420px;
    margin: 0 auto;
    position: relative;
    overflow: hidden;
}

/* ── SHIMMER BAR ── */
.jvs-shimmer-bar {
    position: absolute; top:0; left:0; right:0; height:3px;
    background: linear-gradient(90deg, var(--jvs-c1), var(--jvs-c2), var(--jvs-c1));
    background-size: 200% 100%;
    animation: jvsShimmer 3s linear infinite;
}
@keyframes jvsShimmer { 0%{background-position:200% 0} 100%{background-position:-200% 0} }

/* ── OVERLAY ── */
.jvs-overlay {
    position:absolute; inset:0;
    background:rgba(255,255,255,.82);
    backdrop-filter:blur(4px);
    border-radius:var(--jvs-radius);
    display:flex; align-items:center; justify-content:center;
    z-index:10; opacity:0; pointer-events:none; transition:opacity .25s;
}
.jvs-overlay.active { opacity:1; pointer-events:auto; }
.jvs-dots { display:flex; gap:7px; }
.jvs-dots span {
    width:10px; height:10px;
    background:var(--jvs-c1); border-radius:50%;
    animation:jvsDot .8s ease-in-out infinite;
}
.jvs-dots span:nth-child(2){animation-delay:.15s;}
.jvs-dots span:nth-child(3){animation-delay:.3s;}
@keyframes jvsDot{0%,80%,100%{transform:scale(.7);opacity:.5}40%{transform:scale(1.2);opacity:1}}

/* ── BRAND ── */
.jvs-brand { text-align:center; margin-bottom:22px; }
.jvs-logo-wrap { position:relative; display:inline-block; margin-bottom:16px; }
.jvs-logo {
    width:74px; height:74px;
    background:linear-gradient(145deg, var(--jvs-c1), var(--jvs-c2));
    border-radius:22px;
    display:flex; align-items:center; justify-content:center;
    box-shadow:0 8px 28px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.25);
    animation:jvsLogoPulse 3s ease-in-out infinite; overflow:hidden;
}
.jvs-logo svg { width:36px; height:36px; }
.jvs-logo img { width:100%; height:100%; object-fit:contain; padding:8px; }
@keyframes jvsLogoPulse{0%,100%{box-shadow:0 8px 28px rgba(0,0,0,.18),inset 0 1px 0 rgba(255,255,255,.25)}50%{box-shadow:0 12px 36px rgba(0,0,0,.25),inset 0 1px 0 rgba(255,255,255,.25)}}
.jvs-logo-ring { position:absolute; inset:-8px; border:2px solid rgba(0,0,0,.08); border-radius:28px; animation:jvsRingPulse 2.5s ease-in-out infinite; }
.jvs-logo-ring-2 { inset:-16px; border-width:1px; border-radius:34px; animation-delay:.5s; }
@keyframes jvsRingPulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.35;transform:scale(1.05)}}
.jvs-form-title { font-size:1.3em; font-weight:900; color:var(--jvs-text); letter-spacing:-0.5px; margin-bottom:5px; }
.jvs-form-desc  { font-size:.82em; color:var(--jvs-muted); line-height:1.6; }

/* ── STEP ── */
.jvs-step { animation:jvsStepIn .4s cubic-bezier(.16,1,.3,1) both; }
.jvs-hidden { display:none !important; }
@keyframes jvsStepIn  {from{opacity:0;transform:translateX(-16px)}to{opacity:1;transform:translateX(0)}}
@keyframes jvsStepInR {from{opacity:0;transform:translateX(16px)}to{opacity:1;transform:translateX(0)}}
.jvs-step.from-right { animation-name:jvsStepInR; }

/* ── LABEL ── */
.jvs-label { display:block; font-size:.8em; font-weight:700; color:var(--jvs-text); margin-bottom:8px; }

/* ── PHONE ROW ── */
.jvs-phone-row {
    display:flex;
    border:2px solid var(--jvs-border);
    border-radius:14px; overflow:hidden;
    background:var(--jvs-input-bg);
    transition:border-color .25s, box-shadow .25s;
    direction:ltr; margin-bottom:14px;
}
.jvs-phone-row:focus-within {
    border-color:var(--jvs-c1);
    background:#fff;
    box-shadow:0 0 0 4px rgba(0,0,0,.06);
}

/* ── COUNTRY BUTTON ── */
.jvs-country-btn {
    display:flex; align-items:center; gap:5px;
    padding:0 10px 0 12px;
    background:transparent;
    border:none; border-right:1.5px solid var(--jvs-border);
    cursor:pointer; flex-shrink:0;
    font-family:inherit;
    transition:background .2s, border-color .25s;
    outline:none;
    white-space:nowrap;
}
.jvs-phone-row:focus-within .jvs-country-btn { border-right-color:rgba(0,0,0,.1); }
.jvs-country-btn:hover { background:rgba(0,0,0,.03); }
.jvs-country-flag { font-size:1.15em; line-height:1; }
.jvs-country-dial { font-size:.8em; font-weight:700; color:var(--jvs-muted); direction:ltr; letter-spacing:.5px; }
.jvs-country-chevron { color:var(--jvs-light); flex-shrink:0; transition:transform .2s; }
.jvs-country-btn.open .jvs-country-chevron { transform:rotate(180deg); }

.jvs-phone-row input {
    flex:1; min-width:0;
    height:52px; border:none; background:transparent;
    padding:0 14px;
    font-family:inherit; font-size:1.1em; font-weight:700;
    letter-spacing:2px; color:var(--jvs-text);
    outline:none; direction:ltr; text-align:left;
}
.jvs-phone-row input::placeholder { letter-spacing:0; font-weight:400; color:#c4c4c4; font-size:.875em; }

/* ── COUNTRY DROPDOWN ── */
.jvs-country-drop {
    position:absolute;
    top:calc(100% + 6px);
    right:0; left:0;
    z-index:9999;
    background:#fff;
    border:1.5px solid var(--jvs-border);
    border-radius:16px;
    box-shadow:0 16px 48px rgba(0,0,0,.14);
    overflow:hidden;
    opacity:0; pointer-events:none;
    transform:translateY(-8px) scale(.97);
    transition:opacity .22s cubic-bezier(.16,1,.3,1), transform .22s cubic-bezier(.16,1,.3,1);
    max-width:420px;
    margin:0 auto;
}
/* position it relative to the jvs-wrap */
.jvs-wrap { position:relative; }
.jvs-country-drop.open { opacity:1; pointer-events:auto; transform:translateY(0) scale(1); }

.jvs-country-search-wrap {
    display:flex; align-items:center; gap:8px;
    padding:10px 14px;
    border-bottom:1.5px solid var(--jvs-border);
    background:#fafafa;
}
.jvs-country-search-wrap svg { flex-shrink:0; }
#jvsCountrySearch {
    flex:1; border:none; outline:none; background:transparent;
    font-family:inherit; font-size:.875em; color:var(--jvs-text); direction:rtl;
}
#jvsCountrySearch::placeholder { color:var(--jvs-light); }

.jvs-country-list {
    max-height:220px; overflow-y:auto;
    scrollbar-width:thin;
    scrollbar-color:var(--jvs-border) transparent;
}
.jvs-country-list::-webkit-scrollbar { width:4px; }
.jvs-country-list::-webkit-scrollbar-thumb { background:var(--jvs-border); border-radius:4px; }

.jvs-country-item {
    display:flex; align-items:center; gap:10px;
    padding:10px 14px;
    cursor:pointer; font-size:.875em;
    transition:background .15s;
    border-bottom:1px solid #f3f4f6;
    direction:rtl;
}
.jvs-country-item:last-child { border-bottom:none; }
.jvs-country-item:hover { background:#f9fafb; }
.jvs-country-item.selected { background:var(--jvs-green-light); }
.jvs-country-item-flag  { font-size:1.2em; flex-shrink:0; }
.jvs-country-item-name  { flex:1; font-weight:600; color:var(--jvs-text); }
.jvs-country-item-dial  { font-size:.8em; font-weight:700; color:var(--jvs-muted); direction:ltr; flex-shrink:0; }

.jvs-country-backdrop {
    position:fixed; inset:0; z-index:9998;
    display:none;
}
.jvs-country-backdrop.active { display:block; }

/* ── GENERIC INPUT ── */
.jvs-input {
    width:100%; height:46px;
    border:2px solid var(--jvs-border); border-radius:12px;
    padding:0 14px; font-family:inherit; font-size:.9em; font-weight:600;
    color:var(--jvs-text); background:var(--jvs-input-bg);
    outline:none; transition:all .25s;
}
.jvs-input:focus { border-color:var(--jvs-c1); background:#fff; box-shadow:0 0 0 3px rgba(0,0,0,.05); }

/* ── MAIN BUTTON ── */
.jvs-btn {
    width:100%; height:50px;
    background:linear-gradient(135deg, var(--jvs-c1) 0%, var(--jvs-c2) 100%);
    color:#fff; border:none; border-radius:13px;
    font-family:inherit; font-size:.95em; font-weight:800;
    cursor:pointer; display:flex; align-items:center; justify-content:center; gap:8px;
    box-shadow:0 6px 20px rgba(0,0,0,.15);
    transition:all .3s cubic-bezier(.16,1,.3,1);
    position:relative; overflow:hidden; margin-top:4px;
}
.jvs-btn::before { content:''; position:absolute; inset:0; background:linear-gradient(135deg,rgba(255,255,255,.14),transparent 60%); pointer-events:none; }
.jvs-btn:hover:not(:disabled) { transform:translateY(-2px); box-shadow:0 10px 28px rgba(0,0,0,.2); }
.jvs-btn:active:not(:disabled) { transform:scale(.98); }
.jvs-btn:disabled { opacity:.55; pointer-events:none; }
.jvs-btn-danger { background:linear-gradient(135deg,#ef4444,#dc2626) !important; box-shadow:0 6px 20px rgba(239,68,68,.3) !important; }

/* ── BACK BUTTON ── */
.jvs-btn-back {
    display:flex; align-items:center; justify-content:flex-start; gap:7px;
    width:100%; height:42px;
    background:transparent; border:1.5px solid var(--jvs-border); border-radius:11px; padding:0 14px;
    font-family:inherit; font-size:.82em; font-weight:600;
    color:var(--jvs-muted); cursor:pointer; transition:all .2s; margin-top:12px;
}
.jvs-btn-back:hover { border-color:var(--jvs-c1); color:var(--jvs-c2); background:var(--jvs-green-light); }

/* ── METHOD GRID ── */
.jvs-method-title { font-size:.82em; font-weight:700; color:var(--jvs-muted); text-align:center; margin-bottom:12px; }
.jvs-method-grid  { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.jvs-method-btn {
    display:flex; flex-direction:column; align-items:center; justify-content:center; gap:9px;
    padding:18px 10px;
    border:2px solid var(--jvs-border); border-radius:16px; background:var(--jvs-input-bg);
    cursor:pointer; font-family:inherit; font-size:.78em; font-weight:700;
    color:var(--jvs-muted); transition:all .25s cubic-bezier(.16,1,.3,1);
}
.jvs-method-btn:hover { border-color:var(--jvs-c1); color:var(--jvs-c2); background:var(--jvs-green-light); transform:translateY(-2px); box-shadow:0 5px 18px rgba(0,0,0,.08); }
.jvs-method-btn:active { transform:scale(.97); }
.jvs-method-icon { width:48px; height:48px; border-radius:14px; background:#fff; border:1.5px solid var(--jvs-border); display:flex; align-items:center; justify-content:center; color:var(--jvs-c2); transition:all .25s; box-shadow:0 2px 8px rgba(0,0,0,.05); }
.jvs-method-icon svg { width:26px; height:26px; }
.jvs-method-btn:hover .jvs-method-icon { background:var(--jvs-green-light); border-color:rgba(0,0,0,.1); box-shadow:0 4px 12px rgba(0,0,0,.1); }

/* ── BIO STEP ── */
.jvs-bio-wrap { display:flex; flex-direction:column; align-items:center; text-align:center; padding:8px 0; }
.jvs-bio-icon { width:108px; height:108px; border-radius:50%; background:var(--jvs-green-light); border:3px solid rgba(0,0,0,.07); display:flex; align-items:center; justify-content:center; color:var(--jvs-c2); margin-bottom:20px; animation:jvsBioPulse 2s ease-in-out infinite; }
.jvs-bio-icon svg { width:58px; height:58px; }
@keyframes jvsBioPulse{0%,100%{box-shadow:0 0 0 0 rgba(0,0,0,.08)}50%{box-shadow:0 0 0 16px rgba(0,0,0,.02)}}
.jvs-bio-title { font-size:1.05em; font-weight:800; color:var(--jvs-text); margin-bottom:6px; }
.jvs-bio-sub   { font-size:.8em; color:var(--jvs-muted); line-height:1.7; margin-bottom:18px; max-width:240px; }
.jvs-bio-status { display:inline-flex; align-items:center; gap:7px; font-size:.78em; font-weight:700; padding:7px 16px; border-radius:30px; transition:all .3s; }
.jvs-bio-status.scanning { color:var(--jvs-c2); background:var(--jvs-green-light); border:1px solid rgba(0,0,0,.07); animation:jvsStatusPulse 1.5s ease-in-out infinite; }
.jvs-bio-status.error { color:var(--jvs-red); background:var(--jvs-red-light); border:1px solid rgba(239,68,68,.2); animation:none; }
@keyframes jvsStatusPulse{0%,100%{opacity:1}50%{opacity:.6}}
.jvs-bio-dot { width:7px; height:7px; border-radius:50%; background:currentColor; flex-shrink:0; }
.scanning .jvs-bio-dot { animation:jvsDotPulse 1.5s ease-in-out infinite; }
@keyframes jvsDotPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.5)}}

/* ── OTP ── */
.jvs-otp-info { background:var(--jvs-green-light); border:1.5px solid rgba(0,0,0,.06); border-radius:14px; padding:13px 15px; text-align:center; margin-bottom:16px; display:flex; flex-direction:column; align-items:center; gap:6px; }
.jvs-otp-info-icon { width:36px; height:36px; background:linear-gradient(135deg,var(--jvs-c1),var(--jvs-c2)); border-radius:10px; display:flex; align-items:center; justify-content:center; box-shadow:0 4px 10px rgba(0,0,0,.12); }
.jvs-otp-info p { font-size:.82em; color:var(--jvs-muted); line-height:1.6; }
.jvs-otp-mobile { font-size:1em; font-weight:900; color:var(--jvs-text); direction:ltr; letter-spacing:2px; }
.jvs-otp-boxes { display:flex; gap:10px; justify-content:center; direction:ltr; margin-bottom:4px; }
.jvs-otp-box { width:62px; height:62px; border:2px solid var(--jvs-border); border-radius:16px; text-align:center; outline:none; font-family:inherit; font-size:1.6em; font-weight:900; color:var(--jvs-text); background:var(--jvs-input-bg); transition:all .2s cubic-bezier(.16,1,.3,1); caret-color:var(--jvs-c1); }
.jvs-otp-box:focus  { border-color:var(--jvs-c1); background:#fff; box-shadow:0 0 0 4px rgba(0,0,0,.05); transform:scale(1.04); }
.jvs-otp-box.filled { border-color:rgba(0,0,0,.1); background:var(--jvs-green-light); color:var(--jvs-c2); }
.jvs-otp-box.error  { border-color:var(--jvs-red) !important; background:var(--jvs-red-light) !important; color:var(--jvs-red) !important; animation:jvsShake .45s; }
.jvs-otp-box.ok     { border-color:var(--jvs-c1) !important; background:var(--jvs-green-light) !important; color:var(--jvs-c2) !important; transform:scale(1.06) !important; }
@keyframes jvsShake{0%,100%{transform:translateX(0)}20%{transform:translateX(-7px)}40%{transform:translateX(7px)}60%{transform:translateX(-5px)}80%{transform:translateX(5px)}}
.jvs-timer-wrap { display:flex; align-items:center; justify-content:center; gap:8px; margin-top:16px; font-size:.8em; color:var(--jvs-muted); }
.jvs-timer-badge { background:rgba(0,0,0,.05); border:1px solid rgba(0,0,0,.08); color:var(--jvs-c2); font-weight:800; padding:3px 12px; border-radius:20px; font-size:.85em; direction:ltr; min-width:52px; text-align:center; transition:all .3s; }
.jvs-timer-badge.expired { background:rgba(239,68,68,.08); border-color:rgba(239,68,68,.2); color:var(--jvs-red); }

/* ── SUCCESS ── */
.jvs-success { display:flex; flex-direction:column; align-items:center; text-align:center; padding:10px 0 6px; }
.jvs-check-wrap { position:relative; margin-bottom:24px; }
.jvs-check { width:94px; height:94px; background:linear-gradient(145deg,var(--jvs-c1),var(--jvs-c2)); border-radius:50%; display:flex; align-items:center; justify-content:center; box-shadow:0 16px 36px rgba(0,0,0,.18); animation:jvsCheckPop .6s cubic-bezier(.68,-.55,.27,1.55) both; }
.jvs-check svg { width:46px; height:46px; }
@keyframes jvsCheckPop{0%{opacity:0;transform:scale(.2) rotate(-20deg)}60%{transform:scale(1.12) rotate(4deg)}100%{opacity:1;transform:scale(1)}}
.jvs-ripple { position:absolute; inset:-12px; border:3px solid rgba(0,0,0,.1); border-radius:50%; animation:jvsRipple 1.5s ease-out infinite .3s; }
.jvs-ripple-2 { inset:-24px; border-width:2px; border-color:rgba(0,0,0,.05); animation-delay:.6s; }
@keyframes jvsRipple{0%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(1.18)}}
.jvs-success h3 { font-size:1.2em; font-weight:900; color:var(--jvs-text); margin-bottom:6px; }
.jvs-success p  { font-size:.82em; color:var(--jvs-muted); margin-bottom:22px; }
.jvs-progress { width:200px; height:4px; background:var(--jvs-border); border-radius:4px; overflow:hidden; }
.jvs-progress-fill { height:100%; border-radius:4px; background:linear-gradient(90deg,var(--jvs-c2),var(--jvs-c1)); animation:jvsProgressFill 2s linear forwards; }
@keyframes jvsProgressFill{from{width:0}to{width:100%}}

/* ── BIO MANAGER ── */
.jvs-bio-manager-wrap .jvs-bio-manager-card { background:#fff; border-radius:var(--jvs-radius); box-shadow:0 20px 60px rgba(0,0,0,.07); border:1px solid rgba(0,0,0,.06); max-width:520px; margin:0 auto; overflow:hidden; position:relative; }
.jvs-bm-header { display:flex; align-items:center; gap:16px; padding:28px 28px 20px; border-bottom:1.5px solid #f3f4f6; }
.jvs-bm-icon { width:56px; height:56px; flex-shrink:0; background:linear-gradient(145deg,var(--jvs-c1),var(--jvs-c2)); border-radius:18px; display:flex; align-items:center; justify-content:center; box-shadow:0 6px 20px rgba(0,0,0,.15); }
.jvs-bm-icon svg { width:28px; height:28px; }
.jvs-bm-header h3 { font-size:1.05em; font-weight:900; color:var(--jvs-text); margin-bottom:3px; }
.jvs-bm-header p  { font-size:.78em; color:var(--jvs-muted); line-height:1.5; }
.jvs-bio-support-badge { margin:16px 28px 0; display:inline-flex; align-items:center; gap:6px; font-size:.76em; font-weight:700; padding:5px 13px; border-radius:20px; }
.jvs-bio-support-badge.ok { color:var(--jvs-c2); background:var(--jvs-green-light); border:1px solid rgba(0,0,0,.07); }
.jvs-bio-support-badge.no { color:var(--jvs-red); background:var(--jvs-red-light); border:1px solid rgba(239,68,68,.2); }
.jvs-bm-section { padding:20px 28px; border-bottom:1.5px solid #f3f4f6; }
.jvs-bm-section:last-child { border-bottom:none; }
.jvs-bm-section-title { display:flex; align-items:center; gap:8px; font-size:.9em; font-weight:800; color:var(--jvs-text); margin-bottom:16px; }
.jvs-bm-field { margin-bottom:14px; }
.jvs-type-picker { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.jvs-type-opt { display:flex; flex-direction:column; align-items:center; gap:8px; padding:16px 10px; border:2px solid var(--jvs-border); border-radius:14px; background:var(--jvs-input-bg); cursor:pointer; font-family:inherit; font-size:.78em; font-weight:700; color:var(--jvs-muted); position:relative; transition:all .22s; }
.jvs-type-opt:hover { border-color:var(--jvs-c1); color:var(--jvs-c2); background:var(--jvs-green-light); }
.jvs-type-opt.selected { border-color:var(--jvs-c1); color:var(--jvs-c2); background:var(--jvs-green-light); box-shadow:0 0 0 3px rgba(0,0,0,.05); }
.jvs-type-opt-icon { width:42px; height:42px; border-radius:12px; background:#fff; border:1.5px solid var(--jvs-border); display:flex; align-items:center; justify-content:center; color:var(--jvs-c2); transition:all .22s; }
.jvs-type-opt-icon svg { width:22px; height:22px; }
.jvs-type-opt.selected .jvs-type-opt-icon,.jvs-type-opt:hover .jvs-type-opt-icon { background:rgba(0,0,0,.04); border-color:rgba(0,0,0,.1); }
.jvs-type-check { position:absolute; top:7px; left:7px; width:17px; height:17px; background:var(--jvs-c1); border-radius:50%; display:flex; align-items:center; justify-content:center; opacity:0; transform:scale(0); transition:all .2s cubic-bezier(.68,-.55,.27,1.55); }
.jvs-type-opt.selected .jvs-type-check { opacity:1; transform:scale(1); }
.jvs-bio-items { display:flex; flex-direction:column; gap:10px; }
.jvs-bio-item { display:flex; align-items:center; gap:14px; padding:14px 16px; background:var(--jvs-input-bg); border:1.5px solid var(--jvs-border); border-radius:14px; transition:all .2s; }
.jvs-bio-item:hover { border-color:rgba(0,0,0,.12); background:#fff; box-shadow:0 3px 12px rgba(0,0,0,.06); }
.jvs-bio-item-icon { width:44px; height:44px; flex-shrink:0; background:var(--jvs-green-light); border:1.5px solid rgba(0,0,0,.06); border-radius:12px; display:flex; align-items:center; justify-content:center; color:var(--jvs-c2); }
.jvs-bio-item-icon svg { width:22px; height:22px; }
.jvs-bio-item-meta { flex:1; min-width:0; }
.jvs-bio-item-label { font-size:.9em; font-weight:800; color:var(--jvs-text); margin-bottom:3px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.jvs-bio-item-info  { display:flex; align-items:center; gap:8px; font-size:.73em; color:var(--jvs-light); }
.jvs-bio-badge { background:rgba(0,0,0,.06); color:var(--jvs-c2); border:1px solid rgba(0,0,0,.06); padding:2px 8px; border-radius:16px; font-size:.68em; font-weight:700; }
.jvs-btn-icon-del { width:36px; height:36px; flex-shrink:0; border:none; background:transparent; border-radius:9px; cursor:pointer; display:flex; align-items:center; justify-content:center; color:var(--jvs-light); transition:all .2s; }
.jvs-btn-icon-del:hover { background:var(--jvs-red-light); color:var(--jvs-red); }
.jvs-empty { text-align:center; padding:30px 20px; }
.jvs-empty-icon { font-size:2.5rem; margin-bottom:10px; }
.jvs-empty p { font-size:.82em; color:var(--jvs-light); }

/* ── MODAL ── */
.jvs-modal-overlay { position:fixed; inset:0; background:rgba(0,0,0,.42); backdrop-filter:blur(8px); z-index:99999; display:flex; align-items:center; justify-content:center; padding:20px; opacity:0; pointer-events:none; transition:opacity .28s; }
.jvs-modal-overlay.active { opacity:1; pointer-events:auto; }
.jvs-modal { background:#fff; border-radius:24px; padding:32px 28px; max-width:340px; width:100%; text-align:center; box-shadow:0 28px 70px rgba(0,0,0,.18); transform:scale(.9) translateY(18px); transition:transform .35s cubic-bezier(.16,1,.3,1); }
.jvs-modal-overlay.active .jvs-modal { transform:scale(1) translateY(0); }
.jvs-modal-icon { width:92px; height:92px; border-radius:50%; background:var(--jvs-green-light); border:3px solid rgba(0,0,0,.06); display:flex; align-items:center; justify-content:center; margin:0 auto 18px; color:var(--jvs-c2); animation:jvsBioPulse 2s ease-in-out infinite; }
.jvs-modal-icon svg { width:48px; height:48px; }
.jvs-modal-title { font-size:1em; font-weight:800; color:var(--jvs-text); margin-bottom:6px; }
.jvs-modal-sub   { font-size:.8em; color:var(--jvs-muted); line-height:1.7; margin-bottom:18px; }

/* ── SPINNER ── */
.jvs-spinner { width:20px; height:20px; border:2.5px solid rgba(255,255,255,.3); border-top-color:#fff; border-radius:50%; animation:jvsSpin .65s linear infinite; }
@keyframes jvsSpin{to{transform:rotate(360deg)}}

/* ── RESPONSIVE ── */
@media(max-width:480px){
    .jvs-card{padding:26px 18px;border-radius:18px;}
    .jvs-otp-box{width:54px;height:56px;font-size:1.4em;}
    .jvs-otp-boxes{gap:8px;}
    .jvs-check{width:82px;height:82px;}
    .jvs-bm-header,.jvs-bm-section{padding-left:18px;padding-right:18px;}
    .jvs-country-drop{left:0;right:0;}
}
@media(max-width:360px){
    .jvs-method-grid,.jvs-type-picker{grid-template-columns:1fr;}
    .jvs-otp-box{width:48px;height:52px;}
}