/* ============================================================================
 * krx-live.css — "signal" layer for krx.suprnova.cc (2026-10-01).
 * Additive only on top of Material Dashboard. Brand: mint #2DF6B5 / teal #12b76a /
 * deep navy #0a1929. Rollback: remove the <link> from the pages
 * (backup: /home/marcel/krx-site-backups/facelift-20261001/).
 * ========================================================================== */
:root{
  --krx-mint:#2DF6B5; --krx-teal:#12b76a; --krx-teal-deep:#0b8a3c; --krx-deep:#0a1929;
  --krx-ink:#344767; --krx-muted:#67748e;
  --krx-soft:rgba(45,246,181,.14); --krx-glow:rgba(45,246,181,.45);
  --krx-mono:ui-monospace,"SF Mono","Cascadia Mono","JetBrains Mono","Roboto Mono",Menlo,Consolas,monospace;
}

/* ---- signature: scanning mint hairline at the very top -------------------- */
body::before{content:"";position:fixed;top:0;left:0;right:0;height:3px;z-index:2000;pointer-events:none;
  background:linear-gradient(90deg,var(--krx-deep) 0%,var(--krx-teal) 30%,var(--krx-mint) 50%,var(--krx-teal) 70%,var(--krx-deep) 100%);
  background-size:220% 100%;animation:krx-scan 8s linear infinite}
@keyframes krx-scan{0%{background-position:0 0}100%{background-position:220% 0}}

/* ---- page headline block (the visible H1 + intro) ------------------------ */
.krx-page-head{position:relative;padding-left:1rem !important;padding-right:1rem !important}
.krx-page-head .krx-eyebrow{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem .8rem;font-family:var(--krx-mono);
  font-size:.68rem;letter-spacing:.06em;color:var(--krx-muted);margin-bottom:.35rem}
.krx-page-head .krx-eyebrow .krx-prompt{color:var(--krx-teal);font-weight:700}
.krx-page-head h1{position:relative;display:inline-block;letter-spacing:-.01em}
.krx-page-head h1::after{content:"";display:block;height:3px;width:3.2rem;margin-top:.35rem;border-radius:3px;
  background:linear-gradient(90deg,var(--krx-mint),var(--krx-teal));box-shadow:0 0 12px var(--krx-glow)}
.krx-page-head p{max-width:72ch}

/* ---- LIVE pill + ping dot ----------------------------------------------- */
.krx-live{display:inline-flex;align-items:center;gap:.4rem;font-family:var(--krx-mono);font-size:.62rem;font-weight:700;
  letter-spacing:.12em;color:var(--krx-teal);padding:.18rem .55rem .18rem .45rem;border:1px solid rgba(18,183,106,.35);
  border-radius:999px;background:var(--krx-soft);vertical-align:middle;line-height:1.2}
.krx-live-dot{width:7px;height:7px;border-radius:50%;background:var(--krx-teal);position:relative;flex:none}
.krx-live-dot::after{content:"";position:absolute;inset:0;border-radius:50%;background:var(--krx-teal);
  animation:krx-ping 1.7s cubic-bezier(0,0,.2,1) infinite}
