/* ============================================================
   PishPish.cn — 暗夜丝路 (Midnight Silk) 暗色主题 v1.0
   Enterprise-grade dark theme, Linear/Vercel-inspired
   Mobile-first responsive
   ============================================================ */

/* ═══════════════════════ CSS Variables ═══════════════════════ */
:root {
  /* ── Background Layers (4-deep) ── */
  --pish-bg-canvas:      #09090B;
  --pish-bg-surface:     #131316;
  --pish-bg-elevated:    #1A1A1F;
  --pish-bg-glass:       rgba(19, 19, 22, 0.78);

  /* ── Borders ── */
  --pish-border-default: #23252A;
  --pish-border-subtle:  #1C1D22;
  --pish-border-glass:   rgba(255, 255, 255, 0.07);
  --pish-border-hover:   rgba(64, 224, 208, 0.25);
  --pish-border-active:  rgba(64, 224, 208, 0.45);

  /* ── Text Hierarchy ── */
  --pish-text-primary:   #F1F1F3;
  --pish-text-secondary: #8B8D94;
  --pish-text-muted:     #5E6068;
  --pish-text-disabled:  #3C3E44;

  /* ── Accent: Turquoise ── */
  --pish-accent:         #40E0D0;
  --pish-accent-hover:   #5EEAD4;
  --pish-accent-muted:   rgba(64, 224, 208, 0.12);
  --pish-accent-ring:    rgba(64, 224, 208, 0.35);
  --pish-accent-dim:     rgba(64, 224, 208, 0.06);

  /* ── Gold: Heritage ── */
  --pish-gold:           #C9A96E;
  --pish-gold-hover:     #D4B87A;
  --pish-gold-muted:     rgba(201, 169, 110, 0.15);
  --pish-gold-dim:       rgba(201, 169, 110, 0.06);

  /* ── Semantic ── */
  --pish-success:        #10B981;
  --pish-success-muted:  rgba(16, 185, 129, 0.12);
  --pish-warning:        #F59E0B;
  --pish-warning-muted:  rgba(245, 158, 11, 0.12);
  --pish-error:          #EF4444;
  --pish-error-muted:    rgba(239, 68, 68, 0.12);
  --pish-info:           #3B82F6;
  --pish-info-muted:     rgba(59, 130, 246, 0.12);

  /* ── Pedigree Tree ── */
  --pish-pft-male:       #C49A6C;
  --pish-pft-female:     #D4A0A0;
  --pish-pft-line:       rgba(64, 224, 208, 0.18);
  --pish-pft-text:       rgba(255, 255, 255, 0.75);
  --pish-pft-text-dim:   rgba(255, 255, 255, 0.4);

  /* ── Spacing (8px grid) ── */
  --pish-space-1:  4px;
  --pish-space-2:  8px;
  --pish-space-3:  12px;
  --pish-space-4:  16px;
  --pish-space-5:  20px;
  --pish-space-6:  24px;
  --pish-space-8:  32px;
  --pish-space-10: 40px;
  --pish-space-12: 48px;
  --pish-space-16: 64px;

  /* ── Border Radius ── */
  --pish-radius-sm:   6px;
  --pish-radius-md:   10px;
  --pish-radius-lg:   14px;
  --pish-radius-xl:   20px;
  --pish-radius-full: 9999px;

  /* ── Shadows ── */
  --pish-shadow-sm:   0 1px 2px rgba(0, 0, 0, 0.3);
  --pish-shadow-md:   0 4px 12px rgba(0, 0, 0, 0.4);
  --pish-shadow-lg:   0 8px 30px rgba(0, 0, 0, 0.5);
  --pish-shadow-glow: 0 0 20px rgba(64, 224, 208, 0.12);

  /* ── Typography ── */
  --pish-font-sans:    -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --pish-font-cjk:     "PingFang SC", "Microsoft YaHei", "Hiragino Sans GB", "Noto Sans SC", sans-serif;
  --pish-font-body:    -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "PingFang SC", "Microsoft YaHei", "Hiragino Sans GB", "Noto Sans SC", sans-serif;
  --pish-font-heading: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", "Microsoft YaHei", "Hiragino Sans GB", "Noto Sans SC", sans-serif;
  --pish-font-mono:    "SF Mono", "Fira Code", "JetBrains Mono", "Consolas", "Menlo", "Monaco", monospace;
  --pish-font-uyghur:  "UKIJ Tuz", "UKIJ Esliye", "UKIJ Basma", sans-serif;

  /* ── Motion ── */
  --pish-duration-fast:   150ms;
  --pish-duration-normal: 250ms;
  --pish-duration-slow:   400ms;
  --pish-duration-reveal: 600ms;
  --pish-ease-out:     cubic-bezier(0.16, 1, 0.3, 1);
  --pish-ease-in-out:  cubic-bezier(0.65, 0, 0.35, 1);
  --pish-ease-spring:  cubic-bezier(0.34, 1.56, 0.64, 1);

  /* ── Layout ── */
  --pish-max-width:       1200px;
  --pish-content-narrow:  780px;
  --pish-header-height:   60px;

  /* ── Legacy compatibility aliases (for PHP templates) ── */
  --color-primary:       var(--pish-accent);
  --color-primary-dark:  #35C9BB;
  --color-primary-rgb:   64, 224, 208;
  --color-primary-light: var(--pish-accent-muted);
  --color-secondary:     var(--pish-error);
  --color-secondary-light: var(--pish-error-muted);
  --color-accent:        var(--pish-gold);
  --color-accent-light:  var(--pish-gold-muted);
  --color-dark:          var(--pish-bg-canvas);
  --color-dark-card:     var(--pish-bg-elevated);

  --bg-body:             var(--pish-bg-canvas);
  --bg-section:          var(--pish-bg-surface);
  --bg-card:             var(--pish-bg-surface);
  --bg-dark-section:     var(--pish-bg-canvas);

  --text-primary:        var(--pish-text-primary);
  --text-secondary:      var(--pish-text-secondary);
  --text-muted:          var(--pish-text-muted);
  --text-on-primary:     #09090B;
  --text-on-dark:        var(--pish-text-primary);

  --border-color:        var(--pish-border-default);
  --border-light:        var(--pish-border-subtle);

  --shadow-sm:   var(--pish-shadow-sm);
  --shadow-md:   var(--pish-shadow-md);
  --shadow-lg:   var(--pish-shadow-lg);
  --shadow-xl:   var(--pish-shadow-lg);

  --radius-sm:   var(--pish-radius-sm);
  --radius-md:   var(--pish-radius-md);
  --radius-lg:   var(--pish-radius-lg);
  --radius-xl:   var(--pish-radius-xl);

  --spacing-xs:  var(--pish-space-1);
  --spacing-sm:  var(--pish-space-2);
  --spacing-md:  var(--pish-space-4);
  --spacing-lg:  var(--pish-space-6);
  --spacing-xl:  var(--pish-space-8);
  --spacing-2xl: var(--pish-space-12);

  --font-heading: var(--pish-font-heading);
  --font-body:    var(--pish-font-body);

  --transition:      0.25s var(--pish-ease-out);
  --transition-fast: 0.15s var(--pish-ease-out);

  --max-width:        var(--pish-max-width);
  --header-height:    var(--pish-header-height);
}

/* ═══════════════════════ @font-face (Uyghur UKIJ Tuz) ═══════════════════════ */
@font-face {
  font-family: 'UKIJ Tuz';
  src: url('/fonts/uyghur/ukijtuztom.woff2') format('woff2'),
       url('/fonts/uyghur/ukijtuztom.woff') format('woff'),
       url('/fonts/uyghur/ukijtuztom.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* ═══════════════════════ SVG Icons (Base) ═══════════════════════ */
.pish-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.25em;
  height: 1.25em;
  flex-shrink: 0;
  vertical-align: -0.2em;
}

.pish-icon svg {
  width: 100%;
  height: 100%;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Solid fill variants */
.pish-icon.fill svg {
  fill: currentColor;
  stroke: none;
}

/* Sized variants */
.pish-icon-sm { width: 1em;    height: 1em; }
.pish-icon-lg { width: 1.5em;  height: 1.5em; }
.pish-icon-xl { width: 2em;    height: 2em; }
.pish-icon-2x { width: 2.5em;  height: 2.5em; }

/* Nav icon wrapper (replaces .nav-icon emoji) */
.nav-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.3rem;
  line-height: 1;
}
.nav-icon svg {
  width: 1.3em;
  height: 1.3em;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ═══════════════════════ Inline SVG Icon Definitions ═══════════════════════ */

/* ── Paw ── */
.icon-paw::before {
  content: '';
  display: inline-block;
  width: 1.25em; height: 1.25em;
  vertical-align: -0.2em;
  background: currentColor;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 13c-1.5 0-2.5 1.5-2.5 4 0 1.7 1.3 3 2.5 3s2.5-1.3 2.5-3c0-2.5-1-4-2.5-4z'/%3E%3Cpath d='M5.5 10c-1 0-1.8.8-1.8 1.8 0 .8.6 1.7 1.5 2 .8.2 1.8-.3 2-1.2.2-1-.5-2-1.5-2.5-.1 0-.1-.1-.2-.1z'/%3E%3Cpath d='M18.5 10c-1 0-1.2 1.5-.2 2 .8.4 1.5 1 1.5 2 .2 1 .8 1.5 1.8 1.2 1-.3 1.8-1.2 1.6-2.2-.2-1-1-1.8-2-1.8-.7 0-1.7.5-2.5-.2h-.2z'/%3E%3Cpath d='M8.5 6C7 6 6 7 6 8.5s1 2.5 2.5 2.5 2.5-1 2.5-2.5S10 6 8.5 6z'/%3E%3Cpath d='M15.5 6C14 6 13 7 13 8.5s1 2.5 2.5 2.5 2.5-1 2.5-2.5S17 6 15.5 6z'/%3E%3C/svg%3E") no-repeat center;
  mask-size: contain;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 13c-1.5 0-2.5 1.5-2.5 4 0 1.7 1.3 3 2.5 3s2.5-1.3 2.5-3c0-2.5-1-4-2.5-4z'/%3E%3Cpath d='M5.5 10c-1 0-1.8.8-1.8 1.8 0 .8.6 1.7 1.5 2 .8.2 1.8-.3 2-1.2.2-1-.5-2-1.5-2.5-.1 0-.1-.1-.2-.1z'/%3E%3Cpath d='M18.5 10c-1 0-1.2 1.5-.2 2 .8.4 1.5 1 1.5 2 .2 1 .8 1.5 1.8 1.2 1-.3 1.8-1.2 1.6-2.2-.2-1-1-1.8-2-1.8-.7 0-1.7.5-2.5-.2h-.2z'/%3E%3Cpath d='M8.5 6C7 6 6 7 6 8.5s1 2.5 2.5 2.5 2.5-1 2.5-2.5S10 6 8.5 6z'/%3E%3Cpath d='M15.5 6C14 6 13 7 13 8.5s1 2.5 2.5 2.5 2.5-1 2.5-2.5S17 6 15.5 6z'/%3E%3C/svg%3E") no-repeat center;
  -webkit-mask-size: contain;
}

/* ── Crown (👑) ── */
.icon-crown::before {
  content: '';
  display: inline-block;
  width: 1.25em; height: 1.25em;
  vertical-align: -0.2em;
  background: currentColor;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 4l3 12h14l3-12-6 5-4-7-4 7-6-5z'/%3E%3Cpath d='M2 18h20'/%3E%3C/svg%3E") no-repeat center;
  mask-size: contain;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 4l3 12h14l3-12-6 5-4-7-4 7-6-5z'/%3E%3Cpath d='M2 18h20'/%3E%3C/svg%3E") no-repeat center;
  -webkit-mask-size: contain;
}

/* ── Home (🏠) ── */
.icon-home::before {
  content: '';
  display: inline-block;
  width: 1.25em; height: 1.25em;
  vertical-align: -0.2em;
  background: currentColor;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z'/%3E%3Cpolyline points='9 22 9 12 15 12 15 22'/%3E%3C/svg%3E") no-repeat center;
  mask-size: contain;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z'/%3E%3Cpolyline points='9 22 9 12 15 12 15 22'/%3E%3C/svg%3E") no-repeat center;
  -webkit-mask-size: contain;
}

/* ── Cat (🐱🦁) ── */
.icon-cat::before {
  content: '';
  display: inline-block;
  width: 1.25em; height: 1.25em;
  vertical-align: -0.2em;
  background: currentColor;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M8 14s1.5 2 4 2 4-2 4-2'/%3E%3Cline x1='9' y1='9' x2='9.01' y2='9'/%3E%3Cline x1='15' y1='9' x2='15.01' y2='9'/%3E%3Cpath d='M12 2c1-1 3-1 4 0'/%3E%3Cpath d='M12 2c-1-1-3-1-4 0'/%3E%3C/svg%3E") no-repeat center;
  mask-size: contain;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M8 14s1.5 2 4 2 4-2 4-2'/%3E%3Cline x1='9' y1='9' x2='9.01' y2='9'/%3E%3Cline x1='15' y1='9' x2='15.01' y2='9'/%3E%3Cpath d='M12 2c1-1 3-1 4 0'/%3E%3Cpath d='M12 2c-1-1-3-1-4 0'/%3E%3C/svg%3E") no-repeat center;
  -webkit-mask-size: contain;
}

/* ── Menu / Hamburger (☰) ── */
.icon-menu::before {
  content: '';
  display: inline-block;
  width: 1.25em; height: 1.25em;
  vertical-align: -0.2em;
  background: currentColor;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='3' y1='6' x2='21' y2='6'/%3E%3Cline x1='3' y1='12' x2='21' y2='12'/%3E%3Cline x1='3' y1='18' x2='21' y2='18'/%3E%3C/svg%3E") no-repeat center;
  mask-size: contain;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='3' y1='6' x2='21' y2='6'/%3E%3Cline x1='3' y1='12' x2='21' y2='12'/%3E%3Cline x1='3' y1='18' x2='21' y2='18'/%3E%3C/svg%3E") no-repeat center;
  -webkit-mask-size: contain;
}

/* ── Close / X (✕) ── */
.icon-close::before {
  content: '';
  display: inline-block;
  width: 1.25em; height: 1.25em;
  vertical-align: -0.2em;
  background: currentColor;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'/%3E%3Cline x1='6' y1='6' x2='18' y2='18'/%3E%3C/svg%3E") no-repeat center;
  mask-size: contain;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'/%3E%3Cline x1='6' y1='6' x2='18' y2='18'/%3E%3C/svg%3E") no-repeat center;
  -webkit-mask-size: contain;
}

/* ── DNA / Gene (🧬) ── */
.icon-dna::before {
  content: '';
  display: inline-block;
  width: 1.25em; height: 1.25em;
  vertical-align: -0.2em;
  background: currentColor;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 2c0 6 4 10 8 10s8-4 8-10'/%3E%3Cpath d='M4 22c0-6 4-10 8-10s8 4 8 10'/%3E%3Cline x1='12' y1='2' x2='12' y2='22'/%3E%3C/svg%3E") no-repeat center;
  mask-size: contain;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 2c0 6 4 10 8 10s8-4 8-10'/%3E%3Cpath d='M4 22c0-6 4-10 8-10s8 4 8 10'/%3E%3Cline x1='12' y1='2' x2='12' y2='22'/%3E%3C/svg%3E") no-repeat center;
  -webkit-mask-size: contain;
}

/* ── Heart (❤️) ── */
.icon-heart::before {
  content: '';
  display: inline-block;
  width: 1.25em; height: 1.25em;
  vertical-align: -0.2em;
  background: currentColor;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z'/%3E%3C/svg%3E") no-repeat center;
  mask-size: contain;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z'/%3E%3C/svg%3E") no-repeat center;
  -webkit-mask-size: contain;
}

/* ── Star (⭐) ── */
.icon-star::before {
  content: '';
  display: inline-block;
  width: 1.25em; height: 1.25em;
  vertical-align: -0.2em;
  background: currentColor;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolygon points='12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2'/%3E%3C/svg%3E") no-repeat center;
  mask-size: contain;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolygon points='12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2'/%3E%3C/svg%3E") no-repeat center;
  -webkit-mask-size: contain;
}

/* ── Chevron Down (▼) ── */
.icon-chevron-down::before {
  content: '';
  display: inline-block;
  width: 1.25em; height: 1.25em;
  vertical-align: -0.2em;
  background: currentColor;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") no-repeat center;
  mask-size: contain;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") no-repeat center;
  -webkit-mask-size: contain;
}

/* ── Search (🔍) ── */
.icon-search::before {
  content: '';
  display: inline-block;
  width: 1.25em; height: 1.25em;
  vertical-align: -0.2em;
  background: currentColor;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E") no-repeat center;
  mask-size: contain;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E") no-repeat center;
  -webkit-mask-size: contain;
}

/* ── Globe / Language (🌐) ── */
.icon-globe::before {
  content: '';
  display: inline-block;
  width: 1.25em; height: 1.25em;
  vertical-align: -0.2em;
  background: currentColor;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cline x1='2' y1='12' x2='22' y2='12'/%3E%3Cpath d='M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z'/%3E%3C/svg%3E") no-repeat center;
  mask-size: contain;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cline x1='2' y1='12' x2='22' y2='12'/%3E%3Cpath d='M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z'/%3E%3C/svg%3E") no-repeat center;
  -webkit-mask-size: contain;
}

/* ── Coin / Stud (💰) ── */
.icon-coin::before {
  content: '';
  display: inline-block;
  width: 1.25em; height: 1.25em;
  vertical-align: -0.2em;
  background: currentColor;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cellipse cx='12' cy='12' rx='10' ry='7'/%3E%3Cline x1='12' y1='5' x2='12' y2='19'/%3E%3C/svg%3E") no-repeat center;
  mask-size: contain;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cellipse cx='12' cy='12' rx='10' ry='7'/%3E%3Cline x1='12' y1='5' x2='12' y2='19'/%3E%3C/svg%3E") no-repeat center;
  -webkit-mask-size: contain;
}

/* ── Document / Blog (📝) ── */
.icon-doc::before {
  content: '';
  display: inline-block;
  width: 1.25em; height: 1.25em;
  vertical-align: -0.2em;
  background: currentColor;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z'/%3E%3Cpolyline points='14 2 14 8 20 8'/%3E%3Cline x1='16' y1='13' x2='8' y2='13'/%3E%3Cline x1='16' y1='17' x2='8' y2='17'/%3E%3Cpolyline points='10 9 9 9 8 9'/%3E%3C/svg%3E") no-repeat center;
  mask-size: contain;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z'/%3E%3Cpolyline points='14 2 14 8 20 8'/%3E%3Cline x1='16' y1='13' x2='8' y2='13'/%3E%3Cline x1='16' y1='17' x2='8' y2='17'/%3E%3Cpolyline points='10 9 9 9 8 9'/%3E%3C/svg%3E") no-repeat center;
  -webkit-mask-size: contain;
}

/* ── Tree / Pedigree (🌳) ── */
.icon-tree::before {
  content: '';
  display: inline-block;
  width: 1.25em; height: 1.25em;
  vertical-align: -0.2em;
  background: currentColor;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 22V7'/%3E%3Cpath d='M9 3h6'/%3E%3Cpath d='M9 7h6'/%3E%3Cpath d='M7 17l-2 4h4'/%3E%3Cpath d='M17 17l2 4h-4'/%3E%3Cpath d='M12 7c-1.5 0-3 2-3 5'/%3E%3Cpath d='M12 7c1.5 0 3 2 3 5'/%3E%3C/svg%3E") no-repeat center;
  mask-size: contain;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 22V7'/%3E%3Cpath d='M9 3h6'/%3E%3Cpath d='M9 7h6'/%3E%3Cpath d='M7 17l-2 4h4'/%3E%3Cpath d='M17 17l2 4h-4'/%3E%3Cpath d='M12 7c-1.5 0-3 2-3 5'/%3E%3Cpath d='M12 7c1.5 0 3 2 3 5'/%3E%3C/svg%3E") no-repeat center;
  -webkit-mask-size: contain;
}

/* ── Sparkle (💫) ── */
.icon-sparkle::before {
  content: '';
  display: inline-block;
  width: 1.25em; height: 1.25em;
  vertical-align: -0.2em;
  background: currentColor;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l1.5 4.5L18 9l-4.5 1.5L12 15l-1.5-4.5L6 9l4.5-1.5z'/%3E%3Cpath d='M18 15l.75 2.25L21 18l-2.25.75L18 21l-.75-2.25L15 18l2.25-.75z'/%3E%3Cpath d='M7 17l.5 1.5L9 19l-1.5.5L7 20l-.5-1.5L5 19l1.5-.5z'/%3E%3C/svg%3E") no-repeat center;
  mask-size: contain;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l1.5 4.5L18 9l-4.5 1.5L12 15l-1.5-4.5L6 9l4.5-1.5z'/%3E%3Cpath d='M18 15l.75 2.25L21 18l-2.25.75L18 21l-.75-2.25L15 18l2.25-.75z'/%3E%3Cpath d='M7 17l.5 1.5L9 19l-1.5.5L7 20l-.5-1.5L5 19l1.5-.5z'/%3E%3C/svg%3E") no-repeat center;
  -webkit-mask-size: contain;
}

/* ── Info (ℹ️) ── */
.icon-info::before {
  content: '';
  display: inline-block;
  width: 1.25em; height: 1.25em;
  vertical-align: -0.2em;
  background: currentColor;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cline x1='12' y1='16' x2='12' y2='12'/%3E%3Cline x1='12' y1='8' x2='12.01' y2='8'/%3E%3C/svg%3E") no-repeat center;
  mask-size: contain;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cline x1='12' y1='16' x2='12' y2='12'/%3E%3Cline x1='12' y1='8' x2='12.01' y2='8'/%3E%3C/svg%3E") no-repeat center;
  -webkit-mask-size: contain;
}

/* ── Mail (📩) ── */
.icon-mail::before {
  content: '';
  display: inline-block;
  width: 1.25em; height: 1.25em;
  vertical-align: -0.2em;
  background: currentColor;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z'/%3E%3Cpolyline points='22,6 12,13 2,6'/%3E%3C/svg%3E") no-repeat center;
  mask-size: contain;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z'/%3E%3Cpolyline points='22,6 12,13 2,6'/%3E%3C/svg%3E") no-repeat center;
  -webkit-mask-size: contain;
}

/* ── Check (✅) ── */
.icon-check::before {
  content: '';
  display: inline-block;
  width: 1.25em; height: 1.25em;
  vertical-align: -0.2em;
  background: currentColor;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") no-repeat center;
  mask-size: contain;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") no-repeat center;
  -webkit-mask-size: contain;
}

/* ── Pin (📌) ── */
.icon-pin::before {
  content: '';
  display: inline-block;
  width: 1.25em; height: 1.25em;
  vertical-align: -0.2em;
  background: currentColor;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z'/%3E%3Ccircle cx='12' cy='10' r='3'/%3E%3C/svg%3E") no-repeat center;
  mask-size: contain;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z'/%3E%3Ccircle cx='12' cy='10' r='3'/%3E%3C/svg%3E") no-repeat center;
  -webkit-mask-size: contain;
}

/* ── Calendar (📅) ── */
.icon-calendar::before {
  content: '';
  display: inline-block;
  width: 1.25em; height: 1.25em;
  vertical-align: -0.2em;
  background: currentColor;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'/%3E%3Cline x1='16' y1='2' x2='16' y2='6'/%3E%3Cline x1='8' y1='2' x2='8' y2='6'/%3E%3Cline x1='3' y1='10' x2='21' y2='10'/%3E%3C/svg%3E") no-repeat center;
  mask-size: contain;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'/%3E%3Cline x1='16' y1='2' x2='16' y2='6'/%3E%3Cline x1='8' y1='2' x2='8' y2='6'/%3E%3Cline x1='3' y1='10' x2='21' y2='10'/%3E%3C/svg%3E") no-repeat center;
  -webkit-mask-size: contain;
}

/* ── Camera (📸) ── */
.icon-camera::before {
  content: '';
  display: inline-block;
  width: 1.25em; height: 1.25em;
  vertical-align: -0.2em;
  background: currentColor;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M23 19a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4l2-3h6l2 3h4a2 2 0 0 1 2 2z'/%3E%3Ccircle cx='12' cy='13' r='4'/%3E%3C/svg%3E") no-repeat center;
  mask-size: contain;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M23 19a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4l2-3h6l2 3h4a2 2 0 0 1 2 2z'/%3E%3Ccircle cx='12' cy='13' r='4'/%3E%3C/svg%3E") no-repeat center;
  -webkit-mask-size: contain;
}

/* ── Chevron Left (‹) ── */
.icon-chevron-left::before {
  content: '';
  display: inline-block;
  width: 1.25em; height: 1.25em;
  vertical-align: -0.2em;
  background: currentColor;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='15 18 9 12 15 6'/%3E%3C/svg%3E") no-repeat center;
  mask-size: contain;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='15 18 9 12 15 6'/%3E%3C/svg%3E") no-repeat center;
  -webkit-mask-size: contain;
}

/* ── Chevron Right (›) ── */
.icon-chevron-right::before {
  content: '';
  display: inline-block;
  width: 1.25em; height: 1.25em;
  vertical-align: -0.2em;
  background: currentColor;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='9 18 15 12 9 6'/%3E%3C/svg%3E") no-repeat center;
  mask-size: contain;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='9 18 15 12 9 6'/%3E%3C/svg%3E") no-repeat center;
  -webkit-mask-size: contain;
}

/* ── Arrow Right (→) ── */
.icon-arrow-right::before {
  content: '';
  display: inline-block;
  width: 1.25em; height: 1.25em;
  vertical-align: -0.2em;
  background: currentColor;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='5' y1='12' x2='19' y2='12'/%3E%3Cpolyline points='12 5 19 12 12 19'/%3E%3C/svg%3E") no-repeat center;
  mask-size: contain;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='5' y1='12' x2='19' y2='12'/%3E%3Cpolyline points='12 5 19 12 12 19'/%3E%3C/svg%3E") no-repeat center;
  -webkit-mask-size: contain;
}

/* ── Warning (⚠️) ── */
.icon-warning::before {
  content: '';
  display: inline-block;
  width: 1.25em; height: 1.25em;
  vertical-align: -0.2em;
  background: currentColor;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z'/%3E%3Cline x1='12' y1='9' x2='12' y2='13'/%3E%3Cline x1='12' y1='17' x2='12.01' y2='17'/%3E%3C/svg%3E") no-repeat center;
  mask-size: contain;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z'/%3E%3Cline x1='12' y1='9' x2='12' y2='13'/%3E%3Cline x1='12' y1='17' x2='12.01' y2='17'/%3E%3C/svg%3E") no-repeat center;
  -webkit-mask-size: contain;
}

/* ── XMark (❌) ── */
.icon-xmark::before {
  content: '';
  display: inline-block;
  width: 1.25em; height: 1.25em;
  vertical-align: -0.2em;
  background: currentColor;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cline x1='15' y1='9' x2='9' y2='15'/%3E%3Cline x1='9' y1='9' x2='15' y2='15'/%3E%3C/svg%3E") no-repeat center;
  mask-size: contain;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cline x1='15' y1='9' x2='9' y2='15'/%3E%3Cline x1='9' y1='9' x2='15' y2='15'/%3E%3C/svg%3E") no-repeat center;
  -webkit-mask-size: contain;
}

/* ── Box / Litter (📦) ── */
.icon-box::before {
  content: '';
  display: inline-block;
  width: 1.25em; height: 1.25em;
  vertical-align: -0.2em;
  background: currentColor;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z'/%3E%3Cpolyline points='3.27 6.96 12 12.01 20.73 6.96'/%3E%3Cline x1='12' y1='22.08' x2='12' y2='12'/%3E%3C/svg%3E") no-repeat center;
  mask-size: contain;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z'/%3E%3Cpolyline points='3.27 6.96 12 12.01 20.73 6.96'/%3E%3Cline x1='12' y1='22.08' x2='12' y2='12'/%3E%3C/svg%3E") no-repeat center;
  -webkit-mask-size: contain;
}

/* ── Trophy (🏆) ── */
.icon-trophy::before {
  content: '';
  display: inline-block;
  width: 1.25em; height: 1.25em;
  vertical-align: -0.2em;
  background: currentColor;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9H4.5A2.5 2.5 0 0 1 2 6.5v-1A2.5 2.5 0 0 1 4.5 3h1'/%3E%3Cpath d='M18 9h1.5A2.5 2.5 0 0 0 22 6.5v-1A2.5 2.5 0 0 0 19.5 3h-1'/%3E%3Cpath d='M4 22h16'/%3E%3Cpath d='M10 14.66V17c0 .55-.47.98-.97 1.21C7.85 18.75 7 20.24 7 22'/%3E%3Cpath d='M14 14.66V17c0 .55.47.98.97 1.21C16.15 18.75 17 20.24 17 22'/%3E%3Cpath d='M18 2H6v7a6 6 0 0 0 12 0V2z'/%3E%3C/svg%3E") no-repeat center;
  mask-size: contain;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9H4.5A2.5 2.5 0 0 1 2 6.5v-1A2.5 2.5 0 0 1 4.5 3h1'/%3E%3Cpath d='M18 9h1.5A2.5 2.5 0 0 0 22 6.5v-1A2.5 2.5 0 0 0 19.5 3h-1'/%3E%3Cpath d='M4 22h16'/%3E%3Cpath d='M10 14.66V17c0 .55-.47.98-.97 1.21C7.85 18.75 7 20.24 7 22'/%3E%3Cpath d='M14 14.66V17c0 .55.47.98.97 1.21C16.15 18.75 17 20.24 17 22'/%3E%3Cpath d='M18 2H6v7a6 6 0 0 0 12 0V2z'/%3E%3C/svg%3E") no-repeat center;
  -webkit-mask-size: contain;
}

/* ═══════════════════════ Reset & Base ═══════════════════════ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  font-size: 16px;
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  color-scheme: dark;
}

body {
  font-family: var(--font-body);
  color: var(--text-primary);
  background: var(--bg-body);
  line-height: 1.6;
  overflow-x: hidden;
  padding-bottom: 0;  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body[data-locale="ug"] {
  font-family: var(--pish-font-uyghur);
}

a {
  color: var(--color-primary);
  text-decoration: none;
  transition: color var(--transition-fast);
}
a:hover { color: var(--pish-accent-hover); }

img {
  max-width: 100%;
  height: auto;
  display: block;
}

ul, ol { list-style: none; }

button, .btn {
  font-family: var(--font-body);
  cursor: pointer;
  border: none;
  outline: none;
  transition: all var(--transition-fast);
  background: none;
  color: inherit;
}

/* ═══════════════════════ Typography ═══════════════════════ */
h1, h2, h3, h4 {
  font-family: var(--font-heading);
  font-weight: 600;
  line-height: 1.3;
  color: var(--text-primary);
  letter-spacing: -0.01em;
}

h1 { font-size: clamp(1.5rem, 4vw, 2.5rem);  letter-spacing: -0.02em; }
h2 { font-size: clamp(1.25rem, 3vw, 1.75rem); }
h3 { font-size: clamp(1.05rem, 2.5vw, 1.35rem); }
h4 { font-size: 1rem; }

.section-title {
  text-align: center;
  margin-bottom: var(--spacing-lg);
  position: relative;
  padding-bottom: var(--spacing-md);
}
.section-title::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 48px;
  height: 2px;
  background: var(--pish-accent);
  border-radius: 1px;
  opacity: 0.6;
}

.section-subtitle {
  text-align: center;
  color: var(--text-secondary);
  margin-top: -8px;
  margin-bottom: var(--spacing-xl);
  font-size: 0.95rem;
}

/* ═══════════════════════ Layout ═══════════════════════ */
.container {
  width: 100%;
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 var(--spacing-md);
}

.section {
  padding: var(--spacing-2xl) 0;
  background: var(--bg-body);
}

.section-alt {
  background: var(--bg-section);
}

/* ═══════════════════════ Header ═══════════════════════ */
.header {
  position: sticky;
  top: 0;
  z-index: 1000;
  background: rgba(9, 9, 11, 0.82);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--pish-border-glass);
  height: var(--header-height);
  display: flex;
  align-items: center;
}

