/* ============================================================
 * GELATOlab Brand v.02 · Foundation tokens + animations
 * ============================================================
 *
 * Atelier design system — high-end perfume + fine dining lab.
 *
 * All rules in this file are scoped to body.brand-v02.
 * When body.brand-v02 is OFF (default on main), nothing in this
 * file affects the page. The toggle is flipped in index.html at
 * the end of Phase 4 (4k). Phases 1-3 ship dormant code.
 *
 * Cascade order (set in index.html):
 *   css/app.css       (existing v.01)
 *   css/pairing-ui-v2.css  (existing)
 *   css/brand-v02.css      (this file — loaded last)
 *
 * When body.brand-v02 is on, v.02 token redefinitions of same-name
 * custom properties (--burgundy, --ivory, --gold...) take effect
 * via cascade scoping — without mutating the global :root values.
 *
 * Phase 1 scope: tokens + keyframe definitions only.
 * Phase 2 will add element-affecting selectors (body bg, fonts,
 * .btn-atelier modifier, hairline utilities).
 * ============================================================ */

body.brand-v02 {
  /* ---- Core brand palette ---- */
  --burgundy:  #641322;
  --oxblood:   #4A0E18;
  --ivory:     #F7F2E8;
  --porcelain: #FBFAF6;
  --champagne: #B8965A;
  --ink:       #181614;
  --stone:     #D8D1C5;
  --mist:      #EDE6DA;

  /* ---- Status tones (mapped to brand, no traffic-light) ---- */
  --status-balanced: #5A6147;  /* olive moss · balanced */
  --status-refining: #B8965A;  /* champagne · in progress */
  --status-archived: #D8D1C5;  /* stone · paused/archived */
  --status-warning:  #641322;  /* burgundy · out of balance */

  /* ---- Semantic aliases ---- */
  --bg:      #F7F2E8;
  --surface: #FBFAF6;
  --text:    #181614;
  --muted:   rgba(24, 22, 20, 0.6);
  --faint:   rgba(24, 22, 20, 0.35);

  /* ---- Hairlines (decoration is hairlines, not boxes) ---- */
  --rule-color:   rgba(24, 22, 20, 0.12);
  --rule-gold:    rgba(184, 150, 90, 0.30);
  --rule-wine:    #641322;
  --rule-ink:     #181614;
  --rule-width:   0.5px;
  --rule-width-1: 1px;

  /* ---- Typography families ---- */
  --font-display: 'Cormorant Garamond', 'Noto Serif JP', 'Noto Serif TC', Georgia, serif;
  --font-sans:    'Manrope', 'Noto Sans JP', 'Noto Sans TC', system-ui, -apple-system, sans-serif;
  --font-mono:    'IBM Plex Mono', ui-monospace, 'SFMono-Regular', monospace;
  --font-tc:      'Noto Serif TC', serif;
  --font-tc-sans: 'Noto Sans TC', sans-serif;
  --font-jp:      'Noto Serif JP', serif;
  --font-jp-sans: 'Noto Sans JP', sans-serif;

  /* ---- Type scale (clamp-based, atelier display sizes) ---- */
  --display-sm: clamp(28px, 4vw, 40px);
  --display-md: clamp(40px, 6vw, 64px);
  --display-lg: clamp(56px, 8vw, 100px);
  --display-xl: clamp(64px, 12vw, 148px);
  --label-size:   10px;
  --eyebrow-size: 11px;

  /* ---- Letter spacing ---- */
  --ls-label: 0.22em;
  --ls-caps:  0.32em;
  --ls-wide:  0.42em;
  --ls-tight: -0.02em;

  /* ---- Line height ---- */
  --lh-display-sm: 1.05;
  --lh-display-md: 1.0;
  --lh-display-lg: 0.95;
  --lh-display-xl: 0.95;
  --lh-tight:      1.4;
  --lh-body:       1.7;

  /* ---- Font weights (atelier rarely exceeds 400) ---- */
  --fw-thin:    200;
  --fw-light:   300;
  --fw-regular: 400;

  /* ---- Layout ---- */
  --max-frame:    1320px;
  --max-readable: 680px;
  --max-prose:    580px;
  --gutter:       48px;

  /* ---- Shadows (single shadow philosophy) ---- */
  --shadow-atelier: 0 40px 100px -40px rgba(24, 22, 20, 0.18);
  --shadow-card:    0 20px 60px -30px rgba(24, 22, 20, 0.15);

  /* ---- Radii (atelier prefers no rounding) ---- */
  --radius-atelier: 0;
  --radius-soft:    2px;

  /* ---- Easing ---- */
  --ease-atelier: cubic-bezier(0.32, 0.72, 0.24, 1);
  --ease-fade:    ease;

  /* ---- Durations ---- */
  --dur-rise: 1.2s;
  --dur-fade: 0.8s;
}

/* JP locale variant — prioritize Noto Serif JP / Noto Sans JP so
 * Japanese kanji render with JP stroke ductility, not TC variants
 * (TC and JP differ on glyphs like 直, 骨, 令, 海, 海, 内). */
body.brand-v02[lang^="ja"] {
  --font-display: 'Cormorant Garamond', 'Noto Serif JP', 'Noto Serif TC', Georgia, serif;
  --font-sans:    'Manrope', 'Noto Sans JP', 'Noto Sans TC', system-ui, -apple-system, sans-serif;
}

/* ============================================================
 * Animation keyframes
 * ============================================================
 * Definitions only — utility classes (.anim-rise, .anim-fade)
 * are added in Phase 2. */

@keyframes brand-v02-rise {
  0%   { opacity: 0; transform: translateY(24px); }
  100% { opacity: 1; transform: translateY(0); }
}

@keyframes brand-v02-fade {
  0%   { opacity: 0; }
  100% { opacity: 1; }
}

/* ============================================================
 * Phase 2 — Global shell + atelier button modifier
 * ============================================================
 * All selectors below are prefixed body.brand-v02 so they only
 * affect the page when the toggle is on. v.01 paths untouched. */

/* ---- Global shell ---- */
body.brand-v02 {
  background: var(--ivory);
  color: var(--ink);
  font-family: var(--font-sans);
  font-weight: var(--fw-light);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body.brand-v02 #app,
body.brand-v02 .app-shell,
body.brand-v02 .main-content,
body.brand-v02 .main {
  background: var(--ivory);
  color: var(--ink);
}

/* ---- Headings — editorial serif ---- */
body.brand-v02 h1,
body.brand-v02 h2,
body.brand-v02 h3,
body.brand-v02 h4,
body.brand-v02 h5,
body.brand-v02 h6 {
  font-family: var(--font-display);
  font-weight: var(--fw-light);
  color: var(--ink);
  letter-spacing: var(--ls-tight);
}

body.brand-v02 .display-sm { font-size: var(--display-sm); line-height: var(--lh-display-sm); }
body.brand-v02 .display-md { font-size: var(--display-md); line-height: var(--lh-display-md); }
body.brand-v02 .display-lg { font-size: var(--display-lg); line-height: var(--lh-display-lg); }
body.brand-v02 .display-xl { font-size: var(--display-xl); line-height: var(--lh-display-xl); }

body.brand-v02 .display-sm,
body.brand-v02 .display-md,
body.brand-v02 .display-lg,
body.brand-v02 .display-xl {
  font-family: var(--font-display);
  font-weight: var(--fw-light);
  color: var(--ink);
}

body.brand-v02 em,
body.brand-v02 .italic-accent {
  font-style: italic;
  color: var(--burgundy);
}

/* ---- Mono / label / eyebrow ---- */
body.brand-v02 .mono,
body.brand-v02 .label-mono,
body.brand-v02 .eyebrow {
  font-family: var(--font-mono);
  text-transform: uppercase;
  color: var(--muted);
}

body.brand-v02 .label-mono {
  font-size: var(--label-size);
  letter-spacing: var(--ls-label);
  line-height: var(--lh-tight);
}

body.brand-v02 .eyebrow {
  font-size: var(--eyebrow-size);
  letter-spacing: var(--ls-caps);
  line-height: var(--lh-tight);
}

body.brand-v02 .wide-track  { letter-spacing: var(--ls-wide); }
body.brand-v02 .caps-track  { letter-spacing: var(--ls-caps); }
body.brand-v02 .label-track { letter-spacing: var(--ls-label); }

/* ---- Atelier button modifier ----
 * Apply alongside existing button class:
 *   <button class="btn-primary btn-atelier">
 * v.01 buttons (.btn-primary alone) keep their v.01 look even when
 * toggle is on. Only opt-in elements adopt atelier styling. */

body.brand-v02 .btn-atelier {
  font-family: var(--font-sans);
  font-weight: var(--fw-light);
  font-size: 11px;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  border-radius: var(--radius-atelier);
  padding: 14px 32px;
  cursor: pointer;
  transition: background 200ms var(--ease-atelier),
              color 200ms var(--ease-atelier),
              border-color 200ms var(--ease-atelier);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  line-height: 1;
}

body.brand-v02 .btn-primary.btn-atelier {
  background: var(--burgundy);
  color: var(--ivory);
  border: 1px solid var(--burgundy);
}

body.brand-v02 .btn-primary.btn-atelier:hover {
  background: var(--oxblood);
  border-color: var(--oxblood);
}

body.brand-v02 .btn-primary.btn-atelier:active {
  background: var(--oxblood);
}

body.brand-v02 .btn-secondary.btn-atelier {
  background: transparent;
  color: var(--ink);
  border: 1px solid var(--ink);
}

body.brand-v02 .btn-secondary.btn-atelier:hover {
  background: var(--ink);
  color: var(--ivory);
  border-color: var(--ink);
}

body.brand-v02 .btn-gold.btn-atelier {
  background: transparent;
  color: var(--champagne);
  border: 1px solid var(--champagne);
}

body.brand-v02 .btn-gold.btn-atelier:hover {
  background: var(--champagne);
  color: var(--ivory);
}

body.brand-v02 .btn-danger.btn-atelier {
  background: transparent;
  color: var(--burgundy);
  border: 1px solid var(--burgundy);
}

body.brand-v02 .btn-danger.btn-atelier:hover {
  background: var(--burgundy);
  color: var(--ivory);
}

body.brand-v02 .btn-text.btn-atelier {
  background: none;
  border: none;
  color: var(--burgundy);
  padding: 0;
  font-size: 12px;
  letter-spacing: var(--ls-label);
}

body.brand-v02 .btn-text.btn-atelier:hover {
  color: var(--oxblood);
  text-decoration: underline;
  text-underline-offset: 4px;
}

/* Sizing modifier — small atelier button */
body.brand-v02 .btn-atelier.btn-sm {
  padding: 8px 18px;
  font-size: 10px;
  letter-spacing: var(--ls-label);
}

body.brand-v02 .btn-atelier:disabled,
body.brand-v02 .btn-atelier[disabled] {
  opacity: 0.4;
  cursor: not-allowed;
}

/* ---- Hairline utilities ----
 * Decoration is hairlines, not boxes. Use .rule-t / .rule-b /
 * .rule-l / .rule-r as opt-in dividers instead of bg-gray panels. */
body.brand-v02 .rule-t { border-top:    1px solid var(--rule-color); }
body.brand-v02 .rule-b { border-bottom: 1px solid var(--rule-color); }
body.brand-v02 .rule-l { border-left:   1px solid var(--rule-color); }
body.brand-v02 .rule-r { border-right:  1px solid var(--rule-color); }

body.brand-v02 .rule-t-gold { border-top:    1px solid var(--rule-gold); }
body.brand-v02 .rule-b-gold { border-bottom: 1px solid var(--rule-gold); }

body.brand-v02 .rule-t-ink { border-top:    1px solid var(--ink); }
body.brand-v02 .rule-b-ink { border-bottom: 1px solid var(--ink); }

/* Hairline spans for inline use (e.g. between metadata strips) */
body.brand-v02 .hairline {
  display: block;
  height: 1px;
  background: var(--rule-color);
  border: 0;
  margin: 24px 0;
}

body.brand-v02 .hairline-gold {
  display: block;
  height: 1px;
  background: var(--rule-gold);
  border: 0;
  margin: 24px 0;
}

/* ---- Animation utilities ---- */
body.brand-v02 .anim-rise {
  animation: brand-v02-rise var(--dur-rise) var(--ease-atelier) both;
}

body.brand-v02 .anim-fade {
  animation: brand-v02-fade var(--dur-fade) var(--ease-fade) both;
}

/* Stagger helpers (combine with .anim-rise) */
body.brand-v02 .stagger-1 { animation-delay: 0.15s; }
body.brand-v02 .stagger-2 { animation-delay: 0.30s; }
body.brand-v02 .stagger-3 { animation-delay: 0.45s; }
body.brand-v02 .stagger-4 { animation-delay: 0.60s; }
body.brand-v02 .stagger-5 { animation-delay: 0.75s; }

/* ---- Atelier surface helpers ---- */
body.brand-v02 .surface-porcelain { background: var(--porcelain); }
body.brand-v02 .surface-mist      { background: var(--mist); }
body.brand-v02 .surface-stone     { background: var(--stone); }
body.brand-v02 .surface-ivory     { background: var(--ivory); }

body.brand-v02 .frame {
  max-width: var(--max-frame);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

body.brand-v02 .readable {
  max-width: var(--max-readable);
}

body.brand-v02 .prose-narrow {
  max-width: var(--max-prose);
}

/* ---- Status dots (small atelier markers) ---- */
body.brand-v02 .status-dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  margin-right: 8px;
  vertical-align: middle;
  background: var(--stone);
}

body.brand-v02 .status-dot.is-balanced { background: var(--status-balanced); }
body.brand-v02 .status-dot.is-refining { background: var(--status-refining); }
body.brand-v02 .status-dot.is-archived { background: var(--status-archived); }
body.brand-v02 .status-dot.is-warning  { background: var(--status-warning); }

body.brand-v02 .status-line {
  font-family: var(--font-mono);
  font-size: var(--label-size);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--muted);
  display: inline-flex;
  align-items: center;
}

/* ============================================================
 * Phase 3 — Component layer styles
 * ============================================================
 * Selectors for the 8 BrandV02.* render helpers in
 * js/brand-v02-components.js. All scoped under body.brand-v02. */

