/* =========================================================
   GROX — Base / mobile-first core
   ========================================================= */

.grox-wrap {
  --gro:#5AB94C;
  --bg:#0f0f0f;
  --panel:#111;
  --panel2:#0d0d0d;
  --border:#222;
  --text:#eaeaea;
  --muted:#b8b8b8;
  color:var(--text);
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
  max-width:100%;
}

.grox-wrap,
.grox-wrap * {
  box-sizing:border-box;
}

.grox-wrap img,
.grox-wrap video {
  max-width:100%;
  height:auto;
}

.grox-wrap iframe {
  max-width:100%;
}

.grox-muted {
  color:var(--muted);
  font-size:12.5px;
  line-height:1.35;
}

.grox-row {
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  align-items:center;
  min-width:0;
}

.grox-row > * {
  min-width:0;
}

.grox-btn {
  background:var(--gro);
  color:#071107;
  border:0;
  padding:10px 12px;
  border-radius:12px;
  cursor:pointer;
  font-weight:800;
  line-height:1.1;
  min-height:42px;
  text-decoration:none;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}

.grox-btn:hover {
  filter:brightness(1.05);
}

.grox-btn:active {
  transform:translateY(1px);
}

.grox-btn.ghost {
  background:#161616;
  color:#e0e0e0;
  border:1px solid #2a2a2a;
  font-weight:700;
}

/* Inputs / shared */
.grox-form input,
#grox-gro-amount,
.grox-fund-input {
  background:#0e0e0e;
  border:1px solid #2a2a2a;
  color:#f0f0f0;
  padding:10px 12px;
  border-radius:12px;
  width:100%;
  min-height:42px;
}

.grox-form input:focus,
#grox-gro-amount:focus,
.grox-fund-input:focus {
  outline:none;
  border-color:var(--gro);
  box-shadow:0 0 0 3px rgba(90,185,76,.12);
}

.grox-form input::placeholder,
#grox-gro-amount::placeholder,
.grox-fund-input::placeholder {
  color:#9ea7a6;
  opacity:1;
}

/* =========================================================
   MINI HUB
   ========================================================= */
#grox-hub.grox-hub {
  background:linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.01)), var(--panel);
  border:1px solid rgba(90,185,76,.18);
  border-radius:14px;
  padding:10px;
  box-shadow:0 10px 28px rgba(0,0,0,.28);
}

#grox-hub .grox-mini {
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:8px;
}

#grox-hub .grox-mini-item {
  border:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.02);
  border-radius:12px;
  padding:8px 9px;
  min-width:0;
}

#grox-hub .grox-mini-label {
  font-size:10.5px;
  line-height:1.1;
  color:#9ea7a6;
  margin-bottom:4px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

#grox-hub .grox-mini-item strong {
  display:block;
  font-size:13px;
  line-height:1.1;
  color:#f1f1f1;
  font-variant-numeric:tabular-nums;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

#grox-open-hub {
  width:100%;
  margin-top:10px;
  border-radius:12px;
}

/* =========================================================
   PUBLIC VIEWER
   ========================================================= */
#grox-view.grox-view {
  margin-top:10px;
  background:linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.01)), var(--panel2);
  border:1px solid rgba(255,255,255,.08);
  border-radius:14px;
  padding:10px;
  min-height:0;
}

#grox-view .grox-view-title {
  font-weight:900;
  font-size:14px;
  letter-spacing:.2px;
  color:#fff;
}

#grox-view-box.grox-view-box {
  margin-top:10px;
  border:1px solid rgba(255,255,255,.08);
  border-radius:14px;
  background:#0d0d0d;
  padding:10px;
  min-height:90px;
}

#grox-next {
  flex:1 1 100%;
}

#grox-skip {
  flex:1 1 calc(50% - 4px);
}

#grox-open-tab {
  flex:1 1 calc(50% - 4px);
}

/* =========================================================
   TOASTS
   ========================================================= */
.grox-toast-wrap {
  position:fixed;
  right:12px;
  bottom:12px;
  z-index:2147483600;
  display:flex;
  flex-direction:column;
  gap:8px;
}

