/* Typical Server — production styles
   Ported 1:1 from the Claude Design prototype (Typical Server.dc.html) */

:root {
  --bg: #08070f;
  --bg-footer: #0b0918;
  --card: #120f26;
  --card-dark: #0d0b1e;
  --text: #e8e6f5;
  --text-dim: #a5a1c4;
  --text-mute: #6f6a95;
  --border: rgba(232, 230, 245, .09);
  --border-strong: rgba(232, 230, 245, .16);
  --cyan: #3ec8e8;
  --pink: #f45fb0;
  --discord: #5865F2;
  --green: #4ade80;
  --orange: #ffb35c;
}

* { box-sizing: border-box; }

/* The browser's own rule for [hidden] is display:none, but it comes from
   the UA stylesheet and ANY author rule beats it. So `.ranks-grid
   { display: grid }` plus `el.hidden = true` leaves the element on
   screen — hidden in the markup, visible to the person looking at it.
   Stated here once, with !important, so that never happens again. */
[hidden] { display: none !important; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--text);
  font-family: 'Barlow', system-ui, sans-serif;
  min-height: 100%;
}

body { overflow-x: hidden; }

a { color: var(--cyan); text-decoration: none; }
a:hover { color: var(--pink); }
::selection { background: var(--pink); color: #fff; }
input, textarea, select, button { font-family: 'Barlow', system-ui, sans-serif; }
button { font: inherit; }
img { max-width: 100%; display: block; }

.heading { font-family: 'Chakra Petch', sans-serif; font-weight: 700; text-transform: uppercase; }
.heading-i { font-family: 'Chakra Petch', sans-serif; font-style: italic; font-weight: 700; text-transform: uppercase; }

.wrap { max-width: 1240px; margin: 0 auto; padding: 0 28px; }
.wrap-wide { max-width: 1420px; margin: 0 auto; padding: 0 28px; }
.wrap-narrow { max-width: 900px; margin: 0 auto; padding: 0 28px; }

.hidden { display: none !important; }

/* ---------- Header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(11, 9, 24, .92);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(62, 200, 232, .18);
  transition: transform .28s ease;
}
.site-header.header-hidden { transform: translateY(-100%); }
.site-header-inner {
  max-width: 1240px; margin: 0 auto; padding: 12px 28px;
  min-height: 76px; box-sizing: border-box;
  display: flex; align-items: center; flex-wrap: wrap; gap: 16px 28px;
}
.logo-btn { height: 52px; width: auto; cursor: pointer; border: none; background: none; padding: 0; }
.logo-btn img { height: 52px; width: auto; }

.nav-toggle { display: none; }
/* The account button lives OUTSIDE .site-nav-panel in the markup so that
   collapsing the menu on mobile cannot take it with it. That puts it
   ahead of the nav links in DOM order, so desktop order is restored
   explicitly here rather than left to source order. */
.site-nav-panel { order: 1; display: flex; align-items: center; flex: 1; flex-wrap: wrap; gap: 16px 28px; }
.site-header-inner > .header-actions { order: 2; }
.site-nav-panel .nav-discord-mobile { display: none; }

.main-nav { display: flex; gap: 4px; margin-left: 8px; flex-wrap: wrap; }
.nav-link {
  background: none; border: none; padding: 9px 14px; border-radius: 6px; cursor: pointer;
  font-family: 'Chakra Petch', sans-serif; font-weight: 600; font-size: 13.5px; letter-spacing: .06em;
  text-transform: uppercase; color: var(--text-dim);
}
.nav-link:hover { color: #fff; background: rgba(62, 200, 232, .12); }
.nav-link.active { background: rgba(62, 200, 232, .14); color: var(--cyan); }

.header-actions { margin-left: auto; display: flex; align-items: center; gap: 12px; }
.btn-login {
  background: none; border: 1px solid rgba(232, 230, 245, .22); color: var(--text);
  font-family: 'Chakra Petch', sans-serif; font-weight: 600; font-size: 13px; letter-spacing: .08em;
  text-transform: uppercase; padding: 10px 18px; border-radius: 6px; cursor: pointer;
}
.btn-login:hover { border-color: var(--cyan); color: var(--cyan); }
.btn-discord {
  display: inline-flex; align-items: center; justify-content: center; text-align: center;
  background: var(--cyan); color: var(--bg); font-family: 'Chakra Petch', sans-serif; font-weight: 700;
  font-size: 13px; letter-spacing: .08em; text-transform: uppercase; padding: 11px 20px; border-radius: 6px;
}
.btn-discord:hover { background: var(--pink); color: #fff; }

/* ---------- Buttons (generic) ---------- */
.btn-solid-pink {
  display: inline-flex; align-items: center; justify-content: center; text-align: center;
  background: var(--pink); color: #fff; font-family: 'Chakra Petch', sans-serif; font-weight: 700;
  font-size: 14px; letter-spacing: .09em; text-transform: uppercase; padding: 15px 30px; border-radius: 7px;
  border: none; cursor: pointer;
}
.btn-solid-pink:hover { background: var(--cyan); color: var(--bg); }
.btn-outline {
  display: inline-flex; align-items: center; justify-content: center; text-align: center;
  border: 1px solid rgba(232, 230, 245, .25); color: var(--text); font-family: 'Chakra Petch', sans-serif;
  font-weight: 700; font-size: 14px; letter-spacing: .09em; text-transform: uppercase; padding: 15px 30px;
  border-radius: 7px; background: none; cursor: pointer;
}
.btn-outline:hover { border-color: var(--cyan); color: var(--cyan); }
/* .sm keeps paired hero buttons the same compact height as each other —
   the full-size padding reads as stretched when two sit side by side. */
.btn-outline.sm, .btn-solid-pink.sm { font-size: 13px; padding: 13px 22px; border-radius: 7px; }
.btn-discord-solid {
  display: inline-flex; align-items: center; justify-content: center; text-align: center;
  background: var(--discord); color: #fff; font-family: 'Chakra Petch', sans-serif; font-weight: 700;
  font-size: 15px; letter-spacing: .08em; text-transform: uppercase; padding: 17px 34px; border-radius: 8px;
  white-space: nowrap;
}
.btn-discord-solid:hover { background: var(--pink); }
.btn-discord-solid.sm { font-size: 13px; padding: 13px 22px; border-radius: 7px; }

/* ---------- Hero ---------- */
.hero {
  position: relative; border-bottom: 1px solid rgba(62, 200, 232, .14); overflow: hidden;
}
/* Explicit stacking order for the hero layers. Without this, any hero
   content block that isn't itself positioned falls BEHIND the absolutely
   positioned scrim — which both dims the text and eats clicks on the
   buttons. Content is pinned to the top layer so that can't happen again. */
.hero-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .16; z-index: 0; }
/* Animated constellation layer — drawn by initHeroCanvas() in app.js.
   Sits between the photo and the scrim so the text stays readable.
   Pointer-events stay off; the interaction is tracked on .hero itself. */
.hero-canvas { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; opacity: .9; z-index: 1; }
.hero-scrim {
  position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: linear-gradient(180deg, rgba(8, 7, 15, .4) 0%, rgba(8, 7, 15, .92) 100%);
}
.hero-content, .mc-hero-content, .hero-breadcrumb { position: relative; z-index: 3; }
.hero-content { padding: 72px 28px 64px; }
.hero-title { font-size: 60px; line-height: 1.02; letter-spacing: -.02em; margin: 0; }
.hero-title .pink { color: var(--pink); }
.hero-title .cyan { color: var(--cyan); }
.hero-sub { font-size: 19px; line-height: 1.6; color: var(--text-dim); max-width: 520px; margin: 20px 0 0; }
.hero-actions { display: flex; gap: 12px; margin-top: 30px; flex-wrap: wrap; align-items: center; }

.ip-box {
  background: var(--card-dark); border: 1px dashed rgba(62, 200, 232, .35); border-radius: 7px;
  padding: 8px 8px 8px 18px; display: flex; align-items: center; gap: 16px;
}
.ip-label { font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--text-mute); font-weight: 600; }
.ip-value { font-family: 'Chakra Petch', monospace; font-weight: 700; font-size: 16px; color: #fff; }
.ip-copy {
  background: rgba(62, 200, 232, .14); border: 1px solid rgba(62, 200, 232, .4); color: var(--cyan);
  font-family: 'Chakra Petch', sans-serif; font-weight: 700; font-size: 12px; letter-spacing: .08em;
  text-transform: uppercase; padding: 10px 14px; border-radius: 6px; cursor: pointer; white-space: nowrap;
}
.ip-copy:hover { background: var(--cyan); color: var(--bg); }

/* ---------- Section headers ---------- */
.eyebrow { font-size: 12px; letter-spacing: .18em; text-transform: uppercase; color: var(--pink); font-weight: 600; }
.eyebrow.cyan { color: var(--cyan); }
.section-title { font-size: 40px; margin: 10px 0 0; letter-spacing: -.01em; }

/* ---------- Servers grid ---------- */
.servers-section { max-width: 1240px; margin: 0 auto; padding: 76px 28px 0; }
.servers-head {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap;
  margin-bottom: 32px;
}
.servers-head p { color: var(--text-dim); font-size: 16px; max-width: 420px; margin: 0; }
/* auto-fit (not auto-fill) collapses empty tracks so cards don't reserve
   room for siblings that don't exist; the 340px cap stops a small number
   of cards from stretching absurdly wide. Left-aligned to line up with the
   section heading above them. */
.servers-grid {
  display: grid; gap: 20px;
  grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 340px));
  justify-content: start;
}
.server-card {
  background: var(--card); border: 1px solid var(--border); border-radius: 14px; overflow: hidden;
  cursor: pointer; display: flex; flex-direction: column; text-align: left; padding: 0; color: inherit;
  width: 100%; font: inherit;
}
.server-card:hover { border-color: var(--cyan); }
.server-card.coming-soon { opacity: .85; }
.server-card.coming-soon:hover { border-color: var(--border-strong); opacity: 1; }
/* Coming-soon art stays greyed out — that's the whole point of the state.
   The lit panel behind it (below) is what keeps it from disappearing into
   flat black, so the artwork can be dimmed without becoming invisible. */
.server-card.coming-soon .server-card-img img { filter: grayscale(.85) brightness(.68); }
.server-card.coming-soon:hover .server-card-img img { filter: grayscale(.6) brightness(.82); }
/* Lit backdrop behind the artwork: a soft radial glow over a slightly
   raised surface, so logos with transparent backgrounds read as sitting
   on something instead of floating on flat black. */
.server-card-img {
  position: relative; height: 188px; overflow: hidden;
  background:
    radial-gradient(120% 100% at 50% 0%, rgba(62, 200, 232, .16) 0%, rgba(62, 200, 232, 0) 62%),
    radial-gradient(100% 90% at 50% 110%, rgba(244, 95, 176, .13) 0%, rgba(244, 95, 176, 0) 60%),
    linear-gradient(160deg, #191436 0%, #0f0c22 100%);
  border-bottom: 1px solid rgba(232, 230, 245, .07);
}
.server-card-img img {
  width: 100%; height: 100%; object-fit: contain; padding: 14px; box-sizing: border-box;
  position: relative; z-index: 1;
  filter: drop-shadow(0 6px 14px rgba(0, 0, 0, .45));
  transition: transform .3s ease;
}
.server-card:hover .server-card-img img { transform: scale(1.04); }
/* z-index 2 keeps the status pill above the artwork — the image sits at
   z-index 1 for its drop-shadow/hover-scale, which would otherwise cover
   the pill entirely. */
.pill {
  position: absolute; top: 12px; left: 12px; z-index: 2;
  font-family: 'Chakra Petch', sans-serif; font-weight: 700;
  font-size: 11px; letter-spacing: .12em; text-transform: uppercase; padding: 5px 10px; border-radius: 100px;
  backdrop-filter: blur(6px);
}
.pill.live { background: rgba(74, 222, 128, .16); color: var(--green); border: 1px solid rgba(74, 222, 128, .4); }
.pill.idle { background: rgba(8, 7, 15, .82); color: #b9b5d6; border: 1px solid rgba(232, 230, 245, .22); }
.server-card-body {
  padding: 20px; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px; flex: 1;
}
.server-card-body h3 { font-size: 21px; margin: 0; }
.server-card-body p { color: var(--text-dim); font-size: 14.5px; line-height: 1.55; margin: 0; flex: 1; }
/* Reads as a real button instead of loose text under the copy. Full-width
   inside the card so both cards' CTAs line up regardless of blurb length. */
.server-cta {
  font-family: 'Chakra Petch', sans-serif; font-weight: 700; font-size: 12.5px; letter-spacing: .1em;
  text-transform: uppercase; margin-top: 14px; color: var(--cyan);
  display: block; width: 100%; box-sizing: border-box; padding: 11px 14px; border-radius: 8px;
  background: rgba(62, 200, 232, .09); border: 1px solid rgba(62, 200, 232, .3);
  transition: background .2s ease, border-color .2s ease, color .2s ease;
}
.server-card:hover .server-cta { background: var(--cyan); border-color: var(--cyan); color: var(--bg); }
.server-cta.dim {
  color: var(--text-mute); background: rgba(232, 230, 245, .05); border-color: rgba(232, 230, 245, .14);
}
.server-card:hover .server-cta.dim {
  background: rgba(232, 230, 245, .1); border-color: rgba(232, 230, 245, .3); color: var(--text);
}

/* ---------- News + Store teaser ---------- */
.news-store {
  max-width: 1240px; margin: 0 auto; padding: 76px 28px 0;
  display: grid; grid-template-columns: 1.35fr .65fr; gap: 44px; align-items: start;
}
.news-col-title { font-size: 26px; margin: 6px 0 0; }
.news-list { display: flex; flex-direction: column; gap: 18px; margin-top: 24px; }
.news-card {
  background: var(--card); border: 1px solid var(--border); border-left: 3px solid var(--pink);
  border-radius: 0 12px 12px 0; padding: 22px 26px;
}
.news-meta { display: flex; align-items: center; gap: 12px; margin-bottom: 9px; }
.news-date { font-size: 11.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--text-mute); font-weight: 600; }
.news-tag { font-size: 11.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--cyan); font-weight: 600; }
.news-card h3 { font-size: 19px; margin: 0 0 8px; }
.news-card p { color: var(--text-dim); font-size: 15px; line-height: 1.6; margin: 0; }

.store-teaser-card {
  background: linear-gradient(160deg, #1c1740 0%, #120f26 100%);
  border: 1px solid rgba(244, 95, 176, .28); border-radius: 14px; padding: 30px; padding-bottom: 40px;
}
.store-teaser-card h3 { font-size: 26px; margin: 14px 0 0; }
.store-teaser-card > p { color: var(--text-dim); font-size: 14.5px; line-height: 1.55; margin: 14px 0 26px; }
.teaser-items { display: flex; flex-direction: column; gap: 12px; margin-bottom: 26px; }
.teaser-item {
  display: flex; align-items: center; gap: 12px; background: var(--card-dark);
  border: 1px solid rgba(232, 230, 245, .1); border-radius: 9px; padding: 14px 16px;
}
.teaser-item .arrow { color: var(--cyan); }
.teaser-item span:last-child { color: #c3c0dd; font-size: 14.5px; }
.btn-store {
  width: 100%; background: var(--pink); border: none; color: #fff; font-family: 'Chakra Petch', sans-serif;
  font-weight: 700; font-size: 15px; letter-spacing: .08em; text-transform: uppercase; padding: 15px;
  border-radius: 8px; cursor: pointer;
}
.btn-store:hover { background: var(--cyan); color: var(--bg); }

/* ---------- Discord banner ---------- */
.discord-banner-wrap { max-width: 1240px; margin: 76px auto 0; padding: 0 28px; }
.discord-banner {
  position: relative; border-radius: 16px; overflow: hidden; border: 1px solid rgba(62, 200, 232, .22);
}
.discord-banner-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .3; }
.discord-banner-scrim {
  position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(11, 9, 24, .96) 30%, rgba(11, 9, 24, .55) 100%);
}
.discord-banner-inner {
  position: relative; padding: 52px 48px; display: flex; align-items: center; justify-content: space-between;
  gap: 32px; flex-wrap: wrap;
}
.discord-banner-inner h2 { font-size: 34px; margin: 0 0 10px; }
.discord-banner-inner p { color: var(--text-dim); font-size: 16.5px; margin: 0; max-width: 520px; }

