/* --- style.css 顶部 --- */

/* 1. 定义 Cinzel (Logo 字体) */
@font-face {
    font-family: 'Cinzel';
    src: url('fonts/Cinzel.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

/* 2. 定义 Lato (正文英文) */
@font-face {
    font-family: 'Lato';
    src: url('fonts/Lato-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

/* 3. 定义 Noto Sans SC (正文中文) */
@font-face {
    font-family: 'Noto Sans SC';
    src: url('fonts/NotoSansSC.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

/* 4. 定义 Ma Shan Zheng (书法字体) */
@font-face {
    font-family: 'Ma Shan Zheng';
    src: url('fonts/MaShanZheng.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

/* --- 下面保持你原有的 :root 和 body 设置 --- */
:root {
    /* ... */
    --transition-speed: 2.5s;
    --bg-start: #A0E6FF;
    --bg-end: #FFFACD;
    --celestial-start: #FFFFFF;
    --celestial-end: #FEF08A;
    --color-exercise: #ef4444;
    --color-sleep: #3b82f6;
    --color-focus: #10b981;
    --color-holiday: #22c55e;
    --color-diary: #f59e0b;
    --color-task: #eab308;
    --rail-x: 13rem;
    /* 修改：beam 颜色跟随主题时间颜色，而不是固定橙色 */
    --current-beam-color: var(--hud-time-color, #38BDF8);
    --current-beam-color-rgb: 56, 189, 248;
    /* 默认天蓝色 RGB */
    --base-font-size: 16px;
}

/* Global Font: Lato + Noto Sans SC */
body {
    font-family: 'Lato', 'Noto Sans SC', sans-serif;
    font-size: var(--base-font-size);
    width: 100vw;

    /* 核心修改：先写 100vh 兼容旧手机，再写 100dvh */
    height: 100vh;
    height: 100dvh;

    overflow: hidden;
    /* 禁止 body 滚动，只让内部容器滚动 */
    background: linear-gradient(to bottom, var(--bg-start), var(--bg-end));
    color: var(--text);
    transition: background 1.5s ease, color 1s ease;
    overscroll-behavior-y: none;
}

/* Specific Logo Font */
.font-logo {
    font-family: 'Cinzel', serif;
    font-weight: 400;
}

/* Themes */
body[data-theme="dawn"] {
    --text: #334155;
    --text-sec: #64748b;
    --primary: #fb7185;
    --line: rgba(0, 0, 0, 0.08);
    --card-bg: rgba(255, 248, 248, 0.9);
    --card-border: rgba(255, 226, 226, 0.8);
    --card-shadow: 0 10px 30px -5px rgba(251, 113, 133, 0.1);
    --card-highlight: inset 1px 1px 0 rgba(255, 255, 255, 0.95);
    --rail-color: rgba(0, 0, 0, 0.08);
    --glow-color: rgba(251, 113, 133, 0.5);
    --hud-time-color: #F59E0B;
    --current-beam-color-rgb: 245, 158, 11;
    /* amber */
}

body[data-theme="day"] {
    --text: #1e293b;
    --text-sec: #64748b;
    --primary: #f59e0b;
    --line: rgba(0, 0, 0, 0.06);
    --card-bg: rgba(255, 255, 255, 0.85);
    --card-border: rgba(255, 255, 255, 0.9);
    --card-shadow: 0 10px 30px -5px rgba(69, 90, 100, 0.05);
    --card-highlight: inset 1px 1px 0 rgba(255, 255, 255, 1);
    --rail-color: rgba(0, 0, 0, 0.08);
    --glow-color: rgba(253, 224, 71, 0.6);
    --hud-time-color: #38BDF8;
    --current-beam-color-rgb: 56, 189, 248;
    /* sky blue */
}

body[data-theme="dusk"] {
    --text: #f8fafc;
    --text-sec: #cbd5e1;
    --primary: #fbbf24;
    --line: rgba(255, 255, 255, 0.15);
    --card-bg: rgba(45, 35, 80, 0.8);
    --card-border: rgba(251, 191, 36, 0.3);
    --card-shadow: 0 15px 40px -5px rgba(0, 0, 0, 0.4);
    --card-highlight: inset 1px 1px 0 rgba(255, 255, 255, 0.15);
    --rail-color: rgba(255, 255, 255, 0.15);
    --glow-color: rgba(251, 191, 36, 0.4);
    --hud-time-color: #EA580C;
    --current-beam-color-rgb: 234, 88, 12;
    /* orange */
}

body[data-theme="night"] {
    --text: #f8fafc;
    --text-sec: #94a3b8;
    --primary: #818cf8;
    --line: rgba(255, 255, 255, 0.1);
    --card-bg: rgba(15, 23, 42, 0.85);
    --card-border: rgba(148, 163, 184, 0.2);
    --card-shadow: 0 15px 40px -5px rgba(2, 6, 23, 0.6);
    --card-highlight: inset 1px 1px 0 rgba(255, 255, 255, 0.1);
    --rail-color: rgba(255, 255, 255, 0.1);
    --glow-color: rgba(99, 102, 241, 0.5);
    --hud-time-color: #818CF8;
    --current-beam-color-rgb: 129, 140, 248;
    /* indigo */
    text-shadow: 0 0 15px #818CF8;
}

/* --- Premium Themes (Dynamic Time) --- */

/* --- Forest Theme (Nature) --- */
/* Base (Use Day as default if needed, or define common props) */
body[data-theme^="forest"] {
    --primary: #fbbf24;
    /* Gold */
    --line: rgba(255, 255, 255, 0.1);
    --rail-color: rgba(251, 191, 36, 0.2);
    --glow-color: rgba(251, 191, 36, 0.4);
    --hud-time-color: #FBBF24;
    --celestial-start: #fcd34d;
    --celestial-end: #d97706;
    /* Golden Sun */
}

/* Forest Dawn: Misty Green */
body[data-theme="forest-dawn"] {
    --text: #14532d;
    /* Dark Green */
    --text-sec: #3f6212;
    --card-bg: rgba(255, 255, 255, 0.6);
    /* More opaque */
    --card-border: rgba(163, 230, 53, 0.4);
    --bg-start: #ecfccb;
    --bg-end: #d9f99d;
    --primary: #65a30d;
}

/* Forest Day: Bright Emerald */
body[data-theme="forest-day"] {
    --text: #064e3b;
    /* Deep Emerald */
    --text-sec: #065f46;
    --card-bg: rgba(255, 255, 255, 0.65);
    /* Clean White Glass */
    --card-border: rgba(52, 211, 153, 0.4);
    --bg-start: #d1fae5;
    --bg-end: #a7f3d0;
    --primary: #059669;
}

/* Forest Dusk: Golden Hour */
body[data-theme="forest-dusk"] {
    --text: #fffbeb;
    --text-sec: #fde68a;
    --primary: #d97706;
    --card-bg: rgba(120, 53, 15, 0.75);
    --card-border: rgba(251, 191, 36, 0.5);
    --bg-start: #064e3b;
    --bg-end: #d97706;
}

/* Forest Night: Deep Magic */
body[data-theme="forest-night"] {
    --text: #ecfdf5;
    --text-sec: #6ee7b7;
    --card-bg: rgba(2, 44, 34, 0.9);
    --card-border: rgba(52, 211, 153, 0.3);
    --card-shadow: 0 0 20px rgba(6, 78, 59, 0.8);
    --bg-start: #022c22;
    --bg-end: #064e3b;
    --glow-color: rgba(52, 211, 153, 0.6);
}


/* --- Mountain Theme (Zen & Sacred Snow) --- */
/* Base - Ethereal, Meditative */
body[data-theme^="mountain"] {
    --primary: #bae6fd;
    /* Very Pale Blue */
    --line: rgba(255, 255, 255, 0.1);
    --rail-color: rgba(186, 230, 253, 0.15);
    --glow-color: rgba(186, 230, 253, 0.4);
    --hud-time-color: #e0f2fe;
    --celestial-start: #fbbf24;
    --celestial-end: #fcd34d;
    /* Pure Spirit Gold */
}

/* Mountain Dawn: Fresh Morning Light (Ethereal & Calm) */
body[data-theme="mountain-dawn"] {
    --text: #475569;
    --text-sec: #94a3b8;
    --card-bg: rgba(255, 255, 255, 0.7);
    --card-border: rgba(255, 255, 255, 0.5);
    --scenic-bg: linear-gradient(to bottom, #fef3c7 0%, #e2e8f0 20%, #94a3b8 60%, #64748b 100%);
    background: linear-gradient(to bottom, #f0f9ff 0%, #e0f2fe 50%, #fff7ed 100%);
    backdrop-filter: blur(16px);
    opacity: 0.95 !important;
}

/* Mountain Day: High Altitude Silence */
body[data-theme="mountain-day"] {
    --text: #0c4a6e;
    --text-sec: #0369a1;
    /* Darker text for contrast on pale bg */
    --card-bg: rgba(255, 255, 255, 0.25);
    /* Frosted Glass */
    --card-border: rgba(255, 255, 255, 0.6);
    --bg-start: #e0f2fe;
    --bg-end: #bae6fd;
    /* Pale minimalist sky */
    --primary: #0284c7;
}

/* Mountain Dusk: Divine Alpenglow */
body[data-theme="mountain-dusk"] {
    --text: #fff1f2;
    --text-sec: #fda4af;
    --primary: #f43f5e;
    --card-bg: rgba(255, 255, 255, 0.1);
    --card-border: rgba(244, 63, 94, 0.4);
    --bg-start: #4338ca;
    --bg-end: #f43f5e;
    /* Indigo -> Pink */
}

/* Mountain Night: Void of Zen */
body[data-theme="mountain-night"] {
    --text: #e2e8f0;
    --text-sec: #94a3b8;
    --card-bg: rgba(2, 6, 23, 0.8);
    --card-border: rgba(148, 163, 184, 0.2);
    --bg-start: #020617;
    --bg-end: #0f172a;
}

/* --- Scenic Outlines (Dynamic Color Masks) --- */
#scenic-layer {
    width: 100%;
    height: 55vh !important;
    /* Increased height for majesty */
    background: var(--scenic-bg, var(--scenic-color));
    -webkit-mask-size: cover;
    mask-size: cover;
    -webkit-mask-position: bottom;
    mask-position: bottom;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    mix-blend-mode: normal;
    /* Removed overlay to ensure realistic colors */
    transition: background 2s ease, opacity 2s ease;
    transform-origin: bottom center;
}

/* Animation: Very Gentle Forest Sway */
@keyframes forest-sway {

    0%,
    100% {
        transform: scale(1.02) skewX(0deg);
    }

    50% {
        transform: scale(1.02) skewX(0.5deg);
    }
}

/* --- Forest SVG (Realistic Pine Trees) --- */
body[data-theme^="forest"] {
    /* Complex Pine Tree Skyline (Realistic "Pro" Version) */
    /* 更加自然的松树轮廓：高低错落，树冠尖锐但圆润，模拟真实的针叶林天际线 */
    --scenic-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 320'%3E%3Cpath fill='%23000' d='M0,320 L0,250 L10,230 Q15,220 20,230 L30,250 L40,210 Q45,200 50,210 L65,260 L80,180 Q85,170 90,180 L110,260 L125,200 Q130,190 135,200 L150,260 L165,150 Q170,140 175,150 L200,260 L215,190 Q220,180 225,190 L240,260 L255,220 Q260,210 265,220 L280,260 L295,160 Q300,150 305,160 L330,260 L345,200 Q350,190 355,200 L370,260 L390,140 Q395,130 400,140 L430,260 L445,210 Q450,200 455,210 L470,260 L485,170 Q490,160 495,170 L520,260 L540,130 Q545,120 550,130 L580,260 L595,200 Q600,190 605,200 L620,260 L635,160 Q640,150 645,160 L670,260 L690,140 Q695,130 700,140 L730,260 L745,210 Q750,200 755,210 L770,260 L785,170 Q790,160 795,170 L820,260 L840,130 Q845,120 850,130 L880,260 L895,200 Q900,190 905,200 L920,260 L935,160 Q940,150 945,160 L970,260 L990,140 Q995,130 1000,140 L1030,260 L1045,210 Q1050,200 1055,210 L1070,260 L1085,170 Q1090,160 1095,170 L1120,260 L1140,130 Q1145,120 1150,130 L1180,260 L1195,200 Q1200,190 1205,200 L1220,260 L1235,160 Q1240,150 1245,160 L1270,260 L1290,140 Q1295,130 1300,140 L1330,260 L1345,210 Q1350,200 1355,210 L1370,260 L1385,170 Q1390,160 1395,170 L1420,260 L1440,320 Z'%3E%3C/path%3E%3C/svg%3E");
}

body[data-theme^="forest"] #scenic-layer {
    -webkit-mask-image: var(--scenic-svg);
    mask-image: var(--scenic-svg);
    opacity: 0.95;
    /* PERF: Removed infinite animation to save battery */
    /* animation: forest-sway 10s ease-in-out infinite; */
    transform: scale(1.02);
}

/* Forest Colors (Realistic) */
body[data-theme="forest-dawn"] {
    --scenic-color: #2f3e46;
}

/* Dark Slate/Green */
body[data-theme="forest-day"] {
    --scenic-color: #1e3a29;
}

/* Deep Forest Green */
body[data-theme="forest-dusk"] {
    --scenic-color: #3f2e18;
}

/* Dark Brownish/Green */
body[data-theme="forest-night"] {
    --scenic-color: #011612;
}

/* Almost Black */


/* --- Mountain SVG (Centered Massif - High Middle, Low Sides) --- */
body[data-theme^="mountain"] {
    /* "Jade Dragon" Layout: Dominant central peak, sweeping low sides.
       Smooth Bezier curves for rounded snow-capped look. */
    --scenic-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 320'%3E%3Cpath fill='%23000' d='M0,320 L0,260 C120,280 240,220 320,180 C400,140 480,100 560,80 C620,65 680,40 720,40 C760,40 820,65 880,80 C960,100 1040,140 1120,180 C1200,220 1320,280 1440,260 L1440,320 Z'%3E%3C/path%3E%3C/svg%3E");
    /* More complex version with sub-peaks but maintaining Central Dominance */
    --scenic-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 320'%3E%3Cpath fill='%23000' d='M0,320 L0,280 C80,270 150,230 220,210 C290,190 320,140 380,130 C440,120 480,90 540,80 C600,70 660,30 720,30 C780,30 840,70 900,80 C960,90 1000,120 1060,130 C1120,140 1150,190 1220,210 C1290,230 1360,270 1440,280 L1440,320 Z'%3E%3C/path%3E%3C/svg%3E");
}

body[data-theme^="mountain"] #scenic-layer {
    -webkit-mask-image: var(--scenic-svg);
    mask-image: var(--scenic-svg);
    opacity: 1.0;
    animation: none;
    transform: scale(1.0);
    mix-blend-mode: normal;
}

/* Mountain Colors (Realistic Gradients) */


body[data-theme="mountain-day"] {
    /* Bright Snowy Peak: Pure white to soft blue-grey */
    --scenic-bg: linear-gradient(to bottom, #ffffff 0%, #e2e8f0 100%);
    opacity: 0.95 !important;
    filter: drop-shadow(0 0 15px rgba(0, 0, 0, 0.15));
}

body[data-theme="mountain-dusk"] {
    /* Alpenglow: Rose pink peak to violet shadow */
    --scenic-bg: linear-gradient(to bottom, #fb7185 0%, #818cf8 100%);
}

body[data-theme="mountain-night"] {
    /* Deep Silence: Dark slate gradient */
    --scenic-bg: linear-gradient(to bottom, #334155 0%, #0f172a 100%);
}


/* --- Layout & HUD --- */
#world-canvas {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    pointer-events: none;
}

.orbit-wrapper {
    position: fixed;
    left: -30vh;
    bottom: -60vh;
    width: 140vh;
    height: 140vh;
    pointer-events: none;
    z-index: 0;
    display: flex;
    justify-content: center;
    align-items: center;
}

.orbit-wheel {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    position: relative;
    transition: transform 3s cubic-bezier(0.4, 0, 0.2, 1);
}

.celestial-body {
    width: 150px;
    height: 150px;
    border-radius: 50%;
    position: absolute;
    left: 50%;
    top: 0;
    transform: translate(-50%, -50%);
    transition: all 1s;
}

.sun-body {
    background: radial-gradient(circle at 30% 30%, var(--celestial-start), var(--celestial-end));
    box-shadow: 0 0 50px var(--celestial-end);
}

.moon-body {
    top: 100%;
    background: transparent;
    transform: translate(-50%, -50%) rotate(180deg);
}

.crescent-shape {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    box-shadow: inset 20px 5px 0 0 #fdf6e3;
    filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.5));
}

.nav-capsule {
    display: flex;
    background: rgba(0, 0, 0, 0.1);
    border-radius: 999px;
    padding: 4px;
    border: 1px solid var(--line);
    backdrop-filter: blur(5px);
}

.nav-btn {
    padding: 12px 24px;
    border-radius: 999px;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    transition: background 0.3s, color 0.3s, transform 0.3s, box-shadow 0.3s;
    will-change: transform;
    color: var(--text-sec);
}

.nav-btn.active {
    background: var(--card-bg);
    color: var(--text);
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
    transform: scale(1.05);
}

#focus-hud {
    position: fixed;
    top: 50%;
    left: 1rem;
    width: 5rem;
    transform: translateY(-60%);
    z-index: 90;
    /* fix: ensure HUD is above z-50 cards */
    pointer-events: none;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    transition: opacity 0.3s ease;
}

.hud-day {
    font-size: 3rem;
    font-weight: 900;
    line-height: 0.9;
    color: var(--text);
    /* 移除光晕效果 */
    margin-bottom: 0.2rem;
}

.hud-time-wrapper {
    display: flex;
    align-items: center;
    height: 1.5rem;
}

.hud-time {
    font-size: 1.2rem;
    font-weight: 900;
    color: var(--hud-time-color);
    display: inline-block;
    transition: opacity 0.1s, transform 0.1s, color 1s;
}

.hud-time-updating {
    opacity: 0;
    transform: translateY(5px);
    filter: blur(4px);
}

.hud-meta {
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-sec);
    opacity: 0.9;
    margin-top: 0.2rem;
}

#center-guide-layer {
    position: fixed;
    top: 50%;
    left: 0;
    width: 100%;
    height: 0;
    /* 【核心修复】提升层级到 50，高于 content (10) 和 rail，确保 cursor 在最上层 */
    z-index: 50;
    pointer-events: none;
    transform: translateY(-0.5px);
    transition: opacity 0.3s ease;
}

/* Fixed Beam Logic */
.guide-beam {
    position: absolute;
    left: 7rem;
    width: calc(var(--rail-x) - 7rem);
    height: 2px;
    background-color: var(--current-beam-color);
    opacity: 0.5;
    top: 0;
    transform: translateY(-50%);
    transition: background-color 0.3s ease;
    pointer-events: none;
}

.guide-cursor {
    position: absolute;
    left: var(--rail-x);
    top: 0;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    /* 【恢复】背景还原为实心，作为唯一的指示点 */
    /* 【核心修复】强制不透明：使用 RGB 变量，或者 fallback 到 opacity 1 */
    background: rgb(var(--current-beam-color-rgb, 255, 255, 255));
    border: none;
    transform: translate(-50%, -50%);
    /* 【恢复】用户说光晕可以保留，只要位置固定 */
    box-shadow: 0 0 10px rgba(var(--current-beam-color-rgb, 255, 255, 255), 0.5);
    transition: top 0.1s cubic-bezier(0.25, 0.46, 0.45, 0.94), background-color 0.3s, box-shadow 0.3s;
    opacity: 1;
    /* 【核心修复】层级提升到最高，确保覆盖住 active 的点 (z-index 25) */
    z-index: 100;
    pointer-events: none;
}

.timeline-node-wrapper {
    position: absolute;
    left: var(--rail-x);
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 21;
    pointer-events: none;
}

.timeline-node {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background-color: #9ca3af;
    opacity: 0.6;
    transition: opacity 0.3s ease, transform 0.3s ease;
    will-change: transform, opacity;
}

.entry-item.active-focus .timeline-node {
    /* 【核心修复】当条目被选中时，隐藏它自己的点，只显示 guide-cursor */
    opacity: 0;
    transform: scale(0);
}

/* --- style.css --- */

.timeline-rail-outer {
    /* 必须是 fixed */
    position: fixed;
    left: 0;
    top: 0;

    /* 强制占满高度，防止变成“一段” */
    bottom: 0;
    height: 100%;
    height: 100dvh;
    /* 适配手机动态高度 */

    width: 100%;
    pointer-events: none;
    z-index: 1;
    /* 确保在背景之上，内容之下 */

    /* 如果之前修改过，保持只有边缘虚化 */
    mask-image: linear-gradient(to bottom, transparent 0%, black 5%, black 95%, transparent 100%);
    -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 5%, black 95%, transparent 100%);
}

.timeline-rail-container {
    position: absolute;
    left: var(--rail-x);
    top: 0;
    bottom: 0;
    width: 2px;
    transform: translateX(-50%);
    z-index: 1;
}

.timeline-rail-line {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(to bottom, transparent, var(--rail-color) 20%, var(--rail-color) 80%, transparent);
}


.timeline-rail-flow {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(180deg, transparent, var(--primary), transparent);
    background-size: 100% 500px;
    background-repeat: repeat-y;
    opacity: 0.3;
    /* PERF: Animation paused by default, JS enables during scroll */
    animation: flowLight 6s linear infinite paused;
}

/* PERF: Only animate when user is scrolling */
body.is-scrolling .timeline-rail-flow {
    animation-play-state: running;
}

@keyframes flowLight {
    0% {
        background-position: 0 -500px;
    }

    100% {
        background-position: 0 0;
    }
}

.task-highlight-line {
    position: absolute;
    left: var(--rail-x);
    width: 3px;
    transform: translateX(-50%);
    z-index: 5;
    opacity: 0.8;
    border-radius: 99px;
    background-size: 200% 200%;
    animation: taskFlow 3s ease infinite;
    pointer-events: none;
}

@keyframes taskFlow {
    0% {
        background-position: 0% 50%
    }

    50% {
        background-position: 100% 50%
    }

    100% {
        background-position: 0% 50%
    }
}

.task-line-label {
    position: absolute;
    font-weight: 700;
    font-size: 0.6rem;
    color: var(--text-sec);
    opacity: 0.7;
    white-space: nowrap;
    transform: translateX(-100%);
    left: -12px;
}

.label-mid {
    top: 50%;
    transform: translate(-100%, -50%);
    color: var(--current-beam-color);
    font-weight: 900;
    opacity: 1;
}

#main-container {
    position: fixed;
    /* 改为 fixed 确保稳固 */
    top: 0;
    left: 0;
    width: 100vw;
    height: 100%;
    /* 兼容旧浏览器 */
    height: 100dvh;
    /* 适配 iOS 动态状态栏 */
    overflow-y: scroll !important;
    /* 强制开启滚动条 */
    -webkit-overflow-scrolling: touch;
    /* 开启 iOS 惯性滚动 */
    scroll-behavior: auto !important;
    overflow-anchor: none;
    /* 禁止被动位置调整 */
    z-index: 10;
    touch-action: pan-y;
    /* 允许垂直拖动 */
}

#diary-list {
    /* 保持原有的留白 */
    padding-top: 45vh;
    padding-bottom: 50vh;

    /* 【核心】强制最小高度为屏幕高度 + 1像素
       这样永远都能滑得动，永远有回弹，不会被系统锁死 */
    min-height: 101vh !important;

    position: relative;
    z-index: 20;
    pointer-events: auto;
    /* 确保能接收触摸事件 */
}

.entry-item {
    pointer-events: none;
    /* 让触摸穿透条目容器，直达列表背景 */
    position: relative;
    width: 100%;

    /* 配合容器的 proximity */
    scroll-snap-align: center;

    /* 【核心修复】删除 scroll-snap-stop，防止快速滑动时被强制刹车 */
    /* scroll-snap-stop: always;  <-- 这行必须删掉 */

    display: flex;
    align-items: center;
    padding-block: 32px;
    pointer-events: none;

    /* PERF: CSS Containment 在 iOS Safari 上可能导致滚动卡顿，暂时禁用 */
    /* contain: style paint; */
    /* content-visibility: auto; */
    /* contain-intrinsic-size: 0 200px; */
}

.timeline-node-wrapper {
    position: absolute;
    left: var(--rail-x);
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 21;
    pointer-events: none;
}

.timeline-node {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background-color: #9ca3af;
    opacity: 0.6;
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.entry-item.active-focus .timeline-node {
    /* 【最终修复】恢复 active 点的可见性，但保持小尺寸 (6px) 和低层级 (z-index 25)
       这样它会被 cursor (z-index 30, 12px) 覆盖住，只在未对齐时露出来 */
    opacity: 1;
    transform: scale(1);
    width: 6px;
    height: 6px;
    background-color: var(--node-active-color, var(--primary));
    z-index: 25;
    box-shadow: none;
    /* 去掉大阴影，保持整洁 */
}

/* Tighter padding for cards */
.entry-card-wrapper {
    flex: 1;
    padding-left: calc(var(--rail-x) + 1rem);
    padding-right: 1rem;
    min-width: 0;
    transition: opacity 0.3s ease;
    pointer-events: auto;
}

/* ENTRY CARD STYLE FIX: Default border is transparent/subtle */
.entry-card {
    background-color: var(--card-bg);
    border: 1px solid transparent;
    box-shadow: var(--card-shadow), var(--card-highlight);
    cursor: pointer;
    border-radius: 14px;
    backdrop-filter: blur(20px);
    display: flex;
    overflow: hidden;
    min-height: 90px;
    position: relative;
    pointer-events: auto;
    transform-origin: left center;
    transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94),
        opacity 0.4s ease,
        border-color 0.3s,
        box-shadow 0.3s;

    /* 默认缩小一点点，增加聚焦时的反差感 */
    transform: scale(0.96);
    opacity: 0.7;
}

.entry-card.selecting:hover {
    transform: scale(0.98);
}

/* Selected state has clear border, NO BG COLOR CHANGE */
/* Selected state has clear border, NO BG COLOR CHANGE */
.entry-card.selected {
    border: 1px solid var(--primary);
    /* Thin crisp border */
    /* 【核心修复】使用多层阴影 + color-mix 实现柔光，而不是“盒子光” */
    /* Layer 1: Core Glow (Brighter, closer) */
    /* Layer 2: Ambient Atmosphere (Faint, wide) */
    box-shadow:
        0 0 40px color-mix(in srgb, var(--primary), transparent 70%),
        0 0 100px color-mix(in srgb, var(--primary), transparent 90%);

    transform: scale(1.02);
    background-color: var(--card-bg);
    opacity: 1 !important;
    transform: scale(1) !important;
}

/* Data Archive List Item Style Fix */
.archive-item {
    border: 1px solid transparent;
    transition: transform 0.2s, opacity 0.2s, background-color 0.2s;
}

/* Selected Archive Item: Only border changes, text remains readable */
.archive-item.selected {
    border-color: var(--primary);
    background-color: rgba(255, 255, 255, 0.1);
}

.glow-purple {
    box-shadow: 0 0 25px rgba(168, 85, 247, 0.6);
    border-color: rgba(168, 85, 247, 0.5);
    animation: pulseGlow 3s infinite ease-in-out;
}

@keyframes pulseGlow {
    0% {
        box-shadow: 0 0 20px rgba(168, 85, 247, 0.4);
    }

    50% {
        box-shadow: 0 0 35px rgba(168, 85, 247, 0.8);
    }

    100% {
        box-shadow: 0 0 20px rgba(168, 85, 247, 0.4);
    }
}

/* FIX: FORCE POINTER EVENTS AND Z-INDEX FOR FLOATING BUTTONS */
#filter-fab-group,
.fab-ai-btn,
.fab-btn {
    pointer-events: auto !important;
    z-index: 200 !important;
    cursor: pointer !important;
}

/* CRITICAL FIX: MODALS MUST BE HIGHER THAN BUTTONS (9999 > 200) */
.modal-overlay {
    z-index: 9998 !important;
}

.modal-content {
    z-index: 9999 !important;
}

#filter-fab-group {
    position: fixed;
    bottom: 100px;
    left: 24px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    align-items: flex-start;
    transition: opacity 0.3s;
}

.filter-row {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
}

.filter-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.5);
    transition: transform 0.3s, opacity 0.3s, box-shadow 0.3s;
}

