:root {
  --color-bg: #F8F9FC;
  --color-text: #2D334A;
  --color-card: #FFFFFF;
  --color-mint: #25EBB0;
  --color-coral: #FF7D66;
  --color-yellow: #FFD12D;
  --color-violet: #9F7AEA;
  --color-blue: #4299E1;
  --color-mint-light: #D1FAE5;
  --color-coral-light: #FFE4E6;
  --color-muted-strong: #64748B;
  --color-muted: #94A3B8;
  --color-tooltip-bg: #1E293B;
  --color-white: #FFFFFF;
  --color-border: #F1F5F9;
  --color-border-strong: #E2E8F0;
  --color-grid-dot: #E2E8F0;

  --radius-3xl: 24px;
  --radius-4xl: 32px;

  --shadow-pop: 0px 4px 0px 0px rgba(0,0,0,0.05), 0px 8px 24px rgba(0,0,0,0.05);
  --shadow-pop-hover: 0px 8px 0px 0px rgba(0,0,0,0.05), 0px 12px 32px rgba(0,0,0,0.08);
  --shadow-btn-mint: 0px 6px 0px 0px #059669;
  --shadow-btn-mint-active: 0px 0px 0px 0px #059669;
  --shadow-card-depth: 0 10px 15px -3px rgba(0, 0, 0, 0.05), 0 4px 6px -2px rgba(0, 0, 0, 0.025);
}

body {
  background-color: var(--color-bg);
  color: var(--color-text);
  font-family: 'Nunito', 'M PLUS Rounded 1c', sans-serif;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  background-image:
    radial-gradient(var(--color-grid-dot) 1px, transparent 1px),
    radial-gradient(var(--color-grid-dot) 1px, transparent 1px);
  background-size: 20px 20px;
  background-position: 0 0, 10px 10px;
}

.pop-card {
  background: var(--color-card);
  border-radius: 28px;
  border: 2px solid var(--color-border);
  box-shadow: 0 4px 0 0 var(--color-border-strong);
  transition: all 0.2s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.pop-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 0 0 var(--color-border-strong);
}

.text-gradient-fun {
  background: linear-gradient(135deg, var(--color-mint) 0%, var(--color-blue) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.btn-3d {
  transition: all 0.1s;
  transform: translateY(0);
}

.btn-3d:active {
  transform: translateY(6px);
  box-shadow: none !important;
}

::-webkit-scrollbar { width: 0px; }