/* ---- italic accent helper (used by multiple components) ---- */
body.brand-v02 .brand-v02-italic {
  font-style: italic;
  color: var(--burgundy);
  font-family: var(--font-display);
}

/* ============================================================
 * renderSectionHead
 * ============================================================ */
body.brand-v02 .brand-v02-section-head {
  display: grid;
  grid-template-columns: auto auto 1fr;
  align-items: baseline;
  gap: 24px;
  padding-bottom: 24px;
  margin-bottom: 32px;
  border-bottom: 1px solid var(--rule-color);
}

body.brand-v02 .brand-v02-section-head__roman {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: var(--fw-light);
  font-size: 28px;
  color: var(--burgundy);
  line-height: 1;
  min-width: 1.5em;
}

body.brand-v02 .brand-v02-section-head__mono {
  font-size: var(--label-size);
  letter-spacing: var(--ls-caps);
}

body.brand-v02 .brand-v02-section-head__title {
  font-family: var(--font-display);
  font-weight: var(--fw-light);
  font-size: var(--display-md);
  line-height: var(--lh-display-md);
  color: var(--ink);
  letter-spacing: var(--ls-tight);
  margin: 0;
  text-align: right;
}

/* ============================================================
 * renderDataGrid
 * ============================================================ */
body.brand-v02 .brand-v02-data-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  border-top: 1px solid var(--rule-color);
  border-bottom: 1px solid var(--rule-color);
}

body.brand-v02 .brand-v02-data-grid__cell {
  padding: 18px 20px;
  border-right: 1px solid var(--rule-color);
  border-bottom: 1px solid var(--rule-color);
}

body.brand-v02 .brand-v02-data-grid__cell:nth-child(2n) {
  border-right: 0;
}

body.brand-v02 .brand-v02-data-grid__cell:nth-last-child(-n+2) {
  border-bottom: 0;
}

body.brand-v02 .brand-v02-data-grid__key {
  font-size: 9px;
  letter-spacing: var(--ls-label);
  color: var(--muted);
  margin-bottom: 6px;
}

body.brand-v02 .brand-v02-data-grid__value {
  font-family: var(--font-display);
  font-weight: var(--fw-light);
  font-size: 24px;
  line-height: 1;
  color: var(--ink);
}

body.brand-v02 .brand-v02-data-grid__unit {
  font-size: 0.6em;
  color: var(--muted);
  margin-left: 2px;
  letter-spacing: 0;
}

@media (min-width: 768px) {
  body.brand-v02 .brand-v02-data-grid--4col {
    grid-template-columns: repeat(4, 1fr);
  }
  body.brand-v02 .brand-v02-data-grid--4col .brand-v02-data-grid__cell:nth-child(4n) {
    border-right: 0;
  }
  body.brand-v02 .brand-v02-data-grid--4col .brand-v02-data-grid__cell:nth-child(2n) {
    border-right: 1px solid var(--rule-color);
  }
}

/* ============================================================
 * renderSensoryNotes
 * ============================================================ */
body.brand-v02 .brand-v02-sensory {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
}

body.brand-v02 .brand-v02-sensory__item {
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: 24px;
  padding: 16px 0;
  border-bottom: 1px solid var(--rule-color);
  align-items: baseline;
}

body.brand-v02 .brand-v02-sensory__item:last-child {
  border-bottom: 0;
}

body.brand-v02 .brand-v02-sensory__label {
  font-size: var(--label-size);
  letter-spacing: var(--ls-label);
  color: var(--muted);
  align-self: start;
}

body.brand-v02 .brand-v02-sensory__prose {
  font-family: var(--font-display);
  font-weight: var(--fw-light);
  font-size: 17px;
  line-height: 1.5;
  color: var(--ink);
}

body.brand-v02 .brand-v02-sensory__prose em {
  font-style: italic;
  color: var(--ink);
}

@media (max-width: 600px) {
  body.brand-v02 .brand-v02-sensory__item {
    grid-template-columns: 1fr;
    gap: 8px;
  }
}

/* ============================================================
 * renderRailItem
 * ============================================================ */
body.brand-v02 .brand-v02-rail-item {
  display: block;
  padding: 14px 0;
  border-bottom: 1px solid var(--rule-color);
  text-decoration: none;
  color: var(--ink);
  cursor: pointer;
  transition: background 200ms var(--ease-atelier);
}

body.brand-v02 .brand-v02-rail-item:hover {
  background: var(--mist);
  padding-left: 12px;
}

body.brand-v02 .brand-v02-rail-item__meta {
  display: block;
  font-size: 9px;
  letter-spacing: var(--ls-label);
  color: var(--muted);
  margin-bottom: 4px;
}

body.brand-v02 .brand-v02-rail-item__name {
  display: block;
  font-family: var(--font-display);
  font-weight: var(--fw-light);
  font-size: 22px;
  line-height: 1.15;
  color: var(--ink);
  letter-spacing: var(--ls-tight);
}

/* ============================================================
 * renderBrandBar
 * ============================================================ */
body.brand-v02 .brand-v02-brand-bar {
  position: sticky;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  background: rgba(247, 242, 232, 0.92);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--rule-color);
}

body.brand-v02 .brand-v02-brand-bar__inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  max-width: var(--max-frame);
  margin-inline: auto;
  padding: 16px 48px;
}

body.brand-v02 .brand-v02-brand-bar__wordmark {
  font-family: var(--font-sans);
  font-weight: var(--fw-light);
  font-size: 15px;
  letter-spacing: var(--ls-tight);
  color: var(--ink);
  text-decoration: none;
  transition: opacity 200ms var(--ease-atelier);
  display: inline-flex;
  align-items: center;
  line-height: 1;
}

body.brand-v02 .brand-v02-brand-bar__wordmark:hover {
  opacity: 0.7;
}

body.brand-v02 .brand-v02-brand-bar__wordmark-accent {
  color: var(--burgundy);
  font-weight: var(--fw-regular);
}

body.brand-v02 .brand-v02-brand-bar__logo-img {
  display: block;
  height: 42px;
  width: auto;
  max-width: 130px;
  object-fit: contain;
}

@media (max-width: 640px) {
  body.brand-v02 .brand-v02-brand-bar__logo-img {
    height: 34px;
    max-width: 100px;
  }
}

body.brand-v02 .brand-v02-brand-bar__nav {
  display: flex;
  gap: 36px;
  align-items: center;
}

body.brand-v02 .brand-v02-brand-bar__nav-item {
  position: relative;
  background: none;
  border: 0;
  padding: 8px 0;
  cursor: pointer;
  font-family: var(--font-mono);
  font-size: var(--label-size);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--muted);
  transition: color 200ms var(--ease-atelier);
}

body.brand-v02 .brand-v02-brand-bar__nav-item:hover {
  color: var(--ink);
}

body.brand-v02 .brand-v02-brand-bar__nav-item.is-active {
  color: var(--burgundy);
}

body.brand-v02 .brand-v02-brand-bar__underline {
  position: absolute;
  bottom: -1px;
  left: 50%;
  transform: translateX(-50%);
  width: 24px;
  height: 1px;
  background: var(--burgundy);
}

body.brand-v02 .brand-v02-brand-bar__meta {
  display: flex;
  gap: 14px;
  align-items: center;
  font-family: var(--font-mono);
  font-size: var(--label-size);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--muted);
}

body.brand-v02 .brand-v02-brand-bar__meta-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--champagne);
}

@media (max-width: 768px) {
  body.brand-v02 .brand-v02-brand-bar__nav,
  body.brand-v02 .brand-v02-brand-bar__meta {
    display: none;
  }
  body.brand-v02 .brand-v02-brand-bar__inner {
    padding: 14px 24px;
  }
}

/* ============================================================
 * renderHero
 * ============================================================ */
body.brand-v02 .brand-v02-hero {
  position: relative;
  min-height: 80vh;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 128px 48px 48px;
  background: var(--ivory);
  color: var(--ink);
}

body.brand-v02 .brand-v02-hero__corner {
  position: absolute;
  top: 96px;
  left: 48px;
  font-size: var(--label-size);
  letter-spacing: var(--ls-label);
  color: var(--muted);
}

body.brand-v02 .brand-v02-hero__corner--top-left .brand-v02-italic {
  display: block;
  color: var(--burgundy);
  margin-top: 4px;
}

body.brand-v02 .brand-v02-hero__center {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 48px 0;
}

body.brand-v02 .brand-v02-hero__wordmark {
  text-align: center;
  margin-bottom: 80px;
}

body.brand-v02 .brand-v02-hero__wordmark-text {
  font-family: var(--font-sans);
  font-weight: var(--fw-thin);
  font-size: var(--display-xl);
  line-height: 1;
  letter-spacing: var(--ls-tight);
  color: var(--ink);
  margin: 0;
}

body.brand-v02 .brand-v02-hero__wordmark-accent {
  color: var(--burgundy);
  font-weight: var(--fw-light);
}

body.brand-v02 .brand-v02-hero__wordmark-rule {
  margin-top: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  font-size: 11px;
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--muted);
}

body.brand-v02 .brand-v02-hero__hairline {
  display: inline-block;
  width: 56px;
  height: 1px;
  background: var(--faint);
}

body.brand-v02 .brand-v02-hero__tagline-grid {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 56px;
  align-items: center;
  max-width: 1024px;
  margin: 0 auto 80px;
}

body.brand-v02 .brand-v02-hero__tagline-en {
  text-align: right;
  max-width: 380px;
  margin-left: auto;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: var(--fw-light);
  font-size: clamp(20px, 2.4vw, 30px);
  line-height: 1.35;
  color: var(--ink);
}

body.brand-v02 .brand-v02-hero__tagline-en em {
  color: var(--burgundy);
  font-style: italic;
}

body.brand-v02 .brand-v02-hero__divider {
  width: 1px;
  height: 48px;
  background: var(--champagne);
}

body.brand-v02 .brand-v02-hero__tagline-zh {
  font-family: 'Noto Serif TC', var(--font-display);
  font-weight: var(--fw-light);
  font-size: clamp(15px, 1.4vw, 18px);
  line-height: 1.7;
  letter-spacing: 0.05em;
  color: var(--muted);
  max-width: 380px;
}

body.brand-v02 .brand-v02-hero__ctas {
  display: flex;
  justify-content: center;
  gap: 24px;
  flex-wrap: wrap;
}

body.brand-v02 .brand-v02-hero__arrow {
  font-family: var(--font-mono);
  margin-left: 12px;
}

body.brand-v02 .brand-v02-hero__data-band {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 80px;
  padding: 20px 0;
  border-top: 1px solid var(--rule-color);
  border-bottom: 1px solid var(--rule-color);
  font-family: var(--font-mono);
  font-size: var(--label-size);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--muted);
}

body.brand-v02 .brand-v02-hero__data-band-strong {
  color: var(--ink);
}

@media (max-width: 840px) {
  body.brand-v02 .brand-v02-hero {
    padding: 96px 24px 32px;
  }
  body.brand-v02 .brand-v02-hero__corner {
    top: 88px;
    left: 24px;
  }
  body.brand-v02 .brand-v02-hero__tagline-grid {
    grid-template-columns: 1fr;
    gap: 32px;
    text-align: center;
  }
  body.brand-v02 .brand-v02-hero__tagline-en {
    text-align: center;
    margin-left: 0;
    max-width: 100%;
  }
  body.brand-v02 .brand-v02-hero__divider {
    width: 48px;
    height: 1px;
    margin: 0 auto;
  }
  body.brand-v02 .brand-v02-hero__tagline-zh {
    max-width: 100%;
  }
}

/* ============================================================
 * renderRecipeCard (perfume label, light/dark/wine variants)
 * ============================================================ */
body.brand-v02 .brand-v02-recipe-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 32px 26px;
  border: 1px solid currentColor;
  aspect-ratio: 5 / 7;
  font-family: var(--font-sans);
  font-weight: var(--fw-light);
  cursor: pointer;
  transition: box-shadow 500ms var(--ease-atelier),
              transform 500ms var(--ease-atelier);
}

body.brand-v02 .brand-v02-recipe-card:hover {
  box-shadow: var(--shadow-card);
}

/* Variant: light (ivory bg, ink borders, burgundy accents) */
body.brand-v02 .brand-v02-recipe-card--light {
  background: var(--ivory);
  border-color: var(--ink);
  color: var(--ink);
}

/* Variant: dark (ink bg, ivory text, champagne accents) */
body.brand-v02 .brand-v02-recipe-card--dark {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--ivory);
}
body.brand-v02 .brand-v02-recipe-card--dark .brand-v02-recipe-card__number,
body.brand-v02 .brand-v02-recipe-card--dark .brand-v02-recipe-card__name-text em,
body.brand-v02 .brand-v02-recipe-card--dark .brand-v02-recipe-card__seal em {
  color: var(--champagne);
}

/* Variant: wine (burgundy bg, ivory text, champagne accents) */
body.brand-v02 .brand-v02-recipe-card--wine {
  background: var(--burgundy);
  border-color: var(--burgundy);
  color: var(--ivory);
}
body.brand-v02 .brand-v02-recipe-card--wine .brand-v02-recipe-card__number,
body.brand-v02 .brand-v02-recipe-card--wine .brand-v02-recipe-card__name-text em,
body.brand-v02 .brand-v02-recipe-card--wine .brand-v02-recipe-card__seal em {
  color: var(--champagne);
}

/* Head */
body.brand-v02 .brand-v02-recipe-card__head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  border-bottom: 1px solid currentColor;
  padding-bottom: 14px;
}

body.brand-v02 .brand-v02-recipe-card__meta {
  display: block;
  font-size: 9px;
  letter-spacing: var(--ls-label);
  margin-bottom: 4px;
  opacity: 0.6;
}

body.brand-v02 .brand-v02-recipe-card__number {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: var(--fw-light);
  font-size: 30px;
  line-height: 1;
  color: var(--burgundy);
}

body.brand-v02 .brand-v02-recipe-card__head-right {
  text-align: right;
  font-size: 9px;
  letter-spacing: var(--ls-label);
  line-height: 1.6;
  opacity: 0.6;
}

