/* ====================================================
   字在其名 Mobile CSS — 雍容古典版
   ==================================================== */

:root {
    --china-red: #9B2335;
    --china-red-dark: #7A1A2A;
    --gold: #C4A54B;
    --gold-light: #E8D48B;
    --cream: #F7F4EF;
    --cream-dark: #EDE8E0;
    --ink: #2C2420;
    --ink-light: #5A4E48;
    --lotus: #D4A5A5;
    --paper: #FAF8F5;
    --tab-height: 60px;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent;
}

html, body {
    width: 100%;
    height: 100%;
    overflow-x: hidden;
}

body {
    font-family: 'Noto Sans SC', -apple-system, BlinkMacSystemFont, sans-serif;
    background: var(--cream);
    color: var(--ink);
    line-height: 1.6;
    padding-bottom: var(--tab-height);
    -webkit-font-smoothing: antialiased;
    background-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23noise)' opacity='0.03'/%3E%3C/svg%3E");
}


/* ====================================================
   云纹背景动画
   ==================================================== */
.cloud-pattern {
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    pointer-events: none;
    z-index: 0;
    opacity: 0.06;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='400' viewBox='0 0 400 400'%3E%3Cpath d='M80 200c-30-50-10-90 30-100s90 15 95 55-10 75-55 80-90-15-70-35z' fill='%239B2335' opacity='0.4'/%3E%3Cpath d='M240 280c-25-40-5-70 25-80s70 15 75 45-10 60-45 65-70-15-55-30z' fill='%239B2335' opacity='0.3'/%3E%3C/svg%3E");
    animation: cloudDrift 30s ease-in-out infinite;
}

@keyframes toastIn {
    from { opacity: 0; transform: translateX(-50%) translateY(12px); }
    to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}

@keyframes cloudDrift {
    0%, 100% { transform: translateY(0) translateX(0); }
    33% { transform: translateY(-10px) translateX(5px); }
    66% { transform: translateY(5px) translateX(-5px); }
}


/* ====================================================
   页面切换
   ==================================================== */
.mobile-main {
    position: relative;
    z-index: 1;
}

.page {
    display: none;
    opacity: 0;
    visibility: hidden;
    animation: pageIn 0.35s cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
}

.page.active {
    display: block;
    opacity: 1;
    visibility: visible;
}

@keyframes pageIn {
    from { opacity: 0; transform: translateY(12px); }
    to { opacity: 1; transform: translateY(0); }
}


/* ====================================================
   印章元素
   ==================================================== */
.stamp {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 2.5px solid var(--china-red);
    color: var(--china-red);
    border-radius: 4px;
    font-weight: 700;
    line-height: 1;
    font-size: 11px;
    padding: 3px 6px;
    opacity: 0.85;
    transform: rotate(-3deg);
    user-select: none;
}

.stamp-lg {
    border-width: 3px;
    font-size: 14px;
    padding: 5px 10px;
}

.stamp-xl {
    border-width: 3.5px;
    font-size: 18px;
    padding: 8px 14px;
    transform: rotate(-5deg);
}


/* ====================================================
   底部 Tab Bar
   ==================================================== */
.bottom-tab-bar {
    position: fixed;
    bottom: 0; left: 0; right: 0;
    height: var(--tab-height);
    background: rgba(247, 244, 239, 0.98);
    display: flex;
    align-items: center;
    justify-content: space-around;
    z-index: 1000;
    box-shadow: 0 -1px 0 rgba(155, 35, 53, 0.08), 0 -4px 20px rgba(0,0,0,0.06);
    padding-bottom: env(safe-area-inset-bottom, 0);
    border-top: 1px solid rgba(155, 35, 53, 0.08);
    /* 强制 GPU 合成，解决 iOS Safari fixed 元素触摸问题 */
    -webkit-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);
    will-change: transform;
}

.tab-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    padding: 8px 0;
    text-decoration: none;
    color: var(--ink-light);
    transition: color 0.25s;
    position: relative;
    /* 提升触摸响应，消除 300ms 点击延迟 */
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}

.tab-item::before {
    content: '';
    position: absolute;
    top: 0; left: 50%; right: 50%;
    height: 2.5px;
    background: linear-gradient(90deg, var(--china-red), var(--china-red-dark));
    border-radius: 0 0 2px 2px;
    transition: left 0.3s cubic-bezier(0.22, 0.61, 0.36, 1), right 0.3s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.tab-item.active {
    color: var(--china-red);
}

.tab-item.active::before {
    left: 20%; right: 20%;
}

.tab-icon {
    font-size: 22px;
    line-height: 1;
}

.tab-label {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.5px;
}


/* ====================================================
   Tab 1: 首页 Hero
   ==================================================== */
.mobile-hero {
    position: relative;
    background:
        radial-gradient(ellipse at 20% 80%, rgba(155, 35, 53, 0.12) 0%, transparent 60%),
        radial-gradient(ellipse at 80% 20%, rgba(196, 165, 75, 0.08) 0%, transparent 50%),
        linear-gradient(170deg, var(--paper) 0%, var(--cream) 100%);
    padding: 60px 24px 48px;
    text-align: center;
    overflow: hidden;
}

/* 水墨晕染效果 */
.mobile-hero::before {
    content: '';
    position: absolute;
    bottom: -40px;
    left: -20%;
    width: 140%;
    height: 80px;
    background: radial-gradient(ellipse, rgba(155, 35, 53, 0.06) 0%, transparent 70%);
    border-radius: 50% 50% 0 0;
    pointer-events: none;
}

.mobile-hero .stamp {
    position: absolute;
    top: 20px;
    right: 20px;
    font-size: 13px;
    color: var(--china-red);
    border-color: var(--china-red);
}

.mobile-title {
    font-family: 'Ma Shan Zheng', cursive;
    font-size: 52px;
    font-weight: 400;
    letter-spacing: 6px;
    color: var(--china-red);
    margin-bottom: 10px;
    text-shadow: 0 2px 8px rgba(155, 35, 53, 0.15);
    animation: titleIn 0.8s cubic-bezier(0.22, 0.61, 0.36, 1) both;
}

@keyframes titleIn {
    from { opacity: 0; letter-spacing: 20px; }
    to { opacity: 1; letter-spacing: 6px; }
}

.mobile-subtitle {
    font-size: 14px;
    color: var(--ink-light);
    letter-spacing: 4px;
    font-weight: 300;
    margin-bottom: 32px;
    animation: fadeSlideUp 0.6s 0.2s cubic-bezier(0.22, 0.61, 0.36, 1) both;
}

.mobile-cta {
    display: inline-block;
    background: linear-gradient(135deg, var(--china-red) 0%, var(--china-red-dark) 100%);
    color: white;
    padding: 16px 52px;
    border-radius: 50px;
    font-size: 16px;
    font-weight: 600;
    border: none;
    cursor: pointer;
    box-shadow: 0 4px 20px rgba(155, 35, 53, 0.3);
    transition: transform 0.2s, box-shadow 0.2s;
    letter-spacing: 2px;
    animation: fadeSlideUp 0.6s 0.35s cubic-bezier(0.22, 0.61, 0.36, 1) both;
}

.mobile-cta:active {
    transform: scale(0.96);
    box-shadow: 0 2px 12px rgba(155, 35, 53, 0.3);
}

@keyframes fadeSlideUp {
    from { opacity: 0; transform: translateY(16px); }
    to { opacity: 1; transform: translateY(0); }
}


/* ====================================================
   统计数字（牌匾风格）
   ==================================================== */
.mobile-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
    padding: 0 16px;
    margin-top: -20px;
    position: relative;
    z-index: 2;
}