.f-anni.active {
    background-color: #fbbf24;
    border-color: transparent;
    box-shadow: 0 0 15px #fbbf24;
    transform: scale(1.2);
}

.f-holiday.active {
    background-color: var(--color-holiday);
    border-color: transparent;
    box-shadow: 0 0 15px var(--color-holiday);
    transform: scale(1.2);
}

.f-normal.active {
    background-color: #9ca3b8;
    border-color: transparent;
    box-shadow: 0 0 15px #9ca3b8;
    transform: scale(1.2);
}

.filter-dot:not(.active) {
    background-color: transparent;
    border-color: rgba(255, 255, 255, 0.5);
    opacity: 1;
    transform: scale(0.8);
}

.filter-label {
    font-weight: 900;
    font-size: 0.65rem;
    letter-spacing: 0.1em;
    opacity: 1;
    transform: none;
    transition: all 0.3s;
}

.label-anni {
    color: #fbbf24;
}

.label-holiday {
    color: var(--color-holiday);
}

.label-normal {
    color: #9ca3b8;
}

.dashboard-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 16px;
}

.stat-card {
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    padding: 18px;
    border-radius: 12px;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03);
    transition: transform 0.2s, border-color 0.2s, box-shadow 0.2s;
    user-select: none;
}

/* Markdown Typography Fix within Cards */
.markdown-preview p {
    margin-bottom: 0.25rem;
    line-height: 1.6;
    /* More breathing room for text */
    letter-spacing: 0.01em;
}

