/* ==========================================================================
   RUSTRON — "The Grid" theme override for the Exo/Oxygen Tebex template
   ==========================================================================
   Add this as a new Asset file (Assets → Add) in the template editor,
   named custom.css, then link it from head.twig — see head-twig-snippet.html
   in this same folder for the exact line and where it goes.

   Primary/hover/button-text colours are NOT set here — set those in
   Webstore → Appearance → Style so they cascade correctly (head.twig
   applies them in an inline <style> block that loads after this file):
     Primary Colour                 #00D4FF
     Primary Colour (Hover)         #33DFFF
     Primary Button Text Colour     #00181F
     Primary Button Text Colour (Hover) #00181F
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Chakra+Petch:wght@600;700&family=JetBrains+Mono:wght@400;500;700&family=Barlow:wght@400;500;600&display=swap');

:root {
  /* base surface + text — safe to override here, head.twig's inline
     config block never touches these */
  --color-text: #d7e7ef;
  --color-text-darker: #b7ccd9;
  --color-text-secondary: #8aa1b0;
  --color-text-dark: #00181f;
  --color-bg: #07090c;
  --color-brighter-bg: #10141a;

  --color-secondary: #161c24;
  --color-secondary-hover: #202834;
  --color-secondary-text: #d7e7ef;
  --color-secondary-text-hover: #ffffff;

  --color-tertiary: transparent;
  --color-tertiary-hover: rgba(0, 212, 255, .12);
  --color-tertiary-text: var(--color-text);
  --color-tertiary-text-hover: #00d4ff;

  --color-removed: #ff5c7a;

  /* custom tokens used below, not part of Tebex's own system */
  --rt-line: #232b35;
  --rt-line-soft: #1a212a;
  --rt-cyan: #00d4ff;
  --rt-cyan-glow: rgba(0, 212, 255, .35);
  --rt-magenta: #fa3d70;
  --rt-magenta-dim: #a12c50;

  --btn-size: 48px;
}

body {
  font-family: 'Barlow', system-ui, sans-serif;
}

h1, h2, h3, h4, h5, h6,
.site-title,
.product-title,
.basket-title,
.widget-title,
.store-category-tiered-header h2 {
  font-family: 'Chakra Petch', system-ui, sans-serif;
  font-weight: 700;
  letter-spacing: .01em;
}

.price,
.total,
.countdown,
.quantity-field input,
.basket-second-header .total {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-variant-numeric: tabular-nums;
}

/* ---------- buttons ---------- */
.btn-primary,
.btn-secondary,
.btn-tertiary {
  font-family: 'Chakra Petch', system-ui, sans-serif;
  font-weight: 700;
  font-size: 13.5px;
  letter-spacing: .05em;
  text-transform: uppercase;
  clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
  transition: box-shadow .2s ease, transform .12s ease, background-color .15s ease, color .15s ease;
}
.btn-primary:hover:not(:disabled),
.btn-primary:focus:not(:disabled) {
  box-shadow: 0 0 22px var(--rt-cyan-glow);
}
.btn-secondary {
  border: 1px solid var(--rt-line);
}
.btn-secondary:hover:not(:disabled) {
  border-color: var(--rt-cyan);
}

/* ---------- header / hero ---------- */
.site-header {
  border-bottom: 1px solid var(--rt-line);
  background:
    radial-gradient(520px 260px at 80% 0%, rgba(0, 212, 255, .10), transparent 70%),
    var(--color-bg);
}
.site-header-inner .site-title img {
  filter: drop-shadow(0 0 18px rgba(0, 212, 255, .25));
  max-height: 80px !important;
}
@media (width > 960px) {
  .site-header-inner .site-title img {
    max-height: 180px !important;
  }
}
.site-header-inner .info .title {
  font-family: 'JetBrains Mono', monospace;
  font-size: 13px !important;
  letter-spacing: .04em;
  color: var(--color-text-secondary);
}
.site-header-inner .info .action {
  font-family: 'JetBrains Mono', monospace;
  color: var(--rt-cyan) !important;
}
.site-header-inner .info:hover .action {
  color: #fff !important;
}
.site-header-inner .info .value {
  font-family: 'JetBrains Mono', monospace;
  border-color: var(--rt-line) !important;
  background: var(--color-brighter-bg) !important;
}

