/* ==========================================================
   Student LeetCode Tracker
   File: login.css
   Part: 1
   Compatible with:
   - index.html
   - login.js
   - auth.js
   ----------------------------------------------------------
   Professional Responsive Login UI
   ========================================================== */

/* -----------------------------
   CSS 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;

    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;
    overflow-x:hidden;
    display:flex;
    align-items:center;
    justify-content:center;
    position:relative;
}

/* -----------------------------
   Animated Background
------------------------------ */

body::before{
    content:"";
    position:fixed;
    inset:0;
    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
        );
    pointer-events:none;
    animation:gridMove 18s linear infinite;
    opacity:.35;
}

body::after{
    content:"";
    position:fixed;
    width:500px;
    height:500px;
    border-radius:50%;
    background:
        radial-gradient(
            circle,
            rgba(59,130,246,.18),
            transparent 70%
        );
    top:-160px;
    right:-120px;
    filter:blur(20px);
    animation:floatGlow 12s ease-in-out infinite;
}

/* -----------------------------
   Keyframes
------------------------------ */

@keyframes gridMove{

    from{
        transform:translateY(0);
    }

    to{
        transform:translateY(60px);
    }

}

@keyframes floatGlow{

    0%{
        transform:translateY(0) translateX(0);
    }

    50%{
        transform:translateY(30px) translateX(-30px);
    }

    100%{
        transform:translateY(0) translateX(0);
    }

}

@keyframes fadeIn{

    from{
        opacity:0;
        transform:translateY(30px);
    }

    to{
        opacity:1;
        transform:translateY(0);
    }

}

@keyframes pulse{

    0%{
        transform:scale(1);
    }

    50%{
        transform:scale(1.03);
    }

    100%{
        transform:scale(1);
    }

}

/* -----------------------------
   Main Wrapper
------------------------------ */

.login-wrapper{
    width:100%;
    max-width:1200px;
    display:flex;
    justify-content:center;
    align-items:center;
    padding:40px 20px;
    animation:fadeIn .8s ease;
}

/* -----------------------------
   Login Card
------------------------------ */

.login-card{

    width:100%;
    max-width:470px;

    border-radius:26px;

    padding:42px;

    backdrop-filter:blur(22px);

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

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

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

    position:relative;

    overflow:hidden;

}

.login-card::before{

    content:"";

    position:absolute;

    left:-40%;

    top:-40%;

    width:220px;

    height:220px;

    border-radius:50%;

    background:

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

}

.login-card::after{

    content:"";

    position:absolute;

    right:-70px;

    bottom:-70px;

    width:220px;

    height:220px;

    border-radius:50%;

    background:

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

}

/* -----------------------------
   Brand Area
------------------------------ */

.brand-area{

    position:relative;

    z-index:2;

    text-align:center;

    margin-bottom:32px;

}

.brand-logo{

    width:82px;

    height:82px;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    margin:auto;

    background:
        linear-gradient(
            135deg,
            #2563eb,
            #06b6d4
        );

    font-size:34px;

    color:#fff;

    font-weight:700;

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

    animation:pulse 4s infinite;

}

.brand-title{

    margin-top:22px;

    font-size:30px;

    font-weight:700;

    letter-spacing:.4px;

    color:#fff;

}

.brand-subtitle{

    margin-top:10px;

    font-size:15px;

    color:#cbd5e1;

    line-height:1.7;

}

/* -----------------------------
   Login Form
------------------------------ */

.login-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{

    font-size:14px;

    font-weight:600;

    color:#dbeafe;

}

.input-wrapper{

    position:relative;

    display:flex;

    align-items:center;

}
/* ==========================================================
   login.css
   Part 2
   Continues from Part 1
   ========================================================== */


/*------------------------------------------------------------
INPUT FIELDS
-------------------------------------------------------------*/

.input-wrapper input,
.input-wrapper select{

    width:100%;

    height:56px;

    padding:0 56px 0 18px;

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

    border-radius:14px;

    outline:none;

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

    color:#ffffff;

    font-size:15px;

    font-weight:500;

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

    backdrop-filter:blur(10px);

}

