/* ===== Original compatibility CSS preserved for legacy/admin/PTC components ===== */

:root {
  --font-main: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono: "SFMono-Regular", Consolas, "Liberation Mono", monospace;

  --color-bg: #fff8ed;
  --color-surface: #fffdf8;
  --color-surface-soft: #f8efe2;
  --color-surface-muted: #fff4df;
  --color-text: #2f332d;
  --color-text-muted: #6f766a;
  --color-text-soft: #9ca391;
  --color-heading: #10251f;
  --color-primary: #0f8b72;
  --color-primary-hover: #0a6f5b;
  --color-primary-soft: #dff7ee;
  --color-accent: #d97706;
  --color-accent-soft: #fff1cf;
  --color-success: #16a34a;
  --color-success-soft: #ecfdf3;
  --color-warning: #d97706;
  --color-warning-soft: #fff7ed;
  --color-error: #dc2626;
  --color-error-soft: #fef2f2;
  --color-info: #0f766e;
  --color-info-soft: #e7f8f3;
  --color-border: #eadfce;
  --color-divider: #eee3d2;
  --color-focus: rgba(15, 139, 114, 0.30);

  --fs-xs: 0.75rem;
  --fs-sm: 0.875rem;
  --fs-base: 1rem;
  --fs-md: 1rem;
  --fs-lg: 1.12rem;
  --fs-xl: 1.32rem;
  --fs-2xl: clamp(1.4rem, 2.2vw, 1.85rem);
  --fs-3xl: clamp(1.85rem, 4.4vw, 3.15rem);

  --fw-normal: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --fw-extrabold: 800;
  --lh-tight: 1.15;
  --lh-normal: 1.55;
  --lh-relaxed: 1.75;

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;

  --container: 1160px;
  --container-narrow: 860px;
  --button-height: 44px;
  --input-height: 46px;
  --card-padding: clamp(18px, 3vw, 28px);
  --navbar-height: 72px;

  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 18px;
  --radius-xl: 24px;
  --radius-pill: 999px;

  --shadow-soft: 0 12px 28px rgba(88, 63, 28, 0.12);
  --shadow-card: 0 8px 22px rgba(88, 63, 28, 0.08);
  --shadow-navbar: 0 4px 18px rgba(88, 63, 28, 0.08);
  --shadow-modal: 0 26px 80px rgba(43, 29, 11, 0.28);
  --transition-fast: 150ms ease;
  --transition-normal: 220ms ease;
  --transition-slow: 320ms ease;

  --z-base: 1;
  --z-dropdown: 100;
  --z-sticky: 200;
  --z-overlay: 900;
  --z-modal: 1000;
  --z-toast: 1100;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  min-width: 320px;
  font-family: var(--font-main);
  font-size: var(--fs-base);
  line-height: var(--lh-normal);
  color: var(--color-text);
  background:
    radial-gradient(circle at 10% 0%, rgba(15, 139, 114, 0.13), transparent 28rem),
    radial-gradient(circle at 86% 8%, rgba(88, 63, 28, 0.12), transparent 24rem),
    var(--color-bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
a { color: var(--color-primary-hover); text-decoration: none; text-underline-offset: 3px; }
a:hover { color: var(--color-primary); text-decoration: underline; }
button, input, select, textarea { font: inherit; }
img, svg, iframe { max-width: 100%; }
:where(a, button, input, textarea, select, summary, [tabindex]):focus-visible {
  outline: 3px solid var(--color-focus);
  outline-offset: 3px;
}
::selection { background: var(--color-primary-soft); color: var(--color-heading); }

.skip-link {
  position: fixed;
  top: var(--space-4);
  left: var(--space-4);
  z-index: var(--z-toast);
  transform: translateY(-140%);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-pill);
  background: var(--color-heading);
  color: var(--color-heading);
  box-shadow: var(--shadow-soft);
}
.skip-link:focus { transform: translateY(0); }

h1, h2, h3 {
  margin: 0 0 var(--space-4);
  color: var(--color-heading);
  line-height: var(--lh-tight);
  letter-spacing: -0.03em;
}
h1 { font-size: var(--fs-3xl); font-weight: var(--fw-extrabold); }
h2 { font-size: var(--fs-2xl); font-weight: var(--fw-bold); }
h3 { font-size: var(--fs-lg); font-weight: var(--fw-bold); }
p { margin: 0 0 var(--space-4); }
small { color: var(--color-text-muted); }
strong { color: var(--color-heading); }
.muted { color: var(--color-text-muted); }
.error { color: var(--color-error); }
.success { color: var(--color-success); }
.reward {
  color: var(--color-primary-hover);
  font-weight: var(--fw-extrabold);
}

.container, .hero {
  width: min(var(--container), calc(100% - 40px));
  margin-inline: auto;
}
.hero {
  padding: var(--space-5) 0 var(--space-10);
}
.top-nav, nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  min-height: var(--navbar-height);
  padding: var(--space-3) 0;
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  color: var(--color-heading);
  font-weight: var(--fw-extrabold);
  font-size: var(--fs-lg);
  letter-spacing: -0.03em;
}
.brand:hover { color: var(--color-heading); text-decoration: none; }
.brand-mark {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 14px;
  background: radial-gradient(circle at 35% 28%, #fff8dc 0 17%, transparent 18%), linear-gradient(135deg, #f59e0b, #0f8b72);
  color: var(--color-heading);
  box-shadow: 0 12px 24px rgba(15, 139, 114, 0.24);
}
.user-area {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-3);
  flex-wrap: wrap;
  color: var(--color-text-muted);
  font-size: var(--fs-sm);
}
.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(280px, 0.75fr);
  gap: var(--space-6);
  align-items: stretch;
  padding: clamp(24px, 4vw, 42px);
  border: 1px solid rgba(254, 202, 202, 0.88);
  border-radius: var(--radius-xl);
  background:
    radial-gradient(circle at top right, rgba(15, 139, 114, 0.14), transparent 20rem),
    linear-gradient(135deg, #fffdf8, #fff1cf);
  box-shadow: var(--shadow-card);
}
.hero-copy { display: flex; flex-direction: column; justify-content: center; min-width: 0; }
.hero-copy p { max-width: 720px; color: var(--color-text-muted); font-size: var(--fs-md); line-height: var(--lh-relaxed); }
.hero-actions, .trust-row, .dialog-actions, .actions-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
}
.trust-row { margin-top: var(--space-5); }
.trust-row span {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 5px 10px;
  border-radius: var(--radius-pill);
  background: var(--color-accent-soft);
  color: var(--color-accent);
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
}
.wallet-card, .panel, .card, .dialog-card, .notice, .state-card {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  background: var(--color-surface);
  box-shadow: var(--shadow-card);
}
.wallet-card {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--space-2);
  min-height: 220px;
  padding: var(--card-padding);
  background:
    radial-gradient(circle at 90% 0%, rgba(15, 139, 114, 0.13), transparent 12rem),
    var(--color-surface);
}
.wallet-card span { color: var(--color-text-muted); font-weight: var(--fw-bold); font-size: var(--fs-sm); }
.wallet-card strong { font-size: clamp(1.7rem, 4vw, 2.25rem); line-height: 1.1; letter-spacing: -0.05em; }
.wallet-card small { word-break: break-word; }
.container { padding-bottom: var(--space-16); }

.tabs {
  position: sticky;
  top: 0;
  z-index: var(--z-sticky);
  display: flex;
  justify-content: center;
  gap: var(--space-2);
  flex-wrap: wrap;
  overflow: visible;
  padding: var(--space-3);
  margin: 0 0 var(--space-5);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  background: rgba(255, 255, 255, 0.92);
  box-shadow: var(--shadow-navbar);
  backdrop-filter: blur(14px);
  scrollbar-width: thin;
}
.tabs button, .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: var(--button-height);
  padding: 0 var(--space-5);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  background: var(--color-surface);
  color: var(--color-heading);
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  transition: transform var(--transition-fast), box-shadow var(--transition-fast), background-color var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast), opacity var(--transition-fast);
}
.tabs button:hover, .btn:hover {
  transform: translateY(-1px);
  border-color: #fcd34d;
  background: var(--color-surface-soft);
  color: var(--color-heading);
  text-decoration: none;
  box-shadow: 0 10px 18px rgba(43, 29, 11, 0.07);
}
.tabs button.active, .tabs button[aria-selected="true"], .btn.primary {
  border-color: var(--color-primary);
  background: var(--color-primary);
  color: var(--color-surface);
  box-shadow: 0 12px 22px rgba(15, 139, 114, 0.22);
}
.btn.ghost { background: var(--color-surface); color: var(--color-heading); }
.btn.danger { border-color: var(--color-error); background: var(--color-error); color: #fff; }
.btn:disabled, button:disabled {
  opacity: 0.62;
  cursor: not-allowed;
  transform: none !important;
  box-shadow: none !important;
}
.panel { padding: var(--card-padding); }
.panel > * + * { margin-top: var(--space-5); }
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--space-4);
  align-items: start;
  min-width: 0;
}
.grid > * { min-width: 0; }
.card {
  min-width: 0;
  padding: var(--card-padding);
  overflow-wrap: anywhere;
  transition: transform var(--transition-normal), box-shadow var(--transition-normal), border-color var(--transition-normal);
}
.card:hover {
  transform: translateY(-3px);
  border-color: rgba(15, 139, 114, 0.24);
  box-shadow: var(--shadow-soft);
}
.card h3 { margin-top: 0; }
.card > :last-child, .panel > :last-child, .dialog-card > :last-child { margin-bottom: 0; }
.offer-card { display: flex; flex-direction: column; min-height: 220px; }
.offer-card .btn { margin-top: auto; align-self: flex-start; }
.notice {
  margin: 0 0 var(--space-4);
  padding: var(--space-4) var(--space-5);
  background: var(--color-info-soft);
  color: var(--color-info);
  border-color: var(--color-info-soft);
}
.notice p { margin: var(--space-2) 0 0; }
.notice small { display: block; margin-top: var(--space-2); font-weight: var(--fw-semibold); }
.notice.error { border-color: #fecaca; background: var(--color-error-soft); color: #991b1b; }
.notice.warning { border-color: var(--color-warning-soft); background: var(--color-warning-soft); color: var(--color-warning); }
.offer-provider-notice { text-align: left; }
.empty, .loading, .state-card, .empty-state, .error-state {
  display: grid;
  place-items: center;
  min-height: 128px;
  padding: var(--space-6);
  border: 1px dashed var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface-muted);
  color: var(--color-text-muted);
  text-align: center;
}
.loading::before {
  content: "";
  width: 22px;
  height: 22px;
  margin-bottom: var(--space-3);
  border-radius: 50%;
  border: 3px solid var(--color-border);
  border-top-color: var(--color-primary);
  animation: spin 800ms linear infinite;
}
.error-state { border-color: #fecaca; background: var(--color-error-soft); color: #991b1b; }
.success-state { border-color: #bbf7d0; background: var(--color-success-soft); color: #166534; }
.toast-stack {
  position: fixed;
  top: var(--space-4);
  right: var(--space-4);
  z-index: var(--z-toast);
  display: grid;
  gap: var(--space-3);
  width: min(380px, calc(100vw - 32px));
  pointer-events: none;
}
.toast {
  pointer-events: auto;
  padding: var(--space-4) var(--space-5);
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  color: var(--color-text);
  box-shadow: var(--shadow-soft);
  animation: slide-in var(--transition-normal) both;
}
.toast.success { border-color: #bbf7d0; background: var(--color-success-soft); color: #166534; }
.toast.error { border-color: #fecaca; background: var(--color-error-soft); color: #991b1b; }
.toast.warning { border-color: var(--color-warning-soft); background: var(--color-warning-soft); color: var(--color-warning); }

input, textarea, select {
  width: 100%;
  min-height: var(--input-height);
  margin: var(--space-2) 0 var(--space-4);
  padding: 12px 14px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  color: var(--color-text);
  box-shadow: 0 1px 0 rgba(15, 23, 42, 0.02);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast), background-color var(--transition-fast);
}
textarea { min-height: 120px; resize: vertical; line-height: var(--lh-normal); }
input::placeholder, textarea::placeholder { color: var(--color-text-soft); }
input:focus, textarea:focus, select:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 4px var(--color-focus);
  outline: 0;
}
label {
  display: block;
  margin-top: var(--space-3);
  color: var(--color-heading);
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
}

.table-scroll {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  overflow-x: auto;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
}
table {
  width: 100%;
  min-width: 680px;
  border-collapse: separate;
  border-spacing: 0;
  font-size: var(--fs-sm);
  background: var(--color-surface);
}
th, td {
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--color-divider);
  text-align: left;
  vertical-align: top;
}
th {
  color: var(--color-text-muted);
  font-size: var(--fs-xs);
  font-weight: var(--fw-extrabold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  background: var(--color-surface-soft);
}
tr:hover td { background: rgba(255, 244, 223, 0.78); }
tr:last-child td { border-bottom: 0; }

.progress {
  height: 10px;
  margin: var(--space-4) 0 var(--space-2);
  overflow: hidden;
  border-radius: var(--radius-pill);
  background: var(--color-surface-soft);
}
.progress span {
  display: block;
  height: 100%;
  max-width: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--color-primary), var(--color-accent));
}
iframe {
  width: 100%;
  min-height: 760px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  background: var(--color-surface);
  box-shadow: var(--shadow-card);
}

dialog {
  width: min(460px, calc(100vw - 32px));
  max-width: none;
  padding: 0;
  border: 0;
  border-radius: var(--radius-xl);
  background: transparent;
  color: var(--color-text);
}
dialog::backdrop {
  background: rgba(15, 23, 42, 0.24);
  backdrop-filter: blur(3px);
}
.dialog-card { padding: clamp(22px, 5vw, 32px); box-shadow: var(--shadow-modal); }
#loginMsg { min-height: 1.4em; font-size: var(--fs-sm); }
.footer {
  width: min(var(--container), calc(100% - 40px));
  margin: 0 auto var(--space-10);
  padding: var(--space-6) 0 0;
  border-top: 1px solid var(--color-border);
  color: var(--color-text-muted);
  font-size: var(--fs-sm);
}
.footer a { font-weight: var(--fw-bold); }


