:root {
  /* Override Bootstrap's theme colors */
  --bs-body-bg: #1e1e2c;
  /*#3c4777;*/
  --bs-body-color: #f0f0f0;

  --bs-primary: #226aff;
  /* shifted to strong blue - buttons, links */
  --bs-secondary: #244d9a;
  /* deep blue - accents */
  --bs-success: #00c896;
  /* teal - positive states */
  --bs-info: #4cc9f0;
  /* cyan blue - highlights */
  --bs-warning: #f4a261;
  /* warm gold - alerts */
  --bs-danger: #e63946;
  /* red - error, enemy UI */

  --bs-dark: #1f1f1f;
  --bs-light: #f8f9fa;

  /* Custom theme colors */
  --color-bg-dark: #121212;
  --color-bg-card: #1e1e2f;
  --color-border: #3a3a4d;
  --color-text-light: #eaeaea;
  --color-accent: #009be6;
  /**/
  --color-cta: #f72585;
  --color-nav: #2c2d3f;
  --color-hover: #99b0dd;

  /* Link & button styling */
  --bs-link-color: var(--bs-primary);
  --bs-link-hover-color: #7ea8ff;

  --navbar-height: 60px;

  --ui-bg: #0f1115;
  --ui-surface-1: #141820;
  --ui-surface-2: #171c26;
  --ui-border: rgba(255, 255, 255, 0.08);
  --ui-border-strong: rgba(255, 255, 255, 0.14);
  --ui-text: #e6edf3;
  --ui-muted: #9aa7b1;
  --ui-primary: #58a6ff;
  /* conservative cyan-blue used in upload */
  --ui-primary-strong: #2f81f7;
  /* stronger hover state */
  --ui-ring: rgba(88, 166, 255, 0.35);
  --ui-radius: 14px;
  --ui-radius-sm: 10px;
  --ui-shadow: 0 8px 30px rgba(0, 0, 0, 0.45);

  /* === Added consolidation variables (hex + rgb triplets) === */
  --white-hex: #ffffff;
  --black-hex: #000000;

  --accent-hex: #226aff;
  /* now matches blue */
  --accent-rgb: 34, 106, 255;

  --indigo-hex: #244d9a;
  /* deeper navy-ish blue */
  --indigo-rgb: 36, 77, 154;

  --accent-hover-hex: #1d58d6;
  /* darker blue for hover */
  --accent-hover-rgb: 29, 88, 214;

  --cyan-hex: #4cc9f0;
  --cyan-rgb: 76, 201, 240;

  --teal-hex: #00c896;
  --teal-rgb: 0, 200, 150;

  --gold-hex: #f4a261;
  --gold-rgb: 244, 162, 97;

  --danger-hex: #e63946;
  --danger-rgb: 230, 57, 70;

  --bg-deep-hex: #0b0f16;
  /* from rgba(11,15,22,*) */
  --bg-deep-rgb: 11, 15, 22;

  --nav-hex: #2c2d3f;
  /* equals --color-nav */
  --nav-rgb: 44, 45, 63;

  --tooltip-bg-hex: #12121c;
  /* rgb(18,18,28) */
  --tooltip-bg-rgb: 18, 18, 28;

  --muted-gray-hex: #adb5bd;
  /* reused across footer/subtitle etc */
  --muted-gray-rgb: 173, 181, 189;

  --caption-gray-hex: #bfc2cc;

  --link-glow-1: rgba(34, 106, 255, .75);
  --link-glow-2: rgba(34, 106, 255, .6);
  --link-glow-3: rgba(34, 106, 255, .5);

  --shadow-strong: rgba(0, 0, 0, 0.6);
  --shadow-med: rgba(0, 0, 0, 0.45);
  --shadow-soft: rgba(0, 0, 0, 0.35);
}

/*
html, body { height: 100%; }
*/

/* Set base fonts */
body {

  color: var(--bs-body-color);
  font-family: 'Titillium Web', sans-serif;
  font-weight: 400;
  line-height: 1.6;
  min-height: 100svh;
  /* handles mobile browser UI better */
  display: flex;
  flex-direction: column;
  /* padding-top: 55px; */
}

.navbar-brand:hover {
  color: var(--color-hover);
}

/* Headers and titles use Exo 2 for a tech/futuristic feel */
h1,
h2,
h3,
h4,
h5,
h6,
.navbar-brand {
  font-family: 'Exo 2', sans-serif;
  font-weight: 700;
  color: var(--color-accent);
  letter-spacing: 0.04em;
}

.navbar-brand {
  font-family: 'Exo 2';
  font-weight: 650;
  letter-spacing: -0.02em;
  font-size: 1.85rem;
  line-height: 1;
}


#bg {
  background: linear-gradient(180deg, rgba(var(--bg-deep-rgb), .80) 0%, rgba(var(--bg-deep-rgb), .88) 100%);
  min-height: 100vh;
  padding-top: 55px;
}

h5,
h6 {
  color: var(--bs-info);
}

/* Cards and panels background */
.card,
.dropdown-menu,
.modal-content {
  background-color: var(--color-bg-card);
  border: 1px solid var(--color-border);
  color: var(--color-text-light);
  border-radius: 6px;
  box-shadow: 0 0 12px rgba(var(--accent-rgb), 0.3);
}

/* Buttons */
.btn-primary {
  background-color: var(--bs-primary);
  border-color: var(--bs-primary);
  font-family: 'Exo 2', sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  transition: background-color 0.3s ease, box-shadow 0.3s ease;
  box-shadow: 0 0 8px var(--bs-primary);
}

.btn-primary:hover,
.btn-primary:focus {
  background-color: var(--accent-hover-hex);
  border-color: var(--accent-hover-hex);
  box-shadow: 0 0 16px var(--bs-primary);
  outline: none;
}


/* Links */
a,
a.nav-link {
  color: var(--bs-link-color);
  font-weight: 600;
  transition: color 0.25s ease, text-shadow 0.25s ease;
  text-decoration: none;
}

a:hover,
a:focus {
  color: var(--bs-link-hover-color);
  text-shadow: 0 0 6px var(--bs-link-hover-color);
  outline: none;
}

/* Navbar */
.navbar {
  background-color: rgba(var(--nav-rgb), .55) !important;
  /* background: linear-gradient(180deg, rgba(var(--bg-deep-rgb), .7) 0%, rgba(var(--bg-deep-rgb), .88) 100%); */
  backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--color-border);
  box-shadow: 0 2px 12px rgba(27, 20, 73, 0.8);
}

@media (min-width: 992px) {
  .navbar-nav.mx-auto {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
  }
}

/* Nav links: cyber underline + divider rhythm */
.navbar .nav-link {
  position: relative;
  color: rgba(255, 255, 255, 0.8);
  font-weight: 550;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: .5rem .9rem;
  transition: color 140ms ease;
}

