@import url('https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700;800;900&display=swap');
:root {
  --calc-primary:       #8B5CF6;
  --calc-primary-light: #EDE9FE;
  --calc-primary-dark:  #7C3AED;
  --ink:   #0F0A2C;
  --ink-2: #1B1640;
  --ink-3: #5B5572;
  --white: #FCFAF9;
  --off:   #F2EDEC;
  --line:   rgba(15, 10, 44, 0.08);
  --line-2: rgba(15, 10, 44, 0.16);
  --glass-bg:     rgba(252, 250, 249, 0.88);
  --glass-border: rgba(15, 10, 44, 0.10);
  --ff-sans:  'Geist', system-ui, sans-serif;
  --ff-serif: 'Geist', system-ui, sans-serif;
  --shadow-lg: 0 16px 40px -8px rgba(15, 10, 44, 0.10);
}
body {
  background: #F2EDEC !important;
  font-family: 'Geist', system-ui, sans-serif !important;
}
.calc-hero-header h1 {
  font-family: 'Geist', system-ui, sans-serif !important;
  font-weight: 800 !important;
  letter-spacing: -0.02em;
}
.calc-hero-header h1 em {
  font-style: normal !important;
  font-weight: 800 !important;
}
.article-text h2 {
  font-family: 'Geist', system-ui, sans-serif !important;
  font-weight: 800 !important;
  letter-spacing: -0.02em;
}
.cat-hero-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #EDE9FE;
  color: #7C3AED;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 6px 14px;
  border-radius: 999px;
  margin-bottom: 1.25rem;
}
.glass-card {
  background: rgba(252, 250, 249, 0.88) !important;
  border: 1px solid rgba(15, 10, 44, 0.10) !important;
  box-shadow: 0 16px 40px -8px rgba(15, 10, 44, 0.10) !important;
}
.input-wrapper input,
.input-wrapper select {
  background: #FFFFFF !important;
  border-color: rgba(15, 10, 44, 0.14) !important;
  font-family: 'Geist', system-ui, sans-serif !important;
  color: #0F0A2C !important;
}
.input-wrapper input:focus,
.input-wrapper select:focus {
  border-color: #8B5CF6 !important;
  box-shadow: 0 0 0 4px #EDE9FE !important;
}
.bento-card.primary {
  background: linear-gradient(135deg, #8B5CF6 0%, #7C3AED 100%) !important;
}
.bento-card {
  background: #FFFFFF !important;
  border-color: rgba(15, 10, 44, 0.08) !important;
}
.bento-card:hover {
  border-color: #8B5CF6 !important;
}
.stat-card {
  background: #F2EDEC !important;
  border-color: rgba(15, 10, 44, 0.08) !important;
}
.weight-range-card {
  background: #F2EDEC !important;
  border-color: rgba(15, 10, 44, 0.08) !important;
}
.range-icon {
  background: #EDE9FE !important;
  color: #8B5CF6 !important;
}
.sidebar-guide {
  background: #F2EDEC !important;
  border-color: rgba(15, 10, 44, 0.08) !important;
}
.guide-item strong {
  color: #8B5CF6 !important;
}
.unit-toggle {
  background: rgba(15, 10, 44, 0.08) !important;
}
.unit-btn.active {
  background: #FFFFFF !important;
  color: #8B5CF6 !important;
}
.article-text li::before {
  color: #8B5CF6 !important;
}
.seo-content {
  border-top-color: rgba(15, 10, 44, 0.08) !important;
}
.status-table th {
  background: #F2EDEC !important;
}
.status-table th,
.status-table td {
  border-color: rgba(15, 10, 44, 0.08) !important;
}
.card-header {
  display: flex;
  align-items: center;
  gap: 12px;
}
.card-header h3 {
  margin: 0;
  font-size: 1.1rem;
  font-weight: 700;
  color: #0F0A2C;
  font-family: 'Geist', system-ui, sans-serif;
  letter-spacing: -0.01em;
}
.card-header svg {
  width: 22px;
  height: 22px;
  color: #8B5CF6;
  flex-shrink: 0;
}
.small-input {
  background: #FFFFFF !important;
  border-color: rgba(15, 10, 44, 0.14) !important;
  font-family: 'Geist', system-ui, sans-serif !important;
  color: #0F0A2C !important;
}
.small-input:focus {
  border-color: #8B5CF6 !important;
  box-shadow: 0 0 0 4px #EDE9FE !important;
}
.result-display {
  background: #F2EDEC !important;
  border-color: rgba(15, 10, 44, 0.08) !important;
}
.result-value {
  color: #8B5CF6 !important;
}
.chart-side {
  background: #FFFFFF !important;
  border-color: rgba(15, 10, 44, 0.08) !important;
}