.admin-login-panel { max-width: 460px; margin: var(--space-16) auto; }
.admin-actions, .admin-nav-actions { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
form.card { box-shadow: var(--shadow-card); }
.panel > .tabs { position: static; margin-top: var(--space-3); }
ul { padding-left: var(--space-6); }
li + li { margin-top: var(--space-2); }
article.panel { max-width: var(--container-narrow); margin: var(--space-8) auto; }


.admin-chart-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4);
  flex-wrap: wrap;
}
.admin-range-tabs {
  position: static;
  justify-content: flex-start;
  margin: 0;
  padding: var(--space-2);
}
.admin-chart-filter {
  display: grid;
  grid-template-columns: repeat(3, minmax(180px, 1fr));
  gap: var(--space-4);
  align-items: end;
}
.admin-chart-filter input { margin-bottom: 0; }
.admin-chart-filter-action { padding-bottom: 1px; }
.admin-chart-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-4);
}
.admin-chart-card:nth-child(3) {
  grid-column: 1 / -1;
}
.admin-apex-chart {
  position: relative;
  width: 100%;
  min-height: 380px;
  margin: var(--space-2) 0 var(--space-4);
  border: 1px solid var(--color-divider);
  border-radius: calc(var(--radius-lg) + 2px);
  background: linear-gradient(180deg, rgba(255,255,255,0.92), var(--color-surface));
  box-shadow: var(--shadow-card);
  padding: var(--space-2);
}
.admin-apex-chart--donut {
  min-height: 400px;
}
.admin-chart-host {
  position: relative;
}
.admin-chart-canvas {
  display: block;
  width: 100%;
  max-width: 100%;
}
.admin-chart-card .muted {
  margin-top: calc(var(--space-2) * -1);
}
.admin-chart-tooltip {
  position: absolute;
  z-index: 3;
  min-width: 200px;
  max-width: min(320px, calc(100% - 16px));
  padding: 10px 12px;
  border-radius: 14px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-card);
  color: var(--color-text);
  pointer-events: none;
}
.admin-chart-tooltip[hidden] {
  display: none !important;
}
.admin-chart-tooltip-title {
  margin-bottom: 8px;
  padding-bottom: 7px;
  border-bottom: 1px solid var(--color-divider);
  font-size: 13px;
  font-weight: 800;
  color: var(--color-heading);
}
.admin-chart-tooltip-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  line-height: 1.45;
  color: var(--color-text-muted);
}
.admin-chart-tooltip-row + .admin-chart-tooltip-row {
  margin-top: 6px;
}
.admin-chart-tooltip-row strong {
  color: var(--color-heading);
}
.admin-chart-tooltip-swatch {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex: 0 0 10px;
}
.admin-chart-legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin: var(--space-2) 0 var(--space-4);
}
.admin-chart-legend--inline {
  margin: var(--space-2) 0 0;
}
.admin-chart-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 30px;
  padding: 5px 10px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  background: var(--color-surface-muted);
  font-size: var(--fs-xs);
  color: var(--color-text-muted);
}
.admin-chart-legend-item i {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex: 0 0 10px;
}
.admin-chart-legend-item b { color: var(--color-heading); }
@media (max-width: 820px) {
  .admin-chart-filter { grid-template-columns: 1fr; }
  .admin-chart-grid { grid-template-columns: 1fr; }
  .admin-chart-card:nth-child(3) { grid-column: auto; }
  .admin-apex-chart { min-height: 340px; }
}

@keyframes spin { to { transform: rotate(360deg); } }
@keyframes slide-in { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}
@media (max-width: 820px) {
  .container, .hero, .footer { width: min(100% - 32px, var(--container)); }
  .hero-grid { grid-template-columns: 1fr; padding: var(--space-6); }
  .top-nav, nav { align-items: flex-start; }
  .tabs { top: 0; }
}
@media (max-width: 560px) {
  body { font-size: 0.96rem; }
  .top-nav, nav { display: grid; }
  .user-area { justify-content: flex-start; }
  .hero-actions .btn, .dialog-actions .btn, .actions-row .btn { width: 100%; }
  .tabs { padding: var(--space-2); border-radius: var(--radius-lg); }
  .tabs button { padding-inline: var(--space-4); }
  .card { padding: var(--space-5); }
}



.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin: 0 0 var(--space-3);
  color: var(--color-primary-hover);
  font-size: var(--fs-xs);
  font-weight: var(--fw-extrabold);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.eyebrow::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-accent);
  box-shadow: 0 0 0 5px var(--color-accent-soft);
}
.top-nav { margin-bottom: var(--space-3); }
.hero { padding: var(--space-4) 0 var(--space-6); }
.hero-grid { align-items: center; }
.hero-copy h1 { max-width: 680px; }
.hero-copy p { font-size: var(--fs-base); }
.hero-actions { margin-top: var(--space-4); }
.earning-path {
  padding: var(--card-padding);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  background: rgba(255, 248, 237, 0.88);
  box-shadow: var(--shadow-card);
}
.earning-path h2 { font-size: var(--fs-xl); }
.earning-path ol {
  display: grid;
  gap: var(--space-3);
  margin: 0;
  padding: 0;
  list-style: none;
}
.earning-path li {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: var(--space-3);
  align-items: center;
  padding: var(--space-3);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
}
.earning-path li::before {
  counter-increment: earn-step;
  content: counter(earn-step);
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 12px;
  background: var(--color-primary-soft);
  color: var(--color-primary-hover);
  font-size: var(--fs-xs);
  font-weight: var(--fw-extrabold);
}
.earning-path ol { counter-reset: earn-step; }
.earning-path strong { display: block; }
.earning-path span { color: var(--color-text-muted); font-size: var(--fs-sm); }
.account-strip {
  display: grid;
  grid-template-columns: repeat(5, minmax(135px, 1fr)) auto;
  gap: var(--space-3);
  align-items: stretch;
  margin-top: var(--space-4);
  padding: var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  background: rgba(255, 248, 237, 0.94);
  box-shadow: var(--shadow-navbar);
  backdrop-filter: blur(12px);
}
.account-metric {
  min-width: 0;
  padding: var(--space-3) var(--space-4);
  border: 1px solid rgba(234, 223, 206, 0.78);
  border-radius: var(--radius-lg);
  background: linear-gradient(180deg, var(--color-surface), var(--color-surface-muted));
}
.account-metric span {
  display: block;
  color: var(--color-text-muted);
  font-size: var(--fs-xs);
  font-weight: var(--fw-extrabold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.account-metric strong {
  display: block;
  margin-top: 2px;
  overflow-wrap: anywhere;
  font-size: var(--fs-md);
}
.account-metric small { display: block; overflow-wrap: anywhere; }
.withdraw-strip-btn { align-self: center; min-width: 116px; }
.earning-sections { scroll-margin-top: var(--space-8); }
.tabs {
  position: sticky;
  top: var(--space-3);
  width: min(100%, var(--container));
  margin-inline: auto;
  z-index: var(--z-sticky);
}
.tabs button { white-space: normal; min-height: 42px; padding: 0 var(--space-4); }
.panel { scroll-margin-top: calc(var(--navbar-height) + var(--space-8)); }
.section-title {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: var(--space-4);
  margin-bottom: var(--space-4);
}
.section-title p { margin: 0; color: var(--color-text-muted); }
#content {
  min-width: 0;
}
#content > h3,
#content > .grid + h3,
#content > .table-scroll + h3,
#content > .empty-state + h3 {
  margin-top: var(--space-6);
}
.card, .panel, .account-strip, .earning-path { animation: coin-fade-up 360ms ease both; }
.card:hover { border-color: rgba(15, 139, 114, 0.30); }
.offer-card { min-height: 190px; }
@media (max-width: 820px) {
  .hero-grid { grid-template-columns: 1fr; }
  .top-nav { align-items: center; }
  .tabs { position: static; }
}
@media (max-width: 560px) {
  .container, .hero, .footer { width: min(100% - 28px, var(--container)); }
  .hero-grid { padding: var(--space-5); }
  .account-strip { grid-template-columns: 1fr; padding: var(--space-2); }
  .tabs { justify-content: center; padding: var(--space-2); }
  .tabs button { flex: 1 1 calc(50% - var(--space-2)); padding-inline: var(--space-3); }
}
.earning-path li::before { grid-row: 1 / span 2; }
.earning-path li strong, .earning-path li span { grid-column: 2; }

.site-footer {
  padding: 0;
  border: 0;
}
.footer-shell {
  display: grid;
  grid-template-columns: minmax(240px, 1fr) minmax(260px, auto);
  gap: var(--space-5);
  align-items: center;
  padding: var(--space-5);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  background: linear-gradient(135deg, rgba(255,253,248,0.97), rgba(255,241,207,0.92));
  box-shadow: var(--shadow-card);
}
.footer-copy strong {
  display: block;
  margin-bottom: var(--space-1);
  color: var(--color-heading);
  font-size: var(--fs-lg);
}
.footer-copy p {
  max-width: 620px;
  margin: 0;
}
.footer-legal {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-2);
  flex-wrap: wrap;
}
.footer-legal a {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 6px 12px;
  border: 1px solid rgba(15, 139, 114, 0.18);
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.68);
  color: var(--color-primary-hover);
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  box-shadow: 0 6px 16px rgba(88, 63, 28, 0.08);
}
.footer-legal a:hover {
  background: var(--color-primary-soft);
  text-decoration: none;
}
.legal-article {
  max-width: var(--container-narrow);
  margin: var(--space-8) auto;
}
.tab-badge {
  display: none;
  min-width: 18px;
  height: 18px;
  margin-left: 6px;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--color-primary);
  color: var(--color-surface);
  font-size: 11px;
  line-height: 18px;
  text-align: center;
}
.tab-badge.dot {
  display: inline-block;
  min-width: 9px;
  width: 9px;
  height: 9px;
  padding: 0;
  line-height: 9px;
}
.tab-badge.count {
  display: inline-block;
}
.tab-bonus-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 22px;
  margin-left: 2px;
  padding: 2px 10px;
  border-radius: 999px;
  background: #0f8b72;
  color: #fff;
  border: 1px solid #0f8b72;
  box-shadow: 0 10px 18px rgba(15, 139, 114, 0.25);
  font-size: 10px;
  font-weight: var(--fw-extrabold);
  letter-spacing: .02em;
  line-height: 1;
  white-space: nowrap;
}
.tabs button.active .tab-bonus-badge,
.tabs button[aria-selected="true"] .tab-bonus-badge,
.btn.primary .tab-bonus-badge {
  background: #fff;
  color: #0f8b72;
  border-color: #fff;
  box-shadow: 0 10px 18px rgba(255, 255, 255, 0.16);
}
.monetization-slot {
  display: none;
  width: 100%;
  margin: var(--space-3) 0;
  text-align: center;
}
.monetization-slot.has-ad {
  display: block;
}
.monetization-slot a,
.monetization-slot iframe,
.monetization-slot img {
  max-width: 100%;
}
.monetization-slot img {
  height: auto;
  border-radius: var(--radius-md);
}
.monetization-slot iframe {
  max-width: 100%;
  min-height: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
.in-content-ad,
.wallet-ad {
  margin: var(--space-4) 0;
}
.sticky-bottom {
  position: sticky;
  bottom: 0;
  z-index: 30;
  margin: 0;
  padding: 8px;
  background: rgba(255, 255, 255, 0.94);
  border-top: 1px solid var(--color-border);
}
.desktop-ad { display: none; }
.mobile-ad { display: none; }
@media (min-width: 821px) {
  .desktop-ad.has-ad { display: block; }
}
@media (max-width: 820px) {
  .footer-shell { grid-template-columns: 1fr; }
  .footer-legal { justify-content: flex-start; }
  .mobile-ad.has-ad { display: block; }
}

.login-captcha {
  margin-top: var(--space-4);
  margin-bottom: var(--space-3);
}




.empty-state.offer-provider-empty {
  gap: var(--space-2);
  border-style: solid;
  border-color: #fecaca;
  background: var(--color-error-soft);
  color: #991b1b;
}
.empty-state.offer-provider-empty p { margin: 0; }
.empty-state.offer-provider-empty small { font-weight: var(--fw-semibold); }



.history-summary .card p { margin-bottom: 0; }
.history-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  align-items: center;
  margin-top: var(--space-5);
}
.history-toolbar .btn {
  min-height: 36px;
  padding: 0 var(--space-4);
}
.history-toolbar .btn.active {
  border-color: var(--color-primary);
  background: var(--color-primary-soft);
  color: var(--color-heading);
}
.history-feed {
  display: grid;
  gap: var(--space-3);
  margin-top: var(--space-4);
}
.history-item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: var(--space-3);
  align-items: center;
  padding: var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: linear-gradient(180deg, var(--color-surface), var(--color-surface-muted));
}
.history-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--color-primary-soft);
  color: var(--color-primary-hover);
  font-weight: var(--fw-extrabold);
}
.history-main { min-width: 0; }
.history-title-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  align-items: center;
}
.history-title-row strong { color: var(--color-heading); }
.history-main small {
  display: block;
  margin-top: 2px;
  color: var(--color-text-muted);
  overflow-wrap: anywhere;
}
.history-note {
  margin: var(--space-2) 0 0;
  color: var(--color-text-muted);
  font-size: var(--fs-sm);
}
.history-amount {
  color: var(--color-primary);
  font-weight: var(--fw-bold);
  text-align: right;
  white-space: nowrap;
}
.history-item.is-positive .history-amount { color: var(--color-success); }
.history-item.is-negative .history-icon {
  background: var(--color-accent-soft);
  color: var(--color-accent);
}
.status-pill {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 2px 9px;
  border-radius: var(--radius-pill);
  background: var(--color-surface-soft);
  color: var(--color-text-muted);
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
}
@media (max-width: 640px) {
  .history-item {
    grid-template-columns: auto minmax(0, 1fr);
  }
  .history-amount {
    grid-column: 2;
    text-align: left;
  }
}

.leaderboard-grid {
  display: grid;
  gap: var(--space-5);
}
.leaderboard-card .section-title.compact {
  margin-bottom: var(--space-3);
  align-items: flex-start;
}
.leaderboard-meta,
.reward-chip-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin: var(--space-3) 0;
}
.leaderboard-meta span,
.reward-chip-list span,
.leaderboard-countdown {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  background: var(--color-surface-muted);
  padding: 7px 11px;
  color: var(--color-text-muted);
  font-size: var(--fs-sm);
}
.leaderboard-countdown {
  margin-bottom: var(--space-3);
  color: var(--color-primary-hover);
  font-weight: var(--fw-bold);
}
.leaderboard-list {
  display: grid;
  gap: var(--space-2);
  margin-top: var(--space-4);
}
.leaderboard-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: var(--space-3);
  align-items: center;
  padding: var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
}
.leaderboard-row.is-me {
  border-color: var(--color-primary);
  background: var(--color-primary-soft);
}
.leaderboard-row small {
  display: block;
  margin-top: 2px;
}
.leaderboard-rank {
  display: inline-grid;
  place-items: center;
  min-width: 42px;
  min-height: 36px;
  border-radius: var(--radius-md);
  background: var(--color-primary);
  color: #fff;
  font-weight: var(--fw-extrabold);
}