/* ---------- Generic page header ---------- */
.page-head { padding: 64px 28px 0; }
.page-head h1 { font-size: 46px; margin: 12px 0 14px; }
.page-head p { color: var(--text-dim); font-size: 17px; max-width: 620px; margin: 0 0 36px; }

/* ---------- Minecraft page ---------- */
.mc-hero-content { padding: 34px 28px 56px; }
.mc-hero-content h1 { font-size: 54px; margin: 0 0 14px; }
.mc-hero-content > p { color: #c3c0dd; font-size: 18px; line-height: 1.6; max-width: 620px; margin: 0 0 30px; }
.mc-actions { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.mc-ip-box {
  background: var(--card-dark); border: 1px dashed rgba(62, 200, 232, .4); border-radius: 9px;
  padding: 13px 18px; display: flex; align-items: center; gap: 18px;
}
.mc-stats {
  max-width: 1240px; margin: 0 auto; padding: 56px 28px 0;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(210px, 100%), 1fr)); gap: 16px;
}
.stat-card { background: var(--card); border: 1px solid var(--border); border-radius: 12px; padding: 22px; }
.stat-value { font-family: 'Chakra Petch', sans-serif; font-weight: 700; font-size: 32px; color: var(--cyan); }
.stat-label { font-size: 12px; letter-spacing: .13em; text-transform: uppercase; color: var(--text-mute); font-weight: 600; margin-top: 5px; }

.modes-section { max-width: 1240px; margin: 0 auto; padding: 56px 28px 0; }
.modes-section h2 { font-size: 34px; margin: 0 0 24px; }
.modes-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: 20px; }
.mode-card { background: var(--card); border: 1px solid var(--border); border-radius: 14px; overflow: hidden; }
.mode-card img { width: 100%; height: 190px; object-fit: cover; display: block; }
.mode-card-body { padding: 22px; }
.mode-card-body h3 { font-size: 20px; margin: 0 0 8px; }
.mode-card-body p { color: var(--text-dim); font-size: 15px; line-height: 1.6; margin: 0; }

/* ---------- Store page ---------- */
.step-label {
  font-size: 11.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--text-mute); font-weight: 600;
  margin-bottom: 12px;
}
.store-games { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(190px, 100%), 1fr)); gap: 14px; margin-bottom: 30px; }
.store-game-btn {
  display: flex; align-items: center; gap: 14px; text-align: left; padding: 16px; border-radius: 12px;
  background: var(--card); border: 1px solid var(--border); color: var(--text); font: inherit;
}
.store-game-btn.active { background: rgba(62, 200, 232, .1); border-color: var(--cyan); }
.store-game-btn.locked { color: var(--text-mute); opacity: .6; cursor: not-allowed; }
.store-game-btn:not(.locked) { cursor: pointer; }
.store-game-btn img { width: 44px; height: 44px; object-fit: contain; }
.store-game-btn .g-label { font-family: 'Chakra Petch', sans-serif; font-weight: 700; font-size: 16px; text-transform: uppercase; }
.store-game-btn .g-sub { font-size: 12px; letter-spacing: .1em; text-transform: uppercase; font-weight: 600; margin-top: 3px; color: var(--green); }
.store-game-btn.locked .g-sub { color: var(--text-mute); }

/* ---------- Store: searchable game picker ---------- */
.game-picker { position: relative; max-width: 420px; margin-bottom: 30px; }
.game-picker-btn {
  width: 100%; display: flex; align-items: center; gap: 14px; text-align: left; padding: 14px 16px;
  border-radius: 12px; background: var(--card); border: 1px solid var(--border-strong); color: var(--text); cursor: pointer;
}
.game-picker-btn:hover, .game-picker.open .game-picker-btn { border-color: var(--cyan); }
.game-picker-btn img { width: 40px; height: 40px; object-fit: contain; flex: none; }
.gp-text { flex: 1; min-width: 0; }
.gp-name {
  display: block; font-family: 'Chakra Petch', sans-serif; font-weight: 700; font-size: 16px;
  text-transform: uppercase; line-height: 1.2;
}
.gp-sub {
  display: block; font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase;
  font-weight: 600; margin-top: 3px; color: var(--green);
}
.gp-sub.closed { color: var(--text-mute); }
.gp-caret { color: var(--text-mute); font-size: 14px; transition: transform .15s ease; }
.game-picker.open .gp-caret { transform: rotate(180deg); }

.game-picker-panel {
  position: absolute; z-index: 40; top: calc(100% + 6px); left: 0; right: 0;
  background: var(--card-dark); border: 1px solid var(--cyan); border-radius: 12px; overflow: hidden;
  box-shadow: 0 18px 40px rgba(0, 0, 0, .55);
}
.gp-search { padding: 10px; border-bottom: 1px solid var(--border); }
.gp-search input { width: 100%; }
/* Scrolls rather than growing without limit — the list is meant to take
   another dozen games without redesigning the page. */
.game-picker-list { max-height: 260px; overflow-y: auto; padding: 6px; }
.gp-option {
  width: 100%; display: flex; align-items: center; gap: 12px; text-align: left; padding: 10px 12px;
  border-radius: 8px; background: none; border: none; color: var(--text); cursor: pointer;
}
.gp-option:hover, .gp-option.cursor { background: rgba(62, 200, 232, .12); }
.gp-option[aria-selected="true"] { background: rgba(62, 200, 232, .08); }
.gp-option img { width: 30px; height: 30px; object-fit: contain; flex: none; }
.gp-option .o-name { display: block; font-family: 'Chakra Petch', sans-serif; font-weight: 700; font-size: 14.5px; text-transform: uppercase; }
.gp-option .o-sub { display: block; font-size: 11px; letter-spacing: .09em; text-transform: uppercase; font-weight: 600; color: var(--green); margin-top: 2px; }
.gp-option .o-sub.closed { color: var(--text-mute); }
.gp-empty { padding: 16px 12px; color: var(--text-mute); font-size: 14px; text-align: center; }

/* ---------- Store: guest checkout ---------- */
.checkout-fields {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
  gap: 16px; margin-bottom: 34px;
}
.ck-field {
  display: block; background: var(--card); border: 1px solid var(--border);
  border-radius: 12px; padding: 14px 18px 16px;
}
.ck-field.bad { border-color: var(--pink); }
.ck-label {
  display: block; font-size: 11px; letter-spacing: .13em; text-transform: uppercase;
  color: var(--text-mute); font-weight: 600; margin-bottom: 8px;
}
/* Not `.ck-field input` — a bare selector here would also stretch any
   checkbox added later, which is a bug this project has already had once. */
.ck-field input:not([type="checkbox"]) { width: 100%; }
.ck-hint { display: block; color: var(--text-mute); font-size: 12.5px; line-height: 1.5; margin-top: 8px; }

.game-closed {
  background: var(--card); border: 1px solid var(--border); border-radius: 14px; padding: 24px;
}
.game-closed h3 { margin: 0 0 8px; font-size: 19px; }
.game-closed p { margin: 0; color: var(--text-dim); font-size: 15px; line-height: 1.6; }

.checkout-panel { background: var(--card); border: 1px solid var(--border); border-radius: 14px; padding: 20px 22px; }

/* The details fields moved INSIDE the checkout panel, which is already a
   card. Left alone they rendered as cards-inside-a-card with a 34px gap
   below them, which is the look of two components pushed together rather
   than one panel. Inside the panel they lose their own chrome and are
   separated by rules instead. */
