:root {
  --clay-bg: #f4f1fa;
  --clay-surface: rgba(255, 255, 255, 0.78);
  --clay-surface-strong: rgba(255, 255, 255, 0.92);
  --clay-text: #332f3a;
  --clay-muted: #635f69;
  --clay-accent: #c8102e;
  --clay-accent-dark: #9d0f25;
  --clay-accent-soft: #ef476f;
  --clay-accent-punch: #db2777;
  --clay-blue: #0ea5e9;
  --clay-green: #10b981;
  --clay-amber: #f59e0b;
  --clay-ring: rgba(200, 16, 46, 0.22);
  --clay-shadow-deep:
    30px 30px 60px #cdc6d9,
    -30px -30px 60px #ffffff,
    inset 10px 10px 20px rgba(200, 16, 46, 0.05),
    inset -10px -10px 20px rgba(255, 255, 255, 0.8);
  --clay-shadow-card:
    16px 16px 32px rgba(160, 150, 180, 0.2),
    -10px -10px 24px rgba(255, 255, 255, 0.9),
    inset 6px 6px 12px rgba(200, 16, 46, 0.03),
    inset -6px -6px 12px rgba(255, 255, 255, 1);
  --clay-shadow-card-hover:
    22px 22px 44px rgba(160, 150, 180, 0.24),
    -14px -14px 28px rgba(255, 255, 255, 0.98),
    inset 6px 6px 12px rgba(200, 16, 46, 0.04),
    inset -6px -6px 12px rgba(255, 255, 255, 1);
  --clay-shadow-button:
    12px 12px 24px rgba(200, 16, 46, 0.28),
    -8px -8px 16px rgba(255, 255, 255, 0.5),
    inset 4px 4px 8px rgba(255, 255, 255, 0.35),
    inset -4px -4px 8px rgba(0, 0, 0, 0.1);
  --clay-shadow-button-hover:
    15px 15px 28px rgba(200, 16, 46, 0.32),
    -10px -10px 18px rgba(255, 255, 255, 0.55),
    inset 4px 4px 8px rgba(255, 255, 255, 0.35),
    inset -4px -4px 8px rgba(0, 0, 0, 0.12);
  --clay-shadow-pressed:
    inset 10px 10px 20px #d9d4e3,
    inset -10px -10px 20px #ffffff;
}

* {
  box-sizing: border-box;
}

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

body {
  position: relative;
  overflow-x: hidden;
  font-family: "DM Sans", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
  color: var(--clay-text) !important;
  background:
    radial-gradient(circle at 15% 15%, rgba(200, 16, 46, 0.11), transparent 28%),
    radial-gradient(circle at 85% 25%, rgba(239, 71, 111, 0.12), transparent 30%),
    radial-gradient(circle at 50% 85%, rgba(158, 52, 94, 0.08), transparent 32%),
    var(--clay-bg) !important;
}

body::before,
body::after {
  content: "";
  position: fixed;
  z-index: -1;
  width: 52vh;
  height: 52vh;
  border-radius: 999px;
  filter: blur(64px);
  opacity: 0.55;
  pointer-events: none;
}

body::before {
  top: -12vh;
  left: -10vh;
  background: radial-gradient(circle, rgba(200, 16, 46, 0.28), rgba(200, 16, 46, 0.02) 72%);
  animation: clay-float 10s ease-in-out infinite;
}

body::after {
  right: -10vh;
  top: 18vh;
  background: radial-gradient(circle, rgba(219, 39, 119, 0.24), rgba(219, 39, 119, 0.02) 72%);
  animation: clay-float-delayed 12s ease-in-out infinite;
}

h1, h2, h3, h4, h5, h6,
.section-title, .modal-title, .title,
.hero h1, .hero h2 {
  font-family: "Nunito", "Poppins", sans-serif !important;
  letter-spacing: -0.02em;
}

h1, .hero h1 {
  font-weight: 900 !important;
}

h2, h3, .section-title, .modal-title {
  font-weight: 800 !important;
}

p, li, .session-meta, .group-meta, .desc, .item-creator, .item-date {
  color: var(--clay-muted) !important;
}

a {
  color: var(--clay-accent);
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}

.header {
  border-radius: 40px !important;
  background: rgba(255, 255, 255, 0.74) !important;
  box-shadow: var(--clay-shadow-deep) !important;
  backdrop-filter: blur(14px);
  border: 1px solid rgba(200, 16, 46, 0.09) !important;
}

