/* =====================================================================
   ASHES - front page sections.
   Depends on theme.css for tokens and primitives.
   ===================================================================== */

/* =====================================================================
   HEADER
   ===================================================================== */
.site-header {
  position: sticky;
  top: 0;
  z-index: 60;
  transition: background 0.3s var(--ease), border-color 0.3s var(--ease),
              backdrop-filter 0.3s var(--ease);
  border-bottom: 1px solid transparent;
}
/* Transparent over the hero, solid once you leave it - so the logo sits on
   the artwork at rest and stays legible over content on scroll. */
.site-header.stuck {
  background: rgba(10, 7, 6, 0.86);
  backdrop-filter: blur(16px) saturate(140%);
  border-bottom-color: var(--line);
}

.header-inner {
  display: flex;
  align-items: center;
  gap: 28px;
  height: 74px;
}

.brand { display: flex; align-items: center; gap: 12px; flex: none; }
.brand img { height: 42px; width: auto; }
.brand-text { display: flex; flex-direction: column; line-height: 1.05; }
.brand-name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 16px;
  letter-spacing: 0.16em;
}
.brand-sub {
  font-size: 10px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--ac);
}

.nav { display: flex; gap: 4px; margin-left: auto; }
.nav a {
  padding: 9px 15px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 500;
  color: var(--fg-2);
  transition: color 0.18s var(--ease), background 0.18s var(--ease);
}
.nav a:hover { color: var(--fg); background: rgba(255, 255, 255, 0.05); }

.header-actions { display: flex; align-items: center; gap: 10px; flex: none; }

.nav-toggle { display: none; background: none; border: 0; padding: 8px; color: var(--fg); }

@media (max-width: 1080px) {
  .nav {
    position: fixed;
    inset: 74px 0 auto 0;
    flex-direction: column;
    gap: 0;
    background: rgba(10, 7, 6, 0.97);
    backdrop-filter: blur(16px);
    border-bottom: 1px solid var(--line);
    padding: 12px;
    margin: 0;
    display: none;
  }
  .nav.open { display: flex; }
  .nav a { padding: 14px 16px; border-radius: var(--r-sm); }
  .nav-toggle { display: block; margin-left: auto; order: 3; }
  .header-actions { order: 2; }
  .header-actions .btn-discord { display: none; }
}

/* Narrow-viewport header.
   Below 1080px .nav goes position:fixed and the row holds .brand,
   .header-actions and .nav-toggle - all flex:none, totalling ~394px of
   unshrinkable content against a 312px content box at 360px wide. Because
   body has overflow-x:hidden, the excess is CLIPPED rather than scrollable,
   and the menu button - the only way to reach the nav at this width - is what
   falls off the right edge.
   It gets worse after load: serverStatus() rewrites the pill from "Online" to
   "48 / 64 online", adding ~59px more.
   So: let the actions cluster shrink, let the pill ellipsis, and pin the menu
   button so it can never be the item pushed out. */
@media (max-width: 700px) {
  .header-inner { gap: 14px; }
  .header-actions { flex: 0 1 auto; min-width: 0; }
  #status-pill { min-width: 0; }
  #status-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .nav-toggle { flex: none; }
}

@media (max-width: 560px) {
  /* The player count is already the first hero stat, so dropping the pill
     loses nothing and frees the ~90px that makes the row fit. */
  .header-actions #status-pill { display: none; }
  .brand { flex: 0 1 auto; min-width: 0; }
  .brand img { height: 38px; }
}

@media (max-width: 400px) { .brand-sub { display: none; } }

/* =====================================================================
   HERO
   ===================================================================== */
.hero {
  position: relative;
  /* Pulled up under the transparent sticky header so the video plate starts at
     the very top of the window rather than below a 74px band of flat black. */
  margin-top: -74px;
  padding: 150px 0 92px;
  text-align: center;
  overflow: hidden;
  isolation: isolate;
}

/* --- the video plate ------------------------------------------------------ */
.hero-plate { position: absolute; inset: 0; overflow: hidden; z-index: -1; }

.hero-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* The clip is a red phoenix on black. Desaturating and warming it stops it
     competing with the logo sitting on top, and pushes it back into the
     middle distance where a backdrop belongs. */
  filter: saturate(0.72) contrast(1.08) brightness(0.5);
  transform: scale(1.06);
}

/* Two jobs: fade the plate into the page background at the bottom edge so the
   video has no visible seam, and darken the centre enough for white text to
   clear WCAG AA over moving footage. */
.hero-scrim {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(70% 55% at 50% 42%, rgba(10, 7, 6, 0.35), rgba(10, 7, 6, 0.82) 70%),
    linear-gradient(180deg, rgba(10, 7, 6, 0.92) 0%, rgba(10, 7, 6, 0.35) 26%,
                            rgba(10, 7, 6, 0.72) 74%, var(--bg) 99%);
}

.hero-content { position: relative; z-index: 1; }

.hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 7px 16px;
  margin-bottom: 26px;
  border-radius: 999px;
  border: 1px solid var(--line-soft);
  background: rgba(10, 7, 6, 0.55);
  backdrop-filter: blur(8px);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.18em;
  color: var(--ac-soft);
}
.hero-eyebrow .dot { background: var(--ac); }

/* Ember field. Each span is one rising particle; the count and the delays are
   set in the markup so the field is irregular rather than a visible loop. */
.embers { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.embers span {
  position: absolute;
  bottom: -12px;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--gold);
  opacity: 0;
  animation: rise linear infinite;
  will-change: transform, opacity;
}
/* --o is set per-particle in main.js so no two embers burn at the same
   brightness; the fallback keeps the animation sane if it is ever missing. */
@keyframes rise {
  0%   { transform: translate3d(0, 0, 0) scale(1);      opacity: 0; }
  12%  { opacity: var(--o, 0.85); }
  100% { transform: translate3d(24px, -78vh, 0) scale(0.35); opacity: 0; }
}

/* Sized down hard from its first pass. At min(560px, 82vw) the mark ate the
   whole first screen and everything under it read as an afterthought - the
   logo was the page rather than the opening line of it. */
.hero-logo {
  width: min(400px, 68vw);
  margin: 0 auto;
  filter: drop-shadow(0 18px 44px rgba(249, 115, 22, 0.4))
          drop-shadow(0 2px 5px rgba(0, 0, 0, 0.8));
  animation: logoIn 1.2s var(--ease) both;
}
@keyframes logoIn {
  from { opacity: 0; transform: translateY(18px) scale(0.96); }
  to   { opacity: 1; transform: none; }
}

.hero-tagline {
  font-family: var(--font-display);
  font-size: clamp(13px, 1.9vw, 17px);
  font-weight: 500;
  letter-spacing: 0.46em;
  text-transform: uppercase;
  color: var(--ac-soft);
  margin: -4px 0 0;
  /* letter-spacing adds a trailing gap after the last letter, shifting the
     line left of true centre; the indent pays it back. */
  text-indent: 0.46em;
  text-shadow: 0 2px 18px rgba(0, 0, 0, 0.9);
}

.hero-blurb {
  margin: 22px auto 0;
  max-width: 54ch;
  color: var(--fg-2);
  font-size: 17px;
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.85);
}

.hero-cta {
  display: flex;
  gap: 14px;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 32px;
}

/* A bordered strip rather than four numbers floating in space - it gives the
   hero a definite bottom edge and stops the section dissolving into the next. */
.hero-stats {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  margin: 56px auto 0;
  max-width: 720px;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: rgba(10, 7, 6, 0.5);
  backdrop-filter: blur(10px);
  overflow: hidden;
}
.hero-stat {
  flex: 1 1 25%;
  min-width: 118px;
  padding: 18px 14px;
  text-align: center;
  position: relative;
}
.hero-stat + .hero-stat::before {
  content: '';
  position: absolute;
  left: 0; top: 22%;
  height: 56%;
  width: 1px;
  background: var(--line);
}
.hero-stat b {
  display: block;
  font-family: var(--font-display);
  font-size: 27px;
  font-weight: 700;
  color: var(--fg);
  font-variant-numeric: tabular-nums;
}
.hero-stat span {
  font-size: 10.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--fg-3);
}

@media (max-width: 640px) {
  .hero { padding: 122px 0 68px; }
  .hero-stat { flex-basis: 50%; padding: 15px 10px; }
  /* With two per row the divider must reset on the left-hand item of each
     row, or a stray hairline floats at the start of row two. */
  .hero-stat:nth-child(odd)::before { display: none; }
  .hero-stat b { font-size: 23px; }
}

/* =====================================================================
   LIVE STREAM
   ===================================================================== */
/* Single column. The Twitch chat panel that used to sit beside the player was
   removed: it only ever worked for one of the three supported platforms, and
   an embedded chat is not what this page is for. */
