/* Umbra Explorer — the desktop-wallet design system (from re-design/wallet.html), applied
   to a purpose-built block explorer. Data comes only from the mempool API + the umbra shim. */

:root{
 --page:#060708;--g0:#0b0c0d;--g1:#101113;--g2:#141619;--g3:#1b1d20;--g4:#222528;
 --ink:#e9e7e2;--dim:#9d9f9e;--faint:#686b6c;
 --ac:#e9e7e1;--acink:#141517;
 --green:#46b06e;--red:#c94a44;--amber:#c99a4b;
 --line:#212427;--line2:#1a1d20;
 --wash:rgba(255,255,255,.04);--wash2:rgba(255,255,255,.07);--bd:rgba(233,231,226,.14);--bdst:rgba(255,255,255,.28);
 --redwash:rgba(201,74,68,.14);--greenwash:rgba(70,176,110,.13);--amberwash:rgba(201,154,75,.12);
 --card:#101113;--chip:#222528;--muted:#9d9f9e;
 --hh:56px;--sans:'Schibsted Grotesk',system-ui,sans-serif;--mono:'Spline Sans Mono',ui-monospace,'SF Mono',Menlo,monospace;
 --shadow:0 16px 48px rgba(0,0,0,.55);
}
html.light{
 --page:#e9e8e3;--g0:#141517;--g1:#f0efeb;--g2:#f7f6f2;--g3:#ffffff;--g4:#e6e4df;
 --ink:#1b1c1e;--dim:#5f6265;--faint:#8f918e;
 --ac:#17181a;--acink:#f2f1ed;
 --green:#2f8f5b;--red:#b8423b;--amber:#96702a;
 --line:rgba(20,21,23,.1);--line2:rgba(20,21,23,.07);
 --wash:rgba(20,21,23,.04);--wash2:rgba(20,21,23,.06);--bd:rgba(20,21,23,.14);--bdst:rgba(20,21,23,.32);
 --redwash:rgba(184,66,59,.1);--greenwash:rgba(47,143,91,.1);--amberwash:rgba(150,112,42,.1);
 --card:#ffffff;--chip:#e6e4df;--muted:#5f6265;
 --shadow:0 16px 48px rgba(30,28,24,.25);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;height:100%}
body{font-family:var(--sans);color:var(--ink);background:var(--page);-webkit-font-smoothing:antialiased;font-size:15px;line-height:1.45}
a{color:inherit;text-decoration:none}
.mono{font-family:var(--mono);font-size:.93em;font-variant-numeric:tabular-nums}
button,input{font-family:inherit}
.hx::-webkit-scrollbar{width:0;height:0}.hx{scrollbar-width:none}
::-webkit-scrollbar{width:10px;height:10px}::-webkit-scrollbar-thumb{background:var(--g4);border-radius:6px;border:2px solid transparent;background-clip:padding-box}::-webkit-scrollbar-track{background:transparent}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes fadein{from{opacity:0}to{opacity:1}}
.spin{width:22px;height:22px;border-radius:50%;border:3px solid var(--bd);border-top-color:var(--ink);animation:spin .8s linear infinite}

