:root {
  --cs-primary: #176b63;
  --cs-primary-dark: #0f4f49;
  --cs-surface: #ffffff;
  --cs-background: #eef5f3;
}

body { background: var(--cs-background); }
.cs-brand-mark, .cs-login-brand {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--cs-primary);
  color: #fff;
  border-radius: .65rem;
  font-weight: 700;
}
.cs-brand-mark { width: 2.25rem; height: 2.25rem; }
.cs-login-body {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 1.5rem;
  background: linear-gradient(135deg, #e5f2ef, #f7fbfa);
}
.cs-login-card {
  width: min(100%, 430px);
  padding: 2.25rem;
  border-radius: 1rem;
  background: var(--cs-surface);
  box-shadow: 0 1rem 3rem rgba(15, 79, 73, .14);
}
.cs-login-brand { width: 3.5rem; height: 3.5rem; margin-bottom: 1rem; font-size: 1.2rem; }
.cs-login-card h1 { font-size: 1.65rem; }
.btn-primary { background-color: var(--cs-primary); border-color: var(--cs-primary); }
.btn-primary:hover { background-color: var(--cs-primary-dark); border-color: var(--cs-primary-dark); }
.cs-admin-navbar { background: var(--cs-primary-dark); }
.cs-admin-auth-card {
  width: min(100%, 480px);
  margin: 7vh auto 0;
  padding: 2rem;
  border-radius: 1rem;
  background: #fff;
  box-shadow: 0 1rem 3rem rgba(15, 79, 73, .12);
}