.stat-item {
    background: var(--paper);
    border: 1.5px solid rgba(155, 35, 53, 0.12);
    border-radius: 10px;
    padding: 14px 6px 10px;
    text-align: center;
    box-shadow: 0 2px 12px rgba(0,0,0,0.06);
    transition: transform 0.2s;
}

.stat-item:active {
    transform: scale(0.97);
}

.stat-num {
    font-family: 'Ma Shan Zheng', cursive;
    font-size: 22px;
    color: var(--gold);
    line-height: 1.1;
    margin-bottom: 4px;
}

.stat-label {
    font-size: 10px;
    color: var(--ink-light);
    letter-spacing: 0.5px;
}


/* ====================================================
   快速入口
   ==================================================== */
.quick-entry {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    padding: 20px 16px;
}

.entry-card {
    background: var(--paper);
    border-radius: 14px;
    padding: 18px 14px;
    text-decoration: none;
    color: var(--ink);
    box-shadow: 0 2px 12px rgba(0,0,0,0.06);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 6px;
    transition: transform 0.2s, box-shadow 0.2s;
    border: 1.5px solid transparent;
    position: relative;
    overflow: hidden;
}

.entry-card:active {
    transform: scale(0.97);
}

.entry-card.primary {
    background: linear-gradient(145deg, var(--china-red) 0%, var(--china-red-dark) 100%);
    color: white;
    grid-column: span 2;
    flex-direction: row;
    justify-content: flex-start;
    padding: 20px 20px;
    gap: 16px;
    border-color: transparent;
    box-shadow: 0 4px 20px rgba(155, 35, 53, 0.25);
}

.entry-card.primary .entry-title {
    color: white;
}

.entry-card.primary .entry-desc {
    color: rgba(255,255,255,0.75);
}

.entry-icon {
    font-size: 34px;
    flex-shrink: 0;
}

.entry-title {
    font-size: 15px;
    font-weight: 700;
    color: var(--ink);
}

.entry-desc {
    font-size: 12px;
    color: var(--ink-light);
}

.entry-card .stamp {
    position: absolute;
    bottom: 8px;
    right: 10px;
    opacity: 0.6;
    font-size: 10px;
}


/* ====================================================
   信任背书
   ==================================================== */
.trust-section {
    padding: 16px 16px 8px;
}

.section-title {
    font-size: 16px;
    font-weight: 700;
    color: var(--ink);
    margin-bottom: 14px;
    text-align: center;
    letter-spacing: 2px;
    position: relative;
}

.section-title::before,
.section-title::after {
    content: '——';
    color: var(--gold);
    margin: 0 8px;
    font-weight: 300;
}

.trust-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.trust-item {
    background: var(--paper);
    border-radius: 14px;
    padding: 18px 14px;
    text-align: center;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
    border: 1px solid rgba(155, 35, 53, 0.06);
}

.trust-icon {
    font-size: 30px;
    margin-bottom: 8px;
}

.trust-text {
    font-size: 14px;
    font-weight: 700;
    color: var(--ink);
    margin-bottom: 3px;
}

.trust-sub {
    font-size: 11px;
    color: var(--ink-light);
}


/* ====================================================
   Tab 2: 起名
   ==================================================== */
.naming-tab-header {
    background:
        radial-gradient(ellipse at 50% 100%, rgba(155, 35, 53, 0.1) 0%, transparent 60%),
        linear-gradient(170deg, var(--paper) 0%, var(--cream) 100%);
    color: var(--china-red);
    padding: 56px 24px 32px;
    text-align: center;
    position: relative;
}

.naming-tab-header::after {
    content: '';
    position: absolute;
    bottom: 0; left: 10%; right: 10%;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--gold), transparent);
}

.naming-tab-title {
    font-family: 'Ma Shan Zheng', cursive;
    font-size: 38px;
    font-weight: 400;
    letter-spacing: 4px;
    color: var(--china-red);
    margin-bottom: 6px;
}

.naming-tab-sub {
    font-size: 13px;
    color: var(--ink-light);
    letter-spacing: 1px;
}


/* 表单 */
.mobile-form {
    padding: 20px 16px 8px;
}

.mobile-form .form-group {
    margin-bottom: 14px;
}

.mobile-form label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: var(--ink);
    margin-bottom: 7px;
    letter-spacing: 1px;
}

.mobile-form input,
.mobile-form select {
    width: 100%;
    padding: 14px 16px;
    border: 1.5px solid rgba(155, 35, 53, 0.15);
    border-radius: 12px;
    font-size: 16px;
    font-family: inherit;
    background: var(--paper);
    color: var(--ink);
    transition: border-color 0.2s, box-shadow 0.2s;
    -webkit-appearance: none;
    appearance: none;
}

.mobile-form input:focus,
.mobile-form select:focus {
    outline: none;
    border-color: var(--china-red);
    box-shadow: 0 0 0 3px rgba(155, 35, 53, 0.08);
}

.mobile-form input.error,
.mobile-form select.error {
    border-color: #c0392b;
    animation: shake 0.3s;
}

@keyframes shake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-4px); }
    75% { transform: translateX(4px); }
}

.mobile-form select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath fill='%239B2335' d='M5 6L0 0h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    padding-right: 36px;
    cursor: pointer;
}

.form-row-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.error-msg {
    color: #c0392b;
    font-size: 12px;
    margin-top: 5px;
    min-height: 16px;
}

.submit-btn {
    width: 100%;
    padding: 16px;
    background: linear-gradient(135deg, var(--china-red) 0%, var(--china-red-dark) 100%);
    color: white;
    border: none;
    border-radius: 14px;
    font-size: 17px;
    font-weight: 600;
    cursor: pointer;
    margin-top: 6px;
    box-shadow: 0 4px 20px rgba(155, 35, 53, 0.25);
    transition: transform 0.15s, box-shadow 0.15s;
    letter-spacing: 2px;
}

.submit-btn:active {
    transform: scale(0.97);
}

.privacy-note {
    text-align: center;
    font-size: 11px;
    color: var(--ink-light);
    padding: 0 16px 16px;
    letter-spacing: 0.5px;
}


/* 结果区域 */
.results-section {
    padding: 0 16px 20px;
}

.results-header {
    font-size: 15px;
    color: var(--ink-light);
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(155, 35, 53, 0.1);
    display: flex;
    align-items: center;
    gap: 8px;
}

.results-header strong {
    color: var(--china-red);
    font-size: 22px;
}

.name-cards {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.name-card {
    background: var(--paper);
    border-radius: 16px;
    padding: 20px;
    box-shadow: 0 2px 14px rgba(0,0,0,0.07);
    cursor: pointer;
    transition: transform 0.2s, box-shadow 0.2s;
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(196, 165, 75, 0.15);
}

.name-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--china-red), var(--gold));
    opacity: 0;
    transition: opacity 0.2s;
}

.name-card.high-score::before {
    opacity: 1;
}

.name-card:active {
    transform: scale(0.98);
}

.name-card .stamp {
    position: absolute;
    top: 14px;
    right: 14px;
    font-size: 11px;
}

.name-card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
}

.name-char {
    font-family: 'Ma Shan Zheng', cursive;
    font-size: 36px;
    color: var(--china-red);
    line-height: 1;
}

.name-pinyin {
    font-size: 13px;
    color: var(--ink-light);
    margin-left: 8px;
}

.score-badge {
    background: linear-gradient(135deg, var(--gold), var(--gold-light));
    color: white;
    padding: 4px 14px;
    border-radius: 50px;
    font-size: 13px;
    font-weight: 700;
}

.name-source {
    font-size: 12px;
    color: var(--gold);
    margin-bottom: 6px;
    letter-spacing: 0.5px;
}

.name-meaning {
    font-size: 13px;
    color: var(--ink);
    line-height: 1.6;
}

.name-tags {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    margin-top: 10px;
}