/* ---- shell: labelled left sidebar (icon + name) ---- */
.app{display:flex;height:100vh;background:var(--g2);overflow:hidden}
.side{flex:0 0 220px;width:220px;background:var(--g0);display:flex;flex-direction:column;padding:16px 12px;color:#e9e7e2;overflow-y:auto}
.side::-webkit-scrollbar{width:0}
.brand{display:flex;align-items:center;gap:11px;padding:6px 8px 15px;margin-bottom:8px;text-decoration:none;border-bottom:1px solid var(--line2)}
.brand .bmark{width:38px;height:38px;border-radius:11px;background:var(--g3);display:flex;align-items:center;justify-content:center;flex:0 0 auto}
.brand .bmark svg{width:23px;height:23px;display:block}
.brand .bname{font-size:16px;font-weight:700;color:var(--ink);line-height:1.12}
.brand .bsub{font-size:11px;color:var(--faint)}
.rail{display:flex;flex-direction:column;gap:2px;flex:1;width:100%;min-height:0}

/* ---- main + header ---- */
.main{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;min-height:0;background:var(--g2)}
.thead{flex:0 0 auto;height:var(--hh);min-height:var(--hh);display:flex;align-items:center;gap:12px;padding:0 20px;border-bottom:1px solid var(--line2)}
.thead .htitle{font-size:15.5px;font-weight:700;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.thead .htip{margin-left:auto;font-size:12.5px;color:var(--faint);font-variant-numeric:tabular-nums;display:flex;align-items:center;gap:7px;flex:0 0 auto}
.thead .tipdot{width:7px;height:7px;border-radius:50%;background:var(--green);box-shadow:0 0 0 0 var(--green);animation:livepulse 2.4s ease-in-out infinite}
@keyframes livepulse{0%,100%{box-shadow:0 0 0 0 rgba(70,176,110,.5)}50%{box-shadow:0 0 0 4px rgba(70,176,110,0)}}
.search{display:flex;align-items:center;gap:9px;background:var(--g2);border:1px solid var(--line2);border-radius:10px;padding:0 12px;height:36px;color:var(--faint);flex:1;max-width:520px}
html.light .search{background:var(--g4)}
.search i{font-size:16px}
.search input{flex:1;border:none;background:transparent;outline:none;font-size:13.5px;color:var(--ink);min-width:0}
.search input::placeholder{color:var(--faint)}
.iconbtn{width:36px;height:36px;border-radius:10px;border:none;background:transparent;color:var(--dim);font-size:18px;cursor:pointer;display:flex;align-items:center;justify-content:center;flex:0 0 auto}
.iconbtn:hover{background:var(--wash2);color:var(--ink)}
.scroll{flex:1;overflow-y:auto;min-height:0}
.page{max-width:1080px;margin:0 auto;padding:24px 24px 60px}
.page.narrow{max-width:820px}

/* ---- typography ---- */
h1.ptitle{font-size:23px;font-weight:700;letter-spacing:-.01em;margin:0 0 3px}
.psub{font-size:13.5px;color:var(--dim);margin:0 0 22px;line-height:1.5}
.sechead{font-size:11px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--faint);margin:26px 0 12px}
.crumbs{display:flex;align-items:center;gap:7px;font-size:12.5px;color:var(--faint);margin-bottom:14px}
.crumbs a:hover{color:var(--ink)}

/* ---- cards + stats ---- */
.card{background:var(--g3);border:1px solid var(--line2);border-radius:16px;padding:18px}
.card.pad0{padding:0;overflow:hidden}
.cardtitle{font-size:15px;font-weight:700;color:var(--ink)}
.cardsub{font-size:13px;color:var(--dim);line-height:1.55;margin-top:3px}
.statgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px}
.stat{background:var(--g3);border:1px solid var(--line2);border-radius:14px;padding:15px 16px;min-width:0}
.stat .k{font-size:10.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--faint)}
.stat .v{font-size:22px;font-weight:700;color:var(--ink);margin-top:5px;font-variant-numeric:tabular-nums;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.15}
.stat .v.mono{font-family:var(--mono);font-size:16px;font-weight:600}
.stat .v.green{color:var(--green)}.stat .v.small{font-size:15px}
.stat .sfoot{font-size:11.5px;color:var(--faint);margin-top:3px}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media(max-width:760px){.grid2{grid-template-columns:1fr}}

/* ---- key/value detail rows (wallet .srow) ---- */
.kv{display:flex;flex-direction:column}
.kvr{display:flex;align-items:flex-start;gap:12px;padding:13px 16px}
.kvr+.kvr{border-top:1px solid var(--line2)}
.kvr .kk{flex:0 0 190px;font-size:13px;color:var(--faint);padding-top:1px}
.kvr .kvv{flex:1;min-width:0;font-size:13.5px;color:var(--ink);word-break:break-word;overflow-wrap:anywhere}
.kvr .kvv.mono{font-family:var(--mono);font-size:12.5px}
@media(max-width:620px){.kvr{flex-direction:column;gap:3px}.kvr .kk{flex:none}}

