/* ==========================================================
   GRO MINER — ASIC CONSOLE (COMPACT) — GRO STYLE (THEME-PROOF)
   Scope: ONLY inside #groMinerBox.gro-miner-box
   Requires HTML classes: gro-asic, gro-panel, gro-dials, gro-dial, etc.
   ========================================================== */

#groMinerBox.gro-miner-box{
  --gro: #5AB94C;
  --bg0: #070a08;
  --bg1: #0b0f0c;
  --panel: rgba(255,255,255,.035);
  --panel2: rgba(0,0,0,.25);
  --b1: rgba(255,255,255,.10);
  --b2: rgba(90,185,76,.22);
  --txt: rgba(255,255,255,.92);
  --mut: rgba(255,255,255,.65);
  --mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  --ui: system-ui, -apple-system, Segoe UI, Roboto, Arial;

  color: var(--txt) !important;
  font-family: var(--ui) !important;
  line-height: 1.25 !important;
}

/* Hard reset (safe) against theme interference */
#groMinerBox.gro-miner-box *{ box-sizing:border-box !important; }
#groMinerBox.gro-miner-box h1,
#groMinerBox.gro-miner-box h2,
#groMinerBox.gro-miner-box h3,
#groMinerBox.gro-miner-box h4,
#groMinerBox.gro-miner-box p{
  margin:0 !important;
  padding:0 !important;
  color:inherit !important;
  line-height:inherit !important;
}
#groMinerBox.gro-miner-box a{
  color:inherit !important;
  text-decoration:underline !important;
}
#groMinerBox.gro-miner-box table{ border-collapse:collapse !important; }
#groMinerBox.gro-miner-box button,
#groMinerBox.gro-miner-box input{
  font-family: inherit !important;
}

/* ===== ASIC shell ===== */
#groMinerBox.gro-miner-box .gro-asic{
  border-radius: 18px !important;
  border: 1px solid rgba(255,255,255,.10) !important;
  background:
    radial-gradient(900px 300px at 20% 0%, rgba(90,185,76,.14), transparent 55%),
    linear-gradient(180deg, rgba(255,255,255,.02), rgba(0,0,0,.35)),
    linear-gradient(180deg, var(--bg1), var(--bg0)) !important;
  box-shadow:
    0 18px 60px rgba(0,0,0,.55),
    inset 0 1px 0 rgba(255,255,255,.05) !important;

  padding: 12px !important;
}

/* Header */
#groMinerBox.gro-miner-box .gro-asic-head{
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  gap:10px !important;
  padding:10px 10px 12px !important;
  border-radius:14px !important;
  background: rgba(0,0,0,.22) !important;
  border: 1px solid rgba(255,255,255,.08) !important;
}

#groMinerBox.gro-miner-box .gro-asic-title{
  font-weight: 1000 !important;
  letter-spacing: 1.2px !important;
  text-transform: uppercase !important;
  font-size: 13px !important;
}
#groMinerBox.gro-miner-box .gro-asic-sub{
  margin-top:2px !important;
  font-size:12px !important;
  color:var(--mut) !important;
  font-weight:700 !important;
}

#groMinerBox.gro-miner-box .gro-asic-badge{
  display:flex !important;
  align-items:center !important;
  gap:8px !important;
  padding:8px 10px !important;
  border-radius:999px !important;
  border:1px solid rgba(90,185,76,.30) !important;
  background:rgba(90,185,76,.08) !important;
  font-weight:900 !important;
  font-size:11px !important;
  letter-spacing:1px !important;
  text-transform:uppercase !important;
  white-space:nowrap !important;
}
#groMinerBox.gro-miner-box .gro-asic-badge .dot{
  width:8px !important;
  height:8px !important;
  border-radius:50% !important;
  background:var(--gro) !important;
  box-shadow:0 0 14px rgba(90,185,76,.65) !important;
}

/* Grid */
#groMinerBox.gro-miner-box .gro-asic-grid{
  display:grid !important;
  grid-template-columns: 1fr !important;
  gap:10px !important;
  margin-top:10px !important;
}
@media (min-width: 900px){
  #groMinerBox.gro-miner-box .gro-asic-grid{
    grid-template-columns: 1fr 1fr !important;
  }
  #groMinerBox.gro-miner-box .gro-panel.wide{
    grid-column: 1 / -1 !important;
  }
}

/* Panels */
#groMinerBox.gro-miner-box .gro-panel{
  border-radius:16px !important;
  border:1px solid rgba(255,255,255,.10) !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,.02), rgba(0,0,0,.30)),
    rgba(0,0,0,.18) !important;
  padding:10px !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05) !important;
}