.markdown-preview strong {
    font-weight: 700;
    color: var(--text);
}

.markdown-preview em {
    font-style: italic;
    opacity: 0.8;
}

/* Specific fix for the Markdown container to ensures text isn't too dense */
.markdown-preview {
    font-size: 0.85rem;
    color: var(--text-sec);
    /* Make text slightly transparent for "elegance" */
    opacity: 0.9;
}

.stat-value {
    font-size: 1.8rem;
    font-weight: 900;
    color: var(--text);
    margin-top: auto;
    margin-bottom: 8px;
}

.stat-label {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.stat-chart-bar {
    height: 6px;
    background: var(--line);
    border-radius: 99px;
    overflow: hidden;
}

.stat-chart-fill {
    height: 100%;
    border-radius: 99px;
    width: 0%;
    transition: width 1.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.cal-bar-col {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    height: 100%;
    position: relative;
    gap: 4px;
}

.cal-bar-bg {
    width: 100%;
    background: var(--line);
    border-radius: 4px;
    flex: 1;
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: flex-end;
    min-height: 0;
}

.cal-bar-fill {
    width: 100%;
    background: orange;
    transition: height 1s ease;
}

.cal-bar-val {
    font-size: 0.6rem;
    font-weight: bold;
    color: var(--text);
    height: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.cal-label {
    font-size: 0.6rem;
    color: var(--text-sec);
    font-weight: 700;
    height: 14px;
    display: flex;
    align-items: center;
}

#gallery-grid-view {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}

.gallery-item {
    aspect-ratio: 1/1;
    position: relative;
    overflow: hidden;
    border-radius: 8px;
    cursor: pointer;
}

.gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s;
}

.gallery-item:hover img {
    transform: scale(1.05);
}

.gallery-date-header {
    grid-column: 1 / -1;
    font-weight: 900;
    font-size: 0.8rem;
    color: var(--text-sec);
    opacity: 0.8;
    margin-top: 1rem;
    margin-bottom: 0.5rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    border-bottom: 1px solid var(--line);
    padding-bottom: 4px;
}

/* AI Button Positioning */
.fab-ai-btn {
    bottom: 110px;
}

@media (max-width: 640px) {
    :root {
        --rail-x: 6rem;
    }

    #focus-hud {
        left: 0.25rem;
        width: 3.5rem;
    }

    .entry-card-wrapper {
        padding-left: calc(var(--rail-x) + 0.5rem);
        padding-right: 1rem;
    }

    /* Mobile Beam: Starts at 4rem, width is remainder */
    .guide-beam {
        left: 4rem;
        width: calc(var(--rail-x) - 4rem);
    }

    /* Ensure Filter stays left on mobile */
    #filter-fab-group {
        bottom: 100px;
        left: 16px;
        right: auto !important;
    }
}



