/* Trade workspace: all colors inherit the shared Skinhajp theme. */
body.trade-page {
  --trade-surface: color-mix(in srgb, var(--bg-card) 85%, var(--bg-dark));
  --trade-selected: color-mix(in srgb, var(--primary) 9%, var(--bg-card));
  --trade-border: color-mix(in srgb, var(--primary) 20%, var(--line));
  --trade-shadow: 0 16px 35px color-mix(in srgb, var(--bg-dark) 70%, transparent);
  background: linear-gradient(var(--line) 1px, transparent 1px) 0 0 / 64px 64px, linear-gradient(90deg, var(--line) 1px, transparent 1px) 0 0 / 64px 64px, var(--bg-dark);
}
.trade-page main { font-family: 'Manrope', sans-serif; }
.trade-page main :not(i), .trade-page input, .trade-page select { font-family: inherit; letter-spacing: 0; }
.trade-page h1, .trade-page h2, .trade-page .p, .trade-page .tr-big { font-family: 'Sora', sans-serif; }
.trade-page .tr-wrap { max-width: 1800px; margin: 2rem auto 3rem; padding: 0 1.5rem; }
.trade-page .tr-head { display: grid; grid-template-columns: 1fr auto; text-align: left; gap: .3rem 2rem; margin-bottom: 1.6rem; }
.trade-page .tr-badge { display: none; }
.trade-page .tr-head h1 { font-size: 2rem; margin: 0; line-height: 1.25; }
.trade-page .tr-head h1 em { color: var(--primary); background: none; }
.trade-page .tr-head p { grid-column: 1; margin: 0; max-width: none; font-size: .85rem; }
.trade-page .tr-steps { grid-column: 2; grid-row: 1 / 3; align-self: center; margin: 0; gap: 1rem; }
.trade-page .tr-steps div { background: none; border: 0; padding: 0; font-size: .72rem; color: var(--text-gray); }
.trade-page .tr-steps b { background: var(--trade-selected); color: var(--primary); border: 1px solid var(--trade-border); width: 24px; height: 24px; }
.trade-page .tr-rules { grid-column: 1 / -1; justify-content: flex-start; margin-top: .65rem; gap: .8rem; }
.trade-page .tr-rules span { font-size: .68rem; }
.trade-page .tr-rules span + span:before { color: var(--primary); }
.trade-page .tr-grid { grid-template-columns: minmax(0,1fr) 264px minmax(0,1fr); gap: 1rem; }
.trade-page .tr-col { background: none; border: 0; border-radius: 0; padding: 0; min-height: 0; box-shadow: none; min-width: 0; }
.trade-page .tr-col h2 { min-height: 60px; background: var(--trade-surface); border: 1px solid var(--line); border-radius: 8px; padding: .8rem; font-size: .88rem; margin: 0 0 .7rem; }
.trade-page .tr-col h2 i { background: none; color: var(--primary); width: 22px; border-radius: 0; }
.trade-page .tr-col h2 small { background: none; padding: 0; color: var(--text-white); font-size: .78rem; white-space: nowrap; }
.trade-page .tr-inventory-note { margin: 0 0 .7rem; padding: .75rem .85rem; background: var(--trade-surface); border: 1px solid var(--line); border-radius: 8px; text-align: left; color: var(--text-gray); font-size: .72rem; line-height: 1.6; }
.trade-page .tr-items { grid-template-columns: repeat(3,minmax(0,1fr)); gap: .5rem; max-height: 740px; padding: 2px 3px 12px 2px; scrollbar-color: var(--trade-border) transparent; }
.trade-page .tr-it { display: flex; flex-direction: column; text-align: left; min-width: 0; min-height: 212px; padding: .7rem; border-radius: 8px; background: linear-gradient(155deg, var(--trade-selected), var(--trade-surface) 65%); border: 1px solid var(--line); border-bottom: 2px solid var(--trade-border); box-shadow: inset 0 1px 0 var(--line); }
.trade-page .tr-it[data-kind="special"] { background: linear-gradient(150deg, var(--trade-selected), var(--panel-2) 80%); }
.trade-page .tr-it:hover { transform: translateY(-2px); border-color: var(--trade-border); box-shadow: var(--trade-shadow); }
.trade-page .tr-it.sel { background: linear-gradient(155deg, var(--trade-selected), var(--trade-surface)); border-color: var(--primary); box-shadow: inset 0 0 0 1px var(--primary), 0 8px 24px var(--primary-glow); }
.trade-page .tr-it:before { content: ''; position: absolute; right: 8px; top: 9px; width: 17px; height: 17px; border: 1px solid var(--glass-border); border-radius: 4px; }
.trade-page .tr-it.sel:after { right: 8px; top: 9px; width: 17px; height: 17px; border-radius: 4px; background: var(--primary); color: var(--bg-dark); box-shadow: none; }
.trade-page .tr-it:focus-visible { outline: 2px solid var(--primary); outline-offset: 3px; }
.trade-page .tr-wear { color: var(--text-gray); font-size: .57rem; line-height: 18px; min-height: 18px; padding-right: 20px; }
.trade-page .tr-it img { height: 98px; aspect-ratio: auto; margin: .25rem 0 .4rem; filter: drop-shadow(0 8px 8px var(--bg-dark)); }
.trade-page .tr-it .n { margin: 0; height: auto; min-height: 3.8em; font-size: .66rem; color: var(--text-white); line-height: 1.3; overflow-wrap: anywhere; overflow: visible; }
.trade-page .tr-variant { min-height: 0; height: auto; margin: .2rem 0 0; font-size: .64rem; color: var(--primary); }
.trade-page .tr-variant:empty { display: none; }
.trade-page .tr-it .p { margin-top: auto; padding-top: .4rem; color: var(--text-white); font-size: 1rem; line-height: 1.3; }
.trade-page .tr-tools { flex-wrap: nowrap; margin-bottom: .65rem; gap: .5rem; }
.trade-page .tr-search { min-width: 0; }
.trade-page .tr-search input, .trade-page .tr-tools select, .trade-page .tr-mid input[type=url], .trade-page .tr-mid input[type=tel] { background: var(--trade-surface); border: 1px solid var(--line); color: var(--text-white); border-radius: 6px; font-size: .73rem; height: 40px; }
.trade-page .tr-search i { color: var(--text-gray); }
.trade-page .tr-search input:focus, .trade-page .tr-mid input[type=url]:focus { border-color: var(--primary); }
.trade-page .tr-chips { gap: .4rem; flex-wrap: wrap; }
.trade-page .tr-chips button { border-radius: 5px; border-color: var(--line); color: var(--text-gray); font-size: .7rem; padding: .3rem .6rem; }
.trade-page .tr-chips button.on, .trade-page .tr-chips button:hover { color: var(--primary); background: var(--trade-selected); border-color: var(--trade-border); }
.trade-page .tr-chips small { color: var(--text-gray); font-size: .62rem; }
.trade-page .tr-price { margin: .5rem 0 .65rem; }
.trade-page .tr-price-h { color: var(--text-gray); font-size: .68rem; }
.trade-page .tr-price-h b { color: var(--primary); }
.trade-page .tr-range:before { background: var(--line); }
.trade-page .tr-range-fill { background: var(--primary); }
.trade-page .tr-range input::-webkit-slider-thumb { background: var(--primary); border-color: var(--bg-dark); box-shadow: 0 0 8px var(--primary-glow); width: 16px; height: 16px; }
.trade-page .tr-range input::-moz-range-thumb { background: var(--primary); border-color: var(--bg-dark); }
.trade-page .tr-mid { top: 98px; background: var(--trade-surface); border-color: var(--trade-border); border-radius: 8px; padding: 1rem; box-shadow: var(--trade-shadow); }
.trade-page .tr-swap { width: 38px; height: 38px; margin: 0 0 .8rem; background: var(--trade-selected); border: 1px solid var(--trade-border); border-radius: 6px; color: var(--primary); font-size: 1rem; box-shadow: none; }
.trade-page .tr-checkout-title { font-size: .9rem; margin: 0 0 .9rem; }
.trade-page .tr-row { font-size: .74rem; color: var(--text-gray); padding: .55rem 0; gap: .5rem; border-color: var(--line); }
.trade-page .tr-row b { color: var(--text-white); white-space: nowrap; }
.trade-page .tr-total { margin: .85rem 0; padding: 1rem .5rem; border-radius: 6px; border-color: var(--trade-border); background: var(--trade-selected); }
.trade-page .tr-big { color: var(--primary); font-size: 1.85rem; }
.trade-page .tr-big-l { font-size: .67rem; line-height: 1.5; }
.trade-page .tr-mid input[type=tel] { width: 100%; padding: 0 .7rem; }
.trade-page .tr-mid input[type=url] { margin-top: .25rem; }
.trade-page .tr-link, .trade-page .tr-note a, .trade-page label.c a { color: var(--primary); }
.trade-page .tr-link { font-size: .65rem; }
.trade-page .tr-mid label.c { font-size: .68rem; gap: .55rem; line-height: 1.6; }
.trade-page .tr-mid label.c input { accent-color: var(--primary); flex-shrink: 0; }
.trade-page .tr-go { font-size: .82rem !important; padding: .75rem !important; border-radius: 6px; }
.trade-page .tr-msg { font-size: .68rem; }
.trade-page .tr-safe { flex-wrap: wrap; gap: .5rem; font-size: .61rem; color: var(--text-gray); }
.trade-page .tr-safe i { color: var(--primary); }
.trade-page .tr-note { color: var(--text-gray); font-size: .65rem; line-height: 1.65; }
.trade-page .tr-mid > .tr-note { text-align: left; border-top: 1px solid var(--line); padding-top: .8rem; }
.trade-page .tr-empty { color: var(--text-gray); padding: 3rem .8rem; font-size: .78rem; }
.trade-page #tr-user:has(.tr-empty) { min-height: 500px; align-items: center; background: var(--trade-surface); border: 1px dashed var(--trade-border); border-radius: 8px; }
.trade-page .tr-empty .btn { font-size: .78rem; padding: .7rem 1rem; border-radius: 6px; }
.trade-page .tr-more { background: var(--trade-selected); color: var(--primary); border-color: var(--trade-border); border-radius: 6px; }
.trade-page .tr-result { background: var(--trade-surface); border-color: var(--trade-border); border-radius: 6px; box-shadow: none; }
.trade-page .tr-how { border-top: 1px solid var(--line); padding-top: 3rem; margin-top: 3rem; }
@media(min-width:1500px) { .trade-page .tr-items { grid-template-columns: repeat(4,minmax(0,1fr)); } }
@media(max-width:1100px) and (min-width:801px) { .trade-page .tr-grid { grid-template-columns: minmax(0,1fr) 240px minmax(0,1fr); gap: .7rem; } .trade-page .tr-items { grid-template-columns: repeat(2,minmax(0,1fr)); } .trade-page .tr-steps { gap: .5rem; } .trade-page .tr-col h2 { flex-wrap: wrap; } }
@media(min-width:801px) { .trade-page .tr-mid { order: 0; position: sticky; } }
@media(max-width:800px) { .trade-page .tr-wrap { margin-top: 1.3rem; padding: 0 .85rem; } .trade-page .tr-head { display: block; } .trade-page .tr-head h1 { font-size: 1.7rem; } .trade-page .tr-head p { margin-top: .4rem; } .trade-page .tr-steps { justify-content: flex-start; margin-top: 1rem; } .trade-page .tr-grid { grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: .65rem; } .trade-page .tr-mid { position: static; grid-column: 1 / -1; grid-row: 2; order: 0; margin-top: 1rem; } .trade-page .tr-items { grid-template-columns: repeat(2,minmax(0,1fr)); max-height: 620px; } .trade-page .tr-tools { flex-wrap: wrap; } .trade-page .tr-search { flex-basis: 100%; } .trade-page .tr-col h2 { flex-wrap: wrap; gap: .2rem; padding: .65rem; } .trade-page .tr-it { padding: .5rem; min-height: 198px; } .trade-page .tr-it img { height: 78px; } .trade-page .tr-it .p { font-size: .83rem; } .trade-page .tr-chips small { margin-left: 0; } .trade-page #tr-user:has(.tr-empty) { min-height: 420px; } .trade-page .tr-inventory-note { font-size: .65rem; padding: .6rem; } .trade-page .tr-rules { gap: .4rem; } }
@media(max-width:480px) { .trade-page .tr-items { grid-template-columns: minmax(0,1fr); } .trade-page .tr-it img { height: 115px; } .trade-page .tr-it .n { min-height: 2.6em; } .trade-page .tr-col h2 small { font-size: .68rem; } .trade-page .tr-steps div { font-size: .61rem; gap: .3rem; } .trade-page .tr-steps { gap: .6rem; } }
@media(prefers-reduced-motion:reduce) { .trade-page .tr-it, .trade-page .tr-it img { transition: none; } .trade-page .tr-how-arrow { animation: none; } }
.trade-page .tr-swishpay { margin-top: .8rem; padding: 1rem; border: 1px solid var(--primary); border-radius: 10px; text-align: center; background: var(--trade-surface); }
.trade-page .tr-swishqr { width: 200px; margin: .7rem auto; padding: 8px; background: #fff; border-radius: 8px; }
.trade-page .tr-swishqr svg { display: block; width: 100%; height: auto; }
.trade-page .tr-swishbtn { display: inline-flex; gap: .4rem; align-items: center; }

.sh-insp { font-size: .68rem; line-height: 1.3; color: var(--muted, #9fb3a8); margin: .2rem 0; font-variant-numeric: tabular-nums; }
.sh-insp b { color: #02F895; font-weight: 700; }
#tk-float{position:fixed;right:20px;bottom:96px;z-index:1000;width:300px;max-width:calc(100vw - 24px);background:rgba(8,19,14,.96);backdrop-filter:blur(8px);border:1px solid rgba(2,248,149,.35);border-radius:14px;padding:.75rem .85rem;font-size:.8rem;box-shadow:0 14px 34px rgba(0,0,0,.55),0 0 20px rgba(2,248,149,.12);display:grid;gap:.55rem;animation:tkIn .3s ease}
#tk-float.done{border-color:#02F895}
#tk-float.bad{border-color:#ff5050}
#tk-float[hidden]{display:none}
@keyframes tkIn{from{opacity:0;transform:translateY(10px)}}
.tkf-h{display:flex;justify-content:space-between;align-items:center;gap:.5rem}
.tkf-h b{display:flex;align-items:center;gap:.45rem;font-size:.88rem}
.tkf-h button{width:26px;height:26px;border-radius:50%;background:rgba(255,255,255,.08);border:0;color:inherit;font-size:1rem;line-height:1;cursor:pointer}
.tkf-h button:hover{background:rgba(255,255,255,.18)}
.tkf-dot{width:8px;height:8px;border-radius:50%;background:#02F895;box-shadow:0 0 8px #02F895;animation:tkPulse 1.4s infinite}
@keyframes tkPulse{50%{opacity:.35}}
.tkf-pay{display:flex;align-items:center;gap:.5rem;background:rgba(2,248,149,.08);border-radius:9px;padding:.4rem .6rem}
.tkf-pay span{opacity:.8;flex:1}.tkf-pay b{color:#02F895}.tkf-pay em{font-style:normal;font-size:.72rem;opacity:.9;font-variant-numeric:tabular-nums}
.tkf-step{display:flex;gap:.55rem;align-items:flex-start;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.06);border-radius:9px;padding:.5rem .6rem}
.tkf-step.ok{border-color:rgba(2,248,149,.35)}
.tkf-n{flex:none;width:20px;height:20px;border-radius:50%;display:grid;place-items:center;font-size:.7rem;font-weight:700;background:rgba(255,255,255,.1)}
.tkf-step.ok .tkf-n{background:#02F895;color:#04120a}
.tkf-step b{display:block;font-size:.8rem}.tkf-step small{display:block;opacity:.7;margin:.1rem 0 .3rem}
.tkf-acc{display:flex;align-items:center;gap:.3rem;flex-wrap:wrap;opacity:.9;font-size:.75rem}
.tkf-acc img{width:18px;height:18px;border-radius:50%}
.tkf-acc em{font-style:normal;background:#02F895;color:#04120a;border-radius:5px;padding:0 5px;font-size:.66rem}
#tk-float a{display:inline-block;margin-top:.3rem;color:#02F895;font-size:.75rem}
.tkf-done{margin:0;opacity:.85}
@media(max-width:600px){#tk-float{right:12px;left:12px;width:auto;bottom:84px}}
/* Tydligare steg och regler */
.trade-page .tr-steps div { font-size: .9rem; font-weight: 600; color: var(--text-light, #e8f5ee); gap: .5rem; }
.trade-page .tr-steps b { width: 30px; height: 30px; font-size: .9rem; box-shadow: 0 0 12px rgba(2,248,149,.25); }
.trade-page .tr-head p { font-size: 1rem; }
.trade-page .tr-rules { gap: .5rem; margin-top: .9rem; }
.trade-page .tr-rules span { font-size: .8rem; font-weight: 600; color: var(--text-light, #e8f5ee); background: rgba(2,248,149,.07); border: 1px solid rgba(2,248,149,.28); border-radius: 999px; padding: .38rem .8rem; }
.trade-page .tr-rules span + span:before { content: none; }
@media(max-width:800px) { .trade-page .tr-steps div { font-size: .78rem; } .trade-page .tr-rules span { font-size: .72rem; padding: .3rem .6rem; } }

.tr-it .tr-inspect{display:inline-flex;align-items:center;gap:.25rem;margin:.35rem auto 0;padding:.2rem .55rem;border:1px solid rgba(2,248,149,.45);border-radius:999px;font-size:.72rem;font-weight:700;color:#02F895;text-decoration:none;background:rgba(2,248,149,.08);transition:background .15s}
.tr-it .tr-inspect:hover{background:rgba(2,248,149,.2)}

.tk{display:grid;gap:0;border:1px solid rgba(2,248,149,.25);border-radius:12px;overflow:hidden;background:rgba(255,255,255,.02)}
.tk-step{padding:.75rem .85rem;opacity:.6;border-bottom:1px solid rgba(255,255,255,.06)}
.tk-step.act,.tk-step.ok{opacity:1}
.tk-step.act{background:rgba(2,248,149,.05)}
.tk-h{display:flex;align-items:center;gap:.5rem}
.tk-h span{width:22px;height:22px;flex:none;border-radius:50%;display:grid;place-items:center;background:#02F895;color:#04120a;font-weight:700;font-size:.75rem}
.tk-h b{font-size:.9rem}
.tk-h em{margin-left:auto;font-style:normal;font-size:.75rem;color:#02F895;text-align:right}
.tk-items{list-style:none;margin:.5rem 0;padding:0;display:grid;gap:.3rem}
.tk-items li{display:grid;grid-template-columns:36px 1fr auto;align-items:center;gap:.5rem;font-size:.78rem;line-height:1.25}
.tk-items img{width:36px;height:27px;object-fit:contain}
.tk-items span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tk-items b{white-space:nowrap;font-size:.78rem}
.tk-acc{display:flex;align-items:center;gap:.45rem;flex-wrap:wrap;font-size:.78rem}
.tk-acc small{opacity:.6}
.tk-acc img,.tk-av{width:22px;height:22px;border-radius:50%;background:#1f2b25}
.tk-acc em{font-style:normal;background:#02F895;color:#04120a;border-radius:5px;padding:0 5px;font-size:.68rem}
.tk-open{margin-left:auto;color:#02F895;font-weight:600;text-decoration:none;font-size:.78rem}
.tk-open:hover{text-decoration:underline}
.tk-wait{font-size:.78rem;opacity:.7;margin:0}
.tk-final{padding:.75rem .85rem;display:grid;gap:.2rem;font-size:.8rem}
.tk-final.ok{background:rgba(2,248,149,.1)}
.tk-final.ok b{color:#02F895}
.tk-final.bad{background:rgba(255,80,80,.1)}
/* Staplade likadana föremål (t.ex. cases) */
.tr-stack-n{position:absolute;top:8px;right:34px;padding:2px 8px;border-radius:999px;background:hsl(155 98% 49% / .16);color:#02F895;font-weight:800;font-size:12px;border:1px solid hsl(155 98% 49% / .4)}
.tr-qty{display:flex;align-items:center;gap:4px;margin-top:8px;font-size:12px;color:hsl(0 0% 75%)}
.tr-qty button{min-width:28px;height:28px;border-radius:8px;border:1px solid hsl(155 98% 49% / .35);background:hsl(155 98% 49% / .08);color:#02F895;font-weight:800;cursor:pointer}
.tr-qty button[data-q="all"],.tr-qty .sh-qty-all{padding:0 8px;font-size:11px}
.tr-qty input{width:44px;height:28px;text-align:center;border-radius:8px;border:1px solid hsl(0 0% 100% / .15);background:hsl(0 0% 0% / .35);color:inherit;font-weight:700;-moz-appearance:textfield}
.tr-qty input::-webkit-inner-spin-button{display:none}
.tr-it,.skin-item{position:relative}

#tk-float{left:50%;top:50%;right:auto;bottom:auto;transform:translate(-50%,-50%);width:440px;max-width:calc(100vw - 24px);max-height:calc(100vh - 40px);overflow:auto;padding:1.25rem 1.35rem;font-size:.95rem;box-shadow:0 30px 80px rgba(0,0,0,.6),0 0 40px rgba(2,248,149,.15)}
#tk-float .tkf-h b{font-size:1.1rem}
#tk-float .tkf-step{padding:.8rem .9rem}#tk-float .tkf-step b{font-size:.95rem}
#tk-float .tkf-n{width:26px;height:26px;font-size:.85rem}
#tk-float .tkf-pay{padding:.65rem .8rem;font-size:1rem}
#tk-float .tkf-acc{font-size:.85rem}#tk-float .tkf-acc img{width:24px;height:24px}
@media(max-width:600px){#tk-float{left:50%;right:auto;bottom:auto;width:calc(100vw - 24px)}}

/* Stickers på partnerlagrets vapen */
.tr-stickers{display:flex;flex-wrap:wrap;justify-content:center;gap:3px;margin:4px 0 2px}
.tr-sticker{width:26px;height:20px;display:inline-flex;align-items:center;justify-content:center;border-radius:5px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08);font-size:9px;overflow:hidden}
.tr-sticker img{width:24px;height:18px;object-fit:contain}