#groMinerBox.gro-miner-box .gro-panel-head{
  display:flex !important;
  align-items:flex-start !important;
  justify-content:space-between !important;
  gap:10px !important;
  margin-bottom:10px !important;
}
#groMinerBox.gro-miner-box .gro-panel-title{
  font-weight:1000 !important;
  text-transform:uppercase !important;
  letter-spacing:1px !important;
  font-size:12px !important;
  color:rgba(255,255,255,.92) !important;
}
#groMinerBox.gro-miner-box .gro-panel-note{
  font-size:12px !important;
  color:var(--mut) !important;
  font-weight:700 !important;
  margin-top:2px !important;
}

/* Dials */
#groMinerBox.gro-miner-box .gro-dials{
  display:grid !important;
  grid-template-columns: 1fr !important;
  gap:8px !important;
}
@media (min-width: 720px){
  #groMinerBox.gro-miner-box .gro-dials{
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

#groMinerBox.gro-miner-box .gro-dial{
  position:relative !important;
  border-radius:14px !important;
  padding:10px 12px !important;
  background:
    radial-gradient(240px 90px at 12% 0%, rgba(90,185,76,.14), transparent 70%),
    linear-gradient(180deg, rgba(255,255,255,.02), rgba(0,0,0,.25)) !important;
  border:1px solid rgba(255,255,255,.10) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06) !important;
}

#groMinerBox.gro-miner-box .gro-dial .k{
  display:block !important;
  font-size:11px !important;
  font-weight:900 !important;
  letter-spacing:.9px !important;
  text-transform:uppercase !important;
  color:rgba(255,255,255,.68) !important;
  margin-bottom:6px !important;
}

#groMinerBox.gro-miner-box .gro-dial .v{
  display:block !important;
  font-family:var(--mono) !important;
  font-size:14px !important;
  font-weight:1000 !important;
  letter-spacing:.5px !important;

  padding:7px 10px !important;
  border-radius:12px !important;
  background:rgba(0,0,0,.24) !important;
  border:1px solid rgba(255,255,255,.10) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06) !important;

  white-space:nowrap !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
}

#groMinerBox.gro-miner-box .gro-dial .unit{
  color:rgba(255,255,255,.72) !important;
  font-weight:900 !important;
  font-size:12px !important;
}
#groMinerBox.gro-miner-box .gro-dial .subv{
  display:block !important;
  margin-top:6px !important;
  font-size:12px !important;
  color:rgba(255,255,255,.70) !important;
  font-weight:800 !important;
}

#groMinerBox.gro-miner-box .gro-dial.mini{
  padding:8px 10px !important;
}
#groMinerBox.gro-miner-box .gro-dial.mini .v{
  font-size:13px !important;
  padding:6px 9px !important;
}

#groMinerBox.gro-miner-box .mono{
  font-family:var(--mono) !important;
  font-weight:1000 !important;
}

/* Progress + timer */
#groMinerBox.gro-miner-box .gro-progress-row{
  display:flex !important;
  align-items:center !important;
  gap:10px !important;
  margin-top:10px !important;
}
#groMinerBox.gro-miner-box .gro-timer{
  font-family: var(--mono) !important;
  font-weight: 1000 !important;
  font-size: 13px !important;
  padding: 8px 10px !important;
  border-radius: 12px !important;
  border: 1px solid rgba(255,255,255,.10) !important;
  background: rgba(0,0,0,.22) !important;
  min-width: 70px !important;
  text-align:center !important;
}

/* Progress container must remain visible */
#groMinerBox.gro-miner-box .gro-progress-container{
  flex:1 1 auto !important;
  display:block !important;
  height:12px !important;
  min-height:12px !important;
  border-radius:999px !important;
  overflow:hidden !important;
  background:rgba(255,255,255,.12) !important;
  border:1px solid rgba(255,255,255,.18) !important;
  position:relative !important;
  z-index:3 !important;
}

/* Bar (JS sets inline width:%) */
#groMinerBox.gro-miner-box .gro-progress-container > #gro-progress-bar{
  display:block !important;
  height:100% !important;
  min-height:12px !important;
  opacity:1 !important;
  visibility:visible !important;

  width: 0%;
  background: var(--gro) !important;
  background-image: linear-gradient(90deg, rgba(90,185,76,.25), rgba(90,185,76,1)) !important;
  box-shadow: 0 0 18px rgba(90,185,76,.45) !important;

  border:0 !important;
  margin:0 !important;
  padding:0 !important;
  transform:none !important;
  transition: width .25s linear;
}

