:root{
  --bg: #0B1220;
  --bg-raised: #101B2B;
  --bg-card: #162536;
  --border: #293D50;
  --text: #F1F6FA;
  --text-dim: #9BAEBC;
  --mint: #2DD4B0;
  --mint-dim: #176A62;
  --gold: #F3BA4A;
  --danger: #FF7676;
  --surface-glass: rgba(11, 18, 32, 0.82);
  --surface-soft: rgba(22, 37, 54, 0.96);
  --shadow-soft: 0 18px 45px rgba(4, 11, 20, 0.28);
  --radius: 14px;
  --font-display: 'Space Grotesk', sans-serif;
  --font-body: 'Inter', sans-serif;
  --font-mono: 'JetBrains Mono', monospace;
}

:root[data-theme="light"]{
  color-scheme: light;
  --bg:#F3F7FA;
  --bg-raised:#E8EFF4;
  --bg-card:#FFFFFF;
  --border:#CBD8E2;
  --text:#172A3A;
  --text-dim:#5C7080;
  --mint:#087F69;
  --mint-dim:#B9E8DC;
  --gold:#A66B00;
  --danger:#C43D45;
  --surface-glass: rgba(255, 255, 255, 0.8);
  --surface-soft: rgba(255, 255, 255, 0.96);
  --shadow-soft: 0 18px 45px rgba(14, 31, 47, 0.10);
}

*{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
  margin:0;
  background:
    radial-gradient(circle at 82% -10%, rgba(45,212,176,.12), transparent 30rem),
    radial-gradient(circle at 8% 18%, rgba(62,128,190,.10), transparent 26rem),
    var(--bg);
  background-attachment: fixed;
  color: var(--text);
  font-family: var(--font-body);
  line-height: 1.5;
}
:root[data-theme="light"] body{
  background:
    radial-gradient(circle at 82% -10%, rgba(8,127,105,.09), transparent 30rem),
    radial-gradient(circle at 8% 18%, rgba(62,128,190,.08), transparent 26rem),
    var(--bg);
}
a{ color: var(--mint); text-decoration: none; }
img{ max-width:100%; }

.page-loader{
  position:fixed; inset:0; z-index:1000;
  display:grid; place-items:center;
  background:var(--bg);
  transition: opacity .12s ease, visibility .12s ease;
}
.page-loader img{
  width:min(180px, 46vw); height:auto;
  border-radius:18px;
  box-shadow:0 0 0 1px var(--border), 0 18px 50px rgba(0,0,0,.35);
  animation:none;
}
body.page-ready .page-loader{ opacity:0; visibility:hidden; pointer-events:none; }
@keyframes loader-pulse{
  0%, 100%{ transform:scale(.97); opacity:.82; }
  50%{ transform:scale(1); opacity:1; }
}

.wrap{ max-width: 1180px; margin: 0 auto; padding: 0 24px; }

/* Header */
.site-header{
  display:flex; align-items:center; justify-content:space-between;
  padding: 18px 24px;
  border-bottom: 1px solid var(--border);
  position: sticky; top:0; z-index: 40;
  background: var(--surface-glass);
  backdrop-filter: blur(12px);
  box-shadow: var(--shadow-soft);
}
:root[data-theme="light"] .site-header,
:root[data-theme="light"] .topbar,
:root[data-theme="light"] .admin-drawer,
:root[data-theme="light"] .chat-shell,
:root[data-theme="light"] .card,
:root[data-theme="light"] .feature-card,
:root[data-theme="light"] .offer-card,
:root[data-theme="light"] .market-card,
:root[data-theme="light"] .my-orders-stat,
:root[data-theme="light"] .my-orders-table-wrap,
:root[data-theme="light"] .notif-drawer{
  background: var(--surface-soft);
  box-shadow: var(--shadow-soft);
}
.logo{
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 22px;
  letter-spacing: -0.02em;
  display:flex; align-items:center; gap:8px;
  color: var(--text);
  text-decoration: none;
  cursor: pointer;
}
.logo-image{
  display:block;
  width:132px;
  height:38px;
  object-fit:cover;
  border-radius:6px;
}
.logo:hover{ opacity: 0.85; }
.logo .dot{ color: var(--mint); }
.header-actions{ display:flex; gap:10px; align-items:center; }
#installAppButton[hidden]{ display:none !important; }
.pwa-install-dialog{
  width:min(440px, calc(100% - 32px));
  border:1px solid var(--border);
  border-radius:16px;
  padding:24px;
  background:var(--bg-card);
  color:var(--text);
  box-shadow:0 24px 80px rgba(0,0,0,.45);
}
.pwa-install-dialog::backdrop{ background:rgba(3,9,16,.72); backdrop-filter:blur(3px); }
.pwa-install-dialog h2{ margin:0 0 10px; font-family:var(--font-display); }
.pwa-install-dialog p{ color:var(--text-dim); line-height:1.6; }
.pwa-install-dialog .btn{ margin-top:8px; }