/* ---------- sale banner ---------- */
.site-sale-banner {
  font-family: 'JetBrains Mono', monospace;
  letter-spacing: .06em;
  text-transform: uppercase;
  font-size: 14px !important;
}

/* ---------- nav ---------- */
.navigation-horizontal .menu {
  background: var(--color-brighter-bg);
  border-top: 1px solid var(--rt-line-soft);
  border-bottom: 1px solid var(--rt-line-soft);
  font-family: 'Chakra Petch', system-ui, sans-serif;
  letter-spacing: .03em;
}
.navigation-horizontal a {
  position: relative;
}
.navigation-horizontal > ul > li > a::after {
  content: "";
  position: absolute;
  left: calc(var(--widget-padding) / 2);
  right: calc(100% - var(--widget-padding) / 2);
  bottom: 8px;
  height: 2px;
  background: var(--rt-cyan);
  transition: right .18s ease;
}
.navigation-horizontal > ul > li > a:hover::after,
.navigation-horizontal > ul > li > a.link-active::after {
  right: calc(var(--widget-padding) / 2);
}
.navigation-vertical a.link-active,
.navigation-horizontal a.link-active {
  color: var(--rt-cyan) !important;
}

/* vertical sidebar nav — this is what Rustron actually uses */
.navigation-vertical.widget {
  background: var(--color-brighter-bg);
  border: 1px solid var(--rt-line);
}
.navigation-vertical .menu {
  font-family: 'Chakra Petch', system-ui, sans-serif;
  letter-spacing: .02em;
}
.navigation-vertical a {
  position: relative;
  border-left: 2px solid transparent;
  transition: color .15s ease, border-color .15s ease;
}
.navigation-vertical a:hover,
.navigation-vertical a.link-active {
  border-left-color: var(--rt-cyan);
}

/* ---------- sidebar widgets (Top Customer, Goal, Recent Payments, Featured Package) ---------- */
.widget {
  background: var(--color-brighter-bg);
  border: 1px solid var(--rt-line);
}
.widget-title {
  padding-bottom: 10px;
  border-bottom: 1px solid var(--rt-line-soft);
}

.widget-top-donator .avatar {
  border: 2px solid var(--rt-cyan);
  border-radius: 50%;
  box-shadow: 0 0 14px var(--rt-cyan-glow);
}
.widget-top-donator .username {
  font-family: 'Chakra Petch', system-ui, sans-serif;
  color: var(--rt-cyan);
}

.widget-community-goal .progress,
.widget-goal .progress {
  border: 1px solid var(--rt-line);
}
.widget-community-goal p,
.widget-goal p {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12.5px;
  letter-spacing: .03em;
}

.widget-recent .username {
  font-family: 'Chakra Petch', system-ui, sans-serif;
  color: var(--rt-cyan);
}
.widget-recent time {
  font-family: 'JetBrains Mono', monospace;
}

.widget-featured .store-product {
  position: relative;
}
.widget-featured .image {
  filter: drop-shadow(0 0 16px rgba(0, 212, 255, .2));
}

/* ---------- home category tiles ---------- */
.site-home-categories .category {
  background: var(--color-brighter-bg);
  border: 1px solid var(--rt-line);
  padding: var(--widget-padding);
  transition: border-color .15s ease, transform .15s ease;
}
.site-home-categories .category:hover {
  border-color: var(--rt-cyan);
  transform: translateY(-2px);
}
.site-home-categories .category .image-default::before {
  background-color: var(--rt-cyan);
  opacity: .6;
}

/* ---------- category description / plain listing ---------- */
.category-description {
  background: var(--color-brighter-bg);
  border: 1px solid var(--rt-line);
}
.store-product .product-title .countdown {
  color: var(--color-removed);
}

