/* ============ FitStack — global styles & animations ============ */
:root {
  --bg: #f6f8f7;
  --surface: #ffffff;
  --text: #1f2937;
  --muted: #64748b;
  --border: #e6ebe8;
  --brand: #0c8e65;
  --brand-soft: #d6f9e8;
  --ring: rgba(23,176,123,.35);
  --shadow: 0 10px 30px -12px rgba(12,113,83,.25);
}
/* Premium (dark + gold) theme */
.theme-premium {
  --bg: #0b0f14;
  --surface: #141a22;
  --text: #f1ece0;
  --muted: #9aa4b2;
  --border: #26303b;
  --brand: #e0ab34;
  --brand-soft: #2a2416;
  --ring: rgba(238,196,90,.35);
  --shadow: 0 16px 40px -14px rgba(0,0,0,.6);
}

* { -webkit-tap-highlight-color: transparent; }
html { scroll-behavior: smooth; }
body { background: var(--bg); color: var(--text); transition: background .5s ease, color .4s ease; }

::selection { background: var(--brand); color: #fff; }

/* Scrollbar */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #cbd5d1; border-radius: 99px; border: 2px solid transparent; background-clip: padding-box; }
.theme-premium ::-webkit-scrollbar-thumb { background: #33404d; background-clip: padding-box; }

/* Themed helpers */
.fs-surface { background: var(--surface); border-color: var(--border); }
.fs-text-muted { color: var(--muted); }
.fs-border { border-color: var(--border); }
.fs-brand { color: var(--brand); }
.fs-bg-brand { background: var(--brand); }
.fs-brand-soft { background: var(--brand-soft); }
.fs-shadow { box-shadow: var(--shadow); }

/* ---------- Animations ---------- */
@keyframes fs-fade-up { from { opacity:0; transform: translateY(18px); } to { opacity:1; transform:none; } }
@keyframes fs-fade { from { opacity:0 } to { opacity:1 } }
@keyframes fs-scale-in { from { opacity:0; transform: scale(.96) } to { opacity:1; transform:none } }
@keyframes fs-float { 0%,100%{ transform: translateY(0) } 50%{ transform: translateY(-14px) } }
@keyframes fs-float-slow { 0%,100%{ transform: translateY(0) rotate(0) } 50%{ transform: translateY(-22px) rotate(3deg) } }
@keyframes fs-spin { to { transform: rotate(360deg) } }
@keyframes fs-shimmer { 0%{ background-position: -400px 0 } 100%{ background-position: 400px 0 } }
@keyframes fs-pop { 0%{ transform: scale(.8); opacity:0 } 60%{ transform: scale(1.05) } 100%{ transform: scale(1); opacity:1 } }
@keyframes fs-slide-in-right { from { transform: translateX(40px); opacity:0 } to { transform:none; opacity:1 } }
@keyframes fs-gradient-shift { 0%{ background-position:0% 50% } 50%{ background-position:100% 50% } 100%{ background-position:0% 50% } }
@keyframes fs-ring-dash { from { stroke-dashoffset: var(--dash-from) } to { stroke-dashoffset: var(--dash-to) } }

.anim-fade-up { animation: fs-fade-up .6s cubic-bezier(.22,.61,.36,1) both; }
.anim-fade { animation: fs-fade .6s ease both; }
.anim-scale-in { animation: fs-scale-in .4s ease both; }
.anim-pop { animation: fs-pop .5s cubic-bezier(.22,1.2,.36,1) both; }
.anim-slide-right { animation: fs-slide-in-right .5s ease both; }
.float { animation: fs-float 6s ease-in-out infinite; }
.float-slow { animation: fs-float-slow 9s ease-in-out infinite; }

/* staggered reveal on scroll */
.reveal { opacity:0; transform: translateY(26px); transition: opacity .7s ease, transform .7s cubic-bezier(.22,.61,.36,1); }
.reveal.in { opacity:1; transform:none; }

/* gradient animated text / bg */
.gradient-text {
  background: linear-gradient(110deg,#17b07b,#0c8e65,#3dcb95,#0c7153);
  background-size: 260% 260%;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: fs-gradient-shift 7s ease infinite;
}
.gold-text {
  background: linear-gradient(110deg,#f5d98b,#e0ab34,#f5d98b);
  background-size: 220% 220%;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: fs-gradient-shift 6s ease infinite;
}
.mesh-bg {
  background:
    radial-gradient(42rem 42rem at 12% -10%, rgba(61,203,149,.22), transparent 60%),
    radial-gradient(38rem 38rem at 100% 0%, rgba(12,142,101,.18), transparent 55%),
    radial-gradient(40rem 40rem at 50% 120%, rgba(23,176,123,.12), transparent 60%);
}
.theme-premium .mesh-bg {
  background:
    radial-gradient(42rem 42rem at 12% -10%, rgba(224,171,52,.16), transparent 60%),
    radial-gradient(38rem 38rem at 100% 0%, rgba(224,171,52,.10), transparent 55%),
    radial-gradient(40rem 40rem at 50% 120%, rgba(255,255,255,.04), transparent 60%);
}

/* glass card */
.glass {
  background: rgba(255,255,255,.7);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(255,255,255,.6);
}
.theme-premium .glass {
  background: rgba(20,26,34,.6);
  border: 1px solid rgba(255,255,255,.08);
}

/* buttons */
.btn-primary {
  background: var(--brand); color: #fff; font-weight:600;
  border-radius: 14px; transition: transform .15s ease, box-shadow .2s ease, filter .2s ease;
  box-shadow: 0 10px 22px -10px var(--ring);
}
.btn-primary:hover { transform: translateY(-2px); filter: brightness(1.05); box-shadow: 0 16px 30px -12px var(--ring); }
.btn-primary:active { transform: translateY(0); }
.theme-premium .btn-primary { color:#1b1406; }

.btn-ghost { transition: background .2s ease, color .2s ease, transform .15s; border-radius:14px; }
.btn-ghost:hover { transform: translateY(-1px); }

.card-hover { transition: transform .25s cubic-bezier(.22,.61,.36,1), box-shadow .25s ease, border-color .25s; }
.card-hover:hover { transform: translateY(-6px); box-shadow: var(--shadow); }

/* nav link underline */
.nav-link { position: relative; }
.nav-link::after { content:''; position:absolute; left:0; bottom:-4px; height:2px; width:0; background:var(--brand); transition: width .25s ease; border-radius:2px; }
.nav-link:hover::after, .nav-link.active::after { width:100%; }

/* shimmering skeleton */
.skeleton { background: linear-gradient(90deg,#eceeed 25%,#f6f8f7 37%,#eceeed 63%); background-size: 800px 100%; animation: fs-shimmer 1.3s infinite linear; }
.theme-premium .skeleton { background: linear-gradient(90deg,#1b232c 25%,#222c37 37%,#1b232c 63%); background-size:800px 100%; }

/* toast */
.toast { animation: fs-pop .35s ease both; }

/* progress ring */
.ring-track { stroke: var(--border); }
.ring-value { transition: stroke-dashoffset 1.1s cubic-bezier(.22,.61,.36,1); }

/* pill tags */
.tag-good { background:#dcfce7; color:#15803d; }
.tag-small { background:#fef9c3; color:#a16207; }
.tag-bad { background:#fee2e2; color:#b91c1c; }
.theme-premium .tag-good { background:#13351f; color:#5fe39b; }
.theme-premium .tag-small { background:#3a3415; color:#f3d675; }
.theme-premium .tag-bad { background:#3a1c1c; color:#f59e9e; }

/* sidebar active */
.side-link { transition: background .2s, color .2s, transform .15s; }
.side-link:hover { transform: translateX(3px); }
.side-link.active { background: var(--brand-soft); color: var(--brand); font-weight:600; }

/* input */
.fs-input {
  background: var(--surface); border:1px solid var(--border); border-radius:12px; color:var(--text);
  transition: border-color .2s, box-shadow .2s;
}
.fs-input:focus { outline:none; border-color: var(--brand); box-shadow: 0 0 0 4px var(--ring); }

/* range slider */
input[type=range]{ -webkit-appearance:none; appearance:none; height:6px; border-radius:99px; background: var(--border); }
input[type=range]::-webkit-slider-thumb{ -webkit-appearance:none; width:20px;height:20px;border-radius:50%; background:var(--brand); cursor:pointer; box-shadow:0 2px 8px rgba(0,0,0,.2); border:3px solid #fff; transition: transform .15s; }
input[type=range]::-webkit-slider-thumb:hover{ transform: scale(1.15); }

/* fade for route transitions */
.route-enter { animation: fs-fade-up .45s ease both; }

/* count-up blur free */
.tabular { font-variant-numeric: tabular-nums; }

/* marquee */
.marquee { display:flex; gap:3rem; animation: fs-marq 26s linear infinite; }
@keyframes fs-marq { from{ transform: translateX(0) } to{ transform: translateX(-50%) } }

/* hide scrollbar util */
.no-sb::-webkit-scrollbar{ display:none; }
.no-sb{ scrollbar-width:none; }

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