:root{--bg:#090d15;--panel:#1c2232;--line:#35405a;--text:#d7dbea;--muted:#929aad;--g:#38e37c;--c:#70dcff;--m:#d85bda;--y:#e8dc56}
*{box-sizing:border-box}body{margin:0;background:#080c14;color:var(--text);font:14px Consolas,monospace}
body:before{content:"";position:fixed;inset:0;pointer-events:none;background-image:linear-gradient(#41506b12 1px,transparent 1px),linear-gradient(90deg,#41506b12 1px,transparent 1px);background-size:48px 48px}
.shell{max-width:1500px;margin:auto;padding:14px;position:relative}.panel{background:linear-gradient(180deg,#202638f5,#191f2df5);border:1px solid var(--line);border-radius:9px;margin-bottom:12px}
.top{display:flex;justify-content:space-between;align-items:center;padding:15px 18px}.brand{font-size:18px}.brand span{color:var(--g)}.brand small{font-size:11px;color:var(--muted)}.status{display:flex;gap:13px;align-items:center;color:var(--muted)}.status i{width:9px;height:9px;border-radius:50%;background:#777}.status i.on{background:var(--g);box-shadow:0 0 10px var(--g)}.status b{color:var(--g)}.status strong{color:var(--text)}
.stats{display:grid;grid-template-columns:repeat(6,1fr);overflow:hidden}.stats>div{padding:14px 16px;border-right:1px solid var(--line)}.stats>div:last-child{border:0}.stats label{display:block;color:var(--c);font-size:12px;margin-bottom:8px}.stats b{font-size:16px}
.tabs{display:flex;padding:6px;gap:5px;overflow:auto}.tabs button{background:#252c3f;color:var(--text);border:1px solid transparent;border-radius:5px;padding:9px 13px;font:inherit;cursor:pointer;white-space:nowrap}.tabs button.active{border-color:#478197;background:linear-gradient(90deg,#263d3a,#293344)}
.view{display:none}.view.active{display:block}.cols{display:grid;grid-template-columns:1fr 1fr;gap:12px}.box{padding:12px}.box h3{display:inline-block;margin:0 0 10px;padding:6px 10px;border-radius:4px;font-size:13px}.cyan{background:var(--c);color:#06212b}.magenta{background:var(--m);color:#29102a}.green{background:var(--g);color:#062214}
.kv{display:grid;grid-template-columns:210px 1fr;gap:10px;padding:9px 4px;border-bottom:1px solid #39435a66}.kv span{color:var(--muted)}code{word-break:break-all}.big{font-size:29px;color:var(--g);margin:8px 0}.big small{font-size:13px;color:var(--muted)}
.bar{position:relative;height:15px;border:1px solid var(--line);border-radius:4px;background:#0e1420;margin:12px 0;overflow:hidden}.bar>i:first-child{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--c),var(--m));min-width:2px}.bar .trigger{position:absolute;left:75%;top:0;bottom:0;width:2px;background:#fff9}
.table{overflow:auto}.tr{display:grid;grid-template-columns:95px 175px minmax(300px,1fr) 120px 100px;gap:10px;padding:10px;border-bottom:1px solid #39435a66}.tr.head{color:var(--c);font-size:12px}.click{cursor:pointer}.click:hover{background:#27304780}.hash,.addr{word-break:break-all;color:#aab4cb}
.txrow{display:grid;grid-template-columns:95px minmax(320px,1fr) 95px 95px 120px 100px;gap:10px;padding:10px;border-bottom:1px solid #39435a66;align-items:center}.txrow.head{color:var(--c);font-size:12px}.txrow.click:hover{background:#27304780}
.mprow{display:grid;grid-template-columns:minmax(330px,1.5fr) 85px 85px 120px 100px 140px 100px;gap:10px;padding:11px;border-bottom:1px solid #39435a66;align-items:center}.mprow.head{color:var(--c);font-size:12px}.badge{display:inline-block;border:1px solid #526079;border-radius:4px;padding:3px 6px}.badge.pq{color:var(--m);border-color:#754275}.badge.ok{color:var(--g);border-color:#2f7651}.noid{color:var(--g)}.warn{color:var(--y)}
.atlas{display:grid;grid-template-columns:repeat(16,1fr);gap:3px;max-width:720px;margin:8px auto 20px}.cell{aspect-ratio:1;border:1px solid #33405a;border-radius:3px;background:#111724;position:relative}.cell>i{position:absolute;left:0;right:0;bottom:0;background:linear-gradient(180deg,var(--c),var(--m));min-height:1px}.cell:hover:after{content:attr(data-tip);position:absolute;z-index:9;left:50%;bottom:110%;transform:translateX(-50%);white-space:nowrap;background:#050810;border:1px solid var(--line);padding:5px 7px;border-radius:4px;color:var(--text)}
.searchrow{display:grid;grid-template-columns:1fr 120px;gap:8px}.searchrow input,.searchrow button{background:#0e1420;border:1px solid var(--line);color:var(--text);padding:11px;border-radius:5px;font:inherit}.searchrow button{background:var(--g);color:#062214;font-weight:bold;cursor:pointer}.resultcard{margin-top:12px;border:1px solid var(--line);border-radius:7px;padding:12px;background:#0f1521}.resultcard h4{color:var(--c);margin:0 0 10px}.ios{display:grid;grid-template-columns:1fr 1fr;gap:12px}.io{border:1px solid #35405a;border-radius:6px;padding:9px}.io h5{color:var(--m);margin:0 0 7px}.io .line{padding:6px 0;border-bottom:1px solid #35405a55}.foot{display:flex;justify-content:space-between;padding:10px 13px;color:var(--muted);font-size:12px}
@media(max-width:950px){.stats{grid-template-columns:repeat(2,1fr)}.cols,.ios{grid-template-columns:1fr}.top{align-items:flex-start;flex-direction:column;gap:10px}.tr,.txrow,.mprow{grid-template-columns:90px 1fr}.tr>*:nth-child(n+3),.txrow>*:nth-child(n+3),.mprow>*:nth-child(n+3){display:none}.kv{grid-template-columns:150px 1fr}}

.atlas{
  display:grid;
  grid-template-columns:repeat(16,1fr);
  gap:6px;
  max-width:760px;
  margin:8px auto 20px;
  perspective:1200px;
}
.cell{
  aspect-ratio:1;
  position:relative;
  border:1px solid #415070;
  border-radius:5px;
  background:linear-gradient(180deg,#172033 0%,#0f1523 100%);
  transform-style:preserve-3d;
  transform:translateZ(0) translateY(0);
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease, filter .18s ease;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.05),
    inset 0 -10px 18px rgba(0,0,0,.18),
    0 2px 0 rgba(8,12,22,.95),
    0 6px 12px rgba(0,0,0,.20);
  overflow:visible;
}
.cell::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:5px;
  background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,0) 38%);
  transform:translateZ(8px);
  pointer-events:none;
}
.cell::after{
  content:"";
  position:absolute;
  left:4px; right:4px; bottom:-4px; height:6px;
  border-radius:0 0 5px 5px;
  background:rgba(3,8,18,.75);
  filter:blur(2px);
  opacity:.55;
  transition:opacity .18s ease, transform .18s ease;
}
.cell>i{
  position:absolute;
  left:3px;
  right:3px;
  bottom:3px;
  border-radius:2px;
  background:linear-gradient(180deg,var(--c),var(--m));
  min-height:2px;
  box-shadow:0 0 10px rgba(112,220,255,.18), 0 0 14px rgba(216,91,218,.12);
  transform:translateZ(10px);
}
.cell:hover{
  transform:translateY(-7px) scale(1.06) rotateX(8deg);
  border-color:#7dd9ff;
  filter:brightness(1.08);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.08),
    inset 0 -8px 16px rgba(0,0,0,.16),
    0 4px 0 rgba(8,12,22,.95),
    0 14px 22px rgba(0,0,0,.32),
    0 0 18px rgba(112,220,255,.10);
  z-index:5;
}
.cell:hover::after{
  opacity:.78;
  transform:translateY(4px);
}
.cell:hover .label{opacity:1}
.cell:hover[data-tip]::marker{content:""}
.cell:hover > i{
  box-shadow:0 0 12px rgba(112,220,255,.32), 0 0 18px rgba(216,91,218,.25);
}
.cell:hover .dummy{display:block}
.cell:hover .label{display:block}
.cell:hover:where(:not(.no-tip)) .tooltip{display:block}
.cell:hover[data-tip]:not(.tooltipless) .phantom{display:block}
.cell:hover[data-tip]{
}
.cell:hover[data-tip]:before{
}
.cell:hover[data-tip]:not(.x)::selection{
}
.cell:hover[data-tip]:not(.x){
}
.cell:hover[data-tip] + *{
}
.cell:hover[data-tip]{
}
.cell:hover[data-tip]{
}
.cell:hover[data-tip]{
}
.cell:hover[data-tip]{
}
.cell:hover[data-tip]{
}
.cell:hover[data-tip]{
}
.cell:hover[data-tip]{
}
.cell:hover[data-tip]{
}
.cell:hover[data-tip]{
}
.cell:hover[data-tip]{
}
.cell:hover[data-tip]{
}
.cell:hover[data-tip]{
}
.cell:hover[data-tip]::before{
}
.cell:hover:before{
}
.cell:hover:after{
}
.cell:hover[data-tip]::after{
}
.cell:hover{
}
.cell:hover .n{
}
.cell:hover > span{
}
.cell:hover .bar{
}
.cell:hover[data-tip]{
}
.cell:hover[data-tip]{
}
.cell:hover[data-tip]{
}
.cell:hover .x{
}
.cell:hover .y{
}
.cell:hover .z{
}
.cell:hover .tip{
}
.cell:hover{
}
.cell:hover{
}
.cell:hover{
}
.cell:hover{
}
.cell:hover{
}
.cell:hover{
}
.cell:hover{
}
.cell:hover{
}
.cell:hover{
}
.cell:hover{
}
.cell:hover{
}
.cell:hover{
}
.cell:hover{
}
.cell:hover{
}
.cell:hover{
}
.cell:hover:before{
}
.cell:hover:after{
}
.cell:hover .tip{
}
.cell:hover{
}
.cell:hover{
}
.cell:hover{
}
.cell:hover[data-tip]::after{
  content:attr(data-tip);
  position:absolute;
  z-index:20;
  left:50%;
  bottom:calc(100% + 8px);
  transform:translateX(-50%);
  white-space:nowrap;
  background:#050810;
  border:1px solid var(--line);
  padding:6px 9px;
  border-radius:6px;
  font-size:12px;
  color:var(--text);
  box-shadow:0 10px 24px rgba(0,0,0,.35);
  opacity:1;
  width:auto;
  height:auto;
  right:auto;
  filter:none;
}

/* ===== V8 state atlas refinement ===== */
.atlas{
  max-width: 860px !important;
  gap: 6px !important;
  perspective: 1100px !important;
  perspective-origin: 50% 45% !important;
  padding: 10px 18px 18px !important;
}

/* base cube */
.cell{
  position: relative !important;
  overflow: visible !important;
  border-radius: 5px !important;
  border: 1px solid #4e5f80 !important;
  background:
    radial-gradient(circle at 30% 25%, rgba(255,255,255,.08), transparent 38%),
    linear-gradient(180deg,#182236 0%, #0d1524 100%) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.05),
    inset 0 -12px 16px rgba(0,0,0,.20),
    0 2px 0 #080c14,
    0 6px 12px rgba(0,0,0,.22) !important;
  transform-style: preserve-3d !important;
  transition:
    transform .16s ease,
    box-shadow .16s ease,
    border-color .16s ease,
    filter .16s ease !important;
}

.cell::before{
  content:"";
  position:absolute;
  left:3px; right:3px; top:-6px; height:6px;
  border-radius:4px 4px 0 0;
  background:linear-gradient(180deg,#23324e,#172238);
  border:1px solid #5d7193;
  border-bottom:0;
  opacity:.40;
  transform:skewX(-28deg);
  transform-origin:bottom left;
  pointer-events:none;
  transition:opacity .16s ease;
}

.cell::after{
  content:"";
  position:absolute;
  top:3px; right:-6px; width:6px; bottom:3px;
  border-radius:0 4px 4px 0;
  background:linear-gradient(90deg,#0d1523,#20304b);
  border:1px solid #526685;
  border-left:0;
  opacity:.32;
  transform:skewY(-28deg);
  transform-origin:top left;
  pointer-events:none;
  transition:opacity .16s ease;
}

/* the fill state should be much more visible */
.cell > i{
  left:4px !important;
  right:4px !important;
  bottom:4px !important;
  min-height:3px !important;
  border-radius: 3px !important;
  background: linear-gradient(180deg, #ffe580 0%, #f7c948 50%, #d39b00 100%) !important;
  box-shadow:
    0 0 8px rgba(255,217,77,.38),
    0 0 16px rgba(255,193,7,.22) !important;
  z-index: 2 !important;
}

/* active buckets get a subtle golden aura even without hover */
.cell.active{
  border-color:#7a6a2b !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.05),
    inset 0 -12px 16px rgba(0,0,0,.20),
    0 2px 0 #080c14,
    0 8px 16px rgba(0,0,0,.24),
    0 0 10px rgba(255,205,86,.10) !important;
}

/* 4x4 layer separators */
.cell.sep-right{
  margin-right: 12px !important;
}
.cell.sep-bottom{
  margin-bottom: 12px !important;
}

/* hover: rise upward clearly, not downward */
.cell:hover{
  transform: translateY(-8px) scale(1.05) !important;
  border-color:#ffe580 !important;
  filter:brightness(1.08) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.08),
    inset 0 -8px 14px rgba(0,0,0,.16),
    0 5px 0 #080c14,
    0 16px 24px rgba(0,0,0,.34),
    0 0 22px rgba(255,215,80,.18) !important;
  z-index: 30 !important;
}

.cell:hover::before,
.cell:hover::after{
  opacity:.90;
}

/* override old pseudo tooltip generated from data-tip */
.cell[data-tip]:hover::after{
  /* keep side face; tooltip handled by span below */
  content:"";
}

.cell-tooltip{
  position:absolute;
  left:50%;
  bottom:calc(100% + 14px);
  transform:translateX(-50%);
  display:none;
  white-space:nowrap;
  z-index:999;
  background:#050810;
  color:#e5ebf6;
  border:1px solid #5b6d8e;
  border-radius:6px;
  padding:7px 10px;
  box-shadow:0 10px 26px rgba(0,0,0,.42);
  pointer-events:none;
  font-size:12px;
}
.cell:hover .cell-tooltip{ display:block; }

/* hide any legacy decorative spans if present */
.cell .face-top, .cell .face-right { display:none !important; }

/* ===== V9: make occupied state visually unmistakable ===== */

/* Empty buckets: no gold fill at all */
.cell:not(.active) > i{
  height:0 !important;
  min-height:0 !important;
  box-shadow:none !important;
  background:transparent !important;
}

/* Active bucket: strong gold face + glow */
.cell.active{
  border:1px solid #d7a915 !important;
  background:
    radial-gradient(circle at 35% 20%, rgba(255,230,120,.13), transparent 38%),
    linear-gradient(180deg,#1d2739 0%,#111827 100%) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.08),
    inset 0 -12px 16px rgba(0,0,0,.18),
    0 2px 0 #080c14,
    0 7px 14px rgba(0,0,0,.26),
    0 0 18px rgba(255,199,42,.28),
    0 0 34px rgba(255,171,0,.10) !important;
}

.cell.active::before{
  border-color:#d5ac35 !important;
  background:linear-gradient(180deg,#5d4a18,#2b2414) !important;
  opacity:.72 !important;
}
.cell.active::after{
  border-color:#b98b18 !important;
  background:linear-gradient(90deg,#241c0b,#5c4614) !important;
  opacity:.60 !important;
}

/* Active fill becomes a bright gold "liquid" instead of a thin line */
.cell.active > i{
  min-height:8px !important;
  background:
    linear-gradient(180deg,#fff2a6 0%,#ffd94f 34%,#f2b600 70%,#b97a00 100%) !important;
  border:1px solid rgba(255,235,145,.75) !important;
  box-shadow:
    0 0 7px rgba(255,245,176,.75),
    0 0 14px rgba(255,205,61,.70),
    0 0 26px rgba(255,170,0,.35) !important;
}

/* tiny beacon in the upper-right corner */
.cell.active .active-dot{
  position:absolute;
  top:5px;
  right:5px;
  width:7px;
  height:7px;
  border-radius:50%;
  background:#ffe36e;
  box-shadow:0 0 8px #ffe36e,0 0 16px rgba(255,190,0,.75);
  z-index:4;
}

/* on hover active bucket becomes even clearer */
.cell.active:hover{
  border-color:#fff0a1 !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.10),
    0 6px 0 #080c14,
    0 18px 28px rgba(0,0,0,.36),
    0 0 24px rgba(255,218,89,.55),
    0 0 42px rgba(255,170,0,.22) !important;
}

/* ===== V10 compact layout ===== */

/* Hide scrollbars but keep scrolling available if ever needed */
html, body{
  scrollbar-width: none !important; /* Firefox */
  -ms-overflow-style: none !important; /* old Edge/IE */
}
html::-webkit-scrollbar,
body::-webkit-scrollbar,
*::-webkit-scrollbar{
  width: 0 !important;
  height: 0 !important;
  display: none !important;
}

/* Slightly tighter explorer shell */
.shell{
  max-width: 1320px !important;
  padding: 10px !important;
}

/* Make the state panel more compact so 100% browser zoom is enough */
.atlas{
  max-width: 460px !important;   /* roughly ~50% smaller feel */
  gap: 4px !important;
  padding: 6px 8px 10px !important;
  margin: 6px auto 12px !important;
}

/* Smaller cubes */
.cell{
  border-radius: 4px !important;
}
.cell::before{
  left: 2px !important;
  right: 2px !important;
  top: -4px !important;
  height: 4px !important;
}
.cell::after{
  top: 2px !important;
  right: -4px !important;
  width: 4px !important;
  bottom: 2px !important;
}
.cell > i{
  left: 3px !important;
  right: 3px !important;
  bottom: 3px !important;
  min-height: 6px !important;
}

/* Smaller tooltip and beacon to match reduced cube size */
.cell-tooltip{
  padding: 6px 8px !important;
  font-size: 11px !important;
}
.cell.active .active-dot{
  width: 5px !important;
  height: 5px !important;
  top: 4px !important;
  right: 4px !important;
}

/* 4x4 separators a bit tighter */
.cell.sep-right{
  margin-right: 8px !important;
}
.cell.sep-bottom{
  margin-bottom: 8px !important;
}

/* Tighten state card content below atlas */
#stateDetails .kv{
  padding: 7px 4px !important;
}

/* Make the state section title cleaner */
#state .box h3{
  letter-spacing: .2px !important;
}

/* ===== V11 final State polish ===== */

/* V10 was ~50% scale. V11 is ~75% of the original large atlas. */
.atlas{
  max-width: 690px !important;
  gap: 5px !important;
  padding: 8px 12px 14px !important;
}

/* Keep the cubes crisp on hover: no scale / 3D transform */
.cell:hover{
  transform: none !important;
  filter: none !important;
  border-color:#ffe580 !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.07),
    inset 0 -8px 14px rgba(0,0,0,.12),
    0 0 16px rgba(255,210,70,.22) !important;
}

/* Remove the fake lower/side shadow while hovering */
.cell:hover::after{
  opacity:0 !important;
  background:transparent !important;
  border-color:transparent !important;
}

/* Do not shift or scale active buckets either */
.cell.active:hover{
  transform:none !important;
  filter:none !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.08),
    inset 0 -8px 14px rgba(0,0,0,.10),
    0 0 18px rgba(255,218,89,.34),
    0 0 30px rgba(255,170,0,.12) !important;
}

/* Crisp tooltip text */
.cell-tooltip{
  transform:translateX(-50%) !important;
  text-shadow:none !important;
  filter:none !important;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  font-weight:600;
  box-shadow:0 6px 16px rgba(0,0,0,.28) !important;
}

/* Keep top face subtle, but no moving shadow effect */
.cell:hover::before{
  opacity:.55 !important;
}

/* ===== V12: lift cubes again, but without blur ===== */

/* Hover should lift, but not scale or tilt */
.cell:hover{
  transform: translateY(-7px) !important;
  filter: none !important;
  border-color:#ffe580 !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.07),
    inset 0 -8px 14px rgba(0,0,0,.12),
    0 0 16px rgba(255,210,70,.22) !important;
}

/* Active cube also lifts */
.cell.active:hover{
  transform: translateY(-7px) !important;
  filter:none !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.08),
    inset 0 -8px 14px rgba(0,0,0,.10),
    0 0 18px rgba(255,218,89,.34),
    0 0 30px rgba(255,170,0,.12) !important;
}

/* Keep tooltip crisp while cube lifts */
.cell-tooltip{
  transform: translateX(-50%) !important;
  text-shadow:none !important;
  filter:none !important;
}

/* No ugly underside shadow */
.cell:hover::after,
.cell.active:hover::after{
  opacity:0 !important;
  background:transparent !important;
  border-color:transparent !important;
}

/* ===== V16 exact RichList ===== */
.gold{background:linear-gradient(180deg,#ffe47a,#d9a514)!important;color:#2a2107!important}
.rich-title-row{display:flex;justify-content:space-between;align-items:center;gap:12px}
.mini-btn{background:#252c3f;color:var(--text);border:1px solid #596783;border-radius:5px;padding:7px 11px;font:12px Consolas,monospace;cursor:pointer}
.mini-btn:hover{border-color:#f0c94f;color:#ffe580}
.rich-summary{display:grid;grid-template-columns:repeat(4,1fr);border:1px solid var(--line);border-radius:7px;overflow:hidden;margin:4px 0 10px}
.rich-summary>div{padding:11px 13px;border-right:1px solid var(--line)}.rich-summary>div:last-child{border-right:0}
.rich-summary label{display:block;color:var(--muted);font-size:11px;margin-bottom:6px}.rich-summary b{color:#ffe580}
.rich-note{color:var(--muted);font-size:12px;padding:5px 2px 10px}
.rich-row{display:grid;grid-template-columns:70px minmax(360px,1fr) 180px 100px 120px;gap:12px;align-items:center;padding:11px 9px;border-bottom:1px solid #39435a66}
.rich-row.head{color:var(--c);font-size:12px}.rich-row.data{cursor:pointer}.rich-row.data:hover{background:#27304780}
.rank1{color:#ffd84f;font-weight:bold}.rank2{color:#c9d2de;font-weight:bold}.rank3{color:#d6a06c;font-weight:bold}.rich-balance{color:#ffe580;font-weight:bold}

/* ===== State layout: 8 rows × 32 columns ===== */
.atlas{
  grid-template-columns: repeat(32, 1fr) !important;
  max-width: 1120px !important;
  gap: 4px !important;
  padding: 8px 10px 12px !important;
}

/* Reset old 16-column 4×4 separator spacing */
.cell.sep-right{
  margin-right: 0 !important;
}
.cell.sep-bottom{
  margin-bottom: 0 !important;
}

/* New grouping: visible vertical break every 8 columns,
   horizontal break every 4 rows */
.cell.group-right{
  margin-right: 9px !important;
}
.cell.group-bottom{
  margin-bottom: 9px !important;
}

@media(max-width:900px){
  .atlas{
    max-width: 100% !important;
    gap: 3px !important;
  }
}

/* ===== 8×32 atlas with 4×4 grouping ===== */
.cell.group-right{
  margin-right: 9px !important;
}
.cell.group-bottom{
  margin-bottom: 9px !important;
}

/* ===== V16 stats+ : only missing network cards ===== */
.stats{
  grid-template-columns:repeat(3,minmax(0,1fr)) !important;
}
#circSupply{color:#5cff88}
#networkHashrate{color:#5cff88}
#avgBlockTime{color:#5cff88}

@media(min-width:1250px){
  .stats{
    grid-template-columns:repeat(9,minmax(0,1fr)) !important;
  }
}
@media(max-width:850px){
  .stats{
    grid-template-columns:repeat(3,minmax(0,1fr)) !important;
  }
}
@media(max-width:560px){
  .stats{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  }
}


/* ===== Donate footer ===== */
.donate-footer{
  margin-top:18px;
  padding:16px 18px 20px;
  text-align:center;
  border-top:1px solid rgba(94,125,171,.28);
  color:#8fa5bf;
  font-family:inherit;
}

.donate-label{
  color:#66d9ef;
  font-size:12px;
  letter-spacing:.14em;
  margin-bottom:6px;
}

.donate-text{
  font-size:12px;
  color:#8395aa;
  margin-bottom:8px;
}

.donate-address{
  display:inline-block;
  max-width:100%;
  padding:7px 10px;
  border:1px solid rgba(255,215,90,.22);
  border-radius:6px;
  color:#ffd75a;
  background:rgba(255,215,90,.035);
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:12px;
  line-height:1.45;
  overflow-wrap:anywhere;
  user-select:all;
}

@media(max-width:640px){
  .donate-footer{
    padding-left:10px;
    padding-right:10px;
  }
  .donate-address{
    font-size:11px;
  }
}


/* ===== V18 STATE PRESSURE / PoSR foundation ===== */
.state-pressure-panel{margin-top:14px}
.sp-head,.sp-title-row{display:flex;justify-content:space-between;align-items:flex-start;gap:16px}
.sp-sub{font-size:10px;color:#71849b;margin-top:-2px;line-height:1.5}
.spi-value{display:flex;align-items:baseline;gap:7px;white-space:nowrap}
.spi-value b{font-size:28px;color:#ffd75a;line-height:1}
.spi-value small{font-size:10px;color:#8c7950;letter-spacing:.12em}
.spi-track{position:relative;height:12px;background:#07101d;border:1px solid #34465f;border-radius:4px;margin:14px 0 12px;overflow:visible}
.spi-track>i{display:block;height:100%;width:0;background:linear-gradient(90deg,#23c78b,#66d9ef,#ffd75a);border-radius:3px;transition:width .35s ease}
.spi-trigger{position:absolute;right:-1px;top:-18px;color:#d2ae42;font-size:9px}
.state-econ-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.state-econ-cards>div,.flow-card{border:1px solid rgba(71,95,128,.32);border-radius:6px;padding:10px 11px;background:rgba(7,12,21,.45);min-width:0}
.state-econ-cards label,.flow-card span{display:block;color:#788ca5;font-size:9px;letter-spacing:.09em;margin-bottom:5px}
.state-econ-cards b{display:block;color:#a7e7ff;font-size:14px}
.state-econ-cards small{display:block;color:#596c82;font-size:9px;margin-top:4px}
.flow-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-top:12px}
.flow-card b{font-size:15px;color:#d9e4ef}
.flow-card b.plus{color:#8cff9b}
.flow-card b.minus{color:#ff9e9e}
.coverage{font-size:9px;color:#6d8199;border:1px solid rgba(75,100,135,.3);border-radius:4px;padding:5px 7px;white-space:nowrap}
.state-savers-table{margin-top:12px}
.saver-row{display:grid;grid-template-columns:58px minmax(0,1fr) 140px 100px;gap:10px;align-items:center;padding:8px 6px;border-top:1px solid rgba(70,92,123,.22);font-size:11px}
.saver-row.head{color:#71849b;font-size:9px;letter-spacing:.08em;border-top:0}
.saver-row.data{cursor:pointer}
.saver-row.data:hover{background:rgba(102,217,239,.035)}
.saver-row .rank{color:#ffd75a;font-weight:800}
.saver-row .addr{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.saver-row .saved{color:#8cff9b;font-weight:800;text-align:right}
.saver-row .proofs{text-align:right;color:#92a6bc}
@media(max-width:760px){
  .state-econ-cards,.flow-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .saver-row{grid-template-columns:44px minmax(0,1fr) 100px}
  .saver-row .proofs{display:none}
}
@media(max-width:500px){
  .sp-head,.sp-title-row{display:block}
  .spi-value,.coverage{margin-top:9px}
  .state-econ-cards,.flow-grid{grid-template-columns:1fr 1fr}
}


/* ===== V19 aggressive retained-history backfill ===== */
.coverage-stack{display:flex;flex-direction:column;align-items:flex-end;gap:5px}
.scan-progress{color:#d9b84d}
.scan-progress.running{color:#8cff9b;border-color:rgba(140,255,155,.3)}
@media(max-width:500px){
  .coverage-stack{align-items:flex-start;margin-top:9px}
}


/* ===== V21 Proof of State Reduction event log ===== */
.posr-events-panel{margin-top:14px}
.posr-actions{display:flex;align-items:center;gap:8px}
.posr-head,.posr-row{
  display:grid;
  grid-template-columns:90px minmax(0,1fr) 85px 85px 105px 105px;
  gap:10px;
  align-items:center;
}
.posr-head{
  margin-top:13px;
  padding:0 8px 7px;
  color:#6d8199;
  font-size:9px;
  letter-spacing:.09em;
}
.posr-row{
  padding:9px 8px;
  border-top:1px solid rgba(70,92,123,.22);
  font-size:11px;
  min-width:0;
}
.posr-row:hover{background:rgba(102,217,239,.035)}
.posr-block{color:#a8c7e6;font-weight:700}
.posr-address{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  color:#a8bdd2;
  cursor:pointer;
}
.posr-io{text-align:right;color:#93a7bd}
.posr-saved{text-align:right;color:#8cff9b;font-weight:900}
.posr-proof{text-align:right;color:#8cff9b;font-size:9px;letter-spacing:.08em}
.posr-empty{
  padding:14px 8px;
  color:#8a9aaf;
  font-size:11px;
}
@media(max-width:850px){
  .posr-head,.posr-row{
    grid-template-columns:75px minmax(0,1fr) 70px 70px 90px;
  }
  .posr-head span:last-child,.posr-proof{display:none}
}
@media(max-width:620px){
  .posr-head,.posr-row{
    grid-template-columns:65px minmax(0,1fr) 75px;
  }
  .posr-head span:nth-child(3),
  .posr-head span:nth-child(4),
  .posr-row .posr-inputs,
  .posr-row .posr-outputs{display:none}
  .posr-actions{margin-top:9px}
}


/* ===== Rust V2: strict row alignment fixes ===== */

/* Top State Savers: header and data rows share EXACTLY the same grid. */
.state-savers-table .saver-row,
.state-savers-table .saver-row.head,
.state-savers-table .saver-row.data{
  display:grid !important;
  grid-template-columns:72px minmax(0,1fr) 150px 120px !important;
  column-gap:16px !important;
  align-items:center !important;
  padding:9px 8px !important;
  box-sizing:border-box !important;
}

.state-savers-table .saver-row > span{
  min-width:0 !important;
}

.state-savers-table .saver-row .rank{
  text-align:left !important;
}

.state-savers-table .saver-row .addr{
  text-align:left !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
  white-space:nowrap !important;
}

.state-savers-table .saver-row .saved,
.state-savers-table .saver-row .proofs{
  text-align:right !important;
  justify-self:stretch !important;
}

/* PoSR: force header/data to identical 6-column geometry. */
.posr-events-panel .posr-head,
.posr-events-panel .posr-row{
  display:grid !important;
  grid-template-columns:110px minmax(0,1fr) 90px 90px 100px 110px !important;
  column-gap:16px !important;
  align-items:center !important;
  padding-left:10px !important;
  padding-right:10px !important;
  box-sizing:border-box !important;
}

.posr-events-panel .posr-head > span,
.posr-events-panel .posr-row > span{
  min-width:0 !important;
}

.posr-events-panel .posr-block,
.posr-events-panel .posr-address{
  text-align:left !important;
}

.posr-events-panel .posr-inputs,
.posr-events-panel .posr-outputs,
.posr-events-panel .posr-saved,
.posr-events-panel .posr-proof{
  text-align:right !important;
  justify-self:stretch !important;
}

/* Keep State atlas exactly in the working V16 layout:
   32 columns × 8 rows, grouped visually in 4×4 blocks. */
.atlas{
  grid-template-columns:repeat(32,1fr) !important;
  max-width:1120px !important;
  gap:4px !important;
  padding:8px 10px 12px !important;
}
.cell.sep-right,
.cell.sep-bottom{
  margin-right:0 !important;
  margin-bottom:0 !important;
}
.cell.group-right{margin-right:9px !important}
.cell.group-bottom{margin-bottom:9px !important}

/* Responsive alignment */
@media(max-width:900px){
  .state-savers-table .saver-row,
  .state-savers-table .saver-row.head,
  .state-savers-table .saver-row.data{
    grid-template-columns:56px minmax(0,1fr) 110px 90px !important;
    column-gap:10px !important;
  }

  .posr-events-panel .posr-head,
  .posr-events-panel .posr-row{
    grid-template-columns:82px minmax(0,1fr) 72px 72px 82px 92px !important;
    column-gap:9px !important;
  }
}

@media(max-width:640px){
  .state-savers-table .saver-row,
  .state-savers-table .saver-row.head,
  .state-savers-table .saver-row.data{
    grid-template-columns:48px minmax(0,1fr) 88px !important;
  }
  .state-savers-table .saver-row .proofs{
    display:none !important;
  }

  .posr-events-panel .posr-head,
  .posr-events-panel .posr-row{
    grid-template-columns:72px minmax(0,1fr) 76px !important;
  }
  .posr-events-panel .posr-head span:nth-child(3),
  .posr-events-panel .posr-head span:nth-child(4),
  .posr-events-panel .posr-head span:nth-child(6),
  .posr-events-panel .posr-inputs,
  .posr-events-panel .posr-outputs,
  .posr-events-panel .posr-proof{
    display:none !important;
  }
}