/* Name */
body.brand-v02 .brand-v02-recipe-card__name {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

body.brand-v02 .brand-v02-recipe-card__name-text {
  font-family: var(--font-display);
  font-weight: var(--fw-light);
  font-size: 28px;
  line-height: 1.05;
  letter-spacing: var(--ls-tight);
  margin: 0;
}

body.brand-v02 .brand-v02-recipe-card__name-text em {
  color: var(--burgundy);
  font-style: italic;
}

body.brand-v02 .brand-v02-recipe-card__tagline {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: var(--fw-light);
  font-size: 13px;
  line-height: 1.45;
  margin: 0;
  opacity: 0.6;
}

body.brand-v02 .brand-v02-recipe-card__official {
  display: inline-block;
  font-size: 9px;
  letter-spacing: var(--ls-caps);
  color: var(--champagne);
  border-top: 1px solid var(--champagne);
  border-bottom: 1px solid var(--champagne);
  padding: 3px 0;
  margin-top: 4px;
  width: fit-content;
}

/* Data grid (within recipe card) */
body.brand-v02 .brand-v02-recipe-card__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  border-top: 1px solid currentColor;
  border-bottom: 1px solid currentColor;
}

body.brand-v02 .brand-v02-recipe-card__cell {
  padding: 10px 12px;
}

body.brand-v02 .brand-v02-recipe-card__cell--right {
  border-right: 1px solid currentColor;
}

body.brand-v02 .brand-v02-recipe-card__cell--bottom {
  border-bottom: 1px solid currentColor;
}

body.brand-v02 .brand-v02-recipe-card__cell-key {
  font-size: 8.5px;
  letter-spacing: var(--ls-label);
  opacity: 0.7;
  margin-bottom: 2px;
}

body.brand-v02 .brand-v02-recipe-card__cell-value {
  font-family: var(--font-display);
  font-weight: var(--fw-light);
  font-size: 18px;
  line-height: 1;
}

/* Foot */
body.brand-v02 .brand-v02-recipe-card__foot {
  margin-top: auto;
  border-top: 1px solid currentColor;
  padding-top: 14px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  opacity: 0.7;
}

body.brand-v02 .brand-v02-recipe-card__seal em {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 13px;
  letter-spacing: 0;
  text-transform: none;
  color: var(--burgundy);
  opacity: 1;
}

body.brand-v02 .brand-v02-recipe-card__status {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Floating actions (revealed on hover, opt-in via opts.actionsHtml) */
body.brand-v02 .brand-v02-recipe-card__actions {
  position: absolute;
  top: 12px;
  right: 12px;
  display: flex;
  gap: 4px;
  opacity: 0;
  transition: opacity 200ms var(--ease-atelier);
}

body.brand-v02 .brand-v02-recipe-card:hover .brand-v02-recipe-card__actions {
  opacity: 1;
}

body.brand-v02 .brand-v02-recipe-card__action {
  background: rgba(247, 242, 232, 0.85);
  border: 1px solid var(--rule-color);
  color: var(--ink);
  width: 26px;
  height: 26px;
  font-size: 13px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border-radius: var(--radius-atelier);
  transition: background 200ms var(--ease-atelier),
              color 200ms var(--ease-atelier),
              border-color 200ms var(--ease-atelier);
}

body.brand-v02 .brand-v02-recipe-card__action:hover {
  background: var(--ink);
  color: var(--ivory);
  border-color: var(--ink);
}

body.brand-v02 .brand-v02-recipe-card__action--danger:hover {
  background: var(--burgundy);
  border-color: var(--burgundy);
  color: var(--ivory);
}

/* ============================================================
 * .brand-v02-only — elements that exist in v.02 markup additions
 * but should be invisible when toggle is off (so v.01 paths look
 * exactly as before even with new HTML in place).
 * NOTE: this rule is intentionally OUTSIDE body.brand-v02 scope
 * — it must apply when the toggle is OFF.
 * ============================================================ */
.brand-v02-only { display: none; }
body.brand-v02 .brand-v02-only { display: revert; }

/* ============================================================
 * Phase 4a — Login screen atelier override
 * ============================================================
 * When body.brand-v02 is on and .brand-v02-login is the page wrapper,
 * the existing login-card structure adopts atelier styling. v.01
 * default still works when toggle is off. */

body.brand-v02 .brand-v02-login.login-page {
  background: var(--ivory);
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: 80px 24px 48px;
}

body.brand-v02 .brand-v02-login__eyebrow {
  position: absolute;
  top: 32px;
  left: 0;
  right: 0;
  display: flex;
  justify-content: space-between;
  padding: 0 48px;
  font-size: var(--label-size);
  letter-spacing: var(--ls-label);
  color: var(--muted);
  text-transform: uppercase;
}

@media (max-width: 600px) {
  body.brand-v02 .brand-v02-login__eyebrow {
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 0 24px;
    text-align: center;
  }
}

body.brand-v02 .brand-v02-login .login-card {
  background: transparent;
  border: 0;
  box-shadow: none;
  padding: 48px 32px;
  max-width: 440px;
  width: 100%;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 28px;
}

body.brand-v02 .brand-v02-login .login-logo {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  margin: 0;
}

body.brand-v02 .brand-v02-login .login-gelato-icon {
  font-size: 28px;
  margin-bottom: 8px;
  filter: grayscale(0.2);
}

body.brand-v02 .brand-v02-login .login-brand-logo {
  display: block;
  width: 220px;
  height: auto;
  max-width: 80%;
  margin: 0 auto 4px;
}

@media (max-width: 640px) {
  body.brand-v02 .brand-v02-login .login-brand-logo {
    width: 180px;
  }
}

body.brand-v02 .brand-v02-login .login-brand {
  font-family: var(--font-display);
  font-weight: var(--fw-light);
  font-size: 32px;
  line-height: 1.05;
  letter-spacing: var(--ls-tight);
  color: var(--ink);
  margin: 0;
}

body.brand-v02 .brand-v02-login .login-brand-sub {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: var(--burgundy);
  font-weight: var(--fw-regular);
  margin: 0;
}

body.brand-v02 .brand-v02-login .login-tagline {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: var(--fw-light);
  font-size: 16px;
  line-height: 1.4;
  color: var(--muted);
  margin: 4px 0 0;
}

body.brand-v02 .brand-v02-login__italic {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: var(--fw-light);
  font-size: 14px;
  line-height: 1.5;
  color: var(--muted);
  margin-top: 12px;
  max-width: 320px;
  text-align: center;
}

body.brand-v02 .brand-v02-login__italic em {
  font-style: italic;
}

body.brand-v02 .brand-v02-login .login-divider {
  height: 1px;
  background: var(--rule-color);
  border: 0;
  margin: 8px 0;
  width: 100%;
}

/* v284 fix: 隱藏 v.01 殘留的 ⸻ ⋆ ⸻ 星條飾，v.02 用單純 hairline */
body.brand-v02 .brand-v02-login .login-divider::before {
  content: none;
}

/* v284 fix: mobile 登入頁 footer 改 static 自然 flow，
   避免 position:absolute 與 BY INVITATION seal 重疊 */
@media (max-width: 768px) {
  .brand-v02 .login-page + .site-footer,
  .login-page + .site-footer {
    position: static;
    margin-top: 24px;
    padding-bottom: 20px;
  }
  /* mobile 上 footer-divider 與 seal-rule 太近視覺擁擠，footer-divider 改用較淡色 */
  body.brand-v02 .footer-divider {
    margin-top: 12px;
    opacity: 0.5;
  }
}

/* NOTE: .btn-google is intentionally NOT restyled in v.02. Google SSO
 * design guidelines require strict adherence to Google's branded button
 * (white bg, #DADCE0 border, specific font/spacing). Restyling violates
 * Google brand policy and risks rejection during OAuth review. */

body.brand-v02 .brand-v02-login .btn-secondary.btn-full.btn-atelier {
  width: 100%;
}

body.brand-v02 .brand-v02-login .login-note {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--faint);
  line-height: 1.6;
  margin: 8px 0 0;
}

body.brand-v02 .brand-v02-login__seal {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin-top: 24px;
  font-size: 10px;
  letter-spacing: var(--ls-caps);
  color: var(--muted);
  text-transform: uppercase;
}

body.brand-v02 .brand-v02-login__seal-rule {
  display: inline-block;
  width: 32px;
  height: 1px;
  background: var(--rule-color);
}

/* ============================================================
 * Phase 4b — Sidebar + mobile nav + brand bar mount
 * ============================================================ */

/* v268 hotfix: app.css 的 #app 是 display:flex; flex-direction:row（給 v.01 的 sidebar+main
 * 用），但 brand-v02 把 brand-bar-mount 也接到 #app 下，導致它變成 flex row 的子元素
 * 吃掉 ~666px 寬，把 sidebar 跟 main-content 擠成只剩各 240/359px。
 * v.01 的 sidebar 本來就 position:fixed、main-content 用 margin-left 偏移，
 * 根本不依賴父層 flex；brand-v02 模式下把 #app 改回 block 即可恢復正常。 */
body.brand-v02 #app {
  display: block;
}

/* Brand bar mount — keep it above everything (z above sidebar 200) */
body.brand-v02 .brand-v02-bar-mount {
  position: sticky;
  top: 0;
  z-index: 250;
}

body.brand-v02 .brand-v02-bar-mount .brand-v02-brand-bar {
  position: relative;
}

/* Push sidebar content down past the brand bar (~57px height) */
body.brand-v02 .sidebar.brand-v02-sidebar {
  background: var(--ivory);
  color: var(--ink);
  border-right: 1px solid var(--rule-color);
  box-shadow: none;
  padding-top: 0;
}

/* Sidebar logo — atelier serif treatment */
body.brand-v02 .brand-v02-sidebar .sidebar-logo {
  border-bottom: 1px solid var(--rule-color);
  padding: 22px 24px 18px;
  gap: 6px;
}

body.brand-v02 .brand-v02-sidebar .sidebar-logo:hover {
  opacity: 1;
  background: var(--mist);
}

body.brand-v02 .brand-v02-sidebar .logo-brand {
  font-family: var(--font-display);
  font-weight: var(--fw-light);
  font-size: 22px;
  color: var(--ink);
  letter-spacing: var(--ls-tight);
  line-height: 1.1;
}

body.brand-v02 .brand-v02-sidebar .logo-sub {
  font-family: var(--font-mono);
  font-size: 9px;
  color: var(--burgundy);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  font-weight: var(--fw-regular);
}

body.brand-v02 .brand-v02-sidebar .sidebar-eyebrow {
  font-size: 9px;
  letter-spacing: var(--ls-caps);
  color: var(--muted);
  margin-top: 4px;
  text-transform: uppercase;
}

/* Sidebar nav — atelier mono with hairline divider per item */
body.brand-v02 .brand-v02-sidebar .sidebar-nav {
  padding: 14px 0;
  gap: 0;
}

body.brand-v02 .brand-v02-sidebar .nav-item {
  background: transparent;
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  padding: 14px 24px;
  border-radius: 0;
  border-bottom: 1px solid transparent;
  gap: 14px;
  position: relative;
  transition: color 200ms var(--ease-atelier),
              background 200ms var(--ease-atelier),
              padding 200ms var(--ease-atelier);
}

body.brand-v02 .brand-v02-sidebar .nav-item:hover {
  background: var(--mist);
  color: var(--ink);
  padding-left: 30px;
}

body.brand-v02 .brand-v02-sidebar .nav-item.active {
  background: transparent;
  color: var(--burgundy);
}

/* Replace v.01 left-bar accent with atelier underline */
body.brand-v02 .brand-v02-sidebar .nav-item.active::before {
  content: '';
  position: absolute;
  left: 24px;
  bottom: 6px;
  top: auto;
  transform: none;
  width: 24px;
  height: 1px;
  background: var(--burgundy);
  border-radius: 0;
}

body.brand-v02 .brand-v02-sidebar .nav-icon {
  opacity: 0.4;
  font-size: 13px;
  width: 18px;
  transition: opacity 200ms var(--ease-atelier);
}

body.brand-v02 .brand-v02-sidebar .nav-icon .gli {
  width: 14px;
  height: 14px;
}

/* v277 Phase 3 — Atelier icon style: 1px stroke + non-scaling for hairline feel */
body.brand-v02 .gli {
  stroke-width: 1.1;
  vector-effect: non-scaling-stroke;
}
body.brand-v02 .gli.icon-atelier--burgundy { color: var(--burgundy); }
body.brand-v02 .gli.icon-atelier--champagne { color: var(--champagne); }

body.brand-v02 .brand-v02-sidebar .nav-item:hover .nav-icon,
body.brand-v02 .brand-v02-sidebar .nav-item.active .nav-icon {
  opacity: 0.7;
}

body.brand-v02 .brand-v02-sidebar .nav-label {
  letter-spacing: var(--ls-label);
}

body.brand-v02 .brand-v02-sidebar .nav-lock {
  opacity: 0.5;
}

body.brand-v02 .brand-v02-sidebar .pro-badge {
  background: transparent;
  color: var(--champagne);
  border: 1px solid var(--champagne);
  border-radius: 0;
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: var(--ls-label);
  font-weight: var(--fw-regular);
  padding: 2px 6px;
  text-transform: uppercase;
}

/* Sidebar user — minimal hairline above */
body.brand-v02 .brand-v02-sidebar .sidebar-user {
  border-top: 1px solid var(--rule-color);
  background: transparent;
  padding: 18px 24px;
  gap: 10px;
}

body.brand-v02 .brand-v02-sidebar .avatar,
body.brand-v02 .brand-v02-sidebar .avatar-placeholder {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid var(--rule-color);
}

body.brand-v02 .brand-v02-sidebar .user-name {
  font-family: var(--font-sans);
  font-weight: var(--fw-light);
  font-size: 13px;
  color: var(--ink);
  letter-spacing: 0;
  line-height: 1.2;
}

body.brand-v02 .brand-v02-sidebar .user-tier {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  font-weight: var(--fw-regular);
  background: transparent;
  padding: 0;
  margin-top: 2px;
}

body.brand-v02 .brand-v02-sidebar .user-tier.tier-pro {
  color: var(--champagne);
}

body.brand-v02 .brand-v02-sidebar .points-badge-sidebar {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--burgundy);
  background: transparent;
  padding: 0;
  margin-top: 2px;
}

body.brand-v02 .brand-v02-sidebar .btn-icon {
  background: transparent;
  border: 1px solid var(--rule-color);
  border-radius: 0;
  color: var(--muted);
  width: 30px;
  height: 30px;
  transition: all 200ms var(--ease-atelier);
}

