/* ==========================================================================
   Regulu Always
   White and gold marketplace. Light theme is locked on purpose: the brand is
   defined as white and gold, so a dark mode would break brand identity rather
   than serve it.

   Radius system (one rule, applied everywhere):
     interactive (buttons, pills, chips) .. 999px
     surfaces    (cards, panels, media)  .. 16px
     inputs                               .. 10px

   The six borrowed patterns below are hand-ported to vanilla CSS from the
   21st.dev React/Motion originals. They are recreations of the behaviour, not
   the upstream packages.
   ========================================================================== */

/* Outfit ships as a variable font, so one file covers the whole weight range.
   Self-hosted rather than linked from Google, so there is no third-party
   request on the critical path. */
@font-face {
  font-family: "Outfit";
  src: url("/static/fonts/outfit.woff2") format("woff2-variations");
  font-weight: 100 900;
  font-display: swap;
}

:root {
  --ink: #14110b;
  --ink-soft: #5b5445;
  --ink-faint: #8b8471;

  --paper: #fdfcfa;
  --paper-raised: #ffffff;
  --paper-sunk: #f7f4ec;

  --gold-deep: #8a6d1f;
  --gold: #c9a227;
  --gold-lite: #e8ce7a;
  --gold-wash: #faf3dc;

  --hairline: #ebe5d6;
  --hairline-strong: #ddd3ba;

  --ok-solid: #2f7d44;
  --warn: #9a6b12;
  --bad: #a33124;

  --radius-surface: 16px;
  --radius-input: 10px;

  --shadow-sm: 0 1px 2px rgba(38, 32, 16, 0.05);
  --shadow-md: 0 10px 30px -12px rgba(48, 40, 18, 0.18);
  --shadow-lg: 0 30px 70px -30px rgba(48, 40, 18, 0.32);

  --font-display: "Outfit", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-body: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, monospace;

  --shell: 1320px;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
}

*,
*::before,
*::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 15.5px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: -0.025em;
  line-height: 1.08;
  margin: 0;
}

a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
button, input, select, textarea { font: inherit; color: inherit; }

.shell {
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: 22px;
}

/* ==========================================================================
   1. Animated gradient background
   Port of @componentry/animated-gradient. Layered radial gradients drifting on
   independent timings, so the field never visibly loops.
   ========================================================================== */

.aurora {
  position: fixed;
  inset: 0;
  z-index: -2;
  overflow: hidden;
  background: var(--paper);
}

.aurora span {
  position: absolute;
  border-radius: 50%;
  filter: blur(70px);
  opacity: 0.55;
  will-change: transform;
}

