html {
  overflow: hidden;
  height: 100%;
}

body {
  background-color: #080c16;
  color: rgba(255,255,255,.92);
  font-family: "Poppins", sans-serif;
  overflow-x: hidden;
  overflow-y: auto;
  min-height: 100%;
  display: flex;
  flex-direction: column;
  height: 100%;
}

.navbar .nav-link {
  color: rgba(255,255,255,.92) !important;
  transition: color 0.3s;
}

.navbar {
  padding-top: 0.3rem;
  padding-bottom: 0.3rem;
}

.navbar .nav-link:hover,
.navbar .nav-link.active {
  color: #60a5fa !important;
}

.hero-logo {
  background-color: #050912;
  padding-top: 10px;
  padding-bottom: 10px;
  margin-bottom: 0;
}

.logo-img {
  width: auto;
  height: 60px;
  /* Justér denne værdi for at gøre det lidt mindre */
  max-height: 100%;
  opacity: 0.95;
  filter: drop-shadow(0 0 10px #000);
  object-fit: contain;
}

.footer {
  padding: 30px 0;
}

.fade-in {
  animation: fadeIn 1.2s ease-in-out both;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.nav-link.text-warning:hover {
  text-decoration: underline;
}

@media (max-width: 768px) {
  nav.position-sticky {
    position: static !important;
  }
}

html {
  scroll-behavior: smooth;
}

body {
  scroll-behavior: smooth;
}

/* Sticky footer — main fylder al tilgængelig plads og skubber footer ned */
body > main {
  flex: 1;
}
/* Forsiden styrer selv sin højde via lp-root — ingen ekstra margin på footer */
body:has(.lp-root) > main {
  flex: none;
  margin-top: 0 !important;
}
/* Annuller lp-roots negative margin (var kompensation for main's mt-4) */
body:has(.lp-root) .lp-root {
  margin-top: 0 !important;
}

.card {
  background-color: var(--surface, #0d1220);
  /* Mørk baggrund */
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  /* Lidt skygge */
  border-radius: 12px;
}

.card-vehicle {
  min-height: 72px;
}

.snegl {
  filter: drop-shadow(0 0 10px #000);
  animation: float 5s ease-in-out infinite;
}

/* ═══════════════════════════════
   GLOBAL ANIMERET BAGGRUND
   ═══════════════════════════════ */
#globalBgCanvas {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: -1;
}
.global-bg-orb {
  position: fixed;
  border-radius: 50%;
  filter: blur(90px);
  pointer-events: none;
  z-index: -1;
  animation: orbFloat 14s ease-in-out infinite;
}
.global-bg-orb--1 { width:520px; height:520px; background:rgba(59,130,246,.13); top:-150px; left:-80px; animation-delay:0s; }
.global-bg-orb--2 { width:380px; height:380px; background:rgba(139,92,246,.10); top:-40px; right:-60px; animation-delay:-5s; }
.global-bg-orb--3 { width:300px; height:300px; background:rgba(6,182,212,.07); bottom:-60px; left:45%; animation-delay:-9s; }
.global-bg-grid {
  position: fixed;
  inset: 0;
  background-image:
    linear-gradient(rgba(59,130,246,.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(59,130,246,.025) 1px, transparent 1px);
  background-size: 52px 52px;
  pointer-events: none;
  z-index: -1;
  mask-image: radial-gradient(ellipse 100% 100% at 50% 50%, black 10%, transparent 100%);
}

/* ═══════════════════════════════
   HERO LANDING
   ═══════════════════════════════ */
.hero-landing {
  position: relative;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-top: -1.5rem;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: #080c16;
  text-align: center;
}

/* Canvas partikler */
.hero-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

/* Gitter baggrund */
.hero-grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(59,130,246,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(59,130,246,.04) 1px, transparent 1px);
  background-size: 48px 48px;
  pointer-events: none;
  mask-image: radial-gradient(ellipse 80% 80% at 50% 50%, black 30%, transparent 100%);
}

/* Gradient orbs */
.hero-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
  pointer-events: none;
  animation: orbFloat 14s ease-in-out infinite;
}
.hero-orb--1 {
  width: 600px; height: 600px;
  background: rgba(59,130,246,.16);
  top: -150px; left: -120px;
  animation-delay: 0s;
}
.hero-orb--2 {
  width: 450px; height: 450px;
  background: rgba(139,92,246,.13);
  top: 0; right: -100px;
  animation-delay: -5s;
}
.hero-orb--3 {
  width: 350px; height: 350px;
  background: rgba(6,182,212,.09);
  bottom: -80px; left: 35%;
  animation-delay: -9s;
}
.hero-orb--4 {
  width: 250px; height: 250px;
  background: rgba(59,130,246,.10);
  bottom: 10%; right: 15%;
  animation-delay: -3s;
  animation-duration: 10s;
}
@keyframes orbFloat {
  0%,100% { transform: translateY(0) scale(1);    }
  50%      { transform: translateY(36px) scale(1.07); }
}

/* Indhold */
.hero-content {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  padding: 80px 20px 100px;
  max-width: 760px;
}

/* Status widget */
.hero-status {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 99px;
  padding: 7px 18px;
  font-size: .82rem;
  color: rgba(255,255,255,.70);
  letter-spacing: .04em;
  text-transform: uppercase;
  backdrop-filter: blur(8px);
}
.hero-status-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: rgba(255,255,255,.3);
  flex-shrink: 0;
}
.hero-status-dot--online  { background: #22c55e; box-shadow: 0 0 8px #22c55e; animation: pulseGreen 2s ease-in-out infinite; }
.hero-status-dot--offline { background: #ef4444; }
@keyframes pulseGreen {
  0%,100% { opacity: 1; box-shadow: 0 0 8px #22c55e; }
  50%      { opacity: .5; box-shadow: 0 0 16px #22c55e; }
}

/* Logo */
.hero-brand-logo {
  height: 90px;
  width: auto;
  filter: drop-shadow(0 0 32px rgba(59,130,246,.55)) drop-shadow(0 0 8px rgba(59,130,246,.3));
  animation: logoFloat 6s ease-in-out infinite;
}
@keyframes logoFloat {
  0%,100% { transform: translateY(0); }
  50%      { transform: translateY(-8px); }
}

/* Tagline */
.hero-tagline {
  font-size: clamp(1.6rem, 4vw, 2.4rem);
  font-weight: 800;
  color: rgba(255,255,255,.96);
  margin: 0;
  line-height: 1.15;
  letter-spacing: -.01em;
  text-shadow: 0 2px 24px rgba(0,0,0,.7);
}
.hero-tagline-sep {
  color: var(--accentLite);
  font-weight: 400;
  margin: 0 6px;
}
.hero-sub {
  font-size: 1.1rem;
  color: rgba(255,255,255,.50);
  margin: 0;
  letter-spacing: .01em;
}
.hero-sub em { font-style: italic; color: rgba(255,255,255,.70); }

/* Knapper */
.hero-btns {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 6px;
}
/* Hero-knapper — glass-pill som designsystemet (btn-custom) */
.hero-btn-primary {
  background:
    linear-gradient(180deg, rgba(255,255,255,.10) 0%, rgba(255,255,255,0) 55%),
    rgba(59,130,246,.22);
  border: 1px solid rgba(59,130,246,.40);
  color: #e0eeff;
  padding: 7px 20px;
  border-radius: 8px;
  font-weight: 700;
  font-size: .85rem;
  box-shadow: 0 2px 12px rgba(59,130,246,.25), inset 0 1px 0 rgba(255,255,255,.14);
  transition: transform .15s, box-shadow .15s, background .15s;
  letter-spacing: .02em;
}
.hero-btn-primary:hover {
  transform: translateY(-2px);
  background:
    linear-gradient(180deg, rgba(255,255,255,.14) 0%, rgba(255,255,255,0) 55%),
    rgba(59,130,246,.38);
  border-color: rgba(59,130,246,.60);
  box-shadow: 0 6px 22px rgba(59,130,246,.40), inset 0 1px 0 rgba(255,255,255,.18);
  color: #fff;
}
.hero-btn-secondary {
  background:
    linear-gradient(180deg, rgba(255,255,255,.07) 0%, rgba(255,255,255,0) 55%),
    rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.12);
  color: rgba(255,255,255,.72);
  padding: 7px 20px;
  border-radius: 8px;
  font-weight: 600;
  font-size: .85rem;
  box-shadow: 0 2px 8px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.08);
  backdrop-filter: blur(6px);
  transition: transform .15s, background .15s, border-color .15s;
}
.hero-btn-secondary:hover {
  transform: translateY(-2px);
  background:
    linear-gradient(180deg, rgba(255,255,255,.12) 0%, rgba(255,255,255,0) 55%),
    rgba(255,255,255,.08);
  border-color: rgba(255,255,255,.22);
  color: #fff;
}
.hero-btn-discord {
  background:
    linear-gradient(180deg, rgba(255,255,255,.07) 0%, rgba(255,255,255,0) 55%),
    rgba(88,101,242,.12);
  border: 1px solid rgba(88,101,242,.32);
  color: #a5b4fc;
  padding: 7px 20px;
  border-radius: 8px;
  font-weight: 600;
  font-size: .85rem;
  box-shadow: 0 2px 8px rgba(88,101,242,.18), inset 0 1px 0 rgba(255,255,255,.08);
  transition: transform .15s, background .15s, box-shadow .15s;
}
.hero-btn-discord:hover {
  transform: translateY(-2px);
  background:
    linear-gradient(180deg, rgba(255,255,255,.12) 0%, rgba(255,255,255,0) 55%),
    rgba(88,101,242,.28);
  border-color: rgba(88,101,242,.52);
  box-shadow: 0 6px 20px rgba(88,101,242,.38), inset 0 1px 0 rgba(255,255,255,.14);
  color: #c7d2fe;
}

/* Scroll hint */
.hero-scroll-hint {
  position: absolute;
  bottom: 28px;
  left: 50%;
  transform: translateX(-50%);
  color: rgba(255,255,255,.25);
  font-size: 1.1rem;
  animation: scrollBounce 2.2s ease-in-out infinite;
}
@keyframes scrollBounce {
  0%,100% { transform: translateX(-50%) translateY(0); opacity: .25; }
  50%      { transform: translateX(-50%) translateY(8px); opacity: .55; }
}

/* ═══════════════════════════════
   STATS BAR
   ═══════════════════════════════ */
.nd-stats-bar {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  background: rgba(255,255,255,.025);
  border-top: 1px solid rgba(59,130,246,.12);
  border-bottom: 1px solid rgba(59,130,246,.12);
  padding: 22px 24px;
  flex-wrap: wrap;
}
.nd-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 0 40px;
}
.nd-stat-num {
  font-size: 1.7rem;
  font-weight: 800;
  color: var(--accentLite);
  line-height: 1;
  letter-spacing: -.02em;
}
.nd-stat-label {
  font-size: .75rem;
  color: rgba(255,255,255,.45);
  text-transform: uppercase;
  letter-spacing: .06em;
}
.nd-stat-divider {
  width: 1px;
  height: 36px;
  background: rgba(59,130,246,.18);
}
@media (max-width: 600px) {
  .nd-stat-divider { display: none; }
  .nd-stat { padding: 12px 20px; }
}

/* ═══════════════════════════════
   OM-SEKTION
   ═══════════════════════════════ */
.home-about {
  padding: 72px 0 40px;
  text-align: left;
}
.nd-section-label {
  display: inline-flex;
  align-items: center;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--accentLite);
  background: rgba(59,130,246,.08);
  border: 1px solid rgba(59,130,246,.20);
  border-radius: 99px;
  padding: 4px 14px;
  margin-bottom: 14px;
}
.home-about-title {
  font-size: 1.85rem;
  font-weight: 800;
  color: rgba(255,255,255,.95);
  margin-bottom: 18px;
  letter-spacing: -.01em;
}
.home-about-lead {
  font-size: 1.07rem;
  color: rgba(255,255,255,.82);
  margin-bottom: 16px;
  line-height: 1.7;
}
.home-about-body {
  color: rgba(255,255,255,.62);
  line-height: 1.85;
  font-size: .95rem;
}

/* ═══════════════════════════════
   FEATURES SEKTION
   ═══════════════════════════════ */
.nd-features {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  padding: 80px 40px;
  background: rgba(255,255,255,.015);
  border-top: 1px solid rgba(59,130,246,.08);
}
.nd-features-title {
  font-size: clamp(1.5rem, 3vw, 2rem);
  font-weight: 800;
  color: rgba(255,255,255,.95);
  margin-bottom: 8px;
  letter-spacing: -.01em;
}
.nd-features-sub {
  color: rgba(255,255,255,.45);
  font-size: .95rem;
  margin-bottom: 52px;
}
.nd-features-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 20px;
  max-width: 1100px;
  margin: 0 auto;
}
.nd-feature-card {
  background: rgba(255,255,255,.025);
  border: 1px solid rgba(59,130,246,.14);
  border-radius: 16px;
  padding: 28px 28px 28px;
  transition: border-color .2s, transform .2s, box-shadow .2s;
}
.nd-feature-card:hover {
  border-color: rgba(59,130,246,.35);
  transform: translateY(-4px);
  box-shadow: 0 12px 32px rgba(0,0,0,.35);
}
.nd-feature-icon {
  width: 48px; height: 48px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  margin-bottom: 16px;
}
.nd-feature-icon--blue   { background: rgba(59,130,246,.15); color: #60a5fa; border: 1px solid rgba(59,130,246,.25); }
.nd-feature-icon--purple { background: rgba(139,92,246,.15); color: #a78bfa; border: 1px solid rgba(139,92,246,.25); }
.nd-feature-icon--cyan   { background: rgba(6,182,212,.15);  color: #22d3ee; border: 1px solid rgba(6,182,212,.25); }
.nd-feature-icon--green  { background: rgba(34,197,94,.12);  color: #4ade80; border: 1px solid rgba(34,197,94,.22); }
.nd-feature-icon--orange { background: rgba(249,115,22,.12); color: #fb923c; border: 1px solid rgba(249,115,22,.22); }
.nd-feature-icon--pink   { background: rgba(236,72,153,.12); color: #f472b6; border: 1px solid rgba(236,72,153,.22); }
.nd-feature-title {
  font-size: 1.05rem;
  font-weight: 700;
  color: rgba(255,255,255,.92);
  margin-bottom: 8px;
}
.nd-feature-desc {
  font-size: .88rem;
  color: rgba(255,255,255,.52);
  line-height: 1.7;
  margin: 0;
}

/* ═══════════════════════════════
   JOIN CTA
   ═══════════════════════════════ */
.nd-cta {
  position: relative;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  padding: 90px 24px;
  text-align: center;
  overflow: hidden;
  background: #080c16;
  border-top: 1px solid rgba(59,130,246,.10);
}
.nd-cta-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  pointer-events: none;
}
.nd-cta-orb--1 {
  width: 400px; height: 400px;
  background: rgba(59,130,246,.14);
  top: -80px; left: 10%;
}
.nd-cta-orb--2 {
  width: 300px; height: 300px;
  background: rgba(139,92,246,.12);
  bottom: -60px; right: 15%;
}
.nd-cta-inner {
  position: relative;
  z-index: 2;
  max-width: 600px;
  margin: 0 auto;
}
.nd-cta-icon {
  font-size: 2.8rem;
  color: var(--accentLite);
  display: block;
  margin-bottom: 20px;
  filter: drop-shadow(0 0 16px rgba(59,130,246,.5));
}
.nd-cta-title {
  font-size: clamp(1.6rem, 4vw, 2.2rem);
  font-weight: 800;
  color: rgba(255,255,255,.96);
  margin-bottom: 12px;
  letter-spacing: -.01em;
}
.nd-cta-sub {
  color: rgba(255,255,255,.50);
  font-size: 1rem;
  margin-bottom: 36px;
}
.nd-cta-btns {
  display: flex;
  gap: 14px;
  justify-content: center;
  flex-wrap: wrap;
}

/* ═══════════════════════════════════════════════════
   SINGLE-PAGE LANDING (lp-*)
   ═══════════════════════════════════════════════════ */

.lp-root {
  position: relative;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-top: -1.5rem;
  min-height: var(--lp-h, calc(100vh - 62px));
  display: flex;
  flex-direction: column;
  overflow: hidden;
}


/* ── HERO — to-kolonne split ── */
.lp-hero {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 48px;
  padding: 32px 48px 24px;
  flex-shrink: 0;
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  box-sizing: border-box;
}

.lp-hero-left {
  flex: 0 0 42%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  gap: 22px;
}

.lp-hero-right {
  flex: 1;
  min-width: 0;
}

.lp-hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(255,255,255,.35);
}

.lp-hero-beacon {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #22c55e;
  box-shadow: 0 0 7px #22c55e;
  animation: pulseGreen 2s ease-in-out infinite;
  flex-shrink: 0;
}

/* Divider hero ↔ features */
.lp-section-divider {
  width: 100%;
  height: 1px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(59,130,246,.22) 30%,
    rgba(139,92,246,.16) 70%,
    transparent 100%
  );
  flex-shrink: 0;
}

.lp-status {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: none;
  border: none;
  border-radius: 99px;
  padding: 4px 10px;
  font-size: .70rem;
  color: rgba(255,255,255,.35);
  letter-spacing: .06em;
  text-transform: uppercase;
  font-weight: 500;
}
.lp-status-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: rgba(255,255,255,.3);
  flex-shrink: 0;
}
.lp-status-dot--online  { background: #22c55e; box-shadow: 0 0 8px #22c55e; animation: pulseGreen 2s ease-in-out infinite; }
.lp-status-dot--offline { background: #ef4444; }

.lp-tagline {
  font-family: 'Outfit', sans-serif;
  font-size: clamp(2rem, 3.2vw, 3rem);
  font-weight: 800;
  color: rgba(255,255,255,.97);
  margin: 0;
  line-height: 1.12;
  letter-spacing: -.025em;
}
.lp-tagline-accent {
  font-weight: 700;
  background: linear-gradient(90deg, #60a5fa 0%, #a78bfa 55%, #22d3ee 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.lp-sub {
  font-size: .82rem;
  color: rgba(255,255,255,.48);
  margin: 0;
  line-height: 1.75;
}
.lp-sub em { font-style: italic; color: rgba(255,255,255,.65); }

/* About-kort i hero */
.lp-about-card {
  width: 100%;
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(59,130,246,.14);
  border-left: 3px solid rgba(59,130,246,.55);
  border-radius: 14px;
  padding: 20px 28px;
  text-align: left;
  backdrop-filter: blur(6px);
}
.lp-about-header {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 16px;
}
.lp-about-icon {
  width: 46px;
  height: 46px;
  flex-shrink: 0;
  border-radius: 12px;
  background: rgba(59,130,246,.12);
  border: 1px solid rgba(59,130,246,.28);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.3rem;
  color: #60a5fa;
  box-shadow: 0 4px 16px rgba(59,130,246,.12);
}

.lp-about-card p {
  font-size: .78rem;
  color: rgba(255,255,255,.52);
  line-height: 1.75;
  margin: 0 0 10px;
}
.lp-about-card p:last-child { margin-bottom: 0; }
.lp-about-lead {
  font-size: .88rem !important;
  color: rgba(255,255,255,.82) !important;
  font-weight: 600;
  margin: 0 !important;
  line-height: 1.5 !important;
}
.lp-about-closing {
  color: rgba(255,255,255,.55) !important;
  font-style: italic;
}
.lp-about-divider {
  width: 32px;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(59,130,246,.55), transparent);
  margin: 14px auto;
}

.lp-btns {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: flex-start;
  margin-top: 0;
}

/* ── FEATURES (centerstykket) ── */
.lp-features {
  position: relative;
  z-index: 2;
  flex: 1 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 6px 32px 4px;
}

.lp-features-header {
  text-align: center;
  margin-bottom: 48px;
}

.lp-features-label {
  display: inline-flex;
  align-items: center;
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--accentLite);
  background: rgba(59,130,246,.10);
  border: 1px solid rgba(59,130,246,.30);
  border-radius: 99px;
  padding: 4px 14px;
  margin-bottom: 10px;
  box-shadow: 0 0 12px rgba(59,130,246,.18), inset 0 1px 0 rgba(255,255,255,.07);
}

.lp-features-title {
  font-size: clamp(1.3rem, 2.2vw, 1.75rem);
  font-weight: 800;
  color: rgba(255,255,255,.96);
  margin: 0 0 6px;
  letter-spacing: -.01em;
}

.lp-features-sub {
  font-size: .88rem;
  color: rgba(255,255,255,.42);
  margin: 0;
}

.lp-features-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  width: 100%;
  max-width: 1080px;
}

/* Feature card — kolonne (ikon+titel øverst, tekst under) */
.lp-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  gap: 10px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.04) 0%, rgba(255,255,255,0) 55%),
    rgba(255,255,255,.022);
  border: 1px solid rgba(255,255,255,.07);
  border-top: 2px solid var(--card-clr, rgba(59,130,246,.45));
  border-radius: 14px;
  padding: 18px 18px;
  box-shadow: 0 2px 14px rgba(0,0,0,.32), inset 0 1px 0 rgba(255,255,255,.04);
  backdrop-filter: blur(4px);
  transition: border-color .22s, border-top-color .22s, transform .22s, background .22s, box-shadow .22s;
}
.lp-card:hover {
  border-color: rgba(255,255,255,.14);
  border-top-color: var(--card-clr, rgba(59,130,246,.80));
  background:
    linear-gradient(180deg, rgba(255,255,255,.07) 0%, rgba(255,255,255,0) 55%),
    rgba(255,255,255,.038);
  transform: translateY(-6px);
  box-shadow:
    0 16px 40px rgba(0,0,0,.55),
    0 0 24px var(--card-glow, rgba(59,130,246,.12)),
    inset 0 1px 0 rgba(255,255,255,.09);
}
.lp-card-icon {
  width: 42px; height: 42px;
  border-radius: 11px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.15rem;
  flex-shrink: 0;
  margin-top: 1px;
}
.lp-card-icon--blue   { background:rgba(59,130,246,.15);  color:#60a5fa;  border:1px solid rgba(59,130,246,.28); }
.lp-card-icon--purple { background:rgba(139,92,246,.15);  color:#a78bfa;  border:1px solid rgba(139,92,246,.28); }
.lp-card-icon--cyan   { background:rgba(6,182,212,.15);   color:#22d3ee;  border:1px solid rgba(6,182,212,.28); }
.lp-card-icon--green  { background:rgba(34,197,94,.12);   color:#4ade80;  border:1px solid rgba(34,197,94,.25); }
.lp-card-icon--orange { background:rgba(249,115,22,.12);  color:#fb923c;  border:1px solid rgba(249,115,22,.25); }
.lp-card-icon--pink   { background:rgba(236,72,153,.12);  color:#f472b6;  border:1px solid rgba(236,72,153,.25); }

.lp-card-header {
  display: flex;
  align-items: center;
  gap: 12px;
}
.lp-card-title {
  font-size: .92rem;
  font-weight: 700;
  color: rgba(255,255,255,.92);
  margin: 0 0 5px;
  line-height: 1.3;
}
.lp-card-desc {
  font-size: .78rem;
  color: rgba(255,255,255,.47);
  line-height: 1.6;
  margin: 0;
}

/* Entrance animation */
@keyframes lp-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.lp-animate {
  opacity: 0;
}
.lp-animate--in {
  animation: lp-fade-in .45s ease both;
  animation-delay: calc(var(--i, 0) * 70ms);
}

/* ── BUND: stats + footer ── */
.lp-bottom {
  position: relative;
  z-index: 2;
  flex-shrink: 0;
}

.lp-stats {
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,.020);
  border-top: 1px solid rgba(59,130,246,.12);
  padding: 6px 0;
}
.lp-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  padding: 0 28px;
}
.lp-stat-num {
  font-size: 1rem;
  font-weight: 900;
  color: var(--accentLite);
  line-height: 1;
  letter-spacing: -.03em;
}
.lp-stat-label {
  font-size: .65rem;
  color: rgba(255,255,255,.38);
  text-transform: uppercase;
  letter-spacing: .06em;
}
.lp-stat-sep {
  width: 1px;
  height: 26px;
  background: rgba(59,130,246,.18);
}


/* Footer-bar inde i lp-root */
.lp-footer-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 32px;
  border-top: 1px solid rgba(255,255,255,.06);
  background: rgba(8,12,22,.60);
  padding: 12px 24px;
  flex-wrap: wrap;
}
.lp-footer-copy {
  font-size: .78rem;
  color: rgba(255,255,255,.45);
  margin: 0;
  text-align: center;
  line-height: 1.6;
}
.lp-footer-copy strong { color: rgba(255,255,255,.70); }


/* Social ikoner i lp-footer — samme glass-pill som .social-icons a */
.lp-footer-social {
  display: flex;
  gap: 10px;
  align-items: center;
}
.lp-footer-social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  font-size: 14px;
  color: #aaa;
  background:
    linear-gradient(180deg, rgba(255,255,255,.07) 0%, rgba(255,255,255,0) 55%),
    rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.09);
  box-shadow: 0 2px 8px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.08);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  transition: all 0.22s ease;
  text-decoration: none;
}
.lp-footer-social .discord-icon:hover {
  color: #fff;
  background: linear-gradient(180deg, rgba(255,255,255,.14) 0%, rgba(255,255,255,0) 55%), rgba(88,101,242,.35);
  border-color: rgba(88,101,242,.55);
  box-shadow: 0 4px 18px rgba(88,101,242,.40), inset 0 1px 0 rgba(255,255,255,.16);
  transform: translateY(-2px);
}
.lp-footer-social .youtube-icon:hover {
  color: #fff;
  background: linear-gradient(180deg, rgba(255,255,255,.14) 0%, rgba(255,255,255,0) 55%), rgba(255,0,0,.28);
  border-color: rgba(255,0,0,.50);
  box-shadow: 0 4px 18px rgba(255,0,0,.35), inset 0 1px 0 rgba(255,255,255,.16);
  transform: translateY(-2px);
}
.lp-footer-social .tiktok-icon:hover {
  color: #fff;
  background: linear-gradient(180deg, rgba(255,255,255,.14) 0%, rgba(255,255,255,0) 55%), rgba(0,242,234,.18);
  border-color: rgba(0,242,234,.40);
  box-shadow: 0 4px 18px rgba(0,242,234,.28), inset 0 1px 0 rgba(255,255,255,.16);
  transform: translateY(-2px);
}
.lp-footer-social .patreon-icon:hover {
  color: #fff;
  background: linear-gradient(180deg, rgba(255,255,255,.14) 0%, rgba(255,255,255,0) 55%), rgba(255,66,77,.25);
  border-color: rgba(255,66,77,.48);
  box-shadow: 0 4px 18px rgba(255,66,77,.32), inset 0 1px 0 rgba(255,255,255,.16);
  transform: translateY(-2px);
}

/* ── Hero responsive ── */
@media (max-width: 860px) {
  .lp-hero {
    flex-direction: column;
    padding: 28px 20px 16px;
    gap: 24px;
    max-width: 100%;
  }
  .lp-hero-left {
    flex: none;
    width: 100%;
    align-items: center;
    text-align: center;
  }
  .lp-btns { justify-content: center; }
  .lp-hero-right { width: 100%; }
}

/* ── Responsive ── */
@media (max-width: 900px) {
  .lp-root { height: auto; min-height: 100dvh; }
  .lp-features-grid { grid-template-columns: repeat(2, 1fr); }
  .lp-features { padding: 12px 20px 16px; }
  .lp-stat { padding: 0 16px; }
  .lp-stat-sep { display: none; }
}
@media (max-width: 520px) {
  .lp-features-grid { grid-template-columns: 1fr; }
}

@keyframes float {

  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-10px);
  }
}

.custom-nav-btn {
  background: linear-gradient(145deg, #1f1f1f, #181818);
  border: 1px solid #60a5fa;
  color: #60a5fa;
  font-weight: 400;
  font-size: 14px;
  padding: 6px 16px;
  border-radius: 8px;
  text-decoration: none;
  transition: all 0.25s ease;
  box-shadow: 0 0 10px rgba(255, 193, 7, 0.1);
  /* height: 40px; */
  width: 230px;
  margin: 0 auto;
}

.custom-nav-btn:hover {
  background: linear-gradient(145deg, #1f1f1f, #181818);
  border: 1px solid #60a5fa;
  color: rgba(255,255,255,.92);
  transform: translateY(-1px);
  transition: all 0.25s ease;
  box-shadow: 0 0 10px rgba(255, 193, 7, 0.1);
}

.btn-custom {
  --bs-btn-color: #fff;
  --bs-btn-bg: #1e40af;
  /* hovedfarve */
  --bs-btn-border-color: #1e40af;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #2563eb;
  /* lidt lysere ved hover */
  --bs-btn-hover-border-color: #1d4ed8;
  --bs-btn-focus-shadow-rgb: 30, 64, 175;
  /* RGB for hovedfarven */
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #1e3a8a;
  /* endnu mørkere ved klik */
  --bs-btn-active-border-color: #1e3a8a;
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: #1e40af;
  --bs-btn-disabled-border-color: #1e40af;
}

.text-steel {
  --bs-text-opacity: 1;
  color: rgba(175,
      193,
      255,
      var(--bs-text-opacity)) !important;
  /* #60a5fa i RGB */
  font-size: 2;
}

.rule-header {
  background-color: #0d1525;
  /* baggrund som Your Skills */
  color: rgba(255,255,255,.92);
  /* tekstfarve */
  font-weight: 500;
  padding: 12px 15px;
  text-align: center;
  border-radius: 4px 4px 4px 4px;
  /* runde hjørner i top */
  margin: -15px -15px -10px -15px;
  /* trækker ud så det matcher boksens kanter */
  border-bottom: none;
  /* fjerner hvid streg */
  border: 1px solid #8c8c8d;
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.2);
}

.rule-header h2,
.rule-header h3,
.rule-header h4 {
  margin: 0;
  /* fjerner ekstra margin fra overskrift */
  border-bottom: none;
  /* sikrer ingen linje */
}

.rules-inner-box {
  background: transparent;
  border: none;
  padding: 15px;
  margin-top: 0;
  box-shadow: none;
}

.rules-sticky-menu-box {
  background-color: #0d1220;
  /* samme som din rule-header eller lidt lysere */
  /* border: 1px solid #8C8C8D; */
  border-radius: 4px 4px 4px 4px;
  /* runde hjørner kun i bunden hvis du har header */
  padding: 15px;
  margin-top: 0;
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.2);
  width: 260px;
}

/* .btn-custom {
  background: linear-gradient(145deg, #60a5fa, #3b82f6);
  border-color: #60a5fa;
  color: #000;
  transition: all 0.2s ease-in-out;
}

.btn-custom:hover {
  background-color: #7DA9FF;
  border-color: #7DA9FF;
  box-shadow: 0 4px 8px rgba(125, 169, 255, 0.4);
  transform: translateY(-1px);
  color: #000;
}
.btn-custom:focus,
.btn-custom:active,
.btn-custom:focus:active {
  outline: none !important;
  box-shadow: 0 4px 8px rgba(125, 169, 255, 0.4) !important;
  background: linear-gradient(145deg, #60a5fa, #3b82f6) !important;
  border-color: #7DA9FF !important;
  color: #000 !important;
} */
.btn-discord {
  background-color: #5865f2;
  color: #fff;
  border: none;
  transition: background-color 0.3s ease, transform 0.2s ease;
}

.btn-discord:hover {
  background-color: #4752c4;
  color: #fff;
  transform: translateY(-1px);
  box-shadow: 0 4px 10px rgba(88, 101, 242, 0.4);
}

.btn-discord img {
  margin-bottom: 2px;
}

.rules-box {
  background-color: #080c16;
  border: 1px solid #1a2035;
  padding: 30px;
  border-radius: 8px;
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.3);
}

.rule-card {
  background-color: #0d1220;
  border-radius: 4px 4px 4px 4px;
  /* border: 1px solid #444; */
  color: #f8f9fa;
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.2);
}

.nav-links {
  display: flex;
  gap: 1rem;
  align-items: center;
}

.nav-btn {
  padding: 0.4rem 1rem;
  border-radius: 6px;
  font-weight: 600;
  font-size: 0.95rem;
  color: #f0f0f0;
  text-decoration: none;
  background-color: transparent;
  border: 1px solid transparent;
  transition: all 0.2s ease-in-out;
}

.nav-btn:hover {
  background-color: rgba(255, 255, 255, 0.05);
  border-color: #555;
}

/* Special styles */
.nav-btn:nth-child(1) {
  color: #ffae00;
}

/* Forside – gul */
.nav-btn:nth-child(2) {
  color: #00bfff;
}

/* Regler – blå */
.nav-btn:nth-child(3) {
  color: #ff66cc;
}

/* Join Discord – pink */

.footer {
  position: relative;
}

.footer-line {
  width: 1250;
  /* eller det der passer bedst visuelt */
  margin: 0 auto 1rem auto;
  border: none;
  border-top: 1px solid #666;
}

.social-icons {
  position: absolute;
  top: 0;
  right: 0;
  padding: 1rem;
  display: flex;
  gap: 12px;
}

.social-icons a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  font-size: 18px;
  color: #aaa;
  background:
    linear-gradient(180deg, rgba(255,255,255,.07) 0%, rgba(255,255,255,0) 55%),
    rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.09);
  box-shadow: 0 2px 8px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.08);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  transition: all 0.22s ease;
  text-decoration: none;
}

/* Discord — blueviolet glow */
.social-icons .discord-icon:hover {
  color: #fff;
  background:
    linear-gradient(180deg, rgba(255,255,255,.14) 0%, rgba(255,255,255,0) 55%),
    rgba(88,101,242,.35);
  border-color: rgba(88,101,242,.55);
  box-shadow: 0 4px 18px rgba(88,101,242,.40), inset 0 1px 0 rgba(255,255,255,.16);
  transform: translateY(-2px);
}

