/*
 * yctf design layer. Loaded after main.css.
 * Palette: EmberZero (emberzero.com) cyan/teal for actions on neutral surfaces (indigo-tinted
 * dark surfaces read as one flat hue); red for errors.
 * Categories carry their own colour (--cat-1..8); a solved challenge lights up in it.
 * tools/retoken.py rewrites main.css literals to the --yc-* tokens below.
 */

@font-face {
  font-family: "Mona Sans";
  font-style: normal;
  font-display: swap;
  font-weight: 200 900;
  font-stretch: 75% 125%;
  src: url(../webfonts/mona-sans-latin-wdth-normal.woff2) format("woff2-variations");
  unicode-range:
    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304,
    U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF,
    U+FFFD;
}
@font-face {
  font-family: "Mona Sans";
  font-style: normal;
  font-display: swap;
  font-weight: 200 900;
  font-stretch: 75% 125%;
  src: url(../webfonts/mona-sans-latin-ext-wdth-normal.woff2) format("woff2-variations");
  unicode-range:
    U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308,
    U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0,
    U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ---------- tokens ---------- */
:root,
[data-bs-theme="light"] {
  --yc-font:
    "Mona Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;

  /* contrast targets: text >= 7:1, muted >= 4.5:1, input borders >= 3:1,
     surface steps and tile edges visible against the page */
  --yc-bg: #e8e8f2;
  --yc-bg-rgb: 232, 232, 242;
  --yc-surface: #ffffff;
  --yc-sunken: #f2f2f8;
  --yc-hover: #f4f4fa;
  --yc-line: #b4b4cc;
  --yc-line-strong: #77779a;
  --yc-ink: #0f0f1a;
  --yc-ink-rgb: 15, 15, 26;
  --yc-muted: #47475f;
  --yc-link: #08648b;
  --yc-link-rgb: 8, 100, 139;

  --yc-accent: #0a739f;
  --yc-accent-rgb: 10, 115, 159;
  --yc-accent-ink: #ffffff;
  --yc-accent-soft: #8fd3f2;
  --yc-captured: var(--yc-accent);
  --yc-captured-rgb: var(--yc-accent-rgb);
  --yc-captured-ink: var(--yc-accent-ink);
  --yc-captured-line: var(--yc-accent);
  --yc-solved-bg: color-mix(in srgb, var(--yc-accent) 14%, var(--yc-surface));
  /* category colours: dataviz reference palette, validated (CVD, normal vision) on these surfaces;
     assigned by category name in base.html, so a colour always means the same category */
  --cat-1: #2a78d6;
  --cat-1-ink: #ffffff;
  --cat-2: #eb6834;
  --cat-2-ink: #0f0f1a;
  --cat-3: #1baf7a;
  --cat-3-ink: #0f0f1a;
  --cat-4: #eda100;
  --cat-4-ink: #0f0f1a;
  --cat-5: #e87ba4;
  --cat-5-ink: #0f0f1a;
  --cat-6: #008300;
  --cat-6-ink: #ffffff;
  --cat-7: #4a3aa7;
  --cat-7-ink: #ffffff;
  --cat-8: #e34948;
  --cat-8-ink: #0f0f1a;
  --cat-mix: 28%;

  --yc-captured-tint: var(--yc-solved-bg);
  --yc-red: #c62f2f;
  --yc-red-rgb: 198, 47, 47;
  --yc-green: #1d7a52;
  --yc-green-rgb: 29, 122, 82;
  --yc-amber: #a86400;
  --yc-amber-rgb: 168, 100, 0;
  --yc-ink-2: #47475f;
  --yc-ink-2-rgb: 71, 71, 95;

  /* fixed values referenced by retokened main.css */
  --yc-surface-light: #f2f2f8;
  --yc-line-light: #b4b4cc;
  --yc-surface-dark: #1b1e25;
  --yc-surface-dark-rgb: 27, 30, 37;
  --yc-raised-dark: #252932;
  --yc-line-dark: #363b47;

  --yc-radius: 6px;
  --yc-radius-lg: 10px;
  --yc-shadow-pop: 0 1px 2px rgba(15, 15, 26, 0.08), 0 12px 32px rgba(15, 15, 26, 0.12);

  /* upstream theme variables, aliased */
  --wmctf-primary: var(--yc-link);
  --wmctf-secondary: var(--yc-link);
  --wmctf-accent: var(--yc-red);
  --wmctf-success: var(--yc-green);
  --wmctf-warning: var(--yc-amber);
  --light-bg: #e8e8f2;
  --light-surface: #f2f2f8;
  --light-card: #ffffff;
  --light-border: #b4b4cc;
  --light-text: #0f0f1a;
  --light-muted: #47475f;
  --dark-bg: #0b0d11;
  --dark-surface: #1b1e25;
  --dark-card: #1b1e25;
  --dark-border: #363b47;
  --dark-text: #eef0f4;
  --dark-muted: #adb3c0;
  --radius-sm: 6px;
  --radius-md: 6px;
  --radius-lg: 10px;
  --radius-xl: 12px;
  --radius-2xl: 12px;
  --shadow-sm: none;
  --shadow-md: none;
  --shadow-lg: var(--yc-shadow-pop);
  --shadow-xl: var(--yc-shadow-pop);

  /* Bootstrap */
  --bs-body-font-family: var(--yc-font);
  --bs-body-bg: var(--yc-bg);
  --bs-body-bg-rgb: var(--yc-bg-rgb);
  --bs-body-color: var(--yc-ink);
  --bs-body-color-rgb: var(--yc-ink-rgb);
  --bs-emphasis-color: var(--yc-ink);
  --bs-emphasis-color-rgb: var(--yc-ink-rgb);
  --bs-secondary-color: var(--yc-muted);
  --bs-tertiary-color: var(--yc-muted);
  --bs-secondary-bg: var(--yc-sunken);
  --bs-tertiary-bg: var(--yc-sunken);
  --bs-border-color: var(--yc-line);
  --bs-border-radius: var(--yc-radius);
  --bs-link-color: var(--yc-link);
  --bs-link-color-rgb: var(--yc-link-rgb);
  --bs-link-hover-color: var(--yc-ink);
  --bs-link-hover-color-rgb: var(--yc-ink-rgb);
  --bs-heading-color: var(--yc-ink);
}

[data-bs-theme="dark"] {
  --yc-accent-ink: #02002d;
  --yc-bg: #0b0d11;
  --yc-bg-rgb: 11, 13, 17;
  --yc-surface: #1b1e25;
  --yc-sunken: #13151a;
  --yc-hover: #252932;
  --yc-line: #363b47;
  --yc-line-strong: #6b7385;
  --yc-ink: #eef0f4;
  --yc-ink-rgb: 238, 240, 244;
  --yc-muted: #adb3c0;
  --yc-link: #14b5fc;
  --yc-link-rgb: 20, 181, 252;
  --yc-accent: #14b5fc;
  --yc-accent-rgb: 20, 181, 252;
  --yc-accent-soft: #0a739f;
  --yc-captured: var(--yc-accent);
  --yc-captured-rgb: var(--yc-accent-rgb);
  --yc-captured-ink: var(--yc-accent-ink);
  --yc-captured-line: var(--yc-accent);
  --yc-solved-bg: color-mix(in srgb, var(--yc-accent) 18%, var(--yc-surface));
  --cat-1: #3987e5;
  --cat-1-ink: #02002d;
  --cat-2: #d95926;
  --cat-2-ink: #02002d;
  --cat-3: #199e70;
  --cat-3-ink: #02002d;
  --cat-4: #c98500;
  --cat-4-ink: #02002d;
  --cat-5: #d55181;
  --cat-5-ink: #02002d;
  --cat-6: #008300;
  --cat-6-ink: #ffffff;
  --cat-7: #9085e9;
  --cat-7-ink: #02002d;
  --cat-8: #e66767;
  --cat-8-ink: #02002d;
  --cat-mix: 32%;

  --yc-captured-tint: var(--yc-solved-bg);
  --yc-red: #ff7b7b;
  --yc-red-rgb: 255, 123, 123;
  --yc-green: #52c48e;
  --yc-green-rgb: 82, 196, 142;
  --yc-amber: #f0a43a;
  --yc-amber-rgb: 240, 164, 58;
  --yc-ink-2: #adb3c0;
  --yc-ink-2-rgb: 173, 179, 192;
  --yc-shadow-pop: 0 1px 2px rgba(0, 0, 0, 0.35), 0 16px 40px rgba(0, 0, 0, 0.5);

  --bs-body-bg: var(--yc-bg);
  --bs-body-bg-rgb: var(--yc-bg-rgb);
  --bs-body-color: var(--yc-ink);
  --bs-body-color-rgb: var(--yc-ink-rgb);
  --bs-emphasis-color: var(--yc-ink);
  --bs-emphasis-color-rgb: var(--yc-ink-rgb);
  --bs-secondary-color: var(--yc-muted);
  --bs-tertiary-color: var(--yc-muted);
  --bs-secondary-bg: var(--yc-sunken);
  --bs-tertiary-bg: var(--yc-sunken);
  --bs-border-color: var(--yc-line);
  --bs-link-color: var(--yc-link);
  --bs-link-color-rgb: var(--yc-link-rgb);
  --bs-link-hover-color: var(--yc-ink);
  --bs-link-hover-color-rgb: var(--yc-ink-rgb);
  --bs-heading-color: var(--yc-ink);
}

/* ---------- base & type ---------- */
html body {
  font-family: var(--yc-font);
  font-size: 0.9375rem;
  background: var(--yc-bg) !important;
  color: var(--yc-ink) !important;
  font-feature-settings: "kern", "liga", "calt";
}

h1,
h2,
h3,
h4,
h5,
h6,
.h1,
.h2,
.h3,
.h4,
.h5,
.h6 {
  font-family: var(--yc-font);
  color: var(--yc-ink);
  letter-spacing: -0.01em;
}
h1,
.h1 {
  font-stretch: 125%;
  font-weight: 800;
  letter-spacing: -0.02em;
}
h2,
.h2 {
  font-stretch: 112%;
  font-weight: 750;
}

.text-muted,
.text-body-secondary {
  color: var(--yc-muted) !important;
}
.text-primary {
  color: var(--yc-link) !important;
}

html a:hover {
  color: var(--yc-ink);
}

/* Mona Sans' tabular digits use a slashed zero that reads as code; keep proportional */
html body {
  font-variant-numeric: proportional-nums;
}

html .text-gradient,
html .navbar-brand .text-gradient {
  background: none !important;
  -webkit-text-fill-color: currentColor !important;
  color: inherit !important;
}

::selection {
  background: rgba(var(--yc-captured-rgb), 0.45);
  color: var(--yc-ink);
}

/* one entrance moment is enough; drop the per-element animations */
.slide-up,
.fade-in,
.bounce-in {
  animation: none !important;
}

/* focus: visible ring for keyboard, nothing for mouse */
html *:focus {
  box-shadow: none;
}
html *:focus-visible {
  outline: 2px solid var(--yc-link) !important;
  outline-offset: 2px;
}

/* ---------- navbar ---------- */
html .navbar {
  background: rgba(var(--yc-bg-rgb), 0.86) !important;
  backdrop-filter: saturate(1.4) blur(14px);
  -webkit-backdrop-filter: saturate(1.4) blur(14px);
  border-bottom: 1px solid var(--yc-line) !important;
  box-shadow: none !important;
  min-height: 56px !important;
}
html .navbar .navbar-brand {
  color: var(--yc-ink) !important;
  font-stretch: 125%;
  font-weight: 800;
  font-size: 1.05rem;
  letter-spacing: -0.01em;
}
html .navbar .nav-link {
  color: var(--yc-muted) !important;
  font-weight: 550 !important;
  border-radius: var(--yc-radius) !important;
  padding: 0.4rem 0.7rem !important;
}
html .navbar .nav-link:hover,
html .navbar .nav-link:focus-visible {
  color: var(--yc-ink) !important;
  background: var(--yc-sunken) !important;
}
html .navbar .nav-link.active,
html .navbar .nav-link[aria-current="page"] {
  color: var(--yc-ink) !important;
}
html .navbar .dropdown-menu {
  background: var(--yc-surface) !important;
  border: 1px solid var(--yc-line) !important;
  border-radius: var(--yc-radius-lg) !important;
  box-shadow: var(--yc-shadow-pop) !important;
  padding: 0.35rem !important;
}
html .navbar .dropdown-item {
  color: var(--yc-ink) !important;
  border-radius: var(--yc-radius) !important;
}
html .navbar .dropdown-item:hover,
html .navbar .dropdown-item.active {
  background: var(--yc-sunken) !important;
  color: var(--yc-ink) !important;
}
html .navbar .navbar-toggler-icon {
  filter: none;
}
[data-bs-theme="dark"] .navbar .navbar-toggler-icon {
  filter: invert(1);
}

/* upstream forces the collapse open on every width; restore it on phones */
@media (max-width: 767.98px) {
  html .navbar .container {
    flex-wrap: wrap !important;
  }
  html .navbar .navbar-collapse:not(.show):not(.collapsing) {
    display: none !important;
  }
  html .navbar .navbar-collapse.show,
  html .navbar .navbar-collapse.collapsing {
    flex-basis: 100%;
    flex-direction: column;
    align-items: stretch !important;
    background: var(--yc-surface) !important;
    border: 1px solid var(--yc-line);
    box-shadow: var(--yc-shadow-pop) !important;
  }
  html .navbar .navbar-collapse .navbar-nav {
    flex-direction: column !important;
    align-items: stretch !important;
    width: 100%;
  }
}

/* ---------- page headers (was a pastel hexagon banner) ---------- */
html .jumbotron {
  background: none !important;
  margin: 0 0 1.75rem !important;
  padding: 1.75rem 0 1.25rem !important;
  border-bottom: 1px solid var(--yc-line);
  overflow: visible;
  text-align: left;
}
html .jumbotron::before,
html .jumbotron::after {
  content: none !important;
}
html .jumbotron h1,
html .jumbotron .display-5 {
  font-size: clamp(2rem, 1.2rem + 3vw, 3.4rem) !important;
  font-stretch: 125%;
  font-weight: 800 !important;
  line-height: 1.02;
  letter-spacing: -0.025em;
  color: var(--yc-ink) !important;
  text-shadow: none !important;
  text-align: left !important;
  margin: 0 !important;
}
html .jumbotron .text-center {
  text-align: left !important;
}
html .jumbotron .lead,
html .jumbotron p {
  color: var(--yc-muted) !important;
  max-width: 60ch;
  margin: 0.6rem 0 0;
}
html .jumbotron h2,
html .jumbotron h3 {
  color: var(--yc-muted) !important;
  font-stretch: 100%;
  text-align: left !important;
}

/* ---------- surfaces ---------- */
html .card,
[data-bs-theme="dark"] .card {
  background: var(--yc-surface) !important;
  border: 1px solid var(--yc-line) !important;
  border-radius: var(--yc-radius-lg) !important;
  box-shadow: none !important;
  transition: none;
}
html .card:hover {
  transform: none !important;
  box-shadow: none !important;
}
html .card-header,
html .card-header.bg-light {
  background: transparent !important;
  border-bottom: 1px solid var(--yc-line) !important;
  color: var(--yc-ink) !important;
}
html .glass-effect,
[data-bs-theme="dark"] .glass-effect {
  background: var(--yc-surface) !important;
  border: 1px solid var(--yc-line) !important;
  backdrop-filter: none;
}
html .bg-light {
  background: var(--yc-sunken) !important;
}
html hr {
  border-color: var(--yc-line);
  opacity: 1;
}

/* ---------- buttons ---------- */
html .btn {
  border-radius: var(--yc-radius) !important;
  font-weight: 600;
  font-size: 0.875rem;
  padding: 0.55rem 1rem;
  box-shadow: none !important;
  transition:
    background-color 0.15s,
    border-color 0.15s,
    color 0.15s;
}
html .btn:hover,
html .btn:active {
  transform: none !important;
  box-shadow: none !important;
}
html .btn-sm {
  padding: 0.3rem 0.65rem;
  font-size: 0.8125rem;
}

html .btn-primary,
html .btn-primary:focus {
  background: var(--yc-accent) !important;
  border: 1px solid var(--yc-accent) !important;
  color: var(--yc-accent-ink) !important;
}
html .btn-primary:hover,
html .btn-primary:active {
  background: color-mix(in srgb, var(--yc-accent) 86%, #000) !important;
  border-color: color-mix(in srgb, var(--yc-accent) 86%, #000) !important;
  color: var(--yc-accent-ink) !important;
}
html .btn-info {
  border: 1px solid var(--yc-line-strong) !important;
  background: var(--yc-hover) !important;
  color: var(--yc-ink) !important;
  --bs-btn-bg: var(--yc-surface);
  --bs-btn-color: var(--yc-ink);
  --bs-btn-border-color: var(--yc-line-strong);
  --bs-btn-hover-bg: var(--yc-sunken);
  --bs-btn-hover-color: var(--yc-ink);
  --bs-btn-hover-border-color: var(--yc-line-strong);
}
html .btn-danger {
  --bs-btn-bg: var(--yc-red);
  --bs-btn-border-color: var(--yc-red);
  --bs-btn-color: #fff;
  --bs-btn-hover-bg: color-mix(in srgb, var(--yc-red) 85%, #000);
  --bs-btn-hover-border-color: color-mix(in srgb, var(--yc-red) 85%, #000);
}
[data-bs-theme="dark"] .btn-danger {
  --bs-btn-color: #2a0a0a;
}
html .btn-outline-primary,
html .btn-outline-secondary,
html .btn-outline-success {
  border: 1px solid var(--yc-line-strong) !important;
  color: var(--yc-ink) !important;
  background: transparent !important;
}
html .btn-outline-primary:hover,
html .btn-outline-secondary:hover,
html .btn-outline-success:hover {
  background: var(--yc-sunken) !important;
  color: var(--yc-ink) !important;
}
/* the plugin's instance panel hard-codes white text inside its buttons; dark-mode
   cyan needs dark text, so let the button decide */
html .btn small[style*="color: white"] {
  color: inherit !important;
}
html .bg-primary.text-white,
html .dropdown-item.bg-primary {
  color: var(--yc-accent-ink) !important;
  background: var(--yc-accent) !important;
}

/* ---------- forms ---------- */
/* :where() keeps this rule light so page-level input styles can win */
html
  input:where(
    :not(
      [type="checkbox"],
      [type="radio"],
      [type="range"],
      [type="submit"],
      [type="button"],
      [type="reset"]
    )
  ),
html select,
html textarea,
html .form-control,
html .form-select {
  background-color: var(--yc-surface) !important;
  color: var(--yc-ink) !important;
  border: 1px solid var(--yc-line-strong) !important;
  border-radius: var(--yc-radius) !important;
  padding: 0.55rem 0.8rem !important;
  font-size: 0.9375rem !important;
  box-shadow: none !important;
}
html .form-select {
  padding-right: 2.25rem !important;
}
/* below 16px, iOS Safari zooms the page when a field gets focus */
@media (max-width: 767.98px) {
  html input:where(:not([type="checkbox"], [type="radio"], [type="range"])),
  html select,
  html textarea,
  html .form-control,
  html .form-select {
    font-size: 16px !important;
  }
}
html input:where(:not([type="submit"], [type="button"])):focus,
html select:focus,
html textarea:focus,
html .form-control:focus,
html .form-select:focus {
  border-color: var(--yc-link) !important;
  box-shadow: 0 0 0 3px rgba(var(--yc-link-rgb), 0.22) !important;
  outline: none !important;
}
html ::placeholder {
  color: var(--yc-muted) !important;
  opacity: 0.85;
}
html .form-label,
html label {
  font-weight: 600;
  font-size: 0.875rem;
}
[data-bs-theme="dark"] .form-select {
  --bs-form-select-bg-img: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23e8edf6' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
}

/* ---------- tables ---------- */
html .table,
[data-bs-theme="dark"] .table {
  --bs-table-bg: transparent;
  --bs-table-color: var(--yc-ink);
  --bs-table-striped-bg: transparent;
  --bs-table-hover-bg: var(--yc-sunken);
  --bs-table-border-color: var(--yc-line);
  color: var(--yc-ink);
  background: var(--yc-surface) !important;
  border: 1px solid var(--yc-line);
  border-radius: var(--yc-radius-lg);
  overflow: hidden;
  box-shadow: none !important;
  border-collapse: separate;
  border-spacing: 0;
}
html .table > thead > tr > th,
html .table > thead th {
  background: var(--yc-sunken) !important;
  color: var(--yc-muted) !important;
  font-size: 0.8125rem;
  font-weight: 600;
  text-transform: none !important;
  letter-spacing: 0 !important;
  border-bottom: 1px solid var(--yc-line) !important;
  padding: 0.6rem 0.9rem;
}
html .table > tbody > tr > td,
html .table > tbody > tr > th {
  background: transparent !important;
  border-top: 0;
  border-bottom: 1px solid var(--yc-line) !important;
  padding: 0.55rem 0.9rem;
  vertical-align: middle;
}
html .table > tbody > tr:last-child > * {
  border-bottom: 0 !important;
}
html .table > :is(thead, tbody) > tr > * {
  text-align: left;
}
html .table > tbody > tr:hover > * {
  background: var(--yc-hover) !important;
}

/* ---------- modal ---------- */
html .modal-backdrop.show {
  opacity: 1;
  background: rgba(var(--yc-ink-rgb), 0.45);
}
[data-bs-theme="dark"] .modal-backdrop.show {
  background: rgba(4, 9, 22, 0.72);
}
html .modal-content,
[data-bs-theme="dark"] .modal-content {
  background: var(--yc-surface) !important;
  color: var(--yc-ink) !important;
  border: 1px solid var(--yc-line) !important;
  border-radius: 14px !important;
  box-shadow: var(--yc-shadow-pop) !important;
}
html .modal-content .challenge-name {
  font-stretch: 125%;
  font-weight: 800;
  letter-spacing: -0.02em;
}
html .modal-content .challenge-value {
  color: var(--yc-muted);
  font-weight: 600;
}
html .modal-content .nav-tabs {
  border-bottom: 1px solid var(--yc-line);
  gap: 0.25rem;
}
html .modal-content .nav-tabs .nav-link {
  border: 0 !important;
  border-bottom: 2px solid transparent !important;
  border-radius: 0 !important;
  color: var(--yc-muted) !important;
  background: none !important;
  font-weight: 600;
  padding: 0.5rem 0.25rem;
  margin-right: 0.75rem;
}
html .modal-content .nav-tabs .nav-link.active {
  color: var(--yc-ink) !important;
  border-bottom-color: var(--yc-ink) !important;
}
html .modal-content .challenge-desc {
  line-height: 1.6;
  max-width: 70ch;
}
html .modal-content .challenge-tag.badge {
  background: var(--yc-sunken) !important;
  color: var(--yc-ink) !important;
  border: 1px solid var(--yc-line);
  font-weight: 600;
}
html .btn-close {
  filter: none;
}
[data-bs-theme="dark"] .btn-close {
  filter: invert(1) grayscale(1) brightness(1.6);
}

/* ---------- alerts & badges ---------- */
html .alert {
  border-radius: var(--yc-radius-lg) !important;
  border: 1px solid var(--yc-line) !important;
  border-left-width: 1px !important;
  background: var(--yc-sunken) !important;
  color: var(--yc-ink) !important;
  box-shadow: none !important;
}
html .alert-info,
html .alert-primary {
  border-color: rgba(var(--yc-link-rgb), 0.35) !important;
  background: rgba(var(--yc-link-rgb), 0.08) !important;
}
html .alert-success {
  border-color: rgba(var(--yc-green-rgb), 0.4) !important;
  background: rgba(var(--yc-green-rgb), 0.09) !important;
}
html .alert-danger {
  border-color: rgba(var(--yc-red-rgb), 0.45) !important;
  background: rgba(var(--yc-red-rgb), 0.09) !important;
  color: var(--yc-ink) !important;
}
html .alert-warning {
  border-color: rgba(var(--yc-amber-rgb), 0.45) !important;
  background: rgba(var(--yc-amber-rgb), 0.1) !important;
}
html .alert a {
  color: var(--yc-link);
}

html .badge {
  border-radius: 999px;
  font-weight: 600;
  letter-spacing: 0;
}
html .bg-primary {
  background-color: var(--yc-accent) !important;
}
html .progress {
  background: var(--yc-sunken);
  border-radius: 999px;
}

/* ---------- nav pills (settings, profile tabs) ---------- */
html .nav-pills .nav-link {
  color: var(--yc-muted);
  border-radius: var(--yc-radius) !important;
  font-weight: 600;
  text-align: left;
}
html .nav-pills .nav-link.active,
html .nav-pills .show > .nav-link {
  background: var(--yc-sunken) !important;
  color: var(--yc-ink) !important;
  box-shadow: inset 2px 0 0 var(--yc-ink);
}

/* ---------- footer ---------- */
html .footer,
[data-bs-theme="dark"] .footer {
  background: transparent !important;
  border-top: 1px solid var(--yc-line) !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}
html .footer .footer-text,
html .footer a {
  color: var(--yc-muted) !important;
  font-size: 0.8125rem;
}
html .footer a:hover {
  color: var(--yc-ink) !important;
}
html .footer .footer-content {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.5rem 1.5rem;
}
html .footer .footer-left,
html .footer .footer-right {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1.25rem;
}

/* ---------- scrollbars ---------- */
html ::-webkit-scrollbar-thumb {
  background: var(--yc-line-strong);
  border-radius: 999px;
}
html ::-webkit-scrollbar-track {
  background: transparent;
}

@media (prefers-reduced-motion: reduce) {
  html *,
  html *::before,
  html *::after {
    transition: none !important;
    animation: none !important;
    scroll-behavior: auto !important;
  }
}

/* ---------- sign in / register (fallback when OAuth is off) ---------- */
.auth {
  padding: 4rem 0 5rem;
}
html .auth-card {
  max-width: 30rem;
  margin: 0 auto;
}
html .auth-header {
  padding: 2rem 2rem 0 !important;
  border-bottom: 0 !important;
  text-align: left;
}
.auth-ctf {
  margin: 0 0 0.25rem;
  color: var(--yc-muted);
  font-weight: 600;
}
.auth-header .mb-3 {
  margin-bottom: 0.5rem !important;
}
.auth-header img {
  margin: 0 0 0.5rem !important;
}
.auth-title {
  margin: 0;
  font-size: 1.9rem;
  font-stretch: 125%;
  font-weight: 800;
  letter-spacing: -0.02em;
}
.auth-sub {
  margin: 0.35rem 0 0;
  color: var(--yc-muted);
}
html .auth .card-body {
  padding: 1.5rem 2rem 2rem !important;
}
html .auth .card-body .mb-4 {
  margin-bottom: 1.1rem !important;
}
html .auth .form-text {
  display: block;
  margin-top: 0.3rem;
  font-size: 0.8125rem;
}