/* ===== Qibeads v1.1 — Visual System =====   * Bright & Soft × Eastern Elegance   * Primary: Warm White #FDFCF9 | Jade Teal #7C9EB2 | Soft Gold #B8975A   * Text: Ink Teal #324754 | Muted #8C9BA6   */    @import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;0,700;1,400&family=Jost:wght@300;400;500;600&family=Caveat:wght@400;500;600&family=Noto+Serif+TC:wght@400;500;600&display=swap');    :root {    --paper: #FFFFFF;    --paper-warm: #FBF6EC;    --cream: #FBF6EC;    --font-hand: 'Caveat', 'Bradley Hand', 'Segoe Script', cursive;    --teal: #7C9EB2;    --teal-light: #AEC8D6;    --teal-dark: #4E7285;    --teal-solid: #7C9EB2;    --teal-mid: #5F8199;    --teal-ink: #324754;    --gold: #B8975A;    --gold-light: #D4B87A;    --muted: #5F7079;    --muted-light: #9DAAB4;    --white: #FFFFFF;    --shadow: rgba(50, 71, 84, 0.06);    --shadow-deep: rgba(50, 71, 84, 0.12);    /* Gem element colors */    --gem-wood: #6DA287;    --gem-fire: #C9756F;    --gem-earth: #B08D64;    --gem-metal: #A8B5C4;    --gem-water: #7FB5C9;    --radius-sm: 8px;    --radius-md: 16px;    --radius-lg: 24px;    --radius-xl: 32px;    --space-xs: 4px;    --space-sm: 8px;    --space-md: 16px;    --space-lg: 24px;    --space-xl: 32px;    --space-2xl: 48px;    --space-3xl: 64px;    --teal-text: #4E7285;
    --teal-deep: #3E5D6E;
    --gold-text: #8A6C32;
    --gold-dark: #8A6C32;
    --font-serif: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;    --font-sans: 'Jost', -apple-system, BlinkMacSystemFont, sans-serif;    --font-cn: 'Noto Serif TC', 'Songti SC', serif;  }    * { margin: 0; padding: 0; box-sizing: border-box; }    html { scroll-behavior: smooth; }    body {    font-family: var(--font-sans);    font-size: 17px;    line-height: 1.75;    color: var(--teal-ink);    background: var(--paper);    -webkit-font-smoothing: antialiased;    min-height: 100vh;    overflow-x: hidden;  }    h1, h2, h3, h4 { font-family: var(--font-serif); font-weight: 500; line-height: 1.3; }    h1 { font-size: clamp(44px, 6.6vw, 76px); letter-spacing: -0.025em; font-weight: 600; line-height: 1.04; }    h2 { font-size: clamp(32px, 4.6vw, 48px); letter-spacing: -0.015em; line-height: 1.12; }    h3 { font-size: clamp(22px, 3vw, 30px); }    a { color: var(--teal-text); text-decoration: none; transition: color 0.2s; }    a:hover { color: var(--teal-dark); }    img { max-width: 100%; display: block; }    button { font-family: var(--font-sans); cursor: pointer; border: none; background: none; }    /* ===== Layout ===== */    .container {    width: 100%;    max-width: 1200px;    margin: 0 auto;    padding: 0 var(--space-lg);  }    .section { padding: var(--space-3xl) 0; }    .section-sm { padding: var(--space-xl) 0; }    .flex { display: flex; }    .flex-col { flex-direction: column; }    .items-center { align-items: center; }    .justify-center { justify-content: center; }    .justify-between { justify-content: space-between; }    .gap-sm { gap: var(--space-sm); }    .gap-md { gap: var(--space-md); }    .gap-lg { gap: var(--space-lg); }    .text-center { text-align: center; }    .w-full { width: 100%; }    /* ===== Navigation ===== */    .nav {    position: fixed;    top: 0;    left: 0;    right: 0;    z-index: 100;    background: rgba(255, 255, 255, 0.94);    backdrop-filter: blur(12px);    border-bottom: 1px solid rgba(50, 71, 84, 0.06);    padding: 10px 0;  }    .nav-inner {    display: flex;    align-items: center;    justify-content: space-between;  }    .nav-logo {    font-family: var(--font-serif);    font-size: 22px;    font-weight: 600;    color: var(--teal-ink);    letter-spacing: 2px;  }    .nav-logo span {    color: var(--teal-text);    font-weight: 400;  }    .nav-links {    display: flex;    gap: var(--space-xl);    align-items: center;  }    .nav-links a {    font-size: 15px;    font-weight: 500;    letter-spacing: 0.5px;    text-transform: uppercase;    color: var(--teal-ink);    opacity: 0.88;    transition: opacity 0.2s;  }    .nav-links a:hover { opacity: 1; color: var(--teal-text); }    .nav-left { display: flex; align-items: center; }    .nav-cta-wrap { position: relative; display: flex; align-items: center; }    .nav-cta-wrap::before { content: ''; width: 1px; height: 22px; background: rgba(50, 71, 84, 0.16); margin: 0 18px; }    .nav-cta {    display: inline-flex;    align-items: center;    gap: 7px;    font-size: 12.5px;    font-weight: 700;    letter-spacing: 1.2px;    text-transform: uppercase;    color: #6B5320;    background: linear-gradient(180deg,#F9F2E5,#F3E7D2);    border: 1px solid rgba(212,184,122,.60);    border-radius: 100px;    padding: 8px 15px;    line-height: 1;    white-space: nowrap;    position: relative;    overflow: hidden;    box-shadow: 0 2px 10px rgba(163,128,58,.16);    transition: background .22s, color .22s, box-shadow .22s, transform .22s;    animation: ctaBreathe 3.4s ease-in-out infinite;  }
    .nav-cta:hover { color: #5C4620; background: linear-gradient(180deg,#F7EEDD,#EEDFC4); transform: translateY(-1px); box-shadow: 0 4px 14px rgba(163,128,58,.22); }
    /* 首次进站（localStorage 判定）前几秒强光晕，之后回落到常驻呼吸 */
    .nav-cta.hot { animation: ctaPulse 1.3s ease-in-out 3; }
    .nav-cta::after {    content: '';    position: absolute;    top: 0;    bottom: 0;    width: 52%;    background: linear-gradient(105deg, transparent, rgba(255,255,255,.88), transparent);    transform: translateX(-170%) skewX(-12deg);    animation: ctaShine 1.15s ease-out .8s 1 both;    pointer-events: none;  }
    @keyframes ctaBreathe { 0%,100% { box-shadow: 0 2px 10px rgba(163,128,58,.16), 0 0 0 0 rgba(212,184,122,.16); } 50% { box-shadow: 0 2px 12px rgba(163,128,58,.22), 0 0 0 6px rgba(212,184,122,.14); } }
    @keyframes ctaPulse { 0%,100% { box-shadow: 0 2px 10px rgba(163,128,58,.20), 0 0 0 0 rgba(212,184,122,.44); } 50% { box-shadow: 0 3px 15px rgba(163,128,58,.30), 0 0 0 10px rgba(212,184,122,.34); } }
    @keyframes ctaShine { 0% { transform: translateX(-170%) skewX(-12deg); } 100% { transform: translateX(330%) skewX(-12deg); } }
    @media(prefers-reduced-motion: reduce){ .nav-cta, .nav-cta.hot { animation: none; } .nav-cta::after { display: none; } }    .cta-chev { width: 6px; height: 6px; border-right: 1.8px solid currentColor; border-bottom: 1.8px solid currentColor; transform: rotate(45deg) translate(-1px, -1px); transition: transform 0.2s; }    .nav-cta-wrap.open .cta-chev { transform: rotate(-135deg) translate(-1px, -1px); }    .cta-short { display: none; }    .nav-choice {    position: absolute;    top: calc(100% + 16px);    left: -10px;    width: 268px;    background: var(--white);    border-radius: 16px;    box-shadow: 0 18px 44px rgba(50, 71, 84, 0.16);    border: 1px solid rgba(50, 71, 84, 0.07);    padding: 8px;    opacity: 0;    visibility: hidden;    transform: translateY(-6px);    transition: opacity 0.2s, transform 0.2s, visibility 0.2s;    z-index: 120;  }    .nav-cta-wrap:hover .nav-choice, .nav-cta-wrap.open .nav-choice { opacity: 1; visibility: visible; transform: translateY(0); }    .nav-choice::before { content: ''; position: absolute; top: -7px; left: 24px; width: 14px; height: 14px; background: var(--white); transform: rotate(45deg); border-left: 1px solid rgba(50, 71, 84, 0.07); border-top: 1px solid rgba(50, 71, 84, 0.07); }    .nav-choice a { display: block; padding: 10px 13px; border-radius: 11px; text-transform: none; letter-spacing: 0; opacity: 1; }    .nav-choice a:hover { background: var(--cream); }    .ch-t { display: block; font-size: 14.5px; font-weight: 600; color: var(--teal-ink); }    .ch-s { display: block; font-size: 11.5px; color: var(--muted); margin-top: 2px; }    .ch-sep { height: 1px; background: rgba(50, 71, 84, 0.07); margin: 5px 8px; }    .ch-foot { font-size: 11.5px; color: var(--muted); line-height: 1.55; padding: 7px 13px 4px; margin: 0; }    .promo-banner { margin-bottom: 14px; }    /* ===== Hero ===== */    .hero {    min-height: 100vh;    display: flex;    flex-direction: column;    justify-content: center;    align-items: center;    text-align: center;    padding: 120px var(--space-lg) var(--space-3xl);    position: relative;    overflow: hidden;  }    .hero::before {    content: '';    position: absolute;    top: -20%;    left: 50%;    width: 600px;    height: 600px;    background: radial-gradient(circle, rgba(126, 181, 201, 0.08) 0%, transparent 70%);    transform: translateX(-50%);    pointer-events: none;  }    .hero-tagline {    font-family: var(--font-serif);    font-size: clamp(16px, 2vw, 16px);    color: var(--muted);    letter-spacing: 3px;    text-transform: uppercase;    margin-bottom: var(--space-lg);  }    .hero h1 {    max-width: 800px;    margin-bottom: var(--space-md);    color: var(--teal-ink);  }    .hero-sub {    font-size: 17px;    color: var(--muted);    max-width: 520px;    margin-bottom: var(--space-2xl);    line-height: 1.8;  }    .hero-cta-group {    display: flex;    gap: var(--space-md);    flex-wrap: wrap;    justify-content: center;  }    /* ===== Buttons ===== */    .btn {    display: inline-flex;    align-items: center;    justify-content: center;    gap: var(--space-sm);    padding: 14px 32px;    border-radius: 100px;    font-size: 16px;    font-weight: 500;    letter-spacing: 0.5px;    transition: all 0.3s ease;    white-space: nowrap;  }    .btn-primary {    background: var(--teal-solid);    color: var(--white);    box-shadow: 0 4px 20px rgba(124, 158, 178, 0.25);  }    .btn-primary:hover { background: var(--teal-mid);    transform: translateY(-1px);    box-shadow: 0 6px 24px rgba(124, 158, 178, 0.35);  }    .btn-secondary {    background: transparent;    color: var(--teal-ink);    border: 1px solid rgba(50, 71, 84, 0.15);  }    .btn-secondary:hover {    border-color: var(--teal);    color: var(--teal-text);  }    .btn-gold {    background: var(--gold-dark);    color: var(--white);  }    .btn-gold:hover { background: #7A5D2A; }    .btn-sm { padding: 10px 20px; font-size: 15px; }    /* ===== Cards ===== */    .card {    background: var(--cream);    border-radius: var(--radius-lg);    padding: var(--space-xl);    box-shadow: 0 2px 16px var(--shadow);    transition: transform 0.3s, box-shadow 0.3s;    border: 1px solid rgba(50, 71, 84, 0.04);  }    .card:hover {    transform: translateY(-2px);    box-shadow: 0 8px 32px var(--shadow-deep);  }    .card-glass {    background: rgba(255, 255, 255, 0.7);    backdrop-filter: blur(20px);    border: 1px solid rgba(255, 255, 255, 0.5);  }    /* ===== Entry Cards (Home) ===== */    .entry-grid {    display: grid;    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));    gap: var(--space-lg);    max-width: 900px;    margin: 0 auto;  }    .entry-card {    background: var(--cream);    border-radius: var(--radius-xl);    padding: var(--space-2xl) var(--space-xl);    text-align: center;    box-shadow: 0 4px 24px var(--shadow);    border: 1px solid rgba(50, 71, 84, 0.04);    transition: all 0.4s ease;    position: relative;    overflow: hidden;  }    .entry-card::before {    content: '';    position: absolute;    top: 0;    left: 0;    right: 0;    height: 3px;    background: linear-gradient(90deg, var(--teal), var(--gold));    opacity: 0;    transition: opacity 0.3s;  }    .entry-card:hover {    transform: translateY(-4px);    box-shadow: 0 12px 40px var(--shadow-deep);  }    .entry-card:hover::before { opacity: 1; }    .entry-icon {    width: 64px;    height: 64px;    margin: 0 auto var(--space-lg);    border-radius: 50%;    background: linear-gradient(135deg, var(--teal-light), var(--teal));    display: flex;    align-items: center;    justify-content: center;    color: var(--white);    font-size: 24px;  }    .entry-card h3 {    margin-bottom: var(--space-sm);    color: var(--teal-ink);  }    .entry-card p {    color: var(--muted);    font-size: 16px;    line-height: 1.7;    margin-bottom: var(--space-lg);  }    /* ===== Trust Bar ===== */    .trust-bar {    display: flex;    justify-content: center;    gap: var(--space-2xl);    flex-wrap: wrap;    padding: var(--space-xl) 0;    border-top: 1px solid rgba(50, 71, 84, 0.06);    border-bottom: 1px solid rgba(50, 71, 84, 0.06);  }    .trust-item {    text-align: center;  }    .trust-item strong {    display: block;    font-family: var(--font-serif);    font-size: 17px;    color: var(--teal-ink);    margin-bottom: 2px;  }    .trust-item span {    font-size: 14px;    color: var(--muted);    letter-spacing: 0.5px;  }    /* ===== Quiz ===== */    .quiz-container {    min-height: 100vh;    display: flex;    flex-direction: column;    padding-top: 80px;  }    .quiz-progress {    height: 2px;    background: rgba(50, 71, 84, 0.08);    position: relative;    margin-bottom: var(--space-2xl);  }    .quiz-progress-bar {    height: 100%;    background: linear-gradient(90deg, var(--teal), var(--gold));    transition: width 0.4s ease;    border-radius: 2px;  }    .quiz-question {    flex: 1;    display: flex;    flex-direction: column;    justify-content: center;    align-items: center;    text-align: center;    padding: var(--space-xl);    max-width: 600px;    margin: 0 auto;  }    .quiz-number {    font-size: 14px;    color: var(--muted);    letter-spacing: 2px;    text-transform: uppercase;    margin-bottom: var(--space-lg);  }    .quiz-text {    font-family: var(--font-serif);    font-size: clamp(22px, 4vw, 32px);    color: var(--teal-ink);    margin-bottom: var(--space-2xl);    line-height: 1.4;  }    .quiz-options {    display: flex;    flex-direction: column;    gap: var(--space-md);    width: 100%;    max-width: 400px;  }    .quiz-option {    padding: var(--space-md) var(--space-lg);    border-radius: var(--radius-md);    border: 1.5px solid rgba(50, 71, 84, 0.1);    background: var(--white);    font-size: 17px;    color: var(--teal-ink);    text-align: left;    transition: all 0.25s ease;    cursor: pointer;  }    .quiz-option:hover {    border-color: var(--teal);    background: rgba(124, 158, 178, 0.04);    transform: translateX(4px);  }    .quiz-option.selected {    border-color: var(--teal);    background: var(--teal-solid);    color: var(--white);  }    /* ===== Gender Step ===== */    .gender-grid {    display: flex;    gap: var(--space-lg);    justify-content: center;    flex-wrap: wrap;    margin-top: var(--space-xl);  }    .gender-btn {    width: 140px;    height: 140px;    border-radius: var(--radius-lg);    border: 2px solid rgba(50, 71, 84, 0.1);    background: var(--white);    display: flex;    flex-direction: column;    align-items: center;    justify-content: center;    gap: var(--space-sm);    transition: all 0.3s ease;    cursor: pointer;  }    .gender-btn:hover {    border-color: var(--teal);    transform: scale(1.03);  }    .gender-btn.selected {    border-color: var(--teal);    background: rgba(124, 158, 178, 0.06);  }    .gender-btn .symbol { font-size: 32px; }    .gender-btn .label { font-size: 16px; font-weight: 500; color: var(--teal-ink); }    /* ===== Birth Input ===== */    .birth-form {    max-width: 420px;    margin: 0 auto;    display: flex;    flex-direction: column;    gap: var(--space-lg);  }    .form-group label {    display: block;    font-size: 14px;    font-weight: 500;    color: var(--muted);    text-transform: uppercase;    letter-spacing: 1px;    margin-bottom: var(--space-sm);  }    .form-group input, .form-group select {    width: 100%;    padding: 14px 16px;    border-radius: var(--radius-md);    border: 1.5px solid rgba(50, 71, 84, 0.1);    background: var(--white);    font-size: 17px;    color: var(--teal-ink);    font-family: var(--font-sans);    transition: border-color 0.2s;  }    .form-group input:focus, .form-group select:focus {    outline: none;    border-color: var(--teal);  }    .privacy-notice {    display: flex;    align-items: center;    gap: var(--space-sm);    padding: var(--space-md);    background: rgba(124, 158, 178, 0.04);    border-radius: var(--radius-md);    font-size: 15px;    color: var(--teal-text);  }    .privacy-notice svg {    flex-shrink: 0; }    /* ===== Zodiac Grid ===== */    .quiz-question.quiz-wide { max-width: 1020px; }    .zodiac-grid {    display: grid;    grid-template-columns: repeat(6, 1fr);
  gap: var(--space-md);
  width: 100%;
  max-width: 960px;
  margin: 0 auto;
  }
  .zodiac-card {
  background: var(--white);
  border-radius: var(--radius-md);
  padding: var(--space-lg) var(--space-md);
  text-align: center;
  border: 1.5px solid rgba(50, 71, 84, 0.06);
  transition: all 0.3s ease;
  cursor: pointer;
  }
  .zodiac-card:hover {
  border-color: var(--teal);
  transform: translateY(-2px);
  box-shadow: 0 4px 16px var(--shadow);
  }
  .zodiac-card .symbol { font-size: 34px; margin-bottom: 10px; }
  .zodiac-card .name { font-family: var(--font-serif); font-size: 20px; font-weight: 500; }
  .zodiac-card .date { font-size: 15px; color: var(--muted); margin-top: 3px; }
  /* ===== Result Page ===== */
  .result-hero {
  text-align: center;
  padding: 100px var(--space-lg) var(--space-2xl);
  }
  .result-title {
  font-family: var(--font-serif);
  font-size: clamp(24px, 4vw, 36px);
  color: var(--teal-ink);
  margin-bottom: var(--space-sm);
  }
  .result-subtitle {
  font-size: 17px;
  color: var(--muted);
  margin-bottom: var(--space-xl);
  }
  .result-section {
  max-width: 720px;
  margin: 0 auto var(--space-2xl);
  }
  .result-section h3 {
  font-size: 18px;
  margin-bottom: var(--space-md);
  color: var(--teal-ink);
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  }
  .result-section h3::before {
  content: '';
  width: 24px;
  height: 2px;
  background: var(--gold-dark);
  border-radius: 2px;
  }
  /* 五行宝石珠行（2026-09-15 替代原雷达图） */
  .el-chart-wrap {
  max-width: 420px;
  margin: 0 auto var(--space-lg);
  }
  .el-row {
  display: grid;
  grid-template-columns: 26px 52px 1fr 18px;
  align-items: center;
  gap: 8px;
  padding: 7px 0;
  }
  .el-cn {
  font-family: var(--font-serif);
  font-size: 17px;
  text-align: center;
  line-height: 1;
  }
  .el-en {
  font-size: 13.5px;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: var(--muted);
  }
  .el-dots { display: flex; gap: 6px; flex-wrap: nowrap; }
  .el-bead {
  width: 11px; height: 11px; border-radius: 50%;
  display: block; flex: 0 0 11px;
  }
  .el-bead.on {
  box-shadow: inset 0 -1px 2px rgba(0,0,0,.16), 0 1px 2px rgba(34,64,60,.18);
  }
  .el-bead.off {
  border: 1px dashed rgba(34,64,60,0.22);
  background: transparent;
  }
  .el-fav {
  font-size: 14px;
  color: var(--gold-text);
  text-align: center;
  }
  .el-note {
  margin-top: 12px;
  font-size: 13.5px;
  color: var(--muted);
  text-align: center;
  letter-spacing: 0.3px;
  }
  /* Bead List */
  .bead-list { display: flex; flex-direction: column; gap: var(--space-md); }
  .bead-item {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  padding: var(--space-md);
  background: var(--white);
  border-radius: var(--radius-md);
  border: 1px solid rgba(50, 71, 84, 0.06);
  }
  .bead-item .bead-img {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--paper-warm);
  }
  .bead-item .bead-info { flex: 1; }
  .bead-item .bead-name { font-weight: 500; font-size: 17px; }
  .bead-item .bead-meta { font-size: 14px; color: var(--muted); }
  .bead-item .bead-count {
  font-family: var(--font-serif);
  font-size: 18px;
  color: var(--teal-text);
  font-weight: 600;
  }
  /* ===== Designer ===== */
  .designer-layout {
  display: grid;
  grid-template-columns: 1fr 360px;
  gap: var(--space-xl);
  max-width: 1200px;
  margin: 0 auto;
  padding-top: 100px;
  }
  .designer-canvas {
  background: var(--white);
  border-radius: var(--radius-lg);
  padding: var(--space-xl);
  min-height: 500px;
  box-shadow: 0 2px 16px var(--shadow);
  }
  .designer-panel {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
  }
  .balance-bar {
  height: 8px;
  background: rgba(50, 71, 84, 0.06);
  border-radius: 4px;
  overflow: hidden;
  display: flex;
  }
  .balance-segment {
  height: 100%;
  transition: width 0.4s ease;
  }
  .balance-wood { background: var(--gem-wood); }
  .balance-fire { background: var(--gem-fire); }
  .balance-earth { background: var(--gem-earth); }
  .balance-metal { background: var(--gem-metal); }
  .balance-water { background: var(--gem-water); }
  /* ===== Products ===== */
  .intention-nav {
  display: flex;
  gap: var(--space-sm);
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: var(--space-2xl);
  }
  .intention-pill {
  padding: 10px 20px;
  border-radius: 100px;
  border: 1.5px solid rgba(50, 71, 84, 0.1);
  background: var(--white);
  font-size: 15px;
  font-weight: 500;
  color: var(--teal-ink);
  transition: all 0.2s;
  cursor: pointer;
  }
  .intention-pill:hover, .intention-pill.active {
  background: var(--teal-solid);
  color: var(--white);
  border-color: var(--teal);
  }
  .product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--space-lg);
  }
  .product-card {
  background: var(--white);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: 0 2px 16px var(--shadow);
  transition: all 0.3s;
  cursor: pointer;
  }
  .product-card:hover { transform: translateY(-4px); box-shadow: 0 8px 32px var(--shadow-deep); }
  .product-card .product-img {
  width: 100%;
  height: 280px;
  object-fit: cover;
  background: #FAFBFC;
  }
  .product-card .product-info { padding: var(--space-lg); }
  .product-card .product-intention {
  font-size: 13.5px;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: var(--teal-text);
  font-weight: 500;
  margin-bottom: var(--space-xs);
  }
  .product-card .product-name {
  font-family: var(--font-serif);
  font-size: 18px;
  margin-bottom: var(--space-sm);
  }
  .product-card .product-price {
  font-size: 16px;
  font-weight: 600;
  color: var(--teal-ink);
  }
  /* ===== Quote / Checkout ===== */
  .quote-table {
  width: 100%;
  border-collapse: collapse;
  }
  .quote-table th {
  text-align: left;
  padding: var(--space-sm) var(--space-md);
  font-size: 13.5px;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--muted);
  border-bottom: 1px solid rgba(50, 71, 84, 0.08);
  }
  .quote-table td {
  padding: var(--space-md);
  border-bottom: 1px solid rgba(50, 71, 84, 0.04);
  }
  .quote-total {
  font-family: var(--font-serif);
  font-size: 24px;
  font-weight: 600;
  color: var(--teal-ink);
  text-align: right;
  padding: var(--space-lg) 0;
  }
  /* ===== Admin ===== */
  .admin-login {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--paper);
  }
  .admin-login-box {
  background: var(--white);
  padding: var(--space-2xl);
  border-radius: var(--radius-lg);
  box-shadow: 0 4px 24px var(--shadow);
  width: 100%;
  max-width: 400px;
  }
  .admin-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 15px;
  }
  .admin-table th {
  text-align: left;
  padding: 12px 16px;
  background: rgba(50, 71, 84, 0.03);
  font-weight: 600;
  font-size: 13.5px;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--muted);
  }
  .admin-table td {
  padding: 12px 16px;
  border-bottom: 1px solid rgba(50, 71, 84, 0.04);
  }
  /* ===== Footer ===== */
  .footer {
  background: #F8F9FA;
  color: var(--teal-ink);
  border-top: 1px solid rgba(50, 71, 84, 0.08);
  padding: var(--space-2xl) 0 var(--space-xl);
  margin-top: auto;
  }
  .footer-inner {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--space-xl);
  margin-bottom: var(--space-xl);
  }
  .footer h4 {
  color: var(--teal-ink);
  font-size: 16px;
  margin-bottom: var(--space-md);
  letter-spacing: 1px;
  text-transform: uppercase;
  }
  .footer a {
  color: var(--muted);
  font-size: 15px;
  display: block;
  margin-bottom: var(--space-sm);
  }
  .footer a:hover { color: var(--teal-text); }
  .footer-note {
  display: block;
  font-size: 14px;
  line-height: 1.7;
  color: var(--muted);
  margin-bottom: var(--space-sm);
  }
  .footer-bottom {
  border-top: 1px solid rgba(50, 71, 84, 0.08);
  padding-top: var(--space-lg);
  font-size: 14px;
  color: var(--muted);
  text-align: center;
  }
  /* ===== Disclaimer ===== */
  .disclaimer {
  background: rgba(50, 71, 84, 0.03);
  border-radius: var(--radius-md);
  padding: var(--space-md) var(--space-lg);
  font-size: 14px;
  color: var(--muted);
  line-height: 1.6;
  margin-top: var(--space-xl);
  }
  /* ===== Utility ===== */
  .hidden { display: none !important; }
  .fade-in { animation: fadeIn 0.5s ease; }
  @keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
  .slide-in { animation: slideIn 0.4s ease; }
  @keyframes slideIn { from { opacity: 0; transform: translateX(20px); } to { opacity: 1; transform: translateX(0); } }
  /* ===== Mobile ===== */
  @media (max-width: 768px) {
  .nav-links { display: none; }
  .hero { padding-top: 100px; }
  .entry-grid { grid-template-columns: 1fr; }
  .designer-layout { grid-template-columns: 1fr; }
  .zodiac-grid { grid-template-columns: repeat(3, 1fr); }
  .zodiac-card .symbol { font-size: 29px; }
  .zodiac-card .name { font-size: 18px; }
  .zodiac-card .date { font-size: 13.5px; }
  .trust-bar { gap: var(--space-lg); }
  .product-grid { grid-template-columns: 1fr; }
  }
  @media (max-width: 480px) {
  .zodiac-grid { grid-template-columns: repeat(2, 1fr); }
  .zodiac-card .symbol { font-size: 27px; }
  .zodiac-card .name { font-size: 17px; }
  .gender-btn { width: 100px; height: 100px; }
  .btn { padding: 12px 24px; font-size: 15px; }
  }
  /* ===== Result upgrade prompts (B5) ===== */