@keyframes krx-ping{0%{transform:scale(1);opacity:.8}80%,100%{transform:scale(2.8);opacity:0}}
.krx-live.is-stale{color:#f5a623;border-color:rgba(245,166,35,.4);background:rgba(245,166,35,.12)}
.krx-live.is-stale .krx-live-dot,.krx-live.is-stale .krx-live-dot::after{background:#f5a623}

/* ---- numbers read like a terminal: tabular mono numerals ----------------- */
#poolMiners,#poolWorkers,#blockchainHeight,#networkDifficulty,#poolHashRate,#networkHashRate,
#blocksLast60m,#krxPerGhsHour,#krxPaidLast60m,#liveHolderKeeper,#liveHolderBracket,
#calcHourly,#calcDaily,#calcWeekly,#calcMonthly,.krx-num{font-family:var(--krx-mono);font-variant-numeric:tabular-nums;letter-spacing:-.01em}

/* skeleton shimmer while a stat is still empty (before the first API answer) */
h5 > div:empty:not(.krx-noskel), h5 > span:empty:not(.krx-noskel){display:inline-block;min-width:4.5rem;height:1em;border-radius:.3rem;vertical-align:middle;
  background:linear-gradient(90deg,rgba(103,116,142,.12) 25%,rgba(103,116,142,.26) 50%,rgba(103,116,142,.12) 75%);
  background-size:200% 100%;animation:krx-skeleton 1.4s linear infinite}
@keyframes krx-skeleton{0%{background-position:200% 0}100%{background-position:-200% 0}}

/* value-updated flash (JS adds .krx-flash when a watched text changes) */
.krx-flash{animation:krx-flash-anim 1s ease-out;border-radius:.25rem}
@keyframes krx-flash-anim{0%{background-color:var(--krx-soft);box-shadow:0 0 14px var(--krx-glow)}100%{background-color:transparent;box-shadow:none}}

/* ---- cards respond: lift + mint edge; stat icon turns mint on hover ------ */
.card{transition:transform .22s ease,box-shadow .22s ease}
@media (hover:hover){
  .card:hover{transform:translateY(-3px);box-shadow:0 12px 26px -8px rgba(10,25,41,.22),0 0 0 1px rgba(45,246,181,.28),0 4px 16px -6px var(--krx-glow) !important}
  .card:hover .icon-shape.bg-gradient-dark{background-image:linear-gradient(195deg,var(--krx-teal) 0%,var(--krx-teal-deep) 100%) !important}
}
.icon-shape.bg-gradient-dark{transition:background-image .25s ease,transform .25s ease}

/* ---- sidebar: active item gets a mint rail, items slide on hover --------- */
.sidenav .navbar-nav .nav-link{transition:transform .15s ease,background-color .15s ease}
.sidenav .navbar-nav .nav-link.active{position:relative;background-color:var(--krx-soft) !important}
.sidenav .navbar-nav .nav-link.active::before{content:"";position:absolute;left:0;top:18%;bottom:18%;width:3px;border-radius:3px;
  background:linear-gradient(180deg,var(--krx-mint),var(--krx-teal));box-shadow:0 0 10px var(--krx-glow)}
.sidenav .navbar-nav .nav-link.active .material-symbols-rounded{color:var(--krx-teal-deep);opacity:1 !important}
@media (hover:hover){.sidenav .navbar-nav .nav-link:not(.active):hover{transform:translateX(3px)}}
.sidenav .navbar-brand-img{filter:drop-shadow(0 0 6px var(--krx-glow))}

/* ---- "last block · Ns ago" ticker + newest round glow -------------------- */
.krx-lastblock{display:inline-flex;align-items:center;gap:.35rem;font-family:var(--krx-mono);font-size:.68rem;color:var(--krx-muted);white-space:nowrap}
.krx-lastblock b{color:var(--krx-teal-deep);font-variant-numeric:tabular-nums}
.krx-lastblock .krx-cube{display:inline-block;width:.55rem;height:.55rem;border-radius:2px;background:linear-gradient(135deg,var(--krx-mint),var(--krx-teal));
  animation:krx-spin 3.2s linear infinite}
@keyframes krx-spin{to{transform:rotate(360deg)}}
.krx-row-new{animation:krx-row-in .9s cubic-bezier(.2,.9,.3,1.15)}
@keyframes krx-row-in{0%{transform:translateX(-14px);opacity:0;box-shadow:0 0 18px var(--krx-glow)}60%{box-shadow:0 0 14px rgba(45,246,181,.3)}100%{transform:none;opacity:1;box-shadow:none}}

/* ---- buttons, inputs, focus: crisper and keyboard-visible ---------------- */
.btn,.form-control,.nav-link,.calc-tier-btn{transition:box-shadow .15s ease,transform .15s ease,background-color .15s ease}
a:focus-visible,button:focus-visible,.btn:focus-visible,.form-control:focus-visible,.calc-tier-btn:focus-visible{outline:2px solid var(--krx-teal);outline-offset:2px}
.btn-outline-primary.calc-preset:hover{transform:translateY(-1px)}

/* ---- tables: sticky header, soft row hover ------------------------------- */
.table-responsive{scrollbar-width:thin}
.table thead th{position:sticky;top:0;z-index:1;background:inherit;backdrop-filter:blur(6px)}
.table tbody tr{transition:background-color .15s ease}
@media (hover:hover){.table tbody tr:hover{background-color:var(--krx-soft)}}

/* ---- SEO/FAQ sections on the home page: mint rail per item --------------- */
#about-pool h3,#faq h3{padding-left:.6rem;border-left:3px solid var(--krx-mint);line-height:1.25}
#faq .col-md-6 p{padding-left:.78rem}

/* ---- responsive polish ---------------------------------------------------- */
@media (max-width:767.98px){
  .krx-page-head h1{font-size:1.15rem}
  .krx-page-head p{font-size:.8rem}
  .card-header p.text-sm{font-size:.72rem}
  .card-header h5{font-size:1rem}
  .navbar-main .input-group{width:100%}
  .calc-preset{font-size:.7rem;padding:.3rem .4rem}
  .chart{min-height:220px}
}
@media (max-width:575.98px){
  .krx-eyebrow .krx-sep{display:none}
  .navbar-main .breadcrumb{font-size:.72rem}
}

/* ---- dark mode (Material Dashboard adds body.dark-version) --------------- */
body.dark-version .krx-page-head .krx-eyebrow{color:#a0a7ba}
body.dark-version .krx-page-head h1{color:#fff}
body.dark-version .krx-live{color:var(--krx-mint);border-color:rgba(45,246,181,.35)}
body.dark-version .krx-lastblock{color:#a0a7ba}
body.dark-version .krx-lastblock b{color:var(--krx-mint)}
body.dark-version #about-pool h3,body.dark-version #faq h3{color:#fff}
@media (hover:hover){body.dark-version .card:hover{box-shadow:0 14px 30px -10px rgba(0,0,0,.6),0 0 0 1px rgba(45,246,181,.35),0 4px 18px -6px var(--krx-glow) !important}}

/* ---- YourStats liveness --------------------------------------------------- */
.balance-progress-bar{transition:width 1.2s cubic-bezier(.25,.8,.3,1);background-image:linear-gradient(110deg,rgba(255,255,255,0) 30%,rgba(255,255,255,.35) 50%,rgba(255,255,255,0) 70%) !important;
  background-size:200% 100%;animation:krx-bar-shimmer 2.6s linear infinite}
@keyframes krx-bar-shimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}
#workerTableBody .badge.bg-gradient-success::before{content:"";display:inline-block;width:6px;height:6px;margin-right:.3rem;border-radius:50%;background:#fff;vertical-align:middle;animation:krx-worker-pulse 1.6s ease-in-out infinite}
@keyframes krx-worker-pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.35;transform:scale(.7)}}
.krx-delta{position:absolute;font-family:var(--krx-mono);font-size:.78rem;font-weight:700;color:var(--krx-teal);text-shadow:0 0 8px var(--krx-glow);pointer-events:none;white-space:nowrap;z-index:50;animation:krx-float-up 2.4s ease-out forwards}
@keyframes krx-float-up{0%{opacity:0;transform:translateY(4px) scale(.9)}15%{opacity:1;transform:translateY(-2px) scale(1.05)}100%{opacity:0;transform:translateY(-34px)}}

/* ---- motion off for people who asked for it ------------------------------ */
@media (prefers-reduced-motion:reduce){
  body::before,.krx-live-dot::after,.krx-flash,.krx-row-new,.krx-lastblock .krx-cube,.balance-progress-bar,
  #workerTableBody .badge.bg-gradient-success::before,.krx-delta,h5 > div:empty,h5 > span:empty{animation:none !important}
  .card,.card:hover,.sidenav .navbar-nav .nav-link:hover{transform:none !important}
}

/* ---- Payments table: suprcore's row template has no text-sm (Blocks/Miners do) -> match them (2026-10-01) ---- */
#paymentListTable td{font-size:.875rem;font-weight:400;padding-top:.6rem;padding-bottom:.6rem}
#paymentListTable td a,#paymentListTable td .text-primary{font-size:.875rem}
#paymentListTable td:nth-child(3){font-family:var(--krx-mono);font-variant-numeric:tabular-nums;font-weight:600}

/* ---- auto theme: html.krx-predark is set by the inline head snippet before first paint (night or stored 'dark') ---- */
html.krx-predark{background:#171717}
html.krx-predark body{background-color:#171717 !important}
/* 2026-10-27 mobile bug fix (iOS Safari report: "left hamburger menu goes transparent").
   The guard used to hide .sidenav too, and it could only ever be lifted by JS removing
   html.krx-predark. window.darkMode lives in material-dashboard.js, which load-scripts.js
   fetches SEQUENTIALLY after popper+bootstrap+chartjs with continueOnError:false — so on a
   slow or broken mobile load the class survived for the full 10 s JS cap (or until the chain
   recovered) and the sidenav rendered as an invisible, still-tappable panel. Two changes:
   (1) .sidenav is no longer hidden at all — it carries .bg-white and
       `.dark-version .sidenav.bg-white{background:#fff!important}` keeps it white in BOTH
       themes, so it has no light/dark flash to suppress in the first place;
   (2) the remaining guard self-expires in pure CSS after 900 ms, so a stalled or failed
       script chain can never leave content invisible again. */
html.krx-predark body:not(.dark-version) .card,html.krx-predark body:not(.dark-version) .main-content{visibility:hidden;animation:krx-predark-reveal 1ms linear 900ms forwards}
@keyframes krx-predark-reveal{to{visibility:visible}}