/* ============================================================
   ZVEIN — 像素机视觉体系
   参考语言：3px 像素栅格 · 硬边框 · 零圆角 · 阶梯动画
   ============================================================ */

:root{
  /* 像素栅格基准：所有尺寸/边框/间距都取它的整数倍 */
  --px:3px;

  /* 底色层 */
  --ink:#07070a;
  --black:#000;
  --panel:#1d1f26;
  --panel-2:#2b2d33;
  --panel-3:#3b3a45;

  /* 描边 */
  --edge:#575e71;
  --edge-hi:#767e97;
  --hair:#3b3a45;

  /* 文字 */
  --text:#dee9fc;
  --text-2:#b9c4dd;
  --text-3:#767e97;

  /* 语义色 */
  --work:#add064;        /* 工作量 / 成功 */
  --work-deep:#65b24c;
  --work-hi:#e2f09b;
  --rare:#eabe57;        /* 奖励 / 高亮 */
  --rare-hi:#ffe398;
  --chain:#6fd3d5;       /* 链上数据 */
  --chain-hi:#aef5f1;
  --mine:#ffb3d6;        /* 挖矿中 */
  --mine-deep:#ff79c4;
  --alarm:#ffaf7c;       /* 警告 */

  /* 字体：全部像素/点阵，Latin 子集 */
  --font-display:"Jersey 10","Courier New",monospace;
  --font-mono:"VT323","Courier New",monospace;
  --font-body:"DotGothic16","Courier New",monospace;
}

*,*::before,*::after{box-sizing:border-box;border-radius:0}

html{-webkit-text-size-adjust:100%}

body{
  margin:0;
  background:var(--ink);
  color:var(--text);
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:none;
  font-smooth:never;
  text-rendering:optimizeSpeed;
}

/* 背景：细栅格 + 扫描线，压低对比度只做质感 */
body::before{
  content:"";
  position:fixed; inset:0; z-index:0; pointer-events:none;
  background-image:
    repeating-linear-gradient(0deg, rgba(222,233,252,.028) 0 1px, transparent 1px var(--px)),
    repeating-linear-gradient(90deg, rgba(222,233,252,.028) 0 1px, transparent 1px var(--px)),
    repeating-linear-gradient(0deg, rgba(0,0,0,.22) 0 1px, transparent 1px calc(var(--px)*2));
}

.wrap{
  width:100%;
  max-width:1344px;
  margin:0 auto;
  padding:0 calc(var(--px)*8);
  position:relative;
  z-index:1;
}

@media (max-width:640px){ .wrap{ padding:0 calc(var(--px)*5) } }

/* ---------------- 排版基础 ---------------- */

h1,h2,h3{margin:0;font-weight:400}

.label{
  font-family:var(--font-mono);
  font-size:19px;
  line-height:1.2;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--text-3);
}

.mono{ font-family:var(--font-mono); font-size:19px; letter-spacing:.02em }
.num{ font-family:var(--font-mono); font-size:19px; text-align:right; font-variant-numeric:tabular-nums }

.green{ color:var(--work) !important }
.gold{ color:var(--rare) !important }

/* ---------------- 顶栏 ---------------- */

header{
  position:sticky; top:0; z-index:20;
  background:var(--ink);
  border-bottom:var(--px) solid var(--panel-3);
}

.nav{
  display:flex; align-items:center; justify-content:space-between;
  gap:calc(var(--px)*6);
  height:calc(var(--px)*22);
}

.brand{
  display:inline-flex; align-items:center; gap:calc(var(--px)*3);
  font-family:var(--font-display);
  font-size:34px; line-height:1;
  letter-spacing:.14em;
  color:var(--text);
  text-decoration:none;
}

.brand .dot{
  width:calc(var(--px)*3); height:calc(var(--px)*3);
  background:var(--work);
  box-shadow:0 0 calc(var(--px)*2) var(--work);
  animation:blink 1.6s steps(2,end) infinite;
}

