: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)}}:root{--primary-color: #0071eb;--primary-hover: #0056b3;--primary-light: #4da3ff;--accent-color: #27ae60;--accent-hover: #229954;--warning-color: #f39c12;--bg-primary: #f5f5f5;--bg-secondary: #ffffff;--bg-tertiary: #fafafa;--bg-elevated: #ffffff;--bg-input: #ffffff;--text-primary: #1a1a1a;--text-secondary: #4a4a4a;--text-muted: #666666;--text-dim: #999999;--text-link: #0071eb;--border-color: #e0e0e0;--border-light: #d0d0d0;--shadow-sm: 0 .125rem .25rem rgba(0, 0, 0, .05);--shadow-md: 0 .25rem .5rem rgba(0, 0, 0, .08);--shadow-lg: 0 .5rem 1rem rgba(0, 0, 0, .12);--shadow-xl: 0 1rem 2rem rgba(0, 0, 0, .15);--spacing-xs: .5rem;--spacing-sm: .75rem}body.dark-mode{--primary-color: #7289da;--primary-hover: #5b6eae;--primary-light: #8ea1e1;--accent-color: #43b581;--accent-hover: #3ca374;--danger-color: #f04747;--danger-hover: #d84040;--bg-primary: #36393f;--bg-secondary: #2f3136;--bg-tertiary: #202225;--bg-elevated: #3d4148;--bg-input: #40444b;--text-primary: #ffffff;--text-secondary: #dcddde;--text-muted: #b9bbbe;--text-dim: #72767d;--text-link: #7289da;--border-color: #4f545c;--border-light: #5c6067;--shadow-sm: 0 .125rem .25rem rgba(0, 0, 0, .2);--shadow-md: 0 .25rem .5rem rgba(0, 0, 0, .3);--shadow-lg: 0 .5rem 1rem rgba(0, 0, 0, .4);--shadow-xl: 0 1rem 2rem rgba(0, 0, 0, .5);--spacing-xs: .5rem;--spacing-sm: .75rem}html{scroll-behavior:smooth}body{background-color:var(--bg-primary);font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif;color:var(--text-secondary);margin:0;line-height:1.6}body.no-scroll{overflow:hidden}.main-container{max-width:75rem;margin:auto;padding:var(--spacing-lg)}h1{color:var(--text-primary);font-size:2rem;font-weight:700;letter-spacing:-.025em;margin:0 0 var(--spacing-lg) 0;line-height:1.2}h2{color:var(--text-primary);font-size:1.5rem;font-weight:600;letter-spacing:-.0125em;margin:0 0 var(--spacing-md) 0;line-height:1.3}h3{color:var(--text-primary);font-size:1.125rem;font-weight:600;margin:0 0 var(--spacing-sm) 0}label{font-weight:700;color:var(--text-primary)}.card{background:linear-gradient(135deg,var(--bg-elevated) 0%,var(--bg-tertiary) 100%);border:1px solid var(--border-color);border-radius:var(--radius-lg);box-shadow:var(--shadow-md);padding:var(--spacing-lg);transition:transform var(--transition-base),box-shadow var(--transition-base)}.card:hover{transform:translateY(-2px);box-shadow:var(--shadow-lg)}.filter-container{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--spacing-lg);padding:var(--spacing-lg);background-color:var(--bg-elevated);border-radius:var(--radius-md);margin:var(--spacing-lg) 0;border:1px solid var(--border-color)}.filter-group{display:flex;flex-direction:column;gap:var(--spacing-sm)}.filter-group label{font-weight:700;color:var(--text-primary);font-size:.9375rem}.filter-group select{font-size:1rem;padding:var(--spacing-xs) var(--spacing-sm);border-radius:var(--radius-sm);border:2px solid var(--border-color);background-color:var(--bg-input);color:var(--text-secondary);transition:border-color var(--transition-fast)}.filter-group select:focus{outline:none;border-color:var(--primary-color);box-shadow:0 0 0 3px #0071eb1a}.filter-toggle-btn{display:none;background-color:var(--primary-color);color:var(--text-primary);border:none;border-radius:var(--radius-sm);padding:.75rem 1.25rem;font-size:1rem;cursor:pointer;transition:background-color var(--transition-fast);margin:var(--spacing-lg) auto;width:100%;max-width:25rem}.filter-toggle-btn:hover{background-color:var(--primary-hover)}.filter-toggle-btn i{margin-left:var(--spacing-xs);transition:transform var(--transition-base)}.filter-toggle-btn.active i{transform:rotate(180deg)}.checkbox-group{display:flex;gap:var(--spacing-md);padding:var(--spacing-xs) var(--spacing-sm);justify-content:center;background-color:var(--bg-tertiary);border-radius:var(--radius-sm);border:1px solid var(--border-color)}.checkbox-group label{display:flex;align-items:center;gap:var(--spacing-xs);font-weight:400;cursor:pointer;color:var(--text-secondary)}.clear-btn,.reset-button{background:linear-gradient(135deg,var(--bg-elevated),var(--bg-tertiary));color:var(--text-secondary);border:1px solid var(--border-color);border-radius:var(--radius-md);padding:.75rem 1.25rem;font-size:.9375rem;font-weight:600;cursor:pointer;transition:all var(--transition-fast);box-shadow:var(--shadow-sm);display:flex;align-items:center;gap:var(--spacing-xs)}.clear-btn:hover,.reset-button:hover{background:linear-gradient(135deg,var(--bg-tertiary),var(--bg-elevated));border-color:var(--primary-color);color:var(--primary-color);transform:translateY(-2px);box-shadow:var(--shadow-md)}.clear-btn:active,.reset-button:active{transform:translateY(0)}.clear-btn i{transition:transform var(--transition-base)}.clear-btn:hover i{transform:rotate(180deg)}.loading-skeleton{animation:fade-in var(--transition-base)}@keyframes fade-in{0%{opacity:0}to{opacity:1}}.skeleton-card{background:var(--bg-elevated);border-radius:var(--radius-lg);padding:var(--spacing-lg);margin-bottom:var(--spacing-lg);border:1px solid var(--border-color)}.skeleton-line,.skeleton-element{background:linear-gradient(90deg,var(--bg-primary) 25%,var(--border-color) 50%,var(--bg-primary) 75%);background-size:200% 100%;border-radius:var(--radius-sm);animation:skeleton-loading 1.5s infinite}@keyframes skeleton-loading{0%{background-position:200% 0}to{background-position:-200% 0}}.skeleton-line{height:1rem;margin-bottom:var(--spacing-sm)}.skeleton-title{width:60%;height:1.5rem;margin-bottom:var(--spacing-md)}.skeleton-text{width:100%}.skeleton-text:last-child{width:80%}.skeleton-gallery{aspect-ratio:22 / 14}.skeleton-image{width:100%;height:100%;background:linear-gradient(90deg,var(--bg-primary) 25%,var(--border-color) 50%,var(--bg-primary) 75%);background-size:200% 100%;border-radius:var(--radius-md);animation:skeleton-loading 1.5s infinite}.gem-icon{width:1.5rem;height:1.5rem;vertical-align:middle;filter:drop-shadow(0 2px 4px var(--overlay-light))}@media (max-width: 768px){.main-container{padding:var(--spacing-md)}h1{font-size:1.5rem}h2{font-size:1.25rem}.filter-toggle-btn{display:block}.filter-container{display:none;flex-direction:column;gap:var(--spacing-md);padding:var(--spacing-md)}.filter-container.visible{display:flex}.filter-group,.filter-group select{width:100%}.checkbox-group{flex-wrap:wrap;gap:var(--spacing-sm)}}@media (max-width: 480px){:root{--spacing-lg: 1rem;--spacing-xl: 1.5rem}h1{font-size:1.125rem}h2{font-size:1rem}.card{padding:var(--spacing-md)}.gem-icon{width:1.25rem;height:1.25rem}}body.dark-mode .card{background:linear-gradient(135deg,var(--bg-secondary) 0%,var(--bg-elevated) 100%)}body.dark-mode .filter-container{background-color:var(--bg-secondary);border:none}body.dark-mode .checkbox-group{background-color:var(--bg-input);border:none}body.dark-mode .filter-group select{background-color:var(--bg-input);border:2px solid var(--bg-secondary)}body.dark-mode .filter-group select:focus{box-shadow:none}body.dark-mode .clear-btn,body.dark-mode .reset-button{background:linear-gradient(135deg,var(--bg-elevated),var(--bg-secondary))}body.dark-mode .clear-btn:hover,body.dark-mode .reset-button:hover{background:linear-gradient(135deg,var(--bg-secondary),var(--bg-elevated))}body.dark-mode .skeleton-card{background:var(--bg-secondary)}body.dark-mode .skeleton-line,body.dark-mode .skeleton-element{background:linear-gradient(90deg,var(--bg-tertiary) 25%,var(--bg-elevated) 50%,var(--bg-tertiary) 75%);background-size:200% 100%}body.dark-mode .gem-icon{filter:drop-shadow(0 2px 4px var(--overlay-strong))}@media print{.filter-toggle-btn{display:none!important}}