/* ==========================================================================
   0. 全局变量与主题定义 (CSS Variables & Theme)
   ========================================================================== */
:root {
    /* --- 浅色模式 (Light Mode) --- */
    --bg-body: #f5f5f7;
    --bg-card: #ffffff;
    --bg-input: rgba(118, 118, 128, 0.12);
    /* 增加透明度，配合毛玻璃 */
    --bg-header: rgba(245, 245, 247, 0.75);

    --text-primary: #1d1d1f;
    --text-secondary: #86868b;
    --text-placeholder: #888;

    --border-color: #d2d2d7;
    --border-light: #f0f0f0;

    /* --- 核心品牌色 --- */
    --link-blue: #007aff;
    --btn-hover-bg: rgba(0, 0, 0, 0.05);
    --album-btn-hover: rgba(52, 199, 89, 0.1);
    --delete-btn-hover: rgba(255, 59, 48, 0.1);

    /* --- 阴影系统 (Layered Shadows) --- */
    --shadow-card:
        0 2px 4px rgba(0, 0, 0, 0.02),
        0 8px 16px rgba(0, 0, 0, 0.04);

    --shadow-hover:
        0 4px 8px rgba(0, 0, 0, 0.04),
        0 12px 24px rgba(0, 0, 0, 0.08);

    /* --- 背景：极简光影 (浅色) --- */
    --bg-gradient: radial-gradient(circle at 15% 50%, rgba(0, 122, 255, 0.03), transparent 25%),
        radial-gradient(circle at 85% 30%, rgba(255, 59, 48, 0.03), transparent 25%);
}

/* --- 深色模式 (Dark Mode) --- */
body.dark-mode {
    --bg-body: #000000;
    --bg-card: #1c1c1e;
    --bg-input: #2c2c2e;
    --bg-header: rgba(28, 28, 30, 0.75);

    --text-primary: #f5f5f7;
    --text-secondary: #a1a1a6;
    --text-placeholder: #636366;

    --border-color: #38383a;
    --border-light: rgba(255, 255, 255, 0.1);

    /* 深色模式专属：卡片微边框 */
    --card-border: 1px solid rgba(255, 255, 255, 0.08);

    --shadow-card: 0 4px 12px rgba(0, 0, 0, 0.5);
    --shadow-hover: 0 12px 24px rgba(0, 0, 0, 0.6);

    --btn-hover-bg: rgba(255, 255, 255, 0.1);
    --album-btn-hover: rgba(52, 199, 89, 0.2);
    --delete-btn-hover: rgba(255, 59, 48, 0.2);

    /* --- 背景：极简光影 (深色增强版) --- */
    --bg-gradient: radial-gradient(circle at 15% 50%, rgba(10, 132, 255, 0.15), transparent 40%),
        radial-gradient(circle at 85% 30%, rgba(191, 90, 242, 0.12), transparent 35%);
}

/* ==========================================================================
   1. 全局基础与修复 (Global Fixes)
   ========================================================================== */

/* 【关键修复】仅使用 Opacity 动画 */
/* 绝对不要在这里加 transform，否则会破坏 position: fixed */
@keyframes pageFadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

html {
    scroll-behavior: smooth;
}

/* 隐藏默认滚动条但保留功能 */
html::-webkit-scrollbar {
    width: 8px;
    background-color: transparent;
}

html,
body {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

/* 自定义滚动条样式 */
html::-webkit-scrollbar-thumb {
    background-color: rgba(0, 0, 0, 0.1);
    border-radius: 10px;
    border: 2px solid transparent;
    background-clip: content-box;
}

html::-webkit-scrollbar-thumb:hover {
    background-color: rgba(0, 0, 0, 0.3);
}

body.dark-mode::-webkit-scrollbar-thumb {
    background-color: rgba(255, 255, 255, 0.15);
}

body.dark-mode::-webkit-scrollbar-thumb:hover {
    background-color: rgba(255, 255, 255, 0.3);
}

body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    margin: 0;
    color: var(--text-primary);

    /* 背景设置 */
    background-color: var(--bg-body);
    background-image: var(--bg-gradient);
    background-attachment: fixed;
    background-size: cover;

    transition: background-color 0.3s ease, color 0.3s ease;

    /* 应用安全的淡入动画 */
    animation: pageFadeIn 0.6s ease-out forwards;

    /* 字体渲染优化 */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

/* 品牌化文本选中色 */
::selection {
    background-color: rgba(0, 122, 255, 0.2);
    color: inherit;
}

body.dark-mode ::selection {
    background-color: rgba(10, 132, 255, 0.3);
    color: #fff;
}

/* ==========================================================================
   2. 布局结构 (Layout)
   ========================================================================== */
.main-layout {
    display: grid;
    grid-template-columns: 1fr 320px;
    gap: 40px;
    align-items: start;
    max-width: 1300px;
    margin: 0 auto;
    padding: 0 40px;
    box-sizing: border-box;

    /* 【关键修复】确保布局容器没有 transform，保证子元素 fixed 定位正常 */
    transform: none !important;
    opacity: 1 !important;
}

/* 画廊列：可以安全地加一点上浮动画，因为它不包含 fixed 元素 */
@keyframes contentFloatUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

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

.gallery-column {
    /* 应用单独的内容上浮动画 */
    animation: contentFloatUp 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}

/* 右侧仪表盘 */
.dashboard-column {
    position: sticky;
    top: 85px;
    max-height: calc(100vh - 100px);
    overflow-y: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
    display: flex;
    flex-direction: column;
    gap: 25px;

    /* 性能优化：独立图层 */
    will-change: transform;
}

.dashboard-column::-webkit-scrollbar {
    display: none;
}

.stats-card {
    background: var(--bg-card);
    padding: 20px;
    border-radius: 16px;
    box-shadow: var(--shadow-card);
    border: var(--card-border, none);
}

.stats-card h3 {
    margin: 0 0 15px;
    font-size: 1rem;
    font-weight: 600;
    border-bottom: 1px solid var(--border-light);
    padding-bottom: 10px;
    color: var(--text-primary);
}

.chart-container {
    position: relative;
    width: 100%;
    min-height: 200px;
}

/* ==========================================================================
   3. 顶部导航栏 (Header)
   ========================================================================== */
.header-bar {
    position: sticky;
    top: 0;
    width: 100%;
    padding: 0 20px;
    height: 70px;
    margin-bottom: 30px;
    z-index: 50;
    background-color: var(--bg-header);

    /* 毛玻璃效果 */
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);

    border-bottom: 1px solid var(--border-light);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 15px;
    box-sizing: border-box;
    /* 【新增】添加 transform 过渡，用于隐藏/显示 */
        transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
            background-color 0.3s ease,
            border-color 0.3s ease;
}

/* 【新增】隐藏状态的类 */
.header-bar.nav-hidden {
    transform: translateY(-100%);
    /* 向上完全移出屏幕 */
    box-shadow: none;
    /* 隐藏时去掉阴影 */
}

.header-left {
    display: flex;
    align-items: baseline;
    gap: 30px;
}

.header-logo {
    margin: 0;
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--text-primary);
    flex-shrink: 0;
    white-space: nowrap;
    text-decoration: none;
    letter-spacing: -0.5px;

    /* 【气质升级】优先使用系统自带的高级衬线体 */
        /* macOS: Songti SC, STSong; Windows: SimSun, KaiTi */
        font-family: "Songti SC", "STSong", "SimSun", "Times New Roman", serif;
}

.header-nav {
    display: flex;
    gap: 20px;
}

/* ==================== 导航链接样式 ==================== */
.nav-link {
    text-decoration: none;
    color: var(--text-secondary);
    font-weight: 500;
    font-size: 1rem;
    position: relative;
    /* 为伪元素定位提供基准 */
    padding-bottom: 4px;
    transition: color 0.2s;
}

