/* ============================================
   新版欢迎页组件样式
   ============================================ */

.welcome-container {
    width: 100%;
    max-width: none;
    background: none;
    border: none;
    box-shadow: none;
    padding: 0;
    overflow: visible;
    position: static;
    background-image: none;
}

.wc-profile-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    padding: 24px 28px;
    display: flex;
    align-items: center;
    gap: 20px;
    box-shadow: var(--shadow-sm);
}

.wc-avatar {
    width: 72px; height: 72px;
    border-radius: 50%;
    background: var(--color-primary-alpha);
    border: 3px solid var(--color-border);
    display: flex; align-items: center; justify-content: center;
    font-size: 32px; cursor: pointer; flex-shrink: 0; overflow: hidden;
    transition: border-color var(--transition-fast);
}
.wc-avatar:hover { border-color: var(--color-primary); }

.wc-profile-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; justify-content: center; }
.wc-profile-row1 { display: flex; align-items: center; }

.wc-name {
    font-size: 22px; font-weight: 700; color: var(--color-text);
    margin: 0; cursor: pointer;
}

.wc-mbti-badge {
    display: inline-block;
    background: var(--color-primary-alpha); color: var(--color-primary);
    font-size: 12px; font-weight: 600; padding: 2px 10px;
    border-radius: 20px; cursor: pointer;
}

.wc-user-id-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-left: 10px;
    padding: 2px 10px;
    border-radius: 20px;
    background: var(--color-primary-alpha);
    color: var(--color-primary);
    font-size: 11px;
    font-weight: 600;
    user-select: none;
}

.wc-mbti-label { font-size: 12px; color: var(--color-text-muted); }

.wc-signature-wrap { position: relative; width: 100%; }
.wc-signature {
    -webkit-appearance: none; appearance: none;
    width: 100%; border: none; border-radius: 0; background: transparent;
    box-shadow: none; outline: none;
    font-size: 13px; color: var(--color-text-secondary); padding: 4px 6px;
    box-sizing: border-box; transition: background 0.2s;
}
.wc-signature::placeholder { color: var(--color-text-muted); }
.wc-signature:focus { background: rgba(255,255,255,0.6); border-radius: 4px; }
.wc-signature-count { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); font-size: 11px; color: var(--color-text-muted); pointer-events: none; }

.wc-profile-link {
    font-size: 12px; color: var(--color-text-muted);
    cursor: pointer; transition: color var(--transition-fast); white-space: nowrap;
}
.wc-profile-link:hover { color: var(--color-primary); }

.wc-profile-stats { display: flex; gap: 32px; margin-left: auto; flex-shrink: 0; }

.wc-profile-stat { text-align: center; }

.wc-profile-stat-num {
    font-size: 28px; font-weight: 700; color: var(--color-text); line-height: 1;
}

.wc-profile-stat-label { font-size: 11px; color: var(--color-text-muted); margin-top: 4px; }

.wc-dual-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }

.wc-stat-card {
    background: var(--color-surface); border: 1px solid var(--color-border);
    border-radius: var(--radius-xl); padding: 20px 24px;
    box-shadow: var(--shadow-sm); cursor: pointer;
    transition: box-shadow var(--transition-fast), border-color var(--transition-fast);
}
.wc-stat-card:hover { border-color: var(--color-primary); box-shadow: var(--shadow-md); }

.wc-stat-card-header { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }

.wc-stat-icon {
    width: 36px; height: 36px; border-radius: var(--radius-md);
    background: var(--color-primary-alpha); color: var(--color-primary);
    display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}

.wc-stat-title { font-size: 14px; font-weight: 600; color: var(--color-text-secondary); flex: 1; }

.wc-finance-badge {
    font-size: 11px; background: #fee2e2; color: #dc2626;
    padding: 2px 8px; border-radius: 20px; font-weight: 500;
}

.wc-stat-num { font-size: 32px; font-weight: 700; color: var(--color-text); line-height: 1; margin-bottom: 6px; }
.wc-finance-num { color: #dc2626; }

.wc-stat-sub { font-size: 12px; color: var(--color-text-muted); margin-bottom: 10px; }

.wc-count-progress-row { display: flex !important; flex-direction: row !important; align-items: center; gap: 16px; margin-bottom: 8px; }
.wc-count-progress-row .wc-stat-num { margin-bottom: 0; flex-shrink: 0; }
.wc-progress-col { flex: 1; display: flex; flex-direction: column; gap: 4px; justify-content: center; }
.wc-progress-row .wc-progress-bar { flex: 1; margin-bottom: 0; }
.wc-progress-pct { font-size: 11px; color: var(--color-text-muted); flex-shrink: 0; }

.wc-progress-bar {
    height: 4px; background: var(--color-border); border-radius: 2px;
    margin-bottom: 8px; overflow: hidden;
}
.wc-progress-fill {
    width: 100%; height: 100%; background: var(--color-primary); border-radius: 2px;
    transform-origin: left;
    transition: transform 0.4s ease;
}

.wc-stat-footer { font-size: 12px; color: var(--color-text-muted); }
.wc-mini-chart { flex: 1; min-width: 0; max-height: 80px; align-self: stretch; }
.wc-mini-chart svg { width: 100% !important; height: 100% !important; }
.wc-finance-body { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; }

.animal-modal-d0zyM { max-height: fit-content !important; }
.animal-modalClipped-7IuAw { height: auto !important; }

/* 滚动条默认隐藏，滚动时显示 */
* { scrollbar-width: thin; scrollbar-color: transparent transparent; }
*:hover { scrollbar-color: var(--color-border) transparent; }
*::-webkit-scrollbar { width: 6px; height: 6px; }
*::-webkit-scrollbar-thumb { background: transparent; border-radius: 3px; transition: background 0.2s; }
*:hover::-webkit-scrollbar-thumb { background: var(--color-border); }
*::-webkit-scrollbar-track { background: transparent; }

.wc-overview-title { font-size: 15px; font-weight: 600; color: var(--color-text); margin: 8px 0; display: flex; align-items: center; justify-content: center; }

.wc-overview-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }

.wc-overview-card {
    background: var(--color-surface); border: 1px solid var(--color-border);
    border-radius: var(--radius-lg); padding: 14px 18px; cursor: pointer;
    transition: box-shadow var(--transition-fast), border-color var(--transition-fast);
    display: flex; align-items: center; gap: 14px;
}
/* 概览卡家族（四块功能卡+天气卡）hover 均无卡片级效果；四块功能卡反馈为图标动画（见下方） */

/* ===== 四块功能卡（待办/日记/支出/学习）图标 hover 动画 ===== */
/* 待办任务：对勾擦除后重新画出 */
.wc-overview-card[data-nav="tasks"] .wc-ov-icon polyline {
    stroke-dasharray: 1; stroke-dashoffset: 0;
}
.wc-overview-card[data-nav="tasks"]:hover .wc-ov-icon polyline {
    animation: ov-ico-check-draw 0.75s cubic-bezier(0.65, 0, 0.35, 1);
}
@keyframes ov-ico-check-draw {
    0% { stroke-dashoffset: 0; }
    40% { stroke-dashoffset: 1; }
    100% { stroke-dashoffset: 0; }
}

/* 今日日记：笔绕笔尖摆动写字，底线同步擦除重画 */
.wc-overview-card[data-nav="diary"] .wc-ov-icon path:first-of-type {
    stroke-dasharray: 1; stroke-dashoffset: 0;
}
.wc-overview-card[data-nav="diary"]:hover .wc-ov-icon path:first-of-type {
    animation: ov-ico-line-write 0.85s ease;
}
.wc-overview-card[data-nav="diary"] .wc-ov-icon path:last-of-type {
    transform-box: fill-box; transform-origin: 8% 92%;
}
.wc-overview-card[data-nav="diary"]:hover .wc-ov-icon path:last-of-type {
    animation: ov-ico-pen-write 0.85s ease-in-out;
}
@keyframes ov-ico-line-write {
    0% { stroke-dashoffset: 0; }
    40% { stroke-dashoffset: 1; }
    100% { stroke-dashoffset: 0; }
}
@keyframes ov-ico-pen-write {
    0%, 100% { transform: rotate(0deg); }
    25% { transform: rotate(-9deg); }
    55% { transform: rotate(6deg); }
    80% { transform: rotate(-3deg); }
}

/* 今日支出：表针绕表心快转一圈 */
.wc-overview-card[data-nav="finance"] .wc-ov-icon path {
    transform-box: view-box; transform-origin: 12px 12px;
}
.wc-overview-card[data-nav="finance"]:hover .wc-ov-icon path {
    animation: ov-ico-hand-spin 0.7s cubic-bezier(0.5, 0.05, 0.3, 1);
}
@keyframes ov-ico-hand-spin {
    to { transform: rotate(360deg); }
}

/* 学习进度：书本被轻轻拿起翻看再放回 */
.wc-overview-card[data-nav="study"] .wc-ov-icon path {
    transform-box: fill-box; transform-origin: 50% 100%;
}
.wc-overview-card[data-nav="study"]:hover .wc-ov-icon path {
    animation: ov-ico-book-pick 0.8s cubic-bezier(0.34, 1.3, 0.5, 1);
}
@keyframes ov-ico-book-pick {
    0%, 100% { transform: rotate(0deg) scale(1); }
    40% { transform: rotate(-6deg) scale(1.06); }
    70% { transform: rotate(3deg) scale(1.02); }
}

/* 系统减少动态效果偏好时禁用图标 hover 动画 */
@media (prefers-reduced-motion: reduce) {
    .wc-overview-card[data-nav]:hover .wc-ov-icon polyline,
    .wc-overview-card[data-nav]:hover .wc-ov-icon path { animation: none; }
}

