:root{
  --bg: #0e0f13;
  --surface: #121622;
  --panel: #151a28;
  --text: #e7e7ea;
  --muted: #8a8f9b;
  --border: #232a3c;
  --accent: #7bd88f;
  --size: 32px;     /* global loader size */
  --speed: 1;       /* multiplier (1 = base) */
  --radius: 12px;
  --shadow: 0 10px 30px rgba(0,0,0,.35);
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body{
  margin: 0;
  background:
    radial-gradient(900px 600px at 10% -10%, #1a2030 0%, transparent 60%),
    radial-gradient(900px 600px at 110% 20%, #121520 0%, transparent 60%),
    var(--bg);
  color: var(--text);
  font: 14px/1.6 system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, "Helvetica Neue", Arial, "Noto Sans";
}

/* base layout */
.wrap{ max-width: 1000px; margin: 24px auto 56px; padding: 20px; }
header{
  display: grid; grid-template-columns: 1fr auto; gap: 16px; align-items: center;
  background: linear-gradient(180deg, #151a24, #111521);
  border: 1px solid var(--border); border-radius: 16px; padding: 14px 16px; box-shadow: var(--shadow);
}
header h1{ margin: 0; font-size: 16px; letter-spacing: .3px; }
.controls{ display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.controls label{
  display: inline-flex; align-items: center; gap: 8px; color: var(--muted); font-weight: 600;
  background: #0f1320; border: 1px solid var(--border); padding: 6px 10px; border-radius: 10px;
}
.controls input[type="range"]{ width: 140px; }
.controls input[type="color"]{ border: none; background: transparent; width: 28px; height: 28px; padding: 0; cursor: pointer; }
.controls button{
  background: #0f1320; color: #dfe3ec; border: 1px solid var(--border);
  padding: 8px 12px; border-radius: 10px; cursor: pointer;
}
.controls button[aria-pressed="true"]{ outline: 2px solid var(--accent); }

.gallery{
  display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 16px; margin-top: 18px;
}
.card{
  background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 16px;
  display: grid; place-items: center; gap: 10px; min-height: 140px;
}
.card label{ color: var(--muted); font-weight: 600; }
.notes{
  margin-top: 16px; background: #11151e; border: 1px solid var(--border); color: #cfd3dc; border-radius: 12px; padding: 12px 14px;
}

/* Pause all animations */
body[data-paused="true"] *{ animation-play-state: paused !important; }

/* Reduced motion */
/* @media (prefers-reduced-motion: reduce){
  *{ animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
} */

/* ---------- Loader base ---------- */
.loader{ display: inline-grid; place-items: center; will-change: transform, opacity; }

/* 1) Spinner — fixed */
.spinner{
  width: var(--size);
  height: var(--size);
  /* clear wedge so rotation is always visible */
  border: calc(var(--size) / 8) solid transparent;
  border-top-color: var(--accent);
  border-radius: 50%;
  /* faster when --speed increases */
  animation: spin calc(0.9s / var(--speed)) linear infinite;
}

/* 2) Dual Ring */
.dual-ring{ position: relative; width: var(--size); height: var(--size); }
.dual-ring::before,
.dual-ring::after{
  content:""; position: absolute; inset: 0; border: calc(var(--size)/10) solid transparent; border-radius: 50%;
}
.dual-ring::before{
  border-top-color: var(--accent); border-left-color: var(--accent);
  animation: spin calc(1.1s * var(--speed)) linear infinite;
}
.dual-ring::after{
  border-bottom-color: rgba(255,255,255,.12); border-right-color: rgba(255,255,255,.12);
  animation: spin-rev calc(1.1s * var(--speed)) linear infinite;
}

/* 3) Dots Pulse */
.dots-pulse{ display: inline-flex; gap: calc(var(--size)/6); }
.dots-pulse span{
  width: calc(var(--size)/4); height: calc(var(--size)/4); border-radius: 50%;
  background: var(--accent); opacity: .5; animation: pulse calc(1.2s * var(--speed)) ease-in-out infinite;
}
.dots-pulse span:nth-child(2){ animation-delay: .15s; }
.dots-pulse span:nth-child(3){ animation-delay: .30s; }

/* 4) Dots Bounce */
.dots-bounce{ display: inline-flex; gap: calc(var(--size)/6); align-items: flex-end; }
.dots-bounce span{
  width: calc(var(--size)/4); height: calc(var(--size)/4); border-radius: 50%;
  background: var(--accent); animation: bounce calc(0.9s * var(--speed)) ease-in-out infinite;
}
.dots-bounce span:nth-child(2){ animation-delay: .1s; }
.dots-bounce span:nth-child(3){ animation-delay: .2s; }

/* 5) Bar Indeterminate */
.bar-indeterminate{
  width: 100%; height: calc(var(--size)/3.2); background: rgba(255,255,255,.06);
  border-radius: 999px; overflow: hidden; position: relative;
}
.bar-indeterminate::before{
  content:""; position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent 0%, var(--accent) 50%, transparent 100%);
  width: 40%; border-radius: inherit; animation: slide-x calc(1.2s * var(--speed)) ease-in-out infinite;
}

/* 6) Bar Stripes */
.bar-stripes{
  width: 100%; height: calc(var(--size)/3.2);
  background: repeating-linear-gradient(45deg, rgba(255,255,255,.08) 0 10px, rgba(255,255,255,.02) 10px 20px);
  border: 1px solid rgba(255,255,255,.08); border-radius: 999px; position: relative; overflow: hidden;
}
.bar-stripes::after{
  content:""; position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, rgba(123,216,143,.25), transparent);
  animation: stripes calc(1.1s * var(--speed)) linear infinite;
}

/* 7) Ripple */
.ripple{ position: relative; width: var(--size); height: var(--size); }
.ripple::before, .ripple::after{
  content:""; position: absolute; inset: 0; border-radius: 50%; border: 3px solid var(--accent); opacity: .7;
  animation: ripple calc(1.8s * var(--speed)) ease-out infinite;
}
.ripple::after{ animation-delay: .45s; opacity: .4; }

/* 8) Pulse */
.pulse{
  width: var(--size); height: var(--size); border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #9cf5b0, var(--accent));
  filter: saturate(1.2); animation: pulse2 calc(1.2s * var(--speed)) ease-in-out infinite;
}

/* --- Ring Dash (SVG) — FIX --- */
.ring-dash svg{
  width: calc(var(--size) * 1.6);
  height: calc(var(--size) * 1.6);
  display: block;
  overflow: visible;            /* ensure stroke not clipped */
}

.ring-dash circle{
  fill: none;
  stroke: var(--accent);
  stroke-width: 6;
  stroke-linecap: round;

  /* stable dash + motion (r=16 => ~100px circumference) */
  stroke-dasharray: 60 100;
  stroke-dashoffset: 0;

  /* make rotation center reliable across browsers */
  transform-box: fill-box;
  transform-origin: 50% 50%;

  /* speed slider now truly speeds it up */
  animation:
    ring-rot calc(1.4s / var(--speed)) linear infinite,
    ring-dash calc(1.2s / var(--speed)) ease-in-out infinite;
}

/* rotate the ring */
@keyframes ring-rot{
  to { transform: rotate(360deg); }
}

/* grow/shrink dash + move it around the ring */
@keyframes ring-dash{
  0%   { stroke-dasharray: 1 100;  stroke-dashoffset:   0; }
  50%  { stroke-dasharray: 60 100; stroke-dashoffset: -25; }
  100% { stroke-dasharray: 1 100;  stroke-dashoffset: -100; }
}

/* --- Infinity (SVG path) — FIX --- */
/* --- Infinity (SVG path) — JS-driven, no CSS animation --- */
.infinity svg{
  width: calc(var(--size) * 2.4);
  height: calc(var(--size) * 1.2);
  display: block;
  overflow: visible;                 /* stroke clip na ho */
}
.infinity .loop{
  fill: none;
  stroke: var(--accent);
  stroke-width: 6;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
  /* IMPORTANT: ensure old CSS animations don't interfere */
  animation: none !important;
}




/* 11) Hourglass (mask fixed) */
.hourglass{
  width: var(--size); height: var(--size); position: relative; border-radius: 8px;
  background: conic-gradient(from 0deg, var(--accent) 0 90deg, transparent 90deg 180deg, var(--accent) 180deg 270deg, transparent 270deg);
  -webkit-mask: radial-gradient(circle at 50% 50%, transparent 44%, #fff 45%);
  mask: radial-gradient(circle at 50% 50%, transparent 44%, #fff 45%);
  animation: flip calc(1.1s * var(--speed)) linear infinite;
}

/* 12) Radar */
.radar{
  width: calc(var(--size) * 1.6); height: calc(var(--size) * 1.6); border-radius: 50%;
  background:
    radial-gradient(circle at 50% 50%, rgba(123,216,143,.25), transparent 60%),
    radial-gradient(circle at 50% 50%, rgba(255,255,255,.06) 2px, transparent 2px),
    radial-gradient(circle at 50% 50%, rgba(255,255,255,.06) 4px, transparent 4px);
  position: relative; overflow: hidden;
}
.radar::after{
  content:""; position:absolute; inset:-10% -10%;
  background: conic-gradient(from 0deg, rgba(123,216,143,0), rgba(123,216,143,.45));
  animation: spin calc(2s * var(--speed)) linear infinite;
}

/* 13) Equalizer */
.equalizer{ display: inline-flex; gap: calc(var(--size)/6); align-items: end; height: calc(var(--size) * 1.2); }
.equalizer span{ width: calc(var(--size)/6); background: var(--accent); border-radius: 4px; animation: eq calc(1.2s * var(--speed)) ease-in-out infinite; }
.equalizer span:nth-child(2){ animation-delay: .1s }
.equalizer span:nth-child(3){ animation-delay: .2s }
.equalizer span:nth-child(4){ animation-delay: .3s }
.equalizer span:nth-child(5){ animation-delay: .4s }

/* 14) Typing */
.typing{ display: inline-flex; gap: 6px; }
.typing span{ width: 6px; height: 6px; border-radius: 50%; background: var(--accent); opacity: .3; animation: typing calc(1.1s * var(--speed)) ease-in-out infinite; }
.typing span:nth-child(2){ animation-delay: .15s }
.typing span:nth-child(3){ animation-delay: .3s }

/* 15) Tiles 3x3 */
/* 15) Tiles 3×3 — FIXED */
.tiles{
  width: calc(var(--size) * 1.4);
  height: calc(var(--size) * 1.4);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 1fr;               /* ← rows fill container */
  gap: 6px;
}

.tiles span{
  width: 100%;                        /* ← each tile fills its cell */
  height: 100%;
  background: var(--accent);
  opacity: .3;
  border-radius: 6px;
  will-change: transform, opacity;
  animation: tile calc(1.2s / var(--speed)) ease-in-out infinite; /* speed ↑ = faster */
}

/* subtle staggering */
.tiles span:nth-child(odd){ animation-delay: .15s; }
.tiles span:nth-child(3n+2){ animation-delay: .30s; }


/* 16) Coil */
.coil{ position: relative; width: calc(var(--size) * 1.4); height: calc(var(--size) * 1.4); }
.coil span{
  position: absolute; inset: 0; border-radius: 50%;
  border: 3px solid rgba(255,255,255,.08); border-top-color: var(--accent);
  transform: rotate(0deg) scale(1); animation: coil calc(1.8s * var(--speed)) ease-in-out infinite;
}
.coil span:nth-child(2){ inset: 8%; animation-delay: .15s; }
.coil span:nth-child(3){ inset: 16%; animation-delay: .3s; }
.coil span:nth-child(4){ inset: 24%; animation-delay: .45s; }

/* 17) Comet */
.comet{
  width: calc(var(--size) * 1.6); height: calc(var(--size) * 1.6); position: relative;
  background: radial-gradient(circle at 50% 50%, rgba(255,255,255,.05), transparent 60%);
  border-radius: 50%; overflow: hidden;
}
.comet::after{
  content: ""; position: absolute; left: 50%; top: 50%;
  width: 8px; height: 8px; border-radius: 50%; background: var(--accent);
  box-shadow:
    -16px 0 0 0 rgba(123,216,143,.35),
    -32px 0 0 0 rgba(123,216,143,.2),
    -48px 0 0 0 rgba(123,216,143,.08);
  transform: translate(-50%,-50%) rotate(0deg) translateX(30px);
  transform-origin: 50% 50%;
  animation: comet calc(1.4s * var(--speed)) linear infinite;
}

/* 18) Arc Spinner (mask fixed) */
.arc{
  width: var(--size); height: var(--size); border-radius: 50%;
  background: conic-gradient(from 0deg, var(--accent) 0 90deg, transparent 90deg 360deg);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 6px), #fff 0);
  mask: radial-gradient(farthest-side, transparent calc(100% - 6px), #fff 0);
  animation: spin calc(0.9s * var(--speed)) linear infinite;
}

/* 19) Skeleton Line */
.skeleton-line{ width: 100%; height: 12px; border-radius: 999px; overflow: hidden; position: relative; background: #1a2130; border: 1px solid var(--border); }
.skeleton-line::after{
  content:""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgba(255,255,255,.08), transparent);
  transform: translateX(-100%); animation: shimmer calc(1.2s * var(--speed)) linear infinite;
}

/* 20) Skeleton Card */
.skeleton-card{ width: 100%; display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto auto; gap: 10px 12px; }
.skeleton-card .ph{ background: #1a2130; position: relative; overflow: hidden; border-radius: 8px; min-height: 12px; }
.skeleton-card .avatar{ width: 44px; height: 44px; grid-row: 1 / span 2; border-radius: 50%; }
.skeleton-card .line{ height: 12px; }
.skeleton-card .w60{ width: 60%; }
.skeleton-card .w80{ width: 80%; }
.skeleton-card .ph::after{
  content:""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgba(255,255,255,.08), transparent);
  transform: translateX(-100%); animation: shimmer calc(1.4s * var(--speed)) linear infinite;
}

/* 21) Wave */
.wave{ display: inline-flex; gap: 6px; align-items: end; height: calc(var(--size) * 1.2); }
.wave span{ width: 6px; background: var(--accent); border-radius: 999px; animation: wave calc(1.2s * var(--speed)) ease-in-out infinite; }
.wave span:nth-child(2){ animation-delay: .1s }
.wave span:nth-child(3){ animation-delay: .2s }
.wave span:nth-child(4){ animation-delay: .3s }
.wave span:nth-child(5){ animation-delay: .4s }

/* 22) Flip 3D */
.flip3d{ width: var(--size); height: var(--size); background: var(--accent); transform-style: preserve-3d; animation: flip3d calc(1.3s * var(--speed)) ease-in-out infinite; }

/* 23) Triangle Spin */
.tri{
  width: 0; height: 0;
  border-left: calc(var(--size)/1.2) solid transparent;
  border-right: calc(var(--size)/1.2) solid transparent;
  border-bottom: calc(var(--size)*1.2) solid var(--accent);
  filter: drop-shadow(0 6px 16px rgba(0,0,0,.3));
  animation: spin calc(1.2s * var(--speed)) linear infinite;
}

/* 24) Orbit */
.orbit{
  /* radius scales with global --size */
  --orbit-r: calc(var(--size) * 0.9);
  --dot: clamp(6px, calc(var(--size) / 4.5), 12px);

  position: relative;
  width: calc(var(--size) * 1.8);
  height: calc(var(--size) * 1.8);
  border-radius: 50%;
  overflow: visible;                 /* dots never clip */
}

.orbit span{
  position: absolute;
  top: 50%; left: 50%;
  width: var(--dot); height: var(--dot);
  border-radius: 50%;
  background: var(--accent);

  /* anchor rotation at the center of the orbit */
  transform-origin: 0 0;
  /* start all at 0°, push them outward by radius */
  transform: rotate(0deg) translateX(var(--orbit-r));

  will-change: transform;
  animation: orbit-spin calc(1.4s / var(--speed)) linear infinite;
}

/* phase offsets via negative delay (not via different start rotation) */
.orbit .p1{ animation-delay: 0s; }
.orbit .p2{ animation-delay: calc(-1.4s / var(--speed) / 3);  opacity: .75; }
.orbit .p3{ animation-delay: calc(-1.4s / var(--speed) * 2 / 3); opacity: .55; }

@keyframes orbit-spin{
  to { transform: rotate(360deg) translateX(var(--orbit-r)); }
}

/* ---------- Keyframes ---------- */
@keyframes spin{ to{ transform: rotate(360deg); } }
@keyframes spin-rev{ to{ transform: rotate(-360deg); } }
@keyframes pulse{ 50%{ transform: scale(1.3); opacity: 1; } }
@keyframes bounce{ 50%{ transform: translateY(-40%); } }
@keyframes slide-x{ 0%{ transform: translateX(-60%); } 50%{ transform: translateX(40%); } 100%{ transform: translateX(140%); } }
@keyframes stripes{ to{ transform: translateX(60%); } }
@keyframes ripple{ 0%{ transform: scale(.2); opacity: .85; } 100%{ transform: scale(1); opacity: 0; } }
@keyframes pulse2{ 0%,100%{ transform: scale(1); filter: brightness(1); } 50%{ transform: scale(1.15); filter: brightness(1.12); } }
@keyframes dash{ 0%{ stroke-dasharray: 1 120; stroke-dashoffset: 0; } 50%{ stroke-dasharray: 80 120; stroke-dashoffset: -40; } 100%{ stroke-dasharray: 1 120; stroke-dashoffset: -120; } }
@keyframes dash2{ to{ stroke-dashoffset: -240; } }
@keyframes flip{ to{ transform: rotate(180deg); } }
@keyframes eq{ 0%,100%{ height: 20%; } 50%{ height: 100%; } }
@keyframes typing{ 0%,80%,100%{ opacity: .2; transform: translateY(0); } 40%{ opacity: 1; transform: translateY(-20%); } }
@keyframes tile{ 0%,100%{ transform: scale(.6); opacity: .4; } 50%{ transform: scale(1); opacity: 1; } }
@keyframes coil{ 0%,100%{ transform: rotate(0deg) scale(.9); } 50%{ transform: rotate(180deg) scale(1); } }
@keyframes comet{ to{ transform: translate(-50%,-50%) rotate(360deg) translateX(30px); } }
@keyframes shimmer{ to{ transform: translateX(100%); } }
@keyframes wave{ 0%,100%{ height: 20%; } 50%{ height: 90%; } }
@keyframes flip3d{ 0%{ transform: rotateX(0) rotateY(0); } 50%{ transform: rotateX(180deg) rotateY(0); } 100%{ transform: rotateX(180deg) rotateY(180deg); } }
@keyframes orbit{ to{ transform: translate(-50%,-50%) rotate(360deg) translateX(28px); } }

/* Light theme */
body.light{
  --bg: #f7f8fb; --surface: #ffffff; --panel: #f3f6ff; --text: #0a0e18; --muted: #4d5565; --border: #dce2ee;
}