/* ---------- package cards — the real "Packages" category ---------- */
.store-products-images {
  grid-template-columns: 1fr;
}
@media (width > 640px) {
  .store-products-images {
    grid-template-columns: repeat(2, 1fr);
  }
}
.store-product:not(.store-product-full):not(.store-product-tiered) {
  position: relative;
  background: var(--color-brighter-bg);
  border: 1px solid var(--rt-line);
  transition: border-color .2s ease, transform .2s ease;
}
.store-products-images .store-product:not(.store-product-full):hover,
.store-products-list .store-product:not(.store-product-full):hover {
  border-color: var(--rt-cyan);
}
.store-products-images .store-product:not(.store-product-full):hover {
  transform: translateY(-3px);
}
.store-product:not(.store-product-full) .image {
  filter: drop-shadow(0 0 14px rgba(0, 212, 255, .18));
}
.store-product .price strong {
  color: var(--rt-cyan);
}
.store-product .price .discount {
  color: var(--color-removed);
}

/* corner brackets on the grid-image cards — the closest we can get to the
   original tier-card look without switching the category to Cumulative
   pricing (that would change real checkout behaviour, see chat) */
.store-products-images .store-product:not(.store-product-full)::before,
.store-products-images .store-product:not(.store-product-full)::after {
  content: "";
  position: absolute;
  width: 14px;
  height: 14px;
  border: 2px solid var(--rt-cyan);
  pointer-events: none;
}
.store-products-images .store-product:not(.store-product-full)::before {
  top: -1px; left: -1px; border-right: none; border-bottom: none;
}
.store-products-images .store-product:not(.store-product-full)::after {
  bottom: -1px; right: -1px; border-left: none; border-top: none;
}

/* simple, even cards — no description shown here, full detail lives on
   the package's own page (click-through) */
.store-products-images .store-product:not(.store-product-full) {
  text-align: center;
  align-items: center;
}
.store-products-images .store-product:not(.store-product-full) .product-title {
  font-size: 17px;
}
.store-products-images .store-product:not(.store-product-full) .actions {
  width: 100%;
  justify-content: center;
}

/* highlight the last card in the grid (currently Platinum) — reorder
   packages in the dashboard if a different one should stand out */
.store-products-images .store-product:not(.store-product-full):last-child {
  border-color: var(--rt-magenta-dim);
  background: linear-gradient(180deg, #1a1017, var(--color-brighter-bg) 45%);
}
.store-products-images .store-product:not(.store-product-full):last-child::before,
.store-products-images .store-product:not(.store-product-full):last-child::after {
  border-color: var(--rt-magenta);
}
.store-products-images .store-product:not(.store-product-full):last-child .product-title {
  color: var(--rt-magenta);
}
.store-products-images .store-product:not(.store-product-full):last-child .btn-primary {
  --btn-color-bg: var(--rt-magenta);
  --btn-color-bg-hover: #ff5c8f;
  --btn-color-text: #1a0510;
  --btn-color-text-hover: #1a0510;
}

/* ---------- tiered pricing cards (category/tiered.html) — only reachable
   if a category's Type is switched to "Cumulative" in the dashboard,
   which also changes real checkout pricing (upgraders pay the
   difference). Not currently in use; harmless while unused. ---------- */
.store-category-tiered-header {
  border-bottom: 1px solid var(--rt-line);
  padding-bottom: var(--widget-padding);
}

.store-product-tiered {
  position: relative;
  background: var(--color-brighter-bg);
  border: 1px solid var(--rt-line);
  transition: border-color .2s ease, transform .2s ease;
}
.store-product-tiered:hover {
  transform: translateY(-3px);
}
.store-product-tiered::before,
.store-product-tiered::after {
  content: "";
  position: absolute;
  width: 14px;
  height: 14px;
  border: 2px solid var(--rt-cyan);
  pointer-events: none;
}
.store-product-tiered::before { top: -1px; left: -1px; border-right: none; border-bottom: none; }
.store-product-tiered::after   { bottom: -1px; right: -1px; border-left: none; border-top: none; }

.store-product-tiered .image {
  filter: drop-shadow(0 0 16px rgba(0, 212, 255, .2));
}

.store-product-tiered .descr {
  border-color: var(--rt-line-soft) !important;
}
.store-product-tiered .descr ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  text-align: left;
}
.store-product-tiered .descr li {
  display: flex;
  gap: 8px;
  font-size: 13.5px;
  color: var(--color-text-secondary);
  line-height: 1.4;
}
.store-product-tiered .descr li::before {
  content: "\203A";
  font-family: 'JetBrains Mono', monospace;
  font-weight: 700;
  color: var(--rt-cyan);
  flex: none;
}

