/* L'établi : même cuir sombre et laiton que la sacoche et l'arbre des gestes, une seule ligne par cadre, des zones qui défilent à l'intérieur. */
#shop{padding:22px}
#shop .panel.shop-panel{display:flex;flex-direction:column;width:min(1120px,96vw);max-width:none;height:min(820px,94dvh);padding:0;overflow:hidden;text-align:left;border:1px solid #b18e58;border-radius:4px;color:#e6d6b3;background-image:url('./assets/ui/leather-grain.svg'),radial-gradient(circle at 22% 10%,#354638,#17271e 72%,#101e18);background-size:144px 144px,auto;box-shadow:inset 0 0 0 1px #0e1914,0 0 0 1px #0b1510,0 24px 80px #000b}
#shop .panel.shop-panel::before{display:none}
#shop .craft-heading{position:relative;display:flex;align-items:center;gap:14px;flex:none;padding:14px 24px;border-bottom:1px solid #b18e5855;background:linear-gradient(90deg,#68533b33,transparent)}
#shop .craft-emblem{display:grid;place-items:center;flex:none;width:44px;height:44px;border:1px solid #99794a;border-radius:50%;background:radial-gradient(#69523b66,#121b17)}
#shop .craft-emblem img{width:34px;height:34px;object-fit:contain}
#shop .craft-titles{min-width:0}
#shop .craft-heading .eyebrow{color:#e7c589;font:700 9px var(--material-sans,system-ui);letter-spacing:.16em}
#shop .craft-heading h2{margin:1px 0 2px;font:600 24px/1.1 var(--material-serif,Georgia,serif);color:#f1dfbb}
#shop .craft-heading p{margin:0;color:#d8c9a9;font:500 11.5px var(--material-sans,system-ui)}
#shop .craft-level{margin-left:auto;margin-right:52px;width:200px}
#shop .craft-level small{display:block;margin-bottom:4px;color:#cdbb92;font:600 10px var(--material-sans,system-ui);letter-spacing:.06em}
#shop .craft-xp{display:block;height:5px;border-radius:3px;background:#0f1d15;box-shadow:0 0 0 1px #8f754a66;overflow:hidden}
#shop .craft-xp i{display:block;height:100%;border-radius:3px;background:linear-gradient(90deg,#c1893f,#f0c777)}
#shop .craft-heading .close-panel{position:absolute;right:18px;top:50%;transform:translateY(-50%);width:32px;height:32px;border:1px solid #92784d;border-radius:50%;background:#1a231f;color:#e4cba1;font-size:22px;line-height:1;box-shadow:none}
#shop .craft-tabs{display:flex;flex:none;gap:6px;padding:0 24px;background:#0e1816;border-bottom:1px solid #8b724966}
#shop .craft-tabs button{padding:11px 22px 10px;border:0;border-bottom:3px solid transparent;background:transparent;color:#b9ab8b;font:600 13px var(--material-sans,system-ui);letter-spacing:.03em;cursor:pointer}
#shop .craft-tabs button:hover{color:#ecd7ac}
#shop .craft-tabs button[aria-pressed=true]{color:#ffe3a8;border-bottom-color:#d7ae6e;background:linear-gradient(#bd945225,#bd945208)}
#shop .craft-stock{display:flex;flex-wrap:wrap;gap:6px;flex:none;padding:9px 24px;border-bottom:1px solid #8b724944;background:#111a183b}
#shop .craft-stock .mat{display:inline-flex;align-items:center;gap:6px;padding:3px 10px 3px 4px;border:1px solid #6f5c3f;border-radius:14px;background:#101916;font:600 11px var(--material-sans,system-ui);color:#e4d6b0;cursor:help}
#shop .craft-stock .mat b{font-variant-numeric:tabular-nums;color:#fbe9c3}
#shop .craft-stock .mat small{color:#b3a98f;font-size:10px;font-weight:500}
#shop .craft-stock .mat.none{opacity:.45}
#shop .mat-icon{position:relative;display:inline-grid;place-items:center;flex:none;width:22px;height:22px;border-radius:50%;background:color-mix(in srgb,var(--tint,#888) 38%,#101916);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--tint,#888) 60%,#000)}
#shop .mat-icon img{width:16px;height:16px;object-fit:contain;filter:drop-shadow(0 1px 1px #000a)}
#shop .shard-icon{background:radial-gradient(circle at 35% 30%,#f7a7a0,#b3382f);box-shadow:inset 0 0 0 1px #6b1d18}
#shop .craft-stock .shards{border-color:#8a4a45}
#shop .craft-body{display:grid;grid-template-columns:340px minmax(0,1fr);flex:1 1 auto;min-height:0}
#shop .craft-list{display:flex;flex-direction:column;min-height:0;border-right:1px solid #8b724955;background:#0f19163a}
#shop .craft-filters{display:flex;flex-wrap:wrap;gap:5px;flex:none;padding:10px 12px 6px}
#shop .craft-filters button{padding:4px 10px;border:1px solid #6f5c3f;border-radius:12px;background:#101916;color:#cdbf9f;font:600 11px var(--material-sans,system-ui);cursor:pointer}
#shop .craft-filters button[aria-pressed=true]{border-color:#d7ae6e;color:#ffe3a8;background:#2a3a2c}
#shop .craft-rows{display:flex;flex-direction:column;gap:5px;flex:1 1 auto;min-height:0;overflow-y:auto;padding:8px 12px 12px}
#shop .craft-row{display:flex;align-items:center;gap:10px;width:100%;padding:7px 10px;border:1px solid #5d4e36;border-radius:3px;background:linear-gradient(145deg,#56533a22,#101916);color:#e4d6b0;text-align:left;cursor:pointer;transition:border-color .15s,background .15s}
#shop .craft-row:hover{border-color:#bd9b62;background:#80613b2e}
#shop .craft-row.selected{border-color:#e5bd76;background:#80613b3d}
#shop .craft-row img{width:38px;height:38px;object-fit:contain;flex:none;filter:drop-shadow(0 3px 3px #0008)}
#shop .row-text{display:grid;gap:1px;min-width:0;flex:1}
#shop .row-text strong{font:600 13px/1.2 var(--material-serif,Georgia,serif);color:#f3e5c0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#shop .row-text small{font:500 10.5px var(--material-sans,system-ui);color:#b3a98f;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#shop .craft-row.ready .row-text small{color:#9be09b}.craft-row.short .row-text small{color:#e8c06f}.craft-row.locked{opacity:.55}.craft-row.owned{opacity:.7}
#shop .row-level{flex:none;font:700 9.5px var(--material-sans,system-ui);font-style:normal;color:#cdbb92;letter-spacing:.05em}
#shop .craft-row.locked .row-level{color:#e08b7a}
#shop .craft-empty{margin:18px 14px;color:#b5aa90;font:12px/1.5 var(--material-sans,system-ui)}
#shop .grade-badge{flex:none;padding:2px 7px;border:1px solid var(--grade,#e3d6b4);border-radius:10px;color:var(--grade,#e3d6b4);font:700 9px var(--material-sans,system-ui);letter-spacing:.06em;text-transform:uppercase;white-space:nowrap}
#shop .grade-badge.big{margin-left:auto;font-size:11px;padding:4px 10px}
#shop .craft-detail{position:relative;min-height:0;overflow:hidden}
#shop .craft-scroll{height:100%;overflow-y:auto;padding:18px 26px 22px}
#shop .craft-item{display:flex;align-items:center;gap:16px;margin-bottom:10px}
#shop .craft-item>img{width:84px;height:84px;object-fit:contain;flex:none;filter:drop-shadow(0 6px 5px #000a)}
#shop .craft-item h3{margin:0 0 3px;font:600 24px/1.1 var(--material-serif,Georgia,serif);color:#f4e3bd}
#shop .craft-sub{margin:0;color:#cdbb92;font:600 11.5px var(--material-sans,system-ui)}
#shop .craft-desc{margin:6px 0 0;color:#d6c8aa;font:12.5px/1.5 var(--material-sans,system-ui)}
#shop .craft-section{margin:16px 0 7px;color:#d1b276;font:700 10px var(--material-sans,system-ui);letter-spacing:.14em;text-transform:uppercase}
#shop .craft-costs{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:6px;margin:0;padding:0;list-style:none}
#shop .craft-costs .cost{display:flex;align-items:center;gap:8px;padding:5px 10px 5px 6px;border:1px solid #5d4e36;border-radius:3px;background:#101916;font:600 12px var(--material-sans,system-ui)}
#shop .craft-costs .cost-name{flex:1;color:#e4d6b0}.craft-costs b{font-variant-numeric:tabular-nums;color:#9be09b}
#shop .craft-costs .cost.short{border-color:#8e4a3f}.craft-costs .cost.short b{color:#f08a76}
#shop .craft-fee{margin:9px 0 0;color:#cdbb92;font:600 11.5px var(--material-sans,system-ui)}.craft-fee.short{color:#f08a76}
#shop .craft-catalysts{display:flex;flex-wrap:wrap;gap:8px}
#shop .catalyst{display:flex;align-items:center;gap:8px;padding:6px 12px 6px 7px;border:1px solid #6f5c3f;border-radius:4px;background:#101916;color:#e4d6b0;font:600 12px var(--material-sans,system-ui);text-align:left;cursor:pointer}
#shop .catalyst small{display:block;color:#b3a98f;font:500 10.5px var(--material-sans,system-ui)}
#shop .catalyst.on{border-color:#f0c777;background:#2f3d2b;box-shadow:0 0 0 1px #f0c77755}
#shop .catalyst:disabled{opacity:.4;cursor:default}
#shop .craft-metrics{display:flex;flex-wrap:wrap;align-items:flex-end;gap:22px;margin-top:16px}
#shop .craft-chance{min-width:200px}
#shop .craft-chance small{display:block;color:#cdbb92;font:700 10px var(--material-sans,system-ui);letter-spacing:.12em;text-transform:uppercase}
#shop .craft-chance strong{display:block;margin:2px 0 6px;font:600 34px/1 var(--material-serif,Georgia,serif);color:#fbe9c3}
#shop .chance-rail{display:block;height:6px;border-radius:3px;background:#0f1d15;box-shadow:0 0 0 1px #8f754a66;overflow:hidden}
#shop .chance-rail i{display:block;height:100%;background:linear-gradient(90deg,#c1893f,#9be09b)}
#shop .craft-quality{display:flex;gap:8px;align-items:flex-end;height:78px}
#shop .craft-quality .q{position:relative;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;gap:2px;width:62px;height:100%}
#shop .craft-quality .q i{display:block;width:100%;min-height:2px;border-radius:2px 2px 0 0;background:var(--grade)}
#shop .craft-quality .q b{font:700 10px var(--material-sans,system-ui);color:#f1e3c0;font-variant-numeric:tabular-nums}
#shop .craft-quality .q small{font:600 8.5px var(--material-sans,system-ui);color:var(--grade);letter-spacing:.04em;text-transform:uppercase;white-space:nowrap}
#shop .craft-quality .q{--grade:#e3d6b4}
#shop .craft-risk{margin:14px 0 0;color:#b3a98f;font:11.5px/1.5 var(--material-sans,system-ui)}
#shop .craft-steps{display:flex;gap:4px}
#shop .craft-steps .step{flex:1;padding:6px 4px;border:1px solid #5d4e36;border-radius:3px;background:#101916;color:#8d856f;font:700 10px var(--material-sans,system-ui);text-align:center;text-transform:uppercase;letter-spacing:.04em}
#shop .craft-steps .step.past{color:#b3a98f}
#shop .craft-steps .step.now{border-color:var(--grade);color:var(--grade);background:#1d2a22}
#shop .craft-steps .step.next{border-style:dashed;border-color:var(--grade);color:var(--grade)}
#shop .craft-action{display:block;min-width:230px;margin-top:20px;padding:12px 22px;border:1px solid #eacb8f;border-radius:3px;background:linear-gradient(160deg,#f1d9a1,#d4ac6b 50%,#9c7040);color:#2c241a;font:700 13px var(--material-sans,system-ui);letter-spacing:.05em;cursor:pointer;box-shadow:0 3px 0 #614427}
#shop .craft-action:hover:not(:disabled){filter:brightness(1.08)}
#shop .craft-action:disabled{background:#2a3a2c;border-color:#5d4e36;color:#9c927a;box-shadow:none;cursor:default}
#shop .craft-action.danger{background:linear-gradient(160deg,#e8b49a,#c0735a 55%,#8a4332);border-color:#e6a98f;color:#2a1410;box-shadow:0 3px 0 #5a2a1e}
#shop .craft-footer{display:flex;justify-content:space-between;gap:14px;flex:none;padding:8px 24px;border-top:1px solid #8b724955;color:#bcb29a;font:10.5px var(--material-sans,system-ui)}
#shop .craft-footer kbd{padding:1px 5px;border:1px solid #92784d;border-radius:3px;background:#182a20;color:#f4dda9;font:700 9px var(--material-sans,system-ui)}
#shop .shop-qty{display:flex;align-items:center;gap:8px;margin:14px 0 4px}
#shop .shop-qty small{margin-right:6px;color:#cdbb92;font:700 10px var(--material-sans,system-ui);letter-spacing:.1em;text-transform:uppercase}
#shop .shop-qty button{min-width:32px;height:30px;border:1px solid #6f5c3f;border-radius:6px;background:#101916;color:#ecd7ac;font:700 15px var(--material-sans,system-ui);cursor:pointer}
#shop .shop-qty button:disabled{opacity:.35;cursor:default}
#shop .shop-qty button.shop-all{padding:0 10px;font-size:11px}
#shop .shop-qty b{min-width:34px;text-align:center;font:600 18px var(--material-serif,Georgia,serif);color:#fbe9c3;font-variant-numeric:tabular-nums}