:root{
      --bg0:#0a0a0a;
      --bg1:#111111;
      --text:rgba(255,255,255,.92);
      --muted:rgba(255,255,255,.62);
      --accent:#f7941c;
      --good:#39d98a;
      --bad:#ff5b7a;
      --shadow: 0 22px 70px rgba(0,0,0,.55);
      --r:26px;
      --mono: 'JetBrains Mono', 'Courier New', monospace;
      --sans: 'Nunito Sans', ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
      --display: 'Stardos Stencil', display;
      --accent-dim: rgba(247,148,28,.15);
    }

    html,body{
      height:100%;
      margin:0;
      background-color: var(--bg0);
      background-image:
        linear-gradient(rgba(247,148,28,.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(247,148,28,.04) 1px, transparent 1px);
      background-size: 40px 40px;
      color:var(--text);
      font-family: var(--sans);
      overflow-x:hidden;
      -webkit-text-size-adjust: 100%;
      text-size-adjust: 100%;
    }

    a{ color: rgba(247,178,80,.95); text-decoration: none; }
    a:hover{ text-decoration: underline; }

    .wrap{
      max-width: 1240px;
      margin: 0 auto;
      padding: 28px 18px 34px;
      position: relative;
      z-index: 3;
    }

    /* HEADER */
    .top{
      display:flex;
      align-items:center;
      gap:20px;
      padding:20px 0 16px;
      margin-bottom:32px;
      position:relative;
    }
    @keyframes scan {
      0% { transform: translateY(-100%); opacity: 0; }
      10% { opacity: 1; }
      90% { opacity: 1; }
      100% { transform: translateY(2000%); opacity: 0; }
    }
    .top::after {
      content: none;
    }
    .shc-logo-center {
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
      display: flex;
      align-items: center;
    }

    .logo{
      width:48px;height:48px;border-radius:4px;
      flex: 0 0 auto;
      object-fit: contain;
    }

    .title-block{ flex: 1; }
    .title-block .callsign {
      font-family: var(--display);
      font-size: clamp(1.1rem, 3vw, 1.4rem);
      color: var(--accent);
      letter-spacing: .12em;
      text-transform: uppercase;
      line-height: 1;
    }
    .title-block .subtitle {
      font-family: var(--display);
      font-size: clamp(.7rem, 1.5vw, .85rem);
      color: var(--muted);
      letter-spacing: .2em;
      text-transform: uppercase;
      margin-top: 4px;
    }
    .status-block {
      text-align: right;
      display: flex;
      flex-direction: column;
      align-items: flex-end;
      gap: 4px;
      margin-left: auto;
    }

    /* Legacy title styles (unused but kept for safety) */
    .title{
      display:flex;
      flex-direction:column;
      gap:10px;
      min-width: 0;
    }

    h1{
      font-family: var(--display);
      font-size: 34px;
      line-height: 1.05;
      margin:0;
      letter-spacing: .2px;
      white-space:nowrap;
      overflow:hidden;
      text-overflow:ellipsis;
    }

    .sub{
      display:flex;
      align-items:center;
      gap:10px;
      color:var(--muted);
      font-family: var(--mono);
      font-size: 14px;
      letter-spacing:.2px;
      flex-wrap:wrap;
    }

    .pill{
      display:inline-flex;
      align-items:center;
      gap:8px;
      padding:6px 10px;
      border-radius:999px;
      background: rgba(255,255,255,.06);
      border: 1px solid rgba(255,255,255,.12);
      backdrop-filter: blur(12px);
      white-space: nowrap;
    }

    #lastUpdate{
      font-family: var(--mono);
      font-size: .7rem;
    }
    #pill-status {
      white-space: nowrap;
    }

    .dot{
      width:8px;height:8px;border-radius:999px;
      background: var(--accent);
      box-shadow: 0 0 0 4px rgba(247,148,28,.15);
    }
    .dot.pulse {
      animation: pulse 2s infinite;
    }
    .dot.bad{
      background: var(--bad);
      box-shadow: 0 0 0 4px rgba(255,91,122,.15);
      animation: none;
    }

    @keyframes pulse {
      0% { box-shadow: 0 0 0 0 rgba(247, 148, 28, 0.4); }
      70% { box-shadow: 0 0 0 6px rgba(247, 148, 28, 0); }
      100% { box-shadow: 0 0 0 0 rgba(247, 148, 28, 0); }
    }

    /* GRID SYSTEM */
    .grid{
      display:grid;
      grid-template-columns: repeat(12, 1fr);
      gap:16px;
    }

    .card{
      background: transparent;
      border: none;
      border-radius: 0;
      box-shadow: none;
      position:relative;
      overflow:hidden;
      backdrop-filter: none;
    }

    .card::before{
      content: none;
    }

    .cardInner{
      position:relative;
      padding:22px 22px 18px;
    }

    .sectionTitle{
      font-family: var(--display);
      font-size: .7rem;
      letter-spacing: .25em;
      color: var(--accent);
      text-transform: uppercase;
      display: flex;
      align-items: center;
      gap: 12px;
      margin: 0 0 20px;
    }
    .sectionTitle::after{
      content: none;
    }

    .headRow{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:10px;
      margin-bottom: 10px;
    }

    .meta{
      color: rgba(255,255,255,.50);
      font-family: var(--mono);
      font-size: 15px;
      letter-spacing:.02em;
      white-space:nowrap;
      overflow:hidden;
      text-overflow:ellipsis;
    }

    /* Overview */
    .overview{ grid-column: 1 / -1; }

    .kpiGrid{
      display:grid;
      grid-template-columns: repeat(12, 1fr);
      gap:16px;
    }

    .kpiTile{
      grid-column: span 3;
      position: relative;
      padding: 20px 24px;
      background: transparent;
      min-width: 140px;
      border: none;
      border-radius: 0;
      overflow: visible;
    }
    /* Corner brackets — top-left */
    .kpiTile::before {
      content: '';
      position: absolute;
      top: 0; left: 0;
      width: 14px; height: 14px;
      border-top: 2px solid var(--accent);
      border-left: 2px solid var(--accent);
    }
    /* Corner brackets — bottom-right */
    .kpiTile::after {
      content: '';
      position: absolute;
      bottom: 0; right: 0;
      width: 14px; height: 14px;
      border-bottom: 2px solid var(--accent);
      border-right: 2px solid var(--accent);
    }

    .kpiTileInner{ position:relative; z-index:2; }

    .kpiBgIcon{
      display: none;
    }

    .kpiTile .label{
      font-family: var(--display);
      font-size: .6rem;
      letter-spacing: .2em;
      color: var(--muted);
      text-transform: uppercase;
      margin: 0 0 6px;
      display:flex;
      align-items:center;
      gap:8px;
    }

    .kpiTile .label i {
      color: var(--accent);
      font-size: 12px;
      opacity: 0.8;
    }

    .kpiTile .value{
      font-family: var(--mono);
      font-weight: 700;
      font-size: clamp(2rem, 5vw, 3rem);
      line-height: 1;
      margin:0;
      color: var(--text);
      text-shadow: 0 0 20px rgba(247,148,28,.3);
    }

    .kpiTile.small .value{ font-size: clamp(2rem, 5vw, 3rem); }

    .kpiTile.wide { grid-column: 1 / -1; }

    .kpiTile .value .unit{
      font-family: var(--mono);
      font-size: .9rem;
      color: var(--accent);
      margin-left: 4px;
    }

    /* Charts Row */
    .chartsRow{
      grid-column: 1 / -1;
      display:grid;
      grid-template-columns: 8fr 4fr;
      gap:16px;
    }

    .trendCard{ min-height: 420px; }

    .canvasWrap, .pieWrap{
      position:relative;
      height: 320px;
      margin-top: 8px;
      border-radius: 18px;
      overflow:hidden;
    }

    .canvasWrap{
      border: 1px solid rgba(255,255,255,.10);
      background: rgba(247,148,28,.03);
    }

    .pieWrap{
      border: none;
      background: transparent;
    }

    .piePad{
      position:absolute;
      inset: 18px;
    }

    canvas{
      display:block;
      width:100% !important;
      height:100% !important;
    }

    /* Users/workers list BELOW */
    .usersCard{
      grid-column: 1 / -1;
      width: 100%;
      max-width: none;
      justify-self: stretch;
    }

    .usersContentConstrainer {
      width: 80%;
      margin: 0 auto;
    }

    /* NEW HEADER LAYOUT FOR USERS CARD - FORCE CENTER TITLE + RIGHT TOGGLE */
    .usersHeadRow {
      display: grid;
      grid-template-columns: 1fr auto 1fr;
      align-items: center;
      margin-bottom: 14px;
      min-height: 32px;
      gap: 12px;
    }

    .usersHeadRow .sectionTitle {
      grid-column: 2;
      margin: 0;
      white-space: nowrap;
    }

    .toggleContainer {
      grid-column: 3;
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      justify-content: center;
      gap: 8px;
    }

    .narrowBlock{
      max-width: 980px;
      margin: 0 auto;
    }

    /* =========================
        FILTER BAR
    ========================= */

    .filterBar{
      display:flex;
      align-items:center;
      gap:14px;
      margin: 6px 0 14px;
    }

    .filterField{
      position: relative;
      flex: 1 1 auto;
      min-width: 0;
    }

    .filterField i{
      position:absolute;
      left: 18px;
      top: 50%;
      transform: translateY(-50%);
      color: rgba(255,255,255,.55);
      opacity: .95;
      font-size: 16px;
      pointer-events:none;
    }

    #userFilter{
      width: 100%;
      height:45px;
      border-radius: 0;
      border: none;
      border-bottom: 1px solid rgba(255,255,255,.14);
      background: var(--bg1);
      color: rgba(255,255,255,.88);
      font-family: var(--mono);
      font-size: 16px;
      padding: 0 18px 0 50px;
      outline: none;
      box-sizing: border-box;
      transition: border-color .2s;
    }

    #userFilter::placeholder{
      color: rgba(255,255,255,.42);
    }

    #userFilter:focus{
      border-bottom-color: var(--accent);
      box-shadow: 0 1px 0 0 rgba(247,148,28,.3);
    }

    .filterBtn{
      height: 45px;
      padding: 0 22px;
      border-radius: 18px;
      border: 1px solid rgba(255,255,255,.14);
      background: rgba(247,148,28,.18);
      color: rgba(255,255,255,.86);
      font-family: var(--mono);
      font-size: 13px;
      letter-spacing: .15em;
      text-transform: uppercase;
      cursor: pointer;
      backdrop-filter: blur(12px);
      box-shadow: 0 14px 44px rgba(0,0,0,.18);
      transition: transform 120ms ease, background 120ms ease, border-color 120ms ease, opacity 120ms ease;
      flex: 0 0 auto;
    }

    .filterBtn:hover{
      background: rgba(247,148,28,.24);
      border-color: rgba(255,255,255,.20);
      transform: translateY(-1px);
    }

    .filterBtn:active{
      transform: translateY(0px) scale(.995);
    }

    .filterBtn:disabled{
      opacity: .45;
      cursor: default;
      transform: none;
    }

    .chicToggle{
      display:flex;
      align-items:center;
      gap:10px;
      cursor:pointer;
      user-select:none;
      font-family: var(--mono);
      font-size:11px;
      letter-spacing: .1em;
      text-transform: uppercase;
      color: rgba(255,255,255,.6);
      flex: 0 0 auto;
      transition: color 0.2s;
    }
    .chicToggle:hover { color: rgba(255,255,255,.9); }

    .chicToggle input { display:none; }

    .chicToggle .track {
      width: 34px; height: 18px; /* Slightly smaller for header */
      background: rgba(255,255,255,.08);
      border-radius: 99px;
      position: relative;
      overflow: hidden;
      transition: background 0.2s ease, border-color 0.2s ease;
      border: 1px solid rgba(255,255,255,.15);
    }

    .chicToggle .thumb {
      width: 12px; height: 12px;
      background: rgba(255,255,255,.4);
      border-radius: 50%;
      position: absolute; 
      top: 3px; left: 3px;
      transition: transform 0.2s cubic-bezier(0.4, 0.0, 0.2, 1), background 0.2s ease;
      box-shadow: 0 2px 4px rgba(0,0,0,.2);
    }

    .chicToggle input:checked + .track {
      background: rgba(247,148,28,.15);
      border-color: var(--accent);
    }

    .chicToggle input:checked + .track .thumb {
      transform: translateX(14px);
      background: var(--accent);
      box-shadow: 0 0 8px var(--accent);
    }

    /* SCROLL LIST */
    .list{
      display:flex;
      flex-direction:column;
      gap:12px;
      margin-top: -10px;
      max-height: 800px;
      overflow-y: auto;
      overflow-x: hidden;
      padding-right: 0;
      scroll-behavior: smooth;
      mask-image: linear-gradient(to bottom, 
        transparent 0%, 
        black 24px, 
        black calc(100% - 24px), 
        transparent 100%
      );
      -webkit-mask-image: linear-gradient(to bottom, 
        transparent 0%, 
        black 24px, 
        black calc(100% - 24px), 
        transparent 100%
      );
      padding-top: 24px;
      padding-bottom: 24px;
      scrollbar-width: none;
      -ms-overflow-style: none;
    }
    .list::-webkit-scrollbar {
      display: none;
      width: 0;
      height: 0;
    }

    .row{
      padding:12px 12px;
      border-radius: 18px;
      background: rgba(255,255,255,.06);
      border: 1px solid rgba(255,255,255,.10);
    }

    .minerTop{
      display:flex;
      align-items:center;
      justify-content:space-between;
      column-gap:12px;
      row-gap:2px;
      margin-bottom: 10px;
      flex-wrap: wrap;
    }

    .addr{
      font-family: var(--mono);
      font-size: 13px;
      color: rgba(255,255,255,.90);
      white-space: normal;
      overflow-wrap: anywhere;
      cursor: default;
      border-radius: 6px;
      /* tighter padding on top and bottom */
      padding: 0px 6px;
      /* padding: 4px 6px; */
      margin-left: -6px;
      transition: background 120ms;
    }
    .addr a{
      cursor: pointer;
    }
    .addr:hover{
      background: rgba(255,255,255,.06);
    }

    .totalHash{
      font-family: var(--mono);
      font-size: 13px;
      color: rgba(255,255,255,.92);
      white-space:nowrap;
      flex: 0 0 auto;
      margin-left: auto;
    }

    .totalHash.hideSingleWorker{
      display: none;
    }

    /* Workers box */
    .workersWrap{
      display:flex;
      flex-direction:column;
      gap:10px;
    }

    .workers{
      display:flex;
      flex-direction:column;
      /* TIGHTER SPACING */
      gap:2px;
      padding: 8px 8px;
      border-radius: 16px;
      background: rgba(0,0,0,.14);
      border: 1px solid rgba(255,255,255,.08);
    }

    .workerLine{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:10px;
      font-family: var(--mono);
      font-size: 13px;
      color: rgba(255,255,255,.78);
      cursor: default;
      /* TIGHTER LINE HEIGHT */
      padding: 3px 6px;
      border-radius: 6px;
      transition: background 0.1s ease;
    }
    .workerLine a{
      cursor: pointer;
    }
    .workerLine:hover{
        background: rgba(255,255,255,.06);
        color: rgba(255,255,255,.95);
    }

    .workerLeft{
      display:flex;
      align-items:center;
      gap:8px;
      min-width: 0;
      flex: 1 1 auto;
    }

    .badgeDot{
      width:8px;height:8px;border-radius:999px;
      background: var(--good);
      box-shadow: 0 0 0 4px rgba(57,217,138,.12);
      flex: 0 0 auto;
    }
    .badgeDot.bad{
      background: var(--bad);
      box-shadow: 0 0 0 4px rgba(255,91,122,.12);
    }
    .badgeDot.intermittent{
      background: #f5a623;
      box-shadow: 0 0 0 4px rgba(245,166,35,.15);
    }
    .badgeDot.live {
      animation: dotPulse 1.8s ease-in-out infinite;
    }
    @keyframes dotPulse {
      0%, 100% { box-shadow: 0 0 0 4px rgba(57,217,138,.12); }
      50% { box-shadow: 0 0 0 7px rgba(57,217,138,.28); }
    }

    .workerName{
      min-width: 0;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      max-width: 620px;
      color: rgba(255,255,255,.82);
    }

    .workerName a{
      display: block;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .workerRight{
      display:flex;
      align-items:center;
      gap:10px;
      flex: 0 0 auto;
      white-space: nowrap;
      color: rgba(255,255,255,.62);
    }

    .lastBadge{
      display:inline-flex;
      align-items:center;
      justify-content: left; 
      gap:8px;
      /* padding: 4px 10px; */
      padding: 4px 10px 4px 9px;
      /* width: 130px;  */
      width: 19ch;
      border-radius: 999px;
      border:1px solid rgba(255,255,255,.12);
      background: rgba(255,255,255,.06);
      color: rgba(255,255,255,.70);
      font-family: var(--mono);
      font-size: 12px;
      white-space: nowrap;
      box-shadow: 0 10px 30px rgba(0,0,0,.12);
    }

    .error{
      color: rgba(255,91,122,.95);
      font-family: var(--mono);
      font-size: 13px;
      margin-top: 12px;
    }

    /* TOOLTIP */
    #hoverTip{
      position: fixed;
      z-index: 9999;
      pointer-events: none;
      opacity: 0;
      /* Remove transform for manual positioning logic */
      transition: opacity 80ms linear;
      background: rgba(0,0,0,.85);
      border: 1px solid rgba(255,255,255,.16);
      border-radius: 12px;
      padding: 10px 14px;
      box-shadow: 0 18px 55px rgba(0,0,0,.6);
      color: rgba(255,255,255,.92);
      font-family: var(--mono);
      font-size: 12px;
      white-space: nowrap;
      backdrop-filter: blur(14px);
      -webkit-backdrop-filter: blur(14px);
      transform: translateZ(0);
    }
    #hoverTip.show{
      opacity: 1;
    }
    #hoverTip .muted{
      color: rgba(255,255,255,.70);
    }

    /* =========================
        DONATIONS
    ========================= */
    .donationsRow{
      grid-column: 1 / -1;
      display:grid;
      grid-template-columns: 1fr 1fr;
      gap:16px;
    }

    .centerTitle{
      width:100%;
      text-align:center;
      justify-content: center;
    }
    .centerTitle::after{
      display: none;
    }

    .copyLabel{
      margin: 12px 0 8px;
      color: rgba(255,255,255,.72);
      font-size: 16px;
    }

    .copyField{
      display:flex; 
      justify-content:space-between; 
      align-items:center;
      gap: 12px;
      padding: 14px 16px;
      border-radius: 18px;
      border: 1px solid rgba(255,255,255,.10);
      background: rgba(255,255,255,.06);
      color: rgba(255,255,255,.90);
      font-family: var(--mono);
      font-size: 16px;
      overflow-wrap: anywhere;
      cursor: pointer;
      user-select: none;
      transition: transform 90ms ease, background 90ms ease, border-color 90ms ease;
    }

    .copyField i {
        opacity: 0.5;
        font-size: 14px;
    }

    .copyField:hover{
      background: rgba(255,255,255,.08);
      border-color: rgba(255,255,255,.16);
    }

    .copyField:hover i { opacity: 1; }

    .copyField:active{
      transform: scale(.995);
    }

    /* =========================
        DIFFICULTY LEADERBOARD
    ========================= */

    .leaderboardCard{
      grid-column: 1 / -1;
      width: 100%;
      max-width: none;
      justify-self: stretch;
      padding-bottom: 10px;
    }

    .leaderboardContent{
      width: 70%;
      max-width: 820px;
      margin: 0 auto;
    }

    .leaderboardHeader{
      display: grid;
      grid-template-columns: 70px 120px 1fr;
      gap: 24px;
      padding: 12px 24px;
      color: var(--accent);
      font-family: var(--display);
      font-size: .6rem;
      letter-spacing: .2em;
      text-transform: uppercase;
      border-bottom: 1px solid rgba(247,148,28,.3);
    }

    .leaderboardRow{
      display: grid;
      grid-template-columns: 70px 120px 1fr;
      gap: 24px;
      padding: 14px 24px;
      align-items: center;
      border-bottom: 1px solid rgba(255,255,255,.05);
      border-left: 2px solid transparent;
      transition: background 150ms ease, border-color .15s;
    }

    .lbWhen{
      font-family: var(--mono);
      font-size: 11px;
      color: rgba(255,255,255,.35);
      font-style: italic;
    }

    .leaderboardRow:hover{
      background: rgba(247,148,28,.04);
      border-left: 2px solid var(--accent);
    }

    .leaderboardRow:last-child{
      border-bottom: none;
    }

    .lbRank{
      font-family: var(--mono);
      font-size: 16px;
      font-weight: 600;
      color: rgba(255,255,255,.5);
      padding-left: 10px;
      letter-spacing: 0.02em;
    }

    .lbRank.medal{
      font-size: 22px;
      padding-left: 0;
    }

    .lbDiff{
      font-family: var(--mono);
      font-size: .8rem;
      font-weight: 400;
      letter-spacing: 0.01em;
    }

    .lbDiffNum{
      color: rgba(255,255,255,.7);
    }

    .lbDiffUnit{
      color: rgba(255,255,255,.35);
      font-size: 0.9em;
    }

    .lbUser{
      display: flex;
      align-items: center;
      gap: 10px;
      min-width: 0;
    }

    .lbUser a{
      color: var(--accent);
      text-decoration: none;
    }

    .lbUser a:hover{
      text-decoration: underline;
    }

    .lbUserName{
      font-family: var(--mono);
      font-size: 14px;
      color: rgba(255,255,255,.85);
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .lbWorkerName{
      color: rgba(255,255,255,.5);
    }

    .row.highlight-flash{
      animation: flashHighlight 3s ease-out;
    }

    @keyframes flashHighlight{
      0%{ background: rgba(247,148,28,0.35); }
      50%{ background: rgba(247,148,28,0.35); }
      100%{ background: rgba(255,255,255,.06); }
    }

    .leaderboardCard .sectionTitle{
      text-align: center;
    }

    @media (max-width: 550px){
      .lbWorkerName{
        display: none;
      }
    }

    @media (max-width: 980px){
      .leaderboardContent{ width: 100%; }
    }

    @media (max-width: 740px){
      .leaderboardHeader,
      .leaderboardRow{
        grid-template-columns: 50px 100px 1fr;
        gap: 12px;
        padding: 12px 16px;
      }
    }

    @media (max-width: 700px){
      .lbDiff{ font-size: 13px; }
      .lbUserName{ font-size: 13px; }
      .lbRank{ font-size: 13px; }
    }

    @media (max-width: 500px){
      .leaderboardHeader,
      .leaderboardRow{
        grid-template-columns: 45px 80px 1fr;
        gap: 10px;
        padding: 10px 12px;
      }
    }

    @media (max-width: 400px){
      .lbDiff{ font-size: 11px; }
      .lbUserName{ font-size: 11px; }
      .lbRank{ font-size: 11px; }
    }

    /* =========================
        WORKERS TOGGLE
    ========================= */

    .workersExtra{
      overflow:hidden;
       max-height: 999999px;
      opacity: 1;
      transform: translateY(0px);
      transition:
        max-height 260ms cubic-bezier(.2,.9,.2,1),
        opacity 180ms ease,
        transform 260ms cubic-bezier(.2,.9,.2,1);
      will-change: max-height, opacity, transform;
      display: flex;
      flex-direction: column;
      /* Matches .workers gap */
      gap: 2px;
    }

    .workers.collapsed .workersExtra{
      max-height: 0px;
      opacity: 0;
      transform: translateY(-6px);
      transition:
        max-height 240ms cubic-bezier(.4,0,.2,1),
        opacity 160ms ease,
        transform 240ms cubic-bezier(.4,0,.2,1);
    }

    .workersToggleRow{
      display:flex;
      justify-content:center;
      padding-top: 6px;
      padding-bottom: 2px;
    }

    .toggleMore{
      appearance:none;
      border: 1px solid rgba(255,255,255,.14);
      background: rgba(255,255,255,.06);
      color: rgba(255,255,255,.82);
      font-family: var(--mono);
      font-size: 12px;
      letter-spacing: .22em;
      text-transform: uppercase;
      padding: 8px 14px;
      border-radius: 999px;
      cursor: pointer;
      transition: transform 120ms ease, background 120ms ease, border-color 120ms ease;
      backdrop-filter: blur(10px);
      box-shadow: 0 14px 44px rgba(0,0,0,.22);
      display: flex;
      align-items: center;
      gap: 8px;
    }

    .toggleMore:hover{
      background: rgba(255,255,255,.085);
      border-color: rgba(255,255,255,.20);
      transform: translateY(-1px);
    }

    .toggleMore:active{
      transform: translateY(0px) scale(.995);
    }

    .toggleMore i {
        margin-top: -2px; 
    }

    .toggleMore .count{
      letter-spacing: .10em;
      color: rgba(255,255,255,.68);
      margin-left: 0px;
    }

    /* Responsive */
    @media (max-width: 1100px) and (min-width: 981px){
      .kpiTile .value .unit{ font-size: .35em; }
      .copyField{ font-size: 14px; }
    }

    @media (max-width: 980px){
      .kpiTile{ grid-column: span 6; }
      .chartsRow{ grid-template-columns: 1fr; }
      .workerName{ max-width: 380px; }
      .piePad{ inset: 16px; }
      .narrowBlock{ max-width: 100%; }
      .donationsRow{ grid-template-columns: 1fr; }
      .usersContentConstrainer { width: 100%; }
    }

    /* almost phone */
    @media (max-width: 740px){
      .centerTitle{
        text-align:center;
      }
    }

    @media (max-width: 750px) and (min-width: 621px) {
      .pill {
        font-size:11px;
      }
       #pill-status {
        /* this is kinda psycho but idk i may change this.... */
        /* margin-right:6.5px; */
      }
    }

    /* mobile layout */
    @media (max-width: 620px){
      .list { margin-top: -20px; }

      /* .chicToggle { display:none; }  */
      .chicToggle .track {
        width: 14px !important;
        height: 14px !important;
        min-width: 14px !important;
        min-height: 14px !important;
        border-radius: 50% !important;
        background: rgba(255,255,255,.15);
        border: 2px solid rgba(255,255,255,.25);
        transition: background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
      }
      .chicToggle .thumb {
        display: none;
      }
      .chicToggle input:checked + .track {
        background: var(--accent);
        border-color: var(--accent);
        box-shadow: 0 0 6px var(--accent);
      }

      #filterReset { display: none; }

      /* Header Layout */
      .top {
        flex-wrap: wrap;
        gap: 12px;
        padding: 16px 0 12px;
        margin-bottom: 22px;
      }
      .shc-logo-center {
        position: static !important;
        transform: none !important;
        width: 100%;
        display: flex;
        justify-content: center;
      }

      /* Resized Logo */
      .logo {
        width: 36px;
        height: 36px;
      }

      .title-block .callsign {
        font-size: 1rem;
      }
      .title-block .subtitle {
        font-size: .65rem;
      }
      .status-block {
        flex-direction: row;
        flex-wrap: wrap;
        gap: 8px;
        width: 100%;
      }

      /* Make pills slightly more compact */
      .pill {
        font-size: 11px;
        padding: 4px 10px;
        flex: 0 0 auto; /* Don't shrink */
      }

      #pill-status {
        width:auto;
      }

      /* Rest of mobile styles */
      .kpiTile{ grid-column: span 12; }
      .kpiTile .value{ font-size: clamp(2rem, 5vw, 3rem); }
      .canvasWrap  { height: 280px }
      .pieWrap { 
        /* i like the small pie chart but if there are more than 5 lines of miners the legend gets cut off */
        /* height: 300px  */
        height: 372px;
      
      }


      
      .piePad{ inset: 14px; }
      .trendCard{ min-height: 390px; }
      .addr{ flex-direction:column; align-items:flex-start; gap:6px; }
      .lastBadge{ display:none; }
      .filterBar{ 
        flex-direction:column; 
        align-items:stretch; 
      }
      .filterField {
        width: 100%;
        margin-bottom: 8px;
      }
      #userFilter{ 
        /* height: 54px;  */
        height:45px;
        width: 100%;
      }
      .filterBtn{ 
        width: 100%; 
        height: 54px; 
        padding: 0 18px; 
      }
      .list{ max-height: 800px; padding-right: 0px; }

      /* Toggle on Mobile - Ensure it stays in Header Grid */
      .usersHeadRow {
        margin-bottom: 12px;
      }

      /* iOS-safe tooltip sizing + wrapping */
      #hoverTip{
        max-width: calc(100vw - 24px);
        white-space: normal;
        overflow-wrap: anywhere;
        word-break: break-word;
        line-height: 1.25;
      }
      #hoverTip .muted{
        display:block;
      }
    }
    /* =========================
        FULL-PAGE RADAR SWEEP
    ========================= */
    #page-scan-bar {
      position: fixed;
      top: 0; left: 0;
      width: 100%;
      height: 2px;
      background: linear-gradient(to right, transparent 0%, rgba(247,148,28,.0) 15%, rgba(247,148,28,.35) 40%, rgba(247,148,28,.55) 50%, rgba(247,148,28,.35) 60%, rgba(247,148,28,.0) 85%, transparent 100%);
      box-shadow: 0 0 6px 1px rgba(247,148,28,.3);
      z-index: 2;
      pointer-events: none;
      opacity: 0;
    }

    /* =========================
        WORLD MAP OVERLAY
    ========================= */
    #world-overlay {
      position: fixed;
      top: 0; left: 0;
      width: 100%;
      height: 100%;
      z-index: 1;
      pointer-events: none;
      overflow: hidden;
    }
    #world-map-svg {
      position: absolute;
      top: 50%; left: 50%;
      transform: translate(-50%, -50%);
      width: 100%;
      height: 100%;
    }
    #world-map-svg .land-path {
      fill: none;
      stroke: rgba(247,148,28,.11);
      stroke-width: 0.35;
      stroke-linejoin: round;
      stroke-linecap: round;
    }
    .map-node {
      fill: rgba(247,148,28,0);
      r: 3;
      transform-box: fill-box;
      transform-origin: center;
    }
    .map-node.pinging {
      animation: nodePing 1.8s ease-out forwards;
    }
    @keyframes nodePing {
      0%   { transform: scale(1); fill: rgba(247,148,28,.95); opacity: 1; }
      50%  { transform: scale(3); fill: rgba(247,148,28,.5);  opacity: 0.6; }
      100% { transform: scale(6); fill: rgba(247,148,28,0);   opacity: 0; }
    }