:root {
    --bg-color: #0f0f0f;
    --card-bg: #1a1a1a;
    --text-main: #f0f0f0;
    --text-muted: #888;
    --accent: #d4af37;
    /* Gold accent */
    --transition-speed: 0.3s;
}

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

body {
    background-color: var(--bg-color);
    color: var(--text-main);
    font-family: 'Lato', sans-serif;
    overflow-x: hidden;
}

/* Header */
.site-header {
    text-align: center;
    padding: 3rem 1rem;
    background: linear-gradient(to bottom, #000000, var(--bg-color));
}

.site-header h1 {
    font-family: 'Playfair Display', serif;
    font-size: 3rem;
    font-weight: 400;
    letter-spacing: 2px;
    margin-bottom: 0.5rem;
    color: var(--accent);
}

.site-header p {
    font-size: 1rem;
    color: var(--text-muted);
    letter-spacing: 3px;
    text-transform: uppercase;
}

/* Gallery Grid */
.gallery-container {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 2rem;
    padding: 2rem 4rem;
    max-width: 1600px;
    margin: 0 auto;
}

.photo-card {
    background-color: var(--card-bg);
    border-radius: 8px;
    overflow: hidden;
    cursor: pointer;
    transition: transform var(--transition-speed) ease, box-shadow var(--transition-speed) ease;
    position: relative;
    aspect-ratio: 2/3;
}

.photo-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.5);
}

.photo-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: opacity 0.5s ease;
}

.photo-card::after {
    content: '点击对比原片';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 1rem;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.8), transparent);
    text-align: center;
    opacity: 0;
    transition: opacity var(--transition-speed);
    font-family: 'Playfair Display', serif;
    font-style: italic;
}

.photo-card:hover::after {
    opacity: 1;
}

.photo-filename {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 0.5rem;
    font-size: 0.8rem;
    color: var(--text-muted);
    background: rgba(0, 0, 0, 0.7);
    text-align: center;
    z-index: 2;
    font-family: monospace;
    pointer-events: none;
    transition: opacity var(--transition-speed);
}

.photo-card:hover .photo-filename {
    opacity: 0;
    /* Hide filename on hover to show "Compare" text if they overlap, or keep both? 
                   The "Compare" text uses ::after on .photo-card. 
                   Let's keep filename visible but maybe move it or just let the ::after cover it if it has higher z-index?
                   The ::after doesn't have z-index set explicitly, so it might be below or above depending on stacking context.
                   Actually, let's make the filename distinct. 
                   User asked to "display filename". 
                   Let's place it at the top maybe? Or bottom is standard.
                   If I put it at the bottom, it might conflict with the "Click to compare" hover effect which is also at the bottom.
                   Let's try putting it at the top for now to avoid conflict, or bottom with lower z-index?
                   The prompt said "reasonable place".
                   Actually, let's look at the "Click to compare" style.
                   .photo-card::after is absolute bottom 0.
                   If I add .photo-filename at bottom 0, they will overlap.
                   Maybe I should hide filename on hover so the "Click to compare" is clear?
                   Or I can put the filename at the top.
                   Let's put it at the bottom, and when hovered, we can hide it or let the hover effect take over.
                   I'll hide it on hover for a cleaner effect.
                */
    opacity: 0;
}

/* Lightbox */
.lightbox {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.95);
    z-index: 1000;
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

.lightbox.active {
    opacity: 1;
    pointer-events: all;
}

.lightbox-content {
    width: 100%;
    height: 100%;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: grab;
}

.lightbox-content:active {
    cursor: grabbing;
}

.image-wrapper {
    transform-origin: center;
    transition: transform 0.1s ease-out;
    will-change: transform;
    /* Ensure wrapper has size */
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Comparison Container */
.comparison-container {
    position: relative;
    max-width: 90vw;
    max-height: 90vh;
    box-shadow: 0 0 50px rgba(0, 0, 0, 0.8);
    user-select: none;
    /* Default Slider Mode */
}

.comparison-container img {
    display: block;
    max-width: 90vw;
    max-height: 90vh;
    pointer-events: none;
    user-select: none;
}

#img-original {
    /* Bottom layer */
}

#img-new {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* Initial clip */
    clip-path: inset(0 50% 0 0);
}

/* Slider Handle */
.slider-handle {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    /* Initial position */
    width: 2px;
    background: white;
    cursor: ew-resize;
    z-index: 10;
    pointer-events: none;
    /* Let clicks pass through for panning, handled by JS */
    filter: drop-shadow(0 0 5px rgba(0, 0, 0, 0.5));
}

.handle-circle {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 40px;
    height: 40px;
    background: rgba(255, 255, 255, 0.2);
    border: 2px solid white;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
    font-size: 12px;
    backdrop-filter: blur(5px);
    pointer-events: auto;
    /* Make handle clickable */
}


/* Side-by-Side Mode */
.comparison-container.side-by-side {
    display: flex;
    gap: 10px;
    width: auto;
    height: auto;
}

.comparison-container.side-by-side img {
    position: relative;
    width: auto;
    max-width: 45vw;
    /* Half screen minus gap */
    height: auto;
    max-height: 90vh;
    object-fit: contain;
}

.comparison-container.side-by-side #img-new {
    position: relative;
    clip-path: none !important;
    /* Reset clip */
    top: auto;
    left: auto;
}