/* 悬停时文字变色 */
.nav-link:hover {
    color: var(--text-primary);
}

/* 激活状态（当前页面）文字变色 */
.nav-link.active {
    color: var(--link-blue);
    font-weight: 600;
}

/* 下划线动画核心逻辑 */
.nav-link::after {
    content: '';
    position: absolute;
    bottom: -2px;

    /* 【核心】让线条中心点对齐文字中心 */
    left: 50%;
    transform: translateX(-50%);

    /* 初始宽度为0 (隐藏) */
    width: 0;

    height: 2px;
    background-color: var(--link-blue);
    border-radius: 2px;

    /* 宽度变化的过渡动画 */
    transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* 激活或悬停时，宽度展开为 100% */
.nav-link.active::after,
.nav-link:hover::after {
    width: 100%;
}

.search-form {
    flex-grow: 1;
    max-width: 480px;
    min-width: 120px;
    margin: 0 20px;
    display: flex;
    align-items: center;
}

.search-input {
    width: 100%;
    padding: 10px 15px;
    font-size: 0.95rem;
    border: 1px solid transparent;
    background-color: var(--bg-input);
    color: var(--text-primary);
    border-radius: 10px;
    transition: all 0.2s;
    outline: none;
}

.search-input:focus {
    background-color: var(--bg-card);
    border-color: var(--link-blue);
    box-shadow: 0 0 0 3px rgba(0, 122, 255, 0.1);
}

.auth-buttons {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-shrink: 0;
    margin-left: auto;
}

.nav-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 36px;
    padding: 0 12px;
    border-radius: 8px;
    font-size: 0.9rem;
    font-weight: 500;
    text-decoration: none;
    cursor: pointer;
    border: none;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.add-link {
    background-color: var(--link-blue);
    color: #fff;
    box-shadow: 0 2px 5px rgba(0, 122, 255, 0.2);
}

.add-link:hover {
    background-color: #0062cc;
    transform: translateY(-1px);
}

.edit-mode-button {
    background-color: var(--bg-input);
    color: var(--text-primary);
}

.edit-mode-button:hover {
    background-color: var(--btn-hover-bg);
}

body.edit-mode .edit-mode-button#toggle-edit-mode {
    background: var(--link-blue);
    color: #fff;
}

.logout-button {
    background-color: rgba(255, 59, 48, 0.1);
    color: #ff3b30;
}

.logout-button:hover {
    background-color: rgba(255, 59, 48, 0.2);
}

/* ==========================================================================
   4. 画廊列表与照片 (Gallery)
   ========================================================================== */
.date-header-group {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.date-header-group.in-view {
    opacity: 1;
    transform: translateY(0);
}

.date-separator {
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 40px 0 10px 0;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--border-light);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.daily-summary {
    font-size: 1rem;
    color: var(--text-primary);
    line-height: 1.6;
    white-space: pre-wrap;
    background-color: var(--bg-card);
    border-radius: 8px;
    padding: 15px;
    box-shadow: var(--shadow-card);
    margin: 0 0 20px 0;
    border: var(--card-border, none);
}

.admin-actions-summary {
    display: none;
}

.edit-mode .admin-actions-summary {
    display: block;
}

.admin-actions-summary .edit-button {
    background: var(--link-blue);
    color: #fff;
    border: none;
    padding: 5px 10px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.9rem;
}

.summary-edit-form {
    display: none;
    margin: 0 0 20px 0;
}

.summary-edit-form textarea {
    width: 100%;
    height: 100px;
    padding: 10px;
    background-color: var(--bg-card);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
    box-sizing: border-box;
    border-radius: 8px;
    font-family: inherit;
    font-size: 1rem;
}

.summary-edit-form .form-actions {
    margin-top: 10px;
    display: flex;
    gap: 10px;
}

.summary-edit-form .btn-save {
    background: #28a745;
    color: #fff;
    border: none;
    padding: 8px 15px;
    border-radius: 6px;
    cursor: pointer;
}

.summary-edit-form .btn-cancel {
    background: #888;
    color: #fff;
    border: none;
    padding: 8px 15px;
    border-radius: 6px;
    cursor: pointer;
}

.gallery-day-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    grid-gap: 24px;
    margin-top: 20px;
}

/* --- 核心照片卡片 --- */
.photo-item {
    border: none;
    background: var(--bg-card);
    border-radius: 16px;
    box-shadow: var(--shadow-card);
    overflow: hidden;

    /* 初始隐身状态 (配合 JS IntersectionObserver) */
    opacity: 0;
    transform: translateY(30px);

    /* 防卡顿：移除了 box-shadow transition */
    transition: opacity 0.6s ease-out, transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);

    /* 硬件加速 */
    will-change: transform, opacity;
    transform: translateZ(0);

    border: var(--card-border, none);
}

/* 必须保留这个 .in-view 才能让照片显示 */
.photo-item.in-view {
    opacity: 1;
    transform: translateY(0);
}

/* ==================== 修复：仅在电脑端启用悬停特效 ==================== */
/* 手机端忽略此样式，防止点击后卡在放大状态 */
@media (hover: hover) {

    /* 卡片上浮 */
    .photo-item:hover {
        transform: translateY(-8px) translateZ(0);
        /* 保持硬件加速 */
        box-shadow: var(--shadow-hover);
        transition: transform 0.3s ease-out, box-shadow 0.2s ease;
        z-index: 10;
        /* 确保悬停时浮在最上层 */
    }

    /* 图片放大 */
    .photo-item:hover img {
        transform:  translateZ(0);
    }


}

.photo-item img {
    width: 100%;
    height: 220px;
    object-fit: cover;
    display: block;
    cursor: pointer;
    background-color: var(--bg-input);
    /* 加载占位色 */
    transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    transform: translateZ(0);
    will-change: transform;
}


/* 果冻按压效果 */
button:active,
.nav-link:active,
.photo-item:active,
.btn:active,
.nav-btn:active {
    transform: scale(0.96) !important;
    transition: transform 0.1s ease;
}

.photo-item-content {
    padding: 20px;
}

.photo-item-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 10px;
}

.photo-item h3 {
    margin-top: 0;
    margin-bottom: 5px;
    font-size: 1.25rem;
    font-weight: 600;
    flex-grow: 1;
    color: var(--text-primary);
}

.photo-item p {
    margin: 0;
    color: var(--text-secondary);
    font-size: 0.95rem;
    line-height: 1.5;
}

.like-button {
    background: none !important;
    border: none !important;
    padding: 0 !important;
    box-shadow: none !important;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 0.9rem;
    color: var(--text-secondary);
    transition: transform 0.2s;
}

.like-button:active {
    transform: scale(1.2);
}

.like-button .like-icon {
    width: 22px;
    height: 22px;
}

.like-button.liked {
    color: #ff3b30;
}

.like-button.liked .like-count {
    font-weight: 600;
}

.admin-actions {
    display: none;
    margin-top: 12px;
    padding-top: 8px;
    border-top: 1px solid var(--border-light);
    gap: 10px;
    justify-content: flex-end;
}

.edit-mode .admin-actions {
    display: flex;
}

.admin-icon-button {
    background: none;
    border: none;
    cursor: pointer;
    padding: 6px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.2s ease;
}

.edit-button-icon:hover {
    background-color: var(--btn-hover-bg);
}

.delete-button-icon:hover {
    background-color: var(--delete-btn-hover);
}

.album-icon-button:hover {
    background-color: var(--album-btn-hover);
}

.album-icon-button svg {
    stroke: #34c759;
}

