/**

 * 日常记录统一主题 — 与甄养堂小程序 TCM Care 品牌色一致

 * 来源：pages/index/index.vue · tabBar selectedColor #204e2b

 */



.daily-page {

    /* 品牌主色 */

    --primary: #204e2b;

    --primary-dark: #163d22;

    --primary-container: #386641;

    --primary-grad: linear-gradient(160deg, #204e2b 0%, #386641 100%);

    --primary-light: #eef6ef;

    --primary-soft: #cfe8d3;

    --primary-glow: rgba(32, 78, 43, 0.14);

    --on-primary-container: #afe2b3;



    --success: #386641;

    --success-light: #eef6ef;



    --danger: #dc2626;

    --danger-light: #fef2f2;

    --danger-glow: rgba(220, 38, 38, 0.1);



    --warning: #d97706;

    --warning-light: #fff7ed;



    --text-primary: #1b1c1a;

    --text-secondary: #414941;

    --text-muted: #727970;



    --surface: #ffffff;

    --surface-muted: #f4f4f0;

    --border: #e3e2df;

    --border-soft: rgba(32, 78, 43, 0.12);



    --slate-50: #faf9f5;

    --slate-100: #f4f4f0;

    --slate-200: #e9e8e4;

    --slate-300: #e3e2df;

    --slate-400: #727970;

    --slate-600: #414941;

    --slate-900: #1b1c1a;



    --shadow-premium: 0 8rpx 28rpx rgba(32, 78, 43, 0.06);

    --shadow-sm: 0 4rpx 16rpx rgba(32, 78, 43, 0.05);

    --shadow-glow-primary: 0 8rpx 20rpx rgba(32, 78, 43, 0.18);

    --shadow-glow-danger: 0 8rpx 20rpx rgba(220, 38, 38, 0.12);

    --border-premium: 1rpx solid var(--border-soft);



    background: var(--slate-50);

}



/* Hero：品牌绿渐变 */

.daily-page .hero-bg {

    background: var(--primary-grad);

    &::after {

        background: radial-gradient(circle at 88% 12%, rgba(255, 255, 255, 0.1) 0%, transparent 55%);

    }

}



.daily-page .hero-orb {

    display: none;

}



.daily-page .hero-pill.voice.speaking {

    background: rgba(255, 255, 255, 0.92);

    border-color: rgba(255, 255, 255, 0.95);

    animation: none;

    box-shadow: 0 0 0 3rpx rgba(255, 255, 255, 0.35);

}



.daily-page .hero-status-chip.pending {

    background: rgba(255, 255, 255, 0.16);

    border-color: rgba(255, 255, 255, 0.28);

}



.daily-page .hero-status-chip.done {

    background: rgba(255, 255, 255, 0.2);

    border-color: rgba(255, 255, 255, 0.32);

}



/* 指标卡 */

.daily-page .stat-fasting,

.daily-page .stat-postprandial,

.daily-page .stat-other {

    background: var(--surface);

}



.daily-page .stat-fasting .stat-card-tag,

.daily-page .stat-postprandial .stat-card-tag,

.daily-page .stat-other .stat-card-tag {

    background: var(--primary-light);

    color: var(--primary-dark);

}



.daily-page .stat-card-value {

    background: none;

    -webkit-background-clip: unset;

    background-clip: unset;

    color: var(--text-primary);

}



.daily-page .stat-card-value.is-high {

    background: none;

    color: var(--danger);

}



.daily-page .stat-card-trend.trend-down {

    background: var(--primary-light);

    .stat-card-trend-arrow,

    .stat-card-trend-delta {

        color: var(--primary-dark);

    }

}



.daily-page .more-entry-arrow {

    color: var(--primary);

}



.daily-page .card-chip.active {

    background: var(--primary);

    box-shadow: var(--shadow-glow-primary);

}



.daily-page .range-item.active {

    background: var(--primary);

    box-shadow: var(--shadow-glow-primary);

}



.daily-page .legend-dot-fasting {

    background: var(--primary);

}



.daily-page .legend-dot-postprandial {

    background: var(--warning);

}



.daily-page .streak-strip {

    background: var(--surface);

    border-color: var(--border-soft);

    &::after {

        background: radial-gradient(circle, rgba(32, 78, 43, 0.08) 0%, transparent 70%);

    }

}



.daily-page .streak-num {

    color: var(--primary-dark);

}



/* 日历：品牌绿深浅 */

.daily-page .calendar-cell.level-1 .calendar-cell-mark,

.daily-page .calendar-legend-cell.level-1 {

    background: var(--primary-soft);

    border-color: #b8dcc0;

}



.daily-page .calendar-cell.level-2 .calendar-cell-mark,

.daily-page .calendar-legend-cell.level-2 {

    background: var(--on-primary-container);

    border-color: #86c992;

}



.daily-page .calendar-cell.level-3 .calendar-cell-mark,

.daily-page .calendar-legend-cell.level-3 {

    background: var(--primary);

    border-color: var(--primary-dark);

}



.daily-page .day-block-tag.tag-blood,

.daily-page .day-block-tag.tag-diet,

.daily-page .day-block-tag.tag-exercise,

.daily-page .day-block-tag.tag-tracking {

    background: var(--primary-light);

    color: var(--primary-dark);

    border: 1rpx solid var(--border-soft);

}



.daily-page .day-block-tag.tag-diet,

.daily-page .day-block-tag.tag-exercise {

    background: var(--surface-muted);

    color: var(--text-secondary);

    border-color: var(--border);

}



.daily-page .pg-points-badge {

    background: var(--primary-light);

    border-color: var(--border-soft);

}



.daily-page .pg-points-num {

    color: var(--primary-dark);

}



.daily-page .record-quick-chip.pending {

    border-color: var(--border);

    background: var(--surface-muted);

}



.daily-page .record-quick-chip.done {

    border-color: rgba(56, 102, 65, 0.35);

    background: var(--success-light);

}



.daily-page .task-action-btn.pending {

    background: var(--primary);

}



.daily-page .water-btn {

    background: var(--primary);

}



.daily-page .family-like-strip,

.daily-page .encourage-strip {

    background: var(--surface);

    border: 1rpx solid var(--border);

    box-shadow: var(--shadow-premium);

}



.daily-page .card-title,

.daily-page .hero-title {

    color: inherit;

}



.daily-page .report-share-btn,

.daily-page .report-share-btn::after {

    background: var(--primary);

    box-shadow: var(--shadow-glow-primary);

}



.daily-page .input-modal-btn.primary {

    background: var(--primary);

}



.daily-page .input-field-dot-fasting {

    background: var(--primary);

}



.daily-page .input-field-dot-postprandial {

    background: var(--primary-container);

}



.daily-page .input-field-dot-other {

    background: var(--text-muted);

}



.daily-page .voice-switch.on .voice-switch-track {

    background: var(--primary);

}



.daily-page .heatmap-foot-cta {

    background: var(--primary);

}



/* ========== 适老极简首页（index） ========== */

.daily-page .elder-header {

    padding: 48rpx 32rpx 24rpx;

}



.daily-page .elder-greet {

    display: block;

    font-size: 44rpx;

    font-weight: 700;

    color: var(--text-primary);

    line-height: 1.35;

}



.daily-page .elder-status {

    display: block;

    margin-top: 16rpx;

    font-size: 32rpx;

    font-weight: 600;

    line-height: 1.4;



    &.is-done {

        color: var(--success);

    }



    &.is-pending {

        color: var(--text-secondary);

    }

}



.daily-page .elder-card-scroll {

    margin-top: 24rpx;

    width: 100%;

    white-space: nowrap;

}



.daily-page .elder-card-row {

    display: inline-flex;

    flex-wrap: nowrap;

    gap: 16rpx;

    padding: 2rpx 0;

}



.daily-page .elder-card-chip {

    flex-shrink: 0;

    padding: 12rpx 28rpx;

    border-radius: 999rpx;

    background: var(--surface);

    border: 2rpx solid var(--border);



    text {

        font-size: 28rpx;

        color: var(--text-secondary);

    }



    &.active {

        background: var(--primary);

        border-color: var(--primary);



        text {

            color: #fff;

            font-weight: 600;

        }

    }

}



.daily-page .elder-actions {

    padding: 0 32rpx 24rpx;

    display: flex;

    flex-direction: row;

    align-items: stretch;

    gap: 16rpx;

}



.daily-page .elder-btn {

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 12rpx;

    min-height: 112rpx;

    min-width: 0;

    border-radius: 24rpx;

    box-shadow: var(--shadow-sm);

    box-sizing: border-box;

}



.daily-page .elder-btn-text {

    font-size: 36rpx;

    font-weight: 700;

}



.daily-page .elder-btn-primary {

    flex: 8;

    background: var(--primary);



    .elder-btn-text {

        color: #fff;

    }

}



.daily-page .elder-btn-voice {

    flex: 2;

    flex-direction: column;

    gap: 8rpx;

    padding: 12rpx 8rpx;

    background: var(--surface);

    border: 2rpx solid var(--border-soft);



    .elder-btn-text {

        color: var(--primary-dark);

        font-size: 24rpx;

        line-height: 1.25;

        text-align: center;

    }



    &.speaking {

        border-color: var(--primary);

        background: var(--primary-light);

    }



    &.disabled {

        opacity: 0.45;

    }

}



.daily-page .elder-today-panel {

    margin: 0 32rpx 24rpx;

    padding: 32rpx;

    background: var(--surface);

    border-radius: 24rpx;

    border: 1rpx solid var(--border);

    box-shadow: var(--shadow-premium);

}



.daily-page .elder-panel-title {

    display: block;

    font-size: 34rpx;

    font-weight: 700;

    color: var(--text-primary);

    margin-bottom: 24rpx;

}



.daily-page .elder-today-grid {

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 20rpx;

}



.daily-page .elder-metric {

    padding: 24rpx;

    border-radius: 20rpx;

    background: var(--surface-muted);

    border: 2rpx solid var(--border);



    &.is-high {

        border-color: rgba(220, 38, 38, 0.35);

        background: var(--danger-light);

    }

}



.daily-page .elder-metric-label {

    display: block;

    font-size: 28rpx;

    color: var(--text-secondary);

    margin-bottom: 12rpx;

}



.daily-page .elder-metric-value-row {

    display: flex;

    align-items: baseline;

    gap: 8rpx;

}



.daily-page .elder-metric-value {

    font-size: 56rpx;

    font-weight: 800;

    color: var(--text-primary);

    line-height: 1.1;

}



.daily-page .elder-metric.is-high .elder-metric-value {

    color: var(--danger);

}



.daily-page .elder-metric-unit {

    font-size: 26rpx;

    color: var(--text-muted);

}



.daily-page .elder-metric-flag {

    display: block;

    margin-top: 12rpx;

    font-size: 26rpx;

    color: var(--danger);

    font-weight: 600;

}



.daily-page .elder-more-link {

    margin: 0 32rpx 16rpx;

    padding: 28rpx 32rpx;

    display: flex;

    align-items: center;

    justify-content: space-between;

    background: var(--surface);

    border-radius: 24rpx;

    border: 1rpx solid var(--border);

}



.daily-page .elder-more-title {

    display: block;

    font-size: 32rpx;

    font-weight: 700;

    color: var(--text-primary);

}



.daily-page .elder-more-sub {

    display: block;

    margin-top: 8rpx;

    font-size: 26rpx;

    color: var(--text-muted);

    line-height: 1.45;

}



.daily-page .elder-more-arrow {

    font-size: 48rpx;

    color: var(--primary);

    font-weight: 300;

    padding-left: 16rpx;

}



.daily-page .footer-tip {

    text-align: center;

    font-size: 26rpx;

    color: var(--text-muted);

    padding: 16rpx 32rpx 48rpx;

    line-height: 1.6;

}





.daily-page .elder-chart-block .range-bar {
    margin-bottom: 16rpx;
}

.daily-page .glucose-history-block {

    padding-bottom: 8rpx;

}