/* Login-specific — charge common.css avant */

.login-container {
  background: var(--surface);
  border: 1px solid var(--border);
  border-top: 2px solid var(--blue);
  border-radius: var(--r-lg);
  padding: 36px; width: 100%; max-width: 380px;
}

.login-container.domotic { border-top-color: var(--green); }

.login-wordmark {
  font-family: 'JetBrains Mono', monospace;
  font-size: 1rem; font-weight: 500; color: var(--text);
  letter-spacing: .08em; text-transform: uppercase;
  margin-bottom: 24px; padding-bottom: 16px;
  border-bottom: 1px solid var(--border);
}

label {
  display: block;
  font-family: 'JetBrains Mono', monospace; font-size: .62rem;
  text-transform: uppercase; letter-spacing: .1em; color: var(--text-muted);
  margin-bottom: 6px;
}

input[type="text"], input[type="password"] {
  display: block; width: 100%; padding: 10px 12px;
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: var(--r-sm);
  font-family: 'JetBrains Mono', monospace; font-size: .85rem; color: var(--text);
  margin-bottom: 16px; outline: none; transition: border-color .15s, box-shadow .15s;
}
input[type="text"]:focus, input[type="password"]:focus {
  border-color: var(--blue); box-shadow: 0 0 0 3px rgba(88,166,255,.15);
}

input[type="submit"] {
  display: block; width: 100%; padding: 11px;
  background: var(--blue); color: #0d1117; border: none;
  border-radius: var(--r-sm);
  font-family: 'JetBrains Mono', monospace; font-size: .72rem;
  letter-spacing: .08em; text-transform: uppercase; font-weight: 500;
  cursor: pointer; transition: opacity .15s; margin-top: 4px;
}
input[type="submit"]:hover  { opacity: .88; }
input[type="submit"]:active { opacity: .75; }

.error-message {
  font-family: 'JetBrains Mono', monospace; font-size: .72rem;
  color: var(--red); background: rgba(248,81,73,.08);
  border: 1px solid rgba(248,81,73,.25); border-radius: var(--r-sm);
  padding: 8px 12px; margin-bottom: 16px;
}

@media (max-width: 480px) {
  body { padding: 0; align-items: flex-start; }
  .login-container { max-width: 100%; border-radius: 0; border-left: none; border-right: none; padding: 28px 16px; }
}