/* ============================================================
   Protein Intake Calculator — WordPress Plugin v1.0
   Cormorant Garamond headings · DM Sans body
   Teal palette — all scoped to #pic-app with !important
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,600;0,700;1,600;1,700&family=DM+Sans:opsz,wght@9..40,400;9..40,500;9..40,600;9..40,700&display=swap');

/* ── Reset ─────────────────────────────────────────────── */
#pic-app, #pic-app * {
  box-sizing: border-box !important;
  -webkit-font-smoothing: antialiased !important;
}

/* ── Wrapper ────────────────────────────────────────────── */
#pic-app {
  display: flex !important;
  justify-content: center !important;
  width: 100% !important;
  padding: 32px 16px !important;
  font-family: 'DM Sans', sans-serif !important;
  background: #f0fdfa !important;
  background-image:
    radial-gradient(ellipse at 10% 10%, rgba(13,148,136,0.09) 0%, transparent 55%),
    radial-gradient(ellipse at 90% 90%, rgba(13,148,136,0.07)  0%, transparent 55%) !important;
}

/* ── Card ───────────────────────────────────────────────── */
#pic-app .pic-card {
  background: #ffffff !important;
  border-radius: 24px !important;
  box-shadow: 0 24px 64px rgba(13,148,136,0.12), 0 4px 20px rgba(0,0,0,0.07) !important;
  width: 100% !important;
  max-width: 540px !important;
  overflow: hidden !important;
  border: 1px solid rgba(13,148,136,0.12) !important;
}

/* ── Header ─────────────────────────────────────────────── */
#pic-app .pic-header {
  background: linear-gradient(145deg, #0d9488 0%, #0f766e 55%, #134e4a 100%) !important;
  padding: 34px 28px 28px !important;
  text-align: center !important;
  position: relative !important;
  overflow: hidden !important;
}

#pic-app .pic-header::before {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  background:
    radial-gradient(ellipse at 25% 0%,   rgba(255,255,255,0.15) 0%, transparent 55%),
    radial-gradient(ellipse at 75% 110%, rgba(0,0,0,0.10)       0%, transparent 55%) !important;
  pointer-events: none !important;
}

#pic-app .pic-header-icon {
  width: 64px !important;
  height: 64px !important;
  margin: 0 auto 14px !important;
  position: relative !important;
  z-index: 1 !important;
  display: block !important;
}

#pic-app .pic-icon-svg {
  width: 100% !important;
  height: 100% !important;
  display: block !important;
}

/* Dumbbell animations */
#pic-app .pic-icon-bar  { animation: picLift 2.4s ease-in-out infinite !important; transform-origin: 40px 40px !important; }
#pic-app .pic-icon-wl1  { animation: picLift 2.4s ease-in-out infinite 0.05s !important; transform-origin: 15px 40px !important; }
#pic-app .pic-icon-wl2  { animation: picLift 2.4s ease-in-out infinite 0.08s !important; transform-origin: 8px 40px !important; }
#pic-app .pic-icon-wr1  { animation: picLift 2.4s ease-in-out infinite 0.05s !important; transform-origin: 65px 40px !important; }
#pic-app .pic-icon-wr2  { animation: picLift 2.4s ease-in-out infinite 0.08s !important; transform-origin: 72px 40px !important; }

@keyframes picLift {
  0%,100% { transform: translateY(0);  }
  40%      { transform: translateY(-5px); }
  60%      { transform: translateY(-5px); }
}

#pic-app .pic-pulse-ring--1 { animation: picPulse 3s ease-out infinite !important; transform-origin: 40px 40px !important; }
#pic-app .pic-pulse-ring--2 { animation: picPulse 3s ease-out infinite 0.8s !important; transform-origin: 40px 40px !important; }

@keyframes picPulse {
  0%   { transform: scale(1);   opacity: 0.5; }
  80%,100% { transform: scale(1.5); opacity: 0;   }
}

#pic-app .pic-title {
  font-family: 'Cormorant Garamond', Georgia, serif !important;
  font-size: 2rem !important;
  font-weight: 700 !important;
  font-style: italic !important;
  color: #ffffff !important;
  margin: 0 0 5px !important;
  padding: 0 !important;
  position: relative !important;
  z-index: 1 !important;
  line-height: 1.1 !important;
  text-shadow: 0 2px 12px rgba(0,0,0,0.2) !important;
  display: block !important;
  background: none !important;
  border: none !important;
  text-transform: none !important;
}