.tags-container {
    margin-top: 15px;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.tag {
    display: inline-block;
    background-color: var(--link-blue);
    color: #fff;
    font-size: 0.75rem;
    font-weight: 500;
    padding: 4px 8px;
    border-radius: 5px;
}

.exif-data {
    margin-top: 15px;
    padding-top: 10px;
    border-top: 1px solid var(--border-light);
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    font-size: 0.8rem;
    color: var(--text-placeholder);
    font-family: "SF Mono", Monaco, monospace;
}

.exif-data span {
    background-color: var(--bg-input);
    padding: 3px 6px;
    border-radius: 4px;
}

.palette-container {
    display: flex;
    gap: 4px;
    margin-top: 12px;
    height: 12px;
}

.palette-color {
    flex: 1;
    height: 100%;
    border-radius: 2px;
    cursor: pointer;
    transition: transform 0.1s ease;
}

.palette-color:hover {
    transform: scaleY(1.5);
}

.empty-state {
    text-align: center;
    padding: 80px 40px;
    background: var(--bg-card);
    border-radius: 16px;
    box-shadow: var(--shadow-card);
    margin-top: 30px;
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
    border: var(--card-border, none);
}

.empty-state.in-view {
    opacity: 1;
    transform: translateY(0);
}

/* ==========================================================================
   5. 模态框 (Modal)
   ========================================================================== */
/* 找到 .modal-backdrop 替换为： */
.modal-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 100;

    /* 【性能修复】移除 backdrop-filter: blur(...)，这是卡顿的元凶 */
    /* backdrop-filter: blur(15px); */
    /* -webkit-backdrop-filter: blur(15px); */

    /* 【视觉补偿】因为没有模糊了，把背景调深一点，遮挡后面的内容 */
    background-color: rgba(103, 103, 103, 0.304);

    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    visibility: hidden;

    /* 优化过渡曲线 */
    transition: opacity 0.25s cubic-bezier(0.4, 0, 0.2, 1), visibility 0.25s;

    /* 提示浏览器优化渲染 */
    will-change: opacity;
}

.modal-backdrop.show {
    opacity: 1;
    visibility: visible;
}

/* 找到 .modal-content 替换为： */
.modal-content {
    display: block;
    width: 90%;
    max-width: 830px;
    height: auto;
    max-height: 90vh;
    overflow-y: auto;
    border-radius: 16px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
    /* 加深阴影提升层次感 */
    overflow-x: hidden;

    /* 初始状态：稍微缩小 */
    transform: scale(0.96);
    transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    /* 增加一点点回弹效果 */

    scrollbar-width: none;
    background-color: var(--bg-card);
    border: var(--card-border, none);

    /* 【性能修复】硬件加速 */
    will-change: transform;
    transform: translateZ(0);

    /* 【核心】防止滚动链式传导给父级 */
        overscroll-behavior: contain;
}

.modal-content::-webkit-scrollbar {
    display: none;
}

.modal-backdrop.show .modal-content {
    transform: scale(1);
}

.modal-image-container {
    width: 100%;
    height: auto;
    background-color: rgba(0, 0, 0, 0.05);
}

.modal-image-container img {
    width: 100%;
    height: auto;
    max-height: 75vh;
    object-fit: contain;
    display: block;
}

.modal-details-container {
    width: 100%;
    overflow-y: visible;
    box-sizing: border-box;
    padding: 25px;
    position: relative;
    background-color: var(--bg-card);
}

.modal-close-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: none;
    border: none;
    cursor: pointer;
    z-index: -1;
}

.modal-close-button {
    position: absolute;
    top: 15px;
    right: 15px;
    background: var(--bg-input);
    color: var(--text-primary);
    border: none;
    border-radius: 50%;
    width: 30px;
    height: 30px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.2s ease;
    z-index: 10;
}

.modal-close-button:hover {
    background-color: var(--btn-hover-bg);
}

.nav-arrow {
    position: fixed;
    top: 50%;
    transform: translateY(-50%);
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.8);
    border: 1px solid var(--border-color);
    color: #1d1d1f;
    font-size: 1.5rem;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    z-index: 110;
    transition: all 0.2s ease;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    user-select: none;
    outline: none;
}

body.dark-mode .nav-arrow {
    background-color: rgba(44, 44, 46, 0.8);
    border-color: #38383a;
    color: #fff;
}

.nav-arrow:hover {
    background-color: var(--link-blue);
    color: #fff;
    border-color: var(--link-blue);
    transform: translateY(-50%) scale(1.1);
}

.nav-arrow.prev {
    left: 20px;
}

.nav-arrow.next {
    right: 20px;
}

.modal-uploader-info {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 15px;
}

.modal-uploader-info img {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
}

.modal-uploader-info span {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary);
}

#modal-taken-at {
    font-size: 0.9rem;
    color: var(--text-secondary);
    margin: -10px 0 15px 0;
    font-weight: 500;
}

.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 15px;
    padding-right: 30px;
}

.modal-header h2 {
    font-size: 1.8rem;
    font-weight: 600;
    margin-top: 0;
    margin-bottom: 10px;
    color: var(--text-primary);
}

.modal-details-container p {
    font-size: 1rem;
    line-height: 1.6;
    color: var(--text-primary);
    margin-bottom: 20px;
    white-space: pre-wrap;
    word-break: break-word;
}

.ai-generate-button {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--link-blue);
    color: #fff;
    border: none;
    padding: 8px 14px;
    border-radius: 8px;
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    transition: background-color 0.2s ease;
    margin-top: -10px;
    margin-bottom: 20px;
}

.ai-generate-button:hover {
    background: #005ec4;
}

.ai-generate-button:disabled {
    background: #aaa;
    cursor: wait;
}

.view-original-link {
    display: inline-block;
    margin-top: 15px;
    padding: 6px 12px;
    background-color: var(--bg-input);
    color: var(--link-blue);
    text-decoration: none;
    font-weight: 500;
    font-size: 0.9rem;
    border-radius: 8px;
    transition: background-color 0.2s ease;
}

.view-original-link:hover {
    background-color: var(--btn-hover-bg);
}

.album-action-area {
    margin-top: 20px;
    background: transparent;
    padding: 0;
    border-radius: 12px;
    border: none;
}

.current-albums-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 10px;
}

.current-album-badge {
    display: inline-flex;
    align-items: center;
    background-color: var(--bg-input);
    color: var(--link-blue);
    border: 1px solid var(--border-color);
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 0.85rem;
    font-weight: 500;
}

.modal-divider {
    border: none;
    border-top: 1px solid var(--border-light);
    margin: 20px 0;
}

.modal-comments-section h4 {
    font-size: 1.1rem;
    font-weight: 600;
    margin-top: 0;
    margin-bottom: 15px;
    color: var(--text-primary);
}

#modal-comments-list {
    max-height: 300px;
    overflow-y: auto;
}

.comment-item {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    margin-bottom: 15px;
    font-size: 0.9rem;
    line-height: 1.5;
}

.comment-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}

.comment-body {
    flex-grow: 1;
}

.comment-item p {
    margin: 4px 0 0 0;
    color: var(--text-primary);
}

.comment-item-time {
    font-size: 0.75rem;
    color: var(--text-secondary);
    margin-top: 2px;
}

.comment-item-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.comment-item-header strong {
    font-weight: 600;
    color: var(--text-primary);
}

.admin-delete-comment-button {
    background: none;
    border: none;
    color: #ff3b30;
    font-size: 0.8rem;
    font-weight: 500;
    cursor: pointer;
    padding: 2px 5px;
    border-radius: 4px;
    transition: background-color 0.2s ease;
}

.admin-delete-comment-button:hover {
    background-color: var(--delete-btn-hover);
}

#modal-comment-form textarea {
    width: 100%;
    height: 60px;
    padding: 10px;
    box-sizing: border-box;
    background: var(--bg-input);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    font-family: inherit;
    font-size: 0.9rem;
    margin-bottom: 10px;
}

