/* 心愿焰火 · 页面样式（按 14 个页面分组，§6 逐页需求） */

/* ===== 通用：夜空画布与遮罩 ===== */
.stage-night { position: relative; overflow: hidden; background: var(--accent-night); color: #f8f2e6; }
.stage-night canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.stage-scrim { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10, 9, 8, .1) 0%, rgba(10, 9, 8, .02) 38%, rgba(10, 9, 8, .76) 100%); }
.stage-content { position: relative; z-index: 2; }

/* ===== 首页 · 今夜（#/home） ===== */
.brand-bar { display: flex; align-items: center; justify-content: space-between; padding: calc(16px + var(--safe-top)) 20px 6px; }
.brand { display: flex; align-items: center; gap: 10px; }
.brand-mark { width: 34px; height: 34px; border: 1px solid color-mix(in srgb, var(--gold) 40%, transparent); border-radius: 50%; display: grid; place-items: center; color: var(--gold-deep); background: color-mix(in srgb, var(--gold) 7%, transparent); }
.brand-word { font-family: var(--font-display); font-size: 18px; font-weight: 700; letter-spacing: .06em; line-height: 1; }
.brand-sub { font-size: 8px; letter-spacing: .14em; color: var(--ink-3); margin-top: 5px; text-transform: uppercase; }
.home-hero { position: relative; margin: 12px 14px 0; height: 300px; border-radius: 24px; overflow: hidden; box-shadow: var(--shadow-2); }
.home-hero .hero-body { position: absolute; inset: auto 0 0; padding: 20px; }
.home-hero .hero-title { font-family: var(--font-display); font-size: 27px; line-height: 1.28; margin: 0; }
.home-hero .hero-meta { display: flex; align-items: center; gap: 8px; font-size: 10px; letter-spacing: .08em; color: rgba(255, 248, 232, .72); margin-bottom: 10px; }
.home-hero .hero-dot { width: 3px; height: 3px; border-radius: 50%; background: var(--gold-hi); }
.home-intro { padding: 20px 20px 0; }
.record-card { display: flex; gap: 12px; align-items: stretch; padding: 12px; }
.record-thumb { width: 78px; border-radius: 14px; overflow: hidden; flex: none; }
.record-meta { display: flex; align-items: center; gap: 6px; font-size: 10.5px; color: var(--ink-3); flex-wrap: wrap; }
.record-specs { display: flex; gap: 10px; font-size: 11px; color: var(--ink-2); margin-top: 6px; flex-wrap: wrap; }
.draft-card { border: 1px dashed color-mix(in srgb, var(--accent) 46%, transparent); background: color-mix(in srgb, var(--accent) 6%, transparent); }

/* ===== 扫码（#/scan） ===== */
.scan-frame { position: relative; margin: 8px 20px 0; height: 320px; border-radius: 24px; overflow: hidden; }
.scan-corners { position: absolute; inset: 26px; z-index: 3; }
.scan-corners i { position: absolute; width: 26px; height: 26px; border: 2px solid rgba(255, 248, 232, .8); }
.scan-corners i:nth-child(1) { top: 0; left: 0; border-right: 0; border-bottom: 0; border-radius: 8px 0 0 0; }
.scan-corners i:nth-child(2) { top: 0; right: 0; border-left: 0; border-bottom: 0; border-radius: 0 8px 0 0; }
.scan-corners i:nth-child(3) { bottom: 0; left: 0; border-right: 0; border-top: 0; border-radius: 0 0 0 8px; }
.scan-corners i:nth-child(4) { bottom: 0; right: 0; border-left: 0; border-top: 0; border-radius: 0 0 8px 0; }
.scan-line { position: absolute; left: 30px; right: 30px; height: 2px; background: linear-gradient(90deg, transparent, var(--gold-hi), transparent); animation: scanMove 2.6s ease-in-out infinite; }
@keyframes scanMove { 0% { top: 20%; } 50% { top: 76%; } 100% { top: 20%; } }
.scan-hint { position: absolute; inset: auto 0 18px; text-align: center; font-size: 11px; color: rgba(255, 248, 232, .72); letter-spacing: .1em; }

