/* ═══════════════════════════════════════════════════════════════════
   serjik.net — futuristic dark design system
   Loaded AFTER each page's inline <style> so these rules win for the
   shared component classes. Tokens below intentionally redefine the
   variable names the per-page CSS already uses.
   ═══════════════════════════════════════════════════════════════════ */

:root {
  --bg:       #06070d;
  --surface:  #0d1020;   /* solid — used by inner rows, selects, tooltips */
  --surface2: #151a2e;
  --border:   #222842;
  --accent:   #6c5ce7;
  --accent2:  #ff2e9a;
  --cyan:     #00d4ff;
  --magenta:  #ff2e9a;
  --text:     #e8eaf2;
  --muted:    #8b90a5;
  --green:    #00e6a8;
  --red:      #ff5470;
  --blue:     #00d4ff;

  --glass:        rgba(255, 255, 255, .04);
  --glass-border: rgba(255, 255, 255, .09);
  --grad-accent:  linear-gradient(135deg, var(--accent), var(--cyan));
  --grad-tri:     linear-gradient(110deg, var(--accent), var(--cyan), var(--magenta), var(--accent));
}

/* ── Base ───────────────────────────────────────────────────────── */

html { background: var(--bg); scroll-behavior: smooth; }
body {
  background: transparent;   /* canvas + orbs sit at negative z-index */
  color: var(--text);
  font-family: 'Inter', 'Segoe UI', system-ui, sans-serif;
}
h1, h2, h3, .card-title, .logo, .hero h1 {
  font-family: 'Space Grotesk', 'Inter', 'Segoe UI', system-ui, sans-serif;
}

::selection { background: rgba(108, 92, 231, .45); color: #fff; }

* { scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.14) transparent; }
*::-webkit-scrollbar { width: 8px; height: 8px; }
*::-webkit-scrollbar-thumb { background: rgba(255,255,255,.12); border-radius: 4px; }
*::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,.2); }
*::-webkit-scrollbar-track { background: transparent; }

/* ── Background: particle canvas + drifting orbs ─────────────────── */

.fx-canvas {
  position: fixed; inset: 0;
  width: 100vw; height: 100vh;
  z-index: -2;
  pointer-events: none;
}

/* Replace the per-page body::before/::after blur orbs */
body::before, body::after { display: none !important; }

.bg-orb {
  position: fixed;
  border-radius: 50%;
  filter: blur(110px);
  opacity: .13;
  pointer-events: none;
  z-index: -1;
}
.fx-orb-a { width: 620px; height: 620px; background: var(--accent);  top: -220px; left: -180px; animation: orbDriftA 26s ease-in-out infinite alternate; }
.fx-orb-b { width: 520px; height: 520px; background: var(--cyan);    bottom: -200px; right: -160px; opacity: .09; animation: orbDriftB 32s ease-in-out infinite alternate; }
.fx-orb-c { width: 420px; height: 420px; background: var(--magenta); top: 40%; left: 55%; opacity: .07; animation: orbDriftC 38s ease-in-out infinite alternate; }

@keyframes orbDriftA { from { transform: translate(0, 0) scale(1); }    to { transform: translate(120px, 90px) scale(1.15); } }
@keyframes orbDriftB { from { transform: translate(0, 0) scale(1.1); }  to { transform: translate(-140px, -70px) scale(.95); } }
@keyframes orbDriftC { from { transform: translate(0, 0) scale(.9); }   to { transform: translate(-90px, 120px) scale(1.2); } }

/* ── Gradient text utility ───────────────────────────────────────── */

.grad-text, h1.grad-text, .logo h1.grad-text {
  background: var(--grad-tri);
  background-size: 300% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  animation: gradShift 9s ease-in-out infinite;
}
@keyframes gradShift {
  0%, 100% { background-position: 0% 50%; }
  50%      { background-position: 100% 50%; }
}

/* ── Glassmorphism surfaces ──────────────────────────────────────── */

