/* ============================================================
   Dual Period Prototype Phase 1.5 CSS
   Visual reference ONLY: the 6-product screenshot provided by the
   user is the visual source of truth. The old 9-product formal
   page is NOT the visual reference.
   Scope: #dp-root and .dp-* classes only. No conflict with formal
   style.css because formal CSS never uses .dp-* prefix.
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; }

#dp-root, .dp-root {
  min-height: 100vh;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
               "Helvetica Neue", Arial, "PingFang SC", "Microsoft YaHei",
               sans-serif;
  background: #F5F7FB;       /* very light blue tint like screenshot */
  color: #1F2937;
  font-size: 14px;
  line-height: 1.5;
}

.dp-hidden { display: none !important; }

/* ---------- Shared typography (pixels tuned vs screenshot) ---------- */
.dp-period-chip {
  position: sticky;
  top: 0;
  z-index: 20;
  max-width: 1280px;
  margin: 0 auto;
  padding: 10px 24px 0;
  font-size: 12px;
  color: #5B6A8A;
  font-weight: 500;
  letter-spacing: 0.02em;
  text-align: right;
}
@media (max-width: 820px) { .dp-period-chip { padding: 8px 16px 0; } }

/* =================================================================
   MENU PHASE — top header (title/subtitle + page-note card)
   ================================================================= */
.dp-menu-phase {
  max-width: 1280px;
  margin: 0 auto;
  padding: 4px 24px 64px;
}
@media (max-width: 820px) { .dp-menu-phase { padding: 4px 16px 48px; } }

.dp-page-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  gap: 24px;
  align-items: start;
  padding: 14px 0 24px;
}
@media (max-width: 1100px) {
  .dp-page-header { grid-template-columns: 1fr; }
}

.dp-page-title {
  margin: 6px 0 10px;
  font-size: 30px;
  line-height: 1.25;
  font-weight: 800;
  color: #1F2937;
  letter-spacing: -0.01em;
}

/* -------- Shopping Rules Panel (UI Tier 2 optimization) --------
   Display shopping rule as TWO lines instead of one dim subtitle,
   clearly stronger in visual hierarchy than the old subtitle,
   but intentionally softer than the page title (no alert box).
   Line 1 is whole-sentence bold (self-choice framing).
   Line 2 emphasizes three key points only (no whole-line bold). */
.dp-shopping-rules {
  margin-top: 4px;
  padding: 12px 16px;
  background: #F2F6FF;              /* very light blue-gray tint, not alert */
  border: 1px solid #E1E9FB;
  border-radius: 12px;
}
.dp-shopping-rules-line {
  margin: 0;
  padding: 2px 0;
  font-size: 16.5px;                  /* ~16–17px target per spec */
  line-height: 1.6;                   /* ~1.5–1.7 target per spec */
  color: #2F3B5A;                     /* deeper gray-blue, not the old light #5B6A8A */
}
.dp-shopping-rules-line + .dp-shopping-rules-line { margin-top: 2px; }
.dp-shopping-rules-line-1 strong {
  font-weight: 800;
  color: #1C2B4D;
  letter-spacing: -0.005em;
}
.dp-shopping-rules-line-2 .dp-rule-emph {
  font-weight: 700;
  color: #163990;                     /* saturated deep blue for 3 key phrases */
}
/* Keep old subtitle selector harmless (future-proof) but unused for now. */
.dp-page-subtitle {
  margin: 0;
  color: #5B6A8A;
  font-size: 14px;
  line-height: 1.65;
}

.dp-page-note {
  background: linear-gradient(180deg, #EEF3FF 0%, #F7F9FF 100%);
  border: 1px solid #DCE5FF;
  border-radius: 14px;
  padding: 14px 16px;
}
.dp-page-note-title {
  font-weight: 700;
  font-size: 15px;
  color: #1E3A8A;
  margin-bottom: 6px;
}
.dp-page-note-body {
  color: #3A4B6D;
  font-size: 13px;
  line-height: 1.65;
}
.dp-page-note.is-rule-card-upgraded {
  padding: 16px 18px 17px;
  border-color: #C9D8FF;
  box-shadow: 0 4px 16px rgba(47, 107, 255, 0.08);
}
.dp-page-note.is-rule-card-upgraded .dp-page-note-title {
  margin-bottom: 10px;
  font-size: 16px;
  font-weight: 700;
  color: #1E3A8A;
  letter-spacing: 0.01em;
}
.dp-page-note.is-rule-card-upgraded .dp-page-note-body {
  font-size: 14px;
  line-height: 1.6;
}
.dp-page-note-paragraph {
  margin: 0;
}
.dp-page-note-paragraph + .dp-page-note-paragraph {
  margin-top: 10px;
}
.dp-page-note.is-rule-card-upgraded .dp-page-note-paragraph.is-key-rule {
  color: #1E3A8A;
  font-weight: 700;
}
.dp-page-note.is-rule-card-upgraded .dp-page-note-paragraph.is-choice-autonomy {
  color: #2A3855;
  font-weight: 700;
}
.dp-page-note-inline-emphasis {
  display: inline;
  font-weight: 700;
  color: #2A3855;
}
.dp-page-note-amount {
  font-weight: 700;
}

/* =================================================================
   MENU BODY: 2 columns (left = category sections, right = order summary)
   ================================================================= */
.dp-menu-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  gap: 24px;
  align-items: start;
}
.dp-menu-main {
  min-width: 0;
  width: 100%;
  max-width: 100%;
}
/* On medium/large screens, make the right order-summary column truly sticky
   at the side (not below the body) by attaching it to the right of the
   shopping page — this mimics the 6-product screenshot layout where the
   summary is a persistent right-hand panel even on 1100~1280px widths. */
.dp-order-summary-wrap {
  position: sticky;
  top: 40px;
  align-self: start;
  min-width: 0;
}
@media (max-width: 1100px) {
  .dp-menu-body { grid-template-columns: 1fr; }
  .dp-order-summary-wrap {
    position: static;
    width: 100%;
    max-width: 100%;
  }
}

/* --- category sections (screenshot 主食 / 小食 / 饮品 白色大卡片) --- */
.dp-section {
  background: #FFFFFF;
  border: 1px solid #E6ECF5;
  border-radius: 18px;
  padding: 18px 20px 20px;
  margin-bottom: 20px;
  box-shadow: 0 2px 10px rgba(37, 56, 104, 0.04);
  min-width: 0;
  width: 100%;
  max-width: 100%;
}
.dp-section-title {
  margin: 2px 0 14px;
  font-size: 22px;
  font-weight: 800;
  color: #1F2937;
  letter-spacing: 0.01em;
}
.dp-section-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px 16px;
  /* Fix "one card expands → neighbour forced to same height → huge blank" issue.
     align-items:start lets each card size to its own natural content, while
     grid row auto expands only to fit the tallest card in that row. */
  align-items: start;
}
@media (max-width: 680px) {
  .dp-section-grid { grid-template-columns: 1fr; }
}

/* =================================================================
   PRODUCT CARD — horizontal (image left | text + button right)
   Matches screenshot's 地三鲜饭 / 鸡胸肉沙拉 等样式
   ================================================================= */
.dp-product-card {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  background: #FBFCFF;
  border: 1px solid #E7EEFA;
  border-radius: 14px;
  padding: 12px;
  transition: border-color .15s ease, background .15s ease;
  min-width: 0;
  width: 100%;
  max-width: 100%;
}
.dp-product-card:hover {
  border-color: #C8D6FB;
  background: #F7FAFF;
}
.dp-product-card.is-selected {
  /* NO heavy orange border in Phase 1.5 — subtle highlight only (per screenshot) */
  border-color: #98B7FF;
  background: #F2F6FF;
}

