/* ============================================================
   GRO Faucet / Buy — isolated UI (beats theme/child styles)
   ============================================================ */

.gro-faucet,
.gro-faucet * { box-sizing: border-box; }

.gro-faucet{
  --gro-green:#5AB94C;
  --gro-bg:#0f1416;
  --gro-card:#141c1f;
  --gro-border:#233038;
  --gro-text:#e9f0f2;
  --gro-muted:#a9b7bd;
  --gro-blue:#6ea5ff;
  --gro-radius:18px;

  /* aliases used by refactor section */
  --gro-sub: var(--gro-muted);
  --gro-line: var(--gro-border);
  --gro-red: #ff4d4d;

  max-width: 980px;
  margin: 0 auto;
  padding: 18px;
  border-radius: var(--gro-radius);
  background: var(--gro-bg);
  border: 1px solid var(--gro-border);
  color: var(--gro-text);
}

.gro-faucet a{ color: var(--gro-green); text-decoration:none; }
.gro-faucet a:hover{ text-decoration: underline; }

.gro-faucet .muted{ color: var(--gro-muted); }
.gro-faucet .small{ font-size: 12px; line-height: 1.35; }
.gro-faucet p{ margin: 8px 0; }

.gro-faucet h3,
.gro-faucet h4{
  margin: 10px 0;
  color: var(--gro-text);
  line-height: 1.2;
}
.gro-faucet h3{ font-size: 18px; }
.gro-faucet h4{ font-size: 15px; opacity: .95; }

/* Top bar */
.gro-faucet .gro-topbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
  margin-bottom: 14px;
}
.gro-faucet .gro-inline{
  display:flex;
  align-items:center;
  gap: 8px;
  flex-wrap: wrap;
}
.gro-faucet .gro-badge{
  display:inline-flex;
  align-items:center;
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 12px;
  border: 1px solid var(--gro-border);
  background: #172025;
}
.gro-faucet .gro-badge.gro{ border-color: rgba(90,185,76,.35); color: #c9f3cb; }
.gro-faucet .gro-badge.fp { border-color: rgba(110,165,255,.35); color: #d9e7ff; }

/* Base buttons (theme-proof) */
.gro-faucet .gro-fp-btn,
.gro-faucet .gro-faucet-btn,
.gro-faucet .gro-extra-btn,
.gro-faucet .gro-claim-btn,
.gro-faucet .gro-pay-btn,
.gro-faucet #groBuyBtn,
.gro-faucet #groOpenOrders{
  appearance:none;
  -webkit-appearance:none;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap: 8px;
  padding: 10px 14px;
  border-radius: 12px;
  font-weight: 800;
  border: 1px solid rgba(90,185,76,0.75);
  background: rgba(90,185,76,0.18);
  color: var(--gro-text);
  cursor: pointer;
  text-decoration: none;
  transition: transform .08s ease, border-color .12s ease, background .12s ease, opacity .12s ease;
}
.gro-faucet .gro-fp-btn:hover,
.gro-faucet .gro-faucet-btn:hover,
.gro-faucet .gro-extra-btn:hover,
.gro-faucet .gro-claim-btn:hover,
.gro-faucet .gro-pay-btn:hover,
.gro-faucet #groBuyBtn:hover,
.gro-faucet #groOpenOrders:hover{
  transform: translateY(-1px);
  border-color: rgba(90,185,76,0.95);
  background: rgba(90,185,76,0.24);
}
.gro-faucet button[disabled],
.gro-faucet .gro-extra-disabled .gro-extra-btn,
.gro-faucet .gro-claim-btn[disabled],
.gro-faucet .gro-pay-btn[disabled],
.gro-faucet #groBuyBtn[disabled],
.gro-faucet #groOpenOrders[disabled]{
  opacity:.45;
  cursor:not-allowed;
  transform:none;
}

/* CTA blue variant */
.gro-faucet .gro-fp-btn-blue{
  border-color: rgba(110,165,255,.45);
  background: linear-gradient(180deg, rgba(110,165,255,.20), rgba(110,165,255,.07));
}