.btn{
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 14px;
  padding: 10px 18px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text);
  cursor: pointer;
  transition: all .15s ease;
  display:inline-flex; align-items:center; gap:8px;
}
.btn:hover{ border-color: var(--mint); }
.btn-primary{
  background: var(--mint);
  color: #04150F;
  border-color: var(--mint);
}
.btn-primary:hover{ background:#4EF0B4; }
.btn-block{ width:100%; justify-content:center; }
.btn-ghost{ border-color: transparent; color: var(--text-dim); }
.btn-danger{ border-color: var(--danger); color: var(--danger); }

/* Ticker */
.ticker{
  overflow:hidden;
  border-bottom: 1px solid var(--border);
  background: var(--bg-raised);
}
.ticker-track{
  display:flex; gap:14px; padding: 12px 0;
  animation: scroll 40s linear infinite;
  width: max-content;
}
.ticker:hover .ticker-track{ animation-play-state: paused; }
@keyframes scroll{ from{ transform: translateX(0); } to{ transform: translateX(-50%); } }
.ticker-item{
  display:flex; align-items:center; gap:10px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 8px 14px;
  font-size: 13px;
  white-space: nowrap;
}
.ticker-coin{ color: var(--gold); font-family: var(--font-mono); font-weight:700; }
.ticker-user{ color: var(--text-dim); }

/* Hero */
.hero{
  display:grid; grid-template-columns: 1.1fr 0.9fr; gap: 48px;
  padding: 72px 0 56px; align-items: start;
}
.eyebrow{
  font-family: var(--font-mono);
  color: var(--mint);
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 18px;
}
.hero h1{
  font-family: var(--font-display);
  font-size: 52px;
  line-height: 1.05;
  letter-spacing: -0.02em;
  margin: 0 0 20px;
}
.hero h1 .accent{ color: var(--mint); }
.hero p.lead{
  color: var(--text-dim);
  font-size: 17px;
  max-width: 480px;
  margin-bottom: 28px;
}
.hero-actions{
  display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  margin-bottom: 20px;
}
.trust-row{
  display:flex; align-items:center; flex-wrap:wrap; gap:10px; margin-bottom: 22px;
}
.trust-row span{
  display:inline-flex; align-items:center; justify-content:center;
  background: rgba(53,224,161,0.08); border:1px solid rgba(53,224,161,0.25);
  border-radius:999px; color: var(--mint); font-size:12px; font-weight:600;
  padding: 7px 12px;
}
.stat-row{ display:flex; gap: 28px; margin-top: 32px; }
.stat{ }
.stat .num{ font-family: var(--font-mono); font-size: 26px; font-weight:700; color: var(--gold); }
.stat .label{ font-size: 12px; color: var(--text-dim); text-transform: uppercase; letter-spacing: .05em; }

.feature-block, .benefits-block{ padding-top: 36px; }
.feature-grid{
  display:grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px;
}
.feature-card{
  background: var(--bg-card); border:1px solid var(--border); border-radius: var(--radius);
  padding: 22px 18px; min-height: 180px; box-shadow: var(--shadow-soft);
}
.feature-icon{
  display:inline-flex; align-items:center; justify-content:center; width:42px; height:42px;
  border-radius: 12px; background: rgba(53,224,161,0.1); border:1px solid rgba(53,224,161,0.25);
  color: var(--mint); font-family: var(--font-mono); font-weight:700; margin-bottom: 16px;
}
.feature-card h3{ margin:0 0 10px; font-size: 20px; }
.feature-card p{ margin:0; color: var(--text-dim); }
.benefit-grid{
  display:grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px;
}
.benefit-item{
  display:flex; flex-direction:column; gap:8px; background: var(--bg-card);
  border:1px solid var(--border); border-radius: 12px; padding: 18px 18px;
}
.benefit-item strong{ font-size: 16px; }
.benefit-item span{ color: var(--text-dim); font-size: 14px; line-height:1.5; }

/* Auth card */
.card{
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 28px;
  box-shadow: var(--shadow-soft);
}
.auth-card h2{
  font-family: var(--font-display);
  margin: 0 0 20px;
  font-size: 22px;
}
.field{ margin-bottom: 14px; }
.field label{ display:block; font-size: 13px; color: var(--text-dim); margin-bottom: 6px; }
.field input, .field select, .field textarea{
  width: 100%;
  background: var(--bg-raised);
  border: 1px solid var(--border);
  border-radius: 9px;
  padding: 11px 13px;
  color: var(--text);
  font-family: var(--font-body);
  font-size: 14px;
}
.field textarea{ resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus{ outline: none; border-color: var(--mint); }
.checkbox-row{ display:flex; align-items:flex-start; gap:8px; font-size: 13px; color: var(--text-dim); margin: 14px 0 18px; }
.checkbox-row input{ margin-top:2px; }
.form-toggle{ text-align:center; margin-top:16px; font-size: 13px; color: var(--text-dim); }
.or-divider{
  display:flex; align-items:center; text-align:center; gap:10px;
  color: var(--text-dim); font-size: 12px; text-transform:uppercase; letter-spacing:.05em;
  margin: 16px 0;
}
.or-divider::before, .or-divider::after{ content:''; flex:1; height:1px; background: var(--border); }
#googleButtonContainer, #googleButtonContainerLogin{ margin-bottom: 4px; }
#googleSignInBtn, #googleSignInBtnLogin{ display:flex; justify-content:center; }
.code-input{
  font-family: var(--font-mono);
  font-size: 22px;
  letter-spacing: 8px;
  text-align: center;
}
.error-msg{
  background: rgba(255,107,107,.1);
  border: 1px solid var(--danger);
  color: var(--danger);
  border-radius: 9px;
  padding: 10px 12px;
  font-size: 13px;
  margin-bottom: 14px;
  display:none;
}
.success-msg{
  background: rgba(53,224,161,.1);
  border: 1px solid var(--mint);
  color: var(--mint);
  border-radius: 9px;
  padding: 10px 12px;
  font-size: 13px;
  margin-bottom: 14px;
  display:none;
}

/* Sections */
section{ padding: 56px 0; border-top: 1px solid var(--border); }
.section-head{ display:flex; align-items:baseline; justify-content:space-between; margin-bottom: 28px; flex-wrap: wrap; gap: 12px;}
.section-head h2{ font-family: var(--font-display); font-size: 26px; margin:0; }
.section-head p{ color: var(--text-dim); margin:0; font-size: 14px; }

.partners-grid{
  display:grid; grid-template-columns: repeat(6, 1fr); gap: 14px;
}
.partner-tile{
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 18px 12px;
  text-align:center;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 13px;
  color: var(--text-dim);
}

.offers-grid{
  display:grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px;
}
.offer-card{
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 18px;
  display:flex; flex-direction:column; gap: 10px;
  box-shadow: var(--shadow-soft);
}
.offer-top{ display:flex; justify-content:space-between; align-items:flex-start; gap: 10px; }
.offer-network{ font-size: 12px; color: var(--text-dim); }
.offer-points{
  font-family: var(--font-mono); font-weight:700; color: var(--gold);
  background: rgba(240,180,41,0.1);
  border: 1px solid rgba(240,180,41,0.3);
  border-radius: 8px;
  padding: 3px 9px;
  font-size: 13px;
  white-space: nowrap;
}
.offer-title{ font-weight:600; font-size: 15px; }
.offer-desc{ color: var(--text-dim); font-size: 13px; flex:1; }
.offer-tags{ display:flex; gap:6px; font-size: 11px; color: var(--text-dim); }
.tag{ background: var(--bg-raised); border:1px solid var(--border); border-radius:6px; padding:2px 8px; }
.offer-btn{ margin-top: 6px; }
.offer-card.completed{ opacity: 0.55; }

/* Footer */
footer{ border-top: 1px solid var(--border); padding: 32px 0; color: var(--text-dim); font-size: 13px; text-align:center; }

/* Dashboard */
.dash-shell{ display:grid; grid-template-columns: 240px 1fr; min-height: calc(100vh - 65px); }
.sidebar{ border-right: 1px solid var(--border); padding: 24px 16px; }
.sidebar nav{ display:flex; flex-direction:column; gap: 4px; }
.sidebar a{
  color: var(--text-dim); font-size: 14px; font-weight: 600;
  padding: 10px 12px; border-radius: 9px;
}
.sidebar a.active, .sidebar a:hover{ background: var(--bg-card); color: var(--text); }
.dash-main{ padding: 32px; }

/* ---- Dashboard v2: topbar + icon sidebar + carousels ---- */
.topbar{
  display:flex; align-items:center; justify-content:space-between;
  padding: 14px 24px;
  border-bottom: 1px solid var(--border);
  position: sticky; top:0; z-index: 40;
  background: var(--surface-glass);
  backdrop-filter: blur(12px);
  box-shadow: var(--shadow-soft);
}
.topbar-right{ display:flex; align-items:center; gap: 14px; }
.coin-dot{ color: var(--gold); }
.points-pill{
  display:flex; align-items:center; gap:6px;
  background: var(--bg-card); border:1px solid var(--border);
  border-radius: 999px; padding: 7px 14px;
  font-family: var(--font-mono); font-weight:700; font-size:14px;
}
.balance-cashout-link{ color:var(--text); cursor:pointer; font:inherit; }
.balance-cashout-link:hover{ border-color:var(--mint); color:var(--mint); }
.balance-cashout-link:focus-visible{ outline:2px solid var(--mint); outline-offset:3px; }
.icon-btn{
  position:relative; background:transparent; border:1px solid var(--border);
  color: var(--text-dim); border-radius: 10px; width:38px; height:38px;
  display:flex; align-items:center; justify-content:center; cursor:pointer;
}
.icon-btn:hover{ color: var(--text); border-color: var(--mint); }
.icon-btn svg{ width:18px; height:18px; }
.notif-dot{ position:absolute; top:6px; right:7px; width:7px; height:7px; border-radius:50%; background: var(--gold); }

.notif-drawer-wrap{ position:relative; }
.notif-badge{
  position:absolute; top:-4px; right:-4px; min-width:16px; height:16px; padding:0 3px;
  border-radius:999px; background: var(--danger); color:#fff;
  font-size:10px; font-weight:700; line-height:16px; text-align:center;
}
.notif-drawer{
  display:none; position:absolute; right:0; top:48px; width:340px; max-width:90vw;
  background: var(--bg-card); border:1px solid var(--border); border-radius:12px;
  box-shadow: 0 12px 32px rgba(0,0,0,0.4); z-index:60; overflow:hidden;
}
.notif-drawer.open{ display:block; }
.notif-drawer-header{
  display:flex; justify-content:space-between; align-items:center;
  padding:12px 14px; border-bottom:1px solid var(--border); font-size:13px; font-weight:600;
}
.btn-link{ background:none; border:none; color: var(--mint); font-size:12px; cursor:pointer; padding:0; }
.notif-drawer-list{ max-height:360px; overflow-y:auto; }
.notif-item{
  display:flex; gap:10px; padding:12px 14px; border-bottom:1px solid var(--border);
  cursor:pointer; font-size:13px;
}
.notif-item:last-child{ border-bottom:none; }
.notif-item:hover{ background: var(--bg-raised); }
.notif-item.unread{ background: rgba(53,224,161,0.05); }
.notif-item-dot{ width:8px; height:8px; border-radius:50%; margin-top:4px; flex-shrink:0; }
.notif-item.unread .notif-item-dot{ background: var(--mint); }
.notif-item.read .notif-item-dot{ background: transparent; }
.notif-item-title{ font-weight:600; margin-bottom:2px; }
.notif-item-msg{ color: var(--text-dim); font-size:12px; }
.notif-item-time{ color: var(--text-dim); font-size:11px; margin-top:4px; }

.avatar-menu{ position:relative; }
.avatar-circle{
  width:38px; height:38px; border-radius:50%;
  background: var(--mint); color:#04150F; border:none;
  font-weight:700; font-size:15px; cursor:pointer;
  display:flex; align-items:center; justify-content:center; line-height:1; text-align:center;
}
.avatar-circle.avatar-loading{ background:var(--bg-raised); color:transparent; cursor:wait; }
.avatar-circle img{ width:100%; height:100%; object-fit:cover; border-radius:inherit; }
.user-list-avatar{ display:inline-flex; width:28px; height:28px; margin-right:7px; vertical-align:middle; font-size:12px; cursor:default; }
.leaderboard-avatar{ display:inline-flex; width:28px; height:28px; margin-right:7px; vertical-align:middle; font-size:12px; cursor:default; }
.profile-avatar-preview{ width:76px; height:76px; margin:8px auto 14px; font-size:34px; cursor:default; }
.avatar-picker-title{ margin:12px 0 8px; font-size:13px; color:var(--text-dim); text-align:center; }
.avatar-preset-grid{ display:grid; grid-template-columns:repeat(4,48px); justify-content:center; gap:10px; margin-bottom:14px; }
.avatar-preset-option{ width:48px; height:48px; display:grid; place-items:center; border:2px solid transparent; border-radius:50%; color:#fff; font-family:"Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",sans-serif; font-size:24px; line-height:1; cursor:pointer; }
.avatar-preset-option:hover,.avatar-preset-option.selected{ border-color:var(--text); box-shadow:0 0 0 2px var(--mint); }
.avatar-upload-label{ display:flex; justify-content:center; max-width:220px; margin:0 auto; cursor:pointer; }
.avatar-dropdown{
  display:none; position:absolute; right:0; top:48px; width:230px;
  background: var(--bg-card); border:1px solid var(--border); border-radius: 12px;
  padding: 8px; z-index: 50; box-shadow: 0 12px 32px rgba(0,0,0,0.4);
}
.avatar-dropdown.open{ display:block; }
.avatar-dropdown-header{ padding: 10px 12px 12px; border-bottom: 1px solid var(--border); margin-bottom:6px; }
.avatar-name{ font-size:13px; color:var(--text-dim); word-break:break-all; }
.avatar-points{ font-family: var(--font-mono); font-weight:700; margin-top:4px; }
.avatar-dropdown button.dropdown-item{ width:100%; border:0; background:transparent; text-align:left; cursor:pointer; font:inherit; }
.dropdown-item{
  display:flex; align-items:center; justify-content:space-between;
  padding: 9px 12px; border-radius: 8px; font-size:14px; color: var(--text);
}
.dropdown-item:hover{ background: var(--bg-raised); }
.badge-pill{
  background: var(--gold); color:#2a1c02; font-size:11px; font-weight:700;
  border-radius: 999px; padding: 1px 7px;
}

.sidebar-v2{ border-right: 1px solid var(--border); padding: 20px 12px; }
.dash-shell > .sidebar-v2{
  position:sticky;
  top:68px;
  align-self:start;
  height:calc(100vh - 68px);
  overflow-y:auto;
  scrollbar-width:thin;
}
.sidebar-v2 nav{ display:flex; flex-direction:column; gap: 4px; }
.nav-link-v2{
  display:flex; align-items:center; gap:10px;
  color: var(--text-dim); font-size: 14px; font-weight: 600;
  padding: 10px 12px; border-radius: 9px;
}
.nav-link-v2 svg{ width:18px; height:18px; flex-shrink:0; }
.nav-link-v2.nav-child-link{ padding-left:12px; color:var(--text-dim); font-size:14px; }
.nav-link-v2.nav-child-link svg{ width:18px; height:18px; }
.nav-link-v2.active, .nav-link-v2:hover{ background: var(--bg-card); color: var(--mint); }

.carousel-row{
  display:flex; gap: 14px; overflow-x: auto; padding-bottom: 8px;
  scrollbar-width: thin;
}
.carousel-card{
  flex: 0 0 180px;
  background: var(--bg-card); border:1px solid var(--border); border-radius: var(--radius);
  padding: 16px;
}

.sub-tabs{ display:flex; gap:8px; margin-bottom: 22px; border-bottom: 1px solid var(--border); }
.sub-tab{
  background:transparent; border:none; color: var(--text-dim);
  font-size:14px; font-weight:600; padding: 10px 4px; margin-right: 18px;
  border-bottom: 2px solid transparent; cursor:pointer;
}
.sub-tab.active{ color: var(--mint); border-bottom-color: var(--mint); }

.streak-track{ display:grid; grid-template-columns: repeat(7, 1fr); gap:8px; }
.streak-day{
  border:1px solid var(--border); border-radius: 10px; padding: 12px 6px;
  text-align:center; font-size:12px; color: var(--text-dim); background: var(--bg-raised);
}
.streak-day.claimed{ border-color: var(--mint); color: var(--mint); background: rgba(53,224,161,0.08); }
.streak-day.today{ border-color: var(--gold); color: var(--gold); box-shadow: 0 0 0 1px var(--gold) inset; }
.streak-day-num{ font-weight:700; }

.market-grid{
  display:grid; grid-template-columns: repeat(auto-fill, minmax(260px, 320px)); gap: 16px;
}
.market-trust-strip{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin:18px 0; }
.market-trust-strip div{ background:rgba(45,212,176,.06); border:1px solid rgba(45,212,176,.18); border-radius:10px; padding:12px 14px; }
.market-trust-strip strong,.market-trust-strip span{ display:block; }
.market-trust-strip strong{ font-size:13px; color:var(--text); }
.market-trust-strip span{ color:var(--text-dim); font-size:11px; margin-top:3px; }
.market-category-chips{ display:flex; flex-wrap:wrap; gap:7px; margin:-4px 0 18px; }
.market-category-chip{ border:1px solid var(--border); background:var(--bg-card); color:var(--text-dim); border-radius:999px; padding:6px 11px; font-size:12px; cursor:pointer; }
.market-category-chip.active,.market-category-chip:hover{ border-color:var(--mint); color:var(--mint); background:rgba(45,212,176,.08); }
.market-filters{ display:flex; gap:10px; margin:18px 0; max-width:760px; }
.market-filters input, .market-filters select{
  min-width:0; flex:1; background:var(--bg-card); border:1px solid var(--border); border-radius:8px;
  padding:10px 12px; color:var(--text); font:inherit; font-size:13px;
}
.market-filters input{ flex:2; }
.market-card{
  display:flex; flex-direction:column; gap:10px; background: var(--bg-card); border:1px solid var(--border);
  border-radius: var(--radius); padding: 18px; min-height: 220px; overflow:hidden; min-width:0;
  box-shadow: var(--shadow-soft);
}
.market-type{
  display:inline-flex; align-self:flex-start; padding: 5px 8px; font-size: 11px; font-weight:700;
  letter-spacing: 0.08em; text-transform: uppercase; background: rgba(53,224,161,0.1);
  color: var(--mint); border:1px solid rgba(53,224,161,0.22); border-radius: 999px;
}
.market-image{ display:block; width:100%; height:220px; object-fit:contain; border-radius:8px; border:1px solid var(--border); background:#f4f4f2; }
/* Long unbroken titles/descriptions (or a pasted URL) used to stretch the
   fixed-width grid cell instead of wrapping — break them onto new lines. */
.market-card h3{ margin:0; font-size: 20px; overflow-wrap:anywhere; }
.market-category{ color: var(--text-dim); font-size: 12px; text-transform: uppercase; letter-spacing: .06em; }
.market-card p{ margin:0; color: var(--text-dim); font-size: 13px; line-height:1.5; overflow-wrap:anywhere; }
.market-price{ font-family: var(--font-mono); font-size: 28px; font-weight:700; color: var(--gold); }
.market-meta{ font-size: 12px; color: var(--text-dim); }
.market-sell-intro{ max-width:760px; margin:0 0 18px; color:var(--text-dim); font-size:14px; line-height:1.6; }
.market-order-modal{ width:760px; max-width:94vw; max-height:90vh; overflow:auto; padding:24px; }
.market-order-product{ display:flex; align-items:center; gap:14px; padding-bottom:16px; border-bottom:1px solid var(--border); min-width:0; }
.market-order-product img{ flex-shrink:0; width:76px; height:76px; object-fit:contain; border-radius:10px; background:#f4f4f2; border:1px solid var(--border); }
.market-order-product h2{ margin:2px 0 4px; font-family:var(--font-display); font-size:20px; overflow-wrap:anywhere; }
.market-order-product p{ margin:0; color:var(--text-dim); font-size:13px; overflow-wrap:anywhere; }
.market-order-kicker{ color:var(--mint); font-size:11px; text-transform:uppercase; letter-spacing:.08em; font-weight:700; }
.market-order-total-label{ color:var(--text-dim); font-size:12px; margin-top:14px; }
.market-order-total{ color:var(--gold); font:700 28px var(--font-mono); margin:16px 0; }
.market-image-preview{ display:block; max-width:100%; max-height:280px; object-fit:contain; margin-top:10px; border:1px solid var(--border); border-radius:8px; background:var(--bg-raised); }
.market-order-modal small{ display:block; color:var(--text-dim); margin-top:6px; font-size:11px; }
.market-sell-intro + .market-grid{ margin-top:0; }
.market-payment-panel{ background:var(--bg-raised); border:1px solid var(--border); border-radius:10px; padding:14px; margin-bottom:16px; }
.market-payment-panel h3{ margin:0 0 12px; font-size:14px; }
.market-payment-methods{ display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:8px; }
.market-payment-method{ display:flex; align-items:center; gap:8px; min-height:54px; padding:9px 10px; border:1px solid var(--border); border-radius:8px; background:var(--bg-card); color:var(--text); cursor:pointer; text-align:left; }
.market-payment-method.active{ border-color:var(--mint); box-shadow:0 0 0 1px var(--mint) inset; }
.market-payment-icon{ display:grid; place-items:center; min-width:34px; height:28px; border-radius:6px; background:var(--mint-dim); color:var(--mint); font-size:10px; font-weight:700; }
.market-payment-icon img{ display:block; width:100%; height:100%; max-width:42px; object-fit:contain; border-radius:inherit; }
.market-payment-address{ color:var(--mint); font-size:12px; margin-top:10px; word-break:break-all; }
.market-order-actions{ display:flex; gap:10px; margin-top:16px; }
.market-order-actions button{ flex:1; }
.my-orders-summary{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; margin:0 0 18px; }
.my-orders-stat{ display:flex; flex-direction:column; gap:7px; padding:15px 17px; background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius); }
.my-orders-stat span{ color:var(--text-dim); font-size:12px; }
.my-orders-stat strong{ color:var(--text); font:700 23px var(--font-mono); }
.my-orders-toolbar{ display:flex; align-items:center; gap:10px; margin-bottom:14px; }
.my-orders-toolbar input,
.my-orders-toolbar select{
  min-height:42px; border:1px solid var(--border); border-radius:8px;
  background-color:var(--bg-card); color:var(--text); color-scheme:dark;
  font:inherit; font-size:13px;
}
.my-orders-toolbar input{ padding:9px 12px; }
.my-orders-toolbar input::placeholder{ color:var(--text-dim); opacity:1; }
.my-orders-toolbar select{ padding:9px 30px 9px 12px; }
.my-orders-toolbar select option{ background:var(--bg-card); color:var(--text); }
:root[data-theme="light"] .my-orders-toolbar input,
:root[data-theme="light"] .my-orders-toolbar select{ color-scheme:light; }
#myOrdersSearch,
#myOrdersStatus{
  background-color:var(--bg-card);
  color:var(--text);
}
#myOrdersStatus option{ background-color:var(--bg-card); color:var(--text); }
.my-orders-toolbar input{ flex:1 1 320px; min-width:180px; }
.my-orders-toolbar select{ flex:0 0 180px; }
.my-orders-toolbar button{ min-height:42px; }
.my-orders-list{ min-width:0; }
.my-orders-table-wrap{ width:100%; overflow-x:auto; background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius); }
.my-orders-table{ width:100%; border-collapse:collapse; text-align:left; }
.my-orders-table th{ padding:13px 14px; color:var(--text-dim); background:var(--bg-raised); border-bottom:1px solid var(--border); font-size:11px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; white-space:nowrap; }
.my-orders-table td{ padding:15px 14px; border-bottom:1px solid var(--border); vertical-align:top; font-size:13px; }
.my-orders-table tbody tr:last-child td{ border-bottom:0; }
.my-order-number{ color:var(--mint); font:700 13px var(--font-mono); }
.my-order-product{ max-width:200px; margin:4px 0 7px; color:var(--text); font-weight:600; overflow-wrap:anywhere; }
.my-order-type{ display:inline-flex; padding:3px 7px; border-radius:999px; background:var(--bg-raised); color:var(--text-dim); font-size:10px; font-weight:700; }
.my-order-type.is-sell{ color:var(--gold); }
.my-order-type.is-buy{ color:var(--mint); }
.my-order-amount{ color:var(--text); font:700 14px var(--font-mono); white-space:nowrap; }
.my-order-payment-method{ margin-bottom:7px; color:var(--text); font-weight:600; }
.my-order-transaction-label{ color:var(--text-dim); font-size:11px; }
.my-order-transaction-value,.my-order-transaction-pending{ display:block; max-width:180px; margin-top:3px; overflow-wrap:anywhere; font:12px var(--font-mono); }
.my-order-transaction-pending{ color:var(--text-dim); font-family:inherit; }
.my-order-status{ display:inline-flex; max-width:190px; padding:6px 9px; border:1px solid transparent; border-radius:999px; font-size:11px; font-weight:700; line-height:1.35; }
.my-order-status.status-pending{ color:var(--gold); background:rgba(255,196,87,.1); border-color:rgba(255,196,87,.24); }
.my-order-status.status-confirmed{ color:var(--mint); background:rgba(53,224,161,.1); border-color:rgba(53,224,161,.24); }
.my-order-status.status-paid{ color:var(--mint); background:rgba(53,224,161,.16); border-color:rgba(53,224,161,.32); }
.my-order-status.status-rejected{ color:var(--danger); background:rgba(255,90,90,.1); border-color:rgba(255,90,90,.24); }
.my-order-actions{ display:grid; justify-items:start; gap:8px; min-width:110px; }
.my-order-details{ max-width:230px; }
.my-order-details summary{ color:var(--mint); cursor:pointer; white-space:nowrap; }
.my-order-details-content{ display:grid; gap:8px; min-width:190px; padding:11px 0 3px; }
.my-order-details-content p{ margin:0; color:var(--text-dim); font-size:12px; overflow-wrap:anywhere; }
.my-order-detail-row{ display:grid; gap:3px; font-size:12px; overflow-wrap:anywhere; }
.my-order-detail-row span{ color:var(--text-dim); }
.my-order-details-content .order-gift-code{ margin:0; font-size:12px; }
.my-orders-empty{ padding:24px; color:var(--text-dim); background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius); text-align:center; }
.seller-submission-details{ margin-top:6px; font-size:12px; }
.seller-submission-details summary{ color:var(--mint); cursor:pointer; }
.seller-submission-details pre{ max-width:260px; max-height:120px; overflow:auto; white-space:pre-wrap; overflow-wrap:anywhere; color:var(--text); background:var(--bg-raised); padding:8px; border-radius:6px; }
.order-gift-code{ margin-top:12px; padding:10px; border:1px dashed var(--mint); color:var(--mint); border-radius:8px; word-break:break-all; }
.seller-image-modal{ position:relative; width:min(760px,94vw); max-height:90vh; overflow:auto; }
.seller-image-modal img{ display:block; max-width:100%; max-height:78vh; object-fit:contain; margin:12px auto 0; }
.seller-image-close{ display:block; margin-left:auto; }
.sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.gateway-admin-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:14px; }
.gateway-admin-card{ background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius); padding:16px; }
.cashout-method-create-form,
.cashout-method-admin-card{ display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,210px),1fr)); align-items:end; gap:12px; }
.cashout-method-create-form{ margin:16px 0; padding:16px; background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius); }
.cashout-method-admin-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr)); gap:14px; margin:16px 0 30px; }
.cashout-method-admin-card{ padding:16px; background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius); }
.cashout-method-admin-card .field{ margin:10px 0 0; }
.cashout-method-active{ display:flex; align-items:center; gap:8px; margin:12px 0; color:var(--text-dim); font-size:13px; }
.cashout-method-preview{ display:flex; align-items:center; gap:10px; min-height:42px; margin-top:10px; color:var(--text-dim); font-size:13px; }
.cashout-method-preview img{ width:40px; height:40px; object-fit:contain; border:1px solid var(--border); border-radius:9px; background:var(--bg-raised); }

