:root {
  --yc-ivory: #F7F1E7;
  --yc-porcelain: #F9F4EA;
  --yc-sand: #EFE4D2;
  --yc-champagne: #C79A4B;
  --yc-gold: #a77934;
  --yc-ink: #2b2118;
  --yc-muted: #8A7A66;
  --yc-line: rgba(167, 121, 52, 0.22);
  --yc-glass: rgba(255, 250, 240, 0.62);
  --yc-dark-glass: rgba(23, 19, 16, 0.72);
  --yc-shadow: 0 24px 70px rgba(62, 45, 25, 0.18);
  --yc-card-shadow: 0 28px 60px rgba(37, 29, 19, 0.34);
  --yc-radius: 26px;
  --yc-radius-sm: 16px;
  --yc-font: "Plus Jakarta Sans", "Noto Sans SC", "Microsoft YaHei", "PingFang SC", sans-serif;
  --yc-serif: "Noto Serif SC", "Songti SC", "SimSun", serif;
}

body[data-theme="dark"],
body[data-theme="night"] {
  --yc-ivory: #15130f;
  --yc-porcelain: #201b15;
  --yc-sand: #7b6545;
  --yc-champagne: #e0b96f;
  --yc-gold: #f0c36f;
  --yc-ink: #f6ecd9;
  --yc-muted: #c7b89e;
  --yc-line: rgba(240, 195, 111, 0.24);
  --yc-glass: rgba(31, 26, 20, 0.74);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; overflow-x: hidden; }
body {
  margin: 0;
  min-height: 100vh;
  font-family: var(--yc-font);
  color: var(--yc-ink);
  background:
    radial-gradient(circle at 8% 30%, rgba(255,255,255,0.78), transparent 18%),
    radial-gradient(circle at 17% 18%, rgba(199, 154, 75, 0.24), transparent 17%),
    radial-gradient(circle at 52% 42%, rgba(216, 183, 106, 0.20), transparent 30%),
    radial-gradient(circle at 78% 10%, rgba(255, 255, 255, 0.82), transparent 20%),
    linear-gradient(135deg, #F9F4EA 0%, #F7F1E7 46%, #EFE4D2 100%);
  overflow-x: hidden;
}
body[data-theme="dark"] {
  background:
    radial-gradient(circle at 76% 12%, rgba(216,183,106,.18), transparent 24%),
    radial-gradient(circle at 18% 22%, rgba(199,154,75,.12), transparent 24%),
    linear-gradient(135deg, #080806 0%, #10100D 52%, #15120D 100%);
}

a { color: inherit; text-decoration: none; }
button, input { font: inherit; }
button { cursor: pointer; }

.yc-orbit-bg {
  position: fixed;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 1;
}
.yc-orbit-bg::before,
.yc-orbit-bg::after {
  content: "";
  position: absolute;
  pointer-events: none;
}
.yc-orbit-bg::before {
  left: 4%;
  top: 13%;
  width: 260px;
  height: 260px;
  border-radius: 50%;
  background:
    radial-gradient(circle, rgba(199,154,75,.18) 0 18px, transparent 19px),
    repeating-radial-gradient(circle, transparent 0 45px, rgba(167,121,52,.18) 46px, transparent 47px);
  opacity: .85;
}
.yc-orbit-bg::after {
  left: 24%;
  top: -250px;
  width: 1100px;
  height: 600px;
  border-radius: 50%;
  border: 1px solid rgba(167,121,52,.16);
  box-shadow:
    0 0 0 42px rgba(167,121,52,.025),
    0 0 0 90px rgba(167,121,52,.028),
    0 0 0 150px rgba(167,121,52,.022);
  transform: rotate(-8deg);
}

.orbit-ring {
  position: absolute;
  border: 1px solid rgba(167, 121, 52, 0.16);
  border-radius: 50%;
  animation: ycOrbitDrift 18s ease-in-out infinite;
}
.ring-b { animation-duration: 24s; animation-delay: -6s; }
.ring-c { animation-duration: 20s; animation-delay: -12s; }
.ring-a { width: 560px; height: 560px; left: -120px; top: 110px; }
.ring-b { width: 1080px; height: 1080px; left: 25%; top: -460px; }
.ring-c { width: 420px; height: 420px; right: -80px; bottom: -120px; }
.orbit-ring::before,
.orbit-ring::after {
  content: "";
  position: absolute;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--yc-champagne);
  box-shadow: 0 0 0 7px rgba(201, 155, 82, 0.12);
}
.ring-a::before { left: 76%; top: 12%; }
.ring-b::before { left: 18%; top: 64%; }
.ring-c::before { left: 22%; top: 18%; }
.ring-a::after { right: 18%; bottom: 16%; }
.ring-b::after { right: 30%; bottom: 22%; }
.ring-c::after { right: 16%; bottom: 28%; }

.star-dot {
  position: absolute;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--yc-champagne);
  box-shadow: 0 0 18px rgba(201, 155, 82, 0.55);
}
.dot-a { left: 6%; top: 74%; }
.dot-b { left: 66%; top: 17%; }
.dot-c { right: 9%; top: 42%; }
.star-dot::after {
  content: "";
  position: absolute;
  left: 14px;
  top: -10px;
  width: 34px;
  height: 34px;
  background:
    linear-gradient(90deg, transparent 45%, rgba(199,154,75,.62) 48% 52%, transparent 55%),
    linear-gradient(0deg, transparent 45%, rgba(199,154,75,.62) 48% 52%, transparent 55%);
  transform: rotate(45deg);
  opacity: .42;
}

