/* ═══════════════════════════════════════════════════════════
   NEON QUARRY — native Telegram surface
   iOS-dark grouped list language: #000 page, #1c1c1e groups,
   0.5px hairline separators, system font, 34/28/22/17/13/11 scale.
   ═══════════════════════════════════════════════════════════ */

:root{
  --bg:#000;
  --sec:#1c1c1e;
  --sec2:#2c2c2e;
  --press:#3a3a3c;
  --sep:rgba(84,84,88,.6);
  --label:#fff;
  --label2:rgba(235,235,245,.6);
  --label3:rgba(235,235,245,.3);
  --accent:#2990ff;
  --green:#32e55e;
  --amber:#fbbf24;
  --red:#ff453a;
  --f:-apple-system,BlinkMacSystemFont,system-ui,"SF Pro Text","Segoe UI",Roboto,sans-serif;
  /* Depth without shadows. tgui's own idiom is a hairline ring, so blocks are
     defined by their edge; controls then split into raised (lit top edge) and
     recessed (inner shadow), and that contrast is what makes a stack of flat
     grey rectangles read as a hierarchy. */
  --ring:none;
  --lit:none;
  --well:none;
  --tabbar:52px;
  --safe-b:env(safe-area-inset-bottom,0px);
  --safe-t:env(safe-area-inset-top,0px);
}

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{height:100%}
body{
  margin:0;background:var(--bg);color:var(--label);font-family:var(--f);
  font-size:17px;line-height:22px;-webkit-font-smoothing:antialiased;
  overscroll-behavior:none;user-select:none;
}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;padding:0}
b,strong{font-weight:600}
em,i{font-style:normal}
input{font:inherit}

.app{
  position:fixed;inset:0;display:flex;flex-direction:column;
  max-width:480px;margin:0 auto;background:var(--bg);
}