.navbar .nav-link:hover,
.navbar .nav-link:focus {
  color: #fff;
  outline: none;
}

/* Neon underline */
.navbar .nav-link::before {
  content: "";
  position: absolute;
  left: 10px;
  right: 13px;
  bottom: .35rem;
  height: 2.5px;
  background: linear-gradient(90deg, var(--bs-primary), var(--bs-info));
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 180ms ease;
  border-radius: 2px;
  opacity: .9;
}

.navbar .nav-link.dropdown-toggle:before {
  right: 31px;
}

.nav-link:focus-visible {
  box-shadow: none;
}

.navbar .nav-link:hover::before,
.navbar .nav-link:not(.dropdown-toggle):focus::before,
.navbar .nav-link.dropdown-toggle.show:focus::before,
.navbar .nav-link.active::before {
  transform: scaleX(1);
}

.navbar .nav-link.dropdown-toggle:not(.show):focus {
  text-shadow: none;
}

.navbar .nav-link.dropdown-toggle:not(.show):focus:hover {
  text-shadow: 0 0 6px var(--bs-link-hover-color);
}

/* Active state tint */
.navbar .nav-link.active {
  color: #fff;
  text-shadow: 0 0 8px rgba(var(--accent-rgb), 0.35);
}

/* Optional: compact dropdown look to match navbar glass */
.navbar .dropdown-menu {
  backdrop-filter: blur(6px);
  background: rgba(30, 30, 47, 0.92);
  border: 1px solid rgba(var(--accent-rgb), 0.35);
  box-shadow: 0 8px 24px var(--shadow-med);
}

.navbar-toggler {
  /* border-color: var(--color-accent); */
  border: none;
  padding-left: 5px;
  padding-right: 5px;
}

.navbar-toggler-icon {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='%23009be6' stroke-width='3' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
}

.navbar-toggler {
  transition: transform .25s ease, opacity .25s ease, background-color .25s ease;
}

.navbar-toggler:hover {
  transform: scale(1.1);
  /* subtle zoom */
  opacity: 0.85;
  /* slight fade */
  background-color: rgba(var(--accent-rgb), .25);
  /* light purple tint */
}

.navbar-toggler {
  transition: transform .25s ease, opacity .25s ease, background-color .25s ease;
}

.navbar-toggler:hover {
  transform: scale(1.1);
  /* grow on hover */
  opacity: 0.85;
  background-color: rgba(var(--accent-rgb), .1);
  /* subtle tint */
}

.navbar-toggler {
  transition: transform .25s ease, opacity .25s ease, background-color .25s ease;
}

/* Hover polish */
.navbar-toggler:hover {
  transform: scale(1.1);
  opacity: .85;
  background-color: rgba(var(--accent-rgb), .1);
}

/* Closed state (page load = false) */
.navbar-toggler[aria-expanded='false'] {
  transform: rotate(0deg) scale(1);
  background-color: transparent;
}

/* Open state (Bootstrap flips aria-expanded to true) */
.navbar-toggler[aria-expanded='true'] {
  transform: rotate(90deg);
  /* pick your effect */
  background-color: rgba(var(--accent-rgb), .2);
}

/* Optional: keyboard focus clarity without jitter */
.navbar-toggler:focus-visible {
  outline: 0;
  box-shadow: 0 0 0 .2rem rgba(var(--accent-rgb), .35);
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  .navbar-toggler {
    transition: none;
  }
}

@media (min-width: 992px) {
  .navbar .dropdown .dropdown-menu {
    display: block;
    /* always block so we can animate        */
    position: absolute;
    /* remove from document flow             */
    top: 100%;
    /* sit right below toggle                */
    left: 0;
    min-width: 10rem;
    /* Bootstrap default                     */
    margin-top: .125rem;
    /* small spacing from toggle             */

    /* Hidden state */
    opacity: 0;
    transform: translateY(8px) scale(.98);
    transform-origin: top center;
    visibility: hidden;
    pointer-events: none;

    transition:
      opacity .18s ease,
      transform .18s ease,
      visibility 0s linear .18s;
    z-index: 1000;

    box-shadow:
      0 10px 24px rgba(0, 0, 0, .18),
      0 4px 10px rgba(0, 0, 0, .10);
  }

  /* Show state */
  .navbar .dropdown.show>.dropdown-menu,
  .navbar .dropdown .dropdown-menu.show {
    opacity: 1;
    transform: translateY(0) scale(1);
    visibility: visible;
    pointer-events: auto;
    transition:
      opacity .18s cubic-bezier(.2, .7, .2, 1),
      transform .18s cubic-bezier(.2, .7, .2, 1),
      visibility 0s;
  }

  .navbar .nav-item.dropdown {
    position: relative;
  }

  .navbar .dropdown .dropdown-menu.dropdown-menu-end {
    right: 0;
    left: auto;
    /* critical for Firefox */
    transform-origin: top right;
    /* animate from the right edge */
  }

  .navbar .dropdown .dropdown-menu {
    max-width: min(92vw, 26rem);
    /* keep inside the screen */
    overflow-wrap: anywhere;
    /* wrap long text (emails, etc.) */
  }
}