.stream-grid { display: block; }

.stream-stage { padding: 0; }

.stream-bar {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--line);
  background: rgba(0, 0, 0, 0.25);
}
.stream-who { min-width: 0; }
.stream-who b { display: block; font-size: 15px; font-weight: 600; }
.stream-who span {
  display: block;
  font-size: 12.5px;
  color: var(--fg-3);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.stream-bar .badge { margin-left: auto; flex: none; }

/* 16:9 box. The iframe is absolutely filled into it so the player resizes
   with the column instead of forcing a fixed height. */
.stream-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #000;
}
.stream-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* Shown when no streamer is configured, or the platform has no embed. */
.stream-empty {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  gap: 10px;
  text-align: center;
  color: var(--fg-3);
  background:
    radial-gradient(600px 300px at 50% 40%, rgba(249, 115, 22, 0.10), transparent 70%),
    #080605;
  padding: 24px;
}
.stream-empty b { color: var(--fg-2); font-size: 15px; }

.panel-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 18px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--fg-3);
}

/* streamer roster */
.roster {
  display: flex;
  gap: 10px;
  margin-top: 18px;
  overflow-x: auto;
  padding-bottom: 6px;
  scrollbar-width: thin;
}
.roster-item {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 10px 16px 10px 10px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.02);
  flex: none;
  transition: border-color 0.18s var(--ease), background 0.18s var(--ease);
}
.roster-item:hover { border-color: var(--ac2); background: rgba(249, 115, 22, 0.06); }
.roster-item.active {
  border-color: var(--ac);
  background: rgba(249, 115, 22, 0.12);
  box-shadow: 0 0 0 1px rgba(249, 115, 22, 0.3);
}
.roster-av {
  width: 32px; height: 32px;
  border-radius: 50%;
  flex: none;
  object-fit: cover;
  background: linear-gradient(140deg, var(--ac2), var(--ac-deep));
  display: grid;
  place-content: center;
  font-size: 13px;
  font-weight: 700;
  color: var(--ac-soft);
}
.roster-name { font-size: 14px; font-weight: 600; }
.roster-plat {
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg-3);
}

/* The admin control. Hidden until an admin unlocks it - see admin.js. */
/* Staff-only controls.
   The hiding rule and any component rule that also sets `display` must not
   collide: `.admin-only{display:none}` and `.admin-note{display:flex}` are both
   specificity (0,1,0), so whichever is written last wins - and .admin-note was
   later in the file, which showed the "Admin mode" strip to every visitor.
   Components below therefore set NO display of their own; only these three
   rules decide visibility. */
.admin-only { display: none; }
body.is-admin .admin-only { display: revert; }
body.is-admin .admin-only.flex { display: flex; }

.admin-note {
  align-items: center;
  gap: 10px;
  margin-top: 14px;
  padding: 11px 16px;
  border-radius: var(--r);
  border: 1px dashed rgba(249, 115, 22, 0.35);
  background: rgba(249, 115, 22, 0.05);
  font-size: 13px;
  color: var(--ac-soft);
}
.admin-note .btn { margin-left: auto; }

/* =====================================================================
   INTRO VIDEO
   ===================================================================== */
.intro-screen {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: var(--r-lg);
  overflow: hidden;
  border: 1px solid var(--line);
  box-shadow: var(--shadow-ac);
  background: #000;
}
.intro-screen video,
.intro-screen iframe { width: 100%; height: 100%; object-fit: cover; border: 0; display: block; }

.intro-poster {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  transition: opacity 0.5s var(--ease), transform 6s var(--ease);
}
.intro-screen.playing .intro-poster,
.intro-screen.playing .intro-overlay { opacity: 0; pointer-events: none; }

.intro-overlay {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  gap: 18px;
  justify-items: center;
  background: linear-gradient(180deg, rgba(10, 7, 6, 0.35), rgba(10, 7, 6, 0.8));
  transition: opacity 0.5s var(--ease);
}
.intro-play {
  width: 88px; height: 88px;
  border-radius: 50%;
  border: 1px solid rgba(249, 115, 22, 0.5);
  background: rgba(249, 115, 22, 0.14);
  backdrop-filter: blur(8px);
  display: grid;
  place-content: center;
  color: var(--ac-soft);
  transition: transform 0.25s var(--ease), background 0.25s var(--ease);
}
.intro-play:hover { transform: scale(1.08); background: rgba(249, 115, 22, 0.26); }
.intro-play svg { margin-left: 5px; } /* optical centring of the triangle */

.intro-cap { text-align: center; }
.intro-cap b { font-family: var(--font-display); font-size: 22px; display: block; }
.intro-cap span { font-size: 14px; color: var(--fg-2); }

/* =====================================================================
   RADIO
   ===================================================================== */
.radio-grid {
  display: grid;
  grid-template-columns: 320px minmax(0, 1fr);
  gap: 20px;
  align-items: start;
}
@media (max-width: 980px) { .radio-grid { grid-template-columns: 1fr; } }

/* stations rail */
.stations { padding: 8px; }
.station {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 11px 13px;
  border-radius: var(--r);
  border: 1px solid transparent;
  background: none;
  text-align: left;
  transition: background 0.16s var(--ease), border-color 0.16s var(--ease);
}
.station:hover { background: rgba(255, 255, 255, 0.04); }
.station.active {
  background: rgba(249, 115, 22, 0.12);
  border-color: rgba(249, 115, 22, 0.4);
}
.station-icon {
  width: 34px; height: 34px;
  border-radius: 10px;
  flex: none;
  display: grid;
  place-content: center;
  background: linear-gradient(150deg, var(--surface-2), #0d0908);
  border: 1px solid var(--line);
  color: var(--fg-3);
}
.station.active .station-icon { color: var(--ac); border-color: rgba(249, 115, 22, 0.45); }
.station-txt { min-width: 0; }
.station-txt b { display: block; font-size: 14.5px; font-weight: 600; }
.station-txt span { display: block; font-size: 12px; color: var(--fg-3); }
.station-count { margin-left: auto; font-size: 11.5px; color: var(--fg-3); flex: none; }

/* player */
.player { padding: 22px; }
.player-top { display: flex; gap: 20px; align-items: center; }
@media (max-width: 560px) { .player-top { flex-direction: column; text-align: center; } }

.art-wrap { position: relative; flex: none; }
.player-art {
  width: 132px; height: 132px;
  border-radius: var(--r);
  object-fit: cover;
  border: 1px solid var(--line);
  background: linear-gradient(140deg, var(--ac2), var(--ac-deep));
  box-shadow: 0 14px 34px -12px rgba(0, 0, 0, 0.9);
}
/* Ring of light around the art while audio is actually playing - the one
   piece of motion that means something on this page. */
.art-wrap.playing::after {
  content: '';
  position: absolute;
  inset: -5px;
  border-radius: 18px;
  border: 1px solid rgba(249, 115, 22, 0.55);
  animation: artPulse 2.6s ease-in-out infinite;
  pointer-events: none;
}
@keyframes artPulse {
  0%, 100% { opacity: 0.25; transform: scale(1); }
  50%      { opacity: 0.9;  transform: scale(1.02); }
}

.now { min-width: 0; flex: 1; }
.now-label {
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ac);
  margin-bottom: 6px;
}
.now-title {
  font-family: var(--font-display);
  font-size: clamp(20px, 2.4vw, 27px);
  font-weight: 700;
  line-height: 1.2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.now-meta { font-size: 14px; color: var(--fg-2); margin-top: 4px; }
.now-tags { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; justify-content: inherit; }

.progress {
  margin-top: 20px;
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 12px;
  color: var(--fg-3);
  font-variant-numeric: tabular-nums;
}
.bar {
  flex: 1;
  height: 5px;
  border-radius: 99px;
  background: var(--line);
  position: relative;
  cursor: pointer;
}
.bar-fill {
  position: absolute;
  inset: 0 auto 0 0;
  width: 0%;
  border-radius: 99px;
  background: linear-gradient(90deg, var(--ac2), var(--ac), var(--gold));
}
.bar-knob {
  position: absolute;
  top: 50%;
  left: 0%;
  width: 12px; height: 12px;
  border-radius: 50%;
  background: var(--fg);
  transform: translate(-50%, -50%);
  opacity: 0;
  transition: opacity 0.18s var(--ease);
  pointer-events: none;
}
.bar:hover .bar-knob { opacity: 1; }

.controls {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 18px;
  flex-wrap: wrap;
}
.ctrl {
  width: 42px; height: 42px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.03);
  display: grid;
  place-content: center;
  color: var(--fg-2);
  transition: border-color 0.18s var(--ease), color 0.18s var(--ease), background 0.18s var(--ease);
}
.ctrl:hover { border-color: var(--ac); color: var(--fg); background: rgba(249, 115, 22, 0.1); }
.ctrl.on { color: var(--ac); border-color: rgba(249, 115, 22, 0.45); }
.ctrl-main {
  width: 54px; height: 54px;
  background: linear-gradient(180deg, var(--ac), var(--ac2));
  border-color: transparent;
  color: #180d06;
  box-shadow: 0 10px 26px -10px rgba(249, 115, 22, 0.8);
}
.ctrl-main:hover { color: #180d06; background: linear-gradient(180deg, #fb8c3c, var(--ac2)); }

.vol { display: flex; align-items: center; gap: 9px; margin-left: auto; }
.vol input {
  -webkit-appearance: none; appearance: none;
  width: 108px; height: 5px;
  border-radius: 99px;
  background: var(--line);
  outline: none;
}
.vol input::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 14px; height: 14px;
  border-radius: 50%;
  background: var(--ac);
  cursor: pointer;
  border: 0;
}
.vol input::-moz-range-thumb {
  width: 14px; height: 14px;
  border-radius: 50%;
  background: var(--ac);
  cursor: pointer;
  border: 0;
}