body.brand-v02 .brand-v02-sidebar .btn-icon:hover {
  border-color: var(--ink);
  color: var(--ink);
}

body.brand-v02 .brand-v02-sidebar .notification-badge {
  background: var(--burgundy);
  color: var(--ivory);
  border-radius: 50%;
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0;
}

/* Main content — push down to clear sticky brand bar */
body.brand-v02 .main-content {
  padding-top: 32px;
}

/* ============================================================
 * Mobile nav (atelier override)
 * ============================================================ */
body.brand-v02 .brand-v02-mobile-nav {
  background: rgba(247, 242, 232, 0.95);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-top: 1px solid var(--rule-color);
  box-shadow: none;
}

body.brand-v02 .brand-v02-mobile-nav .mobile-nav-inner {
  background: transparent;
}

body.brand-v02 .brand-v02-mobile-nav .mobile-nav-item {
  background: transparent;
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  font-weight: var(--fw-regular);
  border-radius: 0;
  border-top: 2px solid transparent;
  transition: all 200ms var(--ease-atelier);
}

body.brand-v02 .brand-v02-mobile-nav .mobile-nav-item.active {
  color: var(--burgundy);
  border-top-color: var(--burgundy);
  background: transparent;
}

body.brand-v02 .brand-v02-mobile-nav .mnav-icon {
  opacity: 0.45;
  font-size: 14px;
}

body.brand-v02 .brand-v02-mobile-nav .mobile-nav-item.active .mnav-icon {
  opacity: 0.8;
}

body.brand-v02 .brand-v02-mobile-nav .mobile-more-menu {
  background: var(--ivory);
  border-top: 1px solid var(--rule-color);
  box-shadow: none;
}

body.brand-v02 .brand-v02-mobile-nav .mobile-more-item {
  background: transparent;
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  border-radius: 0;
  border-bottom: 1px solid var(--rule-color);
}

body.brand-v02 .brand-v02-mobile-nav .mobile-more-item:hover {
  background: var(--mist);
  color: var(--burgundy);
}

/* When toggle on, hide existing mobile nav box-shadow / colored bg */
@media (max-width: 768px) {
  body.brand-v02 .brand-v02-bar-mount {
    display: none; /* desktop brand bar hidden on mobile (mobile-nav is the nav) */
  }
}

/* ============================================================
 * Phase 4c — Dashboard + recipe card atelier overrides
 * ============================================================ */

/* View header */
body.brand-v02 .brand-v02-dashboard .view-header {
  border-bottom: 1px solid var(--rule-color);
  padding-bottom: 18px;
  margin-bottom: 24px;
  background: transparent;
}

body.brand-v02 .brand-v02-dashboard .view-header h2 {
  font-family: var(--font-display);
  font-weight: var(--fw-light);
  font-size: var(--display-md);
  line-height: var(--lh-display-md);
  color: var(--ink);
  letter-spacing: var(--ls-tight);
}

/* Quick stats — atelier hairline grid, no fills */
body.brand-v02 .brand-v02-dashboard .quick-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid var(--rule-color);
  border-bottom: 1px solid var(--rule-color);
  margin: 28px 0 28px;
  gap: 0;
  background: transparent;
  padding: 0;
}

body.brand-v02 .brand-v02-dashboard .stat-card {
  background: transparent;
  border: 0;
  border-right: 1px solid var(--rule-color);
  border-radius: 0;
  box-shadow: none;
  padding: 22px 18px;
  text-align: left;
}

body.brand-v02 .brand-v02-dashboard .stat-card:last-child {
  border-right: 0;
}

body.brand-v02 .brand-v02-dashboard .stat-num {
  font-family: var(--font-display);
  font-weight: var(--fw-light);
  font-size: 36px;
  line-height: 1;
  color: var(--ink);
  letter-spacing: var(--ls-tight);
}

body.brand-v02 .brand-v02-dashboard .stat-label {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: var(--muted);
  margin-top: 6px;
}

/* Dashboard tabs — atelier hairline tabs */
body.brand-v02 .brand-v02-dashboard .dashboard-tabs {
  display: flex;
  gap: 0;
  border-bottom: 1px solid var(--rule-color);
  margin: 24px 0 24px;
  padding: 0;
  background: transparent;
}

body.brand-v02 .brand-v02-dashboard .dash-tab {
  background: transparent;
  border: 0;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  padding: 14px 22px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--muted);
  cursor: pointer;
  font-weight: var(--fw-regular);
  transition: color 200ms var(--ease-atelier),
              border-color 200ms var(--ease-atelier);
}

body.brand-v02 .brand-v02-dashboard .dash-tab:hover {
  color: var(--ink);
}

body.brand-v02 .brand-v02-dashboard .dash-tab.dash-tab-active {
  color: var(--burgundy);
  border-bottom-color: var(--burgundy);
  background: transparent;
}

body.brand-v02 .brand-v02-dashboard .dash-tab-count {
  font-size: 10px;
  margin-left: 6px;
  color: var(--faint);
}

body.brand-v02 .brand-v02-dashboard .dash-tab.dash-tab-active .dash-tab-count {
  color: var(--burgundy);
}

body.brand-v02 .brand-v02-dashboard .dash-tab.dash-tab-cta {
  margin-left: auto;
  color: var(--champagne);
  border-bottom-color: transparent;
  border-left: 1px solid var(--rule-color);
  padding-left: 22px;
}

body.brand-v02 .brand-v02-dashboard .dash-tab.dash-tab-cta:hover {
  color: var(--burgundy);
}

/* Dashboard toolbar */
body.brand-v02 .brand-v02-dashboard .dash-toolbar {
  padding: 16px 0;
  border-bottom: 1px solid var(--rule-color);
  margin-bottom: 16px;
  background: transparent;
}

/* Recipe filter bar — atelier inputs */
body.brand-v02 .brand-v02-dashboard .recipe-filter-bar {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  padding: 16px 0;
  border-bottom: 1px solid var(--rule-color);
  margin-bottom: 24px;
  background: transparent;
}

body.brand-v02 .brand-v02-dashboard .search-input,
body.brand-v02 .brand-v02-dashboard .filter-select {
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--rule-color);
  border-radius: 0;
  padding: 10px 4px;
  font-family: var(--font-sans);
  font-weight: var(--fw-light);
  font-size: 13px;
  color: var(--ink);
  transition: border-color 200ms var(--ease-atelier);
}

body.brand-v02 .brand-v02-dashboard .search-input::placeholder {
  color: var(--faint);
  font-style: italic;
}

body.brand-v02 .brand-v02-dashboard .search-input:focus,
body.brand-v02 .brand-v02-dashboard .filter-select:focus {
  outline: none;
  border-bottom-color: var(--ink);
}

/* Atelier button overrides for dashboard scope (no .btn-atelier required) */
body.brand-v02 .brand-v02-dashboard .btn-primary {
  background: var(--burgundy);
  color: var(--ivory);
  border: 1px solid var(--burgundy);
  border-radius: 0;
  padding: 12px 24px;
  font-family: var(--font-sans);
  font-weight: var(--fw-light);
  font-size: 11px;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
}

body.brand-v02 .brand-v02-dashboard .btn-primary:hover {
  background: var(--oxblood);
  border-color: var(--oxblood);
}

body.brand-v02 .brand-v02-dashboard .btn-secondary {
  background: transparent;
  color: var(--ink);
  border: 1px solid var(--ink);
  border-radius: 0;
  padding: 12px 22px;
  font-family: var(--font-sans);
  font-weight: var(--fw-light);
  font-size: 11px;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
}

body.brand-v02 .brand-v02-dashboard .btn-secondary:hover {
  background: var(--ink);
  color: var(--ivory);
}

body.brand-v02 .brand-v02-dashboard .btn-icon-bordered {
  background: transparent;
  border: 1px solid var(--rule-color);
  border-radius: 0;
  color: var(--muted);
  transition: all 200ms var(--ease-atelier);
}

body.brand-v02 .brand-v02-dashboard .btn-icon-bordered:hover {
  border-color: var(--ink);
  color: var(--ink);
}

body.brand-v02 .brand-v02-dashboard .btn-danger {
  background: transparent;
  color: var(--burgundy);
  border: 1px solid var(--burgundy);
  border-radius: 0;
}

body.brand-v02 .brand-v02-dashboard .btn-danger:hover {
  background: var(--burgundy);
  color: var(--ivory);
}

body.brand-v02 .brand-v02-dashboard .recipe-count-info {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--muted);
  margin: 16px 0 24px;
}

/* Recipe grid */
body.brand-v02 .brand-v02-dashboard .recipe-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 18px;
}

/* ============================================================
 * Recipe card — atelier perfume label aesthetic via CSS override
 * (existing renderRecipeCard markup retained for full functionality)
 * ============================================================ */
body.brand-v02 .brand-v02-dashboard .recipe-card,
body.brand-v02 .recipe-card {
  background: var(--ivory);
  border: 1px solid var(--ink);
  border-radius: 0;
  box-shadow: none;
  padding: 24px 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  cursor: pointer;
  transition: box-shadow 500ms var(--ease-atelier),
              transform 200ms var(--ease-atelier);
}

body.brand-v02 .recipe-card:hover {
  box-shadow: var(--shadow-card);
}

body.brand-v02 .recipe-card.recipe-card-selected {
  border-color: var(--burgundy);
  background: var(--mist);
}

body.brand-v02 .recipe-card .recipe-card-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  border-bottom: 1px solid var(--rule-color);
  padding-bottom: 12px;
}

body.brand-v02 .recipe-card .recipe-card-type {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--muted);
}

body.brand-v02 .recipe-card .star-btn {
  background: transparent;
  border: 0;
  color: var(--faint);
  padding: 0;
  font-size: 14px;
  transition: color 200ms var(--ease-atelier);
}

body.brand-v02 .recipe-card .star-btn:hover,
body.brand-v02 .recipe-card .star-btn.star-active {
  color: var(--champagne);
}

body.brand-v02 .recipe-card .recipe-card-name {
  font-family: var(--font-display);
  font-weight: var(--fw-light);
  font-size: 22px;
  line-height: 1.15;
  color: var(--ink);
  letter-spacing: var(--ls-tight);
  margin: 0;
}

body.brand-v02 .recipe-card .recipe-card-tags {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 4px;
}

body.brand-v02 .recipe-card .tag-chip-sm {
  background: transparent;
  border: 1px solid var(--rule-color);
  border-radius: 0;
  padding: 3px 8px;
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--muted);
}

body.brand-v02 .recipe-card .recipe-card-desc {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: var(--fw-light);
  font-size: 13px;
  line-height: 1.45;
  color: var(--muted);
  border: 0;
  background: transparent;
  padding: 0;
}

body.brand-v02 .recipe-card .recipe-card-footer {
  margin-top: auto;
  padding-top: 12px;
  border-top: 1px solid var(--rule-color);
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: transparent;
}

body.brand-v02 .recipe-card .recipe-score {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--muted);
  background: transparent;
  border: 0;
  padding: 0;
  border-radius: 0;
}

body.brand-v02 .recipe-card .recipe-score.score-good {
  color: var(--status-balanced);
}

body.brand-v02 .recipe-card .recipe-score.score-fair {
  color: var(--status-refining);
}

body.brand-v02 .recipe-card .recipe-score.score-low {
  color: var(--status-warning);
}

body.brand-v02 .recipe-card .badge-official {
  background: transparent;
  color: var(--champagne);
  border-top: 1px solid var(--champagne);
  border-bottom: 1px solid var(--champagne);
  border-left: 0;
  border-right: 0;
  border-radius: 0;
  padding: 3px 0;
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
}

body.brand-v02 .recipe-card .recipe-card-footer-actions {
  display: flex;
  gap: 4px;
  opacity: 0;
  transition: opacity 200ms var(--ease-atelier);
}

body.brand-v02 .recipe-card:hover .recipe-card-footer-actions {
  opacity: 1;
}

/* v291: 手機 / 觸控裝置恆顯（無 hover 能力 → 否則整排按鈕對 mobile 使用者不可見） */
@media (hover: none), (max-width: 768px) {
  body.brand-v02 .recipe-card .recipe-card-footer-actions,
  body.brand-v02 .brand-v02-recipe-card__actions {
    opacity: 1;
  }
}

body.brand-v02 .recipe-card .recipe-copy-btn,
body.brand-v02 .recipe-card .recipe-delete-btn,
body.brand-v02 .recipe-card .recipe-share-btn {
  background: transparent;
  border: 1px solid var(--rule-color);
  border-radius: 0;
  color: var(--muted);
  padding: 4px 8px;
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: var(--ls-label);
  cursor: pointer;
  transition: all 200ms var(--ease-atelier);
}

body.brand-v02 .recipe-card .recipe-copy-btn:hover,
body.brand-v02 .recipe-card .recipe-share-btn:hover {
  border-color: var(--ink);
  color: var(--ink);
}

body.brand-v02 .recipe-card .recipe-delete-btn:hover {
  border-color: var(--burgundy);
  color: var(--burgundy);
}

body.brand-v02 .recipe-card .batch-checkbox {
  color: var(--ink);
}

/* Empty state */
body.brand-v02 .brand-v02-dashboard .empty-state {
  text-align: center;
  padding: 64px 24px;
  border: 1px solid var(--rule-color);
  border-radius: 0;
  background: transparent;
}

body.brand-v02 .brand-v02-dashboard .empty-state .empty-icon {
  font-size: 32px;
  filter: grayscale(0.3);
  opacity: 0.6;
  margin-bottom: 16px;
}

body.brand-v02 .brand-v02-dashboard .empty-state p {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: var(--fw-light);
  font-size: 18px;
  color: var(--muted);
  margin-bottom: 24px;
}

body.brand-v02 .brand-v02-dashboard .empty-state-actions {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
}

/* Mobile dashboard */
@media (max-width: 768px) {
  body.brand-v02 .brand-v02-dashboard .quick-stats {
    grid-template-columns: 1fr;
  }
  body.brand-v02 .brand-v02-dashboard .stat-card {
    border-right: 0;
    border-bottom: 1px solid var(--rule-color);
  }
  body.brand-v02 .brand-v02-dashboard .stat-card:last-child {
    border-bottom: 0;
  }
  body.brand-v02 .brand-v02-dashboard .recipe-grid {
    grid-template-columns: 1fr;
  }
  body.brand-v02 .brand-v02-dashboard .dash-tab.dash-tab-cta {
    margin-left: 0;
    border-left: 0;
  }
}