.card, .sidebar, .detail, .table-wrap, .box,
.chart-card, .ai-panel, .summary-card, .stat-card,
.filters, .tabs,
.modal, .cmodal-box, .picker-box {
  background: var(--glass);
  border: 1px solid var(--glass-border);
  border-radius: 20px;
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}

.modal, .cmodal-box, .picker-box {
  background: rgba(13, 16, 32, .82);   /* modals need more opacity to read */
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
  box-shadow: 0 24px 80px rgba(0, 0, 0, .6);
}
.modal-overlay, .cmodal-overlay, .picker-overlay {
  background: rgba(3, 4, 9, .66);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}

/* Hover lift + cursor-following glow — true "cards" only */
.card, .chart-card, .summary-card, .stat-card, .box {
  position: relative;
  transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}
.card:hover, .chart-card:hover, .summary-card:hover, .stat-card:hover, .box:hover {
  transform: translateY(-4px);
  border-color: rgba(0, 212, 255, .22);
  box-shadow: 0 14px 48px rgba(0, 0, 0, .5), 0 0 32px rgba(108, 92, 231, .12);
}
.card::after, .chart-card::after, .summary-card::after, .stat-card::after, .box::after {
  content: '';
  position: absolute; inset: 0;
  border-radius: inherit;
  background: radial-gradient(560px circle at var(--mx, 50%) var(--my, 50%),
              rgba(0, 212, 255, .075), transparent 42%);
  opacity: 0;
  transition: opacity .35s ease;
  pointer-events: none;
}
.card:hover::after, .chart-card:hover::after, .summary-card:hover::after,
.stat-card:hover::after, .box:hover::after { opacity: 1; }

/* ── Buttons ─────────────────────────────────────────────────────── */

.btn, .btn-accent, .btn-ghost, .btn-add, .btn-nav, .btn-auth,
.btn-sm, .btn-icon, .btn-logout, .btn-edit, .btn-bday,
.range-btn, .tab, .btn-chart-pick {
  border-radius: 999px;
}

.btn-accent, .btn-add, .btn-auth.sign-in, .btn-green {
  background: var(--grad-accent);
  border: none;
  color: #fff;
  box-shadow: 0 4px 18px rgba(108, 92, 231, .35), 0 2px 8px rgba(0, 212, 255, .15);
  transition: box-shadow .2s ease, transform .15s ease, opacity .15s ease;
}
.btn-accent:hover, .btn-add:hover, .btn-auth.sign-in:hover, .btn-green:hover {
  opacity: 1;
  transform: translateY(-1px);
  box-shadow: 0 6px 26px rgba(108, 92, 231, .5), 0 2px 12px rgba(0, 212, 255, .28);
}

.btn-ghost, .btn-nav, .btn-auth:not(.sign-in), .btn-logout, .btn-chart-pick {
  background: var(--glass);
  border: 1px solid var(--glass-border);
  color: var(--muted);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
.btn-ghost:hover, .btn-nav:hover, .btn-chart-pick:hover {
  border-color: rgba(0, 212, 255, .4);
  color: var(--cyan);
  opacity: 1;
}
.btn-nav.logout:hover, .btn-auth.logout:hover { border-color: rgba(255, 84, 112, .5); color: var(--red); }

.range-btn.active, .tab.active {
  background: var(--grad-accent);
  border-color: transparent;
  color: #fff;
  box-shadow: 0 2px 12px rgba(108, 92, 231, .35);
}

/* ── Inputs ──────────────────────────────────────────────────────── */

input[type=text], input[type=number], input[type=date], input[type=time],
input[type=password], input[type=email], input[type=tel], input[type=url],
input[type=search], select, textarea {
  background: rgba(255, 255, 255, .03);
  border: 1px solid var(--glass-border);
  color: var(--text);
  transition: border-color .15s ease, box-shadow .15s ease;
}
input:focus, select:focus, textarea:focus {
  border-color: rgba(0, 212, 255, .55);
  box-shadow: 0 0 0 3px rgba(0, 212, 255, .12);
  outline: none;
}
select option { background: var(--surface); color: var(--text); }

/* ── Tables ──────────────────────────────────────────────────────── */

th { border-bottom: 1px solid var(--glass-border); }
td { border-bottom: 1px solid rgba(255, 255, 255, .055); }
tbody tr:hover td, tbody tr:hover { background: rgba(255, 255, 255, .025); }

/* ── Sticky nav / headers ────────────────────────────────────────── */

.topnav, .header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(6, 7, 13, .55);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid transparent;
  transition: background .25s ease, border-color .25s ease, box-shadow .25s ease;
}
.topnav.scrolled, .header.scrolled {
  background: rgba(6, 7, 13, .78);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
  border-bottom: 1px solid var(--glass-border);
  box-shadow: 0 8px 32px rgba(0, 0, 0, .35);
}