/* animal-island 彩色卡片覆盖：还原 4 张概览卡的动森原色 */
.wc-overview-card.animal-card-app-yellow-DWB-L { background: #f7cd67 !important; border-color: #e6b94f !important; color: #725d42 !important; }
.wc-overview-card.animal-card-app-teal-R5kFG   { background: #82d5bb !important; border-color: #6ec3a8 !important; color: #ffffff !important; }
.wc-overview-card.animal-card-app-pink-3Eo8d   { background: #f8a6b2 !important; border-color: #ea8e9c !important; color: #ffffff !important; }
.wc-overview-card.animal-card-app-blue-GHH1a   { background: #889df0 !important; border-color: #7587dd !important; color: #ffffff !important; }
.wc-overview-card.animal-card-app-green-xlNUs  { background: #8ac68a !important; border-color: #74b074 !important; color: #ffffff !important; }
.wc-overview-card.animal-card-app-red-DzE0l    { background: #fc736d !important; border-color: #e85d57 !important; color: #ffffff !important; }

/* 彩色卡片内部文字与图标重新着色，避免被全局 var() 染灰 */
.wc-overview-card.animal-card-app-yellow-DWB-L .wc-ov-title,
.wc-overview-card.animal-card-app-yellow-DWB-L .wc-ov-num,
.wc-overview-card.animal-card-app-yellow-DWB-L .wc-ov-hint,
.wc-overview-card.animal-card-app-yellow-DWB-L .wc-ov-action { color: #725d42; }
.wc-overview-card.animal-card-app-yellow-DWB-L .wc-ov-icon { background: rgba(255,255,255,0.55); color: #725d42; }
.wc-overview-card.animal-card-app-yellow-DWB-L .wc-ov-action { border-top-color: rgba(114,93,66,0.25); }

.wc-overview-card.animal-card-app-teal-R5kFG  .wc-ov-title,
.wc-overview-card.animal-card-app-teal-R5kFG  .wc-ov-num,
.wc-overview-card.animal-card-app-teal-R5kFG  .wc-ov-hint,
.wc-overview-card.animal-card-app-teal-R5kFG  .wc-ov-action,
.wc-overview-card.animal-card-app-pink-3Eo8d  .wc-ov-title,
.wc-overview-card.animal-card-app-pink-3Eo8d  .wc-ov-num,
.wc-overview-card.animal-card-app-pink-3Eo8d  .wc-ov-hint,
.wc-overview-card.animal-card-app-pink-3Eo8d  .wc-ov-action,
.wc-overview-card.animal-card-app-blue-GHH1a  .wc-ov-title,
.wc-overview-card.animal-card-app-blue-GHH1a  .wc-ov-num,
.wc-overview-card.animal-card-app-blue-GHH1a  .wc-ov-hint,
.wc-overview-card.animal-card-app-blue-GHH1a  .wc-ov-action,
.wc-overview-card.animal-card-app-green-xlNUs .wc-ov-title,
.wc-overview-card.animal-card-app-green-xlNUs .wc-ov-num,
.wc-overview-card.animal-card-app-green-xlNUs .wc-ov-hint,
.wc-overview-card.animal-card-app-green-xlNUs .wc-ov-action,
.wc-overview-card.animal-card-app-red-DzE0l   .wc-ov-title,
.wc-overview-card.animal-card-app-red-DzE0l   .wc-ov-num,
.wc-overview-card.animal-card-app-red-DzE0l   .wc-ov-hint,
.wc-overview-card.animal-card-app-red-DzE0l   .wc-ov-action { color: #ffffff; }

.wc-overview-card.animal-card-app-teal-R5kFG  .wc-ov-icon,
.wc-overview-card.animal-card-app-pink-3Eo8d  .wc-ov-icon,
.wc-overview-card.animal-card-app-blue-GHH1a  .wc-ov-icon,
.wc-overview-card.animal-card-app-green-xlNUs .wc-ov-icon,
.wc-overview-card.animal-card-app-red-DzE0l   .wc-ov-icon { background: rgba(255,255,255,0.28); color: #ffffff; }

.wc-overview-card.animal-card-app-teal-R5kFG  .wc-ov-action,
.wc-overview-card.animal-card-app-pink-3Eo8d  .wc-ov-action,
.wc-overview-card.animal-card-app-blue-GHH1a  .wc-ov-action,
.wc-overview-card.animal-card-app-green-xlNUs .wc-ov-action,
.wc-overview-card.animal-card-app-red-DzE0l   .wc-ov-action { border-top-color: rgba(255,255,255,0.35); }

/* 彩色卡片 hover：保持彩色不被 primary 描边盖掉（资料卡保留；天气卡悬浮已撤故摘出） */
.wc-profile-card.animal-card-DJ515:hover { border-color: rgba(0,0,0,0.18); }

.wc-ov-icon {
    width: 44px; height: 44px; border-radius: var(--radius-md);
    background: var(--color-primary-alpha); color: var(--color-primary);
    display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}

.wc-ov-body { flex: 1; min-width: 0; }

.wc-ov-title { font-size: 13px; color: var(--color-text-secondary); font-weight: 600; margin-bottom: 3px; }

.wc-ov-hint { font-size: 11px; color: var(--color-text-muted); line-height: 1.4; }

.wc-ov-comment {
    font-size: 11px;
    color: var(--color-primary);
    margin-top: 4px;
    line-height: 1.4;
    opacity: 0.85;
}

.wc-ov-num { font-size: 28px; font-weight: 700; color: var(--color-primary); flex-shrink: 0; line-height: 1; }

/* 数字滚动（Motion.tickTo）期间等宽数字，防止宽度抖动 */
.wc-ov-num,
.wc-budget-progress-pct,
#consecutive-checkin,
#sub-checkin,
.growth-days { font-variant-numeric: tabular-nums; }

.wc-ov-dot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; }
.wc-ov-dot-green { background: var(--color-progress-success); }

/* 预算进度条 */
.wc-budget-progress { margin-top: 8px; width: 100%; }
.wc-budget-progress-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 4px; }
.wc-budget-progress-label { font-size: 11px; color: inherit; opacity: 0.8; }
.wc-budget-progress-pct { font-size: 12px; font-weight: 600; color: inherit; }
.wc-budget-progress-bar {
    width: 100%; height: 6px; background: rgba(0,0,0,0.12);
    border-radius: 3px; overflow: hidden;
}
.wc-budget-progress-fill {
    width: 100%; height: 100%; border-radius: 3px;
    background: var(--color-progress-success);
    transform-origin: left;
    transition: transform 0.4s ease, background 0.3s ease;
}
.wc-budget-progress-fill.warning { background: var(--color-progress-warning); }
.wc-budget-progress-fill.danger { background: var(--color-progress-danger); }
.wc-budget-progress-detail { font-size: 10px; color: inherit; opacity: 0.7; margin-top: 3px; }

/* 今日计划 */
.wc-today-plan {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    padding: 20px 24px;
    box-shadow: var(--shadow-sm);
}

.wc-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
}

.wc-section-title {
    font-size: 15px;
    font-weight: 600;
    color: var(--color-text);
    margin: 0;
}

.wc-today-date {
    font-size: 12px;
    color: var(--color-text-muted);
}

.wc-today-plan-content {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

/* 今日计划 - 分组标题 */
.wc-tp-group-title {
    font-size: 12px;
    font-weight: 600;
    color: var(--color-text-secondary);
    margin-bottom: 6px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.wc-tp-group-title .group-count {
    font-size: 11px;
    font-weight: 400;
    color: var(--color-text-muted);
    background: var(--color-primary-alpha);
    padding: 1px 7px;
    border-radius: var(--radius-full);
}

/* 今日计划 - 任务项 */
.wc-tp-task-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.wc-tp-task-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    background: var(--color-bg);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: background var(--transition-fast), box-shadow var(--transition-fast);
}

.wc-tp-task-item:hover {
    background: var(--color-surface-elevated);
    box-shadow: var(--shadow-sm);
}

.wc-tp-priority-bar {
    width: 3px;
    height: 24px;
    border-radius: 2px;
    flex-shrink: 0;
}

.wc-tp-priority-bar.high { background: var(--color-priority-high); }
.wc-tp-priority-bar.medium { background: var(--color-priority-medium); }
.wc-tp-priority-bar.low { background: var(--color-priority-low); }

.wc-tp-task-text {
    flex: 1;
    min-width: 0;
    font-size: 13px;
    color: var(--color-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.wc-tp-task-item.overdue .wc-tp-task-text {
    color: var(--color-danger);
}

.wc-tp-task-meta {
    font-size: 11px;
    color: var(--color-text-muted);
    flex-shrink: 0;
    white-space: nowrap;
}

.wc-tp-task-item.overdue .wc-tp-task-meta {
    color: var(--color-danger);
    font-weight: 500;
}

/* 今日计划 - 学习进度项 */
.wc-tp-study-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.wc-tp-study-item {
    padding: 10px 12px;
    background: var(--color-bg);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: background var(--transition-fast), box-shadow var(--transition-fast);
}

.wc-tp-study-item:hover {
    background: var(--color-surface-elevated);
    box-shadow: var(--shadow-sm);
}

.wc-tp-study-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
}

.wc-tp-study-title {
    font-size: 13px;
    font-weight: 500;
    color: var(--color-text);
}

.wc-tp-study-pct {
    font-size: 12px;
    font-weight: 600;
    color: var(--color-primary);
}

.wc-tp-study-bar {
    width: 100%;
    height: 6px;
    background: var(--color-border);
    border-radius: 3px;
    overflow: hidden;
}

.wc-tp-study-bar-fill {
    width: 100%; height: 100%;
    border-radius: 3px;
    background: var(--color-primary);
    transform-origin: left;
    transition: transform 0.4s ease;
}

.wc-tp-study-bar-fill.complete {
    background: var(--color-progress-success);
}

.wc-tp-study-detail {
    font-size: 11px;
    color: var(--color-text-muted);
    margin-top: 4px;
}

/* 今日计划 - 空状态 */
.wc-tp-empty {
    text-align: center;
    padding: 20px 16px;
    color: var(--color-text-muted);
    font-size: 13px;
    line-height: 1.8;
}

.wc-tp-empty-icon {
    font-size: 28px;
    margin-bottom: 6px;
    opacity: 0.6;
}

.wc-greeting {
    background: var(--color-surface); border: 1px solid var(--color-border);
    border-radius: var(--radius-xl); padding: 24px 28px;
    display: flex; align-items: center; justify-content: center; gap: 32px; box-shadow: var(--shadow-sm);
}

.wc-greeting-left { display: flex; align-items: center; justify-content: center; gap: 16px; flex-shrink: 0; }
.wc-greeting-img { font-size: 40px; line-height: 1; }

.wc-greeting-title { font-size: 22px; font-weight: 700; color: var(--color-text); margin: 0 0 4px; }

.wc-greeting-meta {
    font-size: 12px; color: var(--color-text-muted);
    display: flex; gap: 8px; align-items: center; margin-bottom: 4px;
}

.wc-greeting-growth { font-size: 12px; color: var(--color-text-muted); }

/* 天气卡片（侧边栏 teal 卡片） */
.wc-weather-card {
    border-radius: var(--radius-xl) !important;
}
/* hover 悬浮已撤（transform/阴影均不再变化） */
.wc-weather-detail {
    display: none; /* 已废弃 */
}
.wc-weather-detail span { display: inline-flex; align-items: center; gap: 3px; }
.weather-sep { opacity: 0.35; margin: 0 2px; }

/* 天气详情弹窗 · 气象仪表舱（E）—— 三段式：皮革舱头 / 可滚 body / 常驻 footer */
#weather-detail-modal {
    --wx-mono: 'JetBrains Mono', ui-monospace, Menlo, Consolas, monospace;
    --wx-serif: 'Playfair Display', Georgia, 'Times New Roman', serif;
    --wx-sans: 'Source Sans 3', system-ui, -apple-system, sans-serif;
    --wx-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
    /* 性能（2026-08-31）：.modal 基类的全屏 backdrop-filter: blur(4px) 在弹窗带着常驻微动
       （转针/led 呼吸/光晕脉冲）时每帧重采样整个视口，实测把帧率从满帧压到 ~29fps；
       天气弹窗主动放弃模糊、用加深的蒙版补偿层次感。grain 的 mix-blend-mode 同因移除
       （混合上下文强制整个头部参与每帧重合成），透明度略降补偿 */
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: rgba(61, 50, 41, 0.55) !important;
}
/* 深色模式：基类蒙版是全透明（原靠 blur 提供隔离感），blur 移除后补深色蒙版 */
body.dark-mode #weather-detail-modal { background: rgba(20, 16, 12, 0.55) !important; }
#weather-detail-modal .modal-content.weather-detail-modal-content {
    width: min(92vw, 880px);
    max-width: calc(100vw - 24px);
    max-height: min(90vh, 760px);
    padding: 0;
    border: 1px solid var(--color-border-strong);
    border-radius: 28px;
    box-shadow: var(--shadow-xl), inset 0 1px 0 rgba(255,255,255,.6);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: var(--color-surface);
}
/* 皮革仪表舱头（常驻） */
.wx-head {
    flex: 0 0 auto; position: relative; overflow: hidden;
    background: linear-gradient(158deg, #3a2a20 0%, #4d3829 52%, #5e4533 100%);
    box-shadow: inset 0 1px 0 rgba(232,212,138,.22), inset 0 -10px 24px rgba(0,0,0,.28);
    padding: 18px 26px 20px;
}
/* mix-blend-mode 已移除（2026-08-31 性能）：混合上下文强制整个头部参与每帧重合成，
   头部内常驻微动（转针/led/太阳）实测因此多花 ~10ms/帧；改普通叠加 + 透明度补偿 */
.wx-head::before { content:""; position:absolute; inset:0; background: var(--wx-grain); opacity:.06; pointer-events:none; }
.wx-head::after { content:""; position:absolute; left:0; right:0; bottom:0; height:3px; background: linear-gradient(90deg, transparent, var(--color-accent), var(--color-accent-light), var(--color-accent), transparent); opacity:.85; }
.cock-row { position:relative; z-index:2; display:grid; grid-template-columns: 1fr auto 1fr; align-items:center; column-gap:24px; }
.cock-left { display:flex; flex-direction:column; justify-content:center; align-items:flex-start; gap:8px; min-width:0; }
.cock-center { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px; justify-self:center; min-width:0; }
.cock-kicker { font-family: var(--wx-mono); font-size:10px; letter-spacing:.3em; text-transform:uppercase; color: rgba(232,212,138,.62); display:flex; align-items:center; gap:8px; }
.cock-kicker .led { width:7px; height:7px; border-radius:50%; background: var(--color-accent-light); box-shadow:0 0 8px var(--color-accent-light); }
.cock-temp { font-family: var(--wx-mono); font-weight:600; font-size: clamp(48px, 9vw, 76px); line-height:.9; color: var(--color-accent-light); letter-spacing:-.02em; font-variant-numeric: tabular-nums; text-shadow:0 0 18px rgba(232,212,138,.35); text-align:center; justify-self:center; white-space:nowrap; }
.cock-temp .u { font-size:.34em; color: rgba(232,212,138,.62); }
.cock-meta { display:flex; align-items:center; gap:12px; font-size:12px; color: rgba(255,247,228,.78); flex-wrap:wrap; }
.cock-meta .desc { font-family: var(--wx-serif); font-style:italic; font-size:17px; color:#F4E4BC; }
.cock-meta .dot { width:3px; height:3px; border-radius:50%; background: rgba(232,212,138,.62); }
.cock-gauge { justify-self:end; position:relative; width:168px; height:96px; }
.cock-gauge svg { width:168px; height:96px; overflow:visible; display:block; }
/* 指针辉光走 CSS drop-shadow（GPU 合成滤镜）：
   原 SVG feGaussianBlur filter 跟随指针每帧旋转整块重算，是把弹窗帧率压到 ~29fps 的实测元凶之一；
   CSS 滤镜与 SVG 滤镜视觉等效（金色柔光），但旋转时不再逐帧 CPU 模糊 */
.cock-gauge .wx-g-needle { filter: drop-shadow(0 0 2px rgba(232,212,138,.95)) drop-shadow(0 1px 4px rgba(232,212,138,.5)); }
/* 常驻微动元素提升为独立合成层：led 呼吸 / 太阳移动 / 光晕脉冲 / 仪表盘转针全部位于
   wx-head（带 grain 混合 + 渐变条）内部，不提层时任何一个微动都会让整个头部
   合成区每帧重绘（三个循环叠加实测把帧率锁死在 ~30fps；提层后重绘范围缩到元素自身） */
.cock-kicker .led { will-change: opacity; }
.cock-gauge .emoji { will-change: transform; }
.cock-gauge .eg { will-change: transform; }
.cock-gauge svg { will-change: transform; }
/* left/top 钉到包含块原点（2026-09-01 修复）：placeSun 的 quickSetter 写 transform 平移，
   transform 相对元素自身 static 位置叠加——不钉原点时 inline 行盒把基准偏到 (~84,~12)，
   图标被推出仪表盘右缘直飘出弹窗；钉原点后 transform 语义与旧 style.left/top 写法一致 */
.cock-gauge .emoji { position:absolute; left:0; top:0; font-size:24px; line-height:1; filter: drop-shadow(0 2px 6px rgba(0,0,0,.45)); z-index:2; pointer-events:none; }
.cock-gauge .eg { position:absolute; left:0; top:0; width:34px; height:34px; border-radius:50%; background: radial-gradient(circle, rgba(232,212,138,.85), rgba(232,212,138,0) 70%); z-index:1; pointer-events:none; }
.wx-x { position:absolute; top:14px; right:18px; z-index:3; width:30px; height:30px; border-radius: var(--radius-full); border:1px solid rgba(232,212,138,.4); background: rgba(0,0,0,.18); color: var(--color-accent-light); cursor:pointer; font-size:14px; display:grid; place-items:center; transition: var(--transition-fast); }
.wx-x:hover { background: var(--color-accent-light); color:#3a2a20; transform: rotate(90deg); }
/* 可滚 body */
.wx-body { flex:1 1 auto; overflow-y:auto; overflow-x:hidden; overscroll-behavior:contain; min-height:0; position:relative; }
.wx-body::-webkit-scrollbar { width:8px; }
.wx-body::-webkit-scrollbar-thumb { background: var(--color-border-strong); border-radius:8px; border:2px solid var(--color-surface); }
/* 常驻 footer */
.wx-foot { flex:0 0 auto; display:flex; justify-content:flex-end; gap:10px; padding:13px 24px; border-top:1px solid var(--color-border); background: var(--color-surface); }
.wx-foot .wx-btn { font-family: var(--wx-sans); font-size:13px; font-weight:600; cursor:pointer; border-radius: var(--radius-md); padding:9px 20px; transition: var(--transition-fast); background:transparent; border:1px solid var(--color-border-strong); color: var(--color-text-secondary); }
.wx-foot .wx-btn:hover { border-color: var(--color-primary); color: var(--color-primary); }
.wx-foot .wx-btn.primary { background: var(--color-primary); border-color: var(--color-primary); color:#fff; box-shadow:0 4px 14px rgba(139,90,74,.3); }
.wx-foot .wx-btn.primary:hover { background: var(--color-primary-dark); transform: translateY(-1px); }
/* section 标头 */
.wx-sec-h { display:flex; align-items:center; gap:10px; margin:18px 26px 10px; }
.wx-sec-h .no { font-family: var(--wx-mono); font-size:11px; color: var(--color-primary); background: var(--color-primary-alpha); border-radius: var(--radius-sm); padding:1px 6px; }
.wx-sec-h h4 { font-size:12px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color: var(--color-text-secondary); }
.wx-sec-h .ln { flex:1; height:1px; background: var(--color-border); }
/* 指标卡 */
.wx-cards { display:grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap:10px; padding:0 26px; }
.wx-card { position:relative; overflow:hidden; border:1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface-elevated); box-shadow: var(--shadow-sm), inset 0 1px 0 rgba(255,255,255,.8); padding:11px 13px; }
/* 注意：.wx-card 禁止加 CSS transition（尤其 transition:all）。
   入场动画走 GSAP .from(autoAlpha:0)，CSS transition 会与 GSAP immediateRender 抢占，
   导致 .from() 把「结束值」误记为隐藏态（opacity:0），卡片永远不显示（2026-07-31 修复）。
   悬浮上浮/光泽扫过也均由 GSAP 驱动，不依赖 CSS transition。 */
.wx-card .k { font-size:10px; letter-spacing:.12em; text-transform:uppercase; color: var(--color-text-muted); }
.wx-card .v { font-family: var(--wx-mono); font-size:19px; font-weight:600; margin-top:5px; font-variant-numeric: tabular-nums; color: var(--color-text); }
.wx-card .v small { font-size:11px; color: var(--color-text-muted); font-weight:400; }
.wx-card .bar { height:4px; border-radius: var(--radius-full); background: var(--color-border); overflow:hidden; margin-top:7px; }
.wx-card .bar i { display:block; height:100%; width:0; border-radius:inherit; background: linear-gradient(90deg, var(--color-primary-light), var(--color-warning)); }
.wx-card .sheen { position:absolute; top:0; left:-60%; width:40%; height:100%; background: linear-gradient(100deg, transparent, rgba(255,255,255,.7), transparent); transform: skewX(-18deg); pointer-events:none; }

/* 天气源选择器 */
.weather-source-options {
    display: flex;
    gap: 10px;
    width: 100%;
}
.weather-source-radio {
    flex: 1;
    cursor: pointer;
    margin: 0;
}
.weather-source-radio input {
    display: none;
}
.weather-source-option {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: 10px 12px;
    background: var(--color-surface);
    transition: border-color .2s, box-shadow .2s;
}
.weather-source-radio input:checked + .weather-source-option {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 2px var(--color-primary-alpha);
}
.weather-source-title {
    font-size: 14px;
    font-weight: 500;
    color: var(--color-text);
}
.weather-source-desc {
    font-size: 12px;
    color: var(--color-text-muted);
    margin-top: 2px;
}
.weather-key-row {
    display: none;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    width: 100%;
}
.weather-key-field {
    width: 100%;
    max-width: 420px;
}
/* 横向行变体（key 输入 + 帮助按钮，替换内联 style） */
.weather-key-field.weather-key-field-row {
    display: flex;
    align-items: center;
    gap: 8px;
    max-width: none;
}
.weather-key-label {
    display: block;
    font-size: 12px;
    color: var(--color-text-muted);
    margin-bottom: 4px;
}
/* WP11-R 复刻：32px 控件皮肤 */
.weather-key-field input[type="text"] {
    width: 100%;
    max-width: 420px;
    height: 32px;
    padding: 0 12px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    font-size: 13px;
    background: var(--color-surface);
}
.weather-key-row .ai-key-input-wrap {
    flex: 1;
    max-width: 320px;
}
.weather-key-row .ai-key-input-wrap input {
    width: 100%;
    height: 32px;
    padding: 0 40px 0 12px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    font-size: 13px;
    background: var(--color-surface);
}
.weather-key-row .settings-btn-secondary {
    flex-shrink: 0;
    height: 30px;
    padding: 0 16px;
    font-size: 12.5px;
}
.weather-key-tip {
    font-size: 12px;
    color: var(--color-warning);
    line-height: 1.5;
    max-width: 420px;
}

/* 逐时曲线 */
.wx-spark-wrap { padding:0 26px; }
.wx-spark { width:100%; height:92px; display:block; overflow:visible; }
.wx-spark .area { opacity:0; }
.wx-spark .line { fill:none; stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round; }
.wx-h-row { display:flex; gap:6px; overflow-x:auto; overflow-y:hidden; padding:8px 26px 4px; scrollbar-width:thin; }
.wx-h-row::-webkit-scrollbar { height:6px; }
.wx-h-row::-webkit-scrollbar-thumb { background: var(--color-border-strong); border-radius:6px; }
.wx-h-cell { flex:0 0 auto; min-width:54px; text-align:center; font-family: var(--wx-mono); }
.wx-h-cell .t { font-size:10px; color: var(--color-text-muted); }
.wx-h-cell .ic { font-size:16px; margin:2px 0; }
.wx-h-cell .tp { font-size:13px; font-weight:600; font-variant-numeric: tabular-nums; }
.wx-h-cell .rn { font-size:9px; color: var(--color-primary); min-height:12px; }
/* 逐日区间 */
.wx-d-row { padding:0 26px 6px; display:flex; flex-direction:column; gap:8px; }
.wx-d-line { display:grid; grid-template-columns: 52px 24px 1fr 70px; align-items:center; gap:10px; font-family: var(--wx-mono); }
.wx-d-line .day { font-size:12px; color: var(--color-text-secondary); }
.wx-d-line .ic { font-size:16px; text-align:center; }
.wx-d-line .track { position:relative; height:8px; border-radius: var(--radius-full); background: linear-gradient(90deg, #6E8CA6, #C4883A, #A65454); opacity:.2; }
.wx-d-line .track .seg { position:absolute; top:0; height:100%; border-radius: var(--radius-full); background: linear-gradient(90deg, #6E8CA6, #C4883A, #A65454); box-shadow:0 0 0 1px rgba(61,50,41,.1); transform: scaleX(0); transform-origin:left; }
.wx-d-line .rg { font-size:12px; text-align:right; font-variant-numeric: tabular-nums; }
.wx-d-line .rg .uv { color: var(--color-warning); }

.wc-greeting-quote {
    flex: 1; color: var(--color-text-secondary); text-align: right;
}

.wc-quote-mark {
    font-size: 20px; font-family: Georgia, serif;
    color: var(--color-primary); opacity: 0.4;
}
.wc-quote-end { }

.daily-quote {
    display: inline;
    font-size: 13px; color: var(--color-text-secondary);
    line-height: 1.7; font-style: italic; margin: 0;
}

@media (max-width: 768px) {
    .wc-dual-cards { grid-template-columns: 1fr; }
    .wc-profile-stats { display: none; }
    .wc-greeting { flex-direction: column; gap: 16px; }
    .wc-greeting-quote { display: none; }
}

.dark-mode .today-card:hover {
    border-color: var(--color-primary);
}

/* 欢迎页防御性默认样式 */
#welcome-section {
    display: block;
    /* 不常驻 will-change：常驻会让欢迎页大段文字退化为灰阶抗锯齿而发糊（见 agent.css 同处说明）；
       welcome 退场动画由 GSAP 临时提升图层即可 */
}

/* 欢迎页卡片间距 */
#welcome-section .wc-profile-card,
#welcome-section .wc-dual-cards,
#welcome-section .wc-overview,
#welcome-section .wc-today-plan,
#welcome-section .wc-greeting {
    margin-bottom: 28px;
}

/* 城市级联选择器 */
.city-cascade { display: flex; gap: 8px; }
.city-select { flex: 1; min-width: 0; padding: 8px 10px; border: 1px solid var(--color-border); border-radius: var(--radius-sm); background: var(--color-bg); color: var(--color-text); font-size: 13px; }
.city-select:disabled { opacity: 0.5; }
body.dark-mode .city-select { background: var(--color-surface-dark); border-color: var(--color-border-dark); }

/* 加载更多按钮 */
.load-more-btn {
    display: block; width: 100%; padding: 10px; margin: 12px 0;
    background: var(--color-surface); border: 1px solid var(--color-border);
    border-radius: var(--radius-md); cursor: pointer; text-align: center;
    color: var(--color-text-secondary); font-size: 13px;
    transition: background var(--transition-fast);
}
.load-more-btn:hover { background: var(--color-bg); color: var(--color-primary); }
body.dark-mode .load-more-btn { background: var(--color-surface-dark); border-color: var(--color-border-dark); }

/* 无限滚动哨兵元素 + 上限提示 */
.scroll-sentinel { height: 1px; width: 100%; }
.scroll-limit-hint {
    text-align: center;
    padding: 14px 16px;
    margin: 12px 0;
    background: var(--color-primary-alpha);
    border: 1px dashed var(--color-primary);
    border-radius: var(--radius-md);
    color: var(--color-primary);
    font-size: 13px;
    line-height: 1.6;
}

/* ── 动森风格导航图标装饰 ── */
.nav-icon {
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.nav-item {
    border: 1.5px solid rgba(139, 90, 74, 0.15);
    border-bottom: 2px solid rgba(139, 90, 74, 0.12);
    transition: background var(--transition-base), border-color var(--transition-base), transform var(--transition-fast), color var(--transition-base);
}

.nav-item:hover {
    border-bottom-color: rgba(139, 90, 74, 0.4);
    transform: translateY(-1px);
}

.nav-item.active {
    background: #8B5A4A;
    border-color: #6B4538;
    border-bottom-color: #6B4538;
    color: var(--color-text-on-primary);
}

.nav-item.active .nav-icon svg {
    stroke: #fff;
}

.nav-item.active .nav-icon svg[fill="currentColor"] {
    fill: #fff;
    stroke: none;
}

.nav-item.active .nav-text {
    color: var(--color-text-on-primary);
}

/* ── 顶栏 Time 小组件（动森风格） ── */
.navbar-time {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 5px 12px;
    border-radius: 50px;
    background: rgba(247, 243, 223, 0.6);
    border: 1.5px solid rgba(139, 90, 74, 0.18);
    border-bottom: 2px solid rgba(139, 90, 74, 0.12);
    font-size: 12px;
    color: #725d42;
    line-height: 1.2;
    white-space: nowrap;
    user-select: none;
}

.navbar-time-date {
    font-weight: 500;
    opacity: 0.85;
}

.navbar-time-clock {
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.3px;
}
body.dark-mode .load-more-btn:hover { background: var(--color-bg); }