:root{color-scheme:dark;--bg:#09090b;--panel:#111114;--line:#26262c;--text:#f5f5f7;--muted:#9a9aa3;--purple:#836ef9;--green:#55d187;--amber:#f0b45b;--red:#f36b72}*{box-sizing:border-box}html{background:var(--bg)}body{margin:0;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;background:var(--bg);color:var(--text)}a{color:inherit;text-decoration:none}.topbar{height:64px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;padding:0 max(24px,calc((100vw - 1280px)/2));position:sticky;top:0;background:rgba(9,9,11,.92);backdrop-filter:blur(12px);z-index:10}.brand{display:flex;align-items:center;gap:10px;font-weight:800}.brand-mark{width:28px;height:28px;border-radius:8px;background:var(--purple);display:grid;place-items:center;font-size:14px}.network{font-size:13px;color:var(--muted);display:flex;gap:8px;align-items:center}.dot{width:7px;height:7px;border-radius:50%;background:var(--green);box-shadow:0 0 12px var(--green)}main{max-width:1280px;margin:auto;padding:50px 24px 36px}.hero{display:flex;justify-content:space-between;align-items:flex-end;gap:28px;margin-bottom:32px}.eyebrow{text-transform:uppercase;letter-spacing:.14em;font-size:11px;font-weight:800;color:var(--purple);margin-bottom:10px}h1{font-size:clamp(32px,5vw,54px);letter-spacing:-.045em;margin:0 0 10px}p{color:var(--muted);line-height:1.55}.hero p{max-width:760px;margin:0;font-size:16px}.stake-primary{background:var(--purple);padding:13px 18px;border-radius:10px;font-weight:800;white-space:nowrap;box-shadow:0 8px 30px rgba(131,110,249,.18)}.stake-primary:hover{filter:brightness(1.08)}.summary{display:grid;grid-template-columns:repeat(4,1fr);border:1px solid var(--line);background:var(--panel);border-radius:12px;overflow:hidden;margin-bottom:18px}.summary div{padding:16px 18px;border-right:1px solid var(--line)}.summary div:last-child{border-right:0}.summary span{display:block;color:var(--muted);font-size:11px;text-transform:uppercase;letter-spacing:.08em;margin-bottom:5px}.summary strong{font-size:18px}.controls{display:flex;align-items:center;justify-content:space-between;gap:18px;margin:18px 0 12px}.legend{display:flex;gap:16px;color:var(--muted);font-size:12px}.legend span{display:flex;align-items:center;gap:6px}.status-dot{width:8px;height:8px;border-radius:50%;display:inline-block}.status-dot.producing{background:var(--green)}.status-dot.attention{background:var(--amber)}.status-dot.no-blocks{background:var(--red)}input{width:min(360px,100%);background:#101013;border:1px solid var(--line);color:var(--text);padding:10px 12px;border-radius:9px;outline:none}input:focus{border-color:#4e4779}.table-wrap{border:1px solid var(--line);border-radius:12px;overflow:hidden;background:var(--panel)}table{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums}th{font-size:11px;text-transform:uppercase;letter-spacing:.07em;color:var(--muted);font-weight:700;text-align:left;padding:12px 14px;border-bottom:1px solid var(--line);background:#0e0e11}td{padding:13px 14px;border-bottom:1px solid #1e1e23;font-size:13px}tr:last-child td{border-bottom:0}tbody tr:hover{background:#151519}.right{text-align:right}.rank{color:var(--muted);width:52px}.validator{display:flex;align-items:center;gap:10px;min-width:220px}.avatar{width:30px;height:30px;border-radius:8px;background:#23232a;display:grid;place-items:center;font-weight:800;color:#c7c4ff}.name{font-weight:750}.sub{font-size:11px;color:var(--muted);margin-top:2px}.badge{display:inline-flex;align-items:center;gap:7px;font-weight:700;font-size:12px}.certhum-row{background:linear-gradient(90deg,rgba(131,110,249,.13),rgba(131,110,249,.025))}.certhum-row:hover{background:linear-gradient(90deg,rgba(131,110,249,.18),rgba(131,110,249,.04))}.featured{display:inline-block;font-size:9px;text-transform:uppercase;letter-spacing:.08em;background:rgba(131,110,249,.17);color:#cfc8ff;border:1px solid rgba(131,110,249,.34);padding:3px 6px;border-radius:5px;margin-left:7px;vertical-align:1px}.stake-mini{display:inline-block;margin-left:8px;color:#cfc8ff;font-weight:800}.loading{text-align:center;color:var(--muted);padding:34px}.method{font-size:11px;margin:12px 2px 0}footer{max-width:1280px;margin:auto;padding:26px 24px 38px;border-top:1px solid var(--line);color:#777781;font-size:11px;display:flex;justify-content:space-between;gap:24px}footer strong{color:#aaaab4}@media(max-width:850px){main{padding-top:34px}.hero{align-items:flex-start;flex-direction:column}.summary{grid-template-columns:repeat(2,1fr)}.summary div:nth-child(2){border-right:0}.summary div:nth-child(-n+2){border-bottom:1px solid var(--line)}.controls{align-items:stretch;flex-direction:column}.legend{overflow:auto}.optional{display:none}footer{flex-direction:column}.table-wrap{overflow:auto}table{min-width:760px}}@media(max-width:520px){.summary{grid-template-columns:1fr 1fr}.topbar{padding-inline:16px}main{padding-inline:14px}.hero p{font-size:14px}}

.avatar img{width:100%;height:100%;object-fit:cover;border-radius:8px;display:block}

/* SimpleMonad brand */
.brand-logo{
  width:34px;
  height:34px;
  display:block;
}

.brand-wordmark{
  font-size:19px;
  font-weight:800;
  letter-spacing:-.035em;
}

.brand-wordmark strong{
  color:#836ef9;
  font-weight:850;
}

/* ===== SimpleMonad responsive branding v2 ===== */

.topbar .brand{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:flex-start !important;
  gap:9px !important;
  width:auto !important;
  min-width:0 !important;
  flex:0 0 auto !important;
}

.topbar .brand-logo{
  display:block !important;
  width:30px !important;
  height:30px !important;
  min-width:30px !important;
  max-width:30px !important;
  max-height:30px !important;
  flex:0 0 30px !important;
  object-fit:contain !important;
}

.brand-wordmark{
  display:inline-flex;
  align-items:baseline;
  white-space:nowrap;
  font-size:19px;
  line-height:1;
  font-weight:800;
  letter-spacing:-.04em;
}

.brand-wordmark span{
  color:#f5f5f7;
}

.brand-wordmark strong{
  color:#836ef9;
  font:inherit;
}

.eyebrow{
  white-space:normal;
  overflow-wrap:anywhere;
}

/* Phones */
@media(max-width:700px){

  .topbar{
    height:56px;
    padding:0 14px;
  }

  .topbar .brand-logo{
    width:26px !important;
    height:26px !important;
    min-width:26px !important;
    max-width:26px !important;
    max-height:26px !important;
    flex-basis:26px !important;
  }

  .brand-wordmark{
    font-size:17px;
  }

  .network{
    font-size:11px;
  }

  main{
    padding:26px 12px 28px;
  }

  .hero{
    gap:20px;
    margin-bottom:24px;
  }

  h1{
    font-size:34px;
    line-height:1.05;
  }

  .hero p{
    font-size:14px;
  }

  .stake-primary{
    width:100%;
    text-align:center;
  }

  .summary{
    grid-template-columns:1fr 1fr;
  }

  .summary div{
    padding:13px 12px;
  }

  .controls{
    gap:12px;
  }

  .legend{
    flex-wrap:wrap;
    gap:8px 13px;
  }

  #search{
    width:100%;
  }

  /* Convert desktop table to mobile cards */
  .table-wrap{
    border:0;
    background:transparent;
    overflow:visible;
  }

  table{
    display:block;
    min-width:0 !important;
    width:100%;
  }

  thead{
    display:none;
  }

  tbody{
    display:block;
  }

  tbody tr{
    display:block;
    position:relative;
    margin-bottom:10px;
    padding:14px;
    border:1px solid var(--line);
    border-radius:12px;
    background:var(--panel);
  }

  tbody tr.certhum-row{
    background:linear-gradient(
      135deg,
      rgba(131,110,249,.16),
      rgba(17,17,20,1) 55%
    );
    border-color:rgba(131,110,249,.35);
  }

  tbody td{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:16px;
    width:100%;
    padding:8px 0 !important;
    border:0;
    border-bottom:1px solid #202025;
    text-align:right !important;
  }

  tbody td::before{
    content:attr(data-label);
    color:var(--muted);
    font-size:10px;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:.06em;
    text-align:left;
  }

  tbody td[data-label="Validator"]{
    justify-content:flex-start;
    padding:0 44px 12px 0 !important;
    margin-bottom:3px;
    text-align:left !important;
  }

  tbody td[data-label="Validator"]::before{
    display:none;
  }

  tbody td.rank{
    position:absolute;
    top:14px;
    right:14px;
    width:auto;
    padding:3px 7px !important;
    border:1px solid var(--line);
    border-radius:6px;
    background:#17171c;
    font-size:11px;
  }

  tbody td.rank::before{
    display:none;
  }

  tbody td.optional{
    display:none !important;
  }

  tbody td:last-child{
    border-bottom:0;
    padding-bottom:0 !important;
  }

  .validator{
    min-width:0;
    width:100%;
  }

  .validator .name{
    overflow-wrap:anywhere;
  }

  .featured{
    display:block;
    width:max-content;
    max-width:100%;
    margin:5px 0 0;
  }

  .stake-mini{
    margin-left:6px;
  }

  footer{
    padding:24px 14px 32px;
  }
}

@media(max-width:380px){
  .network{
    font-size:0;
    gap:0;
  }

  .network .dot{
    width:8px;
    height:8px;
  }

  h1{
    font-size:30px;
  }
}

/* SimpleMonad brand */
.brand-logo{
  width:34px;
  height:34px;
  display:block;
}

.brand-wordmark{
  font-size:19px;
  font-weight:800;
  letter-spacing:-.035em;
}

.brand-wordmark strong{
  color:#836ef9;
  font-weight:850;
}