#modal-comment-form button {
    background: var(--link-blue);
    color: #fff;
    border: none;
    padding: 8px 15px;
    border-radius: 8px;
    font-weight: 500;
    cursor: pointer;
}

.comment-login-prompt {
    display: block;
    text-align: center;
    padding: 15px;
    background: var(--bg-input);
    border-radius: 8px;
    color: var(--link-blue);
    text-decoration: none;
    font-weight: 500;
}

.reply-badge {
    display: inline-block;
    background-color: var(--bg-input);
    color: var(--text-secondary);
    font-size: 0.75rem;
    padding: 2px 6px;
    border-radius: 4px;
    margin-bottom: 4px;
}

.reply-button {
    background: none;
    border: none;
    color: var(--link-blue);
    font-size: 0.8rem;
    cursor: pointer;
    margin-left: 10px;
    font-weight: 500;
}

.reply-button:hover {
    text-decoration: underline;
}

.replying-to-bar {
    background-color: var(--bg-input);
    padding: 8px 12px;
    font-size: 0.85rem;
    color: var(--text-secondary);
    border-radius: 8px 8px 0 0;
    justify-content: space-between;
    align-items: center;
    border: 1px solid var(--border-color);
    border-bottom: none;
}

.cancel-reply-btn {
    cursor: pointer;
    font-weight: bold;
    color: var(--text-placeholder);
    font-size: 1.2rem;
    line-height: 1;
}

.cancel-reply-btn:hover {
    color: #ff3b30;
}

#reply-status-bar[style*="display: flex"]+#modal-comment-form textarea {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}

/* ==========================================================================
   6. 其他组件 (Toast & Popups)
   ========================================================================== */
.toast-notification {
    position: fixed;
    top: 80px;
    right: 20px;
    background-color: #fff;
    border-left: 5px solid var(--link-blue);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    padding: 15px 20px;
    border-radius: 4px;
    z-index: 1000;
    display: flex;
    align-items: center;
    gap: 10px;
    transform: translateX(120%);
    transition: transform 0.3s ease-out;
    max-width: 300px;
    color: #333;
}

.toast-notification.show {
    transform: translateX(0);
}

.quick-album-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.2);
    z-index: 2000;
    display: none;
    justify-content: center;
    align-items: center;
}

.quick-album-modal {
    background: #fff;
    width: 300px;
    border-radius: 12px;
    padding: 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
    animation: popIn 0.2s ease-out;
    color: #333;
}

@keyframes popIn {
    from {
        transform: scale(0.9);
        opacity: 0;
    }

    to {
        transform: scale(1);
        opacity: 1;
    }
}

.quick-album-list {
    max-height: 300px;
    overflow-y: auto;
    margin-top: 10px;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.quick-album-item {
    padding: 10px;
    border-radius: 8px;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #f9f9f9;
    transition: background 0.2s;
}

.quick-album-item:hover {
    background: #f0f0f0;
}

.quick-album-item.active {
    background: #e5f9e7;
    color: #34c759;
    font-weight: 500;
}

/* ==========================================================================
   7. 响应式适配 (Responsive)
   ========================================================================== */
@media (max-width: 1024px) {
    .main-layout {
        grid-template-columns: 1fr;
        padding: 0 20px;
    }

    /* 移动端仪表盘 (底部抽屉) */
    .dashboard-column {
        display: block !important;
        position: fixed;
        top: auto !important;
        /* 复位 top */
        bottom: 0;
        left: 0;
        width: 100%;
        height: auto;
        max-height: 80vh;
        overflow-y: auto;
        z-index: 2000;

        background-color: var(--bg-card);
        border-radius: 24px 24px 0 0;
        padding: 25px 20px;
        box-shadow: 0 -10px 30px rgba(0, 0, 0, 0.2);
        box-sizing: border-box;

        /* 初始状态：藏在底部 */
        visibility: hidden;
        pointer-events: none;
        transform: translateY(100%) !important;
        transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1), visibility 0.3s;
    }

    /* 激活状态：滑出 */
    .dashboard-column.show {
        visibility: visible;
        pointer-events: auto;
        transform: translateY(0) !important;
    }

    .dashboard-column::before {
        content: '';
        position: absolute;
        top: 10px;
        left: 50%;
        transform: translateX(-50%);
        width: 40px;
        height: 5px;
        background-color: var(--border-color);
        border-radius: 3px;
    }

    #mobile-stats-btn {
        display: inline-flex !important;
    }
}

/* 找到 .stats-overlay 替换为： */
.stats-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;

    /* 【性能修复】移除模糊，改用半透明黑 */
    background-color: rgba(0, 0, 0, 0.6);
    /* backdrop-filter: blur(2px); */

    z-index: 1999;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s;
    will-change: opacity;
}

.stats-overlay.show {
    opacity: 1;
    visibility: visible;
}

@media (max-width: 768px) {
    .header-bar {
        flex-wrap: nowrap !important;
        gap: 10px;
        padding: 10px 15px;
        height: 60px;
        overflow-x: auto;
        overflow-y: hidden;
        scrollbar-width: none;
    }

    .header-bar::-webkit-scrollbar {
        display: none;
    }

    .header-bar h1 {
        font-size: 1.3rem;
        margin-right: 5px;
        white-space: nowrap;
    }

    .search-form {
        display: none !important;
    }

    .nav-link {
        font-size: 0.95rem;
        margin-right: 10px;
        white-space: nowrap;
    }

    .auth-buttons {
        gap: 8px;
    }

    .nav-btn {
        padding: 0 10px;
        font-size: 0.85rem;
        height: 32px;
        white-space: nowrap;
    }

    .gallery-day-grid {
        grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
        grid-gap: 10px;
    }

    .photo-item img {
        height: 180px;
    }

    /* Hero 区域适配 */
    .hero-header {
        padding: 30px 20px;
        margin-bottom: 20px;
        border-radius: 0;
    }

    .hero-avatar-wrapper {
        width: 80px;
        height: 80px;
    }

    .hero-name {
        font-size: 1.5rem;
    }

    .back-to-top {
        bottom: 80px;
        right: 20px;
        width: 44px;
        height: 44px;
    }
}

/* Hero Header & Back to Top */
.hero-header {
    position: relative;
    max-width: 1000px;
    margin: 0 auto 40px auto;
    padding: 40px 20px;
    text-align: center;
    border-radius: 0 0 24px 24px;
    overflow: hidden;
}

.hero-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, var(--bg-card) 0%, var(--bg-body) 100%);
    z-index: -1;
    opacity: 0.5;
}

.hero-avatar-wrapper {
    width: 100px;
    height: 100px;
    margin: 0 auto 15px auto;
    border-radius: 50%;
    padding: 4px;
    background: var(--bg-card);
    box-shadow: var(--shadow-card);
}

.hero-avatar {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
}

.hero-name {
    font-size: 1.8rem;
    font-weight: 700;
    margin: 0 0 8px 0;
    color: var(--text-primary);
}

.hero-bio {
    font-size: 1rem;
    color: var(--text-secondary);
    margin: 0;
    font-weight: 400;
}

.back-to-top {
    position: fixed;
    bottom: 30px;
    right: 30px;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background-color: var(--bg-card);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    cursor: pointer;
    z-index: 900;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transform: translateY(20px);
    transition: all 0.3s ease;
}