.dp-product-image {
  flex: 0 0 auto;
  width: 86px;
  height: 86px;
  border-radius: 12px;
  background: #EEF2FA;
  overflow: hidden;
}
.dp-product-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.dp-product-body {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.dp-product-name {
  font-size: 16px;
  font-weight: 700;
  color: #1F2937;
  line-height: 1.3;
}
.dp-product-name-row {
  display: flex;
  flex-wrap: wrap;     /* narrow/mobile allows natural wrapping (spec B) */
  align-items: baseline;
  gap: 8px;            /* small visual gap between title & spec */
  line-height: 1.3;
}
.dp-product-spec {
  font-size: 12.5px;   /* smaller than product name */
  font-weight: 400;    /* NOT bold */
  color: #6B7280;      /* muted gray */
  white-space: nowrap; /* keep spec itself one token; wrap at row level */
}
.dp-product-price {
  font-size: 15px;
  font-weight: 500;
  color: #1F2937;
  margin-top: 0;
}
.dp-product-delivery {
  color: #1F2937;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.35;
}
/* placeholder area for Phase 2: nutrition panel / carbon panel / info button */
.dp-product-info-area {
  min-height: 0;     /* Control state — empty, takes no vertical space */
  margin: 2px 0 0;
  /* Phase 1.11.2 §II: guarantee the info block lives strictly inside its
     parent product card (never stretches horizontally outside, never
     pushes the 加入 button out of the card's right edge). */
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}
.dp-product-actions {
  margin-top: 0;
  display: flex;
  flex-direction: column;    /* stacked (matches old Nutrition Free screenshot):
                                 nutrition info button ON TOP, then 加入 button BELOW.
                                 Control regime has only the 加入 button → still works. */
  gap: 8px;
  align-items: flex-start;
}

/* --- Nutrition Free secondary button (NOT a primary action) ---
   Visual weight strictly below 加入 (the solid blue button).
   Mirrors old Nutrition Free screenshot "查看营养信息" button. */
/* --- Phase 1.9c: Unified lightweight on-demand text entry --------------
 * Replaces the old 3 capsule buttons (dp-nutrition-info-btn /
 * dp-carbon-info-btn / dp-delivery-info-btn) with a single shared low-
 * prominence visual language: transparent/ultra-weak background, no or
 * ultra-weak border, muted neutral blue-gray, reasonable padding hitbox,
 * thin chevron arrow.  Applies equally to:
 *   • Free  Nutrition / Carbon  on-demand info entry  (fold → expand)
 *   • Low/High Nutrition / Carbon on-demand info entry (+ price tag)
 *   • Space Delivery on-demand entry (配送信息 folded / expanded)
 *
 * Structural business rules (NOT CHANGED per spec §8):
 *   • dp-nutrition-info-btn class still present → existing toggle +
 *     unlock/fee/方案C listener bindings unchanged.
 *   • dp-carbon-info-btn   class still present → existing listeners
 *     unchanged.
 *   • dp-delivery-info-btn class still present → existing Space-only
 *     toggle (with regime guard inside) + delivery_info_open/close events
 *     unchanged.
 *   • Both / Control regimes continue to render zero on-demand entries
 *     (spec §6 — secondaryButtonHtml = "" already on those paths).
 */
.dp-on-demand-text-btn {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  padding: 5px 10px 5px 6px;   /* reasonable click hitbox, not a huge capsule */
  border: none;
  border-radius: 6px;
  background: transparent;
  color: #1F2937;             /* near-black, core anchor visual weight */
  font-size: 15px;
  font-weight: 500;
  line-height: 1.35;
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
  /* keep hitbox crisp without heavy border; use mild hover tint. */
  transition: background .15s ease, color .15s ease, fill .15s ease;
}
.dp-on-demand-text-btn:hover {
  background: #F1F4FA;
  color: #3F4B68;
}
.dp-on-demand-text-btn:active {
  background: #E6ECF6;
}
/* Expanded / "收起" state: very subtle tint so user can see which entries
 * have been revealed; still stays secondary vs 加入 / the info panels. */
.dp-on-demand-text-btn.is-open {
  background: #F1F4FA;
  color: #3F4B68;
}
/* Inner semantic spans (label · action · [price] · chevron).  Using spans
 * instead of plain text keeps individual hover / emphasis easy without
 * behavioural coupling. */
.dp-on-demand-text-btn .dp-od-label {
  color: inherit;
  font-weight: 500;
}
.dp-on-demand-text-btn .dp-od-dot {
  color: #B0B8CD;
  font-weight: 500;
  margin: 0 1px;
}
.dp-on-demand-text-btn .dp-od-action {
  color: inherit;
  font-weight: 500;
  margin-right: 1px;
}
/* Price — Low/High on-demand info only.
 * Spec §5 explicitly demands price clarity; keep crisp + semibold. */
.dp-on-demand-text-btn .dp-od-price,
.dp-info-price-tag {
  color: #2F4F9E;
  font-weight: 600;
  font-size: 12.5px;
  letter-spacing: 0;
  white-space: nowrap;
  display: inline-flex;
  align-items: baseline;
}
/* Chevron arrows — folded: right ›  /  expanded (收起): left ‹ */
.dp-on-demand-text-btn .dp-od-chevron {
  color: #8D98B5;
  font-size: 14px;
  line-height: 1;
  margin-left: 3px;
  transform: translateY(1px);
  transition: color .15s ease, transform .15s ease;
}
.dp-on-demand-text-btn:hover .dp-od-chevron {
  color: #5B6A8B;
}
.dp-on-demand-text-btn .dp-od-chevron-left {
  /* 收起 arrow points the other way; keep same overall scale. */
  margin-left: 4px;
  margin-right: 0;
}

/* Legacy per-family class selectors kept for backwards compatibility.  New
 * visual weight is driven by .dp-on-demand-text-btn above; these only
 * exist so that existing CSS specificity hooks / future overrides still
 * work, and so older stub selectors continue to match. */
.dp-nutrition-info-btn { /* unified by base .dp-on-demand-text-btn */ }
.dp-carbon-info-btn    { /* unified by base .dp-on-demand-text-btn */ }
.dp-delivery-info-btn  { /* unified by base .dp-on-demand-text-btn */ }

/* Phase 1.19 final two-issue fix #1: domain collapsed-entry optical match.
 * STRICTLY SCOPED to Nutrition/Carbon on-demand DOMAIN info buttons ONLY,
 * closed / not-yet-unlocked state (:not(.is-open)).
 *
 * EXPLICITLY EXCLUDED from this rule (hence untouched):
 *   - .dp-delivery-info-btn   → Space delivery folded entry (§3 / §9 check 7)
 *   - .dp-od-inline-slot      → Layered detail inline CTA (§3)
 *   - :is-open / .is-open     → Expanded "收起" grey state (§4 / §9 check 8)
 *   - .dp-od-price            → Low/High info-fee tag (§14 last round)
 *
 * Goal: collapsed Nutrition/Carbon entry visually ≈ Delivery row ≈ Product Price
 * (same salience, natural baseline, no shrinking / no offset).
 * Sequence per §2 user priority:
 *   (1) font-family reset (UA button != document body)
 *   (2) appearance/line-height/alignment reset for button-box baseline
 *   (3) +0.5px optical correction because an inline-flex button with
 *       chevron child renders smaller to the eye than a plain <div> at
 *       the same declared 15px.  Kept STRICTLY below product title 16px.
 *
 * ---- Phase 1.19 follow-up micro-fix: geometric alignment final ----
 * Horizontal: redistribute horizontal padding while keeping button box
 *   position + total width + clickable rect exactly unchanged:
 *   padding-left:  6 ->  0   (visible text left edge now flush with
 *                             Delivery / Product Price 0-offset)
 *   padding-right: 10 -> 16   (total horizontal padding = 16px still,
 *                             so inline-flex border-box width = same;
 *                             clickable rect width unchanged)
 * Vertical: match Delivery line-height exactly while keeping total button
 *   height (hence clickable area height) completely unchanged:
 *   line-height:        1.5      (= 15.5 * 1.5 = 23.25px) -> 20.25px exact
 *   padding-top:          5  ->  6.5
 *   padding-bottom:       5  ->  6.5
 *   Total height = 20.25 + 6.5 + 6.5 = 33.25px unchanged (was 23.25+5+5)
 *
 * align-items: center RETAINED (no cross-axis change to chevron).
 * font-size 15.5px RETAINED.
 * appearance:none / font-family docroot stack RETAINED. */
.dp-on-demand-text-btn.dp-nutrition-info-btn:not(.is-open),
.dp-on-demand-text-btn.dp-carbon-info-btn:not(.is-open) {
  /* (1) font family inheritance forced to doc-root stack; defeat UA
   *     "-apple-system-button" that makes buttons render a different face. */
  -webkit-appearance: none;
  appearance: none;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
               "Helvetica Neue", Arial, "PingFang SC", "Microsoft YaHei",
               sans-serif;
  /* (2) align + lh reset so text-baseline of the whole inline-flex
   *     container sits naturally next to surrounding plain-text siblings.
   *     align-items:center stops the 14px chevron (translateY 1px) from
   *     pulling the whole row's cross-axis down by 1px.
   *     line-height: 20.25px  EXACT MATCH vs Delivery row
   *     (Delivery = 15px * 1.35 = 20.25px).
   *     vertical-align: baseline  keeps container on the text baseline
   *     of its enclosing flex row. */
  align-items: center;
  line-height: 20.25px;
  vertical-align: baseline;
  /* (3) optical size parity.  15 -> 15.5 (+0.5px only); still < title 16px.
   *     RETAINED (not touched in geometric follow-up per user §I-C). */
  font-size: 15.5px;
  font-weight: 500;
  /* (4) geometric redistribution ONLY for closed domain entry:
   *       pl 0 + pr 16  =  16 total (was pl 6 + pr 10 — same sum)
   *       pt 6.5 + pb 6.5 = 13 total vertical padding
   *     Net effect:
   *       visible glyphs left edge = button-box left edge + pl = 0px,
   *       matching Delivery / Product Price 0-padding plain text.
   *       Overall button rect: LEFT / WIDTH / HEIGHT completely unchanged
   *       (same inline-flex border-box; same clickable area size/pos). */
  padding-left: 0px;
  padding-right: 16px;
  padding-top: 6.5px;
  padding-bottom: 6.5px;
}

/* (the 加入 / 已加入 primary button is kept exactly as-is below) */

/* Blue rounded "加入 / 已加入" button, screenshot-like */
.dp-join-btn {
  min-width: 138px;
  border: none;
  border-radius: 999px;
  padding: 8px 22px;
  background: #2F6BFF;
  color: #FFFFFF;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background .15s ease, transform .05s ease;
}
.dp-join-btn:hover { background: #1F59F0; }
.dp-join-btn:active { transform: translateY(1px); }
.dp-join-btn.is-joined {
  background: #0F3FAE;   /* darker blue when already selected */
}
.dp-join-btn.is-joined::before {
  content: "✓ ";
  opacity: 0.9;
}

/* --- Expanded in-card nutrition info block (Nutrition Free: 热量/脂肪/钠 3D) ---
   Rendered inside dp-product-info-area (reserved placeholder).
   Inline expand — stays on the menu page, no modal. 3 columns equal width.
   (Old 4D 2x2 layout was retired when "糖" was removed per spec §1.) */
.dp-nutrition-expand {
  margin-top: 8px;
  padding: 11px 12px;
  border-radius: 12px;
  background: #F4F8FF;
  border: 1px solid #DCE5FF;
  display: grid;
  /* Three equal-width columns; each has its own vertical stack of
     [label + value/unit] so all 3 metrics have identical visual weight. */
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 4px 12px;
  font-size: 13px;
  /* Phase 1.11.2 §II: keep the disclosure always fits the product card;
     padding must be counted inside width (never bleed outside). */
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}
/* Each metric occupies ONE column; dot+label on top row, value on bottom row.
   This keeps three items horizontally aligned with equal weight (no 4th empty). */
.dp-nutri-cell {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  grid-row: 1;            /* all 3 metric labels share the first row */
}
.dp-nutri-cell-val {
  /* Second row: value/unit placed directly below its label/metric column.
     Uses same col-start trick in JS DOM (nth-child offset) or nested sub-divs.
     We use a simpler layout: flex-column per column (see below). */
  grid-row: 2;
  display: flex;
  align-items: baseline;
  gap: 4px;
  min-width: 0;
  padding-left: 15px;    /* indent under dot+label above (9+6gap) */
}
/* Actually simpler & more robust: render each 3-column as a 1-column
   flex-stack (<div class="dp-nutri-stack"> + labelLine + valueLine),
   so the row stays perfectly equal weight even with long value strings. */
.dp-nutri-stack {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}
.dp-nutri-stack-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #5B6A8A;
  font-weight: 500;
  font-size: 12.5px;
}
.dp-nutri-stack-value {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  padding-left: 15px;    /* horizontally under the label line (skip 9dot+6gap) */
}
.dp-nutri-stack-value .dp-nutri-value {
  font-size: 15px;       /* slightly larger values for readability vs old 13px */
  color: #1F2937;
  font-weight: 700;
}
.dp-nutri-stack-value .dp-nutri-unit {
  font-size: 12.5px;
  color: #5B6A8A;
  font-weight: 500;
}

.dp-nutri-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  flex-shrink: 0;
  /* TEMP levels only — not frozen formal thresholds. Kept as CSS vars so core
     logic never hard-codes thresholds. JS assigns .dp-nutri-level-LOW/MED/HIGH. */
  background: #98A3C0;
}
.dp-nutri-level-LOW  { background: #22A06B; }   /* TEMP green placeholder */
.dp-nutri-level-MED  { background: #D97706; }   /* TEMP yellow placeholder */
.dp-nutri-level-HIGH { background: #B91C1C; }   /* TEMP red placeholder */
/* Legacy classes retained in case old JS code paths still reference them;
   kept harmless so future regimes can reuse the same label/value vocabulary. */
.dp-nutri-label {
  color: #5B6A8A;
  font-weight: 500;
  flex-shrink: 0;
}
.dp-nutri-value {
  color: #1F2937;
  font-weight: 700;
  margin-left: auto;   /* (unused in flex-stack, kept for compatibility) */
  flex-shrink: 0;
  text-align: right;
}

/* --- Expanded in-card CARBON info block (Carbon Free: 碳等级 + kg CO₂e/份) ---
   Same inline-expand pattern as nutrition, same neutral tint, so the two
   domains share one common visual language (spec §III: no "green eco" tint).
   Single horizontal metric: [levelDot + levelText on left | kg CO₂e value right] */
.dp-carbon-expand {
  margin-top: 8px;
  padding: 11px 14px;
  border-radius: 12px;
  background: #F4F8FF;          /* same neutral pale blue as dp-nutrition-expand */
  border: 1px solid #DCE5FF;    /* same neutral blue border as nutrition */
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-size: 13px;
  /* Phase 1.11.2 §II: same containment as nutrition — never stretch outside
     the parent product card regardless of inner content width. */
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}
.dp-carbon-left {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.dp-carbon-level-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
  /* Same 3-tier color scheme as nutrition — LOW=green, MED=amber, HIGH=red.
     TEMP only; actual carbon thresholds not frozen. */
  background: #98A3C0;
}
.dp-carbon-level-LOW  { background: #22A06B; }
.dp-carbon-level-MED  { background: #D97706; }
.dp-carbon-level-HIGH { background: #B91C1C; }
.dp-carbon-level-text {
  font-weight: 600;
  color: #1F2937;
  font-size: 13.5px;
}
.dp-carbon-right {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  flex-shrink: 0;
}
.dp-carbon-value {
  font-size: 16px;
  font-weight: 800;
  color: #1F2937;
}
.dp-carbon-unit {
  font-size: 12.5px;
  color: #5B6A8A;
  font-weight: 500;
}

/* =================================================================
   RIGHT-HAND ORDER SUMMARY COLUMN
   ================================================================= */
.dp-order-summary {
  background: #FFFFFF;
  border: 1px solid #E6ECF5;
  border-radius: 18px;
  padding: 18px 18px 20px;
  box-shadow: 0 2px 10px rgba(37, 56, 104, 0.04);
  width: 100%;
  max-width: 100%;
  min-width: 0;
}

.dp-order-summary-title {
  font-size: 22px;
  font-weight: 800;
  color: #1F2937;
  margin: 2px 0 14px;
}
.dp-order-selected-box {
  background: #F9FBFF;
  border: 1px solid #E7EEFA;
  border-radius: 14px;
  padding: 10px 12px;
  min-height: 58px;
  width: 100%;
  max-width: 100%;
  min-width: 0;
}
.dp-order-selected-empty {
  color: #7A86A5;
  font-size: 14px;
  font-weight: 500;
  padding: 6px 2px;
}
.dp-order-selected-outside-active {
  border-radius: 10px;
  background: #EEF3FF;
  border: 1px solid #2F6BFF;
  padding: 10px 12px;
}
.dp-order-outside-label {
  color: #0F3FAE;
  font-weight: 700;
  font-size: 14px;
}
.dp-order-outside-sub {
  color: #5B6A8A;
  font-size: 12.5px;
  margin-top: 4px;
}
.dp-order-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 10px;
  padding: 6px 2px;
  border-bottom: 1px dashed #EEF2FA;
}
.dp-order-item:last-child { border-bottom: none; }
.dp-order-item-name {
  color: #1F2937;
  font-weight: 600;
  font-size: 13.5px;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.dp-order-item-price {
  color: #1F2937;           /* Phase 1.19 fix #2: neutral near-black; was red #B91C1C */
  font-weight: 700;
  font-size: 13.5px;
}
.dp-order-item-remove {
  border: none;
  background: transparent;
  color: #98A3C0;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.dp-order-item-remove:hover {
  background: #EFF3FB;
  color: #3A4B6D;
}

/* --- price rows (食品小计 / 订单合计) ---
   NOTE: Control intentionally has no "information service fee" rows,
   not even a ¥0 placeholder. Only 2 rows per Control spec. */
.dp-order-price-rows {
  margin-top: 14px;
  padding: 10px 12px;
  background: #FAFCFF;
  border: 1px solid #E7EEFA;
  border-radius: 14px;
  width: 100%;
  max-width: 100%;
  min-width: 0;
}
.dp-order-price-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 5px 0;
}
.dp-order-price-row + .dp-order-price-row { border-top: 1px dashed #EEF2FA; }
.dp-order-price-row-muted .dp-order-price-label,
.dp-order-price-row-muted .dp-order-price-value {
  color: #98A3C0;
}
.dp-order-price-label {
  color: #5B6A8A;
  font-size: 13.5px;
}
.dp-order-price-value {
  color: #1F2937;
  font-weight: 600;
  font-size: 14px;
}
.dp-order-total-row {
  padding-top: 10px;
  margin-top: 2px;
  border-top: 1.5px solid #E7EEFA !important;
}
.dp-order-total-row .dp-order-price-label {
  font-weight: 700;
  color: #1F2937;
  font-size: 14px;
}
.dp-order-total-value {
  color: #1F2937;           /* Phase 1.19 fix #2: neutral near-black; was red #B91C1C.
                               Bold tier (font-weight:800, font-size:17px) preserved per §7. */
  font-size: 17px;
  font-weight: 800;
}

/* --- 方案C Info-Fee collapsible block (Low/High ONLY) ---
   All classes below are participant-facing billing language (spec §15:
   信息查看费 / 查看明细 — no internal research jargon like "信息篮子").

   Visual layering goal (spec §17):
     - Food basket items = primary editable basket.
     - 食品小计 / 信息查看费 / 订单合计 = three clearly separated tiers.
     - Fee detail list = tertiary ("弱但可识别"): not greyed out to the
       point of illegibility, but definitely not a second shopping basket.
   Never red / never green — always neutral cool blue-grey (spec §4). */
.dp-fee-details-toggle-row {
  display: flex;
  justify-content: flex-end;
  padding: 1px 2px 4px;
  min-width: 0;
}
.dp-fee-details-toggle {
  border: none;
  background: transparent;
  color: #5B6A8A;
  font-size: 12.5px;
  font-weight: 500;
  cursor: pointer;
  padding: 2px 6px;
  border-radius: 6px;
  letter-spacing: 0.01em;
}
.dp-fee-details-toggle:hover {
  background: #EEF3FF;
  color: #2F4F9E;
}
.dp-fee-details-list {
  background: #F7FAFF;
  border: 1px dashed #DCE5FF;
  border-radius: 10px;
  padding: 6px 10px;
  margin: 1px 0 6px;
  width: 100%;
  max-width: 100%;
  min-width: 0;
}
.dp-fee-details-item {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 4px 2px;
  gap: 8px;
  min-width: 0;
}
.dp-fee-details-item + .dp-fee-details-item {
  border-top: 1px dashed #E7EEFA;
}
.dp-fee-details-name {
  color: #4B5A7D;
  font-size: 12.5px;
  font-weight: 500;
  flex: 1 1 auto;
  min-width: 0;
  max-width: 100%;
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-word;
}
.dp-fee-details-fee {
  color: #3E5A9E;
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  flex: 0 0 auto;
}

/* Outside option block — two-level decision layout:
   (1) short hint line ("若您本轮不想购买任何商品：")
   (2) secondary outlined action button (NOT a solid blue primary button)
   Visual weight: discoverable but below the primary confirm button.
   Unselected: white bg + blue-gray solid outline + hollow circle glyph on left.
   Selected  : light-blue bg + solid blue border + filled checkmark on left. */
.dp-outside-decision-wrap {
  margin-top: 18px;              /* spacing vs price rows above */
}
.dp-outside-hint {
  font-size: 12.5px;
  color: #5B6A8A;
  font-weight: 500;
  margin: 0 2px 8px;             /* small gap between hint and outside button */
  letter-spacing: 0.01em;
}
.dp-outside-option-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  border: 1.5px solid #AAB7D6;       /* blue-gray solid stroke (not disabled gray) */
  border-radius: 12px;
  padding: 11px 14px;
  background: #FFFFFF;                /* white / very light bg */
  color: #2F3B5A;                     /* deep dark text */
  font-size: 14px;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
  transition: background .15s ease, color .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.dp-outside-option-btn:hover {
  background: #F4F8FF;
  border-color: #2F6BFF;
  color: #1E3A8A;
}
.dp-outside-glyph {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  font-size: 15px;
  line-height: 1;
  color: #6B7AA0;
  flex-shrink: 0;
}
.dp-outside-text {
  flex: 1 1 auto;
  min-width: 0;
  overflow-wrap: anywhere;
}

/* Selected state: ✓ + light-blue bg + solid blue border */
.dp-outside-option-btn.is-outside {
  background: #EEF3FF;
  border: 1.5px solid #2F6BFF;
  color: #0F3FAE;
  box-shadow: 0 0 0 2px rgba(47, 107, 255, 0.06);
}
.dp-outside-option-btn.is-outside .dp-outside-glyph { color: #0F3FAE; }

/* Submit button (order summary). Default = disabled (gray), only enable when:
   - user selected >=1 product, OR
   - user explicitly toggled the outside-option row */
.dp-submit-btn {
  display: block;
  width: 100%;
  margin-top: 14px;
  border: none;
  border-radius: 14px;
  padding: 14px 18px;
  background: #C8D2DF;
  color: #FFFFFF;
  font-size: 16px;
  font-weight: 700;
  cursor: not-allowed;
  transition: background .15s ease, cursor .15s ease;
}
.dp-submit-btn:not(.is-disabled) {
  background: #2F6BFF;
  cursor: pointer;
}
.dp-submit-btn:not(.is-disabled):hover { background: #1F59F0; }
.dp-submit-btn.is-disabled {
  background: #C8D2DF;
  cursor: not-allowed;
}

/* =================================================================
   TRANSITION PHASE (P1 → P2) — lightweight card only
   ================================================================= */
.dp-transition-phase {
  max-width: 820px;
  margin: 0 auto;
  padding: 32px 24px 80px;
}
.dp-transition-card {
  background: #FFFFFF;
  border: 1px solid #E6ECF5;
  border-radius: 18px;
  padding: 44px 32px 36px;
  text-align: center;
  box-shadow: 0 6px 24px rgba(37, 56, 104, 0.06);
}
.dp-transition-title {
  font-size: 26px;
  font-weight: 800;
  color: #1E3A8A;
  margin-bottom: 14px;
}
.dp-transition-body {
  color: #3A4B6D;
  font-size: 15px;
  line-height: 1.75;
  margin: 0 0 28px;
}
.dp-continue-btn {
  border: none;
  border-radius: 14px;
  padding: 12px 40px;
  background: #2F6BFF;
  color: #FFFFFF;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
}
.dp-continue-btn:hover { background: #1F59F0; }

/* =================================================================
   FINAL DEBUG RESULT PAGE (LOCAL ONLY, same as Phase 1 because
   this page is intentionally NOT shown to participants)
   ================================================================= */
.dp-result-phase {
  max-width: 1200px;
  margin: 0 auto 48px;
  padding: 20px 24px;
}
.dp-result-header {
  padding: 14px 18px;
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  margin-bottom: 16px;
}
.dp-result-title {
  font-weight: 800;
  font-size: 17px;
  color: #1d4ed8;
}
.dp-result-sub {
  margin-top: 6px;
  color: #4b5563;
  font-size: 13px;
}
.dp-session-meta {
  margin-top: 10px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12px;
  color: #6b7280;
  background: #F3F4F6;
  padding: 8px 12px;
  border: 1px solid #E5E7EB;
  border-radius: 8px;
  white-space: pre-wrap;
  max-width: 100%;
  overflow-x: auto;
}

.dp-result-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  margin-bottom: 18px;
}
@media (max-width: 720px) {
  .dp-result-grid { grid-template-columns: 1fr; }
}
.dp-period-result {
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  padding: 16px;
}
.dp-period-result-title {
  font-weight: 700;
  color: #111827;
  margin-bottom: 10px;
}
.dp-period-result-table {
  width: 100%;
  border-collapse: collapse;
}
.dp-period-result-table td {
  padding: 6px 10px;
  border-bottom: 1px dashed #e5e7eb;
  font-size: 13px;
  vertical-align: top;
}
.dp-k {
  width: 42%;
  color: #6b7280;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
.dp-v {
  color: #111827;
  word-break: break-all;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
.dp-session-result {
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  padding: 16px;
  margin-bottom: 18px;
}
.dp-session-result-title {
  font-weight: 700;
  margin-bottom: 10px;
  color: #111827;
}
.dp-event-log-box {
  background: #0f172a;
  color: #e5e7eb;
  border-radius: 12px;
  padding: 16px;
  margin-bottom: 18px;
}
.dp-event-log-title {
  font-weight: 700;
  color: #fbbf24;
  margin-bottom: 10px;
}
.dp-event-log {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12px;
  line-height: 1.7;
  max-height: 360px;
  overflow: auto;
  white-space: pre-wrap;
}
.dp-event-row { white-space: nowrap; }

.dp-actions-row {
  display: flex;
  justify-content: flex-end;
}
.dp-secondary-btn {
  border: 1px solid #d1d5db;
  border-radius: 10px;
  padding: 10px 16px;
  background: #ffffff;
  color: #111827;
  font-weight: 600;
  cursor: pointer;
}
.dp-secondary-btn:hover { background: #f3f4f6; }

/* =================================================================
   Phase 1.10 Layered — Summary-only compact shells (§V / §XI).
   The goal is to truly reclaim vertical/horizontal space that the
   full shells occupy; hidden detail metrics must NOT keep equal-size
   placeholder blanks (visibility:hidden equivalent is forbidden).
   ================================================================= */
/* Nutrition summary-only modifier:
   Full shell uses 3 equal columns for 热量|脂肪|钠.  Here we collapse
   the grid to a SINGLE column (fit-content so no trailing blank cells
   for fat / sodium are retained) and slightly reduce inner padding to
   form a genuinely compact calories-only chip.  Typography, dot, cell
   stacks remain identical so users see the same 热量 visual language
   they'd recognise from the full Both shell. */
.dp-nutrition-expand-summary {
  grid-template-columns: minmax(0, auto) !important;
  padding: 8px 10px !important;
  display: inline-grid !important;
  width: auto;
  gap: 3px 10px;
  /* Phase 1.11.2 §III: allow the summary to grow to fill the Layered
     wrapper's left half but never force the CTA button outside the
     card (flex-shrink keeps the CTA's nowrap intact). */
  flex: 1 1 auto;
  min-width: 0;
  max-width: 72%;
  box-sizing: border-box;
}
/* Carbon summary-only modifier:
   Full shell is a row flex with justify-content:space-between so the
   level/等级 sits on the left and the exact kg CO₂e value sits on
   the right.  In Layered summary mode we render ONLY the left half
   (the level dot + 低/中等/高 text) in the DOM tree; this override
   collapses the wrapper width to fit-content, flips space-between to
   flex-start (redundant with 1 child, but explicit guard), and uses
   inline-flex so the panel truly shrinks instead of keeping the full
   card-width background.  No equal-width blank placeholder remains
   where .dp-carbon-right would have been (§XI explicit requirement). */
.dp-carbon-expand-summary {
  justify-content: flex-start !important;
  display: inline-flex !important;
  width: auto !important;
  padding: 8px 10px !important;
  /* Phase 1.11.2 §III: mirror the nutrition summary fix — let the
     summary take the left side of the Layered wrapper flex host,
     never push the CTA button outside the product card. */
  flex: 1 1 auto;
  min-width: 0;
  max-width: 72%;
  box-sizing: border-box;
}

/* =================================================================
   Phase 1.10c — Layered "summary + more-info exists" integrated
   visual module wrappers.

   Research intent (§II / §V): Layered must clearly read as "the
   summary/core is exposed by default AND more detailed information
   is freely available on demand" — not "the platform only shows
   calories / level and hides everything else".

   Structural rule: same neutral pale-blue frame (matching the
   Both/Space full-shell family) so the summary chip and the
   "查看更多XX信息" CTA visually belong to one single info
   container.  The wrapper still stays visibly more compact than
   Both's full 3-metric / 2-value shell because:
     - Nutrition: no fat / sodium grid cells are in the DOM
     - Carbon:    no exact kg CO₂e right-hand cell is in the DOM
     - Inner padding slightly reduced vs the full expand shell.

   Zero impact on other regimes (§X):
     - .dp-layered-nutrition-module  only exists inside layeredMode
     - .dp-layered-carbon-module     only exists inside layeredMode
     - .dp-od-inline-slot            modifier on the inline button
       (not used by Free / Low / High / Space on-demand entries).
   ================================================================= */

/* (1) Wrapper: single visual frame for summary + CTA.
       Same background/border as dp-nutrition-expand / dp-carbon-expand
       for visual family consistency; slightly smaller padding to
       keep the collapsed module tighter than the Both full shell. */
.dp-layered-nutrition-module,
.dp-layered-carbon-module {
  margin-top: 8px;
  padding: 9px 12px;
  border-radius: 12px;
  background: #F4F8FF;
  border: 1px solid #DCE5FF;
  display: flex;
  /* Phase 1.11.3 §4: CTA MUST NOT depend on horizontal space.
     Replace the old space-between + nowrap anchor with a wrap-
     enabled flow that lets the CTA fall to its own row whenever
     the card body is too narrow.  align-items:flex-start means
     the summary keeps its baseline alignment on the top row,
     and the CTA aligns naturally below when wrapped. */
  align-items: flex-start;
  justify-content: flex-start;
  flex-wrap: wrap;
  gap: 8px 12px;
  width: 100%;
  box-sizing: border-box;
  /* Phase 1.11.2 §III: never let the inline summary + CTA pair escape
     the product card (CTA white-space:nowrap can previously push
     content 14-20px outside the card's right border, visually merge
     into the neighbouring card). */
  overflow: hidden;
  max-width: 100%;
}

/* (2) Nested summary chip — strip its independent frame because the
       outer wrapper now provides the single visual frame.
       This avoids a "frame inside a frame" double-border look and
       keeps the default module genuinely compact (§II / §V / §XI). */
.dp-layered-nutrition-module > .dp-nutrition-expand-summary,
.dp-layered-carbon-module   > .dp-carbon-expand-summary {
  margin-top: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  /* Retain summary chip's native grid/flex layout so values, dots
     and label stacks look identical to what users recognise from
     the Both full shell — just without the extra metrics. */
  box-shadow: none !important;
  /* Phase 1.11.3 §4: allow the summary to grow on its row so it
     anchors LEFT, and the CTA button sits RIGHT on the same row
     when there IS space; when there isn't, flex-wrap:wrap on the
     host + the chip's flex-basis:160px ensures it takes enough
     width for "1350毫克 ●高" before the CTA "naturally" moves to
     its own line (no calc() hacks, no overflow:hidden-drift). */
  flex: 1 1 160px;
  min-width: 0;
  max-width: 100%;
}

/* (3) Inline "查看更多XX信息 ›" button slot.
       Reuses the family base class .dp-on-demand-text-btn (so same
       typography / colour / chevron / hitbox semantics) but strips
       the independent background padding so the click target lives
       cleanly inside the wrapper frame (no secondary box shadow).
       Hover keeps a very subtle tint — same colour family as 1.9c
       base, just lower alpha to avoid competing with the 加入 CTA. */
.dp-on-demand-text-btn.dp-od-inline-slot {
  /* Phase 1.11.4 §2: reduce CTA's intrinsic horizontal footprint
     so the button fits on one row with a wider range of narrow
     summary chips (e.g. Layered 1-row 热量-only summary on a
     small-portioned drink card).  Shrink only inline padding and
     font-size 0.5px; click hitbox is still generous (14–34px × 22+).
     ALLOWED per Phase 1.11.4's parameter list:
       padding / font-size / line-height / flex-shrink / max-width. */
  padding: 4px 8px 5px;
  /* Phase 1.11.4 §2: font-size 12.5 → 12.0px.  For the inline CTA
     "查看更多营养信息 ›" this reduces intrinsic width by ~4–5px,
     which is exactly the margin needed to coexist on the same row
     with a 170px summary chip (≈ drinks cards) before flex-wrap
     pushes the CTA to its own row. */
  font-size: 12px;
  line-height: 1.38;
  background: transparent !important;
  border: none !important;
  /* Phase 1.11.3 §4: CTA is anchored to the RIGHT of its row on
     wide cards but wraps fully to its OWN line on narrow cards.
     - margin-left:auto: on same row → pushes button to far R
     - flex-shrink: 1 lets the button give up 3–5px of horizontal
       space as a LAST RESORT before flex-wrap kicks in.
     - flex-basis: auto keeps intrinsic button width.
     - flex-grow is intentionally 0 so it does NOT push the summary
       off-screen when both are narrow enough to share ONE row. */
  margin-left: auto;
  flex: 0 1 auto;
  min-width: max-content;       /* Phase 1.11.4 §2: NEVER clip Chinese "查看更多…" glyphs. */
  max-width: 100%;
  overflow: visible;
  /* Keep hitbox generous (§1.9c frozen hitbox rule); inline-slot
     grows cursor priority on hover but never visually louder than
     the wrapper. */
  box-sizing: border-box;
}
/* Phase 1.11.4 §2: After wrap → the CTA becomes the ONLY flex item
   on the wrapped row.  Use :last-of-type (CTA always rendered after
   the summary in DOM) + a simple max-width trigger combined with
   100% wrapper logic: in wrapped position, flex-grow: 0 is OK, but
   we explicitly let min-width relax to max-content (already set)
   while keeping the button pinned to the RIGHT via margin-left:auto.
   No additional selector override needed. */

.dp-on-demand-text-btn.dp-od-inline-slot:hover {
  background: rgba(34, 68, 153, 0.05) !important;
  border-radius: 6px;
}
.dp-on-demand-text-btn.dp-od-inline-slot:active {
  background: rgba(34, 68, 153, 0.10) !important;
}

/* =================================================================
   Phase 1.11 — Domain Intro + Comprehension UI shell (§VIII).
   Frozen principle: do NOT invent a new visual style — reuse the
   prototype's existing family:
     - Neutral blue-grey palette (exactly the same as dp-nutrition-expand
       / dp-carbon-expand / dp-order-summary — #F4F8FF / #DCE5FF borders,
       12px rounded cards, 13-15px body size).
     - Primary action buttons = .dp-continue-btn (frozen Transition phase
       button family) so Intro Continue and Comprehension Submit visually
       match the existing 加入 / Confirm 权重.
     - Strictly NO: green "eco" tint, red "warning" tint, green "healthy"
       tint.  All feedback pills are the SAME neutral blue family as the
       panels themselves (§VIII explicit requirement).
   ================================================================= */

/* (1) Phase container — same overall width/centering grid as dp-menu-phase
       so participants don't experience a "page jump" between Intro → Menu. */
.dp-domain-intro-phase {
  padding: 40px 48px 80px;
  box-sizing: border-box;
}
/* Round chip that mirrors the menu-phase chip — same position + style. */
.dp-domain-intro-round-chip {
  margin: 0 auto 24px;
  max-width: 1040px;
}

/* (2) Generic inner slot — holds the per-domain Intro card or the
       Comprehension 2-question card list. */
.dp-domain-intro-slot {
  max-width: 900px;
  margin: 0 auto;
}

/* (3) Shared container wrapper (Intro + Comprehension use this so the
       page frame is 1:1 visually between the two stages). */
.dp-di-container {
  background: #FFFFFF;
  border: 1px solid #E0E6F2;
  border-radius: 14px;
  padding: 32px 40px;
  box-sizing: border-box;
}
.dp-di-title-block {
  margin-bottom: 24px;
}
.dp-di-title {
  margin: 0 0 14px;
  font-size: 22px;
  font-weight: 600;
  color: #2C3550;
  letter-spacing: 0;
}
.dp-di-body {
  margin: 0 0 8px;
  font-size: 14px;
  line-height: 1.65;
  color: #455172;
}
.dp-di-body:last-child { margin-bottom: 0; }

/* (4) Example Card (§III / §V): visually matches the product-card's
       info-shell family (same pale blue background + 1px blue border)
       so the example reads as "what you will see later inside the real
       product cards", not as a standalone ad-hoc panel. */
.dp-di-example-card {
  margin: 4px 0 28px;
  padding: 18px 22px;
  border-radius: 12px;
  background: #F7FAFF;
  border: 1px solid #DFE6F6;
}
.dp-di-example-title {
  font-size: 15px;
  font-weight: 600;
  color: #37415F;
  margin-bottom: 6px;
}
.dp-di-example-subtitle {
  font-size: 13px;
  color: #697698;
  margin-bottom: 14px;
}
/* Nested expand shells inside the example card.  They inherit the base
   dp-nutrition-expand / dp-carbon-expand grid and flex layouts but we
   strip margin-top (because the example card provides outer spacing)
   and slightly tone down the background (example sits on top of an
   already pale wrapper — a second #F4F8FF layer would read as "double
   emphasis" and cause visual drift from the neutral rule). */
.dp-di-example-nutr {
  margin-top: 0 !important;
  background: transparent !important;
  border: none !important;
  padding: 0 0 6px !important;
}
.dp-di-example-carb {
  margin-top: 0 !important;
  background: transparent !important;
  border: none !important;
  padding: 2px 0 6px !important;
}
/* TEMP-only NRV + level-tag columns added to the Intro example so the
   spec §III 4-piece format (value|unit|%NRV|●level) renders.  The
   in-menu 3-column nutrition stack NEVER carries these (they are
   explicitly TEMP-Intro-only markers; the suffix "-temp" in class name
   is deliberate so future grep can safely delete when NRV spec frozen). */
.dp-di-nutri-nrv-temp {
  margin-left: 10px;
  color: #6C7797;
  font-size: 12.5px;
  font-weight: 500;
}
.dp-di-nutri-level-temp {
  margin-left: 10px;
  color: #4D597B;
  font-size: 12.5px;
  font-weight: 600;
}
.dp-di-example-caption {
  margin-top: 10px;
  font-size: 12.5px;
  color: #626F90;
  line-height: 1.6;
}

/* (5) Action rows (Intro Continue / Comp Submit → Enter basket).
       Centered right-aligned so the primary button sits on the same
       visual "corner" as the frozen 确认本轮选择 button. */
.dp-di-actions-row {
  margin-top: 26px;
  display: flex;
  justify-content: flex-end;
}
.dp-di-continue-btn {
  /* Inherit EXACTLY the .dp-continue-btn frozen shape/colour so the
     transition-phase Continue and Intro/Comp Continue are one family. */
  min-width: 160px;
}

/* (6) Comprehension question cards (§IV, §VI).
       Each question is its own sub-card with the same neutral blue
       1px border + 12px radius as the example card.  Questions are
       stacked vertically with moderate whitespace between them. */
.dp-comp-question-card {
  background: #FAFCFF;
  border: 1px solid #E2E8F6;
  border-radius: 12px;
  padding: 18px 22px 16px;
  margin-bottom: 18px;
  box-sizing: border-box;
}
.dp-comp-qhead {
  display: flex;
  gap: 10px;
  align-items: baseline;
  margin-bottom: 14px;
}
.dp-comp-qnum {
  font-size: 13px;
  font-weight: 600;
  color: #5A6789;
  background: #EEF3FD;
  border-radius: 6px;
  padding: 2px 8px 3px;
  letter-spacing: 0;
  white-space: nowrap;
}
.dp-comp-qstem {
  font-size: 14.5px;
  font-weight: 500;
  color: #2C3550;
  line-height: 1.55;
}
/* Radio options layout: vertical list. */
.dp-comp-options {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 2px 0 0;
}
.dp-comp-option {
  display: inline-flex;
  align-items: flex-start;
  gap: 10px;
  padding: 9px 12px;
  border-radius: 8px;
  border: 1px solid transparent;
  cursor: pointer;
  font-size: 14px;
  line-height: 1.5;
  color: #3C4668;
  transition: background .15s ease, border-color .15s ease;
}
.dp-comp-option:hover {
  background: #F3F6FE;
  border-color: #D6DEF1;
}
.dp-comp-option input[type="radio"] {
  margin-top: 3px;
  accent-color: #3558B8;
}
.dp-comp-option-k {
  min-width: 18px;
  font-weight: 600;
  color: #3F4B68;
  user-select: none;
}
.dp-comp-option-v {
  color: inherit;
}
/* After the user submits, radios are frozen (disabled) → a "locked"
   look on the option row so the page reads as "this stage is over,
   move on", not "edit your answer". */
.dp-comp-option.is-locked {
  cursor: default;
  background: transparent;
  border-color: transparent;
}
.dp-comp-option.is-locked:hover {
  background: transparent;
  border-color: transparent;
}

/* (7) Feedback pill for wrong answers (§IV / §VI).
       STRICTLY neutral blue — no red/yellow/green — to avoid
       accidentally signalling "the nutrition/carbon domain is bad /
       unhealthy / dangerous / ecological" (§VIII explicit rule). */
.dp-comp-feedback {
  margin-top: 14px;
  padding: 10px 14px;
  border-radius: 8px;
  background: #EEF3FD;
  border-left: 3px solid #5C78CB;
  color: #344065;
  font-size: 13.5px;
  line-height: 1.6;
}
.dp-comp-feedback-head {
  display: inline-block;
  font-weight: 600;
  color: #3F4F82;
  margin-right: 6px;
}
.dp-comp-feedback-body {
  display: inline;
  color: #3B4667;
}

/* =================================================================
   Phase 1.11.1 — Unified Traffic-Light info shell (Nutrition + Carbon).
   Shared 4-column grid reading order: label | value-unit | %NRV | ●level
   The SAME class family is used for BOTH domains so the two info
   panels are visually homologous (§IV explicit: Carbon mirrors
   Nutrition's reading direction and column order).
   ================================================================= */

/* Outer-wrapper modifier — applied alongside legacy
   .dp-nutrition-expand (3-column grid host for old dp-nutri-stack
   cells).  The modifier overrides the outer layout so that the
   container becomes a VERTICAL stack of `.dp-unified-nutri-row`
   rows; each row then provides its OWN 4-column grid.  The legacy
   base class is kept intact so all 20 frozen Phase 1.10 headless
   probes that grep for `.dp-nutrition-expand` continue to match 1:1. */
.dp-nutrition-expand-unified {
  display: flex;
  flex-direction: column;
  gap: 6px;
  grid-template-columns: none;   /* disable the legacy 3-col grid (L395) */
}

/* Carbon outer-wrapper modifier — parallel to the nutrition one above.
   Legacy .dp-carbon-expand (L493) was a space-between flex host for
   dp-carbon-left (●level) + dp-carbon-right (value).  The modifier
   drops the old "left/right justify" flex so the single inner
   dp-unified-nutri-row can stretch full-width and render its own
   4-column label|value|%NRV-empty|●level grid. */
.dp-nutrition-expand-unified {
  /* Phase 1.11.5 §1: rebalance 4-column density WITHOUT widening the
     level column (per explicit instruction).  Return right padding to
     the symmetrical 12px (same as left); the breathing room for the
     level cell now comes from:
       - tighter column-gap (12 → 8px),
       - smaller value 15 → 14px,
       - smaller NRV 12.5 → 12px,
       - smaller level-text 12.5 → 12.0px + level-cell padding-right 4→3
     All of which are in the Phase 1.11.5 explicit allow-list
     (font-size / gap / padding).  Grid structure (4 columns, order)
     is untouched. */
  padding: 11px 12px;
  display: block;
  justify-content: normal;
  align-items: stretch;
}

/* Phase 1.19 §C: compact basis label row (每100g / 每100ml).
   Small, muted gray text near the top-right of the nutrition panel;
   does not materially increase card height. */
.dp-unified-nutri-basis-row {
  display: flex;
  justify-content: flex-end;
  margin: 0 0 4px;
}
.dp-unified-nutri-basis-label {
  font-size: 11.5px;
  font-weight: 400;
  color: #7A86A5;
  letter-spacing: 0.1px;
}

/* Carbon outer-wrapper modifier — mirror nutrition-unified padding. */
.dp-carbon-expand-unified {
  padding: 11px 12px;
  display: block;
  justify-content: normal;
  align-items: stretch;
}

/* =================================================================
   Core unified 4-column row (PRODUCT CARD default).
   Goal (§1): on ANY product card, 4 columns render clearly:
     指标 | 数值+单位 | %NRV | ●等级
   NEVER collapse into "720千卡36.4%NRV" (value + NRV visually fused).
   Strategy:
     - label/value-unit/%NRV/●level all have MIN column widths so the
       grid cannot squeeze any column to zero.
     - column-gap ≥ 10px (physical whitespace between every cell) is
       the PRIMARY defence against visual fusion of value-unit + %NRV.
     - level column (●中) is fixed on the far right (§II explicit:
       等级放最右侧) — never compressed, value-unit/%NRV overflow
       cannot push level off-card.
   ================================================================= */
.dp-unified-nutri-row {
  display: grid;
  grid-template-columns:
    minmax(48px, 54px)               /* col1 — metric label ("热量"/"脂肪"/"钠"/"碳足迹") */
    minmax(56px, auto)               /* col2 — value + unit (auto grows, min protects) */
    minmax(62px, 70px)               /* col3 — %NRV (右对齐, 62px容纳"34.0%NRV") */
    minmax(54px, 60px);              /* col4 — ●level (Phase 1.11.5: DO NOT widen; keep original 54/60) */
  /* Phase 1.11.5 §1: column-gap COMPRESSED from 12 → 8px to reclaim
     horizontal room for the 4 cells together, instead of stealing it
     from the level column or pushing padding wider.  8px is still
     ≥ value-unit gap (4px) so value + NRV never visually fuse. */
  column-gap: 8px;
  row-gap: 6px;
  align-items: baseline;
  min-width: 0;
  /* 商品卡: 100% 宽度, 让 level 保持在最右侧 (§2 explicit: 等级放最右侧) */
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  /* Phase 1.11.5 §1: row base font 13 → 12.5px; individual value/NRV
     cells shrink further below to free space for the 4-column tuple
     without expanding any container. */
  font-size: 12.5px;
  line-height: 1.45;
}

/* --- col 1: metric label --- */
.dp-unified-nutri-label {
  color: #5B6A8A;
  font-weight: 500;
  font-size: 12.5px;
  white-space: nowrap;
}

/* --- col 2: value + unit (aligned together so there's no wrap) --- */
.dp-unified-nutri-valunit {
  display: inline-flex;
  align-items: baseline;
  /* Phase 1.11.5 §1: gap 4→3px (value ↔ unit).  Tighter, but still
     readable.  ALLOWED list (padding/gap only). */
  gap: 3px;
  min-width: 0;
  max-width: 100%;
  justify-content: flex-start;
}
.dp-unified-nutri-value {
  /* Phase 1.11.5 §1: SHRINK value font 15 → 14px.  This reduces
     intrinsic col2 width by ~3–6px per digit (for typical 3-digit
     values like "720" the reduction is ~8–10px), all reclaimed to
     keep the level cell on-screen without widening it. */
  font-size: 14px;
  font-weight: 700;
  color: #1F2937;
}
.dp-unified-nutri-unit {
  /* Phase 1.11.5 §1: SHRINK unit font 12.5 → 12.0px (minor). */
  font-size: 12px;
  font-weight: 500;
  color: #5B6A8A;
  white-space: nowrap;
}

/* --- col 3: %NRV (Nutrition) / empty placeholder (Carbon) --- */
.dp-unified-nutri-nrv {
  /* Phase 1.11.5 §1: SHRINK NRV font 12.5 → 11.5px.  Combined with
     col3's minmax reduced (68/76 → 62/70), this reclaims ~6–7px of
     horizontal space directly in the 4-column tuple so the level
     cell never gets clipped even on tablet 2-col narrow cards. */
  font-size: 11.5px;
  font-weight: 500;
  color: #6C7797;
  text-align: right;
  white-space: nowrap;
}

/* --- col 4: circular level dot + Chinese level text (最右侧, §II) --- */
.dp-unified-nutri-level {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  justify-content: flex-end;
  /* Phase 1.11.5 §1: level cell's internal right padding 4 → 3px,
     but the COLUMN definition itself stays at original 54/60 (we
     explicitly DO NOT widen the level column).  All room comes from
     the 3 sibling columns shrinking above. */
  padding-right: 3px;
  box-sizing: border-box;
  flex: 0 0 auto;
  font-size: 12px;
}
.dp-unified-level-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  flex-shrink: 0;
  background: #98A3C0;
}
/* Level classes are directly attached to the dot <span> by the
   unified row builder.  Names match the legacy `dp-nutri-level-LOW /
   MED / HIGH` palette defined at L471-L473 so we don't fork colours. */
.dp-unified-level-dot.dp-nutri-level-LOW  { background: #22A06B; }
.dp-unified-level-dot.dp-nutri-level-MED  { background: #D97706; }
.dp-unified-level-dot.dp-nutri-level-HIGH { background: #B91C1C; }
.dp-unified-level-text {
  /* Phase 1.11.5 §1: SHRINK level-text font 12.5 → 12.0px so the
     Chinese 低/中/高 glyphs require 1–2px less width inside the
     fixed (not widened) 54/60 column. */
  font-size: 12px;
  font-weight: 600;
  color: #4D597B;
  white-space: nowrap;
}

/* --- Empty column placeholder (Carbon's %NRV slot, or SUMMARY-mode
   Carbon value slot).  Uses visibility:hidden so the 4-column grid
   remains perfectly aligned between Nutrition and Carbon rows; the
   column width is controlled by the grid-template-columns definition
   on .dp-unified-nutri-row — NOT by the cell content. */
.dp-unified-empty {
  visibility: hidden;
  pointer-events: none;
  width: 100%;
  height: 100%;
}

/* =================================================================
   Intro example card variant (§4 轻微优化紧凑性).
   The Intro wrapper is WIDER than product cards, so the default
   `col2 = minmax(60, auto)` stretches value-unit to fill 1fr,
   creating a HUGE blank between value-unit and %NRV.  Fix:
     - shrink all column minima / maxima to "fit content" (not auto)
     - reduce column gap from 10 → 8
     - DON'T force row to 100% width → keep left-aligned, which
       eliminates the pointless right-hand whitespace (§4: "减少
       无意义空白, 提高阅读紧凑性")
   Still keep the 4-column logical order: label | value | %NRV | ●level
   (§4 explicit: 保持四列逻辑).
   ================================================================= */
.dp-di-example-nutr .dp-unified-nutri-row,
.dp-di-example-carb .dp-unified-nutri-row {
  grid-template-columns:
    minmax(44px, 50px)               /* col1: label — tighter */
    minmax(60px, max-content)        /* col2: value-unit — fit content, NO huge stretch */
    minmax(64px, max-content)        /* col3: %NRV — fit content */
    minmax(50px, 56px);              /* col4: ●level */
  column-gap: 8px;                   /* §4: 更紧凑的列间距 */
  row-gap: 4px;
  /* Intro 不强制 100% 宽度, 不引入右侧巨大空白 (§4) */
  width: auto;
  max-width: 100%;
  justify-content: start;
}

/* =================================================================
   Phase 1.11.3 — Responsive Downgrade Layouts (§2 Nutrition, §5 Carbon mirror).
   The SAME 4 logical cells (label / value-unit / nrv / ●level) are
   rendered in THREE different flows, based on the AVAILABLE CONTAINER
   WIDTH.  Breakpoints are set by viewport because the menu grid
   switches at 1100 (2-col → 1-col) and 680 (2-cards → 1-card), so:

     WIDE (default, no media):  ≥  821px viewport → 2-col menu + 2-card
           grid = 4 columns, one single per-metric row:
             [label]  [value+unit]  [%NRV]  [●level]

     TABLET (max-width: 820px):   ≤ 820px viewport → 1-col menu + 2-card
           grid = 2×2 per metric row:
             row 1:  [label]    [value+unit]
             row 2:  [%NRV]     [●level (far R of row)]

     MOBILE (max-width: 420px):  ≤ 420px viewport → 1-col menu + 1-card
           grid = 3 rows per metric (Carbon has no NRV cell, so 2 rows):
             row 1:  label
             row 2:  value+unit (L-aligned, bold)
             row 3:  [%NRV] — [●level] (2 col: NRV L | ●level R)

   NO NEW SELECTORS are introduced; all rules are ADD-ONS to the
   existing frozen .dp-unified-nutri-row family so Phase 1.10's 20
   frozen headless probes (which do NOT exercise responsive widths)
   still match 1:1.
   ================================================================= */

/* --- BREAKPOINT 1: TABLET (<= 820px) ----
   The menu drops to 1 column at ≤1100 but cards still stay 2-wide
   until ≤680; 820 is the sweet-spot where each card body (~210px)
   becomes too narrow to keep the full 4-col row readable without
   squeezing.  2×2 is the natural downgrade (readability first). */
@media (max-width: 820px) {
  .dp-unified-nutri-row {
    grid-template-columns:
      minmax(48px, 52px)                /* col A: label (row 1 col 1) */
      1fr;                               /* col B: value-unit (row 1 col 2, fills remainder) */
    /* 2 columns × 2 rows:
         label       value+unit
         %NRV        ●level (far R of this half) */
    grid-template-rows: auto auto;
    grid-auto-flow: row;
    column-gap: 10px;
    row-gap: 4px;
  }
  /* Cells that already live in their correct 2-col slots stay put;
     we re-home the 4-col orphans (NRV + ●level) down to row 2. */
  .dp-unified-nutri-row > .dp-unified-nutri-nrv   { grid-column: 1 / 2; grid-row: 2 / 3; text-align: left; }
  .dp-unified-nutri-row > .dp-unified-nutri-level { grid-column: 2 / 3; grid-row: 2 / 3; }
  .dp-unified-nutri-row > .dp-unified-empty {
    /* In tablet mode the 4th empty placeholder cell of Carbon rows
       no longer participates in flow — collapse it to invisible
       0-size so row 2 keeps just [NRV-left / ●level-right] pair. */
    display: none !important;
  }
}

/* --- BREAKPOINT 2: MOBILE (<= 420px) ----
   Menu section-grid drops to 1 card wide; each card body is ~210px
   × 86pic so horizontal space is at a premium.  We fully "stack"
   each metric into 3 rows with a final 2-col NRV+level pair.
   This matches the spec's §2 "mobile" reading order exactly. */
@media (max-width: 420px) {
  /* Phase 1.19 D1C1: true mobile viewport can now reach <=420px.
     Keep the summary / fee block shrinkable so Low/High fee rows do not
     expand the menu column beyond the real device width. */
  .dp-menu-phase {
    padding-left: 12px;
    padding-right: 12px;
  }
  .dp-page-header,
  .dp-menu-body {
    gap: 16px;
  }
  .dp-order-summary-wrap,
  .dp-order-summary,
  .dp-order-selected-box,
  .dp-order-price-rows,
  .dp-fee-details-list,
  .dp-outside-option-btn,
  .dp-submit-btn {
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }
  .dp-fee-details-item {
    align-items: flex-start;
    flex-wrap: wrap;
  }
  .dp-fee-details-fee {
    margin-left: auto;
  }
  .dp-unified-nutri-row {
    /* Single column STACK. */
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto;
    column-gap: 0;
    row-gap: 3px;
  }
  .dp-unified-nutri-row > .dp-unified-nutri-label   { grid-column: 1 / -1; grid-row: 1 / 2; }
  .dp-unified-nutri-row > .dp-unified-nutri-valunit { grid-column: 1 / -1; grid-row: 2 / 3; }
  /* Row 3: [%NRV ------ far-left | ●level far-right] — reuse a
     2-col mini-grid inside the 1-col stack via a nested flex row
     (the two cells are direct siblings so flex on parent won't
     help; instead we promote row 3 to two sub-columns). */
  .dp-unified-nutri-row {
    /* Re-declare grid so row 3 = 2 cols (rows 1-2 still span full). */
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto auto;
    row-gap: 3px;
    column-gap: 8px;
  }
  .dp-unified-nutri-row > .dp-unified-nutri-label   { grid-column: 1 / -1; grid-row: 1 / 2; }
  .dp-unified-nutri-row > .dp-unified-nutri-valunit { grid-column: 1 / -1; grid-row: 2 / 3; }
  .dp-unified-nutri-row > .dp-unified-nutri-nrv     { grid-column: 1 / 2; grid-row: 3 / 4; text-align: left; }
  .dp-unified-nutri-row > .dp-unified-nutri-level   { grid-column: 2 / 3; grid-row: 3 / 4; }
  .dp-unified-nutri-row > .dp-unified-empty {
    /* Carbon NRV placeholder — kill in mobile (never render blank
       slot between valunit and the level row). */
    display: none !important;
  }
}

/* =================================================================
   Outer wrapper containment (§2 Free/Both level-dot escape guard).
   The Unified Shell wrapper hosts the 3 rows on a flex-column;
   even in overflow conditions we MUST guarantee that the ● level
   dot (and its adjacent 低/中/高) never paints outside the pale
   blue rounded rectangle, which itself must paint inside the
   product card (which already has overflow:visible by default, so
   we also clip on the info wrappers).
   ================================================================= */
.dp-nutrition-expand-unified,
.dp-carbon-expand-unified {
  /* Always clip content that would otherwise escape the rounded
     corners.  This is the SECONDARY defense for §2 / §5 (the PRIMARY
     defense being the responsive downgrade layouts above). */
  overflow: hidden;
  box-sizing: border-box;
}
/* Legacy base classes also need overflow clip so the 1.11.3
   containment applies equally to ANY regime that renders a
   nutrition/carbon disclosure. */
.dp-nutrition-expand,
.dp-carbon-expand {
  overflow: hidden;
}

/* ======================================================================
   Phase 1.19 — Layered Carbon CLOSED mobile ≤420px grade visibility fix
   ----------------------------------------------------------------------
   SCOPE (most-narrow selector, DO NOT leak outside Layered Carbon):
     .dp-layered-carbon-module (Layered only)
       :not(.is-open)           (CLOSED state only; expanded is untouched)
       .dp-carbon-expand-summary (CLOSED summary chip, not unified full)
       .dp-unified-nutri-row    (summary grid row inside the chip)

   PROBLEM (§2 ROOT CAUSE from audit 2026-09-02):
     In viewports ≤420px the shared responsive-downgrade MQs (L1808–L1874)
     reshape the generic 4-column unified row into a 3-row × 2-column stack
     AND simultaneously hide .dp-unified-empty valunit/NRV via
     display:none !important.  Because Layered Carbon CLOSED summary has
     BOTH valunit (col2) AND NRV (col3) permanently empty, the resulting
     grid collapses into 2 tracks with widths ~0px / 3px and the ●level
     node (9px dot + 6px gap + 12px 低/中/高 = 27px) gets completely
     truncated by the ancestor overflow:hidden chain (dp-carbon-expand →
     dp-carbon-expand-summary → dp-layered-carbon-module).  Carbon label
     "碳足迹" was simultaneously compressed from ~36px down to 11px.

   TREATMENT PRESERVED (§1 / §8 non-negotiable):
     - EMPTY valunit & empty NRV stay display:none (no resurrected blank
       slots between label and grade).
     - Exact carbon value stays HIDDEN in CLOSED (we only touch the
       summary row; full expanded unified shell keeps its 4-col grid).
     - Global .dp-unified-nutri-row and its shared 4-col default are
       UNCHANGED — this rule lives on the narrow parent chain above.

   LAYOUT STRATEGY:
     Establish a stable DEDICATED 2-column row on the Layered Carbon
     CLOSED summary row alone.  Col1 holds the label and uses
     max-content so "碳足迹" (3 characters at 12.5px ≈ 37.5px) renders
     in full.  Col2 holds the ●level with a min-width floor of 30px
     (≥ 27px required measured footprint + 3px breathing room) and
     grows with max-content (so 低/中/高 share identical width).
     column-gap 8px is kept for visual separation parity with the
     Free/Both full-disclosure 4-col rows.

   WHY NOT .dp-unified-nutri-level / .dp-unified-nutri-label overrides?
     We'd need to reset grid-column / grid-row for 4 orphan nodes placed
     by the shared auto-flow MQ.  Overriding the *entire row's*
     grid-template-columns forces the 4 existing children (label, valunit
     empty-display-none, nrv empty-display-none, level) onto a clean
     2-track auto-placement: since children 2 & 3 are display:none,
     the CSS grid auto-placement skips them and label / level flow
     naturally into track 1 / track 2 respectively.  No per-child
     grid-column / grid-row re-anchoring needed.

   CROSS-REGIME ISOLATION (§5 / §15 explicit checklist items):
     - .dp-layered-carbon-module is NOT present in Control / Free / Low /
       High / Both / Space → zero impact on those regimes.
     - :not(.is-open) means the EXPANDED (is-open) unified shell, which
       uses .dp-carbon-expand-unified, keeps its shared 4-col layout.
     - @media (max-width: 420px) scope means tablets ≥768 / desktops
       ≥1024 keep the original responsive downgrade (already PASS per
       earlier 4-col / 2-col tablet downgrades that rendered grade OK).
   ====================================================================== */
@media (max-width: 420px) {
  .dp-layered-carbon-module:not(.is-open)
    .dp-carbon-expand-summary
    .dp-unified-nutri-row {
    /* Dedicated 2-track grid for Carbon CLOSED summary only.
       minmax(, max-content) on both columns guarantees that a 3-char
       label and the ●level compound chip are never compressed by the
       shared responsive MQ's orphan 0px / 3px tracks. */
    grid-template-columns: max-content minmax(30px, max-content);
    /* Keep the same 8px gap as the unified 4-col default for visual
       spacing parity with adjacent regime rows (Free/Both disclosure
       buttons already use column-gap 8px between label + value). */
    column-gap: 8px;
    /* Override the shared responsive MQ's min-height.  Carbon CLOSED
       only has ONE logical row, so the 3-row × 60+ px tablet/mobile
       stacked minimum is pure waste. */
    grid-auto-rows: min-content;
    row-gap: 0;
  }

  /* Coerce label & level into stable auto-flow on the 2 dedicated tracks.
     The shared responsive MQs have assigned orphan :nth-child placements
     from the 3-row stack (e.g. level to grid-column:2 / grid-row:3); we
     unset those here so the implicit auto-flow picks tracks 1 / 2 in
     order after skipping the 2 display:none empty siblings. */
  .dp-layered-carbon-module:not(.is-open)
    .dp-carbon-expand-summary
    .dp-unified-nutri-row
    > .dp-unified-nutri-label {
    grid-column: auto;
    grid-row: auto;
  }
  .dp-layered-carbon-module:not(.is-open)
    .dp-carbon-expand-summary
    .dp-unified-nutri-row
    > .dp-unified-nutri-level {
    grid-column: auto;
    grid-row: auto;
    /* Explicitly keep the level row visible; the shared responsive MQ
       does not hide it but a defensive visibility:visible assertion is
       harmless because display:none empty siblings already handle the
       valunit/NRV slots. */
    visibility: visible;
    display: inline-flex;
    align-items: baseline;
  }

  /* Give the summary chip enough horizontal room on mobile.
     The default dp-carbon-expand-summary min-width / max-width may
     otherwise keep the 2-col grid under-sized; width:auto plus a
     100% max lets the 2 tracks grow to ~37.5 + 8 + 35 = 80.5px
     without being clipped by the triple overflow:hidden chain. */
  .dp-layered-carbon-module:not(.is-open) .dp-carbon-expand-summary {
    width: auto;
    max-width: 100%;
    /* Preserve the existing containment box model (never leak outside
       the pale rounded rectangle).  overflow:visible is EXPLICITLY
       rejected per §6 ("不要简单用overflow:visible绕过根因"). */
    overflow: hidden;
  }
}

/* ======================================================================
   Phase 1.19 — Layered CLOSED inline-slot CTA font-size 12px → 14px
   ----------------------------------------------------------------------
   SCOPE (most-narrow selector per §4 / §5 checklist — NO shared CTA
   rules are touched):
     Anchored to the two Layered-specific wrappers:
       .dp-layered-nutrition-module → "查看更多营养信息 ›" (CLOSED only)
       .dp-layered-carbon-module    → "查看更多碳足迹信息 ›" (CLOSED only)
     Combined with :not(.is-open) on the module wrapper to EXCLUDE the
     secondary "收起营养信息 ‹" / "收起碳足迹信息 ‹" collapse buttons
     which live in the EXPANDED (is-open) module variant.
     Combined with .dp-od-inline-slot to EXCLUDE any other CTA shapes
     that may share .dp-on-demand-text-btn elsewhere.

   This rule CANNOT match:
     - Control / Free / Low / High / Both / Space — regimes have NO
       .dp-layered-*-module wrapper on their disclosure buttons.
     - Collapse ("收起…") CTAs — rendered in is-open modules, excluded
       by the :not(.is-open) suffix.
     - Layered EXPANDED unified CTAs — same :not(.is-open) guard.

   PRESERVED (§4 explicit list):
     font-weight stays 500  (inherited from shared base, not overridden).
     color stays #1F2937  (inherited, not overridden; equivalent to
                            rgb(31,41,55) per §12 post-condition).
     font-family stays the prototype's system font stack (inherited).
     line-height stays 1.38 (inherited from dp-od-inline-slot base
                            rule L1259; we do NOT re-declare so any
                            future shared change propagates cleanly).
   ====================================================================== */
.dp-layered-nutrition-module:not(.is-open) .dp-on-demand-text-btn.dp-od-inline-slot,
.dp-layered-carbon-module:not(.is-open) .dp-on-demand-text-btn.dp-od-inline-slot {
  font-size: 14px;
  /* All other CTA metrics (padding 4px 8px 5px, margin-left:auto,
     flex 0 1 auto, min-width:max-content, color, font-weight,
     line-height 1.38) are inherited unchanged from the shared
     dp-on-demand-text-btn.dp-od-inline-slot base at L1244–L1279 so the
     inline/wrap behaviour stays identical; only the visual prominence
     (§4 12→14 upgrade) is bumped. */
}

/* ==========================================================
   MOBILE_UI_FIX_V2_BEGIN
   Conservative mobile label normalization
   Scope: phones and narrow WebViews ≤680px.
   Strategy:
     • NO product-card / dp-product-body restructuring.
     • NO display:contents.
     • Reduce unused spacing/padding first.
     • Narrow grid minima + 8-12% font scaling where needed.
     • Preserve desktop 2-col / iPad 2-col grid frozen.
     • Example labels (intro + in-card labels) share grammar parity.
     • Low/High entry / name-spec / Layered closed module local only.
   ========================================================== */

/* --------------- 341–680px — ordinary phones: 1-col card section-grid.
   Keep Nutrition 4-column, 1 horizontal row per nutrient. */
@media (min-width: 341px) and (max-width: 680px) {
  /* --- Unified nutrition/carbon row: tight 4-col one row --- */
  .dp-unified-nutri-row {
    grid-template-columns:
      minmax(42px, 48px)              /* col1 label (was 48/54, ~-11% min) */
      minmax(50px, auto)            /* col2 value+unit (was 56/auto ~-11% min) */
      minmax(54px, 62px)             /* col3 NRV (was 62/70 ~-13% min) */
      minmax(48px, 54px);              /* col4 level (was 54/60 ~-11% min) */
    column-gap: 5px;                    /* 8 → 5 (-38%) */
    row-gap: 3px;                     /* 6 → 3 (-50%) */
    font-size: 11.5px;                 /* 12.5 → 11.5 (-8%) */
    line-height: 1.35;                  /* 1.45 → 1.35 (slight tighten) */
  }
  .dp-unified-nutri-label { font-size: 11.5px; }     /* 12.5 → 11.5 */
  .dp-unified-nutri-value { font-size: 13px; }       /* 14 → 13 (-7%) */
  .dp-unified-nutri-unit  { font-size: 11px; }       /* 12 → 11 (-8%) */
  .dp-unified-nutri-nrv   { font-size: 10.5px; text-align: right; } /* 11.5→10.5 */
  .dp-unified-nutri-level { font-size: 11px; }        /* 12 → 11 (-8%) */
  .dp-unified-level-dot   { width: 8px; height: 8px; } /* 9→8 (-11%) */
  /* --- Shell outer unified paddings (11/12 → ~8/9, -27%/ -25%) */
  .dp-nutrition-expand-unified,
  .dp-carbon-expand-unified {
    padding: 8px 9px;
  }
  /* --- Explicitly cancel ≤820 / ≤420 placement downgrades (they fire at ≤680
         because 680 ≤ 820 and ≤ 420 ≤ 680) so these place must override. */
  .dp-unified-nutri-row > .dp-unified-nutri-label   { grid-column: auto; grid-row: auto; }
  .dp-unified-nutri-row > .dp-unified-nutri-valunit { grid-column: auto; grid-row: auto; }
  .dp-unified-nutri-row > .dp-unified-nutri-nrv     { grid-column: auto; grid-row: auto; text-align: right; }
  .dp-unified-nutri-row > .dp-unified-nutri-level   { grid-column: auto; grid-row: auto; }
  .dp-unified-nutri-row > .dp-unified-empty {
    display: initial !important;
    visibility: hidden !important;
  }

  /* --- Intro / comprehension example labels — parity with in-card --- */
  .dp-di-example-nutr .dp-unified-nutri-row,
  .dp-di-example-carb .dp-unified-nutri-row {
    grid-template-columns:
      minmax(40px, 46px)
      minmax(54px, max-content)
      minmax(56px, max-content)
      minmax(46px, 52px);
    column-gap: 6px;           /* 8→6 (-25%) */
    row-gap: 3px;
    width: auto;
    max-width: 100%;
  }
  .dp-di-example-nutr .dp-unified-nutri-row > .dp-unified-nutri-nrv,
  .dp-di-example-carb .dp-unified-nutri-row > .dp-unified-nutri-nrv {
    text-align: right;
  }
  .dp-di-example-nutr .dp-unified-nutri-row > *,
  .dp-di-example-carb .dp-unified-nutri-row > * {
    grid-column: auto;
    grid-row: auto;
  }
  .dp-di-example-nutr .dp-unified-nutri-row > .dp-unified-empty,
  .dp-di-example-carb .dp-unified-nutri-row > .dp-unified-empty {
    display: initial !important;
    visibility: hidden !important;
  }

  /* --- Carbon preference: 1 row carbon row always (col 12 col4 place: carbon:
         preserve 3-col with hidden empty (NRV still keeps 4-columns template above. --- */
  .dp-carbon-expand-unified .dp-unified-nutri-row > .dp-unified-empty,
  .dp-di-example-carb .dp-unified-nutri-row > .dp-unified-empty {
    /* Keep 4-column grid but empty. */
  }

  /* --- Low/High on-demand overflow local containment --- */
  .dp-product-body > button.dp-on-demand-text-btn,
  .dp-product-info-area button.dp-on-demand-text-btn {
    gap: 3px;                        /* 4→3 (-25%) */
    padding-left: 0px;
    padding-right: 10px;             /* 16→10 (-38%) */
    padding-top: 5px;
    padding-bottom: 5px;
    font-size: 14px;                  /* 15→14 (-7%) */
    max-width: 100%;
    width: 100%;
    box-sizing: border-box;
    white-space: nowrap;
  }
  .dp-product-body > button.dp-on-demand-text-btn .dp-od-chevron,
  .dp-product-info-area button.dp-on-demand-text-btn .dp-od-chevron {
    margin-left: 1px;                   /* 3→1 (-67%) */
  }
  .dp-product-body > button.dp-on-demand-text-btn .dp-od-dot,
  .dp-product-info-area button.dp-on-demand-text-btn .dp-od-dot {
    margin: 0 0px;
  }
  .dp-product-body > button.dp-on-demand-text-btn .dp-od-price,
  .dp-product-info-area button.dp-on-demand-text-btn .dp-od-price {
    font-size: 12px;                  /* 12.5 → 12 (-4%) */
  }
  /* keep right-chevron no-wrap with price: */

  /* --- Name + spec deterministic 2-col (local only) --- */
  .dp-product-name-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) max-content;
    align-items: baseline;
    gap: 8px;
    flex-wrap: nowrap;
  }
  .dp-product-name-row > .dp-product-spec {
    white-space: nowrap;
  }

  /* --- Layered closed deterministic  local fix:
         replace wrap with flex-wrap with min-content stop random wrap --- */
  .dp-product-info-area .dp-layered-nutrition-module:not(.is-open),
  .dp-product-info-area .dp-layered-carbon-module:not(.is-open) {
    display: grid;
    grid-template-columns: minmax(0, 1fr) max-content;
    column-gap: 10px;              /* 12→10 (-17%) */
    row-gap: 6px;
    align-items: flex-start;
    flex-wrap: nowrap;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }
  .dp-product-info-area .dp-layered-nutrition-module:not(.is-open) > .dp-nutrition-expand-summary,
  .dp-product-info-area .dp-layered-carbon-module:not(.is-open) > .dp-carbon-expand-summary {
    grid-column: 1 / 2;
    grid-row: 1 / 2;
    flex: 0 0 auto;
    width: 100%;
    min-width: 0;
  }
  .dp-product-info-area .dp-layered-nutrition-module:not(.is-open) > .dp-on-demand-text-btn.dp-od-inline-slot,
  .dp-product-info-area .dp-layered-carbon-module:not(.is-open) > .dp-on-demand-text-btn.dp-od-inline-slot {
    grid-column: 2 / 3;
    grid-row: 1 / 2;
    flex: 0 0 auto;
    min-width: 0;
    margin-left: 0;
    align-self: start;
    justify-self: end;
    /* font-size was 14 (kept; only slightly scale inner scale: */
  }
}

/* --------------- ≤340px extreme narrow deterministic fallbacks -------------------- */
@media (max-width: 340px) {
  /* --- Nutrition — deterministic 2-row, NEVER 3-row stack. */
  .dp-unified-nutri-row {
    grid-template-columns:
      minmax(40px, 46px)
      1fr;
    grid-template-rows: auto auto;
    column-gap: 8px;
    row-gap: 3px;
    font-size: 11px;
  }
  .dp-unified-nutri-row > .dp-unified-nutri-label   { grid-column: 1 / 2; grid-row: 1 / 2; }
  .dp-unified-nutri-row > .dp-unified-nutri-valunit { grid-column: 2 / 3; grid-row: 1 / 2; }
  .dp-unified-nutri-row > .dp-unified-nutri-nrv     { grid-column: 1 / 2; grid-row: 2 / 3; text-align: left; }
  .dp-unified-nutri-row > .dp-unified-nutri-level   { grid-column: 2 / 3; grid-row: 2 / 3; justify-self: end; }
  .dp-unified-nutri-row > .dp-unified-empty {
    display: none !important;
  }
  .dp-unified-level-dot { width: 8px; height: 8px; }
  .dp-unified-nutri-label { font-size: 11px; }
  .dp-unified-nutri-value { font-size: 12.5px; }
  .dp-unified-nutri-unit  { font-size: 10.5px; }
  .dp-unified-nutri-nrv   { font-size: 10px; }
  .dp-unified-nutri-level { font-size: 10.5px; }
  .dp-nutrition-expand-unified,
  .dp-carbon-expand-unified {
    padding: 7px 8px;
  }
  /* Carbon — prefer 3-col carbon 1-row tight; still 1 row carbon if content else we 1row 3 cols with tight 1col empty hidden: */
  .dp-carbon-expand-unified .dp-unified-nutri-row,
  .dp-di-example-carb .dp-unified-nutri-row {
    grid-template-columns:
      minmax(38px, 44px)
      minmax(48px, 1fr)
      minmax(46px, 52px);
    grid-template-rows: auto;
  }
  /* Explicitly cancel ≤820 2x2 placement here: */
  .dp-carbon-expand-unified .dp-unified-nutri-row > .dp-unified-nutri-label,
  .dp-di-example-carb .dp-unified-nutri-row > .dp-unified-nutri-label {
    grid-column: 1 / 2; grid-row: auto;
  }
  .dp-carbon-expand-unified .dp-unified-nutri-row > .dp-unified-nutri-valunit,
  .dp-di-example-carb .dp-unified-nutri-row > .dp-unified-nutri-valunit {
    grid-column: 2 / 3; grid-row: auto;
  }
  .dp-carbon-expand-unified .dp-unified-nutri-row > .dp-unified-nutri-level,
  .dp-di-example-carb .dp-unified-nutri-row > .dp-unified-nutri-level {
    grid-column: 3 / 4; grid-row: auto;
    justify-self: end;
  }
  .dp-carbon-expand-unified .dp-unified-nutri-row > .dp-unified-nutri-nrv,
  .dp-di-example-carb .dp-unified-nutri-row > .dp-unified-nutri-nrv {
    display: none;
  }
  .dp-carbon-expand-unified .dp-unified-nutri-row > .dp-unified-empty,
  .dp-di-example-carb .dp-unified-nutri-row > .dp-unified-empty {
    display: none !important;
  }
  /* --- Example nutrition parity 2-row fallback: */
  .dp-di-example-nutr .dp-unified-nutri-row {
    grid-template-columns:
      minmax(38px, 44px)
      1fr;
    grid-template-rows: auto auto;
    column-gap: 8px;
    row-gap: 3px;
  }
  .dp-di-example-nutr .dp-unified-nutri-row > .dp-unified-nutri-label   { grid-column: 1 / 2; grid-row: 1 / 2; }
  .dp-di-example-nutr .dp-unified-nutri-row > .dp-unified-nutri-valunit { grid-column: 2 / 3; grid-row: 1 / 2; }
  .dp-di-example-nutr .dp-unified-nutri-row > .dp-unified-nutri-nrv     { grid-column: 1 / 2; grid-row: 2 / 3; text-align: left; }
  .dp-di-example-nutr .dp-unified-nutri-row > .dp-unified-nutri-level   { grid-column: 2 / 3; grid-row: 2 / 3; justify-self: end; }
  .dp-di-example-nutr .dp-unified-nutri-row > .dp-unified-empty {
    display: none !important;
  }
  /* --- Low/High: allow deterministic 2-line wrap fee + chevron right anchor --- */
  .dp-product-body > button.dp-on-demand-text-btn,
  .dp-product-info-area button.dp-on-demand-text-btn {
    display: grid;
    grid-template-columns: minmax(0, 1fr) max-content;
    grid-auto-flow: row;
    gap: 4px;
    width: 100%;
    max-width: 100%;
    white-space: normal;
  }
  .dp-product-body > button.dp-on-demand-text-btn .dp-od-chevron,
  .dp-product-info-area button.dp-on-demand-text-btn .dp-od-chevron {
    grid-column: 2 / 3;
    grid-row: 1 / 2;
    justify-self: end;
    white-space: nowrap;
  }
  .dp-product-body > button.dp-on-demand-text-btn .dp-od-label,
  .dp-product-body > button.dp-on-demand-text-btn .dp-od-action,
  .dp-product-body > button.dp-on-demand-text-btn .dp-od-price {
    display: inline;
  }
  .dp-product-info-area button.dp-on-demand-text-btn .dp-od-label,
  .dp-product-info-area button.dp-on-demand-text-btn .dp-od-action,
  .dp-product-info-area button.dp-on-demand-text-btn .dp-od-price {
    display: inline;
  }
  /* --- Layered closed: 2 rows; CTA row 2, right --- */
  .dp-product-info-area .dp-layered-nutrition-module:not(.is-open),
  .dp-product-info-area .dp-layered-carbon-module:not(.is-open) {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto;
    display: grid;
  }
  .dp-product-info-area .dp-layered-nutrition-module:not(.is-open) > .dp-nutrition-expand-summary,
  .dp-product-info-area .dp-layered-carbon-module:not(.is-open) > .dp-carbon-expand-summary {
    grid-column: 1 / -1;
    grid-row: 1 / 2;
    width: 100%;
  }
  .dp-product-info-area .dp-layered-nutrition-module:not(.is-open) > .dp-on-demand-text-btn.dp-od-inline-slot,
  .dp-product-info-area .dp-layered-carbon-module:not(.is-open) > .dp-on-demand-text-btn.dp-od-inline-slot {
    grid-column: 1 / -1;
    grid-row: 2 / 3;
    justify-self: end;
    width: auto;
  }

  /* --- Name spec local still 2-col: */
  .dp-product-name-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) max-content;
    align-items: baseline;
    gap: 6px;
    flex-wrap: nowrap;
  }
}

/* ==========================================================
   MOBILE_UI_FIX_V2_END
   ========================================================== */

/* ==========================================================
   MOBILE_UI_FIX_V2_1_BEGIN
   Conservative v2.1 label normalization + secondary-pill.
   Scope:
     • phone ≤680px only
     • NO outer product layout / dp-product-body changes
     • NO display:contents
     • NO JS event logic changes
   ========================================================== */

@media (max-width: 680px) {
  /* --------------- 1. Explanation page lateral whitespace reduction
     Only reduce DI page wrappers (dp-domain-intro-wrap / dp-di-nutri-card
     / dp-di-example-wrap) to give example labels more horizontal room.
     dp-section-grid (selection page) is intentionally untouched. */
  .dp-domain-intro-wrap {
    padding: 16px 12px 18px;
  }
  .dp-di-nutri-card,
  .dp-di-example-card,
  .dp-di-carb-card {
    padding: 12px 12px;
  }
  .dp-di-example-wrap {
    padding: 10px 8px;
  }

  /* --------------- 2. Nutrition 341–680: 4-col one row, rebalanced.
     col1 label slightly narrower, col2 value+unit gets more room.
     NRV and level keep dedicated columns so "34.0%NRV" / "高" never
     overlap or wrap into each other. */
  .dp-unified-nutri-row:not(.carbon) {
    grid-template-columns:
      minmax(40px, 46px)            /* col1 label 营养/热量/脂肪/钠 */
      minmax(70px, auto)            /* col2 value+unit  "680.0毫克" */
      minmax(58px, 68px)            /* col3 NRV "34.0%NRV" */
      minmax(52px, 60px);             /* col4 level ● 低/中/高 */
    column-gap: 5px;
    row-gap: 3px;
    font-size: 11.5px;
  }
  .dp-unified-nutri-row:not(.carbon) > .dp-unified-nutri-label   { grid-column: auto; grid-row: auto; }
  .dp-unified-nutri-row:not(.carbon) > .dp-unified-nutri-valunit { grid-column: auto; grid-row: auto; }
  .dp-unified-nutri-row:not(.carbon) > .dp-unified-nutri-nrv     { grid-column: auto; grid-row: auto; text-align: right; }
  .dp-unified-nutri-row:not(.carbon) > .dp-unified-nutri-level   { grid-column: auto; grid-row: auto; }
  .dp-unified-nutri-row:not(.carbon) > .dp-unified-empty         { display: initial !important; visibility: hidden !important; }

  /* --------------- 3. Carbon 341–680: explicit 3-col one row.
     Kill the hidden NRV empty column so level never gets squeezed. */
  .dp-carbon-expand-unified .dp-unified-nutri-row,
  .dp-di-example-carb .dp-unified-nutri-row {
    grid-template-columns:
      minmax(40px, 46px)            /* col1 碳足迹 */
      minmax(72px, auto)            /* col2 value+unit "450 g CO₂e/100ml" */
      minmax(52px, 60px);             /* col3 level ●低/中/高 */
    grid-template-rows: auto;
  }
  .dp-carbon-expand-unified .dp-unified-nutri-row > .dp-unified-nutri-nrv,
  .dp-di-example-carb .dp-unified-nutri-row > .dp-unified-nutri-nrv {
    display: none;
  }
  .dp-carbon-expand-unified .dp-unified-nutri-row > .dp-unified-empty,
  .dp-di-example-carb .dp-unified-nutri-row > .dp-unified-empty {
    display: none !important;
  }
  .dp-carbon-expand-unified .dp-unified-nutri-row > .dp-unified-nutri-label,
  .dp-di-example-carb .dp-unified-nutri-row > .dp-unified-nutri-label {
    grid-column: 1 / 2;
    grid-row: auto;
  }
  .dp-carbon-expand-unified .dp-unified-nutri-row > .dp-unified-nutri-valunit,
  .dp-di-example-carb .dp-unified-nutri-row > .dp-unified-nutri-valunit {
    grid-column: 2 / 3;
    grid-row: auto;
  }
  .dp-carbon-expand-unified .dp-unified-nutri-row > .dp-unified-nutri-level,
  .dp-di-example-carb .dp-unified-nutri-row > .dp-unified-nutri-level {
    grid-column: 3 / 4;
    grid-row: auto;
    justify-self: end;
  }

  /* --------------- 4. Example label parity (营养 4-col same rebalance) */
  .dp-di-example-nutr .dp-unified-nutri-row:not(.carbon) {
    grid-template-columns:
      minmax(38px, 44px)
      minmax(68px, max-content)
      minmax(56px, max-content)
      minmax(50px, 58px);
    column-gap: 5px;
    row-gap: 3px;
    width: auto;
    max-width: 100%;
  }
  .dp-di-example-nutr .dp-unified-nutri-row:not(.carbon) > .dp-unified-nutri-nrv {
    text-align: right;
  }
  .dp-di-example-nutr .dp-unified-nutri-row:not(.carbon) > * {
    grid-column: auto;
    grid-row: auto;
  }
  .dp-di-example-nutr .dp-unified-nutri-row:not(.carbon) > .dp-unified-empty {
    display: initial !important;
    visibility: hidden !important;
  }

  /* --------------- 5. Secondary pill (查看详情 / 收起 · ¥0.xx ›).
     Subdued light-blue fill + rounded corners, weaker than the blue
     primary Join button. No shadow, no solid border. */
  .dp-secondary-pill {
    display: inline-flex;
    align-items: center;
    column-gap: 4px;
    row-gap: 2px;
    flex-wrap: nowrap;
    padding: 3px 9px;
    border-radius: 999px;
    background-color: rgba(46, 117, 255, 0.08);
    color: #2e75ff;
    font-weight: 500;
    font-size: 13.5px;
    line-height: 1.35;
    white-space: nowrap;
    max-width: 100%;
    box-sizing: border-box;
  }
  /* Keep fee + chevron always visually grouped inside the pill so
     Low/High never split fee+arrow outside card boundary. */
  .dp-secondary-pill > .dp-od-price,
  .dp-secondary-pill > .dp-od-chevron {
    white-space: nowrap;
  }
  .dp-secondary-pill > .dp-od-chevron {
    margin-left: 2px;
  }
  /* If the pill is used inside an on-demand button row, keep the
     label/dot/ pill flow inside the same row. */
  button.dp-on-demand-text-btn .dp-od-label + .dp-od-dot {
    margin: 0 1px;
  }
  button.dp-on-demand-text-btn .dp-secondary-pill {
    margin-left: 1px;
  }
  button.dp-on-demand-text-btn,
  .dp-product-info-area button.dp-on-demand-text-btn {
    max-width: 100%;
    box-sizing: border-box;
  }
}

@media (min-width: 341px) and (max-width: 680px) {
  /* Nutrition: 4-col level preservation — guarantee level column width
     even if preceding columns grow (minmax floor protects level column). */
  .dp-unified-nutri-row:not(.carbon) > .dp-unified-nutri-level {
    min-width: 52px;
    display: inline-flex;
    align-items: center;
    column-gap: 4px;
    white-space: nowrap;
  }
}

@media (max-width: 340px) {
  /* Extreme narrow: keep the V2 approved 2-row deterministic fallback
     for Nutrition; Carbon still prefers 3-col 1 row with tighter
     floors to protect level column text from being clipped. */
  .dp-unified-nutri-row:not(.carbon) {
    grid-template-columns:
      minmax(38px, 44px)
      1fr;
    grid-template-rows: auto auto;
    column-gap: 8px;
    row-gap: 3px;
  }
  .dp-unified-nutri-row:not(.carbon) > .dp-unified-nutri-label   { grid-column: 1 / 2; grid-row: 1 / 2; }
  .dp-unified-nutri-row:not(.carbon) > .dp-unified-nutri-valunit { grid-column: 2 / 3; grid-row: 1 / 2; }
  .dp-unified-nutri-row:not(.carbon) > .dp-unified-nutri-nrv     { grid-column: 1 / 2; grid-row: 2 / 3; text-align: left; }
  .dp-unified-nutri-row:not(.carbon) > .dp-unified-nutri-level   { grid-column: 2 / 3; grid-row: 2 / 3; justify-self: end; min-width: 52px; white-space: nowrap; }
  .dp-unified-nutri-row:not(.carbon) > .dp-unified-empty         { display: none !important; }

  /* Carbon 3-col 1-row tight extreme-narrow. */
  .dp-carbon-expand-unified .dp-unified-nutri-row,
  .dp-di-example-carb .dp-unified-nutri-row {
    grid-template-columns:
      minmax(38px, 44px)
      minmax(60px, 1fr)
      minmax(50px, 56px);
  }
  .dp-carbon-expand-unified .dp-unified-nutri-row > .dp-unified-nutri-level,
  .dp-di-example-carb .dp-unified-nutri-row > .dp-unified-nutri-level {
    min-width: 50px;
    white-space: nowrap;
  }

  /* Extreme narrow Low/High fee+arrow always stay inside pill. */
  button.dp-on-demand-text-btn .dp-secondary-pill {
    display: inline-flex;
    flex-wrap: wrap;
    padding: 3px 8px;
    max-width: 100%;
  }
  button.dp-on-demand-text-btn .dp-secondary-pill > .dp-od-price,
  button.dp-on-demand-text-btn .dp-secondary-pill > .dp-od-chevron {
    white-space: nowrap;
  }
}

/* ==========================================================
   MOBILE_UI_FIX_V2_1_END
   ========================================================== */

/* ==========================================================
   MOBILE_UI_TUNING_V2_2_BEGIN
   Micro CSS-only corrections (no font / typography / JS changes).
   Goals:
     1. Guarantee Nutrition level column never gets clipped.
     2. Reduce example-card lateral padding for more label width.
     3. Carbon value/unit ↔ level spacing breathing room.
     4. Secondary pill containment: never exceed product card width.
   Scope: ≤680px ordinary mobile; ≤340px extreme narrow untouched unless
   it shares the class.
   ========================================================== */

@media (min-width: 341px) and (max-width: 680px) {
  /* --- Task 1: Nutrition 4-col rebalance so level stays visible.
         Slightly shrink value & NRV columns, grow level floor & cap. */
  .dp-unified-nutri-row:not(.carbon) {
    grid-template-columns:
      minmax(40px, 44px)          /* label       (same floor as V2.1) */
      minmax(64px, auto)          /* value+unit  (-6px floor vs V2.1) */
      minmax(54px, 62px)           /* NRV         (-4px min/-6px max) */
      minmax(60px, 72px);             /* level       (+8px/+12px vs V2.1) */
    column-gap: 4px;                /* shrink col gap 5→4 px for extra room */
    row-gap: 3px;
  }
  /* Example nutrition label parity. */
  .dp-di-example-nutr .dp-unified-nutri-row:not(.carbon) {
    grid-template-columns:
      minmax(38px, 42px)
      minmax(62px, max-content)
      minmax(52px, max-content)
      minmax(58px, 68px);
    column-gap: 4px;
    row-gap: 3px;
  }

  /* --- Task 2: Nutrition example card lateral padding reduction.
         Only target the three intro/example shells, not grid/selection. */
  .dp-di-nutri-card {
    padding-left: 10px;
    padding-right: 10px;
  }
  .dp-di-example-card {
    padding-left: 10px;
    padding-right: 10px;
  }
  .dp-di-example-wrap {
    padding-left: 6px;
    padding-right: 6px;
  }

  /* --- Task 3: Carbon 3-col spacing — move value/unit left by adding a
         dedicated gap between value (col2) and level (col3) via explicit
         column-gap, and lock level min-width floor so dot+text never
         gets overlapped by long units like "g CO₂e/100ml". */
  .dp-carbon-expand-unified .dp-unified-nutri-row,
  .dp-di-example-carb .dp-unified-nutri-row {
    grid-template-columns:
      minmax(40px, 44px)
      minmax(68px, auto)          /* value+unit (slight -4px floor) */
      minmax(60px, 72px);           /* level      (+8px/+12px floor) */
    column-gap: 5px;
    justify-content: start;
  }
  /* Optional: if the layout engine still puts level near the value
     because the right edge is unused, force level column to RIGHT-align
     within its grid track so the breathing room is always on the left. */
  .dp-carbon-expand-unified .dp-unified-nutri-row > .dp-unified-nutri-level,
  .dp-di-example-carb .dp-unified-nutri-row > .dp-unified-nutri-level {
    justify-self: end;
    min-width: 60px;
    display: inline-flex;
    align-items: center;
    column-gap: 4px;
    white-space: nowrap;
  }

  /* --- Task 4: Secondary pill containment inside on-demand rows.
         Never exceed product card right boundary; keep inline pill
         inside the buttons and Layered wrappers. */
  .dp-secondary-pill {
    max-width: 100%;
    box-sizing: border-box;
    overflow: visible; /* visual content must not be clipped */
  }
  button.dp-on-demand-text-btn .dp-secondary-pill {
    max-width: 100%;
    box-sizing: border-box;
    /* If wrap is needed, stay inside the button; fee+arrow are already
       nowrap so only 查看详情/收起 may wrap with the arrow inside pill. */
    flex-wrap: nowrap;
  }
  .dp-layered-nutrition-module .dp-secondary-pill,
  .dp-layered-carbon-module .dp-secondary-pill {
    max-width: 100%;
    box-sizing: border-box;
  }
  button.dp-on-demand-text-btn,
  .dp-product-info-area button.dp-on-demand-text-btn {
    max-width: 100%;
    box-sizing: border-box;
  }
  .dp-layered-nutrition-module,
  .dp-layered-carbon-module {
    max-width: 100%;
    box-sizing: border-box;
    overflow: hidden; /* not clipping content; only prevents layout
                         overflow caused by inline max-content children */
  }
}

@media (max-width: 340px) {
  /* Extreme narrow: keep the V2/V2.1 deterministic 2-row Nutrition and
     3-row Carbon fallbacks.  Only reinforce level floor + pill box. */
  .dp-unified-nutri-row:not(.carbon) > .dp-unified-nutri-level {
    min-width: 56px;
    white-space: nowrap;
  }
  .dp-carbon-expand-unified .dp-unified-nutri-row > .dp-unified-nutri-level,
  .dp-di-example-carb .dp-unified-nutri-row > .dp-unified-nutri-level {
    min-width: 54px;
    white-space: nowrap;
    justify-self: end;
  }
  .dp-secondary-pill {
    max-width: 100%;
    box-sizing: border-box;
  }
  .dp-layered-nutrition-module,
  .dp-layered-carbon-module {
    max-width: 100%;
    box-sizing: border-box;
  }
}

/* ==========================================================
   MOBILE_UI_TUNING_V2_2_END
   ========================================================== */

/* ==========================================================
   MOBILE_UI_V2_3_BEGIN
   Final micro CSS-only corrections.  No JS/DOM/event changes.
   ========================================================== */

/* ----------------- ≤680px: reclaim intro/example nested width. */
@media (max-width: 680px) {
  /* Outer intro wrapper: width 100%, mobile gutter ~7px. */
  .dp-domain-intro-wrap {
    width: 100%;
    padding: 16px 7px 18px;
    box-sizing: border-box;
  }
  /* Main nutrition/carbon card horizontal padding reduced to 7px. */
  .dp-di-nutri-card,
  .dp-di-carb-card {
    padding-left: 7px;
    padding-right: 7px;
  }
  /* Example card = 5px; innermost example wrap = 3px. */
  .dp-di-example-card {
    padding-left: 5px;
    padding-right: 5px;
  }
  .dp-di-example-wrap {
    padding-left: 3px;
    padding-right: 3px;
  }
}

/* ----------------- 341–680px ordinary phones: compact 4-col Nutrition
   plus Carbon value-left alignment, plus Low/High pill containment. */
@media (min-width: 341px) and (max-width: 680px) {
  /* --- TASK 1: Nutrition genuinely compact 4 columns.
         Tracks are bounded (no large `auto`).  justify-content:start
         prevents value column from stretching and pushing level right.
         Font shrinks modestly (-6%) for readability. */
  .dp-unified-nutri-row:not(.carbon) {
    grid-template-columns: 32px 64px 55px 46px;
    column-gap: 3px;
    row-gap: 3px;
    justify-content: start;
    font-size: 10.8px;
    line-height: 1.32;
    width: auto;
    max-width: 100%;
    box-sizing: border-box;
  }
  .dp-unified-nutri-row:not(.carbon) > .dp-unified-nutri-label {
    grid-column: auto;
    grid-row: auto;
    justify-self: start;
    font-size: 10.8px;
  }
  .dp-unified-nutri-row:not(.carbon) > .dp-unified-nutri-valunit {
    grid-column: auto;
    grid-row: auto;
    justify-self: start;
  }
  .dp-unified-nutri-row:not(.carbon) > .dp-unified-nutri-value {
    font-size: 12.2px;
  }
  .dp-unified-nutri-row:not(.carbon) > .dp-unified-nutri-unit {
    font-size: 10.3px;
  }
  .dp-unified-nutri-row:not(.carbon) > .dp-unified-nutri-nrv {
    grid-column: auto;
    grid-row: auto;
    justify-self: start;
    text-align: left;
    font-size: 9.9px;
    white-space: nowrap;
  }
  .dp-unified-nutri-row:not(.carbon) > .dp-unified-nutri-level {
    grid-column: auto;
    grid-row: auto;
    justify-self: start;
    font-size: 10.3px;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    column-gap: 4px;
  }
  .dp-unified-nutri-row:not(.carbon) > .dp-unified-empty {
    display: none !important;
  }

  /* --- Example nutrition parity with compact 4-col. */
  .dp-di-example-nutr .dp-unified-nutri-row:not(.carbon) {
    grid-template-columns: 30px 62px 53px 44px;
    column-gap: 3px;
    row-gap: 3px;
    justify-content: start;
    font-size: 10.8px;
  }
  .dp-di-example-nutr .dp-unified-nutri-row:not(.carbon) > * {
    grid-column: auto;
    grid-row: auto;
    justify-self: start;
  }
  .dp-di-example-nutr .dp-unified-nutri-row:not(.carbon) > .dp-unified-nutri-nrv {
    text-align: left;
    white-space: nowrap;
  }
  .dp-di-example-nutr .dp-unified-nutri-row:not(.carbon) > .dp-unified-nutri-level {
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    column-gap: 4px;
  }
  .dp-di-example-nutr .dp-unified-nutri-row:not(.carbon) > .dp-unified-empty {
    display: none !important;
  }

  /* --- TASK 3: Product-card Carbon label value-left, level-end. */
  .dp-carbon-expand-unified .dp-unified-nutri-row {
    grid-template-columns: 40px minmax(0, 1fr) 50px;
    column-gap: 5px;
    justify-content: start;
  }
  .dp-carbon-expand-unified .dp-unified-nutri-row > .dp-unified-nutri-label {
    grid-column: 1 / 2;
    grid-row: auto;
    justify-self: start;
  }
  .dp-carbon-expand-unified .dp-unified-nutri-row > .dp-unified-nutri-valunit {
    grid-column: 2 / 3;
    grid-row: auto;
    justify-self: start;
  }
  .dp-carbon-expand-unified .dp-unified-nutri-row > .dp-unified-nutri-level {
    grid-column: 3 / 4;
    grid-row: auto;
    justify-self: end;
    min-width: 50px;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    column-gap: 4px;
  }
  .dp-carbon-expand-unified .dp-unified-nutri-row > .dp-unified-nutri-nrv,
  .dp-carbon-expand-unified .dp-unified-nutri-row > .dp-unified-empty {
    display: none !important;
  }

  /* --- TASK 4: Low/High on-demand row containment (carbon+nutrition).
         2-col layout: left label, right pill.  width:100% + min-width:0.
         Pill appearance (color/radius/fill/wording) is preserved verbatim.
         Remove any accidental overflow:hidden on layered wrappers. */
  .dp-product-body > button.dp-on-demand-text-btn,
  .dp-product-info-area button.dp-on-demand-text-btn {
    display: grid;
    grid-template-columns: minmax(0, 1fr) max-content;
    column-gap: 6px;
    align-items: center;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
    padding-left: 0;
    padding-right: 10px;
  }
  .dp-product-body > button.dp-on-demand-text-btn .dp-od-label,
  .dp-product-info-area button.dp-on-demand-text-btn .dp-od-label {
    grid-column: 1 / 2;
    grid-row: auto;
    justify-self: start;
    min-width: 0;
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
  }
  .dp-product-body > button.dp-on-demand-text-btn .dp-secondary-pill,
  .dp-product-info-area button.dp-on-demand-text-btn .dp-secondary-pill {
    grid-column: 2 / 3;
    grid-row: auto;
    justify-self: end;
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
    flex-wrap: nowrap;
  }
  /* Clear V2.2 overflow:hidden; we want containment not clipping. */
  .dp-layered-nutrition-module,
  .dp-layered-carbon-module {
    overflow: visible;
    max-width: 100%;
    box-sizing: border-box;
  }
  .dp-layered-nutrition-module button.dp-on-demand-text-btn.dp-od-inline-slot,
  .dp-layered-carbon-module button.dp-on-demand-text-btn.dp-od-inline-slot {
    display: grid;
    grid-template-columns: minmax(0, 1fr) max-content;
    column-gap: 6px;
    align-items: center;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
  }
}

/* ----------------- ≤340px extreme narrow: deterministic fallbacks only. */
@media (max-width: 340px) {
  /* Nutrition retains existing V2.1 2-row structure; only tighten
     slightly so fallback remains readable. */
  .dp-unified-nutri-row:not(.carbon) > .dp-unified-nutri-level {
    min-width: 48px;
    white-space: nowrap;
    justify-self: end;
  }
  /* Carbon product label keeps 3-col with even tighter floors. */
  .dp-carbon-expand-unified .dp-unified-nutri-row {
    grid-template-columns: 38px minmax(0, 1fr) 48px;
    column-gap: 4px;
  }
  .dp-carbon-expand-unified .dp-unified-nutri-row > .dp-unified-nutri-label   { justify-self: start; }
  .dp-carbon-expand-unified .dp-unified-nutri-row > .dp-unified-nutri-valunit { justify-self: start; }
  .dp-carbon-expand-unified .dp-unified-nutri-row > .dp-unified-nutri-level   { justify-self: end; white-space: nowrap; min-width: 48px; }

  /* Low/High carbon row: fall back to deterministic 2-rows if needed,
     pill always on 2nd row right-aligned, appearance kept. */
  .dp-product-body > button.dp-on-demand-text-btn,
  .dp-product-info-area button.dp-on-demand-text-btn {
    display: grid;
    grid-template-columns: minmax(0, 1fr) max-content;
    column-gap: 4px;
    row-gap: 4px;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
  }
  .dp-product-body > button.dp-on-demand-text-btn .dp-secondary-pill,
  .dp-product-info-area button.dp-on-demand-text-btn .dp-secondary-pill {
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
  }
  .dp-layered-nutrition-module,
  .dp-layered-carbon-module {
    overflow: visible;
  }
}

/* ==========================================================
   MOBILE_UI_V2_3_END
   ========================================================== */

/* ==========================================================
   MOBILE_UI_V2_4_TARGETED_POLISH_BEGIN
   1) Intro page visual hierarchy (de-box heavy) on mobile.
   2) Product card info row: left title / right pill.
   3) Pill consistency: nutrition/carbon + Space delivery view
      (same pill visual language).
   4) Mobile nutrition 4-col visible; carbon value-left.
   5) Layered wording already handled in JS.
   ========================================================== */

@media (max-width: 680px) {
  /* ---------------- TASK 1: Intro page de-box heavy ---------------- */
  /* Reduce framing: keep main wrapper but remove inner card paddings and
     heavy borders for explanatory notes / aux copy / comprehension. */
  .dp-domain-intro-wrap {
    padding: 14px 6px 16px;
    background-color: #ffffff;
  }
  .dp-di-nutri-card,
  .dp-di-carb-card,
  .dp-di-example-card {
    border: none;
    border-radius: 0;
    box-shadow: none;
    background-color: transparent;
    padding: 4px 0 6px;
  }
  /* Example wrap gets very light background so label still feels like a
     single card visually (matches product card label style). */
  .dp-di-example-wrap {
    border: 1px solid #e9edf5;
    border-radius: 8px;
    background-color: #ffffff;
    padding: 8px 6px;
    margin: 4px 0 8px;
  }
  /* Compose/cohesion / comprehension containers: drop heavy framing. */
  .dp-comprehension-wrap,
  .dp-rule-card-section,
  .dp-rule-card,
  .dp-page-note-body > div {
    border: none;
    box-shadow: none;
    background-color: transparent;
    padding-left: 0;
    padding-right: 0;
  }
  /* Keep small natural spacing between the three semantic layers above. */
  .dp-di-intro-text,
  .dp-di-example-heading,
  .dp-di-carb-heading {
    margin-top: 2px;
    margin-bottom: 4px;
  }

  /* ---------------- TASK 2: Product card info rows L title / R pill  */
  /* Free/Low/High on-demand buttons (nutrition + carbon) */
  .dp-product-body > button.dp-on-demand-text-btn,
  .dp-product-info-area button.dp-on-demand-text-btn {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
    padding: 5px 10px 6px 0;
    gap: 8px;
  }
  /* Delivery info row: same flex space-between alignment. */
  .dp-product-delivery + .dp-product-delivery,
  button.dp-delivery-info-btn {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
    padding: 4px 10px 5px 0;
    gap: 8px;
  }
  /* Layered collapsed module: row title (if any) + CTA pill alignment. */
  .dp-layered-nutrition-module:not(.is-open),
  .dp-layered-carbon-module:not(.is-open) {
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
  }
  .dp-layered-nutrition-module:not(.is-open) > .dp-nutrition-expand-summary,
  .dp-layered-carbon-module:not(.is-open) > .dp-carbon-expand-summary {
    flex: 1 1 auto;
    min-width: 0;
  }

  /* ---------------- TASK 3: Pill consistency across all on-demand
     (Nutrition / Carbon + Space delivery information) = same pill. */
  .dp-secondary-pill,
  button.dp-delivery-info-btn .dp-secondary-pill /* delivery uses same wrap */
  {
    display: inline-flex;
    align-items: center;
    column-gap: 4px;
    padding: 3px 9px;
    border-radius: 999px;
    background-color: rgba(46, 117, 255, 0.08);
    color: #2e75ff;
    font-weight: 500;
    font-size: 13.5px;
    line-height: 1.35;
    white-space: nowrap;
    max-width: 100%;
    box-sizing: border-box;
    /* Weak stroke keeps pill-like feel without heavy border. */
    border: 1px solid rgba(46, 117, 255, 0.16);
  }
  /* Delivery info: if its current HTML doesn't wrap action into pill,
     rewrite its layout so its "查看详情 ›" lives in a pill too. */
  button.dp-delivery-info-btn {
    padding: 5px 10px 6px 0 !important;
  }
  button.dp-delivery-info-btn::after {
    /* Do nothing; actual wrap supplied by JS below.  Keep selector stable. */
    content: "";
  }
  /* Layered collapsed modules CTA pill = same visual pill. */
  .dp-layered-nutrition-module button.dp-on-demand-text-btn.dp-od-inline-slot,
  .dp-layered-carbon-module   button.dp-on-demand-text-btn.dp-od-inline-slot {
    display: inline-flex;
    align-items: center;
  }

  /* ---------------- TASK 4: Nutrition 4-col iPhone-safe.
     Do NOT enlarge level column.  Reclaim space from padding/gaps. */
  .dp-nutrition-expand-unified {
    padding-left: 7px;
    padding-right: 7px;
  }
  .dp-unified-nutri-row:not(.carbon) {
    grid-template-columns: 30px 60px 52px 44px;
    column-gap: 2px;
    row-gap: 2px;
    justify-content: start;
    font-size: 10.6px;
  }
  .dp-di-example-nutr .dp-unified-nutri-row:not(.carbon) {
    grid-template-columns: 28px 58px 50px 42px;
    column-gap: 2px;
    row-gap: 2px;
    justify-content: start;
  }
  .dp-unified-nutri-row:not(.carbon) > .dp-unified-empty {
    display: none !important;
  }

  /* ---------------- TASK 5: Carbon value-left, breathing to level. */
  .dp-carbon-expand-unified .dp-unified-nutri-row {
    grid-template-columns: 38px minmax(0, 1fr) 46px;
    column-gap: 6px;
    justify-content: start;
  }
  .dp-carbon-expand-unified .dp-unified-nutri-row > .dp-unified-nutri-valunit {
    justify-self: start;
  }
  .dp-carbon-expand-unified .dp-unified-nutri-row > .dp-unified-nutri-level {
    justify-self: end;
    min-width: 46px;
    white-space: nowrap;
  }
}

/* Narrow extreme ≤340px: preserve 4-col /3-col with tighter floors. */
@media (max-width: 340px) {
  .dp-unified-nutri-row:not(.carbon) {
    grid-template-columns: 28px 56px 48px 42px;
    column-gap: 2px;
    font-size: 10.4px;
  }
  .dp-di-example-nutr .dp-unified-nutri-row:not(.carbon) {
    grid-template-columns: 26px 54px 46px 40px;
    column-gap: 2px;
  }
  .dp-carbon-expand-unified .dp-unified-nutri-row {
    grid-template-columns: 36px minmax(0, 1fr) 44px;
    column-gap: 5px;
  }
  .dp-carbon-expand-unified .dp-unified-nutri-row > .dp-unified-nutri-level {
    min-width: 44px;
  }
}

/* ==========================================================
   MOBILE_UI_V2_4_TARGETED_POLISH_END
   ========================================================== */

/* ==========================================================
   V2.7 MOBILE PRECISION FIX BEGIN
   Scope: ≤680px ONLY.
   Aims:
     1) Nutrition 4th column (level) fully visible → tighten
        NRV→level spacing, level justify, remove shell padding.
     2) Carbon action row single line (label · [查看详情 pill])
        → zero gap, dot kept, reduce pill padding.
     3) Layered COLLAPSED summary MUST show full nutrition row
        (nutrient + value + NRV + level) and full carbon row
        (value + level).  Expand inner width / reduce padding.
     4) Explanation pages: remove comprehension outer boxes,
        keep only main container + example label box; reduce
        mobile horizontal padding.
   No event / data-id / logic / price / randomization changes.
   ========================================================== */

@media (max-width: 680px) {
  /* ----- TASK 1: Nutrition 4th level column + NRV→level gap.
     Do NOT move nutrient / value columns.  Only reduce spacing
     between NRV (col3) and level (col4) and inner shell padding. */
  .dp-nutrition-expand-unified,
  .dp-nutrition-expand-summary {
    padding-left: 4px;
    padding-right: 4px;
    max-width: 100%;
    box-sizing: border-box;
  }
  .dp-unified-nutri-row:not(.carbon) {
    /* Reuse V2.4 4-col floors but shrink column-gap col3→col4 by
       applying 1.5px total gap instead of 2px AND force level to
       sit at start of its column so it never gets pushed off the
       right edge by stretched trailing whitespace. */
    grid-template-columns: 30px 60px 52px 44px;
    column-gap: 1.5px;
    row-gap: 2px;
    justify-content: start;
  }
  .dp-unified-nutri-row:not(.carbon) > .dp-unified-nutri-level {
    justify-self: start;
    align-self: center;
    min-width: 44px;
    display: inline-flex;
    align-items: center;
    column-gap: 3px;
    white-space: nowrap;
    padding-right: 0;
  }
  /* NRV right padding removed so it doesn't steal width from level. */
  .dp-unified-nutri-row:not(.carbon) > .dp-unified-nutri-nrv {
    justify-self: start;
    text-align: left;
    white-space: nowrap;
    padding-right: 0;
    margin-right: 0;
  }
  /* Example nutrition parity — same NRV→level tightening. */
  .dp-di-example-nutr .dp-unified-nutri-row:not(.carbon) {
    grid-template-columns: 28px 58px 50px 42px;
    column-gap: 1.5px;
  }
  .dp-di-example-nutr .dp-unified-nutri-row:not(.carbon) > .dp-unified-nutri-nrv {
    justify-self: start;
    padding-right: 0;
    white-space: nowrap;
  }
  .dp-di-example-nutr .dp-unified-nutri-row:not(.carbon) > .dp-unified-nutri-level {
    justify-self: start;
    min-width: 42px;
    white-space: nowrap;
  }

  /* ----- TASK 2: Carbon action row single line with dot separator.
     Structure is 4 children: label · dot · pill [·price inside pill].
     We use inline-flex nowrap + tight gaps.  Pill padding reduced. */
  button.dp-on-demand-text-btn.dp-carbon-info-btn,
  button.dp-on-demand-text-btn.dp-nutrition-info-btn {
    display: inline-flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: flex-start;
    gap: 3px;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    padding: 4px 4px 5px 0;
    overflow: visible;
  }
  button.dp-on-demand-text-btn.dp-carbon-info-btn > .dp-od-label,
  button.dp-on-demand-text-btn.dp-nutrition-info-btn > .dp-od-label {
    flex: 0 0 auto;
    white-space: nowrap;
    font-size: 13.5px;
  }
  button.dp-on-demand-text-btn.dp-carbon-info-btn > .dp-od-dot,
  button.dp-on-demand-text-btn.dp-nutrition-info-btn > .dp-od-dot {
    flex: 0 0 auto;
    margin: 0 1px;
  }
  button.dp-on-demand-text-btn.dp-carbon-info-btn > .dp-secondary-pill,
  button.dp-on-demand-text-btn.dp-nutrition-info-btn > .dp-secondary-pill {
    flex: 1 1 auto;
    justify-content: flex-end;
    min-width: 0;
    max-width: 100%;
    padding: 2px 8px;
    column-gap: 3px;
    box-sizing: border-box;
    white-space: nowrap;
    overflow: visible;
  }

  /* ----- TASK 3: Layered summary container width expansion + full
     row preservation.  Nutrition collapsed keeps 4-col; carbon
     collapsed keeps value+level (JS now shows value too).  Wrapper
     gets max-width 100% + small outer padding. */
  .dp-layered-nutrition-module,
  .dp-layered-carbon-module {
    max-width: 100%;
    box-sizing: border-box;
    padding-left: 2px;
    padding-right: 2px;
    overflow: visible;
    row-gap: 6px;
  }
  .dp-layered-nutrition-module:not(.is-open) > .dp-nutrition-expand-summary,
  .dp-layered-carbon-module:not(.is-open) > .dp-carbon-expand-summary {
    flex: 1 1 auto;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    padding-left: 4px;
    padding-right: 4px;
  }
  /* Nutrition summary 1 row = same 4-col as full label, tighter shell. */
  .dp-nutrition-expand-summary > .dp-unified-nutri-row:not(.carbon) {
    grid-template-columns: 30px 60px 52px 44px;
    column-gap: 1.5px;
    row-gap: 2px;
    justify-content: start;
  }
  .dp-nutrition-expand-summary > .dp-unified-nutri-row:not(.carbon) > .dp-unified-nutri-level {
    justify-self: start;
    min-width: 44px;
    white-space: nowrap;
  }
  .dp-nutrition-expand-summary > .dp-unified-nutri-row:not(.carbon) > .dp-unified-nutri-nrv {
    justify-self: start;
    white-space: nowrap;
    padding-right: 0;
  }
  /* Carbon summary 1 row = 3-col label|value+unit|level with value
     moved left and breathing space before level. */
  .dp-carbon-expand-summary > .dp-unified-nutri-row.carbon,
  .dp-carbon-expand-summary > .dp-unified-nutri-row:not(.carbon) {
    grid-template-columns: 40px minmax(0, 1fr) 48px;
    column-gap: 5px;
    justify-content: start;
  }
  .dp-carbon-expand-summary > .dp-unified-nutri-row > .dp-unified-nutri-valunit {
    justify-self: start;
    min-width: 0;
  }
  .dp-carbon-expand-summary > .dp-unified-nutri-row > .dp-unified-nutri-level {
    justify-self: end;
    min-width: 48px;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    column-gap: 4px;
  }
  .dp-carbon-expand-summary > .dp-unified-nutri-row > .dp-unified-empty,
  .dp-carbon-expand-summary > .dp-unified-nutri-row > .dp-unified-nutri-nrv {
    display: none !important;
  }

  /* ----- TASK 4: Explanation pages — remove outer comprehension
     boxes; keep main container + example label box.  Reduce horizontal
     mobile padding. */
  .dp-domain-intro-wrap {
    padding: 12px 5px 14px;
    width: 100%;
    box-sizing: border-box;
  }
  .dp-rule-card-section,
  .dp-rule-card,
  .dp-comprehension-wrap,
  .dp-page-note-body > div,
  .dp-phase2-cohesion-section,
  .dp-comprehension-check-section {
    border: none;
    box-shadow: none;
    background-color: transparent;
    padding: 2px 0;
    margin: 4px 0;
  }
  /* Keep example label box as the single visual card. */
  .dp-di-example-card {
    border: 1px solid #e9edf5;
    border-radius: 8px;
    background-color: #ffffff;
    padding: 6px 4px;
    margin: 6px 0 8px;
  }
  .dp-di-example-wrap {
    padding: 2px 2px;
    margin: 0;
    background-color: transparent;
    border: none;
    border-radius: 0;
  }
  .dp-di-nutri-card,
  .dp-di-carb-card {
    padding: 2px 4px;
    margin: 2px 0;
  }
}

/* ---------------- Extreme narrow ≤340: safety thresholds.
   Keep 4-col Nutrition and 3-col Carbon still fully visible; reduce
   padding further only if needed.  Level column NEVER clips. */
@media (max-width: 340px) {
  .dp-unified-nutri-row:not(.carbon) {
    grid-template-columns: 28px 54px 46px 40px;
    column-gap: 1.5px;
  }
  .dp-unified-nutri-row:not(.carbon) > .dp-unified-nutri-level {
    min-width: 40px;
  }
  .dp-di-example-nutr .dp-unified-nutri-row:not(.carbon) {
    grid-template-columns: 26px 52px 44px 38px;
    column-gap: 1.5px;
  }
  .dp-nutrition-expand-unified,
  .dp-nutrition-expand-summary,
  .dp-carbon-expand-summary {
    padding-left: 2px;
    padding-right: 2px;
  }
  /* Carbon action row: last-resort wrap pill but keep dot, label. */
  button.dp-on-demand-text-btn.dp-carbon-info-btn,
  button.dp-on-demand-text-btn.dp-nutrition-info-btn {
    flex-wrap: nowrap;
    gap: 2px;
  }
  button.dp-on-demand-text-btn.dp-carbon-info-btn > .dp-secondary-pill,
  button.dp-on-demand-text-btn.dp-nutrition-info-btn > .dp-secondary-pill {
    padding: 2px 6px;
    font-size: 13px;
  }
}

/* ==========================================================
   V2.7 MOBILE PRECISION FIX END
   ========================================================== */

/* ==========================================================
   PREVIEW_VISUAL_LAYOUT_FIX_V28_BEGIN
   A. 公共信息说明页
   B. 商品卡公共信息
   C. Low/High 收费胶囊
   D. Layered 摘要/展开
   仅 CSS 布局 + Layered 摘要 Carbon 最小 JS 已同步在 JS
   中单独恢复 mode===summary 隐藏值/单位（D2）。
   ========================================================== */

/* -------------------------- A. 公共信息说明页 ------------------------ */
@media (max-width: 680px) {
  /* A1. 最外层宽度减少留白 → 对齐商品页可用宽度 */
  .dp-domain-intro-wrap,
  .dp-di-container {
    padding-left: 6px;
    padding-right: 6px;
    width: 100%;
    box-sizing: border-box;
  }
  /* 顶部轮次标识不覆盖正文：保证上方间距 ≥ 顶部 sticky header 实际高度 */
  .dp-phase-identity-sticky + .dp-domain-intro-wrap {
    padding-top: 8px;
  }
  .dp-phase-identity-sticky + .dp-domain-intro-wrap > .dp-di-container {
    padding-top: 6px;
  }

  /* A2. Q1/Q2 理解题外层框去掉 border/shadow/box bg */
  .dp-comprehension-wrap,
  .dp-comprehension-check-section,
  .dp-phase2-cohesion-section,
  .dp-rule-card-section,
  .dp-rule-card,
  .dp-page-note-body > div {
    border: none !important;
    box-shadow: none !important;
    background-color: transparent !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  .dp-comprehension-wrap .dp-comprehension-options,
  .dp-phase2-cohesion-section .dp-cohesion-options {
    padding: 2px 0;
  }
  /* 保留 Q编号/题干/radio 选项；选项整行展示不易挤成 2-3 行 */
  .dp-comprehension-question,
  .dp-question-prompt,
  .dp-cohesion-question {
    margin: 4px 0 2px;
  }
  .dp-option-label {
    white-space: nowrap;
  }

  /* A3. 营养示例框：仅保留「每100g」一行 + 3 行营养素；其它标题/说明在框外。 */
  .dp-di-example-card {
    border: 1px solid #e9edf5;
    border-radius: 8px;
    background-color: #ffffff;
    padding: 8px 6px;
    margin: 8px 0 6px;
  }
  .dp-di-example-title,
  .dp-di-example-subtitle,
  .dp-di-example-card .dp-di-example-caption {
    display: none !important;   /* 必须移出框外，框里只留 basis + 3 行 */
  }
  .dp-di-example-caption-outside {
    display: block;
    margin: 2px 2px 10px;
    padding: 0 2px;
    font-size: 12px;
    color: #5a6680;
  }
  .dp-di-example-basis-label {
    font-size: 11px;
    color: #8a94a8;
    margin: 0 2px 4px;
    line-height: 1.35;
  }

  /* A4. 营养示例表格列间距：value 与 NRV 距离过近 → 加大 col2/col3 gap */
  .dp-di-example-nutr .dp-unified-nutri-row:not(.carbon) {
    grid-template-columns: 28px 58px 54px 42px;
    /* 对 col2 → col3 故意多 2px（通过显式 nth-child 后 margin 补） */
    column-gap: 2px;
    row-gap: 2px;
    justify-content: start;
  }
  .dp-di-example-nutr .dp-unified-nutri-row:not(.carbon) > .dp-unified-nutri-valunit {
    margin-right: 4px; /* col2→col3 的额外呼吸 */
  }
  .dp-di-example-nutr .dp-unified-nutri-row:not(.carbon) > .dp-unified-nutri-nrv {
    white-space: nowrap;
    padding-right: 0;
  }
  .dp-di-example-nutr .dp-unified-nutri-row:not(.carbon) > .dp-unified-nutri-level {
    white-space: nowrap;
    min-width: 42px;
  }
}

/* -------------------------- B. 商品卡公共信息 ------------------------ */
@media (max-width: 680px) {
  /* B1. 营养标签 4 列完整显示（展开/摘要状态一致），重点保护 level col4 不裁切 */
  .dp-unified-nutri-row:not(.carbon) {
    grid-template-columns: 28px 58px 54px 42px;
    column-gap: 2px;
    row-gap: 2px;
    justify-content: start;
  }
  .dp-unified-nutri-row:not(.carbon) > .dp-unified-nutri-valunit {
    margin-right: 4px; /* 与示例一致：col2→col3 加呼吸 */
  }
  .dp-unified-nutri-row:not(.carbon) > .dp-unified-nutri-nrv {
    justify-self: start;
    white-space: nowrap;
  }
  .dp-unified-nutri-row:not(.carbon) > .dp-unified-nutri-level {
    justify-self: start;
    min-width: 42px;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    column-gap: 3px;
  }
  /* Layered 摘要/展开、Both/Space 统一壳：都用同一 4 列模板 */
  .dp-nutrition-expand-unified,
  .dp-nutrition-expand-summary {
    padding-left: 3px;
    padding-right: 3px;
    max-width: 100%;
    box-sizing: border-box;
  }

  /* B2. 碳足迹展开状态：3 列清晰间距；名称/数值/等级不重叠 */
  .dp-carbon-expand-unified .dp-unified-nutri-row {
    grid-template-columns: 40px minmax(0, 1fr) 48px;
    column-gap: 8px;
    justify-content: start;
  }
  .dp-carbon-expand-unified .dp-unified-nutri-row > .dp-unified-nutri-label   { justify-self: start; }
  .dp-carbon-expand-unified .dp-unified-nutri-row > .dp-unified-nutri-valunit { justify-self: start; min-width: 0; }
  .dp-carbon-expand-unified .dp-unified-nutri-row > .dp-unified-nutri-level   {
    justify-self: end;
    min-width: 48px;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    column-gap: 4px;
  }
  .dp-carbon-expand-unified .dp-unified-nutri-row > .dp-unified-empty,
  .dp-carbon-expand-unified .dp-unified-nutri-row > .dp-unified-nutri-nrv {
    display: none !important;
  }
  .dp-carbon-expand-unified {
    padding-left: 4px;
    padding-right: 4px;
  }
}

/* -------------------------- C. Low/High 收费胶囊 -------------------- */
@media (max-width: 680px) {
  /* 结构：营养信息 · [查看详情 ¥0.xx >] ；只有一个「·」分隔，不增不减。
     目标：pill 左 padding 增加，文字不贴左边界；整体向右侧合理扩展但不
     溢出卡片，也不遮挡左侧文案与「·」。*/
  button.dp-on-demand-text-btn.dp-nutrition-info-btn,
  button.dp-on-demand-text-btn.dp-carbon-info-btn {
    display: inline-flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: flex-start;
    gap: 4px;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    padding: 4px 4px 5px 0;
  }
  button.dp-on-demand-text-btn.dp-nutrition-info-btn > .dp-od-label,
  button.dp-on-demand-text-btn.dp-carbon-info-btn > .dp-od-label {
    flex: 0 0 auto;
    white-space: nowrap;
  }
  button.dp-on-demand-text-btn.dp-nutrition-info-btn > .dp-od-dot,
  button.dp-on-demand-text-btn.dp-carbon-info-btn > .dp-od-dot {
    flex: 0 0 auto;
    margin: 0 2px;
  }
  /* Pill：左右 padding 拉到正常留白；需要时允许 min-width 保底；
     不使用固定 width；max-width 受 100% 约束不会溢出卡片右边界 */
  button.dp-on-demand-text-btn.dp-nutrition-info-btn > .dp-secondary-pill,
  button.dp-on-demand-text-btn.dp-carbon-info-btn > .dp-secondary-pill {
    flex: 1 1 auto;
    justify-content: flex-end;
    min-width: 176px;
    padding: 4px 12px;
    column-gap: 5px;
    max-width: 100%;
    box-sizing: border-box;
    white-space: nowrap;
    overflow: visible;
  }
  .dp-secondary-pill .dp-od-action {
    margin: 0 1px;
  }
  .dp-secondary-pill .dp-od-price {
    margin: 0 1px;
  }
}

/* -------------------------- D. Layered 独立组件 ---------------------- */
@media (max-width: 680px) {
  /* D1. Nutrition 摘要：4 列完整（营养名/值/NRV/等级） */
  .dp-layered-nutrition-module:not(.is-open) > .dp-nutrition-expand-summary {
    padding-left: 2px;
    padding-right: 2px;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }
  .dp-nutrition-expand-summary > .dp-unified-nutri-row:not(.carbon) {
    grid-template-columns: 28px 58px 54px 42px;
    column-gap: 2px;
    row-gap: 2px;
    justify-content: start;
  }
  .dp-nutrition-expand-summary > .dp-unified-nutri-row:not(.carbon) > .dp-unified-nutri-valunit {
    margin-right: 4px; /* col2→col3 额外呼吸 */
  }
  .dp-nutrition-expand-summary > .dp-unified-nutri-row:not(.carbon) > .dp-unified-nutri-nrv {
    justify-self: start;
    white-space: nowrap;
  }
  .dp-nutrition-expand-summary > .dp-unified-nutri-row:not(.carbon) > .dp-unified-nutri-level {
    justify-self: start;
    min-width: 42px;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    column-gap: 3px;
  }

  /* D2. Carbon 摘要：JS 已强制 mode summary 只出 名称+等级（值/单位为 empty
     span 占位但不显示）。CSS 保证 3 列布局、等级不贴值。
     Layered 展开状态走 B2 同样规则。 */
  .dp-layered-carbon-module:not(.is-open) > .dp-carbon-expand-summary {
    padding-left: 3px;
    padding-right: 3px;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }
  .dp-carbon-expand-summary > .dp-unified-nutri-row {
    grid-template-columns: 40px 1fr 48px;
    column-gap: 8px;
    justify-content: start;
  }
  .dp-carbon-expand-summary > .dp-unified-nutri-row > .dp-unified-nutri-label   { justify-self: start; }
  .dp-carbon-expand-summary > .dp-unified-nutri-row > .dp-unified-nutri-valunit { display: none !important; }
  .dp-carbon-expand-summary > .dp-unified-nutri-row > .dp-unified-nutri-level   {
    justify-self: start;   /* 摘要：等级紧跟名后，不额外右锚 */
    min-width: 48px;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    column-gap: 4px;
  }
  .dp-carbon-expand-summary > .dp-unified-nutri-row > .dp-unified-empty,
  .dp-carbon-expand-summary > .dp-unified-nutri-row > .dp-unified-nutri-nrv {
    display: none !important;
  }
}

/* 极窄屏阈值 ≤340px：继续收紧留白但不破坏任何一列显示 */
@media (max-width: 340px) {
  .dp-unified-nutri-row:not(.carbon) {
    grid-template-columns: 26px 54px 50px 40px;
    column-gap: 2px;
  }
  .dp-unified-nutri-row:not(.carbon) > .dp-unified-nutri-level {
    min-width: 40px;
  }
  .dp-di-example-nutr .dp-unified-nutri-row:not(.carbon) {
    grid-template-columns: 26px 54px 50px 40px;
  }
  .dp-carbon-expand-unified .dp-unified-nutri-row,
  .dp-carbon-expand-summary .dp-unified-nutri-row {
    grid-template-columns: 38px minmax(0, 1fr) 46px;
    column-gap: 6px;
  }
  .dp-carbon-expand-unified .dp-unified-nutri-row > .dp-unified-nutri-level,
  .dp-carbon-expand-summary .dp-unified-nutri-row > .dp-unified-nutri-level {
    min-width: 46px;
  }
  button.dp-on-demand-text-btn.dp-nutrition-info-btn > .dp-secondary-pill,
  button.dp-on-demand-text-btn.dp-carbon-info-btn > .dp-secondary-pill {
    min-width: 160px;
    padding: 3px 10px;
  }
}

/* ==========================================================
   PREVIEW_VISUAL_LAYOUT_FIX_V28_END
   ========================================================== */

/* ==========================================================
   V2.9_TARGETED_LAYOUT_TUNING_BEGIN
   A. 说明页（非 Control）：外层 padding + 示例列间距。
   B. 商品卡查看详情 Free/Low/High pill 收紧。
   C. Low/High 收费 pill 收紧。
   D. Layered: Nutrition summary 去 NRV→level 多余间距；
               Carbon summary 缩短 label→level 并保持
               同一行不换行（label+level+查看详情）。
   无实验逻辑 / 随机 / data-* / event logging / 收费 /
   数值 / 文案 变更。
   ========================================================== */

/* ----------------------- A. 信息说明页公共组件（≤680px）------------------ */
@media (max-width: 680px) {
  /* A. 缩小最外层容器左右 padding，对齐商品页可用宽度。 */
  .dp-domain-intro-wrap,
  .dp-di-container {
    padding-left: 4px;
    padding-right: 4px;
    width: 100%;
    box-sizing: border-box;
  }
  .dp-di-nutri-card,
  .dp-di-carb-card {
    padding-left: 3px;
    padding-right: 3px;
  }
  .dp-di-example-card {
    padding-left: 4px;
    padding-right: 4px;
  }
  .dp-di-example-wrap {
    padding-left: 2px;
    padding-right: 2px;
  }

  /* A. 营养标签示例列分布：四列保留，value ↔ NRV 增加呼吸，
     NRV ↔ level 也增加呼吸，value 与 NRV 之间避免拥挤，
     但整体总宽度不超出容器。字号/内容不变。 */
  .dp-di-example-nutr .dp-unified-nutri-row:not(.carbon) {
    grid-template-columns: 28px 58px 56px 44px;
    column-gap: 3px;
    row-gap: 3px;
    justify-content: start;
  }
  .dp-di-example-nutr .dp-unified-nutri-row:not(.carbon) > .dp-unified-nutri-valunit {
    margin-right: 6px;       /* value → NRV：额外呼吸 */
  }
  .dp-di-example-nutr .dp-unified-nutri-row:not(.carbon) > .dp-unified-nutri-nrv {
    margin-right: 5px;       /* NRV → level：额外呼吸 */
    white-space: nowrap;
    justify-self: start;
  }
  .dp-di-example-nutr .dp-unified-nutri-row:not(.carbon) > .dp-unified-nutri-level {
    min-width: 44px;
    white-space: nowrap;
  }
}

/* ----------------------- B. 商品卡 Free/Low/High 查看详情 pill 收紧 -------- */
@media (max-width: 680px) {
  /* B. 所有 secondary pill（查看详情/收起 + 非收费的 Free 查看详情）：
     水平 padding 收紧、内部列 gap 收紧、不额外加大宽度。
     Pill 外观/颜色/圆角/文案不变。 */
  .dp-secondary-pill {
    padding: 2px 6px;
    column-gap: 3px;
  }
  /* B. 按钮容器整体收紧：不影响左侧「·」分隔点，仅缩短 pill 水平留白 */
  button.dp-on-demand-text-btn.dp-nutrition-info-btn,
  button.dp-on-demand-text-btn.dp-carbon-info-btn {
    gap: 2px;
    padding: 4px 4px 5px 0;
  }
  button.dp-on-demand-text-btn.dp-nutrition-info-btn > .dp-od-dot,
  button.dp-on-demand-text-btn.dp-carbon-info-btn > .dp-od-dot {
    margin: 0 1px;
  }
  button.dp-on-demand-text-btn.dp-nutrition-info-btn > .dp-od-label,
  button.dp-on-demand-text-btn.dp-carbon-info-btn > .dp-od-label {
    white-space: nowrap;
  }
}

/* ----------------------- C. Low/High 收费 pill 收紧 ---------------------- */
@media (max-width: 680px) {
  /* C. 收费 pill：与 B 统一更紧凑的水平 padding 与 gap，取消最小宽度硬
     值，避免 pill 横向过长。收费金额/查看详情/箭头/点击逻辑保持不变。 */
  button.dp-on-demand-text-btn.dp-nutrition-info-btn > .dp-secondary-pill,
  button.dp-on-demand-text-btn.dp-carbon-info-btn > .dp-secondary-pill {
    padding: 2px 8px;
    min-width: 0;
    column-gap: 4px;
    flex: 0 1 auto;           /* 不再按剩余空间自动扩展；保持紧凑 */
  }
}

/* ----------------------- D. Layered 专项 --------------------------------- */
@media (max-width: 680px) {
  /* D1. Nutrition summary：只减少 NRV → level 间距，level 轻微截断问题应
     消除。营养名/值/NRV/等级内容不变。 */
  .dp-nutrition-expand-summary > .dp-unified-nutri-row:not(.carbon) > .dp-unified-nutri-nrv {
    margin-right: 2px;       /* NRV → level：缩减 */
    padding-right: 0;
  }
  .dp-nutrition-expand-summary > .dp-unified-nutri-row:not(.carbon) > .dp-unified-nutri-level {
    min-width: 42px;
    padding-left: 0;
    padding-right: 0;
    white-space: nowrap;
  }

  /* D2. Carbon summary：一行显示 label + level + 右侧「查看详情」（CTA），
     不换行。减少 label → level 之间距离；保持 summary 不显示数值（由 JS
     保证 valunit hidden）。 */
  .dp-layered-carbon-module:not(.is-open) {
    display: grid;
    grid-template-columns: minmax(0, 1fr) max-content;
    column-gap: 8px;
    align-items: center;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    flex-wrap: nowrap;
  }
  .dp-layered-carbon-module:not(.is-open) > .dp-carbon-expand-summary {
    grid-column: 1 / 2;
    grid-row: auto;
    min-width: 0;
  }
  .dp-layered-carbon-module:not(.is-open) > button.dp-on-demand-text-btn.dp-od-inline-slot {
    grid-column: 2 / 3;
    grid-row: auto;
    justify-self: end;
    min-width: 0;
    max-width: 100%;
    display: inline-flex;
    flex-wrap: nowrap;
  }
  /* Carbon summary 内部：label → level 之间列 gap 收紧；level 不右锚 */
  .dp-carbon-expand-summary > .dp-unified-nutri-row {
    grid-template-columns: 40px 1fr 46px;
    column-gap: 3px;
    justify-content: start;
  }
  .dp-carbon-expand-summary > .dp-unified-nutri-row > .dp-unified-nutri-label { justify-self: start; }
  .dp-carbon-expand-summary > .dp-unified-nutri-row > .dp-unified-nutri-level {
    justify-self: start;       /* 与 label 紧贴；保持一行 label + level */
    min-width: 46px;
    white-space: nowrap;
    column-gap: 3px;
  }
}

/* Extreme narrow ≤340px：保持相同收紧比例，不引入额外 break。 */
@media (max-width: 340px) {
  .dp-secondary-pill {
    padding: 2px 5px;
    column-gap: 2px;
  }
  .dp-di-example-nutr .dp-unified-nutri-row:not(.carbon) {
    grid-template-columns: 26px 54px 52px 42px;
    column-gap: 2px;
  }
  .dp-di-example-nutr .dp-unified-nutri-row:not(.carbon) > .dp-unified-nutri-valunit {
    margin-right: 4px;
  }
  .dp-di-example-nutr .dp-unified-nutri-row:not(.carbon) > .dp-unified-nutri-nrv {
    margin-right: 3px;
  }
  .dp-carbon-expand-summary > .dp-unified-nutri-row {
    grid-template-columns: 38px 1fr 44px;
    column-gap: 2px;
  }
}

/* ==========================================================
   V2.9_TARGETED_LAYOUT_TUNING_END
   ========================================================== */

/* ==========================================================
   V3.0_CSS_MICRO_TUNING_BEGIN
   Scope: ≤680px mobile.
   A. 说明页示例框 padding + 列间距（不改字号/文案）
   B. 商品卡信息按钮：字号恢复（label/pill action 整体比配送大~0.5px）
      + Free 普通胶囊 button width/padding/左标签间距 紧凑整体
   C. Low/High 收费胶囊：右微移 + 略宽 + 左右 padding 舒展
   D. Layered 专项：
      D1. Nutrition summary NRV→level 间距 + level 位置（不截）
      D2. Carbon summary：level 与 CTA 胶囊之间的空白压缩，
          胶囊整体左移，保持同 row
   无 JS / 展示逻辑 / 展开收起 / 收费 / event / data-* 变更。
   ========================================================== */

@media (max-width: 680px) {
  /* ===================== A. 信息说明页公共组件 ====================== */
  /* A1. 示例框内部 padding + 列 gap 调整。
     每100g 更靠右 不会贴右边框；value↔NRV、NRV↔level 视觉更自然。 */
  .dp-di-example-card {
    padding-left: 6px;
    padding-right: 8px;
  }
  .dp-di-example-wrap {
    padding-left: 2px;
    padding-right: 2px;
  }
  .dp-di-example-nutr .dp-unified-nutri-row:not(.carbon) {
    grid-template-columns: 28px 58px 56px 44px;
    column-gap: 4px;                  /* 全局列间隙略放大，value↔NRV 不挤 */
    row-gap: 3px;
    justify-content: start;
  }
  /* value→NRV 额外呼吸 */
  .dp-di-example-nutr .dp-unified-nutri-row:not(.carbon) > .dp-unified-nutri-valunit {
    margin-right: 7px;
  }
  /* NRV→level 额外呼吸 */
  .dp-di-example-nutr .dp-unified-nutri-row:not(.carbon) > .dp-unified-nutri-nrv {
    margin-right: 6px;
    white-space: nowrap;
    justify-self: start;
  }
  /* level 列保持独立空间 */
  .dp-di-example-nutr .dp-unified-nutri-row:not(.carbon) > .dp-unified-nutri-level {
    min-width: 44px;
    white-space: nowrap;
  }

  /* ===================== B. 商品卡 Free/Low/High 信息按钮 ========== */
  /* B1. 字号：label / pill 内部 action 字号整体比配送大 ≈0.5px。
     先查当前配送字号 ≈13px，这里给 13.5px 保持关系。 */
  button.dp-on-demand-text-btn.dp-nutrition-info-btn,
  button.dp-on-demand-text-btn.dp-carbon-info-btn {
    font-size: 13.5px;
  }
  button.dp-on-demand-text-btn.dp-nutrition-info-btn > .dp-od-label,
  button.dp-on-demand-text-btn.dp-carbon-info-btn > .dp-od-label {
    font-size: 13.5px;
    white-space: nowrap;
  }
  .dp-secondary-pill {
    font-size: 13.5px;         /* pill 内文字比配送大 ≈0.5px */
  }

  /* B2. 普通（Free）查看详情胶囊紧凑 + button 宽度 + 与左标签间距。
     注意不删点。 */
  button.dp-on-demand-text-btn.dp-nutrition-info-btn,
  button.dp-on-demand-text-btn.dp-carbon-info-btn {
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    gap: 2px;                      /* label · pill 之间 紧凑 2px */
    width: auto;                   /* 紧凑整体，不按剩余空间撑 */
    max-width: 100%;
    padding: 4px 0 5px 0;
    box-sizing: border-box;
  }
  button.dp-on-demand-text-btn.dp-nutrition-info-btn > .dp-od-dot,
  button.dp-on-demand-text-btn.dp-carbon-info-btn > .dp-od-dot {
    margin: 0 1px;                 /* 点 不占多余空隙 */
  }
  /* Free 无收费时：普通 pill 左右 padding 恢复到更自然的 8px */
  button.dp-on-demand-text-btn.dp-free-info-btn > .dp-secondary-pill,
  button.dp-on-demand-text-btn.dp-nutrition-info-btn:not(.dp-low-fee):not(.dp-high-fee) > .dp-secondary-pill,
  button.dp-on-demand-text-btn.dp-carbon-info-btn:not(.dp-low-fee):not(.dp-high-fee) > .dp-secondary-pill {
    padding: 2px 8px;
  }

  /* ===================== C. Low/High 收费胶囊 ====================== */
  /* 本轮 ONLY TUNE: 收费 pill 自适应宽度 + 更舒展 padding，
     取消过窄 min-width 限制；允许按内容自然扩展，利用商品卡右侧剩余空间。
     文字/字号/label 位置/箭头/金额/收费逻辑一律不动。 */
  button.dp-on-demand-text-btn.dp-low-fee,
  button.dp-on-demand-text-btn.dp-high-fee {
    /* 父容器：占满商品卡可用横向空间；label+点保持原位置左对齐，pill 靠右对齐，消除右侧多余空白 */
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    max-width: 100%;
    padding-left: 0;
    padding-right: 0;
    box-sizing: border-box;
  }
  button.dp-on-demand-text-btn.dp-low-fee > .dp-secondary-pill,
  button.dp-on-demand-text-btn.dp-high-fee > .dp-secondary-pill {
    /* 自适应宽度：保留 flex:0 0 auto 不被压缩 + width:auto；加合理 min-width 保证完整内容在胶囊内 */
    flex: 0 0 auto;                 /* flex-shrink=0 → 永不因父空间不足被压 */
    width: auto;                    /* 按内容自然宽 */
    min-width: 180px;               /* 合理硬下限：查看详情 + · + ¥0.xx + · + chevron + 左右 16px padding，完整在胶囊内 */
    max-width: 100%;                /* 但不超过父按钮边界，永不出界 */
    padding: 4px 16px;              /* 左右 padding：保持上一轮值不变 */
    column-gap: 6px;                /* 内部：查看详情 · ¥0.xx · 箭头 间距 */
    justify-content: flex-end;
    box-sizing: border-box;
    white-space: nowrap;
  }

  /* ======== C'. Regime=Low/High 真实命中的收费胶囊（按 DOM 实际 class 覆盖） ========
     真实 DOM：<button class="dp-on-demand-text-btn dp-nutrition-info-btn / dp-carbon-info-btn">
     不再使用未被渲染的 dp-low-fee / dp-high-fee class；仅对真实 class 的父 + pill 布局覆盖。
     Low/High 下 pill 内含"查看详情 · ¥0.xx ›"，Free 下仅"查看详情 ›"（更短，同一 class 共享无害）。 */
  button.dp-on-demand-text-btn.dp-nutrition-info-btn,
  button.dp-on-demand-text-btn.dp-carbon-info-btn {
    /* 父按钮：自然宽度 inline-flex；label+点+pill 同行紧贴，不占满整行 */
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    width: auto;
    max-width: 100%;
    padding-left: 0;
    padding-right: 0;
    box-sizing: border-box;
  }
  button.dp-on-demand-text-btn.dp-nutrition-info-btn > .dp-secondary-pill,
  button.dp-on-demand-text-btn.dp-carbon-info-btn > .dp-secondary-pill {
    /* pill：内容自适应宽度，不固定 min-width；适中左右 padding 保证文字不贴边 */
    flex: 0 0 auto;
    width: auto;
    min-width: 0;
    max-width: 100%;
    padding-left: 12px;
    padding-right: 12px;
    column-gap: 6px;
    justify-content: flex-start;
    box-sizing: border-box;
    white-space: nowrap;
  }

  /* C'-BIS. Nutrition/Carbon pill column-gap 基线 5px；
     Carbon 专用更紧 4px（仅微调 1px，不碰 padding/width/min-width/nowrap，不影响 Nutrition）。 */
  button.dp-on-demand-text-btn.dp-nutrition-info-btn > .dp-secondary-pill,
  button.dp-on-demand-text-btn.dp-carbon-info-btn > .dp-secondary-pill {
    column-gap: 5px;
  }
  button.dp-on-demand-text-btn.dp-carbon-info-btn > .dp-secondary-pill {
    column-gap: 1.5px;
    padding-left: 9px;
    padding-right: 9px;
  }
  /* C'-TER. 信息行字号：父按钮保持 14.5px（左 label 明显大于配送），
     pill 内部（查看详情/点/金额/箭头）统一降到 13px，完整落入商品卡边界。 */
  button.dp-on-demand-text-btn.dp-nutrition-info-btn,
  button.dp-on-demand-text-btn.dp-carbon-info-btn {
    font-size: 14.5px;
  }
  button.dp-on-demand-text-btn.dp-nutrition-info-btn > .dp-od-label,
  button.dp-on-demand-text-btn.dp-carbon-info-btn > .dp-od-label {
    font-size: inherit;
  }
  button.dp-on-demand-text-btn.dp-nutrition-info-btn > .dp-secondary-pill,
  button.dp-on-demand-text-btn.dp-carbon-info-btn > .dp-secondary-pill,
  button.dp-on-demand-text-btn.dp-nutrition-info-btn > .dp-secondary-pill > .dp-od-action,
  button.dp-on-demand-text-btn.dp-carbon-info-btn > .dp-secondary-pill > .dp-od-action,
  button.dp-on-demand-text-btn.dp-nutrition-info-btn > .dp-secondary-pill > .dp-od-dot,
  button.dp-on-demand-text-btn.dp-carbon-info-btn > .dp-secondary-pill > .dp-od-dot,
  button.dp-on-demand-text-btn.dp-nutrition-info-btn > .dp-secondary-pill > .dp-od-price,
  button.dp-on-demand-text-btn.dp-carbon-info-btn > .dp-secondary-pill > .dp-od-price,
  button.dp-on-demand-text-btn.dp-nutrition-info-btn > .dp-secondary-pill > .dp-od-chevron,
  button.dp-on-demand-text-btn.dp-carbon-info-btn > .dp-secondary-pill > .dp-od-chevron {
    font-size: 13px;
  }

  /* ===================== D. Layered 专项 ============================ */
  /* D1. Nutrition summary：NRV↔level 间距 + level 位置（仍保持完整 4列内容） */
  .dp-nutrition-expand-summary > .dp-unified-nutri-row:not(.carbon) {
    grid-template-columns: 28px 25px 25px 42px;
    column-gap: 5px;
    row-gap: 2px;
    justify-content: start;
  }
  .dp-nutrition-expand-summary > .dp-unified-nutri-row:not(.carbon) > .dp-unified-nutri-nrv {
    margin-right: 3px;              /* NRV → level 间距略增，level 不会被挤截 */
    padding-right: 0;
    white-space: nowrap;
    justify-self: start;
  }
  .dp-nutrition-expand-summary > .dp-unified-nutri-row:not(.carbon) > .dp-unified-nutri-level {
    min-width: 44px;                /* level 列 floor 略增，保证 dot+文字 */
    padding-left: 0;
    padding-right: 0;
    white-space: nowrap;
    justify-self: start;
    display: inline-flex;
    align-items: center;
    column-gap: 4px;
  }

  /* D1-BIS. Nutrition collapsed module：取消 2-col 水平竞争；summary 独占 row1、pill 居右 row2
     仅 Layered collapsed nutrition；不影响 Carbon/expanded/Both/Space/Free/Low/High */
  .dp-product-info-area .dp-layered-nutrition-module:not(.is-open) {
    /* 父级 display:grid / align-items:flex-start / width:100% /
       box-sizing:border-box / overflow:hidden 等均由 L2295 继承，不重写 */
    grid-template-columns: 1fr;
    grid-template-rows: auto auto;
  }
  .dp-product-info-area .dp-layered-nutrition-module:not(.is-open) > .dp-nutrition-expand-summary {
    grid-column: 1 / -1;
    grid-row: 1 / 2;
    /* width:100%; min-width:0; 由 L2311-L2312 继承，保持 */
  }
  .dp-product-info-area .dp-layered-nutrition-module:not(.is-open) > button.dp-on-demand-text-btn.dp-od-inline-slot {
    grid-column: 1 / -1;
    grid-row: 2 / 3;
    justify-self: end;
    /* flex:0 0 auto; min-width:0; margin-left:0; align-self:start
       均由 L2318-L2321 继承，保持 */
  }

  /* D2. Carbon summary：level 与 查看详情胶囊之间的 空白大幅缩减 → 将胶囊
     左移靠近 level，保持整个 row 不换行，无 value。 */
  .dp-layered-carbon-module:not(.is-open) {
    display: grid;
    grid-template-columns: minmax(0, 1fr) max-content;
    column-gap: 2px;                /* 之前 8 → 2px：level 与胶囊间空白压缩 */
    align-items: center;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    flex-wrap: nowrap;
  }
  .dp-layered-carbon-module:not(.is-open) > .dp-carbon-expand-summary {
    grid-column: 1 / 2;
    grid-row: auto;
    min-width: 0;
    width: 100%;
  }
  .dp-layered-carbon-module:not(.is-open) > button.dp-on-demand-text-btn.dp-od-inline-slot {
    grid-column: 2 / 3;
    grid-row: auto;
    justify-self: start;            /* 胶囊不再在 grid 尾端右对齐，而贴近左侧列 */
    margin-left: 0;
    min-width: 0;
    max-width: 100%;
    display: inline-flex;
    flex-wrap: nowrap;
  }
  /* Carbon summary 内部：label → level 列间距保持紧凑，level 紧贴，仍有呼吸 */
  .dp-carbon-expand-summary > .dp-unified-nutri-row {
    grid-template-columns: 40px 1fr 46px;
    column-gap: 4px;
    justify-content: start;
  }
  .dp-carbon-expand-summary > .dp-unified-nutri-row > .dp-unified-nutri-level {
    justify-self: start;
    min-width: 46px;
    white-space: nowrap;
    column-gap: 4px;
  }
  /* D2-BIS. Carbon collapsed summary 内部 row：取消隐藏 NRV/valunit 的 1fr 幽灵空列
     把 3-col → 真正 2-col（label + level），碳足迹与●等级紧贴无空白。
     仅 Layered collapsed carbon；不修改父模块 2-col / CTA / nutrition / expanded / 其他 regime。 */
  .dp-product-info-area .dp-layered-carbon-module:not(.is-open)
    > .dp-carbon-expand-summary
    > .dp-unified-nutri-row {
    grid-template-columns: max-content max-content;
    column-gap: 6px;
    justify-content: start;
  }
  /* D2-BIS 保护：label 与 level 使用 auto-flow 入列，不被 shared MQ orphan 错分到 2-rows 栈 */
  .dp-product-info-area .dp-layered-carbon-module:not(.is-open)
    > .dp-carbon-expand-summary
    > .dp-unified-nutri-row
    > .dp-unified-nutri-label {
    grid-column: auto;
    grid-row: auto;
  }
  .dp-product-info-area .dp-layered-carbon-module:not(.is-open)
    > .dp-carbon-expand-summary
    > .dp-unified-nutri-row
    > .dp-unified-nutri-level {
    grid-column: auto;
    grid-row: auto;
  }
  /* D2-TER. Carbon collapsed 父模块：取消 col1 minmax(0,1fr) 大量幽灵空白
     把父 grid 改成 auto max-content；summary 只占自身内容宽，与 CTA 紧邻自然呼吸；
     同时 align-items:baseline 保证碳足迹/等级/查看详情 pill 文字基线一致。
     仅 Layered collapsed carbon；不影响 Nutrition/expanded/Both/Space/Free/Low/High。 */
  .dp-product-info-area .dp-layered-carbon-module:not(.is-open) {
    grid-template-columns: auto max-content;
    column-gap: 8px;
    align-items: baseline;
  }
  /* D2-TER CTA：在父 auto+max-content 的前提下继续贴父右缘（保持用户熟悉的 CTA 位置），
     align-self 与父 baseline 对齐，与 summary 文字一条视觉行。 */
  .dp-product-info-area .dp-layered-carbon-module:not(.is-open) > button.dp-on-demand-text-btn.dp-od-inline-slot {
    justify-self: end;
    align-self: baseline;
  }
  /* SPACE DELIVERY ENTRY ONLY：视觉对齐 Nutrition/Carbon 入口
     （仅 regime=space 按钮用这个类，其余 regime 配送是 div 不受影响） */
  button.dp-on-demand-text-btn.dp-delivery-info-btn {
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    width: auto;
    gap: 4px;
    padding-left: 0px;
    padding-right: 0px;
  }
  /* SPACE DELIVERY PILL ONLY：内容自适应宽度（覆盖 Task3 min-width 160px 虚位）
     仅 delivery 用，dp-nutrition-info-btn / dp-carbon-info-btn / 收费 pill 全部不受影响。 */
  button.dp-delivery-info-btn > .dp-secondary-pill {
    min-width: 0;
    width: auto;
    padding: 3px 8px;
    justify-content: flex-start;
  }
}

/* 极端窄 ≤340px：保持同样比例，不引入新的 break 或 换行 */
@media (max-width: 340px) {
  .dp-secondary-pill { font-size: 13px; }
  button.dp-on-demand-text-btn.dp-nutrition-info-btn,
  button.dp-on-demand-text-btn.dp-carbon-info-btn { font-size: 14.5px; }
  button.dp-on-demand-text-btn.dp-nutrition-info-btn > .dp-od-label,
  button.dp-on-demand-text-btn.dp-carbon-info-btn > .dp-od-label { font-size: inherit; }

  button.dp-on-demand-text-btn.dp-low-fee > .dp-secondary-pill,
  button.dp-on-demand-text-btn.dp-high-fee > .dp-secondary-pill {
    padding: 3px 12px;
    flex: 0 0 auto;
    min-width: 0;
    width: auto;
    max-width: 100%;
    column-gap: 5px;
  }
  /* C' 极窄 ≤340px：真实命中的 Low/High 收费 pill 同步改为内容自适应；不设固定 min-width */
  button.dp-on-demand-text-btn.dp-nutrition-info-btn > .dp-secondary-pill,
  button.dp-on-demand-text-btn.dp-carbon-info-btn > .dp-secondary-pill {
    padding: 3px 10px;
    flex: 0 0 auto;
    min-width: 0;
    width: auto;
    max-width: 100%;
    column-gap: 5px;
    font-size: inherit;
  }
  /* C'-BIS ≤340px：Nutrition/Carbon pill column-gap 基线 5px；
     Carbon 专用更紧 4px；不新增 min-width / width:100%；不改变 padding/width/min-width/nowrap。 */
  button.dp-on-demand-text-btn.dp-nutrition-info-btn > .dp-secondary-pill,
  button.dp-on-demand-text-btn.dp-carbon-info-btn > .dp-secondary-pill {
    column-gap: 5px;
  }
  button.dp-on-demand-text-btn.dp-carbon-info-btn > .dp-secondary-pill {
    column-gap: 1.5px;
    padding-left: 9px;
    padding-right: 9px;
  }
  /* C'-TER ≤340px：父 label 保持 14.5px，pill 内查看详情/点/金额/箭头统一降到 13px，完整落入商品卡边界 */
  button.dp-on-demand-text-btn.dp-nutrition-info-btn > .dp-secondary-pill,
  button.dp-on-demand-text-btn.dp-carbon-info-btn > .dp-secondary-pill,
  button.dp-on-demand-text-btn.dp-nutrition-info-btn > .dp-secondary-pill > .dp-od-action,
  button.dp-on-demand-text-btn.dp-carbon-info-btn > .dp-secondary-pill > .dp-od-action,
  button.dp-on-demand-text-btn.dp-nutrition-info-btn > .dp-secondary-pill > .dp-od-dot,
  button.dp-on-demand-text-btn.dp-carbon-info-btn > .dp-secondary-pill > .dp-od-dot,
  button.dp-on-demand-text-btn.dp-nutrition-info-btn > .dp-secondary-pill > .dp-od-price,
  button.dp-on-demand-text-btn.dp-carbon-info-btn > .dp-secondary-pill > .dp-od-price,
  button.dp-on-demand-text-btn.dp-nutrition-info-btn > .dp-secondary-pill > .dp-od-chevron,
  button.dp-on-demand-text-btn.dp-carbon-info-btn > .dp-secondary-pill > .dp-od-chevron {
    font-size: 13px;
  }
  .dp-di-example-nutr .dp-unified-nutri-row:not(.carbon) { column-gap: 3px; }
  .dp-di-example-nutr .dp-unified-nutri-row:not(.carbon) > .dp-unified-nutri-valunit { margin-right: 5px; }
  .dp-di-example-nutr .dp-unified-nutri-row:not(.carbon) > .dp-unified-nutri-nrv { margin-right: 4px; }
  .dp-layered-carbon-module:not(.is-open) { column-gap: 1px; }
  .dp-nutrition-expand-summary > .dp-unified-nutri-row:not(.carbon) > .dp-unified-nutri-level { min-width: 42px; }
}

/* ==========================================================
   V3.0_CSS_MICRO_TUNING_END
   ========================================================== */

/* TABLET_DESKTOP_SYNC_V1
   SCOPE: @media (min-width: 681px) ONLY — iPad≥768 / PC / desktop.
   Mirrors ONLY the already-mobile-verified layout properties from
   ≤680 V3 C' / SPACE DELIVERY V3 / D2-TER blocks for the 4 on-demand
   entry groups below.
   EXPLICITLY FORBIDDEN per user: no font-size / line-height changes,
   no global .dp-on-demand-text-btn base class changes, no product
   card/grid changes, no nutrition/carbon internal grid changes,
   no global .dp-secondary-pill changes, no JS/HTML changes.
   Single-block append: delete this entire block to rollback. */
@media (min-width: 681px) {
  /* (1) Nutrition / Carbon on-demand parent entry button —
     layout properties ONLY, NO font-size / NO line-height. */
  button.dp-on-demand-text-btn.dp-nutrition-info-btn,
  button.dp-on-demand-text-btn.dp-carbon-info-btn {
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    width: auto;
    padding-left: 0;
    padding-right: 0;
  }

  /* (2) Nutrition / Carbon secondary pill — content-adaptive layout. */
  button.dp-on-demand-text-btn.dp-nutrition-info-btn > .dp-secondary-pill,
  button.dp-on-demand-text-btn.dp-carbon-info-btn > .dp-secondary-pill {
    width: auto;
    min-width: 0;
    padding-left: 12px;
    padding-right: 12px;
    column-gap: 5px;
    justify-content: flex-start;
  }

  /* (3) Space regime delivery entry parent + pill. */
  button.dp-on-demand-text-btn.dp-delivery-info-btn {
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    width: auto;
    padding-left: 0;
    padding-right: 0;
    gap: 4px;
  }
  button.dp-delivery-info-btn > .dp-secondary-pill {
    min-width: 0;
    width: auto;
    padding: 3px 8px;
    justify-content: flex-start;
  }

  /* (4) Layered collapsed Carbon — baseline alignment only,
     keep the desktop natural flex同行 layout intact,
     do NOT introduce the mobile-only grid 1-col 2rows. */
  .dp-layered-carbon-module:not(.is-open) {
    align-items: baseline;
  }
  .dp-layered-carbon-module:not(.is-open) > .dp-on-demand-text-btn.dp-od-inline-slot {
    align-self: baseline;
  }

  /* (5) Nutrition / Carbon on-demand secondary pill visual shell — desktop/tablet ONLY.
     Mirrors the mobile ≤680 visual language exactly;
     specificity (0,2,3) = existing L4420 layout block, later position wins.
     Mobile ≤680 untouched; base global selectors untouched. */
  button.dp-on-demand-text-btn.dp-nutrition-info-btn > .dp-secondary-pill,
  button.dp-on-demand-text-btn.dp-carbon-info-btn > .dp-secondary-pill {
    display: inline-flex;
    align-items: center;
    column-gap: 4px;
    padding: 3px 9px;
    border-radius: 999px;
    background-color: rgba(46, 117, 255, 0.08);
    color: #2e75ff;
    font-weight: 500;
    white-space: nowrap;
    box-sizing: border-box;
  }
  /* Nutrition pill: slightly wider horizontal padding + 5px baseline column-gap */
  button.dp-on-demand-text-btn.dp-nutrition-info-btn > .dp-secondary-pill {
    column-gap: 5px;
    padding-left: 12px;
    padding-right: 12px;
  }
  /* Carbon pill: tighter 1.5px column-gap + 9px horizontal padding (mobile L4157-L4161 parity) */
  button.dp-on-demand-text-btn.dp-carbon-info-btn > .dp-secondary-pill {
    column-gap: 1.5px;
    padding-left: 9px;
    padding-right: 9px;
  }

  /* (6) UNIVERSAL DESKTOP-ONLY PILL SKIN for 3 entry classes that
     already had their layout properties declared earlier in this block,
     but had NO visual capsule shell on desktop/tablet.
     Fixes observed anomalies:
       1. Space regime delivery button pill (no background / rounded corners / blue text)
       2. Layered regime nutrition collapsed inline CTA pill (transparent, span inline)
       3. Layered regime carbon collapsed inline CTA pill (transparent, span inline)
     Scope: @media (min-width: 681px) ONLY — base untouched, mobile ≤680 untouched.
     Specificity:
       (0,2,3) for Space (same as existing L4440 layout — position later wins)
       (0,4,3) for Layered nutrition/carbon (higher specificity than any existing
       desktop Layered inline-slot rule — no unintended cross-match to Low/High). */
  button.dp-on-demand-text-btn.dp-delivery-info-btn > .dp-secondary-pill,
  .dp-layered-nutrition-module:not(.is-open) > .dp-nutrition-expand-summary > button.dp-on-demand-text-btn.dp-od-inline-slot.dp-nutrition-detail-btn > .dp-secondary-pill,
  .dp-layered-carbon-module:not(.is-open) > button.dp-on-demand-text-btn.dp-od-inline-slot > .dp-secondary-pill {
    display: inline-flex;
    align-items: center;
    column-gap: 4px;
    padding: 3px 9px;
    border-radius: 999px;
    background-color: rgba(46, 117, 255, 0.08);
    color: #2e75ff;
    font-weight: 500;
    white-space: nowrap;
    box-sizing: border-box;
  }

  /* (7) DESKTOP-ONLY PER-ENTRY PILL REFINEMENT
     — override universal (6) padding/gap so each family matches its
       already-approved Low/High desktop style (group 5):
       A) Space delivery: keep original Task3 compact horizontal padding 8/8
          (L4443 V1 delivery layout had 3px 8px; universal (6) accidentally
          bumped to 9/9; here we restore the tighter delivery baseline).
       B) Layered carbon collapsed: parity with group-5 Carbon-only (L4481)
          — tight column-gap 1.5 + horizontal padding 9/9.
       C) Layered nutrition collapsed: parity with group-5 Nutrition-only
          (L4474) — baseline column-gap 5 + wider horizontal padding 12/12.
     Scope: still @media (min-width: 681px) ONLY.
     Specificity all higher than the (6) universal union block, because
     each selector adds one more qualifying class (dp-delivery-info-btn
     is already in (6) so same specificity but LATER WINS; Layered
     selectors add dp-nutrition-detail-btn / dp-carbon-detail-btn for
     specificity (0,5,3) > universal (6) Layered (0,4,3). */
  button.dp-on-demand-text-btn.dp-delivery-info-btn > .dp-secondary-pill {
    padding-left: 8px;
    padding-right: 8px;
  }

  .dp-layered-carbon-module:not(.is-open) > button.dp-on-demand-text-btn.dp-od-inline-slot.dp-carbon-detail-btn > .dp-secondary-pill {
    column-gap: 1.5px;
    padding-left: 9px;
    padding-right: 9px;
  }

  .dp-layered-nutrition-module:not(.is-open) > .dp-nutrition-expand-summary > button.dp-on-demand-text-btn.dp-od-inline-slot.dp-nutrition-detail-btn > .dp-secondary-pill {
    column-gap: 5px;
    padding-left: 12px;
    padding-right: 12px;
  }

  /* (8) Layered Carbon collapsed — desktop deterministic 2-col 1-row grid
     Scope: @media (min-width: 681px) ONLY; zero touch to mobile ≤680 / base /
            nutrition / other regimes / .dp-secondary-pill visual style.
     Fixes observed anomaly: CTA capsule falls to row 2 on desktop/tablet because
     base L1258 (NO MQ) uses display:flex + flex-wrap:wrap + summary flex-grow:1
     + CTA margin-left:auto → natural wrap on iPad 768 & narrow desktops.
     Mobile ≤680 already has the identical 2-col deterministic grid in D2 block
     (L3938-L3961) which is proven to keep CTA on row 1; here we mirror that
     exact layout for desktop/tablet only.
     Selector specificity (0,5,0) + (0,6,1) + (0,7,1) >> base L1258 (0,2,0);
     position-later-wins over existing L4450 align-items baseline declaration. */
  /* 8-A: Parent wrapper — switch flex-wrap host → 2-col grid, nowrap enforced */
  .dp-product-info-area .dp-layered-carbon-module:not(.is-open) {
    display: grid;
    grid-template-columns: auto max-content;
    column-gap: 8px;
    row-gap: 6px;
    align-items: baseline;
    flex-wrap: nowrap;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }
  /* 8-B: Carbon summary chip — anchor col 1, row 1; cancel base flex-grow:1
     so the label+level pair stays at intrinsic content width (no ghost blank
     space between the level dot and the CTA capsule — matches mobile D2-TER
     L4302 auto + max-content pattern exactly). */
  .dp-product-info-area .dp-layered-carbon-module:not(.is-open) > .dp-carbon-expand-summary {
    grid-column: 1 / 2;
    grid-row: 1 / 2;
    flex: 0 0 auto;
    width: auto;
    min-width: 0;
    max-width: 100%;
  }
  /* 8-C: Inline CTA button — anchor col 2, row 1; cancel base margin-left:auto
     (which triggers the wrap-threshold false-positive) so justify-self:end
     anchors the pill to the wrapper's right border; align-self:baseline keeps
     carbon text / level dot / CTA chevron on one visual baseline (keeps the
     L4454 alignment we already declared earlier in this block; specificity
     higher here as defensive guard). */
  .dp-product-info-area .dp-layered-carbon-module:not(.is-open) > button.dp-on-demand-text-btn.dp-od-inline-slot {
    grid-column: 2 / 3;
    grid-row: 1 / 2;
    flex: 0 0 auto;
    min-width: 0;
    margin-left: 0;
    align-self: baseline;
    justify-self: end;
  }

  /* (9) Layered Carbon collapsed — desktop mirror of mobile D2-BIS inner summary rules.
     Scope: @media (min-width: 681px) ONLY — zero touch to mobile ≤680 / base global
            selectors / group 8 outer 2-col layout / .dp-secondary-pill / nutrition
            / any other regime / JS / HTML / event logic.
     Symptom fixed: desktop group 8 (L4558-L4596) successfully kept carbon label + CTA
     on the same row, but the carbon LEVEL dot + label were visually missing because
     mobile D2-BIS (L4275-L4296) explicitly reduces the 4-col unified row to a real
     2-col (label + level) grid, hides the empty valunit/nrv placeholders, and pins
     the label/level cells to auto grid positions with nowrap guard on the level.
     That inner D2-BIS reduction lived only in @media (max-width: 680px), so desktop
     inherited the 4-col baseline grid with no explicit collapse → the level column
     overflowed the inline-flex summary host (base L1217 display:inline-flex + L1218
     width:auto !important) and visually disappeared under/next to the CTA pill.
     Today's 4 selectors are a 1:1 mirror of D2-BIS L4275-L4296 for desktop only. */
  /* 9-A: Inner 1-row summary grid — shrink from nominal 4-cols to an actual 2-col
          (carbon name + level) max-content layout. */
  .dp-product-info-area .dp-layered-carbon-module:not(.is-open)
    > .dp-carbon-expand-summary
    > .dp-unified-nutri-row {
    grid-template-columns: max-content max-content;
    column-gap: 6px;
    justify-content: start;
    align-items: center;
  }
  /* 9-B: Explicitly hide the two empty placeholder columns (value/unit + NRV) on
          desktop — mobile ≤680 already does this via V2.8/V2.9, mirror here. */
  .dp-product-info-area .dp-layered-carbon-module:not(.is-open)
    > .dp-carbon-expand-summary
    > .dp-unified-nutri-row
    > .dp-unified-nutri-valunit,
  .dp-product-info-area .dp-layered-carbon-module:not(.is-open)
    > .dp-carbon-expand-summary
    > .dp-unified-nutri-row
    > .dp-unified-nutri-nrv {
    display: none !important;
  }
  /* 9-C: Pin label + level to auto grid positions (defensive guard against any
          earlier shared MQ orphan that might have repositioned level onto row2) */
  .dp-product-info-area .dp-layered-carbon-module:not(.is-open)
    > .dp-carbon-expand-summary
    > .dp-unified-nutri-row
    > .dp-unified-nutri-label,
  .dp-product-info-area .dp-layered-carbon-module:not(.is-open)
    > .dp-carbon-expand-summary
    > .dp-unified-nutri-row
    > .dp-unified-nutri-level {
    grid-column: auto;
    grid-row: auto;
  }
  /* 9-D: Level cell — nowrap guard so the level dot + Chinese label stay on one
          visual line with the carbon name; parity with mobile L4268-L4271. */
  .dp-product-info-area .dp-layered-carbon-module:not(.is-open)
    > .dp-carbon-expand-summary
    > .dp-unified-nutri-row
    > .dp-unified-nutri-level {
    white-space: nowrap;
  }
}


/* =====================================================================
 * STRICT NUTRITION-ONLY ISOLATED N1 / N2 VISUALS.
 *
 * ABSOLUTE SCOPE RULES ENFORCED HERE:
 *   * EVERY selector in this block starts with either
 *       .dp-study-nintro-  or  .dp-study-ncomp-
 *   * ZERO references to any product / shared class:
 *       dp-product- / dp-unified- / dp-nutri- / dp-carbon- /
 *       dp-secondary-pill / dp-on-demand- / button / table / etc.
 *   * Never touches product DOM, product responsive CSS, Carbon, or
 *     any other participant-facing visual.
 * ===================================================================== */


/* =============== N1 (Nutrition Intro — dp-study-nintro-*) =============== */
.dp-study-nintro-wrap {
  display: block;
  padding: 14px 12px 32px;
  max-width: 920px;
  margin: 0 auto;
  line-height: 1.6;
  color: #0f172a;
  font-size: 15px;
}
.dp-study-nintro-maincard {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  padding: 20px 22px 22px;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}
.dp-study-nintro-title {
  font-size: 20px;
  font-weight: 700;
  color: #0f172a;
  margin: 2px 0 12px;
}
.dp-study-nintro-para {
  margin: 8px 0;
  color: #1e293b;
  font-size: 15px;
  line-height: 1.7;
}
.dp-study-nintro-accent {
  color: #1d4ed8;
  font-weight: 600;
}
.dp-study-nintro-accent-sub {
  color: #2563eb;
  font-weight: 600;
}
.dp-study-nintro-levels-legend {
  margin: 8px 0 2px;
  padding: 9px 14px;
  border-radius: 10px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 20px;
  font-size: 14.5px;
  color: #1e293b;
  line-height: 1.6;
}
.dp-study-nintro-levels-legend-extra {
  flex: 1 1 100%;
  margin-top: 2px;
  font-size: 13.5px;
  color: #475569;
}
.dp-study-nintro-lev-inline {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 600;
  color: #1e293b;
}
.dp-study-nintro-lev-inline .dp-study-nintro-leveldot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  flex-shrink: 0;
}
.dp-study-nintro-subtitle {
  font-size: 16px;
  font-weight: 700;
  color: #0f172a;
  margin: 18px 0 8px;
  padding: 0;
}
.dp-study-nintro-howtorow {
  margin: 4px 0 10px;
  color: #1e293b;
  font-size: 15px;
  line-height: 1.7;
}

/* --- N1 Instructional Nutrition Label (matches product visual grammar — 210–230px) */
.dp-study-nintro-examplecard {
  margin: 14px 0 22px;
  padding: 11px 12px;
  border-radius: 12px;
  background: #F7FAFF;
  border: 1px solid #DFE6F6;
  width: max-content;
  max-width: 100%;
  box-sizing: border-box;
}
/* Basis-row：右上角每100克 (product 同款 dp-unified-nutri-basis-row) */
.dp-study-nintro-basis-row {
  display: flex;
  justify-content: flex-end;
  margin: 0 0 4px;
}
.dp-study-nintro-basis-label {
  font-size: 11.5px;
  font-weight: 400;
  color: #7A86A5;
  letter-spacing: 0.1px;
}
.dp-study-nintro-examplebody {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
/* 4-col row （正式商品同款 4-col grid：label|val+unit|%NRV|●level) */
.dp-study-nintro-nutrirow {
  display: grid;
  grid-template-columns:
    minmax(48px, 52px)    /* col1 指标 */
    minmax(56px, auto)     /* col2 数值+单位 */
    minmax(62px, 70px)    /* col3 %NRV 右对齐 */
    minmax(54px, 58px);    /* col4 ●等级 最右 */
  column-gap: 8px;
  row-gap: 6px;
  align-items: baseline;
  min-width: 0;
  width: 100%;
  box-sizing: border-box;
  font-size: 12.5px;
  line-height: 1.45;
}
.dp-study-nintro-labelcol {
  color: #5B6A8A;
  font-weight: 500;
  font-size: 12.5px;
  white-space: nowrap;
}
.dp-study-nintro-valunitcol {
  display: inline-flex;
  align-items: baseline;
  gap: 3px;
  min-width: 0;
  max-width: 100%;
  justify-content: flex-start;
}
.dp-study-nintro-value {
  font-size: 13px;
  font-weight: 700;
  color: #1F2937;
}
.dp-study-nintro-unit {
  font-size: 11.5px;
  font-weight: 500;
  color: #5B6A8A;
  white-space: nowrap;
}
.dp-study-nintro-nrvcol {
  font-size: 11.5px;
  font-weight: 500;
  color: #6C7797;
  text-align: right;
  white-space: nowrap;
}
.dp-study-nintro-levelcol {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  justify-content: flex-end;
  padding-right: 3px;
  box-sizing: border-box;
  flex: 0 0 auto;
  font-size: 11.5px;
}
.dp-study-nintro-leveldot {
  display: inline-block;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  flex-shrink: 0;
  background: #98A3C0;
}
.dp-study-nintro-leveldot-LOW  { background: #22A06B; }
.dp-study-nintro-leveldot-MED  { background: #D97706; }
.dp-study-nintro-leveldot-HIGH { background: #B91C1C; }
.dp-study-nintro-leveltext {
  font-size: 11.5px;
  font-weight: 600;
  color: #4D597B;
  white-space: nowrap;
}
.dp-study-nintro-leveltext-LOW  { color: #22A06B; }
.dp-study-nintro-leveltext-MED  { color: #D97706; }
.dp-study-nintro-leveltext-HIGH { color: #B91C1C; }

/* Threshold：fix049 UNIFIED BLOCK（视觉不变，完全保留）*/
.dp-study-nintro-threshold { margin: 4px 0 6px; display: grid; gap: 14px; }
.dp-study-nintro-thsection {
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 12px 14px 14px;
  background: #fbfcff;
}
.dp-study-nintro-thsection-title {
  font-size: 14.5px;
  font-weight: 700;
  color: #0f172a;
  margin: 0 0 10px;
}
.dp-study-nintro-thblocks { display: flex; flex-wrap: wrap; gap: 10px; }
.dp-study-nintro-thnutrient {
  flex: 1 1 200px;
  min-width: 0;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  background: #ffffff;
  padding: 10px 12px 11px;
}
.dp-study-nintro-thnutrient-title {
  font-size: 14px;
  font-weight: 700;
  color: #0f172a;
  margin: 0 0 8px;
}
.dp-study-nintro-throw {
  display: grid;
  grid-template-columns: 54px 1fr;
  column-gap: 8px;
  align-items: baseline;
  padding: 3px 0;
  font-size: 13.5px;
  line-height: 1.55;
  color: #1e293b;
}
.dp-study-nintro-thlvl {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-weight: 600;
  color: #1e293b;
}
.dp-study-nintro-thlvl-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.dp-study-nintro-thval { color: #1e293b; font-weight: 500; }

/*
 * N1 CONTINUE BUTTON LIFT (FIX051 P0 repair).
 * Mirror N2 submit's z40 lift pattern so the button cannot be silently
 * occluded by any upstream wrapper (example / threshold / maincard) even
 * if their layout shifts on specific viewports.  Only study-only scope.
 */
.dp-study-nintro-wrap,
.dp-study-nintro-maincard,
.dp-study-nintro-threshold,
.dp-study-nintro-thsection,
.dp-study-nintro-examplecard {
  position: relative;
  z-index: 1;
}
.dp-study-nintro-actions {
  margin-top: 22px;
  display: flex;
  justify-content: flex-end;
  position: relative;
  z-index: 40;
  isolation: isolate;
}
.dp-study-nintro-btn {
  max-width: 260px;
  position: relative;
  z-index: 40;
  isolation: isolate;
  pointer-events: auto;
  cursor: pointer;
}

@media (max-width: 680px) {
  .dp-study-nintro-wrap { padding: 10px 8px 26px; font-size: 14.5px; }
  .dp-study-nintro-maincard { padding: 16px 14px 18px; border-radius: 14px; }
  .dp-study-nintro-title { font-size: 18px; }
  .dp-study-nintro-subtitle { font-size: 15.5px; margin-top: 14px; }
  .dp-study-nintro-examplecard { width: 100%; padding: 11px 10px; }
  .dp-study-nintro-thsection { padding: 10px 12px 12px; }
  .dp-study-nintro-thnutrient { flex-basis: 100%; }
  .dp-study-nintro-nutrirow {
    column-gap: 5px;
    grid-template-columns:
      minmax(44px, 50px)
      minmax(0, auto)
      minmax(60px, 68px)
      max-content;
  }
  .dp-study-nintro-actions { justify-content: stretch; }
  .dp-study-nintro-btn { max-width: none; width: 100%; }
}


/* =============== N2 (Nutrition Comprehension — dp-study-ncomp-*) =============== */
.dp-study-ncomp-wrap {
  display: block;
  padding: 14px 12px 32px;
  max-width: 920px;
  margin: 0 auto;
  line-height: 1.6;
  color: #0f172a;
  font-size: 15px;
}
.dp-study-ncomp-maincard {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  padding: 20px 22px 22px;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
  position: relative;
  z-index: 1;
}
.dp-study-ncomp-title {
  font-size: 20px;
  font-weight: 700;
  color: #0f172a;
  margin: 2px 0 6px;
}
.dp-study-ncomp-guide { margin: 0 0 10px; color: #1e293b; font-size: 14.5px; }
.dp-study-ncomp-callout {
  margin: 0 0 14px;
  padding: 10px 14px;
  border-radius: 10px;
  background: #eff6ff;
  border: 1px solid #bfdbfe;
  color: #1e3a8a;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.6;
}
.dp-study-ncomp-qcard {
  margin: 14px 0 18px;
  padding: 12px 14px 14px;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  background: #ffffff;
  position: relative;
  z-index: 1;
}
.dp-study-ncomp-qhead {
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: 8px;
  align-items: baseline;
  margin-bottom: 8px;
}
.dp-study-ncomp-qnum { font-weight: 700; color: #1d4ed8; font-size: 14px; }
.dp-study-ncomp-qstem { font-size: 14.5px; font-weight: 600; color: #0f172a; }

/* === N2 Nutrition label：Q1 fullcard + Q2 minicard：4-col product-grammar */
.dp-study-ncomp-fulllabel {
  margin: 8px 0 12px;
  padding: 11px 12px;
  border: 1px solid #DFE6F6;
  border-radius: 12px;
  background: #F7FAFF;
  width: max-content;
  max-width: 100%;
  box-sizing: border-box;
}
.dp-study-ncomp-basis-row {
  display: flex;
  justify-content: flex-end;
  margin: 0 0 4px;
}
.dp-study-ncomp-basis-label {
  font-size: 11.5px;
  font-weight: 400;
  color: #7A86A5;
  letter-spacing: 0.1px;
}
.dp-study-ncomp-fullbody { display: flex; flex-direction: column; gap: 6px; }
.dp-study-ncomp-nutrirow {
  display: grid;
  grid-template-columns:
    minmax(48px, 52px)    /* col1 metric */
    minmax(56px, auto)     /* col2 value + unit */
    minmax(62px, 70px)    /* col3 %NRV right align */
    minmax(54px, 58px);    /* col4 ●level far right */
  column-gap: 8px;
  align-items: baseline;
  min-width: 0;
  width: 100%;
  box-sizing: border-box;
  font-size: 12.5px;
  line-height: 1.45;
}
.dp-study-ncomp-labelcol {
  color: #5B6A8A;
  font-weight: 500;
  font-size: 12.5px;
  white-space: nowrap;
}
.dp-study-ncomp-valunitcol {
  display: inline-flex;
  align-items: baseline;
  gap: 3px;
  min-width: 0;
  max-width: 100%;
  justify-content: flex-start;
}
.dp-study-ncomp-value {
  font-size: 13px;
  font-weight: 700;
  color: #1F2937;
}
.dp-study-ncomp-unit {
  font-size: 11.5px;
  font-weight: 500;
  color: #5B6A8A;
  white-space: nowrap;
}
.dp-study-ncomp-nrvcol {
  font-size: 11.5px;
  font-weight: 500;
  color: #6C7797;
  text-align: right;
  white-space: nowrap;
}
.dp-study-ncomp-levelcol {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  justify-content: flex-end;
  padding-right: 3px;
  box-sizing: border-box;
  flex: 0 0 auto;
  font-size: 11.5px;
}
.dp-study-ncomp-leveldot {
  display: inline-block;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #98A3C0;
  flex-shrink: 0;
}
.dp-study-ncomp-leveldot-LOW  { background: #22A06B; }
.dp-study-ncomp-leveldot-MED  { background: #D97706; }
.dp-study-ncomp-leveldot-HIGH { background: #B91C1C; }
.dp-study-ncomp-leveltext {
  font-size: 11.5px;
  font-weight: 600;
  color: #4D597B;
  white-space: nowrap;
}
.dp-study-ncomp-leveltext-LOW  { color: #22A06B; }
.dp-study-ncomp-leveltext-MED  { color: #D97706; }
.dp-study-ncomp-leveltext-HIGH { color: #B91C1C; }

/* 未使用但保留的 selector（防止空引用无副作用）*/
.dp-study-ncomp-fullheader,
.dp-study-ncomp-fulllabelrow,
.dp-study-ncomp-flmetric,
.dp-study-ncomp-flvalue,
.dp-study-ncomp-flv,
.dp-study-ncomp-flu,
.dp-study-ncomp-flnrv,
.dp-study-ncomp-fllevel {
  /* 保持存在性，但不作为主渲染类 */
  all: unset;
}
.dp-study-ncomp-fragment,
.dp-study-ncomp-fraghead { display: none; }

/* N2 Q2 A/B comparison pair */
.dp-study-ncomp-minipairwrap {
  margin: 8px 0 12px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.dp-study-ncomp-minicard {
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  background: #fbfcff;
  padding: 12px 14px 14px;
  position: relative;
  z-index: 1;
}
.dp-study-ncomp-minicardtitle {
  font-size: 14px;
  font-weight: 700;
  color: #0f172a;
  margin: 0 0 2px;
}
.dp-study-ncomp-minibody {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 4px 0 0;
  border: none;
  background: transparent;
  border-radius: 0;
  width: 100%;
  position: relative;
  z-index: 1;
}

/* Radio / options / feedback（功能冻结） */
.dp-study-ncomp-options {
  display: grid;
  gap: 8px;
  margin-top: 10px;
}
.dp-study-ncomp-option { display: block; width: 100%; }
.dp-study-ncomp-optionlabel {
  display: grid;
  grid-template-columns: 20px 24px 1fr;
  column-gap: 8px;
  align-items: flex-start;
  padding: 9px 12px;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  background: #ffffff;
  cursor: pointer;
  transition: border-color 120ms ease, background 120ms ease;
  font-size: 14px;
  line-height: 1.55;
  color: #1e293b;
  width: 100%;
  box-sizing: border-box;
  position: relative;
  z-index: 2;
}
.dp-study-ncomp-optionlabel:hover { border-color: #bfdbfe; background: #eff6ff; }
.dp-study-ncomp-option:has(input[type="radio"]:checked) .dp-study-ncomp-optionlabel { border-color: #93c5fd; background: #eff6ff; }
.dp-study-ncomp-optradio {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  padding-top: 2px;
  position: relative;
  z-index: 3;
}
.dp-study-ncomp-optradio input[type="radio"] {
  position: static;
  width: 16px; height: 16px;
  opacity: 1;
  pointer-events: auto;
  display: inline-block;
  margin: 0; padding: 0;
  cursor: pointer;
  accent-color: #1d4ed8;
}
.dp-study-ncomp-optk { font-weight: 700; color: #1d4ed8; padding-top: 1px; min-width: 20px; }
.dp-study-ncomp-optv { color: #1e293b; }
.dp-study-ncomp-feedback {
  margin: 10px 0 16px;
  padding: 10px 14px;
  border-radius: 10px;
  background: #eff6ff;
  color: #1e3a8a;
  border: 1px solid #bfdbfe;
  font-size: 14px;
  line-height: 1.6;
  position: relative;
  z-index: 5;
}
.dp-study-ncomp-feedback-incomplete { background: #FFFBEB; border-color: #FDE68A; color: #92400E; }
.dp-study-ncomp-feedback-domain { background: #eff6ff; border-color: #bfdbfe; color: #1e3a8a; }

/* === P0 submit blocker minimal repair — actions + btn 显式上层定位+isolation */
.dp-study-ncomp-actions {
  margin-top: 18px;
  display: flex;
  justify-content: flex-end;
  position: relative;
  z-index: 40;
  isolation: isolate;
}
.dp-study-ncomp-btn {
  max-width: 260px;
  position: relative;
  z-index: 40;
  isolation: isolate;
  pointer-events: auto;
  cursor: pointer;
}

@media (max-width: 680px) {
  .dp-study-ncomp-wrap { padding: 10px 8px 26px; font-size: 14.5px; }
  .dp-study-ncomp-maincard { padding: 16px 14px 18px; border-radius: 14px; }
  .dp-study-ncomp-title { font-size: 18px; }
  .dp-study-ncomp-callout { font-size: 14.5px; padding: 9px 12px; }
  .dp-study-ncomp-fulllabel,
  .dp-study-ncomp-fragment { width: 100%; }
  .dp-study-ncomp-minipairwrap { grid-template-columns: 1fr; }
  .dp-study-ncomp-minicard { padding-left: 10px; padding-right: 10px; }
  .dp-study-ncomp-fullbody .dp-study-ncomp-nutrirow {
    width: 100%;
    margin-inline: 0;
    grid-template-columns: max-content max-content max-content max-content;
    column-gap: 4px;
    justify-content: space-between;
  }
  .dp-study-ncomp-minibody .dp-study-ncomp-nutrirow {
    width: 100%;
    margin-inline: 0;
    grid-template-columns: max-content max-content max-content max-content;
    column-gap: 4px;
    justify-content: space-between;
  }
  .dp-study-ncomp-actions { justify-content: stretch; }
  .dp-study-ncomp-btn { max-width: none; width: 100%; }
}


/* =============== C1 — Carbon Intro study-only renderer (dp-study-cintro-*) ===============
   Visual language mirrors dp-study-nintro-* (N1 Nutrition Intro) 1:1 so that
   title hierarchy, paragraph spacing, blue keywords, legend, example scale,
   threshold container, and continue placement all match.
   Code is fully isolated; no shared helpers or classes with Nutrition or
   production carbon.  No production tokens (dp-carbon-/dp-unified-) are used.
========================================================================================= */

.dp-study-cintro-wrap {
  display: block;
  padding: 16px 14px 36px;
  max-width: 920px;
  margin: 0 auto;
  line-height: 1.65;
  color: #0f172a;
  font-size: 15px;
  position: relative;
  z-index: 0;
}
.dp-study-cintro-maincard {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  padding: 20px 24px 22px;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
  position: relative;
  z-index: 1;
}
.dp-study-cintro-title {
  font-size: 20px;
  font-weight: 800;
  color: #0f172a;
  margin: 2px 0 10px;
  letter-spacing: 0.2px;
}
.dp-study-cintro-para {
  margin: 4px 0 12px;
  color: #1e293b;
  font-size: 15px;
  line-height: 1.7;
}
.dp-study-cintro-subtitle {
  font-size: 16px;
  font-weight: 700;
  color: #0f172a;
  margin: 14px 0 6px;
}
.dp-study-cintro-howtorow {
  margin: 4px 0 6px;
  color: #1e293b;
  font-size: 14.5px;
  line-height: 1.75;
}
/* 蓝色强调词（镜像 nintro accent/accent-sub） */
.dp-study-cintro-accent {
  color: #1d4ed8;
  font-weight: 700;
  letter-spacing: 0.1px;
}
.dp-study-cintro-accent-sub {
  color: #2563eb;
  font-weight: 600;
}

/* 颜色 legend（镜像 nintro levels-legend 的 box 视觉：border/background/border-radius/padding/spacing/note-placement 1:1） */
.dp-study-cintro-levels-legend {
  margin: 8px 0 2px;
  padding: 9px 14px;
  border-radius: 10px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 20px;
  font-size: 14.5px;
  color: #1e293b;
  line-height: 1.6;
}
.dp-study-cintro-levels-legend-extra {
  flex: 1 1 100%;
  margin-top: 2px;
  font-size: 13.5px;
  color: #475569;
}
.dp-study-cintro-lev-inline {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 600;
  color: #1e293b;
}
.dp-study-cintro-lev-inline .dp-study-cintro-leveldot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  flex-shrink: 0;
}
.dp-study-cintro-leveldot {
  display: inline-block;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  flex-shrink: 0;
  background: #98A3C0;
}
.dp-study-cintro-leveldot-LOW  { background: #22A06B; }
.dp-study-cintro-leveldot-MED  { background: #D97706; }
.dp-study-cintro-leveldot-HIGH { background: #B91C1C; }
.dp-study-cintro-leveltext-LOW  { color: #22A06B; }
.dp-study-cintro-leveltext-MED  { color: #D97706; }
.dp-study-cintro-leveltext-HIGH { color: #B91C1C; }

/* Example card（尺寸/节奏 对齐 nintro examplecard） */
.dp-study-cintro-examplecard {
  margin: 14px 0 22px;
  padding: 11px 12px;
  border-radius: 12px;
  background: #F7FAFF;
  border: 1px solid #DFE6F6;
  width: max-content;
  max-width: 100%;
  box-sizing: border-box;
  position: relative;
  z-index: 1;
}
.dp-study-cintro-basis-row {
  display: flex;
  justify-content: flex-end;
  margin: 0 0 4px;
}
.dp-study-cintro-basis-label {
  font-size: 11.5px;
  font-weight: 400;
  color: #7A86A5;
  letter-spacing: 0.1px;
}
.dp-study-cintro-examplebody {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
/* 三列单行：labelcol | valunitcol | ●levelcol */
.dp-study-cintro-carbonrow {
  display: grid;
  grid-template-columns:
    minmax(56px, 64px)    /* col1 metric（"碳足迹"4字略宽） */
    minmax(80px, auto)     /* col2 数值+单位 */
    minmax(54px, 62px);    /* col3 ●level 最右 */
  column-gap: 8px;
  align-items: baseline;
  width: 100%;
  box-sizing: border-box;
  font-size: 12.5px;
  line-height: 1.45;
}
.dp-study-cintro-labelcol {
  color: #5B6A8A;
  font-weight: 500;
  font-size: 12.5px;
  white-space: nowrap;
}
.dp-study-cintro-valunitcol {
  display: inline-flex;
  align-items: baseline;
  gap: 3px;
  justify-content: flex-start;
  min-width: 0;
  max-width: 100%;
}
.dp-study-cintro-value {
  font-size: 13px;
  font-weight: 700;
  color: #1F2937;
}
.dp-study-cintro-unit {
  font-size: 11.5px;
  font-weight: 500;
  color: #5B6A8A;
  white-space: nowrap;
}
.dp-study-cintro-levelcol {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  justify-content: flex-end;
  padding-right: 3px;
  box-sizing: border-box;
  flex: 0 0 auto;
  font-size: 11.5px;
}
.dp-study-cintro-leveltext {
  font-size: 11.5px;
  font-weight: 600;
  color: #4D597B;
  white-space: nowrap;
}

/* Threshold block（镜像 nintro UNIFIED_TEXT_BLOCK 视觉节奏） */
.dp-study-cintro-threshold {
  margin: 4px 0 6px;
  display: grid;
  gap: 14px;
  position: relative;
  z-index: 1;
}
.dp-study-cintro-thsection {
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 12px 14px 14px;
  background: #fbfcff;
  position: relative;
  z-index: 1;
}
.dp-study-cintro-thsection-title {
  font-size: 14.5px;
  font-weight: 700;
  color: #0f172a;
  margin: 0 0 10px;
}
.dp-study-cintro-thblocks {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.dp-study-cintro-thnutrient {
  flex: 1 1 240px;
  min-width: 0;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  background: #ffffff;
  padding: 10px 12px 11px;
}
.dp-study-cintro-thnutrient-title {
  font-size: 14px;
  font-weight: 700;
  color: #0f172a;
  margin: 0 0 8px;
}
.dp-study-cintro-throw {
  display: grid;
  grid-template-columns: 54px 1fr;
  column-gap: 8px;
  align-items: baseline;
  padding: 3px 0;
  font-size: 13.5px;
  line-height: 1.55;
  color: #1e293b;
}
.dp-study-cintro-thlvl {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-weight: 600;
  color: #1e293b;
}
.dp-study-cintro-thlvl-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
.dp-study-cintro-thval {
  color: #1e293b;
  font-weight: 500;
}
.dp-study-cintro-threshold-footer {
  margin: 4px 2px 2px;
  color: #64748b;
  font-size: 13.5px;
  font-weight: 500;
  line-height: 1.7;
}

/* Continue button（镜像 nintro continue 上层 lift + isolation） */
.dp-study-cintro-wrap,
.dp-study-cintro-maincard,
.dp-study-cintro-threshold,
.dp-study-cintro-thsection,
.dp-study-cintro-examplecard {
  position: relative;
  z-index: 1;
}
.dp-study-cintro-actions {
  margin-top: 22px;
  display: flex;
  justify-content: flex-end;
  position: relative;
  z-index: 40;
  isolation: isolate;
}
.dp-study-cintro-btn {
  max-width: 260px;
  position: relative;
  z-index: 40;
  isolation: isolate;
  pointer-events: auto;
  cursor: pointer;
}

/* Mobile（局部仅响应 cintro，不修改 production mobile CSS） */
@media (max-width: 680px) {
  .dp-study-cintro-wrap { padding: 10px 8px 26px; font-size: 14.5px; }
  .dp-study-cintro-maincard { padding: 16px 14px 18px; border-radius: 14px; }
  .dp-study-cintro-title { font-size: 18px; }
  .dp-study-cintro-subtitle { font-size: 15.5px; margin-top: 14px; }
  .dp-study-cintro-examplecard { width: 100%; padding: 11px 12px; }
  .dp-study-cintro-thsection { padding: 10px 12px 12px; }
  .dp-study-cintro-thnutrient { flex-basis: 100%; }
  .dp-study-cintro-actions { justify-content: stretch; }
  .dp-study-cintro-btn { max-width: none; width: 100%; }
}

/* =============== C2 LITE (Carbon Comprehension — dp-study-ccomp-*) =============== */
/* 视觉参数 1:1 镜像已验证 dp-study-ncomp-*；零触碰 nintro/ncomp/cintro/global selectors；
   不抽 shared class。 */
.dp-study-ccomp-wrap {
  display: block;
  padding: 14px 12px 32px;
  max-width: 920px;
  margin: 0 auto;
  color: #0f172a;
  font-size: 15px;
  position: relative;
  z-index: 1;
}
.dp-study-ccomp-maincard {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  padding: 22px 22px 24px;
  position: relative;
  z-index: 1;
}
.dp-study-ccomp-title {
  font-size: 20px;
  font-weight: 700;
  color: #0f172a;
  margin: 2px 0 6px;
}
.dp-study-ccomp-guide { margin: 0 0 10px; color: #1e293b; font-size: 14.5px; line-height: 1.7; }
.dp-study-ccomp-callout {
  margin: 0 0 14px;
  padding: 10px 14px;
  border-radius: 10px;
  background: #eff6ff;
  border: 1px solid #bfdbfe;
  color: #1e3a8a;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.6;
}

/* Question cards（对齐 N2 节奏） */
.dp-study-ccomp-qcard {
  margin: 14px 0 18px;
  padding: 12px 14px 14px;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  background: #fbfcff;
  position: relative;
  z-index: 1;
}
.dp-study-ccomp-qhead {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 8px;
}
.dp-study-ccomp-qnum {
  font-weight: 700;
  color: #1d4ed8;
  font-size: 15px;
  flex-shrink: 0;
  line-height: 1.6;
}
.dp-study-ccomp-qstem {
  font-size: 14.8px;
  color: #0f172a;
  line-height: 1.7;
  flex: 1 1 auto;
}

/* --- Q1 full Carbon label（与 C1 examplecard 同三列 grid 节奏） --- */
.dp-study-ccomp-fulllabel {
  margin: 8px 0 10px;
  padding: 11px 12px;
  border-radius: 12px;
  background: #F7FAFF;
  border: 1px solid #DFE6F6;
  width: max-content;
  max-width: 100%;
  position: relative;
  z-index: 1;
}
.dp-study-ccomp-basis-row {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  margin-bottom: 4px;
}
.dp-study-ccomp-basis-label {
  font-size: 11.5px;
  color: #7A86A5;
  letter-spacing: 0.1px;
  line-height: 1.4;
}
.dp-study-ccomp-fulllabelbody { width: 100%; }

/* 三列单行：metric | value+unit | dot + level text（不依赖空格对齐） */
.dp-study-ccomp-carbonrow {
  display: grid;
  grid-template-columns: minmax(56px, 64px) minmax(80px, 1fr) minmax(54px, 62px);
  align-items: baseline;
  column-gap: 8px;
  padding: 2px 0;
}
.dp-study-ccomp-labelcol {
  font-size: 12.5px;
  color: #334155;
  font-weight: 500;
  line-height: 1.6;
}
.dp-study-ccomp-valunitcol {
  display: flex;
  align-items: baseline;
  gap: 4px;
  justify-content: flex-start;
}
.dp-study-ccomp-value {
  font-size: 13.5px;
  font-weight: 700;
  color: #0f172a;
  letter-spacing: 0.1px;
}
.dp-study-ccomp-unit {
  font-size: 12px;
  color: #475569;
  font-weight: 500;
}
.dp-study-ccomp-levelcol {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  justify-content: flex-end;
}
.dp-study-ccomp-leveldot {
  display: inline-block;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  flex-shrink: 0;
  background: #98A3C0;
}
.dp-study-ccomp-leveltext {
  font-size: 12.5px;
  font-weight: 600;
  color: #0f172a;
}
.dp-study-ccomp-leveldot-LOW  { background: #22A06B; }
.dp-study-ccomp-leveldot-MED  { background: #D97706; }
.dp-study-ccomp-leveldot-HIGH { background: #B91C1C; }
.dp-study-ccomp-leveltext-LOW  { color: #22A06B; }
.dp-study-ccomp-leveltext-MED  { color: #D97706; }
.dp-study-ccomp-leveltext-HIGH { color: #B91C1C; }

/* Q2 食品A/B 并排（Desktop 等宽两列；窄屏堆叠） */
.dp-study-ccomp-minipairwrap {
  margin: 8px 0 12px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.dp-study-ccomp-minicard {
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  background: #fbfcff;
  padding: 10px 12px 12px;
  position: relative;
  z-index: 1;
}
.dp-study-ccomp-minicardtitle {
  font-size: 14px;
  font-weight: 700;
  color: #0f172a;
  margin: 0 0 2px;
  line-height: 1.4;
}
.dp-study-ccomp-minicardbasis {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  margin-bottom: 4px;
}
.dp-study-ccomp-minicardbody { width: 100%; }

/* Radio + option rows（对齐 N2 视觉；不改变 shared 机制，只套壳） */
.dp-study-ccomp-options {
  display: grid;
  gap: 8px;
  margin-top: 10px;
}
.dp-study-ccomp-option { display: block; }
.dp-study-ccomp-optionlabel {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 9px 10px;
  border-radius: 10px;
  border: 1px solid #e2e8f0;
  background: #ffffff;
  cursor: pointer;
  line-height: 1.6;
  font-size: 14px;
  color: #0f172a;
}
.dp-study-ccomp-optionlabel:hover { border-color: #c7d2fe; background: #fafbff; }
.dp-study-ccomp-option:has(input[type="radio"]:checked) .dp-study-ccomp-optionlabel { border-color: #93c5fd; background: #eff6ff; }
.dp-study-ccomp-optradio { display: inline-flex; align-items: center; justify-content: center; padding-top: 3px; flex-shrink: 0; }
.dp-study-ccomp-optradio input { transform: translateY(0.2px); }
.dp-study-ccomp-optk { font-weight: 700; color: #1d4ed8; flex-shrink: 0; }
.dp-study-ccomp-optv { flex: 1 1 auto; color: #0f172a; }

/* Feedback（N2 同款两色：incomplete 浅橙 / domain 浅蓝） */
.dp-study-ccomp-feedback {
  margin: 8px 0 6px;
  padding: 9px 12px;
  border-radius: 10px;
  border: 1px solid #cbd5e1;
  font-size: 13.8px;
  line-height: 1.7;
}
.dp-study-ccomp-feedback-incomplete { background: #fff7ed; border-color: #fed7aa; color: #9a3412; }
.dp-study-ccomp-feedback-domain { background: #eff6ff; border-color: #bfdbfe; color: #1e3a8a; }

/* Submit 位置（完全对齐 N2：右下 z40 + isolation；窄屏铺满） */
.dp-study-ccomp-actions {
  margin-top: 18px;
  display: flex;
  justify-content: flex-end;
  position: relative;
  z-index: 40;
  isolation: isolate;
}
.dp-study-ccomp-btn {
  max-width: 260px;
  position: relative;
  z-index: 40;
  pointer-events: auto;
  cursor: pointer;
}

/* C2 LITE 局部 responsive：不修改 production mobile CSS */
@media (max-width: 680px) {
  .dp-study-ccomp-wrap { padding: 10px 8px 26px; font-size: 14.5px; }
  .dp-study-ccomp-maincard { padding: 16px 14px 18px; border-radius: 14px; }
  .dp-study-ccomp-title { font-size: 18px; }
  .dp-study-ccomp-callout { font-size: 14.5px; padding: 9px 12px; }
  .dp-study-ccomp-fulllabel,
  .dp-study-ccomp-minicard { width: 100%; padding-left: 10px; padding-right: 10px; }
  .dp-study-ccomp-carbonrow {
    column-gap: 5px;
    grid-template-columns: minmax(52px, 60px) minmax(0, 1fr) max-content;
  }
  .dp-study-ccomp-minipairwrap { grid-template-columns: 1fr; }
  .dp-study-ccomp-actions { justify-content: stretch; }
  .dp-study-ccomp-btn { max-width: none; width: 100%; }
}

/* FIX058 Q2 match Q1 label distribution + N2 mobile safety only (Q2-only selectors; C2 mobile untouched) */
@media (min-width: 681px) {
  .dp-study-ncomp-minipairwrap { width: 92%; margin-inline: auto; }
  .dp-study-ccomp-minipairwrap { width: 92%; margin-inline: auto; }
  .dp-study-ncomp-minibody .dp-study-ncomp-nutrirow {
    width: 100%;
    margin-inline: 0;
    grid-template-columns: max-content max-content max-content max-content;
    column-gap: 8px;
    justify-content: space-between;
  }
  .dp-study-ccomp-minicardbody .dp-study-ccomp-carbonrow {
    width: 100%;
    margin-inline: 0;
    grid-template-columns: max-content max-content max-content;
    column-gap: 10px;
    justify-content: space-between;
  }
}

/* FIX060 Part A+B: Label cell edge-alignment correction (first/middle cols left-anchored; final grade col right-anchored; no grid/gap/width/size/breakpoint changes) */
/* A1｜First and middle columns — consistently left-anchored inside their grid track (valunit inner flex also left). */
.dp-study-nintro-labelcol,
.dp-study-nintro-valunitcol,
.dp-study-nintro-nrvcol,
.dp-study-ncomp-labelcol,
.dp-study-ncomp-valunitcol,
.dp-study-ncomp-nrvcol,
.dp-study-cintro-labelcol,
.dp-study-cintro-valunitcol,
.dp-study-ccomp-labelcol,
.dp-study-ccomp-valunitcol {
  justify-self: start;
  text-align: left;
}
/* A2｜Ensure inline-flex valunit wrappers keep value+unit as one natural left group (no auto-pull-right inside cell) */
.dp-study-nintro-valunitcol,
.dp-study-ncomp-valunitcol,
.dp-study-cintro-valunitcol,
.dp-study-ccomp-valunitcol {
  justify-content: flex-start;
}
/* B｜Final grade/level column — right-anchored to label content edge on the far right of the row content box. */
.dp-study-nintro-levelcol,
.dp-study-ncomp-levelcol,
.dp-study-cintro-levelcol,
.dp-study-ccomp-levelcol {
  justify-self: end;
  justify-content: flex-end;
}
/* C｜N2 Q2 SPECIAL: inside .dp-study-ncomp-minibody value/NRV inner cells 100% left-anchored row-by-row (overrides any legacy text-align:right / justify-content:flex-end / margin-left:auto that would otherwise shift vertical alignment within same-row starting points between rows) */
@media (min-width: 681px) {
  .dp-study-ncomp-minibody .dp-study-ncomp-nrvcol {
    text-align: left;
  }
  .dp-study-ncomp-minibody .dp-study-ncomp-valunitcol {
    justify-content: flex-start;
    margin-left: 0;
  }
  .dp-study-ncomp-minibody .dp-study-ncomp-value,
  .dp-study-ncomp-minibody .dp-study-ncomp-unit,
  .dp-study-ncomp-minibody .dp-study-ncomp-nrvcol {
    margin-left: 0;
  }
}

/* =================================================================
   FIX059 Part C: P1→P2 transition visual hierarchy (LOCAL ONLY; no global/shared layout changes)
   ================================================================= */
.dp-transition-card {
  padding: 36px 38px;
  text-align: left;
}
.dp-transition-title {
  font-size: 26px;
  font-weight: 700;
  line-height: 1.35;
  margin-bottom: 18px;
}
.dp-transition-completion {
  font-size: 16px;
  line-height: 1.7;
  color: #3A4B6D;
  margin-bottom: 24px;
}
.dp-transition-round2 {
  border-top: 1px solid #E6ECF5;
  padding-top: 24px;
  margin-top: 0;
}
.dp-transition-round2-title {
  font-size: 19.5px;
  font-weight: 600;
  line-height: 1.4;
  color: #1E3A8A;
  margin: 0 0 14px;
}
.dp-transition-reset {
  font-size: 16px;
  line-height: 1.75;
  color: #3A4B6D;
}
.dp-transition-reset p {
  margin: 0 0 10px;
}
.dp-transition-reset p:last-child {
  margin-bottom: 0;
}
.dp-transition-reset .dp-transition-reset-strong {
  font-weight: 600;
}
.dp-transition-button-area {
  margin-top: 28px;
  display: flex;
  justify-content: flex-start;
}
.dp-transition-phase .dp-continue-btn {
  font-size: 16px;
  min-height: 46px;
  padding: 12px 28px;
  font-weight: 700;
}
@media (max-width: 680px) {
  .dp-transition-card {
    padding: 28px 20px;
  }
  .dp-transition-title {
    font-size: 22px;
  }
  .dp-transition-round2-title {
    font-size: 18px;
  }
  .dp-transition-completion {
    font-size: 15px;
    line-height: 1.65;
  }
  .dp-transition-reset {
    font-size: 15px;
    line-height: 1.65;
  }
  .dp-transition-button-area {
    justify-content: stretch;
  }
  .dp-transition-phase .dp-continue-btn {
    width: 100%;
    max-width: none;
  }
}

/* =================================================================
   FIX061 Part C: N2 / C2 comprehension two-attempt + assisted continue
   (visual only, no changes to FIX058/FIX060 label grid/gap/alignment,
   no changes to transition page, no global/shared selectors).
   ================================================================= */

/* ---------- Nutrition N2 assistance panel ---------- */
.dp-study-ncomp-assist-panel {
  margin-top: 26px;
  padding: 22px 24px;
  border: 1px solid #E6ECF5;
  border-radius: 10px;
  background: #F6F9FF;
  color: #2B3A59;
  text-align: left;
}
.dp-study-ncomp-assist-title {
  margin: 0 0 12px;
  font-size: 18px;
  font-weight: 600;
  line-height: 1.4;
  color: #1E3A8A;
}
.dp-study-ncomp-assist-body {
  margin: 0 0 12px;
  font-size: 15px;
  line-height: 1.7;
  color: #2B3A59;
}
.dp-study-ncomp-assist-line {
  margin: 0;
}
.dp-study-ncomp-assist-line + .dp-study-ncomp-assist-line {
  margin-top: 8px;
}
.dp-study-ncomp-assist-footer {
  margin: 14px 0 0;
  padding-top: 14px;
  border-top: 1px solid #E6ECF5;
  font-size: 15px;
  line-height: 1.7;
  color: #3A4B6D;
}
.dp-study-ncomp-assist-actions {
  margin-top: 18px;
}
.dp-study-ncomp-assist-btn {
  font-size: 16px;
  min-height: 46px;
  padding: 12px 28px;
  font-weight: 700;
}
@media (max-width: 680px) {
  .dp-study-ncomp-assist-panel {
    padding: 20px 18px;
  }
  .dp-study-ncomp-assist-title { font-size: 17px; }
  .dp-study-ncomp-assist-body,
  .dp-study-ncomp-assist-footer {
    font-size: 14px;
    line-height: 1.65;
  }
  .dp-study-ncomp-assist-btn {
    width: 100%;
  }
}

/* ---------- Carbon C2 assistance panel ---------- */
.dp-study-ccomp-assist-panel {
  margin-top: 26px;
  padding: 22px 24px;
  border: 1px solid #E6ECF5;
  border-radius: 10px;
  background: #F6F9FF;
  color: #2B3A59;
  text-align: left;
}
.dp-study-ccomp-assist-title {
  margin: 0 0 12px;
  font-size: 18px;
  font-weight: 600;
  line-height: 1.4;
  color: #1E3A8A;
}
.dp-study-ccomp-assist-body {
  margin: 0 0 12px;
  font-size: 15px;
  line-height: 1.7;
  color: #2B3A59;
}
.dp-study-ccomp-assist-line {
  margin: 0;
}
.dp-study-ccomp-assist-line + .dp-study-ccomp-assist-line {
  margin-top: 8px;
}
.dp-study-ccomp-assist-footer {
  margin: 14px 0 0;
  padding-top: 14px;
  border-top: 1px solid #E6ECF5;
  font-size: 15px;
  line-height: 1.7;
  color: #3A4B6D;
}
.dp-study-ccomp-assist-actions {
  margin-top: 18px;
}
.dp-study-ccomp-assist-btn {
  font-size: 16px;
  min-height: 46px;
  padding: 12px 28px;
  font-weight: 700;
}
@media (max-width: 680px) {
  .dp-study-ccomp-assist-panel {
    padding: 20px 18px;
  }
  .dp-study-ccomp-assist-title { font-size: 17px; }
  .dp-study-ccomp-assist-body,
  .dp-study-ccomp-assist-footer {
    font-size: 14px;
    line-height: 1.65;
  }
  .dp-study-ccomp-assist-btn {
    width: 100%;
  }
}