/* YouTube — rød glow */
.social-icons .youtube-icon:hover {
  color: #fff;
  background:
    linear-gradient(180deg, rgba(255,255,255,.14) 0%, rgba(255,255,255,0) 55%),
    rgba(255,0,0,.28);
  border-color: rgba(255,0,0,.50);
  box-shadow: 0 4px 18px rgba(255,0,0,.35), inset 0 1px 0 rgba(255,255,255,.16);
  transform: translateY(-2px);
}

/* TikTok — cyan/pink glow */
.social-icons .tiktok-icon:hover {
  color: #fff;
  background:
    linear-gradient(180deg, rgba(255,255,255,.14) 0%, rgba(255,255,255,0) 55%),
    rgba(0,242,234,.18);
  border-color: rgba(0,242,234,.40);
  box-shadow: 0 4px 18px rgba(0,242,234,.28), inset 0 1px 0 rgba(255,255,255,.16);
  transform: translateY(-2px);
}

/* Patreon — orange glow */
.social-icons .patreon-icon:hover {
  color: #fff;
  background:
    linear-gradient(180deg, rgba(255,255,255,.14) 0%, rgba(255,255,255,0) 55%),
    rgba(255,66,77,.25);
  border-color: rgba(255,66,77,.48);
  box-shadow: 0 4px 18px rgba(255,66,77,.32), inset 0 1px 0 rgba(255,255,255,.16);
  transform: translateY(-2px);
}

.pagination {
  display: flex;
  justify-content: center;
  gap: 6px;
  margin-top: 20px;
}

.pagination .page-link {
  background-color: #2c2f33;
  color: #bfbfbf;
  border: none;
  border-radius: 6px;
  padding: 6px 12px;
  font-size: 0.9rem;
  transition: background-color 0.2s, color 0.2s;
}

.pagination .page-link:hover {
  background-color: #3a3d41;
  color: #ffffff;
}

.pagination .page-link.active {
  background-color: #5865f2;
  color: #fff;
}

/* ========== MOBILE RESPONSIVE DESIGN ========== */

/* === Tablet & Mobile (max-width: 768px) === */
@media (max-width: 768px) {
  /* --- Global typography --- */
  body {
    font-size: 14px;
    line-height: 1.5;
  }

  h1 { font-size: 1.75rem; }
  h2 { font-size: 1.5rem; }
  h3 { font-size: 1.25rem; }
  h4 { font-size: 1.1rem; }

  /* --- Prevent iOS auto-zoom on input focus --- */
  input,
  select,
  textarea {
    font-size: 16px !important; /* 16px prevents zoom on iOS */
    min-height: 44px; /* Apple HIG minimum touch target */
  }

  /* --- Improved touch targets for all interactive elements --- */
  .btn,
  button,
  a.btn {
    min-height: 44px;
    padding: 0.6rem 1rem;
  }

  .btn-sm {
    font-size: 0.85rem;
    padding: 0.4rem 0.75rem;
    min-height: 38px;
  }

  /* --- Navbar improvements --- */
  .navbar {
    padding: 0.5rem 0;
  }

  .navbar-nav {
    text-align: center;
  }

  .navbar .nav-item {
    margin-bottom: 10px;
  }

  .navbar .btn-sm {
    width: 100%;
    max-width: 200px;
  }

  /* --- Logo --- */
  .hero-logo {
    padding: 8px 0;
  }

  .hero-logo img {
    max-width: 80%;
    height: auto;
    max-height: 50px;
  }

  .logo-img {
    height: 50px;
  }

  /* --- Dashboard layout --- */
  .nd-wrap {
    padding: 0 12px;
    max-width: 100%;
  }

  .heading {
    font-size: 1.5rem;
    margin-bottom: 10px;
  }

  /* --- Cards --- */
  .card {
    margin-bottom: 1rem;
    border-radius: 12px;
  }

  .cardX {
    border-radius: 14px;
    margin-bottom: 1rem;
  }

  .cardX-header {
    padding: 12px 14px;
    flex-direction: column;
    text-align: center;
    align-items: center;
  }

  .cardX-body {
    padding: 14px 16px;
  }

  .avatar {
    width: 48px;
    height: 48px;
  }

  .title {
    font-size: 1.1rem;
  }

  .meta {
    font-size: 0.85rem;
  }

  /* --- Panel & Stats --- */
  .panel {
    border-radius: 12px;
  }

  .panel-row {
    flex-direction: column;
    align-items: flex-start;
    padding: 14px 16px;
  }

  .chip {
    width: 100%;
    justify-content: space-between;
  }

  .stat-grid {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .stat {
    padding: 10px 12px;
  }

  /* --- Forms (allowlist, etc.) --- */
  .alw-form {
    padding: 18px;
    border-radius: 10px;
  }

  .alw-grid {
    grid-template-columns: 1fr;
  }

  .alw-title {
    font-size: 1.3rem;
  }

  .alw-control {
    font-size: 16px !important; /* Prevent zoom */
  }

  /* --- Garage --- */
  .vehicle-item .inner {
    padding: 10px 12px;
    font-size: 0.9rem;
  }

  .vehicle-item .inner .vtxt strong {
    font-size: 0.95rem;
  }

  .vehicle-item .inner .vtxt small {
    font-size: 0.8rem;
  }

  .vehicle-pagination {
    flex-direction: column;
    gap: 0.5rem;
  }

  .garage-btn {
    font-size: 0.9rem;
  }

  /* --- XP Section --- */
  .xp-layout {
    grid-template-columns: 1fr;
    grid-template-areas:
      "k1"
      "k2"
      "bar"
      "meta";
    gap: 10px;
  }

  .kpi,
  .kpi2 {
    padding: 8px 10px;
  }

  .xp-clean .xp-stats {
    flex-direction: column;
  }

  /* --- Footer --- */
  .footer {
    padding: 20px 0;
  }

  footer .container {
    text-align: center;
  }

  .social-icons {
    position: static;
    justify-content: center;
    margin-top: 1rem;
    padding: 0;
  }

  .footer-line {
    width: 100%;
  }

  /* --- Tables --- */
  .alw-table {
    font-size: 12px;
  }

  .alw-table thead th {
    padding: 6px 8px;
    font-size: 11px;
  }

  .alw-table tbody td {
    padding: 8px 10px;
    font-size: 12px;
  }

  /* --- Admin tools --- */
  .alw-adminbar {
    flex-direction: column;
    align-items: stretch;
  }

  .admin-meta {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }

  .admin-actions {
    flex-direction: column;
    width: 100%;
  }

  .admin-select,
  .admin-btn {
    width: 100%;
  }

  .status-row {
    flex-direction: column;
  }

  .btn-status,
  .btn-status-no-load {
    width: 100%;
  }

  /* --- Rules --- */
  .rules-box {
    padding: 20px;
  }

  .rules-sticky-menu-box {
    width: 100%;
    position: static !important;
  }

  /* --- Pagination --- */
  .pagination {
    gap: 4px;
  }

  .pagination .page-link {
    font-size: 0.85rem;
    padding: 4px 8px;
  }

  /* --- Top menu (NDRP) --- */
  .ndrp-topmenu__inner {
    flex-direction: column;
    gap: 8px;
    padding: 10px;
  }

  .ndrp-left {
    flex-direction: column;
    width: 100%;
    text-align: center;
  }

  .ndrp-splitter {
    display: none;
  }

  .ndrp-link {
    width: 100%;
    text-align: center;
  }

  /* --- Profile dropdown --- */
  .navbar .profile-toggle {
    max-width: 100%;
  }

  .profile-menu {
    max-width: 90vw;
  }

  /* --- Modal/Popover adjustments --- */
  .ndrp-popover {
    max-width: 90vw;
    left: 5vw !important;
    right: 5vw !important;
  }

  /* --- Character grid --- */
  .row {
    margin: 0 -8px;
  }

  .row > [class*='col'] {
    padding: 0 8px;
    margin-bottom: 1rem;
  }

  /* --- Section spacing --- */
  .section {
    padding: 12px;
    border-radius: 12px;
  }

  .section + .section {
    margin-top: 12px;
  }

  /* --- Allowlist review card --- */
  .alw-card {
    padding: 14px;
  }

  .alw-review {
    padding: 12px 8px;
  }
}

/* === Small mobile (max-width: 420px) === */
@media (max-width: 420px) {
  body {
    font-size: 13px;
  }

  h1 { font-size: 1.5rem; }
  h2 { font-size: 1.3rem; }
  h3 { font-size: 1.15rem; }

  .navbar .profile-toggle {
    max-width: 100px;
  }

  .navbar .profile-toggle .profile-name {
    display: none; /* Hide name, show only avatar + caret */
  }

  .nd-wrap {
    padding: 0 8px;
  }

  .cardX-header {
    padding: 10px 12px;
  }

  .avatar {
    width: 40px;
    height: 40px;
  }

  .title {
    font-size: 1rem;
  }

  .stat {
    padding: 8px 10px;
  }

  .panel-row {
    padding: 12px 14px;
  }

  .alw-form {
    padding: 14px;
  }

  .btn {
    font-size: 0.9rem;
    padding: 0.5rem 0.8rem;
  }

  .btn-sm {
    font-size: 0.8rem;
    padding: 0.35rem 0.65rem;
  }
}

/* === Landscape mobile fix === */
@media (max-height: 500px) and (orientation: landscape) {
  .hero-logo {
    padding: 5px 0;
  }

  .logo-img {
    height: 40px;
  }

  .navbar {
    padding: 0.3rem 0;
  }
}

/* rules */

/* NY regel (kun li’en) */
.new-rule {
  position: relative;
  background: rgba(46, 204, 113, 0.06);
  /* Grønlig baggrund */
  border-left: 3px solid #2ecc71;
  padding-left: 10px;
  border-radius: 4px;
}

/* Chip – NY */
.chip-new {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 1px 10px;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 500;
  color: #2ecc71;
  /* Grøn tekst */
  background: rgba(46, 204, 113, 0.12);
  border: 1px solid rgba(46, 204, 113, 0.35);
  margin-left: 8px;
  vertical-align: middle;
}

.chip-new::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #2ecc71;
}

/* (Fra tidligere) Opdateret */
.updated-rule {
  position: relative;
  background: rgba(255, 181, 71, 0.05);
  border-left: 3px solid #ffb547;
  padding-left: 10px;
  border-radius: 4px;
}

.chip-updated {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 1px 10px;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 500;
  color: #ffb547;
  background: rgba(255, 181, 71, 0.1);
  border: 1px solid rgba(255, 181, 71, 0.35);
  margin-left: 8px;
  vertical-align: middle;
}

.chip-updated::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #ffb547;
}

/* Form */
.form-label {
  text-align: left !important;
  display: block;
}

.readonly {
  background-color: #2a2a2a !important;
  /* mørkere baggrund */
  color: #ccc;
  /* lidt lysere tekst */
  cursor: not-allowed;
}

.form-check-label {
  text-align: left;
  display: inline-block;
  width: 100%;
  /* sikrer at teksten bryder korrekt */
}

.allowlist-section {
  max-width: 1080px;
  margin: 0 auto;
  /* centrerer boksen */
}

.allow-center {
  display: flex;
  justify-content: center;
  /* Centrerer horisontalt */
  margin-bottom: 20px;
  /* Luft under boksen */
}

.allowlist-header {
  width: 100%;
  max-width: 1000px;
  /* Justér max-bredden */
  background-color: #1e2430;
  border: 1px solid #ccc;
  border-radius: 4px;
  padding: 15px 20px;
  /* Mere padding */
  text-align: center;
}

.styled-info-box {
  position: relative;
  border-left: 3px solid #3b82f6;
  /* primær accent */
  border-right: 3px solid #3b82f6;
  border-radius: 6px;
  padding: 15px;
  margin: 20px auto;
  background-color: rgba(62, 89, 124, 0.15);
  /* gennemsigtig accent */
  color: #E5E9F0;
  /* lys grå tekst */
  max-width: 1000px;
  text-align: left;
  font-size: 14px;
}

.styled-info-box::before {
  content: "Info";
  position: absolute;
  top: -14px;
  /* rykket lidt tættere på boksen */
  left: 12px;
  /* lidt tættere ind */
  background-color: #3b82f6;
  color: #fff;
  font-size: 0.7rem;
  /* lidt mindre tekst */
  font-weight: 600;
  /* mindre tung end bold */
  padding: 2px 8px;
  /* mindre højde/bredde */
  border-radius: 3px;
  /* mindre afrunding */
}




.alw-container {
  display: flex;
  justify-content: center;
  padding: 40px 20px;
  position: relative;
}

.alw-form {
  background: rgba(255,255,255,.025);
  border: 1px solid rgba(59,130,246,.18);
  border-radius: 16px;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.45);
  padding: 25px;
  width: 100%;
  max-width: 800px;
}

.alw-title {
  font-size: 1.4rem;
  margin-bottom: 20px;
  color: #fff;
  text-align: left;
  /* <- Venstrejusteret */
}

.alw-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 15px;
}

.alw-control {
  width: 100%;
  padding: 10px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
  color: rgba(255,255,255,.92);
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

/* Field error highlight */
.alw-control.field-error,
input.field-error,
textarea.field-error {
  border-color: #f43f5e !important;
  box-shadow: 0 0 0 3px rgba(244, 63, 94, 0.25) !important;
  animation: shake 0.4s ease;
}

.form-group.field-error {
  animation: shake 0.4s ease;
}

.form-group.field-error label {
  color: #f43f5e !important;
  font-weight: 600;
}

/* Checkbox error highlight */
input[type="checkbox"].field-error {
  outline: 2px solid #f43f5e !important;
  outline-offset: 2px;
  box-shadow: 0 0 0 3px rgba(244, 63, 94, 0.25) !important;
  animation: shake 0.4s ease;
}

@keyframes shake {
  0%, 100% { transform: translateX(0); }
  10%, 30%, 50%, 70%, 90% { transform: translateX(-8px); }
  20%, 40%, 60%, 80% { transform: translateX(8px); }
}

.alw-control.readonly {
  cursor: not-allowed;
  opacity: 0.9;
}

.alw-control:focus {
  outline: none;
  border-color: rgba(59,130,246,.50);
  box-shadow: 0 0 0 3px rgba(59,130,246,.12);
}

.alw-submit {
  margin-top: 20px;
  padding: 12px;
  background: #3e5ea8;
  border: none;
  border-radius: 6px;
  color: #fff;
  font-weight: bold;
  cursor: pointer;
}

.alw-submit:hover {
  background: #5678c1;
}

.alw-form label {
  display: block;
  margin-bottom: 5px;
  color: rgba(255,255,255,.75);
  font-weight: 600;
  font-size: 13px;
  text-align: left;
}

/* keep the same gap below the whole radio block */
.radio-section {
  margin-bottom: 18px;
}

/* hidden by default but doesn't affect outer spacing */
.other-input {
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-height 0.25s ease, opacity 0.2s ease;
  margin-top: 10px;
  /* gap between 'Other…' and the field */
}

/* when shown */
.other-input.show {
  max-height: 120px;
  /* enough room for the input */
  opacity: 1;
}

/* (your existing styles) */
.alw-control {
  width: 100%;
}

.radio-label {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 4px 0;
}

.alw-form input,
.alw-form textarea,
.alw-form select {
  display: block;
  width: 100%;
  margin-bottom: 20px;
  /* Luft mellem felterne */
}

/* nulstil globale input-regler for radio */
input[type="radio"] {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  width: 20px;
  height: 20px;
  min-width: 20px;
  min-height: 20px;
  flex-shrink: 0;
  border: 2px solid rgba(255,255,255,.20);
  border-radius: 50%;
  background: rgba(255,255,255,.05);
  display: inline-grid;
  place-items: center;
  margin: 0 10px 0 0;
  cursor: pointer;
  transition: border-color 0.2s, box-shadow 0.2s, background 0.2s;
  vertical-align: middle;
}

input[type="radio"]::before {
  content: "";
  width: 9px;
  height: 9px;
  min-width: 9px;
  min-height: 9px;
  border-radius: 50%;
  transform: scale(0);
  /* skjult når ikke valgt */
  background: #fff;
  transition: transform 0.12s ease-in-out;
}

input[type="radio"]:checked {
  border-color: #3b82f6;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.22);
  background: rgba(59,130,246,.12);
}

input[type="radio"]:checked::before {
  transform: scale(1);
  /* prikken popper op – perfekt i midten */
}

/* Mobile optimized radio buttons */
@media (max-width: 768px) {
  input[type="radio"] {
    width: 24px;
    height: 24px;
    min-width: 24px;
    min-height: 24px;
    border-width: 2.5px;
    margin: 0 14px 0 0;
    /* større margin til højre for bedre spacing */
  }

  input[type="radio"]::before {
    width: 11px;
    height: 11px;
    min-width: 11px;
    min-height: 11px;
    /* større indre prik */
  }

  .radio-label {
    gap: 12px;
    padding: 12px 10px;
    /* større touch target */
    min-height: 44px;
    /* Apple touch guideline */
    cursor: pointer;
    -webkit-tap-highlight-color: rgba(74, 144, 226, 0.15);
    /* visual feedback på tap */
    border-radius: 8px;
    /* subtil runding for bedre look */
    transition: background-color 0.15s ease;
  }

  .radio-label:active {
    background-color: rgba(74, 144, 226, 0.08);
    /* feedback når man tapper */
  }

  .radio-section {
    margin-bottom: 20px;
    /* mere spacing mellem sections */
  }

  .radio-label + .radio-label {
    margin-top: 6px;
    /* spacing mellem hver radio option */
  }
}

/* Shell + kort holder alting centreret og i én kolonne */
.alw-review {
  display: flex;
  justify-content: center;
  padding: 16px 12px;
}

.alw-card {
  width: 100%;
  max-width: 800px;
  background: rgba(255,255,255,.025);
  border: 1px solid rgba(59,130,246,.18);
  border-radius: 16px;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.45);
  padding: 16px;
}

/* Adminbar i toppen – samme bredde, pæn ramme */
.alw-adminbar {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  background: rgba(255,255,255,.025);
  border: 1px solid rgba(59,130,246,.15);
  border-radius: 12px;
  padding: 16px 18px;
  margin-bottom: 20px;
}

.alw-adminbar .admin-meta {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  text-align: left;
}

.alw-adminbar .meta-item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.85rem;
  color: rgba(255,255,255,.92);
  text-align: left;
}

.alw-adminbar .muted {
  color: rgba(255,255,255,.45);
  font-size: 0.78rem;
}

.alw-adminbar .admin-actions {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
}

/* Godkendt + Afvist på samme række */
.alw-adminbar .status-row {
  display: flex;
  gap: 8px;
}

/* Ansøgninger-knap fylder bredden af actions-kolonnen */
.alw-adminbar .admin-tools {
  width: 100%;
  display: flex;
  justify-content: flex-end;
}

.admin-select {
  min-width: 200px;
  height: 40px;
  padding: 8px 10px;
}

.admin-btn {
  height: 40px;
  padding: 8px 14px;
  line-height: 1;
}

/* Titel/sektioner – som i din form */
.alw-title {
  text-align: center;
  margin: 6px 0 12px;
}

.section-header {
  text-align: center;
  margin: 20px 0 14px;
  border-bottom: 1px solid rgba(59,130,246,.15);
  padding-bottom: 12px;
}

.section-header h2 {
  font-size: clamp(22px, 3.8vw, 32px);
  margin: 0;
  color: rgba(255,255,255,.92);
}

.section-header .section-subtitle {
  color: rgba(255,255,255,.45);
  margin: 4px 0 0;
  font-size: 0.95rem;
}

/* Formular-visning (read-only) */
.alw-form-view .alw-control.readonly[readonly] {
  width: 100%;
  background: rgba(255,255,255,.04);
  color: rgba(255,255,255,.92);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 10px;
  padding: 10px 12px;
}

textarea.alw-control {
  overflow: hidden;
  resize: none;
}

textarea.alw-control.readonly[readonly] {
  overflow: hidden;
  resize: none;
}

.form-group {
  margin-bottom: 16px;
  text-align: left !important;
}

.alw-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

@media (max-width: 640px) {
  .alw-grid {
    grid-template-columns: 1fr;
  }
}

/* Radio look (disabled) */
.radio-label {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #fff;
  margin: 4px 0;
}

.radio-input {
  appearance: none;
  width: 18px;
  height: 18px;
  border: 2px solid rgba(255,255,255,.20);
  border-radius: 50%;
  background: rgba(255,255,255,.05);
  display: inline-grid;
  place-items: center;
  margin: 0;
  cursor: pointer;
}

.radio-input::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  transform: scale(0);
  background: #fff;
}

.radio-input:checked::before {
  transform: scale(1);
}

/* “Other” felt – vis kun når relevant */
.other-input {
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition: max-height 0.25s, opacity 0.2s;
  margin-top: 10px;
}

.other-input.show {
  max-height: 80px;
  opacity: 1;
}

/* Knapper */
.btn.outline {
  background: transparent;
  border: 1px solid #4a6fa5;
}

/* Lille række så boks + tekst står på SAMME linje */
.accept-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* Overstyr arvede input-regler så checkboxen ikke bliver “inputfelt” */
.alw-form .accept-row input[type="checkbox"] {
  /* fjern typiske arvede ting */
  width: 16px;
  height: 16px;
  margin: 0;
  padding: 0;
  border: none;
  background: transparent;
  box-shadow: none;
  outline: none;

  /* brug native checkbox med din farve */
  -webkit-appearance: checkbox;
  appearance: checkbox;
  accent-color: #4a90e2;

  flex: 0 0 auto;
}

/* Teksten skal ikke tvinges til block */
.alw-form .accept-row label {
  display: inline;
  /* vigtigt ift. globale label regler */
  margin: 0;
  color: rgba(255,255,255,.80);
  line-height: 1.35;
}

/* lidt luft over sektionen, så den matcher resten */
.form-group.accept-wait {
  margin-top: 12px;
}

/* lidt luft over sektionen, så den matcher resten */
.form-group.accept_18age {
  margin-top: 12px;
}

.accept-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.accept-row input[type="checkbox"] {
  width: 16px;
  height: 16px;
  margin: 0;
  padding: 0;
  border: none;
  background: transparent;
  box-shadow: none;
  -webkit-appearance: checkbox;
  appearance: checkbox;
  accent-color: #3b82f6;
}

.badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 0.8rem;
  line-height: 1.2;
}

.badge-ok {
  background: #284e2f;
  color: #bff0c8;
  border: 1px solid #3b7a48;
}

.badge-no {
  background: #4a2a2a;
  color: #ffd1d1;
  border: 1px solid #7a3b3b;
}

.discord-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  border-radius: 8px;
  background-color: #5865F2;
  color: #fff;
  font-weight: 600;
  font-size: 14px;
  text-decoration: none;
  transition: background 0.2s ease;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}

.discord-btn:hover {
  background-color: #4752C4;
}

.discord-btn svg {
  width: 20px;
  height: 20px;
}

.hint {
  display: block;
  margin-top: 5px;
  font-size: 12px;
  color: #aaa;
}

.btn-custom {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  /* afstand mellem tekst og spinner */
  position: relative;
}

.spinner {
  display: none;
  /* skjult som standard */
  width: 16px;
  height: 16px;
  border: 2px solid #fff;
  border-top-color: transparent;
  border-radius: 50%;
  animation: spin 0.6s linear infinite;
}

.btn-custom.loading .spinner {
  display: inline-block;
}

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

.status-banner {
  max-width: 750px;
  /* matcher formens bredde */
  margin: 0 auto 20px auto;
}

.status-alert {
  border-radius: 8px;
  padding: 15px;
  font-weight: bold;
}

/* Specifikke farver */
.status-alert.alert-success {
  background-color: #28a745;
  /* grøn */
  color: #fff;
}

.status-alert.alert-info {
  background-color: #007bff;
  /* blå */
  color: #fff;
}

.status-alert.alert-danger {
  background-color: #dc3545;
  /* rød */
  color: #fff;
}

.status-alert.alert-warning {
  background-color: #ffc107;
  /* gul/orange */
  color: #000;
}

.status-row {
  display: flex;
  flex-direction: row;
  /* tving horisontalt layout */
  justify-content: flex-start;
  gap: 10px;
  margin-bottom: 10px;
}

.admin-tools {
  margin-top: 10px;
  display: flex;
  gap: 10px;
}

/* Ens størrelse for alle knapper */
.btn-status {
  flex: 1 1 0;
  /* gør dem alle lige brede */
  min-width: 135px;
  /* sikrer plads til tekst + loader */
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 8px 14px;
  font-weight: 400;
}

.btn-status-no-load {
  flex: 1 1 0;
  /* gør dem alle lige brede */
  min-width: 135px;
  /* sikrer plads til tekst + loader */
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 8px 14px;
  font-weight: 400;
}


/* Farver */
.btn-pending {
  background: #243b52;
  /* afdæmpet blå/grålig */
  border-color: #243b52;
  color: #fff;
}

.btn-pending:hover {
  background: #2563eb;
  border-color: #1d4ed8;
}

.btn-approve {
  background: #2e7d32;
  /* grøn */
  border-color: #2e7d32;
  color: #fff;
}

.btn-approve:hover {
  background: #296b2d;
  border-color: #265f28;
}

.btn-reject {
  background: #c0392b;
  /* rød */
  border-color: #c0392b;
  color: #fff;
}

.btn-reject:hover {
  background: #a93226;
  border-color: #9c2e23;
}

/* Lille cirkulær spinner til knapper */
.btn-status .spinner {
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-top: 2px solid #fff;
  border-radius: 50%;
  width: 14px;
  height: 14px;
  display: inline-block;
  animation: spin 0.6s linear infinite;
  margin-left: 6px;
  /* afstand fra tekst */
  vertical-align: middle;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

.member-check .readonly-checkbox {
  display: flex;
  align-items: center;
  gap: 10px;
}

.member-check input[type=checkbox] {
  width: 18px;
  height: 18px;
  margin: 0;
  pointer-events: none;
  /* “read-only” */
}

.alw-alert {
  border-radius: 8px;
  padding: 10px 12px;
  font-size: .95rem;
}

.alw-alert-danger {
  background: #2A1E1E;
  border: 1px solid #A94141;
  color: #F1C9C9;
}

.mt-2 {
  margin-top: 8px;
}

textarea.ba-autosize {
  overflow-y: hidden;
}

.alw-title {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 6px
}

.alw-title h1 {
  margin: 0;
  text-align: center
}

.toolbar {
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
  margin: 10px 0 14px;
  flex-wrap: wrap
}

.toolbar .alw-control {
  flex: 1;
  min-width: 260px
}

.table-wrap {
  overflow: auto;
  border-radius: 10px;
  border: 1px solid #1a2035
}

.alw-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0
}

.alw-table thead th {
  position: sticky;
  top: 0;
  background: #0a0f1a;
  border-bottom: 1px solid #1a2035;
  text-align: left;
  padding: 10px;
  font-weight: 600;
  z-index: 1
}

.alw-table thead tr.filters th {
  position: sticky;
  top: 42px;
  background: #0a0f1a;
  z-index: 1
}

.flt {
  width: 100%;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 8px;
  padding: 6px 8px;
  color: rgba(255,255,255,.92);
}

.ageflt {
  display: flex;
  gap: 6px
}

/* Mindre tekst i tabellens rækker */
.alw-table tbody td {
  font-size: 13px;
  /* var ~14–15px */
  padding: 8px 10px;
  /* lidt strammere vertikal spacing */
}

/* Token (code) og badges lidt mindre */
.alw-table tbody td code {
  font-size: 11px;
  padding: 1px 6px;
  border-radius: 6px;
}

/* Den grå, sekundære tekst (fx datoen under "Behandlet af") lidt mindre */
.muted {
  font-size: 11px;
  opacity: 0.7;
}

/* Header i forvejen mindre – hvis du vil stramme den en tand mere, brug: */
/*
.alw-table thead th {
  font-size: 12.5px;
  padding: 5px 6px;
}
*/

.badge {
  display: inline-block;
  padding: 2px 6px;
  border-radius: 999px;
  font-size: 11px;
  border: 1px solid transparent;
  white-space: nowrap
}

.badge.ok {
  background: #19391f;
  border-color: #295c33;
  color: #8ce4a7
}

.badge.bad {
  background: #3a2325;
  border-color: #6a2e34;
  color: #ffb3b8
}

.badge.warn {
  background: #3b3116;
  border-color: #6a5a24;
  color: #ffe07a
}

.badge.info {
  background: #173046;
  border-color: #274c6a;
  color: #bcdcff
}

.alw-table thead th {
  position: sticky;
  top: 0;
  background: #0a0f1a;
  border-bottom: 1px solid #1a2035;
  text-align: left;
  padding: 6px 8px;
  font-weight: 600;
  vertical-align: bottom;
}

.flt {
  width: 100%;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 6px;
  color: rgba(255,255,255,.92);
}

.flt--thin {
  padding: 2px 4px;
  font-size: 11px;
  margin-top: 4px;
  display: block;
}

/* Header & tabel */
.alw-table thead th {
  position: sticky;
  top: 0;
  background: #0a0f1a;
  border-bottom: 1px solid #1a2035;
  text-align: left;
  padding: 6px 8px;
  font-weight: 600;
  vertical-align: bottom;
}

/* Popover menus */
.has-menu {
  position: relative
}

.th-btn {
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(59,130,246,.18);
  border-radius: 8px;
  padding: 4px 8px;
  color: rgba(255,255,255,.85);
  cursor: pointer;
  font-size: 12px;
  transition: background .15s ease, border-color .15s ease;
}

.th-btn:hover {
  background: rgba(59,130,246,.10);
  border-color: rgba(59,130,246,.35);
}

.th-btn:focus {
  outline: 1px solid #3b82f6;
  outline-offset: 2px
}

/* Popover generelt: skjult som default, vis når .open */
.th-menu { display: none; }
.th-menu.open { display: block; }

/* Status-menu: kompakt og lodret — men IKKE tvunget til at være åben */
#menuStatus {
  min-width: 0;
  width: max-content;   /* shrink-to-fit badges */
  padding: 4px;
  /* ingen display her! */
}

#menuStatus .mitem {
  display: block;       /* én pr. linje */
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0;
  margin: 4px 0;
}

#menuStatus .badge {
  display: block;       /* hele badgen er klikbar */
  font-size: 11px;
  padding: 2px 6px;
}


/* var før: .th-menu { position:absolute; ... } */
.th-menu {
  position: fixed;
  /* IMPORTANT */
  min-width: 180px;
  background: rgba(8,12,22,.96);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(59,130,246,.20);
  border-radius: 10px;
  box-shadow: 0 12px 32px rgba(0,0,0,.50);
  padding: 6px;
  display: none;
  z-index: 1000;
  max-height: 70vh;
  overflow: auto;
}

.th-menu-wide {
  min-width: 260px
}

.th-menu.open {
  display: block
}


.mitem {
  width: 100%;
  text-align: left;
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(59,130,246,.12);
  border-radius: 8px;
  padding: 6px 8px;
  margin: 4px 0;
  color: rgba(255,255,255,.92);
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease;
}

.mitem:hover {
  background: rgba(59,130,246,.10);
  border-color: rgba(59,130,246,.28);
}

.menu-input {
  width: 100%;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 8px;
  padding: 6px 8px;
  color: rgba(255,255,255,.92);
  margin-bottom: 6px;
}

.menu-list {
  max-height: 220px;
  overflow: auto
}

.menu-list .mitem {
  margin: 3px 0
}

/* Chips til aktive filtre */
.chips {
  display: flex;
  gap: 6px;
  flex-wrap: wrap
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(59,130,246,.12);
  border: 1px solid rgba(59,130,246,.28);
  color: rgba(255,255,255,.90);
  border-radius: 999px;
  padding: 2px 8px;
  font-size: 12px;
}

.chip button {
  border: 0;
  background: transparent;
  color: #bbb;
  cursor: pointer;
  padding: 0 2px;
}

.chip button:hover {
  color: #fff
}
/* neutral badge til "Alle" */
.badge.neu{ background:rgba(255,255,255,.06); border-color:rgba(255,255,255,.14); color:#e5e7eb }

/* gør knappen klar til badge-indhold */
.th-btn{
  display:inline-flex; align-items:center; gap:6px;
  background:rgba(255,255,255,.04); border:1px solid rgba(59,130,246,.18); border-radius:8px;
  padding:4px 8px; color:rgba(255,255,255,.85); cursor:pointer; font-size:12px;
}
.th-btn .badge{ pointer-events:none } /* klik rammer knappen, ikke badgen */

/* Top menu */
.ndrp-topmenu{
  position: sticky; top:0; z-index:1031;
  /* backdrop-filter IKKE her — det skaber et containing block for position:fixed børn
     og får popovers til at gå bag om sideindholdet.
     Brug ::before pseudo-element til blur i stedet. */
  background: transparent;
  border-bottom: 1px solid #1a2035;
}
.ndrp-topmenu::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(23,26,29,.85);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  z-index: -1;
  pointer-events: none;
}
.ndrp-topmenu__inner{
  max-width: 1200px; margin: 0 auto;
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 12px; gap: 12px;
}

/* Venstre side: brand + splitter + knapper */
.ndrp-left{ display:flex; align-items:center; gap:8px; }
.ndrp-left .dropdown-menu { z-index: 2000; }
.ndrp-brand{
  color:#e5e7eb; font-weight:700; text-decoration:none;
  white-space:nowrap;
}
.ndrp-splitter{
  width:1px; height:22px; background:#1a2035;
  margin:0 6px; border-radius:1px;
}