#pic-app .pic-subtitle {
  font-family: 'DM Sans', sans-serif !important;
  font-size: 0.86rem !important;
  color: rgba(255,255,255,0.82) !important;
  margin: 0 !important;
  padding: 0 !important;
  position: relative !important;
  z-index: 1 !important;
  display: block !important;
}

/* ── Form body ──────────────────────────────────────────── */
#pic-app .pic-form-body {
  padding: 26px 28px 28px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 20px !important;
}

/* ── Unit toggle ────────────────────────────────────────── */
#pic-app .pic-unit-toggle {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  background: #f0fdfa !important;
  border-radius: 12px !important;
  padding: 5px !important;
  gap: 5px !important;
  border: 1px solid #99f6e4 !important;
}

/* ── WP button reset ────────────────────────────────────── */
#pic-app button {
  -webkit-appearance: none !important;
  appearance: none !important;
  text-shadow: none !important;
  text-decoration: none !important;
  font-family: 'DM Sans', sans-serif !important;
}

#pic-app .pic-unit-btn {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 2px !important;
  padding: 10px 8px !important;
  border: none !important;
  border-radius: 8px !important;
  background: transparent !important;
  font-family: 'DM Sans', sans-serif !important;
  font-size: 0.88rem !important;
  font-weight: 600 !important;
  color: #0f766e !important;
  cursor: pointer !important;
  transition: all 0.2s !important;
  box-shadow: none !important;
  outline: none !important;
  line-height: 1.3 !important;
}

#pic-app .pic-hint {
  font-size: 0.7rem !important;
  opacity: 0.7 !important;
  display: block !important;
}

#pic-app .pic-unit-btn:hover:not(.active) {
  background: rgba(13,148,136,0.1) !important;
  color: #0d9488 !important;
}

#pic-app .pic-unit-btn.active {
  background: #0d9488 !important;
  color: #ffffff !important;
  box-shadow: 0 4px 14px rgba(13,148,136,0.38) !important;
}

/* ── Row grid ───────────────────────────────────────────── */
#pic-app .pic-row {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 16px !important;
}

/* ── Fields ─────────────────────────────────────────────── */
#pic-app .pic-field {
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
}

#pic-app .pic-label {
  font-family: 'Cormorant Garamond', Georgia, serif !important;
  font-size: 1.05rem !important;
  font-weight: 600 !important;
  font-style: normal !important;
  color: #0f766e !important;
  display: flex !important;
  align-items: center !important;
  gap: 7px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  background: none !important;
  text-transform: none !important;
  line-height: 1.2 !important;
}

#pic-app .pic-label-icon {
  width: 15px !important;
  height: 15px !important;
  flex-shrink: 0 !important;
  color: #14b8a6 !important;
}

/* ── Text inputs ────────────────────────────────────────── */
#pic-app .pic-input-wrap {
  position: relative !important;
}

#pic-app .pic-inp {
  width: 100% !important;
  padding: 13px 48px 13px 16px !important;
  border: 1.5px solid #99f6e4 !important;
  border-radius: 10px !important;
  font-family: 'DM Sans', sans-serif !important;
  font-size: 1rem !important;
  font-weight: 600 !important;
  color: #0f172a !important;
  background: #f0fdfa !important;
  -moz-appearance: textfield !important;
  outline: none !important;
  box-shadow: none !important;
  transition: border-color 0.2s, box-shadow 0.2s !important;
  display: block !important;
}

#pic-app .pic-inp::-webkit-inner-spin-button,
#pic-app .pic-inp::-webkit-outer-spin-button { -webkit-appearance: none !important; margin: 0 !important; }

#pic-app .pic-inp:focus {
  border-color: #0d9488 !important;
  background: #ffffff !important;
  box-shadow: 0 0 0 3.5px rgba(13,148,136,0.14) !important;
  outline: none !important;
}