/* ── header ────────────────────────────────────────────────── */
.hdr{
  flex:0 0 auto;display:flex;align-items:center;gap:10px;
  padding:calc(var(--safe-t) + 8px) 16px 8px;
}
.brandLogo{
  width:32px;height:32px;border-radius:9px;flex:0 0 auto;display:block;
}
.who{display:flex;align-items:center;gap:9px;min-width:0;flex:1 1 auto}
.ava{
  width:34px;height:34px;border-radius:50%;flex:0 0 auto;
  background:linear-gradient(160deg,#3a3a3c,#1c1c1e);
  display:grid;place-items:center;font-size:14px;font-weight:600;color:var(--label2);
  background-size:cover;background-position:center;
}
.whoTxt{min-width:0;display:flex;flex-direction:column}
.whoTxt b{font-size:15px;line-height:19px;font-weight:600;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.whoTxt span{font-size:12px;line-height:15px;color:var(--label2)}

.pills{display:flex;gap:6px;flex:0 0 auto}
.pill{
  display:flex;align-items:center;gap:5px;padding:5px 10px;border-radius:20px;
  background:var(--sec);
}
.pill b{font-size:13px;font-weight:600;font-variant-numeric:tabular-nums}
.sprite{position:absolute;width:0;height:0;overflow:hidden}
.dot{width:14px;height:15px;flex:0 0 auto;display:block}
/* a label that carries a glyph sits on one line with it */
.rl b.hasIc{display:flex;align-items:center;gap:7px}
.rl b.hasIc .dot{width:16px;height:17.5px}

/* ── views ─────────────────────────────────────────────────── */
.views{flex:1 1 auto;position:relative;overflow:hidden}
.view{
  position:absolute;inset:0;overflow-y:auto;-webkit-overflow-scrolling:touch;
  display:none;padding-bottom:calc(var(--tabbar) + var(--safe-b) + 18px);
}
.view.on{display:block}

/* ── hero ──────────────────────────────────────────────────── */
.hero{
  display:flex;align-items:flex-end;justify-content:space-between;gap:12px;
  padding:2px 16px 6px;
}
.blk{display:flex;flex-direction:column;gap:1px}
.blkL{font-size:11px;font-weight:600;letter-spacing:.08em;color:var(--label2)}
.blk b{
  font-size:34px;line-height:38px;font-weight:700;letter-spacing:-.02em;
  font-variant-numeric:tabular-nums;
}
.blkR{display:flex;flex-direction:column;gap:3px;align-items:flex-end;padding-bottom:3px}
.kv{display:flex;gap:6px;align-items:baseline;font-size:12px}
.kv i{color:var(--label2)}
.kv b{font-size:13px;font-weight:600;font-variant-numeric:tabular-nums}

/* ── grouped sections ──────────────────────────────────────── */
.sec{
  margin:0 16px;background:var(--sec);border-radius:12px;overflow:hidden;
}
.secHead{
  display:flex;align-items:baseline;justify-content:space-between;
  margin:30px 16px 8px;font-size:13px;color:var(--label2);
  letter-spacing:-.01em;font-weight:400;
}
.secHead em{font-size:12px;color:var(--label3)}

/* ── rows ──────────────────────────────────────────────────── */
.row{
  position:relative;display:flex;align-items:center;gap:12px;
  min-height:44px;padding:11px 16px;
}
.row + .row::before{
  content:"";position:absolute;top:0;left:16px;right:0;height:.5px;background:var(--sep);
}
/* your pinned rank when you're below the visible board — a full-bleed rule
   sets it apart from the ranked list above */
.row.pinned::before{
  content:"";position:absolute;top:0;left:0;right:0;height:1px;background:var(--sep);
}
.rl{
  flex:1 1 auto;min-width:0;font-size:15px;line-height:20px;
  display:flex;flex-direction:column;gap:2px;
}
.rl b{font-size:15px;font-weight:600;display:block}
.rl em{font-size:12px;line-height:16px;color:var(--label2);display:block}
.rl.dim{font-size:12px;line-height:16px;color:var(--label2)}
.rl .plus{color:var(--accent);font-size:13px;font-weight:600;margin-top:2px;display:inline-block}
.rv{flex:0 0 auto;font-size:15px;color:var(--label2);font-variant-numeric:tabular-nums}
.rv b{color:var(--label);font-weight:600}
.rv.dim{font-size:12px}

/* ── progress ──────────────────────────────────────────────── */
.progWrap{padding:14px 16px 4px}
.prog{height:8px;border-radius:4px;background:var(--sec2);overflow:hidden;}
.prog.thin{height:5px;border-radius:3px;margin:0 16px}
.prog i{
  display:block;height:100%;width:0;border-radius:inherit;
  background:var(--accent);transition:width .3s linear;
}
.prog i.green{background:var(--green)}

.engHead{display:flex;align-items:center;justify-content:space-between;
  gap:12px;padding:12px 16px 8px}
.engHead .rl{font-size:15px}
.engHead .rv{font-size:13px}
.engHead .rv b{font-size:13px;font-weight:600}

/* ── buttons ───────────────────────────────────────────────── */
.btn{
  display:flex;align-items:center;justify-content:center;
  height:44px;padding:0 18px;border-radius:11px;
  font-size:16px;font-weight:600;letter-spacing:-.01em;
  background:var(--sec2);color:var(--label);
}
.btn:active{opacity:.72}
.btn.primary{background:var(--accent);color:#fff}
.btn.ghost{background:var(--sec2)}
.btn[disabled]{opacity:.35;pointer-events:none}
.btn.big{height:52px;font-size:17px;width:100%;}
.btnRow{display:flex;gap:8px;padding:0 16px 14px}
.btnRow .btn{flex:1 1 0}

.mini{
  display:flex;align-items:center;justify-content:center;
  height:30px;padding:0 13px;border-radius:9px;
  font-size:13px;font-weight:600;background:var(--sec2);color:var(--label);
  flex:0 0 auto;
}
.mini:active{opacity:.72}
.mini.primary{background:var(--accent);color:#fff;}
.mini[disabled]{opacity:.35;pointer-events:none}
/* Price accessories are tonal, not solid. A column of nine identical blue
   pills is what makes a list read as machine-generated — the solid fill is
   reserved for the one real call to action on a screen. */
.mini.buy{
  background:rgba(41,144,255,.16);color:#5aabff;
  font-variant-numeric:tabular-nums;
}
.mini.buy:active{background:rgba(41,144,255,.26)}
/* core cost rides along as the same gold dot the header pill uses, so the
   suffix never has to be decoded */
.mini.buy i{
  display:inline-flex;align-items:center;gap:4px;
  font-style:normal;font-size:11px;color:#ffd97a;margin-left:6px;
}
.mini.buy i .dot{width:11px;height:12px}

/* ── mining control ────────────────────────────────────────── */
.mineWrap{padding:18px 16px 4px}
.mineSub{margin-top:9px;text-align:center;font-size:13px;color:var(--label2)}

/* ── payout ledger ─────────────────────────────────────────── */
.liveTag{
  display:inline-flex;align-items:center;gap:5px;
  font-size:11px;font-weight:600;color:var(--green);letter-spacing:0;
}
.liveTag i{
  width:6px;height:6px;border-radius:50%;background:var(--green);
  animation:ping 1.9s cubic-bezier(.2,.7,.4,1) infinite;
}
@keyframes ping{
  0%,100%{opacity:1}
  50%{opacity:.35}
}

.paySum{min-height:0;padding:12px 16px;gap:10px}
.paySumL{display:flex;flex-direction:column;gap:1px;flex:1 1 auto;min-width:0}
.paySumL b{
  font-size:21px;line-height:25px;font-weight:700;color:var(--green);
  letter-spacing:-.022em;font-variant-numeric:tabular-nums;
}
.paySumL span{font-size:12px;line-height:16px;color:var(--label2)}
.paySumR{flex:0 0 auto;font-size:12px;color:var(--label3);font-weight:600}

.feed .payRow{min-height:46px;padding:8px 16px;gap:10px}
.payIc{
  width:21px;height:21px;border-radius:50%;flex:0 0 auto;position:relative;
  background:rgba(50,229,94,.15);
}
.payIc::after{
  content:"";position:absolute;left:6.5px;top:4px;width:5px;height:9.5px;
  border:solid var(--green);border-width:0 2px 2px 0;transform:rotate(42deg);
}
.payMid{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:0}
.payAddr{
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:12.5px;line-height:17px;font-weight:600;color:var(--label);
  letter-spacing:-.015em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.paySub{font-size:11px;line-height:15px;color:var(--label3)}
.payAmt{
  flex:0 0 auto;display:flex;align-items:baseline;gap:3px;
  font-size:14px;font-weight:700;color:var(--green);
  font-variant-numeric:tabular-nums;letter-spacing:-.015em;
}
.payAmt i{
  font-style:normal;font-size:9.5px;font-weight:600;
  color:var(--label3);letter-spacing:.05em;
}
.payRow.you .payIc{background:rgba(41,144,255,.2)}
.payRow.you .payIc::after{border-color:var(--accent)}
.payRow.you .payAddr,.payRow.you .payAmt{color:var(--accent)}
.payRow.fresh{animation:slidein .5s cubic-bezier(.22,1,.36,1)}
@keyframes slidein{
  from{opacity:0;transform:translateY(-10px)}
  to{opacity:1;transform:none}
}
.feed .row.blk{min-height:38px;padding:8px 16px;gap:9px}
.feed .blkDot{
  width:7px;height:7px;border-radius:50%;flex:0 0 auto;background:var(--label3);
}
.feed .blkRow{font-size:12.5px;color:var(--label2);flex:1 1 auto;min-width:0;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.feed .blkRow b{color:var(--label3);font-weight:600}
.feed .blkAmt{font-size:12.5px;color:var(--label3);font-weight:600;
  font-variant-numeric:tabular-nums}

/* ── upgrade rows ──────────────────────────────────────────── */
.up .lvl{
  flex:0 0 auto;display:flex;align-items:center;gap:1px;
  font-size:13px;color:var(--label2);font-variant-numeric:tabular-nums;
}
.up .lvl b{color:var(--label);font-weight:600;font-size:13px}
.cost{
  display:flex;align-items:center;gap:5px;font-size:13px;font-weight:600;
  color:var(--accent);font-variant-numeric:tabular-nums;
}
.cost.poor{color:var(--label3)}
.badge{
  font-size:11px;font-weight:600;padding:2px 7px;border-radius:7px;
  background:var(--sec2);color:var(--label2);
}
.badge.on{background:rgba(50,229,94,.16);color:var(--green)}

/* ── code field ────────────────────────────────────────────── */
.codeRow{display:flex;align-items:center;gap:9px;padding:12px 16px}
.field{
  flex:1 1 auto;min-width:0;height:38px;padding:0 12px;
  border-radius:9px;background:var(--sec2);border:0;color:var(--label);
  font-size:15px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;
  outline:none;-webkit-appearance:none;user-select:text;
}
.field::placeholder{color:var(--label3);text-transform:none;letter-spacing:0;font-weight:400}

/* ── address box ───────────────────────────────────────────── */
.addrBox{
  margin:0 16px 12px;padding:11px 13px;border-radius:10px;background:var(--sec2);
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12px;
  line-height:18px;color:var(--label2);word-break:break-all;user-select:text;
}

/* ── note ──────────────────────────────────────────────────── */
.note{padding:16px;font-size:12px;line-height:17px;color:var(--label2)}
.note.strong{color:var(--label3);padding:20px 16px 8px}

/* ── tab bar ───────────────────────────────────────────────── */
.tabbar{
  flex:0 0 auto;display:grid;grid-template-columns:repeat(5,1fr);
  height:calc(var(--tabbar) + var(--safe-b));padding-bottom:var(--safe-b);
  background:rgba(28,28,30,.94);backdrop-filter:blur(20px);
  border-top:.5px solid var(--sep);
}
.tab{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
  color:var(--label2);padding-bottom:2px;
}
.tab svg{width:23px;height:23px;fill:currentColor}
.tab span{font-size:10px;line-height:12px;font-weight:500;letter-spacing:.01em}
.tab.on{color:var(--accent)}
.tab.bump svg{animation:bump .4s}
@keyframes bump{0%,100%{transform:none}40%{transform:scale(1.24)}}

/* ── sheet ─────────────────────────────────────────────────── */
.sheetWrap{position:fixed;inset:0;z-index:1000;pointer-events:none}
.sheetBd{position:absolute;inset:0;background:rgba(0,0,0,.5);opacity:0;transition:opacity .22s}
.sheet{
  position:absolute;left:0;right:0;bottom:0;margin:0 auto;max-width:480px;
  max-height:calc(100dvh - 40px - var(--safe-t));
  display:flex;flex-direction:column;gap:6px;
  padding:8px 0 calc(20px + var(--safe-b));
  background:var(--sec);border-radius:14px 14px 0 0;
  transform:translateY(100%);opacity:0;
  transition:transform .28s cubic-bezier(.32,.72,0,1),opacity .28s;
}
.sheetWrap.on{pointer-events:auto}
.sheetWrap.on .sheetBd{opacity:1}
.sheetWrap.on .sheet{transform:translateY(0);opacity:1}
.grab{width:36px;height:5px;border-radius:3px;background:var(--label3);
  align-self:center;margin:4px 0 8px}
.sheetTtl{margin:0;padding:0 16px 6px;font-size:20px;line-height:25px;font-weight:700;
  letter-spacing:-.01em}
.sheetBody{display:flex;flex-direction:column;overflow-y:auto;min-height:0;
  -webkit-overflow-scrolling:touch;touch-action:pan-y}

/* option rows inside sheets */
.opt{
  position:relative;display:flex;align-items:center;gap:12px;
  min-height:52px;padding:12px 16px;text-align:left;width:100%;
}
.opt + .opt::before{content:"";position:absolute;top:0;left:16px;right:16px;
  height:.5px;background:var(--sep)}
.opt:active{background:var(--sec2)}
.optMeta{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:2px}
.optMeta b{font-size:16px;font-weight:600;line-height:20px}
.optMeta span{font-size:13px;line-height:17px;color:var(--label2)}
.optVal{flex:0 0 auto;font-size:14px;font-weight:600;color:var(--accent);
  font-variant-numeric:tabular-nums}

/* ── toast ─────────────────────────────────────────────────── */
.toast{
  position:fixed;left:50%;bottom:calc(var(--tabbar) + var(--safe-b) + 18px);
  transform:translate(-50%,14px);z-index:1200;
  padding:10px 16px;border-radius:12px;
  background:rgba(56,56,56,.92);backdrop-filter:blur(20px);
  font-size:14px;line-height:18px;color:#fff;text-align:center;
  opacity:0;pointer-events:none;transition:opacity .2s,transform .2s;
  max-width:min(320px,calc(100% - 32px));
}
.toast.on{opacity:1;transform:translate(-50%,0)}

/* ── boot ──────────────────────────────────────────────────── */
.boot{position:fixed;inset:0;z-index:2000;display:grid;place-items:center;
  background:var(--bg);transition:opacity .35s}
.boot.off{opacity:0;pointer-events:none}
.bootIn{display:flex;flex-direction:column;align-items:center;gap:20px}
.bootIn img{width:84px;height:84px;display:block;border-radius:19px;}
.bootIn i{
  display:block;width:22px;height:22px;border-radius:50%;
  border:2.5px solid rgba(255,255,255,.14);border-top-color:var(--accent);
  animation:spin .8s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg)}}


/* 2026 native pass: tgui/iOS grouped surfaces stay strictly flat. */
.view.on{display:block;animation:viewIn .28s cubic-bezier(.22,.61,.36,1) backwards}
@keyframes viewIn{from{opacity:0;transform:translateY(6px)}}
@media (prefers-reduced-motion:reduce){.view.on{animation:none}}
.sec{border:.5px solid rgba(255,255,255,.08)}
.tabbar{background:#1c1c1e;backdrop-filter:none;-webkit-backdrop-filter:none}
.toast{background:#3a3a3c;backdrop-filter:none;-webkit-backdrop-filter:none}
button:active,.btn:active,.mini:active,.tab:active{transform:translateY(1px);opacity:.78}
.networkStrip{flex:0 0 auto;display:flex;align-items:center;gap:8px;padding:4px 16px 8px;color:var(--label2);font-size:11px;border-bottom:.5px solid var(--sep)}
.networkStrip span{color:var(--green);font-weight:600;letter-spacing:.04em}
.networkStrip span i{display:inline-block;width:6px;height:6px;margin-right:5px;border-radius:50%;background:var(--green)}
.networkStrip b{margin-left:auto;color:var(--label);font-size:11px;font-weight:500;font-variant-numeric:tabular-nums}
.networkStrip em{color:var(--label3);font-size:10px}
.netStatus{flex:0 0 auto;padding:7px 16px;background:#3b1b1a;color:#ffb4ab;text-align:center;font-size:12px;border-bottom:.5px solid #ff453a55}
.walletTxn .rv.positive{color:var(--green)}.walletTxn .rv.negative{color:var(--red)}
.adsgramTaskHost{position:fixed;inset:0;z-index:2147483000;display:grid;place-items:end center;background:#0009}
.adsgramTaskCard{width:min(480px,100%);padding:18px 16px calc(18px + var(--safe-b));background:#1c1c1e;border-radius:14px 14px 0 0;border-top:.5px solid var(--sep)}
.adsgramTaskTitle{margin-bottom:12px;font-size:13px;color:var(--label2)}
.adsgramTaskClose{width:100%;height:44px;margin-top:12px;border-radius:11px;background:#2c2c2e;color:#fff;font-weight:600}

@media (max-width:360px){.networkStrip em{display:none}.networkStrip b{margin-left:auto}}

/* 2026-09 core gallery pass — richer content, still native-flat: imagery and
   typography carry hierarchy while every container keeps tgui hairlines and
   deliberately avoids drop shadows. */
body{font-variant-numeric:tabular-nums lining-nums}
.hdr{min-height:54px;padding:calc(var(--safe-t) + 9px) 16px 9px;border-bottom:.5px solid rgba(84,84,88,.35)}
.brandLogo{width:36px;height:36px;border-radius:10px}
.pill{padding:6px 10px;background:#1c1c1e;border:.5px solid rgba(255,255,255,.08)}
.networkStrip{padding-top:7px;padding-bottom:7px;background:#0b0b0c}
.coreStage{
  position:relative;height:184px;margin:14px 16px 12px;overflow:hidden;
  border-radius:14px;background:linear-gradient(180deg,#18181a 0%,#0c0c0d 100%);
  border:.5px solid rgba(255,255,255,.12);
}
.coreStage::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent 0 49.8%,rgba(84,84,88,.18) 50%,transparent 50.2%),linear-gradient(0deg,transparent 0 49.8%,rgba(84,84,88,.12) 50%,transparent 50.2%);background-size:44px 44px;opacity:.35}
.coreStage::after{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--accent)}
.coreCopy{position:absolute;z-index:2;left:15px;top:18px;display:flex;flex-direction:column;max-width:52%}
.coreEyebrow{display:flex;align-items:center;gap:6px;margin-bottom:8px;font-size:10px;line-height:13px;font-weight:600;letter-spacing:.08em;color:var(--green)}
.coreEyebrow i,.coreTelemetry span i{width:6px;height:6px;border-radius:50%;background:var(--green)}
.coreCopy>b{font-size:21px;line-height:24px;font-weight:700;letter-spacing:-.02em}
.coreCopy>em{margin-top:4px;font-size:12px;line-height:16px;color:var(--label2)}
.coreVisual{position:absolute;z-index:1;right:-2px;top:4px;height:159px;width:auto;pointer-events:none}
.coreTelemetry{
  position:absolute;z-index:3;left:0;right:0;bottom:0;height:38px;padding:0 14px;
  display:flex;align-items:center;border-top:.5px solid var(--sep);background:#1c1c1e;
}
.coreTelemetry span{display:flex;align-items:center;gap:6px;font-size:10px;font-weight:600;letter-spacing:.055em;color:var(--label2)}
.coreTelemetry b{margin-left:auto;font-size:13px;font-weight:600;color:#64b5ff}
.hero{padding:0 16px 10px;align-items:center}
.blkL{color:#64b5ff}.blk b{font-size:38px;line-height:41px;letter-spacing:-.035em}
.blkR{padding-bottom:0}.kv{padding:1px 0}
.sec{border-color:rgba(255,255,255,.1)}
.secHead{margin-top:27px;text-transform:uppercase;letter-spacing:.06em;font-size:11px;font-weight:600}
.btn.primary{background:#2990ff}.btn.big{height:50px;border-radius:12px}
.mineSub{font-size:12px}

@media (max-width:360px){
  .hdr{padding-left:12px;padding-right:12px}.pills{gap:4px}.pill{padding-left:7px;padding-right:7px}
  .coreStage{margin-left:12px;margin-right:12px;height:176px}.coreCopy{left:13px;top:16px}.coreCopy>b{font-size:18px;line-height:21px}.coreCopy>em{max-width:120px}
  .coreVisual{right:-8px;top:7px;height:149px}.coreTelemetry{height:36px;padding:0 12px}.hero{padding-left:12px;padding-right:12px}
}

/* Native large-title summaries for every non-mining screen. The hierarchy is
   carried by type, spacing and 0.5px rings only — no shadows or lifted cards. */
.nativeIntro{margin:20px 16px 0}
.nativeKicker{display:block;margin-bottom:3px;font-size:10px;line-height:13px;font-weight:600;letter-spacing:.1em;color:#64b5ff}
.nativeIntro h1{margin:0;font-size:34px;line-height:40px;font-weight:700;letter-spacing:-.035em}
.nativeIntro>p{margin:2px 0 14px;font-size:13px;line-height:18px;color:var(--label2)}
.nativeMetrics{display:grid;grid-template-columns:repeat(3,1fr);min-height:58px;overflow:hidden;border-radius:12px;background:var(--sec);border:.5px solid rgba(255,255,255,.1)}
.nativeMetrics span{display:flex;flex-direction:column;justify-content:center;padding:9px 12px;border-right:.5px solid var(--sep);min-width:0}
.nativeMetrics span:last-child{border-right:0}
.nativeMetrics small{font-size:9px;line-height:12px;font-weight:600;letter-spacing:.07em;color:var(--label3);white-space:nowrap}
.nativeMetrics b{margin-top:2px;font-size:14px;line-height:18px;font-weight:600;color:#64b5ff;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.nativeMetrics b.ok{color:var(--green)}
.nativeIntro + .secHead{margin-top:22px}

@media (max-width:360px){
  .nativeIntro{margin-left:12px;margin-right:12px}.nativeIntro h1{font-size:31px;line-height:37px}
  .nativeMetrics span{padding-left:9px;padding-right:9px}.nativeMetrics small{font-size:8px}.nativeMetrics b{font-size:12px}
}

/* Flat live-ops module: operational depth without visual depth. */
.epochPulse{margin:18px 16px 0;overflow:hidden;border-radius:12px;background:var(--sec);border:.5px solid rgba(255,255,255,.1)}
.epochPulseHead{display:flex;align-items:center;justify-content:space-between;padding:12px 14px 0}
.epochPulseHead span{display:flex;align-items:center;gap:6px;font-size:9px;line-height:12px;font-weight:600;letter-spacing:.09em;color:var(--green)}
.epochPulseHead span i{width:6px;height:6px;border-radius:50%;background:var(--green)}
.epochPulseHead em{font-size:10px;line-height:13px;color:var(--label3)}
.epochPulse>b{display:block;padding:6px 14px 0;font-size:19px;line-height:23px;font-weight:700;letter-spacing:-.02em}
.epochPulse>p{margin:2px 0 11px;padding:0 14px;font-size:12px;line-height:16px;color:var(--label2)}
.epochPulseBar{height:5px;margin:0 14px 10px;border-radius:3px;background:var(--sec2);overflow:hidden}
.epochPulseBar i{display:block;width:0;height:100%;border-radius:inherit;background:var(--accent);transition:width .35s linear}
.epochPulseStats{display:grid;grid-template-columns:1.25fr 1fr 1fr;border-top:.5px solid var(--sep)}
.epochPulseStats span{display:flex;flex-direction:column;padding:9px 12px;border-right:.5px solid var(--sep);min-width:0}
.epochPulseStats span:last-child{border-right:0}
.epochPulseStats small{font-size:8px;line-height:11px;font-weight:600;letter-spacing:.06em;color:var(--label3);white-space:nowrap}
.epochPulseStats b{font-size:13px;line-height:17px;font-weight:600;color:#64b5ff;white-space:nowrap}
.releaseNote{display:flex;align-items:center;gap:9px;padding:9px 12px;background:#111;border-top:.5px solid var(--sep)}
.releaseNote span{flex:0 0 auto;font-size:8px;line-height:11px;font-weight:600;letter-spacing:.05em;color:#64b5ff}
.releaseNote b{font-size:10px;line-height:13px;font-weight:400;color:var(--label2)}
.minerAva{width:30px;height:30px;border-radius:50%;flex:0 0 auto;display:grid;place-items:center;font-size:12px;font-weight:600;color:#fff;border:.5px solid rgba(255,255,255,.12)}
.minerAva.t0{background:#6a3d32}.minerAva.t1{background:#285d78}.minerAva.t2{background:#51407a}.minerAva.t3{background:#406133}.minerAva.t4{background:#76512a}.minerAva.t5{background:#334f58}

@media (max-width:360px){
  .epochPulse{margin-left:12px;margin-right:12px}.epochPulseStats span{padding-left:9px;padding-right:9px}.epochPulseStats small{font-size:7px}.epochPulseStats b{font-size:12px}
  .releaseNote{align-items:flex-start;flex-direction:column;gap:2px}.minerAva{width:28px;height:28px}
}