/* ==========================================================
   Student LeetCode Tracker
   File: change-password.css
   Part: 1
   Compatible with:
   - change-password.html
   - auth.js
   - common.js
   ========================================================== */


/* ==========================================================
   RESET
   ========================================================== */

*,
*::before,
*::after{

    margin:0;
    padding:0;
    box-sizing:border-box;

}

html{

    scroll-behavior:smooth;
    -webkit-text-size-adjust:100%;

}

body{

    min-height:100vh;

    font-family:
        "Inter",
        "Segoe UI",
        Roboto,
        Arial,
        sans-serif;

    display:flex;
    justify-content:center;
    align-items:center;

    overflow-x:hidden;

    background:
        radial-gradient(circle at top left,#1e3a8a 0%,transparent 40%),
        radial-gradient(circle at bottom right,#0f766e 0%,transparent 35%),
        linear-gradient(
            135deg,
            #0f172a,
            #111827,
            #020617
        );

    color:#ffffff;

    position:relative;

}


/* ==========================================================
   ROOT VARIABLES
   ========================================================== */

:root{

    --primary:#2563eb;
    --primary-dark:#1d4ed8;
    --secondary:#0ea5e9;

    --success:#10b981;
    --warning:#f59e0b;
    --danger:#ef4444;

    --text:#ffffff;
    --text-light:#cbd5e1;

    --glass:rgba(255,255,255,.08);

    --border:rgba(255,255,255,.12);

    --shadow:
        0 25px 60px rgba(0,0,0,.45);

}


/* ==========================================================
   ANIMATED BACKGROUND
   ========================================================== */

body::before{

    content:"";

    position:fixed;

    inset:0;

    pointer-events:none;

    background:
        repeating-linear-gradient(
            90deg,
            rgba(255,255,255,.03),
            rgba(255,255,255,.03) 1px,
            transparent 1px,
            transparent 60px
        ),
        repeating-linear-gradient(
            rgba(255,255,255,.03),
            rgba(255,255,255,.03) 1px,
            transparent 1px,
            transparent 60px
        );

    animation:gridMove 18s linear infinite;

}

body::after{

    content:"";

    position:fixed;

    width:500px;

    height:500px;

    border-radius:50%;

    top:-180px;

    right:-120px;

    background:
        radial-gradient(
            circle,
            rgba(37,99,235,.18),
            transparent 70%
        );

    filter:blur(24px);

    animation:floatGlow 12s ease-in-out infinite;

}

@keyframes gridMove{

    from{

        transform:translateY(0);

    }

    to{

        transform:translateY(60px);

    }

}

@keyframes floatGlow{

    0%{

        transform:translate(0,0);

    }

    50%{

        transform:translate(-30px,30px);

    }

    100%{

        transform:translate(0,0);

    }

}

@keyframes fadeIn{

    from{

        opacity:0;

        transform:translateY(24px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}


/* ==========================================================
   WRAPPER
   ========================================================== */

.change-password-wrapper{

    width:100%;

    max-width:1200px;

    display:flex;

    justify-content:center;

    align-items:center;

    padding:40px 20px;

    animation:fadeIn .7s ease;

}


/* ==========================================================
   GLASS CARD
   ========================================================== */

.change-password-card{

    width:100%;

    max-width:560px;

    position:relative;

    overflow:hidden;

    border-radius:28px;

    padding:42px;

    backdrop-filter:blur(24px);

    background:var(--glass);

    border:1px solid var(--border);

    box-shadow:var(--shadow);

}

.change-password-card::before{

    content:"";

    position:absolute;

    width:240px;

    height:240px;

    border-radius:50%;

    top:-100px;

    left:-100px;

    background:
        radial-gradient(
            circle,
            rgba(59,130,246,.18),
            transparent 70%
        );

}

.change-password-card::after{

    content:"";

    position:absolute;

    width:220px;

    height:220px;

    border-radius:50%;

    right:-80px;

    bottom:-80px;

    background:
        radial-gradient(
            circle,
            rgba(16,185,129,.15),
            transparent 70%
        );

}


/* ==========================================================
   BRAND
   ========================================================== */

.brand{

    position:relative;

    z-index:2;

    text-align:center;

    margin-bottom:34px;

}

.brand-logo{

    width:88px;

    height:88px;

    margin:auto;

    border-radius:50%;

    display:flex;

    justify-content:center;

    align-items:center;

    background:
        linear-gradient(
            135deg,
            var(--primary),
            var(--secondary)
        );

    color:#ffffff;

    font-size:36px;

    font-weight:700;

    box-shadow:
        0 14px 35px rgba(37,99,235,.35);

}

.brand h1{

    margin-top:22px;

    font-size:30px;

    font-weight:700;

    color:#ffffff;

}

.brand p{

    margin-top:10px;

    color:var(--text-light);

    font-size:15px;

    line-height:1.7;

}


/* ==========================================================
   FORM
   ========================================================== */

.change-password-form{

    position:relative;

    z-index:2;

    display:flex;

    flex-direction:column;

    gap:22px;

}

.form-group{

    display:flex;

    flex-direction:column;

    gap:8px;

}

.form-group label{

    color:#dbeafe;

    font-size:14px;

    font-weight:700;

}

.input-wrapper{

    position:relative;

    display:flex;

    align-items:center;

}
/* ==========================================================
   Student LeetCode Tracker
   File: change-password.css
   Part: 2
   Continues from Part 1
   Compatible with:
   - change-password.html
   - auth.js
   - common.js
   ========================================================== */


/* ==========================================================
   INPUT FIELDS
   ========================================================== */

.input-wrapper input{

    width:100%;

    height:56px;

    padding:0 56px 0 18px;

    border:1px solid rgba(255,255,255,.12);

    border-radius:14px;

    outline:none;

    background:rgba(255,255,255,.06);

    color:#ffffff;

    font-size:15px;

    font-weight:500;

    transition:
        border-color .30s ease,
        background .30s ease,
        box-shadow .30s ease,
        transform .25s ease;

    backdrop-filter:blur(12px);

}

.input-wrapper input::placeholder{

    color:#94a3b8;

}

.input-wrapper input:hover{

    background:rgba(255,255,255,.08);

}

.input-wrapper input:focus{

    background:rgba(255,255,255,.10);

    border-color:#3b82f6;

    box-shadow:0 0 0 4px rgba(59,130,246,.18);

    transform:translateY(-1px);

}


/* ==========================================================
   INPUT ICON
   ========================================================== */

.input-icon{

    position:absolute;

    right:18px;

    top:50%;

    transform:translateY(-50%);

    color:#94a3b8;

    font-size:18px;

    pointer-events:none;

    transition:.30s;

}

.input-wrapper:focus-within .input-icon{

    color:#60a5fa;

}


/* ==========================================================
   PASSWORD TOGGLE
   ========================================================== */

.password-toggle{

    position:absolute;

    right:14px;

    top:50%;

    transform:translateY(-50%);

    width:38px;

    height:38px;

    border:none;

    outline:none;

    border-radius:50%;

    background:transparent;

    color:#94a3b8;

    display:flex;

    justify-content:center;

    align-items:center;

    cursor:pointer;

    transition:.25s;

}

.password-toggle:hover{

    background:rgba(255,255,255,.08);

    color:#ffffff;

}

.password-toggle:active{

    transform:translateY(-50%) scale(.95);

}

.password-toggle i{

    font-size:18px;

}


/* ==========================================================
   PASSWORD STRENGTH
   ========================================================== */

.password-strength{

    display:flex;

    flex-direction:column;

    gap:10px;

    margin-top:8px;

}

.strength-bar{

    width:100%;

    height:10px;

    border-radius:999px;

    background:rgba(255,255,255,.10);

    overflow:hidden;

}

.strength-fill{

    width:0;

    height:100%;

    border-radius:999px;

    background:linear-gradient(
        90deg,
        #ef4444,
        #f59e0b,
        #10b981
    );

    transition:width .35s ease;

}

.strength-text{

    font-size:13px;

    font-weight:600;

    color:#cbd5e1;

}

.strength-weak{

    color:#ef4444;

}

.strength-medium{

    color:#f59e0b;

}

.strength-strong{

    color:#10b981;

}


/* ==========================================================
   PASSWORD REQUIREMENTS
   ========================================================== */

.password-rules{

    margin-top:14px;

    padding:18px;

    border-radius:16px;

    background:rgba(255,255,255,.05);

    border:1px solid rgba(255,255,255,.08);

}

.password-rules h4{

    font-size:15px;

    color:#ffffff;

    margin-bottom:14px;

}

.password-rules ul{

    list-style:none;

    display:flex;

    flex-direction:column;

    gap:10px;

}

.password-rules li{

    display:flex;

    align-items:center;

    gap:10px;

    font-size:13px;

    color:#cbd5e1;

}

.password-rules li i{

    color:#94a3b8;

}

.password-rules li.valid{

    color:#bbf7d0;

}

.password-rules li.valid i{

    color:#10b981;

}

.password-rules li.invalid{

    color:#fecaca;

}

.password-rules li.invalid i{

    color:#ef4444;

}


/* ==========================================================
   VALIDATION MESSAGE
   ========================================================== */

.validation-message{

    display:none;

    margin-top:6px;

    font-size:13px;

    font-weight:600;

}

.validation-message.show{

    display:block;

}

.validation-message.success{

    color:#10b981;

}

.validation-message.error{

    color:#ef4444;

}

.validation-message.warning{

    color:#f59e0b;

}


/* ==========================================================
   BUTTONS
   ========================================================== */

.action-buttons{

    display:flex;

    gap:16px;

    flex-wrap:wrap;

    margin-top:8px;

}

.primary-btn,
.secondary-btn{

    flex:1;

    min-width:180px;

    height:54px;

    border:none;

    outline:none;

    border-radius:14px;

    cursor:pointer;

    display:flex;

    align-items:center;

    justify-content:center;

    gap:10px;

    font-size:15px;

    font-weight:700;

    transition:
        transform .25s ease,
        box-shadow .30s ease,
        opacity .30s ease;

}

.primary-btn{

    background:linear-gradient(
        135deg,
        #2563eb,
        #0ea5e9
    );

    color:#ffffff;

    box-shadow:0 16px 30px rgba(37,99,235,.30);

}

.primary-btn:hover{

    transform:translateY(-2px);

    box-shadow:0 22px 40px rgba(37,99,235,.40);

}

.secondary-btn{

    background:rgba(255,255,255,.08);

    color:#ffffff;

    border:1px solid rgba(255,255,255,.12);

}

.secondary-btn:hover{

    background:rgba(255,255,255,.12);

}


/* ==========================================================
   BUTTON LOADER
   ========================================================== */

.button-loader{

    width:18px;

    height:18px;

    border-radius:50%;

    border:2px solid rgba(255,255,255,.35);

    border-top-color:#ffffff;

    display:none;

    animation:buttonSpin .8s linear infinite;

}

.primary-btn.loading .button-loader{

    display:block;

}

.primary-btn.loading span{

    opacity:.80;

}

.primary-btn:disabled,
.secondary-btn:disabled{

    opacity:.70;

    cursor:not-allowed;

    transform:none;

}

@keyframes buttonSpin{

    from{

        transform:rotate(0deg);

    }

    to{

        transform:rotate(360deg);

    }

}
/* ==========================================================
   Student LeetCode Tracker
   File: change-password.css
   Part: 3
   Continues from Part 2
   Compatible with:
   - change-password.html
   - auth.js
   - common.js
   ========================================================== */


/* ==========================================================
   ALERT MESSAGE
   ========================================================== */

.alert{

    display:none;

    align-items:flex-start;

    gap:14px;

    padding:16px 18px;

    border-radius:16px;

    font-size:14px;

    line-height:1.7;

    animation:fadeIn .35s ease;

}

.alert.show{

    display:flex;

}

.alert i{

    font-size:20px;

    margin-top:2px;

}

.alert-success{

    background:rgba(16,185,129,.12);

    border:1px solid rgba(16,185,129,.25);

    color:#bbf7d0;

}

.alert-success i{

    color:#10b981;

}

.alert-error{

    background:rgba(239,68,68,.12);

    border:1px solid rgba(239,68,68,.25);

    color:#fecaca;

}

.alert-error i{

    color:#ef4444;

}

.alert-warning{

    background:rgba(245,158,11,.12);

    border:1px solid rgba(245,158,11,.25);

    color:#fde68a;

}

.alert-warning i{

    color:#f59e0b;

}

.alert-info{

    background:rgba(59,130,246,.12);

    border:1px solid rgba(59,130,246,.25);

    color:#dbeafe;

}

.alert-info i{

    color:#60a5fa;

}


/* ==========================================================
   SECURITY INFORMATION
   ========================================================== */

.security-card{

    margin-top:24px;

    padding:22px;

    border-radius:18px;

    background:rgba(255,255,255,.05);

    border:1px solid rgba(255,255,255,.08);

}

.security-title{

    display:flex;

    align-items:center;

    gap:10px;

    margin-bottom:16px;

    color:#ffffff;

    font-size:16px;

    font-weight:700;

}

.security-title i{

    color:#60a5fa;

}

.security-list{

    display:flex;

    flex-direction:column;

    gap:14px;

}

.security-item{

    display:flex;

    align-items:flex-start;

    gap:12px;

}

.security-item i{

    color:#10b981;

    margin-top:2px;

}

.security-item span{

    color:#cbd5e1;

    font-size:14px;

    line-height:1.7;

}


/* ==========================================================
   PASSWORD TIPS
   ========================================================== */

.password-tips{

    margin-top:24px;

    padding:22px;

    border-radius:18px;

    background:linear-gradient(
        135deg,
        rgba(37,99,235,.10),
        rgba(14,165,233,.08)
    );

    border:1px solid rgba(59,130,246,.18);

}

.password-tips h4{

    display:flex;

    align-items:center;

    gap:10px;

    margin-bottom:16px;

    color:#ffffff;

    font-size:16px;

    font-weight:700;

}

.password-tips h4 i{

    color:#60a5fa;

}

.password-tips ul{

    list-style:none;

    display:flex;

    flex-direction:column;

    gap:12px;

}

.password-tips li{

    display:flex;

    align-items:flex-start;

    gap:12px;

    color:#dbeafe;

    font-size:14px;

    line-height:1.7;

}

.password-tips li i{

    color:#22c55e;

    margin-top:2px;

}


/* ==========================================================
   ACCOUNT INFORMATION
   ========================================================== */

.account-info{

    margin-top:24px;

    display:grid;

    grid-template-columns:1fr;

    gap:14px;

}

.info-row{

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:16px;

    padding:14px 16px;

    border-radius:14px;

    background:rgba(255,255,255,.05);

    border:1px solid rgba(255,255,255,.08);

}

.info-label{

    color:#cbd5e1;

    font-size:14px;

    font-weight:600;

}

.info-value{

    color:#ffffff;

    font-size:14px;

    font-weight:700;

    text-align:right;

    word-break:break-word;

}


/* ==========================================================
   FOOTER
   ========================================================== */

.form-footer{

    margin-top:28px;

    text-align:center;

    color:#94a3b8;

    font-size:13px;

    line-height:1.8;

}

.form-footer a{

    color:#60a5fa;

    text-decoration:none;

    font-weight:600;

}

.form-footer a:hover{

    text-decoration:underline;

}


/* ==========================================================
   INPUT STATES
   ========================================================== */

.input-wrapper.success input{

    border-color:#10b981;

    background:rgba(16,185,129,.08);

}

.input-wrapper.success input:focus{

    box-shadow:0 0 0 4px rgba(16,185,129,.18);

}

.input-wrapper.error input{

    border-color:#ef4444;

    background:rgba(239,68,68,.08);

}

.input-wrapper.error input:focus{

    box-shadow:0 0 0 4px rgba(239,68,68,.18);

}


/* ==========================================================
   HELPER CLASSES
   ========================================================== */

.hidden{

    display:none !important;

}

.visible{

    display:block !important;

}

.w-100{

    width:100%;

}

.text-center{

    text-align:center;

}

.mt-10{

    margin-top:10px;

}

.mt-20{

    margin-top:20px;

}

.mt-30{

    margin-top:30px;

}

.mb-20{

    margin-bottom:20px;

}

.d-flex{

    display:flex;

}

.align-center{

    align-items:center;

}

.justify-between{

    justify-content:space-between;

}

.gap-10{

    gap:10px;

}

.gap-20{

    gap:20px;

}


/* ==========================================================
   ANIMATIONS
   ========================================================== */

@keyframes pulseSuccess{

    0%{

        transform:scale(1);

    }

    50%{

        transform:scale(1.03);

    }

    100%{

        transform:scale(1);

    }

}

.success-animation{

    animation:pulseSuccess .6s ease;

}

.fade-in{

    animation:fadeIn .4s ease;

}
/* ==========================================================
   Student LeetCode Tracker
   File: change-password.css
   Part: 4 (Final)
   Compatible with:
   - change-password.html
   - auth.js
   - common.js
   ========================================================== */


/* ==========================================================
   RESPONSIVE DESIGN
   ========================================================== */

@media (max-width:1200px){

    .change-password-wrapper{

        padding:32px;

    }

}

@media (max-width:992px){

    .change-password-card{

        max-width:540px;

        padding:36px;

    }

    .brand h1{

        font-size:28px;

    }

}

@media (max-width:768px){

    body{

        align-items:flex-start;

    }

    .change-password-wrapper{

        min-height:100vh;

        padding:24px 18px;

        align-items:center;

    }

    .change-password-card{

        width:100%;

        max-width:100%;

        padding:28px;

        border-radius:22px;

    }

    .brand-logo{

        width:76px;

        height:76px;

        font-size:32px;

    }

    .brand h1{

        font-size:24px;

    }

    .brand p{

        font-size:14px;

    }

    .action-buttons{

        flex-direction:column;

    }

    .primary-btn,
    .secondary-btn{

        width:100%;

    }

    .info-row{

        flex-direction:column;

        align-items:flex-start;

        gap:8px;

    }

    .info-value{

        text-align:left;

    }

}

@media (max-width:576px){

    .change-password-wrapper{

        padding:16px;

    }

    .change-password-card{

        padding:22px;

        border-radius:18px;

    }

    .brand-logo{

        width:68px;

        height:68px;

        font-size:28px;

    }

    .brand h1{

        font-size:22px;

    }

    .brand p{

        font-size:13px;

        line-height:1.6;

    }

    .input-wrapper input{

        height:52px;

        font-size:14px;

    }

    .primary-btn,
    .secondary-btn{

        height:52px;

        font-size:14px;

    }

    .password-rules,
    .security-card,
    .password-tips{

        padding:18px;

    }

    .alert{

        font-size:13px;

    }

}

@media (max-width:420px){

    .change-password-card{

        padding:18px;

    }

    .brand-logo{

        width:62px;

        height:62px;

        font-size:26px;

    }

    .brand h1{

        font-size:20px;

    }

}


/* ==========================================================
   LANDSCAPE MOBILE
   ========================================================== */

@media (max-height:700px){

    body{

        align-items:flex-start;

    }

    .change-password-wrapper{

        padding-top:24px;

        padding-bottom:24px;

    }

}


/* ==========================================================
   REDUCED MOTION
   ========================================================== */

@media (prefers-reduced-motion:reduce){

    *,
    *::before,
    *::after{

        animation:none !important;

        transition:none !important;

        scroll-behavior:auto !important;

    }

}


/* ==========================================================
   HIGH CONTRAST
   ========================================================== */

@media (prefers-contrast:more){

    .change-password-card{

        border:2px solid #ffffff;

    }

    .input-wrapper input{

        border:2px solid #ffffff;

    }

    .primary-btn,
    .secondary-btn{

        border:2px solid #ffffff;

    }

}


/* ==========================================================
   DARK MODE REFINEMENT
   ========================================================== */

@media (prefers-color-scheme:dark){

    .change-password-card{

        background:rgba(15,23,42,.82);

    }

}


/* ==========================================================
   PRINT
   ========================================================== */

@media print{

    body{

        background:#ffffff;

        color:#000000;

    }

    body::before,
    body::after{

        display:none;

    }

    .change-password-card{

        background:#ffffff;

        color:#000000;

        box-shadow:none;

        border:1px solid #cccccc;

    }

    .primary-btn,
    .secondary-btn,
    .password-toggle{

        display:none;

    }

}


/* ==========================================================
   SCROLLBAR
   ========================================================== */

::-webkit-scrollbar{

    width:10px;

}

::-webkit-scrollbar-track{

    background:#0f172a;

}

::-webkit-scrollbar-thumb{

    background:#475569;

    border-radius:999px;

}

::-webkit-scrollbar-thumb:hover{

    background:#64748b;

}


/* ==========================================================
   TEXT SELECTION
   ========================================================== */

::selection{

    background:#2563eb;

    color:#ffffff;

}


/* ==========================================================
   ACCESSIBILITY
   ========================================================== */

input:focus-visible,
button:focus-visible,
a:focus-visible{

    outline:3px solid rgba(96,165,250,.45);

    outline-offset:3px;

}


/* ==========================================================
   FINAL UTILITIES
   ========================================================== */

.rounded{

    border-radius:14px;

}

.shadow{

    box-shadow:0 18px 36px rgba(0,0,0,.18);

}

.border{

    border:1px solid rgba(255,255,255,.12);

}

.bold{

    font-weight:700;

}

.text-primary{

    color:#60a5fa;

}

.text-success{

    color:#10b981;

}

.text-warning{

    color:#f59e0b;

}

.text-danger{

    color:#ef4444;

}

.bg-primary{

    background:#2563eb;

}

.bg-success{

    background:#10b981;

}

.bg-warning{

    background:#f59e0b;

}

.bg-danger{

    background:#ef4444;

}

.opacity-75{

    opacity:.75;

}

.pointer-none{

    pointer-events:none;

}


/* ==========================================================
   END OF change-password.css

   Status  : COMPLETE
   Parts   : 4

   Project CSS Status:
   ✅ login.css
   ✅ student.css
   ✅ mentor.css
   ✅ cc.css
   ✅ change-password.css

   All CSS files completed.
   ========================================================== */