.hero {
  border-radius: 56px !important;
  padding-top: 88px !important;
  padding-bottom: 72px !important;
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.76), rgba(255, 255, 255, 0.6)) !important;
  box-shadow: var(--clay-shadow-deep) !important;
}

.features,
.stats,
.cta {
  background: transparent !important;
}

.content-section,
.container > .content-section,
.modal-content,
.table-container,
.session-item,
.group-item,
.class-item,
.feature-card,
.stat-card,
.card,
.container {
  border-radius: 32px !important;
  border: 1px solid rgba(200, 16, 46, 0.1) !important;
  background: var(--clay-surface) !important;
  backdrop-filter: blur(14px);
  box-shadow: var(--clay-shadow-card) !important;
}

.content-section:hover,
.session-item:hover,
.group-item:hover,
.class-item:hover,
.feature-card:hover,
.card:hover {
  transform: translateY(-8px);
  box-shadow: var(--clay-shadow-card-hover) !important;
}

.modal-content {
  border-radius: 40px !important;
}

.modal-header {
  border-radius: 28px !important;
}

.btn,
button.btn,
button[type="submit"],
button[type="button"] {
  border: 0 !important;
  border-radius: 20px !important;
  min-height: 44px;
  font-weight: 800 !important;
  letter-spacing: 0.01em;
  transition: all 220ms ease !important;
  box-shadow: var(--clay-shadow-button) !important;
}

.btn-primary,
button.btn-primary,
button[type="submit"] {
  color: #fff !important;
  background: linear-gradient(135deg, #ef476f 0%, var(--clay-accent) 70%) !important;
}

.btn-secondary,
button.btn-secondary {
  color: var(--clay-text) !important;
  background: var(--clay-surface-strong) !important;
}

.btn:hover,
button:hover {
  transform: translateY(-4px);
  box-shadow: var(--clay-shadow-button-hover) !important;
}

.btn:active,
button:active {
  transform: scale(0.92) !important;
  box-shadow: var(--clay-shadow-pressed) !important;
}

input,
select,
textarea,
.form-input {
  border: 0 !important;
  border-radius: 20px !important;
  background: #efebf5 !important;
  color: var(--clay-text) !important;
  box-shadow: var(--clay-shadow-pressed) !important;
}

input:focus,
select:focus,
textarea:focus,
.form-input:focus {
  outline: none !important;
  background: #ffffff !important;
  box-shadow: 0 0 0 4px var(--clay-ring), var(--clay-shadow-card) !important;
}

.message {
  border-radius: 18px !important;
}

.message.success {
  background: rgba(16, 185, 129, 0.14) !important;
  border: 1px solid rgba(16, 185, 129, 0.35) !important;
}

.message.error {
  background: rgba(200, 16, 46, 0.13) !important;
  border: 1px solid rgba(200, 16, 46, 0.35) !important;
}

.loading .spinner,
.spinner {
  border-color: rgba(200, 16, 46, 0.14) !important;
  border-top-color: var(--clay-accent) !important;
}

table {
  border-collapse: separate;
  border-spacing: 0;
}

th, td {
  border-color: rgba(200, 16, 46, 0.14) !important;
}

th {
  background: rgba(255, 255, 255, 0.65) !important;
  color: var(--clay-text) !important;
  font-family: "Nunito", "Poppins", sans-serif !important;
}

tr:hover td {
  background: rgba(200, 16, 46, 0.03) !important;
}

.stat-number {
  font-family: "Nunito", "Poppins", sans-serif !important;
  font-weight: 900 !important;
  color: var(--clay-accent) !important;
}

.empty-state {
  border-radius: 28px !important;
  background: rgba(255, 255, 255, 0.72) !important;
  box-shadow: var(--clay-shadow-card) !important;
}

@keyframes clay-float {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-18px) rotate(2deg); }
}

@keyframes clay-float-delayed {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-14px) rotate(-2deg); }
}

@media (max-width: 768px) {
  .header {
    border-radius: 28px !important;
  }

  .hero,
  .content-section,
  .modal-content,
  .table-container,
  .session-item,
  .group-item,
  .class-item,
  .feature-card,
  .card {
    border-radius: 24px !important;
  }

  .btn,
  button {
    min-height: 46px;
  }
}

@media (prefers-reduced-motion: reduce) {
  * {
    animation: none !important;
    transition: none !important;
  }

  body::before,
  body::after {
    animation: none !important;
  }
}