:root{--bg-gradient-start: #e8e8e8;--bg-gradient-end: #d0d0d0;--card-bg: #ffffff;--section-bg: #f8f8f8;--item-bg: #ffffff;--text-primary: #2a2a2a;--text-secondary: #6b6b6b;--primary-color: #4a4a4a;--accent-gradient-start: #6a6a6a;--accent-gradient-end: #4a4a4a;--border-color: #d4d4d4;--shadow-color: rgba(0, 0, 0, .08);--shadow-hover: rgba(0, 0, 0, .12);--shadow-sm: 0 1px 3px rgba(0, 0, 0, .08);--shadow-md: 0 4px 8px rgba(0, 0, 0, .1);--shadow-lg: 0 8px 16px rgba(0, 0, 0, .12);--shadow-xl: 0 12px 24px rgba(0, 0, 0, .15);--input-bg: #ffffff;--input-border: #d4d4d4;--input-focus: #5a5a5a;--overlay-lightest: rgba(0, 0, 0, .05);--overlay-lighter: rgba(0, 0, 0, .08);--overlay-light: rgba(0, 0, 0, .1);--overlay-medium: rgba(0, 0, 0, .2);--overlay-strong: rgba(0, 0, 0, .3);--overlay-heavy: rgba(0, 0, 0, .5);--overlay-intense: rgba(0, 0, 0, .7);--overlay-opaque: rgba(0, 0, 0, .9);--highlight-subtle: rgba(255, 255, 255, .05);--highlight-soft: rgba(255, 255, 255, .1);--highlight-medium: rgba(255, 255, 255, .2);--highlight-strong: rgba(255, 255, 255, .3);--radius-xs: .125rem;--radius-sm: .25rem;--radius-md: .5rem;--radius-lg: .75rem;--radius-xl: 1rem;--radius-2xl: 1.5rem;--radius-full: 50%;--transition-fast: .15s cubic-bezier(.4, 0, .2, 1);--transition-base: .25s cubic-bezier(.4, 0, .2, 1);--transition-slow: .35s cubic-bezier(.4, 0, .2, 1);--spacing-xs: .25rem;--spacing-sm: .5rem;--spacing-md: 1rem;--spacing-lg: 1.5rem;--spacing-xl: 2rem;--danger-color: #e74c3c;--danger-hover: #c0392b;--success-color: #27ae60;--warning-color: #faa61a;--info-color: #3498db;--accent-blue: #0071eb;--accent-green: #43b581;--rarity-ur: #e91e8c;--rarity-ur-light: #ffb3d9;--rarity-ur-bg: linear-gradient(135deg, #fdeebb, #ffc8b2, #ffb7c5, #dcb5ff, #fdeebb);--rarity-ur-text: #4a0028;--rarity-ssr: #ffd54f;--rarity-ssr-text: #5d4037;--rarity-sr: #ba68c8;--rarity-sr-text: #ffffff;--rarity-r: #6495ed;--rarity-r-text: #ffffff;--rarity-n: #b0bec5;--rarity-n-text: #37474f;--primary-alpha-10: rgba(0, 113, 235, .1);--primary-alpha-15: rgba(0, 113, 235, .15);--primary-alpha-20: rgba(0, 113, 235, .2);--primary-alpha-30: rgba(0, 113, 235, .3);--island-stamina: #3498db;--island-points: #9b59b6;--island-success: #2ecc71;--surface-card: #ffffff;--surface-elevated: #f5f5f5;--surface-border: #e0e0e0;--text-on-surface: #4a4a4a}body.dark-mode{--bg-gradient-start: #1a1a1a;--bg-gradient-end: #0a0a0a;--card-bg: #2a2a2a;--section-bg: #1f1f1f;--item-bg: #2a2a2a;--text-primary: #e8e8e8;--text-secondary: #a8a8a8;--primary-color: #c0c0c0;--accent-gradient-start: #5a5a5a;--accent-gradient-end: #3a3a3a;--border-color: #3a3a3a;--shadow-color: rgba(0, 0, 0, .4);--shadow-hover: rgba(0, 0, 0, .6);--shadow-sm: 0 1px 3px rgba(0, 0, 0, .3);--shadow-md: 0 4px 8px rgba(0, 0, 0, .4);--shadow-lg: 0 8px 16px rgba(0, 0, 0, .5);--shadow-xl: 0 12px 24px rgba(0, 0, 0, .6);--input-bg: #1f1f1f;--input-border: #3a3a3a;--input-focus: #6a6a6a;--danger-color: #e74c3c;--danger-hover: #c0392b;--success-color: #27ae60;--warning-color: #faa61a;--info-color: #3498db;--accent-blue: #7289da;--accent-green: #43b581;--rarity-ur: #e91e8c;--rarity-ur-light: #ffb3d9;--rarity-ur-bg: linear-gradient(135deg, #fdeebb, #ffc8b2, #ffb7c5, #dcb5ff, #fdeebb);--rarity-ur-text: #4a0028;--rarity-ssr: #ffd54f;--rarity-ssr-text: #5d4037;--rarity-sr: #ba68c8;--rarity-sr-text: #ffffff;--rarity-r: #6495ed;--rarity-r-text: #ffffff;--rarity-n: #b0bec5;--rarity-n-text: #37474f;--primary-alpha-10: rgba(114, 137, 218, .1);--primary-alpha-15: rgba(114, 137, 218, .15);--primary-alpha-20: rgba(114, 137, 218, .2);--primary-alpha-30: rgba(114, 137, 218, .3);--island-stamina: #3498db;--island-points: #9b59b6;--island-success: #2ecc71;--surface-card: #2f3136;--surface-elevated: #3d4148;--surface-border: #4f545c;--text-on-surface: #b9bbbe}@keyframes shake{10%,90%{transform:translate3d(-1px,0,0)}20%,80%{transform:translate3d(2px,0,0)}30%,50%,70%{transform:translate3d(-4px,0,0)}40%,60%{transform:translate3d(4px,0,0)}}:root{--island-bg: #f5f7fa;--island-surface: #ffffff;--island-surface-hover: #f8f9fa;--island-border: #e1e4e8;--island-text-primary: #1a1d23;--island-text-secondary: #606770;--island-text-tertiary: #8a8d93;--island-accent: #0071eb;--island-accent-hover: #005ec4;--island-accent-light: rgba(0, 113, 235, .08);--island-danger: #e74c3c;--island-danger-hover: #c0392b;--island-success: #27ae60;--island-success-hover: #229954;--island-warning: #f39c12;--island-warning-hover: #d68910;--island-shadow-sm: 0 2px 8px rgba(0, 0, 0, .08);--island-shadow-md: 0 4px 16px rgba(0, 0, 0, .1);--island-shadow-lg: 0 8px 32px rgba(0, 0, 0, .12);--island-transition: all .2s cubic-bezier(.4, 0, .2, 1);--island-spacing-xs: .5rem;--island-spacing-sm: .75rem;--island-spacing-md: 1rem;--island-spacing-lg: 1.5rem;--island-spacing-xl: 2rem;--island-spacing-2xl: 3rem;--island-gap-xs: .375rem;--island-gap-sm: .5rem;--island-gap-md: .75rem;--island-gap-lg: 1rem;--island-gap-xl: 1.5rem;--island-radius-sm: 6px;--island-radius-md: 8px;--island-radius-lg: 10px;--island-radius-xl: 12px;--island-radius-2xl: 16px;--island-radius-round: 50%;--island-text-xs: .75rem;--island-text-sm: .8125rem;--island-text-base: .875rem;--island-text-md: .9375rem;--island-text-lg: 1rem;--island-text-xl: 1.125rem;--island-text-2xl: 1.25rem;--island-text-3xl: 1.5rem;--island-text-4xl: 2rem;--island-icon-xs: 1rem;--island-icon-sm: 1.125rem;--island-icon-md: 1.25rem;--island-icon-lg: 1.5rem;--island-icon-xl: 2rem;--island-icon-2xl: 2.5rem;--island-z-base: 1;--island-z-sticky: 10;--island-z-dropdown: 100;--island-z-floating: 1000;--island-z-modal: 9999}body.dark-mode{--island-bg: #1e222a;--island-surface: #282c34;--island-surface-hover: #31353f;--island-border: #3c414b;--island-text-primary: #e4e6eb;--island-text-secondary: #b0b3b8;--island-text-tertiary: #8a8d93;--island-accent: #7289da;--island-accent-hover: #8ea1e1;--island-accent-light: rgba(114, 137, 218, .1);--island-shadow-sm: 0 2px 8px rgba(0, 0, 0, .3);--island-shadow-md: 0 4px 16px rgba(0, 0, 0, .4);--island-shadow-lg: 0 8px 32px rgba(0, 0, 0, .5)}.island-container{max-width:1400px;margin:0 auto;padding:2rem 1.5rem;min-height:calc(100vh - 200px);background:var(--island-bg)}body{background:var(--island-bg)}.island-header{text-align:center;margin-bottom:2.5rem;padding-bottom:2rem;border-bottom:2px solid var(--island-border)}.island-header h1{font-size:2.5rem;font-weight:700;color:var(--island-text-primary);margin:0 0 .75rem;display:flex;align-items:center;justify-content:center;gap:1rem}.island-header h1 .material-symbols-outlined{font-size:2.75rem;color:var(--island-accent)}.island-header .subtitle{font-size:1.125rem;color:var(--island-text-secondary);margin:0;font-weight:400}.tab-navigation{display:flex;gap:.5rem;margin-bottom:2rem;padding:.5rem;background:var(--island-surface);border-radius:12px;box-shadow:var(--island-shadow-sm);overflow-x:auto;-webkit-overflow-scrolling:touch}.tab-button{flex:1;min-width:140px;padding:.875rem 1.5rem;background:transparent;border:none;border-radius:8px;color:var(--island-text-secondary);font-size:.9375rem;font-weight:600;cursor:pointer;transition:var(--island-transition);display:flex;align-items:center;justify-content:center;gap:.5rem;white-space:nowrap}.tab-button .material-symbols-outlined{font-size:1.25rem}.tab-button:hover{background:var(--island-accent-light);color:var(--island-accent)}.tab-button.active{background:var(--island-accent);color:#fff;box-shadow:var(--island-shadow-sm)}.tab-content-wrapper{position:relative}.tab-content{display:none;animation:fadeIn .3s ease}.tab-content.active{display:block}@keyframes fadeIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.search-section{margin-bottom:2rem}.search-section .dropdown-container{max-width:600px;margin:0 auto}.content-layout{display:grid;grid-template-columns:380px 1fr;gap:2rem;align-items:start}.loading-state,.empty-state,.placeholder-content{text-align:center;padding:3rem 1.5rem;color:var(--island-text-tertiary)}.loading-state .material-symbols-outlined,.empty-state .material-symbols-outlined,.placeholder-content .material-symbols-outlined{font-size:4rem;margin-bottom:1rem;opacity:.5;display:block}.loading-state p,.empty-state p,.placeholder-content p{margin:0;font-size:.9375rem}.rotating{animation:rotate 1.5s linear infinite}@keyframes rotate{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.empty-state h3{color:var(--island-text-secondary);font-size:1.5rem;margin:1rem 0 .5rem}.detail-section{margin-bottom:2rem}.detail-section h3{font-size:1.25rem;font-weight:600;color:var(--island-text-primary);margin:0 0 1rem;display:flex;align-items:center;gap:.5rem}.detail-section h3 .material-symbols-outlined{font-size:1.5rem;color:var(--island-accent)}.title-with-help{display:flex;align-items:center;gap:.5rem}.help-icon{cursor:pointer;opacity:.6;transition:var(--island-transition);display:inline-flex;align-items:center}.help-icon:hover{opacity:1;color:var(--island-accent)}.help-icon .material-symbols-outlined{font-size:1.125rem}.help-tooltip{background:var(--island-surface);border:2px solid var(--island-accent);border-radius:8px;padding:0;margin-bottom:0;box-shadow:var(--island-shadow-md);opacity:0;max-height:0;overflow:hidden;transition:opacity .3s ease,max-height .3s ease,padding .3s ease,margin .3s ease}.help-tooltip.visible{opacity:1;max-height:500px;padding:1rem;margin-bottom:.3rem}.help-tooltip p{margin:.5rem 0;font-size:.875rem;color:var(--island-text-secondary);line-height:1.6}.help-tooltip p:first-child{margin-top:0;font-size:1rem;color:var(--island-text-primary)}.help-tooltip strong{color:var(--island-accent)}.placeholder-content{background:var(--island-surface);border-radius:12px;padding:4rem 2rem;box-shadow:var(--island-shadow-md)}.placeholder-content h2{font-size:2rem;color:var(--island-text-primary);margin:1rem 0}.island-scrollbar::-webkit-scrollbar,.character-list::-webkit-scrollbar,.tech-tree-container::-webkit-scrollbar,.tech-detail::-webkit-scrollbar,.quest-list::-webkit-scrollbar,.quest-type-menu::-webkit-scrollbar,.recipe-list::-webkit-scrollbar,.dependency-chain::-webkit-scrollbar,.modal-content::-webkit-scrollbar{width:8px;height:8px}.island-scrollbar::-webkit-scrollbar-track,.character-list::-webkit-scrollbar-track,.tech-tree-container::-webkit-scrollbar-track,.tech-detail::-webkit-scrollbar-track,.quest-list::-webkit-scrollbar-track,.quest-type-menu::-webkit-scrollbar-track,.recipe-list::-webkit-scrollbar-track,.dependency-chain::-webkit-scrollbar-track,.modal-content::-webkit-scrollbar-track{background:var(--island-bg);border-radius:var(--island-radius-sm)}.island-scrollbar::-webkit-scrollbar-thumb,.character-list::-webkit-scrollbar-thumb,.tech-tree-container::-webkit-scrollbar-thumb,.tech-detail::-webkit-scrollbar-thumb,.quest-list::-webkit-scrollbar-thumb,.quest-type-menu::-webkit-scrollbar-thumb,.recipe-list::-webkit-scrollbar-thumb,.dependency-chain::-webkit-scrollbar-thumb,.modal-content::-webkit-scrollbar-thumb{background:var(--island-border);border-radius:var(--island-radius-sm);transition:var(--island-transition)}.island-scrollbar::-webkit-scrollbar-thumb:hover,.character-list::-webkit-scrollbar-thumb:hover,.tech-tree-container::-webkit-scrollbar-thumb:hover,.tech-detail::-webkit-scrollbar-thumb:hover,.quest-list::-webkit-scrollbar-thumb:hover,.quest-type-menu::-webkit-scrollbar-thumb:hover,.recipe-list::-webkit-scrollbar-thumb:hover,.dependency-chain::-webkit-scrollbar-thumb:hover,.modal-content::-webkit-scrollbar-thumb:hover{background:var(--island-accent)}.island-scrollbar::-webkit-scrollbar-corner,.tech-tree-container::-webkit-scrollbar-corner{background:var(--island-bg)}.island-scrollbar,.character-list,.tech-tree-container,.tech-detail,.quest-list,.quest-type-menu,.recipe-list,.dependency-chain,.modal-content{scrollbar-width:thin;scrollbar-color:var(--island-border) var(--island-bg)}.island-badge{display:inline-flex;align-items:center;gap:var(--island-gap-xs);padding:.375rem .75rem;border-radius:var(--island-radius-md);font-size:var(--island-text-sm);font-weight:600;transition:var(--island-transition)}.island-badge-sm{padding:.25rem .5rem;font-size:var(--island-text-xs)}.island-badge-primary{background:var(--island-accent);color:#fff}.island-badge-success{background:var(--island-success);color:#fff}.island-badge-warning{background:var(--island-warning);color:#fff}.island-badge-danger{background:var(--island-danger);color:#fff}.island-badge-neutral{background:var(--island-surface);border:2px solid var(--island-border);color:var(--island-text-secondary)}.island-card{background:var(--island-bg);border:2px solid var(--island-border);border-radius:var(--island-radius-lg);padding:var(--island-spacing-md);cursor:pointer;transition:var(--island-transition)}.island-card:hover{border-color:var(--island-accent);box-shadow:var(--island-shadow-sm)}.island-card-hover-slide-x:hover{transform:translate(4px)}.island-card-hover-slide-y:hover{transform:translateY(-2px)}.island-card.active{border-color:var(--island-accent);background:var(--island-accent-light);box-shadow:var(--island-shadow-sm)}.island-card-icon{width:48px;height:48px;flex-shrink:0;background:var(--island-surface);border:2px solid var(--island-border);border-radius:var(--island-radius-md);display:flex;align-items:center;justify-content:center;overflow:hidden;transition:var(--island-transition)}.island-btn{padding:.875rem 1.25rem;background:var(--island-surface);border:2px solid var(--island-border);border-radius:var(--island-radius-md);color:var(--island-text-secondary);font-size:var(--island-text-md);font-weight:600;cursor:pointer;transition:var(--island-transition);display:inline-flex;align-items:center;justify-content:center;gap:var(--island-gap-sm)}.island-btn:hover{background:var(--island-surface-hover);border-color:var(--island-accent);color:var(--island-accent)}.island-btn.active{background:var(--island-accent);border-color:var(--island-accent);color:#fff;box-shadow:var(--island-shadow-sm)}.island-btn-primary{background:var(--island-accent);border-color:var(--island-accent);color:#fff}.island-btn-primary:hover{background:var(--island-accent-hover);transform:translateY(-2px);box-shadow:var(--island-shadow-md)}.island-btn-danger{background:var(--island-danger);border-color:var(--island-danger);color:#fff}.island-btn-danger:hover{background:var(--island-danger-hover)}.island-btn:disabled{opacity:.5;cursor:not-allowed;pointer-events:none}.island-icon{width:48px;height:48px;flex-shrink:0;background:var(--island-surface);border:2px solid var(--island-border);border-radius:var(--island-radius-md);display:flex;align-items:center;justify-content:center;overflow:hidden;transition:var(--island-transition)}.island-list-panel{background:var(--island-surface);border-radius:var(--island-radius-xl);padding:var(--island-spacing-lg);box-shadow:var(--island-shadow-md);overflow-y:auto}.island-detail-panel{background:var(--island-surface);border-radius:var(--island-radius-xl);padding:var(--island-spacing-xl);box-shadow:var(--island-shadow-md);min-height:500px}@media (max-width: 1024px){.content-layout{grid-template-columns:320px 1fr;gap:1.5rem}}@media (max-width: 768px){.island-container{padding:1.5rem 1rem}.island-header h1{font-size:2rem}.island-header h1 .material-symbols-outlined{font-size:2.25rem}.tab-navigation{padding:.375rem;gap:.375rem}.tab-button{min-width:120px;padding:.75rem 1rem;font-size:.875rem}.content-layout{grid-template-columns:1fr;gap:1.5rem}}@media (max-width: 480px){.island-header h1{font-size:1.75rem;flex-direction:column;gap:.5rem}.island-header .subtitle{font-size:1rem}.tab-button{min-width:100px;padding:.625rem .75rem;font-size:.8125rem}.tab-button .material-symbols-outlined{font-size:1.125rem}}@keyframes flash{0%,to{opacity:1}50%{opacity:.5;transform:scale(1.1)}}@keyframes pulse{0%,to{transform:scale(1)}50%{transform:scale(1.15)}}@keyframes bounce{0%,to{transform:translateY(0)}25%{transform:translateY(-6px)}50%{transform:translateY(0)}75%{transform:translateY(-3px)}}