/* ============================================================================
   ChanPet · Redesign layer  (v2 "Warm Studio")
   ----------------------------------------------------------------------------
   This stylesheet is loaded AFTER the original inline <style> blocks, so it
   wins on the cascade at equal specificity. It does three things:
     1. Re-defines the design tokens  -> recolours the whole app cohesively.
     2. Upgrades the type / material / depth system  -> premium feel.
     3. Refines every major component  -> same class names, richer surface.
   No class names are renamed and no markup is required, so all app logic,
   analytics hooks and security behaviour are preserved.
   System fonts only (CSP blocks external fonts). Light + dark supported.
   ========================================================================== */

/* ---------------------------------------------------------------------------
   1 · DESIGN TOKENS
   --------------------------------------------------------------------------- */
:root {
  --brand: #FF7A3C;
  --brand-deep: #C43E12;
  --brand-soft: #FFE3D0;
  --brand-ink: #7A2F10;
  --brand-glow: rgba(251, 106, 44, .30);
  --accent: #1F7A66;
  --accent-deep: #15584A;
  --accent-soft: #DCEDE6;
  --highlight: #C8941E;
  --highlight-soft: #FBEFD2;
  --risk: #C2451B;
  --risk-soft: #FBE7D6;
  --bg: #FAF4EA;
  --bg-tint-1: #FFEDDD;
  --bg-tint-2: #FBF1E6;
  --surface: #FFFFFF;
  --surface-2: #FFFCF8;
  --surface-sunk: #FBF2E4;
  --ink: #211913;
  --ink-2: #574A3D;
  --ink-3: #78675A;
  --line: #ECE0CE;
  --line-strong: #DCC9AE;
  --shadow-xs: 0 1px 2px rgba(72, 44, 18, .05);
  --shadow-sm: 0 1px 2px rgba(74,38,14,.06), 0 1px 1px rgba(74,38,14,.04);
  --shadow-md: 0 8px 22px -10px rgba(74,38,14,.20), 0 2px 8px rgba(74,38,14,.07);
  --shadow-lg: 0 30px 60px -26px rgba(74,38,14,.30), 0 10px 22px -10px rgba(74,38,14,.14);
  --ring-focus: 0 0 0 3px rgba(251, 106, 44, .28);
  --r-xs: 7px;
  --r-sm: 11px;
  --r-md: 15px;
  --r-lg: 20px;
  --r-xl: 26px;
  --r-2xl: 32px;
  --r-pill: 999px;
  --font-display: "Noto Serif SC","Songti SC",ui-serif,Georgia,"Noto Serif",serif;
  --font-body: "Manrope","Noto Sans SC","PingFang SC","Hiragino Sans GB","Microsoft YaHei",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --font-mono: "JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --ease: cubic-bezier(.22, .61, .36, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-spring: cubic-bezier(.34, 1.56, .64, 1);
  --gold: #9A6E08;
  --gold-bright: #E8B84B;
}

html[data-theme="dark"] {
  --brand: #FF8E5A;
  --brand-deep: #FF7A3C;
  --brand-soft: #3B2417;
  --brand-ink: #FFD3B9;
  --brand-glow: rgba(255, 142, 90, .28);

  --accent: #4FB89F;
  --accent-deep: #2E7D6B;
  --accent-soft: #16302A;

  --highlight: #F2BE5C;
  --highlight-soft: #2C2417;

  --risk: #E08049;
  --risk-soft: #2E1F15;

  --bg: #16110D;
  --bg-tint-1: #2A1A10;
  --bg-tint-2: #1F1710;
  --surface: #221A14;
  --surface-2: #261D16;
  --surface-sunk: #1B150F;

  --ink: #F6EEE3;
  --ink-2: #D7C8B7;
  --ink-3: #9D8C7C;

  --line: #342A20;
  --line-strong: #483929;

  --shadow-xs: 0 1px 2px rgba(0, 0, 0, .4);
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .4), 0 2px 8px rgba(0, 0, 0, .28);
  --shadow-md: 0 4px 12px -4px rgba(0, 0, 0, .55), 0 18px 38px -18px rgba(0, 0, 0, .6);
  --shadow-lg: 0 30px 64px -22px rgba(0, 0, 0, .72);
  --ring-focus: 0 0 0 3px rgba(255, 142, 90, .32);
}

/* ---------------------------------------------------------------------------
   2 · BASE / TYPOGRAPHY
   --------------------------------------------------------------------------- */
body {
  font-family: var(--font-body);
  background:
    radial-gradient(115% 58% at 88% -10%, var(--bg-tint-1) 0%, transparent 55%),
    radial-gradient(90% 48% at -6% -6%, var(--bg-tint-2) 0%, transparent 46%),
    var(--bg);
  background-attachment: fixed;
  color: var(--ink);
  font-size: 16px;
  line-height: 1.65;
  letter-spacing: .002em;
  font-feature-settings: "ss01", "cv01", "tnum" 0;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  color: var(--ink);
  text-wrap: balance;
}
h1 { font-weight: 800; letter-spacing: -.03em; line-height: 1.06; }
h2 { font-weight: 700; letter-spacing: -.022em; line-height: 1.14; }
h3 { font-weight: 700; letter-spacing: -.015em; }

/* Tabular, slightly tightened numerals everywhere a figure matters. */
.match-num, .score-num, .drawer-match-num, .tool-result-num, .tool-cost-line-amount,
.tool-cost-total-amount, .db-filter-item .count, .drawer-stat-val, .result-top1-score-badge .score-num {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1, "cv01";
  letter-spacing: -.01em;
}

a { color: var(--brand-deep); }
::selection { background: var(--brand-soft); color: var(--brand-ink); }

*:focus-visible { outline: none; box-shadow: var(--ring-focus); border-radius: 8px; }

/* Refined scrollbar */
::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-thumb {
  background: var(--line-strong); border-radius: 999px;
  border: 3px solid transparent; background-clip: padding-box;
}
::-webkit-scrollbar-thumb:hover { background: var(--ink-3); background-clip: padding-box; }

/* ---------------------------------------------------------------------------
   3 · NAV  (glass, refined)
   --------------------------------------------------------------------------- */
.app-nav {
  padding: 14px clamp(16px, 3vw, 32px);
  background: color-mix(in srgb, var(--bg) 78%, transparent);
  backdrop-filter: saturate(170%) blur(16px);
  -webkit-backdrop-filter: saturate(170%) blur(16px);
  border-bottom: 1px solid color-mix(in srgb, var(--line) 70%, transparent);
  transition: box-shadow .3s var(--ease), background .3s var(--ease);
}
html[data-theme="dark"] .app-nav { background: color-mix(in srgb, var(--bg) 72%, transparent); }
.app-nav.is-stuck { box-shadow: var(--shadow-sm); }

.app-logo { font-family: var(--font-display); font-weight: 800; font-size: 17px; letter-spacing: -.02em; gap: 11px; }
.logo-mark {
  width: 34px; height: 34px; border-radius: 11px;
  object-fit: cover; background: transparent;
  box-shadow: 0 6px 16px -6px var(--brand-glow), inset 0 1px 0 rgba(255, 255, 255, .45);
  transition: transform .35s var(--ease-spring), box-shadow .3s var(--ease);
}
.app-logo:hover .logo-mark { transform: scale(1.03); box-shadow: 0 10px 22px -6px var(--brand-glow), inset 0 1px 0 rgba(255, 255, 255, .55); }
.logo-mark::after { content: none; }

.app-nav-links { gap: clamp(16px, 2vw, 28px); font-weight: 600; }
.app-nav-links a {
  position: relative; color: var(--ink-2); padding: 6px 2px; border-bottom: none;
  transition: color .18s var(--ease);
}
.app-nav-links a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; border-radius: 2px;
  background: var(--brand); transform: scaleX(0); transform-origin: left; transition: transform .26s var(--ease-out);
}
.app-nav-links a:hover { color: var(--ink); }
.app-nav-links a:hover::after { transform: scaleX(.5); }
.app-nav-links a.active { color: var(--brand-deep); }
.app-nav-links a.active::after { transform: scaleX(1); }

.lang-switch, .theme-switch {
  border-radius: var(--r-pill);
  background: var(--surface); border: 1px solid var(--line);
  font-weight: 600; color: var(--ink-2);
  box-shadow: var(--shadow-xs);
  transition: transform .2s var(--ease), border-color .2s var(--ease), color .2s var(--ease), box-shadow .2s var(--ease);
}
.lang-switch:hover, .theme-switch:hover { color: var(--ink); border-color: var(--line-strong); transform: translateY(-1px); box-shadow: var(--shadow-sm); }
.lang-switch:active, .theme-switch:active { transform: translateY(0); }
.lang-switch .lang-active { background: var(--brand-soft); color: var(--brand-ink); }
.theme-switch { width: 38px; justify-content: center; }

/* ---------------------------------------------------------------------------
   4 · BUTTONS / CHIPS / CALLOUTS
   --------------------------------------------------------------------------- */
