/* =====================================================================
   HTF // htf.redhacker.ai
   The redhacker.ai design language, applied to CTFd's stock "core" theme.
   ---------------------------------------------------------------------
   Tokens, type scale and component treatments are lifted from
   redhacker.ai so the CTF reads as the same product as the hash lookup,
   not a CTFd install wearing a hat.

   The rule that governs everything here is redhacker.ai's own:

     Black is the canvas; red is an ACCENT, not the surface. Structural
     colours (backgrounds, borders, body text) are neutral greys so the
     red only lands where it means something.

   So: neutral borders everywhere, red reserved for the logo, section
   markers, the active tab, point values, focus rings and alerts.

   Corners are square. Bootstrap rounds almost everything, and rounded
   corners are the single fastest way to stop looking like redhacker.ai,
   so radii are zeroed rather than re-tuned.
   ===================================================================== */

/* ------------------------------------------------------------------ */
/* 1. TOKENS — verbatim from redhacker.ai                              */
/* ------------------------------------------------------------------ */
:root,
html[data-bs-theme="dark"] {
  --bg: #08090b;
  --bg2: #0d0e11;
  --panel: rgba(15, 16, 19, .86);
  --panel2: rgba(20, 21, 25, .7);

  --neon: #ff2e4d;
  --neon2: #ff6b3d;
  --good: #31d17a;
  --amber: #ffb000;
  --danger: #ff2e63;

  --ink: #e9eaee;
  --dim: #7a7f89;              /* 4.73:1 on panel, holds AA */

  --line: rgba(255, 255, 255, .075);   /* neutral structural border */
  --lineR: rgba(255, 46, 77, .30);     /* red, accented edges only */

  --wash: rgba(255, 255, 255, .02);
  --wash2: rgba(255, 255, 255, .015);
  --wash3: rgba(255, 255, 255, .06);
  --wash4: rgba(255, 255, 255, .07);
  --grid: rgba(255, 255, 255, .11);

  --onaccent: #1a0206;         /* text ON the red gradient buttons */
  --field: rgba(0, 0, 0, .55); /* input wells */

  /* locked: redhacker.ai's disabled-button treatment, reused for tiers */
  --lock-a: #4a0d19;
  --lock-b: #52200f;
  --lock-ink: #c9899a;

  --font: "DejaVu Sans Mono", "SFMono-Regular", Menlo, Consolas, monospace;
}

/* redhacker.ai ships a light theme and CTFd has a light toggle, so the two
   are wired together rather than forcing dark on people. */
html[data-bs-theme="light"] {
  --bg: #f7f7f9;
  --bg2: #eceef2;
  --panel: rgba(255, 255, 255, .92);
  --panel2: rgba(242, 243, 246, .85);

  --neon: #c8102e;
  --neon2: #b03a10;
  --good: #0a6b3d;
  --amber: #7a5200;
  --danger: #b3122f;

  --ink: #14161a;
  --dim: #585d66;

  --line: rgba(0, 0, 0, .14);
  --lineR: rgba(200, 16, 46, .30);

  --wash: rgba(0, 0, 0, .030);
  --wash2: rgba(0, 0, 0, .022);
  --wash3: rgba(0, 0, 0, .070);
  --wash4: rgba(0, 0, 0, .055);
  --grid: rgba(0, 0, 0, .10);

  --onaccent: #fff;
  --field: #fff;

  --lock-a: #f3dfe4;
  --lock-b: #f5e6dc;
  --lock-ink: #8c2b3f;
}

/* ------------------------------------------------------------------ */
/* 2. CANVAS AND TYPE                                                  */
/* ------------------------------------------------------------------ */
body.htf {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  font-size: 13px;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* Square everything. One rule, applied once, rather than chasing
   Bootstrap's radius variables component by component. */
body.htf .card,
body.htf .btn,
body.htf .modal-content,
body.htf .form-control,
body.htf .form-select,
body.htf .alert,
body.htf .badge,
body.htf .list-group-item,
body.htf .nav-link,
body.htf .dropdown-menu,
body.htf .progress,
body.htf .table,
body.htf .input-group-text,
body.htf .htf-tile {
  border-radius: 0 !important;
}

body.htf h1, body.htf h2, body.htf h3,
body.htf h4, body.htf h5, body.htf h6 {
  font-family: var(--font);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink);
}