/* track list */
.tracklist { margin-top: 20px; max-height: 340px; }
.track {
  display: flex;
  align-items: center;
  gap: 13px;
  width: 100%;
  padding: 9px 12px;
  border-radius: var(--r-sm);
  border: 0;
  background: none;
  text-align: left;
  transition: background 0.14s var(--ease);
}
.track:hover { background: rgba(255, 255, 255, 0.045); }
.track.active { background: rgba(249, 115, 22, 0.1); }
.track-n {
  width: 22px;
  flex: none;
  text-align: right;
  font-size: 12px;
  color: var(--fg-3);
  font-variant-numeric: tabular-nums;
}
.track.active .track-n { color: var(--ac); }
.track-art {
  width: 36px; height: 36px;
  border-radius: 7px;
  flex: none;
  object-fit: cover;
  background: var(--surface-2);
}
.track-txt { min-width: 0; flex: 1; }
.track-txt b {
  display: block;
  font-size: 14px;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.track-txt span { display: block; font-size: 12px; color: var(--fg-3); }
.track-time { font-size: 12px; color: var(--fg-3); flex: none; font-variant-numeric: tabular-nums; }
.track-tag {
  font-size: 9.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 3px 7px;
  border-radius: 5px;
  flex: none;
  background: rgba(251, 191, 36, 0.14);
  color: var(--gold);
  border: 1px solid rgba(251, 191, 36, 0.25);
}

.submit-strip {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 20px;
  padding: 16px 20px;
  border-radius: var(--r);
  border: 1px solid var(--line);
  background: linear-gradient(90deg, rgba(249, 115, 22, 0.09), transparent 70%);
  flex-wrap: wrap;
}
.submit-strip p { font-size: 14px; color: var(--fg-2); flex: 1; min-width: 240px; }
.submit-strip b { color: var(--fg); display: block; font-size: 15px; }

/* =====================================================================
   STORE
   ===================================================================== */
/* auto-fit, not a fixed count: the number of tiles is data, and hard-coding
   4 columns left a hole the moment Queue Priority was removed. This adapts to
   however many tiles defaults.js defines. */
.store-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(258px, 1fr));
  gap: 18px;
}
@media (max-width: 560px) { .store-grid { grid-template-columns: 1fr; } }

.tile {
  display: flex;
  flex-direction: column;
  padding: 26px 24px 24px;
  transition: transform 0.28s var(--ease), border-color 0.28s var(--ease);
}
.tile:hover { transform: translateY(-6px); border-color: rgba(249, 115, 22, 0.45); }

/* A wash behind each tile that only appears on hover. Per-tile hue so the
   four choices are distinguishable at a glance without leaving the palette. */
.tile::after {
  content: '';
  position: absolute;
  inset: -40% -20% auto -20%;
  height: 200px;
  background: radial-gradient(closest-side, var(--tile-glow, rgba(249,115,22,0.3)), transparent);
  opacity: 0;
  transition: opacity 0.35s var(--ease);
  pointer-events: none;
}
.tile:hover::after { opacity: 1; }

.tile[data-id="coins"]  { --tile-glow: rgba(251, 191, 36, 0.30); }
.tile[data-id="subs"]   { --tile-glow: rgba(249, 115, 22, 0.30); }
.tile[data-id="queue"]  { --tile-glow: rgba(239, 68, 68, 0.26); }
.tile[data-id="donate"] { --tile-glow: rgba(168, 85, 247, 0.22); }