/* Knapper */
.ndrp-link{
  padding:6px 10px; border:1px solid #1a2035; border-radius:10px;
  background:#070a14; color:#e5e7eb; text-decoration:none; font-size:13px;
}
.ndrp-link:hover{ background:#0a0f1a }

/* Højre side: brugernavn */
.ndrp-topmenu__user{ color:#cbd5e1; font-size:13px; white-space:nowrap; }

/* Fjern pilene i number inputs */
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

input[type=number] {
  -moz-appearance: textfield; /* Firefox */
}
/* Fast to-linje-layout i 'Behandlet af'-cellen */
.reviewer-cell { line-height: 1.15; }
.reviewer-cell .name { display:block; }
.reviewer-cell .sub  { display:block; height: 1.15em; }  /* reserver plads til 2. linje */
.reviewer-cell .sub.placeholder { visibility: hidden; }  /* optager stadig plads */

/* ----  */

  /* === Palette matchet til allowlist === */
  :root{
    --bg:#080c16;          /* body bg */          /* style.css */
    --surface:#0d1220;     /* card/form bg */     /* style.css */
    --surface-2:#0a0f1a;   /* sekundær flade */   /* style.css */
    --border:#1a2035;      /* ramme */            /* style.css */
    --text:rgba(255,255,255,.92); /* primær tekst */    /* style.css */
    --muted:rgba(255,255,255,.55);/* sekundær tekst */ /* style.css */
    --accent:#3b82f6;      /* brand accent */     /* style.css */
    --accentLite:#60a5fa;  /* lys accent */       /* style.css */
    --purple:#8b5cf6;      /* lilla accent */     /* loading screen */
    --cyan:#06b6d4;        /* cyan accent */      /* loading screen */
    --shadow:0 10px 28px rgba(0,0,0,.45);
    --radius:16px;
  }
  body{ background:var(--bg); }

  .nd-wrap{ max-width:1100px; margin:0 auto; }
  .heading{ color:var(--text); text-align:center; font-weight:800; letter-spacing:.3px; margin-bottom:12px; }

  /* === Playtime panel === */
  .panel{
    background:
      radial-gradient(120% 120% at -10% -10%, rgba(59,130,246,.12), transparent 45%),
      radial-gradient(140% 140% at 110% -20%, rgba(59,130,246,.12), transparent 50%),
      var(--surface);
    border:1px solid var(--border);
    border-radius:var(--radius);
    box-shadow:var(--shadow);
  }
  .panel-row{ padding:18px 20px; display:flex; gap:14px; align-items:center; }
  .chip{
    display:inline-flex; gap:8px; align-items:center;
    padding:6px 12px; border-radius:6px;
    background:var(--surface-2);
    border:1px solid var(--border);
    color:var(--muted); font-size:.9rem;
  }
  .time-str{ font-weight:800; color:var(--text); font-size:1.15rem; }

  /* === Character card === */
  .cardX{
    background:var(--surface);
    border:1px solid var(--border);
    border-radius:var(--radius);
    box-shadow:var(--shadow);
    overflow:hidden;
  }
  .cardX-header{
    display:flex; gap:14px; align-items:center;
    padding:16px 18px;
    background:
      radial-gradient(120% 120% at -10% -10%, rgba(59,130,246,.10), transparent 45%),
      radial-gradient(140% 140% at 110% -20%, rgba(59,130,246,.08), transparent 50%),
      var(--surface);
    border-bottom:1px solid var(--border);
  }
  .avatar{
    width:56px; height:56px; border-radius:50%;
    border:2px solid var(--accent);
    box-shadow:0 0 0 4px rgba(59,130,246,.16), 0 6px 16px rgba(0,0,0,.25);
    flex:0 0 auto;
  }
  .title{ margin:0; color:var(--text); font-weight:800; }
  .meta{ color:var(--muted); font-size:.9rem; }

  .cardX-body{ padding:16px 18px; display:grid; gap:18px; }
  .section-label{
    color:var(--muted); font-size:.75rem; letter-spacing:.6px;
    text-transform:uppercase; text-align:center;
  }
  .stat-grid{ display:grid; gap:10px; grid-template-columns:repeat(2, minmax(0,1fr)); }
  @media (max-width:768px){ .stat-grid{ grid-template-columns:1fr; } }
  .stat{
    background:var(--surface-2);
    border:1px solid var(--border);
    border-radius:6px; padding:12px 14px;
  }
  .stat small{ color:var(--muted); display:block; margin-bottom:2px; }
  .stat strong{ color:var(--text); font-weight:800; }

  /* === Garage === */
  .garage-btn.btn{
    --bs-btn-color:var(--text);
    --bs-btn-border-color:var(--border);
    --bs-btn-hover-border-color:var(--accent);
    --bs-btn-bg:transparent;
    --bs-btn-hover-bg:rgba(59,130,246,.12);
    border-radius:6px;
  }
  .vehicle-item .inner{
    background:var(--surface-2);
    border:1px solid var(--border);
    border-radius:6px; padding:12px 14px; color:var(--text);
  }
  .vehicle-item small{ color:var(--muted); }

  /* === Pagination (reuse din stil men match farver) === */
  .pagination .page-link{
    background:var(--surface-2); border-color:var(--border); color:var(--text);
  }
  .pagination .active .page-link{
    background:var(--accent); border-color:var(--accent); color:#fff;
  }
  /* === Sektion-rammer for tydelig opdeling === */
.section {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 14px;
}

.section + .section { margin-top: 16px; }

/* Sektion-header med accent-linje */
.section-head {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 12px; position: relative;
}
.section-head .badge {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 10px; border-radius: 6px;
  background: rgba(59,130,246,.12);        /* matcher allowlist accent */
  border: 1px solid var(--border);
  color: var(--text); font-weight: 700; font-size: .9rem;
}
.section-head::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, #3b82f6 0%, #8b5cf6 40%, rgba(6,182,212,0) 100%);
  margin-left: 12px;
  border-radius: 1px;
}

/* Stat grid genbruges – men en smule mere luft */
.section .stat-grid { gap: 12px; }
.section .stat {
  background: rgba(255,255,255,.035);
  border: 1px solid rgba(255,255,255,.08);
}

/* --- Garage: venstrestil alt indhold --- */
.vehicle-item .inner{
  display:flex;               /* vi styrer layout selv */
  align-items:flex-start;
  gap:10px;
  text-align:left;            /* override evt. arvet center */
}

.vehicle-item .inner .vicon{
  flex:0 0 auto;
  line-height:1;
  margin-top:2px;             /* optisk justering mod tekstlinjen */
}

.vehicle-item .inner .vtxt{
  flex:1 1 auto;
  text-align:left;            /* sikker venstrestilling */
}

.vehicle-item .inner .vtxt strong,
.vehicle-item .inner .vtxt small{
  display:block;
  text-align:left;            /* hårdt override hvis noget andet rammer */
}
/* ===== XP section ===== */
.section.xp { /* samme kasse som Økonomi men med let accent-glow */
  background:
    radial-gradient(120% 120% at -10% -10%, rgba(59,130,246,.10), transparent 45%),
    radial-gradient(140% 140% at 110% -20%, rgba(59,130,246,.08), transparent 50%),
    var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 14px;
}

.section.xp .section-head .badge {
  background: rgba(59,130,246,.16);
  border: 1px solid var(--border);
}

/* indre layout */
.stat-wide{ grid-column: 1 / -1; }

/* To KPI-bokse: samme bredde, samme højde */
.xp-kpis[data-cols="2"]{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr)); /* 2 lige kolonner */
  gap: 10px;
}

@media (max-width: 768px){
  .xp-kpis[data-cols="2"]{
    grid-template-columns: 1fr; /* stack på mobil */
  }
}

/* sørg for de strækker lige højt */
.xp-kpis[data-cols="2"] > .kpi{
  align-self: stretch;
  height: 100%;
  min-width: 0;          /* undgå overflow ved lange tal */
}

/* små KPI-piller */
.kpi{
  display:flex; align-items:center; gap:8px;
  padding:8px 10px; border-radius:12px;
  background: var(--surface);
  border: 1px solid var(--border);
}
.kpi i{ opacity:.9 }
.kpi .k-title{ color: var(--muted); font-size:.85rem; line-height:1; }
.kpi .k-value{ color: var(--text); font-weight:800; line-height:1; }

/* progressbar */
.xp-bar{
  position: relative;
  height: 12px; border-radius: 999px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.10);
  overflow: hidden;
  box-shadow: inset 0 1px 3px rgba(0,0,0,.35);
}
.xp-bar > span{
  display:block; height:100%; width:0%;
  transition: width .4s ease;
  background: linear-gradient(90deg,#2e7d32,#43a047); /* default -> grøn */
  box-shadow: 0 0 12px rgba(67,160,71,.35);
}

/* farveskema fra din logik */
.xp-bar[data-color="red"]    > span{ background:linear-gradient(90deg,#b71c1c,#e53935); box-shadow:0 0 12px rgba(229,57,53,.35);}
.xp-bar[data-color="yellow"] > span{ background:linear-gradient(90deg,#f9a825,#fbc02d); box-shadow:0 0 12px rgba(251,192,45,.35);}
.xp-bar[data-color="green"]  > span{ background:linear-gradient(90deg,#2e7d32,#43a047); box-shadow:0 0 12px rgba(67,160,71,.35);}

/* hjælpetekst under baren */
.xp-sub{
  color: var(--muted);
  font-size:.9rem;
  margin-top: 6px;
  display:flex; align-items:center; gap:8px;
}

/* ========= Compact typography for values ========= */
:root{
  /* justér frit hvis du vil endnu mindre */
  --fs-value: 0.95rem;   /* tal-værdier (bank, kontanter, løn, level) */
  --fs-muted: 0.85rem;   /* labels/undertekster */
  --fs-body : 0.95rem;   /* generel tekst i kort */
  --fw-value: 600;       /* var 700/800 før */
  --fw-muted: 500;
}

/* generel tekst i kort */
.cardX-body{ font-size: var(--fs-body); }

/* stat-bokse (fx Kontanter/Bank/Løn) */
.stat small{
  font-size: var(--fs-muted);
  font-weight: var(--fw-muted);
}
.stat strong{
  font-size: var(--fs-value);
  font-weight: var(--fw-value);
}

/* KPI-piller i XP-sektionen */
.kpi .k-title{
  font-size: var(--fs-muted);
  font-weight: var(--fw-muted);
}
.kpi .k-value{
  font-size: var(--fs-value);
  font-weight: var(--fw-value);
}

/* XP-tekster under baren */
.xp-sub{
  font-size: var(--fs-muted);
  font-weight: var(--fw-muted);
}
.xp-sub strong{
  font-size: var(--fs-muted);
  font-weight: var(--fw-value);
}

/* Garage-tiles – tekst mindre og venstrestillet */
.vehicle-item .inner .vtxt strong{
  font-size: var(--fs-value);
  font-weight: var(--fw-value);
}
.vehicle-item .inner .vtxt small{
  font-size: var(--fs-muted);
  font-weight: var(--fw-muted);
}

/* Øvrige badges/sektionstitler en tand mindre */
.section-head .badge{
  font-size: 0.9rem;
  font-weight: 700; /* behold lidt vægt for læsbar header */
}

/* Playtime-top – gør tidsstrengen lidt mindre */
.time-str{
  font-size: 1.05rem;    /* var 1.2rem */
  font-weight: 700;      /* var 800 */
}

/* ===== XP layout v2 (pænere) ===== */
.xp-layout{
  display:grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-areas:
    "k1 k2"
    "bar bar"
    "meta meta";
  gap:12px;
}

/* stack på mobil */
@media (max-width:768px){
  .xp-layout{
    grid-template-columns: 1fr;
    grid-template-areas:
      "k1"
      "k2"
      "bar"
      "meta";
  }
}

/* KPI-bokse: samme bredde/højde */
.kpi2{
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 10px 12px;
  display:flex; align-items:center; gap:10px;
  height:100%; min-width:0;
}
.kpi2 i{ opacity:.9 }
.kpi2 .title{ color:var(--muted); font-size:var(--fs-muted); line-height:1; }
.kpi2 .value{ color:var(--text); font-size:var(--fs-value); font-weight:var(--fw-value); }

/* grid-areas så de to fylder 50/50 */
.kpi2.level    { grid-area: k1; }
.kpi2.progress { grid-area: k2; }

/* Progressbar på fuld bredde */
.xp-layout .xp-bar{ grid-area: bar; }
.xp-bar{
  position: relative;
  height: 12px; border-radius: 999px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.10);
  overflow: hidden;
  box-shadow: inset 0 1px 3px rgba(0,0,0,.35);
}
.xp-bar > span{
  display:block; height:100%; width:0%;
  transition: width .35s ease;
  background: linear-gradient(90deg,#2e7d32,#43a047);
  box-shadow: 0 0 12px rgba(67,160,71,.35);
}
/* Meta-linje under baren */
.xp-layout .xp-sub{
  grid-area: meta;
  display:flex; align-items:center; gap:8px; flex-wrap:wrap;
  color:var(--muted); font-size:var(--fs-muted);
}
.xp-layout .xp-sub strong{ font-weight:var(--fw-value); }

/* ===== XP clean layout ===== */
.xp-clean .xp-stats{
  display:flex; gap:12px;
}
@media (max-width:768px){
  .xp-clean .xp-stats{ flex-direction:column; }
}

.xp-clean .kpi-chip{
  flex:1 1 0;
  display:flex; align-items:center; justify-content:space-between;
  padding:10px 12px;
  border-radius:6px;
  background:var(--surface);
  border:1px solid var(--border);
  min-width:0;
}
.xp-clean .kpi-chip .left{
  display:flex; align-items:center; gap:8px; min-width:0;
}
.xp-clean .kpi-chip i{ opacity:.9 }
.xp-clean .kpi-chip .label{
  color:var(--muted); font-size:var(--fs-muted); white-space:nowrap;
}
.xp-clean .kpi-chip .value{
  color:var(--text); font-size:var(--fs-value); font-weight:var(--fw-value);
  font-variant-numeric: tabular-nums; /* pænere tal-align */
  margin-left:12px; white-space:nowrap;
}

/* bar + meta genbruges – bare lidt luft */
.xp-clean .xp-bar{ margin-top:10px; }
.xp-clean .xp-sub{ justify-content:flex-start; margin-top:8px; }

.xp-bar{ height:12px; border-radius:999px; background:rgba(255,255,255,.06);
         border:1px solid rgba(255,255,255,.10); overflow:hidden; }
.xp-bar > span{ display:block; height:100%; width:0%; transition:width .35s ease; }

/* colors by threshold */
.xp-bar[data-color="red"]    > span{ background:linear-gradient(90deg,#b71c1c,#e53935); }
.xp-bar[data-color="yellow"] > span{ background:linear-gradient(90deg,#f9a825,#fbc02d); }
.xp-bar[data-color="green"]  > span{ background:linear-gradient(90deg,#2e7d32,#43a047); }

/* Chip-knap */
.ndrp-chip{
  display:inline-flex; align-items:center; gap:8px;
  padding:6px 12px; border:1px solid #1a2035; border-radius:999px;
  background:linear-gradient(180deg,#15181b,#101315);
  color:#e5e7eb; font-size:13px; line-height:1;
  box-shadow:0 2px 6px rgba(0,0,0,.25);
  transition:transform .12s ease, border-color .2s ease, box-shadow .2s ease;
}
.ndrp-chip:hover{ transform:translateY(-1px); border-color:#3a3f44; box-shadow:0 6px 14px rgba(0,0,0,.35); }
.ndrp-chip i{ font-size:14px; opacity:.9; }

/* Liten pulserende dot */
.ndrp-pulse{
  width:7px; height:7px; border-radius:50%;
  background:#22c55e; box-shadow:0 0 0 rgba(34,197,94,.4);
  position:relative;
}
.ndrp-pulse::after{
  content:""; position:absolute; inset:0; border-radius:inherit;
  animation:ndrp-pulse 1.6s ease-out infinite;
  box-shadow:0 0 0 0 rgba(34,197,94,.45);
}
@keyframes ndrp-pulse{
  0%{ transform:scale(1); box-shadow:0 0 0 0 rgba(34,197,94,.45);}
  70%{ transform:scale(1.6); box-shadow:0 0 0 8px rgba(34,197,94,0);}
  100%{ transform:scale(1); box-shadow:0 0 0 0 rgba(34,197,94,0);}
}

/* Popover */
.ndrp-popover{
  position:fixed; z-index:9999; display:none;
  min-width:280px; max-width:340px;
  background:rgba(18,21,24,.92); backdrop-filter: blur(8px);
  border:1px solid #1a2035; border-radius:12px; overflow:hidden;
  box-shadow:0 20px 40px rgba(0,0,0,.45);
}
.ndrp-popover.open{ display:block; }
.ndrp-popover-header{
  display:flex; align-items:center; justify-content:space-between;
  gap:8px; padding:10px 12px; border-bottom:1px solid #1a2035;
}
.ndrp-popover-header i{ margin-right:6px; }
.ndrp-popover-header span{ font-weight:600; color:#e5e7eb; display:inline-flex; align-items:center; gap:8px; }
.ndrp-close{
  appearance:none; background:transparent; border:0; color:#9aa3ac;
  font-size:20px; line-height:1; padding:0 4px; cursor:pointer;
}
.ndrp-popover-body{ max-height:300px; overflow:auto; padding:8px; }
.ndrp-popover-foot{
  display:flex; align-items:center; justify-content:space-between;
  padding:8px 12px; border-top:1px solid #1a2035;
}

/* Listeelementer */
.ndrp-user-row{
  display:flex; align-items:center; justify-content:space-between;
  gap:10px; padding:8px 10px; border-radius:10px;
  border:1px solid transparent; transition:background .15s ease, border-color .15s ease;
}
.ndrp-user-row:hover{ background:#050912; border-color:#1a2035; }
.ndrp-user-name{ color:#e5e7eb; font-size:13px; }
.ndrp-user-since{ color:#9aa3ac; font-size:12px; }

/* Skeleton loading */
.ndrp-popover-body.is-loading .ndrp-skel-line{
  height:12px; margin:8px 0; border-radius:6px;
  background:linear-gradient(90deg,#1b1f23 25%,#242a2f 37%,#1b1f23 63%);
  background-size:400% 100%; animation:ndrp-shimmer 1.2s ease-in-out infinite;
}
@keyframes ndrp-shimmer{
  0%{ background-position:200% 0;}
  100%{ background-position:-200% 0;}
}

/* Mini knap i foot */
.ndrp-mini{
  font-size:12px; padding:4px 8px; border-radius:8px;
  border:1px solid #1a2035; background:#070a14; color:#e5e7eb;
}
.ndrp-mini:hover{ background:#0a0f1a; }

/* Højre sektion som række */
.ndrp-right{ display:flex; align-items:center; gap:10px; }

/* Lille, diskret splitter mellem chip og brugernavn */
.ndrp-splitter--micro{
  width:1px; height:18px;
  background:#1a2035;
  opacity:.8;
  margin:0 2px;
  border-radius:1px;
}

/* Brugernavn */
.ndrp-user{ color:#cbd5e1; font-size:13px; white-space:nowrap; }

.styled-custom-car-box {
  position: relative;
  /* border-left: 3px solid #3b82f6; */
  /* primær accent */
  /* border-right: 3px solid #3b82f6; */
  border-radius: 3px;
  /* left: -12px; */
  top: 0px;
  padding: 2px 6px;
  margin: 10px auto;
  /* background-color: rgba(62, 89, 124, 0.15); */
  background-color: #3b82f6;
  /* gennemsigtig accent */
  color: #E5E9F0;
  /* lys grå tekst */
  max-width: 1000px;
  text-align: left;
  font-weight: 600;
  font-size: 0.7rem;
}

/* Smooth fade på tab-skift + undgå scrollbar */
#switchShell {
  transition: opacity .22s ease, transform .22s ease;
  will-change: opacity, transform;
}
#switchShell.fading {           /* når vi er på vej ud */
  opacity: 0;
  transform: translateY(6px);
}
#switchShell.lock {             /* lås højde/scroll under swap */
  overflow: hidden;
}
.tab { position: relative; }
.count-badge{
  position:absolute; top:-6px; right:-6px;
  min-width:18px; height:18px; line-height:18px;
  padding:0 6px;
  border-radius:999px;
  font-size:11px; font-weight:700; text-align:center;
  background:#FF0000;           /* lilla pill */
  border:1px solid #1a2035;     /* matcher dit tema */
  color:#fff;
  pointer-events:none;           /* klik går stadig på tab-knappen */
  transform:translateZ(0);       /* undgår flimren */
}
  .alw-adminbar { background:#080c16; border:1px solid #1a2035; border-radius:12px; padding:14px; margin-bottom:16px; }
  .admin-meta { display:flex; gap:18px; flex-wrap:wrap; align-items:center; text-align:left; }
  .admin-actions { display:flex; gap:12px; align-items:center; justify-content:space-between; margin:12px 0; flex-wrap:wrap; }
  .admin-reply { margin-top:8px; }
  .reply-label { display:block; font-weight:600; margin-bottom:6px; }
  .reply-textarea { width:100%; min-height:110px; }
  .reply-actions { margin-top:8px; }
  .alw-title-main { margin-top:8px; }

  #nav-bell.has-unread::after {
  content:""; position:absolute; top:-2px; right:-2px; width:9px; height:9px;
  background:#e74c3c; border-radius:50%;
}


/* ---------- Profile dropdown (NewDayRP style) ---------- */

/* Knap: brand-farver, ingen blå bootstrap-aktiv */
.navbar .profile-toggle {
  background-color: #1e40af; /* steel blue */
  border-color: #2f4259;
  color: #fff;
}
.navbar .profile-toggle:hover {
  background-color: #2563eb;
  color: #fff;
}
.navbar .profile-toggle:focus,
.navbar .profile-toggle:active,
.navbar .show > .profile-toggle.dropdown-toggle {
  background-color: #3b82f6;
  border-color: #2563eb;
  color: #fff;
  outline: none;
  box-shadow: 0 0 0 .2rem rgba(175, 193, 255, .25);
}

/* Avatar ring + størrelse styres via variabler */
:root {
  --nav-avatar: 24px;
  --nav-avatar-border: 2px;
  --nav-vpad: 2.5px; /* finjuster 2–3px for højden (~33px total) */
}
.navbar .profile-toggle img.rounded-circle {
  width: var(--nav-avatar);
  height: var(--nav-avatar);
  border: var(--nav-avatar-border) solid rgba(255,255,255,.25);
}

/* Ens højde på ALLE navbar-knapper */
.navbar .btn.btn-sm {
  height: calc(var(--nav-avatar) + 2*var(--nav-avatar-border) + 2*var(--nav-vpad));
  padding: 0 .75rem;                /* kun vandret padding = stabil højde */
  display: inline-flex;
  align-items: center;
  line-height: 1;
}

/* Dropdown-menu: mørk og rund */
.profile-menu {
  --bs-dropdown-bg: #0d1220;
  --bs-dropdown-border-color: transparent;
  --bs-dropdown-link-color: #e5e7eb;
  --bs-dropdown-link-hover-bg:rgba(59,130,246,.12);
  --bs-dropdown-link-hover-color: #ffffff;
  --bs-dropdown-divider-bg: rgba(255,255,255,.08);

  padding: .35rem;
  min-width: 220px;
  border-radius: .75rem;
  box-shadow: 0 12px 30px rgba(0,0,0,.35);
}

.profile-menu .dropdown-item {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .55rem .75rem;
  border-radius: .5rem;
}
.profile-menu .dropdown-item i { opacity: .9; }
.profile-menu .dropdown-item.text-danger { color: #f87171 !important; }
.profile-menu .dropdown-item.text-danger:hover {
  background: rgba(239,68,68,.12);
  color: #fecaca !important;
}
.profile-menu .dropdown-divider {
  margin: .35rem .25rem;
  border-top: 1px solid var(--bs-dropdown-divider-bg);
}

/* Caret-ikon (HTML-baseret) */
.caret-icon{
  font-size: .95rem;
  color: rgba(255,255,255,.95);
  line-height: 1;
  transition: transform .15s ease, opacity .15s ease;
  opacity: .95;
  text-shadow: 0 1px 1px rgba(0,0,0,.35);
}
.nav-item.dropdown.show .caret-icon{
  transform: rotate(180deg);
}

/* Små skærme: undgå at navnet klemmer */
@media (max-width: 420px) {
  .navbar .profile-toggle .text-truncate { max-width: 110px !important; }
}
/* Synlig CSS-caret (triangel) på profil-dropdown */
:root{
  --caret-w: .42rem;   /* vandret “halv-bredde”  */
  --caret-h: .38rem;   /* højde på trekanten      */
}

/* Brug en mere specifik selector for at slå evt. gamle !important fra */
#navbarNav .profile-toggle.dropdown-toggle::after,
.navbar .nav-item.dropdown > .profile-toggle.dropdown-toggle::after {
  display: inline-block !important;
  content: "";
  margin-left: .5rem;
  width: 0; height: 0;
  border-left: var(--caret-w) solid transparent;
  border-right: var(--caret-w) solid transparent;
  border-top: var(--caret-h) solid rgba(255,255,255,.95); /* hvid pil ned */
  vertical-align: middle;
  filter: drop-shadow(0 1px 1px rgba(0,0,0,.35));
  transition: transform .15s ease;
  transform-origin: 50% 40%;
  transform: translateY(1px);
}

/* Når dropdown er åben: vend pilen */
.nav-item.dropdown.show > .profile-toggle.dropdown-toggle::after {
  transform: translateY(1px) rotate(180deg);
}
/* Synlig CSS-caret (triangel) */
:root{
  --caret-w: .46rem;   /* bredde */
  --caret-h: .40rem;   /* højde  */
}

#navbarNav .profile-toggle.dropdown-toggle::after,
.navbar .nav-item.dropdown > .profile-toggle.dropdown-toggle::after{
  display: inline-block !important;
  content: "";
  margin-left: .5rem;
  width: 0; height: 0;
  border-left: var(--caret-w) solid transparent;
  border-right: var(--caret-w) solid transparent;
  border-top: var(--caret-h) solid rgba(255,255,255,.95); /* nedad-pil */
  vertical-align: middle;
  filter: drop-shadow(0 1px 1px rgba(0,0,0,.35));
  transition: transform .16s ease;
  transform-origin: 50% 40%;
  transform: translateY(1px) rotate(0deg);
}

/* ÅBEN state – brug aria-expanded i stedet for .show */
#navbarNav .profile-toggle.dropdown-toggle[aria-expanded="true"]::after,
.navbar .nav-item.dropdown > .profile-toggle.dropdown-toggle[aria-expanded="true"]::after{
  transform: translateY(1px) rotate(180deg);
}
/* Brandede hover/active-states i profil-dropdown */
.profile-menu{
  /* Behold din mørke stil, men sæt aktive farver væk fra BS blå */
  --bs-dropdown-link-hover-bg: #0d1a2f;         /* din nuværende hover */
  --bs-dropdown-link-hover-color: #ffffff;

  --bs-dropdown-link-active-bg: #1e40af;        /* steel blue */
  --bs-dropdown-link-active-color: #ffffff;
}

/* Overstyr direkte for at fjerne den kraftige blå highlight */
.profile-menu .dropdown-item:hover{
  background-color: var(--bs-dropdown-link-hover-bg) !important;
  color: var(--bs-dropdown-link-hover-color) !important;
}

.profile-menu .dropdown-item:focus,
.profile-menu .dropdown-item:focus-visible,
.profile-menu .dropdown-item:active,
.profile-menu .dropdown-item.active{
  background-color: var(--bs-dropdown-link-active-bg) !important;
  color: var(--bs-dropdown-link-active-color) !important;
  outline: none !important;
  box-shadow: inset 0 0 0 2px rgba(59,130,246,.18); /* diskret “ring” ala din knapstil */
  border-radius: .6rem; /* matcher dine runde hjørner */
  transition: background-color .15s ease, box-shadow .15s ease;
}

/* “Log ud” bevarer rød-stemningen også i active/focus */
.profile-menu .dropdown-item.text-danger:hover,
.profile-menu .dropdown-item.text-danger:focus,
.profile-menu .dropdown-item.text-danger:active{
  background: rgba(239,68,68,.12) !important;
  color: #fecaca !important;
  box-shadow: inset 0 0 0 2px rgba(239,68,68,.18);
}
/* Profil-knap: begræns bredde, ellipsis på navn */
.navbar .profile-toggle{
  max-width: clamp(170px, 22vw, 230px); /* justér efter smag */
  display: inline-flex;
  align-items: center;
  gap: .5rem;
}

/* Navnet må fylde resten, men må gerne skrumpe (for ellipsis) */
.navbar .profile-toggle .profile-name{
  flex: 1 1 auto;        /* må vokse og skrumpe */
  min-width: 0;          /* VIGTIGT for at ellipsis virker i flex */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  line-height: 1.1;
}

/* Lille skærm: vis kun avatar + caret (skjul navn) */
@media (max-width: 420px){
  .navbar .profile-toggle{ max-width: 100px; }
  .navbar .profile-toggle .profile-name{ display: none; }
}
/* Mindre intern afstand i knappen */
.navbar .profile-toggle{
  gap: .35rem;                  /* var .5rem via gap-2 */
  padding-right: .6rem;         /* lidt strammere højre padding */
  max-width: clamp(170px, 22vw, 230px);  /* behold breddebegrænsning */
}

/* Navnet må IKKE udfylde al plads - ellers skubber det pilen væk */
.navbar .profile-toggle .profile-name{
  flex: 0 1 auto;               /* var 1 1 auto */
  min-width: 0;                 /* stadig nødvendigt for ellipsis */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Pilen: mindre venstre-margin = tættere på navnet */
#navbarNav .profile-toggle.dropdown-toggle::after,
.navbar .nav-item.dropdown > .profile-toggle.dropdown-toggle::after{
  margin-left: .25rem;          /* var .5rem */
}

/* Rotation ved åben menu (bevarer din nuværende caret-løsning) */
#navbarNav .profile-toggle.dropdown-toggle[aria-expanded="true"]::after,
.navbar .nav-item.dropdown > .profile-toggle.dropdown-toggle[aria-expanded="true"]::after{
  transform: translateY(1px) rotate(180deg);
}

/* === Profil-caret som "Ansøgninger" (samme look + roll) === */
:root{
  --nd-caret-w: .3rem;   /* svarer til Bootstrap caret-bredde */
  --nd-caret-h: .35rem;  /* svarer til Bootstrap caret-højde  */
  --nd-caret-color: rgba(255,255,255,.95);
}

/* Vis caret (overstyr evt. tidligere "display:none") */
#navbarNav .profile-toggle.dropdown-toggle::after,
.navbar .nav-item.dropdown > .profile-toggle.dropdown-toggle::after{
  display: inline-block !important;
  content: "";
  margin-left: .35rem;          /* samme luft som BS */
  vertical-align: .255em;       /* linje-align som BS */
  width: 0; height: 0;
  border-left:  var(--nd-caret-w) solid transparent;
  border-right: var(--nd-caret-w) solid transparent;
  border-top:   var(--nd-caret-h) solid var(--nd-caret-color);  /* nedad-pil */
  /* "rolling" effekt */
  transform: translateY(1px) rotate(0deg);
  transform-origin: 50% 40%;
  transition: transform .2s cubic-bezier(.4, 0, .2, 1);
  filter: drop-shadow(0 1px 1px rgba(0,0,0,.35)); /* diskret pop som din stil */
}

/* === Fælles caret-stil (samme look/roll som ved Ansøgninger) === */
:root{
  --nd-caret-w: .35rem;   /* bredde */
  --nd-caret-h: .42rem;   /* højde  */
  --nd-caret-color: rgba(255,255,255,.95);
}

/* Vis caret på alle dropdown-knapper i navbaren */
.navbar .nav-item.dropdown > .dropdown-toggle::after{
  display: inline-block !important;
  content: "";
  margin-left: .35rem;
  vertical-align: .255em;
  width: 0; height: 0;
  border-left:  var(--nd-caret-w) solid transparent;
  border-right: var(--nd-caret-w) solid transparent;
  border-top:   var(--nd-caret-h) solid var(--nd-caret-color);  /* nedad-pil */
  transform: translateY(1px) rotate(0deg);
  transform-origin: 50% 40%;
  transition: transform .2s cubic-bezier(.4,0,.2,1);
  filter: drop-shadow(0 1px 1px rgba(0,0,0,.35));
}

/* Åben: vend pilen — brug aria-expanded for stabilitet */
.navbar .nav-item.dropdown > .dropdown-toggle[aria-expanded="true"]::after{
  transform: translateY(1px) rotate(180deg);
}

/* Mindre tekst i dropdown end i navbar-knapperne */
.profile-menu{
  --menu-fs: .88rem;        /* justér .86–.90 efter smag */
  --menu-icon-fs: .95rem;   /* ikonstørrelse */
}

/* Fix Bootstrap modal backdrop at dække hele siden */
.modal-backdrop {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  z-index: 1040 !important;
}

.modal {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  z-index: 1050 !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
}

.profile-menu .dropdown-item{
  font-size: var(--menu-fs);
  line-height: 1.2;
  font-weight: 500;         /* lidt lettere end bold */
  padding: .42rem .70rem;   /* en anelse mindre vertical padding */
}

/* Ens vægt også når item er aktiv/hover/focus (så det ikke ser større ud) */
.profile-menu .dropdown-item:hover,
.profile-menu .dropdown-item:focus,
.profile-menu .dropdown-item:active,
.profile-menu .dropdown-item.active{
  font-size: var(--menu-fs);
  font-weight: 500;
}

/* Ikoner en smule mindre, så helheden virker lettere */
.profile-menu .dropdown-item i{
  font-size: var(--menu-icon-fs);
}
/* Dropdown-bredde: følg indholdet, men med sane min/max */
.profile-menu{
  --menu-min: 140px;   /* mindste bredde */
  --menu-max: 260px;   /* største bredde */

  min-width: var(--menu-min) !important;
  width: max-content;                 /* hugger til indholdet */
  max-width: var(--menu-max);
}

/* Undgå linjeskift så bredden ikke vokser unødigt */
.profile-menu .dropdown-item{
  white-space: nowrap;
}

/* Mobil: giv lidt mere plads hvis teksten er lang */
@media (max-width: 420px){
  .profile-menu{
    --menu-max: 90vw;
  }
}
/* Sørg for at <ul> måles ift. knappen */
.navbar .nav-item.dropdown { position: relative; }

/* Følg knap-bredden som minimum, men voks hvis indholdet kræver det */
.navbar .dropdown-menu.profile-menu{
  /* Bootstrap 5 bruger denne var til min-bredde */
  --bs-dropdown-min-width: 100%;

  min-width: var(--bs-dropdown-min-width) !important; /* = mindst som knappen */
  width: max-content;                                  /* udvid til indholdets bredde */
  max-width: min(92vw, 380px);                         /* beskyttelse mod for bred menu */
  white-space: nowrap;                                 /* undgå linjeskift der øger højden */
}

/* Hvis du vil have det på ALLE navbar-dropdowns, drop .profile-menu i selektoren ovenfor */

/* ==========================================================================
   GLASS / GLOSSY UPGRADE
   Tilføjer frosted glass, glossy highlights og dybde til hele sitet.
   Bevarer eksisterende farver og struktur — kun visuelt løft.
   ========================================================================== */

/* --- Body: subtil farvet baggrundsgradient for mere dybde --- */
body {
  background-color: #080c16;
  background-image:
    radial-gradient(ellipse at 18% 8%,  rgba(59,130,246,.15), transparent 55%),
    radial-gradient(ellipse at 82% 92%, rgba(139,92,246,.10), transparent 55%),
    radial-gradient(ellipse at 50% 50%, rgba(6,182,212,.04),  transparent 65%);
}

/* --- Navbar: frosted glass via ::before pseudo-element ---
   backdrop-filter flyttes til ::before så dropdown-menuer (position:absolute/fixed)
   ikke fanges i et nyt stacking context og går bag om sideindholdet.
--- */
.navbar {
  background: transparent !important;
  border-bottom: 1px solid rgba(59,130,246,.09) !important;
  box-shadow: 0 4px 24px rgba(0,0,0,.32);
  z-index: 2000;
  position: sticky;
  top: 0;
}
.navbar::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(255,255,255,.05) 0%, rgba(255,255,255,0) 100%),
    rgba(8,12,22,.88);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
  z-index: -1;
  pointer-events: none;
}

/* Dropdown-menuer fra navbar: altid OVER alt sideindhold */
.navbar .dropdown-menu {
  z-index: 1100 !important;
}

/* --- Navbar dropdowns: glass / glossy effect --- */
.navbar .dropdown-menu,
.navbar .dropdown-menu.profile-menu {
  background:
    linear-gradient(180deg, rgba(255,255,255,.07) 0%, rgba(255,255,255,0) 35%),
    rgba(8,12,22,.92) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  border: 1px solid rgba(59,130,246,.15) !important;
  box-shadow:
    0 20px 50px rgba(0,0,0,.55),
    0 4px 16px rgba(0,0,0,.30),
    inset 0 1px 0 rgba(255,255,255,.09) !important;
  border-radius: .75rem !important;
}

/* Dropdown-items: hover/active/focus med glass-glow */
.navbar .dropdown-menu .dropdown-item:hover,
.navbar .dropdown-menu .dropdown-item:focus,
.navbar .dropdown-menu .dropdown-item:active,
.navbar .dropdown-menu .dropdown-item.active {
  background: rgba(59,130,246,.18) !important;
  color: #fff !important;
  box-shadow: inset 0 0 0 1px rgba(59,130,246,.18), inset 0 1px 0 rgba(255,255,255,.06);
  border-radius: .4rem;
}

/* Log ud: bevar rød tekst og rød glow — override den generelle blå hover */
.navbar .dropdown-menu .dropdown-item.text-danger,
.profile-menu .dropdown-item.text-danger {
  color: #f87171 !important;
}
.navbar .dropdown-menu .dropdown-item.text-danger:hover,
.navbar .dropdown-menu .dropdown-item.text-danger:focus,
.navbar .dropdown-menu .dropdown-item.text-danger:active,
.profile-menu .dropdown-item.text-danger:hover,
.profile-menu .dropdown-item.text-danger:focus,
.profile-menu .dropdown-item.text-danger:active {
  background: rgba(239,68,68,.15) !important;
  color: #fecaca !important;
  box-shadow: inset 0 0 0 1px rgba(239,68,68,.22), 0 0 8px rgba(239,68,68,.12) !important;
  border-radius: .4rem;
}

/* Divider: lysere linje */
.navbar .dropdown-menu .dropdown-divider {
  border-color: rgba(255,255,255,.08) !important;
}

/* Bootstrap sætter dropdown-bg via CSS-variabel – override den også */
.navbar .dropdown-menu,
.navbar .dropdown-menu.profile-menu {
  --bs-dropdown-bg: transparent;
  --bs-dropdown-border-color: rgba(59,130,246,.15);
  --bs-dropdown-link-hover-bg: rgba(59,130,246,.18);
  --bs-dropdown-link-active-bg: rgba(59,130,246,.18);
  --bs-dropdown-link-active-color: #fff;
}

/* --- Top admin-bar: stærkere glas --- */
.ndrp-topmenu {
  /* Glasset flyttes til ::before — se forklaring ovenfor */
  background: transparent;
  border-bottom: 1px solid rgba(59,130,246,.11);
  box-shadow: 0 4px 20px rgba(0,0,0,.30);
}
.ndrp-topmenu::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(255,255,255,.05) 0%, rgba(255,255,255,0) 100%),
    rgba(8,12,22,.88);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid rgba(59,130,246,.11);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.07);
  z-index: -1;
  pointer-events: none;
}

/* --- Karakter-kort: glass surface + glossy top-shine --- */
.cardX {
  background: rgba(255,255,255,.025);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(59,130,246,.18);
  box-shadow: 0 10px 28px rgba(0,0,0,.45);
  transition: border-color .2s, box-shadow .2s, transform .2s;
}
.cardX:hover {
  border-color: rgba(59,130,246,.35);
  box-shadow: 0 14px 36px rgba(0,0,0,.55);
  transform: translateY(-2px);
}

/* Glossy highlight stripe i kortets header */
.cardX-header {
  background:
    linear-gradient(180deg, rgba(255,255,255,.06) 0%, rgba(255,255,255,0) 60%),
    radial-gradient(120% 120% at -10% -10%, rgba(59,130,246,.12), transparent 50%),
    rgba(255,255,255,.02);
  border-bottom: 1px solid rgba(59,130,246,.14);
}

/* --- Playtime panel: frosted glass --- */
.panel {
  background:
    linear-gradient(180deg, rgba(255,255,255,.05) 0%, rgba(255,255,255,0) 50%),
    rgba(255,255,255,.025);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(59,130,246,.18);
  box-shadow: 0 10px 28px rgba(0,0,0,.45);
}

/* --- Info-sektioner (Arbejde, Økonomi, Garage): glass --- */
.section {
  background: rgba(255,255,255,.02);
  border: 1px solid rgba(59,130,246,.12);
  box-shadow: none;
}

/* XP-sektion med lidt mere glow */
.section.xp {
  background:
    linear-gradient(180deg, rgba(255,255,255,.04) 0%, rgba(255,255,255,0) 45%),
    radial-gradient(120% 120% at -10% -10%, rgba(59,130,246,.10), transparent 45%),
    radial-gradient(140% 140% at 110% -20%, rgba(59,130,246,.07), transparent 50%),
    rgba(255,255,255,.02);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(59,130,246,.11);
  box-shadow:
    0 6px 20px rgba(0,0,0,.25),
    inset 0 1px 0 rgba(255,255,255,.08);
}

/* --- Stat-bokse: glass --- */
.stat {
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.07);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04), 0 2px 8px rgba(0,0,0,.18);
}

/* --- KPI pills (XP layout) --- */
.kpi,
.kpi2 {
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.07);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04), 0 3px 10px rgba(0,0,0,.20);
}

/* --- Allowlist-form: glass card --- */
.alw-form {
  background: rgba(255,255,255,.025);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(59,130,246,.18);
  box-shadow: 0 10px 28px rgba(0,0,0,.45);
}

/* --- Allowlist review-kort --- */
.alw-card {
  background: rgba(255,255,255,.025);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(59,130,246,.18);
  box-shadow: 0 10px 28px rgba(0,0,0,.45);
}

/* Admin-bar i allowlist */
.alw-adminbar {
  background: rgba(255,255,255,.025);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(59,130,246,.15);
  box-shadow: 0 4px 16px rgba(0,0,0,.22);
}

/* --- Popover (notifikationer etc.): kraftig frosted glass --- */
.ndrp-popover {
  z-index: 9999 !important;
  background: rgba(13,16,19,.90);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(59,130,246,.13);
  box-shadow:
    0 24px 56px rgba(0,0,0,.58),
    inset 0 1px 0 rgba(255,255,255,.08);
}
.ndrp-popover-header {
  border-bottom: 1px solid rgba(255,255,255,.07);
}
.ndrp-popover-foot {
  border-top: 1px solid rgba(255,255,255,.07);
}

/* --- Admin Panel button: match ndrp-chip size og form --- */
#adminPanelBtn.btn.btn-custom,
#adminPanelBtn {
  padding: 8px 16px !important;
  font-size: 14px !important;
  line-height: 1.2 !important;
  border-radius: 8px !important;
}

/* --- Admin Panel popover: matches navbar dropdown glass --- */
#adminPanelPopover {
  min-width: 180px;
  max-width: 260px;
  padding: 6px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.07) 0%, rgba(255,255,255,0) 35%),
    rgba(8,12,22,.92) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  border: 1px solid rgba(59,130,246,.15) !important;
  box-shadow:
    0 20px 50px rgba(0,0,0,.55),
    0 4px 16px rgba(0,0,0,.30),
    inset 0 1px 0 rgba(255,255,255,.09) !important;
  border-radius: .75rem !important;
}
#adminPanelPopover .dropdown-item {
  color: rgba(255,255,255,.85);
  border-radius: .4rem;
  padding: 8px 12px;
  font-size: .875rem;
  transition: background .12s ease, color .12s ease;
}
#adminPanelPopover .dropdown-item:hover,
#adminPanelPopover .dropdown-item:focus {
  background: rgba(59,130,246,.18) !important;
  color: #fff !important;
  box-shadow: inset 0 0 0 1px rgba(59,130,246,.18), inset 0 1px 0 rgba(255,255,255,.06);
}

/* --- Profile dropdown: glass --- */
.profile-menu {
  --bs-dropdown-bg: rgba(22,25,29,.92);
  background: rgba(22,25,29,.92) !important;
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border: 1px solid rgba(255,255,255,.08) !important;
  box-shadow:
    0 18px 44px rgba(0,0,0,.48),
    inset 0 1px 0 rgba(255,255,255,.07) !important;
}

/* --- Navbar profil-knap: glossy --- */
.navbar .profile-toggle {
  background: linear-gradient(180deg, rgba(255,255,255,.10) 0%, rgba(255,255,255,0) 60%), #1e40af;
  box-shadow: 0 2px 10px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.18);
}
.navbar .profile-toggle:hover {
  background: linear-gradient(180deg, rgba(255,255,255,.14) 0%, rgba(255,255,255,0) 60%), #2563eb;
  box-shadow: 0 4px 14px rgba(0,0,0,.30), inset 0 1px 0 rgba(255,255,255,.18);
}

/* --- Primær knap (btn-custom): glass pill --- */
.btn-custom {
  background:
    linear-gradient(180deg, rgba(255,255,255,.07) 0%, rgba(255,255,255,0) 55%),
    rgba(255,255,255,.04);
  border-color: rgba(59,130,246,.28);
  color: rgba(255,255,255,.85);
  box-shadow: 0 2px 8px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.08);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  transition: all 0.22s ease;
}
.btn-custom:hover {
  background:
    linear-gradient(180deg, rgba(255,255,255,.14) 0%, rgba(255,255,255,0) 55%),
    rgba(59,130,246,.20);
  border-color: rgba(59,130,246,.34);
  color: #fff;
  box-shadow: 0 3px 8px rgba(59,130,246,.14), inset 0 1px 0 rgba(255,255,255,.12);
  transform: translateY(-1px);
}

/* Discord-knap: glossy */
.btn-discord {
  background:
    linear-gradient(180deg, rgba(255,255,255,.13) 0%, rgba(255,255,255,0) 55%, rgba(0,0,0,.08) 100%),
    #5865f2;
  box-shadow: 0 2px 10px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.18);
}
.btn-discord:hover {
  background:
    linear-gradient(180deg, rgba(255,255,255,.17) 0%, rgba(255,255,255,0) 55%, rgba(0,0,0,.06) 100%),
    #4752c4;
  box-shadow: 0 6px 18px rgba(88,101,242,.40), inset 0 1px 0 rgba(255,255,255,.20);
}

/* Approve/Reject/Pending knapper: glossy */
.btn-approve {
  background:
    linear-gradient(180deg, rgba(255,255,255,.11) 0%, rgba(255,255,255,0) 55%), #2e7d32;
  box-shadow: 0 2px 8px rgba(0,0,0,.25), inset 0 1px 0 rgba(255,255,255,.16);
}
.btn-approve:hover {
  background:
    linear-gradient(180deg, rgba(255,255,255,.15) 0%, rgba(255,255,255,0) 55%), #296b2d;
  box-shadow: 0 4px 14px rgba(46,125,50,.35), inset 0 1px 0 rgba(255,255,255,.18);
}
.btn-reject {
  background:
    linear-gradient(180deg, rgba(255,255,255,.10) 0%, rgba(255,255,255,0) 55%), #c0392b;
  box-shadow: 0 2px 8px rgba(0,0,0,.25), inset 0 1px 0 rgba(255,255,255,.14);
}
.btn-reject:hover {
  background:
    linear-gradient(180deg, rgba(255,255,255,.14) 0%, rgba(255,255,255,0) 55%), #a93226;
  box-shadow: 0 4px 14px rgba(192,57,43,.35), inset 0 1px 0 rgba(255,255,255,.16);
}

/* --- Regler: glass look --- */
.rule-header {
  background:
    linear-gradient(180deg, rgba(50,60,84,.95) 0%, rgba(31,37,51,.95) 100%);
  border: 1px solid rgba(59,130,246,.14);
  box-shadow: 0 4px 18px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.07);
}

.rules-inner-box {
  background: transparent;
  border: none;
  box-shadow: none;
}

.rules-sticky-menu-box {
  background: rgba(8,12,22,.88);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,.07);
  box-shadow: 0 4px 20px rgba(0,0,0,.25), inset 0 1px 0 rgba(255,255,255,.05);
}

.rules-box {
  background: rgba(8,12,22,.88);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,.07);
  box-shadow: 0 8px 30px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.06);
}

