/* =======================================================
   login.css — Màn hình đăng nhập Admin
   ======================================================= */
#screen-login {
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(ellipse 60% 50% at 50% 0%, rgba(245,158,11,0.04) 0%, transparent 70%),
    var(--bg);
}
#screen-login::before {
  content:'';
  position:absolute; inset:0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.03'/%3E%3C/svg%3E");
  pointer-events:none; z-index:0;
}

.login-card {
  position:relative; z-index:1;
  width:360px;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--r-lg);
  padding:40px 36px 32px;
  animation:fadeUp 0.35s ease both;
}

.login-badge {
  display:inline-flex; align-items:center; gap:6px;
  padding:4px 10px;
  background:var(--red-dim);
  border:1px solid rgba(239,68,68,0.2);
  border-radius:20px;
  font-family:var(--mono);
  font-size:10px;
  letter-spacing:0.1em;
  color:var(--red);
  text-transform:uppercase;
  margin-bottom:20px;
}
.login-badge-dot {
  width:5px; height:5px;
  border-radius:50%;
  background:var(--red);
}

.login-logo {
  display:flex; align-items:center; gap:10px;
  margin-bottom:28px;
}
.login-logo-mark {
  width:36px; height:36px;
  background:var(--accent);
  border-radius:var(--r-sm);
  display:grid; place-items:center;
  flex-shrink:0;
}
.login-logo-mark svg { width:18px; height:18px; }
.login-logo-text {
  font-family:var(--mono);
  font-size:13px; font-weight:600;
  letter-spacing:0.12em;
  text-transform:uppercase;
  color:var(--text);
}
.login-logo-sub {
  font-family:var(--mono);
  font-size:10px; color:var(--text-dim);
  letter-spacing:0.08em; margin-top:1px;
}

.form-field { margin-bottom:14px; }
.form-label {
  display:block;
  font-family:var(--mono);
  font-size:10px; letter-spacing:0.1em;
  text-transform:uppercase;
  color:#555568; margin-bottom:6px;
}
.form-input {
  width:100%;
  background:var(--bg);
  border:1px solid var(--border);
  border-radius:var(--r);
  padding:10px 12px;
  font-family:var(--mono); font-size:13px;
  color:var(--text);
  transition:border-color var(--transition), box-shadow var(--transition);
  outline:none;
}
.form-input:focus {
  border-color:var(--accent);
  box-shadow:0 0 0 3px var(--accent-glow);
}
.form-input::placeholder { color:var(--text-dim); }

.btn-login {
  width:100%; margin-top:22px;
  background:var(--accent); color:#0b0b0f;
  border-radius:var(--r); padding:11px;
  font-family:var(--mono); font-size:12px;
  font-weight:600; letter-spacing:0.1em;
  text-transform:uppercase;
  transition:opacity var(--transition), transform var(--transition);
  display:flex; align-items:center; justify-content:center; gap:8px;
}
.btn-login:hover:not(:disabled) { opacity:0.88; }
.btn-login:active:not(:disabled) { transform:scale(0.98); }
.btn-login:disabled { opacity:0.4; cursor:not-allowed; }
.btn-login .spinner {
  width:14px; height:14px;
  border:2px solid rgba(0,0,0,0.2);
  border-top-color:#0b0b0f;
  border-radius:50%;
  animation:spin 0.7s linear infinite;
  display:none;
}
.btn-login.loading .spinner { display:block; }
.btn-login.loading .btn-text { opacity:0.6; }

.login-error {
  margin-top:12px; padding:10px 12px;
  background:var(--red-dim);
  border:1px solid rgba(239,68,68,0.25);
  border-radius:var(--r-sm);
  font-size:12px; color:var(--red);
  font-family:var(--mono); display:none;
}
.login-error.visible { display:block; }