.aurora .b1 {
  width: 46vw; height: 46vw; left: -8vw; top: -12vw;
  background: radial-gradient(circle at 30% 30%, #f4dd9b, transparent 68%);
  animation: drift-a 26s var(--ease) infinite alternate;
}
.aurora .b2 {
  width: 38vw; height: 38vw; right: -6vw; top: 6vh;
  background: radial-gradient(circle at 60% 40%, #ffeec2, transparent 66%);
  animation: drift-b 32s var(--ease) infinite alternate;
}
.aurora .b3 {
  width: 52vw; height: 52vw; left: 22vw; bottom: -24vw;
  background: radial-gradient(circle at 50% 50%, #f8e8bb, transparent 70%);
  animation: drift-c 38s var(--ease) infinite alternate;
}

@keyframes drift-a { to { transform: translate3d(8vw, 6vh, 0) scale(1.15); } }
@keyframes drift-b { to { transform: translate3d(-7vw, 10vh, 0) scale(1.1); } }
@keyframes drift-c { to { transform: translate3d(5vw, -8vh, 0) scale(1.2); } }

/* Regulus stars scattered behind the hero.
   Port of @kokonutd/shape-landing-hero: floating shapes, but the shape here is
   the Regulus eight point star rather than the upstream rounded bars. */
.starfield { position: absolute; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
.starfield i {
  position: absolute;
  display: block;
  background: currentColor;
  color: var(--gold-lite);
  opacity: 0.5;
  -webkit-mask: url("/static/img/star.svg") center / contain no-repeat;
  mask: url("/static/img/star.svg") center / contain no-repeat;
  animation: float-star 12s var(--ease) infinite alternate;
  will-change: transform;
}

@keyframes float-star {
  from { transform: translate3d(0, 0, 0) rotate(0deg); }
  to   { transform: translate3d(0, -26px, 0) rotate(22deg); }
}

/* ==========================================================================
   2. Gradient menu
   Port of @minhxthanh/gradient-menu: each item reveals a gold gradient pill and
   lifts on hover.
   ========================================================================== */

.topbar {
  position: sticky;
  top: 0;
  z-index: 40;
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  background: rgba(253, 252, 250, 0.78);
  border-bottom: 1px solid var(--hairline);
}

.topbar .shell {
  height: 68px;
  display: flex;
  align-items: center;
  gap: 20px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 17px;
  letter-spacing: -0.02em;
  white-space: nowrap;
}
.brand svg { width: 22px; height: 22px; color: var(--gold); flex: none; }

.gmenu { display: flex; gap: 4px; margin-left: auto; align-items: center; }

.gmenu a {
  position: relative;
  padding: 9px 15px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 500;
  color: var(--ink-soft);
  transition: color 0.35s var(--ease), transform 0.35s var(--ease);
  isolation: isolate;
  white-space: nowrap;
}
.gmenu a::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: linear-gradient(120deg, var(--gold-lite), var(--gold) 55%, var(--gold-deep));
  opacity: 0;
  transform: scale(0.82);
  transition: opacity 0.35s var(--ease), transform 0.35s var(--ease);
}
.gmenu a:hover,
.gmenu a[aria-current="page"] { color: #fff; transform: translateY(-1px); }
.gmenu a:hover::before,
.gmenu a[aria-current="page"]::before { opacity: 1; transform: scale(1); }

.gmenu a:focus-visible { outline: 2px solid var(--gold-deep); outline-offset: 2px; }

/* ==========================================================================
   3. Buttons
   ========================================================================== */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 22px;
  border-radius: 999px;
  border: 1px solid transparent;
  font-weight: 600;
  font-size: 14.5px;
  cursor: pointer;
  white-space: nowrap;
  transition: transform 0.2s var(--ease), box-shadow 0.25s var(--ease),
              background 0.25s var(--ease);
}
.btn:active { transform: scale(0.98); }

.btn-gold {
  background: linear-gradient(120deg, var(--gold) 0%, var(--gold-deep) 100%);
  color: #fff;
  box-shadow: 0 8px 22px -10px rgba(138, 109, 31, 0.75);
}
.btn-gold:hover { transform: translateY(-1px); box-shadow: 0 14px 30px -12px rgba(138, 109, 31, 0.8); }

.btn-quiet {
  background: var(--paper-raised);
  border-color: var(--hairline-strong);
  color: var(--ink);
}
.btn-quiet:hover { border-color: var(--gold); color: var(--gold-deep); }

.btn-sm { padding: 8px 14px; font-size: 13px; }

/* ==========================================================================
   4. Hero + shimmer text
   Port of @tom_ui/shimmer-text: a highlight sweeps across the headline via a
   moving background clip.
   ========================================================================== */

.hero { position: relative; padding: 78px 0 56px; }

.hero-grid {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 54px;
  align-items: center;
}

.hero h1 {
  font-size: clamp(2.6rem, 5.4vw, 4.15rem);
  max-width: 15ch;
}

.shimmer {
  background: linear-gradient(
    100deg,
    var(--gold-deep) 0%, var(--gold) 28%,
    #fff6d8 46%, var(--gold-lite) 54%,
    var(--gold) 72%, var(--gold-deep) 100%
  );
  background-size: 260% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: shimmer-sweep 5.5s linear infinite;
}
@keyframes shimmer-sweep {
  from { background-position: 180% 0; }
  to   { background-position: -80% 0; }
}

.hero p.lead {
  margin: 20px 0 26px;
  font-size: 17px;
  color: var(--ink-soft);
  max-width: 46ch;
}

.hero-cta { display: flex; gap: 12px; flex-wrap: wrap; }

.hero-figure {
  position: relative;
  border-radius: var(--radius-surface);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  background: var(--paper-sunk);
  border: 1px solid var(--hairline);
}
/* The locker render is wide and short, so the figure follows the image rather
   than cropping it into a fixed ratio. */
.hero-figure img { width: 100%; height: auto; display: block; }

/* Stat strip sits below the hero, never inside it. */
.statstrip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
  background: rgba(255, 255, 255, 0.5);
}
.statstrip div { padding: 20px 22px; }
.statstrip div + div { border-left: 1px solid var(--hairline); }
.statstrip b {
  display: block;
  font-family: var(--font-display);
  font-size: 26px;
  letter-spacing: -0.02em;
}
.statstrip span { font-size: 12.5px; color: var(--ink-faint); }

/* ==========================================================================
   5. Glare cards
   Port of @manuarora700/glare-card: a specular highlight tracks the pointer
   across the card surface. Driven by CSS custom properties updated in JS.
   ========================================================================== */

.market { padding: 62px 0 90px; }

.market-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 26px;
  flex-wrap: wrap;
}
.market-head h2 { font-size: clamp(1.7rem, 3vw, 2.3rem); }

.searchbar {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--paper-raised);
  border: 1px solid var(--hairline-strong);
  border-radius: 999px;
  padding: 6px 6px 6px 16px;
}
.searchbar input {
  border: 0;
  outline: 0;
  background: transparent;
  width: 190px;
  font-size: 14px;
}
.searchbar input::placeholder { color: var(--ink-faint); }

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(285px, 1fr));
  gap: 22px;
}

.glare {
  position: relative;
  border-radius: var(--radius-surface);
  background: var(--paper-raised);
  border: 1px solid var(--hairline);
  overflow: hidden;
  transform-style: preserve-3d;
  transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease),
              border-color 0.4s var(--ease);
  box-shadow: var(--shadow-sm);
}
.glare:hover {
  transform: translateY(-4px);
  border-color: var(--gold-lite);
  box-shadow: var(--shadow-md);
}
.glare::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s var(--ease);
  background: radial-gradient(
    420px circle at var(--mx, 50%) var(--my, 0%),
    rgba(255, 244, 205, 0.75),
    rgba(233, 206, 122, 0.22) 38%,
    transparent 62%
  );
  mix-blend-mode: multiply;
}
.glare:hover::after { opacity: 1; }

