:root {
    --login-bg: #0f0f0f;
    --login-text: #eeeeee;
    --login-surface: #1a1a1a;
    --login-border: #292929;
    --login-label: #cccccc;
    --login-link: #aaaaaa;
    --login-link-hover: #ffffff;
}

html[data-theme="light"] {
    --login-bg: #f3f6fb;
    --login-text: #18212b;
    --login-surface: #ffffff;
    --login-border: #d6deea;
    --login-label: #4d5a68;
    --login-link: #4f5d6c;
    --login-link-hover: #18212b;
}

body {
    background: var(--login-bg);
    color: var(--login-text);
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: "Inter", sans-serif;
}

.login-card {
    background: var(--login-surface);
    padding: 35px;
    border-radius: 15px;
    width: 100%;
    max-width: 380px;
    border: 1px solid var(--login-border);
    box-shadow: 0 0 20px rgba(0,0,0,0.4);
}

.brand-title {
    font-size: 26px;
    font-weight: 800;
    text-align: center;
}

.form-label {
    color: var(--login-label);
}

.btn-login {
    padding: 10px;
    background: #17b63a !important;
    color: #fff !important;
    font-weight: 600;
    border-radius: 8px;
}

.broker-btn {
    background: #005BEA !important;
    color: #fff !important;
    border-radius: 8px;
    padding: 10px;
}

a {
    color: var(--login-link);
    text-decoration: none;
}
a:hover {
    color: var(--login-link-hover);
}