.header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.header-logo {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  font-family: var(--font-heading);
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--text-primary);
  letter-spacing: -0.01em;
}

.header-logo .logo-icon {
  width: 34px;
  height: 34px;
  background: linear-gradient(135deg, var(--pish-accent), #35C9BB);
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #09090B;
  font-size: 1.1rem;
}

.header-logo span { color: var(--pish-accent); }

.header-nav {
  display: none;
}

.header-nav a {
  padding: 6px 14px;
  color: var(--text-secondary);
  font-size: 0.9rem;
  border-radius: var(--radius-sm);
  transition: color var(--transition-fast), background var(--transition-fast);
  font-weight: 500;
}
.header-nav a:hover,
.header-nav a.active {
  color: var(--pish-accent);
  background: var(--pish-accent-muted);
}

.header-actions {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
}

.language-switch {
  position: relative;
}
.lang-current {
  background: var(--pish-bg-elevated);
  border: 1px solid var(--pish-border-default);
  padding: 5px 10px;
  border-radius: var(--radius-sm);
  font-size: 0.82rem;
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  gap: 4px;
  transition: border-color var(--transition-fast);
}
.lang-current:hover {
  border-color: var(--pish-border-hover);
}
.lang-dropdown {
  display: none;
  position: absolute;
  top: 100%;
  right: 0;
  background: var(--pish-bg-elevated);
  border: 1px solid var(--pish-border-default);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  margin-top: 4px;
  min-width: 130px;
  z-index: 100;
  overflow: hidden;
}
.lang-dropdown.show { display: block; }
.lang-dropdown a {
  display: block;
  padding: 8px 16px;
  font-size: 0.85rem;
  color: var(--text-primary);
  transition: background var(--transition-fast);
}
.lang-dropdown a:hover { background: rgba(255,255,255,0.06); }

.menu-toggle {
  width: 40px;
  height: 40px;
  background: none;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  color: var(--text-secondary);
  border-radius: var(--radius-sm);
}
.menu-toggle:hover {
  color: var(--text-primary);
  background: rgba(255,255,255,0.06);
}

/* ═══════════════════════ Hero Section ═══════════════════════ */
.hero {
  position: relative;
  background: linear-gradient(180deg, var(--bg-canvas, #09090B) 0%, var(--bg-section) 100%);
  color: var(--text-on-dark);
  padding: var(--spacing-2xl) 0;
  overflow: hidden;
  min-height: 100dvh; /* 使用动态视口高度，适配移动端 */
  min-height: 100vh; /* 回退方案 */
  display: flex;
  align-items: center;
}

.hero-logo-wrap {
  display: flex;
  justify-content: center;
  margin-bottom: var(--spacing-xl);
}

.hero .hero-logo-wrap .hero-logo {
  height: 240px;
  width: auto;
  max-width: 90%;
  filter: drop-shadow(0 0 30px rgba(201,169,110,0.4));
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.hero .hero-logo-wrap .hero-logo:hover {
  transform: scale(1.05);
}

.hero::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background:
    radial-gradient(ellipse 600px 300px at 20% 30%, rgba(64,224,208,0.08) 0%, transparent 60%),
    radial-gradient(ellipse 500px 250px at 80% 60%, rgba(201,169,110,0.06) 0%, transparent 60%);
  pointer-events: none;
}

.hero-content {
  position: relative;
  z-index: 1;
  text-align: center;
}

.hero-badge {
  display: inline-block;
  background: var(--pish-gold-muted);
  border: 1px solid rgba(201,169,110,0.3);
  color: var(--pish-gold);
  padding: 4px 16px;
  border-radius: 20px;
  font-size: 0.82rem;
  font-weight: 500;
  margin-bottom: var(--spacing-lg);
  letter-spacing: 0.02em;
}

.hero h1 {
  color: var(--text-primary);
  font-size: clamp(1.75rem, 5vw, 3rem);
  margin-bottom: var(--spacing-md);
  line-height: 1.2;
}

.hero h1 span {
  color: var(--pish-accent);
}

.hero p {
  color: var(--text-secondary);
  font-size: 1.05rem;
  max-width: 600px;
  margin: 0 auto var(--spacing-xl);
  line-height: 1.7;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-md);
  justify-content: center;
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-sm);
  padding: 11px 22px;
  border-radius: var(--radius-md);
  font-size: 0.92rem;
  font-weight: 600;
  transition: all var(--transition);
  white-space: nowrap;
  letter-spacing: -0.005em;
}

.btn-primary {
  background: var(--pish-accent);
  color: #09090B;
}
.btn-primary:hover {
  background: var(--pish-accent-hover);
  box-shadow: 0 0 24px rgba(64,224,208,0.25);
  transform: translateY(-1px);
}

.btn-outline {
  background: transparent;
  color: var(--text-primary);
  border: 1px solid var(--pish-border-default);
}
.btn-outline:hover {
  border-color: var(--pish-border-hover);
  background: rgba(255,255,255,0.04);
}

.btn-accent {
  background: var(--pish-gold);
  color: #09090B;
}
.btn-accent:hover {
  background: var(--pish-gold-hover);
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}

.btn-ghost {
  background: transparent;
  color: var(--text-secondary);
}
.btn-ghost:hover {
  color: var(--text-primary);
  background: rgba(255,255,255,0.06);
}

.btn-sm {
  padding: 7px 14px;
  font-size: 0.82rem;
}

.btn-block {
  display: flex;
  width: 100%;
  justify-content: center;
}

/* ═══════════════════════ Hero Stats ═══════════════════════ */
/* ── Desktop Horizontal Scroll: 首页统计数据 ── */
.hero-stats {
  display: flex;
  justify-content: flex-start;
  gap: var(--spacing-xl);
  margin-top: var(--spacing-xl);
  flex-wrap: nowrap;
  overflow-x: auto;
  overflow-y: visible;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: var(--border-color) transparent;
  padding: var(--spacing-xs) 0;
}
.hero-stats::-webkit-scrollbar { height: 4px; }
.hero-stats::-webkit-scrollbar-track { background: transparent; }
.hero-stats::-webkit-scrollbar-thumb { background: var(--border-color); border-radius: 10px; }
.hero-stats .hero-stat {
  flex: 0 0 180px;
  scroll-snap-align: start;
  text-align: center;
}

.hero-stat {
  text-align: center;
}

.hero-stat-number {
  font-family: var(--font-heading);
  font-size: 2rem;
  font-weight: 600;
  color: var(--pish-accent);
  line-height: 1;
  letter-spacing: -0.02em;
}

.hero-stat-label {
  font-size: 0.78rem;
  color: var(--text-muted);
  margin-top: 4px;
}

/* ═══════════════════════ Card Grid ═══════════════════════ */
/* ── Desktop Horizontal Scroll: 卡片网格 ── */
.card-grid {
  display: flex;
  flex-wrap: nowrap;
  overflow-x: auto;
  overflow-y: visible;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: var(--border-color) transparent;
  gap: var(--spacing-lg);
  padding: var(--spacing-xs) 2px var(--spacing-sm) 2px;
}
.card-grid::-webkit-scrollbar { height: 4px; }
.card-grid::-webkit-scrollbar-track { background: transparent; }
.card-grid::-webkit-scrollbar-thumb { background: var(--border-color); border-radius: 10px; }
.card-grid > .card,
.card-grid > a.card {
  flex: 0 0 320px;
  scroll-snap-align: start;
}
.card-grid--litter > .litter-card,
.card-grid--litter > a.litter-card {
  flex: 0 0 360px;
  scroll-snap-align: start;
}

.card {
  background: var(--bg-card);
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--border-color);
  transition: border-color var(--transition), box-shadow var(--transition), transform var(--transition);
}
.card:hover {
  border-color: var(--pish-border-hover);
  box-shadow: var(--shadow-md), var(--shadow-glow);
  transform: translateY(-2px);
}

.card-image {
  position: relative;
  aspect-ratio: 4/3;
  overflow: hidden;
  background: var(--pish-bg-elevated);
}

.card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s var(--pish-ease-out);
}
.card:hover .card-image img {
  transform: scale(1.05);
}

.card-badge {
  position: absolute;
  top: 10px;
  left: 10px;
  padding: 3px 10px;
  border-radius: var(--radius-full);
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.badge-available { background: var(--pish-success-muted);  color: var(--pish-success); }
.badge-reserved  { background: var(--pish-warning-muted);  color: var(--pish-warning); }
.badge-sold      { background: var(--pish-error-muted);    color: var(--pish-error); }
.badge-active    { background: var(--pish-success-muted);  color: var(--pish-success); }
.badge-stud      { background: var(--pish-gold-muted);     color: var(--pish-gold); }
.badge-retired   { background: rgba(107,114,128,0.15);     color: var(--text-secondary); }

.card-body {
  padding: var(--spacing-md);
}

.card-title {
  font-size: 1.05rem;
  font-weight: 600;
  margin-bottom: 2px;
  color: var(--text-primary);
}

.card-subtitle {
  font-size: 0.85rem;
  color: var(--text-secondary);
  margin-bottom: var(--spacing-sm);
}

.card-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-sm);
  font-size: 0.8rem;
  color: var(--text-muted);
}

.card-meta span {
  display: flex;
  align-items: center;
  gap: 4px;
}

.card-footer {
  padding: var(--spacing-sm) var(--spacing-md);
  border-top: 1px solid var(--border-light);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.card-price {
  font-weight: 700;
  color: var(--pish-accent);
  font-size: 1.1rem;
}

/* ═══════════════════════ Detail Page ═══════════════════════ */
.detail-hero {
  position: relative;
  background: var(--bg-body);
  padding-top: var(--spacing-lg);
}

.detail-image {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  aspect-ratio: 16/10;
  max-height: 500px;
  background: var(--pish-bg-elevated);
}

.detail-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.detail-info {
  padding: var(--spacing-lg) 0;
}

.detail-header {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-md);
  flex-wrap: wrap;
}

.detail-header > div {
  flex: 1;
  max-width: 540px;
}

.detail-name {
  font-size: 1.75rem;
  color: var(--text-primary);
}

.detail-title-tag {
  display: inline-block;
  background: var(--pish-accent-muted);
  color: var(--pish-accent);
  padding: 2px 10px;
  border-radius: 4px;
  font-size: 0.8rem;
  font-weight: 500;
  margin-left: var(--spacing-sm);
  vertical-align: middle;
}