.glare-media {
  position: relative;
  aspect-ratio: 16 / 10;
  background: linear-gradient(150deg, var(--paper-sunk), #efe7d4);
  overflow: hidden;
}
/* contain, not cover: these are locker renders, and their aspect ratio varies
   with how many rows of skins the account has. cover cropped tall panels down
   to a meaningless horizontal slice. The fixed ratio stays so cards in a row
   still line up; the gradient behind shows as a mat on the short edges. */
.glare-media img { width: 100%; height: 100%; object-fit: contain; }

.tag {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 2;
  padding: 5px 11px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
  background: rgba(20, 17, 11, 0.82);
  color: #fff;
  backdrop-filter: blur(6px);
}
.tag.sold { background: var(--bad); }
.tag.featured { background: linear-gradient(120deg, var(--gold), var(--gold-deep)); }

/* Cards in a row must line up: the media is fixed-ratio, the body flexes, and
   the price row is pushed to the bottom so every card ends on the same line
   regardless of how many exclusive chips it carries. */
.glare { display: flex; flex-direction: column; }
.glare-media { flex: none; }
.glare-body {
  padding: 16px 17px 18px;
  display: flex;
  flex-direction: column;
  flex: 1;
}
.glare-body .price-row { margin-top: auto; }
.glare-body h3 {
  font-size: 16.5px;
  line-height: 1.25;
  margin-bottom: 10px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.spec { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 14px; }
.spec b {
  font-family: var(--font-display);
  font-size: 15px;
  display: block;
  line-height: 1.1;
}
.spec span { font-size: 11px; color: var(--ink-faint); }

.chips { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 14px; min-height: 24px; }
.chip {
  font-size: 11px;
  padding: 4px 9px;
  border-radius: 999px;
  background: var(--gold-wash);
  color: var(--gold-deep);
  border: 1px solid #f0e3bb;
  font-weight: 600;
}

.price-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-top: 13px;
  border-top: 1px solid var(--hairline);
}
.price { font-family: var(--font-display); font-size: 21px; letter-spacing: -0.02em; }

.is-sold { opacity: 0.62; }
.is-sold .price { text-decoration: line-through; color: var(--ink-faint); }

.empty {
  grid-column: 1 / -1;
  text-align: center;
  padding: 72px 20px;
  border: 1px dashed var(--hairline-strong);
  border-radius: var(--radius-surface);
  background: rgba(255, 255, 255, 0.6);
}
.empty svg { width: 42px; height: 42px; color: var(--gold-lite); margin: 0 auto 14px; }
.empty h3 { font-size: 19px; margin-bottom: 6px; }
.empty p { color: var(--ink-faint); margin: 0; font-size: 14px; }

/* Skeletons match the real card shape rather than a spinner. */
.skeleton { pointer-events: none; }
.skeleton .sk {
  background: linear-gradient(90deg, #f2ede0 25%, #f9f5ea 50%, #f2ede0 75%);
  background-size: 200% 100%;
  animation: sk 1.3s linear infinite;
  border-radius: 6px;
}
@keyframes sk { to { background-position: -200% 0; } }

/* ==========================================================================
   6. Animated dock
   Port of @preetsuthar17/animated-dock: neighbours scale with distance from
   the hovered icon. Distance maths runs in JS, the transform lives here.
   ========================================================================== */

.dock-wrap {
  position: fixed;
  left: 50%;
  bottom: 22px;
  transform: translateX(-50%);
  z-index: 45;
}
.dock {
  display: flex;
  align-items: flex-end;
  gap: 10px;
  padding: 10px 14px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.82);
  backdrop-filter: blur(16px) saturate(180%);
  -webkit-backdrop-filter: blur(16px) saturate(180%);
  border: 1px solid var(--hairline-strong);
  box-shadow: var(--shadow-md);
}
.dock a {
  position: relative;
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--paper-sunk);
  color: var(--ink-soft);
  transform-origin: bottom center;
  transition: background 0.25s var(--ease), color 0.25s var(--ease);
  will-change: transform;
}
.dock a:hover { background: linear-gradient(120deg, var(--gold), var(--gold-deep)); color: #fff; }
.dock a svg { width: 20px; height: 20px; }
.dock a::after {
  content: attr(data-label);
  position: absolute;
  bottom: calc(100% + 10px);
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  padding: 5px 10px;
  border-radius: 999px;
  background: var(--ink);
  color: #fff;
  font-size: 11.5px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s var(--ease), transform 0.2s var(--ease);
}
.dock a:hover::after { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ==========================================================================
   7. Loading overlay (Raider's Revenge swing)
   ========================================================================== */

#loader {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: grid;
  place-items: center;
  background: var(--paper);
  transition: opacity 0.5s var(--ease), visibility 0.5s var(--ease);
}
#loader.done { opacity: 0; visibility: hidden; }

.loader-inner { display: grid; place-items: center; gap: 22px; }

.axe {
  width: 148px;
  height: 148px;
  transform-origin: 62% 78%;
  animation: swing 1.15s var(--ease) infinite;
  filter: drop-shadow(0 12px 22px rgba(90, 72, 24, 0.35));
}
/* The arc mimics a Fortnite pickaxe swing: wind up, fast strike, settle. */
@keyframes swing {
  0%   { transform: rotate(-46deg) scale(0.97); }
  38%  { transform: rotate(-52deg) scale(0.97); }
  62%  { transform: rotate(38deg)  scale(1.04); }
  78%  { transform: rotate(30deg)  scale(1); }
  100% { transform: rotate(-46deg) scale(0.97); }
}

.axe-fallback {
  width: 132px; height: 132px;
  color: var(--gold);
  animation: swing 1.15s var(--ease) infinite;
  transform-origin: 62% 78%;
}

.loader-word {
  font-family: var(--font-display);
  font-size: 13px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.loader-bar {
  width: 172px; height: 3px;
  border-radius: 999px;
  background: var(--hairline);
  overflow: hidden;
}
.loader-bar i {
  display: block; height: 100%; width: 40%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--gold-lite), var(--gold-deep));
  animation: bar 1.15s var(--ease) infinite;
}
@keyframes bar {
  0%   { transform: translateX(-110%); }
  100% { transform: translateX(320%); }
}

/* ==========================================================================
   8. Footer
   ========================================================================== */

.foot {
  border-top: 1px solid var(--hairline);
  background: rgba(255, 255, 255, 0.6);
  padding: 40px 0 110px;
  margin-top: 30px;
}
.foot-grid { display: flex; justify-content: space-between; gap: 26px; flex-wrap: wrap; }
.foot p { color: var(--ink-faint); font-size: 13px; margin: 8px 0 0; max-width: 42ch; }
.foot nav { display: flex; gap: 18px; flex-wrap: wrap; }
.foot nav a { font-size: 13.5px; color: var(--ink-soft); }
.foot nav a:hover { color: var(--gold-deep); }

/* ==========================================================================
   9. Listing detail
   ========================================================================== */

.detail { padding: 40px 0 80px; }
.detail-grid { display: grid; grid-template-columns: 1.25fr 0.75fr; gap: 42px; align-items: start; }
.gallery { display: grid; gap: 12px; }
.gallery img { border-radius: var(--radius-surface); border: 1px solid var(--hairline); width: 100%; }

.buybox {
  position: sticky;
  top: 92px;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-surface);
  background: var(--paper-raised);
  padding: 22px;
  box-shadow: var(--shadow-md);
}
.buybox .price { font-size: 33px; }
.buybox .btn { width: 100%; margin-top: 16px; }

