:root{
  --bg:#05070a; --bg2:#07100b; --grn:#33ff66; --grn-dim:#1d6b3a; --grn-soft:#7dffa6;
  --warn:#ffcc55; --bad:#ff5f6d; --ink:#d7ffe4;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{background:radial-gradient(1200px 800px at 50% -10%,#07130c 0%,var(--bg) 60%);color:var(--ink);min-height:100vh;
  font:14.5px/1.62 ui-monospace,SFMono-Regular,Menlo,Consolas,"Courier New",monospace;padding:22px 14px 70px}
#bg{position:fixed;inset:0;width:100%;height:100%;z-index:0;opacity:.5;pointer-events:none}
.crt{position:fixed;inset:0;z-index:2;pointer-events:none;
  background:repeating-linear-gradient(0deg,rgba(0,0,0,.28) 0 1px,transparent 1px 3px),
             radial-gradient(120% 90% at 50% 50%,transparent 55%,rgba(0,0,0,.65));
  mix-blend-mode:multiply;opacity:.75}
.term{position:relative;z-index:3;max-width:1000px;margin:0 auto;border:1px solid var(--grn-dim);
  background:linear-gradient(180deg,rgba(6,14,10,.92),rgba(4,9,7,.92));backdrop-filter:blur(2px);
  box-shadow:0 0 0 1px rgba(51,255,102,.12),0 30px 80px -30px rgba(0,0,0,.9),inset 0 0 90px rgba(51,255,102,.045)}
.bar{display:flex;align-items:center;gap:12px;padding:9px 12px;border-bottom:1px solid var(--grn-dim);
  background:linear-gradient(180deg,rgba(51,255,102,.10),rgba(51,255,102,.02));font-size:12.5px;flex-wrap:wrap}