.tile-icon {
  width: 50px; height: 50px;
  border-radius: 14px;
  display: grid;
  place-content: center;
  background: linear-gradient(150deg, var(--surface-2), #0d0908);
  border: 1px solid var(--line);
  color: var(--ac);
  margin-bottom: 18px;
}
.tile[data-id="coins"]  .tile-icon { color: var(--gold); }
.tile[data-id="queue"]  .tile-icon { color: #f87171; }
.tile[data-id="donate"] .tile-icon { color: #c084fc; }

.tile h3 { font-family: var(--font-display); font-size: 21px; }
.tile-from {
  font-size: 12.5px;
  color: var(--gold);
  font-weight: 600;
  letter-spacing: 0.04em;
  margin-top: 5px;
  min-height: 19px;
}
.tile p { font-size: 14px; color: var(--fg-2); margin-top: 12px; flex: 1; }
.tile-note {
  font-size: 12px;
  color: var(--fg-3);
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}
.tile .btn { margin-top: 16px; }

.store-trust {
  display: flex;
  gap: 26px;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 30px;
  font-size: 13px;
  color: var(--fg-3);
}
.store-trust span { display: inline-flex; align-items: center; gap: 8px; }

/* =====================================================================
   SUPPORTER TIERS - the fire ladder
   =====================================================================
   Each card carries its own --tier colour, taken from ashes_multijob's
   config so the website and the in-game job app agree on what Ember looks
   like. Everything tinted on a card reads from that one variable.
   ===================================================================== */
.tier-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 14px;
  align-items: stretch;
}
@media (max-width: 1180px) { .tier-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 780px)  { .tier-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px)  { .tier-grid { grid-template-columns: 1fr; } }

.tier {
  --tier: var(--ac);
  display: flex;
  flex-direction: column;
  padding: 24px 20px 20px;
  transition: transform 0.28s var(--ease), border-color 0.28s var(--ease);
}
.tier:hover { transform: translateY(-5px); border-color: color-mix(in srgb, var(--tier) 55%, transparent); }
/* The top rim inherits the tier colour instead of the global orange, which
   is what makes the ladder read as a ladder at a glance. */
.tier::before { background: linear-gradient(90deg, transparent, var(--tier), transparent); }

.tier-free { opacity: 0.72; }
.tier-free:hover { opacity: 1; }

.tier-popular {
  border-color: color-mix(in srgb, var(--tier) 45%, transparent);
  box-shadow: var(--shadow), 0 0 46px -18px var(--tier);
}

.tier-flag {
  position: absolute;
  top: 0; right: 0;
  padding: 5px 12px;
  border-bottom-left-radius: 12px;
  background: var(--tier);
  color: #180d06;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

/* The painted emblem is the card's headline. No framing box: these are cut out
   with a soft alpha edge, and a bordered tile around them would crop the glow
   and make five hand-painted badges look like five UI icons. */
.tier-badge {
  display: grid;
  place-items: center;
  margin: 2px 0 12px;
  min-height: 132px;
}
.tier-badge img {
  width: auto;
  height: 132px;
  max-width: 100%;
  object-fit: contain;
  filter: drop-shadow(0 10px 26px rgba(0, 0, 0, 0.7));
  transition: transform 0.4s var(--ease), filter 0.4s var(--ease);
}
.tier:hover .tier-badge img {
  transform: translateY(-3px) scale(1.045);
  filter: drop-shadow(0 14px 30px rgba(0, 0, 0, 0.75))
          drop-shadow(0 0 22px color-mix(in srgb, var(--tier) 55%, transparent));
}

.tier-note {
  font-size: 11.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg-3);
  text-align: center;
}

.tier-price {
  margin: 12px 0 4px;
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 6px;
}
.tier-price b { font-family: var(--font-display); font-size: 27px; font-weight: 700; }
.tier-price span { font-size: 12.5px; color: var(--fg-3); }

.tier-perks {
  list-style: none;
  margin: 16px 0 0;
  padding: 16px 0 0;
  border-top: 1px solid var(--line);
  flex: 1;
  display: grid;
  gap: 9px;
  align-content: start;
}
.tier-perks li {
  display: flex;
  gap: 9px;
  align-items: flex-start;
  font-size: 13.5px;
  color: var(--fg-2);
  line-height: 1.45;
}
.tier-perks svg { flex: none; margin-top: 3px; color: var(--tier); }

.tier .btn { margin-top: 18px; }
.tier .btn-primary { background: linear-gradient(180deg, var(--tier), color-mix(in srgb, var(--tier) 60%, #000)); }

.tier-role {
  margin-top: 11px;
  font-size: 10.5px;
  letter-spacing: 0.08em;
  color: var(--fg-3);
  text-align: center;
}
.tier-cur {
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
  font-size: 12px;
  color: var(--fg-3);
  text-align: center;
}

.tier-foot {
  margin-top: 26px;
  font-size: 13.5px;
  color: var(--fg-3);
  max-width: 76ch;
}

/* =====================================================================
   STORY
   ===================================================================== */
.story { position: relative; }
/* A hairline down the middle of the beats, the thread the whole section
   hangs off. Hidden on narrow screens where the beats stack full width. */
.beats { display: grid; gap: 4px; position: relative; }

.beat {
  display: grid;
  grid-template-columns: 1fr 96px 1fr;
  align-items: center;
  gap: 0;
}
.beat-body { padding: 30px 0; }
.beat h3 {
  font-family: var(--font-display);
  font-size: 25px;
  margin-bottom: 12px;
  color: var(--fg);
}
.beat p { color: var(--fg-2); font-size: 16px; }

.beat-rail { position: relative; height: 100%; display: grid; place-items: center; }
.beat-rail::before {
  content: '';
  position: absolute;
  inset: 0 auto 0 50%;
  width: 1px;
  transform: translateX(-50%);
  background: linear-gradient(180deg, transparent, var(--line) 12%, var(--line) 88%, transparent);
}
.beat-node {
  width: 13px; height: 13px;
  border-radius: 50%;
  background: var(--bg);
  border: 2px solid var(--ac);
  box-shadow: 0 0 0 6px rgba(249, 115, 22, 0.1), 0 0 22px rgba(249, 115, 22, 0.55);
  position: relative;
  z-index: 1;
}

.beat:nth-child(odd)  .beat-body { grid-column: 1; text-align: right; padding-right: 34px; }
.beat:nth-child(even) .beat-body { grid-column: 3; padding-left: 34px; }
.beat-rail { grid-column: 2; }

@media (max-width: 860px) {
  .beat { grid-template-columns: 32px 1fr; }
  .beat-rail { grid-column: 1; }
  .beat:nth-child(odd) .beat-body,
  .beat:nth-child(even) .beat-body {
    grid-column: 2;
    text-align: left;
    padding: 24px 0 24px 22px;
  }
}

.timeline {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 0;
  margin-top: 64px;
  border-top: 1px solid var(--line);
}
@media (max-width: 980px) { .timeline { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 560px) { .timeline { grid-template-columns: repeat(2, 1fr); } }

.tl-item {
  padding: 22px 18px;
  border-right: 1px solid var(--line);
  position: relative;
}
.tl-item:last-child { border-right: 0; }
.tl-item::before {
  content: '';
  position: absolute;
  top: -1px; left: 0;
  width: 0;
  height: 1px;
  background: var(--ac);
  transition: width 0.5s var(--ease);
}
.tl-item:hover::before { width: 100%; }
.tl-year {
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ac);
}
.tl-label { font-size: 16px; font-weight: 600; margin-top: 8px; }
.tl-note { font-size: 13px; color: var(--fg-3); margin-top: 5px; }

/* =====================================================================
   SIGN IN  (header widget)
   ===================================================================== */
.auth-signin span { display: inline-block; }

/* A control that cannot do its job must not look like one that can. */
.btn.is-off,
.auth-signin.is-off {
  opacity: 0.45;
  cursor: not-allowed;
  pointer-events: auto;   /* keep it hoverable so the title= reason shows */
}
.btn.is-off:hover, .auth-signin.is-off:hover { transform: none; border-color: var(--line); }

.auth-user {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 5px 6px 5px 7px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.03);
  max-width: 260px;
}
.auth-av { width: 26px; height: 26px; border-radius: 50%; flex: none; object-fit: cover; }
.auth-name {
  font-size: 13.5px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
.auth-tier {
  --tier: var(--ac);
  flex: none;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 999px;
  color: var(--tier);
  background: color-mix(in srgb, var(--tier) 15%, transparent);
  border: 1px solid color-mix(in srgb, var(--tier) 35%, transparent);
}
/* Staff panel shortcut. Reads as an action, not another badge - the tier chip
   beside it is only a label, and two identical-looking pills would hide the
   one you can click. */
.auth-staff {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: none;
  padding: 5px 11px 5px 9px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #180d06;
  background: linear-gradient(180deg, var(--ac), var(--ac2));
  box-shadow: 0 4px 14px -4px rgba(249, 115, 22, 0.7);
  transition: transform 0.16s var(--ease), box-shadow 0.16s var(--ease);
}
.auth-staff:hover {
  transform: translateY(-1px);
  box-shadow: 0 7px 18px -4px rgba(249, 115, 22, 0.85);
}
.auth-staff svg { flex: none; }

.auth-out {
  flex: none;
  width: 22px; height: 22px;
  border-radius: 50%;
  border: 0;
  background: rgba(255, 255, 255, 0.05);
  color: var(--fg-3);
  display: grid;
  place-content: center;
  transition: color 0.16s var(--ease), background 0.16s var(--ease);
}
.auth-out:hover { color: var(--fg); background: rgba(239, 68, 68, 0.2); }

@media (max-width: 860px) {
  /* Keep the Staff button; drop its word so it stays a tappable icon. The
     tier chip is a label and goes first when room runs out. */
  .auth-tier { display: none; }
  .auth-staff span { display: none; }
  .auth-staff { padding: 5px 9px; }
}
@media (max-width: 700px) { .auth-name { display: none; } }

/* =====================================================================
   QUEUE PAGE
   ===================================================================== */
.queue-main { padding: 52px 0 80px; position: relative; z-index: 1; }

.queue-grid {
  display: grid;
  grid-template-columns: 340px minmax(0, 1fr);
  gap: 20px;
  align-items: start;
}
@media (max-width: 900px) { .queue-grid { grid-template-columns: 1fr; } }

/* ---- live panel ---- */
.queue-live { padding: 0 0 22px; }

.queue-dial { padding: 26px 22px 20px; text-align: center; }
.qd-num { display: flex; align-items: baseline; justify-content: center; gap: 7px; }
.qd-num b {
  font-family: var(--font-display);
  font-size: 46px;
  font-weight: 700;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.qd-num span { font-size: 15px; color: var(--fg-3); font-variant-numeric: tabular-nums; }
.qd-label {
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--fg-3);
  margin-top: 8px;
}
.qd-bar {
  height: 6px;
  border-radius: 99px;
  background: var(--line);
  margin-top: 16px;
  overflow: hidden;
}
.qd-bar i {
  display: block;
  height: 100%;
  width: 0%;
  border-radius: 99px;
  background: linear-gradient(90deg, var(--ac2), var(--ac), var(--gold));
  transition: width 0.6s var(--ease);
}

.queue-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid var(--line);
}
.queue-stats > div { padding: 16px 8px; text-align: center; border-right: 1px solid var(--line); }
.queue-stats > div:last-child { border-right: 0; }
.queue-stats b {
  display: block;
  font-family: var(--font-display);
  font-size: 20px;
  font-variant-numeric: tabular-nums;
}
.queue-stats span {
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg-3);
}

.queue-note {
  margin: 16px 22px 0;
  font-size: 12.5px;
  color: var(--warn);
  line-height: 1.5;
}

/* ---- steps ---- */
.queue-you { padding: 0; }

.queue-step {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr);
  gap: 16px;
  padding: 22px 24px;
  border-top: 1px solid var(--line);
}
.queue-step:first-of-type { border-top: 0; }
.queue-step[hidden] { display: none; }

.qs-badge {
  width: 30px; height: 30px;
  border-radius: 50%;
  display: grid;
  place-content: center;
  font-size: 13px;
  font-weight: 700;
  color: var(--ac);
  border: 1px solid rgba(249, 115, 22, 0.4);
  background: rgba(249, 115, 22, 0.1);
  font-variant-numeric: tabular-nums;
}
.qs-body h3 { font-family: var(--font-display); font-size: 19px; margin-bottom: 7px; }
.qs-body p { font-size: 14px; color: var(--fg-2); }
.qs-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 16px; }
.qs-hint { font-size: 12.5px; color: var(--fg-3); margin-top: 12px; }

.link-code { display: block; margin-top: 12px; }

/* --- copyable value + button ---------------------------------------- */
.copyable {
  display: inline-flex;
  align-items: stretch;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: rgba(0, 0, 0, 0.45);
  overflow: hidden;
  max-width: 100%;
}
.copyable-text {
  padding: 9px 13px;
  font-family: ui-monospace, Menlo, Consolas, monospace;
  font-size: 13.5px;
  color: var(--ac-soft);
  white-space: nowrap;
  overflow-x: auto;
  scrollbar-width: none;
}
.copyable-text::-webkit-scrollbar { display: none; }

.copyable-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0 13px;
  border: 0;
  border-left: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.04);
  color: var(--fg-2);
  font-size: 12px;
  font-weight: 600;
  flex: none;
  transition: background 0.16s var(--ease), color 0.16s var(--ease);
}
.copyable-btn:hover { background: rgba(249, 115, 22, 0.14); color: var(--fg); }
.copyable-btn.is-ok  { color: var(--good); background: rgba(52, 211, 153, 0.12); }
.copyable-btn.is-bad { color: var(--warn); background: rgba(245, 158, 11, 0.12); }
.copyable-said { white-space: nowrap; }