@media (max-width: 991.98px) {
  .navbar .dropdown .dropdown-menu {
    position: static;
    display: block;
    /* keep in flow */
    overflow: hidden;
    /* clip while animating */

    /* closed state */
    height: 0;
    opacity: 0;
    transform: translateY(-4px);
    visibility: hidden;
    pointer-events: none;

    /* animate height + polish with opacity/translate */
    transition:
      height .26s cubic-bezier(.2, .7, .2, 1),
      opacity .22s ease,
      transform .22s ease,
      visibility 0s linear .26s;
    will-change: height, opacity, transform;
    padding: 0;
    white-space: normal;
  }

  .navbar-nav.mb-2 {
    margin-bottom: 0 !important;
  }

  .navbar .nav-link {
    width: fit-content;
  }

  /* open state uses the measured height via CSS var */
  .navbar .dropdown.show>.dropdown-menu,
  .navbar .dropdown .dropdown-menu.show {
    height: var(--dd-menu-h, auto);
    /* set by JS */
    opacity: 1;
    transform: translateY(0);
    visibility: visible;
    pointer-events: auto;
    transition:
      height .26s cubic-bezier(.2, .7, .2, 1),
      opacity .22s cubic-bezier(.2, .7, .2, 1),
      transform .22s cubic-bezier(.2, .7, .2, 1),
      visibility 0s;
  }

  .navbar-toggler:focus {
    box-shadow: none;
  }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {

  .navbar .dropdown .dropdown-menu,
  .navbar .dropdown.show>.dropdown-menu,
  .navbar .dropdown .dropdown-menu.show {
    transition: none !important;
    height: auto !important;
    opacity: 1 !important;
    transform: none !important;
    visibility: visible !important;
    pointer-events: auto !important;
  }
}

/* Drop directions (start/end) */
.navbar .dropstart .dropdown-menu {
  right: 100%;
  left: auto;
  top: 0;
  transform: translateX(-8px) scale(.98);
  transform-origin: center right;
}

.navbar .dropstart.show>.dropdown-menu,
.navbar .dropstart .dropdown-menu.show {
  transform: translateX(0) scale(1);
}

.navbar .dropend .dropdown-menu {
  left: 100%;
  top: 0;
  transform: translateX(8px) scale(.98);
  transform-origin: center left;
}

.navbar .dropend.show>.dropdown-menu,
.navbar .dropend .dropdown-menu.show {
  transform: translateX(0) scale(1);
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {

  .navbar .dropdown .dropdown-menu,
  .navbar .dropdown.show>.dropdown-menu,
  .navbar .dropdown .dropdown-menu.show {
    transition: none;
    transform: none;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }
}

.dropdown-item:hover,
.dropdown-item:focus {
  background-color: rgba(var(--accent-rgb), 0.25);
  /* purple tint */
  color: #fff;
  /* high contrast */
}

/* Form inputs */
.form-control {
  background-color: var(--color-bg-card);
  border: 1px solid var(--color-border);
  color: var(--color-text-light);
  font-family: 'Titillium Web', sans-serif;
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
}

.form-control:focus {
  border-color: var(--color-accent);
  box-shadow: 0 0 8px var(--color-accent);
  background-color: var(--color-bg-card);
  color: var(--color-text-light);
  outline: none;
}

/* Scrollbar (for webkit browsers) */
::-webkit-scrollbar {
  width: 10px;
}

::-webkit-scrollbar-track {
  background: var(--bs-body-bg);
}

::-webkit-scrollbar-thumb {
  background-color: var(--color-accent);
  border-radius: 5px;
  border: 2px solid var(--bs-body-bg);
}

/* === Tables (Modern + subtle game accent) === */
.table {
  color: var(--color-text-light);
  background-color: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: 6px;
  overflow: hidden;
  /* clip header/hover effects */
  box-shadow: 0 0 8px rgba(var(--accent-rgb), 0.15);
  margin-bottom: 0;
}

.table th,
.table td {
  color: var(--color-text-light);
  padding: 0.75rem 0.875rem;
  vertical-align: middle;
  border-top: 1px solid rgba(58, 58, 77, 0.5);
}

/* Header with soft brand gradient + thin accent line */
.table thead {
  background: linear-gradient(180deg,
      rgba(var(--accent-rgb), 0.10) 0%,
      rgba(var(--cyan-rgb), 0.06) 100%);
  color: var(--bs-light);
}

.table thead th {
  font-weight: 700;
  letter-spacing: 0.02em;
  border-top: 0;
  border-bottom: 1px solid rgba(58, 58, 77, 0.85);
  position: relative;
}

.table thead th::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 1px;
  background: linear-gradient(90deg,
      rgba(155, 93, 229, 0),
      rgba(var(--accent-rgb), 0.35),
      rgba(76, 201, 240, 0));
}

/* Zebra striping: subtle */
.table-striped>tbody>tr:nth-of-type(odd)>* {
  background-color: rgba(255, 255, 255, 0.02);
}

/* Hover: soft tint + hairline accent */
.table-hover tbody tr {
  transition: background-color 120ms ease, box-shadow 120ms ease;
}

.table-hover tbody tr:hover>* {
  background-color: rgba(var(--cyan-rgb), 0.06);
  box-shadow: inset 0 0 0 1px rgba(var(--accent-rgb), 0.2);
}

.table>:not(caption)>*>* {
  background-color: initial;
}

/* Bordered variant: quiet vertical rules */
.table-bordered,
.table-bordered> :not(caption)>* {
  border-width: 0;
}

.table-bordered> :not(caption)>*>* {
  border-right: 1px solid rgba(58, 58, 77, 0.45);
}

.table-bordered> :not(caption)>*>*:last-child {
  border-right: 0;
}

.tt-none {
  text-transform: none;
}

@media (max-width: 576px) {
  :root {
    --navbar-height: 48px;
  }

  /* optional mobile tweak */
}

.alert {
  border-radius: 6px;
  /* Tighter corners to match card */
  border: 1px solid var(--color-border);
  background: linear-gradient(180deg,
      rgba(255, 255, 255, 0.08),
      rgba(255, 255, 255, 0.03));
  color: var(--color-text);
  backdrop-filter: blur(4px);
  padding: 0.4rem 0.6rem;
  font-size: 0.875rem;
  line-height: 1.2;

  /* Smooth entrance */
  opacity: 0;
  transform: translateY(-6px) scale(0.995);
  filter: saturate(0.9);
  animation: alert_in 360ms cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
  will-change: transform, opacity, filter;
}

/* Close animation (add .fade-out before removing the node) */
.alert.fade-out {
  animation: alert_out 320ms cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
}

/* Type variants (keep subtle; rely on theme vars) */
.alert-success {
  background: rgba(0, 255, 127, 0.14);
  border-color: rgba(0, 255, 127, 0.36);
  color: #98ffe0;
}

.alert-danger {
  background: rgba(255, 60, 60, 0.14);
  border-color: rgba(255, 60, 60, 0.36);
  color: #ffc6c6;
}

.alert-warning {
  background: rgba(255, 165, 0, 0.14);
  border-color: rgba(255, 165, 0, 0.36);
  color: #ffe0b3;
}

.alert-info {
  background: rgba(125, 211, 252, 0.14);
  border-color: rgba(125, 211, 252, 0.36);
}

/* Smaller close button for compact look */
.alert .btn-close {
  filter: invert(1) grayscale(100%) brightness(200%);
  transform: scale(0.85);
  opacity: .75;
}

.alert .btn-close:hover {
  opacity: 1;
}

/* Keyframes with gentle easing & micro-contrast tweak */
@keyframes alert_in {
  0% {
    opacity: 0;
    transform: translateY(-6px) scale(0.995);
    filter: saturate(0.9);
  }

  60% {
    opacity: 1;
    transform: translateY(-1px) scale(1.000);
    filter: saturate(1.0);
  }

  100% {
    opacity: 1;
    transform: translateY(0) scale(1.000);
    filter: saturate(1.0);
  }
}

@keyframes alert_out {
  0% {
    opacity: 1;
    transform: translateY(0) scale(1.000);
    filter: saturate(1.0);
  }

  100% {
    opacity: 0;
    transform: translateY(-6px) scale(0.997);
    filter: saturate(0.85);
  }
}

/* Respect reduced motion preferences */
@media (prefers-reduced-motion: reduce) {

  .alert,
  .alert.fade-out {
    animation: none;
    opacity: 1;
    transform: none;
    filter: none;
  }
}

/* Prevent skill icon + name from breaking onto separate lines */
.skill-cell {
  white-space: nowrap;
}

.skill-icon {
  height: 28px;
  width: 28px;
  margin-right: 6px;
  vertical-align: middle;
  border-radius: 6px;
  padding: 2px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.02));
  box-shadow:
    0 0 0 1px rgba(var(--cyan-rgb), 0.25),
    0 0 8px rgba(var(--accent-rgb), 0.18);
  object-fit: contain;
  image-rendering: -webkit-optimize-contrast;
  image-rendering: crisp-edges;
  transition: transform 120ms ease, box-shadow 120ms ease;
}