body.htf a { color: var(--neon); text-decoration: none; }
body.htf a:hover { color: var(--neon2); }

body.htf code, body.htf pre { color: var(--neon); }

body.htf .text-muted,
body.htf .text-secondary { color: var(--dim) !important; }

/* Focus is visible on every control, red, offset. Taken from the source
   site, which uses :focus-visible so a mouse click leaves no ring. */
body.htf a:focus-visible,
body.htf button:focus-visible,
body.htf input:focus-visible,
body.htf textarea:focus-visible,
body.htf select:focus-visible,
body.htf [tabindex]:focus-visible {
  outline: 2px solid var(--neon);
  outline-offset: 2px;
  border-radius: 1px;
}

/* The faint structural grid. Masked so it fades out rather than ending on
   a hard line, and kept behind everything. */
.htf-bg {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(900px 480px at 78% -10%, rgba(255, 46, 77, .05), transparent 62%),
    radial-gradient(760px 420px at 8% 108%, rgba(255, 107, 61, .04), transparent 62%),
    var(--bg);
}

.htf-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(var(--grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size: 48px 48px;
  opacity: .16;
  -webkit-mask-image: radial-gradient(ellipse 110% 85% at 50% 25%, #000 35%, transparent 100%);
  mask-image: radial-gradient(ellipse 110% 85% at 50% 25%, #000 35%, transparent 100%);
}

/* A single slow sweep, the same idea as the scanner window on the source
   site. One line, not a full CRT overlay: the hash lookup does not sit
   behind scanlines and neither should this. */
.htf-sweep {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  height: 1px;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(90deg, transparent, var(--neon), transparent);
  opacity: .22;
  animation: htf-sweep 9s linear infinite;
}

@keyframes htf-sweep {
  0% { transform: translateY(0); opacity: 0; }
  6% { opacity: .22; }
  94% { opacity: .22; }
  100% { transform: translateY(100vh); opacity: 0; }
}

body.htf main[role="main"],
body.htf .footer { position: relative; z-index: 2; }

/* ------------------------------------------------------------------ */
/* 3. TOP BAR AND LOGO LOCKUP                                          */
/* ------------------------------------------------------------------ */
/* One row, three groups, nothing wrapping. The bar is 52px and stays 52px:
   every child is vertically centred and nothing in it is allowed to break
   onto a second line. */
body.htf .navbar {
  background: var(--panel) !important;
  border-bottom: 1px solid var(--line);
  backdrop-filter: blur(10px);
  padding: 0;
  min-height: 52px;
}

body.htf .navbar > .container {
  align-items: center;
  gap: 8px;
}

body.htf .navbar-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0;
  margin-right: 18px;
}

.htf-mark { width: 26px; height: 26px; display: block; flex: none; }

.htf-logo {
  font-size: 19px;
  letter-spacing: .1em;
  line-height: 1;
  white-space: nowrap;
}

/* RED in red with the glow, HACKER in white. The one place a glow is
   spent on the page. */
.htf-logo .a { color: var(--neon); text-shadow: 0 0 18px rgba(255, 46, 77, .65); }
.htf-logo .b { color: var(--ink); }

/* Menu items are --ink, not --dim.

   --dim is tuned for body copy at 13px; at 10px, uppercase and tracked out to
   .18em there is far less ink per glyph, so the same colour that passes for a
   paragraph reads as washed out for a menu. Navigation is not secondary text,
   it is the thing people are looking for. Red stays reserved for the page you
   are on. */
body.htf .navbar .nav-link {
  font-size: 10px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ink) !important;
  padding: 8px 9px;
  border-bottom: 2px solid transparent;
  white-space: nowrap;
  transition: color .15s, background .15s;
}

body.htf .navbar .nav-link:hover {
  color: var(--neon) !important;
  background: var(--wash);
}

/* core marks the bar navbar-dark, which in light mode leaves the brand text
   and the hamburger drawn for a dark background on a white one. */
body.htf .navbar-toggler {
  border-color: var(--line);
  color: var(--ink);
}

html[data-bs-theme="light"] body.htf .navbar-toggler-icon {
  filter: invert(1) grayscale(1);
}

body.htf .navbar .nav-link.active {
  color: var(--neon) !important;
  background: linear-gradient(180deg, rgba(255, 46, 77, .12), rgba(255, 46, 77, .02));
  border-bottom-color: var(--neon);
}

/* The account actions are icons from md up; their labels only appear in the
   collapsed mobile menu. Six labelled items is what made the bar wrap. */
@media (min-width: 768px) {
  body.htf .htf-actions {
    flex-direction: row;
    align-items: center;
    flex-wrap: nowrap;
  }

  body.htf .htf-actions .nav-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    padding: 0;
    font-size: 13px;
    border-bottom: 0;
  }

  body.htf .htf-actions .nav-link { color: var(--ink) !important; }
  body.htf .htf-actions .nav-link:hover { color: var(--neon) !important; }

  /* The unread count rides the bell rather than sitting beside it. */
  body.htf .htf-actions .badge-notification {
    position: absolute;
    top: 2px;
    right: 2px;
    padding: 1px 4px;
    font-size: 7.5px;
    line-height: 1.3;
    border: 0;
    background: var(--neon) !important;
    color: var(--onaccent) !important;
  }

  body.htf .htf-actions .nav-item { position: relative; }

  body.htf .htf-primary { flex-wrap: nowrap; }
}