.dots{display:flex;gap:6px}.dots i{width:10px;height:10px;border-radius:50%;background:var(--grn-dim);display:block}
.dots i:first-child{background:#ff5f57}.dots i:nth-child(2){background:#febc2e}.dots i:nth-child(3){background:var(--grn)}
.ttl{color:var(--grn-soft);letter-spacing:.05em;flex:1;min-width:180px}
.stat{display:flex;gap:8px;flex-wrap:wrap}
.pill{border:1px solid var(--grn-dim);color:var(--grn-soft);padding:2px 8px;font-size:11px;letter-spacing:.08em}
.pill.on{background:var(--grn);color:#04120a;border-color:var(--grn);font-weight:700}
.banner{margin:0;padding:18px 16px 8px;font-size:clamp(5.2px,1.42vw,12.5px);line-height:1.14;color:var(--grn);
  text-shadow:0 0 8px rgba(51,255,102,.45),0 0 26px rgba(51,255,102,.18);overflow-x:auto;animation:flick 6s infinite}
@keyframes flick{0%,97%,100%{opacity:1}98%{opacity:.86}99%{opacity:.94}}
.log{padding:8px 16px 14px}
.line{display:flex;gap:8px;align-items:baseline;flex-wrap:wrap;padding:2px 0;font-size:13.5px}
.pr{color:var(--grn);font-weight:700}
.dim{color:var(--grn-dim)}
.dim2{color:#2d5643}
.ok{color:var(--grn)}
.warn{color:var(--warn)}
.err{color:var(--bad)}
.good{color:var(--grn)}
.dotsr{flex:1;border-bottom:1px dotted var(--grn-dim);margin:0 6px;transform:translateY(-4px);min-width:24px}
.pane{margin:14px 12px}
.hdr{color:var(--grn-dim);font-size:12px;letter-spacing:.04em;white-space:nowrap;overflow:hidden}
.body{padding:12px 10px 14px;border-left:1px dashed rgba(29,107,58,.55);border-right:1px dashed rgba(29,107,58,.55)}
.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin:10px 0}
.grid.two{grid-template-columns:1fr 1fr}
@media(max-width:760px){.grid{grid-template-columns:1fr 1fr}}
@media(max-width:460px){.grid{grid-template-columns:1fr}}
.cell{border:1px solid var(--grn-dim);padding:9px 10px;background:rgba(51,255,102,.035)}
.k{color:var(--grn-dim);font-size:11px;letter-spacing:.1em}
.v{color:var(--grn);font-size:19px;font-weight:700;margin-top:3px;text-shadow:0 0 10px rgba(51,255,102,.35)}
.note{color:var(--grn-dim);font-size:11.5px}
label{display:block;color:var(--grn-dim);font-size:11.5px;letter-spacing:.1em;margin-bottom:10px}
input{display:block;width:100%;margin-top:6px;padding:9px 10px;background:rgba(0,0,0,.55);border:1px solid var(--grn-dim);
  color:var(--grn);font:inherit;font-size:13.5px}
input:focus{outline:none;border-color:var(--grn);box-shadow:0 0 0 2px rgba(51,255,102,.16)}
.rowbtn{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-top:12px}
.btn{font:inherit;font-size:12.5px;letter-spacing:.08em;background:transparent;color:var(--grn);border:1px solid var(--grn-dim);
  padding:8px 13px;cursor:pointer;transition:all .15s ease}
.btn:hover{background:var(--grn);color:#04120a;border-color:var(--grn);box-shadow:0 0 18px rgba(51,255,102,.35)}
.btn.primary{background:var(--grn);color:#04120a;font-weight:700;border-color:var(--grn)}
.btn.primary:hover{background:var(--grn-soft)}
.btn.tiny{padding:2px 8px;font-size:11px}
.btn:disabled{opacity:.35;cursor:not-allowed;box-shadow:none}
.chips{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px}
.chip{border:1px solid var(--grn-dim);color:var(--grn-soft);padding:2px 10px;font-size:12.5px;cursor:pointer}
.chip:hover{border-color:var(--grn)}
.chip.on{background:var(--grn);color:#04120a;border-color:var(--grn);font-weight:700}
.out{margin-top:12px;border-top:1px dotted var(--grn-dim);padding-top:8px}
.status{min-height:20px;color:var(--grn)}
.bar{height:10px;border:1px solid var(--grn-dim);margin:6px 0 10px;background:rgba(0,0,0,.4)}
.bar>i{display:block;height:100%;width:0;background:var(--grn);box-shadow:0 0 12px rgba(51,255,102,.5);transition:width .8s cubic-bezier(.22,1,.36,1)}
.bar.alt>i{background:var(--grn-soft)}
.ladder{display:flex;align-items:flex-end;gap:12px;height:170px;margin:8px 0 4px}
.step{flex:1;display:flex;flex-direction:column;justify-content:flex-end;gap:6px;text-align:center;position:relative;font-size:12px}
.step .col{background:rgba(51,255,102,.55);border:1px solid var(--grn);box-shadow:0 0 14px rgba(51,255,102,.25)}
.step.cur .col{background:repeating-linear-gradient(45deg,var(--grn) 0 4px,rgba(51,255,102,.15) 4px 8px)}
.cur-badge{position:absolute;top:-9px;left:50%;transform:translateX(-50%);background:var(--grn);color:#04120a;
  padding:0 6px;font-size:10px;font-weight:700;letter-spacing:.08em}
.ticks{display:flex;justify-content:space-between;color:var(--grn-dim);font-size:11.5px}
.rows .row{display:flex;justify-content:space-between;gap:10px;align-items:center;padding:4px 0;
  border-bottom:1px dotted rgba(29,107,58,.5);font-size:12.5px;flex-wrap:wrap}
.rows .row .l{display:flex;gap:8px;align-items:baseline}
.rows .row code{color:var(--grn)}
.addr{color:var(--grn-soft);font-size:12.5px;word-break:break-all}
a{color:var(--grn);text-decoration:none;border-bottom:1px dotted var(--grn-dim)}
a:hover{color:var(--grn-soft);border-bottom-color:var(--grn)}
code{font-family:inherit;color:var(--grn);background:rgba(51,255,102,.08);padding:0 3px}
.cursor{animation:blink 1s steps(1) infinite}
.caret{color:var(--grn);text-shadow:0 0 8px rgba(51,255,102,.7);animation:blink 0.9s steps(1) infinite}
[data-type]{white-space:pre-wrap;min-height:1.5em}
@keyframes blink{50%{opacity:0}}
.brandmark{display:block;width:120px;height:120px;margin:14px auto 0;opacity:.9}
footer.log{border-top:1px solid var(--grn-dim);margin:16px 12px 18px;padding-top:12px}
.hidden{display:none!important}
#toast{position:fixed;right:18px;bottom:18px;z-index:60;display:flex;flex-direction:column;gap:8px;align-items:flex-end}
.toast{border:1px solid var(--grn);background:rgba(4,12,8,.96);color:var(--grn);padding:9px 13px;font-size:12.5px;
  box-shadow:0 0 22px rgba(51,255,102,.28);animation:tin .18s ease}
@keyframes tin{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}


/* ---- price ladder chart ---- */
.chart { width: 100%; height: auto; display: block; margin: 10px 0 6px;
  background: linear-gradient(180deg, #04070a 0%, #05080b 100%);
  border: 1px solid #123021; border-radius: 4px; }
.chart text { font-family: inherit; font-size: 11px; fill: #4d9e6a; letter-spacing: .02em; }
.chart .axis { stroke: #1d4530; stroke-width: 1; }
.chart .grid { stroke: #123021; stroke-width: 1; stroke-dasharray: 3 5; }
.chart .curve { fill: none; stroke: #33ff66; stroke-width: 2; }
.chart .area { fill: rgba(51,255,102,.08); }
.chart .dot { fill: #33ff66; }
.chart .cap { stroke: #d8ff4a; stroke-width: 1; stroke-dasharray: 4 4; }
.chart .pool { stroke: #29d3ff; stroke-width: 1; stroke-dasharray: 4 4; }
.chart .label { fill: #d8ff4a; }
.chart .labpool { fill: #29d3ff; }
.chart .live { stroke: #ff6b9d; stroke-width: 1.5; }
.chart .livedot { fill: #ff6b9d; }
.chart .livelabel { fill: #ff6b9d; }
.chartnote { font-size: 11px; color: #4d9e6a; margin-bottom: 8px; }

/* ---- payment method toggle ---- */
.paytog { display:flex; gap:8px; margin:2px 0 12px; }
.paytog .pay { cursor:pointer; user-select:none; padding:5px 12px; font-size:12px; letter-spacing:.04em;
  border:1px solid #1d4530; border-radius:3px; color:#4d9e6a; background:#04070a; }
.paytog .pay:hover { border-color:#33ff66; color:#33ff66; }
.paytog .pay.active { border-color:#33ff66; color:#05070a; background:#33ff66; font-weight:700; }

/* ---- connect help ---- */
.help { font-size: 12px; line-height: 1.6; color: #7fd6a0; background: #04090b; border: 1px solid #123021;
  border-radius: 4px; padding: 10px 12px; margin-top: 10px; }
.help b { color: #d8ff4a; }

.walletList { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
.btn.small { font-size: 12px; padding: 6px 8px; text-align: left; }

/* ---- pairing modal ---- */
.modalWrap { position: fixed; inset: 0; z-index: 60; display: flex; align-items: center; justify-content: center;
  padding: 16px; background: rgba(3,6,7,.82); }
.modalWrap.hidden { display: none; }
.modal { width: 100%; max-width: 420px; background: #070d0f; border: 1px solid #1d3b2a; border-radius: 6px;
  box-shadow: 0 24px 60px rgba(0,0,0,.65); overflow: hidden; }
.modalTop { display: flex; align-items: center; justify-content: space-between; padding: 10px 12px;
  border-bottom: 1px solid #123021; }
.modalTitle { color: #d8ff4a; font-size: 12px; letter-spacing: .08em; }
.pillConn { font-size: 11px; color: #7fd6a0; border: 1px solid #1d3b2a; border-radius: 999px; padding: 3px 9px; }
.modalBody { padding: 14px 12px 12px; text-align: center; }
.mnote { font-size: 12px; color: #7f9a8d; line-height: 1.6; margin: 8px 0; }
.qrBox { width: 232px; height: 232px; margin: 6px auto; background: #fff; border-radius: 4px; color: #333;
  display: flex; align-items: center; justify-content: center; font-size: 12px; overflow: hidden; }
.qrBox svg { width: 232px; height: 232px; display: block; }
.pairRow { display: flex; flex-direction: column; gap: 2px; margin: 10px 0 4px; }
.plabel { font-size: 10px; letter-spacing: .18em; color: #d8ff4a; }
.pcode { font-size: 26px; letter-spacing: .12em; color: #e8fff4; }
.mlink { display: inline-block; margin: 6px 0; font-size: 12px; color: #7fd6a0; }
.mwait { font-size: 12px; color: #7f9a8d; margin: 8px 0 0; }
.mbtns { display: flex; gap: 8px; justify-content: center; margin-top: 12px; flex-wrap: wrap; }
.modalErr { min-height: 16px; font-size: 12px; margin: 8px 0 0; color: #ff8f8f; }
.modalErr.warn { color: #ffd479; }
@media (max-width: 460px) { .qrBox, .qrBox svg { width: 186px; height: 186px; } .pcode { font-size: 22px; } }