:root {
  --navy: #0b1f33;
  --navy-2: #123047;
  --accent: #2bbbad;
  --sand: #f3efe7;
  --ink: #1a1f24;
}

body {
  background:
    radial-gradient(1200px 500px at 10% -10%, rgba(43,187,173,.18), transparent 60%),
    linear-gradient(180deg, #f7f4ee 0%, #ebe6dc 100%);
  color: var(--ink);
  min-height: 100vh;
  font-family: "Segoe UI", "Trebuchet MS", sans-serif;
}

.bg-navy { background: var(--navy) !important; }
.text-accent { color: var(--accent) !important; }
.border-accent { border-color: rgba(43,187,173,.35) !important; }

.card-soft {
  background: rgba(255,255,255,.86);
  border: 1px solid rgba(11,31,51,.08);
  border-radius: 14px;
  box-shadow: 0 10px 30px rgba(11,31,51,.06);
}

.stat-card h3 { font-size: 1.75rem; margin: 0; }
.stat-card .label { color: #5b6670; font-size: .85rem; }

.login-wrap {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 1.5rem;
  background:
    linear-gradient(145deg, rgba(11,31,51,.92), rgba(18,48,71,.85)),
    url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%232bbbad' fill-opacity='0.12'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}

.login-card {
  width: 100%;
  max-width: 420px;
  background: #fff;
  border-radius: 16px;
  padding: 2rem;
  box-shadow: 0 20px 60px rgba(0,0,0,.25);
}

.badge-status { text-transform: uppercase; font-size: .7rem; letter-spacing: .04em; }

.table thead th { font-size: .8rem; text-transform: uppercase; color: #5b6670; }

.btn-accent {
  background: var(--accent);
  border-color: var(--accent);
  color: #062328;
  font-weight: 600;
}
.btn-accent:hover { background: #24a599; border-color: #24a599; color: #062328; }