.detail-meta-grid {


  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: var(--spacing-md);
  margin: var(--spacing-lg) 0;
  padding: var(--spacing-md);
  background: var(--pish-bg-elevated);
  border-radius: var(--radius-md);
  justify-items: center;
  text-align: center;
  border: 1px solid var(--pish-border-subtle);
}

.meta-item-label {
  font-size: 0.72rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 2px;
}

.meta-item-value {
  font-size: 0.92rem;
  font-weight: 500;
  color: var(--text-primary);
}

.detail-section {
  margin-top: var(--spacing-xl);
  padding-top: var(--spacing-lg);
  border-top: 1px solid var(--pish-border-subtle);
}

.detail-section h3 {
  margin-bottom: var(--spacing-md);
}

/* ═══════════════════════ Timeline ═══════════════════════ */
.timeline {
  position: relative;
  padding-left: 24px;
}

.timeline::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 2px;
  background: var(--pish-border-subtle);
  border-radius: 1px;
}

.timeline-item {
  position: relative;
  padding-bottom: var(--spacing-lg);
}

.timeline-item::before {
  content: '';
  position: absolute;
  left: -28px;
  top: 4px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 2px solid var(--pish-accent);
  background: var(--pish-bg-surface);
}

.timeline-date {
  font-size: 0.78rem;
  color: var(--text-muted);
  margin-bottom: 2px;
}

.timeline-title {
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--text-primary);
}

.timeline-desc {
  font-size: 0.85rem;
  color: var(--text-secondary);
  margin-top: 4px;
}

/* ═══════════════════════ Gene Test Table ═══════════════════════ */
.gene-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
}

.gene-table th,
.gene-table td {
  padding: 12px;
  text-align: left;
  border-bottom: 1px solid var(--pish-border-subtle);
}

.gene-table th {
  font-weight: 600;
  color: var(--text-muted);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.gene-table tbody tr:hover {
  background: rgba(255,255,255,0.02);
}

.gene-result-neg { color: var(--pish-success); font-weight: 600; }
.gene-result-car { color: var(--pish-warning); font-weight: 600; }
.gene-result-pos { color: var(--pish-error);  font-weight: 600; }

/* ═══════════════════════ Stud Service Card ═══════════════════════ */
.stud-card {
  background: linear-gradient(135deg, rgba(201,169,110,0.08), var(--pish-bg-elevated));
  border: 1px solid rgba(201,169,110,0.2);
  border-radius: var(--radius-lg);
  padding: var(--spacing-lg);
  margin: var(--spacing-lg) 0;
}

.stud-card-header {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  margin-bottom: var(--spacing-md);
}

.stud-card-header .icon {
  font-size: 1.5rem;
}

.stud-card-header h4 {
  color: var(--text-primary);
}

.stud-fee {
  font-family: var(--font-heading);
  font-size: 2rem;
  font-weight: 700;
  color: var(--pish-gold);
}

/* ═══════════════════════ Contact Form ═══════════════════════ */
.contact-form {
  max-width: 600px;
  margin: 0 auto;
}

.form-group {
  margin-bottom: var(--spacing-md);
}

.form-group label {
  display: block;
  font-size: 0.88rem;
  font-weight: 500;
  margin-bottom: 4px;
  color: var(--text-secondary);
}

.form-group input,
.form-group select,
.form-group textarea {
  width: 100%;
  padding: 11px 14px;
  border: 1px solid var(--pish-border-default);
  border-radius: var(--radius-md);
  font-family: var(--font-body);
  font-size: 0.92rem;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
  background: var(--pish-bg-elevated);
  color: var(--text-primary);
}

.form-group input::placeholder,
.form-group textarea::placeholder {
  color: var(--text-muted);
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  outline: none;
  border-color: var(--pish-accent);
  box-shadow: 0 0 0 3px var(--pish-accent-ring);
}

.form-group textarea {
  resize: vertical;
  min-height: 120px;
}

/* ═══════════════════════ Article Card ═══════════════════════ */
.article-card {
  display: flex;
  flex-direction: column;
  background: var(--bg-card);
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--border-color);
  transition: border-color var(--transition), box-shadow var(--transition), transform var(--transition);
}

.article-card:hover {
  border-color: var(--pish-border-hover);
  box-shadow: var(--shadow-md), var(--shadow-glow);
  transform: translateY(-2px);
}

.article-card-image {
  aspect-ratio: 16/9;
  overflow: hidden;
}

.article-card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.article-card-body {
  padding: var(--spacing-md);
  flex: 1;
  display: flex;
  flex-direction: column;
}

.article-card-category {
  font-size: 0.72rem;
  color: var(--pish-accent);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: var(--spacing-sm);
}

.article-card-title {
  font-size: 1.05rem;
  font-weight: 600;
  line-height: 1.4;
  margin-bottom: var(--spacing-sm);
  color: var(--text-primary);
}

.article-card-excerpt {
  font-size: 0.9rem;
  color: var(--text-secondary);
  line-height: 1.6;
  flex: 1;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.article-card-meta {
  font-size: 0.78rem;
  color: var(--text-muted);
  margin-top: var(--spacing-sm);
  padding-top: var(--spacing-sm);
  border-top: 1px solid var(--border-light);
}

/* ═══════════════════════ Breadcrumb ═══════════════════════ */
.breadcrumb {
  padding: var(--spacing-md) 0;
  font-size: 0.85rem;
  color: var(--text-muted);
}

.breadcrumb a { color: var(--text-secondary); }
.breadcrumb a:hover { color: var(--pish-accent); }
.breadcrumb span { color: var(--text-primary); }
.breadcrumb .sep { margin: 0 8px; color: var(--text-muted); }

/* ═══════════════════════ Filter Bar ═══════════════════════ */
.filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-sm);
  margin-bottom: var(--spacing-lg);
  padding-bottom: var(--spacing-md);
  border-bottom: 1px solid var(--pish-border-subtle);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.filter-tag {
  padding: 5px 14px;
  border-radius: var(--radius-full);
  font-size: 0.82rem;
  font-weight: 500;
  background: var(--pish-bg-elevated);
  color: var(--text-secondary);
  white-space: nowrap;
  transition: all var(--transition-fast);
  border: 1px solid transparent;
}

.filter-tag:hover {
  background: var(--pish-accent-muted);
  color: var(--pish-accent);
  border-color: var(--pish-border-hover);
}

.filter-tag.active {
  background: var(--pish-accent-muted);
  color: var(--pish-accent);
  border-color: var(--pish-accent);
}
.filter-tag.active:hover {
  background: rgba(64,224,208,0.18);
}

/* ═══════════════════════ Empty State ═══════════════════════ */
.empty-state {
  text-align: center;
  padding: var(--spacing-2xl) 0;
  color: var(--text-muted);
}

.empty-state .icon,
.empty-state-icon {
  font-size: 3rem;
  margin-bottom: var(--spacing-md);
  opacity: 0.5;
}

/* ═══════════════════════ Loading / Skeleton ═══════════════════════ */
.skeleton {
  background: linear-gradient(90deg, var(--pish-bg-elevated) 25%, rgba(255,255,255,0.03) 50%, var(--pish-bg-elevated) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
  border-radius: var(--radius-sm);
}

@keyframes shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

/* ═══════════════════════ Pagination ═══════════════════════ */
.pagination {
  display: flex;
  justify-content: center;
  gap: 4px;
  margin-top: var(--spacing-xl);
}

.pagination a,
.pagination span {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: var(--radius-sm);
  font-size: 0.88rem;
  background: var(--pish-bg-elevated);
  color: var(--text-secondary);
  transition: all var(--transition-fast);
  border: 1px solid transparent;
}

.pagination a:hover {
  background: var(--pish-accent-muted);
  color: var(--pish-accent);
  border-color: var(--pish-border-hover);
}

.pagination .active {
  background: var(--pish-accent);
  color: #09090B;
  border-color: var(--pish-accent);
  font-weight: 600;
}

.pagination .disabled {
  opacity: 0.3;
  pointer-events: none;
}

/* ═══════════════════════ Site Footer ═══════════════════════ */
.site-footer {
  background: linear-gradient(180deg, #0A0A0C 0%, #0F0F14 100%);
  color: var(--text-secondary);
}
.footer-accent {
  height: 3px;
  background: linear-gradient(90deg, #1A8A7D, #C9A96E);
  opacity: 0.6;
}
.footer-simple {
  padding: 32px var(--spacing-md) 28px;
  text-align: center;
}

/* ── Row 1: Page Navigation ── */
.footer-nav {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 4px 20px;
  margin-bottom: 20px;
}
.footer-nav a {
  color: #999999;
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  transition: color 0.2s;
}
.footer-nav a:hover {
  color: #1A8A7D;
}

/* ── Row 2: Friend Links ── */
.footer-friend-links {
  margin-bottom: 16px;
  font-size: 13px;
  color: #777777;
}
.footer-label {
  color: #666666;
  font-size: 12px;
}
.footer-friend-links a {
  color: #888888;
  text-decoration: none;
  transition: color 0.2s;
}
.footer-friend-links a:hover {
  color: #C9A96E;
}
.footer-link-sep {
  color: #3A3A3A;
  margin: 0 8px;
}

/* ── Row 3: Legal + ICP ── */
.footer-legal {
  font-size: 11px;
  color: #555555;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0 10px;
}
.footer-legal a {
  color: #555555;
  text-decoration: none;
  transition: color 0.2s;
}
.footer-legal a:hover {
  color: #888888;
}
.footer-legal-sep {
  color: #3A3A3A;
}

/* ═══════════════════════ Mobile Menu Overlay ═══════════════════════ */
.mobile-menu {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2000;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--transition);
}

.mobile-menu.open {
  opacity: 1;
  pointer-events: auto;
}

.mobile-menu-panel {
  position: absolute;
  top: 0;
  right: -300px;
  width: 280px;
  height: 100%;
  background: var(--pish-bg-elevated);
  border-left: 1px solid var(--pish-border-default);
  padding: var(--spacing-xl);
  transition: right var(--transition);
  overflow-y: auto;
}

.mobile-menu.open .mobile-menu-panel {
  right: 0;
}

.mobile-menu-close {
  position: absolute;
  top: 16px;
  right: 16px;
  font-size: 1.4rem;
  background: none;
  color: var(--text-secondary);
  border-radius: var(--radius-sm);
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.mobile-menu-close:hover {
  color: var(--text-primary);
  background: rgba(255,255,255,0.06);
}

.mobile-menu a {
  display: block;
  padding: 12px 0;
  font-size: 1.05rem;
  font-weight: 500;
  color: var(--text-primary);
  border-bottom: 1px solid var(--pish-border-subtle);
  transition: color var(--transition-fast);
}
.mobile-menu a:hover {
  color: var(--pish-accent);
}

/* ═══════════════════════ Section Nav (Detail Page) ═══════════════════════ */
.section-nav {
  position: sticky;
  top: var(--pish-header-height);
  z-index: 99;
  background: rgba(9, 9, 11, 0.85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--pish-border-subtle);
  overflow-x: auto;
  white-space: nowrap;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.section-nav::-webkit-scrollbar { display: none; }

.section-nav-link {
  display: inline-block;
  padding: 10px 15px;
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--text-secondary);
  text-decoration: none;
  border-bottom: 2px solid transparent;
  transition: color var(--transition-fast), border-color var(--transition-fast);
  flex-shrink: 0;
}
.section-nav-link:hover,
.section-nav-link.active {
  color: var(--pish-accent);
  border-bottom-color: var(--pish-accent);
}

/* ═══════════════════════ Toast ═══════════════════════ */
.toast {
  position: fixed;
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 3000;
  padding: 12px 24px;
  border-radius: var(--radius-md);
  background: var(--pish-bg-elevated);
  border: 1px solid var(--pish-border-default);
  color: var(--text-primary);
  font-size: 0.9rem;
  box-shadow: var(--shadow-lg);
  animation: toastIn 0.3s var(--pish-ease-out);
}

.toast-success { background: var(--pish-success-muted);  border-color: rgba(16,185,129,0.25); color: var(--pish-success); }
.toast-error   { background: var(--pish-error-muted);    border-color: rgba(239,68,68,0.25);  color: var(--pish-error); }

@keyframes toastIn {
  from { opacity: 0; transform: translateX(-50%) translateY(-10px); }
  to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}

/* ═══════════════════════ Scroll Animation ═══════════════════════ */
.fade-in {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s var(--pish-ease-out), transform 0.6s var(--pish-ease-out);
}

.fade-in.visible {
  opacity: 1;
  transform: translateY(0);
}

/* ═══════════════════════ COI Gauge ═══════════════════════ */
.coi-gauge-bg {
  fill: none;
  stroke: rgba(255,255,255,0.08);
  stroke-width: 12;
}

.coi-gauge-fill {
  fill: none;
  stroke-width: 12;
  stroke-linecap: round;
  transition: stroke-dashoffset 1s var(--pish-ease-out);
}

/* ═══════════════════════ Kitten Scroll Fade ═══════════════════════ */
.kitten-scroll-wrap::before,
.kitten-scroll-wrap::after {
  opacity: 0;
  transition: opacity 0.3s ease;
}

.kitten-scroll-wrap::before {
  background: linear-gradient(to right, var(--bg-section), transparent);
}

.kitten-scroll-wrap::after {
  background: linear-gradient(to left, var(--bg-section), transparent);
}

.kitten-scroll-wrap.has-overflow::before,
.kitten-scroll-wrap.has-overflow::after {
  opacity: 1;
}

/* ═══════════════════════ Lightbox ═══════════════════════ */
.lightbox-backdrop {
  background: rgba(0, 0, 0, 0.94);
}

.lightbox-close {
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.1);
  color: var(--text-primary);
}
.lightbox-close:hover { background: rgba(255,255,255,0.16); }

.lightbox-prev,
.lightbox-next {
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.08);
  color: var(--text-primary);
}
.lightbox-prev:hover,
.lightbox-next:hover { background: rgba(255,255,255,0.14); }

/* ═══════════════════════ Language Switch Dropdown ═══════════════════════ */
.lang-dropdown a svg {
  margin-right: 6px;
  vertical-align: -0.15em;
}

/* ═══════════════════════ RTL Support (Uyghur) ═══════════════════════ */
html[lang="ug"],
[dir="rtl"],
body[data-locale="ug"] {
  direction: rtl;
  text-align: right;
}

html[lang="ug"] body,
html[lang="ug"],
[dir="rtl"] body,
body[data-locale="ug"] {
  font-family: var(--pish-font-uyghur) !important;
}

/* Force ALL headings & title elements to use Uyghur font */
html[lang="ug"] h1,
html[lang="ug"] h2,
html[lang="ug"] h3,
html[lang="ug"] h4,
html[lang="ug"] h5,
html[lang="ug"] h6,
html[lang="ug"] .section-title,
html[lang="ug"] .page-hero-title,
html[lang="ug"] .hero-title,
html[lang="ug"] .card-title,
html[lang="ug"] .feature-title,
html[lang="ug"] .article-card-title,
html[lang="ug"] .litter-hero-name,
html[lang="ug"] .litter-stat-value,
html[lang="ug"] .review-card-title,
html[lang="ug"] .health-guarantee-card-title,
body[data-locale="ug"] h1,
body[data-locale="ug"] h2,
body[data-locale="ug"] h3,
body[data-locale="ug"] h4,
body[data-locale="ug"] h5,
body[data-locale="ug"] h6,
body[data-locale="ug"] .section-title,
body[data-locale="ug"] .page-hero-title,
body[data-locale="ug"] .card-title,
body[data-locale="ug"] .litter-hero-name,
body[data-locale="ug"] .litter-stat-value {
  font-family: var(--pish-font-uyghur) !important;
}

[dir="rtl"] .header-nav,
[dir="rtl"] .header-actions,
body[data-locale="ug"] .header-nav,
body[data-locale="ug"] .header-actions {
  flex-direction: row-reverse;
}

[dir="rtl"] .mobile-menu-panel {
  right: auto;
  left: -300px;
}
[dir="rtl"] .mobile-menu.open .mobile-menu-panel {
  left: 0;
}

[dir="rtl"] .timeline {
  padding-left: 0;
  padding-right: 24px;
}
[dir="rtl"] .timeline::before {
  left: auto;
  right: 0;
}
[dir="rtl"] .timeline-item::before {
  left: auto;
  right: -28px;
}

/* ═══════════════════════ Responsive: Tablet ═══════════════════════ */
@media (min-width: 640px) {
  .footer-grid {
    grid-template-columns: 2fr 1f
r 1fr;
  }

  .card-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .article-card {
    flex-direction: row;
  }

  .article-card-image {
    width: 240px;
    flex-shrink: 0;
  }
}

/* ═══════════════════════ Responsive: Desktop ═══════════════════════ */
@media (min-width: 1024px) {
  body { padding-bottom: 0; }

  .header-nav {
    display: flex;
    gap: 4px;
  }

  .menu-toggle { display: none; }
  .footer { margin-bottom: 0; }

  .card-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .detail-hero .container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-xl);
    align-items: center;
  }
  .detail-hero .container .breadcrumb {
    grid-column: 1 / -1;
  }
}

/* ═══════════════════════ Print ═══════════════════════ */
@media print {
  .header, .footer, .menu-toggle { display: none; }
  body { padding: 0; background: white; color: black; }
}


/* ═══════════════════════════════════════════════════════
   v8.0 Sections: Meet · Personality · COI · Offspring
   Dark-adapted from theme.css
   ═══════════════════════════════════════════════════════ */

/* ── Section: 认识 (Meet) ── */
.meet-section {
  text-align: center;
}

.meet-card {
  max-width: 740px;
  margin: 0 auto;
  background: var(--bg-card);
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-color);
  padding: var(--spacing-xl) var(--spacing-lg);
  position: relative;
}

.meet-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 48px;
  height: 3px;
  background: var(--pish-accent);
  border-radius: 0 0 3px 3px;
  opacity: 0.7;
}

.meet-quote {
  font-family: var(--font-heading);
  font-size: clamp(1.15rem, 2.5vw, 1.5rem);
  font-style: italic;
  color: var(--pish-accent);
  line-height: 1.55;
  max-width: 680px;
  margin: 0 auto var(--spacing-sm);
  opacity: 0.85;
}

.meet-attribution {
  font-size: 0.82rem;
  color: var(--text-muted);
  margin-bottom: var(--spacing-xl);
}

.meet-pills {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--spacing-sm);
  margin-bottom: var(--spacing-lg);
}

.meet-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 5px 14px;
  border-radius: var(--radius-full);
  font-size: 0.82rem;
  font-weight: 500;
  background: var(--pish-accent-muted);
  color: var(--pish-accent);
  border: 1px solid rgba(64,224,208,0.12);
  white-space: nowrap;
  transition: all var(--transition-fast);
}
.meet-pill:hover {
  background: rgba(64,224,208,0.18);
  border-color: var(--pish-border-hover);
  transform: translateY(-1px);
}

.meet-stats {

  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--spacing-lg);
  margin-bottom: var(--spacing-xl);
  padding: var(--spacing-md) var(--spacing-lg);
  background: var(--pish-bg-elevated);
  border-radius: var(--radius-md);
  border: 1px solid var(--pish-border-subtle);
}

.meet-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  font-size: 0.88rem;
  color: var(--text-secondary);
  min-width: 70px;
}

.meet-stat-icon {
  font-size: 1.15rem;
  margin-bottom: 2px;
  opacity: 0.7;
}

.meet-stat-value {
  font-weight: 600;
  color: var(--text-primary);
  font-size: 0.92rem;
}

.meet-stat-label {
  font-size: 0.72rem;
  color: var(--text-muted);
}

.meet-story {
  max-width: 700px;
  margin: var(--spacing-lg) auto 0;
  text-align: left;
  color: var(--text-secondary);
  line-height: 1.85;
  font-size: 0.92rem;
}

.meet-story p + p {
  margin-top: var(--spacing-md);
}

/* ── Section: 性格气质 (Personality) ── */
.personality-section {
  text-align: center;
}

.personality-header {
  margin-bottom: var(--spacing-xl);
}

.personality-grid {

  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
  gap: var(--spacing-md);
  max-width: 900px;
  margin: 0 auto;
}

.personality-trait {
  background: var(--pish-bg-elevated);
  border: 1px solid var(--pish-border-default);
  border-radius: var(--radius-lg);
  padding: var(--spacing-lg);
  text-align: left;
  transition: border-color var(--transition), transform var(--transition);
}
.personality-trait:hover {
  border-color: var(--pish-border-hover);
  transform: translateY(-2px);
}

.trait-header {
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
  margin-bottom: var(--spacing-xs);
}

.trait-emoji {
  font-size: 1.15rem;
}

.trait-name {
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--text-primary);
}

.trait-level {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 600;
  padding: 2px 10px;
  border-radius: var(--radius-full);
  margin-bottom: var(--spacing-sm);
  letter-spacing: 0.03em;
}

.trait-level.high   { background: var(--pish-success-muted); color: var(--pish-success); }
.trait-level.medium { background: var(--pish-gold-muted);    color: var(--pish-gold); }
.trait-level.low    { background: rgba(107,114,128,0.15);    color: var(--text-secondary); }

