/* ==========================================================================
   tsc-alive.css — TensorCash pool UI enhancement layer (2026-09-18)

   PURELY ADDITIVE. Loads after material-dashboard.css and only refines what is
   already there. Delete this file and its <link> and the site returns exactly
   to its previous appearance.

   The palette is NOT invented: it is the oxblood this site already uses
   (#731D30 appears 16x in the existing markup) plus its rose accents. TSC is
   wine; PRL is navy. Keeping them distinct is the point.

   Signature: the REQUIREMENT STRIP. TensorCash is proof-of-inference — the GPU
   runs a language model and submits proofs, measured in PoI/s, not MH/s — and
   the pool's allowlist is exact-match on the miner version. So the one thing a
   visitor must not miss is which build the pool will actually accept. That fact
   gets the hero; everything else stays quiet.
   ========================================================================== */

:root {
  --tsc-wine-900: #501421;
  --tsc-wine-700: #731D30;
  --tsc-wine-500: #8f2a41;
  --tsc-rose-400: #e0708d;
  --tsc-rose-200: #f0a0b6;
  --tsc-paper:    #f3eef0;   /* warm, wine-biased neutral — already on the page */

  --tsc-ring: rgba(224, 112, 141, 0.55);
  --tsc-lift: 0 14px 34px -16px rgba(80, 20, 33, 0.45);
  --tsc-mono: 'JetBrains Mono', 'SF Mono', Menlo, Consolas, monospace;
  --tsc-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* --------------------------------------------------------------------------
   1. The requirement strip — the signature.
   Built by tsc-alive.js so the markup stays untouched.
   -------------------------------------------------------------------------- */
.tsc-req {
  position: relative;
  overflow: hidden;
  border-radius: 0.75rem;
  padding: 0.85rem 1.1rem;
  margin: 0 0 1rem;
  background: linear-gradient(135deg, var(--tsc-wine-900) 0%, var(--tsc-wine-700) 52%, var(--tsc-wine-500) 100%);
  border: 1px solid rgba(255, 255, 255, 0.10);
  box-shadow: 0 8px 26px -12px rgba(80, 20, 33, 0.65);
  color: #fdf6f8;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem 1.25rem;
}
/* the inference pulse: a slow rose sweep, the only ambient motion on the page */
.tsc-req::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 15% 40%, rgba(224,112,141,0.22) 0, transparent 42%);
  pointer-events: none;
}
.tsc-req > * { position: relative; z-index: 1; }

.tsc-req-badge {
  font-family: var(--tsc-mono);
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: -0.02em;
  background: linear-gradient(180deg, var(--tsc-rose-200) 0%, var(--tsc-rose-400) 100%);
  color: #3a0c16;
  padding: 0.35rem 0.7rem;
  border-radius: 0.45rem;
  white-space: nowrap;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.45);
}
.tsc-req-text { font-size: 0.82rem; line-height: 1.45; }
.tsc-req-text b { color: #fff; }
.tsc-req-note { font-size: 0.72rem; opacity: 0.82; }

/* live pool figures inside the strip */
.tsc-req-stats {
  margin-left: auto;
  display: flex;
  gap: 1.1rem;
  flex-wrap: wrap;
}
.tsc-stat { text-align: right; }
.tsc-stat-label {
  display: block;
  font-size: 0.6rem;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  opacity: 0.72;
}
.tsc-stat-value {
  font-family: var(--tsc-mono);
  font-variant-numeric: tabular-nums;
  font-size: 1.02rem;
  font-weight: 600;
}

/* value changed — brief rose flash. Real data moving, not decoration. */
@keyframes tsc-flash {
  0%   { color: var(--tsc-rose-200); transform: translateY(-2px); }
  35%  { color: var(--tsc-rose-200); transform: translateY(0); }
  100% { color: inherit;             transform: translateY(0); }
}
.tsc-flash { animation: tsc-flash 1.1s var(--tsc-ease); }

/* --------------------------------------------------------------------------
   2. Cards — depth on hover instead of a flat plane.
   -------------------------------------------------------------------------- */
.card {
  position: relative;
  transition: transform 0.28s var(--tsc-ease), box-shadow 0.28s var(--tsc-ease);
}
.card:hover { transform: translateY(-3px); box-shadow: var(--tsc-lift); }
.card::after {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  border-radius: 2px 2px 0 0;
  background: linear-gradient(90deg, transparent, var(--tsc-rose-400), transparent);
  opacity: 0;
  transform: scaleX(0.4);
  transition: opacity 0.3s var(--tsc-ease), transform 0.45s var(--tsc-ease);
  pointer-events: none;
}
.card:hover::after { opacity: 0.9; transform: scaleX(1); }

/* --------------------------------------------------------------------------
   3. Command blocks — this page is mostly shell. Make them read like a terminal
   and let long commands scroll instead of breaking the layout.
   -------------------------------------------------------------------------- */
.mine-cmd {
  font-family: var(--tsc-mono);
  font-size: 0.78rem;
  line-height: 1.55;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-left: 3px solid var(--tsc-rose-400);
  transition: border-color 0.2s var(--tsc-ease), background-color 0.2s var(--tsc-ease);
}
.mine-cmd:hover { border-left-color: var(--tsc-wine-700); }

/* step numbers already exist as .mine-num — give them the wine identity */
.mine-num {
  font-family: var(--tsc-mono);
  font-variant-numeric: tabular-nums;
}

/* --------------------------------------------------------------------------
   4. Entrance choreography — applied by JS, never leaves content hidden.
   -------------------------------------------------------------------------- */
.tsc-reveal {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.55s var(--tsc-ease), transform 0.55s var(--tsc-ease);
}
.tsc-reveal.tsc-in { opacity: 1; transform: none; }

/* --------------------------------------------------------------------------
   5. Tables and focus.
   -------------------------------------------------------------------------- */
.tsc-scroll-x { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.table tbody tr { transition: background-color 0.18s var(--tsc-ease); }
.table tbody tr:hover { background-color: rgba(224, 112, 141, 0.08); }

a:focus-visible, button:focus-visible, .btn:focus-visible, summary:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid var(--tsc-ring);
  outline-offset: 2px;
  border-radius: 6px;
}

/* --------------------------------------------------------------------------
   6. Responsive tightening below 576px.
   -------------------------------------------------------------------------- */
@media (max-width: 575.98px) {
  .card .card-body { padding: 1rem; }
  .tsc-req { padding: 0.75rem 0.85rem; }
  .tsc-req-stats { margin-left: 0; width: 100%; justify-content: flex-start; gap: 0.9rem; }
  .tsc-stat { text-align: left; }
  .mine-cmd { font-size: 0.72rem; }
  h1, .h1 { font-size: 1.7rem; }
  h2, .h2 { font-size: 1.4rem; }
}

/* --------------------------------------------------------------------------
   7. Respect the user's motion preference.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .card, .card::after, .tsc-reveal, .table tbody tr, .mine-cmd { transition: none !important; }
  .card:hover { transform: none; }
  .tsc-reveal { opacity: 1; transform: none; }
  .tsc-flash { animation: none !important; }
}