/* =====================================================================
   auraMatch — shared dark theme
   Loaded by index.html and admin.html so both surfaces stay in step.
   ===================================================================== */

:root{
  /* Ground */
  --bg:        #07070c;
  --bg-2:      #0b0b14;
  --surface:   rgba(255,255,255,.035);
  --surface-2: rgba(255,255,255,.06);
  --line:      rgba(255,255,255,.09);
  --line-2:    rgba(255,255,255,.14);

  /* Ink */
  --text:      #f2f2f7;
  --text-2:    #a8a8bd;
  --text-3:    #6f6f86;

  /* Accent */
  --a-400:     #a78bfa;
  --a-500:     #8b5cf6;
  --a-600:     #6d43e8;
  --cyan:      #22d3ee;
  --glow:      rgba(139,92,246,.45);
}

*{ box-sizing:border-box; }
html,body{ background:var(--bg); }
body{
  color:var(--text);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
::selection{ background:rgba(139,92,246,.35); color:#fff; }

/* Scrollbar --------------------------------------------------------- */
::-webkit-scrollbar{ width:10px; height:10px; }
::-webkit-scrollbar-track{ background:transparent; }
::-webkit-scrollbar-thumb{ background:rgba(255,255,255,.10); border-radius:99px; border:2px solid transparent; background-clip:content-box; }
::-webkit-scrollbar-thumb:hover{ background:rgba(255,255,255,.18); background-clip:content-box; }

/* Ambient background: grid + drifting glow ------------------------- */
.bg-field{
  position:fixed; inset:0; z-index:-1; pointer-events:none;
  background:
    radial-gradient(60% 45% at 15% 0%,  rgba(109,67,232,.22) 0%, transparent 62%),
    radial-gradient(50% 40% at 88% 8%,  rgba(34,211,238,.13) 0%, transparent 60%),
    radial-gradient(55% 45% at 50% 100%,rgba(139,92,246,.13) 0%, transparent 65%),
    var(--bg);
}
.bg-grid{
  position:fixed; inset:0; z-index:-1; pointer-events:none; opacity:.5;
  background-image:
    linear-gradient(rgba(255,255,255,.038) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.038) 1px, transparent 1px);
  background-size:64px 64px;
  mask-image: radial-gradient(75% 60% at 50% 30%, #000 0%, transparent 100%);
  -webkit-mask-image: radial-gradient(75% 60% at 50% 30%, #000 0%, transparent 100%);
}

/* Glass surfaces ---------------------------------------------------- */
.glass{
  background:var(--surface);
  border:1px solid var(--line);
  backdrop-filter:blur(14px) saturate(150%);
  -webkit-backdrop-filter:blur(14px) saturate(150%);
}
.glass-strong{
  background:linear-gradient(180deg, rgba(20,20,32,.92), rgba(12,12,20,.96));
  border:1px solid var(--line-2);
  backdrop-filter:blur(22px) saturate(160%);
  -webkit-backdrop-filter:blur(22px) saturate(160%);
}

/* A hairline highlight along the top edge — reads as "lit from above" */
.edge-lit{ position:relative; }
.edge-lit::before{
  content:''; position:absolute; inset:0 0 auto 0; height:1px; border-radius:inherit;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.28), transparent);
}

/* Buttons ----------------------------------------------------------- */
.btn-primary{
  background:linear-gradient(180deg, var(--a-500), var(--a-600));
  box-shadow:0 1px 0 rgba(255,255,255,.18) inset, 0 10px 30px -10px var(--glow);
  transition:transform .18s cubic-bezier(.22,.61,.36,1), box-shadow .25s, filter .2s;
}
.btn-primary:hover{ filter:brightness(1.08); box-shadow:0 1px 0 rgba(255,255,255,.22) inset, 0 16px 40px -12px var(--glow); }
.btn-primary:active{ transform:scale(.985); }
.btn-primary:disabled{ background:rgba(255,255,255,.07); box-shadow:none; color:var(--text-3); cursor:not-allowed; filter:none; }

.btn-ghost{
  background:var(--surface); border:1px solid var(--line); transition:background .2s, border-color .2s, transform .18s;
}
.btn-ghost:hover{ background:var(--surface-2); border-color:var(--line-2); }
.btn-ghost:active{ transform:scale(.985); }

/* Monospace micro-labels give the "tech" register -------------------- */
.mono{ font-family:'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace; }
.label{ font-size:10.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--text-3); }

/* Skeleton ---------------------------------------------------------- */
.skeleton{
  background:linear-gradient(100deg, rgba(255,255,255,.04) 30%, rgba(255,255,255,.09) 48%, rgba(255,255,255,.04) 66%);
  background-size:220% 100%; animation:shimmer 1.4s linear infinite;
}
@keyframes shimmer{ to{ background-position:-220% 0; } }

/* Scan ring + sweep -------------------------------------------------- */
.scan-ring::before,.scan-ring::after{
  content:''; position:absolute; inset:0; border-radius:9999px;
  border:1px solid rgba(167,139,250,.6);
  animation:pulseRing 2.4s cubic-bezier(.22,.61,.36,1) infinite;
}
.scan-ring::after{ animation-delay:1.2s; }
@keyframes pulseRing{
  0%{ transform:scale(.9); opacity:.9; }
  70%,100%{ transform:scale(1.25); opacity:0; }
}
.scan-sweep{
  position:absolute; left:0; right:0; height:34%;
  background:linear-gradient(180deg, transparent, rgba(167,139,250,.28) 55%, transparent);
  animation:sweep 2.2s ease-in-out infinite;
}
@keyframes sweep{ 0%,100%{ top:-34%; } 50%{ top:100%; } }

/* Shutter flash ------------------------------------------------------ */
.flash{ animation:flash .42s ease-out; }
@keyframes flash{ 0%{ opacity:.92; } 100%{ opacity:0; } }

/* Indeterminate progress --------------------------------------------- */
.bar-indeterminate{
  position:absolute; inset:0; width:40%;
  background:linear-gradient(90deg, transparent, var(--a-400), transparent);
  animation:slide 1.15s ease-in-out infinite;
}
@keyframes slide{ 0%{ transform:translateX(-100%); } 100%{ transform:translateX(350%); } }

/* Masonry ------------------------------------------------------------ */
.masonry{ column-gap:14px; column-count:2; }
@media (min-width:768px){ .masonry{ column-count:3; } }
@media (min-width:1280px){ .masonry{ column-count:4; } }
.masonry > *{ break-inside:avoid; margin-bottom:14px; display:block; }

.tap{ -webkit-tap-highlight-color:transparent; }

/* Lenis --------------------------------------------------------------- */
html.lenis{ height:auto; }
.lenis.lenis-smooth{ scroll-behavior:auto !important; }
.lenis.lenis-stopped{ overflow:hidden; }

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; }
}