.back-to-top.show {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.back-to-top:hover {
    background-color: var(--link-blue);
    color: #fff;
    border-color: var(--link-blue);
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(0, 122, 255, 0.3);
}

/* --- 新增规则：当 body 拥有 modal-open 类时，强制隐藏回顶按钮 --- */
body.modal-open .back-to-top {
    opacity: 0 !important;
    visibility: hidden !important;
    transform: translateY(20px) !important;
    /* 让它沉下去，保持动画一致性 */
    pointer-events: none !important;
    /* 禁止点击 */
}

/* 定义 Q 弹动画关键帧 */
@keyframes heartBounce {
    0% {
        transform: scale(1);
    }

    40% {
        transform: scale(1.35);
    }

    /* 瞬间变大 */
    100% {
        transform: scale(1);
    }

    /* 弹回原状 */
}

/* 当按钮拥有 .liked 类时，里面的 svg 图标执行动画 */
.like-button.liked svg {
    animation: heartBounce 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    /* cubic-bezier 制造一种富有弹性的物理手感 */
}

/* 搜索框和评论框通用 */
.search-input,
#modal-comment-form textarea {
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

/* 聚焦状态 */
.search-input:focus,
#modal-comment-form textarea:focus {
    background-color: #fff;
    border-color: var(--link-blue);

    /* 【核心】扩散光环 */
    box-shadow: 0 0 0 4px rgba(0, 122, 255, 0.15);

    /* 稍微放大一点点，增加呼吸感 */
    transform: scale(1.01);
}

/* 深色模式适配 */
body.dark-mode .search-input:focus,
body.dark-mode #modal-comment-form textarea:focus {
    background-color: #2c2c2e;
    box-shadow: 0 0 0 4px rgba(10, 132, 255, 0.2);
}



/* 美化文件选择按钮 */
input[type="file"] {
    color: var(--text-secondary);
    /* 文件名颜色 */
    font-size: 0.95rem;
}

input[type="file"]::file-selector-button {
    margin-right: 15px;
    border: none;
    background: var(--bg-input);
    padding: 10px 20px;
    border-radius: 20px;
    /* 胶囊形状 */
    color: var(--link-blue);
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    transition: background 0.2s ease, transform 0.1s ease;

    /* 加上一点阴影 */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
}

input[type="file"]::file-selector-button:hover {
    background: rgba(0, 122, 255, 0.1);
    /* 悬停时的淡蓝背景 */
}

input[type="file"]::file-selector-button:active {
    transform: scale(0.95);
    /* 按压反馈 */
}

/* ==================== 8. 细节体验优化 (Finishing Touches) ==================== */

/* 2. 移除移动端点击时的灰色高亮背景 (让 App 质感更纯粹) */
* {
    -webkit-tap-highlight-color: transparent;
}

/* 3. 优雅的文本链接下划线 (Fancy Text Links) */
/* 针对正文中的链接 (排除导航栏和按钮)，悬停时颜色加深 */
.daily-summary a,
.photo-item p a,
.modal-details-container p a {
    color: var(--text-primary);
    /* 默认保持文字同色 */
    text-decoration: none;
    /* 去掉默认的生硬下划线 */

    /* 自定义下划线：用背景渐变实现，距离文字稍微远一点 */
    background-image: linear-gradient(var(--link-blue), var(--link-blue));
    background-position: 0% 100%;
    /* 放在底部 */
    background-repeat: no-repeat;
    background-size: 100% 2px;
    /* 宽度100%，高度2px */

    transition: background-size 0.3s cubic-bezier(0.4, 0, 0.2, 1), color 0.3s;
}

/* 悬停效果：文字变蓝，下划线保持 */
.daily-summary a:hover,
.photo-item p a:hover,
.modal-details-container p a:hover {
    color: var(--link-blue);
}

/* === 1. 自定义工具提示 (CSS Tooltip) === */

/* 为带有 aria-label 的按钮添加提示逻辑 */
[aria-label] {
    position: relative;
}

/* 气泡主体 */
[aria-label]::before {
    content: attr(aria-label);
    /* 读取标签内容 */
    position: absolute;
    bottom: 100%;
    /* 位于元素上方 */
    left: 50%;
    transform: translate(-50%, -10px) scale(0.8);
    /* 初始位置：稍高，缩小 */

    background: rgba(0, 0, 0, 0.85);
    color: #fff;
    font-size: 0.75rem;
    padding: 5px 10px;
    border-radius: 6px;
    white-space: nowrap;
    pointer-events: none;
    /* 不阻挡鼠标 */

    opacity: 0;
    visibility: hidden;
    transition: all 0.2s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    /* 弹性动画 */
    z-index: 1000;
}

/* 气泡下方的小三角 */
[aria-label]::after {
    content: '';
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translate(-50%, 0) scale(0);
    border: 5px solid transparent;
    border-top-color: rgba(0, 0, 0, 0.85);
    margin-bottom: -10px;
    /* 调整位置 */
    opacity: 0;
    transition: all 0.2s;
}

/* 悬停时显示 */
[aria-label]:hover::before {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, -10px) scale(1);
    /* 弹出来 */
}

[aria-label]:hover::after {
    opacity: 1;
    transform: translate(-50%, 0) scale(1);
}

/* 深色模式适配：改为白底黑字，对比更强 */
body.dark-mode [aria-label]::before {
    background: rgba(255, 255, 255, 0.9);
    color: #000;
}

body.dark-mode [aria-label]::after {
    border-top-color: rgba(255, 255, 255, 0.9);
}

/* === 2. 语义化光标 (SVG 高清版) === */

/* 自定义放大镜光标 (Base64 SVG) */
/* 白色线条 + 黑色投影，保证在任何颜色的照片上都清晰可见 */
.photo-item img {
    cursor: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' style='filter: drop-shadow(1px 1px 2px rgba(0,0,0,0.6));'><circle cx='11' cy='11' r='8'></circle><line x1='21' y1='21' x2='16.65' y2='16.65'></line><line x1='11' y1='8' x2='11' y2='14'></line><line x1='8' y1='11' x2='14' y2='11'></line></svg>") 16 16, zoom-in;
}

/* 弹窗内禁止光标 */
.modal-image-container img {
    cursor: default;
}

/* 禁用状态：精致的禁止符号 */
button:disabled,
.btn:disabled {
    cursor: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23ff3b30' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='10'></circle><line x1='4.93' y1='4.93' x2='19.07' y2='19.07'></line></svg>") 12 12, not-allowed;
    opacity: 0.6;
}
/* ==================== 3. 底部页脚 (优雅版) ==================== */

/* 容器通用样式 */
#loading-spinner,
#wall-end,
#gallery-end {
    position: relative;
    text-align: center;
    color: var(--text-placeholder);
    /* 浅灰色 */
    font-size: 0.85rem;
    font-weight: 500;
    letter-spacing: 2px;
    /* 字间距宽一点更高级 */
    margin: 60px 0 100px 0;
    /* 这里的下边距(100px)是为了防止被手机端底部操作栏遮挡 */

    /* 【核心】必须用 flex 布局，才能让左右线条自动对齐 */
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    /* 文字和线的距离 */
    opacity: 0.7;
}

/* --- 左边的渐变线 --- */
#loading-spinner::before,
#wall-end::before,
#gallery-end::before {
    content: '';
    display: block;
    width: 50px;
    /* 线条长度 */
    height: 1px;
    /* 极细 */
    /* 从透明渐变到灰色 */
    background: linear-gradient(to right, transparent, var(--border-color));
}

/* --- 右边的渐变线 --- */
#loading-spinner::after,
#wall-end::after,
#gallery-end::after {
    content: '';
    display: block;
    width: 50px;
    height: 1px;
    /* 从灰色渐变到透明 */
    background: linear-gradient(to left, transparent, var(--border-color));
}

