/*
 * RFUnited Control Panel 2026
 * Global presentation layer only. No backend/database logic is changed.
 */

:root {
  --rd-bg: #050505;
  --rd-bg-2: #0a0a0a;
  --rd-sidebar: rgba(13, 13, 13, 0.98);
  --rd-surface: #0d0d0d;
  --rd-surface-2: #141414;
  --rd-surface-3: #1d1d1d;
  --rd-line: #262626;                     /* hairline dividers           */
  --rd-line-2: #363636;                   /* stronger borders            */
  --rd-control: #606060;                  /* edges of form controls      */
  --rd-border: rgba(255, 255, 255, 0.10);
  --rd-border-strong: rgba(var(--rd-accent-rgb), 0.24);
  --rd-text: #f4f1ea;
  --rd-muted: #9c9c9c;
  --rd-muted-2: #8b8b8b;
  --rd-accent: #f2b32e;
  --rd-accent-2: #ffd46b;
  --rd-accent-soft: rgba(var(--rd-accent-rgb), 0.12);
  --rd-success: #35d07f;
  --rd-danger: #ff5d69;
  --rd-warning: #ffbd4a;
  --rd-info: #55b7ff;
  --rd-radius: 16px;
  --rd-radius-sm: 11px;
  /* --rd-sidebar-w is what the stage is pushed over by, so it has to cover
     the rail as well as the sidebar: 72 + 300. The sidebar's own width comes
     off the right of it and must stay at the 300 the brand lockup was drawn
     for - the wordmark alone is 150px and at 248 it overflowed into the
     topbar. Change --rd-rail-w and everything follows. */
  --rd-rail-w: 72px;
  --rd-sidebar-w: 372px;
  --rd-sidebar-collapsed: 88px;
  --rd-topbar-h: 72px;
  --rd-shadow: 0 18px 50px rgba(0, 0, 0, 0.26);
  --rd-font: "Inter", "Montserrat", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  /*
   * Theme Designer hooks (do=admin_theme_designer).
   *
   * Everything the admin can recolour resolves through these. The page
   * writes a :root override into the document head AFTER this file, so it
   * wins on source order without touching the stylesheet.
   *
   * If you hard-code an accent colour anywhere below instead of using one
   * of these, the Theme Designer cannot reach it and that element stays
   * blue on a green theme. Race colours (.rd-race-*) are the deliberate
   * exception - Bellato is blue because the game says so, not because the
   * accent is.
   */
  --rd-bg-tint: rgba(var(--rd-accent-hover-rgb), 0.13);   /* ambient wash over the page  */
  --rd-accent-hover: #ffd46b;              /* accent, hover: brighter     */
  --rd-accent-deep: #c4881b;               /* accent, pressed / active    */
  --rd-accent-ring: rgba(var(--rd-accent-ring-rgb), 0.38); /* focus ring / btn border */
  --rd-accent-ink: #fceed1;                /* text ON a soft accent tint  */
  /*
   * Buttons. The EVO look paints every NON-DESTRUCTIVE button one flat
   * accent colour with dark ink - see the blanket rule further down - so
   * one fill token drives them all. The Theme Designer swaps --rd-btn-fill
   * for a gradient when the admin sets the two ends by hand.
   *
   * .btn-danger is deliberately NOT themeable: a delete button stays
   * unmistakably red whatever the accent is.
   */
  --rd-btn-fill: var(--rd-accent-solid);
  --rd-btn-fill-hover: var(--rd-accent-hover);
  --rd-btn-border: var(--rd-accent-solid);
  --rd-btn-ink: #050505;                   /* label on a button           */
  --rd-link: var(--rd-accent);
  --rd-link-hover: #ffd46b;

  /*
   * The same accent family as bare "r, g, b" triplets.
   *
   * CSS cannot pull the channels back out of a hex colour, so every soft
   * accent tint in this file is written rgba(var(--rd-accent-rgb), .12)
   * rather than rgba(242, 179, 46, .12). Recolouring the theme then moves
   * the glows, halos and hairline borders with it. Keep these in step with
   * the hex tokens above - the Theme Designer always writes both.
   */
  --rd-accent-rgb: 242, 179, 46;
  --rd-accent-2-rgb: 255, 212, 107;
  --rd-accent-hover-rgb: 255, 212, 107;
  --rd-accent-deep-rgb: 196, 136, 27;
  --rd-accent-ring-rgb: 248, 213, 140;
}

html {
  min-height: 100%;
  background: var(--rd-bg);
  scroll-behavior: smooth;
}

body {
  min-height: 100vh;
  padding-top: 0 !important;
  margin: 0;
  overflow-x: hidden;
  color: var(--rd-text);
  font-family: var(--rd-font) !important;
  background:
    linear-gradient(118deg, var(--rd-bg-tint) 0%, transparent 42%),
    linear-gradient(180deg, var(--rd-bg-2), var(--rd-bg));
  background-attachment: fixed;
  font-size: 14px;
  line-height: 1.55;
}

body, button, input, select, textarea, .table, .btn {
  font-family: var(--rd-font) !important;
}

* { scrollbar-width: thin; scrollbar-color: #3c3c3c transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb { background: #393939; border-radius: 999px; border: 3px solid transparent; background-clip: padding-box; }
*::-webkit-scrollbar-thumb:hover { background: #515151; border: 3px solid transparent; background-clip: padding-box; }

::selection { background: rgba(var(--rd-accent-rgb), 0.34); color: #fff; }

a { color: var(--rd-link); text-decoration: none; transition: color .18s ease, opacity .18s ease; }
a:hover { color: var(--rd-link-hover); }

/* Application shell */
.rd-app { min-height: 100vh; }
.rd-sidebar {
  position: fixed;
  inset: 0 auto 0 0;
  z-index: 1040;
  width: var(--rd-sidebar-w);
  display: flex;
  flex-direction: column;
  background:
    linear-gradient(180deg, rgba(var(--rd-accent-rgb), 0.035), transparent 16rem),
    var(--rd-sidebar);
  border-right: 1px solid var(--rd-border);
  box-shadow: 18px 0 50px rgba(0, 0, 0, 0.18);
  transition: width .22s ease, transform .22s ease;
}
.rd-stage {
  min-height: 100vh;
  margin-left: var(--rd-sidebar-w);
  transition: margin-left .22s ease;
}
.rd-topbar {
  position: sticky;
  top: 0;
  z-index: 1020;
  min-height: var(--rd-topbar-h);
  padding: 0 28px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  background: rgba(10, 10, 10, 0.82);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--rd-border);
}
.rd-topbar-left, .rd-topbar-actions { display: flex; align-items: center; gap: 10px; }
.rd-topbar-title { min-width: 0; display: grid; line-height: 1.15; margin-left: 5px; }
.rd-topbar-title h1 {
  margin: 0;
  max-width: 42vw;
  color: #fff;
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -.025em;
  text-transform: capitalize;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Keyboard users reach the page without tabbing the whole menu first. */
.rd-skip-link {
  position: fixed;
  top: 10px;
  left: 10px;
  z-index: 1100;
  padding: 11px 18px;
  color: var(--rd-btn-ink) !important;
  font-size: 12.5px;
  font-weight: 700;
  text-decoration: none !important;
  background: var(--rd-accent-deep);
  border: 1px solid rgba(var(--rd-accent-ring-rgb), .5);
  border-radius: 11px;
  box-shadow: 0 14px 34px rgba(0, 0, 0, .45);
  transform: translateY(-160%);
  transition: transform .16s ease;
}
.rd-skip-link:focus { transform: translateY(0); outline: 2px solid var(--rd-link-hover); outline-offset: 2px; }
.rd-content:focus { outline: none; }

/* Topbar account menu */
.rd-user { position: relative; }
.rd-user-btn {
  height: 44px;
  max-width: 230px;
  padding: 0 10px 0 7px;
  display: flex;
  align-items: center;
  gap: 9px;
  color: #d6d3cc;
  background: rgba(255, 255, 255, .028);
  border: 1px solid var(--rd-border);
  border-radius: 12px;
  cursor: pointer;
  transition: color .16s ease, background .16s ease, border-color .16s ease;
}
.rd-user-btn:hover { color: #fff; background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .13); }
.rd-user-btn:focus-visible { outline: 2px solid rgba(var(--rd-accent-2-rgb), .65); outline-offset: 2px; }
.rd-user-avatar {
  flex: 0 0 30px;
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  color: var(--rd-btn-ink);
  font-family: var(--rd-display-font) !important;
  font-size: 13px;
  font-weight: 700;
  background: linear-gradient(140deg, var(--rd-accent-2), var(--rd-accent-deep));
  border-radius: 9px;
}
.rd-user-copy { min-width: 0; display: grid; text-align: left; line-height: 1.2; }
.rd-user-copy strong {
  color: #fff;
  font-size: 13.5px;
  font-weight: 650;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.rd-user-role { color: var(--rd-muted-2); font-size: 10.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.rd-user-role.rd-is-staff { color: var(--rd-link-hover); }
.rd-user-role.rd-is-super { color: #fbbf24; }
.rd-user-caret { flex: 0 0 auto; color: var(--rd-muted-2); font-size: 11px; transition: transform .18s ease; }
.rd-user.rd-is-open .rd-user-caret { transform: rotate(180deg); }

.rd-user-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 1050;
  min-width: 232px;
  padding: 7px;
  background: #181818;
  border: 1px solid #303030;
  border-radius: 13px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, .45);
  animation: rdFadeUp .16s ease both;
}
.rd-user-menu[hidden] { display: none; }
.rd-user-head {
  display: grid;
  gap: 2px;
  padding: 9px 11px 11px;
  margin-bottom: 5px;
  color: var(--rd-muted-2);
  font-size: 10.5px;
  border-bottom: 1px solid var(--rd-border);
}
.rd-user-head strong { color: #efece5; font-size: 14px; font-weight: 650; overflow-wrap: anywhere; }
.rd-user-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  color: #cecbc4 !important;
  font-size: 13.5px;
  font-weight: 600;
  text-decoration: none !important;
  border-radius: 9px;
  transition: color .14s ease, background .14s ease;
}
.rd-user-item i { width: 17px; color: var(--rd-muted-2); font-size: 15px; text-align: center; transition: color .14s ease; }
.rd-user-item:hover { color: #fff !important; background: rgba(var(--rd-accent-rgb), .1); }
.rd-user-item:hover i { color: var(--rd-accent-2); }
.rd-user-item:focus-visible { outline: 2px solid rgba(var(--rd-accent-2-rgb), .65); outline-offset: -2px; }
.rd-user-sep { height: 1px; margin: 5px 4px; background: var(--rd-border); }
.rd-user-danger:hover { color: #fecaca !important; background: rgba(239, 68, 68, .11); }
.rd-user-danger:hover i { color: #f87171; }
body.rd-logging-out .rd-user { opacity: .5; pointer-events: none; }
.rd-main { width: 100%; max-width: 1700px; margin: 0 auto; padding: 30px 30px 48px; }
/* No animation-fill-mode here. The keyframes animate transform/opacity, and a
   fill mode keeps that animation applied forever - which keeps .rd-content a
   stacking context, trapping .rd-item-card underneath .rd-sidebar (z 1040) no
   matter how high the card's own z-index is. The 'to' state (opacity 1,
   transform none) is identical to the element's resting state and there is no
   animation-delay, so dropping the fill mode costs nothing visually. */
.rd-content { position: relative; animation: rdFadeUp .32s ease; }

@keyframes rdFadeUp { from { opacity: 0; transform: translateY(7px); } to { opacity: 1; transform: none; } }

/* Brand */
.rd-brand-wrap { min-height: 84px; padding: 14px 14px 10px 16px; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.rd-brand { min-width: 0; display: flex; align-items: center; gap: 12px; color: #fff !important; }
.rd-brand-mark {
  position: relative; flex: 0 0 46px; width: 46px; height: 46px;
  display: grid; place-items: center; overflow: hidden;
  border-radius: 14px; border: 1px solid rgba(var(--rd-accent-ring-rgb), .3);
  background: linear-gradient(140deg, var(--rd-accent-2), var(--rd-accent-deep));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .28);
}
.rd-brand-mark img { width: 100%; height: 100%; object-fit: contain; padding: 4px; }
.rd-brand-mark i { display: none; color: #fff; font-size: 21px; line-height: 1; }
.rd-brand-mark-fallback img { display: none; }
.rd-brand-mark-fallback i { display: inline-block; }
.rd-brand-copy { min-width: 0; display: grid; }
.rd-brand-copy strong { font-size: 16.5px; font-weight: 700; letter-spacing: -.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rd-brand-copy small { color: var(--rd-muted); font-size: 11.5px; white-space: nowrap; }
.rd-sidebar-close { display: none !important; }

/* The sidebar lockup: the RFUnited Control Panel wordmark from the official site, with
   the panel's name set beside it behind a hairline. It always shows, whatever
   GameCP Settings holds as an uploaded logo - that square mark and the server
   name stay in the markup but are not displayed here - and it is selected
   without :has(), so a browser too old for that selector still gets it. The
   wordmark ships gold, matching the shell's gold accent, so it is shown as
   drawn; the head of the sidebar takes a faint accent wash to sit it in. */
.rd-sidebar .rd-brand { gap: 14px; border-radius: 12px; outline-offset: 4px; }
.rd-sidebar .rd-brand > .rd-brand-mark,
.rd-sidebar .rd-brand > .rd-brand-copy { display: none; }
.rd-sidebar .rd-brand-wrap {
  position: relative; isolation: isolate;
  min-height: 92px; padding: 16px 16px 14px;
}
.rd-sidebar .rd-brand-wrap::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(120% 90% at 22% 38%, rgba(var(--rd-accent-rgb), .1), transparent 62%);
}
.rd-sidebar .rd-brand:focus-visible { outline: 2px solid rgba(var(--rd-accent-2-rgb), .65); }
/* The hue-rotate that used to live here existed to turn the old gold
   wordmark round to the previous shell's blue. The RFUnited Control Panel mark is drawn
   in the colours it should be, so rotating it only mangles them. */
.rd-brand-logo {
  flex: 0 0 auto; display: block; width: 150px; height: auto;
  filter: drop-shadow(0 6px 10px rgba(0, 0, 0, .5));
  user-select: none;
  transform-origin: 30% 60%;
  transition: transform .32s cubic-bezier(.16, 1, .3, 1), filter .32s cubic-bezier(.16, 1, .3, 1);
}
.rd-brand:hover > .rd-brand-logo {
  transform: translateY(-1px) scale(1.03);
  filter: drop-shadow(0 9px 14px rgba(0, 0, 0, .55)) brightness(1.06);
}
.rd-brand-tag {
  min-width: 0; display: grid; gap: 3px; padding-left: 14px; line-height: 1.2;
  border-left: 1px solid rgba(255, 255, 255, .1);
}
.rd-brand-tag strong { color: #f5f2eb; font-size: 13px; font-weight: 700; letter-spacing: -.01em; white-space: nowrap; }
.rd-brand-tag small { color: var(--rd-accent-2); font-size: 10px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; white-space: nowrap; }
@media (prefers-reduced-motion: reduce) {
  .rd-brand-logo { transition: none; }
  .rd-brand:hover > .rd-brand-logo { transform: none; }
}

.rd-server-chip {
  margin: 0 16px 14px;
  padding: 10px 12px;
  display: flex; align-items: center; gap: 9px;
  color: #d6d3cc; font-size: 11px; font-weight: 700;
  background: rgba(53, 208, 127, 0.055);
  border: 1px solid rgba(53, 208, 127, 0.13);
  border-radius: 12px;
}
.rd-live-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--rd-success); box-shadow: 0 0 0 4px rgba(53,208,127,.08), 0 0 14px rgba(53,208,127,.42); }

/* Search */
.rd-nav-search { margin: 0 16px 12px; height: 44px; padding: 0 11px; display: flex; align-items: center; gap: 9px; background: #111111; border: 1px solid var(--rd-border); border-radius: 11px; color: var(--rd-muted-2); }
.rd-nav-search:focus-within { border-color: rgba(var(--rd-accent-rgb), .35); box-shadow: 0 0 0 3px rgba(var(--rd-accent-rgb),.07); }
.rd-nav-search input { min-width: 0; flex: 1; border: 0 !important; outline: 0 !important; box-shadow: none !important; background: transparent !important; color: var(--rd-text) !important; font-size: 13.5px; }
.rd-nav-search input::placeholder { color: #696969; }
.rd-nav-search kbd { padding: 1px 6px; border: 1px solid var(--rd-border); border-radius: 5px; background: #1d1d1d; color: var(--rd-muted); font: 11px var(--rd-font); }

/* Navigation generated by legacy GameCP */
.rd-nav { flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; padding: 2px 10px 18px; }
.rd-nav > ul.nav, .rd-nav ul.navbar-nav { width: 100%; display: flex !important; flex-direction: column !important; gap: 3px; margin: 0 0 8px; padding: 0; }
.rd-nav .nav-item { width: 100%; position: relative; }
/* Navigation is primary UI, not caption text. These were 12px / 11.5px, which
   read as fine print next to the pages they open. The whole nav now sits on a
   real reading scale, with row height and icon size raised to match so the
   labels are not simply crammed into the old boxes. */
.rd-nav .nav-link {
  min-height: 46px; padding: 11px 12px !important; display: flex !important; align-items: center; gap: 12px;
  border-radius: 10px; color: #c1bfbb !important; font-size: 14px; font-weight: 600; text-transform: capitalize;
  line-height: 1.35;
  transition: background .16s ease, color .16s ease, transform .16s ease;
}
.rd-nav .nav-link:hover { color: #fff !important; background: rgba(255,255,255,.045); }
.rd-nav .nav-link .rd-menu-icon { width: 21px; text-align: center; color: #888888; font-size: 15.5px; transition: color .16s ease; }
.rd-nav .nav-link:hover .rd-menu-icon, .rd-nav .rd-open > .nav-link .rd-menu-icon { color: var(--rd-accent-2); }
.rd-nav .nav-link .caret { margin-left: auto; width: 7px; height: 7px; border: 0 !important; border-right: 1.5px solid currentColor !important; border-bottom: 1.5px solid currentColor !important; transform: rotate(45deg) translateY(-2px); transition: transform .18s ease; opacity: .58; }
.rd-nav .rd-open > .nav-link .caret { transform: rotate(225deg) translate(-2px,-2px); }
.rd-nav .dropdown-menu {
  position: static !important; float: none !important; width: auto; min-width: 0; margin: 2px 0 6px 29px !important; padding: 3px 0 5px 10px !important;
  display: none; background: transparent !important; border: 0 !important; border-left: 1px solid rgba(255,255,255,.07) !important; box-shadow: none !important; transform: none !important;
}
.rd-nav .rd-open > .dropdown-menu { display: block; }
.rd-nav .dropdown-menu li { list-style: none; }
.rd-nav .dropdown-item { padding: 9px 12px !important; border-radius: 8px; color: #9f9f9f !important; font-size: 13px; line-height: 1.4; text-transform: capitalize; white-space: normal; }
.rd-nav .dropdown-item:hover { color: #fff !important; background: rgba(255,255,255,.04) !important; }
.rd-nav .dropdown-menu li.active > .dropdown-item { color: var(--rd-accent-ink) !important; background: linear-gradient(90deg, rgba(var(--rd-accent-rgb),.13), rgba(var(--rd-accent-rgb),.025)) !important; box-shadow: inset 2px 0 var(--rd-accent); }
.rd-nav .ms-auto.pull-right { margin-top: auto !important; padding-top: 9px; border-top: 1px solid var(--rd-border); }
.rd-nav .ms-auto.pull-right .nav-link { color: #cecbc4 !important; }
.rd-nav .ms-auto.pull-right .nav-link i:not(.rd-menu-icon) { width: 21px; color: var(--rd-accent-2); text-align: center; }
.rd-nav .rd-nav-hidden { display: none !important; }
.rd-nav .rd-nav-match > .nav-link { color: #fff !important; background: rgba(var(--rd-accent-rgb),.065); }

.rd-nav .nav-link.rd-current {
  color: #fff !important;
  background: linear-gradient(90deg, rgba(var(--rd-accent-rgb), .17), rgba(var(--rd-accent-rgb), .03)) !important;
  box-shadow: inset 2px 0 var(--rd-accent);
}
.rd-nav .nav-link.rd-current .rd-menu-icon { color: var(--rd-accent-2); }

/* The open section needs to be findable when scrolled away from its child. */
.rd-nav .rd-section-active > .nav-link {
  color: #fff !important;
  background: rgba(var(--rd-accent-rgb), .075);
  box-shadow: inset 2px 0 rgba(var(--rd-accent-2-rgb), .55);
}
.rd-nav .rd-section-active > .nav-link .rd-menu-icon { color: var(--rd-accent-2); }

/* Divider between player sections and staff tooling. */
.rd-nav-divider {
  list-style: none;
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 17px 5px 9px;
  color: var(--rd-muted-2);
  /* 9px uppercase under .17em tracking was the hardest text in the shell to
     read. Larger, with the tracking eased back so the letters stay a word. */
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.rd-nav-divider::after { content: ""; flex: 1; height: 1px; background: var(--rd-border); }
body.rd-sidebar-collapsed .rd-nav-divider { margin-inline: 8px; }
body.rd-sidebar-collapsed .rd-nav-divider span { display: none; }
.rd-nav .nav-link:focus-visible,
.rd-nav .dropdown-item:focus-visible { outline: 2px solid rgba(var(--rd-accent-2-rgb), .65); outline-offset: -2px; }

.rd-nav-empty {
  margin: 10px 4px 0;
  padding: 14px 12px;
  color: var(--rd-muted-2);
  font-size: 13px;
  line-height: 1.55;
  text-align: center;
  border: 1px dashed var(--rd-border);
  border-radius: 11px;
}

.rd-sidebar-footer { margin: auto 14px 14px; padding: 12px 12px; display: flex; align-items: center; justify-content: space-between; gap: 8px; border: 1px solid var(--rd-border); border-radius: 12px; background: rgba(255,255,255,.018); }
.rd-sidebar-footer > div { min-width: 0; display: grid; }
.rd-footer-label { color: var(--rd-muted-2); font-size: 8px; font-weight: 800; letter-spacing: .15em; }
.rd-sidebar-footer strong { color: #e2dfd8; font-size: 11px; }
.rd-version { flex: 0 0 auto; padding: 3px 7px; border-radius: 999px; color: var(--rd-link-hover); background: rgba(var(--rd-accent-rgb),.08); border: 1px solid rgba(var(--rd-accent-rgb),.12); font-size: 8.5px; font-weight: 800; }

/* Topbar controls */
.rd-icon-btn {
  width: 38px; height: 38px; padding: 0; display: inline-grid !important; place-items: center;
  color: #b6b4b0 !important; background: rgba(255,255,255,.028) !important; border: 1px solid var(--rd-border) !important;
  border-radius: 11px !important; box-shadow: none !important; transition: transform .16s ease, color .16s ease, background .16s ease, border-color .16s ease;
}
.rd-icon-btn:hover { transform: translateY(-1px); color: #fff !important; background: rgba(255,255,255,.06) !important; border-color: rgba(255,255,255,.13) !important; }
.rd-mobile-menu { display: none !important; }
.rd-logout-btn:hover {
  color: #fca5a5 !important;
  background: rgba(239, 68, 68, .11) !important;
  border-color: rgba(239, 68, 68, .28) !important;
}
body.rd-logging-out .rd-logout-btn { opacity: .5; pointer-events: none; }
.rd-security-badge { height: 38px; padding: 0 12px; align-items: center; gap: 8px; color: #a9d9bf; background: rgba(53,208,127,.05); border: 1px solid rgba(53,208,127,.12); border-radius: 11px; font-size: 10.5px; font-weight: 750; }

/* Hero */
.rd-page-hero {
  position: relative; min-height: 0; margin-bottom: 24px; padding: 0 0 20px;
  display: flex; align-items: flex-end; justify-content: space-between; gap: 20px;
  border-bottom: 1px solid var(--rd-border);
}
.rd-page-hero-copy { max-width: 760px; }
.rd-eyebrow { display: block; margin-bottom: 9px; color: var(--rd-muted-2); font-size: 9.5px; font-weight: 800; letter-spacing: .19em; }
.rd-page-hero h1 { margin: 0; color: #fff; font-size: clamp(23px, 2.6vw, 31px); font-weight: 600; letter-spacing: -.035em; text-transform: capitalize; }
.rd-page-hero p { max-width: 670px; margin: 8px 0 0; color: var(--rd-muted); font-size: 13px; line-height: 1.6; }
.rd-page-hero-orb { display: none; }

/* Global Bootstrap modernization */
.container, .container-fluid { max-width: 100% !important; }
.container { width: 100% !important; }
.row { --bs-gutter-x: 1.2rem; }

.card {
  color: var(--rd-text);
  background: linear-gradient(180deg, rgba(29,29,29,.94), rgba(20,20,20,.96)) !important;
  border: 1px solid var(--rd-border) !important;
  border-radius: var(--rd-radius) !important;
  box-shadow: 0 10px 30px rgba(0,0,0,.16) !important;
  overflow: hidden;
}
.card + .card { margin-top: 16px; }
.card-header { min-height: 52px; padding: 14px 18px !important; display: flex; align-items: center; border-bottom: 1px solid var(--rd-border) !important; background: rgba(255,255,255,.018) !important; }
.card-header .card-title, .card-title { margin: 0 !important; color: #faf7f0 !important; font-weight: 750 !important; letter-spacing: -.015em; }
.card-header h1, .card-header h2, .card-header h3, .card-header h4, .card-header h5 { margin: 0; }
.card-body { padding: 18px !important; }
.card-footer { border-top: 1px solid var(--rd-border) !important; background: rgba(0,0,0,.06) !important; }
.shadow, .shadow-sm, .shadow-lg { box-shadow: var(--rd-shadow) !important; }

/* Forms */
.form-control, .form-select, select.form-control, textarea.form-control, .select2-container .select2-choice {
  min-height: 42px;
  color: #efece5 !important;
  background-color: #101010 !important;
  border: 1px solid var(--rd-control) !important;
  border-radius: 10px !important;
  box-shadow: none !important;
  transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
.form-control:focus, .form-select:focus, select.form-control:focus, textarea.form-control:focus {
  color: #fff !important; background-color: #141414 !important; border-color: rgba(var(--rd-accent-rgb),.58) !important; box-shadow: 0 0 0 3px rgba(var(--rd-accent-rgb),.09) !important;
}
.form-control::placeholder { color: #6a6a6a !important; }
.form-label, label { color: #c1bfbb; font-size: 12px; font-weight: 650; }
.input-group-text { color: #8b8b8b !important; background: #141414 !important; border-color: var(--rd-control) !important; }
.help-block, .form-text, .text-muted { color: var(--rd-muted) !important; }
fieldset { margin-bottom: 18px; padding: 0; border: 0; }
legend { margin: 0 0 16px; color: #fff; font-size: 16px; font-weight: 750; }

/* Buttons */
.btn { min-height: 38px; padding: 8px 14px; border-radius: 10px !important; font-size: 11.5px; font-weight: 720; letter-spacing: .005em; box-shadow: none !important; transition: transform .15s ease, filter .15s ease, background .15s ease, border-color .15s ease; }
.btn:hover { transform: translateY(-1px); }
.btn-primary, .bg-primary {
  --bs-btn-bg: var(--rd-accent); --bs-btn-border-color: var(--rd-accent); --bs-btn-hover-bg: var(--rd-accent-hover); --bs-btn-hover-border-color: var(--rd-accent-hover);
}
.btn-primary { color: var(--rd-btn-ink) !important; background: var(--rd-btn-fill) !important; border-color: var(--rd-btn-border) !important; box-shadow: 0 8px 18px rgba(var(--rd-accent-rgb),.13) !important; }
.btn-secondary, .btn-default { color: #e0ddd6 !important; background: #202020 !important; border-color: #363636 !important; }
.btn-success { background: var(--rd-success) !important; border-color: var(--rd-success) !important; }
.btn-danger { background: var(--rd-danger) !important; border-color: var(--rd-danger) !important; }
.btn-warning { color: #17120b !important; background: var(--rd-warning) !important; border-color: var(--rd-warning) !important; }
.btn-info { background: var(--rd-info) !important; border-color: var(--rd-info) !important; }
.btn-xs, .btn-sm { min-height: 31px; padding: 5px 9px; border-radius: 8px !important; font-size: 10.5px; }

/* Tables */
.table-responsive { border-radius: 12px; }
.table { --bs-table-bg: transparent; --bs-table-color: #d5d2cb; --bs-table-border-color: rgba(255,255,255,.065); margin-bottom: 0; color: #d5d2cb !important; vertical-align: middle; }
.table > :not(caption) > * > * { padding: 11px 12px; background: transparent !important; border-bottom-color: var(--rd-border) !important; }
.table thead th, .table > thead > tr > th { color: #909090 !important; font-size: 10px; font-weight: 800; letter-spacing: .065em; text-transform: uppercase; white-space: nowrap; background: rgba(255,255,255,.018) !important; }
.table tbody tr { transition: background .13s ease; }
.table-hover > tbody > tr:hover > * { --bs-table-accent-bg: transparent; background: rgba(255,255,255,.025) !important; color: #fff !important; }
.table th.bg-primary { color: var(--rd-accent-ink) !important; background: rgba(var(--rd-accent-rgb),.10) !important; border-color: rgba(var(--rd-accent-rgb),.13) !important; }
.table td, .table th { border-color: var(--rd-border) !important; }

/* Alerts / badges */
.alert { border-width: 1px !important; border-radius: 12px !important; padding: 13px 15px !important; color: #e8e5de; background: #191919; }
.alert h4 { font-size: 14px; font-weight: 760; }
.alert-success { background: rgba(53,208,127,.075) !important; border-color: rgba(53,208,127,.18) !important; color: #bcead0 !important; }
.alert-danger { background: rgba(255,93,105,.075) !important; border-color: rgba(255,93,105,.19) !important; color: #ffc0c5 !important; }
.alert-warning { background: rgba(255,189,74,.07) !important; border-color: rgba(255,189,74,.18) !important; color: #ffe0a3 !important; }
.alert-info { background: rgba(85,183,255,.07) !important; border-color: rgba(85,183,255,.18) !important; color: #bde3ff !important; }
.badge { padding: 5px 8px; border-radius: 999px; font-size: 9.5px; font-weight: 780; letter-spacing: .02em; }

/* Dropdowns / modal */
.dropdown-menu:not(.rd-nav .dropdown-menu) { padding: 7px; background: #181818 !important; border: 1px solid #303030 !important; border-radius: 12px !important; box-shadow: 0 20px 55px rgba(0,0,0,.34) !important; }
.dropdown-menu:not(.rd-nav .dropdown-menu) .dropdown-item { color: #c4c2be !important; border-radius: 8px; }
.dropdown-menu:not(.rd-nav .dropdown-menu) .dropdown-item:hover { color: #fff !important; background: rgba(var(--rd-accent-rgb),.08) !important; }
.modal-content { color: var(--rd-text); background: #141414 !important; border: 1px solid var(--rd-border) !important; border-radius: 16px !important; box-shadow: 0 30px 80px rgba(0,0,0,.48); }
.modal-header, .modal-footer { border-color: var(--rd-border) !important; }

/* Pagination */
.pagination { gap: 4px; }
.page-link { min-width: 34px; min-height: 34px; display: grid; place-items: center; padding: 5px 8px; color: #a7a7a7 !important; background: #141414 !important; border: 1px solid var(--rd-border) !important; border-radius: 8px !important; }
.page-item.active .page-link { color: var(--rd-btn-ink) !important; background: var(--rd-accent) !important; border-color: var(--rd-accent) !important; }

/* DataTables */
.dataTables_wrapper { color: var(--rd-muted); }
.dataTables_wrapper .dataTables_filter input, .dataTables_wrapper .dataTables_length select { min-height: 36px; color: #efece5 !important; background: #101010 !important; border: 1px solid #303030 !important; border-radius: 9px !important; }
div.dataTables_wrapper div.dataTables_length select { width: auto !important; min-width: 76px; }
.dataTables_info { color: var(--rd-muted) !important; font-size: 11px; }

/* ---- Select2 3.4.2 ---------------------------------------------------
   The item pickers run on select2 3.x, which paints its own 2013 chrome:
   a white-to-#eee gradient on the field, a grey gradient on the arrow, a
   white drop and a sprite chevron. Setting background-color alone left
   every one of those gradients on top of it, which is why the picker
   stayed a white bar on a dark panel. Each surface needs background-image
   cleared as well, so these set the shorthand. */
.select2-container { max-width: 100%; }
.select2-container .select2-choice {
  display: flex;
  align-items: center;
  background: #101010 !important;
}
.select2-container .select2-choice > .select2-chosen { color: #efece5; }
.select2-container .select2-choice .select2-chosen .select2-placeholder,
.select2-container .select2-default > .select2-chosen { color: #6a6a6a !important; }

/* The arrow is an absolutely positioned 18px block with a sprite inside.
   Widen it into the field's own gutter, drop the divider rule, and draw
   the chevron the rest of the panel's selects use. */
.select2-container .select2-choice .select2-arrow {
  width: 32px;
  background: transparent !important;
  border-left: 0 !important;
}
.select2-container .select2-choice .select2-arrow b {
  background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%236f829d' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e") no-repeat center !important;
  background-size: 11px 8px !important;
}
.select2-dropdown-open .select2-choice {
  border-bottom-left-radius: 10px !important;
  border-bottom-right-radius: 10px !important;
  border-color: rgba(var(--rd-accent-rgb),.58) !important;
  box-shadow: none !important;
}
.select2-dropdown-open .select2-choice .select2-arrow b { transform: rotate(180deg); }
.select2-container-active .select2-choice {
  border-color: rgba(var(--rd-accent-rgb),.58) !important;
  box-shadow: 0 0 0 3px rgba(var(--rd-accent-rgb),.09) !important;
}

/* The drop is a separate element appended to <body>, so it sits outside
   .rd-content and has to be themed unscoped. */
.select2-drop, .select2-drop-active {
  color: #e5e2db !important;
  background: #141414 !important;
  border: 1px solid #363636 !important;
  border-radius: 12px !important;
  box-shadow: 0 20px 55px rgba(0,0,0,.42) !important;
  margin-top: 5px;
  overflow: hidden;
}
.select2-drop.select2-drop-above { margin-top: -5px; }
.select2-drop .select2-search { position: relative; padding: 8px 8px 4px; }
.select2-drop .select2-search input {
  min-height: 34px;
  padding: 6px 30px 6px 10px !important;
  color: #efece5 !important;
  background: #101010 !important;
  border: 1px solid #303030 !important;
  border-radius: 9px !important;
}
.select2-drop .select2-search input:focus {
  border-color: rgba(var(--rd-accent-rgb),.58) !important;
  outline: none;
}
/* The library shows the search is working by swapping a spinner GIF in as
   the input's background. Theming that background away took the only
   feedback these pickers have with it, and the item lookup is a round trip
   to the server, so the spinner is redrawn here in the panel's own ink. */
.select2-drop .select2-search::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 19px;
  width: 13px;
  height: 13px;
  margin-top: -5px;
  border: 2px solid rgba(var(--rd-accent-rgb),.28);
  border-top-color: var(--rd-accent);
  border-radius: 50%;
  opacity: 0;
  transition: opacity .12s ease;
  pointer-events: none;
}
.select2-drop .select2-search:has(input.select2-active)::after {
  opacity: 1;
  animation: rd-select2-spin .6s linear infinite;
}
@keyframes rd-select2-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .select2-drop .select2-search:has(input.select2-active)::after { animation-duration: 1.8s; }
}
.select2-results { padding: 4px; margin: 4px 0 4px 0; }
.select2-results .select2-result-label { padding: 7px 9px; border-radius: 8px; }
.select2-results .select2-highlighted { background: rgba(var(--rd-accent-rgb),.14) !important; color: #fff !important; }
.select2-results .select2-no-results,
.select2-results .select2-searching,
.select2-results .select2-selection-limit {
  color: var(--rd-muted) !important;
  background: transparent !important;
  font-size: 12px;
}

/* RF item / inventory components: preserve mechanics, modernize frame */
.common-window { border-color: rgba(255,255,255,.13) !important; border-radius: 12px; overflow: visible; box-shadow: 0 16px 40px rgba(0,0,0,.22); }
.equipment-list, .table-equipment { background-color: #111111 !important; }
.invetory-item-tooltip .tooltiptext, .tooltip-box { border-color: rgba(var(--rd-accent-rgb),.22) !important; border-radius: 10px !important; box-shadow: 0 18px 45px rgba(0,0,0,.45); }

/* Old custom panels */
.panel, .panel-account, .panel-status, .panel-chip, .panel-top-killer, .panel-news { color: var(--rd-text); background: var(--rd-surface) !important; border: 1px solid var(--rd-border) !important; border-radius: var(--rd-radius); }
.panel-mainweb { padding: 20px !important; background: transparent !important; }

/* Auth experience */
body.rd-auth-page .rd-sidebar { display: none; }
body.rd-auth-page .rd-stage { margin-left: 0 !important; }
body.rd-auth-page .rd-collapse-menu, body.rd-auth-page .rd-mobile-menu, body.rd-auth-page #rdFocusSearch { display: none !important; }
body.rd-auth-page .rd-main { max-width: 1040px; padding-top: 38px; }
body.rd-auth-page .rd-page-hero { max-width: 760px; margin-left: auto; margin-right: auto; min-height: 130px; }
body.rd-auth-page .rd-content { max-width: 760px; margin: 0 auto; }
body.rd-auth-page .rd-content > .row { justify-content: center; }
body.rd-auth-page .rd-content > form, body.rd-auth-page .rd-content > .card { max-width: 680px; margin-left: auto; margin-right: auto; }
body.rd-auth-page .card { box-shadow: 0 25px 65px rgba(0,0,0,.30) !important; }
.cf-turnstile { margin: 8px 0 14px; }
.card-otp .otp-badge { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 11px; color: var(--rd-accent-2); background: rgba(var(--rd-accent-rgb),.09); border: 1px solid rgba(var(--rd-accent-rgb),.14); }
.info-chip { padding: 8px 10px; border-radius: 9px; background: rgba(255,255,255,.025); border: 1px solid var(--rd-border); }

/* Collapsed desktop sidebar */
body.rd-sidebar-collapsed .rd-sidebar { width: var(--rd-sidebar-collapsed); }
body.rd-sidebar-collapsed .rd-stage { margin-left: var(--rd-sidebar-collapsed); }
body.rd-sidebar-collapsed .rd-brand-wrap { justify-content: center; padding-inline: 12px; }
body.rd-sidebar-collapsed .rd-brand-tag { display: none !important; }
body.rd-sidebar-collapsed .rd-brand-logo { width: 64px !important; }
body.rd-sidebar-collapsed .rd-brand-copy, body.rd-sidebar-collapsed .rd-server-chip span, body.rd-sidebar-collapsed .rd-server-chip .ms-auto,
body.rd-sidebar-collapsed .rd-nav-search input, body.rd-sidebar-collapsed .rd-nav-search kbd, body.rd-sidebar-collapsed .rd-sidebar-footer,
body.rd-sidebar-collapsed .rd-nav .nav-link > span.rd-menu-label, body.rd-sidebar-collapsed .rd-nav .nav-link .caret { display: none !important; }
body.rd-sidebar-collapsed .rd-server-chip { justify-content: center; margin-inline: 13px; padding-inline: 0; }
body.rd-sidebar-collapsed .rd-nav-search { justify-content: center; margin-inline: 13px; padding: 0; }
body.rd-sidebar-collapsed .rd-nav-search i { margin: 0; }
body.rd-sidebar-collapsed .rd-nav { padding-inline: 12px; overflow: visible; }
body.rd-sidebar-collapsed .rd-nav .nav-link { justify-content: center; padding-inline: 0 !important; }
body.rd-sidebar-collapsed .rd-nav .nav-link .rd-menu-icon { font-size: 16px; width: auto; }
body.rd-sidebar-collapsed .rd-nav .dropdown-menu { display: none !important; }
body.rd-sidebar-collapsed .rd-nav-empty { display: none; }
body.rd-sidebar-collapsed .rd-nav .nav-link.rd-current,
body.rd-sidebar-collapsed .rd-nav .rd-section-active > .nav-link {
  background: rgba(var(--rd-accent-rgb), .16) !important;
  box-shadow: inset 0 0 0 1px rgba(var(--rd-accent-2-rgb), .3);
}

/* Mobile */
.rd-sidebar-backdrop { display: none; }
@media (max-width: 991.98px) {
  :root { --rd-topbar-h: 64px; }
  .rd-sidebar { width: min(86vw, 304px); transform: translateX(-102%); box-shadow: 24px 0 70px rgba(0,0,0,.46); }
  .rd-stage, body.rd-sidebar-collapsed .rd-stage { margin-left: 0; }
  .rd-mobile-menu { display: inline-grid !important; }
  .rd-collapse-menu { display: none !important; }
  .rd-sidebar-close { display: inline-grid !important; }
  body.rd-mobile-nav-open .rd-sidebar { transform: translateX(0); }
  body.rd-mobile-nav-open .rd-sidebar-backdrop { position: fixed; inset: 0; z-index: 1035; display: block; background: rgba(0,0,0,.60); backdrop-filter: blur(2px); }
  .rd-topbar { padding: 0 16px; }
  .rd-main { padding: 20px 15px 36px; }
  .rd-page-hero { min-height: 128px; padding: 23px 20px; border-radius: 16px; }
  .rd-page-hero-orb { flex-basis: 56px; width: 56px; height: 56px; border-radius: 17px; font-size: 20px; }
  .rd-page-hero p { display: none; }
  .rd-topbar-title h1 { max-width: 52vw; font-size: 18px; }
  .table-responsive { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .card-body { padding: 15px !important; }
}

@media (max-width: 575.98px) {
  .rd-page-hero-orb { display: none; }
  .rd-page-hero { min-height: 112px; }
  .rd-page-hero h1 { font-size: 25px; }
  .rd-main { padding-inline: 12px; }
  .rd-topbar { padding-inline: 12px; }
  .rd-security-badge { display: none !important; }
  .btn { max-width: 100%; }
  .form-control, .form-select, select.form-control { font-size: 16px; }
  /* Collapse the account button to just the avatar on narrow screens. */
  .rd-user-copy, .rd-user-caret { display: none; }
  .rd-user-btn { width: 44px; padding: 0; justify-content: center; }
  .rd-topbar-title h1 { font-size: 16px; max-width: 44vw; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}


/* ==========================================================
   V2 COMPATIBILITY FIXES
   ========================================================== */
.rd-nav > ul.navbar-nav.ms-auto,
.rd-nav > ul.navbar-nav.pull-right {
  margin-left: 0 !important;
  margin-top: 10px !important;
  width: 100% !important;
}

.rd-nav > ul.navbar-nav.ms-auto .nav-link,
.rd-nav > ul.navbar-nav.pull-right .nav-link {
  width: 100%;
}

.rd-content {
  min-width: 0;
}

.rd-content > .container,
.rd-content > .container-fluid,
.rd-content .container,
.rd-content .container-fluid {
  max-width: 100%;
}

.rd-content .row {
  min-width: 0;
}

.rd-content .card,
.rd-content .common-window,
.rd-content .table-responsive {
  max-width: 100%;
}

.rd-content img {
  max-width: 100%;
}

.rd-content table {
  width: 100%;
}

@media (max-width: 991.98px) {
  .rd-main {
    padding: 18px 14px 36px !important;
  }

  .rd-page-hero {
    padding: 20px !important;
  }

  .rd-topbar {
    padding-inline: 14px !important;
  }
}




/* ==========================================================
   RFUnited Control Panel GAMECP INTERFACE
   ========================================================== */
:root {
  --rd-accent: #f2b32e;
  --rd-accent-2: #ffd46b;
  --rd-accent-soft: rgba(var(--rd-accent-rgb), .12);
  --rd-border-strong: rgba(var(--rd-accent-rgb), .24);
  --rd-font: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --rd-display-font: "Space Grotesk", "Inter", system-ui, sans-serif;
  --rd-mono-font: "JetBrains Mono", "Consolas", ui-monospace, SFMono-Regular, monospace;
  --rd-accent-solid: var(--rd-accent);
  --rd-discord: #5865f2;
  --rd-discord-hover: #4752c4;
}

body,
button,
input,
select,
textarea,
.table,
.btn {
  font-family: var(--rd-font) !important;
}

h1, h2, h3, h4, h5, h6,
.rd-brand-copy strong,
.rd-topbar-title strong,
.rd-page-hero h1,
.rd-nav .nav-link,
.rd-nav .dropdown-item,
.btn,
.card-title,
.rd-footer-label,
.rd-sidebar-footer strong {
  font-family: var(--rd-display-font) !important;
  letter-spacing: -.012em;
}

.btn-primary,
.btn-secondary,
.btn-success,
.btn-info,
.btn-warning,
.btn-light,
.btn-outline-primary,
.btn-outline-secondary,
.btn-outline-success,
.btn-outline-info,
.btn-outline-warning,
.rd-btn,
button[type="submit"]:not(.btn-danger):not(.btn-outline-danger):not(.rd-cta):not(.rd-icon-btn),
input[type="submit"]:not(.btn-danger),
input[type="button"]:not(.btn-danger) {
  color: var(--rd-btn-ink) !important;
  background: var(--rd-btn-fill) !important;
  border-color: var(--rd-btn-border) !important;
  box-shadow: 0 9px 24px rgba(var(--rd-accent-rgb), .15) !important;
}

.btn-primary:hover,
.btn-secondary:hover,
.btn-success:hover,
.btn-info:hover,
.btn-warning:hover,
.btn-light:hover,
.btn-outline-primary:hover,
.btn-outline-secondary:hover,
.btn-outline-success:hover,
.btn-outline-info:hover,
.btn-outline-warning:hover,
.rd-btn:hover,
button[type="submit"]:not(.btn-danger):not(.btn-outline-danger):not(.rd-cta):not(.rd-icon-btn):hover,
input[type="submit"]:not(.btn-danger):hover,
input[type="button"]:not(.btn-danger):hover {
  color: var(--rd-btn-ink) !important;
  background: var(--rd-btn-fill-hover) !important;
  border-color: var(--rd-btn-fill-hover) !important;
}

/* Keep destructive actions red. */
.btn-danger,
.btn-outline-danger {
  color: #fff !important;
  background: #dc2626 !important;
  border-color: #dc2626 !important;
}
.btn-danger:hover,
.btn-outline-danger:hover {
  color: #fff !important;
  background: #b91c1c !important;
  border-color: #b91c1c !important;
}

/* ==========================================================
   PUBLIC AUTH EXPERIENCE - dark + blue
   ========================================================== */
body.rd-auth-page {
  --rd-auth-blue: var(--rd-accent);
  --rd-auth-blue-soft: var(--rd-accent-2);
  --rd-auth-blue-deep: var(--rd-accent-deep);
  --rd-auth-line: rgba(var(--rd-accent-2-rgb), .17);
  --rd-auth-line-2: rgba(177, 175, 171, .10);
  --rd-auth-muted: #a0a0a0;
  background:
    linear-gradient(112deg, rgba(var(--rd-accent-hover-rgb), .22) 0%, rgba(var(--rd-accent-hover-rgb), 0) 44%),
    linear-gradient(248deg, rgba(var(--rd-accent-deep-rgb), .17) 0%, rgba(var(--rd-accent-deep-rgb), 0) 46%),
    linear-gradient(180deg, #0d0d0d 0%, #0a0a0a 56%, #050505 100%);
  background-attachment: fixed;
}
body.rd-auth-page .rd-sidebar,
body.rd-auth-page .rd-topbar,
body.rd-auth-page .rd-page-hero {
  display: none !important;
}
body.rd-auth-page .rd-stage { margin-left: 0 !important; }
body.rd-auth-page .rd-main { max-width: 1280px; padding: 46px 26px 58px; }
body.rd-auth-page .rd-content { max-width: none; margin: 0; }
body.rd-auth-page a { color: var(--rd-auth-blue-soft); }
body.rd-auth-page a:hover { color: var(--rd-link-hover); }
body.rd-auth-page ::selection { background: rgba(var(--rd-accent-rgb), .38); color: #fff; }
body.rd-auth-page .rd-site-footer { border-top-color: var(--rd-auth-line-2); }
body.rd-auth-page .rd-dev-credit i { color: var(--rd-auth-blue-soft); }

.rd-auth-shell {
  /* One centred column. The showcase and community cards either side of the
     form were removed, so there is nothing to lay out against - a grid with
     a 1fr column would push the card to the right of a gap nobody can see. */
  width: 100%;
  min-height: 72vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32px 0;
}
.rd-auth-shell > .rd-auth-panel { width: 100%; max-width: 424px; }
.rd-auth-showcase { grid-area: showcase; }
/* The sign-in card runs the full height of the showcase beside it, with its
   form centred, so the pair reads as one composed spread. */
.rd-auth-panel { grid-area: form; display: flex; }
.rd-auth-panel > .rd-auth-card { flex: 1; display: flex; flex-direction: column; justify-content: center; }
/* The Facebook feed is retired from the landing page. Hidden rather than
   deleted from index.php so this stays a presentation change; the iframe is
   loading="lazy", so with its section undisplayed it is never fetched. */
.rd-auth-community { display: none !important; }

/* The showcase is set in the game's own key art - the RFUnited Control Panel titan
   and two of its heroes, from the official site. The art is sized so the
   titan rises behind the headline and the heroes stand in the open band
   between the copy and the feature tiles; the scrims darken only where text
   sits - the head, the left edge and the foot. The art ships as a fire
   scene; the same hue turn as the wordmark brings its flame round to the
   shell's blue. */
.rd-auth-showcase {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: min(680px, calc(100vh - 92px));
  display: flex;
  flex-direction: column;
  padding: 34px 34px 30px;
  border: 1px solid var(--rd-auth-line);
  border-radius: 22px;
  background: #0a0a0a;
  box-shadow: 0 26px 70px rgba(5, 5, 5, .55);
}
.rd-auth-showcase::before,
.rd-auth-showcase::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}
.rd-auth-showcase::before {
  background: url("../img/auth/rf-key-art.webp") 60% -60px / auto 650px no-repeat;
  filter: brightness(.95);
  transform-origin: 55% 45%;
  animation: rdArtSettle 2.2s cubic-bezier(.16, 1, .3, 1) both;
}
.rd-auth-showcase::after {
  background:
    linear-gradient(180deg, rgba(10, 10, 10, .78) 0%, rgba(10, 10, 10, .5) 30%, rgba(10, 10, 10, 0) 44%, rgba(10, 10, 10, 0) 58%, rgba(10, 10, 10, .9) 76%, #0a0a0a 92%),
    linear-gradient(90deg, rgba(10, 10, 10, .82) 0%, rgba(10, 10, 10, .35) 40%, rgba(10, 10, 10, 0) 70%),
    linear-gradient(180deg, rgba(var(--rd-accent-deep-rgb), .16), rgba(var(--rd-accent-deep-rgb), 0) 40%);
}
@keyframes rdArtSettle {
  from { opacity: .35; transform: scale(1.07); }
  to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .rd-auth-showcase::before { animation: none; }
}
.rd-auth-showcase-inner { position: relative; z-index: 1; flex: 1; display: flex; flex-direction: column; }
.rd-auth-showcase .rd-auth-features { margin-top: auto; padding-top: 26px; }

.rd-auth-brand { display: flex; align-items: center; gap: 13px; margin-bottom: 30px; }
/* On the public sign-in the brand is the RFUnited Control Panel wordmark, turned to the
   shell's blue like the sidebar's, with the panel's role set beside it. The
   server name stays in the markup for screen readers. Scoped to the
   showcase: the single-card auth screens keep their icon marks. */
.rd-auth-showcase .rd-auth-brand { gap: 16px; margin-bottom: 34px; }
.rd-auth-showcase .rd-auth-brand::before {
  content: "";
  flex: 0 0 auto;
  width: 188px;
  aspect-ratio: 420 / 154;
  background: url("../img/brand/evo-gamecp-logo.svg") center / contain no-repeat;
  filter: hue-rotate(180deg) saturate(1.75) drop-shadow(0 8px 14px rgba(0, 0, 0, .55));
}
.rd-auth-showcase .rd-auth-brand-mark { display: none; }
.rd-auth-showcase .rd-auth-brand-copy { padding-left: 16px; border-left: 1px solid rgba(255, 255, 255, .12); }
.rd-auth-showcase .rd-auth-brand-copy strong {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.rd-auth-showcase .rd-auth-brand-copy small { color: var(--rd-auth-blue-soft); }
.rd-auth-brand-mark {
  flex: 0 0 48px;
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border-radius: 15px;
  color: #fff;
  font-size: 21px;
  background: linear-gradient(140deg, var(--rd-auth-blue-soft), var(--rd-auth-blue-deep));
  box-shadow: 0 14px 30px rgba(var(--rd-accent-hover-rgb), .38), inset 0 1px 0 rgba(255, 255, 255, .28);
}
.rd-auth-brand-copy { display: grid; line-height: 1.25; }
.rd-auth-brand-copy strong {
  color: #fff;
  font-family: var(--rd-display-font) !important;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: .02em;
}
.rd-auth-brand-copy small {
  color: var(--rd-auth-muted);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
}

.rd-auth-showcase h1 {
  margin: 0 0 12px;
  color: #fff;
  font-size: clamp(30px, 4.2vw, 46px);
  line-height: 1.06;
  font-weight: 600;
  letter-spacing: -.025em;
}
.rd-auth-showcase h1 span {
  background: linear-gradient(100deg, var(--rd-auth-blue-soft), #ffe7a6 55%, #fff6e0);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.rd-auth-showcase-inner > p {
  max-width: 560px;
  margin: 0;
  color: var(--rd-auth-muted);
  font-size: 14.5px;
  line-height: 1.65;
}

.rd-auth-features {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin: 26px 0 0;
  padding: 0;
  list-style: none;
}
.rd-auth-features li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px;
  border: 1px solid var(--rd-auth-line-2);
  border-radius: 14px;
  /* Over the key art, so the tile carries its own ground for the text. */
  background: rgba(10, 10, 10, .66);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  transition: transform .18s ease, border-color .18s ease, background .18s ease;
}
.rd-auth-features li:hover {
  transform: translateY(-2px);
  border-color: var(--rd-auth-line);
  background: rgba(23, 23, 23, .78);
}
.rd-feature-icon {
  flex: 0 0 36px;
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border-radius: 11px;
  color: var(--rd-auth-blue-soft);
  font-size: 16px;
  background: rgba(var(--rd-accent-rgb), .12);
  border: 1px solid var(--rd-auth-line);
}
.rd-feature-copy { display: block; min-width: 0; }
.rd-feature-copy strong { display: block; color: #f2efe8; font-size: 13px; font-weight: 700; }
.rd-feature-copy small { display: block; margin-top: 2px; color: var(--rd-auth-muted); font-size: 11.5px; line-height: 1.5; }

body.rd-auth-page .rd-auth-trust {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid var(--rd-auth-line-2);
}
body.rd-auth-page .rd-auth-trust span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #bbb9b5;
  font-size: 11.5px;
  font-weight: 600;
}
body.rd-auth-page .rd-auth-trust i { color: var(--rd-auth-blue-soft); font-size: 14px; }

.rd-auth-card {
  position: relative;
  overflow: hidden;
  padding: 28px 26px;
  border: 1px solid var(--rd-auth-line);
  border-radius: 20px;
  background: linear-gradient(180deg, rgba(25, 25, 25, .92), rgba(13, 13, 13, .96));
  box-shadow: 0 30px 80px rgba(5, 5, 5, .62);
}
.rd-auth-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(var(--rd-accent-2-rgb), .55), transparent);
}
.rd-auth-card-head { margin-bottom: 24px; }
.rd-auth-card-head h2 {
  margin: 0 0 7px;
  color: #fff;
  font-size: 27px;
  font-weight: 600;
  letter-spacing: -.03em;
}
.rd-auth-card-head p { margin: 0; color: var(--rd-auth-muted); font-size: 13.5px; line-height: 1.6; }

.rd-field { margin-bottom: 15px; }
.rd-field > label {
  display: block;
  margin-bottom: 8px;
  color: #d4d1ca;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
}
.rd-input { position: relative; display: block; }
.rd-input > i {
  position: absolute;
  top: 50%;
  left: 15px;
  z-index: 2;
  transform: translateY(-50%);
  color: #808080;
  font-size: 15px;
  pointer-events: none;
  transition: color .16s ease;
}
.rd-input:focus-within > i { color: var(--rd-auth-blue-soft); }
body.rd-auth-page .rd-input .form-control {
  width: 100% !important;
  min-height: 50px !important;
  padding: 12px 14px 12px 43px !important;
  color: #f7f4ed !important;
  font-size: 14px;
  background: rgba(10, 10, 10, .9) !important;
  border: 1px solid rgba(147, 147, 147, .18) !important;
  border-radius: 13px !important;
  box-shadow: none !important;
  transition: border-color .16s ease, box-shadow .16s ease, background .16s ease;
}
body.rd-auth-page .rd-input .form-control::placeholder { color: #6b6b6b !important; }
body.rd-auth-page .rd-input .form-control:focus {
  color: #fff !important;
  background: rgba(13, 13, 13, .96) !important;
  border-color: rgba(var(--rd-accent-2-rgb), .62) !important;
  box-shadow: 0 0 0 4px rgba(var(--rd-accent-rgb), .14) !important;
}
body.rd-auth-page .rd-input-reveal .form-control { padding-right: 48px !important; }
.rd-reveal {
  position: absolute;
  top: 50%;
  right: 7px;
  z-index: 3;
  transform: translateY(-50%);
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  padding: 0;
  color: #8b8b8b;
  font-size: 15px;
  background: transparent;
  border: 0;
  border-radius: 9px;
  cursor: pointer;
  transition: color .16s ease, background .16s ease;
}
.rd-reveal:hover { color: var(--rd-accent-ink); background: rgba(var(--rd-accent-2-rgb), .12); }
.rd-reveal:focus-visible { outline: 2px solid rgba(var(--rd-accent-2-rgb), .6); outline-offset: 1px; }

.rd-form-meta { display: flex; justify-content: flex-end; margin: -1px 0 18px; }
.rd-form-meta a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--rd-accent-2) !important;
  font-size: 12px;
  font-weight: 600;
}
.rd-form-meta a:hover { color: var(--rd-link-hover) !important; }

body.rd-auth-page .cf-turnstile { display: flex; justify-content: center; margin: 2px 0 16px; }

.rd-cta {
  --rd-cta-cut: 13px;
  --rd-cta-frame: var(--rd-accent-ring);
  --rd-cta-fill: linear-gradient(135deg, var(--rd-accent-2), var(--rd-accent-hover) 54%, var(--rd-accent-deep));
  --rd-cta-ink: var(--rd-btn-ink);   /* dark on gold; ghost/quiet/discord/danger set their own */
  --rd-cta-lift: -3px;
  --rd-cta-sheen: rgba(255, 255, 255, .30);
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 11px;
  min-height: 52px;
  padding: 14px 26px;
  color: var(--rd-cta-ink) !important;
  font-family: var(--rd-display-font) !important;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: .085em;
  line-height: 1;
  text-transform: uppercase;
  text-decoration: none !important;
  background: var(--rd-cta-frame);
  border: 0;
  border-radius: 0 !important;
  cursor: pointer;
  overflow: hidden;
  clip-path: polygon(
    var(--rd-cta-cut) 0,
    100% 0,
    100% calc(100% - var(--rd-cta-cut)),
    calc(100% - var(--rd-cta-cut)) 100%,
    0 100%,
    0 var(--rd-cta-cut)
  );
  transition: transform .2s cubic-bezier(.2, .8, .3, 1), box-shadow .2s ease, filter .2s ease;
}
.rd-cta::before {
  content: "";
  position: absolute;
  inset: 1.5px;
  z-index: -1;
  --rd-cta-cut-inner: calc(var(--rd-cta-cut) - 5.1px);
  background: var(--rd-cta-fill);
  clip-path: polygon(
    var(--rd-cta-cut-inner) 0,
    100% 0,
    100% calc(100% - var(--rd-cta-cut-inner)),
    calc(100% - var(--rd-cta-cut-inner)) 100%,
    0 100%,
    0 var(--rd-cta-cut-inner)
  );
  transition: filter .2s ease;
}
.rd-cta::after {
  content: "";
  position: absolute;
  top: -20%;
  bottom: -20%;
  left: 0;
  width: 32%;
  opacity: 0;
  background: linear-gradient(90deg, transparent, var(--rd-cta-sheen), transparent);
  transform: skewX(-20deg) translateX(-260%);
  pointer-events: none;
}
.rd-cta > i,
.rd-cta > span { position: relative; }
.rd-cta > i {
  font-size: 16px;
  transition: transform .22s cubic-bezier(.2, .8, .3, 1);
}
.rd-cta:hover { transform: translateY(var(--rd-cta-lift)); }
.rd-cta:hover > i { transform: translateX(3px); }
.rd-cta:hover::before { filter: brightness(1.08); }
.rd-cta:hover::after { animation: rdCtaSheen .8s cubic-bezier(.3, .7, .4, 1); }
.rd-cta:active { transform: translateY(0); }
.rd-cta:focus-visible { outline: 2px solid var(--rd-link-hover); outline-offset: 3px; }
.rd-cta:disabled,
.rd-cta.disabled {
  cursor: not-allowed;
  transform: none;
  filter: saturate(.35) brightness(.75);
  opacity: .6;
}
.rd-cta:disabled::after,
.rd-cta.disabled::after { animation: none; }

@keyframes rdCtaSheen {
  0% { opacity: 0; transform: skewX(-20deg) translateX(-260%); }
  14% { opacity: 1; }
  100% { opacity: 0; transform: skewX(-20deg) translateX(480%); }
}

.rd-cta-block { width: 100%; }
.rd-mt-10 { margin-top: 10px; }
.rd-mt-18 { margin-top: 18px; }
.rd-cta-sm {
  --rd-cta-cut: 10px;
  min-height: 42px;
  padding: 11px 18px;
  font-size: 11.5px;
  letter-spacing: .09em;
}
.rd-cta-sm > i { font-size: 14px; }

.rd-cta-primary {
  box-shadow: 0 14px 30px rgba(var(--rd-accent-hover-rgb), .32);
}
.rd-cta-primary:hover { box-shadow: 0 22px 44px rgba(var(--rd-accent-hover-rgb), .46); }

.rd-cta-ghost {
  --rd-cta-frame: rgba(var(--rd-accent-2-rgb), .34);
  --rd-cta-fill: linear-gradient(135deg, rgba(38, 38, 38, .96), rgba(20, 20, 20, .96));
  --rd-cta-ink: var(--rd-accent-ink);
  --rd-cta-sheen: rgba(var(--rd-accent-ring-rgb), .22);
}
.rd-cta-ghost:hover {
  --rd-cta-frame: rgba(var(--rd-accent-ring-rgb), .6);
  color: #ffffff !important;
}

.rd-cta-quiet {
  --rd-cta-frame: rgba(177, 175, 171, .18);
  --rd-cta-fill: linear-gradient(135deg, rgba(25, 25, 25, .9), rgba(13, 13, 13, .9));
  --rd-cta-ink: #b1afab;
  --rd-cta-sheen: rgba(177, 175, 171, .16);
}
.rd-cta-quiet:hover {
  --rd-cta-frame: rgba(177, 175, 171, .38);
  color: #edeae3 !important;
}
.rd-cta-quiet:hover > i { transform: translateX(-3px); }

.rd-cta-discord {
  --rd-cta-frame: rgba(129, 140, 248, .42);
  --rd-cta-fill: linear-gradient(135deg, rgba(88, 101, 242, .28), rgba(51, 60, 168, .34));
  --rd-cta-ink: #e2e5ff;
  --rd-cta-sheen: rgba(199, 205, 255, .26);
}
.rd-cta-discord:hover {
  --rd-cta-frame: rgba(165, 175, 255, .7);
  color: #ffffff !important;
}

@media (prefers-reduced-motion: reduce) {
  .rd-cta,
  .rd-cta > i { transition: none; }
  .rd-cta:hover { transform: none; }
  .rd-cta:hover > i { transform: none; }
  .rd-cta:hover::after { animation: none; }
}

.rd-auth-divider { display: flex; align-items: center; gap: 12px; margin: 20px 0 14px; }
.rd-auth-divider::before,
.rd-auth-divider::after { content: ""; flex: 1; height: 1px; background: var(--rd-auth-line-2); }
.rd-auth-divider span {
  color: #7e7e7e;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
}

.rd-community-card { padding: 0; }
.rd-community-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin: 0;
  padding: 18px 20px;
  border-bottom: 1px solid var(--rd-auth-line-2);
}
.rd-community-head h3 {
  margin: 0;
  color: #fff;
  font-size: 19px;
  font-weight: 600;
  letter-spacing: -.02em;
}
.rd-community-head p { margin: 4px 0 0; color: var(--rd-auth-muted); font-size: 12.5px; }
body.rd-auth-page .rd-card-icon {
  flex: 0 0 44px;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 13px;
  color: var(--rd-auth-blue-soft);
  font-size: 19px;
  background: rgba(var(--rd-accent-rgb), .12);
  border: 1px solid var(--rd-auth-line);
}
.rd-community-body { padding: 18px; }
.rd-facebook-feed {
  width: 100%;
  min-height: 520px;
  display: flex;
  justify-content: center;
  overflow: hidden;
  border-radius: 14px;
  background: #fff;
}
.rd-facebook-feed iframe {
  display: block;
  width: 100% !important;
  max-width: 500px;
  min-height: 520px;
}
.rd-community-placeholder {
  width: 100%;
  min-height: 320px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 34px;
  text-align: center;
  border: 1px dashed var(--rd-auth-line);
  border-radius: 16px;
  background: rgba(var(--rd-accent-rgb), .04);
}
.rd-community-placeholder .rd-placeholder-icon {
  width: 58px;
  height: 58px;
  display: grid;
  place-items: center;
  margin-bottom: 15px;
  border-radius: 17px;
  color: var(--rd-btn-ink);
  font-size: 24px;
  background: linear-gradient(140deg, var(--rd-accent-2), var(--rd-accent-deep));
  box-shadow: 0 14px 32px rgba(var(--rd-accent-hover-rgb), .32);
}
.rd-community-placeholder h5 { margin: 0 0 7px; color: #fff; font-size: 16px; font-weight: 700; }
.rd-community-placeholder p { max-width: 420px; margin: 0; color: var(--rd-auth-muted); font-size: 13px; }

/* Registration, recovery and email verification. These were already centred
   across, but sat at the top of the viewport while sign-in sat in the middle,
   so the two pages did not read as a pair.
   Done from the content area rather than by wrapping the markup: the register
   page emits four separate .rd-auth-solo blocks for its steps, and each would
   have needed its own wrapper. A browser without :has() simply keeps the old
   top-aligned layout, which is a fine thing to fall back to. */
.rd-content:has(> .rd-auth-solo) {
  min-height: 72vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding-block: 28px;
}
.rd-auth-solo {
  width: 100%;
  max-width: 660px;
  margin: 0 auto;
}
.rd-auth-solo + .rd-auth-solo { margin-top: 18px; }
.rd-auth-solo-head {
  display: flex;
  align-items: center;
  gap: 13px;
  margin-bottom: 20px;
}
.rd-auth-solo-head .rd-auth-brand-mark { flex: 0 0 46px; width: 46px; height: 46px; font-size: 20px; }
.rd-auth-solo-head h1 {
  margin: 0;
  color: #fff;
  font-size: clamp(24px, 3.4vw, 32px);
  font-weight: 600;
  letter-spacing: -.03em;
  line-height: 1.12;
}
.rd-auth-solo-head p { margin: 5px 0 0; color: var(--rd-auth-muted); font-size: 13.5px; line-height: 1.6; }

.rd-field-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 14px;
}
.rd-field-hint {
  display: block;
  margin-top: 7px;
  color: #7e7e7e;
  font-size: 11.5px;
  line-height: 1.5;
}
.rd-form-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 22px;
}
.rd-form-actions .rd-cta { flex: 1 1 190px; }

body.rd-auth-page .rd-terms { margin: 0 0 4px; }
body.rd-auth-page .rd-terms-list {
  display: grid;
  gap: 10px;
  margin: 0 0 18px;
  padding: 0;
  list-style: none;
  counter-reset: rdterm;
}
body.rd-auth-page .rd-terms-list li {
  position: relative;
  padding: 13px 15px 13px 46px;
  color: #c7c5c1;
  font-size: 13px;
  line-height: 1.6;
  border: 1px solid var(--rd-auth-line-2);
  border-radius: 13px;
  background: rgba(255, 255, 255, .022);
  transition: border-color .18s ease, background .18s ease;
}
body.rd-auth-page .rd-terms-list li:hover {
  border-color: var(--rd-auth-line);
  background: rgba(var(--rd-accent-rgb), .06);
}
body.rd-auth-page .rd-terms-list li::before {
  counter-increment: rdterm;
  content: counter(rdterm);
  position: absolute;
  top: 13px;
  left: 14px;
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  border-radius: 7px;
  color: var(--rd-auth-blue-soft);
  font-size: 11px;
  font-weight: 700;
  background: rgba(var(--rd-accent-rgb), .13);
  border: 1px solid var(--rd-auth-line);
}
body.rd-auth-page .rd-terms-list strong { color: #f0ede6; }

body.rd-auth-page .rd-auth-note {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  padding: 14px 16px;
  margin-bottom: 18px;
  color: #c7c5c1;
  font-size: 12.5px;
  line-height: 1.6;
  border: 1px solid var(--rd-auth-line);
  border-left: 3px solid var(--rd-auth-blue);
  border-radius: 12px;
  background: rgba(var(--rd-accent-rgb), .07);
}
body.rd-auth-page .rd-auth-note i { color: var(--rd-auth-blue-soft); font-size: 15px; margin-top: 1px; }
body.rd-auth-page .rd-auth-note strong { color: #f0ede6; }

body.rd-auth-page .rd-auth-errors {
  padding: 15px 17px;
  margin-bottom: 18px;
  border: 1px solid rgba(248, 113, 113, .3);
  border-left: 3px solid #ef4444;
  border-radius: 12px;
  background: rgba(239, 68, 68, .08);
}
body.rd-auth-page .rd-auth-errors h4 {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0 0 9px;
  color: #fecaca;
  font-size: 13.5px;
  font-weight: 700;
}
body.rd-auth-page .rd-auth-errors ul { margin: 0; padding-left: 20px; }
body.rd-auth-page .rd-auth-errors li { color: #f8b4b4; font-size: 12.5px; line-height: 1.65; }

.rd-auth-result { text-align: center; padding: 8px 4px 4px; }
.rd-auth-result-mark {
  width: 66px;
  height: 66px;
  display: grid;
  place-items: center;
  margin: 0 auto 18px;
  color: var(--rd-btn-ink);
  font-size: 30px;
  background: linear-gradient(140deg, var(--rd-accent-2), var(--rd-accent-deep));
  box-shadow: 0 16px 38px rgba(var(--rd-accent-hover-rgb), .34);
  clip-path: polygon(16px 0, 100% 0, 100% calc(100% - 16px), calc(100% - 16px) 100%, 0 100%, 0 16px);
}
.rd-auth-result-mark.rd-is-alert { background: linear-gradient(140deg, #fbbf24, #d97706); box-shadow: 0 16px 38px rgba(217, 119, 6, .3); }
.rd-auth-result h2 { margin: 0 0 10px; color: #fff; font-size: 24px; font-weight: 600; letter-spacing: -.025em; }
.rd-auth-result p { margin: 0 auto 8px; max-width: 460px; color: var(--rd-auth-muted); font-size: 13.5px; line-height: 1.65; }
.rd-auth-result .rd-cta { margin-top: 16px; }

.rd-secret-row {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: center;
  margin: 18px 0 20px;
}
.rd-secret-value {
  padding: 13px 20px;
  color: var(--rd-accent-ink);
  font-family: var(--rd-mono-font) !important;
  font-size: 21px;
  font-weight: 700;
  letter-spacing: .09em;
  user-select: all;
  background: rgba(10, 10, 10, .92);
  border: 1px solid var(--rd-auth-line);
  clip-path: polygon(12px 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%, 0 12px);
}

/*
 * A hint that explains what precedes it as a whole rather than one field:
 * a pair of inputs, or the button above it.
 */
.rd-field-hint-span {
  display: block;
  margin: 13px 0 16px;
  color: #7e7e7e;
  font-size: 11.5px;
  line-height: 1.5;
}
/*
 * Directly under a field pair it is pulled back up instead. Each .rd-field in
 * the grid already carries 15px of bottom margin, so without this the hint
 * floats away from the inputs it belongs to. Only in that position - after a
 * full-width button the same negative margin lands the text on top of it.
 */
.rd-field-grid + .rd-field-hint-span { margin-top: -7px; }

/* The confirmation note, in the affirmative. */
body.rd-auth-page .rd-auth-note.rd-is-good {
  border-color: rgba(53, 208, 127, .28);
  border-left-color: var(--rd-success);
  background: rgba(53, 208, 127, .08);
  color: #c3ecd6;
}
body.rd-auth-page .rd-auth-note.rd-is-good i { color: var(--rd-success); }

/*
 * The six digit code. Monospace and wide tracking because it is transcribed
 * character by character from an email - the reader needs to tell 0 from O
 * and to keep their place - not to look technical.
 */
body.rd-auth-page .rd-code-input {
  width: 100% !important;
  min-height: 58px !important;
  padding: 12px 16px !important;
  color: #f7f4ed !important;
  font-family: var(--rd-mono-font) !important;
  font-size: 23px;
  font-weight: 700;
  letter-spacing: .38em;
  text-align: center;
  text-indent: .38em;
  background: rgba(10, 10, 10, .9) !important;
  border: 1px solid rgba(147, 147, 147, .18) !important;
  border-radius: 13px !important;
  box-shadow: none !important;
  transition: border-color .16s ease, box-shadow .16s ease, background .16s ease;
}
body.rd-auth-page .rd-code-input::placeholder { color: #515151 !important; letter-spacing: .38em; }
body.rd-auth-page .rd-code-input:focus {
  color: #fff !important;
  background: rgba(13, 13, 13, .96) !important;
  border-color: rgba(var(--rd-accent-2-rgb), .62) !important;
  box-shadow: 0 0 0 4px rgba(var(--rd-accent-rgb), .14) !important;
}

/*
 * Server-supplied welcome copy. The admin writes it as a block of HTML in the
 * language file, headings and all, so it is given its own container and its
 * tags are brought down to the surrounding scale rather than left at browser
 * defaults shouting over the form beneath it.
 */
body.rd-auth-page .rd-auth-welcome {
  padding: 16px 18px;
  margin-bottom: 18px;
  color: #c7c5c1;
  font-size: 13px;
  line-height: 1.65;
  border: 1px solid var(--rd-auth-line-2);
  border-radius: 13px;
  background: rgba(255, 255, 255, .022);
}
body.rd-auth-page .rd-auth-welcome > :first-child { margin-top: 0; }
body.rd-auth-page .rd-auth-welcome > :last-child { margin-bottom: 0; }
body.rd-auth-page .rd-auth-welcome h1,
body.rd-auth-page .rd-auth-welcome h2,
body.rd-auth-page .rd-auth-welcome h3,
body.rd-auth-page .rd-auth-welcome h4 {
  margin: 0 0 8px;
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -.01em;
}
body.rd-auth-page .rd-auth-welcome p { margin: 0 0 8px; }
body.rd-auth-page .rd-auth-welcome br:first-child { display: none; }
body.rd-auth-page .rd-auth-welcome strong { color: #f0ede6; }

/* The "taking you there" line under a result, and its one moving part. */
.rd-auth-result-meta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 2px;
  color: #7e7e7e !important;
  font-size: 12px !important;
}
.rd-auth-result-meta i {
  display: inline-block;
  color: var(--rd-auth-blue-soft);
  animation: rdSpin 1.5s linear infinite;
}
@keyframes rdSpin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .rd-auth-result-meta i { animation: none; }
}

@media (max-width: 1199.98px) {
  .rd-auth-shell {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "form" "showcase";
  }
  .rd-auth-showcase { min-height: 0; }
  .rd-auth-showcase::before { background-position: 62% 18%; background-size: cover; }
  .rd-auth-panel { position: static; }
  .rd-auth-panel .rd-auth-card { max-width: 560px; margin: 0 auto; }
}

@media (max-width: 767.98px) {
  body.rd-auth-page .rd-main { padding: 26px 14px 44px; }
  .rd-auth-showcase { padding: 26px 20px 24px; border-radius: 18px; }
  /* The copy runs the full width here, so the art sits behind a flatter,
     heavier scrim and shows mainly at the head of the card. */
  .rd-auth-showcase::after {
    background:
      linear-gradient(180deg, rgba(10, 10, 10, .55) 0%, rgba(10, 10, 10, .9) 46%, rgba(10, 10, 10, .97) 100%);
  }
  .rd-auth-showcase .rd-auth-brand::before { width: 150px; }
  .rd-auth-showcase .rd-auth-brand { gap: 12px; }
  .rd-auth-showcase .rd-auth-brand-copy { padding-left: 12px; }
  .rd-auth-showcase h1 { margin-top: 15px; }
  .rd-auth-features { grid-template-columns: minmax(0, 1fr); }
  .rd-auth-card { padding: 24px 18px; border-radius: 18px; }
  .rd-community-head { padding: 16px; }
  .rd-community-body { padding: 12px; }
  .rd-facebook-feed, .rd-facebook-feed iframe { min-height: 460px; }
  body.rd-auth-page .rd-auth-trust { gap: 12px; }
  .rd-field-grid { grid-template-columns: minmax(0, 1fr); }
  .rd-form-actions .rd-cta { flex: 1 1 100%; }
  .rd-secret-value { font-size: 18px; }
}

/* ==========================================================
   PUBLIC SIGN-IN - ATMOSPHERE AND MOTION
   ========================================================== */
/* The key art bleeds past its card: a blurred, dimmed copy of it lights the
   whole page from behind, so the two cards sit in the scene's firelight rather
   than on a flat backdrop. body becomes its own stacking context so the
   layer paints over the body's background instead of under it. */
body.rd-auth-page:has(.rd-auth-shell) { isolation: isolate; }
body.rd-auth-page:has(.rd-auth-shell)::before {
  content: "";
  position: fixed;
  inset: -12%;
  z-index: -1;
  pointer-events: none;
  background: url("../img/auth/rf-key-art.webp") 50% 0 / cover no-repeat;
  /* The key art is warm already. It used to be hue-rotated 185deg to reach
     the old blue shell; against a gold one that fought the accent, so it is
     desaturated and darkened instead and simply sits behind everything. */
  filter: blur(70px) saturate(.5) brightness(.26);
  opacity: .6;
}
body.rd-auth-page:has(.rd-auth-shell) .rd-main {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* Embers. Two drifting layers of blue sparks rise through the scene behind
   the art band between the copy and the tiles - small fast ones and fewer,
   larger slow ones - and fade out above and below it, so they never sit
   under text. */
.rd-auth-showcase-inner::before {
  content: "";
  position: absolute;
  inset: -34px -34px -30px;
  z-index: -1;
  pointer-events: none;
  background-image:
    radial-gradient(circle at 12% 18%, rgba(255, 212, 107, .95) 0 1px, rgba(242, 179, 46, .25) 2px, transparent 4px),
    radial-gradient(circle at 46% 62%, rgba(255, 236, 186, .85) 0 1px, rgba(242, 179, 46, .25) 2px, transparent 4px),
    radial-gradient(circle at 78% 34%, rgba(255, 212, 107, .9) 0 1px, rgba(242, 179, 46, .25) 2px, transparent 4px),
    radial-gradient(circle at 64% 88%, rgba(242, 179, 46, .9) 0 1px, rgba(242, 179, 46, .25) 2px, transparent 4px),
    radial-gradient(circle at 30% 76%, rgba(255, 224, 150, .9) 0 1.5px, rgba(242, 179, 46, .3) 3px, transparent 6px),
    radial-gradient(circle at 88% 70%, rgba(255, 212, 107, .8) 0 2px, rgba(242, 179, 46, .3) 4px, transparent 8px),
    radial-gradient(circle at 22% 40%, rgba(255, 212, 107, .7) 0 2px, rgba(242, 179, 46, .25) 5px, transparent 9px);
  background-size: 230px 260px, 230px 260px, 230px 260px, 230px 260px, 310px 380px, 410px 520px, 410px 520px;
  -webkit-mask-image: linear-gradient(180deg, transparent 24%, #000 42%, #000 62%, transparent 76%);
  mask-image: linear-gradient(180deg, transparent 24%, #000 42%, #000 62%, transparent 76%);
  opacity: .75;
  animation: rdEmbers 14s linear infinite, rdEmberFlicker 3.2s ease-in-out infinite alternate;
}
@keyframes rdEmbers {
  from { background-position: 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0; }
  to { background-position: 18px -260px, -12px -260px, 10px -260px, -16px -260px, 26px -380px, -30px -520px, 22px -520px; }
}
@keyframes rdEmberFlicker { from { opacity: .55; } to { opacity: .85; } }

/* Arrival. One sequence: the art settles, then the brand, headline, copy
   and tiles rise into place in reading order while the sign-in card slides
   in alongside. Everything lands within about a second. */
@keyframes rdRise {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: none; }
}
@keyframes rdSlideIn {
  from { opacity: 0; transform: translateX(18px); }
  to { opacity: 1; transform: none; }
}
.rd-auth-showcase .rd-auth-brand,
.rd-auth-showcase h1,
.rd-auth-showcase-inner > p,
.rd-auth-features li,
body.rd-auth-page .rd-auth-trust {
  animation: rdRise .75s cubic-bezier(.16, 1, .3, 1) backwards;
}
.rd-auth-showcase h1 { animation-delay: .08s; }
.rd-auth-showcase-inner > p { animation-delay: .16s; }
.rd-auth-features li:nth-child(1) { animation-delay: .26s; }
.rd-auth-features li:nth-child(2) { animation-delay: .32s; }
.rd-auth-features li:nth-child(3) { animation-delay: .38s; }
.rd-auth-features li:nth-child(4) { animation-delay: .44s; }
body.rd-auth-page .rd-auth-trust { animation-delay: .52s; }
.rd-auth-panel { animation: rdSlideIn .8s cubic-bezier(.16, 1, .3, 1) .1s backwards; }

/* The headline's accent word catches the light now and then. */
.rd-auth-showcase h1 span {
  background-size: 220% 100%;
  animation: rdGleam 7s ease-in-out infinite;
}
@keyframes rdGleam {
  0%, 62%, 100% { background-position: 0% 50%; }
  80% { background-position: 100% 50%; }
}

/* Feature tiles answer the pointer: the tile lifts, its edge brightens and
   its icon well fills with the accent. */
.rd-auth-features li { position: relative; }
.rd-auth-features li::after {
  content: "";
  position: absolute;
  inset: 0 18% auto;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(var(--rd-accent-2-rgb), .7), transparent);
  opacity: 0;
  transition: opacity .25s ease;
}
.rd-auth-features li:hover::after { opacity: 1; }
.rd-feature-icon { transition: background .25s ease, color .25s ease, border-color .25s ease, box-shadow .25s ease; }
.rd-feature-icon i { display: inline-block; transition: transform .35s cubic-bezier(.16, 1, .3, 1); }
.rd-auth-features li:hover .rd-feature-icon {
  color: var(--rd-btn-ink);
  background: linear-gradient(140deg, var(--rd-accent-2), var(--rd-accent-deep));
  border-color: transparent;
  box-shadow: 0 8px 18px rgba(var(--rd-accent-hover-rgb), .35);
}
.rd-auth-features li:hover .rd-feature-icon i { transform: scale(1.12) rotate(-6deg); }

/* The trust line becomes a row of quiet chips; the realtime one carries a
   live pulse. */
body.rd-auth-page .rd-auth-trust { gap: 8px; }
body.rd-auth-page .rd-auth-trust span {
  padding: 6px 11px 6px 9px;
  border: 1px solid var(--rd-auth-line-2);
  border-radius: 999px;
  background: rgba(10, 10, 10, .6);
}
body.rd-auth-page .rd-auth-trust span:nth-child(2) i { animation: rdLivePulse 2.4s ease-in-out infinite; }
@keyframes rdLivePulse {
  0%, 100% { opacity: 1; text-shadow: 0 0 0 rgba(var(--rd-accent-2-rgb), 0); }
  50% { opacity: .55; text-shadow: 0 0 10px rgba(var(--rd-accent-2-rgb), .9); }
}

/* Live realm strip, in place of the trust line whenever the server has
   reported a count: the number online with its peak, and the three-race
   split as one segmented bar in the same race colours the dashboard uses.
   The segments grow in once the arrival sequence has landed, and the live
   dot keeps a slow heartbeat. */
.rd-auth-realm {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 24px;
  margin-top: 22px;
  padding: 14px 18px;
  border: 1px solid var(--rd-auth-line-2);
  border-radius: 16px;
  background: rgba(10, 10, 10, .66);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  animation: rdRise .75s cubic-bezier(.16, 1, .3, 1) .52s backwards;
}
.rd-auth-realm-count { flex: 0 0 auto; display: flex; align-items: center; gap: 12px; }
.rd-auth-realm .rd-live-dot { flex: 0 0 auto; animation: rdHeartbeat 2.2s ease-out infinite; }
@keyframes rdHeartbeat {
  0% { box-shadow: 0 0 0 0 rgba(53, 208, 127, .55), 0 0 14px rgba(53, 208, 127, .42); }
  70%, 100% { box-shadow: 0 0 0 9px rgba(53, 208, 127, 0), 0 0 14px rgba(53, 208, 127, .42); }
}
.rd-auth-realm-count strong {
  color: #fff;
  font-size: 30px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -.03em;
  font-variant-numeric: tabular-nums;
}
.rd-auth-realm-count > span:last-child {
  display: grid;
  gap: 2px;
  color: #e8e5de;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.2;
}
.rd-auth-realm-count small { color: var(--rd-auth-muted); font-size: 11px; font-weight: 600; font-variant-numeric: tabular-nums; }
.rd-auth-realm-split { flex: 1 1 220px; min-width: 0; display: grid; gap: 9px; }
.rd-auth-realm-bar {
  display: flex;
  gap: 2px;
  height: 8px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(255, 255, 255, .06);
}
.rd-auth-realm-bar > span {
  display: block;
  height: 100%;
  transform-origin: left center;
  animation: rdBarGrow 1.1s cubic-bezier(.16, 1, .3, 1) .7s backwards;
}
@keyframes rdBarGrow { from { transform: scaleX(0); } }
.rd-auth-realm-bar > .rd-race-bellato { background: #60a5fa; }
.rd-auth-realm-bar > .rd-race-cora { background: #c084fc; animation-delay: .78s; }
.rd-auth-realm-bar > .rd-race-accretia { background: #9fadc0; animation-delay: .86s; }
.rd-auth-realm-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 16px;
  margin: 0;
  padding: 0;
  list-style: none;
  color: #bbb9b5;
  font-size: 11.5px;
  font-weight: 600;
}
.rd-auth-realm-legend li { display: inline-flex; align-items: center; gap: 6px; }
.rd-auth-realm-legend i { width: 8px; height: 8px; border-radius: 3px; }
.rd-auth-realm-legend .rd-race-bellato i { background: #60a5fa; }
.rd-auth-realm-legend .rd-race-cora i { background: #c084fc; }
.rd-auth-realm-legend .rd-race-accretia i { background: #9fadc0; }
.rd-auth-realm-legend b { color: #f2efe8; font-weight: 700; font-variant-numeric: tabular-nums; }

/* Sign-in card: a lock badge heads it, and a single point of light runs its
   border. The trace needs a registered angle property to animate; where
   @property is unsupported the border simply holds still. */
@property --rd-ring-angle {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}
.rd-login-card .rd-auth-card-head::before {
  content: "\f537";
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  margin-bottom: 18px;
  border-radius: 14px;
  color: var(--rd-btn-ink);
  font-family: "bootstrap-icons" !important;
  font-size: 20px;
  line-height: 1;
  background: linear-gradient(140deg, var(--rd-accent-2), var(--rd-accent-deep));
  box-shadow: 0 12px 26px rgba(var(--rd-accent-hover-rgb), .38), inset 0 1px 0 rgba(255, 255, 255, .28);
}
.rd-login-card::after {
  content: "";
  position: absolute;
  inset: 0;
  padding: 1px;
  border-radius: inherit;
  pointer-events: none;
  background: conic-gradient(from var(--rd-ring-angle), transparent 0deg, transparent 250deg, rgba(var(--rd-accent-2-rgb), .9) 320deg, transparent 360deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  mask-composite: exclude;
  animation: rdRingTrace 7s linear infinite;
}
@keyframes rdRingTrace { to { --rd-ring-angle: 360deg; } }

@media (prefers-reduced-motion: reduce) {
  .rd-auth-showcase-inner::before,
  .rd-auth-showcase .rd-auth-brand,
  .rd-auth-showcase h1,
  .rd-auth-showcase h1 span,
  .rd-auth-showcase-inner > p,
  .rd-auth-features li,
  body.rd-auth-page .rd-auth-trust,
  body.rd-auth-page .rd-auth-trust span:nth-child(2) i,
  .rd-auth-panel,
  .rd-auth-realm,
  .rd-auth-realm .rd-live-dot,
  .rd-auth-realm-bar > span,
  .rd-login-card::after { animation: none; }
  .rd-auth-features li:hover .rd-feature-icon i { transform: none; }
}

@media (max-width: 1199.98px) {
  body.rd-auth-page:has(.rd-auth-shell) .rd-main { min-height: 0; display: block; }
  .rd-auth-panel { animation-name: rdRise; }
}

/* Footer identity */
.rd-sidebar-footer {
  align-items: center;
}
.rd-sidebar-footer strong {
  color: var(--rd-accent-2);
  letter-spacing: .06em;
}

/* Config page fits the global theme without loading another Bootstrap copy. */
.futuristic-glass {
  backdrop-filter: blur(8px);
  background: rgba(20,20,20,.92) !important;
  border: 1px solid var(--rd-border);
  border-radius: 14px !important;
}
.accordion-button.bg-primary-subtle {
  color: #f5f2eb !important;
  background: rgba(var(--rd-accent-rgb),.07) !important;
}
.accordion-button:not(.collapsed) {
  box-shadow: inset 3px 0 var(--rd-accent) !important;
}

/* Immediate visual feedback while logout redirects. */
body.rd-logging-out .rd-nav,
body.rd-logging-out .rd-topbar-actions {
  opacity: .35;
  pointer-events: none;
}


/* ==========================================================
   DASHBOARD
   ========================================================== */
.rd-dash { display: grid; gap: 20px; }

.rd-stat-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}
.rd-stat {
  position: relative;
  overflow: hidden;
  padding: 18px 18px 17px;
  border: 1px solid var(--rd-border);
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(29, 29, 29, .9), rgba(20, 20, 20, .94));
  transition: border-color .18s ease, transform .18s ease;
}
.rd-stat:hover { transform: translateY(-2px); border-color: rgba(var(--rd-accent-2-rgb), .24); }
.rd-stat-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 14px; }
.rd-stat-label {
  color: var(--rd-muted-2);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .15em;
  text-transform: uppercase;
}
.rd-stat-icon {
  flex: 0 0 34px;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  color: var(--rd-accent-2);
  font-size: 15px;
  background: rgba(var(--rd-accent-rgb), .11);
  border: 1px solid rgba(var(--rd-accent-2-rgb), .17);
}
.rd-stat-value {
  display: block;
  color: #fff;
  font-family: var(--rd-display-font) !important;
  font-size: 25px;
  font-weight: 600;
  letter-spacing: -.03em;
  line-height: 1.1;
}
.rd-stat-meta { display: block; margin-top: 6px; color: var(--rd-muted); font-size: 11.5px; line-height: 1.5; }
.rd-stat-icon.rd-is-good { color: #4ade80; background: rgba(53, 208, 127, .1); border-color: rgba(53, 208, 127, .18); }
.rd-stat-icon.rd-is-warn { color: #fbbf24; background: rgba(251, 191, 36, .1); border-color: rgba(251, 191, 36, .18); }

.rd-action-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(148px, 1fr));
  gap: 12px;
}
.rd-action {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 15px;
  color: #e2dfd8 !important;
  text-decoration: none !important;
  border: 1px solid var(--rd-border);
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(29, 29, 29, .88), rgba(20, 20, 20, .92));
  transition: transform .18s cubic-bezier(.2, .8, .3, 1), border-color .18s ease, background .18s ease;
}
.rd-action:hover {
  transform: translateY(-3px);
  color: #fff !important;
  border-color: rgba(var(--rd-accent-2-rgb), .34);
  background: linear-gradient(180deg, rgba(43, 43, 43, .92), rgba(20, 20, 20, .95));
}
.rd-action:focus-visible { outline: 2px solid rgba(var(--rd-accent-2-rgb), .65); outline-offset: 2px; }
.rd-action-icon {
  flex: 0 0 36px;
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border-radius: 11px;
  color: var(--rd-accent-2);
  font-size: 16px;
  background: rgba(var(--rd-accent-rgb), .12);
  border: 1px solid rgba(var(--rd-accent-2-rgb), .18);
  transition: background .18s ease, color .18s ease;
}
.rd-action:hover .rd-action-icon { color: #fff; background: rgba(var(--rd-accent-rgb), .28); }
.rd-action-copy { min-width: 0; display: grid; gap: 2px; }
.rd-action-copy strong {
  font-family: var(--rd-display-font) !important;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: -.01em;
}
.rd-action-copy small { color: var(--rd-muted-2); font-size: 11px; line-height: 1.4; }

.rd-char { display: flex; align-items: center; gap: 15px; padding: 4px 0 6px; }
.rd-char-avatar {
  flex: 0 0 54px;
  width: 54px;
  height: 54px;
  display: grid;
  place-items: center;
  color: var(--rd-btn-ink);
  font-size: 22px;
  background: linear-gradient(140deg, var(--rd-accent-2), var(--rd-accent-deep));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .26);
  clip-path: polygon(14px 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%, 0 14px);
}
.rd-char-copy { min-width: 0; display: grid; gap: 5px; }
.rd-char-name {
  color: #fff;
  font-family: var(--rd-display-font) !important;
  font-size: 19px;
  font-weight: 600;
  letter-spacing: -.02em;
  overflow-wrap: anywhere;
}
.rd-char-meta { display: flex; flex-wrap: wrap; gap: 8px 16px; }
.rd-char-meta span { display: inline-flex; align-items: center; gap: 7px; color: var(--rd-muted); font-size: 12px; font-weight: 500; }
.rd-char-meta i { color: #727272; font-size: 13px; }
.rd-char-meta b { color: #efece5; font-weight: 600; }

.rd-empty {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px;
  border: 1px dashed var(--rd-border);
  border-radius: 13px;
  background: rgba(255, 255, 255, .015);
}
.rd-empty i { color: #727272; font-size: 19px; }
.rd-empty strong { display: block; color: #e6e3dc; font-size: 13px; font-weight: 600; }
.rd-empty small { display: block; margin-top: 2px; color: var(--rd-muted-2); font-size: 11.5px; line-height: 1.5; }

.rd-dash-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr);
  gap: 20px;
  align-items: start;
}
.rd-panel {
  overflow: hidden;
  border: 1px solid var(--rd-border);
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(29, 29, 29, .9), rgba(20, 20, 20, .94));
}
.rd-panel + .rd-panel { margin-top: 20px; }
.rd-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 17px 20px;
  border-bottom: 1px solid var(--rd-border);
}
.rd-panel-head h2 {
  margin: 0;
  color: #fff;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -.02em;
}
.rd-panel-head p { margin: 3px 0 0; color: var(--rd-muted); font-size: 12px; }
.rd-panel-body { padding: 8px 20px 18px; }

.rd-detail-row {
  display: grid;
  grid-template-columns: minmax(0, 170px) minmax(0, 1fr);
  gap: 16px;
  align-items: center;
  padding: 13px 0;
  border-bottom: 1px solid rgba(255, 255, 255, .045);
}
.rd-detail-row:last-child { border-bottom: 0; }
.rd-detail-key {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--rd-muted);
  font-size: 12px;
  font-weight: 600;
}
.rd-detail-key i { color: #727272; font-size: 14px; width: 16px; text-align: center; }
.rd-detail-val { min-width: 0; color: #efece5; font-size: 13.5px; font-weight: 500; overflow-wrap: anywhere; }
.rd-detail-val.rd-is-muted { color: var(--rd-muted-2); }
/* The path, command or config key that explains the value above it. */
.rd-detail-note {
  display: block;
  margin-top: 4px;
  color: var(--rd-muted-2);
  font-size: 11.5px;
  font-weight: 400;
  overflow-wrap: anywhere;
}
.rd-detail-val .rd-mono { font-family: var(--rd-mono-font) !important; font-size: 13px; letter-spacing: .01em; }
.rd-detail-sub { display: block; margin-top: 3px; color: var(--rd-muted-2); font-size: 11.5px; font-weight: 500; }

.rd-copy { display: inline-flex; align-items: center; gap: 8px; }
.rd-copy-btn {
  width: 27px;
  height: 27px;
  display: grid;
  place-items: center;
  padding: 0;
  color: #727272;
  font-size: 12.5px;
  background: transparent;
  border: 1px solid var(--rd-border);
  border-radius: 8px;
  cursor: pointer;
  opacity: 0;
  transition: opacity .16s ease, color .16s ease, background .16s ease, border-color .16s ease;
}
.rd-detail-row:hover .rd-copy-btn,
.rd-copy-btn:focus-visible { opacity: 1; }
.rd-copy-btn:hover { color: #e1ded7; background: rgba(var(--rd-accent-2-rgb), .12); border-color: rgba(var(--rd-accent-2-rgb), .3); }
.rd-copy-btn.rd-is-copied { opacity: 1; color: #86efac; border-color: rgba(53, 208, 127, .35); background: rgba(53, 208, 127, .12); }
@media (hover: none) {
  .rd-copy-btn { opacity: 1; }
}

.rd-pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 11px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .02em;
}
.rd-pill i { font-size: 11px; }
.rd-pill-good { color: #86efac; background: rgba(53, 208, 127, .11); border: 1px solid rgba(53, 208, 127, .2); }
.rd-pill-bad { color: #fca5a5; background: rgba(239, 68, 68, .1); border: 1px solid rgba(239, 68, 68, .2); }
.rd-pill-idle { color: #b3b1ad; background: rgba(161, 161, 161, .1); border: 1px solid rgba(161, 161, 161, .18); }

.rd-dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }

.rd-linked {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px;
  border: 1px solid var(--rd-border);
  border-radius: 13px;
  background: rgba(255, 255, 255, .022);
}
.rd-linked-icon {
  flex: 0 0 38px;
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 11px;
  color: #c3c9ff;
  font-size: 17px;
  background: rgba(88, 101, 242, .16);
  border: 1px solid rgba(88, 101, 242, .28);
}
.rd-linked-copy { min-width: 0; display: grid; gap: 2px; }
.rd-linked-copy strong { color: #f1eee7; font-size: 13px; font-weight: 600; }
.rd-linked-copy small { color: var(--rd-muted); font-size: 11.5px; line-height: 1.5; }
.rd-linked-copy a { color: #a5b4fc; }

.rd-panel-body select.form-control,
.rd-panel-body .form-select {
  min-height: 44px;
  border-radius: 11px !important;
}

@media (max-width: 1199.98px) {
  .rd-stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rd-dash-grid { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 575.98px) {
  .rd-stat-grid { grid-template-columns: minmax(0, 1fr); }
  .rd-detail-row { grid-template-columns: minmax(0, 1fr); gap: 6px; align-items: start; }
  .rd-panel-body { padding: 8px 15px 15px; }
  .rd-panel-head { padding: 15px; }
}

/* Bottom developer credit */
.rd-site-footer {
  margin: 28px 0 0;
  padding: 16px 0 4px;
  color: var(--rd-muted);
  text-align: center;
  border-top: 1px solid var(--rd-border);
}
.rd-dev-credit {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: #e0ddd6;
  font-family: var(--rd-display-font) !important;
  font-weight: 700;
  letter-spacing: .08em;
}
.rd-dev-credit i { color: var(--rd-accent); }
.rd-dev-credit small { color: var(--rd-muted-2); font-family: var(--rd-font) !important; font-weight: 600; letter-spacing: 0; }


/* ==========================================================
   ACCOUNT PAGES
   Shared kit for the signed-in Account tools (2FA, PIN,
   password, Discord, FireGuard recovery, voucher redeem).
   ========================================================== */
.rd-acct {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  gap: 20px;
  align-items: start;
}
.rd-acct-solo { display: grid; gap: 20px; max-width: 760px; }
.rd-acct-aside { display: grid; gap: 20px; }

/* Forms inside the app shell. The auth-page rules are scoped to
   body.rd-auth-page, so signed-in pages need their own sizing. */
.rd-content .rd-input .form-control {
  min-height: 48px;
  padding: 12px 14px 12px 43px !important;
  border-radius: 12px !important;
}
.rd-content .rd-input-reveal .form-control { padding-right: 46px !important; }
.rd-content .rd-input:focus-within > i { color: var(--rd-accent-2); }
.rd-panel-body > .rd-field:first-child { margin-top: 4px; }
.rd-form-actions .rd-cta { flex: 1 1 190px; }

/* One-time-code entry: wide tracking, monospaced, unmistakable. */
.rd-otp .form-control {
  padding: 12px 14px !important;
  color: var(--rd-accent-ink) !important;
  font-family: var(--rd-mono-font) !important;
  font-size: 25px !important;
  font-weight: 700;
  letter-spacing: .34em;
  text-align: center;
  text-indent: .34em;
  min-height: 62px;
}
.rd-otp .form-control::placeholder { color: #404040 !important; letter-spacing: .34em; }

/* Callouts. Replaces the legacy inline-styled error blocks. */
.rd-notice {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  padding: 14px 16px;
  margin-bottom: 18px;
  color: #c7c5c1;
  font-size: 12.5px;
  line-height: 1.6;
  border: 1px solid var(--rd-border);
  border-left: 3px solid var(--rd-accent);
  border-radius: 12px;
  background: rgba(var(--rd-accent-rgb), .07);
}
.rd-notice:last-child { margin-bottom: 0; }
.rd-notice > i { flex: 0 0 auto; margin-top: 1px; color: var(--rd-accent-2); font-size: 15px; }
.rd-notice-copy { min-width: 0; }
.rd-notice strong { display: block; margin-bottom: 3px; color: #f0ede6; font-size: 13px; font-weight: 700; }
.rd-notice p { margin: 0; }
.rd-notice ul { margin: 7px 0 0; padding-left: 18px; }
.rd-notice li { margin-top: 4px; }
.rd-notice a { font-weight: 600; }
.rd-notice-good { border-left-color: var(--rd-success); background: rgba(53, 208, 127, .08); }
.rd-notice-good > i { color: #6ee7a8; }
.rd-notice-good strong { color: #d3f5e3; }
.rd-notice-warn { border-left-color: var(--rd-warning); background: rgba(255, 189, 74, .07); }
.rd-notice-warn > i { color: #fbbf24; }
.rd-notice-warn strong { color: #ffe6b8; }
.rd-notice-bad { border-left-color: #ef4444; background: rgba(239, 68, 68, .08); }
.rd-notice-bad > i { color: #f87171; }
.rd-notice-bad strong { color: #fecaca; }
.rd-notice-bad li { color: #f5b5b5; }

/* Terminal states: success, blocked, expired, nothing-to-do. */
.rd-state { padding: 26px 22px 24px; text-align: center; }
.rd-state-mark {
  width: 62px;
  height: 62px;
  display: grid;
  place-items: center;
  margin: 0 auto 17px;
  color: var(--rd-btn-ink);
  font-size: 27px;
  background: linear-gradient(140deg, var(--rd-accent-2), var(--rd-accent-deep));
  box-shadow: 0 15px 34px rgba(var(--rd-accent-hover-rgb), .3);
  clip-path: polygon(15px 0, 100% 0, 100% calc(100% - 15px), calc(100% - 15px) 100%, 0 100%, 0 15px);
}
.rd-state-mark.rd-is-good { background: linear-gradient(140deg, #4ade80, #15803d); box-shadow: 0 15px 34px rgba(21, 128, 61, .3); }
.rd-state-mark.rd-is-warn { background: linear-gradient(140deg, #fbbf24, #b45309); box-shadow: 0 15px 34px rgba(180, 83, 9, .3); }
.rd-state-mark.rd-is-bad { background: linear-gradient(140deg, #f87171, #b91c1c); box-shadow: 0 15px 34px rgba(185, 28, 28, .3); }
.rd-state h2 {
  margin: 0 0 9px;
  color: #fff;
  font-family: var(--rd-display-font) !important;
  font-size: 21px;
  font-weight: 600;
  letter-spacing: -.025em;
}
.rd-state p { max-width: 460px; margin: 0 auto 8px; color: var(--rd-muted); font-size: 13px; line-height: 1.65; }
.rd-state p:last-of-type { margin-bottom: 0; }
.rd-state-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-top: 20px;
}

/* Numbered guidance, used by the security and recovery pages. */
.rd-steps {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: rdstep;
}
.rd-steps li {
  position: relative;
  padding: 12px 14px 12px 45px;
  color: #c7c5c1;
  font-size: 12.5px;
  line-height: 1.6;
  border: 1px solid var(--rd-border);
  border-radius: 12px;
  background: rgba(255, 255, 255, .022);
  transition: border-color .18s ease, background .18s ease;
}
.rd-steps li:hover { border-color: rgba(var(--rd-accent-2-rgb), .22); background: rgba(var(--rd-accent-rgb), .06); }
.rd-steps li::before {
  counter-increment: rdstep;
  content: counter(rdstep);
  position: absolute;
  top: 12px;
  left: 13px;
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  border-radius: 7px;
  color: var(--rd-accent-2);
  font-size: 11px;
  font-weight: 700;
  background: rgba(var(--rd-accent-rgb), .13);
  border: 1px solid rgba(var(--rd-accent-2-rgb), .2);
}
.rd-steps strong { display: block; margin-bottom: 2px; color: #f0ede6; font-size: 13px; font-weight: 700; }

/* Unnumbered benefit / requirement list. */
.rd-points { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.rd-points li {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  padding: 12px 14px;
  color: #c7c5c1;
  font-size: 12.5px;
  line-height: 1.6;
  border: 1px solid var(--rd-border);
  border-radius: 12px;
  background: rgba(255, 255, 255, .022);
}
.rd-points i { flex: 0 0 auto; margin-top: 2px; color: var(--rd-accent-2); font-size: 14px; }
.rd-points strong { display: block; margin-bottom: 2px; color: #f0ede6; font-size: 13px; font-weight: 700; }

/* Authenticator QR. */
.rd-qr {
  display: grid;
  justify-items: center;
  gap: 13px;
  padding: 20px 18px;
  margin-bottom: 18px;
  text-align: center;
  border: 1px dashed var(--rd-border);
  border-radius: 16px;
  background: rgba(255, 255, 255, .015);
}
.rd-qr-frame { padding: 9px; line-height: 0; background: #fff; border-radius: 12px; }
.rd-qr-frame img { display: block; width: 186px; height: 186px; max-width: 100%; }
.rd-qr small { color: var(--rd-muted-2); font-size: 11.5px; line-height: 1.5; }

/* Copyable key / value line outside of a detail table. */
.rd-keyline {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 13px;
  border: 1px solid var(--rd-border);
  border-radius: 11px;
  background: rgba(10, 10, 10, .55);
}
.rd-keyline + .rd-keyline { margin-top: 9px; }
.rd-keyline-copy { min-width: 0; display: grid; gap: 3px; }
.rd-keyline-label {
  color: var(--rd-muted-2);
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: .15em;
  text-transform: uppercase;
}
.rd-keyline-value {
  color: var(--rd-accent-ink);
  font-family: var(--rd-mono-font) !important;
  font-size: 13.5px;
  font-weight: 700;
  letter-spacing: .05em;
  overflow-wrap: anywhere;
  user-select: all;
}
.rd-keyline .rd-copy-btn { flex: 0 0 auto; margin-left: auto; opacity: 1; }

/* Live requirement feedback on password / PIN fields. */
.rd-rules { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 9px; }
.rd-rules li {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--rd-muted-2);
  font-size: 11.5px;
  font-weight: 600;
  transition: color .16s ease;
}
.rd-rules li::before {
  content: "\F28A";
  font-family: "bootstrap-icons";
  font-size: 12px;
  font-weight: 400;
  line-height: 1;
}
.rd-rules li.rd-is-met { color: #86efac; }
.rd-rules li.rd-is-met::before { content: "\F26E"; }

/* Voucher prize / requirement readout. */
.rd-prizes { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.rd-prizes li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid var(--rd-border);
  border-radius: 10px;
  background: rgba(255, 255, 255, .022);
}
.rd-prizes i { flex: 0 0 auto; color: var(--rd-accent-2); font-size: 14px; }
.rd-prizes span { min-width: 0; color: #d6d3cc; font-size: 12.5px; overflow-wrap: anywhere; }
.rd-prizes b {
  margin-left: auto;
  padding-left: 12px;
  color: #fff;
  font-family: var(--rd-display-font) !important;
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
}
.rd-prizes .rd-is-met i { color: #6ee7a8; }
.rd-prizes li.rd-has-list { align-items: flex-start; }
.rd-prizes li.rd-has-list i { margin-top: 2px; }
.rd-prize-block { min-width: 0; display: grid; gap: 7px; }
.rd-prize-block strong { color: #f0ede6; font-size: 12.5px; font-weight: 700; }

/* A single unordered list of raw values (granted items). */
.rd-taglist { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.rd-taglist li {
  padding: 5px 10px;
  color: var(--rd-accent-ink);
  font-size: 11.5px;
  font-weight: 600;
  border: 1px solid rgba(var(--rd-accent-2-rgb), .2);
  border-radius: 999px;
  background: rgba(var(--rd-accent-rgb), .1);
}

@media (max-width: 991.98px) {
  .rd-acct { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 575.98px) {
  .rd-state { padding: 22px 15px; }
  .rd-otp .form-control { font-size: 21px !important; letter-spacing: .24em; text-indent: .24em; }
  .rd-form-actions .rd-cta { flex: 1 1 100%; }
  .rd-qr-frame img { width: 160px; height: 160px; }
}


/* ==========================================================
   CHARACTER PAGES
   Shared kit for the signed-in Character tools (my character,
   character search, activity history, marketplace, fix).
   ========================================================== */
.rd-char-wrap { display: grid; gap: 20px; }
.rd-char-split {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  gap: 20px;
  align-items: start;
}
.rd-char-aside { display: grid; gap: 20px; }
/* The gear column sizes to the slot grid, which is wider when the page also
   renders accessories. The track must be auto, not min-content: the slot
   tracks are minmax(0, 92px), whose min-content is zero, which collapses the
   column and spills the slots across the page. */
.rd-char-loadout {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 22px;
  align-items: start;
}
@media (max-width: 767.98px) {
  .rd-char-loadout { grid-template-columns: minmax(0, 1fr); }

  /* The activity log has fifteen tabs. Wrapped, that is a wall of pills on a
     phone, so the strip becomes a single swipeable row instead. */
  .rd-seg {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .rd-seg::-webkit-scrollbar { display: none; }
  .rd-seg-item { flex: 0 0 auto; }

  /* A long stat list must not run off a short screen. */
  .rd-item-card { max-height: 70vh; overflow-y: auto; }

  .rd-bag-grid { grid-template-columns: repeat(5, minmax(0, 69px)); }
}

/* Segmented sub-navigation. Replaces button walls and nav tables. */
.rd-seg {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 6px;
  margin-bottom: 20px;
  border: 1px solid var(--rd-border);
  border-radius: 14px;
  background: rgba(255, 255, 255, .022);
}
.rd-seg-item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 14px;
  color: #b5b3af !important;
  font-family: var(--rd-display-font) !important;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: -.01em;
  text-decoration: none !important;
  background: transparent;
  border: 0;
  border-radius: 10px;
  cursor: pointer;
  transition: color .16s ease, background .16s ease;
}
.rd-seg-item i { font-size: 13px; color: var(--rd-muted-2); transition: color .16s ease; }
.rd-seg-item:hover { color: #fff !important; background: rgba(255, 255, 255, .05); }
.rd-seg-item:hover i { color: var(--rd-accent-2); }
.rd-seg-item:focus-visible { outline: 2px solid rgba(var(--rd-accent-2-rgb), .65); outline-offset: -2px; }
.rd-seg-item.rd-is-active {
  color: #fff !important;
  background: linear-gradient(135deg, rgba(var(--rd-accent-rgb), .24), rgba(var(--rd-accent-rgb), .07));
  box-shadow: inset 0 0 0 1px rgba(var(--rd-accent-2-rgb), .3);
}
.rd-seg-item.rd-is-active i { color: var(--rd-accent-2); }
.rd-seg-count {
  padding: 2px 7px;
  color: #a1a1a1;
  font-family: var(--rd-font) !important;
  font-size: 10px;
  font-weight: 800;
  background: rgba(255, 255, 255, .07);
  border-radius: 999px;
}
.rd-seg-item.rd-is-active .rd-seg-count { color: var(--rd-accent-ink); background: rgba(var(--rd-accent-2-rgb), .26); }
.rd-seg-item.rd-is-void { opacity: .42; }
.rd-seg-item.rd-is-void:hover { opacity: .7; }

/* Character identity header. */
.rd-idcard {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
  padding: 17px 20px;
  border-bottom: 1px solid var(--rd-border);
}
.rd-idcard-sigil {
  flex: 0 0 54px;
  width: 54px;
  height: 54px;
  display: grid;
  place-items: center;
  overflow: hidden;
  color: var(--rd-btn-ink);
  font-size: 22px;
  background: linear-gradient(140deg, var(--rd-accent-2), var(--rd-accent-deep));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .26);
  clip-path: polygon(14px 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%, 0 14px);
}
.rd-idcard-sigil img { width: 40px; height: 40px; object-fit: contain; }
.rd-idcard-sigil.rd-race-bellato { background: linear-gradient(140deg, #60a5fa, #1d4ed8); }
.rd-idcard-sigil.rd-race-cora { background: linear-gradient(140deg, #c084fc, #6d28d9); }
.rd-idcard-sigil.rd-race-accretia { background: linear-gradient(140deg, #94a3b8, #334155); }
.rd-idcard-copy { min-width: 0; flex: 1 1 220px; display: grid; gap: 5px; }
.rd-idcard-copy h2 {
  margin: 0;
  color: #fff;
  font-family: var(--rd-display-font) !important;
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -.025em;
  overflow-wrap: anywhere;
}
.rd-idcard-meta { display: flex; flex-wrap: wrap; gap: 7px 14px; }
.rd-idcard-meta span { display: inline-flex; align-items: center; gap: 7px; color: var(--rd-muted); font-size: 12px; }
.rd-idcard-meta i { color: #727272; font-size: 13px; }
.rd-idcard-meta b { color: #efece5; font-weight: 600; }
.rd-idcard-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-left: auto; }

/* Equipment grid. Replaces the fixed 222x351 background paperdoll. */
/* Anatomical slot layout. The empty cells are the four corners, which reads
   as deliberate; reserving a column for accessories a page never renders
   leaves a hole down one side instead. */
.rd-gear {
  display: grid;
  width: max-content;
  grid-template-columns: repeat(3, 92px);
  /* Tall enough for the slot name, a 64px icon and a row of upgrade pips
     stacked rather than overlapping. */
  grid-auto-rows: 110px;
  gap: 9px;
  justify-content: center;
  grid-template-areas:
    "..  hlm .."
    "wpn upr shd"
    "gnt lwr clk"
    "..  sho ..";
}
.rd-gear.rd-has-acc {
  grid-template-columns: repeat(3, 92px) 156px;
  grid-template-areas:
    "..  hlm ..  acc"
    "wpn upr shd acc"
    "gnt lwr clk acc"
    "..  sho ..  acc";
}
.rd-slot-weapon { grid-area: wpn; }
.rd-slot-helmet { grid-area: hlm; }
.rd-slot-shield { grid-area: shd; }
.rd-slot-cloak { grid-area: clk; }
.rd-slot-upper { grid-area: upr; }
.rd-slot-gauntlet { grid-area: gnt; }
.rd-slot-lower { grid-area: lwr; }
.rd-slot-shoe { grid-area: sho; }
/* Accessories. Captioned rather than corner-labelled: the kind is read off
   the item, not the position, so the word has to be legible. */
.rd-gear-acc { grid-area: acc; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px 8px; align-content: start; }
.rd-acc-head {
  grid-column: 1 / -1;
  margin-bottom: -2px;
  color: var(--rd-muted-2);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.rd-acc-cell { min-width: 0; display: grid; gap: 4px; justify-items: center; }
.rd-acc-slot { width: 100%; aspect-ratio: 1; }
/* The armour tiles run a 64px icon in a 92px cell. Matching that ratio here
   keeps one visual scale across the loadout - .rd-item-sm's 32px icon left
   an accessory adrift in the middle of its own tile. Scaling the cell and
   pulling the box back by the same amount is the pairing .rd-item-sm uses;
   resizing the box instead would re-crop the sprite sheet. */
.rd-acc-slot .rd-item-sm > .rd-item-face { width: 46px; height: 46px; }
.rd-acc-slot .rd-item-sm > .rd-item-face > img {
  transform: scale(.71875);
  margin: -9px;
}
.rd-acc-slot .rd-item-sm .rd-item-qty { font-size: 9px; padding: 0 3px; }
.rd-acc-name {
  max-width: 100%;
  color: #a1a1a1;
  font-size: 8.5px;
  font-weight: 800;
  letter-spacing: .1em;
  line-height: 1.3;
  text-align: center;
  text-transform: uppercase;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.rd-acc-name.rd-is-void { color: #535353; }
.rd-acc-none {
  grid-column: 1 / -1;
  padding: 14px 10px;
  color: var(--rd-muted-2);
  font-size: 11.5px;
  text-align: center;
  border: 1px dashed var(--rd-border);
  border-radius: 12px;
  background: rgba(255, 255, 255, .012);
}

.rd-gear-slot {
  position: relative;
  display: grid;
  place-items: center;
  border: 1px solid var(--rd-border);
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(29, 29, 29, .9), rgba(20, 20, 20, .94));
  transition: border-color .18s ease, background .18s ease;
}
.rd-gear-slot:hover { border-color: rgba(var(--rd-accent-2-rgb), .32); background: rgba(var(--rd-accent-rgb), .07); }
.rd-gear-slot.rd-is-void { border-style: dashed; background: rgba(255, 255, 255, .012); }
.rd-gear-slot.rd-is-void:hover { border-color: var(--rd-border); background: rgba(255, 255, 255, .012); }
/* The label sits over the item art, so it needs its own ground to stay
   readable against a bright icon. */
.rd-gear-label {
  position: absolute;
  top: 4px;
  left: 4px;
  z-index: 3;
  padding: 2px 5px;
  color: #a1a1a1;
  font-size: 7.5px;
  font-weight: 800;
  letter-spacing: .12em;
  line-height: 1.4;
  text-transform: uppercase;
  background: rgba(5, 5, 5, .82);
  border-radius: 5px;
  pointer-events: none;
}
.rd-gear-slot:not(.rd-is-void) .rd-gear-label { opacity: .72; transition: opacity .16s ease; }
.rd-gear-slot:not(.rd-is-void):hover .rd-gear-label { opacity: 1; }

/* The armour tiles give the slot name its own row instead of laying it over
   the art. Overlaid, "SHIELD" was printed across the top of the shield and
   "CLOAK" across the cloak, and no amount of backing plate fixes a label
   that covers the thing it names. Scoped to direct children of .rd-gear so
   the bag, bank and accessory cells - none of which carry a label - keep
   centring their icon in the whole tile. */
.rd-gear > .rd-gear-slot { grid-template-rows: auto 1fr; padding: 6px 4px; }
.rd-gear > .rd-gear-slot > .rd-gear-label {
  position: static;
  padding: 0;
  opacity: 1;
  background: none;
  border-radius: 0;
}
.rd-gear-slot.rd-is-void .rd-gear-void { color: #494949; font-size: 19px; }

/* Item icon frame. Legacy sprite classes render inside untouched. */
.rd-item { position: relative; display: inline-grid; place-items: center; line-height: 0; }

/* Item icons are background sprites on a fixed 64px cell, so a smaller icon
   has to be scaled with a transform. Resizing the box would re-crop the
   sprite and show a quarter of the neighbouring icon instead. */
.rd-item-face {
  position: relative;
  display: block;
  width: 64px;
  height: 64px;
  line-height: 0;
}
.rd-item > .rd-item-face > img,
.rd-item > img {
  display: block;
  width: 64px;
  height: 64px;
  /* .rd-content img caps images at max-width:100%, which resolves against the
     32px face on a small item and slices the sprite cell down the middle.
     max-width always beats width, so it has to be released here. */
  max-width: none;
  margin: 0;
  border-radius: 3px;
  transform: none;
}
/* Shrinking the box would re-crop the sprite, so the cell is scaled and the
   layout box pulled back in by the same amount. This is the pairing the
   legacy .scale class uses, and the negative margin is what makes the
   centred scale land inside the smaller box. */
.rd-item-sm > .rd-item-face { width: 32px; height: 32px; }
.rd-item-sm > .rd-item-face > img {
  width: 64px;
  height: 64px;
  transform: scale(.5);
  transform-origin: 50% 50%;
  margin: -16px;
}
.rd-item-sm .rd-item-qty { right: -1px; bottom: -2px; font-size: 8px; padding: 0 2px; }
.rd-item-qty {
  position: absolute;
  right: 2px;
  bottom: 1px;
  z-index: 2;
  padding: 0 3px;
  color: #fff;
  font-family: var(--rd-mono-font) !important;
  font-size: 9.5px;
  font-weight: 700;
  line-height: 1.5;
  background: rgba(5, 5, 5, .82);
  border-radius: 4px;
}
.rd-item-talics { display: flex; gap: 2px; justify-content: center; margin-top: 3px; }
/* Source art is 14x22. Forced into an 11px square it read as a smear;
   10x16 is the nearest whole-pixel pair to that ratio. */
.rd-item-talics img { width: 10px; height: 16px; display: block; margin: 0; float: none; }

/* Item detail card. Viewport-aware, keyboard reachable. */
.rd-item-card {
  position: absolute;
  left: 50%;
  bottom: calc(100% + 10px);
  /* Above .rd-sidebar (1040) and the mobile backdrop (1035) so the card is not
     painted behind the nav, but below .rd-user-menu (1050), Bootstrap modals
     and .rd-skip-link (1100), which should still win over a hover card. */
  z-index: 1045;
  width: max-content;
  max-width: min(420px, 88vw);
  padding: 13px 15px;
  color: #c7c5c1;
  font-size: 12px;
  line-height: 1.55;
  text-align: left;
  white-space: normal;
  background: #141414;
  border: 1px solid rgba(var(--rd-accent-2-rgb), .28);
  border-radius: 14px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, .55);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translate(-50%, 4px);
  transition: opacity .16s ease, transform .16s ease, visibility .16s;
}
.rd-item:hover > .rd-item-card,
.rd-item:focus-within > .rd-item-card {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translate(-50%, 0);
}
.rd-item-card.rd-pin-start { left: 0; transform: translate(0, 4px); }
.rd-item:hover > .rd-item-card.rd-pin-start,
.rd-item:focus-within > .rd-item-card.rd-pin-start { transform: translate(0, 0); }
.rd-item-card.rd-pin-end { left: auto; right: 0; transform: translate(0, 4px); }
.rd-item:hover > .rd-item-card.rd-pin-end,
.rd-item:focus-within > .rd-item-card.rd-pin-end { transform: translate(0, 0); }
.rd-item-card.rd-drop-below { top: calc(100% + 10px); bottom: auto; }

/* Item cards are absolutely positioned, so any ancestor that clips its
   overflow would cut them off at the panel edge. Kept as its own rule: a
   selector list containing :has() is dropped whole where :has() is unknown. */
.rd-char-loadout,
.rd-gear,
.rd-gear-acc,
.rd-bags,
.rd-bag-grid,
.rd-loggrid,
.rd-panel-body { overflow: visible; }

.rd-panel:has(.rd-item) { overflow: visible; }
.rd-item-card h4 {
  margin: 0 0 3px;
  color: #fff;
  font-family: var(--rd-display-font) !important;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -.015em;
  overflow-wrap: anywhere;
}
.rd-item-card .rd-item-kind {
  display: block;
  margin-bottom: 9px;
  color: var(--rd-muted-2);
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.rd-item-card dl { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 14px; margin: 0; }
.rd-item-card dt { color: var(--rd-muted-2); font-size: 11.5px; font-weight: 600; }
.rd-item-card dd { margin: 0; color: #e6e3dc; font-size: 11.5px; font-weight: 600; text-align: right; overflow-wrap: anywhere; }
.rd-item-card .rd-item-desc {
  margin: 10px 0 0;
  padding-top: 9px;
  color: var(--rd-muted);
  font-size: 11.5px;
  font-style: italic;
  border-top: 1px solid var(--rd-border);
}
.rd-item-card table { width: 100%; background: transparent; }
.rd-item-card td { padding: 1px 0; border: 0; }

/* Item detail is fetched on demand, so the card says so instead of
   opening as an empty box while the request is in flight. */
.rd-item-loading {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--rd-muted-2);
  font-size: 11.5px;
  font-weight: 600;
}
.rd-item-loading i {
  display: inline-block;
  color: var(--rd-accent-2);
  font-size: 13px;
  animation: rdSpin .9s linear infinite;
}
@keyframes rdSpin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .rd-item-loading i { animation: none; }
}

/* Activity log rows. */
.rd-loggrid { display: grid; gap: 8px; }
.rd-log-group {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 14px;
  padding: 10px 13px;
  margin-top: 6px;
  border: 1px solid var(--rd-border);
  border-left: 3px solid rgba(var(--rd-accent-2-rgb), .45);
  border-radius: 11px;
  background: rgba(var(--rd-accent-rgb), .055);
}
.rd-log-group:first-child { margin-top: 0; }
.rd-log-group strong { color: #f0ede6; font-size: 12.5px; font-weight: 700; overflow-wrap: anywhere; }
.rd-log-group span { display: inline-flex; align-items: center; gap: 7px; color: var(--rd-muted); font-size: 11.5px; }
.rd-log-group i { color: #727272; font-size: 12px; }
.rd-log-time { color: var(--rd-muted); font-family: var(--rd-mono-font) !important; font-size: 11px; letter-spacing: .01em; }
.rd-logrow {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  padding: 9px 13px;
  margin-left: 14px;
  border: 1px solid var(--rd-border);
  border-radius: 11px;
  background: rgba(255, 255, 255, .02);
}
/* flex: 0 1 auto, not 1 1 160px: the name block used to grow to fill the
   whole row, which is half of what pushed the quantity to the far edge. */
.rd-logrow-copy { min-width: 0; flex: 0 1 auto; display: grid; gap: 2px; }
.rd-logrow-copy strong { color: #e6e3dc; font-size: 12.5px; font-weight: 600; overflow-wrap: anywhere; }
.rd-logrow-copy small { color: var(--rd-muted-2); font-size: 11px; }
/* Activity History prints the item code under the name. Monospace so the
   alphanumerics line up and are easy to read off, and user-select so it
   can be copied into a search. */
.rd-log-code { justify-self: start; color: var(--rd-muted-2); font-size: 10.5px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  letter-spacing: .02em; background: rgba(255,255,255,.045);
  border: 1px solid rgba(255,255,255,.07); border-radius: 4px;
  padding: 0 5px; line-height: 16px; user-select: all; }
.rd-log-dir {
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  font-size: 12px;
  font-weight: 800;
  border-radius: 7px;
}
.rd-log-gain { color: #6ee7a8; background: rgba(53, 208, 127, .12); }
.rd-log-loss { color: #fca5a5; background: rgba(239, 68, 68, .12); }
/* margin-left: 8px, not auto. "auto" shoved the quantity to the opposite
   end of the row from the item it belongs to - on a wide screen that was
   most of a monitor apart. */
.rd-log-amount { margin-left: 8px; color: #fff; font-family: var(--rd-display-font) !important; font-size: 12.5px; font-weight: 600; white-space: nowrap; }
.rd-log-wealth { display: flex; flex-wrap: wrap; gap: 6px; margin-left: 14px; }
.rd-log-wealth span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 9px;
  color: var(--rd-accent-ink);
  font-size: 11px;
  font-weight: 650;
  border: 1px solid rgba(var(--rd-accent-2-rgb), .18);
  border-radius: 999px;
  background: rgba(var(--rd-accent-rgb), .08);
}

/* One-click fill for fields the player would otherwise type from memory. */
/* Search forms have a single action, so the button sizes to its label
   instead of stretching into a full-width banner. */
.rd-actions-inline { justify-content: flex-start; }
.rd-actions-inline .rd-cta { flex: 0 0 auto; min-width: 180px; }

.rd-quickpick {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 7px;
  margin: -4px 0 4px;
}
.rd-quickpick-label {
  color: var(--rd-muted-2);
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.rd-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 11px;
  color: #d6d3cc;
  font-size: 11.5px;
  font-weight: 600;
  background: rgba(255, 255, 255, .03);
  border: 1px solid var(--rd-border);
  border-radius: 999px;
  cursor: pointer;
  transition: color .15s ease, background .15s ease, border-color .15s ease;
}
.rd-chip i { color: var(--rd-muted-2); font-size: 11px; transition: color .15s ease; }
.rd-chip small { color: var(--rd-muted-2); font-size: 10px; font-weight: 700; }
.rd-chip:hover {
  color: #fff;
  background: rgba(var(--rd-accent-rgb), .12);
  border-color: rgba(var(--rd-accent-2-rgb), .32);
}
.rd-chip:hover i { color: var(--rd-accent-2); }
.rd-chip:focus-visible { outline: 2px solid rgba(var(--rd-accent-2-rgb), .65); outline-offset: 2px; }
.rd-chip.rd-is-active {
  color: #fff;
  background: rgba(var(--rd-accent-rgb), .18);
  border-color: rgba(var(--rd-accent-2-rgb), .4);
}

/* Marketplace listings. */
.rd-cardgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); gap: 14px; }
.rd-charcard {
  display: grid;
  gap: 13px;
  padding: 16px;
  border: 1px solid var(--rd-border);
  border-radius: 15px;
  background: linear-gradient(180deg, rgba(29, 29, 29, .9), rgba(20, 20, 20, .94));
  transition: transform .18s cubic-bezier(.2, .8, .3, 1), border-color .18s ease;
}
.rd-charcard:hover { transform: translateY(-2px); border-color: rgba(var(--rd-accent-2-rgb), .28); }
.rd-charcard-top { display: flex; align-items: center; gap: 12px; }
.rd-charcard-top .rd-idcard-sigil { flex: 0 0 44px; width: 44px; height: 44px; font-size: 18px; clip-path: polygon(11px 0, 100% 0, 100% calc(100% - 11px), calc(100% - 11px) 100%, 0 100%, 0 11px); }
.rd-charcard-top .rd-idcard-sigil img { width: 32px; height: 32px; }
.rd-charcard-copy { min-width: 0; display: grid; gap: 3px; }
.rd-charcard-copy strong {
  color: #fff;
  font-family: var(--rd-display-font) !important;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -.02em;
  overflow-wrap: anywhere;
}
.rd-charcard-copy small { color: var(--rd-muted); font-size: 11.5px; }
.rd-charcard-facts { display: grid; gap: 7px; }
.rd-charcard-facts div { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.rd-charcard-facts dt, .rd-charcard-facts span:first-child { color: var(--rd-muted-2); font-size: 11px; font-weight: 650; }
.rd-charcard-facts b { color: #efece5; font-size: 12.5px; font-weight: 650; text-align: right; }
.rd-charcard-price { color: #fff; font-family: var(--rd-display-font) !important; font-size: 17px; font-weight: 600; letter-spacing: -.02em; }
.rd-charcard-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.rd-charcard-actions .rd-cta { flex: 1 1 120px; }

/* Compact key figures. */
/* A fixed column count keeps an odd number of figures from orphaning the
   last one on a row of its own, which auto-fit does at some widths. */
.rd-figures { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.rd-figure {
  padding: 12px 14px;
  border: 1px solid var(--rd-border);
  border-radius: 12px;
  background: rgba(255, 255, 255, .022);
}
.rd-figure-label { display: block; color: var(--rd-muted-2); font-size: 9.5px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.rd-figure-value {
  display: block;
  margin-top: 5px;
  color: #fff;
  font-family: var(--rd-display-font) !important;
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -.025em;
  overflow-wrap: anywhere;
}
.rd-figure.rd-is-void .rd-figure-value { color: var(--rd-muted-2); font-size: 13px; }

/* A figure reading zero is real data but carries no news, so it steps back
   and lets the numbers that matter lead. */
.rd-figure.rd-is-zero { background: rgba(255, 255, 255, .012); }
.rd-figure.rd-is-zero .rd-figure-label { color: #555555; }
.rd-figure.rd-is-zero .rd-figure-value { color: #606060; }

/* Inventory and bank slot grids. */
.rd-bags { display: grid; gap: 16px; }
.rd-bag-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}
.rd-bag-head strong { color: #f0ede6; font-size: 12.5px; font-weight: 700; }
/* A bag holds twenty slots, so it is drawn as two rows of ten rather than
   letting auto-fill orphan the last slot on a row of its own. */
.rd-bag-grid {
  display: grid;
  grid-template-columns: repeat(10, minmax(0, 69px));
  justify-content: start;
  gap: 7px;
}

/* An empty bag was drawing twenty empty tiles. It gets one line instead. */
.rd-bag-void {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 14px;
  border: 1px dashed var(--rd-border);
  border-radius: 11px;
  background: rgba(255, 255, 255, .012);
}
.rd-bag-void i { color: #525252; font-size: 15px; }
.rd-bag-void strong { color: #989898; font-size: 12.5px; font-weight: 600; }
.rd-bag-void span {
  margin-left: auto;
  color: var(--rd-muted-2);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.rd-bag-grid .rd-gear-slot { aspect-ratio: 1; }

/* Force / melee / ranged skill sets. */
.rd-skillset { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 208px), 1fr)); gap: 14px; }
.rd-skillcol {
  overflow: hidden;
  border: 1px solid var(--rd-border);
  border-radius: 14px;
  background: rgba(255, 255, 255, .02);
}
.rd-skillcol > h3 {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin: 0;
  padding: 11px 14px;
  color: #fff;
  font-family: var(--rd-display-font) !important;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: -.01em;
  background: rgba(var(--rd-accent-rgb), .1);
  border-bottom: 1px solid var(--rd-border);
}
.rd-skillcol > h3 .rd-pill { font-family: var(--rd-font) !important; font-size: 9.5px; padding: 3px 8px; }
.rd-skilltier {
  padding: 10px 13px 3px;
  color: var(--rd-muted-2);
  font-size: 8.5px;
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.rd-skill { display: flex; align-items: center; gap: 10px; padding: 5px 13px 6px; }
.rd-skill-icon {
  flex: 0 0 32px;
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: #101010;
  border: 1px solid var(--rd-border);
  border-radius: 8px;
}
.rd-skill-icon > div { transform: scale(.5); margin: -16px; }
.rd-skill-copy { min-width: 0; display: grid; }
.rd-skill-copy strong { color: #e6e3dc; font-size: 12px; font-weight: 600; overflow-wrap: anywhere; }

/* Mastery readout. */
.rd-mastery { display: grid; gap: 7px; }
.rd-mastery div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 12px;
  border: 1px solid var(--rd-border);
  border-radius: 10px;
  background: rgba(255, 255, 255, .02);
}
.rd-mastery span { color: var(--rd-muted); font-size: 12px; font-weight: 600; }

@media (max-width: 991.98px) {
  .rd-char-split { grid-template-columns: minmax(0, 1fr); }
  .rd-figures { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 575.98px) {
  /* .rd-gear.rd-has-acc outranks a bare .rd-gear regardless of the media
     query, so the variant has to be reset by name too. */
  .rd-gear,
  .rd-gear.rd-has-acc {
    width: auto;
    grid-template-columns: repeat(auto-fill, minmax(74px, 1fr));
    grid-auto-rows: auto;
    grid-template-areas: none;
  }
  /* The named areas are gone at this width, so the slots have to release
     their grid-area or they get placed against lines that no longer exist. */
  .rd-slot-weapon, .rd-slot-helmet, .rd-slot-shield, .rd-slot-cloak,
  .rd-slot-upper, .rd-slot-gauntlet, .rd-slot-lower, .rd-slot-shoe,
  .rd-gear-acc { grid-area: auto; }
  .rd-gear-slot { aspect-ratio: 1; }
  /* A square tile has no room for the label row on top of the art, so the
     armour cells size to their content here instead. */
  .rd-gear > .rd-gear-slot { aspect-ratio: auto; min-height: 110px; }
  .rd-gear-acc {
    grid-column: 1 / -1;
    grid-template-columns: repeat(auto-fill, minmax(62px, 1fr));
  }
  /* .rd-gear-slot takes aspect-ratio 1 at this width, so the cell squares
     itself and the caption is what has to stay outside it. */
  .rd-gear-acc .rd-gear-slot { min-height: 0; }
  .rd-acc-slot { aspect-ratio: 1; }
  .rd-idcard { padding: 15px; }
  .rd-idcard-actions { margin-left: 0; width: 100%; }
  .rd-idcard-actions .rd-cta { flex: 1 1 100%; }
  .rd-logrow, .rd-log-wealth { margin-left: 0; }
  .rd-logrow { padding: 9px 11px; gap: 10px; }
  .rd-log-amount { margin-left: 0; }
  .rd-charcard-actions .rd-cta { flex: 1 1 100%; }
  .rd-bag-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
  .rd-skillset { grid-template-columns: minmax(0, 1fr); }
  .rd-figures { grid-template-columns: minmax(0, 1fr); }
}

/* ======================================================================
   Server Rank / Leaderboard (user_server_rank.php)
   ====================================================================== */
.rd-board-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 18px; }
.rd-board-toolbar label { display: inline-flex; align-items: center; gap: 6px; color: var(--rd-muted-2); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; }
.rd-board-select {
  background: #111111; border: 1px solid var(--rd-border); border-radius: 10px;
  color: var(--rd-text); padding: 8px 12px; font-size: 12.5px; font-family: var(--rd-font) !important;
  min-width: 170px;
}
.rd-board-select:focus { outline: 2px solid rgba(var(--rd-accent-2-rgb), .5); outline-offset: -1px; }

.rd-board-caption { margin: 2px 0 12px; color: var(--rd-muted-2); font-size: 10.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; }

.rd-board-wrap { overflow-x: auto; }
.rd-board { width: 100%; border-collapse: separate; border-spacing: 0 7px; min-width: 780px; }
.rd-board thead th { padding: 0 12px 8px; color: var(--rd-muted-2); font-size: 10.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; text-align: left; white-space: nowrap; }
.rd-board thead th.rd-board-c { text-align: center; }
.rd-board tbody tr { background: var(--rd-surface); transition: background .14s ease; }
.rd-board tbody tr:hover { background: var(--rd-surface-2); }
.rd-board td { padding: 10px 12px; border-top: 1px solid var(--rd-border); border-bottom: 1px solid var(--rd-border); vertical-align: middle; font-size: 12.5px; }
.rd-board td:first-child { border-left: 1px solid var(--rd-border); border-radius: 12px 0 0 12px; }
.rd-board td:last-child { border-right: 1px solid var(--rd-border); border-radius: 0 12px 12px 0; }
.rd-board td.rd-board-c { text-align: center; }
.rd-board-empty-row td { padding: 28px 12px; text-align: center; color: var(--rd-muted); font-size: 13px; }
.rd-board-empty-row i { margin-right: 6px; color: var(--rd-muted-2); }

.rd-board-rank {
  display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px;
  border-radius: 50%; background: rgba(255, 255, 255, .04); border: 1px solid var(--rd-border);
  color: var(--rd-muted); font-size: 11px; font-weight: 700;
}
.rd-board-rank-gold { background: linear-gradient(140deg, #fde68a, #d97706); border-color: transparent; color: #3d2400; }
.rd-board-rank-silver { background: linear-gradient(140deg, #e5e7eb, #94a3b8); border-color: transparent; color: #1f2937; }
.rd-board-rank-bronze { background: linear-gradient(140deg, #e6a874, #a1602f); border-color: transparent; color: #2c1400; }

.rd-board-player { display: flex; align-items: center; gap: 10px; min-width: 190px; }
.rd-board-avatar {
  position: relative; flex: 0 0 auto; width: 36px; height: 36px; border-radius: 10px;
  overflow: visible; background: rgba(255, 255, 255, .04); border: 1px solid var(--rd-border);
  display: grid; place-items: center;
}
.rd-board-avatar img { width: 26px; height: 26px; object-fit: contain; }
.rd-board-avatar-status {
  position: absolute; right: -2px; bottom: -2px; width: 9px; height: 9px; border-radius: 50%;
  border: 2px solid var(--rd-surface); background: var(--rd-muted-2);
}
.rd-board-avatar-status.rd-is-online { background: var(--rd-success); box-shadow: 0 0 8px rgba(53, 208, 127, .55); }
.rd-board-name { display: grid; gap: 3px; min-width: 0; }
.rd-board-name a { color: var(--rd-text); font-weight: 650; font-size: 12.5px; text-decoration: none; }
.rd-board-name a:hover { color: var(--rd-accent-2); }
.rd-board-name.rd-race-bellato a { color: #93c5fd; }
.rd-board-name.rd-race-cora a { color: #d8b4fe; }
.rd-board-name.rd-race-accretia a { color: #cbd5e1; }
.rd-board-kd { display: flex; gap: 5px; }
.rd-board-kd span { font-size: 9.5px; font-weight: 700; padding: 1px 6px; border-radius: 5px; }
.rd-board-kd .rd-kd-kill { color: #86efac; background: rgba(53, 208, 127, .12); }
.rd-board-kd .rd-kd-death { color: #fca5a5; background: rgba(239, 68, 68, .1); }

.rd-board-metric { font-family: var(--rd-mono-font), var(--rd-font); font-weight: 650; color: #efece5; }

.rd-board-guild { display: flex; align-items: center; gap: 10px; min-width: 200px; }
.rd-board-guild-badge { position: relative; flex: 0 0 auto; width: 38px; height: 38px; }
.rd-board-guild-back { width: 100%; height: 100%; object-fit: contain; border-radius: 8px; }
.rd-board-guild-mark { position: absolute; inset: 0; display: block; }
.rd-board-guild-copy { display: grid; gap: 4px; min-width: 0; }
.rd-board-guild-copy strong { color: var(--rd-text); font-size: 12.5px; font-weight: 650; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 220px; }
.rd-board-guild-meta { display: flex; flex-wrap: wrap; gap: 5px; align-items: center; }
.rd-board-guild-meta a.rd-pill { text-decoration: none; }
.rd-board-guild-meta .rd-pill { padding: 1px 7px; font-size: 9px; gap: 4px; }
.rd-board-guild-empty { display: inline-flex; align-items: center; gap: 6px; color: var(--rd-muted); font-size: 11.5px; font-style: italic; }

@media (max-width: 720px) {
  .rd-board-player, .rd-board-guild { min-width: 160px; }
}

/* ----------------------------------------------------------------------
/* ----------------------------------------------------------------------
   Faction chip - rd_char_race_chip().
   One emblem + colour per race, shared by the auction filters, listing rows
   and character cards. The tints match .rd-idcard-sigil and .rd-board-name so
   a faction reads the same wherever it appears.
   ---------------------------------------------------------------------- */
.rd-racechip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px 3px 4px;
  border: 1px solid var(--rd-border);
  border-radius: 999px;
  background: var(--rd-surface-2);
  color: var(--rd-muted);
  font-size: 11px;
  font-weight: 650;
  line-height: 1.5;
  white-space: nowrap;
}
.rd-racechip img,
.rd-racechip > i {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  object-fit: contain;
  background: rgba(255, 255, 255, .06);
}
.rd-racechip > i { display: grid; place-items: center; font-size: 10px; }

.rd-racechip.rd-race-bellato  { color: #bfdbfe; border-color: rgba(96, 165, 250, .38); background: rgba(96, 165, 250, .12); }
.rd-racechip.rd-race-cora     { color: #e9d5ff; border-color: rgba(192, 132, 252, .38); background: rgba(192, 132, 252, .12); }
.rd-racechip.rd-race-accretia { color: #e2e8f0; border-color: rgba(148, 163, 184, .40); background: rgba(148, 163, 184, .14); }
.rd-racechip.rd-race-bellato img  { background: rgba(96, 165, 250, .18); }
.rd-racechip.rd-race-cora img     { background: rgba(192, 132, 252, .18); }
.rd-racechip.rd-race-accretia img { background: rgba(148, 163, 184, .20); }

/* Filter variant: a full-width selectable row of the same chip. */
.rd-racepick { display: flex; flex-wrap: wrap; gap: 6px; }
.rd-racepick .rd-racechip {
  flex: 1 1 44%;
  justify-content: center;
  padding: 7px 10px;
  text-decoration: none;
  transition: border-color .14s ease, background .14s ease, color .14s ease;
}
.rd-racepick .rd-racechip:hover { border-color: var(--rd-border-strong); }
.rd-racepick .rd-racechip b { margin-left: 2px; font-weight: 700; opacity: .6; }
.rd-racepick .rd-racechip.rd-is-active {
  border-color: currentColor;
  box-shadow: inset 0 0 0 1px currentColor;
}

/* ----------------------------------------------------------------------
   Shared board cell primitives.
   Used by the UTS, auction and guild-shop tables, which all render an item
   thumbnail beside its name, a filter toolbar, and paged numeric columns.
   ---------------------------------------------------------------------- */

/* The toolbar is a flex row, so the otherwise block-level .rd-input has to
   be told how much of it to take. */
.rd-board-search { flex: 1 1 210px; max-width: 290px; }
.rd-content .rd-board-toolbar .rd-board-search .form-control {
  min-height: 40px;
  padding: 8px 12px 8px 38px !important;
  border-radius: 10px !important;
  font-size: 12.5px;
}
.rd-board-toolbar .rd-board-search > i { left: 13px; font-size: 14px; }
/* Search inputs draw their own clear affordance in WebKit; it lands on a dark
   field as a light blob, so it is suppressed in favour of the Clear button. */
.rd-board-toolbar input[type="search"]::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }
.rd-board-toolbar-end { margin-left: auto; }

/* Figures are compared down a column, so they need fixed-width numerals. */
.rd-board-metric { font-variant-numeric: tabular-nums; }
.rd-board-when {
  white-space: nowrap;
  color: var(--rd-muted);
  font-size: 11.5px;
  font-variant-numeric: tabular-nums;
}
.rd-board-foot { margin-top: 16px; }

/* Inline sort-order input inside a board cell. */
.rd-content .rd-board-order { width: 72px; min-height: 34px; padding: 5px 8px !important; text-align: center; font-variant-numeric: tabular-nums; }
/* Two small actions side by side in a board cell. */
.rd-board-actions { display: inline-flex; flex-wrap: wrap; gap: 6px; justify-content: center; }

/* Price cell: the figure leads, its unit rides underneath so a column of
   prices compares on the number rather than on repeated unit text. */
.rd-board-price { line-height: 1.25; }
.rd-board-price b {
  display: block;
  color: var(--rd-accent-2);
  font-family: var(--rd-mono-font), var(--rd-font);
  font-size: 13px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.rd-board-price small { color: var(--rd-muted-2); font-size: 9.5px; text-transform: uppercase; letter-spacing: .05em; }

/* Character marketplace carries ten columns; it needs more room than the
   default board before it starts scrolling. */
.rd-board-chars { min-width: 1020px; }

/* ----------------------------------------------------------------------
   DataTables controls, themed.
   The plugin injects its own length menu, search box, info line and pager
   around whatever table it is given. Left alone they arrive as unstyled
   Bootstrap, which is what made a DataTables-backed board the one table in
   the panel that did not look like the rest.
   ---------------------------------------------------------------------- */
.dataTables_wrapper { color: var(--rd-muted); font-size: 12px; }
.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_filter { margin-bottom: 14px; }
.dataTables_wrapper .dataTables_length label,
.dataTables_wrapper .dataTables_filter label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  color: var(--rd-muted-2);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.dataTables_wrapper .dataTables_filter { text-align: right; }
.dataTables_wrapper .dataTables_length select,
.dataTables_wrapper .dataTables_filter input {
  min-height: 38px;
  padding: 7px 11px !important;
  border: 1px solid var(--rd-border) !important;
  border-radius: 10px !important;
  background: #111111 !important;
  color: var(--rd-text) !important;
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
}
.dataTables_wrapper .dataTables_filter input { min-width: 220px; }
.dataTables_wrapper .dataTables_length select:focus,
.dataTables_wrapper .dataTables_filter input:focus {
  outline: none;
  border-color: rgba(var(--rd-accent-rgb), .35) !important;
  box-shadow: 0 0 0 3px rgba(var(--rd-accent-rgb), .09) !important;
}
.dataTables_wrapper .dataTables_info {
  padding-top: 14px;
  color: var(--rd-muted-2);
  font-size: 11.5px;
  font-variant-numeric: tabular-nums;
}
.dataTables_wrapper .dataTables_paginate { padding-top: 12px; }
.dataTables_wrapper .dataTables_paginate .paginate_button {
  min-width: 34px;
  margin: 0 2px;
  padding: 6px 10px !important;
  border: 1px solid var(--rd-border) !important;
  border-radius: 9px !important;
  background: var(--rd-surface) !important;
  color: var(--rd-muted) !important;
  font-size: 12px;
  font-weight: 650;
  font-variant-numeric: tabular-nums;
  transition: border-color .14s ease, background .14s ease, color .14s ease;
}
.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
  border-color: var(--rd-border-strong) !important;
  background: var(--rd-surface-2) !important;
  color: #fff !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
  border-color: rgba(var(--rd-accent-2-rgb), .4) !important;
  background: rgba(var(--rd-accent-rgb), .16) !important;
  color: var(--rd-accent-ink) !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled,
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover {
  border-color: var(--rd-border) !important;
  background: transparent !important;
  color: #555555 !important;
  cursor: default;
}
.dataTables_wrapper .dataTables_paginate .paginate_button:focus-visible {
  outline: 2px solid rgba(var(--rd-accent-2-rgb), .65);
  outline-offset: 2px;
}
/* The sort affordance sits on the board's own uppercase header cells. */
.rd-board thead th.sorting,
.rd-board thead th.sorting_asc,
.rd-board thead th.sorting_desc { cursor: pointer; }
.rd-board thead th.sorting_asc,
.rd-board thead th.sorting_desc { color: var(--rd-accent-2); }

@media (max-width: 700px) {
  .dataTables_wrapper .dataTables_filter { text-align: left; }
  .dataTables_wrapper .dataTables_filter input { min-width: 0; width: 100%; }
}

/* ----------------------------------------------------------------------
   Guild shop purchase confirm (user_itemshop.php).
   ---------------------------------------------------------------------- */

/* Purchase summary: label/value rows, with the resulting balance set apart
   as the line the buyer is actually deciding on. */
.rd-shopsummary {
  display: grid;
  gap: 2px;
  margin-bottom: 18px;
  padding: 4px 0;
  border: 1px solid var(--rd-border);
  border-radius: 12px;
  background: var(--rd-surface);
}
.rd-shopsummary .rd-detail-row { padding: 9px 14px; }
.rd-shopsummary .rd-detail-total {
  margin-top: 2px;
  border-top: 1px solid var(--rd-border);
}
.rd-shopsummary .rd-detail-total .rd-detail-val {
  color: var(--rd-accent-2);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

/* Category breadcrumb and picker (guild shop admin). */
.rd-crumbs { margin-bottom: 14px; color: var(--rd-muted-2); font-size: 12px; }
.rd-crumbs a { color: var(--rd-muted); text-decoration: none; }
.rd-crumbs a:hover { color: var(--rd-accent-2); }
.rd-catlist {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr));
  gap: 8px;
  margin-bottom: 18px;
}
.rd-catlist-item {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 11px 13px;
  border: 1px solid var(--rd-border);
  border-radius: 12px;
  background: var(--rd-surface);
  color: var(--rd-text);
  text-decoration: none;
  transition: border-color .14s ease, background .14s ease;
}
.rd-catlist-item:hover { border-color: var(--rd-border-strong); background: var(--rd-surface-2); }
.rd-catlist-item > i { flex: 0 0 auto; margin-top: 1px; color: var(--rd-accent-2); font-size: 15px; }
.rd-catlist-item strong { display: block; font-size: 12.5px; font-weight: 650; }
.rd-catlist-item small { display: block; margin-top: 3px; color: var(--rd-muted); font-size: 11px; line-height: 1.5; }
.rd-catlist-item small a { color: var(--rd-muted); text-decoration: none; }
.rd-catlist-item small a:hover { color: var(--rd-accent-2); }

/* Radio pairs inside a field. A fieldset/legend so the question is announced
   with its options rather than sitting in a neighbouring table cell. */
fieldset.rd-field { border: 0; margin: 0; padding: 0; min-width: 0; }
fieldset.rd-field > legend {
  float: none; width: auto; margin-bottom: 7px; padding: 0;
  color: var(--rd-muted-2); font-size: 11.5px; font-weight: 700;
}
.rd-choices { display: flex; flex-wrap: wrap; gap: 14px; }
.rd-choices label {
  display: inline-flex; align-items: center; gap: 7px;
  color: var(--rd-text); font-size: 12.5px; cursor: pointer;
}
.rd-choices input[type="radio"] { accent-color: var(--rd-accent); width: 15px; height: 15px; }

/* Item-manage board carries six columns including two actions. */
.rd-board-items { min-width: 880px; }

/* ----------------------------------------------------------------------
   Guild shop grid (user_itemshop.php).
   Replaces a 4-column <table> whose last row was padded with empty cells.
   ---------------------------------------------------------------------- */
.rd-shopgrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(272px, 1fr));
  gap: 12px;
}
.rd-shopcard {
  display: flex;
  flex-direction: column;
  background: var(--rd-surface);
  border: 1px solid var(--rd-border);
  border-radius: 14px;
  overflow: hidden;
  transition: border-color .16s ease, background .16s ease;
}
.rd-shopcard:hover { border-color: var(--rd-border-strong); background: var(--rd-surface-2); }
.rd-shopcard form { display: flex; flex-direction: column; flex: 1 1 auto; margin: 0; }
.rd-shopcard-top { display: flex; gap: 12px; padding: 13px 14px; }
.rd-shopcard-art { flex: 0 0 auto; line-height: 0; }
.rd-shopcard-art img { border-radius: 8px; }
.rd-shopcard-copy { display: grid; gap: 8px; align-content: start; min-width: 0; }
.rd-shopcard-copy strong {
  color: var(--rd-text);
  font-size: 13px;
  font-weight: 650;
  line-height: 1.35;
  overflow-wrap: anywhere;
}
.rd-shopcard-tags { display: flex; flex-wrap: wrap; gap: 5px; align-items: center; }
.rd-shopcard-tags .rd-pill { padding: 2px 8px; font-size: 9.5px; gap: 4px; }
.rd-shopcard-talics { display: inline-flex; gap: 2px; align-items: center; }
.rd-shopcard-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: auto;
  padding: 11px 14px;
  border-top: 1px solid var(--rd-border);
  background: var(--rd-bg-2);
}
.rd-shopcard-price { display: grid; line-height: 1.2; }
.rd-shopcard-price b {
  color: var(--rd-accent-2);
  font-family: var(--rd-mono-font), var(--rd-font);
  font-size: 14px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.rd-shopcard-price small { color: var(--rd-muted-2); font-size: 9.5px; text-transform: uppercase; letter-spacing: .05em; }
/* A sold-out or unaffordable item keeps its card but loses the affordance. */
.rd-shopcard .rd-cta[disabled] { opacity: .45; pointer-events: none; }
/* ---- DataTables ------------------------------------------------------
   Pages that keep DataTables for search/sort/paging wrap the table in
   .rd-datatable so its injected controls follow the panel tokens instead of
   the library's own light defaults. */
.rd-datatable .dataTables_wrapper { color: var(--rd-muted); font-size: 12px; }
.rd-datatable .dataTables_length,
.rd-datatable .dataTables_filter { margin-bottom: 12px; }
.rd-datatable .dataTables_filter { text-align: right; }
.rd-datatable .dataTables_length label,
.rd-datatable .dataTables_filter label {
  display: inline-flex; align-items: center; gap: 8px;
  color: var(--rd-muted-2); font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .06em;
}
.rd-datatable .dataTables_length select,
.rd-datatable .dataTables_filter input {
  background: #111111;
  border: 1px solid var(--rd-border);
  border-radius: 10px;
  color: var(--rd-text);
  padding: 7px 11px;
  font-size: 12.5px;
  font-family: var(--rd-font) !important;
  text-transform: none;
  letter-spacing: 0;
}
.rd-datatable .dataTables_length select:focus,
.rd-datatable .dataTables_filter input:focus {
  outline: 2px solid rgba(var(--rd-accent-2-rgb), .5);
  outline-offset: -1px;
}
.rd-datatable .dataTables_info { padding-top: 12px; color: var(--rd-muted-2); font-size: 11.5px; }
.rd-datatable .dataTables_paginate { padding-top: 12px; }
.rd-datatable .dataTables_paginate .paginate_button {
  display: inline-grid; place-items: center;
  min-width: 32px; min-height: 32px; margin-left: 4px; padding: 4px 9px;
  border: 1px solid var(--rd-border) !important;
  border-radius: 8px;
  background: #141414 !important;
  color: var(--rd-muted) !important;
  font-size: 12px;
  cursor: pointer;
}
.rd-datatable .dataTables_paginate .paginate_button.current {
  border-color: var(--rd-accent) !important;
  background: var(--rd-accent) !important;
  color: var(--rd-accent-ink, #fff) !important;
  font-weight: 700;
}
.rd-datatable .dataTables_paginate .paginate_button.disabled { opacity: .4; cursor: default; }
/* The library sorts on the header cell, so it needs to look interactive. */
.rd-datatable .rd-board thead th { cursor: pointer; }
.rd-datatable .rd-board thead th.sorting_disabled { cursor: default; }

.rd-cellitem { display: flex; align-items: center; gap: 11px; min-width: 0; }
.rd-cellitem-copy { display: grid; gap: 5px; min-width: 0; }
.rd-cellitem-copy strong {
  color: var(--rd-text);
  font-size: 12.5px;
  font-weight: 650;
  line-height: 1.35;
  overflow-wrap: anywhere;
}
.rd-cellitem-meta { display: flex; flex-wrap: wrap; gap: 5px; align-items: center; }
.rd-cellitem-meta .rd-pill { padding: 1px 8px; font-size: 9.5px; gap: 4px; }

@media (max-width: 720px) {
  .rd-board-search { max-width: none; }
  .rd-board-toolbar-end { margin-left: 0; }
}

/* ======================================================================
   Chip War Stats (user_chipwars.php)
   ====================================================================== */
.rd-cw-countdowns { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 16px; }
.rd-cw-tile {
  flex: 1 1 170px; display: flex; align-items: center; gap: 9px; padding: 12px 14px;
  background: var(--rd-surface); border: 1px solid var(--rd-border); border-radius: 12px;
  font-size: 12.5px; font-weight: 650; color: var(--rd-text);
}
.rd-cw-tile i { color: var(--rd-accent-2); font-size: 15px; }

.rd-cw-chart {
  position: relative; margin-bottom: 18px; padding: 14px;
  background: var(--rd-surface); border: 1px solid var(--rd-border); border-radius: var(--rd-radius-sm);
}

.rd-board tbody tr.rd-cw-daydivider,
.rd-board tbody tr.rd-cw-daydivider:hover { background: transparent; }
.rd-cw-daydivider td {
  padding: 12px 12px 6px; border: 0 !important; background: transparent !important;
  color: var(--rd-muted-2); font-size: 10.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .08em;
}
.rd-cw-daydivider i { margin-right: 6px; color: var(--rd-accent-2); }
.rd-cw-daydivider:first-child td { padding-top: 0; }

.rd-cw-pager { margin-top: 14px; display: flex; justify-content: center; }



/* Scroll dock
   Floating jump-to-top / jump-to-bottom pair for the long list and log pages.
   The window is the scroll container (.rd-stage only sets min-height), so the
   dock is fixed to the viewport and sits under the mobile nav backdrop (1035). */
.rd-scroll-dock {
  position: fixed; right: 22px; bottom: 22px; z-index: 1030;
  display: flex; flex-direction: column; gap: 8px; padding: 6px;
  background: rgba(13, 13, 13, .86);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border: 1px solid var(--rd-border); border-radius: 15px; box-shadow: var(--rd-shadow);
  opacity: 0; visibility: hidden; transform: translateY(10px);
  transition: opacity .2s ease, transform .2s ease, visibility .2s ease;
}
.rd-scroll-dock.rd-is-visible { opacity: 1; visibility: visible; transform: none; }

.rd-scroll-btn {
  width: 38px; height: 38px; padding: 0; display: grid; place-items: center;
  color: #b6b4b0; background: rgba(255, 255, 255, .028);
  border: 1px solid var(--rd-border); border-radius: 11px;
  font-size: 15px; line-height: 1; cursor: pointer;
  transition: transform .16s ease, color .16s ease, background .16s ease, border-color .16s ease;
}
.rd-scroll-btn:hover {
  transform: translateY(-1px); color: #fff;
  background: var(--rd-accent-soft); border-color: var(--rd-border-strong);
}
.rd-scroll-btn:focus-visible { outline: 2px solid var(--rd-accent); outline-offset: 2px; }
.rd-scroll-btn:disabled { opacity: .28; pointer-events: none; }

body.rd-auth-page .rd-scroll-dock { display: none; }

@media (max-width: 767.98px) {
  .rd-scroll-dock { right: 12px; bottom: 12px; padding: 5px; gap: 6px; }
  .rd-scroll-btn { width: 36px; height: 36px; }
}

@media (prefers-reduced-motion: reduce) {
  .rd-scroll-dock, .rd-scroll-btn { transition: none; }
  .rd-scroll-btn:hover { transform: none; }
}

/* ----------------------------------------------------------------------
   Detail dialog (Store: Top-Up History invoice).
   A native <dialog>, so Escape, the top layer and the inert backdrop come
   from the browser rather than from a modal library the panel does not load.
   Bootstrap's modal is deliberately not used here: it needs its JS bundle,
   and half the pages that would want one do not ship it.
   ---------------------------------------------------------------------- */
.rd-modal {
  width: min(880px, calc(100vw - 32px));
  max-height: min(86vh, 780px);
  margin: auto;
  padding: 0;
  border: 1px solid var(--rd-border);
  border-radius: var(--rd-radius);
  background: var(--rd-surface);
  color: var(--rd-text);
  box-shadow: 0 32px 90px rgba(0, 0, 0, .55);
  overflow: hidden;
}
.rd-modal::backdrop { background: rgba(5, 5, 5, .72); }
.rd-modal-shell { display: flex; flex-direction: column; max-height: min(86vh, 780px); }
.rd-modal-head {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 17px 20px;
  border-bottom: 1px solid var(--rd-border);
  background: var(--rd-bg-2);
}
.rd-modal-head > div { min-width: 0; }
.rd-modal-head h2 {
  margin: 3px 0 0;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -.01em;
  overflow-wrap: anywhere;
}
.rd-modal-ref {
  display: block;
  color: var(--rd-muted-2);
  font-family: var(--rd-mono-font), var(--rd-font);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  overflow-wrap: anywhere;
}
.rd-modal-x {
  flex: 0 0 auto;
  margin-left: auto;
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid var(--rd-border);
  border-radius: 9px;
  background: transparent;
  color: var(--rd-muted);
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
  transition: color .14s ease, background .14s ease, border-color .14s ease;
}
.rd-modal-x:hover { color: #fff; background: rgba(255, 255, 255, .06); border-color: var(--rd-border-strong); }
.rd-modal-x:focus-visible { outline: 2px solid rgba(var(--rd-accent-2-rgb), .65); outline-offset: 2px; }
.rd-modal-body { padding: 18px 20px; overflow: auto; }
.rd-modal-body > h3 {
  margin: 20px 0 10px;
  color: var(--rd-muted-2);
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.rd-modal-body > h3:first-child { margin-top: 0; }
.rd-modal-body .rd-board { min-width: 380px; border-spacing: 0 6px; }
.rd-modal-foot {
  display: flex;
  justify-content: flex-end;
  gap: 9px;
  padding: 14px 20px;
  border-top: 1px solid var(--rd-border);
  background: var(--rd-bg-2);
}
.rd-modal-trigger { white-space: nowrap; }

@media (max-width: 560px) {
  .rd-modal { width: calc(100vw - 20px); }
  .rd-modal-head, .rd-modal-body, .rd-modal-foot { padding-left: 15px; padding-right: 15px; }
  .rd-modal-body .rd-figures { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ----------------------------------------------------------------------
   Requirement checklist (Event: daily reward, raffle, new player reward).
   Every one of those pages asks the same question - does this character
   clear the gate, and by how much - and each answered it with a table of
   Font Awesome ticks and crosses. One row type answers it everywhere:
   the label, the player's own figure, and the target when it is not met.
   ---------------------------------------------------------------------- */
.rd-reqs { display: grid; gap: 6px; }
.rd-req {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 7px 11px;
  border: 1px solid var(--rd-border);
  border-radius: 10px;
  background: var(--rd-surface);
  font-size: 12px;
  line-height: 1.4;
}
.rd-req > i { flex: 0 0 auto; font-size: 13px; }
.rd-req-label { color: var(--rd-muted); }
.rd-req-value {
  margin-left: auto;
  color: var(--rd-text);
  font-family: var(--rd-mono-font), var(--rd-font);
  font-size: 12px;
  font-weight: 650;
  font-variant-numeric: tabular-nums;
  text-align: right;
}
.rd-req-value small { color: var(--rd-muted-2); font-weight: 500; }
.rd-req.rd-is-met { border-color: rgba(53, 208, 127, .22); background: rgba(53, 208, 127, .05); }
.rd-req.rd-is-met > i { color: #4ade80; }
.rd-req.rd-is-unmet { border-color: rgba(255, 93, 105, .2); background: rgba(255, 93, 105, .05); }
.rd-req.rd-is-unmet > i { color: #f87171; }
.rd-req.rd-is-unmet .rd-req-value { color: #fca5a5; }
/* Requirements folded into a board cell, where the row is the character. */
.rd-board .rd-reqs { gap: 4px; min-width: 210px; }
.rd-board .rd-req { padding: 5px 9px; font-size: 11.5px; }

/* ----------------------------------------------------------------------
   Choice card (Event: New Player Reward package picker).
   A radio the whole card belongs to, so the target is the package rather
   than a 15px circle, and a locked variant for packages not yet earned.
   ---------------------------------------------------------------------- */
.rd-pickgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 12px; }
.rd-pick {
  position: relative;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--rd-border);
  border-radius: 14px;
  background: var(--rd-surface);
  overflow: hidden;
  transition: border-color .16s ease, background .16s ease;
}
.rd-pick:has(input:checked) {
  border-color: rgba(var(--rd-accent-2-rgb), .45);
  background: var(--rd-surface-2);
  box-shadow: inset 0 0 0 1px rgba(var(--rd-accent-2-rgb), .22);
}
.rd-pick:has(input:focus-visible) { outline: 2px solid rgba(var(--rd-accent-2-rgb), .65); outline-offset: 2px; }
.rd-pick-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--rd-border);
  cursor: pointer;
}
.rd-pick-head input[type="radio"] { flex: 0 0 auto; margin: 0; width: 16px; height: 16px; accent-color: var(--rd-accent); }
.rd-pick-head > i { flex: 0 0 auto; color: var(--rd-muted-2); font-size: 14px; }
.rd-pick-head strong { min-width: 0; font-size: 13px; font-weight: 650; overflow-wrap: anywhere; }
.rd-pick-body { padding: 12px 14px; display: grid; gap: 10px; }
.rd-pick-reqs { display: flex; flex-wrap: wrap; gap: 5px; }
.rd-pick-loot { display: grid; gap: 5px; margin: 0; padding: 0; list-style: none; }
.rd-pick-loot li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  padding: 6px 0;
  border-bottom: 1px solid var(--rd-border);
  font-size: 12px;
}
.rd-pick-loot li:last-child { border-bottom: 0; padding-bottom: 0; }
.rd-pick-loot em { display: block; color: var(--rd-muted-2); font-size: 11px; font-style: normal; }
.rd-pick-loot b {
  flex: 0 0 auto;
  color: var(--rd-muted);
  font-family: var(--rd-mono-font), var(--rd-font);
  font-weight: 650;
  font-variant-numeric: tabular-nums;
}
.rd-pick.rd-is-locked { opacity: .62; }
.rd-pick.rd-is-locked .rd-pick-head { cursor: default; color: var(--rd-muted); }

/* ----------------------------------------------------------------------
   Event header strip: status and window, above the page's own controls.
   ---------------------------------------------------------------------- */
.rd-eventbar { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; margin-bottom: 18px; }
.rd-eventbar .rd-pill { padding: 4px 10px; font-size: 10.5px; }

/* ----------------------------------------------------------------------
   Exchange rate readout (Event: Convert Evo Points).
   The arithmetic the player is agreeing to, with the resulting balance
   set apart the same way the guild shop sets apart its total.
   ---------------------------------------------------------------------- */
.rd-ledger {
  display: grid;
  gap: 2px;
  padding: 4px 0;
  border: 1px solid var(--rd-border);
  border-radius: 12px;
  background: var(--rd-surface);
}
.rd-ledger .rd-detail-row { padding: 9px 14px; }
.rd-ledger .rd-detail-total { margin-top: 2px; border-top: 1px solid var(--rd-border); }
.rd-ledger .rd-detail-total .rd-detail-val {
  color: var(--rd-accent-2);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

/* Two-column split for a page that pairs a form with a running summary. */
.rd-split { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; }
@media (min-width: 992px) {
  .rd-split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; }
  .rd-split-wide { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
}

/* Invoice / order reference in a board cell: monospaced so a column of them
   aligns, with the copy button that every other reference in the panel has. */
.rd-board-ref {
  color: var(--rd-muted);
  font-family: var(--rd-mono-font), var(--rd-font);
  font-size: 11.5px;
  letter-spacing: .01em;
  overflow-wrap: anywhere;
}
.rd-board td .rd-copy-btn { margin-left: 6px; vertical-align: middle; }
.rd-board tbody tr:hover .rd-copy-btn { opacity: 1; }

/* Top-up history carries eight columns including a reference and a trigger. */
.rd-board-topups { min-width: 960px; }

/* ----------------------------------------------------------------------
   Top-up package grid and confirm summary (user_webstore_topup.php).
   A package is bought for what it contains, so the art leads and the
   contents read as a priced list rather than as a paragraph of icons.
   ---------------------------------------------------------------------- */
.rd-packgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 268px), 1fr)); gap: 14px; }
.rd-pack {
  display: flex;
  border: 1px solid var(--rd-border);
  border-radius: 14px;
  background: var(--rd-surface);
  overflow: hidden;
  transition: border-color .16s ease, background .16s ease, transform .16s ease;
}
.rd-pack:hover { transform: translateY(-2px); border-color: var(--rd-border-strong); background: var(--rd-surface-2); }
.rd-pack form { display: flex; flex-direction: column; flex: 1 1 auto; margin: 0; }
.rd-pack-art {
  aspect-ratio: 16 / 10;
  display: grid;
  place-items: center;
  padding: 14px;
  border-bottom: 1px solid var(--rd-border);
  background: var(--rd-bg-2);
}
.rd-pack-art img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; border-radius: 8px; }
.rd-pack-copy { flex: 1 1 auto; display: grid; gap: 9px; align-content: start; padding: 13px 14px; }
.rd-pack-copy > strong { font-size: 13.5px; font-weight: 650; line-height: 1.35; overflow-wrap: anywhere; }
.rd-pack-loot { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; }
.rd-pack-loot li {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  line-height: 1.45;
  color: var(--rd-muted);
}
.rd-pack-loot li > i { flex: 0 0 auto; width: 15px; color: var(--rd-muted-2); font-size: 12.5px; text-align: center; }
.rd-pack-loot li > span { min-width: 0; overflow-wrap: anywhere; }
.rd-pack-loot li > b {
  margin-left: auto;
  color: #efece5;
  font-family: var(--rd-mono-font), var(--rd-font);
  font-weight: 650;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.rd-pack-talics { display: inline-flex; gap: 2px; align-items: center; vertical-align: middle; }
.rd-pack-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 11px 14px;
  border-top: 1px solid var(--rd-border);
  background: var(--rd-bg-2);
}

/* The same package, restated on the confirm screen beside the form. */
.rd-pack-summary {
  align-self: start;
  border: 1px solid var(--rd-border);
  border-radius: 14px;
  background: var(--rd-surface);
  overflow: hidden;
}
.rd-pack-summary-head {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--rd-border);
  background: var(--rd-bg-2);
}
.rd-pack-summary-head img { flex: 0 0 auto; width: 64px; height: 64px; object-fit: contain; border-radius: 10px; }
.rd-pack-summary-head > div { min-width: 0; display: grid; gap: 5px; }
.rd-pack-summary-head strong { font-size: 14px; font-weight: 700; line-height: 1.3; overflow-wrap: anywhere; }
.rd-pack-loot-full { padding: 12px 16px; gap: 0; }
.rd-pack-loot-full li { padding: 8px 0; border-bottom: 1px solid var(--rd-border); }
.rd-pack-loot-full li:last-child { border-bottom: 0; }
.rd-pack-summary .rd-field-hint { display: block; padding: 14px 16px; margin: 0; }

/* QRIS code: the payment instrument, so it gets room rather than a cell. */
.rd-qris { margin: 18px 0 0; text-align: center; }
.rd-qris img {
  width: min(320px, 100%);
  height: auto;
  padding: 10px;
  border: 1px solid var(--rd-border);
  border-radius: 12px;
  background: #fff;
}
.rd-qris figcaption { margin-top: 9px; color: var(--rd-muted); font-size: 11.5px; line-height: 1.5; }

/* ----------------------------------------------------------------------
   Payment method picker. Each option changes what happens after the
   purchase, so each one says so instead of being one line in a <select>.
   ---------------------------------------------------------------------- */
.rd-methods { display: grid; gap: 8px; }
.rd-method {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  padding: 11px 13px;
  border: 1px solid var(--rd-border);
  border-radius: 12px;
  background: var(--rd-surface);
  cursor: pointer;
  transition: border-color .14s ease, background .14s ease;
}
.rd-method:hover { border-color: var(--rd-border-strong); background: var(--rd-surface-2); }
.rd-method:has(input:checked) {
  border-color: rgba(var(--rd-accent-2-rgb), .45);
  background: var(--rd-surface-2);
  box-shadow: inset 0 0 0 1px rgba(var(--rd-accent-2-rgb), .2);
}
.rd-method:has(input:focus-visible) { outline: 2px solid rgba(var(--rd-accent-2-rgb), .65); outline-offset: 2px; }
.rd-method input[type="radio"] { flex: 0 0 auto; margin: 2px 0 0; width: 16px; height: 16px; accent-color: var(--rd-accent); }
.rd-method > i { flex: 0 0 auto; margin-top: 1px; color: var(--rd-muted-2); font-size: 16px; }
.rd-method:has(input:checked) > i { color: var(--rd-accent-2); }
.rd-method > span { min-width: 0; display: grid; gap: 2px; }
.rd-method strong { font-size: 12.5px; font-weight: 650; }
.rd-method em { color: var(--rd-muted); font-size: 11.5px; font-style: normal; line-height: 1.5; }

/* "optional" marker on a label, so a required field is the default reading. */
.rd-field-optional {
  margin-left: 5px;
  color: var(--rd-muted-2);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
}

/* ----------------------------------------------------------------------
   Full-page confirmation over the panel (top-up submitted).
   ---------------------------------------------------------------------- */
.rd-overlay {
  position: fixed;
  inset: 0;
  z-index: 2147483000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(5, 5, 5, .78);
  overflow: auto;
}
.rd-overlay-card {
  width: min(560px, 100%);
  max-height: calc(100vh - 40px);
  padding: 30px 30px 26px;
  border: 1px solid var(--rd-border);
  border-radius: var(--rd-radius);
  background: var(--rd-surface);
  box-shadow: 0 34px 96px rgba(0, 0, 0, .6);
  text-align: center;
  overflow: auto;
}
.rd-overlay-card h2 {
  margin: 16px 0 8px;
  font-size: 21px;
  font-weight: 700;
  letter-spacing: -.015em;
}
.rd-overlay-card > p { max-width: 42ch; margin: 0 auto 20px; color: var(--rd-muted); font-size: 13px; line-height: 1.65; }
.rd-overlay-card .rd-ledger { margin-bottom: 22px; text-align: left; }
.rd-topup-receipt .rd-detail-val { font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }

@media (max-width: 560px) {
  .rd-overlay-card { padding: 24px 18px 20px; }
}

/* Eligibility boards (daily reward, event raffle): a character per row with
   its requirement list folded into a cell, so the row grows with the number
   of gates rather than adding a column for each one. */
.rd-board-eligible { min-width: 720px; }
.rd-board-eligible td { vertical-align: top; padding-top: 12px; padding-bottom: 12px; }
.rd-board-eligible td:first-child,
.rd-board-eligible td:last-child { vertical-align: middle; }
.rd-board-eligible form { margin: 0; }

/* Evo point conversion log. */
.rd-board-evolog { min-width: 820px; }

/* ----------------------------------------------------------------------
   Rebirth Manager boards (admin_rebirth.php).
   ---------------------------------------------------------------------- */
.rd-board-packages { min-width: 760px; }
.rd-board-rewards { min-width: 560px; }

/* A confirm dialog carries one sentence, so it does not need the full width
   a detail view does. */
.rd-modal-sm { width: min(460px, calc(100vw - 32px)); }
.rd-modal-sm .rd-modal-body p { margin: 0; color: var(--rd-muted); font-size: 13px; line-height: 1.65; }

/* ----------------------------------------------------------------------
   Server statistics (user_statistic_server.php).
   ---------------------------------------------------------------------- */
.rd-statgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 270px), 1fr)); gap: 16px; }
.rd-statgrid .rd-panel { margin: 0; }
.rd-statgrid .rd-panel-head { padding-bottom: 12px; }
.rd-statgrid .rd-detail-val { font-variant-numeric: tabular-nums; }

/* A figure in one of these columns is never allowed to break mid-number.
   .rd-detail-val carries overflow-wrap:anywhere so long paths and serials
   can wrap; in a 250px stat column that same rule tore "121,557,538,079"
   into four lines of loose digits. Paths do not live in this grid. */
.rd-statgrid .rd-detail-val { overflow-wrap: normal; word-break: keep-all; }

/* ---- Part-to-whole readout ----
   One faction against the total it is a share of: the sigil and the name
   carry identity, the bar carries the proportion, the figure carries the
   amount. Faction colour is never the only channel - Bellato blue and Cora
   purple are 1.3 Delta E apart under deuteranopia. */
.rd-shares { display: grid; gap: 14px; }
.rd-share {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    "name  value"
    "meter pct";
  align-items: center;
  column-gap: 12px;
  row-gap: 7px;
}
.rd-share-name {
  grid-area: name;
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  color: var(--rd-muted);
  font-size: 12px;
  font-weight: 600;
}
.rd-share-name img { flex: 0 0 auto; width: 18px; height: 18px; object-fit: contain; }
.rd-share-name i { color: #727272; font-size: 13px; }
.rd-share-val {
  grid-area: value;
  color: #efece5;
  font-size: 14px;
  font-weight: 650;
  letter-spacing: -.01em;
  white-space: nowrap;
}
.rd-share .rd-meter { grid-area: meter; min-width: 0; }
.rd-share-pct {
  grid-area: pct;
  min-width: 42px;
  color: var(--rd-muted-2);
  font-size: 11px;
  font-weight: 700;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* The total the shares above are measured against. It has no bar of its own
   - it is the whole - so it is set apart by a rule instead. */
.rd-share.rd-is-total {
  grid-template-areas: "name value";
  margin-top: 2px;
  padding-top: 12px;
  border-top: 1px solid var(--rd-border);
}
.rd-share.rd-is-total .rd-share-name { color: var(--rd-muted-2); font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.rd-share.rd-is-total .rd-share-val { color: var(--rd-text); font-weight: 700; }

/* Faction meters: the track is a dim step of the same hue as the fill, so
   the bar reads as one object rather than a colour sitting on grey. */
.rd-meter.rd-race-bellato  { background: rgba(96, 165, 250, .14); }
.rd-meter.rd-race-bellato  > span { background: #60a5fa; }
.rd-meter.rd-race-cora     { background: rgba(192, 132, 252, .14); }
.rd-meter.rd-race-cora     > span { background: #c084fc; }
/* Accretia's silver is the lightest of the three. At full strength it was
   the loudest bar on the panel regardless of how small its share was, so
   the fill is stepped down to sit at the same visual weight as the others. */
.rd-meter.rd-race-accretia { background: rgba(203, 213, 225, .13); }
.rd-meter.rd-race-accretia > span { background: #9fadc0; }

/* A chart needs room to breathe and its own surface, or the axis labels sit on
   the panel edge. */
.rd-chart {
  padding: 8px 4px;
  border: 1px solid var(--rd-border);
  border-radius: 12px;
  background: var(--rd-surface);
}
.rd-chart + .rd-chart { margin-top: 16px; }

/* ----------------------------------------------------------------------
   Council (user_councillist.php).

   Three faction boards, nine seats each. The page used to carry its own
   stylesheet ("RFCore Dark Neon V3") with its own greys and badge colours;
   these rules put it on the panel's surfaces and its faction tints.

   The board is laid out as the org chart it is: the Archon across the top,
   then four Left/Right wings. That replaced a flat 3-across grid in which
   the Archon got the same box as a support seat and the full role name was
   repeated on all eight lower tiles - where it wrapped to two lines and
   left the guild name nothing but an ellipsis.

   Faction colour is never the only channel here. Bellato blue and Cora
   purple sit 1.3 Delta E apart under deuteranopia (they are the game's own
   colours and stay), so every faction is also named in text and carries its
   own sigil. Nothing on this page is identified by hue alone.
   ---------------------------------------------------------------------- */
.rd-council-columns { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
@media (min-width: 1200px) {
  .rd-council-columns { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.rd-council {
  border: 1px solid var(--rd-border);
  border-radius: 14px;
  background: var(--rd-surface);
  overflow: hidden;
}

/* The one authored entrance on this page: the three boards arrive in
   faction order rather than every tile animating on its own. */
@media (prefers-reduced-motion: no-preference) {
  .rd-council { animation: rd-council-in .42s cubic-bezier(.16, 1, .3, 1) both; }
  .rd-council:nth-child(2) { animation-delay: .06s; }
  .rd-council:nth-child(3) { animation-delay: .12s; }
}
@keyframes rd-council-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}

.rd-council-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 14px;
  border-bottom: 1px solid var(--rd-border);
  background: var(--rd-bg-2);
}
.rd-council-head img { flex: 0 0 auto; width: 26px; height: 26px; object-fit: contain; }
.rd-council-head h3 {
  margin: 0;
  min-width: 0;
  font-size: 13.5px;
  font-weight: 700;
  letter-spacing: .02em;
}

/* How many of the nine seats are actually filled. Pushed to the far end so
   it reads as a status on the board, not part of the faction name. */
.rd-council-held {
  flex: 0 0 auto;
  margin-left: auto;
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid var(--rd-border);
  background: rgba(255, 255, 255, .03);
  color: var(--rd-muted);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .04em;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.rd-council-held.rd-is-full { color: #86efac; border-color: rgba(53, 208, 127, .28); background: rgba(53, 208, 127, .1); }

/* The faction reads from the same tints as .rd-racechip and .rd-board-name. */
.rd-council.rd-race-bellato  .rd-council-head { background: rgba(96, 165, 250, .12); border-bottom-color: rgba(96, 165, 250, .3); }
.rd-council.rd-race-bellato  .rd-council-head h3 { color: #bfdbfe; }
.rd-council.rd-race-cora     .rd-council-head { background: rgba(192, 132, 252, .12); border-bottom-color: rgba(192, 132, 252, .3); }
.rd-council.rd-race-cora     .rd-council-head h3 { color: #e9d5ff; }
.rd-council.rd-race-accretia .rd-council-head { background: rgba(148, 163, 184, .14); border-bottom-color: rgba(148, 163, 184, .32); }
.rd-council.rd-race-accretia .rd-council-head h3 { color: #e2e8f0; }

.rd-council-body { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; padding: 12px; }

/* Between phone width and the three-across breakpoint a board owns the full
   panel, so the wings pair up two to a row instead of running one long
   column. The Archon keeps the full width at every size. */
@media (min-width: 720px) and (max-width: 1199.98px) {
  .rd-council-body { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 14px; }
  .rd-council-body > .rd-council-tile.rd-is-archon { grid-column: 1 / -1; }
}

/* ---- Wing (Consul / Strike / Defense / Support) ---- */
.rd-council-wing { min-width: 0; }
.rd-council-wingname {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 2px 0 6px;
  color: var(--rd-muted-2);
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.rd-council-wingname > i { flex: 0 0 auto; font-size: 11px; }
/* A hairline carrying the label across the board, so the two seats under it
   read as one pair rather than two loose tiles. */
.rd-council-wingname::after {
  content: "";
  flex: 1 1 auto;
  height: 1px;
  background: linear-gradient(90deg, var(--rd-border), transparent);
}
.rd-council-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }

/* ---- Seat ---- */
.rd-council-tile {
  display: grid;
  gap: 5px;
  align-content: start;
  min-width: 0;
  padding: 10px 11px;
  border: 1px solid var(--rd-border);
  border-radius: 12px;
  background: var(--rd-bg-2);
  transition: border-color .18s ease, background .18s ease, transform .18s ease;
}
@media (prefers-reduced-motion: no-preference) {
  .rd-council-tile:hover { transform: translateY(-1px); }
}
.rd-council-tile:hover { background: var(--rd-surface-2); border-color: rgba(255, 255, 255, .13); }
.rd-council.rd-race-bellato  .rd-council-tile:hover { border-color: rgba(96, 165, 250, .34); }
.rd-council.rd-race-cora     .rd-council-tile:hover { border-color: rgba(192, 132, 252, .34); }
.rd-council.rd-race-accretia .rd-council-tile:hover { border-color: rgba(148, 163, 184, .38); }

/* Which side of the wing this seat is. The wing name is on the divider
   above, so the tile only has to say Left or Right. */
.rd-council-side {
  color: var(--rd-muted-2);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  line-height: 1.2;
}

.rd-council-name {
  margin: 0;
  min-width: 0;
  font-size: 14px;
  font-weight: 650;
  line-height: 1.25;
  letter-spacing: -.01em;
}
.rd-council-name a { color: var(--rd-text); text-decoration: none; overflow-wrap: anywhere; }
.rd-council-name a:hover { color: var(--rd-accent-2); }
.rd-council-name a:focus-visible {
  outline: 2px solid rgba(var(--rd-accent-2-rgb), .65);
  outline-offset: 3px;
  border-radius: 4px;
}

.rd-council-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  color: var(--rd-muted);
  font-size: 11px;
  line-height: 1.4;
}
.rd-council-meta > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rd-council-ico { flex: 0 0 auto; width: 20px; height: 20px; border-radius: 3px; object-fit: cover; }
.rd-council-none { color: var(--rd-muted-2); font-style: italic; }

.rd-council-emblem { position: relative; flex: 0 0 auto; width: 20px; height: 20px; display: inline-block; }
.rd-council-emblem-back { display: block; width: 20px; height: 20px; border-radius: 3px; overflow: hidden; }
.rd-council-emblem-back img { display: block; width: 100%; height: 100%; }
.rd-council-emblem-mark { position: absolute; inset: 0; display: block; }

/* ---- Kills / deaths ----
   The two figures used to be bare numbers in a green and a red pill with
   nothing saying which was which. They are labelled now, and the ratio they
   get compared on is printed rather than left to the reader's arithmetic. */
.rd-council-kd { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; margin-top: 3px; }
.rd-kd-stat {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  padding: 2px 7px;
  border-radius: 6px;
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}
.rd-kd-stat.rd-is-kill  { color: #86efac; background: rgba(53, 208, 127, .12); }
.rd-kd-stat.rd-is-death { color: #fca5a5; background: rgba(239, 68, 68, .1); }
.rd-kd-label { font-size: 8.5px; font-weight: 800; letter-spacing: .08em; opacity: .8; }
.rd-kd-num { font-weight: 700; }
.rd-kd-ratio {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  margin-left: auto;
  color: var(--rd-muted);
  font-size: 11px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.rd-kd-ratio .rd-kd-label { color: var(--rd-muted-2); }

/* ---- The Archon ----
   The one seat that outranks the other eight, so it is given the full width
   of the board and its own scale rather than a tinted corner. */
.rd-council-tile.rd-is-archon {
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    "crown crown"
    "name  name"
    "class kd"
    "guild kd";
  align-items: center;
  column-gap: 14px;
  padding: 12px 14px 13px;
  border-color: rgba(251, 191, 36, .34);
  background:
    linear-gradient(180deg, rgba(251, 191, 36, .1), rgba(251, 191, 36, .035));
}
.rd-council-tile.rd-is-archon:hover { border-color: rgba(251, 191, 36, .55); background: linear-gradient(180deg, rgba(251, 191, 36, .15), rgba(251, 191, 36, .05)); }
.rd-council-tile.rd-is-archon .rd-council-crown { grid-area: crown; }
.rd-council-tile.rd-is-archon .rd-council-name  { grid-area: name; font-size: 17px; font-weight: 700; letter-spacing: -.02em; }
.rd-council-tile.rd-is-archon .rd-council-meta.rd-is-class { grid-area: class; }
.rd-council-tile.rd-is-archon .rd-council-meta.rd-is-guild { grid-area: guild; }
.rd-council-tile.rd-is-archon .rd-council-kd { grid-area: kd; margin-top: 0; justify-content: flex-end; }
.rd-council-tile.rd-is-archon .rd-kd-ratio { margin-left: 2px; }

.rd-council-crown {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  width: -moz-fit-content;
  width: fit-content;
  color: #fbbf24;
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.rd-council-crown > i { font-size: 12px; }

/* ---- Vacant seat ----
   An unfilled seat is information, so it is drawn as a real empty state
   rather than a tile containing a dash. */
.rd-council-tile.rd-is-empty {
  border-style: dashed;
  border-color: rgba(255, 255, 255, .1);
  background: rgba(255, 255, 255, .012);
}
.rd-council-tile.rd-is-empty:hover { transform: none; background: rgba(255, 255, 255, .025); }
.rd-council-tile.rd-is-archon.rd-is-empty {
  border-color: rgba(251, 191, 36, .22);
  background: rgba(251, 191, 36, .025);
  grid-template-areas: "crown crown" "name name" "hint hint";
}
.rd-council-tile.rd-is-archon.rd-is-empty .rd-council-vacanthint { grid-area: hint; }
.rd-council-name.rd-is-vacant {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--rd-muted-2);
  font-size: 13px;
  font-weight: 600;
  font-style: normal;
}
.rd-council-name.rd-is-vacant > i { font-size: 12px; opacity: .7; }
.rd-council-vacanthint {
  margin: 0;
  color: #646464;
  font-size: 10.5px;
  line-height: 1.45;
}

/* Boss timers, one board per zone behind the segmented zone picker. */
.rd-board-boss { min-width: 460px; }
.rd-board-boss + * { margin-top: 0; }
.rd-seg + [role="tabpanel"] { margin-top: 16px; }

/* Ban list: account, window, who and why. */
.rd-board-bans { min-width: 880px; }
.rd-board-bans .rd-board-name { min-width: 200px; }

/* ======================================================================
   STAFF TOOLS - Auction Manager and Database Tools
   ----------------------------------------------------------------------
   Dense operator screens: narrow down a scope, read how many rows it
   covers, run something destructive, then read the table of what changed.
   They were the last pages still drawing Bootstrap cards, alerts and
   table-light, which paint a white surface and then inherit the panel's
   light text - legible on nothing.

   Everything here resolves through the accent tokens so the Theme
   Designer reaches it, with one deliberate exception: a destructive
   control stays red whatever the accent is.
   ====================================================================== */

/* Destructive CTA. Only the frame, fill and ink change - the shape,
   motion and sheen are inherited, so it reads as the same family of
   button that happens to be dangerous. */
.rd-cta-danger {
  --rd-cta-frame: rgba(239, 68, 68, .42);
  --rd-cta-fill: linear-gradient(135deg, #f05563, #cf2231 54%, #991b1b);
  --rd-cta-ink: #fff1f2;
  --rd-cta-sheen: rgba(255, 210, 214, .3);
  box-shadow: 0 14px 30px rgba(180, 25, 40, .3);
}
.rd-cta-danger:hover { box-shadow: 0 22px 44px rgba(180, 25, 40, .42); }

/* The stat row is a fixed four columns; a tool that has two figures or
   five needs them to divide the width evenly instead. */
.rd-stat-grid.rd-is-auto { grid-template-columns: repeat(auto-fit, minmax(min(100%, 170px), 1fr)); }

/* ---- Filter bar ------------------------------------------------------
   Labelled controls over one surface, wrapping to as many rows as the
   width allows rather than being pinned to a 12-column grid. */
.rd-filters {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 12px;
  margin-bottom: 18px;
  padding: 15px 16px;
  background: var(--rd-surface);
  border: 1px solid var(--rd-border);
  border-radius: var(--rd-radius-sm);
}
.rd-filters-field { flex: 1 1 200px; min-width: 0; display: grid; gap: 6px; }
.rd-filters-field.rd-is-wide { flex: 2 1 300px; }
.rd-filters-field.rd-is-tight { flex: 0 1 128px; }
.rd-filters-field > label {
  color: var(--rd-muted-2);
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.rd-content .rd-filters .form-control,
.rd-content .rd-filters .form-select {
  min-height: 40px;
  padding: 8px 12px !important;
  border-radius: 10px !important;
  font-size: 12.5px;
}
/* A field wrapped in .rd-input carries a leading glyph, so it needs a gutter
   for it. The compact padding above is set on .form-control at the same
   specificity as the 43px gutter from ".rd-content .rd-input .form-control",
   so it lands later and wins, and the glyph ends up sitting on the text.
   Restate the gutter here, sized for the 40px filter field the way
   .rd-board-search sizes it for the 40px toolbar field. */
.rd-content .rd-filters .rd-input .form-control,
.rd-content .rd-filters .rd-input .form-select {
  padding-left: 38px !important;
}
.rd-filters .rd-input > i { left: 13px; font-size: 14px; }
/* Bootstrap's .form-control sets appearance:none, which strips a <select>'s
   native arrow without putting anything back, so a select styled as a
   .form-control reads as a plain text box. Restate the .form-select chevron
   in the app's own muted ink, and reserve the room it sits in. */
.rd-content .rd-filters select.form-control,
.rd-content .rd-filters .form-select {
  padding-right: 34px !important;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%236f829d' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 11px 8px;
}
.rd-filters-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-left: auto; }
.rd-filters-note { flex: 1 0 100%; margin: 0; color: var(--rd-muted); font-size: 11.5px; line-height: 1.55; }

/* ---- Checkboxes ------------------------------------------------------ */
.rd-checks { display: grid; gap: 9px; }
.rd-check {
  display: inline-flex;
  align-items: flex-start;
  gap: 9px;
  color: var(--rd-muted);
  font-size: 12.5px;
  line-height: 1.4;
  cursor: pointer;
}
.rd-check input[type="checkbox"] {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  margin-top: 1px;
  accent-color: var(--rd-accent);
  cursor: pointer;
}
.rd-check:hover { color: var(--rd-text); }
.rd-check.rd-is-danger { color: #fca5a5; }
.rd-check.rd-is-danger input[type="checkbox"] { accent-color: #ef4444; }

/* ---- Danger zone -----------------------------------------------------
   Type-to-confirm plus the button it arms. Held apart from the filters
   above it so a bulk write is never one stray Enter away. */
.rd-dangerzone {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 14px;
  margin-bottom: 18px;
  padding: 15px 16px;
  background: linear-gradient(135deg, rgba(239, 68, 68, .07), rgba(239, 68, 68, .02));
  border: 1px solid rgba(239, 68, 68, .22);
  border-left: 3px solid #ef4444;
  border-radius: var(--rd-radius-sm);
}
.rd-dangerzone .rd-filters-field > label { color: #fca5a5; }
.rd-dangerzone-note { flex: 1 0 100%; margin: 0; color: var(--rd-muted); font-size: 11.5px; line-height: 1.55; }
.rd-dangerzone .rd-filters-field.rd-is-tight { flex: 0 1 190px; }
.rd-content .rd-dangerzone .form-control { letter-spacing: .12em; text-transform: uppercase; }

/* ---- Section heading inside a panel body ----------------------------- */
.rd-subhead {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 10px;
  margin: 26px 0 12px;
  color: var(--rd-text);
  font-family: var(--rd-display-font);
  font-size: 14px;
  font-weight: 650;
  letter-spacing: -.01em;
}
.rd-subhead:first-child { margin-top: 0; }
.rd-subhead small {
  color: var(--rd-muted);
  font-family: var(--rd-font);
  font-size: 11.5px;
  font-weight: 400;
  letter-spacing: 0;
}

/* ---- Fact grid -------------------------------------------------------
   One record's fields, read down rather than across: a label over its
   value, as many columns as fit. */
.rd-facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr));
  gap: 10px;
}
/* Separate tiles rather than hairline-gapped cells: a record with twelve
   fields almost never fills its last row, and a gap grid left the unfilled
   tail showing as a grey block where a cell should be. */
.rd-fact {
  display: grid;
  gap: 5px;
  padding: 12px 14px;
  background: var(--rd-surface);
  border: 1px solid var(--rd-border);
  border-radius: 10px;
}
.rd-fact-label { color: var(--rd-muted-2); font-size: 10px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.rd-fact-value { color: var(--rd-text); font-size: 13px; font-weight: 600; overflow-wrap: anywhere; }
.rd-fact-value.rd-is-void { color: var(--rd-muted-2); font-weight: 400; }
.rd-fact-value.rd-is-num { font-variant-numeric: tabular-nums; }

/* ---- Board extras ----------------------------------------------------
   Right-aligned money and counts, a failed row, and the row a bulk
   operation is about to hit. */
.rd-board thead th.rd-board-r,
.rd-board td.rd-board-r { text-align: right; font-variant-numeric: tabular-nums; }
.rd-board td.rd-board-r { white-space: nowrap; }
.rd-board tbody tr.rd-is-bad { background: rgba(239, 68, 68, .07); }
.rd-board tbody tr.rd-is-bad:hover { background: rgba(239, 68, 68, .11); }
.rd-board tbody tr.rd-is-bad td { border-color: rgba(239, 68, 68, .22); }
.rd-board tbody tr.rd-is-target { background: rgba(var(--rd-accent-rgb), .09); }
.rd-board tbody tr.rd-is-target:hover { background: rgba(var(--rd-accent-rgb), .13); }
.rd-board tbody tr.rd-is-target td { border-color: rgba(var(--rd-accent-rgb), .24); }
.rd-board-sub { display: block; margin-top: 3px; color: var(--rd-muted-2); font-size: 11px; }
.rd-board-mono { font-family: var(--rd-mono-font), var(--rd-font); font-size: 11.5px; letter-spacing: .01em; }
.rd-board-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; }
.rd-board-actions form { display: inline; margin: 0; }

/* Keyed to the widest column set each board actually carries, so a table
   only scrolls sideways when it genuinely cannot fit. */
.rd-board-auction { min-width: 1080px; }
.rd-board-audit { min-width: 1280px; }
.rd-board-uts { min-width: 1040px; }
.rd-board-scope { min-width: 520px; }

/* ---- Shared table helpers inside a board -----------------------------
   gamecp_table_sort_header() and gamecp_table_per_page_form() are used by
   sixteen pages, so they keep emitting Bootstrap markup. These rules give
   that markup the board's voice rather than forking the helpers. */
.rd-board thead th > a { color: inherit; text-decoration: none; }
.rd-board thead th > a:hover { color: var(--rd-accent-2); }
.rd-board thead th[aria-sort="ascending"] > a,
.rd-board thead th[aria-sort="descending"] > a { color: var(--rd-accent-2); }
.rd-board thead th > a small { opacity: .5; font-size: 9px; }

.rd-perpage { align-items: center; }
.rd-perpage label { margin: 0; color: var(--rd-muted-2); font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.rd-content .rd-perpage .form-select {
  width: auto;
  min-height: 36px;
  padding: 5px 30px 5px 11px !important;
  border-radius: 9px !important;
  font-size: 12px;
}

/* ---- Event Manager and Logs -----------------------------------------
   Same components as the staff tools above; these only name the widths
   each board needs and add the two field shapes the event forms use. */
.rd-board-events { min-width: 900px; }
.rd-board-claims { min-width: 980px; }
.rd-board-eventlog { min-width: 760px; }
.rd-board-packages { min-width: 880px; }
.rd-board-pkgitems { min-width: 780px; }
.rd-board-picker { min-width: 560px; }
.rd-board-log { min-width: 820px; }
.rd-board-logwide { min-width: 1100px; }
.rd-board-mail { min-width: 1180px; }

/* A field that takes the whole filter row - a master switch, or a control
   cluster that would be unreadable squeezed into a column. */
.rd-filters-field.rd-is-full { flex: 1 0 100%; }

/* A fold that opens a section rather than closing one off: no rule above
   it, because the panel heading is already the separator. */
.rd-fold.rd-is-first { margin-top: 0; padding-top: 0; border-top: 0; }

/* ---- Pills ----------------------------------------------------------- */
.rd-pill-warn { color: #fcd34d; background: rgba(255, 189, 74, .12); border: 1px solid rgba(255, 189, 74, .24); }
.rd-pill-info { color: var(--rd-info); background: rgba(var(--rd-accent-rgb), .10); border: 1px solid rgba(var(--rd-accent-rgb), .20); }

/* ---- POST-driven pager ----------------------------------------------
   The Database Tools cannot page with links: every control is a submit
   button inside one form that carries the page's other state with it.
   That is why this is a bar of fields and buttons and not a .pagination. */
.rd-toolpager {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 10px;
  margin-bottom: 12px;
  padding: 12px 14px;
  background: var(--rd-surface);
  border: 1px solid var(--rd-border);
  border-radius: var(--rd-radius-sm);
}
.rd-toolpager-nav { display: inline-flex; gap: 6px; }
.rd-toolpager-nav button {
  display: grid;
  place-items: center;
  min-width: 40px;
  min-height: 40px;
  color: var(--rd-muted) !important;
  background: var(--rd-surface-2) !important;
  border: 1px solid var(--rd-border) !important;
  border-radius: 10px !important;
  cursor: pointer;
}
.rd-toolpager-nav button:hover:not(:disabled) {
  color: var(--rd-text) !important;
  background: var(--rd-surface-3) !important;
  border-color: var(--rd-border-strong) !important;
}
.rd-toolpager-nav button:disabled { opacity: .35; cursor: not-allowed; }
.rd-toolpager-count {
  margin-left: auto;
  color: var(--rd-muted);
  font-size: 11.5px;
  text-align: right;
  white-space: nowrap;
}
.rd-toolpager-count strong { color: var(--rd-text); font-variant-numeric: tabular-nums; }
.rd-toolpager-count span { display: block; font-size: 10.5px; color: var(--rd-muted-2); }

/* ---- Anything worth folding away out of the operator's way ----------- */
.rd-fold { margin-top: 18px; border-top: 1px solid var(--rd-border); padding-top: 14px; }
.rd-fold > summary {
  color: var(--rd-muted);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  list-style: none;
}
.rd-fold > summary::-webkit-details-marker { display: none; }
.rd-fold > summary::before { content: "\F285"; font-family: "bootstrap-icons"; margin-right: 7px; font-size: 11px; }
.rd-fold[open] > summary::before { content: "\F282"; }
.rd-fold > summary:hover { color: var(--rd-text); }
.rd-fold > *:not(summary) { margin-top: 14px; }

@media (max-width: 640px) {
  .rd-filters, .rd-dangerzone, .rd-toolpager { padding: 13px; }
  .rd-filters-field, .rd-filters-field.rd-is-wide, .rd-filters-field.rd-is-tight { flex: 1 1 100%; }
  .rd-filters-actions { margin-left: 0; width: 100%; }
  .rd-filters-actions .rd-cta { flex: 1 1 auto; }
  .rd-toolpager-count { margin-left: 0; width: 100%; text-align: left; }
}


/* ==========================================================
   REFERRAL MANAGEMENT AND SERVER ADMIN
   The same components as the staff tools above. What is new
   here is editing inside a board, the row actions that go
   with it, and the widths each of these tables needs.
   ========================================================== */

/* The failure tone the stat badge was missing - a figure that is a problem
   rather than merely a caution. */
.rd-stat-icon.rd-is-bad { color: #fca5a5; background: rgba(239, 68, 68, .1); border-color: rgba(239, 68, 68, .2); }

/* ---- Row actions -----------------------------------------------------
   .rd-icon-btn is sized for the 38px topbar. Inside a board it sits in a
   10px-padded cell beside 36px fields, so it is re-sized here rather than
   making every row taller than its content. */
.rd-board-actions .rd-icon-btn,
.rd-actions-inline .rd-icon-btn {
  width: 34px;
  height: 34px;
  border-radius: 9px !important;
  font-size: 14px;
}
.rd-icon-btn.rd-is-good:hover {
  color: #86efac !important;
  background: rgba(53, 208, 127, .12) !important;
  border-color: rgba(53, 208, 127, .3) !important;
}
.rd-icon-btn.rd-is-danger:hover {
  color: #fca5a5 !important;
  background: rgba(239, 68, 68, .12) !important;
  border-color: rgba(239, 68, 68, .32) !important;
}
.rd-icon-btn:focus-visible { outline: 2px solid rgba(var(--rd-accent-2-rgb), .65); outline-offset: 2px; }

/* ---- Editing inside a board -----------------------------------------
   A saved row is edited where it is read. The controls have to be quieter
   than a filter bar's - they sit in every cell of every row - so they are
   36px, flush with the row's text, and only light up on focus. */
.rd-content .rd-board .form-control,
.rd-content .rd-board .form-select {
  min-height: 36px;
  padding: 7px 10px !important;
  border-radius: 9px !important;
  font-size: 12.5px;
  background: rgba(10, 10, 10, .5) !important;
}
.rd-content .rd-board .form-select {
  padding-right: 30px !important;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%236f829d' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e") !important;
  background-repeat: no-repeat !important;
  background-position: right 10px center !important;
  background-size: 10px 7px !important;
}
.rd-content .rd-board td.rd-board-r .form-control { text-align: right; }

/* The per-row form that the row's controls point at with form="...". It
   holds nothing but hidden fields, so it never needs a box. */
.rd-rowform { display: none; }

/* ---- Board widths ----------------------------------------------------
   Keyed to the widest column set each board actually carries, so a table
   only scrolls sideways when it genuinely cannot fit. */
.rd-board-tiers { min-width: 760px; }
.rd-board-earned { min-width: 1080px; }
.rd-board-convert { min-width: 1120px; }
.rd-board-payout { min-width: 1180px; }

/* The one column in a board that is prose rather than a value: it wraps,
   and it is the column that gives up its width when the table is squeezed. */
.rd-board td.rd-board-detail {
  min-width: 220px;
  white-space: normal;
  color: var(--rd-muted);
  line-height: 1.55;
}

/* ---- A balance before and after ---------------------------------------
   Two numbers and the move between them. Read as one fact, so the arrow
   carries the meaning and the numerals line up under each other when a
   row shows more than one balance. */
.rd-board-ledger { min-width: 210px; }
.rd-ledger-move {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) 12px minmax(0, 1fr);
  align-items: baseline;
  gap: 4px 7px;
  font-size: 11.5px;
}
.rd-ledger-move + .rd-ledger-move { margin-top: 5px; }
.rd-ledger-move small {
  grid-column: 1;
  color: var(--rd-muted-2);
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.rd-ledger-move b {
  color: var(--rd-text);
  font-family: var(--rd-mono-font), var(--rd-font);
  font-weight: 650;
  font-variant-numeric: tabular-nums;
  text-align: right;
}
.rd-ledger-move i { color: var(--rd-muted-2); font-size: 10px; }

/* ---- Who a payout went to --------------------------------------------
   The method, then the name, then the account it landed in: three lines
   that are checked in that order when a payment is queried. */
.rd-board-payee { min-width: 210px; line-height: 1.45; }
.rd-board-payee strong { display: block; margin-top: 3px; font-size: 12.5px; font-weight: 650; }
.rd-board-method {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--rd-accent-2);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.rd-board-method i { font-size: 12px; }
.rd-board-partners { min-width: 1040px; }

/* The copy inside a catlist item, when the item wraps its text in a span so
   the icon stays on its own flex line. */
.rd-catlist-item > span { min-width: 0; }

/* A field that holds an identifier rather than prose: typed in any case,
   stored and shown in one. */
.rd-content .rd-is-code {
  font-family: var(--rd-mono-font), var(--rd-font);
  letter-spacing: .06em;
  text-transform: uppercase;
}

/* ---- A filter bar whose fields carry hints ---------------------------
   .rd-filters bottom-aligns its children so the button lines up with the
   controls. A per-field hint sits below its control and pushes that
   control up, so a bar that mixes hinted and unhinted fields staggers.
   Where hints are present, align from the top instead - every label is
   one line, so the controls land on one line too - and drop the button by
   exactly a label plus its gap. Scoped with :has() so the twenty filter
   bars already shipped are untouched, and so a browser without :has()
   simply keeps today's behaviour. */
.rd-filters:has(.rd-field-hint),
.rd-dangerzone:has(.rd-field-hint) { align-items: flex-start; }
.rd-filters:has(.rd-field-hint) .rd-filters-field,
.rd-dangerzone:has(.rd-field-hint) .rd-filters-field { align-self: stretch; grid-template-rows: auto auto 1fr; }
.rd-filters:has(.rd-field-hint) .rd-filters-actions,
.rd-dangerzone:has(.rd-field-hint) .rd-filters-actions { padding-top: 21px; }

/* A number edited inside a board is a figure, not a text field: it is as
   wide as the value it holds and it hugs the column it is compared down. */
.rd-content .rd-board td.rd-board-r .form-control { max-width: 150px; margin-left: auto; }
.rd-content .rd-board td .form-control[type="text"] { max-width: 280px; }

@media (max-width: 640px) {
  .rd-filters:has(.rd-field-hint) .rd-filters-actions,
  .rd-dangerzone:has(.rd-field-hint) .rd-filters-actions { padding-top: 0; }
  .rd-content .rd-board td.rd-board-r .form-control,
  .rd-content .rd-board td .form-control[type="text"] { max-width: none; }
}

/* ---- A number that carries its unit ---------------------------------
   The unit sits inside the field, so a column of percentages is one
   column of figures rather than a figure and a bolted-on box. */
.rd-unit { position: relative; display: block; }
.rd-content .rd-unit > .form-control { padding-right: 34px !important; text-align: right; }
/* A word-length unit needs more of the field than a % sign does. */
.rd-content .rd-unit-wide > .form-control { padding-right: 52px !important; }
.rd-unit-mark {
  position: absolute;
  top: 50%;
  right: 12px;
  transform: translateY(-50%);
  color: var(--rd-muted-2);
  font-size: 11px;
  font-weight: 700;
  pointer-events: none;
}
/* The spinner would land under the unit, and these are typed not stepped. */
.rd-unit > .form-control::-webkit-outer-spin-button,
.rd-unit > .form-control::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.rd-unit > .form-control[type="number"] { -moz-appearance: textfield; appearance: textfield; }

/* ---- A running total under a set of fields --------------------------
   The five metric weights have to add up to 100, and the old page said so
   in a static line. This one counts. */
.rd-total {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0;
  color: var(--rd-muted);
  font-size: 11.5px;
}
.rd-total b {
  color: var(--rd-text);
  font-family: var(--rd-mono-font), var(--rd-font);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}
.rd-total.rd-is-met { color: #86efac; }
.rd-total.rd-is-met b { color: #86efac; }
.rd-total.rd-is-unmet { color: #fcd34d; }
.rd-total.rd-is-unmet b { color: #fcd34d; }
.rd-board-brackets { min-width: 880px; }

/* The blank row at the foot of an editable board, where the next record is
   typed. Set apart from the saved rows above it without becoming a second
   form: it is the same row, waiting. */
.rd-board tbody tr.rd-is-first { background: rgba(var(--rd-accent-rgb), .045); }
.rd-board tbody tr.rd-is-first td { border-style: dashed; border-color: rgba(var(--rd-accent-2-rgb), .22); }
.rd-board tbody tr.rd-is-first:hover { background: rgba(var(--rd-accent-rgb), .075); }

/* ---- One record, opened to be worked on ------------------------------
   The overrides page is a list of enrolled guilds, each with four figures
   and three small forms. As a card per guild it was a wall; as a row that
   opens, the list stays readable and the guild being changed is the only
   one showing its controls. */
.rd-record {
  margin-bottom: 10px;
  border: 1px solid var(--rd-border);
  border-radius: 14px;
  background: var(--rd-surface);
  overflow: hidden;
}
.rd-record[open] { border-color: var(--rd-border-strong); background: var(--rd-surface-2); }
.rd-record.rd-is-alert { border-color: rgba(239, 68, 68, .28); }
.rd-record.rd-is-alert[open] { border-color: rgba(239, 68, 68, .4); }

.rd-record > summary {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 14px;
  padding: 13px 15px;
  cursor: pointer;
  list-style: none;
}
.rd-record > summary::-webkit-details-marker { display: none; }
.rd-record > summary:hover { background: rgba(255, 255, 255, .022); }
.rd-record > summary:focus-visible { outline: 2px solid rgba(var(--rd-accent-2-rgb), .65); outline-offset: -2px; }

/* The chevron is drawn here rather than by the marker, so it can sit at the
   far end of the row instead of in front of the name. */
.rd-record > summary::after {
  content: "\F282";
  order: 99;
  font-family: "bootstrap-icons";
  font-size: 12px;
  color: var(--rd-muted-2);
  transition: transform .16s ease;
}
.rd-record[open] > summary::after { transform: rotate(180deg); }

.rd-record-name { min-width: 0; display: grid; gap: 3px; margin-right: auto; }
.rd-record-name strong { color: var(--rd-text); font-size: 13.5px; font-weight: 700; letter-spacing: -.01em; }
.rd-record-name small { color: var(--rd-muted-2); font-size: 11px; }
.rd-record-name small code {
  color: var(--rd-accent-2);
  font-family: var(--rd-mono-font), var(--rd-font);
  font-size: 10.5px;
}
.rd-record-rate {
  display: grid;
  gap: 2px;
  text-align: right;
}
.rd-record-rate b {
  color: var(--rd-accent-ink);
  font-family: var(--rd-mono-font), var(--rd-font);
  font-size: 15px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.rd-record-rate span {
  color: var(--rd-muted-2);
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.rd-record-body { padding: 4px 15px 16px; border-top: 1px solid var(--rd-border); }
.rd-record-body > .rd-facts { margin: 14px 0 16px; }
.rd-record-body > .rd-subhead:first-child { margin-top: 14px; }

@media (max-width: 640px) {
  .rd-record > summary { padding: 12px 13px; }
  .rd-record-rate { text-align: left; }
  .rd-record-body { padding: 4px 13px 14px; }
}

/* Two small forms sitting side by side as one row of buttons: each button
   needs its own form to post its own action, and those forms must not
   stack. */
.rd-rowform-inline { display: contents; }

/* A check that explains itself: the reason sits under the label rather
   than in a second column, so a long one wraps without pushing the tick
   and the value apart. */
.rd-req-label small { display: block; margin-top: 3px; color: var(--rd-muted-2); font-size: 11px; line-height: 1.5; }
.rd-notice .rd-facts { margin-top: 10px; }

/* ---- Radios in a check list ------------------------------------------
   The same row as a checkbox: a choice of one rather than a set of many,
   and it reads the same way. The emphasised part of a choice - the figure
   it commits to - is what the eye is choosing between, so it carries the
   weight and the reason rides underneath. */
.rd-check input[type="radio"] {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  margin-top: 1px;
  accent-color: var(--rd-accent);
  cursor: pointer;
}
.rd-check > span { min-width: 0; }
.rd-check b {
  color: var(--rd-accent-ink);
  font-family: var(--rd-mono-font), var(--rd-font);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.rd-check small { display: block; margin-top: 2px; color: var(--rd-muted-2); font-size: 11px; }
.rd-check:has(input:checked) { color: var(--rd-text); }
.rd-check input:focus-visible { outline: 2px solid rgba(var(--rd-accent-2-rgb), .65); outline-offset: 2px; }

/* A note line that is really a control: the check sits flush with the left
   edge of the bar rather than indented under the previous field. */
.rd-filters-note > .rd-check,
.rd-dangerzone-note > .rd-check { margin: 0; }

/* ---- Meter -----------------------------------------------------------
   One value against the 100 it is scored out of. Used in the assessment
   breakdown, where the number and the bar are read together: the bar for
   the shape of the five metrics, the number for the actual figure. */
.rd-meter {
  position: relative;
  display: block;
  height: 8px;
  min-width: 90px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .06);
  overflow: hidden;
}
.rd-meter > span {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--rd-accent), var(--rd-accent-2));
}
.rd-meter.rd-is-good > span { background: linear-gradient(90deg, #22c55e, #4ade80); }
.rd-meter.rd-is-warn > span { background: linear-gradient(90deg, #d97706, #fbbf24); }
.rd-meter.rd-is-bad > span { background: linear-gradient(90deg, #dc2626, #f87171); }

/* A movement between two assessments: the sign carries the meaning, so it
   is always printed. */
.rd-delta { font-variant-numeric: tabular-nums; font-weight: 650; }
.rd-delta.rd-is-good { color: #86efac; }
.rd-delta.rd-is-bad { color: #fca5a5; }

.rd-board-enrolled { min-width: 1120px; }
.rd-board-assess { min-width: 1240px; }
.rd-board-metrics { min-width: 620px; }

/* ---- Guild statistics ------------------------------------------------
   The chart needs a height it can be responsive inside; Chart.js sizes to
   its container and a container with no height collapses to nothing. */
.rd-guild-chart { position: relative; min-height: 340px; height: 44vh; max-height: 520px; padding: 14px 10px 10px; }
.rd-board-guildstats { min-width: 760px; }
.rd-board-members { min-width: 520px; }

/* The search box inside a modal's toolbar: it is the only control there,
   so it takes the row rather than sitting beside an empty right half. */
.rd-modal-body .rd-board-toolbar { margin-bottom: 14px; }
.rd-modal-body .rd-board-search { max-width: none; }
.rd-board-relatedip { min-width: 940px; }

/* A tick box that picks a row, rather than one that answers a question:
   it sits alone in its cell and has to be big enough to hit. */
.rd-board input[type="checkbox"] {
  width: 16px;
  height: 16px;
  accent-color: var(--rd-accent);
  cursor: pointer;
}
.rd-board input[type="checkbox"]:disabled { cursor: not-allowed; opacity: .35; }
.rd-board-convert { min-width: 820px; }
.rd-board-gm { min-width: 900px; }
.rd-board-quests { min-width: 720px; }

/* A quest cell is a name, its flavour line and its identifiers: three lines
   that wrap, in a table whose other columns are single values. */
.rd-board td.rd-board-quest { min-width: 260px; white-space: normal; vertical-align: top; }
.rd-board td.rd-board-quest .rd-board-sub { margin-top: 4px; }
/* Player Quests: the full quest text (brief + every paragraph), folded under the snippet. */
.rd-quest-more { margin-top: 5px; }
.rd-quest-more > summary { display: inline-block; cursor: pointer; list-style: none; font-size: 11px; color: var(--rd-accent); }
.rd-quest-more > summary::-webkit-details-marker { display: none; }
.rd-quest-more > summary::before { content: "+ "; }
.rd-quest-more[open] > summary::before { content: "- "; }
.rd-quest-more > summary:hover { color: var(--rd-link-hover); }
.rd-quest-more-body { margin-top: 6px; padding: 6px 10px; max-width: 640px; border-left: 2px solid var(--rd-border); color: var(--rd-muted); font-size: 12px; line-height: 1.55; white-space: normal; }
.rd-quest-more-body p { margin: 0 0 6px; }
.rd-quest-more-body p:last-child { margin-bottom: 0; }
.rd-quest-brief { color: var(--rd-text); }

/* Pills printed next to each other need to be told they are separate. */
.rd-pill + .rd-pill { margin-left: 5px; }

/* Several pills in one cell wrap rather than widening the column. */
.rd-board td > .rd-pill { margin-bottom: 3px; }
.rd-board-punish { min-width: 620px; }
.rd-board-wanted { min-width: 980px; }
.rd-board-vpnlog { min-width: 880px; }
.rd-board-vpnlist { min-width: 660px; }
.rd-board-vpnlogs { min-width: 1160px; }
.rd-board-vpncache { min-width: 920px; }

/* A split where the left column leads - a form beside its preview, rather
   than a list beside its editor. */
@media (min-width: 992px) {
  .rd-split-lead { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
}

/* ---- Give Item builder ------------------------------------------------
   One row per item, with a talic builder in the upgrade cell. These rules
   used to be an inline <style> carrying their own greys and yellows; they
   are here now, on the panel's own tokens. */
.rd-board-charge { min-width: 860px; }
.rd-board td.rd-board-talics { min-width: 150px; white-space: nowrap; line-height: 1; }
.rd-board td.rd-board-talics img { width: 18px; height: 18px; object-fit: contain; }

.evo-give-grid { min-width: 1050px; }
.evo-give-grid td { vertical-align: middle; }
.evo-upgrade-cell { min-width: 460px; white-space: normal; }
.evo-talic-builder {
  display: grid;
  grid-template-columns: 36px minmax(150px, 220px) minmax(104px, 160px) 36px auto;
  align-items: center;
  gap: 10px;
}
.evo-talic-builder select { width: 100%; min-width: 0; }
.evo-talic-choice-preview {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  gap: 6px;
  min-width: 0;
  max-width: 100%;
  min-height: 36px;
  padding: 3px 9px;
  overflow: hidden;
  white-space: nowrap;
  color: var(--rd-accent-ink);
  font-size: 12px;
  background: rgba(10, 10, 10, .55);
  border: 1px solid var(--rd-border);
  border-radius: 9px;
}
.evo-talic-choice-preview span { overflow: hidden; text-overflow: ellipsis; }
.evo-talic-choice-preview img { flex: 0 0 auto; width: 24px; height: 24px; object-fit: contain; }
.evo-slot-count { color: var(--rd-muted-2); font-size: 11.5px; white-space: nowrap; font-variant-numeric: tabular-nums; }

.evo-talic-slots { display: flex; flex-wrap: wrap; gap: 7px; min-height: 40px; margin-top: 9px; }
.evo-talic-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 36px;
  padding: 5px 9px;
  color: var(--rd-text);
  font-size: 12px;
  background: rgba(var(--rd-accent-rgb), .09);
  border: 1px solid rgba(var(--rd-accent-2-rgb), .3);
  border-radius: 9px;
}
.evo-talic-chip img { width: 26px; height: 26px; object-fit: contain; }
.evo-talic-chip .evo-slot-index { color: var(--rd-accent-2); font-weight: 700; }

.evo-give-help { margin-top: 6px; color: var(--rd-muted-2); font-size: 11.5px; line-height: 1.5; }
.evo-give-preview {
  margin-top: 6px;
  color: var(--rd-accent-ink);
  font-family: var(--rd-mono-font), monospace;
  font-size: 11.5px;
  font-weight: 700;
}
.evo-give-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }

/* The .select2-selection--single rules that used to sit here were written
   for select2 4.x. The shipped library is 3.4.2, whose single-select is
   .select2-choice, so none of them ever matched and the picker kept the
   library's own 2013 light-grey chrome. The v3 treatment lives with the
   rest of the select2 theming, up by the form controls. */

@media (max-width: 1200px) {
  .evo-give-grid { min-width: 980px; }
  .evo-upgrade-cell { min-width: 400px; }
}
.rd-board-daily { min-width: 1080px; }
.rd-board-copychar { min-width: 820px; }

/* ==========================================================
   SLOT GRID
   The bank and inventory editors share one scrollable table
   of slots. These rules used to be an inline <style> in
   rf_item_slots.php with its own palette.
   ========================================================== */
.rd-slot-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 14px;
  margin-bottom: 12px;
  padding: 12px 14px;
  background: var(--rd-surface);
  border: 1px solid var(--rd-border);
  border-radius: var(--rd-radius-sm);
}
.rd-slot-search { flex: 1 1 220px; max-width: 320px; }
.rd-content .rd-slot-toolbar .rd-slot-search .form-control {
  min-height: 38px;
  padding: 8px 12px 8px 38px !important;
  border-radius: 10px !important;
  font-size: 12.5px;
}
.rd-slot-toolbar .rd-slot-search > i { left: 13px; font-size: 14px; }
.rd-slot-toolbar input[type="search"]::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }

.rd-slot-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 11px;
  border-radius: 999px;
  color: var(--rd-muted);
  font-size: 11.5px;
  font-weight: 600;
  background: rgba(255, 255, 255, .04);
  border: 1px solid var(--rd-border);
}
.rd-slot-chip i { color: var(--rd-muted-2); font-size: 12px; }
.rd-slot-chip b { color: var(--rd-text); font-variant-numeric: tabular-nums; }
.rd-slot-chip.rd-is-warn {
  color: #fcd34d;
  background: rgba(255, 189, 74, .12);
  border-color: rgba(255, 189, 74, .26);
}
.rd-slot-chip.rd-is-warn i,
.rd-slot-chip.rd-is-warn b { color: #fcd34d; }
.rd-slot-shown { margin-left: auto; }

/* The table scrolls in its own box, so its header can stick at top:0
   exactly rather than guessing a page offset. */
.rd-slot-scroll {
  max-height: 62vh;
  overflow: auto;
  border: 1px solid var(--rd-border);
  border-radius: var(--rd-radius-sm);
  background: var(--rd-surface);
}
.rd-slot-table { width: 100%; border-collapse: separate; border-spacing: 0; }
.rd-slot-table thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  padding: 10px 12px;
  color: var(--rd-muted-2);
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  text-align: left;
  white-space: nowrap;
  background: var(--rd-surface-2);
  border-bottom: 1px solid var(--rd-border);
  box-shadow: 0 1px 0 var(--rd-border);
}
.rd-slot-table td {
  padding: 8px 12px;
  border-bottom: 1px solid var(--rd-border);
  vertical-align: middle;
  font-size: 12.5px;
}
.rd-slot-table tbody tr:last-child td { border-bottom: 0; }
.rd-slot-row:hover { background: var(--rd-surface-2); }
.rd-slot-row.is-empty { opacity: .42; }
.rd-slot-row.is-empty:hover { opacity: 1; }

/* An edited row, so it is obvious what a save is about to write. */
.rd-slot-row.is-changed {
  background: rgba(var(--rd-accent-rgb), .09);
  box-shadow: inset 3px 0 0 var(--rd-accent-2);
}
.rd-slot-row.is-changed:hover { background: rgba(var(--rd-accent-rgb), .13); }

.rd-slot-no { width: 3.4rem; color: var(--rd-muted-2); font-variant-numeric: tabular-nums; }
.rd-slot-name { font-weight: 650; }
.rd-slot-code { width: 12rem; }
.rd-content .rd-slot-table .form-control,
.rd-content .rd-slot-table .form-select {
  min-height: 34px;
  padding: 6px 10px !important;
  border-radius: 9px !important;
  font-size: 12px;
  background: rgba(10, 10, 10, .5) !important;
}
.rd-content .rd-slot-code .form-control { font-family: var(--rd-mono-font), monospace; letter-spacing: .02em; }
.rd-slot-qty { width: 6rem; }
.rd-content .rd-slot-qty .form-control { text-align: right; font-variant-numeric: tabular-nums; }

.rd-slot-strip { display: inline-flex; align-items: center; gap: 2px; flex-wrap: wrap; }
.rd-slot-pip { flex: none; }
.rd-slot-talics { margin-left: 5px; color: var(--rd-muted); font-size: 11.5px; }
.rd-slot-noup { color: var(--rd-muted-2); font-size: 11.5px; }
.rd-slot-mixed {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 6px;
  border-radius: 5px;
  color: #3d2400;
  background: #fbbf24;
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.rd-slot-ups { display: flex; align-items: center; gap: 5px; }
.rd-content .rd-slot-ups .form-select,
.rd-content .rd-slot-ups select { width: auto; min-width: 4.6rem; }
.rd-slot-empty-hidden { display: none !important; }

/* Not sticky: the table box has a bounded height, so the save bar is always
   just below it, and a floating bar was swallowing clicks aimed at the rows
   underneath it. */
.rd-slot-savebar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--rd-border);
}

@media (max-width: 640px) {
  .rd-slot-toolbar { padding: 12px; }
  .rd-slot-search { max-width: none; }
  .rd-slot-shown { margin-left: 0; }
}

/* The item cell in a slot row: a clear button, its icon and its name. */
.rd-slot-item { display: flex; align-items: center; gap: 9px; min-width: 0; }
.rd-slot-item .rd-icon-btn { flex: 0 0 auto; width: 30px; height: 30px; border-radius: 8px !important; font-size: 12px; }
.rd-slot-item .rd-slot-name { min-width: 0; overflow-wrap: anywhere; }

/* ==========================================================
   EQUIPMENT EDITOR
   A board of worn slots with an item picker, a talic strip
   and a delete per row. These rules used to be an inline
   <style> in admin_equipment_modify.php.
   ========================================================== */
.rd-board-eqpick { min-width: 720px; }
.rd-board-equip { min-width: 1020px; }
.rd-board-equip td { vertical-align: middle; }
.eq-slot { width: 10%; white-space: nowrap; font-weight: 650; }
.eq-img { width: 56px; text-align: center; }
.eq-code { min-width: 210px; }
.eq-name { min-width: 180px; white-space: normal; }

/* The item picker: a text field with its suggestions hanging under it. */
.eq-combo { position: relative; display: block; }
.eq-options {
  position: absolute;
  z-index: 1046;
  left: 0;
  right: 0;
  top: calc(100% + 3px);
  max-height: 260px;
  overflow-y: auto;
  text-align: left;
  background: var(--rd-bg-2);
  border: 1px solid rgba(var(--rd-accent-2-rgb), .35);
  border-radius: 10px;
  box-shadow: 0 18px 44px rgba(0, 0, 0, .55);
}
.eq-option { padding: 7px 11px; cursor: pointer; font-size: 12px; }
.eq-option:hover,
.eq-option.is-active { background: rgba(var(--rd-accent-rgb), .16); }
.eq-option small { color: var(--rd-muted-2); }

.eq-talics { white-space: nowrap; }
.rd-content .eq-talics .form-select { display: inline-block; width: auto; min-width: 128px; margin: 0 5px; }

/* The talic sprites are 14x22, so anything square squashes them. Shown at
   18x28 - the same shape, a little larger - in a box wide enough for all
   seven sockets, so the row does not jump as talics come and go. */
.eq-talic-strip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-width: 176px;
  min-height: 38px;
  padding: 5px 9px;
  margin-right: 6px;
  vertical-align: middle;
  background: rgba(255, 255, 255, .04);
  border: 1px solid var(--rd-border);
  border-radius: 9px;
}
.eq-talic-strip img { width: 18px; height: 28px; }
.eq-pip { cursor: pointer; border-radius: 3px; transition: transform .08s ease; }
.eq-pip:hover { outline: 2px solid rgba(var(--rd-accent-2-rgb), .9); transform: translateY(-1px); }
.eq-level { margin-left: 6px; color: var(--rd-muted-2); font-size: 11.5px; font-variant-numeric: tabular-nums; }

/* A row with unsaved edits, and one queued for deletion. */
.eq-dirty input.eq-search { border-color: var(--rd-warning, #fbbf24) !important; }
.eq-cleared { opacity: .5; }
.eq-cleared .eq-name { text-decoration: line-through; }
.eq-act .rd-icon-btn { width: 32px; height: 32px; border-radius: 9px !important; font-size: 13px; }

/* ==========================================================
   CHARACTER PT EDITOR
   A level and a growth counter per mastery, per weapon skill
   and per force skill. These rules used to be an inline
   <style> in admin_edit_pt.php.
   ========================================================== */
.pt-main { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 270px), 1fr)); gap: 14px; }
.pt-cell { min-width: 0; }
.pt-cell > label {
  display: block;
  margin-bottom: 8px;
  color: var(--rd-muted-2);
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.pt-cell > label small { color: var(--rd-muted-2); font-weight: 600; opacity: .7; }

.pt-title { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px; }
.pt-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 9px; }

.pt-groups { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 560px), 1fr)); gap: 16px; }
.pt-group {
  min-width: 0;
  overflow: hidden;
  background: var(--rd-surface);
  border: 1px solid var(--rd-border);
  border-radius: var(--rd-radius-sm);
}
.pt-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  padding: 12px 15px;
  background: var(--rd-surface-2);
  border-bottom: 1px solid var(--rd-border);
}
.pt-head h6 { margin: 0; font-size: 13px; font-weight: 700; letter-spacing: -.01em; }
.pt-tier {
  padding: 7px 15px;
  color: var(--rd-accent-2);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  background: rgba(0, 0, 0, .18);
  border-bottom: 1px solid var(--rd-border);
}
.pt-note { margin: 0; padding: 14px 15px; color: var(--rd-muted); font-size: 12px; }

.pt-row {
  display: grid;
  grid-template-columns: 42px minmax(130px, 1fr) minmax(260px, 330px);
  gap: 13px;
  align-items: center;
  padding: 11px 14px;
  border-bottom: 1px solid var(--rd-border);
}
.pt-row:last-child { border-bottom: 0; }
.pt-icon {
  display: block;
  width: 42px;
  height: 42px;
  overflow: hidden;
  background: #0d0d0d;
  border: 1px solid var(--rd-border);
  border-radius: 8px;
}
.pt-icon .papuy { display: block; transform: scale(.65625); transform-origin: top left; }
.pt-name { font-size: 12.5px; font-weight: 650; line-height: 1.2; }
.pt-name small { display: block; margin-top: 4px; color: var(--rd-muted-2); font-size: 10.5px; font-weight: 400; }

.pt-mastery { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; padding: 14px; }
.pt-mastery > div {
  min-width: 0;
  padding: 12px;
  background: rgba(0, 0, 0, .14);
  border: 1px solid var(--rd-border);
  border-radius: 10px;
}
.pt-mastery label {
  display: block;
  margin-bottom: 7px;
  color: var(--rd-muted-2);
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.pt-mastery label small { font-weight: 600; opacity: .7; }
.pt-not-owned { border-color: rgba(255, 189, 74, .45) !important; }

.pt-value-box { display: grid; gap: 7px; min-width: 0; }
.pt-readable { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 24px; }
.pt-readable small {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: right;
  color: var(--rd-muted-2);
  font-size: 10.5px;
}
.rd-content .pt-raw-input { min-width: 0; font-variant-numeric: tabular-nums; }
.pt-value-box .rd-pill { font-size: 10.5px; white-space: nowrap; padding: 4px 9px; }

.pt-counter-line,
.pt-level-entry { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 9px; align-items: center; }
.pt-counter-line > span,
.pt-level-entry > label {
  margin: 0;
  color: var(--rd-muted-2);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.rd-content .pt-counter-line .form-control,
.rd-content .pt-level-entry .form-control {
  min-height: 34px;
  padding: 6px 10px !important;
  border-radius: 9px !important;
  font-size: 12px;
  background: rgba(10, 10, 10, .5) !important;
}
.rd-content .pt-level-number { font-weight: 700; color: var(--rd-accent-ink) !important; }

@media (max-width: 767.98px) {
  .pt-row { grid-template-columns: 42px minmax(0, 1fr); }
  .pt-row .pt-value-box { grid-column: 1 / -1; }
  .pt-mastery { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 575.98px) {
  .pt-groups,
  .pt-main { grid-template-columns: minmax(0, 1fr); }
  .pt-title { flex-direction: column; align-items: flex-start; }
}
.rd-board-accounts { min-width: 1240px; }
.rd-board-acctchars { min-width: 1100px; }

/* The "reveal this stored secret" control under a password field. */
.evo-reveal-wrap { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; margin-top: 6px; }
.evo-reveal-out {
  padding: 4px 9px;
  color: var(--rd-accent-ink);
  font-family: var(--rd-mono-font), monospace;
  font-size: 11.5px;
  background: rgba(10, 10, 10, .6);
  border: 1px solid var(--rd-border);
  border-radius: 8px;
  user-select: all;
}

/* ---- Voucher manager -------------------------------------------------- */
.rd-board-baseitems { min-width: 760px; }
.rd-board-vouchers { min-width: 720px; }

/* A field with a button welded to its right: generate a code, clear a list,
   copy a value. */
.rd-voucher-gen { display: flex; gap: 8px; align-items: stretch; }
.rd-voucher-gen .form-control { flex: 1 1 auto; min-width: 0; }
.rd-voucher-gen .rd-cta { flex: 0 0 auto; }

.rd-voucher-code { display: flex; align-items: center; gap: 7px; }
.rd-content .rd-voucher-code .form-control { max-width: 200px; }
.rd-voucher-code .rd-icon-btn { flex: 0 0 auto; width: 32px; height: 32px; border-radius: 9px !important; font-size: 13px; }

/* The voucher list marks rows live or expired; only live ones are shown. */
.aktif { display: table-row; }
.expired { display: none; }
.rd-board-basevoucher { min-width: 1020px; }

/* ---- The talic upgrade tool shared by the voucher and reward editors ----
   One row: the talic picker, then - [ tray ] + . upgrade_tool.css lays the
   same markup out with display:table-cell and a fixed 120px tray; these
   rules replace that, so the widget keeps the spacing scale a form uses. */
/* The picker, the tray and the two stepper buttons are one row of controls,
   so they are one height. --ut-h tracks whatever the surrounding form gives
   its fields - 42px by default, 40px inside a filter bar - rather than the
   40/36/34 ladder these three used to render as. */
.upgrade-tool { --ut-h: 42px; display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.rd-content .rd-filters .upgrade-tool { --ut-h: 40px; }
.upgrade-tool .select-talic-type { flex: 0 1 220px; min-width: 0; padding-right: 0; }
.rd-content .upgrade-tool .select-talic-type .form-control { width: 100%; min-height: var(--ut-h); }
/* upgrade_tool.css still ships a 120x32 tray on a #333 fill and a 6px top
   padding on the button cells, from the table-cell layout these rules
   replace. Its leftovers are cleared here rather than left to fight the
   min-* values, which is what knocked the stepper 3px below the tray. */
.upgrade-tool .talics {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 5px;
  width: auto;
  height: auto;
  min-height: var(--ut-h);
  min-width: 140px;
  padding: 4px 9px;
  background: rgba(255, 255, 255, .04);
  border: 1px solid var(--rd-border);
  border-radius: 9px;
}
/* Nothing picked yet: name the tray instead of showing a blank slab. */
.upgrade-tool .talics:empty::before {
  content: attr(data-empty);
  color: var(--rd-muted-2);
  font-size: 11.5px;
  line-height: 1;
}
.upgrade-tool .talics img { width: 18px; height: 28px; object-fit: contain; }
.upgrade-tool .buttons { display: inline-flex; align-items: center; gap: 6px; padding: 0; }
.upgrade-tool .buttons a {
  display: grid;
  place-items: center;
  width: var(--ut-h);
  height: var(--ut-h);
  color: var(--rd-muted);
  font-size: 14px;
  text-decoration: none;
  background: rgba(255, 255, 255, .028);
  border: 1px solid var(--rd-border);
  border-radius: 9px;
  transition: color .16s ease, background .16s ease, border-color .16s ease;
}
.upgrade-tool .buttons a:focus-visible {
  outline: 2px solid rgba(var(--rd-accent-rgb), .65);
  outline-offset: 2px;
}
.upgrade-tool .upgrade-plus:hover {
  color: #86efac;
  background: rgba(53, 208, 127, .12);
  border-color: rgba(53, 208, 127, .3);
}
.upgrade-tool .upgrade-minus:hover {
  color: #fca5a5;
  background: rgba(239, 68, 68, .12);
  border-color: rgba(239, 68, 68, .32);
}
/* The narrow-width layout for this widget lives with the .rd-store-upgrade
   rules further down, so that it lands after every per-context override of
   .select-talic-type rather than fighting them on equal specificity. */
.rd-board-entrance { min-width: 1080px; }
.rd-board-entranceprize { min-width: 680px; }
.rd-board-entered { min-width: 1020px; }

/* ---- Item scan -------------------------------------------------------
   Four boards behind one tab strip, each a DataTable with an expandable
   details row. The open/close glyph used to be a remote PNG per board. */
.rd-board-scan { min-width: 1080px; }
.rd-board td.details-control {
  width: 34px;
  cursor: pointer;
  text-align: center;
  color: var(--rd-muted-2);
}
.rd-board td.details-control::before {
  content: "\F285";
  font-family: "bootstrap-icons";
  font-size: 12px;
}
.rd-board tr.shown td.details-control { color: var(--rd-accent-2); }
.rd-board tr.shown td.details-control::before { content: "\F282"; }

/* =======================================================================
   POP-UP ADS  (do=admin_popup_ads)
   -----------------------------------------------------------------------
   The page used to carry these rules in a <style> block of its own. They
   live here now, written in the panel tokens, so the pop-up editor answers
   to the Theme Designer like everything else does.
   ===================================================================== */

/* ---- The section strip ----------------------------------------------- */
.rd-content .rd-adm-tabbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}
.rd-content .rd-adm-tabnote {
  margin: 0 0 16px;
  color: var(--rd-muted);
  font-size: 12px;
}

/* A count and a button sharing the right of a panel head. */
.rd-content .rd-adm-headtools {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

/* ---- Two fields side by side ----------------------------------------- */
.rd-content .rd-adm-pair {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 14px;
}
@media (min-width: 560px) {
  .rd-content .rd-adm-pair { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}

/* ---- Thumbnails ------------------------------------------------------ */
.rd-content .rd-adm-thumb,
.rd-content .rd-adm-thumb-void {
  width: 88px;
  height: 56px;
  border-radius: 9px;
  background: var(--rd-surface-2);
  border: 1px solid var(--rd-border);
}
.rd-content .rd-adm-thumb { object-fit: cover; }
.rd-content .rd-adm-thumb-void {
  display: grid;
  place-items: center;
  color: var(--rd-muted-2);
  font-size: 18px;
}
.rd-content .rd-adm-bthumb {
  display: block;
  height: 60px;
  object-fit: cover;
  border-radius: 9px;
  background: var(--rd-surface-2);
  border: 1px solid var(--rd-border);
}
.rd-content .rd-adm-bthumb-hero { width: 160px; }
.rd-content .rd-adm-bthumb-carousel { width: 60px; }
.rd-content .rd-adm-bthumb-proof { width: 80px; }

/* ---- The picture a field already holds ------------------------------- */
.rd-content .rd-adm-current {
  display: flex;
  gap: 13px;
  align-items: flex-start;
  padding: 11px;
  margin-bottom: 10px;
  border-radius: 11px;
  background: var(--rd-surface);
  border: 1px solid var(--rd-border);
}
.rd-content .rd-adm-current img {
  flex: 0 0 auto;
  width: 120px;
  height: 76px;
  object-fit: cover;
  border-radius: 9px;
  background: var(--rd-bg-2);
}
.rd-content .rd-adm-current-copy { min-width: 0; }
.rd-content .rd-adm-current-copy code {
  display: block;
  margin-top: 6px;
  color: var(--rd-muted);
  font-size: 11px;
  overflow-wrap: anywhere;
}
.rd-content .rd-adm-current-drop { margin-top: 9px; }

/* An image the form has not saved yet, shown before it is committed. */
.rd-content .rd-adm-preview-box {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 120px;
  padding: 11px;
  border: 1px dashed var(--rd-border);
  border-radius: 12px;
  background: var(--rd-surface);
}
.rd-content .rd-adm-preview-box img { max-width: 100%; max-height: 180px; border-radius: 9px; }

/* ---- The banner and ad boards ---------------------------------------- */
.rd-content .rd-board-banners { min-width: 880px; }
.rd-content .rd-board-banners td:first-child { width: 118px; }
.rd-content .rd-board-popads { min-width: 1020px; }
.rd-content .rd-board-popads td:first-child { width: 108px; }

/* A switched-off row stays readable - it is out of play, not unimportant. */
.rd-content .rd-board tr.rd-adm-row-off > td { opacity: .58; }

.rd-content .rd-adm-order { display: inline-flex; gap: 5px; align-items: center; }
.rd-content .rd-adm-order form { margin: 0; display: inline-flex; }
.rd-content .rd-adm-link code {
  display: inline-block;
  margin-top: 4px;
  color: var(--rd-muted);
  font-size: 11px;
  overflow-wrap: anywhere;
}
.rd-content .rd-adm-admeta { display: flex; align-items: center; gap: 8px; margin-top: 6px; }

/* The pages one ad covers, as a short row of plain chips. */
.rd-content .rd-adm-where span {
  display: inline-block;
  margin: 0 4px 4px 0;
  padding: 3px 9px;
  border-radius: 999px;
  color: var(--rd-muted);
  background: var(--rd-surface-2);
  border: 1px solid var(--rd-border);
  font-size: 11px;
}

/* ---- Where an ad shows ----------------------------------------------- */
.rd-content .rd-adm-group {
  margin-bottom: 10px;
  padding: 10px 12px;
  border-radius: 11px;
  background: var(--rd-surface);
  border: 1px solid var(--rd-border);
}
.rd-content .rd-adm-group:last-child { margin-bottom: 0; }
.rd-content .rd-adm-group-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
  color: var(--rd-muted-2);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.rd-content .rd-adm-all {
  padding: 0;
  color: var(--rd-link);
  background: none;
  border: 0;
  font: inherit;
  letter-spacing: inherit;
  text-transform: none;
  cursor: pointer;
}
.rd-content .rd-adm-all:hover { color: var(--rd-link-hover); text-decoration: underline; }
.rd-content .rd-adm-all:focus-visible {
  outline: 2px solid var(--rd-accent-ring);
  outline-offset: 2px;
  border-radius: 3px;
}

/* ---- Radios in a row, and a check that reads as a switch ------------- */
.rd-content .rd-adm-radios { display: flex; flex-wrap: wrap; gap: 8px 18px; }
.rd-content .rd-adm-switch {
  margin-bottom: 16px;
  padding: 11px 13px;
  border-radius: 11px;
  background: var(--rd-surface);
  border: 1px solid var(--rd-border);
}

/* ---- Showcase text --------------------------------------------------- */
.rd-content .rd-adm-section { margin-bottom: 22px; }
.rd-content .rd-adm-section:last-child { margin-bottom: 0; }
.rd-content .rd-adm-section > h5 {
  margin: 0 0 12px;
  color: var(--rd-muted-2);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.rd-content .rd-adm-count {
  white-space: nowrap;
  color: var(--rd-muted-2);
  font-variant-numeric: tabular-nums;
}

/* One announcement message per row, numbered so a reader can say which. */
.rd-content .rd-adm-lines { display: grid; gap: 9px; }
.rd-content .rd-adm-line { display: flex; align-items: center; gap: 8px; }
.rd-content .rd-adm-line > .form-control { flex: 1 1 auto; min-width: 0; }
.rd-content .rd-adm-line-no {
  flex: 0 0 auto;
  min-width: 26px;
  text-align: center;
  color: var(--rd-muted-2);
  font-size: 11px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}
.rd-content .rd-adm-lines-foot { margin-top: 10px; }

/* A colour picker, the exact value, and a way back to the theme. */
.rd-content .rd-adm-color { display: flex; align-items: center; gap: 8px; }
.rd-content .rd-adm-color > .form-control-color {
  flex: 0 0 46px;
  width: 46px;
  height: 38px;
  padding: 4px;
  border-radius: 9px;
  background: var(--rd-surface-2) !important;
  border: 1px solid var(--rd-border) !important;
  cursor: pointer;
}
.rd-content .rd-adm-color > .form-control { flex: 1 1 auto; min-width: 0; }
.rd-content .rd-adm-number { max-width: 190px; }

/* The main button, drawn from the fields beside it. */
.rd-content .rd-adm-cta-sample {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 20px;
  border-radius: 12px;
  background: var(--rd-bg-2);
  border: 1px dashed var(--rd-border);
}
.rd-content .rd-adm-cta-demo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  min-width: 220px;
  max-width: 100%;
  padding: 0 36px;
  border-radius: 999px;
  font-family: var(--rd-display-font, inherit);
  font-weight: 700;
  font-size: var(--demo-size, 16px);
  letter-spacing: .14em;
  text-transform: uppercase;
  text-align: center;
  color: var(--demo-ink, var(--rd-btn-ink));
  background: var(--demo-bg, var(--rd-btn-fill));
}
.rd-content .rd-adm-cta-demo.is-small {
  min-height: 42px;
  min-width: 160px;
  padding: 0 24px;
  letter-spacing: .1em;
}
.rd-content .rd-adm-cta-demo.is-large { min-height: 62px; min-width: 280px; padding: 0 48px; }
.rd-content .rd-adm-sample-note { color: var(--rd-muted-2); font-size: 11px; }

/* A switch owns its row: the label after it is the next field, not a
   companion to it, and an inline check let the two sit side by side. */
.rd-content .rd-adm-switch { display: flex; }

/* The emphasis in these rows is a page name, not a figure, so it keeps the
   panel text face rather than the mono one a check list uses for amounts. */
.rd-content .rd-adm-group .rd-check b,
.rd-content .rd-adm-switch b {
  color: var(--rd-text);
  font-family: var(--rd-font);
}

/* Use theme is two words and was wrapping to two lines, which made the
   colour row taller than every other field. */
.rd-content .rd-adm-color > .rd-cta { flex: 0 0 auto; white-space: nowrap; }

/* Whether a picture sets this list's frame shape, or fights it. */
.rd-content .rd-adm-shapenote,
.rd-content .rd-adm-shapewarn {
  display: block;
  margin-top: 3px;
  font-size: 11px;
}
.rd-content .rd-adm-shapenote { color: var(--rd-info); }
.rd-content .rd-adm-shapewarn { color: var(--rd-warning); }

@media (max-width: 640px) {
  .rd-content .rd-adm-tabbar { align-items: stretch; }
  .rd-content .rd-adm-current { flex-direction: column; }
  .rd-content .rd-adm-current img { width: 100%; height: 132px; }
  /* A count and a button beside a three-line subtitle leaves no room for
     either. On a phone they take their own line under the title. */
  .rd-content .rd-panel-head:has(.rd-adm-headtools) { flex-wrap: wrap; }
  .rd-content .rd-adm-headtools { width: 100%; justify-content: flex-start; }
}

/* =======================================================================
   SHOP ADMIN AND STORE SETUP
   ===================================================================== */

/* ---- Granting a figure to one account -------------------------------
   A lookup bar, then the same bar shape again for the amount, so reading
   down the page is one column of fields rather than two arrangements. */
.rd-content .rd-grant { margin-top: 4px; }

/* ---- Boards in these two categories ---------------------------------- */
.rd-content .rd-board-points { min-width: 620px; }
.rd-content .rd-board-guilds { min-width: 560px; }
.rd-content .rd-board-payments { min-width: 1240px; }
.rd-content .rd-board-manual { min-width: 1120px; }
.rd-content .rd-board-packages { min-width: 1000px; }
.rd-content .rd-board-baseitems { min-width: 820px; }

/* The editable figure in a points board is the point of the row, so it
   gets the width rather than sharing it with the account name. */
.rd-content .rd-board-points td:last-child .form-control { max-width: 160px; margin-left: auto; }

/* The pager the legacy PS_Pagination class emits, in the footer spacing
   the rest of the panel uses. */
.rd-content .rd-points-foot { display: flex; justify-content: center; }
.rd-content .rd-points-foot .pagination { margin: 0; }

/* ---- A package, as a row --------------------------------------------- */
.rd-content .rd-store-id {
  display: block;
  margin-top: 3px;
  color: var(--rd-muted-2);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}
.rd-content .rd-store-flag { margin-top: 7px; }

.rd-content .rd-store-icon {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  object-fit: cover;
  background: var(--rd-surface-2);
  border: 1px solid var(--rd-border);
}
.rd-content .rd-store-icon.rd-is-void {
  display: grid;
  place-items: center;
  color: var(--rd-muted-2);
  font-size: 17px;
}

/* What a package hands over. A list, because an operator checking a
   package against its name reads down it looking for one wrong line. */
.rd-content .rd-store-items {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 5px;
}
.rd-content .rd-store-item {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 12.5px;
  line-height: 1.35;
}
.rd-content .rd-store-qty {
  flex: 0 0 auto;
  min-width: 34px;
  padding: 1px 6px;
  border-radius: 6px;
  color: var(--rd-muted);
  background: var(--rd-surface-2);
  border: 1px solid var(--rd-border);
  font-size: 11px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  text-align: center;
}
.rd-content .rd-store-name { min-width: 0; color: var(--rd-text); }
.rd-content .rd-store-item.rd-is-missing { color: var(--rd-warning); }
.rd-content .rd-store-item.rd-is-missing > i { flex: 0 0 auto; font-size: 12px; }

.rd-content .rd-store-talics { display: inline-flex; gap: 2px; align-items: center; }

.rd-content .rd-store-rewards { display: flex; flex-wrap: wrap; gap: 5px; }

.rd-content .rd-store-upg,
.rd-content .rd-store-uses {
  display: block;
  margin-top: 4px;
  color: var(--rd-muted-2);
  font-size: 11px;
}

/* A package or order whose definition has gone. Not an error - the order
   is real and was paid - but it cannot deliver itself. */
.rd-content .rd-pay-gone { color: var(--rd-warning); font-style: italic; }
.rd-content .rd-pay-owner {
  display: block;
  margin-top: 3px;
  color: var(--rd-muted-2);
  font-size: 11px;
}

/* ---- The manual approve screen --------------------------------------- */
/* The decision half starts out of the way and the empty state sits in its
   place, so the page never shows six blank boxes and two live buttons. */
.rd-content .rd-pick { margin-top: 4px; }
.rd-content .rd-pick-grid { align-items: flex-start; }
.rd-content .rd-pick-grid .form-control[readonly] {
  color: var(--rd-text) !important;
  background: var(--rd-surface) !important;
  cursor: default;
}

/* ---- The package icon picker ----------------------------------------- */
.rd-content .rd-store-iconpick { margin-bottom: 6px; }

/* ---- One select left over from the player extender page --------------
   It used to be styled by a block echoed from the Add Package admin page:
   a light-theme control with its chevron loaded from tinypic, which has
   not existed since 2019. It follows the panel's own fields now. */
.rd-content select#soflow {
  min-height: 38px;
  width: 100%;
  max-width: 320px;
  padding: 7px 11px;
  border-radius: 10px;
  color: var(--rd-text);
  background: #141414;
  border: 1px solid #303030;
  font: inherit;
}
.rd-content select#soflow:focus {
  outline: none;
  border-color: var(--rd-accent);
  box-shadow: 0 0 0 3px var(--rd-accent-ring);
}

/* The talic widget, in the spacing the rest of a form uses. It brings its
   own stylesheet (upgrade_tool.css); this only places it. */
.rd-content .rd-store-upgrade {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
  padding: 12px 14px;
  border-radius: 11px;
  background: var(--rd-surface);
  border: 1px solid var(--rd-border);
}
.rd-content .rd-store-upgrade .upgrade-tool { margin: 0; width: 100%; }

/* The item picker is a select2, which sizes itself. In a filter field it
   takes the field width and the field height like every other control
   there, rather than staying at the 42px the base .form-control sets. */
.rd-content .rd-filters .select2-container { width: 100% !important; }
.rd-content .rd-filters .select2-container .select2-choice {
  min-height: 40px;
  padding-left: 12px;
  font-size: 12.5px;
}

/* ---- The talic widget, at form size ---------------------------------
   The shared .upgrade-tool rules already lay this out as one row; inside
   a store form the picker and the tray both get a little more room, and
   the talic gems are shown at their full size rather than list size.

   These used to hang off .select-talic-type, because upgradeTool() never
   closed that div and it therefore wrapped the whole widget. It closes
   now, so the row is .upgrade-tool itself. */
.rd-content .rd-store-upgrade .select-talic-type { flex: 0 1 200px; }
.rd-content .rd-store-upgrade .talics {
  flex: 0 1 auto;
  min-width: 132px;
  background: var(--rd-surface-2);
}
.rd-content .rd-store-upgrade .talics img { width: 24px; height: 24px; }

/* On a phone the widget's four controls wrap, and left alone they break as
   [picker][-] / [tray][+], which pairs each button with the wrong thing.
   Give the picker its own line so the stepper stays either side of the tray
   it acts on, and take the buttons up to a thumb-sized target. Last of the
   .upgrade-tool rules, so it outranks the per-context widths above. */
@media (max-width: 640px) {
  .upgrade-tool,
  .rd-content .rd-filters .upgrade-tool,
  .rd-content .rd-store-upgrade .upgrade-tool { --ut-h: 44px; }
  .upgrade-tool .select-talic-type,
  .rd-content .rd-store-upgrade .select-talic-type { flex: 1 1 100%; }
  .upgrade-tool .talics,
  .rd-content .rd-store-upgrade .talics { flex: 1 1 auto; min-width: 0; }
}

/* A talic is a small dark gem, so at list size it needs its own footing to
   read against the row rather than disappearing into it. */
.rd-content .rd-store-talics img {
  width: 20px;
  height: 20px;
  padding: 1px;
  border-radius: 5px;
  background: rgba(255, 255, 255, .06);
}

/* =======================================================================
   SUPER ADMIN AND SUPPORT
   ===================================================================== */

/* ---- Menu management -------------------------------------------------
   A grid of category cards, each a list of on/off rows. It used to carry
   its own stylesheet with hard-coded slate and amber, so the Theme
   Designer could not reach any of it. Same shape, panel tokens. */
.rd-content .rd-mm-toolbar {
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  position: sticky;
  top: 0;
  z-index: 5;
  margin-bottom: 18px;
  padding: 12px 0;
  background: var(--rd-surface);
  border-bottom: 1px solid var(--rd-border);
}
.rd-content .rd-mm-toolbar-actions {
  display: flex;
  gap: 10px;
  align-items: center;
  margin-left: auto;
}
.rd-content .rd-mm-search { flex: 1 1 240px; max-width: 390px; }

.rd-content .rd-mm-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr));
  gap: 18px;
}
.rd-content .rd-mm-card {
  background: var(--rd-surface);
  border: 1px solid var(--rd-border);
  border-radius: 14px;
  overflow: hidden;
}
.rd-content .rd-mm-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 15px 17px;
  border-bottom: 1px solid var(--rd-border);
  background: rgba(255, 255, 255, .015);
}
.rd-content .rd-mm-title {
  display: flex;
  align-items: center;
  gap: 9px;
  flex-wrap: wrap;
  margin: 0;
  color: #fff;
  font-size: 14px;
  font-weight: 650;
  letter-spacing: -.01em;
}
.rd-content .rd-mm-list { padding: 6px 17px 11px; }
.rd-content .rd-mm-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 11px 0;
  border-bottom: 1px solid rgba(255, 255, 255, .045);
}
.rd-content .rd-mm-row:last-child { border-bottom: 0; }
.rd-content .rd-mm-label {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  min-width: 0;
  color: var(--rd-text);
  font-size: 13px;
}
.rd-content .rd-mm-label small {
  display: block;
  width: 100%;
  margin-top: 2px;
  color: var(--rd-muted-2);
  font-family: var(--rd-mono-font), monospace;
  font-size: 11px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* The one real switch in the panel: this page is a wall of them, and a
   checkbox row does not read as "this menu is on" at a glance. */
.rd-content .rd-mm-switch {
  position: relative;
  flex: 0 0 auto;
  width: 46px;
  height: 25px;
}
.rd-content .rd-mm-switch input {
  position: absolute;
  opacity: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  cursor: pointer;
}
.rd-content .rd-mm-slider {
  position: absolute;
  inset: 0;
  border-radius: 999px;
  background: var(--rd-surface-3);
  border: 1px solid var(--rd-border);
  cursor: pointer;
  transition: background .18s ease, border-color .18s ease;
}
.rd-content .rd-mm-slider::before {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 17px;
  height: 17px;
  border-radius: 50%;
  background: var(--rd-muted);
  transition: transform .18s ease, background .18s ease;
}
.rd-content .rd-mm-switch input:checked + .rd-mm-slider {
  background: var(--rd-accent);
  border-color: var(--rd-accent);
}
.rd-content .rd-mm-switch input:checked + .rd-mm-slider::before {
  transform: translateX(21px);
  background: #fff;
}
.rd-content .rd-mm-switch input:disabled + .rd-mm-slider { opacity: .55; cursor: not-allowed; }
.rd-content .rd-mm-switch input:focus-visible + .rd-mm-slider {
  outline: 2px solid var(--rd-accent-ring);
  outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
  .rd-content .rd-mm-slider,
  .rd-content .rd-mm-slider::before { transition: none; }
}

/* ---- GameCP logs ----------------------------------------------------- */
.rd-content .rd-board-gclogs { min-width: 1080px; }
.rd-content .rd-gclog-msg { overflow-wrap: anywhere; }

/* ---- Icon sprite settings -------------------------------------------- */
.rd-content .rd-board-icons { min-width: 620px; }
.rd-content .rd-icon-kind {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-top: 4px;
  color: var(--rd-muted-2);
  font-size: 11px;
}

/* ---- Support lookups ------------------------------------------------- */
.rd-content .rd-board-charlookup { min-width: 1400px; }

/* The serial or old name under the thing it belongs to. */
.rd-content .rd-sup-was {
  display: block;
  margin-top: 3px;
  color: var(--rd-muted-2);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}

/* A character's four class advancements, read as one progression rather
   than four separate columns the way the old table showed them. */
.rd-content .rd-sup-classes {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 7px;
  font-size: 12.5px;
}
.rd-content .rd-sup-classes > * { position: relative; }
.rd-content .rd-sup-classes > * + *::before {
  content: "\203A";
  margin-right: 7px;
  color: var(--rd-muted-2);
}

/* A class the class table has no name for: shown as its raw id, marked as
   a figure so it does not read as a name. */
.rd-content .rd-sup-classid {
  color: var(--rd-muted-2);
  font-family: var(--rd-mono-font), monospace;
  font-size: 11.5px;
}

/* Where a character is standing. Whole numbers mean the row was written by
   something other than the game, which is worth noticing. */
.rd-content .rd-sup-xyz {
  font-family: var(--rd-mono-font), monospace;
  font-size: 11.5px;
  font-variant-numeric: tabular-nums;
}
.rd-content .rd-sup-xyz.rd-is-odd { color: var(--rd-warning); font-weight: 700; }

/* ---- Guild lookup ---------------------------------------------------- */
.rd-content .rd-board-guildmembers { min-width: 860px; }
.rd-content .rd-sg-ban { margin-top: 14px; }

/* A checkbox that is the whole cell: no label text beside it, so it does
   not inherit the gap and colour a labelled check needs. */
.rd-content .rd-check-bare {
  display: inline-flex;
  gap: 0;
  margin: 0;
  padding: 0;
}

/* ---- Permission management ------------------------------------------- */
.rd-content .rd-perm-toolbar {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 16px;
  padding: 11px 13px;
  border-radius: 11px;
  background: var(--rd-surface);
  border: 1px solid var(--rd-border);
}
.rd-content .rd-perm-toolbar > .rd-cta { margin-left: auto; }
.rd-content .rd-perm-count { color: var(--rd-muted); font-size: 12px; }
.rd-content .rd-perm-count b { color: var(--rd-text); font-variant-numeric: tabular-nums; }

.rd-content .rd-perm-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: 16px;
}
.rd-content .rd-perm-group {
  padding: 15px 16px;
  border-radius: 12px;
  background: var(--rd-surface);
  border: 1px solid var(--rd-border);
}
.rd-content .rd-perm-title {
  margin: 0 0 12px;
  color: var(--rd-muted-2);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}

/* The route name under the label it belongs to: an operator matching a
   permission against a menu entry needs it, a reader does not. */
.rd-content .rd-perm-key {
  display: block;
  margin-top: 2px;
  color: var(--rd-muted-2);
  font-family: var(--rd-mono-font), monospace;
  font-size: 10.5px;
}

.rd-content .rd-board-perms { min-width: 960px; }
.rd-content .rd-perm-list { display: flex; flex-wrap: wrap; gap: 4px; }
.rd-content .rd-perm-chip {
  padding: 2px 8px;
  border-radius: 999px;
  color: var(--rd-muted);
  background: var(--rd-surface-2);
  border: 1px solid var(--rd-border);
  font-size: 11px;
}

/* ---- Hardware IDs ---------------------------------------------------- */
.rd-content .rd-board-hwid { min-width: 1080px; }
.rd-content .rd-hwid { overflow-wrap: anywhere; font-size: 11px; }

/* ---- Mass delete ----------------------------------------------------- */
.rd-content .rd-md-places {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr));
  margin-bottom: 4px;
}

/* ---- Bank and inventory slots ---------------------------------------- */
.rd-content .rd-board-bankslots,
.rd-content .rd-board-invslots { min-width: 780px; }

/* ---- Equipment lookup ------------------------------------------------ */
.rd-content .rd-board-equipslots { min-width: 680px; }

/* ---- Online stats ----------------------------------------------------
   The map list and its roster dialogs. These class names existed on the
   page before but never had rules of their own: the look came from the
   Bootstrap classes beside them. */
.rd-content .rd-online-toolbar {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}
.rd-content .rd-online-hint { color: var(--rd-muted-2); font-size: 11.5px; }
.rd-content .rd-online-flag { margin-top: 6px; }

.rd-content .rd-board-onlinemaps { min-width: 880px; }

/* A map name is a button that opens its roster, so it has to look like
   one without turning the table into a wall of buttons. */
.rd-content .rd-map-open {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0;
  color: var(--rd-text);
  background: none;
  border: 0;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.rd-content .rd-map-open > i { color: var(--rd-muted-2); font-size: 13px; }
.rd-content .rd-map-open:hover { color: var(--rd-link-hover); }
.rd-content .rd-map-open:hover > i { color: var(--rd-link-hover); }
.rd-content .rd-map-open:focus-visible {
  outline: 2px solid var(--rd-accent-ring);
  outline-offset: 3px;
  border-radius: 4px;
}
.rd-content .rd-map-count {
  justify-content: flex-end;
  width: 100%;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

/* The roster itself. */
.rd-content .rd-map-table { min-width: 620px; }
.rd-content .rd-map-name { font-weight: 600; }
.rd-content .rd-map-filter-count {
  align-self: center;
  color: var(--rd-muted-2);
  font-size: 11.5px;
}
.rd-content .rd-modal-note { margin-right: auto; color: var(--rd-muted-2); font-size: 11.5px; }

/* A wider dialog than the default: the roster is five or six columns. */
.rd-map-modal .rd-modal-shell { width: min(92vw, 860px); }

/* ---- Banned accounts ------------------------------------------------- */
.rd-content .rd-board-banlist { min-width: 1080px; }
.rd-content .rd-board-bantargets { min-width: 900px; }
.rd-content .rd-ban-reason { overflow-wrap: anywhere; max-width: 320px; }

/* The characters on an account, as chips that open the character search. */
.rd-content .rd-ban-chars { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 16px; }
.rd-content .rd-ban-char {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 11px;
  border-radius: 999px;
  color: var(--rd-text);
  background: var(--rd-surface-2);
  border: 1px solid var(--rd-border);
  font-size: 12px;
  text-decoration: none;
}
.rd-content .rd-ban-char:hover { border-color: var(--rd-border-strong); color: var(--rd-link-hover); }
.rd-content .rd-ban-char > span { color: var(--rd-muted-2); font-variant-numeric: tabular-nums; }
.rd-content .rd-ban-char-gone { color: var(--rd-danger) !important; font-style: italic; }

/* ---- Super Admin settings -------------------------------------------
   Moved out of superadmin_configuration.php, which carried it as an
   inline <style>. It was already written in panel tokens; it is only
   scoped to .rd-content here so it lives with the rest of the sheet. */
.rd-content .evo-cfg-logo { max-height: 76px; max-width: 220px; object-fit: contain; }
.rd-content .evo-cfg-logo-fallback {
  display: inline-grid; place-items: center; width: 46px; height: 46px; border-radius: 12px;
  background: linear-gradient(140deg, #fbbf24, #f59e0b); color: #1b1204; font-size: 20px;
}
.rd-content .evo-cfg-label { font-size: 10.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--rd-muted-2); }

.rd-content .evo-cfg-form { margin-top: 22px; }

.rd-content .evo-cfg-toolbar {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px;
}
.rd-content .evo-cfg-search {
  position: relative; flex: 1 1 320px; max-width: 520px;
  display: flex; align-items: center; gap: 9px; padding: 0 14px; height: 42px;
  background: var(--rd-surface); border: 1px solid var(--rd-border); border-radius: 12px;
}
.rd-content .evo-cfg-search i { color: var(--rd-muted-2); font-size: 14px; }
.rd-content .evo-cfg-search input {
  flex: 1; min-width: 0; height: 100%; border: 0; background: transparent; color: var(--rd-text);
  font-size: 13px; outline: none;
}
.rd-content .evo-cfg-total { font-size: 12px; color: var(--rd-muted); }
.rd-content .evo-cfg-total strong { color: var(--rd-text); }

.rd-content .evo-cfg-panel { margin-top: 16px; }

.rd-content .evo-cfg-row {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 420px); gap: 18px; align-items: start;
  padding: 15px 16px; margin-bottom: 10px;
  background: var(--rd-surface); border: 1px solid var(--rd-border); border-radius: var(--rd-radius-sm);
  transition: border-color .16s ease, background .16s ease;
}
.rd-content .evo-cfg-row:hover { border-color: var(--rd-border-strong); background: var(--rd-surface-2); }

.rd-content .evo-cfg-meta { min-width: 0; }
.rd-content .evo-cfg-name {
  display: flex; align-items: center; flex-wrap: wrap; gap: 8px;
  font-size: 13.5px; font-weight: 700; color: var(--rd-text);
}
.rd-content .evo-cfg-key {
  display: inline-block; margin-top: 5px; padding: 2px 7px;
  background: rgba(255, 255, 255, .04); border: 1px solid var(--rd-border); border-radius: 6px;
  font-size: 11px; color: var(--rd-muted);
}
.rd-content .evo-cfg-desc { margin: 7px 0 0; font-size: 12px; line-height: 1.5; color: var(--rd-muted); }

.rd-content .evo-cfg-badge {
  padding: 2px 8px; border-radius: 999px; font-size: 10px; font-weight: 800;
  letter-spacing: .05em; text-transform: uppercase;
  color: var(--rd-muted-2); background: rgba(255, 255, 255, .05); border: 1px solid var(--rd-border);
}
.rd-content .evo-cfg-badge.evo-is-custom { color: #ffd79a; background: rgba(255, 189, 74, .12); border-color: rgba(255, 189, 74, .3); }

.rd-content .evo-cfg-control .form-control,
.rd-content .evo-cfg-control .form-select { background: var(--rd-surface-3); }
.rd-content .evo-cfg-choices { display: flex; flex-wrap: wrap; gap: 6px 16px; padding-top: 6px; }
.rd-content .evo-cfg-choices .form-check-label { font-size: 13px; }

.rd-content .evo-cfg-empty { padding: 18px; margin: 0; text-align: center; color: var(--rd-muted-2); font-size: 12.5px; }

/* .rd-seg is display:flex and .evo-cfg-row is display:grid, both of which
   beat the user-agent [hidden] rule. Without this the search filter sets
   the attribute and nothing visibly changes. */
.rd-seg[hidden], .evo-cfg-row[hidden], .evo-cfg-panel[hidden], .evo-cfg-empty[hidden] { display: none !important; }

.rd-content .evo-cfg-savebar {
  position: sticky; bottom: 0; z-index: 5;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px;
  margin-top: 18px; padding: 14px 16px;
  background: rgba(13, 13, 13, .92); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border: 1px solid var(--rd-border); border-radius: var(--rd-radius-sm);
}
.rd-content .evo-cfg-savebar .rd-cfg-note { font-size: 12px; }

@media (max-width: 991.98px) {
  .rd-content .evo-cfg-row { grid-template-columns: minmax(0, 1fr); gap: 10px; }
}


/* A quiet note beside a control or under a form. */
.rd-content .rd-cfg-note { color: var(--rd-muted-2); font-size: 11.5px; }

/* ---- XLSX to SQL generator -------------------------------------------
   A client-side tool: drop files, read the log, download a zip. It used to
   carry its own stylesheet with a hard-coded yellow and three shades of
   slate, so none of it answered to the Theme Designer. */
.rd-content .rd-sqlgen-drop {
  padding: 30px 20px;
  border: 2px dashed var(--rd-border);
  border-radius: 14px;
  background: var(--rd-surface);
  text-align: center;
  transition: border-color .18s ease, background .18s ease;
  cursor: pointer;
}
.rd-content .rd-sqlgen-drop:hover,
.rd-content .rd-sqlgen-drop:focus-visible,
.rd-content .rd-sqlgen-drop.is-dragging {
  border-color: var(--rd-accent);
  background: var(--rd-accent-soft);
  outline: none;
}
.rd-content .rd-sqlgen-drop > i {
  display: block;
  margin-bottom: 12px;
  color: var(--rd-accent-2);
  font-size: 30px;
}
.rd-content .rd-sqlgen-drop h3 {
  margin: 0 0 7px;
  color: #fff;
  font-size: 15px;
  font-weight: 650;
}
.rd-content .rd-sqlgen-drop p {
  max-width: 560px;
  margin: 0 auto 16px;
  color: var(--rd-muted);
  font-size: 12.5px;
  line-height: 1.6;
}

.rd-content .rd-sqlgen-supported {
  margin: 0;
  color: var(--rd-muted-2);
  font-size: 12px;
  line-height: 1.7;
}

/* One row per file waiting to be converted. */
.rd-content .rd-sqlgen-files { display: grid; gap: 8px; margin-top: 16px; }
.rd-content .rd-sqlgen-file {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 10px 13px;
  border-radius: 10px;
  background: var(--rd-surface-2);
  border: 1px solid var(--rd-border);
  font-size: 12.5px;
}
.rd-content .rd-sqlgen-file small { color: var(--rd-muted-2); }

/* The log. Monospace, because it lists filenames and row counts. */
.rd-content .rd-sqlgen-log {
  min-height: 130px;
  max-height: 320px;
  margin: 0;
  padding: 14px;
  overflow: auto;
  border-radius: 10px;
  background: var(--rd-bg-2);
  border: 1px solid var(--rd-border);
  color: var(--rd-text);
  font-family: var(--rd-mono-font), monospace;
  font-size: 12px;
  line-height: 1.7;
  white-space: pre-wrap;
}
.rd-content .rd-sqlgen-line { display: block; }
.rd-content .rd-sqlgen-line.rd-is-success { color: var(--rd-success); }
.rd-content .rd-sqlgen-line.rd-is-error { color: var(--rd-danger); }
.rd-content .rd-sqlgen-line.rd-is-warning { color: var(--rd-warning); }

/* A link cannot carry the disabled attribute, so the download button is
   marked with a class until there is something to download. */
.rd-content .rd-cta.rd-is-disabled {
  opacity: .5;
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  .rd-content .rd-sqlgen-drop { transition: none; }
}

/* ---- Items database -------------------------------------------------
   This page carried its own stylesheet built on Bootstrap's --bs-* custom
   properties and color-mix(), so it was reading colours from a theme this
   panel does not use - the header row came out a Bootstrap blue whatever
   the accent was set to. */
.rd-content .rd-board-items { min-width: 1120px; }

.rd-content .rd-idb-code {
  font-family: var(--rd-mono-font), monospace;
  font-size: 11.5px;
  overflow-wrap: anywhere;
}
.rd-content .rd-idb-sep { color: var(--rd-muted-2); }
.rd-content .rd-idb-sub {
  margin-top: 3px;
  color: var(--rd-muted-2);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}

/* The kind shortcuts above the results. */
.rd-content .rd-idb-kinds { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
.rd-content .rd-idb-kind {
  padding: 3px 10px;
  border-radius: 999px;
  color: var(--rd-muted);
  background: var(--rd-surface-2);
  border: 1px solid var(--rd-border);
  font-size: 11.5px;
  text-decoration: none;
}
.rd-content .rd-idb-kind:hover {
  color: var(--rd-link-hover);
  border-color: var(--rd-border-strong);
}

/* Which races may equip an item, in the race colours the panel already
   uses for characters rather than three one-off hex values. */
.rd-content .rd-idb-races { display: inline-flex; flex-wrap: wrap; gap: 4px; }
.rd-content .rd-idb-race {
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid var(--rd-border);
  font-size: 11px;
  font-weight: 600;
}

/* ---- One item's detail sheet ----------------------------------------- */
.rd-content .rd-idb-detail {
  margin-bottom: 18px;
  border-radius: 13px;
  background: var(--rd-surface);
  border: 1px solid var(--rd-border);
  overflow: hidden;
}
.rd-content .rd-idb-bar {
  display: flex;
  align-items: center;
  gap: 15px;
  padding: 15px 17px;
  border-bottom: 1px solid var(--rd-border);
  background: rgba(255, 255, 255, .015);
}
.rd-content .rd-idb-icon { flex: 0 0 auto; }
.rd-content .rd-idb-title { flex: 1 1 auto; min-width: 0; }
.rd-content .rd-idb-title h3 {
  margin: 0 0 4px;
  color: #fff;
  font-size: 15px;
  font-weight: 650;
  letter-spacing: -.015em;
}
.rd-content .rd-idb-dbcode { flex: 0 0 auto; text-align: right; }
.rd-content .rd-idb-dbcode > span {
  display: block;
  margin-bottom: 3px;
  color: var(--rd-muted-2);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.rd-content .rd-idb-facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 170px), 1fr));
  gap: 9px;
  padding: 15px 17px;
}
.rd-content .rd-idb-fact {
  padding: 9px 12px;
  border-radius: 9px;
  background: var(--rd-surface-2);
  border: 1px solid var(--rd-border);
}
.rd-content .rd-idb-fact .lbl {
  display: block;
  margin-bottom: 3px;
  color: var(--rd-muted-2);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .05em;
  text-transform: uppercase;
}
.rd-content .rd-idb-fact .val { color: var(--rd-text); font-size: 13px; font-weight: 600; }

/* Every column of the row, for when the summary above is not enough. */
.rd-content .rd-idb-raw-wrap { padding: 0 17px 15px; }
.rd-content .rd-idb-raw-wrap > .rd-fold { margin-top: 0; border-top: 0; padding-top: 0; }
.rd-content .rd-idb-raw-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
  gap: 14px;
}
.rd-content .rd-idb-raw { width: 100%; border-collapse: collapse; }
.rd-content .rd-idb-raw td {
  padding: 5px 9px;
  border-bottom: 1px solid rgba(255, 255, 255, .045);
  font-size: 12px;
  vertical-align: top;
}
.rd-content .rd-idb-raw tr:last-child td { border-bottom: 0; }
.rd-content .rd-idb-raw td:first-child {
  width: 40%;
  color: var(--rd-muted-2);
  overflow-wrap: anywhere;
}
.rd-content .rd-idb-race.rd-race-bellato {
  color: #93c5fd;
  background: rgba(96, 165, 250, .12);
  border-color: rgba(96, 165, 250, .26);
}
.rd-content .rd-idb-race.rd-race-cora {
  color: #d8b4fe;
  background: rgba(192, 132, 252, .12);
  border-color: rgba(192, 132, 252, .26);
}
.rd-content .rd-idb-race.rd-race-accretia {
  color: #cbd5e1;
  background: rgba(148, 163, 184, .12);
  border-color: rgba(148, 163, 184, .26);
}

/* ---- Hardware IDs, HVN ----------------------------------------------- */
.rd-content .rd-hvn { display: grid; gap: 2px; }
.rd-content .rd-board-hvn { min-width: 1280px; }
.rd-content .rd-hvn-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.rd-content .rd-hvn-page { color: var(--rd-muted); font-size: 12px; }
.rd-content .rd-hvn-pagebtns { display: flex; gap: 8px; }

/* The roster scrolls inside the dialog, not the dialog inside itself, so
   the header row can stick. Two nested scrollers would break that. */
.rd-map-modal .rd-board-wrap { max-height: 58vh; overflow: auto; }
.rd-map-modal .rd-map-table thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--rd-surface-2);
}

/* A map name reads as something you can press. */
.rd-content .rd-map-open > strong { border-bottom: 1px dashed rgba(161, 161, 161, .5); }
.rd-content .rd-map-open:hover > strong,
.rd-content .rd-map-open:focus-visible > strong { border-bottom-color: currentColor; }

/* Race colours for a roster name, matching the rest of the panel. */
.rd-content .rd-map-name.rd-race-bellato { color: #93c5fd; }
.rd-content .rd-map-name.rd-race-cora { color: #d8b4fe; }
.rd-content .rd-map-name.rd-race-accretia { color: #cbd5e1; }

.rd-content .rd-map-lv {
  display: inline-block;
  min-width: 38px;
  padding: 2px 7px;
  border-radius: 6px;
  background: rgba(161, 161, 161, .16);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  text-align: center;
}


/* ==========================================================
   DASHBOARD - WELCOME BANNER
   The first thing a signed-in player sees, so it carries the
   identity, the account state and the server clock, and leaves
   the tiles below free for figures.
   ========================================================== */
.rd-dash-hero {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  padding: 22px 24px;
  border: 1px solid var(--rd-border);
  border-radius: 18px;
  background:
    radial-gradient(120% 160% at 0% 0%, rgba(var(--rd-accent-rgb), .16), transparent 58%),
    linear-gradient(180deg, rgba(29, 29, 29, .92), rgba(20, 20, 20, .94));
}
/* A faint faction-red sweep on the far edge, so the banner is not a flat
   slab the width of the content column. */
.rd-dash-hero::after {
  content: "";
  position: absolute;
  inset: 0 -20% 0 auto;
  width: 46%;
  pointer-events: none;
  background: radial-gradient(70% 120% at 100% 50%, rgba(var(--rd-accent-2-rgb), .13), transparent 70%);
}

.rd-hero-id { position: relative; z-index: 1; min-width: 0; display: flex; align-items: center; gap: 16px; }
.rd-hero-avatar {
  flex: 0 0 56px;
  width: 56px;
  height: 56px;
  display: grid;
  place-items: center;
  color: var(--rd-btn-ink);
  font-family: var(--rd-display-font) !important;
  font-size: 23px;
  font-weight: 700;
  background: linear-gradient(140deg, var(--rd-accent-2), var(--rd-accent-deep));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .26);
  clip-path: polygon(15px 0, 100% 0, 100% calc(100% - 15px), calc(100% - 15px) 100%, 0 100%, 0 15px);
}
.rd-hero-copy { min-width: 0; }
.rd-hero-greet {
  display: block;
  color: var(--rd-muted);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
}
.rd-hero-copy h2 {
  margin: 4px 0 0;
  color: #fff;
  font-family: var(--rd-display-font) !important;
  font-size: 27px;
  font-weight: 600;
  letter-spacing: -.03em;
  line-height: 1.12;
  overflow-wrap: anywhere;
}
.rd-hero-pills { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 11px; }

.rd-hero-side {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 22px;
  flex-wrap: wrap;
}
.rd-hero-clock { display: grid; gap: 2px; }
.rd-hero-clock-label {
  color: var(--rd-muted-2);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .15em;
  text-transform: uppercase;
}
/* Tabular figures so the seconds ticking over does not shift the line. */
.rd-clock {
  color: #fff;
  font-family: var(--rd-mono-font) !important;
  font-size: 25px;
  font-weight: 700;
  letter-spacing: -.01em;
  font-variant-numeric: tabular-nums;
}
.rd-hero-clock small { display: block; color: var(--rd-muted); font-size: 11.5px; }
.rd-hero-actions { display: flex; flex-wrap: wrap; gap: 10px; }

/* Neutral pill, for state that is neither good nor bad. */
.rd-pill-idle { color: #c2c0bc; background: rgba(161, 161, 161, .1); border: 1px solid rgba(161, 161, 161, .19); }
.rd-pill-gold { color: #fcd34d; background: rgba(251, 191, 36, .1); border: 1px solid rgba(251, 191, 36, .22); }

/* A stat's caption doubling as the way on to the page that changes it. */
.rd-stat-link { display: inline-flex; align-items: center; gap: 2px; color: var(--rd-link) !important; font-weight: 600; }
.rd-stat-link:hover { color: var(--rd-link-hover) !important; }
.rd-stat-link i { font-size: 15px; transition: transform .16s ease; }
.rd-stat-link:hover i { transform: translateX(2px); }

/* ==========================================================
   DASHBOARD - CHARACTER ROSTER
   ========================================================== */
.rd-panel-link {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 1px;
  color: var(--rd-link) !important;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}
.rd-panel-link:hover { color: var(--rd-link-hover) !important; }
.rd-panel-link i { font-size: 17px; transition: transform .16s ease; }
.rd-panel-link:hover i { transform: translateX(2px); }

.rd-panel-more {
  display: inline-flex;
  align-items: center;
  gap: 1px;
  margin-top: 16px;
  color: var(--rd-link) !important;
  font-size: 12px;
  font-weight: 600;
}
.rd-panel-more:hover { color: var(--rd-link-hover) !important; }
.rd-panel-more i { font-size: 17px; transition: transform .16s ease; }
.rd-panel-more:hover i { transform: translateX(2px); }

.rd-roster { display: grid; gap: 10px; }
.rd-roster-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 14px;
  border: 1px solid var(--rd-border);
  border-radius: 13px;
  background: rgba(255, 255, 255, .018);
  transition: border-color .18s ease, background .18s ease;
}
.rd-roster-row:hover { border-color: rgba(var(--rd-accent-2-rgb), .26); background: rgba(255, 255, 255, .032); }
.rd-roster-sigil {
  flex: 0 0 46px;
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: 12px;
  border: 1px solid rgba(161, 161, 161, .2);
  background: rgba(161, 161, 161, .08);
}
.rd-roster-sigil img { width: 30px; height: 30px; object-fit: contain; }
.rd-roster-sigil i { color: #a1a1a1; font-size: 19px; }
.rd-roster-sigil.rd-race-bellato { border-color: rgba(96, 165, 250, .32); background: rgba(96, 165, 250, .1); }
.rd-roster-sigil.rd-race-cora { border-color: rgba(192, 132, 252, .32); background: rgba(192, 132, 252, .1); }
.rd-roster-sigil.rd-race-accretia { border-color: rgba(203, 213, 225, .28); background: rgba(203, 213, 225, .08); }

.rd-roster-copy { flex: 1; min-width: 0; display: grid; gap: 5px; }
.rd-roster-name {
  color: #fff;
  font-family: var(--rd-display-font) !important;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -.01em;
  overflow-wrap: anywhere;
}
.rd-roster-meta { display: flex; flex-wrap: wrap; gap: 5px 14px; }
.rd-roster-meta span { display: inline-flex; align-items: center; gap: 6px; color: var(--rd-muted); font-size: 11.5px; font-weight: 500; }
.rd-roster-meta i { color: #727272; font-size: 12px; }
.rd-roster-meta b { color: #efece5; font-weight: 600; }

.rd-roster-lv {
  flex: 0 0 auto;
  display: grid;
  gap: 1px;
  justify-items: center;
  min-width: 56px;
  padding: 7px 10px;
  border-radius: 11px;
  background: rgba(var(--rd-accent-rgb), .1);
  border: 1px solid rgba(var(--rd-accent-2-rgb), .17);
}
.rd-roster-lv small { color: var(--rd-muted-2); font-size: 9px; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; }
.rd-roster-lv b {
  color: #fff;
  font-family: var(--rd-display-font) !important;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.1;
}

/* ==========================================================
   DASHBOARD - LIVE POPULATION
   ========================================================== */
.rd-pop-head { display: flex; align-items: center; gap: 14px; padding-bottom: 16px; border-bottom: 1px solid rgba(255, 255, 255, .05); }
.rd-pop-total {
  color: #fff;
  font-family: var(--rd-display-font) !important;
  font-size: 38px;
  font-weight: 600;
  letter-spacing: -.035em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.rd-pop-caption { min-width: 0; display: grid; gap: 3px; }
.rd-pop-caption strong { color: #e6e3dc; font-size: 12.5px; font-weight: 600; }
.rd-pop-caption small { color: var(--rd-muted-2); font-size: 11.5px; }

.rd-pop-bars { display: grid; gap: 11px; padding-top: 16px; }
.rd-pop-row { display: flex; align-items: center; gap: 12px; }
.rd-pop-name { flex: 0 0 104px; min-width: 0; }
.rd-pop-track {
  flex: 1;
  height: 8px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(161, 161, 161, .13);
}
.rd-pop-fill {
  display: block;
  height: 100%;
  min-width: 3px;
  border-radius: 999px;
  background: currentColor;
  /* Grows from nothing on load, so the split reads as a measurement
     rather than as three static blocks. */
  animation: rdPopGrow .55s cubic-bezier(.2, .8, .3, 1);
  transform-origin: left center;
}
@keyframes rdPopGrow { from { transform: scaleX(0); } to { transform: none; } }
.rd-pop-count {
  flex: 0 0 auto;
  min-width: 42px;
  color: #efece5;
  font-size: 12.5px;
  font-weight: 600;
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.rd-pop-row.rd-race-bellato .rd-pop-fill { color: #60a5fa; }
.rd-pop-row.rd-race-cora .rd-pop-fill { color: #c084fc; }
.rd-pop-row.rd-race-accretia .rd-pop-fill { color: #cbd5e1; }

/* ==========================================================
   DASHBOARD - ACCOUNT SECURITY
   ========================================================== */
.rd-sec { display: grid; gap: 9px; }
.rd-sec-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 13px;
  border: 1px solid var(--rd-border);
  border-radius: 13px;
  background: rgba(255, 255, 255, .018);
}
.rd-sec-icon {
  flex: 0 0 32px;
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  font-size: 15px;
  color: #a1a1a1;
  background: rgba(161, 161, 161, .1);
  border: 1px solid rgba(161, 161, 161, .18);
}
.rd-sec-row.rd-is-ok .rd-sec-icon { color: #4ade80; background: rgba(53, 208, 127, .1); border-color: rgba(53, 208, 127, .2); }
/* Amber, not red: an unprotected account is a prompt, not a failure. */
.rd-sec-row.rd-is-off .rd-sec-icon { color: #fbbf24; background: rgba(251, 191, 36, .1); border-color: rgba(251, 191, 36, .22); }
.rd-sec-row.rd-is-off { border-color: rgba(251, 191, 36, .19); }
.rd-sec-copy { flex: 1; min-width: 0; display: grid; gap: 1px; }
.rd-sec-copy strong { color: #e6e3dc; font-size: 12.5px; font-weight: 600; }
.rd-sec-copy small { color: var(--rd-muted-2); font-size: 11px; }
.rd-sec-go {
  flex: 0 0 auto;
  padding: 5px 11px;
  border-radius: 8px;
  color: var(--rd-accent-ink) !important;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  border: 1px solid rgba(var(--rd-accent-2-rgb), .24);
  background: rgba(var(--rd-accent-rgb), .1);
  transition: background .16s ease, border-color .16s ease, color .16s ease;
}
.rd-sec-go:hover { color: #fff !important; background: rgba(var(--rd-accent-rgb), .22); border-color: rgba(var(--rd-accent-ring-rgb), .5); }

/* ==========================================================
   DASHBOARD - COMMUNITY LINKS
   ========================================================== */
.rd-social { display: grid; gap: 9px; margin-top: 14px; }
.rd-social-link {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 13px;
  color: #e2dfd8 !important;
  border: 1px solid var(--rd-border);
  border-radius: 13px;
  background: rgba(255, 255, 255, .018);
  transition: transform .18s cubic-bezier(.2, .8, .3, 1), border-color .18s ease, background .18s ease;
}
.rd-social-link:hover { transform: translateY(-2px); color: #fff !important; }
.rd-social-icon {
  flex: 0 0 34px;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  font-size: 16px;
}
.rd-social-copy { flex: 1; min-width: 0; display: grid; gap: 1px; }
.rd-social-copy strong { font-size: 13px; font-weight: 600; }
.rd-social-copy small { color: var(--rd-muted-2); font-size: 11px; }
.rd-social-go { flex: 0 0 auto; color: var(--rd-muted-2); font-size: 12px; }

.rd-social-link.rd-is-facebook .rd-social-icon { color: #93c5fd; background: rgba(59, 130, 246, .14); border: 1px solid rgba(59, 130, 246, .24); }
.rd-social-link.rd-is-facebook:hover { border-color: rgba(59, 130, 246, .42); background: rgba(59, 130, 246, .08); }
.rd-social-link.rd-is-discord .rd-social-icon { color: #c7cdff; background: rgba(88, 101, 242, .16); border: 1px solid rgba(129, 140, 248, .26); }
.rd-social-link.rd-is-discord:hover { border-color: rgba(129, 140, 248, .46); background: rgba(88, 101, 242, .09); }

/* The shared auto-fit track packs these six tiles into a row of five with a
   stray on the end, and squeezes two-word labels onto three lines. The
   dashboard set is a fixed size, so it gets fixed columns and always
   divides evenly. */
.rd-dash .rd-action-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 1399.98px) {
  .rd-dash .rd-action-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 399.98px) {
  .rd-dash .rd-action-grid { grid-template-columns: minmax(0, 1fr); }
}

/* ==========================================================
   SIDEBAR - DASHBOARD ENTRY, LIVE CHIP, COMMUNITY FOOTER
   ========================================================== */
/* The Dashboard entry is not a section, so it is set apart from the bands
   below it rather than reading as the first item of the first one. */
.rd-nav .rd-nav-home { margin-bottom: 4px; }

/* Every section was drawing two arrows: the chevron this sheet builds from
   the <b class="caret"> the nav emits, and Bootstrap's own triangle on
   .dropdown-toggle. Only the chevron rotates when a section opens, so the
   triangle is the one that goes. */
.rd-nav .dropdown-toggle::after { display: none !important; }

/* Collapsed to icons, the chip has no room for its reading - but the pulse
   is the part that says the realm is up, so that much stays. */
body.rd-sidebar-collapsed .rd-server-chip .rd-live-dot { display: block !important; }

.rd-server-chip.rd-is-link { color: #d6d3cc !important; text-decoration: none !important; transition: border-color .16s ease, background .16s ease; }
.rd-server-chip.rd-is-link:hover { border-color: rgba(53, 208, 127, .3); background: rgba(53, 208, 127, .09); }
.rd-chip-copy { min-width: 0; display: grid; gap: 1px; line-height: 1.25; }
.rd-chip-copy strong { color: #f0ede6; font-size: 12px; font-weight: 700; }
.rd-chip-copy small { color: var(--rd-muted); font-size: 10.5px; font-weight: 600; letter-spacing: 0; text-transform: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rd-chip-go { margin-left: auto; color: var(--rd-muted-2); font-size: 11px; }

.rd-side-socials { flex: 0 0 auto; display: flex; gap: 6px; }
.rd-side-social {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: 9px;
  color: #b1afab !important;
  font-size: 13px;
  border: 1px solid var(--rd-border);
  transition: color .16s ease, background .16s ease, border-color .16s ease;
}
.rd-side-social.rd-is-facebook:hover { color: #93c5fd !important; background: rgba(59, 130, 246, .12); border-color: rgba(59, 130, 246, .32); }
.rd-side-social.rd-is-discord:hover { color: #c7cdff !important; background: rgba(88, 101, 242, .14); border-color: rgba(129, 140, 248, .34); }

body.rd-sidebar-collapsed .rd-chip-copy,
body.rd-sidebar-collapsed .rd-chip-go { display: none !important; }

@media (max-width: 991.98px) {
  .rd-dash-hero { padding: 20px; }
  .rd-hero-side { width: 100%; justify-content: space-between; }
}

@media (max-width: 575.98px) {
  .rd-dash-hero { gap: 18px; padding: 18px 16px; }
  .rd-hero-avatar { flex-basis: 48px; width: 48px; height: 48px; font-size: 20px; }
  .rd-hero-copy h2 { font-size: 23px; }
  .rd-hero-side { flex-direction: column; align-items: flex-start; gap: 16px; }
  .rd-hero-actions { width: 100%; }
  .rd-hero-actions .rd-cta { flex: 1; }
  .rd-roster-row { gap: 11px; padding: 11px; }
  .rd-roster-sigil { flex-basis: 40px; width: 40px; height: 40px; }
  .rd-roster-lv { min-width: 48px; padding: 6px 8px; }
  .rd-roster-meta { gap: 4px 11px; }
  .rd-pop-name { flex-basis: 88px; }
  .rd-pop-total { font-size: 32px; }
}

@media (prefers-reduced-motion: reduce) {
  .rd-pop-fill { animation: none; }
}

/* ==========================================================
   DASHBOARD - KEY ART, RACE IDENTITY AND MOTION
   ========================================================== */
/* The welcome banner carries the same key art as the public sign-in, turned
   to the shell's blue. It shows through the open middle of the banner,
   between the name and the server clock, and is held back under both so
   neither has art behind its text. It replaces the old accent sweep. */
.rd-dash-hero { isolation: isolate; }
.rd-dash-hero::before,
.rd-dash-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  width: auto;
  z-index: -1;
  pointer-events: none;
}
.rd-dash-hero::before {
  background: url("../img/auth/rf-key-art.webp") 72% 66% / cover no-repeat;
  /* Same as the auth backdrop: the 185deg turn was for the old blue shell.
     Held back rather than recoloured, so the gold stays the only colour
     with anything to say on the dashboard. */
  filter: saturate(.62) brightness(.72);
  -webkit-mask-image: linear-gradient(90deg, transparent 8%, rgba(0, 0, 0, .55) 36%, #000 62%);
  mask-image: linear-gradient(90deg, transparent 8%, rgba(0, 0, 0, .55) 36%, #000 62%);
}
.rd-dash-hero::after {
  background:
    linear-gradient(90deg, rgba(20, 20, 20, .9) 0%, rgba(20, 20, 20, .5) 40%, rgba(20, 20, 20, .35) 52%, rgba(20, 20, 20, .88) 66%, rgba(20, 20, 20, .92) 100%),
    radial-gradient(120% 160% at 0% 0%, rgba(var(--rd-accent-rgb), .16), transparent 58%);
}

/* The avatar shows the crest of the account's leading race, on that race's
   colours; the initial stays underneath for an account with no character. */
.rd-hero-avatar[class*="rd-race-"] { font-size: 0; }
.rd-hero-avatar.rd-race-bellato {
  background: url("../img/race/bellato-crest.webp") center / 74% no-repeat, linear-gradient(140deg, #60a5fa, #1d4ed8);
}
.rd-hero-avatar.rd-race-cora {
  background: url("../img/race/cora-crest.webp") center / 74% no-repeat, linear-gradient(140deg, #c084fc, #6d28d9);
}
.rd-hero-avatar.rd-race-accretia {
  background: url("../img/race/accretia-crest.webp") center / 74% no-repeat, linear-gradient(140deg, #94a3b8, #334155);
}

/* Figures line up as they change, and each tile catches a top-edge light on
   hover like the sign-in tiles. */
.rd-stat-value { font-variant-numeric: tabular-nums; }
.rd-stat::after,
.rd-action::after {
  content: "";
  position: absolute;
  inset: 0 18% auto;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(var(--rd-accent-2-rgb), .7), transparent);
  opacity: 0;
  transition: opacity .25s ease;
}
.rd-stat:hover::after,
.rd-action:hover::after { opacity: 1; }
.rd-action-icon i { display: inline-block; transition: transform .35s cubic-bezier(.16, 1, .3, 1); }
.rd-action:hover .rd-action-icon {
  color: var(--rd-btn-ink);
  background: linear-gradient(140deg, var(--rd-accent-2), var(--rd-accent-deep));
  border-color: transparent;
  box-shadow: 0 8px 18px rgba(var(--rd-accent-hover-rgb), .35);
}
.rd-action:hover .rd-action-icon i { transform: scale(1.12) rotate(-6deg); }

/* Each character row is marked by its race: a soft wash of the race colour
   from the sigil side, the race crest set large and faint behind the level,
   and the level badge in the same colour. */
.rd-roster-row { position: relative; overflow: hidden; isolation: isolate; --rd-race: 161, 161, 161; }
.rd-roster-row:has(.rd-race-bellato) { --rd-race: 96, 165, 250; --rd-crest: url("../img/race/bellato-crest.webp"); }
.rd-roster-row:has(.rd-race-cora) { --rd-race: 192, 132, 252; --rd-crest: url("../img/race/cora-crest.webp"); }
.rd-roster-row:has(.rd-race-accretia) { --rd-race: 203, 213, 225; --rd-crest: url("../img/race/accretia-crest.webp"); }
.rd-roster-row {
  background: linear-gradient(90deg, rgba(var(--rd-race), .1), rgba(var(--rd-race), 0) 46%), rgba(255, 255, 255, .018);
  transition: border-color .18s ease, background .18s ease, transform .18s cubic-bezier(.2, .8, .3, 1);
}
.rd-roster-row::after {
  content: "";
  position: absolute;
  top: 50%;
  right: -22px;
  z-index: -1;
  width: 132px;
  height: 132px;
  transform: translateY(-50%) rotate(-8deg);
  background: var(--rd-crest, none) center / contain no-repeat;
  opacity: .07;
  pointer-events: none;
  transition: opacity .3s ease, transform .5s cubic-bezier(.16, 1, .3, 1);
}
.rd-roster-row:hover {
  transform: translateY(-2px);
  border-color: rgba(var(--rd-race), .34);
  background: linear-gradient(90deg, rgba(var(--rd-race), .15), rgba(var(--rd-race), 0) 52%), rgba(255, 255, 255, .03);
}
.rd-roster-row:hover::after { opacity: .13; transform: translateY(-50%) rotate(0deg) scale(1.06); }
.rd-roster-lv { background: rgba(var(--rd-race), .12); border-color: rgba(var(--rd-race), .3); }

/* The live population icon keeps a slow pulse while the realm is up. */
.rd-stat-icon.rd-is-good .bi-broadcast { display: inline-block; animation: rdLivePulse 2.4s ease-in-out infinite; }

/* Arrival: the banner, figures, shortcuts and panels rise in reading order,
   all landed in well under a second. */
.rd-dash > .rd-dash-hero,
.rd-dash > .rd-stat-grid > .rd-stat,
.rd-dash > .rd-panel,
.rd-dash-grid .rd-panel {
  animation: rdRise .65s cubic-bezier(.16, 1, .3, 1) backwards;
}
.rd-dash > .rd-stat-grid > .rd-stat:nth-child(1) { animation-delay: .08s; }
.rd-dash > .rd-stat-grid > .rd-stat:nth-child(2) { animation-delay: .12s; }
.rd-dash > .rd-stat-grid > .rd-stat:nth-child(3) { animation-delay: .16s; }
.rd-dash > .rd-stat-grid > .rd-stat:nth-child(4) { animation-delay: .2s; }
.rd-dash > .rd-panel { animation-delay: .24s; }
.rd-dash-grid > div:first-child > .rd-panel:nth-child(1) { animation-delay: .3s; }
.rd-dash-grid > div:first-child > .rd-panel:nth-child(2) { animation-delay: .38s; }
.rd-dash-grid > div:last-child > .rd-panel:nth-child(1) { animation-delay: .34s; }
.rd-dash-grid > div:last-child > .rd-panel:nth-child(2) { animation-delay: .42s; }
.rd-dash-grid > div:last-child > .rd-panel:nth-child(3) { animation-delay: .5s; }

/* On a phone the four figures and six shortcuts sit two to a row instead of
   one, and a shortcut stacks its icon over its label to fit the half width.
   The two banner buttons share the row evenly rather than running off it. */
@media (max-width: 575.98px) {
  .rd-dash-hero::before { background-position: 64% 62%; -webkit-mask-image: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, .7) 45%, #000 100%); mask-image: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, .7) 45%, #000 100%); }
  .rd-dash-hero::after { background: linear-gradient(180deg, rgba(20, 20, 20, .92) 0%, rgba(20, 20, 20, .6) 55%, rgba(20, 20, 20, .82) 100%); }
  .rd-stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .rd-stat { padding: 14px 14px 13px; }
  .rd-stat-top { margin-bottom: 10px; }
  .rd-stat-value { font-size: 22px; }
  .rd-dash .rd-action-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .rd-dash .rd-action { flex-direction: column; align-items: flex-start; gap: 10px; padding: 13px; }
  .rd-hero-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rd-hero-actions .rd-cta { min-width: 0; padding-inline: 10px; }
  .rd-roster-row::after { width: 104px; height: 104px; right: -26px; }
}

@media (prefers-reduced-motion: reduce) {
  .rd-dash > .rd-dash-hero,
  .rd-dash > .rd-stat-grid > .rd-stat,
  .rd-dash > .rd-panel,
  .rd-dash-grid .rd-panel,
  .rd-stat-icon.rd-is-good .bi-broadcast { animation: none; }
  .rd-action:hover .rd-action-icon i,
  .rd-roster-row:hover { transform: none; }
  .rd-roster-row:hover::after { transform: translateY(-50%) rotate(-8deg); }
}

/* ==========================================================
   TOP-UP STORE - BANNER, PACKAGE FACES AND MOTION
   ========================================================== */
/* The banner opens the store on the game's own art, says what a purchase
   involves in three steps, and sets the reassurances beside it. */
.rd-store-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  align-items: center;
  gap: 22px 28px;
  margin-bottom: 18px;
  padding: 26px 28px;
  border: 1px solid rgba(var(--rd-accent-2-rgb), .18);
  border-radius: 16px;
  background: #0a0a0a;
  animation: rdRise .65s cubic-bezier(.16, 1, .3, 1) backwards;
}
.rd-store-hero::before,
.rd-store-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}
.rd-store-hero::before {
  background: url("../img/auth/rf-key-art.webp") 70% 64% / cover no-repeat;
  /* The same 185deg turn the dashboard and auth backdrops carried, for the
     same reason and dropped for the same one. */
  filter: saturate(.62) brightness(.76);
}
.rd-store-hero::after {
  background:
    linear-gradient(90deg, rgba(10, 10, 10, .95) 0%, rgba(10, 10, 10, .72) 46%, rgba(10, 10, 10, .5) 100%),
    radial-gradient(90% 140% at 0% 0%, rgba(var(--rd-accent-rgb), .2), transparent 60%);
}
.rd-store-hero-copy h3 {
  margin: 0 0 6px;
  color: #fff;
  font-family: var(--rd-display-font) !important;
  font-size: clamp(22px, 2.4vw, 28px);
  font-weight: 700;
  letter-spacing: -.025em;
  line-height: 1.15;
}
.rd-store-hero-copy p { margin: 0; color: #c4c2be; font-size: 13.5px; line-height: 1.6; }
.rd-store-steps {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 16px 0 0;
  padding: 0;
  list-style: none;
}
.rd-store-steps li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 13px 5px 5px;
  color: #efece5;
  font-size: 12.5px;
  font-weight: 650;
  border: 1px solid rgba(var(--rd-accent-2-rgb), .22);
  border-radius: 999px;
  background: rgba(10, 10, 10, .6);
}
.rd-store-steps li > span {
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  color: var(--rd-btn-ink);
  font-size: 11px;
  font-weight: 800;
  border-radius: 50%;
  background: linear-gradient(140deg, var(--rd-accent-2), var(--rd-accent-deep));
}
.rd-store-assure { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.rd-store-assure li {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 10px 13px;
  color: #d7d4cd;
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.4;
  border: 1px solid var(--rd-border);
  border-radius: 12px;
  background: rgba(10, 10, 10, .62);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
.rd-store-assure li > i { flex: 0 0 auto; color: var(--rd-accent-2); font-size: 15px; }
.rd-store-assure a { color: var(--rd-accent-2) !important; font-weight: 700; }

/* A category with nothing in it stays reachable but steps back. */
.rd-chip.rd-is-empty { opacity: .45; }
.rd-chip.rd-is-empty:hover { opacity: .8; }

/* Package cards take their race's colour where the name gives one - the
   accent blue otherwise - and carry it through the art well, the crest
   behind it, the tag, the reward icons and the hover edge. */
.rd-pack { --rd-race: var(--rd-accent-2-rgb); position: relative; border-radius: 16px; background: linear-gradient(180deg, rgba(29, 29, 29, .94), rgba(13, 13, 13, .97)); }
.rd-pack.rd-race-bellato { --rd-race: 96, 165, 250; --rd-crest: url("../img/race/bellato-crest.webp"); }
.rd-pack.rd-race-cora { --rd-race: 192, 132, 252; --rd-crest: url("../img/race/cora-crest.webp"); }
.rd-pack.rd-race-accretia { --rd-race: 203, 213, 225; --rd-crest: url("../img/race/accretia-crest.webp"); }
.rd-pack {
  transition: transform .25s cubic-bezier(.2, .8, .3, 1), border-color .2s ease, box-shadow .25s ease;
}
.rd-pack:hover {
  transform: translateY(-4px);
  border-color: rgba(var(--rd-race), .45);
  background: linear-gradient(180deg, rgba(29, 29, 29, .96), rgba(17, 17, 17, .98));
  box-shadow: 0 18px 38px rgba(0, 0, 0, .42);
}
.rd-pack-art {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background:
    radial-gradient(70% 85% at 50% 45%, rgba(var(--rd-race), .26), transparent 72%),
    linear-gradient(160deg, rgba(var(--rd-race), .12), rgba(10, 10, 10, .92) 70%);
}
.rd-pack-art::before {
  content: "";
  position: absolute;
  right: -34px;
  bottom: -40px;
  z-index: -1;
  width: 170px;
  height: 170px;
  background: var(--rd-crest, none) center / contain no-repeat;
  opacity: .12;
  transform: rotate(-10deg);
  transition: transform .6s cubic-bezier(.16, 1, .3, 1), opacity .3s ease;
  pointer-events: none;
}
.rd-pack:hover .rd-pack-art::before { opacity: .2; transform: rotate(0deg) scale(1.06); }
.rd-pack-art img {
  filter: drop-shadow(0 10px 18px rgba(0, 0, 0, .45));
  transition: transform .45s cubic-bezier(.16, 1, .3, 1);
}
.rd-pack:hover .rd-pack-art img { transform: scale(1.05); }

/* The generated face: a lit medallion bearing the class mark (or the
   category's, for a package with no class), with a slow orbit ring that
   turns while the card is pointed at. */
.rd-pack-medal {
  position: relative;
  width: 84px;
  height: 84px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #fff;
  font-size: 34px;
  border: 1px solid rgba(255, 255, 255, .28);
  background:
    radial-gradient(circle at 34% 28%, rgba(255, 255, 255, .38), transparent 46%),
    linear-gradient(145deg, rgba(var(--rd-race), .95), rgba(var(--rd-race), .28));
  box-shadow: 0 14px 30px rgba(var(--rd-race), .3), inset 0 1px 0 rgba(255, 255, 255, .4);
  transition: transform .45s cubic-bezier(.16, 1, .3, 1);
}
.rd-pack-medal::before {
  content: "";
  position: absolute;
  inset: -11px;
  border: 1px dashed rgba(var(--rd-race), .5);
  border-radius: 50%;
  animation: rdSpin 22s linear infinite paused;
}
.rd-pack-medal i { text-shadow: 0 2px 8px rgba(0, 0, 0, .35); }
.rd-pack:hover .rd-pack-medal { transform: scale(1.06); }
.rd-pack:hover .rd-pack-medal::before { animation-play-state: running; }

.rd-pack-tag {
  position: absolute;
  top: 10px;
  left: 10px;
  padding: 4px 10px;
  color: #fff;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  border: 1px solid rgba(var(--rd-race), .5);
  border-radius: 999px;
  background: rgba(10, 10, 10, .62);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

.rd-pack-copy > strong { color: #fff; font-size: 14.5px; font-weight: 700; letter-spacing: -.01em; }
.rd-pack-loot li > i { color: rgb(var(--rd-race)); }
.rd-pack-foot { background: rgba(10, 10, 10, .45); }
.rd-pack .rd-shopcard-price b { color: #fff; font-size: 19px; }
.rd-pack .rd-shopcard-price small { color: rgba(var(--rd-race), .85); font-weight: 700; }

/* The grid deals in, a beat apart, on arrival. */
.rd-packgrid > .rd-pack { animation: rdRise .6s cubic-bezier(.16, 1, .3, 1) backwards; }
.rd-packgrid > .rd-pack:nth-child(2) { animation-delay: .04s; }
.rd-packgrid > .rd-pack:nth-child(3) { animation-delay: .08s; }
.rd-packgrid > .rd-pack:nth-child(4) { animation-delay: .12s; }
.rd-packgrid > .rd-pack:nth-child(5) { animation-delay: .16s; }
.rd-packgrid > .rd-pack:nth-child(6) { animation-delay: .2s; }
.rd-packgrid > .rd-pack:nth-child(7) { animation-delay: .24s; }
.rd-packgrid > .rd-pack:nth-child(8) { animation-delay: .28s; }
.rd-packgrid > .rd-pack:nth-child(n+9) { animation-delay: .32s; }

@media (max-width: 767.98px) {
  .rd-store-hero { grid-template-columns: minmax(0, 1fr); padding: 20px 18px; }
  .rd-store-hero::after { background: linear-gradient(180deg, rgba(10, 10, 10, .82) 0%, rgba(10, 10, 10, .9) 100%); }
  .rd-pack-art { aspect-ratio: 16 / 8; }
}

/* On a phone a package is a compact row: the art as a square on the left,
   name and contents beside it, price and Buy across the foot. The tag is
   dropped there - the name already says the same thing. */
@media (max-width: 575.98px) {
  .rd-store-assure li { padding: 8px 11px; font-size: 12px; }
  .rd-pack form {
    display: grid;
    grid-template-columns: 96px minmax(0, 1fr);
    grid-template-areas: "art copy" "foot foot";
  }
  .rd-pack-art { grid-area: art; aspect-ratio: 1 / 1; padding: 8px; border-bottom: 0; border-right: 1px solid var(--rd-border); }
  .rd-pack-copy { grid-area: copy; padding: 12px 13px; }
  .rd-pack-foot { grid-area: foot; }
  .rd-pack-medal { width: 52px; height: 52px; font-size: 22px; }
  .rd-pack-medal::before { inset: -7px; }
  .rd-pack-tag { display: none; }
  .rd-pack-art::before { width: 104px; height: 104px; right: -38px; bottom: -38px; }
}

@media (prefers-reduced-motion: reduce) {
  .rd-store-hero,
  .rd-packgrid > .rd-pack,
  .rd-pack-medal::before { animation: none; }
  .rd-pack:hover,
  .rd-pack:hover .rd-pack-art img,
  .rd-pack:hover .rd-pack-medal { transform: none; }
}

/* ==========================================================================
   AUCTION - Character Marketplace + Item Auction
   ==========================================================================
   The auction is where Cash Points actually leave a player's balance, so the
   price is the loudest thing on every surface and the confirm dialog reads as
   a receipt rather than a grid of boxes.

   Everything tints through --rd-accent-*, so the Theme Designer recolours the
   whole marketplace. The three faction identities are the deliberate
   exception - Bellato is blue, Cora violet, Accretia steel because the game
   says so - and they travel on --rd-auc-f, a bare "r, g, b" triplet each
   faction element re-declares for its own subtree.
   ========================================================================== */

.rd-auc-faction { --rd-auc-f: var(--rd-accent-2-rgb); }
.rd-auc-faction.rd-race-bellato  { --rd-auc-f: 96, 165, 250; }
.rd-auc-faction.rd-race-cora     { --rd-auc-f: 192, 132, 252; }
.rd-auc-faction.rd-race-accretia { --rd-auc-f: 148, 163, 184; }

/* --- Faction crest -------------------------------------------------------
   Same cut-corner geometry as .rd-cta and .rd-idcard-sigil, so the auction
   reads as part of the panel rather than a visiting design. */
.rd-auc-crest {
  --rd-auc-crest-size: 56px;
  --rd-auc-crest-cut: 13px;
  flex: 0 0 var(--rd-auc-crest-size);
  width: var(--rd-auc-crest-size);
  height: var(--rd-auc-crest-size);
  display: grid;
  place-items: center;
  color: #101010;
  font-size: 22px;
  background: linear-gradient(140deg, var(--rd-accent-2), var(--rd-accent-deep));
  clip-path: polygon(
    var(--rd-auc-crest-cut) 0,
    100% 0,
    100% calc(100% - var(--rd-auc-crest-cut)),
    calc(100% - var(--rd-auc-crest-cut)) 100%,
    0 100%,
    0 var(--rd-auc-crest-cut)
  );
  transition: filter .22s ease, transform .22s cubic-bezier(.2, .8, .3, 1);
}
.rd-auc-crest img {
  width: calc(var(--rd-auc-crest-size) * .62);
  height: calc(var(--rd-auc-crest-size) * .62);
  object-fit: contain;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .45));
}
.rd-auc-crest-sm { --rd-auc-crest-size: 40px; --rd-auc-crest-cut: 9px; font-size: 16px; }
.rd-auc-crest-lg { --rd-auc-crest-size: 64px; --rd-auc-crest-cut: 15px; font-size: 26px; }
.rd-auc-crest.rd-race-bellato  { background: linear-gradient(140deg, #7cb8ff, #1d4ed8); }
.rd-auc-crest.rd-race-cora     { background: linear-gradient(140deg, #d3a6ff, #6d28d9); }
.rd-auc-crest.rd-race-accretia { background: linear-gradient(140deg, #b6c2d1, #334155); }

/* --- Price ---------------------------------------------------------------
   A price that wraps stops being a price and becomes two numbers, so the
   figure never breaks and always uses tabular numerals: digits line up
   between one listing and the next, which is the whole point of a market. */
.rd-auc-price { display: block; min-width: 0; }
.rd-auc-price b {
  display: block;
  color: #ffffff;
  font-family: var(--rd-display-font) !important;
  font-size: 25px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.03em;
  line-height: 1.05;
  white-space: nowrap;
}
.rd-auc-price small {
  display: block;
  margin-top: 4px;
  color: var(--rd-muted);
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: .15em;
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
}
.rd-auc-price-lead b { font-size: 34px; letter-spacing: -.035em; }
.rd-auc-price-lead small { margin-top: 6px; color: var(--rd-accent-ink); }

/* --- Listing shelf -------------------------------------------------------- */
.rd-auc-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 306px), 1fr));
  gap: 16px;
}
.rd-auc-card {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 18px;
  border: 1px solid var(--rd-border);
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(29, 29, 29, .92), rgba(20, 20, 20, .95));
  transition: transform .24s cubic-bezier(.2, .8, .3, 1), border-color .24s ease, box-shadow .24s ease;
}
/* Faction identity as a wash bleeding out of the crest, not a coloured
   stripe: the card is tinted by who owns it without a bar of chrome. */
.rd-auc-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: radial-gradient(420px 190px at 0% 0%, rgba(var(--rd-auc-f), .16), transparent 68%);
  opacity: .85;
  transition: opacity .24s ease;
  pointer-events: none;
}
.rd-auc-card:hover {
  transform: translateY(-4px);
  border-color: rgba(var(--rd-auc-f), .42);
  box-shadow: 0 20px 40px -14px rgba(0, 0, 0, .68);
}
.rd-auc-card:hover::before { opacity: 1; }
.rd-auc-card:hover .rd-auc-crest { filter: brightness(1.12); transform: translateY(-1px); }
.rd-auc-card:focus-within {
  border-color: rgba(var(--rd-auc-f), .5);
  box-shadow: 0 20px 40px -14px rgba(0, 0, 0, .68);
}

.rd-auc-card-head { display: flex; align-items: center; gap: 14px; min-width: 0; }
.rd-auc-card-id { min-width: 0; }
.rd-auc-card-id h3 {
  margin: 0;
  overflow: hidden;
  color: #ffffff;
  font-family: var(--rd-display-font) !important;
  font-size: 16.5px;
  font-weight: 600;
  letter-spacing: -.02em;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.rd-auc-card-id p {
  margin: 4px 0 0;
  color: rgba(var(--rd-auc-f), .95);
  font-size: 11.5px;
  font-weight: 600;
  line-height: 1.4;
}

.rd-auc-pricebar {
  padding: 13px 15px;
  border: 1px solid rgba(var(--rd-accent-2-rgb), .16);
  border-radius: 11px;
  background: linear-gradient(135deg, rgba(var(--rd-accent-rgb), .15), rgba(var(--rd-accent-rgb), .04));
}

/* --- Comparison figures --------------------------------------------------
   Two tracks, not four: a 306px card cannot hold four eight-digit RF figures
   side by side without clipping them, and clipped money is worse than none. */
.rd-auc-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 0; }
.rd-auc-stat {
  min-width: 0;
  padding: 9px 11px;
  border: 1px solid var(--rd-border);
  border-radius: 10px;
  background: rgba(255, 255, 255, .02);
}
.rd-auc-stat dt {
  color: var(--rd-muted);
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: .13em;
  line-height: 1;
  text-transform: uppercase;
}
.rd-auc-stat dd {
  margin: 6px 0 0;
  overflow: hidden;
  color: #f0ede6;
  font-size: 13.5px;
  font-weight: 650;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.rd-auc-card-actions { display: flex; flex-wrap: wrap; gap: 9px; margin-top: auto; }
.rd-auc-card-actions .rd-cta { flex: 1 1 128px; }

/* --- Item listing row ----------------------------------------------------- */
.rd-auc-rows { display: grid; gap: 9px; }
.rd-auc-listing {
  display: flex;
  align-items: center;
  gap: 15px;
  padding: 11px 15px;
  border: 1px solid var(--rd-border);
  border-radius: 13px;
  background: linear-gradient(180deg, rgba(29, 29, 29, .84), rgba(20, 20, 20, .9));
  transition: transform .2s cubic-bezier(.2, .8, .3, 1), border-color .2s ease, background .2s ease;
}
.rd-auc-listing:hover {
  transform: translateX(3px);
  border-color: rgba(var(--rd-accent-2-rgb), .34);
  background: linear-gradient(180deg, rgba(38, 38, 38, .9), rgba(20, 20, 20, .92));
}
.rd-auc-listing:hover .rd-auc-listing-thumb { border-color: rgba(var(--rd-accent-2-rgb), .38); }
.rd-auc-listing-thumb {
  position: relative;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  padding: 5px;
  border: 1px solid var(--rd-border);
  border-radius: 11px;
  background: rgba(0, 0, 0, .3);
  transition: border-color .2s ease;
}
/* Stack count rides the icon the way it does in the player's own inventory,
   instead of taking a column of its own that is empty on most rows. */
.rd-auc-qty {
  position: absolute;
  right: -5px;
  bottom: -5px;
  padding: 2px 6px;
  color: #111111;
  font-size: 10px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  line-height: 1.3;
  background: var(--rd-accent-2);
  border-radius: 7px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .5);
}
.rd-auc-listing-copy { flex: 1 1 auto; min-width: 0; }
.rd-auc-listing-copy strong {
  display: block;
  color: #f8f5ee;
  font-size: 14px;
  font-weight: 650;
  letter-spacing: -.01em;
  line-height: 1.35;
}
.rd-auc-listing-copy small {
  display: block;
  margin-top: 3px;
  color: var(--rd-muted);
  font-size: 11.5px;
  line-height: 1.4;
}
.rd-auc-listing-price { flex: 0 0 auto; text-align: right; }
.rd-auc-listing-price .rd-auc-price b { font-size: 19px; }
.rd-auc-listing-actions { flex: 0 0 auto; }

/* --- Filter rail ---------------------------------------------------------- */
.rd-auc-shell { display: flex; align-items: flex-start; gap: 18px; }
.rd-auc-rail { position: sticky; top: 88px; flex: 0 0 234px; max-width: 234px; display: grid; gap: 12px; }
.rd-auc-main { flex: 1 1 auto; min-width: 0; }
.rd-auc-rail-title {
  margin: 0 0 2px;
  color: var(--rd-muted);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
}

/* Faction picker: four crest tiles, so a race is chosen by its emblem rather
   than by reading three similar words. */
.rd-auc-factions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.rd-auc-faction-tile {
  display: grid;
  justify-items: center;
  gap: 5px;
  padding: 9px 3px 7px;
  color: var(--rd-muted) !important;
  text-decoration: none !important;
  border: 1px solid var(--rd-border);
  border-radius: 11px;
  background: rgba(255, 255, 255, .02);
  transition: border-color .18s ease, background .18s ease, color .18s ease;
}
.rd-auc-faction-tile img,
.rd-auc-faction-tile > i {
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  object-fit: contain;
  font-size: 13px;
  opacity: .72;
  transition: opacity .18s ease, filter .18s ease;
}
.rd-auc-faction-tile b {
  font-size: 11px;
  font-weight: 750;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.rd-auc-faction-tile span {
  overflow: hidden;
  max-width: 100%;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .05em;
  line-height: 1;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}
.rd-auc-faction-tile:hover {
  color: #f0ede6 !important;
  border-color: rgba(var(--rd-auc-f), .38);
  background: rgba(var(--rd-auc-f), .1);
}
.rd-auc-faction-tile:hover img,
.rd-auc-faction-tile:hover > i { opacity: 1; }
.rd-auc-faction-tile:focus-visible { outline: 2px solid rgba(var(--rd-accent-2-rgb), .65); outline-offset: 2px; }
.rd-auc-faction-tile.rd-is-active {
  color: #ffffff !important;
  border-color: rgba(var(--rd-auc-f), .58);
  background: rgba(var(--rd-auc-f), .18);
}
.rd-auc-faction-tile.rd-is-active img,
.rd-auc-faction-tile.rd-is-active > i { opacity: 1; filter: drop-shadow(0 0 6px rgba(var(--rd-auc-f), .7)); }
.rd-auc-faction-tile.rd-is-void { opacity: .42; }

.rd-auc-cats { list-style: none; margin: 0; padding: 0; border: 1px solid var(--rd-border); border-radius: 12px; overflow: hidden; }
.rd-auc-cats a {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 13px;
  color: #d1cec7 !important;
  font-size: 12.5px;
  text-decoration: none !important;
  border-bottom: 1px solid var(--rd-border);
  transition: background .16s ease, color .16s ease;
}
.rd-auc-cats a:last-child { border-bottom: 0; }
.rd-auc-cats a > span:first-child { display: inline-flex; align-items: center; gap: 9px; min-width: 0; }
.rd-auc-cats a i { color: var(--rd-muted); font-size: 13px; transition: color .16s ease; }
.rd-auc-cats a:hover { color: #ffffff !important; background: rgba(255, 255, 255, .045); }
.rd-auc-cats a:hover i { color: var(--rd-accent-2); }
.rd-auc-cats a:focus-visible { outline: 2px solid rgba(var(--rd-accent-2-rgb), .65); outline-offset: -2px; }
.rd-auc-cats a.rd-is-active { color: #ffffff !important; background: rgba(var(--rd-accent-rgb), .17); }
.rd-auc-cats a.rd-is-active i { color: var(--rd-accent-2); }
/* The active group is marked on its inner edge, where the eye already is,
   rather than by inventing a second colour for the row. */
.rd-auc-cats a.rd-is-active::before {
  content: "";
  position: absolute;
  left: 0;
  top: 8px;
  bottom: 8px;
  width: 2px;
  background: var(--rd-accent-2);
  border-radius: 0 2px 2px 0;
}
.rd-auc-count {
  flex: 0 0 auto;
  padding: 2px 8px;
  color: var(--rd-muted);
  font-size: 10.5px;
  font-weight: 750;
  font-variant-numeric: tabular-nums;
  background: rgba(255, 255, 255, .045);
  border-radius: 20px;
}
.rd-auc-cats a.rd-is-active .rd-auc-count { color: var(--rd-accent-ink); background: rgba(var(--rd-accent-2-rgb), .24); }
.rd-auc-subs { display: flex; flex-direction: column; background: rgba(0, 0, 0, .28); border-bottom: 1px solid var(--rd-border); }
.rd-auc-subs a { padding: 7px 13px 7px 34px; color: var(--rd-muted) !important; font-size: 11.5px; border-bottom: 0; }
.rd-auc-subs a.rd-is-active { color: #ffffff !important; background: rgba(var(--rd-accent-rgb), .13); }
.rd-auc-subs a.rd-is-active::before { display: none; }

/* --- Toolbar and active filters ------------------------------------------- */
.rd-auc-toolbar { display: grid; gap: 10px; margin-bottom: 15px; }
.rd-auc-search { display: flex; flex-wrap: wrap; align-items: center; gap: 9px; }
.rd-auc-search .rd-input { flex: 1 1 260px; min-width: 0; }
.rd-auc-search .form-select { flex: 0 0 auto; width: auto; min-width: 176px; }
.rd-auc-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; }
.rd-auc-chips-label {
  color: var(--rd-muted);
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: .13em;
  text-transform: uppercase;
}
.rd-auc-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  color: var(--rd-accent-ink) !important;
  font-size: 11.5px;
  text-decoration: none !important;
  border: 1px solid rgba(var(--rd-accent-2-rgb), .3);
  border-radius: 20px;
  background: rgba(var(--rd-accent-rgb), .13);
  transition: border-color .16s ease, background .16s ease, color .16s ease;
}
.rd-auc-chip span { color: var(--rd-muted); }
.rd-auc-chip b { font-weight: 700; }
.rd-auc-chip i { font-size: 12px; opacity: .8; }
.rd-auc-chip:hover { color: #ffffff !important; border-color: rgba(var(--rd-accent-ring-rgb), .6); background: rgba(var(--rd-accent-rgb), .22); }
.rd-auc-chip:hover span { color: var(--rd-accent-ink); }
.rd-auc-chip:focus-visible { outline: 2px solid rgba(var(--rd-accent-2-rgb), .65); outline-offset: 2px; }
.rd-auc-chip-clear { color: var(--rd-muted) !important; border-color: var(--rd-border); background: transparent; }
.rd-auc-chip-clear:hover { color: #ffffff !important; background: rgba(255, 255, 255, .06); }

/* --- Pager ----------------------------------------------------------------- */
.rd-auc-pager { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin-top: 18px; }
.rd-auc-pager a,
.rd-auc-pager span {
  min-width: 36px;
  padding: 7px 11px;
  color: var(--rd-muted) !important;
  font-size: 12px;
  font-weight: 650;
  font-variant-numeric: tabular-nums;
  text-align: center;
  text-decoration: none !important;
  border: 1px solid var(--rd-border);
  border-radius: 9px;
  transition: border-color .16s ease, background .16s ease, color .16s ease;
}
.rd-auc-pager a:hover { color: #ffffff !important; border-color: rgba(var(--rd-accent-2-rgb), .4); background: rgba(var(--rd-accent-rgb), .12); }
.rd-auc-pager a:focus-visible { outline: 2px solid rgba(var(--rd-accent-2-rgb), .65); outline-offset: 2px; }
.rd-auc-pager .rd-auc-pager-gap { border-color: transparent; }
.rd-auc-pager .rd-auc-pager-cur {
  color: var(--rd-accent-ink) !important;
  border-color: rgba(var(--rd-accent-2-rgb), .5);
  background: rgba(var(--rd-accent-rgb), .24);
}

/* --- Confirm dialog -------------------------------------------------------
   Replaces the four-column figure grid, which broke "22,222 Cash Point" over
   three lines and left ragged empty cells whenever the fact count was not a
   multiple of four. */
.rd-auc-modal .modal-body { padding: 20px 22px; }
.rd-auc-subject { display: flex; align-items: center; gap: 14px; min-width: 0; }
.rd-auc-subject-copy { min-width: 0; }
.rd-auc-subject-copy h3 {
  margin: 0;
  color: #ffffff;
  font-family: var(--rd-display-font) !important;
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -.02em;
  line-height: 1.25;
}
.rd-auc-subject-copy p { margin: 4px 0 0; color: var(--rd-muted); font-size: 12px; line-height: 1.45; }

.rd-auc-total {
  display: grid;
  gap: 2px;
  margin: 18px 0;
  padding: 16px 18px;
  border: 1px solid rgba(var(--rd-accent-2-rgb), .22);
  border-radius: 13px;
  background: linear-gradient(135deg, rgba(var(--rd-accent-rgb), .2), rgba(var(--rd-accent-rgb), .05));
}
.rd-auc-total-label {
  color: var(--rd-muted);
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: .15em;
  text-transform: uppercase;
}
.rd-auc-total .rd-auc-price { margin-top: 6px; }
.rd-auc-total-note { margin-top: 8px; color: var(--rd-muted); font-size: 11.5px; line-height: 1.5; }

.rd-auc-specs { margin: 0 0 18px; }
.rd-auc-spec {
  display: grid;
  grid-template-columns: minmax(0, auto) minmax(0, 1fr);
  gap: 16px;
  align-items: baseline;
  padding: 10px 0;
  border-bottom: 1px solid rgba(255, 255, 255, .05);
}
.rd-auc-spec:last-child { border-bottom: 0; }
.rd-auc-spec dt { color: var(--rd-muted); font-size: 12px; font-weight: 500; }
.rd-auc-spec dd {
  margin: 0;
  overflow: hidden;
  color: #f1eee7;
  font-size: 12.5px;
  font-weight: 650;
  font-variant-numeric: tabular-nums;
  text-align: right;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.rd-auc-spec.rd-auc-is-good dd { color: #86efac; }
.rd-auc-spec.rd-auc-is-cost dd { color: #fbbf24; }

/* The footer stacks: anything that must be cleared before submitting gets a
   row of its own, so a Turnstile widget is never wedged in beside Buy Now
   and never pushes Cancel onto a line by itself. */
.rd-auc-modal .modal-footer {
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  padding: 16px 22px;
}
.rd-auc-modal .modal-footer > * { margin: 0; }
.rd-auc-guard { flex: 1 1 300px; display: flex; justify-content: flex-start; min-height: 65px; }
.rd-auc-actions { flex: 0 0 auto; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 10px; margin-left: auto; }
.rd-auc-actions .rd-cta { flex: 0 1 auto; }
.rd-auc-inline { display: flex; flex-wrap: wrap; gap: 9px; margin-bottom: 18px; }

/* Submit lock. The button must read as working, not as broken: the glyph is
   swapped for a ring rather than dimmed, so a slow purchase looks like a slow
   purchase. */
.rd-cta[data-ia-busy] { pointer-events: none; }
.rd-cta[data-ia-busy] > i {
  width: 15px;
  height: 15px;
  font-size: 0;
  border: 2px solid rgba(255, 255, 255, .3);
  border-top-color: currentColor;
  border-radius: 50%;
  animation: rdAucSpin .62s linear infinite;
  transform: none !important;
}

@keyframes rdAucSpin { to { transform: rotate(360deg); } }

/* --- Entrance -------------------------------------------------------------
   The shelf is the page's one authored moment: listings settle in once, in
   reading order. The animation runs FROM the resting state outward, so a
   browser that never runs it still shows every listing. */
@keyframes rdAucRise {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: none; }
}
.rd-auc-card,
.rd-auc-listing { animation: rdAucRise .5s cubic-bezier(.16, 1, .3, 1) backwards; }
.rd-auc-card:nth-child(1),  .rd-auc-listing:nth-child(1)  { animation-delay: .02s; }
.rd-auc-card:nth-child(2),  .rd-auc-listing:nth-child(2)  { animation-delay: .05s; }
.rd-auc-card:nth-child(3),  .rd-auc-listing:nth-child(3)  { animation-delay: .08s; }
.rd-auc-card:nth-child(4),  .rd-auc-listing:nth-child(4)  { animation-delay: .11s; }
.rd-auc-card:nth-child(5),  .rd-auc-listing:nth-child(5)  { animation-delay: .14s; }
.rd-auc-card:nth-child(6),  .rd-auc-listing:nth-child(6)  { animation-delay: .17s; }
.rd-auc-card:nth-child(7),  .rd-auc-listing:nth-child(7)  { animation-delay: .2s; }
.rd-auc-card:nth-child(8),  .rd-auc-listing:nth-child(8)  { animation-delay: .23s; }
.rd-auc-card:nth-child(n+9), .rd-auc-listing:nth-child(n+9) { animation-delay: .26s; }

/* --- Responsive ------------------------------------------------------------ */
@media (max-width: 991.98px) {
  .rd-auc-shell { flex-direction: column; }
  .rd-auc-rail { position: static; flex: 1 1 auto; width: 100%; max-width: none; }
  .rd-auc-factions { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (max-width: 575.98px) {
  .rd-auc-card { padding: 15px; gap: 14px; }
  .rd-auc-price b { font-size: 22px; }
  .rd-auc-price-lead b { font-size: 28px; }
  .rd-auc-card-actions .rd-cta { flex: 1 1 100%; }
  /* The row's fixed tracks (thumb + price + button) need more width than a
     360px card has, so the price and action drop to a second line instead of
     squeezing the item name down to three letters. */
  .rd-auc-listing { flex-wrap: wrap; gap: 12px; padding: 13px; }
  .rd-auc-listing-thumb { order: 1; }
  .rd-auc-listing-copy { order: 2; flex: 1 1 130px; }
  .rd-auc-races { order: 3; flex-basis: 100%; }
  .rd-auc-listing-price { order: 4; flex: 1 1 auto; text-align: left; }
  .rd-auc-listing-actions { order: 5; }
  .rd-auc-listing-price .rd-auc-price b { font-size: 17px; }
  .rd-auc-listing:hover { transform: none; }
  .rd-auc-modal .modal-body,
  .rd-auc-modal .modal-footer { padding-left: 16px; padding-right: 16px; }
  .rd-auc-actions { flex-direction: column-reverse; }
  .rd-auc-actions .rd-cta { width: 100%; }
  .rd-auc-spec { grid-template-columns: minmax(0, 1fr); gap: 3px; }
  .rd-auc-spec dd { text-align: left; }
}

@media (prefers-reduced-motion: reduce) {
  .rd-auc-card,
  .rd-auc-listing { animation: none; }
  .rd-auc-card:hover,
  .rd-auc-listing:hover { transform: none; }
  .rd-cta[data-ia-busy] > i { animation: none; }
}

/* --- Wallet -------------------------------------------------------------
   Sits where rd_char_panel() would otherwise draw a decorative icon, so the
   balance is on screen the whole time a player is comparing prices. */
.rd-auc-wallet {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  flex: 0 0 auto;
  padding: 8px 14px;
  border: 1px solid rgba(var(--rd-accent-2-rgb), .22);
  border-radius: 11px;
  background: linear-gradient(135deg, rgba(var(--rd-accent-rgb), .16), rgba(var(--rd-accent-rgb), .04));
  white-space: nowrap;
}
.rd-auc-wallet > i { color: var(--rd-accent-2); font-size: 16px; }
.rd-auc-wallet small {
  display: block;
  color: var(--rd-muted);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .14em;
  line-height: 1;
  text-transform: uppercase;
}
.rd-auc-wallet b {
  display: block;
  margin-top: 5px;
  color: #ffffff;
  font-family: var(--rd-display-font) !important;
  font-size: 14.5px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.02em;
  line-height: 1;
}
.rd-auc-wallet-void { border-color: var(--rd-border); background: rgba(255, 255, 255, .025); }
.rd-auc-wallet-void > i { color: var(--rd-muted-2); }
.rd-auc-wallet-void b { color: var(--rd-muted); font-size: 12.5px; }

@media (max-width: 575.98px) {
  .rd-auc-wallet { padding: 7px 11px; gap: 8px; }
  .rd-auc-wallet b { font-size: 13px; }
}

/* --- Faction restriction marks on a listing row -------------------------- */
.rd-auc-races { flex: 0 0 auto; display: flex; align-items: center; gap: 4px; }
.rd-auc-races img {
  width: 24px;
  height: 24px;
  padding: 3px;
  object-fit: contain;
  border: 1px solid transparent;
  border-radius: 7px;
}
.rd-auc-races img.rd-race-bellato  { border-color: rgba(96, 165, 250, .34); background: rgba(96, 165, 250, .12); }
.rd-auc-races img.rd-race-cora     { border-color: rgba(192, 132, 252, .34); background: rgba(192, 132, 252, .12); }
.rd-auc-races img.rd-race-accretia { border-color: rgba(148, 163, 184, .38); background: rgba(148, 163, 184, .14); }
.rd-auc-races span {
  padding: 3px 7px;
  color: var(--rd-muted);
  font-size: 10px;
  font-weight: 700;
  border: 1px solid var(--rd-border);
  border-radius: 7px;
}


/* --- Forms inside an auction dialog --------------------------------------
   The sizing rules for a signed-in form are scoped to .rd-content, and these
   dialogs are relocated to <body> so Bootstrap's backdrop does not trap them
   behind the .rd-content transform. Restate the whole set here rather than
   only the icon padding, or the select in "Deliver to character" loses its
   height and radius the moment the dialog moves. */
.rd-auc-modal .rd-input .form-control {
  min-height: 48px;
  padding: 12px 14px 12px 43px !important;
  border-radius: 12px !important;
}
.rd-auc-modal select.form-control,
.rd-auc-modal .form-select {
  min-height: 48px;
  border-radius: 12px !important;
}
.rd-auc-modal .rd-input:focus-within > i { color: var(--rd-accent-2); }
.rd-auc-modal .rd-field { margin-bottom: 0; }
.rd-auc-modal .rd-field + .rd-notice,
.rd-auc-modal .rd-auc-inline + .rd-notice { margin-top: 18px; }
.rd-auc-modal .rd-notice:last-child { margin-bottom: 0; }

/* The item picture inside a dialog subject line, framed like the one on the
   row it was opened from. */
.rd-auc-subject-thumb {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  padding: 5px;
  border: 1px solid var(--rd-border);
  border-radius: 12px;
  background: rgba(0, 0, 0, .3);
}

/* ==========================================================================
   CHARACTER DOSSIER - My Character (user_characterinfo.php) and
   Character Search (user_globalsearch.php).

   One header, loadout and ledger layout for both pages, so a character
   reads the same whether it is yours or someone else's. Everything here is
   scoped to .rd-dossier, .rd-mychar or .rd-csearch; the shared kit above
   (.rd-gear, .rd-figures, .rd-detail-row) is untouched for the other
   Character pages.

   Faction colour comes in as --rd-race-rgb. Like .rd-racechip it is not
   themeable on purpose: Cora is violet because the game says so.
   ========================================================================== */
.rd-dossier {
  --rd-race-rgb: var(--rd-accent-2-rgb);
  --rd-dossier-r: 18px;
  position: relative;
  border: 1px solid var(--rd-border);
  border-radius: var(--rd-dossier-r);
  background: linear-gradient(180deg, rgba(29, 29, 29, .92), rgba(16, 16, 16, .96));
  box-shadow: 0 18px 44px rgba(0, 0, 0, .28);
}
.rd-dossier.rd-race-bellato  { --rd-race-rgb: 96, 165, 250; }
.rd-dossier.rd-race-cora     { --rd-race-rgb: 192, 132, 252; }
.rd-dossier.rd-race-accretia { --rd-race-rgb: 148, 163, 184; }

/* Section headings inside the dossier: Loadout, Wealth, Equipment... */
.rd-dossier h3 {
  margin: 0 0 12px;
  color: #d0cdc6;
  font-family: var(--rd-display-font) !important;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: -.01em;
}

/* ---- Header ---------------------------------------------------------- */
.rd-dossier-head {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  grid-template-areas: "sigil id level actions";
  align-items: center;
  gap: 16px 24px;
  padding: 24px 26px;
  overflow: hidden;
  border-bottom: 1px solid var(--rd-border);
  border-radius: var(--rd-dossier-r) var(--rd-dossier-r) 0 0;
  background:
    radial-gradient(110% 170% at 0% 0%, rgba(var(--rd-race-rgb), .2), transparent 56%),
    linear-gradient(90deg, rgba(var(--rd-race-rgb), .05), transparent 72%);
}
/* The faction's own emblem, large and faint behind the level block. */
.rd-dossier-head::after {
  content: "";
  position: absolute;
  top: 50%;
  right: -46px;
  width: 250px;
  height: 250px;
  background: center / contain no-repeat;
  opacity: .07;
  transform: translateY(-50%) rotate(-10deg);
  pointer-events: none;
}
.rd-race-bellato .rd-dossier-head::after  { background-image: url("../../../images/race/bellato.png"); }
.rd-race-cora .rd-dossier-head::after     { background-image: url("../../../images/race/cora.png"); }
.rd-race-accretia .rd-dossier-head::after { background-image: url("../../../images/race/accretia.png"); }
.rd-dossier-head > * { position: relative; z-index: 1; }

.rd-dossier-avatar > .rd-idcard-sigil {
  grid-area: sigil;
  flex: none;
  width: 76px;
  height: 76px;
  clip-path: polygon(19px 0, 100% 0, 100% calc(100% - 19px), calc(100% - 19px) 100%, 0 100%, 0 19px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3);
}
.rd-dossier-avatar > .rd-idcard-sigil img { width: 56px; height: 56px; }

.rd-dossier-id { grid-area: id; min-width: 0; }
.rd-dossier-id h2 {
  margin: 0;
  color: #fff;
  font-family: var(--rd-display-font) !important;
  font-size: 28px;
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -.03em;
  overflow-wrap: anywhere;
}
.rd-dossier-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 11px; }
.rd-dossier-tags .rd-racechip,
.rd-dossier-tag { min-height: 26px; }
.rd-dossier-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 100%;
  padding: 3px 11px 3px 9px;
  color: #d7d4cd;
  font-size: 11px;
  font-weight: 650;
  line-height: 1.5;
  background: rgba(255, 255, 255, .045);
  border: 1px solid var(--rd-border);
  border-radius: 999px;
}
.rd-dossier-tag i { color: var(--rd-muted-2); font-size: 11px; }

.rd-dossier-level {
  grid-area: level;
  display: flex;
  align-items: center;
  gap: 18px;
  padding-left: 24px;
  border-left: 1px solid var(--rd-border);
}
.rd-dossier-lv { display: grid; justify-items: center; gap: 4px; line-height: 1; }
.rd-dossier-lv small {
  color: var(--rd-muted);
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.rd-dossier-lv b {
  color: #fff;
  font-family: var(--rd-display-font) !important;
  font-size: 36px;
  font-weight: 600;
  letter-spacing: -.03em;
  font-variant-numeric: tabular-nums;
}
.rd-dossier-xp { display: grid; gap: 8px; width: 172px; }
.rd-dossier-xp-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.rd-dossier-xp-head span {
  color: var(--rd-muted);
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.rd-dossier-xp-head b {
  color: #fff;
  font-family: var(--rd-display-font) !important;
  font-size: 13.5px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.rd-dossier-xp-bar {
  display: block;
  height: 6px;
  overflow: hidden;
  background: rgba(255, 255, 255, .08);
  border-radius: 999px;
}
.rd-dossier-xp-bar i {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, rgba(var(--rd-race-rgb), .55), rgb(var(--rd-race-rgb)));
  border-radius: inherit;
  transform-origin: left center;
  animation: rd-xp-fill .7s cubic-bezier(.16, 1, .3, 1) both;
}
@keyframes rd-xp-fill { from { transform: scaleX(0); } }

.rd-dossier-actions { grid-area: actions; display: flex; gap: 8px; }

/* ---- Body: loadout stage + information column ------------------------ */
.rd-dossier-body {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
}
.rd-dossier-stage {
  display: grid;
  align-content: start;
  justify-items: center;
  padding: 22px 26px 28px;
  border-right: 1px solid var(--rd-border);
  border-radius: 0 0 0 var(--rd-dossier-r);
  background: radial-gradient(75% 50% at 50% 40%, rgba(var(--rd-race-rgb), .1), transparent 72%);
}
.rd-dossier-stage > h3 { justify-self: start; }

/* Accessories move under the armour instead of down a side column, where a
   new character's "None equipped" floated alone next to a tall paperdoll. */
.rd-dossier .rd-gear.rd-has-acc {
  grid-template-columns: repeat(3, 92px);
  grid-template-rows: repeat(4, 110px) auto;
  grid-template-areas:
    "..  hlm .."
    "wpn upr shd"
    "gnt lwr clk"
    "..  sho .."
    "acc acc acc";
}
.rd-dossier .rd-gear-acc {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-top: 10px;
  padding-top: 16px;
  border-top: 1px solid var(--rd-border);
}
.rd-dossier .rd-acc-head {
  margin-bottom: 2px;
  color: var(--rd-muted);
  font-size: 9.5px;
}
.rd-dossier .rd-gear-slot {
  background: linear-gradient(180deg, rgba(20, 20, 20, .92), rgba(10, 10, 10, .96));
  border-color: rgba(255, 255, 255, .07);
}
.rd-dossier .rd-gear-slot:not(.rd-is-void) {
  border-color: rgba(var(--rd-race-rgb), .2);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04);
}
.rd-dossier .rd-gear-slot:not(.rd-is-void):hover {
  border-color: rgba(var(--rd-race-rgb), .55);
  background: linear-gradient(180deg, rgba(var(--rd-race-rgb), .1), rgba(10, 10, 10, .96));
}
.rd-dossier .rd-gear-slot.rd-is-void { background: rgba(255, 255, 255, .012); }
.rd-dossier .rd-gear > .rd-gear-slot > .rd-gear-label { color: #919191; }

.rd-dossier-info {
  container: rd-dossier-info / inline-size;
  min-width: 0;
  display: grid;
  align-content: start;
  gap: 22px;
  padding: 22px 26px 28px;
}

/* Class path (Character Search): Base Class > First Job > Final Class. */
.rd-classpath {
  display: flex;
  margin: 0;
  padding: 0;
  list-style: none;
  overflow: hidden;
  border: 1px solid var(--rd-border);
  border-radius: 14px;
  background: rgba(255, 255, 255, .02);
}
.rd-classpath li {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px 12px 26px;
}
.rd-classpath-copy { display: grid; gap: 3px; min-width: 0; }
.rd-classpath-icon {
  flex: none;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  overflow: hidden;
  color: var(--rd-muted);
  font-size: 15px;
  background: rgba(0, 0, 0, .35);
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 10px;
}
.rd-classpath-icon .rd-classicon { width: 32px; height: 32px; border-radius: 6px; }
.rd-classpath li:last-child .rd-classpath-icon { border-color: rgba(var(--rd-race-rgb), .55); }
.rd-classpath li.rd-is-void .rd-classpath-icon { opacity: .45; }
.rd-classpath li:first-child { padding-left: 18px; }
.rd-classpath li + li { border-left: 1px solid var(--rd-border); }
.rd-classpath li + li::before {
  content: "\F285";
  position: absolute;
  top: 50%;
  left: -8px;
  display: grid;
  place-items: center;
  width: 16px;
  height: 16px;
  color: var(--rd-muted);
  font-family: "bootstrap-icons";
  font-size: 9px;
  background: #191919;
  border: 1px solid var(--rd-border);
  border-radius: 50%;
  transform: translateY(-50%);
}
.rd-classpath small {
  color: var(--rd-muted);
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.rd-classpath b {
  color: #e6e3dc;
  font-family: var(--rd-display-font) !important;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -.015em;
  overflow-wrap: break-word;
}
.rd-classpath li:last-child { background: rgba(var(--rd-race-rgb), .08); }
.rd-classpath li:last-child b { color: #fff; }
.rd-classpath li.rd-is-void b { color: var(--rd-muted-2); }

/* Ledgers: short labelled groups of label / value rows. */
.rd-ledgers {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr));
  gap: 12px;
}
/* Character Search has one long group (five point totals) beside two short
   ones. Two columns with the long one spanning both rows keeps the short
   groups from stretching to its height or leaving an orphan row. */
.rd-ledgers-tall {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-auto-flow: row dense;
  align-items: start;
}
.rd-ledgers-tall > .rd-ledger-group:has(.rd-figure:nth-child(3)) { grid-column: 2; grid-row: span 2; }
@container rd-dossier-info (max-width: 460px) {
  .rd-ledgers-tall { grid-template-columns: minmax(0, 1fr); }
  .rd-ledgers-tall > .rd-ledger-group:has(.rd-figure:nth-child(3)) { grid-column: auto; grid-row: auto; }
}
.rd-ledger-group {
  container: rd-ledger / inline-size;
  min-width: 0;
  padding: 15px 16px 6px;
  border: 1px solid var(--rd-border);
  border-radius: 14px;
  background: rgba(255, 255, 255, .02);
}
.rd-ledger-group h3 { margin-bottom: 4px; }
.rd-ledger-group .rd-figures { display: block; }
.rd-ledger-group .rd-figure {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  padding: 10px 0;
  background: none;
  border: 0;
  border-top: 1px solid rgba(255, 255, 255, .05);
  border-radius: 0;
}
.rd-ledger-group .rd-figure:first-child { border-top: 0; }
.rd-ledger-group .rd-figure-label {
  flex: 0 1 auto;
  color: var(--rd-muted);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
}
.rd-ledger-group .rd-figure-value {
  flex: 0 1 auto;
  margin: 0;
  color: #f8f5ee;
  font-size: 14.5px;
  text-align: right;
  overflow-wrap: break-word;
  font-variant-numeric: tabular-nums;
}
.rd-ledger-group .rd-figure.rd-is-zero { background: none; }
.rd-ledger-group .rd-figure.rd-is-zero .rd-figure-label { color: #767676; }
.rd-ledger-group .rd-figure.rd-is-zero .rd-figure-value { color: #767676; }
/* A narrow ledger stacks label over value so "0.00% of this level (0)" is
   not squeezed into a sliver beside its label. */
@container rd-ledger (max-width: 250px) {
  .rd-ledger-group .rd-figure { flex-direction: column; align-items: flex-start; gap: 2px; }
  .rd-ledger-group .rd-figure-value { text-align: left; }
}

/* Equipment manifest: the names behind the paperdoll's icons, two columns. */
.rd-manifest-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 28px;
}
.rd-manifest .rd-detail-row {
  grid-template-columns: 76px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
  padding: 10px 0;
  border-bottom: 0;
  border-top: 1px solid rgba(255, 255, 255, .05);
}
.rd-manifest .rd-detail-row:nth-child(-n + 2) { border-top: 0; }
.rd-manifest .rd-detail-key { gap: 8px; font-size: 11.5px; line-height: 1.5; }
.rd-manifest .rd-detail-key i { width: 14px; font-size: 12px; }
.rd-manifest .rd-detail-val { font-size: 13px; line-height: 1.5; overflow-wrap: break-word; }
.rd-manifest .rd-detail-val b { color: var(--rd-muted); font-weight: 600; }
@container rd-dossier-info (max-width: 540px) {
  .rd-manifest-list { grid-template-columns: minmax(0, 1fr); }
  .rd-manifest .rd-detail-row:nth-child(2) { border-top: 1px solid rgba(255, 255, 255, .05); }
}

/* ---- My Character: roster switcher ------------------------------------ */
/* The wrap is a one-column grid; minmax(0, 1fr) stops the roster's no-wrap
   row from sizing that column wider than a phone screen. */
.rd-mychar { grid-template-columns: minmax(0, 1fr); }
.rd-mychar-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 24px;
}
.rd-roster {
  display: flex;
  gap: 8px;
  min-width: 0;
  max-width: 100%;
  padding: 2px;
  overflow-x: auto;
  scrollbar-width: none;
}
.rd-roster::-webkit-scrollbar { display: none; }
/* One character needs no switcher; the dossier header already names it. */
.rd-roster:has(> .rd-roster-item:only-child) { display: none; }
.rd-roster-item {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 18px 8px 8px;
  color: inherit;
  text-align: left;
  background: rgba(255, 255, 255, .025);
  border: 1px solid var(--rd-border);
  border-radius: 14px;
  cursor: pointer;
  transition: background .18s ease, border-color .18s ease;
}
.rd-roster-item:hover { background: rgba(255, 255, 255, .05); border-color: rgba(255, 255, 255, .14); }
.rd-roster-item:focus-visible { outline: 2px solid rgba(var(--rd-accent-2-rgb), .7); outline-offset: 2px; }
.rd-roster-item.rd-is-active {
  background: linear-gradient(135deg, rgba(var(--rd-accent-rgb), .2), rgba(var(--rd-accent-rgb), .05));
  border-color: rgba(var(--rd-accent-2-rgb), .45);
}
.rd-roster-avatar > .rd-idcard-sigil {
  flex: 0 0 40px;
  width: 40px;
  height: 40px;
  clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
  opacity: .7;
  transition: opacity .18s ease;
}
.rd-roster-item:hover .rd-idcard-sigil,
.rd-roster-item.rd-is-active .rd-idcard-sigil { opacity: 1; }
.rd-roster-avatar > .rd-idcard-sigil img { width: 30px; height: 30px; }
.rd-roster-copy { display: grid; gap: 1px; min-width: 0; }
.rd-roster-copy strong {
  color: #e6e3dc;
  font-family: var(--rd-display-font) !important;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -.015em;
  white-space: nowrap;
}
.rd-roster-copy small { color: var(--rd-muted); font-size: 11px; white-space: nowrap; }
.rd-roster-item.rd-is-active .rd-roster-copy strong { color: #fff; }
.rd-roster-item.rd-is-active .rd-roster-copy small { color: #c1bfbb; }

.rd-mychar-note {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  margin: 0;
  max-width: 460px;
  color: var(--rd-muted);
  font-size: 12px;
  line-height: 1.5;
}
.rd-mychar-note i { margin-top: 1px; color: var(--rd-info); font-size: 13px; }
.rd-mychar-note strong { color: #e6e3dc; font-weight: 600; }

/* ---- Character Search: command bar ------------------------------------ */
.rd-csearch {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr);
  align-items: center;
  gap: 18px 36px;
  margin-bottom: 20px;
  padding: 22px 26px;
  border: 1px solid var(--rd-border);
  border-radius: 18px;
  background:
    radial-gradient(80% 160% at 100% 0%, rgba(var(--rd-accent-rgb), .13), transparent 62%),
    linear-gradient(180deg, rgba(29, 29, 29, .92), rgba(16, 16, 16, .96));
}
.rd-csearch-copy h2 {
  margin: 0;
  color: #fff;
  font-family: var(--rd-display-font) !important;
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -.025em;
}
.rd-csearch-copy p { margin: 5px 0 0; color: var(--rd-muted); font-size: 13px; }
.rd-csearch-form { min-width: 0; margin: 0; }
.rd-csearch-label {
  display: block;
  margin-bottom: 8px;
  color: #c1bfbb;
  font-size: 12px;
  font-weight: 650;
}
.rd-csearch-field {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 5px 5px 46px;
  background: rgba(10, 10, 10, .72);
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 14px;
  transition: border-color .16s ease, box-shadow .16s ease;
}
.rd-csearch-field:focus-within {
  border-color: rgba(var(--rd-accent-2-rgb), .6);
  box-shadow: 0 0 0 4px rgba(var(--rd-accent-rgb), .14);
}
.rd-csearch-field > i {
  position: absolute;
  left: 17px;
  color: var(--rd-muted);
  font-size: 15px;
  pointer-events: none;
}
.rd-csearch-field .form-control {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 44px;
  padding: 0 4px;
  color: #fff !important;
  font-size: 15px;
  font-weight: 500;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}
.rd-csearch-field .form-control::placeholder { color: #8b8b8b !important; }
.rd-csearch-field .rd-cta {
  --rd-cta-cut: 10px;
  flex: none;
  min-height: 44px;
  padding: 0 20px;
  font-size: 11.5px;
}
.rd-csearch-field .rd-cta i { font-size: 14px; transition: transform .2s cubic-bezier(.2, .8, .3, 1); }
.rd-csearch-field .rd-cta:hover i { transform: translateX(3px); }
.rd-csearch-hint {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-top: 9px;
  color: var(--rd-muted);
  font-size: 11.5px;
}
.rd-csearch-hint i { font-size: 13px; }

/* Before a search the bar is the whole page, so it gets the room. */
.rd-csearch.rd-is-idle {
  grid-template-columns: minmax(0, 1fr);
  justify-items: center;
  gap: 26px;
  padding: 64px 26px 68px;
  text-align: center;
  background:
    radial-gradient(60% 90% at 50% 0%, rgba(var(--rd-accent-rgb), .16), transparent 70%),
    linear-gradient(180deg, rgba(29, 29, 29, .92), rgba(16, 16, 16, .96));
}
.rd-csearch.rd-is-idle .rd-csearch-copy h2 { font-size: 30px; }
.rd-csearch.rd-is-idle .rd-csearch-copy p { margin-top: 8px; font-size: 14px; }
.rd-csearch.rd-is-idle .rd-csearch-form { width: min(100%, 580px); text-align: left; }
.rd-csearch.rd-is-idle .rd-csearch-hint { justify-content: center; }

/* Hidden item cards still take up layout room, which widened the page past
   a phone screen. Below 992px the sidebar is off-canvas, so clipping the
   stage's x-axis cannot cut a visible card (the script keeps those inside
   the viewport). clip, unlike hidden, leaves the sticky topbar working. */
@media (max-width: 991.98px) {
  .rd-stage:has(.rd-mychar),
  .rd-stage:has(.rd-csearch) { overflow-x: clip; }
}

/* ---- Responsive ------------------------------------------------------- */
@media (max-width: 1279.98px) {
  .rd-dossier-head {
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas:
      "sigil id    actions"
      "level level level";
  }
  .rd-dossier-level {
    padding: 16px 0 0;
    border-left: 0;
    border-top: 1px solid var(--rd-border);
  }
  .rd-dossier-xp { flex: 1 1 auto; width: auto; max-width: 420px; }
}

@media (max-width: 991.98px) {
  .rd-csearch { grid-template-columns: minmax(0, 1fr); gap: 16px; }
}

/* The body stacks when the CONTENT column is narrow, which with the 300px
   sidebar open happens well above the phone breakpoint. A container query
   on .rd-dossier would do this more simply, but containment makes it a
   stacking context and traps the item cards under the sidebar. */
@media (max-width: 859.98px) {
  .rd-dossier-body { grid-template-columns: minmax(0, 1fr); }
  .rd-dossier-stage {
    border-right: 0;
    border-bottom: 1px solid var(--rd-border);
    border-radius: 0;
  }
}
@media (min-width: 992px) and (max-width: 1199.98px) {
  body:not(.rd-sidebar-collapsed) .rd-dossier-body { grid-template-columns: minmax(0, 1fr); }
  body:not(.rd-sidebar-collapsed) .rd-dossier-stage {
    border-right: 0;
    border-bottom: 1px solid var(--rd-border);
    border-radius: 0;
  }
}
@container rd-dossier-info (max-width: 500px) {
  .rd-classpath { flex-direction: column; }
  .rd-classpath li,
  .rd-classpath li:first-child { padding: 11px 16px; }
  .rd-classpath li + li { border-left: 0; border-top: 1px solid var(--rd-border); }
  .rd-classpath li + li::before { display: none; }
}

@media (max-width: 575.98px) {
  .rd-dossier { --rd-dossier-r: 16px; }
  .rd-dossier-head {
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-areas:
      "sigil id"
      "level level"
      "actions actions";
    gap: 14px 16px;
    padding: 18px 16px;
  }
  .rd-dossier-avatar > .rd-idcard-sigil {
    width: 58px;
    height: 58px;
    clip-path: polygon(15px 0, 100% 0, 100% calc(100% - 15px), calc(100% - 15px) 100%, 0 100%, 0 15px);
  }
  .rd-dossier-avatar > .rd-idcard-sigil img { width: 42px; height: 42px; }
  .rd-dossier-id h2 { font-size: 22px; }
  .rd-dossier-tags { margin-top: 8px; }
  .rd-dossier-lv b { font-size: 30px; }

  /* The EXP meter is the only percentage on the page now that the
     Experience card is gone, and it was sharing a flex row with a 30px
     level number inside a header that clips overflow - so on a narrow
     screen it was what got squeezed away. Give it its own row. */
  .rd-dossier-level { flex-wrap: wrap; gap: 12px 18px; }
  .rd-dossier-xp { flex: 1 1 100%; width: auto; max-width: none; min-width: 0; }
  .rd-dossier-xp-head b { font-size: 15px; }
  .rd-dossier-actions .rd-cta { flex: 1 1 100%; }
  .rd-dossier-stage,
  .rd-dossier-info { padding: 18px 16px 22px; }

  /* The base kit drops the paperdoll for a flat tile list on phones; the
     dossier keeps it, scaled, while three 92px columns still fit. */
  .rd-dossier .rd-gear,
  .rd-dossier .rd-gear.rd-has-acc {
    width: max-content;
    grid-template-columns: repeat(3, 92px);
    grid-template-rows: repeat(4, 110px) auto;
    grid-template-areas:
      "..  hlm .."
      "wpn upr shd"
      "gnt lwr clk"
      "..  sho .."
      "acc acc acc";
  }
  .rd-dossier .rd-slot-weapon { grid-area: wpn; }
  .rd-dossier .rd-slot-helmet { grid-area: hlm; }
  .rd-dossier .rd-slot-shield { grid-area: shd; }
  .rd-dossier .rd-slot-cloak { grid-area: clk; }
  .rd-dossier .rd-slot-upper { grid-area: upr; }
  .rd-dossier .rd-slot-gauntlet { grid-area: gnt; }
  .rd-dossier .rd-slot-lower { grid-area: lwr; }
  .rd-dossier .rd-slot-shoe { grid-area: sho; }
  .rd-dossier .rd-gear-acc { grid-area: acc; grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .rd-dossier .rd-gear > .rd-gear-slot { aspect-ratio: auto; min-height: 0; }

  .rd-classpath { flex-direction: column; }
  .rd-classpath li,
  .rd-classpath li:first-child { padding: 11px 16px; }
  .rd-classpath li + li { border-left: 0; border-top: 1px solid var(--rd-border); }
  .rd-classpath li + li::before { display: none; }

  .rd-mychar-note { max-width: none; }

  .rd-csearch { padding: 18px 16px; }
  .rd-csearch.rd-is-idle { padding: 40px 16px 44px; gap: 20px; }
  .rd-csearch.rd-is-idle .rd-csearch-copy h2 { font-size: 24px; }
  .rd-csearch-field .rd-cta { padding: 0 14px; }
}

/* Under ~360px three 92px columns no longer fit; fall back to the base
   kit's flat tile list. */
@media (max-width: 359.98px) {
  .rd-dossier .rd-gear,
  .rd-dossier .rd-gear.rd-has-acc {
    width: auto;
    grid-template-columns: repeat(auto-fill, minmax(74px, 1fr));
    grid-template-rows: none;
    grid-auto-rows: auto;
    grid-template-areas: none;
  }
  .rd-dossier .rd-slot-weapon, .rd-dossier .rd-slot-helmet, .rd-dossier .rd-slot-shield,
  .rd-dossier .rd-slot-cloak, .rd-dossier .rd-slot-upper, .rd-dossier .rd-slot-gauntlet,
  .rd-dossier .rd-slot-lower, .rd-dossier .rd-slot-shoe { grid-area: auto; }
  .rd-dossier .rd-gear-acc { grid-area: auto; grid-column: 1 / -1; }
  .rd-dossier .rd-gear > .rd-gear-slot { min-height: 110px; }
  .rd-dossier-stage { justify-items: stretch; }
}

@media (prefers-reduced-motion: reduce) {
  .rd-dossier-xp-bar i { animation: none; }
  .rd-csearch-field .rd-cta i { transition: none; }
}

/* ==========================================================================
   CHARACTER SEARCH - Force Skill, Character Data and Cash History tabs,
   plus the live item hover card.

   Discipline colours (--rd-disc-rgb) are fixed, like the race tints: Fire is
   orange because the game says so, not because of the theme accent. Grand
   Master is always the success green, so "GM" reads the same in every tab.
   ========================================================================== */
.rd-sr-only {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* :where() keeps the fallback at zero specificity, so a .rd-disc-* class on
   the same element always wins - a plain ".rd-fmgrid tr" outranked it. */
:where(.rd-skillgroup, .rd-fmgrid tr) { --rd-disc-rgb: var(--rd-accent-2-rgb); }
.rd-disc-holy  { --rd-disc-rgb: 250, 204, 21; }
.rd-disc-dark  { --rd-disc-rgb: 167, 139, 250; }
.rd-disc-fire  { --rd-disc-rgb: 251, 113, 62; }
.rd-disc-aqua  { --rd-disc-rgb: 56, 189, 248; }
.rd-disc-terra { --rd-disc-rgb: 132, 204, 22; }
.rd-disc-wind  { --rd-disc-rgb: 45, 212, 191; }
.rd-disc-melee-skill  { --rd-disc-rgb: 248, 113, 113; }
.rd-disc-ranged-skill { --rd-disc-rgb: 96, 165, 250; }

/* "29 / 41 at GM" in a panel head, where the icon badge used to sit. */
.rd-headstat {
  display: inline-flex;
  flex: none;
  align-items: baseline;
  gap: 5px;
  padding: 6px 13px;
  color: #a7f3c9;
  font-size: 11.5px;
  font-weight: 600;
  white-space: nowrap;
  background: rgba(53, 208, 127, .1);
  border: 1px solid rgba(53, 208, 127, .24);
  border-radius: 999px;
}
.rd-headstat b {
  color: #86efac;
  font-family: var(--rd-display-font) !important;
  font-size: 15px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

/* ---- Skill board ------------------------------------------------------ */
.rd-skillboard {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 192px), 1fr));
  gap: 14px;
  align-items: start;
}
.rd-skillgroup {
  overflow: hidden;
  background: rgba(255, 255, 255, .02);
  border: 1px solid var(--rd-border);
  border-radius: 14px;
}
.rd-skillgroup-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 10px;
  padding: 14px 16px 13px;
  background: linear-gradient(180deg, rgba(var(--rd-disc-rgb), .15), rgba(var(--rd-disc-rgb), .03));
  border-bottom: 1px solid var(--rd-border);
}
.rd-skillgroup-head h3 {
  display: flex;
  flex: 1 1 auto;
  align-items: center;
  gap: 9px;
  min-width: 0;
  margin: 0;
  color: #fff;
  font-family: var(--rd-display-font) !important;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -.01em;
}
.rd-skillgroup-head h3::before {
  content: "";
  flex: none;
  width: 9px;
  height: 9px;
  background: rgb(var(--rd-disc-rgb));
  border-radius: 3px;
  transform: rotate(45deg);
}
.rd-skillgroup-head .rd-pill { font-size: 9.5px; padding: 3px 8px; }
.rd-skillgroup-count {
  color: var(--rd-muted);
  font-size: 11.5px;
  font-weight: 600;
  white-space: nowrap;
}
.rd-skillgroup-count b {
  color: rgb(var(--rd-disc-rgb));
  font-family: var(--rd-display-font) !important;
  font-size: 14px;
  font-variant-numeric: tabular-nums;
}
.rd-skillgroup-bar {
  flex: 1 0 100%;
  display: block;
  height: 4px;
  overflow: hidden;
  background: rgba(255, 255, 255, .07);
  border-radius: 999px;
}
.rd-skillgroup-bar i {
  display: block;
  height: 100%;
  background: rgb(var(--rd-disc-rgb));
  border-radius: inherit;
}
.rd-skillgroup .rd-skilltier { padding: 13px 16px 4px; color: var(--rd-muted); }
.rd-skillrow {
  display: grid;
  /* The name gets the whole row and the level label sits beside the meter:
     in five narrow columns a name sharing its row with "GM" broke mid-word. */
  grid-template-columns: 32px minmax(0, 1fr) auto;
  grid-template-areas:
    "icon name  name"
    "icon meter lv";
  align-items: center;
  gap: 5px 9px;
  padding: 7px 16px;
  transition: background .16s ease;
}
.rd-skillrow:last-child { padding-bottom: 14px; }
.rd-skillrow:hover { background: rgba(255, 255, 255, .03); }
.rd-skillrow .rd-skill-icon { grid-area: icon; }
.rd-skillrow-name {
  grid-area: name;
  min-width: 0;
  color: #ece9e2;
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.3;
  overflow-wrap: break-word;
}
.rd-skillrow-lv {
  grid-area: lv;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--rd-muted);
  font-size: 10.5px;
  font-weight: 700;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.rd-skillrow.rd-is-gm .rd-skillrow-lv { color: #86efac; }
.rd-skillrow-lv i { font-size: 10px; }
.rd-skillmeter {
  grid-area: meter;
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 3px;
}
.rd-skillmeter i {
  display: block;
  height: 4px;
  background: rgba(255, 255, 255, .08);
  border-radius: 2px;
}
.rd-skillmeter i.rd-on { background: rgba(var(--rd-disc-rgb), .9); }
.rd-skillrow.rd-is-unlearned .rd-skillrow-name { color: var(--rd-muted); font-weight: 500; }
.rd-skillrow.rd-is-unlearned .rd-skill-icon { opacity: .45; filter: grayscale(1); }

/* ---- Force mastery grid ----------------------------------------------- */
.rd-fmgrid-wrap { overflow-x: auto; margin: -6px; }
.rd-fmgrid {
  width: 100%;
  border-collapse: separate;
  border-spacing: 6px;
}
.rd-fmgrid thead th {
  padding: 4px 6px 2px;
  color: var(--rd-muted);
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: .14em;
  text-align: center;
  text-transform: uppercase;
}
.rd-fmgrid tbody th {
  padding: 0 14px 0 4px;
  color: #ece9e2;
  font-family: var(--rd-display-font) !important;
  font-size: 13px;
  font-weight: 600;
  text-align: left;
  white-space: nowrap;
}
.rd-fmgrid tbody th::before {
  content: "";
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-right: 9px;
  vertical-align: 1px;
  background: rgb(var(--rd-disc-rgb));
  border-radius: 2px;
  transform: rotate(45deg);
}
.rd-fmgrid td {
  min-width: 108px;
  padding: 10px 12px;
  text-align: center;
  background: rgba(var(--rd-disc-rgb), .07);
  border: 1px solid rgba(var(--rd-disc-rgb), .2);
  border-radius: 11px;
}
.rd-fmgrid td > span { display: grid; gap: 2px; }
.rd-fmgrid td b {
  color: #fff;
  font-family: var(--rd-display-font) !important;
  font-size: 15px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.rd-fmgrid td small { color: var(--rd-muted); font-size: 10.5px; font-weight: 600; }
.rd-fmgrid td.rd-is-gm { background: rgba(53, 208, 127, .1); border-color: rgba(53, 208, 127, .32); }
.rd-fmgrid td.rd-is-gm small { color: #86efac; }
.rd-fmgrid td.rd-is-gm small i { margin-right: 4px; font-size: 10px; }
.rd-fmgrid td.rd-is-void {
  color: var(--rd-muted-2);
  background: transparent;
  border-style: dashed;
  border-color: var(--rd-border);
}

/* ---- Character Data: profile facts ------------------------------------ */
.rd-facts {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 215px), 1fr));
  gap: 10px;
}
.rd-facts .rd-detail-row,
.rd-facts .rd-detail-row:last-child {
  display: block;
  padding: 13px 15px 14px;
  background: rgba(255, 255, 255, .02);
  border: 1px solid var(--rd-border);
  border-radius: 12px;
}
.rd-facts .rd-detail-key { gap: 9px; color: var(--rd-muted); font-size: 11.5px; }
.rd-facts .rd-detail-key i {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  color: var(--rd-accent-2);
  font-size: 13px;
  background: rgba(var(--rd-accent-rgb), .12);
  border-radius: 8px;
}
.rd-facts .rd-detail-val {
  margin-top: 10px;
  color: #fff;
  font-family: var(--rd-display-font) !important;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -.01em;
  overflow-wrap: break-word;
  font-variant-numeric: tabular-nums;
}

/* ---- Character Data: mastery tiles ------------------------------------ */
.rd-masterygrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 205px), 1fr));
  gap: 10px;
}
.rd-masterytile {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    "name pill"
    "lv   lv"
    "pt   pt";
  align-items: center;
  gap: 2px 10px;
  padding: 14px 15px 13px;
  background: rgba(255, 255, 255, .02);
  border: 1px solid var(--rd-border);
  border-radius: 12px;
}
.rd-masterytile.rd-is-gm {
  background: linear-gradient(180deg, rgba(53, 208, 127, .08), rgba(255, 255, 255, .012));
  border-color: rgba(53, 208, 127, .26);
}
.rd-masterytile-name {
  grid-area: name;
  min-width: 0;
  color: #c5c3bf;
  font-size: 12px;
  font-weight: 600;
  overflow-wrap: break-word;
}
.rd-masterytile .rd-pill { grid-area: pill; padding: 3px 8px; font-size: 9.5px; }
.rd-masterytile-lv {
  grid-area: lv;
  margin-top: 8px;
  color: #fff;
  font-family: var(--rd-display-font) !important;
  font-size: 26px;
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
}
.rd-masterytile-lv small {
  margin-right: 5px;
  color: var(--rd-muted);
  font-family: var(--rd-font) !important;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.rd-masterytile-pt { grid-area: pt; color: var(--rd-muted); font-size: 11.5px; font-variant-numeric: tabular-nums; }
.rd-masterytile.rd-is-zero .rd-masterytile-lv { color: #767676; }

/* ---- Cash history ----------------------------------------------------- */
.rd-cashsum {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  background: rgba(255, 255, 255, .02);
  border: 1px solid var(--rd-border);
  border-radius: 14px;
}
.rd-cashsum > div { display: grid; align-content: start; gap: 3px; min-width: 0; padding: 15px 18px; }
.rd-cashsum > div + div { border-left: 1px solid var(--rd-border); }
.rd-cashsum span { color: var(--rd-muted); font-size: 11.5px; font-weight: 600; }
.rd-cashsum b {
  color: #fff;
  font-family: var(--rd-display-font) !important;
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
  overflow-wrap: break-word;
}
.rd-cashsum small { color: var(--rd-muted); font-size: 11.5px; font-variant-numeric: tabular-nums; }
.rd-cashsum small.rd-is-bad { color: #fca5a5; }

.rd-cashbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 16px;
  margin: 18px 0 12px;
}
.rd-cashfilter { position: relative; flex: 0 1 340px; min-width: 0; margin: 0; }
.rd-cashfilter > i {
  position: absolute;
  top: 50%;
  left: 14px;
  color: var(--rd-muted);
  font-size: 14px;
  transform: translateY(-50%);
  pointer-events: none;
}
.rd-cashfilter .form-control { width: 100%; min-height: 40px; padding-left: 40px; font-size: 13px; }
.rd-cashfilter .form-control::placeholder { color: #8b8b8b !important; }
.rd-cashcount { color: var(--rd-muted); font-size: 12px; font-variant-numeric: tabular-nums; }

.rd-cashtable-wrap {
  overflow-x: auto;
  border: 1px solid var(--rd-border);
  border-radius: 14px;
}
.rd-cashtable { width: 100%; margin: 0; border-collapse: collapse; font-size: 13px; }
.rd-cashtable thead th {
  padding: 11px 16px;
  color: var(--rd-muted);
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: .13em;
  text-align: left;
  text-transform: uppercase;
  white-space: nowrap;
  background: rgba(255, 255, 255, .03);
  border-bottom: 1px solid var(--rd-border);
}
.rd-cashtable td {
  padding: 12px 16px;
  color: #dad7d0;
  vertical-align: middle;
  border-bottom: 1px solid rgba(255, 255, 255, .045);
}
.rd-cashtable tbody tr:last-child td { border-bottom: 0; }
.rd-cashtable tbody tr:hover td { background: rgba(255, 255, 255, .025); }
.rd-cashtable tr[hidden] { display: none !important; }
.rd-cashtable .rd-num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.rd-cash-item { min-width: 200px; color: #fff; font-weight: 500; overflow-wrap: break-word; }
.rd-cash-total { color: #fff !important; font-weight: 700; }
.rd-cash-when { white-space: nowrap; font-variant-numeric: tabular-nums; }
.rd-cash-when span { display: block; color: #ece9e2; }
.rd-cash-when small { display: block; color: var(--rd-muted); font-size: 11.5px; }
.rd-cashtable tr.rd-is-failed .rd-cash-item,
.rd-cashtable tr.rd-is-failed .rd-cash-total { color: var(--rd-muted) !important; }
.rd-cash-none {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 12px 0 0;
  padding: 18px;
  color: var(--rd-muted);
  font-size: 12.5px;
  border: 1px dashed var(--rd-border);
  border-radius: 12px;
}
.rd-cash-none[hidden] { display: none; }
.rd-cash-more { display: flex; justify-content: center; margin-top: 14px; }
.rd-cash-more:has(> [hidden]) { display: none; }

@media (max-width: 767.98px) {
  .rd-cashsum { grid-template-columns: minmax(0, 1fr); }
  .rd-cashsum > div + div { border-left: 0; border-top: 1px solid var(--rd-border); }
  .rd-cashsum > div { grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; padding: 12px 16px; }
  .rd-cashsum span { grid-column: 1; }
  .rd-cashsum b { grid-column: 2; grid-row: 1 / span 2; font-size: 18px; text-align: right; }
  .rd-cashsum small { grid-column: 1; }
  .rd-cashfilter { flex: 1 1 100%; }

  /* Six columns do not fit a phone; each purchase becomes a small card. */
  .rd-cashtable thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
  }
  .rd-cashtable,
  .rd-cashtable tbody { display: block; }
  .rd-cashtable tbody tr {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 6px 14px;
    padding: 13px 15px;
    border-bottom: 1px solid rgba(255, 255, 255, .06);
  }
  .rd-cashtable tbody tr:last-child { border-bottom: 0; }
  .rd-cashtable td { display: block; padding: 0; border: 0 !important; background: none !important; }
  .rd-cash-item { grid-column: 1; grid-row: 1; min-width: 0; }
  .rd-cash-status { grid-column: 2; grid-row: 1; justify-self: end; }
  .rd-cash-when { grid-column: 1; grid-row: 2; }
  .rd-cash-when span,
  .rd-cash-when small { display: inline; }
  .rd-cash-when small { margin-left: 6px; }
  .rd-cash-total { grid-column: 2; grid-row: 2; }
  .rd-cashtable td:nth-child(2) { grid-column: 1; grid-row: 3; text-align: left; }
  .rd-cashtable td:nth-child(3) { grid-column: 2; grid-row: 3; }
  .rd-cashtable td:nth-child(2),
  .rd-cashtable td:nth-child(3) { color: var(--rd-muted); font-size: 12px; }
  .rd-cashtable td:nth-child(2)::before,
  .rd-cashtable td:nth-child(3)::before { content: attr(data-label) " "; color: var(--rd-muted-2); }
}

@media (max-width: 575.98px) {
  .rd-skillboard { grid-template-columns: minmax(0, 1fr); }
  /* Two narrow tiles per row rather than one tall column of eight. */
  .rd-facts,
  .rd-masterygrid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .rd-facts .rd-detail-row,
  .rd-facts .rd-detail-row:last-child { padding: 11px 12px 12px; }
  .rd-facts .rd-detail-val { margin-top: 8px; font-size: 14px; }
  .rd-masterytile {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "name"
      "lv"
      "pt"
      "pill";
    padding: 12px 12px 11px;
  }
  .rd-masterytile .rd-pill { justify-self: start; margin-top: 8px; }
  .rd-masterytile-lv { font-size: 22px; }
  .rd-fmgrid td { min-width: 86px; padding: 9px 8px; }
  .rd-fmgrid tbody th { padding-right: 8px; }
}

/* ---- Live item hover card ---------------------------------------------
   user_hover.php returns the legacy .tooltip-box, whose header.html rules
   still position it absolutely, fade it in on .tooltip-trigger:hover and
   paint it brown. Inside the panel's .rd-item-card that drew a second
   floating box beside an empty card. Here the card is the frame and the
   tooltip just flows inside it. Applies wherever rd_char_item_live() is
   used (Character Search, Item Auction). Daily Quest's own .tooltip-trigger
   has no .rd-item-card, so its floating box is left as designed.
   The body prefix is load-bearing: header.html's inline
   ".tooltip-trigger:hover .tooltip-box" (0,3,0) comes later in the page and
   would otherwise put back its translate(10px, -50%), sliding the content
   half its height up out of the card. */
body .rd-item .rd-item-card > .tooltip-box {
  position: static;
  min-width: 0;
  /* The card is max-width min(420px, 88vw) with 15px padding and a 1px
     border, so 88vw - 32px is the most its content can take on a phone. */
  width: min(380px, calc(88vw - 32px));
  margin: 0;
  padding: 0;
  color: #d6d3cc;
  font-size: 12.5px;
  line-height: 1.6;
  background: none;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none;
  opacity: 1;
  visibility: inherit;
  transform: none;
  pointer-events: auto;
  transition: none;
}
.rd-item-card > .tooltip-box::before { display: none; }
.rd-item-card .top-row {
  align-items: center;
  gap: 13px;
  padding-left: 0;
}
.rd-item-card .top-row > .icon-box {
  position: static;
  flex: 0 0 64px;
  width: 64px;
  height: 64px;
  overflow: hidden;
  background-color: rgba(255, 255, 255, .04);
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 10px;
}
.rd-item-card .top-row > .text-content {
  flex: 1 1 auto;
  min-width: 0;
  white-space: normal;
}
.rd-item-card .tooltip-header {
  color: #ffb35c;
  font-family: var(--rd-display-font) !important;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: .01em;
}
.rd-item-card .tooltip-subtitle {
  margin-top: 4px;
  color: #e5c27a;
  font-size: 12px;
  font-style: normal;
}
.rd-item-card .tooltip-stats {
  display: grid;
  gap: 2px;
  margin-top: 14px;
  padding-top: 12px;
  font-size: 12.5px;
  border-top: 1px solid var(--rd-border);
}
.rd-item-card .stat-x { margin-top: 6px; color: #c4a1ff; }
.rd-item-card .stat-star { color: #fbbf24; }
.rd-item-card .footer {
  margin-top: 12px !important;
  padding-top: 10px;
  color: var(--rd-muted);
  font-size: 12px;
  border-top: 1px solid var(--rd-border);
}
/* The item's grade colour moves from the legacy box onto the card frame. */
.rd-item-card:has(> .border-grade-1)  { border-color: rgba(250, 204, 21, .5); }
.rd-item-card:has(> .border-grade-2)  { border-color: rgba(192, 132, 252, .5); }
.rd-item-card:has(> .border-grade-3)  { border-color: rgba(251, 146, 60, .55); }
.rd-item-card:has(> .border-grade-4)  { border-color: rgba(96, 165, 250, .55); }
.rd-item-card:has(> .border-grade-5)  { border-color: rgba(249, 168, 212, .5); }
.rd-item-card:has(> .border-grade-6)  { border-color: rgba(165, 216, 255, .5); }
.rd-item-card:has(> .border-grade-7),
.rd-item-card:has(> .border-grade-8)  { border-color: rgba(74, 222, 128, .5); }
.rd-item-card:has(> .border-grade-9)  { border-color: rgba(255, 146, 8, .55); }
.rd-item-card:has(> .border-grade-10) { border-color: rgba(248, 113, 113, .55); }

/* ==========================================================================
   CLASS ICONS AND GUILD EMBLEMS - My Character and Character Search.

   Class art is includes/images/jobs/sm/<class_code>.webp: painted 144px
   icons (downscaled from the 1254px originals beside them), so they scale
   smoothly; object-fit covers the old 21-24px .gif fallback too. Guild
   emblems are Server Rank's two-layer badge: a colour-tinted back plate
   with the mark masked over it.
   ========================================================================== */
.rd-classicon {
  display: block;
  max-width: none;
  margin: 0;
  object-fit: cover;
}

/* Faction emblem with the class worn as a badge on its corner. */
.rd-dossier-avatar {
  grid-area: sigil;
  position: relative;
  display: block;
  line-height: 0;
}
.rd-dossier-classbadge {
  position: absolute;
  right: -9px;
  bottom: -9px;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  background: #0d0d0d;
  border: 1px solid rgba(var(--rd-race-rgb), .6);
  border-radius: 10px;
  box-shadow: 0 6px 16px rgba(0, 0, 0, .5);
}
.rd-dossier-classbadge .rd-classicon { width: 28px; height: 28px; border-radius: 5px; }

.rd-roster-avatar {
  position: relative;
  flex: none;
  display: block;
  line-height: 0;
}
.rd-roster-avatar .rd-dossier-classbadge {
  right: -6px;
  bottom: -6px;
  width: 22px;
  height: 22px;
  border-color: rgba(255, 255, 255, .18);
  border-radius: 6px;
  box-shadow: 0 3px 8px rgba(0, 0, 0, .5);
}
.rd-roster-avatar .rd-dossier-classbadge .rd-classicon { width: 18px; height: 18px; border-radius: 3px; }
.rd-roster-item { padding-right: 18px; gap: 14px; }

/* Tags carrying real art instead of a glyph. */
.rd-dossier-tag-class .rd-classicon,
.rd-dossier-tag-guild .rd-gemblem {
  width: 18px;
  height: 18px;
  margin-left: -5px;
  border-radius: 4px;
}
.rd-dossier-tag.rd-is-void { color: var(--rd-muted); }

/* Guild emblem. */
.rd-gemblem {
  position: relative;
  display: inline-block;
  flex: none;
  width: 22px;
  height: 22px;
  overflow: hidden;
  vertical-align: middle;
  border-radius: 5px;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14);
}
.rd-gemblem-back {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  margin: 0;
}
.rd-gemblem-mark { position: absolute; inset: 0; display: block; }

.rd-guildname { display: inline-flex; align-items: center; gap: 10px; min-width: 0; }
.rd-guildname > span { min-width: 0; overflow-wrap: break-word; }
.rd-facts .rd-guildname .rd-gemblem { width: 26px; height: 26px; border-radius: 6px; }

@media (max-width: 575.98px) {
  .rd-dossier-classbadge { right: -7px; bottom: -7px; width: 28px; height: 28px; border-radius: 8px; }
  .rd-dossier-classbadge .rd-classicon { width: 22px; height: 22px; }
  .rd-classpath-icon { width: 34px; height: 34px; }
  .rd-classpath-icon .rd-classicon { width: 28px; height: 28px; }
}

/* ==========================================================================
   ACTIVITY HISTORY (user_items_log.php)

   Three views: the lookup bar (.rd-loghero, full-size on the landing view),
   the day's history files (.rd-logfiles), and one file read as a day
   (.rd-logday header, .rd-actlog category tiles and timelines).
   Category colours (--rd-cat-rgb) only tint icons, dots and the active tile;
   the text stays on the panel's neutral ramp.
   ========================================================================== */

/* ---- Lookup bar ------------------------------------------------------- */
.rd-loghero {
  display: grid;
  grid-template-columns: minmax(0, .8fr) minmax(0, 1.7fr);
  align-items: start;
  gap: 18px 36px;
  margin-bottom: 20px;
  padding: 22px 26px;
  border: 1px solid var(--rd-border);
  border-radius: 18px;
  background:
    radial-gradient(80% 160% at 100% 0%, rgba(var(--rd-accent-rgb), .13), transparent 62%),
    linear-gradient(180deg, rgba(29, 29, 29, .92), rgba(16, 16, 16, .96));
}
.rd-loghero-copy { padding-top: 26px; }
.rd-loghero-copy h2 {
  margin: 0;
  color: #fff;
  font-family: var(--rd-display-font) !important;
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -.025em;
}
.rd-loghero-copy p { margin: 5px 0 0; color: var(--rd-muted); font-size: 13px; }
.rd-loghero-form { min-width: 0; margin: 0; }
.rd-loghero-fields {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 210px) auto;
  align-items: end;
  gap: 10px;
}
.rd-loghero-field { min-width: 0; }
.rd-loghero-field label {
  display: block;
  margin-bottom: 7px;
  color: #c1bfbb;
  font-size: 12px;
  font-weight: 650;
}
.rd-loghero-input { position: relative; display: block; }
.rd-loghero-input > i {
  position: absolute;
  top: 50%;
  left: 15px;
  z-index: 1;
  color: var(--rd-muted);
  font-size: 15px;
  transform: translateY(-50%);
  pointer-events: none;
}
.rd-loghero-input .form-control {
  width: 100%;
  min-height: 46px;
  padding-left: 42px;
  font-size: 14px;
  background-color: rgba(10, 10, 10, .72) !important;
  border-color: rgba(255, 255, 255, .1) !important;
  border-radius: 12px !important;
}
.rd-loghero-input .form-control::placeholder { color: #8b8b8b !important; }
.rd-loghero-input input[type="date"] { color-scheme: dark; }
.rd-loghero-fields .rd-cta {
  --rd-cta-cut: 10px;
  min-height: 46px;
  padding: 0 20px;
  font-size: 11.5px;
  white-space: nowrap;
}
.rd-loghero-picks { display: grid; gap: 8px; margin-top: 14px; }
.rd-loghero-picks .rd-quickpick { margin: 0; }

/* Landing view: the bar is the page, so it gets room and explains itself. */
.rd-loghero.rd-is-idle {
  grid-template-columns: minmax(0, 1fr);
  justify-items: center;
  gap: 26px;
  padding: 56px 32px 34px;
  text-align: center;
  background:
    radial-gradient(60% 90% at 50% 0%, rgba(var(--rd-accent-rgb), .16), transparent 70%),
    linear-gradient(180deg, rgba(29, 29, 29, .92), rgba(16, 16, 16, .96));
}
.rd-loghero.rd-is-idle .rd-loghero-copy { padding-top: 0; }
.rd-loghero.rd-is-idle .rd-loghero-copy h2 { font-size: 30px; }
.rd-loghero.rd-is-idle .rd-loghero-copy p { margin-top: 8px; font-size: 14px; }
.rd-loghero.rd-is-idle .rd-loghero-form { width: min(100%, 780px); text-align: left; }
.rd-loghero.rd-is-idle .rd-quickpick { justify-content: center; }
.rd-loghero-points {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
  width: 100%;
  margin: 10px 0 0;
  padding: 26px 0 0;
  list-style: none;
  text-align: left;
  border-top: 1px solid var(--rd-border);
}
.rd-loghero-points li { display: flex; align-items: flex-start; gap: 13px; min-width: 0; }
.rd-loghero-points i {
  flex: none;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  color: var(--rd-accent-2);
  font-size: 16px;
  background: rgba(var(--rd-accent-rgb), .12);
  border-radius: 10px;
}
.rd-loghero-points span { color: var(--rd-muted); font-size: 12.5px; line-height: 1.55; }
.rd-loghero-points strong { display: block; margin-bottom: 3px; color: #f0ede6; font-size: 13px; font-weight: 650; }

/* ---- The day's history files ----------------------------------------- */
.rd-logfiles { display: grid; gap: 8px; }
.rd-logfile {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr) auto;
  align-items: center;
  gap: 18px;
  padding: 14px 18px;
  color: inherit !important;
  text-decoration: none !important;
  background: rgba(255, 255, 255, .02);
  border: 1px solid var(--rd-border);
  border-radius: 14px;
  transition: border-color .18s ease, background .18s ease;
}
.rd-logfile:hover { background: rgba(var(--rd-accent-rgb), .07); border-color: rgba(var(--rd-accent-2-rgb), .38); }
.rd-logfile:focus-visible { outline: 2px solid rgba(var(--rd-accent-2-rgb), .7); outline-offset: 2px; }
.rd-logfile-time { display: grid; gap: 1px; padding-right: 18px; border-right: 1px solid var(--rd-border); }
.rd-logfile-time b {
  color: #fff;
  font-family: var(--rd-display-font) !important;
  font-size: 22px;
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
}
.rd-logfile-time small { color: var(--rd-muted); font-size: 11px; font-variant-numeric: tabular-nums; }
.rd-logfile-copy { display: grid; gap: 2px; min-width: 0; }
.rd-logfile-copy strong { color: #ece9e2; font-size: 13.5px; font-weight: 600; }
.rd-logfile-copy small { color: var(--rd-muted); font-size: 12px; font-variant-numeric: tabular-nums; }
.rd-logfile-go {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--rd-accent-2);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  white-space: nowrap;
}
.rd-logfile-go i { font-size: 14px; transition: transform .2s cubic-bezier(.2, .8, .3, 1); }
.rd-logfile:hover .rd-logfile-go i { transform: translateX(3px); }

/* ---- Day header -------------------------------------------------------- */
.rd-logday {
  --rd-race-rgb: var(--rd-accent-2-rgb);
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 18px 28px;
  margin-bottom: 20px;
  padding: 22px 26px;
  border: 1px solid var(--rd-border);
  border-radius: 18px;
  background:
    radial-gradient(110% 170% at 0% 0%, rgba(var(--rd-race-rgb), .18), transparent 56%),
    linear-gradient(180deg, rgba(29, 29, 29, .92), rgba(16, 16, 16, .96));
}
.rd-logday.rd-race-bellato  { --rd-race-rgb: 96, 165, 250; }
.rd-logday.rd-race-cora     { --rd-race-rgb: 192, 132, 252; }
.rd-logday.rd-race-accretia { --rd-race-rgb: 148, 163, 184; }
.rd-logday-id { display: flex; align-items: center; gap: 22px; min-width: 0; }
.rd-logday .rd-dossier-avatar { flex: none; }
.rd-logday .rd-dossier-avatar > .rd-idcard-sigil {
  width: 64px;
  height: 64px;
  clip-path: polygon(16px 0, 100% 0, 100% calc(100% - 16px), calc(100% - 16px) 100%, 0 100%, 0 16px);
}
.rd-logday .rd-dossier-avatar > .rd-idcard-sigil img { width: 46px; height: 46px; }
.rd-logday-copy { min-width: 0; }
.rd-logday-copy h2 {
  margin: 0;
  color: #fff;
  font-family: var(--rd-display-font) !important;
  font-size: 26px;
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -.03em;
  overflow-wrap: anywhere;
}
.rd-logday .rd-dossier-tags { margin-top: 10px; }
.rd-logday .rd-dossier-tag { white-space: nowrap; }
.rd-logday .rd-dossier-tag b { color: #fff; font-weight: 650; }
.rd-logday .rd-figures {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, auto);
  gap: 0;
  overflow: hidden;
  background: rgba(0, 0, 0, .2);
  border: 1px solid var(--rd-border);
  border-radius: 14px;
}
.rd-logday .rd-figure {
  min-width: 128px;
  padding: 12px 20px;
  background: none;
  border: 0;
  border-radius: 0;
}
.rd-logday .rd-figure + .rd-figure { border-left: 1px solid var(--rd-border); }
.rd-logday .rd-figure-label { color: var(--rd-muted); font-size: 9.5px; }
.rd-logday .rd-figure-value { font-size: 19px; font-variant-numeric: tabular-nums; }
.rd-logday .rd-figure.rd-is-zero { background: none; }
.rd-logday .rd-figure.rd-is-zero .rd-figure-label { color: var(--rd-muted-2); }

/* ---- Category colours ------------------------------------------------- */
.rd-actlog [class*="rd-cat-"] { --rd-cat-rgb: var(--rd-accent-2-rgb); }
.rd-actlog .rd-cat-trade    { --rd-cat-rgb: 96, 165, 250; }
.rd-actlog .rd-cat-pickup   { --rd-cat-rgb: 74, 222, 128; }
.rd-actlog .rd-cat-drop     { --rd-cat-rgb: 251, 146, 60; }
.rd-actlog .rd-cat-taken    { --rd-cat-rgb: 248, 113, 113; }
.rd-actlog .rd-cat-buy      { --rd-cat-rgb: 56, 189, 248; }
.rd-actlog .rd-cat-sell     { --rd-cat-rgb: 250, 204, 21; }
.rd-actlog .rd-cat-trunk    { --rd-cat-rgb: 161, 161, 161; }
.rd-actlog .rd-cat-cashitem { --rd-cat-rgb: 244, 114, 182; }
.rd-actlog .rd-cat-quest    { --rd-cat-rgb: 234, 179, 8; }
.rd-actlog .rd-cat-delivery { --rd-cat-rgb: 45, 212, 191; }
.rd-actlog .rd-cat-job      { --rd-cat-rgb: 167, 139, 250; }
.rd-actlog .rd-cat-combine  { --rd-cat-rgb: 192, 132, 252; }
.rd-actlog .rd-cat-consum   { --rd-cat-rgb: 251, 113, 133; }
.rd-actlog .rd-cat-exchange { --rd-cat-rgb: 251, 191, 36; }
.rd-actlog .rd-cat-upgrade  { --rd-cat-rgb: 167, 139, 250; }
.rd-actlog .rd-cat-auction  { --rd-cat-rgb: 45, 212, 191; }
.rd-actlog .rd-cat-mail     { --rd-cat-rgb: 125, 211, 252; }

/* ---- Category tiles --------------------------------------------------- */
.rd-logtabs { display: grid; gap: 12px; margin-bottom: 24px; }
.rd-logtabs-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(128px, 1fr));
  gap: 8px;
}
.rd-logtab {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-areas:
    "icon  count"
    "label label";
  align-items: center;
  gap: 10px 8px;
  padding: 12px 14px 11px;
  color: inherit;
  text-align: left;
  background: rgba(255, 255, 255, .025);
  border: 1px solid var(--rd-border);
  border-radius: 12px;
  cursor: pointer;
  transition: background .16s ease, border-color .16s ease;
}
.rd-logtab > i {
  grid-area: icon;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  color: rgb(var(--rd-cat-rgb));
  font-size: 15px;
  background: rgba(var(--rd-cat-rgb), .14);
  border-radius: 9px;
}
.rd-logtab-count {
  grid-area: count;
  justify-self: end;
  color: #fff;
  font-family: var(--rd-display-font) !important;
  font-size: 20px;
  font-weight: 600;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.rd-logtab-label {
  grid-area: label;
  min-width: 0;
  color: #c5c3bf;
  font-size: 12px;
  font-weight: 600;
  overflow-wrap: break-word;
}
.rd-logtab:hover { background: rgba(255, 255, 255, .045); border-color: rgba(255, 255, 255, .14); }
.rd-logtab:focus-visible,
.rd-logtab-mini:focus-visible { outline: 2px solid rgba(var(--rd-accent-2-rgb), .7); outline-offset: 2px; }
.rd-logtab.rd-is-active {
  background: linear-gradient(180deg, rgba(var(--rd-cat-rgb), .15), rgba(var(--rd-cat-rgb), .04));
  border-color: rgba(var(--rd-cat-rgb), .55);
}
.rd-logtab.rd-is-active .rd-logtab-label { color: #fff; }

.rd-logtabs-empty { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.rd-logtabs-empty > span {
  margin-right: 4px;
  color: var(--rd-muted);
  font-size: 11.5px;
  font-weight: 600;
}
.rd-logtab-mini {
  padding: 4px 11px;
  color: var(--rd-muted);
  font-size: 11.5px;
  font-weight: 600;
  background: transparent;
  border: 1px dashed rgba(255, 255, 255, .12);
  border-radius: 999px;
  cursor: pointer;
  transition: color .16s ease, border-color .16s ease;
}
.rd-logtab-mini:hover { color: #ece9e2; border-color: rgba(255, 255, 255, .24); }
.rd-logtab-mini.rd-is-active { color: #fff; border-style: solid; border-color: rgba(var(--rd-cat-rgb), .55); background: rgba(var(--rd-cat-rgb), .1); }

/* ---- Category panel and its timeline ---------------------------------- */
.rd-logpanel-head { display: flex; align-items: center; gap: 11px; margin-bottom: 16px; }
.rd-logpanel-icon {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  color: rgb(var(--rd-cat-rgb));
  font-size: 15px;
  background: rgba(var(--rd-cat-rgb), .14);
  border-radius: 9px;
}
.rd-logpanel-head h3 {
  margin: 0;
  color: #fff;
  font-family: var(--rd-display-font) !important;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -.015em;
}
.rd-logpanel-count { color: var(--rd-muted); font-size: 12px; font-variant-numeric: tabular-nums; }

.rd-actlog .rd-timeline {
  position: relative;
  gap: 6px;
  padding-left: 30px;
}
.rd-actlog .rd-timeline::before {
  content: "";
  position: absolute;
  top: 12px;
  bottom: 12px;
  left: 10px;
  width: 2px;
  background: linear-gradient(180deg, rgba(var(--rd-cat-rgb), .45), rgba(255, 255, 255, .05));
  border-radius: 2px;
}
.rd-actlog .rd-log-group {
  position: relative;
  gap: 6px 12px;
  margin-top: 16px;
  padding: 4px 0;
  background: none;
  border: 0;
  border-radius: 0;
}
.rd-actlog .rd-log-group:first-child { margin-top: 0; }
.rd-actlog .rd-log-group::before {
  content: "";
  position: absolute;
  top: 50%;
  left: -25px;
  width: 12px;
  height: 12px;
  background: rgb(var(--rd-cat-rgb));
  border: 3px solid #181818;
  border-radius: 50%;
  transform: translateY(-50%);
}
.rd-actlog .rd-log-group strong { color: #fff; font-size: 13px; font-weight: 650; }
.rd-actlog .rd-log-group > span:not(.rd-log-time) { color: var(--rd-muted); font-size: 12px; }
.rd-actlog .rd-log-group > span i { color: var(--rd-muted-2); }
.rd-actlog .rd-log-time {
  padding: 2px 8px;
  color: #e6e3dc;
  font-size: 11px;
  font-weight: 600;
  background: rgba(255, 255, 255, .06);
  border-radius: 6px;
  font-variant-numeric: tabular-nums;
}
.rd-actlog .rd-log-group.rd-is-sub { margin-top: 0; padding-top: 0; }
.rd-actlog .rd-log-group.rd-is-sub::before { display: none; }
.rd-actlog .rd-log-group.rd-is-sub strong { color: #d0cdc6; font-size: 12.5px; font-weight: 600; }

.rd-actlog .rd-log-wealth { margin-left: 0; }
.rd-actlog .rd-log-wealth span { font-variant-numeric: tabular-nums; }
.rd-actlog .rd-log-wealth .rd-is-pay { color: #fecaca; background: rgba(239, 68, 68, .1); border-color: rgba(239, 68, 68, .24); }
.rd-actlog .rd-log-wealth .rd-is-pay i { color: #f87171; }
.rd-actlog .rd-log-wealth .rd-is-rev { color: #bbf7d0; background: rgba(53, 208, 127, .1); border-color: rgba(53, 208, 127, .26); }
.rd-actlog .rd-log-wealth .rd-is-rev i { color: #4ade80; }

.rd-actlog .rd-logrow {
  flex-wrap: nowrap;
  gap: 12px;
  margin-left: 0;
  padding: 8px 12px;
  background: rgba(255, 255, 255, .018);
  border-color: rgba(255, 255, 255, .055);
  border-radius: 11px;
  transition: border-color .16s ease, background .16s ease;
}
.rd-actlog .rd-logrow:hover { background: rgba(255, 255, 255, .035); border-color: rgba(255, 255, 255, .1); }
.rd-actlog .rd-logrow-copy { flex: 1 1 auto; }
.rd-actlog .rd-logrow-copy strong { color: #ece9e2; font-size: 13px; }
.rd-actlog .rd-logrow-copy small { color: var(--rd-muted); font-size: 11.5px; }
.rd-actlog .rd-log-amount {
  flex: none;
  margin-left: 0;
  padding: 3px 9px;
  font-size: 12px;
  background: rgba(255, 255, 255, .06);
  border-radius: 7px;
  font-variant-numeric: tabular-nums;
}
.rd-actlog .rd-upgrade-level {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 6px;
  padding: 2px 12px 4px;
  color: var(--rd-muted);
  font-size: 12px;
}
.rd-actlog .rd-upgrade-level strong { color: #fff; font-variant-numeric: tabular-nums; }
.rd-actlog .rd-upgrade-level .text-muted { color: var(--rd-muted) !important; }
.rd-actlog .rd-upgrade-level .rd-pill { margin-left: 4px; }
.rd-actlog .rd-upgrade-mat-head {
  margin-top: 4px;
  padding: 0 12px;
  color: var(--rd-muted) !important;
  font-size: 9.5px !important;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.rd-actlog .rd-upgrade-mat { padding-top: 6px; padding-bottom: 6px; }

/* ---- Responsive ------------------------------------------------------- */
@media (max-width: 1199.98px) {
  .rd-loghero { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .rd-loghero-copy { padding-top: 0; }
  .rd-logday { grid-template-columns: minmax(0, 1fr); }
  .rd-logday .rd-figures { grid-auto-flow: row; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .rd-logday .rd-figure { min-width: 0; }
}

@media (max-width: 767.98px) {
  .rd-loghero-fields { grid-template-columns: minmax(0, 1fr); }
  .rd-loghero-fields .rd-cta { width: 100%; }
  .rd-loghero-points { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .rd-logfile { grid-template-columns: auto minmax(0, 1fr) auto; gap: 14px; padding: 12px 14px; }
  .rd-logfile-time { padding-right: 14px; }
  .rd-logfile-go > span { display: none; }
}

@media (max-width: 575.98px) {
  .rd-loghero { padding: 18px 16px; }
  .rd-loghero.rd-is-idle { padding: 36px 16px 26px; gap: 20px; }
  .rd-loghero.rd-is-idle .rd-loghero-copy h2 { font-size: 24px; }
  .rd-loghero.rd-is-idle .rd-quickpick { justify-content: flex-start; }
  .rd-logday { padding: 18px 16px; }
  .rd-logday-id { gap: 16px; }
  .rd-logday-copy h2 { font-size: 22px; }
  .rd-logday .rd-figure { padding: 10px 12px; }
  .rd-logday .rd-figure-value { font-size: 15px; }
  .rd-logday .rd-dossier-tag { white-space: normal; }
  /* Thirteen tiles two-up was a seven-row wall before the first event.
     Three-up and compact keeps the overview to a thumb's reach. */
  .rd-logtabs-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
  .rd-logtab { gap: 8px 6px; padding: 10px 10px 9px; border-radius: 11px; }
  .rd-logtab > i { width: 26px; height: 26px; font-size: 13px; border-radius: 8px; }
  .rd-logtab-count { font-size: 17px; }
  .rd-logtab-label { font-size: 11px; line-height: 1.3; }
  .rd-actlog .rd-timeline { padding-left: 22px; }
  .rd-actlog .rd-timeline::before { left: 6px; }
  .rd-actlog .rd-log-group::before { left: -21px; }
  .rd-actlog .rd-logrow { flex-wrap: wrap; }
}

@media (prefers-reduced-motion: reduce) {
  .rd-logfile-go i { transition: none; }
}

/* A panel head carrying a count badge wraps instead of clipping the badge
   off the panel's edge on a phone (Activity History, Character Search). */
.rd-panel-head:has(> .rd-headstat) { flex-wrap: wrap; }
.rd-headstat.rd-is-neutral {
  color: #d0cdc6;
  background: rgba(255, 255, 255, .05);
  border-color: rgba(255, 255, 255, .12);
}
.rd-headstat.rd-is-neutral b { color: #fff; }
@media (max-width: 359.98px) {
  .rd-logtabs-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Mail: an undelivered send is the one row on this page that means an item
   is gone, so it reads as a warning; a confirmed delivery reads as success. */
.rd-actlog .rd-log-group > span:has(> .bi-exclamation-triangle) { color: #fca5a5; font-weight: 700; }
.rd-actlog .rd-log-group > span:has(> .bi-exclamation-triangle) i { color: #f87171; }
.rd-actlog .rd-log-group > span:has(> .bi-check-circle) { color: #86efac; }
.rd-actlog .rd-log-group > span:has(> .bi-check-circle) i { color: #4ade80; }
.rd-actlog .rd-log-group:has(.bi-exclamation-triangle) + .rd-logrow {
  background: rgba(239, 68, 68, .07);
  border-color: rgba(239, 68, 68, .28);
}
.rd-actlog .rd-log-group:has(.bi-exclamation-triangle) + .rd-logrow strong { color: #fecaca; }

/* A category with only a note (Consume's potion explanation) has no events,
   so no rail. */
.rd-actlog .rd-timeline:not(:has(.rd-log-group)) { padding-left: 0; }
.rd-actlog .rd-timeline:not(:has(.rd-log-group))::before { display: none; }

/* ==========================================================================
   PHONES - My Character, Character Search, Activity History.

   From a 374-state audit (320-1920px): no overflow anywhere, but on phones
   some controls were under a thumb's size and some labels under 9px.
   ========================================================================== */

/* Touch: chips and mini-tabs at least 40px tall. */
@media (pointer: coarse), (max-width: 575.98px) {
  .rd-loghero .rd-chip,
  .rd-logtab-mini { min-height: 40px; padding-inline: 13px; }
  .rd-content:has(> .rd-csearch) .rd-seg-item { min-height: 42px; }
  .rd-cashfilter .form-control { min-height: 44px; }
}

@media (max-width: 575.98px) {
  /* Legibility floor for the uppercase micro-labels. */
  .rd-dossier .rd-gear > .rd-gear-slot > .rd-gear-label { font-size: 9px; letter-spacing: .08em; }
  .rd-dossier .rd-acc-name { font-size: 9.5px; letter-spacing: .06em; }
  .rd-dossier .rd-acc-head,
  .rd-skillgroup .rd-skilltier,
  .rd-loghero .rd-quickpick-label,
  .rd-logday .rd-figure-label,
  .rd-actlog .rd-upgrade-mat-head { font-size: 10px !important; }
  .rd-skillgroup-head .rd-pill,
  .rd-masterytile .rd-pill { font-size: 10px; }
  .rd-dossier .rd-figure-label,
  .rd-classpath small,
  .rd-dossier-lv small,
  .rd-dossier-xp-head span { font-size: 10px; }

  /* Item cards become a bottom sheet. Anchored to the item, a tall card on
     a short screen opened below it and ran off the bottom; pinned to the
     viewport it is always fully on screen, and tapping away still closes
     it (it shows on :focus-within). The script's left/pin placement is
     overridden here on purpose. */
  .rd-content:has(> .rd-csearch, > .rd-mychar, > .rd-loghero, > .rd-logday, > .rd-mkt-hero) .rd-item-card {
    position: fixed;
    top: auto !important;
    right: 10px !important;
    bottom: calc(10px + env(safe-area-inset-bottom, 0px)) !important;
    left: 10px !important;
    width: auto;
    max-width: none;
    max-height: 72vh;
    overflow-y: auto;
    padding-top: 20px;
    border-radius: 18px;
    box-shadow: 0 -8px 40px rgba(0, 0, 0, .6);
    transform: translateY(12px) !important;
  }
  .rd-content:has(> .rd-csearch, > .rd-mychar, > .rd-loghero, > .rd-logday, > .rd-mkt-hero) .rd-item:hover > .rd-item-card,
  .rd-content:has(> .rd-csearch, > .rd-mychar, > .rd-loghero, > .rd-logday, > .rd-mkt-hero) .rd-item:focus-within > .rd-item-card {
    transform: none !important;
  }
  /* A grab handle, so the sheet reads as a sheet. */
  .rd-content:has(> .rd-csearch, > .rd-mychar, > .rd-loghero, > .rd-logday, > .rd-mkt-hero) .rd-item-card::before {
    content: "";
    position: absolute;
    top: 8px;
    left: 50%;
    width: 36px;
    height: 4px;
    background: rgba(255, 255, 255, .18);
    border-radius: 2px;
    transform: translateX(-50%);
  }
  body .rd-content:has(> .rd-csearch, > .rd-mychar, > .rd-loghero, > .rd-logday, > .rd-mkt-hero) .rd-item .rd-item-card > .tooltip-box { width: auto; }
}

@media (max-width: 575.98px) {
  .rd-content:has(> .rd-csearch) .rd-figure-label { font-size: 10px; }
}

/* Phones: skill schools swipe sideways, one card at a time, with the next
   one peeking in. Stacked, Force Skill was a ~4,900px scroll before Force
   Mastery. */
@media (max-width: 575.98px) {
  .rd-skillboard {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: 86%;
    gap: 10px;
    margin-inline: -15px;
    padding: 2px 15px 10px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: 15px;
    scrollbar-width: thin;
  }
  .rd-skillboard > .rd-skillgroup { scroll-snap-align: start; }
}

/* ==========================================================================
   MARKETPLACE 2026-10 - storefront header, character cards with class and
   freshness, in-browser filters, phone-first rail, sold/history as cards.
   Builds on the AUCTION section above; nothing there is removed.
   ========================================================================== */

/* ---- Storefront header ------------------------------------------------ */
.rd-mkt-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
  margin-bottom: 20px;
  padding: 22px 24px 16px;
  border: 1px solid var(--rd-border);
  border-radius: 18px;
  background:
    radial-gradient(70% 160% at 100% 0%, rgba(var(--rd-accent-rgb), .14), transparent 62%),
    linear-gradient(180deg, rgba(29, 29, 29, .92), rgba(16, 16, 16, .96));
}
.rd-mkt-hero-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 24px; }
.rd-mkt-hero-copy { display: flex; align-items: center; gap: 16px; min-width: 0; }
.rd-mkt-hero-icon {
  flex: none;
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  color: var(--rd-btn-ink);
  font-size: 22px;
  background: linear-gradient(140deg, var(--rd-accent-2), var(--rd-accent-deep));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25);
  clip-path: polygon(13px 0, 100% 0, 100% calc(100% - 13px), calc(100% - 13px) 100%, 0 100%, 0 13px);
}
.rd-mkt-hero-copy h2 {
  margin: 0;
  color: #fff;
  font-family: var(--rd-display-font) !important;
  font-size: 24px;
  font-weight: 600;
  letter-spacing: -.025em;
  line-height: 1.15;
}
.rd-mkt-hero-copy p { margin: 4px 0 0; color: var(--rd-muted); font-size: 13px; }
.rd-mkt-hero-wallet .rd-auc-wallet { gap: 13px; padding: 11px 18px 11px 14px; border-radius: 14px; }
.rd-mkt-hero-wallet .rd-auc-wallet > i {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  font-size: 17px;
  background: rgba(var(--rd-accent-rgb), .18);
  border-radius: 10px;
}
.rd-mkt-hero-wallet .rd-auc-wallet small { font-size: 9.5px; }
.rd-mkt-hero-wallet .rd-auc-wallet b { margin-top: 6px; font-size: 20px; }
.rd-mkt-hero-wallet .rd-auc-wallet-void b { font-size: 14px; }

.rd-mkt-facts { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.rd-mkt-facts li {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 11px 5px 9px;
  color: #d0cdc6;
  font-size: 12px;
  font-weight: 600;
  background: rgba(255, 255, 255, .035);
  border: 1px solid var(--rd-border);
  border-radius: 999px;
}
.rd-mkt-facts i { color: var(--rd-accent-2); font-size: 12px; }

.rd-mkt-hero-nav { margin: 0 -8px; padding-top: 12px; border-top: 1px solid var(--rd-border); }
.rd-mkt-hero-nav .rd-seg { margin: 0; padding: 0 8px; background: none; border: 0; border-radius: 0; }

/* ---- Character cards ---------------------------------------------------- */
.rd-auc-card[hidden] { display: none !important; }
.rd-auc-listed {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--rd-muted);
  font-size: 11.5px;
  font-weight: 600;
  white-space: nowrap;
}
.rd-auc-listed i { font-size: 11px; }

/* ---- Character filter bar ------------------------------------------------ */
.rd-mkt-filter { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 18px; }
.rd-mkt-races { display: flex; flex-wrap: wrap; gap: 6px; }
.rd-mkt-race {
  --rd-auc-f: var(--rd-accent-2-rgb);
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 38px;
  padding: 5px 12px 5px 8px;
  color: #d0cdc6;
  font-size: 12.5px;
  font-weight: 600;
  background: rgba(255, 255, 255, .025);
  border: 1px solid var(--rd-border);
  border-radius: 999px;
  cursor: pointer;
  transition: background .16s ease, border-color .16s ease, color .16s ease;
}
.rd-mkt-race img { width: 20px; height: 20px; object-fit: contain; opacity: .8; }
.rd-mkt-race > i { display: grid; place-items: center; width: 20px; height: 20px; font-size: 11px; color: var(--rd-accent-2); }
.rd-mkt-race b {
  padding: 1px 7px;
  color: var(--rd-muted);
  font-size: 10.5px;
  font-weight: 750;
  font-variant-numeric: tabular-nums;
  background: rgba(255, 255, 255, .06);
  border-radius: 999px;
}
.rd-mkt-race:hover { color: #fff; border-color: rgba(var(--rd-auc-f), .4); background: rgba(var(--rd-auc-f), .08); }
.rd-mkt-race:focus-visible { outline: 2px solid rgba(var(--rd-accent-2-rgb), .7); outline-offset: 2px; }
.rd-mkt-race.rd-is-active { color: #fff; border-color: rgba(var(--rd-auc-f), .6); background: rgba(var(--rd-auc-f), .16); }
.rd-mkt-race.rd-is-active img { opacity: 1; }
.rd-mkt-race.rd-is-active b { color: #fff; background: rgba(var(--rd-auc-f), .3); }
.rd-mkt-race.rd-is-void { opacity: .45; }
.rd-mkt-search { position: relative; flex: 1 1 200px; min-width: 0; margin: 0; }
.rd-mkt-search > i {
  position: absolute;
  top: 50%;
  left: 14px;
  color: var(--rd-muted);
  font-size: 14px;
  transform: translateY(-50%);
  pointer-events: none;
}
.rd-mkt-search .form-control { width: 100%; min-height: 40px; padding-left: 40px; font-size: 13px; }
.rd-mkt-search .form-control::placeholder { color: #8b8b8b !important; }
.rd-mkt-sort.form-select { flex: 0 0 auto; width: auto; min-width: 190px; min-height: 40px; font-size: 13px; }
.rd-mkt-none {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 0 0 16px;
  padding: 18px;
  color: var(--rd-muted);
  font-size: 13px;
  border: 1px dashed var(--rd-border);
  border-radius: 12px;
}
.rd-mkt-none[hidden] { display: none; }

/* ---- Sell: three steps -------------------------------------------------- */
.rd-mkt-steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin: 0 0 6px;
  padding: 0;
  list-style: none;
  counter-reset: none;
}
.rd-mkt-steps li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  min-width: 0;
  padding: 14px 15px;
  background: rgba(255, 255, 255, .02);
  border: 1px solid var(--rd-border);
  border-radius: 13px;
}
.rd-mkt-steps b {
  flex: none;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  color: var(--rd-accent-ink);
  font-family: var(--rd-display-font) !important;
  font-size: 13px;
  font-weight: 600;
  background: rgba(var(--rd-accent-rgb), .2);
  border: 1px solid rgba(var(--rd-accent-2-rgb), .32);
  border-radius: 50%;
}
.rd-mkt-steps span { color: var(--rd-muted); font-size: 12.5px; line-height: 1.5; }
.rd-mkt-steps strong { display: block; margin-bottom: 2px; color: #f5f2eb; font-size: 13.5px; font-weight: 650; }

/* ---- Recently Sold -------------------------------------------------------- */
table.ia-sold .ia-unit { color: var(--rd-muted); font-weight: 400; }
table.ia-sold .ia-unknown { color: var(--rd-muted-2); }
table.ia-sold .ia-sold-date { white-space: nowrap; }
table.ia-sold .ia-sold-date span { display: block; color: #ece9e2; font-weight: 600; }
table.ia-sold .ia-sold-date small { display: block; color: var(--rd-muted); font-size: 11px; }

/* ---- History (both marketplaces) ------------------------------------------ */
.rd-mkt-history { gap: 8px; }
.rd-mkt-history .rd-logrow {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 14px;
  margin-left: 0;
  padding: 11px 14px;
  background: rgba(255, 255, 255, .02);
  border-color: var(--rd-border);
  border-radius: 13px;
}
.rd-mkt-history .rd-logrow .rd-idcard-sigil {
  width: 40px;
  height: 40px;
  clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
}
.rd-mkt-history .rd-logrow .rd-idcard-sigil img { width: 30px; height: 30px; }
.rd-mkt-history .rd-logrow-copy strong { color: #fff; font-size: 13.5px; }
.rd-mkt-history .rd-logrow-copy small { color: var(--rd-muted); font-size: 12px; line-height: 1.45; }
.rd-mkt-history .rd-log-time {
  color: var(--rd-muted);
  font-family: var(--rd-font) !important;
  font-size: 12px;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

/* ---- Responsive ------------------------------------------------------------ */
@media (max-width: 991.98px) {
  /* The rail stacked above the results took a full phone screen. Factions
     stay as four tiles; categories and types become swipeable chip rows. */
  /* minmax(0, 1fr): the no-wrap chip row must scroll inside the rail, not
     size the rail (and the page) to its full width. */
  .rd-auc-rail { grid-template-columns: minmax(0, 1fr); gap: 10px; min-width: 0; }
  .rd-auc-rail > div { min-width: 0; }
  .rd-auc-cats {
    display: flex;
    gap: 6px;
    margin: 0 -2px;
    padding: 2px 2px 6px;
    overflow-x: auto;
    border: 0;
    border-radius: 0;
    scrollbar-width: none;
  }
  .rd-auc-cats::-webkit-scrollbar { display: none; }
  .rd-auc-cats a {
    flex: 0 0 auto;
    gap: 8px;
    min-height: 38px;
    padding: 6px 8px 6px 12px;
    border: 1px solid var(--rd-border);
    border-radius: 999px;
    white-space: nowrap;
  }
  .rd-auc-cats a:last-child { border-bottom: 1px solid var(--rd-border); }
  .rd-auc-cats a.rd-is-active { border-color: rgba(var(--rd-accent-2-rgb), .5); }
  .rd-auc-cats a.rd-is-active::before { display: none; }
  .rd-auc-subs { display: contents; }
  .rd-auc-subs a { padding: 6px 12px; border: 1px dashed var(--rd-border); background: transparent; }
  .rd-auc-subs a.rd-is-active { border-style: solid; }
}

@media (max-width: 767.98px) {
  .rd-mkt-steps { grid-template-columns: minmax(0, 1fr); }
  .rd-mkt-sort.form-select { flex: 1 1 100%; }

  /* Recently Sold: seven columns become one card per sale. */
  table.ia-sold { display: block; overflow: visible; white-space: normal; border-spacing: 0; }
  table.ia-sold thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); }
  table.ia-sold tbody { display: grid; gap: 8px; }
  /* Named areas: auto-placement put the seller beside the price and the
     date at the bottom. */
  table.ia-sold tbody tr {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "item   item"
      "price  date"
      "seller race"
      "buyer  race";
    align-items: center;
    gap: 6px 12px;
    padding: 12px 14px;
    background: var(--rd-surface);
    border: 1px solid var(--rd-border);
    border-radius: 13px;
  }
  table.ia-sold td,
  table.ia-sold td:first-child,
  table.ia-sold td:last-child { display: block; padding: 0; text-align: left; background: none !important; border: 0; border-radius: 0; }
  table.ia-sold .ia-sold-item { grid-area: item; margin-bottom: 4px; }
  table.ia-sold .ia-sold-price { grid-area: price; }
  table.ia-sold .ia-sold-date { grid-area: date; text-align: right; }
  table.ia-sold .ia-sold-seller { grid-area: seller; }
  table.ia-sold .ia-sold-buyer { grid-area: buyer; }
  table.ia-sold .ia-sold-qty { display: none; }
  table.ia-sold .ia-sold-seller,
  table.ia-sold .ia-sold-buyer { color: #d0cdc6; font-size: 12px; }
  table.ia-sold .ia-sold-seller::before,
  table.ia-sold .ia-sold-buyer::before { content: attr(data-label) " "; color: var(--rd-muted); }
  table.ia-sold .ia-sold-race { grid-area: race; justify-self: end; }

  .rd-mkt-history .rd-logrow { grid-template-columns: auto minmax(0, 1fr); gap: 8px 12px; }
  .rd-mkt-history .rd-log-time { grid-column: 2; }
  .rd-mkt-history .rd-logrow > .rd-pill { grid-column: 2; justify-self: start; }
}

@media (max-width: 575.98px) {
  .rd-mkt-hero { padding: 18px 16px 12px; }
  .rd-mkt-hero-copy h2 { font-size: 20px; }
  .rd-mkt-hero-icon { width: 44px; height: 44px; font-size: 19px; }
  .rd-mkt-hero-wallet { flex: 1 1 100%; }
  .rd-mkt-hero-wallet .rd-auc-wallet { width: 100%; }
  /* Four facts stacked four rows deep before the tabs; one swipeable row. */
  .rd-mkt-facts {
    flex-wrap: nowrap;
    margin: 0 -16px;
    padding: 0 16px 2px;
    overflow-x: auto;
    scrollbar-width: none;
  }
  .rd-mkt-facts::-webkit-scrollbar { display: none; }
  .rd-mkt-facts li { flex: none; font-size: 11.5px; white-space: nowrap; }
  .rd-mkt-races { flex: 1 1 100%; }
  .rd-mkt-race { flex: 1 1 auto; justify-content: center; }
}

/* ==========================================================================
   MARKETPLACE RE-LAYOUT 2026-10-07
   Tabs render as open sections under the storefront header (no panel
   frame), characters as trading cards, items as grade-lit cards with a
   grid / list switch, and the confirm dialogs show the balance after the
   payment. Overrides the AUCTION and MARKETPLACE 2026-10 sections above.
   ========================================================================== */

/* ---- Open section --------------------------------------------------------- */
.rd-mkt-section { margin-bottom: 28px; }
.rd-mkt-section + .rd-mkt-section { padding-top: 6px; }
.rd-mkt-section-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 10px 20px;
  margin: 0 2px 16px;
}
.rd-mkt-section-head h2 {
  margin: 0;
  color: #fff;
  font-family: var(--rd-display-font) !important;
  font-size: 19px;
  font-weight: 600;
  letter-spacing: -.02em;
}
.rd-mkt-section-head p { margin: 3px 0 0; color: var(--rd-muted); font-size: 13px; }
.rd-mkt-section-extra { display: flex; flex-wrap: wrap; gap: 8px; }
.rd-mkt-stat {
  display: inline-flex;
  align-items: baseline;
  gap: 7px;
  padding: 6px 12px;
  background: rgba(255, 255, 255, .03);
  border: 1px solid var(--rd-border);
  border-radius: 999px;
}
.rd-mkt-stat small { color: var(--rd-muted); font-size: 11.5px; font-weight: 600; }
.rd-mkt-stat b {
  color: #fff;
  font-family: var(--rd-display-font) !important;
  font-size: 14px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

/* ---- Character trading card ------------------------------------------------ */
.rd-auc-card.rd-mkt-char {
  gap: 0;
  padding: 0;
  overflow: hidden;
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(24, 24, 24, .96), rgba(16, 16, 16, .98));
}
.rd-auc-card.rd-mkt-char::before { display: none; }
.rd-mkt-char-banner {
  position: relative;
  height: 96px;
  background:
    radial-gradient(120% 140% at 0% 100%, rgba(var(--rd-auc-f), .34), transparent 60%),
    linear-gradient(135deg, rgba(var(--rd-auc-f), .22), rgba(var(--rd-auc-f), .04) 70%);
  border-bottom: 1px solid rgba(var(--rd-auc-f), .18);
}
/* The watermark is sized and offset inside its own box, so the banner can
   leave overflow visible for the portrait that hangs below it. */
.rd-mkt-char-banner::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 170px;
  background: 40px 50% / 150px 150px no-repeat;
  opacity: .12;
  pointer-events: none;
}
.rd-mkt-char.rd-race-bellato  .rd-mkt-char-banner::after { background-image: url("../../../images/race/bellato.png"); }
.rd-mkt-char.rd-race-cora     .rd-mkt-char-banner::after { background-image: url("../../../images/race/cora.png"); }
.rd-mkt-char.rd-race-accretia .rd-mkt-char-banner::after { background-image: url("../../../images/race/accretia.png"); }

/* The portrait: class art framed, faction crest as its badge. Also used in
   the purchase dialog, where it sits in normal flow. */
.rd-mkt-char-portrait {
  position: relative;
  flex: none;
  display: grid;
  place-items: center;
  width: 72px;
  height: 72px;
  line-height: 0;
  background: radial-gradient(circle at 50% 40%, rgba(var(--rd-auc-f), .3), #0d0d0d 72%);
  border: 2px solid rgba(var(--rd-auc-f), .65);
  border-radius: 18px;
  box-shadow: 0 10px 24px rgba(0, 0, 0, .45);
}
.rd-mkt-char-portrait > .rd-classicon { width: 52px; height: 52px; border-radius: 8px; }
.rd-mkt-char-portrait > .rd-auc-crest { border-radius: 0; }
.rd-mkt-char-portrait:has(> .rd-auc-crest) { background: none; border: 0; box-shadow: none; }
.rd-mkt-char-badge { position: absolute; right: -9px; bottom: -9px; line-height: 0; }
.rd-mkt-char-badge .rd-auc-crest { --rd-auc-crest-size: 28px; --rd-auc-crest-cut: 7px; box-shadow: 0 3px 8px rgba(0, 0, 0, .5); }
.rd-mkt-char-banner .rd-mkt-char-portrait { position: absolute; left: 18px; bottom: -34px; z-index: 1; }

.rd-mkt-char-lv {
  position: absolute;
  top: 14px;
  right: 16px;
  z-index: 1;
  display: grid;
  justify-items: end;
  gap: 2px;
  line-height: 1;
}
.rd-mkt-char-lv small {
  color: rgba(255, 255, 255, .7);
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.rd-mkt-char-lv b {
  color: #fff;
  font-family: var(--rd-display-font) !important;
  font-size: 32px;
  font-weight: 600;
  letter-spacing: -.03em;
  font-variant-numeric: tabular-nums;
  text-shadow: 0 2px 12px rgba(0, 0, 0, .45);
}

.rd-mkt-char-id { padding: 44px 18px 0; min-width: 0; }
.rd-mkt-char-id h3 {
  margin: 0;
  overflow: hidden;
  color: #fff;
  font-family: var(--rd-display-font) !important;
  font-size: 19px;
  font-weight: 600;
  letter-spacing: -.02em;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.rd-mkt-char-id p {
  margin: 3px 0 0;
  color: rgba(var(--rd-auc-f), .95);
  font-size: 12.5px;
  font-weight: 600;
}

/* Figures as one ledger, label over value. Side by side, "PVP POINTS"
   squeezed the value into a sliver and cut "-16,750" to "-16,...". The
   value now has the column's full width and is never truncated. */
.rd-mkt-char .rd-auc-stats { gap: 0 18px; margin: 12px 18px 4px; }
.rd-mkt-char .rd-auc-stat {
  display: grid;
  gap: 4px;
  min-width: 0;
  padding: 9px 0;
  background: none;
  border: 0;
  border-bottom: 1px solid rgba(255, 255, 255, .06);
  border-radius: 0;
}
.rd-mkt-char .rd-auc-stat dt { font-size: 10px; letter-spacing: .1em; }
.rd-mkt-char .rd-auc-stat dd {
  margin: 0;
  overflow: visible;
  font-size: 15px;
  line-height: 1.2;
  text-overflow: clip;
  white-space: normal;
  overflow-wrap: anywhere;
}
.rd-auc-stat.rd-is-zero dd { color: var(--rd-muted-2); }
.rd-auc-stat.rd-is-neg dd { color: #fca5a5; }

.rd-mkt-char-foot {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: auto;
  padding: 14px 16px 16px 18px;
  background: rgba(0, 0, 0, .22);
  border-top: 1px solid rgba(255, 255, 255, .05);
}
.rd-mkt-char-price { flex: 1 1 auto; min-width: 0; text-align: left; }
.rd-mkt-char-price .rd-auc-price b { font-size: 23px; }
.rd-mkt-char-price .rd-auc-listed { margin-top: 6px; }
.rd-mkt-char .rd-auc-card-actions { flex: 0 0 auto; flex-wrap: nowrap; gap: 8px; margin: 0; }
.rd-mkt-char .rd-auc-card-actions .rd-cta { flex: 0 0 auto; }
.rd-mkt-char .rd-auc-card-actions .rd-cta-primary { min-width: 104px; }
.rd-mkt-char-foot:not(:has(.rd-mkt-char-price)) .rd-auc-card-actions { flex: 1 1 auto; }
.rd-mkt-char-foot:not(:has(.rd-mkt-char-price)) .rd-auc-card-actions .rd-cta { flex: 1 1 auto; }
/* Inspect becomes an icon button: Buy is the card's action. */
.rd-mkt-inspect.rd-cta { width: 42px; min-width: 42px; padding: 0; gap: 0; }
.rd-mkt-inspect > span {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}
.rd-mkt-inspect > i { font-size: 16px; }

.rd-mkt-browse .rd-auc-grid,
.rd-mkt-section > .rd-auc-grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 290px), 1fr)); gap: 18px; }

/* ---- Item cards ------------------------------------------------------------ */
.rd-mkt-items .rd-auc-listing { --rd-g: 161, 161, 161; }
.rd-mkt-items .rd-auc-listing:has(.border-grade-1) { --rd-g: 250, 204, 21; }
.rd-mkt-items .rd-auc-listing:has(.border-grade-2) { --rd-g: 192, 132, 252; }
.rd-mkt-items .rd-auc-listing:has(.border-grade-3) { --rd-g: 251, 146, 60; }
.rd-mkt-items .rd-auc-listing:has(.border-grade-4) { --rd-g: 96, 165, 250; }
.rd-mkt-items .rd-auc-listing:has(.border-grade-5) { --rd-g: 249, 168, 212; }
.rd-mkt-items .rd-auc-listing:has(.border-grade-6) { --rd-g: 125, 211, 252; }
.rd-mkt-items .rd-auc-listing:has(.border-grade-7),
.rd-mkt-items .rd-auc-listing:has(.border-grade-8) { --rd-g: 74, 222, 128; }
.rd-mkt-items .rd-auc-listing:has(.border-grade-9) { --rd-g: 251, 113, 62; }

.rd-mkt-items.rd-mkt-view-grid {
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 214px), 1fr));
  gap: 14px;
}
.rd-mkt-view-grid .rd-auc-listing {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    "thumb thumb"
    "copy  copy"
    "price act";
  align-items: end;
  gap: 12px 10px;
  padding: 10px 10px 14px;
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(24, 24, 24, .96), rgba(16, 16, 16, .98));
}
.rd-mkt-view-grid .rd-auc-listing:hover {
  transform: translateY(-3px);
  border-color: rgba(var(--rd-g), .5);
  background: linear-gradient(180deg, rgba(29, 29, 29, .98), rgba(17, 17, 17, .98));
  box-shadow: 0 18px 36px -16px rgba(0, 0, 0, .7);
}
.rd-mkt-view-grid .rd-auc-listing-thumb {
  grid-area: thumb;
  height: 124px;
  padding: 0;
  background:
    radial-gradient(circle at 50% 55%, rgba(var(--rd-g), .34), transparent 62%),
    rgba(0, 0, 0, .32);
  border-color: rgba(var(--rd-g), .22);
  border-radius: 13px;
}
.rd-mkt-view-grid .rd-auc-listing:hover .rd-auc-listing-thumb { border-color: rgba(var(--rd-g), .45); }
.rd-mkt-view-grid .rd-auc-qty { right: 8px; bottom: 8px; }
.rd-mkt-view-grid .rd-auc-listing-copy { grid-area: copy; padding: 0 4px; }
.rd-mkt-view-grid .rd-auc-listing-copy strong { font-size: 14px; line-height: 1.35; }
.rd-mkt-view-grid .rd-auc-races { position: absolute; top: 18px; right: 18px; z-index: 2; }
.rd-mkt-view-grid .rd-auc-listing-price { grid-area: price; padding-left: 4px; text-align: left; }
.rd-mkt-view-grid .rd-auc-listing-price .rd-auc-price b { font-size: 20px; }
.rd-mkt-view-grid .rd-auc-listing-actions { grid-area: act; }
.rd-mkt-view-grid .rd-auc-listing-actions .rd-cta { min-width: 0; padding-inline: 16px; }

/* List view keeps the row layout; the grade shows on the thumb frame. */
.rd-mkt-view-list .rd-auc-listing-thumb {
  background: radial-gradient(circle at 50% 55%, rgba(var(--rd-g), .28), transparent 70%), rgba(0, 0, 0, .3);
  border-color: rgba(var(--rd-g), .25);
}

/* ---- Filter rail and toolbar ------------------------------------------------ */
@media (min-width: 992px) {
  .rd-auc-rail {
    padding: 16px 14px;
    background: rgba(255, 255, 255, .02);
    border: 1px solid var(--rd-border);
    border-radius: 18px;
  }
  .rd-auc-cats { border-radius: 12px; background: rgba(0, 0, 0, .15); }
}
.rd-mkt-view {
  display: inline-flex;
  flex: none;
  padding: 3px;
  background: rgba(255, 255, 255, .03);
  border: 1px solid var(--rd-border);
  border-radius: 11px;
}
.rd-mkt-view button {
  display: grid;
  place-items: center;
  width: 36px;
  height: 34px;
  color: var(--rd-muted);
  font-size: 16px;
  background: transparent;
  border: 0;
  border-radius: 8px;
  cursor: pointer;
  transition: color .16s ease, background .16s ease;
}
.rd-mkt-view button:hover { color: #fff; }
.rd-mkt-view button[aria-pressed="true"] { color: #fff; background: rgba(var(--rd-accent-rgb), .3); }
.rd-mkt-view button:focus-visible { outline: 2px solid rgba(var(--rd-accent-2-rgb), .7); outline-offset: 1px; }

/* ---- Confirm dialog ---------------------------------------------------------- */
.rd-auc-modal .modal-content {
  overflow: hidden;
  background: linear-gradient(180deg, #191919, #101010);
  border: 1px solid rgba(255, 255, 255, .09);
  border-radius: 20px;
  box-shadow: 0 30px 80px rgba(0, 0, 0, .6);
}
.rd-auc-modal .modal-header { padding: 16px 20px; border-bottom: 1px solid var(--rd-border); }
.rd-auc-modal .modal-title {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--rd-display-font) !important;
  font-size: 17px;
  font-weight: 600;
}
.rd-auc-modal-icon {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  color: var(--rd-accent-2);
  font-size: 16px;
  background: rgba(var(--rd-accent-rgb), .16);
  border-radius: 10px;
}
.rd-auc-modal-danger .rd-auc-modal-icon { color: #fca5a5; background: rgba(239, 68, 68, .14); }

/* What you are buying, lit by its faction or its item grade. */
.rd-auc-subject {
  --rd-s: var(--rd-accent-2-rgb);
  gap: 16px;
  padding: 16px;
  background:
    radial-gradient(120% 160% at 0% 0%, rgba(var(--rd-s), .22), transparent 60%),
    rgba(255, 255, 255, .02);
  border: 1px solid rgba(var(--rd-s), .24);
  border-radius: 16px;
}
.rd-auc-subject:has(.rd-race-bellato)  { --rd-s: 96, 165, 250; }
.rd-auc-subject:has(.rd-race-cora)     { --rd-s: 192, 132, 252; }
.rd-auc-subject:has(.rd-race-accretia) { --rd-s: 148, 163, 184; }
.rd-auc-subject:has(.border-grade-1) { --rd-s: 250, 204, 21; }
.rd-auc-subject:has(.border-grade-2) { --rd-s: 192, 132, 252; }
.rd-auc-subject:has(.border-grade-3) { --rd-s: 251, 146, 60; }
.rd-auc-subject:has(.border-grade-4) { --rd-s: 96, 165, 250; }
.rd-auc-subject:has(.border-grade-7),
.rd-auc-subject:has(.border-grade-8) { --rd-s: 74, 222, 128; }
.rd-auc-subject-copy h3 { font-size: 20px; }
.rd-auc-subject-copy p { color: rgba(var(--rd-s), 1); font-weight: 600; }
.rd-auc-subject-thumb {
  display: grid;
  place-items: center;
  width: 76px;
  height: 76px;
  background: radial-gradient(circle, rgba(var(--rd-s), .3), rgba(0, 0, 0, .35) 70%);
  border: 1px solid rgba(var(--rd-s), .35);
  border-radius: 16px;
}

.rd-auc-modal .rd-auc-total { margin: 16px 0 10px; }

/* Balance before and after. */
.rd-auc-balance {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  margin: 0 0 16px;
  padding: 12px 16px;
  background: rgba(255, 255, 255, .025);
  border: 1px solid var(--rd-border);
  border-radius: 13px;
}
.rd-auc-balance > div { display: grid; gap: 3px; min-width: 0; }
.rd-auc-balance > div:last-child { text-align: right; }
.rd-auc-balance span { color: var(--rd-muted); font-size: 11.5px; font-weight: 600; }
.rd-auc-balance b {
  color: #fff;
  font-family: var(--rd-display-font) !important;
  font-size: 16px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.rd-auc-balance > i { color: var(--rd-muted); font-size: 16px; }
.rd-auc-balance.rd-is-short { background: rgba(239, 68, 68, .07); border-color: rgba(239, 68, 68, .3); }
.rd-auc-balance.rd-is-short > div:last-child b { color: #fca5a5; }
.rd-auc-short {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: -8px 0 16px;
  color: #fca5a5;
  font-size: 12.5px;
  font-weight: 600;
}

/* The final-sale warning, as one line instead of a boxed alert. */
.rd-auc-final {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 14px 0 0;
  padding: 11px 13px;
  color: var(--rd-muted);
  font-size: 12.5px;
  line-height: 1.5;
  background: rgba(255, 189, 74, .06);
  border: 1px solid rgba(255, 189, 74, .2);
  border-radius: 12px;
}
.rd-auc-final i { margin-top: 2px; color: #fbbf24; font-size: 13px; }
.rd-auc-final strong { color: #fde68a; font-weight: 650; }
.rd-auc-modal .rd-auc-specs { margin-bottom: 4px; }
.rd-auc-modal .rd-auc-inline { margin: 12px 0 0; }
.rd-auc-modal .modal-footer { background: rgba(0, 0, 0, .2); border-top: 1px solid var(--rd-border); }

/* ---- Phones ---------------------------------------------------------------- */
@media (max-width: 575.98px) {
  .rd-mkt-section-head h2 { font-size: 17px; }
  /* Two item cards per row, price over a full-width Buy. */
  .rd-mkt-items.rd-mkt-view-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .rd-mkt-view-grid .rd-auc-listing {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "thumb" "copy" "price" "act";
    gap: 8px;
    padding: 8px 8px 10px;
    border-radius: 15px;
  }
  .rd-mkt-view-grid .rd-auc-listing-thumb { height: 96px; }
  .rd-mkt-view-grid .rd-auc-listing-copy strong { font-size: 13px; }
  .rd-mkt-view-grid .rd-auc-listing-copy small { font-size: 11px; }
  .rd-mkt-view-grid .rd-auc-races { top: 14px; right: 14px; }
  .rd-mkt-view-grid .rd-auc-listing-price .rd-auc-price b { font-size: 17px; }
  .rd-mkt-view-grid .rd-auc-listing-actions .rd-cta { width: 100%; }
  .rd-mkt-view-grid .rd-auc-listing:hover { transform: none; }

  .rd-mkt-char-banner { height: 84px; }
  .rd-mkt-char-lv b { font-size: 28px; }
  .rd-mkt-char .rd-auc-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 14px; }

  .rd-auc-balance { padding: 10px 12px; gap: 8px; }
  .rd-auc-balance b { font-size: 14px; }
  .rd-auc-subject { padding: 12px; gap: 12px; }
  .rd-auc-subject-copy h3 { font-size: 17px; }
}

@media (max-width: 575.98px) {
  .rd-mkt-races { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* An open item card must paint above the neighbouring listings. A hovered
   listing is transformed (the lift), which makes it a stacking context, so
   the card's own z-index only counts inside it and the next cards in the
   grid painted over the card. Raising the listing itself fixes that, and
   above the sticky topbar (1020) and scroll buttons (1030) too, so a card
   opening near the top or bottom of the screen is not slid under them.
   Still below the sidebar (1040) and Bootstrap modals. */
.rd-auc-listing:hover,
.rd-auc-listing:focus-within { position: relative; z-index: 1035; }
/* With a mouse, an open card lets the pointer through: moving on to the
   next item in the grid closes this card instead of the card sitting over
   that item and keeping itself open. Keyboard focus and touch still open
   it the same way. */
@media (hover: hover) and (pointer: fine) {
  .rd-mkt-items .rd-item:hover > .rd-item-card { pointer-events: none; }
  /* header.html's legacy ".tooltip-trigger:hover .tooltip-box" turns pointer
     events back on for the loaded content, which kept the card catching
     the mouse. */
  .rd-mkt-items .rd-item:hover > .rd-item-card * { pointer-events: none !important; }
}

/* EXP meter on a character card: in the banner, between the portrait and
   the level number it belongs to, filled in the card's faction colour. */
.rd-mkt-char-xp {
  position: absolute;
  top: 34px;
  left: 112px;
  right: 86px;
  z-index: 1;
  display: grid;
  gap: 5px;
  min-width: 0;
}
.rd-mkt-char-xp-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.rd-mkt-char-xp-head small {
  color: rgba(255, 255, 255, .7);
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.rd-mkt-char-xp-head b {
  color: #fff;
  font-family: var(--rd-display-font) !important;
  font-size: 14px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  text-shadow: 0 1px 8px rgba(0, 0, 0, .45);
}
.rd-mkt-char-xp-bar {
  display: block;
  height: 6px;
  overflow: hidden;
  background: rgba(0, 0, 0, .35);
  border-radius: 999px;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06);
}
.rd-mkt-char-xp-bar i {
  display: block;
  height: 100%;
  min-width: 3px;
  background: linear-gradient(90deg, rgba(var(--rd-auc-f), .6), rgb(var(--rd-auc-f)));
  border-radius: inherit;
}

/* Confirm dialogs on short screens. Bootstrap's .modal-dialog-scrollable
   scrolls a .modal-body that is a direct flex child of .modal-content, but
   the auction dialogs wrap header, body and footer in their <form>, so the
   body never shrank: the dialog grew past the screen and its own frame cut
   off the Cancel / Buy buttons. The form now carries the same column
   layout, so the header and the buttons stay put and the body scrolls. */
.rd-auc-modal .modal-content > form {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-height: 0;
}
.rd-auc-modal .modal-header,
.rd-auc-modal .modal-footer { flex-shrink: 0; }
.rd-auc-modal .modal-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
}

/* =====================================================================
   THE RAIL
   ---------------------------------------------------------------------
   178 pages in one scrolling list is why the sidebar grew a search box.
   The rail folds the 19 categories into eight sections; the sidebar then
   shows one section at a time, so you browse ~25 pages instead of 178.

   Filtering is opt-in: the script adds .rd-rail-on to .rd-app once it has
   wired the buttons up. Without it every category stays visible and the
   menu behaves exactly as it did before, so a script that fails to load
   cannot strand anyone.
   ===================================================================== */

.rd-rail {
  /* The sidebar is position:fixed and the stage is pushed over by
     --rd-sidebar-w, so the rail is fixed too and that one variable carries
     the rail's width. Everything keyed off it - sidebar, stage, the
     collapsed state - then moves together without a second rule. */
  position: fixed;
  inset: 0 auto 0 0;
  z-index: 1041;
  width: var(--rd-rail-w);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 14px 0;
  background: #000;
  border-right: 1px solid var(--rd-border, #26262b);
  overflow-y: auto;
  overscroll-behavior: contain;
}
/* The sidebar starts where the rail ends, and gives up that width so the
   pair together still measure --rd-sidebar-w. */
.rd-app:has(> .rd-rail) .rd-sidebar {
  left: var(--rd-rail-w);
  width: calc(var(--rd-sidebar-w) - var(--rd-rail-w));
}

.rd-rail-btn {
  width: 56px;
  min-height: 50px;
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 6px 2px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: var(--rd-muted, #938d84);
  font: inherit;
  font-size: 8.5px;
  font-weight: 600;
  letter-spacing: .4px;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
}
.rd-rail-btn i { font-size: 17px; line-height: 1; }
.rd-rail-btn span {
  display: block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.rd-rail-btn:hover,
.rd-rail-btn:focus-visible { background: var(--rd-surface-2, #1a1a1f); color: var(--rd-text, #f4f1ec); }
.rd-rail-btn.rd-is-on {
  color: var(--rd-accent, #c8a44d);
  box-shadow: inset 0 0 0 1px var(--rd-border-strong, #36363f);
}

/* Only filter once the script says it is ready. */
.rd-app.rd-rail-on .rd-sidebar .nav-item.dropdown[data-rd-section] { display: none; }
.rd-app.rd-rail-on .rd-sidebar .nav-item.dropdown[data-rd-section].rd-sec-show { display: block; }
/* Everything in the menu that is NOT a category.
   The filter above only hides .nav-item.dropdown[data-rd-section], so
   anything else in the list stays put and turns up in every section:

     .rd-nav-divider   the Player / Progression / Staff band labels, which
                       read as stray headings once a section is filtered
     .rd-nav-home      Dashboard - the rail already carries it as its first
                       button, so it appeared in all of them

   Both are reachable elsewhere and neither belongs to a section. Anything
   added to the menu that is not a category needs a line here, or it will
   show up everywhere too. */
.rd-app.rd-rail-on .rd-sidebar .rd-nav-divider,
.rd-app.rd-rail-on .rd-sidebar .rd-nav-home { display: none; }

@media (max-width: 900px) {
  /* Below this width the sidebar is already an off-canvas drawer sitting at
     left:0, so a fixed rail beside it would cover the page. It becomes a
     horizontal strip pinned to the bottom instead, which is also where a
     thumb can reach it. */
  .rd-rail {
    inset: auto 0 0 0;
    width: auto;
    flex-direction: row;
    justify-content: flex-start;
    overflow-x: auto;
    overflow-y: hidden;
    border-right: 0;
    border-top: 1px solid var(--rd-border, #26262b);
    padding: 6px 10px;
    padding-bottom: calc(6px + env(safe-area-inset-bottom, 0px));
  }
  .rd-app:has(> .rd-rail) .rd-sidebar { left: 0; }
  .rd-app:has(> .rd-rail) .rd-stage { padding-bottom: 76px; }
}

/* =====================================================================
   TOP NAVIGATION
   ---------------------------------------------------------------------
   The rail becomes a horizontal bar across the top and the sidebar
   becomes the panel that drops out of it, so the content gets the full
   width of the window back.

   The markup is unchanged - this is the same rail and the same sidebar,
   repositioned. Everything below is scoped to .rd-app.rd-topnav, which
   the script adds, so removing that one class returns the sidebar.

   With 177 pages a section like Server Admin is 46 entries, so the panel
   is a multi-column mega-menu rather than a list: a single column would
   run off the bottom of the screen.
   ===================================================================== */

.rd-app.rd-topnav { --rd-railbar-h: 52px; }

/* ---- the bar ---- */
.rd-app.rd-topnav > .rd-rail {
  inset: 0 0 auto 0;
  width: auto;
  /* Wraps to a second row when the sections and the account button no
     longer fit, rather than scrolling sideways. Scrolling needs
     overflow-x, and an overflow of any kind clips the panels that hang
     out of this bar - both the section dropdowns and the account menu.
     Height is therefore a minimum, not a fixed value. */
  height: auto;
  min-height: var(--rd-railbar-h);
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  gap: 2px;
  padding: 0 14px;
  border-right: 0;
  border-bottom: 1px solid var(--rd-border, #26262b);
  overflow: visible;
}
.rd-app.rd-topnav > .rd-rail .rd-rail-btn {
  width: auto;
  min-height: 38px;
  flex-direction: row;
  gap: 8px;
  padding: 0 13px;
  font-size: 12.5px;
  letter-spacing: .2px;
  white-space: nowrap;
}
.rd-app.rd-topnav > .rd-rail .rd-rail-btn i { font-size: 15px; }

/* ---- the sidebar, now a drop panel ---- */
.rd-app.rd-topnav .rd-sidebar {
  /* A dropdown hanging under the section that was clicked, not a band
     across the window. --rd-panel-x is that button's own left offset, set
     by the script and clamped there so a section near the right edge opens
     inward rather than off screen. */
  left: var(--rd-panel-x, 14px);
  right: auto;
  top: calc(var(--rd-railbar-h) + 4px);
  bottom: auto;
  width: min(320px, calc(100vw - 24px));
  max-height: calc(100vh - var(--rd-railbar-h) - 24px);
  border: 1px solid var(--rd-border-strong, #36363f);
  border-radius: 12px;
  box-shadow: 0 22px 54px rgba(0, 0, 0, .6);
  transform: translateY(-6px);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .14s ease, transform .14s ease, visibility .14s;
}
.rd-app.rd-topnav.rd-nav-open .rd-sidebar {
  transform: none;
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}
/* The brand and the sidebar footer belong to a column, not to a dropdown. */
.rd-app.rd-topnav .rd-sidebar .rd-brand-wrap,
.rd-app.rd-topnav .rd-sidebar-footer,
.rd-app.rd-topnav .rd-server-chip { display: none; }

.rd-app.rd-topnav .rd-nav-search { padding: 12px 12px 2px; max-width: none; }

/* One vertical list down the panel. The multi-column version this replaced
   spread four columns across the whole window and read as a wall of links
   rather than a menu. */
.rd-app.rd-topnav .rd-nav {
  padding: 8px 10px 12px;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.rd-app.rd-topnav .rd-nav .nav-item.dropdown {
  display: block;
  width: 100%;
  margin-bottom: 2px;
}

/* ---- the stage gets the window back ---- */
.rd-app.rd-topnav .rd-stage {
  margin-left: 0;
  padding-top: var(--rd-railbar-h);
}
/* The brand moves into the page topbar, which is now the only place for it. */
.rd-app.rd-topnav .rd-topbar { padding-left: 18px; }

@media (max-width: 900px) {
  .rd-app.rd-topnav .rd-nav { columns: 1; }
  .rd-app.rd-topnav .rd-sidebar { max-height: calc(100vh - var(--rd-railbar-h) - 10px); }
}

/* The rail's own wordmark. Only drawn once the rail is the top bar - as a
   vertical column there is no room for it and the sidebar's lockup is
   already on screen. */
.rd-rail-brand { display: none; }
.rd-app.rd-topnav > .rd-rail .rd-rail-brand {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
  margin-right: 12px;
  padding-right: 14px;
  border-right: 1px solid var(--rd-border, #26262b);
  min-height: 38px;
}
.rd-app.rd-topnav > .rd-rail .rd-rail-brand img {
  display: block;
  width: 116px;
  height: auto;
  filter: drop-shadow(0 3px 6px rgba(0, 0, 0, .45));
}
@media (max-width: 640px) {
  .rd-app.rd-topnav > .rd-rail .rd-rail-brand { margin-right: 8px; padding-right: 10px; }
  .rd-app.rd-topnav > .rd-rail .rd-rail-brand img { width: 84px; }
}

/* ---------------------------------------------------------------------
   The panel reads as an ordinary menu
   ---------------------------------------------------------------------
   Inside the sidebar each category is an accordion: the page list is
   display:none until the script adds .rd-open. In a dropdown that means
   two clicks to reach a page - open the section, then open the category -
   which is not how a menu behaves.

   Under the top navigation the lists are simply open, and the category
   name becomes a small heading above its pages rather than a control.
   --------------------------------------------------------------------- */

/* Every category's pages are shown; there is nothing left to expand. */
.rd-app.rd-topnav .rd-nav .dropdown-menu {
  display: block;
  position: static;
  float: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  box-shadow: none;
}

/* The category name is a label now, not a button: no hover state, no
   caret, and not a tab stop, because activating it does nothing. */
.rd-app.rd-topnav .rd-nav .nav-item.dropdown > .nav-link {
  pointer-events: none;
  padding: 10px 10px 4px;
  color: var(--rd-muted, #938d84);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  background: none !important;
  box-shadow: none !important;
}
.rd-app.rd-topnav .rd-nav .nav-item.dropdown > .nav-link .caret { display: none; }

/* The page links themselves: full width, comfortable to hit, and the one
   you are on is marked. */
.rd-app.rd-topnav .rd-nav .dropdown-item {
  display: block;
  padding: 8px 10px;
  border-radius: 7px;
  font-size: 13px;
  line-height: 1.35;
  color: var(--rd-text, #f4f1ec);
  text-decoration: none;
  white-space: normal;
}
.rd-app.rd-topnav .rd-nav .dropdown-item:hover,
.rd-app.rd-topnav .rd-nav .dropdown-item:focus-visible {
  background: var(--rd-surface-2, #1a1a1f);
}

/* A hairline between categories, so a long section still has structure
   without every group shouting. */
.rd-app.rd-topnav .rd-nav .nav-item.dropdown + .nav-item.dropdown {
  margin-top: 6px;
  padding-top: 4px;
  border-top: 1px solid var(--rd-border, #26262b);
}

/* The sidebar's menu search belongs to a column you live in, not to a
   dropdown you open and dismiss. Ctrl K is the search here. */
.rd-app.rd-topnav .rd-nav-search { display: none; }

/* ---------------------------------------------------------------------
   The bar, closer to the reference
   ---------------------------------------------------------------------
   rf.novusrising.net runs icon + label + caret along a dark bar, with the
   current item in gold above a short underline. Same shape here, so the
   panel and the public site read as one product.
   --------------------------------------------------------------------- */

.rd-app.rd-topnav > .rd-rail .rd-rail-btn {
  position: relative;
  border-radius: 0;
  padding: 0 14px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .06em;
}
.rd-app.rd-topnav > .rd-rail .rd-rail-btn:hover,
.rd-app.rd-topnav > .rd-rail .rd-rail-btn:focus-visible {
  background: transparent;
  color: var(--rd-text, #f4f1ec);
}

/* The caret, on the sections that open a panel. The Home button is a plain
   link and does not get one. */
.rd-app.rd-topnav > .rd-rail .rd-rail-btn[data-rd-rail]::after {
  content: "";
  width: 6px;
  height: 6px;
  margin-left: 2px;
  border-right: 1.6px solid currentColor;
  border-bottom: 1.6px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  transition: transform .16s ease;
}
.rd-app.rd-topnav > .rd-rail .rd-rail-btn[aria-expanded="true"]::after {
  transform: translateY(1px) rotate(225deg);
}

/* Current section: gold, with the underline sitting on the bar's edge. */
.rd-app.rd-topnav > .rd-rail .rd-rail-btn.rd-is-on {
  color: var(--rd-accent, #c8a44d);
  box-shadow: none;
}
.rd-app.rd-topnav > .rd-rail .rd-rail-btn.rd-is-on::before {
  content: "";
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 0;
  height: 2px;
  background: var(--rd-accent, #c8a44d);
}

/* The account button, now on the bar. */
.rd-rail-actions { display: none; }
.rd-app.rd-topnav > .rd-rail .rd-rail-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
  margin-left: auto;        /* pushes it to the right of the sections */
  padding-left: 14px;
}
.rd-app.rd-topnav > .rd-rail .rd-rail-btn { flex: 0 0 auto; }

/* Both of these drove the sidebar: one folded it down to icons, the other
   opened it as a drawer on a phone. Under the top navigation the menu is a
   dropdown from the bar, so neither has anything left to do.

   !important is not decoration here. .rd-icon-btn sets
   display: inline-grid !important, which beats any plain declaration
   whatever its specificity - the first attempt at this rule did nothing at
   all and the button stayed on screen looking like a control.

   The elements stay in the markup because the interface script looks both
   up by id on load. */
.rd-app.rd-topnav .rd-collapse-menu,
.rd-app.rd-topnav .rd-mobile-menu { display: none !important; }