/* Follows izzotrades.com: flat black, Montserrat with Roboto Mono labels,
   thin divider lines and corners of at most .25rem. */

@font-face { font-family: Montserrat; src: url(/fonts/montserrat-medium.woff2); font-weight: 500; font-display: swap; }
@font-face { font-family: Montserrat; src: url(/fonts/montserrat-semi-bold.woff2); font-weight: 600; font-display: swap; }
@font-face { font-family: Montserrat; src: url(/fonts/montserrat-bold.woff2); font-weight: 700; font-display: swap; }
@font-face { font-family: "Roboto Mono"; src: url(/fonts/roboto-mono.woff2); font-weight: 500; font-display: swap; }

:root {
  --black: #0c0c0c;
  --dark: #1f1f1f;
  --dark-hover: #262626;
  --white: #f1f1f1;
  --gray: #8b8b8b;
  --line: #1f1f1f;
  --ok: #4cc38a;
  --danger: #ff4b4b;
  --radius: .25rem;
  --gutter: clamp(1.25rem, 2.75vw, 2.5rem);
  --ff-main: "Montserrat", system-ui, sans-serif;
  --ff-mono: "Roboto Mono", ui-monospace, monospace;
  /* Old names still used by inline styles in the scripts. */
  --bg: var(--black);
  --surface: var(--dark);
  --border: var(--line);
  --text: var(--white);
  --muted: var(--gray);
  --accent: var(--white);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }
/* With Lenis running (scroll.js) it does the smoothing itself; the browser's
   own would fight it. The rest is what Lenis needs from the page. */
html.lenis { scroll-behavior: auto; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-stopped { overflow: clip; }
.lenis.lenis-smooth iframe { pointer-events: none; }

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--black);
  color: var(--white);
  font: 500 1rem/1.5 var(--ff-main);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body.modal-open { overflow: hidden; }

/* Landing and sell page: thin grid lines behind everything, fading out from
   the top centre. Fixed, so it stays put while the page scrolls. */
.grid-bg::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(255, 255, 255, .05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .05) 1px, transparent 1px);
  background-size: 64px 64px;
  -webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 0%, #000 30%, transparent 80%);
  mask-image: radial-gradient(ellipse 80% 70% at 50% 0%, #000 30%, transparent 80%);
}

main { flex: 1; }

a { color: inherit; text-decoration: none; }

h1, h2, h3 { margin: 0; font-weight: 600; line-height: 1.3; letter-spacing: -.03em; }
h1 { font-size: clamp(2rem, 1.5rem + 2vw, 2.5rem); }
h2 { font-size: clamp(1.5rem, 1.25rem + 1vw, 2rem); }

p { margin: 0; }

[hidden] { display: none !important; }

::selection { background: var(--white); color: var(--black); }

/* Every scrollbar on the site: the page, popups and lists. */
::-webkit-scrollbar { width: .9em; }
::-webkit-scrollbar-track, ::-webkit-scrollbar-corner { background-color: var(--black); }
::-webkit-scrollbar-thumb { background-color: var(--gray); border-radius: 1em; border: .25em solid var(--black); }
/* Firefox has no scrollbar parts to style, only colours. */
@supports not selector(::-webkit-scrollbar) {
  * { scrollbar-color: var(--gray) var(--black); }
}

.container { width: 100%; max-width: 100rem; margin: 0 auto; padding: 0 var(--gutter); }

.muted { color: var(--gray); }
/* A <span> is never smaller than .875rem: one without its own size follows the
   text around it (1em) unless that is smaller. */
span { font-size: max(.875rem, 1em); }
/* Every <small> on the site and in the admin panel. */
small { font-size: .875rem; }
.fine { margin-top: 1rem; margin-bottom: 1rem; color: var(--gray); font-size: .875rem; }

/* Small uppercase mono labels, e.g. "[ SELL ]". */
.eyebrow, .txt-mono {
  color: var(--gray);
  font-family: var(--ff-mono);
  font-size: 1rem;
  letter-spacing: 0;
  text-transform: uppercase;
}
.eyebrow::before { content: "[ "; }
.eyebrow::after { content: " ]"; }
.eyebrow + h1, .eyebrow + h2 { margin-top: .75rem; }

.link, .form-field small a, .form-msg a, .faq-list p a {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: .3em;
}
.link:hover, .form-field small a:hover, .form-msg a:hover { color: var(--gray); }

:focus-visible { outline: 1px solid var(--white); outline-offset: 2px; }
/* Text fields: no outline on a click, a grey one when tabbed to. Browsers
   outline a focused text field however it got focus, so the pages note
   whether Tab or the mouse was used last ("by-keyboard", set in app.js and
   the admin scripts). */
input:focus, textarea:focus { outline: none; }
html.by-keyboard input:focus, html.by-keyboard textarea:focus { outline: 2px solid var(--gray); }

/* ------------------------------------------------------------------ Buttons */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .75rem;
  padding: .5rem .75rem;
  border: 0;
  border-radius: var(--radius);
  background: none;
  color: var(--white);
  font: 500 .9375rem/1.5 var(--ff-mono);
  text-transform: uppercase;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color .2s, color .2s, opacity .2s;
}
.btn:disabled { opacity: .4; cursor: not-allowed; }