.connect-copy {
  display: flex;
  align-items: center;
  gap: 11px;
  flex-wrap: wrap;
  margin-top: 12px;
}
.connect-copy > span { font-size: 12.5px; color: var(--fg-3); }

/* ---- tier readout ---- */
.tier-readout {
  --tier: var(--ac);
  display: flex;
  align-items: center;
  gap: 18px;
  margin-top: 6px;
  padding: 14px 16px;
  border-radius: var(--r);
  border: 1px solid color-mix(in srgb, var(--tier) 30%, transparent);
  background: color-mix(in srgb, var(--tier) 7%, transparent);
}
.tier-readout-badge {
  height: 84px;
  width: auto;
  flex: none;
  filter: drop-shadow(0 6px 16px rgba(0, 0, 0, 0.6));
}
.tier-readout-txt b {
  font-family: var(--font-display);
  font-size: 21px;
  color: var(--tier);
  display: block;
  margin-bottom: 6px;
}
.tier-grants { list-style: none; margin: 0; padding: 0; display: grid; gap: 3px; }
.tier-grants li { font-size: 13px; color: var(--fg-2); }
.tier-grants span { color: var(--fg); font-weight: 600; font-variant-numeric: tabular-nums; }

@media (max-width: 520px) {
  .queue-step { grid-template-columns: 1fr; gap: 10px; }
  .tier-readout { flex-direction: column; text-align: center; }
}

.queue-foot {
  margin-top: 28px;
  font-size: 13px;
  color: var(--fg-3);
  max-width: 78ch;
  line-height: 1.6;
}
.queue-foot a { color: var(--ac); }

/* =====================================================================
   PROFILE PAGE
   ===================================================================== */
.profile-main { padding: 46px 0 80px; position: relative; z-index: 1; }
.profile-gate { max-width: 620px; margin: 60px auto; padding: 30px 24px; }

.profile-hero {
  display: flex;
  align-items: center;
  gap: 22px;
  flex-wrap: wrap;
  padding-bottom: 26px;
  border-bottom: 1px solid var(--line);
}
.profile-av {
  width: 88px; height: 88px;
  border-radius: 50%;
  border: 2px solid var(--line);
  object-fit: cover;
  flex: none;
}
.profile-id { flex: 1; min-width: 220px; }
.profile-id .section-title { font-size: clamp(26px, 3.4vw, 38px); }
.profile-hero > .btn { flex: none; }

.profile-tier {
  --tier: var(--ac);
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 12px;
  flex-wrap: wrap;
}
.p-tier-badge { height: 46px; width: auto; flex: none; filter: drop-shadow(0 4px 12px rgba(0,0,0,.6)); }
.p-tier-name {
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 700;
  color: var(--tier);
}
.p-tier-perk { font-size: 13px; color: var(--fg-3); }

/* totals strip */
.profile-totals {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  border: 1px solid var(--line);
  border-radius: var(--r);
  margin-top: 26px;
  background: rgba(255, 255, 255, 0.02);
  overflow: hidden;
}
.profile-totals > div {
  padding: 18px 12px;
  text-align: center;
  border-right: 1px solid var(--line);
}
.profile-totals > div:last-child { border-right: 0; }
.profile-totals b {
  display: block;
  font-family: var(--font-display);
  font-size: 23px;
  font-variant-numeric: tabular-nums;
}
.profile-totals span {
  font-size: 10.5px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--fg-3);
}
@media (max-width: 760px) {
  .profile-totals { grid-template-columns: repeat(3, 1fr); }
  /* With 5 items on a 3-wide grid the last row is short; the trailing
     border on the middle cell would otherwise hang in open space. */
  .profile-totals > div:nth-child(3n) { border-right: 0; }
  .profile-totals > div:nth-child(n+4) { border-top: 1px solid var(--line); }
}
@media (max-width: 460px) {
  .profile-totals { grid-template-columns: repeat(2, 1fr); }
  .profile-totals > div:nth-child(3n) { border-right: 1px solid var(--line); }
  .profile-totals > div:nth-child(2n) { border-right: 0; }
  .profile-totals > div:nth-child(n+3) { border-top: 1px solid var(--line); }
}

/* character cards */
.char-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(310px, 1fr));
  gap: 16px;
}
.char-card { padding: 20px; }

.char-head { display: flex; align-items: center; gap: 13px; }
.char-av {
  width: 44px; height: 44px;
  border-radius: 12px;
  flex: none;
  display: grid;
  place-content: center;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 15px;
  color: var(--ac-soft);
  background: linear-gradient(145deg, var(--ac2), var(--ac-deep));
  border: 1px solid rgba(249, 115, 22, 0.35);
}
.char-id { min-width: 0; flex: 1; }
.char-id b {
  display: block;
  font-size: 16px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.char-cid {
  font-size: 11.5px;
  color: var(--fg-3);
  font-family: ui-monospace, Menlo, Consolas, monospace;
  letter-spacing: 0.04em;
}
.char-slot {
  flex: none;
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fg-3);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 4px 9px;
}
.char-slot i { font-style: normal; color: var(--ac); font-weight: 700; }

.char-job {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 15px;
  flex-wrap: wrap;
}
.char-job-name {
  font-size: 13.5px;
  font-weight: 600;
  padding: 4px 11px;
  border-radius: 999px;
  background: rgba(249, 115, 22, 0.12);
  border: 1px solid rgba(249, 115, 22, 0.3);
  color: var(--ac-soft);
}
.char-job-grade { font-size: 12.5px; color: var(--fg-3); }

.char-money {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 16px;
}
.char-money > div {
  padding: 11px 13px;
  border-radius: var(--r-sm);
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid var(--line);
}
.char-money span {
  display: block;
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg-3);
}
.char-money b {
  font-family: var(--font-display);
  font-size: 17px;
  font-variant-numeric: tabular-nums;
}

.char-facts {
  list-style: none;
  margin: 16px 0 0;
  padding: 14px 0 0;
  border-top: 1px solid var(--line);
  display: grid;
  gap: 7px;
}
.char-facts li {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 12.5px;
  color: var(--fg-2);
}
.char-facts svg { flex: none; color: var(--fg-3); }

.profile-empty { max-width: 620px; margin: 40px auto 0; }

/* =====================================================================
   STAFF PANEL
   ===================================================================== */
.admin-main { padding: 46px 0 90px; position: relative; z-index: 1; }
.admin-gate { max-width: 560px; margin: 70px auto; }
.gate-lock {
  width: 62px; height: 62px;
  margin: 0 auto 18px;
  border-radius: 50%;
  display: grid; place-content: center;
  color: var(--ac);
  border: 1px solid rgba(249, 115, 22, 0.35);
  background: rgba(249, 115, 22, 0.09);
}

.admin-tabs {
  display: flex;
  gap: 6px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 22px;
  overflow-x: auto;
}
.admin-tab-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 18px;
  border: 0;
  background: none;
  color: var(--fg-3);
  font-size: 14px;
  font-weight: 600;
  border-bottom: 2px solid transparent;
  white-space: nowrap;
  transition: color 0.16s var(--ease), border-color 0.16s var(--ease);
}
.admin-tab-btn:hover { color: var(--fg-2); }
.admin-tab-btn.active { color: var(--ac); border-bottom-color: var(--ac); }

.admin-main .card { padding: 24px; margin-bottom: 18px; }
.admin-main .card h2 { font-family: var(--font-display); font-size: 19px; margin-bottom: 6px; }
.admin-main .card h3.sub {
  font-family: var(--font-display);
  font-size: 15px;
  margin: 26px 0 12px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
}
.admin-main .hint { font-size: 13.5px; color: var(--fg-3); margin-bottom: 18px; }
.admin-main .empty { font-size: 14px; color: var(--fg-3); }