body.htf .htf-no-caret::after { display: none; }

/* Status group: what you are, and what the clock says. Sits between the
   destinations and the actions, on one line, never wrapping. */
.htf-status {
  align-items: center;
  gap: 6px;
  margin-right: 10px;
  white-space: nowrap;
}

/* Tighter than the source site's pills: three of them share a 52px bar with
   a logo, four destinations and ten icons, so every pixel is spoken for. */
body.htf .htf-status .htf-pill { padding: 5px 8px; }

.htf-pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border: 1px solid var(--line);
  background: var(--wash);
  padding: 6px 11px;
  font-size: 9.5px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--dim);
  white-space: nowrap;
}

.htf-pill b { color: var(--ink); font-weight: 400; }

.htf-pill .d {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--good);
  box-shadow: 0 0 8px var(--good);
}

.htf-pill.tier-pro   .d { background: var(--amber); box-shadow: 0 0 8px var(--amber); }
.htf-pill.tier-elite .d { background: var(--neon);  box-shadow: 0 0 8px var(--neon); }
.htf-pill.tier-pro   b { color: var(--amber); }
.htf-pill.tier-elite b { color: var(--neon); }

/* Same dot states the source site uses for a degraded or dead reading. */
.htf-pill.warn .d { background: var(--amber); box-shadow: 0 0 8px var(--amber); }
.htf-pill.bad  .d { background: var(--danger); box-shadow: 0 0 8px var(--danger); }

a.htf-pill { text-decoration: none; }
a.htf-pill:hover { border-color: var(--lineR); }

/* The clock is a pill like the others. It was the odd one out: a large red
   number with a caption under it, which is why the group never looked level.
   Now it is a label, a separator and a value, same as sys and tier, and the
   only thing that marks it out is the red value and the dot. */
.htf-clock b {
  color: var(--neon);
  font-variant-numeric: tabular-nums;
  /* Digits change every second; a fixed width stops the pill twitching. */
  min-width: 62px;
  display: inline-block;
  text-align: right;
}

/* ------------------------------------------------------------------ */
/* 4. PAGE HEADER                                                      */
/* ------------------------------------------------------------------ */
body.htf .jumbotron {
  background: var(--panel);
  border-bottom: 1px solid var(--line);
  padding: 30px 0 26px;
  margin-bottom: 0;
}