.grox-toast {
  background:#111;
  border:1px solid #2a2a2a;
  padding:10px 12px;
  border-radius:12px;
  box-shadow:0 10px 26px rgba(0,0,0,.30);
  font-size:13px;
  color:#eaeaea;
}

.grox-toast.ok {
  border-left:3px solid var(--gro);
}

.grox-toast.err {
  border-left:3px solid #d33;
}

/* Viewer status / ad card */
.grox-ad-card {
  background:#111;
  border-radius:14px;
  padding:12px;
  margin-bottom:12px;
  box-shadow:0 4px 16px rgba(0,0,0,0.4);
  transition:transform 0.15s ease, box-shadow 0.2s ease;
}

.grox-ad-card:hover {
  transform:translateY(-2px);
  box-shadow:0 8px 24px rgba(0,0,0,0.5);
}

.grox-ad-title {
  font-size:16px;
  font-weight:900;
  color:#5AB94C;
  margin-bottom:6px;
}

.grox-ad-desc {
  font-size:13px;
  color:#cfcfcf;
  margin-bottom:10px;
  line-height:1.4;
}

.grox-ad-actions {
  display:flex;
  gap:8px;
  margin-bottom:6px;
}

.grox-ad-actions .grox-btn.primary {
  background:#5AB94C;
  color:#071107;
}

.grox-ad-actions .grox-btn.ghost {
  background:#161616;
  color:#e0e0e0;
  border:1px solid #2a2a2a;
}

.grox-ad-foot {
  font-size:12px;
  color:#888;
  display:flex;
  justify-content:space-between;
  flex-wrap:wrap;
}

.grox-ad-foot .reward {
  color:#5AB94C;
  font-weight:700;
}

.grox-ad-foot .cooldown {
  margin-left:10px;
}

.grox-view-status {
  margin:8px 0 6px;
  font-size:.92rem;
  line-height:1.35;
  color:#cfd6e4;
}

.grox-view-status.is-ready {
  font-weight:700;
  color:#7CFFB2;
}

@media (max-width:360px) {
  #grox-hub .grox-mini {
    gap:7px;
  }

  #grox-hub .grox-mini-item {
    padding:7px 8px;
  }

  #grox-hub .grox-mini-item strong {
    font-size:12.5px;
  }
}

:root {
  --gro:#5AB94C;
  --bg:#0f0f0f;
  --panel:#111;
  --panel2:#0d0d0d;
  --border:#222;
  --text:#eaeaea;
  --muted:#b8b8b8;
}

/* =========================================================
   GROX MODAL — mobile-first redesign
   ========================================================= */

/* modal shell */
#grox-hub-modal.grox-modal {
  position: fixed !important;
  inset: 0 !important;
  display: none !important;
  z-index: 2147483000 !important;
  margin: 0 !important;
  padding: 8px !important;
  overflow: hidden !important;
  background: rgba(0,0,0,.72) !important;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

#grox-hub-modal.grox-modal.open {
  display: flex !important;
  align-items: flex-end !important;
  justify-content: center !important;
}

#grox-hub-modal .grox-modal-backdrop {
  position: absolute !important;
  inset: 0 !important;
  background: transparent !important;
}

#grox-hub-modal .grox-modal-panel {
  position: relative !important;
  z-index: 2 !important;
  width: 100% !important;
  max-width: 980px !important;
  max-height: 92vh !important;
  overflow: auto !important;
  background: #0f0f0f !important;
  border: 1px solid rgba(255,255,255,.08) !important;
  border-radius: 18px 18px 0 0 !important;
  box-shadow: 0 20px 60px rgba(0,0,0,.50) !important;
  opacity: 1 !important;
}

/* thin scrollbar */
#grox-hub-modal .grox-modal-panel::-webkit-scrollbar {
  width: 8px;
}
#grox-hub-modal .grox-modal-panel::-webkit-scrollbar-thumb {
  background: #222;
  border-radius: 999px;
}
#grox-hub-modal .grox-modal-panel::-webkit-scrollbar-track {
  background: transparent;
}