.name-tag {
    background: var(--cream);
    border: 1px solid rgba(155, 35, 53, 0.1);
    padding: 3px 10px;
    border-radius: 50px;
    font-size: 11px;
    color: var(--ink-light);
}

/* 升级引导 */
.upgrade-section {
    margin-top: 24px;
    padding: 0 4px;
}

.upgrade-box {
    background: linear-gradient(135deg, rgba(155, 35, 53, 0.04), rgba(196, 165, 75, 0.04));
    border: 1.5px solid rgba(155, 35, 53, 0.12);
    border-radius: 16px;
    padding: 22px 18px;
    text-align: center;
}

.upgrade-title {
    font-size: 16px;
    font-weight: 700;
    color: var(--china-red);
    margin-bottom: 6px;
    letter-spacing: 1px;
}

.upgrade-desc {
    font-size: 13px;
    color: var(--ink-light);
    margin-bottom: 16px;
}

.upgrade-btn {
    display: inline-block;
    padding: 13px 32px;
    background: linear-gradient(135deg, var(--china-red), var(--china-red-dark));
    color: white;
    border: none;
    border-radius: 50px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 4px 16px rgba(155, 35, 53, 0.25);
    letter-spacing: 1px;
    transition: transform 0.15s;
}

.upgrade-btn:active {
    transform: scale(0.97);
}


/* ====================================================
   Tab 3: 典籍
   ==================================================== */
.page-header-simple {
    background: linear-gradient(170deg, var(--paper) 0%, var(--cream) 100%);
    color: var(--china-red);
    padding: 56px 24px 32px;
    text-align: center;
    position: relative;
}

.page-header-simple::after {
    content: '';
    position: absolute;
    bottom: 0; left: 10%; right: 10%;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--gold), transparent);
}

.page-title-sm {
    font-family: 'Ma Shan Zheng', cursive;
    font-size: 36px;
    font-weight: 400;
    letter-spacing: 4px;
    color: var(--china-red);
    margin-bottom: 6px;
}

.page-sub-sm {
    font-size: 13px;
    color: var(--ink-light);
    letter-spacing: 1px;
}

.classics-grid {
    padding: 16px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.classic-card {
    background: var(--paper);
    border-radius: 14px;
    padding: 18px 12px;
    text-align: center;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
    cursor: pointer;
    transition: transform 0.2s;
    border: 1px solid rgba(155, 35, 53, 0.06);
    position: relative;
    overflow: hidden;
}

.classic-card:active {
    transform: scale(0.97);
}

.classic-icon {
    font-size: 38px;
    margin-bottom: 8px;
}

.classic-name {
    font-size: 16px;
    font-weight: 700;
    color: var(--ink);
    margin-bottom: 4px;
    font-family: 'Ma Shan Zheng', cursive;
    letter-spacing: 2px;
}

.classic-desc {
    font-size: 12px;
    color: var(--ink-light);
    line-height: 1.4;
}

.classic-usage {
    font-size: 11px;
    color: var(--gold);
    margin-top: 8px;
    font-weight: 600;
    letter-spacing: 0.5px;
}

.classic-card .stamp {
    position: absolute;
    top: 8px;
    right: 8px;
    font-size: 10px;
}


/* ====================================================
   Tab 4: 我的
   ==================================================== */
.my-section {
    padding: 20px 16px;
}

.section-title-sm {
    font-size: 15px;
    font-weight: 700;
    color: var(--ink);
    margin-bottom: 14px;
    letter-spacing: 1px;
}

.my-quick-btns {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
}

.my-btn {
    background: var(--paper);
    border-radius: 14px;
    padding: 16px 6px;
    text-align: center;
    text-decoration: none;
    color: var(--ink);
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    transition: transform 0.2s;
    border: 1px solid rgba(155, 35, 53, 0.06);
}

.my-btn:active {
    transform: scale(0.95);
}

.my-btn-icon {
    font-size: 26px;
}

.my-btn-text {
    font-size: 11px;
    color: var(--ink-light);
    font-weight: 500;
}

.about-mini {
    background: var(--paper);
    border-radius: 16px;
    padding: 20px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
    border: 1px solid rgba(155, 35, 53, 0.06);
}

.about-mini p {
    font-size: 13px;
    color: var(--ink-light);
    line-height: 1.8;
    margin-bottom: 16px;
}

.about-stats {
    display: flex;
    justify-content: space-around;
}

.about-stat {
    text-align: center;
}

.about-stat-num {
    font-size: 22px;
    font-weight: 700;
    color: var(--gold);
    font-family: 'Ma Shan Zheng', cursive;
}

.about-stat-label {
    font-size: 11px;
    color: var(--ink-light);
    margin-top: 2px;
}


/* ====================================================
   加载动画（水墨扩散）
   ==================================================== */
.loading-overlay {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(247, 244, 239, 0.95);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 2000;
    backdrop-filter: blur(4px);
}

.loading-overlay.active {
    display: flex;
}

.loading-ink {
    position: relative;
    width: 200px;
    height: 200px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 24px;
}

.ink-blob {
    width: 80px;
    height: 80px;
    border-radius: 60% 40% 50% 50% / 50% 60% 40% 50%;
    background: radial-gradient(circle at 40% 40%, var(--china-red), var(--china-red-dark));
    animation: inkPulse 1.8s ease-in-out infinite;
    box-shadow: 0 0 40px rgba(155, 35, 53, 0.2);
}

@keyframes inkPulse {
    0%, 100% {
        transform: scale(1) rotate(0deg);
        border-radius: 60% 40% 50% 50% / 50% 60% 40% 50%;
    }
    33% {
        transform: scale(1.15) rotate(5deg);
        border-radius: 50% 50% 40% 60% / 40% 50% 60% 50%;
    }
    66% {
        transform: scale(1.08) rotate(-3deg);
        border-radius: 45% 55% 55% 45% / 55% 45% 45% 55%;
    }
}

.loading-title {
    font-family: 'Ma Shan Zheng', cursive;
    font-size: 22px;
    color: var(--china-red);
    text-align: center;
    letter-spacing: 2px;
}

.loading-steps {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
    max-width: 220px;
    margin-top: 20px;
}

.load-step {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
    color: var(--ink-light);
    opacity: 0.4;
    transition: opacity 0.4s, color 0.4s;
}

.load-step.active {
    opacity: 1;
    color: var(--china-red);
}

.load-step.done {
    opacity: 0.5;
    color: var(--ink-light);
}

.ls-icon {
    font-size: 18px;
    width: 26px;
    text-align: center;
    flex-shrink: 0;
}

.loading-bar-wrap {
    width: 100%;
    max-width: 220px;
    margin-top: 16px;
}

.loading-bar {
    width: 100%;
    height: 3px;
    background: var(--cream-dark);
    border-radius: 2px;
    overflow: hidden;
}

.loading-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--china-red), var(--gold));
    border-radius: 2px;
    width: 0%;
    transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.loading-pct {
    text-align: center;
    font-size: 12px;
    color: var(--ink-light);
    margin-top: 8px;
}


/* ====================================================
   弹窗（卷轴风格）
   ==================================================== */
.modal-overlay {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(44, 36, 32, 0.6);
    z-index: 3000;
    display: none;
    opacity: 0;
    transition: opacity 0.3s;
    backdrop-filter: blur(2px);
}

.modal-overlay.active {
    display: block;
    opacity: 1;
}

.modal-container {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 3001;
    display: none;
    opacity: 0;
    transition: opacity 0.3s;
    pointer-events: none;
}

.modal-container.active {
    display: block;
    opacity: 1;
    pointer-events: auto;
}

