body { transition: opacity ease-in 0.2s; } 
body[unresolved] { opacity: 0; display: block; overflow: hidden; position: relative; } 

:root {
    --bg-body: #fdfdfd; --bg-card: #ffffff; --text-main: #1a1a1a; --text-input: #333333;
    --input-bg: #f5f5f5; --border-input: #e0e0e0; --accent: #ff4500;
    --shadow-card: 0 0 25px rgba(255, 69, 0, 0.15); 
    --bg-google: #333333; --text-google: #ffffff; --hover-google: #1a1a1a;
}
body.dark-mode {
    --bg-body: #050505; --bg-card: #0c0c0c; --text-main: #ffffff; --text-input: #ffffff;
    --input-bg: #111111; --border-input: #222222; 
    --shadow-card: 0 0 25px rgba(255, 69, 0, 0.3); 
    --bg-google: #ffffff; --text-google: #000000; --hover-google: #f1f1f1;
}
body { font-family: 'Segoe UI', system-ui, -apple-system, sans-serif; background-color: var(--bg-body); color: var(--text-main); display: flex; justify-content: center; align-items: center; height: 100vh; margin: 0; transition: background-color 0.4s ease, color 0.4s ease; }

.auth-card { background: var(--bg-card); padding: 2.5rem; border-radius: 15px; border: 1px solid var(--accent); width: 340px; text-align: center; box-shadow: var(--shadow-card); transition: transform 0.3s ease; }
.auth-card:hover { transform: translateY(-5px); }

.main-logo { width: 90px; height: 90px; margin-bottom: 20px; border-radius: 50%; border: 2px solid var(--accent); object-fit: cover; cursor: pointer; }
h2 { margin-bottom: 20px; font-weight: 600; letter-spacing: 1px; color: var(--text-main); }

input { width: 100%; padding: 12px; margin: 10px 0; border-radius: 8px; border: 1px solid var(--border-input); background: var(--input-bg); color: var(--text-input); box-sizing: border-box; outline: none; transition: 0.3s; }
input:focus { border-color: var(--accent); box-shadow: 0 0 10px rgba(255, 69, 0, 0.2); }

.btn { width: 100%; padding: 12px; border-radius: 8px; border: none; cursor: pointer; font-weight: bold; margin-top: 10px; transition: 0.3s; font-size: 1rem; text-transform: uppercase; }
.btn-main { background: var(--accent); color: white; }
.btn-main:hover { background: #e63e00; transform: scale(1.02); }

.btn-google { background: var(--bg-google); color: var(--text-google); display: flex; align-items: center; justify-content: center; gap: 12px; margin-top: 15px; border: none; }
.btn-google:hover { background: var(--hover-google); transform: scale(1.02); }
.google-icon { width: 18px; height: 18px; display: block; }

.toggle { color: #888; cursor: pointer; font-size: 0.85rem; display: block; margin-top: 15px; text-decoration: none; transition: 0.3s; }
.toggle:hover { color: var(--accent); text-decoration: underline; }