/* ============================================
   365天趣味存钱法 V4 - UI Redesign
   设计理念：温暖渐变 + 圆润卡片 + 微动画
   ============================================ */

/* ========== Reset & Variables ========== */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

:root {
    /* 主色调 - 暖橙红渐变 */
    --primary: #FF6B6B;
    --primary-light: #ff8a8a;
    --primary-dark: #ee5a52;
    --primary-gradient: linear-gradient(135deg, #FF6B6B 0%, #FFA940 100%);
    --primary-gradient-soft: linear-gradient(135deg, #fff5f5 0%, #fff9f0 100%);

    /* 辅助色 */
    --success: #4ECB73;
    --success-light: #6ee88e;
    --warning: #FFA940;
    --danger: #FF4D4F;
    --info: #4A90D9;
    --wechat: #07C160;

    /* 中性色 */
    --bg: #f0f2f5;
    --bg-card: #ffffff;
    --bg-hover: #f8f9fa;
    --text: #1a1a2e;
    --text-secondary: #555;
    --text-light: #999;
    --text-disabled: #ccc;
    --border: #f0f0f0;
    --border-strong: #e0e0e0;
    --shadow-sm: 0 1px 3px rgba(0,0,0,0.04);
    --shadow: 0 2px 12px rgba(0,0,0,0.06);
    --shadow-lg: 0 8px 30px rgba(0,0,0,0.08);
    --shadow-primary: 0 4px 16px rgba(255,107,107,0.25);

    /* 圆角 */
    --radius-sm: 8px;
    --radius: 12px;
    --radius-lg: 16px;
    --radius-xl: 24px;
    --radius-full: 999px;

    /* 动画 */
    --transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    --bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
}

html { font-size: 16px; }
body {
    font-family: -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Helvetica Neue', 'Segoe UI', sans-serif;
    background: var(--bg);
    color: var(--text);
    font-size: 15px;
    line-height: 1.6;
    max-width: 500px;
    margin: 0 auto;
    min-height: 100vh;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
}

#app { min-height: 100vh; position: relative; }

/* 滚动条隐藏 */
::-webkit-scrollbar { width: 0; height: 0; }

/* ========== Toast ========== */
.toast {
    position: fixed;
    top: 16px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 9999;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 20px;
    border-radius: var(--radius-full);
    font-size: 14px;
    font-weight: 500;
    box-shadow: var(--shadow-lg);
    animation: slideDown 0.3s var(--bounce);
    max-width: 90%;
}
.toast.success { background: var(--success); color: #fff; }
.toast.error { background: var(--danger); color: #fff; }
@keyframes slideDown {
    from { opacity: 0; transform: translate(-50%, -20px); }
    to { opacity: 1; transform: translate(-50%, 0); }
}

/* ========== Buttons ========== */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 14px 28px;
    border: none;
    border-radius: var(--radius-full);
    font-size: 16px;
    font-weight: 600;
    text-decoration: none;
    text-align: center;
    cursor: pointer;
    transition: var(--transition);
    position: relative;
    overflow: hidden;
    letter-spacing: 0.5px;
}
.btn::after {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(255,255,255,0.2);
    opacity: 0;
    transition: opacity 0.2s;
}
.btn:active::after { opacity: 1; }
.btn:active { transform: scale(0.96); }

.btn-primary { background: var(--primary-gradient); color: #fff; box-shadow: var(--shadow-primary); }
.btn-primary:hover { box-shadow: 0 6px 20px rgba(255,107,107,0.35); }

.btn-outline {
    background: transparent;
    border: 2px solid var(--primary);
    color: var(--primary);
}
.btn-outline:active { background: var(--primary); color: #fff; }

.btn-wechat { background: var(--wechat); color: #fff; box-shadow: 0 4px 16px rgba(7,193,96,0.25); }
.btn-wechat:active { box-shadow: 0 2px 8px rgba(7,193,96,0.2); }

.btn-danger { background: var(--danger); color: #fff; box-shadow: 0 4px 12px rgba(255,77,79,0.2); }

.btn-block { display: flex; width: 100%; }
.btn:disabled { opacity: 0.45; cursor: not-allowed; box-shadow: none; }

/* ========== Inputs ========== */
.input {
    width: 100%;
    padding: 14px 18px;
    border: 2px solid var(--border);
    border-radius: var(--radius-sm);
    font-size: 16px;
    transition: var(--transition);
    background: var(--bg-card);
    color: var(--text);
}
.input:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 4px rgba(255,107,107,0.1);
}
.input::placeholder { color: var(--text-disabled); }

/* ========== Welcome Page ========== */
.welcome-page { text-align: center; padding-bottom: 60px; }

.hero {
    padding: 80px 24px 50px;
    background: var(--primary-gradient);
    color: #fff;
    border-radius: 0 0 40px 40px;
    position: relative;
    overflow: hidden;
}
.hero::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -20%;
    width: 200px;
    height: 200px;
    background: rgba(255,255,255,0.1);
    border-radius: 50%;
}
.hero::after {
    content: '';
    position: absolute;
    bottom: -30%;
    left: -10%;
    width: 150px;
    height: 150px;
    background: rgba(255,255,255,0.08);
    border-radius: 50%;
}
.hero-icon {
    font-size: 80px;
    margin-bottom: 16px;
    animation: bounce 2s ease-in-out infinite;
    position: relative;
    z-index: 1;
}
.hero h1 { font-size: 30px; font-weight: 800; margin-bottom: 8px; position: relative; z-index: 1; }
.hero .subtitle { font-size: 16px; opacity: 0.95; position: relative; z-index: 1; }
@keyframes bounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}

.features { padding: 32px 16px 16px; }
.feature-card {
    background: var(--bg-card);
    border-radius: var(--radius-lg);
    padding: 28px 20px;
    margin-bottom: 12px;
    box-shadow: var(--shadow);
    text-align: center;
    transition: var(--transition);
    position: relative;
    overflow: hidden;
}
.feature-card:active { transform: scale(0.98); }
.feature-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--primary-gradient);
    opacity: 0;
    transition: opacity 0.3s;
}
.feature-card:active::before { opacity: 1; }
.feature-icon { font-size: 44px; margin-bottom: 10px; display: block; }
.feature-card h3 { font-size: 18px; font-weight: 700; margin-bottom: 6px; color: var(--text); }
.feature-card p { font-size: 13px; color: var(--text-light); }

.stats-banner {
    display: flex;
    justify-content: center;
    gap: 40px;
    padding: 24px 0;
    position: relative;
}
.stats-banner::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 1px;
    height: 40px;
    background: var(--border-strong);
}
.stat-num { font-size: 30px; font-weight: 800; background: var(--primary-gradient); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
.stat-label { font-size: 13px; color: var(--text-light); margin-top: 2px; }

.cta { padding: 24px 24px 36px; display: flex; flex-direction: column; gap: 10px; }
.footer-note { padding: 0 24px 40px; font-size: 13px; color: var(--text-light); }
.footer-note strong { color: var(--primary); }

/* ========== Mode Select ========== */
.mode-select-page { padding: 16px; }
.page-header { text-align: center; padding: 24px 0 16px; }
.page-header h2 { font-size: 24px; font-weight: 800; background: var(--primary-gradient); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
.page-header .hint { font-size: 14px; color: var(--text-light); margin-top: 6px; }

.mode-card {
    position: relative;
    background: var(--bg-card);
    border-radius: var(--radius-lg);
    padding: 24px 20px;
    margin-bottom: 12px;
    border: 3px solid transparent;
    cursor: pointer;
    transition: var(--transition);
    box-shadow: var(--shadow);
    overflow: hidden;
}
.mode-card:active { transform: scale(0.98); }
.mode-card.selected {
    border-color: var(--primary);
    background: var(--primary-gradient-soft);
    box-shadow: var(--shadow-primary);
}
.mode-card .mode-badge {
    position: absolute;
    top: 14px;
    right: 14px;
    background: var(--success);
    color: #fff;
    padding: 3px 12px;
    border-radius: var(--radius-full);
    font-size: 11px;
    font-weight: 600;
    box-shadow: 0 2px 8px rgba(78,203,115,0.3);
}
.mode-icon { font-size: 40px; }
.mode-card h3 { font-size: 18px; font-weight: 700; margin: 10px 0 6px; }
.mode-card p { font-size: 13px; color: var(--text-light); }
.mode-tag {
    display: inline-block;
    margin-top: 10px;
    padding: 4px 14px;
    background: #f5f5f5;
    border-radius: var(--radius-full);
    font-size: 12px;
    color: var(--text-secondary);
}
.optional-config {
    margin: 20px 0;
    padding: 20px;
    background: var(--bg-card);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
}
.optional-config h4 { margin-bottom: 12px; font-size: 15px; }

/* ========== Checkin Page ========== */
.checkin-page { padding-bottom: 80px; }

.status-bar {
    display: flex;
    justify-content: space-around;
    padding: 20px 16px;
    background: var(--bg-card);
    border-radius: 0 0 var(--radius-xl) var(--radius-xl);
    box-shadow: var(--shadow-sm);
}
.status-item { text-align: center; }
.status-value {
    font-size: 22px;
    font-weight: 800;
    background: var(--primary-gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
.status-label { font-size: 12px; color: var(--text-light); margin-top: 2px; }

.progress-bar-container {
    height: 6px;
    background: var(--border);
    overflow: hidden;
}
.progress-bar {
    height: 100%;
    background: var(--primary-gradient);
    transition: width 0.8s cubic-bezier(0.4, 0, 0.2, 1);
    border-radius: 0 3px 3px 0;
}

.today-checkin { padding: 20px 16px; }
.checkin-card {
    background: var(--primary-gradient-soft);
    border-radius: var(--radius-xl);
    padding: 36px 24px;
    text-align: center;
    border: 2px dashed var(--primary-light);
    position: relative;
    overflow: hidden;
}
.checkin-card::before {
    content: '';
    position: absolute;
    top: -40px;
    right: -40px;
    width: 120px;
    height: 120px;
    background: rgba(255,107,107,0.06);
    border-radius: 50%;
}
.checkin-card.disabled { border-color: var(--border-strong); background: #f9f9f9; }
.checkin-card.complete { border-color: var(--success); background: linear-gradient(135deg, #f0fff4, #fff); }
.checkin-label { font-size: 14px; color: var(--text-light); }
.checkin-amount {
    font-size: 56px;
    font-weight: 900;
    background: var(--primary-gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin: 12px 0 4px;
    line-height: 1.1;
}
.checkin-number { font-size: 16px; color: var(--text-secondary); margin-bottom: 20px; }
.checkin-card .btn { margin-top: 8px; }

.draw-methods { display: flex; gap: 8px; margin-top: 16px; }
.draw-btn {
    flex: 1;
    padding: 12px 8px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    font-size: 14px;
    cursor: pointer;
    transition: var(--transition);
    text-decoration: none;
    color: var(--text);
    text-align: center;
}
.draw-btn:active { background: var(--bg-hover); transform: scale(0.96); }

.dice-panel { margin-top: 8px; padding: 16px; background: var(--bg-card); border-radius: var(--radius); }
.dice-row { display: flex; gap: 8px; justify-content: center; }
.dice-face {
    font-size: 36px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 8px 12px;
    border-radius: var(--radius-sm);
    transition: var(--transition);
}
.dice-face:active { background: var(--bg-hover); transform: scale(1.1) rotate(15deg); }

/* Number Grid */
.number-grid-section { padding: 20px 16px; }
.number-grid-section h3 { margin-bottom: 16px; font-size: 17px; font-weight: 700; }
.number-grid {
    display: grid;
    grid-template-columns: repeat(10, 1fr);
    gap: 4px;
    background: var(--bg-card);
    padding: 12px;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
}
.number-cell {
    aspect-ratio: 1;
    background: #fafafa;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    font-size: 11px;
    font-weight: 600;
    border: 1px solid var(--border);
    transition: var(--transition);
    color: var(--text-secondary);
}
.number-cell:active { transform: scale(0.9); }
.number-cell.used {
    background: linear-gradient(135deg, #d4edda, #c3e6cb);
    color: #155724;
    text-decoration: line-through;
    opacity: 0.65;
    border-color: transparent;
}
.number-cell.used .strike { position: absolute; font-size: 16px; color: var(--success); opacity: 0.5; }
.number-cell.makeup {
    background: linear-gradient(135deg, #cce5ff, #b3d9ff);
    color: #004085;
    text-decoration: line-through;
    opacity: 0.7;
    border-color: transparent;
}

.grid-legend {
    display: flex;
    gap: 20px;
    margin-top: 16px;
    justify-content: center;
    font-size: 12px;
    color: var(--text-light);
}
.legend-item { display: flex; align-items: center; gap: 6px; }
.dot { width: 14px; height: 14px; border-radius: 4px; }
.dot.unused { background: #fafafa; border: 1px solid var(--border-strong); }
.dot.used { background: linear-gradient(135deg, #d4edda, #c3e6cb); }
.dot.makeup { background: linear-gradient(135deg, #cce5ff, #b3d9ff); }

/* ========== Bottom Nav ========== */
.bottom-nav {
    position: fixed;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    max-width: 500px;
    display: flex;
    background: rgba(255,255,255,0.95);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-top: 1px solid var(--border);
    z-index: 100;
    padding-bottom: env(safe-area-inset-bottom, 0);
}
.nav-item {
    flex: 1;
    text-align: center;
    padding: 10px 0 8px;
    text-decoration: none;
    color: var(--text-light);
    font-size: 11px;
    transition: var(--transition);
}
.nav-item.active { color: var(--primary); font-weight: 600; }

/* ========== Stats Page ========== */
.stats-page { padding: 16px 16px 80px; }
.stats-overview { margin-bottom: 20px; }
.stat-card {
    background: var(--bg-card);
    border-radius: var(--radius-lg);
    padding: 24px;
    text-align: center;
    margin-bottom: 10px;
    box-shadow: var(--shadow);
}
.stat-card.primary {
    background: var(--primary-gradient);
    color: #fff;
    border-radius: var(--radius-xl);
    padding: 28px;
}
.stat-card.primary .stat-label { color: rgba(255,255,255,0.85); }
.stat-card .stat-value { font-size: 30px; font-weight: 800; }
.stat-card.primary .stat-value { font-size: 36px; }
.stat-card .stat-label { font-size: 13px; color: var(--text-light); margin-top: 4px; }
.stat-row { display: flex; gap: 10px; }
.stat-card.small { flex: 1; padding: 16px; }
.stat-card.small .stat-value { font-size: 18px; }

.big-progress { margin-bottom: 24px; }
.big-progress-bar {
    height: 28px;
    background: #f0f0f0;
    border-radius: var(--radius-full);
    overflow: hidden;
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.06);
}
.big-progress-fill {
    height: 100%;
    background: var(--primary-gradient);
    border-radius: var(--radius-full);
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding-right: 12px;
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    transition: width 0.8s cubic-bezier(0.4, 0, 0.2, 1);
    min-width: 50px;
    box-shadow: 0 2px 8px rgba(255,107,107,0.3);
}

.quarter-section, .achievements-section { margin-bottom: 24px; }
.quarter-section h3, .achievements-section h3 { margin-bottom: 14px; font-size: 17px; font-weight: 700; }
.quarter-card {
    background: var(--bg-card);
    border-radius: var(--radius);
    padding: 16px 18px;
    margin-bottom: 10px;
    box-shadow: var(--shadow-sm);
    transition: var(--transition);
}
.quarter-card:active { transform: scale(0.98); }
.quarter-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.quarter-name { font-weight: 700; font-size: 15px; }
.quarter-progress { font-weight: 700; color: var(--primary); font-size: 15px; }
.quarter-bar { height: 8px; background: #f0f0f0; border-radius: 4px; margin-bottom: 8px; overflow: hidden; }
.quarter-bar-fill { height: 100%; background: var(--primary-gradient); border-radius: 4px; transition: width 0.8s; }
.quarter-detail { display: flex; justify-content: space-between; font-size: 12px; color: var(--text-light); }
.quarter-achievements { margin-top: 6px; }
.achievement-badge {
    display: inline-block;
    padding: 3px 10px;
    background: linear-gradient(135deg, #fff8e1, #ffecb3);
    border-radius: var(--radius-full);
    font-size: 12px;
    color: #f57c00;
}

.achievements-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.achievement-card {
    background: linear-gradient(135deg, #fffde7, #fff);
    border-radius: var(--radius-lg);
    padding: 20px 12px;
    text-align: center;
    border: 1px solid #ffe082;
    transition: var(--transition);
}
.achievement-card:active { transform: scale(0.96); }
.achievement-icon { font-size: 36px; }
.achievement-title { font-weight: 700; margin: 6px 0 2px; font-size: 14px; }
.achievement-desc { font-size: 12px; color: var(--text-light); }
.achievement-date { font-size: 11px; color: #ccc; margin-top: 4px; }

.empty-state { text-align: center; padding: 48px 20px; color: var(--text-light); }
.empty-icon { font-size: 56px; margin-bottom: 12px; opacity: 0.5; }

/* ========== Records Page ========== */
.records-page { padding: 16px 16px 80px; }
.record-card {
    background: var(--bg-card);
    border-radius: var(--radius-lg);
    padding: 16px;
    margin-bottom: 10px;
    display: flex;
    gap: 14px;
    box-shadow: var(--shadow-sm);
    transition: var(--transition);
}
.record-card:active { transform: scale(0.98); }
.record-date { text-align: center; min-width: 56px; }
.record-date .date { font-size: 15px; font-weight: 700; }
.record-date .weekday {
    font-size: 12px;
    color: #fff;
    background: var(--primary-gradient);
    padding: 2px 8px;
    border-radius: var(--radius-full);
    display: inline-block;
    margin-top: 2px;
}
.record-detail { flex: 1; }
.record-amount { font-size: 22px; font-weight: 800; color: var(--primary); }
.record-numbers { margin: 6px 0; display: flex; flex-wrap: wrap; gap: 4px; }
.number-tag {
    display: inline-block;
    padding: 2px 8px;
    background: linear-gradient(135deg, #fff5f5, #ffe8e8);
    border-radius: var(--radius-full);
    font-size: 11px;
    font-weight: 600;
    color: var(--primary);
}
.record-meta { display: flex; gap: 8px; font-size: 12px; color: var(--text-light); }
.tag-makeup { background: #e3f2fd; color: #1565c0; padding: 2px 8px; border-radius: var(--radius-full); }

/* ========== Settings Page ========== */
.settings-page { padding: 16px 16px 80px; }
.settings-section {
    background: var(--bg-card);
    border-radius: var(--radius-lg);
    padding: 20px;
    margin-bottom: 12px;
    box-shadow: var(--shadow-sm);
}
.settings-section h3 { margin-bottom: 14px; font-size: 16px; font-weight: 700; }
.settings-section .hint { font-size: 13px; color: var(--text-light); margin-bottom: 10px; }
.form-group { margin-bottom: 12px; }
.form-group label { display: block; font-size: 13px; color: var(--text-secondary); margin-bottom: 6px; font-weight: 500; }
.form-row { display: flex; gap: 8px; }
.form-row .input { flex: 1; }
.reminder-list { margin-top: 16px; }
.reminder-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 0;
    border-bottom: 1px solid var(--border);
}
.reminder-item:last-child { border-bottom: none; }
.btn-toggle { border: none; padding: 4px 14px; border-radius: var(--radius-full); font-size: 12px; cursor: pointer; font-weight: 600; }
.btn-toggle.on { background: var(--success); color: #fff; }
.btn-toggle.off { background: #e0e0e0; color: #999; }
.btn-del { border: none; background: none; color: var(--danger); cursor: pointer; font-size: 18px; }

/* ========== Plan Detail ========== */
.plan-detail-page { padding: 16px; }
.plan-info-card {
    background: var(--bg-card);
    border-radius: var(--radius-lg);
    padding: 20px;
    margin-bottom: 16px;
    box-shadow: var(--shadow);
}
.info-row { display: flex; justify-content: space-between; padding: 8px 0; border-bottom: 1px solid var(--border); }
.info-row:last-child { border-bottom: none; }
.info-row .label { color: var(--text-light); }
.info-row .value { font-weight: 500; }
.progress-overview {
    background: var(--bg-card);
    border-radius: var(--radius-xl);
    padding: 28px 20px;
    margin-bottom: 16px;
    text-align: center;
    box-shadow: var(--shadow);
}
.big-number .big-value {
    font-size: 52px;
    font-weight: 900;
    background: var(--primary-gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
.big-number .big-label { font-size: 14px; color: var(--text-light); }
.progress-stats { display: flex; justify-content: space-around; margin-top: 20px; }
.ps-item { text-align: center; }
.ps-value { display: block; font-weight: 800; color: var(--text); font-size: 16px; }
.ps-label { font-size: 12px; color: var(--text-light); }
.plan-detail-page .btn { margin-bottom: 10px; }

/* ========== Makeup Page ========== */
.makeup-page { padding: 16px; }
.info-card {
    background: var(--bg-card);
    border-radius: var(--radius-lg);
    padding: 24px 20px;
    margin-bottom: 12px;
    text-align: center;
    box-shadow: var(--shadow-sm);
}
.info-card.success { background: linear-gradient(135deg, #f0fff4, #fff); border: 1px solid var(--success); }
.rules-card {
    background: var(--bg-card);
    border-radius: var(--radius-lg);
    padding: 20px;
    margin-bottom: 16px;
    box-shadow: var(--shadow-sm);
}
.rules-card h3 { margin-bottom: 10px; font-size: 16px; }
.rules-card ul { padding-left: 20px; font-size: 14px; line-height: 2; color: var(--text-secondary); }

/* ========== Auth Pages ========== */
.auth-page { padding: 24px; min-height: 100vh; display: flex; flex-direction: column; justify-content: center; }
.auth-header { text-align: center; padding: 20px 0 32px; }
.auth-logo {
    font-size: 72px;
    margin-bottom: 16px;
    display: inline-block;
    animation: bounce 2s ease-in-out infinite;
}
.auth-header h2 { font-size: 26px; font-weight: 800; }
.auth-header .hint { font-size: 14px; color: var(--text-light); margin-top: 6px; }
.auth-form { margin-bottom: 20px; }
.auth-form .form-group { margin-bottom: 18px; }
.auth-form label { display: block; font-size: 14px; font-weight: 600; margin-bottom: 8px; color: var(--text); }
.auth-divider {
    display: flex;
    align-items: center;
    text-align: center;
    margin: 24px 0;
    color: var(--text-light);
    font-size: 13px;
}
.auth-divider::before, .auth-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--border-strong);
}
.auth-divider::before { margin-right: 16px; }
.auth-divider::after { margin-left: 16px; }
.auth-footer { text-align: center; margin-top: 20px; font-size: 14px; color: var(--text-light); }
.auth-footer a { color: var(--primary); text-decoration: none; font-weight: 600; }
.wechat-bind-tip {
    background: linear-gradient(135deg, #f0fff4, #e8f5e9);
    border: 1px solid var(--success);
    border-radius: var(--radius);
    padding: 10px 14px;
    font-size: 13px;
    color: #155724;
    margin-bottom: 14px;
    text-align: center;
}
.text-muted { color: var(--text-light) !important; font-size: 13px; }

/* ========== Profile Page ========== */
.profile-page { padding: 16px 16px 80px; }
.profile-card {
    background: var(--primary-gradient);
    border-radius: var(--radius-xl);
    padding: 28px 24px;
    display: flex;
    align-items: center;
    gap: 18px;
    color: #fff;
    margin-bottom: 16px;
    box-shadow: var(--shadow-primary);
    position: relative;
    overflow: hidden;
}
.profile-card::before {
    content: '';
    position: absolute;
    top: -30%;
    right: -10%;
    width: 140px;
    height: 140px;
    background: rgba(255,255,255,0.1);
    border-radius: 50%;
}
.profile-avatar img { width: 68px; height: 68px; border-radius: 50%; border: 3px solid rgba(255,255,255,0.4); object-fit: cover; }
.avatar-placeholder {
    width: 68px;
    height: 68px;
    border-radius: 50%;
    background: rgba(255,255,255,0.25);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    font-weight: 700;
}
.profile-info { position: relative; z-index: 1; }
.profile-info h3 { font-size: 22px; font-weight: 800; }
.profile-info p { font-size: 13px; opacity: 0.9; margin-top: 2px; }
.profile-badges { margin-top: 6px; display: flex; gap: 6px; flex-wrap: wrap; }
.badge-admin { background: rgba(255,255,255,0.25); padding: 3px 10px; border-radius: var(--radius-full); font-size: 11px; backdrop-filter: blur(4px); }
.badge-wechat { background: var(--wechat); padding: 3px 10px; border-radius: var(--radius-full); font-size: 11px; }
.badge-unbound { background: rgba(255,255,255,0.25); padding: 3px 10px; border-radius: var(--radius-full); font-size: 11px; }

/* ========== Animation Classes ========== */
.fade-in { animation: fadeIn 0.4s ease; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
.slide-up { animation: slideUp 0.3s var(--bounce); }
@keyframes slideUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }

/* ========== Utilities ========== */
.hidden { display: none !important; }

/* ========== Bottom Nav v2 ========== */
.bottom-nav {
    position: fixed;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    max-width: 500px;
    display: flex;
    background: rgba(255,255,255,0.97);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-top: 1px solid var(--border);
    z-index: 100;
    padding: 6px 0 calc(6px + env(safe-area-inset-bottom, 0));
}
.nav-item {
    flex: 1;
    text-align: center;
    padding: 4px 0;
    text-decoration: none;
    color: var(--text-light);
    font-size: 11px;
    transition: var(--transition);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
}
.nav-icon { font-size: 22px; line-height: 1; }
.nav-item.active { color: var(--primary); font-weight: 600; }
.nav-item.active .nav-icon { transform: scale(1.1); }

/* ========== Profile Menu List ========== */
.profile-stats {
    display: flex;
    align-items: center;
    justify-content: space-around;
    background: var(--bg-card);
    border-radius: var(--radius-xl);
    padding: 20px 16px;
    margin-bottom: 16px;
    box-shadow: var(--shadow);
}
.profile-stat-item { text-align: center; flex: 1; }
.profile-stat-value {
    font-size: 20px;
    font-weight: 800;
    background: var(--primary-gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
.profile-stat-label { font-size: 12px; color: var(--text-light); margin-top: 2px; }
.profile-stat-divider { width: 1px; height: 32px; background: var(--border-strong); }

.menu-group {
    background: var(--bg-card);
    border-radius: var(--radius-lg);
    margin-bottom: 12px;
    box-shadow: var(--shadow-sm);
    overflow: hidden;
}
.menu-item {
    display: flex !important;
    align-items: center;
    gap: 14px;
    padding: 16px 20px;
    text-decoration: none;
    color: var(--text);
    transition: var(--transition);
    border-bottom: 1px solid var(--border);
}
.menu-item:active { background: var(--bg-hover); }
.menu-item:last-child { border-bottom: none; }
.menu-icon {
    width: 40px;
    height: 40px;
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    flex-shrink: 0;
}
.menu-text { flex: 1; font-size: 15px; font-weight: 500; }
.menu-arrow { color: var(--text-light); font-size: 22px; }
.menu-danger .menu-text { color: var(--danger); }

/* ========== Form Pages (修改资料/密码) ========== */
.form-page { padding: 0 16px 40px; }
.back-btn {
    display: inline-flex;
    align-items: center;
    color: var(--primary);
    text-decoration: none;
    font-size: 15px;
    font-weight: 600;
    margin-bottom: 12px;
}

/* ========== Community Page ========== */
.tab-page { padding-bottom: 80px; }
.community-post-bar {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    margin: 0 16px 16px;
    background: var(--bg-card);
    border-radius: var(--radius-full);
    box-shadow: var(--shadow-sm);
}
.post-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--primary-gradient);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 14px;
    flex-shrink: 0;
}
.post-input-placeholder {
    flex: 1;
    color: var(--text-light);
    font-size: 14px;
    cursor: pointer;
}
.post-btn-icon { font-size: 20px; cursor: pointer; }

.topic-tags {
    display: flex;
    gap: 8px;
    padding: 0 16px 16px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
.topic-tags::-webkit-scrollbar { display: none; }
.topic-tag {
    flex-shrink: 0;
    padding: 6px 16px;
    background: var(--bg-card);
    border-radius: var(--radius-full);
    font-size: 13px;
    color: var(--text-secondary);
    cursor: pointer;
    transition: var(--transition);
    border: 1px solid var(--border);
}
.topic-tag.active {
    background: var(--primary-gradient);
    color: #fff;
    border-color: transparent;
    box-shadow: var(--shadow-primary);
}

.post-list { padding: 0 16px; }
.post-card {
    background: var(--bg-card);
    border-radius: var(--radius-lg);
    padding: 18px;
    margin-bottom: 12px;
    box-shadow: var(--shadow);
    transition: var(--transition);
}
.post-card:active { transform: scale(0.99); }
.post-header { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.post-user-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: linear-gradient(135deg, #e3f2fd, #bbdefb);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    flex-shrink: 0;
}
.post-user-info { flex: 1; }
.post-username { font-weight: 700; font-size: 15px; }
.post-time { font-size: 12px; color: var(--text-light); }
.post-badge {
    padding: 3px 10px;
    border-radius: var(--radius-full);
    font-size: 11px;
    font-weight: 600;
    background: linear-gradient(135deg, #fff3e0, #ffe0b2);
    color: #e65100;
}
.post-badge.challenge {
    background: linear-gradient(135deg, #fce4ec, #f8bbd0);
    color: #880e4f;
}
.post-content { font-size: 15px; line-height: 1.7; margin-bottom: 12px; color: var(--text); }
.post-images { margin-bottom: 12px; }
.post-img-placeholder {
    background: linear-gradient(135deg, #f5f5f5, #eeeeee);
    border-radius: var(--radius);
    padding: 20px;
    text-align: center;
    font-size: 16px;
    font-weight: 700;
    color: var(--text-secondary);
}
.post-actions { display: flex; gap: 24px; padding-top: 8px; border-top: 1px solid var(--border); }
.post-action {
    font-size: 13px;
    color: var(--text-light);
    cursor: pointer;
    transition: var(--transition);
}
.post-action:active { color: var(--primary); }
.load-more {
    text-align: center;
    padding: 16px;
    color: var(--primary);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
}

/* Modal */
.modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.5);
    z-index: 200;
    align-items: flex-end;
    justify-content: center;
    animation: fadeIn 0.2s;
}
.modal-content {
    background: #fff;
    width: 100%;
    max-width: 500px;
    border-radius: var(--radius-xl) var(--radius-xl) 0 0;
    padding: 24px;
    animation: slideUp 0.3s var(--bounce);
    padding-bottom: calc(24px + env(safe-area-inset-bottom, 0));
}
.modal-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; }
.modal-header h3 { font-size: 18px; font-weight: 700; }
.modal-close { font-size: 24px; cursor: pointer; color: var(--text-light); }
.post-textarea {
    width: 100%;
    min-height: 120px;
    padding: 14px;
    border: 2px solid var(--border);
    border-radius: var(--radius);
    font-size: 15px;
    font-family: inherit;
    resize: none;
    margin-bottom: 16px;
}
.post-textarea:focus { outline: none; border-color: var(--primary); }
.post-topic-select { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 16px; }
.topic-pick {
    padding: 4px 12px;
    background: #f5f5f5;
    border-radius: var(--radius-full);
    font-size: 12px;
    color: var(--text-secondary);
    cursor: pointer;
}
.topic-pick.active { background: var(--primary); color: #fff; }
.modal-footer { display: flex; gap: 10px; }
.modal-footer .btn { flex: 1; }

/* ============================================
   打卡主页 - 核心页面美化
   ============================================ */

/* ====== Hero 环形仪表盘 ====== */
.hero-section {
    position: relative;
    padding: 0 0 24px;
    overflow: hidden;
}
.hero-bg {
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 280px;
    background: var(--primary-gradient);
    border-radius: 0 0 32px 32px;
}
.hero-bg::before {
    content: '';
    position: absolute;
    top: -40%;
    right: -15%;
    width: 200px;
    height: 200px;
    background: rgba(255,255,255,0.1);
    border-radius: 50%;
}
.hero-bg::after {
    content: '';
    position: absolute;
    bottom: -20%;
    left: -10%;
    width: 140px;
    height: 140px;
    background: rgba(255,255,255,0.08);
    border-radius: 50%;
}
.hero-content {
    position: relative;
    z-index: 1;
    padding: 24px 16px 0;
}

/* 环形进度 */
.ring-progress {
    width: 180px;
    height: 180px;
    margin: 0 auto 20px;
    position: relative;
}
.ring-svg {
    width: 100%;
    height: 100%;
    filter: drop-shadow(0 4px 12px rgba(0,0,0,0.1));
}
.ring-center {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    color: #fff;
}
.ring-percent {
    font-size: 42px;
    font-weight: 900;
    line-height: 1;
}
.ring-percent small { font-size: 20px; font-weight: 700; }
.ring-label { font-size: 13px; opacity: 0.9; margin-top: 4px; }

/* 三栏数据 */
.hero-stats {
    display: flex;
    align-items: center;
    justify-content: space-around;
    background: rgba(255,255,255,0.15);
    backdrop-filter: blur(8px);
    border-radius: var(--radius-lg);
    padding: 16px;
    margin: 0 8px;
}
.hero-stat { text-align: center; flex: 1; }
.hero-stat-value { font-size: 18px; font-weight: 800; color: #fff; }
.hero-stat-label { font-size: 12px; color: rgba(255,255,255,0.85); margin-top: 2px; }
.hero-divider { width: 1px; height: 28px; background: rgba(255,255,255,0.3); }

/* ====== 今日打卡卡片 ====== */
.today-section { padding: 0 16px 16px; }
.today-label {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-secondary);
    margin-bottom: 10px;
    padding-left: 4px;
}
.today-card {
    background: var(--bg-card);
    border-radius: var(--radius-xl);
    padding: 28px 24px;
    box-shadow: var(--shadow-lg);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    position: relative;
    overflow: hidden;
    transition: var(--transition);
}
.today-card:active { transform: scale(0.98); }
.today-card-bg {
    position: absolute;
    top: 0; right: 0;
    width: 140px;
    height: 100%;
    background: linear-gradient(135deg, rgba(255,107,107,0.06), rgba(255,169,64,0.06));
    border-radius: 0 0 0 80px;
}
.today-card-content {
    display: flex;
    align-items: center;
    gap: 16px;
    position: relative;
    z-index: 1;
    flex: 1;
}
.today-emoji { font-size: 44px; animation: bounce 2s ease-in-out infinite; }
.today-amount-wrap { flex: 1; }
.today-amount {
    display: flex;
    align-items: baseline;
    gap: 2px;
    line-height: 1;
}
.currency { font-size: 22px; font-weight: 700; color: var(--primary); }
.amount-number {
    font-size: 48px;
    font-weight: 900;
    background: var(--primary-gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
.today-tag {
    display: inline-block;
    margin-top: 6px;
    padding: 3px 12px;
    background: var(--primary-gradient);
    color: #fff;
    border-radius: var(--radius-full);
    font-size: 12px;
    font-weight: 600;
}
.today-card-disabled { opacity: 0.6; }
.today-card-complete .today-amount-status { font-size: 16px; font-weight: 700; color: var(--success); }
.today-amount-status { font-size: 14px; color: var(--text-light); }

/* 打卡按钮 */
.checkin-fab {
    width: 72px;
    height: 72px;
    border: none;
    border-radius: 50%;
    background: var(--primary-gradient);
    color: #fff;
    cursor: pointer;
    transition: var(--transition);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 20px rgba(255,107,107,0.3);
    flex-shrink: 0;
    position: relative;
    z-index: 1;
}
.checkin-fab::before {
    content: '';
    position: absolute;
    inset: -4px;
    border-radius: 50%;
    border: 2px solid rgba(255,107,107,0.2);
    animation: ringPulse 2s ease-out infinite;
}
@keyframes ringPulse {
    0% { transform: scale(1); opacity: 0.6; }
    100% { transform: scale(1.3); opacity: 0; }
}
.checkin-fab:active { transform: scale(0.9); }
.checkin-fab-text { font-size: 12px; font-weight: 700; }
.checkin-fab-icon { font-size: 24px; font-weight: 900; }
.checkin-fab:disabled { opacity: 0.5; }

/* ====== 概览栏 ====== */
.overview-bar {
    display: flex;
    justify-content: space-around;
    padding: 14px 16px;
    margin: 0 16px 16px;
    background: var(--bg-card);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
}
.overview-item { display: flex; align-items: center; gap: 6px; }
.overview-dot { width: 8px; height: 8px; border-radius: 50%; }
.overview-dot.saved { background: var(--success); }
.overview-dot.remaining { background: var(--warning); }
.overview-dot.target { background: var(--primary); }
.overview-text { font-size: 12px; color: var(--text-secondary); }
.overview-text strong { color: var(--text); }

/* ====== 数字热力图面板 ====== */
.number-panel-section {
    padding: 0 16px 20px;
}
.panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
}
.panel-header h3 { font-size: 16px; font-weight: 700; }
.panel-subtitle { font-size: 13px; color: var(--text-light); }

.mode-indicator { margin-bottom: 14px; }
.mode-tag-current {
    display: inline-block;
    padding: 4px 14px;
    background: var(--primary-gradient);
    color: #fff;
    border-radius: var(--radius-full);
    font-size: 12px;
    font-weight: 600;
    box-shadow: var(--shadow-primary);
}

.number-heatmap {
    display: grid;
    grid-template-columns: repeat(15, 1fr);
    gap: 3px;
    background: var(--bg-card);
    padding: 14px;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow);
}
.heat-cell {
    aspect-ratio: 1;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 8px;
    font-weight: 600;
    cursor: default;
    transition: var(--transition);
    position: relative;
}
.heat-cell:hover { transform: scale(1.3); z-index: 2; }
.heat-cell span { opacity: 0; }
.heat-cell:hover span { opacity: 1; font-size: 10px; }

/* 热力等级 */
.heat-empty { background: #f5f5f5; }
.heat-done-1 { background: #c8e6c9; }
.heat-done-2 { background: #81c784; }
.heat-done-3 { background: #43a047; }
.heat-done-4 { background: #2e7d32; }
.heat-makeup { background: linear-gradient(135deg, #90caf9, #42a5f5) !important; }

/* 热力图例 */
.heat-legend {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin-top: 12px;
    font-size: 11px;
    color: var(--text-light);
}
.legend-text { font-size: 11px; }
.heat-scale { display: flex; gap: 3px; }
.heat-cell-mini {
    width: 14px;
    height: 14px;
    border-radius: 3px;
}
.legend-split { color: var(--border-strong); margin: 0 4px; }
.legend-item-inline { display: flex; align-items: center; gap: 4px; }

/* ====== 快捷操作 ====== */
.quick-actions {
    display: flex;
    justify-content: space-around;
    padding: 16px;
    margin: 0 16px 16px;
    background: var(--bg-card);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
}
.quick-action-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    text-decoration: none;
    color: var(--text-secondary);
    font-size: 12px;
    cursor: pointer;
    transition: var(--transition);
}
.quick-action-item:active { transform: scale(0.92); }
.qa-icon {
    width: 48px;
    height: 48px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
}

/* ====== 模式切换列表 ====== */
.mode-switch-item { display: block; margin-bottom: 8px; cursor: pointer; }
.msi-card {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 16px;
    border: 2px solid var(--border);
    border-radius: var(--radius);
    transition: var(--transition);
}
.msi-card.selected { border-color: var(--primary); background: var(--primary-gradient-soft); }
.msi-card span:first-child { font-size: 28px; }
.msi-title { font-weight: 700; font-size: 15px; }
.msi-desc { font-size: 12px; color: var(--text-light); }

/* ====== 打卡成功动画 ====== */
.success-modal {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: #fff;
    border-radius: var(--radius-xl);
    padding: 40px 32px 32px;
    text-align: center;
    z-index: 201;
    width: 80%;
    max-width: 340px;
    animation: successPop 0.4s var(--bounce);
}
@keyframes successPop {
    from { opacity: 0; transform: translate(-50%, -50%) scale(0.5); }
    to { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}
.success-confetti {
    position: absolute;
    top: -20px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 40px;
    animation: spin 1s ease;
}
@keyframes spin { from { transform: translateX(-50%) rotate(0); } to { transform: translateX(-50%) rotate(360deg); } }
.success-ring {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: var(--success);
    margin: 0 auto 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 8px 30px rgba(78,203,115,0.3);
    animation: ringScale 0.5s var(--bounce) 0.2s backwards;
}
@keyframes ringScale { from { transform: scale(0); } }
.success-check { font-size: 40px; color: #fff; font-weight: 900; }
.success-title { font-size: 20px; font-weight: 800; margin-bottom: 8px; }
.success-amount {
    font-size: 36px;
    font-weight: 900;
    background: var(--primary-gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    line-height: 1.2;
}
.success-subtitle { font-size: 13px; color: var(--text-light); margin-bottom: 12px; }
.success-streak {
    display: inline-block;
    padding: 6px 16px;
    background: linear-gradient(135deg, #fff3e0, #ffe0b2);
    border-radius: var(--radius-full);
    font-size: 13px;
    font-weight: 700;
    color: #e65100;
}

/* ====== 滚动播报 Ticker ====== */
.ticker-section {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 16px 12px;
}
.ticker-icon { font-size: 20px; flex-shrink: 0; }
.ticker-wrapper {
    flex: 1;
    overflow: hidden;
    background: var(--bg-card);
    border-radius: var(--radius-full);
    box-shadow: var(--shadow-sm);
    padding: 8px 0;
    height: 36px;
}
.ticker-track {
    display: flex;
    gap: 40px;
    white-space: nowrap;
    animation: tickerScroll 20s linear infinite;
    line-height: 20px;
}
.ticker-item {
    font-size: 13px;
    color: var(--text-secondary);
    flex-shrink: 0;
}
.ticker-item small { color: var(--text-light); font-size: 11px; }
@keyframes tickerScroll {
    from { transform: translateX(100%); }
    to { transform: translateX(-100%); }
}

/* ====== 当月日历打卡表 ====== */
.calendar-section { padding: 0 16px 20px; }
.calendar-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 4px;
    background: var(--bg-card);
    padding: 14px;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow);
}
.cal-weekday {
    text-align: center;
    font-size: 12px;
    font-weight: 700;
    color: var(--text-light);
    padding-bottom: 6px;
}
.cal-empty {}
.cal-day {
    aspect-ratio: 1;
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: #fafafa;
    border: 1px solid var(--border);
    transition: var(--transition);
    position: relative;
    cursor: default;
}
.cal-day:active { transform: scale(0.92); }
.cal-day.cal-done {
    background: linear-gradient(135deg, #c8e6c9, #81c784);
    border-color: transparent;
}
.cal-day.cal-today {
    border: 2px solid var(--primary) !important;
    box-shadow: 0 2px 8px rgba(255,107,107,0.2);
}
.cal-day.cal-pending {
    background: linear-gradient(135deg, #fff3e0, #ffe0b2);
    border-color: var(--warning);
}
.cal-num { font-size: 12px; font-weight: 700; }
.cal-day.cal-done .cal-num { color: #1b5e20; }
.cal-check { font-size: 10px; color: #2e7d32; position: absolute; top: 2px; right: 4px; }
.cal-amount {
    font-size: 8px;
    color: #1b5e20;
    margin-top: 1px;
}

.month-summary {
    display: flex;
    justify-content: space-around;
    margin-top: 12px;
    padding: 12px;
    background: var(--bg-card);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
}
.ms-item { text-align: center; }
.ms-value { display: block; font-size: 16px; font-weight: 800; color: var(--primary); }
.ms-label { font-size: 11px; color: var(--text-light); }

/* ====== 社区增强样式 ====== */
.post-type-tag {
    display: inline-block;
    padding: 1px 6px;
    background: #e3f2fd;
    color: #1565c0;
    border-radius: var(--radius-full);
    font-size: 10px;
    font-weight: 600;
    margin-left: 4px;
}
.post-images-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 4px;
    margin-bottom: 12px;
}
.post-img {
    width: 100%;
    aspect-ratio: 1;
    object-fit: cover;
    border-radius: var(--radius-sm);
}
.comment-list {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid var(--border);
}
.comment-item {
    padding: 4px 0;
    font-size: 13px;
}
.comment-user { font-weight: 700; color: var(--text); }
.comment-text { color: var(--text-secondary); }
.comment-form {
    display: flex;
    gap: 6px;
    margin-top: 8px;
}
.comment-input {
    flex: 1;
    padding: 8px 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius-full);
    font-size: 13px;
}
.comment-input:focus { outline: none; border-color: var(--primary); }
.comment-send {
    padding: 6px 16px;
    background: var(--primary-gradient);
    color: #fff;
    border: none;
    border-radius: var(--radius-full);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}
.post-action.liked { color: var(--primary); font-weight: 700; }

.upload-area { margin-top: 12px; }
.upload-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    background: #f5f5f5;
    border: 1px dashed var(--border-strong);
    border-radius: var(--radius);
    font-size: 13px;
    color: var(--text-secondary);
    cursor: pointer;
}
.image-preview {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    margin-top: 8px;
}
.preview-img {
    width: 72px;
    height: 72px;
    object-fit: cover;
    border-radius: var(--radius-sm);
}
.pagination-links { padding: 0 16px 16px; }
.pagination-links a {
    display: inline-block;
    padding: 4px 10px;
    margin: 0 2px;
    border: 1px solid var(--border);
    border-radius: 6px;
    color: var(--primary);
    text-decoration: none;
    font-size: 13px;
}

/* ====== Hero增强 ====== */
.hero-title-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
    position: relative;
    z-index: 1;
}
.hero-greeting { color: #fff; font-size: 16px; font-weight: 700; }
.hero-date { color: rgba(255,255,255,0.8); font-size: 13px; }
.ring-streak {
    font-size: 11px;
    color: rgba(255,255,255,0.85);
    margin-top: 4px;
    background: rgba(255,255,255,0.15);
    padding: 2px 10px;
    border-radius: var(--radius-full);
}

/* 浮动金币装饰 */
.hero-decoration { position: absolute; top: 0; left: 0; right: 0; height: 100%; pointer-events: none; z-index: 0; }
.float-coin {
    position: absolute;
    font-size: 24px;
    animation: floatUp 3s ease-in-out infinite;
    animation-delay: var(--d, 0s);
    opacity: 0.3;
}
.float-coin:nth-child(1) { top: 15%; right: 10%; }
.float-coin:nth-child(2) { top: 25%; right: 25%; font-size: 18px; }
.float-coin:nth-child(3) { top: 10%; right: 40%; font-size: 20px; }
@keyframes floatUp {
    0%, 100% { transform: translateY(0) rotate(0); opacity: 0.2; }
    50% { transform: translateY(-15px) rotate(10deg); opacity: 0.4; }
}

/* ====== 日历月份切换 ====== */
.cal-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
}
.cal-nav-btn {
    width: 36px;
    height: 36px;
    border: none;
    background: var(--bg-card);
    border-radius: 50%;
    font-size: 20px;
    color: var(--primary);
    cursor: pointer;
    box-shadow: var(--shadow-sm);
    transition: var(--transition);
}
.cal-nav-btn:active { transform: scale(0.9); background: var(--primary); color: #fff; }
.cal-title { font-size: 17px; font-weight: 700; }
.cal-summary-bar {
    display: flex;
    justify-content: space-around;
    padding: 10px 14px;
    margin-bottom: 10px;
    background: var(--bg-card);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    font-size: 13px;
    color: var(--text-secondary);
}
.cal-summary-bar strong { color: var(--primary); }

/* ====== 头像上传 ====== */
.avatar-upload-section {
    text-align: center;
    padding: 20px;
    margin-bottom: 12px;
    background: var(--bg-card);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
}
.avatar-preview {
    width: 88px;
    height: 88px;
    margin: 0 auto 12px;
    border-radius: 50%;
    overflow: hidden;
    border: 3px solid var(--primary);
    box-shadow: var(--shadow-primary);
}
.avatar-preview img { width: 100%; height: 100%; object-fit: cover; }
.avatar-placeholder-big {
    width: 100%;
    height: 100%;
    background: var(--primary-gradient);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 36px;
    font-weight: 700;
}
.upload-avatar-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 20px;
    background: var(--primary-gradient);
    color: #fff;
    border-radius: var(--radius-full);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}

/* ====== 图片预览器 ====== */
.image-viewer {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.9);
    z-index: 999;
    align-items: center;
    justify-content: center;
    padding: 20px;
}
.image-viewer img {
    max-width: 100%;
    max-height: 100%;
    border-radius: var(--radius);
}

/* 单张图片大图 */
.post-images-grid.single {
    grid-template-columns: 1fr;
}
.post-images-grid.single .post-img {
    aspect-ratio: 16/9;
    max-height: 240px;
}

/* ====== 数据卡片（白底清晰版） ====== */
.data-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    padding: 0 16px 16px;
    margin-top: -20px;
    position: relative;
    z-index: 10;
}
.data-card {
    background: var(--bg-card);
    border-radius: var(--radius-lg);
    padding: 18px 8px;
    text-align: center;
    box-shadow: var(--shadow-lg);
    transition: var(--transition);
    border-top: 4px solid;
}
.data-card:active { transform: scale(0.95); }
.data-card-primary { border-top-color: var(--primary); }
.data-card-success { border-top-color: var(--success); }
.data-card-warning { border-top-color: var(--warning); }
.data-icon { font-size: 28px; margin-bottom: 6px; }
.data-value {
    font-size: 18px;
    font-weight: 800;
    color: var(--text);
    line-height: 1.2;
}
.data-card-primary .data-value { color: var(--primary); }
.data-card-success .data-value { color: var(--success); }
.data-card-warning .data-value { color: var(--warning); }
.data-label {
    font-size: 11px;
    color: var(--text-light);
    margin-top: 2px;
}

/* hero badge */
.hero-badge {
    background: rgba(255,255,255,0.2);
    backdrop-filter: blur(8px);
    color: #fff;
    padding: 4px 12px;
    border-radius: var(--radius-full);
    font-size: 12px;
    font-weight: 600;
}

/* ====== V9修复 ====== */

/* 日历工具栏对齐修复 */
.cal-toolbar {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 0 20px !important;
    margin-bottom: 12px !important;
}
.cal-nav-btn {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 44px !important;
    height: 44px !important;
    border: none !important;
    background: #FF6B35 !important;
    border-radius: 50% !important;
    font-size: 24px !important;
    font-weight: 900 !important;
    color: #fff !important;
    cursor: pointer !important;
    box-shadow: 0 3px 12px rgba(255, 107, 53, 0.35) !important;
    transition: all 0.2s ease !important;
    text-decoration: none !important;
    line-height: 1 !important;
}
.cal-nav-btn:hover {
    background: #FF5722 !important;
    box-shadow: 0 4px 16px rgba(255, 87, 34, 0.45) !important;
}
.cal-nav-btn:active {
    transform: scale(0.9) !important;
    background: #E55100 !important;
    color: #fff !important;
}
.cal-nav-btn span {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-weight: 900 !important;
    line-height: 1 !important;
}
.cal-title {
    font-size: 17px !important;
    font-weight: 700 !important;
    text-align: center !important;
}

/* 首页广告位 */
.home-ad-slot {
    margin: 0 16px 16px;
    padding: 12px;
    background: var(--bg-card);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    min-height: 60px;
    overflow: hidden;
}
.home-ad-slot:empty { display: none; }
.home-ad-slot img,
.home-ad-slot iframe {
    max-width: 100%;
    border-radius: var(--radius);
}

/* 已存金额改为橙色 */
.data-card-saved {
    border-top-color: #FF8800 !important;
}
.data-card-saved .data-value {
    color: #FF8800 !important;
}
.data-card-saved .data-icon {
    filter: hue-rotate(15deg);
}

/* 问候语徽章样式调整 */
.hero-badge {
    max-width: 140px;
    text-align: center;
    font-size: 11px;
    line-height: 1.4;
    white-space: normal;
}