/* Buttons */
#groMinerBox.gro-miner-box .gro-btn{
  appearance:none !important;
  border:1px solid rgba(255,255,255,.14) !important;
  background:rgba(0,0,0,.28) !important;
  color:#fff !important;
  border-radius:12px !important;
  padding:10px 12px !important;
  font-weight:1000 !important;
  letter-spacing:.6px !important;
  text-transform:uppercase !important;
  font-size:12px !important;
  cursor:pointer !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:10px !important;
  white-space:nowrap !important;
}
#groMinerBox.gro-miner-box .gro-btn:hover{
  border-color:rgba(90,185,76,.35) !important;
  box-shadow:0 0 18px rgba(90,185,76,.14) !important;
}
#groMinerBox.gro-miner-box .gro-btn:disabled{
  opacity:.55 !important;
  cursor:not-allowed !important;
}
#groMinerBox.gro-miner-box .gro-btn.primary{
  background:rgba(90,185,76,.12) !important;
  border-color:rgba(90,185,76,.32) !important;
}
#groMinerBox.gro-miner-box .gro-btn.ghost{
  background:rgba(255,255,255,.03) !important;
}
#groMinerBox.gro-miner-box .gro-actions{
  display:flex !important;
  gap:8px !important;
  flex-wrap:wrap !important;
}

/* Inputs */
#groMinerBox.gro-miner-box input#groReinvestAmount{
  width:100% !important;
  border-radius:12px !important;
  border:1px solid rgba(255,255,255,.12) !important;
  background:rgba(0,0,0,.24) !important;
  color:#fff !important;
  padding:10px 12px !important;
  font-family:var(--mono) !important;
  font-weight:900 !important;
  outline:none !important;
}
#groMinerBox.gro-miner-box input#groReinvestAmount:focus{
  border-color:rgba(90,185,76,.38) !important;
  box-shadow:0 0 0 3px rgba(90,185,76,.10) !important;
}

/* Tabs */
#groMinerBox.gro-miner-box .gro-tabbar{
  display:flex !important;
  gap:8px !important;
  flex-wrap:wrap !important;
}
#groMinerBox.gro-miner-box .gro-tabbtn{
  border:1px solid rgba(255,255,255,.14) !important;
  background:rgba(0,0,0,.20) !important;
  color:#fff !important;
  border-radius:999px !important;
  padding:8px 10px !important;
  font-weight:1000 !important;
  letter-spacing:.6px !important;
  text-transform:uppercase !important;
  font-size:11px !important;
  cursor:pointer !important;
}
#groMinerBox.gro-miner-box .gro-tabbtn.active{
  border-color:rgba(90,185,76,.32) !important;
  background:rgba(90,185,76,.10) !important;
}

/* Stats split sections */
#groMinerBox.gro-miner-box .gro-split{
  display:grid !important;
  grid-template-columns: 1fr !important;
  gap:10px !important;
  margin-top:10px !important;
}
@media (min-width: 900px){
  #groMinerBox.gro-miner-box .gro-split{
    grid-template-columns: 1fr 1fr !important;
  }
}
#groMinerBox.gro-miner-box .gro-section{
  border-radius:14px !important;
  border:1px solid rgba(255,255,255,.08) !important;
  background:rgba(0,0,0,.18) !important;
  padding:10px !important;
}
#groMinerBox.gro-miner-box .gro-section-title{
  font-weight:1000 !important;
  text-transform:uppercase !important;
  letter-spacing:1px !important;
  font-size:11px !important;
  color:rgba(255,255,255,.80) !important;
  margin-bottom:10px !important;
}

/* History table */
#groMinerBox.gro-miner-box .gro-log-table{
  width:100% !important;
  border-collapse:collapse !important;
  font-size:12px !important;
}
#groMinerBox.gro-miner-box .gro-log-table th,
#groMinerBox.gro-miner-box .gro-log-table td{
  padding:10px 8px !important;
  border-bottom:1px solid rgba(255,255,255,.08) !important;
  text-align:left !important;
  color:rgba(255,255,255,.88) !important;
}
#groMinerBox.gro-miner-box .gro-log-table th{
  font-weight:1000 !important;
  text-transform:uppercase !important;
  letter-spacing:.8px !important;
  font-size:11px !important;
  color:rgba(255,255,255,.70) !important;
}
#groMinerBox.gro-miner-box .gro-log-table .muted{
  color:rgba(255,255,255,.60) !important;
}
#groMinerBox.gro-miner-box .gro-amt-plus{ color: rgba(90,185,76,.95) !important; font-weight: 1000 !important; }
#groMinerBox.gro-miner-box .gro-amt-minus{ color: rgba(210,70,70,.92) !important; font-weight: 1000 !important; }