.btn {
  border-radius: var(--r-pill);
  font-weight: 650; letter-spacing: .005em;
  transition: transform .18s var(--ease), box-shadow .22s var(--ease), background .2s var(--ease), border-color .2s var(--ease), color .2s var(--ease);
}
.btn-primary {
  background: linear-gradient(135deg, var(--brand), var(--brand-deep));
  color: #fff; box-shadow: 0 8px 20px -10px var(--brand-glow), inset 0 1px 0 rgba(255, 255, 255, .28);
}
.btn-primary:hover { background: linear-gradient(135deg, var(--brand), var(--brand-deep)); transform: translateY(-2px); box-shadow: 0 14px 28px -10px var(--brand-glow), inset 0 1px 0 rgba(255, 255, 255, .32); }
.btn-primary:active { transform: translateY(0) scale(.985); }
.btn-accent { background: linear-gradient(135deg, var(--accent), var(--accent-deep)); color: #fff; box-shadow: 0 8px 20px -12px rgba(20, 88, 74, .55); }
.btn-accent:hover { transform: translateY(-2px); box-shadow: 0 14px 26px -12px rgba(20, 88, 74, .6); }
.btn-accent:active { transform: translateY(0) scale(.985); }
.btn-ghost { background: var(--surface); color: var(--ink-2); border: 1px solid var(--line); box-shadow: var(--shadow-xs); }
.btn-ghost:hover { background: var(--surface); color: var(--ink); border-color: var(--brand); transform: translateY(-2px); box-shadow: var(--shadow-sm); }
.btn-ghost:active { transform: translateY(0) scale(.985); }
.btn-lg { padding: 14px 28px; font-size: 16px; }

.chip {
  border-radius: var(--r-pill); font-weight: 650; letter-spacing: .01em;
  border: 1px solid color-mix(in srgb, var(--line) 80%, transparent);
  background: var(--surface-sunk); color: var(--ink-2);
}
.chip-brand { background: var(--brand-soft); color: var(--brand-ink); }
.chip-accent { background: var(--accent-soft); color: var(--accent-deep); }
.chip-risk { background: var(--risk-soft); color: var(--risk); }
.chip-highlight { background: var(--highlight-soft); color: #93620F; }

.callout { border-radius: var(--r-md); box-shadow: var(--shadow-xs); border-left-width: 3px; }
.callout-icon { border-radius: 9px; }

/* ---------------------------------------------------------------------------
   5 · HOME  (hero + inspiration + sections)
   --------------------------------------------------------------------------- */
.home-hero { padding: clamp(40px, 7vw, 76px) 0 36px; }
.home-hero-grid { gap: clamp(28px, 5vw, 56px); }

.eyebrow {
  background: var(--surface); color: var(--accent-deep);
  border: 1px solid var(--line); box-shadow: var(--shadow-xs);
  font-weight: 650; letter-spacing: .01em; padding: 6px 14px 6px 10px;
}
html[data-theme="dark"] .eyebrow { color: var(--accent); }
.eyebrow .dot { background: var(--accent); box-shadow: 0 0 0 0 var(--accent); }

.home-title { font-weight: 800; letter-spacing: -.032em; line-height: 1.1; padding-bottom: .06em; }
.home-title .brand {
  color: var(--brand);
  background: linear-gradient(120deg, var(--brand), var(--brand-deep));
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.home-title .italic { font-style: italic; color: var(--accent); font-weight: 600; }
.home-title-line{display:block}
.home-title-small{font-size:clamp(20px,2.35vw,28px);line-height:1.24;letter-spacing:-.018em;color:var(--ink-2);margin-top:.08em}
.home-title-dot{display:inline-block;width:.24em;height:.24em;min-width:12px;min-height:12px;border-radius:50%;background:var(--accent);margin-left:.18em;vertical-align:.08em;animation:homeTitleDotBreathe 2.6s ease-in-out infinite;transform-origin:center}
@keyframes homeTitleDotBreathe{0%,100%{box-shadow:0 0 0 0 color-mix(in srgb,var(--accent) 34%,transparent),0 0 0 4px color-mix(in srgb,var(--accent) 14%,transparent);transform:scale(1)}50%{box-shadow:0 0 0 8px color-mix(in srgb,var(--accent) 0%,transparent),0 0 0 6px color-mix(in srgb,var(--accent) 5%,transparent);transform:scale(1.14)}}
@media(prefers-reduced-motion:reduce){.home-title-dot{animation:none;box-shadow:0 0 0 4px color-mix(in srgb,var(--accent) 14%,transparent)}}
@media(max-width:640px){.home-title-small{font-size:clamp(18px,5.6vw,23px)}.home-title-dot{min-width:10px;min-height:10px}}

.home-tagline { font-size: clamp(16px, 1.6vw, 18px); color: var(--ink-2); max-width: 540px; line-height: 1.6; }
.home-meta { gap: 14px; }
.home-meta span {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-pill);
  padding: 5px 12px; color: var(--ink-2); font-weight: 600; box-shadow: var(--shadow-xs);
}
.home-cta-row { gap: 12px; margin-top: 6px; }

.home-hero-path {
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap:8px;
  margin:16px 0 2px;
  max-width: 620px;
}
.home-hero-path a {
  min-height:78px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  gap:6px;
  padding:12px;
  border:1px solid var(--line);
  border-radius: var(--r-md);
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--surface) 88%, transparent), var(--surface-sunk));
  color: inherit;
  text-decoration:none;
  box-shadow: var(--shadow-xs);
  transition: transform 180ms var(--ease), border-color 180ms var(--ease), background 180ms var(--ease);
}
.home-hero-path a:hover {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--brand) 45%, var(--line));
  background: var(--brand-soft);
}
.home-hero-path b {
  color: var(--brand-deep);
  font-size:13px;
  line-height:1.25;
}
.home-hero-path span {
  color: var(--ink-3);
  font-size:12px;
  line-height:1.35;
}
@media (max-width:640px) {
  .home-hero-path { grid-template-columns:1fr; }
  .home-hero-path a { min-height:auto; }
}

.social-proof { color: var(--ink-3); }
.avatar-stack > div { box-shadow: var(--shadow-xs); }

/* Inspiration wall - a tactile "studio shelf" */
.inspiration {
  background:
    linear-gradient(180deg, var(--surface-2), var(--surface)) padding-box,
    linear-gradient(145deg, var(--highlight), var(--brand)) border-box;
  border: 1px solid transparent;
  border-radius: var(--r-2xl);
  padding: 22px;
  box-shadow: var(--shadow-md);
}
.inspiration-title { font-weight: 700; letter-spacing: .01em; color: var(--ink-2); font-size: 12.5px; }
.inspiration-grid { gap: 14px; }

.section { padding: clamp(28px, 5vw, 44px) 0; }
.section-title { font-family: var(--font-display); font-weight: 800; letter-spacing: -.022em; font-size: clamp(22px, 3vw, 30px); }
.section-sub { color: var(--ink-3); }

/* ---------------------------------------------------------------------------
   6 · PET CARDS  (premium "studio portrait" framing)
   --------------------------------------------------------------------------- */
.pet-card {
  background: linear-gradient(180deg, var(--surface-2), var(--surface));
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
  transition: transform .32s var(--ease-out), box-shadow .32s var(--ease-out), border-color .32s var(--ease-out);
  will-change: transform;
}
.pet-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-lg); border-color: color-mix(in srgb, var(--brand) 45%, var(--line)); }

.pet-card-img { aspect-ratio: 4/3; }
.pet-card-img.square { aspect-ratio: 1/1; }
/* Photo zoom on hover (real R2 photos) */
.pet-card-img img { transition: transform .55s var(--ease-out); }
.pet-card:hover .pet-card-img img { transform: scale(1.06); }