body.htf .jumbotron h1 {
  font-size: clamp(19px, 2.4vw, 26px);
  letter-spacing: .18em;
  margin: 0;
}

/* The red tick that marks a section on the source site. */
body.htf .jumbotron h1::before {
  content: "";
  display: inline-block;
  width: 3px;
  height: .8em;
  margin-right: 12px;
  vertical-align: -1px;
  background: var(--neon);
  box-shadow: 0 0 12px rgba(255, 46, 77, .6);
}

.htf-sub {
  margin: 8px 0 0;
  font-size: 9.5px;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--dim);
}

.htf-sub .on { color: var(--good); }

/* ------------------------------------------------------------------ */
/* 5. CATEGORY HEADERS                                                 */
/* ------------------------------------------------------------------ */
body.htf .htf-category-header {
  display: flex;
  align-items: center;
  gap: 12px;
}

body.htf .htf-category-header h3 {
  margin: 0;
  font-size: 11px;
  letter-spacing: .22em;
  color: var(--ink);
}

body.htf .htf-category-header h3::before {
  content: "";
  display: inline-block;
  width: 3px;
  height: 11px;
  margin-right: 10px;
  vertical-align: -1px;
  background: var(--neon);
}

.htf-category-rule {
  flex: 1;
  height: 1px;
  background: var(--line);
}

.htf-category-count {
  font-size: 9px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--dim);
  white-space: nowrap;
}

/* ------------------------------------------------------------------ */
/* 6. CHALLENGE TILES                                                  */
/* ------------------------------------------------------------------ */
body.htf .htf-tile {
  position: relative;
  overflow: hidden;
  min-height: 118px;
  padding: 13px 14px;
  text-align: left;
  background: var(--wash) !important;
  border: 1px solid var(--line) !important;
  color: var(--ink);
  transition: border-color .15s, box-shadow .15s, background .15s;
}

body.htf .htf-tile:hover {
  background: var(--wash2) !important;
  border-color: var(--lineR) !important;
  box-shadow: 0 0 16px rgba(255, 46, 77, .18);
}

.htf-tile-inner {
  display: flex;
  flex-direction: column;
  gap: 5px;
  height: 100%;
}

.htf-tile-name {
  margin: 0;
  font-size: 11.5px;
  letter-spacing: .04em;
  color: var(--ink);
  white-space: normal;
}

/* Points are a key figure, so they get the accent. */
.htf-tile-value {
  font-size: 15px;
  color: var(--neon);
  font-variant-numeric: tabular-nums;
}

.htf-tile-solves {
  font-size: 8.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--dim);
}

.htf-tile-corner {
  position: absolute;
  width: 7px;
  height: 7px;
  border-color: var(--lineR);
  opacity: 0;
  transition: opacity .15s;
}

.htf-tile-corner-tl { top: 4px; left: 4px; border-top: 1px solid; border-left: 1px solid; }
.htf-tile-corner-br { bottom: 4px; right: 4px; border-bottom: 1px solid; border-right: 1px solid; }

body.htf .htf-tile:hover .htf-tile-corner { opacity: 1; }

/* solved */
body.htf .htf-tile-solved {
  border-color: rgba(49, 209, 122, .34) !important;
}

body.htf .htf-tile-solved .htf-tile-value { color: var(--good); }

.htf-solved-badge {
  position: absolute;
  top: 9px;
  right: 10px;
  font-size: 9px;
  color: var(--good);
}

/* ------------------------------------------------------------------ */
/* 7. LOCKED TILES                                                     */
/* ------------------------------------------------------------------ */
/* redhacker.ai already has a visual language for "there is something you
   must do first": the run button's locked state, a flat maroon fill with
   muted rose text, explicitly not a ghosted or faded control. A ghosted
   tile would read as "still loading". This reuses it exactly.

   The name and point value stay legible on purpose. Blurring them would
   hide the product; the point of showing a locked challenge at all is
   that the competitor can see what they are missing.

   The fill is deliberately a wash rather than the button's solid maroon.
   Most of a board is locked for a free account, and at full strength twelve
   maroon tiles turn the page into exactly the flat red wash the source site
   warns against. At this weight the red still reads as an accent and the
   unlocked challenges are what stands out. */
