/* ══════════════════════════════════════════════════════════════════════════
   pyblock-pro.css — shared "pro/sober" design system for the sitewide redesign.
   Same look as pool.php's mission-control dashboard. Scope everything under .pro
   so the global pyblock.css stays untouched. Apply: wrap page content in
   <div class="pro"> and use .pro-sec / .pro-panel / .pro-kpi / .pro-grid, etc.
   ══════════════════════════════════════════════════════════════════════════ */
.pro{
  --pro-surface:#0e130e; --pro-surface2:#131a13; --pro-border:rgba(120,200,120,.15);
  --pro-border2:rgba(120,200,120,.30); --pro-muted:#829a82; --pro-faint:#586858;
  --pro-ok:#2fd968; --pro-idle:#e0b035;
  --pro-lotto:#2fd968; --pro-datum:#ff5cc8; --pro-sv2:#ff9d3c; --pro-chirp:#9b8cff; --pro-tmpl:#ffffff;
  --pro-mono:'VT323','JetBrains Mono',ui-monospace,Menlo,Consolas,monospace;
  --pro-r:10px;
}
.pro *{box-sizing:border-box}
.pro .mono{font-family:var(--pro-mono);font-variant-numeric:tabular-nums;letter-spacing:.5px}

/* flat cards/panels — no glow, no hover lift, no light-sweep */
.pro .card:not(.save-link-card),.pro .pro-panel{
  background:var(--pro-surface) !important;border:1px solid var(--pro-border) !important;
  border-radius:var(--pro-r) !important;box-shadow:none !important;transition:none !important;
}
.pro .card:not(.save-link-card):hover,.pro .pro-panel:hover{transform:none !important;box-shadow:none !important}
/* .save-link-card (payment flow) keeps its "save your link" pulse — a critical UX cue, not decoration */
.pro .card::after,.pro .stat-box::before{display:none !important}
.pro .stat-value{text-shadow:none !important;animation:none !important}
.pro h1,.pro h2,.pro h3{text-shadow:none !important}
.pro .pro-panel{padding:22px 24px}

/* sober section header (replaces the 3rem glowing centered <h2>) */
.pro .pro-sec{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin:30px 0 14px;
  padding-bottom:8px;border-bottom:1px solid var(--pro-border)}
.pro .pro-sec h2{margin:0;font-family:var(--pro-mono);font-size:1.5rem;letter-spacing:2px;
  color:var(--color-accent);text-transform:uppercase;font-weight:600;text-shadow:none}
.pro .pro-sec .sub{margin-left:auto;color:var(--pro-muted);font-size:.9rem;font-family:var(--pro-mono);text-align:right}

/* legacy centered <h2 class="text-center"> section headers → auto-styled like .pro-sec, so bulk pages
   need ONLY the .pro wrapper + this stylesheet (no per-header markup change). */
.pro h2.text-center{
  display:block;text-align:left !important;margin:30px 0 14px !important;padding-bottom:8px;
  border-bottom:1px solid var(--pro-border);font-family:var(--pro-mono);font-size:1.5rem !important;
  letter-spacing:2px;color:var(--color-accent) !important;text-transform:uppercase;
  text-shadow:none !important;font-weight:600;
}
/* tame oversized inline headings inside .pro (the old 3rem/2rem `<h2 style="font-size:…">`) */
.pro h2[style*="font-size: 3rem"],.pro h2[style*="font-size:3rem"]{font-size:1.7rem !important;text-shadow:none !important}
.pro h3[style*="font-size: 2rem"],.pro h3[style*="font-size:2rem"]{font-size:1.35rem !important;text-shadow:none !important}

/* hero */
.pro .pro-hero{background:var(--pro-surface);border:1px solid var(--pro-border);border-radius:var(--pro-r);padding:26px 26px 22px}
.pro .pro-eyebrow{font-family:var(--pro-mono);font-size:1rem;letter-spacing:.15em;text-transform:uppercase;color:var(--pro-muted)}
.pro .pro-lead{font-size:1.5rem;line-height:1.55;margin:10px 0 0;color:var(--color-text)}
.pro .pro-lead .hl{color:var(--color-accent)}

/* KPI strip */
.pro .pro-kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:14px;margin-top:18px}
.pro .pro-kpi{background:var(--pro-surface2);border:1px solid var(--pro-border);border-radius:var(--pro-r);padding:14px 18px}
.pro .pro-kpi .v{font-family:var(--pro-mono);font-size:1.9rem;line-height:1.1;color:var(--color-primary)}
.pro .pro-kpi .l{color:var(--pro-muted);font-size:.82rem}

/* card grid */
.pro .pro-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:14px}

/* clean CTA (accent border, no glow) */
.pro .pro-cta{border:1px solid var(--color-accent) !important;background:rgba(0,255,65,.05) !important;
  border-radius:var(--pro-r);transition:background .15s !important;text-align:center;padding:26px}
.pro .pro-cta:hover{background:rgba(0,255,65,.10) !important}

/* pool color accents */
.pro .p-lotto{color:var(--pro-lotto)} .pro .p-datum{color:var(--pro-datum)}
.pro .p-sv2{color:var(--pro-sv2)} .pro .p-chirp{color:var(--pro-chirp)} .pro .p-tmpl{color:var(--pro-tmpl)}

/* loading skeleton */
.pro .skel{color:transparent !important}
.pro .skel::after{content:"\2014";color:rgba(120,200,120,.22)}

/* ═══════════════════════════════════════════════════════════════════════
   DUAL-CHAIN THEME — activado por data-chain-theme="bip110" en <html>.
   Remapea TODA la paleta de verde-Matrix a púrpura de punta a punta.
   (glows/borders referencian estas vars → se repintan solos.) 2026-08-10
   ═══════════════════════════════════════════════════════════════════════ */
:root[data-chain-theme="bip110"]{
  /* núcleo (pyblock.css) */
  --color-primary:#b96bff;          /* era #00ff41 Matrix green → neón púrpura */
  --color-secondary:#d9a6ff;        /* era #00ffff cyan → lavanda */
  --color-accent:#ff7bd5;           /* era #ffff00 yellow → rosa neón */
  --color-cyan:#d9a6ff;
  --color-yellow:#ff7bd5;
  --color-text:var(--color-primary);
  --bg-dark-green:rgba(28,0,45,.5);
  --bg-dark-cyan:rgba(28,0,45,.5);
  --bg-card:rgba(185,107,255,.08);
  --bg-card-hover:rgba(185,107,255,.16);
  /* pro (pyblock-pro.css) */
  --pro-surface:#130e18; --pro-surface2:#181320;
  --pro-border:rgba(185,130,225,.18); --pro-border2:rgba(185,130,225,.34);
  --pro-muted:#9b82a8; --pro-faint:#63586a;
  --pro-lotto:#b96bff;              /* el único verde del set → púrpura, así no queda nada verde */
}
/* transición suave al togglear (todo el sitio) */
html{ transition:background-color .25s ease; }