.advertiser-offer-card {
  border-color: rgba(15, 139, 114, 0.32);
  background: linear-gradient(180deg, rgba(255, 253, 248, 0.98), rgba(255, 244, 223, 0.92));
}
.advertiser-campaign-grid { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.advertiser-campaign-card .inline-form { margin-top: var(--space-3); }
.inline-form { display: inline-flex; gap: var(--space-2); align-items: center; margin: 0; }
.inline-form input { margin: 0; }
.advertiser-order-form .grid { margin-bottom: var(--space-3); }
.ptc-view-container { padding-top: var(--space-8); }
.ptc-view-shell { display: grid; gap: var(--space-4); }
.ptc-view-metrics .card { min-height: 120px; }
.ptc-ad-frame { min-height: min(72vh, 820px); }
.ptc-claim-bar { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
.ptc-claim-bar p { margin: 0; flex: 1 1 220px; }
.ptc-window-card { text-align: center; }
@media (min-width: 821px) {
  .account-strip { grid-template-columns: repeat(5, minmax(135px, 1fr)) auto; }
}

/* Secure sponsored PTC viewer */
body.ptc-view-body {
  min-height: 100vh;
  overflow: hidden;
  background:
    radial-gradient(circle at 8% -10%, rgba(15, 139, 114, 0.18), transparent 28rem),
    linear-gradient(180deg, #fffdf8 0%, #fff4df 100%);
}
.ptc-topbar {
  min-height: 78px;
  display: grid;
  grid-template-columns: minmax(190px, 1fr) auto minmax(90px, 1fr);
  gap: var(--space-4);
  align-items: center;
  padding: 12px clamp(14px, 3vw, 28px);
  border-bottom: 1px solid rgba(234, 223, 206, 0.95);
  background: rgba(255, 253, 248, 0.96);
  backdrop-filter: blur(18px);
  box-shadow: 0 10px 32px rgba(88, 63, 28, 0.10);
  position: relative;
  z-index: var(--z-sticky);
}
.ptc-brand {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  color: var(--color-heading);
  min-width: 0;
}
.ptc-brand:hover { text-decoration: none; }
.ptc-brand-mark {
  width: auto;
  align-items: center;
  justify-content: center;
}
.ptc-brand-icon {
  width: 30px;
  height: 30px;
  display: block;
}
.ptc-brand strong, .ptc-brand small { display: block; line-height: 1.15; }
.ptc-brand small { margin-top: 3px; color: var(--color-text-muted); font-size: var(--fs-xs); }
.ptc-topbar-center {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  flex-wrap: wrap;
}
.ptc-mini-stat {
  display: inline-flex;
  align-items: baseline;
  gap: 7px;
  min-height: 44px;
  padding: 8px 13px;
  border-radius: var(--radius-pill);
  border: 1px solid rgba(234, 223, 206, 0.9);
  background: rgba(255, 244, 223, 0.9);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.75);
}
.ptc-mini-stat small { color: var(--color-text-muted); font-size: var(--fs-xs); }
.ptc-mini-stat strong { color: var(--color-heading); }
.ptc-status-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  min-width: 112px;
  padding: 8px 14px;
  border-radius: var(--radius-pill);
  font-weight: var(--fw-bold);
  border: 1px solid var(--color-border);
  background: #fff;
  color: var(--color-text-muted);
}
.ptc-status-chip[data-state="running"] { color: #166534; background: var(--color-success-soft); border-color: #bbf7d0; }
.ptc-status-chip[data-state="paused"], .ptc-status-chip[data-state="waiting"] { color: #9a3412; background: var(--color-warning-soft); border-color: #fed7aa; }
.ptc-status-chip[data-state="ready"] { color: #0f766e; background: var(--color-info-soft); border-color: #bfdbfe; }
.ptc-status-chip[data-state="success"] { color: #166534; background: var(--color-success-soft); border-color: #86efac; }
.ptc-status-chip[data-state="error"] { color: #991b1b; background: var(--color-error-soft); border-color: #fecaca; }
.ptc-back-link { justify-self: end; }
.ptc-frame-stage {
  position: relative;
  height: calc(100vh - 78px);
  background: #fff;
}
.ptc-frame-stage .ptc-ad-frame {
  display: block;
  width: 100%;
  max-width: none;
  height: 100%;
  min-height: 0;
  border: 0;
  background: #fff;
}
.ptc-frame-overlay {
  position: absolute;
  inset: 0;
  z-index: var(--z-overlay);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-6);
  background: rgba(34, 7, 8, 0.18);
  backdrop-filter: blur(5px);
  pointer-events: none;
}
.ptc-frame-overlay[hidden] { display: none; }
.ptc-frame-overlay > div {
  max-width: 420px;
  text-align: center;
  padding: var(--space-6);
  border-radius: var(--radius-xl);
  background: rgba(255, 253, 248, 0.96);
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-modal);
}
.ptc-frame-overlay strong { display: block; color: var(--color-heading); font-size: var(--fs-xl); margin-bottom: var(--space-2); }
.ptc-frame-overlay span { color: var(--color-text-muted); }
.ptc-window-stage {
  min-height: calc(100vh - 78px);
  display: grid;
  place-items: center;
  padding-top: var(--space-8);
  padding-bottom: var(--space-8);
  overflow: auto;
}
.ptc-window-panel {
  width: min(880px, 100%);
  text-align: center;
  border-color: rgba(15, 139, 114, 0.22);
  background:
    radial-gradient(circle at top left, rgba(15, 139, 114, 0.10), transparent 24rem),
    rgba(255, 253, 248, 0.96);
}
.ptc-window-panel h1 { margin-bottom: var(--space-2); }
.ptc-window-actions {
  display: flex;
  justify-content: center;
  gap: var(--space-3);
  flex-wrap: wrap;
  margin: var(--space-6) 0 var(--space-3);
}
.ptc-claim-dialog .ptc-claim-card { max-width: 460px; text-align: center; }
.claim-complete-icon {
  width: 64px;
  height: 64px;
  margin: 0 auto var(--space-3);
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #fff;
  font-size: 34px;
  font-weight: var(--fw-extrabold);
  background: linear-gradient(135deg, var(--color-success), #22c55e);
  box-shadow: 0 16px 32px rgba(22, 163, 74, 0.20);
}
.claim-captcha-wrap {
  margin: var(--space-5) auto var(--space-3);
  display: flex;
  justify-content: center;
}
@media (max-width: 820px) {
  body.ptc-view-body { overflow: auto; }
  .ptc-topbar {
    grid-template-columns: 1fr;
    justify-items: stretch;
    min-height: auto;
  }
  .ptc-topbar-center { justify-content: flex-start; }
  .ptc-back-link { justify-self: stretch; text-align: center; }
  .ptc-frame-stage { height: calc(100vh - 198px); min-height: 520px; }
  .ptc-mini-stat, .ptc-status-chip { flex: 1 1 130px; }
}

.bonus-banner {
  margin: var(--space-4) 0;
  padding: var(--space-3) var(--space-4);
  border: 1px solid rgba(15, 139, 114, 0.18);
  border-radius: var(--radius-lg);
  background: linear-gradient(135deg, rgba(15, 139, 114, 0.08), rgba(255, 255, 255, 0.76));
  color: var(--color-text);
  box-shadow: var(--shadow-soft);
}
.offer-reward {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-2);
  margin: var(--space-3) 0;
}
.offer-reward .reward { margin: 0; }
.reward-inline-bonus {
  display: inline;
  margin-left: .45rem;
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  color: #d97706;
  opacity: 0.92;
  white-space: normal;
}
.reward-inline-bonus::before {
  content: "• ";
  color: rgba(88, 63, 28, 0.55);
}
.reward-bonus-pill,
.bonus-chip {
  display: inline-grid;
  justify-items: start;
  gap: .28rem;
  width: 100%;
  max-width: 100%;
  padding: .68rem .8rem;
  border-radius: 18px;
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  color: #0a6f5b;
  background: linear-gradient(135deg, rgba(255, 248, 237, 0.96), rgba(255, 241, 207, 0.96));
  border: 1px solid rgba(15, 139, 114, 0.16);
  box-shadow: 0 12px 24px rgba(88, 63, 28, 0.08);
  vertical-align: middle;
}
.reward-bonus-pill .bonus-kicker,
.bonus-chip .bonus-kicker {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  font-size: 10px;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: #d97706;
}
.reward-bonus-pill .bonus-kicker::before,
.bonus-chip .bonus-kicker::before {
  content: "+";
  display: inline-grid;
  place-items: center;
  width: 16px;
  height: 16px;
  border-radius: 999px;
  background: #0f8b72;
  color: #fff;
  font-size: 11px;
  font-weight: 900;
  box-shadow: 0 8px 14px rgba(15, 139, 114, 0.2);
}
.reward-bonus-pill .bonus-value,
.bonus-chip .bonus-value {
  display: block;
  max-width: 100%;
  color: #991b1b;
  font-size: var(--fs-sm);
  font-weight: var(--fw-extrabold);
  line-height: 1.35;
  overflow-wrap: anywhere;
}
.reward-bonus-pill .bonus-percent,
.bonus-chip .bonus-percent {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: max-content;
  max-width: 100%;
  padding: .22rem .55rem;
  border-radius: 999px;
  background: rgba(255, 6, 10, 0.1);
  color: #d97706;
  border: 1px solid rgba(15, 139, 114, 0.18);
  font-size: 10px;
  font-weight: var(--fw-extrabold);
  line-height: 1.1;
}
.referral-link-row {
  display: flex;
  gap: var(--space-2);
  align-items: stretch;
}
.referral-link-row input { flex: 1 1 auto; min-width: 0; }
.withdraw-card input[type="number"] { font-weight: var(--fw-bold); }
.withdraw-card-wide {
  width: 100%;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 0.75fr);
  gap: var(--space-4);
  align-items: end;
  border-style: dashed;
  background: linear-gradient(135deg, rgba(255, 6, 10, 0.045), rgba(255, 255, 255, 0.86));
  align-items: center;
}
.withdraw-card-wide h3 { margin-bottom: var(--space-2); }
.withdraw-input-row {
  display: grid;
  gap: var(--space-3);
}
.withdraw-input-row label {
  display: grid;
  gap: var(--space-2);
  font-weight: var(--fw-bold);
}
.withdraw-input-row .dialog-actions { justify-content: flex-start; }
@media (max-width: 760px) {
  .withdraw-card-wide { grid-template-columns: 1fr; }
  .withdraw-input-row .dialog-actions .btn { width: 100%; }
}

@media (max-width: 640px) {
  .referral-link-row { flex-direction: column; }
}


.leaderboard-row-main, .leaderboard-row-side { min-width: 0; }
.leaderboard-row-side { display: grid; justify-items: end; gap: 4px; text-align: right; }
.leaderboard-row-side small { margin: 0; color: var(--color-primary-hover); font-weight: var(--fw-bold); }
.leaderboard-reward-breakdown { color: var(--color-primary-hover); }
.reward-chip-list span strong { color: var(--color-heading); }

.advertise-summary-grid { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); margin-bottom: var(--space-4); }
.advertise-action-stack { display: grid; gap: var(--space-4); margin-bottom: var(--space-5); }
.advertise-action-card { width: 100%; }
.pricing-tier-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--space-4); margin-bottom: var(--space-5); }
.pricing-tier-list { display: grid; gap: var(--space-3); }
.pricing-tier-item { display: grid; gap: .35rem; padding: var(--space-3); border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-surface-muted); }
.pricing-tier-item strong { color: var(--color-heading); }
.manual-deposit-details { margin-bottom: var(--space-3); padding: var(--space-3); border: 1px solid rgba(15, 139, 114, 0.14); border-radius: var(--radius-lg); background: linear-gradient(180deg, rgba(255,250,250,.95), rgba(255,244,223,.9)); }
.manual-deposit-details h4 { margin: 0 0 var(--space-2); font-size: var(--fs-base); }
.manual-deposit-details ul { margin: 0; padding-left: 1.1rem; display: grid; gap: .45rem; }
.manual-deposit-details li { color: var(--color-text); }