/* header */
#grox-hub-modal .grox-modal-head {
  display: flex !important;
  gap: 10px !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 12px 12px !important;
  border-bottom: 1px solid rgba(255,255,255,.06) !important;
  background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.01)), #101010 !important;
  border-radius: 18px 18px 0 0 !important;
  position: sticky;
  top: 0;
  z-index: 5;
}

#grox-hub-modal .grox-modal-title {
  font-weight: 900;
  font-size: 14px;
  line-height: 1.15;
  color: #fff;
  letter-spacing: .2px;
}

#grox-hub-modal .grox-modal-head .grox-btn {
  min-height: 38px;
  padding: 8px 10px;
  border-radius: 10px;
  font-size: 12.5px;
}

/* body */
#grox-hub-modal .grox-modal-body {
  padding: 12px !important;
  background: #0f0f0f !important;
  border-radius: 0 0 18px 18px !important;
  opacity: 1 !important;
}

#grox-hub-modal hr {
  margin: 12px 0 !important;
  opacity: .14 !important;
  border: 0;
  border-top: 1px solid rgba(255,255,255,.08);
}

/* modal sections */
#grox-hub-modal .grox-modal-body > * + * {
  margin-top: 10px;
}

/* stats globales */
#grox-stats.grox-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

#grox-stats .grox-chip {
  background: linear-gradient(180deg, rgba(90,185,76,.10), rgba(90,185,76,.03)), #101510;
  border: 1px solid rgba(90,185,76,.18);
  border-left: 3px solid var(--gro);
  padding: 9px 10px;
  border-radius: 12px;
  font-size: 12.5px;
  color: #eaeaea;
  overflow-wrap: anywhere;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.02);
}

#grox-stats .grox-chip strong {
  color: #fff;
  font-weight: 900;
}

/* rate help */
#grox-rate-help {
  margin: 2px 0 0 !important;
  font-size: 12px;
  line-height: 1.35;
  color: #aeb7b5;
  background: #111;
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 12px;
  padding: 9px 10px;
}

/* conversion row */
#grox-hub-modal #grox-gro-amount,
#grox-hub-modal #grox-buy-btn {
  width: 100%;
}

#grox-hub-modal .grox-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
}

#grox-hub-modal #grox-gro-amount {
  min-height: 42px;
}

#grox-hub-modal #grox-buy-btn {
  min-height: 42px;
}

/* add link wrapper */
#grox-addlink {
  display: grid;
  gap: 10px;
}

/* title inside cards sections */
.grox-subtitle {
  margin: 0 0 8px;
  font-size: 12.5px;
  font-weight: 900;
  color: #fff;
  letter-spacing: .2px;
}

/* tracking totals compact */
.grox-linkstats-totals {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 10px;
}

.grox-stat-chip {
  background: linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.01)), #101010;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 12px;
  padding: 8px 9px;
}

.grox-stat-chip .k {
  display: block;
  font-size: 10.5px;
  color: #9ea7a6;
  margin-bottom: 4px;
  line-height: 1.1;
}

.grox-stat-chip strong {
  display: block;
  font-size: 13px;
  line-height: 1.1;
  color: #f2f2f2;
  font-variant-numeric: tabular-nums;
}

/* link cards */
.grox-link-cards {
  display: grid;
  gap: 10px;
}

.grox-link-card {
  background: linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.01)), #111;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 14px;
  padding: 10px;
  overflow: hidden;
  box-shadow: 0 8px 22px rgba(0,0,0,.18);
}

.grox-link-card-head {
  display: grid;
  gap: 8px;
  margin-bottom: 10px;
}

.grox-link-card-title {
  font-size: 13px;
  font-weight: 800;
  line-height: 1.25;
  color: #f3f3f3;
  overflow-wrap: anywhere;
}