/* ============================================================
 * Phase 4d — Calculator atelier overrides (CSS-only conversion)
 * ============================================================
 * IMPORTANT: numerical rendering, calculation logic, inline onclick
 * handlers (recipeMultiplier mutations / setServiceTemp / etc.) and
 * 8 sub-panels are unchanged. Only visual treatment via CSS. */

/* View root */
body.brand-v02 .brand-v02-calculator {
  background: var(--ivory);
  color: var(--ink);
}

body.brand-v02 .brand-v02-calculator .view-header h2 {
  font-family: var(--font-display);
  font-weight: var(--fw-light);
  font-size: var(--display-md);
  color: var(--ink);
  letter-spacing: var(--ls-tight);
}

/* Recipe name bar */
body.brand-v02 .brand-v02-calculator .recipe-name-bar {
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--rule-color);
  border-radius: 0;
  box-shadow: none;
  padding: 16px 0;
}

body.brand-v02 .brand-v02-calculator .recipe-name-bar input,
body.brand-v02 .brand-v02-calculator .recipe-name-input {
  background: transparent;
  border: 0;
  font-family: var(--font-display);
  font-weight: var(--fw-light);
  font-size: 28px;
  letter-spacing: var(--ls-tight);
  color: var(--ink);
}

body.brand-v02 .brand-v02-calculator .recipe-name-bar input::placeholder {
  color: var(--faint);
  font-style: italic;
}

/* Multiplier bar */
body.brand-v02 .brand-v02-calculator .multiplier-bar {
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--rule-color);
  border-radius: 0;
  padding: 12px 0;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--muted);
}

body.brand-v02 .brand-v02-calculator .multiplier-bar button,
body.brand-v02 .brand-v02-calculator .multiplier-preset {
  background: transparent;
  border: 1px solid var(--rule-color);
  border-radius: 0;
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: var(--ls-label);
  padding: 6px 12px;
  text-transform: uppercase;
  cursor: pointer;
  transition: all 200ms var(--ease-atelier);
}

body.brand-v02 .brand-v02-calculator .multiplier-bar button:hover,
body.brand-v02 .brand-v02-calculator .multiplier-preset.is-active {
  border-color: var(--ink);
  color: var(--ink);
}

/* All panels share atelier hairline treatment */
body.brand-v02 .brand-v02-calculator [class$="-panel"],
body.brand-v02 .brand-v02-calculator .balance-panel,
body.brand-v02 .brand-v02-calculator .cost-panel,
body.brand-v02 .brand-v02-calculator .breakdown-panel,
body.brand-v02 .brand-v02-calculator .blend-analysis-panel,
body.brand-v02 .brand-v02-calculator .balance-tips-panel,
body.brand-v02 .brand-v02-calculator .pro-lab-panel,
body.brand-v02 .brand-v02-calculator .pro-lab-card,
body.brand-v02 .brand-v02-calculator .ageing-panel,
body.brand-v02 .brand-v02-calculator .hardness-panel,
body.brand-v02 .brand-v02-calculator .shelf-life-panel,
body.brand-v02 .brand-v02-calculator .pasteur-panel,
body.brand-v02 .brand-v02-calculator .late-add-panel {
  background: transparent;
  border: 1px solid var(--rule-color);
  border-radius: 0;
  box-shadow: none;
  padding: 22px 24px;
  margin-bottom: 20px;
}

/* All section headers/titles → Cormorant Garamond */
body.brand-v02 .brand-v02-calculator .balance-title,
body.brand-v02 .brand-v02-calculator .balance-header,
body.brand-v02 .brand-v02-calculator .breakdown-header,
body.brand-v02 .brand-v02-calculator [class$="-panel"] > h2,
body.brand-v02 .brand-v02-calculator [class$="-panel"] > h3,
body.brand-v02 .brand-v02-calculator [class$="-panel"] > h4,
body.brand-v02 .brand-v02-calculator [class$="-panel"] > .panel-title {
  font-family: var(--font-display);
  font-weight: var(--fw-light);
  font-size: 22px;
  line-height: 1.2;
  letter-spacing: var(--ls-tight);
  color: var(--ink);
  margin: 0 0 14px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--rule-color);
}

/* Balance score — large display number */
body.brand-v02 .brand-v02-calculator .balance-score {
  font-family: var(--font-display);
  font-weight: var(--fw-light);
  font-size: 52px;
  line-height: 1;
  color: var(--ink);
  letter-spacing: var(--ls-tight);
}

body.brand-v02 .brand-v02-calculator .balance-score.score-high { color: var(--status-balanced); }
body.brand-v02 .brand-v02-calculator .balance-score.score-mid  { color: var(--status-refining); }
body.brand-v02 .brand-v02-calculator .balance-score.score-low  { color: var(--status-warning); }

/* Balance mode switch (basic / expert) */
body.brand-v02 .brand-v02-calculator .balance-mode-switch {
  display: inline-flex;
  border: 1px solid var(--rule-color);
  border-radius: 0;
  background: transparent;
  overflow: hidden;
}

body.brand-v02 .brand-v02-calculator .balance-mode-btn {
  background: transparent;
  border: 0;
  border-right: 1px solid var(--rule-color);
  padding: 8px 16px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--muted);
  cursor: pointer;
  transition: all 200ms var(--ease-atelier);
}

body.brand-v02 .brand-v02-calculator .balance-mode-btn:last-child {
  border-right: 0;
}

body.brand-v02 .brand-v02-calculator .balance-mode-btn.is-active,
body.brand-v02 .brand-v02-calculator .balance-mode-btn[data-active="true"] {
  background: var(--ink);
  color: var(--ivory);
}

/* Balance metrics grid */
body.brand-v02 .brand-v02-calculator .balance-metrics {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0;
  border-top: 1px solid var(--rule-color);
  border-left: 1px solid var(--rule-color);
}

body.brand-v02 .brand-v02-calculator .balance-metrics > * {
  padding: 14px 16px;
  border-right: 1px solid var(--rule-color);
  border-bottom: 1px solid var(--rule-color);
  background: transparent;
  border-radius: 0;
}

body.brand-v02 .brand-v02-calculator .metric-row,
body.brand-v02 .brand-v02-calculator .metric-item {
  background: transparent;
  border-radius: 0;
  padding: 0;
}

body.brand-v02 .brand-v02-calculator .metric-label {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 4px;
}

body.brand-v02 .brand-v02-calculator .metric-val,
body.brand-v02 .brand-v02-calculator .metric-value {
  font-family: var(--font-display);
  font-weight: var(--fw-light);
  font-size: 20px;
  line-height: 1.1;
  color: var(--ink);
  letter-spacing: var(--ls-tight);
}

body.brand-v02 .brand-v02-calculator .metric-val.status-ok    { color: var(--status-balanced); }
body.brand-v02 .brand-v02-calculator .metric-val.status-low,
body.brand-v02 .brand-v02-calculator .metric-val.status-high  { color: var(--status-warning); }

body.brand-v02 .brand-v02-calculator .metric-target {
  font-family: var(--font-mono);
  font-size: 8.5px;
  letter-spacing: var(--ls-label);
  color: var(--faint);
  text-transform: uppercase;
}

/* Balance tips */
body.brand-v02 .brand-v02-calculator .balance-tips-panel {
  background: var(--mist);
}

body.brand-v02 .brand-v02-calculator .balance-tips-title {
  font-family: var(--font-display);
  font-weight: var(--fw-light);
  font-size: 18px;
  letter-spacing: var(--ls-tight);
}

body.brand-v02 .brand-v02-calculator .balance-tip-item {
  padding: 10px 0;
  border-bottom: 1px solid var(--rule-color);
}

body.brand-v02 .brand-v02-calculator .balance-tip-item:last-child {
  border-bottom: 0;
}

body.brand-v02 .brand-v02-calculator .balance-tip-content {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: var(--fw-light);
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink);
}

/* Service temp display */
body.brand-v02 .brand-v02-calculator .balance-service-temp {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--muted);
}

/* Calculator section labels (mobile tab variant) */
body.brand-v02 .brand-v02-calculator .calc-mobile-tabs {
  border-bottom: 1px solid var(--rule-color);
  background: transparent;
  margin-bottom: 16px;
}

body.brand-v02 .brand-v02-calculator .calc-mtab {
  background: transparent;
  border: 0;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  padding: 12px 18px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--muted);
  cursor: pointer;
}

body.brand-v02 .brand-v02-calculator .calc-mtab.is-active,
body.brand-v02 .brand-v02-calculator .calc-mtab[data-active="true"] {
  color: var(--burgundy);
  border-bottom-color: var(--burgundy);
}

/* Buttons in calculator scope */
body.brand-v02 .brand-v02-calculator .btn-primary {
  background: var(--burgundy);
  color: var(--ivory);
  border: 1px solid var(--burgundy);
  border-radius: 0;
  padding: 12px 24px;
  font-family: var(--font-sans);
  font-weight: var(--fw-light);
  font-size: 11px;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
}

body.brand-v02 .brand-v02-calculator .btn-primary:hover {
  background: var(--oxblood);
  border-color: var(--oxblood);
}

body.brand-v02 .brand-v02-calculator .btn-secondary {
  background: transparent;
  color: var(--ink);
  border: 1px solid var(--ink);
  border-radius: 0;
  padding: 12px 22px;
  font-family: var(--font-sans);
  font-weight: var(--fw-light);
  font-size: 11px;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
}

body.brand-v02 .brand-v02-calculator .btn-secondary:hover {
  background: var(--ink);
  color: var(--ivory);
}

/* Allergen badges */
body.brand-v02 .brand-v02-calculator .allergen-badge,
body.brand-v02 .brand-v02-calculator .allergen-tag,
body.brand-v02 .brand-v02-calculator .allergen-tag-row {
  background: transparent;
  border: 1px solid var(--rule-color);
  border-radius: 0;
  padding: 4px 10px;
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--muted);
}

body.brand-v02 .brand-v02-calculator .allergen-badge-warn,
body.brand-v02 .brand-v02-calculator .allergen-tag-mandatory {
  border-color: var(--burgundy);
  color: var(--burgundy);
}

body.brand-v02 .brand-v02-calculator .allergen-badge-ok {
  border-color: var(--status-balanced);
  color: var(--status-balanced);
}

/* Cost / Breakdown panels */
body.brand-v02 .brand-v02-calculator .cost-input,
body.brand-v02 .brand-v02-calculator .cost-input-wrap input {
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--rule-color);
  border-radius: 0;
  padding: 8px 4px;
  font-family: var(--font-display);
  font-weight: var(--fw-light);
  font-size: 16px;
  color: var(--ink);
}

body.brand-v02 .brand-v02-calculator .breakdown-table {
  border-collapse: collapse;
  width: 100%;
}

body.brand-v02 .brand-v02-calculator .breakdown-table th,
body.brand-v02 .brand-v02-calculator .breakdown-table td {
  border: 0;
  border-bottom: 1px solid var(--rule-color);
  padding: 8px 12px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0;
  text-align: left;
}

body.brand-v02 .brand-v02-calculator .breakdown-table th {
  text-transform: uppercase;
  letter-spacing: var(--ls-label);
  font-size: 9px;
  color: var(--muted);
  font-weight: var(--fw-regular);
}

/* Pro Lab callouts */
body.brand-v02 .brand-v02-calculator .pro-lab-card,
body.brand-v02 .brand-v02-calculator .pro-lock-card {
  background: var(--mist);
  border: 1px solid var(--rule-color);
  border-radius: 0;
  box-shadow: none;
}

body.brand-v02 .brand-v02-calculator .pro-badge {
  background: transparent;
  color: var(--champagne);
  border: 1px solid var(--champagne);
  border-radius: 0;
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: var(--ls-label);
  font-weight: var(--fw-regular);
  padding: 2px 6px;
  text-transform: uppercase;
}

/* Balance flags / warnings */
body.brand-v02 .brand-v02-calculator .balance-flags {
  background: transparent;
  border: 1px solid var(--burgundy);
  border-radius: 0;
  padding: 12px 14px;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: var(--fw-light);
  color: var(--burgundy);
}

/* Balance incomplete banner (GL-UX-07) */
body.brand-v02 .brand-v02-calculator .balance-incomplete-banner {
  background: var(--mist);
  border: 1px solid var(--champagne);
  border-radius: 0;
  padding: 14px 16px;
  margin-bottom: 16px;
}

body.brand-v02 .brand-v02-calculator .balance-incomplete-head {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: var(--champagne);
  font-weight: var(--fw-regular);
}

/* Mobile calculator */
@media (max-width: 768px) {
  body.brand-v02 .brand-v02-calculator .balance-metrics {
    grid-template-columns: 1fr;
  }
  body.brand-v02 .brand-v02-calculator [class$="-panel"] {
    padding: 16px;
  }
}

/* ============================================================
 * Phase 4e — Ingredient library atelier overrides
 * ============================================================ */
body.brand-v02 .brand-v02-ingredients .view-header h2 {
  font-family: var(--font-display);
  font-weight: var(--fw-light);
  font-size: var(--display-md);
  letter-spacing: var(--ls-tight);
  color: var(--ink);
}

body.brand-v02 .brand-v02-ingredients .search-input,
body.brand-v02 .brand-v02-ingredients input[type="search"],
body.brand-v02 .brand-v02-ingredients input[type="text"] {
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--rule-color);
  border-radius: 0;
  padding: 10px 4px;
  font-family: var(--font-sans);
  font-weight: var(--fw-light);
  font-size: 13px;
  color: var(--ink);
}

body.brand-v02 .brand-v02-ingredients .search-input:focus {
  outline: none;
  border-bottom-color: var(--ink);
}

body.brand-v02 .brand-v02-ingredients .search-input::placeholder {
  color: var(--faint);
  font-style: italic;
}

body.brand-v02 .brand-v02-ingredients .category-tabs {
  display: flex;
  gap: 0;
  border-bottom: 1px solid var(--rule-color);
  margin-bottom: 16px;
  padding: 0;
  background: transparent;
  flex-wrap: wrap;
}