body.htf .htf-tile-locked {
  background: linear-gradient(135deg,
              color-mix(in srgb, var(--lock-a) 42%, transparent),
              color-mix(in srgb, var(--lock-b) 26%, transparent)) !important;
  border-color: var(--lineR) !important;
}

body.htf .htf-tile-locked:hover {
  border-color: var(--neon) !important;
  box-shadow: 0 0 20px rgba(255, 46, 77, .22);
}

body.htf .htf-tile-locked .htf-tile-name { color: var(--ink); opacity: .78; }
body.htf .htf-tile-locked .htf-tile-value { color: var(--lock-ink); text-shadow: none; }
body.htf .htf-tile-locked .htf-tile-solves { color: var(--lock-ink); opacity: .7; }

body.htf .htf-tile-locked .htf-tile-corner { border-color: rgba(255, 255, 255, .18); }

.htf-tile-unlock {
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  align-self: flex-start;
  padding: 5px 9px;
  border: 1px solid var(--lineR);
  background: rgba(0, 0, 0, .25);
  font-size: 8.5px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink);
}

body.htf .htf-tile-locked:hover .htf-tile-unlock {
  background: linear-gradient(90deg, var(--neon), var(--neon2));
  border-color: transparent;
  color: var(--onaccent);
}

/* ------------------------------------------------------------------ */
/* 8. TIER BADGES                                                      */
/* ------------------------------------------------------------------ */
/* Tier is carried by the word, not by inventing a second accent colour.
   Free is grey, Pro is amber, Elite is the house red. */
.htf-tier-badge {
  position: absolute;
  top: 9px;
  right: 10px;
  z-index: 1;
  padding: 3px 7px;
  border: 1px solid currentColor;
  font-size: 8px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--dim);
  background: rgba(0, 0, 0, .3);
}

body.htf .htf-tier-pro   .htf-tier-badge { color: var(--amber); }
body.htf .htf-tier-elite .htf-tier-badge { color: var(--neon); }

/* ------------------------------------------------------------------ */
/* 9. CHALLENGE MODAL                                                  */
/* ------------------------------------------------------------------ */
body.htf .modal-content {
  background: var(--bg2);
  border: 1px solid var(--line);
  /* The one panel that earns a red edge: it is the thing you opened. */
  border-top: 2px solid var(--neon);
  box-shadow: 0 0 40px rgba(0, 0, 0, .8);
}

body.htf .modal-backdrop.show { opacity: .8; }

body.htf .challenge-name {
  font-size: 15px;
  letter-spacing: .16em;
  color: var(--ink);
}

body.htf .challenge-value {
  font-size: 22px;
  color: var(--neon);
  text-shadow: 0 0 14px rgba(255, 46, 77, .5);
  font-variant-numeric: tabular-nums;
}

body.htf .nav-tabs { border-bottom: 1px solid var(--line); }

body.htf .nav-tabs .nav-link {
  font-size: 10px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--dim);
  background: transparent;
  border: 0;
}

body.htf .nav-tabs .nav-link:hover { color: var(--ink); }

body.htf .nav-tabs .nav-link.active {
  color: var(--neon);
  background: linear-gradient(180deg, rgba(255, 46, 77, .12), rgba(255, 46, 77, .02));
  box-shadow: inset 0 -2px 0 var(--neon);
}

/* The flag well, styled after the hash input on the source site. */
body.htf .challenge-input,
body.htf .form-control,
body.htf .form-select {
  font-family: var(--font);
  font-size: 12px;
  background: var(--field);
  color: var(--ink);
  border: 1px solid var(--line);
}

body.htf .challenge-input { color: var(--neon); }