.input-wrapper input::placeholder{

    color:#94a3b8;

    font-weight:400;

}

.input-wrapper input:hover{

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

}

.input-wrapper input:focus{

    border-color:#3b82f6;

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

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

    transform:translateY(-1px);

}

.input-wrapper select{

    appearance:none;

    cursor:pointer;

}

.input-wrapper select option{

    color:#111827;

}


/*------------------------------------------------------------
INPUT ICON
-------------------------------------------------------------*/

.input-icon{

    position:absolute;

    right:18px;

    top:50%;

    transform:translateY(-50%);

    font-size:18px;

    color:#94a3b8;

    pointer-events:none;

    transition:.30s;

}

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

    color:#3b82f6;

}


/*------------------------------------------------------------
PASSWORD TOGGLE
-------------------------------------------------------------*/

.password-toggle{

    position:absolute;

    right:16px;

    top:50%;

    transform:translateY(-50%);

    width:36px;

    height:36px;

    border:none;

    outline:none;

    background:transparent;

    color:#94a3b8;

    display:flex;

    align-items:center;

    justify-content:center;

    cursor:pointer;

    border-radius:50%;

    transition:.25s;

}

.password-toggle:hover{

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

    color:#ffffff;

}

.password-toggle:active{

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

}

.password-toggle i{

    font-size:18px;

}


/*------------------------------------------------------------
ROLE BADGE
-------------------------------------------------------------*/

.role-badge{

    display:inline-flex;

    align-items:center;

    gap:8px;

    padding:8px 16px;

    border-radius:999px;

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

    color:#bfdbfe;

    font-size:13px;

    font-weight:600;

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

    width:max-content;

}

.role-badge i{

    color:#60a5fa;

}


/*------------------------------------------------------------
OPTIONS ROW
-------------------------------------------------------------*/

.options-row{

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:16px;

    flex-wrap:wrap;

}

.remember-box{

    display:flex;

    align-items:center;

    gap:10px;

    cursor:pointer;

    user-select:none;

    color:#cbd5e1;

    font-size:14px;

}

.remember-box input{

    width:18px;

    height:18px;

    accent-color:#2563eb;

    cursor:pointer;

}

.forgot-link{

    text-decoration:none;

    color:#60a5fa;

    font-size:14px;

    font-weight:600;

    transition:.25s;

}

.forgot-link:hover{

    color:#93c5fd;

    text-decoration:underline;

}


/*------------------------------------------------------------
LOGIN BUTTON
-------------------------------------------------------------*/

.login-btn{

    width:100%;

    height:56px;

    border:none;

    outline:none;

    border-radius:14px;

    cursor:pointer;

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

    color:#ffffff;

    font-size:16px;

    font-weight:700;

    letter-spacing:.4px;

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

    display:flex;

    justify-content:center;

    align-items:center;

    gap:12px;

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

}

.login-btn:hover{

    transform:translateY(-2px);

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

}

.login-btn:active{

    transform:scale(.98);

}

.login-btn:disabled{

    cursor:not-allowed;

    opacity:.70;

    transform:none;

    box-shadow:none;

}


/*------------------------------------------------------------
BUTTON LOADER
-------------------------------------------------------------*/

.button-loader{

    width:18px;

    height:18px;

    border-radius:50%;

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

    border-top-color:#ffffff;

    animation:buttonSpin .8s linear infinite;

    display:none;

}

.login-btn.loading .button-loader{

    display:block;

}

.login-btn.loading span{

    opacity:.80;

}

@keyframes buttonSpin{

    from{

        transform:rotate(0deg);

    }

    to{

        transform:rotate(360deg);

    }

}


/*------------------------------------------------------------
FORM FOOTER
-------------------------------------------------------------*/

.login-footer{

    margin-top:28px;

    text-align:center;

    color:#94a3b8;

    font-size:13px;

    line-height:1.7;

}

.login-footer strong{

    color:#ffffff;

    font-weight:600;

}

.login-footer a{

    color:#60a5fa;

    text-decoration:none;

}