.grox-link-card-pills {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.grox-pill {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 4px 8px;
  border-radius: 999px;
  background: #161616;
  border: 1px solid #2a2a2a;
  color: #d7d7d7;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
}

.grox-pill.is-active {
  background: rgba(90,185,76,.12);
  border-color: rgba(90,185,76,.28);
  color: #9be18f;
}

.grox-pill.is-paused {
  background: rgba(255,255,255,.04);
  border-color: rgba(255,255,255,.08);
  color: #bdbdbd;
}

.grox-link-metrics {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
  margin-bottom: 10px;
}

.grox-metric {
  background: #0d0d0d;
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 12px;
  padding: 8px 9px;
  min-width: 0;
}

.grox-metric .k {
  display: block;
  font-size: 10.5px;
  color: #9ea7a6;
  line-height: 1.1;
  margin-bottom: 4px;
}

.grox-metric strong {
  display: block;
  color: #f3f3f3;
  font-size: 13px;
  line-height: 1.1;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.grox-link-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.grox-link-actions .grox-fund-input {
  width: 100%;
  min-width: 0;
  min-height: 38px;
  padding: 8px 10px;
  border-radius: 10px;
  font-size: 12.5px;
}

.grox-link-actions .grox-btn {
  width: 100%;
  min-width: 0;
  min-height: 38px;
  padding: 8px 10px;
  border-radius: 10px;
  font-size: 12.5px;
}

/* empty */
.grox-empty {
  background: #101010;
  border: 1px solid rgba(255,255,255,.06);
  color: #b8b8b8;
  border-radius: 12px;
  padding: 12px;
  font-size: 12.5px;
}

/* mobile very small */
@media (max-width: 380px) {
  #grox-stats.grox-stats,
  .grox-linkstats-totals,
  .grox-link-metrics,
  .grox-link-actions {
    grid-template-columns: 1fr;
  }

  #grox-hub-modal.grox-modal {
    padding: 0 !important;
  }

  #grox-hub-modal .grox-modal-panel {
    max-height: 100vh !important;
    border-radius: 16px 16px 0 0 !important;
  }
}

/* tablet / desktop */
@media (min-width: 700px) {
  #grox-hub-modal.grox-modal.open {
    align-items: center !important;
  }

  #grox-hub-modal.grox-modal {
    padding: 16px !important;
  }

  #grox-hub-modal .grox-modal-panel {
    width: min(980px, calc(100vw - 32px)) !important;
    max-height: calc(100vh - 32px) !important;
    border-radius: 18px !important;
  }

  #grox-hub-modal .grox-modal-head {
    border-radius: 18px 18px 0 0 !important;
    padding: 14px 14px !important;
  }

  #grox-hub-modal .grox-modal-body {
    padding: 14px !important;
  }

  #grox-stats.grox-stats {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .grox-linkstats-totals {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .grox-link-metrics {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .grox-link-actions {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  #grox-hub-modal .grox-row {
    grid-template-columns: 1fr auto;
    align-items: center;
  }

  #grox-hub-modal #grox-buy-btn {
    width: auto;
    min-width: 180px;
  }
}

.grox-links-section {
  display: grid;
  gap: 10px;
}

.grox-link-metrics-primary,
.grox-link-metrics-secondary {
  display: grid;
  gap: 7px;
}

.grox-link-metrics-primary {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-bottom: 7px;
}

.grox-link-metrics-secondary {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-bottom: 10px;
}

@media (min-width: 700px) {
  .grox-link-metrics-primary {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .grox-link-metrics-secondary {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 380px) {
  .grox-link-metrics-primary,
  .grox-link-metrics-secondary {
    grid-template-columns: 1fr;
  }
}

/* =========================================================
   GROX add-link section — compact mobile-first
   ========================================================= */

#grox-addlink {
  display: grid;
  gap: 10px;
}

#grox-addlink .grox-subtitle,
#grox-addlink h3,
#grox-addlink h4 {
  margin: 0 0 8px;
  font-size: 12.5px;
  font-weight: 900;
  color: #fff;
  letter-spacing: .2px;
}

#grox-addlink .grox-card,
#grox-addlink .grox-panel,
#grox-addlink .grox-add-card,
#grox-addlink .grox-form-wrap,
#grox-addlink .grox-box {
  background: linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.01)), #111;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 14px;
  padding: 10px;
  box-shadow: 0 8px 22px rgba(0,0,0,.18);
}

#grox-addlink form {
  display: grid;
  gap: 8px;
  margin: 0;
}

#grox-addlink label {
  display: block;
  font-size: 11px;
  font-weight: 700;
  color: #c8d0cf;
  margin: 0 0 5px;
}