#pic-app .pic-inp-unit {
  position: absolute !important;
  right: 14px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  font-family: 'DM Sans', sans-serif !important;
  font-size: 0.75rem !important;
  font-weight: 700 !important;
  color: #0f766e !important;
  pointer-events: none !important;
}

/* ── Gender pills ───────────────────────────────────────── */
#pic-app .pic-pill-group {
  display: flex !important;
  gap: 8px !important;
  flex-wrap: wrap !important;
}

#pic-app .pic-pill {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 9px 18px !important;
  border-radius: 50px !important;
  border: 1.5px solid #99f6e4 !important;
  background: #ffffff !important;
  font-family: 'DM Sans', sans-serif !important;
  font-size: 0.86rem !important;
  font-weight: 600 !important;
  color: #0f766e !important;
  cursor: pointer !important;
  transition: all 0.18s !important;
  box-shadow: none !important;
  outline: none !important;
  line-height: 1.3 !important;
  white-space: nowrap !important;
}

#pic-app .pic-pill svg { flex-shrink: 0 !important; }

#pic-app .pic-pill:hover:not(.active) {
  border-color: #0d9488 !important;
  color: #0d9488 !important;
  background: #f0fdfa !important;
}

#pic-app .pic-pill.active {
  background: #0d9488 !important;
  border-color: #0d9488 !important;
  color: #ffffff !important;
  box-shadow: 0 2px 10px rgba(13,148,136,0.30) !important;
}

/* ── Goal cards ─────────────────────────────────────────── */
#pic-app .pic-goal-group {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 10px !important;
}

#pic-app .pic-goal-btn {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 5px !important;
  padding: 14px 8px !important;
  border: 1.5px solid #99f6e4 !important;
  border-radius: 14px !important;
  background: #ffffff !important;
  cursor: pointer !important;
  transition: all 0.2s !important;
  font-family: 'DM Sans', sans-serif !important;
  box-shadow: none !important;
  outline: none !important;
}

#pic-app .pic-goal-icon {
  width: 22px !important;
  height: 22px !important;
  color: #14b8a6 !important;
  flex-shrink: 0 !important;
}

#pic-app .pic-goal-name {
  font-family: 'DM Sans', sans-serif !important;
  font-size: 0.8rem !important;
  font-weight: 700 !important;
  color: #0f172a !important;
  text-align: center !important;
  line-height: 1.2 !important;
  display: block !important;
}

#pic-app .pic-goal-desc {
  font-family: 'DM Sans', sans-serif !important;
  font-size: 0.68rem !important;
  color: #94a3b8 !important;
  text-align: center !important;
  display: block !important;
  line-height: 1.2 !important;
}

#pic-app .pic-goal-btn:hover:not(.active) {
  border-color: #0d9488 !important;
  background: #f0fdfa !important;
}

#pic-app .pic-goal-btn.active {
  border-color: #0d9488 !important;
  background: linear-gradient(135deg, #f0fdfa, #ccfbf1) !important;
  box-shadow: 0 2px 12px rgba(13,148,136,0.20) !important;
}

#pic-app .pic-goal-btn.active .pic-goal-name { color: #0d9488 !important; }
#pic-app .pic-goal-btn.active .pic-goal-icon { color: #0d9488 !important; }

/* ── Dropdown ───────────────────────────────────────────── */
#pic-app .pic-select-wrap {
  position: relative !important;
  display: block !important;
}

#pic-app .pic-select {
  width: 100% !important;
  padding: 13px 44px 13px 16px !important;
  border: 1.5px solid #99f6e4 !important;
  border-radius: 10px !important;
  font-family: 'DM Sans', sans-serif !important;
  font-size: 0.93rem !important;
  font-weight: 500 !important;
  color: #0f172a !important;
  background: #f0fdfa !important;
  -webkit-appearance: none !important;
  appearance: none !important;
  cursor: pointer !important;
  transition: all 0.2s !important;
  box-shadow: none !important;
  outline: none !important;
  display: block !important;
}

#pic-app .pic-select:focus {
  border-color: #0d9488 !important;
  background: #ffffff !important;
  box-shadow: 0 0 0 3.5px rgba(13,148,136,0.14) !important;
  outline: none !important;
}