/* highest tier — the LAST card in the category. Order your packages in
   the dashboard so Platinum (or whichever tier should stand out) is last. */
.store-products-tiered .store-product-tiered:last-child {
  border-color: var(--rt-magenta-dim);
  background: linear-gradient(180deg, #1a1017, var(--color-brighter-bg) 45%);
}
.store-products-tiered .store-product-tiered:last-child::before,
.store-products-tiered .store-product-tiered:last-child::after {
  border-color: var(--rt-magenta);
}
.store-products-tiered .store-product-tiered:last-child .product-title {
  color: var(--rt-magenta);
}
.store-products-tiered .store-product-tiered:last-child .descr li::before {
  color: var(--rt-magenta);
}
.store-products-tiered .store-product-tiered:last-child .btn-primary {
  --btn-color-bg: var(--rt-magenta);
  --btn-color-bg-hover: #ff5c8f;
  --btn-color-text: #1a0510;
  --btn-color-text-hover: #1a0510;
}

/* a package the visitor already owns — Tebex adds this class automatically */
.store-product-tiered.subscribed {
  border-color: var(--rt-cyan);
  box-shadow: 0 0 0 1px var(--rt-cyan) inset;
}
.store-product-tiered.subscribed::before {
  content: "ACTIVE";
  position: absolute;
  top: -11px;
  left: 16px;
  width: auto;
  height: auto;
  border: none;
  background: var(--rt-cyan);
  color: #00181f;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .08em;
  padding: 3px 8px;
}

/* ---------- single package page ---------- */
.store-product-full .actions {
  background-color: rgba(7, 9, 12, .75) !important;
  border-top: 1px solid var(--rt-line);
}
.store-product-full .price {
  color: var(--rt-cyan);
}
/* plain bullet lists inside a package's own description, e.g. feature
   lists like "Kits / Loadouts" — only touches bare <ul><li>, not the
   colored section-header bars some descriptions already have */
.store-product-full .descr ul,
.popup-content .descr ul {
  list-style: none;
  padding-left: 0;
}
.store-product-full .descr ul li,
.popup-content .descr ul li {
  position: relative;
  padding-left: 1.3em;
}
.store-product-full .descr ul li::before,
.popup-content .descr ul li::before {
  content: "\203A";
  position: absolute;
  left: 0;
  font-family: 'JetBrains Mono', monospace;
  font-weight: 700;
  color: var(--rt-cyan);
}

/* section-header bars inside a package's own description, e.g.
   "Kits / Loadouts" / "Perks" — these are plain h2/h3 headings, Tebex's
   default rich-text style just gives them a colored background. This
   recolors them to solid cyan instead of coral. */
.descr h2,
.descr h3 {
  background: var(--rt-cyan) !important;
  color: #00181f !important;
  font-family: 'Chakra Petch', system-ui, sans-serif;
  font-size: 15px !important;
  letter-spacing: .04em;
  text-transform: uppercase;
  text-align: center;
  padding: 8px 14px !important;
  border-radius: 0 !important;
}

/* ---------- basket / checkout drawer ---------- */
.basket .basket-header {
  background: var(--color-brighter-bg) !important;
  border-bottom: 1px solid var(--rt-line);
}
.basket .basket-item {
  border: 1px solid var(--rt-line);
}
.basket .basket-item .price {
  color: var(--rt-cyan) !important;
}
.basket .basket-item .trial {
  background: var(--rt-magenta) !important;
  color: #1a0510 !important;
}
.basket .basket-checkout .total {
  color: var(--rt-cyan) !important;
}

/* ---------- ticker (site-wide, added via a small layout.html edit) ---------- */
.rt-ticker {
  background: var(--color-brighter-bg);
  border-bottom: 1px solid var(--rt-line-soft);
  overflow: hidden;
  white-space: nowrap;
  position: relative;
}
.rt-ticker::before,
.rt-ticker::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 60px;
  z-index: 2;
  pointer-events: none;
}
.rt-ticker::before { left: 0; background: linear-gradient(90deg, var(--color-brighter-bg), transparent); }
.rt-ticker::after   { right: 0; background: linear-gradient(270deg, var(--color-brighter-bg), transparent); }
.rt-ticker-track {
  display: inline-flex;
  padding: 9px 0;
  animation: rt-ticker-scroll 32s linear infinite;
}
.rt-ticker-track span {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  letter-spacing: .09em;
  color: var(--color-text-secondary);
  padding: 0 26px;
  border-right: 1px solid var(--rt-line);
  text-transform: uppercase;
}
.rt-ticker-track span b {
  color: var(--rt-cyan);
  font-weight: 500;
}
@keyframes rt-ticker-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .rt-ticker-track { animation: none; }
}

