:root {
    /* 原有变量 */
    --col-count: 6;
    --img-ratio: 2 / 3;

    /* --- 修改点 1：定义新的控制变量 --- */
    --gap-x: 10px;
    /* 左右间隔 */
    --gap-y: 10px;
    /* 行间隔 */
    --padding-size: 20px;
    /* 四周内边距 */
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    background-color: #ffffff;
    font-family: system-ui, -apple-system, sans-serif;
    overflow-y: scroll;
    /* 总是显示滚动条，避免抖动 */
}

/* --- 顶部栏样式 --- */
#top-bar {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 60px;
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(8px);
    border-bottom: 1px solid #eee;
    display: flex;
    align-items: center;
    padding: 0 20px;
    z-index: 100;
    justify-content: space-between;
}

.control-group {
    display: flex;
    align-items: center;
    gap: 15px;
}

.btn-primary {
    background: #222;
    color: #fff;
    border: none;
    padding: 8px 16px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
    transition: background 0.2s;
}

.btn-primary:hover {
    background: #444;
}

.btn-primary:active {
    transform: scale(0.96);
}

.tip {
    font-size: 12px;
    color: #888;
}

#drop-area {
    flex: 1;
    margin-left: 20px;
    height: 40px;
    border: 2px dashed #ddd;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #aaa;
    font-size: 14px;
    transition: all 0.2s;
}

#drop-area.drag-active {
    border-color: #333;
    background: #f4f4f4;
    color: #333;
}

#file-input {
    display: none;
}


/* --- 核心网格布局 --- */
#gallery-container {
    margin-top: 60px;
    display: grid;
    grid-template-columns: repeat(var(--col-count), 1fr);
    padding-bottom: 50px;

    /* --- 修改点 2：应用变量 --- */
    column-gap: var(--gap-x);
    /* 替代原来的 gap */
    row-gap: var(--gap-y);
    /* 替代原来的 gap */
    padding: var(--padding-size);
    /* 设置四周 padding */

    /* --- 建议新增 --- */
    /* 防止加了 padding 后容器变宽导致横向滚动条 */
    box-sizing: border-box;
    width: 100%;
}

/* 图片项样式 */
.img-cell {
    width: 100%;
    /* 强制比例，实现整齐划一 */
    aspect-ratio: var(--img-ratio);

    /* 性能优化：内容可见性 */
    /* 当元素在视口外时，浏览器会跳过渲染计算，极大提升大量图片的滚动性能 */
    content-visibility: auto;
    contain-intrinsic-size: 300px;
    /* 给一个预估高度防止滚动条跳动 */

    background-color: #f0f0f0;
    /* 加载前的占位色 */
    overflow: hidden;
}

.img-cell img {
    width: 100%;
    height: 100%;
    display: block;

    /* 关键：裁剪图片以填满格子 */
    object-fit: cover;

    /* 淡入动画 */
    opacity: 0;
    transition: opacity 0.3s ease-in;
}

.img-cell img.loaded {
    opacity: 1;
}
/* =========================================
   风格化系统 (Style System)
   原理：通过改变父容器属性，利用 CSS 级联批量修改样式
   ========================================= */

/* --- 1. 拍立得风格 (Polaroid) --- */
[data-style="polaroid"] {
    /* 拍立得通常不需要太大的间距，稍微紧凑一点 */
    /* --gap-x: 15px !important;
    --gap-y: 15px !important; */
}

[data-style="polaroid"] .img-cell {
    background-color: #fff;
    /* 核心：底部留白大，四周留白小 */
    padding: 10px 10px 45px 10px;
    /* 经典的纸张投影 */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.15), 0 1px 3px rgba(0, 0, 0, 0.1);
    /* 稍微旋转一点点随机角度会让它更自然，但在大列表中会显得乱，这里保持整齐 */
    border-radius: 2px;
    transition: transform 0.2s;
}

/* --- 2. 悬浮投影风格 (Shadow Lift) --- */
[data-style="shadow"] .img-cell {
    /* 无边框，纯粹靠阴影 */
    border-radius: 8px;
    /* 弥散的软阴影 */
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.2), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    /* 保证圆角 */
    background: transparent;
}

/* --- 3. 胶卷底片风格 (Film Strip) --- */
[data-style="film"] {
    /* background-color: #222; */
    /* 整个背景变暗更好看 */
    /* --gap-y: 30px !important; */
    /* 纵向拉开距离 */
}

[data-style="film"] .img-cell {
    background-color: #000;
    padding: 20px 0;
    /* 上下留黑边用于打孔 */
    box-shadow: 0 0 0 1px #333;
    position: relative;
}