#pic-app .pic-select-chevron {
  position: absolute !important;
  right: 13px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  pointer-events: none !important;
  color: #0d9488 !important;
  width: 16px !important;
  height: 16px !important;
}

/* ── Error ──────────────────────────────────────────────── */
#pic-app .pic-error {
  padding: 11px 14px !important;
  background: #fef2f2 !important;
  border-left: 3px solid #ef4444 !important;
  border-radius: 0 8px 8px 0 !important;
  font-family: 'DM Sans', sans-serif !important;
  font-size: 0.84rem !important;
  color: #991b1b !important;
  font-weight: 500 !important;
  animation: picShake 0.4s ease !important;
}

@keyframes picShake { 0%,100%{transform:translateX(0)} 20%{transform:translateX(-5px)} 40%{transform:translateX(5px)} 60%{transform:translateX(-3px)} 80%{transform:translateX(3px)} }

/* ── Submit button ──────────────────────────────────────── */
#pic-app .pic-submit-btn {
  width: 100% !important;
  padding: 15px !important;
  background: linear-gradient(135deg, #0d9488, #0f766e) !important;
  border: none !important;
  border-radius: 12px !important;
  font-family: 'Cormorant Garamond', Georgia, serif !important;
  font-size: 1.3rem !important;
  font-weight: 700 !important;
  font-style: italic !important;
  color: #ffffff !important;
  cursor: pointer !important;
  letter-spacing: 0.02em !important;
  box-shadow: 0 4px 18px rgba(13,148,136,0.40) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 9px !important;
  margin-top: 4px !important;
  transition: transform 0.22s ease, box-shadow 0.22s ease !important;
  outline: none !important;
  line-height: 1.2 !important;
}

#pic-app .pic-submit-btn:hover {
  background: linear-gradient(135deg, #0f766e, #134e4a) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 28px rgba(13,148,136,0.50) !important;
  color: #ffffff !important;
}

#pic-app .pic-submit-btn:active { transform: translateY(0) !important; }

@keyframes picSpin { to { transform: rotate(360deg); } }
#pic-app .pic-spinner { animation: picSpin 0.8s linear infinite !important; flex-shrink: 0 !important; }

/* ── Result panel ───────────────────────────────────────── */
#pic-app .pic-result-panel {
  padding: 0 28px 28px !important;
  animation: picFadeIn 0.45s ease !important;
}

@keyframes picFadeIn {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── Hero result row ────────────────────────────────────── */
#pic-app .pic-result-hero {
  display: flex !important;
  align-items: center !important;
  gap: 24px !important;
  padding: 24px 0 20px !important;
  border-bottom: 1px solid #99f6e4 !important;
  margin-bottom: 20px !important;
}

/* Ring */
#pic-app .pic-result-ring-wrap {
  position: relative !important;
  flex-shrink: 0 !important;
  width: 130px !important;
  height: 130px !important;
}

#pic-app .pic-ring-svg {
  width: 130px !important;
  height: 130px !important;
  display: block !important;
}

#pic-app .pic-ring-fill {
  transition: stroke-dashoffset 1.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

#pic-app .pic-ring-center {
  position: absolute !important;
  inset: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
}

#pic-app .pic-result-grams {
  font-family: 'Cormorant Garamond', Georgia, serif !important;
  font-size: 2.2rem !important;
  font-weight: 700 !important;
  font-style: italic !important;
  color: #0d9488 !important;
  line-height: 1 !important;
  display: block !important;
  transition: color 0.4s !important;
}

#pic-app .pic-result-unit-lbl {
  font-family: 'DM Sans', sans-serif !important;
  font-size: 0.62rem !important;
  font-weight: 700 !important;
  color: #0f766e !important;
  text-transform: uppercase !important;
  letter-spacing: 0.1em !important;
  display: block !important;
  margin-top: 1px !important;
}

/* Result meta */
#pic-app .pic-result-meta { flex: 1 !important; }

#pic-app .pic-result-headline {
  font-family: 'DM Sans', sans-serif !important;
  font-size: 0.75rem !important;
  font-weight: 600 !important;
  color: #94a3b8 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  margin: 0 0 4px !important;
  padding: 0 !important;
  display: block !important;
}