.oracle-western {
    background: linear-gradient(135deg, #2b1055, #7597de);
    border-color: #a855f7;
    font-family: 'Cinzel', serif;
}

.persona-btn {
    padding: 6px 12px;
    border-radius: 99px;
    font-size: 0.75rem;
    font-weight: bold;
    opacity: 0.6;
    transition: opacity 0.3s, transform 0.3s, background-color 0.3s;
    border: 1px solid white;
    color: white;
}

.persona-btn.active {
    opacity: 1;
    background: white;
    color: black;
}

.quick-task-btn {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 6px 10px;
    border-radius: 999px;
    border: 1px solid;
    transition: transform 0.2s, opacity 0.2s, background-color 0.2s, border-color 0.2s;
    font-weight: 700;
    font-size: 0.7rem;
    white-space: nowrap;
    background: var(--card-bg);
}

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

.todo-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 0;
    border-bottom: 1px solid var(--line);
    pointer-events: auto;
    cursor: pointer;
}

.todo-check {
    color: var(--primary);
    display: flex;
    align-items: center;
    justify-content: center;
}

.todo-text {
    font-size: 0.9rem;
    color: var(--text);
}

.todo-done {
    text-decoration: line-through;
    opacity: 0.5;
}

.holiday-badge {
    color: #14532d;
    background: #86efac;
}

.card-holiday {
    border-left: 4px solid var(--color-holiday) !important;
}

.card-task {
    border-left: 4px solid var(--color-task) !important;
}

.task-end-btn {
    margin-top: 8px;
    padding: 4px 10px;
    font-size: 0.7rem;
    font-weight: bold;
    border-radius: 6px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: background 0.2s;
    border: 1px solid currentColor;
    background: rgba(255, 255, 255, 0.5);
    z-index: 30;
    position: relative;
    pointer-events: auto;
}

.btn-end-Exercise {
    color: #b91c1c;
}

.btn-end-Sleep {
    color: #1d4ed8;
}

.btn-end-Focus {
    color: #047857;
}

.card-thumb-col {
    width: 80px;
    flex-shrink: 0;
    border-right: 1px solid var(--line);
    display: block;
    aspect-ratio: 1/1;
}

.card-thumb-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.card-main-col {
    flex: 1;
    padding: 1rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: 0;
}

.card-mood {
    position: absolute;
    top: 0.8rem;
    right: 0.8rem;
    color: var(--text-sec);
    opacity: 0.6;
    transform: scale(0.9);
    background: var(--line);
    padding: 4px;
    border-radius: 6px;
}

.anni-badge {
    display: inline-block;
    font-size: 0.6rem;
    font-weight: 800;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    padding: 2px 6px;
    border-radius: 4px;
    margin-bottom: 6px;
    margin-right: 4px;
    width: fit-content;
}

.anni-future-badge {
    color: #713f12;
    background: rgba(253, 224, 71, 0.6);
}

.anni-past-badge {
    color: #1d4ed8;
    background: rgba(191, 219, 254, 0.5);
}

.list-placeholder {
    position: absolute;
    left: 0;
    right: 0;
    height: 100px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    opacity: 0;
    font-family: 'Cinzel', serif;
    text-transform: uppercase;
    letter-spacing: 0.3em;
    font-size: 0.75rem;
    color: var(--text-sec);
    pointer-events: none;
    transition: opacity 0.5s ease;
    z-index: 5;
}

#future-placeholder {
    top: 20vh;
}

#origin-placeholder {
    bottom: 20vh;
}

/* Friend bar — flows naturally after diary entries */
#friend-bar-container {
    pointer-events: auto;
    padding: 12px 0 0;
}

.block-btn {
    padding: 6px 10px;
    border-radius: 8px;
    background: var(--card-bg);
    color: var(--text);
    font-size: 0.75rem;
    font-weight: bold;
    white-space: nowrap;
    border: 1px solid transparent;
    transition: transform 0.2s, opacity 0.2s, background-color 0.2s;
    display: flex;
    align-items: center;
    gap: 4px;
}

.block-btn:hover {
    background: var(--primary);
    color: white;
}

#editor-content {
    white-space: pre-wrap;
    font-family: 'Lato', monospace;
    font-size: 1.05rem;
    line-height: 1.75;
    background: transparent;
    padding: 12px;
    border-radius: 8px;
    border: 1px solid transparent;
    color: var(--text);
    user-select: text;
}

.hidden-view {
    display: none !important;
}

.active-view {
    display: block !important;
    /* 移除 fadeIn 动画，防止切换视图时闪烁 */
    /* animation: fadeIn 0.6s ease-out; */
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.calendar-cell {
    aspect-ratio: 1/1;
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-size: 0.95rem;
    position: relative;
    color: var(--text);
}

.calendar-cell.current-day {
    border: 2px solid var(--primary);
}

.calendar-lunar {
    font-size: 0.5rem;
    opacity: 0.4;
    margin-top: -2px;
}

.modal-content {
    /* 【核心修复】增加不透明度，防止背景透视干扰文字 */
    background-color: rgba(255, 255, 255, 0.95) !important;
    backdrop-filter: blur(40px);
    border: 1px solid var(--line);
    z-index: 10000;
    transition: transform 0.4s cubic-bezier(0.32, 0.72, 0, 1);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
}

/* Dark mode adaptor */
body[data-theme="night"] .modal-content,
body[data-theme="mountain-dusk"] .modal-content,
body[data-theme="mountain-night"] .modal-content {
    background-color: rgba(15, 23, 42, 0.95) !important;
    border-color: rgba(255, 255, 255, 0.1);
}

.md-render h1 {
    font-size: 1.4em;
    font-weight: 800;
    margin: 0.5em 0 0.2em;
    color: var(--text);
    border-bottom: 1px solid var(--line);
    padding-bottom: 4px;
}

.md-render p {
    margin-bottom: 0.5em;
    line-height: 1.5;
    font-size: 1.1em;
}

.md-render img {
    max-width: 100%;
    border-radius: 8px;
    margin: 8px 0;
}

.simon-sig {
    font-family: 'Oswald', sans-serif;
    font-weight: 300;
    letter-spacing: 0.1em;
    opacity: 0.5;
    font-size: 0.7rem;
    text-align: center;
    margin-top: 2rem;
    color: var(--text-sec);
}

.animate-pulse-slow {
    animation: pulse 3s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

/* FORCE HIDE UTILITY - Place at end to override ID selectors */
.hidden {
    display: none !important;
}

/* --- Editor Preview Extensions --- */
#editor-preview {
    width: 100%;
    height: 30vh;
    overflow-y: auto;
    background-color: rgba(255, 255, 255, 0.95);
    /* Match modal opacity */
    padding: 12px;
    border-radius: 0 0 8px 8px;
    border: 1px solid var(--line);
    color: var(--text);
    font-family: 'Lato', sans-serif;
    backdrop-filter: blur(10px);
}

/* 隐藏输入框 */
#editor-content.hidden-editor {
    display: none;
}

/* 按钮激活状态 */
#btn-preview-toggle.active {
    background-color: var(--card-bg);
    box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.1);
}

/* --- 粘贴到 style.css 最底部 --- */

/* 预览框的基础样式 */
#editor-preview {
    width: 100%;
    height: 30vh;
    overflow-y: auto;
    background-color: rgba(255, 255, 255, 0.95);
    /* Match modal opacity */
    padding: 16px;
    border-radius: 0 0 8px 8px;
    border: 1px solid var(--line);
    color: var(--text);
    backdrop-filter: blur(10px);
    display: none;
    /* 默认隐藏 */
}