/* ---- list rows (blocks / txs) ---- */
.rows{display:flex;flex-direction:column}
.lrow{display:flex;align-items:center;gap:14px;padding:13px 16px;cursor:pointer;text-decoration:none;color:inherit}
.lrow+.lrow{border-top:1px solid var(--line2)}
.lrow:hover{background:var(--wash)}
.lrow .lico{width:38px;height:38px;border-radius:11px;background:var(--g4);color:var(--dim);display:flex;align-items:center;justify-content:center;font-size:18px;flex:0 0 auto}
.lrow .lico.green{background:var(--greenwash);color:var(--green)}
.lrow .lmid{flex:1;min-width:0}
.lrow .lt1{display:flex;align-items:baseline;gap:9px}
.lrow .lh{font-size:14.5px;font-weight:700;color:var(--ink);font-variant-numeric:tabular-nums}
.lrow .lhash{font-family:var(--mono);font-size:12.5px;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lrow .lt2{font-size:12.5px;color:var(--dim);margin-top:2px;display:flex;gap:10px;flex-wrap:wrap}
.lrow .lright{flex:0 0 auto;text-align:right;font-variant-numeric:tabular-nums}
.lrow .lr1{font-size:13.5px;font-weight:600;color:var(--ink)}
.lrow .lr2{font-size:11.5px;color:var(--faint);margin-top:2px}

/* ---- table (dense) ---- */
.tbl{width:100%;border-collapse:collapse;font-size:13px}
.tbl th{text-align:left;font-size:10.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--faint);padding:10px 14px;border-bottom:1px solid var(--line)}
.tbl td{padding:12px 14px;border-top:1px solid var(--line2);color:var(--ink);vertical-align:top}
.tbl tbody tr:hover td{background:var(--wash)}
.tbl td.mono,.tbl td .mono{font-family:var(--mono);font-variant-numeric:tabular-nums}
.tbl td.num{text-align:right;font-variant-numeric:tabular-nums}
.tblwrap{overflow-x:auto}

/* ---- tx inputs/outputs ---- */
.io{display:grid;grid-template-columns:1fr 44px 1fr;gap:0;align-items:stretch}
@media(max-width:720px){.io{grid-template-columns:1fr}.io .ioarrow{display:none}}
.iocol{display:flex;flex-direction:column}
.iocol .iolab{font-size:10.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--faint);padding:0 4px 8px}
.ioitem{border:1px solid var(--line2);border-radius:10px;padding:9px 11px;margin-bottom:7px;background:var(--g2)}
.ioitem .ioaddr{font-family:var(--mono);font-size:11.5px;color:var(--ink);word-break:break-all;overflow-wrap:anywhere}
.ioitem .iometa{display:flex;justify-content:space-between;gap:8px;margin-top:4px;font-size:12px}
.ioitem .ioval{font-family:var(--mono);font-weight:600;color:var(--ink);font-variant-numeric:tabular-nums}
.ioarrow{display:flex;align-items:center;justify-content:center;color:var(--faint);font-size:20px}

/* ---- chips / badges / pills ---- */
.chip{display:inline-flex;align-items:center;gap:5px;border:1px solid var(--line);background:var(--g2);color:var(--ink);border-radius:9px;padding:2px 9px;font-size:12px;font-weight:500;line-height:1.6;font-variant-numeric:tabular-nums}
.chip.sm{padding:1px 7px;font-size:10.5px;border-radius:7px}
.chip.green{color:var(--green);border-color:transparent;background:var(--greenwash)}
.chip.red{color:var(--red);border-color:transparent;background:var(--redwash)}
.chip.amber{color:var(--amber);border-color:transparent;background:var(--amberwash)}
.chip.ac{background:var(--ac);color:var(--acink);border-color:var(--ac);font-weight:600}
.tag{font-size:10.5px;font-weight:700;letter-spacing:.03em;text-transform:uppercase;color:var(--faint)}

/* ---- buttons ---- */
.btn{height:38px;padding:0 16px;border-radius:10px;border:none;background:var(--ac);color:var(--acink);font-size:13.5px;font-weight:600;display:inline-flex;align-items:center;justify-content:center;gap:7px;cursor:pointer;text-decoration:none}
.btn:hover{opacity:.9}
.btn.ghost{background:transparent;color:var(--ink);border:1px solid var(--bd)}
.btn.ghost:hover{background:var(--wash);opacity:1}
.btn.sm{height:32px;padding:0 12px;font-size:12.5px}
.copybtn{border:none;background:var(--chip);color:var(--ink);width:28px;height:28px;border-radius:8px;font-size:14px;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;vertical-align:middle}
.copybtn:hover{opacity:.85}