/* ==================== 9. 移动端布局深度优化 (Mobile Polish) ==================== */
@media (max-width: 768px) {

    /* 1. 卡片瘦身：隐藏列表中不必要的繁杂信息 */
    /* 手机列表页只保留视觉核心，想看参数(EXIF)和色板请点开大图 */
    .gallery-day-grid .exif-data,
    .gallery-day-grid .palette-container,
    .gallery-day-grid .tags-container,
    .gallery-day-grid .photo-item p {
        display: none !important;
    }

    /* 2. 压缩卡片底部空间 */
    /* 因为隐藏了上面那些元素，内边距也可以减小了 */
    .photo-item-content {
        padding: 10px 12px !important;
    }

    /* 3. 标题与点赞单行排列 */
    .photo-item-header {
        margin-bottom: 0 !important;
        /* 移除底部间距 */
        align-items: center !important;
        min-height: 24px;
        /* 保证高度一致 */
    }

    /* 4. 标题防溢出处理 */
    .photo-item h3 {
        font-size: 0.95rem !important;
        margin: 0 !important;

        /* 强制单行显示，超出部分显示省略号 */
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;

        max-width: 80%;
        /* 留出 20% 给点赞心形 */
    }

    /* 5. 调整图片高度 */
    /* 稍微减小高度，让一屏能看到更多图 */
    .photo-item img {
        height: 150px !important;
    }

    /* 6. 调整日期标题位置 */
    /* 防止日期被吸附的顶部导航栏挡住 */
    .date-separator {
        top: 65px !important;
        /* 适配移动端较矮的导航栏 */
        font-size: 1.1rem !important;
        margin: 30px 0 15px 0 !important;
    }

    /* 7. 每日总结文字调整 */
    .daily-summary {
        font-size: 0.9rem !important;
        padding: 12px !important;
    }
}

/* ==================== 10. 移动端弹窗体验重塑 (Modal Mobile Redesign) ==================== */
@media (max-width: 768px) {

    /* 1. 导航箭头：移至屏幕底部，互不打扰 */
    .nav-arrow {
        top: auto !important;
        /* 取消垂直居中 */
        bottom: 40px !important;
        /* 固定在屏幕底部安全区 */
        transform: none !important;
        /* 移除位移 */

        width: 48px !important;
        /* 加大触控面积 */
        height: 48px !important;

        background-color: rgba(255, 255, 255, 0.95) !important;
        /* 提高不透明度，防干扰 */
        box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15) !important;
        /* 增强阴影浮起感 */
        z-index: 2000 !important;
        /* 确保层级最高 */
    }

    /* 左右分布 */
    .nav-arrow.prev {
        left: 20% !important;
        /* 放在左侧 */
    }

    .nav-arrow.next {
        right: 20% !important;
        /* 放在右侧 */
    }

    /* 2. 弹窗卡片：上提并瘦身 */
    .modal-content {
        width: 90% !important;
        /* 左右留出呼吸空隙 */
        max-height: 75vh !important;
        /* 限制高度，给底部箭头留出足够空间 */
        margin-bottom: 80px;
        /* 核心：物理上移，避开底部操作区 */
        border-radius: 20px !important;
        /* 更大的圆角，更像原生卡片 */
    }

    /* 3. 图片显示优化 */
    .modal-image-container img {
        max-height: 45vh !important;
        /* 限制图片高度，确保详情文字能露出来 */
    }

    /* 4. 内容区紧凑化 */
    .modal-details-container {
        padding: 20px !important;
        /* 减小内边距 */
    }

    /* 5. 关闭按钮优化 */
    .modal-close-button {
        top: 12px !important;
        right: 12px !important;
        background: rgba(0, 0, 0, 0.05) !important;
        /* 浅色背景，减少视觉干扰 */
        width: 32px !important;
        height: 32px !important;
    }

    /* 深色模式适配 */
    body.dark-mode .nav-arrow {
        background-color: rgba(44, 44, 46, 0.95) !important;
        border-color: rgba(255, 255, 255, 0.1) !important;
    }
}

/* === 12. 弹窗环境光效 === */
.ambient-shadow {
    transition: box-shadow 0.5s ease;
    /* 颜色切换时的丝滑过渡 */
}

/* ==================== 13. Apple TV 风格 3D 视差特效 ==================== */

/* 开启 3D 空间透视 */
.photo-item {
    transform-style: preserve-3d;
    perspective: 1000px;
    /* 透视距离，越小3D感越强 */
}

/* 让图片稍微“浮”起来一点，产生分层感 */
.photo-item img {
    /* Z轴位移，让图片和卡片底板产生距离 */
    transform: translateZ(20px);
}

/* ==================== 14. 磁力吸附按钮 (Magnetic Buttons) ==================== */

/* 将所有需要磁力效果的按钮类名都加在这里 */
.nav-btn,
/* 顶部导航按钮 */
.like-button,
/* 点赞爱心 */
.back-to-top,
/* 回顶按钮 */
.btn,
/* 通用按钮 */
.ai-generate-button

/* AI生成按钮 */
    {
    /* 【核心】定义回弹物理曲线 */
    /* cubic-bezier(0.23, 1, 0.32, 1) 是一种类似弹簧的减速曲线，手感极佳 */
    transition: transform 0.4s cubic-bezier(0.23, 1, 0.32, 1),
        background-color 0.2s ease,
        box-shadow 0.2s ease,
        opacity 0.2s ease;

    /* 确保按钮在移动时浮在其他内容上面，不被遮挡 */
    position: relative;
    z-index: 2;

    /* 性能优化：提示浏览器这个元素会频繁变形 */
    will-change: transform;
}

/* 悬停时稍微提高层级，防止被相邻按钮遮挡 */
.nav-btn:hover,
.like-button:hover,
.back-to-top:hover,
.btn:hover {
    z-index: 10;
}

/* === 电影级显影：照片卡片 === */
.photo-item {
    /* ... 保留原有的边框、背景等布局属性 ... */
    border: none;
    background: var(--bg-card);
    border-radius: 16px;
    box-shadow: var(--shadow-card);
    overflow: hidden;

    /* 1. 初始状态：下沉 + 透明 + 模糊 */
    opacity: 0;
    transform: translateY(30px) translateZ(0);
    /* 保持硬件加速 */
    filter: blur(10px);
    /* 【核心】初始模糊度 */

    /* 2. 过渡动画：增加 filter 属性 */
    transition: opacity 0.8s ease,
        transform 0.8s cubic-bezier(0.2, 0.8, 0.2, 1),
        filter 0.8s ease;
    /* 让模糊也平滑过渡 */

    /* 3. 性能优化 */
    will-change: transform, opacity, filter;

    /* 微边框 (深色模式用) */
    border: var(--card-border, none);

    /* 3D 透视 (配合之前的 3D 视差功能) */
    transform-style: preserve-3d;
    perspective: 1000px;

    box-shadow: var(--shadow-card),
            inset 0 1px 0 0 rgba(255, 255, 255, 0.4);
}

/* 进入视野后的状态 */
.photo-item.in-view {
    opacity: 1;
    transform: translateY(0) translateZ(0);
    filter: blur(0);
    /* 【核心】变清晰 */
}


/* === 电影级显影：每日总结文字 === */
.daily-summary {
    /* ... 保留原有的字体、背景等属性 ... */
    font-size: 1rem;
    color: var(--text-primary);
    line-height: 1.6;
    white-space: pre-wrap;
    background-color: var(--bg-card);
    border-radius: 8px;
    padding: 15px;
    box-shadow: var(--shadow-card);
    margin: 0 0 20px 0;
    border: var(--card-border, none);

    /* 1. 初始状态 */
    opacity: 0;
    transform: translateY(15px);
    /*文字位移不需要太大*/
    filter: blur(4px);
    /*文字模糊度也不需要太大，否则看不清*/

    /* 2. 过渡动画 */
    transition: opacity 0.8s ease,
        transform 0.8s ease-out,
        filter 0.8s ease;
}

/* 3. 触发机制 */
/* 当父容器 (.date-header-group) 进入视野时，触发子元素 (.daily-summary) 的显影 */
.date-header-group.in-view .daily-summary {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
}

