.craft-group{margin:26px 0 32px;position:relative}
.craft-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:14px}
.craft-card{position:relative;padding:14px;border-radius:22px;border:1px solid rgba(255,255,255,.09);background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.025));cursor:pointer;transition:.18s ease;overflow:hidden;box-shadow:0 12px 26px rgba(0,0,0,.16)}
.craft-card:hover{transform:translateY(-2px);border-color:rgba(216,182,113,.32);box-shadow:0 16px 32px rgba(0,0,0,.24)}
.craft-card::before{content:'';position:absolute;inset:0;opacity:.35;pointer-events:none}
.craft-card.r10::before{background:linear-gradient(135deg, rgba(224,184,108,.35), rgba(125,87,34,.08))}
.craft-card.r9::before{background:linear-gradient(135deg, rgba(220,102,255,.22), rgba(88,29,93,.08))}
.craft-card.r8::before{background:linear-gradient(135deg, rgba(255,190,90,.24), rgba(120,72,12,.08))}
.craft-card.r7::before,.craft-card.r4::before{background:linear-gradient(135deg, rgba(255,130,94,.18), rgba(112,40,21,.08))}
.craft-card.r6::before,.craft-card.r5::before{background:linear-gradient(135deg, rgba(255,124,163,.20), rgba(95,28,48,.08))}
.craft-card.r3::before{background:linear-gradient(135deg, rgba(255,255,255,.18), rgba(90,90,90,.08))}
.craft-card.r2::before{background:linear-gradient(135deg, rgba(140,104,255,.20), rgba(50,38,110,.08))}
.craft-card.r1::before{background:linear-gradient(135deg, rgba(91,161,255,.20), rgba(27,57,113,.08))}
.craft-card.r0::before{background:linear-gradient(135deg, rgba(170,170,170,.16), rgba(55,55,55,.08))}
.craft-card.r10{box-shadow:0 12px 28px rgba(0,0,0,.16), inset 0 0 0 1px rgba(255,220,120,.18)}
.craft-card.r9{box-shadow:0 12px 28px rgba(0,0,0,.16), inset 0 0 0 1px rgba(240,145,255,.16)}
.craft-card.r8{box-shadow:0 12px 28px rgba(0,0,0,.16), inset 0 0 0 1px rgba(255,196,108,.16)}
.craft-card.r7,.craft-card.r4{box-shadow:0 12px 28px rgba(0,0,0,.16), inset 0 0 0 1px rgba(255,158,118,.14)}
.craft-card.r6,.craft-card.r5{box-shadow:0 12px 28px rgba(0,0,0,.16), inset 0 0 0 1px rgba(255,156,201,.14)}
.craft-card.r3{box-shadow:0 12px 28px rgba(0,0,0,.16), inset 0 0 0 1px rgba(255,255,255,.16)}
.craft-card.r2{box-shadow:0 12px 28px rgba(0,0,0,.16), inset 0 0 0 1px rgba(175,149,255,.16)}
.craft-card.r1{box-shadow:0 12px 28px rgba(0,0,0,.16), inset 0 0 0 1px rgba(124,182,255,.16)}
.craft-thumb{width:68px;height:68px;border-radius:16px;overflow:hidden;border:1px solid var(--line-soft);background:#0c1019;margin-bottom:10px;position:relative;z-index:1}
.craft-thumb img{width:100%;height:100%;object-fit:cover}
.craft-card:hover .craft-thumb{box-shadow:0 0 0 1px rgba(255,255,255,.06), 0 0 18px rgba(216,182,113,.16)}
.craft-name{position:relative;z-index:1;font-weight:900;line-height:1.2;word-break:break-word}
.craft-meta{position:relative;z-index:1;margin-top:8px;font-size:12px;color:var(--muted)}
.modal-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.60);display:none;z-index:900}
.modal-backdrop.open{display:block}
.modal{position:fixed;inset:50% auto auto 50%;transform:translate(-50%,-50%);width:min(960px,calc(100vw - 32px));max-height:calc(100vh - 40px);overflow:auto;display:none;z-index:901;background:linear-gradient(180deg, rgba(11,14,22,.99), rgba(15,19,31,.99));border:1px solid rgba(216,182,113,.24);border-radius:24px;padding:20px;box-shadow:0 30px 50px rgba(0,0,0,.50)}
.modal.open{display:block}
.modal-close{position:absolute;top:14px;right:14px}
.recipe-layout{display:grid;grid-template-columns:1fr auto 1fr;gap:16px;align-items:center}
.recipe-layout-block.multi + .recipe-divider{margin:20px 0;border-top:1px solid rgba(255,255,255,.08)}
.recipe-components{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px}
.recipe-result{display:grid;justify-items:center;gap:12px;text-align:center;padding:14px;border-radius:20px;border:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.03)}
.recipe-result.r10{box-shadow:inset 0 0 0 1px rgba(224,184,108,.24)}
.recipe-result.r9{box-shadow:inset 0 0 0 1px rgba(220,102,255,.24)}
.recipe-result.r8{box-shadow:inset 0 0 0 1px rgba(255,190,90,.22)}
.recipe-result.r7,.recipe-result.r4{box-shadow:inset 0 0 0 1px rgba(255,130,94,.20)}
.recipe-result.r6,.recipe-result.r5{box-shadow:inset 0 0 0 1px rgba(255,124,163,.20)}
.recipe-result.r3{box-shadow:inset 0 0 0 1px rgba(255,255,255,.20)}
.recipe-result.r2{box-shadow:inset 0 0 0 1px rgba(140,104,255,.20)}
.recipe-result.r1{box-shadow:inset 0 0 0 1px rgba(91,161,255,.20)}
.recipe-result.r0{box-shadow:inset 0 0 0 1px rgba(170,170,170,.16)}
.recipe-arrow{font-size:34px;color:var(--gold2);font-weight:900}
.recipe-item{display:grid;grid-template-columns:54px 1fr;gap:12px;align-items:center;padding:10px;border-radius:16px;border:1px solid var(--line-soft);background:rgba(255,255,255,.04)}
.recipe-item .thumb{width:54px;height:54px;border-radius:12px;overflow:hidden;border:1px solid var(--line-soft)}
.recipe-item .thumb img,.recipe-result .thumb img{width:100%;height:100%;object-fit:cover}
.recipe-result .thumb{width:96px;height:96px;border-radius:20px;overflow:hidden;border:1px solid var(--line-soft)}
@media (max-width: 800px){.recipe-layout{grid-template-columns:1fr;}.recipe-arrow{transform:rotate(90deg);justify-self:center}}

.recipe-item.hover-recipe-item,.recipe-result.hover-recipe-result{cursor:help;transition:.16s ease}
.recipe-item.hover-recipe-item:hover,.recipe-result.hover-recipe-result:hover{border-color:rgba(216,182,113,.34);transform:translateY(-1px)}
.recipe-components{align-content:start}
.recipe-divider{border-top:1px dashed rgba(216,182,113,.24)}

.recipe-item .tooltip-sub{display:none}