.trait-bar-bg {
  height: 8px;
  border-radius: 4px;
  background: rgba(255,255,255,0.06);
  overflow: hidden;
  margin-bottom: var(--spacing-xs);
}

.trait-bar-fill {
  height: 100%;
  border-radius: 4px;
  transition: width 0.8s var(--pish-ease-out);
}

.trait-bar-fill.high   { background: linear-gradient(90deg, #10B981, #34D399); }
.trait-bar-fill.medium { background: linear-gradient(90deg, #F59E0B, #C9A96E); }
.trait-bar-fill.low    { background: linear-gradient(90deg, #6B7280, #9CA3AF); }

.trait-desc {
  font-size: 0.76rem;
  color: var(--text-muted);
  line-height: 1.5;
  margin-top: 4px;
}

/* ── Section: COI ── */
.coi-section {
  text-align: center;
}

.coi-card {
  max-width: 760px;
  margin: 0 auto;
  background: var(--pish-bg-elevated);
  border: 1px solid var(--pish-border-default);
  border-radius: var(--radius-lg);
  padding: var(--spacing-xl);
}

.coi-body {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-xl);
  justify-content: center;
}

.coi-gauge-wrap {
  position: relative;
  width: 180px;
  height: 180px;
  flex-shrink: 0;
}

.coi-gauge-svg {
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}

.coi-gauge-center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.coi-gauge-value {
  font-family: var(--font-heading);
  font-size: 2.2rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.02em;
}

.coi-gauge-unit {
  font-size: 0.72rem;
  color: var(--text-muted);
  margin-top: 4px;
}

.coi-details {
  text-align: left;
  min-width: 200px;
}

.coi-rating {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 600;
  padding: 4px 12px;
  border-radius: var(--radius-full);
  margin-bottom: var(--spacing-md);
  letter-spacing: 0.04em;
}

.coi-rating.excellent { background: var(--pish-success-muted); color: var(--pish-success); }
.coi-rating.good      { background: var(--pish-info-muted);    color: var(--pish-info); }
.coi-rating.moderate  { background: var(--pish-gold-muted);    color: var(--pish-gold); }
.coi-rating.concern   { background: var(--pish-warning-muted); color: var(--pish-warning); }
.coi-rating.high      { background: var(--pish-error-muted);   color: var(--pish-error); }

.coi-detail-row {
  display: flex;
  justify-content: space-between;
  padding: 6px 0;
  border-bottom: 1px solid var(--pish-border-subtle);
  font-size: 0.85rem;
}

.coi-detail-row:last-of-type {
  border-bottom: none;
}

.coi-detail-label {
  color: var(--text-muted);
}

.coi-detail-value {
  font-weight: 600;
  color: var(--text-primary);
}

.coi-note {
  margin-top: var(--spacing-lg);
  padding: var(--spacing-md);
  background: var(--pish-bg-surface);
  border-radius: var(--radius-md);
  border: 1px solid var(--pish-border-subtle);
  font-size: 0.8rem;
  color: var(--text-secondary);
  line-height: 1.6;
}

/* ── Section: Offspring Kitten Scroll ── */
.kitten-scroll-wrap {
  position: relative;
}

.kitten-scroll {
  display: flex;
  gap: var(--spacing-md);
  overflow-x: auto;
  overflow-y: visible;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: var(--pish-border-default) transparent;
  padding-bottom: var(--spacing-sm);
  padding-left: 2px;
  padding-right: 2px;
}

.kitten-scroll::-webkit-scrollbar { height: 5px; }
.kitten-scroll::-webkit-scrollbar-track { background: transparent; }
.kitten-scroll::-webkit-scrollbar-thumb {
  background: var(--pish-border-default);
  border-radius: 10px;
}

.kitten-card {
  flex: 0 0 auto;
  width: 180px;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  overflow: hidden;
  scroll-snap-align: start;
  transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
  text-decoration: none;
  color: inherit;
  display: block;
}

.kitten-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md), var(--shadow-glow);
  border-color: var(--pish-border-hover);
}

.kitten-card-photo {
  aspect-ratio: 3 / 4;
  overflow: hidden;
  background: var(--pish-bg-elevated);
  position: relative;
}

.kitten-card-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.kitten-card:hover .kitten-card-photo img {
  transform: scale(1.05);
}

.kitten-card-photo .placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  font-size: 3rem;
  background: var(--pish-bg-elevated);
  color: var(--text-muted);
}

.kitten-card-badge {
  position: absolute;
  top: 8px;
  right: 8px;
  padding: 3px 10px;
  border-radius: 12px;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.3px;
}

.kitten-card-body {
  padding: var(--spacing-sm) var(--spacing-sm) var(--spacing-md);
}

.kitten-card-name {
  font-size: 1rem;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.kitten-card-color {
  font-size: 0.78rem;
  color: var(--text-muted);
  margin-bottom: 4px;
}

.kitten-card-price {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--pish-accent);
  margin-top: 4px;
}

/* ── Offspring empty state ── */
.kitten-empty {
  text-align: center;
  padding: var(--spacing-xl);
  color: var(--text-muted);
  font-size: 0.9rem;
}

/* ═══════════════════════ v8.0 Mobile Responsive ═══════════════════════ */
@media (max-width: 768px) {
  .meet-stats {
    touch-action: pan-x;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-sm);

  }

  .personality-grid {
    touch-action: pan-x;
    grid-template-columns: 1fr;
    gap: var(--spacing-sm);
  }

  .personality-trait {
    padding: var(--spacing-md);
  }

  .trait-name {
    font-size: 0.85rem;
  }

  .trait-bar-bg {
    height: 8px;
  }

  .coi-body {
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-lg);
  }

  .coi-gauge-wrap {
    width: 140px;
    height: 140px;
  }

  .coi-gauge-value {
    font-size: 1.8rem;
  }

  .coi-details {
    text-align: center;
  }

  .kitten-card {
    width: 150px;
  }

  .kitten-card-name {
    font-size: 0.9rem;
  }

  .kitten-scroll-wrap::before,
  .kitten-scroll-wrap::after {
    width: 24px;
  }
}

@media (min-width: 769px) {
  .kitten-card {
    width: 200px;
  }
}

/* ═══════════════════════════════════════════════════════
   5代血统树 — Midnight Silk 暗色版
   无框纯文字优雅族谱 (Text-Only Pedigree)
   本猫顶部居中 → 向下展开 → 逐代缩小
   性别通过文字颜色区分，未知节点不渲染
   ═══════════════════════════════════════════════════════ */

/* ── 树容器: 暗色面板 + 横向滚动 ── */
.pft-tree {
  --pft-male: var(--pish-pft-male);
  --pft-female: var(--pish-pft-female);
  --pft-gold: var(--pish-gold);
  --pft-bg: var(--pish-bg-canvas);
  --pft-line: var(--pish-pft-line);
  --pft-text: var(--pish-pft-text);
  --pft-text-dim: var(--pish-pft-text-dim);

  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  overflow-x: auto;
  overflow-y: visible;
  -webkit-overflow-scrolling: touch;

  padding: 32px 20px 24px;
  margin: var(--spacing-lg, 24px) 0;

  background:
    radial-gradient(ellipse 600px 200px at 50% 0%, rgba(64,224,208,0.05), transparent),
    var(--pish-bg-elevated);
  border-radius: var(--radius-xl, 24px);
  border: 1px solid var(--pish-border-subtle);
  box-shadow: var(--pish-shadow-md);
  position: relative;
}

/* ── 滚动条 ── */
.pft-tree::-webkit-scrollbar { height: 4px; }
.pft-tree::-webkit-scrollbar-track { background: transparent; }
.pft-tree::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.08);
  border-radius: 12px;
}
.pft-tree {
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.08) transparent;
}

/* ── 代际层级 (垂直堆叠) ── */
.pft-level {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  position: relative;
}
.pft-level-label {
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--pft-text-dim);
  margin-bottom: 6px;
  text-align: center;
}
.pft-level-1 .pft-level-label {
  color: var(--pish-gold);
  font-size: 0.7rem;
}

/* ── 每代节点行 (横向排列) ── */
.pft-row {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: 6px;
  flex-wrap: nowrap;
}

/* ── 连接线区域 ── */
.pft-connector {
  position: relative;
  display: flex;
  justify-content: center;
  width: 100%;
  height: 24px;
  flex-shrink: 0;
}
/* 向下直线 */
.pft-connector::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  width: 1.5px;
  height: 100%;
  background: var(--pft-line);
  transform: translateX(-0.75px);
}
.pft-level-1 + .pft-connector { height: 32px; }

/* ═══════════ NODE: 无框纯文字块 ═══════════ */
.pft-node {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  text-align: center;
  color: var(--pft-text);
  padding: 5px 8px;
  border-radius: 4px;
  transition: color var(--transition-fast, 0.15s ease),
              opacity var(--transition-fast, 0.15s ease);
  flex-shrink: 0;
  min-width: 40px;
  position: relative;
}

.pft-node:hover {
  color: rgba(255, 255, 255, 0.95);
  z-index: 2;
}

/* ═══════════ 名字 ═══════════ */
.pft-name {
  font-weight: 600;
  line-height: 1.3;
  word-break: break-word;
  transition: color var(--transition-fast, 0.15s ease),
              text-decoration-color var(--transition-fast, 0.15s ease);
}

.pft-node:hover .pft-name {
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: currentColor;
}

/* ═══════════ 颜色 / 血统详情 ═══════════ */
.pft-detail {
  line-height: 1.2;
  word-break: break-word;
  opacity: 0.7;
  margin-top: 2px;
  transition: opacity var(--transition-fast, 0.15s ease);
}

.pft-node:hover .pft-detail {
  opacity: 0.9;
}

/* ═══════════ 性别 / 本猫 文字颜色 ═══════════ */
.pft-self .pft-name  { color: var(--pish-gold); }
.pft-male .pft-name  { color: var(--pft-male); }
.pft-female .pft-name { color: var(--pft-female); }

.pft-self .pft-detail  { color: var(--pish-gold); }
.pft-male .pft-detail  { color: var(--pft-male); }
.pft-female .pft-detail { color: var(--pft-female); }

/* ═══════════ 逐代字号递减 ═══════════ */
/* Level 1 — 本猫 (最大，视觉焦点) */
.pft-level-1 .pft-name   { font-size: 0.95rem; }
.pft-level-1 .pft-detail { font-size: 0.55rem; }

/* Level 2 — 父母 */
.pft-level-2 .pft-name   { font-size: 0.75rem; }
.pft-level-2 .pft-detail { font-size: 0.50rem; }

/* Level 3 — 祖父母 */
.pft-level-3 .pft-name   { font-size: 0.62rem; }
.pft-level-3 .pft-detail { font-size: 0.45rem; }

/* Level 4 — 曾祖父母 */
.pft-level-4 .pft-name   { font-size: 0.55rem; }
.pft-level-4 .pft-detail { font-size: 0.42rem; }

/* Level 5 — 高祖父母 (最小) */
.pft-level-5 .pft-name   { font-size: 0.48rem; }
.pft-level-5 .pft-detail { font-size: 0.38rem; }

/* ═══════════ V形分支线 (保留结构) ═══════════ */
.pft-branch {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  width: 100%;
  flex-shrink: 0;
}
.pft-branch::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  width: 0;
  height: 0;
  border-left: 1px solid var(--pft-line);
  border-right: 1px solid var(--pft-line);
}

/* ── 空状态 ── */
.pedigree-empty-msg {
  text-align: center;
  padding: 48px 20px;
  color: rgba(255, 255, 255, 0.4);
  font-size: 0.88rem;
}

/* ═══════════ 血统树移动端 (≤768px) — 按比例缩小 ═══════════ */
@media (max-width: 768px) {
  .pft-tree {
    padding: 20px 12px 16px;
    margin: var(--spacing-md, 16px) 0;
    border-radius: var(--radius-lg, 16px);
  }

  .pft-row {
    gap: 4px;
  }

  .pft-node {
    padding: 3px 5px;
    min-width: 32px;
  }

  .pft-level-label {
    font-size: 0.58rem;
  }
  .pft-level-1 .pft-level-label {
    font-size: 0.62rem;
  }

  .pft-level-1 .pft-name   { font-size: 0.80rem; }
  .pft-level-1 .pft-detail { font-size: 0.50rem; }

  .pft-level-2 .pft-name   { font-size: 0.65rem; }
  .pft-level-2 .pft-detail { font-size: 0.45rem; }

  .pft-level-3 .pft-name   { font-size: 0.54rem; }
  .pft-level-3 .pft-detail { font-size: 0.40rem; }

  .pft-level-4 .pft-name   { font-size: 0.46rem; }
  .pft-level-4 .pft-detail { font-size: 0.36rem; }

  .pft-level-5 .pft-name   { font-size: 0.42rem; }
  .pft-level-5 .pft-detail { font-size: 0.34rem; }

  .pft-connector { height: 18px; }
  .pft-level-1 + .pft-connector { height: 24px; }
}

/* ═══════════════════════════════════════════════
   Litter Detail v9 Styles
   ═══════════════════════════════════════════════ */

/* ── Status Badge (通用) ── */
.badge-info {
  background: var(--pish-info-muted);
  color: var(--pish-info);
}
.badge-warning {
  background: var(--pish-warning-muted);
  color: var(--pish-warning);
}

/* ═══════════ Hero 区域 ═══════════ */
.litter-hero {
  position: relative;
  background: var(--pish-bg-canvas);
  padding: var(--pish-space-6) 0 var(--pish-space-10);
  overflow: hidden;
}

.litter-hero::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background:
    radial-gradient(ellipse 500px 250px at 30% 20%, rgba(64,224,208,0.06), transparent 60%),
    radial-gradient(ellipse 400px 200px at 70% 50%, rgba(201,169,110,0.05), transparent 60%);
  pointer-events: none;
}

.litter-hero-header {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--pish-space-4);
  flex-wrap: wrap;
  margin: var(--pish-space-6) 0 var(--pish-space-4);
}

.litter-hero-name {
  font-family: var(--pish-font-heading);
  font-size: clamp(1.5rem, 4vw, 2.2rem);
  font-weight: 600;
  color: var(--pish-text-primary);
  letter-spacing: -0.02em;
  margin: 0;
}

.litter-hero-desc {
  text-align: center;
  max-width: 600px;
  margin: 0 auto var(--pish-space-6);
  color: var(--pish-text-secondary);
  font-size: 0.95rem;
  line-height: 1.7;
}

/* ── Litter Status Badge ── */
.litter-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 16px;
  border-radius: var(--pish-radius-full);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  white-space: nowrap;
}

.litter-status.planned {
  background: var(--pish-info-muted);
  color: var(--pish-info);
  border: 1px solid rgba(59, 130, 246, 0.2);
}

.litter-status.pregnant {
  background: rgba(239, 68, 68, 0.12);
  color: #F8719D;
  border: 1px solid rgba(248, 113, 157, 0.25);
  animation: litter-pulse 2s ease-in-out infinite;
}

.litter-status.born {
  background: var(--pish-success-muted);
  color: var(--pish-success);
  border: 1px solid rgba(16, 185, 129, 0.2);
}

.litter-status.completed {
  background: var(--pish-gold-muted);
  color: var(--pish-gold);
  border: 1px solid rgba(201, 169, 110, 0.25);
}

@keyframes litter-pulse {
  0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(248, 113, 157, 0.3); }
  50%      { opacity: 0.85; box-shadow: 0 0 0 8px rgba(248, 113, 157, 0); }
}

/* ── 双亲卡片 ── */
.litter-parents {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--pish-space-6);
  margin: var(--pish-space-6) 0;
  flex-wrap: wrap;
}

.litter-parent-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--pish-space-4);
  padding: var(--pish-space-6);
  background: rgba(255,255,255,0.03);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: var(--pish-radius-lg, 16px);
  transition: all 0.3s var(--pish-ease-out);
  text-decoration: none;
  color: inherit;
  min-width: 200px;
  max-width: 240px;
}

.litter-parent-card:hover {
  transform: translateY(-4px);
  border-color: var(--pish-border-hover);
  box-shadow: var(--pish-shadow-md), var(--pish-shadow-glow);
  background: rgba(255,255,255,0.05);
}

.litter-parent-avatar {
  width: 160px;
  height: 160px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
  border: 2px solid rgba(255,255,255,0.1);
  background: var(--pish-bg-elevated);
  transition: border-color 0.3s var(--pish-ease-out);
}

.litter-parent-card:hover .litter-parent-avatar {
  border-color: var(--pish-border-hover);
}

.litter-parent-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.litter-parent-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  font-size: 3rem;
  color: var(--pish-text-muted);
  background: var(--pish-bg-elevated);
}

.litter-parent-info {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  text-align: center;
}

.litter-parent-role {
  font-size: 0.72rem;
  color: var(--pish-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.litter-parent-name {
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--pish-text-primary);
}

.litter-parent-meta {
  font-size: 0.8rem;
  color: var(--pish-text-secondary);
}

/* ── 中间连接符 (♥) ── */
.litter-parents-join {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.litter-join-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: rgba(239, 68, 68, 0.08);
  border: 1px solid rgba(239, 68, 68, 0.2);
  color: var(--pish-error);
  font-size: 1.2rem;
}

/* ── 统计条 ── */
.litter-stats {
  display: flex;
  justify-content: center;
  gap: var(--pish-space-8);
  margin-top: var(--pish-space-6);
  flex-wrap: wrap;
}

.litter-stat {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.litter-stat-value {
  font-family: var(--pish-font-heading);
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--pish-accent);
  line-height: 1;
  letter-spacing: -0.02em;
}

.litter-stat-label {
  font-size: 0.75rem;
  color: var(--pish-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

/* ═══════════ Timeline 时间线 ═══════════ */
.litter-timeline {
  display: flex;
  align-items: flex-start;
  gap: 0;
  overflow-x: auto;
  overflow-y: visible;
  padding: var(--pish-space-6) 0;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,0.08) transparent;
  justify-content: center;
}

.litter-timeline::-webkit-scrollbar { height: 4px; }
.litter-timeline::-webkit-scrollbar-track { background: transparent; }
.litter-timeline::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,0.08);
  border-radius: 12px;
}

.timeline-node {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  min-width: 80px;
  text-align: center;
}

.timeline-node-dot {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.85rem;
  flex-shrink: 0;
  transition: all 0.3s var(--pish-ease-out);
}

.timeline-node.done .timeline-node-dot {
  background: var(--pish-accent);
  color: #09090B;
  box-shadow: 0 0 12px rgba(64,224,208,0.25);
}

.timeline-node.pending .timeline-node-dot {
  border: 2px dashed rgba(255,255,255,0.15);
  color: var(--pish-text-muted);
  background: transparent;
}

.timeline-node-date {
  font-size: 0.72rem;
  color: var(--pish-text-muted);
  white-space: nowrap;
}

.timeline-node-label {
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--pish-text-secondary);
  white-space: nowrap;
}

.timeline-node.done .timeline-node-label {
  color: var(--pish-text-primary);
}

/* ── 时间线连接线 ── */
.timeline-connector {
  width: 40px;
  height: 2px;
  background: rgba(255,255,255,0.08);
  flex-shrink: 0;
  margin-top: 18px;
  border-radius: 1px;
  transition: background 0.5s var(--pish-ease-out);
}

.timeline-connector.done {
  background: var(--pish-accent);
  opacity: 0.5;
}

/* ═══════════ Pedigree Tree + COI ═══════════ */
.litter-pedigree-wrap {
  max-width: 900px;
  margin: 0 auto;
}

.litter-pedigree-tree {
  --pft-male: var(--pish-pft-male);
  --pft-female: var(--pish-pft-female);
  --pft-gold: var(--pish-gold);
  --pft-bg: var(--pish-bg-canvas);
  --pft-line: var(--pish-pft-line);

  padding: var(--pish-space-8);
  background:
    radial-gradient(ellipse 400px 150px at 50% 0%, rgba(64,224,208,0.04), transparent),
    var(--pish-bg-elevated);
  border-radius: var(--pish-radius-xl, 20px);
  border: 1px solid var(--pish-border-subtle);
  box-shadow: var(--pish-shadow-md);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.litter-pedigree-tree::-webkit-scrollbar { height: 4px; }
.litter-pedigree-tree::-webkit-scrollbar-track { background: transparent; }
.litter-pedigree-tree::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,0.08);
  border-radius: 12px;
}

/* ── 血统分支 ── */
.pedigree-branch {
  margin-bottom: var(--pish-space-6);
}

.pedigree-branch:last-child {
  margin-bottom: 0;
}

.pedigree-branch-label {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--pish-gold);
  letter-spacing: 0.06em;
  margin-bottom: var(--pish-space-3);
  display: flex;
  align-items: center;
  gap: 6px;
}

/* ── 代际层级 ── */
.pedigree-generation {
  list-style: none;
  margin: 0;
  padding: 0 0 0 var(--pish-space-4);
  border-left: 1px solid var(--pish-pft-line);
  position: relative;
}

.pedigree-generation.gen-1 {
  border-left: none;
  padding-left: 0;
}

.pedigree-generation.gen-1 > .pedigree-node {
  padding: var(--pish-space-2) 0;
}

/* ── 血统节点 ── */
.pedigree-node {
  padding: 4px 0 4px var(--pish-space-3);
  position: relative;
}

