/* Sell page.
 *
 * The rebuilt markup reuses the site's own Tailwind classes, and the archived
 * stylesheet (cef369112fb0f1e1.css) already defines every one of them — except the
 * inventory grid breakpoints. The original packs five cards per row; this build packs
 * six, so each step is shifted up by one and those variants were never generated.
 *
 * All five steps are restated here, in descending width order, rather than only the
 * three new ones: this file loads after the archived sheet, and the rules have equal
 * specificity, so a partial override would let the wide breakpoints win over the
 * narrow ones and the grid would stay at five columns down to phone widths.
 *
 * Widths are copied from the archived sheet, so each step lands exactly where the
 * one it replaces did. The count rises again under xl because the payout sidebar is
 * hidden below that width, handing its 22rem back to the grid.
 */

@media (max-width: 1380px) {
  .max-\[1380px\]\:grid-cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)) }
}

@media not all and (min-width: 1280px) {
  .max-xl\:grid-cols-6 { grid-template-columns: repeat(6, minmax(0, 1fr)) }
}

@media not all and (min-width: 1024px) {
  .max-lg\:grid-cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)) }
}

@media not all and (min-width: 768px) {
  .max-md\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)) }
}

@media not all and (min-width: 640px) {
  .max-sm\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)) }
}

/* ---- signed-out explainer ------------------------------------------------
 *
 * Three steps on a vertical progress rail, walked in a loop. The cycle is 9s,
 * 3s per step; every badge runs the same keyframes offset by a third of the
 * cycle, so no script has to keep time. The rail's fill reaches a badge exactly
 * when that badge's animation starts, so the green reads as one movement.
 *
 * Four ways of entering the badge live here, chosen by data-guide-anim:
 *   1 flood  2 draw  3 pulse  4 bloom
 *
 * Only the rail's start and height come from script, because they depend on
 * where the badges land once the text has wrapped.
 */

/* The guest view is inserted only after the session endpoint confirms that the
 * visitor is signed out. Staggering starts at that moment, so the authenticated
 * inventory never flashes or participates in these entrance animations. */
.skc-guest-enter .skc-guest-card {
  animation: skc-guest-card-in 680ms cubic-bezier(.16, 1, .3, 1) both;
}
.skc-guest-enter .skc-guest-guide { animation-delay: 110ms }

.skc-guest-enter .skc-guest-chip,
.skc-guest-enter .skc-guest-logo,
.skc-guest-enter .skc-guest-title,
.skc-guest-enter .skc-guest-subtitle,
.skc-guest-enter .skc-guest-action,
.skc-guest-enter .skc-guide-heading,
.skc-guest-enter .skc-guide-list,
.skc-guest-enter .skc-guide-note {
  animation: skc-guest-item-in 600ms cubic-bezier(.16, 1, .3, 1) both;
}
.skc-guest-enter .skc-guest-chip { animation-delay: 110ms }
.skc-guest-enter .skc-guest-logo { animation-delay: 170ms }
.skc-guest-enter .skc-guest-title { animation-delay: 230ms }
.skc-guest-enter .skc-guest-subtitle { animation-delay: 290ms }
.skc-guest-enter .skc-guest-action { animation-delay: 350ms }
.skc-guest-enter .skc-guide-heading { animation-delay: 250ms }
.skc-guest-enter .skc-guide-list { animation-delay: 320ms }
.skc-guest-enter .skc-guide-note { animation-delay: 390ms }

@keyframes skc-guest-card-in {
  from { opacity: 0; transform: translateY(18px) scale(.992) }
  to { opacity: 1; transform: none }
}
@keyframes skc-guest-item-in {
  from { opacity: 0; transform: translateY(12px) }
  to { opacity: 1; transform: none }
}

.skc-guide-glow {
  position: absolute;
  z-index: 0;
  top: -30%;
  left: -40%;
  width: 80%;
  height: 60%;
  border-radius: 999px;
  background: radial-gradient(circle, rgba(34, 197, 94, .16), transparent 70%);
  filter: blur(38px);
  pointer-events: none;
}

.skc-guide-list {
  position: relative;
  z-index: 1;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 69px;
  padding: 10px 0;
}

.skc-guide-step {
  position: relative;
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr);
  column-gap: 18px;
  align-items: start;
}

/* ---- the rail ---- */

.skc-guide-rail {
  position: absolute;
  left: 28px;
  width: 2px;
  border-radius: 2px;
  background: rgba(255, 255, 255, .07);
  overflow: hidden;
}

.skc-guide-rail-fill {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 0;
  border-radius: 2px;
  background: linear-gradient(180deg, rgba(34, 197, 94, .35), rgb(34, 209, 126));
  box-shadow: 0 0 12px rgba(34, 209, 126, .65);
  animation: skc-guide-fill 9s linear infinite;
}

@keyframes skc-guide-fill {
  0%      { height: 0;    opacity: 0 }
  4%      { height: 0;    opacity: 1 }
  25%     { height: 0 }
  33.33%  { height: 50% }
  58.33%  { height: 50% }
  66.67%  { height: 100% }
  95%     { height: 100%; opacity: 1 }
  100%    { height: 100%; opacity: 0 }
}

/* ---- the badge ---- */

.skc-guide-badge {
  position: relative;
  z-index: 1;
  display: flex;
  width: 56px;
  height: 56px;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 999px;
  background: #101014;
  color: rgba(255, 255, 255, .32);
}

.skc-guide-glyph { width: 28px; height: 28px }

.skc-guide-badge-icon {
  position: relative;
  z-index: 2;
  display: flex;
}