/* 激活预览时的样式 */
/* --- 粘贴到 style.css 最底部 --- */

/* 1. 预览框：模仿输入框的外观 */
#editor-preview {
    display: none;
    width: 100%;
    min-height: 30vh;
    /* 最小高度，防止内容太少时很难点到 */
    max-height: 50vh;
    overflow-y: auto;
    /* 背景和输入框保持一致，实现“无缝切换”错觉 */
    background-color: var(--card-bg);
    padding: 12px;
    /* 和 textarea 的 p-3 (12px) 保持一致 */
    border: 1px solid var(--line);
    border-radius: 0 0 8px 8px;
    color: var(--text);
    cursor: text;
    /* 鼠标放上去是“输入”光标，暗示可编辑 */
}

/* 2. 激活时显示 */
#editor-preview.active-preview {
    display: block !important;
}

/* 3. 输入框：隐藏时彻底消失 */
#editor-content.hidden-editor {
    display: none !important;
}

/* --- Markdown 渲染样式 (标题变大) --- */
.md-render h1 {
    font-size: 1.6em;
    font-weight: 900;
    border-bottom: 2px solid var(--primary);
    margin: 0.5em 0;
}

.md-render h2 {
    font-size: 1.4em;
    font-weight: 700;
    border-left: 4px solid var(--primary);
    padding-left: 8px;
    margin: 0.8em 0 0.4em;
    background: rgba(0, 0, 0, 0.02);
    color: var(--text);
}

.md-render p {
    margin-bottom: 0.8em;
    line-height: 1.6;
}

.md-render ul {
    list-style-type: disc;
    padding-left: 20px;
}

.md-render ol {
    list-style-type: decimal;
    padding-left: 20px;
}

.md-render strong {
    color: var(--primary);
    font-weight: 900;
}

.md-render blockquote {
    border-left: 3px solid #ccc;
    padding-left: 10px;
    color: #666;
    font-style: italic;
}

#editor-content.hidden-editor {
    display: none;
}

#btn-preview-toggle.active {
    background-color: var(--primary);
}

#btn-preview-toggle.active i {
    color: white !important;
}

/* --- Markdown 渲染样式 (让 ## 变标题的关键) --- */
.md-render h1 {
    font-size: 1.6em;
    font-weight: 900;
    border-bottom: 2px solid var(--primary);
    margin: 0.5em 0;
}

.md-render h2 {
    font-size: 1.4em;
    font-weight: 700;
    border-left: 4px solid var(--primary);
    padding-left: 8px;
    margin: 0.8em 0 0.4em;
    background: rgba(0, 0, 0, 0.02);
}

.md-render h3 {
    font-size: 1.2em;
    font-weight: 700;
    margin: 0.5em 0;
}

.md-render p {
    margin-bottom: 0.8em;
    line-height: 1.6;
}

.md-render ul {
    list-style-type: disc;
    padding-left: 20px;
    margin-bottom: 1em;
}

.md-render ol {
    list-style-type: decimal;
    padding-left: 20px;
    margin-bottom: 1em;
}

.md-render blockquote {
    border-left: 3px solid #ccc;
    padding-left: 10px;
    color: #666;
    font-style: italic;
    margin: 10px 0;
}

.md-render strong {
    color: var(--primary);
    font-weight: 900;
}

/* --- 粘贴到 style.css 底部 --- */

/* 限制文内图片和视频的最大尺寸，防止撑爆屏幕 */
.md-render img,
.md-render video {
    max-width: 90%;
    /* 宽度最多占 90% */
    max-height: 400px;
    /* 高度最多 400px */
    border-radius: 8px;
    /* 圆角 */
    margin: 10px auto;
    /* 上下留空，居中 */
    display: block;
    /* 独占一行 */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    /* 加点阴影好看 */
}

/* --- 编辑器图片样式 --- */
#editor-content img {
    max-width: 90% !important;
    height: auto !important;
    border-radius: 8px;
    margin: 10px 0;
    display: block;
    cursor: default;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

/* 隐藏旧的预览区域相关的样式，防止干扰 */
#image-preview-area {
    display: none !important;
}

/* --- 编辑器 UI 重构 (模块化设计) --- */

/* 1. 工具栏按钮的基础样式 */
.tool-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px 12px;
    border-radius: 8px;
    color: var(--text-sec);
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

/* 鼠标悬停 */
.tool-btn:hover {
    background-color: var(--line);
    color: var(--text);
    transform: translateY(-1px);
    /* 轻微上浮 */
}

/* 点击按下 */
.tool-btn:active {
    transform: scale(0.95);
}

/* 2. 心情/天气按钮选中状态 */
/* 这会让选中的按钮变成实心色块，且有阴影 */
.mood-btn.bg-\[var\(--primary\)\] {
    /* JS添加类名后的兼容 */
    background-color: var(--primary) !important;
    box-shadow: 0 4px 12px var(--glow-color);
    transform: scale(1.1);
}

.weather-btn.bg-\[var\(--primary\)\] {
    background-color: var(--text) !important;
    /* 天气选中用深色 */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    transform: scale(1.1);
}

.weather-btn.bg-\[var\(--primary\)\] i {
    color: var(--card-bg) !important;
}

/* 3. 编辑器内图片美化 */
#editor-content img {
    max-width: 90% !important;
    height: auto !important;
    border-radius: 12px;
    /* 更圆润 */
    margin: 20px auto;
    /* 居中且留白 */
    display: block;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
    /* 悬浮感阴影 */
    transition: transform 0.3s;
}

#editor-content img:hover {
    transform: scale(1.01);
}

/* 放在 style.css 底部，强制让 Logo 更细更优雅 */
.font-logo {
    font-family: 'Cinzel', serif;
    font-weight: 400;
    /* Cinzel 最细就是 400，如果不满意可以换成 Lato 100 */
}

/* --- Oracle/Weekly Summary Modal Styles --- */

/* 1. 神秘紫色背景 (类似 Info 页面的 Oracle 卡片) */
.oracle-theme-bg {
    background: linear-gradient(135deg, #1e1b4b 0%, #4c1d95 50%, #0f172a 100%);
    color: white;
    border: 1px solid rgba(168, 85, 247, 0.3);
    box-shadow: 0 20px 50px -10px rgba(0, 0, 0, 0.8);
}

/* 2. 角色选择按钮 (默认半透明，激活变实心白) */
.oracle-btn {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.6);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.oracle-btn:hover {
    background: rgba(255, 255, 255, 0.15);
    color: white;
}

/* 激活状态 (JS 添加 .active 类) */
.oracle-btn.active {
    background: white !important;
    color: #4c1d95 !important;
    /* 深紫色文字 */
    box-shadow: 0 0 20px rgba(255, 255, 255, 0.4);
    border-color: white;
    transform: scale(1.05);
    font-weight: 800;
}

/* 3. 输入框在深色背景下的样式 */
.oracle-input {
    background: rgba(0, 0, 0, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: white;
}

.oracle-input:focus {
    background: rgba(0, 0, 0, 0.4);
    border-color: rgba(168, 85, 247, 0.8);
}

.oracle-input::placeholder {
    color: rgba(255, 255, 255, 0.3);
}

/* 4. 结果区域样式 */
/* 4. 结果区域样式 (修改版：微带紫调的护眼色) */
.oracle-result-box {
    /* 极淡的紫底，护眼且有质感 */
    background: rgba(250, 248, 255, 0.98);
    color: #3b0764;
    /* 很深的紫色字，比纯黑更有温度 */
    border: 1px solid rgba(168, 85, 247, 0.2);
    box-shadow: inset 0 0 20px rgba(255, 255, 255, 0.8);
    border-radius: 12px;
    padding: 24px;
    /* 增加内边距，呼吸感 */
    font-family: 'Noto Sans SC', 'Lato', sans-serif;
}

/* 标题 (##)：改为柔和的分隔标题 */
.oracle-result-box h2 {
    font-size: 1.1rem;
    font-weight: 800;
    color: #6b21a8;
    /* 紫色 */
    margin-top: 1.5rem;
    margin-bottom: 0.8rem;
    border-bottom: 1px dashed rgba(168, 85, 247, 0.3);
    /* 虚线分割，像信纸的横线 */
    padding-bottom: 4px;
    letter-spacing: 0.05em;
}

/* 标题 (###)：备用，更小一点 */
.oracle-result-box h3 {
    font-size: 1rem;
    font-weight: 700;
    color: #7e22ce;
    margin-top: 1rem;
}

/* 正文段落：增加行高，易于阅读 */
.oracle-result-box p {
    font-size: 0.95rem;
    line-height: 1.8;
    /* 1.8倍行高，非常易读 */
    margin-bottom: 1rem;
    opacity: 0.9;
    text-align: justify;
    /* 两端对齐 */
}

/* 重点强调 (Bold)：高亮 */
.oracle-result-box strong {
    color: #9333ea;
    font-weight: 900;
    background: rgba(147, 51, 234, 0.05);
    /* 淡淡的背景高亮 */
    padding: 0 2px;
    border-radius: 2px;
}

/* 列表：柔和的缩进 */
.oracle-result-box ul {
    list-style: none;
    /* 去掉默认圆点 */
    padding-left: 0;
    margin: 1rem 0;
}

.oracle-result-box li {
    position: relative;
    padding-left: 1.2rem;
    margin-bottom: 0.5rem;
    line-height: 1.6;
}

/* 自定义列表圆点 */
.oracle-result-box li::before {
    content: "✦";
    position: absolute;
    left: 0;
    color: #a855f7;
    font-size: 0.8rem;
    top: 2px;
}

/* --- Timeline 悬浮按钮 (扁平磨砂版) --- */
.fab-glass {
    position: fixed;
    right: 1.5rem;
    width: 3.5rem;
    height: 3.5rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 40;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);

    /* --- 风格统一修正 --- */
    /* 去掉原本的 radial-gradient 高光 */
    background: rgba(255, 255, 255, 0.8);
    /* 默认亮色，适应日间模式 */
    border: 1px solid rgba(255, 255, 255, 0.6);

    /* 增加磨砂感 */
    backdrop-filter: blur(8px);

    /* 柔和阴影 */
    box-shadow: 0 8px 20px -5px rgba(0, 0, 0, 0.15);
}

/* 紫色按钮 (AI) */
.fab-glass-purple {
    bottom: 110px;
    /* 淡淡的紫色背景，不刺眼 */
    background: rgba(243, 232, 255, 0.85);
    color: #7e22ce;
    /* 紫色图标 */
    border-color: rgba(216, 180, 254, 0.5);
}

/* 琥珀色按钮 (写日记) */
.fab-glass-amber {
    bottom: 2rem;
    background: rgba(254, 252, 232, 0.9);
    color: #d97706;
    /* 琥珀色图标 */
    border-color: rgba(253, 230, 138, 0.5);
}

/* 暗黑模式适配 (如果 body 有 data-theme="night" 或 "dusk") */
body[data-theme="night"] .fab-glass,
body[data-theme="dusk"] .fab-glass {
    background: rgba(30, 41, 59, 0.6);
    border-color: rgba(255, 255, 255, 0.1);
    box-shadow: 0 8px 20px -5px rgba(0, 0, 0, 0.5);
}

body[data-theme="night"] .fab-glass-purple {
    color: #d8b4fe;
    /* 夜间紫色变亮 */
    background: rgba(88, 28, 135, 0.4);
}

body[data-theme="night"] .fab-glass-amber {
    color: #fcd34d;
    /* 夜间黄色变亮 */
    background: rgba(120, 53, 15, 0.4);
}

/* 悬停效果：简单的上浮和光晕 */
.fab-glass:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 24px -8px rgba(0, 0, 0, 0.2);
}

