:root {
  --bg-0: #f4f8ff;
  --bg-1: #edf6f1;
  --ink-0: #10243a;
  --ink-1: #3c5168;
  --surface: rgba(255, 255, 255, 0.82);
  --line: rgba(33, 64, 96, 0.16);
  --brand-a: #0f6e8f;
  --brand-b: #23a08c;
  --accent-gold: #d0a13b;
  --danger: #c0392b;
  --ok: #1c8a52;
}

* {
  box-sizing: border-box;
}

html,
body {
  min-height: 100%;
}

body {
  margin: 0;
  font-family: "Manrope", "Segoe UI", sans-serif;
  color: var(--ink-0);
  background: radial-gradient(1200px 800px at 5% -20%, #cde6ff 0%, transparent 56%),
    radial-gradient(900px 700px at 95% -10%, #d3f3de 0%, transparent 52%),
    linear-gradient(140deg, var(--bg-0) 0%, var(--bg-1) 100%);
}

h1,
h2,
h3,
h4,
.navbar-brand,
.brand-mark {
  font-family: "Space Grotesk", "Trebuchet MS", sans-serif;
}

.bg-orb {
  position: fixed;
  border-radius: 999px;
  filter: blur(48px);
  pointer-events: none;
  opacity: 0.4;
  z-index: 0;
}

.orb-1 {
  width: 260px;
  height: 260px;
  background: #7ac2ff;
  top: 8%;
  left: -80px;
}

.orb-2 {
  width: 280px;
  height: 280px;
  background: #8de0bf;
  top: 58%;
  right: -90px;
}

.orb-3 {
  width: 220px;
  height: 220px;
  background: #f4d08a;
  top: 25%;
  right: 30%;
}

.app-navbar {
  background: linear-gradient(120deg, rgba(9, 30, 52, 0.92) 0%, rgba(8, 74, 92, 0.86) 100%);
  border-bottom: 1px solid rgba(255, 255, 255, 0.14);
  backdrop-filter: blur(6px);
  position: relative;
  z-index: 2;
}

.brand-mark {
  letter-spacing: 0.5px;
  font-weight: 700;
  color: #f7fbff !important;
  text-decoration: none;
}

.navbar-nav .nav-link {
  color: rgba(240, 249, 255, 0.86) !important;
  border-radius: 10px;
  padding: 0.4rem 0.75rem;
  margin-right: 0.25rem;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.navbar-nav .nav-link:hover,
.navbar-nav .nav-link:focus {
  background: rgba(255, 255, 255, 0.15);
  color: #ffffff !important;
}

.btn-logout {
  background: rgba(255, 255, 255, 0.08);
  color: #f2f7fb;
  border: 1px solid rgba(255, 255, 255, 0.3);
}

.btn-logout:hover {
  background: rgba(255, 255, 255, 0.2);
  color: #ffffff;
}

.surface-panel {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 22px;
  box-shadow: 0 18px 44px rgba(22, 52, 70, 0.12);
  padding: 1.5rem;
  position: relative;
  z-index: 1;
}

.hero-band {
  padding: 1rem 1.1rem;
  border-left: 6px solid var(--accent-gold);
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.78), rgba(255, 255, 255, 0.22));
  border-radius: 14px;
}

.eyebrow {
  color: var(--brand-a);
  font-weight: 800;
  text-transform: uppercase;
  font-size: 0.76rem;
  letter-spacing: 0.08em;
}

.stat-card {
  border: 1px solid rgba(18, 66, 88, 0.08);
  border-radius: 16px;
  color: var(--ink-0);
  overflow: hidden;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.stat-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 26px rgba(20, 48, 72, 0.16);
}

.stat-a { background: linear-gradient(135deg, #e7f9ff, #d9f0ff); }
.stat-b { background: linear-gradient(135deg, #e6fff5, #d3f4ec); }
.stat-c { background: linear-gradient(135deg, #fff7e8, #ffeccc); }
.stat-d { background: linear-gradient(135deg, #eef0ff, #e2e9ff); }

.card,
.table,
.form-control,
.form-select,
.btn,
.alert {
  border-radius: 12px;
}

.table {
  border: 1px solid rgba(16, 36, 58, 0.09);
  background: rgba(255, 255, 255, 0.72);
}

.table > :not(caption) > * > * {
  border-bottom-color: rgba(16, 36, 58, 0.08);
}

.table thead th {
  background: rgba(15, 110, 143, 0.08);
  color: #144261;
  font-size: 0.84rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.form-control,
.form-select {
  border: 1px solid rgba(16, 58, 82, 0.22);
  background: rgba(255, 255, 255, 0.88);
}

.form-control:focus,
.form-select:focus {
  border-color: rgba(15, 110, 143, 0.64);
  box-shadow: 0 0 0 0.2rem rgba(15, 110, 143, 0.14);
}

.btn-primary {
  background: linear-gradient(120deg, var(--brand-a), var(--brand-b));
  border-color: transparent;
}

.btn-primary:hover {
  filter: brightness(0.95);
}

.page-enter {
  animation: page-in 0.42s ease-out;
}

@keyframes page-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes rise-in {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Peptide Store additions (not present in the source theme) */

.disclaimer {
  border-left: 6px solid var(--danger);
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.78), rgba(255, 255, 255, 0.22));
  color: #7a2a1c;
  font-size: 0.85rem;
  padding: 0.85rem 1.1rem;
  border-radius: 14px;
  margin-bottom: 1.5rem;
}

.status-pending { color: var(--accent-gold); font-weight: 600; }
.status-paid { color: var(--ok); font-weight: 600; }
.status-expired, .status-cancelled { color: var(--ink-1); font-weight: 600; }
.status-shipped { color: var(--brand-a); font-weight: 600; }

.muted { color: var(--ink-1); }
.error { color: var(--danger); font-size: 0.9rem; }

@media (max-width: 991.98px) {
  .surface-panel { padding: 1rem; }
  .navbar-nav .nav-link { margin-right: 0; margin-bottom: 0.25rem; }
}