.faq-item{ padding: 14px 0; border-bottom: 1px solid var(--border); }
.faq-item:last-child{ border-bottom:none; }
.faq-q{ font-weight:600; margin-bottom:6px; }
.faq-a{ color: var(--text-dim); font-size:14px; }

.profile-row{
  display:flex; justify-content:space-between; gap:16px;
  padding: 10px 0; border-bottom: 1px solid var(--border); font-size:14px;
}
.profile-row:last-of-type{ border-bottom:none; }
.profile-row span{ color: var(--text-dim); }
.profile-brand-image{
  display:block;
  width:88px;
  height:58px;
  object-fit:cover;
  margin:0 auto 16px;
  border-radius:8px;
  border:1px solid var(--border);
}
.profile-visibility{
  display:flex;
  align-items:center;
  gap:9px;
  margin-top:16px;
  color:var(--text-dim);
  font-size:13px;
  cursor:pointer;
}
.profile-visibility input{ accent-color:var(--mint); }
.profile-setting-status{ min-height:18px; margin-top:7px; color:var(--mint); font-size:12px; }
.daily-streak-card{ display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:12px; }
.daily-streak-card p{ color:var(--text-dim); font-size:13px; margin:4px 0 0; }
.offerwall-filter-label{ display:block; color:var(--text-dim); font-size:12px; margin:0 0 6px; }
.offerwall-type-filter{ min-width:190px; margin-bottom:12px; padding:9px 11px; background:var(--bg-card); border:1px solid var(--border); border-radius:8px; color:var(--text); font:inherit; font-size:13px; }
.offerwall-filter-empty{ color:var(--text-dim); font-size:13px; }
.offer-count{ display:inline-grid; place-items:center; min-width:19px; height:19px; margin-left:3px; padding:0 5px; border-radius:999px; background:var(--bg-card); color:var(--text-dim); font-size:10px; vertical-align:middle; }
.earn-offers-history{ scroll-margin-top:20px; }
.saved-payout-tools{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:12px; margin-bottom:16px; background:var(--bg-raised); border:1px solid var(--border); border-radius:10px; }
.saved-payout-tools p{ margin:0; color:var(--text-dim); font-size:12px; }
.saved-payout-tools div{ display:flex; flex-wrap:wrap; gap:7px; justify-content:flex-end; }
.cashout-timeline{ display:flex; gap:0; list-style:none; margin:0; padding:0; min-width:270px; }
.cashout-timeline li{ position:relative; display:flex; flex:1; flex-direction:column; gap:3px; min-width:0; color:var(--text-dim); font-size:10px; }
.cashout-timeline li::before{ content:""; display:block; width:9px; height:9px; margin-bottom:3px; border-radius:50%; background:var(--border); }
.cashout-timeline li:not(:last-child)::after{ content:""; position:absolute; top:4px; left:9px; right:0; height:1px; background:var(--border); }
.cashout-timeline li.complete::before,.cashout-timeline li.current::before{ background:var(--mint); }
.cashout-timeline li.complete:not(:last-child)::after{ background:var(--mint); }
.cashout-timeline li.current{ color:var(--mint); font-weight:700; }
.cashout-timeline small{ font-size:9px; font-weight:400; }
.account-activity-list{ display:grid; gap:10px; max-width:760px; }
.account-activity-item{ padding:14px 16px; border:1px solid var(--border); border-radius:10px; background:var(--bg-card); }
.account-activity-item time{ display:block; color:var(--text-dim); font-size:11px; margin-bottom:5px; }
.account-activity-item strong{ text-transform:capitalize; }
.account-activity-item p,.activity-empty{ color:var(--text-dim); font-size:13px; margin:4px 0 0; }
.tx-table{ width:100%; border-collapse: collapse; font-size: 14px; }
.tx-table th{ text-align:left; color: var(--text-dim); font-size: 12px; text-transform:uppercase; letter-spacing:.04em; padding: 10px; border-bottom: 1px solid var(--border);}
.tx-table td{ padding: 12px 10px; border-bottom: 1px solid var(--border); }
.pts-pos{ color: var(--mint); font-family: var(--font-mono); }
.pts-neg{ color: var(--danger); font-family: var(--font-mono); }