body.brand-v02 .brand-v02-ingredients .category-tab {
  background: transparent;
  border: 0;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  padding: 10px 16px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--muted);
  cursor: pointer;
  transition: color 200ms var(--ease-atelier),
              border-color 200ms var(--ease-atelier);
}

body.brand-v02 .brand-v02-ingredients .category-tab:hover {
  color: var(--ink);
}

body.brand-v02 .brand-v02-ingredients .category-tab.active,
body.brand-v02 .brand-v02-ingredients .category-tab[data-active="true"] {
  color: var(--burgundy);
  border-bottom-color: var(--burgundy);
  background: transparent;
}

body.brand-v02 .brand-v02-ingredients .ingredient-row,
body.brand-v02 .brand-v02-ingredients .ing-row,
body.brand-v02 .brand-v02-ingredients .ingredient-item,
body.brand-v02 .brand-v02-ingredients .ing-card {
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--rule-color);
  border-radius: 0;
  padding: 14px 8px;
}

body.brand-v02 .brand-v02-ingredients .ing-name,
body.brand-v02 .brand-v02-ingredients .ingredient-name {
  font-family: var(--font-display);
  font-weight: var(--fw-light);
  font-size: 17px;
  color: var(--ink);
  letter-spacing: var(--ls-tight);
}

body.brand-v02 .brand-v02-ingredients .ing-cat,
body.brand-v02 .brand-v02-ingredients .ingredient-category,
body.brand-v02 .brand-v02-ingredients .ingredient-meta {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--muted);
}

body.brand-v02 .brand-v02-ingredients .btn-primary {
  background: var(--burgundy);
  color: var(--ivory);
  border: 1px solid var(--burgundy);
  border-radius: 0;
  padding: 10px 22px;
  font-family: var(--font-sans);
  font-weight: var(--fw-light);
  font-size: 11px;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
}

body.brand-v02 .brand-v02-ingredients .btn-secondary {
  background: transparent;
  color: var(--ink);
  border: 1px solid var(--ink);
  border-radius: 0;
  padding: 10px 20px;
  font-family: var(--font-sans);
  font-weight: var(--fw-light);
  font-size: 11px;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
}

body.brand-v02 .brand-v02-ingredients .ai-ing-entry-btn {
  background: transparent !important;
  color: var(--champagne) !important;
  border: 1px solid var(--champagne) !important;
  border-radius: 0 !important;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  font-weight: var(--fw-regular);
}

body.brand-v02 .brand-v02-ingredients .ai-ing-entry-btn:hover {
  background: var(--champagne) !important;
  color: var(--ivory) !important;
  filter: none;
}

/* ============================================================
 * Phase 4f — Wiki atelier typography
 * ============================================================ */
/* v272: max-width 從 680 (var(--max-readable)) 放寬至 1100，給列表頁 / index 頁
 * 卡片網格足夠呼吸空間。文章閱讀區 (.wiki-article-main) 仍保留 680 atelier reading width
 * 限制（見下方）。同時加水平 padding 16px + overflow-x:hidden 防 mobile 子元件溢出。 */
body.brand-v02 .brand-v02-wiki {
  max-width: 1100px;
  margin-inline: auto;
  padding: 24px 16px 64px;
  overflow-x: hidden;
  font-family: var(--font-display);
  font-weight: var(--fw-light);
  line-height: 1.7;
  color: var(--ink);
}

/* v272: 文章閱讀區用 atelier reading width — 確保長文行寬不超過 680px */
body.brand-v02 .brand-v02-wiki .wiki-article-main {
  max-width: var(--max-readable);
}

body.brand-v02 .brand-v02-wiki .view-header h2,
body.brand-v02 .brand-v02-wiki h1,
body.brand-v02 .brand-v02-wiki h2 {
  font-family: var(--font-display);
  font-weight: var(--fw-light);
  font-size: var(--display-md);
  line-height: var(--lh-display-md);
  color: var(--ink);
  letter-spacing: var(--ls-tight);
  margin: 0 0 16px;
}

body.brand-v02 .brand-v02-wiki h3 {
  font-family: var(--font-display);
  font-weight: var(--fw-light);
  font-size: 26px;
  line-height: 1.25;
  letter-spacing: var(--ls-tight);
  margin: 36px 0 12px;
  color: var(--ink);
}

body.brand-v02 .brand-v02-wiki h4 {
  font-family: var(--font-mono);
  font-weight: var(--fw-regular);
  font-size: 11px;
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: var(--burgundy);
  margin: 24px 0 10px;
}

body.brand-v02 .brand-v02-wiki p,
body.brand-v02 .brand-v02-wiki li {
  font-family: var(--font-display);
  font-weight: var(--fw-light);
  font-size: 18px;
  line-height: 1.7;
  color: var(--ink);
}

body.brand-v02 .brand-v02-wiki em,
body.brand-v02 .brand-v02-wiki .italic {
  font-style: italic;
  color: var(--burgundy);
}

body.brand-v02 .brand-v02-wiki blockquote {
  border-left: 1px solid var(--rule-color);
  padding-left: 18px;
  margin: 18px 0;
  font-style: italic;
  color: var(--muted);
}

/* v274: atelier 風格返回按鈕 — burgundy hairline accent + IBM Plex Mono */
body.brand-v02 .brand-v02-wiki .wiki-back-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 20px;
}

body.brand-v02 .brand-v02-wiki .wiki-back-prev {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  background: var(--ivory);
  color: var(--burgundy);
  border: 1px solid var(--burgundy);
  border-left: 3px solid var(--burgundy);
  border-radius: 0;
  padding: 8px 14px;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body.brand-v02 .brand-v02-wiki .wiki-back-prev:hover {
  background: var(--burgundy);
  color: var(--ivory);
}

body.brand-v02 .brand-v02-wiki .wiki-search,
body.brand-v02 .brand-v02-wiki input[type="search"],
body.brand-v02 .brand-v02-wiki input[type="text"] {
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--rule-color);
  border-radius: 0;
  padding: 10px 4px;
  font-family: var(--font-sans);
  font-weight: var(--fw-light);
  font-size: 14px;
  color: var(--ink);
  width: 100%;
}

body.brand-v02 .brand-v02-wiki input::placeholder {
  color: var(--faint);
  font-style: italic;
}

body.brand-v02 .brand-v02-wiki .wiki-article-list,
body.brand-v02 .brand-v02-wiki .wiki-list-item {
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--rule-color);
  border-radius: 0;
  padding: 18px 0;
}

body.brand-v02 .brand-v02-wiki .wiki-list-item h3,
body.brand-v02 .brand-v02-wiki .wiki-article-title {
  font-family: var(--font-display);
  font-weight: var(--fw-light);
  font-size: 22px;
  margin: 0 0 6px;
  letter-spacing: var(--ls-tight);
}

body.brand-v02 .brand-v02-wiki .wiki-meta,
body.brand-v02 .brand-v02-wiki .wiki-tag,
body.brand-v02 .brand-v02-wiki .wiki-kind-badge {
  background: transparent;
  border: 1px solid var(--rule-color);
  border-radius: 0;
  padding: 3px 8px;
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--muted);
}

body.brand-v02 .brand-v02-wiki .wiki-kind-tabs {
  display: flex;
  gap: 0;
  border-bottom: 1px solid var(--rule-color);
  margin: 16px 0;
  flex-wrap: wrap;
}

body.brand-v02 .brand-v02-wiki .wiki-kind-tab,
body.brand-v02 .brand-v02-wiki .wiki-kind-nav-item {
  background: transparent;
  border: 0;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  padding: 10px 16px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--muted);
  cursor: pointer;
}

body.brand-v02 .brand-v02-wiki .wiki-kind-tab:hover {
  color: var(--ink);
}

body.brand-v02 .brand-v02-wiki .wiki-kind-tab.active,
body.brand-v02 .brand-v02-wiki .wiki-kind-nav-item--active {
  color: var(--burgundy);
  border-bottom-color: var(--burgundy);
  background: transparent !important;
}

body.brand-v02 .brand-v02-wiki .wiki-coach-lens {
  background: var(--mist);
  border: 1px solid var(--rule-color);
  border-radius: 0;
  padding: 20px;
  margin: 24px 0;
}

body.brand-v02 .brand-v02-wiki .wiki-feedback-panel {
  background: transparent;
  border: 1px solid var(--rule-color);
  border-radius: 0;
  padding: 18px;
  margin-top: 32px;
}

body.brand-v02 .brand-v02-wiki .btn-primary,
body.brand-v02 .brand-v02-wiki .btn-secondary {
  border-radius: 0;
  font-family: var(--font-sans);
  font-weight: var(--fw-light);
  font-size: 11px;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  padding: 10px 22px;
}

body.brand-v02 .brand-v02-wiki .btn-primary {
  background: var(--burgundy);
  color: var(--ivory);
  border: 1px solid var(--burgundy);
}

body.brand-v02 .brand-v02-wiki .btn-secondary {
  background: transparent;
  color: var(--ink);
  border: 1px solid var(--ink);
}

/* ============================================================
 * Phase 4g — Pairing + Tasting Flight atelier overrides
 * ============================================================ */
body.brand-v02 .brand-v02-pairing .view-header h2,
body.brand-v02 .brand-v02-tasting .view-header h2 {
  font-family: var(--font-display);
  font-weight: var(--fw-light);
  font-size: var(--display-md);
  letter-spacing: var(--ls-tight);
  color: var(--ink);
}

/* Override pairing-ui-v2.css existing patterns */
body.brand-v02 .brand-v02-pairing .pairing-tabs,
body.brand-v02 .brand-v02-pairing .pairing-tab-hints {
  background: transparent;
  border-bottom: 1px solid var(--rule-color);
}

body.brand-v02 .brand-v02-pairing .pairing-tab,
body.brand-v02 .brand-v02-pairing .free-tri-calc-btn {
  background: transparent;
  border: 1px solid var(--rule-color);
  border-radius: 0;
  padding: 10px 16px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--muted);
}

body.brand-v02 .brand-v02-pairing .pairing-tab.is-active,
body.brand-v02 .brand-v02-pairing .pairing-tab[data-active="true"] {
  border-color: var(--burgundy);
  color: var(--burgundy);
  background: transparent;
}

body.brand-v02 .brand-v02-pairing .pairing-free-list,
body.brand-v02 .brand-v02-pairing .pairing-results {
  background: transparent;
  border: 1px solid var(--rule-color);
  border-radius: 0;
  padding: 0;
}

body.brand-v02 .brand-v02-pairing .pairing-free-item {
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--rule-color);
  border-radius: 0;
  padding: 12px 14px;
  display: flex;
  align-items: center;
  gap: 12px;
}

body.brand-v02 .brand-v02-pairing .pairing-free-item.pairing-item-selected {
  background: var(--mist);
}

body.brand-v02 .brand-v02-pairing .pairing-free-name {
  font-family: var(--font-display);
  font-weight: var(--fw-light);
  font-size: 16px;
  color: var(--ink);
}

body.brand-v02 .brand-v02-pairing .picker-cat,
body.brand-v02 .brand-v02-pairing .free-stars {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--muted);
}

body.brand-v02 .brand-v02-pairing .pairing-score-badge {
  background: transparent;
  border: 1px solid var(--rule-color);
  border-radius: 0;
  padding: 3px 8px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: var(--ls-label);
  color: var(--muted);
}

body.brand-v02 .brand-v02-pairing .pairing-score-badge.score-high {
  border-color: var(--status-balanced);
  color: var(--status-balanced);
}

body.brand-v02 .brand-v02-pairing .pairing-score-badge.score-mid {
  border-color: var(--status-refining);
  color: var(--status-refining);
}

body.brand-v02 .brand-v02-pairing .pairing-score-badge.score-low {
  border-color: var(--rule-color);
  color: var(--faint);
}

body.brand-v02 .brand-v02-pairing .combo-card,
body.brand-v02 .brand-v02-pairing [class$="-panel"] {
  background: transparent;
  border: 1px solid var(--rule-color);
  border-radius: 0;
  box-shadow: none;
  padding: 22px;
  margin-bottom: 18px;
}

/* Tasting Flight */
body.brand-v02 .brand-v02-tasting .pro-lock-card {
  background: var(--mist);
  border: 1px solid var(--rule-color);
  border-radius: 0;
  box-shadow: none;
  padding: 32px;
  text-align: center;
}

body.brand-v02 .brand-v02-tasting [class$="-panel"],
body.brand-v02 .brand-v02-tasting [class*="tasting-"] {
  background: transparent;
  border: 1px solid var(--rule-color);
  border-radius: 0;
  box-shadow: none;
}

body.brand-v02 .brand-v02-tasting .tasting-flight-list,
body.brand-v02 .brand-v02-tasting .tasting-flight-item {
  background: transparent;
  border-color: var(--rule-color);
  border-radius: 0;
}

body.brand-v02 .brand-v02-pairing .btn-primary,
body.brand-v02 .brand-v02-tasting .btn-primary {
  background: var(--burgundy);
  color: var(--ivory);
  border: 1px solid var(--burgundy);
  border-radius: 0;
  padding: 12px 22px;
  font-family: var(--font-sans);
  font-weight: var(--fw-light);
  font-size: 11px;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
}

body.brand-v02 .brand-v02-pairing .btn-secondary,
body.brand-v02 .brand-v02-tasting .btn-secondary {
  background: transparent;
  color: var(--ink);
  border: 1px solid var(--ink);
  border-radius: 0;
  padding: 12px 20px;
  font-family: var(--font-sans);
  font-weight: var(--fw-light);
  font-size: 11px;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
}

/* ============================================================
 * Phase 4h — Label tool wrapper atelier (print engine untouched)
 * ============================================================
 * IMPORTANT: only the Label tool VIEW WRAPPER is restyled. The
 * actual printable label (rendered by js/label/* engine) maintains
 * its print spec — print labels must NOT change visually for
 * regulatory compliance and legal-grade reproducibility. */

body.brand-v02 .brand-v02-label .view-header h2 {
  font-family: var(--font-display);
  font-weight: var(--fw-light);
  font-size: var(--display-md);
  letter-spacing: var(--ls-tight);
  color: var(--ink);
}

body.brand-v02 .brand-v02-label .label-paywall,
body.brand-v02 .brand-v02-label .label-license-card,
body.brand-v02 .brand-v02-label .pro-lock-card {
  background: var(--mist);
  border: 1px solid var(--rule-color);
  border-radius: 0;
  box-shadow: none;
  padding: 32px;
}