#pic-app .pic-result-big {
  font-family: 'Cormorant Garamond', Georgia, serif !important;
  font-size: 2.8rem !important;
  font-weight: 700 !important;
  font-style: italic !important;
  color: #0d9488 !important;
  line-height: 1 !important;
  margin: 0 0 4px !important;
  padding: 0 !important;
  display: block !important;
}

#pic-app .pic-result-sub {
  font-family: 'DM Sans', sans-serif !important;
  font-size: 0.84rem !important;
  color: #64748b !important;
  margin: 0 0 12px !important;
  padding: 0 !important;
  font-weight: 400 !important;
  display: block !important;
}

#pic-app .pic-goal-badge {
  display: inline-block !important;
  padding: 5px 14px !important;
  background: linear-gradient(135deg, #f0fdfa, #ccfbf1) !important;
  border: 1px solid #99f6e4 !important;
  border-radius: 50px !important;
  font-family: 'DM Sans', sans-serif !important;
  font-size: 0.76rem !important;
  font-weight: 700 !important;
  color: #0d9488 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
}

/* ── Stats row ──────────────────────────────────────────── */
#pic-app .pic-stats-row {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 10px !important;
  margin-bottom: 22px !important;
}

#pic-app .pic-stat-box {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 14px 10px !important;
  background: #f0fdfa !important;
  border: 1px solid #99f6e4 !important;
  border-radius: 14px !important;
  text-align: center !important;
  animation: picStatIn 0.5s ease both !important;
}

#pic-app .pic-stat-box:nth-child(1) { animation-delay: 0.1s !important; }
#pic-app .pic-stat-box:nth-child(2) { animation-delay: 0.2s !important; }
#pic-app .pic-stat-box:nth-child(3) { animation-delay: 0.3s !important; }

@keyframes picStatIn { from{opacity:0;transform:translateY(8px)} to{opacity:1;transform:translateY(0)} }

#pic-app .pic-stat-svg {
  width: 18px !important;
  height: 18px !important;
  color: #14b8a6 !important;
  flex-shrink: 0 !important;
}

#pic-app .pic-stat-label {
  font-family: 'DM Sans', sans-serif !important;
  font-size: 0.66rem !important;
  font-weight: 600 !important;
  color: #94a3b8 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  display: block !important;
}

#pic-app .pic-stat-val {
  font-family: 'Cormorant Garamond', Georgia, serif !important;
  font-size: 1.35rem !important;
  font-weight: 700 !important;
  font-style: italic !important;
  color: #0d9488 !important;
  display: block !important;
  line-height: 1.1 !important;
}

#pic-app .pic-stat-sub {
  font-family: 'DM Sans', sans-serif !important;
  font-size: 0.63rem !important;
  color: #0f766e !important;
  display: block !important;
  font-weight: 500 !important;
}

/* ── Food equivalents ───────────────────────────────────── */
#pic-app .pic-food-section {
  margin-bottom: 20px !important;
}

#pic-app .pic-section-title {
  font-family: 'Cormorant Garamond', Georgia, serif !important;
  font-size: 1.1rem !important;
  font-weight: 600 !important;
  color: #0f766e !important;
  display: flex !important;
  align-items: center !important;
  gap: 7px !important;
  margin: 0 0 12px !important;
  padding: 0 !important;
  border: none !important;
  background: none !important;
}

#pic-app .pic-section-title svg { color: #14b8a6 !important; flex-shrink: 0 !important; }

#pic-app .pic-food-grid {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 10px !important;
}

#pic-app .pic-food-card {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 16px 8px 12px !important;
  background: #ffffff !important;
  border: 1px solid #99f6e4 !important;
  border-radius: 14px !important;
  text-align: center !important;
  animation: picFoodIn 0.5s ease both !important;
}

#pic-app .pic-food-card:nth-child(1) { animation-delay: 0.15s !important; }
#pic-app .pic-food-card:nth-child(2) { animation-delay: 0.25s !important; }
#pic-app .pic-food-card:nth-child(3) { animation-delay: 0.35s !important; }

@keyframes picFoodIn { from{opacity:0;transform:scale(0.9)} to{opacity:1;transform:scale(1)} }

#pic-app .pic-food-icon {
  width: 44px !important;
  height: 44px !important;
  display: block !important;
}