.checkout-panel .checkout-fields {
  margin: 0; padding: 18px 0 4px; border-top: 1px solid var(--border);
  gap: 18px;
}
.checkout-panel .ck-field {
  background: none; border: none; border-radius: 0; padding: 0;
}
.checkout-panel .ck-field.bad input { border-color: var(--pink); }
.ck-summary { margin-bottom: 4px; }
.ck-empty { margin: 0; color: var(--text-mute); font-size: 14.5px; }
.ck-line {
  display: flex; align-items: baseline; justify-content: space-between; gap: 16px;
  padding: 9px 0; border-bottom: 1px solid var(--border);
}
.ck-line .l-name { font-family: 'Chakra Petch', sans-serif; font-weight: 700; font-size: 15px; }
.ck-line .l-price { font-family: 'Chakra Petch', sans-serif; font-weight: 700; font-size: 15px; }
.ck-foot {
  display: flex; align-items: center; justify-content: flex-end; gap: 22px; flex-wrap: wrap; margin-top: 16px;
}
.ck-total-row { display: flex; align-items: baseline; gap: 10px; }
.btn-checkout[disabled] { opacity: .45; cursor: not-allowed; }
.btn-checkout[disabled]:hover { background: var(--pink); color: #fff; }
.ck-status { margin: 14px 0 0; font-size: 14.5px; line-height: 1.6; }
.ck-status.ok { color: var(--green); }
.ck-status.err { color: var(--pink); }
.ck-note { margin: 12px 0 0; color: var(--text-mute); font-size: 12.5px; line-height: 1.55; }
.ck-note.test { color: var(--orange); }


.username-row {
  display: flex; align-items: center; gap: 14px; background: var(--card); border: 1px solid var(--border);
  border-radius: 12px; padding: 16px 20px; margin-bottom: 34px; flex-wrap: wrap;
}
.username-row input { flex: 1; min-width: 240px; }
.username-row span { color: var(--text-mute); font-size: 13.5px; }

.ranks-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(230px, 100%), 1fr)); gap: 18px; }
.rank-card { background: var(--card); border: 1px solid var(--border); border-radius: 14px; overflow: hidden; display: flex; flex-direction: column; }
.rank-card.featured { border-color: rgba(244, 95, 176, .45); }
.rank-bar { height: 4px; }
.rank-body { padding: 22px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.rank-body-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.rank-name { font-family: 'Chakra Petch', sans-serif; font-weight: 700; font-size: 21px; text-transform: uppercase; margin: 0; }
.rank-tier {
  font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; font-weight: 700; color: var(--text-dim);
  border: 1px solid rgba(232, 230, 245, .16); border-radius: 100px; padding: 4px 9px; white-space: nowrap;
}
.rank-price-row { display: flex; align-items: baseline; gap: 6px; }
.rank-price { font-family: 'Chakra Petch', sans-serif; font-weight: 700; font-size: 32px; color: #fff; }
.rank-price-note { color: var(--text-mute); font-size: 13px; }
.rank-note { color: var(--text-dim); font-size: 14px; line-height: 1.55; margin: 0; flex: 1; }
.rank-buy {
  width: 100%; font-family: 'Chakra Petch', sans-serif; font-weight: 700; font-size: 13px; letter-spacing: .08em;
  text-transform: uppercase; padding: 13px; border-radius: 8px; cursor: pointer; border: 1px solid rgba(62, 200, 232, .4);
  background: none; color: var(--cyan);
}
.rank-buy.featured { border: none; background: var(--pink); color: #fff; }
.rank-buy.in-cart { border: 1px solid var(--green); background: rgba(74, 222, 128, .12); color: var(--green); }
.placeholder-note { color: var(--text-mute); font-size: 13.5px; margin: 16px 0 0; }

.store-info-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 32px; }
.info-card { background: var(--card); border: 1px solid var(--border); border-radius: 14px; padding: 26px; }
.info-card h3 { font-family: 'Chakra Petch', sans-serif; font-weight: 700; font-size: 18px; text-transform: uppercase; margin: 0 0 12px; }
.info-card p { color: var(--text-dim); font-size: 15px; line-height: 1.65; margin: 0; }
.info-divider { height: 1px; background: var(--border); margin: 18px 0; }
.info-sub { color: var(--text-mute); font-size: 13.5px; line-height: 1.6; margin: 0; }
.info-sub .hl { color: var(--cyan); }
.btn-ticket {
  /* inline-flex, not the default inline.
     An inline element's vertical padding does not grow the line box, so
     the 12px top padding bled straight up over the paragraph above and
     the button looked like it overlapped the text. */
  display: inline-flex; align-items: center; justify-content: center;
  background: none; border: 1px solid rgba(62, 200, 232, .4); color: var(--cyan); font-family: 'Chakra Petch', sans-serif;
  font-weight: 700; font-size: 13px; letter-spacing: .08em; text-transform: uppercase; padding: 12px 20px;
  border-radius: 7px; cursor: pointer; margin-top: 16px;
}
.btn-ticket:hover { background: var(--cyan); color: var(--bg); }

/* EQUAL HEIGHT, and the button does the work of filling the difference.
   v84 set align-items:start to stop the shorter card leaving a lake of
   empty space under its content. That fixed the lake and broke the
   symmetry — two cards side by side reading as different sizes.
   Stretching them back only looks right because .info-card is now a
   flex column with the button pushed to the bottom: the gap lands
   BETWEEN the text and the button, where it reads as spacing rather
   than as an unfinished card. */
.info-card { display: flex; flex-direction: column; }
.info-card > p:last-of-type { margin-bottom: 16px; }
/* TWO auto margins, not one.
   With auto only on the button, every bit of slack piled into one gap
   and the text sat clamped to the heading. Auto on the paragraph as
   well makes flexbox SPLIT the free space between the two gaps, so the
   text drifts down and the card reads evenly.
   The heading stays pinned to the top, deliberately — headings that
   drift are worse than uneven whitespace, and these two need to line up
   across the row. On the taller card there is no free space, so both
   autos resolve to zero and nothing moves. */
.info-card > p:first-of-type { margin-top: auto; }
.info-card .btn-ticket { margin-top: auto; align-self: flex-start; }

/* ---------- Forms ---------- */
.form-card { background: var(--card); border: 1px solid var(--border); border-radius: 14px; padding: 28px; display: grid; gap: 14px; }
.form-card h2 { font-family: 'Chakra Petch', sans-serif; font-weight: 700; font-size: 22px; text-transform: uppercase; margin: 0 0 6px; }
.form-row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.field label,
.field-label { display: block; font-size: 11.5px; letter-spacing: .13em; text-transform: uppercase; color: var(--text-mute); font-weight: 600; margin-bottom: 7px; }
.field { display: block; }
input[type="text"], input[type="email"], input[type="tel"], input[type="password"], input, textarea, select {
  width: 100%; box-sizing: border-box; background: var(--card-dark); border: 1px solid var(--border-strong);
  border-radius: 8px; color: var(--text); padding: 13px 14px; font-size: 15px;
}
textarea { resize: vertical; }
input::placeholder, textarea::placeholder { color: #56517a; }

/* ---------- Show/hide password ----------
   The wrapper is injected around every password input at runtime, so it
   has to behave like the input it replaced in the layout. Every input on
   this site is width:100%, which covers block and grid parents; flex:1
   covers the flex ones (.acct-inline) and is simply ignored elsewhere. */
.pw-wrap { position: relative; display: block; width: 100%; flex: 1 1 auto; min-width: 0; }
.pw-wrap > input { padding-right: 46px; }
.pw-toggle {
  position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  display: flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; padding: 0; border: none; background: none;
  color: var(--text-mute); cursor: pointer; border-radius: 6px;
}
.pw-toggle:hover { color: var(--cyan); background: rgba(62, 200, 232, .12); }
.pw-toggle:focus-visible { outline: 2px solid var(--cyan); outline-offset: 1px; }
.pw-toggle svg { width: 19px; height: 19px; display: block; }
.btn-submit {
  justify-self: start; background: var(--pink); border: none; color: #fff; font-family: 'Chakra Petch', sans-serif;
  font-weight: 700; font-size: 14px; letter-spacing: .08em; text-transform: uppercase; padding: 15px 30px;
  border-radius: 8px; cursor: pointer;
}
.btn-submit:hover { background: var(--cyan); color: var(--bg); }

/* ---------- Support / Contact layout ---------- */
.two-col { display: grid; grid-template-columns: 1.1fr .9fr; gap: 28px; align-items: start; }
.two-col.even { grid-template-columns: 1fr 1fr; }
.side-stack { display: flex; flex-direction: column; gap: 20px; }
.side-stack.tight { gap: 16px; }
.hours-row { display: flex; justify-content: space-between; }
.hours-block { font-size: 15px; color: var(--text-dim); line-height: 2; }
.hours-note { font-size: 13.5px; color: var(--text-mute); margin: 14px 0 0; }
.contact-card { background: var(--card); border: 1px solid var(--border); border-radius: 14px; padding: 26px; }
.contact-card .field-label { margin-bottom: 0; }
.contact-card a { font-family: 'Chakra Petch', sans-serif; font-weight: 700; font-size: 22px; }

/* ---------- About page ---------- */
.about-body { color: #c3c0dd; font-size: 18px; line-height: 1.75; display: flex; flex-direction: column; gap: 22px; }
.about-body p { margin: 0; }

/* ---------- Admin ---------- */
.admin-shell { max-width: 1420px; margin: 0 auto; padding: 40px 28px 0; }
.admin-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; flex-wrap: wrap; margin-bottom: 24px; }
.admin-head h1 { font-size: 36px; margin: 10px 0 0; }
/* Wraps rather than crushing. Previously the greeting, the search box and
   three buttons were forced onto one line, so "Hello, Support" truncated
   mid-word and sat on top of the search field. */
.admin-head-actions {
  display: flex; align-items: center; gap: 10px;
  flex-wrap: wrap; justify-content: flex-end; min-width: 0;
}
.admin-head-actions .search-input { flex: 1 1 180px; min-width: 140px; max-width: 260px; }
.search-input { width: 220px; }
.btn-compose {
  background: var(--cyan); border: none; color: var(--bg); font-family: 'Chakra Petch', sans-serif; font-weight: 700;
  font-size: 13px; letter-spacing: .08em; text-transform: uppercase; padding: 12px 20px; border-radius: 7px;
  cursor: pointer; text-align: center;
}
.btn-compose:hover { background: var(--pink); color: #fff; }
.admin-view-tabs { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 22px; }
.chip {
  font-family: 'Chakra Petch', sans-serif; font-weight: 700; font-size: 13.5px; padding: 11px 22px;
  border-radius: 7px; cursor: pointer; background: var(--card-dark); border: 1px solid var(--border-strong); color: var(--text-dim);
}
.chip.active { background: var(--cyan); border-color: var(--cyan); color: var(--bg); }
.chip.sm { font-size: 12.5px; padding: 10px 18px; }

/* ---------- Arrived-from-game confirmation ----------
   Shown once, at the top of step 2, when the store was opened from a
   link handed out in game. It is a question, not a banner, so it is
   styled to be answered rather than skimmed past. */
.deeplink-confirm {
  background: var(--card); border: 1px solid var(--cyan); border-radius: 14px;
  padding: 20px 22px; margin: 0 0 22px;
}
.deeplink-confirm .dl-q {
  font-family: 'Chakra Petch', sans-serif; font-weight: 700; font-size: 19px;
  color: var(--text); margin: 0 0 6px;
}
.deeplink-confirm .dl-sub { color: var(--text-dim); font-size: 14px; margin: 0 0 16px; }
.deeplink-confirm .dl-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.deeplink-confirm .dl-actions button { width: auto; flex: 0 0 auto; }

/* ---------- Order list toolbar ----------
   THE BUG THIS FIXES: every input, textarea and select on this site is
   width:100%. Put a <select> in a flex row next to a search field that
   has flex:1 — which means a ZERO basis — and the select claims the
   whole row while the one control you actually type into collapses to a
   stub. It looked like a broken widget; it was a specificity problem.

   So the search field is given a real basis and allowed to grow, and the
   select is pinned to a width that fits its longest option and no more. */
.ord-toolbar { display: flex; flex-direction: column; gap: 12px; margin: 0 0 4px; }
.ord-search-row { display: flex; gap: 10px; align-items: center; }
.ord-search-row input[type="text"] { flex: 1 1 60%; min-width: 220px; }
.ord-search-row select { flex: 0 0 auto; width: auto; min-width: 200px; }
.ord-search-row .mail-check { flex: 0 0 auto; white-space: nowrap; }
.ord-search-row button { flex: 0 0 auto; }

@media (max-width: 860px) {
  .ord-search-row { flex-wrap: wrap; }
  .ord-search-row input[type="text"] { flex: 1 1 100%; }
  .ord-search-row select { flex: 1 1 auto; }
}

.approval-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(190px, 100%), 1fr)); gap: 16px; margin-bottom: 26px; }
.approval-stats .stat-card .stat-value { font-size: 30px; }
.approval-filters { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 18px; }
.approvals-list { display: flex; flex-direction: column; gap: 14px; }
.approval-card { background: var(--card); border-radius: 14px; padding: 22px 24px; border: 1px solid var(--border); }
.approval-card-top { display: flex; align-items: flex-start; gap: 18px; flex-wrap: wrap; }
.approval-card img { width: 56px; height: 56px; object-fit: contain; background: var(--card-dark); border-radius: 10px; padding: 8px; box-sizing: border-box; }
.approval-main { flex: 1; min-width: 240px; }
.approval-title-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 6px; }
.approval-title-row h3 { font-family: 'Chakra Petch', sans-serif; font-weight: 700; font-size: 20px; text-transform: uppercase; margin: 0; }
.status-badge { font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; font-weight: 700; border-radius: 100px; padding: 4px 10px; }
.approval-meta { color: var(--text-dim); font-size: 14.5px; margin-bottom: 12px; }
.approval-note { color: #c3c0dd; font-size: 15px; line-height: 1.6; margin: 0 0 14px; max-width: 720px; }
.approval-fields { display: flex; gap: 20px; flex-wrap: wrap; }
.approval-field-label { font-size: 10.5px; letter-spacing: .13em; text-transform: uppercase; color: var(--text-mute); font-weight: 600; }
.approval-field-value { font-family: 'Chakra Petch', sans-serif; font-weight: 700; font-size: 15px; color: var(--text); margin-top: 3px; }
.approval-actions { display: flex; flex-direction: column; gap: 8px; min-width: 170px; }
.action-btn {
  font-family: 'Chakra Petch', sans-serif; font-weight: 700; font-size: 12px; letter-spacing: .08em;
  text-transform: uppercase; padding: 11px 16px; border-radius: 7px; cursor: pointer; text-align: center; width: 100%;
  background: none;
}

.inbox-layout { display: grid; grid-template-columns: 220px 350px 1fr; gap: 18px; align-items: start; }
.mailboxes {
  background: var(--card); border: 1px solid var(--border); border-radius: 14px; padding: 14px;
  display: flex; flex-direction: column; gap: 4px;
}
.mailbox-btn {
  display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; text-align: left;
  border: none; cursor: pointer; padding: 11px 13px; border-radius: 8px; font-family: 'Chakra Petch', sans-serif;
  font-weight: 600; font-size: 13.5px; letter-spacing: .05em; text-transform: uppercase; background: none; color: var(--text-dim);
}
.mailbox-btn.active { background: rgba(62, 200, 232, .13); color: var(--cyan); }
.mailbox-count { font-size: 12px; color: var(--text-mute); }
.mailbox-btn.active .mailbox-count { color: var(--cyan); }

.thread-panel { background: var(--card); border: 1px solid var(--border); border-radius: 14px; overflow: hidden; }
.thread-panel-head {
  padding: 14px 18px; border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between;
}
.thread-panel-head span:first-child { font-family: 'Chakra Petch', sans-serif; font-weight: 700; font-size: 13px; letter-spacing: .12em; text-transform: uppercase; color: var(--text-dim); }
.thread-panel-head span:last-child { font-size: 12.5px; color: var(--text-mute); }
.thread-list { max-height: 620px; overflow-y: auto; }
.thread-item {
  display: block; width: 100%; text-align: left; border: none; border-bottom: 1px solid rgba(232, 230, 245, .07);
  cursor: pointer; padding: 16px 18px; background: none; border-left: 3px solid transparent; color: inherit;
}
.thread-item.active { background: rgba(62, 200, 232, .09); border-left-color: var(--cyan); }
.thread-item-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 5px; }
.thread-from { font-family: 'Chakra Petch', sans-serif; font-weight: 700; font-size: 14px; color: var(--text); }
.thread-item.active .thread-from { color: var(--cyan); }
.thread-time { font-size: 11.5px; color: var(--text-mute); white-space: nowrap; }
.thread-subject { font-size: 14.5px; color: var(--text); margin-bottom: 4px; }
.thread-preview { font-size: 13px; color: var(--text-mute); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.thread-tags { display: flex; gap: 6px; margin-top: 9px; flex-wrap: wrap; }
.tag-pill {
  font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; font-weight: 700; color: var(--text-dim);
  border: 1px solid rgba(232, 230, 245, .16); border-radius: 100px; padding: 3px 9px;
}
.status-pill { font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; font-weight: 700; border-radius: 100px; padding: 3px 9px; }

.thread-view { background: var(--card); border: 1px solid var(--border); border-radius: 14px; display: flex; flex-direction: column; min-height: 620px; }
.thread-view-head { padding: 22px 26px; border-bottom: 1px solid var(--border); }
.thread-view-head-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.thread-view-head h2 { font-family: 'Chakra Petch', sans-serif; font-weight: 700; font-size: 22px; margin: 0 0 6px; }
.thread-view-head-meta { color: var(--text-mute); font-size: 13.5px; }
.thread-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.thread-action-btn {
  background: none; font-family: 'Chakra Petch', sans-serif; font-weight: 700; font-size: 12px; letter-spacing: .08em;
  text-transform: uppercase; padding: 10px 16px; border-radius: 7px; cursor: pointer; text-align: center;
}
.request-fields {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 1px;
  background: var(--border); border-bottom: 1px solid var(--border);
}
.request-fields > div { background: var(--card); padding: 16px 20px; }
.thread-messages { padding: 26px; display: flex; flex-direction: column; gap: 16px; flex: 1; overflow-y: auto; }
.msg-bubble { border-radius: 12px; padding: 18px 20px; }
.msg-bubble.me { background: rgba(62, 200, 232, .08); border: 1px solid rgba(62, 200, 232, .25); }
.msg-bubble.them { background: var(--card-dark); border: 1px solid var(--border); }
.msg-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.msg-author { font-family: 'Chakra Petch', sans-serif; font-weight: 700; font-size: 14px; }
.msg-time { font-size: 11.5px; color: var(--text-mute); }
.msg-body { color: #c3c0dd; font-size: 15px; line-height: 1.65; margin: 0; white-space: pre-wrap; }
.reply-box { border-top: 1px solid var(--border); padding: 20px 26px; }
.reply-footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 12px; flex-wrap: wrap; }
.canned-replies { display: flex; gap: 8px; flex-wrap: wrap; }
.canned-btn {
  background: var(--card-dark); border: 1px solid var(--border-strong); color: var(--text-dim); font-size: 13px;
  padding: 8px 12px; border-radius: 100px; cursor: pointer; text-align: center;
}
.canned-btn:hover { border-color: var(--cyan); color: var(--cyan); }
.btn-send-reply {
  background: var(--pink); border: none; color: #fff; font-family: 'Chakra Petch', sans-serif; font-weight: 700;
  font-size: 13px; letter-spacing: .08em; text-transform: uppercase; padding: 13px 26px; border-radius: 8px;
  cursor: pointer; text-align: center;
}
.btn-send-reply:hover { background: var(--cyan); color: var(--bg); }

/* ---------- Modals ---------- */
.modal-overlay {
  position: fixed; inset: 0; background: rgba(6, 5, 12, .78); backdrop-filter: blur(4px); z-index: 100;
  display: flex; align-items: center; justify-content: center; padding: 24px;
}
.modal-box { width: 100%; max-width: 600px; background: var(--card); border: 1px solid rgba(62, 200, 232, .25); border-radius: 16px; padding: 28px; }
.modal-box.narrow { max-width: 400px; padding: 32px; }
.modal-box h2 { font-size: 26px; margin: 0 0 20px; }
.modal-box.narrow h2 { font-size: 28px; margin: 0 0 6px; }
.modal-box.narrow > p { color: var(--text-dim); font-size: 15px; margin: 0 0 22px; }
.modal-form { display: grid; gap: 12px; }
.modal-footer { display: flex; gap: 10px; justify-content: flex-end; }
.btn-cancel {
  background: none; border: 1px solid rgba(232, 230, 245, .22); color: var(--text-dim); font-family: 'Chakra Petch', sans-serif;
  font-weight: 700; font-size: 13px; letter-spacing: .08em; text-transform: uppercase; padding: 13px 22px; border-radius: 8px;
  cursor: pointer; text-align: center;
}
.btn-cancel:hover { border-color: var(--pink); color: var(--pink); }
.btn-send {
  background: var(--cyan); border: none; color: var(--bg); font-family: 'Chakra Petch', sans-serif; font-weight: 700;
  font-size: 13px; letter-spacing: .08em; text-transform: uppercase; padding: 13px 26px; border-radius: 8px; cursor: pointer;
  text-align: center;
}
.btn-send:hover { background: var(--pink); color: #fff; }
.btn-block-cyan {
  width: 100%; background: var(--cyan); border: none; color: var(--bg); font-family: 'Chakra Petch', sans-serif;
  font-weight: 700; font-size: 14px; letter-spacing: .08em; text-transform: uppercase; padding: 14px; border-radius: 8px; cursor: pointer;
}
.btn-block-cyan:hover { background: var(--pink); color: #fff; }
.btn-block-discord {
  width: 100%; background: var(--discord); border: none; color: #fff; font-family: 'Chakra Petch', sans-serif;
  font-weight: 700; font-size: 14px; letter-spacing: .08em; text-transform: uppercase; padding: 14px; border-radius: 8px; cursor: pointer;
}
.btn-block-discord:hover { background: var(--pink); }
.modal-footnote { color: var(--text-mute); font-size: 13.5px; margin: 18px 0 0; text-align: center; }

/* ---------- Cart bar ---------- */
.cart-bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; background: rgba(11, 9, 24, .97);
  backdrop-filter: blur(14px); border-top: 1px solid rgba(62, 200, 232, .3);
}
.cart-bar-inner { max-width: 1240px; margin: 0 auto; padding: 16px 28px; display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.cart-items { display: flex; gap: 8px; flex-wrap: wrap; flex: 1; }
.cart-chip {
  display: flex; align-items: center; gap: 10px; background: var(--card); border: 1px solid var(--border-strong);
  border-radius: 8px; padding: 9px 13px; cursor: pointer; color: var(--text);
}
.cart-chip:hover { border-color: var(--pink); }
.cart-chip .cname { font-family: 'Chakra Petch', sans-serif; font-weight: 700; font-size: 14px; }
.cart-chip .cprice { font-family: 'Chakra Petch', sans-serif; font-weight: 700; font-size: 14px; }
.cart-chip .cx { color: var(--text-mute); font-size: 15px; }
.cart-total-block { display: flex; align-items: center; gap: 18px; }
.cart-total-label { font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--text-mute); font-weight: 600; }
.cart-total-value { font-family: 'Chakra Petch', sans-serif; font-weight: 700; font-size: 24px; color: #fff; }
.btn-checkout {
  background: var(--pink); border: none; color: #fff; font-family: 'Chakra Petch', sans-serif; font-weight: 700;
  font-size: 14px; letter-spacing: .08em; text-transform: uppercase; padding: 15px 28px; border-radius: 8px; cursor: pointer;
}
.btn-checkout:hover { background: var(--cyan); color: var(--bg); }
.cart-spacer { height: 104px; }

/* ---------- Footer ---------- */
.site-footer { margin-top: 88px; border-top: 1px solid rgba(62, 200, 232, .16); background: var(--bg-footer); }
.footer-grid {
  max-width: 1240px; margin: 0 auto; padding: 48px 28px 32px;
  display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.1fr; gap: 36px;
}
.footer-col-title { font-size: 11.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--text-mute); font-weight: 600; margin-bottom: 14px; }
.footer-logo { height: 60px; width: auto; }
.footer-contact-title { font-size: 11.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--text-mute); font-weight: 600; margin: 18px 0 8px; }
.footer-contact a { display: block; font-size: 15px; }
.footer-contact a:first-of-type { margin-top: 0; }
.footer-links { display: flex; flex-direction: column; gap: 9px; }
.footer-link-btn {
  background: none; border: none; padding: 0; text-align: left; color: var(--text-dim); font-size: 15px; cursor: pointer; font: inherit;
}
.footer-link-btn:hover { color: var(--cyan); }
.footer-links a { color: var(--text-dim); font-size: 15px; }
.footer-links a:hover { color: var(--cyan); }
.footer-hours { color: var(--text-dim); font-size: 15px; line-height: 1.8; }
.footer-socials { display: flex; gap: 10px; margin-top: 18px; }
.social-btn {
  width: 36px; height: 36px; border-radius: 8px; border: 1px solid rgba(232, 230, 245, .16); display: flex;
  align-items: center; justify-content: center; font-family: 'Chakra Petch', sans-serif; font-weight: 700; font-size: 13px;
  color: var(--text-dim);
}
.social-btn:hover { border-color: var(--cyan); color: var(--cyan); }
.footer-bottom { border-top: 1px solid rgba(232, 230, 245, .07); }
.footer-bottom-inner {
  max-width: 1240px; margin: 0 auto; padding: 20px 28px; display: flex; justify-content: space-between;
  gap: 16px; flex-wrap: wrap; color: #5c587e; font-size: 13.5px;
}
.footer-staff-btn { background: none; border: none; padding: 0; color: #5c587e; font-size: 13.5px; cursor: pointer; font: inherit; }
.footer-staff-btn:hover { color: var(--cyan); }

@media (max-width: 900px) {
  .news-store, .two-col, .two-col.even, .store-info-grid { grid-template-columns: 1fr; }
  .inbox-layout { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .hero-title { font-size: 40px; }
  .section-title { font-size: 32px; }
  .servers-section, .news-store { padding-top: 56px; }
  .discord-banner-wrap { margin-top: 56px; }
  .modes-section, .mc-stats { padding-top: 44px; }
  .site-header-inner { min-height: 64px; padding: 10px 28px; }
  .logo-btn, .logo-btn img { height: 42px; }

  .nav-toggle {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px;
    width: 38px; height: 38px; margin-left: auto;
    background: none; border: 1px solid rgba(232, 230, 245, .22); border-radius: 8px; cursor: pointer; padding: 0;
  }
  .nav-toggle-bar { display: block; width: 18px; height: 2px; background: var(--text); border-radius: 2px; transition: transform .25s ease, opacity .2s ease; }
  .site-header.nav-open .nav-toggle-bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .site-header.nav-open .nav-toggle-bar:nth-child(2) { opacity: 0; }
  .site-header.nav-open .nav-toggle-bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

  .site-nav-panel {
    position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 4px;
    background: rgba(11, 9, 24, .98); backdrop-filter: blur(14px);
    border-bottom: 1px solid rgba(62, 200, 232, .18);
    padding: 8px 20px 18px;
    max-height: 0; overflow: hidden; opacity: 0;
    transition: max-height .32s ease, opacity .25s ease;
  }
  .site-header.nav-open .site-nav-panel { max-height: 480px; opacity: 1; overflow-y: auto; }
  .site-nav-panel .main-nav { flex-direction: column; gap: 2px; margin-left: 0; width: 100%; }
  .site-nav-panel .nav-link { width: 100%; padding: 12px 14px; text-align: left; }
  /* Account button sits in the top bar next to the menu button, not
     behind it. Someone who is already signed in should be able to see
     that from the page they are on, without opening a menu first. */
  .site-header-inner > .header-actions { order: 1; margin-left: auto; gap: 8px; }
  .site-header-inner > .header-actions .btn-discord { display: none; }
  .nav-toggle { order: 2; margin-left: 0; }
  /* Discord invite keeps its place inside the menu, where it already was. */
  .site-nav-panel .nav-discord-mobile {
    display: block; width: 100%; text-align: center; padding: 13px;
    margin-top: 12px;
  }
}
@media (max-width: 560px) {
  .footer-grid { grid-template-columns: 1fr; }
  .form-row-2 { grid-template-columns: 1fr; }
  .hero-title { font-size: 32px; }
  .hero-sub { font-size: 17px; }
  .section-title { font-size: 26px; }
  .servers-section, .news-store { padding: 44px 20px 0; }
  .discord-banner-wrap { margin-top: 44px; padding: 0 20px; }
  .news-store { gap: 32px; }
  .news-col-title { font-size: 21px; margin-top: 4px; }
  .news-list { gap: 12px; margin-top: 16px; }
  .news-card { padding: 16px 18px; }
  .news-card h3 { font-size: 17px; }
  .news-card p {
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden; font-size: 14px;
  }
  .store-teaser-card { padding: 22px; padding-bottom: 30px; }
  /* Two-up on phones so cards read as compact tiles instead of
     full-width blocks you have to scroll past one at a time. */
  .servers-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .server-card-img { height: 130px; }
  .server-card-img img { padding: 10px; }
  .server-card-body { padding: 14px 12px; gap: 6px; }
  .server-card-body h3 { font-size: 16px; }
  .server-card-body p { font-size: 12.5px; line-height: 1.45; }
  .server-cta { font-size: 11px; }
  .pill { font-size: 9.5px; padding: 3px 8px; top: 8px; left: 8px; }
  .wrap, .wrap-narrow, .page-head { padding-left: 20px; padding-right: 20px; }
  .breadcrumb-bar { padding: 16px 20px 0; }
  .site-header-inner { min-height: 54px; padding: 8px 20px; gap: 10px 16px; }
  .logo-btn, .logo-btn img { height: 34px; }
  .nav-link { padding: 7px 10px; font-size: 12px; }
  .btn-login { padding: 8px 14px; font-size: 12px; }
  .btn-discord { padding: 9px 16px; font-size: 12px; }
  .header-actions { gap: 8px; }
}

/* ---------- Accessibility ---------- */
.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 200; background: var(--cyan); color: var(--bg);
  padding: 12px 18px; border-radius: 0 0 8px 0; font-family: 'Chakra Petch', sans-serif; font-weight: 700;
  text-transform: uppercase; font-size: 13px;
}
.skip-link:focus { left: 0; }
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible {
  outline: 2px solid var(--cyan); outline-offset: 2px;
}

/* ---------- Breadcrumbs ---------- */
.breadcrumb-bar { padding: 18px 28px 0; }
.hero-breadcrumb { padding-top: 22px; }
.hero-breadcrumb a, .hero-breadcrumb li[aria-current="page"] { color: #a9a5c8; }
.hero-breadcrumb a:hover { color: var(--cyan); }
.breadcrumb-bar ol { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; font-size: 13px; color: var(--text-mute); }
.breadcrumb-bar li:not(:last-child)::after { content: "/"; margin-left: 6px; color: var(--text-mute); }
.breadcrumb-bar a { color: var(--text-mute); }
.breadcrumb-bar a:hover { color: var(--cyan); }
.breadcrumb-bar li[aria-current="page"] { color: var(--text-dim); }

/* ---------- FAQ ---------- */
.faq-list { display: flex; flex-direction: column; gap: 10px; }
.faq-item { background: var(--card); border: 1px solid var(--border); border-radius: 10px; padding: 4px 20px; }
.faq-item summary {
  cursor: pointer; padding: 16px 0; font-family: 'Chakra Petch', sans-serif; font-weight: 700; font-size: 15.5px;
  color: var(--text); list-style: none;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::before { content: "+"; color: var(--cyan); margin-right: 10px; font-weight: 700; }
.faq-item[open] summary::before { content: "–"; }
.faq-item p { color: var(--text-dim); font-size: 15px; line-height: 1.6; margin: 0 0 18px; }

/* ---------- Blog ---------- */
.blog-list { display: flex; flex-direction: column; gap: 16px; margin-top: 24px; }
.blog-card {
  display: block; background: var(--card); border: 1px solid var(--border); border-radius: 14px; padding: 24px;
  color: inherit;
}
.blog-card:hover { border-color: var(--cyan); }
.blog-card h2 { font-family: 'Chakra Petch', sans-serif; font-weight: 700; font-size: 22px; margin: 8px 0 8px; }
.blog-card p { color: var(--text-dim); font-size: 15px; line-height: 1.6; margin: 0 0 10px; }
.blog-byline { color: var(--text-mute); font-size: 13.5px; margin: 0 0 30px; }
.blog-post-footer { margin-top: 40px; padding-top: 20px; border-top: 1px solid var(--border); }
.prose { color: #c3c0dd; font-size: 17px; line-height: 1.75; }
.prose h2 { font-family: 'Chakra Petch', sans-serif; font-weight: 700; font-size: 24px; text-transform: uppercase; color: var(--text); margin: 34px 0 12px; }
.prose p { margin: 0 0 18px; }
.prose ul, .prose ol { margin: 0 0 18px; padding-left: 22px; display: flex; flex-direction: column; gap: 8px; }
.prose li { margin: 0; }
.prose code { background: var(--card-dark); border: 1px solid var(--border-strong); border-radius: 4px; padding: 2px 6px; font-size: 14px; color: var(--cyan); }
.prose strong { color: var(--text); }
.about-body.prose h2 { color: var(--text); }
.about-body.prose ol { padding-left: 22px; }

/* ---------- Forms: status + Turnstile ---------- */
.cf-turnstile { margin-top: 4px; }
.form-status { font-size: 14px; margin: 0; padding: 10px 14px; border-radius: 8px; }
.form-status.ok { background: rgba(74, 222, 128, .12); color: var(--green); border: 1px solid rgba(74, 222, 128, .35); }
.form-status.err { background: rgba(244, 95, 176, .12); color: var(--pink); border: 1px solid rgba(244, 95, 176, .35); }

/* ---------- Admin passcode gate ---------- */
.passcode-card {
  max-width: 400px; margin: 96px auto; background: var(--card); border: 1px solid rgba(62, 200, 232, .25);
  border-radius: 16px; padding: 32px; text-align: center;
}
.passcode-card form { display: grid; gap: 12px; text-align: left; }
.passcode-card .btn-submit { justify-self: stretch; text-align: center; }

/* ---------- Player accounts ---------- */
.account-shell { max-width: 560px; margin: 96px auto 120px; padding: 0 20px; }
.account-card {
  background: var(--card); border: 1px solid rgba(62, 200, 232, .25);
  border-radius: 16px; padding: 32px;
}
.account-card + .account-card { margin-top: 20px; }
.account-card form { display: grid; gap: 12px; text-align: left; margin-top: 16px; }
.account-card .btn-submit { justify-self: stretch; text-align: center; }
.account-card .auth-title { margin: 4px 0 6px; }
.account-card .auth-sub { color: var(--text-dim); font-size: 14.5px; margin: 0 0 4px; }
.account-card .auth-alt { margin-top: 18px; display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }

.btn-discord {
  display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%;
  margin-top: 18px; padding: 13px 18px; border: none; border-radius: 10px; cursor: pointer;
  background: #5865F2; color: #fff; font-family: 'Chakra Petch', sans-serif;
  font-weight: 700; font-size: 14px; letter-spacing: .3px;
}
.btn-discord:hover { background: #4752c4; }
/* The real Discord mark, inline SVG so it takes the button's colour and
   stays crisp at any size. This was a plain rounded rectangle standing in
   for a logo — which reads as a broken image, not a brand. */
.discord-mark { width: 22px; height: 17px; flex: 0 0 auto; }

/* ---------- The other action ----------
   "Create an account" was a text link sitting next to "Forgot your
   password?" at the same size and colour, so the two most different
   things you can do on a sign-in page looked identical. Signing up gets
   its own button.

   OUTLINED, not solid: it must be obvious without competing with Sign
   in. Two solid buttons of equal weight is the same problem in reverse. */
.auth-switch {
  margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--border);
  text-align: center;
}
.auth-switch-label { color: var(--text-dim); font-size: 13.5px; margin: 0 0 12px; }
.btn-auth-alt {
  display: block; width: 100%; box-sizing: border-box; text-align: center;
  padding: 13px 18px; border-radius: 10px; cursor: pointer;
  background: transparent; border: 1px solid var(--cyan); color: var(--cyan);
  font-family: 'Chakra Petch', sans-serif; font-weight: 700;
  font-size: 14px; letter-spacing: .08em; text-transform: uppercase;
}
.btn-auth-alt:hover { background: var(--cyan); color: var(--bg); }

.auth-divider { display: flex; align-items: center; gap: 12px; margin: 18px 0 4px; color: var(--text-mute); font-size: 12.5px; }
.auth-divider::before, .auth-divider::after { content: ""; flex: 1; height: 1px; background: var(--border); }

.acct-head { display: flex; align-items: center; gap: 16px; margin-bottom: 8px; }
.acct-avatar { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; border: 1px solid var(--border-strong); }
.acct-section { border-top: 1px solid var(--border); margin-top: 26px; padding-top: 22px; }
.acct-h2 { font-size: 15px; margin: 0 0 8px; }
.acct-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 12px; }
.acct-inline { display: flex; gap: 10px; align-items: center; }
.acct-inline input { flex: 1; }
.acct-qr { margin: 16px 0; display: flex; justify-content: center; }
.acct-qr img { width: 200px; height: 200px; background: #fff; padding: 10px; border-radius: 10px; }
pre.acct-codes {
  background: var(--bg-deep); border: 1px solid var(--border-strong); border-radius: 10px;
  padding: 16px; font-size: 14px; line-height: 1.9; letter-spacing: 1px; margin: 12px 0 0;
  user-select: all;
}
.form-status.is-error { background: rgba(244, 95, 176, .12); color: var(--pink); border: 1px solid rgba(244, 95, 176, .35); }

@media (max-width: 560px) {
  .account-shell { margin: 64px auto 80px; }
  .account-card { padding: 24px 20px; }
  .acct-inline { flex-direction: column; align-items: stretch; }
}

/* ---------- Bare pages (account creation) ---------- */
.bare-page { background: var(--bg-deep); }
.bare-logo { display: block; width: max-content; margin: 40px auto 0; opacity: .95; }
.bare-logo img { display: block; height: 44px; width: auto; }
.signup-shell { margin-top: 32px; }

.signup-steps {
  display: flex; gap: 10px; list-style: none; padding: 0; margin: 0 0 20px;
  font-family: 'Chakra Petch', sans-serif; font-size: 12px; letter-spacing: .4px;
  text-transform: uppercase; color: var(--text-mute); justify-content: center; flex-wrap: wrap;
}
.signup-steps li { display: flex; align-items: center; gap: 7px; }
.signup-steps li span {
  display: grid; place-items: center; width: 21px; height: 21px; border-radius: 50%;
  border: 1px solid var(--border-strong); font-size: 11px;
}
.signup-steps li.is-current { color: var(--cyan); }
.signup-steps li.is-current span { border-color: var(--cyan); color: var(--cyan); }
.signup-steps li.is-done { color: var(--green); }
.signup-steps li.is-done span { border-color: var(--green); color: var(--green); }

.su-label {
  display: block; font-family: 'Chakra Petch', sans-serif; font-weight: 700;
  font-size: 12.5px; letter-spacing: .3px; color: var(--text); margin: 14px 0 -4px;
}
.su-choice { display: grid; gap: 10px; margin-top: 18px; }

.pw-rules { list-style: none; padding: 0; margin: 8px 0 0; display: grid; gap: 4px; }
.pw-rules li { font-size: 12.5px; color: var(--text-mute); padding-left: 20px; position: relative; }
.pw-rules li::before {
  content: "○"; position: absolute; left: 2px; top: -1px; font-size: 12px; color: var(--text-mute);
}
.pw-rules li.is-met { color: var(--green); }
.pw-rules li.is-met::before { content: "●"; color: var(--green); }

.field-hint.is-good { color: var(--green); }
.field-hint.is-bad { color: var(--pink); }
/* A hint that is reporting a problem rather than explaining a field.
   Boxed, because an uncategorised product is invisible in /buy <name>
   and a line of grey text under a table is exactly what gets skimmed. */
.warn-hint {
  color: var(--text);
  background: rgba(244, 95, 176, 0.08);
  border-left: 3px solid var(--pink);
  border-radius: 4px;
  padding: 8px 10px;
  margin-top: 10px;
}
.warn-hint code { background: rgba(0, 0, 0, 0.25); padding: 1px 4px; border-radius: 3px; }

/* ---------- Header login button ---------- */
/* Was a bare text button that sat oddly against the Discord pill next to
   it. Matched to the same shape so the pair reads as one control group. */
.btn-login {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 9px 20px; border-radius: 999px; cursor: pointer; text-decoration: none;
  font-family: 'Chakra Petch', sans-serif; font-weight: 700; font-size: 13px;
  letter-spacing: .4px; text-transform: uppercase;
  color: var(--text); background: transparent;
  border: 1px solid var(--border-strong);
  transition: border-color .18s ease, color .18s ease, background .18s ease;
}
.btn-login:hover { border-color: var(--cyan); color: var(--cyan); background: rgba(62, 200, 232, .08); }
.btn-login:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; }
.header-actions { display: flex; align-items: center; gap: 10px; }
.header-actions .btn-discord { width: auto; margin-top: 0; padding: 9px 20px; border-radius: 999px; font-size: 13px; text-transform: uppercase; }
/* The mark used to be hidden here because it was a grey rectangle. It is
   a real logo now, so it earns its place in the header pill too. */
.header-actions .btn-discord .discord-mark { width: 18px; height: 14px; }

/* ---------- Social composer ---------- */
.social-composer { background: var(--card); border: 1px solid var(--border); border-radius: 14px; padding: 26px; max-width: 720px; }
.field-block { margin-bottom: 20px; }
.field-label-lg { font-family: 'Chakra Petch', sans-serif; font-weight: 700; font-size: 13.5px; color: var(--text); margin-bottom: 8px; }
.field-label-lg .dim { font-family: 'Barlow', sans-serif; font-weight: 400; color: var(--text-mute); text-transform: none; letter-spacing: 0; }
.field-hint { font-size: 12.5px; color: var(--text-mute); margin: 6px 0 0; }
.media-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.media-row input[type="file"] { color: var(--text-dim); font-size: 13.5px; max-width: 220px; }
.social-media-preview { margin-top: 12px; display: flex; gap: 10px; flex-wrap: wrap; }
.social-media-preview img, .social-media-preview video { width: 96px; height: 96px; object-fit: cover; border-radius: 8px; border: 1px solid var(--border-strong); }
.social-media-preview .remove-media {
  display: flex; align-items: center; justify-content: center; width: 96px; height: 96px; border-radius: 8px;
  border: 1px dashed rgba(244,95,176,.4); color: var(--pink); font-size: 13px; cursor: pointer; background: none;
}

.platform-checks { display: flex; flex-wrap: wrap; gap: 10px; }
.platform-check {
  display: flex; align-items: center; gap: 8px; background: var(--card-dark); border: 1px solid var(--border-strong);
  border-radius: 100px; padding: 9px 16px 9px 12px; cursor: pointer; font-size: 14px; color: var(--text);
}
.platform-check.disabled { opacity: .45; cursor: not-allowed; }
.platform-check input { accent-color: var(--cyan); }
.platform-check .badge { font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--text-mute); }

.checkbox-row { display: flex; align-items: center; gap: 10px; font-size: 14.5px; color: var(--text-dim); cursor: pointer; margin-bottom: 6px; }
.checkbox-row input { accent-color: var(--cyan); }
.radio-row { display: flex; align-items: center; gap: 8px; font-size: 14.5px; color: var(--text-dim); cursor: pointer; }
.radio-row input { accent-color: var(--cyan); }
.publish-row { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; margin-bottom: 22px; }
.publish-row input[type="datetime-local"] {
  width: auto; background: var(--card-dark); border: 1px solid var(--border-strong); border-radius: 8px;
  color: var(--text); padding: 10px 12px; font-size: 14px;
}
.publish-row input[type="datetime-local"]:disabled { opacity: .4; }

.composer-footer { display: flex; flex-direction: column; gap: 12px; }
.composer-footer-btns { display: flex; justify-content: flex-end; gap: 10px; }

.recent-posts { margin-top: 8px; }
.posts-table-wrap { background: var(--card); border: 1px solid var(--border); border-radius: 14px; overflow: hidden; overflow-x: auto; }
.posts-table { width: 100%; border-collapse: collapse; min-width: 640px; }
.posts-table th {
  text-align: left; font-family: 'Chakra Petch', sans-serif; font-weight: 700; font-size: 11px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--text-mute); padding: 14px 18px; border-bottom: 1px solid var(--border);
}
.posts-table td { padding: 14px 18px; border-bottom: 1px solid var(--border); font-size: 14px; color: var(--text-dim); vertical-align: middle; }
.posts-table tr:last-child td { border-bottom: none; }
.posts-table .post-excerpt { color: var(--text); max-width: 320px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: block; }
.post-status { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; font-weight: 700; border-radius: 100px; padding: 4px 10px; white-space: nowrap; }
.post-status.posted { color: var(--green); background: rgba(74,222,128,.12); }
.post-status.scheduled { color: var(--cyan); background: rgba(62,200,232,.12); }
.post-status.draft { color: var(--text-mute); background: rgba(232,230,245,.06); }
.post-status.failed { color: var(--pink); background: rgba(244,95,176,.12); }
.post-row-actions { display: flex; gap: 8px; white-space: nowrap; }
.post-row-actions button {
  background: none; border: 1px solid var(--border-strong); color: var(--text-dim); font-size: 12.5px; padding: 7px 11px;
  border-radius: 6px; cursor: pointer;
}
.post-row-actions button:hover { border-color: var(--cyan); color: var(--cyan); }
.post-row-actions button.danger:hover { border-color: var(--pink); color: var(--pink); }

.settings-card { background: var(--card); border: 1px solid var(--border); border-radius: 14px; padding: 22px; margin-bottom: 14px; max-width: 640px; }
.settings-card-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.settings-card h3 { font-family: 'Chakra Petch', sans-serif; font-weight: 700; font-size: 16px; margin: 0; }
.settings-card p { color: var(--text-mute); font-size: 13.5px; margin: 6px 0 0; }
.conn-status { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; font-weight: 700; border-radius: 100px; padding: 4px 10px; }
.conn-status.on { color: var(--green); background: rgba(74,222,128,.12); }
.conn-status.off { color: var(--text-mute); background: rgba(232,230,245,.06); }

.gallery-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(90px,1fr)); gap: 10px; max-height: 360px; overflow-y: auto; margin: 16px 0; }
.gallery-grid img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 8px; cursor: pointer; border: 1px solid var(--border-strong); }
.gallery-grid img:hover { border-color: var(--cyan); }
.gallery-empty { color: var(--text-mute); font-size: 14px; grid-column: 1 / -1; padding: 20px 0; text-align: center; }