/* The flood has to be clipped to the circle, which the ring must not be. */
.skc-guide-badge-clip {
  position: absolute;
  z-index: 1;
  inset: 0;
  border-radius: 999px;
  overflow: hidden;
  pointer-events: none;
}

.skc-guide-badge-fill {
  position: absolute;
  inset: 0;
  opacity: 0;
  background: linear-gradient(180deg, rgba(34, 209, 126, .9), rgb(22, 163, 74));
}

.skc-guide-badge-draw,
.skc-guide-badge-ring {
  position: absolute;
  inset: -1px;
  border-radius: 999px;
  opacity: 0;
  pointer-events: none;
}

.skc-guide-badge-draw {
  z-index: 2;
  width: calc(100% + 2px);
  height: calc(100% + 2px);
  transform: rotate(-90deg);
  fill: none;
  overflow: visible;
}

.skc-guide-badge-draw circle {
  stroke: rgb(34, 209, 126);
  stroke-width: 2;
  stroke-linecap: round;
  /* 2 * pi * 27.5 */
  stroke-dasharray: 172.79;
  stroke-dashoffset: 172.79;
  filter: drop-shadow(0 0 6px rgba(34, 209, 126, .8));
}

.skc-guide-badge-ring { border: 1px solid rgb(34, 209, 126) }

/* ---- the copy ---- */

.skc-guide-copy { padding-top: 9px }

.skc-guide-title {
  font-size: 15px;
  font-weight: 800;
  line-height: 1.3;
  color: rgba(255, 255, 255, .62);
  animation: skc-guide-title 9s ease-in-out infinite;
  animation-delay: calc(var(--skc-step) * 3s);
}