/* The illustrated fallback gets a soft studio backdrop + vignette + depth. */
.pet-illus { position: relative; }
.pet-illus::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background:
    radial-gradient(80% 60% at 50% 32%, rgba(255, 255, 255, .55), transparent 70%),
    radial-gradient(120% 90% at 50% 120%, rgba(72, 44, 18, .12), transparent 60%);
}
.pet-illus svg, .pet-illus .protected-photo-frame { position: relative; z-index: 1; }
.pet-illus > svg { filter: drop-shadow(0 6px 10px rgba(72, 44, 18, .16)); transition: transform .5s var(--ease-out); width: 66%; height: 66%; }
.pet-card:hover .pet-illus > svg { transform: translateY(-3px) scale(1.04); }
/* richer, more sophisticated gradient backdrops */
.pet-illus.bg-cream { background: linear-gradient(145deg, #FFE3CD, #FFF3E2); }
.pet-illus.bg-sage  { background: linear-gradient(145deg, #D7E9E2, #EEF4EC); }
.pet-illus.bg-peach { background: linear-gradient(145deg, #FFD3BB, #FFE8D6); }
.pet-illus.bg-honey { background: linear-gradient(145deg, #FBE7BE, #FFF4DC); }
.pet-illus.bg-mint  { background: linear-gradient(145deg, #DCEFE7, #EFF6F1); }
.pet-illus.bg-sand  { background: linear-gradient(145deg, #F2E7D3, #FBF3E5); }
.pet-illus.bg-blue  { background: linear-gradient(145deg, #D4E5EE, #E9F1F5); }
.pet-illus.bg-rose  { background: linear-gradient(145deg, #F4D8CC, #FFE6D8); }
html[data-theme="dark"] .pet-illus { filter: brightness(.92) saturate(.95); }

.pet-card-body { padding: 13px 15px 15px; }
.pet-card-name { font-weight: 750; font-size: 15px; letter-spacing: -.01em; }
.pet-card-summary { color: var(--ink-3); }

.match-track { height: 6px; background: var(--surface-sunk); }
.match-fill { background: linear-gradient(90deg, var(--accent), #4FB89F); box-shadow: 0 0 8px -2px color-mix(in srgb, var(--accent) 60%, transparent); }
.match-fill.mid { background: linear-gradient(90deg, var(--highlight), #F0C770); }
.match-fill.low { background: linear-gradient(90deg, var(--risk), #E89A6A); }
.match-num { font-weight: 800; }

/* ---------------------------------------------------------------------------
   7 · QUIZ
   --------------------------------------------------------------------------- */
.quiz-card { border-radius: var(--r-2xl); box-shadow: var(--shadow-md); border: 1px solid var(--line); background: linear-gradient(180deg, var(--surface-2), var(--surface)); }
.quiz-progress .dot.cur { box-shadow: 0 0 0 4px var(--brand-glow); }
.quiz-q-title { font-family: var(--font-display); font-weight: 750; letter-spacing: -.02em; }

.quiz-option {
  border: 1.5px solid var(--line); border-radius: var(--r-md);
  background: var(--surface);
  transition: border-color .18s var(--ease), background .18s var(--ease), transform .18s var(--ease), box-shadow .2s var(--ease);
}
.quiz-option:hover { border-color: var(--line-strong); background: var(--surface-sunk); transform: translateY(-2px); box-shadow: var(--shadow-sm); }
.quiz-option.selected { background: var(--brand-soft); border-color: var(--brand); transform: translateY(-2px); box-shadow: 0 10px 22px -10px var(--brand-glow); }
.quiz-option-title { font-weight: 750; }
.quiz-option-check { border-radius: 50%; box-shadow: var(--shadow-xs); }

.quiz-calc-pulse { background: linear-gradient(135deg, var(--brand), var(--highlight)); box-shadow: 0 16px 34px -14px var(--brand-glow); }

/* ---------------------------------------------------------------------------
   8 · RESULT
   --------------------------------------------------------------------------- */
.result-label { font-family: var(--font-display); font-weight: 800; letter-spacing: -.028em; }
.result-label .brand { color: var(--brand); }
.result-label .italic { font-style: italic; color: var(--accent); }

.result-top1 {
  background: linear-gradient(180deg, var(--surface-2), var(--surface));
  border: 1px solid var(--line); border-radius: var(--r-2xl);
  box-shadow: var(--shadow-md);
}
.result-top1:hover { box-shadow: var(--shadow-lg); transform: translateY(-4px); }
.result-top1-image > svg { filter: drop-shadow(0 8px 14px rgba(72, 44, 18, .18)); }
.result-top1-rank-badge { background: var(--ink); color: var(--bg); box-shadow: var(--shadow-md); letter-spacing: .03em; }
.result-top1-score-badge { background: color-mix(in srgb, var(--surface) 86%, transparent); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); box-shadow: var(--shadow-md); }
.result-top1-name { font-family: var(--font-display); font-weight: 800; letter-spacing: -.02em; }

.result-hero-summary, .result-alternates-block, .result-block { border-radius: var(--r-lg); border: 1px solid var(--line); box-shadow: var(--shadow-xs); }
.result-tier { border-radius: var(--r-md); transition: transform .18s var(--ease), background .18s var(--ease), border-color .18s var(--ease), box-shadow .2s var(--ease); }
.result-tier:hover { transform: translateX(3px); box-shadow: var(--shadow-sm); }
.result-tier-rank, .result-hero-summary-row .rank-pill { box-shadow: var(--shadow-xs); }
.result-not-rec { border-radius: var(--r-lg); }

/* ---------------------------------------------------------------------------
   9 · DRAWER
   --------------------------------------------------------------------------- */
.drawer { border-radius: var(--r-2xl) 0 0 var(--r-2xl); box-shadow: var(--shadow-lg); background: var(--surface); }
@media (max-width: 600px) { .drawer { border-radius: var(--r-2xl) var(--r-2xl) 0 0; } }
.drawer-backdrop { background: color-mix(in srgb, var(--ink) 34%, transparent); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); }
.drawer-name { font-family: var(--font-display); font-weight: 800; letter-spacing: -.02em; }
.drawer-stat { background: var(--surface-sunk); border-radius: var(--r-md); }
.drawer-tag { background: var(--accent-soft); color: var(--accent-deep); font-weight: 700; }
.drawer-close { border-radius: 9px; transition: background .18s var(--ease), color .18s var(--ease), transform .18s var(--ease); }
.drawer-close:hover { transform: rotate(90deg); }

/* ---------------------------------------------------------------------------
   10 · DATABASE
   --------------------------------------------------------------------------- */
.db-filters { border-radius: var(--r-xl); border: 1px solid var(--line); box-shadow: var(--shadow-sm); background: linear-gradient(180deg, var(--surface-2), var(--surface)); }
.db-filter-item { border-radius: var(--r-sm); transition: background .15s var(--ease), color .15s var(--ease), padding-left .15s var(--ease); }
.db-filter-item:hover { padding-left: 13px; }
.db-filter-item.active { background: var(--brand-soft); color: var(--brand-ink); }
.db-filter-chip { border-radius: var(--r-pill); transition: transform .15s var(--ease), border-color .15s var(--ease), background .15s var(--ease); }
.db-filter-chip:hover { transform: translateY(-1px); }
.db-filter-chip.active { background: var(--accent-soft); color: var(--accent-deep); }
.db-search, .db-sort { border-radius: var(--r-md); box-shadow: var(--shadow-xs); transition: border-color .2s var(--ease), box-shadow .2s var(--ease); }
.db-search:focus-within { border-color: var(--brand); box-shadow: var(--ring-focus); }
.db-empty { border-radius: var(--r-lg); }

/* ---------------------------------------------------------------------------
   11 · TOOLS
   --------------------------------------------------------------------------- */
.tool-title { font-family: var(--font-display); font-weight: 800; letter-spacing: -.025em; }
.tool-form { border-radius: var(--r-xl); border: 1px solid var(--line); box-shadow: var(--shadow-sm); background: linear-gradient(180deg, var(--surface-2), var(--surface)); }
.tool-field select, .tool-field input[type="number"], .tool-field input[type="text"] {
  border-radius: var(--r-sm); background: var(--surface-sunk); transition: border-color .2s var(--ease), box-shadow .2s var(--ease), background .2s var(--ease);
}
.tool-field input:focus, .tool-field select:focus { outline: none; border-color: var(--brand); box-shadow: var(--ring-focus); background: var(--surface); }
.tool-result {
  border-radius: var(--r-xl);
  background:
    linear-gradient(135deg, var(--brand-soft), var(--highlight-soft)) padding-box,
    linear-gradient(135deg, var(--brand), var(--highlight)) border-box;
  border: 1.5px solid transparent;
  box-shadow: var(--shadow-md);
}
.tool-result-num { font-family: var(--font-display); font-weight: 800; letter-spacing: -.02em; }
.tool-tip { background: var(--accent-soft); border-radius: var(--r-md); }
.gauge, .tool-bcs-q, .tool-cost-section { border-radius: var(--r-lg); border: 1px solid var(--line); box-shadow: var(--shadow-xs); }
.gauge-pin { box-shadow: var(--shadow-sm); }
.tool-bcs-opt { border-radius: var(--r-md); transition: border-color .18s var(--ease), background .18s var(--ease), transform .18s var(--ease); }
.tool-bcs-opt:hover { transform: translateY(-1px); }
.tool-cost-total { border-radius: var(--r-md); }
.tool-cost-total.highlight { background: linear-gradient(135deg, var(--brand-soft), var(--highlight-soft)); border-color: var(--brand); }

/* Tool tiles - premium image cards */
.tool-tile { border-radius: var(--r-lg); box-shadow: var(--shadow-sm); transition: transform .32s var(--ease-out), box-shadow .32s var(--ease-out); will-change: transform; }
.tool-tile:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.tool-tile-bg { transition: transform .55s var(--ease-out); }
.tool-tile:hover .tool-tile-bg { transform: scale(1.05); }
.tool-tile-name { font-family: var(--font-display); font-weight: 750; letter-spacing: -.01em; }

/* ---------------------------------------------------------------------------
   12 · GUIDES
   --------------------------------------------------------------------------- */
.guide-card { border-radius: var(--r-xl); border: 1px solid var(--line); box-shadow: var(--shadow-sm); background: linear-gradient(180deg, var(--surface-2), var(--surface)); transition: transform .3s var(--ease-out), box-shadow .3s var(--ease-out), border-color .3s var(--ease-out); will-change: transform; }
.guide-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); border-color: color-mix(in srgb, var(--brand) 40%, var(--line)); }
.guide-card-img { border-radius: var(--r-md); overflow: hidden; }
.guide-card-img > * { transition: transform .55s var(--ease-out); }
.guide-card:hover .guide-card-img > * { transform: scale(1.05); }
.guide-card-title { font-family: var(--font-display); font-weight: 750; letter-spacing: -.015em; }
.guide-tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0; }
.guide-tag { display: inline-flex; align-items: center; border: 1px solid var(--line); border-radius: 999px; padding: 3px 9px; background: var(--brand-soft); color: var(--brand-ink); font-size: 11px; font-weight: 700; line-height: 1.25; }

/* ---------------------------------------------------------------------------
   13 · FOOTER / TOAST
   --------------------------------------------------------------------------- */
.app-footer {
  margin-top: clamp(48px, 8vw, 88px);
  border-top: 1px solid var(--line);
  background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--surface-sunk) 55%, transparent));
  color: var(--ink-3);
}
.toast { border-radius: var(--r-pill); box-shadow: var(--shadow-lg); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }

/* ---------------------------------------------------------------------------
   14 · MOTION PREP  (native motion layer drives these; CSS guarantees a safe visible fallback)
   --------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .pet-card, .tool-tile, .guide-card, .btn, .result-top1 { transition: none !important; }
}

/* The motion layer is fully progressive: #root is always visible by default
   and the native reveal only animates opacity/transform on top, so content can
   never stay hidden if the script fails to run. */

/* ---- Pet drawer: image-led profile hierarchy ---- */
.drawer {
  width: min(640px, 94vw);
  border-radius: 20px 0 0 20px;
}
.drawer-body {
  padding: 0;
  overscroll-behavior: contain;
  scrollbar-width: thin;
}
.drawer-hero {
  margin: 0;
  border-radius: 0;
  aspect-ratio: 16 / 9;
  background: var(--surface-sunk);
}
.drawer-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(31, 26, 23, .2), transparent 34%);
}
.drawer-hero-actions {
  position: absolute;
  z-index: 3;
  top: 16px;
  left: 18px;
  right: 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.drawer-tag {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 7px 12px;
  border: 1px solid color-mix(in srgb, var(--surface) 72%, transparent);
  border-radius: var(--r-pill);
  background: color-mix(in srgb, var(--surface) 88%, transparent);
  color: var(--ink);
  box-shadow: var(--shadow-sm);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.drawer-close {
  width: 40px;
  height: 40px;
  border: 1px solid color-mix(in srgb, var(--surface) 72%, transparent);
  border-radius: 50%;
  background: color-mix(in srgb, var(--surface) 88%, transparent);
  color: var(--ink);
  box-shadow: var(--shadow-sm);
  font-size: 24px;
  line-height: 1;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.drawer-close:hover { transform: none; background: var(--surface); }
.drawer-close:focus-visible { outline: none; box-shadow: var(--ring-focus), var(--shadow-sm); }
.drawer-content {
  position: relative;
  z-index: 2;
  margin-top: -26px;
  padding: 26px 28px 30px;
  border-radius: 20px 20px 0 0;
  background: var(--surface);
}
.drawer-titlerow {
  gap: 18px;
  margin-bottom: 0;
}
.drawer-titlecopy { min-width: 0; flex: 1; }
.drawer-name-line {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 7px 12px;
}
.drawer-name {
  font-family: var(--font-display);
  font-size: clamp(27px, 4vw, 34px);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: 0;
}
.drawer-en {
  font-size: 13px;
  color: var(--ink-3);
  line-height: 1.35;
}
.drawer-match {
  flex: 0 0 auto;
  min-width: 62px;
  padding: 7px 9px;
  border-radius: var(--r-md);
  background: var(--brand-soft);
  text-align: center;
}
.drawer-match-num { font-size: 20px; }
.drawer-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 10px;
}
.drawer-tags .chip {
  padding: 4px 9px;
  border: 0;
  font-size: 11px;
  line-height: 1.25;
}
.drawer-summary {
  max-width: 54ch;
  margin: 15px 0 18px;
  color: var(--ink-2);
  font-size: 14px;
  line-height: 1.7;
}
.drawer-beginner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 26px;
  padding: 13px 16px;
  border: 1px solid color-mix(in srgb, var(--highlight) 28%, var(--line));
  border-radius: var(--r-md);
  background: color-mix(in srgb, var(--highlight-soft) 65%, var(--surface));
  box-shadow: var(--shadow-xs);
}
.drawer-beginner-main { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.drawer-beginner-label { color: var(--brand); font-size: 13px; font-weight: 800; }
.drawer-beginner-stars { color: var(--highlight); font-size: 16px; letter-spacing: 0; white-space: nowrap; }
.drawer-beginner-main strong { font-family: var(--font-mono); color: var(--ink-2); font-size: 13px; }
.drawer-beginner-note { color: var(--ink-3); font-size: 12px; text-align: right; }
.drawer-info-section { margin: 0 0 27px; }
.drawer-info-title {
  margin: 0 0 14px;
  color: var(--ink);
  font-size: 17px;
  font-weight: 800;
  line-height: 1.25;
  letter-spacing: 0;
}
.drawer-quick-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--surface-2);
  box-shadow: var(--shadow-xs);
  overflow: hidden;
}
.drawer-quick-item {
  min-width: 0;
  padding: 16px 11px 15px;
  border-right: 1px solid var(--line);
  text-align: center;
}
.drawer-quick-item:last-child { border-right: 0; }
.drawer-quick-icon {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  margin: 0 auto 10px;
  border-radius: 50%;
  font-family: var(--font-mono);
  font-size: 18px;
  font-weight: 800;
}
.drawer-quick-icon.cost { color: var(--accent-deep); background: var(--accent-soft); }
.drawer-quick-icon.time { color: var(--highlight); background: var(--highlight-soft); }
.drawer-quick-icon.care { color: var(--brand); background: var(--brand-soft); }
.drawer-quick-icon.company { color: var(--risk); background: var(--risk-soft); }
.drawer-quick-item strong,
.drawer-quick-item span:not(.drawer-quick-icon),
.drawer-quick-item small { display: block; overflow-wrap: anywhere; }
.drawer-quick-item strong { color: var(--ink); font-size: 12px; line-height: 1.35; }
.drawer-quick-value { margin-top: 5px; color: var(--ink-2); font-size: 12px; font-weight: 700; }
.drawer-quick-item small { margin-top: 3px; color: var(--ink-3); font-size: 10.5px; line-height: 1.4; }
.drawer-facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 22px;
  margin: 0;
  padding: 4px 0;
}
.drawer-fact {
  display: grid;
  grid-template-columns: minmax(74px, .7fr) minmax(0, 1.3fr);
  align-items: baseline;
  gap: 10px;
  min-width: 0;
  padding: 10px 0;
  border-bottom: 1px solid var(--line);
}
.drawer-fact dt { color: var(--ink-3); font-size: 11px; }
.drawer-fact dd { margin: 0; color: var(--ink-2); font-size: 12.5px; font-weight: 700; overflow-wrap: anywhere; }
.drawer-care-steps {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.drawer-care-steps li {
  display: grid;
  grid-template-columns: 36px 1fr;
  align-items: center;
  gap: 10px;
  min-width: 0;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface-2);
}
.drawer-care-steps li > span {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--brand-soft);
  color: var(--brand);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 800;
}
.drawer-care-steps p { margin: 0; color: var(--ink-2); font-size: 12px; line-height: 1.5; }
.drawer-newbie { margin-bottom: 18px; }
.drawer-newbie-sub {
  margin: -6px 0 12px;
  color: var(--ink-3);
  font-size: 12px;
  line-height: 1.5;
}
.drawer-newbie-list p strong { color: var(--ink); font-weight: 800; }
.drawer-detail-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.drawer-detail-grid .drawer-section {
  margin: 0;
  padding: 14px 15px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface-2);
}
.drawer-section-title { letter-spacing: 0; }
.drawer-footer {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  gap: 9px;
  padding: 13px 22px;
  background: color-mix(in srgb, var(--surface) 94%, transparent);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.drawer-footer .btn { width: 100%; min-width: 0; }

@media (max-width: 600px) {
  .drawer {
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    max-width: none;
    height: 100vh;
    height: 100dvh;
    border-radius: 0;
  }
  .drawer-body {
    scrollbar-width: none;
    -ms-overflow-style: none;
  }
  .drawer-body::-webkit-scrollbar { display: none; width: 0; height: 0; }
  .drawer-hero { aspect-ratio: 16 / 9; }
  .drawer-content { padding: 23px 18px 24px; border-radius: 18px 18px 0 0; }
  .drawer-hero-actions { top: max(12px, env(safe-area-inset-top)); left: 14px; right: 14px; }
  .drawer-quick-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .drawer-quick-item:nth-child(2) { border-right: 0; }
  .drawer-quick-item:nth-child(-n + 2) { border-bottom: 1px solid var(--line); }
  .drawer-facts, .drawer-detail-grid { grid-template-columns: 1fr; }
  .drawer-care-steps { grid-template-columns: 1fr; }
  .drawer-beginner { align-items: flex-start; flex-direction: column; gap: 7px; }
  .drawer-beginner-note { text-align: left; }
  .drawer-footer { padding: 11px 14px max(11px, env(safe-area-inset-bottom)); }
}

@media (max-width: 390px) {
  .drawer-content { padding-inline: 15px; }
  .drawer-footer .btn { min-height: 42px; }
}

/* ============================================================
   TOOLS 2.0  ·  segmented (no-dropdown) controls, result-first
   Shared across age / weight / cost calculators.
   ============================================================ */
.tool-wrap { max-width: 920px !important; }
.tool-index-wrap { max-width: 1040px !important; }
.tool-index-hero {
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(260px,.45fr);
  gap:18px;
  align-items:stretch;
  margin-bottom:18px;
  padding: clamp(22px, 4vw, 34px);
  border:1px solid var(--line);
  border-radius: var(--r-xl);
  background:
    radial-gradient(100% 90% at 100% 0%, var(--highlight-soft), transparent 62%),
    linear-gradient(135deg, var(--surface-2), var(--surface));
  box-shadow: var(--shadow-sm);
}
.tool-index-proof {
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  gap:7px;
  min-height:150px;
  padding:16px;
  border:1px solid var(--line);
  border-radius: var(--r-lg);
  background: color-mix(in srgb, var(--surface) 78%, transparent);
}
.tool-index-proof b { color: var(--ink); font-family: var(--font-display); font-size:20px; line-height:1.2; }
.tool-index-proof span { color: var(--ink-3); font-size:13px; line-height:1.5; }
.tool-index-grid {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:14px;
}
.tool-action-card {
  position:relative;
  min-height:230px;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  gap:8px;
  padding:18px;
  overflow:hidden;
  border:1px solid var(--line);
  border-radius: var(--r-lg);
  color:inherit;
  text-decoration:none;
  background: linear-gradient(180deg, var(--surface-2), var(--surface));
  box-shadow: var(--shadow-sm);
  transition: transform 200ms var(--ease), border-color 200ms var(--ease), box-shadow 200ms var(--ease);
}
.tool-action-card:hover { transform: translateY(-4px); border-color: color-mix(in srgb, var(--brand) 42%, var(--line)); box-shadow: var(--shadow-md); }
.tool-action-card::before {
  content:"";
  position:absolute;
  inset:0;
  opacity:.9;
  background: radial-gradient(115% 90% at 80% 0%, var(--brand-soft), transparent 58%);
}
.tool-action-card.weight::before { background: radial-gradient(115% 90% at 80% 0%, var(--accent-soft), transparent 58%); }
.tool-action-card.cost::before { background: radial-gradient(115% 90% at 80% 0%, var(--highlight-soft), transparent 58%); }
.tool-action-card > * { position:relative; z-index:1; }
.tool-action-card .num {
  position:absolute;
  top:14px;
  left:14px;
  color: var(--brand-deep);
  font-family: var(--font-mono);
  font-weight:800;
  font-size:12px;
}
.tool-action-card .ic { font-size:44px; line-height:1; margin-bottom:auto; }
.tool-action-card b { color: var(--ink); font-family: var(--font-display); font-size:22px; line-height:1.15; }
.tool-action-card small { color: var(--ink-3); font-size:13px; line-height:1.5; }
.tool-index-note {
  display:flex;
  align-items:center;
  gap:12px;
  flex-wrap:wrap;
  margin-top:16px;
  padding:14px;
  border:1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--surface);
}
.tool-index-note b { color: var(--ink); }
.tool-index-note span { color: var(--ink-3); flex:1 1 280px; font-size:13px; }
@media (max-width:860px) {
  .tool-index-hero { grid-template-columns:1fr; }
  .tool-index-grid { grid-template-columns:1fr; }
  .tool-action-card { min-height:180px; }
}
.tool-head {
  position:relative;
  overflow:hidden;
  margin-bottom: 18px;
  padding: clamp(20px, 4vw, 30px);
  border:1px solid var(--line);
  border-radius: var(--r-xl);
  background:
    radial-gradient(120% 90% at 100% 0%, var(--highlight-soft), transparent 58%),
    linear-gradient(135deg, var(--surface-2), var(--surface));
  box-shadow: var(--shadow-sm);
}
.tool-head::after {
  content:"";
  position:absolute;
  left: clamp(18px, 3vw, 28px);
  right: clamp(18px, 3vw, 28px);
  bottom:0;
  height:3px;
  border-radius:999px 999px 0 0;
  background: linear-gradient(90deg, var(--brand), var(--highlight), var(--accent));
}
.tool-kicker {
  display:inline-flex; align-items:center; gap:7px;
  font-size:12px; font-weight:700; letter-spacing:.01em;
  color: var(--brand-deep); background: color-mix(in srgb, var(--brand-soft) 78%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--brand) 20%, var(--line));
  padding: 5px 12px; border-radius: var(--r-pill); margin-bottom: 12px;
}
.tool-h1 {
  font-family: var(--font-display); font-weight:700;
  font-size: clamp(30px, 5vw, 46px); line-height:1.04;
  letter-spacing:-.035em;
  color: var(--ink); margin: 0 0 8px;
}
.tool-lede { font-size:15px; color: var(--ink-2); margin:0; line-height:1.65; max-width: 68ch; }

.tool-lab {
  display:grid;
  grid-template-columns:minmax(230px,.38fr) minmax(0,1fr);
  gap:16px;
  align-items:start;
}
.tool-side {
  position:sticky;
  top:82px;
  overflow:hidden;
  border:1px solid var(--line);
  border-radius: var(--r-xl);
  padding:18px;
  background:
    radial-gradient(120% 80% at 100% 0%, var(--brand-soft), transparent 62%),
    linear-gradient(180deg, var(--surface-2), var(--surface));
  box-shadow: var(--shadow-sm);
}
.weight-lab .tool-side { background: radial-gradient(120% 80% at 100% 0%, var(--accent-soft), transparent 62%), linear-gradient(180deg, var(--surface-2), var(--surface)); }
.cost-lab .tool-side { background: radial-gradient(120% 80% at 100% 0%, var(--highlight-soft), transparent 62%), linear-gradient(180deg, var(--surface-2), var(--surface)); }
.tool-side-icon {
  display:grid;
  place-items:center;
  width:46px;
  height:46px;
  border-radius:15px;
  background: var(--surface);
  border:1px solid var(--line);
  box-shadow: var(--shadow-xs);
  font-size:24px;
  margin-bottom:14px;
}
.tool-side h2 {
  margin:0 0 8px;
  color: var(--ink);
  font-family: var(--font-display);
  font-size:22px;
  line-height:1.18;
  letter-spacing:-.018em;
}
.tool-side p {
  margin:0;
  color: var(--ink-2);
  font-size:13.5px;
  line-height:1.65;
}
.tool-side-list {
  display:grid;
  gap:7px;
  margin-top:14px;
}
.tool-side-list span {
  padding:8px 10px;
  border:1px solid var(--line);
  border-radius: var(--r-pill);
  background: color-mix(in srgb, var(--surface) 82%, transparent);
  color: var(--ink-2);
  font-size:12.5px;
  line-height:1.35;
}
.tool-main { min-width:0; }
@media (max-width:820px) {
  .tool-lab { grid-template-columns:1fr; }
  .tool-side { position:relative; top:auto; }
}

/* result display card (sits on top like a calculator screen) */
.tres {
  position:relative; overflow:hidden;
  background:
    radial-gradient(120% 100% at 100% 10%, color-mix(in srgb, var(--highlight-soft) 80%, transparent), transparent 58%),
    linear-gradient(135deg, var(--brand-soft), var(--surface));
  border:1px solid var(--line); border-radius: var(--r-xl);
  padding: clamp(20px, 3vw, 26px); margin: 16px 0;
  box-shadow: var(--shadow-sm);
}
.tres::after {
  content:"";
  position:absolute;
  right:-36px;
  bottom:-52px;
  width:150px;
  height:150px;
  border-radius:50%;
  background: color-mix(in srgb, var(--brand) 9%, transparent);
}
.tres-eyebrow { font-size:12px; font-weight:700; letter-spacing:.04em; color: var(--brand-ink); margin-bottom:3px; }
.tres-big {
  font-family: var(--font-display); font-weight:700; line-height:1;
  font-size: clamp(40px, 8.5vw, 58px); color: var(--ink); margin:2px 0 4px;
  position:relative; z-index:1;
}
.tres-big small { font-size:.4em; font-weight:600; color: var(--ink-3); font-family: var(--font-body); }
.tres-sub { position:relative; z-index:1; font-size:13.5px; color: var(--ink-2); }
.tres-duo { display:grid; grid-template-columns: 1fr 1fr; gap:16px; }
.tres-duo .lab { font-size:11.5px; font-weight:700; letter-spacing:.03em; color: var(--brand-ink); margin-bottom:2px; line-height:1.3; }
.tres-duo .val { font-family: var(--font-display); font-weight:700; font-size: clamp(24px,5.6vw,36px); line-height:1; color: var(--ink); }
.tres-duo .val small { font-size:.5em; font-weight:600; color: var(--ink-3); font-family: var(--font-body); }
@media (max-width:430px){ .tres-duo{ grid-template-columns:1fr; gap:12px; } }
.tres-mini { display:flex; flex-wrap:wrap; gap:8px; margin-top:14px; }
.tres-mini > div { flex:1 1 110px; background: rgba(255,255,255,.46); border:1px solid rgba(255,255,255,.55); border-radius: var(--r-md); padding:9px 12px; }
html[data-theme="dark"] .tres-mini > div { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.08); }
.tres-mini .l { font-size:10.5px; color: var(--brand-ink); font-weight:600; }
.tres-mini .v { font-family: var(--font-mono); font-weight:700; font-size:16px; color: var(--ink); }
.tres .gauge { background:transparent !important; border:none !important; padding:8px 0 0 !important; margin:14px 0 0 !important; }

/* segmented pill control */
.tgroup { margin-bottom:16px; }
.tgroup-lab { font-size:12px; font-weight:700; color: var(--ink-3); margin-bottom:8px; display:flex; gap:8px; align-items:baseline; }
.tgroup-lab small { font-weight:500; font-size:11px; color: var(--ink-3); }
.tseg { display:flex; flex-wrap:wrap; gap:8px; }
.tseg > button {
  appearance:none; -webkit-appearance:none; cursor:pointer;
  font-family: var(--font-body); font-weight:600; font-size:14px; line-height:1.15;
  color: var(--ink-2); background: var(--surface);
  border:1.5px solid var(--line); border-radius: var(--r-pill);
  padding:9px 16px; display:inline-flex; flex-direction:column; align-items:center; gap:1px;
  transition: transform 110ms var(--ease), border-color 150ms var(--ease), background 150ms var(--ease), color 150ms var(--ease), box-shadow 150ms var(--ease);
}
.tseg > button small { font-weight:500; font-size:10.5px; color: var(--ink-3); }
.tseg > button:hover { border-color: var(--brand); color: var(--ink); }
.tseg > button:active { transform: translateY(1px); }
.tseg > button[aria-pressed="true"] { border-color: var(--brand); background: var(--brand-soft); color: var(--brand-deep); box-shadow: 0 3px 10px -5px var(--brand); }
.tseg > button[aria-pressed="true"] small { color: var(--brand-deep); }
.tseg.tseg-emoji > button { font-size:21px; padding:8px 15px; gap:2px; min-width:54px; }
.tseg.tseg-emoji > button small { font-size:11px; }

/* control container card */
.tcard {
  background: linear-gradient(180deg, var(--surface), var(--surface-2));
  border:1px solid var(--line);
  border-radius: var(--r-lg);
  padding:18px;
  margin-bottom:14px;
  box-shadow: var(--shadow-xs);
}
.topt-head { font-size:11px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color: var(--ink-3); margin:0 0 12px; display:flex; align-items:center; gap:9px; }
.topt-head::after { content:""; flex:1; height:1px; background: var(--line); }

/* number + range inputs */
.tnum-wrap { display:flex; align-items:center; gap:14px; flex-wrap:wrap; }
.tnum { font-family: var(--font-mono); font-weight:700; font-size:17px; width:100px; text-align:center; padding:10px 12px; color: var(--ink); background: var(--surface-sunk); border:1.5px solid var(--line); border-radius: var(--r-md); }
.tnum:focus { outline:2px solid var(--brand); outline-offset:1px; }
.trange { flex:1 1 170px; accent-color: var(--brand); height:6px; cursor:pointer; }

/* weight question cards */
.wq {
  background: linear-gradient(180deg, var(--surface), var(--surface-2));
  border:1px solid var(--line);
  border-radius: var(--r-lg);
  padding:16px;
  margin-bottom:12px;
  box-shadow: var(--shadow-xs);
}
.wq-t { font-weight:700; font-size:14.5px; color: var(--ink); margin-bottom:4px; display:flex; gap:9px; align-items:center; }
.wq-t .n { flex:none; width:22px; height:22px; border-radius:50%; background: var(--brand-soft); color: var(--brand-deep); font-size:12px; font-weight:800; display:grid; place-items:center; font-family: var(--font-mono); }
.wq-hint { font-size:11.5px; color: var(--ink-3); margin:0 0 11px 31px; }
.wq-opts { display:flex; flex-direction:column; gap:7px; }
.wq-opt { cursor:pointer; display:flex; align-items:center; gap:11px; padding:11px 13px; font-size:13.5px; color: var(--ink-2); background: var(--surface-sunk); border:1.5px solid var(--line); border-radius: var(--r-md); transition: all 140ms var(--ease); }
.wq-opt:hover { border-color: var(--brand); background: var(--brand-soft); }
.wq-opt[aria-pressed="true"] { border-color: var(--brand); background: var(--brand-soft); color: var(--brand-deep); font-weight:600; }
.wq-opt .dot { flex:none; width:16px; height:16px; border-radius:50%; border:2px solid var(--line-strong); transition: all 140ms var(--ease); }
.wq-opt[aria-pressed="true"] .dot { border-color: var(--brand); background: var(--brand); box-shadow: inset 0 0 0 3px var(--surface); }

/* notes */
.tnote { background: var(--accent-soft); border-radius: var(--r-md); padding:12px 14px; font-size:13px; color: var(--ink-2); line-height:1.6; margin:14px 0 10px; }
.tnote.warn { background: var(--risk-soft); color: var(--risk); font-size:11.5px; text-align:center; }
.tfine { font-size:11px; color: var(--ink-3); text-align:center; line-height:1.5; margin-top:8px; padding:0 6px; }

/* cost breakdown bars */
.cbd { display:flex; flex-direction:column; gap:9px; }
.cbd-row { display:grid; grid-template-columns: minmax(96px, 1fr) 1.3fr auto; gap:10px; align-items:center; }
.cbd-row .lab { font-size:13px; color: var(--ink-2); white-space:nowrap; }
.cbd-row .track { height:8px; border-radius:999px; background: var(--surface-sunk); overflow:hidden; }
.cbd-row .track > i { display:block; height:100%; border-radius:999px; background: linear-gradient(90deg, var(--brand), var(--highlight)); transition: width 380ms var(--ease); }
.cbd-row .amt { font-family: var(--font-mono); font-weight:600; font-size:13px; color: var(--ink); text-align:right; min-width:60px; }

/* jump-to-other-tool chips */
.tjump { display:flex; flex-wrap:wrap; gap:8px; margin-top:22px; }
.tjump a { font-size:13px; padding:8px 14px; }

/* ============================================================
   HOME  ·  compact decision flow
   ============================================================ */
.cc-home-flow {
  display:grid;
  grid-template-columns:minmax(0, 1.35fr) minmax(280px, .65fr);
  gap:16px;
  align-items:stretch;
  padding-top: clamp(18px, 3.6vw, 30px);
  padding-bottom: clamp(18px, 3.6vw, 30px);
}
.cc-flow-card,
.cc-think-mini {
  position:relative;
  overflow:hidden;
  border:1px solid var(--line);
  border-radius: var(--r-xl);
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--surface-2) 72%, transparent), var(--surface)),
    var(--surface);
  box-shadow: var(--shadow-sm);
}
.cc-flow-card { padding: clamp(18px, 3vw, 24px); }
.cc-flow-card::before {
  content:"";
  position:absolute;
  inset:auto 24px 0 24px;
  height:3px;
  border-radius:999px 999px 0 0;
  background: linear-gradient(90deg, var(--brand), var(--highlight), var(--accent));
  opacity:.9;
}
.cc-flow-head {
  display:flex;
  justify-content:space-between;
  gap:18px;
  align-items:flex-start;
  margin-bottom:16px;
}
.cc-flow-head .section-title { margin:0; max-width:18ch; }
.cc-flow-head p {
  margin:4px 0 0;
  color: var(--ink-3);
  font-size:13.5px;
  line-height:1.55;
  max-width:28ch;
}
.cc-flow-kicker {
  margin:0 0 6px;
  color: var(--brand-deep);
  font-size:12px;
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.cc-flow-steps {
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap:9px;
}
.cc-flow-step {
  min-height:126px;
  display:flex;
  flex-direction:column;
  gap:5px;
  padding:14px;
  border:1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface-sunk);
  color: inherit;
  text-decoration:none;
  transition: transform 180ms var(--ease), border-color 180ms var(--ease), background 180ms var(--ease), box-shadow 180ms var(--ease);
}
.cc-flow-step:hover {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--brand) 42%, var(--line));
  background: var(--brand-soft);
  box-shadow: var(--shadow-xs);
}
.cc-flow-step span {
  width:28px;
  height:28px;
  display:grid;
  place-items:center;
  border-radius:50%;
  background: var(--surface);
  color: var(--brand-deep);
  border:1px solid var(--line);
  font-family: var(--font-mono);
  font-size:11px;
  font-weight:800;
}
.cc-flow-step b {
  margin-top:5px;
  color: var(--ink);
  font-family: var(--font-display);
  font-size:18px;
  line-height:1.15;
}
.cc-flow-step small {
  color: var(--ink-3);
  font-size:12.5px;
  line-height:1.45;
}
.cc-think-mini {
  padding: clamp(18px, 3vw, 22px);
  background:
    radial-gradient(120% 80% at 100% 0%, var(--accent-soft), transparent 58%),
    linear-gradient(180deg, var(--surface-2), var(--surface));
}
.cc-think-mini h3 {
  margin:0 0 12px;
  color: var(--ink);
  font-family: var(--font-display);
  font-size: clamp(20px, 2.5vw, 24px);
  line-height:1.18;
}
.cc-think-mini-grid { display:grid; gap:8px; }
.cc-think-mini-grid a {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:10px 12px;
  border:1px solid var(--line);
  border-radius: var(--r-pill);
  background: color-mix(in srgb, var(--surface) 86%, transparent);
  color: inherit;
  text-decoration:none;
  transition: transform 160ms var(--ease), border-color 160ms var(--ease), background 160ms var(--ease);
}
.cc-think-mini-grid a:hover {
  transform: translateY(-1px);
  border-color: var(--accent);
  background: var(--surface);
}
.cc-think-mini-grid b { color: var(--ink); font-size:14px; }
.cc-think-mini-grid span { color: var(--ink-3); font-size:12px; text-align:right; }
@media (max-width:860px) {
  .cc-home-flow { grid-template-columns:1fr; }
}
@media (max-width:640px) {
  .cc-flow-head { display:block; }
  .cc-flow-head .section-title { max-width:none; }
  .cc-flow-head p { max-width:none; }
  .cc-flow-steps { grid-template-columns:1fr; }
  .cc-flow-step { min-height:auto; }
}

.cc-cta-banner { text-align:center; background: linear-gradient(135deg, var(--brand-soft), var(--highlight-soft)); border:1px solid var(--line); border-radius: var(--r-xl); padding:32px 24px; }
.cc-cta-banner h2 { font-family: var(--font-display); font-weight:700; font-size: clamp(22px,3.6vw,30px); color: var(--ink); margin:0 auto 8px; max-width:20ch; line-height:1.25; }
.cc-cta-banner .hl { color: var(--brand); }
.cc-cta-banner p { font-size:14px; color: var(--ink-2); margin:0 auto 18px; max-width:42ch; line-height:1.55; }
.cc-cta-banner .home-cta-row { justify-content:center; }

/* ===========================================================================
   SELF-HOSTED TYPE SYSTEM  ·  ChanPet 暖金画廊 / Warm Atelier
   Free, commercial-use pairing, subset to the site's glyph set + Latin/Latin-ext.
   Noto Serif SC  -> bilingual display voice (editorial, gilded)
   Noto Sans SC   -> CJK body
   Manrope        -> Latin body (variable 400-700)
   JetBrains Mono -> data / figures / scores
   font-display:swap so text is never blocked; CJK files carry Latin too, so
   headings stay one cohesive face across 中文 + English. Missing glyphs fall
   through per-glyph to the system CJK stack (no tofu).
   =========================================================================== */
@font-face{font-family:"Manrope";font-style:normal;font-weight:400 700;font-display:swap;
  src:url("/assets/fonts/Manrope-var.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:"Manrope";font-style:normal;font-weight:400 700;font-display:swap;
  src:url("/assets/fonts/Manrope-var-ext.woff2") format("woff2");
  unicode-range:U+0100-024F,U+0259,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:"JetBrains Mono";font-style:normal;font-weight:400;font-display:swap;
  src:url("/assets/fonts/JetBrainsMono-400.woff2") format("woff2");}
@font-face{font-family:"JetBrains Mono";font-style:normal;font-weight:700;font-display:swap;
  src:url("/assets/fonts/JetBrainsMono-700.woff2") format("woff2");}
@font-face{font-family:"Noto Serif SC";font-style:normal;font-weight:500;font-display:swap;
  src:url("/assets/fonts/NotoSerifSC-500.woff2") format("woff2");}
@font-face{font-family:"Noto Serif SC";font-style:normal;font-weight:700;font-display:swap;
  src:url("/assets/fonts/NotoSerifSC-700.woff2") format("woff2");}
@font-face{font-family:"Noto Sans SC";font-style:normal;font-weight:400;font-display:swap;
  src:url("/assets/fonts/NotoSansSC-400.woff2") format("woff2");}
@font-face{font-family:"Noto Sans SC";font-style:normal;font-weight:700;font-display:swap;
  src:url("/assets/fonts/NotoSansSC-700.woff2") format("woff2");}

/* ###########################################################################
   ##  CHANPET VISUAL UPGRADE  ·  暖金画廊 / Warm Atelier (light) + 漆金夜境 /
   ##  Lacquer & Gold (dark).  Appended last so it governs the cascade.
   ##  Self-hosted type + enriched palette + layered "gallery" background.
   ##  Brand accent (burnt orange) stays the locked hero; jade + gilded gold
   ##  are the established supporting tones, deepened. WCAG AA held in both.
   ########################################################################### */

/* ---- enriched LIGHT tokens + self-hosted type ---------------------------- */
/* enriched LIGHT tokens folded into the canonical token block above (deduplicated) */
/* ---- enriched DARK tokens (manual toggle, existing mechanism) ------------- */
html[data-theme="dark"]{
  --bg:#15100B; --surface:#221A12; --surface-sunk:#1B140D;
  --ink:#F4EBDD; --ink-2:#D6C7B4; --ink-3:#9C8B76;
  --line:#37291C; --line-strong:#4A3725;
  --brand:#FF9466; --brand-deep:#FF7A3C; --brand-soft:#3A2015; --brand-ink:#FFD3B8;
  --accent:#5BBBA3; --accent-deep:#2E7D6B; --accent-soft:#16271F;
  --highlight:#ECC25E; --highlight-soft:#2A2113;
  --risk:#F08A52; --risk-soft:#2E1B11;
  --gold:#ECC25E; --gold-bright:#F4D27A;
  --shadow-sm:0 1px 2px rgba(0,0,0,.40);
  --shadow-md:0 10px 26px -12px rgba(0,0,0,.62), 0 2px 8px rgba(0,0,0,.30);
  --shadow-lg:0 30px 64px -24px rgba(0,0,0,.74);
}

/* ---- the "gallery" canvas: layered base gradient on the root ------------- */
html{
  background-color:var(--bg);
  background-image:
    radial-gradient(125% 80% at 6% -10%, rgba(255,170,120,.18), transparent 56%),
    radial-gradient(120% 78% at 102% 2%, rgba(54,150,128,.11), transparent 55%),
    radial-gradient(135% 95% at 50% 116%, rgba(232,184,75,.13), transparent 62%),
    linear-gradient(168deg,#FBF6EE 0%,#F6EEE0 52%,#F1E6D4 100%);
}
html[data-theme="dark"]{
  background-image:
    radial-gradient(125% 80% at 6% -10%, rgba(255,122,60,.16), transparent 56%),
    radial-gradient(120% 78% at 102% 2%, rgba(60,170,140,.12), transparent 55%),
    radial-gradient(135% 95% at 50% 116%, rgba(232,184,75,.10), transparent 62%),
    linear-gradient(168deg,#181109 0%,#13100B 56%,#100B07 100%);
}
/* let the canvas show through; cards/nav stay opaque for contrast */
body{ background:transparent; font-family:var(--font-body); }
body::after{
  content:""; position:fixed; inset:0; z-index:2147483000; pointer-events:none;
  opacity:.030; mix-blend-mode:multiply; background-size:160px 160px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
html[data-theme="dark"] body::after{ mix-blend-mode:screen; opacity:.024; }

/* ---- type polish: gilded display, refined figures ------------------------ */
h1,h2,h3,h4,.section-title,.app-logo{ font-family:var(--font-display); }
h1{ letter-spacing:-.012em; }
.app-logo{ letter-spacing:0; }
.tool-result-num,.result-top1-name,.tool-tile-name b,.stat-num,[class*="-num"]{ font-feature-settings:"tnum" 1,"ss01" 1; }
/* a whisper of gold on primary brand emphasis in display headings */
.section-eyebrow,.eyebrow{ color:var(--brand-deep); }

/* ---- translucent nav tuned to the new canvas ----------------------------- */
.app-nav{ background:color-mix(in srgb, var(--bg) 80%, transparent); border-bottom:1px solid color-mix(in srgb,var(--line) 80%, transparent); }
html[data-theme="dark"] .app-nav{ background:color-mix(in srgb, var(--bg) 76%, transparent); }

/* ---- accessibility: skip-link + noscript notice -------------------------- */
.skip-link{
  position:fixed; left:50%; top:-60px; transform:translateX(-50%);
  z-index:2147483600; padding:10px 18px; border-radius:0 0 12px 12px;
  background:var(--brand-deep); color:#fff; font-weight:700; font-size:14px;
  box-shadow:var(--shadow-md); transition:top .18s var(--ease);
}
.skip-link:focus{ top:0; outline:3px solid var(--highlight); outline-offset:2px; }
.noscript-note{
  margin:0; padding:14px 18px; text-align:center; font-size:14px; line-height:1.6;
  background:var(--brand-soft); color:var(--brand-ink);
  border-bottom:1px solid var(--line-strong);
}
.noscript-note a{ color:var(--brand-deep); font-weight:700; text-decoration:underline; text-underline-offset:2px; }


/* --- WCAG AA: accessible primary-button text/gradient (added in polish pass) --------
   Light: deepen the coral gradient just enough that white text clears 4.5:1 across the
   whole button (the old #FB6A2C start only reached 2.9:1). Dark: the brand is a light
   coral in dark mode, so white text failed (2.6:1) - switch to dark ink (~7:1) and keep
   the vibrant fill. Applies to hover too so every state stays compliant. */
html:not([data-theme="dark"]) .btn-primary,
html:not([data-theme="dark"]) .btn-primary:hover { background: linear-gradient(135deg, #CC4A17, #BC4310); }
html[data-theme="dark"] .btn-primary,
html[data-theme="dark"] .btn-primary:hover { color: #1b0f07; }
html[data-theme="dark"] .btn-primary:hover { background: linear-gradient(135deg, var(--brand), var(--brand-deep)); }


/* --- WCAG AA (dark): app.js injects a near-white overlay for the card compare-toggle
   (.cp-cmp-btn background: rgba(255,255,255,.94)); in dark that leaves light text on a
   light chip. Higher-specificity override flips it to a dark glass chip. ------------- */
html[data-theme="dark"] .cp-cmp-btn { background: rgba(28,21,15,.90); border-color: var(--line-strong); color: var(--ink-2); }
html[data-theme="dark"] .cp-cmp-btn .cp-cmp-box { border-color: var(--line-strong); }


/* --- WCAG AA (dark): fixes for two runtime-styled controls on the pets browser ---------
   1) .tseg option buttons have no explicit fill, so they inherit the UA "buttonface"
      light-grey - invisible in dark. Give them a real surface (dark only; light keeps its
      look). 2) nudge the accent chip text lighter so 11px labels clear 4.5:1. */
html[data-theme="dark"] .tseg > button { background: var(--surface-2); border: 1px solid var(--line); color: var(--ink-2); }
html[data-theme="dark"] .tseg > button small { color: var(--ink-3); }
html[data-theme="dark"] .chip.chip-accent, html[data-theme="dark"] .chip-accent { color: #6FD3BB; }


/* dark: the per-card species badge is injected with an inline near-white glass
   (background:rgba(255,255,255,.92)); in dark its inherited light text vanishes.
   Precisely retint just those badges to a dark glass. */
html[data-theme="dark"] .pet-card-img span[style*="255,255,255"] { background: rgba(20,14,9,.82) !important; color: var(--ink) !important; }


/* --- dark: illustration tiles ship light pastel fills (.pet-illus.bg-*); retint them into
   the dark palette so the cards belong to the dark theme. Colour emoji stays legible. --- */
html[data-theme="dark"] .pet-illus.bg-cream { background: linear-gradient(145deg,#3A2A1C,#2A1E14); }
html[data-theme="dark"] .pet-illus.bg-sage  { background: linear-gradient(145deg,#1E3129,#172620); }
html[data-theme="dark"] .pet-illus.bg-peach { background: linear-gradient(145deg,#3C2A20,#2C1E16); }
html[data-theme="dark"] .pet-illus.bg-honey { background: linear-gradient(145deg,#362B18,#271E12); }
html[data-theme="dark"] .pet-illus.bg-mint  { background: linear-gradient(145deg,#16302A,#112420); }
html[data-theme="dark"] .pet-illus.bg-sand  { background: linear-gradient(145deg,#322717,#251C11); }
html[data-theme="dark"] .pet-illus.bg-blue  { background: linear-gradient(145deg,#1E2C36,#16212A); }
html[data-theme="dark"] .pet-illus.bg-rose  { background: linear-gradient(145deg,#38241E,#291A15); }
/* dark: the ::before "studio highlight" is a bright white radial tuned for the light
   pastel tiles; on the dark tiles it reads as a glossy spot. Drop the white highlight
   and keep only a whisper of bottom vignette so the tiles still have depth. */
html[data-theme="dark"] .pet-illus::before {
  background: radial-gradient(120% 90% at 50% 120%, rgba(0,0,0,.20), transparent 62%);
}


/* light: active filter-item count (brand-deep on brand-soft pill) was 4.24:1 - deepen the
   numerals slightly to clear AA. Dark keeps the token (already compliant on the dark pill). */
html:not([data-theme="dark"]) .db-filter-item.active .count { color: #A8380E; }


/* light: brand/risk text sitting on its own soft tint measured ~4.2:1 (active tool toggles,
   active filter count, warning notes). Deepen just those text colours to clear AA. */
html:not([data-theme="dark"]) .tseg > button[aria-pressed="true"],
html:not([data-theme="dark"]) .tseg > button[aria-pressed="true"] small,
html:not([data-theme="dark"]) .db-filter-item.active .count { color: #A8380E; }
html:not([data-theme="dark"]) .tnote.warn { color: #A63811; }


/* light: the highlighted word inside the CTA banner was brand-orange on a brand-soft
   gradient (~2.1:1). Deepen it in light so it still reads as the accent but clears AA.
   (Dark keeps var(--brand): light coral on the dark banner is already high-contrast.) */
html:not([data-theme="dark"]) .cc-cta-banner .hl { color: #A8380E; }


/* ============================================================================
   REFINEMENT LAYER (additive, colour-neutral) - typographic finish
   finish. The app already carries ambient glows on <html> + grain in body::after,
   so this layer stays purely typographic.
   ============================================================================ */
:where(h1,h2,h3,h4,h5,.section-title,.hero-title,.result-top1-name,.tool-tile-name){ text-wrap:balance; }
:where(p,li,dd,figcaption,blockquote,.lede,.sub,.tool-note,.footer-discl){ text-wrap:pretty; }
:where(h2,h3,[id]){ scroll-margin-top:88px; }



/* cp-cat-icons shared */
.cico{display:inline-block;width:1.05em;height:1.05em;vertical-align:-.17em;background-color:currentColor;-webkit-mask:center/contain no-repeat;mask:center/contain no-repeat;opacity:.88;flex:none}
.cico-ct{-webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M5.2%204.3%209.4%208a7.2%207.2%200%200%201%205.2%200l4.2-3.7%20.3%205.1a7%207%200%201%201-14%200z%22%2F%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2213.2%22%20r%3D%226.6%22%2F%3E%3C%2Fsvg%3E");mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M5.2%204.3%209.4%208a7.2%207.2%200%200%201%205.2%200l4.2-3.7%20.3%205.1a7%207%200%201%201-14%200z%22%2F%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2213.2%22%20r%3D%226.6%22%2F%3E%3C%2Fsvg%3E")}
.cico-dg{-webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cellipse%20cx%3D%225.4%22%20cy%3D%2212.4%22%20rx%3D%222.7%22%20ry%3D%225%22%2F%3E%3Cellipse%20cx%3D%2218.6%22%20cy%3D%2212.4%22%20rx%3D%222.7%22%20ry%3D%225%22%2F%3E%3Cpath%20d%3D%22M12%205.6c3.4%200%206%202.7%206%206.2%200%203.9-2.7%207-6%207s-6-3.1-6-7c0-3.5%202.6-6.2%206-6.2z%22%2F%3E%3C%2Fsvg%3E");mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cellipse%20cx%3D%225.4%22%20cy%3D%2212.4%22%20rx%3D%222.7%22%20ry%3D%225%22%2F%3E%3Cellipse%20cx%3D%2218.6%22%20cy%3D%2212.4%22%20rx%3D%222.7%22%20ry%3D%225%22%2F%3E%3Cpath%20d%3D%22M12%205.6c3.4%200%206%202.7%206%206.2%200%203.9-2.7%207-6%207s-6-3.1-6-7c0-3.5%202.6-6.2%206-6.2z%22%2F%3E%3C%2Fsvg%3E")}
.cico-sp{-webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cellipse%20cx%3D%229%22%20cy%3D%226.6%22%20rx%3D%221.9%22%20ry%3D%224.7%22%2F%3E%3Cellipse%20cx%3D%2213.6%22%20cy%3D%226.4%22%20rx%3D%221.9%22%20ry%3D%224.7%22%2F%3E%3Ccircle%20cx%3D%2211.4%22%20cy%3D%2215%22%20r%3D%226.1%22%2F%3E%3C%2Fsvg%3E");mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cellipse%20cx%3D%229%22%20cy%3D%226.6%22%20rx%3D%221.9%22%20ry%3D%224.7%22%2F%3E%3Cellipse%20cx%3D%2213.6%22%20cy%3D%226.4%22%20rx%3D%221.9%22%20ry%3D%224.7%22%2F%3E%3Ccircle%20cx%3D%2211.4%22%20cy%3D%2215%22%20r%3D%226.1%22%2F%3E%3C%2Fsvg%3E")}
.cico-fs{-webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M3.2%2012c2-4%205.8-6.2%208.9-6.2%203.5%200%206.1%202.6%206.1%206.2s-2.6%206.2-6.1%206.2C9%2018.2%205.2%2016%203.2%2012z%22%2F%3E%3Cpath%20d%3D%22M18%2012%2023%208.2v7.6z%22%2F%3E%3C%2Fsvg%3E");mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M3.2%2012c2-4%205.8-6.2%208.9-6.2%203.5%200%206.1%202.6%206.1%206.2s-2.6%206.2-6.1%206.2C9%2018.2%205.2%2016%203.2%2012z%22%2F%3E%3Cpath%20d%3D%22M18%2012%2023%208.2v7.6z%22%2F%3E%3C%2Fsvg%3E")}
.cico-rp{-webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%225.2%22%20r%3D%222.7%22%2F%3E%3Cellipse%20cx%3D%2212%22%20cy%3D%2212.4%22%20rx%3D%223.1%22%20ry%3D%226.1%22%2F%3E%3Cpath%20d%3D%22M11%2017.6h2l-1%205.2z%22%2F%3E%3Cellipse%20cx%3D%227%22%20cy%3D%229.3%22%20rx%3D%222.5%22%20ry%3D%221.5%22%20transform%3D%22rotate%28-32%207%209.3%29%22%2F%3E%3Cellipse%20cx%3D%2217%22%20cy%3D%229.3%22%20rx%3D%222.5%22%20ry%3D%221.5%22%20transform%3D%22rotate%2832%2017%209.3%29%22%2F%3E%3Cellipse%20cx%3D%227.2%22%20cy%3D%2215.2%22%20rx%3D%222.5%22%20ry%3D%221.5%22%20transform%3D%22rotate%2832%207.2%2015.2%29%22%2F%3E%3Cellipse%20cx%3D%2216.8%22%20cy%3D%2215.2%22%20rx%3D%222.5%22%20ry%3D%221.5%22%20transform%3D%22rotate%28-32%2016.8%2015.2%29%22%2F%3E%3C%2Fsvg%3E");mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%225.2%22%20r%3D%222.7%22%2F%3E%3Cellipse%20cx%3D%2212%22%20cy%3D%2212.4%22%20rx%3D%223.1%22%20ry%3D%226.1%22%2F%3E%3Cpath%20d%3D%22M11%2017.6h2l-1%205.2z%22%2F%3E%3Cellipse%20cx%3D%227%22%20cy%3D%229.3%22%20rx%3D%222.5%22%20ry%3D%221.5%22%20transform%3D%22rotate%28-32%207%209.3%29%22%2F%3E%3Cellipse%20cx%3D%2217%22%20cy%3D%229.3%22%20rx%3D%222.5%22%20ry%3D%221.5%22%20transform%3D%22rotate%2832%2017%209.3%29%22%2F%3E%3Cellipse%20cx%3D%227.2%22%20cy%3D%2215.2%22%20rx%3D%222.5%22%20ry%3D%221.5%22%20transform%3D%22rotate%2832%207.2%2015.2%29%22%2F%3E%3Cellipse%20cx%3D%2216.8%22%20cy%3D%2215.2%22%20rx%3D%222.5%22%20ry%3D%221.5%22%20transform%3D%22rotate%28-32%2016.8%2015.2%29%22%2F%3E%3C%2Fsvg%3E")}
.cico-bd{-webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cellipse%20cx%3D%2211.5%22%20cy%3D%2213.4%22%20rx%3D%226.3%22%20ry%3D%224.7%22%2F%3E%3Ccircle%20cx%3D%2217%22%20cy%3D%227.8%22%20r%3D%223%22%2F%3E%3Cpath%20d%3D%22M19.4%206%2023.4%205.2%2019.7%208.2z%22%2F%3E%3Cpath%20d%3D%22M6%2013.6%201.6%2011.2%206.4%2015.4z%22%2F%3E%3C%2Fsvg%3E");mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cellipse%20cx%3D%2211.5%22%20cy%3D%2213.4%22%20rx%3D%226.3%22%20ry%3D%224.7%22%2F%3E%3Ccircle%20cx%3D%2217%22%20cy%3D%227.8%22%20r%3D%223%22%2F%3E%3Cpath%20d%3D%22M19.4%206%2023.4%205.2%2019.7%208.2z%22%2F%3E%3Cpath%20d%3D%22M6%2013.6%201.6%2011.2%206.4%2015.4z%22%2F%3E%3C%2Fsvg%3E")}
.card .hero .cico{width:42px;height:42px;opacity:.9}

/* cp-dark-share-modal: make JS share/poster overlay dark-aware (overrides inline light styles) */
html[data-theme="dark"] #share-card-preview>div{background:#241B14!important;box-shadow:0 30px 90px rgba(0,0,0,.55)!important}
html[data-theme="dark"] #share-card-preview [style*="font-size:20px"]{color:#F5E9DE!important}
html[data-theme="dark"] #share-card-preview [style*="font-size:13px"]{color:#BCA99A!important}
html[data-theme="dark"] #share-card-preview [data-close]{background:#3A2E25!important;color:#EAD9CB!important}
html[data-theme="dark"] #share-card-preview img{background:#241B14!important;border-color:rgba(255,255,255,.10)!important}
html[data-theme="dark"] #share-card-preview [data-copy]{background:#2E241C!important;color:#F5E9DE!important;border-color:rgba(255,255,255,.14)!important}
html[data-theme="dark"] #share-card-preview [data-share]{background:#F5E9DE!important;color:#14171C!important}

/* ===========================================================================
   18 · AMBIENT MOTION — drifting organic colour fields (no hard lines)
   Purely decorative. Sits behind all content, above the root canvas. Uses the
   brand tokens so it tracks light/dark automatically. Frozen for users who ask
   for reduced motion. Added as part of the studio-polish pass.
   =========================================================================== */
body::before{
  content:""; position:fixed; inset:-14%; z-index:-1; pointer-events:none;
  background:
    radial-gradient(38% 32% at 20% 26%, color-mix(in srgb, var(--brand) 24%, transparent), transparent 70%),
    radial-gradient(34% 30% at 84% 18%, color-mix(in srgb, var(--accent) 20%, transparent), transparent 68%),
    radial-gradient(40% 36% at 72% 84%, color-mix(in srgb, var(--gold) 22%, transparent), transparent 72%),
    radial-gradient(30% 26% at 12% 82%, color-mix(in srgb, var(--highlight) 16%, transparent), transparent 70%);
  filter: blur(16px) saturate(112%);
  opacity:.42;
  animation: cp-aurora 42s ease-in-out infinite alternate;
  will-change: transform;
}
html[data-theme="dark"] body::before{ opacity:.30; filter: blur(18px) saturate(122%); }
@keyframes cp-aurora{
  0%   { transform: translate3d(-2.4%,-1.4%,0) scale(1.03) rotate(-1.6deg); }
  50%  { transform: translate3d(1.8%, 2.2%,0) scale(1.07) rotate(1.1deg); }
  100% { transform: translate3d(2.6%,-1.8%,0) scale(1.04) rotate(2.1deg); }
}

/* A soft "breathing" bloom behind each pet illustration — organic, subtle. */
.pet-illus::before{ animation: cp-breathe 9s ease-in-out infinite alternate; will-change: transform, opacity; }
@keyframes cp-breathe{
  0%   { transform: scale(1);    opacity:.9; }
  100% { transform: scale(1.06); opacity:1; }
}

/* Honour reduced-motion: hold everything perfectly still. */
@media (prefers-reduced-motion: reduce){
  body::before{ animation: none; }
  .pet-illus::before{ animation: none; }
}