.kv { display: grid; gap: 0; margin: 18px 0 0; }
.kv div { display: flex; justify-content: space-between; gap: 14px; padding: 9px 0; font-size: 14px; }
.kv div + div { border-top: 1px solid var(--hairline); }
.kv span { color: var(--ink-faint); }
.kv b { font-weight: 600; }

.sold-banner {
  border-radius: var(--radius-surface);
  background: #fbeceb;
  border: 1px solid #f0cdc9;
  color: var(--bad);
  padding: 14px 18px;
  font-weight: 600;
  margin-bottom: 20px;
}

/* ==========================================================================
   10. Mobile app shell (/app)
   ========================================================================== */

/* The reserve for the fixed tab bar MUST include the same safe-area inset the
   bar itself adds, or the two disagree. The bar is content-height +
   env(safe-area-inset-bottom); a flat 86px reserve is correct on a phone with
   no home indicator and ~34px short on one that has it, so the bar creeps over
   the last card. calc() keeps the reserve scaling with the bar. */
.appbody {
  padding-bottom: calc(86px + env(safe-area-inset-bottom));
  background: var(--paper);
}

.appbar {
  position: sticky; top: 0; z-index: 30;
  display: flex; align-items: center; gap: 12px;
  padding: 14px 18px calc(14px);
  padding-top: calc(14px + env(safe-area-inset-top));
  background: rgba(253, 252, 250, 0.88);
  backdrop-filter: blur(14px) saturate(180%);
  -webkit-backdrop-filter: blur(14px) saturate(180%);
  border-bottom: 1px solid var(--hairline);
}
.appbar .brand { font-size: 16px; }

.appsearch {
  margin: 16px 18px 6px;
  display: flex; align-items: center; gap: 9px;
  background: var(--paper-raised);
  border: 1px solid var(--hairline-strong);
  border-radius: 999px;
  padding: 11px 16px;
}
.appsearch input { border: 0; outline: 0; background: transparent; flex: 1; font-size: 15px; }

.appfeed { display: grid; gap: 16px; padding: 14px 18px 24px; }

/* The tab bar has to survive a 280px-wide phone and a 1200px tablet without
   labels wrapping to two lines or colliding. minmax(0,1fr) lets the columns
   actually shrink (1fr alone floors at content width), the label clamps with an
   ellipsis instead of wrapping, and the icon never scales below tap size. */
.tabbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(18px) saturate(180%);
  -webkit-backdrop-filter: blur(18px) saturate(180%);
  border-top: 1px solid var(--hairline);
  padding-bottom: env(safe-area-inset-bottom);
}
.tabbar a {
  display: grid; place-items: center; gap: 3px;
  min-width: 0;
  padding: 10px 4px 9px;
  font-size: clamp(9px, 2.7vw, 10.5px); font-weight: 600;
  color: var(--ink-faint);
  transition: color 0.2s var(--ease);
}
.tabbar a span {
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tabbar a svg { width: 21px; height: 21px; }
.tabbar a[aria-current="page"] { color: var(--gold-deep); }
.tabbar a:active { transform: scale(0.96); }

/* ==========================================================================
   11. Admin
   Plain functional UI on purpose. Marketing polish would hurt scanability for
   a table of listings that staff work through quickly.
   ========================================================================== */

.admin-wrap { max-width: 1220px; margin-inline: auto; padding: 26px 22px 80px; }

.admin-top {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; flex-wrap: wrap; margin-bottom: 22px;
}

.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(146px, 1fr)); gap: 12px; margin-bottom: 24px; }
.stat {
  border: 1px solid var(--hairline);
  border-radius: var(--radius-surface);
  background: var(--paper-raised);
  padding: 15px 17px;
}
.stat b { display: block; font-family: var(--font-display); font-size: 27px; letter-spacing: -0.02em; }
.stat span { font-size: 12px; color: var(--ink-faint); }

.panel {
  border: 1px solid var(--hairline);
  border-radius: var(--radius-surface);
  background: var(--paper-raised);
  overflow: hidden;
  margin-bottom: 24px;
}
.panel > h3 {
  font-size: 15px; padding: 14px 18px;
  border-bottom: 1px solid var(--hairline);
  background: var(--paper-sunk);
}
.panel-pad { padding: 18px; }