@keyframes skc-guide-title {
  0%       { color: rgba(255, 255, 255, .62) }
  8.33%,
  30%      { color: #fff }
  36%, 96% { color: rgba(255, 255, 255, .62) }
  100%     { color: #fff }
}

.skc-guide-text {
  margin: 6px 0 0;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.6;
  color: rgba(255, 255, 255, .42);
}

.skc-guest-subtitle { font-size: 13.5px; font-weight: 500; }

/* Every variant lights the rim on the same schedule; only the way the green
 * gets there differs, so the rim animation is shared. */
.skc-guide-badge {
  animation: skc-guide-rim 9s ease-in-out infinite;
  animation-delay: calc(var(--skc-step) * 3s);
}

@keyframes skc-guide-rim {
  0% {
    border-color: rgba(34, 209, 126, .3);
    color: rgba(255, 255, 255, .32);
    box-shadow: none;
  }
  8.33%, 30% {
    border-color: rgb(34, 209, 126);
    color: #fff;
    box-shadow: 0 0 26px -6px rgba(34, 209, 126, .85);
  }
  36%, 96% {
    border-color: rgba(255, 255, 255, .1);
    color: rgba(255, 255, 255, .32);
    box-shadow: none;
  }
  100% {
    border-color: rgba(34, 209, 126, .3);
    color: rgba(255, 255, 255, .32);
    box-shadow: none;
  }
}

/* ---- 1: flood ----------------------------------------------------------- */
/* The green rises inside the circle, carrying on from the rail. */

.skc-guide-list[data-guide-anim="1"] .skc-guide-badge-fill {
  animation: skc-guide-flood 9s cubic-bezier(.32, .72, .3, 1) infinite;
  animation-delay: calc(var(--skc-step) * 3s);
}

@keyframes skc-guide-flood {
  0%       { transform: translateY(101%); opacity: 1 }
  8.33%    { transform: translateY(0);    opacity: 1 }
  30%      { transform: translateY(0);    opacity: 1 }
  36%      { transform: translateY(0);    opacity: 0 }
  100%     { transform: translateY(101%); opacity: 0 }
}

/* ---- 2: draw ------------------------------------------------------------ */
/* The green leaves the rail and draws its way around the rim. */

.skc-guide-list[data-guide-anim="2"] .skc-guide-badge-draw {
  opacity: 1;
}

.skc-guide-list[data-guide-anim="2"] .skc-guide-badge-draw circle {
  animation: skc-guide-draw 9s ease-in-out infinite;
  animation-delay: calc(var(--skc-step) * 3s);
}

@keyframes skc-guide-draw {
  0%          { stroke-dashoffset: 172.79; opacity: 1 }
  11.11%      { stroke-dashoffset: 0;      opacity: 1 }
  30%         { stroke-dashoffset: 0;      opacity: 1 }
  36%, 99.99% { stroke-dashoffset: 0;      opacity: 0 }
  100%        { stroke-dashoffset: 172.79; opacity: 1 }
}

/* ---- 3: pulse ----------------------------------------------------------- */
/* The badge snaps forward and throws off a shockwave. */

.skc-guide-list[data-guide-anim="3"] .skc-guide-badge {
  animation: skc-guide-rim 9s ease-in-out infinite,
             skc-guide-pop 9s cubic-bezier(.2, 1.5, .4, 1) infinite;
  animation-delay: calc(var(--skc-step) * 3s);
}

@keyframes skc-guide-pop {
  0%              { transform: scale(1) }
  6%              { transform: scale(1.16) }
  12%             { transform: scale(1.07) }
  30%             { transform: scale(1.07) }
  36%, 100%       { transform: scale(1) }
}

.skc-guide-list[data-guide-anim="3"] .skc-guide-badge-ring {
  animation: skc-guide-shock 9s ease-out infinite;
  animation-delay: calc(var(--skc-step) * 3s);
}

@keyframes skc-guide-shock {
  0%    { opacity: .7; transform: scale(1) }
  16%   { opacity: 0;  transform: scale(1.7) }
  100%  { opacity: 0;  transform: scale(1.7) }
}

/* ---- 4: bloom ----------------------------------------------------------- */
/* A green glow opens out of the centre and settles. */

.skc-guide-list[data-guide-anim="4"] .skc-guide-badge-fill {
  background: radial-gradient(circle at 50% 50%, rgba(34, 209, 126, .95) 0%, rgba(34, 209, 126, .55) 45%, rgba(34, 209, 126, 0) 72%);
  animation: skc-guide-bloom 9s cubic-bezier(.22, 1, .36, 1) infinite;
  animation-delay: calc(var(--skc-step) * 3s);
}

@keyframes skc-guide-bloom {
  0%       { transform: scale(.2); opacity: 0 }
  8.33%    { transform: scale(1.6); opacity: 1 }
  30%      { transform: scale(1.6); opacity: 1 }
  36%      { transform: scale(1.6); opacity: 0 }
  100%     { transform: scale(.2); opacity: 0 }
}

@media (prefers-reduced-motion: reduce) {
  .skc-guest-enter .skc-guest-card,
  .skc-guest-enter .skc-guest-chip,
  .skc-guest-enter .skc-guest-logo,
  .skc-guest-enter .skc-guest-title,
  .skc-guest-enter .skc-guest-subtitle,
  .skc-guest-enter .skc-guest-action,
  .skc-guest-enter .skc-guide-heading,
  .skc-guest-enter .skc-guide-list,
  .skc-guest-enter .skc-guide-note { animation: none }
  .skc-guide-rail-fill { animation: none; height: 100%; opacity: 1 }
  .skc-guide-badge {
    animation: none;
    border-color: rgb(34, 209, 126);
    color: #fff;
  }
  .skc-guide-badge-fill,
  .skc-guide-badge-ring,
  .skc-guide-badge-draw circle { animation: none }
  .skc-guide-badge-fill { opacity: 1; transform: none }
  .skc-guide-title { animation: none; color: #fff }
}


/* ---- utilities the archived sheet never generated ------------------------
 *
 * The signed-out view is new markup, so the arbitrary values it needs were
 * never compiled into cef369112fb0f1e1.css. They are declared here in the same
 * escaped form Tailwind would have emitted, so the markup stays readable.
 */

.min-h-\[700px\] { min-height: 700px }
.max-w-\[44ch\]  { max-width: 44ch }

@media (min-width: 1280px) {
  .xl\:pb-24 { padding-bottom: 6rem }
}

@media not all and (min-width: 768px) {
  .max-md\:h-auto        { height: auto }
  .max-md\:min-h-\[22rem\] { min-height: 22rem }
  .max-md\:p-6           { padding: 1.5rem }
  .max-md\:pb-12         { padding-bottom: 3rem }
  .max-md\:text-\[21px\]  { font-size: 21px }
}

@media not all and (min-width: 640px) {
  .max-sm\:w-full { width: 100% }
}

/* ---- trade URL dialog ------------------------------------------------------
 * tailwindcss-animate as the live Radix dialog uses it: the backdrop fades for
 * 150ms, the panel fades, scales from .95 and drops from -48% over 300ms. */
@keyframes skc-tm-fade-in { from { opacity: 0; } }
@keyframes skc-tm-fade-out { to { opacity: 0; } }
@keyframes skc-tm-enter { from { opacity: 0; transform: translate3d(-50%, -48%, 0) scale3d(.95, .95, .95); } }
@keyframes skc-tm-exit { to { opacity: 0; transform: translate3d(-50%, -48%, 0) scale3d(.95, .95, .95); } }
.skc-tm-overlay[data-state="open"] { animation: skc-tm-fade-in .15s ease; }
.skc-tm-overlay[data-state="closed"] { animation: skc-tm-fade-out .15s ease forwards; }
.skc-tm-content[data-state="open"] { animation: skc-tm-enter .3s ease; }
.skc-tm-content[data-state="closed"] { animation: skc-tm-exit .3s ease forwards; }
/* The badge slides in from x -4 and leaves the same way (framer, mode="wait"). */
@keyframes skc-tm-badge-in { from { opacity: 0; transform: translateX(-4px); } }
.skc-tm-badge { animation: skc-tm-badge-in .2s cubic-bezier(.22, 1, .36, 1); }
.skc-tm-badge.skc-tm-badge-out { opacity: 0; transform: translateX(-4px); transition: opacity .15s ease, transform .15s ease; }
@media (prefers-reduced-motion: reduce) {
  .skc-tm-overlay, .skc-tm-content, .skc-tm-badge { animation-duration: .01s !important; }
}

/* ---- "Trade URL · Required" view --------------------------------------------
 * framer on the live page: the chip drops in, the icon scales up, the copy and the
 * button rise one after another, and the icon keeps bobbing. */
@keyframes skc-ntu-drop { from { opacity: 0; transform: translateY(-8px); } }
@keyframes skc-ntu-scale { from { opacity: 0; transform: scale(.8); } }
@keyframes skc-ntu-rise10 { from { opacity: 0; transform: translateY(10px); } }
@keyframes skc-ntu-rise8 {
  from { opacity: 0; translate: 0 8px; }
  to { opacity: 1; translate: 0 0; }
}
@keyframes skc-ntu-fade { from { opacity: 0; } }
@keyframes skc-ntu-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
.skc-ntu-chip { animation: skc-ntu-drop .5s cubic-bezier(.25, .1, .25, 1) both; }
.skc-ntu-icon { animation: skc-ntu-scale .5s cubic-bezier(.25, .1, .25, 1) .1s both; }
.skc-ntu-bob { animation: skc-ntu-bob 3s ease-in-out infinite; }
.skc-ntu-text { animation: skc-ntu-rise10 .5s cubic-bezier(.25, .1, .25, 1) .18s both; }
.skc-ntu-cta { animation: skc-ntu-rise8 .4s cubic-bezier(.25, .1, .25, 1) .28s both; transition: transform .2s ease, box-shadow .15s; }
.skc-ntu-cta:hover { transform: translateY(-2px); }
.skc-ntu-cta:active { transform: scale(.97); }
.skc-ntu-help { animation: skc-ntu-fade .4s ease .42s both; }
@media (prefers-reduced-motion: reduce) {
  .skc-ntu-chip, .skc-ntu-icon, .skc-ntu-bob, .skc-ntu-text, .skc-ntu-cta, .skc-ntu-help { animation: none; }
}

/* ---- item cards keep their picture size ------------------------------------
 * The card is aspect-[200/292] and every row but the picture has a fixed height,
 * so on a narrow grid (six columns next to open DevTools, say) the picture area
 * took the whole loss and the item shrank far below the card's width. The card
 * now grows just enough for the picture to fill its width (4:3 art, capped at the
 * 176px the image itself allows); wide grids keep the original proportions. */
.skc-sell-grid [data-card] { container-type: inline-size; }
.skc-sell-grid [data-card] > [data-density] {
  aspect-ratio: auto;
  height: max(146cqw, calc(min(100cqw - 32px, 176px) * 0.75 + 158px));
}

/* ---- "inventory hidden" screen ---------------------------------------------
 * Same entrance rhythm as the "Trade URL required" view: the badge scales in and
 * keeps bobbing, the copy and the button rise after it. */
.skc-priv-icon { animation: skc-ntu-scale .5s cubic-bezier(.25, .1, .25, 1) both; }
.skc-priv-bob { animation: skc-ntu-bob 3s ease-in-out infinite; }
.skc-priv-text { animation: skc-ntu-rise10 .5s cubic-bezier(.25, .1, .25, 1) .12s both; }
.skc-priv-cta {
  animation: skc-ntu-rise8 .4s cubic-bezier(.25, .1, .25, 1) .22s both;
  transition:
    transform .55s cubic-bezier(.16, 1, .3, 1),
    box-shadow .55s cubic-bezier(.16, 1, .3, 1);
  box-shadow: 0 14px 36px -10px rgba(61, 255, 158, .7);
  will-change: transform, box-shadow;
}
.skc-priv-cta:hover { transform: translateY(-2px); box-shadow: 0 18px 44px -10px rgba(61, 255, 158, .9); }
.skc-priv-cta:active { transform: scale(.97); }
@media (prefers-reduced-motion: reduce) {
  .skc-priv-icon, .skc-priv-bob, .skc-priv-text, .skc-priv-cta { animation: none; }
}

/* ---- phones: payout sheet ---------------------------------------------------
 * shadcn's bottom Sheet on tailwindcss-animate. The archived stylesheet was built
 * before the sheet rendered, so its data-state utilities are spelled out here:
 * the overlay fades (150ms), the panel slides from the bottom — 500ms in, 300ms
 * out, ease-in-out. */
@keyframes skc-sheet-in { from { transform: translate3d(0, 100%, 0); } }
@keyframes skc-sheet-out { to { transform: translate3d(0, 100%, 0); } }
@keyframes skc-sheet-fade-in { from { opacity: 0; } }
@keyframes skc-sheet-fade-out { to { opacity: 0; } }
.skc-sheet[data-state="open"] { animation: skc-sheet-in .5s cubic-bezier(.4, 0, .2, 1); }
.skc-sheet[data-state="closed"] { animation: skc-sheet-out .3s cubic-bezier(.4, 0, .2, 1) forwards; }
.skc-sheet-overlay[data-state="open"] { animation: skc-sheet-fade-in .15s ease; }
.skc-sheet-overlay[data-state="closed"] { animation: skc-sheet-fade-out .15s ease forwards; }
/* Radix's scroll lock while the modal is up. */
body:has([data-mobile-sheet]:not([data-leaving])) { overflow: hidden; }
@media (prefers-reduced-motion: reduce) {
  .skc-sheet, .skc-sheet-overlay { animation-duration: .01ms !important; }
}

/* ---- sort menu icons --------------------------------------------------------
 * A small tile with what is sorted (price / wear) and a round badge in the corner
 * with the direction. Idle tiles are quiet glass, hover tints them green, the
 * active option glows and its badge fills with the accent. */
.skc-sort-ico {
  position: relative;
  display: flex;
  flex: none;
  width: 26px;
  height: 26px;
  margin-right: 4px;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, .08);
  background: linear-gradient(180deg, rgba(255, 255, 255, .055), rgba(255, 255, 255, .012));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05);
  color: rgba(255, 255, 255, .5);
  transition: color .18s ease, border-color .18s ease, background .18s ease, box-shadow .18s ease, transform .18s ease;
}
.skc-sort-ico .skc-sort-main { width: 14px; height: 14px; stroke-width: 2.1; }
.skc-sort-dir {
  position: absolute;
  right: -4px;
  bottom: -4px;
  display: flex;
  width: 13px;
  height: 13px;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, .14);
  background: #0d0d12;
  color: rgba(255, 255, 255, .7);
  transition: color .18s ease, border-color .18s ease, background .18s ease;
}
.skc-sort-dir svg { width: 8px; height: 8px; stroke-width: 3.2; transition: transform .22s cubic-bezier(.22, 1, .36, 1); }

