@font-face {
  font-family: "Inter Variable";
  src: url("/fonts/inter-latin-wght.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* Paleta PerformanceLab (cores tiradas do logo oficial). */
:root {
  --brand-light: #19a5df;
  --brand: #0075b6;
  --brand-dark: #00517b;
  --brand-ink: #465051;
  --grad: linear-gradient(135deg, #19a5df 0%, #0075b6 55%, #00517b 100%);
  --header-bg: linear-gradient(100deg, #0075b6 0%, #0a6aab 60%, #005e96 100%);
  --radius: 16px;
  --ease: cubic-bezier(.2, .8, .2, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --font: "Inter Variable", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* Tema claro (padrão, como o sistema PerformanceLab) */
:root, :root[data-theme="light"] {
  color-scheme: light;
  --bg: #eef2f6;
  --bg-elev: #ffffff;
  --bg-elev-2: #f5f8fb;
  --bg-input: #f6f9fc;
  --line: #e0e7ef;
  --line-strong: #c8d4e2;
  --text: #1d2b36;
  --text-dim: #65778a;
  --accent: var(--brand);
  --accent-soft: #e6f2fa;
  --glow-rgb: 25 165 223;
  --card-bg: #ffffff;
  --card-shadow: 0 1px 2px rgba(16, 40, 70, .05), 0 14px 36px rgba(16, 40, 70, .08);
  --ok: #1e9e6a;
  --warn: #c98700;
  --danger: #d6384a;
  --grain-opacity: 0;
  --ambient-a: rgba(25, 165, 223, .14);
  --ambient-b: rgba(0, 117, 182, .09);
  --ambient-c: rgba(0, 81, 123, .06);
  /* grafo / nuvem (lidos pelo JS) */
  --graph-label: #1d2b36;
  --graph-outline: #ffffff;
  --graph-capital: #9aabbd;
  --graph-header: #65778a;
  --fx-core: #00517b;
  --star-rgb: 0 117 182;
}

/* Tema escuro (?tema=escuro) */
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #08121c;
  --bg-elev: #0f1d2b;
  --bg-elev-2: #152536;
  --bg-input: #0b1824;
  --line: rgba(255, 255, 255, .09);
  --line-strong: rgba(255, 255, 255, .17);
  --text: #eaf2f8;
  --text-dim: #93a6b8;
  --accent: #19a5df;
  --accent-soft: rgba(25, 165, 223, .13);
  --card-bg: linear-gradient(160deg, rgba(19, 36, 54, .9), rgba(11, 22, 34, .95));
  --card-shadow: 0 30px 80px rgba(0, 0, 0, .35), inset 0 1px rgba(255, 255, 255, .05);
  --ok: #3ddc97;
  --warn: #f5c451;
  --danger: #ff5d6c;
  --grain-opacity: .05;
  --ambient-a: rgba(25, 165, 223, .16);
  --ambient-b: rgba(0, 117, 182, .14);
  --ambient-c: rgba(0, 81, 123, .12);
  --graph-label: #eaf2f8;
  --graph-outline: #08121c;
  --graph-capital: #cfd9e4;
  --graph-header: #a9bacb;
  --fx-core: #ffffff;
  --star-rgb: 25 165 223;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-feature-settings: "cv11", "ss01";
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
}

button, input, select { font: inherit; color: inherit; }

.hidden { display: none !important; }

/* ---------- logo PerformanceLab ---------- */
.plab-logo { display: block; height: 100%; width: auto; }
:root[data-theme="dark"] .logo-chip {
  /* o cinza do "Performance" some no escuro: o logo vai num selo claro */
  background: #fff;
  border-radius: 10px;
  padding: 5px 9px;
}

/* ---------- fundo vivo: manchas de luz que derivam devagar ---------- */
.ambient {
  position: fixed;
  inset: -20%;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(38% 42% at 18% 20%, var(--ambient-a), transparent 70%),
    radial-gradient(34% 38% at 82% 78%, var(--ambient-b), transparent 70%),
    radial-gradient(30% 34% at 70% 12%, var(--ambient-c), transparent 70%);
  animation: ambient-drift 28s ease-in-out infinite alternate;
}
@keyframes ambient-drift {
  0% { transform: translate3d(0, 0, 0) rotate(0deg) scale(1); }
  50% { transform: translate3d(3%, -2%, 0) rotate(8deg) scale(1.05); }
  100% { transform: translate3d(-3%, 2%, 0) rotate(-6deg) scale(1.02); }
}
.grain {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: var(--grain-opacity);
  background-image: radial-gradient(rgba(255, 255, 255, .6) 1px, transparent 1px);
  background-size: 3px 3px;
}

/* ---------- cartão com brilho que segue o ponteiro (js/fx.js: data-tilt) ---------- */
.glass {
  --mx: 50%;
  --my: 50%;
  --rx: 0deg;
  --ry: 0deg;
  position: relative;
  background: var(--card-bg);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--card-shadow);
  transform: perspective(1400px) rotateX(var(--rx)) rotateY(var(--ry));
  transition: border-color .4s var(--ease), box-shadow .4s var(--ease);
}
/* luz sob o ponteiro */
.glass::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: radial-gradient(420px circle at var(--mx) var(--my), rgb(var(--glow-rgb) / .1), transparent 60%);
  opacity: 0;
  transition: opacity .5s var(--ease);
}
/* borda que acende perto do ponteiro */
.glass::after {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  padding: 1px;
  pointer-events: none;
  background: radial-gradient(260px circle at var(--mx) var(--my), rgba(25, 165, 223, .9), rgba(0, 117, 182, .4) 45%, transparent 70%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0;
  transition: opacity .5s var(--ease);
}
.glass.is-hot::before, .glass.is-hot::after { opacity: 1; }

/* ---------- botões: brilho que atravessa + clique com mola ---------- */
.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5em;
  overflow: hidden;
  border: 1px solid var(--line-strong);
  background: var(--bg-elev);
  color: var(--text);
  border-radius: 10px;
  padding: .7em 1.1em;
  font-weight: 650;
  letter-spacing: .02em;
  cursor: pointer;
  text-decoration: none;
  touch-action: manipulation;
  transform: translate3d(var(--bx, 0), var(--by, 0), 0);
  transition: transform .35s var(--ease-out), border-color .3s, background .3s, box-shadow .3s, color .3s, opacity .2s;
}
.btn::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, .4) 50%, transparent 70%);
  transform: translateX(-120%);
  pointer-events: none;
}
.btn:hover:not(:disabled)::after { animation: shine .9s var(--ease); }
@keyframes shine { to { transform: translateX(120%); } }
.btn:hover:not(:disabled) { border-color: var(--brand-light); color: var(--brand); box-shadow: 0 8px 24px rgb(var(--glow-rgb) / .16); }
:root[data-theme="dark"] .btn:hover:not(:disabled) { color: #fff; }
.btn:active:not(:disabled) { transform: translate3d(var(--bx, 0), var(--by, 0), 0) scale(.96); transition-duration: .08s; }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn-primary {
  background: var(--grad);
  background-size: 160% 160%;
  border-color: transparent;
  color: #fff;
  box-shadow: 0 10px 26px rgba(0, 117, 182, .28), inset 0 1px rgba(255, 255, 255, .25);
  animation: grad-shift 8s ease-in-out infinite alternate;
}
.btn-primary:hover:not(:disabled) { color: #fff; border-color: transparent; box-shadow: 0 14px 32px rgba(0, 117, 182, .38); }
@keyframes grad-shift { from { background-position: 0% 50%; } to { background-position: 100% 50%; } }
.btn-danger { border-color: color-mix(in srgb, var(--danger) 60%, transparent); color: var(--danger); background: transparent; }
.btn-danger:hover:not(:disabled) { border-color: var(--danger); color: var(--danger); box-shadow: 0 8px 24px color-mix(in srgb, var(--danger) 18%, transparent); }
.btn:focus-visible, input:focus-visible, select:focus-visible { outline: 3px solid var(--brand-light); outline-offset: 2px; }

.chip {
  --status: var(--text-dim);
  display: inline-flex;
  align-items: center;
  gap: .5em;
  padding: .32em .85em;
  border-radius: 999px;
  font-size: .85em;
  font-weight: 700;
  letter-spacing: .08em;
  border: 1px solid var(--line);
  background: var(--bg-elev);
  color: var(--status);
}
.chip::before {
  content: "";
  width: .6em;
  height: .6em;
  border-radius: 50%;
  background: var(--status);
}
.chip[data-status="OPEN"] { --status: var(--ok); }
.chip[data-status="OPEN"]::before { animation: live 1.8s ease-out infinite; }
.chip[data-status="NOT_STARTED"] { --status: var(--warn); }
.chip[data-status="CLOSED"] { --status: var(--danger); }
@keyframes live {
  0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--status) 60%, transparent); }
  100% { box-shadow: 0 0 0 .7em transparent; }
}

/* ---------- entrada: desfoque -> nítido, em cascata (js/fx.js: data-reveal) ---------- */
[data-reveal] {
  opacity: 0;
  filter: blur(12px);
  transform: translate3d(0, 18px, 0) scale(.985);
  transition: opacity .9s var(--ease-out), filter .9s var(--ease-out), transform .9s var(--ease-out);
  transition-delay: var(--reveal-delay, 0ms);
}
[data-reveal].is-in { opacity: 1; filter: none; transform: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition-duration: .01ms !important; }
  [data-reveal] { opacity: 1; filter: none; transform: none; }
}