/* =========================================================
   Music FM — Auth Million Dollar 2026
   Login / Register split-screen premium welcome
========================================================= */

:root{
    --mf-blue:#147cff;
    --mf-blue-2:#005bea;
    --mf-cyan:#59c7ff;
    --mf-navy:#050b16;
    --mf-navy-2:#071832;
    --mf-text:#0f172a;
    --mf-muted:#64748b;
    --mf-line:#dbe7f6;
    --mf-soft:#f6f9ff;
    --mf-white:#fff;
    --mf-shadow:0 24px 70px rgba(15,35,70,.16);
}

*{box-sizing:border-box}
html,body{margin:0;min-height:100%;font-family:'Heebo',Arial,sans-serif;color:var(--mf-text);background:#f4f8ff;overflow-x:hidden}
body{direction:rtl}
a{color:inherit}
button,input{font-family:inherit}

/* Top empty bar */
.mf-auth-topbar{
    height:86px;
    position:fixed;
    inset:0 0 auto 0;
    z-index:50;
    display:flex;
    align-items:center;
    justify-content:flex-start;
    direction:ltr;
    padding:0 clamp(14px,2.2vw,34px);
    background:
        radial-gradient(circle at 90% 18%,rgba(20,124,255,.18),transparent 30%),
        linear-gradient(180deg,#081121 0%,#050b16 100%);
    border-bottom:1px solid rgba(255,255,255,.08);
    box-shadow:0 14px 34px rgba(0,0,0,.22);
}
.mf-auth-logo-wrap{display:flex;align-items:center;text-decoration:none;min-width:180px;margin-left:0;margin-right:auto}
.mf-auth-logo-wrap img{max-height:52px;width:auto;display:block;filter:drop-shadow(0 8px 18px rgba(0,0,0,.32))}
.mf-auth-logo-wrap .mf-logo-image-exact{height:auto;min-width:0}

/* Page */
.mf-auth-page{
    min-height:100vh;
    padding-top:86px;
    background:
        radial-gradient(circle at 12% 18%,rgba(89,199,255,.18),transparent 30%),
        radial-gradient(circle at 86% 76%,rgba(20,124,255,.16),transparent 32%),
        linear-gradient(180deg,#f8fbff 0%,#eef5ff 100%);
}
.mf-auth-shell{
    min-height:calc(100vh - 86px);
    display:grid;
    grid-template-columns:minmax(390px,520px) minmax(0,1fr);
    direction:ltr;
    overflow:hidden;
}

/* Left form */
.mf-auth-card{
    direction:rtl;
    position:relative;
    z-index:2;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:44px clamp(22px,3vw,58px);
    background:
        linear-gradient(180deg,rgba(255,255,255,.98),rgba(255,255,255,.94)),
        radial-gradient(circle at 30% 0%,rgba(89,199,255,.13),transparent 38%);
    border-left:1px solid rgba(15,35,70,.08);
    box-shadow:26px 0 70px rgba(15,35,70,.08);
}
.mf-auth-card-inner{width:min(100%,430px)}
.mf-auth-kicker{
    display:inline-flex;
    align-items:center;
    min-height:30px;
    padding:0 12px;
    margin-bottom:16px;
    border-radius:4px;
    color:#fff;
    background:#147CFF;
    font-size:13px;
    font-weight:950;
    box-shadow:0 12px 26px rgba(20,124,255,.23);
}
.mf-auth-card h1,
.mf-auth-card h2{
    margin:0 0 10px;
    font-size:clamp(34px,4.4vw,54px);
    line-height:.98;
    font-weight:950;
    letter-spacing:-1.6px;
    color:#071225;
}
.mf-auth-card h1 span,
.mf-auth-card h2 span{color:#147CFF}
.mf-auth-card p{margin:0 0 28px;color:#526173;font-size:16px;line-height:1.75;font-weight:760}

.mf-auth-alert{margin:0 0 16px;padding:13px 14px;border-radius:4px;font-weight:850;line-height:1.55}
.mf-auth-alert.error{background:#fff1f1;color:#b42318;border:1px solid #ffd1d1}
.mf-auth-alert.success{background:#ecfdf3;color:#027a48;border:1px solid #abefc6}

.mf-auth-form{display:grid;gap:14px}
.mf-auth-field,
.mf-field{
    position:relative;
    display:grid;
    gap:7px;
}
.mf-auth-field > span,
.mf-field > span:not(.mf-field-help){
    color:#111827;
    font-size:14px;
    font-weight:950;
}
.mf-auth-field input,
.mf-field input{
    width:100%;
    min-height:54px;
    border:1px solid #dbe7f6;
    border-radius:5px;
    background:#f8fbff;
    color:#111827;
    padding:0 46px 0 14px;
    font:inherit;
    font-size:15px;
    font-weight:850;
    outline:none;
    transition:border-color .2s ease, background .2s ease, box-shadow .2s ease, transform .2s ease;
}
.mf-auth-field input:focus,
.mf-field input:focus{border-color:#147CFF;background:#fff;box-shadow:0 0 0 4px rgba(20,124,255,.10);transform:translateY(-1px)}
.mf-field-ico,.mf-auth-field svg{position:absolute;right:15px;bottom:15px;width:22px;height:22px;color:#7a8da8;pointer-events:none}
.mf-field-help{position:absolute;left:12px;bottom:16px;color:#93a4bb;font-weight:950;z-index:2}

.mf-auth-row{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:2px 0 2px;color:#475467;font-size:14px;font-weight:820}
.mf-auth-link{color:#147CFF;font-weight:950;text-decoration:none}
.mf-auth-link:hover{text-decoration:underline}
.mf-auth-check,
.mf-auth-terms{display:flex !important;align-items:flex-start;gap:10px;color:#475467;font-size:14px;line-height:1.65;font-weight:780}
.mf-auth-check input,
.mf-auth-terms input{width:18px;min-width:18px;height:18px;margin-top:3px;accent-color:#147CFF}
.mf-auth-terms a{color:#147CFF;font-weight:950;text-decoration:none}

.mf-auth-submit{
    min-height:56px;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:10px;
    border:0;
    border-radius:5px;
    background:#147CFF;
    color:#fff;
    font:inherit;
    font-size:16px;
    font-weight:950;
    cursor:pointer;
    box-shadow:0 17px 34px rgba(20,124,255,.28);
    transition:transform .2s ease, box-shadow .2s ease, filter .2s ease;
}
.mf-auth-submit:hover{transform:translateY(-2px);box-shadow:0 22px 44px rgba(20,124,255,.34);filter:saturate(1.06)}

.mf-auth-switch{margin-top:20px;color:#667085;font-weight:820;text-align:center}
.mf-auth-switch a{color:#147CFF;font-weight:950;text-decoration:none}
.mf-auth-sep{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:13px;margin:20px 0;color:#8a99ad;font-weight:850;font-size:13px}
.mf-auth-sep:before,.mf-auth-sep:after{content:"";height:1px;background:#dbe7f6}

.mf-auth-features{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:30px}
.mf-auth-features article{padding:13px 10px;text-align:center;border:1px solid #dce9fb;border-radius:5px;background:#fff;box-shadow:0 10px 24px rgba(15,35,70,.055)}
.mf-auth-features i{width:38px;height:38px;display:grid;place-items:center;margin:0 auto 8px;border-radius:50%;color:#147CFF;background:#edf5ff;box-shadow:0 0 0 6px rgba(20,124,255,.04);font-style:normal;font-size:18px}
.mf-auth-features strong{display:block;color:#0f172a;font-size:13px;font-weight:950;line-height:1.25}
.mf-auth-features small{display:block;margin-top:4px;color:#667085;font-size:12px;font-weight:750;line-height:1.35}

.mf-auth-footer{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:8px;margin-top:30px;color:#718198;font-size:13px;font-weight:800}
.mf-auth-footer a{color:#526173;text-decoration:none}.mf-auth-footer a:hover{color:#147CFF}
.mf-auth-footer i{width:4px;height:4px;border-radius:50%;background:#c7d4e7}

/* Right hero */
.mf-auth-hero{
    direction:rtl;
    position:relative;
    min-height:calc(100vh - 86px);
    overflow:hidden;
    display:grid;
    place-items:center;
    padding:clamp(36px,5vw,78px);
    color:#fff;
    background:
        radial-gradient(circle at 50% 54%,rgba(20,124,255,.40),transparent 28%),
        radial-gradient(circle at 20% 22%,rgba(89,199,255,.20),transparent 25%),
        radial-gradient(circle at 86% 18%,rgba(20,124,255,.23),transparent 28%),
        linear-gradient(135deg,#050914 0%,#071832 42%,#031126 100%);
}
.mf-auth-hero::before{
    content:"";
    position:absolute;inset:0;
    background:
        linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px),
        linear-gradient(0deg,rgba(255,255,255,.025) 1px,transparent 1px);
    background-size:86px 86px;
    opacity:.36;
    mask-image:radial-gradient(circle at center,#000 0%,transparent 80%);
}
.mf-auth-hero::after{
    content:"";
    position:absolute;
    width:70vw;height:70vw;max-width:980px;max-height:980px;
    border-radius:50%;
    border:1px solid rgba(89,199,255,.28);
    box-shadow:0 0 80px rgba(20,124,255,.24), inset 0 0 80px rgba(20,124,255,.12);
    transform:rotate(-18deg) scaleY(.34);
    animation:mfOrbitGlow 7s ease-in-out infinite;
}
.mf-auth-hero-inner{position:relative;z-index:2;width:min(100%,900px);text-align:center;perspective:1000px}
.mf-auth-premium-logo{
    position:relative;
    display:inline-flex;
    align-items:baseline;
    justify-content:center;
    gap:.04em;
    font-size:clamp(64px,9vw,142px);
    line-height:.86;
    font-weight:950;
    letter-spacing:-.075em;
    direction:ltr;
    color:#fff;
    text-shadow:
        0 2px 0 #aeb9ca,
        0 12px 24px rgba(0,0,0,.32),
        0 0 38px rgba(89,199,255,.36);
    transform:rotateX(8deg) rotateY(-8deg);
    animation:mfFloatLogo 5.4s ease-in-out infinite;
}
.mf-auth-premium-logo span{color:#147CFF;text-shadow:0 2px 0 #72caff,0 0 34px rgba(20,124,255,.68),0 16px 28px rgba(0,0,0,.35)}
.mf-auth-premium-title{margin:22px 0 0;color:#eaf6ff;font-size:clamp(22px,3vw,42px);line-height:1.15;font-weight:950;text-shadow:0 0 26px rgba(89,199,255,.35)}
.mf-auth-premium-sub{max-width:680px;margin:14px auto 0;color:rgba(255,255,255,.78);font-size:18px;line-height:1.8;font-weight:800}

.mf-stage{position:relative;height:190px;margin-top:34px}
.mf-stage-piano{position:absolute;left:50%;bottom:18px;width:min(520px,76vw);height:80px;transform:translateX(-50%) skewX(-13deg);border-radius:16px 16px 28px 28px;background:linear-gradient(180deg,#eff7ff,#2c5b94 48%,#061426);box-shadow:0 30px 70px rgba(0,0,0,.42),0 0 38px rgba(20,124,255,.36)}
.mf-stage-piano::before{content:"";position:absolute;inset:12px 24px auto 24px;height:38px;background:repeating-linear-gradient(90deg,#071225 0 32px,#fff 32px 62px);border-radius:7px;opacity:.92}
.mf-stage-clef{position:absolute;right:calc(50% + 190px);bottom:10px;width:132px;height:132px;display:grid;place-items:center;font-size:96px;line-height:1;color:#dff5ff;text-shadow:0 0 24px rgba(89,199,255,.8),0 20px 30px rgba(0,0,0,.45);animation:mfClefFloat 4.8s ease-in-out infinite}

.mf-note{position:absolute;z-index:3;width:42px;height:42px;display:grid;place-items:center;color:#70d6ff;text-shadow:0 0 18px rgba(89,199,255,.9);font-size:clamp(20px,2.4vw,34px);animation:mfNoteFloat var(--d,6s) ease-in-out infinite;opacity:.9}
.mf-note.n1{top:18%;right:12%;--d:6.2s}.mf-note.n2{top:22%;left:16%;--d:7s}.mf-note.n3{bottom:24%;right:18%;--d:5.6s}.mf-note.n4{bottom:18%;left:20%;--d:6.8s}.mf-note.n5{top:45%;left:8%;--d:7.4s}.mf-note.n6{top:40%;right:6%;--d:6.6s}
.mf-spark{position:absolute;width:5px;height:5px;border-radius:50%;background:#8de7ff;box-shadow:0 0 18px #59c7ff;animation:mfSpark 3.4s ease-in-out infinite;opacity:.8}
.mf-spark.s1{top:18%;left:35%}.mf-spark.s2{top:76%;left:58%;animation-delay:.7s}.mf-spark.s3{top:35%;right:22%;animation-delay:1.1s}.mf-spark.s4{bottom:20%;right:38%;animation-delay:1.6s}.mf-spark.s5{top:57%;left:24%;animation-delay:2.1s}

@keyframes mfFloatLogo{0%,100%{transform:translateY(0) rotateX(8deg) rotateY(-8deg)}50%{transform:translateY(-16px) rotateX(10deg) rotateY(-4deg)}}
@keyframes mfOrbitGlow{0%,100%{opacity:.55;transform:rotate(-18deg) scaleY(.34) scale(1)}50%{opacity:1;transform:rotate(-11deg) scaleY(.37) scale(1.03)}}
@keyframes mfNoteFloat{0%,100%{transform:translate3d(0,0,0) rotate(0deg);opacity:.56}50%{transform:translate3d(18px,-26px,0) rotate(10deg);opacity:1}}
@keyframes mfClefFloat{0%,100%{transform:translateY(0) rotate(-4deg)}50%{transform:translateY(-15px) rotate(4deg)}}
@keyframes mfSpark{0%,100%{transform:scale(.65);opacity:.35}50%{transform:scale(1.8);opacity:1}}

.mf-auth-gender{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.mf-auth-gender label{display:flex;align-items:center;justify-content:center;gap:8px;min-height:44px;border:1px solid #dbe7f6;border-radius:5px;background:#f8fbff;font-weight:850;color:#475467}
.mf-auth-gender input{width:16px;height:16px;accent-color:#147CFF}
.mf-auth-birth-title,.mf-auth-gender-title{margin-top:2px;color:#111827;font-size:14px;font-weight:950}
.mf-password-rules{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;color:#64748b;font-size:12px;font-weight:800}.mf-password-rules span{display:flex;align-items:center;gap:5px}.mf-password-rules b{color:#12b76a}

@media(max-width:1020px){
    .mf-auth-topbar{height:76px;padding:0 22px}
    .mf-auth-page{padding-top:76px}
    .mf-auth-shell{grid-template-columns:1fr;min-height:auto}
    .mf-auth-card{order:2;border-left:0;box-shadow:none}
    .mf-auth-hero{order:1;min-height:500px;padding:42px 24px}
    .mf-auth-premium-logo{font-size:clamp(54px,13vw,110px)}
}

@media(max-width:767px){
    html,body{background:#f6f9ff}
    .mf-auth-topbar{
        height:72px;
        padding:0 16px;
        justify-content:flex-start;
    }
    .mf-auth-logo-wrap{
        min-width:0;
        margin-left:0;
        margin-right:auto;
    }
    .mf-auth-logo-wrap img{max-height:42px}
    .mf-auth-page{
        padding-top:72px;
        min-height:100svh;
        background:
            radial-gradient(circle at 50% 0%,rgba(20,124,255,.13),transparent 34%),
            linear-gradient(180deg,#f8fbff 0%,#eef5ff 100%);
    }
    .mf-auth-shell{
        display:block;
        min-height:calc(100svh - 72px);
        direction:rtl;
    }
    .mf-auth-hero{
        display:none !important;
    }
    .mf-auth-card{
        min-height:calc(100svh - 72px);
        align-items:flex-start;
        padding:24px 16px 32px;
        background:transparent;
        border:0;
    }
    .mf-auth-card-inner{
        width:100%;
        max-width:460px;
        margin:0 auto;
        padding:24px 18px 22px;
        border:1px solid rgba(20,124,255,.12);
        border-radius:8px;
        background:rgba(255,255,255,.96);
        box-shadow:0 18px 42px rgba(15,35,70,.10);
    }
    .mf-auth-kicker{margin-bottom:14px;background:#147CFF}
    .mf-auth-card h1,
    .mf-auth-card h2{font-size:36px;letter-spacing:-1px}
    .mf-auth-card p{font-size:15px;margin-bottom:22px}
    .mf-auth-features{display:none}
    .mf-auth-row{align-items:flex-start;flex-direction:column-reverse}
    .mf-auth-gender,.mf-password-rules{grid-template-columns:1fr}
    .mf-auth-footer{margin-top:22px}
}

@media(max-width:420px){
    .mf-auth-card{padding:18px 12px 26px}
    .mf-auth-card-inner{padding:22px 14px 20px;border-radius:6px}
    .mf-auth-card h1,
    .mf-auth-card h2{font-size:32px}
    .mf-auth-field input,
    .mf-field input{min-height:52px}
    .mf-auth-submit{min-height:54px}
}

/* =========================================================
   Fix: auth logo must sit on the physical LEFT side
   This overrides RTL / header-logo internal alignment safely.
========================================================= */
.mf-auth-topbar{
    position:fixed;
    direction:ltr !important;
    justify-content:flex-start !important;
}

.mf-auth-topbar .mf-auth-logo-wrap{
    position:absolute !important;
    left:clamp(14px,2.2vw,34px) !important;
    right:auto !important;
    top:50% !important;
    transform:translateY(-50%) !important;
    margin:0 !important;
    padding:0 !important;
    min-width:0 !important;
    width:auto !important;
    max-width:240px !important;
    display:flex !important;
    align-items:center !important;
    justify-content:flex-start !important;
    direction:ltr !important;
    text-align:left !important;
}

.mf-auth-topbar .mf-auth-logo-wrap > *,
.mf-auth-topbar .mf-auth-logo-wrap .mf-logo-image-exact,
.mf-auth-topbar .mf-auth-logo-wrap .mf-logo-image-exact a{
    margin:0 !important;
    padding:0 !important;
    min-width:0 !important;
    width:auto !important;
    display:flex !important;
    align-items:center !important;
    justify-content:flex-start !important;
    direction:ltr !important;
    text-align:left !important;
}

.mf-auth-topbar .mf-auth-logo-wrap img{
    margin:0 !important;
    display:block !important;
}

@media(max-width:767px){
    .mf-auth-topbar .mf-auth-logo-wrap{
        left:18px !important;
        max-width:190px !important;
    }
}