/* steamcommunity.report — community reviews, trust pill, bookmark & admin panel.
   Same 2002-Steam homage as site.css: flat & square, 1px olive borders, gold
   accents, two-tone uppercase headings. Reuses the :root tokens from site.css
   (--bg-in / --panel / --frame / --fg / --muted / --dim / --gold / --gold-dim /
   --white / --font / --mono). The only literals here are the CS:GO Trust Factor
   colors and the small olive border hexes (#3a3d2e / #34372a / #23251a / #16170f)
   that already recur throughout site.css — kept verbatim for visual continuity. */

/* ====================================================================== */
/* TRUST FACTOR CARD — CS2-style signal-bar meter, CS:GO palette         */
/* ====================================================================== */
/* Inline slot in the name row — sits beside the persona + owner badge.
   Collapses to nothing until reviews.js fills it, so there's no phantom gap. */
.id__trust { display: inline-flex; align-items: center; gap: 4px; }
.id__trust:empty { display: none; }

/* Outer wrapper: dark panel, left accent stripe, flex row.
   The per-level accent colour is --tc-accent; glow is --tc-glow. */
.trust-card {
  display: inline-flex; align-items: stretch; vertical-align: middle;
  line-height: 1; white-space: nowrap;
  background: #14160d; border: 1px solid #34372a; border-radius: 0;
  border-left: 3px solid var(--tc-accent, #4a4e3b);
  overflow: hidden;
  font-family: var(--font);
}

/* Left section: signal bars + label + verdict word */
.trust-card__main {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 5px 9px;
}

/* ---- Signal-bar meter (4 segments, like a phone/CS2 signal icon) ---- */
.trust-card__bars {
  display: inline-flex; align-items: flex-end; gap: 2px;
  height: 14px; flex-shrink: 0;
}
.trust-card__bar {
  display: block; width: 4px; border-radius: 0;
  background: #3a3d2e;   /* unlit base — overridden by --tc-accent for lit bars */
  flex-shrink: 0;
}
/* Four bars, each a bit taller */
.trust-card__bar:nth-child(1) { height: 4px; }
.trust-card__bar:nth-child(2) { height: 7px; }
.trust-card__bar:nth-child(3) { height: 10px; }
.trust-card__bar:nth-child(4) { height: 14px; }

/* Lit bars (--tc-accent colour + subtle glow) */
.trust-card__bar.is-lit {
  background: var(--tc-accent, #6f7358);
  box-shadow: 0 0 4px var(--tc-glow, rgba(111,115,88,.5));
}

/* Label + verdict word */
.trust-card__label {
  font-size: 9px; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: var(--muted);
}
.trust-card__status {
  font-size: 11px; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--tc-accent, var(--muted));
}

/* Right section: vote tallies (▲ / ● / ▼), shown only when rated */
.trust-card__counts {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 5px 9px;
  background: rgba(0,0,0,.28); border-left: 1px solid #2a2d20;
  font-family: var(--mono);
}
.trust-card__count {
  display: inline-flex; align-items: center; gap: 3px;
  font-size: 11px; font-weight: 700; color: var(--muted);
}
.trust-card__cico { font-size: 8px; line-height: 1; }
.trust-card__count--up   .trust-card__cico { color: #8fbf5e; }
.trust-card__count--mid  .trust-card__cico { color: #c9c46a; }
.trust-card__count--down .trust-card__cico { color: #c08070; }

/* Per-level accents — CS:GO Trust Factor palette.
   --tc-bars: how many of the 4 signal bars to light up. */
.trust-card--green   { --tc-accent: #6fae3e; --tc-glow: rgba(111,174,62,.5);  --tc-bars: 4; }
.trust-card--yellow  { --tc-accent: #b6b13c; --tc-glow: rgba(182,177,60,.5);  --tc-bars: 2; }
.trust-card--red     { --tc-accent: #c25340; --tc-glow: rgba(194,83,64,.5);   --tc-bars: 1; }
.trust-card--unrated { --tc-accent: #7a7d63; --tc-glow: rgba(122,125,99,.4);  --tc-bars: 0; }
.trust-card--unrated .trust-card__status { color: var(--muted); }

/* ---- "i" info button + tooltip ---------------------------------------- */
/* CSP-safe: a plain <button> with a sibling [role=tooltip] revealed by
   :focus / .is-open on the parent .trust-info wrapper. No inline handlers. */
.trust-info {
  position: relative; display: inline-flex; align-items: center;
}
.trust-info__btn {
  display: inline-grid; place-items: center;
  width: 16px; height: 16px; padding: 0;
  border-radius: 50%;
  background: #23241c; border: 1px solid #4a4e3b;
  color: var(--muted); font-size: 10px; font-weight: 700;
  font-family: var(--font); line-height: 1; cursor: pointer;
  transition: border-color .15s ease, color .15s ease;
  flex-shrink: 0;
}
.trust-info__btn:hover,
.trust-info__btn:focus-visible {
  border-color: var(--gold-dim); color: var(--gold); outline: none;
}
.trust-info__btn:focus-visible { outline: 1px solid var(--gold-dim); }

.trust-info__tip {
  position: absolute; left: 50%; bottom: calc(100% + 7px);
  transform: translateX(-50%);
  width: 230px; padding: 8px 10px;
  background: #14160d; border: 1px solid #4a4e3b;
  border-radius: 0; box-shadow: 0 4px 16px rgba(0,0,0,.6);
  font-size: 11px; line-height: 1.5; color: var(--muted);
  white-space: normal; text-align: left; z-index: 50;
  /* hidden by default */
  opacity: 0; pointer-events: none;
  transition: opacity .12s ease;
}
/* small arrow pointing down */
.trust-info__tip::after {
  content: ""; position: absolute;
  top: 100%; left: 50%; transform: translateX(-50%);
  border: 5px solid transparent;
  border-top-color: #4a4e3b;
}
/* show on focus-within (keyboard) or when JS adds .is-open */
.trust-info:focus-within .trust-info__tip,
.trust-info.is-open .trust-info__tip {
  opacity: 1; pointer-events: auto;
}
/* keep the tip visible when cursor is over it */
.trust-info__tip:hover { opacity: 1; pointer-events: auto; }
/* accent the word "NOT" for emphasis */
.trust-info__tip strong { color: var(--fg); font-weight: 700; }

/* ---- Mobile: keep the trust card + its tooltip inside the viewport --------
   On a phone the info column is narrow, so the nowrap card + its centered
   230px tooltip used to push the whole profile ~135px off the right edge
   (sideways scroll on every profile tab). Wrap the card's vote-counts onto
   their own line and anchor the tooltip to the right so it opens inward. */
@media (max-width: 480px) {
  .id__trust { flex-wrap: wrap; max-width: 100%; min-width: 0; }
  .trust-card { max-width: 100%; flex-wrap: wrap; }
  .trust-card__main { min-width: 0; }
  .trust-card__counts { flex-basis: 100%; border-left: 0; border-top: 1px solid #2a2d20; }
  .trust-info__tip { left: auto; right: 0; transform: none; width: min(230px, 84vw); }
  .trust-info__tip::after { left: auto; right: 9px; transform: none; }
}

/* ====================================================================== */
/* REVIEWS SECTION                                                        */
/* ====================================================================== */
.reviews { margin: 8px 0 4px; }
#reviews-slot { margin-top: 4px; }

/* heading row: section title on the left, bookmark toggle on the right */
.reviews-head {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
}
.reviews-head .sec { margin: 0; flex: 1 1 auto; }

/* wrapper around the submit widget / sign-in prompt / own-profile note */
.reviews-submit-wrap { margin-top: 6px; }

/* ---- Submit widget ----------------------------------------------------- */
.review-form {
  background: var(--panel); border: 1px solid #3a3d2e;
  padding: 14px 16px 16px; margin: 6px 0 18px;
}

.smiley-row { display: flex; gap: 10px; margin-bottom: 12px; }
.smiley-btn {
  width: 44px; height: 44px; flex-shrink: 0;
  display: grid; place-items: center;
  font-size: 22px; line-height: 1; cursor: pointer;
  background: #16170f; border: 1px solid #3a3d2e; border-radius: 0;
  color: var(--fg); font-family: var(--font);
  transition: border-color .15s ease, background .15s ease, box-shadow .15s ease;
}
.smiley-btn:hover { border-color: var(--gold-dim); background: #1e2015; }
.smiley-btn:focus-visible { outline: 2px solid var(--gold); outline-offset: -2px; }
/* selected = colored ring per sentiment (.smiley-btn.rating--*.is-selected) */
.smiley-btn.is-selected { background: #1e2015; }
.smiley-btn.rating--pos.is-selected     { border-color: #4a7a2e; box-shadow: 0 0 0 1px #4a7a2e inset, 0 0 6px rgba(74,122,46,.5); }
.smiley-btn.rating--neutral.is-selected { border-color: #8f8b2d; box-shadow: 0 0 0 1px #8f8b2d inset, 0 0 6px rgba(143,139,45,.5); }
.smiley-btn.rating--neg.is-selected     { border-color: #9e3a2c; box-shadow: 0 0 0 1px #9e3a2c inset, 0 0 6px rgba(158,58,44,.5); }

.review-comment {
  display: block; width: 100%; resize: vertical; min-height: 70px;
  font: inherit; font-size: 13px; padding: 9px 11px; margin-bottom: 4px;
  color: var(--fg); background: #16170f;
  border: 1px solid #2a2d20; border-top-color: #20231a;
}
.review-comment::placeholder { color: #9a9a83; }
.review-comment:focus { outline: 1px solid var(--gold); }

/* Live character counter / "N more needed" hint under the report textarea. */
.review-counter {
  font-size: 11px; color: var(--muted); text-align: right;
  margin: 0 2px 10px; letter-spacing: .02em; min-height: 14px;
}
.review-counter--under { color: #b98a2e; }   /* amber: below the 50-char minimum */
.review-counter--near  { color: #9e3a2c; }   /* red: approaching the 280 cap */

.review-anon {
  display: flex; align-items: center; gap: 7px;
  font-size: 12px; color: var(--muted); margin-bottom: 12px;
  cursor: pointer; user-select: none;
}
.review-anon input { accent-color: var(--gold); cursor: pointer; }

.review-submit {
  font: 700 14px var(--font); cursor: pointer; padding: 8px 18px;
  color: var(--black); background: var(--gold); border: 1px solid var(--gold-dim);
}
.review-submit:hover { background: #cdb96f; }
.review-submit:disabled { opacity: .5; cursor: not-allowed; }
.review-submit:disabled:hover { background: var(--gold); }

.reviews-msg { font-size: 13px; margin-left: 12px; }
.reviews-msg[hidden] { display: none; }
.reviews-msg--ok  { color: var(--gold); }
.reviews-msg--err { color: #e6a08f; }

/* sign-in prompt + own-profile note */
.reviews-signin { font-size: 13px; color: var(--muted); margin: 6px 0 18px; }
.reviews-signin a { color: var(--gold); font-weight: 700; }
.reviews-self { font-size: 13px; color: var(--muted); font-style: italic; margin: 6px 0 18px; }

/* "you've reported this player" — replaces the submit form once reported */
.reviews-done {
  display: flex; align-items: center; gap: 9px; flex-wrap: wrap;
  font-size: 13px; color: var(--fg);
  background: var(--panel); border: 1px solid #3a3d2e;
  padding: 10px 14px; margin: 6px 0 18px;
}
.reviews-done__check { color: #8fc090; font-weight: 700; }
.reviews-done__text  { color: var(--muted); }
.reviews-done__rating {
  display: inline-grid; place-items: center; width: 20px; height: 20px;
  font-size: 13px; border-radius: 0; border: 1px solid #2a2d20;
}
.reviews-done__rating.rating--pos     { background: #4a7a2e; }
.reviews-done__rating.rating--neutral { background: #8f8b2d; }
.reviews-done__rating.rating--neg     { background: #9e3a2c; }
.reviews-done__remove {
  margin-left: auto; font: inherit; font-size: 12px; cursor: pointer;
  background: none; border: none; color: var(--muted);
  text-decoration: underline; padding: 0;
}
.reviews-done__remove:hover { color: var(--gold); }
.reviews-done__remove:disabled { opacity: .5; cursor: not-allowed; }

/* ---- Full-site suspension overlay (scope 'site' ban) ------------------- */
.banned-overlay {
  position: fixed; inset: 0; z-index: 200;
  display: flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,.9); backdrop-filter: blur(3px); padding: 20px;
}
.banned-box {
  max-width: 440px; width: 100%; text-align: center;
  background: var(--bg-in); border: 1px solid #9e3a2c;
  padding: 28px 30px 26px; box-shadow: 0 8px 40px rgba(0,0,0,.7);
}
.banned-box__title {
  font-size: 18px; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: #e6a08f; margin-bottom: 12px;
}
.banned-box__msg { font-size: 14px; color: var(--fg); margin: 0 0 10px; }
.banned-box__reason {
  font-size: 13px; color: var(--muted); margin: 0 0 10px;
  background: var(--panel); border: 1px solid #34372a; padding: 8px 12px;
  word-break: break-word;
}
.banned-box__foot { font-size: 12px; color: var(--muted); margin: 0 0 16px; }
.banned-box__out {
  display: inline-block; font-size: 13px; font-weight: 700;
  color: var(--black); background: var(--gold); border: 1px solid var(--gold-dim);
  padding: 7px 18px; text-decoration: none;
}
.banned-box__out:hover { background: #cdb96f; text-decoration: none; }

/* ---- Review cards ------------------------------------------------------ */
/* list wrapper (<ul>) holding the cards */
.reviews-list { list-style: none; margin: 0; padding: 0; }

/* empty-state line when a player has no reports */
.reviews-empty { font-size: 13px; color: var(--muted); font-style: italic; margin: 6px 0 0; }

/* each card is a flex row: coloured rating chip + body column */
.review-card {
  display: flex; align-items: flex-start; gap: 11px;
  background: var(--panel); border: 1px solid #34372a;
  padding: 11px 14px; margin: 0 0 8px;
}
.review-card:last-child { margin-bottom: 0; }

/* coloured sentiment smiley to the left of the body (.rating--* drive hue) */
.review-card__rating {
  display: inline-grid; place-items: center; flex-shrink: 0;
  width: 22px; height: 22px; font-size: 14px; line-height: 1;
  border: 1px solid #2a2d20; border-radius: 0;
}
.review-card__rating.rating--pos     { background: #4a7a2e; }
.review-card__rating.rating--neutral { background: #8f8b2d; }
.review-card__rating.rating--neg     { background: #9e3a2c; }

/* body column: header row + comment */
.review-card__body { flex: 1 1 auto; min-width: 0; }

.review-card__head {
  display: flex; align-items: center; gap: 9px; margin-bottom: 7px;
}

/* reviewer link / Anonymous label */
.review-card__author {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 13px; color: var(--fg); font-weight: 700; min-width: 0;
  text-decoration: none;
}
.review-card__author:hover { color: var(--gold); }
.review-card__author--anon { color: var(--muted); font-style: italic; font-weight: 400; }

.review-card__av {
  width: 24px; height: 24px; flex-shrink: 0; display: block;
  object-fit: cover; border: 1px solid #34372a; background: #3c4032;
}
.review-card__name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.review-card__time {
  margin-left: auto; flex-shrink: 0;
  font-size: 11px; color: var(--muted); white-space: nowrap;
}

/* the comment text body */
.review-card__comment {
  font-size: 13px; color: var(--fg); line-height: 1.5;
  white-space: pre-wrap; overflow-wrap: break-word; word-break: break-word;
}

/* verified-owner badge inside a review */
.review-card__verified {
  display: inline-block; font-size: 10px; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase;
  padding: 1px 6px; border: 1px solid #5e9440;
  color: #cde0a0; background: rgba(74,122,46,.25);
  vertical-align: middle;
}

/* small × delete (admin / own review) */
.review-card__del {
  margin-left: 8px; flex-shrink: 0;
  width: 20px; height: 20px; line-height: 1;
  display: grid; place-items: center;
  background: none; border: none; padding: 0; cursor: pointer;
  color: var(--muted); font-size: 16px; font-family: var(--font);
  transition: color .15s ease;
}
.review-card__del:hover { color: #e6a08f; }
.review-card__del:focus-visible { outline: 1px dashed var(--gold); outline-offset: 2px; }

/* ---- Bookmark toggle --------------------------------------------------- */
.bookmark-btn {
  display: inline-flex; align-items: center; gap: 6px;
  font: 700 12px var(--font); cursor: pointer;
  padding: 5px 10px; line-height: 1;
  background: #16170f; border: 1px solid #3a3d2e; border-radius: 0;
  color: var(--muted);
  transition: border-color .15s ease, color .15s ease, background .15s ease;
}
.bookmark-btn:hover { border-color: var(--gold-dim); color: var(--gold); }
.bookmark-btn:focus-visible { outline: 2px solid var(--gold); outline-offset: -2px; }
.bookmark-btn--on { color: var(--gold); border-color: var(--gold-dim); }

/* ====================================================================== */
/* ADMIN PANEL                                                            */
/* ====================================================================== */

/* The decorative header cherry blossom IS the admin door for owner + reap.
   Inert decoration for everyone else — admin.js only adds .flower--admin for
   confirmed admins. The base .flower already has filter:invert(1) (site.css). */
.flower--admin { cursor: pointer; transition: filter .15s ease, transform .15s ease; }
.flower--admin:hover { filter: invert(1) drop-shadow(0 0 4px var(--gold)); transform: scale(1.18); }
.flower--admin:focus-visible { outline: 1px solid var(--gold); outline-offset: 2px; }

/* modal (mirrors .legal-modal in site.css) */
.admin-modal {
  position: fixed; inset: 0; z-index: 100;
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
}
.admin-modal[hidden] { display: none; }
.admin-modal__backdrop {
  position: absolute; inset: 0; background: rgba(0,0,0,.78);
  backdrop-filter: blur(2px);
}
.admin-modal__panel {
  position: relative; z-index: 1;
  background: var(--bg-in); border: 1px solid var(--gold-dim);
  max-width: 860px; width: 100%; max-height: 85vh; overflow-y: auto; overflow-x: hidden;
  padding: 22px 26px 26px;
  box-shadow: 0 8px 40px rgba(0,0,0,.6);
  scrollbar-width: thin; scrollbar-color: var(--frame) rgba(0,0,0,.15);
}
.admin-modal__panel::-webkit-scrollbar { width: 8px; }
.admin-modal__panel::-webkit-scrollbar-track { background: rgba(0,0,0,.15); }
.admin-modal__panel::-webkit-scrollbar-thumb { background: var(--frame); }
.admin-modal__close {
  position: absolute; top: 8px; right: 12px;
  width: 32px; height: 32px;
  background: none; border: none; color: var(--muted);
  font-size: 24px; line-height: 1; cursor: pointer; font-family: var(--font);
}
.admin-modal__close:hover { color: var(--gold); }
.admin-modal__close:focus-visible { outline: 1px dashed var(--gold); outline-offset: 2px; }

/* header: title + subtitle, sat above the tab bar */
.admin-modal__head {
  margin: 0 0 14px; padding-bottom: 14px;
  border-bottom: 1px solid var(--frame);
}
.admin-modal__title {
  margin: 0; font-size: 19px; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase; color: var(--white);
}
.admin-modal__sub {
  margin: 4px 0 0; font-size: 11px; color: var(--gold-dim);
  font-family: var(--mono); letter-spacing: .02em;
}

/* ---- overview strip (persistent, owner only) ---------------------------- */
/* Six tiles under the header, above the tab bar. bg #0f110b cells separated
   by #2c2f22 rules; value is mono/bold, label is a tiny uppercase muted line. */
.admin-overview {
  display: grid; grid-template-columns: repeat(6, 1fr);
  border: 1px solid #2c2f22; background: #14160d;
  margin: 0 0 16px; border-radius: 0;
}
.admin-overview:empty { display: none; margin: 0; border: none; }
.admin-ov {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 10px 6px; background: #0f110b;
  border-left: 1px solid #2c2f22;
}
.admin-ov:first-child { border-left: none; }
.admin-ov__val {
  font-family: var(--mono, 'DejaVu Sans Mono', Consolas, monospace);
  font-size: 17px; font-weight: 700; line-height: 1.1;
}
.admin-ov__lbl {
  font-size: 9px; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: #8a8c78;
}

/* tabs */
.admin-tabs {
  display: flex; gap: 0; flex-wrap: wrap;
  border-bottom: 1px solid var(--frame); margin: 0 0 18px;
}
.admin-tab {
  display: inline-flex; align-items: center; gap: 7px;
  font: 700 12px var(--font); letter-spacing: .08em; text-transform: uppercase;
  cursor: pointer; padding: 9px 16px; margin-bottom: -1px;
  background: none; color: var(--muted);
  border: none; border-bottom: 2px solid transparent;
  transition: color .15s ease, border-color .15s ease;
}
.admin-tab:hover { color: var(--gold); }
.admin-tab:focus-visible { outline: 1px dashed var(--gold); outline-offset: -2px; }
.admin-tab--active { color: var(--gold); border-bottom-color: var(--gold); }
.admin-tab__label { display: inline-block; }
/* live count pill riding inside the tab label */
.admin-tab__count {
  font-size: 10px; font-weight: 700; letter-spacing: .04em;
  min-width: 18px; text-align: center; line-height: 1;
  padding: 2px 5px; border: 1px solid var(--frame); border-radius: 0;
  color: var(--muted); background: rgba(0,0,0,.20);
}
.admin-tab--active .admin-tab__count { color: var(--gold); border-color: var(--gold-dim); }

/* empty / loading / error line shown in the modal body */
.admin-empty {
  font-size: 13px; color: var(--muted); font-style: italic;
  margin: 4px 0; padding: 8px 2px;
}
.admin-empty--err { color: #e6a08f; font-style: normal; }

/* roomy empty-state + error block (title + hint, optional retry) */
.admin-state {
  padding: 30px 16px; text-align: center;
  border: 1px dashed var(--frame); background: rgba(0,0,0,.12);
}
.admin-state__title { margin: 0; font-size: 14px; font-weight: 700; color: var(--fg); }
.admin-state__hint  { margin: 6px 0 0; font-size: 12px; color: var(--muted); }
.admin-state--err { border-color: #8a4a3a; background: rgba(158,58,44,.08); }
.admin-state--err .admin-state__msg { margin: 0 0 12px; font-size: 13px; color: #e6a08f; }

/* table — base + per-view variants (.admin-table--reports / --users / --bans) */
.admin-table,
.admin-table--reports,
.admin-table--users,
.admin-table--bans { width: 100%; border-collapse: collapse; font-size: 12px; table-layout: fixed; }
/* reports view: rating chip + actions cells hug their content */
.admin-table--reports .admin-cell--rating,
.admin-table--reports .admin-th--rating { width: 26px; text-align: center; white-space: nowrap; }
.admin-table th {
  text-align: left; padding: 7px 10px;
  font-size: 10px; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--muted);
  border-bottom: 1px solid var(--frame); white-space: nowrap;
}
.admin-th--rating { color: var(--frame); }
.admin-table td {
  padding: 8px 10px; border-bottom: 1px solid #23251a;
  color: var(--fg); vertical-align: middle;
  overflow: hidden;   /* clip cell content to its column (fixed layout) */
}
.admin-table tr:last-child td { border-bottom: none; }
.admin-table tbody tr:hover td { background: rgba(0,0,0,.16); }
.admin-table a { color: var(--gold); }
/* column sizing (table-layout: fixed): comment absorbs slack; player columns
   get a real share and TRUNCATE inside (no cell-level nowrap, which would force
   the column as wide as the 17-digit SteamID and overflow the modal). */
.admin-cell--comment { width: auto; }
.admin-cell--player  { width: 22%; }
.admin-cell--meta    { width: 120px; }
.admin-table .admin-time { width: 86px; white-space: nowrap; }
.admin-cell--actions,
.admin-th--actions { width: 112px; white-space: nowrap; text-align: right; }
/* anchor for the inline ban form so it can pop without stretching the column.
   112px fits the Users tab's THREE 26px buttons (mod + tag + ban) + 5px gaps
   inside the 10px cell padding, so the rightmost (ban) no longer clips at the
   modal edge; overflow:visible stops the global td overflow:hidden (used for name
   truncation) from clipping the rightmost button's border or the popped ban form. */
.admin-cell--actions { position: relative; overflow: visible; }

/* rating cell — coloured smiley chip (mirrors the public .rating--* hues) */
.admin-rating {
  display: inline-grid; place-items: center;
  width: 20px; height: 20px; font-size: 13px; line-height: 1;
  border: 1px solid #2a2d20; border-radius: 0; color: var(--white);
}
.admin-rating--pos     { background: #4a7a2e; }
.admin-rating--neutral { background: #8f8b2d; color: #1a1b14; }
.admin-rating--neg     { background: #9e3a2c; }

/* ---- player cell: small avatar + persona name (+ quiet mono SteamID) ----- */
/* The "names not IDs" primitive — used in every table for target / reviewer /
   user / banned player. The SteamID, when shown, is a small muted mono subline. */
.admin-player {
  display: flex; align-items: center; gap: 8px;
  max-width: 100%; min-width: 0; text-decoration: none; color: var(--fg);
}
.admin-player .admin-avatar { flex-shrink: 0; }
.admin-player:hover { text-decoration: none; }
.admin-player:hover .admin-player__name { color: var(--gold); }
.admin-player__txt { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
/* name + anon/verified flags share one line */
.admin-player__line { display: inline-flex; align-items: baseline; gap: 5px; min-width: 0; }
.admin-player__name {
  font-size: 12px; font-weight: 700; color: var(--fg);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* fallback when no persona — render the id small & mono, never a bold headline */
.admin-player__name--id { font-weight: 400; font-family: var(--mono); font-size: 11px; color: var(--muted); }
.admin-player__id {
  font-size: 10px; color: var(--dim); font-family: var(--mono);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; opacity: .75;
}

/* comment / timestamp cells */
.admin-comment {
  display: block; color: var(--fg); min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.admin-time { color: var(--muted); white-space: nowrap; font-size: 11px; }

/* reviewer flags + ban "who/when" meta */
.admin-muted { color: var(--dim); font-style: italic; }
.admin-anon  { color: var(--muted); font-size: 10px; font-style: italic; }
.admin-verified { color: #8fbf5e; font-weight: 700; }
.admin-banmeta { display: flex; flex-direction: column; font-size: 11px; color: var(--muted); line-height: 1.4; }
.admin-banmeta .admin-time { margin-top: 1px; }

/* avatar (22px square thumb, with a placeholder square when missing) */
.admin-avatar {
  width: 22px; height: 22px; flex-shrink: 0; display: block;
  object-fit: cover; border: 1px solid #34372a; background: #3c4032;
}
.admin-avatar--ph { display: inline-block; background: #23251a; }

/* scope badge — "REPORTS" = can't post reports, "SITE" = blocked from actions */
.admin-scope {
  display: inline-block; font-size: 10px; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase; line-height: 1;
  padding: 3px 7px; border: 1px solid transparent; white-space: nowrap;
}
.admin-scope--reports { color: #1a1b14; background: #8f8b2d; border-color: #a8a33b; }
.admin-scope--site    { color: var(--white); background: #9e3a2c; border-color: #bb4d3d; }

/* ---- inline icon action buttons (delete / ban / unban) ----------------- */
/* Small square buttons that sit inline in the actions column — subtle by
   default, highlight gold/red on hover. Tooltips carry the verb. */
.admin-actions { display: inline-flex; flex-wrap: nowrap; gap: 5px; justify-content: flex-end; }
.admin-ico {
  width: 26px; height: 26px; flex-shrink: 0; padding: 0;
  display: inline-grid; place-items: center; cursor: pointer;
  background: #16170f; border: 1px solid #34372a; border-radius: 0;
  color: var(--muted); font-family: var(--font); line-height: 1;
  transition: border-color .15s ease, color .15s ease, background .15s ease;
}
.admin-ico__g { font-size: 14px; line-height: 1; display: block; }
.admin-ico:focus-visible { outline: 1px dashed var(--gold); outline-offset: 2px; }
.admin-ico:disabled { opacity: .45; cursor: default; }
.admin-ico.is-busy { opacity: .55; cursor: default; }
/* delete = red on hover */
.admin-ico--del:hover:not(:disabled) { border-color: #bb4d3d; color: #f0b0a0; background: rgba(158,58,44,.16); }
/* ban = red on hover (destructive) */
.admin-ico--ban:hover:not(:disabled) { border-color: #bb4d3d; color: #f0b0a0; background: rgba(158,58,44,.16); }
/* unban = gold on hover (restorative) */
.admin-ico--unban:hover:not(:disabled) { border-color: var(--gold-dim); color: var(--gold); background: #1e2015; }

/* STAFF tag — shown in place of a ban control for protected staff accounts */
.admin-staff-tag {
  display: inline-block; padding: 2px 7px;
  font-size: 10px; font-weight: 700; letter-spacing: .08em;
  color: var(--gold); border: 1px solid var(--gold-dim);
  background: #1e2015; border-radius: 0; white-space: nowrap;
}

/* Role tag beside a name in the Users list (OWNER / MOD) */
.admin-role-tag {
  display: inline-block; margin-left: 6px; padding: 1px 5px;
  font-size: 9px; font-weight: 700; letter-spacing: .08em;
  border-radius: 0; vertical-align: middle; white-space: nowrap;
}
.admin-role-tag--owner  { color: var(--gold); border: 1px solid var(--gold-dim); background: #1e2015; }
.admin-role-tag--mod    { color: #cdd6ff; border: 1px solid #4a4f7a; background: #1a1c2b; }
.admin-role-tag--banned { color: #f0b0a0; border: 1px solid #7a3a2e; background: #2a1714; }

/* moderator grant (☆ outline) = gold-ish; revoke (★ filled) = muted */
.admin-ico--mod:hover:not(:disabled)    { border-color: var(--gold-dim); color: var(--gold); background: #1e2015; }
.admin-ico--modoff { color: #cdd6ff; }
.admin-ico--modoff:hover:not(:disabled) { border-color: #4a4f7a; color: #aeb6ee; background: #1a1c2b; }
.admin-ico--tagoff:hover:not(:disabled) { border-color: #bb4d3d; color: #f0b0a0; background: rgba(158,58,44,.16); }
.admin-ico--tagon { color: #cdd6ff; }
.admin-ico--tagon:hover:not(:disabled) { border-color: var(--gold-dim); color: var(--gold); background: #1e2015; }

/* ====================================================================== */
/* USERS TAB — search / filter chips / nocat cell / expand / pager        */
/* ====================================================================== */

/* toolbar: search input (grows) + right-aligned mono result count */
.admin-usertools {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  margin: 0 0 10px;
}
.admin-search {
  flex: 1 1 260px; min-width: 160px;
  font: inherit; font-size: 12px; padding: 7px 10px;
  color: #d8d8c8; background: #0f110b;
  border: 1px solid #2c2f22; border-radius: 0;
}
.admin-search::placeholder { color: #6b6d5e; }
.admin-search:focus { outline: 1px solid var(--gold-dim); border-color: var(--gold-dim); }
.admin-usertools__count {
  flex-shrink: 0; font-family: var(--mono, 'DejaVu Sans Mono', Consolas, monospace);
  font-size: 11px; color: #8a8c78; white-space: nowrap;
}

/* filter chip row */
.admin-filters {
  display: flex; flex-wrap: wrap; gap: 6px;
  margin: 0 0 14px;
}
.admin-chip {
  font: 700 10px var(--font); letter-spacing: .06em; text-transform: uppercase;
  cursor: pointer; padding: 5px 11px; line-height: 1; border-radius: 0;
  background: transparent; border: 1px solid #2c2f22; color: #9a8a52;
  transition: border-color .15s ease, color .15s ease, background .15s ease;
}
.admin-chip:hover { border-color: var(--gold-dim); color: var(--gold); }
.admin-chip:focus-visible { outline: 1px dashed var(--gold); outline-offset: 2px; }
.admin-chip--on {
  background: #ccb766; color: #0f110b; border-color: #9a8a52;
}
.admin-chip--on:hover { background: #ccb766; color: #0f110b; }

/* nocat tier-colored score cell (mono, "—" when unranked/null) */
.admin-cell--role, .admin-cell--nocat { width: 90px; white-space: nowrap; }
.admin-nocat { font-family: var(--mono); font-weight: 700; }

/* expand caret column + button */
.admin-cell--expand, .admin-th--expand { width: 30px; text-align: center; }

/* Users table has no comment column to absorb slack — give Player the
   leftover width instead of the shared 22% (which starved it once Role/nocat/
   expand columns were added). */
.admin-table--users .admin-cell--player { width: auto; }
.admin-caret {
  width: 22px; height: 22px; padding: 0; cursor: pointer;
  display: inline-grid; place-items: center; border-radius: 0;
  background: none; border: 1px solid transparent; color: #8a8c78;
  font-size: 11px; font-family: var(--font);
  transition: color .15s ease, border-color .15s ease;
}
.admin-caret:hover { color: var(--gold); border-color: #2c2f22; }
.admin-caret:focus-visible { outline: 1px dashed var(--gold); outline-offset: 1px; }
.admin-caret--open { color: var(--gold); }

/* the currently-expanded row gets a faint highlight so the sub-row below it
   reads as attached rather than a stray table row */
.admin-row--open td { background: rgba(204,183,102,.05); }

/* inline action sub-row revealed by the caret */
.admin-userexp td {
  padding: 10px 10px 12px; background: #0f110b;
  border-bottom: 1px solid #2c2f22;
}
.admin-userexp__inner {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  position: relative;
}
.admin-userexp .admin-actions { position: static; }
.admin-userexp .admin-banform { right: 0; }

/* read-only user-detail snapshot ("Details" button), rendered inline in the
   Users tab expansion row — a compact key/value block, no new modal. */
.admin-userdetail { flex-basis: 100%; margin-top: 8px; }
.admin-userdetail__inner {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 4px 16px; padding: 10px; background: #0a0b07; border: 1px solid #2c2f22;
}
.admin-userdetail__row { display: flex; justify-content: space-between; gap: 8px; font-size: 12.5px; }
.admin-userdetail__k { color: var(--dim); }
.admin-userdetail__v { color: var(--fg, #ddd); text-align: right; }

/* pagination footer: mono range on the left, prev/numbers/next on the right */
.admin-pager {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 10px; margin-top: 14px; padding-top: 12px;
  border-top: 1px solid #2c2f22;
}
.admin-pager__range {
  font-family: var(--mono, 'DejaVu Sans Mono', Consolas, monospace);
  font-size: 11px; color: #8a8c78;
}
.admin-pager__nav { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.admin-pagebtn {
  font: 700 11px var(--font); letter-spacing: .02em;
  cursor: pointer; padding: 5px 9px; line-height: 1; border-radius: 0;
  background: #0f110b; border: 1px solid #2c2f22; color: #d8d8c8;
  transition: border-color .15s ease, color .15s ease, background .15s ease;
}
.admin-pagebtn:hover:not(:disabled) { border-color: var(--gold-dim); color: var(--gold); }
.admin-pagebtn:focus-visible { outline: 1px dashed var(--gold); outline-offset: 2px; }
.admin-pagebtn:disabled { opacity: .4; cursor: default; }
.admin-pagebtn--on {
  background: #ccb766; color: #0f110b; border-color: #9a8a52; cursor: default;
}
.admin-pagebtn--on:hover { border-color: #9a8a52; color: #0f110b; }
.admin-pagegap { color: #6b6d5e; font-size: 11px; padding: 0 2px; }

/* Privacy Policy lead paragraph */
.legal__lead {
  margin: 0 0 18px; padding: 10px 14px;
  border-left: 3px solid var(--gold-dim); background: #14160d;
  color: var(--fg); font-size: 13.5px; line-height: 1.6;
}

/* ====================================================================== */
/* Privacy & data settings modal (settings.js)                            */
/* ====================================================================== */
.set-intro { margin: 0 0 16px; color: var(--muted); font-size: 13px; line-height: 1.6; }
.set-muted { color: var(--muted); font-size: 13px; }
.set-err   { color: #f0b0a0; font-size: 13px; }
.set-card {
  border: 1px solid var(--frame); border-radius: 0;
  background: #11130c; padding: 14px 16px; margin: 0 0 14px;
}
.set-card--danger { border-color: #5a2b22; background: #170f0d; }
.set-card__h { margin: 0 0 6px; font-size: 14px; color: var(--white); }
.set-card__d { margin: 0 0 12px; color: var(--muted); font-size: 13px; line-height: 1.6; }
.set-card__err { margin: 10px 0 0; color: #f0b0a0; font-size: 12px; }
.set-btn {
  display: inline-block; padding: 7px 14px; cursor: pointer;
  font-size: 13px; font-weight: 600; color: var(--gold);
  background: #1e2015; border: 1px solid var(--gold-dim); border-radius: 0;
}
.set-btn:hover:not(:disabled) { background: #262a18; }
.set-btn:disabled { opacity: .5; cursor: default; }
.set-btn--danger { color: #f0b0a0; background: #2a1714; border-color: #7a3a2e; }
.set-btn--danger:hover:not(:disabled) { background: #3a1f1a; }
.set-pill {
  display: inline-block; padding: 4px 10px; font-size: 12px; font-weight: 700;
  letter-spacing: .04em; border-radius: 0;
}
.set-pill--hidden { color: var(--muted); background: #3a3d2e; border: 1px solid #4a4e3b; }
.set-pill--beta { color: #cdd6ff; background: #1a1c2b; border: 1px solid #4a4f7a; font-size: 10px; vertical-align: middle; }
.set-steps { margin: 0 0 12px; padding-left: 18px; color: var(--muted); font-size: 12.5px; line-height: 1.7; }
.set-steps li { margin-bottom: 2px; }
.set-stats { list-style: none; margin: 0 0 12px; padding: 0; color: var(--fg); font-size: 13px; line-height: 1.8; }
.set-stats li { display: inline-block; margin-right: 16px; }
.set-input {
  display: block; width: 100%; box-sizing: border-box; margin: 0 0 8px;
  padding: 8px 10px; font-size: 13px; color: var(--fg);
  background: #11130c; border: 1px solid var(--frame); border-radius: 0;
  font-family: ui-monospace, Menlo, Consolas, monospace;
}
.set-input:focus { outline: none; border-color: var(--gold-dim); }
/* Trade-link row: input grows next to the Save button. */
.set-trade-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.set-trade-row .set-input { flex: 1 1 300px; min-width: 0; margin: 0; }

/* Blacklist add bar */
.admin-bladd {
  display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
  margin-bottom: 10px;
}
.admin-bladd__id, .admin-bladd__reason {
  flex: 1 1 160px; min-width: 0;
  padding: 6px 9px; font-size: 12px;
  color: var(--fg); background: #11130c;
  border: 1px solid var(--frame); border-radius: 0;
}
.admin-bladd__id { font-family: ui-monospace, Menlo, Consolas, monospace; flex-basis: 200px; }
.admin-bladd__err { flex: 1 1 100%; margin: 0; color: #f0b0a0; font-size: 12px; }
.admin-blnote { margin: 0 0 12px; color: var(--muted); font-size: 12px; line-height: 1.5; }

/* ---- text buttons (ban-form confirms + retry) -------------------------- */
.admin-btn {
  font: 700 11px var(--font); letter-spacing: .04em;
  cursor: pointer; padding: 5px 10px; line-height: 1; white-space: nowrap;
  background: #16170f; border: 1px solid #3a3d2e; border-radius: 0;
  color: var(--fg);
  transition: border-color .15s ease, color .15s ease, background .15s ease;
}
.admin-btn:hover { border-color: var(--gold-dim); color: var(--gold); background: #1e2015; }
.admin-btn:focus-visible { outline: 1px dashed var(--gold); outline-offset: 2px; }
.admin-btn:disabled { opacity: .5; cursor: default; }
.admin-btn:disabled:hover { border-color: #3a3d2e; color: var(--fg); background: #16170f; }
/* destructive variant — reads red on hover */
.admin-btn--danger:hover { border-color: #bb4d3d; color: #f0b0a0; background: rgba(158,58,44,.14); }
/* quiet "cancel" variant */
.admin-btn--ghost { background: none; border-color: transparent; color: var(--muted); }
.admin-btn--ghost:hover { background: none; border-color: transparent; color: var(--gold); }
.admin-btn--retry { display: inline-block; }
/* affirmative (non-destructive) confirm button */
.admin-btn--go { border-color: var(--gold-dim); color: var(--gold); background: #1e2015; }
.admin-btn--go:hover { border-color: var(--gold); background: #262a18; }

/* ====================================================================== */
/* Confirmation modal (confirmAction) — layers above the admin panel       */
/* ====================================================================== */
.admin-confirm {
  position: fixed; inset: 0; z-index: 300;
  display: flex; align-items: center; justify-content: center;
  padding: 20px; background: rgba(0,0,0,.62);
}
.admin-confirm__box {
  width: 100%; max-width: 400px;
  background: #14160d; border: 1px solid var(--gold-dim); border-radius: 0;
  box-shadow: 0 18px 48px rgba(0,0,0,.55); padding: 18px 20px;
}
.admin-confirm__title { margin: 0 0 8px; font-size: 15px; color: var(--white); letter-spacing: .02em; }
.admin-confirm__msg   { margin: 0 0 18px; font-size: 13px; line-height: 1.55; color: var(--muted); }
.admin-confirm__row   { display: flex; gap: 8px; justify-content: flex-end; }
.admin-confirm__box .admin-btn { font-size: 12px; padding: 7px 13px; }
/* solid danger fill in the confirm box so the destructive choice is unmistakable */
.admin-confirm__box .admin-btn--danger {
  border-color: #bb4d3d; color: #f3c4b9; background: rgba(158,58,44,.22);
}
.admin-confirm__box .admin-btn--danger:hover { color: #ffd9cf; background: rgba(158,58,44,.36); }

/* loading state — small spinner above the "Loading…" line */
.admin-state--loading { border-style: solid; border-color: var(--frame); background: rgba(0,0,0,.10); }
.admin-spinner {
  display: inline-block; width: 18px; height: 18px; margin-bottom: 10px;
  border: 2px solid var(--frame); border-top-color: var(--gold);
  border-radius: 50%; animation: adminSpin .7s linear infinite;
}
@keyframes adminSpin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .admin-spinner { animation: none; } }

/* ---- inline ban control (popped under the row's Ban icon) -------------- */
/* Absolutely positioned off the actions cell so revealing it never widens the
   column or jostles the row — it floats as a small panel under the buttons. */
.admin-banform {
  position: absolute; top: calc(100% - 2px); right: 8px; z-index: 5;
  padding: 10px; margin: 0;
  border: 1px solid var(--gold-dim); background: var(--bg-in);
  box-shadow: 0 6px 20px rgba(0,0,0,.55);
  display: flex; flex-direction: column; gap: 8px;
  width: 240px; white-space: normal; text-align: left;
}
.admin-banform[hidden] { display: none; }
.admin-banform__reason {
  width: 100%; font: inherit; font-size: 12px; padding: 6px 8px;
  color: var(--fg); background: #16170f;
  border: 1px solid #2a2d20; border-top-color: #20231a;
}
.admin-banform__reason::placeholder { color: #9a9a83; }
.admin-banform__reason:focus { outline: 1px solid var(--gold); }
.admin-banform__row { display: flex; flex-wrap: wrap; gap: 6px; }
.admin-banform__err {
  margin: 0; font-size: 11px; color: #e6a08f;
}
.admin-banform__err[hidden] { display: none; }

/* inline "action failed" note appended under the table */
.admin-rowerr { margin-top: 8px; }

/* ---- Mobile ------------------------------------------------------------ */
@media (max-width: 720px) {
  .review-form { padding: 12px; }
  .smiley-btn { width: 40px; height: 40px; font-size: 20px; }
  .admin-modal { padding: 10px; }
  .admin-modal__panel { padding: 16px 12px 20px; max-height: 90vh; }
  .admin-modal__title { font-size: 17px; }
  .admin-tab { padding: 7px 10px; font-size: 11px; gap: 5px; }
  .admin-table { font-size: 11px; }
  .admin-table th, .admin-table td { padding: 6px 6px; }
  /* keep avatar+name compact; let the name truncate harder on narrow screens */
  .admin-player { gap: 6px; max-width: 130px; }
  .admin-player__name { font-size: 11px; }
  .admin-ico { width: 24px; height: 24px; }
  .admin-ico__g { font-size: 13px; }
  /* the popped ban form spans the row width on small screens */
  .admin-banform { width: 220px; right: 4px; }
  /* drop the reviewer's SteamID subline on mobile to save room */
  .admin-player__id { display: none; }
  /* overview strip: 3-across instead of 6-across so values don't clip */
  .admin-overview { grid-template-columns: repeat(3, 1fr); }
  .admin-ov:nth-child(3n+1) { border-left: none; }
  .admin-ov:not(:nth-child(3n+1)) { border-left: 1px solid #2c2f22; }
  .admin-ov__val { font-size: 15px; }
  /* users toolbar/pager stack instead of fighting for one row */
  .admin-usertools__count { flex-basis: 100%; text-align: left; }
  .admin-pager { flex-direction: column; align-items: flex-start; }
  .admin-cell--role { display: none; }
}

/* ── nocat. Score "?" help badge + explainer modal content ─────────────── */
.score-help {
  display: inline-flex; align-items: center; justify-content: center;
  width: 15px; height: 15px; padding: 0; margin-left: 6px;
  border: 1px solid var(--gold-dim); border-radius: 50%;
  background: transparent; color: var(--gold-dim);
  font: 700 10px/1 var(--mono); cursor: pointer; vertical-align: super;
  transition: border-color .15s ease, color .15s ease, background .15s ease;
}
.score-help:hover { border-color: var(--gold); color: var(--gold); background: #1e2015; }
.score-help:focus-visible { outline: 1px dashed var(--gold); outline-offset: 2px; }

.score-info__intro { color: var(--muted); margin: 0 0 14px; line-height: 1.55; }
.score-info__card {
  border: 1px solid var(--frame); background: rgba(0,0,0,.15);
  padding: 14px 16px; margin: 0 0 14px;
}
.score-info__h {
  font-size: 15px; font-weight: 700; color: var(--gold); margin: 0 0 8px;
  display: flex; align-items: baseline; gap: 9px; flex-wrap: wrap;
}
.score-info__tag {
  font: 700 10px/1 var(--mono); text-transform: uppercase; letter-spacing: .08em;
  color: var(--muted); border: 1px solid var(--frame); border-radius: 0; padding: 3px 7px;
}
.score-info__card p { color: var(--fg); font-size: 13px; line-height: 1.55; margin: 0 0 9px; }
.score-info__sub {
  font-size: 11px; text-transform: uppercase; letter-spacing: .09em;
  color: var(--white); font-weight: 700; margin: 12px 0 6px;
}
.score-info__list { margin: 0 0 9px; padding-left: 18px; }
.score-info__list li { color: var(--fg); font-size: 13px; line-height: 1.6; margin: 0 0 3px; }
.score-info__cal { color: var(--muted); font-family: var(--mono); font-size: 11px; }
.score-info__foot { color: var(--muted); font-size: 12px; margin: 4px 0 0; }
.score-info a { color: var(--gold); }

/* ── Admin System / Maintenance tab ─────────────────────────────────────── */
.admin-syscard{
  border:1px solid var(--frame);
  background:#14160d;
  padding:14px 16px;
  margin:0 0 12px;
  border-radius:0;
}
.admin-syscard--danger{ border-color:#5a2f27; }
.admin-syscard__h{
  margin:0 0 4px;
  font:700 12px/1.2 var(--font);
  color:var(--gold);
  text-transform:uppercase;
  letter-spacing:.04em;
}
.admin-syscard__d{
  margin:0 0 10px;
  font-size:11px;
  color:var(--muted);
  line-height:1.45;
}
.admin-syscard__row{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  align-items:center;
}
.admin-syscard__in{
  flex:1 1 160px;
  box-sizing:border-box;
  min-width:0;
  padding:7px 10px;
  background:#0f110b;
  border:1px solid var(--frame);
  border-radius:0;
  color:var(--fg);
  font:12px var(--mono, 'DejaVu Sans Mono', Consolas, monospace);
}
.admin-syscard__in:focus{ outline:none; border-color:var(--gold-dim); }
.admin-syscard__result{
  margin:10px 0 0;
  font:12px var(--mono, 'DejaVu Sans Mono', Consolas, monospace);
  color:var(--muted);
  word-break:break-word;
}
.admin-syscard__result--ok{ color:#8fbf5e; }
.admin-syscard__result--err{ color:#e6a08f; }
.admin-rowok{ color:#8fbf5e; }

/* ── Admin panel: Custom tab (create/list custom achievements + tags) ────────
   Ported from progression.css .cab* (the old profile-picker builder) so the
   Custom tab is styled on BOTH index.html and profile.html — progression.css
   is only loaded on profile.html, but the admin panel opens on either page. */
.cab { color: var(--fg); }
.cab__form { display: flex; flex-direction: column; gap: 8px; margin: 6px 0 4px; }
.cab__two { display: flex; gap: 8px; }
.cab__in, .cab__sel { flex: 1; min-width: 0; font: 600 12px var(--font); color: var(--fg); background: #0b0c06; border: 1px solid var(--frame); padding: 8px 10px; }
.cab__in--num { max-width: 150px; flex: none; }
.cab__create { cursor: pointer; font: 700 12px var(--font); color: #12140c; background: var(--gold); border: 1px solid var(--gold); padding: 9px 12px; margin-top: 2px; }
.cab__create:hover { background: var(--gold-dim); }
.cab__err { font: 600 11px var(--mono); color: #d8432f; min-height: 12px; }
.cab__glbl { font: 700 10px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin: 14px 0 8px; }
.cab__list { display: flex; flex-direction: column; gap: 6px; max-height: 240px; overflow-y: auto; }
.cab__row { display: flex; align-items: center; gap: 10px; padding: 7px 10px; background: rgba(0, 0, 0, .2); border: 1px solid var(--frame); }
.cab__rn { flex: 1; min-width: 0; font: 600 12px var(--font); color: var(--fg); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cab__rn b { color: var(--gold); }
.cab__rr { font: 700 10px var(--mono); color: var(--muted); white-space: nowrap; }
.cab__del, .cab__tdel { cursor: pointer; font: 700 9px var(--mono); letter-spacing: .04em; text-transform: uppercase; color: var(--muted); background: none; border: 1px solid var(--frame); padding: 4px 7px; }
.cab__del:hover, .cab__tdel:hover { color: #d8432f; border-color: #d8432f; }
.cab__msg { padding: 16px; text-align: center; color: var(--muted); font-size: 12px; }
/* Section headers split the builder into "achievement + tag" vs "standalone tag". */
.cab__sec { font: 800 12px var(--font); color: var(--fg); margin: 4px 0 2px; }
.cab__sec--tag { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--frame); }
.cab__sechint { font: 600 10px var(--mono); color: var(--muted); text-transform: none; letter-spacing: 0; }
.cab__two--tag { align-items: stretch; }
.cab__color { width: 46px; flex: none; padding: 2px; background: #0b0c06; border: 1px solid var(--frame); cursor: pointer; }
.cab__sw { display: inline-block; width: 11px; height: 11px; border-radius: 0; border: 1px solid rgba(255,255,255,.25); vertical-align: middle; margin-right: 7px; }