.modal-sheet {
    padding-bottom: calc(16px + env(safe-area-inset-bottom));
    position: absolute;
    bottom: 0; left: 0; right: 0;
    background: var(--paper);
    border-radius: 20px 20px 0 0;
    max-height: 85vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    transform: translateY(100%);
    transition: transform 0.35s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.modal-container.active .modal-sheet {
    transform: translateY(0);
}

.modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 20px 16px;
    border-bottom: 1px solid rgba(155, 35, 53, 0.08);
    position: sticky;
    top: 0;
    background: var(--paper);
    z-index: 1;
}

.modal-title {
    font-size: 17px;
    font-weight: 700;
    color: var(--ink);
    letter-spacing: 1px;
}

.modal-close {
    width: 34px;
    height: 34px;
    border: none;
    background: var(--cream);
    border-radius: 50%;
    font-size: 22px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--ink);
    line-height: 1;
    flex-shrink: 0;
}

.modal-content {
    padding: 20px;
    overflow-y: auto;
}


/* 套餐卡片 */
.package-card {
    background: var(--cream);
    border-radius: 16px;
    padding: 22px 18px;
    margin-bottom: 12px;
    text-align: center;
    border: 1.5px solid rgba(155, 35, 53, 0.1);
}

.package-card.featured {
    background: linear-gradient(135deg, var(--china-red), var(--china-red-dark));
    border-color: transparent;
    color: white;
}

.package-card.featured .package-name,
.package-card.featured .package-price {
    color: white;
}

.package-card.featured .package-desc {
    color: rgba(255,255,255,0.8);
}

.package-name {
    font-size: 16px;
    font-weight: 700;
    color: var(--china-red);
    margin-bottom: 6px;
    letter-spacing: 1px;
}

.package-price {
    font-size: 30px;
    font-weight: 700;
    color: var(--china-red);
    margin-bottom: 14px;
}

.package-desc {
    font-size: 13px;
    color: var(--ink-light);
    line-height: 1.8;
    margin-bottom: 14px;
}

.package-btn {
    width: 100%;
    padding: 13px;
    border: none;
    border-radius: 10px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
}

.package-btn.primary {
    background: linear-gradient(135deg, var(--china-red), var(--china-red-dark));
    color: white;
}

.package-btn.secondary {
    background: var(--cream-dark);
    color: var(--ink);
}


/* ====================================================
   辅助
   ==================================================== */
.text-red { color: var(--china-red); }
.text-gold { color: var(--gold); }
.text-center { text-align: center; }
.mt-16 { margin-top: 16px; }
.mb-16 { margin-bottom: 16px; }

/* 命名手记卡片 */
.note-card {
    background: var(--cream);
    border-radius: 12px;
    padding: 14px;
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.note-card:active {
    transform: scale(0.98);
    opacity: 0.8;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}
.note-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--ink);
    margin-bottom: 4px;
}
.note-desc {
    font-size: 11px;
    color: var(--ink-light);
    line-height: 1.5;
}

/* ================================================
   Tab 1: 遇见页
   ================================================ */

/* Hero */
.discover-hero {
    padding: 40px 20px 20px;
    text-align: center;
    position: relative;
}
.hero-stamp {
    font-family: 'Ma Shan Zheng', cursive;
    font-size: 14px;
    color: var(--gold);
    letter-spacing: 3px;
    margin-bottom: 12px;
}
.hero-main {
    font-family: 'Ma Shan Zheng', cursive;
    font-size: 28px;
    color: var(--china-red);
    line-height: 1.4;
    margin-bottom: 10px;
}
.hero-sub {
    font-size: 13px;
    color: var(--ink-light);
    line-height: 1.6;
}

/* Slogan tags */
.hero-slogan {
    font-size: 15px;
    color: var(--china-red);
    font-weight: 600;
    margin-top: 8px;
    letter-spacing: 1px;
}

.slogan-tag {
    font-size: 12px;
    color: var(--china-red);
    opacity: 0.7;
    margin-top: 4px;
}

.submit-slogan {
    font-size: 12px;
    color: var(--china-red);
    opacity: 0.6;
    text-align: center;
    margin-top: 8px;
    letter-spacing: 0.5px;
}

/* 报告片段展示 */
.report-preview {
    margin: 16px;
    background: white;
    border-radius: 16px;
    box-shadow: 0 2px 12px rgba(155,35,53,0.1);
    overflow: hidden;
}
.report-preview-header {
    padding: 12px 16px;
    background: linear-gradient(135deg, var(--china-red), var(--china-red-dark));
}
.report-preview-badge {
    font-size: 12px;
    color: rgba(255,255,255,0.9);
    letter-spacing: 1px;
}
.report-excerpt {
    padding: 0;
}
.report-excerpt-opening,
.report-excerpt-char,
.report-excerpt-life,
.report-excerpt-source {
    padding: 14px 16px;
    border-bottom: 1px solid var(--cream);
}
.report-label {
    font-size: 11px;
    font-weight: 700;
    color: var(--china-red);
    margin-bottom: 6px;
    letter-spacing: 0.5px;
}
.report-text {
    font-size: 13px;
    line-height: 1.8;
    color: var(--ink);
    font-style: italic;
}
.report-excerpt-footer {
    padding: 12px 16px;
    background: var(--cream);
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.report-name {
    font-family: 'Ma Shan Zheng', cursive;
    font-size: 18px;
    color: var(--china-red);
}
.report-meta {
    font-size: 11px;
    color: var(--ink-light);
}
.btn-sample-report {
    display: block;
    width: calc(100% - 32px);
    margin: 12px 16px 16px;
    padding: 13px;
    border: 1.5px solid var(--china-red);
    border-radius: 10px;
    background: white;
    color: var(--china-red);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
}

/* 套餐对比 */
.package-intro {
    padding: 0 16px;
    margin-top: 8px;
}
.package-intro-header {
    font-size: 14px;
    font-weight: 700;
    color: var(--china-red);
    margin-bottom: 12px;
    text-align: center;
}
.package-intro-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.package-intro-card {
    background: white;
    border-radius: 14px;
    padding: 14px;
    border: 1.5px solid var(--cream-dark);
    cursor: pointer;
    transition: transform 0.15s;
}
.package-intro-card:active { transform: scale(0.98); }
.package-intro-card.featured {
    border: 2px solid var(--china-red);
    background: linear-gradient(135deg, rgba(155,35,53,0.04), rgba(155,35,53,0.02));
}
.package-intro-card.pro {
    border: 2px solid var(--gold);
    background: linear-gradient(135deg, rgba(196,165,75,0.06), rgba(232,212,139,0.04));
}
.package-intro-name {
    font-size: 14px;
    font-weight: 700;
    color: var(--china-red);
    margin-bottom: 2px;
}
.package-intro-price {
    font-size: 20px;
    font-weight: 700;
    color: var(--ink);
    font-family: 'Ma Shan Zheng', cursive;
    margin-bottom: 4px;
}
.package-intro-desc {
    font-size: 12px;
    color: var(--ink-light);
    font-style: italic;
    margin-bottom: 6px;
}
.package-intro-features {
    font-size: 11px;
    color: var(--ink-light);
}

/* 数字背书 */
.stats-row {
    display: flex;
    justify-content: space-around;
    align-items: center;
    padding: 20px 16px;
    margin: 16px;
    background: var(--cream);
    border-radius: 12px;
}
.stats-row-item { text-align: center; }
.stats-row-num {
    font-size: 22px;
    font-weight: 700;
    color: var(--china-red);
    font-family: 'Ma Shan Zheng', cursive;
}
.stats-row-label {
    font-size: 11px;
    color: var(--ink-light);
    margin-top: 2px;
}
.stats-row-divider {
    width: 1px;
    height: 30px;
    background: var(--cream-dark);
}

/* 限量感 */
.quota-bar {
    margin: 0 16px 16px;
    background: linear-gradient(135deg, rgba(155,35,53,0.08), rgba(155,35,53,0.04));
    border-radius: 10px;
    padding: 10px 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.quota-text { font-size: 12px; color: var(--china-red); font-weight: 600; }
.quota-num {
    font-size: 20px;
    font-weight: 700;
    color: var(--china-red);
    font-family: 'Ma Shan Zheng', cursive;
}
.quota-unit { font-size: 12px; color: var(--ink-light); margin-left: 4px; }

/* 命名手记入口 */
.notes-preview {
    margin: 0 16px 16px;
    background: var(--cream);
    border-radius: 12px;
    padding: 14px;
    cursor: pointer;
}
.notes-preview-title {
    font-size: 13px;
    font-weight: 700;
    color: var(--china-red);
    margin-bottom: 8px;
}
.notes-preview-item {}
.notes-preview-item-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--ink);
    margin-bottom: 4px;
}
.notes-preview-item-sub { font-size: 11px; color: var(--ink-light); }