#pic-app .pic-food-val {
  font-family: 'Cormorant Garamond', Georgia, serif !important;
  font-size: 1.5rem !important;
  font-weight: 700 !important;
  font-style: italic !important;
  color: #0d9488 !important;
  display: block !important;
  line-height: 1 !important;
}

#pic-app .pic-food-lbl {
  font-family: 'DM Sans', sans-serif !important;
  font-size: 0.7rem !important;
  color: #64748b !important;
  font-weight: 500 !important;
  line-height: 1.4 !important;
  display: block !important;
}

#pic-app .pic-food-lbl small {
  font-size: 0.62rem !important;
  color: #94a3b8 !important;
  display: block !important;
}

/* ── Tip box ────────────────────────────────────────────── */
#pic-app .pic-tip-box {
  display: flex !important;
  align-items: flex-start !important;
  gap: 11px !important;
  padding: 13px 16px !important;
  background: #f0fdfa !important;
  border-left: 3px solid #14b8a6 !important;
  border-radius: 0 12px 12px 0 !important;
  margin-bottom: 20px !important;
  animation: picTipIn 0.5s 0.4s ease both !important;
}

@keyframes picTipIn { from{opacity:0;transform:translateX(-8px)} to{opacity:1;transform:translateX(0)} }

#pic-app .pic-tip-icon {
  width: 17px !important;
  height: 17px !important;
  flex-shrink: 0 !important;
  color: #14b8a6 !important;
  margin-top: 1px !important;
}

#pic-app .pic-tip-text {
  font-family: 'DM Sans', sans-serif !important;
  font-size: 0.86rem !important;
  color: #374151 !important;
  font-weight: 500 !important;
  line-height: 1.6 !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* ── Recalculate ────────────────────────────────────────── */
#pic-app .pic-recalc-btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 7px !important;
  background: transparent !important;
  border: 1.5px solid #99f6e4 !important;
  border-radius: 8px !important;
  padding: 9px 18px !important;
  font-family: 'DM Sans', sans-serif !important;
  font-size: 0.84rem !important;
  font-weight: 600 !important;
  color: #0f766e !important;
  cursor: pointer !important;
  transition: all 0.2s !important;
  box-shadow: none !important;
  outline: none !important;
  line-height: 1.3 !important;
}

#pic-app .pic-recalc-btn:hover {
  border-color: #0d9488 !important;
  color: #0d9488 !important;
  background: #f0fdfa !important;
}

/* ── Responsive: tablet ─────────────────────────────────── */
@media screen and (max-width: 560px) {
  #pic-app .pic-form-body    { padding: 22px 20px 24px !important; gap: 16px !important; }
  #pic-app .pic-result-panel { padding: 0 20px 24px !important; }
  #pic-app .pic-header       { padding: 26px 20px 22px !important; }
  #pic-app .pic-title        { font-size: 1.7rem !important; }
  #pic-app .pic-goal-group   { grid-template-columns: 1fr 1fr 1fr !important; }
}

/* ── Responsive: phone ──────────────────────────────────── */
@media screen and (max-width: 420px) {
  #pic-app                      { padding: 14px 8px !important; }
  #pic-app .pic-card           { border-radius: 18px !important; }
  #pic-app .pic-header         { padding: 22px 16px 20px !important; }
  #pic-app .pic-form-body      { padding: 18px 14px 20px !important; gap: 14px !important; }
  #pic-app .pic-result-panel   { padding: 0 14px 20px !important; }
  #pic-app .pic-title          { font-size: 1.5rem !important; }
  #pic-app .pic-row            { grid-template-columns: 1fr !important; }
  #pic-app .pic-goal-group     { grid-template-columns: 1fr !important; }
  #pic-app .pic-stats-row      { grid-template-columns: 1fr 1fr !important; }
  #pic-app .pic-food-grid      { grid-template-columns: 1fr 1fr !important; }
  #pic-app .pic-food-card:nth-child(3) { grid-column: span 2 !important; }
  #pic-app .pic-result-hero    { flex-direction: column !important; align-items: center !important; gap: 16px !important; text-align: center !important; }
  #pic-app .pic-result-big     { font-size: 2.4rem !important; }
}