#grox-addlink input[type="text"],
#grox-addlink input[type="url"],
#grox-addlink input[type="number"],
#grox-addlink input[type="search"],
#grox-addlink textarea,
#grox-addlink select {
  width: 100%;
  min-width: 0;
  min-height: 42px;
  padding: 10px 12px;
  border-radius: 12px;
  background: #0e0e0e;
  border: 1px solid #2a2a2a;
  color: #f0f0f0;
  font-size: 13px;
}

#grox-addlink textarea {
  min-height: 96px;
  resize: vertical;
}

#grox-addlink input:focus,
#grox-addlink textarea:focus,
#grox-addlink select:focus {
  outline: none;
  border-color: var(--gro);
  box-shadow: 0 0 0 3px rgba(90,185,76,.12);
}

#grox-addlink input::placeholder,
#grox-addlink textarea::placeholder {
  color: #9ea7a6;
  opacity: 1;
}

#grox-addlink .grox-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
  align-items: stretch;
}

#grox-addlink .grox-btn {
  width: 100%;
  min-height: 42px;
  border-radius: 12px;
  font-size: 12.8px;
}

#grox-addlink .grox-btn.ghost {
  background: #161616;
  color: #e0e0e0;
  border: 1px solid #2a2a2a;
}

#grox-addlink .grox-muted,
#grox-addlink .description,
#grox-addlink .help,
#grox-addlink small {
  display: block;
  font-size: 11.5px;
  line-height: 1.4;
  color: #9ea7a6;
}

#grox-addlink .grox-inline-stats,
#grox-addlink .grox-form-meta {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

#grox-addlink .grox-meta-chip {
  background: #101010;
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 12px;
  padding: 8px 9px;
}

#grox-addlink .grox-meta-chip .k {
  display: block;
  font-size: 10.5px;
  color: #9ea7a6;
  margin-bottom: 4px;
  line-height: 1.1;
}

#grox-addlink .grox-meta-chip strong {
  display: block;
  color: #f3f3f3;
  font-size: 13px;
  line-height: 1.1;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

#grox-addlink .grox-form-actions {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
  margin-top: 2px;
}

#grox-addlink .grox-check,
#grox-addlink .grox-checkbox,
#grox-addlink .grox-switch-row {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 12px;
  color: #d7d7d7;
}

#grox-addlink .grox-check input,
#grox-addlink .grox-checkbox input,
#grox-addlink .grox-switch-row input {
  width: 16px;
  height: 16px;
  margin-top: 2px;
  accent-color: var(--gro);
}

@media (min-width: 700px) {
  #grox-addlink .grox-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: center;
  }

  #grox-addlink .grox-form-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  #grox-addlink .grox-inline-stats,
  #grox-addlink .grox-form-meta {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (max-width: 380px) {
  #grox-addlink .grox-inline-stats,
  #grox-addlink .grox-form-meta {
    grid-template-columns: 1fr;
  }
}

/* =========================================================
   GROX modal — force style for Add views controls
   ========================================================= */

#grox-hub-modal .grox-fund-input,
#grox-my-links .grox-fund-input,
#grox-hub-modal input.grox-fund-input {
  width: 100% !important;
  min-width: 0 !important;
  min-height: 38px !important;
  padding: 8px 10px !important;
  border-radius: 10px !important;
  font-size: 12.5px !important;
  background: #0e0e0e !important;
  border: 1px solid #2a2a2a !important;
  color: #f0f0f0 !important;
  box-shadow: none !important;
}

#grox-hub-modal .grox-fund-input:focus,
#grox-my-links .grox-fund-input:focus {
  outline: none !important;
  border-color: var(--gro) !important;
  box-shadow: 0 0 0 3px rgba(90,185,76,.12) !important;
}

#grox-hub-modal .grox-fund-input::placeholder,
#grox-my-links .grox-fund-input::placeholder {
  color: #9ea7a6 !important;
  opacity: 1 !important;
}

#grox-hub-modal .grox-fund,
#grox-my-links .grox-fund,
#grox-hub-modal button.grox-fund,
#grox-my-links button.grox-fund {
  width: 100% !important;
  min-width: 0 !important;
  min-height: 38px !important;
  padding: 8px 10px !important;
  border-radius: 10px !important;
  font-size: 12.5px !important;
}