/* ---------- homepage hero (index.html only) ---------- */
.rt-hero {
  position: relative;
  overflow: hidden;
  padding: 72px var(--content-padding) 64px;
  border-bottom: 1px solid var(--rt-line);
  background:
    radial-gradient(640px 320px at 85% -10%, rgba(0, 212, 255, .12), transparent 70%),
    var(--color-bg);
}
.rt-hero-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: .5;
}
.rt-hero-inner {
  position: relative;
  z-index: 2;
  max-width: var(--content-inner-width);
  margin: 0 auto;
}
.rt-eyebrow {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--rt-cyan);
  display: flex;
  align-items: center;
  gap: 10px;
}
.rt-eyebrow::before {
  content: "";
  width: 18px;
  height: 1px;
  background: var(--rt-cyan);
  display: inline-block;
}
.rt-hero-title {
  font-family: 'Chakra Petch', system-ui, sans-serif;
  font-weight: 700;
  font-size: clamp(32px, 5.6vw, 56px);
  line-height: 1.03;
  margin-top: 16px;
  text-wrap: balance;
}
.rt-hero-title em {
  font-style: normal;
  color: var(--rt-cyan);
}
.rt-hero-lead {
  font-size: 16px;
  color: var(--color-text-secondary);
  max-width: 52ch;
  margin-top: 16px;
}
.rt-hero-ctas {
  display: flex;
  gap: 14px;
  margin-top: 28px;
  flex-wrap: wrap;
}

/* two-column hero: text + HUD panel */
.rt-hero-grid {
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  gap: 56px;
  align-items: center;
}
@media (width <= 900px) {
  .rt-hero-grid {
    grid-template-columns: 1fr;
  }
}

/* HUD "Grid" readout panel — a styled preview, not live personal data */
.rt-hud-panel {
  position: relative;
  background: var(--color-brighter-bg);
  border: 1px solid var(--rt-line);
  padding: 22px 24px 24px;
}
.rt-hud-panel::before,
.rt-hud-panel::after {
  content: "";
  position: absolute;
  width: 14px;
  height: 14px;
  border: 2px solid var(--rt-cyan);
  pointer-events: none;
}
.rt-hud-panel::before { top: -1px; left: -1px; border-right: none; border-bottom: none; }
.rt-hud-panel::after   { bottom: -1px; right: -1px; border-left: none; border-top: none; }
.rt-hud-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 18px;
}
.rt-hud-title span:first-child {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: .12em;
  color: var(--color-text-secondary);
  text-transform: uppercase;
}
.rt-dot-live {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--rt-cyan);
  box-shadow: 0 0 8px var(--rt-cyan);
  display: inline-block;
}
.rt-hud-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding: 9px 0;
  border-top: 1px solid var(--rt-line-soft);
}
.rt-hud-row:first-of-type { border-top: none; }
.rt-hud-row .rt-k {
  font-size: 12.5px;
  color: var(--color-text-secondary);
}
.rt-hud-row .rt-v {
  font-family: 'JetBrains Mono', monospace;
  font-size: 15px;
  color: var(--color-text);
  font-weight: 500;
}
.rt-xp-bar {
  height: 6px;
  background: var(--rt-line-soft);
  margin-top: 14px;
  position: relative;
  overflow: hidden;
}
.rt-xp-bar i {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, var(--rt-cyan-glow), var(--rt-cyan));
  display: block;
}
.rt-xp-label {
  display: flex;
  justify-content: space-between;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  color: var(--color-text-secondary);
  margin-top: 6px;
}
.rt-hud-note {
  margin-top: 14px;
  font-size: 10.5px;
  color: var(--color-text-secondary);
  opacity: .7;
  text-align: center;
}

