/* ========================================
   Умный Дом — Страница входа
   ======================================== */

#login {
    width: 100%; max-width: 420px; padding: 48px 40px; margin: 60px auto;
    background: var(--bg-card); border: 1px solid var(--border-card);
    border-radius: var(--radius-xl); backdrop-filter: blur(16px);
    box-shadow: 0 20px 60px rgba(0,0,0,.4); animation: fadeIn .5s ease;
}

.logo { text-align: center; margin-bottom: 32px; }
.logo span { font-size: 3rem; display: block; margin-bottom: 8px; }
.logo h1 { font-size: 1.6rem; color: var(--text-white); }
.logo p { color: var(--text-muted); font-size: .9rem; margin-top: 4px; }

.form-group { margin-bottom: 20px; }
.form-group label { display: block; margin-bottom: 6px; color: #aaa; font-size: .85rem; }
.form-group input {
    width: 100%; padding: 14px 16px; border-radius: var(--radius-md);
    border: 1px solid rgba(255,255,255,.1); background: rgba(255,255,255,.06);
    color: var(--text-white); font-size: 1rem; outline: none; transition: var(--transition);
}
.form-group input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(108,99,255,.2); }

.login-btn {
    width: 100%; padding: 14px; border-radius: var(--radius-md); border: none;
    background: linear-gradient(135deg, var(--accent), #a855f7);
    color: var(--text-white); font-size: 1rem; font-weight: 600; cursor: pointer;
    transition: var(--transition); margin-top: 8px;
}
.login-btn:hover { transform: translateY(-2px); box-shadow: 0 8px 25px rgba(108,99,255,.4); }
.login-btn:active { transform: translateY(0); }

.error-msg { color: var(--red-light); font-size: .85rem; text-align: center; margin-top: 12px; min-height: 20px; }

/* Mobile */
@media (max-width: 480px) {
    #login { width: calc(100% - 32px); padding: 32px 24px; margin: 30px auto; }
    .logo span { font-size: 2.5rem; }
    .logo h1 { font-size: 1.3rem; }
    .form-group input { font-size: .95rem; padding: 12px 14px; }
}

@media (max-width: 768px) and (min-width: 481px) {
    #login { margin: 40px auto; }
}