.table tbody tr:hover .skill-icon {
  box-shadow:
    0 0 0 1px rgba(var(--cyan-rgb), 0.35),
    0 0 10px rgba(var(--accent-rgb), 0.28);
  transform: translateY(-4px);
}

@media (prefers-reduced-motion: reduce) {
  .skill-icon {
    transition: none;
  }

  .table tbody tr:hover .skill-icon {
    transform: none;
  }
}

/* Numeric columns: aligned for stats */
.table .text-end,
.table th.text-end {
  font-variant-numeric: tabular-nums;
}

/* Compact option */
.table.table-compact th,
.table.table-compact td {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}

/* Caption: understated, matches theme */
.table caption {
  caption-side: top;
  color: var(--caption-gray-hex);
  font-weight: 600;
  letter-spacing: 0.02em;
  margin-bottom: 0.25rem;
}

/* Responsive wrapper: same frame language as cards */
.table-responsive {
  border-radius: 6px;
  border: 1px solid var(--color-border);
  overflow: hidden;
}

/* Row highlight sweep */
.table.table-hover tbody tr {
  background-image: linear-gradient(90deg, rgba(var(--cyan-rgb), 0) 0%, rgba(var(--cyan-rgb), .06) 50%, rgba(var(--cyan-rgb), 0) 100%);
  background-size: 200% 100%;
  background-position: 100% 0;
  transition: background-position 300ms ease, box-shadow 120ms ease;
}

.table.table-hover tbody tr:hover {
  background-position: 0 0;
  box-shadow: inset 0 0 0 1px rgba(var(--accent-rgb), .2);
}

/* === Accordion Styling === */
.accordion-button {
  background-color: var(--color-bg-card);
  color: var(--color-text-light);
  font-family: 'Exo 2', sans-serif;
  font-weight: 600;
  position: relative;
  overflow: hidden;
  box-shadow: 0 0 8px rgba(var(--accent-rgb), 0.4);
  border: 1px solid var(--color-border);
  border-radius: 5px !important;
}

.accordion-button:not(.collapsed) {
  background-color: var(--color-bg-card);
  /* No color change on expand */
  color: var(--color-text-light);
  box-shadow: inset 0 0 12px rgba(var(--accent-rgb), 0.5);
}

.accordion-button::after {
  filter: invert(80%) brightness(1.5);
}

.accordion-button .progress-bg {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  background-image: linear-gradient(90deg,
      rgba(var(--accent-rgb), 0.15),
      rgba(var(--cyan-rgb), 0.15));
  z-index: 0;
  transition: width 300ms ease, opacity 200ms ease;
  opacity: .85;
}

.accordion-button:hover .progress-bg {
  opacity: 1;
}

.accordion-button span {
  position: relative;
  z-index: 1;
}

.accordion-item {
  border: none;
  border-radius: 5px !important;
  margin-bottom: .25rem;
}

/* Make all inline spans inside the accordion button center their contents */
.accordion-button>span {
  display: inline-flex;
  align-items: center;
}

/* Uploader/death icon group spacing */
.accordion-button>.ms-2.me-2 {
  gap: 6px;
}

/* Vertically align Bootstrap icons with text */
.accordion-button i.bi {
  display: inline-block;
  line-height: 1;
  font-size: 1rem;
  /* match text size */
  vertical-align: -0.125em;
  /* nudge to baseline like BI recommends */
}

/* Ensure the DPS block also centers with the row */
.accordion-button>.ms-auto.text-end {
  display: inline-flex;
  align-items: center;
}

.accordion-collapse {
  transition: height 220ms ease;
}

/* Guild name display */
.guild-name {
  min-height: 1.2em;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

/* Default icon (no guild) */
.guild-name::before {
  content: "\f4e1";
  /* Bootstrap 'person' icon */
  font-family: "Bootstrap-icons";
  font-size: 0.9em;
  color: rgba(255, 255, 255, 0.4);
  line-height: 1;
}

/* Guilded players: use multi-person icon */
.guild-name.has-guild::before {
  content: "\F4D0";
  /* Bootstrap 'people' icon */
  color: rgba(255, 255, 255, 0.6);
}

/* Placeholder if no guild */
.guild-name.no-guild::after {
  content: "No Guild";
  font-style: italic;
  color: rgba(255, 255, 255, 0.4);
  font-weight: 400;
  letter-spacing: 0.02em;
}

/* Server name display */
.server-name {
  min-height: 1.2em;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

/* Always show server icon before text */
.server-name::before {
  content: "\f882";
  /* Bootstrap 'server' icon (globe) */
  font-family: "Bootstrap-icons";
  font-size: 0.9em;
  color: rgba(255, 255, 255, 0.6);
  line-height: 1;
}

/* Tooltip base */
.tooltip {
  opacity: 0;
  transition: opacity 150ms ease;
}

.tooltip.show {
  opacity: 1;
}

.tooltip-inner {
  background-color: var(--tooltip-bg-hex);
  /* fully opaque */
  color: var(--bs-light);
  font-size: 0.85rem;
  /* slightly larger text */
  font-weight: 500;
  padding: 5px 10px;
  border: 1px solid rgba(var(--accent-rgb), 0.5);
  /* subtle purple border */
  border-radius: 6px;
  box-shadow: 0 0 6px rgba(var(--accent-rgb), 0.3),
    0 0 3px rgba(var(--cyan-rgb), 0.25);
  white-space: normal;
  /* allow wrapping */
  word-break: break-word;
  /* break long words/IDs */
}

/* Tooltip arrow matches border/bg */
.tooltip.bs-tooltip-top .tooltip-arrow::before {
  border-top-color: var(--tooltip-bg-hex);
}

.tooltip.bs-tooltip-bottom .tooltip-arrow::before {
  border-bottom-color: var(--tooltip-bg-hex);
}

.tooltip.bs-tooltip-start .tooltip-arrow::before {
  border-left-color: var(--tooltip-bg-hex);
}

.tooltip.bs-tooltip-end .tooltip-arrow::before {
  border-right-color: var(--tooltip-bg-hex);
}

/* Tooltip name highlight (used by .buff-tooltip-name span) */
.tooltip .buff-tooltip-name {
  font-weight: 800;
  color: var(--bs-info);
  letter-spacing: 0.3px;
}

.site-footer {
  margin-top: auto;
}

/* === Buff chips: vertical, compact, equal width === */
.buff-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(55px, max-content));
  /* fit to chip width */
  gap: 6px 8px;
  /* reduced gap for less empty space */
  align-items: start;
  justify-content: start;
  /* pack chips to the left */
  justify-items: start;
  /* align each chip to the left */
}