/* ================================================
   Tab 2: 起名页
   ================================================ */

.report-promise {
    margin: 0 16px 16px;
    background: linear-gradient(135deg, rgba(155,35,53,0.05), rgba(155,35,53,0.02));
    border-radius: 14px;
    padding: 16px;
    border: 1px solid rgba(155,35,53,0.1);
}
.report-promise-title {
    font-size: 13px;
    font-weight: 700;
    color: var(--china-red);
    margin-bottom: 12px;
}
.report-promise-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}
.report-promise-item {
    display: flex;
    align-items: flex-start;
    gap: 8px;
}
.report-promise-icon { font-size: 18px; flex-shrink: 0; margin-top: 2px; }
.report-promise-text {
    font-size: 12px;
    font-weight: 600;
    color: var(--ink);
    line-height: 1.4;
}
.report-promise-sub {
    font-size: 10px;
    color: var(--ink-light);
    font-weight: 400;
    display: block;
    margin-top: 2px;
}

/* ================================================
   Tab 3: 来处页
   ================================================ */

/* 页面标题区 — 加了一句诗意的副标题 */
.page-origins .page-header-simple {
    padding-bottom: 24px;
}
.page-origins .page-poetic-sub {
    font-size: 12px;
    color: var(--gold);
    letter-spacing: 1px;
    margin-top: 6px;
    font-style: italic;
}

/* 方法论区 — 三步筛选流程 */
.origin-method {
    margin: 0 16px 20px;
}
.method-steps {
    display: flex;
    flex-direction: column;
    gap: 0;
    margin-bottom: 16px;
}
.method-step {
    display: flex;
    gap: 14px;
    position: relative;
}
.method-step + .method-step {
    margin-top: 0;
}
/* 连接线 */
.method-step:not(:last-child)::after {
    content: '';
    position: absolute;
    left: 19px;
    top: 44px;
    bottom: -4px;
    width: 2px;
    background: linear-gradient(180deg, var(--china-red) 0%, rgba(155,35,53,0.15) 100%);
}
.method-step-num {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--china-red), var(--china-red-dark));
    color: white;
    font-size: 16px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 3px 10px rgba(155,35,53,0.25);
    position: relative;
    z-index: 1;
}
.method-step-body {
    flex: 1;
    background: white;
    border-radius: 14px;
    padding: 12px 14px;
    box-shadow: 0 2px 10px rgba(155,35,53,0.06);
    border: 1px solid rgba(155,35,53,0.05);
    margin-bottom: 12px;
}
.method-step-title {
    font-size: 14px;
    font-weight: 700;
    color: var(--china-red);
    margin-bottom: 4px;
    font-family: 'Ma Shan Zheng', cursive;
    letter-spacing: 0.5px;
}
.method-step-title span {
    font-size: 11px;
    color: var(--gold);
    font-weight: 400;
    font-family: 'Noto Sans SC', sans-serif;
    margin-left: 6px;
    letter-spacing: 0;
}
.method-step-desc {
    font-size: 12px;
    color: var(--ink-light);
    line-height: 1.7;
}
.method-step-example {
    font-size: 11px;
    color: var(--china-red);
    margin-top: 6px;
    font-style: italic;
    opacity: 0.8;
}

/* 方法论底部注脚 */
.origin-method-note {
    font-size: 12px;
    color: var(--ink-light);
    line-height: 1.7;
    padding: 12px 14px;
    background: linear-gradient(135deg, rgba(155,35,53,0.04), rgba(196,165,75,0.05));
    border-left: 3px solid var(--gold);
    border-radius: 0 8px 8px 0;
}

/* 典籍分类标题 — 更有气质 */
.origins-category-title {
    font-size: 15px;
    font-weight: 700;
    color: var(--china-red);
    padding: 0 16px;
    margin-bottom: 12px;
    margin-top: 24px;
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: 'Ma Shan Zheng', cursive;
    letter-spacing: 1px;
}
.origins-category-title::before {
    content: '✦';
    font-size: 10px;
    color: var(--gold);
}
.origins-category-title:first-of-type {
    margin-top: 8px;
}

/* 典籍网格 — 第一个卡片大卡片样式 */
.origins-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    padding: 0 16px;
}

/* 分类内第一张卡片 — featured 样式，比其他卡片更突出 */
.classic-card-featured {
    grid-column: 1 / -1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 18px 16px;
    background: linear-gradient(145deg, var(--paper) 0%, rgba(155,35,53,0.04) 100%);
    border: 1.5px solid rgba(155,35,53,0.12);
    text-align: left;
}
.classic-card-featured .classic-icon {
    font-size: 42px;
    margin-bottom: 10px;
}
.classic-card-featured .classic-name {
    font-size: 18px;
    margin-bottom: 6px;
}
.classic-card-featured .classic-desc {
    font-size: 12px;
    margin-bottom: 8px;
}
.classic-card-featured .classic-usage {
    margin-top: 6px;
}

/* 分类内普通小卡片 */
.classic-card-small {
    padding: 12px 10px;
}
.classic-card-small .classic-icon {
    font-size: 28px;
    margin-bottom: 6px;
}
.classic-card-small .classic-name {
    font-size: 14px;
    margin-bottom: 3px;
}
.classic-card-small .classic-desc {
    display: none;
}
.classic-card-small .classic-usage {
    font-size: 10px;
    margin-top: 4px;
}

/* ================================================
   Tab 4: 珍藏页
   ================================================ */

/* 珍藏页头部 — 更有仪式感 */
.treasure-section { padding: 0 16px; }
.treasure-header {
    font-size: 16px;
    font-weight: 700;
    color: var(--china-red);
    margin-bottom: 14px;
    padding-top: 20px;
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: 'Ma Shan Zheng', cursive;
    letter-spacing: 2px;
}
.treasure-header::before {
    content: '◈';
    color: var(--gold);
    font-size: 12px;
}

/* 已珍藏名字卡片 */
.saved-name-card {
    background: white;
    border-radius: 14px;
    padding: 16px;
    margin-bottom: 10px;
    box-shadow: 0 2px 12px rgba(155,35,53,0.07);
    border: 1px solid rgba(155,35,53,0.06);
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.saved-name-card:active {
    transform: scale(0.98);
    box-shadow: 0 1px 6px rgba(155,35,53,0.1);
}
.saved-name-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 8px;
}
.saved-name-main {
    font-family: 'Ma Shan Zheng', cursive;
    font-size: 28px;
    color: var(--china-red);
    letter-spacing: 2px;
    line-height: 1.2;
}
.saved-name-score {
    background: var(--cream);
    color: var(--gold);
    font-size: 11px;
    font-weight: 700;
    padding: 3px 8px;
    border-radius: 20px;
}
.saved-name-from {
    font-size: 11px;
    color: var(--ink-light);
    margin-bottom: 6px;
}
.saved-name-date {
    font-size: 10px;
    color: var(--ink-light);
    opacity: 0.6;
}
.saved-name-tags {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    margin-top: 8px;
}
.saved-name-tag {
    font-size: 10px;
    background: var(--cream);
    color: var(--ink-light);
    padding: 2px 8px;
    border-radius: 20px;
}