/* Inputs */
.gro-faucet input[type="text"],
.gro-faucet select{
  width: 100%;
  padding: 12px 12px;
  border-radius: 12px;
  border: 1px solid var(--gro-border);
  background: #11181b;
  color: var(--gro-text);
  outline: none;
}
.gro-faucet select{ width:auto; }
.gro-faucet input[type="text"]::placeholder{ color: rgba(169,183,189,.75); }
.gro-faucet input[type="text"]:focus,
.gro-faucet select:focus{
  border-color: rgba(90,185,76,.55);
  box-shadow: 0 0 0 3px rgba(90,185,76,.12);
}

/* Head row */
.gro-faucet .gro-claim-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
  margin-top: 10px;
}
.gro-faucet .gro-claim-sub{ margin-top: 6px; }

/* Dials */
.gro-faucet .gro-fp-dials{
  display:grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap: 10px;
  margin: 14px 0;
}
.gro-faucet .gro-dial{
  border: 1px solid var(--gro-border);
  background: var(--gro-card);
  border-radius: 16px;
  padding: 12px;
}
.gro-faucet .gro-dial-k{ font-size: 12px; color: var(--gro-muted); }
.gro-faucet .gro-dial-v{ font-size: 18px; font-weight: 900; margin-top: 4px; }
.gro-faucet .gro-dial-s{ font-size: 12px; color: var(--gro-muted); margin-top: 4px; }

/* Modes */
.gro-faucet .gro-faucet-modes{
  display:grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 12px;
  margin-top: 12px;
}
.gro-faucet .gro-faucet-mode{
  border: 1px solid var(--gro-border);
  background: var(--gro-card);
  border-radius: 16px;
  padding: 14px;
}
.gro-faucet .gro-faucet-mode.is-active{
  border-color: rgba(90,185,76,0.85);
  box-shadow: 0 0 0 1px rgba(90,185,76,0.18) inset, 0 8px 24px rgba(0,0,0,0.25);
}
.gro-faucet .gro-faucet-mode.is-disabled{
  opacity: .55;
  pointer-events:none;
}
.gro-faucet #groFpMsg{ min-height: 18px; margin-top: 10px; }

/* Extra packs */
.gro-faucet .gro-extra-summary{
  display:flex;
  gap: 14px;
  flex-wrap: wrap;
  margin: 10px 0;
  color: var(--gro-muted);
}
.gro-faucet .gro-extra-grid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 12px;
  margin-top: 10px;
}
.gro-faucet .gro-extra-pack{
  border: 1px solid var(--gro-border);
  background: var(--gro-card);
  border-radius: 16px;
  padding: 14px;
}
.gro-faucet .gro-extra-pack h4{ margin: 0 0 6px; }
.gro-faucet .gro-extra-price{
  font-weight: 900;
  color: #c9f3cb;
  margin: 8px 0 10px;
}

/* ============================================================
   Currency tabs (Faucet + Buy)
   - works for .gro-cur-tab AND .gro-fp-tab
   ============================================================ */

.gro-faucet .gro-cur-tabs,
.gro-faucet .gro-fp-currency-tabs{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:10px;
}

.gro-faucet .gro-cur-tab,
.gro-faucet .gro-fp-tab{
  appearance:none !important;
  -webkit-appearance:none !important;
  border:1px solid var(--gro-line) !important;
  background: rgba(255,255,255,0.02) !important;
  color: var(--gro-text) !important;
  border-radius: 999px !important;
  padding: 8px 12px !important;
  font-size: 13px !important;
  line-height: 1 !important;
  font-weight: 800 !important;
  cursor:pointer !important;
  transition: transform .08s ease, border-color .12s ease, background .12s ease, opacity .12s ease;
}

.gro-faucet .gro-cur-tab:hover,
.gro-faucet .gro-fp-tab:hover{
  transform: translateY(-1px);
  border-color: rgba(90,185,76,0.6) !important;
}

.gro-faucet .gro-cur-tab.is-active,
.gro-faucet .gro-fp-tab.is-active{
  border-color: rgba(90,185,76,0.85) !important;
  background: rgba(90,185,76,0.14) !important;
}

.gro-faucet .gro-cur-tab.is-disabled,
.gro-faucet .gro-fp-tab.is-disabled,
.gro-faucet .gro-cur-tab:disabled,
.gro-faucet .gro-fp-tab:disabled{
  opacity: .45 !important;
  cursor: not-allowed !important;
  pointer-events:none !important;
  transform:none !important;
}

