:root{
  --primary: #004aad;
  --primary-2: #3a96f4;
  --accent: #71cffe;
  --deep: #020c4a;
  --vivid: #12097e;
  --font-light: #dfebff;
  --muted: #f5f7fa;
  --card-bg: #ffffff;
}

/* Global base */
html,body{height:100%}
body{
  background: linear-gradient(180deg,var(--muted) 0%, #ffffff 60%);
  color: #0f172a;
  font-family: "Poppins", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  position:relative;
  min-height:100vh;
  overflow-x:hidden;
}

/* Decorative blurred shapes (multiple "background images" as requested) */
body::before,
body::after{
  content:"";
  position:fixed;
  z-index:0;
  pointer-events:none;
  filter: blur(40px) saturate(120%);
  opacity:0.28;
}
body::before{
  width:520px;height:520px;
  left:-120px;top:-80px;
  background: radial-gradient(circle at 30% 30%, var(--primary-2), transparent 40%),
              radial-gradient(circle at 70% 70%, var(--accent), transparent 40%);
}
body::after{
  width:420px;height:420px;
  right:-80px;bottom:-60px;
  background: radial-gradient(circle at 40% 40%, var(--vivid), transparent 40%),
              radial-gradient(circle at 80% 20%, var(--primary), transparent 50%);
}

/* Card / main surfaces should be above decorations */
.main, .card, .form-container, .table-section, .settings-container {
  position: relative;
  z-index: 1;
}

/* Sidebar theme override */
.sidebar{
  background: linear-gradient(180deg, var(--deep), var(--primary));
  color: var(--font-light);
  box-shadow: 0 6px 24px rgba(2,12,74,0.08);
}

/* Sidebar heading + logo */
.sidebar h2{ color: var(--font-light); font-weight:700; margin-bottom:10px }
.sidebar-logo{
  display:block;
  max-width:140px;
  margin: 6px auto 14px auto;
  border-radius:8px;
  background: rgba(255,255,255,0.04);
  padding:6px;
  box-shadow: 0 4px 18px rgba(2,12,74,0.12);
}

/* Nav links */
.nav-links a{ color:var(--font-light); }
.nav-links a.active, .nav-links a:hover{ background: rgba(255,255,255,0.06); color:var(--font-light); }

/* Buttons */
button, .btn, .btn-save, .btn-add {
  background: var(--primary);
  color: var(--font-light);
  border-radius: 8px;
  border: none;
  padding: 8px 12px;
  cursor: pointer;
}
button:hover, .btn:hover { opacity:0.95; transform:translateY(-1px); }

/* Accent variants */
.btn-add{ background: var(--accent); color: var(--deep) }
.delete{ background: #dc2626 !important; }

/* Pills / tags */
.tag, .opt-badge { background: rgba(113,207,254,0.14); color: var(--deep); }

/* Make sure tables and cards have soft borders */
table, .card, .form-container, .table-section, .settings-container {
  border-radius: 12px;
  background: var(--card-bg);
}

/* Small view adjustments for logo fallback */
.sidebar-logo:empty{ display:none }

/* Utility: subtle text color */
.small { color: #475569 }

/* Ensure this stylesheet doesn't override page-critical inline styling */