/* 空状态 — 更有温度的邀请感 */
.treasure-empty {
    text-align: center;
    padding: 36px 20px;
    background: linear-gradient(145deg, white, var(--cream));
    border-radius: 16px;
    border: 1.5px dashed rgba(155,35,53,0.15);
    display: flex;
    flex-direction: column;
    align-items: center;
}
.treasure-empty-icon {
    font-size: 44px;
    margin-bottom: 12px;
    opacity: 0.8;
}
.treasure-empty-title {
    font-size: 15px;
    font-weight: 700;
    color: var(--china-red);
    margin-bottom: 6px;
    font-family: 'Ma Shan Zheng', cursive;
    letter-spacing: 1px;
}
.treasure-empty-text {
    font-size: 13px;
    font-weight: 600;
    color: var(--ink);
    margin-bottom: 6px;
}
.treasure-empty-sub {
    font-size: 12px;
    color: var(--ink-light);
    line-height: 1.6;
    margin-bottom: 18px;
}
.btn-go-naming {
    padding: 11px 28px;
    border: 1.5px solid var(--china-red);
    border-radius: 25px;
    background: white;
    color: var(--china-red);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}
.btn-go-naming:active {
    background: var(--china-red);
    color: white;
}

.section-divider {
    height: 1px;
    background: var(--cream-dark);
    margin: 0 16px;
}

.history-section { padding: 0 16px; }
.history-header {
    font-size: 14px;
    font-weight: 700;
    color: var(--ink);
    margin: 20px 0 12px;
    display: flex;
    align-items: center;
    gap: 6px;
}
.history-header::before {
    content: '◈';
    color: var(--gold);
    font-size: 10px;
}
.history-list { display: flex; flex-direction: column; gap: 8px; }
.history-group { margin-bottom: 4px; }
.history-group-label {
    font-size: 11px;
    color: var(--gold);
    font-weight: 600;
    letter-spacing: 1px;
    margin-bottom: 6px;
    padding-left: 2px;
}
.history-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 14px;
    background: white;
    border-radius: 12px;
    cursor: pointer;
    transition: background 0.15s ease;
    box-shadow: 0 1px 6px rgba(155,35,53,0.04);
}
.history-item:active { background: var(--cream); }
.history-item-name {
    font-family: 'Ma Shan Zheng', cursive;
    font-size: 22px;
    color: var(--china-red);
    letter-spacing: 1px;
}
.history-item-meta {
    font-size: 11px;
    color: var(--ink-light);
    text-align: right;
}
.history-empty {
    text-align: center;
    padding: 24px 20px;
    color: var(--ink-light);
    font-size: 13px;
    background: white;
    border-radius: 12px;
}

.notes-section { padding: 0 16px; }
.notes-header {
    font-size: 14px;
    font-weight: 700;
    color: var(--ink);
    margin: 20px 0 12px;
    display: flex;
    align-items: center;
    gap: 6px;
}
.notes-header::before {
    content: '✦';
    color: var(--gold);
    font-size: 10px;
}
.notes-list { display: flex; flex-direction: column; gap: 10px; }

.upgrade-prompt { padding: 0 16px; }
.upgrade-prompt-inner {
    background: linear-gradient(145deg, rgba(196,165,75,0.08), rgba(196,165,75,0.03));
    border: 1.5px solid rgba(196,165,75,0.4);
    border-radius: 16px;
    padding: 20px 16px;
    margin: 16px 0;
    position: relative;
    overflow: hidden;
}
.upgrade-prompt-inner::before {
    content: '';
    position: absolute;
    top: -20px; right: -20px;
    width: 90px; height: 90px;
    background: radial-gradient(circle, rgba(196,165,75,0.18), transparent 70%);
    border-radius: 50%;
}
.upgrade-prompt-title {
    font-size: 16px;
    font-weight: 700;
    color: var(--china-red);
    margin-bottom: 6px;
    font-family: 'Ma Shan Zheng', cursive;
    letter-spacing: 1px;
}
.upgrade-prompt-desc {
    font-size: 12px;
    color: var(--ink-light);
    line-height: 1.6;
    margin-bottom: 14px;
}
.upgrade-prompt-features { margin-bottom: 16px; display: flex; flex-direction: column; gap: 7px; }
.upgrade-prompt-feature {
    font-size: 13px;
    color: var(--ink);
    display: flex;
    align-items: center;
    gap: 8px;
}
.upgrade-prompt-feature::before {
    content: '✦';
    color: var(--gold);
    font-size: 10px;
}
.btn-upgrade-pro {
    width: 100%;
    padding: 14px;
    border: none;
    border-radius: 25px;
    background: linear-gradient(135deg, var(--gold), var(--gold-light));
    color: white;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    letter-spacing: 0.5px;
    box-shadow: 0 4px 16px rgba(196,165,75,0.28);
}

.about-section { padding: 0 16px 24px; }
.about-header {
    font-size: 14px;
    font-weight: 700;
    color: var(--ink);
    margin: 20px 0 14px;
    display: flex;
    align-items: center;
    gap: 6px;
}
.about-header::before {
    content: '◈';
    color: var(--gold);
    font-size: 10px;
}
.about-story {
    font-size: 13px;
    line-height: 1.9;
    color: var(--ink-light);
    margin-bottom: 18px;
    padding: 14px;
    background: white;
    border-radius: 12px;
    font-style: italic;
}
.about-team { display: flex; flex-direction: column; gap: 12px; }
.team-member {
    background: white;
    border-radius: 14px;
    padding: 16px;
    box-shadow: 0 2px 10px rgba(155,35,53,0.05);
    border: 1px solid rgba(155,35,53,0.05);
}
.team-member-top {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 10px;
}
.team-avatar {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--china-red), var(--china-red-dark));
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    flex-shrink: 0;
}
.team-name {
    font-size: 15px;
    font-weight: 700;
    color: var(--china-red);
    margin-bottom: 2px;
}
.team-role {
    font-size: 11px;
    color: var(--gold);
    font-weight: 600;
    letter-spacing: 0.5px;
}
.team-desc {
    font-size: 12px;
    color: var(--ink-light);
    line-height: 1.7;
    padding-left: 54px;
    margin-top: -4px;
}

.quick-links {
    display: flex;
    gap: 10px;
    margin-bottom: 16px;
}
.quick-link {
    flex: 1;
    background: var(--cream);
    border-radius: 10px;
    padding: 12px;
    text-align: center;
    cursor: pointer;
}
.quick-link-icon { font-size: 20px; margin-bottom: 4px; }
.quick-link-text { font-size: 12px; color: var(--ink); }

/* 通用（Tab 4 珍藏页命名手记卡片） */
.note-card {
    background: white;
    border-radius: 14px;
    padding: 16px;
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
    box-shadow: 0 2px 8px rgba(155,35,53,0.05);
    border: 1px solid rgba(155,35,53,0.05);
    position: relative;
    overflow: hidden;
}
.note-card::before {
    content: '';
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 3px;
    background: linear-gradient(180deg, var(--china-red), var(--gold));
    opacity: 0.6;
}
.note-card:active { transform: scale(0.98); }
.note-title { font-size: 14px; font-weight: 600; color: var(--ink); margin-bottom: 6px; padding-left: 10px; }
.note-desc { font-size: 12px; color: var(--ink-light); line-height: 1.6; padding-left: 10px; }
.note-arrow { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); color: var(--ink-light); opacity: 0.4; font-size: 14px; }

