/* 外研版新版教材视觉主题 — 2024/2026 修订版 */
@import url('https://fonts.googleapis.com/css2?family=Fredoka:wght@400;500;600;700&family=Noto+Sans+SC:wght@400;500;600;700&display=swap');

:root {
  --fltrp-green: #6cc24a;
  --fltrp-green-dark: #2d6a2e;
  --fltrp-green-deep: #1a4d1c;
  --fltrp-cream: #fff6e8;
  --fltrp-cream-deep: #ffeccc;
  --fltrp-paper: #ffffff;
  --fltrp-orange: #ff8f1f;
  --fltrp-orange-dark: #e86f00;
  --fltrp-yellow: #ffd24a;
  --fltrp-sky: #b8e4f5;
  --fltrp-sky-deep: #5eb8e5;
  --unit-1: #00b4d8;
  --unit-2: #e91e8c;
  --unit-3: #3d5afe;
  --unit-4: #ff9100;
  --unit-5: #43a047;
  --unit-6: #ff5252;
  --unit-7: #26a69a;
  --bg: var(--fltrp-cream);
  --cream: var(--fltrp-paper);
  --text: #1f2937;
  --text-muted: #5c6b7a;
  --primary: var(--fltrp-green);
  --primary-dark: var(--fltrp-green-dark);
  --primary-soft: #e8f7e3;
  --orange: var(--fltrp-orange);
  --orange-dark: var(--fltrp-orange-dark);
  --yellow: var(--fltrp-yellow);
  --blue: var(--fltrp-sky-deep);
  --blue-dark: #2b7cb8;
  --green: var(--fltrp-green);
  --green-dark: var(--fltrp-green-dark);
  --pink: #e91e8c;
  --purple: #7c4dff;
  --card-bg: var(--fltrp-paper);
  --glass-border: 2px solid rgba(255, 255, 255, 0.85);
  --shadow: 0 4px 0 rgba(45, 106, 46, 0.08), 0 12px 28px rgba(31, 41, 55, 0.08);
  --shadow-hover: 0 6px 0 rgba(45, 106, 46, 0.1), 0 20px 40px rgba(31, 41, 55, 0.12);
  --shadow-btn: 0 4px 0 rgba(45, 106, 46, 0.22);
  --radius: 18px;
  --radius-lg: 26px;
  --radius-xl: 32px;
  --font: 'Fredoka', 'Noto Sans SC', system-ui, sans-serif;
  --font-cn: 'Noto Sans SC', sans-serif;
  --ease: cubic-bezier(0.34, 1.4, 0.64, 1);
}

.fltrp-triangles {
  background-color: var(--fltrp-green);
  background-image:
    linear-gradient(30deg, rgba(255,255,255,0.09) 12%, transparent 12.5%, transparent 87%, rgba(255,255,255,0.09) 87.5%, rgba(255,255,255,0.09)),
    linear-gradient(150deg, rgba(255,255,255,0.09) 12%, transparent 12.5%, transparent 87%, rgba(255,255,255,0.09) 87.5%, rgba(255,255,255,0.09));
  background-size: 28px 48px;
}

.sticker-title {
  font-family: var(--font);
  font-weight: 700;
  color: var(--fltrp-yellow);
  -webkit-text-stroke: 2.5px #fff;
  paint-order: stroke fill;
  filter: drop-shadow(0 3px 0 rgba(45, 106, 46, 0.15));
}

.ribbon-tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 18px 8px 14px;
  background: linear-gradient(90deg, var(--fltrp-orange), #ffb347);
  color: #fff;
  font-weight: 600;
  font-size: 0.92rem;
  border-radius: 0 14px 14px 0;
  box-shadow: 0 3px 0 rgba(232, 111, 0, 0.35);
}

.fltrp-sheet {
  background: var(--fltrp-paper);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow);
  border: 3px solid rgba(255, 255, 255, 0.9);
}

.fltrp-dots {
  background-color: var(--fltrp-cream);
  background-image: radial-gradient(circle, rgba(255, 200, 120, 0.35) 1.2px, transparent 1.2px);
  background-size: 18px 18px;
}

.fltrp-dots::after {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 5px;
  background: linear-gradient(90deg, var(--fltrp-green) 0%, var(--fltrp-green) 35%, var(--fltrp-orange) 100%);
  z-index: 1000;
  pointer-events: none;
}