/* ==========================================================
   LATE FIXES (kept minimal / non-redundant)
   - Prevent layout overflow on mobile
   - Ensure inline status wraps
   - History MODAL overlay (single source of truth)
   ========================================================== */

/* Prevent grid children from forcing overflow width (critical) */
#groMinerBox.gro-miner-box .gro-asic,
#groMinerBox.gro-miner-box .gro-asic-grid,
#groMinerBox.gro-miner-box .gro-panel{
  max-width: 100% !important;
  overflow: visible !important;
}
#groMinerBox.gro-miner-box .gro-asic-grid > *{
  min-width: 0 !important; /* allows shrinking inside CSS grid */
}
#groMinerBox.gro-miner-box{
  overflow-x: hidden !important; /* miner never creates page horizontal scroll */
}

/* Status under claim: allow wrapping instead of clipping */
#groMinerBox.gro-miner-box .gro-inline-status{
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: initial !important;
  word-break: break-word !important;
  overflow-wrap: anywhere !important;
}

/* =========================
   HISTORY MODAL (overlay)
   ========================= */

/* lock scroll when modal open */
html.gro-modal-open { overflow: hidden !important; }

#groMinerBox.gro-miner-box .gro-modal-backdrop{
  position: fixed !important;
  inset: 0 !important;
  display: none;
  align-items: center !important;
  justify-content: center !important;
  padding: 16px !important;
  background: rgba(0,0,0,.70) !important;
  z-index: 999999 !important;
}

#groMinerBox.gro-miner-box .gro-modal-backdrop.open{
  display: flex !important;
}
/* Hard override: some themes hide .gro-modal globally */
#groMinerBox.gro-miner-box #groHistoryModal{
  display: none !important; /* closed state always hidden */
}

#groMinerBox.gro-miner-box #groHistoryModal.open{
  display: flex !important; /* open state always visible */
}

#groMinerBox.gro-miner-box #groHistoryModal .gro-modal{
  display: block !important;
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
}


#groMinerBox.gro-miner-box .gro-modal{
  width: min(920px, 96vw) !important;
  max-height: 86vh !important;
  overflow: hidden !important;
  border-radius: 16px !important;
  border: 1px solid rgba(255,255,255,.12) !important;
  background:
    radial-gradient(900px 260px at 18% 0%, rgba(90,185,76,.14), transparent 55%),
    linear-gradient(180deg, rgba(255,255,255,.02), rgba(0,0,0,.35)),
    linear-gradient(180deg, var(--bg1), var(--bg0)) !important;
  box-shadow: 0 18px 60px rgba(0,0,0,.65) !important;
}

#groMinerBox.gro-miner-box .gro-modal-head{
  position: sticky !important;
  top: 0 !important;
  z-index: 2 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 10px !important;
  padding: 12px !important;
  background: rgba(0,0,0,.40) !important;
  border-bottom: 1px solid rgba(255,255,255,.10) !important;
  backdrop-filter: blur(6px);
}

#groMinerBox.gro-miner-box .gro-modal-title{
  font-weight: 1000 !important;
  text-transform: uppercase !important;
  letter-spacing: 1px !important;
  font-size: 12px !important;
}

#groMinerBox.gro-miner-box .gro-modal-body{
  padding: 12px !important;
  overflow: auto !important;
  max-height: calc(86vh - 64px) !important;
}

#groMinerBox.gro-miner-box .gro-modal-close{
  border:1px solid rgba(255,255,255,.14) !important;
  background:rgba(255,255,255,.03) !important;
  color:#fff !important;
  border-radius:999px !important;
  padding:8px 10px !important;
  font-weight:1000 !important;
  letter-spacing:.6px !important;
  text-transform:uppercase !important;
  font-size:11px !important;
  cursor:pointer !important;
  white-space:nowrap !important;
}
#groMinerBox.gro-miner-box .gro-modal-close:hover{
  border-color:rgba(90,185,76,.35) !important;
  box-shadow:0 0 18px rgba(90,185,76,.14) !important;
}
#groMinerBox.gro-miner-box .gro-modal{ display:block !important;
}
#groMinerBox.gro-miner-box .gro-btn.is-disabled{
  opacity: .55 !important;
  cursor: not-allowed !important;
}

/* ===== Miner Stats panel: compact mobile-first / green highlight ===== */
#groMinerBox .gro-panel.wide{
  border:1px solid rgba(90,185,76,.28);
  box-shadow:
    0 10px 28px rgba(0,0,0,.28),
    inset 0 1px 0 rgba(255,255,255,.03);
}