.login-footer a:hover{

    text-decoration:underline;

}


/*------------------------------------------------------------
MESSAGE BOX
-------------------------------------------------------------*/

.message-box{

    display:none;

    width:100%;

    padding:14px 18px;

    border-radius:12px;

    font-size:14px;

    font-weight:600;

    line-height:1.6;

    animation:fadeIn .35s ease;

}

.message-box.show{

    display:block;

}

.message-box.success{

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

    color:#bbf7d0;

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

}

.message-box.error{

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

    color:#fecaca;

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

}

.message-box.warning{

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

    color:#fde68a;

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

}


/*------------------------------------------------------------
DIVIDER
-------------------------------------------------------------*/

.login-divider{

    display:flex;

    align-items:center;

    gap:14px;

    margin:26px 0;

    color:#94a3b8;

    font-size:13px;

    text-transform:uppercase;

    letter-spacing:.10em;

}

.login-divider::before,
.login-divider::after{

    content:"";

    flex:1;

    height:1px;

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

}
/* ==========================================================
   login.css
   Part 3
   Continues from Part 2
   ========================================================== */


/*------------------------------------------------------------
QUICK LOGIN INFORMATION
-------------------------------------------------------------*/

.login-info{

    margin-top:28px;

    padding:22px;

    border-radius:18px;

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

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

    display:flex;

    flex-direction:column;

    gap:16px;

}

.login-info-title{

    display:flex;

    align-items:center;

    gap:10px;

    font-size:16px;

    font-weight:700;

    color:#ffffff;

}

.login-info-title i{

    color:#60a5fa;

    font-size:20px;

}

.info-item{

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:18px;

    padding:12px 0;

    border-bottom:1px solid rgba(255,255,255,.06);

}

.info-item:last-child{

    border-bottom:none;

}

.info-label{

    color:#cbd5e1;

    font-size:14px;

    font-weight:500;

}

.info-value{

    color:#ffffff;

    font-weight:700;

    font-size:14px;

    text-align:right;

    word-break:break-word;

}


/*------------------------------------------------------------
DEMO ACCOUNT CARD
-------------------------------------------------------------*/

.demo-card{

    margin-top:24px;

    padding:20px;

    border-radius:18px;

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

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

}

.demo-title{

    display:flex;

    align-items:center;

    gap:10px;

    color:#dbeafe;

    font-size:15px;

    font-weight:700;

    margin-bottom:14px;

}

.demo-title i{

    color:#60a5fa;

}

.demo-grid{

    display:grid;

    grid-template-columns:1fr;

    gap:12px;

}

.demo-row{

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:12px;

    padding:12px 14px;

    border-radius:12px;

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

}

.demo-role{

    color:#e2e8f0;

    font-weight:600;

    font-size:14px;

}

.demo-id{

    color:#93c5fd;

    font-weight:700;

    font-size:14px;

}


/*------------------------------------------------------------
LOGIN NOTICE
-------------------------------------------------------------*/

.login-notice{

    margin-top:24px;

    display:flex;

    gap:14px;

    align-items:flex-start;

    padding:18px;

    border-radius:16px;

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

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

}

.login-notice i{

    color:#fbbf24;

    font-size:20px;

    margin-top:2px;

}

.login-notice-content{

    flex:1;

}

.login-notice-content h4{

    font-size:15px;

    color:#fde68a;

    margin-bottom:6px;

}

.login-notice-content p{

    font-size:13px;

    color:#fef3c7;

    line-height:1.7;

}


/*------------------------------------------------------------
SECURITY BADGES
-------------------------------------------------------------*/

.security-badges{

    margin-top:24px;

    display:flex;

    flex-wrap:wrap;

    gap:12px;

}

.security-chip{

    display:flex;

    align-items:center;

    gap:8px;

    padding:10px 16px;

    border-radius:999px;

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

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

    font-size:13px;

    color:#dbeafe;

    font-weight:600;

}

.security-chip i{

    color:#34d399;

}


/*------------------------------------------------------------
STATUS INDICATORS
-------------------------------------------------------------*/

.status-online{

    color:#22c55e;

}