/* --- Table wrap: glass --- */
.table-wrap {
  background: rgba(255,255,255,.025);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border: 1px solid rgba(255,255,255,.07);
  box-shadow: 0 6px 24px rgba(0,0,0,.28);
}

/* Table headers: glossy dark */
.alw-table thead th {
  background: rgba(8,12,22,.95);
  border-bottom: 1px solid rgba(255,255,255,.07);
  box-shadow: inset 0 -1px 0 rgba(255,255,255,.04);
}

/* --- ndrp-chip: glossy pill --- */
.ndrp-chip {
  background: linear-gradient(180deg, rgba(255,255,255,.07) 0%, rgba(255,255,255,0) 60%), #15181b;
  border: 1px solid rgba(255,255,255,.09);
  box-shadow: 0 2px 8px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.08);
}
.ndrp-chip:hover {
  border-color: rgba(59,130,246,.18);
  box-shadow: 0 6px 18px rgba(0,0,0,.38), inset 0 1px 0 rgba(255,255,255,.10);
}

/* --- Avatar: stærkere glow-ring --- */
.avatar {
  box-shadow:
    0 0 0 3px rgba(59,130,246,.30),
    0 0 14px rgba(59,130,246,.25),
    0 6px 18px rgba(0,0,0,.30);
  border: 2px solid rgba(59,130,246,.35);
}

/* --- XP bar: glossy shine overlay --- */
.xp-bar > span {
  position: relative;
}
.xp-bar > span::after {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 50%;
  background: linear-gradient(180deg, rgba(255,255,255,.22), rgba(255,255,255,0));
  border-radius: inherit;
}

/* --- Footer: subtle glass line --- */
.footer {
  background: rgba(8,12,22,.60);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  border-top: 1px solid rgba(255,255,255,.06);
}

/* Skjul den rigtige footer på forsiden — den er bygget ind i lp-root */
body:has(.lp-root) footer { display: none !important; }

/* ═══════════════════════════════════════════════════
   REGLER — forbedret layout (2026-03-26)
   ═══════════════════════════════════════════════════ */

/* Progress bar */
.rules-progress-wrap {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 3px;
  z-index: 9999;
  background: rgba(255,255,255,.04);
}
.rules-progress-bar {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, #3b82f6, #8b5cf6, #06b6d4);
  transition: width .12s ease-out;
  border-radius: 0 2px 2px 0;
  box-shadow: 0 0 8px rgba(59,130,246,.6);
}

/* Page header */
.rules-page-header {
  position: relative;
  overflow: hidden;
  background:
    linear-gradient(135deg, rgba(59,130,246,.08) 0%, rgba(139,92,246,.05) 50%, rgba(6,182,212,.04) 100%),
    rgba(8,12,22,.70);
  border: 1px solid rgba(59,130,246,.22);
  border-radius: 20px;
  padding: 36px 40px;
  margin-bottom: 32px;
  backdrop-filter: blur(12px);
  box-shadow: 0 8px 32px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.06);
}
.rules-page-header::before {
  content: "";
  position: absolute;
  top: -60px; right: -60px;
  width: 220px; height: 220px;
  background: radial-gradient(circle, rgba(59,130,246,.12) 0%, transparent 70%);
  pointer-events: none;
}
.rules-page-header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  position: relative;
}
.rules-page-label {
  display: inline-flex;
  align-items: center;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--accentLite);
  background: rgba(59,130,246,.10);
  border: 1px solid rgba(59,130,246,.25);
  border-radius: 99px;
  padding: 4px 14px;
  margin-bottom: 12px;
}
.rules-page-title {
  font-size: clamp(1.8rem, 3vw, 2.6rem);
  font-weight: 800;
  background: linear-gradient(90deg, rgba(255,255,255,.96) 0%, #60a5fa 60%, #a78bfa 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin: 0 0 8px;
  letter-spacing: -.025em;
  line-height: 1.1;
}
.rules-page-sub {
  font-size: .84rem;
  color: rgba(255,255,255,.42);
  margin: 0;
  line-height: 1.6;
}
.rules-meta-pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: .76rem;
  font-weight: 500;
  color: rgba(255,255,255,.50);
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 99px;
  padding: 8px 18px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
}

/* Sticky nav */
.rules-nav-title {
  font-size: .62rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(255,255,255,.25);
  padding: 0 6px;
}
.rules-nav-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  font-size: .62rem;
  font-weight: 700;
  background: rgba(59,130,246,.12);
  border: 1px solid rgba(59,130,246,.22);
  border-radius: 5px;
  color: var(--accentLite);
  flex-shrink: 0;
}
.rules-nav-link {
  display: flex !important;
  align-items: center;
  gap: 8px;
  transition: background .15s, border-color .15s, box-shadow .15s !important;
}
.rules-nav-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rules-nav-link .rules-nav-num {
  flex-shrink: 0;
  font-size: .68rem !important;
  font-weight: 700 !important;
  min-width: 22px !important;
  height: 22px !important;
  padding: 0 5px !important;
  border-radius: 6px !important;
  line-height: 22px !important;
  vertical-align: unset !important;
  margin: 0 !important;
}