.group\/item:hover .skc-sort-ico {
  color: hsl(var(--primary));
  border-color: hsl(var(--primary) / .3);
  background: linear-gradient(180deg, hsl(var(--primary) / .14), hsl(var(--primary) / .04));
}
.group\/item:hover .skc-sort-dir { color: hsl(var(--primary)); border-color: hsl(var(--primary) / .4); }
.group\/item:hover .skc-sort-dir[data-dir="up"] svg { transform: translateY(-1px); }
.group\/item:hover .skc-sort-dir[data-dir="down"] svg { transform: translateY(1px); }

.skc-sort-ico[data-active] {
  color: hsl(var(--primary));
  border-color: hsl(var(--primary) / .45);
  background: linear-gradient(180deg, hsl(var(--primary) / .22), hsl(var(--primary) / .06));
  box-shadow: 0 0 14px -4px hsl(var(--primary) / .6), inset 0 1px 0 rgba(255, 255, 255, .08);
}
.skc-sort-ico[data-active] .skc-sort-dir,
.group\/item:hover .skc-sort-ico[data-active] .skc-sort-dir {
  color: #04140b;
  border-color: transparent;
  background: hsl(var(--primary));
  box-shadow: 0 0 8px hsl(var(--primary) / .55);
}
@media (prefers-reduced-motion: reduce) {
  .skc-sort-ico, .skc-sort-dir, .skc-sort-dir svg { transition: none; }
}