.yc-page::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 1;
  background-image:
    linear-gradient(rgba(167, 121, 52, 0.10) 1px, transparent 1px),
    linear-gradient(90deg, rgba(167, 121, 52, 0.10) 1px, transparent 1px);
  background-size: 82px 82px;
  mask-image: linear-gradient(180deg, rgba(0,0,0,0.52), transparent 68%);
  pointer-events: none;
}

.yc-page::after {
  content: "";
  position: fixed;
  inset: -10%;
  z-index: 1;
  background:
    linear-gradient(118deg, transparent 0 42%, rgba(199,154,75,0.20) 42.1%, transparent 42.35% 100%),
    linear-gradient(132deg, transparent 0 54%, rgba(199,154,75,0.14) 54.1%, transparent 54.25% 100%),
    radial-gradient(circle at 12% 54%, rgba(199,154,75,0.12), transparent 24%);
  pointer-events: none;
  opacity: 0.82;
}

.yc-round-btn,
.yc-icon-btn {
  border: 1px solid var(--yc-line);
  color: var(--yc-ink);
  background: rgba(255,255,255,0.44);
  backdrop-filter: blur(12px);
  box-shadow: 0 8px 24px rgba(74, 52, 25, 0.08);
  transition: transform .24s ease, color .24s ease, border-color .24s ease, box-shadow .24s ease, background .24s ease;
}

.yc-round-btn:hover,
.yc-icon-btn:hover {
  transform: translateY(-2px);
  border-color: rgba(199,154,75,.42);
  color: var(--yc-champagne);
  box-shadow: 0 16px 34px rgba(80,55,20,.14);
}

.yc-round-btn:active,
.yc-icon-btn:active {
  transform: translateY(0) scale(.96);
}

.yc-section-head h2,
.yc-brand strong,
.yc-cover-content h2 {
  letter-spacing: 0;
}

.detail-page[data-theme="light"] {
  --detail-bg: #F8F2E8;
  --detail-surface: rgba(255,250,240,0.84);
  --detail-surface-strong: rgba(255,255,255,0.92);
  --detail-text: #2B2118;
  --detail-text-soft: #8A7A66;
  --detail-gold: #C79A4B;
  --detail-gold-strong: #D8A64F;
  --detail-border: rgba(199,154,75,0.24);
}

.detail-page[data-theme="dark"] {
  --detail-bg: #070706;
  --detail-surface: rgba(18, 17, 14, 0.78);
  --detail-surface-strong: rgba(24, 22, 18, 0.92);
  --detail-text: #F6EFE4;
  --detail-text-soft: rgba(246,239,228,0.68);
  --detail-gold: #D8B76A;
  --detail-gold-strong: #E5BE63;
  --detail-border: rgba(216,183,106,0.22);
}