:root{--neutral-900:#171717;--neutral-800:#262626;--neutral-700:#404040;--neutral-600:#525252;--neutral-500:#737373;--neutral-400:#a3a3a3;--neutral-300:#d4d4d4;--neutral-200:#e5e5e5;--neutral-100:#f5f5f5;--white:#ffffff;--emerald-400:#34d399;--emerald-500:#10b981;--emerald-600:#059669;--emerald-700:#047857;--bg-color:var(--neutral-900);--sidebar-bg:var(--neutral-900);--sidebar-border:var(--neutral-700);--card-bg:var(--neutral-800);--text-main:var(--white);--text-muted:var(--neutral-400);--accent-color:var(--emerald-400);--accent-hover:var(--emerald-500);--font-main:'Inter',system-ui,-apple-system,sans-serif}*{box-sizing:border-box;margin:0;padding:0}body{background-color:var(--bg-color);color:var(--text-main);font-family:var(--font-main);width:100vw;height:100vh;overflow:hidden;display:flex}#app-container{display:flex;width:100%;height:100%}#viewer-container{flex:1;position:relative;background:linear-gradient(to bottom,#262626,#171717);overflow:hidden}#viewer{width:100%;height:100%;display:block;background-color:#000}#sidebar{width:24rem;height:100%;background-color:var(--sidebar-bg);border-left:1px solid var(--sidebar-border);display:flex;flex-direction:column;z-index:10;box-shadow:-4px 0 24px rgba(0,0,0,0.25)}.sidebar-header{padding:1.5rem;border-bottom:1px solid var(--neutral-800);background-color:var(--neutral-900)}.app-title{font-size:1.25rem;font-weight:700;color:var(--accent-color);display:flex;align-items:center;gap:0.5rem;margin-bottom:1rem}.btn{width:100%;padding:0.5rem 1rem;background-color:var(--neutral-800);color:var(--accent-color);font-size:0.875rem;font-weight:500;border-radius:0.5rem;border:1px solid rgba(16,185,129,0.3);cursor:pointer;transition:all 0.2s;display:flex;align-items:center;justify-content:center;gap:0.5rem}.btn:hover{background-color:var(--neutral-700)}.btn-primary{background-color:var(--emerald-600);color:var(--white);border:none}.btn-primary:hover{background-color:var(--emerald-500)}.btn-group{display:flex;background-color:var(--neutral-800);padding:0.25rem;border-radius:0.5rem;margin-top:1rem}.btn-toggle{flex:1;padding:0.375rem;font-size:0.75rem;font-weight:500;border-radius:0.375rem;text-align:center;cursor:pointer;transition:all 0.2s;border:none;background:transparent;color:var(--neutral-400)}.btn-toggle:hover{color:var(--white)}.btn-toggle.active{background-color:var(--emerald-700);color:var(--white);box-shadow:0 1px 2px rgba(0,0,0,0.1)}.info-card{margin-top:1rem;background-color:var(--neutral-800);border-radius:0.5rem;padding:0.75rem}.info-label{font-size:0.875rem;color:var(--neutral-400);margin-bottom:0.25rem}.info-value{font-size:1.125rem;font-weight:600;color:var(--white);word-break:break-all}.info-meta{display:flex;gap:1rem;margin-top:0.5rem;font-size:0.75rem;color:var(--neutral-500)}.sidebar-section{padding:1rem 1.5rem;border-bottom:1px solid var(--neutral-800);max-height:12rem;overflow-y:auto}.section-title{font-size:0.875rem;font-weight:600;color:var(--neutral-300);margin-bottom:0.5rem}.material-grid{display:grid;grid-template-columns:1fr 1fr;gap:0.5rem}.material-item{display:flex;justify-content:space-between;align-items:center;background-color:var(--neutral-800);padding:0.25rem 0.5rem;border-radius:0.25rem;font-size:0.75rem}.material-name{color:var(--neutral-400);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:70%}.material-count{color:var(--emerald-500);font-family:monospace}.sidebar-content{flex:1;display:flex;flex-direction:column;min-height:0;background-color:var(--neutral-900)}.content-header{padding:1rem;border-bottom:1px solid var(--neutral-800);background-color:rgba(23,23,23,0.5);backdrop-filter:blur(4px)}.content-title{font-size:0.875rem;font-weight:600;color:var(--accent-color);display:flex;align-items:center;gap:0.5rem}.content-body{flex:1;overflow-y:auto;padding:1rem;display:flex;flex-direction:column;gap:1rem}.input-group{background-color:var(--neutral-800);padding:0.75rem;border-radius:0.5rem}.input-label{display:block;font-size:0.75rem;color:var(--neutral-400);margin-bottom:0.5rem}input[type="range"]{width:100%;-webkit-appearance:none;background:transparent}input[type="range"]::-webkit-slider-runnable-track{width:100%;height:4px;background:var(--neutral-700);border-radius:2px}input[type="range"]::-webkit-slider-thumb{-webkit-appearance:none;height:16px;width:16px;border-radius:50%;background:var(--emerald-500);margin-top:-6px;cursor:pointer;transition:transform 0.1s}input[type="range"]::-webkit-slider-thumb:hover{transform:scale(1.1)}input[type="range"]:focus{outline:none;box-shadow:none}::-webkit-scrollbar{width:6px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:var(--neutral-700);border-radius:3px}::-webkit-scrollbar-thumb:hover{background:var(--neutral-600)}.hidden{display:none !important}#landing-page{position:absolute;inset:0;z-index:50;display:flex;align-items:center;justify-content:center;background-color:var(--neutral-900);transition:opacity 0.5s ease}#landing-page.hidden{opacity:0;pointer-events:auto}.overlay-title{position:absolute;top:1rem;left:1rem;z-index:10;background-color:rgba(0,0,0,0.3);backdrop-filter:blur(4px);padding:0.5rem 1rem;border-radius:0.5rem;color:var(--white);border:1px solid rgba(255,255,255,0.1);pointer-events:auto;opacity:0;transition:opacity 0.5s ease}.overlay-title.visible{opacity:1}.overlay-title h1{font-size:1.125rem;font-weight:700;letter-spacing:0.025em;margin:0}.overlay-title span{color:var(--emerald-400);font-weight:300}.overlay-subtitle{font-size:0.75rem;color:var(--neutral-300);margin-bottom:0.5rem;font-weight:600}.overlay-hint{position:absolute;bottom:1.5rem;left:1rem;transform:none;z-index:10;background-color:rgba(0,0,0,0.5);backdrop-filter:blur(4px);padding:0.5rem 0.75rem;border-radius:0.5rem;color:var(--white);border:1px solid rgba(255,255,255,0.1);pointer-events:auto;font-size:0.75rem;display:flex;flex-direction:row;align-items:center;gap:1rem;opacity:0;transition:opacity 0.5s ease;box-shadow:0 2px 4px rgba(0,0,0,0.1)}.overlay-hint.visible{opacity:1}.hint-item{display:flex;align-items:center;white-space:nowrap}.hint-item i{width:16px;text-align:center;color:var(--emerald-400);margin-right:0.25rem;font-size:0.8rem}.overlay-coords{color:var(--emerald-400);font-family:monospace;font-size:0.9rem;white-space:nowrap}.overlay-coords.visible{opacity:1}.slider-container{display:flex;align-items:center;gap:0.5rem}.slider-btn{width:28px;height:28px;display:flex;align-items:center;justify-content:center;background-color:var(--neutral-800);border:1px solid var(--neutral-700);border-radius:0.25rem;color:var(--emerald-500);cursor:pointer;font-size:0.8rem;transition:all 0.2s;flex-shrink:0}.slider-btn:hover{background-color:var(--neutral-700);color:var(--white);border-color:var(--neutral-600)}.slider-btn:active{transform:scale(0.95)}.modal{position:fixed;top:0;left:0;width:100%;height:100%;background-color:rgba(0,0,0,0.7);z-index:1000;display:flex;justify-content:center;align-items:center;backdrop-filter:blur(4px)}.modal.hidden{display:none}.modal-content{background-color:var(--neutral-900);border:1px solid var(--neutral-700);border-radius:0.75rem;width:90%;max-width:800px;max-height:80vh;display:flex;flex-direction:column;box-shadow:0 20px 25px -5px rgba(0,0,0,0.1),0 10px 10px -5px rgba(0,0,0,0.04)}.modal-header{padding:1rem 1.5rem;border-bottom:1px solid var(--neutral-800);display:flex;justify-content:space-between;align-items:center}.modal-header h3{font-size:1.25rem;font-weight:600;color:var(--white)}.close-btn{background:none;border:none;color:var(--neutral-400);font-size:1.5rem;cursor:pointer;transition:color 0.2s}.close-btn:hover{color:var(--white)}.modal-body{padding:1.5rem;overflow-y:auto}.material-list-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:1rem}.material-card{background-color:var(--neutral-800);border-radius:0.5rem;padding:0.75rem;display:flex;align-items:center;gap:0.75rem;border:1px solid transparent;transition:border-color 0.2s}.material-card:hover{border-color:var(--neutral-600)}.material-icon{width:32px;height:32px;margin-right:10px;image-rendering:pixelated;image-rendering:-moz-crisp-edges;image-rendering:crisp-edges;object-fit:contain}.overlay-title span{color:var(--emerald-400);font-weight:300}.overlay-subtitle{font-size:0.75rem;color:var(--neutral-300);margin-bottom:0.5rem;font-weight:600}.overlay-hint{position:absolute;bottom:1.5rem;left:1rem;transform:none;z-index:10;background-color:rgba(0,0,0,0.5);backdrop-filter:blur(4px);padding:0.5rem 0.75rem;border-radius:0.5rem;color:var(--white);border:1px solid rgba(255,255,255,0.1);pointer-events:auto;font-size:0.75rem;display:flex;flex-direction:row;align-items:center;gap:1rem;opacity:0;transition:opacity 0.5s ease;box-shadow:0 2px 4px rgba(0,0,0,0.1)}.overlay-hint.visible{opacity:1}.hint-item{display:flex;align-items:center;white-space:nowrap}.hint-item i{width:16px;text-align:center;color:var(--emerald-400);margin-right:0.25rem;font-size:0.8rem}.overlay-coords{color:var(--emerald-400);font-family:monospace;font-size:0.9rem;white-space:nowrap}.overlay-coords.visible{opacity:1}.slider-container{display:flex;align-items:center;gap:0.5rem}.slider-btn{width:28px;height:28px;display:flex;align-items:center;justify-content:center;background-color:var(--neutral-800);border:1px solid var(--neutral-700);border-radius:0.25rem;color:var(--emerald-500);cursor:pointer;font-size:0.8rem;transition:all 0.2s;flex-shrink:0}.slider-btn:hover{background-color:var(--neutral-700);color:var(--white);border-color:var(--neutral-600)}.slider-btn:active{transform:scale(0.95)}.modal{position:fixed;top:0;left:0;width:100%;height:100%;background-color:rgba(0,0,0,0.7);z-index:1000;display:flex;justify-content:center;align-items:center;backdrop-filter:blur(4px)}.modal.hidden{display:none}.modal-content{background-color:var(--neutral-900);border:1px solid var(--neutral-700);border-radius:0.75rem;width:90%;max-width:800px;max-height:80vh;display:flex;flex-direction:column;box-shadow:0 20px 25px -5px rgba(0,0,0,0.1),0 10px 10px -5px rgba(0,0,0,0.04)}.modal-header{padding:1rem 1.5rem;border-bottom:1px solid var(--neutral-800);display:flex;justify-content:space-between;align-items:center}.modal-header h3{font-size:1.25rem;font-weight:600;color:var(--white)}.close-btn{background:none;border:none;color:var(--neutral-400);font-size:1.5rem;cursor:pointer;transition:color 0.2s}.close-btn:hover{color:var(--white)}.modal-body{padding:1.5rem;overflow-y:auto}.material-list-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:1rem}.material-card{background-color:var(--neutral-800);border-radius:0.5rem;padding:0.75rem;display:flex;align-items:flex-start;gap:0.75rem;border:1px solid transparent;transition:border-color 0.2s}.material-card:hover{border-color:var(--neutral-600)}.material-icon{width:32px;height:32px;flex-shrink:0;image-rendering:pixelated;image-rendering:-moz-crisp-edges;image-rendering:crisp-edges;object-fit:contain}.material-info{flex:1;min-width:0;display:flex;flex-direction:column;gap:0.25rem}.material-name-cn{color:var(--white);font-size:0.875rem;font-weight:500;word-wrap:break-word;overflow-wrap:break-word}.material-name-en{color:var(--neutral-500);font-size:0.75rem;word-wrap:break-word;overflow-wrap:break-word}.material-amount{color:var(--emerald-400);font-family:monospace;font-weight:600;font-size:0.875rem}.material-footer{display:flex;align-items:center;justify-content:space-between;gap:0.5rem;margin-top:0.5rem}.btn-replace{background-color:transparent;border:1px solid var(--neutral-600);color:var(--neutral-400);padding:0.25rem 0.5rem;border-radius:0.25rem;font-size:0.75rem;cursor:pointer;transition:all 0.2s;flex-shrink:0}.btn-replace:hover{border-color:var(--emerald-500);color:var(--emerald-500);background-color:rgba(16,185,129,0.1)}.block-tooltip{position:fixed;top:80px;left:50%;transform:translateX(-50%);background-color:rgba(0,0,0,0.8);color:white;padding:10px 16px;border-radius:8px;pointer-events:auto;opacity:0;transition:opacity 0.2s,transform 0.2s;z-index:1000;display:flex;align-items:center;gap:12px;backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,0.15);box-shadow:0 4px 12px rgba(0,0,0,0.3)}.block-tooltip.visible{opacity:1;transform:translateX(-50%) translateY(0)}.tooltip-icon{width:32px;height:32px;display:flex;align-items:center;justify-content:center}.tooltip-icon .block-icon{width:32px;height:32px}.tooltip-text{display:flex;flex-direction:column;gap:2px}.tooltip-name-cn{font-size:15px}.slider-btn:active{transform:scale(0.95)}.modal{position:fixed;top:0;left:0;width:100%;height:100%;background-color:rgba(0,0,0,0.7);z-index:1000;display:flex;justify-content:center;align-items:center;backdrop-filter:blur(4px)}.modal.hidden{display:none}.modal-content{background-color:var(--neutral-900);border:1px solid var(--neutral-700);border-radius:0.75rem;width:90%;max-width:800px;max-height:80vh;display:flex;flex-direction:column;box-shadow:0 20px 25px -5px rgba(0,0,0,0.1),0 10px 10px -5px rgba(0,0,0,0.04)}.modal-header{padding:1rem 1.5rem;border-bottom:1px solid var(--neutral-800);display:flex;justify-content:space-between;align-items:center}.modal-header h3{font-size:1.25rem;font-weight:600;color:var(--white)}.close-btn{background:none;border:none;color:var(--neutral-400);font-size:1.5rem;cursor:pointer;transition:color 0.2s}.close-btn:hover{color:var(--white)}.modal-body{padding:1.5rem;overflow-y:auto}.material-list-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:1rem}.material-card{background-color:var(--neutral-800);border-radius:0.5rem;padding:0.75rem;display:flex;align-items:center;gap:0.75rem;border:1px solid transparent;transition:border-color 0.2s}.material-card:hover{border-color:var(--neutral-600)}.material-icon{width:32px;height:32px;margin-right:10px;image-rendering:pixelated;image-rendering:-moz-crisp-edges;image-rendering:crisp-edges;object-fit:contain}.material-info{flex:1;min-width:0}.material-name-cn{color:var(--white);font-size:0.875rem;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.material-name-en{color:var(--neutral-500);font-size:0.75rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.material-amount{color:var(--emerald-400);font-family:monospace;font-weight:600;font-size:0.875rem}.btn-replace{background-color:transparent;border:1px solid var(--neutral-600);color:var(--neutral-400);padding:0.25rem 0.5rem;border-radius:0.25rem;font-size:0.75rem;cursor:pointer;transition:all 0.2s;margin-left:0.5rem}.btn-replace:hover{border-color:var(--emerald-500);color:var(--emerald-500);background-color:rgba(16,185,129,0.1)}.block-tooltip{position:fixed;top:80px;left:50%;transform:translateX(-50%);background-color:rgba(0,0,0,0.8);color:white;padding:10px 16px;border-radius:8px;pointer-events:auto;opacity:0;transition:opacity 0.2s,transform 0.2s;z-index:1000;display:flex;align-items:center;gap:12px;backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,0.15);box-shadow:0 4px 12px rgba(0,0,0,0.3)}.block-tooltip.visible{opacity:1;transform:translateX(-50%) translateY(0)}.tooltip-icon{width:32px;height:32px;display:flex;align-items:center;justify-content:center}.tooltip-icon .block-icon{width:32px;height:32px}.tooltip-text{display:flex;flex-direction:column;gap:2px}.tooltip-name-cn{font-size:15px}.slider-btn:active{transform:scale(0.95)}.modal{position:fixed;top:0;left:0;width:100%;height:100%;background-color:rgba(0,0,0,0.7);z-index:1000;display:flex;justify-content:center;align-items:center;backdrop-filter:blur(4px)}.modal.hidden{display:none}.modal-content{background-color:var(--neutral-900);border:1px solid var(--neutral-700);border-radius:0.75rem;width:90%;max-width:800px;max-height:80vh;display:flex;flex-direction:column;box-shadow:0 20px 25px -5px rgba(0,0,0,0.1),0 10px 10px -5px rgba(0,0,0,0.04)}.modal-header{padding:1rem 1.5rem;border-bottom:1px solid var(--neutral-800);display:flex;justify-content:space-between;align-items:center}.modal-header h3{font-size:1.25rem;font-weight:600;color:var(--white)}.close-btn{background:none;border:none;color:var(--neutral-400);font-size:1.5rem;cursor:pointer;transition:color 0.2s}.close-btn:hover{color:var(--white)}.modal-body{padding:1.5rem;overflow-y:auto}.material-list-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:1rem}.material-card{background-color:var(--neutral-800);border-radius:0.5rem;padding:0.75rem;display:flex;align-items:center;gap:0.75rem;border:1px solid transparent;transition:border-color 0.2s}.material-card:hover{border-color:var(--neutral-600)}.material-icon{width:32px;height:32px;margin-right:10px;image-rendering:pixelated;image-rendering:-moz-crisp-edges;image-rendering:crisp-edges;object-fit:contain}.material-info{flex:1;min-width:0}.material-name-cn{color:var(--white);font-size:0.875rem;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.material-name-en{color:var(--neutral-500);font-size:0.75rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.material-amount{color:var(--emerald-400);font-family:monospace;font-weight:600;font-size:0.875rem}.btn-replace{background-color:transparent;border:1px solid var(--neutral-600);color:var(--neutral-400);padding:0.25rem 0.5rem;border-radius:0.25rem;font-size:0.75rem;cursor:pointer;transition:all 0.2s;margin-left:0.5rem}.btn-replace:hover{border-color:var(--emerald-500);color:var(--emerald-500);background-color:rgba(16,185,129,0.1)}.block-tooltip{position:fixed;top:80px;left:50%;transform:translateX(-50%);background-color:rgba(0,0,0,0.8);color:white;padding:10px 16px;border-radius:8px;pointer-events:auto;opacity:0;transition:opacity 0.2s,transform 0.2s;z-index:1000;display:flex;align-items:center;gap:12px;backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,0.15);box-shadow:0 4px 12px rgba(0,0,0,0.3)}.block-tooltip.visible{opacity:1;transform:translateX(-50%) translateY(0)}.tooltip-icon{width:32px;height:32px;display:flex;align-items:center;justify-content:center}.tooltip-icon .block-icon{width:32px;height:32px}.tooltip-text{display:flex;flex-direction:column;gap:2px}.tooltip-name-cn{font-size:15px}.slider-btn:active{transform:scale(0.95)}.modal{position:fixed;top:0;left:0;width:100%;height:100%;background-color:rgba(0,0,0,0.7);z-index:1000;display:flex;justify-content:center;align-items:center;backdrop-filter:blur(4px)}.modal.hidden{display:none}.modal-content{background-color:var(--neutral-900);border:1px solid var(--neutral-700);border-radius:0.75rem;width:90%;max-width:800px;max-height:80vh;display:flex;flex-direction:column;box-shadow:0 20px 25px -5px rgba(0,0,0,0.1),0 10px 10px -5px rgba(0,0,0,0.04)}.modal-header{padding:1rem 1.5rem;border-bottom:1px solid var(--neutral-800);display:flex;justify-content:space-between;align-items:center}.modal-header h3{font-size:1.25rem;font-weight:600;color:var(--white)}.close-btn{background:none;border:none;color:var(--neutral-400);font-size:1.5rem;cursor:pointer;transition:color 0.2s}.close-btn:hover{color:var(--white)}.modal-body{padding:1.5rem;overflow-y:auto}.material-list-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:1rem}.material-card{background-color:var(--neutral-800);border-radius:0.5rem;padding:0.75rem;display:flex;align-items:center;gap:0.75rem;border:1px solid transparent;transition:border-color 0.2s}.material-card:hover{border-color:var(--neutral-600)}.material-icon{width:32px;height:32px;margin-right:10px;image-rendering:pixelated;image-rendering:-moz-crisp-edges;image-rendering:crisp-edges;object-fit:contain}.material-info{flex:1;min-width:0}.material-name-cn{color:var(--white);font-size:0.875rem;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.material-name-en{color:var(--neutral-500);font-size:0.75rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.material-amount{color:var(--emerald-400);font-family:monospace;font-weight:600;font-size:0.875rem}.btn-replace{background-color:transparent;border:1px solid var(--neutral-600);color:var(--neutral-400);padding:0.25rem 0.5rem;border-radius:0.25rem;font-size:0.75rem;cursor:pointer;transition:all 0.2s;margin-left:0.5rem}.btn-replace:hover{border-color:var(--emerald-500);color:var(--emerald-500);background-color:rgba(16,185,129,0.1)}.block-tooltip{position:fixed;top:80px;left:50%;transform:translateX(-50%);background-color:rgba(0,0,0,0.8);color:white;padding:10px 16px;border-radius:8px;pointer-events:auto;opacity:0;transition:opacity 0.2s,transform 0.2s;z-index:1000;display:flex;align-items:center;gap:12px;backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,0.15);box-shadow:0 4px 12px rgba(0,0,0,0.3)}.block-tooltip.visible{opacity:1;transform:translateX(-50%) translateY(0)}.tooltip-icon{width:32px;height:32px;display:flex;align-items:center;justify-content:center}.tooltip-icon .block-icon{width:32px;height:32px}.tooltip-text{display:flex;flex-direction:column;gap:2px}.tooltip-name-cn{font-size:15px}.slider-btn:active{transform:scale(0.95)}.modal{position:fixed;top:0;left:0;width:100%;height:100%;background-color:rgba(0,0,0,0.7);z-index:1000;display:flex;justify-content:center;align-items:center;backdrop-filter:blur(4px)}.modal.hidden{display:none}.modal-content{background-color:var(--neutral-900);border:1px solid var(--neutral-700);border-radius:0.75rem;width:90%;max-width:800px;max-height:80vh;display:flex;flex-direction:column;box-shadow:0 20px 25px -5px rgba(0,0,0,0.1),0 10px 10px -5px rgba(0,0,0,0.04)}.modal-header{padding:1rem 1.5rem;border-bottom:1px solid var(--neutral-800);display:flex;justify-content:space-between;align-items:center}.modal-header h3{font-size:1.25rem;font-weight:600;color:var(--white)}.close-btn{background:none;border:none;color:var(--neutral-400);font-size:1.5rem;cursor:pointer;transition:color 0.2s}.close-btn:hover{color:var(--white)}.modal-body{padding:1.5rem;overflow-y:auto}.material-list-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:1rem}.material-card{background-color:var(--neutral-800);border-radius:0.5rem;padding:0.75rem;display:flex;align-items:center;gap:0.75rem;border:1px solid transparent;transition:border-color 0.2s}.material-card:hover{border-color:var(--neutral-600)}.material-icon{width:32px;height:32px;margin-right:10px;image-rendering:pixelated;image-rendering:-moz-crisp-edges;image-rendering:crisp-edges;object-fit:contain}.material-info{flex:1;min-width:0}.material-name-cn{color:var(--white);font-size:0.875rem;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.material-name-en{color:var(--neutral-500);font-size:0.75rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.material-amount{color:var(--emerald-400);font-family:monospace;font-weight:600;font-size:0.875rem}.btn-replace{background-color:transparent;border:1px solid var(--neutral-600);color:var(--neutral-400);padding:0.25rem 0.5rem;border-radius:0.25rem;font-size:0.75rem;cursor:pointer;transition:all 0.2s;margin-left:0.5rem}.btn-replace:hover{border-color:var(--emerald-500);color:var(--emerald-500);background-color:rgba(16,185,129,0.1)}.block-tooltip{position:fixed;top:80px;left:50%;transform:translateX(-50%);background-color:rgba(0,0,0,0.8);color:white;padding:10px 16px;border-radius:8px;pointer-events:auto;opacity:0;transition:opacity 0.2s,transform 0.2s;z-index:1000;display:flex;align-items:center;gap:12px;backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,0.15);box-shadow:0 4px 12px rgba(0,0,0,0.3)}.block-tooltip.visible{opacity:1;transform:translateX(-50%) translateY(0)}.tooltip-icon{width:32px;height:32px;display:flex;align-items:center;justify-content:center}.tooltip-icon .block-icon{width:32px;height:32px}.tooltip-text{display:flex;flex-direction:column;gap:2px}.tooltip-name-cn{font-size:15px}.slider-btn:active{transform:scale(0.95)}.modal{position:fixed;top:0;left:0;width:100%;height:100%;background-color:rgba(0,0,0,0.7);z-index:1000;display:flex;justify-content:center;align-items:center;backdrop-filter:blur(4px)}.modal.hidden{display:none}.modal-content{background-color:var(--neutral-900);border:1px solid var(--neutral-700);border-radius:0.75rem;width:90%;max-width:800px;max-height:80vh;display:flex;flex-direction:column;box-shadow:0 20px 25px -5px rgba(0,0,0,0.1),0 10px 10px -5px rgba(0,0,0,0.04)}.modal-header{padding:1rem 1.5rem;border-bottom:1px solid var(--neutral-800);display:flex;justify-content:space-between;align-items:center}.modal-header h3{font-size:1.25rem;font-weight:600;color:var(--white)}.close-btn{background:none;border:none;color:var(--neutral-400);font-size:1.5rem;cursor:pointer;transition:color 0.2s}.close-btn:hover{color:var(--white)}.modal-body{padding:1.5rem;overflow-y:auto}.material-list-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:1rem}.material-card{background-color:var(--neutral-800);border-radius:0.5rem;padding:0.75rem;display:flex;align-items:center;gap:0.75rem;border:1px solid transparent;transition:border-color 0.2s}.material-card:hover{border-color:var(--neutral-600)}.material-icon{width:32px;height:32px;margin-right:10px;image-rendering:pixelated;image-rendering:-moz-crisp-edges;image-rendering:crisp-edges;object-fit:contain}.material-info{flex:1;min-width:0}.material-name-cn{color:var(--white);font-size:0.875rem;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.material-name-en{color:var(--neutral-500);font-size:0.75rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.material-amount{color:var(--emerald-400);font-family:monospace;font-weight:600;font-size:0.875rem}.btn-replace{background-color:transparent;border:1px solid var(--neutral-600);color:var(--neutral-400);padding:0.25rem 0.5rem;border-radius:0.25rem;font-size:0.75rem;cursor:pointer;transition:all 0.2s;margin-left:0.5rem}.btn-replace:hover{border-color:var(--emerald-500);color:var(--emerald-500);background-color:rgba(16,185,129,0.1)}.block-tooltip{position:fixed;top:80px;left:50%;transform:translateX(-50%);background-color:rgba(0,0,0,0.8);color:white;padding:10px 16px;border-radius:8px;pointer-events:auto;opacity:0;transition:opacity 0.2s,transform 0.2s;z-index:1000;display:flex;align-items:center;gap:12px;backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,0.15);box-shadow:0 4px 12px rgba(0,0,0,0.3)}.block-tooltip.visible{opacity:1;transform:translateX(-50%) translateY(0)}.tooltip-icon{width:32px;height:32px;display:flex;align-items:center;justify-content:center}.tooltip-icon .block-icon{width:32px;height:32px}.tooltip-text{display:flex;flex-direction:column;gap:2px}.tooltip-name-cn{font-size:15px}.slider-btn:active{transform:scale(0.95)}.modal{position:fixed;top:0;left:0;width:100%;height:100%;background-color:rgba(0,0,0,0.7);z-index:1000;display:flex;justify-content:center;align-items:center;backdrop-filter:blur(4px)}.modal.hidden{display:none}.modal-content{background-color:var(--neutral-900);border:1px solid var(--neutral-700);border-radius:0.75rem;width:90%;max-width:800px;max-height:80vh;display:flex;flex-direction:column;box-shadow:0 20px 25px -5px rgba(0,0,0,0.1),0 10px 10px -5px rgba(0,0,0,0.04)}.modal-header{padding:1rem 1.5rem;border-bottom:1px solid var(--neutral-800);display:flex;justify-content:space-between;align-items:center}.modal-header h3{font-size:1.25rem;font-weight:600;color:var(--white)}.close-btn{background:none;border:none;color:var(--neutral-400);font-size:1.5rem;cursor:pointer;transition:color 0.2s}.close-btn:hover{color:var(--white)}.modal-body{padding:1.5rem;overflow-y:auto}.material-list-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:1rem}.material-card{background-color:var(--neutral-800);border-radius:0.5rem;padding:0.75rem;display:flex;align-items:center;gap:0.75rem;border:1px solid transparent;transition:border-color 0.2s}.material-card:hover{border-color:var(--neutral-600)}.material-icon{width:32px;height:32px;margin-right:10px;image-rendering:pixelated;image-rendering:-moz-crisp-edges;image-rendering:crisp-edges;object-fit:contain}.material-info{flex:1;min-width:0}.material-name-cn{color:var(--white);font-size:0.875rem;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.material-name-en{color:var(--neutral-500);font-size:0.75rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.material-amount{color:var(--emerald-400);font-family:monospace;font-weight:600;font-size:0.875rem}#confirmation-modal{z-index:1200}.btn-replace-tooltip{background:none;border:1px solid rgba(255,255,255,0.2);color:rgba(255,255,255,0.8);border-radius:4px;padding:4px 8px;font-size:12px;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all 0.2s;margin-left:12px;pointer-events:auto;white-space:nowrap}.btn-replace-tooltip:hover{background-color:rgba(16,185,129,0.2);border-color:var(--emerald-500);color:var(--emerald-500)}.sidebar-footer{display:flex;flex-direction:column;gap:0.75rem}.ad-container{display:flex;flex-direction:column;gap:0.5rem}.ad-btn{display:flex;align-items:center;justify-content:center;padding:0.5rem;background-color:rgba(234,179,8,0.1);border:1px solid rgba(234,179,8,0.3);color:var(--yellow-400);border-radius:0.375rem;font-size:0.75rem;font-weight:500;text-decoration:none;transition:all 0.2s;text-align:center}.ad-btn:hover{background-color:rgba(234,179,8,0.2);border-color:var(--yellow-400)}.qq-group-grid{display:grid;grid-template-columns:1fr 1fr;gap:0.5rem}.qq-btn{display:flex;align-items:center;justify-content:center;gap:0.4rem;padding:0.5rem;background-color:var(--neutral-800);border:1px solid var(--neutral-700);color:var(--neutral-300);border-radius:0.375rem;font-size:0.75rem;text-decoration:none;transition:all 0.2s}.modal.hidden{display:none}.modal-content{background-color:var(--neutral-900);border:1px solid var(--neutral-700);border-radius:0.75rem;width:90%;max-width:800px;max-height:80vh;display:flex;flex-direction:column;box-shadow:0 20px 25px -5px rgba(0,0,0,0.1),0 10px 10px -5px rgba(0,0,0,0.04)}.modal-header{padding:1rem 1.5rem;border-bottom:1px solid var(--neutral-800);display:flex;justify-content:space-between;align-items:center}.modal-header h3{font-size:1.25rem;font-weight:600;color:var(--white)}.close-btn{background:none;border:none;color:var(--neutral-400);font-size:1.5rem;cursor:pointer;transition:color 0.2s}.close-btn:hover{color:var(--white)}.modal-body{padding:1.5rem;overflow-y:auto}.material-list-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:1rem}.material-card{background-color:var(--neutral-800);border-radius:0.5rem;padding:0.75rem;display:flex;align-items:center;gap:0.75rem;border:1px solid transparent;transition:border-color 0.2s}.material-card:hover{border-color:var(--neutral-600)}.material-icon{width:32px;height:32px;margin-right:10px;image-rendering:pixelated;image-rendering:-moz-crisp-edges;image-rendering:crisp-edges;object-fit:contain}.material-info{flex:1;min-width:0}.material-name-cn{color:var(--white);font-size:0.875rem;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.material-name-en{color:var(--neutral-500);font-size:0.75rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.material-amount{color:var(--emerald-400);font-family:monospace;font-weight:600;font-size:0.875rem}#confirmation-modal{z-index:1200}.btn-replace-tooltip{background:none;border:1px solid rgba(255,255,255,0.2);color:rgba(255,255,255,0.8);border-radius:4px;padding:4px 8px;font-size:12px;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all 0.2s;gap:0.75rem}.ad-container{display:flex;flex-direction:column;gap:0.5rem}.ad-btn{display:flex;align-items:center;justify-content:center;padding:0.5rem;background-color:rgba(234,179,8,0.1);border:1px solid rgba(234,179,8,0.3);color:var(--yellow-400);border-radius:0.375rem;font-size:0.75rem;font-weight:500;text-decoration:none;transition:all 0.2s;text-align:center}.ad-btn:hover{background-color:rgba(234,179,8,0.2);border-color:var(--yellow-400)}.qq-group-grid{display:grid;grid-template-columns:1fr 1fr;gap:0.5rem}.qq-btn{display:flex;align-items:center;justify-content:center;gap:0.4rem;padding:0.5rem;background-color:var(--neutral-800);border:1px solid var(--neutral-700);color:var(--neutral-300);border-radius:0.375rem;font-size:0.75rem;text-decoration:none;transition:all 0.2s}.qq-btn:hover{background-color:var(--neutral-700);color:var(--white);border-color:var(--neutral-600)}.qq-btn i{font-size:0.875rem}#block-selector-modal{z-index:1100}.category-topbar{display:flex;gap:1rem;padding:1rem;border-bottom:1px solid var(--neutral-800);overflow-x:auto;margin:0}.category-btn{background:transparent;border:1px solid var(--neutral-700);color:var(--neutral-400);padding:0.5rem 1.25rem;border-radius:0.5rem;cursor:pointer;white-space:nowrap;transition:all 0.2s;flex-shrink:0}.category-btn:hover{border-color:var(--neutral-500);color:var(--neutral-200)}.category-btn.active{.modal-body{padding:1.5rem;overflow-y:auto}.material-list-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:1rem}.material-card{background-color:var(--neutral-800);border-radius:0.5rem;padding:0.75rem;display:flex;align-items:center;gap:0.75rem;border:1px solid transparent;transition:border-color 0.2s}.material-card:hover{border-color:var(--neutral-600)}.material-icon{width:32px;height:32px;margin-right:10px;image-rendering:pixelated;image-rendering:-moz-crisp-edges;image-rendering:crisp-edges;object-fit:contain}.material-info{flex:1;min-width:0}.material-name-cn{color:var(--white);font-size:0.875rem;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.material-name-en{color:var(--neutral-500);font-size:0.75rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.material-amount{color:var(--emerald-400);font-family:monospace;font-weight:600;font-size:0.875rem}#confirmation-modal{z-index:1200}.btn-replace-tooltip{background:none;border:1px solid rgba(255,255,255,0.2);color:rgba(255,255,255,0.8);border-radius:4px;padding:4px 8px;font-size:12px;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all 0.2s;gap:0.75rem}.ad-container{display:flex;flex-direction:column;gap:0.5rem}.ad-btn{display:flex;align-items:center;justify-content:center;padding:0.5rem;background-color:rgba(234,179,8,0.1);border:1px solid rgba(234,179,8,0.3);color:var(--yellow-400);border-radius:0.375rem;font-size:0.75rem;font-weight:500;text-decoration:none;transition:all 0.2s;text-align:center}.ad-btn:hover{background-color:rgba(234,179,8,0.2);border-color:var(--yellow-400)}.qq-group-grid{display:grid;grid-template-columns:1fr 1fr;gap:0.5rem}.qq-btn{display:flex;align-items:center;justify-content:center;gap:0.4rem;padding:0.5rem;background-color:var(--neutral-800);border:1px solid var(--neutral-700);color:var(--neutral-300);border-radius:0.375rem;font-size:0.75rem;text-decoration:none;transition:all 0.2s}.qq-btn:hover{background-color:var(--neutral-700);color:var(--white);border-color:var(--neutral-600)}.qq-btn i{font-size:0.875rem}#block-selector-modal{z-index:1100}.category-topbar{display:flex;gap:1rem;padding:1rem;border-bottom:1px solid var(--neutral-800);overflow-x:auto;margin:0}.category-btn{background:transparent;border:1px solid var(--neutral-700);color:var(--neutral-400);padding:0.5rem 1.25rem;border-radius:0.5rem;cursor:pointer;white-space:nowrap;transition:all 0.2s;flex-shrink:0}.category-btn:hover{border-color:var(--neutral-500);color:var(--neutral-200)}.category-btn.active{background-color:var(--emerald-600);border-color:var(--emerald-500);color:white}#block-selector-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:0.5rem;padding:1rem;overflow-y:auto;flex:1}.block-item{display:flex;align-items:center;gap:0.5rem;padding:0.25rem 0.5rem;border-radius:0.5rem;cursor:pointer;transition:background-color 0.2s;background-color:transparent}.block-item:hover{background-color:var(--neutral-800)}.block-item-icon{width:28px !important;height:28px !important;flex-shrink:0}.block-item-icon img{width:100%;height:100%;image-rendering:pixelated;image-rendering:-moz-crisp-edges;image-rendering:crisp-edges}.block-item-info{display:flex;flex-direction:column;overflow:hidden;flex:1;min-width:0;gap:0.1rem}.block-item-name-cn{color:var(--white);font-size:0.8rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.2}.block-item-name-en{color:var(--neutral-500);font-size:0.7rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.1}.close-btn:hover{color:var(--white)}.modal-body{padding:1.5rem;overflow-y:auto}.material-list-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:1rem}.material-card{background-color:var(--neutral-800);border-radius:0.5rem;padding:0.75rem;display:flex;align-items:center;gap:0.75rem;border:1px solid transparent;transition:border-color 0.2s}.material-card:hover{border-color:var(--neutral-600)}.material-icon{width:32px;height:32px;margin-right:10px;image-rendering:pixelated;image-rendering:-moz-crisp-edges;image-rendering:crisp-edges;object-fit:contain}.material-info{flex:1;min-width:0}.material-name-cn{color:var(--white);font-size:0.875rem;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.material-name-en{color:var(--neutral-500);font-size:0.75rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.material-amount{color:var(--emerald-400);font-family:monospace;font-weight:600;font-size:0.875rem}#confirmation-modal{z-index:1200}.btn-replace-tooltip{background:none;border:1px solid rgba(255,255,255,0.2);color:rgba(255,255,255,0.8);border-radius:4px;padding:4px 8px;font-size:12px;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all 0.2s;gap:0.75rem}.ad-container{display:flex;flex-direction:column;gap:0.5rem}.ad-btn{display:flex;align-items:center;justify-content:center;padding:0.5rem;background-color:rgba(234,179,8,0.1);border:1px solid rgba(234,179,8,0.3);color:var(--yellow-400);border-radius:0.375rem;font-size:0.75rem;font-weight:500;text-decoration:none;transition:all 0.2s;text-align:center}.ad-btn:hover{background-color:rgba(234,179,8,0.2);border-color:var(--yellow-400)}.qq-group-grid{display:grid;grid-template-columns:1fr 1fr;gap:0.5rem}.qq-btn{display:flex;align-items:center;justify-content:center;gap:0.4rem;padding:0.5rem;background-color:var(--neutral-800);border:1px solid var(--neutral-700);color:var(--neutral-300);border-radius:0.375rem;font-size:0.75rem;text-decoration:none;transition:all 0.2s}.qq-btn:hover{background-color:var(--neutral-700);color:var(--white);border-color:var(--neutral-600)}.qq-btn i{font-size:0.875rem}#block-selector-modal{z-index:1100}.category-topbar{display:flex;gap:1rem;padding:1rem;border-bottom:1px solid var(--neutral-800);overflow-x:auto;margin:0}.category-btn{background:transparent;border:1px solid var(--neutral-700);color:var(--neutral-400);padding:0.5rem 1.25rem;border-radius:0.5rem;cursor:pointer;white-space:nowrap;transition:all 0.2s;flex-shrink:0}.category-btn:hover{border-color:var(--neutral-500);color:var(--neutral-200)}.btn-view-container{background:linear-gradient(135deg,var(--emerald-600),#047857);color:var(--white);border:none;padding:0.5rem 0.75rem;border-radius:0.375rem;cursor:pointer;font-size:0.75rem;font-weight:500;transition:all 0.2s}.btn-view-container:hover{background:linear-gradient(135deg,var(--emerald-500),var(--emerald-600))}.tooltip-buttons{display:flex;flex-wrap:wrap;gap:0.5rem;margin-top:0.5rem}.modal-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background-color:rgba(0,0,0,0.8);z-index:2000;display:flex;justify-content:center;align-items:center;backdrop-filter:blur(8px)}.container-modal-content{background:var(--neutral-800);border:1px solid var(--neutral-600);border-radius:1rem;width:90%;max-width:600px;max-height:80vh;display:flex;flex-direction:column}.container-modal-content .modal-header{padding:1.25rem 1.5rem;border-bottom:1px solid var(--neutral-700);display:flex;flex-wrap:wrap;align-items:center;gap:0.75rem;position:relative}.container-modal-content .modal-header h2{font-size:1.25rem;font-weight:600;color:var(--white);margin:0}.modal-subtitle{font-size:0.75rem;color:var(--neutral-400)}.modal-close{position:absolute;top:1rem;right:1rem;background:none;border:none;color:var(--neutral-400);font-size:1.5rem;cursor:pointer}.modal-close:hover{color:var(--white)}.container-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:0.75rem;padding:1.5rem;overflow-y:auto;max-height:50vh}.container-slot{background:var(--neutral-700);border:1px solid var(--neutral-600);border-radius:0.5rem;padding:0.75rem;display:flex;flex-direction:column;align-items:center;gap:0.5rem;position:relative}.container-slot:hover{border-color:var(--emerald-500)}.slot-icon{width:40px;height:40px;display:flex;align-items:center;justify-content:center}.slot-icon .block-icon{width:40px !important;height:40px !important}.slot-count{position:absolute;bottom:0.5rem;right:0.5rem;background:var(--emerald-600);color:var(--white);font-size:0.7rem;font-weight:600;padding:0.15rem 0.4rem;border-radius:0.25rem}.slot-name{font-size:0.7rem;color:var(--neutral-300);text-align:center}.container-empty{grid-column:1 / -1;text-align:center;padding:2rem;color:var(--neutral-500)}.item-icon-placeholder{width:40px;height:40px;background:var(--neutral-600);border-radius:0.25rem;display:flex;align-items:center;justify-content:center;color:var(--neutral-400);font-size:1.5rem}.modal-footer{padding:1rem 1.5rem;border-top:1px solid var(--neutral-700);display:flex;justify-content:flex-end}.btn-secondary{background:var(--neutral-700);color:var(--white);border:1px solid var(--neutral-600);padding:0.5rem 1.25rem;border-radius:0.5rem;cursor:pointer}.btn-secondary:hover{background:var(--neutral-600)}.tooltip-buttons{display:flex;gap:8px;width:100%;margin-top:8px}.tooltip-buttons .btn{flex:1;padding:6px 12px;font-size:0.75rem;border-radius:6px;cursor:pointer;transition:all 0.2s;display:flex;align-items:center;justify-content:center;gap:4px}.btn-replace-tooltip{background:var(--neutral-700);color:var(--neutral-200);border:1px solid var(--neutral-600)}.btn-replace-tooltip:hover{background:var(--neutral-600);border-color:var(--neutral-500)}.btn-view-container{background:var(--neutral-700);color:var(--emerald-400);border:1px solid rgba(16,185,129,0.3)}.btn-view-container:hover{background:var(--neutral-600);border-color:var(--emerald-400)}