.admin-main label {
  display: block;
  font-size: 12px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--fg-3);
  margin-bottom: 6px;
}
.admin-main input[type=text], .admin-main input[type=url], .admin-main select {
  width: 100%;
  padding: 11px 14px;
  border-radius: var(--r-sm);
  border: 1px solid var(--line);
  background: rgba(0, 0, 0, .35);
  color: var(--fg);
  font: inherit;
  font-size: 14px;
}
.admin-main input:focus, .admin-main select:focus { outline: none; border-color: var(--ac); }
.admin-main .row { display: grid; gap: 12px; margin-bottom: 14px; }
.admin-main .row-2 { grid-template-columns: 1fr 1fr; }
.admin-main .row-3 { grid-template-columns: 1fr 1fr 1fr; }
@media (max-width: 680px) { .admin-main .row-2, .admin-main .row-3 { grid-template-columns: 1fr; } }
.admin-main .actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 18px; }

.list-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 13px 15px;
  border: 1px solid var(--line);
  border-radius: var(--r);
  margin-bottom: 9px;
  background: rgba(255, 255, 255, .02);
}
.list-item.active { border-color: var(--ac); background: rgba(249, 115, 22, .09); }
.li-main b { font-size: 14.5px; display: block; }
.li-main > span { display: block; font-size: 12px; color: var(--fg-3); }
.li-acts { display: flex; gap: 7px; }

.perm-chips { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 6px; }
.perm-chip {
  font-style: normal;
  font-size: 10.5px;
  padding: 3px 8px;
  border-radius: 999px;
  background: rgba(249, 115, 22, .12);
  border: 1px solid rgba(249, 115, 22, .28);
  color: var(--ac-soft);
  font-family: ui-monospace, Menlo, Consolas, monospace;
}

.perm-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 10px;
  margin-bottom: 6px;
}
.perm-item {
  display: flex !important;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: rgba(0, 0, 0, .25);
  cursor: pointer;
  text-transform: none !important;
  letter-spacing: normal !important;
  margin: 0 !important;
}
.perm-item:hover { border-color: rgba(249, 115, 22, .4); }
.perm-item.is-off { opacity: .45; cursor: not-allowed; }
.perm-item input { margin-top: 3px; accent-color: var(--ac); flex: none; }
.perm-item b {
  display: block;
  font-size: 12.5px;
  color: var(--ac-soft);
  font-family: ui-monospace, Menlo, Consolas, monospace;
}
.perm-item i {
  font-style: normal;
  display: block;
  font-size: 12px;
  color: var(--fg-3);
  margin-top: 3px;
  text-transform: none;
  letter-spacing: normal;
}

/* =====================================================================
   WHITELIST APPLICATION
   ===================================================================== */
.apply-main { padding: 46px 0 90px; position: relative; z-index: 1; }
.wrap-narrow { max-width: 780px; }

.apply-state { padding: 24px; margin-bottom: 22px; }
.apply-state-body { display: flex; gap: 18px; align-items: flex-start; }
.apply-state-icon {
  width: 54px; height: 54px;
  flex: none;
  border-radius: 15px;
  display: grid; place-content: center;
  color: var(--ac);
  border: 1px solid rgba(249, 115, 22, .35);
  background: rgba(249, 115, 22, .1);
}
.apply-state h2 { font-family: var(--font-display); font-size: 20px; margin-bottom: 8px; }
.apply-state p { font-size: 14.5px; color: var(--fg-2); }

.apply-credits {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
  padding: 18px 22px;
  border: 1px solid rgba(249, 115, 22, .3);
  border-radius: var(--r);
  background: linear-gradient(90deg, rgba(249, 115, 22, .1), transparent 70%);
  margin-bottom: 26px;
}
.apply-credits > div { text-align: center; flex: none; }
.apply-credits b {
  display: block;
  font-family: var(--font-display);
  font-size: 32px;
  color: var(--ac);
  font-variant-numeric: tabular-nums;
}
.apply-credits span {
  font-size: 10.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--fg-3);
}
.apply-credits p { font-size: 13.5px; color: var(--fg-2); flex: 1; min-width: 220px; }

.apply-q { margin-bottom: 24px; }
.apply-q label {
  display: flex;
  align-items: baseline;
  gap: 10px;
  font-size: 15px;
  font-weight: 600;
  margin-bottom: 5px;
}
.apply-q .q-opt {
  font-style: normal;
  font-size: 10.5px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--fg-3);
}
.apply-q .q-hint { font-size: 13px; color: var(--fg-3); margin-bottom: 9px; }
.apply-q input, .apply-q textarea, .apply-q select {
  width: 100%;
  padding: 12px 15px;
  border-radius: var(--r-sm);
  border: 1px solid var(--line);
  background: rgba(0, 0, 0, .35);
  color: var(--fg);
  font: inherit;
  font-size: 14.5px;
  line-height: 1.6;
  resize: vertical;
}
.apply-q input:focus, .apply-q textarea:focus, .apply-q select:focus {
  outline: none; border-color: var(--ac);
}
.q-count {
  margin-top: 6px;
  font-size: 12px;
  color: var(--fg-3);
  font-variant-numeric: tabular-nums;
  text-align: right;
}
.q-count.is-ok { color: var(--good); }

.apply-submit {
  margin-top: 30px;
  padding-top: 22px;
  border-top: 1px solid var(--line);
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
}
.apply-submit .qs-hint { flex: 1; min-width: 240px; margin: 0; }

.apply-h2 { font-family: var(--font-display); font-size: 20px; margin: 38px 0 14px; }
.apply-hist {
  display: grid;
  grid-template-columns: 110px 190px minmax(0, 1fr);
  gap: 14px;
  align-items: baseline;
  padding: 11px 14px;
  border: 1px solid var(--line);
  border-left: 3px solid var(--fg-3);
  border-radius: var(--r-sm);
  margin-bottom: 8px;
  font-size: 13px;
}
.apply-hist.approved { border-left-color: var(--good); }
.apply-hist.denied   { border-left-color: var(--live); }
.apply-hist.pending  { border-left-color: var(--warn); }
.ah-status { text-transform: uppercase; letter-spacing: .12em; font-size: 10.5px; font-weight: 700; }
.apply-hist.approved .ah-status { color: var(--good); }
.apply-hist.denied   .ah-status { color: #fca5a5; }
.apply-hist.pending  .ah-status { color: var(--warn); }
.ah-date { color: var(--fg-3); font-size: 12px; }
.ah-note { color: var(--fg-2); }
@media (max-width: 640px) { .apply-hist { grid-template-columns: 1fr; gap: 3px; } }

/* --- tier grants editor --------------------------------------------- */
.tier-edit {
  --tier: var(--ac);
  padding: 18px;
  border: 1px solid var(--line);
  border-left: 3px solid var(--tier);
  border-radius: var(--r);
  margin-bottom: 14px;
  background: rgba(255, 255, 255, .02);
}
.tier-edit-head { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; }
.tier-edit-head img { height: 46px; width: auto; flex: none; }
.tier-edit-head b {
  display: block;
  font-family: var(--font-display);
  font-size: 18px;
  color: var(--tier);
}
.tier-edit-head span {
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--fg-3);
}
.tier-edit-fields {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 12px;
}
.tier-edit-app {
  display: flex !important;
  align-items: flex-start;
  gap: 9px;
  margin: 14px 0 0 !important;
  padding: 11px 13px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: rgba(0, 0, 0, .28);
  cursor: pointer;
  text-transform: none !important;
  letter-spacing: normal !important;
  font-size: 13px;
  color: var(--fg-2);
}
.tier-edit-app input { accent-color: var(--ac); margin-top: 2px; flex: none; }
.tier-edit-app i { font-style: normal; color: var(--fg-3); }
.tier-edit-perks { margin-top: 14px; }
.tier-edit-perks textarea {
  width: 100%;
  padding: 11px 14px;
  border-radius: var(--r-sm);
  border: 1px solid var(--line);
  background: rgba(0, 0, 0, .35);
  color: var(--fg);
  font: inherit;
  font-size: 13.5px;
  resize: vertical;
}
.tier-edit-perks textarea:focus { outline: none; border-color: var(--ac); }

.audit-row {
  display: grid;
  grid-template-columns: 150px 120px minmax(0, 1fr);
  gap: 12px;
  padding: 9px 0;
  border-bottom: 1px solid var(--line);
  font-size: 12.5px;
  align-items: baseline;
}
.audit-row code { color: var(--fg-3); font-size: 11.5px; }
.audit-row b { color: var(--ac); font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 12px; }
.audit-row span { color: var(--fg-2); word-break: break-word; }
@media (max-width: 700px) { .audit-row { grid-template-columns: 1fr; gap: 3px; } }