/* 使用伪元素模拟胶卷的齿孔，纯CSS绘制，不加载图片 */
[data-style="film"] .img-cell::before,
[data-style="film"] .img-cell::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    height: 12px;
    /* 利用径向渐变模拟圆孔 */
    background-image: radial-gradient(circle, #fff 40%, transparent 45%);
    background-size: 20px 20px;
    /* 孔的间距 */
    background-position: center;
    background-repeat: repeat-x;
}

[data-style="film"] .img-cell::before {
    top: 4px;
}

[data-style="film"] .img-cell::after {
    bottom: 4px;
}

/* --- 4. 极简白框 (Clean) --- */
[data-style="clean"] .img-cell {
    /* 模拟相框卡纸：内层图，外层白框，再外层细线 */
    border: 1px solid #ddd;
    padding: 8px;
    /* 白框宽度 */
    background-color: #fff;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.05);
    /* 内描边增加质感 */
}
/* --- 5. MacOS 窗口风格 --- */
[data-style="macos"] .img-cell {
    background-color: #fff;
    /* 顶部留出标题栏高度 */
    padding: 24px 0 0 0;
    border-radius: 6px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
    position: relative;
    overflow: hidden;
    /* 确保图片只有下半部分圆角 */
}

/* 模拟红黄绿三个点，纯 CSS 绘制 */
[data-style="macos"] .img-cell::before {
    content: "";
    position: absolute;
    top: 8px;
    left: 10px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    /* 利用 box-shadow 复制自身生成另外两个点，性能极高 */
    background: #ff5f56;
    /* 红点 */
    box-shadow: 14px 0 0 #ffbd2e, 28px 0 0 #27c93f;
    /* 黄点和绿点 */
}

/* 修正内部图片，让它填满下方区域 */
[data-style="macos"] .img-cell img {
    border-radius: 0 0 4px 4px;
    display: block;
}

/* --- 6. 幻灯片框风格 --- */
[data-style="slide"] {
    background-color: #333;
    /* 暗房背景 */
}

[data-style="slide"] .img-cell {
    background-color: #f0f0f0;
    /* 灰白色塑料框 */
    padding: 18px;
    /* 均匀的厚边框 */
    border-radius: 4px;
    box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
    position: relative;
}

/* 模拟幻灯片上的文字标记区域（可选） */
[data-style="slide"] .img-cell::after {
    content: "VIEW";
    /* 假装印了字 */
    position: absolute;
    bottom: 4px;
    right: 18px;
    font-size: 8px;
    color: #bbb;
    font-family: monospace;
    letter-spacing: 1px;
}

/* --- 7. 邮票齿孔风格 (紧凑修正版) --- */
[data-style="stamp"] {
    /* 核心修改：大幅减小间距 */
    /* 之前是 24px，现在改为 6px，让它们紧挨着 */
    --gap-x: 6px !important;
    --gap-y: 6px !important;
}

[data-style="stamp"] .img-cell {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 6px;
    filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.3));
    overflow: visible;
}