/* ============================================================
   Lines / Pills / Messages / Bars
   ============================================================ */

.gro-faucet .gro-line{
  display:flex;
  align-items:flex-start;
  gap:12px;
  padding: 12px 0;
  border-top: 1px solid var(--gro-line);
}
.gro-faucet .gro-line:first-of-type{ border-top: 0; padding-top: 0; }
.gro-faucet .gro-line .left{ flex: 1 1 auto; min-width: 220px; }
.gro-faucet .gro-line .right{
  flex: 0 0 auto;
  display:flex;
  align-items:center;
  gap:10px;
}

.gro-faucet .gro-timer{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid var(--gro-line);
  background: rgba(255,255,255,0.02);
  font-weight: 700;
  font-size: 12px;
}

.gro-faucet .gro-msg{
  margin-top: 10px;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid var(--gro-line);
  background: rgba(255,255,255,0.02);
  color: var(--gro-text);
  font-size: 13px;
  line-height: 1.35;
}
.gro-faucet .gro-msg:empty{ display:none; }
.gro-faucet .gro-msg.gro-ok{
  border-color: rgba(90,185,76,0.8);
  background: rgba(90,185,76,0.10);
}
.gro-faucet .gro-msg.gro-error{
  border-color: rgba(255,77,77,0.7);
  background: rgba(255,77,77,0.10);
}
.gro-faucet .gro-ok{ color: var(--gro-green); }
.gro-faucet .gro-error{ color: var(--gro-red); }

.gro-faucet .gro-bars{
  display:grid;
  gap:10px;
  margin-top: 10px;
}
.gro-faucet .gro-bar{
  border: 1px solid var(--gro-line);
  border-radius: 14px;
  background: rgba(0,0,0,0.18);
  padding: 10px 12px;
}
.gro-faucet .gro-bar .gro-bar-top{
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  gap:10px;
  font-size: 13px;
  margin-bottom: 8px;
}
.gro-faucet .gro-bar .gro-bar-top .label{ color: var(--gro-sub); }
.gro-faucet .gro-track{
  height: 10px;
  border-radius: 999px;
  background: rgba(255,255,255,0.06);
  overflow:hidden;
  border: 1px solid rgba(255,255,255,0.08);
}
.gro-faucet .gro-fill{
  height: 100%;
  width: 0%;
  border-radius: 999px;
  background: rgba(90,185,76,0.85);
  transition: width .22s ease;
}
.gro-faucet .gro-bar .gro-bar-sub{
  margin-top: 8px;
  color: var(--gro-sub);
  font-size: 12px;
}

/* Buy GRO bits */
.gro-faucet .gro-buy-notice{
  border: 1px solid var(--gro-line);
  background: rgba(255,255,255,0.02);
  border-radius: 14px;
  padding: 10px 12px;
  margin-top: 10px;
}
.gro-faucet .gro-buy-field{
  display:flex;
  flex-direction:column;
  gap:6px;
  margin-top: 10px;
}
.gro-faucet .gro-buy-field input{
  width: 100%;
  border-radius: 12px;
  border: 1px solid var(--gro-line);
  background: rgba(0,0,0,0.18);
  color: var(--gro-text);
  padding: 10px 12px;
  outline: none;
}
.gro-faucet .gro-buy-field input:focus{
  border-color: rgba(90,185,76,0.85);
  box-shadow: 0 0 0 2px rgba(90,185,76,0.14);
}
.gro-faucet .gro-buy-actions{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top: 12px;
}
.gro-faucet .gro-buy-status{ margin-top: 10px; }

