/* Admin login styles (standalone) */
*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  background:#f4f6fb;
  color:#111827;
}

:root{
  --bg:#f4f6fb;
  --surface:#ffffff;
  --text:#111827;
  --muted:#6b7280;
  --border:#e5e7eb;
  --shadow:0 14px 40px rgba(15,23,42,.12);
  --shadow-2:0 20px 60px rgba(15,23,42,.16);
  --radius:14px;
  --radius-sm:12px;
  --accent-1:#93c5fd;
  --accent-2:#3b82f6;
}

.shell{
  min-height:100%;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  padding:28px 16px;
  gap:18px;
  background:
    radial-gradient(420px 220px at 18% 18%, rgba(59,130,246,.18), transparent 60%),
    radial-gradient(480px 260px at 78% 24%, rgba(147,197,253,.18), transparent 60%),
    linear-gradient(180deg, #fbfdff 0%, var(--bg) 100%);
}

.brandbar{
  width:min(720px, 100%);
  display:flex;
  justify-content:center;
}
.brand{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding:10px 14px;
  color:#0f172a;
  font-weight:900;
  letter-spacing:.6px;
}
.brand .logo{
  width:34px;
  height:34px;
  border-radius:12px;
  background:linear-gradient(135deg,var(--accent-1),var(--accent-2));
  box-shadow:0 12px 24px rgba(59,130,246,.22);
}

.card{
  width:min(720px, 100%);
  background:var(--surface);
  border-radius:var(--radius);
  box-shadow:var(--shadow-2);
  border:1px solid rgba(15,23,42,.10);
  padding:20px 18px;
}

.title{
  font-size:18px;
  font-weight:900;
  margin-bottom:6px;
}
.sub{
  color:var(--muted);
  font-size:13px;
  line-height:1.5;
  margin-bottom:14px;
}

.err{
  margin:10px 0 14px;
  padding:10px 12px;
  border-radius:12px;
  border:1px solid #fecdd3;
  background:#fff1f2;
  color:#9f1239;
  font-size:13px;
  font-weight:800;
}
.warn{
  margin:10px 0 14px;
  padding:10px 12px;
  border-radius:12px;
  border:1px solid #fde68a;
  background:#fffbeb;
  color:#92400e;
  font-size:13px;
  font-weight:800;
}

form{ margin:0; }
.row{
  display:flex;
  flex-direction:column;
  gap:8px;
  margin-bottom:12px;
}
.row label{
  font-size:12px;
  font-weight:900;
  color:#374151;
}

.field{
  display:flex;
  align-items:center;
  gap:10px;
  border:1px solid var(--border);
  border-radius:12px;
  padding:10px 12px;
  background:#fff;
  transition: box-shadow .15s, border-color .15s;
}
.field:focus-within{
  border-color:var(--accent-2);
  box-shadow:0 0 0 4px rgba(59,130,246,.12);
}
.icon{
  width:22px;
  text-align:center;
  font-size:16px;
  opacity:.9;
}
.field input{
  border:0;
  outline:0;
  width:100%;
  font-size:14px;
  color:var(--text);
  background:transparent;
}

.btn{
  width:100%;
  border:0;
  border-radius:12px;
  padding:11px 14px;
  cursor:pointer;
  font-weight:900;
  color:#fff;
  background:linear-gradient(135deg,var(--accent-1),var(--accent-2));
  transition: transform .12s, filter .12s;
}
.btn:hover{ filter:brightness(1.02); transform: translateY(-1px); }
.btn:active{ transform: translateY(0); }

.hint{
  margin-top:12px;
  font-size:12px;
  color:var(--muted);
}

@media (max-width:420px){
  .card{ padding:16px 14px; }
}