body.brand-v02 .brand-v02-label .label-wizard,
body.brand-v02 .brand-v02-label .label-picker,
body.brand-v02 .brand-v02-label .label-editor {
  background: transparent;
  border: 1px solid var(--rule-color);
  border-radius: 0;
  padding: 24px;
  margin-bottom: 18px;
}

body.brand-v02 .brand-v02-label .label-wizard h3,
body.brand-v02 .brand-v02-label .label-picker h3,
body.brand-v02 .brand-v02-label .label-editor h3 {
  font-family: var(--font-display);
  font-weight: var(--fw-light);
  font-size: 22px;
  margin: 0 0 14px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--rule-color);
}

body.brand-v02 .brand-v02-label input[type="text"],
body.brand-v02 .brand-v02-label input[type="number"],
body.brand-v02 .brand-v02-label textarea,
body.brand-v02 .brand-v02-label select {
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--rule-color);
  border-radius: 0;
  padding: 8px 4px;
  font-family: var(--font-sans);
  font-weight: var(--fw-light);
  font-size: 14px;
  color: var(--ink);
}

body.brand-v02 .brand-v02-label input::placeholder {
  color: var(--faint);
  font-style: italic;
}

/* Atelier buttons in label tool wrapper */
body.brand-v02 .brand-v02-label .btn-primary,
body.brand-v02 .brand-v02-label .btn-gold {
  background: var(--burgundy);
  color: var(--ivory);
  border: 1px solid var(--burgundy);
  border-radius: 0;
  padding: 12px 22px;
  font-family: var(--font-sans);
  font-weight: var(--fw-light);
  font-size: 11px;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
}

body.brand-v02 .brand-v02-label .btn-secondary {
  background: transparent;
  color: var(--ink);
  border: 1px solid var(--ink);
  border-radius: 0;
  padding: 12px 20px;
  font-family: var(--font-sans);
  font-weight: var(--fw-light);
  font-size: 11px;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
}

body.brand-v02 .brand-v02-label .badge-license-active {
  background: transparent;
  color: var(--status-balanced);
  border: 1px solid var(--status-balanced);
  border-radius: 0;
  padding: 2px 8px;
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: var(--ls-caps);
  font-weight: var(--fw-regular);
  text-transform: uppercase;
}

/* DO NOT add overrides for .label-canvas, .label-page, .printable-label,
 * or any class used by js/label/* render output. Print spec is sacred. */

/* ============================================================
 * Phase 4i — Marketplace + Community atelier overrides
 * ============================================================ */
body.brand-v02 .brand-v02-marketplace .view-header h2,
body.brand-v02 .brand-v02-community .view-header h2 {
  font-family: var(--font-display);
  font-weight: var(--fw-light);
  font-size: var(--display-md);
  letter-spacing: var(--ls-tight);
  color: var(--ink);
}

/* Tabs in both marketplace and community */
body.brand-v02 .brand-v02-marketplace .marketplace-tabs,
body.brand-v02 .brand-v02-community .community-tabs,
body.brand-v02 .brand-v02-marketplace [class$="-tabs"],
body.brand-v02 .brand-v02-community [class$="-tabs"] {
  display: flex;
  gap: 0;
  border-bottom: 1px solid var(--rule-color);
  margin: 16px 0;
  background: transparent;
  flex-wrap: wrap;
}

body.brand-v02 .brand-v02-marketplace .market-tab,
body.brand-v02 .brand-v02-marketplace .marketplace-tab,
body.brand-v02 .brand-v02-community .comm-tab,
body.brand-v02 .brand-v02-community .community-tab {
  background: transparent;
  border: 0;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  padding: 12px 18px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--muted);
  cursor: pointer;
  transition: color 200ms var(--ease-atelier),
              border-color 200ms var(--ease-atelier);
}

body.brand-v02 .brand-v02-marketplace .market-tab:hover,
body.brand-v02 .brand-v02-marketplace .marketplace-tab:hover,
body.brand-v02 .brand-v02-community .comm-tab:hover,
body.brand-v02 .brand-v02-community .community-tab:hover {
  color: var(--ink);
}

body.brand-v02 .brand-v02-marketplace .market-tab.active,
body.brand-v02 .brand-v02-marketplace .marketplace-tab.active,
body.brand-v02 .brand-v02-marketplace .market-tab[data-active="true"],
body.brand-v02 .brand-v02-community .comm-tab.active,
body.brand-v02 .brand-v02-community .community-tab.active {
  color: var(--burgundy);
  border-bottom-color: var(--burgundy);
}

/* Cards in marketplace + community (similar to recipe card) */
body.brand-v02 .brand-v02-marketplace .market-card,
body.brand-v02 .brand-v02-marketplace .marketplace-card,
body.brand-v02 .brand-v02-community .comm-card,
body.brand-v02 .brand-v02-community .community-card,
body.brand-v02 .brand-v02-community .comm-recipe-card,
body.brand-v02 .brand-v02-community .comm-ingredient-card,
body.brand-v02 .brand-v02-community .comm-composite-card {
  background: var(--ivory);
  border: 1px solid var(--ink);
  border-radius: 0;
  box-shadow: none;
  padding: 22px 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  cursor: pointer;
  transition: box-shadow 500ms var(--ease-atelier);
}

body.brand-v02 .brand-v02-marketplace .market-card:hover,
body.brand-v02 .brand-v02-community .comm-card:hover {
  box-shadow: var(--shadow-card);
}

body.brand-v02 .brand-v02-marketplace .market-card-name,
body.brand-v02 .brand-v02-marketplace .marketplace-product-name,
body.brand-v02 .brand-v02-community .comm-card-name,
body.brand-v02 .brand-v02-community .comm-recipe-name {
  font-family: var(--font-display);
  font-weight: var(--fw-light);
  font-size: 22px;
  line-height: 1.15;
  color: var(--ink);
  letter-spacing: var(--ls-tight);
}

body.brand-v02 .brand-v02-marketplace .market-card-meta,
body.brand-v02 .brand-v02-marketplace .marketplace-product-meta,
body.brand-v02 .brand-v02-community .comm-card-meta,
body.brand-v02 .brand-v02-community .comm-author {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--muted);
}

body.brand-v02 .brand-v02-marketplace .market-price,
body.brand-v02 .brand-v02-marketplace .marketplace-price {
  font-family: var(--font-display);
  font-weight: var(--fw-light);
  font-size: 20px;
  color: var(--burgundy);
  letter-spacing: var(--ls-tight);
}

body.brand-v02 .brand-v02-community .comm-rating,
body.brand-v02 .brand-v02-community .comm-stars,
body.brand-v02 .brand-v02-community .stars-display {
  color: var(--champagne);
}

body.brand-v02 .brand-v02-marketplace .btn-primary,
body.brand-v02 .brand-v02-community .btn-primary,
body.brand-v02 .brand-v02-marketplace .btn-gold,
body.brand-v02 .brand-v02-community .btn-gold {
  background: var(--burgundy);
  color: var(--ivory);
  border: 1px solid var(--burgundy);
  border-radius: 0;
  padding: 10px 22px;
  font-family: var(--font-sans);
  font-weight: var(--fw-light);
  font-size: 11px;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
}

body.brand-v02 .brand-v02-marketplace .btn-secondary,
body.brand-v02 .brand-v02-community .btn-secondary {
  background: transparent;
  color: var(--ink);
  border: 1px solid var(--ink);
  border-radius: 0;
  padding: 10px 20px;
  font-family: var(--font-sans);
  font-weight: var(--fw-light);
  font-size: 11px;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
}

/* Search/filter bar */
body.brand-v02 .brand-v02-marketplace input[type="text"],
body.brand-v02 .brand-v02-marketplace input[type="search"],
body.brand-v02 .brand-v02-community input[type="text"],
body.brand-v02 .brand-v02-community input[type="search"],
body.brand-v02 .brand-v02-marketplace select,
body.brand-v02 .brand-v02-community select {
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--rule-color);
  border-radius: 0;
  padding: 8px 4px;
  font-family: var(--font-sans);
  font-weight: var(--fw-light);
  font-size: 13px;
  color: var(--ink);
}

body.brand-v02 .brand-v02-marketplace input::placeholder,
body.brand-v02 .brand-v02-community input::placeholder {
  color: var(--faint);
  font-style: italic;
}

/* Card grid layout */
body.brand-v02 .brand-v02-marketplace .market-grid,
body.brand-v02 .brand-v02-marketplace .marketplace-grid,
body.brand-v02 .brand-v02-community .comm-grid,
body.brand-v02 .brand-v02-community .community-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 18px;
}

@media (max-width: 768px) {
  body.brand-v02 .brand-v02-marketplace .market-grid,
  body.brand-v02 .brand-v02-marketplace .marketplace-grid,
  body.brand-v02 .brand-v02-community .comm-grid,
  body.brand-v02 .brand-v02-community .community-grid {
    grid-template-columns: 1fr;
  }
}

/* ============================================================
 * Phase 4j — Settings + Production planner + Admin atelier overrides
 * ============================================================ */
body.brand-v02 .brand-v02-settings .view-header h2,
body.brand-v02 .brand-v02-production .view-header h2,
body.brand-v02 .brand-v02-admin .view-header h2 {
  font-family: var(--font-display);
  font-weight: var(--fw-light);
  font-size: var(--display-md);
  letter-spacing: var(--ls-tight);
  color: var(--ink);
}

/* Settings sections — hairline panels */
body.brand-v02 .brand-v02-settings .settings-section,
body.brand-v02 .brand-v02-settings .settings-card,
body.brand-v02 .brand-v02-settings [class$="-section"],
body.brand-v02 .brand-v02-settings [class$="-card"] {
  background: transparent;
  border: 1px solid var(--rule-color);
  border-radius: 0;
  box-shadow: none;
  padding: 24px;
  margin-bottom: 20px;
}

body.brand-v02 .brand-v02-settings .settings-section h3,
body.brand-v02 .brand-v02-settings [class$="-section"] h3,
body.brand-v02 .brand-v02-settings [class$="-card"] h3 {
  font-family: var(--font-display);
  font-weight: var(--fw-light);
  font-size: 22px;
  letter-spacing: var(--ls-tight);
  color: var(--ink);
  margin: 0 0 14px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--rule-color);
}

body.brand-v02 .brand-v02-settings .section-desc {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: var(--fw-light);
  font-size: 14px;
  color: var(--muted);
  margin-bottom: 14px;
}

/* Form inputs in settings */
body.brand-v02 .brand-v02-settings input[type="text"],
body.brand-v02 .brand-v02-settings input[type="email"],
body.brand-v02 .brand-v02-settings input[type="tel"],
body.brand-v02 .brand-v02-settings input[type="number"],
body.brand-v02 .brand-v02-settings input[type="password"],
body.brand-v02 .brand-v02-settings textarea,
body.brand-v02 .brand-v02-settings select {
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--rule-color);
  border-radius: 0;
  padding: 8px 4px;
  font-family: var(--font-sans);
  font-weight: var(--fw-light);
  font-size: 14px;
  color: var(--ink);
}

body.brand-v02 .brand-v02-settings input:focus,
body.brand-v02 .brand-v02-settings textarea:focus,
body.brand-v02 .brand-v02-settings select:focus {
  outline: none;
  border-bottom-color: var(--ink);
}

body.brand-v02 .brand-v02-settings input::placeholder,
body.brand-v02 .brand-v02-settings textarea::placeholder {
  color: var(--faint);
  font-style: italic;
}

body.brand-v02 .brand-v02-settings label {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--muted);
}

/* Toggle switches */
body.brand-v02 .brand-v02-settings .toggle-switch,
body.brand-v02 .brand-v02-settings .switch-input {
  /* Keep native appearance for accessibility */
  accent-color: var(--burgundy);
}

/* Buttons in settings/production/admin */
body.brand-v02 .brand-v02-settings .btn-primary,
body.brand-v02 .brand-v02-production .btn-primary,
body.brand-v02 .brand-v02-admin .btn-primary,
body.brand-v02 .brand-v02-settings .btn-gold,
body.brand-v02 .brand-v02-admin .btn-gold {
  background: var(--burgundy);
  color: var(--ivory);
  border: 1px solid var(--burgundy);
  border-radius: 0;
  padding: 12px 22px;
  font-family: var(--font-sans);
  font-weight: var(--fw-light);
  font-size: 11px;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
}

body.brand-v02 .brand-v02-settings .btn-secondary,
body.brand-v02 .brand-v02-production .btn-secondary,
body.brand-v02 .brand-v02-admin .btn-secondary {
  background: transparent;
  color: var(--ink);
  border: 1px solid var(--ink);
  border-radius: 0;
  padding: 12px 20px;
  font-family: var(--font-sans);
  font-weight: var(--fw-light);
  font-size: 11px;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
}

body.brand-v02 .brand-v02-settings .btn-danger,
body.brand-v02 .brand-v02-admin .btn-danger {
  background: transparent;
  color: var(--burgundy);
  border: 1px solid var(--burgundy);
  border-radius: 0;
}

body.brand-v02 .brand-v02-settings .btn-danger:hover,
body.brand-v02 .brand-v02-admin .btn-danger:hover {
  background: var(--burgundy);
  color: var(--ivory);
}

/* PRO badge in settings */
body.brand-v02 .brand-v02-settings .badge-pro-active,
body.brand-v02 .brand-v02-settings .pro-badge {
  background: transparent;
  color: var(--champagne);
  border: 1px solid var(--champagne);
  border-radius: 0;
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: var(--ls-caps);
  font-weight: var(--fw-regular);
  padding: 2px 8px;
  text-transform: uppercase;
}

/* Production planner — Gantt grid */
body.brand-v02 .brand-v02-production .gantt-grid,
body.brand-v02 .brand-v02-production .schedule-grid,
body.brand-v02 .brand-v02-production .gantt-row {
  background: transparent;
  border: 1px solid var(--rule-color);
  border-radius: 0;
}

body.brand-v02 .brand-v02-production .gantt-bar {
  background: var(--burgundy);
  border-radius: 0;
}

/* Admin — table-heavy, atelier mono */
body.brand-v02 .brand-v02-admin table {
  border-collapse: collapse;
  width: 100%;
}