.nav-r{ display:flex; align-items:center; gap:calc(var(--px)*4); flex-wrap:wrap }

.sep{
  width:var(--px); height:calc(var(--px)*5);
  background:var(--panel-3);
}

/* 状态胶囊 */
.st{
  display:inline-flex; align-items:center; gap:calc(var(--px)*2);
  font-family:var(--font-mono); font-size:18px;
  letter-spacing:.1em; text-transform:uppercase;
  color:var(--text-3);
}
.st i{
  width:calc(var(--px)*2); height:calc(var(--px)*2);
  background:var(--text-3); display:inline-block;
}
.st.on{ color:var(--work) }
.st.on i{ background:var(--work); box-shadow:0 0 calc(var(--px)*2) var(--work) }
.st.off{ color:var(--text-3) }
.st.off i{ background:var(--edge) }

/* ---------------- 头部数据区 ---------------- */

.head{
  border-bottom:var(--px) solid var(--panel-3);
  padding:calc(var(--px)*12) 0 calc(var(--px)*10);
  background:
    linear-gradient(180deg, rgba(43,45,51,.35), transparent 70%),
    var(--ink);
}

.head-top{
  display:flex; align-items:flex-end; justify-content:space-between;
  gap:calc(var(--px)*6); flex-wrap:wrap;
  margin-bottom:calc(var(--px)*6);
}

.fig{
  font-family:var(--font-display);
  font-size:clamp(56px,9vw,96px);
  line-height:.9;
  letter-spacing:.03em;
  color:var(--text);
  font-variant-numeric:tabular-nums;
}
.fig small{
  font-family:var(--font-mono);
  font-size:22px; letter-spacing:.08em;
  color:var(--text-3);
}

.pct{
  font-family:var(--font-mono);
  font-size:clamp(34px,5vw,52px);
  line-height:1;
  color:var(--work);
  font-variant-numeric:tabular-nums;
}

/* 进度条：分段像素条 */
.bar{
  position:relative;
  height:calc(var(--px)*8);
  background:var(--ink);
  border:var(--px) solid var(--panel-3);
  padding:var(--px);
}
.bar > i{
  display:block; height:100%; width:0;
  background-color:var(--work);
  background-image:repeating-linear-gradient(90deg,
    transparent 0 calc(var(--px)*2), rgba(7,7,10,.45) calc(var(--px)*2) var(--px*3));
  transition:width .5s steps(10,end);
  box-shadow:0 0 calc(var(--px)*3) rgba(173,208,100,.5);
}

.bar-scale{
  display:flex; justify-content:space-between;
  margin-top:calc(var(--px)*3);
  font-family:var(--font-mono); font-size:15px;
  letter-spacing:.1em; color:var(--text-3);
}

.metrics{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  gap:var(--px);
  margin-top:calc(var(--px)*10);
  background:var(--panel-3);
  border:var(--px) solid var(--panel-3);
}

.m{
  background:var(--ink);
  padding:calc(var(--px)*4) calc(var(--px)*4);
}
.m .k{
  font-family:var(--font-mono); font-size:15px;
  letter-spacing:.14em; text-transform:uppercase;
  color:var(--text-3); margin-bottom:calc(var(--px)*2);
}
.m .v{
  font-family:var(--font-mono); font-size:26px;
  line-height:1; color:var(--chain);
  font-variant-numeric:tabular-nums;
}

/* ---------------- 区块 ---------------- */

section{ padding:calc(var(--px)*14) 0 }
section + section{ border-top:var(--px) solid rgba(59,58,69,.5) }

.sec-h{
  display:flex; align-items:center; gap:calc(var(--px)*4);
  padding-bottom:calc(var(--px)*4);
  border-bottom:var(--px) solid var(--panel-3);
  margin-bottom:calc(var(--px)*8);
  flex-wrap:wrap;
}