body.htf .form-control::placeholder { color: var(--dim); }

body.htf .form-control:focus,
body.htf .form-select:focus,
body.htf .challenge-input:focus {
  background: var(--field);
  color: var(--ink);
  border-color: var(--lineR);
  box-shadow: none;
}

body.htf .challenge-input:focus { color: var(--neon); }

/* The submit button is the page's one gradient, same as the source's run
   button. Everything else is an outline.

   `.btn.challenge-submit` rather than `.challenge-submit`: core gives the
   button `btn-outline-secondary` as well, and the outline rule further down
   would otherwise win on source order and flatten this back to a ghost. */
body.htf .btn.challenge-submit,
body.htf .btn.btn-primary {
  font-family: var(--font);
  font-size: 10.5px;
  letter-spacing: .18em;
  text-transform: uppercase;
  font-weight: 700;
  background: linear-gradient(90deg, var(--neon), var(--neon2));
  color: var(--onaccent);
  border: 1px solid transparent;
}

body.htf .btn.challenge-submit:hover,
body.htf .btn.btn-primary:hover {
  color: var(--onaccent);
  border-color: transparent;
  box-shadow: 0 0 28px rgba(255, 46, 77, .55);
}

body.htf .btn {
  font-family: var(--font);
  font-size: 10.5px;
  letter-spacing: .18em;
  text-transform: uppercase;
}

body.htf .btn-outline-secondary,
body.htf .btn-secondary,
body.htf .btn-dark {
  border: 1px solid var(--line);
  background: transparent;
  color: var(--ink);
}

body.htf .btn-outline-secondary:hover,
body.htf .btn-secondary:hover,
body.htf .btn-dark:hover {
  border-color: var(--neon);
  background: transparent;
  color: var(--ink);
  box-shadow: 0 0 16px rgba(255, 46, 77, .25);
}

body.htf .btn:disabled { opacity: .45; box-shadow: none; }

/* submission feedback */
body.htf .alert {
  font-size: 11px;
  letter-spacing: .1em;
  border: 1px solid var(--line);
  background: var(--wash);
  color: var(--ink);
}

body.htf .alert-success,
body.htf .correct {
  color: var(--good) !important;
  border-color: rgba(49, 209, 122, .35) !important;
  background: rgba(49, 209, 122, .07) !important;
}

body.htf .alert-danger,
body.htf .wrong {
  color: var(--danger) !important;
  border-color: var(--lineR) !important;
  background: rgba(255, 46, 99, .07) !important;
}

/* ------------------------------------------------------------------ */
/* 10. SCOREBOARD                                                      */
/* ------------------------------------------------------------------ */
body.htf #scoreboard .table,
body.htf .table {
  --bs-table-bg: transparent;
  --bs-table-color: var(--ink);
  --bs-table-striped-bg: var(--wash2);
  --bs-table-striped-color: var(--ink);
  border-color: var(--line);
  font-size: 11.5px;
}

body.htf .table thead th {
  font-size: 8.5px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--dim);
  border-bottom: 1px solid var(--line);
}

body.htf .table tbody tr:hover { background: var(--wash); }

body.htf .table tbody th[scope="row"] {
  color: var(--dim);
  font-variant-numeric: tabular-nums;
}

/* Only the leader gets the accent. Three coloured ranks would spend the
   red on decoration. */
body.htf #scoreboard .table tbody tr:nth-child(1) th[scope="row"] {
  color: var(--neon);
  text-shadow: 0 0 12px rgba(255, 46, 77, .5);
}

body.htf .table tbody td a { color: var(--ink); }
body.htf .table tbody td a:hover { color: var(--neon); }

body.htf #score-graph {
  border: 1px solid var(--line);
  background: var(--wash);
}

/* ------------------------------------------------------------------ */
/* 11. PANELS, BADGES, MISC                                            */
/* ------------------------------------------------------------------ */
body.htf .card,
body.htf .list-group-item {
  background: var(--wash);
  border: 1px solid var(--line);
  color: var(--ink);
}