.pedigree-node::before {
  content: '';
  position: absolute;
  left: calc(-1 * var(--pish-space-4));
  top: 12px;
  width: var(--pish-space-3);
  height: 1px;
  background: var(--pish-pft-line);
}

.pedigree-generation.gen-1 > .pedigree-node::before {
  display: none;
}

.pedigree-node-name {
  font-weight: 600;
  font-size: 0.85rem;
  color: var(--pish-pft-text);
  display: block;
  line-height: 1.3;
}

.pft-male .pedigree-node-name { color: var(--pish-pft-male); }
.pft-female .pedigree-node-name { color: var(--pish-pft-female); }

.pedigree-node-meta {
  font-size: 0.7rem;
  color: var(--pish-pft-text-dim);
  display: block;
  margin-top: 2px;
}

/* ── 代际字号递减 ── */
.pedigree-generation.gen-1 .pedigree-node-name { font-size: 0.9rem; }
.pedigree-generation.gen-1 .pedigree-node-meta { font-size: 0.72rem; }
.pedigree-generation.gen-2 .pedigree-node-name { font-size: 0.78rem; }
.pedigree-generation.gen-2 .pedigree-node-meta { font-size: 0.64rem; }
.pedigree-generation.gen-3 .pedigree-node-name { font-size: 0.7rem; }
.pedigree-generation.gen-3 .pedigree-node-meta { font-size: 0.58rem; }
.pedigree-generation.gen-4 .pedigree-node-name { font-size: 0.62rem; }
.pedigree-generation.gen-4 .pedigree-node-meta { font-size: 0.52rem; }
.pedigree-generation.gen-5 .pedigree-node-name { font-size: 0.55rem; }
.pedigree-generation.gen-5 .pedigree-node-meta { font-size: 0.46rem; }

/* ── COI 双环并排 ── */
.coi-dual {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: var(--pish-space-10);
  flex-wrap: wrap;
  padding: var(--pish-space-6) 0;
}

.coi-ring-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--pish-space-3);
}

.coi-ring-label {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--pish-text-secondary);
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: var(--pish-space-2);
}

.coi-ring-rating {
  margin-top: var(--pish-space-2);
  text-align: center;
}

/* ═══════════ Kitten Grid 幼猫网格 ═══════════ */
.litter-kittens-grid {

  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--pish-space-4);
}

.litter-kitten-card {
  background: var(--pish-bg-elevated);
  border-radius: var(--pish-radius-lg, 16px);
  overflow: hidden;
  border: 1px solid var(--pish-border-subtle);
  transition: all 0.3s var(--pish-ease-out);
  text-decoration: none;
  color: inherit;
  display: block;
}

.litter-kitten-card:hover {
  transform: translateY(-4px);
  border-color: var(--pish-border-hover);
  box-shadow: var(--pish-shadow-md), var(--pish-shadow-glow);
}

.litter-kitten-photo {
  position: relative;
  aspect-ratio: 1;
  overflow: hidden;
  background: var(--pish-bg-canvas);
}

.litter-kitten-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s var(--pish-ease-out);
}

.litter-kitten-card:hover .litter-kitten-photo img {
  transform: scale(1.05);
}

.litter-kitten-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  font-size: 2.5rem;
  color: var(--pish-text-muted);
  background: var(--pish-bg-elevated);
}

.litter-kitten-body {
  padding: var(--pish-space-3) var(--pish-space-3) var(--pish-space-4);
  text-align: center;
}

.litter-kitten-name {
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--pish-text-primary);
  margin-bottom: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.litter-kitten-gender {
  font-size: 0.78rem;
  color: var(--pish-text-secondary);
  margin-bottom: 4px;
}

.gender-male {
  color: var(--pish-pft-male);
}

.gender-female {
  color: var(--pish-pft-female);
}

.litter-kitten-price {
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--pish-accent);
  margin-top: 4px;
}

/* ── 计划中窝次消息 ── */
.litter-planned-message {
  text-align: center;
  padding: var(--pish-space-12) var(--pish-space-6);
  background: rgba(255,255,255,0.03);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: var(--pish-radius-lg, 20px);
  max-width: 500px;
  margin: 0 auto;
}

.litter-planned-icon {
  font-size: 3rem;
  color: var(--pish-accent);
  opacity: 0.5;
  margin-bottom: var(--pish-space-4);
}

.litter-planned-message h4 {
  font-size: 1.15rem;
  color: var(--pish-text-primary);
  margin-bottom: var(--pish-space-2);
}

.litter-planned-message p {
  font-size: 0.9rem;
  color: var(--pish-text-secondary);
  line-height: 1.6;
}

.litter-planned-date {
  margin-top: var(--pish-space-4);
  font-size: 0.85rem;
  color: var(--pish-accent);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--pish-accent-muted);
  padding: 6px 16px;
  border-radius: var(--pish-radius-full);
}

/* ═══════════ Video 视频 ═══════════ */
.litter-video-wrap {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: var(--pish-radius-lg, 16px);
  border: 1px solid var(--pish-border-subtle);
  background: #000;
}

/* ═══════════ Data Panel 数据面板 ═══════════ */
.litter-data-panel {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--pish-space-4);
  max-width: 900px;
  margin: 0 auto;
}

.litter-data-card {
  background: rgba(255,255,255,0.03);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: var(--pish-radius-lg, 16px);
  padding: var(--pish-space-6);
}

.litter-data-card-title {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--pish-accent);
  margin-bottom: var(--pish-space-4);
  display: flex;
  align-items: center;
  gap: 8px;
}

.litter-data-rows {
  display: flex;
  flex-direction: column;
  gap: var(--pish-space-2);
}

.litter-data-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 0;
  border-bottom: 1px solid var(--pish-border-subtle);
  font-size: 0.85rem;
}

.litter-data-row:last-child {
  border-bottom: none;
}

.litter-data-label {
  color: var(--pish-text-muted);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.litter-data-value {
  font-weight: 600;
  color: var(--pish-text-primary);
}

/* ── 父母血统摘要 ── */
.litter-data-parent {
  padding: var(--pish-space-3) 0;
}

.litter-data-parent-role {
  font-size: 0.75rem;
  color: var(--pish-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.litter-data-parent-name {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--pish-text-primary);
  display: block;
  margin-top: 2px;
}

.litter-data-parent-meta {
  font-size: 0.8rem;
  color: var(--pish-text-secondary);
  margin-top: 4px;
  display: flex;
  flex-wrap: wrap;
  gap: var(--pish-space-2) var(--pish-space-4);
}

/* ── 繁育笔记 ── */
.litter-data-notes {
  font-size: 0.9rem;
  color: var(--pish-text-secondary);
  line-height: 1.8;
}

/* ═══════════════════════ v11 Data Panel Cards (Dark) ═══════════════════════ */
.litter-data-card-v2 {
  background: var(--bg-card, rgba(255,255,255,0.03));
  border-radius: 20px;
  padding: 28px 24px;
  border: 1px solid var(--border-color, rgba(255,255,255,0.06));
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
  position: relative;
  overflow: hidden;
}

.litter-data-card-v2::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, #147A6E, #C9A96E, #147A6E);
  opacity: 0.6;
}

.litter-data-card-v2:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 32px rgba(201,169,110,0.08), 0 4px 12px rgba(0,0,0,0.3);
  border-color: rgba(201,169,110,0.2);
}

.litter-data-card-v2--full {
  grid-column: 1 / -1;
}

/* ── Card Header (Dark) ── */
.litter-data-card-v2-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 20px;
  padding-bottom: 14px;
  border-bottom: 1px dashed var(--border-color, rgba(255,255,255,0.08));
}

.litter-data-card-v2-icon {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  flex-shrink: 0;
}

.litter-data-card-v2-icon--info {
  background: linear-gradient(135deg, rgba(20,122,110,0.2), rgba(20,122,110,0.08));
  color: #4ECDC4;
}

.litter-data-card-v2-icon--dna {
  background: linear-gradient(135deg, rgba(201,169,110,0.2), rgba(201,169,110,0.08));
  color: #C9A96E;
}

.litter-data-card-v2-icon--doc {
  background: linear-gradient(135deg, rgba(99,102,241,0.2), rgba(99,102,241,0.08));
  color: #818CF8;
}

.litter-data-card-v2-title {
  font-size: 1rem;
  font-weight: 700;
  color: var(--text-primary, rgba(255,255,255,0.92));
  letter-spacing: -0.01em;
}

/* ── Data Rows (Dark) ── */
.litter-data-row-v2 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 0;
  border-bottom: 1px solid rgba(255,255,255,0.04);
}

/* ═══════════════ v11 Data Panel Responsive (Dark) ═══════════════ */
@media (max-width: 768px) {
  .litter-data-card-v2 {
    padding: 20px 16px;
  }
}

/* ═══════════ Empty State Enhance ═══════════ */
.empty-state-icon {
  font-size: 3rem;
  color: var(--pish-text-muted);
  opacity: 0.4;
  margin-bottom: var(--pish-space-4);
}

.empty-state-hint {
  font-size: 0.85rem;
  color: var(--pish-text-muted);
  margin-top: var(--pish-space-2);
}

/* ═══════════ Mobile Responsive (≤768px) ═══════════ */
@media (max-width: 768px) {
  .litter-hero {
    padding: var(--pish-space-4) 0 var(--pish-space-6);
  }

  .litter-hero-header {
    flex-direction: column;
    gap: var(--pish-space-3);
  }

  .litter-parents {
    flex-direction: column;
    align-items: center;
    gap: var(--pish-space-4);
  }

  .litter-parents-join {
    transform: rotate(90deg);
  }

  .litter-parent-card {
    min-width: 180px;
    max-width: 220px;
    padding: var(--pish-space-4);
  }

  .litter-parent-avatar {
    width: 120px;
    height: 120px;
  }

  .litter-parent-name {
    font-size: 0.95rem;
  }

  .litter-stats {
    gap: var(--pish-space-4);
  }

  .litter-stat-value {
    font-size: 1.2rem;
  }

  /* Timeline — 保持可滚动 */
  .litter-timeline {
    justify-content: flex-start;
    padding: var(--pish-space-4) 0;
  }

  .timeline-node {
    min-width: 70px;
  }

  .timeline-node-dot {
    width: 30px;
    height: 30px;
  }

  .timeline-connector {
    width: 28px;
  }

  /* Pedigree */
  .litter-pedigree-tree {
    padding: var(--pish-space-4);
    border-radius: var(--pish-radius-lg);
  }

  .coi-dual {
    gap: var(--pish-space-6);
  }

  /* ── Mobile Horizontal Scroll: 幼猫卡片网格 ── *
/
  .litter-kittens-grid {
    touch-action: pan-x;
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: visible;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: var(--pish-border) transparent;
    gap: var(--pish-space-3);
    padding: var(--pish-space-1) 2px var(--pish-space-2) 2px;
    margin-left: calc(-1 * var(--pish-space-4));
    margin-right: calc(-1 * var(--pish-space-4));
    width: calc(100% + 2 * var(--pish-space-4));
  }
  .litter-kittens-grid::-webkit-scrollbar { height: 4px; }
  .litter-kittens-grid::-webkit-scrollbar-track { background: transparent; }
  .litter-kittens-grid::-webkit-scrollbar-thumb { background: var(--pish-border); border-radius: 10px; }
  .litter-kittens-grid .litter-kitten-card {
    flex: 0 0 200px;
    scroll-snap-align: start;
  }

  .litter-kitten-name {
    font-size: 0.82rem;
  }

  .litter-kitten-price {
    font-size: 0.82rem;
  }

  /* Data Panel — single column */
  .litter-data-panel {
    grid-template-columns: 1fr;
  }

  .litter-planned-message {
    padding: var(--pish-space-8) var(--pish-space-4);
  }
}

/* Tablet — 3 columns for kitten grid */
@media (min-width: 769px) and (max-width: 1024px) {
  .litter-kittens-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* Large desktop — 4 columns (default) */

/* ═══════════════════════════════════════════════
   v10 — 窝次卡片重设计 (Litter Card Redesign)
   5 阶段繁育生命周期进度管线
   暗夜丝路 · 绿松石主题
   ═══════════════════════════════════════════════ */

/* ── Stage Color Tokens ── */
:root {
  --litter-stage-planned:   #3B82F6;
  --litter-stage-mating:    #F59E0B;
  --litter-stage-pregnant:  #EC4899;
  --litter-stage-born:      #10B981;
  --litter-stage-completed: #C9A96E;
}

/* ── Card Grid Modifier ── */
.card-grid--litter {
  gap: var(--spacing-lg);
}

/* ═══════════ LITTER CARD ═══════════ */
.litter-card {
  display: flex;
  flex-direction: column;
  background: var(--bg-card);
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--border-color);
  transition: transform var(--transition),
              box-shadow var(--transition),
              border-color var(--transition);
  text-decoration: none;
  color: inherit;
  position: relative;
}
.litter-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg), 0 0 30px rgba(64, 224, 208, 0.06);
  border-color: var(--color-primary);
}

/* ═══════════ COVER ═══════════ */
.litter-cover {
  position: relative;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  background: linear-gradient(135deg, 
    rgba(64, 224, 208, 0.04) 0%, 
    var(--bg-section) 50%,
    rgba(201, 169, 110, 0.04) 100%);
}
.litter-cover-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}
.litter-card:hover .litter-cover-bg {
  transform: scale(1.06);
}

/* ── Cover Gradient Overlay ── */
.litter-cover-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 65%;
  background: linear-gradient(to top, 
    rgba(9, 9, 11, 0.7) 0%, 
    rgba(9, 9, 11, 0.2) 50%,
    transparent 100%);
  pointer-events: none;
}

/* ── Status Badge (Glassmorphism) ── */
.litter-status-badge {
  position: absolute;
  top: 12px;
  right: 12px;
  padding: 5px 14px;
  border-radius: var(--radius-full);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  transition: all var(--transition-fast);
}
.litter-status--planned {
  background: rgba(59, 130, 246, 0.15);
  color: var(--litter-stage-planned);
  border: 1px solid rgba(59, 130, 246, 0.25);
}
.litter-status--pregnant {
  background: rgba(236, 72, 153, 0.15);
  color: var(--litter-stage-pregnant);
  border: 1px solid rgba(236, 72, 153, 0.25);
  animation: litter-badge-pulse 2s ease-in-out infinite;
}
.litter-status--born {
  background: rgba(16, 185, 129, 0.15);
  color: var(--litter-stage-born);
  border: 1px solid rgba(16, 185, 129, 0.25);
}
.litter-status--completed {
  background: rgba(201, 169, 110, 0.15);
  color: var(--litter-stage-completed);
  border: 1px solid rgba(201, 169, 110, 0.25);
}

/* ── Flat Badge — 无封面模式的紧凑徽章 ── */
.litter-card-header {
  padding: 14px 14px 0;
  display: flex;
  justify-content: flex-end;
}
.litter-status-badge--flat {
  position: static;
  top: auto;
  right: auto;
  display: inline-flex;
}

/* ═══════════ PARENTS ROW ═══════════ */
.litter-parents-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 18px 16px 12px;
  background: var(--bg-card);
}
.litter-parent-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  min-width: 80px;
}
.litter-parent-img {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--border-light);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
  transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}
.litter-card:hover .litter-parent-img {
  transform: scale(1.06);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5);
}
.litter-parent-fallback {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  font-weight: 700;
  border: 2px solid var(--border-light);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}
.litter-parent-sire {
  background: linear-gradient(135deg, #147A6E, #0D5F56);
  color: rgba(255, 255, 255, 0.9);
}
.litter-parent-dam {
  background: linear-gradient(135deg, #C9A96E, #A68A4E);
  color: rgba(255, 255, 255, 0.9);
}
.litter-parent-name {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text-primary);
  max-width: 90px;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.litter-parent-role {
  font-size: 0.62rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 1px;
}
.litter-parents-heart {
  color: var(--color-accent, #C9A96E);
  animation: litter-heart-beat 2s ease-in-out infinite;
  flex-shrink: 0;
  margin-top: -16px;
}

/* ═══════════ PROGRESS PIPELINE ═══════════ */
.litter-pipeline {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px 12px 8px;
  gap: 0;
  background: var(--bg-card);
  border-bottom: 1px solid var(--border-light);
}

/* ── Step ── */
.litter-pipe-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  flex-shrink: 0;
  position: relative;
}

/* ── Dot ── */
.litter-pipe-dot {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--transition);
  position: relative;
  z-index: 1;
}
.litter-pipe-dot svg {
  width: 11px;
  height: 11px;
  display: none;
}

/* States */
.litter-pipe-step.is-done .litter-pipe-dot {
  background: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(64, 224, 208, 0.15);
}
.litter-pipe-step.is-done .litter-pipe-dot svg {
  display: block;
  color: #09090B;
}

.litter-pipe-step.is-current .litter-pipe-dot {
  background: currentColor;
  box-shadow: 0 0 0 4px color-mix(in srgb, currentColor 20%, transparent);
  animation: litter-dot-pulse 2.2s ease-in-out infinite;
}

.litter-pipe-step:not(.is-done):not(.is-current) .litter-pipe-dot {
  background: transparent;
  border: 2px solid var(--border-color);
}
.litter-pipe-step:not(.is-done):not(.is-current) .litter-pipe-empty {
  display: none;
}

/* ── Stage Colors on current step ── */
.litter-pipe-step[data-stage="planned"]   { --step-color: var(--litter-stage-planned); }
.litter-pipe-step[data-stage="mating"]    { --step-color: var(--litter-stage-mating); }
.litter-pipe-step[data-stage="pregnant"]  { --step-color: var(--litter-stage-pregnant); }
.litter-pipe-step[data-stage="born"]      { --step-color: var(--litter-stage-born); }
.litter-pipe-step[data-stage="completed"] { --step-color: var(--litter-stage-completed); }

.litter-pipe-step.is-current {
  color: var(--step-color);
}

/* ── Label ── */
.litter-pipe-label {
  font-size: 0.58rem;
  font-weight: 500;
  color: var(--text-muted);
  white-space: nowrap;
  transition: color var(--transition-fast);
  letter-spacing: 0.3px;
}
.litter-pipe-step.is-done .litter-pipe-label,
.litter-pipe-step.is-current .litter-pipe-label {
  color: var(--text-primary);
  font-weight: 600;
}

/* ── Connector Line ── */
.litter-pipe-line {
  width: 24px;
  max-width: 32px;
  flex: 0 1 auto;
  min-width: 8px;
  height: 2px;
  background: var(--border-color);
  margin: 0 3px;
  margin-bottom: 16px;
  border-radius: 1px;
  transition: background var(--transition);
}
.litter-pipe-line.is-done {
  background: var(--color-primary);
}

/* ═══════════ CARD BODY ═══════════ */
.litter-body {
  padding: var(--spacing-md);
  flex: 1;
  display: flex;
  flex-direction: column;
}
.litter-name {
  font-family: var(--font-heading);
  font-size: 1.15rem;
  font-weight: 700;
  margin-bottom: 6px;
  color: var(--text-primary);
  line-height: 1.3;
}
.litter-parents {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.82rem;
  margin-bottom: 10px;
  flex-wrap: wrap;
}
.litter-parent {
  font-weight: 500;
}
.litter-sire {
  color: #C49A6C;
}
.litter-dam {
  color: #D4A0A0;
}
.litter-cross {
  color: var(--text-muted);
  font-size: 0.7rem;
  font-weight: 300;
}
.litter-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  font-size: 0.78rem;
  color: var(--text-muted);
  margin-top: auto;
}
.litter-meta-item {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
}
.litter-meta-item svg {
  flex-shrink: 0;
  opacity: 0.65;
}
.litter-kittens {
  color: var(--color-primary);
  font-weight: 600;
}
.litter-mated svg {
  color: var(--litter-stage-mating);
  opacity: 0.85;
}

/* ═══════════ ANIMATIONS ═══════════ */
@keyframes litter-dot-pulse {
  0%, 100% { 
    box-shadow: 0 0 0 4px color-mix(in srgb, currentColor 20%, transparent); 
  }
  50% { 
    box-shadow: 0 0 0 10px color-mix(in srgb, currentColor 5%, transparent); 
  }
}
@keyframes litter-badge-pulse {
  0%, 100% { 
    box-shadow: 0 0 0 0 rgba(236, 72, 153, 0.2); 
  }
  50% { 
    box-shadow: 0 0 0 6px rgba(236, 72, 153, 0); 
  }
}

@keyframes litter-heart-beat {
  0%, 100% { transform: scale(1); opacity: 0.8; }
  50% { transform: scale(1.15); opacity: 1; }
}

/* ── Larger parent photos on tablet+ ── */
@media (min-width: 768px) {
  .litter-parent-img,
  .litter-parent-fallback {
    width: 70px;
    height: 70px;
  }
  .litter-parent-name {
    font-size: 0.85rem;
  }
  .litter-parents-heart svg {
    width: 20px;
    height: 20px;
  }
}

/* ═══════════ RESPONSIVE ═══════════ */
@media (max-width: 639px) {
  .litter-pipe-line {
    width: 16px;
    min-width: 6px;
    margin: 0 1px;
    margin-bottom: 16px;
  }
  .litter-pipe-dot {
    width: 18px;
    height: 18px;
  }
  .litter-pipe-dot svg {
    width: 9px;
    height: 9px;
  }
  .litter-pipe-label {
    font-size: 0.52rem;
  }
  .litter-name {
    font-size: 1.05rem;
  }
}