.fab-glass-purple:hover {
    box-shadow: 0 0 20px rgba(168, 85, 247, 0.4);
    background: rgba(243, 232, 255, 1);
}

.fab-glass-amber:hover {
    box-shadow: 0 0 20px rgba(245, 158, 11, 0.4);
    background: rgba(255, 251, 235, 1);
}

/* 1. 修复数据管理列表无法点击的问题 */
.archive-item {
    /* 原本可能是 transparent border 等... */
    border: 1px solid transparent;
    transition: all 0.2s;
    pointer-events: auto !important;
    /* 【关键修复】强制开启点击事件 */
    cursor: pointer;
}

/* 3. 确保 AI 按钮和写日记按钮层级正确，不被遮挡 */
#btn-ai-summary,
.fab-btn,
#filter-fab-group {
    z-index: 60 !important;
    pointer-events: auto !important;
}

/* 4. 详情页 Markdown 图片样式 (如果之前觉得图片太小/太乱) */
#detail-content img {
    max-width: 100%;
    border-radius: 8px;
    margin: 10px 0;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

/* --- Mobile Optimization (Performance + Fullscreen) --- */
@media (max-width: 640px) {

    /* 1. 禁用卡片毛玻璃，大幅提升滚动FPS */
    .entry-card,
    .nav-capsule,
    #focus-hud,
    .modal-content {
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        /* 使用纯色+高不透明度作为回退 */
    }

    body[data-theme="day"] .entry-card {
        background-color: rgba(255, 255, 255, 0.98);
    }

    body[data-theme="night"] .entry-card {
        background-color: rgba(15, 23, 42, 0.98);
    }

    /* 2. 硬件加速 (GPU) 关键动画元素 */
    .entry-card,
    .timeline-rail-outer,
    #orbit-wheel {
        transform: translateZ(0);
        will-change: transform;
    }

    /* 3. 减少粒子数 (ParticleSystem 已在 JS 处理，这里辅助减少阴影) */
    .timeline-node,
    .guide-cursor {
        box-shadow: none !important;
    }

    /* 4. 修复 iOS Safari 底部安全区遮挡 */
    #editor-panel {
        padding-bottom: env(safe-area-inset-bottom);
    }
}

/* --- 粘贴到 style.css 最底部 --- */

/* 1. 编辑器顶部类型切换 (Diary/Routine/Anni) */
.active-type {
    background-color: var(--card-bg);
    color: var(--text);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
    opacity: 1 !important;
}

/* 2. 元数据胶囊 (日期/时间/卡路里) */
.meta-pill {
    position: relative;
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--line);
    padding: 6px 12px;
    border-radius: 8px;
    font-family: 'Noto Sans SC', sans-serif;
    border: 1px solid transparent;
    transition: all 0.2s;
}

/* 强制输入框颜色可见 */
.meta-pill input {
    color: var(--text) !important;
    /* 强制使用主题文字颜色 */
    background: transparent !important;
    min-width: 0;
}

/* 针对 iOS 日期选择器的特殊修复 */
.meta-pill input[type="date"],
.meta-pill input[type="time"] {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    color: var(--text) !important;
}

.meta-pill:hover {
    background: var(--card-bg);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

/* 3. 快速追踪按钮 (运动/睡眠/专注/冥想) */
.track-btn {
    padding: 10px;
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    font-size: 0.7rem;
    font-weight: bold;
    transition: all 0.2s;
    background: var(--card-bg);
    border: 1px solid var(--line);
    color: var(--text-sec);
}

.track-btn:hover {
    transform: translateY(-2px);
}

/* 激活状态：背景变成对应颜色，文字变白 */
.track-btn.active {
    background: currentColor;
    /* 妙用：背景色自动跟随文字颜色 */
    color: white !important;
    border-color: transparent;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}

/* --- Editor High Contrast & Power Save Fix --- */

/* 1. 强制编辑器配色 (解决看不清的问题) */
/* DARK THEMES (Night + Dusk) */
body[data-theme*="night"] .modal-content,
body[data-theme*="dusk"] .modal-content {
    background-color: #0f172a !important;
    /* 深蓝黑 */
    color: #ffffff !important;
}

body[data-theme*="night"] .meta-pill,
body[data-theme*="dusk"] .meta-pill {
    background-color: #1e293b !important;
    border-color: #334155 !important;
}

body[data-theme*="night"] .meta-pill input,
body[data-theme*="night"] #editor-title,
body[data-theme*="night"] #editor-content,
body[data-theme*="dusk"] .meta-pill input,
body[data-theme*="dusk"] #editor-title,
body[data-theme*="dusk"] #editor-content {
    color: #ffffff !important;
}

/* LIGHT THEMES (Day + Dawn) */
body[data-theme*="day"] .modal-content,
body[data-theme*="dawn"] .modal-content {
    background-color: #ffffff !important;
    color: #000000 !important;
}

body[data-theme*="day"] .meta-pill,
body[data-theme*="dawn"] .meta-pill {
    background-color: #f1f5f9 !important;
    /* Light Slate */
    border-color: #cbd5e1 !important;
}

body[data-theme*="day"] .meta-pill input,
body[data-theme*="day"] #editor-title,
body[data-theme*="day"] #editor-content,
body[data-theme*="dawn"] .meta-pill input,
body[data-theme*="dawn"] #editor-title,
body[data-theme*="dawn"] #editor-content {
    color: #000000 !important;
}

/* 占位符颜色适配 */
body[data-theme*="day"] ::placeholder,
body[data-theme*="dawn"] ::placeholder {
    color: rgba(0, 0, 0, 0.4) !important;
}

body[data-theme*="night"] ::placeholder,
body[data-theme*="dusk"] ::placeholder {
    color: rgba(255, 255, 255, 0.4) !important;
}


/* 2. 写日记时极致省电 (隐藏背景特效) */
body.editor-focused canvas,
body.editor-focused .guide-beam,
body.editor-focused .guide-cursor,
body.editor-focused .timeline-rail-outer {
    display: none !important;
    /* 不渲染任何背景动画，GPU 占用降为 0 */
}

/* 电脑端变成横向排列，更节省空间 */
@media (min-width: 640px) {
    .track-btn {
        flex-direction: row;
    }
}

/* --- 粘贴到 style.css 最底部 --- */

/* Tab 基础样式重置 */
#type-diary,
#type-task,
#type-anni {
    opacity: 0.6;
    transition: all 0.2s;
}

/* 1. Diary (日记) - 浅蓝色 */
#type-diary.active-type {
    background-color: #e0f2fe;
    /* Sky-100 */
    color: #0284c7;
    /* Sky-600 */
    opacity: 1;
    box-shadow: 0 2px 4px rgba(2, 132, 199, 0.1);
}

/* 2. Routine (习惯) - 红色 */
#type-task.active-type {
    background-color: #fee2e2;
    /* Red-100 */
    color: #dc2626;
    /* Red-600 */
    opacity: 1;
    box-shadow: 0 2px 4px rgba(220, 38, 38, 0.1);
}

/* 3. Anniversary (纪念日) - 金色 */
#type-anni.active-type {
    background-color: #fef3c7;
    /* Amber-100 */
    color: #d97706;
    /* Amber-600 */
    opacity: 1;
    box-shadow: 0 2px 4px rgba(217, 119, 6, 0.1);
}

/* 4. Track 按钮微调 (点击感更强) */
.track-btn:active {
    transform: scale(0.95);
}

/* --- style.css --- */

.entry-card {
    background-color: var(--card-bg);
    border: 1px solid transparent;
    box-shadow: var(--card-shadow), var(--card-highlight);
    cursor: pointer;
    border-radius: 14px;
    /* 移除 backdrop-filter 以优化列表滚动性能 */
    display: flex;
    overflow: hidden;
    min-height: 90px;
    position: relative;
    transform-origin: left center;
    transition: transform 0.2s linear, border-color 0.3s;
    z-index: 50;
    margin-right: 1rem;

    /* 【核心修复】加上 !important，强制允许点击 */
    pointer-events: auto !important;
}

/* --- 粘贴到 style.css 底部 --- */
/* --- style.css 底部 --- */
.card-today-highlight {
    border: 2px solid var(--primary) !important;
    /* 强制边框颜色 */
    box-shadow: 0 0 20px var(--glow-color) !important;
    /* 发光 */
    animation: todayPulse 3s infinite ease-in-out;
    /* 呼吸动画 */
}