body.htf .card-title { font-size: 11px; letter-spacing: .2em; }

body.htf .badge {
  font-family: var(--font);
  font-weight: 400;
  font-size: 8.5px;
  letter-spacing: .16em;
  text-transform: uppercase;
  border: 1px solid var(--line);
  background: var(--wash3) !important;
  color: var(--ink);
}

body.htf .badge.bg-danger { background: var(--wash3) !important; color: var(--neon); border-color: var(--lineR); }

body.htf .dropdown-menu {
  background: var(--bg2);
  border: 1px solid var(--line);
  font-size: 11px;
}

body.htf .dropdown-item { color: var(--ink); }
body.htf .dropdown-item:hover { background: var(--wash3); color: var(--ink); }

body.htf .footer {
  border-top: 1px solid var(--line);
  background: transparent;
  padding: 16px 0;
}

.htf-footer {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
}

.htf-copy {
  font-size: 9px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--dim);
}

body.htf hr { border-color: var(--line); opacity: 1; }

/* ------------------------------------------------------------------ */
/* 12. MEMBERSHIP / PRICING                                            */
/* ------------------------------------------------------------------ */
.htf-current-tier {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 14px;
  margin: 26px 0;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-left: 2px solid var(--neon);
  background: var(--wash);
}

.htf-current-tier-label {
  font-size: 8.5px;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--dim);
}

.htf-current-tier-value {
  font-size: 17px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--neon);
  text-shadow: 0 0 14px rgba(255, 46, 77, .5);
}

.htf-current-tier-note {
  font-size: 9.5px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--dim);
}

body.htf .htf-tier-card {
  position: relative;
  background: var(--wash);
  border: 1px solid var(--line);
  transition: border-color .15s, box-shadow .15s;
}

body.htf .htf-tier-card:hover {
  border-color: var(--lineR);
  box-shadow: 0 0 20px rgba(255, 46, 77, .18);
}

/* Only the tier you can buy next carries the accent edge; the others stay
   structural, so the page has one thing to look at. */
body.htf .htf-tier-card.htf-tier-elite { border-top: 2px solid var(--neon); }
body.htf .htf-tier-card.htf-tier-pro { border-top: 2px solid var(--amber); }
body.htf .htf-tier-card-current { border-color: var(--lineR); }

.htf-tier-card-name {
  display: block;
  font-size: 12px;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--ink);
}

body.htf .htf-tier-card.htf-tier-elite .htf-tier-card-name { color: var(--neon); }
body.htf .htf-tier-card.htf-tier-pro .htf-tier-card-name { color: var(--amber); }

.htf-tier-perks {
  list-style: none;
  margin: 14px 0 18px;
  padding: 0;
  font-size: 10.5px;
  color: var(--dim);
}

.htf-tier-perks li {
  position: relative;
  padding: 6px 0 6px 16px;
  border-bottom: 1px solid var(--line);
}

.htf-tier-perks li::before {
  content: "::";
  position: absolute;
  left: 0;
  color: var(--neon);
}

body.htf span.htf-tier-card-cta {
  display: inline-block;
  padding: 8px 13px;
  border: 1px solid var(--line);
  font-size: 9.5px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--dim);
}

body.htf .htf-tier-card-cta-active { color: var(--good); border-color: rgba(49, 209, 122, .35); }

/* ------------------------------------------------------------------ */
/* 13. MOTION PREFERENCES                                              */
/* ------------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  body.htf *,
  body.htf *::before,
  body.htf *::after {
    animation: none !important;
    transition: none !important;
  }

  .htf-sweep { display: none; }
}

/* ------------------------------------------------------------------ */
/* 14. SMALL SCREENS                                                   */
/* ------------------------------------------------------------------ */
@media (max-width: 767px) {
  /* The status group is already hidden below xl by its utility classes; this
     covers the collapsed menu, where a clock in a dropdown makes no sense. */
  .htf-status { display: none !important; }

  .htf-logo { font-size: 17px; }

  .htf-footer { justify-content: center; }
}