:root{
    --navy:#14213d;
    --blue:#2563eb;
    --purple:#7c3aed;
    --bg:#f4f7ff;
    --red:#b91c1c;
    --ink:#18243b;
}

*{
    box-sizing:border-box;
}

body{
    margin:0;
    font:16px system-ui,-apple-system,"Segoe UI",sans-serif;
    background:
        radial-gradient(
            circle at top left,
            #e0e7ff 0,
            transparent 30%
        ),
        radial-gradient(
            circle at right 30%,
            #fce7f3 0,
            transparent 24%
        ),
        var(--bg);
    color:var(--ink);
}

header{
    background:
        linear-gradient(
            105deg,
            var(--navy),
            #1d4ed8 58%,
            var(--purple)
        );
    color:#fff;
    padding:15px max(5vw,20px);
    display:flex;
    gap:25px;
    align-items:center;
    justify-content:space-between;
    box-shadow:0 4px 18px #17255438;
}

.brand{
    font-weight:850;
    color:#fff;
    text-decoration:none;
    font-size:1.05rem;
}

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

nav a{
    color:#fff;
    font-weight:650;
}

main{
    max-width:1100px;
    margin:30px auto;
    padding:0 18px;
    min-height:75vh;
}

.card{
    background:#fff;
    border-radius:16px;
    padding:24px;
    box-shadow:0 8px 26px #17255414;
    margin-bottom:18px;
    border:1px solid #e6edff;
}

.grid{
    display:grid;
    grid-template-columns:
        repeat(auto-fit,minmax(230px,1fr));
    gap:18px;
}

h1{
    margin-top:0;
    font-size:clamp(1.7rem,4vw,2.35rem);
}

h2{
    color:#14213d;
}

a{
    color:#1d4ed8;
    font-weight:650;
}

input,
textarea,
select,
button{
    font:inherit;
    width:100%;
    padding:11px;
    border:1px solid #cbd5e1;
    border-radius:9px;
}

input:focus,
textarea:focus,
select:focus{
    outline:3px solid #bfdbfe;
    border-color:#2563eb;
}

label{
    font-weight:650;
    display:block;
    margin:12px 0 5px;
}

.btn,
button{
    display:inline-block;
    width:auto;
    background:
        linear-gradient(
            110deg,
            #2563eb,
            #7c3aed
        );
    color:#fff;
    border:0;
    cursor:pointer;
    text-decoration:none;
    padding:11px 18px;
    border-radius:9px;
    font-weight:750;
    box-shadow:0 4px 10px #2563eb38;
}

.btn.secondary{
    background:
        linear-gradient(
            110deg,
            #475569,
            #64748b
        );
}

.btn.danger{
    background:
        linear-gradient(
            110deg,
            #dc2626,
            #b91c1c
        );
}

.actions{
    display:flex;
    gap:10px;
    flex-wrap:wrap;
    margin-top:18px;
}

.flash{
    padding:13px 16px;
    border-radius:10px;
    margin-bottom:16px;
    font-weight:650;
}

.flash.success{
    background:#dcfce7;
    color:#166534;
}

.flash.error{
    background:#fee2e2;
    color:#991b1b;
}

table{
    width:100%;
    border-collapse:collapse;
    background:#fff;
}

th,
td{
    padding:12px;
    text-align:left;
    border-bottom:1px solid #e2e8f0;
}

th{
    background:#eef4ff;
    color:#1e3a8a;
}

.table-wrap{
    overflow:auto;
}

footer{
    text-align:center;
    color:#64748b;
    padding:25px;
    font-weight:600;
}

.login{
    max-width:460px;
    margin:55px auto;
}

.check-row{
    display:flex;
    gap:18px;
    flex-wrap:wrap;
}

.check-row label{
    display:flex;
    align-items:center;
    gap:7px;
}

.check-row input{
    width:auto;
}

.stat{
    font-size:2rem;
    font-weight:800;
    color:#14213d;
}
/* ================================================================
   FINAL SAMRUDDHI CLASSES LOGIN
   Responsive desktop + mobile design. Existing portal styles above
   are intentionally left intact for all authenticated pages.
   ================================================================ */