.toast {
  position: fixed;
  left: 50%; bottom: 26px;
  transform: translateX(-50%) translateY(90px);
  padding: 13px 22px;
  border-radius: 999px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
  font-size: 14px;
  z-index: 99;
  opacity: 0;
  transition: all .35s var(--ease);
  pointer-events: none;
}
.toast.show { transform: translateX(-50%) translateY(0); opacity: 1; }
.toast.ok  { border-color: rgba(52, 211, 153, .5); }
.toast.bad { border-color: rgba(239, 68, 68, .5); }

/* =====================================================================
   FOOTER
   ===================================================================== */
.site-footer {
  border-top: 1px solid var(--line);
  padding: 52px 0 40px;
  margin-top: 40px;
  background: linear-gradient(180deg, transparent, rgba(0, 0, 0, 0.45));
  position: relative;
  z-index: 1;
}
.footer-inner {
  display: flex;
  gap: 32px;
  align-items: flex-start;
  flex-wrap: wrap;
}
.footer-brand { display: flex; align-items: center; gap: 12px; }
.footer-brand img { height: 46px; }
.footer-blurb { font-size: 12.5px; color: var(--fg-3); max-width: 44ch; margin-top: 12px; }
.footer-links { display: flex; gap: 22px; flex-wrap: wrap; margin-left: auto; }
.footer-links a { font-size: 14px; color: var(--fg-2); }
.footer-links a:hover { color: var(--ac); }
.footer-bottom {
  margin-top: 34px;
  padding-top: 22px;
  border-top: 1px solid var(--line);
  display: flex;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  font-size: 12.5px;
  color: var(--fg-3);
}

/* Whitelist line on a tier card. The refusal is styled distinctly - a grey
   tick would read as a benefit at a glance. */
.tier-perks .perk-app svg { color: var(--tier); }
.tier-perks .perk-no      { opacity: .72; }
.tier-perks .perk-no svg  { color: var(--fg-3); }
.tier-perks .perk-no span { color: var(--fg-3); }

/* --- application review cards --------------------------------------- */
.app-card {
  padding: 18px;
  border: 1px solid var(--line);
  border-left: 3px solid var(--warn);
  border-radius: var(--r);
  margin-bottom: 14px;
  background: rgba(255, 255, 255, .02);
}
.app-card.approved { border-left-color: var(--good); }
.app-card.denied   { border-left-color: var(--live); }
.app-head { display: flex; align-items: flex-start; gap: 14px; margin-bottom: 14px; }
.app-head b { display: block; font-size: 15.5px; }
.app-meta { display: block; font-size: 11.5px; color: var(--fg-3); font-family: ui-monospace, Menlo, Consolas, monospace; }
.app-status {
  margin-left: auto; flex: none;
  font-size: 10px; font-weight: 700; letter-spacing: .13em; text-transform: uppercase;
  padding: 4px 10px; border-radius: 999px;
  border: 1px solid var(--line); color: var(--fg-3);
}
.app-card.approved .app-status { color: var(--good); border-color: rgba(52,211,153,.4); }
.app-card.denied   .app-status { color: #fca5a5; border-color: rgba(239,68,68,.4); }
.app-card.pending  .app-status { color: var(--warn); border-color: rgba(245,158,11,.4); }
.app-answers { display: grid; gap: 12px; }
.app-a label {
  display: block; font-size: 11px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ac); margin-bottom: 3px;
}
.app-a p { font-size: 13.5px; color: var(--fg-2); line-height: 1.6; white-space: pre-wrap; }
.app-a-orphan label { color: var(--fg-3); }
.app-actions {
  display: flex; gap: 9px; align-items: center; flex-wrap: wrap;
  margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line);
}
.app-actions input { flex: 1; min-width: 220px; }
.app-note { font-size: 13px; color: var(--fg-3); }

/* Draft autosave indicator. Quiet by default - it is reassurance, not news. */
.ap-saved {
  font-size: 12px;
  color: var(--fg-3);
  flex: none;
  transition: color .2s var(--ease);
}
.ap-saved.is-ok   { color: var(--good); }
.ap-saved.is-warn { color: var(--warn); }

/* =====================================================================
   COIN SHOP
   ===================================================================== */
.coin-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 14px;
}
.coin-card {
  padding: 24px 20px 20px;
  text-align: center;
  display: flex;
  flex-direction: column;
  transition: transform .28s var(--ease), border-color .28s var(--ease);
}
.coin-card:hover { transform: translateY(-5px); border-color: rgba(251,191,36,.45); }
.coin-card.is-popular { border-color: rgba(249,115,22,.45); }
.coin-card.is-best {
  border-color: rgba(251,191,36,.5);
  box-shadow: var(--shadow), 0 0 46px -18px var(--gold);
}
.coin-card .tier-flag.is-best { background: var(--gold); }

.coin-amount b {
  display: block;
  font-family: var(--font-display);
  font-size: 34px;
  font-weight: 700;
  color: var(--gold);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.coin-amount span {
  font-size: 10.5px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--fg-3);
}
.coin-bonus {
  margin: 12px auto 0;
  padding: 4px 11px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .06em;
  color: var(--good);
  background: rgba(52,211,153,.12);
  border: 1px solid rgba(52,211,153,.3);
  display: inline-block;
}
/* The starter rung gets no green badge - there is no bonus to claim, and a
   green pill saying "Starter" would read as one. */
.coin-bonus.is-base {
  color: var(--fg-3);
  background: rgba(255,255,255,.04);
  border-color: var(--line);
}
.coin-price {
  margin-top: 16px;
  font-family: var(--font-display);
  font-size: 23px;
  font-weight: 700;
}
.coin-rate {
  font-size: 11.5px;
  color: var(--fg-3);
  margin-top: 3px;
  font-variant-numeric: tabular-nums;
  flex: 1;
}
.coin-card .btn { margin-top: 16px; }

/* --- price row editor ------------------------------------------------ */
.price-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 14px;
  align-items: end;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: var(--r);
  margin-bottom: 10px;
  background: rgba(255, 255, 255, .02);
}
.price-fields {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 10px;
}
.price-side { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
/* The live-Tebex check. Colour carries the meaning, so the words repeat it -
   a red pill alone does not say WHAT is wrong. */
.price-check {
  font-size: 11.5px;
  color: var(--fg-3);
  text-align: right;
  max-width: 220px;
}
.price-check.is-ok  { color: var(--good); }
.price-check.is-bad { color: var(--warn); }
@media (max-width: 700px) {
  .price-row { grid-template-columns: 1fr; }
  .price-side { align-items: stretch; }
  .price-check { text-align: left; max-width: none; }
}
.tier-edit-head [data-del] { margin-left: auto; flex: none; }

/* --- the Ash Coin ---------------------------------------------------- */
/* Sized on WIDTH with height:auto, plus align-self to stop the stretch.
   .tile and .coin-card are both flex COLUMNS, so a flex item with width:auto
   is stretched to the full column width - and with a fixed height that turned
   the coin into a flat ellipse. */
.coin-face {
  width: 72px;
  height: auto;
  align-self: center;
  margin: 0 auto 14px;
  display: block;
  filter: drop-shadow(0 8px 18px rgba(0, 0, 0, .65));
  transition: transform .45s var(--ease), filter .45s var(--ease);
}
.coin-card:hover .coin-face {
  /* A slight tilt rather than a spin: it is a coin catching the light, not
     a loading spinner. */
  transform: translateY(-3px) rotate(-6deg) scale(1.06);
  filter: drop-shadow(0 12px 24px rgba(0, 0, 0, .7))
          drop-shadow(0 0 20px rgba(249, 115, 22, .55));
}
.tile-coin {
  width: 52px;
  height: auto;
  align-self: flex-start;
  margin-bottom: 16px;
  filter: drop-shadow(0 6px 14px rgba(0, 0, 0, .6));
  transition: transform .4s var(--ease);
}
.tile:hover .tile-coin { transform: rotate(-8deg) scale(1.07); }

@media (prefers-reduced-motion: reduce) {
  .coin-card:hover .coin-face, .tile:hover .tile-coin { transform: none; }
}


/* =====================================================================
   Ledger  (staff panel)
   ---------------------------------------------------------------------
   Money in is the easy half and Tebex already shows it. What this view is
   for is the other half: did the thing they paid for actually arrive. So
   state is encoded in COLOUR AND SHAPE, not only in a word - a row that
   needs acting on has to be findable by scrolling, not by reading.
   ===================================================================== */

.ledger-summary {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px;
  margin: 16px 0 18px;
}
.led-stat {
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  padding: 13px 15px;
}
.led-stat b {
  display: block;
  font-family: var(--font-display);
  font-size: 24px;
  line-height: 1.1;
  color: var(--fg);
  font-variant-numeric: tabular-nums;
}
.led-stat span {
  display: block;
  margin-top: 3px;
  font-size: 11px;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--fg-3);
}
.led-stat.is-bad { border-color: rgba(245, 158, 11, .45); background: rgba(245, 158, 11, .07); }
.led-stat.is-bad b { color: var(--warn); }