/* ---------- kits & loadouts section (homepage) ---------- */
.rt-kits {
  padding: 56px var(--content-padding);
  border-bottom: 1px solid var(--rt-line);
}
.rt-section-head {
  max-width: var(--content-inner-width);
  margin: 0 auto 32px;
}
.rt-section-title {
  font-family: 'Chakra Petch', system-ui, sans-serif;
  font-weight: 700;
  font-size: 26px;
  margin-top: 12px;
}
.rt-section-sub {
  color: var(--color-text-secondary);
  font-size: 14.5px;
  margin-top: 8px;
  max-width: 60ch;
}
.rt-kits-grid {
  max-width: var(--content-inner-width);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}
@media (width <= 900px) {
  .rt-kits-grid { grid-template-columns: repeat(2, 1fr); }
}
.rt-kit-slot {
  position: relative;
  background: var(--color-brighter-bg);
  border: 1px dashed var(--rt-line);
  padding: 18px 16px;
  min-height: 90px;
  display: flex;
  align-items: flex-end;
  transition: border-color .15s ease, background .15s ease;
}
.rt-kit-slot:hover {
  border-style: solid;
  border-color: var(--rt-cyan);
  background: var(--color-secondary-hover);
}
.rt-kit-slot .rt-tag {
  position: absolute;
  top: 10px;
  left: 14px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 9.5px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #ffb454;
}
.rt-kit-slot .rt-name {
  font-family: 'Chakra Petch', system-ui, sans-serif;
  font-weight: 600;
  font-size: 14px;
}

.rt-kit-icon {
  width: 22px;
  height: 22px;
  color: var(--rt-cyan);
  flex-shrink: 0;
  margin-right: 8px;
  filter: drop-shadow(0 0 3px var(--rt-cyan-glow));
}

/* ---------- wipe countdown band ---------- */
.rt-band {
  border-bottom: 1px solid var(--rt-line);
  background: linear-gradient(180deg, var(--color-brighter-bg), var(--color-bg));
  padding: 48px var(--content-padding);
}
.rt-band-inner {
  max-width: var(--content-inner-width);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  flex-wrap: wrap;
}
.rt-band-title {
  font-family: 'Chakra Petch', system-ui, sans-serif;
  font-weight: 700;
  font-size: 22px;
  margin-top: 10px;
}
.rt-band-sub {
  color: var(--color-text-secondary);
  font-size: 14px;
  margin-top: 8px;
  max-width: 50ch;
}
.rt-countdown {
  display: flex;
  gap: 12px;
}
.rt-countdown .rt-cell {
  text-align: center;
}
.rt-countdown .rt-num {
  font-family: 'JetBrains Mono', monospace;
  font-size: 24px;
  font-weight: 700;
  color: var(--rt-cyan);
  background: var(--color-brighter-bg);
  border: 1px solid var(--rt-line);
  padding: 9px 12px;
  min-width: 50px;
  font-variant-numeric: tabular-nums;
}
.rt-countdown .rt-lbl {
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--color-text-secondary);
  margin-top: 5px;
}

/* ---------- homepage server-info + terms panels ----------
   Targets the EXISTING table markup in index.description — no content
   edits needed. The description is one outer table; inside it, the
   welcome text sits in one nested table and Terms & Conditions sits in
   a second, later nested table (siblings in the same cell), so
   "last-of-type" reliably picks out the terms table. */
