/* ------------------------------------------------------------------
   p’s-value – visual style
------------------------------------------------------------------- */

:root{
  --mono:'IBM Plex Mono',monospace;
  --sans:'IBM Plex Sans',system-ui,sans-serif;
  --fg:#111; --fg-light:#333; --rule:#ddd;
  --brand:#0d6efd;
}
*{box-sizing:border-box;}

html,body{
  margin:0;
  font-family:var(--sans);
  font-size:16px;
  line-height:1.55;
  color:var(--fg);
  background:#fff;
}

/* ---------- header ------------------------------------------------ */
header{text-align:center;margin:5rem 0 3rem;}
h1{
  font-family:var(--mono);
  font-weight:600;
  font-size:clamp(2.6rem,6vw,4rem);
  letter-spacing:-.02em;
  margin:0;
}
.tagline{margin:.5rem 0 0;color:var(--fg-light);}

/* ---------- layout ------------------------------------------------ */
main{max-width:1180px;margin:0 auto;padding:0 1rem;}

/* ---------- form -------------------------------------------------- */
.field{margin:1.2rem 0;}
label{display:block;font-weight:500;margin-bottom:.3rem;}

input,select{
  font-family:var(--mono);
  font-size:1rem;
  padding:.4rem .5rem;
  border:1px solid var(--rule);
  width:100%;
}
button{
  font-family:var(--mono);
  cursor:pointer;
  padding:.55rem 1.4rem;
  border:1px solid var(--rule);
  background:#fafafa;
}
button:hover{background:#f0f0f0;}

fieldset{
  border:none;
  margin:1.2rem 0;
  padding:0;
  font-family:var(--mono);
  font-size:.9rem;
}
legend{font-weight:600;margin-bottom:.4rem;}
fieldset label{
  display:inline-flex;
  align-items:center;
  gap:.3rem;
  margin-right:1.2rem;
  white-space:nowrap;
}

/* ---------- toggle switch ---------------------------------------- */
.switch-wrap{display:flex;align-items:center;gap:.8rem;font-family:var(--mono);}
.switch{position:relative;display:inline-block;width:56px;height:28px;}
.switch input{opacity:0;width:0;height:0;}
.slider{
  position:absolute;cursor:pointer;top:0;left:0;right:0;bottom:0;
  background:#ccc;border-radius:34px;transition:.3s;
}
.slider:before{
  position:absolute;content:"";height:24px;width:24px;left:2px;bottom:2px;
  background:#fff;border-radius:50%;transition:.3s;
}
input:checked + .slider{background:var(--brand);}
input:checked + .slider:before{transform:translateX(28px);}
.toggle-desc{font-size:.9rem;user-select:none;}

/* ---------- live badge ------------------------------------------- */
.badge{display:flex;align-items:center;gap:.6rem;margin:.6rem 0 1.4rem;font-family:var(--mono);}
.badge img{width:20px;height:20px;border-radius:50%;}
.hidden{display:none !important;}

/* ---------- focus ring & primary button ------------------------- */
input:focus,select:focus,button:focus,
.switch input:focus + .slider{
  outline:2px solid var(--brand);
  outline-offset:2px;
}

.run-btn{
  display:block;
  margin:2rem auto 0;
  background:var(--brand);
  color:#fff;
  border-radius:6px;
  border:none;
  padding:.65rem 1.8rem;
  font-family:var(--mono);
  font-weight:500;
}
.run-btn:hover{background:#0b5ed7;}

/* ---------- table ------------------------------------------------ */
.table-wrap{overflow-x:auto;}

table{
  width:100%;
  min-width:1000px;
  border-collapse:collapse;
  margin-top:2rem;
  font-family:var(--mono);
  font-size:.8rem;
}
thead th{
  text-align:left;
  font-weight:600;
  padding-bottom:.35rem;
  border-bottom:2px solid var(--rule);
  position:sticky;
  top:0;
  background:#fff;
  z-index:2;
}
th.sortable{cursor:pointer;}
th.sortable:hover{text-decoration:underline;}
th.sortable::after{
  content:"⇅";
  font-size:.9em;
  margin-left:.35rem;
  color:var(--fg-light);
}

tbody tr:nth-of-type(odd){background:#fafafa;}

tbody td{
  padding:.32rem 0;
  border-bottom:1px solid var(--rule);
  white-space:nowrap;
  text-align:left;
}

/* Owner column fixed width */
thead th:first-child{width:42ch;}
tbody td:first-child{
  width:42ch;
  overflow:hidden;
  text-overflow:ellipsis;
  padding-right:.8rem;
}

/* ENS column */
tbody td.ens{max-width:18ch;overflow:hidden;text-overflow:ellipsis;}
tbody td.ens.expand{white-space:normal;max-width:none;}
tbody td.ens .short{cursor:pointer;text-decoration:underline;}
tbody td.ens .full{display:none;}

/* ---------- output pane (minimal) ------------------------------- */
pre#output{
  margin-top:1.5rem;
  text-align:center;          /* center the text itself        */
  width:100%;                 /* let margin-auto work           */
  margin-left:auto;
  margin-right:auto;
  font-family:var(--mono);
  font-size:.85rem;
  color:var(--fg-light);
  background:none;
  padding:0;
  border:none;
  white-space:pre-wrap;
}

/* ---------- footer ------------------------------------------------ */
footer{
  max-width:700px;
  margin:4rem auto 2rem;
  text-align:center;
}
footer .by{margin:0;font-family:var(--mono);font-weight:500;}
footer .tip{margin:1.2rem 0 .6rem;color:var(--fg-light); font-size: 0.85rem;}
footer .donations{list-style:none;padding:0;margin:0;}
footer .donations li{
  display:flex;
  justify-content:center;
  gap:.6rem;
  margin:.25rem 0;
  align-items:center;
  font-family:var(--mono);
}
footer .donations span{
  font-weight:600;
  font-size: 0.65rem; 
}
footer code{
  background:#f5f5f5;
  padding:.2rem .4rem;
  border-radius:4px;
  word-break:break-all;
  font-size: 0.65rem;
}

/* ---------- spinner cursor -------------------------------------- */
#spinner{
  position:fixed;
  width:32px;height:32px;          /* adapt if your asset differs */
  border-radius:50%;
  pointer-events:none;
  transform:translate(-10%,-90%);
  animation:spin .9s linear infinite;
  z-index:9999;
}
@keyframes spin{
  from{transform:translate(-10%,-90%) rotate(0deg);}
  to  {transform:translate(-10%,-90%) rotate(360deg);}
}