.ledger-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 6px;
}
.ledger-filters { display: flex; gap: 7px; flex-wrap: wrap; }

.chip {
  font: inherit;
  font-size: 12.5px;
  padding: 6px 13px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--fg-2);
  cursor: pointer;
  transition: border-color .15s, color .15s, background .15s;
}
.chip:hover  { color: var(--fg); border-color: var(--line-soft); }
.chip.active { color: var(--ac); border-color: var(--ac); background: rgba(249, 115, 22, .1); }
.chip:focus-visible { outline: 2px solid var(--ac); outline-offset: 2px; }

.led-row {
  display: grid;
  grid-template-columns: 92px minmax(120px, 1.1fr) minmax(140px, 1.4fr) 96px minmax(150px, 1fr);
  gap: 12px;
  align-items: center;
  padding: 11px 13px;
  border: 1px solid var(--line);
  border-left: 3px solid var(--line);
  border-radius: var(--r-sm);
  margin-bottom: 7px;
  font-size: 13px;
}
.led-row.attention { border-left-color: var(--warn); background: rgba(245, 158, 11, .05); }
.led-row.ok        { border-left-color: var(--good); }
.led-row.none      { border-left-color: var(--line-soft); }

.led-when b, .led-who b { display: block; color: var(--fg); font-size: 13px; }
.led-when span, .led-who span {
  display: block;
  color: var(--fg-3);
  font-size: 11.5px;
  word-break: break-all;
}
.led-when b { font-variant-numeric: tabular-nums; }
.led-what { color: var(--fg-2); }
.led-amt  {
  font-family: var(--font-display);
  font-size: 15px;
  color: var(--fg);
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.led-pill {
  display: inline-block;
  font-size: 10.5px;
  letter-spacing: .07em;
  text-transform: uppercase;
  padding: 3px 9px;
  border-radius: 999px;
  border: 1px solid var(--line-soft);
  color: var(--fg-3);
}
.led-row.attention .led-pill { color: var(--warn); border-color: rgba(245, 158, 11, .45); }
.led-row.ok        .led-pill { color: var(--good); border-color: rgba(52, 211, 153, .38); }
.led-state small { display: block; margin-top: 4px; color: var(--fg-3); font-size: 11.5px; }

@media (max-width: 900px) {
  .led-row { grid-template-columns: 1fr 1fr; gap: 8px; }
  .led-amt { text-align: left; }
  .led-state { grid-column: 1 / -1; }
}

/* =====================================================================
   Tebex setup checklist  (staff panel -> Pricing)
   ---------------------------------------------------------------------
   Tebex has no API for creating packages, so this is a to-do list that
   ticks itself off: what the site needs, checked against the real store.
   State reads from the marker glyph and the left edge, so progress is
   visible while scrolling rather than only on reading.
   ===================================================================== */

.setup-progress { margin: 14px 0 16px; }

.setup-bar {
  height: 6px;
  border-radius: 999px;
  background: var(--bg-2);
  border: 1px solid var(--line);
  overflow: hidden;
}
.setup-bar i {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--ac), #fb923c);
  transition: width .5s var(--ease);
}
.setup-count {
  margin: 8px 0 0;
  font-size: 12.5px;
  color: var(--fg-3);
}

.setup-row {
  display: grid;
  grid-template-columns: 26px 1fr 84px auto;
  gap: 12px;
  align-items: center;
  padding: 11px 13px;
  border: 1px solid var(--line);
  border-left: 3px solid var(--line);
  border-radius: var(--r-sm);
  margin-bottom: 7px;
}
.setup-row.ok       { border-left-color: var(--good); }
.setup-row.missing  { border-left-color: var(--ac); }
.setup-row.mismatch { border-left-color: var(--warn); background: rgba(245, 158, 11, .05); }
.setup-row.broken   { border-left-color: var(--live); background: rgba(239, 68, 68, .06); }

.setup-mark {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 1px solid var(--line-soft);
  font-size: 13px;
  font-weight: 700;
  color: var(--fg-3);
}
.setup-row.ok       .setup-mark { color: var(--good); border-color: rgba(52, 211, 153, .45); }
.setup-row.missing  .setup-mark { color: var(--ac);   border-color: rgba(249, 115, 22, .5); }
.setup-row.mismatch .setup-mark { color: var(--warn); border-color: rgba(245, 158, 11, .5); }
.setup-row.broken   .setup-mark { color: var(--live); border-color: rgba(239, 68, 68, .5); }

.setup-main b {
  display: block;
  font-family: ui-monospace, Menlo, Consolas, monospace;
  font-size: 13px;
  color: var(--fg);
  word-break: break-word;
}
.setup-why, .setup-msg { display: block; font-size: 11.5px; }
.setup-why { color: var(--fg-3); margin-top: 2px; }
.setup-msg { color: var(--fg-2); margin-top: 3px; }
.setup-row.mismatch .setup-msg { color: var(--warn); }
.setup-row.broken   .setup-msg { color: var(--live); }

.setup-price {
  font-family: var(--font-display);
  font-size: 15px;
  color: var(--fg);
  font-variant-numeric: tabular-nums;
  text-align: right;
}
.setup-acts { display: flex; gap: 6px; flex-wrap: wrap; }

@media (max-width: 780px) {
  .setup-row { grid-template-columns: 26px 1fr; }
  .setup-price { grid-column: 2; text-align: left; }
  .setup-acts  { grid-column: 2; }
}

/* =====================================================================
   Tebex-owned pricing + guided setup
   ---------------------------------------------------------------------
   The live price sits where an editable field used to. It is styled AS a
   field, not as a note, because it is the row's real price - the thing a
   buyer is charged - and burying it in small print is how the site ended
   up advertising $6.99 for a $30 package.
   ===================================================================== */

.live-price label {
  display: block;
  margin-bottom: 5px;
  font-size: 11px;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--fg-3);
}
.live-price .lp-val {
  display: flex;
  align-items: center;
  gap: 7px;
  min-height: 38px;
  padding: 0 11px;
  border: 1px dashed var(--line-soft);
  border-radius: var(--r-sm);
  background: rgba(52, 211, 153, .06);
  font-family: var(--font-display);
  font-size: 15px;
  color: var(--good);
  font-variant-numeric: tabular-nums;
}
.live-price.is-none .lp-val {
  background: transparent;
  color: var(--fg-3);
  font-family: var(--font-ui);
  font-size: 13px;
}
.lp-sale {
  font-family: var(--font-ui);
  font-size: 10px;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: 2px 7px;
  border-radius: 999px;
  border: 1px solid rgba(249, 115, 22, .5);
  color: var(--ac);
}

/* ---- guided setup ---- */

.guide { border-color: var(--line-soft); }
.guide-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.guide-head h2 { margin: 0; }

.guide-steps {
  counter-reset: gstep;
  list-style: none;
  margin: 18px 0 0;
  padding: 0;
}
.guide-step {
  counter-increment: gstep;
  position: relative;
  padding: 0 0 24px 46px;
  border-left: 1px solid var(--line);
  margin-left: 14px;
}
.guide-step:last-child { border-left-color: transparent; padding-bottom: 0; }
.guide-step::before {
  content: counter(gstep);
  position: absolute;
  left: -15px;
  top: 0;
  display: grid;
  place-items: center;
  width: 29px;
  height: 29px;
  border-radius: 50%;
  background: var(--bg-2);
  border: 1px solid var(--ac);
  color: var(--ac);
  font-family: var(--font-display);
  font-size: 13px;
}
.guide-step h3 {
  margin: 3px 0 0;
  font-size: 16px;
  color: var(--fg);
}
.guide-body p {
  margin: 8px 0 0;
  font-size: 13.5px;
  line-height: 1.62;
  color: var(--fg-2);
  max-width: 68ch;
}
.guide-note {
  margin-top: 14px !important;
  font-size: 11px !important;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--fg-3) !important;
}
.guide-done {
  color: var(--good) !important;
  font-size: 13px !important;
}

.guide-pkg {
  display: flex;
  align-items: center;
  gap: 11px;
  flex-wrap: wrap;
  padding: 9px 12px;
  margin-top: 7px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--bg-2);
}
.guide-pkg code {
  font-family: ui-monospace, Menlo, Consolas, monospace;
  font-size: 13px;
  color: var(--ac);
}
.guide-pkg span {
  flex: 1 1 200px;
  font-size: 12.5px;
  color: var(--fg-3);
}

@media (max-width: 620px) {
  .guide-step { padding-left: 34px; }
  .guide-body p { font-size: 13px; }
}