body.brand-v02 .brand-v02-admin table th,
body.brand-v02 .brand-v02-admin table td {
  border: 0;
  border-bottom: 1px solid var(--rule-color);
  padding: 10px 12px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0;
  text-align: left;
  color: var(--ink);
}

body.brand-v02 .brand-v02-admin table th {
  text-transform: uppercase;
  letter-spacing: var(--ls-label);
  font-size: 9px;
  color: var(--muted);
  font-weight: var(--fw-regular);
}

body.brand-v02 .brand-v02-admin .admin-tab,
body.brand-v02 .brand-v02-admin [class$="-tabs"] button {
  background: transparent;
  border: 0;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  padding: 10px 16px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--muted);
  cursor: pointer;
}

body.brand-v02 .brand-v02-admin .admin-tab.active {
  color: var(--burgundy);
  border-bottom-color: var(--burgundy);
}

body.brand-v02 .brand-v02-admin .admin-err {
  color: var(--burgundy);
  font-family: var(--font-mono);
  font-size: 11px;
}

/* ============================================================
 * Phase 5 — Mobile responsive pass (375px / 414px)
 * ============================================================
 * Atelier-specific responsive rules layered on top of v.01
 * media queries. Keeps Cormorant Garamond legible at small sizes,
 * stacks multi-column grids, tightens gutters. */

@media (max-width: 414px) {
  body.brand-v02 .display-xl { font-size: clamp(48px, 18vw, 72px); }
  body.brand-v02 .display-lg { font-size: clamp(40px, 14vw, 56px); }
  body.brand-v02 .display-md { font-size: clamp(28px, 10vw, 40px); }
  body.brand-v02 .display-sm { font-size: clamp(22px, 8vw, 30px); }

  /* Frame padding tightens on small phones */
  body.brand-v02 .frame {
    padding-inline: 20px;
  }

  /* Hero stacks vertically */
  body.brand-v02 .brand-v02-hero {
    padding: 96px 20px 32px;
    min-height: auto;
  }
  body.brand-v02 .brand-v02-hero__corner {
    top: 64px;
    left: 20px;
    right: 20px;
    font-size: 9px;
  }
  body.brand-v02 .brand-v02-hero__wordmark {
    margin-bottom: 48px;
  }
  body.brand-v02 .brand-v02-hero__data-band {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }

  /* Section heads compress */
  body.brand-v02 .brand-v02-section-head {
    grid-template-columns: 1fr;
    gap: 8px;
    text-align: left;
    padding-bottom: 16px;
  }
  body.brand-v02 .brand-v02-section-head__title {
    text-align: left;
    font-size: clamp(24px, 8vw, 36px);
  }

  /* Data grid: keep 2-col but tighter */
  body.brand-v02 .brand-v02-data-grid__cell {
    padding: 14px 12px;
  }
  body.brand-v02 .brand-v02-data-grid__value {
    font-size: 18px;
  }

  /* Recipe cards reflow to 1 col, slimmer padding */
  body.brand-v02 .brand-v02-recipe-card,
  body.brand-v02 .recipe-card {
    padding: 20px 16px;
    gap: 12px;
  }
  body.brand-v02 .recipe-card .recipe-card-name {
    font-size: 19px;
  }

  /* Sidebar collapses to drawer-style or full-width on mobile (existing
     v.01 mobile-nav handles this; we keep the brand-v02 sidebar styles
     but the v.01 .mobile-nav is the active navigation on small screens) */

  /* Mobile nav adjustments */
  body.brand-v02 .brand-v02-mobile-nav .mobile-nav-item {
    font-size: 8px;
    padding: 8px 4px;
  }

  /* Login on small phones */
  body.brand-v02 .brand-v02-login.login-page {
    padding: 64px 20px 32px;
  }
  body.brand-v02 .brand-v02-login__eyebrow {
    top: 24px;
  }
  body.brand-v02 .brand-v02-login .login-card {
    padding: 32px 16px;
  }
  body.brand-v02 .brand-v02-login .login-brand {
    font-size: 24px;
  }

  /* Calculator panels on phones */
  body.brand-v02 .brand-v02-calculator .recipe-name-bar input,
  body.brand-v02 .brand-v02-calculator .recipe-name-input {
    font-size: 22px;
  }
  body.brand-v02 .brand-v02-calculator .balance-score {
    font-size: 40px;
  }

  /* Dashboard on phones */
  body.brand-v02 .brand-v02-dashboard .view-header h2 {
    font-size: clamp(28px, 10vw, 40px);
  }
  body.brand-v02 .brand-v02-dashboard .stat-num {
    font-size: 30px;
  }
  body.brand-v02 .brand-v02-dashboard .recipe-filter-bar {
    flex-direction: column;
    align-items: stretch;
  }

  /* Wiki text stays legible */
  body.brand-v02 .brand-v02-wiki p,
  body.brand-v02 .brand-v02-wiki li {
    font-size: 16px;
    line-height: 1.65;
  }
  body.brand-v02 .brand-v02-wiki h3 {
    font-size: 22px;
  }

  /* Tabs wrap on narrow screens */
  body.brand-v02 .brand-v02-dashboard .dashboard-tabs,
  body.brand-v02 .brand-v02-ingredients .category-tabs,
  body.brand-v02 .brand-v02-wiki .wiki-kind-tabs,
  body.brand-v02 .brand-v02-marketplace .marketplace-tabs,
  body.brand-v02 .brand-v02-community .community-tabs {
    flex-wrap: wrap;
    gap: 0;
  }

  /* Buttons full-width on mobile when stacked */
  body.brand-v02 .brand-v02-dashboard .empty-state-actions {
    flex-direction: column;
    width: 100%;
  }
  body.brand-v02 .brand-v02-dashboard .empty-state-actions .btn-primary,
  body.brand-v02 .brand-v02-dashboard .empty-state-actions .btn-secondary {
    width: 100%;
  }
}

@media (max-width: 375px) {
  body.brand-v02 .display-xl { font-size: clamp(40px, 16vw, 60px); }
  body.brand-v02 .display-lg { font-size: clamp(32px, 12vw, 48px); }

  body.brand-v02 .frame {
    padding-inline: 16px;
  }

  /* Tightest padding on smallest phones */
  body.brand-v02 .brand-v02-recipe-card,
  body.brand-v02 .recipe-card {
    padding: 18px 14px;
  }

  body.brand-v02 .brand-v02-data-grid__cell {
    padding: 12px 10px;
  }

  body.brand-v02 .brand-v02-mobile-nav .mobile-nav-item {
    padding: 8px 2px;
  }

  body.brand-v02 .brand-v02-mobile-nav .mobile-nav-item span:not(.mnav-icon) {
    font-size: 7px;
  }

  /* Hero on smallest screens */
  body.brand-v02 .brand-v02-hero {
    padding: 80px 16px 24px;
  }
  body.brand-v02 .brand-v02-hero__corner {
    top: 56px;
    left: 16px;
    right: 16px;
  }

  body.brand-v02 .brand-v02-section-head {
    padding-bottom: 12px;
    margin-bottom: 18px;
  }
}

/* Tablet portrait (768px) — keep brand bar visible, but tighten */
@media (max-width: 1024px) and (min-width: 769px) {
  body.brand-v02 .brand-v02-brand-bar__inner {
    padding: 14px 32px;
  }
  body.brand-v02 .brand-v02-brand-bar__nav {
    gap: 24px;
  }
}

/* Print — preserve label printable output (Phase 4h note) */
@media print {
  body.brand-v02 .brand-v02-bar-mount,
  body.brand-v02 .brand-v02-mobile-nav,
  body.brand-v02 .sidebar.brand-v02-sidebar {
    display: none !important;
  }
  body.brand-v02 .main-content {
    margin-left: 0 !important;
    padding: 0 !important;
  }
}

/* ====================================================================
 * v287 — Pro 訂閱三套件敘事（THE LAB / THE STUDIO / THE ATELIER）
 * 共用於 showUpgradeModal / showProLockPrompt / renderSettings 三處 touch point。
 * 純 CSS <details> 折疊，零 JS 依賴。
 * ==================================================================== */

.pro-suites-overview {
  margin: 18px 0 20px;
  text-align: center;
}
.pro-suites-overview__headline {
  font-family: 'Cormorant Garamond', 'Noto Serif TC', serif;
  font-size: 22px;
  font-weight: 500;
  color: #641322;
  margin: 0 0 6px;
  letter-spacing: 0.5px;
}
.pro-suites-overview__subhead {
  font-size: 13px;
  color: #6b6b6b;
  margin: 0;
  line-height: 1.55;
}

.pro-suites-stack {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0 0 18px;
}

.pro-package-card {
  background: #FBF8F2;
  border: 1px solid #E5D9BD;
  border-radius: 4px;
  overflow: hidden;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.pro-package-card[open] {
  border-color: #B8965A;
  box-shadow: 0 1px 0 rgba(184, 150, 90, 0.18);
}
.pro-package-card:hover:not([open]) {
  border-color: #C9B687;
}

.pro-package-card__summary {
  list-style: none;
  cursor: pointer;
  padding: 14px 16px;
  position: relative;
  user-select: none;
}
.pro-package-card__summary::-webkit-details-marker {
  display: none;
}
.pro-package-card__summary::after {
  content: '+';
  position: absolute;
  right: 16px;
  top: 14px;
  font-size: 18px;
  color: #B8965A;
  font-weight: 300;
  transition: transform 0.2s ease;
}
.pro-package-card[open] .pro-package-card__summary::after {
  content: '−';
}

.pro-package-card__order {
  font-family: 'IBM Plex Mono', 'Courier New', monospace;
  font-size: 10px;
  color: #B8965A;
  letter-spacing: 1.5px;
  margin: 0 0 4px;
  text-transform: uppercase;
}
.pro-package-card__title {
  font-family: 'Cormorant Garamond', 'Noto Serif TC', serif;
  font-size: 18px;
  font-weight: 500;
  color: #2A2A2A;
  margin: 0 0 4px;
  line-height: 1.3;
  padding-right: 30px;
}
.pro-package-card__tagline {
  font-size: 12.5px;
  color: #555;
  margin: 0;
  line-height: 1.5;
  padding-right: 30px;
}

.pro-package-card__body {
  padding: 0 16px 14px;
  border-top: 1px dotted #E5D9BD;
  margin-top: 4px;
  padding-top: 12px;
}
.pro-package-card__features {
  font-size: 12px;
  color: #4a4a4a;
  line-height: 1.7;
  margin: 0;
  word-spacing: 1px;
}

/* ProLock prompt — belongsTo highlight + other packages preview */
.pro-lock-package-highlight {
  background: #FBF8F2;
  border-left: 3px solid #B8965A;
  padding: 10px 12px;
  margin: 14px 0 10px;
  text-align: left;
  border-radius: 0 4px 4px 0;
}
.pro-lock-package-highlight__title {
  font-family: 'Cormorant Garamond', 'Noto Serif TC', serif;
  font-size: 15px;
  color: #641322;
  font-weight: 500;
  margin: 0 0 4px;
}
.pro-lock-package-highlight__features {
  font-size: 11.5px;
  color: #555;
  margin: 0;
  line-height: 1.55;
}

.pro-lock-other-packages {
  text-align: left;
  margin: 12px 0;
  font-size: 11.5px;
}
.pro-lock-other-packages__label {
  color: #6b6b6b;
  margin: 0 0 6px;
  font-size: 11px;
}
.pro-lock-other-packages__row {
  padding: 4px 0;
  color: #4a4a4a;
  line-height: 1.5;
}
.pro-lock-other-packages__row b {
  color: #2A2A2A;
  font-weight: 500;
}

/* Settings upgrade-section v287 polish */
.upgrade-section--v287 {
  background: linear-gradient(135deg, #FBF8F2 0%, #F4ECDB 100%);
  border: 1px solid #B8965A;
  border-radius: 6px;
  padding: 22px 20px 20px;
  margin-top: 16px;
}
.upgrade-section--v287 .pro-suites-overview {
  margin-top: 0;
}
.upgrade-section--v287 .pro-suites-overview__headline {
  font-size: 20px;
}

@media (max-width: 640px) {
  .pro-suites-overview__headline {
    font-size: 20px;
  }
  .pro-package-card__title {
    font-size: 16px;
  }
  .pro-package-card__tagline,
  .pro-package-card__features {
    font-size: 12px;
  }
  .pro-package-card__summary {
    padding: 12px 14px;
  }
  .pro-package-card__summary::after {
    right: 14px;
    top: 12px;
  }
  .pro-package-card__body {
    padding: 0 14px 12px;
    padding-top: 10px;
  }
}

/* ════════════════════════════════════════════════════════════
   v292 AI 配方生成 Agent — atelier overrides
   ════════════════════════════════════════════════════════════ */
body.brand-v02 .ai-recipe-page .view-header h2 {
  font-family: var(--font-display, "Cormorant Garamond", "Noto Serif TC", serif);
  font-weight: 500;
  letter-spacing: 0.02em;
}
body.brand-v02 .ai-recipe-input-col,
body.brand-v02 .ai-recipe-result-col {
  background: var(--ivory, #F7F2E8);
  border: 1px solid var(--champagne, #B8965A);
  box-shadow: none;
  border-radius: 4px;
}
body.brand-v02 .ai-recipe-input-col h3,
body.brand-v02 .ai-recipe-result-col h3 {
  font-family: var(--font-mono, "IBM Plex Mono", monospace);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--burgundy, #641322);
  border-bottom: 1px solid var(--champagne, #B8965A);
}
body.brand-v02 .ai-recipe-result-name {
  font-family: var(--font-display, "Cormorant Garamond", serif);
  font-weight: 400;
  font-style: italic;
  font-size: 22px;
}
body.brand-v02 .ai-recipe-quota-bar {
  background: transparent;
  border: 1px solid var(--champagne, #B8965A);
  border-radius: 0;
}
body.brand-v02 .ai-recipe-iter-btn,
body.brand-v02 .ai-recipe-generate-btn,
body.brand-v02 .ai-recipe-save-btn {
  border-radius: 2px;
  font-family: var(--font-mono, "IBM Plex Mono", monospace);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
body.brand-v02 .ai-recipe-main-chip {
  background: var(--burgundy, #641322);
  border-radius: 0;
  font-family: var(--font-mono, "IBM Plex Mono", monospace);
  font-size: 11px;
  letter-spacing: 0.06em;
}