@media (min-width: 1024px) {
  .litter-pipe-line {
    width: 32px;
    min-width: 16px;
  }
}

/* ═══════════════════════════════════════════════
   v10 — 4 个新前端页面组件
   ═══════════════════════════════════════════════ */

/* ── 通用组件 ── */
.required { color: var(--pish-accent); }
.empty-state { text-align:center; padding:var(--spacing-2xl) var(--spacing-md); }
.empty-state-icon { font-size:3rem; margin-bottom:var(--spacing-md); opacity:0.5; }
.empty-state h3 { color:var(--text-muted); margin-bottom:var(--spacing-sm); }
.empty-state p { color:var(--text-muted); }

/* ── 通用 section 变体 ── */
.section-cta {
  background: linear-gradient(135deg, var(--pish-primary-dark), var(--pish-primary));
  color: var(--text-on-dark);
  padding: var(--spacing-2xl) var(--spacing-md);
  text-align: center;
}
.section-cta h3 { color: var(--text-on-dark); margin-bottom: var(--spacing-sm); }

/* ═══════════════════ 评价模块 ═══════════════════ */

/* 总评分聚合 */
.review-aggregate {
  display: flex;
  align-items: center;
  gap: var(--spacing-lg);
  margin-top: var(--spacing-lg);
  padding: var(--spacing-lg);
  background: var(--pish-bg-card);
  border-radius: var(--radius-md);
  border: 1px solid var(--pish-border);
}
.review-aggregate-score {
  font-family: var(--font-heading);
  font-size: 3.5rem;
  font-weight: 700;
  line-height: 1;
  color: #C9A96E;
  min-width: 80px;
  text-align: center;
}
.review-aggregate-stars { display: flex; flex-direction: column; gap: var(--spacing-xs); }
.review-aggregate-count { font-size: 0.85rem; color: var(--text-muted); }

/* 星级评分组件（CSS 实现） */
.star-rating {
  position: relative;
  display: inline-block;
  font-size: 1rem;
  line-height: 1;
  color: transparent;
  -webkit-background-clip: unset;
}
.star-rating-fg {
  position: absolute; left: 0; top: 0;
  overflow: hidden;
  white-space: nowrap;
  color: #C9A96E;
  width: var(--rating, 100%);
}
.star-rating-bg { color: rgba(255,255,255,0.12); }
.star-rating-sm { font-size: 0.85rem; }

/* 星级输入组件 */
.star-input { display: flex; gap: 4px; }
.star-input-btn {
  background: none; border: none;
  font-size: 1.5rem; cursor: pointer;
  color: rgba(255,255,255,0.15);
  transition: color 0.15s ease, transform 0.15s ease;
  padding: 2px;
}
.star-input-btn:hover,
.star-input-btn.active { color: #C9A96E; transform: scale(1.15); }

/* 评价筛选栏 */
.review-filter-bar {
  display: flex; flex-wrap: wrap; gap: var(--spacing-sm);
  margin-bottom: var(--spacing-xl);
  justify-content: center;
}
.review-filter-btn {
  padding: 6px 16px;
  border-radius: 20px;
  border: 1px solid var(--pish-border);
  background: var(--pish-bg-card);
  color: var(--text-secondary);
  font-size: 0.85rem;
  cursor: pointer;
  transition: all var(--transition-fast);
}
.review-filter-btn:hover { border-color: #C9A96E; color: #C9A96E; }
.review-filter-btn.active {
  background: #C9A96E;
  border-color: #C9A96E;
  color: var(--pish-bg);
}

/* 评价卡片网格 */
.review-grid {

  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: var(--spacing-lg);
}

/* 评价卡片 */
.review-card {
  background: var(--pish-bg-card);
  border: 1px solid var(--pish-border);
  border-radius: var(--radius-md);
  padding: var(--spacing-lg);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.review-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.review-card-header {
  display: flex; align-items: center; gap: var(--spacing-md);
  margin-bottom: var(--spacing-sm);
}
.review-card-avatar {
  width: 40px; height: 40px;
  border-radius: 50%;
  background: linear-gradient(135deg, #C9A96E, #147A6E);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 0.9rem;
  flex-shrink: 0;
}
.review-card-name { font-weight: 600; color: var(--text-primary); }
.review-card-date { font-size: 0.8rem; color: var(--text-muted); }
.review-card-title {
  font-family: var(--font-heading);
  font-size: 1.05rem;
  margin: var(--spacing-sm) 0;
  color: var(--text-primary);
}
.review-card-text {
  font-size: 0.9rem; color: var(--text-secondary);
  line-height: 1.7;
  display: -webkit-box;
  -webkit-line-clamp: 6;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.review-card-meta {
  margin-top: var(--spacing-md);
  padding-top: var(--spacing-sm);
  border-top: 1px solid var(--pish-border);
  font-size: 0.8rem; color: var(--text-muted);
  display: flex; gap: var(--spacing-md); align-items: center;
}
.review-reply-badge {
  color: #147A6E;
  font-size: 0.75rem;
}

/* 精选评价轮播 */
#featured-reviews { background: var(--pish-bg-section); }
.review-carousel { position: relative; }
.review-card-featured {
  display: none;
  max-width: 600px;
  margin: 0 auto;
  background: linear-gradient(135deg, rgba(20,122,110,0.08), rgba(201,169,110,0.12));
  border: 1px solid rgba(201,169,110,0.2);
}
.review-card-featured.active { display: block; }

/* 轮播导航点 */
.carousel-dots {
  display: flex; justify-content: center; gap: 8px;
  margin-top: var(--spacing-lg);
}
.carousel-dot {
  width: 10px; height: 10px;
  border-radius: 50%;
  border: none;
  background: rgba(255,255,255,0.15);
  cursor: pointer;
  transition: background 0.3s ease;
}
.carousel-dot.active { background: #C9A96E; }

/* 评价提交表单 */
.review-submit-form {
  max-width: 500px;
  margin: 0 auto;
  text-align: left;
}
.review-submit-form .form-group {
  margin-bottom: var(--spacing-md);
}
.review-submit-form label {
  display: block;
  margin-bottom: var(--spacing-xs);
  font-weight: 500;
  color: var(--text-primary);
}
.review-submit-form input,
.review-submit-form textarea {
  width: 100%;
  padding: 10px 14px;
  border: 1px solid var(--pish-border);
  border-radius: var(--radius-sm);
  background: var(--pish-bg);
  color: var(--text-primary);
  font-size: 0.95rem;
  font-family: var(--font-body);
  transition: border-color 0.2s ease;
}
.review-submit-form input:focus,
.review-submit-form textarea:focus {
  outline: none;
  border-color: var(--pish-primary);
  box-shadow: 0 0 0 3px rgba(20,122,110,0.15);
}
.review-submit-form textarea { resize: vertical; min-height: 100px; }

/* 提交状态消息 */
.review-msg {
  padding: var(--spacing-md);
  border-radius: var(--radius-sm);
  font-size: 0.9rem;
}
.review-msg.success {
  background: rgba(20,122,110,0.15);
  color: #34D399;
  border: 1px solid rgba(20,122,110,0.3);
}
.review-msg.error {
  background: rgba(193,59,59,0.15);
  color: #F87171;
  border: 1px solid rgba(193,59,59,0.3);
}

/* ═══════════════════ 借配服务模块 ═══════════════════ */

/* Hero */
.stud-hero { text-align: center; }
.stud-hero-icon { font-size: 3rem; margin-bottom: var(--spacing-md); }

/* 服务特点卡片 */
.stud-features {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: var(--spacing-lg);
}
.stud-feature-card {
  background: var(--pish-bg-card);
  border: 1px solid var(--pish-border);
  border-radius: var(--radius-md);
  padding: var(--spacing-xl);
  text-align: center;
  transition: transform 0.2s ease;
}
.stud-feature-card:hover { transform: translateY(-4px); }
.stud-feature-card .feature-icon {
  font-size: 2.5rem;
  margin-bottom: var(--spacing-md);
}
.stud-feature-card h4 {
  font-family: var(--font-heading);
  font-size: 1.1rem;
  margin-bottom: var(--spacing-sm);
  color: var(--text-primary);
}
.stud-feature-card p {
  font-size: 0.9rem;
  color: var(--text-secondary);
  line-height: 1.7;
}

/* 可用公猫卡片 */
.stud-sires-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--spacing-lg);
}
.stud-sire-card {
  background: var(--pish-bg-card);
  border: 1px solid var(--pish-border);
  border-radius: var(--radius-md);
  overflow: hidden;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.stud-sire-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.stud-sire-card-img {
  width: 100%;
  height: 220px;
  object-fit: cover;
  background: var(--pish-bg-section);
}
.stud-sire-card-body { padding: var(--spacing-lg); }
.stud-sire-card-body h4 {
  font-family: var(--font-heading);
  font-size: 1.15rem;
  margin-bottom: var(--spacing-xs);
}
.stud-sire-card-body .sire-line {
  font-size: 0.85rem;
  color: var(--text-muted);
  margin-bottom: var(--spacing-md);
}
.stud-sire-card-body .sire-fee {
  font-size: 1.5rem;
  font-weight: 700;
  color: #C9A96E;
  font-family: var(--font-heading);
}

/* 借配流程时间线 */
.stud-timeline {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  position: relative;
}
.stud-timeline::before {
  content: '';
  position: absolute;
  top: 24px;
  left: 10%;
  right: 10%;
  height: 2px;
  background: linear-gradient(90deg, var(--pish-primary), #C9A96E);
  z-index: 0;
}
.stud-timeline-step {
  flex: 1;
  min-width: 180px;
  text-align: center;
  position: relative;
  z-index: 1;
  padding: 0 var(--spacing-sm);
}
.stud-timeline-dot {
  width: 48px; height: 48px;
  border-radius: 50%;
  background: var(--pish-primary);
  color: var(--text-on-dark);
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto var(--spacing-md);
  font-size: 1.2rem;
  font-weight: 700;
  border: 3px solid var(--pish-bg-section);
}
.stud-timeline-step h5 {
  font-size: 0.95rem;
  margin-bottom: var(--spacing-xs);
  color: var(--text-primary);
}
.stud-timeline-step p {
  font-size: 0.82rem;
  color: var(--text-secondary);
  line-height: 1.5;
}

/* FAQ 折叠面板 */
.stud-faq-list { max-width: 700px; margin: 0 auto; }
.stud-faq-item {
  border: 1px solid var(--pish-border);
  border-radius: var(--radius-sm);
  margin-bottom: var(--spacing-sm);
  overflow: hidden;
}
.stud-faq-q {
  width: 100%;
  padding: var(--spacing-md) var(--spacing-lg);
  background: var(--pish-bg-card);
  color: var(--text-primary);
  border: none;
  text-align: left;
  font-size: 0.95rem;
  font-weight: 500;
  cursor: pointer;
  display: flex; justify-content: space-between; align-items: center;
  transition: background 0.2s;
}
.stud-faq-q:hover { background: rgba(255,255,255,0.03); }
.stud-faq-q::after {
  content: '+';
  font-size: 1.2rem;
  font-weight: 300;
  color: var(--text-muted);
  transition: transform 0.3s ease;
}
.stud-faq-item.open .stud-faq-q::after {
  content: '−';
  transform: rotate(180deg);
}
.stud-faq-a {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease, padding 0.3s ease;
}
.stud-faq-item.open .stud-faq-a {
  max-height: 300px;
}
.stud-faq-a p {
  padding: 0 var(--spacing-lg) var(--spacing-lg);
  font-size: 0.9rem;
  color: var(--text-secondary);
  line-height: 1.7;
}

/* 借配申请表 */
.apply-form {
  max-width: 550px;
  margin: 0 auto;
}
.apply-form .form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--spacing-md);
}
.apply-form .form-group { margin-bottom: var(--spacing-md); }
.apply-form label {
  display: block;
  margin-bottom: var(--spacing-xs);
  font-weight: 500;
  color: var(--text-primary);
}
.apply-form input,
.apply-form select,
.apply-form textarea {
  width: 100%;
  padding: 10px 14px;
  border: 1px solid var(--pish-border);
  border-radius: var(--radius-sm);
  background: var(--pish-bg);
  color: var(--text-primary);
  font-size: 0.95rem;
  font-family: var(--font-body);
}
.apply-form input:focus,
.apply-form select:focus,
.apply-form textarea:focus {
  outline: none;
  border-color: var(--pish-primary);
  box-shadow: 0 0 0 3px rgba(20,122,110,0.15);
}
.apply-form textarea { resize: vertical; min-height: 80px; }
.apply-form .full-width { grid-column: 1 / -1; }

/* ═══════════════════ 健康保障模块 ═══════════════════ */

.guarantee-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--spacing-lg);
}
.guarantee-card {
  background: var(--pish-bg-card);
  border: 1px solid var(--pish-border);
  border-radius: var(--radius-md);
  padding: var(--spacing-xl);
  text-align: center;
  transition: transform 0.2s ease;
}
.guarantee-card:hover { transform: translateY(-2px); }
.guarantee-card-icon {
  font-size: 2.5rem;
  margin-bottom: var(--spacing-md);
}
.guarantee-card h4 {
  font-family: var(--font-heading);
  font-size: 1.1rem;
  margin-bottom: var(--spacing-sm);
  color: var(--text-primary);
}
.guarantee-card p {
  font-size: 0.9rem;
  color: var(--text-secondary);
  line-height: 1.7;
}

/* 疫苗表 */
.vaccine-table-wrap {
  max-width: 600px;
  margin: 0 auto;
  overflow-x: auto;
}
.vaccine-table {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
}
.vaccine-table th {
  background: var(--pish-primary);
  color: var(--text-on-dark);
  padding: 12px 16px;
  font-weight: 600;
  font-size: 0.9rem;
}
.vaccine-table td {
  padding: 12px 16px;
  border-bottom: 1px solid var(--pish-border);
  font-size: 0.9rem;
  color: var(--text-secondary);
}
.vaccine-table tr:last-child td { border-bottom: none; }
.vaccine-table tr:hover td { background: rgba(255,255,255,0.02); }

/* 健康 CTA */
.health-cta {
  text-align: center;
  padding: var(--spacing-2xl) 0;
}

/* Hero icon */
.guarantee-hero-icon {
  font-size: 3rem;
  margin-bottom: var(--spacing-md);
  animation: guarantee-pulse 3s ease-in-out infinite;
}
@keyframes guarantee-pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.08); }
}

/* 合同高亮块 */
.guarantee-contract {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-lg);
  background: linear-gradient(135deg, rgba(26,138,125,0.08), rgba(201,169,110,0.06));
  border: 1px solid rgba(26,138,125,0.2);
  border-left: 4px solid var(--pish-primary);
  border-radius: var(--radius-md);
  padding: var(--spacing-xl);
  max-width: 800px;
  margin: 0 auto;
}
.guarantee-contract-icon {
  font-size: 2.2rem;
  flex-shrink: 0;
  line-height: 1;
}
.guarantee-contract-body { flex: 1; }
.guarantee-contract-title {
  font-family: var(--font-heading);
  font-size: 1.15rem;
  color: var(--pish-primary);
  margin-bottom: var(--spacing-sm);
}
.guarantee-contract-text {
  font-size: 0.92rem;
  color: var(--text-secondary);
  line-height: 1.75;
  margin: 0;
}

/* 覆盖面清单 */
.guarantee-checklist {
  list-style: none;
  padding: 0;
  margin: 0;
  max-width: 700px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--spacing-sm);
}
.guarantee-checklist li {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-sm);
  padding: var(--spacing-sm) var(--spacing-md);
  font-size: 0.92rem;
  color: var(--text-secondary);
  line-height: 1.6;
}
.guarantee-check {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px; height: 22px;
  background: var(--pish-primary);
  color: #fff;
  border-radius: 50%;
  font-size: 0.75rem;
  font-weight: 700;
  margin-top: 2px;
}

/* 基因检测区增强 */
.guarantee-gene-icon {
  font-size: 2.5rem;
  margin-bottom: var(--spacing-md);
}
.guarantee-gene-desc {
  color: var(--text-secondary);
  line-height: 1.7;
  margin: var(--spacing-md) 0;
  font-size: 0.95rem;
}

/* CTA 增强 */
.guarantee-cta-desc {
  color: rgba(255,255,255,0.8);
  margin-top: var(--spacing-xs);
  margin-bottom: var(--spacing-lg);
  font-size: 0.95rem;
}

/* 响应式 */
@media (max-width: 768px) {
  .guarantee-contract {
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: var(--spacing-lg);
  }
  .guarantee-contract-icon { font-size: 1.8rem; }
  .guarantee-checklist { grid-template-columns: 1fr; }
  .guarantee-hero-icon { font-size: 2.5rem; }
}

/* ═══════════════════ 预约模块 ═══════════════════ */

.booking-form-wrap {
  max-width: 550px;
  margin: 0 auto;
}
.booking-form { text-align: left; }
.booking-form .form-group { margin-bottom: var(--spacing-md); }
.booking-form label {
  display: block;
  margin-bottom: var(--spacing-xs);
  font-weight: 500;
  color: var(--text-primary);
}
.booking-form input,
.booking-form select,
.booking-form textarea {
  width: 100%;
  padding: 10px 14px;
  border: 1px solid var(--pish-border);
  border-radius: var(--radius-sm);
  background: var(--pish-bg);
  color: var(--text-primary);
  font-size: 0.95rem;
  font-family: var(--font-body);
  transition: border-color 0.2s;
}
.booking-form input:focus,
.booking-form select:focus,
.booking-form textarea:focus {
  outline: none;
  border-color: var(--pish-primary);
  box-shadow: 0 0 0 3px rgba(20,122,110,0.15);
}
.booking-form textarea { resize: vertical; min-height: 80px; }
.booking-form .form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--spacing-md);
}
.booking-form .full-width { grid-column: 1 / -1; }
.booking-form .form-hint {
  font-size: 0.8rem;
  color: var(--text-muted);
  margin-top: 2px;
}

/* 预约成功状态 */
.booking-success {
  text-align: center;
  padding: var(--spacing-2xl) var(--spacing-md);
}
.booking-success-icon {
  font-size: 4rem;
  margin-bottom: var(--spacing-lg);
}

/* ═══════════════════ 响应式 ═══════════════════ */

@media (max-width: 639px) {
  .review-aggregate { flex-direction: column; text-align: center; }
  .review-aggregate-score { min-width: auto; }
  /* ── Mobile Horizontal Scroll: 评
价卡片 ── */
  .review-grid {
    touch-action: pan-x;
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: visible;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: var(--pish-border) transparent;
    gap: var(--spacing-md);
    padding: var(--spacing-xs) 2px var(--spacing-sm) 2px;
  }
  .review-grid::-webkit-scrollbar { height: 4px; }
  .review-grid::-webkit-scrollbar-track { background: transparent; }
  .review-grid::-webkit-scrollbar-thumb { background: var(--pish-border); border-radius: 10px; }
  .review-grid .review-card {
    flex: 0 0 280px;
    scroll-snap-align: start;
  }
  .stud-timeline { flex-direction: column; gap: var(--spacing-lg); }
  .stud-timeline::before { display: none; }
  .stud-timeline-step { display: flex; align-items: center; gap: var(--spacing-md); text-align: left; }
  .stud-timeline-dot { margin: 0; flex-shrink: 0; }
  .stud-sires-grid { grid-template-columns: 1fr; }
  .apply-form .form-row,
  .booking-form .form-row { grid-template-columns: 1fr; }
  .stud-features { grid-template-columns: 1fr; }
  .guarantee-grid { grid-template-columns: 1fr; }
}
/* ══════════════════════════════════════════════
   Mobile Horizontal Scroll — 通用模块（追加）
   card-grid / hero-stats / detail-meta-grid
   meet-stats / personality-grid / breeding-stats
   ═════════════════════════════════════════════ */