/* The white call to action. */
.btn-primary, .btn-steam {
  padding: .625rem .875rem;
  border-radius: .125rem;
  background: var(--white);
  color: var(--black);
  font-family: var(--ff-main);
  font-weight: 600;
  letter-spacing: -.01em;
}
.btn-primary:hover:not(:disabled), .btn-steam:hover { background: #d9d9d9; }

.btn-ghost { background: var(--dark); }
.btn-ghost:hover:not(:disabled) { background: var(--dark-hover); }

.btn-link {
  padding: .25rem 0;
  color: var(--gray);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: .3em;
}
.btn-link:hover { color: var(--white); }

.btn-lg { gap: 1rem; padding: .875rem 1rem; font-size: 1.125rem; }
.btn-block { width: 100%; }

.btn-danger { background: var(--dark); color: var(--danger); }
.btn-danger:hover:not(:disabled) { background: var(--dark-hover); }
.btn-danger-solid { background: var(--danger); color: var(--black); font-family: var(--ff-main); font-weight: 600; }
.btn-danger-solid:hover:not(:disabled) { background: #ff6b6b; }

.steam-icon { width: 1.5rem; height: 1.5rem; }
.cta-icon { width: 1.5rem; height: 1.5rem; flex: none; }

/* ------------------------------------------------------------------- Header */

.site-header {
  position: relative;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1.5rem 2.5rem;
  padding: var(--gutter) var(--gutter) 0;
}

.header-left { display: flex; align-items: center; gap: 1.5rem; }
.chip {
  display: inline-flex;
  align-items: center;
  min-height: 2.5rem;
  margin: 0;
  padding: .5rem .75rem;
  border-radius: var(--radius);
  background: var(--dark);
  font: 500 .9375rem/1.5 var(--ff-mono);
  text-transform: uppercase;
  white-space: nowrap;
}
a.chip:hover { background: var(--dark-hover); }
.logo-chip img { display: block; height: 1.125rem; width: auto; }
.clock { font-variant-numeric: tabular-nums; }
.clock-colon { color: var(--gray); }

.nav-actions { display: flex; align-items: center; flex-wrap: wrap; justify-content: flex-end; gap: .75rem; }
.auth-slot { display: flex; align-items: center; gap: .75rem; min-height: 2.5rem; }

.balance-chip { position: relative; }
.balance-chip-total {
  display: flex;
  align-items: center;
  gap: .75rem;
  min-height: 2.5rem;
  padding: .5rem .75rem;
  border-radius: var(--radius);
  background: var(--dark);
  font: 500 .9375rem/1.5 var(--ff-mono);
  text-transform: uppercase;
  white-space: nowrap;
}
.balance-chip-total:hover { background: var(--dark-hover); }
.balance-chip-label { color: var(--gray); }
.balance-chip-total strong { font-weight: 500; font-variant-numeric: tabular-nums; }
.balance-chip-details {
  position: absolute;
  top: calc(100% + .5rem);
  right: 0;
  left: 0;
  z-index: 30;
  display: none;
  /* Exactly as wide as the button above it. */
  padding: 1rem;
  border-radius: var(--radius);
  background: var(--dark);
  font-size: .875rem;
}
/* A bridge over the gap so the details stay open while the pointer moves down. */
.balance-chip-details::before { content: ""; position: absolute; left: 0; right: 0; top: -.5625rem; height: .5625rem; }
.balance-chip:hover .balance-chip-details, .balance-chip:focus-within .balance-chip-details { display: block; }
.balance-chip-details > strong {
  display: block;
  margin-bottom: .5rem;
  color: var(--gray);
  font: 500 .875rem/1.5 var(--ff-mono);
  text-transform: uppercase;
}
.balance-chip-details ul { margin: 0; padding: 0; list-style: none; }
.balance-chip-details p { margin: 0; padding: .5rem 0; border-top: 1px solid var(--dark-hover); white-space: nowrap; }
.balance-chip-details li { padding: .5rem 0; border-top: 1px solid var(--dark-hover); font-variant-numeric: tabular-nums; }
.balance-chip-amount { font-weight: 600; }

.user {
  display: flex;
  align-items: center;
  gap: .625rem;
  min-height: 2.5rem;
  padding: .25rem .75rem .25rem .25rem;
  border-radius: var(--radius);
  background: var(--dark);
}
.user:hover { background: var(--dark-hover); }
.user-name { max-width: 10rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; letter-spacing: -.02em; }
.avatar { width: 2rem; height: 2rem; border-radius: .125rem; object-fit: cover; background: var(--dark-hover); }
.avatar-fallback { display: grid; place-items: center; font-weight: 600; }

/* --------------------------------------------------------------------- Hero */

.hero-inner {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  align-items: start;
  gap: clamp(2.5rem, 5vw, 5rem);
  padding-top: clamp(3rem, 6vw, 5rem);
  padding-bottom: clamp(4rem, 9vw, 8rem);
}
.hero h1 { max-width: 16ch; font-size: clamp(2.25rem, 1.25rem + 3.5vw, 3.125rem); line-height: 1.1 }
.lead { max-width: 34rem; margin-top: 1rem; font-size: clamp(1.0625rem, 1rem + .4vw, 1.125rem); }
.hero-cta { margin: 2rem 0 1rem; }

/* Lines the title up with the top of the skins. */
.hero-copy { padding-top: 4rem; }

/* Trustpilot rating under the hero button: green star boxes, the score, and
   the number of reviews. The whole block is one link to our Trustpilot page. */
.trust { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .875rem; width: fit-content; margin-top: 1.5rem; }
.trust + .trust { margin-top: 1.25rem; }
.trust-stars { display: flex; gap: .1875rem; }
/* Trustpilot's star colours: green from four and a half stars, then
   lighter green, yellow, orange and red; a missing star is grey. */
.trust-stars { --star: #00b67a; }
.trust-stars.stars-4 { --star: #73cf11; }
.trust-stars.stars-3 { --star: #ffce00; }
.trust-stars.stars-2 { --star: #ff8622; }
.trust-stars.stars-1 { --star: #ff3722; }
.trust-stars span { display: grid; place-items: center; width: 1.5rem; height: 1.5rem; background: var(--star); }
.trust-stars span.is-half { background: linear-gradient(90deg, var(--star) 50%, #dcdce6 50%); }
.trust-stars span.is-empty { background: #dcdce6; }
.trust-stars svg { width: 1.125rem; height: 1.125rem; fill: #fff; }
.trust-score { font-size: 1rem; }
.trust-score strong { font-weight: 600; }
.trust-count { flex-basis: 100%; color: var(--gray); font-size: .875rem; }
.trust-brand { display: inline-flex; align-items: center; gap: .25rem; color: var(--white); font-weight: 600; vertical-align: bottom; }
.trust-brand svg { width: 1rem; height: 1rem; fill: #00b67a; }
/* The Facebook mark, the same size as one Trustpilot star. */
.trust-logo { display: grid; place-items: center; width: 1.5rem; height: 1.5rem; background: #1877f2; }
.trust-logo svg { width: 1.5rem; height: 1.5rem; fill: #fff; }
.trust:hover .trust-brand { text-decoration: underline; text-underline-offset: .2em; }

.hero-inventory-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem 1.5rem; margin-bottom: .75rem; }
/* "Show more" and "Show all" under the example inventory, side by side. */
.hero-more { display: flex; gap: .5rem; margin-top: .75rem; }
.hero-more .btn { flex: 1 1 0; min-width: 0; }
.hero-tools { display: flex; flex: 0 1 31rem; gap: .5rem; min-width: 0; }
.hero-tools input[type="search"] { flex: 1 1 12rem; min-width: 0; }
.hero-inventory-label { margin: 0; color: var(--gray); font: 500 .9375rem/1.5 var(--ff-mono); text-transform: uppercase; }

.price-results { margin: 0; padding: 1rem 0; color: var(--gray); list-style: none; }
.grid.hero-grid { grid-template-columns: repeat(auto-fill, minmax(10.5rem, 1fr)); }

/* ----------------------------------------------------------------- Sections */

.section { padding: clamp(3.5rem, 8vw, 7rem) 0; }
.section-head { margin-bottom: 3rem; }

/* Title on the left, content on the right, as on the brand site's pages. */
.split { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); align-items: start; gap: 2.5rem 3rem; }
.split-side { position: sticky; top: 2rem; }
.split-side .lead { font-size: 1rem; color: var(--gray); }

.rows { border-top: 1px solid var(--line); }
.row {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 2.4fr);
  align-items: baseline;
  gap: 1rem 2rem;
  padding: 2.25rem 0;
  border-bottom: 1px solid var(--line);
}
.row h3 { font-size: clamp(1.25rem, 1.1rem + .6vw, 1.625rem); font-weight: 500; }
.row .txt-mono::before { content: "+ "; }
.row p:last-child { max-width: 34rem; }

/* "How it works": three equal cards, each a small drawing of the step with
   its name underneath. The drawings are built from boxes in the site's own
   colours, so they stay sharp at any size and need no image files. */
.steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.step-card { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: var(--radius); background: var(--black); }
.step-card .txt-mono { margin: 1.25rem 1.25rem 0; }
.step-card h3 { margin: .375rem 1.25rem 1.5rem; font-size: clamp(1.25rem, 1.1rem + .6vw, 1.625rem); font-weight: 500; }
.step-art {
  display: grid;
  place-items: center;
  aspect-ratio: 4 / 3;
  padding: 1.5rem;
  overflow: hidden;
  border-bottom: 1px solid var(--line);
  border-radius: calc(var(--radius) - 1px) calc(var(--radius) - 1px) 0 0;
  background: radial-gradient(closest-side, #171717, var(--black));
}
.art-bar { display: block; height: .5rem; border-radius: .125rem; background: var(--dark-hover); }
.art-bar.w40 { width: 40%; }
.art-bar.w50 { width: 50%; }
.art-bar.w60 { width: 60%; }
.art-bar.w70 { width: 70%; }
.art-bar.w80 { width: 80%; }
.art-lines { display: flex; flex: 1; flex-direction: column; gap: .5rem; }

/* Step 1: the sign-in panel. */
.art-login { display: flex; flex-direction: column; gap: 1rem; width: min(100%, 17rem); padding: 1.25rem; border: 1px solid var(--dark-hover); border-radius: var(--radius); background: var(--dark); }
.art-login-head { display: flex; align-items: center; gap: .75rem; }
.art-login-head svg { flex: none; width: 1.5rem; height: 1.5rem; color: var(--white); }
.art-login-head .art-bar { flex: none; }
.art-account { display: flex; align-items: center; gap: .75rem; padding: .625rem; border-radius: .125rem; background: var(--black); }
.art-account img { flex: none; width: 2rem; height: 2rem; padding: .375rem; border-radius: .125rem; background: var(--dark); }
.art-button { padding: .5rem .75rem; border-radius: .125rem; background: var(--white); color: var(--black); font-size: .875rem; font-weight: 600; text-align: center; text-transform: uppercase; }

/* Step 2: the inventory. */
.art-inventory { display: flex; flex-direction: column; gap: .75rem; width: min(100%, 17rem); }
.art-items { display: grid; grid-template-columns: repeat(3, 1fr); gap: .375rem; }
.art-item {
  position: relative;
  aspect-ratio: 1;
  border: 1px solid var(--dark-hover);
  border-bottom: 2px solid var(--rarity);
  border-radius: .125rem;
  background: linear-gradient(to top, color-mix(in srgb, var(--rarity) 20%, transparent), transparent 60%), var(--dark);
}
.art-item.is-picked { border-color: var(--white); }
.art-item.is-picked::after {
  content: "✓";
  position: absolute;
  top: .25rem;
  right: .25rem;
  display: grid;
  place-items: center;
  width: 1rem;
  height: 1rem;
  border-radius: .125rem;
  background: var(--white);
  color: var(--black);
  font-size: .625rem;
  font-weight: 700;
}
/* The in-game rarity colours, as on the real item cards. */
.art-item.r-gold { --rarity: #ffc215; }
.art-item.r-covert { --rarity: #eb4b4b; }
.art-item.r-classified { --rarity: #d32ce6; }
.art-item.r-restricted { --rarity: #8847ff; }
.art-item.r-milspec { --rarity: #4b69ff; }
.art-total { display: flex; align-items: baseline; justify-content: space-between; padding: .625rem .75rem; border-radius: .125rem; background: var(--dark); }
.art-total span { color: var(--gray); font: 500 .875rem/1.5 var(--ff-mono); text-transform: uppercase; }
.art-total strong { font-size: 1.125rem; font-weight: 600; letter-spacing: -.02em; }

/* Step 3: the payment on top of its receipt. */
.art-paid { position: relative; width: min(100%, 17rem); padding-top: 3.5rem; }
.art-receipt { position: absolute; top: 0; right: 1.25rem; left: 1.25rem; display: flex; flex-direction: column; gap: .5rem; padding: 1rem; border: 1px solid var(--dark-hover); border-bottom: 0; border-radius: var(--radius) var(--radius) 0 0; background: var(--black); }
.art-payment { position: relative; display: flex; align-items: center; gap: .75rem; padding: 1rem; border: 1px solid var(--dark-hover); border-radius: var(--radius); background: var(--dark); }
.art-check { position: relative; flex: none; width: 2.25rem; height: 2.25rem; border-radius: 50%; background: var(--ok); }
.art-check::after { content: ""; position: absolute; top: 46%; left: 50%; width: .5rem; height: .9rem; border: solid var(--black); border-width: 0 2px 2px 0; transform: translate(-50%, -50%) rotate(45deg); }
.art-payment-text { display: flex; flex: 1; flex-direction: column; min-width: 0; }
.art-payment-text span { color: var(--gray); font: 500 .875rem/1.4 var(--ff-mono); text-transform: uppercase; }
.art-payment-text strong { font-size: 1.125rem; font-weight: 600; letter-spacing: -.02em; white-space: nowrap; }
.art-payment .status { background: var(--dark-hover); }

@media (max-width: 56rem) {
  .steps { grid-template-columns: minmax(0, 1fr); }
  .clock { display: none; }
  /* Stacked, each drawing takes the height it needs. */
  .step-art { aspect-ratio: auto; }
}

/* Landing page: feature cards (why us, safety), item types and reviews. */
.feature-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; border: 1px solid var(--line); background: var(--line); }
.feature-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.feature { padding: 1.75rem 1.5rem; background: var(--black); }
.feature h3 { margin-bottom: .75rem; font-size: 1.25rem; font-weight: 500; }
.feature p { margin: 0; color: var(--gray); }
.tag-list { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0 0 1.5rem; padding: 0; list-style: none; }
.tag-list li { padding: .5rem .875rem; border-radius: var(--radius); background: var(--dark); font: 500 .9375rem/1.4 var(--ff-mono); text-transform: uppercase; }
.section-text { max-width: 40rem; margin: 0 0 1.5rem; color: var(--gray); }
/* The "leave a review" card under the header, after a payout. */
.review-prompt { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem 2rem; margin: 1.5rem var(--gutter) 0; padding: 1.25rem 1.5rem; border: 1px solid var(--line); border-left: 3px solid var(--ok); border-radius: var(--radius); background: var(--dark); }
.review-prompt strong { font-size: 1.125rem; font-weight: 600; }
.review-prompt p { margin: .25rem 0 0; color: var(--gray); }
.review-prompt-actions { display: flex; flex-wrap: wrap; gap: .5rem; }

/* Reviews: one centred block around a big number. */
.section-center { text-align: center; }
.section-center .section-text { margin-left: auto; margin-right: auto; }
.section-center .button-row { justify-content: center; }
.review-count { margin: .5rem 0 0; }
.review-count strong { display: block; font-size: clamp(4rem, 3rem + 5vw, 7rem); font-weight: 600; line-height: 1; letter-spacing: -.05em; }
.section-center h2 { margin: .5rem 0 1rem; }

/* Affiliate: a banner with the text on the left and the button on the right. */
.cta-banner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.5rem 3rem; padding: clamp(1.75rem, 4vw, 3rem); border: 1px solid var(--line); border-radius: var(--radius); background: var(--dark); }
.cta-banner .section-text { margin-bottom: 0; }
.cta-banner h2 { margin-bottom: .75rem; }

/* What we buy: the two groups of item types. */
.tag-heading { margin: 0 0 .75rem; color: var(--gray); font: 500 1rem/1.5 var(--ff-mono); text-transform: uppercase; }
.tag-heading-gap { margin-top: 3rem; }
.tag-list-muted li { background: none; border: 1px solid var(--line); color: var(--gray); }
.button-row { display: flex; flex-wrap: wrap; gap: .5rem; }

.faq-list { border-top: 1px solid var(--line); counter-reset: faq; }
.faq { border-bottom: 1px solid var(--line); counter-increment: faq; }
.faq summary {
  display: flex;
  align-items: baseline;
  gap: 1.5rem;
  padding: 1.5rem 0;
  font-size: 1.125rem;
  font-weight: 600;
  letter-spacing: -.02em;
  cursor: pointer;
  list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::before {
  content: counter(faq, decimal-leading-zero);
  color: var(--gray);
  font: 500 .9375rem/1.5 var(--ff-mono);
}
.faq summary::after { content: "+"; margin-left: auto; color: var(--gray); font: 500 1.25rem/1 var(--ff-mono); }
.faq[open] summary::after { content: "–"; }
.faq summary:hover { color: var(--gray); }
.faq p { max-width: 42rem; padding: 0 0 1.5rem 2.75rem; color: var(--gray); }

/* ------------------------------------------------------------------- Footer */

/* The same footer as on izzotrades.com, from its stylesheet. */
.footer { margin-top: 4rem; }
.footer ul { margin: 0; padding: 0; list-style: none; }
.footer p { margin: 0; }
.txt-gray { color: var(--gray); }
.footer-row-1 { display: flex; align-items: center; justify-content: flex-start; }
.footer-row-2 { padding-top: 5rem; padding-bottom: 4rem; }
.footer-grid { display: grid; grid-template-columns: repeat(5, 1fr); align-items: center; width: 100%; max-width: 120rem; margin: 0 auto; padding: 0 var(--gutter); }
.footer-grid-start { align-items: flex-start; }

.secondary-btn {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  gap: .75rem;
  padding: .5rem .75rem;
  border: 0;
  border-radius: .25rem;
  background-color: var(--dark);
  color: var(--white);
  font-family: var(--ff-mono);
  font-size: .9375rem;
  line-height: 1.5;
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color .2s;
}
.secondary-btn:hover, .secondary-btn:focus-visible { background-color: var(--dark-hover); }
.secondary-links-wrap { grid-column: 1 / 3; }
.secondary-links { display: flex; align-items: center; gap: .5rem; }
.primary-links-wrap { grid-column: 3 / 5; }
.primary-links { display: flex; gap: 3rem; }
.primary-links li a { font-size: 1.125rem; white-space: nowrap; }
/* An underline that slides away on hover. */
[data-underline=true] { position: relative; }
[data-underline=true]::after {
  content: "";
  position: absolute;
  bottom: -.125rem;
  left: 0;
  width: 100%;
  height: 1px;
  background-color: currentColor;
  transform: scaleX(1);
  transform-origin: left;
  transition: transform .735s cubic-bezier(.65, .05, 0, 1);
}
[data-underline=true]:hover::after, [data-underline=true]:focus-visible::after { transform: scaleX(0); transform-origin: right; }

.credits-wrap { position: relative; width: fit-content; margin-left: auto; }
.credits-wrap p { font-size: .9375rem; }
.secondary-btn.more-padd { padding-right: .875rem; cursor: default; }
.credits-modal {
  position: absolute;
  right: 0;
  bottom: 120%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: .75rem;
  padding: .875rem;
  border-radius: .25rem;
  background-color: var(--dark);
  opacity: 0;
  visibility: hidden;
  transition: opacity .2s ease-out, visibility .2s ease-out;
}
.credits-wrap:hover .credits-modal, .credits-wrap:focus-within .credits-modal { opacity: 1; visibility: visible; }
.credits-modal-p { font-size: .9375rem; line-height: 1; }
.credits-modal-divider { width: 100%; height: 1px; background-color: #ffffff1a; }
.credits-modal-cta { display: inline-flex; align-items: center; gap: .75rem; }

.row-2-col-1 { grid-column: 1 / 3; }
.row-2-col-1 p { max-width: 33rem; }
.row-2-col-2 { grid-column: 3 / 4; }
.row-2-col-3 { grid-column: 4 / 5; }
.row-2-col-4 { margin-left: auto; }

/* Icon buttons whose label slides out on hover. */
.socials-row { display: flex; align-items: center; gap: .5rem; }
.social-btn {
  display: inline-flex;
  align-items: center;
  height: 2.375rem;
  padding: 0;
  border: none;
  border-radius: .25rem;
  background: #1e1e1e;
  color: inherit;
  text-decoration: none;
  cursor: pointer;
}
.social-btn .icon-wrap { display: flex; flex-shrink: 0; align-items: center; justify-content: center; min-width: 2.75rem; }
.social-btn .label { display: grid; grid-template-columns: 0fr; transition: grid-template-columns .3s ease; }
.social-btn .label-inner {
  overflow: hidden;
  padding: 0;
  color: var(--white);
  font: 500 .9375rem/1.3 var(--ff-mono);
  text-transform: uppercase;
  white-space: nowrap;
  transition: padding-right .3s ease;
}
.social-btn:focus-visible .label, .social-btn.is-copied .label { grid-template-columns: 1fr; }
.social-btn:focus-visible .label-inner, .social-btn.is-copied .label-inner { padding-right: .875rem; }
@media (hover: hover) and (pointer: fine) {
  .social-btn:hover .label { grid-template-columns: 1fr; }
  .social-btn:hover .label-inner { padding-right: .875rem; }
}

/* The big IZZOTRADES at the bottom, sliding sideways (app.js moves it). */
.marquee { position: relative; width: 100%; overflow: hidden; }
.marquee-scroll { position: relative; display: flex; width: 100%; will-change: transform; }
.marquee-collection { position: relative; display: flex; will-change: transform; }
.marquee-item { display: flex; align-items: center; justify-content: flex-start; font-size: max(4em, 8vw); }
.marquee-txt { margin: 0 .5em 0 0; font-size: 1.5em; font-weight: 700; line-height: 1; white-space: nowrap; opacity: .05; user-select: none; }
.marquee-txt span { font-weight: 500; }

@media (max-width: 100em) {
  .footer-grid { grid-template-columns: repeat(2, 1fr); row-gap: 2rem; column-gap: 7rem; }
  .credits-wrap, .row-2-col-4 { margin: 0; }
  .row-2-col-4 { grid-column: 1 / 3; }
  .credits-modal { right: unset; left: 0; }
}
@media (max-width: 81.875em) {
  .footer-grid { display: flex; flex-direction: column; align-items: flex-start; row-gap: 2.5rem; }
  .secondary-links-wrap, .primary-links-wrap, .row-2-col-2, .row-2-col-3 { grid-column: unset; }
}
@media (max-width: 50.625em) {
  .footer-grid { column-gap: 0; }
  .secondary-links { flex-wrap: wrap; }
  .primary-links { flex-wrap: wrap; gap: 2rem; }
}

/* -------------------------------------------------------------------- Modal */

.modal { position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; padding: 1.25rem; overflow-y: auto; }
.modal-backdrop { position: fixed; inset: 0; background: rgba(0, 0, 0, .8); }
.modal-card {
  position: relative;
  width: 100%;
  max-width: 26rem;
  padding: 2rem;
  border: 1px solid var(--dark-hover);
  border-radius: var(--radius);
  background: var(--black);
  text-align: center;
}
.modal-card h2 { font-size: 1.5rem; }
.modal-card p { margin: .75rem 0 1.5rem; color: var(--gray); }
.modal-card .fine { margin: 1rem 0; }
.modal-close {
  position: absolute;
  top: .625rem;
  right: .625rem;
  width: 2rem;
  height: 2rem;
  border: 0;
  border-radius: var(--radius);
  background: var(--dark);
  color: var(--white);
  font: 500 1.125rem/1 var(--ff-mono);
  cursor: pointer;
}
.modal-close:hover { background: var(--dark-hover); }

/* Our own dropdown, in place of the browser's <select> list: dropdown.js on
   the site, dropdown() in the admin panel's app.js. */
.dropdown { position: relative; }
.dropdown-button {
  display: flex;
  align-items: center;
  min-width: 11rem;
  height: 2.5rem;
  padding: 0 2.25rem 0 2.5rem;
  border: 0;
  border-radius: var(--radius);
  /* Two pictures inside the button: the filter icon on the left (like the
     magnifying glass in a search field) and the chevron on the right. */
  background-color: var(--dark);
  background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3 6H21' stroke='%238B8B8B' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M6 12H18' stroke='%238B8B8B' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M9 18H15' stroke='%238B8B8B' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none' stroke='%23f1f1f1' stroke-width='1.5'%3E%3Cpath d='M1 1.5l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: .75rem center, right .75rem center;
  background-size: 1.125rem, .75rem;
  color: var(--white);
  font: inherit;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color .2s;
}
.dropdown-button:hover, .dropdown.is-open .dropdown-button { background-color: var(--dark-hover); }
.dropdown-list {
  position: absolute;
  top: calc(100% + .375rem);
  left: 0;
  z-index: 30;
  min-width: 100%;
  max-height: 20rem;
  margin: 0;
  padding: .25rem;
  overflow-y: auto;
  border: 1px solid var(--dark-hover);
  border-radius: var(--radius);
  background: var(--black);
  box-shadow: 0 1rem 2.5rem rgba(0, 0, 0, .6);
  list-style: none;
}
.dropdown-list:focus-visible { outline: none; }
.dropdown-option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding: .5rem .5rem .5rem .625rem;
  border-radius: .125rem;
  color: var(--gray);
  white-space: nowrap;
  cursor: pointer;
}
.dropdown-option.is-active { background: var(--dark); color: var(--white); }
.dropdown-option[aria-selected="true"] { color: var(--white); }
/* The chosen one is marked with a small square, like the status chips. */
.dropdown-option[aria-selected="true"]::after { content: ""; flex: none; width: .375rem; height: .375rem; background: var(--white); }

/* ---------------------------------------------------------------- Sell page */

.sell { padding-top: clamp(3rem, 7vw, 6rem); padding-bottom: 4rem; }
.sell-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; margin-bottom: 2.5rem; }
.sell-head h1 { margin-bottom: .75rem; }
.sell-head .muted { font: 500 .9375rem/1.5 var(--ff-mono); text-transform: uppercase; }

.toolbar { display: flex; flex-direction: column; gap: .75rem; margin-bottom: 1rem; }
.toolbar-row { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.toolbar input[type="search"], .toolbar select, .hero-tools input[type="search"], .hero-tools select {
  height: 2.5rem;
  padding: 0 .75rem;
  border: 0;
  border-radius: var(--radius);
  background: var(--dark);
  color: var(--white);
  font: 500 .9375rem/1.5 var(--ff-mono);
  text-transform: uppercase;
}
.toolbar input[type="search"] { flex: 1 1 14rem; min-width: 0; }
/* A magnifying glass inside every search field (also the admin panel's). */
.toolbar input[type="search"], .hero-tools input[type="search"], .view-tools input[type="search"] {
  padding-left: 2.5rem;
  background-image: url("data:image/svg+xml,%3Csvg width='22' height='22' viewBox='0 0 22 22' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M19.2497 19.2487L15.1375 15.1292M17.4163 9.6237C17.4163 11.6902 16.5954 13.672 15.1342 15.1332C13.673 16.5945 11.6912 17.4154 9.62467 17.4154C7.5582 17.4154 5.57636 16.5945 4.11513 15.1332C2.65391 13.672 1.83301 11.6902 1.83301 9.6237C1.83301 7.55722 2.65391 5.57538 4.11513 4.11416C5.57636 2.65294 7.5582 1.83203 9.62467 1.83203C11.6912 1.83203 13.673 2.65294 15.1342 4.11416C16.5954 5.57538 17.4163 7.55722 17.4163 9.6237Z' stroke='%238B8B8B' stroke-width='1.83333' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: .75rem center;
  background-size: 1.125rem;
}
/* "Show more" and "Show all" under the inventory, side by side. */
.load-more { display: flex; gap: .5rem; margin-top: 1rem; }
.load-more .btn { flex: 1 1 0; min-width: 0; }
.toolbar-refresh { flex: none; min-width: 11rem; height: 2.5rem; }
.toolbar input::placeholder, .hero-tools input::placeholder { color: var(--gray); }
/* Our own chevron, so it sits as far from the edge as the text does. */
.toolbar select, .hero-tools select, .view-tools select {
  padding-right: 2.25rem;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none' stroke='%23f1f1f1' stroke-width='1.5'%3E%3Cpath d='M1 1.5l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right .75rem center;
  background-size: .75rem;
  cursor: pointer;
}
.toolbar select:hover, .hero-tools select:hover, .view-tools select:hover { background-color: var(--dark-hover); }
.check { display: flex; align-items: center; gap: .5rem; color: var(--gray); cursor: pointer; user-select: none; }
.check input { width: 1rem; height: 1rem; accent-color: var(--white); }

/* The sale list ("Your sale") is wide enough for names like "Gamma Doppler
   (FN, Phase 3)" next to the price. */
.sell-layout { display: grid; grid-template-columns: minmax(0, 1fr) 27.5rem; align-items: start; gap: 2rem; }
/* The seller's inventory: 5 cards per row, fewer when its column is too narrow
   for 5 cards of about 12.5rem (weapon names and two badges need that). */
.sell-layout > section { container-type: inline-size; }
.sell-layout .grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
@container (max-width: 64rem) { .sell-layout .grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@container (max-width: 51rem) { .sell-layout .grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@container (max-width: 38rem) { .sell-layout .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* At most 5 cards per row (wide enough for the wear and the Doppler phase side
   by side), fewer when they would get narrower than 13rem. */
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(max(13rem, calc((100% - 4 * .5rem) / 5)), 1fr)); gap: .5rem; }

.card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: .75rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--black);
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: background-color .2s, border-color .2s;
}
.card:hover:not(:disabled) { background: var(--dark); }
/* The rarity colour, as a line along the bottom inside the border, so the
   white selection border goes all the way round. */
.card::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 3px;
  border-radius: 0 0 calc(var(--radius) - 1px) calc(var(--radius) - 1px);
  background: var(--rarity, transparent);
}
.card.skeleton::after { display: none; }
.card.is-selected { border-color: var(--white); background: var(--dark); }
.card.is-locked { opacity: .45; cursor: not-allowed; }

.card-badges { display: flex; flex-wrap: wrap; gap: .25rem; min-height: 1.375rem; }
.badge {
  padding: .0625rem .375rem;
  border-radius: .125rem;
  background: var(--dark);
  color: var(--gray);
  font: 500 .875rem/1.6 var(--ff-mono);
  text-transform: uppercase;
}
/* A touch smaller on cards, so the wear and a Doppler phase ("MINIMAL WEAR",
   "BLACK PEARL") fit side by side. */
.card-badges .badge { padding: .0625rem .3125rem; font-size: .78rem; }
.card.is-selected .badge { background: var(--dark-hover); }
.badge-st { color: #e08a55; }
.badge-sv { color: #e6c84a; }
.badge-phase { color: #b9a2ff; }
.phase-ruby { color: #4d000c; background-color: #ff3957; }
.phase-sapphire { color: #001844; background-color: #337cff; }
.phase-emerald { color: #005226; background-color: #59ffa6; }
.phase-black-pearl { color: #220056; background-color: #7660d8; }

.card-img { display: grid; place-items: center; height: 7rem; margin: .5rem 0; }

/* A box for an item picture (pictureBox() in app.js). A picture fills the box,
   scaled down to fit; a measured one ("is-trimmed") is cropped to the item and
   sized and placed by app.js. Nothing ever shows outside the box. */
.pic { position: relative; overflow: hidden; }
/* Absolute, so a picture not measured yet fills the box instead of showing at
   its own size (360px) and being cut off. */
.pic img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.pic img.is-trimmed { inset: auto; max-width: none; }

/* The text area glows in the rarity colour: 25% at the bottom of the card,
   fading to nothing at the top of the item name. It stretches out to the
   card's edges (undoing the card's padding) and sits behind the text. */
.card-body {
  display: flex;
  flex-direction: column;
  gap: .125rem;
  /* Fills the rest of the card, so the glow reaches the bottom even when a
     card has less text than its neighbours (e.g. a case with no float). */
  flex: 1;
  min-width: 0;
  margin: 0 -.75rem -.75rem;
  padding: 0 .75rem .75rem;
  border-radius: 0 0 calc(var(--radius) - 1px) calc(var(--radius) - 1px);
  background: linear-gradient(to top, color-mix(in srgb, var(--rarity, transparent) 20%, transparent), transparent);
}
/* The weapon, small and grey, above the skin name (cardNameLines()). */
.card-weapon {
  overflow: hidden;
  color: var(--gray);
  font: 500 .875rem/1.5 var(--ff-mono);
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}
.card-name {
  overflow: hidden;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: -.01em;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.card-float { color: var(--gray); font: 500 .875rem/1.5 var(--ff-mono); text-transform: uppercase; }
.card-float { font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
/* An item without a float (a vanilla knife, a case) keeps an empty line where
   the float would be, so its name lines up with the other cards in the row.
   On the landing page no item has a float, so there the line is left out. */
.card-float.is-empty { visibility: hidden; }
.hero-grid .card-float.is-empty { display: none; }
/* The name sits right under the picture, at the same height on every card in
   a row; the price part (whatever comes after the float line) goes to the
   bottom, however tall it is ("Tradable in …" takes three lines). */
.card-body > .card-float + * { margin-top: auto; padding-top: .5rem; }
.hero-grid .card-body > .card-float + * { padding-top: .25rem; }
.card-price { margin-top: .5rem; font-size: 1rem; font-weight: 600; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
/* "We pay" above the price on the landing page cards. */
.card-price-label { margin-top: .25rem; color: var(--gray); font: 500 .75rem/1.5 var(--ff-mono); text-transform: uppercase; }
.card-price-tight { margin-top: 0; }
.card.is-locked .card-price { color: var(--gray); font: 500 .875rem/1.5 var(--ff-mono); text-transform: uppercase; }

.card-check {
  position: absolute;
  top: .5rem;
  right: .5rem;
  display: none;
  place-items: center;
  width: 1.375rem;
  height: 1.375rem;
  border-radius: .125rem;
  background: var(--white);
  color: var(--black);
  font-size: .875rem;
  font-weight: 700;
}
.card.is-selected .card-check { display: grid; }

/* Bottom right, next to "Skriv för pris": the badges at the top keep their row. */
.card-info {
  position: absolute;
  right: .375rem;
  bottom: .5rem;
  display: grid;
  place-items: center;
  width: 1.75rem;
  height: 1.75rem;
  padding: .25rem;
  border: 0;
  border-radius: var(--radius);
  background: none;
  color: var(--gray);
  cursor: pointer;
}
.card-info svg { width: 100%; height: 100%; }
.card-info:hover, .card-info:focus-visible { background: var(--dark); color: var(--white); }
/* The ⓘ slowly fades in and out to draw the eye to "Skriv för pris", all of
   them in step (sell.js: infoButton), also on hover and after a click. */
.card-info { animation: info-pulse 2.4s ease-in-out infinite; }
@keyframes info-pulse {
  0%, 100% { opacity: 1; color: var(--white); }
  50% { opacity: .35; }
}
@media (prefers-reduced-motion: reduce) {
  .card-info { animation: none; }
}
.card.is-locked:has(.card-info) { opacity: 1; cursor: default; }

.card.is-locked:has(.card-info) > :not(.card-info) { opacity: .45; }
.sell-note { max-width: 40rem; margin: .25rem 0 0; color: var(--gray); font-size: 1rem; }
.card-hold { color: var(--gray); font: 500 .875rem/1.5 var(--ff-mono); text-transform: uppercase; }
.card-hold-price { display: block; margin-top: .25rem; color: var(--white); text-transform: none; font: 500 .875rem/1.4 var(--ff-main); }
.card-hold strong { display: block; color: var(--white); font: 600 1rem/1.4 var(--ff-main); letter-spacing: -.02em; text-transform: none; font-variant-numeric: tabular-nums; }
.dialog-link { display: inline-block; margin: -.75rem 0 1.5rem; }

.skeleton {
  height: 15rem;
  border-bottom-width: 1px;
  cursor: default;
  background: linear-gradient(100deg, var(--black) 30%, var(--dark) 50%, var(--black) 70%);
  background-size: 200% 100%;
  animation: shimmer 1.3s linear infinite;
}
@keyframes shimmer { to { background-position: -200% 0; } }

.state {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .625rem;
  padding: 3.5rem 1.5rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  text-align: center;
}
.state h3 { font-size: 1.25rem; }
.state p { max-width: 26rem; color: var(--gray); }
.state .btn { margin-top: .5rem; }

.tray {
  position: sticky;
  top: 1.5rem;
  display: flex;
  flex-direction: column;
  max-height: calc(100vh - 3rem);
  padding: 1.25rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--black);
}
.tray h2 { margin-bottom: .75rem; font-size: 1.25rem; }
.tray-list { flex: 1; margin: 0; padding: 0; overflow-y: auto; list-style: none; scrollbar-width: thin; scrollbar-color: var(--dark-hover) transparent; }
.tray-list li { display: flex; align-items: center; gap: .625rem; line-height: 1.4; padding: .5rem 0; border-bottom: 1px solid var(--line); font-size: .875rem; }
.tray-img { flex: none; width: 2.5rem; height: 1.875rem; }
/* Always two lines: the weapon (grey) and the skin with wear and phase. */
.tray-name { display: flex; flex: 1; flex-direction: column; min-width: 0; }
.tray-weapon, .tray-skin { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tray-weapon { color: var(--gray); font: 500 .75rem/1.5 var(--ff-mono); text-transform: uppercase; }
.tray-skin { font-weight: 600; }
.tray-details { color: var(--gray); font-weight: 500; }
.tray-price { font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tray-list button { border: 0; background: none; color: var(--gray); font: 500 1rem/1 var(--ff-mono); cursor: pointer; }
.tray-list button:hover { color: var(--white); }
.tray-foot { display: flex; flex-direction: column; gap: .625rem; margin-top: 1rem; }
/* "Missing some items?" with a trade URL field, for sellers without one. */
.trade-link-box { display: flex; flex-direction: column; gap: .625rem; margin-top: .25rem; padding-top: 1.25rem; border-top: 1px solid var(--line); }
.trade-link-box[hidden] { display: none; }
.trade-link-box p { margin: 0; color: var(--gray); font-size: .875rem; }
.trade-link-box .link { align-self: flex-start; font-size: .875rem; }
.tray-count { display: flex; justify-content: space-between; color: var(--gray); font: 500 .9375rem/1.5 var(--ff-mono); text-transform: uppercase; }
.tray-count strong { color: var(--white); font-weight: 500; }
.tray-total { align-items: baseline; padding-top: .625rem; border-top: 1px solid var(--line); }
.tray-total strong { font: 600 1.5rem/1.2 var(--ff-main); letter-spacing: -.03em; text-transform: none; font-variant-numeric: tabular-nums; }
.tray-limit { font-size: .8125rem; }

/* ------------------------------------------------------------- Profile page */

.profile { padding-top: clamp(3rem, 7vw, 6rem); padding-bottom: 4rem; }
.profile-head { display: flex; align-items: center; gap: 1rem; min-height: 4rem; margin-top: 1.5rem; }
.profile-head h1 { margin-bottom: .25rem; }
.profile-head a { font: 500 .9375rem/1.5 var(--ff-mono); text-transform: uppercase; }
.profile-head a:hover { color: var(--white); }
.avatar-lg { width: 4rem; height: 4rem; border-radius: var(--radius); font-size: 1.5rem; }

.tabs { display: flex; gap: .5rem; }
.tab {
  padding: .5rem .75rem;
  border: 0;
  border-radius: var(--radius);
  background: var(--dark);
  color: var(--white);
  font: 500 .9375rem/1.5 var(--ff-mono);
  text-transform: uppercase;
  cursor: pointer;
}
.tab:hover { background: var(--dark-hover); color: var(--white); }
.tab[aria-selected="true"] { background: var(--white); color: var(--black); }
.panel { max-width: 51rem; padding-top: 2rem; }

.form-field { display: flex; flex-direction: column; gap: .5rem; margin-bottom: 1.5rem; }
.form-field > span { color: var(--gray); font: 500 .875rem/1.5 var(--ff-mono); text-transform: uppercase; }
.form-field input, .trade-link-box input {
  height: 2.75rem;
  padding: 0 .875rem;
  border: 0;
  border-radius: var(--radius);
  background: var(--dark);
  color: var(--white);
  font: inherit;
}
.form-field input::placeholder, .trade-link-box input::placeholder { color: #5f5f5f; }
.form-field small { color: var(--gray); }
.form-field small a { color: var(--white); }
.form-actions { display: flex; align-items: center; gap: 1rem; }
.form-msg { font-size: .875rem; }
.dialog .modal-card.modal-wide { max-width: 32rem; }
.selling-details-form .form-field { min-width: 0; margin-bottom: 1rem; }
.selling-details-form .form-msg { margin: 0 0 1rem; }
.form-msg.is-ok { color: var(--ok); }
.form-msg.is-error { color: var(--danger); }
.modal-card .form-msg { margin: 0 0 1rem; }

.transaction { border-bottom: 1px solid var(--line); }
.transaction:first-of-type { border-top: 1px solid var(--line); }
.transaction summary {
  display: grid;
  grid-template-columns: 1fr minmax(max-content, 1fr) repeat(3, 1fr);
  align-items: center;
  gap: 1rem;
  padding: 1.5rem .75rem;
  cursor: pointer;
  list-style: none;
  transition: background-color .2s;
}
.transaction summary::-webkit-details-marker { display: none; }
.transaction[open] summary { background: var(--dark); }

/* Directional row hover (hover.js): a dark tile that grows from the edge the
   pointer entered by and shrinks towards the edge it leaves by. Used on the
   transaction rows here and on the clickable rows in the admin tables.
   The tile is the row's own background, drawn as a block of colour whose
   height goes from nothing to the full row. (An extra element inside a table
   row would be laid out as a cell and push the columns out of line.) */
.transaction summary, .table tbody tr.is-link {
  background-image: linear-gradient(var(--dark), var(--dark));
  background-repeat: no-repeat;
  background-position: center var(--hover-edge, top);
  background-size: 100% 0;
  transition: background-size .5s cubic-bezier(.16, 1, .3, 1);
}
.transaction summary.is-hovered, .table tbody tr.is-link.is-hovered { background-size: 100% 100%; }
.transaction summary.is-hover-reset, .table tbody tr.is-link.is-hover-reset { transition: none; }
@media (prefers-reduced-motion: reduce) {
  .transaction summary, .table tbody tr.is-link { transition: none; }
}
.transaction summary .muted { font: 500 .875rem/1.5 var(--ff-mono); text-transform: uppercase; }
.transaction-id { font-weight: 600; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.transaction-total { font-weight: 600; text-align: right; font-variant-numeric: tabular-nums; }

.status {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .125rem .5rem;
  border-radius: .125rem;
  background: var(--dark);
  color: var(--white);
  font: 500 .875rem/1.6 var(--ff-mono);
  text-transform: uppercase;
  white-space: nowrap;
}
.status::before { content: ""; width: .375rem; height: .375rem; border-radius: 50%; background: currentColor; }
.transaction summary .status { justify-self: start; background: var(--dark-hover); }
.transaction summary .muted { white-space: nowrap; }
.status-pending { color: #e6c84a; }
.status-traded { color: #8ea2ff; }
.status-completed { color: var(--ok); }
.status-cancelled, .status-expired { color: var(--gray); }

.receipt { padding: 1.5rem .75rem 2rem; }
.receipt-head { display: flex; justify-content: space-between; gap: 1.5rem; margin-bottom: 1.25rem; font-size: .875rem; }
.receipt-head div { display: flex; flex-direction: column; gap: .125rem; color: var(--gray); }
.receipt-head div:last-child { text-align: right; }
.receipt-head strong { color: var(--white); font-size: .875rem; }
.receipt-table { width: 100%; border-collapse: collapse; font-size: .875rem; }
.receipt-table th, .receipt-table td { padding: .625rem 0; border-bottom: 1px solid var(--line); text-align: left; }
.receipt-table th { color: var(--gray); font: 500 .875rem/1.5 var(--ff-mono); text-transform: uppercase; }
.receipt-table .num { text-align: right; font-variant-numeric: tabular-nums; }
.receipt-table .float { color: var(--gray); font-family: var(--ff-mono); font-size: .875rem; overflow-wrap: anywhere; }
.receipt-table tfoot td { border-bottom: 0; font-weight: 600; }
.receipt-actions { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1rem; }
.receipt-actions .btn-danger { margin-left: auto; }
.receipt-actions .btn-danger + .btn-danger { margin-left: 0; }

/* showDialog() in app.js: sits above every other popup. */
.dialog { z-index: 60; }
.dialog .modal-card { max-width: 25rem; }
.dialog-actions { display: flex; justify-content: center; gap: .625rem; }

/* ------------------------------------------------------- Checkout & payouts */

.modal-wide {
  max-width: 35rem;
  text-align: left;
}
.modal-wide h2 { padding-right: 2.5rem; }
.modal-wide form > p, .sale-done > p { margin: .5rem 0 1.25rem; }
.modal-wide .form-msg { margin: 0 0 1rem; }

.sale-done h2 { margin-bottom: 1.25rem; }
.sale-summary { display: flex; align-items: center; flex-wrap: wrap; gap: 1rem 2rem; margin-bottom: 1rem; }
.sale-summary > div { display: flex; flex-direction: column; gap: .125rem; }
.sale-summary .muted { font: 500 .875rem/1.5 var(--ff-mono); text-transform: uppercase; }
.sale-summary strong { font-size: 1.25rem; font-weight: 600; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.sale-summary .status { margin-left: auto; }
.countdown-box {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  margin-bottom: 1rem;
  padding: 1rem;
  border-radius: var(--radius);
  background: var(--dark);
  font-size: .875rem;
}
.countdown { font: 500 2rem/1 var(--ff-mono); font-variant-numeric: tabular-nums; }
.sale-done .btn-link { margin-top: .5rem; }
.sale-received {
  display: flex;
  flex-direction: column;
  gap: .25rem;
  margin-bottom: 1rem;
  padding: 1rem;
  border-left: 2px solid var(--ok);
  border-radius: .125rem;
  background: var(--dark);
  font-size: .875rem;
}
.sale-received-body { display: flex; flex-direction: column; gap: .25rem; }
.sale-received strong { color: var(--ok); font-size: 1rem; }
.sale-received p { margin: 0; color: var(--gray); }
.modal-wide .form-field { margin-bottom: 1rem; }

.confirm-section, .form-group { margin: 0 0 1.25rem; padding: 0; border: 0; }
.confirm-section legend, .form-group legend, .confirm-section > strong {
  display: block;
  margin-bottom: .75rem;
  padding: 0;
  font-weight: 600;
  letter-spacing: -.02em;
}
.confirm-section > p { margin: 0 0 .625rem; font-size: .875rem; }
.form-group { margin-bottom: 1.5rem; padding: 1.25rem 1.25rem 0; border: 1px solid var(--line); border-radius: var(--radius); }
.form-group legend { margin-bottom: 0; padding: 0 .5rem; }

.confirm-items { margin: 0 0 1.25rem; padding: 0; list-style: none; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; }
.confirm-steps {
  display: flex;
  flex-direction: column;
  gap: .5rem;
  margin: 0 0 1rem;
  padding: 1rem 1rem 1rem 2.25rem;
  border-radius: var(--radius);
  background: var(--dark);
  color: var(--gray);
  font-size: .875rem;
}
.confirm-steps b { color: var(--white); font-weight: 600; }

/* VIPs only: how fast they are paid, as three cards side by side (stacked on
   phones). The radio itself is hidden; the chosen card gets a white border. */
/* The options share the row equally: three for a VIP, two for everyone else. */
.payout-speed { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0 0 1.25rem; padding: 0; border: 0; min-width: 0; }
.payout-speed > .speed-option { flex: 1 1 0; min-width: 8.5rem; }
.payout-speed > .speed-option[hidden] { display: none; }
.payout-speed[hidden] { display: none; }
.payout-speed legend { display: flex; grid-column: 1 / -1; align-items: center; gap: .5rem; margin-bottom: .5rem; padding: 0; color: var(--gray); font: 500 .875rem/1.5 var(--ff-mono); text-transform: uppercase; }
.vip-tag { padding: 0 .375rem; border-radius: .125rem; background: #2a2510; color: #e6c84a; font: 500 .75rem/1.6 var(--ff-mono); }
.speed-option { position: relative; display: flex; flex-direction: column; gap: .5rem; padding: .75rem .875rem; border: 1px solid var(--dark-hover); border-radius: var(--radius); background: var(--black); cursor: pointer; transition: border-color .2s, background-color .2s; }
.speed-option:hover { background: var(--dark); }
.speed-option input { position: absolute; opacity: 0; pointer-events: none; }
.speed-option span { display: flex; flex-direction: column; gap: .25rem; min-width: 0; }
.speed-option b { font-weight: 600; }
.speed-option small { color: var(--gray); font-size: .8125rem; line-height: 1.4; }
/* The VIP-only choice stands out with a faint gold edge until it is picked. */
.speed-option-vip { border-color: #4a3f17; }
/* A tag at the top of every option (VIP, Standard, Kommer snart), titles below. */
.speed-tag { align-self: flex-start; padding: 0 .375rem; border-radius: .125rem; background: var(--dark); color: var(--gray); font: 500 .6875rem/1.6 var(--ff-mono); text-transform: uppercase; }
.speed-tag.vip-tag { background: #2a2510; color: #e6c84a; }
.speed-tag-soon { color: #e6c84a; }
.speed-option.is-soon { cursor: default; opacity: .6; }
/* While Swish has a problem: the fast option greyed out, and a notice above. */
.speed-option.is-off { cursor: not-allowed; opacity: .45; }
.swish-notice { flex-basis: 100%; margin: 0 0 .25rem; padding: .625rem .75rem; border-left: 2px solid #e6c84a; border-radius: var(--radius); background: var(--dark); font-size: .875rem; }
.swish-notice.is-blocking { border-left-color: var(--danger); }
.speed-option.is-soon:hover { background: var(--black); }
.speed-option:has(input:checked) { border-color: var(--white); background: var(--dark); }
.speed-option:has(input:focus-visible) { outline: 2px solid var(--white); outline-offset: 2px; }
@media (max-width: 40rem) {
  .payout-speed { grid-template-columns: minmax(0, 1fr); }
}
.confirm-items li { display: flex; align-items: center; gap: .625rem; padding: .5rem 0; border-bottom: 1px solid var(--line); font-size: .875rem; }

.payout-notice {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: .375rem;
  margin-bottom: 1.25rem;
  padding: 1rem;
  border-radius: var(--radius);
  background: var(--dark);
  font-size: .875rem;
}
.transaction[open] .payout-notice { background: var(--dark-hover); }
.payout-notice p { margin: 0; color: var(--gray); }
.payout-notice b { color: var(--white); }
.payout-notice .btn { margin-top: .5rem; }
.payout-line { margin-bottom: 1rem; font-size: .875rem; }
.time-left { font-family: var(--ff-mono); font-weight: 500; }

.confirm-accept { align-items: flex-start; margin-bottom: 1rem; color: var(--white); font-size: .875rem; }
.confirm-accept input { flex: none; margin-top: .1875rem; }

.balance { margin-bottom: 2.5rem; }
.balance-figures { display: flex; flex-wrap: wrap; gap: 1.5rem 5rem; }
.balance-figures > div { display: flex; flex-direction: column; gap: .5rem; }
.balance-figures span { color: var(--gray); font-size: 1rem; }
.balance-figures span:first-child { font: 500 .9375rem/1.5 var(--ff-mono); text-transform: uppercase; }
.balance-figures strong { font-size: 2rem; font-weight: 600; line-height: 1.1; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }

/* --------------------------------------------------------------- Responsive */

@media (max-width: 64rem) {
  .feature-grid, .feature-grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hero-inner { grid-template-columns: minmax(0, 1fr); }
  .hero-tools select { min-width: 0; }
  .hero-copy { order: -1; padding-top: 0; }
  .split { grid-template-columns: minmax(0, 1fr); align-content: start; }
  .split-side { position: static; }
  .row { grid-template-columns: 1fr; gap: .5rem; padding: 1.75rem 0; }
  .sell-layout { grid-template-columns: minmax(0, 1fr); }

  /* The sale box sits under the inventory. Once something is picked it turns
     into a slim bar along the bottom of the screen with the count, the total
     and the sell button; the picked items themselves are ticked in the
     inventory and listed again before the sale is confirmed. */
  .tray { position: static; max-height: none; }
  .tray:has(.tray-list li) {
    position: sticky;
    bottom: 0;
    z-index: 20;
    margin: 0 calc(-1 * var(--gutter));
    padding: .75rem var(--gutter) calc(.75rem + env(safe-area-inset-bottom));
    border: 0;
    border-top: 1px solid var(--dark-hover);
    border-radius: 0;
  }
  .tray:has(.tray-list li) > :is(h2, .tray-list, .trade-link-box),
  .tray:has(.tray-list li) .fine { display: none; }
  .tray:has(.tray-list li) .tray-foot {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: .375rem 1rem;
    margin-top: 0;
  }
  .tray:has(.tray-list li) .tray-count { gap: .5rem; justify-content: flex-start; }
  .tray:has(.tray-list li) .tray-total { justify-content: flex-end; padding-top: 0; border-top: 0; }
  .tray:has(.tray-list li) .tray-total span { display: none; }
  .tray:has(.tray-list li) :is(.tray-bonus, .tray-limit) { grid-column: 1 / -1; margin: 0; }
  .tray:has(.tray-list li) :is(#tray-continue, #tray-clear) { grid-column: 1 / -1; }
  .tray:has(.tray-list li) #tray-clear { padding: 0; font-size: .8125rem; }
}

@media (max-width: 40rem) {
  .feature-grid, .feature-grid-3 { grid-template-columns: 1fr; }

  /* Header: the logo on the left and the login (or the seller) on the right,
     with the upcoming payouts on a row of their own underneath. */
  .site-header { flex-wrap: wrap; align-items: center; gap: .75rem; }
  .clock, .user-name, .nav-login-more { display: none; }
  .nav-actions { display: contents; }
  .auth-slot { margin-left: auto; }
  .user { padding-right: .25rem; }
  .balance-chip { order: 1; flex-basis: 100%; }
  .balance-chip-total { justify-content: space-between; }

  /* Long button texts break onto a second line instead of running off the
     screen. */
  .btn { white-space: normal; text-align: center; }
  .btn-lg { font-size: 1rem; }
  .eyebrow { font-size: .875rem; }
  .button-row .btn, .receipt-actions .btn, .payout-notice .btn { flex: 1 1 100%; }
  .payout-notice .btn { align-self: stretch; }
  .hero-cta .btn, .cta-banner .btn { width: 100%; }
  .receipt-actions .btn-danger { margin-left: 0; }

  /* Search and sorting take a full row each. */
  .hero-tools { flex: 1 1 100%; flex-wrap: wrap; }
  .hero-tools input[type="search"], .hero-tools .dropdown,
  .toolbar .dropdown, .toolbar-refresh { flex: 1 1 100%; }
  .hero-tools .dropdown-button, .toolbar .dropdown-button { width: 100%; }

  .grid { grid-template-columns: repeat(auto-fill, minmax(8.25rem, 1fr)); }
  .grid.hero-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .faq p { padding-left: 0; }

  /* Windows on top of the page use nearly the whole screen. */
  .modal { padding: .75rem; }
  .modal-card { padding: 1.5rem 1.25rem; }
  .modal-card:not(.modal-wide, .modal-admin) h2 { padding: 0 2rem; }
  .form-row { grid-template-columns: 1fr; gap: 0; }
  .sale-summary .status { margin-left: 0; }

  /* Profile. */
  .profile-head > div { min-width: 0; overflow-wrap: anywhere; }
  .tabs { flex-wrap: wrap; }
  .tab { flex: 1 1 auto; }
  /* A transaction: its number and the amount, with the status underneath. */
  .transaction summary { grid-template-columns: minmax(0, 1fr) auto; gap: .5rem 1rem; padding: 1.25rem .75rem; }
  .transaction summary .muted { display: none; }
  .transaction summary .status { grid-row: 2; grid-column: 1 / -1; max-width: 100%; white-space: normal; }
  .receipt-head { flex-direction: column; gap: .75rem; }
  .receipt-head div:last-child { text-align: left; }
  .receipt-table .float { padding: .625rem .75rem; white-space: nowrap; overflow-wrap: normal; }
  .receipt-table .num { white-space: nowrap; }
  .affiliate-withdrawals li { grid-template-columns: 1fr auto; }
}

/* The narrowest phones (360px and below, down to 320px). */
@media (max-width: 22.5rem) {
  :root { --gutter: 1rem; }
  .eyebrow { font-size: .8125rem; }
  .logo-chip { padding-right: .625rem; padding-left: .625rem; }
  .logo-chip img { height: 1rem; }
  .step-art { padding: 1rem; }
  .art-payment { gap: .5rem; padding: .75rem; }
  .card-body { padding-right: .625rem; padding-left: .625rem; }
  .affiliate-stats { grid-template-columns: 1fr; }
  .tab { padding-right: .5rem; padding-left: .5rem; font-size: .875rem; }
}

/* ---------------------------------------------------------------- Affiliates */

#affiliate h2 { font-size: 1.5rem; }
/* Buttons with an icon to the left of the text: copy to clipboard, and
   download receipt. */
.btn-copy, .btn-download { gap: .5rem; }
.btn-download::before { content: ""; flex: none; width: 1.125rem; height: 1.125rem; background: url("data:image/svg+xml,%3Csvg width='22' height='22' viewBox='0 0 22 22' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2.75 15.582C2.75 16.4345 2.75 16.8608 2.84371 17.2105C3.09799 18.1594 3.83925 18.9007 4.78825 19.155C5.13796 19.2487 5.56419 19.2487 6.41667 19.2487H15.5833C16.4358 19.2487 16.8621 19.2487 17.2118 19.155C18.1607 18.9007 18.902 18.1594 19.1563 17.2105C19.25 16.8608 19.25 16.4345 19.25 15.582' stroke='%238B8B8B' stroke-width='1.375' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M15.125 10.5417C15.125 10.5417 12.087 14.6667 10.9999 14.6667C9.91296 14.6667 6.875 10.5417 6.875 10.5417M10.9999 13.75V2.75' stroke='%238B8B8B' stroke-width='1.375' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; }
.btn-copy::before { content: ""; flex: none; width: 1.125rem; height: 1.125rem; background: url("data:image/svg+xml,%3Csvg width='22' height='22' viewBox='0 0 22 22' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6.875 13.2917C6.875 10.2668 6.875 8.7544 7.8147 7.8147C8.7544 6.875 10.2668 6.875 13.2917 6.875C16.3165 6.875 17.8289 6.875 18.7687 7.8147C19.7083 8.7544 19.7083 10.2668 19.7083 13.2917C19.7083 16.3165 19.7083 17.8289 18.7687 18.7687C17.8289 19.7083 16.3165 19.7083 13.2917 19.7083C10.2668 19.7083 8.7544 19.7083 7.8147 18.7687C6.875 17.8289 6.875 16.3165 6.875 13.2917Z' stroke='%238B8B8B' stroke-width='1.375' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M6.87533 15.1263C5.59525 15.1263 4.95521 15.1263 4.44068 14.9463C3.5191 14.6238 2.79451 13.8992 2.47203 12.9776C2.29199 12.4631 2.29199 11.823 2.29199 10.543V8.70964C2.29199 5.68479 2.29199 4.17236 3.23169 3.23267C4.17139 2.29297 5.68381 2.29297 8.70866 2.29297H10.542C11.822 2.29297 12.4621 2.29297 12.9767 2.47301C13.8982 2.79549 14.6228 3.52007 14.9453 4.44165C15.1253 4.95619 15.1253 5.59622 15.1253 6.8763' stroke='%238B8B8B' stroke-width='1.375' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; }
.affiliate-intro { max-width: 36rem; margin: .5rem 0 1.5rem; }
.affiliate-share { display: flex; flex-direction: column; gap: .5rem; margin-bottom: 1.5rem; }
.affiliate-row {
  display: grid;
  grid-template-columns: 6rem minmax(0, 1fr) auto;
  align-items: center;
  gap: 1rem;
  padding: .75rem 1rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.affiliate-label { color: var(--gray); font: 500 .875rem/1.5 var(--ff-mono); text-transform: uppercase; }
.affiliate-code { font: 600 1.375rem/1.2 var(--ff-mono); letter-spacing: .08em; }
.affiliate-link { overflow-wrap: anywhere; font: 500 .875rem/1.4 var(--ff-mono); }
.affiliate-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .5rem; margin-bottom: 1rem; }
.affiliate-stat { display: flex; flex-direction: column; gap: .25rem; padding: 1rem; border-radius: var(--radius); background: var(--dark); }
.affiliate-stat span { color: var(--gray); font: 500 .75rem/1.4 var(--ff-mono); text-transform: uppercase; }
.affiliate-stat strong { font-size: 1.25rem; font-weight: 600; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.tray-bonus { color: var(--ok); font-size: .875rem; }

@media (max-width: 40rem) {
  .affiliate-row { grid-template-columns: 1fr auto; }
  .affiliate-label { grid-column: 1 / -1; }
  .affiliate-stats { grid-template-columns: 1fr 1fr; }
}
.affiliate-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .5rem; }
.affiliate-withdraw { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1rem; margin: 1.5rem 0 2rem; }
.affiliate-withdraw .muted { font-size: .875rem; }
.affiliate-withdrawals h3 { margin-bottom: .5rem; font-size: 1.125rem; }
.affiliate-withdrawals ul { margin: 0; padding: 0; list-style: none; }
.affiliate-withdrawals li { display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 1rem; padding: .75rem 0; border-bottom: 1px solid var(--line); font-size: .875rem; font-variant-numeric: tabular-nums; }

/* Short pages (profile, sell) keep the footer below the first screen. */
main.profile, main.sell { min-height: 100vh; }

/* ------------------------------------------------- Terms and privacy policy */

/* Profile: the affiliate code being changed, in place of the code itself. */
.affiliate-code-input { width: 100%; min-width: 0; margin: -.375rem 0; padding: .375rem .5rem; border: 1px solid var(--gray); border-radius: var(--radius); background: var(--dark); color: var(--white); }
.affiliate-code-input:focus { border-color: var(--white); }
.affiliate-code-error:empty { display: none; }
/* Profile: "Dölj"/"Visa" in the top right of the Swish box, and the fields
   shown as dots while hidden. */
.form-group { position: relative; }
.hide-toggle { position: absolute; top: .75rem; right: 1rem; gap: .375rem; padding: .25rem .5rem; font-size: .75rem; }
.hide-toggle svg { width: 1rem; height: 1rem; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.hide-toggle .eye-slash { display: none; }
.hide-toggle[aria-pressed="true"] .eye-slash { display: inline; }
.form-field input.is-masked { color: var(--gray); font-size: 1.25rem; letter-spacing: .12em; cursor: default; }

.legal { padding-top: clamp(3rem, 7vw, 6rem); padding-bottom: 4rem; }
.legal-text { max-width: 46rem; }
.legal-text h1 { margin-top: .75rem; }
.legal-updated { margin: .75rem 0 2rem; color: var(--gray); font: 500 .8125rem/1.5 var(--ff-mono); text-transform: uppercase; }
.legal-text h2 { margin: 2.5rem 0 .75rem; font-size: 1.375rem; }
.legal-text p, .legal-text li { color: var(--gray); line-height: 1.65; }
.legal-text ul, .legal-text ol { padding-left: 1.25rem; }
.legal-text li + li { margin-top: .5rem; }
.legal-text strong { color: var(--white); font-weight: 500; }

/* The instant pay page: the seller's own limit and the table of examples. */
.instant-pay .lead { margin-bottom: 2rem; }
.instant-pay .legal-text p + p { margin-top: .75rem; }
.instant-mine { margin: 0 0 1rem; padding: 1.25rem; border: 1px solid var(--line); border-left: 2px solid #e6c84a; border-radius: var(--radius); background: var(--dark); }
.instant-mine .txt-mono { margin: 0; color: var(--gray); font-size: .8125rem; text-transform: uppercase; }
.instant-mine .instant-mine-amount { margin: .375rem 0 .25rem; color: var(--white); font-size: 1.75rem; font-weight: 600; line-height: 1.2; }
.instant-mine p:last-child { margin: 0; }
.instant-table-wrap { margin: 1.5rem 0; overflow-x: auto; }
.instant-table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.instant-table th, .instant-table td { padding: .625rem .75rem; border-bottom: 1px solid var(--line); text-align: left; }
.instant-table th { color: var(--gray); font: 500 .8125rem/1.5 var(--ff-mono); text-transform: uppercase; }
.instant-table td { color: var(--white); }
.instant-table td + td, .instant-table th + th { text-align: right; }
.confirm-terms { margin: -.25rem 0 1rem; }

/* Under the personal number and Swish fields: they must match, or no payout. */
.form-warning { margin: 0 0 1rem; padding: .625rem .75rem; border-left: 0.125rem solid #e6c84a; border-radius: var(--radius); background: var(--dark); color: #e9dca0; font-size: .8125rem; border-top-left-radius: 0; border-bottom-left-radius: 0;}
small.form-warning { display: block; margin: .5rem 0 0; }

/* ---------------------------------------------------------------------- VIP */

/* The VIP button, in the middle of the header (VIP sellers only). */
.vip-nav {
  position: absolute;
  top: var(--gutter);
  left: 50%;
  transform: translateX(-50%);
  color: #e6c84a;
}
.vip-nav[aria-current="page"] { background: var(--dark-hover); }

.vip, .vip-invite { padding-top: clamp(2.5rem, 5vw, 4rem); padding-bottom: 4rem; }
main.vip, main.vip-invite { min-height: 100vh; }
.vip .lead, .vip-invite .lead { color: var(--gray); }
/* The cards as a dashboard, so nothing is far down: three columns on wide
   screens with the details and the requests under them on the right
   (.vip-side), two on tablets, one on phones. */
.vip-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-areas:
    "rate     contacts side"
    "request  request  side";
  align-items: start;
  gap: 1rem;
}
.vip-area-rate { grid-area: rate; align-self: stretch; }
.vip-area-contacts { grid-area: contacts; align-self: stretch; }
.vip-area-request { grid-area: request; }
.vip-side { grid-area: side; display: flex; flex-direction: column; gap: 1rem; min-width: 0; }
@media (max-width: 75rem) {
  .vip-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-areas:
      "rate    contacts"
      "side    side"
      "request request";
  }
  .vip-side { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
}
@media (max-width: 48rem) {
  .vip-grid { grid-template-columns: minmax(0, 1fr); grid-template-areas: "rate" "contacts" "details" "request" "requests"; }
  /* One column: the details before the request form, the requests after it. */
  .vip-side { display: contents; }
  .vip-area-details { grid-area: details; }
  .vip-area-requests { grid-area: requests; }
}
.vip-card { padding: 1.5rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--black); }
.vip-card h2 { margin-bottom: .75rem; font-size: 1.25rem; }
.vip-card > p { margin: 0 0 1rem; }
.vip-card > p:last-child { margin-bottom: 0; }
.vip-rate { font-size: 1.125rem; }
.vip-rate strong { margin-right: .375rem; font-size: 2.5rem; font-weight: 600; letter-spacing: -.03em; color: #e6c84a; }
/* The perks under the percentage: a short list with thin dividers. */
.vip-perks { margin: 1rem 0 0; padding: 0; list-style: none; }
.vip-perks li { display: flex; flex-direction: column; gap: .125rem; padding: .625rem 0; border-top: 1px solid var(--line); }
.vip-perks li > span { color: var(--gray); font-size: .875rem; line-height: 1.45; }
.vip-perks strong { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; font-weight: 600; }
.vip-perks .is-soon strong { color: var(--gray); }
.vip-soon { padding: 0 .375rem; border-radius: .125rem; background: var(--dark); color: #e6c84a; font: 500 .6875rem/1.6 var(--ff-mono); text-transform: uppercase; }
.vip-form { display: flex; flex-direction: column; gap: .25rem; }
.vip-form textarea {
  min-height: 5rem;
  padding: .75rem .875rem;
  border: 0;
  border-radius: var(--radius);
  background: var(--dark);
  color: var(--white);
  font: inherit;
  resize: vertical;
}
.vip-form textarea::placeholder { color: #5f5f5f; }
.vip-form .btn { align-self: flex-start; }
.vip-requests { margin: 0; padding: 0; list-style: none; }
.vip-requests li { padding: .875rem 0; border-top: 1px solid var(--line); }
.vip-requests li:first-child { border-top: 0; padding-top: 0; }
.vip-requests p { margin: .375rem 0 0; overflow-wrap: anywhere; }
.vip-request-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.vip-invite { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; }
.vip-invite h1 { margin-top: .75rem; }
.vip-invite .lead { margin-bottom: 2rem; }

/* The item picker in the Revolut request: search, 4 results per row and one
   row in view at a time (scroll for more), click to pick. */
.vip-picker { display: flex; flex-direction: column; gap: .5rem; margin-bottom: .75rem; }
.vip-search {
  height: 2.75rem;
  padding: 0 .875rem;
  border: 0;
  border-radius: var(--radius);
  background: var(--dark);
  color: var(--white);
  font: inherit;
}
.vip-search::placeholder { color: #5f5f5f; }
.vip-results-hint { margin: 0; font-size: .8125rem; }
.vip-results {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-auto-rows: 13.5rem;
  gap: .5rem;
  max-height: 13.5rem;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: var(--dark-hover) transparent;
}
.vip-results[hidden] { display: none; }
.vip-result { min-width: 0; }
.vip-result .card-img { height: 6rem; }
.vip-result.is-picked { border-color: var(--white); }
.vip-picked-title { margin: .5rem 0 0; color: var(--gray); font: 500 .8125rem/1.5 var(--ff-mono); text-transform: uppercase; }
.vip-picked { display: flex; flex-wrap: wrap; gap: .375rem; margin: 0; padding: 0; list-style: none; }
.vip-picked[hidden] { display: none; }
.vip-picked li { display: inline-flex; align-items: center; gap: .375rem; padding: .25rem .25rem .25rem .625rem; border-radius: var(--radius); background: var(--dark); font-size: .875rem; }
.vip-picked button { border: 0; background: none; color: var(--gray); font: 500 1rem/1 var(--ff-mono); cursor: pointer; }
.vip-picked button:hover { color: var(--white); }
.vip-picker:has(.vip-picked[hidden]) .vip-picked-title::after { content: ': inga än'; text-transform: none; }
.vip-contacts { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; }
/* Each detail is as wide as it needs and they share the row; one that no
   longer fits moves to a new line. */
.vip-contacts li { display: flex; flex-wrap: wrap; gap: .75rem 1.5rem; padding: 1rem 0; border-top: 1px solid var(--line); }
.vip-contacts li:first-child { padding-top: 0; border-top: 0; }
.vip-contact-pair { display: flex; flex: 1 1 auto; flex-direction: column; gap: .125rem; min-width: 0; white-space: nowrap; }
.vip-contact-pair > :last-child { overflow: hidden; text-overflow: ellipsis; }
.vip-contact-label { color: var(--gray); font: 500 .75rem/1.5 var(--ff-mono); text-transform: uppercase; }
.vip-request-items { margin: .375rem 0 0; padding-left: 1.125rem; }
.vip-request-remove { margin-top: .375rem; padding: 0; }

/* Selects in the VIP forms look like the text fields. */
.vip-form select {
  height: 2.75rem;
  padding: 0 2.25rem 0 .875rem;
  border: 0;
  border-radius: var(--radius);
  background: var(--dark) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none' stroke='%23f1f1f1' stroke-width='1.5'%3E%3Cpath d='M1 1.5l5 5 5-5'/%3E%3C/svg%3E") no-repeat right .875rem center / .75rem;
  color: var(--white);
  font: inherit;
  appearance: none;
  cursor: pointer;
}
/* Never wider than the form, however long the address in the chosen option. */
.vip-form select { width: 100%; min-width: 0; text-overflow: ellipsis; }
.vip-form .form-row > * { min-width: 0; }
.vip-form select:disabled { opacity: .45; cursor: not-allowed; }
/* "När vill du sälja?": our own day and time picker under the choice: a
   button like the selects, opening a calendar card below it. */
.vip-datetime { position: relative; }
.vip-datetime[hidden], .vip-cal[hidden] { display: none; }
.vip-picker-button {
  width: 100%;
  height: 2.75rem;
  padding: 0 .875rem;
  border: 0;
  border-radius: var(--radius);
  background: var(--dark);
  color: var(--white);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.vip-picker-button:hover, .vip-picker-button[aria-expanded="true"] { background: var(--dark-hover); }
.vip-cal {
  position: absolute;
  z-index: 20;
  top: calc(100% + .375rem);
  left: 0;
  width: min(20rem, 100%);
  min-width: min(18rem, calc(100vw - 2rem));
  padding: 1rem;
  border: 1px solid var(--dark-hover);
  border-radius: var(--radius);
  background: var(--black);
  box-shadow: 0 1rem 2.5rem rgba(0, 0, 0, .6);
}
.vip-cal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: .75rem; }
.vip-cal-title { font-weight: 600; text-transform: capitalize; }
.vip-cal-nav { width: 2rem; height: 2rem; border: 0; border-radius: var(--radius); background: var(--dark); color: var(--white); font-size: 1.125rem; cursor: pointer; }
.vip-cal-nav:hover:not(:disabled) { background: var(--dark-hover); }
.vip-cal-nav:disabled { opacity: .3; cursor: default; }
.vip-cal-weekdays, .vip-cal-days { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: .25rem; }
.vip-cal-weekdays { margin-bottom: .25rem; color: var(--gray); font: 500 .6875rem/1.5 var(--ff-mono); text-align: center; text-transform: uppercase; }
.vip-cal-day { aspect-ratio: 1; max-width: 100%; border: 0; border-radius: var(--radius); background: none; color: var(--white); font: 500 .875rem/1 var(--ff-main); cursor: pointer; }
.vip-cal-day:hover:not(:disabled, .is-picked) { background: var(--dark); }
.vip-cal-day.is-today { box-shadow: inset 0 0 0 1px var(--dark-hover); }
.vip-cal-day.is-picked { background: var(--white); color: var(--black); }
.vip-cal-day:disabled { color: #4a4a4a; cursor: default; }
.vip-cal-time { display: flex; align-items: center; gap: .5rem; margin-top: .875rem; padding-top: .875rem; border-top: 1px solid var(--line); }
.vip-cal-time > span:first-child { margin-right: auto; color: var(--gray); font: 500 .8125rem/1.5 var(--ff-mono); text-transform: uppercase; }
.vip-form .vip-cal-time select { width: auto; flex: 0 0 4.5rem; }
.vip-cal-time .btn { margin-left: .25rem; }
.vip-form .form-field { margin-bottom: 1rem; }
/* Who contacts whom, in the request form. */
.vip-contact-choice { display: flex; flex-direction: column; gap: .625rem; margin: 0 0 1.25rem; padding: 0; border: 0; }
.vip-contact-choice legend { margin-bottom: .625rem; padding: 0; color: var(--gray); font: 500 .875rem/1.5 var(--ff-mono); text-transform: uppercase; }
.vip-contact-choice .check { color: var(--white); }
.vip-contact-choice select { margin-left: 1.5rem; }
.vip-channel-hint { margin-left: 1.5rem; color: var(--gray); }
.vip-channel-hint:empty { display: none; }
/* "Dina uppgifter": saved payout methods, one per line, and the row that adds
   one (method, network for USDT/USDC, address, save), wrapping in the card. */
.vip-subtitle { margin: 1.25rem 0 .5rem; color: var(--gray); font: 500 .8125rem/1.5 var(--ff-mono); text-transform: uppercase; }
.vip-details > .vip-subtitle:first-child { margin-top: 0; }
.vip-saved { margin: 0 0 .75rem; padding: 0; list-style: none; }
.vip-saved li { display: grid; grid-template-columns: 6.5rem minmax(0, 1fr) auto; align-items: center; gap: .75rem; padding: .5rem 0; border-top: 1px solid var(--line); font-size: .9375rem; }
.vip-saved li:first-child { border-top: 0; padding-top: 0; }
.vip-saved-label { color: var(--gray); font-size: .875rem; }
.vip-saved-value { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vip-saved-actions { display: flex; gap: .75rem; }
.vip-saved-actions .btn { padding: 0; }
.vip-add { flex-direction: row; flex-wrap: wrap; gap: .5rem; }
.vip-add select { flex: 1 1 9rem; }
.vip-add input {
  flex: 1 1 100%;
  min-width: 0;
  height: 2.75rem;
  padding: 0 .875rem;
  border: 0;
  border-radius: var(--radius);
  background: var(--dark);
  color: var(--white);
  font: inherit;
}
.vip-add input::placeholder { color: #5f5f5f; }
.vip-add [hidden] { display: none; }
@media (max-width: 40rem) {
  .vip-contact-choice select, .vip-channel-hint { margin-left: 0; }
}

@media (max-width: 40rem) {
  /* On phones the VIP button goes on the second row, next to the upcoming
     payouts, so the logo and the account still fit on the first. */
  .vip-nav { position: static; order: 1; transform: none; }
  .site-header:has(.vip-nav) .balance-chip { flex: 1 1 0; min-width: 0; }
  .vip-results { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* VIP on the profile: a tag next to the name and a tab to the VIP page. */
.profile-vip-tag { margin-left: .625rem; font-size: .875rem; vertical-align: .35em; }
.tab-vip { color: #e6c84a; text-decoration: none; }