/* CoreMCQs Auth — Split Screen */
*{margin:0;padding:0;box-sizing:border-box}
body{font-family:'Inter',sans-serif;min-height:100vh;display:flex;background:#fff}

/* ── Left Brand Panel ── */
.auth-left{
    flex:1;display:flex;flex-direction:column;justify-content:center;
    background:linear-gradient(135deg,#1a1a2e 0%,#16213e 100%);
    padding:40px 48px;position:relative;overflow:hidden;min-height:100vh;
}
.auth-left::before{
    content:'';position:absolute;top:-120px;right:-80px;width:500px;height:500px;
    background:radial-gradient(circle,rgba(16,185,129,.18) 0%,transparent 65%);pointer-events:none;
}
.auth-left::after{
    content:'';position:absolute;bottom:-60px;left:-40px;width:350px;height:350px;
    background:radial-gradient(circle,rgba(56,189,248,.08) 0%,transparent 65%);pointer-events:none;
}

.hero-top{position:relative;z-index:1}
.hero-logo{display:flex;align-items:center;gap:14px;margin-bottom:32px}
.hero-logo .mark{
    width:52px;height:52px;background:linear-gradient(135deg,#10b981,#059669);
    border-radius:14px;display:flex;align-items:center;justify-content:center;
    box-shadow:0 8px 24px rgba(16,185,129,.35);flex-shrink:0;
}
.hero-logo .mark i{font-size:24px;color:#fff}
.hero-logo .wordmark{color:#fff;font-size:20px;font-weight:800;letter-spacing:-.3px}
.hero-logo .wordmark .core{color:#10b981}
.hero-logo .wordmark .mcqs{color:#fff;-webkit-text-stroke:.8px rgba(255,255,255,.3);paint-order:stroke fill}

.hero-content{position:relative;z-index:1;margin-bottom:28px}
.hero-content h2{color:#fff;font-size:34px;font-weight:800;line-height:1.25;margin-bottom:12px;letter-spacing:-.5px}
.hero-content p{color:rgba(255,255,255,.55);font-size:16px;line-height:1.7;max-width:420px}

.hero-features{position:relative;z-index:1}
.hero-features li{
    display:flex;align-items:center;gap:14px;color:rgba(255,255,255,.7);
    font-size:14px;margin-bottom:12px;list-style:none;
}
.hero-features li .feat-icon{
    width:34px;height:34px;border-radius:10px;display:flex;align-items:center;
    justify-content:center;font-size:13px;flex-shrink:0;
    background:rgba(16,185,129,.12);color:#10b981;
}

.hero-bottom{position:relative;z-index:1;display:flex;gap:32px}
.hero-stat .num{color:#fff;font-size:22px;font-weight:800;letter-spacing:-.5px}
.hero-stat .lbl{color:rgba(255,255,255,.4);font-size:12px;margin-top:2px;font-weight:500}

.hero-decor{
    position:absolute;right:40px;top:50%;transform:translateY(-50%);
    width:200px;height:200px;pointer-events:none;z-index:0;
}
.hero-decor .ring{
    position:absolute;border-radius:50%;border:1.5px solid rgba(16,185,129,.12);
}
.hero-decor .r1{width:200px;height:200px;top:0;left:0}
.hero-decor .r2{width:140px;height:140px;top:30px;left:30px;border-color:rgba(16,185,129,.18)}
.hero-decor .r3{width:80px;height:80px;top:60px;left:60px;border-color:rgba(16,185,129,.25)}
.hero-decor .dot{
    position:absolute;width:10px;height:10px;border-radius:50%;
    background:#10b981;box-shadow:0 0 16px rgba(16,185,129,.5);
}
.hero-decor .d1{top:95px;left:95px}

/* ── Right Form Panel ── */
.auth-right{
    width:520px;display:flex;align-items:center;justify-content:center;
    padding:48px;background:#fff;position:relative;
}
.auth-form{width:100%;max-width:380px;animation:slideUp .45s cubic-bezier(.16,1,.3,1) both}
@keyframes slideUp{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}

.auth-form-header{margin-bottom:32px}
.auth-form-header h1{font-size:26px;font-weight:800;color:#111827;letter-spacing:-.4px;margin-bottom:6px}
.auth-form-header p{font-size:14px;color:#6b7280;line-height:1.5}

/* Alerts */
.alert{
    padding:13px 16px;border-radius:10px;margin-bottom:20px;font-size:13px;
    display:flex;align-items:center;gap:10px;line-height:1.5;animation:shake .4s both;
}
@keyframes shake{0%,100%{transform:translateX(0)}20%{transform:translateX(-5px)}40%{transform:translateX(5px)}60%{transform:translateX(-3px)}80%{transform:translateX(3px)}}
.alert-error{background:#fef2f2;color:#b91c1c;border:1px solid #fecaca}
.alert-error i{color:#dc2626}
.alert-success{background:#f0fdf4;color:#15803d;border:1px solid #bbf7d0}
.alert-success i{color:#22c55e}
.alert-info{background:#eff6ff;color:#1d4ed8;border:1px solid #bfdbfe}
.alert-info i{color:#3b82f6}

/* Floating Inputs */
.field{position:relative;margin-bottom:20px}
.field label{
    position:absolute;left:44px;top:50%;transform:translateY(-50%);
    font-size:14px;color:#9ca3af;pointer-events:none;
    transition:all .2s cubic-bezier(.4,0,.2,1);background:transparent;padding:0 4px;z-index:1;
}
.field input{
    width:100%;padding:17px 15px 7px 44px;border:1.5px solid #e5e7eb;border-radius:10px;
    font-size:15px;font-family:inherit;transition:all .2s;background:#f9fafb;color:#111827;outline:none;
}
.field input:focus{border-color:#10b981;background:#fff;box-shadow:0 0 0 3px rgba(16,185,129,.08)}
.field input:focus~label,.field input:not(:placeholder-shown)~label{
    top:8px;transform:none;font-size:11px;color:#10b981;font-weight:600;
}
.field .fi{
    position:absolute;left:14px;top:50%;transform:translateY(-50%);
    color:#9ca3af;font-size:15px;pointer-events:none;transition:all .2s;z-index:2;
}
.field input:focus~.fi{color:#10b981}
.field input:not(:placeholder-shown)~.fi{top:8px;transform:scale(.8);color:#9ca3af}
.field input:not(:placeholder-shown):focus~.fi{color:#10b981}
.field .pw-toggle{
    position:absolute;right:10px;top:50%;transform:translateY(-50%);
    background:none;border:none;color:#9ca3af;cursor:pointer;
    padding:6px;border-radius:6px;transition:all .15s;z-index:2;
}
.field .pw-toggle:hover{color:#374151;background:#f3f4f6}
.field input:not(:placeholder-shown)~.pw-toggle{top:8px;transform:none}

/* Password Meter */
.pw-meter{display:flex;gap:3px;margin-top:6px}
.pw-meter span{flex:1;height:3px;border-radius:2px;background:#e5e7eb;transition:background .3s}
.pw-meter[data-level="1"] span:nth-child(1){background:#ef4444}
.pw-meter[data-level="2"] span:nth-child(-n+2){background:#f59e0b}
.pw-meter[data-level="3"] span:nth-child(-n+3){background:#10b981}
.pw-meter[data-level="4"] span{background:#059669}
.pw-hint{font-size:11px;color:#9ca3af;margin-top:4px}

/* Row helpers */
.form-extras{display:flex;justify-content:flex-end;margin-bottom:24px}
.form-extras a{color:#10b981;font-size:13px;font-weight:600;text-decoration:none}
.form-extras a:hover{color:#059669}

/* Submit Button */
.btn-primary{
    position:relative;width:100%;padding:13px;border:none;border-radius:10px;
    font-size:15px;font-weight:700;cursor:pointer;font-family:inherit;
    transition:all .2s;overflow:hidden;
    background:linear-gradient(135deg,#10b981,#059669);color:#fff;
    box-shadow:0 4px 14px rgba(16,185,129,.3);
}
.btn-primary:hover{box-shadow:0 6px 20px rgba(16,185,129,.45);transform:translateY(-1px)}
.btn-primary:active{transform:translateY(0)}
.btn-primary .label{display:flex;align-items:center;justify-content:center;gap:8px;transition:opacity .2s}
.btn-primary .spinner{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .2s}
.btn-primary.loading .label{opacity:0}
.btn-primary.loading .spinner{opacity:1}
.btn-primary .spinner::after{
    content:'';width:18px;height:18px;border:2.5px solid rgba(255,255,255,.3);
    border-top-color:#fff;border-radius:50%;animation:spin .6s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg)}}

/* Footer */
.auth-form-footer{text-align:center;margin-top:24px;font-size:13px;color:#6b7280}
.auth-form-footer a{color:#10b981;font-weight:700;text-decoration:none}
.auth-form-footer a:hover{color:#059669}

.auth-back{
    display:flex;align-items:center;justify-content:center;gap:6px;
    color:#9ca3af;font-size:12px;text-decoration:none;margin-top:16px;transition:color .15s;
}
.auth-back:hover{color:#6b7280}
.auth-back i{font-size:10px}

.terms{font-size:11.5px;color:#9ca3af;text-align:center;margin:-4px 0 20px;line-height:1.5}
.terms a{color:#10b981;text-decoration:none;font-weight:600}

/* Success Screen */
.success-screen{text-align:center;padding:24px 0}
.success-screen .check{
    width:60px;height:60px;background:#f0fdf4;border-radius:50%;
    display:flex;align-items:center;justify-content:center;margin:0 auto 16px;
    animation:pop .35s cubic-bezier(.16,1,.3,1) both .1s;
}
@keyframes pop{from{opacity:0;transform:scale(.5)}to{opacity:1;transform:none}}
.success-screen .check i{font-size:26px;color:#22c55e}
.success-screen h3{font-size:20px;font-weight:800;color:#111827;margin-bottom:8px}
.success-screen p{font-size:14px;color:#6b7280;line-height:1.6;margin-bottom:24px}

/* ── Mobile ── */
@media(max-width:960px){
    .auth-left{display:none}
    .auth-right{width:100%;min-height:100vh}
}
@media(max-width:480px){
    .auth-right{padding:28px 22px}
    .auth-form-header h1{font-size:22px}
}