h1, h2, h3, h4 { font-family: 'Space Grotesk', sans-serif; }

.card { background: #fff; border: 1px solid #E2E5EA; border-radius: 10px; }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  border-radius: .5rem; padding: .5rem 1rem; font-size: .875rem; font-weight: 500;
  transition: background-color .15s; cursor: pointer; border: 1px solid transparent; }
.btn-primary { background: #1F4E5F; color: #fff; }
.btn-primary:hover { background: #153842; }
.btn-secondary { background: #fff; border-color: #E2E5EA; color: #14181F; }
.btn-secondary:hover { background: #F5F6F8; }
.btn-danger { background: #C1443B; color: #fff; }
.btn-danger:hover { opacity: .9; }

.input, select.input { width: 100%; border-radius: .5rem; border: 1px solid #E2E5EA;
  background: #fff; padding: .5rem .75rem; font-size: .875rem; color: #14181F; }
.input:focus { outline: 2px solid #1F4E5F; outline-offset: 1px; border-color: #1F4E5F; }

.label { display: block; font-size: .75rem; font-weight: 600; text-transform: uppercase;
  letter-spacing: .05em; color: #6B7280; margin-bottom: .25rem; }

.badge { display: inline-flex; align-items: center; gap: .25rem; border-radius: 9999px;
  padding: .125rem .625rem; font-size: .75rem; font-weight: 500; }
.badge-active { background: rgba(47,143,91,.1); color: #2F8F5B; }
.badge-trial { background: rgba(217,138,61,.15); color: #D98A3D; }
.badge-suspended { background: rgba(193,68,59,.1); color: #C1443B; }

/* Signature element: a rocker switch for module toggles, styled like a
   physical control-panel switch — literal to "flipping on a manufacturer's
   department". Pure CSS, auto-submits its form on change (see assets/js/app.js). */
.rocker { position: relative; display: inline-flex; align-items: center; width: 48px;
  height: 28px; border-radius: 9999px; border: 1px solid #E2E5EA; background: #E7E9ED;
  cursor: pointer; transition: background-color .2s, border-color .2s; flex-shrink: 0; }
.rocker.on { background: #1F4E5F; border-color: #1F4E5F; }
.rocker .knob { position: absolute; left: 3px; top: 3px; width: 20px; height: 20px;
  border-radius: 9999px; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.2);
  transition: transform .2s; }
.rocker.on .knob { transform: translateX(20px); }
.rocker input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }

.toast { position: fixed; top: 1rem; right: 1rem; z-index: 50; background: #14181F;
  color: #fff; padding: .75rem 1rem; border-radius: .5rem; font-size: .875rem; box-shadow: 0 4px 12px rgba(0,0,0,.15); }