/* =====================================================================
   MAIL SUITE (#admin-mail)
   ===================================================================== */
.mail-topbar {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  margin: 0 0 14px;
}
/* The current mailbox as a heading rather than a dropdown you have to
   read to find out where you are. */
.mail-title {
  font-family: 'Chakra Petch', sans-serif; font-size: 17px; font-weight: 700;
  margin: 0; letter-spacing: .01em;
}
.mail-title .mail-title-addr { color: var(--text-mute); font-weight: 400; font-size: 13px; margin-left: 8px; }
.mail-icon-btn {
  background: var(--card); border: 1px solid var(--border-strong); color: var(--text-dim);
  border-radius: 8px; width: 34px; height: 34px; cursor: pointer; font-size: 14px;
  display: inline-flex; align-items: center; justify-content: center;
}
.mail-icon-btn:hover { color: var(--cyan); border-color: var(--cyan); }
/* THE MAILBOX SELECT STAYS, for admins.
   v80 hid it from everyone on the grounds that the sidebar already picks
   the mailbox. Ryan overruled that and he is right: with a dozen
   addresses, jumping straight to one beats scanning a list, and the
   sidebar only pins a few. Regular staff still do not see it — they have
   two mailboxes and the sidebar shows both.
   Hidden with .hidden, never removed: compose reads the sending address
   out of this element. */