.buff-item {
  position: relative;
  display: inline-flex;
  flex-direction: column;
  /* icon above uptime */
  align-items: center;
  /* center horizontally inside the chip */
  justify-content: flex-start;
  /* content starts at top */
  width: max-content;
  /* shrink chip to fit icon + uptime */
  box-sizing: border-box;
  /* include border/padding in width */
  gap: 2px;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  margin-bottom: 1rem;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.02));
  box-shadow:
    0 0 0 1px rgba(var(--cyan-rgb), 0.25),
    0 0 8px rgba(var(--accent-rgb), 0.18),
    inset 0 0 0 1px rgba(var(--cyan-rgb), 0.10);
  /* matches skill-icon frame */
  transition: transform 120ms ease, box-shadow 120ms ease, border-color 120ms ease;
  min-width: 0;
}

.buff-item:hover {
  transform: translateY(-6px);
  box-shadow:
    0 0 0 1px rgba(var(--cyan-rgb), 0.35),
    0 0 10px rgba(var(--accent-rgb), 0.28),
    inset 0 0 0 1px rgba(var(--cyan-rgb), 0.16);
  border-color: rgba(var(--accent-rgb), 0.45);
}

/* Icon frame — match skill-icon */
.buff-icon {
  width: 48px;
  height: 48px;
  border-radius: 6px 6px 0 0;
  object-fit: contain;
  image-rendering: crisp-edges;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.02));
  box-shadow:
    0 0 0 1px rgba(var(--cyan-rgb), 0.25),
    0 0 8px rgba(var(--accent-rgb), 0.18);
}

/* Fallback frame if icon is missing */
.buff-icon.no-icon {
  background: repeating-linear-gradient(45deg, rgba(var(--cyan-rgb), 0.12), rgba(var(--cyan-rgb), 0.12) 6px, rgba(var(--accent-rgb), 0.12) 6px, rgba(var(--accent-rgb), 0.12) 12px);
}

/* Icon wrapper to enable stack badge and optional darkening */
.buff-icon-wrap {
  position: relative;
  display: inline-block;
  border-radius: 6px 6px 0 0;
  overflow: hidden;
  line-height: 0;
}

/* Slight darkening overlay when stack badge is present for contrast */
.buff-icon-wrap.has-stack::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.18), rgba(0, 0, 0, 0.28));
  pointer-events: none;
}

/* Stack badge over the icon corner */
.buff-stack-badge {
  position: absolute;
  right: 0;
  bottom: 0;
  transform: translate(15%, 15%);
  min-width: 24px;
  height: 24px;
  padding: 0 5px;
  border-radius: 12px;
  background: rgba(0, 0, 0, 0.65);
  border: 1px solid rgba(255, 255, 255, 0.25);
  font-size: 16px;
  font-weight: 600;
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-shadow: 0 0 3px rgba(0, 0, 0, 0.8), 0 1px 0 rgba(0, 0, 0, 0.6);
  font-variant-numeric: tabular-nums;
  pointer-events: none;
}

/* Uptime sits under the icon */
.buff-uptime {
  font-size: 1rem;
  font-weight: 600;
  line-height: 1;
  margin: 5px 0;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  text-align: center;
}

/* Clickable headers */
.table.table-sortable thead th {
  cursor: pointer;
  white-space: nowrap;
}

.table.table-sortable thead th[data-sortable="false"] {
  cursor: default;
}

/* Keep text + arrow aligned as one inline unit */
.table.table-sortable thead th .sortable-label {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  /* space between text and arrow */
}

/* Direction indicators appended after the label text */
.table.table-sortable thead th .sortable-label::after {
  content: "▲";
  /* placeholder arrow shape */
  visibility: hidden;
  /* hide it visually but keep its space */
  width: 0.8em;
  /* reserve space so text doesn't shift */
  font-size: 0.75em;
  opacity: 0;
  /* fully transparent */
}

/* When sorting ascending */
.table.table-sortable thead th[data-sort-dir="asc"] .sortable-label::after {
  content: "▲";
  visibility: visible;
  opacity: 0.8;
}

/* When sorting descending */
.table.table-sortable thead th[data-sort-dir="desc"] .sortable-label::after {
  content: "▼";
  visibility: visible;
  opacity: 0.8;
}

.btn.btn-accent {
  --btn-accent: var(--color-accent);
  --btn-accent-light: color-mix(in srgb, var(--color-accent) 75%, white);
  /* lighter, but still saturated */
  --btn-accent-active: color-mix(in srgb, var(--color-accent) 65%, white);
  /* a bit lighter for active */
  --btn-ink-dark: #0b1220;
  --btn-ink-light: #ffffff;

  background: var(--btn-accent);
  color: var(--btn-ink-dark);
  /* default to dark text */
  border: none;
  font-weight: 700;
  transition: background-color 0.18s ease, transform 0.16s ease, box-shadow 0.18s ease, color 0.18s ease;
  outline: none;
  box-shadow: none;
}

.btn.btn-accent:hover {
  background: var(--btn-accent-light);
  color: var(--btn-ink-dark);
  /* still dark text here */
  transform: translateY(-1px);
}

.btn.btn-accent:focus-visible,
.btn.btn-accent:focus-within {
  background: var(--btn-accent-active);
  color: var(--btn-ink-dark);
  /* keep dark text */
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.75),
    0 0 0 3px color-mix(in srgb, var(--color-accent) 35%, white);
  transform: translateY(-1px);
}

.btn.btn-accent:active {
  background: var(--btn-accent-active);
  transform: translateY(0);
}

/* If the accent is naturally very light, force light text for legibility */
@media (prefers-color-scheme: dark) {

  .btn.btn-accent[data-light-bg="true"],
  .btn.btn-accent.light-text {
    color: var(--btn-ink-light);
  }
}

.auth-wrap {
  min-height: 75vh;
  display: grid;
  place-items: center;
  padding: 12px;
  /* reduced from 24px */
}

.auth-card .form-text {
  color: var(--color-text);
  opacity: .9;
}