.prompt-upgrade-card{max-width:420px;margin:0 auto;padding:24px;border-radius:16px;background:rgba(62,131,119,0.06);border:1px dashed rgba(62,131,119,0.35);text-align:center;}
.prompt-upgrade-card strong{display:block;font-family:var(--font-serif,serif);font-size:17px;color:var(--teal,#7C9EB2);margin-bottom:6px;}
.prompt-upgrade-card p{font-size:15px;color:var(--muted,#6b7671);line-height:1.7;margin:0 0 14px;}

/* ===== v1.1.1 · 顶部促销 Banner（2026-09-11，借鉴 MyAstris） ===== */
.promo-banner{
  background:linear-gradient(90deg,var(--teal-mid),var(--teal-solid) 50%,var(--teal-mid));
  color:rgba(255,255,255,0.92);
  font-size:13.5px;font-weight:500;letter-spacing:1.6px;text-transform:uppercase;
  text-align:center;line-height:16px;padding:8px 12px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
/* Banner 使固定导航整体增高约 32px：页面顶部留白同步补偿（覆盖前面的同名规则） */
.hero{padding-top:152px;}
.quiz-container{padding-top:calc(var(--nav-h) + 8px);}
.result-hero{padding:132px var(--space-lg) var(--space-2xl);}

/* ===== Design Studio（/designer 重构，2026-09-11） ===== */
.ds-wrap{padding-top:112px;min-height:100vh;}
.ds-toolbar{
  /* 2026-09-19 去掉 sticky：说明行加入后工具栏变高，吸顶滚动会遮住左侧手串 */
  display:flex;align-items:center;gap:12px;
  padding:10px 0;margin-bottom:24px;
  border-top:1px solid rgba(34,64,60,0.06);border-bottom:1px solid rgba(34,64,60,0.06);
}
.ds-back{font-family:var(--font-serif);font-size:19px;color: var(--teal-text);text-decoration:none;flex-shrink:0;line-height:1;}

/* ===== 全站返回钮（2026-09-20）：子页面左上统一返回入口 =====
   此前除 designer 外所有子页面都只能靠顶栏 logo 回退，用户感知不到 = 等于没有。
   现在统一一个淡蓝胶囊「← Back」，点击优先 history.back()（回到真正的来路），
   没有同站来路时才走 HTML 上写的默认 href（见 app.js bindPageBack）。 */
.pg-back-bar{margin-bottom:14px;}
.pg-back{
  display:inline-flex;align-items:center;gap:7px;
  font-size:15px;font-weight:500;letter-spacing:.2px;line-height:1;
  color:var(--teal-dark,#4E7285);text-decoration:none;
  padding:8px 15px 8px 12px;border-radius:999px;
  background:rgba(124,158,178,0.10);
  transition:background .18s ease,color .18s ease,transform .18s ease;
}
.pg-back:hover{background:rgba(124,158,178,0.20);color:var(--teal-deep,#3E5D6E);transform:translateX(-2px);}
.pg-back:active{transform:translateX(-2px) scale(.97);}
.pg-back .arw{font-family:var(--font-serif);font-size:17px;line-height:1;}
@media(max-width:600px){.pg-back{font-size:14px;padding:7px 13px 7px 10px;}.pg-back .arw{font-size:16px;}}
/* 名字列：上方一行小字说明（这页是干嘛的），下方可编辑的设计名 */
.ds-title{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px;}
.ds-name{
  font-family:var(--font-serif);font-size:19px;font-weight:500;color:var(--teal-ink);
  background:transparent;border:none;border-bottom:1px dashed transparent;
  padding:2px 4px;min-width:0;width:100%;transition:border-color .2s;
}
.ds-name:focus{outline:none;border-bottom-color:var(--teal);}
.ds-size{display:flex;align-items:center;gap:6px;font-size:14px;color:var(--muted);white-space:nowrap;}
.ds-size select{
  padding:6px 10px;border-radius:100px;border:1px solid rgba(34,64,60,0.15);
  background:var(--white);font-size:15px;font-family:var(--font-sans);color:var(--teal-ink);cursor:pointer;
}
.ds-total{font-family:var(--font-serif);font-size:21px;font-weight:600;color: var(--teal-text);white-space:nowrap;}
@media(max-width:680px){
  .ds-toolbar{flex-wrap:wrap;gap:8px 10px;}
  .ds-title{flex-basis:100%;order:-1;}
  .ds-total{margin-left:auto;}
}

/* 说明小字：贴在名字上方，一行说清这页干嘛用，按进入来源由 JS 换文案 */
.ds-intro{
  font-size:12.5px;line-height:1.45;color:var(--muted);
  padding:0 4px;min-height:0;
}
.ds-intro b{font-weight:600;color:var(--teal-ink);}
.ds-intro a{color:var(--teal-dark);text-decoration:underline;text-underline-offset:2px;}


.ds-layout{
  display:grid;grid-template-columns:minmax(0,5fr) minmax(0,4fr);
  gap:32px;align-items:start;padding-bottom:96px;
}
@media(max-width:900px){.ds-layout{grid-template-columns:1fr;gap:24px;}}
.ds-canvas-holder{
  display:flex;align-items:center;justify-content:center;
  background:var(--white);border-radius:var(--radius-lg);
  box-shadow:0 2px 16px var(--shadow);padding:28px;position:relative;
  background-image:radial-gradient(circle at 50% 42%,rgba(126,181,201,0.05),transparent 65%);
}
#dsCanvas{max-width:100%;height:auto;display:block;touch-action:none;cursor:grab;}
#dsCanvas.dragging{cursor:grabbing;}
.ds-canvas-note{
  position:absolute;bottom:12px;left:0;right:0;text-align:center;
  font-size:13.5px;color:var(--muted);letter-spacing:0.5px;
}

/* 拖拽幽灵珠（跟随指针） */
.drag-ghost{
  position:fixed;width:48px;height:48px;border-radius:50%;
  pointer-events:none;z-index:9999;
  box-shadow:0 4px 16px rgba(34,64,60,.35),inset 0 -3px 6px rgba(0,0,0,.18);
  transform:translate(-50%,-50%) scale(1.05);
  transition:transform .08s;
}
.drag-ghost.spacer{width:30px;height:30px;}
.drag-ghost.removing{filter:grayscale(.5) brightness(.9);
  box-shadow:0 4px 16px rgba(192,57,43,.5),inset 0 -3px 6px rgba(0,0,0,.18);
  outline:2px dashed #C0392B;outline-offset:2px;
}
.ds-catalog.dragging-into,.ds-canvas-holder.dragging-into{outline:2px dashed var(--gold);outline-offset:-6px;border-radius:var(--radius-lg);}

/* 当前配方行（Your Bracelet） */
.ds-row{display:flex;align-items:center;gap:12px;padding:10px 0;border-bottom:1px solid rgba(34,64,60,0.05);}
.ds-row:last-child{border-bottom:none;}
.ds-row-dot{
  width:34px;height:34px;border-radius:50%;flex-shrink:0;
  box-shadow:inset 0 -3px 5px rgba(0,0,0,0.10), 0 2px 6px rgba(34,64,60,0.18);
}
.ds-row-info{flex:1;min-width:0;}
.ds-row-name{font-size:16px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.ds-row-meta{font-size:13.5px;color:var(--muted);}
.ds-step{display:flex;align-items:center;gap:7px;flex-shrink:0;}
.ds-step button{
  width:26px;height:26px;border-radius:50%;border:1px solid rgba(34,64,60,0.15);
  background:var(--white);font-size:17px;line-height:1;color:var(--teal-ink);
  display:flex;align-items:center;justify-content:center;transition:all .2s;cursor:pointer;
}
.ds-step button:hover{border-color:var(--teal);color: var(--teal-text);}
.ds-step .n{min-width:20px;text-align:center;font-weight:600;font-size:16px;}
.ds-row-del{
  width:26px;height:26px;border-radius:50%;border:none;background:transparent;
  color:var(--muted);font-size:16px;cursor:pointer;transition:color .2s;flex-shrink:0;
}
.ds-row-del:hover{color:#C0392B;}
.ds-hint{font-size:14px;color:var(--muted);text-align:center;padding:16px 0;}

/* 分类筛选 pill 条 */
.ds-filters{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:16px;}
.ds-pill{
  padding:6px 14px;border-radius:100px;border:1px solid rgba(34,64,60,0.12);
  background:var(--white);font-size:14px;letter-spacing:0.5px;color:var(--teal-ink);
  transition:all .2s;cursor:pointer;font-family:var(--font-sans);
}
.ds-pill:hover{border-color:var(--teal);}
.ds-pill.active{background: var(--teal-solid);color:#fff;border-color:var(--teal);}
.ds-pill .sw{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:6px;vertical-align:0;}

/* 材料目录网格 */
.ds-catalog{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(88px,1fr));gap:10px;
  max-height:360px;overflow-y:auto;padding:2px;
}
.ds-card{
  border:1px solid rgba(34,64,60,0.07);border-radius:var(--radius-md);
  background:var(--white);padding:12px 8px 10px;text-align:center;
  cursor:pointer;transition:all .2s;position:relative;
}
.ds-card:hover{border-color:var(--teal);transform:translateY(-2px);box-shadow:0 4px 14px var(--shadow);}
.ds-card:active{transform:translateY(0);}
.ds-card .bead{
  width:36px;height:36px;border-radius:50%;margin:0 auto 8px;
  box-shadow:0 2px 6px rgba(34,64,60,0.22);
}
.ds-card .nm{
  font-size:14px;line-height:1.3;min-height:30px;
  display:flex;align-items:center;justify-content:center;font-weight:500;
}
.ds-card .pr{font-size:13.5px;color:var(--muted);margin-top:2px;}
/* 忌金：命理建议回避的材质置灰禁用 */
.ds-card.avoid{opacity:.38;filter:grayscale(0.7);cursor:not-allowed;}
.ds-card.avoid:hover{border-color:rgba(34,64,60,0.07);transform:none;box-shadow:none;}
.ds-card.avoid::after{
  content:'not advised for your chart';display:block;font-size:12px;
  color:#C0392B;letter-spacing:0.3px;margin-top:3px;
}

/* ===== 换珠弹窗 · Swap Stone（2026-09-15 C1） ===== */
.ds-row-dot[data-swap],.ds-row-info[data-swap]{cursor:pointer;}
.ds-row-dot[data-swap]{transition:transform .18s,box-shadow .18s;}
.ds-row-dot[data-swap]:hover{transform:scale(1.08);}
.ds-row-info[data-swap] .ds-row-name{text-decoration:underline dotted rgba(34,64,60,0.25);text-underline-offset:3px;}
.ds-row-info[data-swap]:hover .ds-row-name{text-decoration-color:var(--teal);}

.swap-mask{
  position:fixed;inset:0;z-index:500;background:rgba(24,42,38,0.42);
  display:flex;align-items:center;justify-content:center;padding:24px;
  opacity:0;pointer-events:none;transition:opacity .18s ease;
}
.swap-mask.open{opacity:1;pointer-events:auto;}
.swap-panel{
  width:100%;max-width:520px;max-height:86vh;display:flex;flex-direction:column;
  background:var(--cream);border:1px solid rgba(34,64,60,0.10);
  border-radius:20px;box-shadow:0 24px 60px rgba(24,42,38,0.28);
  padding:26px 26px 20px;position:relative;
  transform:translateY(12px) scale(.98);transition:transform .2s ease;
}
.swap-mask.open .swap-panel{transform:none;}
.swap-x{
  position:absolute;top:14px;right:14px;width:32px;height:32px;border-radius:50%;
  border:none;background:transparent;color:var(--muted);font-size:20px;line-height:1;cursor:pointer;
}
.swap-x:hover{color:var(--teal-ink);background:rgba(34,64,60,0.06);}
.swap-eyebrow{font-size:12.5px;letter-spacing:3px;text-transform:uppercase;color: var(--gold-text);margin-bottom:6px;}
.swap-title{font-family:var(--font-serif);font-size:22px;font-weight:600;color:var(--teal-ink);margin-bottom:18px;}
.swap-cur{
  display:flex;align-items:center;gap:12px;padding:12px 14px;margin-bottom:18px;
  background:var(--white);border:1px solid rgba(34,64,60,0.08);border-radius:var(--radius-md);
}
.swap-cur .bead{
  width:38px;height:38px;border-radius:50%;flex-shrink:0;
  box-shadow:inset 0 -3px 5px rgba(0,0,0,0.10),0 2px 6px rgba(34,64,60,0.20);
}
.swap-cur .meta{font-size:13.5px;color:var(--muted);margin-top:2px;}
.swap-grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:10px;
  overflow-y:auto;padding:2px;flex:1;
}
.swap-card{
  border:1px solid rgba(34,64,60,0.08);border-radius:var(--radius-md);background:var(--white);
  padding:12px 8px 10px;text-align:center;cursor:pointer;transition:all .18s;position:relative;
}
.swap-card:hover{border-color:var(--teal);transform:translateY(-2px);box-shadow:0 4px 14px var(--shadow);}
.swap-card .bead{width:34px;height:34px;border-radius:50%;margin:0 auto 7px;box-shadow:0 2px 6px rgba(34,64,60,0.22);}
.swap-card .nm{font-size:14px;line-height:1.3;min-height:30px;display:flex;align-items:center;justify-content:center;font-weight:500;}
.swap-card .diff{font-size:13px;margin-top:3px;letter-spacing:0.3px;}
.swap-card .diff.up{color: var(--teal-text);}
.swap-card .diff.down{color: var(--gold-text);}
.swap-card .diff.same{color:var(--muted);}
.swap-card.avoid{opacity:.4;filter:grayscale(0.65);}
.swap-card.current{border-color:var(--teal);box-shadow:0 0 0 2px rgba(62,131,119,0.18);cursor:default;}
.swap-card.current::after{
  content:'in use';position:absolute;top:6px;right:8px;font-size:12px;
  letter-spacing:0.5px;text-transform:uppercase;color: var(--teal-text);
}
.swap-foot{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:18px;padding-top:14px;border-top:1px solid rgba(34,64,60,0.08);}
.swap-foot .tip{font-size:13.5px;color:var(--muted);}
.swap-empty{grid-column:1/-1;font-size:14px;color:var(--muted);text-align:center;padding:20px 0;}
@media(max-width:640px){
  .swap-mask{align-items:flex-end;padding:0;}
  .swap-panel{max-width:none;border-radius:20px 20px 0 0;max-height:82vh;padding:22px 18px 18px;}
}

/* ===== Result 页珠串可视化（strand） ===== */
.strand-wrap{
  margin:0 0 20px;padding:22px 14px;background:var(--white);
  border-radius:var(--radius-md);border:1px solid rgba(34,64,60,0.06);
  position:relative;
}
.strand{
  display:flex;align-items:center;justify-content:center;flex-wrap:wrap;
  gap:5px;position:relative;
}
.strand::before{
  content:'';position:absolute;left:6px;right:6px;top:50%;
  height:1.5px;background:rgba(34,64,60,0.14);transform:translateY(-50%);
}
.strand .s-bead{
  width:24px;height:24px;border-radius:50%;position:relative;
  box-shadow:0 1px 4px rgba(34,64,60,0.28);
}
.strand .s-bead.spacer{width:13px;height:13px;}
/* 自带珠（心意珠）：金环区分，不参与五行 */
.strand .s-bead.s-bead-own{
  box-shadow:0 0 0 2px rgba(176,141,100,.8),0 1px 4px rgba(34,64,60,0.28);
}
.bead-item-own{
  border-color:rgba(176,141,100,.45);
  background:linear-gradient(180deg,rgba(176,141,100,.06),rgba(176,141,100,0));
}
.bead-item-own .bead-meta{color: var(--gold-text);}
.strand-legend{
  display:flex;justify-content:center;gap:16px;flex-wrap:wrap;
  margin-top:14px;font-size:13.5px;color:var(--muted);
}
.strand-legend i{display:inline-block;width:9px;height:9px;border-radius:50%;margin-right:5px;vertical-align:-1px;}

/* ===== v1.1.2 · 幽灵按钮（保存/分享配方卡） ===== */
.btn-ghost{
  background:transparent;color:var(--teal-dark,#22403C);
  border:1px solid rgba(34,64,60,0.22);
}
.btn-ghost:hover{background:rgba(62,131,119,0.07);border-color:rgba(34,64,60,0.4);}
.btn-ghost:disabled{opacity:.6;cursor:default;}

/* ===== v1.1.2 · 结果页：东↔西桥接卡 ===== */
.bridge-card{
  padding:26px 26px 22px;text-align:center;
  background:linear-gradient(180deg,rgba(255,255,255,0.9),rgba(246,241,232,0.85));
  border:1px solid rgba(34,64,60,0.08);
}
.bridge-head{display:flex;align-items:center;justify-content:center;gap:12px;margin-bottom:14px;}
.bridge-kind{
  font-size:12.5px;letter-spacing:2.5px;text-transform:uppercase;
  padding:4px 12px;border-radius:999px;border:1px solid currentColor;
}
.bridge-kind.echo{color: var(--teal-text);}
.bridge-kind.balance{color: var(--gold-text);}
.bridge-sign{font-size:14px;color:var(--muted);letter-spacing:1px;}
.bridge-text{
  font-family:var(--font-serif);font-size:18px;line-height:1.75;color:var(--teal-ink);
  max-width:640px;margin:0 auto;
}
.bridge-zh{
  font-size:15px;line-height:1.9;color:var(--muted);margin-top:10px;letter-spacing:0.5px;
}
.bridge-note{font-size:13.5px;color:var(--muted);opacity:.8;margin-top:16px;}

/* ===== v1.1.2 · 结果页：五行解读（破除黑箱） ===== */
.bazi-how{
  max-width:660px;margin:14px auto 0;padding:14px 18px;
  font-size:15px;line-height:1.9;color:var(--muted);
  background:var(--white);border-left:2px solid var(--gold);border-radius:0 8px 8px 0;
}

/* ===== v1.1.2 · 结果页：体质随季节变化提示 ===== */
.const-shift{
  font-size:14px;line-height:1.8;color:var(--muted);margin-top:14px;text-align:center;
}
.const-shift a{color: var(--teal-text);text-decoration:underline;text-underline-offset:2px;}

/* ===== v1.1.2 · 结果页：穿戴建议 + 时令节气 ===== */
.wear-card{padding:24px 26px;}
.wear-row{
  display:flex;align-items:baseline;gap:16px;padding:10px 0;
  border-bottom:1px dashed rgba(34,64,60,0.12);
}
.wear-row:last-of-type{border-bottom:none;}
.wear-k{
  flex:0 0 96px;font-size:12.5px;letter-spacing:2px;text-transform:uppercase;color: var(--gold-text);
}
.wear-v{font-size:17px;color:var(--teal-ink);font-weight:500;}
.wear-v em{font-style:normal;font-size:14px;color:var(--muted);margin-left:6px;}
.season-box{
  margin-top:18px;padding:16px 18px;border-radius:var(--radius-md);
  background:linear-gradient(135deg,rgba(62,131,119,0.07),rgba(198,160,96,0.08));
  border:1px solid rgba(34,64,60,0.06);
}
.season-term{
  font-family:var(--font-serif);font-size:16px;color:var(--teal-ink);margin-bottom:6px;
}
.season-term span{font-size:14px;color:var(--muted);margin-left:8px;letter-spacing:1px;}
.season-tip{font-size:15.5px;line-height:1.8;color:var(--teal-ink);}
.season-zh{font-size:14px;line-height:1.8;color:var(--muted);margin-top:4px;}
.wear-note{font-size:13.5px;color:var(--muted);opacity:.85;margin-top:16px;}
/* ===== v1.1.2 · quiz 续答卡 ===== */
.resume-card{
  max-width:560px;margin:0 auto 28px;padding:20px 22px;text-align:center;
  background:var(--white);border:1px solid rgba(198,160,96,0.35);border-radius:var(--radius-md,12px);
  box-shadow:0 4px 18px var(--shadow);
}
.resume-kicker{font-size:12.5px;letter-spacing:2.5px;text-transform:uppercase;color: var(--gold-text);margin-bottom:8px;}
.resume-title{font-family:var(--font-serif);font-size:18px;color:var(--teal-ink);margin-bottom:4px;}
.resume-sub{font-size:14px;color:var(--muted);margin-bottom:14px;}
.resume-actions{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;}

/* ===== 2026-09-16 · 重测节流（刚测过就不必再测一遍） ===== */
.retake-card{
  max-width:560px;margin:0 auto 28px;padding:22px 24px;text-align:center;
  background:var(--white);border:1px solid rgba(124,158,178,0.34);border-radius:var(--radius-md,16px);
  box-shadow:0 6px 22px var(--shadow);
}
.retake-kicker{font-size:12.5px;letter-spacing:2.5px;text-transform:uppercase;color: var(--teal-text);margin-bottom:8px;}
.retake-title{font-family:var(--font-serif);font-size:19px;color:var(--teal-ink);margin-bottom:8px;}
.retake-sub{font-size:15px;line-height:1.85;color:var(--muted);margin-bottom:8px;}
.retake-meta{font-size:14px;color: var(--gold-text);letter-spacing:.3px;margin-bottom:16px;}
.retake-actions{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;}
.retake-note{
  max-width:560px;margin:0 auto 24px;padding:11px 20px;border-radius:999px;text-align:center;
  background:rgba(255,255,255,0.72);border:1px solid rgba(50,71,84,0.10);
  font-size:14.5px;line-height:1.7;color:var(--muted);
}
.retake-note a{color: var(--teal-text);text-decoration:underline;text-underline-offset:2px;}

/* ===== v1.1.2 · 首页材质墙（横向滑动） ===== */
.material-wall{
  display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;
  padding:6px 4px 16px;-webkit-overflow-scrolling:touch;
  scrollbar-width:thin;
}
.material-wall::-webkit-scrollbar{height:6px;}
.material-wall::-webkit-scrollbar-thumb{background:rgba(34,64,60,0.16);border-radius:999px;}
.mw-card{
  flex:0 0 116px;scroll-snap-align:start;text-align:center;
}
.mw-img{
  width:100%;aspect-ratio:1/1;border-radius:14px;margin-bottom:9px;
  background:#FAFBFC center/cover no-repeat;
  border:1px solid rgba(34,64,60,0.07);
  box-shadow:0 2px 8px rgba(34,64,60,0.06);
}
.mw-name{
  font-size:14px;line-height:1.35;color:var(--teal-ink);font-weight:500;
  min-height:31px;display:flex;align-items:flex-start;justify-content:center;
}
.mw-el{font-size:12.5px;color:var(--muted);margin-top:3px;letter-spacing:0.4px;}
.mw-el i{display:inline-block;width:7px;height:7px;border-radius:50%;margin-right:4px;vertical-align:1px;}
.mw-hint{display:none;font-size:13.5px;color:var(--muted);text-align:center;margin-top:-6px;}
@media(max-width:640px){.mw-hint{display:block;}}

/* ===== v1.1.2 · 自带珠弹窗（设计器） ===== */
.ds-row-fixed{font-size:14px;color:var(--muted);padding:0 10px;min-width:34px;text-align:center;}
.cb-mask{
  position:fixed;inset:0;z-index:140;display:flex;align-items:center;justify-content:center;
  padding:20px;background:rgba(34,64,60,0.44);backdrop-filter:blur(2px);
}
.cb-mask[hidden]{display:none;}
.cb-panel{
  width:100%;max-width:620px;max-height:92vh;overflow-y:auto;padding:24px 26px 22px;
  background:var(--white);border-radius:18px;box-shadow:0 18px 50px rgba(34,64,60,0.22);
}
.cb-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px;}
.cb-head h4{font-family:var(--font-serif);font-size:19px;color:var(--teal-ink);margin:0;}
.cb-x{
  width:30px;height:30px;border-radius:50%;border:none;background:rgba(34,64,60,0.06);
  color:var(--muted);font-size:17px;line-height:1;cursor:pointer;
}
.cb-x:hover{background:rgba(34,64,60,0.12);}
.cb-lead{font-size:15.5px;line-height:1.8;color:var(--teal-ink);margin-bottom:12px;}
.cb-tips{margin:0 0 16px;padding-left:18px;font-size:14px;line-height:1.85;color:var(--muted);}
.cb-pick{
  display:block;text-align:center;padding:14px;border-radius:12px;cursor:pointer;
  border:1.5px dashed rgba(198,160,96,0.6);background:rgba(198,160,96,0.06);
  color:var(--teal-ink);font-size:15.5px;font-weight:500;
}
.cb-pick:hover{background:rgba(198,160,96,0.12);}
.cb-note{font-size:13.5px;line-height:1.7;color:var(--muted);margin-top:12px;}

.cb-mine-h{font-size:12.5px;letter-spacing:2px;text-transform:uppercase;color: var(--gold-text);margin:18px 0 8px;}
.cb-mine-row{
  display:flex;align-items:center;gap:10px;padding:7px 0;border-bottom:1px dashed rgba(34,64,60,0.1);
}
.cb-mine-row img{width:34px;height:34px;border-radius:50%;background:#FAFBFC;}
.cb-mine-n{flex:1;font-size:15px;color:var(--teal-ink);}
.cb-mine-x{
  width:26px;height:26px;border-radius:50%;border:none;background:rgba(34,64,60,0.06);
  color:var(--muted);cursor:pointer;font-size:17px;line-height:1;
}

.cb-stage{display:flex;gap:18px;flex-wrap:wrap;justify-content:center;margin-bottom:16px;}
.cb-box{display:flex;flex-direction:column;align-items:center;gap:7px;}
.cb-box span{font-size:12.5px;letter-spacing:1.6px;text-transform:uppercase;color:var(--muted);}
.cb-box canvas{
  border-radius:14px;border:1px solid rgba(34,64,60,0.1);background:#FAFBFC;touch-action:none;
}
#cbBead{width:150px;height:150px;}
#cbCut{
  max-width:100%;height:auto;max-height:260px;
  background-color:#fff;
  background-image:
    linear-gradient(45deg,#EDE9E0 25%,transparent 25%,transparent 75%,#EDE9E0 75%),
    linear-gradient(45deg,#EDE9E0 25%,transparent 25%,transparent 75%,#EDE9E0 75%);
  background-size:16px 16px;background-position:0 0,8px 8px;
}
.cb-tools{display:flex;flex-direction:column;gap:10px;margin-bottom:16px;}
.cb-tool{display:flex;align-items:center;gap:10px;font-size:13.5px;letter-spacing:1px;text-transform:uppercase;color: var(--gold-text);}
.cb-tool input[type=range]{flex:1;accent-color:var(--teal);}
.cb-brush{display:flex;gap:8px;flex-wrap:wrap;}
.cb-btn{
  padding:6px 14px;border-radius:999px;border:1px solid rgba(34,64,60,0.16);
  background:var(--white);color:var(--muted);font-size:14px;cursor:pointer;
}
.cb-btn.on{background: var(--teal-solid);color:#fff;border-color:var(--teal);}
.cb-name{
  width:100%;padding:10px 12px;border-radius:10px;border:1px solid rgba(34,64,60,0.16);
  font-size:16px;color:var(--teal-ink);background:var(--paper);margin-bottom:14px;
}
.cb-actions{display:flex;gap:10px;justify-content:flex-end;flex-wrap:wrap;}
@media(max-width:640px){
  .cb-mask{padding:0;align-items:flex-end;}
  .cb-panel{max-width:none;border-radius:18px 18px 0 0;max-height:94vh;padding:20px 18px 20px;}
  #cbBead{width:120px;height:120px;}
}

/* ===== v1.1.2 · 首页示例配方卡 ===== */
.sample-card{
  max-width:620px;margin:0 auto;padding:30px 26px 26px;text-align:center;
  background:var(--cream);border:1px solid rgba(34,64,60,0.08);border-radius:var(--radius-lg,16px);
  box-shadow:0 6px 24px var(--shadow);
}
.sample-tag{
  display:inline-block;font-size:12.5px;letter-spacing:2.5px;text-transform:uppercase;
  color: var(--gold-text);border:1px solid rgba(198,160,96,0.5);border-radius:999px;padding:3px 12px;margin-bottom:12px;
}
.sample-title{
  font-family:var(--font-serif);font-size:20px;color:var(--teal-ink);margin-bottom:18px;line-height:1.5;
}
.sample-note{font-size:14px;color:var(--muted);line-height:1.8;margin:4px 0 20px;}

@media(max-width:520px){
  .wear-k{flex-basis:74px;}
  .bridge-card{padding:20px 16px 18px;}
  .bridge-text{font-size:16px;}
}

/* ===== v1.2 · Home Refresh (2026-09-16): White Base + Editorial Hero + Nav Dropdown ===== */

/* Caveat 手写点缀 */
.hand{font-family:var(--font-hand);font-weight:500;}

/* --- 小节眉标 --- */
.sec-kicker{
  font-size:14px;letter-spacing:3px;text-transform:uppercase;
  color: var(--gold-text);font-weight:600;margin-bottom:10px;
}

/* --- Editorial Hero --- */
.hero-v2{
  position:relative;min-height:90vh;display:flex;align-items:center;
  background:var(--white);overflow:hidden;
}
.hero-v2-media{
  position:absolute;top:0;right:0;bottom:0;width:60%;
  background:url('/static/img/hero/hero-main.jpg') center/cover no-repeat;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 22%);
  mask-image:linear-gradient(90deg,transparent 0,#000 22%);
}
.hero-v2-inner{
  position:relative;z-index:2;max-width:1200px;margin:0 auto;width:100%;
  padding:150px 24px 90px;
}
.hero-v2-copy{max-width:620px;}
.hero-v2 h1{font-size:clamp(40px,5vw,62px);max-width:620px;}
.hero-kicker{
  font-size:14px;letter-spacing:3px;text-transform:uppercase;
  color: var(--teal-text);font-weight:600;margin-bottom:18px;
}
.hero-hand{
  font-family:var(--font-hand);font-size:clamp(26px,3vw,34px);
  color: var(--gold-text);line-height:1.15;margin-bottom:4px;
}
.hero-v2 h1{color:var(--teal-ink);margin-bottom:22px;}
.hero-v2-sub{
  font-size:18px;color:var(--muted);max-width:440px;line-height:1.8;margin-bottom:36px;
}
.hero-v2-ctas{display:flex;gap:14px;flex-wrap:wrap;}

/* --- 品类图卡 --- */
.cat-row{
  display:grid;grid-template-columns:repeat(6,1fr);gap:18px;
}
.cat-card{
  position:relative;border-radius:var(--radius-lg);overflow:hidden;
  aspect-ratio:3/4;display:block;background:var(--cream);
  box-shadow:0 2px 14px var(--shadow);
  transition:transform .3s ease,box-shadow .3s ease;
}
.cat-card:hover{transform:translateY(-5px);box-shadow:0 14px 34px var(--shadow-deep);}
.cat-card img{width:100%;height:100%;object-fit:contain;padding:14px 14px 56px;transition:transform .5s ease;}
.cat-card:hover img{transform:scale(1.05);}
.cat-card .cat-label{
  position:absolute;left:0;right:0;bottom:0;padding:34px 16px 14px;color:#fff;
  font-family:var(--font-serif);font-size:21px;letter-spacing:.5px;
  background:linear-gradient(transparent,rgba(28,44,54,.62));
}
.cat-card .cat-sub{
  display:block;font-family:var(--font-sans);font-size:12.5px;letter-spacing:2px;
  text-transform:uppercase;opacity:.85;margin-top:3px;
}

/* --- 导航下拉 --- */
.nav-item{position:relative;}
.nav-item::after{
  content:'';position:absolute;top:100%;left:-10px;right:-10px;height:16px;
  display:none;
}
@media(min-width:861px){.nav-item:hover::after{display:block;}}
.nav-drop{
  position:absolute;top:calc(100% + 6px);left:50%;transform:translate(-50%,8px);
  background:var(--white);min-width:216px;border-radius:16px;
  box-shadow:0 18px 44px rgba(50,71,84,.16);border:1px solid rgba(50,71,84,.07);
  padding:10px;opacity:0;visibility:hidden;transition:all .22s ease;z-index:120;
}
.nav-drop::before{
  content:'';position:absolute;top:-7px;left:50%;width:14px;height:14px;
  background:var(--white);transform:translateX(-50%) rotate(45deg);
  border-left:1px solid rgba(50,71,84,.07);border-top:1px solid rgba(50,71,84,.07);
}
@media(min-width:861px){
  .nav-item:hover .nav-drop,.nav-item:focus-within .nav-drop{
    opacity:1;visibility:visible;transform:translate(-50%,0);
  }
}
.nav-drop .drop-head{
  font-size:13px;letter-spacing:2px;text-transform:uppercase;
  color:var(--muted);padding:8px 14px 5px;font-weight:600;
}
.nav-drop a{
  display:block;padding:9px 14px;border-radius:10px;font-size:16px;
  text-transform:none;letter-spacing:.3px;opacity:1;color:var(--teal-ink);
}
.nav-drop a:hover{background:var(--cream);color:var(--teal-dark);}
.nav-drop .drop-sep{height:1px;background:rgba(50,71,84,.07);margin:8px 6px;}
/* 末位导航项（About）：下拉靠右对齐，避免居中溢出视口被裁 */
.nav-item-end .nav-drop{left:auto;right:0;transform:translate(0,8px);}
.nav-item-end .nav-drop::before{left:auto;right:26px;}
@media(min-width:861px){
  .nav-item-end:hover .nav-drop,.nav-item-end:focus-within .nav-drop{transform:translate(0,0);}
}

/* --- 响应式 --- */
@media(max-width:960px){
  .cat-row{grid-template-columns:repeat(3,1fr);}
}
@media(max-width:860px){
  .hero-v2{min-height:auto;display:block;}
  .hero-v2-media{
    position:relative;width:100%;height:44vh;
    -webkit-mask-image:none;mask-image:none;
    border-radius:0 0 var(--radius-xl) var(--radius-xl);
  }
  .hero-v2-inner{padding:110px 24px 24px;}
  .hero-v2-copy{max-width:none;}
  .hero-v2-sub{max-width:none;}
}
@media(max-width:560px){
  .cat-row{grid-template-columns:repeat(2,1fr);gap:12px;}
  .cat-card .cat-label{font-size:17px;padding:24px 12px 10px;}
}

/* ===== 2026-09-16 · 答题页：9 段分类进度 + 类别过渡 + 刻度式选项 ===== */
.quiz-container{position:relative;}
.quiz-container::before{
  content:'';position:fixed;top:-12vh;left:50%;width:min(760px,130vw);height:min(760px,130vw);
  transform:translateX(-50%);
  background:radial-gradient(circle,rgba(126,181,201,0.10) 0%,transparent 68%);
  pointer-events:none;z-index:0;
}
.quiz-container > *{position:relative;z-index:1;}

/* 分段进度条：细线 → 9 段（每段 = 一个体质分类） */
.quiz-progress{height:auto;background:none;margin-bottom:34px;padding-top:2px;}
.quiz-segs{display:flex;gap:6px;align-items:center;}
.quiz-segs .q-seg{
  flex:1;height:4px;border-radius:99px;background:rgba(50,71,84,0.09);
  overflow:hidden;transition:background .3s,box-shadow .3s;
}
.quiz-segs .q-seg i{
  display:block;height:100%;width:0;border-radius:99px;
  background:linear-gradient(90deg,var(--teal-light),var(--teal));
  transition:width .45s cubic-bezier(.4,0,.2,1);
}
.quiz-segs .q-seg.active{background:rgba(124,158,178,0.16);box-shadow:0 0 0 3px rgba(124,158,178,0.08);}
.quiz-segs .q-seg.done{background:rgba(184,151,90,0.16);}
.quiz-segs .q-seg.done i{background:linear-gradient(90deg,var(--gold-light),var(--gold));}
.quiz-meta{
  display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-top:11px;
  font-size:13px;letter-spacing:2.2px;text-transform:uppercase;color:var(--muted);
}
.quiz-part{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.quiz-count{flex-shrink:0;letter-spacing:1.4px;}
.quiz-count b{
  display:inline-block;font-family:var(--font-serif);font-size:16px;letter-spacing:0;color:var(--teal-ink);
}
.quiz-count b.pop{animation:beadPop .42s ease;}
@keyframes beadPop{0%{transform:scale(1);}42%{transform:scale(1.5);color: var(--gold-text);}100%{transform:scale(1);}}

/* 开场的期待管理（降低中途流失） */
.quiz-lead{font-size:15.5px;color:var(--muted);margin:-26px 20px 0;line-height:1.75;}

/* 段落过渡卡：换段时才播放一次动画 */
.q-cat{
  display:flex;flex-direction:column;align-items:center;gap:5px;
  padding:14px 28px;border-radius:999px;margin-bottom:26px;
  background:rgba(255,255,255,0.72);backdrop-filter:blur(14px);
  border:1px solid rgba(50,71,84,0.06);box-shadow:0 2px 14px var(--shadow);
}
.q-cat-part{font-size:12.5px;letter-spacing:2.8px;text-transform:uppercase;color: var(--gold-text);font-weight:600;}
.q-cat-title{font-family:var(--font-serif);font-size:20px;color:var(--teal-ink);line-height:1.2;}
.q-cat-sub{font-size:14.5px;color:var(--muted);line-height:1.5;}
.q-cat.cat-in{animation:catIn .55s cubic-bezier(.2,.7,.3,1);}
@keyframes catIn{from{opacity:0;transform:translateY(9px);}to{opacity:1;transform:none;}}

/* 选项：5 档刻度条，位置即答案（不用逐字读） */
.quiz-question .quiz-options{
  display:grid;grid-template-columns:repeat(5,1fr);gap:10px;
  width:100%;max-width:620px;
}
.quiz-option{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:9px;
  padding:15px 6px 13px;border-radius:var(--radius-md);text-align:center;
  border:1.5px solid rgba(50,71,84,0.1);background:rgba(255,255,255,0.78);
  transition:all .22s ease;
}
.quiz-option:hover{
  border-color:var(--teal);background:rgba(124,158,178,0.06);
  transform:translateY(-2px);box-shadow:0 6px 18px var(--shadow);
}
.quiz-option .qo-scale{display:flex;gap:3px;}
.quiz-option .qo-scale i{width:6px;height:6px;border-radius:50%;background:rgba(50,71,84,0.13);transition:background .2s;}
.quiz-option .qo-scale i.on{background: var(--teal-solid);}
.quiz-option:hover .qo-scale i.on{background:var(--teal-solid);}
.quiz-option .qo-label{font-size:14px;color:var(--teal-ink);letter-spacing:.2px;}

/* 回退 + 键盘提示 */
.quiz-foot{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  width:100%;max-width:620px;margin-top:26px;
}
.q-back{font-size:14.5px;color:var(--muted);padding:6px 2px;transition:color .2s;}
.q-back:hover:not(:disabled){color: var(--teal-text);}
.q-back:disabled{opacity:.35;cursor:default;}
.q-hint{font-size:13.5px;color:var(--muted-light);letter-spacing:.4px;}

@media(max-width:560px){
  .quiz-question .quiz-options{gap:6px;}
  .quiz-option{padding:13px 3px 11px;border-radius:12px;gap:7px;}
  .quiz-option .qo-scale{gap:2px;}
  .quiz-option .qo-scale i{width:5px;height:5px;}
  .quiz-option .qo-label{font-size:12.5px;letter-spacing:0;}
  .q-cat{padding:12px 18px;}
  .q-cat-title{font-size:17px;}
  .q-hint{display:none;}
  .quiz-meta{font-size:12.5px;letter-spacing:1.6px;}
}

/* ===== 2026-09-16 · 结果页层次重构（首屏 + 章节手风琴） ===== */
.rh-wrap{
  position:relative;min-height:100vh;padding-top:calc(var(--nav-h) + 6px);
  overflow-x:hidden;overflow-x:clip;   /* 光晕层 140vw 会撑出横向滚动，裁掉 */
  background:
    radial-gradient(circle at 50% 0%,rgba(126,181,201,0.10),transparent 55%),
    radial-gradient(circle at 10% 34%,rgba(184,151,90,0.07),transparent 46%),
    radial-gradient(circle at 90% 72%,rgba(126,181,201,0.06),transparent 50%);
}
.rh-hero{position:relative;max-width:780px;margin:0 auto;padding:40px 24px 6px;text-align:center;}
.rh-glow{
  position:absolute;top:-60px;left:50%;width:min(820px,140vw);height:min(820px,140vw);
  transform:translateX(-50%);pointer-events:none;z-index:0;
  background:radial-gradient(circle,rgba(126,181,201,0.14) 0%,rgba(184,151,90,0.05) 38%,transparent 70%);
}
.rh-hero > *:not(.rh-glow){position:relative;z-index:1;}
.rh-kicker{
  font-family:var(--font-hand);font-size:clamp(25px,3vw,33px);font-weight:500;
  color: var(--gold-text);line-height:1.2;margin-bottom:12px;
}
.rh-congrats{
  font-family:var(--font-serif);font-size:clamp(16.5px,2.1vw,19.5px);
  line-height:1.9;color:var(--muted);margin-bottom:30px;
}
.rh-title{
  font-family:var(--font-serif);font-size:clamp(34px,6vw,54px);font-weight:600;
  color:var(--teal-ink);letter-spacing:-.02em;line-height:1.08;margin-bottom:10px;
}
.rh-sub{font-size:14.5px;letter-spacing:2.4px;text-transform:uppercase;color:var(--muted);margin-bottom:24px;}
.rh-ring{display:flex;flex-direction:column;align-items:center;margin-bottom:18px;}
.rh-ring-canvas{display:block;filter:drop-shadow(0 18px 34px rgba(50,71,84,0.10));}
.rh-recipe-line{font-size:16px;color:var(--muted);letter-spacing:.2px;margin-bottom:24px;}
.rh-recipe-line b{color:var(--teal-ink);font-weight:600;}
.rh-ctas{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-bottom:14px;}
.rh-mini{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-bottom:16px;}
.rh-note{font-size:14px;color:var(--muted);opacity:.9;max-width:420px;margin:0 auto;line-height:1.7;}

/* 加载态：珠子起伏 + 分句提示 */
.rh-loading{padding:44px 0 24px;}
.rh-load-beads{display:flex;justify-content:center;gap:9px;margin-bottom:24px;}
.rh-load-beads i{
  width:12px;height:12px;border-radius:50%;background:var(--teal-light);
  opacity:.3;animation:beadWave 1.25s ease-in-out infinite;
}
.rh-load-beads i:nth-child(2){animation-delay:.12s;background:var(--gem-water);}
.rh-load-beads i:nth-child(3){animation-delay:.24s;background: var(--teal-solid);}
.rh-load-beads i:nth-child(4){animation-delay:.36s;background:var(--gem-earth);}
.rh-load-beads i:nth-child(5){animation-delay:.48s;background:var(--gold-light);}
@keyframes beadWave{
  0%,100%{opacity:.25;transform:translateY(0) scale(.9);}
  42%{opacity:.95;transform:translateY(-7px) scale(1);}
}
.rh-load-text{font-family:var(--font-serif);font-size:17px;color:var(--muted);letter-spacing:.4px;}

/* 正文容器 */
.rh-body{max-width:720px;margin:0 auto;padding:10px 24px 96px;}

/* 专属理由 */
.rh-why{
  padding:22px 26px;border-radius:22px;margin:14px 0 24px;
  background:linear-gradient(180deg,rgba(255,255,255,0.88),rgba(251,246,236,0.72));
  backdrop-filter:blur(18px);border:1px solid rgba(50,71,84,0.06);
  box-shadow:0 2px 18px var(--shadow);
}
.rh-why-kicker{
  font-size:12.5px;letter-spacing:2.8px;text-transform:uppercase;
  color: var(--gold-text);font-weight:600;margin-bottom:14px;
}
.rh-why-list{list-style:none;display:flex;flex-direction:column;gap:12px;}
.rh-why-list li{position:relative;padding-left:20px;font-size:17px;line-height:1.85;color:var(--teal-ink);}
.rh-why-list li::before{
  content:'';position:absolute;left:0;top:12px;width:7px;height:7px;border-radius:50%;
  background:var(--teal-light);
}
.rh-why-list li b{font-weight:600;color:var(--teal-ink);}

/* 章节手风琴 */
.acc{
  border-radius:22px;margin-bottom:14px;overflow:hidden;
  background:rgba(255,255,255,0.72);backdrop-filter:blur(18px);
  border:1px solid rgba(50,71,84,0.06);box-shadow:0 2px 16px var(--shadow);
  transition:background .3s,box-shadow .3s;
}
.acc.open{background:rgba(255,255,255,0.92);box-shadow:0 8px 30px var(--shadow-deep);}
/* .peek = 桌面端鼠标悬停时的临时浮现态（未锁定，移开即收回） */
.acc.peek{
  background:rgba(255,255,255,0.86);box-shadow:0 6px 24px var(--shadow);
  border-color:rgba(50,71,84,0.10);
}
.acc-head{
  width:100%;display:grid;grid-template-columns:1fr auto auto;align-items:center;gap:12px;
  padding:20px 24px;text-align:left;font-family:var(--font-sans);cursor:pointer;
}
.acc-t{font-family:var(--font-serif);font-size:20px;color:var(--teal-ink);line-height:1.3;transition:color .2s;}
.acc-head:hover .acc-t{color: var(--teal-text);}
.acc-s{
  font-size:14.5px;color:var(--muted);text-align:right;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.acc-arrow{
  width:8px;height:8px;flex-shrink:0;
  border-right:1.6px solid var(--muted);border-bottom:1.6px solid var(--muted);
  transform:rotate(45deg);transition:transform .3s,border-color .3s;
}
.acc.open .acc-arrow,
.acc.peek .acc-arrow{transform:rotate(-135deg);border-color:var(--teal);}
.acc-body{max-height:0;overflow:hidden;padding:0 22px;transition:max-height .42s ease,padding .3s ease;}
.acc.open .acc-body,
.acc.peek .acc-body{max-height:2800px;padding:0 22px 24px;}

/* 章节工具条：一键展开 / 收起 */
.acc-tools{
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  margin:2px 4px 12px;flex-wrap:wrap;
}
.acc-tip{font-size:14.5px;color:var(--muted);letter-spacing:.2px;}
.acc-tool{
  font-family:var(--font-sans);font-size:14.5px;letter-spacing:.3px;
  color:var(--teal-ink);background:rgba(255,255,255,0.72);cursor:pointer;
  border:1px solid rgba(50,71,84,0.14);border-radius:999px;padding:7px 16px;
  transition:color .2s,border-color .2s,background .2s,box-shadow .2s;
}
.acc-tool:hover{
  color: var(--teal-text);border-color:rgba(46,125,122,0.4);
  background:rgba(255,255,255,0.95);box-shadow:0 4px 14px var(--shadow);
}
.acc-card{background:var(--white);border-radius:18px;box-shadow:none;}
.acc-card:hover{transform:none;box-shadow:none;}
.acc-note{text-align:center;color:var(--muted);font-size:16px;line-height:1.85;margin-top:8px;}

/* 配方卡内部（成本拆分） */
.rc-head{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;margin-bottom:18px;}
.rc-name{font-family:var(--font-serif);font-size:21px;margin:0 0 4px;color:var(--teal-ink);}
.rc-meta{font-size:15px;color:var(--muted);margin:0;}
.rc-price{text-align:right;}
.rc-price span{display:block;font-size:14px;color:var(--muted);letter-spacing:.6px;}
.rc-price b{font-family:var(--font-serif);font-size:25px;font-weight:600;color: var(--teal-text);}
.rc-break{
  border-top:1px dashed rgba(50,71,84,0.12);padding-top:15px;
  display:flex;flex-direction:column;gap:9px;
}
.rc-row{display:flex;justify-content:space-between;font-size:15.5px;color:var(--muted);}
.rc-row b{color:var(--teal-ink);font-weight:500;}
.rc-row-total{border-top:1px solid rgba(50,71,84,0.08);padding-top:11px;font-size:16px;}
.rc-row-total b{font-family:var(--font-serif);font-size:19px;font-weight:600;color: var(--teal-text);}
.rc-beadname{font-family:var(--font-serif);font-size:22px;color:var(--teal-ink);margin-bottom:6px;}
.rc-zh{color:var(--muted);font-size:15.5px;line-height:1.8;}
.rc-scores{margin-top:18px;display:flex;gap:16px;flex-wrap:wrap;}
.rc-score{flex:1;min-width:110px;}
.rc-score-k{font-size:13.5px;color:var(--muted);letter-spacing:.4px;}
.rc-score-v{font-family:var(--font-serif);font-size:19px;font-weight:600;color: var(--teal-text);}
.bead-list{margin-top:20px;}
.strand-legend i.lg-own{
  background:radial-gradient(circle at 32% 30%,#DCC9A9,#B08D64 62%,#8A6B45);
  box-shadow:0 0 0 1.4px rgba(176,141,100,.85);
}

@media(max-width:560px){
  .rh-wrap{padding-top:calc(var(--nav-h) + 6px);}
  .rh-hero{padding:26px 20px 4px;}
  .rh-congrats{font-size:16px;line-height:1.85;}
  .rh-body{padding:6px 16px 80px;}
  .acc-head{grid-template-columns:1fr auto;padding:17px 18px;gap:8px;}
  .acc-t{font-size:17.5px;}
  .acc-s{grid-column:1/2;grid-row:2/3;text-align:left;font-size:14px;}
  .acc-arrow{grid-row:1/3;}
  .acc-body{padding:0 16px;}
  .acc.open .acc-body{padding:0 16px 20px;}
  .acc-tools{justify-content:flex-end;margin:0 2px 10px;}
  .acc-tip{display:none;}
  .rh-why{padding:18px 20px;}
  .rh-why-list li{font-size:16px;}
  .rc-head{gap:10px;}
  .rc-head .rc-price{text-align:left;}
}

/* ===== 2026-09-16：真实珠子 & 按钮 hover 修复 ===== */
/* 全局 a:hover 的深青字会压过 .btn-primary 的白字（优先级 0,1,1 > 0,1,0），hover 时白字隐身 */
.btn-primary:hover,
.btn-primary:focus{
  color:var(--white);
}
/* 首页示例：真实水晶手链（Canvas 圆环） */
#sampleStrand{
  display:flex;
  flex-direction:column;
  align-items:center;
}
.sample-bracelet{
  display:block;
  margin:0 auto;
}
.strand-legend i.lg-photo{
  width:15px;height:15px;border-radius:50%;
  background-size:cover;background-position:center;
  box-shadow:0 1px 3px rgba(34,64,60,0.35);
  vertical-align:-3px;
}



/* ===== 2026-09-17 排版A方案补充修复 ===== */
/* Reset 按钮误用了 26px 图标按钮样式(.ds-row-del)，文字溢出把页面撑宽 */
#dsReset{ width:auto; min-width:0; height:auto; padding:5px 14px; border-radius:100px;
  font-size:14px; line-height:1.4; white-space:nowrap; flex-shrink:0;
  border:1px solid rgba(50,71,84,.15); background:var(--white); }
#dsReset:hover{ color:#C0392B; border-color:rgba(192,57,43,.35); }

/* ===== 2026-09-20 · Design Studio：撤销/重做 + 版本快照 =====
   此前草稿是单槽覆盖式：改坏了就回不去，用户只能重头再来。
   现在两层保险：① 工具栏 ↶/↷ 逐步撤销（30 步）② Saved versions 显式存档，可随时回退。 */
#dsUndo,#dsRedo{ width:auto; min-width:0; height:auto; padding:5px 12px; border-radius:100px;
  font-size:14px; line-height:1.4; white-space:nowrap; flex-shrink:0;
  border:1px solid rgba(50,71,84,.15); background:var(--white); color:var(--teal-dark,#4E7285); }
#dsUndo:hover,#dsRedo:hover{ border-color:rgba(78,114,133,.4); background:rgba(124,158,178,.10); }
#dsUndo:disabled,#dsRedo:disabled{ opacity:.38; cursor:default; border-color:rgba(50,71,84,.10); background:var(--white); }
#dsUndo:disabled:hover,#dsRedo:disabled:hover{ border-color:rgba(50,71,84,.10); background:var(--white); }

/* 未完工草稿提示条（从成品页进来会盖掉草稿时给一条回头路） */
.ds-draftbar{ display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  padding:10px 14px; margin-bottom:14px; border-radius:12px;
  background:rgba(249,242,229,.85); border:1px solid rgba(184,150,90,.30);
  font-size:14px; color:var(--ink); }
/* display:flex 会压过 hidden 属性的 UA display:none，必须显式补回 */
.ds-draftbar[hidden]{ display:none; }
.ds-draftbar .sp{ flex:1; min-width:140px; }

/* Saved versions：缩略圆环 + 名称 + 元信息 + Restore/删除 */
.ds-ver-list{ display:flex; flex-direction:column; gap:9px; }
.ds-ver{ display:flex; align-items:center; gap:10px; padding:8px 10px;
  border:1px solid rgba(50,71,84,.10); border-radius:12px; background:var(--white);
  transition:background .18s ease,border-color .18s ease; }
.ds-ver:hover{ background:rgba(124,158,178,.06); border-color:rgba(78,114,133,.22); }
.ds-ver-cv{ width:52px; height:52px; flex:0 0 52px; border-radius:50%; background:var(--white); }
.ds-ver-info{ flex:1; min-width:0; }
.ds-ver-name{ font-size:14px; font-weight:500; color:var(--ink); line-height:1.3;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ds-ver-meta{ font-size:12.5px; color:var(--muted); margin-top:2px; }
.ds-ver-act{ display:flex; align-items:center; gap:4px; flex-shrink:0; }
.ds-ver-btn{ font-size:13px; padding:5px 12px; border-radius:999px; cursor:pointer; white-space:nowrap;
  border:1px solid rgba(78,114,133,.28); background:rgba(124,158,178,.10); color:var(--teal-dark,#4E7285);
  transition:background .18s ease,border-color .18s ease; }
.ds-ver-btn:hover{ background:rgba(124,158,178,.22); border-color:rgba(78,114,133,.45); }
.ds-ver-del{ width:24px; height:24px; border-radius:50%; border:none; background:transparent;
  color:var(--muted); font-size:15px; cursor:pointer; flex-shrink:0; transition:color .2s; }
.ds-ver-del:hover{ color:#C0392B; }
.ds-ver-tag{ font-size:11.5px; color:var(--muted); font-style:italic; }
@media(max-width:600px){
  .ds-ver{ gap:8px; padding:7px 8px; }
  .ds-ver-cv{ width:44px; height:44px; flex:0 0 44px; }
  .ds-ver-btn{ font-size:12.5px; padding:4px 10px; }
}

/* ===== 2026-09-17 手机端汉堡菜单（此前手机导航整块隐藏，无任何入口） ===== */
.nav-burger{ display:none; width:34px; height:34px; flex:0 0 34px; border-radius:10px;
  border:1px solid rgba(50,71,84,.14); background:var(--white); place-items:center; }
.nav-burger i{ display:block; width:15px; height:1.6px; background:var(--teal-ink); margin:2px 0; border-radius:2px; }
.mm-scrim{ position:fixed; top:0; left:0; right:0; bottom:0; background:rgba(50,71,84,.32);
  z-index:199; opacity:0; visibility:hidden; transition:opacity .22s, visibility .22s; }
.mm-scrim.open{ opacity:1; visibility:visible; }
.mobile-menu{ position:fixed; top:0; right:0; bottom:0; width:78%; max-width:320px; background:var(--white);
  z-index:200; transform:translateX(100%); transition:transform .26s ease;
  box-shadow:-14px 0 40px rgba(50,71,84,.16); padding:20px 20px 32px; overflow-y:auto; }
.mobile-menu.open{ transform:translateX(0); }
.mm-top{ display:flex; align-items:center; justify-content:space-between; padding:4px 4px 8px; }
.mm-title{ font-family:var(--font-serif); font-size:21px; font-weight:600; letter-spacing:1px; color:var(--teal-ink); }
.mm-close{ font-size:16px; color:var(--muted); width:32px; height:32px; border-radius:50%; background:var(--white); }
.mm-close:hover{ background:var(--cream); color:var(--teal-ink); }
.mm-head{ font-size:11.5px; letter-spacing:1.8px; text-transform:uppercase; color:var(--muted); font-weight:600; padding:14px 6px 4px; }
.mm-item{ display:block; padding:13px 6px; font-size:16px; color:var(--teal-ink);
  border-bottom:1px dashed rgba(50,71,84,.1); }
.mm-item:last-child{ border-bottom:none; }
/* 设计器页原 padding-top:112px / sticky top:96px 是按旧导航高度(107px)调的，导航变高后首屏被压 */
.ds-wrap{ padding-top:calc(var(--nav-h) + 14px); }
/* 导航实测高度：桌面 110px（横幅一行）、手机 126px（横幅两行） */
:root{ --nav-h:110px; }
@media(max-width:768px){
  :root{ --nav-h:126px; }
  .nav-cta .cta-full{ display:none; }
  .nav-cta .cta-short{ display:inline; }
  .nav-cta{ font-size:11px; letter-spacing:1px; padding:7px 12px; }
  .nav-cta-wrap::before{ height:18px; margin:0 12px; }
  .nav-burger{ display:grid; }
  .nav-choice{ left:-14px; width:250px; }
}
/* 顶部横幅手机端由截断省略改为两行完整可读 */
@media(max-width:640px){
  .promo-banner{ white-space:normal; line-height:1.5; letter-spacing:0.8px; font-size:12.5px; padding:7px 14px; }
}

/* ===== 2026-09-18 内容页系统（/about /care /policies） ===== */
.ab-wrap{ padding-top:calc(var(--nav-h) + 34px); padding-bottom:80px; }
.ab-wide{ max-width:1340px; }
.ab-inner{ max-width:820px; margin:0 auto; }
.ab-kicker{ font-size:13.5px; text-transform:uppercase; letter-spacing:2.5px; color:var(--teal-text); font-weight:600; margin-bottom:10px; }
.ab-h1{ font-family:var(--font-hand); font-size:clamp(38px,6vw,56px); font-weight:500; letter-spacing:3px; color:var(--teal-ink); line-height:1.18; margin-bottom:12px; }
.ab-sub{ font-family:var(--font-serif); font-size:clamp(20px,3vw,26px); color:var(--teal-text); margin-bottom:14px; line-height:1.35; }
.ab-lede{ font-size:19px; color:var(--muted); line-height:1.85; max-width:660px; }
.ab-cn{ font-family:var(--font-cn); color:var(--gold-text); font-size:15px; letter-spacing:2px; margin-top:10px; }
.ab-toc{ display:flex; flex-wrap:wrap; gap:8px; margin:30px 0 4px; padding:16px 0; border-top:1px solid rgba(50,71,84,.08); border-bottom:1px solid rgba(50,71,84,.08); }
.ab-toc a{ font-size:13.5px; color:var(--teal-text); background:var(--cream); border-radius:100px; padding:6px 14px; border:1px solid rgba(50,71,84,.06); line-height:1.4; }
.ab-toc a:hover{ background:var(--teal-solid); color:#fff; border-color:var(--teal-solid); }
.ab-sec{ margin-top:52px; scroll-margin-top:calc(var(--nav-h) + 18px); }
.ab-h2{ font-size:clamp(26px,3.6vw,34px); color:var(--teal-ink); margin-bottom:4px; }
.ab-h2cn{ font-family:var(--font-cn); font-size:16px; color:var(--gold-text); letter-spacing:2px; margin-bottom:18px; }
.ab-p{ font-size:18px; color:var(--teal-ink); line-height:1.9; margin-bottom:15px; }
.ab-p.mut{ color:var(--muted); }
.ab-lead{ font-size:19px; line-height:1.7; color:var(--teal-ink); font-weight:500; margin-bottom:16px; }
.ab-quote{ border-left:3px solid var(--gold); padding:2px 0 2px 20px; margin:22px 0; font-family:var(--font-serif); font-size:21px; color:var(--teal-ink); line-height:1.6; }
.ab-quote em{ font-style:italic; }
.ab-cnblock{ background:var(--cream); border-radius:var(--radius-md); padding:16px 20px; font-family:var(--font-cn); font-size:16px; line-height:1.95; color:var(--gold-text); margin-top:18px; }
.ab-list{ list-style:none; margin:6px 0 0; }
.ab-list li{ position:relative; padding-left:24px; margin-bottom:12px; font-size:17.5px; line-height:1.85; }
.ab-list li::before{ content:''; position:absolute; left:4px; top:13px; width:7px; height:7px; border-radius:50%; background:var(--teal); }
.ab-list b{ font-weight:600; }
.ab-steps{ counter-reset:abstep; list-style:none; margin-top:6px; }
.ab-steps li{ counter-increment:abstep; position:relative; padding-left:48px; margin-bottom:18px; font-size:17.5px; line-height:1.85; }
.ab-steps li::before{ content:counter(abstep); position:absolute; left:0; top:2px; width:32px; height:32px; border-radius:50%; background:var(--cream); border:1px solid rgba(184,151,90,.35); color:var(--gold-text); font-family:var(--font-serif); font-size:15px; font-weight:600; display:flex; align-items:center; justify-content:center; }
.ab-steps b{ display:block; font-weight:600; color:var(--teal-ink); }
.ab-table{ width:100%; border-collapse:collapse; margin-top:20px; background:var(--white); border-radius:var(--radius-md); overflow:hidden; border:1px solid rgba(50,71,84,.06); font-size:16px; }
.ab-table th,.ab-table td{ padding:13px 18px; text-align:left; border-bottom:1px solid rgba(50,71,84,.05); vertical-align:top; }
.ab-table th{ background:var(--cream); font-size:13px; text-transform:uppercase; letter-spacing:1.2px; color:var(--muted); font-weight:600; }
.ab-table tr:last-child td{ border-bottom:none; }
.ab-cards{ display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:16px; margin-top:20px; }
.ab-card{ background:var(--cream); border-radius:var(--radius-md); padding:22px 22px 20px; border:1px solid rgba(50,71,84,.05); }
.ab-card h4{ font-family:var(--font-serif); font-size:20px; margin-bottom:8px; color:var(--teal-ink); line-height:1.35; }
.ab-card p{ font-size:16.5px; color:var(--muted); line-height:1.8; }
.ab-card .ab-card-cn{ display:block; font-family:var(--font-cn); font-size:15px; color:var(--gold-text); letter-spacing:1.5px; margin-top:10px; line-height:1.8; }
.ab-note{ background:rgba(124,158,178,.07); border-radius:var(--radius-md); padding:18px 22px; font-size:16.5px; color:var(--teal-text); line-height:1.8; margin-top:18px; }
.ab-note.red{ background:rgba(181,73,59,.06); color:#8E3B30; }
.ab-note a{ color:inherit; text-decoration:underline; }
.ab-cta{ margin-top:56px; background:linear-gradient(135deg,rgba(62,131,119,.08),rgba(201,162,75,.10)); border:1px solid rgba(62,131,119,.18); border-radius:var(--radius-lg); padding:32px 34px; display:flex; align-items:center; justify-content:space-between; gap:22px; flex-wrap:wrap; }
.ab-cta h3{ font-family:var(--font-hand); font-size:clamp(26px,4vw,34px); font-weight:500; color:var(--teal-ink); margin-bottom:6px; letter-spacing:1.5px; }
.ab-cta p{ font-size:16px; color:var(--muted); max-width:440px; line-height:1.75; }
.ab-cta-cn{ font-family:var(--font-cn); color:var(--gold-text); font-size:15px; letter-spacing:2px; margin-top:8px; }
@media(max-width:640px){
  .ab-wrap{ padding-top:calc(var(--nav-h) + 20px); padding-bottom:56px; }
  .ab-sec{ margin-top:40px; }
  .ab-cta{ padding:26px 22px; }
  .ab-table th,.ab-table td{ padding:11px 13px; font-size:14.5px; }
}

/* ===== 2026-09-18 About 三栏：左索引 / 中内容 / 右常驻 CTA ===== */
.ab-hero{ max-width:780px; margin:0 auto; text-align:center; }
.ab-hero .ab-lede{ margin-left:auto; margin-right:auto; }
.ab-layout{ max-width:1300px; margin:44px auto 0; display:grid; grid-template-columns:minmax(0,1fr); }
.ab-main{ min-width:0; }
.ab-main > .ab-sec:first-child{ margin-top:0; }

/* 左侧索引 */
.ab-side-title{ font-size:13px; text-transform:uppercase; letter-spacing:2.2px; color:var(--muted); font-weight:600; padding-bottom:10px; border-bottom:1px solid rgba(50,71,84,.1); margin-bottom:10px; }
.ab-nav{ display:flex; flex-wrap:wrap; gap:8px; }
.ab-nav a{ position:relative; font-size:15.5px; color:var(--muted); line-height:1.4; padding:6px 13px; border-radius:100px; background:var(--cream); border:1px solid rgba(50,71,84,.06); transition:background .18s,color .18s,border-color .18s; }
.ab-nav a .n{ font-family:var(--font-serif); font-size:11.5px; color:var(--gold-text); margin-right:6px; letter-spacing:.5px; }
.ab-nav a:hover{ color:var(--teal-ink); border-color:rgba(184,151,90,.4); }
.ab-nav a.on{ background:#F7EFDF; color:var(--teal-ink); border-color:rgba(184,151,90,.45); font-weight:600; }
.ab-nav a.on .n{ color:var(--gold-text); }
.ab-side-foot{ margin-top:18px; font-size:14.5px; color:var(--muted); line-height:1.8; }
.ab-side-foot a{ color:var(--teal-text); text-decoration:underline; }

/* 右侧常驻 CTA */
.ab-aside{ margin-top:44px; }
.ab-aside-card{ background:linear-gradient(165deg,rgba(62,131,119,.08),rgba(201,162,75,.14)); border:1px solid rgba(184,151,90,.30); border-radius:var(--radius-lg); padding:24px 22px 22px; text-align:center; box-shadow:0 8px 26px rgba(50,71,84,.06); }
.ab-aside-ring{ width:76px; height:76px; display:block; margin:0 auto 12px; }
.ab-aside-card h3{ font-family:var(--font-hand); font-size:clamp(26px,3.4vw,32px); font-weight:500; color:var(--teal-ink); line-height:1.18; letter-spacing:1.2px; margin-bottom:8px; }
.ab-aside-card p{ font-size:15.5px; color:var(--muted); line-height:1.7; margin-bottom:16px; }
.ab-aside-card .btn{ display:flex; width:100%; justify-content:center; margin-bottom:8px; }
.ab-aside-cn{ font-family:var(--font-cn); font-size:15px; color:var(--gold-text); letter-spacing:1.6px; line-height:1.7; margin-top:10px; }
.ab-aside-links{ margin-top:16px; font-size:14.5px; color:var(--muted); line-height:1.85; }
.ab-aside-links a{ color:var(--teal-text); text-decoration:underline; }
.ab-aside-links .al-h{ display:block; font-size:13px; text-transform:uppercase; letter-spacing:1.8px; color:var(--muted); opacity:.8; margin-top:14px; margin-bottom:2px; }

@media(min-width:1200px){
  .ab-layout{ grid-template-columns:230px minmax(0,1fr) 300px; gap:64px; align-items:start; }
  .ab-side{ position:sticky; top:calc(var(--nav-h) + 22px); }
  .ab-aside{ position:sticky; top:calc(var(--nav-h) + 22px); margin-top:0; }
  .ab-nav{ flex-direction:column; flex-wrap:nowrap; gap:0; }
  .ab-nav a{ padding:8px 10px 8px 13px; border:none; background:none; border-left:2px solid rgba(50,71,84,.12); border-radius:0; }
  .ab-nav a:hover{ background:none; border-left-color:rgba(184,151,90,.55); }
  .ab-nav a.on{ background:linear-gradient(90deg,rgba(201,162,75,.16),rgba(201,162,75,0) 78%); border-left-color:var(--gold); color:var(--teal-ink); font-weight:600; }
  .ab-nav a.on .n{ color:var(--gold-text); }
}
@media(max-width:1199px){
  .ab-aside-card{ max-width:520px; margin:0 auto; }
  .ab-aside-links{ text-align:center; }
}
@media(max-width:640px){
  .ab-layout{ margin-top:26px; }
  .ab-aside-card{ padding:22px 18px; }
}

/* ===== 2026-09-19 About v3 ===== */
/* 三条信念：标题色条 + 无框无底正文 */
.ab-cards.tri{ grid-template-columns:1fr; gap:22px; margin-top:18px; }
.ab-cards.tri .ab-card{ background:none; border:0; padding:0; display:block; }
.ab-cards.tri .ab-card > h4{
  background:linear-gradient(180deg,#FBF6EC,#F5ECDA); color:var(--teal-ink);
  border:1px solid rgba(184,150,90,.32);
  font-family:var(--font-serif); font-size:19px; font-weight:600;
  line-height:1.4; letter-spacing:.2px;
  padding:10px 18px; border-radius:12px; margin:0 0 10px;
  box-shadow:0 1px 3px rgba(50,71,84,.06);
}
.ab-cards.tri .ab-card > p{ font-size:16.5px; color:var(--muted); line-height:1.85; padding:2px 6px 0; margin:0; }
.ab-cards.tri .ab-card > .ab-zh-row{ margin-top:8px; padding-left:6px; }
@media(min-width:760px){
  .ab-cards.tri .ab-card > h4{ font-size:20px; padding:12px 20px; }
  .ab-cards.tri .ab-card > p{ padding:2px 8px 0; }
  .ab-cards.tri .ab-card > .ab-zh-row{ padding-left:8px; }
}
.ab-cards.tri .ab-card{ padding:16px 20px; display:grid; grid-template-columns:1fr; gap:4px; align-items:start; }
.ab-cards.tri .ab-card > h4{ margin-bottom:6px; }
@media(min-width:760px){
  .ab-cards.tri{ gap:12px; }
  .ab-cards.tri .ab-card{ grid-template-columns:minmax(0,1fr) minmax(0,2.1fr); gap:24px; padding:18px 24px; }
  .ab-cards.tri .ab-card > h4{ grid-column:1; grid-row:1; margin-bottom:0; font-size:20px; }
  .ab-cards.tri .ab-card > p{ grid-column:2; grid-row:1; }
  .ab-cards.tri .ab-card > .ab-zh-row{ grid-column:2; grid-row:2; margin-top:8px; }
}

/* 中文折叠：超链接「中文」，悬停或点击展开，默认完全隐藏 */
.ab-zh{ position:relative; display:inline-block; }
.ab-zh-btn{ font-family:var(--font-cn); font-size:14px; letter-spacing:1px; color:var(--teal-text);
  background:none; border:none; border-bottom:1px dashed rgba(78,114,133,.45);
  padding:0 1px; cursor:pointer; line-height:1.6; }
.ab-zh-btn:hover{ color:var(--teal-deep); border-bottom-color:var(--gold); border-bottom-style:solid; }
.ab-zh-btn::before{ content:'中文'; }
.ab-zh-pop{ display:none; position:absolute; left:0; top:calc(100% + 10px); z-index:30;
  width:max-content; max-width:min(620px,84vw);
  background:var(--white); border:1px solid rgba(50,71,84,.10); border-radius:var(--radius-md);
  box-shadow:0 16px 38px rgba(50,71,84,.14); padding:16px 18px;
  font-family:var(--font-cn); font-size:15.5px; line-height:1.95; color:var(--teal-ink);
  text-align:left; font-weight:400; letter-spacing:.4px; }
.ab-zh.ctr .ab-zh-pop{ left:50%; transform:translateX(-50%); }
.ab-zh:hover .ab-zh-pop, .ab-zh.open .ab-zh-pop{ display:block; }
.ab-zh-row{ margin-top:14px; }
@media(max-width:640px){ .ab-zh-pop{ max-width:min(92vw,520px); } }

/* ===== 章节分割线：五行色细线 + 中央水晶菱形 ===== */
.ab-sec + .ab-sec{ position:relative; }
.ab-sec + .ab-sec::before{
  content:''; position:absolute; left:0; right:0; top:-26px; height:1px;
  background:linear-gradient(90deg,
    rgba(126,163,134,0) 0%,
    rgba(126,163,134,.42) 14%,
    rgba(183,106,98,.38) 32%,
    rgba(198,168,110,.44) 50%,
    rgba(176,190,197,.42) 68%,
    rgba(120,150,170,.40) 86%,
    rgba(120,150,170,0) 100%);
}
.ab-sec + .ab-sec::after{
  content:''; position:absolute; left:50%; top:-28px;
  width:5px; height:5px; margin-left:-2.5px;
  background:rgba(198,168,110,.34);
  transform:rotate(45deg);
}
@media(max-width:640px){
  .ab-sec + .ab-sec::before{ top:-20px; }
  .ab-sec + .ab-sec::after{ top:-22px; }
}
@media print{ .ab-sec + .ab-sec::before, .ab-sec + .ab-sec::after{ display:none; } }

/* ===== 十二时辰页 /birth（2026-09-19） ===== */
.hr-extra { max-width: 820px; margin: 0 auto; padding: 8px 20px 64px; text-align: left; }
.hr-block { margin-top: 34px; }
.hr-h2 {
  font-family: var(--font-serif); font-size: 20px; font-weight: 600;
  color: var(--teal-ink); margin: 0 0 12px; letter-spacing: .2px;
}
.hr-p { font-size: 15px; line-height: 1.85; color: var(--teal-ink); margin: 0 0 10px; }
.hr-p strong { font-weight: 600; }

/* 对应表 */
.hr-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.hr-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.hr-table th {
  text-align: left; font-size: 12.5px; font-weight: 600; color: var(--muted);
  text-transform: uppercase; letter-spacing: 1px;
  padding: 8px 10px; border-bottom: 1px solid rgba(50, 71, 84, .14);
}
.hr-table td {
  padding: 9px 10px; border-bottom: 1px solid rgba(50, 71, 84, .06);
  color: var(--teal-ink); white-space: nowrap;
}
.hr-table .hr-c-zhi { font-family: var(--font-serif); }
.hr-dot {
  display: inline-block; width: 8px; height: 8px; border-radius: 50%;
  margin-right: 7px; vertical-align: middle; background: var(--muted);
}

/* 五行配色（细字/小点用，饱和度压低保持"淡"） */
.hr-el-wood  { color: #5E8F6B; }
.hr-el-fire  { color: #B76A62; }
.hr-el-earth { color: #A9854F; }
.hr-el-metal { color: #7E8B94; }
.hr-el-water { color: #5B87A8; }
.hr-dot.hr-el-wood  { background: #7EA386; }
.hr-dot.hr-el-fire  { background: #B76A62; }
.hr-dot.hr-el-earth { background: #C6A86E; }
.hr-dot.hr-el-metal { background: #B0BEC5; }
.hr-dot.hr-el-water { background: #7896AA; }

/* 时辰卡片上的元素标签 */
.hour-card .hr-el { display: block; margin-top: 6px; font-size: 12.5px; letter-spacing: .4px; }

/* 用途小卡 */
.hr-uses { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
.hr-uses li {
  background: linear-gradient(180deg, #FBF6EC, #F5ECDA);
  border: 1px solid rgba(184, 150, 90, .32);
  border-radius: 12px; padding: 12px 16px;
}
.hr-use-t { display: block; font-size: 15px; font-weight: 600; color: var(--teal-ink); }
.hr-use-d { display: block; font-size: 14px; line-height: 1.7; color: var(--muted); margin-top: 4px; }

/* 折叠的八字表单 */
.hr-form { margin-top: 30px; border-top: 1px solid rgba(50, 71, 84, .08); padding-top: 18px; }
.hr-form summary {
  cursor: pointer; font-size: 15px; font-weight: 500; color: var(--teal-ink);
  list-style: none; padding: 4px 0;
}
.hr-form summary::-webkit-details-marker { display: none; }
.hr-form summary::before { content: '▸ '; color: var(--muted); }
.hr-form[open] summary::before { content: '▾ '; }
.hr-foot { text-align: center; margin-top: 28px; font-size: 15px; }

/* 结果页：完整测评备份提示条（淡米金，与信念色条同款） */
.rh-fullhint {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  max-width: 820px; margin: 0 auto 16px; padding: 10px 16px;
  border-radius: 12px; font-size: 14px; color: var(--teal-ink);
  background: linear-gradient(180deg, #FBF6EC, #F5ECDA);
  border: 1px solid rgba(184, 150, 90, .32);
}
.rh-hint-text { flex: 1 1 260px; }
.rh-hint-btn {
  font: inherit; font-size: 14px; font-weight: 600; cursor: pointer;
  padding: 6px 14px; border-radius: 100px; color: #6B5320;
  background: #F9F2E5; border: 1px solid rgba(184, 150, 90, .5);
}
.rh-hint-btn:hover { background: #F3E7D2; }
.rh-hint-close {
  background: none; border: 0; font-size: 18px; line-height: 1;
  color: var(--muted); cursor: pointer; padding: 0 2px;
}

@media (max-width: 640px) {
  .hr-old { display: none; }
  .hr-extra { padding: 8px 16px 56px; }
}
@media print {
  .rh-fullhint { display: none; }
}

/* ===== 十二时辰时钟盘 /birth（2026-09-19） ===== */
.hr-clock-wrap { display: none; width: min(560px, 88vw); margin: 4px auto 0; }
.hr-clock { position: relative; width: 100%; margin: 0 auto; }
.hr-clock svg { display: block; width: 100%; height: auto; }

.hr-seg { cursor: pointer; }
.hr-seg path { transition: fill-opacity .18s ease; }
.hr-edges { pointer-events: none; }
.hr-edge path { transition: stroke .18s ease, stroke-width .18s ease; }
.hr-seg-labels { pointer-events: none; }
.hr-seg-sym  { font-size: 16px; text-anchor: middle; dominant-baseline: central; }
.hr-seg-name {
  font-family: var(--font-serif); font-size: 12.5px; font-weight: 600;
  fill: var(--teal-ink); text-anchor: middle; dominant-baseline: central;
}
.hr-seg-time {
  font-size: 10px; letter-spacing: .1px;
  text-anchor: middle; dominant-baseline: central; opacity: .9;
}
.hr-lbl.is-hot .hr-seg-name,
.hr-lbl.is-on  .hr-seg-name { fill: #6B5320; }
.hr-edge.is-hot path { stroke: rgba(184,150,90,.75); stroke-width: 2.2; }
.hr-edge.is-on  path { stroke: #B8965A; stroke-width: 2.6; }

/* 圆心 */
.hr-hub {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 46%; height: 46%; box-sizing: border-box; border-radius: 50%;
  background: linear-gradient(180deg, #FBF6EC, #F5ECDA);
  border: 1px solid rgba(184,150,90,.34);
  box-shadow: 0 3px 14px rgba(80,70,50,.10);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; padding: 0 10%; overflow: hidden;
}
.hr-hub-sym  { font-size: 27px; line-height: 1.05; }
.hr-hub-name {
  font-family: var(--font-serif); font-size: 18px; font-weight: 600;
  color: var(--teal-ink); margin-top: 3px; line-height: 1.2;
}
.hr-hub-meta { font-size: 13px; color: var(--muted); margin-top: 3px; white-space: nowrap; }
.hr-hub-meta .hr-el { font-weight: 600; }
.hr-hub-note {
  font-size: 13px; line-height: 1.5; color: var(--teal-ink); opacity: .82;
  margin: 5px 0 0;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.hr-hub-btn {
  margin-top: 8px; padding: 6px 15px; font-size: 13.5px; font-weight: 600;
  color: #6B5320; background: linear-gradient(180deg, #FDF8EF, #F1E4CB);
  border: 1px solid rgba(184,150,90,.55); border-radius: 100px; cursor: pointer;
  font-family: var(--font-serif); white-space: nowrap;
}
.hr-hub-btn:hover { background: linear-gradient(180deg, #F7EEDC, #EADCC0); }

/* 五行图例 */
.hr-legend {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 16px;
  margin: 14px 0 0; font-size: 13px; color: var(--muted);
}
.hr-legend span { display: inline-flex; align-items: center; gap: 6px; }

/* 桌面显示时钟、收起方块卡；手机反之 */
@media (min-width: 768px) {
  .hr-clock-wrap { display: block; }
  #hourGrid { display: none; }
}
@media (max-width: 767px) {
  .hr-clock-wrap { display: none; }
}

/* ===== 2026-09-21 路 鐪熻喘鐗╄溅锛堟垚鍝?+ DIY 娣峰悎锛屾柟妗?A锛?=====
   姝ゅ墠 Add to Cart 鍙槸 alert 鍗犱綅锛屼笖 DIY 璧板崟妲借崏绋垮彧鑳戒拱涓€浠躲€?*/
.nav-cart{ position:relative; display:inline-flex; align-items:center; justify-content:center;
  width:40px; height:40px; border-radius:50%; color:var(--teal-dark,#4E7285);
  transition:background .18s ease, color .18s ease; flex-shrink:0; }
.nav-cart:hover{ background:rgba(124,158,178,.16); color:var(--teal-dark,#4E7285); }
.nav-cart svg{ width:23px; height:23px; fill:none; stroke:currentColor; stroke-width:1.7;
  stroke-linecap:round; stroke-linejoin:round; }
.cart-badge{ position:absolute; top:1px; right:0; min-width:17px; height:17px; padding:0 4px;
  border-radius:999px; background:#C9A227; color:#fff; font-size:11px; font-weight:700;
  line-height:17px; text-align:center; }
.cart-badge[hidden]{ display:none; }
.mm-item .cart-badge{ position:static; display:inline-block; margin-left:8px; vertical-align:1px; }

/* /cart 鍒楄〃 */
.ct-list{ display:flex; flex-direction:column; gap:14px; }
.ct-line{ display:flex; align-items:center; gap:14px; padding:14px;
  border:1px solid rgba(50,71,84,.10); border-radius:14px; background:var(--white); }
.ct-thumb{ width:74px; height:74px; flex:0 0 74px; border-radius:50%; background:#FAFBFC;
  display:flex; align-items:center; justify-content:center; overflow:hidden; }
.ct-thumb img{ width:100%; height:100%; object-fit:cover; display:block; }
.ct-thumb canvas{ width:100%; height:100%; display:block; }
.ct-info{ flex:1; min-width:0; }
.ct-name{ font-size:16px; font-weight:600; color:var(--teal-ink); line-height:1.35; }
.ct-meta{ font-size:13.5px; color:var(--muted); margin-top:3px; line-height:1.6; }
.ct-tag{ display:inline-block; font-size:11px; font-weight:700; letter-spacing:.8px; padding:2px 9px;
  border-radius:999px; text-transform:uppercase; margin-left:6px; vertical-align:1px; }
.ct-tag.classic{ background:rgba(124,158,178,.12); color:var(--teal,#7C9EB2); }
.ct-tag.signature{ background:rgba(201,162,39,.14); color:#8a6d3b; }
.ct-tag.diy{ background:rgba(249,242,229,.9); color:#8a6d3b; border:1px solid rgba(184,150,90,.3); }
.ct-right{ display:flex; flex-direction:column; align-items:flex-end; gap:8px; flex-shrink:0; }
.ct-price{ font-family:var(--font-serif); font-size:18px; color:var(--teal-ink); white-space:nowrap; }
.ct-qty{ display:inline-flex; align-items:center; gap:2px; border:1px solid rgba(50,71,84,.14);
  border-radius:999px; overflow:hidden; }
.ct-qty button{ width:28px; height:28px; border:0; background:transparent; color:var(--teal-dark,#4E7285);
  font-size:15px; cursor:pointer; line-height:1; }
.ct-qty button:hover{ background:rgba(124,158,178,.14); }
.ct-qty span{ min-width:26px; text-align:center; font-size:14px; color:var(--ink); }
.ct-del{ border:0; background:transparent; color:var(--muted); font-size:13px; cursor:pointer; padding:2px 2px; }
.ct-del:hover{ color:#C0392B; }
.ct-sum{ display:flex; justify-content:space-between; align-items:baseline; gap:10px;
  padding-top:14px; margin-top:4px; border-top:1px dashed rgba(50,71,84,.14); }
.ct-sum .k{ font-size:15px; color:var(--muted); }
.ct-sum .v{ font-family:var(--font-serif); font-size:24px; color:var(--teal-ink); }
.ct-note{ font-size:13px; color:var(--muted); margin-top:10px; line-height:1.75; }
.ct-empty{ text-align:center; padding:52px 16px; }
.ct-empty .ic{ font-size:40px; margin-bottom:12px; }
@media(max-width:600px){
  .ct-line{ gap:10px; padding:12px; }
  .ct-thumb{ width:60px; height:60px; flex:0 0 60px; }
  .ct-name{ font-size:15px; }
  .ct-price{ font-size:16px; }
  .ct-right{ gap:6px; }
}