/* ============================================================
   BizBot Tools — "Premium" enhancement layer
   Opt-in: add class="tp" to <body> and load this AFTER any
   page-level <style>. Every rule is scoped under .tp so it
   wins over the tools' single-class inline selectors by
   specificity (0,2,0 > 0,1,0) — no !important, no layout
   surgery. Lifts the shared tool vocabulary (.panel/.badge/
   .btn/.stat/.fld/.cross/.head/.tool) to a far more premium
   finish, and paints an animated aurora-mesh backdrop.
   Honors prefers-reduced-motion (bizbot-shared kills anims).
   ============================================================ */

.tp {
  --tp-cyan:   #00d4ff;
  --tp-blue:   #4f7dff;
  --tp-violet: #9d6bff;
  --tp-ease:   cubic-bezier(.22, 1, .36, 1);
  position: relative;
  background: #060812;
  min-height: 100vh;
}

/* ── Aurora mesh backdrop ──────────────────────────────────
   Fixed, behind everything, slow drift. Pure CSS. */
.tp::before {
  content: "";
  position: fixed;
  inset: -25vmax;
  z-index: -2;
  pointer-events: none;
  background:
    radial-gradient(38vmax 38vmax at 12% 8%,  color-mix(in oklab, var(--tp-cyan)   60%, transparent) 0%, transparent 60%),
    radial-gradient(34vmax 34vmax at 88% 0%,  color-mix(in oklab, var(--tp-violet) 55%, transparent) 0%, transparent 58%),
    radial-gradient(42vmax 42vmax at 78% 92%, color-mix(in oklab, var(--tp-blue)   55%, transparent) 0%, transparent 60%),
    radial-gradient(30vmax 30vmax at 22% 96%, color-mix(in oklab, var(--tp-cyan)   40%, transparent) 0%, transparent 55%);
  opacity: .22;
  filter: blur(40px) saturate(1.25);
  animation: tp-drift 26s var(--tp-ease) infinite alternate;
}
/* Fine grid + vignette so the glow reads as "designed" not muddy */
.tp::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    linear-gradient(to bottom, transparent 0%, color-mix(in oklab, #060812 70%, transparent) 70%, #060812 100%),
    repeating-linear-gradient(0deg,   #ffffff05 0 1px, transparent 1px 64px),
    repeating-linear-gradient(90deg,  #ffffff05 0 1px, transparent 1px 64px);
  mask: radial-gradient(120vmax 90vmax at 50% -10%, #000 30%, transparent 80%);
}
@keyframes tp-drift {
  0%   { transform: translate3d(0,0,0)        scale(1);    }
  50%  { transform: translate3d(2vmax,-2vmax,0) scale(1.08); }
  100% { transform: translate3d(-2vmax,1vmax,0) scale(1.04); }
}
html[data-mode="light"] .tp { background: #eef1f8; }
html[data-mode="light"] .tp::before { opacity: .30; }
html[data-mode="light"] .tp::after {
  background:
    linear-gradient(to bottom, transparent 0%, color-mix(in oklab, #eef1f8 70%, transparent) 75%, #eef1f8 100%),
    repeating-linear-gradient(0deg,  #0b0d1a07 0 1px, transparent 1px 64px),
    repeating-linear-gradient(90deg, #0b0d1a07 0 1px, transparent 1px 64px);
}

/* ── Headlines: gradient ink ───────────────────────────────*/
.tp .head h1,
.tp .tools-hero h1 {
  background: linear-gradient(115deg, #ffffff 0%, #d6ecff 38%, var(--tp-cyan) 72%, var(--tp-violet) 110%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  letter-spacing: -0.025em;
}
html[data-mode="light"] .tp .head h1,
html[data-mode="light"] .tp .tools-hero h1 {
  background: linear-gradient(115deg, #0b0d1a 0%, #1d4ed8 60%, #7c3aed 110%);
  -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent;
}

/* ── Badge / pill ──────────────────────────────────────────*/
.tp .badge {
  background: linear-gradient(180deg, color-mix(in oklab, var(--tp-cyan) 16%, transparent), color-mix(in oklab, var(--tp-cyan) 6%, transparent));
  border: 1px solid color-mix(in oklab, var(--tp-cyan) 40%, transparent);
  color: color-mix(in oklab, var(--tp-cyan) 92%, white);
  box-shadow: 0 0 0 1px #ffffff0a inset, 0 8px 24px -12px color-mix(in oklab, var(--tp-cyan) 70%, transparent);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

/* ── Glass panels ──────────────────────────────────────────
   Override only finish props (bg/border/shadow/radius) — never
   padding/grid — so each tool's internal layout is untouched. */
.tp .panel,
.tp .cross {
  background:
    linear-gradient(180deg, color-mix(in oklab, #fff 6%, transparent), transparent 40%),
    color-mix(in oklab, #0d1430 78%, transparent);
  border: 1px solid #ffffff14;
  border-radius: 18px;
  box-shadow:
    0 1px 0 #ffffff14 inset,
    0 30px 70px -30px #000000c0,
    0 0 0 1px #00000040;
  backdrop-filter: blur(16px) saturate(1.2);
  -webkit-backdrop-filter: blur(16px) saturate(1.2);
  position: relative;
}
html[data-mode="light"] .tp .panel,
html[data-mode="light"] .tp .cross {
  background: linear-gradient(180deg, #ffffff, #ffffffe8);
  border: 1px solid #0b0d1a14;
  box-shadow: 0 1px 0 #ffffff inset, 0 30px 60px -34px #1d4ed840, 0 0 0 1px #0b0d1a08;
}

/* Soft top hairline glow on the main panel */
.tp .panel::before {
  content: "";
  position: absolute; inset: 0 0 auto 0; height: 1px;
  background: linear-gradient(90deg, transparent, color-mix(in oklab, var(--tp-cyan) 70%, transparent), transparent);
  border-radius: 18px 18px 0 0;
  opacity: .8;
}

/* ── Inputs / fields ───────────────────────────────────────*/
.tp .fld {
  background: color-mix(in oklab, #0a1024 70%, transparent);
  border: 1px solid #ffffff12;
  border-radius: 14px;
  transition: border-color .25s var(--tp-ease), box-shadow .25s var(--tp-ease), transform .25s var(--tp-ease);
}
.tp .fld:focus-within {
  border-color: color-mix(in oklab, var(--tp-cyan) 60%, transparent);
  box-shadow: 0 0 0 4px color-mix(in oklab, var(--tp-cyan) 16%, transparent), 0 18px 40px -24px color-mix(in oklab, var(--tp-cyan) 70%, transparent);
  transform: translateY(-1px);
}
.tp .fld.locked {
  border-color: color-mix(in oklab, var(--tp-cyan) 70%, transparent);
  background: color-mix(in oklab, var(--tp-cyan) 9%, transparent);
  box-shadow: 0 0 0 1px color-mix(in oklab, var(--tp-cyan) 50%, transparent) inset, 0 16px 36px -22px color-mix(in oklab, var(--tp-cyan) 70%, transparent);
}
.tp input,
.tp textarea,
.tp select {
  transition: border-color .2s var(--tp-ease), box-shadow .2s var(--tp-ease), background .2s var(--tp-ease);
}
.tp input:focus,
.tp textarea:focus,
.tp select:focus {
  box-shadow: 0 0 0 4px color-mix(in oklab, var(--tp-cyan) 18%, transparent);
}

/* ── Stat / result cards ───────────────────────────────────*/
.tp .stat {
  background:
    radial-gradient(120% 140% at 0% 0%, color-mix(in oklab, var(--tp-cyan) 12%, transparent), transparent 55%),
    color-mix(in oklab, #0a1126 72%, transparent);
  border: 1px solid #ffffff12;
  border-radius: 14px;
  position: relative;
  overflow: hidden;
  transition: transform .3s var(--tp-ease), box-shadow .3s var(--tp-ease), border-color .3s var(--tp-ease);
}
.tp .stat:hover {
  transform: translateY(-3px);
  border-color: color-mix(in oklab, var(--tp-cyan) 45%, transparent);
  box-shadow: 0 24px 50px -28px color-mix(in oklab, var(--tp-cyan) 70%, transparent);
}
.tp .stat .val {
  background: linear-gradient(120deg, #ffffff, color-mix(in oklab, var(--tp-cyan) 85%, white));
  -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent;
  font-feature-settings: "tnum" 1;
  letter-spacing: -0.01em;
}
html[data-mode="light"] .tp .stat .val {
  background: linear-gradient(120deg, #0b0d1a, #1d4ed8);
  -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent;
}

/* ── Buttons ───────────────────────────────────────────────
   Premium glass-outline by default; the primary/accent class
   gets a gradient fill with a sheen sweep on hover. */
.tp .btn {
  border-radius: 12px;
  border: 1px solid #ffffff1f;
  background: color-mix(in oklab, #ffffff 7%, transparent);
  color: var(--ink);
  position: relative;
  overflow: hidden;
  transition: transform .2s var(--tp-ease), border-color .2s var(--tp-ease), box-shadow .2s var(--tp-ease), color .2s var(--tp-ease), background .2s var(--tp-ease);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.tp .btn:hover {
  transform: translateY(-2px);
  border-color: color-mix(in oklab, var(--tp-cyan) 55%, transparent);
  color: color-mix(in oklab, var(--tp-cyan) 92%, white);
  box-shadow: 0 16px 34px -20px color-mix(in oklab, var(--tp-cyan) 80%, transparent);
}
/* sheen */
.tp .btn::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(115deg, transparent 30%, #ffffff45 50%, transparent 70%);
  transform: translateX(-120%);
  transition: transform .6s var(--tp-ease);
}
.tp .btn:hover::after { transform: translateX(120%); }

.tp .btn-primary,
.tp .btn.primary,
.tp .btn--accent {
  background: linear-gradient(135deg, var(--tp-cyan), var(--tp-blue) 70%, var(--tp-violet));
  color: #04121a;
  border: 1px solid color-mix(in oklab, var(--tp-cyan) 60%, transparent);
  font-weight: 700;
  box-shadow: 0 1px 0 #ffffff66 inset, 0 14px 34px -16px color-mix(in oklab, var(--tp-blue) 80%, transparent);
}
.tp .btn-primary:hover,
.tp .btn.primary:hover,
.tp .btn--accent:hover { color: #04121a; }

/* ── Cross-sell links (chips) ──────────────────────────────*/
.tp .cross-links a {
  background: color-mix(in oklab, #ffffff 7%, transparent);
  border: 1px solid #ffffff1f;
  border-radius: 10px;
  transition: transform .2s var(--tp-ease), border-color .2s var(--tp-ease), color .2s var(--tp-ease), box-shadow .2s var(--tp-ease);
}
.tp .cross-links a:hover {
  transform: translateY(-2px);
  border-color: color-mix(in oklab, var(--tp-cyan) 55%, transparent);
  color: color-mix(in oklab, var(--tp-cyan) 92%, white);
  box-shadow: 0 14px 30px -18px color-mix(in oklab, var(--tp-cyan) 75%, transparent);
}

/* ── Entrance animation (zero-JS, load-time stagger) ───────*/
@media (prefers-reduced-motion: no-preference) {
  .tp .head,
  .tp .tools-hero { animation: tp-rise .7s var(--tp-ease) both; }
  .tp .panel      { animation: tp-rise .7s var(--tp-ease) .08s both; }
  .tp .cross      { animation: tp-rise .7s var(--tp-ease) .16s both; }
}
@keyframes tp-rise {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}