.grox-ad-reward {
  background: rgba(90,185,76,0.12);
  padding: 4px 8px;
  border-radius: 8px;
  display: inline-block;
}

/* =========================================================
   GROX FINAL FIX — modal mobile + titles + selects + tables
   À coller TOUT EN BAS du fichier
   ========================================================= */

/* ---------- modal shell ---------- */
#grox-hub-modal,
#grox-hub-modal.grox-modal {
  position: fixed !important;
  inset: 0 !important;
  z-index: 2147483000 !important;
  background: rgba(0,0,0,.78) !important;
  backdrop-filter: blur(4px) !important;
  -webkit-backdrop-filter: blur(4px) !important;
}

#grox-hub-modal .grox-modal-backdrop {
  position: absolute !important;
  inset: 0 !important;
  background: transparent !important;
}

#grox-hub-modal .grox-modal-panel {
  position: relative !important;
  z-index: 2 !important;
  width: min(980px, calc(100vw - 16px)) !important;
  max-width: 100% !important;
  max-height: calc(100vh - 16px) !important;
  overflow: auto !important;
  background: #0f0f0f !important;
  background-image: none !important;
  opacity: 1 !important;
  border: 1px solid rgba(255,255,255,.08) !important;
  border-radius: 18px !important;
  box-shadow: 0 20px 60px rgba(0,0,0,.50) !important;
}

#grox-hub-modal .grox-modal-head {
  background: #101010 !important;
  color: #fff !important;
  opacity: 1 !important;
}

#grox-hub-modal .grox-modal-body {
  background: #0f0f0f !important;
  color: #eaeaea !important;
  opacity: 1 !important;
}

/* ---------- mobile modal hard fix ---------- */
@media (max-width: 699px) {
  #grox-hub-modal,
  #grox-hub-modal.grox-modal {
    padding: 8px !important;
    align-items: flex-end !important;
    justify-content: center !important;
    background: rgba(0,0,0,.82) !important;
  }

  #grox-hub-modal .grox-modal-panel {
    width: 100% !important;
    max-width: 100% !important;
    max-height: 92vh !important;
    border-radius: 18px 18px 0 0 !important;
    background: #0f0f0f !important;
  }

  #grox-hub-modal .grox-modal-head {
    border-radius: 18px 18px 0 0 !important;
  }

  #grox-hub-modal .grox-modal-body {
    border-radius: 0 0 18px 18px !important;
  }
}

@media (max-width: 380px) {
  #grox-hub-modal,
  #grox-hub-modal.grox-modal {
    padding: 0 !important;
  }

  #grox-hub-modal .grox-modal-panel {
    width: 100% !important;
    max-height: 100vh !important;
    border-radius: 16px 16px 0 0 !important;
  }
}

/* ---------- titles ---------- */
#grox-hub-modal .grox-modal-title,
#grox-hub-modal .grox-subtitle,
#grox-hub-modal h2,
#grox-hub-modal h3,
#grox-hub-modal h4,
#grox-my-links .grox-link-card-title,
#grox-addlink .grox-subtitle,
#grox-addlink h3,
#grox-addlink h4 {
  color: #fff !important;
  font-weight: 900 !important;
  opacity: 1 !important;
  letter-spacing: .2px !important;
}

#grox-my-links .grox-link-card-title {
  font-size: 13px !important;
  line-height: 1.25 !important;
}

/* ---------- selects / inputs ---------- */
#grox-hub-modal select,
#grox-hub-modal input,
#grox-hub-modal textarea,
#grox-addlink select,
#grox-addlink input,
#grox-addlink textarea,
#grox-my-links .grox-fund-input {
  background: #0e0e0e !important;
  color: #f0f0f0 !important;
  border: 1px solid #2a2a2a !important;
  border-radius: 12px !important;
  opacity: 1 !important;
  appearance: none;
  -webkit-appearance: none;
}

