.conversion-page{margin-top:22px;min-width:0}
.conversion-page button:focus-visible,.conversion-material:focus-visible{outline:2px solid #e8d398;outline-offset:3px}
.conversion-tabs{display:flex;gap:8px;overflow-x:auto;padding:4px 3px 0;border-bottom:1px solid #49553b;scrollbar-width:thin;scrollbar-color:#8f8454 #132119}
.conversion-tabs button{flex:0 0 auto;display:flex;align-items:center;gap:5px;padding:11px 9px 14px;border-bottom:2px solid transparent;color:#90a080;font-size:10px;white-space:nowrap}
.conversion-tabs svg{width:13px;height:13px;color:#78886d}
.conversion-tabs [aria-selected=true]{color:#ecdbad;border-color:#d1b772}
.conversion-tabs [aria-selected=true] svg{color:#d1b772}
.conversion-recipes{display:grid;gap:22px}
.conversion-group h3{display:flex;align-items:center;gap:7px;margin:0 0 10px;color:#b5bc94;font-size:11px;font-weight:400}
.conversion-group{min-width:0}
.conversion-group h3 svg{width:13px;height:13px;color:#7f8c70}
.conversion-choices{display:flex;gap:6px;padding:10px;border-bottom:1px solid #405035}
.conversion-choices button{display:flex;align-items:center;justify-content:center;gap:6px;flex:1;min-width:0;padding:6px;border:1px solid #3f513a;border-radius:3px;font-size:10px;color:#93a282;background:#112018}
.conversion-choices img{width:28px;height:28px;image-rendering:pixelated}
.conversion-choices b{font:11px ui-monospace,Consolas,monospace}
.conversion-choices [aria-pressed=true]{border-color:#c6b57a;color:#e4d5aa;background:#5b502b45}
.conversion-card{--conversion-color:#e3e8ce;border:1px solid #47563c;border-radius:5px;overflow:hidden;background:radial-gradient(ellipse at 80% 15%,#72895418,transparent 60%),#132119}
.conversion-card[data-rarity=uncommon]{--conversion-color:#7ddcff}
.conversion-card[data-rarity=rare]{--conversion-color:#b78aff}
.conversion-card.locked{border-color:#334431}
.conversion-card.locked .conversion-formula{opacity:.5}
.conversion-formula{display:flex;justify-content:center;align-items:center;gap:20px;padding:24px 16px 20px}
.conversion-inputs{display:flex;align-items:center;justify-content:center;gap:8px;min-width:0}
.conversion-material{display:flex;flex-direction:column;align-items:center;gap:8px;position:relative;width:92px;min-width:0}
.conversion-art{width:64px;height:64px;position:relative;display:grid;place-items:center;border:1px solid #8b93754a;border-radius:4px;background:#34413145}
.conversion-material[data-rarity=uncommon] .conversion-art{border-color:#7ddcff70;background:#7ddcff0a}
.conversion-material[data-rarity=rare] .conversion-art{border-color:#b78aff70;background:#b78aff0a}
.conversion-art img{width:54px;height:54px;image-rendering:pixelated;filter:drop-shadow(0 3px 4px #0008)}
.conversion-art>b{position:absolute;right:4px;bottom:3px;font:13px ui-monospace,Consolas,monospace;color:#fff;text-shadow:0 1px 3px #000,0 0 4px #000}
.conversion-material>strong{max-width:100%;font-size:10px;font-weight:400;text-align:center;line-height:1.5;overflow-wrap:anywhere}
.conversion-material>small{font-size:9px;color:#859b7c;overflow-wrap:anywhere;text-align:center;max-width:100%}
.conversion-material>small b{font-weight:400;color:#d5dbb6}
.conversion-material.insufficient>small b{color:#dd997d}
.conversion-plus{font-size:12px;color:#798769;flex-shrink:0}
.conversion-arrow{color:var(--conversion-color);flex-shrink:0}
.conversion-arrow svg{width:28px;height:28px;filter:drop-shadow(0 0 5px var(--conversion-color))}
.conversion-output{position:relative}
.conversion-output .conversion-art{box-shadow:0 0 22px #d4e8a613}
.conversion-spark{display:none;pointer-events:none;position:absolute;right:-10px;top:-8px;color:var(--conversion-color);font-style:normal;font-size:28px;text-shadow:0 0 18px currentColor}
.conversion-actions{display:flex;align-items:center;flex-wrap:wrap;gap:9px;padding:14px 16px;border-top:1px solid #405035;background:#0e1b1560}
.conversion-state{display:flex;align-items:center;gap:6px;flex:1;min-width:0;font-size:10px;line-height:1.7;color:#97aa86}
.conversion-state svg{width:13px;height:13px;flex-shrink:0}
.conversion-actions button{min-height:36px;padding:8px 13px;font-size:10px;gap:6px;flex-shrink:0}
.conversion-actions .secondary-button{display:flex;align-items:center}
.conversion-actions .secondary-button b{font:11px ui-monospace,Consolas,monospace}
.conversion-actions button:disabled{opacity:.35;cursor:default}
.conversion-feedback{display:flex;justify-content:center;align-items:center;gap:9px;min-height:44px;color:#dfdab0;font-size:11px}
.conversion-feedback img{width:32px;height:32px;image-rendering:pixelated}
.conversion-feedback b{font:16px ui-monospace,Consolas,monospace;color:#decc8e}
.conversion-card.converted .conversion-output .conversion-art{animation:conversion-flare .8s ease-out}
.conversion-card.converted .conversion-spark{display:block;animation:conversion-spark .8s ease-out forwards}
@keyframes conversion-flare{0%{transform:scale(.85);filter:brightness(3);box-shadow:0 0 45px var(--conversion-color)}45%{transform:scale(1.15);filter:brightness(1.6)}100%{transform:scale(1);filter:brightness(1)}}
@keyframes conversion-spark{0%{opacity:0;transform:scale(.4) rotate(-40deg)}35%{opacity:1;transform:scale(1.3) rotate(10deg)}100%{opacity:0;transform:translateY(-25px) scale(.6) rotate(70deg)}}
@media(max-width:580px){
  .inventory-menu:has(.conversion-page){padding:20px 12px}
  .inventory-menu:has(.conversion-page) .inventory-toolbar{flex-wrap:wrap}
  .conversion-choices{gap:4px;padding:8px}
  .conversion-choices button{flex-wrap:wrap;gap:3px;font-size:9px}
  .conversion-choices button span{flex-basis:100%;order:1;text-align:center}
  .conversion-tabs{gap:2px}
  .conversion-tabs button{font-size:10px;padding:10px 7px 12px}
  .conversion-formula{gap:8px;padding:20px 8px}
  .conversion-inputs{gap:3px}
  .conversion-material{width:58px;gap:7px}
  .conversion-art{width:47px;height:47px}
  .conversion-art img{width:41px;height:41px}
  .conversion-art>b{font-size:11px}
  .conversion-material>strong{font-size:9px;min-height:27px}
  .conversion-plus{font-size:10px}
  .conversion-arrow svg{width:20px;height:20px}
  .conversion-actions{padding:12px 10px;flex-wrap:wrap;gap:7px}
  .conversion-state{flex-basis:100%;font-size:9px}
  .conversion-actions button{padding:8px;flex-grow:1}
  .conversion-feedback{font-size:10px}
}
@media(prefers-reduced-motion:reduce){.conversion-card.converted *{animation:none!important}.conversion-spark{display:none!important}}
@media(max-width:380px){
  .conversion-formula{gap:6px;padding:18px 6px}
  .conversion-inputs{gap:2px}
  .conversion-material{width:46px}
  .conversion-art{width:38px;height:38px}
  .conversion-art img{width:34px;height:34px}
  .conversion-plus{font-size:9px}
  .conversion-arrow svg{width:16px;height:16px}
}