.referral-stack { display: grid; gap: var(--space-4); }
.referral-summary-grid { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.referral-link-card { width: 100%; }
.copy {margin: var(--space-2) 0 var(--space-4);border-radius: var(--radius-md) !Important;}
.admin-time-ago {
  display: block;
  margin-top: 3px;
  color: var(--color-text-muted);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  white-space: nowrap;
}


/* ===== App theme overrides ===== */

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700;800&display=swap');
:root{
  --font-main:Poppins,Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --bg:#f6f8fc; --bg-white:#ffffff; --surface:#ffffff; --surface2:#f1f5f9; --surface3:#e8eef7;
  --text:#162033; --text-2:#334155; --muted:#64748b; --muted-l:#94a3b8;
  --primary:#0ea5e9; --primary-dark:#0284c7; --primary-soft:#e0f2fe; --secondary:#8b5cf6; --secondary-dark:#6d28d9;
  --success:#16a34a; --success-soft:#dcfce7; --warning:#d97706; --warning-soft:#fef3c7; --danger:#dc2626; --danger-soft:#fee2e2;
  --border:#e2e8f0; --border-l:#edf2f7; --focus:rgba(14,165,233,.32);
  --radius:18px; --radius-sm:12px; --radius-lg:26px; --pill:999px;
  --shadow:0 10px 30px rgba(15,23,42,.07); --shadow-md:0 16px 40px rgba(15,23,42,.11); --shadow-lg:0 24px 60px rgba(15,23,42,.16);
  --container:1180px; --topbar-h:68px; --transition:180ms ease;
}
*{box-sizing:border-box} html{scroll-behavior:smooth} body{margin:0;min-width:320px;font-family:var(--font-main);font-size:15px;line-height:1.62;color:var(--text);background:radial-gradient(circle at 5% 0%,rgba(14,165,233,.13),transparent 34rem),radial-gradient(circle at 92% 3%,rgba(139,92,246,.14),transparent 30rem),linear-gradient(180deg,#fbfdff 0%,var(--bg) 38%,#f8fbff 100%);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
a{color:var(--primary-dark);text-decoration:none} a:hover{text-decoration:none;color:var(--primary)} button,input,select,textarea{font:inherit} img,svg,iframe{max-width:100%} iframe{border:0} :where(a,button,input,select,textarea,[tabindex]):focus-visible{outline:3px solid var(--focus);outline-offset:3px} ::selection{background:var(--primary-soft);color:var(--text)}
h1,h2,h3,h4,h5,h6{margin:0 0 12px;color:var(--text);line-height:1.14;letter-spacing:-.035em} h1{font-size:clamp(2.15rem,6vw,4.7rem);font-weight:800} h2{font-size:clamp(1.55rem,3vw,2.25rem);font-weight:800} h3{font-size:1.05rem;font-weight:750} p{margin:0 0 14px}.muted,small{color:var(--muted)} strong{color:var(--text)} .reward{font-weight:800;color:var(--primary-dark)}
.container,.site-topnav .container{width:min(var(--container),calc(100% - 32px));margin-inline:auto}.skip-link{position:fixed;top:14px;left:14px;z-index:2000;transform:translateY(-160%);padding:8px 14px;border-radius:var(--pill);background:var(--text);color:#fff;font-weight:700}.skip-link:focus{transform:translateY(0)}
.announcement-bar{background:linear-gradient(90deg,var(--primary),var(--secondary));font-size:12px;font-weight:700;padding:7px 12px;text-align:center;color:#fff;letter-spacing:.01em}.site-topnav{background:rgba(255,255,255,.88);border-bottom:1px solid rgba(226,232,240,.86);box-shadow:0 4px 18px rgba(15,23,42,.055);position:sticky;top:0;z-index:100;backdrop-filter:blur(18px)}.site-topnav .container{display:flex;align-items:center;gap:16px;min-height:var(--topbar-h)}.topnav-brand{display:flex;align-items:center;gap:11px;flex-shrink:0;color:var(--text)}.topnav-brand:hover{color:var(--text)}.tn-icon{width:38px;height:38px;border-radius:12px;background:linear-gradient(135deg,var(--primary),var(--secondary));display:grid;place-items:center;color:#fff;font-size:17px;font-weight:800;box-shadow:0 12px 22px rgba(14,165,233,.25)}.tn-name{font-size:17px;font-weight:800;letter-spacing:-.04em}.topnav-menu{margin-left:auto;display:flex;align-items:center;gap:6px;flex-wrap:wrap;justify-content:flex-end}.topnav-link{display:inline-flex;align-items:center;gap:7px;padding:8px 10px;border-radius:10px;font-size:13px;font-weight:700;color:var(--muted);transition:background var(--transition),color var(--transition)}.topnav-link:hover,.topnav-link.active{background:var(--primary-soft);color:var(--primary-dark)}.topnav-btn,.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:42px;padding:10px 18px;border:0;border-radius:13px;font-size:14px;font-weight:800;cursor:pointer;transition:transform var(--transition),box-shadow var(--transition),background var(--transition),opacity var(--transition);text-decoration:none}.topnav-btn,.btn.primary{background:linear-gradient(135deg,var(--primary),var(--secondary));color:#fff;box-shadow:0 10px 24px rgba(14,165,233,.24)}.topnav-btn:hover,.btn.primary:hover{transform:translateY(-1px);color:#fff;box-shadow:0 14px 30px rgba(14,165,233,.32)}.btn.ghost{background:var(--surface2);color:var(--text-2);border:1px solid var(--border);box-shadow:none}.btn.ghost:hover,.btn.ghost.active{background:#fff;color:var(--primary-dark);border-color:#bae6fd}.btn:disabled,.btn.primary:disabled{cursor:not-allowed;transform:none;box-shadow:none;background:var(--surface3)!important;color:var(--muted-l)!important}.btn.compact{min-height:36px;padding:7px 12px;font-size:12px}.mobile-menu-check,.mobile-menu-toggle{display:none}
.guest-hero{position:relative;padding:52px 0 46px;border-bottom:1px solid var(--border);text-align:center;overflow:hidden}.guest-hero:before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 22% 20%,rgba(14,165,233,.16),transparent 22rem),radial-gradient(circle at 80% 30%,rgba(139,92,246,.16),transparent 24rem);pointer-events:none}.guest-hero .container{position:relative}.hero-badge{display:inline-flex;align-items:center;gap:7px;margin-bottom:16px;padding:9px 15px;border-radius:var(--pill);background:var(--success-soft);border:1px solid #bbf7d0;color:#15803d;font-size:12px;font-weight:800;letter-spacing:.03em}.guest-hero p{max-width:760px;margin:0 auto 10px;color:var(--muted);font-size:clamp(.98rem,2vw,1.14rem)}.hero-wallet{font-weight:800;color:var(--primary-dark)!important}.hero-actions{display:flex;justify-content:center;gap:12px;flex-wrap:wrap;margin-top:24px}.hero-mini{display:flex;justify-content:center;gap:10px;flex-wrap:wrap;margin-top:20px}.coin-pill{display:inline-flex;align-items:center;gap:7px;padding:7px 13px;border-radius:var(--pill);background:#fff;border:1px solid var(--border);box-shadow:var(--shadow);font-size:12px;font-weight:750;color:var(--text-2)}
.stats-strip{background:rgba(255,255,255,.92);border-bottom:1px solid var(--border)}.account-strip{width:100%;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:0}.account-metric{padding:22px 18px;text-align:center;border-right:1px solid var(--border);min-width:0}.account-metric:last-of-type{border-right:0}.account-metric span{display:block;font-size:11px;text-transform:uppercase;letter-spacing:.09em;font-weight:800;color:var(--muted);margin-bottom:5px}.account-metric strong{display:block;font-size:clamp(17px,2.4vw,24px);font-weight:800;color:var(--primary-dark);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.account-metric small{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.withdraw-strip-btn{align-self:center;justify-self:center;margin:12px 8px;white-space:nowrap}.stats-strip .container{padding:0}
.monetization-slot{display:block;text-align:center;margin:0 auto}.monetization-slot:not(.has-ad){display:none}.top-banner{margin:20px auto}.top-banner.has-ad,.in-content-ad.has-ad,.wallet-ad.has-ad{padding:10px;border-radius:var(--radius);background:#fff;border:1px solid var(--border);box-shadow:var(--shadow);overflow:hidden}.sticky-bottom.has-ad{position:fixed;left:50%;bottom:10px;transform:translateX(-50%);z-index:180;width:min(96vw,728px);padding:6px;border-radius:14px;background:#fff;box-shadow:var(--shadow-lg)}.desktop-ad{display:block}.mobile-ad{display:none}
.notice,.bonus-banner,.state-card,.empty-state,.loading,.error-state,.success-state{padding:16px 18px;border-radius:var(--radius-sm);background:#fff;border:1px solid var(--border);box-shadow:var(--shadow);margin-bottom:16px}.bonus-banner{background:linear-gradient(135deg,#f0fdf4,#ecfeff);border-color:#bbf7d0}.error-state{background:var(--danger-soft);border-color:#fecaca;color:#991b1b}.success-state{background:var(--success-soft);border-color:#bbf7d0;color:#166534}.empty-state,.loading{color:var(--muted);text-align:center}.loading:before{content:"";display:inline-block;width:12px;height:12px;border:2px solid #bae6fd;border-top-color:var(--primary);border-radius:50%;margin-right:8px;vertical-align:-2px;animation:spin .7s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}
.feature-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin:22px 0 22px}.feature-card{padding:20px;border-radius:var(--radius);background:#fff;border:1px solid var(--border);box-shadow:var(--shadow);transition:transform var(--transition),box-shadow var(--transition),border-color var(--transition)}.feature-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-md);border-color:#bae6fd}.feature-card-icon{width:42px;height:42px;border-radius:13px;display:grid;place-items:center;background:linear-gradient(135deg,var(--primary-soft),#f5f3ff);font-size:22px}.feature-card h3{margin-bottom:6px}.feature-card p{font-size:13px;color:var(--muted);margin:0}
.earning-sections{margin:22px 0}.tabs{display:flex;gap:8px;flex-wrap:wrap;align-items:center;padding:10px;background:#fff;border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);position:sticky;top:calc(var(--topbar-h) + 8px);z-index:80}.tabs button{appearance:none;border:0;background:transparent;color:var(--muted);font-size:13px;font-weight:800;border-radius:12px;padding:10px 13px;cursor:pointer;transition:background var(--transition),color var(--transition),transform var(--transition)}.tabs button:hover{background:var(--surface2);color:var(--text)}.tabs button.active{background:linear-gradient(135deg,var(--primary),var(--secondary));color:#fff;box-shadow:0 8px 20px rgba(14,165,233,.22)}.tab-badge,.tab-bonus-badge{display:inline-flex;align-items:center;justify-content:center;min-width:18px;height:18px;padding:0 5px;border-radius:var(--pill);font-size:10px;font-weight:800;background:var(--danger);color:#fff;margin-left:4px}.tab-bonus-badge{background:var(--success);color:#fff}.tab-badge:empty{display:none}.tab-badge.dot{min-width:10px;width:10px;height:10px;padding:0}
.panel{background:rgba(255,255,255,.82);border:1px solid var(--border);border-radius:var(--radius-lg);box-shadow:var(--shadow);padding:clamp(18px,3vw,28px);margin:18px 0 34px;min-height:260px}.section-title{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:18px}.section-title p{color:var(--muted);margin:0}.section-title.compact{margin-bottom:12px}.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(245px,1fr));gap:16px}.card{border-radius:var(--radius);padding:20px;background:#fff;border:1px solid var(--border);box-shadow:var(--shadow);min-width:0;transition:transform var(--transition),box-shadow var(--transition),border-color var(--transition)}.card:hover{transform:translateY(-2px);box-shadow:var(--shadow-md);border-color:#bae6fd}.offer-card h3{padding-right:4px}.offer-card .muted{font-size:13px}.offer-reward{padding:12px 14px;border-radius:14px;background:var(--primary-soft);border:1px solid #bae6fd;margin:12px 0}.offer-reward p{margin:0}.advertiser-offer-card{border-color:#c4b5fd}.offerwallme-offer-card{border-color:#bae6fd}.status-pill{display:inline-flex;align-items:center;padding:5px 10px;border-radius:var(--pill);background:var(--surface2);border:1px solid var(--border);font-size:11px;font-weight:800;color:var(--text-2)}
.table-scroll{overflow:auto;border-radius:var(--radius);border:1px solid var(--border);background:#fff}table{width:100%;border-collapse:collapse;font-size:13px}th,td{padding:12px 14px;text-align:left;border-bottom:1px solid var(--border-l);vertical-align:top}th{background:var(--surface2);font-size:11px;text-transform:uppercase;letter-spacing:.07em;color:var(--muted);font-weight:800}tr:last-child td{border-bottom:0}.progress{height:11px;border-radius:999px;background:var(--surface2);overflow:hidden;border:1px solid var(--border);margin:12px 0}.progress span{display:block;height:100%;background:linear-gradient(90deg,var(--primary),var(--secondary));border-radius:inherit}
.wallet-summary-grid,.referral-summary-grid,.advertise-summary-grid{grid-template-columns:repeat(auto-fit,minmax(180px,1fr))}.withdraw-card-wide{display:grid;grid-template-columns:minmax(0,1fr) minmax(260px,.9fr);gap:16px;align-items:end}.withdraw-input-row{display:flex;gap:12px;align-items:flex-end;flex-wrap:wrap}.history-summary{grid-template-columns:repeat(auto-fit,minmax(160px,1fr));margin-bottom:16px}.history-toolbar{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:16px}.history-feed{display:grid;gap:12px}.history-item{display:grid;grid-template-columns:44px minmax(0,1fr) auto;gap:12px;align-items:center;padding:15px;border-radius:var(--radius);background:#fff;border:1px solid var(--border);box-shadow:var(--shadow)}.history-icon{width:42px;height:42px;border-radius:14px;display:grid;place-items:center;background:var(--primary-soft);font-weight:800;color:var(--primary-dark)}.history-item.is-negative .history-icon{background:var(--warning-soft);color:var(--warning)}.history-title-row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.history-amount{font-weight:800;color:var(--success);white-space:nowrap}.history-item.is-negative .history-amount{color:var(--warning)}.history-note{margin:5px 0 0;color:var(--muted);font-size:12px}.referral-link-row{display:flex;gap:10px}.referral-link-row input{flex:1}.leaderboard-grid{display:grid;gap:18px}.leaderboard-meta{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:12px}.leaderboard-meta span,.leaderboard-countdown{padding:8px 11px;border-radius:12px;background:var(--surface2);font-size:12px;color:var(--muted);font-weight:700}.leaderboard-list{display:grid;gap:9px}.leaderboard-row{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:12px;align-items:center;padding:12px;border-radius:15px;background:var(--surface);border:1px solid var(--border)}.leaderboard-row.is-me{background:linear-gradient(135deg,#ecfeff,#f5f3ff);border-color:#7dd3fc}.leaderboard-rank{width:38px;height:38px;border-radius:12px;display:grid;place-items:center;background:linear-gradient(135deg,var(--primary),var(--secondary));color:#fff;font-weight:800}.leaderboard-row-main{display:grid}.leaderboard-row-main small,.leaderboard-row-side small{color:var(--muted)}.leaderboard-row-side{text-align:right}.leaderboard-row-side b{display:block;color:var(--primary-dark)}
form label,label{display:grid;gap:7px;font-size:13px;font-weight:800;color:var(--text-2);margin-bottom:12px}input,select,textarea{width:100%;min-height:44px;border:1px solid var(--border);border-radius:12px;padding:10px 12px;background:#fff;color:var(--text);transition:border var(--transition),box-shadow var(--transition)}textarea{resize:vertical}input:focus,select:focus,textarea:focus{outline:0;border-color:#7dd3fc;box-shadow:0 0 0 4px var(--focus)}.inline-form{display:flex;gap:10px;flex-wrap:wrap;align-items:end}.dialog-actions,.actions-row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}.dialog-card{width:min(460px,calc(100vw - 28px));padding:24px;border:0;border-radius:var(--radius-lg);background:#fff;box-shadow:var(--shadow-lg)}dialog{border:0;border-radius:var(--radius-lg);padding:0;background:transparent}dialog::backdrop{background:rgba(15,23,42,.55);backdrop-filter:blur(4px)}.login-captcha{margin:14px 0}.toast-stack{position:fixed;right:18px;bottom:18px;z-index:2200;display:grid;gap:10px;width:min(360px,calc(100vw - 36px))}.toast{padding:13px 16px;border-radius:15px;background:#fff;border:1px solid var(--border);box-shadow:var(--shadow-lg);font-weight:700;transition:opacity var(--transition),transform var(--transition)}.toast.success{border-color:#bbf7d0;background:#f0fdf4;color:#166534}.toast.error{border-color:#fecaca;background:#fef2f2;color:#991b1b}.site-footer{border-top:1px solid var(--border);background:#fff;margin-top:28px}.footer-shell{width:min(var(--container),calc(100% - 32px));margin:auto;padding:28px 0;display:flex;gap:20px;align-items:center;justify-content:space-between;flex-wrap:wrap}.footer-copy p{margin:4px 0 0;color:var(--muted);font-size:13px}.footer-legal{display:flex;gap:12px;flex-wrap:wrap}.footer-legal a{font-weight:700;font-size:13px;color:var(--muted)}
.app-layout{display:grid;grid-template-columns:250px minmax(0,1fr);gap:18px;margin:22px 0 34px}.side-panel{position:sticky;top:calc(var(--topbar-h) + 16px);align-self:start;background:#fff;border:1px solid var(--border);border-radius:var(--radius-lg);box-shadow:var(--shadow);padding:14px}.side-title{padding:8px 10px 12px;font-weight:800;color:var(--text);font-size:13px;text-transform:uppercase;letter-spacing:.08em}.section-nav{display:grid;gap:6px}.section-nav a{display:flex;align-items:center;gap:10px;padding:11px 12px;border-radius:13px;font-weight:800;font-size:13px;color:var(--muted);transition:background var(--transition),color var(--transition),transform var(--transition)}.section-nav a:hover{background:var(--surface2);color:var(--text)}.section-nav a.active{background:linear-gradient(135deg,var(--primary),var(--secondary));color:#fff;box-shadow:0 10px 20px rgba(14,165,233,.22)}.earncoins-multi .panel{margin:0;min-height:520px}.page-shell-title{display:none}.mini-nav{display:none}
@media(max-width:1050px){.feature-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.account-strip{grid-template-columns:repeat(2,minmax(0,1fr))}.account-metric{border-bottom:1px solid var(--border)}.withdraw-strip-btn{grid-column:1/-1}.app-layout{grid-template-columns:1fr}.side-panel{position:relative;top:auto}.section-nav{grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}.earncoins-multi .panel{min-height:320px}}
@media(max-width:820px){.mobile-menu-toggle{display:inline-flex;margin-left:auto}.topnav-menu{display:none;flex-basis:100%;width:100%;justify-content:flex-start;padding:0 0 12px}.mobile-menu-check:checked ~ .topnav-menu{display:flex}.site-topnav .container{flex-wrap:wrap}.desktop-ad{display:none}.mobile-ad{display:block}.guest-hero{padding:40px 0 34px}.tabs{position:relative;top:auto;overflow:auto;flex-wrap:nowrap}.tabs button{white-space:nowrap}.feature-grid{grid-template-columns:1fr}.withdraw-card-wide{grid-template-columns:1fr}.history-item{grid-template-columns:38px minmax(0,1fr);align-items:start}.history-amount{grid-column:2}.leaderboard-row{grid-template-columns:auto minmax(0,1fr)}.leaderboard-row-side{grid-column:2;text-align:left}.footer-shell{align-items:flex-start}.referral-link-row{flex-direction:column}}
@media(max-width:560px){.container,.site-topnav .container,.footer-shell{width:min(100% - 20px,var(--container))}.account-strip{grid-template-columns:1fr}.account-metric{border-right:0}.panel{padding:14px;border-radius:20px}.grid{grid-template-columns:1fr}.topnav-btn,.btn{width:100%}.hero-actions .btn{width:auto}.section-title{align-items:flex-start;flex-direction:column}.inline-form{display:grid}.coin-pill{font-size:11px}.side-panel{padding:10px;border-radius:20px}.section-nav{grid-template-columns:1fr}}
/* Admin and legacy component compatibility */
.error{color:var(--danger);font-weight:700}.success{color:var(--success);font-weight:700}.warning{color:var(--warning);font-weight:700}.admin-login-panel{max-width:460px;margin:64px auto}.admin-actions,.admin-nav-actions{display:flex;align-items:center;gap:12px;flex-wrap:wrap}.mini-form{display:flex;gap:10px;align-items:end;flex-wrap:wrap}.panel>.tabs{position:static;margin-top:12px}ul{padding-left:22px}li+li{margin-top:8px}article.panel{max-width:900px;margin:32px auto}.admin-chart-header{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;flex-wrap:wrap}.admin-range-tabs{position:static;justify-content:flex-start;margin:0;padding:8px}.admin-chart-filter{display:grid;grid-template-columns:repeat(3,minmax(180px,1fr));gap:16px;align-items:end}.admin-chart-filter input{margin-bottom:0}.admin-chart-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}.admin-chart-card:nth-child(3){grid-column:1/-1}.admin-apex-chart{position:relative;width:100%;min-height:380px;margin:8px 0 16px;border:1px solid var(--border);border-radius:20px;background:#fff;box-shadow:var(--shadow);padding:8px}.admin-apex-chart--donut{min-height:400px}.admin-chart-host{position:relative}.admin-chart-canvas{display:block;width:100%;max-width:100%}.admin-chart-tooltip{position:absolute;z-index:3;min-width:200px;max-width:min(320px,calc(100% - 16px));padding:10px 12px;border-radius:14px;background:#fff;border:1px solid var(--border);box-shadow:var(--shadow);color:var(--text);pointer-events:none}.admin-chart-tooltip[hidden]{display:none!important}.admin-chart-tooltip-title{margin-bottom:8px;padding-bottom:7px;border-bottom:1px solid var(--border);font-size:13px;font-weight:800;color:var(--text)}.admin-chart-tooltip-row{display:flex;align-items:center;gap:8px;font-size:12px;line-height:1.45;color:var(--muted)}.admin-chart-tooltip-row+.admin-chart-tooltip-row{margin-top:6px}.admin-chart-tooltip-row strong{color:var(--text)}.admin-chart-tooltip-swatch{width:10px;height:10px;border-radius:50%;flex:0 0 10px}.admin-chart-legend{display:flex;flex-wrap:wrap;gap:8px;margin:8px 0 16px}.admin-chart-legend--inline{margin:8px 0 0}.admin-chart-legend-item{display:inline-flex;align-items:center;gap:7px;min-height:30px;padding:5px 10px;border:1px solid var(--border);border-radius:var(--pill);background:var(--surface2);font-size:12px;color:var(--muted)}.admin-chart-legend-item i{width:10px;height:10px;border-radius:50%;flex:0 0 10px}.admin-chart-legend-item b{color:var(--text)}.admin-time-ago{display:block;margin-top:3px;color:var(--muted);font-size:12px;font-weight:700;white-space:nowrap}.advertise-action-stack{display:grid;gap:16px;margin-bottom:20px}.advertise-action-card{width:100%}.pricing-tier-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px;margin-bottom:20px}.pricing-tier-list{display:grid;gap:12px}.pricing-tier-item{display:grid;gap:6px;padding:13px;border:1px solid var(--border);border-radius:var(--radius);background:var(--surface2)}.manual-deposit-details{margin-bottom:14px;padding:14px;border:1px solid #bae6fd;border-radius:var(--radius);background:linear-gradient(180deg,#f8fdff,#f5f3ff)}.manual-deposit-details h4{margin:0 0 8px;font-size:15px}.manual-deposit-details ul{margin:0;padding-left:18px;display:grid;gap:7px}.referral-stack{display:grid;gap:16px}.copy{margin:8px 0 16px}.advertiser-campaign-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px}.advertiser-order-form{display:grid;gap:14px}.email-toggle{display:inline-flex;align-items:center;gap:8px}@media(max-width:820px){.admin-chart-filter,.admin-chart-grid{grid-template-columns:1fr}.admin-chart-card:nth-child(3){grid-column:auto}.admin-apex-chart{min-height:340px}}
/* Deep recheck polish for remaining dynamic classes */
.earncoins-shell{min-height:100vh;background:var(--bg, #f8fafc);color:var(--text, #0f172a)}
.pricing-tier-card{display:grid;gap:12px}
.admin-chart-summary{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin:10px 0 0;color:var(--muted, #64748b);font-size:13px;font-weight:700}

/* ===== Visitor-first frontend theme =====
   These overrides sit after the base app theme so the public shell keeps one consistent palette. */
:root{
  --bg:#f0f9ff;
  --bg-white:#ffffff;
  --surface:#ffffff;
  --surface2:#e0f2fe;
  --surface3:#ece7ff;
  --text:#201338;
  --text-2:#3c2a5d;
  --muted:#716585;
  --muted-l:#978eaa;
  --primary:#0ea5e9;
  --primary-dark:#0284c7;
  --primary-soft:#e0f2fe;
  --secondary:#ec4899;
  --secondary-dark:#be185d;
  --success:#16a34a;
  --success-soft:#ecfdf3;
  --warning:#d97706;
  --warning-soft:#fff7ed;
  --danger:#dc2626;
  --danger-soft:#fef2f2;
  --border:#bae6fd;
  --border-l:#ebe6fb;
  --focus:rgba(124,58,237,.28);
  --shadow:0 10px 28px rgba(67,38,122,.08);
  --shadow-md:0 16px 42px rgba(67,38,122,.13);
  --shadow-lg:0 26px 70px rgba(35,18,70,.18);
  --container:1180px;
}
body.earncoins-shell{
  color:var(--text);
  background:
    radial-gradient(circle at 9% -10%, rgba(124,58,237,.16), transparent 30rem),
    radial-gradient(circle at 88% 0%, rgba(236,72,153,.13), transparent 28rem),
    linear-gradient(180deg,#fff 0%,#faf8ff 30%,var(--bg) 100%);
}
.earncoins-shell .container,
.earncoins-shell .site-topnav .container,
.earncoins-shell .footer-shell{
  width:min(var(--container),calc(100% - 32px));
}
.site-topnav .container {
  padding-bottom: 0px !important;
}
.announcement-bar{
  background:linear-gradient(90deg,var(--primary-dark),var(--primary),var(--secondary));
  color:#fff;
}
.site-topnav{
  background:rgba(255,255,255,.91);
  border-bottom:1px solid rgba(222,214,245,.9);
  box-shadow:0 6px 22px rgba(67,38,122,.07);
}
.topnav-brand,.topnav-brand:hover{color:var(--text)}
.tn-icon{
  background:#fff;
  border:1px solid var(--border);
  overflow:hidden;
  box-shadow:0 10px 22px rgba(124,58,237,.16);
}
.tn-logo-img{width:28px;height:28px;display:block;object-fit:contain}
.topnav-link:hover,.topnav-link.active{background:var(--primary-soft);color:var(--primary-dark)}
.topnav-btn,.btn.primary{
  background:linear-gradient(135deg,var(--primary),var(--secondary));
  box-shadow:0 12px 25px rgba(124,58,237,.23);
}
.btn.ghost{background:rgba(255,255,255,.76);color:var(--primary-dark);border:1px solid var(--border)}
.btn.ghost:hover,.btn.ghost.active{background:var(--primary-soft);border-color:#c4b5fd;color:var(--primary-dark)}
.guest-hero{
  padding:26px 0 20px;
  text-align:center;
  border-bottom:0;
  overflow:hidden;
}
.guest-hero:before{
  background:
    radial-gradient(circle at 20% 15%, rgba(124,58,237,.11), transparent 22rem),
    radial-gradient(circle at 82% 20%, rgba(236,72,153,.10), transparent 22rem);
}
.hero-compact-shell{
  padding:22px 22px 18px;
  border:1px solid rgba(222,214,245,.95);
  border-radius:24px;
  background:linear-gradient(135deg,rgba(255,255,255,.94),rgba(246,242,255,.91));
  box-shadow:var(--shadow);
}
.guest-hero h1{font-size:clamp(1.75rem,3.5vw,3rem);margin-bottom:8px;letter-spacing:-.045em}
.guest-hero p{max-width:720px;font-size:clamp(.92rem,1.6vw,1.05rem);margin-bottom:8px;color:var(--muted)}
.hero-wallet{color:var(--text-2)!important;font-weight:650}
.hero-actions{margin-top:14px;gap:10px}
.hero-actions .btn{min-height:38px;padding:8px 16px;border-radius:12px;font-size:13px}
.hero-mini{margin-top:14px;gap:8px}
.coin-pill{padding:5px 10px;font-size:11px;background:#fff;color:var(--text-2);border-color:var(--border);box-shadow:0 8px 18px rgba(67,38,122,.06)}
.stats-strip{
  background:transparent;
  border-bottom:0;
  padding:0 0 16px;
}
.stats-strip .container{padding:0}
.account-strip{
  width:min(var(--container),calc(100% - 32px));
  margin:0 auto;
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:0;
  overflow:hidden;
  border:1px solid var(--border);
  border-radius:22px;
  background:linear-gradient(135deg,rgba(255,255,255,.96),rgba(247,244,255,.92));
  box-shadow:var(--shadow);
}
.account-metric{
  padding:14px 12px;
  border-right:1px solid var(--border-l);
  text-align:center;
}
.account-metric:last-of-type{border-right:0}
.account-metric span{font-size:10px;color:var(--muted);margin-bottom:2px;letter-spacing:.08em}
.account-metric strong{font-size:clamp(14px,1.75vw,19px);color:var(--primary-dark)}
.account-metric small{font-size:11px;color:var(--muted)}
main.container{padding-top:0;padding-bottom:24px}
.top-banner{margin:8px auto 12px}
.tabs{
  position:relative;
  top:auto;
  margin:0 0 12px;
  padding:8px;
  border-color:var(--border);
  background:rgba(255,255,255,.92);
  box-shadow:var(--shadow);
}
.tabs button{
  min-height:36px;
  padding:7px 11px;
  font-size:12px;
  color:var(--text-2);
  border-color:transparent;
}
.tabs button:hover,.tabs button.active,.tabs button[aria-selected="true"]{
  background:linear-gradient(135deg,var(--primary-soft),#fdf2f8);
  color:var(--primary-dark);
  border-color:#c4b5fd;
}
.panel{
  padding:14px;
  border-color:var(--border);
  background:rgba(255,255,255,.91);
  box-shadow:var(--shadow);
}
.section-title{margin-bottom:10px}
.section-title h2{font-size:clamp(1.2rem,2.5vw,1.65rem)}
.section-title p{font-size:13px;color:var(--muted);margin-bottom:0}
.grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(168px,1fr));
  gap:12px;
  align-items:stretch;
}
.grid>*{height:100%;min-width:0}
.card{
  border-color:var(--border);
  background:#fff;
  box-shadow:0 8px 22px rgba(67,38,122,.07);
}
.card:hover{border-color:#c4b5fd;box-shadow:var(--shadow-md)}
.offer-card{
  min-height:226px;
  height:100%;
  display:flex;
  flex-direction:column;
  gap:9px;
  padding:14px;
  border-radius:18px;
  position:relative;
  overflow:hidden;
}
.offer-card:before{
  content:"";
  position:absolute;
  inset:0 0 auto;
  height:4px;
  background:linear-gradient(90deg,var(--primary),var(--secondary));
}
.offer-card-head{display:flex;justify-content:space-between;gap:8px;align-items:flex-start;min-width:0}
.offer-card h3{font-size:.95rem;line-height:1.25;margin:0;color:var(--text);overflow-wrap:anywhere}
.offer-provider{
  flex:0 0 auto;
  max-width:88px;
  padding:3px 7px;
  border-radius:999px;
  background:var(--primary-soft);
  color:var(--primary-dark);
  border:1px solid #d8b4fe;
  font-size:10px;
  font-weight:800;
  line-height:1.1;
  text-align:center;
}
.offer-description{
  display:-webkit-box;
  -webkit-line-clamp:3;
  -webkit-box-orient:vertical;
  overflow:hidden;
  min-height:58px;
  margin:0;
  font-size:12px;
  line-height:1.55;
}
.offer-stats{display:grid;gap:7px;margin-top:auto}
.offer-stat{
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:34px;
  padding:7px 8px;
  border-radius:12px;
  text-align:center;
  font-size:12px;
  font-weight:800;
  line-height:1.25;
  border:1px solid var(--border);
  background:var(--surface2);
  overflow-wrap:anywhere;
}
.offer-stat.reward{color:var(--primary-dark);background:linear-gradient(135deg,#f5f3ff,#fff);border-color:#ddd6fe}
.offer-stat.duration{color:var(--text-2);background:#fff}
.offer-start.btn{width:100%;min-height:38px;margin-top:2px;align-self:stretch;border-radius:12px;font-size:12px;border-top:1px solid rgba(255,255,255,.45)}
.offer-reward{background:var(--primary-soft);border-color:#ddd6fe}
.advertiser-offer-card{border-color:#c4b5fd}
.offerwallme-offer-card{border-color:#f9a8d4}
.compact-feature-grid{
  margin-top:16px;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:10px;
}
.feature-card{
  display:flex;
  gap:10px;
  align-items:center;
  min-height:auto;
  padding:12px;
  border-color:var(--border);
  background:rgba(255,255,255,.92);
  box-shadow:0 8px 18px rgba(67,38,122,.06);
}
.feature-card-icon{
  flex:0 0 auto;
  width:34px;
  height:34px;
  border-radius:12px;
  display:grid;
  place-items:center;
  background:linear-gradient(135deg,var(--primary-soft),#fdf2f8);
  color:var(--primary-dark);
}
.feature-card h3{font-size:.9rem;margin:0 0 3px;color:var(--text)}
.feature-card p{font-size:11px;line-height:1.45;margin:0;color:var(--muted)}
.site-footer{
  margin-top:20px;
  border-top:1px solid var(--border);
  background:linear-gradient(180deg,rgba(255,255,255,.98),rgba(246,242,255,.96));
  box-shadow:0 -8px 24px rgba(67,38,122,.04);
}
.footer-shell{padding:18px 0;gap:16px}
.footer-copy strong{display:inline-flex;align-items:center;gap:8px;color:var(--text)}
.footer-copy p{font-size:12px;color:var(--muted)}
.footer-legal a{color:var(--primary-dark);font-size:12px;background:#fff;border:1px solid var(--border);border-radius:999px;padding:5px 10px}
.table-scroll{border-color:var(--border);background:#fff}
th{background:var(--surface2);color:var(--text-2)}
@media(min-width:1380px){.grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}}
@media(max-width:1100px){
  .account-strip{grid-template-columns:repeat(3,minmax(0,1fr))}
  .account-metric{border-bottom:1px solid var(--border-l)}
  .compact-feature-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .grid{grid-template-columns:repeat(auto-fill,minmax(175px,1fr))}
}
@media(max-width:760px){
  .guest-hero{padding:18px 0 12px}
  .hero-compact-shell{padding:18px 14px;border-radius:20px}
  .hero-actions .btn{width:auto;flex:1 1 180px}
  .account-strip{grid-template-columns:repeat(2,minmax(0,1fr));width:min(100% - 20px,var(--container))}
  .account-metric:nth-child(2n){border-right:0}
  .tabs{overflow:auto;justify-content:flex-start;flex-wrap:nowrap}.tabs button{white-space:nowrap;flex:0 0 auto}
  .grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .offer-card{min-height:220px;padding:12px}
  .compact-feature-grid{grid-template-columns:1fr}
}
@media(max-width:520px){
  .earncoins-shell .container,.earncoins-shell .site-topnav .container,.earncoins-shell .footer-shell{width:min(100% - 20px,var(--container))}
  .account-strip,.grid{grid-template-columns:1fr}
  .account-metric{border-right:0}
  .panel{padding:10px;border-radius:18px}
  .offer-description{min-height:auto}
}

/* FO5 card readability refinement: keep 5 neat columns on normal desktop, allow 6 only on very wide screens. */
.grid{grid-template-columns:repeat(auto-fill,minmax(205px,1fr));}
.offer-card-head{display:grid;grid-template-columns:1fr;gap:6px;align-items:start;}
.offer-provider{justify-self:start;max-width:none;}
@media(min-width:1540px){.grid{grid-template-columns:repeat(auto-fill,minmax(175px,1fr));}}
@media(max-width:1100px){.grid{grid-template-columns:repeat(auto-fill,minmax(190px,1fr));}}
@media(max-width:760px){.grid{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media(max-width:520px){.grid{grid-template-columns:1fr;}}

/* FO5 mobile above-the-fold trim: keep the earning tabs closer to first view. */
@media(max-width:520px){
  .site-topnav .container{min-height:58px;}
  .guest-hero{padding:12px 0 8px;}
  .hero-compact-shell{padding:14px 12px 12px;}
  .guest-hero h1{font-size:1.55rem;margin-bottom:6px;}
  .guest-hero p{font-size:.88rem;line-height:1.45;}
  .hero-actions{margin-top:10px;gap:8px;}
  .hero-actions .btn{min-height:36px;padding:7px 12px;}
  .hero-mini{margin-top:10px;gap:6px;}
  .coin-pill{font-size:10px;padding:4px 8px;}
  .stats-strip{padding-bottom:10px;}
  .account-strip{grid-template-columns:repeat(2,minmax(0,1fr));}
  .account-metric{padding:10px 8px;}
  .account-metric:nth-child(2n){border-right:0;}
  .account-metric:last-child{grid-column:1/-1;border-right:0;}
}

/* ===== FO5 account strip + footer leak-proof refinement =====
   Reset remaining beige/gold values inherited from the legacy app.css blocks. */
.earncoins-shell .stats-strip{
  background:transparent !important;
  border:0 !important;
  padding:0 0 14px !important;
}
.earncoins-shell .account-strip{
  width:min(var(--container),calc(100% - 32px)) !important;
  margin:0 auto !important;
  padding:10px !important;
  gap:10px !important;
  border:1px solid rgba(222,214,245,.95) !important;
  border-radius:24px !important;
  background:
    radial-gradient(circle at 12% 0%,rgba(124,58,237,.09),transparent 18rem),
    radial-gradient(circle at 92% 10%,rgba(236,72,153,.08),transparent 18rem),
    linear-gradient(135deg,rgba(255,255,255,.96),rgba(248,245,255,.94)) !important;
  box-shadow:0 16px 38px rgba(67,38,122,.10) !important;
  overflow:hidden !important;
  backdrop-filter:blur(16px);
}
.earncoins-shell .account-metric{
  position:relative;
  min-width:0;
  padding:13px 12px 12px !important;
  border:1px solid rgba(222,214,245,.92) !important;
  border-radius:17px !important;
  background:linear-gradient(180deg,#ffffff 0%,#fbf9ff 100%) !important;
  box-shadow:0 8px 18px rgba(67,38,122,.055) !important;
  text-align:center;
  overflow:hidden;
}
.earncoins-shell .account-metric::before{
  content:"";
  position:absolute;
  inset:0 0 auto;
  height:3px;
  background:linear-gradient(90deg,var(--primary),var(--secondary));
  opacity:.85;
}
.earncoins-shell .account-metric span{
  color:#6d5c86 !important;
  font-size:10px !important;
  line-height:1.25;
}
.earncoins-shell .account-metric strong{
  color:var(--primary-dark) !important;
  font-weight:850 !important;
  letter-spacing:-.025em;
}
.earncoins-shell .account-metric small{
  color:#7c708f !important;
}
.earncoins-shell .account-metric:nth-child(2) strong,
.earncoins-shell .account-metric:nth-child(3) strong,
.earncoins-shell .account-metric:nth-child(5) strong{
  font-size:clamp(13px,1.45vw,17px) !important;
}

.earncoins-shell .site-footer.footer{
  width:100% !important;
  margin:24px 0 0 !important;
  padding:18px 0 !important;
  border:0 !important;
  background:
    radial-gradient(circle at 15% 0%,rgba(124,58,237,.10),transparent 22rem),
    linear-gradient(180deg,rgba(255,255,255,.95),rgba(246,242,255,.96)) !important;
  box-shadow:0 -10px 28px rgba(67,38,122,.055) !important;
  color:var(--muted) !important;
}
.earncoins-shell .footer-shell{
  width:min(var(--container),calc(100% - 32px)) !important;
  margin:0 auto !important;
  padding:18px !important;
  display:grid !important;
  grid-template-columns:minmax(0,1fr) auto !important;
  gap:18px !important;
  align-items:center !important;
  border:1px solid rgba(222,214,245,.95) !important;
  border-radius:24px !important;
  background:linear-gradient(135deg,#ffffff 0%,#fbf9ff 100%) !important;
  box-shadow:0 12px 30px rgba(67,38,122,.075) !important;
}
.earncoins-shell .footer-copy strong{
  display:inline-flex !important;
  align-items:center !important;
  gap:10px !important;
  margin:0 0 5px !important;
  color:var(--text) !important;
  font-size:1rem !important;
  font-weight:850 !important;
}
.earncoins-shell .footer-logo-img{
  width:30px;
  height:30px;
  object-fit:contain;
  border:1px solid var(--border);
  border-radius:11px;
  padding:4px;
  background:#fff;
  box-shadow:0 8px 16px rgba(124,58,237,.14);
}
.earncoins-shell .footer-copy p{
  max-width:720px;
  margin:0 !important;
  color:var(--muted) !important;
  font-size:12px !important;
  line-height:1.55;
}
.earncoins-shell .footer-legal{
  display:flex !important;
  justify-content:flex-end !important;
  gap:8px !important;
  flex-wrap:wrap !important;
}
.earncoins-shell .footer-legal a{
  min-height:32px !important;
  display:inline-flex !important;
  align-items:center !important;
  padding:6px 11px !important;
  border:1px solid rgba(196,181,253,.9) !important;
  border-radius:999px !important;
  background:linear-gradient(180deg,#fff,#f8f5ff) !important;
  color:var(--primary-dark) !important;
  font-size:12px !important;
  font-weight:800 !important;
  box-shadow:0 7px 14px rgba(67,38,122,.045) !important;
}
.earncoins-shell .footer-legal a:hover{
  background:var(--primary-soft) !important;
  color:var(--primary-dark) !important;
}
@media(max-width:900px){
  .earncoins-shell .footer-shell{grid-template-columns:1fr !important;align-items:start !important;}
  .earncoins-shell .footer-legal{justify-content:flex-start !important;}
}
@media(max-width:760px){
  .earncoins-shell .account-strip{width:min(100% - 20px,var(--container)) !important;grid-template-columns:repeat(2,minmax(0,1fr)) !important;gap:8px !important;padding:8px !important;}
  .earncoins-shell .account-metric{border-right:1px solid rgba(222,214,245,.92) !important;padding:11px 8px !important;}
  .earncoins-shell .account-metric:last-child{grid-column:1/-1;}
}
@media(max-width:520px){
  .earncoins-shell .account-strip{grid-template-columns:repeat(2,minmax(0,1fr)) !important;}
  .earncoins-shell .footer-shell{width:min(100% - 20px,var(--container)) !important;padding:14px !important;border-radius:20px !important;}
}

/* FO5 mobile nav compactness: prevent generic .btn width rules from stretching the menu toggle into a tall row. */
@media(max-width:560px){
  .earncoins-shell .site-topnav .container{
    min-height:58px !important;
    padding:8px 0 !important;
    gap:10px !important;
    align-items:center !important;
  }
  .earncoins-shell .topnav-brand{gap:9px !important;}
  .earncoins-shell .tn-icon{width:34px !important;height:34px !important;border-radius:11px !important;}
  .earncoins-shell .tn-logo-img{width:25px !important;height:25px !important;}
  .earncoins-shell .mobile-menu-toggle.btn{
    width:auto !important;
    flex:0 0 auto !important;
    margin-left:auto !important;
    min-height:34px !important;
    padding:6px 12px !important;
    border-radius:11px !important;
  }
}

@media(max-width:560px){
  .earncoins-shell .site-topnav .container{
    display:grid !important;
    grid-template-columns:minmax(0,1fr) auto !important;
    grid-template-areas:"brand menu" "links links" !important;
    align-items:center !important;
  }
  .earncoins-shell .topnav-brand{grid-area:brand !important;min-width:0 !important;}
  .earncoins-shell .mobile-menu-toggle.btn{grid-area:menu !important;justify-self:end !important;align-self:center !important;}
  .earncoins-shell .topnav-menu{grid-area:links !important;margin-left:0 !important;width:100% !important;}
}

/* ===== FO5 original bluish theme restore =====
   Keeps the visitor-first layout/data/card/footer improvements, but restores the
   original cyan/blue + violet visual palette instead of the later pink/purple set. */
:root{
  --bg:#f6f8fc;
  --bg-white:#ffffff;
  --surface:#ffffff;
  --surface2:#f1f5f9;
  --surface3:#e8eef7;
  --text:#162033;
  --text-2:#334155;
  --muted:#64748b;
  --muted-l:#94a3b8;
  --primary:#0ea5e9;
  --primary-dark:#0284c7;
  --primary-soft:#e0f2fe;
  --secondary:#8b5cf6;
  --secondary-dark:#6d28d9;
  --success:#16a34a;
  --success-soft:#dcfce7;
  --warning:#d97706;
  --warning-soft:#fef3c7;
  --danger:#dc2626;
  --danger-soft:#fee2e2;
  --border:#dbeafe;
  --border-l:#e8eef7;
  --focus:rgba(14,165,233,.32);
  --shadow:0 10px 30px rgba(15,23,42,.07);
  --shadow-md:0 16px 40px rgba(15,23,42,.11);
  --shadow-lg:0 24px 60px rgba(15,23,42,.16);
}
body.earncoins-shell{
  color:var(--text) !important;
  background:
    radial-gradient(circle at 5% 0%,rgba(14,165,233,.14),transparent 34rem),
    radial-gradient(circle at 92% 3%,rgba(139,92,246,.14),transparent 30rem),
    linear-gradient(180deg,#fbfdff 0%,var(--bg) 38%,#f8fbff 100%) !important;
}
.earncoins-shell .announcement-bar,
.announcement-bar{
  background:linear-gradient(90deg,#0284c7,#0ea5e9,#8b5cf6) !important;
  color:#fff !important;
}
.earncoins-shell .site-topnav,
.site-topnav{
  background:rgba(255,255,255,.9) !important;
  border-bottom:1px solid rgba(219,234,254,.95) !important;
  box-shadow:0 5px 20px rgba(14,165,233,.07) !important;
}
.earncoins-shell .tn-icon{
  border-color:#bae6fd !important;
  background:#ffffff !important;
  box-shadow:0 10px 22px rgba(14,165,233,.18) !important;
}
.earncoins-shell .topnav-link:hover,
.earncoins-shell .topnav-link.active{
  background:linear-gradient(135deg,#e0f2fe,#eef2ff) !important;
  color:#0369a1 !important;
}
.earncoins-shell .topnav-btn,
.earncoins-shell .btn.primary{
  background:linear-gradient(135deg,#0ea5e9,#8b5cf6) !important;
  box-shadow:0 12px 25px rgba(14,165,233,.25) !important;
  color:#fff !important;
}
.earncoins-shell .btn.ghost{
  background:rgba(255,255,255,.82) !important;
  border-color:#bfdbfe !important;
  color:#0369a1 !important;
}
.earncoins-shell .btn.ghost:hover,
.earncoins-shell .btn.ghost.active{
  background:#e0f2fe !important;
  border-color:#7dd3fc !important;
  color:#075985 !important;
}
.earncoins-shell .guest-hero:before{
  background:
    radial-gradient(circle at 20% 15%,rgba(14,165,233,.13),transparent 22rem),
    radial-gradient(circle at 82% 20%,rgba(139,92,246,.12),transparent 22rem) !important;
}
.earncoins-shell .hero-compact-shell{
  border-color:rgba(191,219,254,.95) !important;
  background:linear-gradient(135deg,rgba(255,255,255,.96),rgba(239,246,255,.94)) !important;
  box-shadow:0 12px 30px rgba(14,165,233,.08) !important;
}
.earncoins-shell .coin-pill{
  border-color:#dbeafe !important;
  background:#fff !important;
  color:#334155 !important;
  box-shadow:0 8px 18px rgba(14,165,233,.07) !important;
}
.earncoins-shell .tabs{
  border-color:#dbeafe !important;
  background:rgba(255,255,255,.94) !important;
  box-shadow:0 10px 30px rgba(14,165,233,.07) !important;
}
.earncoins-shell .tabs button{
  color:#334155 !important;
}
.earncoins-shell .tabs button:hover,
.earncoins-shell .tabs button.active,
.earncoins-shell .tabs button[aria-selected="true"]{
  background:linear-gradient(135deg,#e0f2fe,#eef2ff) !important;
  border-color:#93c5fd !important;
  color:#0369a1 !important;
  box-shadow:0 8px 20px rgba(14,165,233,.14) !important;
}
.earncoins-shell .panel,
.earncoins-shell .card,
.earncoins-shell .feature-card{
  border-color:#dbeafe !important;
  box-shadow:0 8px 22px rgba(14,165,233,.07) !important;
}
.earncoins-shell .card:hover,
.earncoins-shell .feature-card:hover{
  border-color:#7dd3fc !important;
  box-shadow:0 16px 36px rgba(14,165,233,.13) !important;
}
.earncoins-shell .feature-card-icon,
.earncoins-shell .offer-icon{
  background:linear-gradient(135deg,#e0f2fe,#eef2ff) !important;
  color:#0369a1 !important;
}
.earncoins-shell .reward,
.earncoins-shell .offer-reward-amount,
.earncoins-shell .history-amount{
  color:#0284c7 !important;
}
.earncoins-shell .offer-time{
  color:#64748b !important;
}
.earncoins-shell .offer-cta.btn.primary{
  background:linear-gradient(135deg,#0ea5e9,#8b5cf6) !important;
  box-shadow:0 12px 22px rgba(14,165,233,.22) !important;
}
.earncoins-shell .bonus-banner{
  border-color:#bae6fd !important;
  background:linear-gradient(135deg,#eff6ff,#ecfeff) !important;
  box-shadow:0 10px 28px rgba(14,165,233,.07) !important;
}
.earncoins-shell .stats-strip{
  background:transparent !important;
  border:0 !important;
}
.earncoins-shell .account-strip{
  border-color:rgba(191,219,254,.95) !important;
  background:
    radial-gradient(circle at 12% 0%,rgba(14,165,233,.11),transparent 18rem),
    radial-gradient(circle at 92% 10%,rgba(139,92,246,.09),transparent 18rem),
    linear-gradient(135deg,rgba(255,255,255,.97),rgba(239,246,255,.95)) !important;
  box-shadow:0 16px 38px rgba(14,165,233,.11) !important;
}
.earncoins-shell .account-metric{
  border-color:#dbeafe !important;
  background:linear-gradient(180deg,#ffffff 0%,#f8fbff 100%) !important;
  box-shadow:0 8px 18px rgba(14,165,233,.07) !important;
}
.earncoins-shell .account-metric::before{
  background:linear-gradient(90deg,#0ea5e9,#8b5cf6) !important;
}
.earncoins-shell .account-metric span{
  color:#64748b !important;
}
.earncoins-shell .account-metric strong{
  color:#0284c7 !important;
}
.earncoins-shell .account-metric small{
  color:#64748b !important;
}
.earncoins-shell .site-footer.footer{
  background:
    radial-gradient(circle at 15% 0%,rgba(14,165,233,.10),transparent 22rem),
    linear-gradient(180deg,rgba(255,255,255,.96),rgba(239,246,255,.96)) !important;
  box-shadow:0 -10px 28px rgba(14,165,233,.06) !important;
}
.earncoins-shell .footer-shell{
  border-color:#dbeafe !important;
  background:linear-gradient(135deg,#ffffff 0%,#f8fbff 100%) !important;
  box-shadow:0 12px 30px rgba(14,165,233,.08) !important;
}
.earncoins-shell .footer-logo-img{
  border-color:#bae6fd !important;
  box-shadow:0 8px 16px rgba(14,165,233,.14) !important;
}
.earncoins-shell .footer-legal a{
  border-color:#bfdbfe !important;
  background:linear-gradient(180deg,#fff,#f0f9ff) !important;
  color:#0369a1 !important;
  box-shadow:0 7px 14px rgba(14,165,233,.06) !important;
}
.earncoins-shell .footer-legal a:hover{
  background:#e0f2fe !important;
  color:#075985 !important;
}
.earncoins-shell th{background:#eff6ff !important;color:#334155 !important;}
.earncoins-shell .loading:before{border-color:#bae6fd !important;border-top-color:#0ea5e9 !important;}


/* ===== FO5 blue compact footer fix =====
   Final override: restore blue/cyan accents and stop footer descriptions from
   creating an oversized/tall footer. */
.earncoins-shell .account-strip{
  border-color:rgba(191,219,254,.98) !important;
  background:
    radial-gradient(circle at 12% 0%,rgba(14,165,233,.12),transparent 18rem),
    radial-gradient(circle at 92% 10%,rgba(59,130,246,.08),transparent 18rem),
    linear-gradient(135deg,rgba(255,255,255,.98),rgba(240,249,255,.96)) !important;
  box-shadow:0 16px 38px rgba(14,165,233,.12) !important;
}
.earncoins-shell .account-metric{
  border-color:#dbeafe !important;
  background:linear-gradient(180deg,#ffffff 0%,#f8fbff 100%) !important;
  box-shadow:0 8px 18px rgba(14,165,233,.075) !important;
}
.earncoins-shell .account-metric::before{
  background:linear-gradient(90deg,#0ea5e9,#3b82f6,#8b5cf6) !important;
}
.earncoins-shell .account-metric span,
.earncoins-shell .account-metric small{
  color:#64748b !important;
}
.earncoins-shell .account-metric strong{
  color:#0284c7 !important;
}
.earncoins-shell .site-footer.footer{
  margin:22px 0 0 !important;
  padding:12px 0 !important;
  background:
    radial-gradient(circle at 12% 0%,rgba(14,165,233,.09),transparent 20rem),
    linear-gradient(180deg,rgba(255,255,255,.97),rgba(240,249,255,.97)) !important;
  box-shadow:0 -8px 22px rgba(14,165,233,.055) !important;
}
.earncoins-shell .footer-shell{
  min-height:0 !important;
  padding:12px 14px !important;
  gap:12px !important;
  grid-template-columns:minmax(280px,1fr) auto !important;
  align-items:center !important;
  border-color:#dbeafe !important;
  border-radius:20px !important;
  background:linear-gradient(135deg,#ffffff 0%,#f8fbff 100%) !important;
  box-shadow:0 10px 24px rgba(14,165,233,.075) !important;
}
.earncoins-shell .footer-copy{
  min-width:0 !important;
  display:flex !important;
  align-items:center !important;
  gap:12px !important;
}
.earncoins-shell .footer-copy strong{
  flex:0 0 auto !important;
  margin:0 !important;
  gap:8px !important;
  font-size:.95rem !important;
  white-space:nowrap !important;
}
.earncoins-shell .footer-logo-img{
  width:26px !important;
  height:26px !important;
  padding:3px !important;
  border-color:#bae6fd !important;
  box-shadow:0 7px 14px rgba(14,165,233,.14) !important;
}
.earncoins-shell .footer-copy p{
  max-width:none !important;
  min-width:0 !important;
  margin:0 !important;
  font-size:11px !important;
  line-height:1.3 !important;
  color:#64748b !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
}
.earncoins-shell .footer-legal{
  gap:6px !important;
  align-items:center !important;
}
.earncoins-shell .footer-legal a{
  min-height:28px !important;
  padding:5px 9px !important;
  border-color:#bfdbfe !important;
  background:linear-gradient(180deg,#fff,#f0f9ff) !important;
  color:#0369a1 !important;
  font-size:11px !important;
  box-shadow:0 6px 12px rgba(14,165,233,.055) !important;
  white-space:nowrap !important;
}
.earncoins-shell .footer-legal a:hover{
  background:#e0f2fe !important;
  color:#075985 !important;
}
@media(max-width:900px){
  .earncoins-shell .footer-shell{
    grid-template-columns:1fr !important;
    gap:10px !important;
    align-items:stretch !important;
  }
  .earncoins-shell .footer-copy{
    justify-content:flex-start !important;
  }
  .earncoins-shell .footer-legal{
    justify-content:flex-start !important;
    flex-wrap:wrap !important;
  }
}
@media(max-width:560px){
  .earncoins-shell .site-footer.footer{
    padding:10px 0 !important;
  }
  .earncoins-shell .footer-shell{
    width:min(100% - 20px,var(--container)) !important;
    padding:11px !important;
    border-radius:18px !important;
  }
  .earncoins-shell .footer-copy{
    gap:8px !important;
  }
  .earncoins-shell .footer-copy p{
    display:none !important;
  }
  .earncoins-shell .footer-legal{
    gap:5px !important;
  }
  .earncoins-shell .footer-legal a{
    min-height:26px !important;
    padding:4px 8px !important;
    font-size:10.5px !important;
  }
  .earncoins-shell .account-strip{
    border-color:#dbeafe !important;
  }
  .earncoins-shell .account-metric{
    border-color:#dbeafe !important;
  }
}

/* ===== Post/legal page theme alignment fix =====
   Keeps database-driven post/legal pages inside the same EarnCoins shell as
   the front page, preventing old generic panel/footer CSS from leaking in. */
html{min-height:100%;}
body.earncoins-shell{
  min-height:100vh !important;
  display:flex !important;
  flex-direction:column !important;
}
body.earncoins-shell > main{
  flex:1 0 auto !important;
}
.earncoins-shell .tn-logo-img{
  width:28px !important;
  height:28px !important;
  display:block !important;
  object-fit:contain !important;
}
.earncoins-post-page .legal-main{
  width:min(var(--container),calc(100% - 32px)) !important;
  padding:clamp(22px,4vw,46px) 0 !important;
}
.earncoins-post-page .legal-article{
  max-width:920px !important;
  margin:0 auto !important;
  padding:clamp(22px,4vw,38px) !important;
  border:1px solid #dbeafe !important;
  border-radius:26px !important;
  background:
    radial-gradient(circle at 0% 0%,rgba(14,165,233,.10),transparent 18rem),
    radial-gradient(circle at 100% 0%,rgba(139,92,246,.08),transparent 18rem),
    linear-gradient(135deg,#ffffff 0%,#f8fbff 100%) !important;
  box-shadow:0 18px 44px rgba(14,165,233,.10) !important;
  color:#334155 !important;
}
.earncoins-post-page .legal-page-kicker{
  display:inline-flex !important;
  align-items:center !important;
  min-height:30px !important;
  margin-bottom:14px !important;
  padding:6px 12px !important;
  border:1px solid #bfdbfe !important;
  border-radius:999px !important;
  background:linear-gradient(135deg,#e0f2fe,#eef2ff) !important;
  color:#0369a1 !important;
  font-size:12px !important;
  font-weight:850 !important;
  text-transform:uppercase !important;
  letter-spacing:.07em !important;
}
.earncoins-post-page .legal-title-row{
  display:flex !important;
  justify-content:space-between !important;
  align-items:flex-start !important;
  gap:18px !important;
  padding-bottom:18px !important;
  margin-bottom:20px !important;
  border-bottom:1px solid #dbeafe !important;
}
.earncoins-post-page .legal-title-row h1{
  margin-bottom:8px !important;
  font-size:clamp(1.75rem,3.8vw,3rem) !important;
  color:#0f172a !important;
}
.earncoins-post-page .legal-title-row p{
  margin:0 !important;
}
.earncoins-post-page .legal-back-link{
  flex:0 0 auto !important;
  white-space:nowrap !important;
}
.earncoins-post-page .legal-content{
  max-width:780px !important;
  color:#334155 !important;
  font-size:1rem !important;
  line-height:1.8 !important;
}
.earncoins-post-page .legal-content p,
.earncoins-post-page .legal-content div{
  color:#334155 !important;
}
.earncoins-post-page .legal-empty-state{
  text-align:center !important;
}
.earncoins-post-page .site-footer.footer{
  margin-top:auto !important;
}
.earncoins-post-page .footer-shell{
  width:min(var(--container),calc(100% - 32px)) !important;
}
@media(max-width:700px){
  .earncoins-post-page .legal-main{width:min(100% - 20px,var(--container)) !important;padding:18px 0 !important;}
  .earncoins-post-page .legal-title-row{display:grid !important;gap:14px !important;}
  .earncoins-post-page .legal-back-link{width:100% !important;}
  .earncoins-post-page .legal-article{padding:18px !important;border-radius:22px !important;}
}


/* ===== Final production responsiveness/contact/legal polish ===== */
.skip-link{color:#fff !important;}
.earncoins-shell .site-topnav{position:sticky;top:0;z-index:var(--z-sticky,200);}
.earncoins-shell .site-topnav .container{display:flex !important;align-items:center !important;justify-content:space-between !important;gap:12px !important;min-height:64px !important;}
.earncoins-shell .topnav-brand{min-width:0 !important;}
.earncoins-shell .tn-name{overflow:hidden !important;text-overflow:ellipsis !important;white-space:nowrap !important;}
.earncoins-shell .topnav-menu{display:flex;align-items:center;justify-content:flex-end;gap:8px;min-width:0;}
.earncoins-shell .topnav-link,.earncoins-shell .topnav-btn{white-space:nowrap;}
.earncoins-shell .mobile-menu-check{position:absolute !important;inline-size:1px !important;block-size:1px !important;opacity:0 !important;pointer-events:none !important;}
.earncoins-shell .mobile-menu-toggle.btn{display:none;align-items:center;justify-content:center;gap:6px;min-width:auto !important;width:auto !important;}
.earncoins-shell .footer-copy p a{font-weight:800;color:#0369a1 !important;text-decoration:none;}
.earncoins-shell .footer-copy p a:hover{text-decoration:underline;}
.earncoins-post-page .legal-content h2{margin:1.35rem 0 .55rem !important;color:#0f172a !important;font-size:clamp(1.05rem,2vw,1.32rem) !important;letter-spacing:-.02em !important;}
.earncoins-post-page .legal-content p{margin:0 0 .9rem !important;}
.earncoins-post-page .legal-content ul{margin:.15rem 0 1rem 1.25rem !important;padding:0 !important;}
.earncoins-post-page .legal-content li{margin:.32rem 0 !important;padding-left:.15rem !important;}
.legal-admin-editor textarea{font-family:var(--font-mono,monospace);line-height:1.55;}
@media(max-width:820px){
  .earncoins-shell .site-topnav .container{display:grid !important;grid-template-columns:minmax(0,1fr) auto !important;grid-template-areas:"brand toggle" "menu menu" !important;min-height:58px !important;}
  .earncoins-shell .topnav-brand{grid-area:brand !important;}
  .earncoins-shell .mobile-menu-toggle.btn{grid-area:toggle !important;display:inline-flex !important;}
  .earncoins-shell .topnav-menu{grid-area:menu !important;display:none !important;width:100% !important;padding:6px 0 12px !important;flex-direction:column !important;align-items:stretch !important;gap:7px !important;}
  .earncoins-shell .mobile-menu-check:checked ~ .topnav-menu{display:flex !important;}
  .earncoins-shell .topnav-link,.earncoins-shell .topnav-btn{width:100% !important;justify-content:center !important;text-align:center !important;min-height:40px !important;}
  .earncoins-shell .announcement-bar{font-size:11px !important;padding:7px 10px !important;}
}
@media(max-width:560px){
  .earncoins-shell .site-topnav .container{width:min(100% - 20px,var(--container)) !important;}
  .earncoins-shell .topnav-brand{font-size:.95rem !important;}
  .earncoins-shell .footer-copy{display:grid !important;gap:7px !important;}
  .earncoins-shell .footer-copy p{display:block !important;white-space:normal !important;overflow:visible !important;text-overflow:clip !important;line-height:1.45 !important;}
  .earncoins-shell .footer-legal{display:grid !important;grid-template-columns:repeat(2,minmax(0,1fr)) !important;width:100% !important;}
  .earncoins-shell .footer-legal a{text-align:center !important;white-space:normal !important;}
  .earncoins-post-page .legal-content{font-size:.95rem !important;line-height:1.72 !important;}
}
@media(max-width:380px){
  .earncoins-shell .footer-legal{grid-template-columns:1fr !important;}
  .earncoins-shell .mobile-menu-toggle.btn{padding-inline:10px !important;}
}


/* ===== Follow-up fix: mobile header width =====
   The previous mobile override used CSS grid for the top navigation container.
   On some small devices that made the nav/dropdown calculate at only half width.
   This final override uses flex-wrap and forces the opened menu to occupy the
   full row. */
@media(max-width:820px){
  .earncoins-shell .site-topnav .container{
    display:flex !important;
    flex-wrap:wrap !important;
    align-items:center !important;
    justify-content:space-between !important;
    width:min(100% - 20px,var(--container)) !important;
    max-width:var(--container) !important;
    min-height:58px !important;
    gap:8px 10px !important;
  }
  .earncoins-shell .topnav-brand{
    flex:1 1 auto !important;
    min-width:0 !important;
    grid-area:auto !important;
  }
  .earncoins-shell .mobile-menu-toggle.btn{
    display:inline-flex !important;
    flex:0 0 auto !important;
    width:auto !important;
    min-width:auto !important;
    margin-left:auto !important;
    grid-area:auto !important;
    justify-self:auto !important;
  }
  .earncoins-shell .topnav-menu{
    flex:0 0 100% !important;
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
    margin-left:0 !important;
    grid-area:auto !important;
    display:none !important;
    flex-direction:column !important;
    align-items:stretch !important;
    justify-content:flex-start !important;
    gap:7px !important;
    padding:6px 0 12px !important;
  }
  .earncoins-shell .mobile-menu-check:checked ~ .topnav-menu{display:flex !important;}
  .earncoins-shell .topnav-link,
  .earncoins-shell .topnav-btn{
    width:100% !important;
    max-width:100% !important;
    justify-content:center !important;
    text-align:center !important;
  }
}

/* ===== Footer v2: contacts top, legal pages below ===== */
.earncoins-shell .site-footer.footer {
  margin-top: 28px !important;
  padding: 14px 0 !important;
  border-top: 1px solid #dbeafe !important;
  background: linear-gradient(180deg, #f8fbff 0%, #ffffff 100%) !important;
}

.earncoins-shell .footer-shell-v2 {
  width: min(var(--container), calc(100% - 32px)) !important;
  margin: 0 auto !important;
  padding: 16px !important;
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 14px !important;
  border: 1px solid #dbeafe !important;
  border-radius: 22px !important;
  background: #ffffff !important;
  box-shadow: 0 10px 24px rgba(14, 165, 233, .075) !important;
}

.earncoins-shell .footer-top-row {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 18px !important;
  min-width: 0 !important;
}

.earncoins-shell .footer-brand-area {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  min-width: 0 !important;
  flex: 1 1 auto !important;
}

.earncoins-shell .footer-brand {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  flex: 0 0 auto !important;
  color: #0f172a !important;
  font-size: .95rem !important;
  font-weight: 900 !important;
  white-space: nowrap !important;
}

.earncoins-shell .footer-logo-img {
  width: 28px !important;
  height: 28px !important;
  padding: 3px !important;
  border: 1px solid #bae6fd !important;
  border-radius: 10px !important;
  background: #ffffff !important;
  object-fit: contain !important;
  box-shadow: 0 7px 14px rgba(14, 165, 233, .14) !important;
}

.earncoins-shell .footer-description {
  margin: 0 !important;
  min-width: 0 !important;
  max-width: 560px !important;
  color: #64748b !important;
  font-size: 12px !important;
  line-height: 1.45 !important;
}

.earncoins-shell .footer-contact-area {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  flex-wrap: wrap !important;
  gap: 7px !important;
  flex: 0 0 auto !important;
}

.earncoins-shell .footer-credit {
  display: inline-flex !important;
  align-items: center !important;
  min-height: 30px !important;
  padding: 5px 10px !important;
  border: 1px solid #dbeafe !important;
  border-radius: 999px !important;
  background: #f8fbff !important;
  color: #475569 !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  white-space: nowrap !important;
}

.earncoins-shell .footer-contact-link {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 30px !important;
  padding: 5px 10px !important;
  border: 1px solid #bfdbfe !important;
  border-radius: 999px !important;
  background: linear-gradient(180deg, #ffffff, #f0f9ff) !important;
  color: #0369a1 !important;
  font-size: 11px !important;
  font-weight: 850 !important;
  line-height: 1.2 !important;
  text-decoration: none !important;
  white-space: nowrap !important;
}

.earncoins-shell .footer-contact-link:hover {
  background: #e0f2fe !important;
  color: #075985 !important;
  text-decoration: none !important;
}

.earncoins-shell .footer-legal-row {
  width: 100% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  flex-wrap: wrap !important;
  gap: 7px !important;
  padding-top: 12px !important;
  border-top: 1px solid #e0f2fe !important;
}

.earncoins-shell .footer-legal-row a {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 30px !important;
  padding: 5px 10px !important;
  border: 1px solid #bfdbfe !important;
  border-radius: 999px !important;
  background: #ffffff !important;
  color: #0369a1 !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  line-height: 1.2 !important;
  text-align: center !important;
  text-decoration: none !important;
  white-space: nowrap !important;
}

.earncoins-shell .footer-legal-row a:hover {
  background: #e0f2fe !important;
  color: #075985 !important;
}

/* Tablet */
@media (max-width: 900px) {
  .earncoins-shell .footer-top-row {
    align-items: flex-start !important;
    flex-direction: column !important;
    gap: 12px !important;
  }

  .earncoins-shell .footer-brand-area {
    width: 100% !important;
    align-items: flex-start !important;
  }

  .earncoins-shell .footer-contact-area {
    width: 100% !important;
    justify-content: flex-start !important;
  }
}

/* Mobile */
@media (max-width: 560px) {
  .earncoins-shell .site-footer.footer {
    padding: 10px 0 !important;
  }

  .earncoins-shell .footer-shell-v2 {
    width: min(100% - 20px, var(--container)) !important;
    padding: 12px !important;
    border-radius: 18px !important;
  }

  .earncoins-shell .footer-brand-area {
    display: grid !important;
    grid-template-columns: auto minmax(0, 1fr) !important;
    gap: 8px 10px !important;
  }

  .earncoins-shell .footer-brand {
    grid-column: 1 / -1 !important;
  }

  .earncoins-shell .footer-description {
    grid-column: 1 / -1 !important;
    display: block !important;
    max-width: 100% !important;
    font-size: 11.5px !important;
    line-height: 1.45 !important;
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
  }

  .earncoins-shell .footer-contact-area {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 6px !important;
  }

  .earncoins-shell .footer-credit,
  .earncoins-shell .footer-contact-link {
    width: 100% !important;
    white-space: normal !important;
    text-align: center !important;
  }

  .earncoins-shell .footer-legal-row {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 6px !important;
  }

  .earncoins-shell .footer-legal-row a {
    width: 100% !important;
    min-height: 32px !important;
    padding: 6px 8px !important;
    white-space: normal !important;
  }
}

/* Very small phones */
@media (max-width: 380px) {
  .earncoins-shell .footer-legal-row {
    grid-template-columns: 1fr !important;
  }
}


/* ===== Final fixes: admin sync, compact login toast, grids, ad unlock wall ===== */
.toast-stack{
  top:auto !important;
  right:18px !important;
  bottom:18px !important;
  width:min(360px, calc(100vw - 36px)) !important;
  pointer-events:none !important;
}
.toast-stack .toast{
  display:block !important;
  min-height:0 !important;
  padding:12px 15px !important;
  line-height:1.35 !important;
  border-radius:14px !important;
  pointer-events:auto !important;
}

.history-summary.grid{
  grid-template-columns:repeat(3, minmax(0, 1fr)) !important;
  width:100% !important;
  gap:16px !important;
}
.history-summary.grid .card,
.wallet-summary-grid .card{
  min-height:120px !important;
  display:flex !important;
  flex-direction:column !important;
  justify-content:center !important;
}
.wallet-summary-grid{
  grid-template-columns:repeat(4, minmax(0, 1fr)) !important;
  width:100% !important;
  gap:18px !important;
}
@media(max-width:920px){
  .history-summary.grid{grid-template-columns:repeat(3, minmax(0, 1fr)) !important;}
  .wallet-summary-grid{grid-template-columns:repeat(2, minmax(0, 1fr)) !important;}
}
@media(max-width:560px){
  .history-summary.grid,
  .wallet-summary-grid{grid-template-columns:1fr !important;}
}

body.ad-unlock-active{overflow:hidden !important;}
.ad-unlock-overlay{
  position:fixed;
  inset:0;
  z-index:5000;
  display:none;
  align-items:center;
  justify-content:center;
  padding:18px;
  background:rgba(15,23,42,.72);
  backdrop-filter:blur(8px);
}
.ad-unlock-card{
  width:min(560px, 100%);
  max-height:min(92vh, 720px);
  overflow:auto;
  display:grid;
  gap:13px;
  justify-items:center;
  padding:clamp(18px, 4vw, 28px);
  border:1px solid rgba(186,230,253,.85);
  border-radius:26px;
  background:linear-gradient(180deg,#ffffff,#f0f9ff);
  color:var(--text, #201338);
  box-shadow:0 28px 90px rgba(15,23,42,.32);
  text-align:center;
}
.ad-unlock-title{
  margin:0;
  color:var(--text, #201338);
  font-size:clamp(1.25rem, 3vw, 1.8rem);
  font-weight:900;
  line-height:1.1;
}
.ad-unlock-instruction{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:36px;
  padding:8px 13px;
  border:1px solid #bae6fd;
  border-radius:999px;
  background:#e0f2fe;
  color:#075985;
  font-size:13px;
  font-weight:850;
}
.ad-unlock-countdown{
  align-items:center;
  justify-content:center;
  min-height:34px;
  padding:7px 12px;
  border-radius:999px;
  background:#fff7ed;
  color:#9a3412;
  font-weight:850;
}
.ad-unlock-countdown:not([hidden]){display:flex;}
.ad-unlock-pause{
  margin:0;
  padding:9px 12px;
  border-radius:14px;
  background:#fef2f2;
  color:#991b1b;
  font-size:13px;
  font-weight:800;
}
.ad-unlock-ad-wrapper{
  width:100%;
  display:grid;
  gap:10px;
  justify-items:center;
  align-items:center;
  padding:14px;
  border:1px dashed #7dd3fc;
  border-radius:20px;
  background:#ffffff;
}
.ad-unlock-ad-wrapper iframe,
.ad-unlock-ad-wrapper img{max-width:100%;}
.ad-unlock-close{width:100%; justify-content:center;}
.ad-unlock-close:disabled{
  cursor:not-allowed;
  opacity:.75;
  filter:grayscale(.25);
}
.ad-unlock-note{
  margin:0;
  color:var(--muted, #716585);
  font-size:12px;
  font-weight:700;
}

body.admin-shell{
  min-width:320px;
  color:var(--text, #201338);
  background:
    radial-gradient(circle at 8% -10%, rgba(14,165,233,.18), transparent 30rem),
    radial-gradient(circle at 88% 0%, rgba(236,72,153,.13), transparent 28rem),
    linear-gradient(180deg,#fff 0%,#faf8ff 34%,var(--bg, #f0f9ff) 100%);
  font-family:var(--font-main, Poppins, Inter, system-ui, sans-serif);
}
body.admin-shell .container{width:min(var(--container,1180px), calc(100% - 32px));padding-bottom:48px;}
body.admin-shell main>nav{
  min-height:70px;
  margin:14px 0 16px;
  padding:12px 16px;
  border:1px solid var(--border, #bae6fd);
  border-radius:22px;
  background:rgba(255,255,255,.9);
  box-shadow:var(--shadow, 0 10px 28px rgba(67,38,122,.08));
}
body.admin-shell main>nav strong{
  color:var(--text, #201338);
  font-weight:900;
  letter-spacing:-.03em;
}
body.admin-shell .tabs{
  position:relative;
  top:auto;
  justify-content:flex-start;
  margin:0 0 18px;
  padding:10px;
  border:1px solid var(--border, #bae6fd);
  border-radius:22px;
  background:rgba(255,255,255,.82);
  box-shadow:var(--shadow, 0 10px 28px rgba(67,38,122,.08));
}
body.admin-shell .tabs .btn,
body.admin-shell nav .btn{
  min-height:34px;
  padding:8px 12px;
  border-radius:999px;
  font-size:12px;
  font-weight:850;
}
body.admin-shell .panel,
body.admin-shell .card,
body.admin-shell .notice,
body.admin-shell .dialog-card{
  border-color:var(--border, #bae6fd);
  background:rgba(255,255,255,.9);
  box-shadow:var(--shadow, 0 10px 28px rgba(67,38,122,.08));
}
body.admin-shell table{background:#fff;}
body.admin-shell th{
  color:var(--text-2, #3c2a5d);
  background:#e0f2fe;
}
body.admin-shell input,
body.admin-shell select,
body.admin-shell textarea{
  border-color:var(--border, #bae6fd);
  background:#fff;
  color:var(--text, #201338);
}
body.admin-shell input:focus,
body.admin-shell select:focus,
body.admin-shell textarea:focus{
  border-color:var(--primary, #0ea5e9);
  box-shadow:0 0 0 4px rgba(14,165,233,.18);
}
body.admin-shell .reward{color:var(--primary-dark, #0284c7);}
body.admin-shell .toast.success,
body.admin-shell .toast.error{
  display:block;
  width:auto;
  min-height:0;
  margin:0 0 14px;
  padding:12px 14px;
}
@media(max-width:820px){
  body.admin-shell .tabs{overflow:auto;flex-wrap:nowrap;}
  body.admin-shell .tabs .btn{white-space:nowrap;}
}


/* ===== Follow-up fixes: no advertise gaps, referral columns, centered captcha wrapper ===== */
.earncoins-shell .account-strip{
  --account-strip-columns:4;
  grid-template-columns:repeat(var(--account-strip-columns), minmax(0, 1fr)) !important;
}
.earncoins-shell .account-strip.has-ad-balance{--account-strip-columns:5;}
.earncoins-shell .account-strip.no-ad-balance{--account-strip-columns:4;}
.earncoins-shell .account-strip.no-ad-balance .account-metric:last-child,
.earncoins-shell .account-strip.has-ad-balance .account-metric:last-child{
  border-right:0 !important;
}

.referral-summary-grid{
  display:grid !important;
  grid-template-columns:repeat(2, minmax(0, 1fr)) !important;
  width:100% !important;
  gap:18px !important;
  align-items:stretch !important;
}
.referral-summary-grid > .card{
  width:100% !important;
  min-width:0 !important;
}

.login-captcha{
  width:100% !important;
  display:grid !important;
  justify-items:center !important;
  align-items:center !important;
}

@media(max-width:1050px){
  .earncoins-shell .account-strip{
    grid-template-columns:repeat(2, minmax(0, 1fr)) !important;
  }
}
@media(max-width:700px){
  .referral-summary-grid{
    grid-template-columns:1fr !important;
  }
}
@media(max-width:560px){
  .earncoins-shell .account-strip{
    grid-template-columns:1fr !important;
  }
}

/* Ads update 2026-07-03: content-only monetization slots. */
.monetization-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-start;
  gap: 8px;
  max-width: 100%;
  overflow: hidden;
  margin: 8px auto 12px;
}
.monetization-slot,
.monetization-slot.has-ad,
.top-banner.has-ad,
.in-content-ad.has-ad,
.wallet-ad.has-ad,
.sticky-bottom.has-ad {
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  color: inherit !important;
  min-width: 0 !important;
  min-height: 0 !important;
  height: auto !important;
  padding: 0 !important;
}
.monetization-slot {
  display: none !important;
  width: auto !important;
  max-width: 100% !important;
  margin: 8px auto !important;
  text-align: center;
  overflow: hidden !important;
}
.monetization-slot.has-ad {
  display: flex !important;
  flex: 0 1 auto;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-start;
  gap: 8px;
}
.monetization-slot[hidden],
.monetization-slot:not(.has-ad) {
  display: none !important;
}
.monetization-slot > *,
.monetization-slot a,
.monetization-slot iframe,
.monetization-slot img,
.monetization-slot ins,
.monetization-slot div {
  max-width: none !important;
}
.monetization-slot a {
  display: inline-flex;
  flex: 0 0 auto;
  justify-content: center;
  align-items: flex-start;
}
.monetization-slot iframe,
.monetization-slot img {
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
}
.sticky-bottom.has-ad {
  position: fixed !important;
  left: 50% !important;
  bottom: 8px !important;
  transform: translateX(-50%) !important;
  z-index: 180 !important;
  max-width: 100vw !important;
  overflow: hidden !important;
  margin: 0 !important;
}
@media (min-width: 821px) {
  .desktop-ad.has-ad { display: flex !important; }
  .mobile-ad.has-ad { display: none !important; }
}
@media (max-width: 820px) {
  .desktop-ad.has-ad { display: none !important; }
  .mobile-ad.has-ad { display: flex !important; }
}