@keyframes todayPulse {
    0% {
        box-shadow: 0 0 10px var(--glow-color);
        transform: scale(1);
    }

    50% {
        box-shadow: 0 0 25px var(--glow-color);
        transform: scale(1.02);
    }

    100% {
        box-shadow: 0 0 10px var(--glow-color);
        transform: scale(1);
    }
}

/* 2. 日历：小圆点样式修复 */
.cal-dot {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background-color: var(--text-sec);
    /* 默认灰色 */
    margin-top: 4px;
    opacity: 0.6;
}

/* 3. 日历：今天的小圆点 (特别颜色) */
.cal-dot-today {
    background-color: #ef4444 !important;
    /* 鲜艳的红色 */
    width: 6px;
    height: 6px;
    opacity: 1;
    box-shadow: 0 0 5px rgba(239, 68, 68, 0.5);
}

/* 辅助：确保日历格子内容垂直居中 */
.calendar-cell {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

/* 在 style.css 中找到 .entry-item */
.entry-item {
    /* ... 保持原有样式 ... */

    /* 【新增】内容可见性优化：
       告诉浏览器，如果这个元素不在屏幕上，就别费劲去渲染它的内容了。
       这能极大地降低内存占用和滚动卡顿。 */
    /* content-visibility: auto; — disabled: causes entries to disappear during scroll */
    /* contain-intrinsic-size: 150px; */
    /* 给个大致的高度估算值，防止滚动条跳动 */
}

.entry-card,
.fab-btn,
#filter-fab-group,
#btn-ai-summary {
    pointer-events: auto !important;
    /* 只有卡片和按钮可以点击 */
}

/* 4. 修复时间轴线的定位，防止遮挡 */
.timeline-rail-outer {
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
    width: 100%;
    pointer-events: none !important;
    /* 绝对禁止它拦截触摸 */
    z-index: 0;
    /* 放在最底层 */
}

/* 高亮闪烁动画 (用于跳转设置时提示) */
@keyframes flashHighlight {
    0% {
        background-color: rgba(245, 158, 11, 0);
        box-shadow: 0 0 0 0 rgba(245, 158, 11, 0);
    }

    30% {
        background-color: rgba(245, 158, 11, 0.2);
        box-shadow: 0 0 0 4px rgba(245, 158, 11, 0.3);
        transform: scale(1.02);
    }

    100% {
        background-color: rgba(245, 158, 11, 0);
        box-shadow: 0 0 0 0 rgba(245, 158, 11, 0);
        transform: scale(1);
    }
}

.flash-highlight {
    animation: flashHighlight 1.5s ease-out;
    border-color: var(--primary) !important;
    border-radius: 12px;
}

/* 优化仪表盘卡片的点击感 */
.stat-card:hover {
    border-color: var(--primary);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.05);
}

/* --- Friend Bar (Timeline Bottom) --- */
.friend-grid {
    display: grid !important;
    grid-template-columns: repeat(3, 50px) !important;
    gap: 6px 12px !important;
    justify-content: center !important;
    padding: 8px 0 !important;
}

.friend-avatar-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    cursor: pointer;
    pointer-events: auto;
}

.friend-avatar-wrapper {
    position: relative;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    overflow: visible;
}

.friend-avatar-img {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid rgba(255, 255, 255, 0.15);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Selected glow ring (True Halo) */
.friend-avatar-item.selected .friend-avatar-img {
    border-color: transparent;
    outline: 2px solid var(--primary);
    outline-offset: 3px;
    transform: scale(1.1);
}

.friend-avatar-item.selected .friend-avatar-name {
    color: var(--primary);
    font-weight: 800;
}

.friend-avatar-item:active .friend-avatar-img {
    transform: scale(0.9);
}

.friend-badge {
    position: absolute;
    top: -2px;
    right: -2px;
    min-width: 18px;
    height: 18px;
    background: #ef4444;
    color: white;
    font-size: 10px;
    font-weight: 900;
    border-radius: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 4px;
    border: 2px solid var(--bg-end, #0f1014);
    z-index: 10;
}

.friend-avatar-name {
    font-size: 10px;
    color: var(--text-sec);
    font-weight: 600;
    text-align: center;
    max-width: 60px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.friend-add-btn {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 2px dashed var(--text-sec);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-sec);
    opacity: 0.5;
    transition: opacity 0.2s;
}

.friend-add-btn:hover {
    opacity: 1;
}

.friend-settings-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 8px auto 16px;
    padding: 8px 16px;
    border-radius: 12px;
    background: var(--card-bg);
    border: 1px solid var(--line);
    color: var(--text-sec);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    pointer-events: auto;
    transition: opacity 0.2s;
}

.friend-settings-btn:hover {
    opacity: 1;
    color: var(--text);
}

/* Privacy toggle in editor */
.privacy-toggle {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 8px;
    background: var(--card-bg);
    border: 1px solid var(--line);
    font-size: 11px;
    font-weight: 600;
    color: var(--text-sec);
    cursor: pointer;
    transition: all 0.2s;
    pointer-events: auto;
}

.privacy-toggle.public {
    border-color: var(--primary);
    color: var(--primary);
}

/* --- Paywall Animations --- */

/* 1. 悬浮动画 */
@keyframes float {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-10px);
    }
}

.animate-float {
    animation: float 4s ease-in-out infinite;
}

/* 2. 流光扫过动画 (用于 Max 卡片) */
@keyframes shimmer {
    100% {
        transform: translateX(100%);
    }
}

.group:hover .group-hover\:animate-shimmer {
    animation: shimmer 1.5s infinite;
}

/* 3. 脉冲辉光 */
@keyframes pulseGlow {

    0%,
    100% {
        opacity: 0.4;
        transform: scale(1);
    }

    50% {
        opacity: 0.6;
        transform: scale(1.1);
    }
}

.animate-pulse-slow {
    animation: pulseGlow 4s ease-in-out infinite;
}

/* --- 极致慢速动画 (仪式感) --- */