.mail-acting { display: flex; align-items: center; gap: 8px; }
.mail-acting.hidden { display: none; }
.mail-acting-label {
  font-size: 11px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--text-mute); font-weight: 700;
}
.mail-topbar select {
  background: var(--card); border: 1px solid var(--border-strong); color: var(--text);
  border-radius: 8px; padding: 9px 12px; font-size: 14px; font-family: inherit; min-width: 220px;
}
.mail-topbar-actions { display: flex; gap: 10px; margin-left: auto; }

/* Acting-as banner — a delegate should never be unsure which identity
   they're about to send from. */
/* Was a full-width orange panel. It is a standing fact about the
   mailbox, not a warning about anything that just happened, and it read
   as an error every time the page loaded. */
.mail-acting-banner {
  flex-basis: 100%; order: 3;
  color: var(--text-mute); font-size: 12.5px; padding: 0 2px;
}
.mail-acting-banner b { color: var(--orange); font-weight: 600; }
.mail-acting-banner b { color: #fff; }

.mail-layout {
  display: grid; grid-template-columns: 190px minmax(260px, 330px) 1fr;
  gap: 14px; align-items: start;
}
/* Windows display scaling at 150% turns a 1920 monitor into ~1280 CSS
   pixels, and 175% into ~1100. The old single-column cut-off was 1080,
   which is close enough to those to be worth moving well clear of. */
@media (max-width: 1240px) {
  .mail-layout { grid-template-columns: 168px minmax(230px, 280px) 1fr; gap: 12px; }
}

.mail-list-panel {
  background: var(--card); border: 1px solid var(--border); border-radius: 14px;
  overflow: hidden; display: flex; flex-direction: column; max-height: 72vh;
}
.mail-list-head {
  display: flex; justify-content: space-between; align-items: center;
  padding: 13px 16px; border-bottom: 1px solid var(--border);
  font-size: 13px; font-weight: 600;
}
.mail-list { overflow-y: auto; flex: 1; }

.mail-row {
  display: block; width: 100%; text-align: left; background: none; border: none;
  border-bottom: 1px solid rgba(232,230,245,.06); padding: 12px 16px;
  cursor: pointer; color: var(--text-dim); font-family: inherit;
}
.mail-row:hover { background: rgba(62,200,232,.05); }
.mail-row.active { background: rgba(62,200,232,.1); border-left: 2px solid var(--cyan); }
/* Read vs unread.
   Two changes at once, because one on its own is easy to miss at a
   glance: unread goes bright white and bold across the WHOLE row, and
   read is actively dimmed rather than merely "not bold". A list where
   everything is the same weight is a list nobody scans. */
.mail-row.unread { background: rgba(62, 200, 232, .04); }
.mail-row.unread .mail-row-from,
.mail-row.unread .mail-row-subject {
  color: #fff; font-weight: 700;
}
.mail-row.unread .mail-row-snippet { color: var(--text-dim); }
.mail-row.unread .mail-row-date { color: var(--cyan); font-weight: 600; }

.mail-row:not(.unread) .mail-row-from,
.mail-row:not(.unread) .mail-row-subject { color: var(--text-dim); font-weight: 400; }
.mail-row:not(.unread) .mail-row-snippet { color: var(--text-mute); }

/* The dot is the fastest read of all — position, not typography. */
.unread-dot {
  display: inline-block; width: 7px; height: 7px; border-radius: 50%;
  background: var(--cyan); margin-right: 7px; vertical-align: middle; flex: none;
}
.mail-row-top { display: flex; justify-content: space-between; gap: 10px; margin-bottom: 3px; }
.mail-row-from { font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mail-row-date { font-size: 11.5px; color: var(--text-mute); flex-shrink: 0; }
.mail-row-subject { font-size: 13.5px; margin-bottom: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mail-row-snippet {
  font-size: 12.5px; color: var(--text-mute); overflow: hidden;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; line-clamp: 2;
}

.mail-reader {
  background: var(--card); border: 1px solid var(--border); border-radius: 14px;
  padding: 22px; min-height: 320px; max-height: 72vh; overflow-y: auto;
}
/* ---------- Reading pane: expanded ----------
   One message gets the whole width and as much height as the window
   allows. The columns are hidden rather than the reader being moved,
   so nothing is re-rendered and the open message stays open. */
.mail-layout.mail-expanded { grid-template-columns: 1fr; }
/* The WHOLE sidebar goes, not just the folders. Hiding the folders but
   leaving the inbox buttons made them stretch to full width above the
   reader, which is the single thing that made the page look broken. */
.mail-layout.mail-expanded .mail-side,
.mail-layout.mail-expanded .mail-list-panel { display: none; }
.mail-layout.mail-expanded .mail-reader { max-height: none; }
.mail-layout.mail-expanded .mail-body-frame {
  height: calc(100vh - 300px); min-height: 560px;
}

.mail-empty { color: var(--text-mute); font-size: 14px; text-align: center; padding: 48px 16px; }
.mail-reader-head { border-bottom: 1px solid var(--border); padding-bottom: 14px; margin-bottom: 14px; }
.mail-subject { font-family: 'Chakra Petch', sans-serif; font-size: 19px; margin: 0 0 8px; }
.mail-meta { font-size: 13px; color: var(--text-dim); margin-bottom: 3px; word-break: break-word; }
.mail-sentby { font-size: 12px; margin-top: 6px; }

.mail-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }

.mail-warn {
  background: rgba(244,95,176,.1); border: 1px solid rgba(244,95,176,.34);
  color: #ffc4e2; border-radius: 8px; padding: 8px 12px; font-size: 13px; margin-top: 8px;
}

.mail-tracking {
  background: rgba(62,200,232,.07); border: 1px solid rgba(62,200,232,.24);
  border-radius: 8px; padding: 10px 13px; font-size: 13px; margin-bottom: 14px;
}
.mail-tracking .field-hint { margin: 5px 0 0; display: block; }

.mail-attachments { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.mail-att {
  display: inline-flex; align-items: center; gap: 6px; font-size: 13px;
  background: rgba(232,230,245,.05); border: 1px solid var(--border-strong);
  border-radius: 8px; padding: 7px 11px; color: var(--text-dim); text-decoration: none;
}
.mail-att:hover { border-color: var(--cyan); color: var(--cyan); }

/* Message bodies render in a sandboxed iframe — see renderMailBody(). */
/* The frame runs on an opaque origin (no allow-same-origin, and that is
   not negotiable), so its content height cannot be measured from here —
   it gets a sensible default and a drag handle instead of a guess. */
.mail-body-frame {
  width: 100%; border: 0; background: transparent;
  min-height: 160px; height: 620px; resize: vertical; overflow: auto;
  display: block;
}

/* --- compose --- */
.mail-compose-box { max-width: 700px; }
.mail-compose-from { font-size: 13px; color: var(--text-mute); margin: 0 0 14px; }
.mail-cc-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.mail-compose-opts {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin: 12px 0;
}
.mail-quoted-wrap { margin: 10px 0; }
.mail-quoted {
  border-left: 2px solid var(--border-strong); padding: 8px 0 8px 12px; margin-top: 8px;
  color: var(--text-mute); font-size: 12.5px; max-height: 220px; overflow-y: auto;
  white-space: pre-wrap;
}
.mail-check { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; color: var(--text-dim); }
.mail-check input { width: auto; margin: 0; }

/* --- mailbox admin + settings --- */
/* 460px minimum, not 320 — these cards hold tables of full email
   addresses, and at 320 the columns collapsed and the row content spilled
   past the card edge. min() keeps it from overflowing narrow viewports. */
.mail-admin-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 460px), 1fr));
  gap: 16px;
  align-items: start;
}
.mail-admin-wide { grid-column: 1 / -1; }
.mail-admin-card {
  background: var(--card); border: 1px solid var(--border); border-radius: 14px; padding: 22px;
}
.mail-admin-card h3 { font-size: 16px; margin: 0 0 6px; }
.mail-admin-card textarea,
.mail-admin-card input[type=text],
.mail-admin-card input[type=email] { width: 100%; margin-bottom: 10px; }

/* Was a flex row, which pushed checkboxes onto their own lines and left
   inputs at wildly different widths. A grid keeps fields aligned and lets
   full-width items span cleanly. */
.mail-inline-form {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 10px; align-items: center;
  margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--border);
}
/* :not([type=checkbox]) matters. Without it this rule also matched the
   checkbox INSIDE .mail-check and, having equal specificity to
   `.mail-check input { width: auto }` but coming later, won — stretching
   each checkbox across the whole row and pushing its label to the far
   right, yards from the box it belonged to. */
.mail-inline-form input:not([type="checkbox"]),
.mail-inline-form select { min-width: 0; margin: 0; width: 100%; }

/* Both checkboxes share one row rather than each claiming a full row. */
.mail-inline-form .mail-checks {
  grid-column: 1 / -1; display: flex; gap: 22px; flex-wrap: wrap; align-items: center;
}
.mail-inline-form .mail-check { white-space: nowrap; }
.mail-inline-form button { grid-column: 1 / -1; justify-self: start; }