.store-text {
  background: var(--color-brighter-bg);
  border: 1px solid var(--rt-line);
  padding: var(--widget-padding);
}
.store-text h1 {
  font-family: 'Chakra Petch', system-ui, sans-serif;
}
.store-text table table:last-of-type {
  display: block;
  margin-top: 24px;
  padding: var(--widget-padding);
  background: var(--color-bg);
  border: 1px solid var(--rt-line-soft);
}
.store-text table table:last-of-type td {
  display: block;
}
.store-text table table:last-of-type p:first-child {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11.5px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--color-text-secondary);
  margin-bottom: 12px;
}
.store-text table table:last-of-type p:first-child u {
  text-decoration-color: var(--rt-line);
}
.store-text table table:last-of-type p:last-child {
  font-size: 13px;
  line-height: 1.7;
  color: var(--color-text-secondary);
}

/* ---------- CMS pages (e.g. Plugins page) — h1/h2/ul content ----------
   cms/page.html renders <h2></h2> BEFORE the page's own
   raw content, so the real order inside .store-text is:
   h2 (page title) -> h1 (content's own heading) -> p, h2, ul, h2, ul... */
.store-text > h2:first-child {
  font-size: 22px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--rt-line);
  margin-bottom: 18px;
  border-left: none;
  color: var(--color-text);
}
.store-text h1 {
  font-size: 24px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--rt-line-soft);
  margin-bottom: 4px;
}
.store-text h1 u {
  text-decoration: none;
}
.store-text h1 + p {
  color: var(--color-text-secondary);
  font-size: 14.5px;
  max-width: 68ch;
}
/* section headings — every h2 that comes after the h1, i.e. NOT the page title */
.store-text h1 ~ h2 {
  font-family: 'Chakra Petch', system-ui, sans-serif;
  font-size: 18px;
  color: var(--rt-cyan);
  margin-top: 32px;
  padding-left: 12px;
  border-left: 2px solid var(--rt-cyan);
}
.store-text h1 ~ h2 + p {
  color: var(--color-text-secondary);
  font-size: 13.5px;
  margin-top: 6px;
  margin-bottom: 14px;
}
.store-text ul {
  list-style: none;
  margin: 0 0 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 9px;
}
.store-text ul li {
  position: relative;
  padding-left: 1.4em;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--color-text-secondary);
}
.store-text ul li::before {
  content: "\203A";
  position: absolute;
  left: 0;
  font-family: 'JetBrains Mono', monospace;
  font-weight: 700;
  color: var(--rt-cyan);
}
.store-text ul strong {
  font-family: 'JetBrains Mono', monospace;
  color: var(--color-text);
  font-weight: 500;
  letter-spacing: .01em;
}

/* ---------- footer ---------- */
.site-footer {
  border-top: 1px solid var(--rt-line);
}
.site-footer-inner .copyright {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
}

/* ---------- gallery page (cms/page.html -- /gallery) ---------- */
.rt-gallery-intro {
  color: var(--color-text-secondary);
  max-width: 640px;
  margin: 0 0 28px;
  line-height: 1.6;
}
.rt-gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 20px;
}
.rt-gallery-item {
  position: relative;
  background: var(--color-brighter-bg);
  border: 1px solid var(--rt-line);
  overflow: hidden;
  transition: border-color .2s ease, transform .2s ease;
}
.rt-gallery-item:hover {
  border-color: var(--rt-cyan);
  transform: translateY(-3px);
}
.rt-gallery-item::before,
.rt-gallery-item::after {
  content: "";
  position: absolute;
  width: 14px;
  height: 14px;
  border: 2px solid var(--rt-cyan);
  pointer-events: none;
  z-index: 2;
}
.rt-gallery-item::before { top: -1px; left: -1px; border-right: none; border-bottom: none; }
.rt-gallery-item::after { bottom: -1px; right: -1px; border-left: none; border-top: none; }
.rt-gallery-item img {
  display: block;
  width: 100%;
  height: 220px;
  object-fit: cover;
}
.rt-gallery-caption {
  padding: 10px 14px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 12px;
  letter-spacing: .04em;
  color: var(--color-text-secondary);
  border-top: 1px solid var(--rt-line-soft);
  text-transform: uppercase;
}
.rt-gallery-empty {
  min-height: 220px;
  border: 1px dashed var(--rt-line);
  background: var(--color-brighter-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 24px;
  color: var(--color-text-secondary);
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 12.5px;
  letter-spacing: .04em;
  text-transform: uppercase;
}