/* Aceternity-inspired panel loader + animated backgrounds */

/* ---- Page loader (LoaderOne style) ---- */
.ag-page-loader {
  position: fixed; inset: 0; z-index: 9999;
  display: flex; align-items: center; justify-content: center;
  background: rgba(10, 10, 10, 0.92);
  backdrop-filter: blur(8px);
  transition: opacity 0.45s ease, visibility 0.45s ease;
}
.ag-page-loader.is-done {
  opacity: 0; visibility: hidden; pointer-events: none;
}
.panel-light .ag-page-loader { background: rgba(248, 250, 252, 0.94); }
.ag-loader-one {
  display: flex; align-items: flex-end; justify-content: center;
  gap: 0.35rem; height: 2.5rem;
}
.ag-loader-one span {
  display: block; width: 0.45rem; height: 1.25rem; border-radius: 9999px;
  background: var(--ag-primary, #1A76FD);
  animation: ag-loader-one 0.9s ease-in-out infinite;
}
.ag-loader-one span:nth-child(1) { animation-delay: 0s; }
.ag-loader-one span:nth-child(2) { animation-delay: 0.12s; }
.ag-loader-one span:nth-child(3) { animation-delay: 0.24s; }
.ag-loader-one span:nth-child(4) { animation-delay: 0.36s; }
@keyframes ag-loader-one {
  0%, 100% { transform: scaleY(0.45); opacity: 0.55; }
  50% { transform: scaleY(1.35); opacity: 1; }
}

/* ---- Background shell ---- */
.ag-page-bg, .panel-body.ag-page-bg {
  position: fixed; inset: 0; z-index: -1;
  overflow: hidden; pointer-events: none;
  background-attachment: fixed; background-size: cover; background-position: center;
}
.ag-page-bg__layer {
  position: absolute; inset: 0; pointer-events: none;
}
.ag-page-bg--preset .ag-page-bg__layer { pointer-events: auto; }

/* Ripple */
.ag-bg-ripple {
  display: grid; grid-template-columns: repeat(24, 1fr);
  grid-auto-rows: 2.5rem; width: 100%; height: 100%;
  opacity: 0.35;
}
.ag-bg-ripple-cell {
  border: 1px solid rgba(128, 128, 128, 0.12);
  transition: background 0.35s ease, box-shadow 0.35s ease;
}
.ag-bg-ripple-cell.is-active {
  background: color-mix(in srgb, var(--ag-primary, #1A76FD) 22%, transparent);
  box-shadow: inset 0 0 18px color-mix(in srgb, var(--ag-primary, #1A76FD) 35%, transparent);
}

/* Gradient animation */
.ag-bg-gradient-blobs { filter: blur(60px); opacity: 0.85; }
.ag-bg-gradient-blobs span {
  position: absolute; border-radius: 50%; mix-blend-mode: screen;
  animation: ag-bg-blob 18s ease-in-out infinite alternate;
}
.ag-bg-gradient-blobs span:nth-child(1) {
  width: 55vw; height: 55vw; top: -10%; left: -5%;
  background: radial-gradient(circle, var(--ag-primary, #1A76FD) 0%, transparent 70%);
}
.ag-bg-gradient-blobs span:nth-child(2) {
  width: 45vw; height: 45vw; bottom: -15%; right: -10%;
  background: radial-gradient(circle, #a855f7 0%, transparent 70%);
  animation-delay: -4s;
}
.ag-bg-gradient-blobs span:nth-child(3) {
  width: 40vw; height: 40vw; top: 35%; left: 35%;
  background: radial-gradient(circle, #06b6d4 0%, transparent 70%);
  animation-delay: -8s;
}
@keyframes ag-bg-blob {
  0% { transform: translate(0, 0) scale(1); }
  33% { transform: translate(8%, -6%) scale(1.08); }
  66% { transform: translate(-6%, 8%) scale(0.95); }
  100% { transform: translate(4%, 4%) scale(1.05); }
}

/* Wavy canvas */
.ag-bg-wavy-canvas { width: 100%; height: 100%; display: block; opacity: 0.55; }

/* Beams */
.ag-bg-beams { overflow: hidden; }
.ag-bg-beam {
  position: absolute; top: -20%; width: 2px; height: 140%;
  background: linear-gradient(to bottom, transparent, color-mix(in srgb, var(--ag-primary, #1A76FD) 55%, #fff), transparent);
  opacity: 0.35; animation: ag-bg-beam 8s linear infinite;
}
.ag-bg-beam:nth-child(odd) { animation-duration: 11s; }
.ag-bg-beam-flash {
  position: absolute; width: 12px; height: 12px; border-radius: 50%;
  background: radial-gradient(circle, #fff 0%, var(--ag-primary, #1A76FD) 40%, transparent 70%);
  opacity: 0; transform: translate(-50%, -50%) scale(0.2);
  animation: ag-bg-flash 3.5s ease-in-out infinite;
}
@keyframes ag-bg-beam {
  0% { transform: translateY(-15%) rotate(12deg); }
  100% { transform: translateY(15%) rotate(12deg); }
}
@keyframes ag-bg-flash {
  0%, 78%, 100% { opacity: 0; transform: translate(-50%, -50%) scale(0.2); }
  85% { opacity: 1; transform: translate(-50%, -50%) scale(1.4); }
}

/* Aurora */
.ag-bg-aurora {
  background-image:
    repeating-linear-gradient(100deg, #fff 0%, #fff 7%, transparent 10%, transparent 12%, #fff 16%),
    repeating-linear-gradient(100deg, var(--ag-primary, #1A76FD) 10%, #a855f7 20%, #06b6d4 30%, #818cf8 40%, #22d3ee 50%);
  background-size: 300% 200%, 200% 100%;
  background-position: 50% 50%, 50% 50%;
  filter: blur(28px); opacity: 0.45;
  animation: ag-bg-aurora 14s ease-in-out infinite alternate;
}
@keyframes ag-bg-aurora {
  0% { background-position: 0% 50%, 0% 50%; }
  100% { background-position: 100% 50%, 100% 50%; }
}

/* Grid dots / lines */
.ag-bg-grid-dots {
  background-image: radial-gradient(circle, rgba(128,128,128,0.35) 1px, transparent 1px);
  background-size: 24px 24px; opacity: 0.45;
}
.ag-bg-grid-lines {
  background-image:
    linear-gradient(rgba(128,128,128,0.18) 1px, transparent 1px),
    linear-gradient(90deg, rgba(128,128,128,0.18) 1px, transparent 1px);
  background-size: 48px 48px; opacity: 0.5;
}
.panel-light .ag-bg-grid-dots { background-image: radial-gradient(circle, rgba(0,0,0,0.12) 1px, transparent 1px); }
.panel-light .ag-bg-grid-lines {
  background-image:
    linear-gradient(rgba(0,0,0,0.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,0,0,0.08) 1px, transparent 1px);
}

/* Gemini paths */
.ag-bg-gemini { opacity: 0.55; }
.ag-bg-gemini svg { width: 100%; height: 100%; }
.ag-bg-gemini path {
  fill: none; stroke-width: 1.5;
  stroke: url(#ag-gemini-gradient);
  stroke-dasharray: 1200; stroke-dashoffset: 1200;
  animation: ag-bg-gemini 12s ease-in-out infinite alternate;
}
.ag-bg-gemini path:nth-child(2) { animation-delay: -4s; stroke-width: 1; opacity: 0.65; }
.ag-bg-gemini path:nth-child(3) { animation-delay: -8s; stroke-width: 2; opacity: 0.45; }
@keyframes ag-bg-gemini {
  0% { stroke-dashoffset: 1200; }
  100% { stroke-dashoffset: 0; }
}

/* Admin preset thumbnails */
.ag-bg-preset-card {
  border: 2px solid rgba(255,255,255,0.12); border-radius: 0.65rem;
  padding: 0; cursor: pointer; overflow: hidden; background: #0a0a0a;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.ag-bg-preset-card:hover { border-color: rgba(255,255,255,0.25); }
.ag-bg-preset-card.is-selected {
  border-color: var(--mantine-color-primary-4, #1A76FD);
  box-shadow: 0 0 0 1px rgba(26, 118, 253, 0.35);
}
.ag-bg-preset-thumb {
  height: 4.5rem; position: relative; overflow: hidden;
  background: #0f172a;
}
.ag-bg-preset-meta { padding: 0.55rem 0.65rem; }
.ag-bg-preset-meta strong { display: block; font-size: 0.8125rem; color: #fff; }
.ag-bg-preset-meta span { font-size: 0.6875rem; color: rgba(255,255,255,0.5); }
.ag-bg-preset-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr)); gap: 0.65rem; margin-top: 0.5rem; }

/* Thumbnail mini previews */
.ag-bg-preset-thumb--ripple {
  background-image:
    linear-gradient(rgba(255,255,255,0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.06) 1px, transparent 1px);
  background-size: 14px 14px;
}
.ag-bg-preset-thumb--gradient-animation {
  background: radial-gradient(circle at 20% 30%, #1A76FD 0%, transparent 45%),
    radial-gradient(circle at 80% 70%, #a855f7 0%, transparent 45%), #0f172a;
}
.ag-bg-preset-thumb--wavy {
  background: linear-gradient(180deg, #0f172a 0%, #1e3a5f 100%);
}
.ag-bg-preset-thumb--beams-collision {
  background: linear-gradient(90deg, transparent 48%, rgba(26,118,253,0.35) 50%, transparent 52%), #0a0a0a;
  background-size: 24px 100%;
}
.ag-bg-preset-thumb--aurora {
  background: linear-gradient(120deg, #1A76FD, #a855f7, #06b6d4, #818cf8);
  filter: blur(6px); opacity: 0.85;
}
.ag-bg-preset-thumb--grid-dots {
  background-image: radial-gradient(circle, rgba(255,255,255,0.25) 1px, transparent 1px);
  background-size: 10px 10px; background-color: #0f172a;
}
.ag-bg-preset-thumb--grid-lines {
  background-image:
    linear-gradient(rgba(255,255,255,0.12) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.12) 1px, transparent 1px);
  background-size: 16px 16px; background-color: #0f172a;
}
.ag-bg-preset-thumb--gemini {
  background: #0a0a0a;
  background-image: linear-gradient(135deg, transparent 40%, rgba(26,118,253,0.4) 50%, transparent 60%);
}
.ag-bg-spotlight { background: radial-gradient(600px circle at 50% 0%, color-mix(in srgb, var(--ag-primary,#1A76FD) 35%, transparent), transparent 55%); opacity: 0.9; }
.ag-bg-meteors span { position: absolute; width: 2px; height: 80px; background: linear-gradient(to bottom, rgba(255,255,255,0.8), transparent); animation: ag-bg-meteor 4s linear infinite; opacity: 0.45; }
.ag-bg-meteors span:nth-child(1) { left: 15%; top: -10%; animation-delay: 0s; }
.ag-bg-meteors span:nth-child(2) { left: 45%; top: -20%; animation-delay: 1.2s; }
.ag-bg-meteors span:nth-child(3) { left: 70%; top: -15%; animation-delay: 2.1s; }
.ag-bg-meteors span:nth-child(4) { left: 85%; top: -25%; animation-delay: 0.6s; }
.ag-bg-meteors span:nth-child(5) { left: 30%; top: -18%; animation-delay: 3s; }
@keyframes ag-bg-meteor { 0% { transform: translateY(0) rotate(25deg); opacity: 0; } 10% { opacity: 0.6; } 100% { transform: translateY(120vh) rotate(25deg); opacity: 0; } }
.ag-bg-vortex { background: conic-gradient(from 180deg at 50% 50%, #0a0a0a, color-mix(in srgb, var(--ag-primary,#1A76FD) 40%, #0a0a0a), #a855f7, #0a0a0a); animation: ag-bg-vortex 20s linear infinite; opacity: 0.35; filter: blur(40px); }
@keyframes ag-bg-vortex { to { transform: rotate(360deg); } }
.ag-bg-stars { background-image: radial-gradient(1px 1px at 20px 30px, rgba(255,255,255,0.45), transparent), radial-gradient(1px 1px at 80px 120px, rgba(255,255,255,0.35), transparent), radial-gradient(1.5px 1.5px at 160px 60px, rgba(255,255,255,0.5), transparent); background-size: 200px 200px; animation: ag-bg-stars 8s ease-in-out infinite alternate; opacity: 0.55; }
@keyframes ag-bg-stars { from { opacity: 0.35; } to { opacity: 0.65; } }
.ag-bg-mesh-gradient { background: linear-gradient(135deg, #0f172a, #1A76FD 25%, #a855f7 50%, #06b6d4 75%, #0f172a); background-size: 400% 400%; animation: ag-bg-mesh 16s ease infinite; opacity: 0.45; filter: blur(20px); }
@keyframes ag-bg-mesh { 0%,100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }
.ag-bg-dots-glow { background-image: radial-gradient(circle, color-mix(in srgb, var(--ag-primary,#1A76FD) 55%, #fff) 1px, transparent 1px); background-size: 28px 28px; opacity: 0.35; animation: ag-bg-stars 6s ease-in-out infinite alternate; }
.ag-bg-preset-thumb--spotlight { background: radial-gradient(circle at 50% 0%, rgba(26,118,253,0.5), #0f172a 70%); }
.ag-bg-preset-thumb--meteors { background: #0f172a; background-image: linear-gradient(135deg, transparent 49%, rgba(255,255,255,0.35) 50%, transparent 51%); }
.ag-bg-preset-thumb--vortex { background: conic-gradient(#1A76FD, #a855f7, #0f172a); filter: blur(4px); }
.ag-bg-preset-thumb--stars { background: #0f172a; background-image: radial-gradient(#fff 1px, transparent 1px); background-size: 12px 12px; }
.ag-bg-preset-thumb--mesh-gradient { background: linear-gradient(135deg, #1A76FD, #a855f7, #06b6d4); }
.ag-bg-preset-thumb--dots-glow { background-image: radial-gradient(rgba(26,118,253,0.6) 1px, transparent 1px); background-size: 10px 10px; background-color: #0f172a; }