/* Animated gradient underline on nav tabs/links */
.tab-btn { position: relative; border-bottom: 2px solid transparent; }
.tab-btn::after {
  content: '';
  position: absolute; left: 10%; right: 10%; bottom: -2px;
  height: 2px;
  background: var(--grad-accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .25s ease;
}
.tab-btn:hover::after { transform: scaleX(1); }
.tab-btn.active { border-bottom-color: transparent; color: var(--cyan); }
.tab-btn.active::after { transform: scaleX(1); }

/* ── Hero (public pages) ─────────────────────────────────────────── */

.hero h1.fx-hero-h1 {
  font-size: clamp(2.8rem, 8vw, 5.4rem);
  font-weight: 700;
  line-height: 1.04;
  letter-spacing: -0.03em;
  margin-bottom: .9rem;
  background: none;
  -webkit-text-fill-color: currentColor;
  color: var(--text);
}
.hero-line { display: block; overflow: hidden; padding-bottom: .08em; margin-bottom: -.08em; }
.hero-line-inner {
  display: inline-block;
  transform: translateY(112%);
  animation: lineRise .9s cubic-bezier(.16, 1, .3, 1) forwards;
}
.hero-line:nth-child(2) .hero-line-inner { animation-delay: .12s; }
.hero-line:nth-child(3) .hero-line-inner { animation-delay: .24s; }
@keyframes lineRise { to { transform: translateY(0); } }

.hero-sub {
  color: var(--muted);
  font-size: clamp(1rem, 2.2vw, 1.2rem);
  animation: heroFade 1s .5s ease both;
}
@keyframes heroFade { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

.scroll-hint {
  width: 2px; height: 46px;
  margin: 2.4rem auto 0;
  background: linear-gradient(180deg, var(--cyan), transparent);
  border-radius: 1px;
  animation: hintPulse 2.2s ease-in-out infinite;
}
@keyframes hintPulse {
  0%, 100% { opacity: .25; transform: scaleY(.6); transform-origin: top; }
  50%      { opacity: 1;   transform: scaleY(1); }
}

/* ── Scroll reveals (gated on html.fx so no-JS users see content) ── */

html.fx .reveal {
  opacity: 0;
  transform: translateY(36px);
  transition: opacity .7s ease var(--d, 0s),
              transform .7s cubic-bezier(.16, 1, .3, 1) var(--d, 0s);
}
html.fx .reveal.in { opacity: 1; transform: none; }
a.reveal { display: block; }   /* anchors need block display for the transform */

/* Stagger siblings revealed together */
.reveal:nth-child(2) { --d: .06s; }
.reveal:nth-child(3) { --d: .12s; }
.reveal:nth-child(4) { --d: .18s; }
.reveal:nth-child(5) { --d: .24s; }
.reveal:nth-child(6) { --d: .30s; }
.reveal:nth-child(7) { --d: .36s; }
.reveal:nth-child(8) { --d: .42s; }

/* ── Reduced motion: kill it all, show everything ────────────────── */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  html.fx .reveal { opacity: 1 !important; transform: none !important; }
  .hero-line-inner { transform: none !important; animation: none !important; }
  .hero-sub { opacity: 1 !important; animation: none !important; }
  .scroll-hint { display: none; }
  .grad-text { animation: none !important; }
}