/* 灵启萬物网页版：米色宣纸底、墨绿主色、金色点缀（和小程序同一套颜色） */
:root {
  --paper: #f4efe6; --card: #fbf8f2; --ink: #28231c; --muted: #6f6a60; --faint: #a3998c; --line: #e6dccb;
  --green: #1f3e32; --green-2: #2f5a48; --gold: #9a6b3c; --gold-line: rgba(222, 178, 112, .55); --red: #b7473a; --red-deep: #a51f18;
  --serif: "Songti SC", "STSong", "Noto Serif SC", "Source Han Serif SC", serif;
  --sans: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", sans-serif;
  --bar: 76px;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; min-height: 100vh; display: flex; flex-direction: column; background: var(--paper); color: var(--ink); font: 15px/1.6 var(--sans); font-variant-numeric: tabular-nums; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; cursor: pointer; }
button:disabled { cursor: default; }
img { max-width: 100%; }
.serif { font-family: var(--serif); }
.center { text-align: center; }
.link { color: var(--red); background: none; border: 0; padding: 0; }
.price-list { margin-left: 6px; color: var(--faint); font-size: .78em; font-weight: 400; }
.promo-tag { display: inline-block; margin-top: 4px; padding: 1px 8px; border-radius: 999px; background: #fbeee4; color: #b5532d; font-size: 12px; line-height: 1.6; }

/* 顶栏：字标 + 导航，固定在上面 */
.top { position: sticky; top: 0; z-index: 20; background: rgba(244, 239, 230, .94); backdrop-filter: blur(8px); border-bottom: 1px solid rgba(230, 220, 203, .7); }
.top-inner { display: flex; align-items: center; justify-content: space-between; gap: 12px; max-width: 1080px; margin: 0 auto; padding: 10px 16px; }
.brand img { display: block; width: 132px; height: auto; }
.nav { display: flex; gap: 4px; }
.nav a { padding: 6px 12px; border-radius: 999px; color: var(--muted); font-size: 15px; white-space: nowrap; }
.nav a:hover { color: var(--green); }
.nav a.on { background: var(--green); color: #fff; }

.app { flex: 1; width: 100%; }
.page { max-width: 1080px; margin: 0 auto; padding: 20px 16px calc(var(--bar) + 28px); }
.page.narrow { max-width: 560px; }
.page-title { margin: 6px 0 18px; font-size: 26px; color: var(--green); letter-spacing: 2px; }
.foot { padding: 18px 16px 24px; text-align: center; color: var(--faint); font-size: 12px; }
.foot p { margin: 2px 0; }
.foot a:hover { color: var(--green); }
body[data-page="seek"] .foot, body[data-page="diy"] .foot, body[data-page="pieces"] .foot { padding-bottom: calc(var(--bar) + 16px); }
body[data-page="home"] .foot { padding-top: 0; }

/* 按钮 */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 50px; padding: 0 22px; border-radius: 12px; border: 1px solid var(--line); background: var(--card); font-size: 16px; letter-spacing: 1px; transition: background .15s ease, box-shadow .15s ease, transform .1s ease; }
.btn:active:not(:disabled) { transform: translateY(1px); }
.btn.primary { border-color: var(--gold-line); background: linear-gradient(120deg, var(--green-2), var(--green)); color: #fff; box-shadow: 0 6px 16px rgba(31, 62, 50, .22); letter-spacing: 3px; }
.btn.primary:hover:not(:disabled) { background: linear-gradient(120deg, #c8352a, var(--red-deep)); box-shadow: 0 6px 16px rgba(165, 31, 24, .26); }
.btn.primary:disabled { background: #b9b2a5; border-color: #b9b2a5; box-shadow: none; letter-spacing: 1px; }
.btn.ghost { color: var(--green); }
.btn.wide { width: 100%; }

/* 底部固定的操作条：步骤按钮永远在屏幕下方 */
.action-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 15; background: rgba(251, 248, 242, .97); border-top: 1px solid var(--line); box-shadow: 0 -6px 18px rgba(80, 60, 30, .06); padding-bottom: env(safe-area-inset-bottom); }
.action-inner { display: flex; align-items: center; gap: 10px; max-width: 560px; height: var(--bar); margin: 0 auto; padding: 0 16px; }
.action-inner .btn { flex: 1; }
body[data-page="diy"] .action-inner { max-width: 1080px; }
.total { flex: 1; color: var(--muted); font-size: 14px; }
.total b { color: var(--ink); font-size: 18px; }
body[data-page="diy"] .action-inner .btn { flex: none; min-width: 168px; }

.card { margin-top: 14px; padding: 4px 16px; border-radius: 14px; border: 1px solid var(--line); background: var(--card); }
.card-title { margin: 12px 0 4px; font-size: 17px; font-weight: 700; color: var(--green); }
.row { display: flex; justify-content: space-between; align-items: center; gap: 12px; min-height: 48px; border-bottom: 1px solid #efe7d9; }
.card > .row:last-child, .materials:last-child > .row { border-bottom: 0; }
.row-value { color: var(--ink); text-align: right; }
.materials summary { list-style: none; cursor: pointer; }
.materials summary::-webkit-details-marker { display: none; }
.materials[open] summary .row-value { color: var(--faint); }
.material { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; color: var(--muted); font-size: 14px; border-bottom: 1px dashed #efe7d9; }
.material:last-child { border-bottom: 0; }
.error-box { margin: 18px 0; padding: 14px 16px; border-radius: 12px; background: #fdebe7; color: #8a3a17; }
.loading-box { margin: 60px 0; text-align: center; color: var(--faint); }
.empty { margin: 60px 0; text-align: center; }
.empty-title { font-size: 20px; color: var(--green); }

/* 首页 */
.home { position: relative; overflow: hidden; }
.home-bg { position: absolute; inset: 0 0 auto 0; height: 100%; background: center top / cover no-repeat; opacity: 0; transition: opacity .6s ease; pointer-events: none; }
.home-bg.shown { opacity: 1; }
.home-inner { position: relative; display: flex; flex-direction: column; align-items: center; max-width: 520px; margin: 0 auto; padding: 18px 16px 28px; }
.eyebrow { margin: 6px 0 0; font-size: 14px; letter-spacing: 5px; color: var(--gold); }
.home-title { display: flex; flex-direction: column; align-items: center; margin: 4px 0 0; font-size: 34px; line-height: 1.3; letter-spacing: 3px; color: var(--green); }
.title-image { width: min(320px, 80vw); }
.hero { position: relative; display: block; width: min(360px, 86vw); aspect-ratio: 1; margin: 2px 0 16px; }
.hero-stage, .strand-stage { position: absolute; inset: 0; }
.strand-canvas, .diy-stage canvas { display: block; width: 100%; height: 100%; touch-action: none; }
.medallion { position: absolute; left: 28%; top: 28%; width: 44%; height: 44%; pointer-events: none; }
.explore { width: 100%; height: 56px; font-size: 19px; letter-spacing: 5px; }
.paths { display: flex; gap: 12px; width: 100%; margin-top: 12px; }
.path { flex: 1; display: flex; flex-direction: column; align-items: center; padding: 16px 8px; border-radius: 14px; border: 1px solid var(--line); background: rgba(251, 248, 242, .92); transition: border-color .15s ease; }
.path:hover { border-color: var(--gold-line); }
.path-title { font-size: 19px; font-weight: 700; letter-spacing: 1px; color: var(--green); }
.path-copy { margin-top: 2px; font-size: 13px; color: var(--muted); }
.trust { display: flex; justify-content: center; flex-wrap: wrap; gap: 4px 18px; margin: 20px 0 0; }
.trust-item { position: relative; padding-left: 12px; font-size: 13px; color: #7a6f63; }
.trust-item::before { content: ''; position: absolute; left: 0; top: 50%; width: 6px; height: 6px; margin-top: -3px; border-radius: 50%; background: var(--red); opacity: .75; }
.order-band { display: flex; align-items: center; justify-content: space-between; width: 100%; margin-top: 22px; padding: 14px 16px; border-radius: 14px; border: 1px dashed var(--gold-line); background: rgba(251, 248, 242, .8); color: var(--green); font-size: 16px; }

/* 寻珠 */
.headline { margin: 4px 0 0; font-size: 26px; color: var(--green); letter-spacing: 2px; }
.subline { margin: 4px 0 0; color: var(--muted); }
.seal-row { display: flex; align-items: center; gap: 14px; margin: 18px 0 14px; }
.seal { display: flex; align-items: center; justify-content: center; flex: none; width: 58px; height: 58px; border-radius: 12px; background: var(--red); color: #fff; font-size: 28px; box-shadow: 0 4px 12px rgba(183, 71, 58, .25); }
.seal.empty { background: #e7dfd1; color: var(--faint); box-shadow: none; }
.seal-title { margin: 0; font-size: 19px; font-weight: 700; }
.seal-sub { margin: 0; color: var(--muted); font-size: 13px; }
.zodiac-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; }
.zodiac { display: flex; flex-direction: column; align-items: center; padding: 8px 0 6px; border-radius: 12px; border: 1px solid var(--line); background: var(--card); transition: border-color .15s ease; }
.zodiac span { font-size: 20px; line-height: 1.3; }
.zodiac small { color: var(--faint); font-size: 11px; }
.zodiac:hover { border-color: var(--gold-line); }
.zodiac.on { border-color: var(--green); background: var(--green); color: #fff; }
.zodiac.on small { color: rgba(255, 255, 255, .7); }
.birth-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 54px; padding: 6px 16px; cursor: pointer; }
.birth-row small { margin-left: 4px; color: var(--faint); font-size: 12px; }
.birth-row input { min-width: 0; max-width: 180px; height: 38px; padding: 0 10px; border: 1px solid var(--line); border-radius: 10px; background: #fff; color: var(--ink); font: inherit; }
.birth-note { margin: 6px 4px 0; color: var(--gold); font-size: 13px; }
.birth-error { margin: 6px 4px 0; color: var(--red); font-size: 13px; }
.section-label { display: flex; justify-content: space-between; margin: 20px 2px 8px; font-weight: 600; }
.section-label span:last-child { color: var(--faint); font-weight: 400; font-size: 13px; }
.keyword-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.keyword { position: relative; height: 52px; border-radius: 12px; border: 1px solid var(--line); background: var(--card); font-size: 18px; letter-spacing: 2px; transition: border-color .15s ease; }
.keyword:hover { border-color: var(--gold-line); }
.keyword.on { border-color: var(--red); background: #fdf1ec; color: var(--red-deep); }
.keyword-hint { display: block; width: 100%; margin: 0; padding: 22px 12px; border-radius: 12px; border: 1px dashed var(--line); text-align: center; color: var(--faint); background: none; }
.note { margin: 16px 2px 0; color: var(--faint); font-size: 12px; }

/* 揭晓 */
.seeking { display: flex; flex-direction: column; align-items: center; padding: 70px 0; }
.orbit { position: relative; width: 150px; height: 150px; border-radius: 50%; border: 1px dashed var(--gold-line); animation: spin 6s linear infinite; }
.orbit::before { content: ''; position: absolute; top: -6px; left: 50%; width: 12px; height: 12px; margin-left: -6px; border-radius: 50%; background: var(--red); }
.orbit-seal { position: absolute; inset: 35px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--card); animation: spin 6s linear infinite reverse; }
.orbit-seal img { width: 52px; }
.seeking-text { margin-top: 24px; max-width: 300px; text-align: center; color: var(--green); font-size: 17px; }
@keyframes spin { to { transform: rotate(360deg); } }
.stage { position: relative; width: 100%; aspect-ratio: 1; max-width: 420px; margin: 0 auto; }
.swap { position: absolute; right: 0; bottom: 6px; display: inline-flex; align-items: center; gap: 4px; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--line); background: rgba(251, 248, 242, .95); color: var(--green); font-size: 14px; }
.swap small { color: var(--faint); }
.piece-chip { position: absolute; left: 0; bottom: 8px; padding: 2px 10px; border-radius: 999px; background: rgba(31, 62, 50, .08); color: var(--green); font-size: 12px; }
.preview-tag { position: absolute; left: 8px; top: 8px; padding: 1px 8px; border-radius: 999px; background: rgba(40, 35, 28, .06); color: var(--faint); font-size: 12px; pointer-events: none; }
.fab { position: absolute; right: 8px; top: 8px; min-width: 44px; height: 44px; padding: 0 10px; border-radius: 22px; border: 1px solid var(--line); background: rgba(251, 248, 242, .95); color: var(--green); font-size: 13px; }
.title { margin: 10px 0 0; font-size: 24px; text-align: center; color: var(--green); letter-spacing: 2px; }
.body { margin: 10px 0 0; white-space: pre-line; color: #3d362c; font-size: 16px; line-height: 1.9; }
.divider { display: flex; align-items: center; gap: 12px; margin: 20px 0 6px; color: var(--gold); font-size: 15px; }
.divider::before, .divider::after { content: ''; flex: 1; height: 1px; background: var(--line); }
.bead-row { display: flex; gap: 12px; padding: 10px 0; }
.bead-image { flex: none; width: 52px; height: 52px; object-fit: contain; border-radius: 50%; background: #efe7d9; }
.bead-name { margin: 0; font-weight: 700; font-size: 16px; }
.bead-reason { margin: 2px 0 0; color: var(--muted); font-size: 14px; }
.basis { margin: 12px 0 0; color: var(--faint); font-size: 13px; text-align: center; }
.reveal { animation: rise .6s ease both; }
.d1 { animation-delay: .1s; } .d2 { animation-delay: .2s; } .d3 { animation-delay: .3s; } .d4 { animation-delay: .4s; }
@keyframes rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .reveal, .orbit, .orbit-seal { animation: none; } }

/* 自由设计：手机上下排，电脑左右排 */
.diy-grid { display: grid; gap: 16px; }
.diy-grid > * { min-width: 0; }
.diy-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.fit-pill { padding: 5px 12px; border-radius: 999px; background: #efe7d9; color: var(--ink); font-size: 14px; }
.fit-pill.done { background: rgba(31, 62, 50, .1); color: var(--green); }
.wrist-select { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); font-size: 14px; }
.wrist-select select { height: 34px; padding: 0 8px; border: 1px solid var(--line); border-radius: 10px; background: #fff; font: inherit; color: var(--ink); }
.diy-stage { position: relative; width: 100%; aspect-ratio: 1; max-width: 460px; margin: 8px auto 0; border-radius: 18px; background: radial-gradient(circle at 50% 45%, #fbf8f2, #efe7d9 75%); }
.diy-hint { min-height: 24px; margin: 8px 0 0; text-align: center; color: var(--muted); font-size: 14px; }
.selected-bar { display: flex; align-items: center; gap: 8px; margin-top: 8px; padding: 6px; border-radius: 12px; background: var(--card); border: 1px solid var(--line); }
.selected-bar[hidden] { display: none; }
.selected-bar span { flex: 1; text-align: center; font-size: 13px; color: var(--ink); }
.selected-bar button, .tools button { height: 36px; padding: 0 12px; border-radius: 10px; border: 1px solid var(--line); background: #fff; font-size: 14px; }
.selected-bar .danger { color: var(--red); }
.tools { display: flex; justify-content: center; gap: 10px; margin-top: 10px; }
.tools button:disabled { color: var(--faint); }
.tabs { display: flex; gap: 6px; }
.tab { padding: 6px 18px; border-radius: 999px; border: 1px solid var(--line); background: var(--card); }
.tab.on { border-color: var(--green); background: var(--green); color: #fff; }
.chips, .sizes { display: flex; gap: 6px; margin-top: 10px; overflow-x: auto; scrollbar-width: none; }
.chips::-webkit-scrollbar, .sizes::-webkit-scrollbar { display: none; }
.chip, .size { flex: none; padding: 4px 12px; border-radius: 999px; border: 1px solid transparent; background: #efe7d9; color: var(--muted); font-size: 13px; }
.chip.on, .size.on { border-color: var(--green); background: #fff; color: var(--green); }
.sizes:empty { display: none; }
.library { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 10px; margin-top: 12px; }
.bead-card { position: relative; display: flex; flex-direction: column; align-items: center; padding: 10px 6px 8px; border-radius: 12px; border: 1px solid var(--line); background: var(--card); transition: border-color .15s ease, transform .1s ease; }
.bead-card:hover { border-color: var(--gold-line); }
.bead-card:active { transform: scale(.97); }
.bead-card img, .bead-fallback { width: 56px; height: 56px; object-fit: contain; }
.bead-fallback { border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff, #d8cdb9); }
.bead-card-name { margin-top: 6px; font-size: 13px; line-height: 1.35; text-align: center; }
.bead-card-meta { color: var(--muted); font-size: 12px; }
.bead-count { position: absolute; right: 6px; top: 6px; min-width: 22px; height: 20px; padding: 0 6px; border-radius: 10px; background: var(--red); color: #fff; font-size: 12px; line-height: 20px; }
@media (min-width: 900px) {
  .diy-grid { grid-template-columns: minmax(380px, 460px) 1fr; align-items: start; gap: 28px; }
  .diy-left { position: sticky; top: 72px; }
  .diy-stage { max-width: min(460px, calc(100vh - 330px)); min-width: 280px; }
  .library { max-height: calc(100vh - 260px); overflow-y: auto; padding-right: 4px; }
}

/* 成品 */
.piece-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px; }
.piece-card { display: flex; flex-direction: column; border-radius: 16px; overflow: hidden; border: 1px solid var(--line); background: var(--card); transition: box-shadow .15s ease, transform .15s ease; }
.piece-card:hover { box-shadow: 0 8px 22px rgba(80, 60, 30, .1); transform: translateY(-2px); }
.piece-card.sold-out { opacity: .7; }
.piece-cover { position: relative; aspect-ratio: 1; background: radial-gradient(circle at 50% 45%, #fbf8f2, #efe7d9 80%); }
.piece-cover img { width: 100%; height: 100%; object-fit: cover; }
.piece-body { padding: 10px 14px 14px; }
.piece-title { margin: 0; font-size: 17px; font-weight: 700; color: var(--green); }
.piece-tagline { margin: 2px 0 0; color: var(--muted); font-size: 13px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.piece-price { margin: 6px 0 0; font-weight: 600; }
.piece-price small { color: var(--faint); font-weight: 400; }
.piece-price.big { margin-top: 10px; text-align: center; font-size: 20px; }
.tagline { margin: 4px 0 0; text-align: center; color: var(--muted); }
.spec { margin: 6px 0 0; text-align: center; color: var(--muted); font-size: 14px; }
.story { margin: 0 0 12px; white-space: pre-line; color: #3d362c; line-height: 1.85; }
.piece .promo-tag { display: table; margin: 6px auto 0; }

/* 小程序码弹层 */
.sheet { position: fixed; inset: 0; z-index: 40; display: flex; align-items: center; justify-content: center; padding: 16px; background: rgba(30, 26, 20, .45); }
.sheet[hidden] { display: none; }
.sheet-card { display: flex; flex-direction: column; align-items: center; width: 100%; max-width: 340px; padding: 24px 20px 18px; border-radius: 18px; background: var(--card); box-shadow: 0 18px 40px rgba(30, 26, 20, .25); }
.sheet-title { margin: 0 0 14px; font-size: 18px; color: var(--green); text-align: center; }
.mini-code { width: 220px; height: 220px; border-radius: 12px; background: #fff; }
.mini-code.soon { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; border: 1px dashed var(--gold-line); color: var(--gold); }
.mini-code.soon img { width: 56px; opacity: .8; }
.sheet-card .btn { margin-top: 16px; width: 100%; height: 44px; }
.toast { position: fixed; left: 50%; bottom: calc(var(--bar) + 24px); z-index: 50; max-width: 86vw; padding: 10px 16px; border-radius: 12px; background: rgba(40, 35, 28, .88); color: #fff; font-size: 14px; transform: translate(-50%, 10px); opacity: 0; pointer-events: none; transition: opacity .2s ease, transform .2s ease; }
.toast.on { opacity: 1; transform: translate(-50%, 0); }

@media (max-width: 420px) {
  .brand img { width: 108px; }
  .nav a { padding: 6px 9px; font-size: 14px; }
  .zodiac-grid { grid-template-columns: repeat(4, 1fr); }
  .home-title { font-size: 30px; }
}