/* ============================================================================
   GOCOURSE ACADEMY — Site-wide Blue Glassmorphism Theme
   Animated blob background + per-user background changer
   (background technology ported from the image-upload-web-app project).
   Loaded on every page; overrides legacy classes so the whole site goes blue.
   ============================================================================ */

:root {
  --gc-text:        #eaf2ff;
  --gc-text-soft:   rgba(234,242,255,.68);
  --gc-text-muted:  rgba(234,242,255,.42);
  --gc-accent:      #38bdf8;
  --gc-accent-2:    #60a5fa;
  --gc-danger:      #f87171;
  --gc-success:     #34d399;
  --gc-warning:     #fbbf24;

  --gc-glass:        rgba(255,255,255,.075);
  --gc-glass-hover:  rgba(255,255,255,.14);
  --gc-glass-border: rgba(150,200,255,.20);
  --gc-glass-shadow: 0 14px 36px rgba(0,20,60,.26), inset 0 1px 0 rgba(255,255,255,.08);

  --blur-amount: 22px;     /* used by the .blob layer (via background changer) */
  --glow-opacity: 0.20;
  --bg-base: #03081c;      /* overridden per theme below */
}

/* ─── Base ─────────────────────────────────────────────────────────────── */
html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  overflow-x: hidden;
}
body {
  /* !important so the dark theme base wins even when Bootstrap's CSS is loaded
     AFTER this file (login/register/forgot/reset) — otherwise the page goes white.
     Uses background-color (not the shorthand) so custom background images still apply. */
  background-color: var(--bg-base) !important;
  color: var(--gc-text);
  min-height: 100vh;
  transition: background .6s ease;
  scroll-behavior: smooth;
}

/* ═══════════════════════════════════════════════════════════════════════
   ANIMATED BLOB BACKGROUND  (injected by gocourse-bg.js)
   ═══════════════════════════════════════════════════════════════════════ */
.bg-blobs {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}
.blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(calc(var(--blur-amount, 22) * 1px));
  opacity: var(--glow-opacity, .20);
  will-change: transform;
  transition: background .8s ease, opacity .8s ease, filter .6s ease;
}
.blob-1 { width: 620px; height: 620px; top: -15%;   left: -10%; animation: blobMove1 18s ease-in-out infinite; }
.blob-2 { width: 520px; height: 520px; top: 30%;    right: -8%; animation: blobMove2 22s ease-in-out infinite; }
.blob-3 { width: 460px; height: 460px; bottom: -10%; left: 30%; animation: blobMove3 20s ease-in-out infinite; }
.blob-4 { width: 380px; height: 380px; top: 10%;    left: 55%; animation: blobMove4 25s ease-in-out infinite; }

@keyframes blobMove1 { 0%,100%{transform:translate(0,0) scale(1);} 33%{transform:translate(80px,60px) scale(1.08);} 66%{transform:translate(-40px,100px) scale(.95);} }
@keyframes blobMove2 { 0%,100%{transform:translate(0,0) scale(1);} 40%{transform:translate(-100px,60px) scale(1.06);} 70%{transform:translate(50px,-80px) scale(.92);} }
@keyframes blobMove3 { 0%,100%{transform:translate(0,0) scale(1);} 30%{transform:translate(60px,-70px) scale(1.1);} 65%{transform:translate(-80px,50px) scale(.96);} }
@keyframes blobMove4 { 0%,100%{transform:translate(0,0) scale(1);} 50%{transform:translate(-120px,80px) scale(1.05);} }