/* Checkboxes: show a real checkmark on dark themes */
.form-check-input {
  background-color: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--color-border);
}

.form-check-input:focus {
  border-color: var(--color-accent);
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, .6),
    0 0 0 3px color-mix(in srgb, var(--color-accent) 30%, white);
}

.form-check-input:checked {
  background-color: var(--color-accent);
  border-color: var(--color-accent);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%23fff' d='M6.173 12.727a1 1 0 0 1-1.414 0L1.646 9.614a1 1 0 1 1 1.414-1.414L5.466 10.6l7.474-7.474a1 1 0 1 1 1.414 1.414z'/%3E%3C/svg%3E");
  background-size: 70% 70%;
  background-position: center;
  background-repeat: no-repeat;
}

.form-control.is-invalid {
  border-color: #ff6b6b;
  /* High-contrast      */
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, .6),
    0 0 0 3px rgba(255, 107, 107, .3);
  /* Subtle glow        */
}

.captcha-center {
  display: flex;
  justify-content: center;
}

.form-text {
  color: var(--color-text);
  opacity: 0.8;
}

/* Base tweaks */
main,
header.donate,
.modal-content {
  color: var(--donate-text);
}

.text-secondary.small,
.footer-note {
  color: var(--donate-muted) !important;
}

.donate,
.modal-content,
.card.bg-dark.border-secondary-subtle,
.tier-card {
  color: var(--ui-text);
  border-radius: var(--ui-radius);
}

.text-secondary.small,
.footer-note {
  color: var(--ui-muted) !important;
}

/* ---- Hero (same gradient language as upload header) ---- */
.donate {
  background:
    radial-gradient(900px 500px at 50% -20%, #1a2230 0%, var(--ui-bg) 60%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.02), rgba(255, 255, 255, 0));
  border-bottom: 1px solid var(--ui-border);
  padding: 2.5rem 1rem;
  position: relative;
  overflow: hidden;
}

.donate::after {
  /* very subtle moving haze (kept minimal like upload) */
  content: '';
  position: absolute;
  inset: -30% -10% auto -10%;
  height: 240%;
  background: conic-gradient(from 180deg at 50% 50%,
      rgba(88, 166, 255, 0.10), rgba(255, 255, 255, 0.04), rgba(88, 166, 255, 0.10));
  filter: blur(80px);
  opacity: .25;
  animation: donate-rotate 40s linear infinite;
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  .donate::after {
    animation: none;
  }
}

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

/* ---- Cards (match upload’s cards: matte + hairline border) ---- */
.tier-card {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.02), rgba(255, 255, 255, 0)) var(--ui-surface-2);
  border: 1px solid var(--ui-border);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, filter .18s ease;
  position: relative;
  overflow: hidden;
  height: 100%;
}

.tier-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--ui-shadow);
  border-color: var(--ui-border-strong);
  filter: saturate(1.04);
}

.tier-card.selected {
  outline: 2px solid var(--ui-primary);
  box-shadow: 0 0 0 4px var(--ui-ring), var(--ui-shadow);
  border-color: var(--ui-primary);
}

/* Small decorative corner highlight (same accent logic as upload) */
.tier-card::before {
  content: '';
  position: absolute;
  top: -1px;
  left: -1px;
  width: 28%;
  height: 28%;
  background: radial-gradient(120px 120px at 0% 0%, rgba(88, 166, 255, 0.18), transparent 60%);
  pointer-events: none;
}

/* ---- Badges (clean, readable, no harsh neon) ---- */
.price-badge {
  background: linear-gradient(135deg, var(--ui-primary), var(--ui-primary-strong));
  color: #07131a;
  border: 0;
  border-radius: 999px;
  padding: .25rem .65rem;
  font-weight: 600;
  letter-spacing: .2px;
}

.bonus-badge {
  background: linear-gradient(135deg, #9c7cff, #6a53f7);
  color: #fff;
  border: 0;
  border-radius: 999px;
  padding: .2rem .6rem;
  font-weight: 600;
  box-shadow: 0 0 10px rgba(154, 124, 255, 0.28);
}

/* Gentle coin nudge like upload’s icon micro-motion */
.tier-card:hover .bi-coin {
  transform: translateY(-1px);
  transition: transform .18s ease;
}

/* ---- Summary panel (glass-lite surface) ---- */
.card.bg-dark.border-secondary-subtle {
  background: linear-gradient(180deg, rgba(20, 24, 32, 0.92), rgba(18, 22, 30, 0.92)) !important;
  border-color: var(--ui-border) !important;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

/* Total number glow (same intensity as upload emphasis) */
#selected_total {
  text-shadow: 0 0 10px rgba(88, 166, 255, 0.22);
}

/* ---- Buttons (shared primary look) ---- */
#checkout_btn,
#confirm_buy_btn {
  background: linear-gradient(135deg, var(--ui-primary-strong), var(--ui-primary));
  border: 1px solid rgba(88, 166, 255, 0.25);
  border-radius: var(--ui-radius-sm);
  box-shadow: 0 4px 16px rgba(47, 129, 247, 0.32);
  transition: transform .14s ease, box-shadow .18s ease, filter .18s ease;
}

#checkout_btn:hover,
#confirm_buy_btn:hover {
  transform: translateY(-2px);
  filter: saturate(1.06);
  box-shadow: 0 8px 22px rgba(47, 129, 247, 0.42);
}

#checkout_btn:focus-visible,
#confirm_buy_btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--ui-ring) !important;
}

/* ---- Modal (same glass + border cadence as upload) ---- */
.modal-content {
  background: linear-gradient(180deg, rgba(18, 22, 30, 0.96), rgba(16, 20, 28, 0.96));
  border: 1px solid var(--ui-border);
  box-shadow: 0 14px 50px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.03);
}

.modal-header,
.modal-footer {
  border-color: var(--ui-border) !important;
}

/* ---- Layout breathing + mobile tuning ---- */
#tiers_grid {
  margin-top: .25rem;
}

#tiers_grid .col-12 {
  margin-bottom: .25rem;
}

/* Ensure consistent focus ring across clickable cards (a11y parity with upload) */
.tier-card:focus-visible {
  outline: 2px solid var(--ui-primary);
  box-shadow: 0 0 0 4px var(--ui-ring);
}

/* ---- Reduced motion parity ---- */
@media (prefers-reduced-motion: reduce) {

  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
  }
}

/* Tier icons — same style language as buff icons in upload page */
.tier-icon {
  width: 48px;
  height: 48px;
  object-fit: contain;
  image-rendering: crisp-edges;
  /* Keeps pixel art sharp if needed */
  flex-shrink: 0;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.6));
  border-radius: 6px;
}

/* Slight hover pop like buffs */
.tier-card:hover .tier-icon {
  transform: scale(1.15);
  transition: transform 0.25s ease;
}



