@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');

* {
  font-family: 'Plus Jakarta Sans', sans-serif !important;
}

/* public/css/style.css */

/* Core CSS Variables for Themeing */
:root {
  --bg-color: var(--bg-primary);
  --text-color: var(--text-normal);
  --sidebar-bg: var(--bg-secondary);
  --card-bg: var(--bg-secondary);

  --accent-color: #5865F2;
  --accent-hover: #4752c4;
  --banner-overlay: rgba(0, 0, 0, 0.4);

  --theme-blue: #5865F2;
  --theme-yellow: #d4b815;
}

html[data-theme="default"],
:root {
  --bg-primary: #313338;
  --bg-secondary: #2b2d31;
  --bg-main: linear-gradient(135deg, #313338, #2b2d31, #1e1f22);
  --bg-main-reverse: linear-gradient(315deg, #313338, #2b2d31, #1e1f22);
  --bg-sidebar: #2b2d31;
  --text-normal: #dbdee1;
}

html[data-theme="light"] {
  --bg-primary: #ffffff;
  --bg-secondary: #f2f3f5;
  --bg-main: linear-gradient(135deg, #9ca3af, #e5e7eb, #9ca3af);
  --bg-main-reverse: linear-gradient(315deg, #9ca3af, #e5e7eb, #9ca3af);
  --bg-sidebar: #ebedef;
  --text-normal: #111214 !important;
}

/* Text swap for the pale themes. This only ever covered "light", so on
   mint/cherry/lavender/desert headings and body copy still came out right
   (they inherit the dark --text-normal) but bare <a> links fell through to
   the browser default blue, #0000EE, which is close to unreadable on those
   backgrounds. Same element list light already used, now applied to all
   five - specificity is identical to the old selector, so light itself
   behaves exactly as before. */
html:is([data-theme="light"],
        [data-theme="mint"],
        [data-theme="cherry"],
        [data-theme="lavender"],
        [data-theme="desert"]) :is(h1, h2, h3, h4, p, span, label, a) {
  color: var(--text-normal) !important;
}

html[data-theme="midnight"] {
  --bg-primary: linear-gradient(135deg, #111823, #1e2636);
  --bg-secondary: #0b0f16;
  --bg-main: linear-gradient(135deg, #1e1b4b, #0f172a, #172554);
  --bg-main-reverse: linear-gradient(315deg, #1e1b4b, #0f172a, #172554);
  --bg-sidebar: #0b0f16;
  --text-normal: #dbdee1;
}

html[data-theme="crimson"] {
  --bg-primary: linear-gradient(135deg, #7a1d1d, #210a0a);
  --bg-secondary: #24060d;
  --bg-main: linear-gradient(135deg, #450a0a, #7f1d1d, #450a0a);
  --bg-main-reverse: linear-gradient(315deg, #450a0a, #7f1d1d, #450a0a);
  --bg-sidebar: #24060d;
  --text-normal: #dbdee1;
}

html[data-theme="forest"] {
  --bg-primary: linear-gradient(135deg, #2c5e3d, #0e1f13);
  --bg-secondary: #0f1c17;
  --bg-main: linear-gradient(135deg, #064e3b, #134e4a, #022c22);
  --bg-main-reverse: linear-gradient(315deg, #064e3b, #134e4a, #022c22);
  --bg-sidebar: #0f1c17;
  --text-normal: #dbdee1;
}

html[data-theme="ocean"] {
  --bg-primary: linear-gradient(135deg, #091f2c, #05141c);
  --bg-secondary: #05141c;
  --bg-main: linear-gradient(135deg, #083344, #1e3a8a, #0f172a);
  --bg-main-reverse: linear-gradient(315deg, #083344, #1e3a8a, #0f172a);
  --bg-sidebar: #05141c;
  --text-normal: #dbdee1;
}

html[data-theme="amethyst"] {
  --bg-primary: linear-gradient(135deg, #2b173b, #43245c);
  --bg-secondary: #1d0b30;
  --bg-main: linear-gradient(135deg, #4c1d95, #2e1065, #0f172a);
  --bg-main-reverse: linear-gradient(315deg, #4c1d95, #2e1065, #0f172a);
  --bg-sidebar: #1d0b30;
  --text-normal: #dbdee1;
}

html[data-theme="sunset"] {
  --bg-primary: linear-gradient(135deg, #4d230e, #7a3a19);
  --bg-secondary: #331508;
  --bg-main: linear-gradient(135deg, #7c2d12, #9f1239, #4c0519);
  --bg-main-reverse: linear-gradient(315deg, #7c2d12, #9f1239, #4c0519);
  --bg-sidebar: #331508;
  --text-normal: #dbdee1;
}

html[data-theme="slate"] {
  --bg-primary: linear-gradient(135deg, #20222e, #313547);
  --bg-secondary: #151721;
  --bg-main: linear-gradient(135deg, #334155, #0f172a, #020617);
  --bg-main-reverse: linear-gradient(315deg, #334155, #0f172a, #020617);
  --bg-sidebar: #151721;
  --text-normal: #dbdee1;
}

html[data-theme="chroma"] {
  --bg-primary: linear-gradient(135deg, #1a0b2e, #2b1154);
  --bg-secondary: #110721;
  --bg-main: linear-gradient(135deg, #0f172a, #3730a3, #86198f);
  --bg-main-reverse: linear-gradient(315deg, #0f172a, #3730a3, #86198f);
  --bg-sidebar: #110721;
  --text-normal: #dbdee1;
}

html[data-theme="retro"] {
  --bg-primary: linear-gradient(135deg, #3d0e2c, #611545);
  --bg-secondary: #26071a;
  --bg-main: linear-gradient(135deg, #831843, #4a044e, #0f172a);
  --bg-main-reverse: linear-gradient(315deg, #831843, #4a044e, #0f172a);
  --bg-sidebar: #26071a;
  --text-normal: #dbdee1;
}

html[data-theme="mint"] {
  --bg-primary: linear-gradient(135deg, #c4e4d5, #e0f2e9);
  --bg-secondary: #a8d1bc;
  --bg-main: linear-gradient(135deg, #a7f3d0, #6ee7b7, #047857);
  --bg-main-reverse: linear-gradient(315deg, #a7f3d0, #6ee7b7, #047857);
  --bg-sidebar: #a8d1bc;
  --text-normal: #1f3629;
}

html[data-theme="cherry"] {
  --bg-primary: linear-gradient(135deg, #f4c2c2, #fce4e4);
  --bg-secondary: #e8a5a5;
  --bg-main: linear-gradient(135deg, #fecdd3, #fda4af, #be123c);
  --bg-main-reverse: linear-gradient(315deg, #fecdd3, #fda4af, #be123c);
  --bg-sidebar: #e8a5a5;
  --text-normal: #4a2121;
}

html[data-theme="lavender"] {
  --bg-primary: linear-gradient(135deg, #d3c4e3, #e8dff0);
  --bg-secondary: #bda8d4;
  --bg-main: linear-gradient(135deg, #e9d5ff, #d8b4fe, #7e22ce);
  --bg-main-reverse: linear-gradient(315deg, #e9d5ff, #d8b4fe, #7e22ce);
  --bg-sidebar: #bda8d4;
  --text-normal: #2a1b38;
}

html[data-theme="desert"] {
  --bg-primary: linear-gradient(135deg, #f3d5b5, #fae9d4);
  --bg-secondary: #e8c199;
  --bg-main: linear-gradient(135deg, #fde68a, #fcd34d, #b45309);
  --bg-main-reverse: linear-gradient(315deg, #fde68a, #fcd34d, #b45309);
  --bg-sidebar: #e8c199;
  --text-normal: #4a341d;
}

html[data-theme="ami"] {
  --bg-primary: linear-gradient(135deg, #0a0a0c, #2a0813);
  --bg-secondary: #050506;
  --bg-main: linear-gradient(135deg, #2a0813, #0a0a0c, #000000);
  --bg-main-reverse: linear-gradient(315deg, #2a0813, #0a0a0c, #000000);
  --bg-sidebar: #050506;
  --text-normal: #e0d5d5;
}

/* Logout Button - pill-shaped like the rest of the site's buttons (see the
   global `button, .btn` rule below), kept red intentionally so it stays
   legible against every theme, including light ones. */
.logout-btn {
  background-color: #ed4245;
  color: #fff !important;
  border: none;
  padding: 10px 20px;
  text-decoration: none;
  transition: background-color 0.2s ease;
  display: flex;
  align-items: center;
  gap: 8px;
}

.logout-btn:hover {
  background-color: #da373c;
  color: #fff !important;
}

/* Sits next to the logout button and follows the same rule: a solid brand
   fill with white text, so it stays legible on every theme. It used to be
   translucent blurple with blurple text, which disappeared into the pale
   themes and into the blue/purple ones (Aurora, Blurple Twilight) alike. */
.sync-discord-btn {
  background-color: #5865F2;
  color: #fff !important;
  border: none;
  padding: 10px 20px;
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
  text-decoration: none;
  transition: background-color 0.2s ease;
  display: flex;
  align-items: center;
  gap: 8px;
}

.sync-discord-btn:hover {
  background-color: #4752c4;
  color: #fff !important;
}

/* Global Styles */
/* Custom WebKit Scrollbar matching the glass aesthetic */
::-webkit-scrollbar {
  width: 8px !important;
  height: 8px !important;
}

::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.2) !important;
  border-radius: 10px !important;
}

::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, var(--bg-primary) 50%, rgba(255, 255, 255, 0.2)) !important;
  border-radius: 10px !important;
  transition: background 0.3s ease !important;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--bg-primary) !important;
}

html {
  scroll-behavior: smooth;
}

html {
  background: var(--bg-main, #09090b) !important;
  overflow: hidden;
}

body {
  margin: 0;
  padding: 0;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  background: transparent !important;
  color: var(--text-normal);
  display: flex;
  justify-content: center;
  align-items: center;
}

/* ===================== Background animation variants =====================
   Four selectable looks, chosen from the nav and stored in localStorage as
   `ami-bg-anim`, applied as html[data-bg-anim]. Every one of them animates
   only transform / background-position / background-size and never
   filter: blur(), which is the expensive convolution that made Firefox
   struggle in the first place.

   IMPORTANT: the animated properties below deliberately carry no !important.
   Important author declarations outrank CSS animations in the cascade, so
   flagging one silently freezes the animation while it still reports as
   running. Structural properties are safe to flag.
   ======================================================================== */

.app-workspace::before,
.app-workspace::after {
  content: '' !important;
  position: fixed !important;
  pointer-events: none !important;
}

/* Third layer for Aurora Drift, injected once by main.js so the markup
   doesn't need a decorative div on every page. Hidden for the other three. */
#bgExtraLayer {
  display: none;
  position: fixed;
  pointer-events: none;
  border-radius: 50%;
  -webkit-mask-image: radial-gradient(circle, black 0%, black 45%, transparent 72%);
  mask-image: radial-gradient(circle, black 0%, black 45%, transparent 72%);
  will-change: transform;
}

/* ---------- 1. Gradient Flow (default) ---------- */
/* Two full-bleed layers panning across an oversized copy of the theme's own
   gradient. Sizes stay in the 150-190% band: the visible slice of a gradient
   is 1/background-size, so anything near 300% shows so little of it that a
   two-stop theme reads as one flat colour. */
html:not([data-bg-anim]) .app-workspace::before,
html[data-bg-anim="flow"] .app-workspace::before {
  inset: 0 !important;
  background: var(--bg-primary);
  background-size: 170% 170%;
  background-position: 10% 20%;
  animation: bgFlowBase 24s ease-in-out infinite !important;
  z-index: -2 !important;
  opacity: 0.9 !important;
}

html:not([data-bg-anim]) .app-workspace::after,
html[data-bg-anim="flow"] .app-workspace::after {
  inset: 0 !important;
  background: var(--bg-main);
  background-size: 200% 200%;
  background-position: 0% 0%;
  mix-blend-mode: overlay !important;
  animation: bgFlowOverlay 15s ease-in-out infinite reverse !important;
  z-index: -1 !important;
  opacity: 0.7 !important;
}

@keyframes bgFlowBase {
  0%   { background-position: 10% 20%; background-size: 170% 170%; }
  22%  { background-position: 80% 15%; background-size: 190% 190%; }
  48%  { background-position: 70% 85%; background-size: 150% 150%; }
  74%  { background-position: 15% 75%; background-size: 180% 180%; }
  100% { background-position: 10% 20%; background-size: 170% 170%; }
}

@keyframes bgFlowOverlay {
  0%   { background-position: 0% 0%; }
  33%  { background-position: 100% 40%; }
  66%  { background-position: 20% 100%; }
  100% { background-position: 0% 0%; }
}

/* ---------- 2. Floating Orbs (the original look) ---------- */
/* Soft-edged circles via mask-image rather than filter: blur() - a per-pixel
   alpha multiply instead of a gaussian convolution, visually near-identical
   and cheap on every engine. */
html[data-bg-anim="orbs"] .app-workspace::before {
  top: -20% !important;
  left: -20% !important;
  width: 60vw !important;
  height: 60vw !important;
  background: var(--bg-primary) !important;
  border-radius: 50% !important;
  -webkit-mask-image: radial-gradient(circle, black 0%, black 45%, transparent 72%) !important;
  mask-image: radial-gradient(circle, black 0%, black 45%, transparent 72%) !important;
  animation: floatBlob1 18s cubic-bezier(0.4, 0, 0.2, 1) infinite alternate !important;
  will-change: transform !important;
  z-index: -2 !important;
  opacity: 0.95 !important;
}

html[data-bg-anim="orbs"] .app-workspace::after {
  bottom: -20% !important;
  right: -20% !important;
  width: 70vw !important;
  height: 70vw !important;
  background: var(--bg-main) !important;
  border-radius: 50% !important;
  -webkit-mask-image: radial-gradient(circle, black 0%, black 45%, transparent 72%) !important;
  mask-image: radial-gradient(circle, black 0%, black 45%, transparent 72%) !important;
  animation: floatBlob2 22s cubic-bezier(0.4, 0, 0.2, 1) infinite alternate-reverse !important;
  will-change: transform !important;
  z-index: -1 !important;
  opacity: 0.85 !important;
}

/* No rotate() on purpose - these are radially symmetric, so rotating them
   looks identical at every angle and would be wasted compositor work. */
@keyframes floatBlob1 {
  0%   { transform: translate(0, 0) scale(0.8); }
  50%  { transform: translate(40vw, 30vh) scale(1.4); }
  100% { transform: translate(70vw, -10vh) scale(0.9); }
}

@keyframes floatBlob2 {
  0%   { transform: translate(0, 0) scale(1.3); }
  50%  { transform: translate(-50vw, -40vh) scale(0.7); }
  100% { transform: translate(-30vw, -80vh) scale(1.5); }
}

/* ---------- 3. Aurora Drift ---------- */
/* Three differently-sized layers on independent paths and timings, so they
   overlap in changing combinations rather than sweeping in lockstep. */
html[data-bg-anim="aurora"] .app-workspace::before {
  top: -15% !important;
  left: -10% !important;
  width: 55vw !important;
  height: 55vw !important;
  background: var(--bg-primary) !important;
  border-radius: 50% !important;
  -webkit-mask-image: radial-gradient(circle, black 0%, black 45%, transparent 72%) !important;
  mask-image: radial-gradient(circle, black 0%, black 45%, transparent 72%) !important;
  animation: auroraDrift1 21s ease-in-out infinite alternate !important;
  will-change: transform !important;
  z-index: -3 !important;
  opacity: 0.9 !important;
}

html[data-bg-anim="aurora"] .app-workspace::after {
  bottom: -15% !important;
  right: -5% !important;
  width: 45vw !important;
  height: 45vw !important;
  background: var(--bg-main) !important;
  border-radius: 50% !important;
  -webkit-mask-image: radial-gradient(circle, black 0%, black 45%, transparent 72%) !important;
  mask-image: radial-gradient(circle, black 0%, black 45%, transparent 72%) !important;
  animation: auroraDrift2 16s ease-in-out infinite alternate-reverse !important;
  will-change: transform !important;
  z-index: -2 !important;
  opacity: 0.85 !important;
}

html[data-bg-anim="aurora"] #bgExtraLayer {
  display: block;
  top: 25%;
  left: 30%;
  width: 38vw;
  height: 38vw;
  background: var(--bg-main-reverse);
  animation: auroraDrift3 27s ease-in-out infinite alternate;
  z-index: -1;
  opacity: 0.75;
}

@keyframes auroraDrift1 {
  0%   { transform: translate(0, 0) scale(0.9); }
  50%  { transform: translate(35vw, 25vh) scale(1.25); }
  100% { transform: translate(60vw, -5vh) scale(1); }
}

@keyframes auroraDrift2 {
  0%   { transform: translate(0, 0) scale(1.2); }
  50%  { transform: translate(-40vw, -30vh) scale(0.8); }
  100% { transform: translate(-20vw, -60vh) scale(1.35); }
}

@keyframes auroraDrift3 {
  0%   { transform: translate(0, 0) scale(1) rotate(0deg); }
  50%  { transform: translate(-25vw, 30vh) scale(1.3) rotate(12deg); }
  100% { transform: translate(20vw, -25vh) scale(0.85) rotate(-8deg); }
}

/* ---------- 4. Rotating Sweep ---------- */
/* One oversized square carrying the theme gradient, turning slowly so the
   colours sweep around the page. Sized past the viewport diagonal (130vmax
   vs a ~115vmax diagonal at 16:9) so no corner is ever exposed mid-rotation.
   Only transform animates, which is the cheapest property there is. */
html[data-bg-anim="sweep"] .app-workspace::before {
  top: 50% !important;
  left: 50% !important;
  width: 130vmax !important;
  height: 130vmax !important;
  margin-top: -65vmax !important;
  margin-left: -65vmax !important;
  background: var(--bg-main) !important;
  border-radius: 50% !important;
  -webkit-mask-image: radial-gradient(circle, black 0%, black 55%, transparent 78%) !important;
  mask-image: radial-gradient(circle, black 0%, black 55%, transparent 78%) !important;
  animation: sweepRotate 34s linear infinite !important;
  will-change: transform !important;
  z-index: -2 !important;
  opacity: 0.9 !important;
}

/* A second, slower counter-rotation would double the raster cost for very
   little payoff at this size, so the sweep runs as a single layer. */
html[data-bg-anim="sweep"] .app-workspace::after {
  display: none !important;
}

@keyframes sweepRotate {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* Respect the OS-level "reduce motion" preference the same way the manual
   Animations toggle does. */
@media (prefers-reduced-motion: reduce) {
  .app-workspace::before,
  .app-workspace::after,
  #bgExtraLayer {
    animation: none !important;
  }
}

.app-workspace {
  width: 100%;
  padding-top: 70px !important;
  height: 100vh !important;
  position: relative;
  z-index: 10;
  overflow-y: auto !important;
  overflow-x: hidden !important;
}

.global-top-nav {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  min-height: 70px !important;
  background: color-mix(in srgb, var(--bg-secondary) 40%, transparent) !important;
  backdrop-filter: blur(24px) !important;
  -webkit-backdrop-filter: blur(24px) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  padding: 10px 5% !important;
  box-sizing: border-box !important;
  z-index: 9000 !important;
  flex-wrap: wrap !important;
  gap: 15px !important;
}

.nav-left {
  display: flex !important;
  align-items: center !important;
  gap: 24px !important;
  flex-wrap: wrap !important;
}

.nav-right {
  display: flex !important;
  align-items: center !important;
  gap: 24px !important;
  flex-wrap: wrap !important;
}

.nav-link {
  color: rgba(255, 255, 255, 0.6) !important;
  text-decoration: none !important;
  font-weight: 700 !important;
  font-size: 14px !important;
  letter-spacing: 0.5px !important;
  transition: all 0.3s ease !important;
  flex-shrink: 0 !important;
  /* Same invisible-until-hover pill as .breadcrumb-link, so clicking near
     the text (not just directly on the letters) still counts. */
  padding: 6px 16px !important;
  border-radius: 50px !important;
  border: 1px solid transparent !important;
  background: transparent !important;
}

.nav-link:hover {
  color: var(--text-normal) !important;
  background: rgba(255, 255, 255, 0.05) !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
  backdrop-filter: blur(10px) !important;
}

.nav-brand {
  text-decoration: none !important;
  color: inherit !important;
}

.nav-divider {
  width: 1px !important;
  height: 20px !important;
  background: rgba(255, 255, 255, 0.15) !important;
  display: inline-block !important;
  flex-shrink: 0 !important;
}

.nav-profile {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  text-decoration: none !important;
  color: var(--text-normal) !important;
  font-weight: 700 !important;
  padding: 6px 12px !important;
  border-radius: 50px !important;
  background: rgba(255, 255, 255, 0.05) !important;
  transition: background 0.2s ease !important;
  flex-shrink: 0 !important;
}

.nav-profile:hover {
  background: rgba(255, 255, 255, 0.1) !important;
}

.nav-profile img {
  width: 32px !important;
  height: 32px !important;
  border-radius: 50%;
}

/* Theme picker. 25 swatches laid out inline used ~600px of nav width and
   only just fit at 1920px, so they collapse behind a single button that
   previews the active theme's own gradient. */
.theme-picker {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  border-right: 1px solid rgba(255, 255, 255, 0.1) !important;
  padding-right: 20px !important;
  margin-right: 4px !important;
  flex-shrink: 0 !important;
}

.theme-picker-btn {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 4px !important;
  border-radius: 8px !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  background: transparent !important;
  cursor: pointer !important;
  transition: border-color 0.2s ease, transform 0.2s ease !important;
}

.theme-picker-btn:hover {
  border-color: rgba(255, 255, 255, 0.5) !important;
  transform: scale(1.08) !important;
}

/* The live preview chip - JS keeps a .swatch-<theme> class on this so it
   always shows whichever theme is active, without duplicating any colors. */
.theme-picker-current {
  display: block !important;
  width: 20px !important;
  height: 20px !important;
  border-radius: 5px !important;
}

.theme-picker-panel {
  display: none;
  position: absolute !important;
  top: 100% !important;
  right: 0 !important;
  margin-top: 12px !important;
  width: 400px !important;
  max-height: 60vh !important;
  overflow-y: auto !important;
  padding: 10px !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 4px !important;
  background: var(--bg-secondary) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  border-radius: 12px !important;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5) !important;
  z-index: 1000 !important;
}

.theme-picker-panel.active {
  display: grid;
}

.theme-option {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  width: 100% !important;
  padding: 7px 9px !important;
  border: none !important;
  border-radius: 8px !important;
  background: transparent !important;
  color: var(--text-normal) !important;
  font-size: 12.5px !important;
  font-weight: 600 !important;
  text-align: left !important;
  cursor: pointer !important;
  transition: background 0.15s ease !important;
}

/* Neutral translucent grey rather than a fixed light/dark tint, so the
   hover and selected states stay visible on pale themes (Mint Apple,
   Desert Khaki, Light) and dark ones alike. */
.theme-option:hover {
  background: rgba(128, 128, 128, 0.2) !important;
}

.theme-option.selected {
  background: rgba(128, 128, 128, 0.32) !important;
}

.theme-option .color-swatch {
  width: 18px !important;
  height: 18px !important;
  padding: 0 !important;
  flex-shrink: 0 !important;
}

/* Background animation picker - same shape and behaviour as the theme
   picker, sitting immediately to its left. */
.anim-picker {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  margin-right: 14px !important;
  flex-shrink: 0 !important;
}

.anim-picker-btn {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 30px !important;
  height: 30px !important;
  padding: 0 !important;
  border-radius: 8px !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  background: transparent !important;
  color: var(--text-normal) !important;
  cursor: pointer !important;
  transition: border-color 0.2s ease, transform 0.2s ease !important;
}

.anim-picker-btn:hover {
  border-color: rgba(255, 255, 255, 0.5) !important;
  transform: scale(1.08) !important;
}

.anim-picker-btn svg {
  width: 16px !important;
  height: 16px !important;
}

.anim-picker-panel {
  display: none;
  position: absolute !important;
  top: 100% !important;
  right: 0 !important;
  margin-top: 12px !important;
  width: 230px !important;
  padding: 10px !important;
  flex-direction: column !important;
  gap: 4px !important;
  background: var(--bg-secondary) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  border-radius: 12px !important;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5) !important;
  z-index: 1000 !important;
}

.anim-picker-panel.active {
  display: flex;
}

.anim-option {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  width: 100% !important;
  padding: 8px 10px !important;
  border: none !important;
  border-radius: 8px !important;
  background: transparent !important;
  color: var(--text-normal) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  text-align: left !important;
  cursor: pointer !important;
  transition: background 0.15s ease !important;
}

.anim-option:hover {
  background: rgba(128, 128, 128, 0.2) !important;
}

.anim-option.selected {
  background: rgba(128, 128, 128, 0.32) !important;
}

/* Small preview dot so each entry reads as a look, not just a label. */
.anim-option-dot {
  width: 16px !important;
  height: 16px !important;
  border-radius: 50% !important;
  flex-shrink: 0 !important;
  background: var(--bg-primary) !important;
}

h1,
h2,
h3,
h4 {
  text-shadow: none !important;
  font-weight: 800;
  letter-spacing: -1px;
}

/* Sidebar Profile Block */






/* Sidebar Navigation Controls */






/* Hamburger Toggle for Sidebar */


/* Theme Toggle Button */
.theme-menu-container {
  position: absolute;
  top: 20px;
  right: 20px;
  z-index: 1000;
}

.theme-toggle {
  width: 45px;
  height: 45px;
  background: var(--bg-primary) !important;
  border-radius: 50% !important;
  border: 2px solid var(--text-normal) !important;
  color: var(--text-normal);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
  transition: transform 0.2s ease, color 0.3s ease;
}

.theme-toggle:hover {
  transform: scale(1.1);
}

.hide-inner-icon svg,
.hide-inner-icon i,
.hide-inner-icon img {
  display: none !important;
}

.palette-menu {
  position: absolute;
  top: 55px;
  right: 0;
  background-color: var(--sidebar-bg);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  padding: 15px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
  opacity: 1;
  transition: opacity 0.2s ease;
  width: 200px;
}

.palette-menu.hidden {
  display: none;
  opacity: 0;
}

.color-swatch {
  position: relative;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  /* Discord uses rounded squares */
  border: 2px solid transparent;
  cursor: pointer;
  transition: border 0.2s;
}

.color-swatch.active::after {
  content: '✓';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #ffffff;
  font-size: 16px;
  font-weight: bold;
  text-shadow: 0 0 4px rgba(0, 0, 0, 0.8);
  pointer-events: none;
}

.color-swatch:hover {
  border: 2px solid #ffffff;
}

.swatch-default {
  background: #313338;
}

.swatch-light {
  background: #ffffff;
  border: 1px solid #ccc;
}

/* Each swatch previews its theme's exact --bg-primary value, so the dot in
   the picker always matches what you actually get. */
.swatch-midnight { background: linear-gradient(135deg, #111823, #1e2636); }
.swatch-crimson { background: linear-gradient(135deg, #7a1d1d, #210a0a); }
.swatch-forest { background: linear-gradient(135deg, #2c5e3d, #0e1f13); }
.swatch-ocean { background: linear-gradient(135deg, #091f2c, #05141c); }
.swatch-amethyst { background: linear-gradient(135deg, #2b173b, #43245c); }
.swatch-sunset { background: linear-gradient(135deg, #4d230e, #7a3a19); }
.swatch-slate { background: linear-gradient(135deg, #20222e, #313547); }
.swatch-chroma { background: linear-gradient(135deg, #1a0b2e, #2b1154); }
.swatch-retro { background: linear-gradient(135deg, #3d0e2c, #611545); }
.swatch-mint { background: linear-gradient(135deg, #c4e4d5, #e0f2e9); }
.swatch-cherry { background: linear-gradient(135deg, #f4c2c2, #fce4e4); }
.swatch-lavender { background: linear-gradient(135deg, #d3c4e3, #e8dff0); }
.swatch-desert { background: linear-gradient(135deg, #f3d5b5, #fae9d4); }

.swatch-ami {
  background: linear-gradient(135deg, #0a0a0c, #2a0813);
  border: 1px solid #4a1525;
}

/* Banner Section Link Wrap */
.banner-link {
  display: block;
  text-decoration: none;
  width: 100vw;
  margin-left: -280px;
}

/* Massive Banner Section */
.banner {
  width: 100%;
  height: 350px;
  background-image: url('https://images.unsplash.com/photo-1618005182384-a83a8bd57fbe?q=80&w=2564&auto=format&fit=crop');
  background-size: cover;
  background-position: center;
  position: relative;
  -webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 1) 80%, rgba(0, 0, 0, 0) 100%);
  mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 1) 80%, rgba(0, 0, 0, 0) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
}

.banner::before {
  content: '';
  position: absolute;
  inset: 0;
  background-color: var(--banner-overlay);
  transition: background-color 0.3s ease;
}

.banner-header {
  position: relative;
  font-size: 8rem;
  font-weight: 900;
  letter-spacing: 5px;
  color: white;
  text-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
  margin: 0;
}

/* Single Log Viewer Message Layouts */
.msg-row {
  display: flex;
  gap: 14px;
  width: 100%;
  align-items: flex-start;
}

.msg-row-user {
  justify-content: flex-start;
}

.msg-row-staff {
  justify-content: flex-end;
  flex-direction: row-reverse;
}

.chat-avatar {
  width: 50px !important;
  height: 50px !important;
  border-radius: 50%;
  flex-shrink: 0 !important;
  object-fit: cover;
}

/* Welcome Overlay Animation */
.welcome-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: #000;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 4rem;
  font-weight: bold;
}

.intro-welcome {
  opacity: 0;
  text-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
}

.intro-to {
  opacity: 0;
  font-size: 3rem;
  margin-top: 15px;
  text-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
}

.chat-author span {
  font-size: 0.8rem;
  color: var(--text-color);
  opacity: 0.6;
  margin-left: 10px;
}

#back-to-top {
  position: fixed;
  bottom: 30px;
  right: 30px;
  background: color-mix(in srgb, var(--bg-secondary) 80%, transparent);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  width: 60px !important;
  height: 60px !important;
  font-size: 24px !important;
  border-radius: 50%;
  color: var(--text-normal);
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease;
  z-index: 9999 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer;
}

#back-to-top.show {
  opacity: 1;
  visibility: visible;
}

.msg-row img:not(.chat-avatar) {
  width: 350px !important;
  height: 250px !important;
  object-fit: cover !important;
  border-radius: 8px !important;
  display: block !important;
  margin-top: 12px !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

/* Target the known wrappers specifically */
html body .msg-user h1,
html body .msg-user h2,
html body .msg-user h3,
html body .msg-user h4,
html body .msg-user strong,
html body .msg-user span,
html body .msg-user .username,
html body .msg-staff h1,
html body .msg-staff h2,
html body .msg-staff h3,
html body .msg-staff h4,
html body .msg-staff strong,
html body .msg-staff span,
html body .msg-staff .username,
html body .msg-internal h1,
html body .msg-internal h2,
html body .msg-internal h3,
html body .msg-internal h4,
html body .msg-internal strong,
html body .msg-internal span,
html body .msg-internal .username {
  color: var(--text-normal) !important;
  opacity: 1 !important;
  filter: none !important;
}

/* Re-protect the badge styles */
html body .msg-user .msg-badge {
  background-color: #5865F2 !important;
  color: #ffffff !important;
  opacity: 1 !important;
}

html body .msg-staff .msg-badge {
  background-color: #00FFFF !important;
  color: #000000 !important;
  opacity: 1 !important;
}

html body .msg-system .msg-badge,
html body .msg-internal .msg-badge {
  background-color: #ed4245 !important;
  color: #ffffff !important;
  opacity: 1 !important;
}

.intro-ami {
  font-size: 7rem;
  color: var(--accent-color);
  opacity: 0;
  margin-top: 25px;
  font-weight: 900;
  text-shadow: 0 0 20px var(--accent-color);
}

/* Keyframes for Welcome Animation handled in JS classes */
.anim-fade-in {
  animation: fadeIn 1s forwards;
}

.anim-fade-in-delayed {
  animation: fadeIn 1s forwards;
  animation-delay: 1s;
}

.anim-ami-in {
  animation: amiIn 2s forwards;
  animation-delay: 2s;
}

.anim-overlay-out {
  animation: overlayOut 1s forwards;
  animation-delay: 4s;
  pointer-events: none;
}

@keyframes fadeIn {
  to {
    opacity: 1;
  }
}

@keyframes amiIn {
  0% {
    opacity: 0;
    transform: scale(0.8) translateY(0);
  }

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

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

  100% {
    opacity: 0;
    transform: scale(0.6) translateY(-40vh);
  }
}

@keyframes overlayOut {
  to {
    opacity: 0;
    visibility: hidden;
  }
}

/* Loading Throbber */
.throbber {
  display: inline-flex;
  gap: 4px;
}

.throbber span {
  width: 8px;
  height: 8px;
  background-color: var(--text-color);
  border-radius: 50%;
  animation: bounce 1.4s infinite ease-in-out both;
}

.throbber span:nth-child(1) {
  animation-delay: -0.32s;
}

.throbber span:nth-child(2) {
  animation-delay: -0.16s;
}

@keyframes bounce {

  0%,
  80%,
  100% {
    transform: scale(0);
  }

  40% {
    transform: scale(1);
  }
}

/* HUD Container for main data */
.dashboard-grid {
  padding: 40px;
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 30px;
  max-width: 1400px;
  margin: 0 auto;
  width: 100%;
  box-sizing: border-box;
}

/* Individual HUD Sections */
.dashboard-section {
  border-radius: 12px;
  padding: 30px;
  box-shadow: none;
  transition: background-color 0.3s ease;
}

.dashboard-section h2 {
  margin-top: 0;
  margin-bottom: 25px;
  font-size: 1.5rem;
  color: var(--text-color);
}

/* Quick Stats Grid */
.quick-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 20px;
}

.stat-card {
  background: rgba(128, 128, 128, 0.15) !important;
  border: 1px solid rgba(128, 128, 128, 0.3) !important;
  color: var(--text-normal) !important;
  padding: 20px;
  border-radius: 8px;
  text-align: center;
  cursor: pointer;
  text-decoration: none;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.stat-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.stat-card h3 {
  margin: 0 0 10px 0;
  font-size: 1rem;
  color: var(--text-color);
  opacity: 0.8;
}

.stat-card p {
  margin: 0;
  font-size: 2.5rem;
  font-weight: bold;
  color: var(--text-color);
}

/* Activity Feed List */
.activity-feed-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.activity-item {
  background: rgba(128, 128, 128, 0.15) !important;
  border: 1px solid rgba(128, 128, 128, 0.3) !important;
  color: var(--text-normal) !important;
  padding: 15px 20px;
  border-radius: 8px;
  font-size: 0.95rem;
  border-left: 4px solid var(--accent-color) !important;
  transition: background-color 0.3s ease;
}

/* Responsive adjustments */
@media (max-width: 1024px) {
  .dashboard-grid {
    grid-template-columns: 1fr;
    padding: 20px;
  }
}

@media (max-width: 768px) {
  .dashboard-grid {
    padding: 10px;
  }
}

/* Chat Viewer Layout */
.chat-container {
  display: flex;
  flex-direction: column;
  gap: 15px;
  padding: 20px;
  background-color: var(--card-bg);
  border-radius: 12px;
  max-height: 800px;
  overflow-y: auto;
}

.msg-user {
  align-self: flex-start;
  background: color-mix(in srgb, var(--bg-secondary) 60%, transparent) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  border: 1px solid rgba(255, 255, 255, 0.05) !important;
  border-left: 4px solid #5865F2 !important;
  border-radius: 8px !important;
  padding: 12px !important;
  display: flex;
  gap: 15px;
  max-width: 80%;
  min-width: 0;
}

.msg-staff {
  align-self: flex-end;
  flex-direction: row-reverse;
  background: var(--theme-blue, rgba(88, 101, 242, 0.15));
  border-bottom-right-radius: 2px;
  display: flex;
  gap: 15px;
  padding: 15px 20px;
  border-radius: 12px;
  max-width: 80%;
  min-width: 0;
}

.msg-internal {
  align-self: flex-end;
  flex-direction: row-reverse;
  display: flex;
  gap: 15px;
  max-width: 80%;
  min-width: 0;
  background: color-mix(in srgb, var(--bg-secondary) 60%, transparent) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  border: 1px solid rgba(255, 255, 255, 0.05) !important;
  border-right: 4px solid #faa61a !important;
  border-radius: 8px !important;
  padding: 12px !important;
}

.msg-system {
  align-self: stretch;
  border-left: 4px solid #ed4245;
  background: #2b2d31;
  border-radius: 8px;
  padding: 10px 20px;
  font-size: 0.9rem;
  max-width: 100%;
  display: flex;
  gap: 15px;
}

.msg-badge {
  border-radius: 4px !important;
  padding: 2px 4px !important;
  font-size: 10px !important;
  font-weight: 800 !important;
  display: inline-flex !important;
  align-items: center !important;
  margin-left: 6px !important;
  vertical-align: middle !important;
  line-height: 1.2 !important;
  text-transform: uppercase !important;
}

.msg-user .msg-badge {
  background-color: #5865F2 !important;
  color: #ffffff !important;
}

.msg-staff .msg-badge {
  background-color: #00FFFF !important;
  color: #000000 !important;
}

.msg-system .msg-badge,
.msg-internal .msg-badge {
  background-color: #ed4245 !important;
  color: #ffffff !important;
}

/* Deleted/Edited are event badges, not message-type badges — they keep a
   fixed, always-recognizable color regardless of which bubble type they're
   attached to, overriding the per-container rules above. */
html body .msg-badge.msg-badge-deleted {
  background-color: #ed4245 !important;
  color: #ffffff !important;
  opacity: 1 !important;
}

html body .msg-badge.msg-badge-edited {
  background-color: #5865F2 !important;
  color: #ffffff !important;
  opacity: 1 !important;
}


.chat-author {
  font-weight: bold;
  font-size: 0.95rem;
  color: var(--text-color);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 15px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  padding-bottom: 5px;
}

.chat-timestamp {
  font-size: 0.75rem;
  opacity: 0.6;
  font-weight: normal;
}

.chat-content {
  font-size: 1rem;
  line-height: 1.5;
  word-wrap: break-word;
  white-space: pre-wrap;
}

/* Markdown parsing styles */
.chat-content strong {
  font-weight: bold;
}

.chat-content em {
  font-style: italic;
}

.chat-content span[style*="text-decoration: underline"] {
  text-decoration: underline;
}

.chat-attachment {
  max-width: 100%;
  border-radius: 8px;
  margin-top: 10px;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.discord-emoji {
  width: 22px;
  height: 22px;
  vertical-align: bottom;
  object-fit: contain;
  margin: 0 1px;
}

.chat-spacer {
  min-height: 100px;
}

/* UI Container Override Variables */
.card,
.server-card,
.palette-menu,
.chat-container {
  background: color-mix(in srgb, var(--bg-secondary) 60%, transparent) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  border: 1px solid rgba(255, 255, 255, 0.05) !important;
  color: var(--text-normal) !important;
}

/* Form Elements */
html body select,
html body input,
html body textarea {
  background-color: var(--bg-secondary) !important;
  background-image: none !important;
  color: var(--text-normal) !important;
  border: 1px solid var(--text-normal) !important;
  padding: 8px 12px !important;
  border-radius: 4px !important;
  outline: none !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  appearance: none !important;
  box-shadow: none !important;
}

html body select option {
  background-color: var(--bg-secondary) !important;
  color: var(--text-normal) !important;
}

/* The rule above strips native appearance from every <input>, including
   checkboxes, but never drew a replacement checked-state indicator - so
   checkboxes always looked empty regardless of state. Give them one. */
html body input[type="checkbox"] {
  width: 18px !important;
  height: 18px !important;
  padding: 0 !important;
  display: inline-block !important;
  position: relative !important;
  cursor: pointer !important;
  flex-shrink: 0 !important;
  vertical-align: middle !important;
}

html body input[type="checkbox"]:checked {
  background-color: var(--accent-color) !important;
  border-color: var(--accent-color) !important;
}

html body input[type="checkbox"]:checked::after {
  content: "";
  position: absolute;
  left: 5px;
  top: 1px;
  width: 5px;
  height: 10px;
  border: solid #ffffff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

/* Updating Live Indicator */
.live-indicator-wrapper {
  display: flex !important;
  justify-content: center !important;
  margin-top: 20px !important;
  margin-bottom: 30px !important;
  width: 100% !important;
}

.live-indicator {
  background: color-mix(in srgb, var(--bg-secondary) 60%, transparent) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  border: 1px solid rgba(255, 255, 255, 0.05) !important;
  border-radius: 20px !important;
  padding: 6px 16px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
  color: var(--text-normal) !important;
  font-size: 11px !important;
  font-weight: bold !important;
  text-transform: uppercase !important;
  letter-spacing: 1px !important;
}

.live-dot {
  width: 8px !important;
  height: 8px !important;
  background-color: #43b581 !important;
  border-radius: 50% !important;
  box-shadow: 0 0 8px #43b581 !important;
  animation: live-pulse 2s infinite !important;
}

/* Page Top Bar */
.page-topbar {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  padding: 0 0 30px 0 !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
  margin-bottom: 30px !important;
}

.breadcrumbs {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  letter-spacing: 0.5px !important;
  text-transform: uppercase !important;
}

/* Breadcrumbs sit directly on the animated background, not on a card, so
   they have to follow the theme's own text colour. These were hardcoded
   white, which only read correctly while the old orbs left dark gaps behind
   them - now that the background paints the theme's --bg-primary across the
   whole viewport, white-on-white made the path invisible on the pale themes.
   Deriving the muted tones from --text-normal fixes every theme at once,
   which also retires the old light/cherry "force white" special case. */
.breadcrumbs .hub-name {
  color: color-mix(in srgb, var(--text-normal) 55%, transparent) !important;
}

.breadcrumbs .separator {
  color: color-mix(in srgb, var(--text-normal) 30%, transparent) !important;
}

.breadcrumbs .current-page {
  color: var(--text-normal) !important;
  font-weight: 800 !important;
}

.breadcrumb-link {
  text-decoration: none !important;
  transition: color 0.2s ease !important;
  color: color-mix(in srgb, var(--text-normal) 55%, transparent) !important;
  font-size: inherit !important;
  font-weight: inherit !important;
  padding: 6px 16px !important;
  border-radius: 50px !important;
  border: 1px solid transparent !important;
  background: transparent !important;
  transition: all 0.3s ease !important;
  cursor: pointer !important;
}

.breadcrumb-link[href]:hover {
  background: color-mix(in srgb, var(--text-normal) 8%, transparent) !important;
  border-color: color-mix(in srgb, var(--text-normal) 15%, transparent) !important;
  backdrop-filter: blur(10px) !important;
  color: var(--text-normal) !important;
}

.breadcrumb-link:not([href]) {
  color: var(--text-normal) !important;
  font-weight: 800 !important;
  cursor: default !important;
}

/* Same reasoning as the breadcrumbs it sits beside - this arrow is on the
   bare background, so it can't assume a dark backdrop. */
.back-nav-btn {
  color: color-mix(in srgb, var(--text-normal) 55%, transparent) !important;
  transition: all 0.2s ease !important;
  display: flex !important;
  align-items: center !important;
}

.back-nav-btn:hover {
  color: var(--text-normal) !important;
  transform: translateX(-3px) !important;
}

/* Chat Terminal */
.chat-terminal {
  padding: 30px !important;
  min-height: 60vh !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 20px !important;
  /* Forces spacing between message rows */
}

@keyframes slideUpFade {
  from {
    opacity: 0;
    transform: translateY(15px);
  }

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

.msg-row,
.msg-user,
.msg-staff,
.msg-internal {
  animation: slideUpFade 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards !important;
  margin-bottom: 0 !important;
  /* Rely on .chat-terminal gap instead */
  border-radius: 16px !important;
  /* Upgrade from 8px to squircle standard */
}

/* The Glass Grid */
.server-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)) !important;
  gap: 24px !important;
  width: 100% !important;
}

.server-card {
  background: color-mix(in srgb, var(--bg-secondary) 50%, transparent) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 16px !important;
  padding: 30px 20px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  text-align: center !important;
  gap: 16px !important;
  text-decoration: none !important;
}

.server-card img {
  width: 80px !important;
  height: 80px !important;
  border-radius: 50% !important;
  object-fit: cover !important;
  border: 2px solid rgba(255, 255, 255, 0.1) !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3) !important;
  margin-bottom: 8px !important;
}

.server-card h4 {
  font-size: 16px !important;
  font-weight: 700 !important;
  margin: 0 !important;
  color: var(--text-normal) !important;
}

.server-card .btn {
  width: 100% !important;
  background: var(--bg-primary) !important;
  color: var(--text-normal) !important;
  border: none !important;
  padding: 12px !important;
  margin-top: auto !important;
  /* Pushes button to bottom */
  text-decoration: none !important;
}

/* Glass Panels & Settings Hero */
.glass-panel {
  background: color-mix(in srgb, var(--bg-secondary) 50%, transparent) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 16px !important;
  padding: 24px !important;
  margin-bottom: 24px !important;
}

.settings-hero {
  display: flex !important;
  align-items: center !important;
  gap: 20px !important;
}

.settings-hero img {
  width: 64px !important;
  height: 64px !important;
  border-radius: 16px !important;
  /* Squircle shape */
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2) !important;
}

.settings-hero h2 {
  margin: 0 !important;
  font-weight: 800 !important;
  font-size: 24px !important;
}

/* 2-Column Form Grid */
.form-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)) !important;
  gap: 20px !important;
}

/* Premium Form Controls */
.form-group label {
  display: block !important;
  font-size: 11px !important;
  text-transform: uppercase !important;
  letter-spacing: 1px !important;
  font-weight: 700 !important;
  color: rgba(255, 255, 255, 0.5) !important;
  margin-bottom: 8px !important;
}

.form-group input,
.form-group select,
.form-group textarea {
  width: 100% !important;
  background: color-mix(in srgb, var(--bg-main) 20%, rgba(0, 0, 0, 0.2)) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: 12px !important;
  padding: 14px 16px !important;
  color: var(--text-normal) !important;
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  transition: all 0.3s ease !important;
  box-sizing: border-box !important;
}

/* The interactive glow state */
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  outline: none !important;
  border-color: var(--bg-primary) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--bg-primary) 30%, transparent) !important;
  background: color-mix(in srgb, var(--bg-main) 40%, rgba(0, 0, 0, 0.4)) !important;
}

/* Ensure dropdown options remain readable */
.form-group select option {
  background: #1e1e24 !important;
  color: #ffffff !important;
}

@keyframes live-pulse {
  0% {
    transform: scale(0.95);
    opacity: 0.7;
    box-shadow: 0 0 5px #43b581;
  }

  50% {
    transform: scale(1.1);
    opacity: 1;
    box-shadow: 0 0 12px #43b581;
  }

  100% {
    transform: scale(0.95);
    opacity: 0.7;
    box-shadow: 0 0 5px #43b581;
  }
}

/* Micro-Interactions & "Juice" */
.dashboard-panel,
.settings-section,
.server-card {
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s ease !important;
}

.dashboard-panel:hover,
.settings-section:hover,
.server-card:hover {
  transform: translateY(-4px) !important;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15), 0 0 20px color-mix(in srgb, var(--bg-primary) 30%, transparent) !important;
  border-color: rgba(255, 255, 255, 0.15) !important;
}

button,
.btn {
  border-radius: 50px !important;
  /* Pill shape */
  transition: all 0.2s ease !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  font-size: 13px !important;
}

button:active,
.btn:active,
.color-swatch:active {
  transform: scale(0.95) !important;
  /* Satisfying click depression */
}

/* Mobile Responsiveness */
@media (max-width: 900px) {
  body {
    flex-direction: column !important;
  }

  .sidebar {
    height: auto !important;
    margin: 16px !important;
    padding: 16px !important;
    display: flex !important;
    justify-content: space-between !important;
    /* Spreads out nav items */
    align-items: center !important;
  }

  .main-content {
    margin: 0 16px 16px 16px !important;
    height: auto !important;
    flex-grow: 1 !important;
  }

  .form-grid {
    grid-template-columns: 1fr !important;
    /* Forces inputs to full width on mobile */
  }
}

.dashboard-layout {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  height: 100% !important;
  padding: 0 8% !important;
  box-sizing: border-box !important;
  flex-wrap: wrap !important;
  width: 100% !important;
}

.dashboard-cards-column {
  display: flex !important;
  flex-direction: column !important;
  gap: 32px !important;
  width: 45% !important;
  z-index: 2 !important;
}

.quick-actions-row {
  display: flex !important;
  gap: 24px !important;
  flex-wrap: wrap !important;
}

.glass-card {
  background: color-mix(in srgb, var(--bg-secondary) 40%, transparent) !important;
  backdrop-filter: blur(24px) !important;
  -webkit-backdrop-filter: blur(24px) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 24px !important;
  padding: 32px !important;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.15) !important;
  color: var(--text-normal) !important;
  /* Force high-contrast visibility */
  text-decoration: none !important;
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.4s ease, border-color 0.4s ease !important;
  display: block !important;
}

.glass-card:hover {
  transform: translateY(-8px) scale(1.02) !important;
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.3), 0 0 0 1px var(--bg-primary) !important;
  border-color: var(--bg-primary) !important;
}

.card-title {
  font-size: 14px !important;
  text-transform: uppercase !important;
  letter-spacing: 2px !important;
  font-weight: 800 !important;
  color: rgba(255, 255, 255, 0.6) !important;
  margin-bottom: 16px !important;
}

.mascot-panel {
  width: 50% !important;
  height: 100% !important;
  display: flex !important;
  justify-content: flex-end !important;
  align-items: flex-end !important;
  /* Pushes content to bottom */
  padding-bottom: 0 !important;
  margin-bottom: 0 !important;
  position: relative !important;
  z-index: 1 !important;
}

.ami-render {
  max-height: 90vh !important;
  object-position: bottom right !important;
  display: block !important;
  margin-bottom: 0 !important;
  object-fit: contain !important;
  filter: drop-shadow(0 0 40px color-mix(in srgb, var(--bg-primary) 40%, transparent)) !important;
  transition: filter 1s ease !important;
  transform: translate(20vw, -33px) !important;
}

@keyframes slideInBlur {
  0% {
    opacity: 0;
    transform: translateX(-60px);
    filter: blur(12px);
  }

  100% {
    opacity: 1;
    transform: translateX(0);
    filter: blur(0);
  }
}

@keyframes driftInRight {
  0% {
    opacity: 0;
    transform: translateX(60px);
  }

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

.dashboard-cards-column .glass-card {
  opacity: 0;
  /* Hidden before animation */
  animation: slideInBlur 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards !important;
}

.mascot-panel {
  opacity: 0;
  animation: driftInRight 1.2s cubic-bezier(0.16, 1, 0.3, 1) forwards !important;
}

/* Ticket List Layout */
.ticket-list-page {
  padding: 0 5% 50px 5% !important;
  min-height: 100% !important;
  height: auto !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 32px !important;
  animation: pageFadeIn 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards !important;
}

.ticket-list-header h2 {
  font-size: 28px !important;
  font-weight: 800 !important;
  letter-spacing: -1px !important;
  margin-bottom: 0 !important;
}

.ticket-feed-grid {
  display: grid !important;
  grid-template-columns: 1fr !important;
  /* Forces 100% wide PC panels */
  gap: 16px !important;
}

/* Interactive Ticket Tiles */
.ticket-tile {
  background: color-mix(in srgb, var(--bg-secondary) 30%, transparent) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  border: 1px solid rgba(255, 255, 255, 0.05) !important;
  border-radius: 20px !important;
  padding: 24px !important;
  display: flex !important;
  align-items: center !important;
  gap: 16px !important;
  text-decoration: none !important;
  color: var(--text-normal) !important;
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.3s ease, border-color 0.3s ease !important;
  position: relative !important;
  overflow: hidden !important;
}

.ticket-tile:hover {
  transform: translateY(-5px) scale(1.02) !important;
  background: color-mix(in srgb, var(--bg-secondary) 50%, transparent) !important;
}

.tile-content h3 {
  margin: 0 0 4px 0 !important;
  font-size: 18px !important;
  font-weight: 700 !important;
}

.tile-content span {
  display: block !important;
  font-size: 12px !important;
  color: rgba(255, 255, 255, 0.6) !important;
  font-weight: 600 !important;
}

/* Styles for active/open tickets */
.ticket-tile.status-open {
  border-color: rgba(67, 181, 129, 0.3) !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2) !important;
}

.ticket-tile.status-open:hover {
  border-color: #43b581 !important;
  box-shadow: 0 15px 40px rgba(67, 181, 129, 0.15) !important;
}

.ticket-tile.status-open .tile-status-indicator {
  width: 12px !important;
  height: 12px !important;
  border-radius: 50% !important;
  background-color: #43b581 !important;
  box-shadow: 0 0 12px #43b581 !important;
  flex-shrink: 0 !important;
}

/* Styles for closed/inactive tickets */
.ticket-tile.status-closed {
  opacity: 0.6 !important;
  border-color: rgba(255, 255, 255, 0.05) !important;
}

.ticket-tile.status-closed:hover {
  opacity: 1 !important;
  border-color: rgba(255, 255, 255, 0.15) !important;
}

.ticket-tile.status-closed .tile-status-indicator {
  width: 12px !important;
  height: 12px !important;
  border-radius: 50% !important;
  background-color: rgba(255, 255, 255, 0.2) !important;
  flex-shrink: 0 !important;
}

.tile-action {
  margin-left: auto !important;
  color: rgba(255, 255, 255, 0.3) !important;
  transition: color 0.3s ease !important;
}

.ticket-tile:hover .tile-action {
  color: var(--text-normal) !important;
}

.app-pane {
  width: 100% !important;
  height: 100% !important;
  padding: 0 8% !important;
  box-sizing: border-box !important;
  overflow-y: auto !important;
  padding-bottom: 120px !important;
  /* Prevents floating dock overlap */
  animation: pageFadeIn 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards !important;
}

/* Bespoke scrollbar for internal panes */
.app-pane::-webkit-scrollbar,
.chat-messages::-webkit-scrollbar {
  width: 6px !important;
}

.app-pane::-webkit-scrollbar-track,
.chat-messages::-webkit-scrollbar-track {
  background: transparent !important;
}

.app-pane::-webkit-scrollbar-thumb,
.chat-messages::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.1) !important;
  border-radius: 10px !important;
}

.app-pane::-webkit-scrollbar-thumb:hover,
.chat-messages::-webkit-scrollbar-thumb:hover {
  background: var(--bg-primary) !important;
}

.chat-window {
  width: 95% !important;
  max-width: 1600px !important;
  margin: 0 auto !important;
  height: calc(100% - 24px) !important;
  /* Full height minus a tiny margin */
  background: color-mix(in srgb, var(--bg-secondary) 25%, transparent) !important;
  backdrop-filter: blur(30px) !important;
  -webkit-backdrop-filter: blur(30px) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 24px !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
  /* Locks the container */
  animation: pageFadeIn 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards !important;
  margin-bottom: 100px !important;
  /* Clears dock */
}

.chat-header {
  padding: 24px 32px !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  background: rgba(0, 0, 0, 0.2) !important;
  z-index: 10 !important;
}

.chat-messages {
  flex-grow: 1 !important;
  overflow-y: auto !important;
  /* ONLY the messages scroll */
  padding: 32px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 16px !important;
}

.chat-footer {
  padding: 16px 32px !important;
  background: rgba(0, 0, 0, 0.2) !important;
  border-top: 1px solid rgba(255, 255, 255, 0.05) !important;
}

.codex-filters {
  display: flex !important;
  gap: 12px !important;
  margin-bottom: 32px !important;
}

.filter-pill {
  background: rgba(255, 255, 255, 0.05) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  color: rgba(255, 255, 255, 0.6) !important;
  padding: 8px 20px !important;
  border-radius: 50px !important;
  cursor: pointer !important;
  transition: all 0.3s ease !important;
}

.filter-pill:hover,
.filter-pill.active {
  background: var(--bg-primary) !important;
  color: var(--text-normal) !important;
  border-color: var(--bg-primary) !important;
  box-shadow: 0 4px 15px color-mix(in srgb, var(--bg-primary) 40%, transparent) !important;
}

.codex-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)) !important;
  gap: 24px !important;
  padding-bottom: 80px !important;
}

.command-card {
  background: color-mix(in srgb, var(--bg-secondary) 20%, transparent) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: 16px !important;
  padding: 24px !important;
  position: relative !important;
  overflow: hidden !important;
  transition: transform 0.4s ease, border-color 0.4s ease !important;
}

.command-card:hover {
  transform: translateY(-5px) !important;
  border-color: rgba(255, 255, 255, 0.3) !important;
}

.card-glow {
  position: absolute !important;
  top: -50% !important;
  left: -50% !important;
  width: 200% !important;
  height: 200% !important;
  background: radial-gradient(circle, color-mix(in srgb, var(--bg-primary) 15%, transparent) 0%, transparent 70%) !important;
  opacity: 0;
  transition: opacity 0.4s ease !important;
  pointer-events: none !important;
}

.command-card:hover .card-glow {
  opacity: 1 !important;
}

.cmd-badge {
  display: inline-block !important;
  font-size: 10px !important;
  text-transform: uppercase !important;
  letter-spacing: 1px !important;
  font-weight: 800 !important;
  padding: 4px 10px !important;
  border-radius: 8px !important;
  margin-bottom: 16px !important;
}

.mod-badge {
  background: rgba(237, 66, 69, 0.2) !important;
  color: #ed4245 !important;
}

.util-badge {
  background: rgba(88, 101, 242, 0.2) !important;
  color: #5865F2 !important;
}

/* One color per custom permission level (0-5), matching the FAQ's level list
   on the Informations page — escalating from calm (Participant) to severe
   (System Admin) so the badge's color reinforces the level number next to it. */
.level-badge-0 {
  background: rgba(153, 166, 181, 0.2) !important;
  color: #99aab5 !important;
}

.level-badge-1 {
  background: rgba(87, 242, 135, 0.2) !important;
  color: #57F287 !important;
}

.level-badge-2 {
  background: rgba(254, 231, 92, 0.2) !important;
  color: #fee75c !important;
}

.level-badge-3 {
  background: rgba(88, 101, 242, 0.2) !important;
  color: #5865F2 !important;
}

.level-badge-4 {
  background: rgba(155, 89, 182, 0.2) !important;
  color: #b57edc !important;
}

.level-badge-5 {
  background: rgba(237, 66, 69, 0.2) !important;
  color: #ed4245 !important;
}

.command-card h3 {
  margin: 0 0 12px 0 !important;
  font-size: 20px !important;
  font-family: monospace !important;
}

.command-card p {
  font-size: 14px !important;
  color: rgba(255, 255, 255, 0.7) !important;
  line-height: 1.5 !important;
  margin-bottom: 20px !important;
}

.cmd-syntax {
  background: rgba(0, 0, 0, 0.4) !important;
  padding: 10px 12px !important;
  border-radius: 8px !important;
  font-family: monospace !important;
  font-size: 12px !important;
  color: rgba(255, 255, 255, 0.5) !important;
}

.page-transition-overlay {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  background: #09090b !important;
  z-index: 99999 !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  pointer-events: none !important;
  animation: pageFadeOut 0.8s cubic-bezier(0.7, 0, 0.3, 1) forwards !important;
}

.dashboard-page-transition {
  animation: pageFadeOut 1.2s cubic-bezier(0.7, 0, 0.3, 1) 1.5s forwards !important;
  /* Delays fade to show text */
}

.boot-text {
  color: #ffffff !important;
  font-size: 32px !important;
  font-weight: 800 !important;
  letter-spacing: -1px !important;
  opacity: 0;
  animation: textFadeIn 0.8s ease forwards !important;
}

.boot-text span {
  color: var(--bg-primary) !important;
}

@keyframes pageFadeOut {
  0% {
    opacity: 1;
  }

  100% {
    opacity: 0;
    visibility: hidden;
  }
}

@keyframes textFadeIn {
  0% {
    opacity: 0;
    transform: translateY(10px);
  }

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

/* Intercept class applied by JS for page transitions */
body.navigating-away .page-transition-overlay {
  animation: none !important;
  opacity: 0;
  visibility: visible !important;
  transition: opacity 0.4s ease !important;
}

body.navigating-away .page-transition-overlay.fade-to-black {
  opacity: 1 !important;
}

.color-swatch {
  position: relative !important;
}

.color-swatch.active {
  border: 2px solid #ffffff !important;
  transform: scale(1.15) !important;
}

.color-swatch.active::after {
  content: '✓' !important;
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  color: white !important;
  font-size: 10px !important;
  font-weight: 900 !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8) !important;
}

.tilt-card {
  will-change: transform !important;
  transform-style: preserve-3d !important;
  /* Ensures the child content inside the card doesn't glitch during 3D transform */
  -webkit-font-smoothing: subpixel-antialiased !important;
}

.profile-header-centered {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  margin: 32px 0 48px 0 !important;
}

.profile-header-centered img {
  width: 100px !important;
  height: 100px !important;
  border-radius: 50% !important;
  margin-bottom: 16px !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4) !important;
  border: 2px solid rgba(255, 255, 255, 0.1) !important;
}

.profile-header-centered h1 {
  font-size: 32px !important;
  font-weight: 800 !important;
  letter-spacing: -1px !important;
  margin: 0 !important;
}

.ticket-status-badge {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 4px 10px !important;
  border-radius: 50px !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  letter-spacing: 1px !important;
}

.ticket-status-badge.open {
  background: rgba(67, 181, 129, 0.15) !important;
  color: #43b581 !important;
  border: 1px solid rgba(67, 181, 129, 0.3) !important;
}

.ticket-status-badge.open .status-dot {
  width: 8px !important;
  height: 8px !important;
  background: #43b581 !important;
  border-radius: 50% !important;
  box-shadow: 0 0 8px #43b581 !important;
}

.ticket-status-badge.closed {
  background: rgba(237, 66, 69, 0.15) !important;
  color: #ed4245 !important;
  border: 1px solid rgba(237, 66, 69, 0.3) !important;
}

.ticket-status-badge.closed .status-dot {
  width: 8px !important;
  height: 8px !important;
  background: #ed4245 !important;
  border-radius: 50% !important;
  box-shadow: 0 0 8px #ed4245 !important;
}

/* Session's staff channel was deleted on Discord - still active, but
   waiting on a "Restore Ticket" or a 24h auto-close (see ExpirationManager). */
.ticket-status-badge.close-ready {
  background: rgba(250, 166, 26, 0.15) !important;
  color: #faa61a !important;
  border: 1px solid rgba(250, 166, 26, 0.3) !important;
}

.ticket-status-badge.close-ready .status-dot {
  width: 8px !important;
  height: 8px !important;
  background: #faa61a !important;
  border-radius: 50% !important;
  box-shadow: 0 0 8px #faa61a !important;
}

.back-link:hover {
  color: #ffffff !important;
}

fieldset,
.settings-group,
.form-group,
.settings-section,
legend {
  border: none !important;
  border-top: none !important;
  outline: none !important;
}

.activity-row {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  padding: 16px 20px !important;
  background: rgba(255, 255, 255, 0.03) !important;
  border: 1px solid rgba(255, 255, 255, 0.05) !important;
  border-radius: 12px !important;
  color: var(--text-normal) !important;
  text-decoration: none !important;
  transition: all 0.2s ease !important;
  margin-bottom: 8px !important;
}

.activity-row:hover {
  background: rgba(255, 255, 255, 0.08) !important;
  border-color: rgba(255, 255, 255, 0.15) !important;
  transform: translateX(4px) !important;
}

.view-history-btn {
  display: block !important;
  text-align: center !important;
  padding: 12px !important;
  background: color-mix(in srgb, var(--bg-primary) 20%, transparent) !important;
  color: var(--bg-primary) !important;
  border-radius: 8px !important;
  text-decoration: none !important;
  font-weight: 700 !important;
  margin-top: 16px !important;
  transition: background 0.2s, color 0.2s !important;
}

.view-history-btn:hover {
  background: var(--bg-primary) !important;
  color: #fff !important;
}

fieldset,
legend,
.settings-group,
.settings-section {
  border: none !important;
  border-top: none !important;
  border-bottom: none !important;
  border-left: none !important;
  border-right: none !important;
  outline: none !important;
  padding-inline-start: 0 !important;
  padding-inline-end: 0 !important;
  padding-block-start: 0 !important;
  padding-block-end: 0 !important;
  margin: 0 !important;
  min-width: 0 !important;
}

legend {
  display: block !important;
  width: 100% !important;
  margin-bottom: 16px !important;
}

.back-link {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  color: rgba(255, 255, 255, 0.5) !important;
  text-decoration: none !important;
  font-weight: 700 !important;
  margin-bottom: 24px !important;
  transition: color 0.2s !important;
  font-size: 14px !important;
  z-index: 50 !important;
  position: relative !important;
}

.back-link:hover {
  color: #ffffff !important;
}

/* public/css/style.css */
.server-card {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 24px !important;
  gap: 16px !important;
}

.server-card h3,
.server-card h2,
.server-card span {
  margin: 0 !important;
  text-align: center !important;
  /* Forces breathing room above the button */
  margin-bottom: 8px !important;
  line-height: 1.2 !important;
}

/* public/css/style.css */
.settings-form input,
.settings-form select,
.settings-form textarea {
  background: rgba(0, 0, 0, 0.2) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

/* public/css/style.css - ADD TO ABSOLUTE BOTTOM */

/* 1. Server Card Anti-Squish */
.server-card {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: space-between !important;
  min-height: 220px !important;
  padding: 24px 16px !important;
  gap: 16px !important;
}

.server-card-info {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 12px !important;
  width: 100% !important;
}

.server-card h4 {
  margin: 0 !important;
  text-align: center !important;
  font-size: 16px !important;
  line-height: 1.3 !important;
  width: 100% !important;
  word-wrap: break-word !important;
}

.server-card .btn {
  width: 100% !important;
  margin-top: auto !important;
  /* Forces button to the bottom */
  background: rgba(255, 255, 255, 0.08) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  padding: 10px !important;
  border-radius: 8px !important;
  color: var(--text-normal) !important;
  text-decoration: none !important;
  font-weight: 700 !important;
  font-size: 12px !important;
  text-transform: uppercase !important;
  transition: background 0.2s ease !important;
}

.server-card .btn:hover {
  background: rgba(255, 255, 255, 0.15) !important;
}

/* 2. View History Button Visibility */
.view-history-btn {
  display: block !important;
  text-align: center !important;
  padding: 12px 16px !important;
  background: rgba(255, 255, 255, 0.1) !important;
  color: #ffffff !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  border-radius: 8px !important;
  text-decoration: none !important;
  font-weight: 700 !important;
  margin-top: 16px !important;
  transition: background 0.2s ease, border-color 0.2s ease !important;
}

.view-history-btn:hover {
  background: rgba(255, 255, 255, 0.2) !important;
  border-color: rgba(255, 255, 255, 0.3) !important;
  color: #ffffff !important;
}

/* public/css/style.css */
/* Remove double-background from the form itself */
.settings-form {
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border: none !important;
}



/* Login Boot Screen */
.login-boot {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  background: #09090b !important;
  z-index: 999999 !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  transition: opacity 1s ease !important;
  opacity: 1 !important;
}

.login-boot.fade-out {
  opacity: 0;
  pointer-events: none !important;
}

.login-boot-card {
  opacity: 1;
  transform: scale(1);
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 20px !important;
  padding: 40px 60px !important;
  text-align: center !important;
  animation: loginBootPopIn 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards !important;
}

.login-boot-card:hover {
  transform: none !important;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.15) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
}

.login-boot-avatar {
  width: 80px !important;
  height: 80px !important;
  border-radius: 50% !important;
  border: 2px solid rgba(255, 255, 255, 0.3) !important;
  animation: loginBootPulse 1.5s infinite !important;
  transition: border-color 0.4s ease, box-shadow 0.4s ease !important;
}

.login-boot-avatar.fallback {
  background: var(--bg-primary) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 32px !important;
  font-weight: 800 !important;
  color: white !important;
}

.login-boot-avatar.success {
  animation: loginBootSuccessPulse 1s ease-out forwards !important;
  border: 2px solid #43b581 !important;
}

.login-boot-text {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  height: 40px !important;
}

.login-boot-status {
  font-size: 12px !important;
  color: rgba(255, 255, 255, 0.5) !important;
  text-transform: uppercase !important;
  letter-spacing: 2px !important;
}

.blink-dots {
  animation: loginBootBlink 1s infinite !important;
}

.login-boot-welcome {
  margin: 0 !important;
  font-size: 24px !important;
  font-weight: 800 !important;
  color: white !important;
}

@keyframes loginBootPopIn {
  0% {
    transform: scale(0.9);
    opacity: 0;
  }

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

@keyframes loginBootPulse {
  0% {
    box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.2);
  }

  70% {
    box-shadow: 0 0 0 15px transparent;
  }

  100% {
    box-shadow: 0 0 0 0 transparent;
  }
}

@keyframes loginBootSuccessPulse {
  0% {
    box-shadow: 0 0 0 0 rgba(67, 181, 129, 0.6);
  }

  100% {
    box-shadow: 0 0 0 25px transparent;
  }
}

@keyframes loginBootBlink {

  0%,
  100% {
    opacity: 1;
  }

  50% {
    opacity: 0.3;
  }
}

/* Animation Toggle */
.anim-toggle {
  background: transparent;
  border: none;
  color: var(--text-normal);
  font-size: 16px;
  cursor: pointer;
  margin-right: 15px;
  opacity: 0.4;
  transition: opacity 0.3s ease, transform 0.3s ease, text-shadow 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 5px;
}

.anim-toggle:hover {
  opacity: 0.8;
  transform: scale(1.1);
}

.anim-toggle.active {
  opacity: 1;
  text-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
}

body.no-anim .app-workspace::before,
body.no-anim .app-workspace::after,
body.no-anim #bgExtraLayer {
  display: none !important;
}

body.no-anim {
  background: var(--bg-main) !important;
}

/* The toggle used to only ever touch the two blobs above, despite being
   labeled generically "Animations" - every other continuous, always-on
   animation sitewide (the nav bar's donate-button gradient sweep, and the
   status-dot pulse used wherever a ticket's live/open state is shown) kept
   running regardless of its state. Turning it off should mean off. */
body.no-anim .nav-pill:has(.donate-btn) {
  animation: none !important;
}

body.no-anim .live-dot {
  animation: none !important;
}

/* White Glow Hover Effects */
.tilt-card:hover,
.ticket-tile:hover,
.activity-row:hover {
  box-shadow: 0 0 15px rgba(255, 255, 255, 0.2) !important;
  border-color: rgba(255, 255, 255, 0.6) !important;
  transition: box-shadow 0.3s ease, border-color 0.3s ease !important;
}

/* Nav Pills */
.nav-pill {
  display: inline-flex;
  align-items: center;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 50px;
  padding: 6px 16px;
  gap: 12px;
  backdrop-filter: blur(10px);
  height: 36px;
  box-sizing: border-box;
  transition: all 0.3s ease;
}

/* Donate Button */
/* Donate Button Panel Background */
.nav-pill:has(.donate-btn) {
  background: linear-gradient(90deg, rgba(255, 0, 122, 0.4), rgba(122, 0, 255, 0.4), rgba(0, 225, 255, 0.4), rgba(255, 0, 122, 0.4));
  background-size: 300% 100%;
  animation: donateGradientMove 3s linear infinite;
  border: 1px solid rgba(255, 255, 255, 0.2);
  padding: 0;
  overflow: hidden;
}

.donate-btn {
  text-decoration: none;
  font-size: 13px;
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  white-space: nowrap;
  color: #fff;
  padding: 6px 16px;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
}

.donate-btn span {
  transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1);
  display: inline-block;
  overflow: hidden;
  vertical-align: middle;
}

.donate-btn .text-normal {
  max-width: 100px;
  opacity: 1;
}

@keyframes donateGradientMove {
  0% {
    background-position: 0% 50%;
  }

  100% {
    background-position: 100% 50%;
  }
}

.donate-btn .text-hover {
  max-width: 0;
  opacity: 0;
  color: #fff;
  /* Revert to white or keep gold? The user said "Text can go back to it's old color", so white */
}

.donate-btn:hover .text-normal {
  max-width: 0;
  opacity: 0;
}

.donate-btn:hover .text-hover {
  max-width: 200px;
  opacity: 1;
}

/* Animation Switch */
.anim-switch {
  position: relative;
  width: 36px;
  height: 20px;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 20px;
  cursor: pointer;
  transition: background 0.3s ease;
  border: none;
  padding: 0;
}

.anim-switch::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 16px;
  height: 16px;
  background: #fff;
  border-radius: 50%;
  transition: transform 0.3s ease;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.anim-switch.active {
  background: #2ecc71;
}

.anim-switch.active::after {
  transform: translateX(16px);
}

/* Animations Panel Styling */
.anim-panel {
  position: relative;
  overflow: visible;
  /* Allows ripple to expand outside */
  padding: 4px 6px 4px 12px;
  gap: 8px;
  flex-shrink: 0 !important;
}

@keyframes animPulseGlowOn {
  0% {
    box-shadow: 0 0 0 0 rgba(var(--anim-color, 46, 204, 113), 0.6);
  }

  70% {
    box-shadow: 0 0 0 10px rgba(var(--anim-color, 46, 204, 113), 0);
  }

  100% {
    box-shadow: 0 0 0 0 rgba(var(--anim-color, 46, 204, 113), 0);
  }
}

@keyframes animPulseGlowOff {
  0% {
    box-shadow: 0 0 0 0 rgba(var(--anim-color, 231, 76, 60), 0.6);
  }

  70% {
    box-shadow: 0 0 0 10px rgba(var(--anim-color, 231, 76, 60), 0);
  }

  100% {
    box-shadow: 0 0 0 0 rgba(var(--anim-color, 231, 76, 60), 0);
  }
}

.anim-panel:has(.anim-switch.active):hover {
  animation: animPulseGlowOn 1.5s infinite;
}

.anim-panel:not(:has(.anim-switch.active)):hover {
  animation: animPulseGlowOff 1.5s infinite;
}

.anim-panel::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 100%;
  background: radial-gradient(circle, rgba(var(--anim-color, 46, 204, 113), 0.95) 0%, transparent 70%);
  transform: translate(-50%, -50%) scale(0);
  opacity: 0;
  border-radius: 50px;
  pointer-events: none;
  z-index: -1;
}

.anim-panel.ripple-active::before {
  animation: colorRipple 0.6s cubic-bezier(0.25, 1, 0.5, 1);
}

@keyframes colorRipple {
  0% {
    transform: translate(-50%, -50%) scale(0.8);
    opacity: 0.95;
  }

  100% {
    transform: translate(-50%, -50%) scale(2.5);
    opacity: 0;
  }
}

/* Red ripple for off state */
.anim-panel.ripple-off::before {
  background: radial-gradient(circle, rgba(var(--anim-color, 231, 76, 60), 0.95) 0%, transparent 70%);
  animation: colorRipple 0.6s cubic-bezier(0.25, 1, 0.5, 1);
}

/* Responsive Brand Watermark Text and Layouts */
.brand-watermark {
  position: fixed;
  top: 15vh;
  right: 3vw;
  /* Position for 1080p and below */
  z-index: 9999;
  pointer-events: none;
  text-align: right;
}

@media (min-width: 2000px) {
  .brand-watermark {
    right: 5vw;
    /* Position for 2k monitors */
  }
}

.brand-watermark-main {
  font-size: 160px;
  font-weight: 900;
  letter-spacing: -8px;
  margin: 0;
  text-shadow: 0 0 60px rgba(255, 255, 255, 0.5);
  line-height: 1;
  color: white;
}

.brand-watermark-sub {
  font-size: 26px;
  color: rgba(255, 255, 255, 0.5);
  margin-top: -15px;
  font-weight: 600;
  white-space: nowrap;
}

@media (max-width: 1200px) {
  .brand-watermark-main {
    font-size: 100px;
  }

  .brand-watermark-sub {
    font-size: 20px;
  }

  .dashboard-layout {
    min-height: 100% !important;
    height: auto !important;
    padding: 40px 5% !important;
    gap: 40px !important;
  }

  .dashboard-cards-column {
    width: 100% !important;
  }

  .mascot-panel {
    width: 100% !important;
    justify-content: center !important;
    margin-top: 40px !important;
  }

  .ami-render {
    max-height: 60vh !important;
  }

  .brand-watermark {
    top: 5vh;
    right: 5vw;
  }
}

@media (max-width: 900px) {
  .brand-watermark-main {
    font-size: 60px;
  }

  .brand-watermark-sub {
    font-size: 16px;
    white-space: normal;
    text-align: center;
  }

  .brand-watermark {
    top: auto;
    bottom: 5%;
    right: 50%;
    transform: translateX(50%);
    text-align: center;
  }

  .global-top-nav {
    padding: 15px 20px !important;
    justify-content: center !important;
    height: auto !important;
  }

  .nav-right {
    padding-right: 0 !important;
    justify-content: center !important;
  }

  .nav-left {
    justify-content: center !important;
  }

  .nav-pill {
    margin-left: 0 !important;
  }

  .anim-panel {
    position: relative;
    right: auto;
  }
}

@media (max-width: 600px) {
  .brand-watermark {
    display: none;
  }
}

/* ========================================= */
/* GLOBAL RESPONSIVE REFACTOR MEDIA QUERIES  */
/* ========================================= */

/* Tablet & Smaller Laptops (max 1024px) */
@media (max-width: 1024px) {
  .dashboard-layout {
    flex-direction: column !important;
    justify-content: flex-start !important;
    padding: 0 4% !important;
  }

  .dashboard-cards-column {
    width: 100% !important;
    max-width: 100% !important;
    margin-top: 40px !important;
  }

  .mascot-panel {
    width: 100% !important;
    max-width: 100% !important;
    justify-content: center !important;
    margin-top: 20px !important;
  }

  .ami-render {
    max-height: 50vh !important;
    transform: none !important;
    object-position: center bottom !important;
  }

  .brand-watermark {
    position: static !important;
    text-align: center !important;
    margin: 20px auto !important;
  }
}

/* Mobile Devices (max 768px) */
@media (max-width: 768px) {
  .global-top-nav {
    flex-direction: column !important;
    padding: 10px !important;
    gap: 10px !important;
  }

  .nav-left,
  .nav-right {
    width: 100% !important;
    justify-content: center !important;
    padding: 0 !important;
  }

  .dashboard-cards-column {
    gap: 16px !important;
  }

  .quick-actions-row {
    flex-direction: column !important;
  }

  /* The picker button itself is small enough to stay inline on a phone;
     it's the popover that needs constraining so it can't overflow the
     viewport it's anchored to. */
  .theme-picker {
    border-right: none !important;
    padding-right: 0 !important;
  }

  .theme-picker-panel {
    grid-template-columns: 1fr !important;
    width: min(320px, calc(100vw - 32px)) !important;
  }

  /* Breadcrumb trails (guild/ticket names + several link segments) had no
     wrap either, forcing the page header wider than the viewport. */
  .breadcrumbs {
    flex-wrap: wrap !important;
    row-gap: 6px !important;
  }

  /* Codex's category filter pills were a single non-wrapping row. */
  .codex-filters {
    flex-wrap: wrap !important;
  }
}

@media (max-width: 600px) {
  .dashboard-layout {
    padding: 20px 5% !important;
  }
}

/* FAQ Dashboard Styles */
.faq-layout {
  display: grid;
  grid-template-columns: 40% 60%;
  gap: 32px;
  align-items: start;
}

.faq-sidebar {
  position: relative;
}

.faq-sidebar img {
  position: absolute;
  top: 0vw;
  /* Pushed down to compensate for the removed header block */
  left: 50%;
  transform: translateX(-50%);
  width: 350%;
  /* Massive width to counteract the huge transparent padding in the PNG */
  max-width: none;
  height: auto;
  pointer-events: none;
  filter: drop-shadow(0 10px 40px rgba(0, 0, 0, 0.6));
}

.faq-accordion-container {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.faq-item {
  background: color-mix(in srgb, var(--bg-secondary) 60%, transparent);
  backdrop-filter: blur(12px);
  border: 1px solid color-mix(in srgb, var(--text-normal) 10%, transparent);
  border-radius: 12px;
  overflow: hidden;
  transition: all 0.3s ease;
}

.faq-question {
  width: 100%;
  text-align: left;
  background: transparent;
  border: none;
  padding: 20px 24px;
  font-size: 18px;
  font-weight: 700;
  color: var(--text-normal);
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  transition: all 0.2s ease;
}

.faq-question:hover {
  background: rgba(237, 66, 69, 0.1);
  /* Blood-red hover accent */
  color: #ed4245;
}

.faq-icon {
  font-size: 24px;
  font-weight: 300;
  transition: transform 0.3s ease;
}

.faq-item.active {
  border-color: rgba(237, 66, 69, 0.5);
}

.faq-item.active .faq-question {
  background: rgba(237, 66, 69, 0.1);
  color: #ed4245;
}

.faq-item.active .faq-icon {
  transform: rotate(45deg);
}

.faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s cubic-bezier(0, 1, 0, 1);
}

.faq-item.active .faq-answer {
  transition: max-height 0.5s ease-in-out;
}

.faq-answer-inner {
  padding: 0 24px 24px 24px;
  color: color-mix(in srgb, var(--text-normal) 80%, transparent);
  line-height: 1.6;
}

.faq-answer-inner ul {
  padding-left: 20px;
  line-height: 1.8;
  margin-top: 12px;
}

.faq-answer-inner li strong {
  color: var(--text-normal);
}

@media (max-width: 1024px) {
  .faq-layout {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .faq-sidebar {
    position: static;
    height: 400px;
    /* Give it a fixed height block on mobile so absolute positioning works */
    overflow: hidden;
    /* Hide the massive transparent box on mobile */
  }

  .faq-sidebar img {
    bottom: -20px;
    width: 140%;
    /* Scale back down since column is now 100% wide */
  }
}

/* --- Bug Report Feature Styles --- */
.bug-pill {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.bug-pill-new {
    background: rgba(237, 66, 69, 0.2);
    color: #ed4245;
    border: 1px solid rgba(237, 66, 69, 0.4);
}
.bug-pill-received {
    background: rgba(255, 165, 0, 0.2);
    color: orange;
    border: 1px solid rgba(255, 165, 0, 0.4);
}
.bug-pill-fixed {
    background: rgba(0, 255, 255, 0.2);
    color: #00ffff;
    border: 1px solid rgba(0, 255, 255, 0.4);
}

.bug-modal-overlay {
    display: none; /* Hidden by default */
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    z-index: 1000;
    align-items: center;
    justify-content: center;
}

.bug-modal-overlay.active {
    display: flex;
}

.bug-modal {
    width: 90%;
    max-width: 600px;
    background: var(--bg-secondary);
    border-radius: 16px;
    padding: 32px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.8);
    position: relative;
    border: 1px solid rgba(255,255,255,0.1);
}

@media (max-width: 768px) {
    .bug-modal {
        padding: 24px;
        width: 95%;
    }
    .bug-card {
        flex-direction: column;
    }
}

/* Bug Reports Cinematic Hero Banner */
.bug-hero-wrapper {
    width: 100vw;
    margin-left: calc(-50vw + 50%);
    margin-right: calc(-50vw + 50%);
    margin-bottom: 40px;
    margin-top: 0;
    position: relative;
    -webkit-mask-image: linear-gradient(to bottom, black 60%, transparent 100%);
    mask-image: linear-gradient(to bottom, black 60%, transparent 100%);
}

.bug-hero-img {
    width: 100%;
    height: 600px;
    object-fit: cover;
    display: block;
    border-radius: 0;
}

@media (max-width: 900px) {
    .bug-hero-img {
        height: 300px;
    }
}

@media (max-width: 600px) {
    .bug-hero-wrapper {
        margin-bottom: 24px;
    }
    .bug-hero-img {
        height: 200px;
    }
}

/* Report Bug FAB Animations */
.report-bug-btn {
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
    background: var(--accent-color) !important;
}

.report-bug-btn:hover {
    background: var(--theme-blue) !important;
    transform: none !important;
    box-shadow: 0 15px 40px rgba(88, 101, 242, 0.5) !important;
    filter: brightness(1.2) hue-rotate(10deg);
}

.report-bug-btn:active {
    transform: translateY(2px) !important;
    box-shadow: 0 5px 15px rgba(88, 101, 242, 0.4) !important;
    filter: brightness(0.9) hue-rotate(-10deg);
}

/* Modal and Status Pill Overrides */
.bug-modal:hover {
    transform: none !important;
}

.bug-pill-rejected {
    background: rgba(255, 0, 0, 0.15);
    color: #ff4444;
    border: 1px solid #ff4444;
}

/* Global Notifications Dropdown Fix */
#globalNotifDropdown {
    display: none !important;
}
#globalNotifDropdown.active {
    display: flex !important;
}

/* The dropdown inherits .glass-card's hover lift/scale, which is fine for a
   standalone card but reads as the whole panel "moving" for something you
   have to keep your mouse over to read/click — keep the border-color glow
   from that same rule, drop the transform/shadow motion. */
#globalNotifDropdown:hover {
    transform: none !important;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5) !important;
}

/* .glass-card's default 40% tint is too see-through for something that
   floats over arbitrary page content underneath it — text was hard to read
   against busier/lighter backgrounds. Stronger tint + heavier blur for a
   proper frosted-glass look instead. */
#globalNotifDropdown {
    background: color-mix(in srgb, var(--bg-secondary) 85%, transparent) !important;
    backdrop-filter: blur(32px) !important;
    -webkit-backdrop-filter: blur(32px) !important;
}

/* Shared close "x" for every modal on the site - was a bare 20px transparent
   glyph in most places (easy to miss, small hit target). Bigger, a visible
   hover state, and a real circular hit target.
   Uses an inline SVG rather than the &times; text glyph - that character's
   own font metrics sit visually above true-center in every typeface tried
   here, so no amount of flex centering on the button made it look centered.
   An SVG has no such baseline quirk. */
.site-modal-close-btn {
    position: absolute !important;
    top: 14px !important;
    right: 14px !important;
    width: 36px !important;
    height: 36px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: rgba(255, 255, 255, 0.06) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 50% !important;
    color: var(--text-normal) !important;
    padding: 0 !important;
    cursor: pointer !important;
    transition: all 0.15s ease !important;
}

.site-modal-close-btn svg {
    display: block !important;
    pointer-events: none;
}

.site-modal-close-btn:hover {
    background: rgba(237, 66, 69, 0.2) !important;
    border-color: rgba(237, 66, 69, 0.5) !important;
    color: #ed4245 !important;
    transform: scale(1.08) !important;
}

/* Reusable themed pill action button — the bare .btn class only sets shape
   (border-radius/uppercase/etc), not color, so outside of contexts like
   .server-card it fell back to unstyled browser/link defaults. Use this
   wherever a page needs a real primary/success CTA pill. */
.page-action-btn {
    padding: 12px 26px !important;
    border-radius: 50px !important;
    border: none !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
}

.page-action-btn.primary {
    background: var(--accent-color) !important;
    color: #ffffff !important;
}
.page-action-btn.primary:hover:not(:disabled) {
    filter: brightness(1.15);
    transform: translateY(-2px);
}

.page-action-btn.success {
    background: #3ba55c !important;
    color: #ffffff !important;
}
.page-action-btn.success:hover:not(:disabled) {
    background: #2d7d46 !important;
    transform: translateY(-2px);
}

.page-action-btn:disabled,
.page-action-btn[disabled] {
    opacity: 0.4 !important;
    cursor: not-allowed !important;
    filter: grayscale(0.4);
}
.page-action-btn:disabled:hover,
.page-action-btn[disabled]:hover {
    transform: none !important;
}


/* Logo Letter Collision Animation */
#amiLogo {
    cursor: pointer;
    display: inline-flex;
}
#amiLogo span {
    display: inline-block;
    transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1);
}
#amiLogo.collided .ami-logo-letter-a {
    transform: translateX(0.65em);
}
#amiLogo.collided .ami-logo-letter-m {
    transform: translateX(0);
}
#amiLogo.collided .ami-logo-letter-i {
    transform: translateX(-0.65em);
}

/* Vampire mode - hidden cosmetic-only easter egg unlocked by rapid-clicking
   Ami's mail envelope on the dashboard 5x in under ~1.8s (see dashboard.ejs).
   Toggled via html[data-vampire], set from localStorage in main.js so it
   follows the user to every page, same mechanism as data-theme/data-bg-anim.
   Pure overlay - no layout/functional changes, safe to apply anywhere. */
html[data-vampire="true"] body::after {
    content: '';
    position: fixed;
    inset: 0;
    z-index: 9997;
    pointer-events: none;
    background-image:
        radial-gradient(ellipse at center, transparent 22%, rgba(15, 0, 3, 0.85) 100%),
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.6'/%3E%3C/svg%3E");
    background-repeat: no-repeat, repeat;
    background-size: cover, 160px 160px;
    mix-blend-mode: multiply;
}