body {

    margin:0;

    background:#0f172a;

    color:#f8fafc;

    font-family:
    Arial,
    sans-serif;

}


.app-wrapper {

    display:flex;

    min-height:100vh;

}



.sidebar {

    width:260px;

    background:#1e293b;

    padding:25px;

    display:flex;

    flex-direction:column;

}



.brand {

    font-size:22px;

    font-weight:700;

    margin-bottom:20px;

}



.sidebar a {

    color:#cbd5e1;

    text-decoration:none;

    padding:12px;

    border-radius:8px;

    display:block;

    margin-bottom:8px;

}



.sidebar a:hover {

    background:#334155;

    color:white;

}



.sidebar-bottom {

    margin-top:auto;

}



.user-box {

    padding:15px;

    background:#0f172a;

    border-radius:10px;

    margin-bottom:10px;

}



.content {

    flex:1;

    padding:30px;

}



.card {

    border:none;

    border-radius:16px;

    overflow:hidden;

}


.card img {

    background:#020617;

}



.card:hover {

    transform:translateY(-3px);

    transition:0.2s ease;

}


/* =========================
AUTH PAGES

/* AUTH MODERN STYLE 
========================= */


.auth-page {

    min-height:100vh;

    display:flex;

    align-items:center;

    justify-content:center;

    background:
    radial-gradient(circle at top,
    #334155 0%,
    #0f172a 45%,
    #020617 100%);

    padding:20px;

}



.auth-container {

    width:100%;

    max-width:430px;

}



.auth-brand {

    text-align:center;

    margin-bottom:25px;

}



.auth-brand .brand-icon {

    width:70px;

    height:70px;

    margin:auto;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:20px;

    background:#1e293b;

    font-size:34px;

    box-shadow:
    0 0 40px rgba(148,163,184,.25);

}



.auth-brand h1 {

    margin-top:18px;

    font-size:34px;

    font-weight:800;

}



.auth-brand p {

    color:#94a3b8;

    font-size:15px;

}



.auth-card {

    background:
    rgba(30,41,59,.85);

    backdrop-filter:blur(15px);

    padding:32px;

    border-radius:24px;

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

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

}



.auth-card h2 {

    font-size:26px;

}



.auth-input {

    height:52px;

    background:#0f172a!important;

    border:1px solid #334155!important;

    border-radius:14px!important;

}



.auth-input {

    background:#0f172a !important;

    color:#f8fafc !important;

    border:1px solid #334155 !important;

}



.auth-input:focus {

    background:#0f172a !important;

    color:#f8fafc !important;

    border-color:#6366f1 !important;

    box-shadow:
    0 0 0 3px rgba(99,102,241,.15) !important;

}



.auth-input::placeholder {

    color:#64748b;

}



/* Chrome autofill fix */

.auth-input:-webkit-autofill,
.auth-input:-webkit-autofill:hover,
.auth-input:-webkit-autofill:focus {

    -webkit-text-fill-color:#f8fafc !important;

    -webkit-box-shadow:
    0 0 0px 1000px #0f172a inset !important;

    transition:
    background-color 9999s ease-in-out 0s;

}



.auth-button {

    width:100%;

    height:54px;

    border:none;

    border-radius:14px;

    background:
    linear-gradient(
        135deg,
        #6366f1,
        #8b5cf6
    );

    color:white;

    font-size:16px;

    font-weight:700;

    letter-spacing:.3px;

    cursor:pointer;

    box-shadow:
    0 10px 25px rgba(99,102,241,.35);

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

}



.auth-button:hover {

    transform:translateY(-2px);

    box-shadow:
    0 15px 35px rgba(139,92,246,.45);

}



.auth-button:active {

    transform:translateY(0);

}



.password-field {

    position:relative;

}


.password-field .auth-input {

    padding-right:50px;

}


.password-toggle {

    position:absolute;

    right:15px;

    top:50%;

    transform:translateY(-50%);

    background:none;

    border:none;

    color:#94a3b8;

    cursor:pointer;

    font-size:18px;

}


.password-toggle:hover {

    color:white;

}

.auth-link {

    color:#94a3b8;

}

body {

    margin:0;

    background:#0f172a;

    color:#f8fafc;

    font-family:
    Arial,
    sans-serif;

}


.app-wrapper {

    display:flex;

    min-height:100vh;

}



.sidebar {

    width:260px;

    background:#1e293b;

    padding:25px;

    display:flex;

    flex-direction:column;

}



.brand {

    font-size:22px;

    font-weight:700;

    margin-bottom:20px;

}



.sidebar a {

    color:#cbd5e1;

    text-decoration:none;

    padding:12px;

    border-radius:8px;

    display:block;

    margin-bottom:8px;

}



.sidebar a:hover {

    background:#334155;

    color:white;

}



.sidebar-bottom {

    margin-top:auto;

}



.user-box {

    padding:15px;

    background:#0f172a;

    border-radius:10px;

    margin-bottom:10px;

}



.content {

    flex:1;

    padding:30px;

}



.card {

    border:none;

    border-radius:16px;

    overflow:hidden;

}


.card img {

    background:#020617;

}



.card:hover {

    transform:translateY(-3px);

    transition:0.2s ease;

}


/* =========================
AUTH PAGES

/* AUTH MODERN STYLE 
========================= */


.auth-page {

    height:100vh;

    display:flex;

    align-items:center;

    justify-content:center;

    background:
    radial-gradient(circle at top,
    #334155 0%,
    #0f172a 45%,
    #020617 100%);

    padding:20px;

    overflow:hidden;

}



.auth-container {

    width:100%;

    max-width:430px;

}



.auth-brand {

    text-align:center;

    margin-bottom:25px;

}



.auth-brand .brand-icon {

    width:70px;

    height:70px;

    margin:auto;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:20px;

    background:#1e293b;

    font-size:34px;

    box-shadow:
    0 0 40px rgba(148,163,184,.25);

}



.auth-brand h1 {

    margin-top:18px;

    font-size:34px;

    font-weight:800;

}



.auth-brand p {

    color:#94a3b8;

    font-size:15px;

}



.auth-card {

    background:
    rgba(30,41,59,.85);

    backdrop-filter:blur(15px);

    padding:28px;

    border-radius:24px;

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

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

}



.auth-card .mb-3 {

    margin-bottom:14px !important;

}



.auth-card h2 {

    font-size:26px;

}



.auth-input {

    background:#0f172a !important;

    color:#f8fafc !important;

    caret-color:#ffffff;

    border:1px solid #334155 !important;

}



.auth-input:focus {

    background:#0f172a !important;

    color:#f8fafc !important;

    caret-color:#ffffff;

    border-color:#6366f1 !important;

    box-shadow:
    0 0 0 3px rgba(99,102,241,.15) !important;

}



.auth-input::placeholder {

    color:#64748b;

}



@media(max-height:700px){

    .auth-page {

        overflow-y:auto;

    }

}



/* Chrome autofill fix */

.auth-input:-webkit-autofill,
.auth-input:-webkit-autofill:hover,
.auth-input:-webkit-autofill:focus {

    -webkit-text-fill-color:#f8fafc !important;

    -webkit-box-shadow:
    0 0 0px 1000px #0f172a inset !important;

    transition:
    background-color 9999s ease-in-out 0s;

}



.auth-button {

    width:100%;

    height:54px;

    border:none;

    border-radius:14px;

    background:
    linear-gradient(
        135deg,
        #6366f1,
        #8b5cf6
    );

    color:white;

    font-size:16px;

    font-weight:700;

    letter-spacing:.3px;

    cursor:pointer;

    box-shadow:
    0 10px 25px rgba(99,102,241,.35);

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

}



.auth-button:hover {

    transform:translateY(-2px);

    box-shadow:
    0 15px 35px rgba(139,92,246,.45);

}



.auth-button:active {

    transform:translateY(0);

}



.password-field {

    position:relative;

}


.password-field .auth-input {

    padding-right:50px;

}


.password-toggle {

    position:absolute;

    right:15px;

    top:50%;

    transform:translateY(-50%);

    background:none;

    border:none;

    color:#94a3b8;

    cursor:pointer;

    font-size:18px;

}


.password-toggle:hover {

    color:white;

}

.auth-link {

    color:#94a3b8;

}



.auth-alert {

    padding:14px 16px;

    border-radius:14px;

    margin-bottom:20px;

    font-size:14px;

    display:flex;

    align-items:center;

    gap:10px;

}



.auth-alert.error {

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

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

    color:#fca5a5;

}



.auth-alert.success {

    background:rgba(34,197,94,.12);

    border:1px solid rgba(34,197,94,.35);

    color:#86efac;

}