:root{--primary-color: #6b7280;--primary-dark: #4b5563;--secondary-color: #9ca3af;--secondary-dark: #6b7280;--danger-color: #f87171;--warning-color: #fbbf24;--gray-50: #1f2937;--gray-100: #374151;--gray-200: #4b5563;--gray-300: #6b7280;--gray-400: #9ca3af;--gray-500: #d1d5db;--gray-600: #e5e7eb;--gray-700: #f3f4f6;--gray-800: #f9fafb;--gray-900: #ffffff;--surface-primary: #1a1a1a;--surface-secondary: #2d2d2d;--surface-tertiary: #404040;--surface-hover: #4a4a4a;--background-primary: #2d3748;--background-secondary: var(--gray-100);--background-tertiary: var(--gray-200);--text-primary: #ffffff;--text-secondary: #e0e0e0;--text-muted: #b0b0b0;--border-color: #404040;--accent-color: #3b82f6;--accent-hover: #2563eb;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;line-height:1.6;font-weight:400;color:#fff;background-color:#2d3748;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}a{font-weight:500;color:#e5e7eb;text-decoration:inherit}a:hover{color:#fff}body{margin:0;display:flex;place-items:center;min-width:320px;min-height:100vh}h1{font-size:3.2em;line-height:1.1}button{border-radius:8px;border:1px solid transparent;padding:.6em 1.2em;font-size:1em;font-weight:500;font-family:inherit;background-color:#4b5563;color:#fff;cursor:pointer;transition:border-color .25s}button:hover{border-color:#9ca3af;background-color:#6b7280}button:focus,button:focus-visible{outline:4px auto #9ca3af}.wiki-header{background:linear-gradient(135deg,#1f2937,#374151);color:#fff;box-shadow:0 2px 10px #0000004d;position:relative;top:0;z-index:100}.header-container{max-width:1400px;margin:0 auto;padding:1rem 2rem;display:flex;align-items:center;gap:2rem}.header-brand{display:flex;align-items:center;gap:1rem;flex-shrink:0}.brand-icon{color:#e5e7eb;filter:drop-shadow(0 2px 4px rgba(0,0,0,.3))}.brand-text h1{margin:0;font-size:1.5rem;font-weight:700;text-shadow:0 2px 4px rgba(0,0,0,.3)}.brand-text span{font-size:.875rem;opacity:.9;display:block;margin-top:-2px}.header-search{flex:1;max-width:500px;background:transparent!important;border:none;padding:0}.search-container{position:relative;display:flex;align-items:center;background:transparent!important;border:none;padding:0}.search-icon{position:absolute;left:1rem;color:#9ca3af;z-index:1}.search-input{width:100%;padding:.75rem 1rem .75rem 3rem;border:none!important;outline:none!important;border-radius:50px;background:#4b5563!important;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);font-size:1rem;color:#fff!important;transition:all .2s ease;box-shadow:0 2px 8px #0000004d}.search-input:focus{outline:none!important;border:none!important;background:#374151!important;box-shadow:0 4px 16px #0006;transform:translateY(-1px)}.search-input::placeholder{color:#9ca3af}.header-search *,.search-container *,.search-input *{background:transparent!important;border:none!important;outline:none!important}.wiki-header input[type=text]{background:#4b5563!important;color:#fff!important;border:none!important;outline:none!important;box-shadow:0 2px 8px #0000004d!important}.edit-toggle{display:flex;align-items:center;gap:.5rem;padding:.75rem 1.5rem;background:#ffffff1a;border:2px solid rgba(255,255,255,.2);color:#fff;border-radius:25px;font-size:.875rem;font-weight:500;cursor:pointer;transition:all .2s ease;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.edit-toggle:hover{background:#fff3;border-color:#ffffff4d;transform:translateY(-1px)}.edit-toggle.active{background:#6b7280;border-color:#4b5563;box-shadow:0 2px 8px #6b72804d}.edit-toggle.active:hover{background:#4b5563}.logout-button{display:flex;align-items:center;gap:.5rem;padding:.75rem 1.5rem;background:#ef44441a;color:#ef4444;border:1px solid rgba(239,68,68,.2);border-radius:12px;font-weight:500;cursor:pointer;transition:all .2s ease;font-size:.9rem}.logout-button:hover{background:#ef444433;color:#dc2626;transform:translateY(-1px);box-shadow:0 4px 12px #ef44444d}@media (max-width: 768px){.header-container{padding:1rem;flex-direction:column;gap:1rem}.brand-text h1{font-size:1.25rem}.header-search{width:100%;max-width:none}.edit-toggle{width:100%;justify-content:center}}.wiki-sidebar{width:300px;min-width:300px;flex-shrink:0;height:100vh;background:linear-gradient(180deg,#374151,#4b5563);border-right:1px solid #6b7280;display:flex;flex-direction:column;position:sticky;top:0;overflow-y:auto}.sidebar-header{padding:2rem 1.5rem 1rem;border-bottom:1px solid #6b7280}.sidebar-header h2{margin:0;color:#fff;font-size:1.25rem;font-weight:600}.sidebar-nav{flex:1;padding:1rem;display:flex;flex-direction:column;gap:.5rem}.category-item{display:flex;align-items:center;gap:1rem;padding:1rem;background:#1f2937;border:1px solid #6b7280;border-radius:12px;text-align:left;cursor:pointer;transition:all .2s ease;text-decoration:none;color:#fff;min-height:70px}.category-item:hover{border-color:#9ca3af;box-shadow:0 4px 12px #0000004d;transform:translateY(-1px);background:#374151}.category-item.active{background:#6b7280;color:#fff;border-color:#9ca3af;box-shadow:0 4px 16px #6b72804d}.category-icon{font-size:1.5rem;flex-shrink:0;width:40px;height:40px;display:flex;align-items:center;justify-content:center;color:#e5e7eb}.category-content{flex:1;display:flex;flex-direction:column;gap:.25rem}.category-name{font-weight:600;font-size:1rem;color:#fff!important}.category-description{font-size:.75rem;opacity:.8;line-height:1.3;color:#d1d5db!important}.sidebar-description-view{display:flex;align-items:center;gap:.5rem;width:100%}.sidebar-description-edit{display:flex;flex-direction:column;gap:.5rem;width:100%}.sidebar-description-input{width:100%;padding:.4rem;background:#374151;color:#fff;border:1px solid #6b7280;border-radius:4px;font-size:.75rem;font-family:inherit}.sidebar-description-input:focus{outline:none;border-color:#3b82f6;box-shadow:0 0 0 2px #3b82f633}.sidebar-description-actions{display:flex;gap:.25rem}.sidebar-edit-btn,.sidebar-save-btn,.sidebar-cancel-btn{display:flex;align-items:center;justify-content:center;padding:.25rem;border:none;border-radius:4px;cursor:pointer;transition:all .2s ease;background:transparent;flex-shrink:0}.sidebar-edit-btn{color:#9ca3af;border:1px solid #6b7280}.sidebar-edit-btn:hover{background:#6b7280;color:#fff;border-color:#9ca3af}.sidebar-save-btn{background:#10b981;color:#fff}.sidebar-save-btn:hover{background:#059669}.sidebar-cancel-btn{background:#ef4444;color:#fff}.sidebar-cancel-btn:hover{background:#dc2626}.category-count{background:#fff3;color:inherit;padding:.25rem .5rem;border-radius:12px;font-size:.75rem;font-weight:600;min-width:24px;text-align:center}.category-item:not(.active) .category-count{background:#6b7280;color:#fff}.sidebar-footer{padding:1rem;border-top:1px solid #6b7280;display:flex;flex-direction:column;gap:1rem}.sidebar-footer p{margin:0;color:#d1d5db;font-size:.875rem;text-align:center}.wiki-sidebar::-webkit-scrollbar{width:6px}.wiki-sidebar::-webkit-scrollbar-track{background:#374151}.wiki-sidebar::-webkit-scrollbar-thumb{background:#6b7280;border-radius:3px}.wiki-sidebar::-webkit-scrollbar-thumb:hover{background:#9ca3af}.category-item .category-name,.category-item .category-content .category-name,.sidebar-nav .category-item .category-name{color:#fff!important}.category-item .category-description,.category-item .category-content .category-description,.sidebar-nav .category-item .category-description{color:#d1d5db!important}@media (max-width: 1024px){.wiki-sidebar{width:250px}}@media (max-width: 768px){.wiki-sidebar{width:100%;height:auto;position:static}.sidebar-nav{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1rem}}:root{--surface-primary: #1a1a1a;--surface-secondary: #2d2d2d;--surface-hover: #404040;--text-primary: #ffffff;--text-secondary: #e0e0e0;--text-muted: #b0b0b0;--border-color: #404040;--accent-color: #3b82f6;--accent-hover: #2563eb}.image-picker-overlay{position:fixed;inset:0;width:100vw;height:100vh;background:#000c;display:flex;align-items:center;justify-content:center;z-index:9999;padding:2rem;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}.image-picker-modal{background:var(--surface-primary, #1a1a1a);border-radius:16px;width:100%;max-width:900px;max-height:80vh;display:flex;flex-direction:column;border:1px solid var(--border-color, #e5e7eb);box-shadow:0 25px 50px #0000004d;opacity:1;transform:scale(1);animation:modalAppear .2s ease-out;position:relative;overflow:hidden}@keyframes modalAppear{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}.image-picker-header{display:flex;justify-content:space-between;align-items:center;padding:1.5rem 2rem;border-bottom:1px solid var(--border-color)}.image-picker-header h2{margin:0;color:var(--text-primary);font-size:1.5rem;font-weight:600}.close-button{display:flex;align-items:center;justify-content:center;width:40px;height:40px;border:none;background:var(--surface-secondary);color:var(--text-muted);border-radius:8px;cursor:pointer;transition:all .2s ease}.close-button:hover{background:var(--surface-hover);color:var(--text-primary)}.image-picker-toolbar{padding:1.5rem 2rem;border-bottom:1px solid var(--border-color);background:var(--surface-secondary)}.folder-tabs{display:flex;gap:.5rem;margin-bottom:1rem;flex-wrap:wrap}.folder-tab{padding:.5rem 1rem;border:1px solid var(--border-color);background:var(--surface-primary);color:var(--text-secondary);border-radius:20px;cursor:pointer;font-size:.85rem;font-weight:500;transition:all .2s ease;white-space:nowrap}.folder-tab:hover{background:var(--surface-hover);color:var(--text-primary)}.folder-tab.active{background:var(--accent-color, #3b82f6);color:#fff;border-color:var(--accent-color, #3b82f6)}.search-and-view{display:flex;justify-content:space-between;align-items:center;gap:1rem;flex-wrap:wrap}.search-container{display:flex;align-items:center;gap:.5rem;background:var(--surface-primary);border:1px solid var(--border-color);border-radius:8px;padding:.5rem 1rem;flex:1;min-width:200px;max-width:300px}.search-container input{border:none;outline:none;background:transparent;color:var(--text-primary);font-size:.85rem;flex:1}.view-button{display:flex;align-items:center;justify-content:center;width:36px;height:36px;border:none;background:transparent;color:var(--text-muted);cursor:pointer;transition:all .2s ease}.view-button.active{background:var(--accent-color, #3b82f6);color:#fff}.image-picker-content{flex:1;overflow-y:auto;padding:1.5rem 2rem}.images-grid.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:1rem}.images-grid.list{display:flex;flex-direction:column;gap:.75rem}.image-item{position:relative;background:var(--surface-secondary);border:1px solid var(--border-color);border-radius:8px;overflow:hidden;cursor:pointer;transition:all .2s ease}.image-item:hover{transform:translateY(-2px);box-shadow:0 8px 25px #0000001a;border-color:var(--accent-color, #3b82f6)}.image-item.selected{border-color:var(--accent-color, #3b82f6);box-shadow:0 0 0 2px #3b82f633}.grid .image-item .image-preview{aspect-ratio:1;overflow:hidden;position:relative;background:var(--surface-primary)}.list .image-item{display:flex;align-items:center;padding:.75rem;gap:1rem}.list .image-item .image-preview{width:60px;height:60px;flex-shrink:0;border-radius:6px;overflow:hidden;background:var(--surface-primary)}.image-preview{display:flex;align-items:center;justify-content:center}.image-details{padding:.75rem}.list .image-item .image-details{padding:0;flex:1}.image-details h4{margin:0 0 .25rem;color:var(--text-primary);font-size:.85rem;font-weight:500;word-break:break-word;line-height:1.3}.image-meta{display:flex;gap:1rem;font-size:.75rem;color:var(--text-muted)}.folder-name{text-transform:capitalize}.selection-indicator{position:absolute;top:.5rem;right:.5rem;width:24px;height:24px;background:var(--accent-color, #3b82f6);color:#fff;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:700;box-shadow:0 2px 8px #0003}.empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:3rem 2rem;text-align:center;color:var(--text-muted);height:300px}.empty-state h3{margin:0 0 .5rem;color:var(--text-secondary);font-size:1.1rem}.empty-state p{margin:0;font-size:.9rem;line-height:1.4}.image-picker-footer{display:flex;justify-content:space-between;align-items:center;padding:1.5rem 2rem;border-top:1px solid var(--border-color);background:var(--surface-secondary)}.selection-info{color:var(--text-secondary);font-size:.9rem;font-weight:500}.footer-actions{display:flex;gap:1rem}.footer-actions button{padding:.75rem 1.5rem;border:none;border-radius:8px;font-size:.9rem;font-weight:500;cursor:pointer;transition:all .2s ease}.cancel-button{background:var(--surface-primary);color:var(--text-secondary);border:1px solid var(--border-color)}.cancel-button:hover{background:var(--surface-hover);color:var(--text-primary)}.confirm-button{background:var(--accent-color, #3b82f6);color:#fff}.confirm-button:hover{background:var(--accent-hover, #2563eb);transform:translateY(-1px)}@media (max-width: 768px){.image-picker-overlay{padding:1rem}.image-picker-modal{height:90vh}.image-picker-header,.image-picker-toolbar,.image-picker-content,.image-picker-footer{padding:1rem}.folder-tabs{justify-content:center}.search-and-view{flex-direction:column;align-items:stretch}.search-container{max-width:none}.images-grid.grid{grid-template-columns:repeat(auto-fill,minmax(100px,1fr));gap:.75rem}.list .image-item{flex-direction:column;text-align:center;gap:.75rem}.list .image-item .image-preview{width:80px;height:80px}.image-picker-footer{flex-direction:column;gap:1rem;align-items:stretch}.footer-actions{justify-content:center}}.image-manager{background:#f8fafc;border-radius:8px;padding:1rem;border:1px solid #e2e8f0}.image-manager-inline{display:contents}.image-manager-inline>div{display:flex;align-items:center;justify-content:center;width:100%;height:100%}.image-input-section{margin-bottom:1rem}.image-input-section label{display:block;margin-bottom:.5rem;font-weight:500;color:#374151}.url-input-group{display:flex;gap:.5rem;align-items:center}.url-input-group input{flex:1;padding:.5rem;border:1px solid #d1d5db;border-radius:6px;font-size:.875rem}.copy-btn{padding:.5rem;background:#f0f9ff;color:#0369a1;border:1px solid #bae6fd;border-radius:6px;cursor:pointer;transition:all .2s}.copy-btn:hover{background:#e0f2fe}.divider{text-align:center;margin:1rem 0;position:relative;color:#6b7280}.divider:before{content:"";position:absolute;top:50%;left:0;right:0;height:1px;background:#e5e7eb}.divider span{background:#f8fafc;padding:0 1rem;position:relative}.drop-zone{border:2px dashed #d1d5db;border-radius:8px;padding:2rem;text-align:center;cursor:pointer;transition:all .2s;background:#fff}.drop-zone:hover{border-color:#3b82f6;background:#f0f9ff}.drop-zone.active{border-color:#3b82f6;background:#dbeafe}.drop-zone svg{color:#6b7280;margin-bottom:.5rem}.drop-zone p{margin:.5rem 0;color:#374151;font-weight:500}.drop-zone small{color:#6b7280}.image-examples{margin-top:1.5rem}.image-examples h4{margin:0 0 .75rem;color:#374151;font-size:.875rem;font-weight:600}.examples-list{display:flex;flex-direction:column;gap:.5rem}.example-item{display:flex;align-items:center;gap:.5rem;padding:.5rem;background:#fff;border-radius:6px;border:1px solid #e5e7eb}.example-item code{flex:1;font-family:Monaco,Menlo,monospace;font-size:.75rem;color:#1f2937;cursor:pointer;padding:.25rem .5rem;background:#f9fafb;border-radius:4px}.example-item code:hover{background:#f3f4f6;color:#3b82f6}.copy-example-btn{padding:.25rem;background:transparent;color:#6b7280;border:none;cursor:pointer;border-radius:4px;transition:all .2s}.copy-example-btn:hover{background:#f3f4f6;color:#374151}.image-actions{margin-bottom:1rem}.gallery-btn{display:flex;align-items:center;gap:.5rem;padding:.75rem 1.5rem;border:none;border-radius:8px;font-size:.9rem;font-weight:500;cursor:pointer;transition:all .2s ease;background:var(--surface-secondary);color:var(--text-primary);border:1px solid var(--border-color);width:100%;justify-content:center}.gallery-btn:hover{background:var(--surface-hover);transform:translateY(-1px)}.gallery-btn.primary{background:var(--accent-color, #3b82f6);color:#fff;border-color:var(--accent-color, #3b82f6)}.gallery-btn.primary:hover{background:var(--accent-hover, #2563eb)}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.template-section{margin-bottom:2rem;padding:1.5rem;background:var(--background-secondary);border-radius:12px;border:1px solid var(--border-color)}.template-section h3.section-title{margin:0 0 1rem;font-size:1.2rem;font-weight:600;color:var(--text-primary);display:flex;align-items:center;gap:.5rem}.template-section h3.section-title:before{content:"";width:4px;height:20px;background:var(--primary-color);border-radius:2px}.image-grid{display:grid;gap:1rem;margin-top:1rem}.image-slot{position:relative;background:var(--background-tertiary);border-radius:8px;overflow:hidden;aspect-ratio:1;border:2px dashed var(--border-color);transition:all .3s ease}.image-slot.filled{border:2px solid var(--primary-color);border-style:solid}.image-slot img{width:100%;height:100%;object-fit:cover}.image-caption{position:absolute;bottom:0;left:0;right:0;background:#000c;color:#fff;padding:.5rem;font-size:.8rem;text-align:center}.upload-placeholder{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;gap:.5rem;color:var(--text-secondary);cursor:pointer;transition:all .3s ease}.upload-placeholder:hover{color:var(--primary-color);background:var(--primary-color-light)}.remove-image{position:absolute;top:.5rem;right:.5rem;background:#ef4444e6;color:#fff;border:none;border-radius:50%;width:24px;height:24px;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .3s ease}.remove-image:hover{background:#ef4444;transform:scale(1.1)}.stats-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1rem;margin-top:1rem}.stat-label{font-weight:600;color:var(--text-secondary);font-size:.9rem}.stat-value{color:var(--text-primary);font-weight:500;padding:.5rem;background:var(--background-tertiary);border-radius:6px;border:1px solid var(--border-color)}.stat-input{padding:.5rem;border:2px solid var(--border-color);border-radius:6px;background:var(--background-primary);color:var(--text-primary);font-family:inherit;transition:border-color .3s ease}.stat-input:focus{outline:none;border-color:var(--primary-color)}.description-textarea{width:100%;min-height:120px;padding:1rem;border:2px solid var(--border-color);border-radius:8px;background:var(--background-primary);color:var(--text-primary);font-family:inherit;font-size:1rem;line-height:1.6;resize:vertical;transition:border-color .3s ease}.description-textarea:focus{outline:none;border-color:var(--primary-color)}.description-text{line-height:1.6;color:var(--text-primary);padding:1rem;background:var(--background-tertiary);border-radius:8px;border:1px solid var(--border-color)}.skills-editor,.effects-editor,.npcs-editor,.steps-editor,.examples-editor,.timeline-editor{display:flex;flex-direction:column;gap:.75rem}.skill-item-editor,.effect-item-editor,.npc-item-editor,.example-item-editor,.step-item-editor{display:flex;gap:.5rem;align-items:flex-start}.step-number{background:var(--primary-color);color:#fff;border-radius:50%;width:24px;height:24px;display:flex;align-items:center;justify-content:center;font-size:.8rem;font-weight:600;flex-shrink:0;margin-top:.25rem}.timeline-item-editor{display:flex;gap:.5rem;align-items:flex-start;padding:1rem;background:var(--background-tertiary);border-radius:8px;border:1px solid var(--border-color)}.timeline-date-input{width:120px;flex-shrink:0}.timeline-description-input{flex:1}.skill-input,.effect-input,.npc-input,.step-input,.example-input{flex:1;padding:.5rem;border:2px solid var(--border-color);border-radius:6px;background:var(--background-primary);color:var(--text-primary);font-family:inherit;transition:border-color .3s ease}.skill-input:focus,.effect-input:focus,.npc-input:focus,.step-input:focus,.example-input:focus,.timeline-date-input:focus,.timeline-description-input:focus{outline:none;border-color:var(--primary-color)}.remove-skill,.remove-effect,.remove-npc,.remove-step,.remove-example,.remove-timeline-item{background:#ef44441a;color:#ef4444;border:1px solid rgba(239,68,68,.3);border-radius:6px;width:32px;height:32px;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .3s ease;flex-shrink:0}.remove-skill:hover,.remove-effect:hover,.remove-npc:hover,.remove-step:hover,.remove-example:hover,.remove-timeline-item:hover{background:#ef444433;border-color:#ef4444}.add-skill,.add-effect,.add-npc,.add-step,.add-example,.add-timeline-item{display:flex;align-items:center;gap:.5rem;padding:.75rem 1rem;background:var(--primary-color-light);color:var(--primary-color);border:2px dashed var(--primary-color);border-radius:8px;cursor:pointer;transition:all .3s ease;font-weight:500;margin-top:.5rem}.add-skill:hover,.add-effect:hover,.add-npc:hover,.add-step:hover,.add-example:hover,.add-timeline-item:hover{background:var(--primary-color);color:#fff;border-style:solid}.skills-list,.effects-list,.npcs-list{list-style:none;padding:0;margin:0}.skill-item,.effect-item,.npc-item{background:var(--background-tertiary);border-radius:8px;border:1px solid var(--border-color);margin-bottom:.5rem;position:relative;padding:.75rem .75rem .75rem 2rem}.skill-item:before,.effect-item:before,.npc-item:before{content:"•";position:absolute;left:.75rem;color:var(--primary-color);font-weight:700}.steps-list{counter-reset:step-counter;list-style:none;padding:0;margin:0}.step-item{counter-increment:step-counter;background:var(--background-tertiary);border-radius:8px;border:1px solid var(--border-color);margin-bottom:.75rem;position:relative;padding:1rem 1rem 1rem 3rem}.step-item:before{content:counter(step-counter);position:absolute;left:.75rem;top:1rem;background:var(--primary-color);color:#fff;border-radius:50%;width:24px;height:24px;display:flex;align-items:center;justify-content:center;font-size:.8rem;font-weight:600}.examples-list{display:flex;flex-direction:column;gap:1rem}.example-item{padding:1rem;background:var(--background-tertiary);border-radius:8px;border:1px solid var(--border-color)}.example-item h4{margin:0 0 .5rem;color:var(--primary-color);font-size:1rem}.example-item p{margin:0;line-height:1.6}.timeline-list{display:flex;flex-direction:column;gap:1rem}.timeline-item{display:flex;gap:1rem;padding:1rem;background:var(--background-tertiary);border-radius:8px;border:1px solid var(--border-color);position:relative}.timeline-item:before{content:"";position:absolute;left:-8px;top:1.5rem;width:16px;height:16px;background:var(--primary-color);border-radius:50%;border:3px solid var(--background-primary)}.timeline-date{font-weight:600;color:var(--primary-color);min-width:120px;flex-shrink:0}.timeline-description{flex:1;line-height:1.6}.no-skills,.no-effects,.no-npcs,.no-steps,.no-examples,.no-timeline{padding:2rem;text-align:center;color:var(--text-secondary);font-style:italic;background:var(--background-tertiary);border-radius:8px;border:2px dashed var(--border-color)}.bdg-template{max-width:1400px;margin:0 auto;padding:1rem}.bdg-grid-container{display:flex;flex-direction:column;gap:1.5rem}.bdg-grid-row{display:grid;grid-template-columns:1fr 1fr;gap:1.5rem}.bdg-grid-item{margin-bottom:0!important}@media (max-width: 1200px){.artifacts-grid{grid-template-columns:repeat(4,1fr);grid-template-rows:repeat(4,1fr);gap:.4rem}}@media (max-width: 1024px){.bdg-grid-row{grid-template-columns:1fr;gap:1rem}.bdg-template{max-width:800px}.artifacts-grid{grid-template-columns:repeat(5,1fr);grid-template-rows:repeat(3,1fr);gap:.3rem}.bdg-artifacts-section{padding:1rem}}@media (max-width: 900px){.artifacts-grid{grid-template-columns:repeat(4,1fr);grid-template-rows:repeat(4,1fr);gap:.3rem}}.bdg-hero-section{background:linear-gradient(135deg,#1a1a2e,#16213e);border-radius:12px;padding:1.5rem;height:100%;display:flex;flex-direction:column}.section-header-with-bg{display:flex;align-items:center;justify-content:center;gap:.5rem;margin-bottom:1rem;position:relative}.section-header-with-bg .section-title{margin-bottom:0}.bg-image-btn{display:flex;align-items:center;gap:.25rem;background:#ffffff26;color:#fffc;border:1px solid rgba(255,255,255,.3);border-radius:4px;padding:.25rem .5rem;font-size:.7rem;cursor:pointer;transition:all .3s ease}.bg-image-btn:hover{background:#ffffff40;color:#fff;border-color:#ffffff80}.bg-image-remove-btn{display:flex;align-items:center;justify-content:center;background:#ef444433;color:#ff6b6b;border:1px solid rgba(239,68,68,.4);border-radius:4px;padding:.25rem;cursor:pointer;transition:all .3s ease}.bg-image-remove-btn:hover{background:#ef444466;color:#fff}.bdg-hero-section .section-title{color:#fff;font-size:1.2rem;font-weight:700;margin-bottom:1rem;text-align:center}.lineup-title{color:#fff!important}.hero-grid{display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(2,1fr);gap:1rem;max-width:100%;margin:0 auto;flex:1}.hero-slot{position:relative;background:#ffffff1a;border-radius:8px;padding:.5rem;min-height:60px;border:2px solid transparent;transition:all .3s ease}.hero-slot.filled{background:#ffffff26;border-color:#4a9eff}.hero-slot.empty{border:2px dashed rgba(255,255,255,.3);display:flex;align-items:center;justify-content:center}.hero-limit-indicator{color:#ff6464cc;font-size:.7rem;font-style:italic;text-align:center}.hero-slot img{width:100%;max-width:100px;height:auto;aspect-ratio:1;display:block;margin:0 auto .5rem;border-radius:30%;object-fit:cover}.hero-level{color:#fff;font-size:.8rem;font-weight:700;text-align:center;margin-bottom:.5rem}.hero-artifacts{display:flex;flex-wrap:wrap;gap:2px;justify-content:center}.artifact-icon{width:20px;height:20px;border-radius:4px;object-fit:cover}.bdg-artifacts-section{background:linear-gradient(135deg,#2d1b69,#11998e);border-radius:12px;padding:1.5rem;height:100%;display:flex;flex-direction:column;overflow:hidden;min-width:0}.bdg-artifacts-section .section-title{color:#fff;font-size:1.2rem;font-weight:700;margin-bottom:1rem;text-align:center}.artifacts-title{color:#fff!important}.artifacts-grid{display:grid;grid-template-columns:repeat(5,1fr);grid-template-rows:repeat(3,1fr);gap:.5rem;width:100%;max-width:100%;margin:0 auto;flex:1;overflow:hidden}@media (max-width: 768px){.artifacts-grid{grid-template-columns:repeat(5,1fr);grid-template-rows:repeat(3,1fr);gap:.3rem}}@media (max-width: 480px){.artifacts-grid{grid-template-columns:repeat(5,1fr);grid-template-rows:repeat(3,1fr);gap:.25rem}}.artifact-slot{position:relative;background:#ffffff1a;border-radius:8px;padding:.25rem;aspect-ratio:1;border:2px solid transparent;transition:all .3s ease;display:flex;align-items:center;justify-content:center;min-width:0;min-height:20px}.artifact-slot.filled{background:#ffffff26;border-color:gold}.artifact-slot.empty{border:2px dashed rgba(255,255,255,.3)}.artifact-slot img{width:100%;height:100%;border-radius:6px;object-fit:cover}.hot-indicator{position:absolute;top:-5px;right:-5px;background:#f44;color:#fff;font-size:.6rem;font-weight:700;padding:2px 4px;border-radius:4px}.artifact-slot.hero-row{border-color:#4caf50;background:#4caf501a}.artifact-slot.hero-row.filled{border-color:#4caf50;background:#4caf5033}.hero-indicator{position:absolute;top:-5px;left:-5px;background:#4caf50;color:#fff;font-size:.5rem;font-weight:700;padding:2px 4px;border-radius:4px}.hero-placeholder-msg{font-size:.7rem;color:#fff9;text-align:center;font-style:italic}.hero-artifact-note{position:absolute;bottom:-8px;left:0;right:0;font-size:.5rem;color:#ffffffb3;text-align:center;background:#000000b3;padding:2px;border-radius:0 0 6px 6px}.bdg-malus-section{background:linear-gradient(135deg,#667eea,#764ba2);border-radius:12px;padding:1.5rem;height:100%;display:flex;flex-direction:column}.relics-malus-container{display:grid;grid-template-columns:1fr 2fr;gap:1.5rem;align-items:start;flex:1}.relics-section .section-title,.malus-section .section-title{color:#fff;font-size:1.1rem;font-weight:700;margin-bottom:1rem}.relics-grid{display:flex;flex-direction:column;gap:.5rem}.relic-slot{position:relative;display:flex;align-items:center;justify-content:center;gap:.5rem;background:#ffffff1a;border-radius:8px;padding:.5rem;min-height:40px}.relic-slot img{width:100%;max-width:60px;height:auto;aspect-ratio:1;border-radius:6px;object-fit:cover}.relic-info{flex:1}.relic-rarity{color:gold;font-size:.8rem;font-weight:700}.relic-name{color:#fff;font-size:.9rem}.malus-grid{display:grid;grid-template-columns:repeat(4,1fr);grid-template-rows:repeat(2,1fr);gap:.5rem;margin-bottom:1rem}@media (max-width: 768px){.malus-grid{grid-template-columns:repeat(4,1fr);grid-template-rows:repeat(2,1fr);gap:.3rem}}@media (max-width: 480px){.malus-grid{grid-template-columns:repeat(4,1fr);grid-template-rows:repeat(2,1fr);gap:.25rem}}.malus-slot{position:relative;background:#ffffff1a;border-radius:8px;padding:.25rem;text-align:center;cursor:pointer;transition:all .3s ease;border:2px solid transparent}.malus-slot.active{border-color:#f44;background:#f443}.malus-slot.inactive{border-color:transparent;opacity:.6}.malus-icon{width:100%;max-width:40px;height:auto;aspect-ratio:1;margin:0 auto .25rem}.malus-icon img{width:100%;height:100%;border-radius:50%;object-fit:cover}.malus-name{color:#fff;font-size:.7rem}.malus-hint{color:#fffc;font-size:.8rem;text-align:center;font-style:italic}.bdg-tips-section{background:linear-gradient(135deg,#ff9a9e,#fecfef 50% 100%);border-radius:12px;padding:1.5rem;color:#333;height:100%;display:flex;flex-direction:column}.bdg-tips-section .section-title{color:#333;font-size:1.2rem;font-weight:700;margin-bottom:1rem}.tips-content{background:#ffffff4d;border-radius:8px;padding:1rem;flex:1;display:flex;flex-direction:column}.mode-info{background:#ffffff80;padding:.75rem;border-radius:6px;margin-bottom:1rem;font-weight:500}.tips-list{margin-bottom:1rem}.tip-item{padding:.5rem 0;font-size:.95rem}.description-content{background:#ffffff80;padding:.75rem;border-radius:6px;font-size:.95rem;line-height:1.5}.tips-editor{display:flex;flex-direction:column;gap:1rem}.mode-editor label,.tips-list-editor label,.description-editor label{display:block;font-weight:700;margin-bottom:.5rem;color:#333}.mode-editor input,.tips-editor textarea,.description-editor textarea{width:100%;padding:.5rem;border:1px solid #ddd;border-radius:4px;font-family:inherit}.tip-editor{display:flex;gap:.5rem;align-items:flex-start}.tip-editor textarea{flex:1}.add-tip,.add-artifact,.add-relic{display:flex;align-items:center;gap:.5rem;background:#fff3;border:2px dashed rgba(255,255,255,.5);border-radius:8px;padding:.5rem;cursor:pointer;transition:all .3s ease;color:#fff}.add-tip:hover,.add-artifact:hover,.add-relic:hover{background:#ffffff4d;border-color:#fffc}.remove-hero,.remove-artifact,.remove-relic,.remove-tip{position:absolute;top:2px;right:2px;background:#f44;color:#fff;border:none;border-radius:50%;width:20px;height:20px;display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:.7rem}.toggle-hot{position:absolute;bottom:2px;right:2px;background:#f44;color:#fff;border:none;border-radius:4px;padding:2px 4px;font-size:.6rem;cursor:pointer}.upload-placeholder{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.5rem;color:#ffffffb3;font-size:.8rem;height:100%;text-align:center}@media (max-width: 768px){.stats-grid{grid-template-columns:1fr}.image-grid{gap:.5rem}.template-section{padding:1rem}.timeline-item{flex-direction:column;gap:.5rem}.timeline-date{min-width:auto}.hero-grid{grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(2,1fr);gap:.5rem;max-width:400px}.relics-malus-container{grid-template-columns:1fr;gap:1rem}.bdg-grid-container .bdg-grid-row{grid-template-columns:1fr}}@media (max-width: 480px){.artifact-slot{min-height:15px;border-radius:4px;padding:.1rem}.hero-slot{min-height:40px;padding:.25rem}.hero-slot img{max-width:60px}.malus-slot{padding:.2rem;min-height:20px}.relic-slot{min-height:30px;padding:.25rem}.relic-slot img{max-width:50px;width:100%;height:auto}.bdg-template{padding:.25rem}.bdg-grid-container,.bdg-grid-row{gap:.5rem}.bdg-hero-section,.bdg-artifacts-section,.bdg-malus-section,.bdg-tips-section{padding:.75rem}.relics-section .section-title,.malus-section .section-title{font-size:.9rem;white-space:nowrap;overflow:visible}}.guild-war-template{width:100%;max-width:none;padding:1.5rem;background:var(--background-secondary);border-radius:12px;border:1px solid var(--border-color);box-sizing:border-box}.guild-war-header{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:2rem;padding-bottom:1rem;border-bottom:2px solid var(--border-color)}.war-info h2{margin:0 0 .5rem;color:var(--text-primary);font-size:1.8rem}.war-date{color:var(--text-secondary);font-size:.9rem;margin:0}.war-summary{display:flex;gap:1.5rem;align-items:center}.summary-stat{display:flex;align-items:center;gap:.5rem;padding:.5rem 1rem;background:var(--background-tertiary);border-radius:8px;color:var(--text-secondary);font-size:.9rem}.add-player-section{margin-bottom:1.5rem;min-height:60px}.add-player-placeholder{height:60px;display:flex;align-items:center;justify-content:center;color:var(--text-secondary);font-style:italic;opacity:.5}.add-player-form{display:flex;gap:1rem;align-items:center}.add-player-form input{flex:1;padding:.75rem;border:1px solid var(--border-color);border-radius:8px;background:var(--background-primary);color:var(--text-primary);font-size:.9rem}.add-button{display:flex;align-items:center;gap:.5rem;padding:.75rem 1rem;background:var(--primary-color);color:#fff;border:none;border-radius:8px;cursor:pointer;font-size:.9rem;transition:all .3s ease}.add-button:hover{background:var(--primary-color-dark)}.controls-section{display:flex;gap:2rem;margin-bottom:1.5rem;align-items:center}.search-section{flex:1}.search-input{position:relative;display:flex;align-items:center}.search-input svg{position:absolute;left:.75rem;color:var(--text-secondary)}.search-input input{width:100%;padding:.75rem 1rem .75rem 2.5rem;border:1px solid var(--border-color);border-radius:8px;background:var(--background-primary);color:var(--text-primary);font-size:.9rem}.sort-section{display:flex;align-items:center;gap:.5rem}.sort-section label{color:var(--text-secondary);font-size:.9rem;white-space:nowrap}.sort-section select{padding:.75rem;border:1px solid var(--border-color);border-radius:8px;background:var(--background-primary);color:var(--text-primary);font-size:.9rem}.players-list{display:grid;gap:1rem}.no-players{text-align:center;padding:3rem;color:var(--text-secondary);font-style:italic}.player-card{background:var(--background-tertiary);border:1px solid var(--border-color);border-radius:12px;padding:1.5rem;transition:all .3s ease}.player-card:hover{border-color:var(--primary-color);transform:translateY(-2px)}.player-header{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:1rem}.player-info h3{margin:0 0 .5rem;color:var(--text-primary);font-size:1.3rem}.player-stats{display:flex;gap:1rem;flex-wrap:wrap}.stat{padding:.3rem .8rem;border-radius:6px;font-size:.85rem;font-weight:500}.stat.attack{background:#22c55e1a;color:#22c55e;border:1px solid rgba(34,197,94,.2)}.stat.defense{background:#3b82f61a;color:#3b82f6;border:1px solid rgba(59,130,246,.2)}.stat.difference.positive{background:#22c55e1a;color:#22c55e;border:1px solid rgba(34,197,94,.2)}.stat.difference.negative{background:#ef44441a;color:#ef4444;border:1px solid rgba(239,68,68,.2)}.remove-player-button{background:#ef44441a;color:#ef4444;border:1px solid rgba(239,68,68,.2);border-radius:8px;padding:.5rem;cursor:pointer;transition:all .3s ease}.remove-player-button:hover{background:#ef444433}.player-scores{display:grid;gap:1.5rem;grid-template-columns:1fr 2fr;margin-top:1rem;padding-top:1rem;border-top:1px solid var(--border-color);min-height:80px}.attack-score label,.defense-header label{display:block;margin-bottom:.5rem;color:var(--text-secondary);font-size:.9rem;font-weight:500}.attack-score input{width:100%;padding:.75rem;border:1px solid var(--border-color);border-radius:8px;background:var(--background-primary);color:var(--text-primary);font-size:.9rem}.defense-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:.5rem}.add-defense-button{background:#3b82f61a;color:#3b82f6;border:1px solid rgba(59,130,246,.2);border-radius:6px;padding:.3rem;cursor:pointer;transition:all .3s ease}.add-defense-button:hover{background:#3b82f633}.defense-inputs{display:flex;flex-direction:column;gap:.5rem}.defense-input{display:flex;gap:.5rem;align-items:center}.defense-input input{flex:1;padding:.5rem;border:1px solid var(--border-color);border-radius:6px;background:var(--background-primary);color:var(--text-primary);font-size:.9rem}.remove-defense-button{background:#ef44441a;color:#ef4444;border:1px solid rgba(239,68,68,.2);border-radius:4px;padding:.3rem;cursor:pointer;transition:all .3s ease}.remove-defense-button:hover{background:#ef444433}@media (max-width: 768px){.guild-war-header{flex-direction:column;gap:1rem}.war-summary{flex-direction:column;align-items:stretch;gap:.5rem}.controls-section{flex-direction:column;gap:1rem;align-items:stretch}.player-stats{flex-direction:column;gap:.5rem}.player-scores{grid-template-columns:1fr;gap:1rem}.add-player-form{flex-direction:column;gap:.5rem}}.tier-list-template{width:100%;max-width:none}.tier-list-section{background:var(--background-secondary);border-radius:12px;border:1px solid var(--border-color);padding:1.5rem}.tier-list-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:2rem;padding-bottom:1rem;border-bottom:2px solid var(--border-color)}.tier-list-header .section-title{margin:0;color:var(--text-primary);font-size:1.8rem}.add-row-btn{display:flex;align-items:center;gap:.5rem;padding:.75rem 1rem;background:var(--primary-color);color:#fff;border:none;border-radius:8px;cursor:pointer;font-size:.9rem;font-weight:500;transition:all .3s ease}.add-row-btn:hover{background:var(--primary-color-dark, #1976d2);transform:translateY(-1px)}.tier-list-table{width:100%;background:var(--background-tertiary);border-radius:8px;border:1px solid var(--border-color);overflow:hidden}.tier-list-table-header{display:grid;grid-template-columns:80px 80px 100px 1fr 120px 180px 120px;background:var(--primary-color);color:#fff}.tier-list-table-header.editing{grid-template-columns:80px 80px 100px 1fr 120px 180px 120px 60px}.header-cell{padding:1rem .75rem;font-weight:600;text-align:center;font-size:.9rem;border-right:1px solid rgba(255,255,255,.2)}.header-cell:last-child{border-right:none}.tier-list-row{display:grid;grid-template-columns:80px 80px 100px 1fr 120px 180px 120px;border-bottom:1px solid var(--border-color);transition:all .3s ease}.tier-list-row.editing{grid-template-columns:80px 80px 100px 1fr 120px 180px 120px 60px}.tier-list-row:hover{background:rgba(var(--primary-color-rgb, 25, 118, 210),.05)}.tier-list-row:last-child{border-bottom:none}.tier-cell{padding:.75rem;display:flex;align-items:center;justify-content:center;border-right:1px solid var(--border-color);min-height:80px}.tier-cell:last-child{border-right:none}.tier-cell.character-name{justify-content:flex-start;padding-left:1rem}.tier-cell.pve-mode{flex-direction:column;padding:.5rem}.tier-cell.pets{padding:.5rem}.tier-image{width:50px;height:50px;border-radius:8px;object-fit:cover}.tier-image-wrapper{position:relative;display:inline-block;cursor:default}.tier-image-wrapper.editable{cursor:pointer}.tier-image-wrapper.editable .edit-overlay{position:absolute;inset:0;background:#0009;display:flex;align-items:center;justify-content:center;border-radius:8px;opacity:0;transition:opacity .3s ease;color:#fff}.tier-image-wrapper.editable:hover .edit-overlay{opacity:1}.tier-image-wrapper.editable.character .edit-overlay{border-radius:10px}.tier-image-wrapper.editable.pet .edit-overlay{border-radius:6px}.tier-image.character{width:70px;height:70px;border-radius:10px}.tier-image.pet{width:35px;height:35px;border-radius:6px}.tier-upload-placeholder{display:flex;align-items:center;justify-content:center;width:50px;height:50px;border:2px dashed var(--border-color);border-radius:8px;background:var(--background-primary);cursor:pointer;transition:all .3s ease;color:var(--text-secondary)}.tier-upload-placeholder.character{width:70px;height:70px;border-radius:10px}.tier-upload-placeholder.pet{width:35px;height:35px}.tier-upload-placeholder:hover{border-color:var(--primary-color);color:var(--primary-color);background:rgba(var(--primary-color-rgb, 25, 118, 210),.1)}.tier-empty-slot{width:50px;height:50px;background:var(--background-primary);border:2px dashed var(--border-color);border-radius:8px;opacity:.5}.tier-empty-slot.character{width:70px;height:70px;border-radius:10px}.tier-empty-slot.pet{width:35px;height:35px}.tier-text-input{width:100%;padding:.5rem;border:1px solid var(--border-color);border-radius:6px;background:var(--background-primary);color:var(--text-primary);font-size:1.1rem;font-family:inherit}.tier-text-input:focus{outline:none;border-color:var(--primary-color);box-shadow:0 0 0 2px rgba(var(--primary-color-rgb, 25, 118, 210),.2)}.tier-text{font-size:1.1rem;color:var(--text-primary);font-weight:500}.pets-container{display:flex;flex-direction:column;gap:.5rem;align-items:center}.pet-slot{display:flex;align-items:center;justify-content:center}.pve-modes-container{display:flex;flex-direction:column;gap:.25rem;width:100%}.pve-mode-item{display:flex;align-items:center;gap:.5rem;font-size:.8rem}.pve-mode-label{font-weight:600;color:var(--text-primary);min-width:45px;text-align:left}.pve-mode-select{flex:1;padding:.25rem .5rem;border:1px solid var(--border-color);border-radius:4px;font-size:.75rem;font-weight:600;color:#000;cursor:pointer}.pve-tier-buttons{display:flex;gap:.25rem;flex:1}.pve-tier-btn{flex:1;padding:.25rem .375rem;border:2px solid transparent;border-radius:4px;font-size:.75rem;font-weight:700;color:#000;cursor:pointer;transition:all .2s ease;min-width:24px}.pve-tier-btn:hover{transform:translateY(-1px);box-shadow:0 2px 4px #0003}.pve-tier-btn.active{border-color:#fff;box-shadow:0 0 0 2px #ffffff4d}.pve-tier-btn[style*="#3d4758"]{color:#fff}.pve-mode-display{flex:1;padding:.25rem .5rem;border-radius:4px;text-align:center;font-size:.75rem;font-weight:600;color:#000;border:1px solid rgba(0,0,0,.2)}.pve-mode-display[style*="#3d4758"]{color:#fff}.remove-row-btn{background:#ef44441a;color:#ef4444;border:1px solid rgba(239,68,68,.2);border-radius:6px;padding:.5rem;cursor:pointer;transition:all .3s ease;display:flex;align-items:center;justify-content:center}.remove-row-btn:hover{background:#ef444433;border-color:#ef4444}.tier-list-empty{padding:3rem;text-align:center;color:var(--text-secondary)}.tier-list-empty p{margin:0 0 1rem;font-style:italic;font-size:1.1rem}.add-first-row-btn{display:inline-flex;align-items:center;gap:.5rem;padding:1rem 2rem;background:var(--primary-color);color:#fff;border:none;border-radius:8px;cursor:pointer;font-size:1rem;font-weight:500;transition:all .3s ease}.add-first-row-btn:hover{background:var(--primary-color-dark, #1976d2);transform:translateY(-1px)}.learn-more-btn{display:flex;align-items:center;gap:.5rem;padding:.5rem 1rem;background:var(--primary-color);color:#fff;border:none;border-radius:6px;cursor:pointer;font-size:.85rem;font-weight:500;transition:all .3s ease;white-space:nowrap}.learn-more-btn:hover{background:var(--primary-color-dark, #1976d2);transform:translateY(-1px)}.tier-modal-overlay{position:fixed;inset:0;background:#000c;display:flex;align-items:center;justify-content:center;z-index:1000;padding:2rem}.tier-modal{background:var(--background-primary);border-radius:12px;max-width:90vw;max-height:90vh;overflow:hidden;box-shadow:0 20px 40px #0000004d;animation:modalSlideIn .3s ease-out}@keyframes modalSlideIn{0%{opacity:0;transform:scale(.9) translateY(-20px)}to{opacity:1;transform:scale(1) translateY(0)}}.tier-modal-header{display:flex;justify-content:space-between;align-items:center;padding:1.5rem;border-bottom:1px solid var(--border-color);background:var(--background-secondary)}.tier-modal-title{display:flex;align-items:center;gap:.75rem;margin:0;color:var(--text-primary);font-size:1.5rem;font-weight:600}.tier-modal-close{background:none;border:none;color:var(--text-secondary);cursor:pointer;padding:.5rem;border-radius:6px;transition:all .3s ease}.tier-modal-close:hover{background:rgba(var(--primary-color-rgb, 25, 118, 210),.1);color:var(--primary-color)}.tier-modal-content{padding:2rem;text-align:center;overflow:auto;max-height:calc(90vh - 100px)}.tier-modal-image{max-width:100%;max-height:70vh;border-radius:8px;box-shadow:0 8px 24px #0003}.tier-modal-annotated-container{position:relative;display:inline-block;max-width:100%;overflow:visible}.tier-modal-background-image{max-width:100%;max-height:70vh;border-radius:8px;display:block}.tier-modal-zone{position:absolute;display:flex;gap:.5rem}.tier-modal-left-zone{top:10%;left:2%;width:33%;height:85%;flex-direction:column;justify-content:flex-start;align-items:flex-start;position:absolute;padding:0}.tier-modal-textarea{width:100%;height:100%;background:#000000b3;color:#fff;border:2px dashed rgba(255,255,255,.5);border-radius:8px;padding:.75rem;font-size:.9rem;resize:none;font-family:inherit;text-align:left}.tier-modal-textarea:focus{outline:none;border-color:var(--primary-color);background:#000c}.tier-modal-text{width:100%;height:100%;background:#0000;color:#fff;border-radius:8px;padding:1.75rem;font-size:.9rem;white-space:pre-wrap;overflow-y:auto;line-height:1.5;text-align:left}.tier-modal-bottom-zone{bottom:15%;left:54%;transform:translate(-50%);width:15%;height:5%;flex-direction:row;justify-content:center;align-items:center;gap:50%;padding:0}.tier-modal-right-zone{top:22%;right:15%;width:6%;height:60%;flex-direction:column;justify-content:space-around;align-items:center;padding:0}.tier-modal-image-slot{position:relative;flex-shrink:0}.tier-modal-bottom-zone .tier-modal-image-slot{width:48%;aspect-ratio:1}.tier-modal-right-zone .tier-modal-image-slot{width:90%;aspect-ratio:1}.tier-modal-overlay-image{width:100%;height:100%;object-fit:contain;border-radius:6px;background:#0000}.tier-modal-overlay-image.editable{cursor:pointer;position:relative;display:flex;align-items:center;justify-content:center}.tier-modal-overlay-image.editable:hover .edit-overlay{opacity:1}.tier-modal-overlay-image img{width:100%;height:100%;object-fit:contain;border-radius:6px}.tier-modal-upload-placeholder{width:100%;height:100%;background:#00000080;border:2px dashed rgba(255,255,255,.3);border-radius:6px;display:flex;align-items:center;justify-content:center;cursor:pointer;color:#fff9;transition:all .3s ease}.tier-modal-upload-placeholder:hover{background:#000000b3;border-color:var(--primary-color);color:var(--primary-color)}.tier-cell.learn-more label{color:var(--text-secondary);cursor:pointer;-webkit-user-select:none;user-select:none}.tier-cell.learn-more input[type=checkbox]{cursor:pointer;accent-color:var(--primary-color)}.tier-cell.learn-more label:hover{color:var(--text-primary)}@media (max-width: 1200px){.tier-list-table-header,.tier-list-row{grid-template-columns:70px 70px 80px 1fr 100px 160px 100px}.tier-list-table-header.editing,.tier-list-row.editing{grid-template-columns:70px 70px 80px 1fr 100px 160px 100px 50px}.tier-image{width:40px;height:40px}.tier-image.pet{width:30px;height:30px}.tier-upload-placeholder{width:40px;height:40px}.tier-upload-placeholder.pet{width:30px;height:30px}.tier-empty-slot{width:40px;height:40px}.tier-empty-slot.pet{width:30px;height:30px}}@media (max-width: 768px){.tier-list-header{flex-direction:column;gap:1rem;align-items:stretch}.tier-list-table-header,.tier-list-row{grid-template-columns:1fr;grid-template-rows:repeat(8,auto)}.tier-list-table-header.editing,.tier-list-row.editing{grid-template-rows:repeat(9,auto)}.tier-cell{border-right:none;border-bottom:1px solid var(--border-color);min-height:60px;flex-direction:column;gap:.5rem}.tier-cell:last-child{border-bottom:none}.header-cell{border-right:none;border-bottom:1px solid rgba(255,255,255,.2)}.pets-container{flex-direction:row;gap:1rem}.pve-modes-container{flex-direction:row;gap:.5rem;flex-wrap:wrap;justify-content:center}.pve-mode-item{flex-direction:column;text-align:center;min-width:60px}.pve-mode-label{min-width:auto;font-size:.75rem}}.gvg-template{max-width:1400px;margin:0 auto;padding:1rem}.gvg-controls{display:flex;justify-content:space-between;align-items:center;margin-bottom:1.5rem;padding:1rem;background:var(--background-secondary);border-radius:12px;border:1px solid var(--border-color);flex-wrap:wrap;gap:1rem}.gvg-sort-control{display:flex;align-items:center;gap:.75rem;color:var(--text-secondary);font-size:.9rem}.sort-btn{display:flex;align-items:center;gap:.25rem;padding:.5rem .75rem;background:var(--background-tertiary);border:1px solid var(--border-color);border-radius:6px;color:var(--text-secondary);cursor:pointer;transition:all .3s ease;font-size:.85rem}.sort-btn:hover{background:var(--primary-color-light);border-color:var(--primary-color);color:var(--primary-color)}.sort-btn.active{background:var(--primary-color);border-color:var(--primary-color);color:#fff}.add-lineup-btn{display:flex;align-items:center;gap:.5rem;padding:.75rem 1.25rem;background:var(--primary-color);color:#fff;border:none;border-radius:8px;cursor:pointer;font-size:.9rem;font-weight:500;transition:all .3s ease}.add-lineup-btn:hover{background:var(--primary-color-dark, #1976d2);transform:translateY(-1px)}.gvg-lineups-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:1.5rem}.gvg-empty-state{grid-column:1 / -1;text-align:center;padding:3rem;background:var(--background-secondary);border-radius:12px;border:2px dashed var(--border-color);color:var(--text-secondary)}.gvg-empty-state p{margin-bottom:1rem;font-size:1.1rem}.gvg-lineup-card{position:relative;background:linear-gradient(135deg,#1a1a2e,#16213e);border-radius:12px;padding:1.25rem;border:1px solid var(--border-color);transition:all .3s ease}.gvg-lineup-card:hover{transform:translateY(-2px);box-shadow:0 8px 25px #0000004d}.tier-badge{position:absolute;top:-10px;left:20px;padding:.4rem 1rem;border-radius:20px;font-weight:700;font-size:1rem;color:#000;box-shadow:0 4px 10px #0000004d;z-index:1}.tier-select{background:transparent;border:none;font-weight:700;font-size:1rem;color:#000;cursor:pointer;text-align:center;padding:0;outline:none}.tier-select option{background:#333;color:#fff}.tier-label{display:block;text-align:center}.remove-lineup-btn{position:absolute;top:10px;right:10px;background:#ef444433;color:#ef4444;border:1px solid rgba(239,68,68,.4);border-radius:50%;width:32px;height:32px;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .3s ease;z-index:1}.remove-lineup-btn:hover{background:#ef444466;border-color:#ef4444}.lineup-header{display:flex;align-items:center;gap:.5rem;margin-top:.5rem;margin-bottom:1rem;padding-right:40px}.lineup-name{color:#fff;font-size:1.1rem;font-weight:600;margin:0;flex:1}.lineup-name-input{flex:1;background:#ffffff1a;border:1px solid rgba(255,255,255,.2);border-radius:6px;padding:.5rem .75rem;color:#fff;font-size:1rem;font-weight:500}.lineup-name-input:focus{outline:none;border-color:var(--primary-color)}.lineup-name-input::placeholder{color:#ffffff80}.lineup-bg-controls{display:flex;gap:.25rem}.gvg-section-title{color:#fffc;font-size:.85rem;font-weight:600;margin:0 0 .5rem;text-transform:uppercase;letter-spacing:.05em}.gvg-heroes-section{margin-top:.75rem;margin-bottom:1rem}.gvg-hero-grid{display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(2,1fr);gap:.5rem}.gvg-hero-slot{position:relative;aspect-ratio:1;background:#ffffff1a;border-radius:8px;overflow:hidden;border:2px solid transparent;transition:all .3s ease}.gvg-hero-slot.filled{border-color:#4a9eff}.gvg-hero-slot.empty{border:2px dashed rgba(255,255,255,.3);display:flex;align-items:center;justify-content:center}.gvg-hero-slot.hidden-slot{visibility:hidden}.gvg-hero-slot img{width:100%;height:100%;object-fit:cover}.gvg-relics-section{margin-top:.75rem}.gvg-relics-grid{display:flex;flex-wrap:wrap;gap:.5rem}.gvg-relic-slot{position:relative;width:45px;height:45px;border-radius:6px;overflow:hidden;background:#ffffff1a;border:2px solid #ffd700}.gvg-relic-slot img{width:100%;height:100%;object-fit:cover}.upload-placeholder.small{padding:.25rem;font-size:.75rem}.upload-placeholder.small span{display:none}.add-relic.small{width:45px;height:45px;padding:0;display:flex;align-items:center;justify-content:center;border-radius:6px}.add-relic.small span{display:none}@media (max-width: 768px){.gvg-controls{flex-direction:column;align-items:stretch}.gvg-sort-control,.add-lineup-btn{justify-content:center}.gvg-lineups-grid{grid-template-columns:1fr}.gvg-hero-grid{grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(2,1fr)}}@media (max-width: 480px){.gvg-lineup-card{padding:1rem}.tier-badge{padding:.3rem .75rem;font-size:.9rem}.gvg-hero-slot{border-radius:6px}.gvg-hero-grid{grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(2,1fr)}.gvg-relic-slot,.add-relic.small{width:40px;height:40px}}.global-tags-manager{background:#ffffff0d;border:1px solid rgba(255,255,255,.1);border-radius:12px;padding:1rem;margin-bottom:1rem}.global-tags-header{display:flex;align-items:center;gap:.5rem;color:#ffffffe6;font-size:.9rem;font-weight:600;margin-bottom:.75rem}.global-tags-container{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center}.global-tag{display:inline-flex;align-items:center;gap:.25rem;padding:.35rem .75rem;background:var(--primary-color);border-radius:20px;font-size:.8rem;color:#fff;font-weight:500}.global-tag.editable{padding-right:.5rem}.global-tag-remove{display:flex;align-items:center;justify-content:center;background:#fff3;border:none;border-radius:50%;color:#fff;cursor:pointer;padding:2px;margin-left:.25rem;transition:background .2s}.global-tag-remove:hover{background:#ef4444cc}.global-tag-input-wrapper{display:flex;align-items:center;gap:.25rem}.global-tag-input{background:#ffffff1a;border:1px solid rgba(255,255,255,.2);border-radius:20px;padding:.35rem .75rem;color:#fff;font-size:.8rem;width:120px}.global-tag-input:focus{outline:none;border-color:var(--primary-color)}.global-tag-input::placeholder{color:#fff6}.global-tag-add{display:flex;align-items:center;justify-content:center;background:var(--primary-color);border:none;border-radius:50%;color:#fff;cursor:pointer;padding:.35rem;transition:all .2s}.global-tag-add:hover{background:var(--primary-hover);transform:scale(1.1)}.tag-filter-section{background:#ffffff08;border:1px solid rgba(255,255,255,.08);border-radius:12px;padding:1rem;margin-bottom:1rem}.tag-filter-header{display:flex;align-items:center;gap:.5rem;color:#ffffffb3;font-size:.85rem;font-weight:500;margin-bottom:.75rem}.tag-filter-container{display:flex;flex-wrap:wrap;gap:.5rem}.tag-filter-btn{padding:.4rem .9rem;background:#ffffff14;border:1px solid rgba(255,255,255,.15);border-radius:20px;color:#fffc;font-size:.8rem;cursor:pointer;transition:all .2s}.tag-filter-btn:hover{background:#ffffff26;border-color:#ffffff40}.tag-filter-btn.active{background:var(--primary-color);border-color:var(--primary-color);color:#fff;font-weight:500}.lineup-tag-selector{margin-top:.5rem;margin-bottom:1rem;padding-right:40px}.lineup-tag-selector-header{display:flex;align-items:center;gap:.5rem;color:#ffffffb3;font-size:.8rem;font-weight:500;margin-bottom:.5rem}.lineup-tag-options{display:flex;flex-wrap:wrap;gap:.4rem}.lineup-tag-option{display:inline-flex;align-items:center;gap:.25rem;padding:.25rem .6rem;background:#ffffff14;border:1px solid rgba(255,255,255,.15);border-radius:4px;color:#ffffffb3;font-size:.75rem;cursor:pointer;transition:all .2s}.lineup-tag-option:hover{background:#ffffff26;border-color:#ffffff40}.lineup-tag-option.selected{background:var(--primary-color);border-color:var(--primary-color);color:#fff}.no-tags-hint{color:#fff6;font-size:.75rem;font-style:italic}.aube-template{padding:1rem 0}.aube-lineup-card{position:relative;background:linear-gradient(135deg,#1a1a2e,#16213e);border:1px solid var(--border-color);border-radius:12px;padding:1.5rem;transition:all .3s ease}.aube-lineup-card:hover{transform:translateY(-2px);box-shadow:0 8px 25px #0000004d}.lineup-header{display:flex;align-items:center;gap:.5rem;margin-bottom:1rem;padding-right:40px}.lineup-title{color:orange;font-size:1.2rem;font-weight:600;margin:0;flex:1}.lineup-title-input{flex:1;background:#ffffff1a;border:1px solid rgba(255,165,0,.3);border-radius:8px;padding:.6rem .85rem;color:#fff;font-size:1.1rem;font-weight:500}.lineup-title-input:focus{outline:none;border-color:orange}.lineup-title-input::placeholder{color:#fff6}:root{--accent-primary: #6b7280;--accent-secondary: #9ca3af;--text-primary: #ffffff;--text-secondary: #d1d5db;--text-muted: #9ca3af;--bg-primary: #4b5563;--bg-secondary: #374151;--bg-tertiary: #1f2937;--border-color: #6b7280}.gvg-analyzer{padding:2rem;max-width:1200px;margin:0 auto;background:#2d3748!important;color:#fff!important;min-height:100vh}.gvg-analyzer *{color:inherit}.gvg-analyzer h1,.gvg-analyzer h2,.gvg-analyzer h3,.gvg-analyzer h4,.gvg-analyzer h5,.gvg-analyzer h6,.gvg-analyzer p,.gvg-analyzer span,.gvg-analyzer div,.gvg-analyzer label{color:#fff!important}.analyzer-header{text-align:center;margin-bottom:3rem}.analyzer-header h2{color:var(--accent-primary);margin-bottom:1rem;font-size:2.5rem}.analyzer-header p{color:var(--text-secondary);font-size:1.1rem;max-width:600px;margin:0 auto;line-height:1.6}.team-selector{background:#374151!important;padding:2rem;border-radius:12px;margin-bottom:2rem;box-shadow:0 4px 6px #0000004d}.team-selector h3{color:var(--accent-primary);margin-bottom:1.5rem;font-size:1.5rem}.loading-data,.data-info{text-align:center;padding:1rem;margin-bottom:1rem;border-radius:8px;font-weight:500}.loading-data{background:#fbbf2433;border:2px solid #fbbf24;color:#fbbf24}.data-info{background:#1f2937!important;border:2px solid #9ca3af;color:#d1d5db}.hero-selectors{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1rem;margin-bottom:2rem}.hero-selector{display:flex;flex-direction:column;gap:.5rem}.hero-selector label{font-weight:600;color:#fff;font-size:.9rem}.hero-dropdown{padding:.75rem;border:2px solid #6b7280!important;border-radius:8px;background:#4b5563!important;color:#fff!important;font-size:1rem;transition:all .3s ease}.hero-dropdown:focus{border-color:#9ca3af;outline:none;box-shadow:0 0 0 3px #9ca3af33}.hero-dropdown option{background:#4b5563!important;color:#fff!important}.stat-label,.counter-team,.favorite-team,.relic-name{color:#fff!important}.matches,.counter-stats,.favorite-date{color:#d1d5db!important}.analyzer-actions{display:flex;gap:1rem;justify-content:center;margin-top:2rem}.analyze-btn,.reset-btn,.favorite-btn,.debug-btn{padding:1rem 2rem;border:none;border-radius:8px;font-size:1rem;font-weight:600;cursor:pointer;transition:all .3s ease;min-width:180px}.analyze-btn{background:#6b7280;color:#fff}.analyze-btn:hover:not(:disabled){background:#9ca3af;transform:translateY(-2px)}.analyze-btn:disabled,.favorite-btn:disabled{background:#4b5563;cursor:not-allowed;transform:none}.favorite-btn{background:#9ca3af;color:#fff}.favorite-btn:hover:not(:disabled){background:#d1d5db;color:#1f2937;transform:translateY(-2px)}.reset-btn{background:#374151;color:#fff;border:2px solid #6b7280}.reset-btn:hover:not(:disabled){background:#1f2937;transform:translateY(-2px)}.debug-btn{background:#6b7280;color:#fff;min-width:120px;font-size:.9rem}.debug-btn:hover{background:#9ca3af;transform:translateY(-2px)}.analysis-results{animation:fadeIn .5s ease-in;background:transparent!important}@keyframes fadeIn{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.team-stats{background:#374151!important;padding:2rem;border-radius:12px;margin-bottom:2rem;box-shadow:0 4px 6px #0000004d}.team-stats h3{color:var(--accent-primary);margin-bottom:1.5rem;font-size:1.5rem}.stats-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:1rem}.stat-card{background:#4b5563!important;padding:1.5rem;border-radius:8px;border:2px solid #6b7280;display:flex;flex-direction:column;gap:.5rem}.stat-label{font-weight:600;color:var(--text-secondary);font-size:.9rem;text-transform:uppercase;letter-spacing:.5px}.stat-value{font-size:1.2rem;font-weight:700;color:var(--accent-primary);word-break:break-word}.counters-section,.relics-section{background:#374151!important;padding:2rem;border-radius:12px;margin-bottom:2rem;box-shadow:0 4px 6px #0000004d}.counters-section h3,.relics-section h3{color:var(--accent-primary);margin-bottom:1.5rem;font-size:1.5rem}.counters-list{display:flex;flex-direction:column;gap:1rem}.counter-card{background:#4b5563!important;border:2px solid #6b7280;border-radius:8px;padding:1.5rem;display:flex;align-items:center;gap:1rem;transition:all .3s ease}.counter-card:hover{border-color:var(--accent-primary);transform:translateY(-2px);box-shadow:0 8px 16px #0000001a}.counter-rank{background:var(--accent-primary);color:#fff;width:3rem;height:3rem;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:1.2rem;flex-shrink:0}.counter-info{flex:1;display:flex;flex-direction:column;gap:.5rem}.counter-team{font-weight:600;color:var(--text-primary);font-size:1.1rem;line-height:1.4}.counter-stats{display:flex;gap:1rem;flex-wrap:wrap;font-size:.9rem}.win-rate{color:var(--accent-primary);font-weight:600}.matches{color:var(--text-secondary)}.best-relic{color:var(--text-primary);background:var(--bg-tertiary);padding:.2rem .5rem;border-radius:4px;font-size:.8rem}.similarity{color:var(--accent-secondary);font-weight:600;background:#6b728033;padding:.2rem .5rem;border-radius:4px;font-size:.8rem}.similar-search-info{color:var(--text-secondary);font-style:italic;margin-bottom:1rem;padding:1rem;background:#6b728033;border-left:4px solid var(--accent-primary);border-radius:4px}.favorites-section{margin-top:2rem;padding:1.5rem;background:#4b5563!important;border:2px solid #6b7280;border-radius:8px}.favorites-section h4{color:var(--accent-primary);margin-bottom:1rem;font-size:1.2rem}.favorites-list{display:flex;flex-direction:column;gap:.75rem}.favorite-item{display:flex;align-items:center;justify-content:space-between;padding:1rem;background:#374151!important;border:1px solid #6b7280;border-radius:6px;transition:all .3s ease}.favorite-item:hover{border-color:var(--accent-primary)}.favorite-team{font-weight:600;color:var(--text-primary);flex:1}.favorite-date{font-size:.8rem;color:var(--text-secondary);margin:0 1rem}.favorite-actions{display:flex;gap:.5rem}.load-favorite-btn,.remove-favorite-btn{padding:.5rem 1rem;border:none;border-radius:4px;font-size:.9rem;cursor:pointer;transition:all .3s ease}.load-favorite-btn{background:var(--accent-primary);color:#fff}.load-favorite-btn:hover{background:var(--accent-secondary);transform:translateY(-1px)}.remove-favorite-btn{background:#f87171;color:#fff;min-width:2rem}.remove-favorite-btn:hover{background:#fca5a5;transform:translateY(-1px)}.relics-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:1rem}.relic-item{background:#4b5563!important;border:2px solid #6b7280;border-radius:8px;padding:1rem;display:flex;justify-content:space-between;align-items:center;transition:all .3s ease}.relic-item:hover{border-color:var(--accent-primary);transform:translateY(-2px)}.relic-name{font-weight:600;color:var(--text-primary)}.relic-count{background:var(--accent-primary);color:#fff;padding:.3rem .6rem;border-radius:12px;font-size:.8rem;font-weight:600}.no-data{background:#374151!important;padding:3rem 2rem;border-radius:12px;text-align:center;border:2px dashed #6b7280}.no-data p{color:var(--text-secondary);font-size:1.1rem;line-height:1.6;margin-bottom:1rem}.no-data p:last-child{margin-bottom:0}.gvg-template .gvg-info-section{margin-top:3rem;padding:2rem;background:#374151!important;border-radius:12px;box-shadow:0 4px 6px #0000004d}.gvg-template .info-header{text-align:center;margin-bottom:2rem}.gvg-template .info-header h2{color:var(--accent-primary);font-size:2rem;margin-bottom:.5rem}.gvg-template .info-header p{color:var(--text-secondary);font-size:1.1rem}.gvg-template .info-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1.5rem}.gvg-template .info-card{background:#4b5563!important;padding:1.5rem;border-radius:8px;border:2px solid #6b7280;transition:all .3s ease}.gvg-template .info-card:hover{border-color:var(--accent-primary);transform:translateY(-2px);box-shadow:0 8px 16px #0000001a}.gvg-template .info-card h3{color:var(--accent-primary);font-size:1.2rem;margin-bottom:1rem}.gvg-template .info-card ul{list-style:none;padding:0}.gvg-template .info-card li{color:var(--text-primary);margin-bottom:.5rem;padding-left:1.5rem;position:relative}.gvg-template .info-card li:before{content:"•";color:var(--accent-primary);font-weight:700;position:absolute;left:0}@media (max-width: 768px){.gvg-analyzer{padding:1rem}.analyzer-header h2{font-size:2rem}.hero-selectors{grid-template-columns:1fr}.analyzer-actions{flex-direction:column;align-items:center}.analyze-btn,.reset-btn,.favorite-btn{min-width:200px}.favorite-item{flex-direction:column;text-align:center;gap:.5rem}.favorite-actions{width:100%;justify-content:center}.stats-grid{grid-template-columns:1fr}.counter-card{flex-direction:column;text-align:center}.counter-stats{justify-content:center}.gvg-template .info-grid{grid-template-columns:1fr}}.article-detail{max-width:1200px;margin:0 auto;padding:2rem;min-height:100vh}.article-detail.special-page{max-width:none;width:100%;padding:.5rem;margin:0}.article-detail.guild-war-article{max-width:none;width:100%;padding:1rem}.article-header{display:flex;align-items:flex-start;gap:2rem;margin-bottom:2rem;padding-bottom:1.5rem;border-bottom:2px solid #6b7280}.back-btn{display:flex;align-items:center;gap:.5rem;padding:.75rem 1rem;background:#4b5563;border:1px solid #6b7280;border-radius:8px;color:#fff;font-weight:500;cursor:pointer;transition:all .2s}.back-btn:hover{background:#6b7280;color:#fff;transform:translate(-3px)}.article-info{flex:1}.article-title-section{margin-bottom:1rem}.category-badge{display:inline-flex;align-items:center;gap:.5rem;padding:.5rem 1rem;border-radius:20px;color:#fff;font-weight:500;font-size:.875rem;margin-bottom:.75rem}.category-icon{font-size:1rem}.article-info h1{margin:0;font-size:2.5rem;font-weight:700;color:#fff;line-height:1.2}.article-meta{display:flex;flex-wrap:wrap;gap:1.5rem;align-items:center}.meta-item{display:flex;align-items:center;gap:.5rem;color:#d1d5db;font-size:.875rem}.tags{display:flex;gap:.5rem}.tag{padding:.25rem .5rem;background:#f1f5f9;border-radius:4px;font-size:.75rem;color:#475569}.action-buttons{display:flex;gap:.75rem}.edit-btn,.save-btn,.cancel-btn{display:flex;align-items:center;gap:.5rem;padding:.75rem 1rem;border-radius:8px;font-weight:500;cursor:pointer;transition:all .2s}.edit-btn{background:#3b82f6;color:#fff;border:none}.edit-btn:hover{background:#2563eb}.save-btn{background:#10b981;color:#fff;border:none}.save-btn:hover{background:#059669}.cancel-btn{background:#f8fafc;color:#64748b;border:1px solid #e2e8f0}.cancel-btn:hover{background:#f1f5f9}.template-layout{display:grid;gap:2rem;grid-template-columns:1fr;width:100%}.guild-war-article .template-layout{gap:0;padding:0}.section{background:#fafafa;border-radius:12px;padding:1.5rem;border:1px solid #e2e8f0}.section h3{margin:0 0 1rem;color:#1e293b;font-size:1.25rem;font-weight:600}.image-grid-section .image-grid{display:grid;gap:1rem;margin-top:1rem}.image-slot{position:relative;aspect-ratio:1;border:2px dashed #d1d5db;border-radius:8px;display:flex;flex-direction:column;align-items:center;justify-content:center;background:#fff;overflow:hidden}.image-slot img{width:100%;height:100%;object-fit:cover;border-radius:6px}.placeholder-image{display:flex;flex-direction:column;align-items:center;gap:.5rem;color:#9ca3af;text-align:center}.image-caption{position:absolute;bottom:0;left:0;right:0;background:#000000b3;color:#fff;padding:.5rem;margin:0;font-size:.75rem;text-align:center}.empty-slot{aspect-ratio:1;opacity:.3}.image-upload{display:flex;flex-direction:column;gap:.5rem;width:100%;padding:.5rem}.image-upload input{padding:.5rem;border:1px solid #d1d5db;border-radius:4px;font-size:.75rem}.stats-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1rem}.stat-item{display:flex;flex-direction:column;gap:.5rem}.stat-item label{font-weight:500;color:#374151;font-size:.875rem}.stat-item span{padding:.75rem;background:#fff;border:1px solid #e5e7eb;border-radius:6px;color:#1f2937}.stat-item input{padding:.75rem;border:1px solid #d1d5db;border-radius:6px;font-size:.875rem}.description-content{background:#fff;padding:1.5rem;border-radius:8px;border:1px solid #e5e7eb;min-height:120px}.description-section textarea{width:100%;padding:1rem;border:1px solid #d1d5db;border-radius:8px;font-size:.875rem;font-family:inherit;resize:vertical}.custom-content ul{margin:0;padding-left:1.5rem}.custom-content li{margin-bottom:.5rem;color:#374151}.editable-list{display:flex;flex-direction:column;gap:.75rem}.list-item-edit{display:flex;gap:.5rem;align-items:center}.list-item-edit input{flex:1;padding:.5rem;border:1px solid #d1d5db;border-radius:6px}.remove-btn{padding:.5rem;background:#fef2f2;color:#ef4444;border:1px solid #fecaca;border-radius:4px;cursor:pointer}.remove-btn:hover{background:#fee2e2}.add-btn{display:flex;align-items:center;gap:.5rem;padding:.75rem;background:#f0f9ff;color:#0369a1;border:1px solid #bae6fd;border-radius:6px;cursor:pointer;font-weight:500}.add-btn:hover{background:#e0f2fe}.placeholder{color:#9ca3af;font-style:italic;text-align:center;padding:2rem}.error-message{text-align:center;padding:3rem;color:#ef4444;font-size:1.125rem}@media (max-width: 768px){.article-detail{padding:1rem}.article-header{flex-direction:column;gap:1rem}.article-info h1{font-size:2rem}.article-meta{flex-direction:column;align-items:flex-start;gap:.75rem}.stats-grid{grid-template-columns:1fr}.image-grid{grid-template-columns:repeat(auto-fit,minmax(120px,1fr))!important;grid-template-rows:auto!important}}.special-page .article-content{padding:0;background:transparent;max-width:none;width:100%;overflow:visible;margin:0}.special-page .article-description{text-align:center;color:var(--text-secondary);font-size:1.1rem;line-height:1.6;margin:0 0 1rem;padding:1rem;background:var(--bg-secondary);border-radius:8px;border-left:4px solid var(--accent-primary)}.special-page .gvg-analyzer{width:100%!important;max-width:100%!important;margin:0!important;padding:1rem!important;box-sizing:border-box!important}.special-page .gvg-analyzer *{box-sizing:border-box}.special-page .article-header{margin-bottom:1rem;padding-bottom:1rem}.special-page .article-info h1{font-size:2rem}.main-content{flex:1;padding:2rem;background:#2d3748;min-height:100vh;overflow-y:auto;color:#fff}.content-header{display:flex;flex-direction:column;gap:1rem;margin-bottom:2rem;padding-bottom:1rem;border-bottom:1px solid #6b7280}.content-header>div:first-child{display:flex;justify-content:space-between;align-items:center}.category-info{display:flex;align-items:center;gap:1rem}.category-info .category-icon{font-size:2rem;color:#e5e7eb}.category-info h1{margin:0;color:#fff;font-size:2rem;font-weight:700}.category-info p{margin:0;color:#d1d5db;font-size:.875rem}.category-description-container{width:100%;margin-top:.5rem}.description-view-mode{display:flex;align-items:flex-start;gap:1rem;padding:1rem;background:#4b556380;border-radius:8px;border-left:3px solid #6b7280}.category-description-text{flex:1;margin:0;color:#d1d5db;font-size:.95rem;line-height:1.6;font-style:italic}.edit-description-button{display:flex;align-items:center;justify-content:center;padding:.5rem;background:transparent;color:#9ca3af;border:1px solid #6b7280;border-radius:6px;cursor:pointer;transition:all .2s ease;flex-shrink:0}.edit-description-button:hover{background:#6b7280;color:#fff;border-color:#9ca3af}.description-edit-mode{display:flex;flex-direction:column;gap:.75rem;padding:1rem;background:#4b556380;border-radius:8px;border-left:3px solid #3b82f6}.description-label{color:#9ca3af;font-size:.875rem;font-weight:500;margin:0}.description-input{width:100%;padding:.75rem;background:#374151;color:#fff;border:1px solid #6b7280;border-radius:6px;font-size:.95rem;resize:vertical;font-family:inherit;line-height:1.6}.description-input:focus{outline:none;border-color:#3b82f6;box-shadow:0 0 0 3px #3b82f633}.description-actions{display:flex;gap:.5rem}.save-description-button,.cancel-description-button,.reset-description-button{display:flex;align-items:center;justify-content:center;padding:.5rem 1rem;border:none;border-radius:6px;cursor:pointer;transition:all .2s ease;font-weight:500;color:#fff}.save-description-button{background:#10b981}.save-description-button:hover{background:#059669;transform:translateY(-1px)}.cancel-description-button{background:#ef4444}.cancel-description-button:hover{background:#dc2626;transform:translateY(-1px)}.reset-description-button{background:#f59e0b;margin-left:auto}.reset-description-button:hover{background:#d97706;transform:translateY(-1px)}.add-button{display:flex;align-items:center;gap:.5rem;padding:.75rem 1.5rem;background:#6b7280;color:#fff;border:none;border-radius:8px;font-weight:500;cursor:pointer;transition:all .2s ease}.add-button:hover{background:#9ca3af;transform:translateY(-1px);box-shadow:0 4px 12px #6b72804d}.article-form-overlay{position:fixed;inset:0;background:#00000080;display:flex;justify-content:center;align-items:center;z-index:1000;padding:2rem}.article-form{background:#4b5563;border-radius:12px;padding:2rem;width:100%;max-width:600px;max-height:90vh;overflow-y:auto;box-shadow:0 20px 40px #0006;color:#fff}.form-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:2rem;padding-bottom:1rem;border-bottom:1px solid #6b7280}.form-header h3{margin:0;color:#fff;font-size:1.5rem;font-weight:600}.close-button{background:none;border:none;color:#d1d5db;cursor:pointer;padding:.5rem;border-radius:6px;transition:all .2s ease}.close-button:hover{background:#6b7280;color:#fff}.form-group{margin-bottom:1.5rem}.form-group label{display:block;margin-bottom:.5rem;color:#fff;font-weight:500}.form-group input,.form-group select,.form-group textarea{width:100%;padding:.75rem;border:1px solid #6b7280;border-radius:8px;font-size:1rem;transition:border-color .2s ease;font-family:inherit;background:#374151;color:#fff}.form-group input:focus,.form-group select:focus,.form-group textarea:focus{outline:none;border-color:#9ca3af;box-shadow:0 0 0 3px #9ca3af33}.form-group textarea{resize:vertical;min-height:120px}.form-actions{display:flex;justify-content:flex-end;gap:1rem;margin-top:2rem;padding-top:1rem;border-top:1px solid #6b7280}.cancel-button{padding:.75rem 1.5rem;background:#374151;color:#d1d5db;border:1px solid #6b7280;border-radius:8px;cursor:pointer;font-weight:500;transition:all .2s ease}.cancel-button:hover{background:#1f2937;border-color:#9ca3af}.save-button{display:flex;align-items:center;gap:.5rem;padding:.75rem 1.5rem;background:#6b7280;color:#fff;border:none;border-radius:8px;cursor:pointer;font-weight:500;transition:all .2s ease}.save-button:hover{background:#9ca3af}.category-select{position:relative;width:100%}.category-select-trigger{display:flex;align-items:center;justify-content:space-between;width:100%;padding:.75rem;border:1px solid #6b7280;border-radius:8px;background:#374151;color:#fff;cursor:pointer;transition:border-color .2s ease}.category-select-trigger:hover{border-color:#9ca3af}.category-select-value{display:flex;align-items:center;gap:.75rem}.category-select-value .category-icon{font-size:1.25rem}.category-select-value .category-icon-image{width:20px;height:20px;object-fit:contain}.category-select-value .category-name{font-size:1rem}.chevron{transition:transform .2s ease}.chevron.open{transform:rotate(180deg)}.category-select-dropdown{position:absolute;top:100%;left:0;right:0;background:#374151;border:1px solid #6b7280;border-top:none;border-radius:0 0 8px 8px;max-height:200px;overflow-y:auto;z-index:1000;box-shadow:0 4px 6px #0000004d}.category-option{display:flex;align-items:center;gap:.75rem;padding:.75rem;cursor:pointer;transition:background-color .2s ease}.category-option:hover{background:#4b5563}.category-option.selected{background:#6b7280}.category-option .category-icon{font-size:1.25rem}.category-option .category-icon-image{width:20px;height:20px;object-fit:contain}.category-option .category-name{font-size:1rem}.articles-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(350px,1fr));gap:1.5rem}.article-card{background:#4b5563;border-radius:12px;padding:1.5rem;box-shadow:0 1px 3px #0000004d;transition:all .2s ease;border:1px solid #6b7280;cursor:pointer;position:relative;color:#fff;display:flex;flex-direction:column}.hot-article{border:2px solid #f59e0b;background:linear-gradient(135deg,#4b5563,#5a4a3a);box-shadow:0 0 20px #f59e0b4d}.hot-article:hover{box-shadow:0 8px 25px #f59e0b80;border-color:#fbbf24}.hot-badge{position:absolute;top:-10px;right:20px;background:linear-gradient(135deg,#f59e0b,#ef4444);color:#fff;padding:.4rem .8rem;border-radius:20px;font-size:.75rem;font-weight:700;display:flex;align-items:center;gap:.3rem;box-shadow:0 4px 10px #ef444466;animation:pulseHot 2s ease-in-out infinite;z-index:1}.hot-flame{font-size:1rem;animation:flicker 1.5s ease-in-out infinite}.hot-text{letter-spacing:.05em;text-transform:uppercase}@keyframes pulseHot{0%,to{transform:scale(1);box-shadow:0 4px 10px #ef444466}50%{transform:scale(1.05);box-shadow:0 6px 15px #ef444499}}@keyframes flicker{0%,to{opacity:1}50%{opacity:.8}}.form-group-checkbox{background:#4b55634d;border-radius:8px;padding:1rem;border-left:3px solid #f59e0b}.checkbox-label{display:flex;align-items:center;gap:.75rem;cursor:pointer;margin:0;-webkit-user-select:none;user-select:none}.hot-checkbox{width:20px;height:20px;cursor:pointer;accent-color:#f59e0b}.checkbox-text{color:#d1d5db;font-weight:500;font-size:.95rem}.checkbox-label:hover .checkbox-text{color:#fff}.card-image-picker{display:flex;align-items:center;gap:1rem}.card-image-preview{position:relative;width:120px;height:80px;border-radius:8px;overflow:hidden;border:2px solid #6b7280}.card-image-preview img{width:100%;height:100%;object-fit:cover}.remove-card-image{position:absolute;top:4px;right:4px;background:#ef4444e6;color:#fff;border:none;border-radius:50%;width:24px;height:24px;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .3s ease}.remove-card-image:hover{background:#ef4444;transform:scale(1.1)}.card-image-upload-placeholder{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.5rem;width:120px;height:80px;border:2px dashed #6b7280;border-radius:8px;background:#4b55634d;color:#9ca3af;cursor:pointer;transition:all .3s ease}.card-image-upload-placeholder:hover{border-color:#3b82f6;color:#3b82f6;background:#3b82f61a}.card-image-upload-placeholder span{font-size:.75rem}.article-card-image{width:100%;height:150px;border-radius:8px;overflow:hidden;margin-bottom:1rem}.article-card-image img{width:100%;height:100%;object-fit:cover;transition:transform .3s ease}.article-card:hover .article-card-image img{transform:scale(1.05)}.article-card:hover{box-shadow:0 8px 25px #0006;transform:translateY(-2px);border-color:#9ca3af}.article-card:after{content:"👁️ Voir les détails";position:absolute;top:1rem;right:1rem;background:#6b7280e6;color:#fff;padding:.25rem .5rem;border-radius:4px;font-size:.75rem;opacity:0;transition:opacity .2s;pointer-events:none}.article-card:hover:after{opacity:1}.article-header{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:1rem}.category-badge{display:inline-flex;align-items:center;gap:.25rem;padding:.25rem .75rem;color:#fff;border-radius:20px;font-size:.75rem;font-weight:500}.category-icon-image{width:32px;height:32px;object-fit:contain;border-radius:4px}.article-actions{display:flex;gap:.5rem}.edit-button,.delete-button{padding:.5rem;border:none;border-radius:6px;cursor:pointer;transition:all .2s ease}.edit-button{background:#374151;color:#d1d5db}.edit-button:hover{background:#1f2937;color:#fff}.delete-button{background:#374151;color:#f87171}.delete-button:hover{background:#1f2937;color:#fca5a5}.article-title{margin:0 0 1rem;color:#fff;font-size:1.25rem;font-weight:600;line-height:1.4}.article-content{color:#d1d5db;line-height:1.6;margin-bottom:1.5rem;display:-webkit-box;-webkit-line-clamp:3;line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}.article-footer{display:flex;justify-content:space-between;align-items:center;padding-top:1rem;border-top:1px solid #6b7280;font-size:.875rem;color:#d1d5db;margin-top:auto}.article-meta{display:flex;flex-direction:column;gap:.25rem;align-items:flex-end}.article-tags{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap}.tag{background:#6b7280;color:#fff;padding:.125rem .5rem;border-radius:12px;font-size:.75rem}.article-date{display:flex;align-items:center;gap:.25rem;flex-shrink:0}.article-views{display:flex;align-items:center;gap:.25rem;font-size:.75rem;color:#d1d5db}.article-card{cursor:pointer;-webkit-user-select:none;user-select:none}.empty-state{text-align:center;padding:4rem 2rem;color:#d1d5db}.empty-icon{font-size:4rem;margin-bottom:1rem;color:#9ca3af}.empty-state h3{margin:0 0 .5rem;color:#fff;font-size:1.5rem}.empty-state p{margin-bottom:2rem;font-size:1.1rem}.bdg-lineup-preview{margin:.75rem 0}.lineup-heroes{display:flex;gap:.5rem;justify-content:flex-start;align-items:center;flex-wrap:wrap}.hero-preview{display:flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:50%;overflow:hidden;border:2px solid #4a9eff;background:#ffffff1a;transition:transform .2s ease}.hero-preview:hover{transform:scale(1.1)}.hero-preview.empty{border:2px dashed rgba(255,255,255,.3);background:transparent}.hero-image-preview{width:100%;height:100%;object-fit:cover;border-radius:50%}.hero-placeholder{color:#9ca3af;font-size:.875rem;font-weight:500}@media (max-width: 768px){.main-content{padding:1rem}.content-header{flex-direction:column;gap:1rem;align-items:flex-start}.content-header>div:first-child{flex-direction:column;width:100%;gap:1rem}.header-actions{width:100%}.description-view-mode{flex-direction:column;gap:.75rem}.edit-description-button{align-self:flex-end}.description-actions{flex-wrap:wrap}.articles-grid{grid-template-columns:1fr}.article-form-overlay{padding:1rem}.article-form{padding:1.5rem}.article-footer{flex-direction:column;gap:.75rem;align-items:flex-start}.hero-preview{width:35px;height:35px}.lineup-heroes{gap:.375rem}}.header-actions{display:flex;align-items:center;gap:1rem}.manage-subcategories-button{display:flex;align-items:center;gap:.5rem;padding:.75rem 1rem;background:#4b5563;color:#fff;border:none;border-radius:.5rem;cursor:pointer;transition:all .2s;font-size:.875rem}.manage-subcategories-button:hover{background:#374151;transform:translateY(-1px)}.subcategories-bar{display:flex;gap:.5rem;margin-bottom:1.5rem;padding:1rem;background:#374151;border-radius:.5rem;border:1px solid #4b5563;flex-wrap:wrap}.subcategory-button{padding:.5rem 1rem;background:#4b5563;color:#d1d5db;border:none;border-left:3px solid #f59e0b;border-radius:.375rem;cursor:pointer;transition:all .2s;font-size:.875rem;position:relative;display:flex;align-items:center;gap:.25rem}.subcategory-button:hover{background:#6b7280;color:#fff}.subcategory-button.active{background:#3b82f6;color:#fff}.subcategory-manager-overlay{position:fixed;inset:0;background:#000000b3;display:flex;align-items:center;justify-content:center;z-index:1000;padding:1rem}.subcategory-manager{background:#374151;border-radius:.75rem;border:1px solid #4b5563;width:100%;max-width:600px;max-height:80vh;overflow-y:auto;color:#fff}.manager-header{display:flex;justify-content:space-between;align-items:center;padding:1.5rem;border-bottom:1px solid #4b5563}.manager-header h3{margin:0;color:#fff;font-size:1.25rem}.manager-content{padding:1.5rem}.subcategory-form{margin-bottom:2rem;padding-bottom:2rem;border-bottom:1px solid #4b5563}.tags-selection{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:.5rem}.tag-button{padding:.375rem .75rem;background:#4b5563;color:#d1d5db;border:1px solid #6b7280;border-radius:.375rem;cursor:pointer;transition:all .2s;font-size:.875rem}.tag-button:hover{background:#6b7280;color:#fff}.tag-button.selected{background:#3b82f6;color:#fff;border-color:#3b82f6}.create-button{display:flex;align-items:center;gap:.5rem;padding:.75rem 1.5rem;background:#10b981;color:#fff;border:none;border-radius:.5rem;cursor:pointer;transition:all .2s;margin-top:1rem}.create-button:hover:not(:disabled){background:#059669}.create-button:disabled{background:#6b7280;cursor:not-allowed}.existing-subcategories h4{margin:0 0 1rem;color:#fff;font-size:1.125rem}.no-subcategories{color:#9ca3af;font-style:italic;margin:0}.subcategories-list{display:flex;flex-direction:column;gap:.75rem}.subcategory-item{display:flex;justify-content:space-between;align-items:center;padding:1rem;background:#4b5563;border-radius:.5rem;border:1px solid #6b7280}.subcategory-info strong{color:#fff;font-size:1rem;margin-bottom:.5rem;display:block}.subcategory-tags{display:flex;gap:.25rem;flex-wrap:wrap}.subcategory-tags .tag{padding:.25rem .5rem;background:#6b7280;color:#e5e7eb;border-radius:.25rem;font-size:.75rem}.delete-subcategory-button{padding:.5rem;background:#ef4444;color:#fff;border:none;border-radius:.375rem;cursor:pointer;transition:all .2s;display:flex;align-items:center;justify-content:center}.delete-subcategory-button:hover{background:#dc2626}@media (max-width: 768px){.subcategories-bar{gap:.25rem}.subcategory-button{padding:.375rem .75rem;font-size:.8125rem}.header-actions{flex-direction:column;gap:.5rem;align-items:stretch}.manage-subcategories-button,.add-button{width:100%;justify-content:center}}.dashboard{padding:2rem;background:#2d3748;min-height:100vh;color:#fff}.dashboard-header{display:flex;align-items:center;gap:.75rem;margin-bottom:2rem}.dashboard-header svg{color:#60a5fa}.dashboard-header h1{margin:0;font-size:1.75rem;font-weight:700;color:#fff}.stats-row{display:flex;gap:1.5rem;margin-bottom:2rem}.stat-card{display:flex;align-items:center;gap:1rem;background:#4b5563;border-radius:12px;padding:1.25rem 1.5rem;border:1px solid #6b7280;flex:1}.stat-card svg{color:#60a5fa}.stat-content{display:flex;flex-direction:column}.stat-value{font-size:1.75rem;font-weight:700;color:#fff}.stat-label{font-size:.875rem;color:#9ca3af}.dashboard-content{display:flex;gap:1.5rem}.dashboard-section{background:#4b5563;border-radius:12px;padding:1.5rem;border:1px solid #6b7280;flex:1}.dashboard-section h2{display:flex;align-items:center;gap:.5rem;margin:0 0 1.25rem;font-size:1.125rem;font-weight:600;color:#fff}.dashboard-section h2 svg{color:#60a5fa}.category-bars{display:flex;flex-direction:column;gap:.875rem}.category-bar-item{display:flex;flex-direction:column;gap:.375rem}.category-bar-header{display:flex;justify-content:space-between;align-items:center}.category-bar-name{font-size:.875rem;color:#e5e7eb}.category-bar-count{font-size:.75rem;color:#9ca3af;font-weight:600}.category-bar-track{height:8px;background:#374151;border-radius:4px;overflow:hidden}.category-bar-fill{height:100%;border-radius:4px;transition:width .3s ease;min-width:4px}.most-viewed-list{display:flex;flex-direction:column;gap:.75rem}.most-viewed-item{display:flex;align-items:center;gap:.75rem;padding:.75rem;background:#374151;border-radius:8px;border:1px solid #4b5563;transition:background-color .2s}.most-viewed-item:hover{background:#3b4252}.rank{font-size:.875rem;font-weight:700;color:#fbbf24;min-width:28px}.article-info{flex:1;display:flex;flex-direction:column;gap:.125rem}.article-title{font-weight:500;color:#fff;font-size:.875rem}.article-category{font-size:.75rem;color:#9ca3af}.view-count{display:flex;align-items:center;gap:.25rem;font-size:.8125rem;font-weight:600;color:#60a5fa}.empty-message{text-align:center;color:#9ca3af;font-style:italic;padding:1.5rem 1rem;margin:0}@media (max-width: 768px){.dashboard{padding:1rem}.stats-row{flex-direction:column;gap:1rem}.stat-card{padding:1rem}.stat-value{font-size:1.5rem}.dashboard-content{flex-direction:column}.dashboard-section{padding:1rem}}.gallery-container{padding:2rem;max-width:1400px;margin:0 auto}.gallery-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:2rem;flex-wrap:wrap;gap:1rem}.gallery-title h1{margin:0;color:var(--text-primary);font-size:2rem;font-weight:600}.folder-breadcrumb{display:flex;align-items:center;gap:1rem}.back-button{display:flex;align-items:center;padding:.5rem;background:var(--surface-secondary);border:1px solid var(--border-color);border-radius:8px;cursor:pointer;transition:all .2s ease}.back-button:hover{background:var(--surface-hover);transform:translate(-2px)}.gallery-actions{display:flex;gap:1rem;flex-wrap:wrap}.action-button{display:flex;align-items:center;gap:.5rem;padding:.75rem 1.5rem;border:none;border-radius:8px;font-size:.9rem;font-weight:500;cursor:pointer;transition:all .2s ease;background:var(--surface-secondary);color:var(--text-primary);border:1px solid var(--border-color)}.action-button:hover{background:var(--surface-hover);transform:translateY(-1px)}.action-button.primary{background:var(--accent-color, #3B82F6);color:#fff;border-color:var(--accent-color, #3B82F6)}.action-button.primary:hover{background:var(--accent-hover, #2563EB)}.action-button.danger{background:#ef4444;color:#fff;border-color:#ef4444}.action-button.danger:hover{background:#dc2626}.action-button.warning{background:#f59e0b;color:#fff}.action-button.warning:hover{background:#d97706}.action-button.info{background:#3b82f6;color:#fff;border-color:#3b82f6}.action-button.info:hover{background:#2563eb}.gallery-toolbar{display:flex;justify-content:space-between;align-items:center;margin-bottom:2rem;padding:1rem;background:var(--surface-secondary);border-radius:12px;border:1px solid var(--border-color);flex-wrap:wrap;gap:1rem}.search-container{display:flex;align-items:center;gap:.75rem;background:var(--surface-primary);border:1px solid var(--border-color);border-radius:8px;padding:.75rem 1rem;flex:1;min-width:250px;max-width:400px}.search-container svg{color:var(--text-muted)}.search-container input{border:none;outline:none;background:transparent;color:var(--text-primary);font-size:.9rem;flex:1}.search-container input::placeholder{color:var(--text-muted)}.view-controls{display:flex;background:var(--surface-primary);border:1px solid var(--border-color);border-radius:8px;overflow:hidden}.view-button{display:flex;align-items:center;padding:.75rem;border:none;background:transparent;color:var(--text-muted);cursor:pointer;transition:all .2s ease}.view-button:hover{background:var(--surface-hover);color:var(--text-primary)}.view-button.active{background:var(--accent-color, #3B82F6);color:#fff}.gallery-content{position:relative;min-height:400px}.gallery-content.drag-over{pointer-events:none}.folders-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:1.5rem}.folder-card{display:flex;flex-direction:column;align-items:center;padding:2rem 1.5rem;background:var(--surface-secondary);border:1px solid var(--border-color);border-radius:12px;cursor:pointer;transition:all .2s ease;text-align:center}.folder-card:hover{transform:translateY(-4px);box-shadow:0 8px 25px #0000001a;border-color:var(--folder-color)}.folder-icon{color:var(--folder-color);margin-bottom:1rem}.folder-info h3{margin:0 0 .5rem;color:var(--text-primary);font-size:1.1rem;font-weight:600;text-transform:capitalize}.folder-info p{margin:0;color:var(--text-muted);font-size:.9rem}.images-container.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:1.5rem}.images-container.list{display:flex;flex-direction:column;gap:1rem}.image-card{position:relative;background:var(--surface-secondary);border:1px solid var(--border-color);border-radius:12px;overflow:hidden;cursor:pointer;transition:all .2s ease}.image-card:hover{transform:translateY(-2px);box-shadow:0 8px 25px #0000001a}.image-card.selected{border-color:var(--accent-color, #3B82F6);box-shadow:0 0 0 2px #3b82f633}.grid .image-card .image-preview{aspect-ratio:1;overflow:hidden}.list .image-card{display:flex;align-items:center;padding:1rem;gap:1rem}.list .image-card .image-preview{width:80px;height:80px;flex-shrink:0}.image-preview{position:relative;background:var(--surface-primary);display:flex;align-items:center;justify-content:center}.image-preview img{width:100%;height:100%;object-fit:cover}.image-placeholder{color:var(--text-muted)}.image-info{padding:1rem}.list .image-card .image-info{padding:0;flex:1}.image-info h4{margin:0 0 .5rem;color:var(--text-primary);font-size:.9rem;font-weight:500;word-break:break-word}.image-details{display:flex;flex-direction:column;gap:.5rem}.image-details span{color:var(--text-muted);font-size:.8rem}.image-tags{display:flex;flex-wrap:wrap;gap:.25rem}.tag{padding:.25rem .5rem;background:var(--accent-color, #3B82F6);color:#fff;border-radius:4px;font-size:.7rem;font-weight:500}.selection-indicator{position:absolute;top:.5rem;right:.5rem;width:24px;height:24px;background:var(--accent-color, #3B82F6);color:#fff;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:.8rem;font-weight:700}.empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:4rem 2rem;text-align:center;color:var(--text-muted)}.empty-state svg{margin-bottom:1rem;opacity:.5}.empty-state h3{margin:0 0 .5rem;color:var(--text-secondary);font-size:1.2rem}.empty-state p{margin:0;font-size:.9rem;max-width:400px;line-height:1.5}.drag-overlay{position:absolute;inset:0;background:#3b82f61a;border:2px dashed var(--accent-color, #3B82F6);border-radius:12px;display:flex;flex-direction:column;align-items:center;justify-content:center;z-index:10;color:var(--accent-color, #3B82F6)}.drag-overlay h3{margin:1rem 0 0;font-size:1.5rem;font-weight:600}.modal-overlay{position:fixed;inset:0;background:#00000080;display:flex;align-items:center;justify-content:center;z-index:1000;padding:2rem}.modal{background:var(--surface-primary);border-radius:12px;padding:2rem;width:100%;max-width:500px;border:1px solid var(--border-color)}.modal h3{margin:0 0 1.5rem;color:var(--text-primary);font-size:1.3rem;font-weight:600}.modal input{width:100%;padding:.75rem;border:1px solid var(--border-color);border-radius:8px;background:var(--surface-secondary);color:var(--text-primary);font-size:.9rem;margin-bottom:1.5rem}.modal input:focus{outline:none;border-color:var(--accent-color, #3B82F6);box-shadow:0 0 0 2px #3b82f633}.modal-actions{display:flex;justify-content:flex-end;gap:1rem}.modal-actions button{padding:.75rem 1.5rem;border:1px solid var(--border-color);border-radius:8px;background:var(--surface-secondary);color:var(--text-primary);cursor:pointer;font-size:.9rem;font-weight:500;transition:all .2s ease}.modal-actions button:hover{background:var(--surface-hover)}.modal-actions button.primary{background:var(--accent-color, #3B82F6);color:#fff;border-color:var(--accent-color, #3B82F6)}.modal-actions button.primary:hover{background:var(--accent-hover, #2563EB)}.upload-area{text-align:center;padding:3rem 2rem;border:2px dashed var(--border-color);border-radius:8px;margin-bottom:1.5rem;background:var(--surface-secondary)}.upload-area button{display:flex;flex-direction:column;align-items:center;gap:1rem;padding:1.5rem;border:none;background:var(--accent-color, #3B82F6);color:#fff;border-radius:8px;cursor:pointer;font-size:1rem;font-weight:500;transition:all .2s ease;margin:0 auto 1rem}.upload-area button:hover{background:var(--accent-hover, #2563EB);transform:translateY(-1px)}.upload-area p{margin:0;color:var(--text-muted);font-size:.9rem}.folder-info{margin-top:1rem;padding:.75rem;background:var(--surface-primary);border-radius:6px;color:var(--text-secondary);font-size:.8rem}.storage-warning{background:#fef3cd;border:1px solid #fbbf24;border-radius:8px;padding:1rem;margin-bottom:1rem;color:#92400e}.storage-warning strong{display:block;margin-bottom:.5rem;color:#d97706}.storage-warning p{margin:0 0 1rem;font-size:.9rem}.clear-storage-btn{background:#dc2626;color:#fff;border:none;padding:.5rem 1rem;border-radius:6px;cursor:pointer;font-size:.9rem;transition:background .2s ease}.clear-storage-btn:hover{background:#b91c1c}@media (max-width: 768px){.gallery-container{padding:1rem}.gallery-header{flex-direction:column;align-items:stretch;gap:1rem}.gallery-actions{justify-content:center}.gallery-toolbar{flex-direction:column;gap:1rem}.search-container{max-width:none}.folders-grid,.images-container.grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:1rem}.list .image-card{flex-direction:column;text-align:center}.list .image-card .image-preview{width:100%;height:150px}.modal{margin:1rem;padding:1.5rem}}.installation-status-modal{max-width:800px;max-height:80vh;overflow-y:auto}.installation-status-modal .modal-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:1rem;padding-bottom:1rem;border-bottom:1px solid var(--border-color)}.installation-status-modal .modal-header h3{margin:0;font-size:1.25rem;font-weight:600;color:var(--text-primary)}.installation-status-modal .close-btn{background:none;border:none;font-size:1.5rem;cursor:pointer;color:var(--text-muted);padding:.25rem .5rem;border-radius:4px;transition:all .2s ease}.installation-status-modal .close-btn:hover{background:var(--surface-secondary);color:var(--text-primary)}.installation-status-modal .modal-body{padding:0}@keyframes slideIn{0%{transform:translate(100%);opacity:0}to{transform:translate(0);opacity:1}}.upload-success-notification{animation:slideIn .3s ease-out}.login-modal-overlay{position:fixed;inset:0;background:#000000b3;display:flex;align-items:center;justify-content:center;z-index:1000;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);animation:fadeIn .2s ease-out}.login-modal{background:var(--background-primary, #ffffff);border-radius:16px;box-shadow:0 20px 40px #0000004d;width:420px;height:380px;max-width:90vw;max-height:90vh;overflow:hidden;animation:slideIn .3s ease-out;border:1px solid var(--border-color, #e2e8f0);display:flex;flex-direction:column}.login-modal-header{display:flex;align-items:center;justify-content:space-between;padding:1.5rem 2rem;background:var(--background-secondary, #f8fafc);border-bottom:1px solid var(--border-color, #e2e8f0)}.login-title{display:flex;align-items:center;gap:.75rem;color:var(--text-primary, #1e293b)}.login-title h2{margin:0;font-size:1.25rem;font-weight:600}.close-button{background:none;border:none;color:var(--text-secondary, #64748b);cursor:pointer;padding:.5rem;border-radius:8px;transition:all .2s ease;display:flex;align-items:center;justify-content:center}.close-button:hover{background:var(--background-tertiary, #f1f5f9);color:var(--text-primary, #1e293b)}.close-button:disabled{opacity:.5;cursor:not-allowed}.login-modal-content{padding:2rem;flex:1;display:flex;flex-direction:column;overflow:hidden}.login-description{margin:0 0 1.5rem;color:var(--text-secondary, #64748b);font-size:.95rem;line-height:1.5;text-align:center}.password-input-container{position:relative;margin-bottom:1rem}.password-input{width:100%;padding:.875rem 3rem .875rem 1rem;border:2px solid var(--border-color, #e2e8f0);border-radius:12px;background:var(--background-primary, #ffffff);color:var(--text-primary, #1e293b);font-size:1rem;transition:all .2s ease;box-sizing:border-box}.password-input:focus{outline:none;border-color:var(--primary-color, #3b82f6);box-shadow:0 0 0 3px #3b82f61a}.password-input.error{border-color:#ef4444;box-shadow:0 0 0 3px #ef44441a}.password-input:disabled{opacity:.6;cursor:not-allowed}.password-toggle{position:absolute;right:1rem;top:50%;transform:translateY(-50%);background:none;border:none;color:var(--text-secondary, #64748b);cursor:pointer;padding:.25rem;border-radius:4px;transition:all .2s ease;display:flex;align-items:center;justify-content:center}.password-toggle:hover{color:var(--text-primary, #1e293b)}.password-toggle:disabled{opacity:.5;cursor:not-allowed}.login-form{display:flex;flex-direction:column;flex:1;min-height:0}.form-content{flex:1;display:flex;flex-direction:column;min-height:0}.error-message-container{min-height:40px;margin-bottom:1rem;display:flex;align-items:flex-start}.error-message{padding:.75rem 1rem;background:#ef44441a;border:1px solid rgba(239,68,68,.2);border-radius:8px;color:#dc2626;font-size:.9rem;display:flex;align-items:center;gap:.5rem;width:100%}.login-actions{display:grid;grid-template-columns:1fr 1fr;gap:1rem;width:100%;margin-top:auto;padding-top:1rem;flex-shrink:0}.cancel-button{padding:.75rem 1.5rem;background:var(--background-tertiary, #f1f5f9);color:var(--text-secondary, #64748b);border:1px solid var(--border-color, #e2e8f0);border-radius:12px;font-size:.95rem;font-weight:500;cursor:pointer;transition:all .2s ease;height:44px;line-height:1.2;box-sizing:border-box}.cancel-button:hover{background:var(--background-secondary, #f8fafc);color:var(--text-primary, #1e293b)}.cancel-button:disabled{opacity:.6;cursor:not-allowed}.login-button{padding:.75rem 1.5rem;background:var(--primary-color, #3b82f6);color:#fff;border:none;border-radius:12px;font-size:.95rem;font-weight:600;cursor:pointer;transition:background-color .2s ease,box-shadow .2s ease;position:relative;height:44px;line-height:1.2;box-sizing:border-box}.login-button:hover:not(:disabled){background:var(--primary-color-dark, #2563eb);transform:translateY(-1px);box-shadow:0 4px 12px #3b82f64d}.login-button:disabled{opacity:.6;cursor:not-allowed;transform:none}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes slideIn{0%{opacity:0;transform:translateY(-20px) scale(.95)}to{opacity:1;transform:translateY(0) scale(1)}}@media (prefers-color-scheme: dark){.login-modal{--background-primary: #1e293b;--background-secondary: #334155;--background-tertiary: #475569;--text-primary: #f8fafc;--text-secondary: #cbd5e1;--border-color: #475569}}@media (max-width: 480px){.login-modal{width:95%;margin:1rem}.login-modal-header{padding:1rem 1.5rem}.login-modal-content{padding:1.5rem}.login-actions{flex-direction:column}.login-title h2{font-size:1.1rem}}.toast-container{position:fixed;top:20px;right:20px;z-index:1001;display:flex;flex-direction:column;gap:12px;pointer-events:none}.toast{pointer-events:auto;background:var(--background-primary, #ffffff);border-radius:12px;box-shadow:0 8px 32px #0003;border:1px solid var(--border-color, #e2e8f0);min-width:320px;max-width:400px;animation:slideInToast .3s ease-out;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.toast-content{display:flex;align-items:center;gap:12px;padding:16px 20px}.toast-icon{display:flex;align-items:center;justify-content:center;flex-shrink:0}.toast-message{flex:1;font-size:.95rem;font-weight:500;color:var(--text-primary, #1e293b);line-height:1.4}.toast-close{background:none;border:none;color:var(--text-secondary, #64748b);cursor:pointer;padding:4px;border-radius:6px;transition:all .2s ease;display:flex;align-items:center;justify-content:center;flex-shrink:0}.toast-close:hover{background:var(--background-tertiary, #f1f5f9);color:var(--text-primary, #1e293b)}.toast-success{border-left:4px solid #10b981}.toast-success .toast-icon{color:#10b981}.toast-error{border-left:4px solid #ef4444}.toast-error .toast-icon{color:#ef4444}.toast-info{border-left:4px solid #3b82f6}.toast-info .toast-icon{color:#3b82f6}@keyframes slideInToast{0%{opacity:0;transform:translate(100%) scale(.95)}to{opacity:1;transform:translate(0) scale(1)}}@media (prefers-color-scheme: dark){.toast{--background-primary: #1e293b;--background-tertiary: #475569;--text-primary: #f8fafc;--text-secondary: #cbd5e1;--border-color: #475569}}@media (max-width: 480px){.toast-container{top:10px;right:10px;left:10px}.toast{min-width:unset;max-width:100%}}*{margin:0;padding:0;box-sizing:border-box}#root{width:100%;min-height:100vh}.app{display:flex;flex-direction:column;min-height:100vh;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;background:#2d3748;color:#fff}.app-content{display:flex;flex:1;height:calc(100vh - 80px)}.loading{display:flex;flex-direction:column;justify-content:center;align-items:center;height:100vh;background:linear-gradient(135deg,#1f2937,#374151);color:#fff;font-family:system-ui,-apple-system,sans-serif}.error-state{display:flex;justify-content:center;align-items:center;min-height:100vh;background:linear-gradient(135deg,#1f2937,#374151);padding:20px;font-family:system-ui,-apple-system,sans-serif}.error-content{background:#4b5563;border-radius:16px;padding:40px;box-shadow:0 8px 25px #0000004d;max-width:500px;text-align:center;border:1px solid #6b7280}.error-content h2{color:#f87171;margin:0 0 16px;font-size:24px;font-weight:700}.error-content p{color:#d1d5db;margin:0 0 24px;line-height:1.6}.error-instructions{background:#374151;border:1px solid #6b7280;border-radius:8px;padding:20px;margin:24px 0;text-align:left}.error-instructions h3{color:#fbbf24;margin:0 0 12px;font-size:16px;font-weight:600}.error-instructions ol{color:#e5e7eb;margin:0;padding-left:20px}.error-instructions li{margin:8px 0;line-height:1.5}.error-instructions code{background:#1f2937;color:#fbbf24;padding:2px 6px;border-radius:4px;font-family:Consolas,Monaco,monospace;font-size:14px}.retry-button{background:linear-gradient(135deg,#6b7280,#4b5563);color:#fff;border:none;border-radius:8px;padding:12px 24px;font-size:16px;font-weight:600;cursor:pointer;transition:all .2s ease;margin-top:16px}.retry-button:hover{background:linear-gradient(135deg,#9ca3af,#6b7280);transform:translateY(-1px)}.loading-spinner{width:40px;height:40px;border:3px solid rgba(255,255,255,.3);border-radius:50%;border-top-color:#fff;animation:spin 1s ease-in-out infinite;margin-bottom:1rem}@keyframes spin{to{transform:rotate(360deg)}}.loading p{font-size:1.1rem;opacity:.9}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-track{background:#374151}::-webkit-scrollbar-thumb{background:#6b7280;border-radius:4px}::-webkit-scrollbar-thumb:hover{background:#9ca3af}@media (max-width: 768px){.app-content{flex-direction:column;height:auto}}.fade-in{animation:fadeIn .3s ease-in-out}@keyframes fadeIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}button:focus,input:focus,select:focus,textarea:focus{outline:2px solid #9ca3af;outline-offset:2px}button:focus:not(:focus-visible){outline:none}*{transition:color .2s ease,background-color .2s ease,border-color .2s ease,box-shadow .2s ease}