.sec-h .idx{
  font-family:var(--font-mono); font-size:19px;
  color:var(--ink); background:var(--text-3);
  padding:0 calc(var(--px)*2);
  line-height:1.5;
}
.sec-h .idx.green{ background:var(--work) !important; color:var(--ink) !important }

.sec-h h2{
  font-family:var(--font-display);
  font-size:34px; line-height:1;
  letter-spacing:.12em; text-transform:uppercase;
}

.sec-h .meta{
  margin-left:auto;
  font-family:var(--font-mono); font-size:17px;
  letter-spacing:.1em; color:var(--text-3);
  text-transform:uppercase;
}

/* ---------------- 挖矿控制台 ---------------- */

.miner{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:calc(var(--px)*8);
}
@media (max-width:860px){ .miner{ grid-template-columns:1fr } }

.col{ min-width:0 }

.field{ margin-bottom:calc(var(--px)*6) }

.field label{
  display:block;
  font-family:var(--font-mono); font-size:16px;
  letter-spacing:.14em; text-transform:uppercase;
  color:var(--text-3);
  margin-bottom:calc(var(--px)*2);
}

input[type=text],select{
  width:100%;
  background:var(--black);
  border:var(--px) solid var(--panel-3);
  color:var(--text);
  font-family:var(--font-mono); font-size:21px;
  letter-spacing:.04em;
  padding:calc(var(--px)*3) calc(var(--px)*4);
  outline:none;
  transition:none;
}
input[type=text]:focus,select:focus{
  border-color:var(--work);
  box-shadow:0 0 0 var(--px) rgba(173,208,100,.18);
}
input[type=text]::placeholder{ color:var(--edge); }
select{ appearance:none; cursor:pointer;
  background-image:linear-gradient(45deg,transparent 50%,var(--text-3) 50%),
                   linear-gradient(135deg,var(--text-3) 50%,transparent 50%);
  background-position:calc(100% - 18px) 50%, calc(100% - 12px) 50%;
  background-size:6px 6px,6px 6px;
  background-repeat:no-repeat;
}

.row-2{ display:flex; gap:calc(var(--px)*3); align-items:stretch }
.row-2 > *{ min-width:0 }
.row-2 input[type=text]{ flex:1 }

/* ---------------- 按钮 ---------------- */

.btn{
  font-family:var(--font-mono);
  font-size:21px; line-height:1;
  letter-spacing:.12em; text-transform:uppercase;
  padding:calc(var(--px)*4) calc(var(--px)*6);
  background:var(--panel);
  color:var(--text);
  border:var(--px) solid var(--panel-3);
  cursor:pointer;
  white-space:nowrap;
  transition:none;
}
.btn:hover:not(:disabled){
  border-color:var(--edge-hi);
  color:var(--text);
  background:var(--panel-2);
}
.btn:active:not(:disabled){ transform:translate(var(--px),var(--px)) }
.btn:disabled{ opacity:.35; cursor:not-allowed }

.btn-sm{ font-size:18px; padding:calc(var(--px)*3) calc(var(--px)*4) }

.btn-primary{
  background:var(--work);
  border-color:var(--work-hi);
  color:var(--ink);
  box-shadow:calc(var(--px)*2) calc(var(--px)*2) 0 var(--work-deep);
  font-weight:400;
}
.btn-primary:hover:not(:disabled){
  background:var(--work-hi);
  border-color:var(--work-hi);
  color:var(--ink);
}
.btn-primary:active:not(:disabled){
  box-shadow:none;
  transform:translate(calc(var(--px)*2),calc(var(--px)*2));
}

/* ---------------- 读数 ---------------- */

