:root, [data-theme="dark"] {
    --bg-page: #2d3436;
    --bg-card: #3d4345;
    --bg-input: #474e50;
    --border: #4a5253;
    --border-input: #576061;
    --text-primary: #e8e8e8;
}
[data-theme="light"] {
    --bg-page: #f8fafc;
    --bg-card: #ffffff;
    --bg-input: #f1f5f9;
    --border: #e2e8f0;
    --border-input: #cbd5e1;
    --text-primary: #0f172a;
}
img {max-width: 100%;}
body { background: var(--bg-page); color: var(--text-primary); min-height: 100vh; display: flex; align-items: center; justify-content: center; position: relative; }
.auth-card { max-width: 420px; width: 100%; background: var(--bg-card); border: 1px solid var(--border); border-radius: 16px; padding: 2.5rem; }
.logo { font-size: 2rem; font-weight: 800; background: linear-gradient(135deg, #e17055, #fab1a0); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
.form-control { background: var(--bg-input); border-color: var(--border-input); color: var(--text-primary); font-size: 15px; }
.form-control:focus { background: var(--bg-input); border-color: #e17055; color: var(--text-primary); box-shadow: 0 0 0 .2rem rgba(225,112,85,.25); }
.btn-primary { background: #e17055; border-color: #e17055; }
.btn-primary:hover { background: #c9604a; }
a { color: #e17055; }
.theme-toggle { position: absolute; top: 20px; right: 20px; background: var(--bg-card); border: 1px solid var(--border); border-radius: 8px; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; cursor: pointer; color: var(--text-primary); }
.theme-toggle:hover { opacity: 0.8; }
.brand-logo { text-align: center; margin-bottom: 1rem; }
.brand-logo img { max-width: 160px; height: auto; }
.brand-logo img {
    display: none;
}
html[data-theme="dark"] .brand-logo .white-logo {
    display: inline-block;
}
html[data-theme="light"] .brand-logo .black-logo {
    display: inline-block;
}
.form-label {font-size: 14px;}