/* 加载动画新组件 */
.loading-sheet {
    background: white;
    border-radius: 16px;
    padding: 24px;
    width: 280px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.1);
    display: flex;
    flex-direction: column;
    align-items: center;
}
.load-bar-wrap {
    width: 100%;
    max-width: 240px;
    margin-top: 16px;
}
.load-bar {
    width: 0%;
    height: 3px;
    background: linear-gradient(90deg, var(--china-red), var(--gold));
    border-radius: 2px;
    transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}
.load-pct {
    text-align: center;
    font-size: 13px;
    color: var(--china-red);
    font-weight: 600;
    margin-top: 8px;
    font-family: 'Ma Shan Zheng', cursive;
}
.load-annotation {
    text-align: center;
    font-size: 11px;
    color: var(--ink-light);
    margin-top: 8px;
    font-style: italic;
    max-width: 240px;
    line-height: 1.5;
    min-height: 30px;
}

/* 报告结果 */
.results-section { padding: 0 16px 16px; }
.results-header {
    font-size: 14px;
    color: var(--ink);
    padding: 16px 0 12px;
}
.results-header strong { color: var(--china-red); font-family: 'Ma Shan Zheng', cursive; font-size: 18px; }
.name-cards { display: flex; flex-direction: column; gap: 10px; }

/* 升级引导 */
.upgrade-section { margin-top: 16px; }
.upgrade-box {
    background: linear-gradient(135deg, rgba(155,35,53,0.06), rgba(155,35,53,0.03));
    border: 1.5px solid rgba(155,35,53,0.15);
    border-radius: 12px;
    padding: 16px;
    text-align: center;
}
.upgrade-title { font-size: 14px; font-weight: 700; color: var(--china-red); margin-bottom: 6px; }
.upgrade-desc { font-size: 12px; color: var(--ink-light); margin-bottom: 12px; }
.upgrade-btn {
    width: 100%;
    padding: 12px;
    border: none;
    border-radius: 10px;
    background: linear-gradient(135deg, var(--china-red), #a02040);
    color: white;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
}

/* 批量生成更多按钮 */
.more-batch-bar {
    margin: 10px 16px;
    display: flex;
    justify-content: center;
}
.more-batch-btn {
    width: 100%;
    padding: 12px;
    border: 1.5px dashed var(--china-red);
    border-radius: 10px;
    background: white;
    color: var(--china-red);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}
.more-batch-btn:active {
    background: var(--cream);
    transform: scale(0.98);
}

/* 高级选项 */
.advanced-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 0;
    font-size: 12px;
    color: var(--china-red);
    cursor: pointer;
    border-top: 1px dashed rgba(155,35,53,0.2);
    margin-top: 6px;
    letter-spacing: 0.5px;
}
.advanced-toggle-icon {
    font-size: 10px;
    transition: transform 0.2s;
}
.field-hint {
    font-size: 10px;
    color: var(--ink-light);
    margin-top: 3px;
    font-style: italic;
}

/* 标签组 */
.tag-group {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 6px;
}
.tag-btn {
    padding: 5px 12px;
    border-radius: 50px;
    background: var(--cream);
    border: 1.5px solid var(--cream-dark);
    font-size: 12px;
    color: var(--ink);
    cursor: pointer;
    transition: all 0.15s;
    user-select: none;
    min-height: 44px;
    min-width: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.tag-btn.active {
    background: var(--china-red);
    border-color: var(--china-red);
    color: white;
}
.tag-btn:active { transform: scale(0.95); }

/* CTA 区块 */
.cta-block {
    margin: 20px 16px 12px;
    padding: 20px 24px;
    background: linear-gradient(135deg, var(--china-red), #b51e35);
    border-radius: 16px;
    text-align: center;
    cursor: pointer;
    box-shadow: 0 4px 16px rgba(155,35,53,0.3);
}
.cta-main {
    font-size: 18px;
    font-weight: 700;
    color: white;
    margin-bottom: 4px;
}
.cta-sub {
    font-size: 12px;
    color: rgba(255,255,255,0.75);
    letter-spacing: 1px;
}

/* ====================================================
   对比浮动栏
   ==================================================== */
.compare-bar {
    position: fixed;
    bottom: calc(var(--tab-height) + 12px);
    left: 50%;
    transform: translateX(-50%);
    z-index: 200;
    animation: slideUp 0.3s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.compare-bar-inner {
    display: flex;
    align-items: center;
    gap: 14px;
    background: white;
    border: 1.5px solid rgba(155,35,53,0.2);
    border-radius: 50px;
    padding: 10px 20px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.12);
}
.compare-go-btn {
    background: var(--china-red);
    color: white;
    border: none;
    border-radius: 50px;
    padding: 8px 20px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}

/* ====================================================
   名字卡片选中态
   ==================================================== */
.name-card.selected {
    border: 2px solid var(--china-red) !important;
    background: rgba(155,35,53,0.03);
}

/* ====================================================
   高级选项过渡动画
   ==================================================== */
#advancedOptions {
    overflow: hidden;
}
#advancedFields {
    /* 展开/收起用 display 切换，无渐变，避免动画复杂性 */
}

/* ====================================================
   可选字段标签
   ==================================================== */
.field-optional-badge {
    display: inline-block;
    font-size: 10px;
    font-weight: 600;
    color: var(--gold);
    background: rgba(196,165,75,0.12);
    border: 1px solid rgba(196,165,75,0.3);
    border-radius: 20px;
    padding: 1px 7px;
    margin-left: 6px;
    vertical-align: middle;
    letter-spacing: 0.5px;
}

/* ====================================================
   名字卡片勾选（对比功能）
   ==================================================== */