.readout{
  border:var(--px) solid var(--panel-3);
  background:var(--black);
}
.readout .r{
  display:flex; align-items:center; justify-content:space-between;
  gap:calc(var(--px)*4);
  padding:calc(var(--px)*3) calc(var(--px)*4);
}
.readout .r + .r{ border-top:1px solid rgba(59,58,69,.55) }
.readout .k{
  font-family:var(--font-mono); font-size:16px;
  letter-spacing:.14em; text-transform:uppercase;
  color:var(--text-3);
}
.readout .v{
  font-family:var(--font-mono); font-size:23px;
  color:var(--text); text-align:right;
  word-break:break-all;
  font-variant-numeric:tabular-nums;
}

.hashbox{
  background:var(--black);
  border:var(--px) solid var(--panel-3);
  padding:calc(var(--px)*3) calc(var(--px)*4);
  font-family:var(--font-mono);
  font-size:19px; line-height:1.45;
  color:var(--text-2);
  word-break:break-all;
  min-height:calc(var(--px)*13);
}
.hashbox.hit{
  border-color:var(--work);
  color:var(--work-hi);
  box-shadow:0 0 0 var(--px) rgba(173,208,100,.16);
}
.hashbox code{ font-family:var(--font-mono); color:var(--rare) }
.hashbox a{ color:var(--chain) }

/* 代码块：保留换行与缩进 */
.code{
  background:var(--black);
  border:var(--px) solid var(--panel-3);
  padding:calc(var(--px)*4);
  font-family:var(--font-mono);
  font-size:20px; line-height:1.7;
  color:var(--text-2);
  white-space:pre;
  overflow-x:auto;
  display:block;
}

/* ---------------- 提示条 ---------------- */

.note{
  border:var(--px) solid var(--panel-3);
  background:var(--panel);
  padding:calc(var(--px)*5);
  position:relative;
}
.note p{ margin:0 0 calc(var(--px)*3); font-size:16px; color:var(--text-2) }
.note p:last-child{ margin-bottom:0 }
.note.ok{ border-color:var(--work-deep); background:rgba(101,178,76,.07) }
.note.warn{ border-color:var(--alarm); background:rgba(255,175,124,.07) }
.note.warn p{ color:var(--alarm) }
.note.info{ border-color:var(--chain); background:rgba(111,211,213,.06) }

/* 面板四角像素缺口 */
.note::before,.note::after{
  content:""; position:absolute;
  width:calc(var(--px)*3); height:calc(var(--px)*3);
  border:var(--px) solid currentColor; opacity:.22;
}
.note::before{ top:calc(var(--px)*-1); left:calc(var(--px)*-1); border-right:0; border-bottom:0 }
.note::after{ bottom:calc(var(--px)*-1); right:calc(var(--px)*-1); border-left:0; border-top:0 }

/* ---------------- 账本表格 ---------------- */

.tbl-wrap{
  border:var(--px) solid var(--panel-3);
  background:var(--black);
}
.tbl-scroll{ overflow-x:auto }

table{
  width:100%;
  border-collapse:collapse;
  font-size:19px;
}

thead th{
  font-family:var(--font-mono); font-size:15px;
  letter-spacing:.16em; text-transform:uppercase;
  color:var(--text-3);
  text-align:left;
  padding:calc(var(--px)*3) calc(var(--px)*4);
  background:var(--panel);
  border-bottom:var(--px) solid var(--panel-3);
  white-space:nowrap;
}

tbody td{
  padding:calc(var(--px)*3) calc(var(--px)*4);
  border-bottom:1px solid rgba(59,58,69,.5);
  font-family:var(--font-mono);
  font-size:19px;
  color:var(--text-2);
  white-space:nowrap;
}
tbody tr:last-child td{ border-bottom:0 }
tbody tr:hover td{ background:rgba(43,45,51,.5); color:var(--text) }

.empty-td{
  text-align:center;
  color:var(--text-3) !important;
  padding:calc(var(--px)*10) !important;
  letter-spacing:.16em;
}

/* ---------------- 协议参数 ---------------- */