#grox-hub-modal select,
#grox-addlink select {
  min-height: 42px !important;
  padding: 10px 36px 10px 12px !important;
  background-image:
    linear-gradient(45deg, transparent 50%, #9ea7a6 50%),
    linear-gradient(135deg, #9ea7a6 50%, transparent 50%);
  background-position:
    calc(100% - 18px) calc(50% - 2px),
    calc(100% - 12px) calc(50% - 2px);
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
}

#grox-hub-modal select option,
#grox-addlink select option {
  background: #111 !important;
  color: #f0f0f0 !important;
}

#grox-hub-modal input::placeholder,
#grox-hub-modal textarea::placeholder,
#grox-addlink input::placeholder,
#grox-addlink textarea::placeholder,
#grox-my-links .grox-fund-input::placeholder {
  color: #9ea7a6 !important;
  opacity: 1 !important;
}

/* ---------- tables / legacy wrappers ---------- */
#grox-hub-modal .grox-table-wrap,
#grox-my-links .grox-table-wrap {
  display: block !important;
  width: 100% !important;
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch !important;
  border-radius: 12px !important;
  background: #101010 !important;
}

#grox-hub-modal table,
#grox-my-links table {
  width: 100% !important;
  min-width: 560px !important;
  border-collapse: collapse !important;
  background: #111 !important;
  color: #eaeaea !important;
}

#grox-hub-modal thead th,
#grox-my-links thead th {
  background: linear-gradient(0deg, #121212, #151515) !important;
  color: #f2f2f2 !important;
  border-bottom: 1px solid #2a2a2a !important;
  padding: 8px 9px !important;
  font-size: 12.5px !important;
  text-align: left !important;
  white-space: nowrap !important;
}

#grox-hub-modal tbody td,
#grox-my-links tbody td {
  background: #111 !important;
  color: #e6e6e6 !important;
  border-bottom: 1px solid #1f1f1f !important;
  padding: 8px 9px !important;
  vertical-align: top !important;
  font-size: 12.8px !important;
}

/* ---------- cards / chips hard fix ---------- */
#grox-my-links .grox-link-card,
#grox-addlink .grox-add-card,
#grox-addlink .grox-card,
#grox-addlink .grox-panel,
#grox-addlink .grox-box,
#grox-hub-modal .grox-chip,
#grox-hub-modal .grox-stat-chip,
#grox-hub-modal .grox-metric {
  background: #111 !important;
  opacity: 1 !important;
  color: #eaeaea !important;
}

#grox-hub-modal .grox-chip strong,
#grox-hub-modal .grox-stat-chip strong,
#grox-hub-modal .grox-metric strong {
  color: #fff !important;
}

/* ---------- add views controls ---------- */
#grox-my-links .grox-link-actions {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 8px !important;
}

#grox-hub-modal .grox-fund-input,
#grox-my-links .grox-fund-input {
  width: 100% !important;
  min-width: 0 !important;
  min-height: 38px !important;
  padding: 8px 10px !important;
  font-size: 12.5px !important;
}

#grox-hub-modal .grox-fund,
#grox-my-links .grox-fund,
#grox-hub-modal .grox-toggle,
#grox-hub-modal .grox-del,
#grox-my-links .grox-toggle,
#grox-my-links .grox-del {
  width: 100% !important;
  min-height: 38px !important;
  font-size: 12.5px !important;
}

@media (min-width: 700px) {
  #grox-my-links .grox-link-actions {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 380px) {
  #grox-my-links .grox-link-actions {
    grid-template-columns: 1fr !important;
  }
}

/* =========================================================
   GROX MODAL — fix scroll interne et body bloqué
   ========================================================= */

html.grox-modal-open,
body.grox-modal-open {
  overflow: hidden !important;
  height: 100% !important;
  overscroll-behavior: none !important;
}

.grox-modal {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;
  overscroll-behavior: contain;
}

.grox-modal-panel {
  max-height: 90vh;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  touch-action: pan-y;
}

.grox-modal-panel::-webkit-scrollbar {
  width: 8px;
}

.grox-modal-panel::-webkit-scrollbar-thumb {
  background: #222;
  border-radius: 999px;
}

.grox-modal-panel::-webkit-scrollbar-track {
  background: transparent;
}