.recipe-wrapper{display:flex;flex-direction:column;width:100%;height:100%;gap:.5rem;overflow:hidden}.recipe-search-container{flex-shrink:0;background:linear-gradient(135deg,#181e30f2,#20283ae6);padding:.85rem 1.3rem;border-radius:var(--radius-md);border:1px solid rgba(59,130,246,.35);display:flex;gap:1rem;align-items:center;justify-content:space-between;flex-wrap:wrap;box-shadow:0 0 20px #3b82f61f,0 0 40px #3b82f60f}.search-group{flex:1;min-width:250px;position:relative;display:flex;align-items:center}.search-icon{position:absolute;left:1rem;color:rgb(var(--c-text-dim));pointer-events:none}.recipe-search-input{width:100%;padding:.8rem 1rem .8rem 2.8rem;background:rgb(var(--c-bg-input));border:1px solid rgb(var(--c-border));border-radius:var(--radius-sm);color:rgb(var(--c-text-primary));font-size:.95rem;transition:all .2s}.recipe-search-input:focus{outline:none;border-color:rgb(var(--c-accent));box-shadow:0 0 0 2px rgba(var(--c-accent),.2)}.filter-group{display:flex;gap:1rem;align-items:center}.level-select{padding:.8rem 2.5rem .8rem 1rem;background:rgb(var(--c-bg-input));border:1px solid rgb(var(--c-border));border-radius:var(--radius-sm);color:rgb(var(--c-text-primary));font-size:.9rem;cursor:pointer;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='rgb(148, 163, 184)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right .8rem center}.level-select:focus{outline:none;border-color:rgb(var(--c-accent))}.recipe-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(420px,1fr));gap:.7rem;width:100%;flex:1;align-content:start;overflow:hidden}.stats-group{display:flex;align-items:center;margin-left:auto}.results-count{color:rgb(var(--c-text-secondary));font-size:.9rem;font-weight:500;background:rgba(var(--c-bg-input),.5);padding:.4rem .8rem;border-radius:var(--radius-sm);border:1px solid rgb(var(--c-border))}.recipe-card{background:linear-gradient(135deg,#181e30f7,#20283afa);border:2px solid rgba(220,38,38,.5);box-shadow:0 0 20px #dc262626,inset 0 0 10px #dc26260f;border-radius:var(--radius-md);overflow:hidden;transition:all .25s cubic-bezier(.4,0,.2,1);display:flex;flex-direction:column;position:relative;min-height:140px}.recipe-card:before{content:"";position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent 0%,rgba(220,38,38,.15) 50%,transparent 100%);transition:left .4s ease;pointer-events:none}.recipe-card:after{content:"";position:absolute;bottom:0;left:0;width:100%;height:2px;background:linear-gradient(90deg,transparent,rgba(220,38,38,.6),transparent);opacity:.5}.recipe-card:hover{transform:translateY(-3px) scale(1.01);box-shadow:0 0 30px #dc262640,0 0 15px #dc262626,inset 0 0 15px #dc26261a;border-color:#dc2626cc;background:linear-gradient(135deg,#23283cfa,#283246)}.recipe-card:hover:before{left:100%}.recipe-card:hover:after{opacity:1;background:linear-gradient(90deg,transparent,rgba(220,38,38,1),transparent)}.recipe-header{background:linear-gradient(90deg,rgba(220,38,38,.12) 0%,transparent 100%);padding:.38rem .65rem;border-bottom:1px solid rgba(220,38,38,.3);display:flex;justify-content:space-between;align-items:center;gap:.4rem;flex-shrink:0}.recipe-name{font-weight:800;font-size:1.05rem;color:#fef2f2;text-shadow:0 0 15px rgba(220,38,38,.7),0 0 30px rgba(220,38,38,.3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1;min-width:0;letter-spacing:.8px;text-transform:uppercase}.recipe-level{font-size:.8rem;font-weight:600;color:rgb(var(--c-text-dim));background:rgba(var(--c-border),.3);padding:.2rem .6rem;border-radius:var(--radius-sm);white-space:nowrap}.recipe-body{padding:.5rem .6rem;flex:1;display:flex;align-items:flex-start;background:linear-gradient(180deg,rgba(220,38,38,.02) 0%,transparent 100%)}.materials-list{display:flex;flex-wrap:wrap;gap:.35rem;width:100%;align-content:flex-start}.material-item{display:flex;align-items:center;gap:.3rem;padding:.28rem .45rem;background:linear-gradient(135deg,#3b82f61f,#1d4ed814);border:1px solid rgba(59,130,246,.3);border-radius:4px;transition:all .18s ease-out;font-size:.78rem;flex:1 1 auto;min-width:48%;max-width:100%}.material-item:hover{background:linear-gradient(135deg,#3b82f626,#1d4ed81a);border-color:#3b82f680;box-shadow:0 0 8px #3b82f626;transform:scale(1.02)}.mat-left{display:flex;align-items:center;gap:.25rem;flex:1;min-width:0}.mat-count{font-weight:700;color:#f87171;font-size:.75rem;text-shadow:0 0 5px rgba(220,38,38,.45)}.mat-name{color:#bfdbfe;font-size:.75rem;overflow:hidden;text-overflow:ellipsis;flex:1;min-width:0;font-weight:500;text-transform:uppercase;letter-spacing:.2px}.mat-source-btn{display:flex;align-items:center;justify-content:center;width:20px;height:20px;padding:0;background:rgba(var(--c-accent),.15);color:rgb(var(--c-accent));border-radius:3px;cursor:pointer;border:none;transition:all .2s;flex-shrink:0}.mat-source-icons{display:flex;gap:2px}.mat-source-btn:hover{background:rgb(var(--c-accent));color:rgb(var(--c-bg-app))}.mat-source-drop{background:#22c55e33;color:#22c55e}.mat-source-drop:hover{background:#22c55e;color:rgb(var(--c-bg-app))}.mat-source-craft{background:#fbbf2433;color:#fbbf24}.mat-source-craft:hover{background:#fbbf24;color:rgb(var(--c-bg-app))}.source-popover{position:fixed;z-index:100;width:320px;max-height:400px;overflow-y:auto;background:rgb(var(--c-bg-card));border:1px solid rgb(var(--c-accent));border-radius:var(--radius-md);box-shadow:0 20px 25px -5px #00000080,0 10px 10px -5px #0000004d;padding:1rem;animation:fadeIn .15s ease-out}.popover-header{display:flex;align-items:center;gap:.5rem;font-weight:700;color:rgb(var(--c-text-primary));margin-bottom:.8rem;padding-bottom:.5rem;border-bottom:1px solid rgb(var(--c-border));font-size:.9rem}.popover-back-btn{display:flex;align-items:center;justify-content:center;width:22px;height:22px;padding:0;background:rgba(var(--c-accent),.2);border:1px solid rgb(var(--c-accent));border-radius:4px;color:rgb(var(--c-accent));cursor:pointer;transition:all .15s}.popover-back-btn:hover{background:rgb(var(--c-accent));color:rgb(var(--c-bg-app))}.popover-depth{margin-left:auto;font-size:.7rem;font-weight:400;color:rgb(var(--c-text-dim))}.popover-content{display:flex;flex-direction:column;gap:1rem}.popover-section{display:flex;flex-direction:column;gap:.5rem}.popover-section-title{display:flex;align-items:center;gap:.4rem;font-weight:600;font-size:.8rem;color:rgb(var(--c-accent));padding-bottom:.3rem;border-bottom:1px dashed rgba(var(--c-border),.5)}.popover-drops{max-height:150px;overflow-y:auto;display:flex;flex-direction:column;gap:.4rem}.popover-drop-item{font-size:.8rem;color:rgb(var(--c-text-secondary));display:flex;justify-content:space-between;gap:.5rem}.popover-loc{color:#22c55e;font-weight:500}.popover-craft{display:flex;flex-direction:column;gap:.5rem}.popover-craft-info{display:flex;gap:1rem;font-size:.75rem;color:rgb(var(--c-text-dim))}.popover-craft-info span:first-child{color:rgb(var(--c-accent))}.popover-craft-info span:last-child{color:#22c55e}.popover-craft-mats{display:flex;flex-direction:column;gap:.3rem;padding-left:.5rem;border-left:2px solid rgba(var(--c-accent),.3)}.popover-craft-mat{font-size:.8rem;color:rgb(var(--c-text-secondary));display:flex;gap:.4rem}.popover-craft-mat .mat-count{color:#fbbf24;font-weight:600;min-width:30px}.popover-mat-icons{display:inline-flex;gap:3px;margin-left:auto}.popover-mat-wrapper{display:flex;flex-direction:column}.popover-expand-btn{display:inline-flex;align-items:center;gap:2px;margin-left:auto;padding:2px 6px;background:rgba(var(--c-accent),.15);border:1px solid rgba(var(--c-accent),.3);border-radius:4px;cursor:pointer;transition:all .15s}.popover-expand-btn:hover{background:rgba(var(--c-accent),.3);border-color:rgb(var(--c-accent))}.popover-expand-btn.expanded{background:rgba(var(--c-accent),.3)}.popover-expand-btn .icon-drop{color:#22c55e}.popover-expand-btn .icon-craft{color:#fbbf24}.popover-expand-btn .expand-arrow{color:rgb(var(--c-text-dim));transition:transform .15s}.popover-expand-btn.expanded .expand-arrow{transform:rotate(90deg)}.popover-mat-expanded{margin-left:1rem;margin-top:.3rem;padding-left:.5rem;border-left:2px solid rgba(var(--c-accent),.3);display:flex;flex-direction:column;gap:.4rem}.expanded-section{display:flex;flex-direction:column;gap:.2rem}.expanded-title{display:flex;align-items:center;gap:.3rem;font-size:.7rem;font-weight:600;color:rgb(var(--c-accent))}.expanded-title svg{width:10px;height:10px}.expanded-drop{font-size:.7rem;color:rgb(var(--c-text-dim));display:flex;justify-content:space-between;gap:.3rem;padding-left:.5rem}.expanded-info{font-size:.65rem;color:rgb(var(--c-text-dim));padding-left:.5rem}.expanded-mats{display:flex;flex-direction:column;padding-left:.5rem}.expanded-mat{font-size:.7rem;color:rgb(var(--c-text-secondary))}.popover-icon-btn{display:flex;align-items:center;justify-content:center;width:18px;height:18px;padding:0;border:none;border-radius:3px;cursor:pointer;transition:all .15s}.popover-icon-btn.icon-drop{background:#22c55e33;color:#22c55e}.popover-icon-btn.icon-drop:hover{background:#22c55e;color:rgb(var(--c-bg-app))}.popover-icon-btn.icon-craft{background:#fbbf2433;color:#fbbf24}.popover-icon-btn.icon-craft:hover{background:#fbbf24;color:rgb(var(--c-bg-app))}.popover-visited{margin-left:auto;font-size:.7rem;color:rgb(var(--c-text-dim))}@keyframes fadeIn{0%{opacity:0;transform:translateY(5px)}to{opacity:1;transform:translateY(0)}}.pagination-controls{flex-shrink:0;display:flex;justify-content:center;align-items:center;gap:1.5rem;padding:.75rem 1rem}.page-btn{display:flex;align-items:center;gap:.5rem;padding:.5rem 1rem;background:rgb(var(--c-bg-card));border:1px solid rgb(var(--c-border));border-radius:var(--radius-sm);color:rgb(var(--c-text-primary));font-weight:500;transition:all .2s}.page-btn:not(:disabled):hover{border-color:rgb(var(--c-accent));color:rgb(var(--c-accent))}.page-btn:disabled{opacity:.5;cursor:not-allowed}.page-info{color:rgb(var(--c-text-dim));font-size:.9rem}@media(max-width:768px){.recipe-grid{grid-template-columns:1fr}.recipe-search-container{flex-direction:column;align-items:stretch}.search-group,.filter-group,.level-select{width:100%}}.recipe-card-clickable{cursor:pointer;transition:all .2s}.recipe-card-clickable:hover{border-color:rgb(var(--c-accent));transform:translateY(-2px)}.mat-icons{display:flex;gap:3px}.mat-icons .icon-drop{color:#4ade80}.mat-icons .icon-craft{color:#fbbf24}.ho-overlay{position:fixed;inset:0;background:#000000eb;z-index:1000;display:flex;align-items:center;justify-content:center;padding:.5rem;animation:fadeIn .15s ease-out}.ho-panel{background:linear-gradient(145deg,#0e121cfc,#181e30fc,#121623fc);border:2px solid #dc2626;border-radius:var(--radius-lg);width:96%;max-width:1400px;max-height:92vh;display:flex;flex-direction:column;box-shadow:0 0 40px #dc262680,0 0 80px #dc262640,inset 0 0 20px #dc262614,0 30px 80px #000000e6}.ho-header{display:flex;align-items:center;gap:1.5rem;padding:1.15rem 1.75rem;border-bottom:2px solid rgba(220,38,38,.35);background:linear-gradient(90deg,rgba(220,38,38,.12) 0%,rgba(59,130,246,.05) 50%,transparent 100%);flex-shrink:0}.ho-item-name{font-size:1.35rem;font-weight:700;color:#fecaca;text-shadow:0 0 10px rgba(220,38,38,.5),0 2px 4px rgba(0,0,0,.6)}.ho-stats{display:flex;gap:1rem;flex:1}.ho-stat{font-size:.9rem;color:#dbeafe}.ho-stat b{color:#3b82f6;font-weight:700}.ho-stat-cost b{color:#fbbf24}.ho-close{background:transparent;border:none;color:#dbeafe;cursor:pointer;padding:.5rem;border-radius:var(--radius-sm);transition:all .2s;margin-left:auto}.ho-close:hover{color:#fecaca;background:#dc262633;box-shadow:0 0 15px #dc26264d}.ho-content{padding:1.25rem 1.5rem;display:flex;flex-direction:column;gap:.75rem;overflow-y:auto}.ho-mat-row{display:flex;align-items:flex-start;gap:1rem;padding:.85rem 1rem;background:linear-gradient(135deg,#3b82f614,#3b82f60a);border-radius:var(--radius-sm);border:1px solid rgba(59,130,246,.2);transition:all .2s}.ho-mat-row:hover{background:linear-gradient(135deg,#3b82f61f,#3b82f614);border-color:#3b82f666;box-shadow:0 0 15px #3b82f633}.ho-mat-simple{padding:.5rem 1rem;background:#dc262614;display:inline-flex;width:auto;border:1px solid rgba(220,38,38,.15)}.ho-mat-main{display:flex;align-items:center;gap:.6rem;min-width:220px;flex-shrink:0}.ho-mat-qty{font-weight:700;color:#f87171;font-size:1.15rem}.ho-mat-name{font-weight:600;color:#dbeafe;font-size:1.05rem}.ho-arrow{color:#3b82f6;flex-shrink:0;margin-top:3px}.ho-sources{display:flex;flex-wrap:wrap;gap:.6rem;flex:1}.ho-source{display:flex;align-items:flex-start;gap:.5rem;padding:.5rem .75rem;border-radius:5px;font-size:.9rem}.ho-source>svg{flex-shrink:0;margin-top:3px}.ho-source-drop{background:#4ade801f;border:1px solid rgba(74,222,128,.35)}.ho-source-drop>svg{color:#4ade80}.ho-source-craft{background:#fbbf241f;border:1px solid rgba(251,191,36,.35)}.ho-source-craft>svg{color:#fbbf24}.ho-drops-list{display:flex;flex-wrap:wrap;gap:.4rem}.ho-drop{font-size:.9rem;color:#dbeafe;padding:.15rem .4rem;border-radius:3px;transition:background .2s}.ho-drop:hover{background:#3b82f633}.ho-drop b{color:#3b82f6;font-weight:700;font-size:.95rem}.ho-more{color:#dbeafe;font-style:italic;font-size:.8rem}.ho-craft-chain{display:flex;flex-direction:column;gap:.4rem}.ho-submat{display:flex;flex-wrap:wrap;align-items:flex-start;gap:.5rem}.ho-submat-info{display:flex;align-items:center;gap:.35rem;font-size:.95rem;color:#dbeafe;font-weight:500}.ho-qty{color:#f87171;font-weight:700;font-size:1rem}.ho-cycle{color:#fecaca;font-size:.85rem;font-weight:600}.ho-submat>.ho-sources{padding-left:.6rem;border-left:2px solid rgba(59,130,246,.25);margin-left:.3rem}.ho-submat>.ho-sources .ho-source{font-size:.85rem;padding:.35rem .55rem}.ho-submat>.ho-sources .ho-drop{font-size:.85rem}.ho-submat>.ho-sources .ho-drop b{font-size:.9rem}