/* === 15. Logo 渐变流光 === */
.header-logo {
    /* 定义渐变：从主文字色过渡到品牌蓝 */
    background: linear-gradient(120deg, var(--text-primary) 30%, var(--link-blue) 100%);

    /* 【核心】将背景裁剪为文字形状 */
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;

    /* 稍微加一点字间距，增加空气感 */
    letter-spacing: 1px;

    /* 保持硬件加速，防止渲染模糊 */
    transform: translateZ(0);
    display: inline-block;
}

/* === 16. 头像呼吸光效 === */
@keyframes breatheGlow {
    0% {
        box-shadow: 0 0 0 0 rgba(0, 122, 255, 0.4);
    }

    70% {
        box-shadow: 0 0 0 15px rgba(0, 122, 255, 0);
    }

    /* 扩散并消失 */
    100% {
        box-shadow: 0 0 0 0 rgba(0, 122, 255, 0);
    }
}

.hero-avatar-wrapper {
    /* 应用呼吸动画：3秒一次，无限循环 */
    animation: breatheGlow 3s infinite ease-out;
    /* 保持原有的圆角 */
    border-radius: 50%;
}

/* 深色模式微调颜色 */
body.dark-mode .hero-avatar-wrapper {
    animation-name: breatheGlowDark;
}
/* 深色模式适配：改为微弱的亮边 */
body.dark-mode .photo-item {
    box-shadow: var(--shadow-card),
        inset 0 1px 0 0 rgba(255, 255, 255, 0.08);
}

@keyframes breatheGlowDark {
    0% {
        box-shadow: 0 0 0 0 rgba(10, 132, 255, 0.3);
    }

    70% {
        box-shadow: 0 0 0 15px rgba(10, 132, 255, 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(10, 132, 255, 0);
    }
}

/* === 17. Hero 区域交错入场 === */

/* 1. 初始化：让 Hero 里的元素默认隐藏 */
.hero-avatar-wrapper,
.hero-name,
.hero-bio {
    opacity: 0;
    /* 复用之前的上浮动画逻辑 */
    animation: contentFloatUp 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}

/* 2. 设定延迟：依次出场 */
.hero-avatar-wrapper {
    animation-delay: 0.1s;
    /* 头像最先 */
}

.hero-name {
    animation-delay: 0.2s;
    /* 名字紧随其后 */
}

.hero-bio {
    animation-delay: 0.3s;
    /* 简介最后 */
}

/* === 18. 水晶质感标签 (Crystal Tags) === */
.tag,
.current-album-badge {
    /* 重置背景，改用半透明 */
    background: rgba(0, 122, 255, 0.1) !important;
    color: var(--link-blue) !important;

    /* 核心：毛玻璃 + 边框 */
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    border: 1px solid rgba(0, 122, 255, 0.15);

    /* 细节微调 */
    padding: 4px 10px !important;
    border-radius: 12px !important;
    /* 更圆润 */
    font-weight: 600 !important;
    letter-spacing: 0.5px;

    /* 光泽动画 */
    transition: all 0.3s ease;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.02);
}

/* 悬停时：水晶发光 */
.tag:hover,
.current-album-badge:hover {
    background: rgba(0, 122, 255, 0.2) !important;
    border-color: rgba(0, 122, 255, 0.3);
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(0, 122, 255, 0.15);
}

/* 深色模式适配：让水晶更通透 */
body.dark-mode .tag,
body.dark-mode .current-album-badge {
    background: rgba(10, 132, 255, 0.15) !important;
    color: #fff !important;
    border-color: rgba(255, 255, 255, 0.1);
}

/* === 19. 深色模式霓虹辉光 === */
body.dark-mode .header-logo,
body.dark-mode .hero-name {
    /* 极其微弱的白色外发光，增加通透感 */
    text-shadow: 0 0 15px rgba(255, 255, 255, 0.3);
    transition: text-shadow 0.5s ease;
}

/* ==================== 22. 打字机光标闪烁动画 ==================== */
@keyframes cursorBlink {

    0%,
    100% {
        border-color: var(--link-blue);
    }

    50% {
        border-color: transparent;
    }
}

/* 修正 hero-bio 的布局，防止打字时光标乱跳 */
.hero-bio {
    display: inline-block;
    /* 让边框紧贴文字 */
    min-height: 1.2em;
    /* 防止文字为空时高度坍塌 */
    white-space: pre-wrap;
    /* 保留换行符 */

    /* 初始状态不显示光标，由 JS 添加 */
    border-right: 2px solid transparent;
    padding-right: 4px;
}

/* ==================== 11. 强制修复：触屏设备禁止悬停粘滞 ==================== */
/* 这段代码会覆盖之前所有可能残留的 Hover 样式，专治“点赞后卡住” */

@media (hover: none) {

    /* 1. 强制卡片归位 */
    .photo-item:hover {
        transform: translateZ(0) !important;
        /* 移除上浮 */
        box-shadow: var(--shadow-card) !important;
        /* 恢复普通阴影 */
        z-index: 1 !important;
        /* 恢复层级 */
    }

    /* 2. 强制图片复原 */
    .photo-item:hover img {
        transform: translateZ(0) !important;
        /* 移除放大 */
    }

    /* 3. 禁用光影扫光 */
    .photo-item:hover::after {
        animation: none !important;
        display: none !important;
    }

    /* 4. 保持点击时的果冻反馈 (Active 状态依然有效) */
    .photo-item:active {
        transform: scale(0.96) !important;
    }
}

/* ==================== 12. 终极交互管理 (Interaction Manager) ==================== */

/* 1. 基础状态：任何设备点击时都有微缩反馈 (果冻感) */
.photo-item:active {
    transform: scale(0.96) translateZ(0);
    transition: transform 0.1s ease;
}

/* 2. 桌面端专属特效 (仅在支持真正鼠标悬停的设备上启用) */
/* 手机平板会直接忽略这段代码，从而彻底杜绝粘滞 */
@media (hover: hover) {

    /* 悬停上浮 + 投影 */
    .photo-item:hover {
        transform: translateY(-8px) translateZ(0);
        box-shadow: var(--shadow-hover);
        transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1),
            box-shadow 0.3s ease;
        z-index: 10;
    }

    /* 图片放大 */
    .photo-item:hover img {
        transform:  translateZ(0);
    }

    

    /* 修正桌面端点击时的冲突：保持上浮，但微微缩小 */
    .photo-item:active {
        transform: translateY(-8px) scale(0.98) translateZ(0);
    }
}

/* === 24. EXIF 数据块优化 === */
.exif-data span {
    background-color: rgba(0, 0, 0, 0.04) !important;
    /* 更淡的背景 */
    border: 1px solid rgba(0, 0, 0, 0.05);
    /* 微弱边框 */
    padding: 4px 10px !important;
    border-radius: 6px;
    color: var(--text-primary) !important;
    font-weight: 500;
    font-family: "SF Mono", "Menlo", monospace;
    /* 等宽字体，像代码一样整齐 */
    transition: all 0.2s ease;
}

/* 悬停时稍微变深 */
.exif-data span:hover {
    background-color: rgba(0, 0, 0, 0.08) !important;
    transform: translateY(-1px);
}

/* 深色模式适配 */
body.dark-mode .exif-data span {
    background-color: rgba(255, 255, 255, 0.08) !important;
    border-color: rgba(255, 255, 255, 0.1);
}

/* === 25. 环形进度回顶按钮 (Circular Progress) === */
.progress-wrap {
    position: fixed;
    right: 30px;
    bottom: 30px;
    height: 50px;
    width: 50px;
    cursor: pointer;
    display: block;
    border-radius: 50px;
    box-shadow: inset 0 0 0 2px rgba(0, 0, 0, 0.1);
    /* 轨道底色 */
    z-index: 900;
    opacity: 0;
    visibility: hidden;
    transform: translateY(15px);
    transition: all 0.2s linear;
    /* 线性过渡，跟手感更强 */
    color: var(--link-blue);
}