/* ---- sort menu open / close --------------------------------------------------
 * Opens with a short drop from the toggle (fade + 6px + slight scale) and its rows
 * follow in a quick cascade; closes faster and without the cascade. Once the entrance
 * has played the menu is marked settled, so re-renders that move it never replay it. */
@keyframes skc-sort-menu-in {
  from { opacity: 0; transform: translateY(-6px) scale(.96); }
  to { opacity: 1; transform: none; }
}
@keyframes skc-sort-menu-out {
  from { opacity: 1; transform: none; }
  to { opacity: 0; transform: translateY(-4px) scale(.97); }
}
@keyframes skc-sort-row-in {
  from { opacity: 0; transform: translateY(-3px); }
  to { opacity: 1; transform: none; }
}
.skc-sort-menu { transform-origin: top right; will-change: opacity, transform; }
@media (max-width: 767px) { .skc-sort-menu { transform-origin: top left; } }
.skc-sort-menu[data-state="open"] { animation: skc-sort-menu-in .2s cubic-bezier(.16, 1, .3, 1) both; }
.skc-sort-menu[data-state="open"] [data-sort] { animation: skc-sort-row-in .24s cubic-bezier(.16, 1, .3, 1) both; }
.skc-sort-menu[data-state="open"] [data-sort]:nth-child(2) { animation-delay: .03s; }
.skc-sort-menu[data-state="open"] [data-sort]:nth-child(3) { animation-delay: .06s; }
.skc-sort-menu[data-state="open"] [data-sort]:nth-child(4) { animation-delay: .09s; }
.skc-sort-menu[data-settled],
.skc-sort-menu[data-settled] [data-sort] { animation: none; }
.skc-sort-menu[data-state="closed"] { animation: skc-sort-menu-out .14s cubic-bezier(.4, 0, 1, 1) forwards; pointer-events: none; }
@media (prefers-reduced-motion: reduce) {
  .skc-sort-menu, .skc-sort-menu [data-sort] { animation-duration: .01ms !important; animation-delay: 0s !important; }
}

/* ---- payout region menu open / close -----------------------------------------
 * Same motion as the sort menu: it drops from the full-width toggle, so it grows
 * from the top edge. The list itself fades in right after the search field. */
.skc-region-menu { transform-origin: top center; will-change: opacity, transform; }
.skc-region-menu[data-state="open"] { animation: skc-sort-menu-in .2s cubic-bezier(.16, 1, .3, 1) both; }
.skc-region-menu[data-state="open"] [data-region-rows] { animation: skc-sort-row-in .26s cubic-bezier(.16, 1, .3, 1) .04s both; }
.skc-region-menu[data-settled],
.skc-region-menu[data-settled] [data-region-rows] { animation: none; }
.skc-region-menu[data-state="closed"] { animation: skc-sort-menu-out .14s cubic-bezier(.4, 0, 1, 1) forwards; pointer-events: none; }
@media (prefers-reduced-motion: reduce) {
  .skc-region-menu, .skc-region-menu [data-region-rows] { animation-duration: .01ms !important; animation-delay: 0s !important; }
}

/* The site-wide `input:focus-visible` ring (green, offset 2px) draws a second frame
 * inside the country search box, which already has its own border. */
[data-region-search]:focus,
[data-region-search]:focus-visible { outline: none !important; box-shadow: none !important; }

/* ---- payout methods, three per row (preview variants) ----------------------------------
   Variant 1 (the site's) keeps the 22rem panel with three tiles per row; variant 2 widens
   the panel a little. Speed and fee no longer sit in the tiles, so icons and names are
   full size; the fee appears in a bubble above a tile on hover. */
html[data-payout-variant] .skc-methods{grid-template-columns:repeat(3,minmax(0,1fr))}
html[data-payout-variant] .skc-method .absolute.right-2.top-2{right:5px;top:5px;width:14px;height:14px}
/* Long names ("VISA / MASTERCARD") break onto a second line instead of being cut. */
html[data-payout-variant] .skc-method-label{white-space:normal;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;line-height:1.2;text-wrap:balance}

html[data-payout-variant="v1"] .skc-methods{gap:6px}
html[data-payout-variant="v1"] .skc-method{min-height:86px;justify-content:center;gap:8px;padding:10px 4px;border-radius:11px}
html[data-payout-variant="v1"] .skc-method-label{font-size:11px;letter-spacing:.3px}