/* ===== 产品详情与包装（#/product） ===== */
.product-hero { position: relative; height: 330px; }
.product-head-line { font-family: var(--font-display); font-size: 26px; line-height: 1.3; margin: 0; }
.id-table { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 14px; }
.id-cell { border-bottom: 1px solid var(--line); padding-bottom: 8px; }
.id-cell .k { font-size: 10.5px; color: var(--ink-3); letter-spacing: .06em; }
.id-cell .v { font-size: 13px; margin-top: 3px; }
.pkg-stage { position: relative; padding: 18px 0 6px; }
.pkg { width: 100%; border-radius: 18px; overflow: hidden; box-shadow: var(--shadow-2); background: #0d0d0f; }
.pkg.big { border-radius: 22px; }
.pkg-tabs { display: flex; gap: 8px; margin-bottom: 12px; }
.pkg-note { font-size: 11px; color: var(--ink-3); margin-top: 10px; }
.series-scroll { display: flex; gap: 10px; overflow-x: auto; padding: 4px 20px 8px; scrollbar-width: none; }
.series-scroll::-webkit-scrollbar { display: none; }
.series-item { flex: none; width: 132px; }
.series-item .cap { font-size: 11px; margin-top: 6px; color: var(--ink-2); }
.safety { display: flex; gap: 8px; align-items: flex-start; font-size: 12px; color: var(--ink-2); }
.catalogue { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.catalogue-item { border: 1px solid var(--line-strong); border-radius: 14px; padding: 10px 12px; background: var(--white); }
.catalogue-item[aria-pressed="true"] { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 12%, transparent); }
.catalogue-item .nm { font-size: 13px; font-weight: 600; }
.catalogue-item .em { font-size: 10.5px; color: var(--ink-3); margin-top: 2px; }

/* ===== 许愿（#/wish） ===== */
.wish-pad { position: relative; background: var(--white); border-radius: 20px; padding: 18px; border: 1px solid color-mix(in srgb, var(--accent) 22%, transparent); box-shadow: var(--shadow-2); }
.wish-pad::after { content: ""; position: absolute; right: 14px; bottom: 12px; width: 46px; height: 46px; border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent); border-radius: 10px; opacity: .5; }
.wish-seal { display: grid; place-items: center; width: 52px; height: 52px; border: 1px solid color-mix(in srgb, var(--accent) 46%, transparent); border-radius: 10px; color: var(--accent-deep); font-family: var(--font-display); font-size: 15px; letter-spacing: .06em; }

/* ===== 点燃预告（#/premiere） ===== */
.premiere-card { position: relative; border-radius: 22px; overflow: hidden; box-shadow: var(--shadow-2); }
.premiere-body { position: relative; z-index: 2; padding: 20px; color: #f8f2e6; }
.premiere-line { font-family: var(--font-display); font-size: 22px; line-height: 1.4; margin: 0; }
.kv-row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--line); font-size: 13px; }
.kv-row:last-child { border-bottom: 0; }
.kv-row .k { color: var(--ink-3); font-size: 12px; }

/* ===== 拍摄（#/capture） ===== */
.capture-stage { position: relative; margin: 0 16px; height: 380px; border-radius: 24px; overflow: hidden; }
.capture-guides { position: absolute; inset: 18px; z-index: 3; display: grid; place-items: center; border: 1px dashed rgba(255, 248, 232, .32); border-radius: 16px; font-size: 11px; color: rgba(255, 248, 232, .8); letter-spacing: .08em; text-align: center; padding: 12px; }
.record-btn { position: absolute; left: 50%; bottom: 20px; z-index: 4; transform: translateX(-50%); width: 68px; height: 68px; border-radius: 50%; border: 3px solid rgba(255, 248, 232, .85); display: grid; place-items: center; }
.record-btn i { width: 50px; height: 50px; border-radius: 50%; background: var(--ember); display: block; }
.record-btn.recording i { border-radius: 10px; width: 30px; height: 30px; }
.upload-bar { height: 6px; border-radius: var(--r-pill); background: rgba(23, 19, 15, .1); overflow: hidden; }
.upload-bar > i { display: block; height: 100%; background: var(--accent); border-radius: var(--r-pill); transition: width .3s; }

/* ===== AI 生成（#/generate） ===== */
.movie-steps { display: grid; gap: 12px; }
.movie-step { display: flex; gap: 12px; align-items: flex-start; }
.step-dot { width: 22px; height: 22px; border-radius: 50%; border: 1px solid var(--line-strong); display: grid; place-items: center; flex: none; font-size: 10px; color: var(--ink-3); }
.movie-step.done .step-dot { background: var(--accent); border-color: var(--accent); color: #1b150b; }
.movie-step.active .step-dot { box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 16%, transparent); border-color: var(--accent); color: var(--accent-deep); }
.movie-step .st { font-size: 13px; }
.movie-step .sd { font-size: 11px; color: var(--ink-3); }
.progress-track { height: 8px; border-radius: var(--r-pill); background: rgba(23, 19, 15, .1); overflow: hidden; }
.progress-track > i { display: block; height: 100%; background: linear-gradient(90deg, var(--accent-deep), var(--accent-hi)); transition: width .4s; }