/* Active — blå fallback, overrides per farve via data-color */
.rules-nav-link.active {
  background: rgba(59,130,246,.14) !important;
  border-color: rgba(59,130,246,.38) !important;
  color: rgba(255,255,255,.96) !important;
  box-shadow: inset 3px 0 0 #3b82f6, 0 2px 10px rgba(59,130,246,.12) !important;
}
.rules-nav-link[data-color="blue"].active    { background: rgba(59,130,246,.14)  !important; border-color: rgba(59,130,246,.38)  !important; box-shadow: inset 3px 0 0 #3b82f6, 0 2px 10px rgba(59,130,246,.12)  !important; }
.rules-nav-link[data-color="cyan"].active    { background: rgba(6,182,212,.12)   !important; border-color: rgba(6,182,212,.35)   !important; box-shadow: inset 3px 0 0 #06b6d4, 0 2px 10px rgba(6,182,212,.10)   !important; }
.rules-nav-link[data-color="purple"].active  { background: rgba(139,92,246,.14)  !important; border-color: rgba(139,92,246,.38)  !important; box-shadow: inset 3px 0 0 #8b5cf6, 0 2px 10px rgba(139,92,246,.12)  !important; }
.rules-nav-link[data-color="red"].active     { background: rgba(239,68,68,.12)   !important; border-color: rgba(239,68,68,.35)   !important; box-shadow: inset 3px 0 0 #ef4444, 0 2px 10px rgba(239,68,68,.10)   !important; }
.rules-nav-link[data-color="orange"].active  { background: rgba(249,115,22,.12)  !important; border-color: rgba(249,115,22,.35)  !important; box-shadow: inset 3px 0 0 #f97316, 0 2px 10px rgba(249,115,22,.10)  !important; }
.rules-nav-link[data-color="green"].active   { background: rgba(34,197,94,.10)   !important; border-color: rgba(34,197,94,.32)   !important; box-shadow: inset 3px 0 0 #22c55e, 0 2px 10px rgba(34,197,94,.08)   !important; }
.rules-nav-link[data-color="amber"].active   { background: rgba(245,158,11,.10)  !important; border-color: rgba(245,158,11,.32)  !important; box-shadow: inset 3px 0 0 #f59e0b, 0 2px 10px rgba(245,158,11,.08)  !important; }
.rules-nav-link[data-color="yellow"].active  { background: rgba(234,179,8,.10)   !important; border-color: rgba(234,179,8,.32)   !important; box-shadow: inset 3px 0 0 #eab308, 0 2px 10px rgba(234,179,8,.08)   !important; }

/* Active + ny/opdateret — bevar grøn/amber kant (0,3,0 slår data-color regler med samme specificitet via placering) */
.rules-nav-link--new[data-color].active {
  box-shadow: inset 3px 0 0 #22c55e, 0 2px 10px rgba(34,197,94,.14) !important;
  border-color: rgba(34,197,94,.45) !important;
}
.rules-nav-link--updated[data-color].active {
  box-shadow: inset 3px 0 0 #f59e0b, 0 2px 10px rgba(245,158,11,.14) !important;
  border-color: rgba(245,158,11,.42) !important;
}

.rules-nav-divider {
  border-color: rgba(255,255,255,.06);
  margin: 6px 0;
}

/* Section header wrapper */
.rule-section-hdr {
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(255,255,255,.05);
}
.rule-section-hdr h2 {
  margin: 0 !important;
}
.rule-section-hdr .rule-header {
  display: flex !important;
  align-items: center !important;
  width: 100% !important;
  margin: 0 !important;
  box-sizing: border-box;
  border-radius: 6px !important;
  padding: 10px 14px !important;
}

/* Nummer badges */
.rule-num-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 32px;
  height: 32px;
  padding: 0 8px;
  border-radius: 10px;
  font-size: .82rem;
  font-weight: 800;
  flex-shrink: 0;
  box-shadow: 0 2px 8px rgba(0,0,0,.25);
}
.rule-badge--blue   { background: rgba(59,130,246,.20);  border: 1px solid rgba(59,130,246,.40);  color: #93c5fd; box-shadow: 0 0 10px rgba(59,130,246,.15); }
.rule-badge--cyan   { background: rgba(6,182,212,.18);   border: 1px solid rgba(6,182,212,.35);   color: #67e8f9; box-shadow: 0 0 10px rgba(6,182,212,.12); }
.rule-badge--purple { background: rgba(139,92,246,.18);  border: 1px solid rgba(139,92,246,.38);  color: #c4b5fd; box-shadow: 0 0 10px rgba(139,92,246,.15); }
.rule-badge--red    { background: rgba(239,68,68,.18);   border: 1px solid rgba(239,68,68,.38);   color: #fca5a5; box-shadow: 0 0 10px rgba(239,68,68,.12); }
.rule-badge--orange { background: rgba(249,115,22,.18);  border: 1px solid rgba(249,115,22,.38);  color: #fdba74; box-shadow: 0 0 10px rgba(249,115,22,.12); }
.rule-badge--green  { background: rgba(34,197,94,.15);   border: 1px solid rgba(34,197,94,.32);   color: #86efac; box-shadow: 0 0 10px rgba(34,197,94,.10); }
.rule-badge--amber  { background: rgba(245,158,11,.15);  border: 1px solid rgba(245,158,11,.32);  color: #fcd34d; box-shadow: 0 0 10px rgba(245,158,11,.10); }
.rule-badge--yellow { background: rgba(234,179,8,.15);   border: 1px solid rgba(234,179,8,.32);   color: #fde047; box-shadow: 0 0 10px rgba(234,179,8,.10); }

/* Left-border + subtle glow per section
   Combined selector (0,4,1) beats glass block section.mb-5.p-4.rounded (0,3,1) */
section.mb-5.p-4.rounded.rule-section--blue   { border-left: 3px solid rgba(59,130,246,.70) !important;  box-shadow: -4px 0 20px rgba(59,130,246,.08), 0 4px 24px rgba(0,0,0,.30) !important; }
section.mb-5.p-4.rounded.rule-section--cyan   { border-left: 3px solid rgba(6,182,212,.65) !important;   box-shadow: -4px 0 20px rgba(6,182,212,.07), 0 4px 24px rgba(0,0,0,.30) !important; }
section.mb-5.p-4.rounded.rule-section--purple { border-left: 3px solid rgba(139,92,246,.70) !important;  box-shadow: -4px 0 20px rgba(139,92,246,.08), 0 4px 24px rgba(0,0,0,.30) !important; }
section.mb-5.p-4.rounded.rule-section--red    { border-left: 3px solid rgba(239,68,68,.70) !important;   box-shadow: -4px 0 20px rgba(239,68,68,.08), 0 4px 24px rgba(0,0,0,.30) !important; }
section.mb-5.p-4.rounded.rule-section--orange { border-left: 3px solid rgba(249,115,22,.70) !important;  box-shadow: -4px 0 20px rgba(249,115,22,.07), 0 4px 24px rgba(0,0,0,.30) !important; }
section.mb-5.p-4.rounded.rule-section--green  { border-left: 3px solid rgba(34,197,94,.65) !important;   box-shadow: -4px 0 20px rgba(34,197,94,.07), 0 4px 24px rgba(0,0,0,.30) !important; }
section.mb-5.p-4.rounded.rule-section--amber  { border-left: 3px solid rgba(245,158,11,.65) !important;  box-shadow: -4px 0 20px rgba(245,158,11,.07), 0 4px 24px rgba(0,0,0,.30) !important; }
section.mb-5.p-4.rounded.rule-section--yellow { border-left: 3px solid rgba(234,179,8,.65) !important;   box-shadow: -4px 0 20px rgba(234,179,8,.07), 0 4px 24px rgba(0,0,0,.30) !important; }

/* Sub-titel */
.rule-section-sub {
  font-size: .72rem;
  font-weight: 400;
  color: rgba(255,255,255,.30);
  letter-spacing: .01em;
  margin-left: 6px;
}

/* Copy knap — placeret som sidste element i rule-header flex */
.rule-copy-btn {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 6px;
  color: rgba(255,255,255,.30);
  cursor: pointer;
  transition: background .15s, border-color .15s, color .15s, transform .15s, box-shadow .15s;
  font-size: .85rem;
}
.rule-copy-btn:hover {
  background: linear-gradient(180deg, rgba(255,255,255,.10) 0%, rgba(59,130,246,.18) 100%);
  border-color: rgba(59,130,246,.45);
  color: #93c5fd;
  box-shadow: 0 4px 14px rgba(0,0,0,.35), 0 0 0 1px rgba(59,130,246,.18);
  transform: translateY(-2px);
}
.rule-copy-btn--copied {
  background: rgba(34,197,94,.18) !important;
  border-color: rgba(34,197,94,.40) !important;
  color: #86efac !important;
}
/* .lp-status vises på alle sider (ikke længere forside-only) */

/* --- th-menu (table filter popover): glass --- */
.th-menu {
  background: rgba(18,21,24,.92);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(255,255,255,.08);
  box-shadow: 0 16px 40px rgba(0,0,0,.50), inset 0 1px 0 rgba(255,255,255,.07);
}

/* --- Section-head badge: glossy --- */
.section-head .badge {
  background:
    linear-gradient(180deg, rgba(255,255,255,.09) 0%, rgba(255,255,255,0) 60%),
    rgba(59,130,246,.16);
  border: 1px solid rgba(59,130,246,.14);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.09);
}

/* ==========================================================================
   GLASS / GLOSSY — REGLER SIDE + RESTERENDE KOMPONENTER
   Inline styles på <section> i regler.ejs overrides med !important.
   ========================================================================== */

/* --- Regel-sektioner (override inline styles) --- */
section.mb-5.p-4.rounded {
  background:
    linear-gradient(180deg, rgba(255,255,255,.04) 0%, rgba(255,255,255,0) 40%),
    rgba(8,12,22,.88) !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(59,130,246,.22) !important;
  box-shadow:
    0 12px 40px rgba(0,0,0,.42),
    inset 0 1px 0 rgba(255,255,255,.08);
  border-radius: 14px !important;
}

/* --- Rule header: glossy dark gradient --- */
.rule-header {
  background:
    linear-gradient(180deg, rgba(255,255,255,.08) 0%, rgba(255,255,255,0) 55%),
    linear-gradient(180deg, rgba(59,130,246,.30) 0%, rgba(31,37,51,.95) 100%) !important;
  border: 1px solid rgba(59,130,246,.22) !important;
  border-radius: 8px !important;
  box-shadow:
    0 4px 18px rgba(0,0,0,.30),
    inset 0 1px 0 rgba(255,255,255,.10) !important;
  color: #e5e9f0;
}

/* --- Rules inner box: ingen ekstra styling — arver fra sektionen --- */
.rules-inner-box {
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border: none !important;
  box-shadow: none !important;
}

/* --- Rule cards (§ sub-sections): glass surface --- */
.rule-card {
  background:
    linear-gradient(180deg, rgba(255,255,255,.04) 0%, rgba(255,255,255,0) 50%),
    rgba(255,255,255,.025) !important;
  border: 1px solid rgba(255,255,255,.08) !important;
  border-radius: 8px !important;
  box-shadow:
    0 3px 12px rgba(0,0,0,.25),
    inset 0 1px 0 rgba(255,255,255,.06);
  transition: border-color .2s ease, box-shadow .2s ease;
}

.rule-card:hover {
  border-color: rgba(59,130,246,.18) !important;
  box-shadow:
    0 6px 20px rgba(0,0,0,.30),
    inset 0 1px 0 rgba(255,255,255,.09);
}

/* Rule card headings */
.rule-card h5.text-steel {
  text-shadow: 0 0 18px rgba(59,130,246,.20);
}

.rule-card ul {
  padding-left: 0.5rem !important;
}
.rule-card ul li {
  list-style: none;
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  padding-left: 0;
}
.rule-card ul li::before {
  content: "›";
  color: #60a5fa;
  font-size: 1.1rem;
  flex-shrink: 0;
  margin-top: 0.05rem;
}
/* Sektioner 3-10 har en h5 i rule-card — brug dot i stedet for checkmark */
.rule-card:has(h5) ul li::before {
  content: "•";
  color: rgba(255,255,255,.40);
  font-size: 1.1rem;
  margin-top: 0.05rem;
}

/* --- Sticky nav menu (venstre kolonne): glass --- */
.rules-sticky-menu-box {
  background:
    linear-gradient(180deg, rgba(255,255,255,.05) 0%, rgba(255,255,255,0) 40%),
    rgba(8,12,22,.88) !important;
  backdrop-filter: blur(14px) !important;
  -webkit-backdrop-filter: blur(14px) !important;
  border: 1px solid rgba(59,130,246,.15) !important;
  border-radius: 12px !important;
  box-shadow:
    0 10px 32px rgba(0,0,0,.38),
    inset 0 1px 0 rgba(255,255,255,.08) !important;
}

/* --- Navigation knapper i sticky menu: glass pill (samme stil som btn-custom) --- */
.custom-nav-btn {
  background:
    linear-gradient(180deg, rgba(255,255,255,.07) 0%, rgba(255,255,255,0) 55%),
    rgba(255,255,255,.04) !important;
  border: 1px solid rgba(59,130,246,.28) !important;
  border-radius: 8px !important;
  box-shadow: 0 2px 8px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.08);
  color: rgba(255,255,255,.85) !important;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  transition: all 0.22s ease !important;
  display: block;
  text-align: center;
  text-decoration: none;
}

.custom-nav-btn:hover {
  background:
    linear-gradient(180deg, rgba(255,255,255,.14) 0%, rgba(255,255,255,0) 55%),
    rgba(59,130,246,.20) !important;
  border-color: rgba(59,130,246,.34) !important;
  box-shadow:
    0 3px 8px rgba(59,130,246,.14),
    inset 0 1px 0 rgba(255,255,255,.12) !important;
  color: #fff !important;
  transform: translateY(-1px);
}

/* --- Rules box (om wrapper) --- */
.rules-box {
  background:
    linear-gradient(180deg, rgba(255,255,255,.04) 0%, rgba(255,255,255,0) 40%),
    rgba(8,12,22,.88) !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(59,130,246,.14) !important;
  box-shadow:
    0 10px 36px rgba(0,0,0,.40),
    inset 0 1px 0 rgba(255,255,255,.07) !important;
}

/* --- Chip-new og chip-updated: glassy pills --- */
.chip-new {
  background: rgba(46,204,113,.14) !important;
  border: 1px solid rgba(46,204,113,.35) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 0 8px rgba(46,204,113,.12);
  backdrop-filter: blur(4px);
}

.chip-updated {
  background: rgba(255,181,71,.12) !important;
  border: 1px solid rgba(255,181,71,.35) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.07), 0 0 8px rgba(255,181,71,.10);
  backdrop-filter: blur(4px);
}

/* --- Pagination: glass --- */
.pagination .page-link {
  background: rgba(255,255,255,.03) !important;
  border-color: rgba(255,255,255,.08) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05);
  backdrop-filter: blur(4px);
}

.pagination .page-link:hover {
  background: rgba(59,130,246,.10) !important;
  border-color: rgba(59,130,246,.22) !important;
}

.pagination .active .page-link,
.pagination .page-link.active {
  background:
    linear-gradient(180deg, rgba(255,255,255,.12) 0%, rgba(255,255,255,0) 55%),
    #1e40af !important;
  border-color: rgba(59,130,246,.25) !important;
  box-shadow: 0 2px 10px rgba(59,130,246,.18), inset 0 1px 0 rgba(255,255,255,.18);
}

/* --- Allowlist / form input fields: glass --- */
.alw-control,
.flt,
.menu-input,
.admin-select {
  background: rgba(255,255,255,.04) !important;
  border-color: rgba(255,255,255,.10) !important;
  color: rgba(255,255,255,.92) !important;
  box-shadow: none;
}

.alw-control:focus,
.flt:focus,
.menu-input:focus {
  background: rgba(255,255,255,.06) !important;
  border-color: rgba(59,130,246,.50) !important;
  box-shadow: 0 0 0 3px rgba(59,130,246,.12) !important;
}

/* --- Styled info box: glass --- */
.styled-info-box {
  background:
    linear-gradient(180deg, rgba(255,255,255,.04) 0%, rgba(255,255,255,0) 50%),
    rgba(59,130,246,.14) !important;
  border: 1px solid rgba(59,130,246,.20) !important;
  border-left: 3px solid rgba(59,130,246,.50) !important;
  border-right: 3px solid rgba(59,130,246,.50) !important;
  backdrop-filter: blur(6px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 4px 16px rgba(0,0,0,.20);
}

/* --- Message boxes / alw-alert --- */
.alw-alert-danger {
  background: rgba(42,30,30,.88) !important;
  border-color: rgba(169,65,65,.60) !important;
  backdrop-filter: blur(6px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04), 0 2px 10px rgba(169,65,65,.15);
}

/* --- Allowlist header banner --- */
.allowlist-header {
  background:
    linear-gradient(180deg, rgba(255,255,255,.05) 0%, rgba(255,255,255,0) 50%),
    rgba(22,28,44,.88) !important;
  border: 1px solid rgba(59,130,246,.20) !important;
  backdrop-filter: blur(8px);
  box-shadow: 0 6px 24px rgba(0,0,0,.30), inset 0 1px 0 rgba(255,255,255,.07);
}

/* --- Admin bar i overview: glass --- */
.alw-adminbar {
  background: rgba(255,255,255,.025) !important;
  border: 1px solid rgba(59,130,246,.15) !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 4px 20px rgba(0,0,0,.28);
}

/* --- Vehicle items: subtle glass --- */
.vehicle-item .inner {
  background: rgba(255,255,255,.03) !important;
  border: 1px solid rgba(59,130,246,.12) !important;
  box-shadow: none;
  transition: border-color .2s ease, background .2s ease;
}
.vehicle-item .inner:hover {
  background: rgba(59,130,246,.06) !important;
  border-color: rgba(59,130,246,.28) !important;
}

/* --- Garage btn: glass --- */
.garage-btn.btn {
  background: rgba(255,255,255,.025) !important;
  border-color: rgba(59,130,246,.18) !important;
  box-shadow: none;
}
.garage-btn.btn:hover {
  background: rgba(59,130,246,.12) !important;
  border-color: rgba(59,130,246,.35) !important;
}

/* --- Stat bokse: site-palette --- */
.stat {
  background: rgba(255,255,255,.03) !important;
  border: 1px solid rgba(59,130,246,.12) !important;
  transition: border-color .2s;
}
.stat:hover { border-color: rgba(59,130,246,.28) !important; }

/* --- Chip (playtime panel): site-palette --- */
.chip {
  background: rgba(255,255,255,.03) !important;
  border-color: rgba(59,130,246,.15) !important;
  color: rgba(255,255,255,.65) !important;
}

/* --- Avatar ring: blå accent --- */
.avatar {
  border-color: rgba(59,130,246,.50) !important;
  box-shadow: 0 0 0 3px rgba(59,130,246,.15), 0 4px 12px rgba(0,0,0,.30) !important;
}

/* --- Heading på dashboard --- */
.nd-wrap .heading {
  font-size: 1.4rem;
  background: linear-gradient(135deg, rgba(255,255,255,.90), rgba(96,165,250,.80));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ==========================================================================
   GLOSSY KNAPPER — KOMPREHENSIV DÆKNING AF ALLE KNAP-TYPER
   ========================================================================== */

/* --- Fælles glossy base for ALLE .btn elementer ---
   Giver enhver knap en subtil top-shine og forbedret skygge.
   Mere specifikke selektorer nedenfor overrider med stærkere effekter. */
.btn {
  transition: all 0.20s ease !important;
}
.btn:not(.btn-link):not(.btn-close):not(.garage-btn):not(.th-btn) {
  box-shadow: 0 2px 8px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.10);
}
.btn:not(.btn-link):not(.btn-close):not(.garage-btn):not(.th-btn):hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.14);
}
.btn:not(.btn-link):not(.btn-close):not(.garage-btn):not(.th-btn):active {
  transform: translateY(0);
  box-shadow: 0 1px 4px rgba(0,0,0,.20), inset 0 2px 4px rgba(0,0,0,.18);
}

/* --- btn-custom (primær blå): glass pill --- */
.btn-custom,
.btn.btn-custom {
  background:
    linear-gradient(180deg, rgba(255,255,255,.07) 0%, rgba(255,255,255,0) 55%),
    rgba(255,255,255,.04) !important;
  border: 1px solid rgba(59,130,246,.28) !important;
  border-radius: 8px !important;
  color: rgba(255,255,255,.85) !important;
  box-shadow: 0 2px 8px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.08) !important;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.btn-custom:hover,
.btn.btn-custom:hover {
  background:
    linear-gradient(180deg, rgba(255,255,255,.14) 0%, rgba(255,255,255,0) 55%),
    rgba(59,130,246,.20) !important;
  border-color: rgba(59,130,246,.34) !important;
  color: #fff !important;
  box-shadow: 0 3px 8px rgba(59,130,246,.14), inset 0 1px 0 rgba(255,255,255,.12) !important;
  transform: translateY(-1px);
}
.btn-custom:active,
.btn.btn-custom:active {
  background:
    linear-gradient(180deg, rgba(255,255,255,.05) 0%, rgba(255,255,255,0) 55%),
    rgba(59,130,246,.35) !important;
  box-shadow: inset 0 2px 6px rgba(0,0,0,.25) !important;
  transform: translateY(0);
}

/* --- btn-secondary (Bootstrap grå): glass dark --- */
.btn-secondary,
.btn.btn-secondary {
  background:
    linear-gradient(180deg, rgba(255,255,255,.10) 0%, rgba(255,255,255,0) 55%, rgba(0,0,0,.10) 100%),
    #4a4f58 !important;
  border: 1px solid rgba(255,255,255,.12) !important;
  color: #e5e7eb !important;
  box-shadow: 0 2px 8px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.16) !important;
}
.btn-secondary:hover,
.btn.btn-secondary:hover {
  background:
    linear-gradient(180deg, rgba(255,255,255,.15) 0%, rgba(255,255,255,0) 55%), #575d68 !important;
  border-color: rgba(255,255,255,.20) !important;
  box-shadow: 0 4px 14px rgba(0,0,0,.32), inset 0 1px 0 rgba(255,255,255,.20) !important;
}

/* --- btn-outline-secondary: glass outline --- */
.btn-outline-secondary,
.btn.btn-outline-secondary {
  background: rgba(255,255,255,.04) !important;
  border: 1px solid rgba(255,255,255,.22) !important;
  color: rgba(255,255,255,.55) !important;
  backdrop-filter: blur(4px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.07) !important;
}
.btn-outline-secondary:hover,
.btn.btn-outline-secondary:hover {
  background: rgba(255,255,255,.09) !important;
  border-color: rgba(255,255,255,.35) !important;
  color: #e5e7eb !important;
  box-shadow: 0 3px 12px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.12) !important;
}

/* --- btn-discord: glossy blueviolet --- */
.btn-discord {
  background:
    linear-gradient(180deg, rgba(255,255,255,.14) 0%, rgba(255,255,255,0) 55%, rgba(0,0,0,.08) 100%),
    #5865f2 !important;
  border: 1px solid rgba(255,255,255,.13) !important;
  box-shadow: 0 2px 10px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.20) !important;
}
.btn-discord:hover {
  background:
    linear-gradient(180deg, rgba(255,255,255,.18) 0%, rgba(255,255,255,0) 55%), #4752c4 !important;
  box-shadow: 0 5px 18px rgba(88,101,242,.45), inset 0 1px 0 rgba(255,255,255,.22) !important;
}

/* --- btn-approve: glossy grøn --- */
.btn-approve {
  background:
    linear-gradient(180deg, rgba(255,255,255,.12) 0%, rgba(255,255,255,0) 55%, rgba(0,0,0,.08) 100%),
    #2e7d32 !important;
  border: 1px solid rgba(255,255,255,.12) !important;
  box-shadow: 0 2px 10px rgba(0,0,0,.25), inset 0 1px 0 rgba(255,255,255,.18) !important;
}
.btn-approve:hover {
  background:
    linear-gradient(180deg, rgba(255,255,255,.17) 0%, rgba(255,255,255,0) 55%), #296b2d !important;
  box-shadow: 0 5px 16px rgba(46,125,50,.40), inset 0 1px 0 rgba(255,255,255,.22) !important;
}

/* --- btn-reject: glossy rød --- */
.btn-reject {
  background:
    linear-gradient(180deg, rgba(255,255,255,.11) 0%, rgba(255,255,255,0) 55%, rgba(0,0,0,.10) 100%),
    #c0392b !important;
  border: 1px solid rgba(255,255,255,.11) !important;
  box-shadow: 0 2px 10px rgba(0,0,0,.25), inset 0 1px 0 rgba(255,255,255,.16) !important;
}
.btn-reject:hover {
  background:
    linear-gradient(180deg, rgba(255,255,255,.15) 0%, rgba(255,255,255,0) 55%), #a93226 !important;
  box-shadow: 0 5px 16px rgba(192,57,43,.40), inset 0 1px 0 rgba(255,255,255,.18) !important;
}

/* --- btn-pending: afdæmpet mørk blå --- */
.btn-pending {
  background:
    linear-gradient(180deg, rgba(255,255,255,.08) 0%, rgba(255,255,255,0) 55%, rgba(0,0,0,.10) 100%),
    #243b52 !important;
  border: 1px solid rgba(59,130,246,.20) !important;
  box-shadow: 0 2px 10px rgba(0,0,0,.25), inset 0 1px 0 rgba(255,255,255,.10) !important;
}
.btn-pending:hover {
  background:
    linear-gradient(180deg, rgba(255,255,255,.12) 0%, rgba(255,255,255,0) 55%), #1e40af !important;
  box-shadow: 0 5px 16px rgba(59,130,246,.18), inset 0 1px 0 rgba(255,255,255,.16) !important;
}

/* Disabled state — alle status-knapper */
.btn-status[disabled],
.btn-status.btn-disabled,
.btn[disabled] {
  opacity: 0.45 !important;
  box-shadow: none !important;
  transform: none !important;
  cursor: not-allowed !important;
}

/* --- garage-btn: glossy dark + chevron --- */
.garage-btn.btn {
  background:
    linear-gradient(180deg, rgba(255,255,255,.07) 0%, rgba(255,255,255,0) 55%),
    rgba(255,255,255,.03) !important;
  border: 1px solid rgba(59,130,246,.16) !important;
  box-shadow: 0 2px 8px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.08) !important;
}
.garage-btn.btn:hover {
  background:
    linear-gradient(180deg, rgba(255,255,255,.11) 0%, rgba(255,255,255,0) 55%),
    rgba(59,130,246,.22) !important;
  border-color: rgba(59,130,246,.30) !important;
  box-shadow: 0 4px 14px rgba(59,130,246,.22), inset 0 1px 0 rgba(255,255,255,.12) !important;
}

/* --- th-btn (tabel filter knapper): glass --- */
.th-btn {
  background:
    linear-gradient(180deg, rgba(255,255,255,.06) 0%, rgba(255,255,255,0) 55%),
    rgba(8,12,22,.88) !important;
  border: 1px solid rgba(255,255,255,.10) !important;
  box-shadow: 0 2px 6px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.07);
  backdrop-filter: blur(4px);
}
.th-btn:hover,
.th-btn:focus {
  background:
    linear-gradient(180deg, rgba(255,255,255,.10) 0%, rgba(255,255,255,0) 55%),
    rgba(59,130,246,.12) !important;
  border-color: rgba(59,130,246,.22) !important;
  box-shadow: 0 3px 10px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.10);
}

/* --- ndrp-mini (Opdatér knap i popover): glass --- */
.ndrp-mini {
  background:
    linear-gradient(180deg, rgba(255,255,255,.07) 0%, rgba(255,255,255,0) 55%),
    rgba(20,23,28,.90) !important;
  border: 1px solid rgba(59,130,246,.18) !important;
  color: #e5e7eb !important;
  box-shadow: 0 2px 6px rgba(0,0,0,.25), inset 0 1px 0 rgba(255,255,255,.09);
  transition: all .18s ease;
}
.ndrp-mini:hover {
  background:
    linear-gradient(180deg, rgba(255,255,255,.11) 0%, rgba(255,255,255,0) 55%),
    rgba(59,130,246,.12) !important;
  border-color: rgba(59,130,246,.32) !important;
  box-shadow: 0 4px 12px rgba(59,130,246,.28), inset 0 1px 0 rgba(255,255,255,.13);
  transform: translateY(-1px);
}

/* --- ndrp-link (admin bar nav links): glass --- */
.ndrp-link {
  background:
    linear-gradient(180deg, rgba(255,255,255,.06) 0%, rgba(255,255,255,0) 55%),
    rgba(18,21,26,.88) !important;
  border: 1px solid rgba(255,255,255,.09) !important;
  box-shadow: 0 1px 6px rgba(0,0,0,.20), inset 0 1px 0 rgba(255,255,255,.07);
  transition: all .18s ease;
}
.ndrp-link:hover {
  background:
    linear-gradient(180deg, rgba(255,255,255,.10) 0%, rgba(255,255,255,0) 55%),
    rgba(38,50,70,.92) !important;
  border-color: rgba(59,130,246,.20) !important;
  box-shadow: 0 3px 10px rgba(59,130,246,.20), inset 0 1px 0 rgba(255,255,255,.10);
  color: #fff !important;
  transform: translateY(-1px);
}

/* --- Søge/submit knapper i forms: alw-submit --- */
.alw-submit {
  background:
    linear-gradient(180deg, rgba(255,255,255,.13) 0%, rgba(255,255,255,0) 55%, rgba(0,0,0,.08) 100%),
    #3e5ea8 !important;
  border: 1px solid rgba(255,255,255,.13) !important;
  box-shadow: 0 2px 10px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.18) !important;
  transition: all .20s ease;
}
.alw-submit:hover {
  background:
    linear-gradient(180deg, rgba(255,255,255,.18) 0%, rgba(255,255,255,0) 55%),
    #5678c1 !important;
  box-shadow: 0 5px 18px rgba(62,94,168,.40), inset 0 1px 0 rgba(255,255,255,.22) !important;
  transform: translateY(-1px);
}

/* --- mitem (tabel popover list items): subtle glass --- */
.mitem {
  background:
    linear-gradient(180deg, rgba(255,255,255,.04) 0%, rgba(255,255,255,0) 60%),
    rgba(255,255,255,.025) !important;
  border: 1px solid rgba(255,255,255,.07) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
  transition: background .15s ease, border-color .15s ease;
}
.mitem:hover {
  background:
    linear-gradient(180deg, rgba(255,255,255,.07) 0%, rgba(255,255,255,0) 55%),
    rgba(59,130,246,.10) !important;
  border-color: rgba(59,130,246,.16) !important;
}

/* --- Pagination knapper: glossy --- */
.pagination .page-link {
  background:
    linear-gradient(180deg, rgba(255,255,255,.06) 0%, rgba(255,255,255,0) 55%),
    rgba(255,255,255,.03) !important;
  border: 1px solid rgba(255,255,255,.09) !important;
  box-shadow: 0 2px 6px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.06);
  transition: all .18s ease;
}
.pagination .page-link:hover {
  background:
    linear-gradient(180deg, rgba(255,255,255,.10) 0%, rgba(255,255,255,0) 55%),
    rgba(59,130,246,.10) !important;
  border-color: rgba(59,130,246,.20) !important;
  box-shadow: 0 3px 10px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.10);
  transform: translateY(-1px);
}
.pagination .active .page-link,
.pagination .page-link.active {
  background:
    linear-gradient(180deg, rgba(255,255,255,.14) 0%, rgba(255,255,255,0) 55%),
    #1e40af !important;
  border-color: rgba(59,130,246,.25) !important;
  box-shadow: 0 3px 12px rgba(59,130,246,.20), inset 0 1px 0 rgba(255,255,255,.20) !important;
}

/* ==========================================================================
   PREMIUM GLASS ENHANCEMENTS
   Shimmer, noise, glowing orbs, scrollbar, text glow, input glow, dividers
   ========================================================================== */

/* --- 1. Animerede baggrunds-orbs ---
   Blød pulserende farvesfærer bag indholdet for dybde og liv. */
body::before,
body::after {
  content: "";
  position: fixed;
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
  filter: blur(80px);
  opacity: 0;
  animation: orb-fade-in 2s ease forwards;
}
@keyframes orb-fade-in {
  to { opacity: 1; }
}
body::before {
  width: 600px; height: 600px;
  top: -200px; left: -150px;
  background: radial-gradient(circle, rgba(59,130,246,.18), transparent 70%);
  animation: orb-fade-in 2s ease forwards, orb-drift-1 18s ease-in-out infinite 2s;
}
body::after {
  width: 500px; height: 500px;
  bottom: -150px; right: -100px;
  background: radial-gradient(circle, rgba(100,140,200,.12), transparent 70%);
  animation: orb-fade-in 2s ease forwards, orb-drift-2 22s ease-in-out infinite 2s;
}
@keyframes orb-drift-1 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33%       { transform: translate(60px, 40px) scale(1.08); }
  66%       { transform: translate(-30px, 60px) scale(0.95); }
}
@keyframes orb-drift-2 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33%       { transform: translate(-50px, -40px) scale(1.06); }
  66%       { transform: translate(40px, -60px) scale(0.97); }
}

/* Sørg for at indholdet ligger over orbs */
main, footer {
  position: relative;
  z-index: 1;
}
/* Navbar/topmenu/adminbar skal ligge OVER main så dropdowns ikke fanges bagved */
.navbar, .ndrp-topmenu, #admin-bar-wrapper {
  position: relative;
  z-index: 2;
}

/* --- 2. Overflow hidden på cards (nødvendigt for andre effekter) --- */
.cardX,
.panel,
.alw-form,
.alw-card,
.rules-box,
section.mb-5.p-4.rounded {
  position: relative;
  overflow: hidden;
}

/* --- 13. Badge i section-head: subtil glow ved hover --- */
.section-head .badge {
  transition: box-shadow 0.20s ease, border-color 0.20s ease;
}
.section-head .badge:hover {
  border-color: rgba(59,130,246,.28) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.14),
    0 0 14px rgba(59,130,246,.18) !important;
}

/* --- Bootstrap alert overrides: mørkt glas-tema --- */
.alert {
  border-radius: 12px !important;
  backdrop-filter: blur(6px);
}
.alert-success {
  background: rgba(34,197,94,.12) !important;
  border-color: rgba(34,197,94,.30) !important;
  color: #86efac !important;
}
.alert-danger {
  background: rgba(239,68,68,.12) !important;
  border-color: rgba(239,68,68,.30) !important;
  color: #fca5a5 !important;
}
.alert-warning {
  background: rgba(234,179,8,.10) !important;
  border-color: rgba(234,179,8,.28) !important;
  color: #fde68a !important;
}
.alert-info {
  background: rgba(59,130,246,.10) !important;
  border-color: rgba(59,130,246,.28) !important;
  color: #93c5fd !important;
}

/* ==========================================================================
   MOVED FROM layout.ejs
   ========================================================================== */

/* --- Ens badge som i tabs/pills – og ALDRIG absolut position --- */
.count-badge {
  position: static !important;
  /* neutralisér evt. gammel absolut CSS */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 18px;
  padding: 0 6px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  line-height: 18px;
  /* samme som højde → pæn baseline */
  color: #fff;
  background: linear-gradient(180deg, #f43f5e, #b91c1c);
  border: 1px solid rgba(255, 255, 255, .12);
  box-shadow: 0 2px 8px rgba(244, 63, 94, .35), 0 0 0 1px rgba(0, 0, 0, .35) inset;
  vertical-align: middle;
}

/* Profil-knap: navn + badge i én linje */
.profile-toggle {
  display: inline-flex !important;
  align-items: center !important;
}

.profile-toggle .profile-name {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
}

.profile-toggle .count-badge {
  margin-left: .25rem;
  transform: translateY(1px);
  /* optisk center */
}

/* Dropdown-linje: ikon + label(+badge) – INGEN spacing mellem yderpunkter */
.profile-menu .dropdown-item {
  display: flex;
  align-items: center;
  gap: .5rem;
}

.label-with-badge {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  /* afstand mellem "Messages" og badge */
}

/* Lidt luft til Bootstrap-caret, så den ikke rammer badgen */
.navbar .dropdown-toggle::after {
  margin-left: .35rem;
  vertical-align: middle;
}

/* ==========================================================================
   MOVED FROM overview.ejs
   ========================================================================== */

.alw-wrap { display:flex; justify-content:center; padding:16px; }
.alw-wrap .alw-card { max-width:1200px; padding:24px; border-radius:18px; }

/* Header */
.alw-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 0;
}
.alw-header-left {
  display: flex;
  align-items: center;
  gap: 16px;
}
.alw-header-icon {
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 14px;
  background: rgba(59,130,246,.12);
  border: 1px solid rgba(59,130,246,.25);
  color: #60a5fa;
  font-size: 22px;
  flex-shrink: 0;
}
.alw-header-title {
  margin: 0;
  font-size: 1.35rem;
  font-weight: 700;
  color: rgba(255,255,255,.92);
  letter-spacing: .2px;
}
.alw-header-sub {
  margin: 2px 0 0;
  font-size: 0.82rem;
  color: rgba(255,255,255,.40);
}
.alw-divider {
  border: none;
  border-top: 1px solid rgba(59,130,246,.13);
  margin: 18px 0 4px;
}