/* Orders modal */
.gro-modal{
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 18px;
  z-index: 999999;
}
.gro-modal.open{ display:flex; }
.gro-modal .gro-modal-backdrop{
  position:absolute;
  inset:0;
  background: rgba(0,0,0,0.65);
  backdrop-filter: blur(2px);
}
.gro-modal .gro-modal-content{
  position: relative;
  z-index: 2;
  width: min(860px, 96vw);
  max-height: 86vh;
  overflow: auto;
  background: rgba(18,18,18,0.92);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 18px;
  box-shadow: 0 12px 40px rgba(0,0,0,0.55);
  padding: 14px;
}
.gro-modal .gro-modal-close{
  appearance:none;
  border: 1px solid rgba(255,255,255,0.14);
  background: rgba(255,255,255,0.04);
  color: #fff;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  cursor:pointer;
  font-size: 18px;
  line-height: 1;
}
.gro-modal .gro-modal-meta{
  padding: 10px 0;
  color: rgba(255,255,255,0.75);
  font-size: 13px;
}
.gro-modal .gro-modal-table-wrapper{
  overflow:auto;
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 14px;
}
.gro-modal table.gro-modal-table{
  width: 100%;
  border-collapse: collapse;
}
.gro-modal table.gro-modal-table th,
.gro-modal table.gro-modal-table td{
  padding: 10px 12px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  font-size: 13px;
}
.gro-modal table.gro-modal-table th{ text-align:left; color: rgba(255,255,255,0.75); }
.gro-modal table.gro-modal-table tr:last-child td{ border-bottom: 0; }

/* Responsive */
@media (max-width: 820px){
  .gro-faucet .gro-fp-dials{ grid-template-columns: repeat(2, minmax(0,1fr)); }
  .gro-faucet .gro-faucet-modes{ grid-template-columns: 1fr; }
  .gro-faucet .gro-extra-grid{ grid-template-columns: 1fr; }
  .gro-faucet .gro-claim-head{ flex-direction: column; align-items: flex-start; }
}

/* Keep element in DOM but hide it visually (for JS canonical state) */
#groFpCurrency,
label[for="groFpCurrency"],
#groFpRateLine{
  position:absolute !important;
  left:-9999px !important;
  width:1px !important;
  height:1px !important;
  overflow:hidden !important;
  opacity:0 !important;
  pointer-events:none !important;
}
.gro-prog-ticks{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px;opacity:.9;font-size:12px}
.gro-prog-tick{padding:2px 6px;border-radius:999px;background:rgba(255,255,255,.06)}
.gro-prog-tick.is-active{outline:2px solid rgba(90,185,76,.6)}

#groCreditsStrip{
  display:flex;
  flex-wrap:wrap;
  gap:8px 14px;
  margin:10px 0 14px;
  padding:10px 12px;
  border:1px solid rgba(255,255,255,.10);
  border-radius:12px;
  background:rgba(0,0,0,.12);
}
#groCreditsStrip span{
  display:flex;
  gap:6px;
  align-items:baseline;
  font-size:13px;
  white-space:nowrap;
}
@media (max-width:640px){
  #groCreditsStrip{justify-content:space-between;}
  #groCreditsStrip span{width:48%; justify-content:space-between;}
}

.gro-claim-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
}

/* ===== Ads bonus button / meta row fix ===== */

.gro-faucet .gro-bar-meta{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.gro-faucet .gro-fp-mini-btn,
.gro-faucet #groAdsRedeemBtn{
  appearance: none !important;
  -webkit-appearance: none !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 110px !important;
  min-height: 38px !important;
  padding: 8px 14px !important;
  margin-left: 8px !important;

  background: linear-gradient(180deg, #5AB94C 0%, #46963b 100%) !important;
  background-image: none !important;
  color: #ffffff !important;
  border: 1px solid rgba(90,185,76,0.95) !important;
  border-radius: 10px !important;

  font-size: 13px !important;
  font-weight: 800 !important;
  font-family: inherit !important;
  line-height: 1 !important;
  text-align: center !important;
  text-decoration: none !important;
  white-space: nowrap !important;

  box-shadow: 0 6px 18px rgba(0,0,0,0.20) !important;
  cursor: pointer !important;
}

.gro-faucet .gro-fp-mini-btn:hover:not(:disabled),
.gro-faucet #groAdsRedeemBtn:hover:not(:disabled){
  transform: translateY(-1px);
  filter: brightness(1.03);
}

.gro-faucet .gro-fp-mini-btn:disabled,
.gro-faucet #groAdsRedeemBtn:disabled{
  background: linear-gradient(180deg, #5AB94C 0%, #46963b 100%) !important;
  background-image: none !important;
  color: #ffffff !important;
  border: 1px solid rgba(90,185,76,0.85) !important;
  opacity: .55 !important;
  cursor: not-allowed !important;
  box-shadow: none !important;
}
.gro-buy-notice,
.gro-buy-allocation {
  margin-top: 12px;
}

