:root{--bg-gradient-start: #e8e8e8;--bg-gradient-end: #d0d0d0;--card-bg: #ffffff;--section-bg: #f8f8f8;--item-bg: #ffffff;--text-primary: #2a2a2a;--text-secondary: #6b6b6b;--primary-color: #4a4a4a;--accent-gradient-start: #6a6a6a;--accent-gradient-end: #4a4a4a;--border-color: #d4d4d4;--shadow-color: rgba(0, 0, 0, .08);--shadow-hover: rgba(0, 0, 0, .12);--shadow-sm: 0 1px 3px rgba(0, 0, 0, .08);--shadow-md: 0 4px 8px rgba(0, 0, 0, .1);--shadow-lg: 0 8px 16px rgba(0, 0, 0, .12);--shadow-xl: 0 12px 24px rgba(0, 0, 0, .15);--input-bg: #ffffff;--input-border: #d4d4d4;--input-focus: #5a5a5a;--overlay-lightest: rgba(0, 0, 0, .05);--overlay-lighter: rgba(0, 0, 0, .08);--overlay-light: rgba(0, 0, 0, .1);--overlay-medium: rgba(0, 0, 0, .2);--overlay-strong: rgba(0, 0, 0, .3);--overlay-heavy: rgba(0, 0, 0, .5);--overlay-intense: rgba(0, 0, 0, .7);--overlay-opaque: rgba(0, 0, 0, .9);--highlight-subtle: rgba(255, 255, 255, .05);--highlight-soft: rgba(255, 255, 255, .1);--highlight-medium: rgba(255, 255, 255, .2);--highlight-strong: rgba(255, 255, 255, .3);--radius-xs: .125rem;--radius-sm: .25rem;--radius-md: .5rem;--radius-lg: .75rem;--radius-xl: 1rem;--radius-2xl: 1.5rem;--radius-full: 50%;--transition-fast: .15s cubic-bezier(.4, 0, .2, 1);--transition-base: .25s cubic-bezier(.4, 0, .2, 1);--transition-slow: .35s cubic-bezier(.4, 0, .2, 1);--spacing-xs: .25rem;--spacing-sm: .5rem;--spacing-md: 1rem;--spacing-lg: 1.5rem;--spacing-xl: 2rem;--danger-color: #e74c3c;--danger-hover: #c0392b;--success-color: #27ae60;--warning-color: #faa61a;--info-color: #3498db;--accent-blue: #0071eb;--accent-green: #43b581;--rarity-ur: #e91e8c;--rarity-ur-light: #ffb3d9;--rarity-ur-bg: linear-gradient(135deg, #fdeebb, #ffc8b2, #ffb7c5, #dcb5ff, #fdeebb);--rarity-ur-text: #4a0028;--rarity-ssr: #ffd54f;--rarity-ssr-text: #5d4037;--rarity-sr: #ba68c8;--rarity-sr-text: #ffffff;--rarity-r: #6495ed;--rarity-r-text: #ffffff;--rarity-n: #b0bec5;--rarity-n-text: #37474f;--primary-alpha-10: rgba(0, 113, 235, .1);--primary-alpha-15: rgba(0, 113, 235, .15);--primary-alpha-20: rgba(0, 113, 235, .2);--primary-alpha-30: rgba(0, 113, 235, .3);--island-stamina: #3498db;--island-points: #9b59b6;--island-success: #2ecc71;--surface-card: #ffffff;--surface-elevated: #f5f5f5;--surface-border: #e0e0e0;--text-on-surface: #4a4a4a}body.dark-mode{--bg-gradient-start: #1a1a1a;--bg-gradient-end: #0a0a0a;--card-bg: #2a2a2a;--section-bg: #1f1f1f;--item-bg: #2a2a2a;--text-primary: #e8e8e8;--text-secondary: #a8a8a8;--primary-color: #c0c0c0;--accent-gradient-start: #5a5a5a;--accent-gradient-end: #3a3a3a;--border-color: #3a3a3a;--shadow-color: rgba(0, 0, 0, .4);--shadow-hover: rgba(0, 0, 0, .6);--shadow-sm: 0 1px 3px rgba(0, 0, 0, .3);--shadow-md: 0 4px 8px rgba(0, 0, 0, .4);--shadow-lg: 0 8px 16px rgba(0, 0, 0, .5);--shadow-xl: 0 12px 24px rgba(0, 0, 0, .6);--input-bg: #1f1f1f;--input-border: #3a3a3a;--input-focus: #6a6a6a;--danger-color: #e74c3c;--danger-hover: #c0392b;--success-color: #27ae60;--warning-color: #faa61a;--info-color: #3498db;--accent-blue: #7289da;--accent-green: #43b581;--rarity-ur: #e91e8c;--rarity-ur-light: #ffb3d9;--rarity-ur-bg: linear-gradient(135deg, #fdeebb, #ffc8b2, #ffb7c5, #dcb5ff, #fdeebb);--rarity-ur-text: #4a0028;--rarity-ssr: #ffd54f;--rarity-ssr-text: #5d4037;--rarity-sr: #ba68c8;--rarity-sr-text: #ffffff;--rarity-r: #6495ed;--rarity-r-text: #ffffff;--rarity-n: #b0bec5;--rarity-n-text: #37474f;--primary-alpha-10: rgba(114, 137, 218, .1);--primary-alpha-15: rgba(114, 137, 218, .15);--primary-alpha-20: rgba(114, 137, 218, .2);--primary-alpha-30: rgba(114, 137, 218, .3);--island-stamina: #3498db;--island-points: #9b59b6;--island-success: #2ecc71;--surface-card: #2f3136;--surface-elevated: #3d4148;--surface-border: #4f545c;--text-on-surface: #b9bbbe}@keyframes shake{10%,90%{transform:translate3d(-1px,0,0)}20%,80%{transform:translate3d(2px,0,0)}30%,50%,70%{transform:translate3d(-4px,0,0)}40%,60%{transform:translate3d(4px,0,0)}}body{font-family:Arial,sans-serif;background-color:var(--section-bg);color:var(--text-primary);margin:0;padding:0;transition:background-color var(--transition-slow),color var(--transition-slow)}body.dark-mode{background-color:var(--bg-gradient-start);color:var(--text-primary)}header{background-color:var(--card-bg);padding:20px;text-align:center;border-bottom:2px solid var(--border-color);transition:background-color var(--transition-slow),border-color var(--transition-slow)}body.dark-mode header{border-bottom-color:var(--border-color)}h1{color:var(--text-secondary);margin:0;transition:color var(--transition-slow)}body.dark-mode h1{color:var(--text-primary)}#sort-button{margin-top:10px;padding:8px 16px;border:1px solid var(--border-color);border-radius:var(--radius-md);background-color:var(--section-bg);cursor:pointer;transition:background-color .2s,border-color var(--transition-slow),color var(--transition-slow)}#sort-button:hover{background-color:var(--border-color)}body.dark-mode #sort-button{background-color:var(--card-bg);border-color:var(--border-color);color:var(--text-primary)}body.dark-mode #sort-button:hover{background-color:var(--surface-elevated)}main{padding-top:var(--navbar-height, 80px)}.gallery-container{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:15px;padding:20px}.gallery-item{background-color:var(--card-bg);border:1px solid var(--border-color);box-shadow:var(--shadow-md);overflow:hidden;transition:transform .2s ease-in-out,background-color var(--transition-slow),border-color var(--transition-slow),box-shadow var(--transition-slow);border-radius:var(--radius-lg);display:flex;justify-content:center;align-items:center;min-height:200px;position:relative}body.dark-mode .gallery-item{border-color:var(--border-color);box-shadow:var(--shadow-md)}.gallery-item:hover{transform:scale(1.03);cursor:pointer}body.dark-mode .gallery-item:hover{box-shadow:var(--shadow-lg)}.gallery-item img{width:100%;height:100%;display:block;object-fit:cover;transition:opacity .5s ease-in-out;opacity:0}.gallery-item img.loaded{opacity:1}.loader{border:4px solid var(--section-bg);border-top:4px solid var(--info-color);border-radius:50%;width:30px;height:30px;animation:spin 1s linear infinite;position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:1}body.dark-mode .loader{border-color:var(--border-color);border-top-color:var(--info-color)}@keyframes spin{0%{transform:translate(-50%,-50%) rotate(0)}to{transform:translate(-50%,-50%) rotate(360deg)}}.gallery-item.loaded .loader{display:none}.lightbox{display:none;position:fixed;z-index:1000;padding-top:50px;left:0;top:0;width:100%;height:100%;overflow:auto;background-color:var(--overlay-opaque)}.lightbox-content{margin:auto;display:block;max-width:90%;max-height:90vh;object-fit:contain}.close-button{position:absolute;top:15px;right:35px;color:#f1f1f1;font-size:40px;font-weight:700;transition:var(--transition-slow);cursor:pointer}.close-button:hover,.close-button:focus{color:#bbb;text-decoration:none;cursor:pointer}.lightbox.active{animation:fadeIn .3s}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}