/* Design tokens extracted from the current full-page charge screen */
:root {
  /* Backgrounds */
  --bg-page: #F5EFE4;           /* warm beige app bg */
  --bg-sheet: #FBF5E9;          /* slightly lighter sheet bg */
  --bg-card-cream: #FFF8EB;     /* left half of plan card */
  --bg-card-cream-2: #FEEFD4;   /* card cream gradient end */

  /* Purple pt side */
  --purple-900: #2F1F3C;
  --purple-800: #3E2A4C;
  --purple-700: #4A3656;
  --purple-600: #5B3E60;
  --purple-500: #6B4A6E;

  /* Gold (一番人気) */
  --gold-900: #5E3E24;
  --gold-700: #7A5A3A;
  --gold-500: #9B7A4A;
  --gold-300: #D4B06A;
  --gold-100: #F3DFA8;

  /* Accents */
  --pink-bubble: #FFD1E0;
  --pink-bubble-border: #F8BBD0;
  --pink-text: #C2185B;

  /* Text */
  --ink: #2E1F3F;
  --ink-soft: #5B4A6A;
  --on-purple: #FFFFFF;
  --strike: #9A8B6E;

  /* Borders & shadow */
  --hairline: rgba(46, 31, 63, 0.08);
  --card-shadow: 0 2px 0 rgba(0,0,0,0.04), 0 8px 24px rgba(46, 31, 63, 0.08);
  --sheet-shadow: 0 -12px 40px rgba(46, 31, 63, 0.28);

  /* Radii */
  --r-card: 18px;
  --r-card-sm: 14px;
  --r-sheet: 24px;
  --r-pill: 999px;
}

html, body { margin: 0; padding: 0; }
body {
  font-family: "Hiragino Maru Gothic ProN", "M PLUS Rounded 1c", "Yu Gothic", "Noto Sans JP", system-ui, sans-serif;
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
}

/* Utility primitives used by the sheets */
.yen { font-feature-settings: "tnum"; }
.strike {
  color: var(--strike);
  text-decoration: line-through;
  text-decoration-thickness: 1.5px;
}
.pt-unit { font-size: 0.62em; letter-spacing: 0.02em; }

/* Pink savings pill */
.save-pill {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  background: var(--pink-bubble);
  color: var(--pink-text);
  border: 1.5px solid #F7A8C4;
  border-radius: var(--r-pill);
  padding: 2px 10px;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.4;
  white-space: nowrap;
}

/* Gold "一番人気" ribbon */
.popular-ribbon {
  background: linear-gradient(180deg, #EAC878 0%, #B6894A 100%);
  color: #FFF9E8;
  font-size: 10px;
  font-weight: 800;
  padding: 3px 8px;
  border-radius: 0 0 0 8px;
  letter-spacing: 0.04em;
  box-shadow: 0 1px 0 rgba(0,0,0,0.1) inset;
}

/* Purple plan side gradient */
.purple-side {
  background:
    radial-gradient(120% 140% at 100% 0%, #6E4A72 0%, transparent 55%),
    linear-gradient(135deg, var(--purple-700) 0%, var(--purple-800) 60%, var(--purple-900) 100%);
  color: var(--on-purple);
}
.purple-side.featured {
  background:
    radial-gradient(120% 140% at 100% 0%, #B08A52 0%, transparent 55%),
    linear-gradient(135deg, #6E4E2C 0%, #4A341F 100%);
}

/* Cream side */
.cream-side {
  background: linear-gradient(180deg, var(--bg-card-cream) 0%, var(--bg-card-cream-2) 100%);
}
.cream-side.featured {
  background: linear-gradient(180deg, #FFF4D6 0%, #FBE2A8 100%);
}

/* Sheet grabber */
.grabber {
  width: 40px;
  height: 4px;
  border-radius: 2px;
  background: #D9CDB4;
  margin: 8px auto 6px;
}

/* Buttons */
.btn-primary {
  background: linear-gradient(180deg, #7A5A8C 0%, #4A3656 100%);
  color: #FFF;
  border: none;
  border-radius: var(--r-pill);
  padding: 12px 18px;
  font-weight: 800;
  font-size: 14px;
  box-shadow: 0 2px 0 rgba(0,0,0,0.15), 0 6px 14px rgba(74, 54, 86, 0.35);
}
.btn-ghost {
  background: transparent;
  color: var(--ink-soft);
  border: none;
  font-weight: 600;
  font-size: 13px;
}

/* Scroll helpers */
.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { scrollbar-width: none; }