/* ==========================================================
   BIOIQ AUTHENTICATION — Redesigned
   Orange #FF7A29 + Blue #1463d8 | Glassmorphism | Mobile-first
========================================================== */

@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;600;700&family=Inter:wght@300;400;500;600;700;800&family=IBM+Plex+Mono:wght@500;600&display=swap');

/* ==========================================================
ROOT
========================================================== */
:root{
    --primary:#FF7A29;
    --primary-dark:#E5590C;
    --primary-light:#FFAE6B;

    --vital:#00E5A0;
    --vital-soft:rgba(0,229,160,.14);
    --font-display:'Space Grotesk','Arial Rounded MT Bold',sans-serif;
    --font-mono:'IBM Plex Mono','SFMono-Regular',Consolas,monospace;

    --secondary:#1463d8;
    --secondary-light:#3b82f6;
    --secondary-soft:rgba(20,99,216,.14);

    --bg:#07090d;
    --bg2:#0c1119;

    --card:rgba(17,28,45,.82);
    --card-solid:#111c2d;
    --glass:rgba(255,255,255,.05);
    --glass-hover:rgba(255,255,255,.09);
    --glass-border:rgba(255,255,255,.1);

    --text:#ffffff;
    --muted:#9fb0c3;

    --danger:#ef4444;
    --success:#22c55e;

    --shadow:0 20px 70px rgba(0,0,0,.5);
    --shadow-orange:0 12px 40px rgba(255,143,47,.18);
    --shadow-blue:0 12px 40px rgba(20,99,216,.16);

    --radius:22px;
    --radius-sm:14px;

    --transition:.28s cubic-bezier(.4,0,.2,1);
}
@media (max-width:600px){
  html,body{min-height:100%;overflow-y:auto;overflow-x:hidden;font-size:13px}
  .auth-container{width:min(94vw,390px);margin:14px auto;padding:18px 14px;border-radius:22px}
  .auth-container h1{font-size:1.65rem}.auth-container h2{font-size:1.15rem}.auth-container p,.auth-container label,.auth-container input,.auth-container button{font-size:.78rem}
  .auth-container input,.auth-container button{min-height:42px;padding:10px 12px}.auth-container .auth-card{padding:14px;border-radius:16px}.background-blobs{position:fixed;inset:0;overflow:hidden}
}

/* Reliable icon spacing inside embedded auth and narrow iframe layouts. */
.input-group > i + input,
.input-group > i + select,
.input-group > i.fa-solid + input,
.input-group > i.fa-brands + input{
    padding-left:46px!important;
}
.input-group > i{
    left:16px!important;
    width:18px;
    text-align:center;
}
.input-group input,
.input-group select{
    min-width:0;
}
.checkbox{display:flex;align-items:flex-start;gap:12px;line-height:1.45;}
.checkbox input[type="checkbox"]{flex:0 0 20px;width:20px;height:20px;margin:1px 0 0;}

/* ======================================================================
   THEME BRIDGE — auth is bright by default and follows the main app when
   neetTheme is saved as "dark". Precision Practice is intentionally not
   included in this bridge.
   ====================================================================== */