.daily-card{
  display:flex; align-items:center; justify-content:space-between;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px 20px;
  margin-bottom: 28px;
}
.pending-card{
  display:flex; align-items:center; justify-content:space-between;
  background: rgba(240,180,41,0.06);
  border: 1px solid rgba(240,180,41,0.3);
  border-radius: var(--radius);
  padding: 14px 20px;
  margin-bottom: 12px;
}
.pending-hold-item{
  display:flex; justify-content:space-between; align-items:center;
  padding: 10px 14px; background: var(--bg-card); border:1px solid var(--border);
  border-radius: 9px; margin-bottom: 8px; font-size: 13px;
}
.pending-hold-item .hold-source{ font-weight:600; }
.pending-hold-item .hold-countdown{ color: var(--gold); font-family: var(--font-mono); font-size:12px; }
.network-picker{ display:flex; gap:10px; margin-bottom:20px; flex-wrap:wrap; }
.network-pill{
  padding: 9px 16px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--bg-card);
  color: var(--text-dim);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}
.network-pill.active{ border-color: var(--mint); color: var(--mint); background: rgba(53,224,161,0.08); }

.toast-stack{ position: fixed; top: 20px; right: 20px; z-index: 200; display:flex; flex-direction:column; gap:10px; }
.captcha-slot{
  display:flex;
  justify-content:center;
  align-items:center;
  width:100%;
  min-height:78px;
  overflow:hidden;
}
.captcha-slot > div,
.captcha-slot iframe{
  max-width:100%;
}
.captcha-slot > div{
  transform:scale(.9);
  transform-origin:center center;
}
/* Google's floating reCAPTCHA v3 badge (bottom-right corner of every page)
   was overlapping other UI. Hiding it is allowed by Google's reCAPTCHA FAQ
   as long as the required attribution text is shown somewhere near the
   protected form instead — see .captcha-attribution below, toggled on by
   captcha.js only when the recaptcha provider is actually active. */