/* 1. 超慢速旋转 (星体运转) */
@keyframes spin {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

.animate-spin-super-slow {
    animation: spin 10s linear infinite;
    /* 10秒转一圈，极慢 */
}

/* 2. 慢速扫描进度条 (呼吸感) */
.animate-loading-scan {
    position: absolute;
    height: 100%;
    background: rgba(255, 255, 255, 0.9);
    border-radius: 99px;
    box-shadow: 0 0 15px rgba(255, 255, 255, 0.8);
    /* 改为 4s，更加悠长 */
    animation: loading-scan 4s infinite ease-in-out;
}

/* --- 灵能宝石 (Purple Gem) --- */
.gem-icon {
    background: linear-gradient(135deg, #e9d5ff 0%, #a855f7 50%, #581c87 100%);
    box-shadow:
        inset 0 2px 4px rgba(255, 255, 255, 0.5),
        /* 顶部高光 */
        inset 0 -2px 4px rgba(0, 0, 0, 0.3),
        /* 底部阴影 */
        0 0 20px rgba(168, 85, 247, 0.6);
    /* 外部发光 */
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: white;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

.gem-text-glow {
    color: #e9d5ff;
    text-shadow: 0 0 10px rgba(168, 85, 247, 0.8);
}

/* 交易流水滚动列表 */
.transaction-list {
    max-height: 150px;
    overflow-y: auto;
    mask-image: linear-gradient(to bottom, black 80%, transparent 100%);
    -webkit-mask-image: linear-gradient(to bottom, black 80%, transparent 100%);
    scrollbar-width: none;
    /* 隐藏滚动条 */
}

.transaction-list::-webkit-scrollbar {
    display: none;
}

.trans-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 0;
    border-bottom: 1px dashed rgba(168, 85, 247, 0.2);
    font-size: 10px;
    color: #e9d5ff;
}

.trans-positive {
    color: #34d399;
    font-weight: bold;
}

/* 绿色加分 */
.trans-negative {
    color: #f472b6;
    font-weight: bold;
}

/* 粉色扣分 */

/* --- 🛠️ 最终修正版：去红存灰 + 完美选中逻辑 --- */

/* 1. 全局强制重置：未选中的卡片必须“安静”且“灰暗” */
.entry-card {
    opacity: 0.5 !important;
    transform: scale(0.95) !important;

    /* 默认给一个极淡的透明/灰色边框，或者直接透明 */
    border-color: transparent !important;

    box-shadow: none !important;
    animation: none !important;
    /* 禁止呼吸 */
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
    /* 移除 will-change 以节省内存 */
    scroll-snap-align: none !important;
    /* 彻底禁用吸附 */
}

/* =========================================
   2. 选中状态 (Active Focus) 的基础样式
   ========================================= */
.entry-item.active-focus .entry-card {
    opacity: 1 !important;
    transform: scale(1.02) !important;
    /* 选中变大 */
    z-index: 50;

    /* 默认选中样式：主题色边框 + 光晕 */
    border: 1px solid var(--primary) !important;
    box-shadow: 0 8px 30px var(--glow-color) !important;
    /* 增加辉光范围但利用透明度让它柔和 */
    background-color: var(--card-bg) !important;
}

/* =========================================
   3. 特殊状态修复 (解决红色残留问题)
   ========================================= */

/* 修复 A: 今日高亮 (Today Highlight) */
/* 只有被选中时 -> 红色呼吸 + 红色框 */
/* 只有被选中时 -> 红色呼吸 + 红色框 */
.entry-item.active-focus .card-today-highlight {
    /* 删除高耗能动画 */
    border: 1px solid #ef4444 !important;
    /* 柔和红 */
    box-shadow: 0 4px 20px rgba(239, 68, 68, 0.3) !important;
}

/* 【关键修改】未选中时 -> 灰色框 (不再是红色) */
.card-today-highlight {
    border-color: rgba(156, 163, 175, 0.3) !important;
    /* 低调的灰色 */
}


/* 修复 B: 紫色心情 (Glow Purple) */
/* 只有被选中时 -> 紫色呼吸 */
.entry-item.active-focus .glow-purple {
    /* 删除高耗能动画 */
    box-shadow: 0 4px 20px rgba(168, 85, 247, 0.3) !important;
    border-color: rgba(168, 85, 247, 0.4) !important;
}

/* 未选中时 -> 强制无色/灰色，防止紫色残留 */
.glow-purple {
    border-color: transparent !important;
}


/* =========================================
   4. 夜间模式蓝光增强 (仅针对选中)
   ========================================= */
body[data-theme="night"] .entry-item.active-focus .entry-card {
    box-shadow: 0 0 30px rgba(129, 140, 248, 0.4) !important;
    border-color: #818cf8 !important;
}


@media (hover: none) {
    .entry-card:hover {
        opacity: 0.5 !important;
        transform: scale(0.95) !important;
        box-shadow: none !important;
        animation: none !important;
        border-color: transparent !important;
        /* 防止滑动时变色 */
    }

    /* 针对今天的特殊卡片，滑动时保持灰色，别变红 */
    .card-today-highlight:hover {
        border-color: rgba(156, 163, 175, 0.3) !important;
    }
}

@media (max-width: 640px) {

    :root {
        /* 保持轨道位置，这是卡片对齐的基准 */
        --rail-x: 4.5rem !important;
        --base-font-size: 15px;
    }

    body {
        padding-bottom: env(safe-area-inset-bottom);
        overflow-x: hidden;
    }

    /* --- 1. HUD：回归左侧纵向堆叠 (Timeline Time Axis) --- */
    #focus-hud {
        position: fixed !important;

        /* 【核心修复】位置：回归左侧边缘，不依赖轨道线 */
        left: 0.5rem !important;
        width: 4rem !important;
        /* 固定宽度，确保内容不被切 */

        /* 垂直居中，原始位置 */
        top: 50% !important;
        transform: translateY(-60%) !important;

        /* 移除所有盒子属性和复杂 z-index */
        background: transparent !important;
        backdrop-filter: none !important;
        box-shadow: none !important;
        border: none !important;
        padding: 0 !important;

        display: flex !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        /* 左对齐 */
        text-align: left !important;

        z-index: 40 !important;
        /* 较低的 z-index */
        pointer-events: none;
    }

    /* 日期大数字：回归原始的堆叠样式和颜色 */
    .hud-day {
        font-size: 2.5rem !important;
        /* 适中大小 */
        line-height: 0.9 !important;
        font-weight: 900 !important;
        margin-bottom: 2px !important;

        color: var(--text) !important;
        /* 使用主题的正常文字颜色 */
        opacity: 1 !important;

        /* 回归 subtle glow，而不是强光描边 */
        text-shadow: 0 0 10px rgba(0, 0, 0, 0.5), 0 0 5px var(--glow-color) !important;
        letter-spacing: normal !important;
    }

    /* 时间和小字 */
    .hud-time-wrapper,
    .hud-meta {
        text-shadow: none !important;
        opacity: 1 !important;
        color: var(--text-sec) !important;
        /* 使用次要文字颜色 */
        justify-content: flex-start !important;
        padding-top: 0 !important;
        border-top: none !important;
        margin-top: 2px !important;
    }

    .hud-time {
        font-size: 1rem !important;
        font-weight: 800 !important;
        color: var(--hud-time-color) !important;
    }

    .hud-meta {
        font-size: 0.6rem !important;
        font-weight: 600 !important;
        letter-spacing: 0.5px !important;
    }

    /* --- 2. 卡片变薄 (保持不变) --- */
    .entry-item {
        padding-block: 10px !important;
    }

    .entry-card h3 {
        font-size: 1.2rem !important;
        font-weight: 900 !important;
        margin-bottom: 2px !important;
        line-height: 1.2 !important;
    }

    .entry-card p {
        -webkit-line-clamp: 1 !important;
        line-clamp: 1 !important;
        max-height: 1.2em !important;
        font-size: 0.8rem !important;
        margin-bottom: 0 !important;
    }

    .entry-item.active-focus .entry-card {
        z-index: 50 !important;
    }

    #filter-fab-group {
        position: fixed !important;
        top: auto !important;
        right: auto !important;

        /* 【核心修复】固定在左边缘 0.5rem 处 */
        left: 0.5rem !important;

        bottom: calc(2rem + env(safe-area-inset-bottom)) !important;

        transform: none !important;
        /* 移除任何平移 */

        display: flex;
        flex-direction: column-reverse !important;
        align-items: flex-start !important;
        /* 【关键】左对齐 */
        gap: 16px !important;
        z-index: 80 !important;
    }

    /* 轨道和卡片位置保持不变 */
    .timeline-rail-container {
        left: var(--rail-x) !important;
        transform: translateX(-50%) !important;
    }

    .entry-card-wrapper {
        padding-left: calc(var(--rail-x) + 1.2rem) !important;
        padding-right: 1rem !important;
    }

    /* 编辑器 */
    #editor-panel {
        top: 0 !important;
        height: 100dvh !important;
        border-radius: 0 !important;
    }

    #editor-panel .p-6 {
        padding: 16px !important;
    }
}


#btn-ai-summary {
    z-index: 30 !important;
    /* 降低到 30，低于主要的写日记按钮和气泡 (99999) */
}

#tutorial-bubble {
    z-index: 99999 !important;
    /* 确保它高于所有 FABs (z-index 60-40) */
}

/* --- Loading Screen Animations --- */
@keyframes flutter-spin {

    0%,
    100% {
        transform: rotate(0deg) scale(1);
        filter: brightness(1);
    }

    50% {
        transform: rotate(180deg) scale(0.9);
        filter: brightness(1.2);
    }
}

.animate-flutter-spin {
    animation: flutter-spin 3s ease-in-out infinite;
}

@keyframes sand-flow {
    0% {
        height: 0;
        opacity: 0;
        top: 50%;
    }

    50% {
        height: 40px;
        opacity: 1;
        top: 50%;
    }

    100% {
        height: 0;
        opacity: 0;
        top: 100%;
    }
}

.animate-sand-flow {
    animation: sand-flow 3s ease-in-out infinite;
}

.clip-triangle-top {
    clip-path: polygon(50% 100%, 0 0, 100% 0);
}

.clip-triangle-bottom {
    clip-path: polygon(50% 0, 0 100%, 100% 100%);
}

.fade-out {
    opacity: 0 !important;
    pointer-events: none !important;
}

/* Hide scrollbar for toolbar */
.no-scrollbar::-webkit-scrollbar {
    display: none;
}

.no-scrollbar {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

/* --- AI Insight Button (Flat Breathing Glow) --- */
.crystal-ball {
    /* Flat, Silky Purple Background */
    background: linear-gradient(135deg, rgba(168, 85, 247, 0.9), rgba(126, 34, 206, 0.95));
    /* Soft, Flat Glow */
    box-shadow: 0 4px 15px rgba(168, 85, 247, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(8px);
    position: relative;
    overflow: hidden;
    border-radius: 50%;
    -webkit-mask-image: -webkit-radial-gradient(white, black);
    transform: translateZ(0);
    animation: flat-breath 4s ease-in-out infinite;
}

/* Remove 3D Mist */
.crystal-ball::after {
    display: none;
}

@keyframes flat-breath {

    0%,
    100% {
        box-shadow: 0 4px 15px rgba(168, 85, 247, 0.4);
        transform: scale(1);
    }

    50% {
        box-shadow: 0 0 25px rgba(168, 85, 247, 0.6);
        transform: scale(1.05);
    }
}

/* =========================================
   PERFORMANCE OPTIMIZATIONS
   ========================================= */

/* 1. Pause all infinite animations by default on mobile */
@media (hover: none) and (pointer: coarse) {

    /* Pause crystal ball breathing animation when not interacting */
    .crystal-ball {
        animation-play-state: paused;
    }

    /* Reduce backdrop-filter blur for better performance */
    .nav-capsule,
    .entry-card,
    #focus-hud,
    .crystal-ball {
        backdrop-filter: blur(4px);
        -webkit-backdrop-filter: blur(4px);
    }

    /* Disable all box-shadows for unfocused cards on mobile */
    .entry-card:not(.active-focus) {
        box-shadow: none !important;
    }
}

/* 2. Respect user preference for reduced motion */
@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }

    .timeline-rail-flow {
        animation: none !important;
    }

    .crystal-ball {
        animation: none !important;
    }
}

/* 3. Optimize hardware-accelerated properties */
/* 注意：不要给有 position/transform 定位的元素添加 translateZ(0) */
.entry-card,
.guide-cursor,
.celestial-body,
.orbit-wheel,
#scenic-layer {
    will-change: transform;
    backface-visibility: hidden;
}

/* 4. Only use will-change on active elements (remove from inactive) */
.entry-item:not(.active-focus) .entry-card {
    will-change: auto;
}

/* 5. Pause animations when page is not visible (JS adds this class) */
body.page-hidden *,
body.page-hidden *::before,
body.page-hidden *::after {
    animation-play-state: paused !important;
}
/* --- FIX: Editor Scrolling & Thumbnail Sizing --- */

/* 1. Ensure Editor is scrollable and comfortable */
#editor-content {
    overflow-y: auto !important;
    min-height: 40vh !important; /* Ensure enough space */
    max-height: 60vh !important; /* Cap height to force scroll if needed, but allow content flow */
    overscroll-behavior-y: contain; /* Prevent scrolling parent */
    scroll-padding-bottom: 50px; /* Space for cursor at bottom */
}

/* 2. INLINE IMAGES: Small Thumbnails Only (User Request) */
/* The user wants inline photos to not take up space, just show as thumbnails */
#editor-content img,
#editor-preview img, 
.md-render img {
    max-width: 120px !important;  /* Force small width */
    max-height: 120px !important; /* Force small height */
    width: auto !important;
    height: auto !important;
    object-fit: cover;
    border-radius: 8px;
    margin: 4px 8px 4px 0 !important; /* Inline flow */
    display: inline-block !important; /* Allow text to flow or sit beside */
    vertical-align: middle;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    border: 1px solid var(--line);
    cursor: zoom-in; /* Hint that it's a thumbnail */
}

/* 3. Cover Image Preview (Top of Editor) - Keep modest */
#image-preview-area img {
    max-height: 150px !important;
    width: auto !important;
    border-radius: 8px;
    margin: 0 auto;
    display: block;
}