.progress-wrap.active-progress {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* SVG 圆环路径 */
.progress-wrap svg.progress-circle path {
    fill: none;
    stroke: var(--link-blue);
    /* 进度条颜色 */
    stroke-width: 4;
    box-sizing: border-box;
    transition: all 0.1s linear;
    /* 极快过渡，实时响应滚动 */
}

/* 中间的箭头容器 */
.progress-arrow {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-primary);
    transition: transform 0.2s;
}

/* 悬停效果 */
.progress-wrap:hover {
    transform: translateY(-5px);
    /* 依然保留上浮 */
}

.progress-wrap:hover .progress-arrow {
    transform: translateY(-3px);
    /* 箭头动一下 */
    color: var(--link-blue);
}

/* 深色模式适配 */
body.dark-mode .progress-wrap {
    box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.1);
}

/* ==================== 26. 点赞烟花特效 (CSS Particle Explosion) ==================== */

/* 定义烟花粒子的扩散路径 */
/* 原理：利用 box-shadow 在不同位置复制自身，模拟多个粒子 */
@keyframes confetti-explosion {
    0% {
        box-shadow:
            0 -10px 0 -2px #ff3b30,
            0 0 0 -2px #ff9500,
            0 0 0 -2px #ffcc00,
            0 0 0 -2px #4cd964,
            0 0 0 -2px #5ac8fa,
            0 0 0 -2px #007aff,
            0 0 0 -2px #5856d6,
            0 0 0 -2px #ff2d55;
    }

    40% {
        /* 扩散开来 */
        box-shadow:
            0 -25px 0 -1px #ff3b30,
            18px -18px 0 -1px #ff9500,
            25px 0 0 -1px #ffcc00,
            18px 18px 0 -1px #4cd964,
            0 25px 0 -1px #5ac8fa,
            -18px 18px 0 -1px #007aff,
            -25px 0 0 -1px #5856d6,
            -18px -18px 0 -1px #ff2d55;
    }

    100% {
        /* 粒子变小并消失 */
        box-shadow:
            0 -35px 0 -4px #ff3b30,
            25px -25px 0 -4px #ff9500,
            35px 0 0 -4px #ffcc00,
            25px 25px 0 -4px #4cd964,
            0 35px 0 -4px #5ac8fa,
            -25px 25px 0 -4px #007aff,
            -35px 0 0 -4px #5856d6,
            -25px -25px 0 -4px #ff2d55;
        opacity: 0;
    }
}

/* 烟花触发器 */
.like-button.exploding::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none;

    /* 执行动画 */
    animation: confetti-explosion 0.6s ease-out forwards;
}

/* ==================== 27. 自定义右键菜单 (Custom Context Menu) ==================== */
.custom-context-menu {
    position: fixed;
    z-index: 10000;
    /* 确保在最顶层，甚至盖过弹窗 */
    width: 160px;

    /* 磨砂玻璃质感 */
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);

    border: 1px solid rgba(255, 255, 255, 0.5);
    border-radius: 12px;
    padding: 6px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);

    /* 初始隐藏状态 */
    opacity: 0;
    visibility: hidden;
    transform: scale(0.95);
    transform-origin: top left;
    transition: opacity 0.1s ease, transform 0.1s ease, visibility 0.1s;

    /* 禁止选中菜单文字 */
    user-select: none;
}

/* 显示状态 */
.custom-context-menu.visible {
    opacity: 1;
    visibility: visible;
    transform: scale(1);
}

.ctx-item {
    padding: 8px 12px;
    font-size: 0.9rem;
    color: var(--text-primary);
    border-radius: 8px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 10px;
    transition: background 0.1s;
}

.ctx-item:hover {
    background: var(--link-blue);
    color: #fff;
}

.ctx-item svg {
    width: 16px;
    height: 16px;
    stroke-width: 2;
}

.ctx-separator {
    height: 1px;
    background: rgba(0, 0, 0, 0.1);
    margin: 4px 0;
}

/* 深色模式适配 */
body.dark-mode .custom-context-menu {
    background: rgba(28, 28, 30, 0.85);
    border-color: rgba(255, 255, 255, 0.1);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
}

body.dark-mode .ctx-separator {
    background: rgba(255, 255, 255, 0.15);
}

/* ==================== 28. 暗夜探照灯 (Dark Mode Spotlight) ==================== */

/* 仅在深色模式下生效 */
body.dark-mode::before {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    /* 鼠标穿透 */
    z-index: -1;
    /* 放在最底层，但在噪点图层之上 */

    /* 径向渐变：中心亮蓝，向外透明 */
    /* var(--x) 和 var(--y) 由 JS 实时更新 */
    background: radial-gradient(600px circle at var(--x, 50%) var(--y, 50%),
            rgba(29, 78, 216, 0.15),
            transparent 40%);

    /* 柔和的过渡，防止鼠标移出窗口时闪烁 */
    transition: opacity 0.5s ease;
}

/* === 31. 导航栏“游标跟随” (Lava Lamp) === */

/* 1. 隐藏原来的下划线动画 */
.nav-link::after {
    display: none !important;
}

/* 2. 导航容器需要相对定位 */
.header-nav {
    position: relative;
    /* 确保胶囊在文字下面 */
    z-index: 0;
}

/* 3. 链接文字层级提高 */
.nav-link {
    position: relative;
    z-index: 1;
    /* 浮在胶囊上面 */
    transition: color 0.3s;
}

.nav-link.active {
    color: var(--link-blue);
    /* 激活色保持蓝色 */
}

/* 4. 游标胶囊样式 */
.nav-pill {
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    /* 高度由 JS 动态控制，或者设为固定 */
    width: 0;
    /* 初始宽度 0 */
    border-radius: 8px;
    background-color: rgba(0, 122, 255, 0.1);
    /* 浅蓝色胶囊 */
    opacity: 0;
    pointer-events: none;
    z-index: 0;

    /* 弹性滑动动画 */
    transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
}

/* 深色模式 */
body.dark-mode .nav-pill {
    background-color: rgba(10, 132, 255, 0.15);
}

/* ==================== 33. 编辑模式：无抖动悬浮栏 (No-Shift Admin Actions) ==================== */

/* 1. 确保卡片是定位基准 */
.photo-item {
    position: relative !important;
}

/* 2. 重写操作栏样式：改为绝对定位悬浮 */
.admin-actions {
    /* 脱离文档流，浮在照片右上角 */
    position: absolute !important;
    top: 12px;
    right: 12px;

    /* 布局 */
    display: flex !important;
    gap: 8px;

    /* 视觉：磨砂玻璃胶囊 */
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    padding: 6px 10px;
    border-radius: 20px;
    /* 圆润胶囊 */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.5);

    /* 初始状态：隐身 (opacity 0) 而不是消失 (display none)，以支持动画 */
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px) scale(0.95);
    /* 初始稍微上浮并缩小 */
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);

    /* 移除之前的边框和间距 */
    margin-top: 0 !important;
    border-top: none !important;
    padding-top: 6px !important;

    z-index: 20;
    /* 保证浮在最上层 */
}

/* 3. 激活状态：优雅现身 */
body.edit-mode .admin-actions {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
    /* 弹入到位 */
}

/* 4. 按钮微调 */
.admin-actions .admin-icon-button {
    padding: 4px;
    border-radius: 50%;
    /* 圆形按钮 */
    background: transparent;
}

.admin-actions .admin-icon-button:hover {
    background: rgba(0, 0, 0, 0.05);
}

/* 5. 深色模式适配 */
body.dark-mode .admin-actions {
    background: rgba(28, 28, 30, 0.85);
    /* 深灰磨砂 */
    border-color: rgba(255, 255, 255, 0.1);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4);
}

body.dark-mode .admin-actions .admin-icon-button:hover {
    background: rgba(255, 255, 255, 0.15);
}