@media (min-width:1280px){
  html[data-payout-variant="v2"] .skc-sell-layout{grid-template-columns:1fr 24.5rem}
}
html[data-payout-variant="v2"] .skc-methods{gap:7px}
html[data-payout-variant="v2"] .skc-method{min-height:92px;justify-content:center;gap:9px;padding:10px 5px}
html[data-payout-variant="v2"] .skc-method-icon{transform:scale(1.08);margin:1.8px 0}
html[data-payout-variant="v2"] .skc-method-label{font-size:11.5px;letter-spacing:.3px}

/* fee bubble */
.skc-method-fee{position:absolute;left:50%;bottom:calc(100% + 7px);z-index:20;padding:5px 9px;border:1px solid rgba(255,255,255,.1);border-radius:8px;background:#1a1a1f;box-shadow:0 10px 24px -8px rgba(0,0,0,.85);color:#9a9aa3;font-size:10.5px;font-weight:600;line-height:14px;white-space:nowrap;pointer-events:none;opacity:0;visibility:hidden;transform:translate(-50%,4px);transition:opacity .16s ease,transform .16s ease,visibility .16s}
.skc-method-fee b{color:#ececf1;font-weight:800;font-variant-numeric:tabular-nums}
.skc-method-fee::after{content:"";position:absolute;left:50%;top:100%;width:8px;height:8px;margin-top:-4px;border-right:1px solid rgba(255,255,255,.1);border-bottom:1px solid rgba(255,255,255,.1);background:#1a1a1f;transform:translateX(-50%) rotate(45deg)}
.skc-method:hover .skc-method-fee,.skc-method:focus-visible .skc-method-fee{opacity:1;visibility:visible;transform:translate(-50%,0)}
@media (prefers-reduced-motion:reduce){.skc-method-fee{transition:none}}

/* ---- "Crypto" payout tile: coins behind one tile ---------------------------------------- */
.skc-coin-mini{position:relative;display:flex;flex:none;align-items:center;justify-content:center;border-radius:999px;overflow:hidden}
.skc-coin-mini svg{width:52%!important;height:52%!important}
.skc-crypto-row{display:flex;align-items:center;justify-content:center}
.skc-crypto-row .skc-coin-mini{box-shadow:0 0 0 2px #131316,rgba(255,255,255,.35) 0 1px 0 inset!important}
.skc-crypto-tri{position:relative;display:block;width:44px;height:44px}
.skc-crypto-tri .skc-coin-mini,.skc-crypto-corner .skc-coin-mini{position:absolute}
.skc-crypto-tri .skc-coin-mini{box-shadow:0 0 0 2px #131316,rgba(255,255,255,.35) 0 1px 0 inset!important}
.skc-crypto-corner{position:relative;display:block;width:44px;height:44px}
.skc-crypto-grad{position:relative;display:flex;width:44px;height:44px;align-items:center;justify-content:center;border-radius:999px;overflow:hidden;background:linear-gradient(135deg,#f7931a 0%,#627eea 52%,#26a17b 100%);box-shadow:rgba(255,255,255,.38) 0 1.5px 0 inset,rgba(0,0,0,.45) 0 -5.72px 12.32px -5.72px inset,rgba(98,126,234,.6) 0 5.72px 15.84px -5.72px}
.skc-crypto-shine{position:absolute;top:2.2px;left:14%;right:14%;height:42%;border-radius:999px;background:linear-gradient(rgba(255,255,255,.4),transparent)}
.skc-crypto-glyphs{position:relative;display:flex;align-items:center;gap:1px}
.skc-crypto-glyphs i{display:flex}
.skc-crypto-glyphs svg{width:11px!important;height:11px!important}
.skc-methods-crypto{display:flex;flex-direction:column;gap:8px}
.skc-crypto-back{display:flex;width:100%;align-items:center;gap:4px;height:24px;padding:0 8px 0 4px;border:0;border-radius:7px;background:transparent;color:#8f8f99;font-size:11px;font-weight:700;cursor:pointer;transition:color .15s,background-color .15s}
.skc-crypto-back:hover{color:#fff;background:rgba(255,255,255,.05)}
.skc-crypto-back-title{margin-left:auto;color:#5a5a64;font-size:10px;font-weight:800;letter-spacing:1.2px;text-transform:uppercase}

/* ---- more "Crypto" icon variants (C6-C11) ---------------------------------------------- */
.skc-crypto-fan,.skc-crypto-stack,.skc-crypto-orbit{position:relative;display:block;width:44px;height:44px}
.skc-crypto-fan .skc-coin-mini,.skc-crypto-stack .skc-coin-mini,.skc-crypto-orbit .skc-coin-mini{position:absolute}
.skc-crypto-fan .skc-coin-mini,.skc-crypto-stack .skc-coin-mini{box-shadow:0 0 0 2px #131316,rgba(255,255,255,.35) 0 1px 0 inset,rgba(0,0,0,.45) 0 -3px 7px -3px inset!important}
.skc-crypto-orbit-ring{position:absolute;inset:3px;border:1px dashed rgba(255,255,255,.16);border-radius:999px}
.skc-crypto-orbit-spin{position:absolute;inset:0;transition:transform .9s cubic-bezier(.22,1,.36,1)}
.skc-crypto-orbit-spin .skc-coin-mini{box-shadow:0 0 0 2px #131316!important;z-index:3}
.skc-method:hover .skc-crypto-orbit-spin{transform:rotate(180deg)}
.skc-method:hover .skc-crypto-orbit-spin .skc-coin-mini svg{transform:rotate(-180deg);transition:transform .9s cubic-bezier(.22,1,.36,1)}
.skc-crypto-orbit-spin .skc-coin-mini svg{transition:transform .9s cubic-bezier(.22,1,.36,1)}
.skc-crypto-ring{display:flex;width:44px;height:44px;padding:3px;border-radius:999px;background:conic-gradient(from -30deg,#f7931a 0 33.3%,#627eea 0 66.6%,#26a17b 0);box-shadow:rgba(98,126,234,.5) 0 5.72px 15.84px -5.72px}
.skc-crypto-ring-core{position:relative;display:flex;flex:1;align-items:center;justify-content:center;overflow:hidden;border-radius:999px;background:linear-gradient(145deg,#26262e,#141418);box-shadow:rgba(255,255,255,.18) 0 1px 0 inset}
.skc-crypto-ring-glyph{position:relative;display:flex}
.skc-crypto-ring-glyph svg{width:17px!important;height:17px!important}
.skc-crypto-grid{display:grid;grid-template-columns:repeat(2,20px);gap:3px;width:44px;height:44px;place-content:center}
.skc-crypto-dark{position:relative;display:flex;width:44px;height:44px;align-items:center;justify-content:center;overflow:hidden;border-radius:999px;background:linear-gradient(145deg,#3a3a46 0%,#2a2a33 42%,rgba(0,0,0,.26) 150%);box-shadow:rgba(255,255,255,.3) 0 1.5px 0 inset,rgba(0,0,0,.45) 0 -5.72px 12.32px -5.72px inset}
.skc-crypto-dark-row{position:relative;display:flex;align-items:center}
.skc-crypto-dark-row .skc-coin-mini{box-shadow:0 0 0 1.5px #2e2e37!important}
.skc-crypto-dark .skc-crypto-shine{opacity:.3}

/* No payout method offered in the picked country. */
.skc-methods-empty{padding:16px 14px;border:1px dashed #2c2c34;border-radius:12px;background:rgba(255,255,255,.02);color:#8f8f99;font-size:12px;font-weight:600;line-height:1.45;text-align:center}

/* Fee and minimum share the bubble above a tile; it still shows on a disabled tile. */
.skc-method-fee-sep{margin:0 5px;color:#5a5a64;font-style:normal}
.skc-method:disabled:hover .skc-method-fee{opacity:1;visibility:visible;transform:translate(-50%,0)}

/* A disabled tile is dimmed piece by piece instead of as a whole, so the fee/minimum bubble
   above it stays fully opaque (opacity on the button would fade the bubble with it). */
.skc-method:disabled{opacity:1!important;border-color:rgba(38,38,44,.45)!important;background-color:rgba(19,19,22,.45)!important}
.skc-method:disabled>:not(.skc-method-fee){opacity:.45}
/* Dimmed parts of a tile brighten (or fade) smoothly when its minimum is reached or lost. */
.skc-method>:not(.skc-method-fee){transition:opacity .4s ease}
.skc-method{transition-property:transform,border-color,background-color,box-shadow,opacity;transition-duration:.35s}

/* Payment details header: the method's glyph, drawn for the 44px tile, fills the 72px badge. */
.skc-detail-glyph{transform:scale(1.55)}

/* Arbitrary utilities the payment details use that the archived Tailwind build does not ship. */
.shadow-\[0_0_0_3px_rgba\(34\,209\,126\,0\.06\)\]{box-shadow:0 0 0 3px rgba(34,209,126,.06)}
.shadow-\[0_0_0_1px_rgba\(255\,255\,255\,0\.08\)\]{box-shadow:0 0 0 1px rgba(255,255,255,.08)}
.bg-\[rgba\(245\,177\,61\,0\.06\)\]{background-color:rgba(245,177,61,.06)}
.border-\[rgba\(245\,177\,61\,0\.28\)\]{border-color:rgba(245,177,61,.28)}

/* Network logos inside the token network buttons on the payment details screen. */
.skc-net-logo{display:inline-grid;flex:none;width:16px;height:16px;place-items:center;overflow:hidden;border-radius:50%;box-shadow:0 0 0 1px rgba(255,255,255,.08),0 2px 6px rgba(0,0,0,.45)}
.skc-net-logo svg{width:11px;height:11px}

/* Payment details (design 16): coin head in one row, larger network logos lined up down the grid. */
.skc-details-live{gap:16px}
.skc-dh-row{flex-direction:row;justify-content:flex-start;gap:14px;padding:12px 16px}
.skc-dh-row>div:first-of-type{zoom:.6;flex-shrink:0}
.skc-dh-row>div:nth-of-type(2){font-size:19px;line-height:1.25}
.skc-details-live .skc-net-logo{width:25px;height:25px;box-shadow:0 0 0 1px rgba(255,255,255,.08)}
.skc-details-live .skc-net-logo svg{width:19px;height:19px}
.skc-details-live [data-detail-network]{display:grid;grid-template-columns:auto 6.6ch;justify-content:center;align-items:center;gap:8px;min-height:43px;font-size:11px;text-align:left;transition:background .22s,border-color .22s,box-shadow .22s}
.skc-details-live [data-detail-network]:hover{background:rgba(255,255,255,.03);border-color:rgba(255,255,255,.21)}
.skc-details-live [data-detail-network][aria-pressed=true]{border-color:rgba(39,229,151,.53);background:rgba(36,232,149,.05)}
.skc-details-live [data-net-warning]{font-weight:600}
.skc-details-live [data-net-label]{font-size:11px}
.skc-details-live [data-address-label]>div{font-size:11px}

/* Wallet address of the wrong network: red border, a warning triangle at the end and the hint above it. */
input.skc-addr-bad,input.skc-addr-bad:focus{border-color:rgba(239,68,68,.55)!important;box-shadow:0 0 0 3px rgba(239,68,68,.08)!important}
.skc-addr-bad-badge{position:absolute;right:9px;top:50%;display:flex;width:20px;height:20px;transform:translateY(-50%);animation:skc-addr-pop .2s cubic-bezier(.22,1,.36,1)}
.skc-addr-bad-badge>svg{width:20px;height:20px;filter:drop-shadow(0 2px 6px rgba(239,68,68,.35))}
.skc-addr-tip{position:absolute;right:-4px;bottom:calc(100% + 9px);z-index:5;padding:6px 9px;border:1px solid rgba(239,68,68,.45);border-radius:8px;background:#2a0f12;color:#fecaca;font-size:11px;font-weight:700;line-height:1.2;white-space:nowrap;box-shadow:0 10px 24px -8px rgba(0,0,0,.8);pointer-events:none;animation:skc-addr-tip .22s cubic-bezier(.22,1,.36,1)}
.skc-addr-tip::after{content:"";position:absolute;right:10px;top:100%;width:8px;height:8px;margin-top:-4px;border-right:1px solid rgba(239,68,68,.45);border-bottom:1px solid rgba(239,68,68,.45);background:#2a0f12;transform:rotate(45deg)}
@keyframes skc-addr-pop{from{opacity:0;transform:translateY(-50%) scale(.6)}to{opacity:1;transform:translateY(-50%)}}
@keyframes skc-addr-tip{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
.skc-addr-bad-badge{cursor:pointer}
.skc-addr-bad-badge .skc-addr-tip{transition:opacity .18s ease,transform .18s ease}
.skc-addr-bad-badge.skc-tip-hidden .skc-addr-tip{opacity:0;transform:translateY(4px);animation:none}

/* SBP bank list: the rows ease in like the region picker's. */
.skc-region-menu[data-state="open"] [data-sbp-bank-rows] { animation: skc-sort-row-in .26s cubic-bezier(.16, 1, .3, 1) .04s both; }
.skc-region-menu[data-settled] [data-sbp-bank-rows] { animation: none; }
/* Keep the mobile sell action clear of the iPhone home indicator. The whole
   fixed bar grows downward, so the total and button move up together. */
@media (max-width: 767px) {
  [data-mobile-sheet-trigger] {
    padding-bottom: calc(36px + env(safe-area-inset-bottom));
  }
}

/*
 * The display face (Goldman) carries no Cyrillic: its loaded subset stops at U+00FF.
 * In "Не указан Steam Trade URL" the Russian words therefore fall through to the
 * metric-compatible fallback while the Latin ones stay in Goldman, and the heading
 * reads as two fonts. Dropping Goldman here puts the whole phrase in that fallback —
 * the Russian words are unchanged, the Latin ones join them. Latin-only headings keep
 * Goldman, so this is applied to the Russian copy alone.
 */
.skc-title-one-font{font-family:__Goldman_Fallback_0b4653,sans-serif}
/*
 * The Russian heading holds one line. It is wider than the 36ch column that wraps the
 * copy, so it takes its own max-content width and is centred on that column rather than
 * breaking across two lines; the shift keeps it centred even while it overhangs. The
 * line measures about 17.1x its font size, so dividing the viewport by that (less 80px
 * for the card's own padding) lets a narrow phone scale it down instead of having it
 * clipped by the card, which hides its overflow.
 */
.skc-title-one-font{white-space:nowrap;width:max-content;max-width:none;position:relative;left:50%;transform:translateX(-50%);font-size:min(1.5rem,calc((100vw - 80px)/17.1))}

/*
 * The inventory card's call to action holds one line on every phone. Its label runs to
 * about 276px at the desktop settings ("Обновить инвентарь" is the longest of the three),
 * which is more than the card leaves once it narrows, so each step below trades padding,
 * letter-spacing and finally type size for width instead of letting the label wrap.
 * Measured worst-case widths: 276px as authored, then 246px, 218px and 198px.
 */
.skc-priv-cta{white-space:nowrap}
@media (max-width:480px){
  .skc-priv-cta{padding-left:1rem;padding-right:1rem;gap:.375rem;letter-spacing:.05em}
}
@media (max-width:400px){
  .skc-priv-cta{padding-left:.875rem;padding-right:.875rem;gap:.25rem;letter-spacing:.02em;font-size:11px}
}
@media (max-width:340px){
  .skc-priv-cta{padding-left:.75rem;padding-right:.75rem;letter-spacing:.01em;font-size:10px}
}

/* Панель выплаты не должна уходить под нижнюю полосу страницы.
 *
 * Панель прилипает к верху и растягивается по высоте строки сетки, поэтому её низ —
 * итоги и кнопка «Получить деньги» — оказывался за полосой «Выберите предметы выше»,
 * которая висит поверх всего. Ограничение по высоте поднимает низ панели над полосой;
 * середина панели и без того прокручивается сама, поэтому содержимое не теряется.
 *
 * Снизу остаётся 24px — ровно чтобы панель не упиралась в край окна. Больше отдавать
 * нечему: каждый отданный пиксель забирается у середины, а там при пяти способах выплаты
 * и так не помещается строка промокода.
 *
 * Нижняя граница в 560px оставлена для низких окон: там лучше прокрутка, чем панель,
 * сжатая до нечитаемого.
 *
 * Только на широком экране: ниже 1280px колонка одна, панель идёт в потоке и ни под чем
 * не прячется.
 */
@media (min-width: 1280px) {
  .skc-sell-layout > form { max-height: max(560px, calc(100vh - 136px)); }
}