.login-page{
    min-height:100vh;
    margin:0;
    color:#101820;
    background:
        radial-gradient(circle at 8% 10%, rgba(0,125,82,.10), transparent 28%),
        radial-gradient(circle at 95% 90%, rgba(21,105,75,.10), transparent 30%),
        #f5f7f8;
    font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
    overflow-x:hidden;
}
.login-page *{box-sizing:border-box}
.login-shell{min-height:100vh;display:grid;place-items:center;padding:34px}
.login-card{
    width:min(1180px,100%);
    min-height:690px;
    display:grid;
    grid-template-columns:1.08fr .92fr;
    background:#fff;
    border:1px solid #e3e8e5;
    border-radius:28px;
    overflow:hidden;
    box-shadow:0 24px 70px rgba(16,50,38,.13);
}
.login-showcase{position:relative;overflow:hidden;background:#fff}
.showcase-inner{height:100%;min-height:690px;position:relative;padding:46px 48px 42px;overflow:hidden}
.brand-lockup{position:relative;z-index:4;display:flex;align-items:center;gap:13px;width:max-content}
.brand-mark{position:relative;width:52px;height:43px;color:#006b45;display:flex;align-items:center;justify-content:center}
.brand-mark:before{content:"";position:absolute;left:4px;right:4px;bottom:4px;height:18px;border:3px solid #006b45;border-top:0;border-radius:0 0 50% 50%}
.brand-mark-cap{position:absolute;top:0;font-size:24px;color:#006b45;transform:scaleX(1.35)}
.brand-mark-book{position:absolute;top:16px;color:#ff9418;font-size:22px;transform:rotate(45deg)}
.brand-name{font-weight:900;letter-spacing:.5px;font-size:28px;line-height:1;color:#006b45}
.brand-sub{font-size:13px;letter-spacing:7px;font-weight:700;margin-top:7px;margin-left:4px;color:#101820}
.showcase-copy{position:relative;z-index:6;margin-top:74px;width:310px}
.showcase-kicker{font-size:10px;letter-spacing:1.8px;font-weight:800;color:#006b45;margin-bottom:17px}
.showcase-copy h1{font-size:48px;line-height:1.05;letter-spacing:-1.5px;margin:0;color:#111820}
.showcase-copy h1 span{color:#ff8c10}
.showcase-copy p{display:none}
.feature-list{display:none}
.feature-item{display:flex;gap:13px;align-items:center}
.feature-icon{width:42px;height:42px;flex:0 0 42px;border-radius:50%;display:grid;place-items:center;background:#edf7f2;color:#006b45;font-weight:900;font-size:18px}
.feature-item strong{display:block;color:#005d3d;font-size:14px}
.feature-item small{display:block;color:#566269;font-size:11px;margin-top:3px}
.student-visual{position:absolute;inset:0;z-index:2;pointer-events:none}
.green-shape{position:absolute;width:500px;height:850px;right:-125px;top:-100px;background:#006b45;border-radius:48% 0 0 45%;transform:rotate(11deg)}
.green-shape:after{content:"";position:absolute;width:130px;height:300px;right:-10px;top:-20px;background:#ff9418;border-radius:0 0 0 100%;transform:rotate(-8deg)}
.student-visual img{position:absolute;z-index:3;width:355px;height:auto;max-height:660px;object-fit:contain;object-position:center bottom;right:-2px;bottom:-6px;mix-blend-mode:normal;border-radius:0;filter:saturate(.98);display:block}
.login-panel{background:#fff;display:flex;align-items:center;justify-content:center;padding:48px 48px 42px}
.login-panel-inner{width:min(410px,100%)}
.access-pill{display:inline-flex;padding:7px 13px;border-radius:999px;background:#edf7f2;color:#006b45;font-size:10px;font-weight:900;letter-spacing:.5px;margin-bottom:17px}
.login-panel h2{margin:0;color:#111820;font-size:36px;line-height:1.1;letter-spacing:-1px}
.login-intro{font-size:14px;line-height:1.55;color:#5c6870;margin:8px 0 27px}
.login-alert{padding:11px 13px;border-radius:10px;font-size:13px;font-weight:650;margin-bottom:14px}
.login-alert.error{background:#fff0f0;color:#a11d1d;border:1px solid #ffd1d1}
.login-alert.success{background:#edf9f1;color:#17643d;border:1px solid #ccebd7}
.professional-login-form label:not(.show-password){display:block;font-size:13px;font-weight:800;color:#101820;margin:0 0 8px}
.input-wrap{position:relative;margin-bottom:19px}
.input-wrap input{width:100%;height:53px;padding:0 48px 0 45px;border:1px solid #d7dfe0;border-radius:9px;background:#fff;color:#111820;font-size:14px;box-shadow:inset 0 1px 1px rgba(0,0,0,.02)}
.input-wrap input::placeholder{color:#8a9499}
.input-wrap input:focus{outline:3px solid rgba(0,107,69,.12);border-color:#008457}
.input-icon{position:absolute;left:16px;top:50%;transform:translateY(-50%);font-size:18px;color:#39474c;z-index:1}
.password-toggle{position:absolute;right:10px;top:50%;transform:translateY(-50%);width:34px;height:34px;padding:0;border:0;background:transparent;color:#607077;box-shadow:none;cursor:pointer}
.password-toggle:hover{background:#edf7f2;color:#006b45}
.login-options{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:-4px 0 20px;font-size:12px}
.login-options a{color:#006b45;text-decoration:none;font-weight:800}
.show-password{display:flex!important;align-items:center;gap:7px!important;margin:0!important;font-size:12px!important;font-weight:600!important;color:#334047!important}
.show-password input{width:16px;height:16px;accent-color:#006b45;margin:0}
.sign-in-btn{width:100%;height:52px;border:0;border-radius:8px;background:#006b45;color:#fff;font-size:15px;font-weight:850;letter-spacing:.2px;cursor:pointer;box-shadow:0 8px 18px rgba(0,107,69,.18);transition:transform .15s ease,box-shadow .15s ease}
.sign-in-btn:hover{transform:translateY(-1px);box-shadow:0 11px 24px rgba(0,107,69,.24)}
.or-divider{display:flex;align-items:center;gap:14px;color:#7a858a;font-size:12px;margin:19px 0}
.or-divider:before,.or-divider:after{content:"";height:1px;background:#e2e7e8;flex:1}
.register-btn{display:flex;align-items:center;justify-content:center;width:100%;height:49px;border:1px solid #008457;border-radius:8px;color:#006b45;background:#fff;text-decoration:none;font-size:14px;font-weight:800}
.register-btn:hover{background:#f0faf5}
.security-box{display:flex;gap:12px;align-items:center;margin-top:22px;padding:15px;border-radius:8px;background:#edf7f2;color:#101820}
.security-icon{width:35px;height:35px;display:grid;place-items:center;border:1px solid #008457;border-radius:50%;color:#006b45;flex:0 0 35px}
.security-box strong{display:block;font-size:12px}
.security-box small{display:block;color:#5e6a70;font-size:11px;margin-top:3px}
.developer-credit{text-align:center;margin-top:29px;display:flex;flex-direction:column;gap:4px;color:#4e5b60;font-size:11px}
.developer-credit strong{color:#202a2e;font-size:12px}
.developer-credit span{font-size:10px}
@media (max-width:980px){
    .login-shell{padding:20px}
    .login-card{grid-template-columns:1fr;max-width:650px;min-height:auto}
    .login-showcase{min-height:500px}
    .showcase-inner{min-height:500px;padding:34px 34px 28px}
    .showcase-copy{margin-top:58px;width:280px}
    .showcase-copy h1{font-size:42px}
    .feature-list{display:none}
    .green-shape{width:460px;height:620px;right:-190px;top:-80px}
    .student-visual img{width:300px;height:auto;max-height:500px;right:-2px;bottom:-8px}
    .login-panel{padding:38px 34px 34px}
}
@media (max-width:680px){
    .login-page{background:#f5f7f8}
    .login-shell{padding:0}
    .login-card{width:100%;border:0;border-radius:0;box-shadow:none}
    .login-showcase{min-height:430px}
    .showcase-inner{min-height:430px;padding:25px 22px 26px}
    .brand-name{font-size:23px}
    .brand-sub{font-size:10px;letter-spacing:5px}
    .brand-mark{transform:scale(.88);transform-origin:left center}
    .showcase-copy{margin-top:38px;width:62%;z-index:6}
    .showcase-kicker{font-size:8px;letter-spacing:1px;margin-bottom:10px}
    .showcase-copy h1{font-size:34px;letter-spacing:-1px}
    .showcase-copy p{display:none}
    .feature-list{display:none}
    .feature-item{gap:8px}
    .feature-icon{width:31px;height:31px;flex-basis:31px;font-size:13px}
    .feature-item strong{font-size:10px}
    .feature-item small{font-size:8px}
    .green-shape{width:250px;height:390px;right:-85px;top:-48px;border-radius:50% 0 0 40%}
    .student-visual img{width:170px;height:auto;max-height:285px;right:-4px;bottom:-3px;border-radius:0;object-fit:contain;object-position:center bottom}
    .login-panel{padding:31px 22px 35px;align-items:flex-start}
    .login-panel-inner{width:100%}
    .access-pill{font-size:9px;margin-bottom:13px}
    .login-panel h2{font-size:30px}
    .login-intro{font-size:13px;margin-bottom:23px}
    .desktop-only{display:none}
    .input-wrap input{height:52px;font-size:14px}
    .login-options{font-size:11px}
    .sign-in-btn{height:52px}
    .developer-credit{margin-top:25px}
}
@media (max-width:380px){
    .login-showcase{min-height:395px}
    .showcase-inner{min-height:395px;padding:22px 18px}
    .showcase-copy h1{font-size:30px}
    .feature-list{width:50%}
    .student-visual img{width:155px;height:auto;max-height:255px;right:-5px;bottom:-3px}
    .green-shape{width:235px;height:360px;right:-80px}
    .login-panel{padding-left:18px;padding-right:18px}
}