.name-card {
    position: relative;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.name-card.card-selected {
    border-color: var(--china-red) !important;
    box-shadow: 0 0 0 2px rgba(155,35,53,0.15);
}
.compare-check {
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 5;
    cursor: pointer;
    width: 24px;
    height: 24px;
}
.compare-check-box {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 2px solid rgba(155,35,53,0.3);
    background: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 700;
    color: white;
    transition: all 0.15s ease;
}
.compare-check-box.checked {
    background: var(--china-red);
    border-color: var(--china-red);
}
.name-card.card-selected .compare-check-box {
    background: var(--china-red);
    border-color: var(--china-red);
}

/* 名字卡片快捷分享图标 */
.card-quick-share {
    position: absolute;
    top: 8px;
    right: 8px;
    font-size: 13px;
    cursor: pointer;
    opacity: 0.3;
    transition: opacity 0.15s;
    z-index: 3;
    padding: 4px;
    line-height: 1;
}
.card-quick-share:hover { opacity: 0.6; }
.card-quick-share:active { opacity: 1; transform: scale(1.2); }

/* ====================================================
   全新首页 v2 — 字在其名情感化设计
   ==================================================== */

/* --- 开篇英雄区 --- */
.narrative-hero {
    width: 100%;
    background: linear-gradient(165deg, #9B2335 0%, #7a1a27 55%, #4a0d15 100%);
    padding: 64px 28px 52px;
    position: relative;
    overflow: hidden;
}
.narrative-hero::after {
    content: '';
    position: absolute;
    bottom: -40px;
    left: 50%;
    transform: translateX(-50%);
    width: 120%;
    height: 80px;
    background: #F7F4EF;
    border-radius: 50% 50% 0 0;
}
.narrative-stamp {
    font-family: 'Ma Shan Zheng', cursive;
    font-size: 11px;
    color: rgba(255,255,255,0.5);
    letter-spacing: 5px;
    text-transform: uppercase;
    margin-bottom: 28px;
}
.narrative-statement {
    font-family: 'Ma Shan Zheng', cursive;
    font-size: 32px;
    color: #ffffff;
    line-height: 1.7;
    font-weight: 400;
    letter-spacing: 1px;
}

/* --- 桥接区 --- */
.narrative-bridge {
    background: #F7F4EF;
    padding: 44px 28px 16px;
    text-align: center;
}
.narrative-bridge-line {
    font-family: 'Ma Shan Zheng', cursive;
    font-size: 26px;
    color: #2C2420;
    line-height: 1.7;
    margin-bottom: 12px;
}
.narrative-bridge-sub {
    font-size: 18px;
    color: #7a6560;
    letter-spacing: 1px;
    line-height: 1.8;
}

/* --- 礼物宣言 --- */
.narrative-gift {
    background: #F7F4EF;
    padding: 8px 28px 8px;
    text-align: center;
}
.narrative-gift-line {
    font-size: 15px;
    color: #5A4E48;
    line-height: 2;
    font-family: 'Noto Sans SC', sans-serif;
    font-weight: 300;
    letter-spacing: 0.5px;
}

/* --- 我们能做的 --- */
.narrative-ability {
    background: #F7F4EF;
    padding: 8px 28px 44px;
    text-align: center;
}
.narrative-ability-line {
    font-size: 15px;
    color: #5A4E48;
    line-height: 2;
    font-family: 'Noto Sans SC', sans-serif;
    font-weight: 300;
    letter-spacing: 0.5px;
}
.narrative-ability-detail {
    font-size: 14px;
    color: #8a7a75;
}
.narrative-ability-resolve {
    font-family: 'Ma Shan Zheng', cursive;
    font-size: 20px;
    color: #9B2335;
    margin-top: 8px;
    letter-spacing: 1px;
}

/* --- 报告核心卡（情感化展示）--- */
.report-narrative {
    margin: 28px 16px 20px;
    background: #ffffff;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 8px 36px rgba(155,35,53,0.11);
    position: relative;
    z-index: 1;
}
.report-narrative-header {
    padding: 32px 24px 20px;
    text-align: center;
    border-bottom: 1px solid #F7F4EF;
}
.report-narrative-name {
    font-family: 'Ma Shan Zheng', cursive;
    font-size: 56px;
    color: #9B2335;
    line-height: 1.1;
    margin-bottom: 10px;
}
.report-narrative-meta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    flex-wrap: wrap;
}
.report-pinyin {
    font-size: 14px;
    color: #C4A54B;
    font-weight: 500;
    letter-spacing: 1.5px;
    font-family: 'Noto Sans SC', sans-serif;
}
.report-source {
    font-size: 12px;
    color: #bbb;
    font-family: 'Noto Sans SC', sans-serif;
}
.report-narrative-body {
    padding: 24px 24px 20px;
}
.report-inline-label {
    font-size: 10px;
    font-weight: 700;
    color: #C4A54B;
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-top: 20px;
    margin-bottom: 8px;
    font-family: 'Noto Sans SC', sans-serif;
}
.report-inline-label:first-child {
    margin-top: 0;
}
.report-narrative-para {
    font-size: 14px;
    line-height: 2;
    color: #2a2a2a;
    margin-bottom: 6px;
    font-family: 'Noto Sans SC', sans-serif;
    font-weight: 300;
}
.report-narrative-para:last-child {
    margin-bottom: 0;
}

/* --- 完整报告展开 --- */
.narrative-fullreport-wrap {
    margin: 0 16px 20px;
}
.narrative-fullreport-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 14px;
    background: #ffffff;
    border-radius: 14px;
    border: 1.5px solid #E8E0D8;
    cursor: pointer;
    font-size: 13px;
    color: #9B2335;
    font-family: 'Noto Sans SC', sans-serif;
    font-weight: 500;
    transition: background 0.2s, border-color 0.2s;
}
.narrative-fullreport-toggle:active {
    background: #faf5f0;
}
.narrative-fullreport-arrow {
    font-size: 11px;
    transition: transform 0.25s ease;
}
.narrative-fullreport-body {
    background: #ffffff;
    border-radius: 0 0 16px 16px;
    margin-top: -4px;
    padding: 8px 0 0;
}
.narrative-fullreport-section {
    padding: 16px 20px;
    border-bottom: 1px solid #F7F4EF;
}
.narrative-fullreport-section:last-child {
    border-bottom: none;
}
.narrative-fullreport-label {
    font-size: 11px;
    font-weight: 700;
    color: #9B2335;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    margin-bottom: 10px;
    font-family: 'Noto Sans SC', sans-serif;
}
.narrative-fullreport-body p {
    font-size: 13px;
    line-height: 1.95;
    color: #3a3530;
    font-family: 'Noto Sans SC', sans-serif;
    font-weight: 300;
    margin: 0;
}

/* --- 品牌宣言 --- */
.narrative-brand {
    background: #F7F4EF;
    padding: 36px 28px 32px;
    text-align: center;
}
.narrative-brand-line {
    font-size: 13px;
    color: #5A4E48;
    line-height: 2.2;
    font-family: 'Noto Sans SC', sans-serif;
    font-weight: 300;
    letter-spacing: 0.5px;
}
.narrative-brand-line-final {
    color: #9B2335;
    font-family: 'Ma Shan Zheng', cursive;
    font-size: 18px;
    letter-spacing: 1px;
}

/* --- CTA --- */
.narrative-cta-wrap {
    background: #F7F4EF;
    padding: 8px 28px 48px;
    text-align: center;
}
.narrative-cta {
    display: inline-block;
    background: #9B2335;
    color: #ffffff;
    font-size: 15px;
    font-weight: 600;
    padding: 14px 38px;
    border-radius: 50px;
    cursor: pointer;
    letter-spacing: 0.5px;
    font-family: 'Noto Sans SC', sans-serif;
    transition: background 0.2s, transform 0.1s;
    box-shadow: 0 4px 18px rgba(155,35,53,0.3);
}
.narrative-cta:active {
    background: #7a1f2e;
    transform: scale(0.98);
}

/* ===== 响应式断点 ===== */
@media (max-width: 375px) {
    .narrative-hero { padding: 48px 20px 40px; }
    .narrative-statement { font-size: 26px; }
    .narrative-bridge-line { font-size: 22px; }
    .report-narrative-name { font-size: 46px; }
    .narrative-cta { font-size: 14px; padding: 12px 30px; }
}
@media (max-width: 320px) {
    .narrative-hero { padding: 40px 16px 36px; }
    .narrative-statement { font-size: 22px; }
    .narrative-bridge { padding-top: 32px; }
    .report-narrative { margin: 20px 12px 16px; }
    .report-narrative-name { font-size: 40px; }
    .report-narrative-para { font-size: 13px; line-height: 1.9; }
}

@media (prefers-color-scheme: dark) {
    :root {
        --bg: #1a1412;
        --ink: #F7F4EF;
        --ink-light: #A89E98;
        --cream: #2a2420;
        --cream-dark: #1e1a18;
        --paper: #2a2520;
        --china-red: #c9394a;
        --gold: #d4b05b;
        --lotus: #8a5a5a;
    }
    body { background: #1a1412; color: #F7F4EF; }
    .mobile-main { background: #1a1412; }
    .page { background: #1a1412; }
    .narrative-hero { background: linear-gradient(165deg, #3d1520 0%, #2a0f18 55%, #1a0a10 100%); }
    .narrative-bridge, .narrative-gift, .narrative-ability, .narrative-brand, .narrative-cta-wrap { background: #1e1a18; }
    .report-narrative { background: #2a2520; }
    .report-narrative-body { border-top-color: #3a3530; }
    .narrative-fullreport-wrap { background: #1a1412; }
    .bottom-tab-bar { background: #1e1a18; border-top-color: #3a3530; }
    .tab-item { color: #A89E98; }
    .tab-item.active { color: #c9394a; }
}