/* Footer note text */
.text-secondary.small,
.footer-note {
  color: var(--muted-gray-hex) !important;
  font-size: 0.9rem;
}

body.modal-open {
  padding-right: 0 !important;
}

/* Fixed headers also get compensation; neutralize it */
body.modal-open .fixed-top,
body.modal-open .sticky-top,
body.modal-open .is-fixed,
body.modal-open .navbar,
body.modal-open [data-bs-padding-right] {
  padding-right: 0 !important;
  /* Nav stays put */
}

/* (Optional) RTL parity */
[dir='rtl'] body.modal-open {
  padding-left: 0 !important;
}

[dir='rtl'] body.modal-open .fixed-top,
[dir='rtl'] body.modal-open .sticky-top,
[dir='rtl'] body.modal-open .is-fixed,
[dir='rtl'] body.modal-open .navbar,
[dir='rtl'] body.modal-open [data-bs-padding-right] {
  padding-left: 0 !important;
}


/* Balance card look to match rest of page */
.balance-card {
  border-radius: var(--ui-radius, 14px);
  background: linear-gradient(180deg, rgba(20, 24, 32, 0.92), rgba(18, 22, 30, 0.92)) !important;
  border-color: var(--ui-border, rgba(255, 255, 255, 0.08)) !important;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.nav-link.glow-link {
  position: relative;
  color: #fff;
  /* base text color */
  text-shadow: 0 0 6px var(--link-glow-1),
    /* inner glow */
    0 0 12px var(--link-glow-2),
    /* outer glow */
    0 0 20px var(--link-glow-3);
  /* subtle halo */
  transition: color .25s ease, text-shadow .25s ease;
}

/* On hover/focus: intensify */
.nav-link.glow-link:hover,
.nav-link.glow-link:focus {
  color: #e0f0ff;
  /* brighter shade */
  text-shadow: 0 0 8px rgba(var(--accent-rgb), .9),
    0 0 16px rgba(var(--accent-rgb), .8),
    0 0 28px rgba(var(--accent-rgb), .7);
}

.navbar .brand-subtitle {
  font-size: 1rem;
  /* smaller */
  color: var(--muted-gray-hex);
  /* muted gray */
  font-weight: 400;
  /* lighter so it doesn’t compete with OSTO */
  letter-spacing: 0.5px;
  /* optional spacing */
  font-family: 'Exo 2';
}

.navbar-brand img {
  height: 40px;
  /* make logo bigger */
  width: auto;
  /* preserve aspect ratio */
  margin-top: -6px;
  /* pull it up a bit if it overflows */
  margin-bottom: -4px;
  /* pull down to prevent navbar growth */
}

#account_balance_value {
  line-height: 1.1;
  text-shadow: 0 0 10px rgba(88, 166, 255, 0.22);
}

/* Centered, stacked alert container (no page shift) */
.global-alert-container {
  position: fixed;
  top: 70px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1080;
  max-width: 600px;
  width: min(90%, 600px);
  pointer-events: none;
  /* Let clicks fall through behind, except the alert itself */
}

#global-alert-container .alert {
  position: relative;
  /* Ensure .btn-close positions correctly */
  pointer-events: auto;
  /* Keep the alert interactive */
  white-space: normal;
  /* Allow multi-line wrap */
  word-wrap: break-word;
  /* Wrap long words */
  overflow-wrap: anywhere;
  /* Break long unbroken strings/URLs */
  box-shadow: 0 4px 12px var(--shadow-soft);
}

/* Reserve space for the close button so text never overlaps it */
#global-alert-container .alert-dismissible {
  padding-left: 3rem;
  padding-right: 3rem;
}

#global-alert-container .alert .alert-content {
  display: block;
  margin-right: 2.5rem;
  /* Extra buffer for the close button area */
}

#global-alert-container .alert .btn-close {
  position: absolute;
  /* Make sure it sits in the top-right corner */
  top: .5rem;
  right: .75rem;
  padding-top: 0px;
  margin-top: -10px;
  padding-right: 0;
  margin-right: -5px;
}

/* Map glow color to alert type */
#global-alert-container .alert-success {
  --alert-glow: rgba(var(--bs-success-rgb), .70);
  --alert-glow-dim: rgba(var(--bs-success-rgb), .20);
}

#global-alert-container .alert-danger {
  --alert-glow: rgba(var(--bs-danger-rgb), .70);
  --alert-glow-dim: rgba(var(--bs-danger-rgb), .20);
}

#global-alert-container .alert-warning {
  --alert-glow: rgba(var(--bs-warning-rgb), .80);
  --alert-glow-dim: rgba(var(--bs-warning-rgb), .30);
}

#global-alert-container .alert-info {
  --alert-glow: rgba(var(--bs-info-rgb), .70);
  --alert-glow-dim: rgba(var(--bs-info-rgb), .20);
}

#global-alert-container .alert-primary {
  --alert-glow: rgba(var(--bs-primary-rgb), .70);
  --alert-glow-dim: rgba(var(--bs-primary-rgb), .20);
}

#global-alert-container .alert-secondary {
  --alert-glow: rgba(var(--bs-secondary-rgb), .70);
  --alert-glow-dim: rgba(var(--bs-secondary-rgb), .20);
}

#global-alert-container .alert-dark {
  --alert-glow: rgba(var(--bs-dark-rgb), .70);
  --alert-glow-dim: rgba(var(--bs-dark-rgb), .25);
}

#global-alert-container .alert-light {
  --alert-glow: rgba(var(--bs-light-rgb), .80);
  --alert-glow-dim: rgba(var(--bs-light-rgb), .50);
}


/* --- Jitter-free alerts: transform+opacity only (no layout animation) ---- */
#global-alert-container .alert {
  --alert-glow: rgba(var(--bs-primary-rgb), .65);
  --alert-glow-dim: rgba(var(--bs-primary-rgb), .15);
  filter: drop-shadow(0 6px 16px rgba(0, 0, 0, .25));
  box-shadow:
    0 0 0px 0 var(--alert-glow-dim),
    0 0 16px 0 var(--alert-glow-dim);
}

/* GPU-friendly transition only; define identical properties in both states */
#global-alert-container .alert.fade {
  opacity: 0;
  transform: translateY(-2px) scaleY(.98) translateZ(0);
  /* tiny lift to start */
  will-change: opacity, transform;
  backface-visibility: hidden;

  /* Transition strictly on compositor properties */
  transition:
    opacity .26s linear,
    transform .26s linear;

  /* If we're not shown, ensure no keyframe animation runs (prevents flash) */
  animation: none !important;
}