.mail-date-row { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.mail-date-row label { font-size: 12.5px; color: var(--text-mute); display: flex; flex-direction: column; gap: 4px; }

/* Tables of email addresses are wider than any card. Scroll them inside
   their own container rather than letting rows spill out of the card. */
.mail-table-wrap { overflow-x: auto; margin: 0 -4px; padding: 0 4px; }
.mail-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.mail-table td {
  padding: 9px 12px 9px 0; border-bottom: 1px solid rgba(232,230,245,.06);
  vertical-align: middle;
}
.mail-table tr:last-child td { border-bottom: none; }
/* The address column must never wrap mid-address. */
.mail-table td:first-child { white-space: nowrap; }
.mail-table td:last-child { padding-right: 0; }
.mail-table .num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }

.pill-sm {
  font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; font-weight: 700;
  border-radius: 100px; padding: 3px 8px; background: rgba(62,200,232,.13);
  color: var(--cyan); white-space: nowrap;
}
/* Full send-as is the setting that makes a delegate indistinguishable
   from the mailbox owner — flag it visually so it's a deliberate choice. */
.pill-sm.warn { background: rgba(255,179,92,.14); color: #ffb35c; }

/* Below this there genuinely is not room for three columns. The
   sidebar becomes a horizontal strip rather than a stack of full-width
   buttons — see the .mail-boxes rule further down. */
@media (max-width: 900px) {
  .mail-layout { grid-template-columns: 1fr; }
  .mail-list-panel { max-height: 340px; }
  .mail-reader { max-height: none; }
}
@media (max-width: 640px) {
  .mail-topbar-actions { margin-left: 0; width: 100%; }
  .mail-topbar-actions .search-input { flex: 1; min-width: 0; }
  .mail-topbar select { min-width: 0; width: 100%; }
  .mail-acting { width: 100%; }
  .mail-cc-row { grid-template-columns: 1fr; }
  .mail-admin-grid { grid-template-columns: 1fr; }
}

/* =====================================================================
   AUTH FLOW (multi-step sign-in) + PROFILE + USERS
   ===================================================================== */
.auth-title { margin: 10px 0 6px; font-size: 24px; }
.auth-sub { color: var(--text-dim); margin: 0 0 20px; font-size: 14.5px; line-height: 1.55; }

.auth-methods { display: flex; flex-direction: column; gap: 10px; margin-bottom: 14px; }
.auth-method {
  display: flex; align-items: flex-start; gap: 13px; width: 100%; text-align: left;
  background: rgba(232,230,245,.04); border: 1px solid var(--border-strong);
  border-radius: 12px; padding: 15px 16px; cursor: pointer; color: var(--text);
  font-family: inherit; transition: border-color .15s, background .15s;
}
.auth-method:hover { border-color: var(--cyan); background: rgba(62,200,232,.07); }
.auth-method-icon { font-size: 22px; line-height: 1; flex-shrink: 0; }
.auth-method b { display: block; font-size: 14.5px; margin-bottom: 3px; }
.auth-method small { color: var(--text-mute); font-size: 12.5px; line-height: 1.45; display: block; }

/* QR is rendered by our own Worker as inline SVG — white plate behind it
   because scanners need the light quiet zone to be actually light. */
.auth-qr {
  background: #fff; border-radius: 12px; padding: 12px; width: fit-content;
  margin: 0 auto 16px; line-height: 0;
}
.auth-qr svg { display: block; max-width: 100%; height: auto; }

.auth-manual { margin-bottom: 16px; font-size: 13px; color: var(--text-dim); }
.auth-manual summary { cursor: pointer; color: var(--cyan); }
.auth-manual p { margin: 10px 0 6px; }
.auth-key {
  display: block; background: rgba(232,230,245,.06); border: 1px solid var(--border-strong);
  border-radius: 8px; padding: 10px 12px; font-family: ui-monospace, Menlo, Consolas, monospace;
  font-size: 14px; letter-spacing: .12em; word-break: break-all; color: var(--text);
}

#step-scan input, #step-2fa input {
  text-align: center; font-size: 22px; letter-spacing: .3em;
  font-family: ui-monospace, Menlo, Consolas, monospace;
}
.auth-alt { margin-top: 14px; display: flex; flex-direction: column; gap: 6px; }
.linkish {
  background: none; border: none; color: var(--cyan); cursor: pointer;
  font-family: inherit; font-size: 13.5px; padding: 0; text-align: left;
}
.linkish:hover { text-decoration: underline; }

.recovery-list {
  list-style: none; padding: 0; margin: 0 0 14px;
  display: grid; grid-template-columns: 1fr 1fr; gap: 8px;
}
.recovery-list code {
  display: block; background: rgba(232,230,245,.06); border: 1px solid var(--border-strong);
  border-radius: 7px; padding: 9px 11px; font-size: 14px; letter-spacing: .08em;
  font-family: ui-monospace, Menlo, Consolas, monospace; text-align: center;
}

/* --- profile --- */
.avatar-row { display: flex; gap: 16px; align-items: flex-start; }
.avatar-preview {
  width: 72px; height: 72px; border-radius: 50%; object-fit: cover;
  border: 2px solid var(--border-strong); flex-shrink: 0; background: var(--card);
}
.avatar-mini { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; display: block; }

.profile-facts { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 8px 16px; font-size: 13.5px; }
.profile-facts dt { color: var(--text-mute); font-weight: 600; }
.profile-facts dd { margin: 0; color: var(--text); }

/* --- users --- */
.user-form { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; }
.user-form label { display: flex; flex-direction: column; gap: 5px; font-size: 12.5px; color: var(--text-mute); }
.user-form input, .user-form select { margin: 0; }
.user-form-note, .user-form button { grid-column: 1 / -1; }
.user-form button { justify-self: start; }

.addr-input { display: flex; align-items: stretch; }
.addr-input input { border-top-right-radius: 0; border-bottom-right-radius: 0; flex: 1; min-width: 0; }
.addr-suffix {
  display: flex; align-items: center; padding: 0 11px; font-size: 13px; color: var(--text-mute);
  background: rgba(232,230,245,.05); border: 1px solid var(--border-strong); border-left: none;
  border-radius: 0 8px 8px 0; white-space: nowrap;
}
.user-actions { display: flex; gap: 6px; flex-wrap: wrap; }

@media (max-width: 560px) {
  .recovery-list { grid-template-columns: 1fr; }
  .avatar-row { flex-direction: column; }
  .user-form { grid-template-columns: 1fr; }
}

/* --- DMARC summary --- */
.dmarc-range { display: flex; gap: 8px; margin-bottom: 14px; }
.dmarc-verdict {
  border-left: 3px solid var(--border-strong); padding: 12px 16px; margin-bottom: 16px;
  background: rgba(232,230,245,.04); border-radius: 0 8px 8px 0;
}
.dmarc-verdict.ok { border-left-color: var(--green); background: rgba(74,222,128,.07); }
.dmarc-verdict.warn { border-left-color: var(--pink); background: rgba(244,95,176,.07); }
.dmarc-verdict b { display: block; margin-bottom: 5px; font-size: 14.5px; }
.dmarc-verdict p { margin: 0; font-size: 13.5px; color: var(--text-dim); line-height: 1.55; }

.dmarc-stats { display: flex; flex-wrap: wrap; gap: 22px; margin-bottom: 16px; }
.dmarc-stats div { display: flex; flex-direction: column; font-size: 11.5px; color: var(--text-mute);
  text-transform: uppercase; letter-spacing: .06em; }
.dmarc-stats span { font-size: 21px; color: var(--text); font-weight: 700; letter-spacing: 0;
  text-transform: none; font-family: 'Chakra Petch', sans-serif; }

.mail-table .nowrap { white-space: nowrap; }

/* Orders table — the only admin table with a header row, because a
   column of bare dollar amounts and statuses is unreadable without one. */
.ord-table th {
  text-align: left; padding: 8px 14px 8px 0; font-size: 10.5px; letter-spacing: .13em;
  text-transform: uppercase; color: var(--text-mute); font-weight: 600;
  border-bottom: 1px solid var(--border-strong); white-space: nowrap;
}
.ord-table td { vertical-align: top; }
.ord-table code { font-size: 12.5px; color: var(--cyan); }
.ord-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.ord-actions select { font-size: 12.5px; padding: 6px 8px; }