/* ===== 电影（#/film） ===== */
.film-player { position: relative; border-radius: 20px; overflow: hidden; aspect-ratio: 9 / 16; max-height: 62vh; margin: 0 auto; }
.film-center { position: absolute; inset: 0; display: grid; place-items: center; z-index: 3; }
.play-btn { width: 68px; height: 68px; border-radius: 50%; display: grid; place-items: center; background: rgba(10, 9, 8, .42); border: 1px solid rgba(255, 255, 255, .28); color: #fff8e9; }
.film-labels { display: flex; flex-wrap: wrap; gap: 6px; }
.ai-badge { display: inline-flex; align-items: center; gap: 5px; font-size: 10.5px; padding: 3px 9px; border-radius: var(--r-pill); border: 1px solid rgba(255, 255, 255, .26); color: rgba(248, 242, 230, .88); background: rgba(255, 255, 255, .07); }

/* ===== 分享卡（#/share） ===== */
.share-preview { border-radius: 20px; overflow: hidden; box-shadow: var(--shadow-3); background: #0d0d0f; }
.share-card { position: relative; aspect-ratio: 3 / 4.6; padding: 22px; display: flex; flex-direction: column; justify-content: space-between; color: #f8f2e6; }
.share-card.template-theme_color { background: linear-gradient(160deg, var(--accent-night-2), var(--accent-night)); }
.share-card.template-collection_gold { background: linear-gradient(165deg, #1a1409, #0a0908 70%); }
.share-card.template-night_space { background: radial-gradient(circle at 30% 20%, #1b2438, #080d1a 62%); }
.share-card .sc-top { font-size: 10px; letter-spacing: .22em; text-transform: uppercase; color: rgba(248, 242, 230, .6); }
.share-card .sc-theme { font-family: var(--font-display); font-size: 30px; line-height: 1.24; margin: 6px 0 0; }
.share-card .sc-line { font-size: 13px; color: rgba(248, 242, 230, .78); margin-top: 8px; }
.share-card .sc-spec { display: flex; gap: 10px; flex-wrap: wrap; font-size: 11.5px; color: rgba(248, 242, 230, .82); }
.share-card .sc-spec b { font-family: var(--font-display); font-size: 15px; font-weight: 600; display: block; }
.share-card .sc-foot { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; }
.share-card .sc-code { font-size: 11px; letter-spacing: .12em; color: rgba(248, 242, 230, .72); }
.share-card .sc-seal { width: 54px; height: 54px; border: 1px solid rgba(229, 199, 120, .55); border-radius: 10px; display: grid; place-items: center; font-family: var(--font-display); font-size: 15px; color: var(--gold-hi); }
.template-row { display: flex; gap: 8px; }
.template-item { flex: 1; border-radius: 14px; border: 1px solid var(--line-strong); padding: 10px 8px; text-align: center; font-size: 11.5px; background: var(--white); }
.template-item[aria-pressed="true"] { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 12%, transparent); }

/* ===== 摘要数字：点开看明细（首页「我的私人摘要」与档案页统计共用） ===== */
.stat { position: relative; }
.stat.is-link { text-align: left; font: inherit; color: inherit; width: 100%; cursor: pointer; transition: transform .14s ease, border-color .14s ease; }
.stat.is-link:active { transform: scale(.985); border-color: color-mix(in srgb, var(--accent) 34%, transparent); }
.stat .stat-chev { position: absolute; top: 12px; right: 12px; color: var(--ink-3); display: inline-flex; }
.stat .stat-chev svg { width: 15px; height: 15px; }
.stat-group-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin: 18px 2px 8px; }
.stat-group-head:first-child { margin-top: 0; }
.stat-detail-row { border-radius: 12px; }
.sheet .card.flush { border-radius: 14px; overflow: hidden; }

/* ===== 档案（#/archive） ===== */
.view-switch { display: flex; gap: 6px; background: rgba(23, 19, 15, .05); padding: 4px; border-radius: var(--r-pill); }
.view-switch button { flex: 1; min-height: 34px; border-radius: var(--r-pill); font-size: 12px; color: var(--ink-2); }
.view-switch button[aria-pressed="true"] { background: var(--white); color: var(--ink); box-shadow: var(--shadow-1); font-weight: 600; }
.timeline { position: relative; padding-left: 20px; }
.timeline::before { content: ""; position: absolute; left: 5px; top: 6px; bottom: 6px; width: 1px; background: var(--line-strong); }
.timeline-item { position: relative; padding-bottom: 14px; }
.timeline-item::before { content: ""; position: absolute; left: -19px; top: 20px; width: 9px; height: 9px; border-radius: 50%; background: var(--paper); border: 1.5px solid var(--accent); }
.year-rail { display: flex; gap: 8px; overflow-x: auto; padding: 0 20px 10px; scrollbar-width: none; }
.year-rail::-webkit-scrollbar { display: none; }
.postcard-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.postcard { border-radius: 16px; overflow: hidden; background: var(--white); box-shadow: var(--shadow-1); }
.postcard .pc-body { padding: 10px 12px 12px; }

/* ===== 单场收藏证（#/record/:id） ===== */
.cert { position: relative; border-radius: 22px; overflow: hidden; box-shadow: var(--shadow-3); }
.cert-body { position: relative; z-index: 2; padding: 20px; color: #f8f2e6; }
.cert-head { padding-right: 70px; }
.cert-no { font-family: var(--font-display); font-size: 15px; letter-spacing: .14em; }
.cert-title { font-family: var(--font-display); font-size: 24px; margin: 8px 0 2px; }
.cert-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-top: 16px; }
.cert-cell .k { font-size: 10px; letter-spacing: .1em; color: rgba(248, 242, 230, .58); }
.cert-cell .v { font-size: 13.5px; margin-top: 2px; }
.cert-seal { position: absolute; right: 20px; top: 20px; z-index: 3; width: 58px; height: 58px; border: 1px solid rgba(229, 199, 120, .5); border-radius: 12px; display: grid; place-items: center; font-family: var(--font-display); font-size: 15px; line-height: 1.08; color: var(--gold-hi); background: rgba(10, 9, 8, .28); }
.cert-seal span { display: block; text-align: center; }
.cert-seal.seal-1 { grid-template-columns: 1fr; grid-template-rows: 1fr; }
.cert-seal.seal-2 { grid-template-columns: 1fr; grid-template-rows: repeat(2, 1fr); }
.cert-seal.seal-3 { grid-template-columns: 1fr; grid-template-rows: repeat(3, 1fr); }
.cert-seal.seal-4 { grid-template-columns: repeat(2, 1fr); grid-template-rows: repeat(2, 1fr); }
.cert-wish { margin-top: 16px; padding-top: 14px; border-top: 1px solid rgba(255, 255, 255, .16); font-family: var(--font-display); font-size: 15px; line-height: 1.85; }

/* ===== 私人消费凭证（#/purchases） ===== */
.purchase-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px; border-bottom: 1px solid var(--line); }
.purchase-row:last-child { border-bottom: 0; }
.amount { font-family: var(--font-display); font-size: 17px; }

/* ===== 我的（#/profile） ===== */
.profile-head { position: relative; padding: calc(28px + var(--safe-top)) 20px 24px; overflow: hidden; }
.avatar { width: 62px; height: 62px; border-radius: 50%; display: grid; place-items: center; font-family: var(--font-display); font-size: 24px; border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent); background: color-mix(in srgb, var(--accent) 10%, transparent); color: var(--accent-deep); }
.badge-row { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 14px; }
.menu-list { border-radius: var(--r-card); overflow: hidden; background: var(--white); border: 1px solid rgba(23, 19, 15, .045); box-shadow: var(--shadow-1); }
.foot-brand { text-align: center; font-size: 11px; color: var(--ink-3); padding: 24px 20px 8px; letter-spacing: .06em; }

/* ===== 记录与公开设置（#/privacy） ===== */
.setting-block { margin-top: 16px; }
.setting-title { font-size: 12px; font-weight: 600; color: var(--ink-2); letter-spacing: .06em; margin-bottom: 4px; }
.grant-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.grant-row:last-child { border-bottom: 0; }

/* ===== 开发面板（?dev=1 或 ?api=1） ===== */
/* 录制页：提示语要落在录制按钮之上，否则被按钮压住 */
.scan-hint.record-timer { bottom: 100px; }

.dev-panel { position: absolute; right: 12px; bottom: calc(var(--tab-h) + 16px); z-index: 40; display: grid; gap: 6px; justify-items: end; }
.dev-toggle { background: rgba(23, 19, 15, .86); color: #fdf7ea; border-radius: var(--r-pill); font-size: 11px; padding: 7px 12px; }
.dev-box { width: 244px; max-height: 320px; overflow-y: auto; background: rgba(23, 19, 15, .94); color: #f4ecdd; border-radius: 14px; padding: 12px; font-size: 11px; line-height: 1.7; }
.dev-box code { display: block; font-size: 11px; color: var(--gold-hi); }
.dev-box .dev-code { width: 100%; text-align: left; padding: 4px 0; border-bottom: 1px dashed rgba(255, 255, 255, .14); }