:root{
  --bg-page:#04060a;
  --bg-app:#0a0f17;
  --card:#111826;
  --card2:#17202f;
  --line:#1f2a3c;
  --line2:#2a3850;
  --ink:#e9eff8;
  --ink2:#9db0c8;
  --ink3:#647890;
  --accent:#4fd1ff;
  --accent-dim:rgba(79,209,255,.14);
  --good:#3bdb9e;
  --good-dim:rgba(59,219,158,.13);
  --warn:#ffb454;
  --warn-dim:rgba(255,180,84,.13);
  --bad:#ff6b81;
  --bad-dim:rgba(255,107,129,.12);
  --mono:ui-monospace,'SF Mono',Menlo,Consolas,monospace;
  --sans:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{height:100%}
body{
  font-family:var(--sans);background:var(--bg-page);color:var(--ink);
  display:flex;justify-content:center;min-height:100vh;min-height:100dvh;
}
.app{
  width:100%;max-width:430px;height:100vh;height:100dvh;background:var(--bg-app);
  display:flex;flex-direction:column;position:relative;overflow:hidden;
}
@media(min-width:431px){
  body{align-items:center;padding:20px 0}
  .app{height:calc(100vh - 40px);max-height:900px;border-radius:24px;border:1px solid #232b3d;box-shadow:0 30px 80px rgba(0,0,0,.7)}
}
/* ---------- header ---------- */
.apphead{
  flex:none;display:flex;align-items:center;justify-content:space-between;
  padding:calc(10px + env(safe-area-inset-top)) 18px 12px;border-bottom:1px solid var(--line);
}
.logo{display:flex;align-items:baseline;gap:2px;font-size:22px;font-weight:800;letter-spacing:-.5px}
.logo .dot{color:var(--accent)}
.logo small{font-size:10px;font-weight:600;color:var(--ink3);margin-left:8px;letter-spacing:.6px}
.nodepill{
  display:flex;align-items:center;gap:7px;font-size:10.5px;font-weight:700;letter-spacing:.4px;
  background:var(--good-dim);color:var(--good);border:1px solid rgba(59,219,158,.35);
  padding:6px 11px;border-radius:999px;transition:all .3s;
}
.nodepill .pip{width:7px;height:7px;border-radius:50%;background:var(--good);animation:pulse 2s infinite}
.nodepill.warn{background:var(--warn-dim);color:var(--warn);border-color:rgba(255,180,84,.4)}
.nodepill.warn .pip{background:var(--warn)}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.35}}
/* ---------- screens ---------- */
main{flex:1;overflow:hidden;position:relative}
.screen{position:absolute;inset:0;overflow-y:auto;padding:14px 14px 20px;display:none;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.screen::-webkit-scrollbar{display:none}
.screen.active{display:block;animation:fadein .25s ease}
@keyframes fadein{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.card{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:16px;margin-bottom:12px}
.card h3{font-size:11px;font-weight:700;letter-spacing:1.2px;text-transform:uppercase;color:var(--ink3);margin-bottom:12px;display:flex;justify-content:space-between;align-items:center;gap:8px}
.card h3 .tag{font-size:10px;letter-spacing:.4px;text-transform:none;color:var(--accent);background:var(--accent-dim);padding:3px 8px;border-radius:999px;font-weight:600;white-space:nowrap}
.card h3 .tag.warn{color:var(--warn);background:var(--warn-dim)}
.mono{font-family:var(--mono)}
.hash{font-family:var(--mono);font-size:10.5px;color:var(--ink2);word-break:break-all;line-height:1.5}
.muted{color:var(--ink3)}
.note{font-size:10.5px;color:var(--ink3);line-height:1.55}
/* ---------- hero ring ---------- */
.hero{display:flex;gap:16px;align-items:center}
.ringwrap{position:relative;width:112px;height:112px;flex:none}
.ringwrap svg{transform:rotate(-90deg)}
.ring-bg{fill:none;stroke:var(--line);stroke-width:8}
.ring-fg{fill:none;stroke:var(--good);stroke-width:8;stroke-linecap:round;transition:stroke-dashoffset .6s}
.ringlabel{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}
.ringlabel b{font-size:21px;font-weight:800;letter-spacing:-.5px}
.ringlabel span{font-size:8.5px;font-weight:700;letter-spacing:.8px;color:var(--ink3);text-transform:uppercase;margin-top:2px}
.herostats{flex:1;display:flex;flex-direction:column;gap:9px;min-width:0}
.hstat{display:flex;justify-content:space-between;align-items:baseline;border-bottom:1px dashed var(--line);padding-bottom:7px;gap:8px}
.hstat:last-child{border-bottom:none;padding-bottom:0}
.hstat span{font-size:11px;color:var(--ink3);font-weight:600}
.hstat b{font-size:13px;font-weight:700;font-variant-numeric:tabular-nums;text-align:right}
/* ---------- batch strip ---------- */
.dots{display:flex;gap:5px;margin:4px 0 12px}
.dots i{flex:1;height:8px;border-radius:4px;background:var(--line);transition:background .25s}
.dots i.on{background:var(--accent);box-shadow:0 0 8px rgba(79,209,255,.5)}
.dots i.sent{background:var(--good)}
.lbl{font-size:10px;color:var(--ink3);font-weight:600;letter-spacing:.4px;margin-bottom:5px;text-transform:uppercase}
.flowrow{display:flex;align-items:center;gap:8px;margin-top:12px;padding-top:12px;border-top:1px solid var(--line);font-size:10.5px;color:var(--ink3);font-weight:600;flex-wrap:wrap}
.flowrow .step{background:var(--card2);border:1px solid var(--line2);padding:5px 9px;border-radius:8px;color:var(--ink2);white-space:nowrap;transition:all .3s}
.flowrow .arr{color:var(--accent);font-size:12px}
.flash-good{color:var(--good)!important;border-color:rgba(59,219,158,.5)!important}
/* ---------- sensor rows ---------- */
.sensor{display:flex;align-items:center;gap:12px;padding:11px 0;border-bottom:1px solid var(--line)}
.sensor:last-child{border-bottom:none;padding-bottom:0}
.sbody{flex:1;min-width:0}
.sbody b{font-size:12.5px;font-weight:700;display:block}
.sbody small{font-size:10.5px;color:var(--ink3);display:block;margin-top:1px}
.sbody .slive{font-size:11px;color:var(--ink2);font-weight:600;margin-top:3px;display:block;font-variant-numeric:tabular-nums}
.schip{flex:none;font-size:9px;font-weight:800;letter-spacing:.6px;padding:4px 8px;border-radius:6px;text-transform:uppercase}
.schip.live{color:var(--good);background:var(--good-dim)}
.schip.idle{color:var(--ink3);background:var(--card2)}
.schip.needs{color:var(--accent);background:var(--accent-dim)}
.schip.denied{color:var(--bad);background:var(--bad-dim)}
.schip.unavailable,.schip.roadmap{color:var(--ink3);background:var(--card2)}
.sbtn{
  flex:none;font-family:var(--sans);font-size:10.5px;font-weight:800;color:#04121c;background:var(--accent);
  border:none;border-radius:9px;padding:8px 12px;cursor:pointer;letter-spacing:.2px;
}
.sbtn.ghost{background:var(--card2);color:var(--accent);border:1px solid rgba(79,209,255,.4)}
/* typing pad */
.pad{width:100%;font-family:var(--sans);font-size:13px;color:var(--ink);background:var(--card2);
  border:1px solid var(--line2);border-radius:11px;padding:11px 13px;outline:none;margin-top:10px}
.pad::placeholder{color:var(--ink3)}
.pad:focus{border-color:rgba(79,209,255,.5)}
/* ---------- kv rows ---------- */
.kv{display:flex;justify-content:space-between;align-items:baseline;padding:7px 0;border-bottom:1px dashed var(--line);font-size:12px;gap:10px}
.kv:last-child{border-bottom:none}
.kv span{color:var(--ink3);font-weight:600;font-size:11px;flex:none}
.kv b{font-weight:700;font-variant-numeric:tabular-nums;text-align:right;word-break:break-all}
/* ---------- heartbeat ---------- */
.beatwrap{display:flex;gap:16px;align-items:center}
.beatring{position:relative;width:86px;height:86px;flex:none}
.beatring svg{transform:rotate(-90deg)}
.beatring .num{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center}
.beatring .num b{font-size:24px;font-weight:800;font-variant-numeric:tabular-nums}
.beatring .num span{font-size:8px;font-weight:700;letter-spacing:.6px;color:var(--ink3);text-transform:uppercase}
.ring2-bg{fill:none;stroke:var(--line);stroke-width:7}
.ring2-fg{fill:none;stroke:var(--accent);stroke-width:7;stroke-linecap:round;transition:stroke-dashoffset .9s linear}
.beatinfo{flex:1;min-width:0}
.beatinfo .ghash{font-family:var(--mono);font-size:10px;color:var(--accent);word-break:break-all;line-height:1.45}
/* ---------- blocks ---------- */
.blockrow{display:flex;align-items:center;gap:10px;padding:9px 0;border-bottom:1px solid var(--line);font-size:11px}
.blockrow:last-child{border-bottom:none}
.blockrow .bh{font-weight:800;font-variant-numeric:tabular-nums;width:72px;flex:none}
.blockrow .bhash{font-family:var(--mono);font-size:9.5px;color:var(--ink3);flex:1;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.badge{font-size:9px;font-weight:800;letter-spacing:.6px;padding:3px 7px;border-radius:6px;flex:none}
.badge.good{color:var(--good);background:var(--good-dim)}
.badge.warn{color:var(--warn);background:var(--warn-dim)}
.badge.dim{color:var(--ink3);background:var(--card2)}
/* ---------- switches / toggles ---------- */
.switch{position:relative;width:44px;height:26px;flex:none}
.switch input{opacity:0;width:0;height:0}
.slider{position:absolute;inset:0;background:var(--line2);border-radius:999px;transition:.25s;cursor:pointer}
.slider:before{content:"";position:absolute;width:20px;height:20px;left:3px;top:3px;background:#fff;border-radius:50%;transition:.25s}
.switch input:checked + .slider{background:var(--good)}
.switch input:checked + .slider:before{transform:translateX(18px)}
.togglerow{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 0;border-bottom:1px solid var(--line)}
.togglerow:last-child{border-bottom:none;padding-bottom:0}
.togglerow .tl b{font-size:12.5px;font-weight:700;display:block}
.togglerow .tl small{font-size:10.5px;color:var(--ink3)}
/* ---------- prove / verify ---------- */
.chips{display:flex;flex-wrap:wrap;gap:7px}
.chips button{
  font-family:var(--sans);font-size:11.5px;font-weight:700;color:var(--ink2);
  background:var(--card2);border:1px solid var(--line2);border-radius:999px;padding:8px 13px;cursor:pointer;transition:.2s;
}
.chips button.sel{color:#04121c;background:var(--accent);border-color:var(--accent)}
.cta{
  width:100%;font-family:var(--sans);font-size:14px;font-weight:800;letter-spacing:.2px;
  color:#04121c;background:var(--accent);border:none;border-radius:14px;padding:15px;cursor:pointer;margin-top:6px;transition:.2s;
}
.cta:active{transform:scale(.98)}
.cta.ghost{background:var(--card2);color:var(--accent);border:1px solid rgba(79,209,255,.4)}
.cta.half{width:calc(50% - 4px)}
.cta:disabled{opacity:.5;cursor:default}
.prooflabel{font-size:10px;font-weight:700;letter-spacing:.9px;text-transform:uppercase;color:var(--ink3);margin:14px 0 8px}
.prooflabel:first-child{margin-top:0}
.proofbox{
  width:100%;min-height:110px;font-family:var(--mono);font-size:9.5px;line-height:1.5;color:var(--ink2);
  background:var(--card2);border:1px solid var(--line2);border-radius:11px;padding:11px;outline:none;resize:vertical;
}
.proofbox:focus{border-color:rgba(79,209,255,.5)}
.anchor{display:flex;justify-content:space-between;gap:10px;background:var(--card2);border:1px solid var(--line2);border-radius:11px;padding:10px 12px;margin-bottom:7px}
.anchor b{font-size:12px;font-weight:700;display:block}
.anchor small{font-size:10px;color:var(--ink3);display:block;margin-top:1px}
.anchor .mono{font-size:9.5px;color:var(--accent);text-align:right;padding-top:2px;word-break:break-all;max-width:40%}
.resultbox{display:none;align-items:center;gap:12px;border-radius:13px;padding:13px 15px;margin-top:12px}
.resultbox.show{display:flex;animation:fadein .3s}
.resultbox.ok{background:var(--good-dim);border:1px solid rgba(59,219,158,.4)}
.resultbox.fail{background:var(--bad-dim);border:1px solid rgba(255,107,129,.4)}
.resultbox .vk{width:34px;height:34px;flex:none;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:17px;font-weight:900}
.resultbox.ok .vk{background:var(--good);color:#04140d}
.resultbox.fail .vk{background:var(--bad);color:#1c0409}
.resultbox b{font-size:12.5px;display:block}
.resultbox small{font-size:10.5px;color:var(--ink2);line-height:1.5;display:block}
/* ---------- stats grid ---------- */
.bigstats{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.bstat{background:var(--card2);border:1px solid var(--line2);border-radius:13px;padding:12px}
.bstat b{font-size:17px;font-weight:800;display:block;font-variant-numeric:tabular-nums;letter-spacing:-.3px}
.bstat span{font-size:9.5px;font-weight:700;letter-spacing:.7px;text-transform:uppercase;color:var(--ink3);display:block;margin-top:3px}
/* ---------- events ---------- */
.event{display:flex;gap:12px;padding:10px 0;border-bottom:1px solid var(--line)}
.event:last-child{border-bottom:none;padding-bottom:0}
.event .edate{width:78px;flex:none;font-size:10px;font-weight:700;color:var(--ink3);padding-top:1px}
.event .ebody b{font-size:12px;font-weight:700;display:block}
.event .ebody small{font-size:10.5px;color:var(--ink3);line-height:1.45;display:block;margin-top:2px}
/* ---------- tab bar ---------- */
.tabbar{
  flex:none;display:flex;border-top:1px solid var(--line);background:rgba(10,15,23,.92);
  backdrop-filter:blur(14px);padding:8px 6px calc(6px + env(safe-area-inset-bottom));
}
.tab{
  flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;background:none;border:none;
  color:var(--ink3);font-family:var(--sans);font-size:9px;font-weight:700;letter-spacing:.3px;cursor:pointer;padding:4px 0;
}
.tab svg{width:22px;height:22px}
.tab.active{color:var(--accent)}
.toast{
  position:absolute;left:50%;bottom:90px;transform:translateX(-50%) translateY(20px);
  background:#0d1a14;border:1px solid rgba(59,219,158,.5);color:var(--good);
  font-size:11px;font-weight:700;padding:9px 16px;border-radius:999px;opacity:0;transition:.35s;
  pointer-events:none;white-space:nowrap;z-index:70;max-width:92%;overflow:hidden;text-overflow:ellipsis;
}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
.footnote{font-size:10px;color:var(--ink3);text-align:center;line-height:1.6;padding:2px 12px 8px}