.gro-buy-split {
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 12px;
  margin-top: 10px;
}

.gro-buy-split-item {
  padding: 12px;
  border-radius: 12px;
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.06);
}

.gro-buy-split-value {
  font-size: 20px;
  font-weight: 800;
  color: #8fe07e;
  line-height: 1;
  margin-bottom: 6px;
}

.gro-buy-split-label {
  font-size: 13px;
  line-height: 1.5;
  color: rgba(255,255,255,.88);
}

.gro-buy-facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 12px;
  margin-top: 14px;
}

.gro-buy-fact {
  padding: 12px 14px;
  border-radius: 12px;
  background: rgba(255,255,255,.025);
  border: 1px solid rgba(255,255,255,.06);
}

.gro-buy-fact.is-highlight {
  background: rgba(90,185,76,.10);
  border-color: rgba(90,185,76,.22);
}

.gro-buy-fact-label {
  display: block;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: rgba(255,255,255,.58);
  margin-bottom: 6px;
}

.gro-buy-fact-value {
  display: block;
  font-size: 16px;
  line-height: 1.35;
  color: #fff;
}

.gro-buy-fact-sub {
  display: block;
  margin-top: 5px;
  font-size: 12px;
}

.gro-buy-field label {
  display: block;
  margin-bottom: 8px;
  font-size: 13px;
  font-weight: 600;
  color: rgba(255,255,255,.9);
}

.gro-buy-field input[type="text"] {
  width: 100%;
}

.gro-buy-history-row {
  margin-top: 12px;
}

@media (max-width: 640px) {
  .gro-buy-split,
  .gro-buy-facts {
    grid-template-columns: 1fr;
  }
}

.gro-extra-heading {
  margin: 0;
  font-size: 20px;
  line-height: 1.25;
  color: #fff;
}

.gro-extra-summary-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 10px;
  margin-top: 14px;
}

.gro-extra-stat {
  padding: 12px 14px;
  border-radius: 12px;
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.06);
}

.gro-extra-stat.is-highlight {
  background: rgba(90,185,76,.10);
  border-color: rgba(90,185,76,.22);
}

.gro-extra-stat-wide {
  grid-column: 1 / -1;
}

.gro-extra-stat-label {
  display: block;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: rgba(255,255,255,.58);
  margin-bottom: 6px;
}

.gro-extra-stat-value {
  display: block;
  font-size: 17px;
  line-height: 1.35;
  color: #fff;
}

.gro-extra-grid {
  margin-top: 14px;
}

@media (max-width: 640px) {
  .gro-extra-summary-grid {
    grid-template-columns: 1fr;
  }

  .gro-extra-stat-wide {
    grid-column: auto;
  }

  .gro-extra-heading {
    font-size: 18px;
  }
}

/* ============================================================
   GRO Faucet / Buy — single outer shell fix
   Put at VERY END of the CSS
   ============================================================ */

