.login-container{display:grid; place-items:center; min-height:100dvh; padding:24px; background: var(--bg)}
.login-card{width:min(420px, 100%); padding:32px; border-radius: var(--radius-lg); border:1px solid var(--border); background: var(--card); box-shadow: var(--shadow-strong); text-align:center; animation: fadeIn .4s ease}
@keyframes fadeIn{from{opacity:0; transform:translateY(10px)} to{opacity:1; transform:translateY(0)}}
.logo{width:80px; height:auto; margin-bottom:10px}
h1{font-size:22px; font-weight:700; margin-bottom:6px}
h2{font-size:14px; color:var(--primary); font-weight:600; margin-bottom:24px; letter-spacing:.3px}
.form-group{margin:16px 0; text-align:left}
label{display:block; font-size:14px; font-weight:600; color:var(--muted); margin-bottom:6px}
input{width:100%; padding:12px 14px; border-radius:var(--radius); border:1px solid var(--border); background:var(--card); color:var(--text); transition: border-color .2s, box-shadow .2s}
input::placeholder{color:var(--muted); opacity:.8}
input:focus{border-color:var(--primary); box-shadow:0 0 0 3px rgba(30,136,229,.2); outline:none}
.btn-primary{width:100%; padding:14px; margin-top:10px; border:none; border-radius:var(--radius); background:var(--primary); color:#fff; font-size:16px; font-weight:700; cursor:pointer; transition: background-color .2s, transform .1s}
.btn-primary:hover{background:var(--primary-2); transform: translateY(-1px)}
.hint{margin-top:16px; font-size:13px; color:var(--muted)}
.hint code{background: rgba(0,0,0,.08); padding:2px 6px; border-radius:6px; font-size:12px}
.theme-toggle.fixed{position:fixed; top:16px; right:16px}
#themeButton{border:1px solid var(--border); background:var(--card); border-radius:12px; padding:8px 12px; cursor:pointer; box-shadow: var(--shadow)}