.params{
  border:var(--px) solid var(--panel-3);
  background:var(--black);
}
.params .r{
  display:grid;
  grid-template-columns:calc(var(--px)*14) minmax(120px,200px) minmax(0,1fr);
  gap:calc(var(--px)*4);
  align-items:baseline;
  padding:calc(var(--px)*4);
}
.params .r + .r{ border-top:1px solid rgba(59,58,69,.5) }
.params .r:hover{ background:rgba(43,45,51,.4) }

.params .n{
  font-family:var(--font-mono); font-size:17px;
  color:var(--text-3);
}
.params .k{
  font-family:var(--font-display); font-size:24px;
  letter-spacing:.12em; text-transform:uppercase;
  color:var(--text);
}
.params .v{
  font-family:var(--font-mono); font-size:20px;
  color:var(--text-2);
  word-break:break-word;
}
.params .v .h{ color:var(--rare); font-variant-numeric:tabular-nums }

@media (max-width:640px){
  .params .r{ grid-template-columns:calc(var(--px)*10) 1fr; row-gap:calc(var(--px)*1) }
  .params .v{ grid-column:1 / -1 }
}

/* ---------------- 页脚 ---------------- */

footer{
  border-top:var(--px) solid var(--panel-3);
  padding:calc(var(--px)*8) 0;
  margin-top:calc(var(--px)*10);
}
.fgrid{
  display:flex; align-items:center; justify-content:space-between;
  gap:calc(var(--px)*4); flex-wrap:wrap;
}
.fnote{
  font-family:var(--font-mono); font-size:16px;
  letter-spacing:.14em; text-transform:uppercase;
  color:var(--text-3);
}

/* ============================================================
   诊断 / 工具页（diag · probe · wallet）
   ============================================================ */

.card{
  border:var(--px) solid var(--panel-3);
  background:var(--panel);
  padding:calc(var(--px)*5);
  margin-bottom:calc(var(--px)*5);
}
.card .hd{
  font-family:var(--font-display);
  font-size:26px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--text);
  padding-bottom:calc(var(--px)*3);
  border-bottom:1px solid rgba(59,58,69,.6);
  margin-bottom:calc(var(--px)*4);
}
.card .sub{
  font-family:var(--font-mono); font-size:17px;
  color:var(--text-3); letter-spacing:.08em;
  margin-bottom:calc(var(--px)*3);
}

.steps{
  font-family:var(--font-mono); font-size:19px;
  color:var(--text-2); line-height:1.7;
}

.tag{
  display:inline-block;
  font-family:var(--font-mono); font-size:16px;
  letter-spacing:.1em; text-transform:uppercase;
  padding:calc(var(--px)*1) calc(var(--px)*2);
  border:var(--px) solid var(--panel-3);
  background:var(--black);
  color:var(--text-2);
  margin:0 calc(var(--px)*1) calc(var(--px)*1) 0;
}

.verdict{
  font-family:var(--font-display); font-size:26px;
  letter-spacing:.12em; text-transform:uppercase;
  padding:calc(var(--px)*2) calc(var(--px)*3);
  border:var(--px) solid currentColor;
  display:inline-block;
}
.verdict.ok{ color:var(--work) }
.verdict.no{ color:var(--alarm) }

/* ============================================================
   动画
   ============================================================ */

@keyframes blink{ 0%,100%{opacity:1} 50%{opacity:.25} }
@keyframes panel-in{ from{opacity:0; transform:translateY(calc(var(--px)*2))} to{opacity:1; transform:none} }
@keyframes pop{ from{opacity:0; transform:scale(.96)} to{opacity:1; transform:none} }

#resultSection{ animation:panel-in .16s steps(3,end) both }

::selection{ background:var(--work); color:var(--ink) }

::-webkit-scrollbar{ width:calc(var(--px)*4); height:calc(var(--px)*4) }
::-webkit-scrollbar-track{ background:var(--ink) }
::-webkit-scrollbar-thumb{ background:var(--panel-3) }
::-webkit-scrollbar-thumb:hover{ background:var(--edge) }