.grecaptcha-badge{ visibility: hidden; }
.captcha-attribution{
  font-size: 11px;
  color: var(--text-dim);
  text-align: center;
  margin: -6px 0 10px;
}
.captcha-attribution a{ color: var(--text-dim); text-decoration: underline; }
.toast{
  background: var(--bg-card);
  border: 1px solid var(--mint);
  color: var(--text);
  border-radius: 10px;
  padding: 12px 16px;
  font-size: 14px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.35);
  animation: toastIn .2s ease;
}
@keyframes toastIn{ from{ opacity:0; transform: translateX(20px);} to{ opacity:1; transform:translateX(0);} }

.modal-backdrop{
  position: fixed; inset:0; background: rgba(0,0,0,.6);
  display:none; align-items:center; justify-content:center; z-index: 100;
}
.modal-backdrop.open{ display:flex; }
.modal{ width: 420px; max-width: 92vw; }

/* Leaderboard */
.leaderboard-row{
  display:flex; align-items:center; gap: 14px;
  padding: 12px 16px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--bg-card);
  margin-bottom: 8px;
}
.lb-rank{ font-family: var(--font-mono); font-weight:700; color: var(--text-dim); width: 28px; }
.lb-rank.top1{ color: var(--gold); }
.lb-rank.top2{ color: #C9CDD3; }
.lb-rank.top3{ color: #C08A4E; }
.lb-name{ flex:1; font-weight:600; }
.lb-points{ font-family: var(--font-mono); color: var(--mint); font-weight:700; }

/* Referral card */
.referral-box{
  display:flex; gap:10px; align-items:center;
  background: var(--bg-raised);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px 14px;
  font-family: var(--font-mono);
  font-size: 13px;
  word-break: break-all;
}
.referral-stats{ display:flex; gap: 24px; margin-top: 20px; }
.referral-stats .stat .num{ color: var(--mint); }

/* Status badges (admin) */
.badge{
  display:inline-block; font-size: 11px; font-weight:700;
  padding: 3px 9px; border-radius: 20px; text-transform: uppercase; letter-spacing: .03em;
}
.badge-pending{ background: rgba(240,180,41,.12); color: var(--gold); border:1px solid rgba(240,180,41,.35); }
.badge-approved{ background: rgba(53,224,161,.12); color: var(--mint); border:1px solid rgba(53,224,161,.35); }
.badge-active{ background: rgba(53,224,161,.12); color: var(--mint); border:1px solid rgba(53,224,161,.35); }
.badge-banned{ background: rgba(255,107,107,.12); color: var(--danger); border:1px solid rgba(255,107,107,.35); }
.badge-paid{ background: rgba(53,224,161,.2); color: var(--mint); border:1px solid var(--mint); }
.badge-rejected{ background: rgba(255,107,107,.12); color: var(--danger); border:1px solid rgba(255,107,107,.35); }
.badge-hold{ background: rgba(255,159,67,.12); color: #ff9f43; border:1px solid rgba(255,159,67,.35); }

/* Admin */
.admin-login-shell{ min-height:100vh; display:flex; align-items:center; justify-content:center; }
.admin-tab-panel{ min-width:0; }
.overview-grid{ display:grid; grid-template-columns: repeat(auto-fit, minmax(180px,1fr)); gap:16px; margin-bottom: 32px; }
.overview-card{
  position:relative; overflow:hidden; min-width:0;
  background:linear-gradient(145deg, var(--bg-card), var(--bg-raised));
  border:1px solid var(--border); border-radius:var(--radius); padding:20px;
  box-shadow:var(--shadow-soft);
  transition:transform .18s ease, border-color .18s ease;
}
.overview-card::before{ content:""; position:absolute; inset:0 0 auto; height:3px; background:linear-gradient(90deg, var(--mint), rgba(45,212,176,0)); }
.overview-card:hover{ transform:translateY(-2px); border-color:var(--mint-dim); }
.overview-card .num{ font-family:var(--font-mono); font-size:clamp(22px, 2.4vw, 28px); font-weight:700; color:var(--gold); overflow-wrap:anywhere; }
.overview-card .label{ font-size:11px; color:var(--text-dim); text-transform:uppercase; letter-spacing:.07em; margin-top:7px; }
.admin-section-note{ color:var(--text-dim); font-size:13px; margin:-8px 0 20px; max-width:760px; }
.managed-offerwall-grid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; margin-top:22px; align-items:start; }
.managed-offerwall-form-card{ min-width:0; padding:22px; }
.managed-offerwall-form-card h3{ margin:0 0 10px; font:600 20px var(--font-display); }
.managed-provider-toggles{ display:flex; flex-wrap:wrap; gap:12px 20px; }
.managed-provider-toggles label{ display:inline-flex; align-items:center; gap:8px; color:var(--text-dim); font-size:13px; }
.managed-provider-toggles input{ width:auto; }
.managed-form-actions{ display:flex; gap:10px; margin-top:14px; }
.managed-callback-guide{ padding:14px; margin-top:14px; background:var(--bg-raised); border:1px solid var(--border); border-radius:10px; font-size:12px; overflow-wrap:anywhere; }
.managed-callback-guide p{ color:var(--text-dim); margin:8px 0 0; line-height:1.5; }
.managed-callback-guide code,.admin-callback-path{ font:11px var(--font-mono); overflow-wrap:anywhere; }
.admin-offerwall-logo{ display:block; width:38px; height:38px; margin-bottom:6px; object-fit:contain; background:#fff; border-radius:7px; }
.admin-managed-offer-image{ width:56px; height:42px; object-fit:cover; border-radius:6px; background:var(--bg-raised); }
.admin-offerwall-id{ display:block; margin-top:4px; color:var(--text-dim); font-size:10px; }
.admin-callback-path{ display:block; max-width:260px; margin-top:5px; color:var(--mint); }
.managed-row-actions{ min-width:140px; }
.managed-row-actions .btn{ margin:2px; }
.managed-offers-admin-heading{ margin-top:32px; }
.po-tools-grid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; align-items:start; }
.po-tools-card{
  position:relative; min-width:0; margin:0; padding:26px;
  background:linear-gradient(150deg, var(--bg-card), var(--bg-raised));
  border-color:var(--border);
  box-shadow:var(--shadow-soft);
}
.po-tools-card::before{ content:""; position:absolute; inset:0 0 auto; height:3px; background:linear-gradient(90deg, var(--mint), var(--gold)); }
.po-tools-card h3{ margin:0 0 8px; font-family:var(--font-display); font-size:21px; letter-spacing:-.02em; }
.po-tools-description{ min-height:38px; margin:0 0 20px; color:var(--text-dim); font-size:13px; }
.po-tools-fields{ display:grid; gap:14px; }
.po-tools-card .field{ min-width:0; padding:13px; margin:0; background:var(--bg-raised); border:1px solid var(--border); border-radius:11px; }
.po-tools-card .field label{ font-weight:600; color:var(--text); }
.po-tools-card input[type="file"]{ display:block; max-width:100%; padding:9px; border:1px dashed var(--border); border-radius:8px; background:var(--bg-card); color:var(--text-dim); font-size:12px; }
.po-tools-card .field small{ display:block; margin-top:6px; color:var(--text-dim); font-size:12px; }
.po-tools-submit{ margin-top:18px; min-height:44px; }
.po-tool-status{ min-height:18px; margin:12px 0 0; }
.po-tools-checkbox-label{ display:flex; align-items:center; gap:8px; font-weight:400; }
.po-tools-checkbox-label input{ width:auto; }
.action-row{ display:flex; gap:6px; }
.btn-xs{ padding: 5px 10px; font-size: 12px; border-radius: 7px; }
.offer-form-grid{ display:grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.offer-form-grid .field-full{ grid-column: 1 / -1; }

@media (max-width: 900px){
  .hero{ grid-template-columns: 1fr; }
  .partners-grid{ grid-template-columns: repeat(3, 1fr); }
  .feature-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dash-shell{ grid-template-columns: 1fr; }
  .sidebar{ border-right:none; border-bottom: 1px solid var(--border); }
  .hero h1{ font-size: 38px; }

  .sidebar-v2{
    position:static;
    top:auto;
    height:auto;
    overflow:visible;
    border-right:none; border-bottom: 1px solid var(--border);
    padding: 10px 12px;
  }

  .sidebar-v2 nav{ flex-direction:row; overflow-x:auto; gap:6px; }
  .nav-link-v2{ flex-direction:column; gap:4px; padding: 8px 14px; font-size:11px; white-space:nowrap; }
  .nav-link-v2 svg{ width:20px; height:20px; }
  .dash-main{ padding: 18px; }
  .topbar{ padding: 12px 16px; }
  .points-pill{ font-size:12px; padding:6px 10px; }
  .avatar-dropdown{ width: 200px; }
  .market-filters{ flex-wrap:wrap; }
  .market-filters input, .market-filters select{ flex:1 1 100%; }
  .market-trust-strip{ grid-template-columns:1fr; }
  .sidebar-v2{
    box-sizing:border-box;
    width:100%;
    min-width:0;
  }
  .sidebar-v2 nav{
    box-sizing:border-box;
    width:100%;
    min-width:0;
    flex-wrap:nowrap;
    overflow-x:auto;
    overscroll-behavior-x:contain;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:thin;
  }
  .sidebar-v2 .nav-link-v2{ flex:0 0 auto; }
  #adminPanel .dash-shell{ grid-template-columns:minmax(0, 1fr); }
  #adminPanel .overview-grid{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
}

@media (max-width:760px){
  .po-tools-grid{ grid-template-columns:1fr; }
  .po-tools-description{ min-height:0; }
  .po-tools-card{ padding:22px; }
  .managed-offerwall-grid{ grid-template-columns:1fr; }
}

@media (max-width:600px){
  .dash-main{ padding:14px; min-width:0; }
  .dash-shell,
  .dash-main{ box-sizing:border-box; width:100%; min-width:0; }
  .topbar{ flex-wrap:wrap; gap:8px; }
  .topbar-right{ flex:1 1 100%; justify-content:flex-end; gap:8px; }
  .daily-streak-card{ align-items:flex-start; flex-direction:column; }
  .daily-streak-card button{ width:100%; }
  .sub-tabs{ gap:6px; overflow-x:auto; }
  .sub-tab{ flex-shrink:0; margin-right:8px; white-space:nowrap; }
  .earn-offers-history .tx-table{ display:block; overflow-x:auto; white-space:nowrap; }
  #subtab-wdhistory,
  #subtab-txhistory{ max-width:100%; overflow-x:auto; overscroll-behavior-x:contain; }
  #tab-chat .chat-input-row{ min-width:0; }
  .my-orders-summary{ gap:7px; }
  .my-orders-stat{ padding:11px 10px; }
  .my-orders-stat span{ font-size:10px; }
  .my-orders-stat strong{ font-size:19px; }
  .my-orders-toolbar{ align-items:stretch; flex-wrap:wrap; }
  .my-orders-toolbar input{ flex:1 1 100%; min-width:0; }
  .my-orders-toolbar select{ flex:1 1 auto; min-width:0; }
  .my-orders-toolbar button{ flex:0 0 auto; }
  .my-orders-table-wrap{ overflow:visible; background:transparent; border:0; }
  .my-orders-table,
  .my-orders-table tbody{ display:grid; gap:11px; }
  .my-orders-table thead{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
  .my-orders-table tr{ display:grid; gap:0; padding:3px 13px; background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius); }
  .my-orders-table td{ display:grid; grid-template-columns:minmax(96px,35%) minmax(0,1fr); gap:10px; padding:10px 0; border-bottom:1px solid var(--border); overflow-wrap:anywhere; }
  .my-orders-table td:last-child{ border-bottom:0; }
  .my-orders-table td::before{ content:attr(data-label); color:var(--text-dim); font-size:11px; font-weight:600; }
  .my-order-product{ max-width:none; }
  .my-order-transaction-value,.my-order-transaction-pending{ max-width:none; }
  .my-order-details{ max-width:100%; }
  .my-order-details-content{ min-width:0; }
  .saved-payout-tools{ align-items:stretch; flex-direction:column; }
  .saved-payout-tools div{ justify-content:flex-start; }
  .cashout-timeline{ min-width:230px; }
}

.dashboard-load-error-banner,.dashboard-load-error{
  color:var(--danger);
  text-align:center;
  padding:14px;
}
.dashboard-load-error-banner{
  margin:0 0 16px;
  border:1px solid color-mix(in srgb,var(--danger) 45%,transparent);
  border-radius:10px;
  background:var(--bg-card);
}
/* ---- Live Earnings Ticker ---- */
.live-ticker{
  display:flex; align-items:center; gap:10px;
  background: var(--bg-card); border:1px solid var(--border); border-radius: var(--radius);
  padding: 10px 16px; margin-bottom: 20px; overflow: hidden;
}
.live-ticker-dot{
  width:8px; height:8px; border-radius:50%; background: var(--mint); flex-shrink:0;
  box-shadow: 0 0 0 0 rgba(53,224,161,0.6);
  animation: liveTickerPulse 2s infinite;
}
@keyframes liveTickerPulse{
  0%{ box-shadow: 0 0 0 0 rgba(53,224,161,0.5); }
  70%{ box-shadow: 0 0 0 8px rgba(53,224,161,0); }
  100%{ box-shadow: 0 0 0 0 rgba(53,224,161,0); }
}
.live-ticker-track{
  display:flex; flex-direction:column; gap:4px; font-size:13px; color: var(--text-dim);
  max-height: 20px; overflow:hidden;
}
.live-ticker-item{ white-space:nowrap; }

/* ---- Offer category filter tabs ---- */
.offer-category-tabs{ display:flex; gap:8px; flex-wrap:wrap; margin: 16px 0; }
.cat-tab{
  padding: 7px 16px; border-radius: 999px; border:1px solid var(--border); background: transparent;
  color: var(--text-dim); font-size:13px; cursor:pointer; transition: all .15s ease;
}
.cat-tab:hover{ border-color: var(--mint); color: var(--text); }
.cat-tab.active{ background: var(--mint); border-color: var(--mint); color: #06120D; font-weight:600; }

/* ---- Admin: drawer / side panel ---- */
.admin-drawer-backdrop{
  position: fixed; inset:0; background: rgba(0,0,0,0.5); display:none; z-index: 90;
}
.admin-drawer-backdrop.open{ display:block; }
.admin-drawer{
  position: fixed; top:0; right:0; height:100%; width: min(480px, 100%);
  background: var(--bg-card); border-left:1px solid var(--border);
  transform: translateX(100%); transition: transform .2s ease; z-index: 91;
  overflow-y:auto; padding: 24px;
}
.admin-drawer-backdrop.open .admin-drawer{ transform: translateX(0); }
.admin-drawer h3{ font-family: var(--font-display); margin: 20px 0 10px; font-size:15px; }
.admin-drawer h3:first-child{ margin-top:0; }
.admin-drawer-row{ display:flex; justify-content:space-between; font-size:13px; padding:6px 0; border-bottom:1px solid var(--border); }
.admin-drawer-row span:first-child{ color: var(--text-dim); }
.admin-drawer-close{ position:absolute; top:16px; right:16px; }
.risk-flag{ color:#ff6b6b; font-weight:600; }
.ip-mismatch{ color:#ff6b6b; font-weight:600; }
.clickable-row{ cursor:pointer; transition: background .12s ease; }
.clickable-row:hover{ background: rgba(53,224,161,0.06); }

/* ---- Community chat (dashboard) ---- */
.chat-shell{
  display:flex; flex-direction:column;
  height: 64vh; max-height: 620px; min-height: 360px;
  width:100%; min-width:0;
  background: var(--bg-card); border:1px solid var(--border); border-radius: var(--radius);
  overflow:hidden;
}
.chat-messages{
  flex:1; overflow-y:auto; padding: 16px; display:flex; flex-direction:column; gap:12px;
}
.chat-msg{ max-width: 78%; align-self:flex-start; }
.chat-msg-mine{ align-self:flex-end; }
.chat-msg-meta{
  display:flex; align-items:center; gap:8px; margin-bottom:4px; font-size:11px; color: var(--text-dim);
}
.chat-msg-mine .chat-msg-meta{ justify-content:flex-end; }
.chat-msg-name{ font-weight:600; color: var(--text); }
.chat-admin-badge{
  background: var(--gold); color:#1a1400; font-size:10px; font-weight:700;
  padding:1px 6px; border-radius:999px; margin-left:4px; vertical-align:middle;
}
.chat-msg-bubble{
  background: var(--bg-raised); border:1px solid var(--border); border-radius:12px;
  padding:10px 14px; font-size:14px; line-height:1.45; word-break:break-word; white-space:pre-wrap;
}
.chat-msg-mine .chat-msg-bubble{ background: var(--mint-dim); border-color: var(--mint-dim); }
.chat-msg-admin .chat-msg-bubble{ border-color: var(--gold); }

/* Admin moderation view — messages are clickable to delete */
#chatAdminMessages .chat-msg{ align-self:flex-start; max-width:640px; width:100%; cursor:pointer; border-radius:10px; padding:2px; transition: background .12s ease; }
#chatAdminMessages .chat-msg:hover:not(.chat-msg-deleted){ background: rgba(255,107,107,0.08); }
#chatAdminMessages .chat-msg-deleted{ opacity:0.5; cursor:default; }
#chatAdminMessages .chat-msg-deleted .chat-msg-bubble{ text-decoration: line-through; }
.chat-input-row{
  display:flex; gap:10px; padding: 12px 16px; border-top:1px solid var(--border); background: var(--bg-raised);
}
.chat-input-row input{
  flex:1 1 0%; width:0; min-width:0; background: var(--bg-card); border:1px solid var(--border); border-radius:8px;
  padding:10px 14px; color: var(--text); font-size:14px; font-family: var(--font-body);
}
.chat-input-row input:focus{ outline:none; border-color: var(--mint-dim); }

/* Admin panel: keep navigation and wide data tables usable on small screens. */
.admin-session-status{
  color:var(--text-dim);
  font-size:13px;
  line-height:1.5;
  margin:0 0 12px;
}
.admin-session-retry{ width:100%; margin-bottom:14px; }
body.admin-session-pending .page-loader{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
}

@media (max-width:900px){
  #adminPanel .dash-main{ min-width:0; }
  #adminPanel .dash-shell,
  #adminPanel .sidebar,
  #adminPanel .dash-main{ box-sizing:border-box; width:100%; min-width:0; }
  #adminPanel .tx-table{ display:block; max-width:100%; overflow-x:auto; }
  #adminPanel .tx-table th,
  #adminPanel .tx-table td{ white-space:nowrap; }
  #adminPanel .section-head{ gap:12px; }
  #adminPanel .sidebar{
    position:sticky;
    top:0;
    z-index:30;
    padding:10px 12px;
    background:var(--bg);
  }
  #adminPanel .sidebar nav{
    box-sizing:border-box;
    width:100%;
    min-width:0;
    flex-direction:row;
    gap:8px;
    overflow-x:auto;
    overscroll-behavior-x:contain;
    scrollbar-width:thin;
    padding-bottom:4px;
  }
  #adminPanel .sidebar a{ flex:0 0 auto; white-space:nowrap; }
}

@media (max-width:600px){
  body{ background-attachment:scroll; }
  .site-header{ padding:12px 16px; gap:8px; }
  .site-header .logo-image{ width:112px; height:34px; }
  .site-header .header-actions{ gap:6px; }
  .site-header .header-actions .btn{ padding:8px 10px; font-size:12px; }
  .hero{ padding:44px 0 36px; gap:28px; }
  .hero h1{ font-size:clamp(30px, 8vw, 36px); }
  .hero p.lead{ font-size:15px; }
  .feature-grid,
  .benefit-grid{ grid-template-columns:minmax(0, 1fr); }
  .partners-grid{ grid-template-columns:repeat(2, minmax(0, 1fr)); gap:10px; }
  .partner-tile{ padding:14px 8px; overflow-wrap:anywhere; }
  .stat-row{ display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:10px; }
  .stat{ min-width:0; }
  .stat .num{ font-size:clamp(16px, 5vw, 22px); }
  .stat .label{ font-size:9px; letter-spacing:.02em; }
  section{ padding:38px 0; }
  .section-head h2{ font-size:22px; }
  .section-head p{ font-size:13px; }
  .feature-card{ min-height:0; }
  .modal-backdrop{ align-items:flex-start; justify-content:center; overflow-y:auto; padding:16px 12px; }
  .modal-backdrop > .card{ max-height:calc(100vh - 32px); max-height:calc(100dvh - 32px); overflow:auto; margin:auto 0; }
  .btn{ min-height:42px; }
  .sub-tabs .sub-tab,
  #adminLoginModeTabs .sub-tab{ min-height:44px; }
  .network-pill,
  .offer-category-tabs .cat-tab{ min-height:42px; }
  .toast-stack{ left:12px; right:12px; top:12px; }
  .toast{ max-width:100%; overflow-wrap:anywhere; }
  input:not([type="checkbox"]):not([type="radio"]),
  select,
  textarea{ font-size:16px; }
  .admin-login-shell{ padding:16px; }
  .admin-login-shell .auth-card{ width:100% !important; padding:22px 18px; }
  #adminLoginModeTabs{ display:flex; }
  #adminLoginModeTabs .sub-tab{ flex:1 0 auto; text-align:center; }
  #adminPanel .site-header{ padding:10px 14px; gap:10px; }
  #adminPanel .site-header .logo{ font-size:16px; }
  #adminPanel .dash-main{ padding:16px 12px; }
  #adminPanel .admin-tab-panel{ padding:24px 0; }
  #adminPanel .overview-grid{ gap:10px; margin-bottom:24px; }
  #adminPanel .overview-card{ padding:15px 13px; border-radius:12px; }
  #adminPanel .overview-card .num{ font-size:clamp(18px, 5.5vw, 23px); }
  #adminPanel .overview-card .label{ font-size:9px; line-height:1.4; }
  #adminPanel .po-tools-grid{ gap:14px; }
  #adminPanel .po-tools-card{ padding:19px 15px; }
  #adminPanel .po-tools-card h3{ font-size:19px; }
  #adminPanel .po-tools-card .field{ padding:11px; }
  #adminPanel .po-tools-card input[type="file"]{ font-size:11px; }
  #adminPanel .po-tools-submit{ width:100%; }
  #adminPanel .managed-offerwall-grid{ gap:12px; }
  #adminPanel .managed-offerwall-form-card{ padding:18px 14px; }
  #adminPanel .managed-form-actions{ flex-wrap:wrap; }
  #adminPanel .managed-form-actions .btn{ flex:1; }
  #adminPanel .section-head{ align-items:flex-start; flex-wrap:wrap; }
  #adminPanel .section-head > div{ width:100%; flex-wrap:wrap; }
  #usersSearchInput{ min-width:0; flex:1 1 100%; }
  #adminPanel .chat-input-row{ align-items:stretch; flex-direction:column; }
  #adminPanel .chat-input-row button{ min-height:42px; }
  .admin-offerwall-table-wrap{ max-width:100%; overflow-x:auto; }

  #signupCard,
  #loginCard,
  #forgotCard,
  #resetCard,
  #verifyCard{
    box-sizing:border-box;
    width:100%;
    max-width:480px;
    margin:0 auto;
    padding:24px 20px;
  }
  #signupCard h2,
  #loginCard h2,
  #forgotCard h2,
  #resetCard h2,
  #verifyCard h2{ font-size:24px; }
  #signupCard .field input,
  #loginCard .field input,
  #forgotCard .field input,
  #resetCard .field input,
  #verifyCard .field input{ min-height:46px; font-size:16px; }
  #signupCard .btn-block,
  #loginCard .btn-block,
  #forgotCard .btn-block,
  #resetCard .btn-block,
  #verifyCard .btn-block{ min-height:46px; }
  #signupCard .form-toggle,
  #loginCard .form-toggle,
  #forgotCard .form-toggle,
  #resetCard .form-toggle,
  #verifyCard .form-toggle{ line-height:1.6; }
}