:root{
    --bg:#f4f7fc;--bg2:#fff;--card:rgba(255,255,255,.94);--card-solid:#fff;
    --glass:rgba(20,65,120,.045);--glass-hover:rgba(20,65,120,.085);
    --glass-border:rgba(35,67,110,.15);--text:#14243c;--muted:#60728b;
    --shadow:0 20px 70px rgba(27,58,100,.16);
    --font-display:"Trebuchet MS","Arial Rounded MT Bold","Segoe UI",sans-serif;
}
html:not(.auth-dark) body{background:radial-gradient(circle at 8% 5%,rgba(255,122,41,.13),transparent 30%),radial-gradient(circle at 96% 85%,rgba(20,99,216,.12),transparent 34%),linear-gradient(135deg,#f8fbff,#edf3fb 55%,#fff);color:var(--text)}
html:not(.auth-dark) .auth-container{background:rgba(255,255,255,.9);border-color:rgba(35,67,110,.14)}
html:not(.auth-dark) .hero-panel{background:radial-gradient(circle at 12% 18%,rgba(255,122,41,.12),transparent 42%),radial-gradient(circle at 90% 75%,rgba(20,99,216,.12),transparent 48%),linear-gradient(160deg,rgba(255,255,255,.98),rgba(241,246,253,.92));border-color:rgba(35,67,110,.12)}
html:not(.auth-dark) .form-panel{background:rgba(255,255,255,.76)}
html:not(.auth-dark) .logo h1,html:not(.auth-dark) .logo h1 span{color:#17345d!important}
html:not(.auth-dark) .logo h1 strong{color:#f27b26!important}
html:not(.auth-dark) .hero-badge{color:#35516f;background:rgba(20,65,120,.045)}
html:not(.auth-dark) .hero-feature-card,html:not(.auth-dark) .tab-buttons{background:rgba(20,65,120,.045)}
html:not(.auth-dark) .input-group input,html:not(.auth-dark) .input-group select{color:#14243c;background:#fff;border-color:rgba(35,67,110,.18)}
html:not(.auth-dark) .input-group input:hover,html:not(.auth-dark) .input-group select:hover,html:not(.auth-dark) .input-group input:focus,html:not(.auth-dark) .input-group select:focus{background:#fff}
html:not(.auth-dark) .input-group input::placeholder{color:#8291a5}
html:not(.auth-dark) .tab:hover{color:#14243c;background:rgba(20,65,120,.07)}
html:not(.auth-dark) .modal-box{background:#fff;border-color:rgba(35,67,110,.16)}
html:not(.auth-dark) .modal{background:rgba(15,34,61,.28)}
html:not(.auth-dark) ::-webkit-scrollbar-track{background:rgba(35,67,110,.06)}
html.auth-dark{--bg:#07090d;--bg2:#0c1119;--card:rgba(17,28,45,.82);--card-solid:#111c2d;--glass:rgba(255,255,255,.05);--glass-hover:rgba(255,255,255,.09);--glass-border:rgba(255,255,255,.1);--text:#fff;--muted:#9fb0c3;--shadow:0 20px 70px rgba(0,0,0,.5)}
html.auth-dark body{background:linear-gradient(135deg,#050b16,#0d1b2f 55%,#0b1626);color:var(--text)}
html.auth-dark .logo h1,html.auth-dark .logo h1 span{color:#dce7f5!important}
html.auth-dark .logo h1 strong{color:#f27b26!important}
.logo h1,.logo h1 span,.logo h1 strong,.brand-wordmark,.brand-wordmark *{font-family:"Trebuchet MS","Arial Rounded MT Bold","Segoe UI",sans-serif!important;text-decoration:none!important}

/* ==========================================================
RESET
========================================================== */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}

html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}

body{
    font-family:Inter,system-ui,-apple-system,sans-serif;
    background:linear-gradient(135deg,#050b16,#0d1b2f 55%,#0b1626);
    color:var(--text);
    min-height:100vh;
    display:flex;
    align-items:center;
    justify-content:center;
    overflow-x:hidden;
    padding:24px;
}

input,select,button{font-family:inherit;font-size:inherit;color:inherit}

/* ==========================================================
BACKGROUND BLOBS
========================================================== */
.background-blobs{
    position:fixed;
    inset:0;
    overflow:hidden;
    z-index:-2;
    pointer-events:none;
}

.background-blobs .blob{
    position:absolute;
    border-radius:50%;
    filter:blur(90px);
    opacity:.16;
    animation:floatBlob 20s infinite ease-in-out;
}

.background-blobs .blob-orange{
    width:480px;
    height:480px;
    background:var(--primary);
    top:-120px;
    left:-140px;
}

.background-blobs .blob-blue{
    width:380px;
    height:380px;
    background:var(--secondary);
    right:-90px;
    top:200px;
    animation-delay:6s;
}

.background-blobs .blob-teal{
    width:420px;
    height:420px;
    background:#0ea5b7;
    bottom:-140px;
    left:30%;
    animation-delay:12s;
}

@keyframes floatBlob{
    0%{transform:translateY(0) scale(1)}
    50%{transform:translateY(-45px) scale(1.1)}
    100%{transform:translateY(0) scale(1)}
}

/* ==========================================================
MAIN CONTAINER — glass card
========================================================== */
.auth-container{
    width:min(1180px,100%);
    min-height:min(720px,92vh);
    margin:0 auto;
    display:grid;
    grid-template-columns:1.1fr 1fr;
    overflow:hidden;
    border-radius:32px;
    border:1px solid var(--glass-border);
    background:var(--card);
    backdrop-filter:blur(28px) saturate(140%);
    -webkit-backdrop-filter:blur(28px) saturate(140%);
    box-shadow:var(--shadow);
    position:relative;
}

.auth-container::before{
    content:"";
    position:absolute;
    inset:0;
    border-radius:32px;
    padding:1px;
    background:linear-gradient(140deg,rgba(255,143,47,.35),transparent 35%,transparent 65%,rgba(20,99,216,.35));
    -webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
    -webkit-mask-composite:xor;
    mask-composite:exclude;
    pointer-events:none;
}

/* ==========================================================
LEFT HERO PANEL
========================================================== */
.hero-panel{
    position:relative;
    overflow:hidden;
    padding:56px 48px;
    display:flex;
    flex-direction:column;
    justify-content:space-between;
    gap:32px;
    background:
        radial-gradient(circle at 12% 18%,rgba(255,143,47,.14),transparent 42%),
        radial-gradient(circle at 90% 75%,rgba(20,99,216,.2),transparent 48%),
        linear-gradient(160deg,rgba(255,255,255,.03),rgba(255,255,255,.01));
    border-right:1px solid var(--glass-border);
}

.hero-panel::after{
    content:"";
    position:absolute;
    inset:auto -20% -30% auto;
    width:340px;
    height:340px;
    border-radius:50%;
    background:radial-gradient(circle,rgba(20,99,216,.12),transparent 70%);
}

.brand-strip{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:18px;
    flex-wrap:wrap;
    position:relative;
    z-index:1;
}

.logo{
    display:flex;
    align-items:center;
    gap:16px;
}

.logo-circle{
    width:58px;
    height:58px;
    border-radius:18px;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:26px;
    color:#fff;
    background:linear-gradient(135deg,var(--primary),var(--secondary));
    box-shadow:var(--shadow-orange),var(--shadow-blue);
    flex-shrink:0;
}

.logo h1{
    font-size:30px;
    font-weight:800;
    letter-spacing:-.02em;
    line-height:1.1;
}

.logo p{
    color:var(--muted);
    font-size:.86rem;
    margin-top:2px;
}

.hero-pill{
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding:9px 16px;
    border-radius:999px;
    font-size:.78rem;
    font-weight:700;
    letter-spacing:.06em;
    text-transform:uppercase;
    color:var(--primary-light);
    background:rgba(255,143,47,.1);
    border:1px solid rgba(255,143,47,.3);
}

.hero-content h2{
    font-size:clamp(2rem,3.4vw,3rem);
    line-height:1.12;
    font-weight:800;
    letter-spacing:-.03em;
    margin-bottom:18px;
    position:relative;
    z-index:1;
}

.hero-content h2 em{
    font-style:normal;
    background:linear-gradient(120deg,var(--primary),var(--secondary-light));
    -webkit-background-clip:text;
    background-clip:text;
    color:transparent;
}

.hero-content p{
    color:var(--muted);
    font-size:1rem;
    line-height:1.8;
    max-width:440px;
    position:relative;
    z-index:1;
}

.hero-feature-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:14px;
    position:relative;
    z-index:1;
}

.hero-feature-card{
    display:grid;
    gap:6px;
    padding:18px 16px;
    border-radius:18px;
    background:var(--glass);
    border:1px solid var(--glass-border);
    backdrop-filter:blur(12px);
    transition:var(--transition);
}

.hero-feature-card:hover{
    transform:translateY(-4px);
    border-color:rgba(255,143,47,.35);
    background:var(--glass-hover);
}

.hero-feature-card i{
    font-size:1.3rem;
    color:var(--primary-light);
    margin-bottom:4px;
}

.hero-feature-card strong{
    font-size:.92rem;
    font-weight:700;
}

.hero-feature-card span{
    font-size:.76rem;
    color:var(--muted);
    line-height:1.5;
}

.hero-badges{
    display:flex;
    gap:12px;
    flex-wrap:wrap;
    position:relative;
    z-index:1;
}

.hero-badge{
    display:inline-flex;
    align-items:center;
    gap:7px;
    padding:8px 14px;
    border-radius:999px;
    font-size:.78rem;
    font-weight:600;
    color:#d6e2f0;
    background:rgba(255,255,255,.05);
    border:1px solid var(--glass-border);
}

.hero-badge i{color:var(--primary-light);font-size:.85rem}

/* ==========================================================
RIGHT FORM PANEL
========================================================== */
.form-panel{
    background:
        linear-gradient(180deg,rgba(255,255,255,.02),rgba(255,255,255,0));
    backdrop-filter:blur(30px);
    -webkit-backdrop-filter:blur(30px);
    padding:52px 48px;
    display:flex;
    flex-direction:column;
    justify-content:center;
    position:relative;
    z-index:1;
}

/* ==========================================================
TABS
========================================================== */
.tab-buttons{
    display:flex;
    width:100%;
    padding:5px;
    background:rgba(255,255,255,.05);
    border:1px solid var(--glass-border);
    border-radius:18px;
    margin-bottom:36px;
    gap:4px;
}

.tab{
    flex:1;
    padding:13px 16px;
    border:none;
    border-radius:13px;
    background:transparent;
    color:var(--muted);
    font-size:.95rem;
    font-weight:700;
    cursor:pointer;
    transition:var(--transition);
    letter-spacing:.02em;
}

.tab:hover{color:var(--text);background:rgba(255,255,255,.04)}

.tab.active{
    background:linear-gradient(135deg,var(--primary),var(--secondary));
    color:#fff;
    box-shadow:var(--shadow-orange),var(--shadow-blue);
}

/* ==========================================================
FORM PAGES
========================================================== */
.form-page{display:none;animation:pageIn .45s ease both}

.form-page.active{display:block}

@keyframes pageIn{
    from{opacity:0;transform:translateY(14px)}
    to{opacity:1;transform:translateY(0)}
}

.form-page h2{
    font-size:1.8rem;
    font-weight:800;
    letter-spacing:-.02em;
    margin-bottom:6px;
}

.form-subtitle{
    color:var(--muted);
    font-size:.92rem;
    margin-bottom:30px;
}

/* ==========================================================
INPUT GROUPS
========================================================== */
.input-group{
    position:relative;
    margin-bottom:18px;
}

.input-group > i{
    position:absolute;
    left:16px;
    top:50%;
    transform:translateY(-50%);
    color:var(--muted);
    font-size:.95rem;
    pointer-events:none;
    transition:color var(--transition);
    z-index:1;
}

.input-group > i.fa-brands{font-size:1.05rem}

.input-group:focus-within > i{color:var(--primary-light)}

.input-group input,
.input-group select{
    width:100%;
    height:52px;
    padding:0 16px;
    border-radius:14px;
    border:1.5px solid rgba(255,255,255,.12);
    background:rgba(255,255,255,.045);
    color:var(--text);
    font-size:.95rem;
    font-weight:500;
    outline:none;
    transition:var(--transition);
    appearance:none;
    -webkit-appearance:none;
}

.input-group input:first-child:not(:only-child),
.input-group input:has(+ .toggle-password),
.input-group:has(.toggle-password) input{
    padding-right:52px;
}

.input-group:has(> i) input,
.input-group:has(> i) select{
    padding-left:46px;
}

.input-group input::placeholder,
.input-group select::placeholder{
    color:rgba(159,176,195,.65);
    font-weight:400;
}

.input-group input:hover,
.input-group select:hover{
    border-color:rgba(255,255,255,.2);
    background:rgba(255,255,255,.07);
}

.input-group input:focus,
.input-group select:focus{
    border-color:var(--secondary);
    background:rgba(255,255,255,.07);
    box-shadow:0 0 0 4px rgba(20,99,216,.16);
}

.input-group select{
    cursor:pointer;
    padding-right:40px;
    background-image:url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239fb0c3' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
    background-repeat:no-repeat;
    background-position:right 14px center;
    background-size:16px;
}

.input-group .helper{
    display:block;
    margin-top:7px;
    font-size:.76rem;
    color:var(--muted);
    line-height:1.5;
    padding-left:2px;
}

.toggle-password{
    position:absolute;
    right:12px;
    top:50%;
    transform:translateY(-50%);
    width:38px;
    height:38px;
    display:flex;
    align-items:center;
    justify-content:center;
    border:none;
    border-radius:10px;
    background:transparent;
    color:var(--muted);
    cursor:pointer;
    transition:var(--transition);
}

.toggle-password:hover{
    color:var(--primary-light);
    background:rgba(255,255,255,.08);
}

/* validation states */
.input-group .input-success{
    border-color:rgba(34,197,94,.7)!important;
    box-shadow:0 0 0 4px rgba(34,197,94,.12)!important;
}

.input-group .input-error{
    border-color:var(--danger)!important;
    box-shadow:0 0 0 4px rgba(239,68,68,.14)!important;
}

/* ==========================================================
GRID
========================================================== */
.grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:12px;
}

/* ==========================================================
PASSWORD STRENGTH
========================================================== */
.password-strength{
    margin:-6px 0 18px;
    display:grid;
    gap:6px;
}

.password-strength .bar{
    height:6px;
    border-radius:999px;
    background:rgba(255,255,255,.08);
    overflow:hidden;
}

.password-strength .bar span{
    display:block;
    height:100%;
    width:0;
    border-radius:999px;
    background:#ef4444;
    transition:width .35s ease,background .35s ease;
}

.password-strength small{
    font-size:.75rem;
    color:var(--muted);
    letter-spacing:.04em;
}

/* ==========================================================
FORM OPTIONS / CHECKBOX
========================================================== */
.form-options{
    display:flex;
    align-items:center;
    justify-content:space-between;
    margin:2px 0 24px;
    flex-wrap:wrap;
    gap:10px;
}

.form-options a{
    color:var(--primary-light);
    font-size:.85rem;
    font-weight:600;
    text-decoration:none;
    transition:var(--transition);
}

.form-options a:hover{
    color:var(--primary);
    text-decoration:underline;
}

.remember-row{
    display:inline-flex;
    align-items:center;
    gap:9px;
    cursor:pointer;
    font-size:.85rem;
    color:var(--muted);
    user-select:none;
}

.remember-row input[type="checkbox"],
.checkbox input[type="checkbox"]{
    width:17px;
    height:17px;
    accent-color:var(--primary);
    cursor:pointer;
    flex-shrink:0;
}

.checkbox{
    display:flex;
    align-items:flex-start;
    gap:10px;
    margin-bottom:22px;
    font-size:.82rem;
    color:var(--muted);
    line-height:1.5;
    cursor:pointer;
    user-select:none;
}

.checkbox input[type="checkbox"]{margin-top:2px}

/* ==========================================================
PRIMARY BUTTON
========================================================== */
.primary-btn{
    width:100%;
    height:54px;
    border:none;
    border-radius:16px;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:10px;
    font-size:1rem;
    font-weight:800;
    letter-spacing:.02em;
    color:#fff;
    background:linear-gradient(135deg,var(--primary),var(--primary-dark) 55%,var(--secondary));
    background-size:180% 180%;
    box-shadow:var(--shadow-orange),var(--shadow-blue);
    cursor:pointer;
    transition:var(--transition);
    position:relative;
    overflow:hidden;
}

.primary-btn::before{
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(120deg,transparent 30%,rgba(255,255,255,.22) 50%,transparent 70%);
    transform:translateX(-100%);
    transition:transform .6s ease;
}

.primary-btn:hover{
    transform:translateY(-2px);
    background-position:100% 100%;
    box-shadow:0 16px 45px rgba(255,143,47,.28),0 16px 45px rgba(20,99,216,.22);
}

.primary-btn:hover::before{transform:translateX(100%)}

.primary-btn:active{
    transform:translateY(0);
    box-shadow:0 6px 25px rgba(255,143,47,.2);
}

.primary-btn:disabled{opacity:.6;cursor:not-allowed;transform:none}

.primary-btn.loading i{animation:spin 1s linear infinite}

.primary-btn.loading span{opacity:.85}

@keyframes spin{
    from{transform:rotate(0)}
    to{transform:rotate(360deg)}
}

/* ==========================================================
MODAL
========================================================== */
.modal{
    position:fixed;
    inset:0;
    z-index:100;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:20px;
    background:rgba(4,8,16,.72);
    backdrop-filter:blur(10px);
    -webkit-backdrop-filter:blur(10px);
    opacity:0;
    visibility:hidden;
    transition:var(--transition);
}

.modal.active{
    opacity:1;
    visibility:visible;
}

.modal-box{
    width:min(460px,100%);
    max-height:90vh;
    overflow-y:auto;
    position:relative;
    padding:38px 34px 34px;
    border-radius:26px;
    border:1px solid rgba(255,255,255,.12);
    background:linear-gradient(180deg,rgba(19,30,48,.96),rgba(13,22,38,.96));
    backdrop-filter:blur(28px);
    -webkit-backdrop-filter:blur(28px);
    box-shadow:var(--shadow);
    transform:translateY(22px) scale(.97);
    transition:var(--transition);
}

.modal.active .modal-box{
    transform:translateY(0) scale(1);
}

.modal-box .close-modal{
    position:absolute;
    top:16px;
    right:16px;
    width:38px;
    height:38px;
    display:flex;
    align-items:center;
    justify-content:center;
    border:none;
    border-radius:12px;
    background:rgba(255,255,255,.06);
    color:var(--muted);
    cursor:pointer;
    transition:var(--transition);
    font-size:1rem;
}

.modal-box .close-modal:hover{
    background:rgba(239,68,68,.15);
    color:#f87171;
    transform:rotate(90deg);
}

.modal-icon{
    width:58px;
    height:58px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:18px;
    margin-bottom:20px;
    font-size:1.5rem;
    color:var(--primary-light);
    background:linear-gradient(135deg,rgba(255,143,47,.14),rgba(20,99,216,.14));
    border:1px solid rgba(255,143,47,.25);
}

.modal-box h2{
    font-size:1.5rem;
    font-weight:800;
    margin-bottom:8px;
    letter-spacing:-.02em;
}

.modal-box > p{
    color:var(--muted);
    font-size:.9rem;
    line-height:1.7;
    margin-bottom:26px;
}

/* ==========================================================
TOAST
========================================================== */
#toast{
    position:fixed;
    left:50%;
    bottom:36px;
    transform:translateX(-50%) translateY(80px);
    z-index:200;
    max-width:min(430px,92vw);
    padding:15px 24px;
    border-radius:16px;
    font-size:.92rem;
    font-weight:600;
    text-align:center;
    color:#fff;
    background:linear-gradient(135deg,#0f2740,#132c4d);
    border:1px solid rgba(255,255,255,.14);
    box-shadow:0 16px 45px rgba(0,0,0,.45);
    opacity:0;
    transition:var(--transition);
    pointer-events:none;
    line-height:1.5;
}

#toast.show{
    transform:translateX(-50%) translateY(0);
    opacity:1;
}

#toast.success{
    background:linear-gradient(135deg,#0d3a1e,#123c24);
    border-color:rgba(34,197,94,.35);
}

#toast.error{
    background:linear-gradient(135deg,#3a0d0d,#421414);
    border-color:rgba(239,68,68,.35);
}

/* ==========================================================
SCROLLBAR
========================================================== */
::-webkit-scrollbar{width:9px;height:9px}
::-webkit-scrollbar-track{background:rgba(255,255,255,.03);border-radius:999px}
::-webkit-scrollbar-thumb{
    background:linear-gradient(180deg,var(--primary),var(--secondary));
    border-radius:999px;
}

::selection{
    background:rgba(255,143,47,.35);
    color:#fff;
}

:focus-visible{
    outline:2px solid rgba(255,143,47,.6);
    outline-offset:2px;
    border-radius:8px;
}

/* ==========================================================
RESPONSIVE
========================================================== */
@media (max-width: 1024px){
    .auth-container{grid-template-columns:1fr;max-width:560px}
    .hero-panel{
        border-right:none;
        border-bottom:1px solid var(--glass-border);
        padding:36px 32px;
    }
    .hero-content h2{font-size:2rem}
    .hero-feature-grid{grid-template-columns:repeat(3,1fr)}
    .form-panel{padding:40px 32px}
}

@media (max-width: 640px){
    body{padding:0}
    .auth-container{
        width:100%;
        min-height:100vh;
        border-radius:0;
        border:none;
    }
    .auth-container::before{border-radius:0}
    .hero-panel{padding:28px 22px 30px}
    .brand-strip{flex-wrap:wrap;gap:14px}
    .hero-pill{display:none}
    .logo-circle{width:50px;height:50px;font-size:22px;border-radius:15px}
    .logo h1{font-size:26px}
    .hero-content h2{font-size:1.65rem;margin-bottom:12px}
    .hero-content p{font-size:.9rem;line-height:1.7}
    .hero-feature-grid{grid-template-columns:1fr;gap:10px}
    .hero-feature-card{
        flex-direction:row;
        align-items:center;
        gap:12px;
        padding:14px 16px;
    }
    .hero-feature-card i{margin-bottom:0;font-size:1.1rem}
    .hero-feature-card span{width:100%}
    .hero-badges{display:none}
    .form-panel{padding:30px 20px 40px}
    .tab-buttons{margin-bottom:28px}
    .grid{grid-template-columns:1fr}
}

@media (max-width: 380px){
    .form-panel{padding:24px 16px 32px}
    .form-options{flex-direction:column;align-items:flex-start;gap:8px}
}

/* ==========================================================
REDUCED MOTION
========================================================== */
@media (prefers-reduced-motion:reduce){
    *,*::before,*::after{
        animation-duration:.001s!important;
        animation-iteration-count:1!important;
        transition-duration:.001s!important;
    }
}

/* Final embedded-form alignment overrides. */
.input-group > i + input,
.input-group > i + select,
.input-group > i.fa-solid + input,
.input-group > i.fa-brands + input{padding-left:46px!important}
.input-group > i{left:16px!important;width:18px;text-align:center}
.checkbox{display:flex;align-items:flex-start;gap:12px;line-height:1.45}
.checkbox input[type="checkbox"]{flex:0 0 20px;width:20px;height:20px;margin:1px 0 0}

.checkbox{align-items:center!important;font-size:.72rem;color:var(--muted,#60748e)}
.checkbox span{display:block;line-height:1.35}
.checkbox a{color:var(--primary,#1463d8);font-weight:700;text-decoration:underline;text-underline-offset:2px}
.checkbox.input-error{color:#c94b4b}
.auth-inline-message{margin:10px 0 0;padding:9px 10px;border:1px solid rgba(201,75,75,.25);border-radius:10px;background:#fff5f5;color:#b83f3f;font-size:.72rem;line-height:1.4}
.auth-inline-message a{color:#1463d8;font-weight:800;text-decoration:underline}

/* Compact PRT iframe: the gate contains only the account form. */
body.embedded-auth{display:block;min-height:0;height:auto;padding:0!important;background:#fff!important;overflow-y:auto!important;overflow-x:hidden!important}
body.embedded-auth .background-blobs,body.embedded-auth .hero-panel{display:none!important}
body.embedded-auth .auth-container{display:block;width:100%!important;max-width:none!important;min-height:0!important;margin:0!important;padding:0!important;border:0!important;border-radius:0!important;background:#fff!important;box-shadow:none!important}
body.embedded-auth .form-panel{padding:16px 18px 20px!important;background:#fff!important;border:0!important}
body.embedded-auth .tab-buttons{margin-bottom:14px!important}
body.embedded-auth .form-page h2{font-size:1.1rem!important;margin-bottom:4px!important}
body.embedded-auth .form-subtitle{font-size:.7rem!important;margin-bottom:12px!important}
body.embedded-auth .input-group{min-height:38px!important;margin-bottom:9px!important}
body.embedded-auth .input-group input,body.embedded-auth .input-group select,body.embedded-auth .primary-btn{min-height:38px!important;padding:8px 10px!important;font-size:.72rem!important}
body.embedded-auth .form-options{font-size:.66rem!important;margin:6px 0 12px!important}
body.embedded-auth .password-strength,body.embedded-auth .checkbox{font-size:.66rem!important}
body.embedded-auth .helper{font-size:.58rem!important}

/* ======================================================================
   V2 — matches main app "Vital Signs" design language
   ====================================================================== */
.logo h1,.hero-content h2,.form-panel h2{font-family:var(--font-display);letter-spacing:-.02em}
.logo h1{color:#17345d!important}.logo h1 span{color:#17345d}.logo h1 strong{color:#f27b26}.logo h1{font-size:34px!important;line-height:1}.logo{text-decoration:none;cursor:pointer}
.hero-content h2{position:relative;padding-bottom:14px}
.hero-content h2::after{
  content:"";position:absolute;left:0;bottom:0;width:120px;height:22px;opacity:.65;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 22'%3E%3Cpath d='M0 14 L30 14 L38 4 L47 20 L55 14 L120 14' fill='none' stroke='%2300E5A0' stroke-width='2'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
}
.primary-btn{background:linear-gradient(135deg,var(--primary),var(--primary-dark)) !important;font-weight:800;transition:transform .18s cubic-bezier(.16,.8,.28,1),box-shadow .18s ease}
.primary-btn:hover{transform:translateY(-2px);box-shadow:0 14px 32px rgba(255,122,41,.4)}
.tab.active{color:var(--primary)}
::selection{background:var(--primary);color:#0a0d12}
:focus-visible{outline:2px solid var(--primary);outline-offset:2px}

/* Compact phone layout: keep the auth page independently scrollable. */
@media (max-width:600px){
    html,body{min-height:100%;height:auto;overflow-y:auto!important;overflow-x:hidden;font-size:13px}
    body{padding:10px!important;align-items:flex-start!important}
    .auth-container{width:100%!important;max-width:430px!important;min-height:0!important;height:auto!important;margin:0 auto!important;border-radius:22px!important;overflow:visible!important}
    .hero-panel{padding:22px 16px!important;gap:18px!important}
    .form-panel{padding:22px 16px 26px!important}
    .brand-strip{gap:10px!important}.logo-circle{width:42px!important;height:42px!important;font-size:18px!important}.logo h1{font-size:28px!important}.logo p{font-size:.68rem!important}
    .hero-content h2{font-size:1.45rem!important;line-height:1.12!important}.hero-content p{font-size:.76rem!important;line-height:1.5!important}
    .hero-feature-grid{gap:7px!important}.hero-feature-card{padding:10px!important;gap:8px!important}.hero-feature-card strong{font-size:.76rem!important}.hero-feature-card span{font-size:.66rem!important}
    .hero-badges{gap:6px!important}.hero-badge{padding:6px 8px!important;font-size:.65rem!important}
    .tab-buttons{margin-bottom:18px!important}.tab{padding:9px 12px!important;font-size:.76rem!important}
    .form-page h2{font-size:1.25rem!important}.form-subtitle{font-size:.74rem!important;margin-bottom:16px!important}
    .input-group{min-height:42px!important}.input-group input,.primary-btn,.social-btn{font-size:.76rem!important;padding:10px 11px!important;min-height:42px!important}
    .form-options,.form-footer,.divider{font-size:.7rem!important}.form-options{gap:8px!important}.form-footer{margin-top:18px!important}
}

/* Final embedded-form alignment overrides. */
.input-group > i + input,.input-group > i + select,.input-group > i.fa-solid + input,.input-group > i.fa-brands + input{padding-left:46px!important}
.input-group > i{left:16px!important;width:18px;text-align:center}
.checkbox{display:flex;align-items:flex-start;gap:12px;line-height:1.45}
.checkbox input[type="checkbox"]{flex:0 0 20px;width:20px;height:20px;margin:1px 0 0}