@media (max-width: 768px) {

  /* ── Mobile: 卡片网格（仅覆盖宽度 + touch-action） ── */
  .card-grid {
    touch-action: pan-x;
    gap: var(--spacing-md);
    margin-left: calc(-1 * var(--spacing-md));
    margin-right: calc(-1 * var(--spacing-md));
    width: calc(100% + 2 * var(--spacing-md));
  }
  .card-grid > .card,
  .card-grid > a.card {
    flex: 0 0 260px;
  }
  .card-grid--litter > .litter-card,
  .card-grid--litter > a.litter-card {
    flex: 0 0 300px;
  }

  /* ── Mobile: 首页统计（隐藏滚动条 + 更小卡片） ── */
  .hero-stats {
    touch-action: pan-x;
    scrollbar-width: none;
    gap: var(--spacing-md);
  }
  .hero-stats::-webkit-scrollbar { display: none; }
  .hero-stats .hero-stat {
    flex: 0 0 120px;
  }

  /* ── 详情页基础信息条 ─
─ */
  .detail-meta-grid {
    touch-action: pan-x;
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: visible;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: var(--border-color) transparent;
    gap: var(--spacing-sm);
    padding: var(--spacing-sm) 2px;
    margin-left: calc(-1 * var(--spacing-md));
    margin-right: calc(-1 * var(--spacing-md));
    width: calc(100% + 2 * var(--spacing-md));
  }
  .detail-meta-grid::-webkit-scrollbar { height: 4px; }
  .detail-meta-grid::-webkit-scrollbar-track { background: transparent; }
  .detail-meta-grid::-webkit-scrollbar-thumb { background: var(--border-color); border-radius: 10px; }
  .detail-meta-grid > div {
    flex: 0 0 130px;
    scroll-snap-align: start;
  }

  /* ── 身体数据（认识XX
X板块） ── */
  .meet-stats {
    touch-action: pan-x;
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: visible;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: var(--border-color) transparent;
    justify-content: flex-start;
    gap: var(--spacing-md);
    padding: var(--spacing-sm) 2px var(--spacing-sm) 2px;
    margin-left: calc(-1 * var(--spacing-md));
    margin-right: calc(-1 * var(--spacing-md));
    width: calc(100% + 2 * var(--spacing-md));
  }
  .meet-stats::-webkit-scrollbar { height: 4px; }
  .meet-stats::-webkit-scrollbar-track { background: transparent; }
  .meet-stats::-webkit-scrollbar-thumb { background: var(--border-color); border-radius: 10px; }
  .meet-stats .meet-stat-card {
    flex: 0 0 160px;
    scroll-snap-align: sta
rt;
  }

  /* ── 性格气质进度条 ── */
  .personality-grid {
    touch-action: pan-x;
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: visible;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: var(--border-color) transparent;
    gap: var(--spacing-md);
    padding: var(--spacing-sm) 2px var(--spacing-sm) 2px;
    margin-left: calc(-1 * var(--spacing-md));
    margin-right: calc(-1 * var(--spacing-md));
    width: calc(100% + 2 * var(--spacing-md));
  }
  .personality-grid::-webkit-scrollbar { height: 4px; }
  .personality-grid::-webkit-scrollbar-track { background: transparent; }
  .personality-grid::-webkit-scrollbar-thumb { background: var(--border-color); border-radius: 10px; }
  .personality-grid .personality-trait {
    flex: 0 0 230px;
    scroll-snap-align: start;
  }

  /* ── 繁殖统计 ── */
  .breeding-stats-grid,
  .breeding-stats-big {
    touch-action: pan-x;

    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: visible;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: var(--border-color) transparent;
    gap: var(--spacing-md);
    padding: var(--spacing-xs) 2px var(--spacing-sm) 2px;
    margin-left: calc(-1 * var(--spacing-md));
    margin-right: calc(-1 * var(--spacing-md));
    width: calc(100% + 2 * var(--spacing-md));
  }
  .breeding-stats-grid::-webkit-scrollbar,
  .breeding-stats-big::-webkit-scrollbar { height: 4px; }
  .breeding-stats-grid::-webkit-scrollbar-track,
  .breeding-stats-big::-webkit-scrollbar-track { background: transparent; }
  .breeding-stats-grid::-webkit-scrollbar-thumb,
  .breeding-stats-big::-webkit-scrollbar-thumb { background: var(--border-color); border-radius: 10px; }
  .breeding-stats-grid .breeding-stat-card,
  .breeding-stats-big .bsb-card {
    flex: 0 0 180px;
    scroll-snap-align: start;
  }

}

/* ══════════════════════════════════════════════
   Mobile Hero Optimization
   ═════════════════════════════════════════════ */
@media (max-width: 768px) {
  .hero {
    min-height: 100dvh;
    padding: var(--spacing-xl) 0;
    justify-content: center;
  }

  .hero .hero-logo-wrap {
    margin-bottom: var(--spacing-lg);
  }

  .hero .hero-logo-wrap .hero-logo {
    height: 180px;
    max-width: 90%;
  }

  .hero h1 {
    font-size: clamp(1.5rem, 6vw, 2.2rem);
  }

  .hero p {
    font-size: 0.95rem;
    padding: 0 var(--spacing-sm);
  }

  .hero-actions {
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-sm);
  }

  .hero-stats {
    gap: var(--spacing-md);
    padding: var(--spacing-xs) 0;
  }
}

/* ── Mobile: Footer Responsive ── */
@media (max-width: 768px) {
  .footer-simple {
    padding: 24px var(--spacing-md) 20px;
  }
  .footer-nav {
    gap: 4px 14px;
    margin-bottom: 16px;
  }
  .footer-nav a {
    font-size: 13px;
  }
  .footer-friend-links {
    font-size: 12px;
    margin-bottom: 14px;
  }
  .footer-friend-links a {
    font-size: 12px;
  }
  .footer-legal {
    font-size: 10px;
    gap: 0 8px;
  }
}
@media (max-width: 480px) {
  .footer-nav {
    gap: 3px 10px;
  }
  .footer-nav a {
    font-size: 12px;
  }
  .footer-link-sep {
    margin: 0 4px;
  }
}

/* ═══════════════════════════════════════════════
   Parents Banner — 父母照片横幅
   ═══════════════════════════════════════════════ */
.parents-banner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 32px;
  padding: 8px 0;
}

.parents-banner-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  text-decoration: none;
  color: inherit;
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.parents-banner-card:hover {
  transform: translateY(-6px);
}

.parents-banner-photo {
  width: 200px;
  height: 200px;
  border-radius: 28px;
  overflow: hidden;
  border: 3px solid transparent;
  background: var(--bg-card, #1a1a2e);
  transition: border-color 0.35s ease, box-shadow 0.35s ease, transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  flex-shrink: 0;
}

.parents-banner-photo--sire {
  border-color: var(--color-accent, #C9A96E);
  box-shadow: 0 4px 24px rgba(201, 169, 110, 0.22);
}

.parents-banner-photo--dam {
  border-color: var(--color-primary, #1A8A7D);
  box-shadow: 0 4px 24px rgba(26, 138, 125, 0.22);
}

.parents-banner-card:hover .parents-banner-photo--sire {
  box-shadow: 0 8px 40px rgba(201, 169, 110, 0.4);
}

.parents-banner-card:hover .parents-banner-photo--dam {
  box-shadow: 0 8px 40px rgba(26, 138, 125, 0.4);
}

.parents-banner-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.parents-banner-card:hover .parents-banner-photo img {
  transform: scale(1.06);
}

.parents-banner-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-card, #1a1a2e);
}

.parents-banner-placeholder span {
  font-size: 64px;
  font-weight: 700;
  color: var(--text-muted, #666);
  font-family: var(--font-display, serif);
}

.parents-banner-body {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  text-align: center;
}

.parents-banner-role {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.parents-banner-role--sire {
  color: var(--color-accent, #C9A96E);
}

.parents-banner-role--dam {
  color: var(--color-primary, #1A8A7D);
}

.parents-banner-name {
  font-size: 18px;
  font-weight: 700;
  font-family: var(--font-display, serif);
  color: var(--text-primary, #e5e5e5);
}

.parents-banner-meta {
  font-size: 13px;
  color: var(--text-secondary, #9ca3af);
}

.parents-banner-connector {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/* Responsive: stack on mobile */
@media (max-width: 640px) {
  .parents-banner {
    flex-direction: column;
    gap: 20px;
  }

  .parents-banner-connector {
    transform: rotate(90deg);
    margin: -8px 0;
  }

  .parents-banner-photo {
    width: 170px;
    height: 170px;
    border-radius: 24px;
  }
}

/* ═══════════════════════════════════════════════════════════
   v10 窝次详情页 — 9 模块全新设计
   ═══════════════════════════════════════════════════════════ */

/* ── ① Kitten Showcase 幼猫沉浸展示 ── */
.kitten-showcase {
  position: relative;
  overflow: hidden;
  background: linear-gradient(180deg, var(--pish-bg-canvas) 0%, var(--pish-bg-surface) 100%);
  min-height: 60vh;
  display: flex;
  align-items: center;
}
.kitten-showcase-inner {
  width: 100%;
  max-width: 960px;
  margin: 0 auto;
  padding: 48px 24px 32px;
}
.kitten-showcase-main {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  aspect-ratio: 4/3;
  max-height: 560px;
  background: var(--pish-bg-elevated);
}
.kitten-showcase-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.45s cubic-bezier(0.4, 0, 0.2, 1);
  pointer-events: none;
}
.kitten-showcase-slide.active {
  opacity: 1;
  pointer-events: auto;
}
.kitten-showcase-image {
  width: 100%;
  height: 100%;
}
.kitten-showcase-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.kitten-showcase-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--pish-bg-elevated);
  font-size: 64px;
  color: var(--pish-text-muted);
}
.kitten-showcase-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 60px 32px 28px;
  background: linear-gradient(transparent, rgba(9,9,11,0.88));
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
}
.kitten-showcase-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.kitten-showcase-name {
  font-size: 1.625rem;
  font-weight: 700;
  color: #fff;
  letter-spacing: -0.01em;
}
.kitten-showcase-gender {
  font-size: 0.875rem;
  color: rgba(255,255,255,0.7);
}
.kitten-showcase-gender.gender-male { color: #60a5fa; }
.kitten-showcase-gender.gender-female { color: #f472b6; }
.kitten-showcase-price {
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--pish-accent);
}
.kitten-showcase-badge {
  flex-shrink: 0;
  padding: 6px 18px;
  border-radius: 100px;
  font-size: 0.8125rem;
  font-weight: 600;
  color: #fff;
  letter-spacing: 0.02em;
}
.kitten-showcase-badge.badge-born      { background: var(--pish-accent); color: #09090B; }
.kitten-showcase-badge.badge-pregnant  { background: rgba(236,72,153,0.25); color: #f9a8d4; }
.kitten-showcase-badge.badge-completed { background: rgba(201,169,110,0.2); color: var(--pish-accent-secondary, #C9A96E); }

/* Carousel arrows */
.kitten-showcase-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: none;
  background: rgba(255,255,255,0.12);
  backdrop-filter: blur(12px);
  color: #fff;
  font-size: 18px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.25s ease;
  z-index: 2;
}
.kitten-showcase-arrow:hover {
  background: rgba(255,255,255,0.22);
  transform: translateY(-50%) scale(1.08);
}
.kitten-showcase-prev { left: 16px; }
.kitten-showcase-next { right: 16px; }

/* Thumbnail strip */
.kitten-showcase-thumbs {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 16px;
  padding: 0 16px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.kitten-showcase-thumbs::-webkit-scrollbar { display: none; }
.kitten-showcase-thumb {
  flex-shrink: 0;
  width: 56px;
  height: 56px;
  border-radius: 10px;
  border: 2px solid transparent;
  overflow: hidden;
  cursor: pointer;
  padding: 0;
  background: var(--pish-bg-elevated);
  transition: border-color 0.25s ease, transform 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}
.kitten-showcase-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.kitten-showcase-thumb.active {
  border-color: var(--pish-accent);
  transform: scale(1.08);
}
.kitten-showcase-thumb:hover {
  border-color: rgba(255,255,255,0.3);
}

/* Planned state */
.kitten-showcase-planned {
  text-align: center;
  padding: 60px 24px;
}
.kitten-showcase-planned-icon {
  font-size: 72px;
  margin-bottom: 16px;
  animation: float-up-down 3s ease-in-out infinite;
}
@keyframes float-up-down {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-10px); }
}
.kitten-showcase-planned-title {
  font-size: 2rem;
  font-weight: 700;
  color: var(--pish-text-primary);
  margin: 0 0 8px;
}
.kitten-showcase-planned-sub {
  font-size: 1.0625rem;
  color: var(--pish-text-secondary);
  margin: 0 0 12px;
}
.kitten-showcase-planned-date {
  font-size: 0.9375rem;
  color: var(--pish-accent);
  margin: 0 0 16px;
}
.kitten-showcase-planned-date i {
  margin-right: 4px;
  opacity: 0.7;
}

/* ── ② Overview Bar 窝次概览 ── */
.litter-overview-bar {
  padding: 24px 0;
  border-bottom: 1px solid var(--pish-border-subtle);
  background: var(--pish-bg-surface);
}
.litter-overview-chips {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}
.litter-overview-chip {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 18px;
  background: var(--pish-bg-elevated);
  border-radius: 14px;
  border: 1px solid var(--pish-border-subtle);
  transition: border-color 0.2s ease, transform 0.2s ease;
}
.litter-overview-chip:hover {
  border-color: var(--pish-border-default);
  transform: translateY(-1px);
}
.litter-overview-chip--highlight {
  border-color: var(--pish-accent);
  background: rgba(64,224,208,0.06);
}
.litter-overview-chip-icon {
  font-size: 1.125rem;
  color: var(--pish-text-muted);
  flex-shrink: 0;
}
.litter-overview-chip--highlight .litter-overview-chip-icon {
  color: var(--pish-accent);
}
.litter-overview-chip-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.litter-overview-chip-label {
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--pish-text-muted);
}
.litter-overview-chip-value {
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--pish-text-primary);
}
.litter-overview-chip--highlight .litter-overview-chip-value {
  color: var(--pish-accent);
}

/* ── ③ Parent Portraits 父母肖像 ── */
.parent-portraits {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  max-width: 780px;
  margin: 0 auto;
}
.parent-portrait-card {
  flex: 1;
  max-width: 340px;
}
.parent-portrait-photo {
  width: 100%;
  aspect-ratio: 4/5;
  border-radius: 16px;
  overflow: hidden;
  margin-bottom: 16px;
  background: var(--pish-bg-elevated);
  box-shadow: 0 4px 20px rgba(0,0,0,0.3);
}
.parent-portrait-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}
.parent-portrait-card:hover .parent-portrait-photo img {
  transform: scale(1.04);
}
.parent-portrait-body {
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.parent-portrait-role--sire {
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--pish-accent);
}
.parent-portrait-role--dam {
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #f472b6;
}
.parent-portrait-name {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--pish-text-primary);
}
.parent-portrait-titles {
  font-size: 0.8125rem;
  color: var(--pish-accent-secondary, #C9A96E);
  font-style: italic;
}
.parent-portrait-meta {
  font-size: 0.8125rem;
  color: var(--pish-text-secondary);
}
.parent-portrait-arrow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
  font-size: 0.8125rem;
  color: var(--pish-text-muted);
  transition: color 0.2s ease;
}
.parent-portrait-card:hover .parent-portrait-arrow {
  color: var(--pish-accent);
}
.parent-portraits-connector {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 8px;
  margin-top: -40px;
}

/* ── ④ Breeder's Notes 繁育者笔记 ── */
.breeder-notes {
  position: relative;
  padding: 36px 40px;
  background: var(--pish-bg-surface);
  border: 1px solid var(--pish-border-subtle);
  border-radius: 16px;
  font-size: 1.0625rem;
  line-height: 1.8;
  color: var(--pish-text-secondary);
}
.breeder-notes-quote {
  position: absolute;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 5rem;
  line-height: 1;
  color: var(--pish-accent);
  opacity: 0.15;
  pointer-events: none;
}
.breeder-notes-quote:first-child { top: 8px;  left: 20px; }
.breeder-notes-quote--end        { bottom: 8px; right: 20px; transform: rotate(180deg); }
.breeder-notes-body {
  position: relative;
  z-index: 1;
  max-width: 700px;
}

/* ── ⑤ Health & Guarantees 健康保障 ── */
.health-guarantee-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
}
.health-guarantee-card {
  background: var(--pish-bg-surface);
  border: 1px solid var(--pish-border-subtle);
  border-radius: 16px;
  padding: 24px;
  transition: border-color 0.25s ease;
}
.health-guarantee-card:hover {
  border-color: var(--pish-border-default);
}
.health-guarantee-card-title {
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--pish-text-primary);
  margin: 0 0 16px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.health-guarantee-card-title i { color: var(--pish-accent); font-size: 1rem; }

/* Gene test list */
.health-gene-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.health-gene-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 12px;
  background: var(--pish-bg-elevated);
  border-radius: 10px;
}
.health-gene-icon {
  font-size: 1.25rem;
  flex-shrink: 0;
  margin-top: 1px;
}
.health-gene-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.health-gene-cat {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--pish-text-primary);
}
.health-gene-test {
  font-size: 0.8125rem;
  color: var(--pish-text-secondary);
}
.health-gene-result {
  display: inline-block;
  margin-top: 2px;
  padding: 2px 10px;
  border-radius: 100px;
  font-size: 0.6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  align-self: flex-start;
}
.health-gene-result--good  { background: rgba(16,185,129,0.15); color: #34d399; }
.health-gene-result--warn  { background: rgba(245,158,11,0.15); color: #fbbf24; }
.health-gene-result--info  { background: rgba(100,116,139,0.15); color: #94a3b8; }
.health-gene-date {
  font-size: 0.6875rem;
  color: var(--pish-text-muted);
  margin-top: 1px;
}

/* COI gauge rings */
.health-coi-gauges {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.health-coi-gauge {
  display: flex;
  align-items: center;
  gap: 16px;
}
.health-coi-gauge-ring {
  flex-shrink: 0;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  --coi-color: var(--pish-accent);
  background: conic-gradient(var(--coi-color) calc(var(--coi-pct, 0%) * 3.6), var(--pish-bg-elevated) 0deg);
  position: relative;
}
.health-coi-gauge-ring::after {
  content: '';
  position: absolute;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--pish-bg-surface);
}
.health-coi-gauge-value {
  position: relative;
  z-index: 1;
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--coi-color);
}
.health-coi-gauge-label {
  font-size: 0.8125rem;
  color: var(--pish-text-secondary);
  line-height: 1.4;
}

/* Guarantee checklist */
.health-guarantee-checklist {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px 16px;
}
.health-guarantee-checklist li {
  font-size: 0.875rem;
  color: var(--pish-text-secondary);
  display: flex;
  align-items: center;
  gap: 8px;
}
.health-guarantee-checklist li i {
  color: var(--pish-accent);
  flex-shrink: 0;
  font-size: 0.75rem;
}

/* ── ⑥ Booking Info + FAQ + CTA 预定与咨询 ── */
.booking-faq-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 20px;
}
@media (max-width: 900px) {
  .booking-faq-grid {
    grid-template-columns: 1fr 1fr;
  }
}
@media (max-width: 640px) {
  .booking-faq-grid {
    grid-template-columns: 1fr;
  }
}

/* Available kitten list */
.booking-available {
  background: var(--pish-bg-surface);
  border: 1px solid var(--pish-border-subtle);
  border-radius: 16px;
  padding: 24px;
}
.booking-available-title,
.booking-faq-title,
.booking-cta-title {
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--pish-text-primary);
  margin: 0 0 16px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.booking-available-title i { color: #f472b6; }
.booking-faq-title i        { color: var(--pish-accent); }
.booking-cta-title i        { color: #fbbf24; }
.booking-available-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.booking-available-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px;
  background: var(--pish-bg-elevated);
  border-radius: 10px;
  border: 1px solid transparent;
  transition: border-color 0.2s ease;
}
.booking-available-item:hover {
  border-color: var(--pish-border-default);
}
.booking-available-thumb {
  width: 48px;
  height: 48px;
  border-radius: 10px;
  overflow: hidden;
  flex-shrink: 0;
  background: var(--pish-bg-canvas);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  color: var(--pish-text-muted);
}
.booking-available-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.booking-available-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  flex: 1;
}
.booking-available-name {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--pish-text-primary);
}
.booking-available-gender {
  font-size: 0.75rem;
}
.booking-available-gender.gender-male   { color: #60a5fa; }
.booking-available-gender.gender-female { color: #f472b6; }
.booking-available-price {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--pish-accent);
}
.booking-available-badge {
  flex-shrink: 0;
  padding: 3px 12px;
  border-radius: 100px;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.03em;
}
.booking-available-badge.badge-born {
  background: rgba(64,224,208,0.15);
  color: var(--pish-accent);
}

/* FAQ Accordion */
.booking-faq {
  background: var(--pish-bg-surface);
  border: 1px solid var(--pish-border-subtle);
  border-radius: 16px;
  padding: 24px;
}
.booking-faq-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.booking-faq-item {
  border-radius: 10px;
  overflow: hidden;
}
.booking-faq-item[open] {
  background: var(--pish-bg-elevated);
}
.booking-faq-q {
  padding: 12px 14px;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--pish-text-primary);
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  transition: color 0.2s ease;
  user-select: none;
}
.booking-faq-q:hover {
  color: var(--pish-accent);
}
.booking-faq-q::-webkit-details-marker { display: none; }
.booking-faq-q::after {
  content: '+';
  font-size: 1.125rem;
  font-weight: 400;
  color: var(--pish-text-muted);
  transition: transform 0.25s ease;
}
.booking-faq-item[open] .booking-faq-q::after {
  content: '\2212';
  transform: rotate(180deg);
  color: var(--pish-accent);
}
.booking-faq-a {
  padding: 0 14px 14px;
  font-size: 0.8125rem;
  color: var(--pish-text-secondary);
  line-height: 1.65;
}

/* CTA Panel */
.booking-cta {
  background: linear-gradient(135deg, rgba(64,224,208,0.08), rgba(64,224,208,0.02));
  border: 1px solid rgba(64,224,208,0.15);
  border-radius: 16px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.booking-cta-desc {
  font-size: 0.875rem;
  color: var(--pish-text-secondary);
  margin: 0 0 20px;
  line-height: 1.6;
}
.booking-cta-buttons {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
}
.booking-cta-buttons .btn {
  width: 100%;
  justify-content: center;
  padding: 12px 20px;
  border-radius: 12px;
  font-size: 0.9375rem;
  font-weight: 600;
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 8px;
  transition: all 0.25s ease;
}
.btn-contact {
  background: var(--pish-accent);
  color: #09090B;
  border: none;
}
.btn-contact:hover {
  background: var(--pish-accent-hover);
  transform: translateY(-1px);
}
.btn-whatsapp {
  background: transparent;
  color: var(--pish-text-primary);
  border: 1px solid var(--pish-border-default);
}
.btn-whatsapp:hover {
  border-color: var(--pish-accent);
  color: var(--pish-accent);
}
.booking-cta-wechat {
  margin-top: 16px;
  padding: 10px 18px;
  background: rgba(255,255,255,0.04);
  border-radius: 10px;
  font-size: 0.8125rem;
}
.booking-cta-wechat-label {
  color: var(--pish-text-muted);
  margin-right: 4px;
}
.booking-cta-wechat-id {
  color: var(--pish-accent);
  font-weight: 600;
}

/* ── ⑦ Pedigree + COI 血统与近交系数（折叠） ── */
.pedigree-collapsible {
  background: var(--pish-bg-surface);
  border: 1px solid var(--pish-border-subtle);
  border-radius: 16px;
  overflow: hidden;
}
.pedigree-collapsible-summary {
  padding: 18px 24px;
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  transition: background 0.2s ease;
}
.pedigree-collapsible-summary:hover {
  background: var(--pish-bg-elevated);
}
.pedigree-collapsible-summary::-webkit-details-marker { display: none; }
.pedigree-collapsible-summary-text {
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--pish-text-primary);
}
.pedigree-collapsible-summary-icon {
  font-size: 0.875rem;
  color: var(--pish-text-muted);
  transition: transform 0.3s ease;
}
.pedigree-collapsible[open] .pedigree-collapsible-summary-icon {
  transform: rotate(180deg);
}
.pedigree-collapsible-body {
  padding: 0 24px 24px;
  border-top: 1px solid var(--pish-border-subtle);
  padding-top: 24px;
}
.pedigree-tree {
  overflow-x: auto;
  padding: 16px 0;
}
.pedigree-table-wrap {
  overflow-x: auto;
  margin-top: 16px;
}
.pedigree-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.8125rem;
}
.pedigree-table th {
  text-align: left;
  padding: 8px 12px;
  font-size: 0.6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--pish-text-muted);
  border-bottom: 1px solid var(--pish-border-subtle);
}
.pedigree-table td {
  padding: 10px 12px;
  color: var(--pish-text-secondary);
  border-bottom: 1px solid var(--pish-border-subtle);
}
.pedigree-table tr:last-child td {
  border-bottom: none;
}
.pedigree-table tr:hover td {
  background: var(--pish-bg-elevated);
}