/* --- "Hello, <name>" in the admin header --- */
.whoami {
  display: flex; align-items: center; gap: 10px; margin-right: 4px;
  min-width: 0; flex: 0 1 auto; max-width: 240px;
}
.whoami-avatar {
  width: 34px; height: 34px; border-radius: 50%; object-fit: cover; flex-shrink: 0;
  border: 1px solid var(--border-strong); background: var(--card);
}
.whoami-text { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.whoami-text b {
  font-size: 13.5px; color: var(--text);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.whoami-text small {
  font-size: 11.5px; color: var(--text-mute);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
@media (max-width: 720px) {
  /* Keep the avatar as the signed-in cue; the text would crowd the row. */
  .whoami-text { display: none; }
}

/* Header button once we know who is signed in. Distinct from the
   signed-out state on purpose: the whole confusion was a button that
   said "Log In" to someone who already was. */
.btn-login.is-signed-in {
  border-color: var(--cyan);
  color: var(--cyan);
  text-transform: none;
  letter-spacing: .2px;
}
.btn-login.is-signed-in::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%;
  background: var(--green); margin-right: 8px; flex: none;
}
.acct-notyou { font-size: 13px; margin-top: 6px; }

/* Player admin */
.pl-blocked-list { list-style: none; padding: 0; margin: 8px 0 0; display: grid; gap: 6px; font-size: 13.5px; }
.pl-blocked-list li { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.mail-table td.nowrap { white-space: nowrap; }
.mail-table td.nowrap .linkish { margin-right: 10px; }

/* Two-step: one row per factor, because they are independent */
.twofa-list { list-style: none; padding: 0; margin: 14px 0 0; display: grid; gap: 10px; }
.twofa-list li {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 12px 14px; border: 1px solid var(--border); border-radius: 10px; flex-wrap: wrap;
}
.twofa-list strong { display: block; font-size: 14px; }
.twofa-list .field-hint { margin: 2px 0 0; }
.twofa-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }

/* Admin overview stats */
.stat-grid {
  display: grid; gap: 12px; margin-top: 14px;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
}
.stat { background: var(--bg-deep); border: 1px solid var(--border); border-radius: 10px; padding: 14px 16px; }
.stat-value { font-family: 'Chakra Petch', sans-serif; font-weight: 700; font-size: 26px; line-height: 1.1; color: var(--cyan); }
.stat-label { font-size: 12.5px; color: var(--text); margin-top: 4px; }
.stat-note { font-size: 11.5px; color: var(--text-mute); margin-top: 3px; }

/* Tracking checkbox warning — this one setting sent two test emails
   straight to spam, so it says so where the decision is made. */
.mail-track-warn {
  max-width: 560px; margin: 6px 0 4px; line-height: 1.5;
  border-left: 2px solid var(--pink); padding-left: 10px;
}
.mail-check-warn { font-weight: 600; }

/* ---------------------------------------------------------------------
   Roles & permissions
   --------------------------------------------------------------------- */
.role-badge {
  display: inline-block; font-size: 10.5px; letter-spacing: .09em; text-transform: uppercase;
  font-weight: 700; padding: 3px 8px; border-radius: 999px; white-space: nowrap;
  border: 1px solid var(--border-strong); color: var(--text-mute); vertical-align: middle;
}
.role-badge.none { opacity: .65; }
.role-select { font-size: 12.5px; padding: 7px 9px; width: auto; min-width: 130px; }
.user-role-cell { white-space: nowrap; }

.role-card { background: var(--card-dark); border: 1px solid var(--border); border-radius: 12px; padding: 14px 16px; margin-bottom: 10px; }
.role-card-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 6px; }
.role-perm-summary { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
.perm-chip {
  font-size: 11.5px; padding: 3px 9px; border-radius: 6px;
  background: rgba(62, 200, 232, .1); color: var(--text-dim); border: 1px solid var(--border);
}

.role-editor { margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--border-strong); }
.role-editor-top { display: grid; grid-template-columns: 1fr 150px; gap: 14px; }
.role-editor-top input[type="color"] { height: 46px; padding: 4px; cursor: pointer; }
.perm-group { margin-top: 18px; }
.perm-row { display: flex; gap: 11px; align-items: flex-start; padding: 9px 2px; cursor: pointer; }
/* Not a bare `input` — that would stretch the checkbox to full width and
   shove the label off to the right. This project has had that bug twice. */
.perm-row input[type="checkbox"] { width: auto; margin: 3px 0 0; flex: none; }
.perm-row b { display: block; font-size: 14px; font-weight: 600; color: var(--text); }
.perm-row small { display: block; font-size: 12.5px; color: var(--text-mute); margin-top: 2px; line-height: 1.45; }

/* ---------------------------------------------------------------------
   Tickets
   --------------------------------------------------------------------- */
.tk-toolbar { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; margin-bottom: 16px; }
.tk-filters { display: flex; gap: 8px; flex-wrap: wrap; }
.tk-toolbar-right { display: flex; gap: 10px; align-items: center; }
.chip-count { opacity: .7; font-variant-numeric: tabular-nums; }

.tk-layout { display: grid; grid-template-columns: minmax(280px, 380px) 1fr; gap: 16px; align-items: start; }
.tk-list-panel {
  background: var(--card); border: 1px solid var(--border); border-radius: 14px;
  overflow: hidden; display: flex; flex-direction: column; max-height: 72vh;
}
.tk-list { overflow-y: auto; flex: 1; }

.tk-row {
  display: block; width: 100%; text-align: left; background: none; border: none;
  border-bottom: 1px solid rgba(232,230,245,.06); padding: 12px 16px; cursor: pointer;
  color: var(--text-dim); font-family: inherit;
}
.tk-row:hover { background: rgba(62,200,232,.05); }
.tk-row.active { background: rgba(62,200,232,.1); border-left: 2px solid var(--cyan); }
.tk-row-top { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 4px; }
.tk-ref { font-family: 'Chakra Petch', sans-serif; font-weight: 700; font-size: 12.5px; color: var(--cyan); letter-spacing: .04em; }
.tk-ref.big { font-size: 15px; }
.tk-row-subject { font-size: 14px; color: var(--text); margin-bottom: 6px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tk-row-foot { display: flex; gap: 7px; align-items: center; flex-wrap: wrap; }

.tk-prio { font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; font-weight: 700; color: var(--text-mute); }
.tk-prio.high { color: var(--orange); }
.tk-prio.urgent { color: var(--pink); }
.tk-prio.low { opacity: .6; }

.tk-status-pill {
  font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; font-weight: 700;
  padding: 3px 8px; border-radius: 999px; background: rgba(232,230,245,.07); color: var(--text-mute);
}
.tk-status-pill.open { color: var(--green); background: rgba(74,222,128,.12); }
.tk-status-pill.claimed { color: var(--cyan); background: rgba(62,200,232,.12); }
.tk-status-pill.pending { color: var(--orange); background: rgba(255,179,92,.12); }
.tk-owner { font-size: 12px; color: var(--text-dim); }
.tk-owner.unclaimed { color: var(--orange); font-weight: 600; }
.tk-collab { font-size: 11.5px; color: var(--text-mute); }

.tk-detail { background: var(--card); border: 1px solid var(--border); border-radius: 14px; padding: 22px; min-height: 320px; max-height: 72vh; overflow-y: auto; }
.tk-detail-head { display: flex; justify-content: space-between; gap: 18px; align-items: flex-start; border-bottom: 1px solid var(--border); padding-bottom: 14px; margin-bottom: 14px; flex-wrap: wrap; }
.tk-detail-subject { font-family: 'Chakra Petch', sans-serif; font-size: 19px; margin: 6px 0; }
.tk-detail-meta { font-size: 13px; color: var(--text-dim); word-break: break-word; }
.tk-detail-badges { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }

.tk-owner-row, .tk-collab-row {
  display: flex; justify-content: space-between; gap: 16px; align-items: center; flex-wrap: wrap;
  padding: 13px 0; border-bottom: 1px solid var(--border);
}
.tk-owner-name { font-size: 14px; margin-top: 5px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.tk-owner-actions { display: flex; gap: 9px; align-items: center; flex-wrap: wrap; }
.tk-owner-actions select, .tk-collab-row select { width: auto; min-width: 175px; font-size: 13px; padding: 9px 10px; }
.btn-submit.sm, .btn-cancel.sm { padding: 9px 15px; font-size: 12.5px; }

.tk-collab-list { display: flex; gap: 7px; flex-wrap: wrap; align-items: center; flex: 1; }
.tk-collab-chip {
  display: inline-flex; align-items: center; gap: 7px; font-size: 13px;
  background: var(--card-dark); border: 1px solid var(--border); border-radius: 999px; padding: 5px 11px;
}
.tk-x { background: none; border: none; color: var(--text-mute); cursor: pointer; padding: 0 2px; font-size: 12px; }
.tk-x:hover { color: var(--pink); }

.tk-controls { display: flex; gap: 16px; align-items: flex-end; flex-wrap: wrap; padding: 14px 0; border-bottom: 1px solid var(--border); }
.tk-control { display: flex; flex-direction: column; gap: 5px; }
.tk-control select { width: auto; min-width: 130px; font-size: 13px; padding: 9px 10px; }

.tk-body { margin: 16px 0; }
.tk-body pre { white-space: pre-wrap; word-wrap: break-word; font-family: inherit; font-size: 13.5px; color: var(--text-dim); background: var(--card-dark); border: 1px solid var(--border); border-radius: 10px; padding: 14px; margin: 0; }

.tk-timeline { display: flex; flex-direction: column; gap: 8px; }
.tk-event { display: flex; gap: 11px; align-items: baseline; font-size: 13px; color: var(--text-dim); flex-wrap: wrap; }
.tk-event-when { font-size: 11.5px; color: var(--text-mute); white-space: nowrap; min-width: 145px; }

@media (max-width: 900px) {
  .tk-layout { grid-template-columns: 1fr; }
  .tk-list-panel { max-height: 340px; }
  .tk-detail { max-height: none; }
  .role-editor-top { grid-template-columns: 1fr; }
}

/* The "this address already has an account" note on the staff form.
   A player account on the same address is normal, so this reads as
   information rather than an error — only an existing STAFF account is
   highlighted as a problem. */
.link-note { line-height: 1.55; }
.link-note .warn-text { color: var(--orange); }
.pill-sm { font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; font-weight: 700; padding: 2px 7px; border-radius: 999px; background: rgba(62,200,232,.12); color: var(--cyan); }
.pill-sm.warn { background: rgba(255,179,92,.14); color: var(--orange); }

/* "Updated 04:51" / "2 new" beside the Refresh button. Small and quiet:
   it is a reassurance that the page is live, not a notification. */
.mail-autorefresh { font-size: 11.5px; color: var(--text-mute); white-space: nowrap; }


/* ---------- Mail sidebar: inboxes above folders ---------- */
.mail-side { display: flex; flex-direction: column; gap: 18px; }
.mail-boxes, .mail-folders { display: flex; flex-direction: column; gap: 4px; }
.mail-side-label {
  font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--text-mute); font-weight: 700; padding: 0 4px 6px;
}
/* A whole mailbox is a bigger thing than a folder within one, and reads
   as such — otherwise "Support inbox" and "Drafts" look like siblings. */
.mailbox-btn.box {
  border: 1px solid var(--border); border-radius: 10px; background: var(--card-dark);
}
.mailbox-btn.box.active { border-color: var(--cyan); background: rgba(62, 200, 232, .1); }
.mailbox-btn.box .mb-name {
  font-family: 'Chakra Petch', sans-serif; font-weight: 700; font-size: 13px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

@media (max-width: 900px) {
  .mail-side { flex-direction: column; }
  .mail-boxes { flex-direction: row; overflow-x: auto; padding-bottom: 4px; }
  .mail-boxes .mailbox-btn { flex: 0 0 auto; }
}

/* Inbound rules */
.rule-form { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(180px, 100%), 1fr)); gap: 12px; margin-top: 12px; }
.rule-off { opacity: .45; }
.rule-off code { text-decoration: line-through; }

/* Ticket primary actions — Resolve / Escalate / Reopen */
.tk-primary-actions { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; padding: 14px 0; border-bottom: 1px solid var(--border); }
.tk-escalated, .tk-junk {
  font-size: 10.5px; letter-spacing: .09em; text-transform: uppercase; font-weight: 700;
  padding: 4px 10px; border-radius: 999px;
}
.tk-escalated { color: var(--orange); background: rgba(255,179,92,.14); }
.tk-junk { color: var(--text-mute); background: rgba(232,230,245,.07); }
.tk-escalation-note { color: var(--orange); font-size: 13px; margin: 10px 0 0; }
/* Stated, not merely implied by a missing button — people need to know
   WHY they cannot resolve something yet. */
.tk-warn { color: var(--orange); font-size: 13px; margin: 10px 0 0; }
.tk-nodelete { font-size: 12px; color: var(--text-mute); padding: 9px 4px; font-style: italic; }
.tk-hint { font-size: 13px; color: var(--text-mute); font-style: italic; }
.tk-row-game { font-size: 11.5px; color: var(--cyan); margin-bottom: 5px; letter-spacing: .03em; }

/* Resolve is separated from the rest of the action bar on purpose: it
   ends the conversation, and a mis-aimed click on a crowded row is how
   a live request gets closed. */
.mail-actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
/* A real divider element rather than margin-left:auto. Pushing Resolve
   to the far edge meant its position changed with the window width —
   sometimes beside Spam, sometimes alone on a new row. A divider keeps
   it in the same place relative to its neighbours at every size. */
.mail-action-sep {
  width: 1px; align-self: stretch; min-height: 24px;
  background: var(--border-strong); margin: 0 6px;
}
.mail-actions .mail-resolve { font-weight: 700; }

/* ---------- Sidebar pickers (inboxes / folders) ----------
   Same shape as the store's game picker. A stacked list stops being
   scannable somewhere around five entries; past that you read all of
   them to find one. */
.side-picker { position: relative; margin-top: 4px; }
.side-picker-btn {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 10px 12px; border-radius: 10px; background: var(--card-dark);
  border: 1px solid var(--border); color: var(--text-dim); cursor: pointer; font-size: 13px;
  text-align: left;
}
.side-picker-btn:hover, .side-picker.open .side-picker-btn { border-color: var(--cyan); color: var(--text); }
.sp-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sp-caret { color: var(--text-mute); flex: none; transition: transform .15s ease; }
.side-picker.open .sp-caret { transform: rotate(180deg); }

.side-picker-panel {
  position: absolute; z-index: 40; top: calc(100% + 6px); left: 0; right: 0;
  background: var(--card-dark); border: 1px solid var(--cyan); border-radius: 10px;
  overflow: hidden; box-shadow: 0 18px 40px rgba(0,0,0,.55);
}
.side-picker-panel input { width: 100%; border: none; border-bottom: 1px solid var(--border); border-radius: 0; font-size: 13px; }
.side-picker-list { max-height: 260px; overflow-y: auto; padding: 5px; }
.sp-option {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 9px 11px; border-radius: 7px; background: none; border: none;
  color: var(--text-dim); cursor: pointer; font-size: 13px; text-align: left;
}
.sp-option:hover, .sp-option.cursor { background: rgba(62,200,232,.12); color: var(--text); }
.sp-option.active { color: var(--cyan); font-weight: 600; }
.sp-empty { padding: 14px 12px; color: var(--text-mute); font-size: 13px; text-align: center; }

/* People: filter + sort controls */
.users-controls { display: flex; gap: 14px; align-items: flex-end; flex-wrap: wrap; margin-bottom: 14px; }
.ck-field.inline { padding: 0; background: none; border: none; }
.ck-field.inline select { width: auto; min-width: 165px; font-size: 13px; padding: 9px 10px; }

/* =====================================================================
   CHECKOUT  —  /store/checkout/
   Ported from the Claude Design prototype (Checkout.dc.html).

   The checkout was designed as a standalone shell and does not share the
   site's palette or typefaces: it is green and IBM Plex where the rest of
   typicalserver.com is cyan and Chakra Petch. That is faithful to the
   design rather than an accident.

   EVERY COLOUR BELOW COMES FROM --co-*. Switching the accent to the site
   cyan is one line — set --co-accent and --co-accent-2 — rather than a
   hunt through four hundred lines of rules.

   Scoped under .co-body so none of it can leak onto another page.
   ===================================================================== */
.co-body {
  --co-bg: #08070f;
  --co-panel: #0d0c17;
  --co-inset: #12111c;
  --co-sunk: #0e0d18;
  --co-line: #1e1c2e;
  --co-line-2: #222034;
  --co-line-3: #272438;
  --co-text: #eae8f5;
  --co-dim: #a8a4bd;
  --co-mute: #8b87a3;
  --co-faint: #6b6884;
  --co-ghost: #5f5c78;
  --co-accent: #9fe870;
  --co-accent-2: #5ec14a;
  --co-warn: #e8b250;
  --co-bad: #e87070;
  --co-sans: 'IBM Plex Sans', system-ui, sans-serif;
  --co-head: 'Space Grotesk', system-ui, sans-serif;
  --co-mono: 'IBM Plex Mono', ui-monospace, monospace;

  background: var(--co-bg);
  color: var(--co-text);
  font-family: var(--co-sans);
}
.co-body a { color: var(--co-accent); text-decoration: none; }
.co-body a:hover { color: #c6f5a5; }
.co-body input, .co-body select, .co-body button, .co-body textarea { font-family: inherit; }
.co-body input::placeholder { color: #4b4863; }
.co-body select option { background: var(--co-inset); color: var(--co-text); }
.co-body main.page { padding: 0; }

/* ---------- header ---------- */
.co-header {
  display: flex; align-items: center; justify-content: space-between;
  gap: 20px; flex-wrap: wrap;
  padding: 18px 40px;
  border-bottom: 1px solid #1c1a2b;
  background: rgba(8, 7, 15, .85);
  backdrop-filter: blur(8px);
  position: sticky; top: 0; z-index: 5;
}
.co-logo img { height: 34px; width: auto; display: block; }
.co-secure {
  display: flex; align-items: center; gap: 9px;
  font-family: var(--co-mono); font-size: 11.5px;
  color: var(--co-mute); letter-spacing: .04em;
}
.co-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--co-accent); box-shadow: 0 0 10px var(--co-accent);
  flex: none;
}

/* ---------- page frame ---------- */
.co-page {
  min-height: 100vh;
  background: var(--co-bg);
  background-image:
    radial-gradient(900px 500px at 15% -10%, rgba(159, 232, 112, .09), transparent 60%),
    radial-gradient(700px 400px at 90% 0%, rgba(120, 110, 255, .07), transparent 60%);
  padding-bottom: 80px;
}
.co-pad { max-width: 1180px; margin: 0 auto; padding: 0 40px; }

.co-crumb {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 26px 0 6px;
  font-family: var(--co-mono); font-size: 11.5px;
  color: var(--co-faint); letter-spacing: .06em;
}
.co-crumb a { color: var(--co-faint); }
.co-crumb a:hover { color: var(--co-accent); }
.co-crumb-sep { color: #3a3750; }
.co-crumb-here { color: var(--co-accent); }

.co-h1 {
  font-family: var(--co-head); font-size: 44px; line-height: 1.05;
  font-weight: 700; margin: 6px 0 8px; letter-spacing: -.02em;
}
.co-sub { margin: 0 0 30px; color: var(--co-mute); font-size: 15px; max-width: 620px; line-height: 1.6; }

.co-grid {
  display: grid; grid-template-columns: minmax(0, 1fr) 372px;
  gap: 28px; align-items: start;
}
.co-main { display: flex; flex-direction: column; gap: 18px; min-width: 0; }

/* ---------- panels ---------- */
.co-panel {
  border: 1px solid var(--co-line); border-radius: 18px;
  background: var(--co-panel); padding: 26px 28px;
}
.co-loading { color: var(--co-mute); font-size: 15px; }
.co-loading p { margin: 0; }
.co-panel-head { display: flex; align-items: baseline; gap: 12px; margin-bottom: 20px; }
.co-panel-head h2 { font-family: var(--co-head); font-size: 18px; margin: 0; font-weight: 600; }
.co-panel-head-split { justify-content: space-between; flex-wrap: wrap; }
.co-panel-head-split > div { display: flex; align-items: baseline; gap: 12px; }
.co-step { font-family: var(--co-mono); font-size: 11.5px; color: var(--co-accent); letter-spacing: .08em; }
.co-mono-dim { font-family: var(--co-mono); font-size: 11px; color: var(--co-faint); letter-spacing: .06em; }
.co-panel-foot {
  margin: 16px 0 0; padding-top: 16px; border-top: 1px solid var(--co-line);
  font-size: 13px; color: var(--co-mute); line-height: 1.6;
}

/* ---------- basket lines ---------- */
.co-lines { display: flex; flex-direction: column; gap: 12px; }
.co-line {
  display: flex; align-items: center; gap: 14px;
  border: 1px solid var(--co-line-2); border-radius: 12px;
  background: var(--co-inset); padding: 14px 16px;
}
.co-line-art {
  width: 46px; height: 46px; border-radius: 9px; flex: none;
  border: 1px solid var(--co-line-3);
  background: repeating-linear-gradient(45deg, #1c1a2b, #1c1a2b 6px, #232135 6px, #232135 12px);
}
.co-line-body { flex: 1; min-width: 0; }
.co-line-top { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.co-line-name { font-family: var(--co-head); font-weight: 600; font-size: 15.5px; }
.co-badge {
  font-family: var(--co-mono); font-size: 10px; letter-spacing: .08em;
  padding: 3px 7px; border-radius: 5px;
  color: var(--co-mute); background: #1a1828; border: 1px solid var(--co-line-3);
}
.co-line-meta { font-size: 12.5px; color: var(--co-mute); margin-top: 4px; }
.co-line-right { text-align: right; }
.co-line-price { font-family: var(--co-mono); font-size: 14.5px; }
.co-line-term { font-family: var(--co-mono); font-size: 11px; color: var(--co-faint); margin-top: 3px; }

/* ---------- fields ---------- */
.co-two { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.co-span2 { grid-column: span 2; }
.co-field { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.co-label { font-size: 13px; color: var(--co-dim); font-weight: 500; }
.co-sublabel { font-size: 13px; color: var(--co-mute); }
.co-hint { font-size: 12px; color: var(--co-faint); }
.co-body .co-field input,
.co-body .co-field select,
.co-body .co-inline input {
  width: 100%; background: var(--co-inset);
  border: 1px solid var(--co-line-3); border-radius: 10px;
  padding: 13px 15px; color: var(--co-text); font-size: 15px; outline: none;
}
.co-body .co-field select { appearance: none; }
.co-body .co-field input:focus,
.co-body .co-field select:focus,
.co-body .co-inline input:focus {
  border-color: var(--co-accent);
  box-shadow: 0 0 0 3px rgba(159, 232, 112, .12);
}
.co-body .co-field input.co-bad,
.co-body .co-inline input.co-bad { border-color: #7a3535; }

.co-locked-wrap { position: relative; display: block; }
.co-body .co-locked-wrap input {
  background: var(--co-sunk); border-color: #232135;
  color: var(--co-mute); cursor: not-allowed;
}
.co-locked {
  position: absolute; right: 14px; top: 50%; transform: translateY(-50%);
  font-family: var(--co-mono); font-size: 10.5px;
  color: var(--co-accent); letter-spacing: .08em;
}

/* ---------- payment tabs ---------- */
.co-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 22px; }
.co-tab {
  display: flex; flex-direction: column; gap: 5px; align-items: flex-start;
  text-align: left; padding: 14px 16px; border-radius: 12px; cursor: pointer;
  color: var(--co-text); border: 1px solid var(--co-line-3); background: var(--co-inset);
}
.co-tab.active {
  border-color: var(--co-accent);
  background: rgba(159, 232, 112, .08);
  box-shadow: 0 0 0 3px rgba(159, 232, 112, .08);
}
.co-tab-name { font-weight: 600; font-size: 14px; }
.co-tab-sub { font-family: var(--co-mono); font-size: 11px; color: var(--co-faint); letter-spacing: .06em; }

.co-pay-intro { margin: 0; font-size: 13.5px; color: var(--co-mute); line-height: 1.6; }
.co-frame-wrap {
  margin-top: 4px; border: 1px solid var(--co-line-3);
  border-radius: 12px; overflow: hidden; background: var(--co-inset);
}
#co-zoho-frame { display: block; width: 100%; min-height: 560px; border: 0; }
.co-frame-fallback { margin: 10px 0 0; font-size: 12.5px; color: var(--co-faint); }

.co-inline { display: flex; gap: 10px; flex-wrap: wrap; align-items: stretch; }
.co-inline input { flex: 1; min-width: 200px; }
.co-body #co-credit-code {
  font-family: var(--co-mono); letter-spacing: .06em; text-transform: uppercase;
}
.co-credit-note { margin: 10px 0 0; font-size: 12.5px; line-height: 1.5; color: var(--co-faint); }
.co-credit-note.ok { color: var(--co-accent); }
.co-credit-note.err { color: var(--co-bad); }

.co-billing { margin-top: 24px; padding-top: 22px; border-top: 1px solid var(--co-line); }
.co-billing .co-label { display: block; margin-bottom: 14px; }

/* ---------- buttons ---------- */
.co-btn-ghost {
  background: #1a1828; border: 1px solid #2c2942; color: var(--co-text);
  border-radius: 10px; padding: 10px 18px; font-size: 14px; font-weight: 500;
  cursor: pointer; flex: none; display: inline-flex; align-items: center;
}
.co-btn-ghost:hover { border-color: var(--co-accent); color: var(--co-accent); }
.co-btn-quiet { color: var(--co-mute); }
.co-btn-primary {
  display: inline-block;
  background: linear-gradient(150deg, var(--co-accent), var(--co-accent-2));
  border: none; color: #08070f; border-radius: 12px; padding: 14px 24px;
  font-family: var(--co-head); font-size: 15px; font-weight: 600; cursor: pointer;
}
.co-btn-primary:hover { color: #08070f; }

/* ---------- summary ---------- */
.co-summary {
  position: sticky; top: 92px;
  border: 1px solid var(--co-line); border-radius: 18px;
  background: var(--co-panel); padding: 24px 24px 26px; min-width: 0;
}
.co-summary-title {
  font-family: var(--co-mono); font-size: 11px; color: var(--co-faint);
  letter-spacing: .1em; margin-bottom: 16px;
}
.co-sum-lines {
  display: flex; flex-direction: column; gap: 11px;
  padding-bottom: 18px; border-bottom: 1px solid var(--co-line); font-size: 13.5px;
}
.co-sum-line { display: flex; justify-content: space-between; gap: 12px; color: var(--co-dim); }
.co-sum-line span:first-child { min-width: 0; }
.co-mono { font-family: var(--co-mono); color: var(--co-text); flex: none; }
.co-good { color: var(--co-accent); }

.co-promo-row { padding: 16px 0; border-bottom: 1px solid var(--co-line); }
.co-body .co-promo-row input {
  min-width: 0; padding: 11px 14px; font-size: 14px;
  font-family: var(--co-mono); text-transform: uppercase;
}
.co-promo-note { margin: 10px 0 0; font-size: 12.5px; line-height: 1.5; color: var(--co-faint); }
.co-promo-note.ok { color: var(--co-accent); }
.co-promo-note.err { color: var(--co-bad); }

.co-totals {
  display: flex; flex-direction: column; gap: 11px;
  padding: 16px 0; border-bottom: 1px solid var(--co-line); font-size: 13.5px;
}
.co-total-row { display: flex; justify-content: space-between; gap: 12px; color: var(--co-dim); }

.co-due { display: flex; justify-content: space-between; align-items: baseline; padding: 16px 0 8px; }
.co-due span:first-child { font-family: var(--co-head); font-size: 15px; font-weight: 600; }
.co-due span:last-child { font-family: var(--co-head); font-size: 27px; font-weight: 700; letter-spacing: -.01em; }
.co-due-note { margin: 0; font-size: 12.5px; color: var(--co-faint); line-height: 1.6; padding-bottom: 16px; }

.co-check {
  display: flex; gap: 11px; align-items: flex-start;
  font-size: 12.5px; color: var(--co-mute); line-height: 1.5;
  margin-bottom: 12px; cursor: pointer;
}
.co-check input {
  width: 17px; height: 17px; margin: 1px 0 0;
  accent-color: var(--co-accent); flex: none; cursor: pointer;
}

.co-error {
  display: flex; gap: 10px; align-items: flex-start;
  border: 1px solid #4a2424; background: rgba(232, 112, 112, .07);
  border-radius: 11px; padding: 12px 14px; margin-bottom: 14px;
  font-size: 13px; color: #f0b7b7; line-height: 1.5;
}
.co-error-mark { font-family: var(--co-mono); color: var(--co-bad); flex: none; }

.co-pay {
  width: 100%; border: none; border-radius: 12px; padding: 16px;
  font-family: var(--co-head); font-size: 16px; font-weight: 600;
  background: #1a1828; color: var(--co-ghost); cursor: not-allowed;
}
.co-pay:not(:disabled) {
  background: linear-gradient(150deg, var(--co-accent), var(--co-accent-2));
  color: #08070f; cursor: pointer;
  box-shadow: 0 8px 24px rgba(159, 232, 112, .18);
}
.co-pay-foot { margin: 12px 0 0; text-align: center; font-size: 12px; color: var(--co-ghost); line-height: 1.6; }

.co-trust {
  list-style: none; margin: 20px 0 0; padding: 18px 0 0;
  border-top: 1px solid var(--co-line);
  display: flex; flex-direction: column; gap: 9px;
  font-size: 12.5px; color: var(--co-mute);
}
.co-trust li { display: flex; gap: 9px; align-items: flex-start; }
.co-tick { color: var(--co-accent); font-family: var(--co-mono); flex: none; }

/* ---------- confirmed / expired states ---------- */
.co-state { max-width: 660px; border-radius: 18px; padding: 38px; }
.co-state-warn {
  max-width: 640px; padding: 36px;
  border: 1px solid #4a3a22;
  background: linear-gradient(180deg, rgba(232, 178, 80, .08), rgba(18, 17, 28, .6));
}
.co-state-ok {
  border: 1px solid #26492a;
  background: linear-gradient(180deg, rgba(159, 232, 112, .08), rgba(18, 17, 28, .6));
}
.co-state-eyebrow { font-family: var(--co-mono); font-size: 11.5px; letter-spacing: .1em; }
.co-state-warn .co-state-eyebrow { color: var(--co-warn); }
.co-state-ok .co-state-eyebrow { color: var(--co-accent); }
.co-state-title { font-family: var(--co-head); margin: 12px 0 10px; font-weight: 700; }
.co-state-warn .co-state-title { font-size: 26px; }
.co-state-ok .co-state-title { font-size: 29px; }
.co-state-body { margin: 0 0 24px; color: var(--co-dim); font-size: 15px; line-height: 1.6; }
.co-state-body strong { color: var(--co-text); }
.co-state .co-two { margin-bottom: 24px; }

.co-fact { border: 1px solid var(--co-line-2); border-radius: 12px; padding: 15px 17px; background: var(--co-sunk); }
.co-fact-label { font-family: var(--co-mono); font-size: 11px; color: var(--co-faint); letter-spacing: .08em; }
.co-fact-value { font-family: var(--co-mono); font-size: 16px; margin-top: 6px; }

.co-actions { display: flex; flex-direction: column; gap: 12px; }
.co-action {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; flex-wrap: wrap;
  border: 1px solid var(--co-line-3); border-radius: 12px;
  padding: 16px 18px; background: var(--co-sunk);
}
.co-action-title { font-weight: 600; font-size: 15px; }
.co-action-sub { font-family: var(--co-mono); font-size: 12.5px; color: var(--co-mute); margin-top: 4px; }
.co-done-foot { margin: 24px 0 0; font-size: 13.5px; color: var(--co-faint); }

@media (max-width: 900px) {
  .co-grid { grid-template-columns: minmax(0, 1fr); }
  .co-summary { position: static; }
  .co-pad, .co-header { padding-left: 20px; padding-right: 20px; }
  .co-h1 { font-size: 32px; }
  .co-two { grid-template-columns: minmax(0, 1fr); }
  .co-span2 { grid-column: auto; }
  .co-state { padding: 26px; }
}

/* ---------- Store administration (admin portal) ----------
   The Store tab: products, servers, gift cards, promo codes, payments.

   `.pill` is defined near the top as an absolutely-positioned badge for
   server cards. Inside a table that positions it out of the row
   entirely, which is why every table use of it is reset here rather than
   given a second class name — the orders table was already using it that
   way before this screen existed. */
.mail-table .pill,
.acct-callout .pill {
  position: static; display: inline-block; vertical-align: middle;
  font-size: 10px; letter-spacing: .1em; padding: 3px 8px;
  background: rgba(232, 230, 245, .08); color: var(--text-dim);
  border: 1px solid var(--border-strong);
}

.acct-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 12px 14px; margin: 10px 0 4px;
}
.acct-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.acct-field > span { font-size: 13px; color: var(--text-dim); }
.acct-field input,
.acct-field select { width: 100%; margin: 0 !important; }

.btn-save {
  background: var(--cyan); border: 1px solid var(--cyan); color: var(--bg);
  border-radius: 10px; padding: 10px 18px; cursor: pointer;
  font-family: 'Chakra Petch', sans-serif; font-weight: 700;
  font-size: 13px; letter-spacing: .08em; text-transform: uppercase;
}
.btn-save:hover { background: transparent; color: var(--cyan); }

.acct-callout {
  border: 1px solid var(--border-strong); border-radius: 12px;
  background: var(--card-dark); padding: 16px 18px; margin: 12px 0;
}
.acct-callout ul { margin: 8px 0 0; padding-left: 20px; color: var(--text-dim); font-size: 13px; }
.acct-callout li { margin: 3px 0; }

/* The receipt drawer under an order row, and the credit history under a
   gift card. Same shape, so the same rules. */
.ord-receipt > td { background: var(--card-dark); }
.ord-receipt-body {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 20px 32px; padding: 6px 2px 10px;
}
.ord-rc-col h4 {
  font-family: 'Chakra Petch', sans-serif; text-transform: uppercase;
  letter-spacing: .08em; font-size: 12px; color: var(--text-mute);
  margin: 0 0 8px;
}
.ord-rc-line {
  display: flex; justify-content: space-between; gap: 16px;
  padding: 4px 0; font-size: 13.5px; color: var(--text-dim);
}
.ord-rc-line > span:last-child { text-align: right; color: var(--text); }
.ord-rc-line .good { color: var(--green); }
.ord-rc-rule { height: 1px; background: var(--border); margin: 10px 0; }
.ord-rc-total { font-weight: 600; }
.ord-rc-total > span { color: var(--text); }


/* ---------- Store: choosing the player -------------------------------
   Mojang resolves an exact name only, so this is not a search box with a
   result list — it is a choice between the one or two accounts that name
   could mean. On a Geyser server that ambiguity is real: "Notch" and
   ".Notch" are different people. The face is what settles it, because a
   player recognises their own skin instantly and reads a UUID never. */
.player-candidates {
  margin-top: 10px; border: 1px solid var(--border-strong);
  border-radius: 10px; overflow: hidden;
}
.player-row {
  display: flex; align-items: center; gap: 11px; width: 100%; text-align: left;
  background: var(--card-dark); border: none; border-bottom: 1px solid var(--border);
  padding: 11px 12px; cursor: pointer; color: var(--text); font: inherit;
}
.player-row:last-child { border-bottom: none; }
.player-row:hover, .player-row:focus-visible { background: rgba(62, 200, 232, .09); }
.pc-face {
  width: 32px; height: 32px; border-radius: 5px; flex: 0 0 auto;
  background: var(--border); image-rendering: pixelated;
}
.pc-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.pc-name { font-weight: 600; font-size: 13.5px; }
.pc-sub { color: var(--text-mute); font-size: 11.5px; }
.pc-choose {
  border: 1px solid rgba(62, 200, 232, .4); color: var(--cyan); border-radius: 6px;
  padding: 5px 12px; font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase;
  font-weight: 700; flex: 0 0 auto;
}
.player-chosen {
  display: flex; align-items: center; gap: 11px; margin-top: 10px;
  background: var(--card-dark); border: 1px solid var(--cyan);
  border-radius: 10px; padding: 11px 12px;
}
.player-chosen .pc-face { width: 36px; height: 36px; }
.player-chosen .pc-sub { color: var(--cyan); }
.pc-change { flex: 0 0 auto; }
.player-geyser-note {
  color: var(--text-mute); font-size: 12px; line-height: 1.55; margin: 9px 0 0;
}

/* ---------- Store panel: in-game card preview ------------------------
   The card is rendered by the plugin, in game, on a server this panel
   cannot see. Without a preview the loop for a mistyped gradient tag is
   save, wait for the catalogue cache, join, /buy, look — which is why
   store text ends up plain. */
.mm-preview-wrap { margin-top: 16px; }
.mm-card {
  display: flex; gap: 14px; align-items: flex-start;
  background: #1a1a1a; border: 1px solid #2c2a3e; border-radius: 8px;
  padding: 14px 16px; margin-top: 8px;
  /* Minecraft's own UI font stack is not on the web. A monospace face is
     the honest approximation: it keeps the character grid, which is what
     makes lore alignment readable, without pretending to be exact. */
  font-family: var(--font-mono, ui-monospace, "Cascadia Mono", Menlo, Consolas, monospace);
  font-size: 13px; line-height: 1.6;
}
.mm-card-icon {
  flex: 0 0 auto; width: 56px; min-height: 56px; border-radius: 6px;
  background: #101010; border: 1px dashed #3a3850; color: var(--text-mute);
  font-size: 9.5px; letter-spacing: .04em; text-align: center;
  display: flex; align-items: center; justify-content: center; padding: 4px;
  word-break: break-word;
}
.mm-card-body { min-width: 0; flex: 1; }
.mm-name { font-size: 15px; margin-bottom: 6px; word-break: break-word; }
.mm-lore .mm-line { white-space: pre-wrap; word-break: break-word; min-height: 1.6em; }
/* The plugin appends this per player. Shown dimmed so it is clearly not
   something the lore box controls. */
.mm-gate { margin-top: 8px; color: #5f5e6a; font-style: italic; font-size: 12px; }
.mm-title {
  background: #1a1a1a; border: 1px solid #2c2a3e; border-radius: 8px;
  padding: 10px 14px; margin-top: 8px; font-size: 15px;
  font-family: var(--font-mono, ui-monospace, Menlo, Consolas, monospace);
}

/* =====================================================================
   ONE PACKAGE, ONE PAGE  /package/
   Narrow measure on purpose: this is a page somebody reads before
   deciding, not a grid to scan.
   ===================================================================== */
.pkg-wrap { max-width: 640px; margin: 0 auto; padding: 32px 20px 72px; }
.pkg-back { margin: 0 0 20px; font-size: 14px; }
.pkg-back a { color: var(--text-mute); text-decoration: none; }
.pkg-back a:hover { color: var(--text); }
.pkg-state { padding: 48px 0; color: var(--text-mute); }
.pkg-head h1 { margin: 4px 0 8px; font-size: 34px; line-height: 1.15; }
.pkg-eyebrow { margin: 0; text-transform: uppercase; letter-spacing: .08em;
  font-size: 12px; color: var(--text-mute); }
.pkg-price { margin: 0 0 10px; font-size: 22px; font-weight: 600; }
.pkg-note { margin: 0; color: var(--text-mute); }
.pkg-includes { margin: 28px 0; }
.pkg-includes h2, .pkg-gift h2 { font-size: 16px; margin: 0 0 10px; }
.pkg-includes ul { margin: 0; padding-left: 20px; }
.pkg-includes li { margin: 5px 0; }
.pkg-gift { margin: 28px 0; padding: 16px; border: 1px solid var(--border);
  border-radius: 8px; }
.pkg-actions { display: flex; gap: 10px; flex-wrap: wrap; margin: 28px 0 16px; }
.pkg-actions .btn-cancel { display: inline-flex; align-items: center; text-decoration: none; }
.pkg-small { font-size: 13px; color: var(--text-mute); margin: 8px 0 0; }

/* The rendered form of a colour-coded name. `&0[&fVIP&0]` is not
   readable as text, and it is exactly the kind of string somebody gets
   one character wrong in. Dark, because that is what a chest is. */
.mm-preview {
  margin: 6px 0 0; padding: 8px 10px; border-radius: 6px;
  background: #101018; font-family: var(--mono, monospace); font-size: 15px;
  border: 1px solid var(--border);
}