.comparison-container.side-by-side .slider-handle {
    display: none;
}

/* Triple Mode */
.comparison-container.triple {
    display: flex;
    gap: 10px;
    width: auto;
    height: auto;
}

.comparison-container.triple img {
    position: relative;
    width: auto;
    max-width: 30vw;
    /* Third screen minus gap */
    height: auto;
    max-height: 90vh;
    object-fit: contain;
}

.comparison-container.triple #img-new {
    position: relative;
    clip-path: none !important;
    top: auto;
    left: auto;
}

#img-new-tags.hidden {
    display: none;
}

.comparison-container.triple #img-new-tags {
    display: block;
    position: relative;
    max-width: 30vw;
    max-height: 90vh;
}

.comparison-container.triple .slider-handle {
    display: none;
}


/* Controls */
.lightbox-controls {
    position: absolute;
    top: 20px;
    right: 30px;
    z-index: 1010;
}

.icon-btn {
    background: none;
    border: none;
    color: #fff;
    font-size: 3rem;
    cursor: pointer;
    opacity: 0.7;
    transition: opacity 0.2s;
}

.icon-btn:hover {
    opacity: 1;
}

.nav-controls {
    position: absolute;
    top: 50%;
    width: 100%;
    display: flex;
    justify-content: space-between;
    padding: 0 2rem;
    pointer-events: none;
    z-index: 1005;
}

.nav-btn {
    pointer-events: auto;
    background: rgba(255, 255, 255, 0.1);
    border: none;
    color: white;
    font-size: 2rem;
    padding: 1rem;
    border-radius: 50%;
    cursor: pointer;
    backdrop-filter: blur(5px);
    transition: background 0.3s;
}

.nav-btn:hover {
    background: rgba(255, 255, 255, 0.2);
}

.zoom-controls {
    position: absolute;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 1rem;
    background: rgba(0, 0, 0, 0.6);
    padding: 0.5rem 1.5rem;
    border-radius: 30px;
    backdrop-filter: blur(10px);
    z-index: 1010;
    align-items: center;
}

.control-btn {
    background: none;
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: white;
    padding: 0.3rem 0.8rem;
    border-radius: 4px;
    cursor: pointer;
    font-family: 'Lato', sans-serif;
    font-size: 0.9rem;
    transition: all 0.2s;
}

.control-btn:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: #fff;
}

.control-btn.active {
    background: var(--accent);
    border-color: var(--accent);
    color: #000;
    font-weight: bold;
}

.mode-toggle {
    display: flex;
    gap: 5px;
}

.divider {
    width: 1px;
    height: 20px;
    background: rgba(255, 255, 255, 0.3);
}

#zoom-level {
    min-width: 50px;
    text-align: center;
    font-variant-numeric: tabular-nums;
}

/* Responsive */
@media (max-width: 768px) {
    .site-header h1 {
        font-size: 2rem;
    }

    .gallery-container {
        padding: 1rem;
        gap: 1rem;
    }

    .nav-btn {
        padding: 0.5rem;
        font-size: 1.5rem;
    }

    .zoom-controls {
        flex-wrap: wrap;
        justify-content: center;
        width: 90%;
    }
}

/* Settings Button */
.settings-btn {
    position: absolute;
    top: 2rem;
    right: 2rem;
    background: none;
    border: none;
    font-size: 1.5rem;
    cursor: pointer;
    opacity: 0.7;
    transition: opacity 0.3s;
    z-index: 100;
}

.settings-btn:hover {
    opacity: 1;
    transform: rotate(90deg);
    transition: all 0.5s ease;
}

/* Utility */
.hidden {
    display: none !important;
}

/* Settings Modal */
.modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.8);
    z-index: 2000;
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

.modal.active {
    opacity: 1;
    pointer-events: all;
}

.modal-content {
    background-color: var(--card-bg);
    padding: 2rem;
    border-radius: 12px;
    width: 90%;
    max-width: 500px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
    transform: translateY(20px);
    transition: transform 0.3s ease;
}

.modal.active .modal-content {
    transform: translateY(0);
}

.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    padding-bottom: 1rem;
}

.modal-header h2 {
    font-family: 'Playfair Display', serif;
    color: var(--accent);
    margin: 0;
}

.close-modal {
    background: none;
    border: none;
    color: var(--text-muted);
    font-size: 2rem;
    cursor: pointer;
    line-height: 1;
}

.close-modal:hover {
    color: white;
}

.setting-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
}

.setting-item label {
    color: var(--text-main);
    font-size: 1rem;
}

/* Toggle Switch */
.switch {
    position: relative;
    display: inline-block;
    width: 50px;
    height: 26px;
}

.switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    transition: .4s;
}

.slider:before {
    position: absolute;
    content: "";
    height: 18px;
    width: 18px;
    left: 4px;
    bottom: 4px;
    background-color: white;
    transition: .4s;
}

input:checked+.slider {
    background-color: var(--accent);
}

input:focus+.slider {
    box-shadow: 0 0 1px var(--accent);
}

input:checked+.slider:before {
    transform: translateX(24px);
}

/* Rounded sliders */
.slider.round {
    border-radius: 34px;
}

.slider.round:before {
    border-radius: 50%;
}