.status-offline{

    color:#ef4444;

}

.status-warning{

    color:#f59e0b;

}

.status-dot{

    width:10px;

    height:10px;

    border-radius:50%;

    display:inline-block;

    margin-right:8px;

    background:currentColor;

    box-shadow:0 0 12px currentColor;

}


/*------------------------------------------------------------
ERROR FIELD
-------------------------------------------------------------*/

.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);

}

.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);

}

.field-error{

    font-size:12px;

    color:#fca5a5;

    margin-top:4px;

    display:none;

}

.field-error.show{

    display:block;

}


/*------------------------------------------------------------
ACCESSIBILITY
-------------------------------------------------------------*/

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

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

    outline-offset:3px;

}


/*------------------------------------------------------------
CUSTOM SCROLLBAR
-------------------------------------------------------------*/

::-webkit-scrollbar{

    width:10px;

}

::-webkit-scrollbar-track{

    background:#0f172a;

}

::-webkit-scrollbar-thumb{

    background:#334155;

    border-radius:10px;

}

::-webkit-scrollbar-thumb:hover{

    background:#475569;

}


/*------------------------------------------------------------
TEXT SELECTION
-------------------------------------------------------------*/

::selection{

    background:#2563eb;

    color:#ffffff;

}


/*------------------------------------------------------------
SMOOTH TRANSITIONS
-------------------------------------------------------------*/

button,
input,
select,
a,
.login-card,
.demo-card,
.info-item,
.security-chip{

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

}


/*------------------------------------------------------------
UTILITY CLASSES
-------------------------------------------------------------*/

.text-center{

    text-align:center;

}

.text-left{

    text-align:left;

}

.text-right{

    text-align:right;

}

.hidden{

    display:none !important;

}

.visible{

    display:block !important;

}

.w-100{

    width:100%;

}

.mt-10{

    margin-top:10px;

}

.mt-20{

    margin-top:20px;

}

.mt-30{

    margin-top:30px;

}

.mb-20{

    margin-bottom:20px;

}

.flex{

    display:flex;

}

.align-center{

    align-items:center;

}

.justify-between{

    justify-content:space-between;

}

.gap-10{

    gap:10px;

}

.gap-20{

    gap:20px;

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


/*------------------------------------------------------------
RESPONSIVE DESIGN
------------------------------------------------------------*/

@media (max-width:1200px){

    .login-wrapper{

        padding:32px;

    }

}

@media (max-width:992px){

    .login-card{

        max-width:520px;

        padding:36px;

    }

    .brand-title{

        font-size:28px;

    }

}

@media (max-width:768px){

    body{

        align-items:flex-start;

    }

    .login-wrapper{

        min-height:100vh;

        padding:24px 18px;

        align-items:center;

    }

    .login-card{

        width:100%;

        max-width:100%;

        padding:28px;

        border-radius:22px;

    }

    .brand-logo{

        width:72px;

        height:72px;

        font-size:30px;

    }

    .brand-title{

        font-size:24px;

    }

    .brand-subtitle{

        font-size:14px;

    }

    .options-row{

        flex-direction:column;

        align-items:flex-start;

        gap:14px;

    }

    .remember-box{

        width:100%;

    }

    .forgot-link{

        width:100%;

        text-align:left;

    }

    .login-info{

        padding:18px;

    }

    .info-item{

        flex-direction:column;

        align-items:flex-start;

        gap:6px;

    }

    .info-value{

        text-align:left;

    }

    .demo-row{

        flex-direction:column;

        align-items:flex-start;

    }

    .security-badges{

        gap:10px;

    }

}

@media (max-width:576px){

    .login-wrapper{

        padding:16px;

    }

    .login-card{

        padding:22px;

        border-radius:18px;

    }

    .brand-title{

        font-size:22px;

    }

    .brand-subtitle{

        line-height:1.6;

    }

    .login-btn{

        height:54px;

        font-size:15px;

    }

    .input-wrapper input,
    .input-wrapper select{

        height:52px;

        font-size:14px;

    }

    .form-group label{

        font-size:13px;

    }

    .role-badge{

        font-size:12px;

    }

    .login-footer{

        font-size:12px;

    }

    .security-chip{

        width:100%;

        justify-content:center;

    }

    .message-box{

        font-size:13px;

    }

}

@media (max-width:420px){

    .brand-logo{

        width:64px;

        height:64px;

        font-size:26px;

    }

    .brand-title{

        font-size:20px;

    }

    .brand-subtitle{

        font-size:13px;

    }

    .login-card{

        padding:18px;

    }

    .demo-card{

        padding:16px;

    }

    .login-info{

        padding:16px;

    }

}


/*------------------------------------------------------------
LANDSCAPE MOBILE
------------------------------------------------------------*/

@media (max-height:700px){

    body{

        align-items:flex-start;

    }

    .login-wrapper{

        padding-top:24px;

        padding-bottom:24px;

    }

}


/*------------------------------------------------------------
PRINT
------------------------------------------------------------*/

@media print{

    body{

        background:#ffffff;

        color:#000000;

    }

    body::before,
    body::after{

        display:none;

    }

    .login-card{

        box-shadow:none;

        border:1px solid #cccccc;

        background:#ffffff;

        color:#000000;

    }

    .login-btn,
    .password-toggle,
    .forgot-link{

        display:none;

    }

}


/*------------------------------------------------------------
REDUCED MOTION
------------------------------------------------------------*/

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

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

        animation-duration:.01ms !important;

        animation-iteration-count:1 !important;

        transition-duration:.01ms !important;

        scroll-behavior:auto !important;

    }

}


