:root{--bg-gradient-start: #e8e8e8;--bg-gradient-end: #d0d0d0;--card-bg: #ffffff;--section-bg: #f8f8f8;--item-bg: #ffffff;--text-primary: #2a2a2a;--text-secondary: #6b6b6b;--primary-color: #4a4a4a;--accent-gradient-start: #6a6a6a;--accent-gradient-end: #4a4a4a;--border-color: #d4d4d4;--shadow-color: rgba(0, 0, 0, .08);--shadow-hover: rgba(0, 0, 0, .12);--shadow-sm: 0 1px 3px rgba(0, 0, 0, .08);--shadow-md: 0 4px 8px rgba(0, 0, 0, .1);--shadow-lg: 0 8px 16px rgba(0, 0, 0, .12);--shadow-xl: 0 12px 24px rgba(0, 0, 0, .15);--input-bg: #ffffff;--input-border: #d4d4d4;--input-focus: #5a5a5a;--overlay-lightest: rgba(0, 0, 0, .05);--overlay-lighter: rgba(0, 0, 0, .08);--overlay-light: rgba(0, 0, 0, .1);--overlay-medium: rgba(0, 0, 0, .2);--overlay-strong: rgba(0, 0, 0, .3);--overlay-heavy: rgba(0, 0, 0, .5);--overlay-intense: rgba(0, 0, 0, .7);--overlay-opaque: rgba(0, 0, 0, .9);--highlight-subtle: rgba(255, 255, 255, .05);--highlight-soft: rgba(255, 255, 255, .1);--highlight-medium: rgba(255, 255, 255, .2);--highlight-strong: rgba(255, 255, 255, .3);--radius-xs: .125rem;--radius-sm: .25rem;--radius-md: .5rem;--radius-lg: .75rem;--radius-xl: 1rem;--radius-2xl: 1.5rem;--radius-full: 50%;--transition-fast: .15s cubic-bezier(.4, 0, .2, 1);--transition-base: .25s cubic-bezier(.4, 0, .2, 1);--transition-slow: .35s cubic-bezier(.4, 0, .2, 1);--spacing-xs: .25rem;--spacing-sm: .5rem;--spacing-md: 1rem;--spacing-lg: 1.5rem;--spacing-xl: 2rem;--danger-color: #e74c3c;--danger-hover: #c0392b;--success-color: #27ae60;--warning-color: #faa61a;--info-color: #3498db;--accent-blue: #0071eb;--accent-green: #43b581;--rarity-ur: #e91e8c;--rarity-ur-light: #ffb3d9;--rarity-ur-bg: linear-gradient(135deg, #fdeebb, #ffc8b2, #ffb7c5, #dcb5ff, #fdeebb);--rarity-ur-text: #4a0028;--rarity-ssr: #ffd54f;--rarity-ssr-text: #5d4037;--rarity-sr: #ba68c8;--rarity-sr-text: #ffffff;--rarity-r: #6495ed;--rarity-r-text: #ffffff;--rarity-n: #b0bec5;--rarity-n-text: #37474f;--primary-alpha-10: rgba(0, 113, 235, .1);--primary-alpha-15: rgba(0, 113, 235, .15);--primary-alpha-20: rgba(0, 113, 235, .2);--primary-alpha-30: rgba(0, 113, 235, .3);--island-stamina: #3498db;--island-points: #9b59b6;--island-success: #2ecc71;--surface-card: #ffffff;--surface-elevated: #f5f5f5;--surface-border: #e0e0e0;--text-on-surface: #4a4a4a}body.dark-mode{--bg-gradient-start: #1a1a1a;--bg-gradient-end: #0a0a0a;--card-bg: #2a2a2a;--section-bg: #1f1f1f;--item-bg: #2a2a2a;--text-primary: #e8e8e8;--text-secondary: #a8a8a8;--primary-color: #c0c0c0;--accent-gradient-start: #5a5a5a;--accent-gradient-end: #3a3a3a;--border-color: #3a3a3a;--shadow-color: rgba(0, 0, 0, .4);--shadow-hover: rgba(0, 0, 0, .6);--shadow-sm: 0 1px 3px rgba(0, 0, 0, .3);--shadow-md: 0 4px 8px rgba(0, 0, 0, .4);--shadow-lg: 0 8px 16px rgba(0, 0, 0, .5);--shadow-xl: 0 12px 24px rgba(0, 0, 0, .6);--input-bg: #1f1f1f;--input-border: #3a3a3a;--input-focus: #6a6a6a;--danger-color: #e74c3c;--danger-hover: #c0392b;--success-color: #27ae60;--warning-color: #faa61a;--info-color: #3498db;--accent-blue: #7289da;--accent-green: #43b581;--rarity-ur: #e91e8c;--rarity-ur-light: #ffb3d9;--rarity-ur-bg: linear-gradient(135deg, #fdeebb, #ffc8b2, #ffb7c5, #dcb5ff, #fdeebb);--rarity-ur-text: #4a0028;--rarity-ssr: #ffd54f;--rarity-ssr-text: #5d4037;--rarity-sr: #ba68c8;--rarity-sr-text: #ffffff;--rarity-r: #6495ed;--rarity-r-text: #ffffff;--rarity-n: #b0bec5;--rarity-n-text: #37474f;--primary-alpha-10: rgba(114, 137, 218, .1);--primary-alpha-15: rgba(114, 137, 218, .15);--primary-alpha-20: rgba(114, 137, 218, .2);--primary-alpha-30: rgba(114, 137, 218, .3);--island-stamina: #3498db;--island-points: #9b59b6;--island-success: #2ecc71;--surface-card: #2f3136;--surface-elevated: #3d4148;--surface-border: #4f545c;--text-on-surface: #b9bbbe}@keyframes shake{10%,90%{transform:translate3d(-1px,0,0)}20%,80%{transform:translate3d(2px,0,0)}30%,50%,70%{transform:translate3d(-4px,0,0)}40%,60%{transform:translate3d(4px,0,0)}}body{font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif;background:linear-gradient(135deg,var(--bg-gradient-start) 0%,var(--bg-gradient-end) 100%);color:var(--text-primary);transition:background .3s ease,color .3s ease}.equip-upgrade-page{max-width:1400px;margin:0 auto;padding:1rem}.upgrade-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:1rem;flex-wrap:wrap;gap:.5rem}.upgrade-header .header-title-container{display:flex;align-items:center;gap:.5rem}.upgrade-header h1{font-size:1.5rem;font-weight:700;color:var(--text-primary);margin:0}.upgrade-header .material-symbols-outlined{font-size:1.75rem;color:var(--primary-color)}.cat1-tabs{display:flex;gap:.375rem;margin-bottom:.75rem;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:thin;padding-bottom:2px}.cat1-tab{flex-shrink:0;padding:.5rem 1rem;border:1px solid var(--border-color);border-radius:var(--radius-lg);background:var(--card-bg);color:var(--text-secondary);font-size:.85rem;font-weight:500;cursor:pointer;transition:all var(--transition-fast);white-space:nowrap}.cat1-tab:hover{background:var(--section-bg);color:var(--text-primary);border-color:var(--primary-color)}.cat1-tab.active{background:var(--primary-color);color:#fff;border-color:var(--primary-color)}.cat2-tabs{display:flex;gap:.25rem;margin-bottom:1rem;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:thin;padding-bottom:2px}.cat2-tab{flex-shrink:0;padding:.375rem .75rem;border:1px solid var(--border-color);border-radius:var(--radius-md);background:transparent;color:var(--text-secondary);font-size:.78rem;font-weight:500;cursor:pointer;transition:all var(--transition-fast);white-space:nowrap}.cat2-tab:hover{background:var(--section-bg);color:var(--text-primary)}.cat2-tab.active{background:var(--accent-blue);color:#fff;border-color:var(--accent-blue)}.tree-viewport{background:var(--section-bg);border:1px solid var(--border-color);border-radius:var(--radius-lg);padding:1rem;overflow-x:auto;-webkit-overflow-scrolling:touch;min-height:200px;margin-bottom:1rem}.tree-container{position:relative;min-height:150px}.tree-links-svg{position:absolute;top:0;left:0;pointer-events:none}.tree-link-line{fill:none;stroke:var(--border-color);stroke-width:2px;vector-effect:non-scaling-stroke}body.dark-mode .tree-link-line{stroke:var(--text-secondary)}.tree-arrow{fill:var(--border-color)}body.dark-mode .tree-arrow{fill:var(--text-secondary)}.tree-node{position:absolute;transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;cursor:pointer;z-index:1;transition:transform var(--transition-fast)}.tree-node:hover{transform:translate(-50%,-50%) scale(1.08);z-index:2}.tree-node.selected{transform:translate(-50%,-50%) scale(1.1);z-index:3}.tree-node-icon-wrap{position:relative;border-radius:var(--radius-md);overflow:hidden;box-shadow:var(--shadow-sm);transition:box-shadow var(--transition-fast)}.tree-node:hover .tree-node-icon-wrap{box-shadow:var(--shadow-md)}.tree-node.selected .tree-node-icon-wrap{box-shadow:0 0 0 2px var(--primary-color),var(--shadow-lg)}.tree-node-bg{display:block;width:100%;height:100%;object-fit:cover}.tree-node-img{position:absolute;inset:2px;width:calc(100% - 4px);height:calc(100% - 4px);object-fit:contain}.tree-node-name{margin-top:4px;font-size:.75rem;color:var(--text-secondary);text-align:center;max-width:120px;line-height:1.3;word-break:keep-all}.tree-node:hover .tree-node-name,.tree-node.selected .tree-node-name{color:var(--text-primary);font-weight:600}.upgrade-info-panel{background:var(--card-bg);border:1px solid var(--border-color);border-radius:var(--radius-lg);overflow:hidden}.upgrade-info-panel:empty{display:none}.info-header{display:flex;align-items:center;gap:.75rem;padding:.75rem 1rem;border-bottom:1px solid var(--border-color);background:var(--section-bg)}.info-icon{position:relative;width:64px;height:64px;flex-shrink:0;border-radius:var(--radius-md);overflow:hidden}.info-icon-bg{width:100%;height:100%;object-fit:cover}.info-icon-img{position:absolute;inset:2px;width:calc(100% - 4px);height:calc(100% - 4px);object-fit:contain}.info-details{flex:1;min-width:0}.info-name{font-size:.95rem;font-weight:600;color:var(--text-primary)}.info-meta{display:flex;align-items:center;gap:.375rem;margin-top:.125rem}.info-type{font-size:.75rem;color:var(--text-secondary)}.info-rarity{font-size:.7rem;font-weight:600;padding:.0625rem .375rem;border-radius:var(--radius-sm);background:var(--border-color);color:var(--text-primary)}.info-link-btn{display:flex;align-items:center;justify-content:center;width:2rem;height:2rem;border-radius:var(--radius-md);color:var(--primary-color);text-decoration:none;transition:all var(--transition-fast);flex-shrink:0}.info-link-btn:hover{background:var(--section-bg)}.info-upgrade{padding:.75rem 1rem}.info-section-title{font-size:.8rem;font-weight:600;color:var(--text-primary);margin-bottom:.5rem;display:flex;align-items:center;gap:.375rem}.info-cost-row{display:flex;align-items:center;gap:.5rem;padding:.375rem 0;border-bottom:1px solid var(--border-color);font-size:.8rem}.info-cost-row:last-child{border-bottom:none}.info-cost-label{color:var(--text-secondary);min-width:5rem;flex-shrink:0}.info-cost-value{color:var(--text-primary);font-weight:500;display:flex;align-items:center;gap:.375rem;flex-wrap:wrap}.info-from-equip{position:relative;display:inline-block;width:36px;height:36px;border-radius:var(--radius-sm);overflow:hidden;vertical-align:middle;cursor:pointer;transition:transform var(--transition-fast)}.info-from-equip:hover{transform:scale(1.1)}.info-from-icon-bg{width:100%;height:100%;object-fit:cover}.info-from-icon-img{position:absolute;inset:1px;width:calc(100% - 2px);height:calc(100% - 2px);object-fit:contain}.info-materials{gap:.5rem}.info-material{display:inline-flex;align-items:center;gap:.375rem;padding:.25rem .5rem;background:var(--section-bg);border:1px solid var(--border-color);border-radius:var(--radius-md);font-size:.8rem;cursor:pointer;transition:all var(--transition-fast)}.info-material:hover{background:var(--card-bg);border-color:var(--primary-color);box-shadow:var(--shadow-sm)}.info-material img{width:36px;height:36px;object-fit:contain}.info-material-info{display:flex;flex-direction:column;gap:.0625rem}.info-material-name{font-size:.75rem;color:var(--text-primary);font-weight:500;line-height:1.2}.info-material-qty{font-size:.7rem;color:var(--text-secondary)}.info-no-upgrade{padding:.75rem 1rem;font-size:.8rem;color:var(--text-secondary);font-style:italic}.header-actions{display:flex;gap:.5rem}.mat-browse-btn{display:flex;align-items:center;gap:.375rem;padding:.5rem .875rem;border:1px solid var(--border-color);border-radius:var(--radius-lg);background:var(--card-bg);color:var(--text-secondary);font-size:.85rem;font-weight:500;cursor:pointer;transition:all var(--transition-fast)}.mat-browse-btn:hover{background:var(--section-bg);color:var(--text-primary);border-color:var(--primary-color)}.mat-browse-btn .material-symbols-outlined{font-size:1.125rem}.mat-modal-overlay{display:none;position:fixed;inset:0;z-index:1100;background:var(--overlay-heavy);justify-content:center;align-items:center;padding:1rem}.mat-modal{background:var(--card-bg);border-radius:var(--radius-xl);box-shadow:var(--shadow-xl);width:100%;max-width:800px;max-height:85vh;display:flex;flex-direction:column;overflow:hidden}.mat-modal-header{display:flex;align-items:center;gap:.75rem;padding:1rem 1.25rem;border-bottom:1px solid var(--border-color);background:var(--section-bg)}.mat-modal-header-icon{width:40px;height:40px;object-fit:contain;flex-shrink:0}.mat-modal-header-info{flex:1;min-width:0}.mat-modal-title{font-size:1.05rem;font-weight:700;color:var(--text-primary);margin:0}.mat-modal-subtitle{font-size:.78rem;color:var(--text-secondary);margin-top:.125rem}.mat-modal-close{display:flex;align-items:center;justify-content:center;width:2rem;height:2rem;border:none;border-radius:var(--radius-md);background:transparent;color:var(--text-secondary);cursor:pointer;transition:all var(--transition-fast);flex-shrink:0}.mat-modal-close:hover{background:var(--border-color);color:var(--text-primary)}.mat-modal-body{padding:1rem 1.25rem;overflow-y:auto;flex:1}.mat-browse-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:.5rem}.mat-browse-item{display:flex;align-items:center;gap:.5rem;padding:.5rem .625rem;border:1px solid var(--border-color);border-radius:var(--radius-md);background:var(--card-bg);cursor:pointer;transition:all var(--transition-fast)}.mat-browse-item:hover{background:var(--section-bg);border-color:var(--primary-color);box-shadow:var(--shadow-sm)}.mat-browse-item img{width:36px;height:36px;object-fit:contain;flex-shrink:0}.mat-browse-item-info{flex:1;min-width:0}.mat-browse-item-name{font-size:.8rem;font-weight:500;color:var(--text-primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.mat-browse-item-count{font-size:.7rem;color:var(--text-secondary)}.mat-equip-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:.5rem}.mat-equip-card{display:flex;align-items:center;gap:.625rem;padding:.5rem .75rem;border:1px solid var(--border-color);border-radius:var(--radius-md);background:var(--card-bg);cursor:pointer;transition:all var(--transition-fast)}.mat-equip-card:hover{background:var(--section-bg);border-color:var(--accent-blue);box-shadow:var(--shadow-sm)}.mat-equip-card-icon{position:relative;width:44px;height:44px;flex-shrink:0;border-radius:var(--radius-sm);overflow:hidden}.mat-equip-card-icon .equip-bg{width:100%;height:100%;object-fit:cover}.mat-equip-card-icon .equip-img{position:absolute;inset:2px;width:calc(100% - 4px);height:calc(100% - 4px);object-fit:contain}.mat-equip-card-info{flex:1;min-width:0}.mat-equip-card-name{font-size:.82rem;font-weight:500;color:var(--text-primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.mat-equip-card-meta{display:flex;align-items:center;gap:.375rem;margin-top:.125rem}.mat-equip-card-type{font-size:.7rem;color:var(--text-secondary)}.mat-equip-card-qty{font-size:.7rem;font-weight:600;color:var(--accent-blue)}.mat-equip-card-rarity{font-size:.65rem;font-weight:600;padding:.0625rem .3rem;border-radius:var(--radius-xs);background:var(--border-color);color:var(--text-primary)}.mat-modal-back{display:flex;align-items:center;gap:.25rem;padding:0;border:none;background:transparent;color:var(--accent-blue);font-size:.8rem;font-weight:500;cursor:pointer;margin-bottom:.75rem;transition:color var(--transition-fast)}.mat-modal-back:hover{color:var(--primary-color)}.mat-modal-back .material-symbols-outlined{font-size:1.125rem}.equip-upgrade-page .loading{text-align:center;padding:2rem;color:var(--text-secondary);font-size:.9rem}@media (max-width: 768px){.equip-upgrade-page{padding:.5rem}.upgrade-header h1{font-size:1.25rem}.cat1-tab{padding:.375rem .75rem;font-size:.78rem}.cat2-tab{padding:.25rem .5rem;font-size:.72rem}.tree-viewport{padding:.5rem}.tree-node-name{font-size:.65rem;max-width:90px}.info-header{padding:.5rem .75rem}.info-icon{width:48px;height:48px}.info-upgrade{padding:.5rem .75rem}.info-material img{width:28px;height:28px}.mat-browse-grid,.mat-equip-grid{grid-template-columns:1fr}.mat-modal{max-height:90vh}}