:root {

    --color-primary: #373F51;

    --color-primary-dark: #2d3442;

    --color-primary-darker: #242a36;

    --color-primary-light: #4a5568;

    --color-primary-lighter: #5c687d;

    --color-border: #4a5568;

    --color-text: #e8ecf2;

    --color-text-muted: #9aa3b5;

}



* {

    margin: 0;

    padding: 0;

    box-sizing: border-box;

}



html,
body,
button,
input,
textarea,
select,
optgroup,
p,
a,
span,
label,
li,
td,
th,
small,
strong,
div {
    font-family: 'Padauk', 'Noto Sans Myanmar', sans-serif;
}

body {

    background:
        radial-gradient(circle at top left, rgba(126, 232, 154, 0.18), transparent 34%),
        radial-gradient(circle at 90% 12%, rgba(92, 104, 125, 0.28), transparent 30%),
        linear-gradient(145deg, #181d28 0%, #252c3b 48%, #373F51 100%);

    min-height: 100vh;

    display: flex;

    align-items: center;

    justify-content: center;

    color: var(--color-text);

}

h1,
h2,
h3,
h4,
h5,
h6,
.toolbox-brand,
.logo h1,
.admin-topbar-title,
.admin-drawer-brand span {
    font-family: 'Fjalla One', 'Noto Sans Myanmar', sans-serif;
}



.auth-container {

    width: 100%;

    max-width: 420px;

    padding: 20px;

}



.auth-card {

    background: rgba(45, 52, 66, 0.76);

    border: 1px solid rgba(255, 255, 255, 0.08);

    border-radius: 24px;

    padding: 40px 36px;

    box-shadow: 0 24px 70px rgba(0, 0, 0, 0.35);

    backdrop-filter: blur(16px);

}



.logo {

    text-align: center;

    margin-bottom: 32px;

}



.logo h1 {

    font-size: 28px;

    font-weight: 700;

    color: #ffffff;

    letter-spacing: 2px;

}



.logo h1 span {

    color: #7ee89a;

}



.logo p {

    color: var(--color-text-muted);

    font-size: 14px;

    margin-top: 6px;

}



.form-group {

    margin-bottom: 20px;

}



.form-group label {

    display: block;

    margin-bottom: 8px;

    font-size: 14px;

    color: var(--color-text-muted);

    font-weight: 500;

}



.form-group input {

    width: 100%;

    padding: 14px 16px;

    background: rgba(24, 29, 40, 0.72);

    border: 1px solid rgba(255, 255, 255, 0.1);

    border-radius: 14px;

    color: var(--color-text);

    font-size: 15px;

    transition: border-color 0.2s, box-shadow 0.2s;

}



.form-group input:focus {

    outline: none;

    border-color: rgba(126, 232, 154, 0.55);

    box-shadow: 0 0 0 3px rgba(126, 232, 154, 0.12);

}



.form-group input::placeholder {

    color: #6b7589;

}



.btn-primary {

    width: 100%;

    padding: 14px;

    background: linear-gradient(135deg, #7ee89a, #58c978);

    border: 0;

    border-radius: 14px;

    color: #18202b;

    font-size: 16px;

    font-weight: 600;

    cursor: pointer;

    transition: background 0.2s, border-color 0.2s, transform 0.1s;

    margin-top: 8px;

}



.btn-primary:hover {

    filter: brightness(1.04);

    box-shadow: 0 14px 30px rgba(88, 201, 120, 0.22);

}



.btn-primary:active {

    transform: scale(0.98);

}



.auth-footer {

    text-align: center;

    margin-top: 24px;

    font-size: 14px;

    color: var(--color-text-muted);

}



.auth-footer a {

    color: #c5ccd8;

    text-decoration: none;

    font-weight: 600;

    transition: color 0.2s;

}



.auth-footer a:hover {

    color: #ffffff;

}

.logo h1 span {
    color: #7ee89a;
}



.alert {

    padding: 12px 16px;

    border-radius: 10px;

    margin-bottom: 20px;

    font-size: 14px;

}



.alert-error {

    background: rgba(180, 40, 40, 0.15);

    border: 1px solid rgba(180, 40, 40, 0.4);

    color: #ff8a8a;

}

.alert-info {

    background: rgba(55, 63, 81, 0.2);

    border: 1px solid rgba(55, 63, 81, 0.5);

    color: #c8d0e0;

}



.alert-success {

    background: rgba(40, 140, 60, 0.15);

    border: 1px solid rgba(40, 140, 60, 0.4);

    color: #7ee89a;

}



.welcome-card {

    text-align: center;

}



.welcome-card h2 {

    color: #fff;

    margin-bottom: 12px;

}



.welcome-card p {

    color: var(--color-text-muted);

    margin-bottom: 24px;

}



.balance-box {

    background: var(--color-primary-dark);

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

    border-radius: 12px;

    padding: 16px 20px;

    margin-bottom: 20px;

}



.balance-label {

    display: block;

    font-size: 13px;

    color: var(--color-text-muted);

    margin-bottom: 6px;

}



.balance-amount {

    display: block;

    font-size: 24px;

    font-weight: 700;

    color: #ffffff;

}



.btn-logout {

    display: inline-block;

    padding: 12px 28px;

    background: var(--color-primary-light);

    border: 1px solid var(--color-primary-lighter);

    border-radius: 10px;

    color: #fff;

    text-decoration: none;

    font-weight: 600;

    transition: background 0.2s;

}



.btn-logout:hover {

    background: var(--color-primary-lighter);

}



html {
    width: 100%;
}

body:not(.app-body) {
    width: 100%;
}

@media (min-width: 768px) {
    body:not(.app-body) .auth-container {
        max-width: 480px;
        padding: 32px;
    }

    body:not(.app-body) .auth-card {
        padding: 48px 40px;
    }

    body:not(.app-body) .logo h1 {
        font-size: 32px;
    }
}

/* Final auth polish */
body:not(.app-body) {
    background:
        radial-gradient(circle at 18% -5%, rgba(56, 189, 248, 0.18), transparent 34%),
        radial-gradient(circle at 92% 8%, rgba(53, 224, 125, 0.15), transparent 28%),
        linear-gradient(180deg, #0a1020 0%, #101827 44%, #172033 100%);
}

.auth-card {
    border-radius: 26px;
    background: linear-gradient(180deg, rgba(21, 32, 51, 0.96), rgba(16, 24, 39, 0.96));
    border: 1px solid rgba(255, 255, 255, 0.10);
    box-shadow: 0 26px 80px rgba(0, 0, 0, 0.40);
}

.logo h1 {
    letter-spacing: 1.4px;
}

.logo h1 span {
    color: #35e07d;
}

.logo p {
    color: #9aa8bd;
}

.form-group input {
    background: #0b1220;
    border-color: rgba(255, 255, 255, 0.10);
    border-radius: 15px;
}

.form-group input:focus {
    border-color: rgba(53, 224, 125, 0.55);
    box-shadow: 0 0 0 3px rgba(53, 224, 125, 0.12);
}

.btn-primary {
    border-radius: 16px;
    background: linear-gradient(135deg, #35e07d, #38bdf8);
    color: #08111f;
}

.auth-footer a {
    color: #35e07d;
}

/* Arcade auth redesign layer */
body:not(.app-body) {
    background:
        radial-gradient(circle at 14% 4%, rgba(168, 85, 247, 0.26), transparent 28%),
        radial-gradient(circle at 88% 2%, rgba(34, 211, 238, 0.22), transparent 30%),
        linear-gradient(180deg, #070b16 0%, #0b1020 45%, #101827 100%);
}

.auth-card {
    background:
        radial-gradient(circle at top right, rgba(168, 85, 247, 0.12), transparent 34%),
        linear-gradient(180deg, rgba(23, 32, 51, 0.98), rgba(9, 14, 28, 0.98));
    border: 1px solid rgba(148, 163, 184, 0.18);
    box-shadow: 0 24px 80px rgba(0, 0, 0, 0.46);
}

.logo h1 span {
    color: #22d3ee;
}

.form-group input {
    background: #020617;
    border: 1px solid rgba(148, 163, 184, 0.18);
}

.form-group input:focus {
    border-color: rgba(34, 211, 238, 0.55);
    box-shadow: 0 0 0 3px rgba(34, 211, 238, 0.12);
}

.btn-primary {
    background: linear-gradient(135deg, #22d3ee, #a855f7);
    color: #ffffff;
    box-shadow: 0 14px 32px rgba(168, 85, 247, 0.22);
}

.auth-footer a {
    color: #22d3ee;
}

/* Final auth polish */
body:not(.app-body) {
    background:
        radial-gradient(circle at 10% 0%, rgba(34, 211, 238, 0.24), transparent 30%),
        radial-gradient(circle at 92% 8%, rgba(168, 85, 247, 0.26), transparent 32%),
        radial-gradient(circle at 50% 110%, rgba(52, 211, 153, 0.10), transparent 28%),
        linear-gradient(180deg, #050816 0%, #0b1020 48%, #111827 100%);
}

body:not(.app-body)::before {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    background-image:
        linear-gradient(rgba(148, 163, 184, 0.035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(148, 163, 184, 0.035) 1px, transparent 1px);
    background-size: 34px 34px;
    mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.44), transparent 74%);
}

.auth-container {
    position: relative;
    z-index: 1;
}

.auth-card {
    border-radius: 30px;
    background:
        linear-gradient(145deg, rgba(34, 211, 238, 0.08), transparent 28%),
        linear-gradient(180deg, rgba(17, 25, 45, 0.94), rgba(7, 11, 22, 0.94));
    border: 1px solid rgba(125, 211, 252, 0.18);
    box-shadow:
        0 28px 80px rgba(0, 0, 0, 0.48),
        inset 0 1px 0 rgba(255, 255, 255, 0.04);
    backdrop-filter: blur(18px);
}

.logo h1 {
    color: #ffffff;
    text-shadow: 0 0 22px rgba(34, 211, 238, 0.18);
}

.logo h1 span {
    color: #22d3ee;
}

.logo p,
.form-group label,
.auth-footer {
    color: #9fb0c8;
}

.form-group input {
    background: rgba(2, 6, 23, 0.78);
    border: 1px solid rgba(125, 211, 252, 0.18);
    border-radius: 18px;
    color: #f8fafc;
}

.form-group input:focus {
    border-color: rgba(34, 211, 238, 0.58);
    box-shadow: 0 0 0 4px rgba(34, 211, 238, 0.12);
}

.btn-primary {
    border-radius: 18px;
    background: linear-gradient(135deg, #22d3ee, #a855f7);
    color: #ffffff;
    font-weight: 900;
    box-shadow: 0 18px 38px rgba(168, 85, 247, 0.24);
}

.btn-primary:hover {
    filter: brightness(1.06);
    box-shadow: 0 22px 46px rgba(34, 211, 238, 0.18);
}

.auth-footer a {
    color: #22d3ee;
}

.alert {
    border-radius: 18px;
    backdrop-filter: blur(10px);
}

.alert-error {
    background: rgba(239, 68, 68, 0.12);
    border-color: rgba(248, 113, 113, 0.34);
}

.alert-success {
    background: rgba(16, 185, 129, 0.12);
    border-color: rgba(52, 211, 153, 0.34);
}

@media (max-width: 420px) {
    .auth-container {
        padding: 14px;
    }

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

/* Simple clean auth style */
body:not(.app-body) {
    background: linear-gradient(180deg, #101522 0%, #151c2c 100%);
}

body:not(.app-body)::before {
    background: none;
}

.auth-card {
    background: #182033;
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: 22px;
    box-shadow: 0 14px 34px rgba(0, 0, 0, 0.24);
    backdrop-filter: none;
}

.logo h1 {
    text-shadow: none;
}

.logo h1 span,
.auth-footer a {
    color: #5bc0de;
}

.logo p,
.form-group label,
.auth-footer {
    color: #a7b0c0;
}

.form-group input {
    background: #101522;
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: 14px;
    color: #f4f7fb;
}

.form-group input:focus {
    border-color: rgba(91, 192, 222, 0.60);
    box-shadow: 0 0 0 3px rgba(91, 192, 222, 0.12);
}

.btn-primary {
    background: #3b9fbd;
    color: #ffffff;
    border-radius: 14px;
    font-weight: 800;
    box-shadow: none;
}

.btn-primary:hover {
    background: #5bc0de;
    filter: none;
    box-shadow: none;
}

.alert {
    border-radius: 14px;
    backdrop-filter: none;
}

/* Minimal final auth style */
body:not(.app-body) {
    background: #111827;
}

body:not(.app-body)::before {
    display: none;
}

.auth-card {
    background: #1f2937;
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: 18px;
    box-shadow: none;
    backdrop-filter: none;
}

.logo h1 {
    text-shadow: none;
}

.logo h1 span,
.auth-footer a {
    color: #4aa3c7;
}

.logo p,
.form-group label,
.auth-footer {
    color: #b6c0cf;
}

.form-group input {
    background: #111827;
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: 12px;
    color: #f9fafb;
}

.form-group input:focus {
    border-color: rgba(74, 163, 199, 0.65);
    box-shadow: 0 0 0 3px rgba(74, 163, 199, 0.12);
}

.btn-primary {
    background: #4aa3c7;
    border-radius: 12px;
    color: #ffffff;
    box-shadow: none;
}

.btn-primary:hover {
    background: #60b3d4;
    filter: none;
    box-shadow: none;
}

.alert {
    border-radius: 12px;
    backdrop-filter: none;
}

/* Bright clean auth colors */
body:not(.app-body) {
    background:
        radial-gradient(circle at top left, rgba(56, 189, 248, 0.18), transparent 34%),
        radial-gradient(circle at top right, rgba(167, 139, 250, 0.16), transparent 30%),
        linear-gradient(180deg, #0f172a 0%, #111827 100%);
}

.auth-card {
    background: linear-gradient(180deg, rgba(30, 41, 59, 0.98), rgba(22, 31, 48, 0.98));
    border-color: rgba(125, 211, 252, 0.22);
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.18);
}

.logo h1 span,
.auth-footer a {
    color: #38bdf8;
}

.form-group input {
    background: #0f172a;
    border-color: rgba(125, 211, 252, 0.18);
}

.form-group input:focus {
    border-color: rgba(56, 189, 248, 0.70);
    box-shadow: 0 0 0 3px rgba(56, 189, 248, 0.14);
}

.btn-primary {
    background: linear-gradient(135deg, #38bdf8, #a78bfa);
}

.btn-primary:hover {
    background: linear-gradient(135deg, #60a5fa, #c084fc);
}