.toolbar { display:flex; gap:12px; align-items:center; justify-content:space-between; margin:10px 0 14px; flex-wrap:wrap; }
.alw-control { flex:1; min-width:260px; background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.10); border-radius:10px; padding:10px 12px; color:rgba(255,255,255,.92); }
.statline { display:flex; gap:14px; opacity:.9; }
.table-wrap { overflow:auto; border-radius:10px; border:1px solid rgba(59,130,246,.15); }
.alw-table { width:100%; border-collapse:separate; border-spacing:0; }
.alw-table thead th { text-align:center; font-size:13px; font-weight:600; vertical-align:bottom; padding:6px 4px; background:rgba(8,12,22,.95); }
.alw-table thead th .th-btn { display:inline-block; margin:0 auto; font-size:12px; }
.alw-table tbody td { padding:10px; border-top:1px solid rgba(255,255,255,.05); vertical-align:middle; }
.alw-table tbody tr:hover td { background:rgba(59,130,246,.05); }
.alw-table code { background:rgba(255,255,255,.06); padding:2px 6px; border-radius:6px; border:1px solid rgba(59,130,246,.18); color:#60a5fa; }
.badge { display:inline-block; padding:2px 8px; border-radius:999px; font-size:12px; border:1px solid transparent; white-space:nowrap; }
.badge.ok{background:#19391f;border-color:#295c33;color:#8ce4a7;}
.badge.bad{background:#3a2325;border-color:#6a2e34;color:#ffb3b8;}
.badge.warn{background:#3b3116;border-color:#6a5a24;color:#ffe07a;}
.badge.info{background:#173046;border-color:#274c6a;color:#bcdcff;}
.pager { display:flex; justify-content:center; align-items:center; gap:10px; margin-top:14px; }
.pg-info { opacity:.9; }

/* Chips */
.chips { display:flex; gap:6px; flex-wrap:wrap; }
.chip { display:inline-flex; align-items:center; gap:6px; background:rgba(59,130,246,.12); border:1px solid rgba(59,130,246,.28); color:rgba(255,255,255,.90); border-radius:999px; padding:2px 8px; font-size:12px; }
.chip button { border:0; background:transparent; color:rgba(255,255,255,.55); cursor:pointer; padding:0 2px; }
.chip button:hover { color:#fff; }

/* Menus */
.has-menu { position:relative; }
.th-btn { background:rgba(255,255,255,.04); border:1px solid rgba(59,130,246,.18); border-radius:8px; padding:4px 8px; color:rgba(255,255,255,.85); cursor:pointer; font-size:12px; transition:background .15s, border-color .15s; }
.th-btn:hover { background:rgba(59,130,246,.10); border-color:rgba(59,130,246,.35); }
.th-btn:focus { outline:1px solid #3b82f6; outline-offset:2px; }
.th-menu { position:fixed; min-width:180px; background:rgba(8,12,22,.96); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); border:1px solid rgba(59,130,246,.20); border-radius:10px; box-shadow:0 12px 32px rgba(0,0,0,.50); padding:6px; display:none; z-index:1000; max-height:70vh; overflow:auto; }
.th-menu-wide { min-width:260px; }
.th-menu.open { display:block; }
.mitem { width:100%; text-align:left; background:rgba(255,255,255,.03); border:1px solid rgba(59,130,246,.12); border-radius:8px; padding:6px 8px; margin:4px 0; color:rgba(255,255,255,.92); cursor:pointer; transition:background .15s, border-color .15s; }
.mitem:hover { background:rgba(59,130,246,.10); border-color:rgba(59,130,246,.28); }
.menu-input { width:100%; background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.10); border-radius:8px; padding:6px 8px; color:rgba(255,255,255,.92); margin-bottom:6px; }
.menu-list { max-height:220px; overflow:auto; }

/* Tabs — pills */
.tabs {
  display: inline-flex;
  gap: 8px;
  padding: 6px;
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(59,130,246,.15);
  border-radius: 999px;
  margin-bottom: 0;
}

.tab {
  -webkit-tap-highlight-color: transparent;
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.08);
  color: rgba(255,255,255,.75);
  border-radius: 999px;
  padding: 8px 14px;
  font-size: 13px;
  cursor: pointer;
  transition: background .2s ease, border-color .2s ease, color .2s ease,
  box-shadow .2s ease, transform .12s ease;
}

/* hover/press feedback */
.tab:hover:not(.active) {
  border-color: #315c97;
  box-shadow: 0 6px 16px rgba(0,0,0,.35), inset 0 0 0 1px rgba(59,130,246,.20);
  transform: translateY(-1px);
}
.tab:active { transform: translateY(0); }

/* aktiv tilstand — ingen ring! */
.tab.active {
  background:
    radial-gradient(120% 120% at 50% 0%, rgba(59,130,246,.18) 0%, rgba(59,130,246,.08) 55%, transparent 100%),
    linear-gradient(180deg, #1f2a37, #18212b);
  border-color: #3b82f6;
  color: #fff;
  box-shadow: 0 0 0 1px rgba(59,130,246,.35) inset, 0 8px 24px rgba(59,130,246,.18);
  outline: none;
}

/* generelt: fjern ring, men behold keyboard-fokus som subtil indre glød */
.tab:focus { outline: none; }
.tab:focus-visible {
  box-shadow: 0 0 0 2px rgba(59,130,246,.55) inset;
}

/* badge til antal — lille, crisp "pill" (override for overview context) */
.tab .count-badge {
  line-height: 1;
  margin-left: 8px;
}
.count-badge[hidden] { display: none !important; }

/* badge bliver en anelse tydeligere i aktiv tilstand */
.tab.active .count-badge {
  border-color: rgba(255,255,255,.25);
}

/* ==========================================================================
   MESSAGES PAGE
   ========================================================================== */

.msg-wrap {
  max-width: 800px;
  margin: 0 auto;
  padding: 0 16px 2rem;
}
@media (max-width: 900px) { .msg-wrap { max-width: 100%; } }

/* Glasskort wrapper */
.msg-card {
  position: relative;
  background: rgba(255,255,255,.025);
  border: 1px solid rgba(59,130,246,.18);
  border-radius: 16px;
  box-shadow: 0 10px 28px rgba(0,0,0,.40);
  padding: 24px;
  overflow: hidden;
}
.msg-card::before {
  content: "";
  position: absolute;
  inset: 0;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: -1;
  border-radius: inherit;
}

/* Tom state */
.msg-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 56px 24px;
  text-align: center;
  color: rgba(255,255,255,.40);
  background: rgba(255,255,255,.02);
  border: 1px solid rgba(59,130,246,.10);
  border-radius: 16px;
  font-size: 14px;
}
.msg-empty-icon {
  font-size: 2.5rem;
  color: rgba(255,255,255,.15);
}

/* Liste */
.msg-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* Besked-item */
.msg-item {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 16px;
  align-items: center;
  background:
    linear-gradient(180deg, rgba(255,255,255,.04) 0%, rgba(255,255,255,0) 60%),
    rgba(255,255,255,.022);
  border: 1px solid rgba(59,130,246,.18);
  border-radius: 12px;
  padding: 16px 18px;
  transition: border-color .2s, transform .2s, background .2s, box-shadow .2s;
  cursor: default;
  box-shadow: 0 2px 12px rgba(0,0,0,.25), inset 0 1px 0 rgba(255,255,255,.05);
}
.msg-item:hover {
  border-color: rgba(59,130,246,.45);
  background:
    linear-gradient(180deg, rgba(255,255,255,.07) 0%, rgba(255,255,255,0) 60%),
    rgba(255,255,255,.038);
  transform: translateY(-2px);
  box-shadow: 0 10px 28px rgba(0,0,0,.40), inset 0 1px 0 rgba(255,255,255,.08);
}
.msg-item--unread {
  border-color: rgba(59,130,246,.32);
  background:
    linear-gradient(180deg, rgba(59,130,246,.06) 0%, rgba(59,130,246,.02) 60%),
    rgba(255,255,255,.022);
  border-left: 3px solid #3b82f6;
}
.msg-item--unread:hover {
  border-color: rgba(59,130,246,.55);
  border-left-color: #60a5fa;
}

/* Ikon */
.msg-item-icon {
  width: 42px;
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  background: rgba(59,130,246,.12);
  border: 1px solid rgba(59,130,246,.22);
  color: #60a5fa;
  flex-shrink: 0;
  font-size: 17px;
}

/* Indhold */
.msg-item-body {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.msg-item-top {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.msg-item-label {
  color: rgba(255,255,255,.92);
  font-weight: 600;
  font-size: 0.9rem;
}
.msg-item-meta {
  color: rgba(255,255,255,.38);
  font-size: 0.78rem;
  display: flex;
  align-items: center;
  gap: 5px;
}

/* NY chip */
.chip-new {
  display: inline-flex;
  align-items: center;
  height: 18px;
  padding: 0 8px;
  border-radius: 999px;
  background: rgba(244,63,94,.15);
  border: 1px solid rgba(244,63,94,.30);
  color: #fca5a5;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .5px;
}

/* Knap */
.msg-item-cta .btn { white-space: nowrap; }

@media (max-width: 560px) {
  .msg-item {
    grid-template-columns: auto 1fr;
    grid-template-rows: auto auto;
  }
  .msg-item-cta {
    grid-column: 2;
    grid-row: 2;
  }
}

/* ==========================================================================
   MOVED FROM allowlist_thanks.ejs and ban_appeal_thanks.ejs
   (identical styles, merged into one block)
   ========================================================================== */

.alw-box {
  background: rgba(255,255,255,.025);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border: 1px solid rgba(59,130,246,.18);
  border-radius: 16px;
  padding: 32px 28px;
  box-shadow: 0 10px 28px rgba(0,0,0,.45);
  color: rgba(255,255,255,.92);
}
.success-icon {
  width: 52px; height: 52px; border-radius: 50%;
  background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 24px; margin: 0 auto 14px;
  box-shadow: 0 4px 16px rgba(34,197,94,.35);
}
.alw-token { color: rgba(255,255,255,.45); margin-top: 12px; }
.alw-token code {
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(59,130,246,.18);
  border-radius: 6px;
  padding: 2px 8px;
  color: #60a5fa;
  font-size: 0.9em;
}

/* ==========================================================================
   MOVED FROM ban_appeal_view.ejs
   ========================================================================== */

.pa-wrap { max-width: 880px; margin: 0 auto; padding: 0 12px; }

.pa-wrap .panel {
  background: rgba(255,255,255,.025);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border: 1px solid rgba(59,130,246,.18);
  border-radius: 16px;
  box-shadow: 0 10px 28px rgba(0,0,0,.45);
}
.pa-wrap .pa-card { padding: 20px; }

.pa-wrap .panel-lite {
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(59,130,246,.14);
  border-radius: 12px;
  padding: 12px;
}

.pa-status .alert { margin-bottom: 14px; border-radius: 12px; }

.pa-meta { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.meta-row {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 8px 12px;
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(59,130,246,.12);
  border-radius: 10px;
}
.pa-wrap .muted { color: rgba(255,255,255,.45); }
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace; color: #60a5fa; }

.pa-block { margin-top: 14px; }
.block-label { display: block; font-weight: 700; color: rgba(255,255,255,.75); font-size: 13px; margin-bottom: 8px; }

/* --- Staff-svar tekstfelt --- */
.pa-reply {
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 12px;
  padding: 12px 14px;
  line-height: 1.6;
  color: rgba(255,255,255,.92);
  resize: none;
  width: 100%;
}

/* Breathing glow when a staff reply exists */
.pa-reply.has-reply {
  border-color: rgba(59,130,246,.30);
  animation: replyGlow 2.2s ease-in-out infinite;
}

@keyframes replyGlow {
  0% {
    box-shadow:
      inset 0 0 0 1px rgba(59,130,246,.08),
      0 0 0 0 rgba(59,130,246,.00);
  }
  50% {
    box-shadow:
      inset 0 0 0 1px rgba(59,130,246,.18),
      0 0 22px 8px rgba(59,130,246,.10),
      0 0 60px 14px rgba(139,92,246,.06);
  }
  100% {
    box-shadow:
      inset 0 0 0 1px rgba(59,130,246,.08),
      0 0 0 0 rgba(59,130,246,.00);
  }
}

/* ==========================================================================
   MOVED FROM allowlist_admin_search.ejs
   ========================================================================== */

.alw-review { display: flex; justify-content: center; padding: 24px 12px; }
.alw-searchcard {
  max-width: 560px;
}
.alw-h1 {
  text-align: center; margin: 6px 0 18px;
  color: rgba(255,255,255,.92); font-weight: 700;
  border-bottom: 1px solid rgba(59,130,246,.15);
  padding-bottom: 14px;
}
.alw-searchform { display: flex; flex-direction: column; gap: 12px; }
.alw-label { color: rgba(255,255,255,.75); font-weight: 600; font-size: 13px; }
.alw-alert {
  background: rgba(42,20,20,.80);
  border: 1px solid rgba(169,65,65,.50);
  color: #fca5a5;
  padding: 10px 14px;
  border-radius: 10px;
  margin-bottom: 12px;
  backdrop-filter: blur(4px);
}
.alw-searchbtn { align-self: center; min-width: 180px; }

/* ==========================================================================
   MOVED FROM ban_appeal_form.ejs
   ========================================================================== */

.auto-expand {
  transition: height 0.08s ease;
}

.alw-card {
  overflow: visible;
}

/* Modal overlay — shared by login-required and warning modals */
.confirm-modal,
.warn-modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100vw;
  height: 100vh;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.75);
  backdrop-filter: blur(4px);
  animation: fadeIn 0.15s ease;
}

/* Modal box */
.confirm-modal-box,
.warn-modal-box {
  background: rgba(8,12,22,.96);
  border: 1px solid rgba(59,130,246,.22);
  border-radius: 16px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6);
  max-width: 500px;
  width: 90%;
  animation: slideIn 0.2s ease;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

/* Modal header */
.confirm-modal-header,
.warn-modal-header {
  padding: 18px 22px;
  border-bottom: 1px solid rgba(59,130,246,.15);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.confirm-modal-header h5,
.warn-modal-header h5 {
  color: rgba(255,255,255,.92);
  font-weight: 700;
  font-size: 1.15rem;
  margin: 0;
  display: flex;
  align-items: center;
}

/* Modal close button */
.modal-close-btn {
  background: transparent;
  border: none;
  color: rgba(255,255,255,0.6);
  font-size: 1.5rem;
  cursor: pointer;
  padding: 0;
  width: 24px;
  height: 24px;
  line-height: 1;
  transition: color 0.2s;
}
.modal-close-btn:hover { color: rgba(255,255,255,1); }

/* Modal body */
.confirm-modal-body,
.warn-modal-body {
  padding: 20px 22px;
  color: rgba(255,255,255,.92);
  line-height: 1.6;
}

/* Modal footer */
.confirm-modal-footer,
.warn-modal-footer {
  padding: 16px 22px;
  border-top: 1px solid rgba(59,130,246,.15);
  background: rgba(0, 0, 0, 0.15);
  border-radius: 0 0 16px 16px;
  display: flex;
  gap: 10px;
  justify-content: flex-end;
}

.warn-modal-footer {
  justify-content: flex-end;
  text-align: right;
}

/* Animations used by modals */
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes slideIn {
  from { transform: translateY(-20px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

/* ==========================================================================
   MOVED FROM regler.ejs inline styles
   ========================================================================== */

/* Sticky nav z-index (overrides position-sticky default stacking) */
.rules-sticky-nav {
  z-index: 100;
}

/* Line-height for rule lists */
.rule-list {
  line-height: 1.8;
}

/* Icon bullet divs (›) */
.rule-icon {
  font-size: 1.0rem;
}

/* HUSK paragraph muted style */
.rule-husk {
  color: rgba(255,255,255,.65);
  font-size: 0.875rem;
}


/* ==========================================================================
   MOVED FROM allowlist_form.ejs inline styles
   ========================================================================== */

/* Required field asterisk */
.required-star {
  color: #f87171;
}

/* ==========================================================================
   MOVED FROM dashboard.ejs inline styles
   ========================================================================== */

/* Accent-coloured text */
.text-accent {
  color: var(--accentLite);
}

/* Panel row flex-wrap with row-gap */
.panel-row-wrap {
  flex-wrap: wrap;
  row-gap: 8px;
}

/* Inner meta row for account stats */
.account-meta-row {
  display: flex;
  gap: 10px;
  align-items: center;
  width: 100%;
  margin-top: 6px;
  flex-wrap: wrap;
}

/* ==========================================================================
   VIEW PAGES — ban_appeal_view / admin views
   ========================================================================== */

.view-outer {
  max-width: 880px;
  margin: 0 auto;
  padding: 0 16px 2rem;
}

/* Page header */
.view-page-header {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 1.5rem;
}
.view-page-header-icon {
  width: 48px; height: 48px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 14px;
  background: rgba(59,130,246,.12);
  border: 1px solid rgba(59,130,246,.25);
  color: #60a5fa; font-size: 22px; flex-shrink: 0;
}
.view-page-title { margin: 0; font-size: 1.35rem; font-weight: 700; color: rgba(255,255,255,.92); }
.view-page-sub { margin: 2px 0 0; font-size: 0.82rem; color: rgba(255,255,255,.40); }

/* Status cards — centreret som i screenshottet */
.view-status-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 4px;
  padding: 20px 24px;
  border-radius: 14px;
  border: 1px solid;
  margin: 0 auto 16px;
  backdrop-filter: blur(6px);
  max-width: 800px;
}
/* locked/handling er mindre prominente — hold dem row-layout */
.view-status-card--locked,
.view-status-card--handling {
  flex-direction: row;
  text-align: left;
  gap: 14px;
}
.view-status-icon { font-size: 2rem; }
.view-status-label { display: block; font-weight: 700; font-size: 1.25rem; }
.view-status-sub { display: block; font-size: 0.85rem; opacity: .75; margin-top: 3px; }

.view-status-card--afvist {
  background: rgba(192,57,43,.12);
  border-color: rgba(192,57,43,.30);
  color: #fca5a5;
}
.view-status-card--afvist .view-status-icon { color: #f87171; }

.view-status-card--godkendt {
  background: rgba(46,125,50,.12);
  border-color: rgba(46,125,50,.30);
  color: #86efac;
}
.view-status-card--godkendt .view-status-icon { color: #4ade80; }

.view-status-card--pending {
  background: rgba(59,130,246,.08);
  border-color: rgba(59,130,246,.22);
  color: rgba(255,255,255,.80);
}
.view-status-card--pending .view-status-icon { color: #60a5fa; }

.view-status-card--review {
  background: rgba(202,138,4,.10);
  border-color: rgba(202,138,4,.28);
  color: #fde68a;
}
.view-status-card--review .view-status-icon { color: #fbbf24; }

.view-status-card--locked {
  background: rgba(202,138,4,.08);
  border-color: rgba(202,138,4,.22);
  color: #fde68a;
}
.view-status-card--locked .view-status-icon { color: #fbbf24; }

.view-status-card--handling {
  background: rgba(59,130,246,.08);
  border-color: rgba(59,130,246,.20);
  color: rgba(255,255,255,.75);
}
.view-status-card--handling .view-status-icon { color: #60a5fa; }

/* ba-autosize */
.ba-autosize {
  overflow: hidden !important;
  resize: none !important;
  transition: height .08s ease;
}

/* needs-reply-hint */
.needs-reply-hint {
  margin-top: 8px;
  padding: 6px 10px;
  border-radius: 8px;
  background: rgba(192,57,43,.15);
  color: #fca5a5;
  border: 1px solid rgba(192,57,43,.30);
  font-size: 12px;
  display: flex;
  align-items: center;
  gap: 6px;
}

#statusRow {
  opacity: 0;
  transform: translateY(4px);
  transition: opacity .18s ease, transform .18s ease;
}
#statusRow.fade-in-row { opacity: 1; transform: none; }

.shake { animation: shake .28s ease-in-out; }
@keyframes shake {
  0%, 100% { transform: translateX(0); }
  25%       { transform: translateX(-3px); }
  75%       { transform: translateX(3px); }
}

/* ============================================================
   MOVED FROM media pages (media_index.ejs + media_admin.ejs)
   ============================================================ */

/* ---- User-facing download page ---- */

.dl-page {
  max-width: 960px;
  margin: 0 auto 48px;
  text-align: left;
}

/* Hero over ansøgnings-sider (udenfor alw-container) */
.alw-page-hero {
  max-width: 800px;
  margin: 0 auto 0;
}
.alw-page-hero + .alw-container {
  padding-top: 12px;
}
.alw-page-hero + .msg-wrap {
  padding-top: 12px;
}

/* Hero header */
.dl-hero {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 32px 28px;
  background: rgba(255,255,255,.025);
  border: 1px solid rgba(59,130,246,.18);
  border-radius: 16px;
  margin-bottom: 28px;
  flex-wrap: wrap;
  text-align: left;
}
.dl-hero-icon {
  width: 56px; height: 56px; min-width: 56px;
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(59,130,246,.25), rgba(139,92,246,.25));
  border: 1px solid rgba(59,130,246,.30);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.6rem;
  color: #60a5fa;
}
.dl-hero-title {
  font-size: 1.6rem;
  font-weight: 700;
  color: rgba(255,255,255,.95);
  margin: 0;
  line-height: 1.2;
}
.dl-hero-sub {
  font-size: .9rem;
  color: rgba(255,255,255,.50);
  margin: 4px 0 0;
}
.dl-hero-stats {
  display: flex;
  gap: 16px;
  margin-left: auto;
}
.dl-hero-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 10px 18px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 10px;
}
.dl-hero-stat-num {
  font-size: 1.4rem;
  font-weight: 700;
  color: #60a5fa;
  line-height: 1;
}
.dl-hero-stat-label {
  font-size: .72rem;
  color: rgba(255,255,255,.45);
  text-transform: uppercase;
  letter-spacing: .05em;
}

/* Login CTA */
.dl-cta {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 24px 28px;
  background: rgba(88,101,242,.08);
  border: 1px solid rgba(88,101,242,.22);
  border-radius: 14px;
  flex-wrap: wrap;
  margin-bottom: 24px;
}
.dl-cta-icon {
  font-size: 2rem;
  color: #7289da;
  min-width: 40px;
  text-align: center;
}
.dl-cta-text {
  display: flex;
  flex-direction: column;
  gap: 3px;
  flex: 1;
}
.dl-cta-text strong { color: rgba(255,255,255,.92); font-size: .95rem; }
.dl-cta-text span   { color: rgba(255,255,255,.50); font-size: .85rem; }

/* Empty state */
.dl-empty {
  padding: 60px 20px;
  text-align: center;
}
.dl-empty-icon {
  font-size: 3rem;
  color: rgba(255,255,255,.15);
  display: block;
  margin-bottom: 16px;
}
.dl-empty-title {
  font-size: 1.1rem;
  font-weight: 600;
  color: rgba(255,255,255,.60);
  margin: 0 0 6px;
}
.dl-empty-sub {
  font-size: .875rem;
  color: rgba(255,255,255,.35);
  margin: 0;
}

/* Sektioner (Musik / Filer) */
.dl-section { margin-bottom: 36px; }
.dl-section-header {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: .8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: rgba(255,255,255,.40);
  margin-bottom: 16px;
}
.dl-section-icon { font-size: 1rem; }
.dl-section-icon--music { color: #c4b5fd; }
.dl-section-icon--file  { color: #93c5fd; }

/* Musik-grid */
.dl-music-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 18px;
}
.dl-music-card {
  background: rgba(255,255,255,.025);
  border: 1px solid rgba(59,130,246,.15);
  border-radius: 14px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: border-color .2s, box-shadow .2s, transform .15s;
}
.dl-music-card:hover {
  border-color: rgba(59,130,246,.40);
  background:
    linear-gradient(180deg, rgba(255,255,255,.07) 0%, rgba(255,255,255,0) 60%),
    rgba(255,255,255,.038);
  transform: translateY(-3px);
  box-shadow: 0 10px 28px rgba(0,0,0,.40), inset 0 1px 0 rgba(255,255,255,.08);
}
.dl-music-art {
  height: 130px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
.dl-music-art-icon {
  font-size: 2.8rem;
  color: rgba(255,255,255,.35);
}
.dl-lock-overlay {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,.45);
  font-size: 2.2rem;
  color: rgba(255,255,255,.45);
}
.dl-music-body {
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1;
}
.dl-music-meta {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
}
.dl-music-title {
  font-size: .95rem;
  font-weight: 600;
  color: rgba(255,255,255,.92);
  line-height: 1.3;
}
.dl-music-desc {
  font-size: .82rem;
  color: rgba(255,255,255,.45);
  margin: 0;
  line-height: 1.5;
}
.dl-music-counts {
  display: flex;
  gap: 5px;
  flex-shrink: 0;
}
.dl-no-access {
  font-size: .82rem;
  color: rgba(239,68,68,.70);
  padding: 8px 10px;
  background: rgba(239,68,68,.07);
  border: 1px solid rgba(239,68,68,.15);
  border-radius: 8px;
  text-align: center;
}
.dl-audio {
  width: 100%;
  height: 34px;
  border-radius: 8px;
  accent-color: #3b82f6;
  filter: invert(1) hue-rotate(180deg) brightness(.85);
}
.dl-download-btn { align-self: flex-start; }
.dl-format-btns { display: flex; gap: 8px; flex-wrap: wrap; align-self: flex-start; }
/* FLAC — lilla (lossless komprimeret) */
.dl-download-btn--flac {
  background: rgba(139,92,246,.08) !important;
  border-color: rgba(139,92,246,.30) !important;
  color: #c4b5fd !important;
}
.dl-download-btn--flac:hover {
  background: rgba(139,92,246,.20) !important;
  border-color: rgba(139,92,246,.50) !important;
  box-shadow: 0 3px 8px rgba(139,92,246,.18) !important;
}
/* OGG — cyan (åbent format) */
.dl-download-btn--ogg {
  background: rgba(6,182,212,.08) !important;
  border-color: rgba(6,182,212,.30) !important;
  color: #67e8f9 !important;
}
.dl-download-btn--ogg:hover {
  background: rgba(6,182,212,.20) !important;
  border-color: rgba(6,182,212,.50) !important;
  box-shadow: 0 3px 8px rgba(6,182,212,.18) !important;
}
/* MP3 — grøn (standard lossy) */
.dl-download-btn--mp3 {
  background: rgba(16,185,129,.08) !important;
  border-color: rgba(16,185,129,.30) !important;
  color: #6ee7b7 !important;
}
.dl-download-btn--mp3:hover {
  background: rgba(16,185,129,.20) !important;
  border-color: rgba(16,185,129,.50) !important;
  box-shadow: 0 3px 8px rgba(16,185,129,.18) !important;
}

/* Fil-liste */
.dl-file-list { display: flex; flex-direction: column; gap: 10px; }
.dl-file-row {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 20px;
  background: rgba(255,255,255,.025);
  border: 1px solid rgba(59,130,246,.15);
  border-radius: 12px;
  transition: border-color .2s, background .2s;
}
.dl-file-row:hover {
  border-color: rgba(59,130,246,.30);
  background: rgba(59,130,246,.04);
}
.dl-file-icon-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  min-width: 44px;
}
.dl-file-icon {
  font-size: 1.8rem;
  color: #60a5fa;
}
.dl-file-ext {
  font-size: .6rem;
  font-weight: 700;
  color: rgba(255,255,255,.35);
  letter-spacing: .05em;
}
.dl-file-info {
  display: flex;
  flex-direction: column;
  gap: 3px;
  flex: 1;
  min-width: 0;
  text-align: left;
}
.dl-file-name {
  font-size: .95rem;
  font-weight: 600;
  color: rgba(255,255,255,.92);
}
.dl-file-desc {
  font-size: .82rem;
  color: rgba(255,255,255,.45);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.dl-file-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

/* Tæller-pill */
.dl-count-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: .75rem;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: 20px;
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.40);
  border: 1px solid rgba(255,255,255,.08);
  white-space: nowrap;
}

/* Locked */
.dl-locked { opacity: .55; }
.dl-locked .btn, .dl-locked audio { pointer-events: none; cursor: not-allowed; }

@media (max-width: 768px) {
  .dl-hero         { padding: 20px 16px; gap: 14px; }
  .dl-hero-stats   { margin-left: 0; width: 100%; justify-content: flex-start; }
  .dl-music-grid   { grid-template-columns: 1fr; }
  .dl-file-row     { flex-wrap: wrap; gap: 12px; }
  .dl-file-actions { width: 100%; justify-content: flex-end; }
  .dl-cta          { flex-direction: column; align-items: flex-start; }
}

/* Badge-piller (bruges i admin) */
.dl-badge {
  display: inline-flex;
  align-items: center;
  font-size: 11px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 20px;
  white-space: nowrap;
  letter-spacing: .01em;
}
.dl-badge--file {
  background: rgba(59,130,246,.12);
  color: #93c5fd;
  border: 1px solid rgba(59,130,246,.22);
}
.dl-badge--music {
  background: rgba(139,92,246,.12);
  color: #c4b5fd;
  border: 1px solid rgba(139,92,246,.22);
}
.dl-badge--locked {
  background: rgba(239,68,68,.10);
  color: #fca5a5;
  border: 1px solid rgba(239,68,68,.20);
}
.dl-badge--count {
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.55);
  border: 1px solid rgba(255,255,255,.10);
}
.dl-badge--active {
  background: rgba(34,197,94,.10);
  color: #86efac;
  border: 1px solid rgba(34,197,94,.20);
}
.dl-badge--inactive {
  background: rgba(239,68,68,.10);
  color: #fca5a5;
  border: 1px solid rgba(239,68,68,.20);
}
.dl-badge--open {
  background: rgba(6,182,212,.10);
  color: #67e8f9;
  border: 1px solid rgba(6,182,212,.20);
}
.dl-badge--role {
  background: rgba(245,158,11,.10);
  color: #fcd34d;
  border: 1px solid rgba(245,158,11,.20);
  max-width: 140px;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* HTML5 audio-afspiller */
.dl-audio {
  width: 100%;
  margin-top: 4px;
  height: 36px;
  border-radius: 8px;
  accent-color: #3b82f6;
  filter: invert(1) hue-rotate(180deg) brightness(.85);
}

/* ---- Admin panel ---- */

/* Upload-kort med stiplet kant */
.media-admin-upload {
  background: rgba(255,255,255,.018);
  border: 1.5px dashed rgba(59,130,246,.28);
  border-radius: 12px;
  padding: 22px 24px;
  margin-bottom: 8px;
  text-align: left;
}

.media-admin-section-title {
  font-size: 1rem;
  font-weight: 600;
  color: rgba(255,255,255,.80);
  margin-bottom: 16px;
  display: flex;
  align-items: center;
}

/* Fil-input */
.dl-file-input {
  padding: 8px !important;
  cursor: pointer;
}
.dl-file-input::file-selector-button {
  background: rgba(59,130,246,.15);
  border: 1px solid rgba(59,130,246,.30);
  color: #93c5fd;
  border-radius: 6px;
  padding: 4px 10px;
  cursor: pointer;
  font-size: .8rem;
  margin-right: 10px;
  transition: background .15s;
}
.dl-file-input::file-selector-button:hover {
  background: rgba(59,130,246,.28);
}

/* Radio-gruppe */
.dl-radio-group {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  padding-top: 8px;
}
.dl-radio-label {
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  font-size: .875rem;
  color: rgba(255,255,255,.75);
}
.dl-radio-label input[type="radio"] {
  accent-color: #3b82f6;
  width: 15px;
  height: 15px;
}

/* Rolle-checkbox-grid */
.dl-role-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 8px;
  max-height: 220px;
  overflow-y: auto;
  padding: 10px;
  background: rgba(255,255,255,.02);
  border: 1px solid rgba(59,130,246,.14);
  border-radius: 8px;
  margin-top: 4px;
}
.dl-role-label {
  display: flex;
  align-items: center;
  gap: 7px;
  cursor: pointer;
  font-size: .8rem;
  color: rgba(255,255,255,.70);
  padding: 4px 6px;
  border-radius: 6px;
  transition: background .12s;
}
.dl-role-label:hover {
  background: rgba(59,130,246,.08);
}
.dl-role-label input[type="checkbox"] {
  accent-color: #3b82f6;
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}
.dl-role-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Admin-tabel — glass-stil identisk med overview-tabel */
.dl-admin-table-wrap {
  overflow-x: auto;
  border-radius: 10px;
  border: 1px solid rgba(59,130,246,.14);
  margin-top: 8px;
}
.dl-admin-table {
  width: 100%;
  border-collapse: collapse;
  font-size: .875rem;
}
.dl-admin-table thead {
  background: rgba(59,130,246,.08);
}
.dl-admin-table th {
  padding: 10px 14px;
  text-align: left;
  color: rgba(255,255,255,.55);
  font-weight: 600;
  font-size: .78rem;
  text-transform: uppercase;
  letter-spacing: .04em;
  border-bottom: 1px solid rgba(59,130,246,.14);
  white-space: nowrap;
}
.dl-admin-table td {
  padding: 10px 14px;
  border-bottom: 1px solid rgba(255,255,255,.04);
  vertical-align: middle;
  color: rgba(255,255,255,.85);
}
.dl-admin-table tbody tr:last-child td {
  border-bottom: none;
}
.dl-admin-table tbody tr:hover td {
  background: rgba(59,130,246,.04);
}
.dl-admin-name {
  font-weight: 600;
  color: rgba(255,255,255,.92);
}
.dl-admin-filename {
  font-size: 11px;
  color: rgba(255,255,255,.50);
  word-break: break-all;
}

/* Edit panel — udenfor tabellen */
.dl-edit-panel {
  background: rgba(59,130,246,.04);
  border: 1px solid rgba(59,130,246,.18);
  border-top: none;
  border-radius: 0 0 10px 10px;
  padding: 16px;
  margin-top: -1px;
  text-align: left;
}
.dl-edit-panel textarea.alw-control { flex: none; width: 100%; }
.dl-edit-panel .alw-label { text-align: left; }

/* Slet- og annuller-knapper */
.dl-btn-delete {
  background: rgba(239,68,68,.10);
  border: 1px solid rgba(239,68,68,.25);
  color: #fca5a5;
  border-radius: 8px;
  padding: 4px 12px;
  font-size: .8rem;
  cursor: pointer;
  transition: background .15s, border-color .15s;
}
.dl-btn-delete:hover {
  background: rgba(239,68,68,.22);
  border-color: rgba(239,68,68,.40);
  color: #fca5a5;
}
.dl-btn-cancel {
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.12);
  color: rgba(255,255,255,.60);
  border-radius: 8px;
  padding: 4px 12px;
  font-size: .8rem;
  cursor: pointer;
  transition: background .15s;
}
.dl-btn-cancel:hover {
  background: rgba(255,255,255,.10);
  color: rgba(255,255,255,.85);
}

/* Mindre kontrol-variant til inline redigerings-formular */
.alw-control--sm {
  padding: 6px 10px !important;
  font-size: .85rem !important;
}

@media (max-width: 768px) {
  .media-admin-upload {
    padding: 14px 12px;
  }
  .dl-role-grid {
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  }
  .dl-admin-table th,
  .dl-admin-table td {
    padding: 8px 10px;
    font-size: .78rem;
  }
}

/* =====================================================
   DASHBOARD — nye sektioner (2026-03-29)
   ===================================================== */

/* Meta-bar i bunden af dashboard hero */
.dl-hero--dashboard {
  flex-wrap: nowrap;
  align-items: flex-start;
}
.db-meta-bar {
  width: 100%;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  font-size: .75rem;
  color: rgba(255,255,255,.38);
  padding-top: 10px;
  margin-top: 4px;
  border-top: 1px solid rgba(59,130,246,.12);
}
.db-meta-bar strong { color: rgba(255,255,255,.60); font-weight: 600; }
.db-meta-sep { color: rgba(255,255,255,.18); }
/* --- Dashboard: ingen karakterer empty state --- */
.db-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  padding: 56px 32px;
  background: rgba(255,255,255,.025);
  border: 1px solid rgba(59,130,246,.12);
  border-radius: 16px;
  text-align: center;
  margin: 32px auto;
  max-width: 560px;
}
.db-empty-icon {
  width: 64px;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(59,130,246,.10);
  border: 1px solid rgba(59,130,246,.20);
  font-size: 28px;
  color: #60a5fa;
}
.db-empty-title {
  margin: 0;
  font-size: 1.1rem;
  font-weight: 600;
  color: rgba(255,255,255,.90);
}
.db-empty-sub {
  margin: 0;
  font-size: .875rem;
  color: rgba(255,255,255,.50);
  line-height: 1.6;
}
.db-empty-link {
  color: #60a5fa;
  text-decoration: none;
  border-bottom: 1px solid rgba(96,165,250,.35);
  transition: color .15s, border-color .15s;
}
.db-empty-link:hover {
  color: #93c5fd;
  border-color: rgba(147,197,253,.55);
}

.db-hero-stat-pill {
  flex-shrink: 0;
  align-self: flex-start;
  background: rgba(59,130,246,.12);
  border: 1px solid rgba(59,130,246,.28);
  padding: 7px 14px;
}
.db-hero-stat-pill .dl-hero-stat-num {
  font-size: 1rem;
  font-weight: 700;
}
.db-hero-stat-pill .dl-hero-stat-label {
  font-size: .65rem;
}

/* Header info-chips (fødselsdato, nationalitet, boliger) */
.db-charinfo-row { display: flex; flex-wrap: wrap; gap: 6px; }
.db-info-chip {
  font-size: .72rem;
  color: rgba(255,255,255,.45);
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 6px;
  padding: 2px 8px;
}

/* Pills i header (blodtype, straffeattest) */
.db-pill {
  font-size: .68rem;
  font-weight: 600;
  border-radius: 6px;
  padding: 2px 8px;
  white-space: nowrap;
}
.db-pill--blood {
  background: rgba(239,68,68,.15);
  border: 1px solid rgba(239,68,68,.30);
  color: #fca5a5;
}
.db-pill--danger {
  background: rgba(239,68,68,.15);
  border: 1px solid rgba(239,68,68,.35);
  color: #f87171;
}

/* Besparelser/opsparinger liste */
.db-savings-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.db-savings-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: .78rem;
  color: rgba(255,255,255,.55);
  background: rgba(255,255,255,.03);
  border-radius: 6px;
  padding: 4px 10px;
}
.db-savings-row span:last-child { color: rgba(255,255,255,.80); font-weight: 600; }

/* Licenser */
.db-licence-row { display: flex; flex-wrap: wrap; gap: 8px; }
.db-licence-badge {
  display: inline-flex;
  align-items: center;
  font-size: .75rem;
  font-weight: 600;
  border-radius: 8px;
  padding: 4px 12px;
  border: 1px solid transparent;
}
.db-licence--ok {
  background: rgba(34,197,94,.12);
  border-color: rgba(34,197,94,.28);
  color: #86efac;
}
.db-licence--no {
  background: rgba(255,255,255,.04);
  border-color: rgba(255,255,255,.10);
  color: rgba(255,255,255,.35);
}

/* Færdigheder */
.db-skills { display: flex; flex-direction: column; gap: 10px; }
.db-skill-row {
  display: grid;
  grid-template-columns: 100px 1fr 40px;
  align-items: center;
  gap: 10px;
  font-size: .73rem;
}
.db-skill-label {
  color: rgba(255,255,255,.55);
  display: flex;
  align-items: center;
  gap: 7px;
}
.db-skill-label::before {
  content: '';
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
}
.db-skill-bar-wrap {
  height: 8px;
  background: rgba(255,255,255,.07);
  border-radius: 99px;
  overflow: visible;
}
.db-skill-bar {
  height: 100%;
  border-radius: 99px;
  transition: width .5s cubic-bezier(.4,0,.2,1);
  min-width: 2px;
}
.db-skill-pct {
  font-size: .73rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  text-align: right;
}
/* Per-skill colors */
.db-skill-row--energy   .db-skill-label::before { background: #fbbf24; box-shadow: 0 0 6px #fbbf24; }
.db-skill-row--strenght .db-skill-label::before { background: #f87171; box-shadow: 0 0 6px #f87171; }
.db-skill-row--swimming .db-skill-label::before { background: #22d3ee; box-shadow: 0 0 6px #22d3ee; }
.db-skill-row--condition .db-skill-label::before { background: #34d399; box-shadow: 0 0 6px #34d399; }
.db-skill-row--hygiene  .db-skill-label::before { background: #c084fc; box-shadow: 0 0 6px #c084fc; }

.db-skill-row--energy   .db-skill-bar { background: linear-gradient(90deg, #f59e0b, #fbbf24); box-shadow: 0 0 10px rgba(251,191,36,.50); }
.db-skill-row--strenght .db-skill-bar { background: linear-gradient(90deg, #ef4444, #f87171); box-shadow: 0 0 10px rgba(248,113,113,.50); }
.db-skill-row--swimming .db-skill-bar { background: linear-gradient(90deg, #06b6d4, #22d3ee); box-shadow: 0 0 10px rgba(34,211,238,.50); }
.db-skill-row--condition .db-skill-bar { background: linear-gradient(90deg, #10b981, #34d399); box-shadow: 0 0 10px rgba(52,211,153,.50); }
.db-skill-row--hygiene  .db-skill-bar { background: linear-gradient(90deg, #a855f7, #c084fc); box-shadow: 0 0 10px rgba(192,132,252,.50); }

.db-skill-row--energy   .db-skill-pct { color: #fbbf24; }
.db-skill-row--strenght .db-skill-pct { color: #f87171; }
.db-skill-row--swimming .db-skill-pct { color: #22d3ee; }
.db-skill-row--condition .db-skill-pct { color: #34d399; }
.db-skill-row--hygiene  .db-skill-pct { color: #c084fc; }

/* ── Profil-header ── */
.db-profile-card {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 20px 24px;
  background: rgba(255,255,255,.025);
  border: 1px solid rgba(59,130,246,.18);
  border-radius: 14px;
  margin-bottom: 12px;
}
.db-inv-btn {
  cursor: pointer;
  color: rgba(255,255,255,.85) !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,.07) 0%, rgba(255,255,255,0) 55%),
    rgba(255,255,255,.04) !important;
  border: 1px solid rgba(59,130,246,.28) !important;
  border-radius: 8px !important;
  box-shadow: 0 2px 8px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.08) !important;
  backdrop-filter: blur(6px);
  transition: all .22s ease !important;
}
.db-inv-btn:hover {
  background:
    linear-gradient(180deg, rgba(255,255,255,.14) 0%, rgba(255,255,255,0) 55%),
    rgba(59,130,246,.20) !important;
  border-color: rgba(59,130,246,.34) !important;
  color: #fff !important;
  box-shadow: 0 3px 8px rgba(59,130,246,.14), inset 0 1px 0 rgba(255,255,255,.12) !important;
  transform: translateY(-1px) !important;
}
.db-inv-count { font-weight: 700; color: #60a5fa; }
.inv-modal-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
  gap: 8px;
  padding: 4px 0;
}
/* Cargo-kolonner: altid 3×3, fast højde der aldrig ændrer sig ved sideskift */
.veh-modal-cargo-col .inv-modal-grid {
  grid-template-columns: repeat(3, 1fr);
  height: calc(3 * 130px + 2 * 16px + 14px);
  gap: 16px;
  align-content: start;
  overflow: hidden;
}
/* Inventory modal: 6 kolonner (fuld bredde) — kort ~130px som cargo */
#invModalBody .inv-modal-grid {
  grid-template-columns: repeat(6, 1fr);
  height: calc(3 * 130px + 2 * 16px + 14px);
  gap: 16px;
  align-content: start;
  overflow: hidden;
}
.inv-modal-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  background:
    linear-gradient(180deg, rgba(255,255,255,.04) 0%, rgba(255,255,255,0) 60%),
    rgba(255,255,255,.022);
  border: 1px solid rgba(59,130,246,.18);
  border-radius: 10px;
  padding: 10px 8px 8px;
  gap: 6px;
  text-align: center;
  transition: border-color .2s, transform .2s, background .2s, box-shadow .2s;
  box-shadow: 0 2px 12px rgba(0,0,0,.30), inset 0 1px 0 rgba(255,255,255,.05);
  aspect-ratio: 1;
  overflow: hidden;
}
.inv-modal-item:hover {
  border-color: rgba(59,130,246,.40);
  background:
    linear-gradient(180deg, rgba(255,255,255,.07) 0%, rgba(255,255,255,0) 60%),
    rgba(255,255,255,.038);
  transform: translateY(-3px);
  box-shadow: 0 10px 28px rgba(0,0,0,.40), inset 0 1px 0 rgba(255,255,255,.08);
}
.inv-item-img {
  width: 52px; height: 52px;
  object-fit: contain;
  image-rendering: pixelated;
  flex-shrink: 0;
}
.inv-item-img--placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,.04);
  border-radius: 6px;
  color: rgba(255,255,255,.18);
  font-size: 1.3rem;
}
.inv-item-info { display: flex; flex-direction: column; align-items: center; gap: 2px; width: 100%; }
.inv-item-name {
  font-size: .68rem;
  color: rgba(255,255,255,.75);
  line-height: 1.3;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  max-height: 2.6em;
  word-break: break-word;
}
.inv-item-count {
  font-size: .70rem;
  font-weight: 700;
  color: #60a5fa;
}
.db-profile-avatar {
  width: 64px; height: 64px;
  border-radius: 12px;
  object-fit: cover;
  flex-shrink: 0;
  border: 2px solid rgba(59,130,246,.40);
  box-shadow: 0 0 0 3px rgba(59,130,246,.12), 0 4px 12px rgba(0,0,0,.35);
}
.db-profile-info { flex: 1; min-width: 0; }
.db-profile-name {
  font-size: 1.15rem;
  font-weight: 700;
  color: rgba(255,255,255,.92);
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}

/* ── Widget grid ── */
.db-widget-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 10px;
  margin-bottom: 12px;
}
.db-widget {
  background: rgba(255,255,255,.025);
  border: 1px solid rgba(59,130,246,.14);
  border-radius: 12px;
  padding: 14px 16px;
}
.db-widget--skills {
  grid-column: span 2;
}
.db-widget-hdr {
  font-size: .72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: #60a5fa;
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.db-widget-stats {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.db-wstat {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: .80rem;
  padding: 5px 8px;
  border-radius: 7px;
  background: rgba(255,255,255,.03);
}
.db-wstat span { color: rgba(255,255,255,.45); }
.db-wstat strong { color: rgba(255,255,255,.88); font-weight: 600; }
.db-wstat--savings span { color: rgba(255,255,255,.35); font-size: .74rem; }
.db-wstat--secondary { opacity: .85; }
.db-wstat--secondary span { font-size: .82rem; }
.db-widget--arbejde-wide { grid-column: span 2; }
.db-arbejde-body {
  display: flex;
  gap: 0;
}
.db-arbejde-col {
  flex: 1;
  padding: 0 16px 0 0;
}
.db-arbejde-col--extra {
  border-left: 1px solid rgba(255,255,255,.08);
  padding: 0 0 0 16px;
}
.db-arbejde-col-hdr {
  font-size: .68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: #60a5fa;
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.db-widget-licences {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* ── Garage (fuld bredde, tabel-stil) ── */
.db-garage-full {
  background: rgba(255,255,255,.025);
  border: 1px solid rgba(59,130,246,.14);
  border-radius: 12px;
  overflow: hidden;
}
.db-garage-full-hdr {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 18px;
  border-bottom: 1px solid rgba(59,130,246,.10);
  font-size: .78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: #60a5fa;
}
.db-garage-count {
  font-size: .70rem;
  font-weight: 600;
  color: rgba(255,255,255,.35);
  text-transform: none;
  letter-spacing: 0;
}
.db-garage-search-wrap {
  padding: 10px 14px 0;
}
.db-garage-search-inner {
  position: relative;
}
.db-garage-search-icon {
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  color: rgba(255,255,255,.25);
  font-size: .80rem;
  pointer-events: none;
  line-height: 1;
}
.db-garage-search {
  width: 100%;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(59,130,246,.18);
  border-radius: 8px;
  padding: 7px 12px 7px 30px;
  font-size: .80rem;
  color: rgba(255,255,255,.85);
  outline: none;
  transition: border-color .15s;
}
.db-garage-search::placeholder { color: rgba(255,255,255,.25); }
.db-garage-search:focus { border-color: rgba(59,130,246,.45); }
.db-garage-search-count {
  display: block;
  font-size: .70rem;
  color: rgba(255,255,255,.35);
  padding: 4px 2px 0;
  min-height: 18px;
}

.db-garage-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 8px;
  padding: 14px;
}
.db-garage-card {
  background:
    linear-gradient(180deg, rgba(255,255,255,.04) 0%, rgba(255,255,255,0) 60%),
    rgba(255,255,255,.022);
  border: 1px solid rgba(59,130,246,.18);
  border-radius: 10px;
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  text-align: left;
  cursor: pointer;
  transition: border-color .2s, transform .2s, background .2s, box-shadow .2s;
  box-shadow: 0 2px 12px rgba(0,0,0,.30), inset 0 1px 0 rgba(255,255,255,.05);
  min-height: 90px;
  justify-content: space-between;
}
.db-garage-card:hover {
  border-color: rgba(59,130,246,.40);
  background:
    linear-gradient(180deg, rgba(255,255,255,.07) 0%, rgba(255,255,255,0) 60%),
    rgba(255,255,255,.038);
  transform: translateY(-3px);
  box-shadow: 0 10px 28px rgba(0,0,0,.40), inset 0 1px 0 rgba(255,255,255,.08);
}
.db-garage-card-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 6px;
  min-width: 0;
}
.db-garage-card-top .db-garage-state {
  max-width: 110px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.db-garage-card-icon {
  color: rgba(255,255,255,.25);
  font-size: .85rem;
  flex-shrink: 0;
}
.db-garage-card-name {
  font-size: .82rem;
  font-weight: 600;
  color: rgba(255,255,255,.90);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.db-garage-card-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  min-width: 0;
}
.db-garage-card-custom {
  font-size: .66rem;
  font-weight: 600;
  color: #93c5fd;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
  flex-shrink: 1;
}
.db-garage-card-location {
  font-size: .65rem;
  color: rgba(255,255,255,.28);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.db-garage-card-plate {
  font-size: .67rem;
  color: rgba(255,255,255,.28);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  flex-shrink: 0;
  margin-left: auto;
}
.db-garage-state {
  font-size: .60rem;
  font-weight: 700;
  padding: 3px 7px;
  border-radius: 5px;
  white-space: nowrap;
  text-transform: uppercase;
  letter-spacing: .05em;
  flex-shrink: 0;
  max-width: 130px;
  overflow: hidden;
  text-overflow: ellipsis;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.db-garage-state--out    { background: rgba(34,197,94,.22);  color: #bbf7d0; border: 1px solid rgba(34,197,94,.45); }
.db-garage-state--depot  { background: rgba(0,0,0,.45);      color: rgba(255,255,255,.65); border: 1px solid rgba(255,255,255,.18); }
.db-garage-state--seized { background: rgba(239,68,68,.25);  color: #fca5a5; border: 1px solid rgba(239,68,68,.45); }

/* Garage pager */
.db-garage-pager {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 10px;
  border-top: 1px solid rgba(255,255,255,.04);
}
.db-garage-pager-btn {
  width: 28px; height: 28px;
  border-radius: 7px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(59,130,246,.20);
  color: #93c5fd;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: border-color .2s, transform .2s, background .2s, box-shadow .2s;
}
.db-garage-pager-btn:not(:disabled):hover {
  border-color: rgba(59,130,246,.45);
  background:
    linear-gradient(180deg, rgba(255,255,255,.07) 0%, rgba(255,255,255,0) 60%),
    rgba(255,255,255,.038);
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.08);
}
.db-garage-pager-btn:disabled { opacity: .3; cursor: default; }
.db-garage-pager-info {
  font-size: .72rem;
  color: rgba(255,255,255,.40);
  font-variant-numeric: tabular-nums;
}

/* Modal cargo/inventory pager knapper */
.cargo-page-btn {
  width: 26px; height: 26px;
  border-radius: 7px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(59,130,246,.20);
  color: #93c5fd;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  font-size: .75rem;
  transition: border-color .2s, transform .2s, background .2s, box-shadow .2s;
}
.cargo-page-btn:not(:disabled):hover {
  border-color: rgba(59,130,246,.45);
  background:
    linear-gradient(180deg, rgba(255,255,255,.07) 0%, rgba(255,255,255,0) 60%),
    rgba(255,255,255,.038);
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.08);
}
.cargo-page-btn:disabled { opacity: .3; cursor: default; }

@media (max-width: 640px) {
  .db-widget--skills { grid-column: span 1; }
  .db-widget--arbejde-wide { grid-column: span 1; }
  .db-arbejde-body { flex-direction: column; }
  .db-arbejde-col { padding: 0; }
  .db-arbejde-col--extra { border-left: none; padding-left: 0; border-top: 1px solid rgba(255,255,255,.08); padding-top: 12px; margin-top: 12px; }
  .db-garage-row { grid-template-columns: 20px 1fr 90px; }
  .db-garage-row-plate { display: none; }
}

/* ── Køretøj modal ── */
.veh-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(0,0,0,.60);
  backdrop-filter: blur(6px);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  overflow-y: auto;
  padding: 24px 20px;
  padding: 20px;
  opacity: 0;
  transition: opacity .2s;
}
.veh-modal-overlay.veh-modal--open { opacity: 1; }
.veh-modal-box {
  background: #0d1220;
  border: 1px solid rgba(59,130,246,.30);
  border-radius: 16px;
  width: 100%;
  max-width: 920px;
  box-shadow: 0 24px 60px rgba(0,0,0,.60), 0 0 0 1px rgba(59,130,246,.10);
  overflow: hidden;
  transform: translateY(12px);
  transition: transform .2s;
  margin: auto;
}
.veh-modal--open .veh-modal-box { transform: translateY(0); }
.veh-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid rgba(59,130,246,.12);
  background: rgba(59,130,246,.06);
}
.veh-modal-title {
  font-size: .95rem;
  font-weight: 700;
  color: rgba(255,255,255,.92);
  display: flex;
  align-items: center;
  gap: 8px;
}
.veh-modal-title i { color: #60a5fa; font-size: 1rem; }
.veh-modal-close {
  width: 28px; height: 28px;
  border-radius: 7px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.04) 0%, rgba(255,255,255,0) 60%),
    rgba(255,255,255,.022);
  border: 1px solid rgba(255,255,255,.12);
  color: rgba(255,255,255,.55);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: border-color .2s, transform .2s, background .2s, box-shadow .2s, color .2s;
  box-shadow: 0 2px 12px rgba(0,0,0,.30), inset 0 1px 0 rgba(255,255,255,.05);
  font-size: .85rem;
}
.veh-modal-close:hover {
  background:
    linear-gradient(180deg, rgba(255,255,255,.07) 0%, rgba(255,255,255,0) 60%),
    rgba(239,68,68,.08);
  border-color: rgba(239,68,68,.35);
  color: #fca5a5;
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(239,68,68,.15), inset 0 1px 0 rgba(255,255,255,.08);
}
.veh-modal-content { padding: 24px 28px; display: flex; flex-direction: column; gap: 18px; }
.veh-modal-img-wrap {
  margin: -24px -28px 0;
  background: rgba(0,0,0,.3);
  border-bottom: 1px solid rgba(59,130,246,.12);
  display: flex;
  align-items: center;
  justify-content: center;
  height: 200px;
  overflow: hidden;
}
.veh-modal-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 16px 24px;
}
.veh-modal-top {
  display: flex;
  gap: 12px;
  align-items: stretch;
}
.veh-modal-info-box, .veh-modal-cond-box {
  background: rgba(255,255,255,.025);
  border: 1px solid rgba(59,130,246,.18);
  border-radius: 10px;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.veh-modal-info-box { flex: 0 0 38%; }
.veh-modal-cond-box { flex: 1; }
.veh-modal-grid { display: flex; flex-direction: column; gap: 4px; }
.veh-modal-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 10px;
  border-radius: 7px;
  background: rgba(255,255,255,.03);
  font-size: .82rem;
}
.veh-modal-row span { color: rgba(255,255,255,.42); }
.veh-modal-row strong { color: rgba(255,255,255,.88); font-weight: 600; }
.veh-modal-bars { display: flex; flex-direction: column; gap: 10px; }
.veh-modal-bar-row {
  display: grid;
  grid-template-columns: 82px 1fr 40px;
  align-items: center;
  gap: 10px;
  font-size: .73rem;
}
.veh-modal-bar-row > span {
  color: rgba(255,255,255,.55);
  display: flex;
  align-items: center;
  gap: 7px;
}
.veh-modal-bar-row > span::before {
  content: '';
  width: 7px; height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
}
.veh-modal-bar-row:has(.veh-bar--fuel)   > span::before { background: #fbbf24; box-shadow: 0 0 6px #fbbf24; }
.veh-modal-bar-row:has(.veh-bar--engine) > span::before { background: #60a5fa; box-shadow: 0 0 6px #60a5fa; }
.veh-modal-bar-row:has(.veh-bar--body)   > span::before { background: #a78bfa; box-shadow: 0 0 6px #a78bfa; }
.veh-modal-bar-row:has(.veh-bar--clutch)   > span::before { background: #34d399; box-shadow: 0 0 6px #34d399; }
.veh-modal-bar-row:has(.veh-bar--axle)     > span::before { background: #fb923c; box-shadow: 0 0 6px #fb923c; }
.veh-modal-bar-row:has(.veh-bar--radiator) > span::before { background: #22d3ee; box-shadow: 0 0 6px #22d3ee; }
.veh-modal-bar-row:has(.veh-bar--brakes)   > span::before { background: #f87171; box-shadow: 0 0 6px #f87171; }
.veh-bar-wrap {
  height: 8px;
  background: rgba(255,255,255,.07);
  border-radius: 99px;
  overflow: visible;
}
.veh-bar {
  height: 100%;
  border-radius: 99px;
  transition: width .5s cubic-bezier(.4,0,.2,1);
}
.veh-bar--fuel   { background: linear-gradient(90deg, #f59e0b, #fbbf24); box-shadow: 0 0 10px rgba(251,191,36,.50); }
.veh-bar--engine { background: linear-gradient(90deg, #3b82f6, #60a5fa); box-shadow: 0 0 10px rgba(96,165,250,.50); }
.veh-bar--body   { background: linear-gradient(90deg, #8b5cf6, #a78bfa); box-shadow: 0 0 10px rgba(167,139,250,.50); }
.veh-bar--clutch   { background: linear-gradient(90deg, #10b981, #34d399); box-shadow: 0 0 10px rgba(52,211,153,.50); }
.veh-bar--axle     { background: linear-gradient(90deg, #ea580c, #fb923c); box-shadow: 0 0 10px rgba(251,146,60,.50); }
.veh-bar--radiator { background: linear-gradient(90deg, #06b6d4, #22d3ee); box-shadow: 0 0 10px rgba(34,211,238,.50); }
.veh-bar--brakes   { background: linear-gradient(90deg, #ef4444, #f87171); box-shadow: 0 0 10px rgba(248,113,113,.50); }
.veh-modal-bar-row:has(.veh-bar--fuel)     .veh-bar-pct { color: #fbbf24; }
.veh-modal-bar-row:has(.veh-bar--engine)   .veh-bar-pct { color: #60a5fa; }
.veh-modal-bar-row:has(.veh-bar--body)     .veh-bar-pct { color: #a78bfa; }
.veh-modal-bar-row:has(.veh-bar--clutch)   .veh-bar-pct { color: #34d399; }
.veh-modal-bar-row:has(.veh-bar--axle)     .veh-bar-pct { color: #fb923c; }
.veh-modal-bar-row:has(.veh-bar--radiator) .veh-bar-pct { color: #22d3ee; }
.veh-modal-bar-row:has(.veh-bar--brakes)   .veh-bar-pct { color: #f87171; }
.veh-modal-section-lbl {
  font-size: .68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: rgba(255,255,255,.30);
  margin-bottom: -6px;
}
.veh-modal-cargo {
  display: flex;
  gap: 12px;
  align-items: stretch;
}
.veh-modal-cargo-col {
  flex: 1;
  min-width: 0;
  max-width: calc(50% - 8px);
  display: flex;
  flex-direction: column;
  gap: 8px;
  background: rgba(255,255,255,.025);
  border: 1px solid rgba(59,130,246,.18);
  border-radius: 10px;
  padding: 14px 16px;
}
.veh-modal-cargo-col .veh-modal-section-lbl { margin-bottom: 0; }
.cargo-pager {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding-top: 4px;
}
.cargo-page-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px; height: 26px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(59,130,246,.22);
  border-radius: 7px;
  color: rgba(255,255,255,.6);
  font-size: .75rem;
  cursor: pointer;
  transition: background .15s, border-color .15s;
}
.cargo-page-btn:hover:not(:disabled) {
  background: rgba(59,130,246,.18);
  border-color: rgba(59,130,246,.45);
  color: #fff;
}
.cargo-page-btn:disabled { opacity: .3; cursor: default; }
.cargo-page-info {
  font-size: .72rem;
  color: rgba(255,255,255,.40);
  min-width: 36px;
  text-align: center;
}
.veh-modal-items {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}
.veh-modal-item {
  display: flex;
  align-items: center;
  gap: 5px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 6px;
  padding: 4px 9px;
  font-size: .74rem;
}
.veh-item-name {
  color: rgba(255,255,255,.72);
  text-transform: capitalize;
}
.veh-item-count {
  color: #60a5fa;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.veh-bar-pct { font-size: .73rem; font-weight: 600; font-variant-numeric: tabular-nums; text-align: right; }
.veh-modal-finance {
  background: rgba(251,191,36,.05);
  border: 1px solid rgba(251,191,36,.15);
  border-radius: 10px;
  padding: 12px 14px;
}
.veh-modal-finance-hdr {
  font-size: .72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: #fbbf24;
  margin-bottom: 10px;
}
.db-garage-card { cursor: pointer; }

/* Dashboard — sidebar layout */
.db-layout {
  display: flex;
  gap: 16px;
  align-items: flex-start;
}
.db-sidebar {
  width: 190px;
  flex-shrink: 0;
  position: sticky;
  top: 80px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.db-sidebar-label {
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(255,255,255,.30);
  padding: 0 4px 4px;
}
.db-content {
  flex: 1;
  min-width: 0;
}
.db-content--solo {
  width: 100%;
}

/* Character selector tabs (sidebar cards) */
.db-char-tab {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 10px;
  width: 100%;
  background:
    linear-gradient(180deg, rgba(255,255,255,.04) 0%, rgba(255,255,255,0) 60%),
    rgba(255,255,255,.022);
  border: 1px solid rgba(59,130,246,.18);
  border-radius: 12px;
  cursor: pointer;
  transition: border-color .2s, transform .2s, background .2s, box-shadow .2s;
  box-shadow: 0 2px 12px rgba(0,0,0,.30), inset 0 1px 0 rgba(255,255,255,.05);
  text-align: left;
  overflow: hidden;
}
/* left accent bar */
.db-char-tab::before {
  content: "";
  position: absolute;
  left: 0; top: 10%; bottom: 10%;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: transparent;
  transition: background .2s;
}
.db-char-tab:hover {
  border-color: rgba(59,130,246,.40);
  background:
    linear-gradient(180deg, rgba(255,255,255,.07) 0%, rgba(255,255,255,0) 60%),
    rgba(255,255,255,.038);
  transform: translateY(-2px);
  box-shadow: 0 10px 28px rgba(0,0,0,.40), inset 0 1px 0 rgba(255,255,255,.08);
}
.db-char-tab--active {
  background: rgba(59,130,246,.12) !important;
  border-color: rgba(59,130,246,.42) !important;
  box-shadow: 0 2px 12px rgba(59,130,246,.14) !important;
}
.db-char-tab--active::before {
  background: linear-gradient(180deg, #3b82f6, #8b5cf6);
}
.db-char-tab-avatar {
  width: 38px;
  height: 38px;
  border-radius: 9px;
  object-fit: cover;
  flex-shrink: 0;
  border: 1px solid rgba(59,130,246,.22);
  box-shadow: 0 2px 6px rgba(0,0,0,.30);
}
.db-char-tab--active .db-char-tab-avatar {
  border-color: rgba(59,130,246,.55);
  box-shadow: 0 0 0 2px rgba(59,130,246,.20), 0 2px 6px rgba(0,0,0,.30);
}
.db-char-tab-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.db-char-tab-name {
  font-size: .80rem;
  font-weight: 600;
  color: rgba(255,255,255,.88);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.db-char-tab--active .db-char-tab-name { color: #93c5fd; }
.db-char-tab-cid {
  font-size: .65rem;
  color: rgba(255,255,255,.28);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.db-char-tab-pin {
  position: absolute;
  bottom: 5px; right: 6px;
  width: 18px; height: 18px;
  border-radius: 4px;
  background: transparent;
  border: none;
  color: rgba(255,255,255,.15);
  font-size: .60rem;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: color .15s, background .15s;
  padding: 0;
}
.db-char-tab:hover .db-char-tab-pin {
  color: rgba(255,255,255,.30);
}
.db-char-tab-pin:hover {
  color: #fbbf24 !important;
  background: rgba(251,191,36,.12);
}
.db-char-tab-pin--active {
  color: #fbbf24 !important;
}

/* Responsive: sidebar stacks above on small screens */
@media (max-width: 640px) {
  .db-layout { flex-direction: column; }
  .db-sidebar { width: 100%; position: static; flex-direction: row; flex-wrap: wrap; }
  .db-char-tab { width: auto; flex: 1 1 140px; }
  .db-char-tab::before { top: 0; left: 8%; right: 8%; bottom: auto; width: auto; height: 3px; border-radius: 0 0 3px 3px; }
}

/* =====================================================
   TEAM PAGE
   ===================================================== */
/* ── Team Page ── */
.team-wrap {
  max-width: 960px;
  margin: 0 auto;
  padding: 0 16px;
}
.team-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  row-gap: 52px;
  column-gap: 16px;
}
.team-member {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  text-align: center;
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(59,130,246,.12);
  border-radius: 16px;
  padding: 24px 16px 20px;
  transition: border-color .22s, transform .22s, box-shadow .22s, background .22s;
}
.team-member:hover {
  border-color: rgba(59,130,246,.35);
  background: rgba(255,255,255,.05);
  transform: translateY(-4px);
  box-shadow: 0 12px 32px rgba(0,0,0,.45);
}
.team-avatar-circle {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  background: rgba(255,255,255,.055);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: transform .25s, box-shadow .25s;
}
.team-member:hover .team-avatar-circle {
  box-shadow: 0 6px 18px rgba(0,0,0,.35);
}
.team-avatar {
  width: 84px;
  height: 84px;
  border-radius: 50%;
  object-fit: cover;
  display: block;
}
.team-name {
  font-family: 'Outfit', sans-serif;
  font-size: .95rem;
  font-weight: 600;
  color: rgba(255,255,255,.90);
  line-height: 1.3;
  margin: 0;
}
.team-role {
  font-size: .78rem;
  color: rgba(255,255,255,.38);
  line-height: 1.4;
  margin: -6px 0 0;
}
.team-extra {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  margin-top: 6px;
  padding-top: 8px;
  border-top: 1px solid rgba(255,255,255,.07);
  width: 100%;
}
.team-extra-title {
  font-size: .75rem;
  color: #60a5fa;
  font-weight: 500;
  line-height: 1.3;
  text-align: center;
}
.team-extra-meta {
  font-size: .68rem;
  color: rgba(255,255,255,.30);
  display: flex;
  align-items: center;
  gap: 4px;
  line-height: 1.3;
}
.team-extra-meta i { font-size: .58rem; opacity: .7; }
.team-extra-resp {
  font-size: .70rem;
  color: rgba(255,255,255,.35);
  text-align: center;
  line-height: 1.45;
  margin: 2px 0 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Animations */
@keyframes tm-fade-in {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}
.tm-reveal { opacity: 0; }
.tm-reveal--in {
  animation: tm-fade-in .4s ease both;
  animation-delay: calc(var(--tm-i, 0) * 60ms);
}

@media (max-width: 768px) {
  .team-grid { grid-template-columns: repeat(3, 1fr); row-gap: 36px; }
  .team-avatar-circle { width: 100px; height: 100px; }
  .team-avatar { width: 88px; height: 88px; }
}
@media (max-width: 480px) {
  .team-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ── Gang members modal ─────────────────────────────────────────────────── */
.veh-modal-box--wide { max-width: 860px; }
/* Gang members list */
/* Row height = max(avatar 40px, info ~40px, stat ~44px) + padding 9+9 + border 2 = ~64px. List = 8*64 + 7*4 = 540px */
.gm-list { display: flex; flex-direction: column; gap: 4px; padding: 4px 0; height: calc(8 * 64px + 7 * 4px); overflow: hidden; flex-shrink: 0; }
#gangModalBody { display: flex; flex-direction: column; gap: 14px; }
.gm-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 9px 16px;
  border-radius: 10px;
  background: rgba(255,255,255,.025);
  border: 1px solid rgba(255,255,255,.06);
  transition: background .15s, border-color .15s;
}
.gm-row:hover { background: rgba(255,255,255,.045); border-color: rgba(59,130,246,.20); }
.gm-avatar {
  position: relative;
  width: 40px; height: 40px; min-width: 40px;
  border-radius: 10px;
  background: rgba(59,130,246,.15);
  border: 1px solid rgba(59,130,246,.25);
  display: flex; align-items: center; justify-content: center;
  font-size: .78rem; font-weight: 700; color: #60a5fa;
  letter-spacing: .02em;
}
.gm-avatar-img {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  border-radius: 9px;
}
.gm-dot {
  position: absolute;
  bottom: -2px; right: -2px;
  width: 10px; height: 10px;
  border-radius: 50%;
  border: 2px solid #0d1220;
}
.gm-dot--high { background: #23d18b; }
.gm-dot--mid  { background: #f0b232; }
.gm-dot--low  { background: rgba(255,255,255,.25); }
.gm-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.gm-name { font-size: .88rem; font-weight: 600; color: rgba(255,255,255,.90); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gm-rank { font-size: .74rem; color: rgba(255,255,255,.42); }
.gm-stats { display: flex; gap: 6px; margin-left: auto; }
.gm-stat {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 8px;
  padding: 5px 10px;
  min-width: 56px;
}
.gm-stat-lbl { font-size: .63rem; color: rgba(255,255,255,.35); text-transform: uppercase; letter-spacing: .04em; line-height: 1.2; }
.gm-stat-val { font-size: .78rem; font-weight: 600; font-variant-numeric: tabular-nums; line-height: 1.2; }
.gm-val--green { color: #4ade80; }
.gm-val--blue  { color: #60a5fa; }
.gm-val--zero  { color: rgba(255,255,255,.22); }
.gm-val--muted { color: rgba(255,255,255,.45); font-weight: 400; font-size: .75rem; }

/* ── Error page ──────────────────────────────────────────────────────────── */
.err-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 65vh;
  padding: 40px 16px;
}
.err-card {
  max-width: 420px;
  width: 100%;
  padding: 40px 32px 36px;
  gap: 6px;
}
.err-card-icon {
  width: 52px !important;
  height: 52px !important;
  font-size: 1.3rem !important;
  margin-bottom: 8px;
}
.err-code {
  display: flex;
  align-items: baseline;
  gap: 10px;
  font-size: 1.9rem;
  font-weight: 800;
  line-height: 1;
  background: linear-gradient(135deg, rgba(255,255,255,.55) 0%, rgba(255,255,255,.20) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  letter-spacing: -.03em;
  margin-bottom: 4px;
}
.err-code-label {
  font-size: 1.25rem;
  font-weight: 600;
  letter-spacing: 0;
}
.err-card-desc {
  font-size: .875rem !important;
  line-height: 1.6 !important;
}

.db-gang-members-btn { font-size: .72rem !important; padding: 3px 10px !important; }

/* ─── Regler: animationer ─── */
@keyframes rule-section-new-pulse {
  0%, 100% { box-shadow: -5px 0 28px rgba(34,197,94,.18), 0 4px 24px rgba(0,0,0,.30); }
  50%       { box-shadow: -5px 0 40px rgba(34,197,94,.55), 0 4px 32px rgba(0,0,0,.35), 0 0 60px rgba(34,197,94,.07); }
}
@keyframes rule-card-new-pulse {
  0%, 100% { box-shadow: 0 0 0 1px rgba(34,197,94,.25), 0 0 14px rgba(34,197,94,.10); }
  50%       { box-shadow: 0 0 0 1px rgba(34,197,94,.55), 0 0 28px rgba(34,197,94,.22); }
}
@keyframes rule-card-updated-pulse {
  0%, 100% { box-shadow: 0 0 0 1px rgba(245,158,11,.22), 0 0 12px rgba(245,158,11,.08); }
  50%       { box-shadow: 0 0 0 1px rgba(245,158,11,.50), 0 0 26px rgba(245,158,11,.20); }
}
@keyframes badge-shine {
  0%        { left: -70%; }
  45%, 100% { left: 115%; }
}

/* ─── Regler: sektion-niveau badges (NY / OPDATERET) — kun i nav + header ─── */
.rules-section-badge {
  display: inline-flex;
  align-items: center;
  font-size: .62rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  padding: 1px 8px;
  border-radius: 20px;
  vertical-align: middle;
  margin-left: 8px;
  line-height: 1.4;
  opacity: .80;
}
.rules-section-badge--new     { background: rgba(34,197,94,.14); border: 1px solid rgba(34,197,94,.35); color: #86efac; }
.rules-section-badge--updated { background: rgba(245,158,11,.12); border: 1px solid rgba(245,158,11,.32); color: #fcd34d; }

/* ─── Regler: item-niveau badges (NY / OPDATERET) — på det specifikke § kort ─── */
.rule-item-badge {
  display: inline-flex;
  align-items: center;
  font-size: .62rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  padding: 2px 9px;
  border-radius: 20px;
  margin-bottom: 8px;
  line-height: 1.4;
  position: relative;
  overflow: hidden;
}
.rule-item-badge::after {
  content: '';
  position: absolute;
  top: 0; left: -70%;
  width: 55%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.28), transparent);
  animation: badge-shine 2.6s ease-in-out infinite;
}
.rule-item-badge--new {
  background: rgba(34,197,94,.18);
  border: 1px solid rgba(34,197,94,.50);
  color: #86efac;
  text-shadow: 0 0 8px rgba(74,222,128,.50);
}
.rule-item-badge--updated {
  background: rgba(245,158,11,.15);
  border: 1px solid rgba(245,158,11,.45);
  color: #fcd34d;
  text-shadow: 0 0 8px rgba(250,204,21,.45);
}
.rule-item-badge--deleted {
  background: rgba(239,68,68,.15);
  border: 1px solid rgba(239,68,68,.45);
  color: #fca5a5;
  text-shadow: 0 0 8px rgba(239,68,68,.40);
}

/* ─── Regler: forrige version toggle ─── */
.rule-prev-wrap {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid rgba(255,255,255,.06);
}
.rule-prev-toggle {
  background: none;
  border: 1px solid rgba(245,158,11,.30);
  color: rgba(245,158,11,.80);
  font-size: .72rem;
  padding: 3px 10px;
  border-radius: 6px;
  cursor: pointer;
  transition: background .15s, color .15s;
}
.rule-prev-toggle:hover {
  background: rgba(245,158,11,.10);
  color: #fcd34d;
}
.rule-prev-content {
  margin-top: 10px;
  padding: 10px 12px;
  background: rgba(245,158,11,.05);
  border: 1px solid rgba(245,158,11,.18);
  border-radius: 8px;
  opacity: .80;
}
.rule-prev-wrap--editor {
  border-top-color: rgba(139,92,246,.15);
}
.rule-prev-wrap--editor .rule-prev-toggle {
  border-color: rgba(139,92,246,.30);
  color: rgba(167,139,250,.80);
}
.rule-prev-wrap--editor .rule-prev-toggle:hover {
  background: rgba(139,92,246,.10);
  color: #a78bfa;
}
.rule-prev-wrap--editor .rule-prev-content {
  background: rgba(139,92,246,.05);
  border-color: rgba(139,92,246,.18);
}
.rule-prev-wrap--editor .rule-prev-label {
  color: rgba(167,139,250,.65);
}
.rule-prev-label {
  font-size: .68rem;
  color: rgba(245,158,11,.65);
  font-weight: 600;
  letter-spacing: .04em;
  margin-bottom: 6px;
  text-transform: uppercase;
}

/* ─── Regler: § kort glow (NY / OPDATERET) ─── */
.rule-card--is-new {
  border: 1px solid rgba(34,197,94,.40) !important;
  animation: rule-card-new-pulse 2.4s ease-in-out infinite;
}
.rule-card--is-updated {
  border: 1px solid rgba(245,158,11,.35) !important;
  animation: rule-card-updated-pulse 2.4s ease-in-out infinite;
}
@keyframes rule-card-deleted-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(239,68,68,.0); }
  50% { box-shadow: 0 0 14px 2px rgba(239,68,68,.18); }
}
.rule-card--is-deleted {
  border: 1px solid rgba(239,68,68,.35) !important;
  opacity: .65;
  animation: rule-card-deleted-pulse 2.4s ease-in-out infinite;
}
/* ─── Regler: Indsæt-efter knap ─── */
.rule-insert-after-wrap {
  display: flex;
  justify-content: center;
  height: 0;
  overflow: hidden;
  opacity: 0;
  transition: height .15s, opacity .15s;
}
.rule-card--editable:hover ~ .rule-insert-after-wrap,
.rule-insert-after-wrap:hover {
  height: 26px;
  opacity: 1;
}
.rule-insert-after-btn {
  background: rgba(59,130,246,.08);
  border: 1px dashed rgba(59,130,246,.30);
  border-radius: 6px;
  color: rgba(59,130,246,.60);
  font-size: .72rem;
  padding: 2px 18px;
  cursor: pointer;
  transition: background .15s, border-color .15s, color .15s;
  line-height: 1.6;
  white-space: nowrap;
}
.rule-insert-after-btn:hover {
  background: rgba(59,130,246,.18);
  border-color: rgba(59,130,246,.55);
  color: #93c5fd;
}

.rule-card--is-deleted:hover {
  border-color: rgba(239,68,68,.55) !important;
  box-shadow:
    0 6px 20px rgba(0,0,0,.30),
    0 0 14px 2px rgba(239,68,68,.22),
    inset 0 1px 0 rgba(255,255,255,.09) !important;
}
.rule-card--is-deleted h5 {
  text-decoration: line-through;
  color: rgba(255,255,255,.40) !important;
}
.rule-card--is-deleted ul,
.rule-card--is-deleted p,
.rule-card--is-deleted li {
  color: rgba(255,255,255,.35) !important;
}
.rule-card--is-deleted ul li::before {
  color: rgba(239,68,68,.45) !important;
}

/* ─── Regler: saved flash (one-shot, afspilles én gang efter gem) ─── */
@keyframes rule-card-saved-flash {
  0%   { box-shadow: 0 0 0 2px rgba(34,197,94,.90), 0 0 32px rgba(34,197,94,.55); border-color: rgba(34,197,94,.90) !important; background: rgba(34,197,94,.10); }
  40%  { box-shadow: 0 0 0 3px rgba(34,197,94,.70), 0 0 48px rgba(34,197,94,.40); }
  100% { box-shadow: 0 0 0 1px rgba(245,158,11,.25), 0 0 14px rgba(245,158,11,.10); border-color: rgba(245,158,11,.35) !important; background: transparent; }
}
.rule-card--saved {
  animation: rule-card-saved-flash .90s cubic-bezier(.4,0,.2,1) forwards !important;
}

/* ─── Regler: nav-knap dot-indikator ved ny/opdateret sektion ─── */
@keyframes nav-dot-new-pulse {
  0%, 100% { opacity: .70; box-shadow: 0 0 4px rgba(34,197,94,.45); }
  50%       { opacity: 1;   box-shadow: 0 0 9px rgba(34,197,94,.90); }
}
@keyframes nav-dot-updated-pulse {
  0%, 100% { opacity: .70; box-shadow: 0 0 4px rgba(245,158,11,.45); }
  50%       { opacity: 1;   box-shadow: 0 0 9px rgba(245,158,11,.90); }
}
.rules-nav-link--new {
  box-shadow: inset 2px 0 0 rgba(34,197,94,.75) !important;
}
.rules-nav-link--new:hover {
  box-shadow: inset 2px 0 0 rgba(34,197,94,.95), 0 0 12px rgba(34,197,94,.18) !important;
  border-color: rgba(34,197,94,.35) !important;
}
.rules-nav-link--updated {
  box-shadow: inset 2px 0 0 rgba(245,158,11,.70) !important;
}
.rules-nav-link--updated:hover {
  box-shadow: inset 2px 0 0 rgba(245,158,11,.95), 0 0 12px rgba(245,158,11,.18) !important;
  border-color: rgba(245,158,11,.35) !important;
}

/* ─── Regler: sektion-glow KUN for NY sektion ─── */
section.mb-5.p-4.rounded.rule-section--is-new {
  border-left: 3px solid rgba(34,197,94,.90) !important;
  animation: rule-section-new-pulse 2.4s ease-in-out infinite;
}

/* ─── Regler: sidebar nav dots ─── */
@keyframes dot-ping {
  0%        { transform: scale(1); opacity: .75; }
  70%, 100% { transform: scale(2.6); opacity: 0; }
}
.rules-nav-dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  margin-left: auto;
  flex-shrink: 0;
  position: relative;
}
.rules-nav-dot::after {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: 50%;
  animation: dot-ping 1.8s ease-out infinite;
}
.rules-nav-dot--new     { background: #4ade80; box-shadow: 0 0 6px rgba(74,222,128,.80); }
.rules-nav-dot--new::after { background: rgba(74,222,128,.55); }
.rules-nav-dot--updated { background: #fbbf24; box-shadow: 0 0 6px rgba(251,191,36,.80); }
.rules-nav-dot--updated::after { background: rgba(251,191,36,.55); }

/* ─── Regler: item-niveau edit-knap (lille pencil i hjørnet af hvert §-kort) ─── */
.rule-card--editable { position: relative; }
.rule-card--editing {
  border: 1px solid rgba(139,92,246,.55) !important;
  box-shadow: 0 0 0 2px rgba(139,92,246,.18), 0 0 20px rgba(139,92,246,.12) !important;
}
.rule-edit-panel-title {
  font-size: .78rem;
  font-weight: 600;
  color: rgba(167,139,250,.85);
  letter-spacing: .02em;
  border-bottom: 1px solid rgba(139,92,246,.18);
  padding-bottom: 10px;
}
.rule-item-edit-btn {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 24px;
  height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(139,92,246,.10);
  border: 1px solid rgba(139,92,246,.22);
  border-radius: 5px;
  color: rgba(167,139,250,.50);
  cursor: pointer;
  font-size: .72rem;
  opacity: 0;
  transition: opacity .15s, background .15s, color .15s, transform .12s;
}
.rule-card--editable:hover .rule-item-edit-btn { opacity: 1; }
.rule-item-edit-btn:hover {
  background: rgba(139,92,246,.28);
  border-color: rgba(139,92,246,.55);
  color: #c4b5fd;
  transform: scale(1.1);
}
/* ─── Regler: tilføj paragraf knap + form ─── */
.rule-section-add-wrap { display: flex; justify-content: flex-end; }
.rule-section-add-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: rgba(139,92,246,.08);
  border: 1px dashed rgba(139,92,246,.30);
  border-radius: 7px;
  color: rgba(167,139,250,.60);
  font-size: .75rem;
  font-weight: 600;
  padding: 5px 14px;
  cursor: pointer;
  transition: background .15s, border-color .15s, color .15s;
}
.rule-section-add-btn:hover {
  background: rgba(139,92,246,.18);
  border-color: rgba(139,92,246,.55);
  color: #c4b5fd;
}
.rule-add-form {
  border: 1px dashed rgba(139,92,246,.35) !important;
  background: rgba(139,92,246,.05) !important;
}

/* ─── Regler: ny sektion farve-picker ─── */
.rule-new-section-wrap { display: flex; flex-direction: column; align-items: flex-end; }
.rule-color-picker { display: flex; gap: 6px; flex-wrap: wrap; }
.rule-color-btn {
  width: 28px;
  height: 28px;
  border-radius: 6px;
  border: 2px solid transparent;
  background: var(--swatch);
  opacity: .45;
  cursor: pointer;
  transition: opacity .15s, border-color .15s, transform .12s;
}
.rule-color-btn:hover { opacity: .8; transform: scale(1.1); }
.rule-color-btn--active {
  opacity: 1 !important;
  border-color: rgba(255,255,255,.70) !important;
  transform: scale(1.12);
  box-shadow: 0 0 8px var(--swatch);
}

/* ─── Regler: sektion metadata panel ─── */
.rule-section-meta-panel {
  margin-bottom: 16px;
  border: 1px solid rgba(139,92,246,.22);
  border-radius: 10px;
  background: rgba(139,92,246,.06);
  overflow: hidden;
}
.rule-section-meta-inner { padding: 16px; }

/* ─── Regler: slet-knap ─── */
.rule-delete-btn {
  display: inline-flex;
  align-items: center;
  margin-left: auto;
  background: rgba(239,68,68,.10);
  border: 1px solid rgba(239,68,68,.30);
  border-radius: 7px;
  color: #fca5a5;
  font-size: .8rem;
  padding: 6px 14px;
  cursor: pointer;
  transition: background .15s, border-color .15s;
}
.rule-delete-btn:hover { background: rgba(239,68,68,.22); border-color: rgba(239,68,68,.55); }
.rule-delete-btn--confirm {
  background: rgba(239,68,68,.28) !important;
  border-color: rgba(239,68,68,.70) !important;
  color: #fecaca !important;
}

.rule-item-edit-panel-inner {
  overflow: hidden;
  height: 0;
  opacity: 0;
}
.rule-item-edit-panel-content {
  background: rgba(139,92,246,.06);
  border: 1px solid rgba(139,92,246,.22);
  border-radius: 12px;
  padding: 16px 18px;
}

/* ─── Regler: section-niveau edit-knap (bruges ikke længere, beholdes til bagud-kompatibilitet) ─── */
.rule-edit-btn {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  background: rgba(139,92,246,.12);
  border: 1px solid rgba(139,92,246,.30);
  border-radius: 6px;
  color: rgba(167,139,250,.70);
  cursor: pointer;
  transition: background .15s, border-color .15s, color .15s, transform .15s, box-shadow .15s;
  font-size: .85rem;
}
.rule-edit-btn:hover {
  background: rgba(139,92,246,.25);
  border-color: rgba(139,92,246,.55);
  color: #c4b5fd;
  box-shadow: 0 4px 14px rgba(139,92,246,.25);
  transform: translateY(-2px);
}

/* ─── Regler: edit panel ─── */
.rule-edit-panel {
  margin-top: 20px;
  border-top: 1px solid rgba(139,92,246,.20);
  padding-top: 16px;
}
.rule-edit-panel-inner {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.rule-edit-label {
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: rgba(167,139,250,.80);
}
.rule-edit-textarea {
  width: 100%;
  min-height: 200px;
  background: rgba(0,0,0,.35);
  border: 1px solid rgba(139,92,246,.28);
  border-radius: 8px;
  color: rgba(255,255,255,.88);
  font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
  font-size: .8rem;
  line-height: 1.6;
  padding: 12px;
  resize: vertical;
  box-sizing: border-box;
  transition: border-color .15s, box-shadow .15s;
}
.rule-edit-textarea:focus {
  outline: none;
  border-color: rgba(139,92,246,.55);
  box-shadow: 0 0 0 3px rgba(139,92,246,.12);
}
.rule-edit-input {
  width: 100%;
  background: rgba(0,0,0,.35);
  border: 1px solid rgba(139,92,246,.28);
  border-radius: 8px;
  color: rgba(255,255,255,.88);
  font-size: .85rem;
  font-weight: 600;
  padding: 7px 12px;
  box-sizing: border-box;
  transition: border-color .15s, box-shadow .15s;
}
.rule-edit-input:focus {
  outline: none;
  border-color: rgba(139,92,246,.55);
  box-shadow: 0 0 0 3px rgba(139,92,246,.12);
}
.rule-width-toggle {
  display: flex;
  gap: 6px;
}
.rule-width-btn {
  flex: 1;
  padding: 7px 12px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(139,92,246,.22);
  border-radius: 7px;
  color: rgba(255,255,255,.45);
  font-size: .8rem;
  cursor: pointer;
  transition: background .15s, border-color .15s, color .15s;
}
.rule-width-btn:hover {
  background: rgba(139,92,246,.15);
  border-color: rgba(139,92,246,.40);
  color: rgba(255,255,255,.75);
}
.rule-width-btn--active {
  background: rgba(139,92,246,.22) !important;
  border-color: rgba(139,92,246,.55) !important;
  color: #c4b5fd !important;
}
.rule-edit-meta {
  font-size: .72rem;
  color: rgba(255,255,255,.35);
}
.rule-edit-actions {
  display: flex;
  gap: 8px;
  align-items: center;
}
.rule-edit-save-btn {
  display: inline-flex;
  align-items: center;
  background: rgba(139,92,246,.20);
  border: 1px solid rgba(139,92,246,.45);
  border-radius: 7px;
  color: #c4b5fd;
  font-size: .8rem;
  font-weight: 600;
  padding: 6px 16px;
  cursor: pointer;
  transition: background .15s, transform .1s, box-shadow .15s;
}
.rule-edit-save-btn:hover:not(:disabled) {
  background: rgba(139,92,246,.35);
  box-shadow: 0 3px 10px rgba(139,92,246,.30);
  transform: translateY(-1px);
}
.rule-edit-save-btn:disabled { opacity: .5; cursor: not-allowed; }
.rule-edit-cancel-btn {
  display: inline-flex;
  align-items: center;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 7px;
  color: rgba(255,255,255,.50);
  font-size: .8rem;
  padding: 6px 14px;
  cursor: pointer;
  transition: background .15s, color .15s;
}
.rule-edit-cancel-btn:hover {
  background: rgba(255,255,255,.08);
  color: rgba(255,255,255,.75);
}

/* ─── MOVED FROM admin.ejs ─── */

/* Tabs */
.admin-tabs { display: flex; gap: 4px; margin-bottom: 24px; }
.admin-tab-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 20px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.03);
  color: rgba(255,255,255,.40);
  font-size: .85rem;
  font-weight: 500;
  cursor: pointer;
  transition: background .15s, border-color .15s, color .15s;
}
.admin-tab-btn:hover { background: rgba(255,255,255,.07); color: rgba(255,255,255,.65); border-color: rgba(255,255,255,.14); }
.admin-tab-btn--active {
  background: rgba(59,130,246,.12);
  border-color: rgba(59,130,246,.35);
  color: #93c5fd;
  box-shadow: 0 0 0 1px rgba(59,130,246,.10) inset;
}
.admin-tab-content--hidden { display: none; }

/* Settings grid */
.admin-settings-grid {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: 780px;
}

/* Setting card */
.admin-setting-card {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 22px 24px;
  background: rgba(255,255,255,.025);
  border: 1px solid rgba(59,130,246,.14);
  border-radius: 14px;
  transition: border-color .25s, box-shadow .25s, background .25s;
}
.admin-setting-card--danger {
  background: rgba(239,68,68,.06);
  border-color: rgba(239,68,68,.28);
  box-shadow: 0 0 24px rgba(239,68,68,.08);
}

.admin-setting-card-left {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  flex: 1;
  min-width: 0;
}

.admin-setting-card-icon {
  width: 44px;
  height: 44px;
  border-radius: 11px;
  background: rgba(59,130,246,.12);
  border: 1px solid rgba(59,130,246,.22);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  color: #60a5fa;
  flex-shrink: 0;
  transition: background .25s, border-color .25s, color .25s;
}
.admin-setting-card-icon--danger {
  background: rgba(239,68,68,.15);
  border-color: rgba(239,68,68,.32);
  color: #fca5a5;
}

.admin-setting-card-title {
  font-size: .95rem;
  font-weight: 600;
  color: rgba(255,255,255,.90);
  margin-bottom: 4px;
}
.admin-setting-card-desc {
  font-size: .78rem;
  color: rgba(255,255,255,.38);
  line-height: 1.5;
  margin-bottom: 8px;
}
.admin-setting-card-status {
  font-size: .76rem;
  color: rgba(255,255,255,.38);
  display: flex;
  align-items: center;
  gap: 4px;
}
.admin-setting-card-status--on { color: #fca5a5; }

.maint-allowed-pages {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid rgba(255,255,255,.06);
  transition: opacity .2s;
}
.maint-allowed-label {
  font-size: .75rem;
  color: rgba(255,255,255,.35);
  white-space: nowrap;
}
.maint-check {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: .8rem;
  color: rgba(255,255,255,.6);
  cursor: pointer;
  user-select: none;
}
.maint-check input[type="checkbox"] {
  width: 15px;
  height: 15px;
  accent-color: #3b82f6;
  cursor: pointer;
  flex-shrink: 0;
}
.maint-check:hover { color: rgba(255,255,255,.9); }

.admin-setting-card-right { flex-shrink: 0; }

/* Toggle */
.admin-toggle-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px 8px 8px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 999px;
  cursor: pointer;
  transition: background .2s, border-color .2s, box-shadow .2s;
  color: rgba(255,255,255,.45);
  font-size: .8rem;
  font-weight: 500;
  white-space: nowrap;
}
.admin-toggle-btn:hover { background: rgba(255,255,255,.07); border-color: rgba(255,255,255,.18); color: rgba(255,255,255,.65); }
.admin-toggle-btn--active {
  background: rgba(239,68,68,.10);
  border-color: rgba(239,68,68,.38);
  color: #fca5a5;
  box-shadow: 0 0 14px rgba(239,68,68,.14);
}
.admin-toggle-btn--active:hover { background: rgba(239,68,68,.16); border-color: rgba(239,68,68,.52); }
.admin-toggle-btn:disabled { opacity: .5; cursor: not-allowed; }

/* Toggle track + thumb */
.admin-toggle-track {
  width: 38px;
  height: 22px;
  border-radius: 999px;
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.14);
  position: relative;
  flex-shrink: 0;
  transition: background .22s, border-color .22s;
}
.admin-toggle-thumb {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: rgba(255,255,255,.35);
  transition: transform .22s cubic-bezier(.4,0,.2,1), background .22s;
  box-shadow: 0 1px 3px rgba(0,0,0,.3);
}
.admin-toggle-btn--active .admin-toggle-track {
  background: rgba(239,68,68,.30);
  border-color: rgba(239,68,68,.45);
}
.admin-toggle-btn--active .admin-toggle-thumb {
  transform: translateX(16px);
  background: #fca5a5;
  box-shadow: 0 0 6px rgba(239,68,68,.40);
}

/* ── Team admin ── */
.team-admin-group { margin-bottom: 24px; }
.team-admin-group-label {
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .10em;
  text-transform: uppercase;
  color: rgba(255,255,255,.35);
  padding: 0 0 8px;
  border-bottom: 1px solid rgba(255,255,255,.06);
  margin-bottom: 8px;
}
.team-admin-row {
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 10px;
  margin-bottom: 6px;
  overflow: hidden;
  background: rgba(255,255,255,.02);
  transition: border-color .15s;
}
.team-admin-row:hover { border-color: rgba(59,130,246,.25); }
.team-admin-row-main {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  cursor: pointer;
}
.team-admin-avatar {
  width: 36px; height: 36px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}
.team-admin-row-info { flex: 1; min-width: 0; }
.team-admin-row-name { display: block; font-size: .88rem; font-weight: 600; color: rgba(255,255,255,.88); }
.team-admin-row-meta { display: block; font-size: .75rem; color: rgba(255,255,255,.38); margin-top: 1px; }
.team-admin-row-visible { font-size: .8rem; color: rgba(96,165,250,.7); }
.team-admin-row-visible--hidden { color: rgba(239,68,68,.6); }
.team-admin-row-chevron { font-size: .75rem; color: rgba(255,255,255,.3); transition: transform .2s; }
.team-admin-edit-panel { padding: 4px 14px 16px; border-top: 1px solid rgba(255,255,255,.06); }

/* ── Team admin edit panel ── */
.team-admin-edit-panel {
  padding: 12px 14px 14px;
  border-top: 1px solid rgba(59,130,246,.12);
  background: rgba(59,130,246,.03);
}
.team-admin-edit-panel .alw-label {
  font-size: .72rem;
  color: rgba(255,255,255,.45);
  margin-bottom: 4px;
}
.team-admin-edit-panel .alw-control {
  font-size: .82rem;
  padding: 7px 10px;
}
.team-admin-edit-panel .row {
  --bs-gutter-x: .75rem;
  --bs-gutter-y: .5rem;
}

/* ── Team admin edit panel v2 ── */
.ta-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 12px;
  margin-bottom: 12px;
}
.ta-field { display: flex; flex-direction: column; gap: 4px; }
.ta-field--full { grid-column: 1 / -1; }
.ta-label {
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: rgba(255,255,255,.35);
}
.ta-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 10px;
  border-top: 1px solid rgba(255,255,255,.06);
}
.ta-vis-toggle { display: flex; align-items: center; gap: 10px; }
.ta-toggle-btns { display: flex; gap: 4px; }
.ta-toggle-btn {
  font-size: .75rem;
  padding: 4px 12px;
  border-radius: 6px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
  color: rgba(255,255,255,.45);
  cursor: pointer;
  transition: all .15s;
}
.ta-toggle-btn:hover { border-color: rgba(255,255,255,.20); color: rgba(255,255,255,.7); }
.ta-toggle-btn--active {
  background: rgba(59,130,246,.18);
  border-color: rgba(59,130,246,.45);
  color: #60a5fa;
}
.ta-toggle-btn--danger {
  background: rgba(239,68,68,.12);
  border-color: rgba(239,68,68,.35);
  color: #f87171;
}
.ta-btn-delete {
  background: rgba(239,68,68,.10);
  border: 1px solid rgba(239,68,68,.25);
  color: rgba(248,113,113,.8);
  font-size: .78rem;
}
.ta-btn-delete:hover {
  background: rgba(239,68,68,.20);
  border-color: rgba(239,68,68,.45);
  color: #f87171;
}

/* ── Bande Oversigt ── */
.bande-card { padding: 20px 24px !important; }

/* Søgefelt */
.bande-search-wrap { position: relative; margin-bottom: 20px; }
.bande-search-field { display: flex; align-items: center; gap: 6px; position: relative; }
.bande-search-icon {
  position: absolute; left: 14px;
  color: rgba(255,255,255,.28); font-size: .9rem;
  pointer-events: none; z-index: 1;
}
.bande-search-field .alw-control {
  padding-left: 38px;
  flex: 1;
  border-radius: 10px 0 0 10px !important;
  background: rgba(255,255,255,.04) !important;
  border-color: rgba(255,255,255,.10) !important;
  border-right: 1px solid rgba(255,255,255,.10) !important;
  border-radius: 10px !important;
  font-size: .88rem;
}
.bande-search-field .alw-control:focus {
  border-color: rgba(59,130,246,.45) !important;
  background: rgba(255,255,255,.05) !important;
}
.bande-go-btn {
  padding: 0 12px !important;
  height: 34px;
  border-radius: 8px !important;
  flex-shrink: 0;
  border-left: none !important;
  font-size: .8rem;
}

/* Autocomplete dropdown */
.bande-suggestions {
  position: absolute; top: calc(100% + 6px); left: 0; right: 0;
  background: rgba(10,14,28,.97);
  border: 1px solid rgba(59,130,246,.22);
  border-radius: 12px;
  overflow-y: auto; max-height: 420px;
  z-index: 200;
  box-shadow: 0 16px 40px rgba(0,0,0,.60), 0 0 0 1px rgba(59,130,246,.08);
  backdrop-filter: blur(12px);
  text-align: left;
}
.bande-sug-item {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 14px; cursor: pointer;
  border-bottom: 1px solid rgba(255,255,255,.035);
  transition: background .12s;
}
.bande-sug-item:last-child { border-bottom: none; }
.bande-sug-item:hover,
.bande-sug-item--active { background: rgba(59,130,246,.10); }
.bande-sug-item:hover .bande-sug-label,
.bande-sug-item--active .bande-sug-label { color: rgba(255,255,255,.95); }
.bande-sug-item--active { border-left: 2px solid rgba(59,130,246,.60); }
.bande-sug-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: rgba(59,130,246,.50); flex-shrink: 0;
}
.bande-sug-label { font-size: .85rem; font-weight: 600; color: rgba(255,255,255,.78); flex: 1; }
.bande-sug-key  {
  font-size: .68rem; color: rgba(255,255,255,.20);
  font-family: monospace; letter-spacing: .03em;
}
.bande-sug-cnt  {
  font-size: .70rem; font-weight: 700;
  color: rgba(96,165,250,.80);
  background: rgba(59,130,246,.12);
  border: 1px solid rgba(59,130,246,.18);
  border-radius: 20px; padding: 1px 8px;
  min-width: 26px; text-align: center; flex-shrink: 0;
}

/* Summary */
.bande-summary { margin-bottom: 16px; }
.bande-sum-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; }
.bande-sum-name { font-family: 'Outfit', sans-serif; font-size: 1.15rem; font-weight: 700; color: rgba(255,255,255,.92); }
.bande-sum-cnt { font-size: .74rem; color: rgba(255,255,255,.38); background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.08); border-radius: 20px; padding: 2px 10px; }
.bande-sum-cnt--pusher { color: rgba(251,146,60,.75); background: rgba(251,146,60,.06); border-color: rgba(251,146,60,.18); }
.bande-overlimit { font-size: .74rem; font-weight: 600; color: #fca5a5; background: rgba(239,68,68,.10); border: 1px solid rgba(239,68,68,.25); border-radius: 6px; padding: 2px 9px; }
.bande-pill-row { display: flex; flex-wrap: wrap; gap: 6px; }
.bande-pill { font-size: .72rem; color: rgba(255,255,255,.50); background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.07); border-radius: 6px; padding: 2px 10px; }
.bande-pill b { color: rgba(255,255,255,.78); }

/* Tabel */
.bande-table-wrap { overflow-x: hidden; margin: 0 -4px; }
.bande-table { width: 100%; border-collapse: collapse; font-size: .82rem; table-layout: fixed; }
.bande-table th {
  text-align: center; padding: 9px 14px;
  font-size: .65rem; font-weight: 700; letter-spacing: .10em; text-transform: uppercase;
  color: rgba(255,255,255,.30); border-bottom: 1px solid rgba(255,255,255,.06);
  white-space: nowrap;
}
.bande-table th:first-child { text-align: left; }
.bande-th-num  { width: 44px; }
.bande-th-time { width: 72px; text-align: right; }
.bande-t       { text-align: right; }
.bande-table td { padding: 11px 14px; border-bottom: 1px solid rgba(255,255,255,.04); vertical-align: middle; text-align: center; }
.bande-table td:first-child { text-align: left; }
.bande-table tbody tr:hover td { background: rgba(255,255,255,.025); }
.bande-table tr:last-child td { border-bottom: none; }

/* Rang separator */
.bande-sep td {
  padding: 0;
  background: linear-gradient(90deg, transparent, rgba(59,130,246,.04) 30%, rgba(59,130,246,.04) 70%, transparent);
  border-top: 1px solid rgba(59,130,246,.08) !important;
  border-bottom: 1px solid rgba(59,130,246,.08) !important;
}
.bande-sep-inner {
  display: flex;
  align-items: center;
  gap: 0;
  padding: 8px 0;
  position: relative;
}

/* Gradient lines */
.bande-sep-inner::before,
.bande-sep-inner::after {
  content: '';
  flex: 1;
  height: 1px;
}
.bande-sep-inner::before {
  background: linear-gradient(90deg, transparent, rgba(59,130,246,.50));
}
.bande-sep-inner::after {
  background: linear-gradient(90deg, rgba(59,130,246,.50), transparent);
}

/* Rank badge */
.bande-sep-inner span {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 6px 48px;
  font-family: 'Outfit', sans-serif;
  font-size: .70rem;
  font-weight: 800;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: rgba(96,165,250,.95);
  white-space: nowrap;
  background:
    linear-gradient(180deg, rgba(59,130,246,.12) 0%, rgba(59,130,246,.05) 100%);
  border: 1px solid rgba(59,130,246,.30);
  border-radius: 6px;
  box-shadow:
    0 0 20px rgba(59,130,246,.12),
    0 2px 8px rgba(0,0,0,.30),
    inset 0 1px 0 rgba(255,255,255,.08);
  text-shadow: 0 0 14px rgba(59,130,246,.50);
}

/* Diamond ornaments */
.bande-sep-inner span::before,
.bande-sep-inner span::after {
  content: '◆';
  font-size: .42rem;
  color: rgba(96,165,250,.60);
  line-height: 1;
  filter: drop-shadow(0 0 4px rgba(59,130,246,.60));
}

/* Celle-styles */
.bande-n { color: rgba(255,255,255,.22); font-size: .74rem; }
.bande-char-name { display: block; font-weight: 600; color: rgba(255,255,255,.88); line-height: 1.3; }
.bande-char-steam { display: block; font-size: .72rem; color: rgba(255,255,255,.32); line-height: 1.3; }
.bande-rang  { font-size: .80rem; color: rgba(255,255,255,.65); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 0; }
.bande-seen  { white-space: nowrap; }
.bande-cid { font-family: monospace; font-size: .76rem; color: rgba(255,255,255,.40); }
.bande-table td.bande-dc-cell {
  max-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.bande-dc-name { font-size: .78rem; color: rgba(114,137,218,.85); white-space: nowrap; }
.bande-dc-id   { font-family: monospace; font-size: .72rem; color: rgba(114,137,218,.50); white-space: nowrap; }
.bande-dc-none { color: rgba(255,255,255,.18); }
.bande-seen { font-size: .78rem; white-space: nowrap; }
.bande-seen--now  { color: #4ade80; font-weight: 600; }
.bande-seen--week { color: rgba(255,255,255,.68); }
.bande-seen--old  { color: rgba(250,204,21,.65); }
.bande-seen--dead { color: rgba(239,68,68,.55); }
.bande-t { font-family: monospace; font-size: .76rem; color: rgba(255,255,255,.48); text-align: right; white-space: nowrap; }
.firma-boss-badge {
  display: inline-block; font-size: .62rem; font-weight: 700; letter-spacing: .04em;
  padding: 1px 6px; border-radius: 4px; vertical-align: middle; margin-left: 5px;
  background: rgba(251,146,60,.15); color: #fb923c; border: 1px solid rgba(251,146,60,.30);
}

/* States */
.bande-state { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 48px 20px; color: rgba(255,255,255,.30); font-size: .86rem; }
.bande-state--err { color: #f87171; }
.bande-spin { animation: bande-rotate 1s linear infinite; }
@keyframes bande-rotate { to { transform: rotate(360deg); } }

/* ── Bande gang editor ── */
.bande-gang-editor {
  display: flex; flex-direction: column; gap: 16px; text-align: left;
  padding: 20px 24px; border-radius: 14px;
  background: rgba(59,130,246,.04);
  border: 1px solid rgba(59,130,246,.14);
}
.bande-gang-editor__hdr {
  display: flex; align-items: center; gap: 10px;
  font-size: .72rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: rgba(96,165,250,.70);
}
.bande-gang-editor__hdr i { font-size: .85rem; }
.bande-gang-save-status { font-size: .78rem; font-weight: 600; margin-left: 6px; transition: opacity .2s; }
.bande-gang-tags {
  display: flex; flex-wrap: wrap; gap: 8px; min-height: 38px; align-items: center;
}
.bande-gang-tag {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 5px 8px 5px 14px; border-radius: 999px; font-size: .80rem; font-weight: 600;
  background: rgba(59,130,246,.10);
  border: 1px solid rgba(59,130,246,.30);
  color: rgba(255,255,255,.85);
  box-shadow: 0 0 0 0 rgba(59,130,246,0);
  transition: border-color .15s, box-shadow .15s, background .15s;
}
.bande-gang-tag:hover {
  background: rgba(59,130,246,.18); border-color: rgba(59,130,246,.55);
  box-shadow: 0 0 10px rgba(59,130,246,.18);
}
.bande-gang-tag__remove {
  display: flex; align-items: center; justify-content: center;
  width: 18px; height: 18px; border-radius: 50%;
  background: rgba(255,255,255,.08); border: none; color: rgba(255,255,255,.45);
  cursor: pointer; font-size: .85rem; line-height: 1; padding: 0;
  transition: background .12s, color .12s;
}
.bande-gang-tag__remove:hover { background: rgba(239,68,68,.25); color: #f87171; }
.bande-gang-editor__divider {
  height: 1px; background: rgba(59,130,246,.10); margin: 0 -4px;
}
.bande-gang-add-row { display: flex; align-items: center; gap: 10px; }
.bande-gang-new-input { max-width: 240px; flex-shrink: 0; }

/* ── INFO BANNER ── */
.info-banner {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 9px 48px 9px 20px;
  background: rgba(251,146,60,.10);
  border-bottom: 1px solid rgba(251,146,60,.30);
  backdrop-filter: blur(10px);
  font-size: .84rem;
  color: #fb923c;
  line-height: 1.4;
  text-align: center;
}
.info-banner__icon {
  color: #fb923c;
  font-size: .9rem;
  flex-shrink: 0;
}
.info-banner__text {
  color: #fb923c;
  white-space: pre-wrap;
}
.info-banner__close {
  position: absolute;
  right: 14px;
  background: none;
  border: none;
  color: rgba(251,146,60,.45);
  cursor: pointer;
  padding: 0 2px;
  font-size: 1rem;
  line-height: 1;
  transition: color .15s;
}
.info-banner__close:hover { color: #fb923c; }

/* Admin – info banner editor */
.admin-setting-card--active {
  border-color: rgba(59,130,246,.45) !important;
  background: rgba(59,130,246,.06) !important;
}
.admin-setting-card-icon--active {
  background: rgba(59,130,246,.18) !important;
  color: #60a5fa !important;
}
.info-banner-editor {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-top: 4px;
}
.info-banner-scope-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.info-banner-textarea {
  resize: vertical;
  min-height: 56px;
  max-height: 140px;
  font-size: .86rem !important;
}