/*
 * Theme: theme-Serenity
 * Author: Serenity
 * Build: 2026-02-11 14:45:56
 * Fingerprint: 8d1f06811ef6b066
 * Copyright © 2026 Serenity. All rights reserved.
 * Unauthorized copying or distribution is prohibited.
 */
.photos-page{padding-top:calc(var(--header-height) + var(--space-8));padding-bottom:var(--space-10);min-height:100vh}.photos-header{text-align:center;margin-bottom:var(--space-8)}.photos-title{font-size:2rem;font-weight:800;font-style:italic;color:transparent;-webkit-text-stroke:1.5px var(--color-accent);margin-bottom:var(--space-2);position:relative;display:inline-block;transition:color var(--duration-normal),-webkit-text-fill-color var(--duration-normal);cursor:default}.photos-header:hover .photos-title{color:var(--color-accent);-webkit-text-fill-color:var(--color-accent)}.photos-title::before,.photos-title::after{content:'';position:absolute;bottom:-12px;height:3px;border-radius:var(--radius-full)}.photos-title::before{left:50%;transform:translateX(-50%);width:80px;background:linear-gradient(90deg,transparent,var(--color-accent) 20%,var(--color-accent-secondary) 50%,var(--color-accent) 80%,transparent)}.photos-subtitle{font-size:0.9rem;color:var(--color-text-muted);margin-top:var(--space-6)}.photos-empty{text-align:center;padding:var(--space-12) var(--space-4);color:var(--color-text-muted)}.photos-empty svg{width:64px;height:64px;margin-bottom:var(--space-4);opacity:0.5}.photos-filter{display:flex;justify-content:center;flex-wrap:wrap;gap:var(--space-2);margin-bottom:var(--space-6)}.filter-btn{padding:var(--space-2) var(--space-4);border:1px solid var(--color-border);border-radius:var(--radius-full);background:var(--color-bg);color:var(--color-text-secondary);font-size:0.875rem;cursor:pointer;transition:all 0.3s ease}.filter-btn:hover{border-color:var(--color-accent);color:var(--color-accent)}.filter-btn.active{background:var(--color-accent);border-color:var(--color-accent);color:#fff}.photos-masonry{column-count:4;column-gap:var(--space-4)}.photo-item{break-inside:avoid;margin-bottom:var(--space-4);transition:opacity 0.3s ease,transform 0.3s ease}.photo-item.hidden{display:none}.photo-wrapper{position:relative;border-radius:var(--radius-lg);overflow:hidden;background:var(--color-bg-secondary)}.photo-wrapper img{width:100%;height:auto;display:block;cursor:zoom-in;transition:transform 0.4s ease}.photo-wrapper:hover img{transform:scale(1.05)}.photo-overlay{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:flex-end;padding:var(--space-3);background:linear-gradient(to top,rgba(0,0,0,0.6) 0%,transparent 50%);opacity:0;transition:opacity 0.3s ease;pointer-events:none}.photo-time{position:absolute;top:8px;right:8px;font-size:0.75rem;color:#fff;background:rgba(0,0,0,0.5);padding:4px 8px;border-radius:var(--radius-sm);opacity:0;transition:opacity 0.3s ease}.photo-wrapper:hover .photo-time{opacity:1}.photo-wrapper:hover .photo-overlay{opacity:1}.photo-name{font-size:0.875rem;font-weight:500;color:#fff;margin-bottom:2px}.photo-group{font-size:0.75rem;color:rgba(255,255,255,0.8);background:rgba(255,255,255,0.2);padding:2px 8px;border-radius:var(--radius-full);width:fit-content}.photo-lightbox{position:fixed;inset:0;z-index:99999;background:rgba(0,0,0,0.92);display:flex;align-items:center;justify-content:center;opacity:0;visibility:hidden;transition:opacity 0.3s ease,visibility 0.3s ease;cursor:zoom-out}.photo-lightbox.active{opacity:1;visibility:visible}.photo-lightbox-img{max-width:90vw;max-height:90vh;object-fit:contain;border-radius:var(--radius-md);box-shadow:0 20px 60px rgba(0,0,0,0.5);transform:scale(0.9);transition:transform 0.3s ease}.photo-lightbox.active .photo-lightbox-img{transform:scale(1)}.photo-lightbox-close{position:absolute;top:20px;right:24px;font-size:36px;color:rgba(255,255,255,0.7);cursor:pointer;line-height:1;transition:color 0.2s ease;z-index:1}.photo-lightbox-close:hover{color:#fff}@media (max-width:1200px){.photos-masonry{column-count:3}}@media (max-width:768px){.photos-masonry{column-count:2;column-gap:var(--space-3)}.photo-item{margin-bottom:var(--space-3)}.photos-filter{gap:var(--space-2)}.filter-btn{padding:var(--space-1) var(--space-3);font-size:0.8rem}}@media (max-width:480px){.photos-masonry{column-count:2}}