/* ─── Background Themes — blue family default + extra options ──────────── */
/* Ocean (DEFAULT — blue) */
[data-theme="ocean"]    { --bg-base:#020d1a; --gc-accent:#22d3ee; --gc-accent-2:#38bdf8; }
[data-theme="ocean"]   .blob-1 { background: radial-gradient(circle,#0284c7 0%,transparent 70%); }
[data-theme="ocean"]   .blob-2 { background: radial-gradient(circle,#0891b2 0%,transparent 70%); }
[data-theme="ocean"]   .blob-3 { background: radial-gradient(circle,#1d4ed8 0%,transparent 70%); }
[data-theme="ocean"]   .blob-4 { background: radial-gradient(circle,#0ea5e9 0%,transparent 70%); }

/* Royal — deep blue */
[data-theme="royal"]    { --bg-base:#040a22; --gc-accent:#60a5fa; --gc-accent-2:#818cf8; }
[data-theme="royal"]   .blob-1 { background: radial-gradient(circle,#1d4ed8 0%,transparent 70%); }
[data-theme="royal"]   .blob-2 { background: radial-gradient(circle,#2563eb 0%,transparent 70%); }
[data-theme="royal"]   .blob-3 { background: radial-gradient(circle,#4338ca 0%,transparent 70%); }
[data-theme="royal"]   .blob-4 { background: radial-gradient(circle,#3b82f6 0%,transparent 70%); }

/* Midnight — navy/indigo */
[data-theme="midnight"] { --bg-base:#030616; --gc-accent:#818cf8; --gc-accent-2:#38bdf8; }
[data-theme="midnight"].blob-1,[data-theme="midnight"] .blob-1 { background: radial-gradient(circle,#1e1b4b 0%,transparent 70%); }
[data-theme="midnight"] .blob-2 { background: radial-gradient(circle,#312e81 0%,transparent 70%); }
[data-theme="midnight"] .blob-3 { background: radial-gradient(circle,#1e3a5f 0%,transparent 70%); }
[data-theme="midnight"] .blob-4 { background: radial-gradient(circle,#2563eb 0%,transparent 70%); }

/* Ice — bright cyan/blue */
[data-theme="ice"]      { --bg-base:#06121f; --gc-accent:#7dd3fc; --gc-accent-2:#a5f3fc; }
[data-theme="ice"]     .blob-1 { background: radial-gradient(circle,#0ea5e9 0%,transparent 70%); }
[data-theme="ice"]     .blob-2 { background: radial-gradient(circle,#38bdf8 0%,transparent 70%); }
[data-theme="ice"]     .blob-3 { background: radial-gradient(circle,#22d3ee 0%,transparent 70%); }
[data-theme="ice"]     .blob-4 { background: radial-gradient(circle,#818cf8 0%,transparent 70%); }

/* Aurora — purple/blue */
[data-theme="aurora"]   { --bg-base:#0d0b1e; --gc-accent:#a78bfa; --gc-accent-2:#38bdf8; }
[data-theme="aurora"]  .blob-1 { background: radial-gradient(circle,#7c3aed 0%,transparent 70%); }
[data-theme="aurora"]  .blob-2 { background: radial-gradient(circle,#0ea5e9 0%,transparent 70%); }
[data-theme="aurora"]  .blob-3 { background: radial-gradient(circle,#2563eb 0%,transparent 70%); }
[data-theme="aurora"]  .blob-4 { background: radial-gradient(circle,#06b6d4 0%,transparent 70%); }

/* Prism — blue/teal mix */
[data-theme="prism"]    { --bg-base:#070713; --gc-accent:#60a5fa; --gc-accent-2:#22d3ee; }
[data-theme="prism"]   .blob-1 { background: radial-gradient(circle,#2563eb 0%,transparent 70%); }
[data-theme="prism"]   .blob-2 { background: radial-gradient(circle,#0891b2 0%,transparent 70%); }
[data-theme="prism"]   .blob-3 { background: radial-gradient(circle,#0ea5e9 0%,transparent 70%); }
[data-theme="prism"]   .blob-4 { background: radial-gradient(circle,#10b981 0%,transparent 70%); }

/* Forest — green (option) */
[data-theme="forest"]   { --bg-base:#030d08; --gc-accent:#4ade80; --gc-accent-2:#a3e635; }
[data-theme="forest"]  .blob-1 { background: radial-gradient(circle,#15803d 0%,transparent 70%); }
[data-theme="forest"]  .blob-2 { background: radial-gradient(circle,#065f46 0%,transparent 70%); }
[data-theme="forest"]  .blob-3 { background: radial-gradient(circle,#84cc16 0%,transparent 70%); }
[data-theme="forest"]  .blob-4 { background: radial-gradient(circle,#0f766e 0%,transparent 70%); }

/* Sunset — warm (option) */
[data-theme="sunset"]   { --bg-base:#160a05; --gc-accent:#fb923c; --gc-accent-2:#fbbf24; }
[data-theme="sunset"]  .blob-1 { background: radial-gradient(circle,#ea580c 0%,transparent 70%); }
[data-theme="sunset"]  .blob-2 { background: radial-gradient(circle,#dc2626 0%,transparent 70%); }
[data-theme="sunset"]  .blob-3 { background: radial-gradient(circle,#d97706 0%,transparent 70%); }
[data-theme="sunset"]  .blob-4 { background: radial-gradient(circle,#be185d 0%,transparent 70%); }

/* Obsidian — near-black (option) */
[data-theme="black"]    { --bg-base:#000000; --gc-accent:#94a3b8; --gc-accent-2:#64748b; }
[data-theme="black"]   .blob-1 { background: radial-gradient(circle,#1e293b 0%,transparent 70%); }
[data-theme="black"]   .blob-2 { background: radial-gradient(circle,#0f172a 0%,transparent 70%); }
[data-theme="black"]   .blob-3 { background: radial-gradient(circle,#334155 0%,transparent 70%); }
[data-theme="black"]   .blob-4 { background: radial-gradient(circle,#1e3a8a 0%,transparent 70%); }

/* Emerald — teal / green */
[data-theme="emerald"]  { --bg-base:#03120d; --gc-accent:#34d399; --gc-accent-2:#22d3ee; }
[data-theme="emerald"] .blob-1 { background: radial-gradient(circle,#059669 0%,transparent 70%); }
[data-theme="emerald"] .blob-2 { background: radial-gradient(circle,#0d9488 0%,transparent 70%); }
[data-theme="emerald"] .blob-3 { background: radial-gradient(circle,#10b981 0%,transparent 70%); }
[data-theme="emerald"] .blob-4 { background: radial-gradient(circle,#22d3ee 0%,transparent 70%); }

/* Candy — pink / sky */
[data-theme="candy"]    { --bg-base:#170617; --gc-accent:#fb7185; --gc-accent-2:#38bdf8; }
[data-theme="candy"]   .blob-1 { background: radial-gradient(circle,#ec4899 0%,transparent 70%); }
[data-theme="candy"]   .blob-2 { background: radial-gradient(circle,#38bdf8 0%,transparent 70%); }
[data-theme="candy"]   .blob-3 { background: radial-gradient(circle,#f472b6 0%,transparent 70%); }
[data-theme="candy"]   .blob-4 { background: radial-gradient(circle,#a78bfa 0%,transparent 70%); }

/* Lavender — purple */
[data-theme="lavender"] { --bg-base:#0b0816; --gc-accent:#c4b5fd; --gc-accent-2:#7dd3fc; }
[data-theme="lavender"].blob-1,[data-theme="lavender"] .blob-1 { background: radial-gradient(circle,#8b5cf6 0%,transparent 70%); }
[data-theme="lavender"] .blob-2 { background: radial-gradient(circle,#c084fc 0%,transparent 70%); }
[data-theme="lavender"] .blob-3 { background: radial-gradient(circle,#38bdf8 0%,transparent 70%); }
[data-theme="lavender"] .blob-4 { background: radial-gradient(circle,#a78bfa 0%,transparent 70%); }

/* Gold — amber / warm */
[data-theme="gold"]     { --bg-base:#140f02; --gc-accent:#fbbf24; --gc-accent-2:#f59e0b; }
[data-theme="gold"]    .blob-1 { background: radial-gradient(circle,#f59e0b 0%,transparent 70%); }
[data-theme="gold"]    .blob-2 { background: radial-gradient(circle,#d97706 0%,transparent 70%); }
[data-theme="gold"]    .blob-3 { background: radial-gradient(circle,#fbbf24 0%,transparent 70%); }
[data-theme="gold"]    .blob-4 { background: radial-gradient(circle,#b45309 0%,transparent 70%); }

/* Volcano — red / orange */
[data-theme="volcano"]  { --bg-base:#1a0503; --gc-accent:#fb7185; --gc-accent-2:#fb923c; }
[data-theme="volcano"] .blob-1 { background: radial-gradient(circle,#dc2626 0%,transparent 70%); }
[data-theme="volcano"] .blob-2 { background: radial-gradient(circle,#ea580c 0%,transparent 70%); }
[data-theme="volcano"] .blob-3 { background: radial-gradient(circle,#b91c1c 0%,transparent 70%); }
[data-theme="volcano"] .blob-4 { background: radial-gradient(circle,#f97316 0%,transparent 70%); }

/* Neon — magenta / lime */
[data-theme="neon"]     { --bg-base:#050308; --gc-accent:#f0abfc; --gc-accent-2:#a3e635; }
[data-theme="neon"]    .blob-1 { background: radial-gradient(circle,#a21caf 0%,transparent 70%); }
[data-theme="neon"]    .blob-2 { background: radial-gradient(circle,#65a30d 0%,transparent 70%); }
[data-theme="neon"]    .blob-3 { background: radial-gradient(circle,#e11d48 0%,transparent 70%); }
[data-theme="neon"]    .blob-4 { background: radial-gradient(circle,#7c3aed 0%,transparent 70%); }

/* Peacock — teal / indigo */
[data-theme="peacock"]  { --bg-base:#04101a; --gc-accent:#2dd4bf; --gc-accent-2:#6366f1; }
[data-theme="peacock"] .blob-1 { background: radial-gradient(circle,#0d9488 0%,transparent 70%); }
[data-theme="peacock"] .blob-2 { background: radial-gradient(circle,#4f46e5 0%,transparent 70%); }
[data-theme="peacock"] .blob-3 { background: radial-gradient(circle,#0891b2 0%,transparent 70%); }
[data-theme="peacock"] .blob-4 { background: radial-gradient(circle,#7c3aed 0%,transparent 70%); }

/* Rose — pink / rose */
[data-theme="rose"]     { --bg-base:#170810; --gc-accent:#fb7185; --gc-accent-2:#f9a8d4; }
[data-theme="rose"]    .blob-1 { background: radial-gradient(circle,#e11d48 0%,transparent 70%); }
[data-theme="rose"]    .blob-2 { background: radial-gradient(circle,#db2777 0%,transparent 70%); }
[data-theme="rose"]    .blob-3 { background: radial-gradient(circle,#fb7185 0%,transparent 70%); }
[data-theme="rose"]    .blob-4 { background: radial-gradient(circle,#f472b6 0%,transparent 70%); }

/* Cyber — cyan / magenta */
[data-theme="cyber"]    { --bg-base:#04060f; --gc-accent:#22d3ee; --gc-accent-2:#e879f9; }
[data-theme="cyber"]   .blob-1 { background: radial-gradient(circle,#06b6d4 0%,transparent 70%); }
[data-theme="cyber"]   .blob-2 { background: radial-gradient(circle,#d946ef 0%,transparent 70%); }
[data-theme="cyber"]   .blob-3 { background: radial-gradient(circle,#3b82f6 0%,transparent 70%); }
[data-theme="cyber"]   .blob-4 { background: radial-gradient(circle,#a855f7 0%,transparent 70%); }

/* Custom-image dim overlay (injected by gocourse-bg.js) */
#customBgDimOverlay { position: fixed; inset: 0; pointer-events: none; z-index: 0; transition: background .3s; }

/* Keep page content above the blob layer */
.hero, .layout, .screen, .content, .gc-content, main, section, .container {
  position: relative;
  z-index: 1;
}
/* Navbar + its dropdowns must stack ABOVE the glass content that follows it,
   otherwise the "Welcome, user" dropdown opens behind the page cards. */
.layout .content .navbar.sticky-top,
.layout .content .navbar { z-index: 1030 !important; }
.dropdown-menu { z-index: 2050 !important; }
/* Sidebar sits above content + scrolls when the live-stats panel overflows */
.sidebar { z-index: 1050; }

/* ═══════════════════════════════════════════════════════════════════════
   LEGACY BACKGROUND OVERRIDES — make existing page shells transparent so the
   animated blue blob layer shows through everywhere.
   ═══════════════════════════════════════════════════════════════════════ */
.hero, .layout {
  background: transparent !important;
  background-image: none !important;
  min-height: 100vh;
}
.hero::before, .layout::before { display: none !important; }

/* ═══════════════════════════════════════════════════════════════════════
   GLASSMORPHISM — applied to existing Bootstrap/legacy components
   ═══════════════════════════════════════════════════════════════════════ */
.gc-glass,
.card,
.layout .content .navbar,
.layout .content .main .container,
.layout .content .main .courses .card,
.hero .container-fluid .container .main .card {
  background: var(--gc-glass) !important;
  border: 1px solid var(--gc-glass-border) !important;
  backdrop-filter: blur(20px) saturate(1.4);
  -webkit-backdrop-filter: blur(20px) saturate(1.4);
  box-shadow: var(--gc-glass-shadow) !important;
  color: var(--gc-text);
  border-radius: 22px;
}
.card { border-radius: 22px; }
.card:hover { box-shadow: 0 16px 38px rgba(0,60,160,.24) !important; }

/* Navbar follows the theme accent (border + brand colour change per theme) */
.layout .content .navbar {
  border-bottom: 2px solid var(--gc-accent) !important;
}
.navbar-brand { color: var(--gc-accent) !important; font-weight: 700; }

/* Text colour normalisation on the dark glass */
.text-white { color: var(--gc-text) !important; }
.text-secondary { color: var(--gc-text-soft) !important; }
.text-muted { color: var(--gc-text-muted) !important; }

/* Re-map the legacy "warning" (yellow) accents to the THEME accent — so every
   button recolours automatically when the background theme changes. */
.text-warning { color: var(--gc-accent) !important; }
.btn-outline-warning {
  color: var(--gc-accent) !important;
  border: 1px solid var(--gc-accent) !important;
  background: rgba(255,255,255,.06) !important;
  border-radius: 50px;
  transition: all .25s ease;
}
.btn-outline-warning:hover {
  background: linear-gradient(135deg, var(--gc-accent-2), var(--gc-accent)) !important;
  color: #02060f !important;
  border-color: transparent !important;
  transform: translateY(-2px);
  box-shadow: 0 7px 16px rgba(0,0,0,.28);
}
.btn-warning,
.btn-primary {
  background: linear-gradient(135deg, var(--gc-accent-2), var(--gc-accent)) !important;
  border: none !important;
  color: #02060f !important;
  border-radius: 50px;
}

/* Glass form fields */
.form-control, .form-select {
  background: rgba(255,255,255,.06) !important;
  border: 1px solid var(--gc-glass-border) !important;
  color: var(--gc-text) !important;
  border-radius: 12px;
}
.form-control::placeholder { color: var(--gc-text-muted) !important; }
.form-control:focus, .form-select:focus {
  background: rgba(255,255,255,.10) !important;
  border-color: var(--gc-accent) !important;
  box-shadow: 0 0 0 .2rem rgba(56,189,248,.25) !important;
  color: var(--gc-text) !important;
}
.form-label { color: var(--gc-text-soft); }

/* Browser autofill — keep the translucent glass look instead of the solid
   yellow/white the browser forces. The huge inset box-shadow paints over the
   default autofill background while staying see-through like the field. */
.form-control:-webkit-autofill,
.form-control:-webkit-autofill:hover,
.form-control:-webkit-autofill:focus,
.form-control:-webkit-autofill:active,
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--gc-text) !important;
  -webkit-box-shadow: 0 0 0 1000px rgba(255,255,255,.06) inset !important;
          box-shadow: 0 0 0 1000px rgba(255,255,255,.06) inset !important;
  caret-color: var(--gc-text);
  border: 1px solid var(--gc-glass-border) !important;
  border-radius: 12px;
  transition: background-color 99999s ease-in-out 0s;   /* defer the autofill bg */
}
.form-control:-webkit-autofill:focus,
input:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0 1000px rgba(255,255,255,.10) inset,
                      0 0 0 .2rem rgba(56,189,248,.25) !important;
          box-shadow: 0 0 0 1000px rgba(255,255,255,.10) inset,
                      0 0 0 .2rem rgba(56,189,248,.25) !important;
  border-color: var(--gc-accent) !important;
}

/* Dropdown menus */
.dropdown-menu.bg-dark, .dropdown-menu {
  background: rgba(8,18,40,.92) !important;
  border: 1px solid var(--gc-glass-border) !important;
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border-radius: 14px;
}

/* ═══════════════════════════════════════════════════════════════════════
   GLASSMORPHISM MODALS — site-wide (Bootstrap .modal), theme-accent aware.
   Every modal gets frosted glass, an animated entrance, an accent glow strip,
   and animated buttons whose colour follows the active theme (--gc-accent).
   ═══════════════════════════════════════════════════════════════════════ */
.modal-content {
  position: relative;
  overflow: hidden;
  background: linear-gradient(160deg, rgba(16,28,58,.86), rgba(7,14,36,.92)) !important;
  border: 1px solid var(--gc-glass-border) !important;
  border-radius: 22px !important;
  backdrop-filter: blur(26px) saturate(1.5);
  -webkit-backdrop-filter: blur(26px) saturate(1.5);
  box-shadow: 0 28px 80px rgba(0,10,40,.55), inset 0 1px 0 rgba(255,255,255,.10) !important;
  color: var(--gc-text);
}
/* Accent glow strip along the top edge — recolours with the theme */
.modal-content::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, transparent, var(--gc-accent), var(--gc-accent-2), transparent);
  background-size: 200% 100%;
  animation: gcModalStrip 5s ease-in-out infinite;
  pointer-events: none;
}
@keyframes gcModalStrip { 0%,100%{ background-position: 0% 0; } 50%{ background-position: 100% 0; } }

.modal-header { border-bottom: 1px solid var(--gc-glass-border) !important; }
.modal-footer { border-top: 1px solid var(--gc-glass-border) !important; }
.modal-title  { color: var(--gc-text); font-weight: 700; }
.modal-body   { color: var(--gc-text); }

/* Frosted, dimmed backdrop behind the modal */
.modal-backdrop, .modal-backdrop.show {
  background: rgba(2,6,20,.6) !important;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

/* Animated entrance — fade + rise + gentle scale */
.modal.fade .modal-dialog {
  transform: translateY(28px) scale(.96);
  transition: transform .4s cubic-bezier(.2,.8,.25,1), opacity .4s ease;
}
.modal.show .modal-dialog { transform: none; }

/* Glass close button (replaces the default dark "X") */
.modal .btn-close {
  filter: none;
  opacity: 1;
  width: 32px; height: 32px;
  border-radius: 10px;
  background-color: rgba(255,255,255,.08);
  border: 1px solid var(--gc-glass-border);
  transition: background .2s ease, transform .2s ease;
}
.modal .btn-close:hover { background-color: rgba(255,255,255,.18); transform: rotate(90deg); }

/* Animated, theme-accent primary buttons inside any modal.
   Covers Bootstrap primaries and the custom .btn-modal-primary helper. */
.modal .btn-modal-primary,
.modal .modal-footer .btn-primary,
.modal .modal-footer .btn-warning {
  position: relative;
  overflow: hidden;
  border: none !important;
  border-radius: 12px !important;
  font-weight: 700;
  color: #02060f !important;
  background: linear-gradient(135deg, var(--gc-accent-2), var(--gc-accent)) !important;
  background-size: 200% 200% !important;
  box-shadow: 0 6px 18px rgba(56,189,248,.30);
  animation: gcBtnGradient 5s ease infinite;
  transition: transform .18s ease, box-shadow .18s ease;
}
.modal .btn-modal-primary:hover,
.modal .modal-footer .btn-primary:hover,
.modal .modal-footer .btn-warning:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(56,189,248,.46);
  color: #02060f !important;
}
@keyframes gcBtnGradient { 0%,100%{ background-position: 0% 50%; } 50%{ background-position: 100% 50%; } }

/* Light sweep that glides across the primary button */
.modal .btn-modal-primary::after,
.modal .modal-footer .btn-primary::after {
  content: "";
  position: absolute;
  top: 0; left: -130%;
  width: 60%; height: 100%;
  background: linear-gradient(120deg, transparent, rgba(255,255,255,.5), transparent);
  transform: skewX(-20deg);
  animation: gcBtnShine 3.6s ease-in-out infinite;
  pointer-events: none;
}
@keyframes gcBtnShine { 0%{ left: -130%; } 55%,100%{ left: 150%; } }

/* Glass secondary / cancel buttons inside modals */
.modal .btn-modal-secondary {
  border-radius: 12px !important;
  background: rgba(255,255,255,.08) !important;
  border: 1px solid var(--gc-glass-border) !important;
  color: var(--gc-text) !important;
  transition: background .2s ease, transform .18s ease;
}
.modal .btn-modal-secondary:hover {
  background: rgba(255,255,255,.16) !important;
  color: #fff !important;
  transform: translateY(-1px);
}

@media (prefers-reduced-motion: reduce) {
  .modal-content::before,
  .modal .btn-modal-primary,
  .modal .btn-modal-primary::after,
  .modal .modal-footer .btn-primary,
  .modal .modal-footer .btn-primary::after { animation: none; }
}

/* ═══════════════════════════════════════════════════════════════════════
   BACKGROUND CHANGER — modal only (opened from the dropdown / settings page)
   ═══════════════════════════════════════════════════════════════════════ */
.gc-bg-overlay {
  position: fixed; inset: 0; z-index: 4001;
  display: none;
  align-items: center; justify-content: center;
  background: rgba(2,6,20,.55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  padding: 16px;
}
.gc-bg-overlay.open { display: flex; }

.gc-bg-modal {
  width: min(900px, 100%);
  max-height: 90vh;
  overflow-y: auto;
  background: rgba(10,20,44,.88);
  border: 1px solid var(--gc-glass-border);
  backdrop-filter: blur(26px) saturate(1.5);
  -webkit-backdrop-filter: blur(26px) saturate(1.5);
  border-radius: 24px;
  box-shadow: var(--gc-glass-shadow);
  padding: 26px 28px;
  color: var(--gc-text);
}
.gc-bg-modal h4 { font-weight: 700; margin: 0; }
.gc-bg-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:6px; }
.gc-bg-sub { color: var(--gc-text-muted); font-size:.85rem; margin-bottom:16px; }
.gc-bg-close {
  background: rgba(255,255,255,.08); border: 1px solid var(--gc-glass-border);
  color: var(--gc-text); width: 34px; height: 34px; border-radius: 10px; cursor: pointer; font-size: 18px;
}
.gc-bg-section-title { font-size:.78rem; text-transform:uppercase; letter-spacing:.12em; color:var(--gc-text-muted); margin:0 0 12px; }

/* Horizontal two-column layout */
.gc-bg-body { display: flex; gap: 26px; align-items: flex-start; }
.gc-bg-col-left  { flex: 1.5; min-width: 0; }
.gc-bg-col-right { flex: 1; min-width: 0; }
.gc-bg-divider { width: 1px; align-self: stretch; background: var(--gc-glass-border); }

.gc-theme-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; }
.theme-swatch {
  display:flex; flex-direction:column; align-items:center; gap:6px;
  padding:10px 4px; border-radius:14px; cursor:pointer; font-size:.68rem; color:var(--gc-text-soft);
  background: rgba(255,255,255,.04); border:1px solid transparent; transition: all .2s ease;
}
.theme-swatch:hover { background: rgba(255,255,255,.10); transform: translateY(-2px); }
.theme-swatch.active { border-color: var(--gc-accent); background: rgba(56,189,248,.14); color:#fff; }
.theme-swatch .swatch {
  width:38px; height:38px; border-radius:50%;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.18), 0 4px 12px rgba(0,0,0,.3);
  background-size: 200% 200%;
  animation: gcSwatchShift 4s ease-in-out infinite;
}
@keyframes gcSwatchShift { 0%,100%{background-position:0% 50%;} 50%{background-position:100% 50%;} }

@media (max-width: 680px) {
  .gc-bg-body { flex-direction: column; }
  .gc-bg-divider { width: 100%; height: 1px; }
  .gc-theme-grid { grid-template-columns: repeat(4, 1fr); }
}

.gc-slider-row { display:flex; align-items:center; gap:12px; margin:12px 0; }
.gc-slider-row label { width:64px; font-size:.85rem; color:var(--gc-text-soft); }
.gc-slider-row input[type=range] { flex:1; accent-color: var(--gc-accent); }
.gc-slider-row .val { width:46px; text-align:right; font-size:.8rem; color:var(--gc-text-muted); }

.gc-btn {
  display:inline-flex; align-items:center; gap:7px;
  border:none; border-radius:12px; padding:10px 18px; cursor:pointer; font-weight:600;
  font-size:.9rem; line-height:1;
  background: linear-gradient(135deg, var(--gc-accent-2), var(--gc-accent)); color:#02060f;
  box-shadow: 0 6px 16px rgba(56,189,248,.22);
  transition: transform .18s ease, box-shadow .18s ease, background .2s ease, border-color .2s ease;
}
.gc-btn:hover { transform: translateY(-2px); box-shadow: 0 10px 22px rgba(56,189,248,.34); }
.gc-btn:active { transform: translateY(0); }

/* Ghost: outlined glass button — readable light text (was inheriting dark text) */
.gc-btn.ghost {
  background: rgba(255,255,255,.08); border:1px solid var(--gc-glass-border);
  color: var(--gc-text); box-shadow:none;
}
.gc-btn.ghost:hover { background: rgba(255,255,255,.16); box-shadow:none; }

/* Danger: clear / remove the uploaded image */
.gc-btn.danger {
  background: rgba(248,113,113,.12); border:1px solid rgba(248,113,113,.5);
  color: var(--gc-danger); box-shadow:none;
}
.gc-btn.danger:hover {
  background: var(--gc-danger); border-color: var(--gc-danger);
  color:#1a0606; box-shadow: 0 8px 18px rgba(248,113,113,.32);
}
.gc-custom-row { display:flex; gap:10px; flex-wrap:wrap; align-items:center; }
.gc-bg-preview { display:flex; align-items:center; gap:10px; margin-top:12px; }
.gc-bg-preview img { width:64px; height:44px; object-fit:cover; border-radius:8px; border:1px solid var(--gc-glass-border); }

/* ═══════════════════════════════════════════════════════════════════════
   DASHBOARD — LIVE SYSTEM STATS PANEL (sidebar)
   ═══════════════════════════════════════════════════════════════════════ */
.sys-stats {
  margin: 14px 12px 8px;
  padding: 14px;
  border-radius: 16px;
  background: rgba(255,255,255,.05);
  border: 1px solid var(--gc-glass-border);
}
.sys-stats h6 {
  font-size: .72rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--gc-text-muted); margin: 0 0 12px; display:flex; align-items:center; gap:6px;
}
.sys-stats h6 .live-dot {
  width:8px; height:8px; border-radius:50%; background:#34d399; box-shadow:0 0 4px rgba(52,211,153,.55);
  animation: gcPulse 1.4s ease-in-out infinite;
}
@keyframes gcPulse { 0%,100%{opacity:1;} 50%{opacity:.35;} }

.sys-metric { margin-bottom: 12px; }
.sys-metric-top { display:flex; justify-content:space-between; font-size:.8rem; margin-bottom:5px; }
.sys-metric-top .label { color: var(--gc-text-soft); }
.sys-metric-top .value { color:#fff; font-weight:700; font-variant-numeric: tabular-nums; }
.sys-bar { height:7px; border-radius:6px; background: rgba(255,255,255,.10); overflow:hidden; }
.sys-bar > span {
  display:block; height:100%; width:0%;
  background: linear-gradient(90deg,#22d3ee,#3b82f6);
  border-radius:6px; transition: width .6s cubic-bezier(.4,0,.2,1);
}
.sys-bar.warn > span  { background: linear-gradient(90deg,#fbbf24,#f97316); }
.sys-bar.crit > span  { background: linear-gradient(90deg,#fb7185,#ef4444); }

/* Per-core CPU — compact mini bars, two per row */
.sys-cores { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px 10px; margin-top: 9px; }
.sys-core  { display: flex; align-items: center; gap: 6px; }
.sys-core-label {
  font-size: .62rem; color: var(--gc-text-muted); width: 20px; flex-shrink: 0;
  font-variant-numeric: tabular-nums;
}
.sys-core-bar { flex: 1; height: 5px; border-radius: 5px; background: rgba(255,255,255,.10); overflow: hidden; }
.sys-core-bar > span {
  display: block; height: 100%; width: 0; border-radius: 5px;
  background: linear-gradient(90deg,#22d3ee,#3b82f6);
  transition: width .5s cubic-bezier(.4,0,.2,1);
}
.sys-core-bar.warn > span { background: linear-gradient(90deg,#fbbf24,#f97316); }
.sys-core-bar.crit > span { background: linear-gradient(90deg,#fb7185,#ef4444); }
.sys-core-val {
  font-size: .62rem; color: var(--gc-text-soft); width: 34px; text-align: right;
  flex-shrink: 0; font-variant-numeric: tabular-nums;
}

/* Load average — ONE single bar split into three side-by-side colour-coded
   segments (1m green · 5m amber · 15m red). Every segment is always visible
   and animates its share live as the values update. */
.sys-load-bar {
  display: flex;
  height: 8px;
  margin-top: 9px;
  border-radius: 6px;
  background: rgba(255,255,255,.10);
  overflow: hidden;
}
.sys-load-bar .seg {
  height: 100%;
  width: 33.33%;
  flex: 0 0 auto;
  transition: width .5s cubic-bezier(.4,0,.2,1);
}
.sys-load-bar .seg.l1  { background: linear-gradient(90deg,#34d399,#10b981); }
.sys-load-bar .seg.l5  { background: linear-gradient(90deg,#fbbf24,#f59e0b); }
.sys-load-bar .seg.l15 { background: linear-gradient(90deg,#fb7185,#ef4444); }

/* Colour-coded values under the single bar */
.sys-load-legend {
  display: flex; justify-content: space-between; gap: 6px;
  margin-top: 6px; font-size: .64rem; color: var(--gc-text-muted);
}
.sys-load-legend b { font-variant-numeric: tabular-nums; color: var(--gc-text-soft); font-weight: 700; }
.sys-load-legend .t1  b { color: #34d399; }
.sys-load-legend .t5  b { color: #fbbf24; }
.sys-load-legend .t15 b { color: #fb7185; }

.sys-db { display:grid; grid-template-columns: repeat(2,1fr); gap:8px; margin-top:10px; }
.sys-db-item {
  background: rgba(255,255,255,.04); border:1px solid var(--gc-glass-border);
  border-radius:10px; padding:8px 10px; text-align:center;
}
.sys-db-item .n { font-size:1.15rem; font-weight:800; color:#fff; font-variant-numeric: tabular-nums; }
.sys-db-item .l { font-size:.66rem; color:var(--gc-text-muted); letter-spacing:.05em; }

/* Online | Total Users — two side-by-side stat boxes */
.sys-users { margin-top: 4px; }
.sys-users .sys-db-item { padding: 12px 10px; }
.sys-users .sys-db-item .n { font-size: 1.5rem; }
.sys-users .sys-db-item .l { display:flex; align-items:center; justify-content:center; gap:5px; margin-top:3px; }
.sys-users .sys-db-item:first-child .n { color: var(--gc-success); }
.sys-users .sys-db-item:first-child .l i { color: var(--gc-success); }

/* Sidebar look upgrade (blue glass) + scrollable when content overflows */
.sidebar {
  background: rgba(6,14,34,.55) !important;
  backdrop-filter: blur(22px) saturate(1.3);
  -webkit-backdrop-filter: blur(22px) saturate(1.3);
  border-right: 1px solid var(--gc-glass-border);
  overflow-y: auto;
  overflow-x: hidden;
  padding-bottom: 24px;
  scrollbar-width: thin;
  scrollbar-color: rgba(150,200,255,.35) transparent;
}
.sidebar::-webkit-scrollbar { width: 8px; }
.sidebar::-webkit-scrollbar-track { background: transparent; }
.sidebar::-webkit-scrollbar-thumb {
  background: rgba(150,200,255,.30);
  border-radius: 8px;
}
.sidebar::-webkit-scrollbar-thumb:hover { background: rgba(150,200,255,.50); }
.sidebar a { border-radius: 10px; margin: 2px 10px; }
.sidebar a:hover { background: rgba(56,189,248,.16) !important; }
.sidebar .active { background: linear-gradient(135deg, var(--gc-accent-2), var(--gc-accent)) !important; color:#02060f !important; }

/* Floating live-stats panel (pages without a sidebar) */
.sys-stats-float {
  position: fixed;
  left: 16px;
  bottom: 16px;
  z-index: 3500;
  width: 270px;
  max-height: 70vh;
  overflow-y: auto;
  background: rgba(10,20,44,.85);
  border: 1px solid var(--gc-glass-border);
  backdrop-filter: blur(22px) saturate(1.4);
  -webkit-backdrop-filter: blur(22px) saturate(1.4);
  border-radius: 16px;
  box-shadow: var(--gc-glass-shadow);
  scrollbar-width: thin;
  scrollbar-color: rgba(150,200,255,.35) transparent;
}
.sys-stats-float .sys-stats { margin: 0; border: none; background: transparent; }
.sys-stats-float.collapsed { width: auto; max-height: none; }
.sys-stats-float.collapsed .sys-stats { display: none; }
.sys-float-toggle {
  display: flex; align-items: center; gap: 8px; width: 100%;
  background: rgba(255,255,255,.05); border: none; color: var(--gc-text);
  padding: 10px 14px; cursor: pointer; font-size: .78rem; letter-spacing: .1em;
  text-transform: uppercase; border-radius: 16px 16px 0 0;
}
.sys-stats-float.collapsed .sys-float-toggle { border-radius: 16px; }
.sys-float-toggle .live-dot {
  width:8px; height:8px; border-radius:50%; background:#34d399; box-shadow:0 0 4px rgba(52,211,153,.55);
  animation: gcPulse 1.4s ease-in-out infinite;
}
@media (max-width: 600px) { .sys-stats-float { display: none; } }

@media (max-width: 480px) {
  .gc-theme-grid { grid-template-columns: repeat(3, 1fr); }
}