/* Shown state: the *only* differences are opacity/transform */
#global-alert-container .alert.fade.show {
  opacity: 1;
  transform: translateY(0) scaleY(1) translateZ(0);

  /* Optional: single pop/glow on open — kept subtle to avoid fighting close */
  animation:
    alert-pop 120ms ease-out both,
    alert-glow-once 480ms ease-in-out 30ms 1 both;
}

/* When closing, Bootstrap removes .show -> we land back on .fade styles.
   No layout property transitions, so there’s no reflow jitter, and we also
   hard-stop any animation to avoid a 1-frame flash. */
#global-alert-container .alert.fade:not(.show) {
  animation: none !important;
  /* stop pop/glow instantly */
}

/* Keep close button clear of text (layout-only; not animated) */
#global-alert-container .alert-dismissible {
  padding-right: 3rem;
}

#global-alert-container .alert .alert-content {
  margin-right: 2.5rem;
}

/* One gentle pop + glow for the opening only */
@keyframes alert-pop {
  0% {
    opacity: 0;
    transform: translateY(-6px) scale(.96);
    filter: brightness(.95) saturate(.95);
  }

  60% {
    opacity: .96;
    transform: translateY(-1px) scale(1.01);
    filter: none;
  }

  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes alert-glow-once {
  0% {
    box-shadow: 0 0 0px 0 var(--alert-glow-dim), 0 0 12px 0 var(--alert-glow-dim);
  }

  45% {
    box-shadow: 0 0 10px 2px var(--alert-glow), 0 0 22px 6px var(--alert-glow);
  }

  100% {
    box-shadow: 0 0 0px 0 var(--alert-glow-dim), 0 0 12px 0 var(--alert-glow-dim);
  }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  #global-alert-container .alert.fade {
    transition: none;
  }

  #global-alert-container .alert.fade.show {
    animation: none;
  }
}


.btn-close:focus {
  box-shadow: none;
}

/* IMPORTANT: Restore per-type colors AND increase opacity for readability
   (uses Bootstrap 5’s CSS variables so your alert-* classes still work) */
#global-alert-container .alert {
  background-color: var(--bs-alert-bg) !important;
  /* color: var(--bs-alert-color) !important; */
  border-color: var(--bs-alert-border-color) !important;
}

/* Make the subtle backgrounds less transparent while keeping type hues */
#global-alert-container .alert-primary {
  --bs-alert-bg: rgba(var(--bs-primary-rgb), .40);
  --bs-alert-border-color: rgba(var(--bs-primary-rgb), .65);
}

#global-alert-container .alert-secondary {
  --bs-alert-bg: rgba(var(--bs-secondary-rgb), .40);
  --bs-alert-border-color: rgba(var(--bs-secondary-rgb), .65);
}

#global-alert-container .alert-success {
  --bs-alert-bg: rgba(var(--bs-success-rgb), .40);
  --bs-alert-border-color: rgba(var(--bs-success-rgb), .65);
}

#global-alert-container .alert-danger {
  --bs-alert-bg: rgba(var(--bs-danger-rgb), .40);
  --bs-alert-border-color: rgba(var(--bs-danger-rgb), .65);
}

#global-alert-container .alert-warning {
  --bs-alert-bg: rgba(var(--bs-warning-rgb), .35);
  --bs-alert-border-color: rgba(var(--bs-warning-rgb), .50);
  --bs-alert-color: #3b2f05;
}

#global-alert-container .alert-info {
  --bs-alert-bg: rgba(var(--bs-info-rgb), .30);
  --bs-alert-border-color: rgba(var(--bs-info-rgb), .45);
}

#global-alert-container .alert-light {
  --bs-alert-bg: rgba(var(--bs-light-rgb), .85);
  --bs-alert-border-color: rgba(var(--bs-light-rgb), .95);
}

#global-alert-container .alert-dark {
  --bs-alert-bg: rgba(var(--bs-dark-rgb), .85);
  --bs-alert-border-color: rgba(var(--bs-dark-rgb), .95);
  --bs-alert-color: #fff;
}

/* Keep the close button visible on darker variants without hard inverts */
#global-alert-container .alert-dark .btn-close {
  filter: invert(1) grayscale(100%) brightness(200%);
}


@media (min-width: 768px) {
  .auth-wrap {
    padding: 24px;
  }
}

.auth-card {
  max-width: 520px;
  width: 100%;
  background: var(--color-surface);
  border-radius: 16px;
  border: 1px solid var(--color-border);
}

.auth-header {
  padding: 20px 20px 0;
}

.nav-tabs {
  border-color: var(--color-border);
}

.nav-tabs .nav-link {
  color: var(--color-text);
  border: none;
}

.nav-tabs .nav-link.active {
  color: #000;
  background: var(--color-accent);
  font-weight: 700;
}

.form-control,
.form-check-input {
  background: rgba(255, 255, 255, .05);
  color: var(--color-text);
  border: 1px solid var(--color-border);
}

.form-control::placeholder {
  color: #cfd3dc;
  opacity: .75;
}

.btn-accent {
  background: var(--color-accent);
  color: #000;
  font-weight: 700;
}

.tab-content {
  padding: 1.5rem;
}

.footer {
  color: #aab3c2;
  font-size: .9rem;
}


/* === Prevent Scrollbar Jitter on Accordion Expand === */
html {
  overflow-y: scroll;
  /* Always reserve space for scrollbar */
}


#toggle_all.btn {
  background-color: rgba(255, 255, 255, 0.04);
  /* subtle tint */
  border: 1px solid rgba(var(--accent-rgb), 0.35);
  /* themed thin border */
  color: var(--bs-light);
  padding: 0.3rem 0.5rem;
  border-radius: 6px;
  /* matches card/accordion rounding */
  backdrop-filter: blur(3px);
  /* subtle glass effect */
  box-shadow: 0 0 6px rgba(var(--accent-rgb), 0.15);
  transition: background-color 150ms ease, border-color 150ms ease, color 150ms ease, box-shadow 150ms ease;
}

#toggle_all.btn:hover {
  background-color: rgba(var(--cyan-rgb), 0.12);
  /* light cyan tint */
  border-color: rgba(var(--accent-rgb), 0.6);
  color: var(--bs-info);
  box-shadow: 0 0 10px rgba(var(--accent-rgb), 0.3);
}

#toggle_all.btn:active {
  background-color: rgba(var(--cyan-rgb), 0.18);
  border-color: rgba(var(--accent-rgb), 0.8);
  box-shadow: 0 0 8px rgba(var(--accent-rgb), 0.25) inset;
}

#toggle_all i {
  font-size: 1.1rem;
  vertical-align: middle;
  line-height: 1;
}

#content {
  flex: 1 0 auto;
}

@media (max-width: 768px) {
  #content {
    padding: .5rem !important;
    margin: .5rem .5rem .5rem .5rem !important;
  }
}