.gro-faucet{
  position: relative;
  isolation: isolate;
  overflow: hidden;

  margin: 18px auto 28px !important;
  padding: 20px !important;

  border: 1px solid rgba(90,185,76,.24) !important;
  border-radius: 22px !important;

  background:
    radial-gradient(circle at top right, rgba(90,185,76,.08), transparent 28%),
    linear-gradient(180deg, #12191c 0%, #0f1416 100%) !important;

  box-shadow:
    0 18px 48px rgba(0,0,0,.34),
    inset 0 1px 0 rgba(255,255,255,.02) !important;
}

/* top accent */
.gro-faucet::before{
  content:"";
  position:absolute;
  top:0;
  left:0;
  right:0;
  height:3px;
  background:linear-gradient(90deg, #5AB94C, rgba(90,185,76,.12));
  pointer-events:none;
  z-index:0;
}

/* subtle inner bottom fade to visually "close" the block */
.gro-faucet::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height:18px;
  background:linear-gradient(180deg, rgba(15,20,22,0), rgba(15,20,22,.96));
  pointer-events:none;
  z-index:0;
}

/* keep actual content above pseudo-elements */
.gro-faucet > *{
  position:relative;
  z-index:1;
}

/* give the main internal sections a more unified card flow */
.gro-faucet .gro-fp-dials,
.gro-faucet .gro-faucet-modes,
.gro-faucet .gro-bars,
.gro-faucet .gro-buy-notice,
.gro-faucet .gro-buy-allocation,
.gro-faucet .gro-buy-field,
.gro-faucet .gro-buy-actions,
.gro-faucet .gro-buy-status,
.gro-faucet .gro-buy-split,
.gro-faucet .gro-buy-facts,
.gro-faucet .gro-extra-summary-grid,
.gro-faucet .gro-extra-grid{
  position:relative;
  z-index:1;
}

/* ============================================================
   GRO Faucet / Buy — HARD SCOPE PATCH (prevents site pollution)
   Put at VERY END of the CSS
   ============================================================ */

/* 1) Modal must be scoped to the faucet only */
.gro-faucet .gro-modal{
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 18px;
  z-index: 999999;
}
.gro-faucet .gro-modal.open{ display:flex; }
.gro-faucet .gro-modal .gro-modal-backdrop{
  position:absolute;
  inset:0;
  background: rgba(0,0,0,0.65);
  backdrop-filter: blur(2px);
}
.gro-faucet .gro-modal .gro-modal-content{
  position: relative;
  z-index: 2;
  width: min(860px, 96vw);
  max-height: 86vh;
  overflow: auto;
  background: rgba(18,18,18,0.92);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 18px;
  box-shadow: 0 12px 40px rgba(0,0,0,0.55);
  padding: 14px;
}
.gro-faucet .gro-modal .gro-modal-close{
  appearance:none;
  border: 1px solid rgba(255,255,255,0.14);
  background: rgba(255,255,255,0.04);
  color: #fff;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  cursor:pointer;
  font-size: 18px;
  line-height: 1;
}
.gro-faucet .gro-modal .gro-modal-meta{
  padding: 10px 0;
  color: rgba(255,255,255,0.75);
  font-size: 13px;
}
.gro-faucet .gro-modal .gro-modal-table-wrapper{
  overflow:auto;
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 14px;
}
.gro-faucet .gro-modal table.gro-modal-table{
  width: 100%;
  border-collapse: collapse;
}
.gro-faucet .gro-modal table.gro-modal-table th,
.gro-faucet .gro-modal table.gro-modal-table td{
  padding: 10px 12px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  font-size: 13px;
}
.gro-faucet .gro-modal table.gro-modal-table th{
  text-align:left;
  color: rgba(255,255,255,0.75);
}
.gro-faucet .gro-modal table.gro-modal-table tr:last-child td{ border-bottom: 0; }

/* 2) Hide canonical state controls ONLY inside gro-faucet */
.gro-faucet #groFpCurrency,
.gro-faucet label[for="groFpCurrency"],
.gro-faucet #groFpRateLine{
  position:absolute !important;
  left:-9999px !important;
  width:1px !important;
  height:1px !important;
  overflow:hidden !important;
  opacity:0 !important;
  pointer-events:none !important;
}

/* 3) Credits strip scoped */
.gro-faucet #groCreditsStrip{
  display:flex;
  flex-wrap:wrap;
  gap:8px 14px;
  margin:10px 0 14px;
  padding:10px 12px;
  border:1px solid rgba(255,255,255,.10);
  border-radius:12px;
  background:rgba(0,0,0,.12);
}
.gro-faucet #groCreditsStrip span{
  display:flex;
  gap:6px;
  align-items:baseline;
  font-size:13px;
  white-space:nowrap;
}
@media (max-width:640px){
  .gro-faucet #groCreditsStrip{justify-content:space-between;}
  .gro-faucet #groCreditsStrip span{width:48%; justify-content:space-between;}
}

/* 4) Progress ticks scoped */
.gro-faucet .gro-prog-ticks{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  margin-top:8px;
  opacity:.9;
  font-size:12px;
}
.gro-faucet .gro-prog-tick{
  padding:2px 6px;
  border-radius:999px;
  background:rgba(255,255,255,.06);
}
.gro-faucet .gro-prog-tick.is-active{
  outline:2px solid rgba(90,185,76,.6);
}

/* 5) gro-claim-head must be scoped */
.gro-faucet .gro-claim-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
}