/*------------------------------------------------------------
HIGH CONTRAST SUPPORT
------------------------------------------------------------*/

@media (prefers-contrast:more){

    .login-card{

        border:2px solid #ffffff;

    }

    .login-btn{

        border:2px solid #ffffff;

    }

    .input-wrapper input,
    .input-wrapper select{

        border:2px solid #ffffff;

    }

}


/*------------------------------------------------------------
DARK MODE REFINEMENTS
------------------------------------------------------------*/

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

    .login-card{

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

    }

}


/*------------------------------------------------------------
HELPER ANIMATIONS
------------------------------------------------------------*/

@keyframes slideDown{

    from{

        opacity:0;

        transform:translateY(-18px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

@keyframes slideUp{

    from{

        opacity:0;

        transform:translateY(18px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

@keyframes zoomIn{

    from{

        opacity:0;

        transform:scale(.95);

    }

    to{

        opacity:1;

        transform:scale(1);

    }

}

.animate-slide-down{

    animation:slideDown .45s ease;

}

.animate-slide-up{

    animation:slideUp .45s ease;

}

.animate-zoom{

    animation:zoomIn .45s ease;

}


/*------------------------------------------------------------
LOGIN STATE HELPERS
------------------------------------------------------------*/

.login-loading{

    pointer-events:none;

    opacity:.75;

}

.login-success{

    border-color:#10b981 !important;

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

}

.login-error{

    border-color:#ef4444 !important;

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

}


/*------------------------------------------------------------
DISABLED ELEMENTS
------------------------------------------------------------*/

button:disabled,
input:disabled,
select:disabled{

    cursor:not-allowed;

    opacity:.65;

}


/*------------------------------------------------------------
FINAL UTILITIES
------------------------------------------------------------*/

.rounded{

    border-radius:12px;

}

.shadow{

    box-shadow:0 15px 35px rgba(0,0,0,.20);

}

.border{

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

}

.fade{

    opacity:.75;

}

.bold{

    font-weight:700;

}

.text-primary{

    color:#60a5fa;

}

.text-success{

    color:#22c55e;

}

.text-danger{

    color:#ef4444;

}

.text-warning{

    color:#f59e0b;

}

.bg-primary{

    background:#2563eb;

}

.bg-success{

    background:#10b981;

}

.bg-danger{

    background:#ef4444;

}

.bg-warning{

    background:#f59e0b;

}


/* ==========================================================
   END OF login.css
   Total Parts : 4
   Status      : COMPLETE
   ========================================================== */