/* ---- misc ---- */
.empty{padding:44px 22px;text-align:center;color:var(--dim);border:1px dashed var(--bd);border-radius:16px;font-size:14px;line-height:1.55}
.empty .eic{width:52px;height:52px;border-radius:50%;background:var(--g4);display:flex;align-items:center;justify-content:center;margin:0 auto 14px;font-size:24px;color:var(--dim)}
.loading{display:flex;align-items:center;justify-content:center;gap:11px;padding:60px;color:var(--dim);font-size:14px}
.warn{color:var(--amber);background:var(--amberwash);border:1px solid rgba(201,154,75,.3);border-radius:12px;padding:12px 14px;font-size:13px;line-height:1.5}
.mut{color:var(--dim)}.fnt{color:var(--faint)}.green{color:var(--green)}.red{color:var(--red)}
.pagebtns{display:flex;justify-content:center;gap:10px;margin-top:22px}
.toast{position:fixed;left:50%;transform:translateX(-50%);bottom:28px;z-index:50;background:var(--g0);color:#e9e7e2;padding:10px 17px;border-radius:12px;font-size:13.5px;font-weight:600;box-shadow:var(--shadow);border:1px solid #212427;animation:fadein .2s}

/* ---- splash ---- */
.splash{position:fixed;inset:0;background:radial-gradient(125% 90% at 50% 42%,#0e0f11,var(--page) 60%);display:flex;align-items:center;justify-content:center;z-index:100}

/* ---- mobile nav drawer (the side rail "unfolded" with names) ---- */
.menubtn{display:none}
.scrim{position:fixed;inset:0;background:rgba(4,5,6,.6);z-index:40;opacity:0;pointer-events:none;transition:opacity .2s}
html.light .scrim{background:rgba(30,28,24,.4)}
.scrim.open{opacity:1;pointer-events:auto}
.navdrawer{position:fixed;left:0;top:0;bottom:0;width:266px;max-width:82vw;background:var(--g1);border-right:1px solid var(--line2);z-index:41;transform:translateX(-100%);transition:transform .22s cubic-bezier(.2,.85,.25,1);display:flex;flex-direction:column;padding:16px 12px;box-shadow:var(--shadow)}
.navdrawer.open{transform:none}
.ddhead{display:flex;align-items:center;gap:11px;padding:6px 8px 16px;margin-bottom:6px;border-bottom:1px solid var(--line2)}
.ddmark{width:42px;height:42px;border-radius:12px;background:var(--g3);display:flex;align-items:center;justify-content:center;flex:0 0 auto}
.ddmark svg{width:24px;height:24px}
.ddname{font-size:16px;font-weight:700;color:var(--ink);line-height:1.1}
.ddsub{font-size:11.5px;color:var(--faint)}
.dnav{display:flex;flex-direction:column;gap:2px;overflow-y:auto;margin-top:8px}
.drow{display:flex;align-items:center;gap:14px;padding:12px 12px;border-radius:11px;color:var(--dim);text-decoration:none;font-size:15px;font-weight:500}
.drow i{font-size:22px;width:24px;text-align:center;flex:0 0 auto}
.drow:hover{background:var(--wash);color:var(--ink)}
.drow.on{background:var(--g3);color:var(--ink)}
.drow.on i{color:var(--ac)}

/* ---- responsive layout ---- */
@media(max-width:900px){
 .kvr .kk{flex:0 0 150px}
}
@media(max-width:768px){
 .side{display:none}
 .menubtn{display:flex;flex:0 0 auto}
 .thead{padding:0 12px;gap:9px}
 .search{max-width:none;flex:1}
 .thead .htip{display:none}
 .page{padding:18px 14px 56px}
 h1.ptitle{font-size:20px}
 .statgrid{grid-template-columns:1fr 1fr;gap:10px}
 .stat{padding:13px 14px}
 .stat .v{font-size:19px}
 .grid2{grid-template-columns:1fr}
 .kvr{flex-direction:column;gap:3px;padding:12px 14px}
 .kvr .kk{flex:none}
 .io{grid-template-columns:1fr}
 .epoch{gap:12px}
 .cbig{font-size:17px}
}
@media(max-width:420px){
 .statgrid{grid-template-columns:1fr}
 .tlblock{width:118px}
 .search input::placeholder{font-size:12.5px}
}

/* ---- block timeline strip (our take on mempool's block visualizer) ---- */
.timeline{display:flex;gap:11px;overflow-x:auto;padding:4px 2px 14px;scroll-snap-type:x proximity}
.timeline::-webkit-scrollbar{height:8px}
.tlblock{position:relative;flex:0 0 auto;width:132px;background:var(--g3);border:1px solid var(--line2);border-radius:14px;padding:13px 14px 12px;text-decoration:none;color:inherit;overflow:hidden;transition:border-color .15s,transform .15s;scroll-snap-align:start}
.tlblock:hover{border-color:var(--bdst);transform:translateY(-2px)}
.tlblock::before{content:"";position:absolute;left:0;top:0;right:0;height:3px;background:linear-gradient(90deg,var(--green),rgba(70,176,110,0))}
.tlblock.tip::before{background:linear-gradient(90deg,var(--ac),rgba(233,231,225,0))}
/* new block flies in from the left when the websocket reports a fresh tip */
.tlblock.tlenter{animation:flyin .5s cubic-bezier(.18,.83,.24,1)}
@keyframes flyin{from{transform:translateX(-46px) scale(.86);opacity:0}to{transform:translateX(0) scale(1);opacity:1}}
/* "live" pill next to the Recent blocks heading */
.livetag{display:inline-flex;align-items:center;gap:6px;margin-left:8px;font-size:9.5px;font-weight:700;letter-spacing:.08em;color:var(--green);vertical-align:middle}
.livetag .tipdot{width:6px;height:6px;border-radius:50%;background:var(--green);box-shadow:0 0 0 0 rgba(70,176,110,.5);animation:livepulse 2.4s ease-in-out infinite}
.tlh{font-size:16px;font-weight:700;font-variant-numeric:tabular-nums;color:var(--ink)}
.tlm{font-size:11.5px;color:var(--dim);margin-top:7px;display:flex;flex-direction:column;gap:2px;font-variant-numeric:tabular-nums}
.tlfill{height:4px;border-radius:2px;background:var(--g1);margin-top:10px;overflow:hidden}
.tlfill span{display:block;height:100%;background:var(--green);border-radius:2px}
.tltime{font-size:10.5px;color:var(--faint);margin-top:8px;font-variant-numeric:tabular-nums}

/* ---- inline svg charts ---- */
.chartcard{background:var(--g3);border:1px solid var(--line2);border-radius:16px;padding:16px 18px}
.chead{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;margin-bottom:6px}
.chead .ct{font-size:12.5px;font-weight:700;color:var(--ink)}
.chead .cs{font-size:11px;color:var(--faint);margin-top:1px}
.chead .cbig{font-size:19px;font-weight:700;color:var(--ink);font-variant-numeric:tabular-nums;text-align:right}
.chead .cbig small{display:block;font-size:11px;font-weight:500;color:var(--faint)}
.chart{width:100%;height:96px;display:block}
/* ---- interactive chart hover (crosshair + focus dot + tooltip) ---- */
.chartwrap{position:relative;margin-top:6px;cursor:crosshair}
.chartwrap .chartcross{position:absolute;top:0;bottom:0;width:1px;background:var(--line);pointer-events:none;display:none;transform:translateX(-.5px)}
.chartwrap .chartdot{position:absolute;width:9px;height:9px;border-radius:50%;background:var(--cc,var(--green));border:2px solid var(--g3);pointer-events:none;display:none;transform:translate(-50%,-50%);box-shadow:0 0 0 3px color-mix(in srgb,var(--cc,var(--green)) 22%,transparent)}
.chartwrap .charttip{position:absolute;pointer-events:none;display:none;z-index:6;background:var(--g0);border:1px solid var(--line);border-radius:9px;padding:6px 10px;white-space:nowrap;box-shadow:var(--shadow)}
.chartwrap .charttip .ctv{font-size:12px;font-weight:700;color:var(--ink);font-variant-numeric:tabular-nums}
.chartwrap .charttip .cts{font-size:10.5px;color:var(--dim);margin-top:1px;font-variant-numeric:tabular-nums}

/* ---- difficulty epoch progress ---- */
.epoch{display:flex;align-items:center;gap:20px;flex-wrap:wrap}
.epochbar{flex:1;min-width:200px}
.epochtrack{height:9px;border-radius:5px;background:var(--g1);overflow:hidden}
.epochtrack span{display:block;height:100%;background:var(--ac);border-radius:5px;transition:width .4s}
.epochlab{display:flex;justify-content:space-between;font-size:11.5px;color:var(--faint);margin-top:7px;font-variant-numeric:tabular-nums}

/* ---- faucet ---- */
.fcard{max-width:520px}
.flabel{display:block;font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--faint);margin:0 2px 8px}
.finput{width:100%;background:var(--g1);border:1px solid var(--line);border-radius:12px;padding:13px 14px;color:var(--ink);font-size:14px;outline:none;transition:border-color .15s;margin-bottom:14px}
.finput::placeholder{color:var(--faint)}
.finput:focus{border-color:var(--bdst)}
.tsbox{min-height:65px;margin-bottom:14px;display:flex;justify-content:center}
.btn.block{width:100%;height:46px;font-size:14.5px;border-radius:12px}
.btn:disabled{opacity:.55;cursor:not-allowed}
.powbox{background:var(--g2);border:1px solid var(--line2);border-radius:12px;padding:12px 14px;margin-bottom:14px}
.powtop{display:flex;align-items:center;justify-content:space-between;font-size:12.5px;color:var(--ink);font-weight:600}
.powtop i{color:var(--amber);margin-right:5px}
.powtop .mono{color:var(--dim);font-size:11.5px;font-weight:500}
.powbar{height:7px;border-radius:5px;background:var(--g4);overflow:hidden;margin:9px 0 7px}
.powbar span{display:block;height:100%;width:0;border-radius:5px;background:linear-gradient(90deg,var(--amber),var(--green));transition:width .2s ease}
.powsub{font-size:11px;color:var(--faint)}
.fmsg{margin-top:14px;border-radius:12px;padding:13px 14px;font-size:13.5px;line-height:1.5;animation:fadein .2s ease}
.fmsg.err{background:var(--redwash);border:1px solid rgba(201,74,68,.35);color:var(--red)}
.fmsg.ok{background:var(--greenwash);border:1px solid rgba(70,176,110,.3);color:var(--ink)}
.fmsg .okhead{display:flex;align-items:center;gap:8px;font-weight:700;color:var(--green);margin-bottom:6px}
.fmsg .okhead i{font-size:18px}
.fmsg .txline{font-size:12px;color:var(--dim);word-break:break-all}
.fmsg .txline a{color:var(--ink);border-bottom:1px dashed var(--faint)}
.fnote{display:flex;align-items:flex-start;gap:8px;margin-top:16px;font-size:11.5px;color:var(--faint);line-height:1.5}
.fnote i{color:var(--dim);font-size:15px;flex:0 0 auto;margin-top:1px}

/* ================= Umbra Pool — page-specific additions ================= */
.tipdot.off{background:var(--red);animation:none}
.siderail-foot{margin-top:auto;padding-top:8px;border-top:1px solid var(--line2)}
.drow.subtle{color:var(--faint)}
.drow.subtle:hover{color:var(--ink)}

/* status tag for blocks */
.btag{display:inline-block;font-size:10.5px;font-weight:700;letter-spacing:.03em;text-transform:uppercase;padding:3px 8px;border-radius:999px;background:var(--amberwash);color:var(--amber);border:1px solid transparent}
.btag.ok{background:var(--greenwash);color:var(--green)}
.btag.err{background:var(--redwash);color:var(--red)}

/* connect card on dashboard */
.connectcard{background:linear-gradient(180deg,var(--g3),var(--g2));border:1px solid var(--bd)}
.connectcard .cardsub{max-width:640px}
.ccgrid{margin:16px 0 4px;border:1px solid var(--line2);border-radius:12px;overflow:hidden}
.ccgrid .kvr{padding:11px 14px}
.ccgrid .kvr .kk{flex:0 0 130px}
.connectcard .btn{margin-top:14px}

/* address lookup form (miners page) */
.lookup{display:flex;gap:10px;margin:4px 0 8px;flex-wrap:wrap}
.lookup .finput{flex:1;min-width:220px}
.lookup .btn{flex:0 0 auto}

/* code block */
.codeblk{font-family:var(--mono);font-size:12px;line-height:1.7;background:var(--g1);border:1px solid var(--line2);border-radius:10px;padding:14px 16px;overflow-x:auto;color:var(--ink);margin:0 0 12px;white-space:pre}

/* make the header search a form (inline) */
form.search{margin:0}

/* charts */
.chartrow{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:14px}
.chartrow.one{grid-template-columns:1fr}
.chartcard{padding:16px 16px 14px}
.chartcard .cc-head{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin-bottom:10px}
.chartcard .cc-cur{font-size:18px;font-weight:700;color:var(--ink);font-variant-numeric:tabular-nums}
.chartcard .cardtitle{font-size:12.5px;font-weight:700;letter-spacing:.03em;text-transform:uppercase;color:var(--faint)}
.chartwrap.tall{height:120px}
.chartwrap.tall .chart{height:120px}
.chartcard .cardsub{margin-top:8px;font-size:12px}

/* ================= Mine in Browser (wallet + miner) ================= */
.btnrow{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px}
.btn.ghost{background:transparent;border:1px solid var(--bd);color:var(--ink)}
.btn.ghost:hover{background:var(--wash2)}
.btn.big{padding:11px 18px;font-size:14px}
.btn[disabled]{opacity:.45;cursor:not-allowed}
.importdet{margin-top:14px;border-top:1px solid var(--line2);padding-top:12px}
.importdet summary{cursor:pointer;color:var(--dim);font-size:13px}
.importdet summary:hover{color:var(--ink)}
.ta{width:100%;min-height:74px;resize:vertical;margin:10px 0;padding:11px 12px;line-height:1.6;font-family:var(--mono);font-size:13px}
.fmsg.err{color:var(--red);font-size:12.5px;margin-top:8px}

/* reveal phrase */
.warnbox{display:flex;gap:12px;align-items:flex-start;background:var(--amberwash);border:1px solid rgba(201,154,75,.35);color:var(--ink);border-radius:12px;padding:14px 16px;font-size:13px;line-height:1.55;margin-bottom:16px}
.warnbox i{color:var(--amber);font-size:20px;flex:0 0 auto;margin-top:1px}
.wgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:8px}
.wcell{display:flex;align-items:center;gap:8px;background:var(--g3);border:1px solid var(--line2);border-radius:10px;padding:9px 12px;font-family:var(--mono);font-size:13.5px;color:var(--ink)}
.wcell .wn{color:var(--faint);font-size:11px;min-width:16px;text-align:right;font-family:var(--sans)}
.savecheck{display:flex;gap:10px;align-items:flex-start;margin:18px 0 4px;font-size:13px;color:var(--dim);line-height:1.5;cursor:pointer}
.savecheck input{margin-top:2px;flex:0 0 auto}

/* mining panel */
.minecard .mc-addr{position:relative}
.minecard .chglink{display:inline-block;margin:2px 0 6px 16px;font-size:12px;color:var(--faint);cursor:pointer}
.minecard .chglink:hover{color:var(--ink);text-decoration:underline}
.minegrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:12px;margin:16px 0}
.mstat{background:var(--g2);border:1px solid var(--line2);border-radius:12px;padding:12px 14px}
.mstat .k{font-size:10.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--faint)}
.mstat .v{font-size:18px;font-weight:700;color:var(--ink);margin-top:4px;font-variant-numeric:tabular-nums}
.threadrow{margin:8px 0 4px;font-size:13px;color:var(--dim)}
.threadrow input[type=range]{width:100%;margin-top:8px;accent-color:var(--green)}
.threadrow .faint{color:var(--faint)}
.minelog{margin-top:14px;max-height:180px;overflow-y:auto;font-family:var(--mono);font-size:11.5px;color:var(--dim);border-top:1px solid var(--line2);padding-top:10px}
.mlogline{padding:2px 0;line-height:1.5;border-bottom:1px solid var(--line2)}
.fnote{margin-top:12px;font-size:12px;color:var(--faint);line-height:1.55}

/* fix: numeric column headers must right-align to match their data cells */
.tbl th.num{text-align:right}
.faintcell{color:var(--faint)}

/* info note (miner earnings explainer) */
.infonote{display:flex;gap:11px;align-items:flex-start;background:var(--wash);border:1px solid var(--line2);border-radius:12px;padding:13px 15px;font-size:12.5px;line-height:1.55;color:var(--dim);margin:16px 0 4px}
.infonote i{color:var(--ac);font-size:18px;flex:0 0 auto;margin-top:1px}

/* stat cards: fit longer money values without clipping */
.statgrid{grid-template-columns:repeat(auto-fit,minmax(158px,1fr))}
.stat .v{font-size:20px}
.stat .v.small{font-size:15px}

/* money stat values: smaller + allowed to wrap so they never clip to an ellipsis */
.statgrid .stat .v.money{font-size:16px;font-weight:700;white-space:normal;overflow:visible;text-overflow:clip;line-height:1.2;word-break:break-word}