/* FluxSMS v40 Auth Pro */
:root{
    --fx-blue:#1267ff;
    --fx-blue2:#18b6ff;
    --fx-dark:#061a35;
    --fx-muted:#6b7c93;
    --fx-line:#dbe8f7;
    --fx-soft:#f4f8ff;
    --fx-green:#22d36f;
    --fx-red:#ff5a6a;
}
*{box-sizing:border-box}
body.fx-auth-body{
    min-height:100vh;
    margin:0;
    color:#071a33;
    background:
        radial-gradient(circle at 12% 18%,rgba(24,182,255,.18),transparent 28%),
        radial-gradient(circle at 88% 24%,rgba(18,103,255,.24),transparent 31%),
        linear-gradient(135deg,#edf5ff 0%,#f8fbff 42%,#eaf2ff 100%);
    font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","Microsoft YaHei",Arial,sans-serif;
}
body.fx-auth-body:before{
    content:"";
    position:fixed;
    inset:0;
    background-image:var(--auth-bg);
    background-size:cover;
    background-position:center;
    opacity:.075;
    pointer-events:none;
}
.fx-auth-shell{
    position:relative;
    min-height:100vh;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:34px 18px;
}
.fx-auth-panel{
    width:min(1180px,100%);
    min-height:700px;
    display:grid;
    grid-template-columns:1.02fr .98fr;
    border-radius:34px;
    overflow:hidden;
    background:rgba(255,255,255,.84);
    border:1px solid rgba(255,255,255,.9);
    box-shadow:0 34px 90px rgba(8,34,74,.18);
    backdrop-filter:blur(18px);
}
.fx-auth-panel.register{grid-template-columns:.96fr 1.04fr;min-height:735px}
.fx-auth-hero{
    position:relative;
    color:#fff;
    padding:46px;
    background:
        radial-gradient(circle at 80% 14%,rgba(255,255,255,.22),transparent 21%),
        radial-gradient(circle at 14% 84%,rgba(24,182,255,.28),transparent 29%),
        linear-gradient(135deg,#061b3a 0%,#0b3c8c 47%,#1267ff 100%);
    overflow:hidden;
}
.fx-auth-hero:after{
    content:"";
    position:absolute;
    right:-110px;
    bottom:-110px;
    width:340px;
    height:340px;
    border-radius:50%;
    background:rgba(255,255,255,.12);
}
.fx-auth-brand{
    display:flex;
    align-items:center;
    gap:14px;
    font-size:27px;
    font-weight:950;
    letter-spacing:-.7px;
    position:relative;
    z-index:1;
}
.fx-brand-icon{
    width:48px;
    height:48px;
    border-radius:17px;
    display:grid;
    place-items:center;
    background:linear-gradient(135deg,#18b6ff,#1267ff);
    box-shadow:0 14px 30px rgba(0,0,0,.22);
}
.fx-auth-chip{
    position:relative;
    z-index:1;
    display:inline-flex;
    align-items:center;
    gap:8px;
    margin-top:42px;
    padding:8px 14px;
    border-radius:999px;
    background:rgba(214,255,235,.92);
    color:#056238;
    font-size:13px;
    font-weight:950;
}
.fx-auth-hero h1{
    position:relative;
    z-index:1;
    margin:24px 0 14px;
    font-size:40px;
    line-height:1.18;
    font-weight:950;
    letter-spacing:-1.2px;
}
.fx-auth-hero p{
    position:relative;
    z-index:1;
    max-width:560px;
    color:rgba(255,255,255,.88);
    line-height:1.78;
    font-size:15px;
}
.fx-feature-grid{
    position:relative;
    z-index:1;
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:14px;
    margin-top:30px;
}
.fx-feature{
    padding:16px;
    border-radius:20px;
    background:rgba(255,255,255,.12);
    border:1px solid rgba(255,255,255,.18);
}
.fx-feature b{display:block;font-size:15px;margin-bottom:5px}
.fx-feature span{font-size:12px;color:rgba(255,255,255,.76)}
.fx-steps{
    position:relative;
    z-index:1;
    margin-top:32px;
    display:grid;
    gap:14px;
}
.fx-step{
    display:flex;
    gap:13px;
    padding:15px;
    border-radius:18px;
    background:rgba(255,255,255,.12);
    border:1px solid rgba(255,255,255,.18);
}
.fx-step-no{
    width:30px;
    height:30px;
    border-radius:10px;
    display:grid;
    place-items:center;
    background:#fff;
    color:var(--fx-blue);
    font-weight:950;
    flex:0 0 30px;
}
.fx-step b{display:block;font-size:15px;margin-bottom:4px}
.fx-step span{font-size:12px;color:rgba(255,255,255,.76)}
.fx-hero-foot{
    position:absolute;
    left:46px;
    right:46px;
    bottom:34px;
    z-index:1;
    display:flex;
    justify-content:space-between;
    gap:12px;
    color:rgba(255,255,255,.74);
    font-size:12px;
}
.fx-auth-main{
    position:relative;
    padding:40px 42px;
    display:flex;
    align-items:center;
    justify-content:center;
    background:linear-gradient(180deg,rgba(255,255,255,.96),rgba(247,251,255,.96));
}
.fx-auth-card{width:100%;max-width:520px}
.fx-auth-card.login{max-width:450px}
.fx-auth-top{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;
    margin-bottom:22px;
}
.fx-auth-title h2{
    margin:0;
    font-weight:950;
    font-size:31px;
    letter-spacing:-.9px;
}
.fx-auth-title p{
    margin:7px 0 0;
    color:var(--fx-muted);
    font-size:14px;
}
.fx-auth-link{
    display:inline-flex;
    align-items:center;
    gap:7px;
    padding:10px 14px;
    border-radius:14px;
    background:#eef5ff;
    color:var(--fx-blue);
    font-weight:900;
    border:1px solid #dbe8ff;
    white-space:nowrap;
}
.fx-auth-link:hover{text-decoration:none;color:#064fc8;background:#e4efff}
.fx-auth-tabs{
    display:flex;
    gap:8px;
    background:#eef4ff;
    padding:6px;
    border-radius:16px;
    margin-bottom:20px;
}
.fx-auth-tabs .nav-item{flex:1}
.fx-auth-tabs .nav-link{
    text-align:center;
    border-radius:12px;
    color:#4e6685;
    font-weight:900;
    padding:10px 12px;
}
.fx-auth-tabs .nav-link.active{
    color:#fff;
    background:linear-gradient(135deg,var(--fx-blue),var(--fx-blue2));
    box-shadow:0 10px 22px rgba(18,103,255,.22);
}
.fx-field{margin-bottom:14px}
.fx-field label{
    display:flex;
    align-items:center;
    gap:6px;
    font-size:13px;
    font-weight:900;
    color:#17375d;
    margin-bottom:8px;
}
.fx-input-wrap{
    position:relative;
}
.fx-auth-input{
    width:100%;
    min-height:50px;
    border-radius:15px!important;
    border:1px solid var(--fx-line)!important;
    background:#fff!important;
    padding:0 16px!important;
    color:#071a33!important;
    font-weight:700;
    box-shadow:none!important;
}
.fx-input-wrap.has-icon .fx-auth-input{padding-left:45px!important}
.fx-input-wrap .fx-input-icon{
    position:absolute;
    left:16px;
    top:50%;
    transform:translateY(-50%);
    color:#7c91ad;
    z-index:2;
}
.fx-auth-input:focus{
    border-color:var(--fx-blue)!important;
    box-shadow:0 0 0 4px rgba(18,103,255,.09)!important;
}
.fx-toggle-pass{
    position:absolute;
    right:8px;
    top:50%;
    transform:translateY(-50%);
    width:38px;
    height:38px;
    border:0;
    border-radius:12px;
    background:#eef5ff;
    color:#1267ff;
    cursor:pointer;
}
.fx-captcha-row,.fx-email-row{
    display:grid;
    grid-template-columns:1fr 138px;
    gap:10px;
    align-items:center;
}
.fx-captcha-img{
    width:100%;
    height:50px;
    border-radius:15px;
    border:1px solid var(--fx-line);
    background:#fff;
    cursor:pointer;
    object-fit:cover;
}
.fx-inline-btn{
    min-height:50px;
    border-radius:15px;
    font-weight:900;
}
.fx-auth-btn{
    min-height:52px;
    border:0;
    border-radius:16px;
    font-weight:950;
    font-size:15px;
    background:linear-gradient(135deg,var(--fx-blue),var(--fx-blue2));
    color:#fff;
    box-shadow:0 14px 30px rgba(18,103,255,.25);
}
.fx-auth-btn:hover{filter:brightness(.98);transform:translateY(-1px)}
.fx-auth-btn:disabled{opacity:.72;cursor:not-allowed;transform:none}
.fx-form-grid{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:14px;
}
.fx-meta{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:10px;
    margin:14px 0 20px;
    color:#6b7c93;
    font-size:13px;
}
.fx-meta a{color:var(--fx-blue);font-weight:800}
.fx-sub-entry,.fx-note{
    margin-top:14px;
    padding:14px;
    border-radius:18px;
    border:1px dashed #bdd6ff;
    background:#f6faff;
    color:#31527a;
    font-size:13px;
    line-height:1.6;
}
.fx-sub-entry a,.fx-note b{color:var(--fx-blue);font-weight:950}
.fx-password-meter{
    height:8px;
    border-radius:999px;
    background:#edf3fb;
    overflow:hidden;
    margin-top:8px;
}
.fx-password-meter span{
    display:block;
    width:0%;
    height:100%;
    border-radius:999px;
    background:var(--fx-red);
    transition:.2s;
}
.fx-password-tip{
    margin-top:6px;
    color:#7b8ba2;
    font-size:12px;
}
.fx-password-tip.ok{color:#108c4d}
.fx-checkline{
    display:flex;
    align-items:center;
    gap:8px;
    color:#536b89;
    font-size:13px;
    margin:12px 0 18px;
}
.fx-checkline input{width:16px;height:16px}
.fx-copyright{
    margin-top:22px;
    text-align:center;
    color:#8a98aa;
    font-size:12px;
}
.fx-copyright a{color:var(--fx-blue)}
@media(max-width:960px){
    .fx-auth-panel,.fx-auth-panel.register{grid-template-columns:1fr;min-height:auto}
    .fx-auth-hero{display:none}
    .fx-auth-main{padding:30px 20px}
}
@media(max-width:560px){
    .fx-auth-top{align-items:flex-start;gap:10px;flex-direction:column}
    .fx-captcha-row,.fx-email-row,.fx-form-grid{grid-template-columns:1fr}
    .fx-auth-shell{padding:16px}
    .fx-auth-panel{border-radius:24px}
}


/* FluxSMS v42 Auth UI refined */
.fx-auth-hero h1,
.fx-auth-hero .fx-auth-brand,
.fx-auth-hero .fx-auth-brand span,
.fx-auth-hero p,
.fx-hero-foot,
.fx-feature b,
.fx-feature span,
.fx-step b,
.fx-step span{
    color:#fff!important;
}
.fx-auth-hero h1{
    text-shadow:0 10px 30px rgba(0,0,0,.20);
}
.fx-auth-hero p{
    color:rgba(255,255,255,.92)!important;
}
.fx-auth-chip{
    box-shadow:0 10px 24px rgba(0,0,0,.12);
}
.fx-feature,
.fx-step{
    background:rgba(255,255,255,.14)!important;
    border-color:rgba(255,255,255,.22)!important;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.12);
}
.fx-feature b,
.fx-step b{
    font-weight:950;
}
.fx-feature span,
.fx-step span{
    color:rgba(255,255,255,.80)!important;
}
.fx-auth-main{
    background:
        radial-gradient(circle at 90% 10%,rgba(18,103,255,.06),transparent 28%),
        linear-gradient(180deg,rgba(255,255,255,.98),rgba(247,251,255,.98))!important;
}
.fx-auth-card{
    padding:4px 0;
}
.fx-auth-title h2{
    color:#071a33!important;
}
.fx-auth-title p{
    color:#667a96!important;
}
.fx-note,
.fx-sub-entry{
    background:linear-gradient(180deg,#f7fbff,#f1f7ff)!important;
    border-color:#bdd7ff!important;
}
.fx-note b,
.fx-sub-entry a{
    color:#1267ff!important;
}
.fx-field label{
    color:#17375d!important;
}
.fx-auth-input{
    height:52px!important;
    border-radius:16px!important;
    font-size:15px;
}
.fx-auth-input::placeholder{
    color:#9aaabd!important;
    font-weight:700;
}
.fx-input-wrap.has-icon .fx-auth-input{
    padding-left:46px!important;
}
.fx-toggle-pass{
    background:#eef5ff!important;
    color:#1267ff!important;
}
.fx-captcha-img{
    background:#fff!important;
    object-fit:contain!important;
    padding:2px;
}
.fx-auth-btn{
    height:56px!important;
    border-radius:17px!important;
    background:linear-gradient(135deg,#1267ff 0%,#1db8ff 100%)!important;
    letter-spacing:.2px;
}
.fx-auth-link{
    background:#f1f7ff!important;
    border-color:#d5e6ff!important;
}
.fx-checkline{
    color:#4f6682!important;
}
.fx-checkline input{
    accent-color:#1267ff;
}
.fx-password-meter{
    background:#e8f0fb!important;
}
.fx-copyright{
    color:#7f8fa4!important;
}
.fx-copyright strong a{
    font-weight:950;
}
.fx-auth-panel{
    box-shadow:0 34px 90px rgba(8,34,74,.16),0 2px 0 rgba(255,255,255,.75) inset!important;
}
.fx-brand-icon{
    color:#fff!important;
}
.fx-form-grid .fx-field{
    margin-bottom:8px;
}
@media(min-width:961px){
    .fx-auth-panel.register .fx-auth-main{
        padding-top:30px!important;
        padding-bottom:30px!important;
    }
    .fx-auth-panel.register .fx-auth-card{
        max-width:550px!important;
    }
}
@media(max-width:560px){
    .fx-auth-title h2{
        font-size:26px!important;
    }
    .fx-auth-card{
        max-width:100%!important;
    }
}