table { width: 100%; border-collapse: collapse; font-size: 14px; }
th {
  text-align: left; font-size: 11.5px; text-transform: uppercase;
  letter-spacing: 0.06em; color: var(--ink-faint);
  padding: 11px 14px; background: var(--paper-sunk);
  border-bottom: 1px solid var(--hairline);
  white-space: nowrap;
}
td { padding: 12px 14px; border-bottom: 1px solid var(--hairline); vertical-align: middle; }
tr:last-child td { border-bottom: 0; }
tbody tr:hover { background: #fdfbf4; }

.pill {
  display: inline-block; padding: 3px 10px; border-radius: 999px;
  font-size: 11.5px; font-weight: 700; letter-spacing: 0.02em;
}
.p-active { background: #e8f6ec; color: var(--ok-solid); }
.p-sold   { background: #fbeceb; color: var(--bad); }
.p-closed { background: #f3f0e7; color: var(--ink-soft); }
.p-hidden { background: #f3f0e7; color: var(--ink-soft); }
.p-deleted{ background: #f3f0e7; color: var(--ink-faint); }

.rowacts { display: flex; gap: 6px; flex-wrap: wrap; }
.rowacts button {
  border: 1px solid var(--hairline-strong);
  background: var(--paper-raised);
  border-radius: 999px;
  padding: 5px 11px; font-size: 12px; cursor: pointer;
  transition: border-color 0.2s var(--ease), color 0.2s var(--ease);
}
.rowacts button:hover { border-color: var(--gold); color: var(--gold-deep); }
.rowacts button.danger:hover { border-color: var(--bad); color: var(--bad); }

.field { display: grid; gap: 6px; margin-bottom: 14px; }
.field label { font-size: 12.5px; font-weight: 600; color: var(--ink-soft); }
.field input, .field textarea, .field select {
  border: 1px solid var(--hairline-strong);
  border-radius: var(--radius-input);
  padding: 10px 12px;
  background: var(--paper-raised);
  outline: 0;
  transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
.field input:focus, .field textarea:focus, .field select:focus {
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(201, 162, 39, 0.16);
}
.field small { font-size: 11.5px; color: var(--ink-faint); }
.form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 0 16px; }

.filters { display: flex; gap: 7px; flex-wrap: wrap; margin-bottom: 16px; }
.filters a {
  padding: 6px 13px; border-radius: 999px; font-size: 13px;
  border: 1px solid var(--hairline-strong); color: var(--ink-soft);
}
.filters a[aria-current="page"] { background: var(--ink); color: #fff; border-color: var(--ink); }

.login-page { min-height: 100dvh; display: grid; place-items: center; padding: 24px; }
.login-card {
  width: 100%; max-width: 390px;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-surface);
  background: var(--paper-raised);
  padding: 32px 28px;
  box-shadow: var(--shadow-lg);
}
.login-card h1 { font-size: 24px; margin-bottom: 6px; }
.login-card p.sub { color: var(--ink-faint); font-size: 13.5px; margin: 0 0 22px; }
.alert {
  background: #fbeceb; border: 1px solid #f0cdc9; color: var(--bad);
  border-radius: var(--radius-input); padding: 10px 13px;
  font-size: 13.5px; margin-bottom: 16px;
}
.notice {
  background: var(--gold-wash); border: 1px solid #f0e3bb; color: var(--gold-deep);
  border-radius: var(--radius-input); padding: 11px 14px; font-size: 13px;
}

code.token {
  font-family: var(--font-mono); font-size: 12.5px;
  background: var(--paper-sunk); padding: 2px 7px; border-radius: 6px;
  border: 1px solid var(--hairline);
}

/* ==========================================================================
   11b. Language switcher
   Native <details> so it opens without JS and stays keyboard-operable.
   ========================================================================== */

.langpick { position: relative; flex: none; }
.langpick > summary {
  list-style: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 12px;
  border-radius: 999px;
  border: 1px solid var(--hairline-strong);
  background: var(--paper-raised);
  color: var(--ink-soft);
  font-size: 13px;
  font-weight: 600;
  transition: border-color 0.2s var(--ease), color 0.2s var(--ease);
}
.langpick > summary::-webkit-details-marker { display: none; }
.langpick > summary:hover { border-color: var(--gold-lite); color: var(--gold-deep); }
.langpick > summary svg { width: 15px; height: 15px; }
.langpick[open] > summary { border-color: var(--gold); color: var(--gold-deep); }

.langmenu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 60;
  min-width: 172px;
  padding: 6px;
  border-radius: 14px;
  background: var(--paper-raised);
  border: 1px solid var(--hairline-strong);
  box-shadow: var(--shadow-md);
  display: grid;
  gap: 2px;
}
.langpick[data-align="start"] .langmenu { right: auto; left: 0; }
.langmenu a {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 8px 10px;
  border-radius: 9px;
  font-size: 14px;
  color: var(--ink-soft);
  transition: background 0.15s var(--ease), color 0.15s var(--ease);
}
.langmenu a:hover { background: var(--gold-wash); color: var(--ink); }
.langmenu a[aria-current="true"] { background: var(--gold-wash); color: var(--gold-deep); font-weight: 600; }

/* ==========================================================================
   11c. Search + filters
   GET form: every result set is a shareable, back-button-safe URL.
   ========================================================================== */

.filterbar { margin-bottom: 26px; display: grid; gap: 12px; }
.result-count { color: var(--ink-faint); font-size: 14px; font-weight: 600; }

.filter-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 14px;
  padding: 14px 16px;
  border-radius: var(--radius-surface);
  border: 1px solid var(--hairline);
  background: var(--paper-raised);
}
.filter-group { display: grid; gap: 6px; min-width: 0; }
.filter-group > label {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.filter-group .pair { display: flex; align-items: center; gap: 7px; }
.filter-group .pair i { color: var(--ink-faint); font-style: normal; }
.filter-group input,
.filter-group select {
  width: 104px;
  padding: 9px 11px;
  border-radius: var(--radius-input);
  border: 1px solid var(--hairline-strong);
  background: var(--paper);
  color: var(--ink);
  font-size: 14px;
  font-family: inherit;
}
.filter-group select { width: auto; min-width: 170px; }
.filter-group input:focus,
.filter-group select:focus {
  outline: 2px solid var(--gold-lite);
  outline-offset: 1px;
  border-color: var(--gold);
}
.filter-actions { display: flex; gap: 8px; margin-left: auto; }

/* ==========================================================================
   11d. Platform strip
   Static claim: one Epic account is the same account on every platform.
   ========================================================================== */

.consoles { margin-top: 26px; }
.consoles-head { margin-bottom: 12px; }
.consoles-head b { font-family: var(--font-display); font-size: 1.25rem; display: block; }
.consoles-head span { color: var(--ink-soft); font-size: 14.5px; }
.consoles ul {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding: 0;
  margin: 0;
}
.consoles li {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 14px;
  border-radius: 999px;
  border: 1px solid var(--hairline);
  background: var(--paper-raised);
  color: var(--ink-soft);
  font-size: 13.5px;
  font-weight: 600;
}
.consoles li svg { width: 18px; height: 18px; color: var(--gold-deep); }

.consoles.is-compact { margin: 0 0 13px; }
.consoles.is-compact ul { gap: 6px; }
.consoles.is-compact li {
  gap: 0;
  padding: 6px;
  border-color: transparent;
  background: var(--paper-sunk);
}
.consoles.is-compact li span { display: none; }
.consoles.is-compact li svg { width: 15px; height: 15px; }

/* ==========================================================================
   11e. Listing detail additions
   ========================================================================== */

.detail-title { font-size: clamp(1.9rem, 3.6vw, 2.7rem); margin-bottom: 6px; }
.title-check {
  color: inherit;
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  transition: color 0.2s var(--ease);
}
.title-check:hover { color: var(--gold-deep); }
.title-check svg { width: 0.62em; height: 0.62em; flex: none; color: var(--gold-deep); }
.glare-body h3 a { color: inherit; }
.glare-body h3 a:hover { color: var(--gold-deep); }

.checklink {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 20px;
  font-size: 14px;
  font-weight: 600;
  color: var(--gold-deep);
  border-bottom: 1px solid var(--gold-lite);
}
.gallery-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.gallery-head h2 { font-size: 1.25rem; }
.gallery-head span { color: var(--ink-faint); font-size: 13.5px; }
/* Carousel. One panel at a time on a scroll-snap track, so a phone swipes it
   natively and the arrows are pure enhancement — with JS off it still scrolls. */
.gallerywrap { position: relative; }
.gallery {
  display: flex;
  gap: 0;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  border-radius: var(--radius-surface);
  scrollbar-width: none;             /* the arrows and counter are the affordance */
}
.gallery::-webkit-scrollbar { display: none; }
.gallery .shot {
  flex: 0 0 100%;
  scroll-snap-align: center;
  display: block;
  border-radius: var(--radius-surface);
  overflow: hidden;
}
.gallery .shot img { display: block; width: 100%; height: auto; }

.gnav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border: 1px solid var(--hairline-strong);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(8px);
  color: var(--ink);
  cursor: pointer;
  box-shadow: var(--shadow-md);
  transition: opacity .2s var(--ease), transform .2s var(--ease);
}
.gnav svg { width: 20px; height: 20px; }
.gnav.prev { left: 12px; }
.gnav.next { right: 12px; }
.gnav:hover { transform: translateY(-50%) scale(1.06); }
.gnav[disabled] { opacity: .35; cursor: default; }
.gnav[disabled]:hover { transform: translateY(-50%); }

.gcount {
  position: absolute;
  right: 12px;
  bottom: 12px;
  z-index: 2;
  padding: 4px 11px;
  border-radius: 999px;
  font-size: 12.5px;
  font-weight: 600;
  color: #fff;
  background: rgba(20, 17, 11, 0.72);
  backdrop-filter: blur(6px);
}

.excl-block { margin-top: 26px; }
.excl-block h2 { font-size: 1.25rem; margin-bottom: 12px; }
.excl-block .count {
  font-size: 13px;
  color: var(--gold-deep);
  background: var(--gold-wash);
  border-radius: 999px;
  padding: 2px 9px;
  vertical-align: middle;
}

/* Two equally-weighted buy routes: buying here is a DM, not a checkout. */
.buy-routes { display: grid; gap: 9px; margin-top: 16px; }
.buy-routes .btn { width: 100%; justify-content: center; gap: 8px; }
.buy-handles {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  margin-top: 9px;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--ink-faint);
}
.buy-hint { font-size: 12.5px; color: var(--ink-soft); margin: 12px 0 0; }
.renders-note { font-size: 12.5px; color: var(--ink-faint); margin: 14px 0 0; }

/* ==========================================================================
   11f. "Not what you're looking for" request box
   ========================================================================== */

.reqbox { margin-top: 34px; }
.reqbox-inner {
  border-radius: var(--radius-surface);
  border: 1px solid var(--gold-lite);
  background: linear-gradient(150deg, var(--gold-wash), var(--paper-raised));
  padding: clamp(20px, 3vw, 32px);
}
.reqbox h2 { font-size: clamp(1.3rem, 2.4vw, 1.7rem); margin-bottom: 8px; }
.reqbox p { color: var(--ink-soft); max-width: 62ch; margin-bottom: 16px; }
.reqline {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 12px 14px;
  border-radius: var(--radius-input);
  background: var(--paper-raised);
  border: 1px dashed var(--hairline-strong);
}
.reqline code {
  font-family: var(--font-mono);
  font-size: 14px;
  color: var(--ink);
  flex: 1;
  min-width: 200px;
  word-break: break-word;
}
.reqline .btn { flex: none; }
.reqbox-cta { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
.reqbox-cta .btn b { font-family: var(--font-mono); font-size: 12px; margin-left: 5px; }

/* ==========================================================================
   11g. App shell additions
   ========================================================================== */

.appbar-tools { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.appbar-tools .langpick > summary { padding: 6px 10px; font-size: 12px; }

.filter-toggle {
  flex: none;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 9px;
  border: 1px solid var(--hairline-strong);
  background: var(--paper-raised);
  color: var(--ink-soft);
  cursor: pointer;
}
.filter-toggle svg { width: 17px; height: 17px; }
.filter-toggle[aria-expanded="true"] { border-color: var(--gold); color: var(--gold-deep); }
.appfilters { padding: 0 18px; }
.appfilters .filterbar { margin: 0 0 6px; }
.appfilters .searchbar { display: none; }
.appfilters .filter-actions { margin-left: 0; width: 100%; }
.appfilters .filter-actions .btn { flex: 1; justify-content: center; }

/* ==========================================================================
   12. Checker page (/checker)
   Product page for Regulu Skinchecker. Reuses the marketplace primitives
   (.shell, .btn, .statstrip, .market-head, .shimmer) so it reads as the same
   site; only the pieces with no existing equivalent are defined here.

   The rarity swatches are the one place raw colour is hard-coded. They stand
   for Fortnite rarity tiers, not brand colour, so they deliberately sit outside
   the white-and-gold token set.
   ========================================================================== */

.r-uncommon  { --rarity: #4f9d3a; }
.r-rare      { --rarity: #3a7bd5; }
.r-epic      { --rarity: #9b4dd8; }
.r-legendary { --rarity: #d97a2b; }
.r-mythic    { --rarity: #d4af37; }

/* -- hero ------------------------------------------------------------- */

.chero { position: relative; padding: 68px 0 52px; }

.chero-grid {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 54px;
  align-items: center;
}

.eyebrow {
  display: inline-block;
  margin-bottom: 14px;
  padding: 5px 13px;
  border: 1px solid var(--hairline-strong);
  border-radius: 999px;
  background: var(--gold-wash);
  color: var(--gold-deep);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.chero h1 {
  font-size: clamp(2.1rem, 4.4vw, 3.35rem);
  line-height: 1.06;
  letter-spacing: -0.03em;
  margin: 0 0 16px;
  max-width: 16ch;
}
.chero .lead { font-size: 17px; color: var(--ink-soft); max-width: 52ch; margin: 0 0 26px; }
.chero-note { margin: 16px 0 0; font-size: 13px; color: var(--ink-faint); }

/* Stylised chat instead of a screenshot: nothing to re-shoot when the bot's
   copy changes, and it stays sharp at every width. */
.chatcard {
  border: 1px solid var(--hairline);
  border-radius: var(--radius-surface);
  background: var(--paper-raised);
  box-shadow: var(--shadow-md);
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 9px;
}
.chatcard-bar { display: flex; gap: 6px; margin-bottom: 4px; }
.chatcard-bar i {
  width: 9px; height: 9px; border-radius: 999px;
  background: var(--hairline-strong);
}

.bubble {
  max-width: 82%;
  padding: 10px 14px;
  border-radius: 14px;
  font-size: 14px;
  line-height: 1.45;
}
.bubble.out {
  align-self: flex-end;
  background: var(--gold);
  color: #23200f;
  font-family: var(--font-mono);
  font-size: 13px;
}
.bubble.in {
  align-self: flex-start;
  background: var(--paper-sunk);
  color: var(--ink-soft);
  border: 1px solid var(--hairline);
}
.bubble.tiles {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
  max-width: 100%;
  width: 100%;
}
.bubble.tiles .t {
  aspect-ratio: 1;
  border-radius: 7px;
  /* Flat colour first: where color-mix() is unsupported the gradient line is
     dropped whole, and without this the tiles would render invisible. */
  background: var(--rarity);
  background: linear-gradient(160deg, var(--rarity), color-mix(in srgb, var(--rarity) 62%, #000));
}

/* -- sections --------------------------------------------------------- */

.csection { padding: 58px 0; }
.csection.sunk { background: var(--paper-sunk); border-block: 1px solid var(--hairline); }
.csection h2 { font-size: clamp(1.55rem, 2.8vw, 2.1rem); margin: 0 0 22px; }
.csection .market-head h2 { margin: 0; }

.statstrip.of-3 { grid-template-columns: repeat(3, 1fr); }

/* -- steps ------------------------------------------------------------ */

.steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  counter-reset: step;
}
.steps li {
  position: relative;
  padding: 26px 22px 22px;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-surface);
  background: var(--paper-raised);
  box-shadow: var(--shadow-sm);
}
.stepno {
  display: inline-grid;
  place-items: center;
  width: 32px; height: 32px;
  margin-bottom: 12px;
  border-radius: 999px;
  background: var(--gold-wash);
  border: 1px solid var(--gold-lite);
  color: var(--gold-deep);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 15px;
}
.steps h3 { margin: 0 0 6px; font-size: 17px; }
.steps p { margin: 0; color: var(--ink-soft); font-size: 14.5px; }

/* -- panel cards ------------------------------------------------------ */

.panelgrid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
.panelcard {
  padding: 22px;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-surface);
  background: var(--paper-raised);
  box-shadow: var(--shadow-sm);
  transition: transform .35s var(--ease), box-shadow .35s var(--ease);
}
.panelcard:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.panelcard h3 { margin: 0 0 6px; font-size: 17px; }
.panelcard p { margin: 0; color: var(--ink-soft); font-size: 14.5px; }
.swatch {
  display: block;
  width: 38px; height: 38px;
  margin-bottom: 14px;
  border-radius: 10px;
  background: var(--rarity);   /* fallback — see .bubble.tiles .t above */
  background: linear-gradient(160deg, var(--rarity), color-mix(in srgb, var(--rarity) 62%, #000));
}

/* -- commands + safety ------------------------------------------------ */

.csplit { display: grid; grid-template-columns: 1fr 1.15fr; gap: 46px; align-items: start; }

.cmdlist { list-style: none; margin: 0; padding: 0; }
.cmdlist li {
  display: flex;
  align-items: baseline;
  gap: 14px;
  padding: 12px 0;
  border-bottom: 1px solid var(--hairline);
}
.cmdlist li:last-child { border-bottom: 0; }
.cmdlist code {
  flex: none;
  min-width: 84px;
  font-family: var(--font-mono);
  font-size: 13.5px;
  color: var(--gold-deep);
}
.cmdlist span { color: var(--ink-soft); font-size: 14.5px; }

.safelist { list-style: none; margin: 0; padding: 0; display: grid; gap: 18px; }
.safelist li { display: flex; gap: 14px; }
.safelist svg { flex: none; width: 22px; height: 22px; color: var(--gold-deep); margin-top: 2px; }
.safelist b { display: block; margin-bottom: 3px; font-size: 15.5px; }
.safelist p { margin: 0; color: var(--ink-soft); font-size: 14.5px; }

/* -- faq --------------------------------------------------------------- */
/* Native <details> so it works with no JS and stays keyboard-operable. */

.faq { display: grid; gap: 10px; max-width: 860px; }
.faq details {
  border: 1px solid var(--hairline);
  border-radius: var(--radius-surface);
  background: var(--paper-raised);
  padding: 0 18px;
}
.faq summary {
  cursor: pointer;
  padding: 15px 0;
  font-weight: 600;
  font-size: 15.5px;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+";
  flex: none;
  font-size: 19px;
  color: var(--gold-deep);
  transition: transform .25s var(--ease);
}
.faq details[open] summary::after { transform: rotate(45deg); }
.faq p { margin: 0 0 16px; color: var(--ink-soft); font-size: 14.5px; max-width: 68ch; }

/* -- cta bands --------------------------------------------------------- */

.ctaband {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 26px;
  flex-wrap: wrap;
  padding: 30px 32px;
  border-radius: var(--radius-surface);
  border: 1px solid var(--gold-lite);
  background: linear-gradient(120deg, var(--gold-wash), var(--paper-raised));
  box-shadow: var(--shadow-sm);
}
.ctaband + .ctaband { margin-top: 16px; }
.ctaband.quiet { border-color: var(--hairline); background: var(--paper-raised); }
.ctaband h2 { margin: 0 0 4px; font-size: 1.35rem; }
.ctaband p { margin: 0; color: var(--ink-soft); font-size: 14.5px; }
.ctaband .btn { flex: none; }

/* ==========================================================================
   13. Responsive
   ========================================================================== */

@media (max-width: 1040px) {
  .chero-grid { grid-template-columns: 1fr; gap: 36px; }
  .chero h1 { max-width: 20ch; }
  .panelgrid { grid-template-columns: repeat(2, 1fr); }
  .csplit { grid-template-columns: 1fr; gap: 34px; }
  .hero-grid { grid-template-columns: 1fr; gap: 34px; }
  .hero h1 { max-width: 20ch; }
  .detail-grid { grid-template-columns: 1fr; gap: 28px; }
  .buybox { position: static; }
}

@media (max-width: 900px) {
  /* Three steps side by side get too narrow to read before the phone
     breakpoint, so they stack one step earlier than the rest of the page. */
  .steps { grid-template-columns: 1fr; }
  /* Filters go full width and stack; the action pair stops floating right so
     Apply/Reset don't end up orphaned on their own line. */
  .filter-row { gap: 12px; }
  .filter-group { flex: 1 1 auto; }
  .filter-group input { width: 100%; min-width: 0; }
  .filter-group select { width: 100%; min-width: 0; }
  .filter-actions { margin-left: 0; width: 100%; }
  .filter-actions .btn { flex: 1; justify-content: center; }
}

@media (max-width: 720px) {
  .gmenu { display: none; }
  .hero { padding: 46px 0 34px; }
  /* The floating dock shrinks with the viewport and drops its hover tooltips,
     which have nowhere to go on a narrow screen and were clipping off-canvas. */
  .dock-wrap { bottom: 16px; }
  .dock { gap: 8px; padding: 8px 10px; }
  .dock a { width: 38px; height: 38px; }
  .dock a svg { width: 18px; height: 18px; }
  .dock a::after { display: none; }
  .buy-handles { font-size: 11px; }
  .statstrip { grid-template-columns: repeat(2, 1fr); }
  .statstrip div:nth-child(3) { border-left: 0; }
  .statstrip div:nth-child(n+3) { border-top: 1px solid var(--hairline); }
  /* .statstrip.of-3 outranks the rule above, so the checker's three stats
     would stay in three cramped columns. Stack them instead. */
  .statstrip.of-3 { grid-template-columns: 1fr; }
  .statstrip.of-3 div + div { border-left: 0; border-top: 1px solid var(--hairline); }
  .chero { padding: 44px 0 32px; }
  .csection { padding: 40px 0; }
  .panelgrid { grid-template-columns: 1fr; }
  .ctaband { padding: 24px 22px; }
  .ctaband .btn { width: 100%; justify-content: center; }
  .grid { grid-template-columns: 1fr; }
  .market { padding: 40px 0 70px; }
  .foot { padding-bottom: 130px; }
  .admin-wrap { padding: 18px 14px 70px; }
  .table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  table { min-width: 720px; }
}

/* Very small phones (iPhone SE and narrower) and folded devices. */
@media (max-width: 380px) {
  .dock { gap: 6px; padding: 7px 9px; }
  .dock a { width: 34px; height: 34px; }
  .dock a svg { width: 16px; height: 16px; }
  .tabbar a svg { width: 19px; height: 19px; }
  .appbar-tools .btn { padding: 7px 10px; font-size: 12px; }
  .reqline { gap: 8px; }
  .reqline .btn { width: 100%; justify-content: center; }
  .reqbox-cta .btn { width: 100%; justify-content: center; }
}

/* Landscape phones: a fixed bottom bar plus a short viewport leaves almost no
   reading area, so tighten the bar rather than let it eat the feed. */
@media (max-height: 480px) and (orientation: landscape) {
  .tabbar a { padding: 6px 4px 5px; }
  .tabbar a svg { width: 17px; height: 17px; }
  .dock-wrap { bottom: 10px; }
}

/* ==========================================================================
   14. Reduced motion
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  .aurora span, .starfield i, .axe, .axe-fallback, .shimmer, .loader-bar i {
    animation: none !important;
  }
  .shimmer { color: var(--gold-deep); -webkit-text-fill-color: currentColor; }
}