#groMinerBox .gro-panel.wide .gro-panel-head{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:center;
  gap:8px;
  padding:10px;
  margin:-2px -2px 10px -2px;
  border:1px solid rgba(90,185,76,.22);
  border-radius:14px;
  background:
    linear-gradient(180deg, rgba(90,185,76,.14) 0%, rgba(90,185,76,.07) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.04),
    0 6px 18px rgba(0,0,0,.16);
}

#groMinerBox .gro-panel.wide .gro-panel-head > div:first-child{
  min-width:0;
}

#groMinerBox .gro-panel.wide .gro-panel-title{
  margin:0 0 2px 0;
  font-size:13px;
  line-height:1.1;
  font-weight:900;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:#7ee06f;
}

#groMinerBox .gro-panel.wide .gro-panel-note{
  font-size:10px;
  line-height:1.2;
  color:rgba(231,237,245,.82);
}

#groMinerBox .gro-tabbar{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:6px;
  flex-wrap:nowrap;
  white-space:nowrap;
}

#groMinerBox .gro-tabbtn{
  appearance:none;
  border:1px solid rgba(90,185,76,.28);
  background:linear-gradient(180deg, rgba(90,185,76,.16) 0%, rgba(90,185,76,.09) 100%);
  color:#f3fff2;
  border-radius:999px;
  min-height:32px;
  padding:6px 11px;
  font-size:11px;
  font-weight:900;
  line-height:1;
  letter-spacing:.03em;
  cursor:pointer;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.05),
    0 4px 12px rgba(0,0,0,.12);
  transition:transform .15s ease, border-color .15s ease, background .15s ease, box-shadow .15s ease;
}

#groMinerBox .gro-tabbtn:hover{
  border-color:rgba(126,224,111,.55);
  background:linear-gradient(180deg, rgba(90,185,76,.24) 0%, rgba(90,185,76,.13) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.06),
    0 6px 16px rgba(0,0,0,.18);
}

#groMinerBox .gro-tabbtn:active{
  transform:translateY(1px);
}

#groMinerBox .gro-tabbtn.active{
  border-color:rgba(126,224,111,.75);
  background:linear-gradient(180deg, rgba(126,224,111,.34) 0%, rgba(90,185,76,.18) 100%);
  color:#ffffff;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.08),
    0 0 0 1px rgba(126,224,111,.12),
    0 8px 18px rgba(90,185,76,.16);
}

#groMinerBox .gro-tabpanel[hidden]{
  display:none !important;
}

#groMinerBox .gro-panel.wide .gro-split{
  display:grid;
  grid-template-columns:1fr;
  gap:10px;
  margin-top:10px;
}

#groMinerBox .gro-panel.wide .gro-section{
  border:1px solid rgba(255,255,255,.08);
  border-radius:14px;
  padding:10px;
  background:rgba(255,255,255,.02);
}

#groMinerBox .gro-panel.wide .gro-section-title{
  margin:0 0 8px 0;
  font-size:11px;
  font-weight:900;
  letter-spacing:.08em;
  text-transform:uppercase;
  opacity:.78;
}

#groMinerBox .gro-panel.wide .gro-dials{
  display:grid;
  grid-template-columns:1fr;
  gap:8px;
}

#groMinerBox .gro-panel.wide .gro-dial.mini{
  padding:8px 10px;
  border-radius:12px;
}

#groMinerBox .gro-panel.wide .gro-dial.mini .k{
  font-size:10px;
  margin-bottom:4px;
}

#groMinerBox .gro-panel.wide .gro-dial.mini .v{
  font-size:13px;
  padding:6px 8px;
}

#groMinerBox .gro-panel.wide .gro-dial.mini .unit{
  color:#7ee06f;
}

@media (max-width: 420px){
  #groMinerBox .gro-panel.wide .gro-panel-head{
    grid-template-columns:1fr;
    align-items:stretch;
  }

  #groMinerBox .gro-tabbar{
    width:100%;
    justify-content:stretch;
  }

  #groMinerBox .gro-tabbtn{
    flex:1 1 0;
    justify-content:center;
  }
}

@media (min-width: 768px){
  #groMinerBox .gro-panel.wide .gro-split{
    grid-template-columns:repeat(2, minmax(0,1fr));
    gap:12px;
  }

  #groMinerBox .gro-panel.wide .gro-section .gro-dials{
    grid-template-columns:repeat(2, minmax(0,1fr));
  }
}