/* ==================== 纳福页面样式 ==================== */
.nafu-page { --nafu-gold: #d4a853; --nafu-gold-light: #fbbf24; --nafu-vermillion: #dc2626; --nafu-jade: #10b981; --nafu-ink: #1e293b; }
.nafu-page * { box-sizing: border-box; }

/* 步骤过渡（方向感） */
.nafu-step { display: none; }
.nafu-step.active { display: block; }
.nafu-step-enter-forward { animation: nafuSlideInRight 0.6s cubic-bezier(0.22,1,0.36,1) forwards; }
@keyframes nafuSlideInRight { from { opacity: 0; transform: translateX(40px) scale(0.98); } to { opacity: 1; transform: translateX(0) scale(1); } }
.nafu-step-enter-backward { animation: nafuSlideInLeft 0.6s cubic-bezier(0.22,1,0.36,1) forwards; }
@keyframes nafuSlideInLeft { from { opacity: 0; transform: translateX(-40px) scale(0.98); } to { opacity: 1; transform: translateX(0) scale(1); } }
.nafu-step-enter-reveal { animation: nafuRevealStep 0.8s cubic-bezier(0.22,1,0.36,1) forwards; }
@keyframes nafuRevealStep { 0% { opacity: 0; transform: scale(0.9) translateY(20px); filter: blur(4px); } 60% { opacity: 1; filter: blur(0); } 100% { opacity: 1; transform: scale(1) translateY(0); filter: blur(0); } }

/* ==================== Step 1: 入福着陆 ==================== */
.nafu-landing { text-align: center; padding: 80px 20px 60px; position: relative; overflow: hidden; min-height: 70vh; display: flex; flex-direction: column; align-items: center; justify-content: center; }

/* 金色粒子 */
.nafu-particles { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; }
.nafu-particle { position: absolute; width: 4px; height: 4px; background: var(--nafu-gold-light); border-radius: 50%; opacity: 0; animation: nafuFloat 8s infinite; box-shadow: 0 0 6px var(--nafu-gold-light); }
@keyframes nafuFloat { 0% { opacity: 0; transform: translateY(100vh); } 10% { opacity: 0.8; } 90% { opacity: 0.6; } 100% { opacity: 0; transform: translateY(-20px); } }

.nafu-title { font-size: 3.5rem; font-weight: 800; background: linear-gradient(135deg, var(--nafu-gold-light), var(--nafu-gold), #f59e0b); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; margin-bottom: 16px; letter-spacing: 8px; }
.nafu-subtitle { font-size: 1.2rem; color: rgba(255,255,255,0.7); margin-bottom: 8px; }
.nafu-seasonal { font-size: 0.95rem; color: rgba(255,255,255,0.5); margin-bottom: 40px; }
.nafu-seasonal .seasonal-tag { display: inline-block; padding: 4px 12px; background: rgba(212,168,83,0.15); border: 1px solid rgba(212,168,83,0.3); border-radius: 20px; margin: 0 4px; color: var(--nafu-gold); font-size: 0.85rem; }

.nafu-cta { display: inline-flex; align-items: center; gap: 8px; padding: 16px 40px; background: linear-gradient(135deg, var(--nafu-gold), #f59e0b); color: #1e293b; font-size: 1.1rem; font-weight: 700; border: none; border-radius: 50px; cursor: pointer; transition: all 0.3s; box-shadow: 0 4px 20px rgba(212,168,83,0.3); letter-spacing: 2px; }
.nafu-cta:hover { transform: translateY(-3px); box-shadow: 0 8px 30px rgba(212,168,83,0.5); }
.nafu-cta-pulse { animation: nafuPulse 2s infinite; }
@keyframes nafuPulse { 0%, 100% { box-shadow: 0 4px 20px rgba(212,168,83,0.3); } 50% { box-shadow: 0 4px 30px rgba(212,168,83,0.6); } }

.nafu-cost-hint { margin-top: 16px; font-size: 0.85rem; color: rgba(255,255,255,0.4); }

/* ==================== Step 2.5: 禀词表单 ==================== */
.nafu-prayer { padding: 40px 20px; max-width: 600px; margin: 0 auto; }
.nafu-prayer-card { background: rgba(255,255,255,0.04); backdrop-filter: blur(20px); border: 1px solid rgba(212,168,83,0.3); border-radius: 20px; padding: 36px 28px; position: relative; overflow: hidden; }
.nafu-prayer-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, transparent, var(--nafu-gold-light), transparent); }
.nafu-prayer-header { text-align: center; margin-bottom: 28px; }
.nafu-prayer-icon { font-size: 2.5rem; margin-bottom: 8px; }
.nafu-prayer-header h2 { font-size: 1.5rem; color: var(--nafu-gold-light); margin-bottom: 6px; }
.nafu-prayer-subtitle { font-size: 0.9rem; color: rgba(255,255,255,0.5); }

.nafu-prayer-field { margin-bottom: 16px; }
.nafu-prayer-label { display: block; font-size: 0.9rem; color: var(--nafu-gold); font-weight: 600; margin-bottom: 8px; }
.nafu-prayer-input { width: 100%; padding: 12px 16px; background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.12); border-radius: 12px; color: #e2e8f0; font-size: 0.95rem; line-height: 1.6; resize: vertical; font-family: inherit; transition: border-color 0.3s; box-sizing: border-box; }
.nafu-prayer-input:focus { outline: none; border-color: var(--nafu-gold); background: rgba(255,255,255,0.08); }
.nafu-prayer-input::placeholder { color: rgba(255,255,255,0.3); }
.nafu-prayer-count { text-align: right; font-size: 0.75rem; color: rgba(255,255,255,0.3); margin-top: 4px; }

.nafu-prayer-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 20px; }
.nafu-prayer-tag { padding: 6px 14px; background: rgba(212,168,83,0.08); border: 1px solid rgba(212,168,83,0.2); border-radius: 20px; font-size: 0.82rem; color: rgba(255,255,255,0.65); cursor: pointer; transition: all 0.2s; user-select: none; }
.nafu-prayer-tag:hover { background: rgba(212,168,83,0.15); color: var(--nafu-gold); border-color: rgba(212,168,83,0.4); }
.nafu-prayer-tag.active { background: rgba(212,168,83,0.2); color: var(--nafu-gold); border-color: var(--nafu-gold); }

.nafu-prayer-optional { margin-bottom: 24px; }
.nafu-prayer-expand { background: none; border: none; color: rgba(255,255,255,0.4); font-size: 0.85rem; cursor: pointer; padding: 8px 0; display: flex; align-items: center; gap: 6px; transition: color 0.2s; }
.nafu-prayer-expand:hover { color: rgba(255,255,255,0.6); }
.nafu-prayer-extra { margin-top: 12px; animation: nafuFadeIn 0.3s ease; }
.nafu-prayer-row { display: flex; gap: 12px; }
.nafu-prayer-half { flex: 1; }
.nafu-prayer-short { padding: 10px 14px; font-size: 0.9rem; }

.nafu-prayer-lunar { display: flex; align-items: center; gap: 6px; margin-top: 8px; padding: 8px 12px; background: rgba(212,168,83,0.08); border: 1px solid rgba(212,168,83,0.2); border-radius: 10px; animation: nafuFadeIn 0.3s ease; }
.nafu-prayer-lunar-icon { font-size: 1rem; }
.nafu-prayer-lunar-text { font-size: 0.85rem; color: var(--nafu-gold); font-weight: 500; }

.nafu-prayer-actions { display: flex; gap: 12px; justify-content: center; }
.nafu-prayer-submit { min-width: 160px; font-size: 1rem; padding: 14px 32px; }
.nafu-prayer-submit:disabled { opacity: 0.5; cursor: not-allowed; }

@media (max-width: 768px) {
    .nafu-prayer-card { padding: 28px 18px; }
    .nafu-prayer-row { flex-direction: column; gap: 0; }
    .nafu-prayer-actions { flex-direction: column; align-items: center; }
}

/* ==================== Step 2: 签筒选择 ==================== */
.nafu-select { padding: 60px 20px; text-align: center; }
.nafu-select h2 { font-size: 1.8rem; color: var(--nafu-gold-light); margin-bottom: 8px; }
.nafu-select p { color: rgba(255,255,255,0.6); margin-bottom: 40px; }

.nafu-tubes { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 16px; max-width: 900px; margin: 0 auto; }
.nafu-tube { padding: 24px 20px; background: rgba(255,255,255,0.04); backdrop-filter: blur(16px); border: 1px solid rgba(255,255,255,0.1); border-radius: 16px; cursor: pointer; transition: all 0.3s; position: relative; overflow: hidden; text-align: center; }
.nafu-tube::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, transparent, var(--nafu-gold), transparent); opacity: 0; transition: opacity 0.3s; }
.nafu-tube:hover { transform: translateY(-8px); background: rgba(255,255,255,0.08); border-color: rgba(212,168,83,0.4); box-shadow: 0 8px 30px rgba(212,168,83,0.15); }
.nafu-tube:hover::before { opacity: 1; }
.nafu-tube-icon { font-size: 3rem; margin-bottom: 12px; }
.nafu-tube-name { font-size: 1.2rem; font-weight: 600; color: #e2e8f0; margin-bottom: 6px; }
.nafu-tube-desc { font-size: 0.85rem; color: rgba(255,255,255,0.5); }

/* ==================== Step 3: 摇签动画（增强版） ==================== */
.nafu-shaking { padding: 80px 20px; text-align: center; }
.nafu-tube-visual { width: 140px; height: 200px; margin: 0 auto 30px; background: linear-gradient(180deg, #8B6914 0%, #6B4F12 20%, #5C4033 50%, #3E2723 100%); border-radius: 12px 12px 24px 24px; position: relative; border: 2px solid var(--nafu-gold); box-shadow: 0 0 30px rgba(212,168,83,0.3), inset 0 -20px 40px rgba(0,0,0,0.3); overflow: visible; }
.nafu-tube-visual::before { content: ''; position: absolute; top: -4px; left: 8px; right: 8px; height: 8px; background: linear-gradient(90deg, #8B6914, var(--nafu-gold-light), #8B6914); border-radius: 4px 4px 0 0; }
.nafu-tube-visual::after { content: '签'; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 2.5rem; color: var(--nafu-gold-light); font-weight: 700; text-shadow: 0 0 10px rgba(251,191,36,0.5); }
.nafu-tube-shaking { animation: nafuShake 0.4s infinite ease-in-out; }
@keyframes nafuShake { 0%,100% { transform: rotate(0deg) translateX(0); } 15% { transform: rotate(-6deg) translateX(-3px); } 30% { transform: rotate(4deg) translateX(2px); } 45% { transform: rotate(-5deg) translateX(-2px); } 60% { transform: rotate(6deg) translateX(3px); } 75% { transform: rotate(-3deg) translateX(-1px); } 90% { transform: rotate(5deg) translateX(2px); } }

.nafu-stick { position: absolute; top: -20px; left: 50%; width: 8px; height: 80px; background: linear-gradient(180deg, var(--nafu-gold-light) 0%, #d4a853 40%, #8B6914 100%); border-radius: 4px; transform: translateX(-50%); opacity: 0; box-shadow: 0 0 8px rgba(251,191,36,0.4); }
.nafu-stick-pop { animation: nafuStickPop 1s ease-out forwards; }
@keyframes nafuStickPop { 0% { opacity: 0; top: 30px; transform: translateX(-50%) scaleY(0.3); } 40% { opacity: 1; top: -50px; transform: translateX(-50%) scaleY(1.1); } 60% { top: -40px; transform: translateX(-50%) scaleY(1); } 100% { opacity: 1; top: -35px; transform: translateX(-50%) scaleY(1); } }

/* 屏幕震动 */
.nafu-screen-shake { animation: nafuScreenShake 0.5s ease-out; }
@keyframes nafuScreenShake { 0%,100% { transform: translateX(0); } 20% { transform: translateX(-4px); } 40% { transform: translateX(4px); } 60% { transform: translateX(-2px); } 80% { transform: translateX(2px); } }

.nafu-shake-text { font-size: 1.3rem; color: var(--nafu-gold); margin-bottom: 12px; }
.nafu-shake-hint { font-size: 0.85rem; color: rgba(255,255,255,0.4); }
.nafu-loading-dots::after { content: ''; animation: nafuDots 1.5s infinite; }
@keyframes nafuDots { 0% { content: ''; } 33% { content: '.'; } 66% { content: '..'; } 100% { content: '...'; } }

/* ==================== Step 4: 解签展示 ==================== */
.nafu-result { padding: 40px 20px; max-width: 680px; margin: 0 auto; }

.nafu-result-card { background: rgba(255,255,255,0.04); backdrop-filter: blur(20px); border: 1px solid rgba(212,168,83,0.3); border-radius: 20px; padding: 40px 32px; position: relative; overflow: hidden; animation: nafuUnfold 1s ease-out; }
@keyframes nafuUnfold { from { opacity: 0; transform: scaleY(0.8); } to { opacity: 1; transform: scaleY(1); } }
.nafu-result-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, transparent, var(--nafu-gold-light), transparent); }

/* 签级徽章 */
.nafu-tier-badge { display: inline-block; padding: 6px 20px; border-radius: 20px; font-size: 0.9rem; font-weight: 700; margin-bottom: 16px; letter-spacing: 2px; }
.nafu-tier-upper-great { background: linear-gradient(135deg, rgba(251,191,36,0.2), rgba(245,158,11,0.2)); color: #fbbf24; border: 1px solid rgba(251,191,36,0.4); box-shadow: 0 0 15px rgba(251,191,36,0.2); animation: nafuBadgePulse 2s ease-in-out infinite alternate; }
@keyframes nafuBadgePulse { from { box-shadow: 0 0 10px rgba(251,191,36,0.2); text-shadow: 0 0 5px rgba(251,191,36,0.3); } to { box-shadow: 0 0 25px rgba(251,191,36,0.5); text-shadow: 0 0 15px rgba(251,191,36,0.6); } }
.nafu-tier-upper { background: linear-gradient(135deg, rgba(52,211,153,0.2), rgba(16,185,129,0.2)); color: #34d399; border: 1px solid rgba(52,211,153,0.4); }
.nafu-tier-middle { background: linear-gradient(135deg, rgba(129,140,248,0.2), rgba(99,102,241,0.2)); color: #818cf8; border: 1px solid rgba(129,140,248,0.4); }
.nafu-tier-lower { background: linear-gradient(135deg, rgba(251,191,36,0.15), rgba(245,158,11,0.15)); color: #f59e0b; border: 1px solid rgba(245,158,11,0.3); }

.nafu-result-title { font-size: 2rem; font-weight: 700; background: linear-gradient(135deg, var(--nafu-gold-light), #f59e0b); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; margin-bottom: 24px; letter-spacing: 4px; }

/* 签诗 */
.nafu-poem { padding: 24px; background: rgba(212,168,83,0.06); border-left: 3px solid var(--nafu-gold); border-radius: 0 12px 12px 0; margin-bottom: 24px; }
.nafu-poem p { font-size: 1.1rem; color: rgba(255,255,255,0.85); line-height: 2; letter-spacing: 2px; font-family: 'Noto Serif SC', 'STSong', serif; }

/* 解读 */
.nafu-section { margin-bottom: 24px; }
.nafu-section-title { font-size: 0.9rem; color: var(--nafu-gold); font-weight: 600; margin-bottom: 8px; display: flex; align-items: center; gap: 6px; }
.nafu-section-title::before { content: '◆'; font-size: 0.6rem; }
.nafu-section-content { font-size: 0.95rem; color: rgba(255,255,255,0.75); line-height: 1.8; }

/* 四维运势 */
.nafu-dimensions { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 24px; }
.nafu-dim-item { display: flex; align-items: center; gap: 10px; padding: 10px 14px; background: rgba(255,255,255,0.03); border-radius: 10px; }
.nafu-dim-label { font-size: 0.85rem; color: rgba(255,255,255,0.6); min-width: 36px; }
.nafu-dim-stars { display: flex; gap: 2px; }
.nafu-star { color: rgba(255,255,255,0.2); font-size: 0.9rem; }
.nafu-star.filled { color: var(--nafu-gold-light); }

/* 开运锦囊 */
.nafu-lucky { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 24px; }
.nafu-lucky-item { padding: 8px 14px; background: rgba(212,168,83,0.08); border: 1px solid rgba(212,168,83,0.2); border-radius: 10px; font-size: 0.85rem; color: rgba(255,255,255,0.7); }
.nafu-lucky-item span { color: var(--nafu-gold); font-weight: 600; }

/* 祝福语 */
.nafu-blessing { padding: 20px; background: linear-gradient(135deg, rgba(212,168,83,0.08), rgba(245,158,11,0.05)); border: 1px solid rgba(212,168,83,0.2); border-radius: 12px; text-align: center; }
.nafu-blessing p { font-size: 1rem; color: rgba(255,255,255,0.85); line-height: 1.8; font-style: italic; }

/* 积分提示 */
.nafu-credits-info { text-align: center; margin-top: 16px; font-size: 0.8rem; color: rgba(255,255,255,0.4); }

/* ==================== Step 5: 分享操作 ==================== */
.nafu-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-top: 30px; padding: 0 20px; }
.nafu-btn { padding: 12px 28px; border: 1px solid rgba(255,255,255,0.15); border-radius: 12px; font-size: 0.95rem; cursor: pointer; transition: all 0.3s; background: rgba(255,255,255,0.06); color: #e2e8f0; text-decoration: none; display: inline-flex; align-items: center; gap: 6px; }
.nafu-btn:hover { background: rgba(255,255,255,0.1); transform: translateY(-2px); }
.nafu-btn-primary { background: linear-gradient(135deg, var(--nafu-gold), #f59e0b); color: #1e293b; font-weight: 600; border: none; }
.nafu-btn-primary:hover { box-shadow: 0 4px 20px rgba(212,168,83,0.4); }

/* 复制成功提示 */
.nafu-toast { position: fixed; bottom: 30px; left: 50%; transform: translateX(-50%) translateY(20px); padding: 12px 24px; background: rgba(16,185,129,0.9); color: white; border-radius: 10px; font-size: 0.9rem; opacity: 0; transition: all 0.3s; pointer-events: none; z-index: 10001; }
.nafu-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* 登录提示 */
.nafu-login-hint { text-align: center; padding: 40px 20px; color: rgba(255,255,255,0.6); }
.nafu-login-hint a { color: var(--nafu-gold); text-decoration: none; border-bottom: 1px dashed var(--nafu-gold); }

/* 错误提示 */
.nafu-error { text-align: center; padding: 40px 20px; color: rgba(255,255,255,0.7); }
.nafu-error-icon { font-size: 3rem; margin-bottom: 16px; }
.nafu-error-msg { font-size: 1rem; margin-bottom: 20px; }

/* ==================== 响应式 ==================== */
@media (max-width: 768px) {
    .nafu-title { font-size: 2.2rem; letter-spacing: 4px; }
    .nafu-tubes { grid-template-columns: 1fr 1fr; }
    .nafu-result-card { padding: 28px 20px; }
    .nafu-result-title { font-size: 1.6rem; }
    .nafu-poem p { font-size: 1rem; }
    .nafu-dimensions { grid-template-columns: 1fr; }
    .nafu-actions { flex-direction: column; align-items: center; }
}

/* 无障碍 */
@media (prefers-reduced-motion: reduce) {
    .nafu-particle, .nafu-ambient-particle, .nafu-tube-shaking, .nafu-stick-pop, .nafu-cta-pulse { animation: none !important; }
    .nafu-step, .nafu-step-enter-forward, .nafu-step-enter-backward, .nafu-step-enter-reveal { animation: none !important; }
    .nafu-result-card, .nafu-tier-upper-great, .nafu-confetti, .nafu-screen-shake { animation: none !important; }
}

/* ==================== 音效开关 ==================== */
.nafu-sound-toggle { position: fixed; top: 16px; right: 16px; z-index: 10000; width: 40px; height: 40px; border-radius: 50%; border: 1px solid rgba(255,255,255,0.15); background: rgba(30,41,59,0.8); backdrop-filter: blur(8px); color: rgba(255,255,255,0.7); font-size: 1.2rem; cursor: pointer; transition: all 0.3s; display: flex; align-items: center; justify-content: center; }
.nafu-sound-toggle:hover { background: rgba(255,255,255,0.1); color: var(--nafu-gold); }
.nafu-sound-toggle.muted { opacity: 0.5; }

/* ==================== 老黄历卡片 ==================== */
.nafu-huangli { padding: 40px 20px; max-width: 680px; margin: 0 auto; }
.nafu-huangli-card { background: rgba(255,255,255,0.04); backdrop-filter: blur(20px); border: 1px solid rgba(212,168,83,0.3); border-radius: 20px; padding: 32px 28px; position: relative; overflow: hidden; animation: nafuUnfold 0.8s ease-out; }
.nafu-huangli-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, transparent, var(--nafu-gold-light), transparent); }

.nafu-hl-header { text-align: center; margin-bottom: 24px; }
.nafu-hl-date { font-size: 1.6rem; font-weight: 700; background: linear-gradient(135deg, var(--nafu-gold-light), #f59e0b); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; margin-bottom: 4px; }
.nafu-hl-week { font-size: 0.9rem; color: rgba(255,255,255,0.5); }
.nafu-hl-ganzhi { display: flex; justify-content: center; gap: 16px; margin-top: 12px; flex-wrap: wrap; }
.nafu-hl-gz-item { padding: 6px 14px; background: rgba(212,168,83,0.08); border: 1px solid rgba(212,168,83,0.2); border-radius: 10px; font-size: 0.85rem; color: rgba(255,255,255,0.7); }
.nafu-hl-gz-item span { color: var(--nafu-gold); font-weight: 600; }

.nafu-hl-meta { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 20px; }
.nafu-hl-meta-item { padding: 10px 14px; background: rgba(255,255,255,0.03); border-radius: 10px; font-size: 0.85rem; color: rgba(255,255,255,0.65); }
.nafu-hl-meta-item strong { color: var(--nafu-gold); display: block; font-size: 0.75rem; margin-bottom: 2px; text-transform: uppercase; letter-spacing: 1px; }

.nafu-hl-shen { text-align: center; padding: 16px; margin-bottom: 20px; border-radius: 12px; }
.nafu-hl-shen.ji { background: rgba(52,211,153,0.08); border: 1px solid rgba(52,211,153,0.2); }
.nafu-hl-shen.xiong { background: rgba(251,191,36,0.08); border: 1px solid rgba(251,191,36,0.2); }
.nafu-hl-shen-name { font-size: 1.3rem; font-weight: 700; margin-bottom: 4px; }
.nafu-hl-shen.ji .nafu-hl-shen-name { color: #34d399; }
.nafu-hl-shen.xiong .nafu-hl-shen-name { color: #f59e0b; }
.nafu-hl-shen-type { font-size: 0.8rem; margin-bottom: 8px; }
.nafu-hl-shen-desc { font-size: 0.85rem; color: rgba(255,255,255,0.6); line-height: 1.6; }

.nafu-hl-yiji { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 20px; }
.nafu-hl-yi, .nafu-hl-ji { padding: 16px; border-radius: 12px; }
.nafu-hl-yi { background: rgba(52,211,153,0.06); border: 1px solid rgba(52,211,153,0.15); }
.nafu-hl-ji { background: rgba(248,113,113,0.06); border: 1px solid rgba(248,113,113,0.15); }
.nafu-hl-yiji-title { font-size: 0.85rem; font-weight: 700; margin-bottom: 8px; letter-spacing: 2px; }
.nafu-hl-yi .nafu-hl-yiji-title { color: #34d399; }
.nafu-hl-ji .nafu-hl-yiji-title { color: #f87171; }
.nafu-hl-yiji-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.nafu-hl-yi-tag { padding: 3px 10px; border-radius: 6px; font-size: 0.8rem; }
.nafu-hl-yi .nafu-hl-yi-tag { background: rgba(52,211,153,0.1); color: #6ee7b7; }
.nafu-hl-ji .nafu-hl-yi-tag { background: rgba(248,113,113,0.1); color: #fca5a5; }

.nafu-hl-directions { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 20px; }
.nafu-hl-dir { flex: 1; min-width: 120px; padding: 10px 14px; background: rgba(212,168,83,0.06); border: 1px solid rgba(212,168,83,0.15); border-radius: 10px; text-align: center; }
.nafu-hl-dir-label { font-size: 0.75rem; color: rgba(255,255,255,0.5); margin-bottom: 2px; }
.nafu-hl-dir-value { font-size: 0.95rem; color: var(--nafu-gold); font-weight: 600; }

.nafu-hl-pengzu { padding: 12px 16px; background: rgba(255,255,255,0.03); border-radius: 10px; font-size: 0.8rem; color: rgba(255,255,255,0.5); line-height: 1.8; text-align: center; }

.nafu-hl-loading { text-align: center; padding: 40px; color: rgba(255,255,255,0.5); }
.nafu-hl-error { text-align: center; padding: 20px; color: #f87171; font-size: 0.9rem; }

/* ==================== 签文朗读 ==================== */
.nafu-tts-reading { background: rgba(212,168,83,0.08) !important; border-left: 3px solid var(--nafu-gold) !important; transition: all 0.3s ease; border-radius: 8px; padding-left: 12px !important; }
.nafu-poem.nafu-tts-reading { padding-left: 36px !important; }
.nafu-tts-play-btn { display: inline-flex; align-items: center; gap: 8px; padding: 12px 32px; background: linear-gradient(135deg, var(--nafu-gold), #f59e0b); color: #1e293b; font-size: 1rem; font-weight: 700; border: none; border-radius: 50px; cursor: pointer; transition: all 0.3s; box-shadow: 0 4px 20px rgba(212,168,83,0.3); letter-spacing: 2px; }
.nafu-tts-play-btn:hover { transform: translateY(-2px); box-shadow: 0 6px 25px rgba(212,168,83,0.5); }
.nafu-tts-play-btn .nafu-tts-icon { font-size: 1.2rem; }
.nafu-tts-play-btn.nafu-tts-playing { background: linear-gradient(135deg, #10b981, #059669); color: white; animation: nafuTtsPulse 1.5s infinite; }
.nafu-tts-play-btn.nafu-tts-paused { background: linear-gradient(135deg, #f59e0b, #d97706); color: white; }
@keyframes nafuTtsPulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(16,185,129,0.4); } 50% { box-shadow: 0 0 0 10px rgba(16,185,129,0); } }

@media (max-width: 768px) {
    .nafu-hl-meta { grid-template-columns: 1fr; }
    .nafu-hl-yiji { grid-template-columns: 1fr; }
    .nafu-hl-ganzhi { gap: 8px; }
    .nafu-hl-card { padding: 24px 16px; }
}

/* ==================== 全局环境粒子 ==================== */
.nafu-ambient-particles { position: fixed; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: 0; overflow: hidden; }
.nafu-ambient-particle { position: absolute; width: 3px; height: 3px; background: var(--nafu-gold-light); border-radius: 50%; opacity: 0; animation: nafuAmbientFloat 12s infinite ease-in-out; box-shadow: 0 0 4px var(--nafu-gold-light); }
@keyframes nafuAmbientFloat { 0% { opacity: 0; transform: translateY(100vh) translateX(0); } 8% { opacity: 0.4; } 50% { opacity: 0.25; transform: translateY(50vh) translateX(20px); } 92% { opacity: 0.35; } 100% { opacity: 0; transform: translateY(-20px) translateX(-10px); } }

/* ==================== 上上签庆祝特效 ==================== */
.nafu-celebration-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: 9999; overflow: hidden; }
.nafu-confetti { position: absolute; opacity: 0; animation: nafuConfettiFall 3s ease-out forwards; }
@keyframes nafuConfettiFall { 0% { opacity: 1; transform: translateY(-20px) rotate(0deg) scale(0); } 15% { opacity: 1; transform: translateY(10vh) rotate(180deg) scale(1.2); } 100% { opacity: 0; transform: translateY(110vh) rotate(720deg) scale(0.5); } }

/* 签文卡片层级光晕 */
.nafu-result-card.nafu-tier-glow-great { box-shadow: 0 0 40px rgba(251,191,36,0.3), 0 0 80px rgba(251,191,36,0.15); animation: nafuUnfold 1s ease-out, nafuGreatGlow 2s ease-in-out infinite alternate; }
@keyframes nafuGreatGlow { from { box-shadow: 0 0 30px rgba(251,191,36,0.2), 0 0 60px rgba(251,191,36,0.1); } to { box-shadow: 0 0 50px rgba(251,191,36,0.4), 0 0 100px rgba(251,191,36,0.2); } }
.nafu-result-card.nafu-tier-glow-upper { box-shadow: 0 0 25px rgba(52,211,153,0.2); }
.nafu-result-card.nafu-tier-glow-middle { box-shadow: 0 0 15px rgba(129,140,248,0.15); }

/* 古法签提示 */
.nafu-fallback-hint { text-align: center; padding: 10px 16px; background: rgba(212,168,83,0.1); border: 1px solid rgba(212,168,83,0.25); border-radius: 10px; color: var(--nafu-gold); font-size: 0.85rem; margin-bottom: 16px; }