/* ============================ RPG INTRO MODE ============================ */
/* Override the official intro chrome when .intro-rpg is on the root. */

.intro.intro-rpg {
  background: #0d0203;
  color: #ffd9b8;
  /* Make sure the rpg-mode toggle and content sit above curtains/bg */
  isolation: isolate;
}

/* --- Backdrop layers --- */
.rpg-bg {
  position: absolute; inset: 0; z-index: 0;
  background:
    radial-gradient(120% 90% at 50% 110%, #6a1410 0%, #3a0a0a 38%, #1a0407 70%, #0a0203 100%),
    radial-gradient(60% 50% at 50% 30%,  #b03018 0%, transparent 60%);
  filter: saturate(1.05);
}
.rpg-bg::after {
  /* subtle film grain via stacked radial-gradients */
  content: "";
  position: absolute; inset: 0;
  background-image:
    radial-gradient(1px 1px at 20% 30%, rgba(255,200,140,0.08), transparent 50%),
    radial-gradient(1px 1px at 70% 60%, rgba(255,160,100,0.07), transparent 50%),
    radial-gradient(1px 1px at 40% 80%, rgba(255,200,140,0.06), transparent 50%),
    radial-gradient(1px 1px at 85% 20%, rgba(255,180,120,0.06), transparent 50%);
  background-size: 220px 220px, 320px 320px, 260px 260px, 180px 180px;
  mix-blend-mode: screen;
  opacity: 0.7;
  pointer-events: none;
}

/* Soft fire glow at the bottom — faint flickering "ground" */
.rpg-firefloor {
  position: absolute; left: 0; right: 0; bottom: 0; height: 38%;
  z-index: 0;
  background:
    radial-gradient(80% 100% at 50% 100%, rgba(255,120,40,0.32) 0%, rgba(255,80,30,0.12) 35%, transparent 70%),
    radial-gradient(40% 80% at 22% 100%, rgba(255,160,60,0.18) 0%, transparent 60%),
    radial-gradient(40% 80% at 78% 100%, rgba(255,140,50,0.16) 0%, transparent 60%);
  mix-blend-mode: screen;
  animation: rpgFlicker 4.2s ease-in-out infinite;
  pointer-events: none;
}
@keyframes rpgFlicker {
  0%, 100% { opacity: 0.85; transform: translateY(0); }
  40%      { opacity: 1.0;  transform: translateY(-2px); }
  60%      { opacity: 0.78; transform: translateY(1px); }
}

/* Vignette frame */
.rpg-vignette {
  position: absolute; inset: 0; z-index: 1;
  pointer-events: none;
  background:
    radial-gradient(120% 80% at 50% 50%, transparent 50%, rgba(0,0,0,0.55) 90%, rgba(0,0,0,0.85) 100%);
}

/* Embers — small rising sparks */
.rpg-embers {
  position: absolute; inset: 0; z-index: 1; pointer-events: none; overflow: hidden;
}
.rpg-ember {
  position: absolute; bottom: -10px; width: 3px; height: 3px;
  background: radial-gradient(circle, #ffd28a 0%, #ff7a30 60%, transparent 80%);
  border-radius: 50%;
  filter: blur(0.4px);
  animation-name: rpgEmberRise;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  box-shadow: 0 0 6px rgba(255, 140, 60, 0.7);
}
@keyframes rpgEmberRise {
  0%   { transform: translate(0, 0) scale(0.6); opacity: 0; }
  10%  { opacity: 1; }
  100% { transform: translate(20px, -110vh) scale(1.1); opacity: 0; }
}

/* --- Mode toggle --- */
.rpg-mode {
  position: absolute;
  top: 28px; left: 50%; transform: translateX(-50%);
  z-index: 6;
  display: inline-flex;
  padding: 4px;
  border-radius: 999px;
  background: rgba(20, 6, 6, 0.6);
  border: 1px solid rgba(255, 170, 100, 0.28);
  backdrop-filter: blur(6px);
  box-shadow: 0 8px 30px rgba(0,0,0,0.5);
}
.rpg-mode button {
  border: 0; background: transparent;
  color: #f0c89a;
  font: 500 13px/1 'Cinzel', Georgia, serif;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 9px 18px;
  border-radius: 999px;
  cursor: pointer;
  transition: background 160ms ease, color 160ms ease;
}
.rpg-mode button:hover { color: #fff2d8; }
.rpg-mode button.on {
  background: linear-gradient(180deg, #c46a3a, #7a2d12);
  color: #fff8e6;
  box-shadow: inset 0 1px 0 rgba(255,220,170,0.4), 0 4px 14px rgba(255,90,30,0.35);
}

/* Light variant for the official screen */
.rpg-mode-official {
  background: rgba(255,255,255,0.7);
  border-color: oklch(0.85 0.02 220 / 0.6);
  box-shadow: 0 6px 20px oklch(0.20 0.01 250 / 0.10);
}
.rpg-mode-official button { color: oklch(0.4 0.02 240); font-family: inherit; letter-spacing: 0.04em; text-transform: none; }
.rpg-mode-official button.on {
  background: oklch(0.20 0.01 250);
  color: white;
  box-shadow: 0 4px 14px oklch(0.20 0.01 250 / 0.18);
}

/* Mute toggle — top-right corner */
.rpg-mute {
  position: absolute;
  top: 28px; right: 28px;
  z-index: 6;
  width: 40px; height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  border: 1px solid rgba(255, 170, 100, 0.28);
  background: rgba(20, 6, 6, 0.6);
  backdrop-filter: blur(6px);
  color: #f0c89a;
  cursor: pointer;
  box-shadow: 0 8px 30px rgba(0,0,0,0.5);
  transition: color 160ms ease, background 160ms ease, transform 160ms ease;
}
.rpg-mute:hover { color: #fff2d8; background: rgba(40, 14, 10, 0.7); transform: translateY(-1px); }
.rpg-mute:active { transform: translateY(0); }

/* --- Knight portrait --- */
.rpg-knight-wrap {
  position: absolute;
  z-index: 2;
  right: 2%;
  bottom: 0;
  height: 96vh;
  width: auto;
  pointer-events: none;
  filter: drop-shadow(0 30px 50px rgba(0,0,0,0.6));
  animation: rpgKnightBreathe 6s ease-in-out infinite;
}
.rpg-knight { height: 100%; width: auto; display: block; }
@keyframes rpgKnightBreathe {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-6px); }
}

/* --- Center content --- */
.intro-rpg .rpg-content {
  position: relative;
  z-index: 5;
  max-width: 760px;
  padding: 0 32px;
  text-align: center;
  margin-right: 14vw; /* nudge content left of the knight */
}
.intro-rpg .rpg-title {
  font-family: 'Cinzel', 'Trajan Pro', Georgia, serif;
  font-weight: 700;
  font-size: clamp(40px, 5.6vw, 68px);
  letter-spacing: 0.04em;
  color: #ffe2bd;
  text-shadow:
    0 0 12px rgba(255, 110, 40, 0.45),
    0 2px 0 rgba(0,0,0,0.5);
  margin: 0;
}
.intro-rpg .rpg-sub {
  font-family: 'Cinzel', Georgia, serif;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #d49a6a;
  font-size: 13px;
  margin-top: 6px;
}

/* Subtitles */
.rpg-subtitle {
  margin: 28px auto 18px;
  min-height: 96px;
  max-width: 680px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 14px 22px;
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(20,6,4,0.55), rgba(20,6,4,0.35));
  border: 1px solid rgba(255,170,100,0.22);
  box-shadow: 0 10px 40px rgba(0,0,0,0.45), inset 0 1px 0 rgba(255,200,140,0.12);
  backdrop-filter: blur(6px);
}
.rpg-sub-line {
  display: inline-block;
  font-family: 'Cinzel', Georgia, serif;
  font-weight: 500;
  font-size: clamp(18px, 1.9vw, 24px);
  line-height: 1.4;
  color: #fff1d6;
  text-shadow: 0 1px 2px rgba(0,0,0,0.6), 0 0 10px rgba(255,140,60,0.18);
  animation: rpgSubIn 380ms ease both;
  text-wrap: balance;
}
.rpg-sub-placeholder { opacity: 0; }
@keyframes rpgSubIn {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Accumulating subtitle stack — entire script grows on one shared canvas */
.rpg-sub-stack {
  margin: 0;
  font-family: 'Cinzel', Georgia, serif;
  font-weight: 500;
  font-size: clamp(16px, 1.7vw, 21px);
  line-height: 1.55;
  color: #f0c89a;
  text-shadow: 0 1px 2px rgba(0,0,0,0.55);
  text-wrap: pretty;
  text-align: center;
}
.rpg-sub-frag {
  opacity: 0;
  color: #d49a6a;
  animation: rpgFragIn 700ms ease forwards;
  transition: color 600ms ease, text-shadow 600ms ease;
}
.rpg-sub-frag.is-active {
  color: #fff1d6;
  text-shadow: 0 1px 2px rgba(0,0,0,0.6), 0 0 14px rgba(255,140,60,0.30);
}
@keyframes rpgFragIn {
  from { opacity: 0; filter: blur(2px); }
  to   { opacity: 1; filter: blur(0); }
}

/* CTA */
.rpg-cta {
  font-family: 'Cinzel', Georgia, serif;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  background: linear-gradient(180deg, #c46a3a 0%, #7a2d12 100%);
  color: #fff5dc;
  border: 1px solid rgba(255,200,150,0.35);
  box-shadow:
    0 10px 28px rgba(255, 90, 30, 0.30),
    inset 0 1px 0 rgba(255, 230, 190, 0.5),
    inset 0 -8px 18px rgba(0,0,0,0.35);
  padding: 14px 36px;
  font-size: 14px;
  font-weight: 600;
}
.rpg-cta:hover { background: linear-gradient(180deg, #d57a45, #8d3618); transform: translateY(-1px); }

/* --- Helmed gophers (sky) --- */
.rpg-sky {
  position: absolute; inset: 0; z-index: 3; pointer-events: none; overflow: hidden;
}
.rpg-goph {
  position: absolute;
  width: 78px;
  height: 78px;
  filter: drop-shadow(0 6px 14px rgba(255,90,30,0.4));
}
.rpg-goph-svg { width: 100%; height: 100%; display: block; animation: bob 3.6s ease-in-out infinite; }

.rpg-goph-a { top: 16%; left: -10%; animation: fly1 22s linear infinite; }
.rpg-goph-b { top: 30%; right: -10%; animation: fly2 28s linear infinite; }
.rpg-goph-c { top: 58%; left: -12%; animation: fly1 32s linear infinite; animation-delay: -8s; }
.rpg-goph-d { top: 72%; right: -10%; animation: fly2 24s linear infinite; animation-delay: -10s; }
.rpg-goph-e { top: 10%; right: 22%; animation: fly2 38s linear infinite; animation-delay: -22s; }
.rpg-goph-f { top: 84%; left: 26%; animation: fly1 30s linear infinite; animation-delay: -14s; }

/* Fire trail */
.rpg-trail {
  position: absolute;
  top: 50%; transform: translateY(-50%);
  /* Right side of the gopher = "behind" since they fly to the right.
     Flipped gophers (.rpg-goph-b/d/e) get scaleX(-1) on the parent which
     mirrors the trail to the visually-correct side automatically. */
  right: 92%;
  width: 60px; height: 28px;
  pointer-events: none;
  display: flex; align-items: center;
}
.rpg-trail-pip {
  position: absolute;
  right: 0;
  width: 14px; height: 14px;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 50%, #ffe5a8 0%, #ff8a30 45%, rgba(255,90,30,0) 75%);
  filter: blur(1px);
  animation: rpgTrail 0.55s linear infinite;
  mix-blend-mode: screen;
}
@keyframes rpgTrail {
  0%   { transform: translateX(0) scale(1); opacity: 0.9; }
  100% { transform: translateX(-50px) scale(0.25); opacity: 0; }
}

/* Reuse existing fly1/fly2/bob keyframes — they're declared in the official intro section. */

/* --- Leaving transition (re-uses .intro.leaving from official styles for opacity)
       Make rpg-specific fades too. */
.intro-rpg.leaving .rpg-knight-wrap,
.intro-rpg.leaving .rpg-content,
.intro-rpg.leaving .rpg-mode {
  opacity: 0;
  transform: translateY(-6px);
  transition: opacity 500ms ease, transform 600ms ease;
}
.intro-rpg.leaving .rpg-knight-wrap { transform: translateY(20px) scale(0.98); }

/* Smaller screens — stack content over the knight */
@media (max-width: 900px) {
  .rpg-knight-wrap { right: -10%; height: 80vh; opacity: 0.45; }
  .intro-rpg .rpg-content { margin-right: 0; }
  .rpg-subtitle { min-height: 110px; }
}

/* ============================================================================
   FOOTER theme switch — same layout in both themes (3 columns)
   ========================================================================== */
.footer {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 16px;
}
.footer .foot-left  { justify-self: start; }
.footer .foot-right { justify-self: end; }

.foot-theme {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 3px;
  border-radius: 999px;
  background: var(--accent-soft);
  border: 1px solid var(--hair-strong);
  box-shadow: var(--shadow-sm);
  font-family: var(--font);
}
.foot-theme button {
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--ink-2);
  font: inherit;
  font-size: 11px;
  letter-spacing: 0.06em;
  padding: 5px 14px;
  border-radius: 999px;
  cursor: pointer;
  transition: background 160ms ease, color 160ms ease;
}
.foot-theme button:hover { color: var(--ink); }
.foot-theme button.on {
  background: var(--ink);
  color: var(--bg-elev);
  box-shadow: 0 1px 2px rgba(0,0,0,0.12);
}

/* ============================================================================
   RPG THEME — applies when documentElement has data-theme="rpg"
   Only colors and typography change. Layout stays identical.
   ========================================================================== */
:root[data-theme="rpg"] {
  --bg:           #120607;
  --bg-elev:      #1c0a09;
  --ink:          #fff1d6;
  --ink-2:        #f0c89a;
  --ink-3:        #c89060;
  --ink-4:        #8a5a3a;
  --hair:         #3a1a14;
  --hair-strong:  #5a2a1a;
  --accent:       #d57a45;        /* ember orange */
  --accent-soft:  #2a0e0c;
  --accent-ink:   #ffe4bd;
  --good:         #f0a060;
  --warn:         #ff7a30;
  --shadow-sm:    0 1px 0 rgba(0,0,0,0.4), 0 1px 3px rgba(0,0,0,0.5);
  --shadow-md:    0 1px 0 rgba(0,0,0,0.5), 0 10px 28px rgba(0,0,0,0.55);
  --shadow-drawer:-16px 0 50px rgba(0,0,0,0.6);
  --font:         'EB Garamond', Georgia, 'Times New Roman', serif;
  --mono:         ui-monospace, 'JetBrains Mono', Menlo, Consolas, monospace;
}

/* In RPG, body text gets a slightly larger size — Garamond runs small. */
:root[data-theme="rpg"] body { font-size: 16px; }
:root[data-theme="rpg"] input,
:root[data-theme="rpg"] textarea,
:root[data-theme="rpg"] select,
:root[data-theme="rpg"] button {
  font-family: var(--font);
}

/* Body backdrop — embers and a faint ground glow */
:root[data-theme="rpg"] body {
  background:
    radial-gradient(1200px 700px at 50% 110%, rgba(255,120,40,0.18), transparent 70%),
    radial-gradient(900px 500px at 12% -10%, rgba(120,30,20,0.5), transparent 70%),
    radial-gradient(900px 500px at 88% -10%, rgba(120,30,20,0.5), transparent 70%),
    #120607;
  color: var(--ink);
}

/* Headings & UI typography lean into the RPG serif look */
:root[data-theme="rpg"] .brand-name,
:root[data-theme="rpg"] .col-title,
:root[data-theme="rpg"] .modal-title,
:root[data-theme="rpg"] .drawer-name {
  font-family: 'Cinzel', Georgia, serif;
  letter-spacing: 0.04em;
  font-weight: 700;
}
:root[data-theme="rpg"] .brand-sub,
:root[data-theme="rpg"] .ts-label,
:root[data-theme="rpg"] .col-count,
:root[data-theme="rpg"] .drawer-eyebrow,
:root[data-theme="rpg"] .modal-eyebrow {
  font-family: 'Cinzel', Georgia, serif;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

/* Numerals stay tabular but warm-tinted */
:root[data-theme="rpg"] .ts-value,
:root[data-theme="rpg"] .score-num,
:root[data-theme="rpg"] .stat-num,
:root[data-theme="rpg"] .rate-num,
:root[data-theme="rpg"] .tl-num {
  color: var(--ink);
  text-shadow: 0 0 12px rgba(255,140,60,0.18);
}

/* Cards, columns, drawer — warm panel surfaces */
:root[data-theme="rpg"] .topbar,
:root[data-theme="rpg"] .footer,
:root[data-theme="rpg"] .col,
:root[data-theme="rpg"] .card,
:root[data-theme="rpg"] .drawer,
:root[data-theme="rpg"] .modal,
:root[data-theme="rpg"] .auth-pill,
:root[data-theme="rpg"] .top-controls .seg,
:root[data-theme="rpg"] .top-controls .sort {
  background: linear-gradient(180deg, #1f0a09 0%, #160706 100%);
  border-color: var(--hair-strong);
}

/* Card hover gets a subtle ember rim */
:root[data-theme="rpg"] .card:hover {
  box-shadow: 0 0 0 1px rgba(213,122,69,0.4), 0 12px 30px rgba(0,0,0,0.55);
  border-color: rgba(213,122,69,0.55);
}

/* Buttons — accent uses ember gradient */
:root[data-theme="rpg"] .btn.primary,
:root[data-theme="rpg"] .modal .primary {
  background: linear-gradient(180deg, #d57a45, #8d3618);
  color: #fff8e6;
  border: 1px solid #5a2a14;
  box-shadow: 0 1px 0 rgba(255,200,140,0.25) inset, 0 6px 18px rgba(0,0,0,0.45);
}
:root[data-theme="rpg"] .btn.primary:hover {
  background: linear-gradient(180deg, #e08a52, #9d4020);
}

/* Footer switch in RPG */
:root[data-theme="rpg"] .foot-theme {
  background: rgba(40,14,12,0.7);
  border-color: #5a2a1a;
  box-shadow: 0 4px 14px rgba(0,0,0,0.5);
}
:root[data-theme="rpg"] .foot-theme button {
  color: #f0c89a;
}
:root[data-theme="rpg"] .foot-theme button.on {
  background: linear-gradient(180deg, #c46a3a, #7a2d12);
  color: #fff8e6;
  box-shadow: 0 1px 0 rgba(255,200,140,0.25) inset, 0 4px 10px rgba(0,0,0,0.5);
}

/* Stage dots, chips, pills — warm tones */
:root[data-theme="rpg"] .chip {
  background: rgba(213,122,69,0.12);
  border-color: rgba(213,122,69,0.35);
  color: var(--ink-2);
}

/* Score progress / dots that use accent inherit it via vars; nothing more needed. */

/* Empty drop-zone in the finish column — needs explicit dark override
   because the base rule hardcodes a light-blue background. */
:root[data-theme="rpg"] .finish-column .col-empty {
  background: rgba(213,122,69,0.06);
  border-color: rgba(213,122,69,0.45);
  color: var(--ink-2);
}
:root[data-theme="rpg"] .col-empty {
  color: var(--ink-3);
  border-color: rgba(213,122,69,0.30);
}

/* Sort segmented control — base rule sets bg to --ink with white text;
   in RPG --ink is cream, so the white text disappears. Force ember pill. */
:root[data-theme="rpg"] .seg {
  background: rgba(40,14,12,0.55);
  border-color: var(--hair-strong);
}
:root[data-theme="rpg"] .seg button {
  color: var(--ink-2);
}
:root[data-theme="rpg"] .seg button:hover { color: var(--ink); }
:root[data-theme="rpg"] .seg button.on {
  background: linear-gradient(180deg, #f5e6c8, #e6c890);
  color: #2a0e0c;
  box-shadow: 0 1px 0 rgba(255,255,255,0.3) inset, 0 4px 10px rgba(0,0,0,0.4);
}
:root[data-theme="rpg"] .sort-label { color: var(--ink-3); }

/* Auth role badge — same problem: admin uses --ink bg + white text. */
:root[data-theme="rpg"] .auth-badge.admin {
  background: linear-gradient(180deg, #f5e6c8, #e6c890);
  color: #2a0e0c;
  border: 1px solid rgba(255,200,140,0.4);
  box-shadow: 0 1px 0 rgba(255,255,255,0.25) inset;
}
:root[data-theme="rpg"] .auth-badge.user {
  background: rgba(213,122,69,0.18);
  color: var(--ink);
  border: 1px solid rgba(213,122,69,0.4);
}
:root[data-theme="rpg"] .auth-login { color: var(--ink-2); }

/* Auth modal segmented tabs — same white-on-cream issue. */
:root[data-theme="rpg"] .auth-segment button.on {
  background: linear-gradient(180deg, #f5e6c8, #e6c890);
  color: #2a0e0c;
}

/* Avatar — server picks any color, including very dark ones that vanish
   on the dark RPG canvas. Add a warm rim and a subtle inner highlight so
   the disc is always visible regardless of fill. */
:root[data-theme="rpg"] .avatar {
  box-shadow:
    0 0 0 2px rgba(255, 220, 170, 0.55),
    0 0 0 3px rgba(40, 14, 12, 0.9),
    0 4px 14px rgba(0,0,0,0.5);
  color: #fff;
  text-shadow: 0 1px 2px rgba(0,0,0,0.6);
}


/* ============================================================================
   Drawer edit / tag editor — RPG overrides
   Base styles hardcode a light-blue/cream chip; force ember palette on dark.
   ========================================================================== */
:root[data-theme="rpg"] .tag-editor {
  background: rgba(20, 8, 6, 0.7);
  border-color: var(--hair-strong);
}
:root[data-theme="rpg"] .tag-editor:focus-within {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(213, 122, 69, 0.18);
}
:root[data-theme="rpg"] .tag-chip {
  background: rgba(213, 122, 69, 0.18);
  color: var(--ink);
  border: 1px solid rgba(213, 122, 69, 0.4);
}
:root[data-theme="rpg"] .tag-chip.muted {
  background: rgba(140, 90, 70, 0.18);
  color: var(--ink-2);
  border: 1px solid rgba(140, 90, 70, 0.40);
}
:root[data-theme="rpg"] .tag-x:hover {
  background: rgba(255, 200, 140, 0.18);
}
:root[data-theme="rpg"] .tag-input {
  color: var(--ink);
}
:root[data-theme="rpg"] .tag-input::placeholder {
  color: var(--ink-3);
}
:root[data-theme="rpg"] .edit-input,
:root[data-theme="rpg"] .edit-textarea {
  background: rgba(20, 8, 6, 0.7);
  border-color: var(--hair-strong);
  color: var(--ink);
}
:root[data-theme="rpg"] .edit-input::placeholder,
:root[data-theme="rpg"] .edit-textarea::placeholder {
  color: var(--ink-3);
}
:root[data-theme="rpg"] .edit-input:focus,
:root[data-theme="rpg"] .edit-textarea:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(213, 122, 69, 0.18);
}
:root[data-theme="rpg"] .edit-label {
  color: var(--ink-3);
  font-family: 'Cinzel', Georgia, serif;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* Credentials grid (after candidate.add) */
:root[data-theme="rpg"] .creds-row {
  background: rgba(20, 8, 6, 0.7);
  border-color: var(--hair-strong);
}
:root[data-theme="rpg"] .creds-label {
  color: var(--ink-3);
  font-family: 'Cinzel', Georgia, serif;
}
:root[data-theme="rpg"] .creds-value {
  color: var(--accent-ink);
}