/* ── ⑧ Growth Diary 成长日记 ── */
.growth-diary-scroll {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  padding: 8px 0 16px;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
}
.growth-diary-scroll::-webkit-scrollbar { height: 4px; }
.growth-diary-scroll::-webkit-scrollbar-track { background: transparent; }
.growth-diary-scroll::-webkit-scrollbar-thumb {
  background: var(--pish-border-default);
  border-radius: 10px;
}
.growth-diary-card {
  flex-shrink: 0;
  width: 160px;
  padding: 20px 16px;
  background: var(--pish-bg-surface);
  border: 1px solid var(--pish-border-subtle);
  border-radius: 16px;
  text-align: center;
  scroll-snap-align: start;
  transition: border-color 0.25s ease, transform 0.2s ease;
}
.growth-diary-card:hover {
  border-color: var(--pish-accent);
  transform: translateY(-2px);
}
.growth-diary-icon {
  font-size: 1.75rem;
  margin-bottom: 10px;
}
.growth-diary-date {
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--pish-accent);
  margin-bottom: 6px;
}
.growth-diary-label {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--pish-text-primary);
  margin-bottom: 4px;
}
.growth-diary-desc {
  font-size: 0.6875rem;
  color: var(--pish-text-muted);
  line-height: 1.4;
}

/* ── ⑨ Related Litters 推荐窝次 ── */
.related-litters-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 16px;
}
.related-litter-card {
  display: flex;
  flex-direction: column;
  background: var(--pish-bg-surface);
  border: 1px solid var(--pish-border-subtle);
  border-radius: 16px;
  overflow: hidden;
  text-decoration: none;
  transition: border-color 0.25s ease, transform 0.2s ease;
}
.related-litter-card:hover {
  border-color: var(--pish-accent);
  transform: translateY(-3px);
}
.related-litter-card-img {
  position: relative;
  aspect-ratio: 16/10;
  overflow: hidden;
  background: var(--pish-bg-elevated);
}
.related-litter-card-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}
.related-litter-card:hover .related-litter-card-img img {
  transform: scale(1.05);
}
.related-litter-card-img-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  color: var(--pish-text-muted);
}
.related-litter-card-badge {
  position: absolute;
  top: 12px;
  right: 12px;
  padding: 3px 12px;
  border-radius: 100px;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  backdrop-filter: blur(8px);
}
.related-litter-card-badge.badge-planned   { background: rgba(59,130,246,0.3); color: #93c5fd; }
.related-litter-card-badge.badge-pregnant  { background: rgba(236,72,153,0.3); color: #f9a8d4; }
.related-litter-card-badge.badge-born      { background: rgba(16,185,129,0.3); color: #6ee7b7; }
.related-litter-card-badge.badge-completed { background: rgba(201,169,110,0.3); color: #e5d5a4; }
.related-litter-card-body {
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.related-litter-card-name {
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--pish-text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.related-litter-card-date {
  font-size: 0.75rem;
  color: var(--pish-text-muted);
  display: flex;
  align-items: center;
  gap: 4px;
}
.related-litter-card-parents {
  font-size: 0.75rem;
  color: var(--pish-text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ═══════════════════════════════════════════════
   v10 Responsive — Mobile & Tablet
   ═══════════════════════════════════════════════ */

@media (max-width: 768px) {
  /* ① Showcase */
  .kitten-showcase { min-height: 42vh; }
  .kitten-showcase-inner { padding: 24px 16px 20px; }
  .kitten-showcase-main { aspect-ratio: 3/4; max-height: 480px; border-radius: 14px; }
  .kitten-showcase-overlay { padding: 50px 20px 20px; flex-direction: column; align-items: flex-start; gap: 8px; }
  .kitten-showcase-name { font-size: 1.25rem; }
  .kitten-showcase-arrow { width: 36px; height: 36px; font-size: 14px; }
  .kitten-showcase-prev { left: 8px; }
  .kitten-showcase-next { right: 8px; }
  .kitten-showcase-thumb { width: 44px; height: 44px; }
  .kitten-showcase-planned-title { font-size: 1.5rem; }
  
  /* ② Overview */
  .litter-overview-chips { gap: 8px; }
  .litter-overview-chip { padding: 10px 14px; }

  /* ③ Parents */
  .parent-portraits { flex-direction: column; gap: 20px; }
  .parent-portrait-card { max-width: 100%; }
  .parent-portrait-photo { aspect-ratio: 3/4; max-height: 360px; }
  .parent-portraits-connector { margin-top: -12px; margin-bottom: -12px; }
  .parent-portraits-connector svg { transform: rotate(90deg); }

  /* ④ Breeder notes */
  .breeder-notes { padding: 24px 20px; font-size: 0.9375rem; }
  .breeder-notes-quote { font-size: 3rem; }
  
  /* ⑤ Health */
  .health-guarantee-checklist { grid-template-columns: 1fr; }
  
  /* ⑧ Growth */
  .growth-diary-card { width: 140px; padding: 16px 12px; }
}

@media (max-width: 480px) {
  .kitten-showcase-main { aspect-ratio: 2/3; max-height: 420px; }
  .kitten-showcase-planned { padding: 40px 16px; }
  .kitten-showcase-planned-icon { font-size: 56px; }
  .litter-overview-chips { gap: 6px; }
  .litter-overview-chip { padding: 8px 12px; border-radius: 10px; }
  .litter-overview-chip-value { font-size: 0.8125rem; }
  .parent-portrait-photo { aspect-ratio: 1/1; max-height: 260px; border-radius: 12px; }
  .parent-portrait-name { font-size: 1.125rem; }
  
  /* ⑨ Related */
  .related-litters-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
  .related-litter-card-body { padding: 12px; }
  .related-litter-card-name { font-size: 0.8125rem; }
}

/* ═══════════════════════════════════════════════════
   Breeding Philosophy / 繁育理念页面
   ═══════════════════════════════════════════════════ */
.page-breeding { }
.page-breeding .page-hero { padding: 80px 0 60px; }
.breeding-hero-icon { font-size: 64px; margin-bottom: 16px; line-height: 1; }

/* ② 核心理念 — 3卡片 */
.breeding-philo-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.breeding-philo-card {
  background: var(--pish-bg-card);
  border: 1px solid var(--pish-border);
  border-radius: 16px;
  padding: 32px 24px;
  text-align: center;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.breeding-philo-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 40px rgba(0,0,0,0.25);
}
.breeding-philo-icon { font-size: 40px; margin-bottom: 16px; line-height: 1; }
.breeding-philo-card h4 {
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--pish-text-primary);
  margin-bottom: 12px;
}
.breeding-philo-card p {
  font-size: 0.9375rem;
  color: var(--pish-text-secondary);
  line-height: 1.7;
}

/* ③ 选育标准 Checklist */
.breeding-checklist {
  list-style: none;
  max-width: 800px;
  margin: 0 auto;
}
.breeding-checklist li {
  display: flex;
  gap: 16px;
  padding: 20px 0;
  border-bottom: 1px solid var(--pish-border);
}
.breeding-checklist li:last-child { border-bottom: none; }
.breeding-check {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--pish-success);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8125rem;
  font-weight: 700;
  margin-top: 2px;
}
.breeding-checklist strong {
  display: block;
  font-size: 1rem;
  color: var(--pish-text-primary);
  margin-bottom: 4px;
}
.breeding-checklist span {
  font-size: 0.875rem;
  color: var(--pish-text-secondary);
  line-height: 1.6;
}

/* ④ WCF 规范 — 4卡片 */
.breeding-wcf-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}
.breeding-wcf-card {
  background: var(--pish-bg-card);
  border: 1px solid var(--pish-border);
  border-radius: 14px;
  padding: 28px 20px;
  text-align: center;
  transition: transform 0.3s ease;
}
.breeding-wcf-card:hover { transform: translateY(-3px); }
.breeding-wcf-number {
  font-size: 2.5rem;
  font-weight: 800;
  color: var(--pish-accent);
  opacity: 0.15;
  line-height: 1;
  margin-bottom: -8px;
}
.breeding-wcf-card h4 {
  font-size: 1.0625rem;
  font-weight: 700;
  color: var(--pish-text-primary);
  margin-bottom: 10px;
}
.breeding-wcf-card p {
  font-size: 0.875rem;
  color: var(--pish-text-secondary);
  line-height: 1.6;
}

/* ⑤ 繁育流程 Timeline */
.breeding-timeline {
  max-width: 680px;
  margin: 0 auto;
  position: relative;
  padding-left: 40px;
}
.breeding-timeline::before {
  content: '';
  position: absolute;
  left: 18px;
  top: 0;
  bottom: 0;
  width: 2px;
  background: linear-gradient(180deg, var(--pish-accent), var(--pish-gold));
  border-radius: 1px;
}
.breeding-timeline-step {
  position: relative;
  padding-bottom: 32px;
}
.breeding-timeline-step:last-child { padding-bottom: 0; }
.breeding-timeline-dot {
  position: absolute;
  left: -40px;
  top: 0;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--pish-accent);
  display: flex;
  align-items: center;
  justify-content: center;
}
.breeding-timeline-num {
  font-size: 0.8125rem;
  font-weight: 700;
  color: #fff;
}
.breeding-timeline-body {
  background: var(--pish-bg-card);
  border: 1px solid var(--pish-border);
  border-radius: 12px;
  padding: 20px 24px;
}
.breeding-timeline-body h4 {
  font-size: 1rem;
  font-weight: 700;
  color: var(--pish-text-primary);
  margin-bottom: 6px;
}
.breeding-timeline-body p {
  font-size: 0.875rem;
  color: var(--pish-text-secondary);
  line-height: 1.6;
}

/* ⑥ 当前育种计划 */
.breeding-plans-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.breeding-plan-item {
  display: flex;
  gap: 20px;
  align-items: center;
  background: var(--pish-bg-card);
  border: 1px solid var(--pish-border);
  border-radius: 14px;
  padding: 24px;
  transition: transform 0.3s ease;
}
.breeding-plan-item:hover { transform: translateX(6px); }
.breeding-plan-icon { font-size: 36px; flex-shrink: 0; line-height: 1; }
.breeding-plan-body h4 {
  font-size: 1.0625rem;
  font-weight: 700;
  color: var(--pish-text-primary);
  margin-bottom: 6px;
}
.breeding-plan-body p {
  font-size: 0.875rem;
  color: var(--pish-text-secondary);
  line-height: 1.6;
}

/* ⑦ CTA */
.breeding-cta-desc {
  font-size: 1rem;
  color: var(--pish-text-secondary);
  margin-bottom: 24px;
}
.breeding-cta-buttons {
  display: flex;
  gap: 16px;
  justify-content: center;
  flex-wrap: wrap;
}
.breeding-cta-buttons .btn-outline-light {
  padding: 12px 32px;
  font-size: 1rem;
}

/* Responsive */
@media (max-width: 768px) {
  .breeding-philo-grid { grid-template-columns: 1fr; }
  .breeding-wcf-grid { grid-template-columns: repeat(2, 1fr); }
  .breeding-timeline { padding-left: 32px; }
  .breeding-timeline-dot { left: -32px; width: 28px; height: 28px; }
  .breeding-timeline-num { font-size: 0.75rem; }
  .breeding-plan-item { flex-direction: column; text-align: center; }
  .breeding-cta-buttons { flex-direction: column; align-items: center; }
}
@media (max-width: 480px) {
  .breeding-wcf-grid { grid-template-columns: 1fr; }
  .breeding-hero-icon { font-size: 48px; }
  .breeding-timeline-dot { left: -28px; width: 24px; height: 24px; }
  .breeding-timeline { padding-left: 28px; }
}

/* ═══════════════════════════════════════════════════════
   新猫养护指南 / Care Guide
   ═══════════════════════════════════════════════════════ */
.page-guide { color: var(--pish-text-primary); }

/* Hero */
.guide-hero-icon {
  font-size: 64px;
  margin-bottom: 0.6rem;
  animation: guideFloat 3s ease-in-out infinite;
}
@keyframes guideFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}

/* ———— ② 接猫准备清单 6-grid ———— */
.guide-prep-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}
.guide-prep-card {
  background: var(--pish-bg-card);
  border: 1px solid var(--pish-border);
  border-radius: 16px;
  padding: 1.5rem;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.guide-prep-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.25);
  border-color: var(--pish-accent);
}
.guide-prep-icon {
  font-size: 2rem;
  margin-bottom: 0.6rem;
}
.guide-prep-card h4 {
  font-size: 1.05rem;
  color: var(--pish-text-primary);
  margin-bottom: 0.4rem;
}
.guide-prep-card p {
  font-size: 0.875rem;
  color: var(--pish-text-secondary);
  line-height: 1.6;
  margin: 0;
}

/* ———— ③ 喂养表格 + 禁忌列表 ———— */
.guide-sub-heading {
  font-size: 1.15rem;
  color: var(--pish-text-primary);
  margin-bottom: 1rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--pish-border);
}

.guide-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
}
.guide-table th {
  text-align: left;
  padding: 0.7rem 0.9rem;
  background: var(--pish-bg-section);
  color: var(--pish-accent);
  font-weight: 600;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border-bottom: 2px solid var(--pish-accent);
}
.guide-table td {
  padding: 0.7rem 0.9rem;
  border-bottom: 1px solid var(--pish-border-subtle);
  color: var(--pish-text-secondary);
  vertical-align: top;
}
.guide-table tr:hover td {
  background: var(--pish-bg-hover);
}
.guide-table td:first-child {
  font-weight: 600;
  color: var(--pish-text-primary);
}

.guide-taboo-list {
  list-style: none;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.guide-taboo-list li {
  padding: 0.6rem 1rem;
  background: rgba(193, 59, 59, 0.08);
  border-left: 3px solid #C13B3B;
  border-radius: 0 8px 8px 0;
  font-size: 0.875rem;
  color: var(--pish-text-secondary);
  line-height: 1.5;
}

/* ———— ④ 疫苗时间线 4-grid ———— */
.guide-vaccine-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.25rem;
}
.guide-vaccine-card {
  background: var(--pish-bg-card);
  border: 1px solid var(--pish-border);
  border-radius: 14px;
  overflow: hidden;
  display: flex;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.guide-vaccine-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 20px rgba(0,0,0,0.25);
}
.guide-vaccine-age {
  flex: 0 0 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--pish-bg-section);
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--pish-accent);
}
.guide-vaccine-body {
  padding: 1rem 1.2rem;
  flex: 1;
}
.guide-vaccine-body h4 {
  font-size: 0.95rem;
  color: var(--pish-text-primary);
  margin-bottom: 0.3rem;
}
.guide-vaccine-stamp {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 600;
  padding: 0.15rem 0.6rem;
  border-radius: 10px;
  margin-bottom: 0.4rem;
  background: rgba(26,138,125,0.18);
  color: var(--pish-accent);
}
.guide-vaccine-body p {
  font-size: 0.8rem;
  color: var(--pish-text-tertiary);
  margin: 0;
  line-height: 1.5;
}

/* ———— ⑤ 日常护理 3-grid ———— */
.guide-daily-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}
.guide-daily-card {
  background: var(--pish-bg-card);
  border: 1px solid var(--pish-border);
  border-radius: 16px;
  padding: 1.5rem;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.guide-daily-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.25);
  border-color: var(--pish-accent);
}
.guide-daily-icon {
  font-size: 2rem;
  margin-bottom: 0.6rem;
}
.guide-daily-card h4 {
  font-size: 1.05rem;
  color: var(--pish-text-primary);
  margin-bottom: 0.4rem;
}
.guide-daily-card p {
  font-size: 0.875rem;
  color: var(--pish-text-secondary);
  line-height: 1.6;
  margin: 0;
}

/* ———— ⑥ FAQ Accordion ———— */
.guide-faq-list {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}
.guide-faq-item {
  background: var(--pish-bg-card);
  border: 1px solid var(--pish-border);
  border-radius: 12px;
  overflow: hidden;
  transition: border-color 0.2s;
}
.guide-faq-item[open] {
  border-color: var(--pish-accent);
}
.guide-faq-q {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  padding: 1rem 1.2rem;
  cursor: pointer;
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--pish-text-primary);
  list-style: none;
  transition: background 0.2s;
}
.guide-faq-q::-webkit-details-marker { display: none; }
.guide-faq-q::marker { display: none; content: ''; }
.guide-faq-q:hover { background: var(--pish-bg-hover); }
.guide-faq-q-icon {
  flex-shrink: 0;
  width: 24px; height: 24px;
  display: flex; align-items: center; justify-content: center;
  background: var(--pish-accent);
  color: #fff;
  border-radius: 50%;
  font-size: 0.75rem;
  font-weight: 700;
}
.guide-faq-chevron {
  margin-left: auto;
  font-size: 0.8rem;
  color: var(--pish-text-tertiary);
  transition: transform 0.25s;
}
.guide-faq-item[open] .guide-faq-chevron {
  transform: rotate(180deg);
}
.guide-faq-a {
  display: flex;
  gap: 0.6rem;
  padding: 0 1.2rem 1.2rem;
}
.guide-faq-a-icon {
  flex-shrink: 0;
  width: 24px; height: 24px;
  display: flex; align-items: center; justify-content: center;
  background: var(--pish-gold);
  color: #0A0A0C;
  border-radius: 50%;
  font-size: 0.75rem;
  font-weight: 700;
}
.guide-faq-a p {
  margin: 0;
  font-size: 0.875rem;
  color: var(--pish-text-secondary);
  line-height: 1.65;
}

/* ———— ⑦ CTA ———— */
.guide-cta-desc {
  color: var(--pish-text-on-dark-secondary);
  margin-bottom: 1.5rem;
  font-size: 1rem;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}
.guide-cta-buttons {
  display: flex;
  gap: 1rem;
  justify-content: center;
  flex-wrap: wrap;
}

/* ———— Responsive ———— */
@media (max-width: 768px) {
  .guide-prep-grid,
  .guide-daily-grid { grid-template-columns: repeat(2, 1fr); }
  .guide-vaccine-grid { grid-template-columns: 1fr; }
  .guide-vaccine-age { flex: 0 0 60px; font-size: 0.8rem; }
  .guide-cta-buttons { flex-direction: column; align-items: center; }
  .guide-table { font-size: 0.8rem; }
  .guide-table th, .guide-table td { padding: 0.5rem 0.6rem; }
}
@media (max-width: 480px) {
  .guide-prep-grid,
  .guide-daily-grid { grid-template-columns: 1fr; }
  .guide-hero-icon { font-size: 48px; }
  .guide-vaccine-card { flex-direction: column; }
  .guide-vaccine-age {
    flex: auto;
    padding: 0.5rem;
    text-align: center;
  }
}