[data-style="stamp"] .img-cell::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: #fff;

    /* 蒙版保持不变（之前那版是对的） */
    mask-image:
        linear-gradient(#000, #000),
        radial-gradient(circle at top, transparent 3px, #000 3.5px),
        radial-gradient(circle at bottom, transparent 3px, #000 3.5px),
        radial-gradient(circle at left, transparent 3px, #000 3.5px),
        radial-gradient(circle at right, transparent 3px, #000 3.5px);

    mask-size:
        calc(100% - 6px) calc(100% - 6px),
        10px 10px,
        10px 10px,
        10px 10px,
        10px 10px;

    mask-position:
        center,
        center top,
        center bottom,
        left center,
        right center;

    mask-repeat:
        no-repeat, repeat-x, repeat-x, repeat-y, repeat-y;

    mask-composite: add;
    -webkit-mask-composite: source-over;
}

/* --- 8. 赛博霓虹风格 --- */
/* [data-style="neon"] {
    background-color: #050505;
} */

[data-style="neon"] .img-cell {
    /* 移除 padding，图片贴边 */
    padding: 2px;
    border: 1px solid #0ff;
    /* 青色边框 */
    /* 核心：多重发光阴影 */
    box-shadow: 0 0 5px #0ff, 0 0 10px #0ff, inset 0 0 5px #0ff;
    border-radius: 4px;
    transition: all 0.3s;
}

/* 悬停时变色（可选，虽然你说不需要交互，但这个截图时如果正好抓拍到不同颜色很酷） */
[data-style="neon"] .img-cell:nth-child(odd) {
    border-color: #f0f;
    /* 奇数个用洋红色 */
    box-shadow: 0 0 5px #f0f, 0 0 10px #f0f, inset 0 0 5px #f0f;
}

/* --- 9. 复古相角风格 (紧凑修正版) --- */
[data-style="corners"] {
    /* background-color: #f4ecd8; */
    /* 核心修改：大幅减小间距 */
    /* --gap-x: 8px !important;
    --gap-y: 8px !important; */
}

[data-style="corners"] .img-cell {
    background: #fff;
    padding: 4px;
    /* 白边保持 4px */
    position: relative;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
    overflow: visible;
}

[data-style="corners"] .img-cell::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    pointer-events: none;

    /* 保持 30px 的大角标 */
    background:
        linear-gradient(135deg, #d4af37 30px, transparent 30.5px) top left,
        linear-gradient(225deg, #d4af37 30px, transparent 30.5px) top right,
        linear-gradient(315deg, #d4af37 30px, transparent 30.5px) bottom right,
        linear-gradient(45deg, #d4af37 30px, transparent 30.5px) bottom left;

    background-repeat: no-repeat;
    background-size: 50% 50%;
    filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.3));
}

/* =========================================
   全局背景系统 (Background System)
   原理：利用 CSS Gradient 绘制纹理
   ========================================= */

/* 为了让背景纹理铺满全屏，我们需要确保 body 够高 */
body {
    min-height: 100vh;
    transition: background 0.3s;
}

/* --- 1. 暗房 (Dark) --- */
body[data-bg="dark"] {
    background-color: #1a1a1a;
    color: #ccc;
    /* 文字变亮 */
}

/* --- 2. 设计蓝图 (Grid) --- */
body[data-bg="grid"] {
    background-color: #f0f4f8;
    /* 利用两层线性渐变画方格 */
    background-image:
        linear-gradient(#dbe3eb 1px, transparent 1px),
        linear-gradient(90deg, #dbe3eb 1px, transparent 1px);
    background-size: 20px 20px;
    background-position: center top;
}

/* --- 3. 点阵纸 (Dots) --- */
body[data-bg="dots"] {
    background-color: #fbfbfb;
    /* 径向渐变画圆点 */
    background-image: radial-gradient(#d1d5db 1px, transparent 1px);
    background-size: 15px 15px;
}

/* --- 4. 木纹桌面 (Wood) - 简化版模拟 --- */
body[data-bg="wood"] {
    background-color: #d4b483;
    /* 利用重复的条纹模拟木纹质感 */
    background-image: repeating-linear-gradient(45deg, rgba(0, 0, 0, 0.03) 0px, rgba(0, 0, 0, 0.03) 2px, transparent 2px, transparent 4px);
}

/* --- 5. 软木板 (Cork) - 噪点模拟 --- */
body[data-bg="cork"] {
    background-color: #e3c08d;
    /* 利用噪点滤镜太复杂，这里用简单的颗粒感模拟 */
    background-image: radial-gradient(rgba(139, 69, 19, 0.2) 1px, transparent 1px),
        radial-gradient(rgba(139, 69, 19, 0.15) 1px, transparent 1px);
    background-size: 4px 4px, 8px 8px;
    background-position: 0 0, 4px 4px;
}


/* =========================================
   全局滤镜系统 (Filter System)
   原理：利用 CSS filter 属性作用于图片
   ========================================= */

/* 默认状态 */
#gallery-container img {
    transition: filter 0.3s;
}

/* --- 1. 黑白 (B&W) --- */
/* 适合检查构图，排除颜色干扰 */
#gallery-container[data-filter="bw"] img {
    filter: grayscale(100%);
}

/* --- 2. 褪色 (Fade) --- */
/* 降低饱和度，增加一点亮度，模拟日系胶片 */
#gallery-container[data-filter="fade"] img {
    filter: sepia(20%) saturate(70%) brightness(105%);
}

/* --- 3. 鲜艳 (Vivid) --- */
/* 增加对比度和饱和度 */
#gallery-container[data-filter="contrast"] img {
    filter: contrast(110%) saturate(120%);
}

/* --- 4. 暖色 (Warm) --- */
/* 加一点褐色滤镜 */
#gallery-container[data-filter="warm"] img {
    filter: sepia(30%);
}

/* --- 5. 冷色 (Cool) --- */
/* 利用 hue-rotate 稍微偏冷，配合降低饱和度 */
#gallery-container[data-filter="cool"] img {
    filter: hue-rotate(180deg) opacity(0.9) grayscale(20%);
    /* hue-rotate 180 反转色相太剧烈了，通常很难看。
       纯 CSS 做冷色调比较难，更好的做法是叠加一个蓝色半透明层，但会增加 DOM。
       这里我们改用简单的调整：
    */
    filter: saturate(80%) hue-rotate(10deg) brightness(95%);
}