:root{
    --registration-background:#f6f5f1;
    --registration-surface:#ffffff;
    --registration-text:#111111;
    --registration-muted:#6b7280;
    --registration-line:#e5e2da;
    --registration-gold:#d4af37;
    --registration-gold-hover:#e3c75f;
    --registration-gold-dark:#8d6908;
    --registration-error:#b42318;
    --registration-error-soft:#fff1f0;
    --registration-radius-xl:30px;
    --registration-radius-lg:20px;
    --registration-radius-md:14px;
    --registration-shadow:0 24px 70px rgba(17,24,39,.10);
}

.registration-page{
    min-height:calc(100vh - 80px);
    padding:34px;
    background:var(--registration-background);
    color:var(--registration-text);
}

.registration-shell{
    display:grid;
    grid-template-columns:minmax(390px,.9fr) minmax(520px,1.1fr);
    min-height:calc(100vh - 148px);
    max-width:1280px;
    margin:0 auto;
    overflow:hidden;
    border:1px solid var(--registration-line);
    border-radius:var(--registration-radius-xl);
    background:var(--registration-surface);
    box-shadow:var(--registration-shadow);
}

.registration-brand-panel{
    position:relative;
    display:flex;
    flex-direction:column;
    justify-content:space-between;
    overflow:hidden;
    padding:58px;
    background:radial-gradient(circle at 85% 14%,rgba(212,175,55,.24),transparent 27%),linear-gradient(145deg,#101010 0%,#191919 58%,#24211a 100%);
    color:#fff;
}

.registration-brand-panel::before,
.registration-brand-panel::after{
    content:"";
    position:absolute;
    border-radius:50%;
}

.registration-brand-panel::before{
    top:-140px;
    right:-120px;
    width:360px;
    height:360px;
    border:1px solid rgba(255,255,255,.06);
}

.registration-brand-panel::after{
    right:-90px;
    bottom:-180px;
    width:430px;
    height:430px;
    border:1px solid rgba(212,175,55,.12);
}

.registration-brand-content,
.registration-brand-footer{position:relative;z-index:2;}

.registration-kicker,
.registration-form-label{
    display:inline-block;
    color:var(--registration-gold);
    font-size:11px;
    font-weight:900;
    letter-spacing:.16em;
    text-transform:uppercase;
}

.registration-brand-panel h1{
    max-width:540px;
    margin:18px 0 22px;
    color:#fff;
    font-size:clamp(50px,5.2vw,76px);
    line-height:.96;
    letter-spacing:-.055em;
}

.registration-brand-description{
    max-width:500px;
    margin:0;
    color:rgba(255,255,255,.68);
    font-size:16px;
    line-height:1.75;
}

.registration-benefits{display:grid;gap:14px;margin-top:42px;}

.registration-benefits article{
    display:flex;
    align-items:center;
    gap:14px;
    padding:14px;
    border:1px solid rgba(255,255,255,.09);
    border-radius:16px;
    background:rgba(255,255,255,.045);
    backdrop-filter:blur(12px);
}

.registration-benefits article>span{
    flex:0 0 auto;
    display:grid;
    place-items:center;
    width:42px;
    height:42px;
    border-radius:13px;
    background:rgba(212,175,55,.14);
    color:var(--registration-gold);
}

.registration-benefits strong,
.registration-benefits small{display:block;}
.registration-benefits strong{color:#fff;font-size:13px;}
.registration-benefits small{margin-top:3px;color:rgba(255,255,255,.56);font-size:11px;line-height:1.4;}

.registration-brand-footer{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px;
    margin-top:54px;
    padding-top:22px;
    border-top:1px solid rgba(255,255,255,.09);
}
.registration-brand-footer span{color:#fff;font-size:15px;font-weight:900;}
.registration-brand-footer small{color:rgba(255,255,255,.48);font-size:10px;}

.registration-form-panel{
    display:flex;
    align-items:center;
    justify-content:center;
    padding:54px;
    background:#fff;
}
.registration-form-wrap{width:min(100%,560px);}
.registration-mobile-brand{display:none;}
.registration-header{margin-bottom:30px;}
.registration-header h2{margin:10px 0 8px;color:var(--registration-text);font-size:40px;line-height:1;letter-spacing:-.045em;}
.registration-header p{margin:0;color:var(--registration-muted);font-size:14px;line-height:1.6;}

.registration-messages{display:grid;gap:10px;margin-bottom:18px;}
.registration-alert{
    display:flex;
    align-items:flex-start;
    gap:10px;
    padding:13px 14px;
    border:1px solid #eadfb9;
    border-radius:var(--registration-radius-md);
    background:#fffaf0;
    color:#735b17;
    font-size:12px;
    line-height:1.5;
}
.registration-alert-error{margin-bottom:18px;border-color:#f4b9b4;background:var(--registration-error-soft);color:var(--registration-error);}

.registration-form{display:grid;gap:18px;}
.registration-form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;}
.registration-field{min-width:0;}
.registration-field label{display:block;margin-bottom:8px;color:var(--registration-text);font-size:11px;font-weight:900;letter-spacing:.02em;}
.registration-field input,
.registration-field select,
.registration-field textarea{
    width:100%;
    min-height:50px;
    padding:0 14px;
    border:1px solid #d8d5cd;
    border-radius:13px;
    outline:none;
    background:#fff;
    color:var(--registration-text);
    font:inherit;
    font-size:13px;
    transition:border-color .2s ease,box-shadow .2s ease,background .2s ease;
}
.registration-field input:focus,
.registration-field select:focus,
.registration-field textarea:focus{border-color:var(--registration-gold);box-shadow:0 0 0 4px rgba(212,175,55,.14);}
.registration-label-row{display:flex;align-items:center;justify-content:space-between;gap:18px;}
.registration-password-toggle{margin-bottom:8px;padding:0;border:0;background:transparent;color:var(--registration-gold-dark);font-size:10px;font-weight:900;cursor:pointer;}
.registration-help,
.registration-password-help{display:block;margin-top:7px;color:var(--registration-muted);font-size:10px;line-height:1.5;}
.registration-password-help ul{margin:7px 0 0;padding-left:16px;}
.registration-field-errors{display:grid;gap:3px;margin-top:7px;color:var(--registration-error);font-size:10px;line-height:1.4;}
.registration-field-errors ul,
.registration-field .errorlist{margin:0;padding:0;list-style:none;}

.registration-submit{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:10px;
    width:100%;
    min-height:52px;
    margin-top:4px;
    border:0;
    border-radius:14px;
    background:var(--registration-gold);
    color:#111;
    font-size:12px;
    font-weight:900;
    cursor:pointer;
    transition:transform .22s ease,background .22s ease,box-shadow .22s ease;
}
.registration-submit:hover{transform:translateY(-2px);background:var(--registration-gold-hover);box-shadow:0 14px 30px rgba(212,175,55,.24);}
.registration-terms{max-width:430px;margin:0 auto;color:#8a8f99;font-size:9px;line-height:1.5;text-align:center;}
.registration-divider{display:flex;align-items:center;gap:13px;color:#8a8f99;font-size:9px;font-weight:800;text-transform:uppercase;}
.registration-divider::before,
.registration-divider::after{content:"";flex:1;height:1px;background:var(--registration-line);}
.registration-login-link{
    display:flex;
    align-items:center;
    justify-content:center;
    min-height:48px;
    border:1px solid #d8d5cd;
    border-radius:14px;
    background:#fff;
    color:var(--registration-text);
    font-size:11px;
    font-weight:900;
    text-decoration:none;
}
.registration-login-link:hover{border-color:var(--registration-gold);background:#fffcf2;}

@media(max-width:1000px){
    .registration-page{padding:22px;}
    .registration-shell{grid-template-columns:340px minmax(0,1fr);}
    .registration-brand-panel{padding:40px 32px;}
    .registration-brand-panel h1{font-size:50px;}
    .registration-form-panel{padding:42px 34px;}
}

@media(max-width:760px){
    .registration-page{min-height:auto;padding:0;background:#fff;}
    .registration-shell{display:block;min-height:auto;border:0;border-radius:0;box-shadow:none;}
    .registration-brand-panel{min-height:auto;padding:72px 22px 30px;border-radius:0 0 28px 28px;}
    .registration-brand-panel h1{max-width:330px;margin:12px 0 14px;font-size:42px;line-height:.95;}
    .registration-brand-description{max-width:330px;font-size:12px;line-height:1.58;}
    .registration-benefits{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-top:24px;}
    .registration-benefits article{display:block;min-width:0;padding:12px 8px;text-align:center;}
    .registration-benefits article>span{width:34px;height:34px;margin:0 auto 8px;border-radius:11px;font-size:13px;}
    .registration-benefits strong{font-size:9px;line-height:1.2;}
    .registration-benefits small{display:none;}
    .registration-brand-footer{display:none;}
    .registration-form-panel{display:block;padding:34px 18px 44px;}
    .registration-mobile-brand{display:inline-block;margin-bottom:22px;color:var(--registration-text);font-size:15px;font-weight:900;text-decoration:none;}
    .registration-header{margin-bottom:24px;}
    .registration-form-label{font-size:9px;letter-spacing:.13em;}
    .registration-header h2{margin:8px 0 7px;font-size:30px;}
    .registration-header p{font-size:12px;}
    .registration-form{gap:15px;}
    .registration-form-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;}
    .registration-field label{margin-bottom:7px;font-size:10px;}
    .registration-field input,
    .registration-field select,
    .registration-field textarea{min-height:48px;padding:0 12px;border-radius:12px;font-size:12px;}
    .registration-password-help{max-height:68px;overflow:auto;font-size:9px;}
    .registration-submit{min-height:50px;margin-top:2px;}
    .registration-login-link{min-height:46px;}
}

@media(max-width:390px){
    .registration-brand-panel h1{font-size:38px;}
    .registration-benefits{gap:6px;}
    .registration-form-grid{grid-template-columns:1fr;}
}


/* =======================================================
   KiraEdu Login Page
   Desktop + Mobile
======================================================= */

:root{
    --login-background:#f6f5f1;
    --login-surface:#ffffff;
    --login-text:#111111;
    --login-muted:#6b7280;
    --login-line:#e5e2da;
    --login-gold:#d4af37;
    --login-gold-hover:#e3c75f;
    --login-gold-dark:#8d6908;
    --login-error:#b42318;
    --login-error-soft:#fff1f0;
    --login-radius-xl:30px;
    --login-radius-lg:20px;
    --login-radius-md:14px;
    --login-shadow:0 24px 70px rgba(17,24,39,.10);
}


/* =======================================================
   Page Layout
======================================================= */

.login-page{
    min-height:calc(100vh - 80px);
    padding:34px;
    background:var(--login-background);
    color:var(--login-text);
}

.login-shell{
    display:grid;
    grid-template-columns:minmax(390px,.9fr) minmax(480px,1.1fr);
    min-height:calc(100vh - 148px);
    max-width:1280px;
    margin:0 auto;
    overflow:hidden;
    border:1px solid var(--login-line);
    border-radius:var(--login-radius-xl);
    background:var(--login-surface);
    box-shadow:var(--login-shadow);
}


/* =======================================================
   Brand Panel
======================================================= */

.login-brand-panel{
    position:relative;
    display:flex;
    flex-direction:column;
    justify-content:space-between;
    overflow:hidden;
    padding:58px;
    background:
        radial-gradient(
            circle at 85% 14%,
            rgba(212,175,55,.24),
            transparent 27%
        ),
        linear-gradient(
            145deg,
            #101010 0%,
            #191919 58%,
            #24211a 100%
        );
    color:#ffffff;
}

.login-brand-panel::before{
    content:"";
    position:absolute;
    top:-140px;
    right:-120px;
    width:360px;
    height:360px;
    border:1px solid rgba(255,255,255,.06);
    border-radius:50%;
}

.login-brand-panel::after{
    content:"";
    position:absolute;
    right:-90px;
    bottom:-180px;
    width:430px;
    height:430px;
    border:1px solid rgba(212,175,55,.12);
    border-radius:50%;
}

.login-brand-content,
.login-brand-footer{
    position:relative;
    z-index:2;
}

.login-kicker,
.login-form-label{
    display:inline-block;
    color:var(--login-gold);
    font-size:11px;
    font-weight:900;
    letter-spacing:.16em;
    text-transform:uppercase;
}

.login-brand-panel h1{
    max-width:560px;
    margin:18px 0 22px;
    color:#ffffff;
    font-size:clamp(50px,5.2vw,76px);
    line-height:.96;
    letter-spacing:-.055em;
}

.login-brand-description{
    max-width:500px;
    margin:0;
    color:rgba(255,255,255,.68);
    font-size:16px;
    line-height:1.75;
}

.login-benefits{
    display:grid;
    gap:14px;
    margin-top:42px;
}

.login-benefits article{
    display:flex;
    align-items:center;
    gap:14px;
    padding:14px;
    border:1px solid rgba(255,255,255,.09);
    border-radius:16px;
    background:rgba(255,255,255,.045);
    backdrop-filter:blur(12px);
}

.login-benefits article > span{
    flex:0 0 auto;
    display:grid;
    place-items:center;
    width:42px;
    height:42px;
    border-radius:13px;
    background:rgba(212,175,55,.14);
    color:var(--login-gold);
}

.login-benefits strong,
.login-benefits small{
    display:block;
}

.login-benefits strong{
    color:#ffffff;
    font-size:13px;
}

.login-benefits small{
    margin-top:3px;
    color:rgba(255,255,255,.56);
    font-size:11px;
    line-height:1.4;
}

.login-brand-footer{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px;
    margin-top:54px;
    padding-top:22px;
    border-top:1px solid rgba(255,255,255,.09);
}

.login-brand-footer span{
    color:#ffffff;
    font-size:15px;
    font-weight:900;
}

.login-brand-footer small{
    color:rgba(255,255,255,.48);
    font-size:10px;
}


/* =======================================================
   Form Panel
======================================================= */

.login-form-panel{
    display:flex;
    align-items:center;
    justify-content:center;
    padding:54px;
    background:#ffffff;
}

.login-form-wrap{
    width:min(100%,500px);
}

.login-mobile-brand{
    display:none;
}

.login-header{
    margin-bottom:30px;
}

.login-header h2{
    margin:10px 0 8px;
    color:var(--login-text);
    font-size:40px;
    line-height:1;
    letter-spacing:-.045em;
}

.login-header p{
    margin:0;
    color:var(--login-muted);
    font-size:14px;
    line-height:1.6;
}


/* =======================================================
   Messages and Errors
======================================================= */

.login-messages{
    display:grid;
    gap:10px;
    margin-bottom:18px;
}

.login-alert{
    display:flex;
    align-items:flex-start;
    gap:10px;
    padding:13px 14px;
    border:1px solid #eadfb9;
    border-radius:var(--login-radius-md);
    background:#fffaf0;
    color:#735b17;
    font-size:12px;
    line-height:1.5;
}

.login-alert i{
    margin-top:2px;
}

.login-alert-error{
    margin-bottom:18px;
    border-color:#f4b9b4;
    background:var(--login-error-soft);
    color:var(--login-error);
}


/* =======================================================
   Login Form
======================================================= */

.login-form{
    display:grid;
    gap:18px;
}

.login-field{
    min-width:0;
}

.login-field label{
    display:block;
    margin-bottom:8px;
    color:var(--login-text);
    font-size:11px;
    font-weight:900;
    letter-spacing:.02em;
}

.login-field input,
.login-field select,
.login-field textarea{
    width:100%;
    min-height:50px;
    padding:0 14px;
    border:1px solid #d8d5cd;
    border-radius:13px;
    outline:none;
    background:#ffffff;
    color:var(--login-text);
    font:inherit;
    font-size:13px;
    transition:
        border-color .2s ease,
        box-shadow .2s ease,
        background .2s ease;
}

.login-field input::placeholder{
    color:#a1a1aa;
}

.login-field input:hover{
    border-color:#bcb8ae;
}

.login-field input:focus{
    border-color:var(--login-gold);
    box-shadow:0 0 0 4px rgba(212,175,55,.14);
}

.login-field input[aria-invalid="true"]{
    border-color:var(--login-error);
}

.login-label-row{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:18px;
}

.login-password-toggle{
    margin-bottom:8px;
    padding:0;
    border:0;
    background:transparent;
    color:var(--login-gold-dark);
    font-size:10px;
    font-weight:900;
    cursor:pointer;
}

.login-field-errors{
    display:grid;
    gap:3px;
    margin-top:7px;
    color:var(--login-error);
    font-size:10px;
    line-height:1.4;
}

.login-field-errors ul,
.login-field .errorlist{
    margin:0;
    padding:0;
    list-style:none;
}

.login-row{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:18px;
}

.login-remember{
    display:inline-flex;
    align-items:center;
    gap:8px;
    cursor:pointer;
}

.login-remember input{
    width:15px;
    height:15px;
    accent-color:var(--login-gold);
}

.login-remember span,
.login-forgot-link{
    font-size:10px;
    font-weight:800;
}

.login-remember span{
    color:var(--login-muted);
}

.login-forgot-link{
    color:var(--login-gold-dark);
    text-decoration:none;
}

.login-forgot-link:hover{
    text-decoration:underline;
}


/* =======================================================
   Buttons
======================================================= */

.login-submit{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:10px;
    width:100%;
    min-height:52px;
    margin-top:2px;
    border:0;
    border-radius:14px;
    background:var(--login-gold);
    color:#111111;
    font-size:12px;
    font-weight:900;
    cursor:pointer;
    transition:
        transform .22s ease,
        background .22s ease,
        box-shadow .22s ease;
}

.login-submit:hover{
    transform:translateY(-2px);
    background:var(--login-gold-hover);
    box-shadow:0 14px 30px rgba(212,175,55,.24);
}

.login-submit:active{
    transform:translateY(0);
}

.login-divider{
    display:flex;
    align-items:center;
    gap:13px;
    color:#8a8f99;
    font-size:9px;
    font-weight:800;
    text-transform:uppercase;
}

.login-divider::before,
.login-divider::after{
    content:"";
    flex:1;
    height:1px;
    background:var(--login-line);
}

.login-register-link{
    display:flex;
    align-items:center;
    justify-content:center;
    min-height:48px;
    border:1px solid #d8d5cd;
    border-radius:14px;
    background:#ffffff;
    color:var(--login-text);
    font-size:11px;
    font-weight:900;
    text-decoration:none;
    transition:
        border-color .2s ease,
        background .2s ease;
}

.login-register-link:hover{
    border-color:var(--login-gold);
    background:#fffcf2;
}


/* =======================================================
   Tablet
======================================================= */

@media(max-width:1000px){

    .login-page{
        padding:22px;
    }

    .login-shell{
        grid-template-columns:340px minmax(0,1fr);
    }

    .login-brand-panel{
        padding:40px 32px;
    }

    .login-brand-panel h1{
        font-size:50px;
    }

    .login-form-panel{
        padding:42px 34px;
    }
}


/* =======================================================
   Mobile
======================================================= */

@media(max-width:760px){

    .login-page{
        min-height:auto;
        padding:0;
        background:#ffffff;
    }

    .login-shell{
        display:block;
        min-height:auto;
        border:0;
        border-radius:0;
        box-shadow:none;
    }

    .login-brand-panel{
        min-height:auto;
        padding:72px 22px 30px;
        border-radius:0 0 28px 28px;
    }

    .login-brand-panel h1{
        max-width:340px;
        margin:12px 0 14px;
        font-size:42px;
        line-height:.95;
    }

    .login-brand-description{
        max-width:330px;
        font-size:12px;
        line-height:1.58;
    }

    .login-benefits{
        grid-template-columns:repeat(3,minmax(0,1fr));
        gap:8px;
        margin-top:24px;
    }

    .login-benefits article{
        display:block;
        min-width:0;
        padding:12px 8px;
        text-align:center;
    }

    .login-benefits article > span{
        width:34px;
        height:34px;
        margin:0 auto 8px;
        border-radius:11px;
        font-size:13px;
    }

    .login-benefits strong{
        font-size:9px;
        line-height:1.2;
    }

    .login-benefits small{
        display:none;
    }

    .login-brand-footer{
        display:none;
    }

    .login-form-panel{
        display:block;
        padding:34px 18px 44px;
    }

    .login-form-wrap{
        width:100%;
    }

    .login-mobile-brand{
        display:inline-block;
        margin-bottom:22px;
        color:var(--login-text);
        font-size:15px;
        font-weight:900;
        text-decoration:none;
    }

    .login-header{
        margin-bottom:24px;
    }

    .login-form-label{
        font-size:9px;
        letter-spacing:.13em;
    }

    .login-header h2{
        margin:8px 0 7px;
        font-size:30px;
    }

    .login-header p{
        font-size:12px;
    }

    .login-form{
        gap:15px;
    }

    .login-field label{
        margin-bottom:7px;
        font-size:10px;
    }

    .login-field input,
    .login-field select,
    .login-field textarea{
        min-height:48px;
        padding:0 12px;
        border-radius:12px;
        font-size:12px;
    }

    .login-submit{
        min-height:50px;
    }

    .login-register-link{
        min-height:46px;
    }
}


@media(max-width:390px){

    .login-brand-panel h1{
        font-size:38px;
    }

    .login-benefits{
        gap:6px;
    }

    .login-row{
        align-items:flex-start;
    }
}


/* =======================================================
   KiraEdu Logout Page
======================================================= */

.logout-page{
    min-height:calc(100vh - 72px);
    background:#f4f4f1;
    padding:28px;
}

.logout-shell{
    width:min(1220px, 100%);
    min-height:720px;
    margin:0 auto;
    display:grid;
    grid-template-columns:minmax(0, .95fr) minmax(440px, 1.05fr);
    overflow:hidden;
    background:#fff;
    border:1px solid rgba(15, 23, 42, .08);
    border-radius:32px;
    box-shadow:
        0 30px 80px rgba(15, 23, 42, .10),
        0 4px 14px rgba(15, 23, 42, .04);
}

/* =======================================================
   Left Brand Panel
======================================================= */

.logout-brand{
    position:relative;
    display:flex;
    flex-direction:column;
    justify-content:space-between;
    overflow:hidden;
    padding:42px;
    color:#fff;
    background:
        radial-gradient(
            circle at 15% 10%,
            rgba(212, 175, 55, .25),
            transparent 32%
        ),
        radial-gradient(
            circle at 90% 85%,
            rgba(212, 175, 55, .12),
            transparent 30%
        ),
        linear-gradient(145deg, #090909 0%, #151515 55%, #080808 100%);
}

.logout-brand::before{
    content:"";
    position:absolute;
    width:330px;
    height:330px;
    right:-140px;
    top:-140px;
    border:1px solid rgba(255,255,255,.08);
    border-radius:50%;
}

.logout-brand::after{
    content:"";
    position:absolute;
    width:220px;
    height:220px;
    left:-100px;
    bottom:-100px;
    border:1px solid rgba(212,175,55,.18);
    border-radius:50%;
}

.logout-logo{
    position:relative;
    z-index:2;
    display:inline-flex;
    align-items:center;
    gap:12px;
    width:max-content;
    color:#fff;
    text-decoration:none;
    font-size:21px;
    font-weight:900;
    letter-spacing:-.03em;
}

.logout-logo-mark{
    width:40px;
    height:40px;
    display:grid;
    place-items:center;
    color:#111;
    background:linear-gradient(145deg, #f3d16b, #c89e28);
    border-radius:13px;
    font-size:18px;
    box-shadow:0 10px 25px rgba(212,175,55,.22);
}

.logout-brand-content{
    position:relative;
    z-index:2;
    max-width:470px;
    margin:70px 0;
}

.logout-kicker{
    display:inline-flex;
    align-items:center;
    gap:9px;
    margin-bottom:20px;
    color:#e9c85c;
    font-size:12px;
    font-weight:900;
    letter-spacing:.16em;
    text-transform:uppercase;
}

.logout-kicker::before{
    content:"";
    width:28px;
    height:1px;
    background:#d4af37;
}

.logout-brand h1{
    margin:0;
    color:#fff;
    font-size:clamp(42px, 5vw, 64px);
    line-height:1.02;
    letter-spacing:-.055em;
}

.logout-brand-content > p{
    max-width:430px;
    margin:24px 0 0;
    color:#b8b8b8;
    font-size:16px;
    line-height:1.75;
}

.logout-brand-points{
    display:grid;
    gap:14px;
    margin-top:38px;
}

.logout-brand-point{
    display:flex;
    gap:14px;
    padding:16px;
    border:1px solid rgba(255,255,255,.08);
    border-radius:18px;
    background:rgba(255,255,255,.045);
    backdrop-filter:blur(12px);
}

.logout-point-icon{
    flex:0 0 36px;
    width:36px;
    height:36px;
    display:grid;
    place-items:center;
    color:#e8c55d;
    background:rgba(212,175,55,.10);
    border:1px solid rgba(212,175,55,.20);
    border-radius:11px;
    font-size:11px;
    font-weight:900;
}

.logout-brand-point strong{
    display:block;
    margin-bottom:4px;
    color:#fff;
    font-size:14px;
}

.logout-brand-point p{
    margin:0;
    color:#929292;
    font-size:12px;
    line-height:1.55;
}

.logout-brand-footer{
    position:relative;
    z-index:2;
    margin:0;
    color:#777;
    font-size:12px;
}

/* =======================================================
   Confirmation Panel
======================================================= */

.logout-content{
    display:grid;
    place-items:center;
    padding:70px 58px;
    background:
        radial-gradient(
            circle at 100% 0%,
            rgba(212,175,55,.09),
            transparent 28%
        ),
        #fff;
}

.logout-card{
    width:min(480px, 100%);
    text-align:center;
}

.logout-success-icon{
    width:78px;
    height:78px;
    display:grid;
    place-items:center;
    margin:0 auto 22px;
    color:#111;
    background:linear-gradient(145deg, #f4d66f, #cfa62f);
    border:8px solid #faf2d6;
    border-radius:50%;
    box-shadow:
        0 18px 40px rgba(212,175,55,.23),
        inset 0 1px 0 rgba(255,255,255,.55);
}

.logout-success-icon svg{
    width:31px;
    height:31px;
}

.logout-status{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:7px 12px;
    color:#846817;
    background:#fbf5df;
    border:1px solid #eee1b2;
    border-radius:999px;
    font-size:11px;
    font-weight:900;
    letter-spacing:.08em;
    text-transform:uppercase;
}

.logout-card h2{
    margin:20px 0 12px;
    color:#111;
    font-size:44px;
    line-height:1.05;
    letter-spacing:-.05em;
}

.logout-description{
    max-width:440px;
    margin:0 auto;
    color:#68707c;
    font-size:15px;
    line-height:1.72;
}

.logout-security-note{
    display:flex;
    align-items:flex-start;
    gap:14px;
    margin:30px 0;
    padding:17px;
    text-align:left;
    background:#f7f7f4;
    border:1px solid #e9e9e4;
    border-radius:18px;
}

.logout-security-icon{
    flex:0 0 40px;
    width:40px;
    height:40px;
    display:grid;
    place-items:center;
    color:#806515;
    background:#f5e8b8;
    border-radius:12px;
}

.logout-security-icon svg{
    width:22px;
    height:22px;
}

.logout-security-note strong{
    display:block;
    margin-bottom:4px;
    color:#181818;
    font-size:13px;
}

.logout-security-note p{
    margin:0;
    color:#737373;
    font-size:12px;
    line-height:1.55;
}

.logout-actions{
    display:grid;
    gap:12px;
}

.logout-primary-btn,
.logout-secondary-btn{
    min-height:54px;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:10px;
    padding:14px 20px;
    border-radius:15px;
    text-decoration:none;
    font-size:14px;
    font-weight:900;
    transition:
        transform .2s ease,
        box-shadow .2s ease,
        background .2s ease,
        border-color .2s ease;
}

.logout-primary-btn{
    color:#fff;
    background:#111;
    border:1px solid #111;
    box-shadow:0 14px 28px rgba(17,17,17,.16);
}

.logout-primary-btn svg{
    width:18px;
    height:18px;
    transition:transform .2s ease;
}

.logout-primary-btn:hover{
    color:#fff;
    background:#242424;
    transform:translateY(-2px);
    box-shadow:0 18px 32px rgba(17,17,17,.20);
}

.logout-primary-btn:hover svg{
    transform:translateX(3px);
}

.logout-secondary-btn{
    color:#1b1b1b;
    background:#fff;
    border:1px solid #d9d9d3;
}

.logout-secondary-btn:hover{
    color:#111;
    background:#faf8ef;
    border-color:#d4af37;
    transform:translateY(-1px);
}

.logout-home-link{
    display:inline-block;
    margin-top:22px;
    color:#7a7a7a;
    text-decoration:none;
    font-size:13px;
    font-weight:700;
}

.logout-home-link:hover{
    color:#111;
    text-decoration:underline;
}

/* =======================================================
   Tablet
======================================================= */

@media(max-width:980px){

    .logout-page{
        padding:20px;
    }

    .logout-shell{
        grid-template-columns:1fr;
        min-height:auto;
    }

    .logout-brand{
        min-height:430px;
        padding:34px;
    }

    .logout-brand-content{
        margin:55px 0 30px;
    }

    .logout-brand h1{
        font-size:48px;
    }

    .logout-brand-points{
        grid-template-columns:repeat(3, 1fr);
    }

    .logout-brand-point{
        display:block;
    }

    .logout-point-icon{
        margin-bottom:12px;
    }

    .logout-content{
        padding:64px 36px;
    }
}

/* =======================================================
   Mobile
======================================================= */

@media(max-width:640px){

    .logout-page{
        min-height:100vh;
        padding:0;
        background:#fff;
    }

    .logout-shell{
        display:block;
        border:none;
        border-radius:0;
        box-shadow:none;
    }

    .logout-brand{
        min-height:auto;
        padding:24px 22px 38px;
        border-radius:0 0 30px 30px;
    }

    .logout-logo{
        font-size:18px;
    }

    .logout-logo-mark{
        width:36px;
        height:36px;
        border-radius:11px;
    }

    .logout-brand-content{
        margin:42px 0 0;
    }

    .logout-kicker{
        margin-bottom:15px;
        font-size:10px;
    }

    .logout-brand h1{
        max-width:340px;
        font-size:38px;
        line-height:1.04;
    }

    .logout-brand-content > p{
        margin-top:17px;
        font-size:14px;
        line-height:1.65;
    }

    .logout-brand-points,
    .logout-brand-footer{
        display:none;
    }

    .logout-content{
        display:block;
        padding:42px 22px 34px;
        background:#fff;
    }

    .logout-card{
        width:100%;
    }

    .logout-success-icon{
        width:68px;
        height:68px;
        margin-bottom:18px;
        border-width:7px;
    }

    .logout-success-icon svg{
        width:27px;
        height:27px;
    }

    .logout-status{
        font-size:9px;
    }

    .logout-card h2{
        margin-top:17px;
        font-size:36px;
    }

    .logout-description{
        font-size:14px;
        line-height:1.65;
    }

    .logout-security-note{
        margin:25px 0;
        padding:15px;
    }

    .logout-primary-btn,
    .logout-secondary-btn{
        min-height:56px;
        border-radius:15px;
        font-size:14px;
    }

    .logout-home-link{
        margin-top:20px;
    }
}

/* =======================================================
   Small Mobile
======================================================= */

@media(max-width:380px){

    .logout-brand{
        padding-left:18px;
        padding-right:18px;
    }

    .logout-content{
        padding-left:18px;
        padding-right:18px;
    }

    .logout-brand h1{
        font-size:34px;
    }

    .logout-card h2{
        font-size:32px;
    }
}


/* =========================================================
   KiraEdu — PASSWORD RECOVERY
========================================================= */

.auth-page{
    min-height:calc(100vh - 90px);
    padding:110px 24px 70px;
    background:
        radial-gradient(
            circle at top left,
            rgba(212,175,55,.14),
            transparent 34%
        ),
        #f4f6f8;
}

.auth-shell{
    width:100%;
    max-width:560px;
    margin:0 auto;
}

.auth-card{
    background:#ffffff;
    border:1px solid rgba(23,32,51,.1);
    border-radius:28px;
    padding:44px;
    box-shadow:0 24px 70px rgba(15,23,42,.1);
}

.auth-card-icon{
    width:64px;
    height:64px;
    margin-bottom:24px;
    border-radius:20px;
    display:flex;
    align-items:center;
    justify-content:center;
    background:rgba(212,175,55,.15);
    color:#9a6c00;
    font-size:25px;
}

.auth-card-icon.success{
    background:#e8f8ef;
    color:#18794e;
}

.auth-card-icon.danger{
    background:#feeceb;
    color:#b42318;
}

.auth-kicker{
    display:block;
    margin-bottom:10px;
    color:#9a6c00;
    font-size:12px;
    font-weight:800;
    letter-spacing:1.8px;
    text-transform:uppercase;
}

.auth-card h1{
    margin:0;
    color:#172033;
    font-size:clamp(30px, 5vw, 42px);
    line-height:1.12;
}

.auth-intro{
    margin:18px 0 30px;
    color:#667085;
    font-size:16px;
    line-height:1.75;
}

.auth-form{
    display:grid;
    gap:22px;
}

.auth-field{
    display:grid;
    gap:9px;
}

.auth-field label{
    color:#344054;
    font-size:14px;
    font-weight:700;
}

.auth-input-wrap{
    position:relative;
}

.auth-input-wrap > i{
    position:absolute;
    top:50%;
    left:17px;
    transform:translateY(-50%);
    color:#98a2b3;
    pointer-events:none;
}

.auth-input-wrap input{
    width:100%;
    min-height:54px;
    padding:13px 16px 13px 48px;
    border:1px solid #d0d5dd;
    border-radius:13px;
    background:#ffffff;
    color:#172033;
    font:inherit;
    outline:none;
    transition:
        border-color .2s ease,
        box-shadow .2s ease;
}

.auth-input-wrap input:focus{
    border-color:#d4af37;
    box-shadow:0 0 0 4px rgba(212,175,55,.15);
}

.auth-submit{
    min-height:54px;
    padding:14px 20px;
    border:0;
    border-radius:13px;
    background:linear-gradient(135deg,#d4af37,#b8860b);
    color:#172033;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:12px;
    font:inherit;
    font-weight:800;
    text-decoration:none;
    cursor:pointer;
    transition:
        transform .2s ease,
        box-shadow .2s ease;
}

.auth-submit:hover{
    transform:translateY(-2px);
    box-shadow:0 12px 28px rgba(184,134,11,.24);
}

.auth-link-button{
    width:100%;
    box-sizing:border-box;
}

.auth-footer-link{
    margin-top:26px;
    text-align:center;
}

.auth-footer-link a{
    color:#475467;
    font-size:14px;
    font-weight:700;
    text-decoration:none;
}

.auth-footer-link a:hover{
    color:#9a6c00;
}

.auth-field-error,
.auth-field-error ul,
.auth-alert-error{
    color:#b42318;
    font-size:13px;
}

.auth-field-error ul{
    margin:0;
    padding-left:18px;
}

.auth-help-text{
    color:#667085;
    font-size:13px;
    line-height:1.6;
}

.auth-help-text ul{
    margin:8px 0 0;
    padding-left:20px;
}

.auth-notice{
    margin-bottom:26px;
    padding:17px;
    border-radius:13px;
    display:flex;
    align-items:flex-start;
    gap:12px;
    background:#fff9e6;
    color:#5f4b00;
}

.auth-notice p{
    margin:0;
    font-size:14px;
    line-height:1.65;
}

@media (max-width:600px){

    .auth-page{
        padding:90px 16px 45px;
    }

    .auth-card{
        padding:30px 22px;
        border-radius:22px;
    }

}