/* Solid brand surfaces, not white cards with colored accents.
   OKX stays monochrome and inverts with the surrounding theme. */
#page-trade-smart .ts2-brand[data-venue] {
  --reward-text:#1a2330;
  --reward-muted:#505e6e;
  --reward-surface:#ffffff;
  --reward-accent:#171a1f;
  --reward-edge:#717780;
  --reward-button:#171a1f;
  --reward-button-text:#ffffff;
  --reward-input:#ffffff;
  --reward-input-border:#8993a1;
  --venue-accent:var(--reward-edge);
  color:var(--reward-text);
  background:var(--reward-surface);
  border-top:2px solid var(--reward-edge);
}
[data-theme="dark"] #page-trade-smart .ts2-brand[data-venue="okx"] {
  --reward-text:#f2f5f9;
  --reward-muted:#b4bfce;
  --reward-surface:#171d27;
  --reward-accent:#ffffff;
  --reward-edge:#adb5c1;
  --reward-button:#f2f5f9;
  --reward-button-text:#14181f;
  --reward-input:#111722;
  --reward-input-border:#697a8e;
}
#page-trade-smart .ts2-brand[data-venue="bitunix"] {
  --reward-surface:#c5fa55;
  --reward-text:#142008;
  --reward-muted:#344820;
  --reward-accent:#142008;
  --reward-edge:#87a832;
  --reward-button:#17240e;
  --reward-button-text:#dcffa1;
  --reward-input:#e6ffb6;
  --reward-input-border:#4f692a;
}
#page-trade-smart .ts2-brand[data-venue="mexc"] {
  --reward-surface:#1955c7;
  --reward-text:#ffffff;
  --reward-muted:#e6efff;
  --reward-accent:#ffffff;
  --reward-edge:#3974e5;
  --reward-button:#f5f9ff;
  --reward-button-text:#153c85;
  --reward-input:#174295;
  --reward-input-border:#c3d5ff;
}
#page-trade-smart .ts2-brand[data-venue="hyperliquid"] {
  --reward-surface:#97fce4;
  --reward-text:#103c31;
  --reward-muted:#285448;
  --reward-accent:#103c31;
  --reward-edge:#358b76;
  --reward-button:#103c31;
  --reward-button-text:#c3fff0;
  --reward-input:#c6fff2;
  --reward-input-border:#397467;
}
#page-trade-smart .ts2-brand[data-venue="bybit"] {
  --reward-surface:#f7a600;
  --reward-text:#2a1b00;
  --reward-muted:#533500;
  --reward-accent:#2a1b00;
  --reward-edge:#be8000;
  --reward-button:#2a1b00;
  --reward-button-text:#ffe7b0;
  --reward-input:#ffcb62;
  --reward-input-border:#825c12;
}
#page-trade-smart .ts2-brand .ts2-name,
#page-trade-smart .ts2-brand .ts2-hook { color:var(--reward-text); }
#page-trade-smart .ts2-brand .ts2-hook em { color:var(--reward-accent); }
#page-trade-smart .ts2-brand .ts2-logo {
  color:var(--reward-accent);
  border-color:var(--reward-edge);
  background:var(--reward-input);
}
#page-trade-smart .ts2-brand :is(.ts2-perks,.ts2-eligibility-note,.ts2-native-amount,.ts2-tracking-note,.ts2-claimbtn) {
  color:var(--reward-muted);
  opacity:1;
}
#page-trade-smart .ts2-brand .ts2-perks a { color:var(--reward-accent); text-decoration:underline; }
#page-trade-smart .ts2-brand :is(.ts2-join,.f-go) {
  background:var(--reward-button);
  color:var(--reward-button-text);
  border-color:var(--reward-button);
  min-height:44px;
  line-height:1.35;
  white-space:normal;
  text-align:center;
  padding:10px 14px;
  box-shadow:none;
}
#page-trade-smart .ts2-brand :is(.ts2-join,.f-go):hover {
  background:var(--reward-button);
  color:var(--reward-button-text);
  border-color:var(--reward-button);
  filter:none;
  text-decoration:underline;
}
#page-trade-smart .ts2-brand :is(a,button,input):focus-visible {
  outline:2px solid var(--reward-accent);
  outline-offset:3px;
}
#page-trade-smart .ts2-brand .ts2-form input {
  color:var(--reward-text);
  background:var(--reward-input);
  border-color:var(--reward-input-border);
  min-width:0;
}
#page-trade-smart .ts2-brand .ts2-form input::placeholder { color:var(--reward-muted); opacity:1; }
#page-trade-smart .ts2-brand :is(.ts2-note,.ts2-done) { color:var(--reward-text); background:var(--reward-surface); }
#page-trade-smart .ts2-brand .ts2-ribbon {
  color:var(--reward-accent);
  border-color:var(--reward-edge);
  background:transparent;
}
#page-trade-smart .ts2-brand[data-venue="okx"] .ts2-recommended {
  color:var(--reward-text);
  border-color:var(--reward-edge);
  background:var(--reward-surface);
}

/* Same row and equal widths on desktop; readable two/one-column fallbacks. */
#page-trade-smart .ts2-row.ts2-four-offers {
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:12px;
  align-items:stretch;
}
#page-trade-smart .ts2-four-offers > .ts2-brand {
  display:flex;
  flex-direction:column;
  gap:6px;
  padding:18px;
  border:1px solid var(--reward-edge);
  border-radius:8px;
}
#page-trade-smart .ts2-four-offers .ts2-hook { font-size:24px; line-height:1.2; }
#page-trade-smart .ts2-four-offers .ts2-hook em { white-space:nowrap; }
#page-trade-smart .ts2-four-offers .ts2-hook small { font-size:13px; font-weight:600; letter-spacing:0; }
#page-trade-smart .ts2-four-offers .ts2-name { flex-wrap:wrap; }
#page-trade-smart .ts2-four-offers .ts2-tag {
  color:var(--reward-text);
  background:transparent;
  border-color:var(--reward-edge);
}
#page-trade-smart .ts2-four-offers .ts2-native-amount { margin:4px 0; font-size:11px; line-height:1.5; }
#page-trade-smart .ts2-four-offers .ts2-perks { margin:4px 0 8px; line-height:1.55; }
#page-trade-smart .ts2-four-offers .ts2-cta-row { padding-top:10px; }
#page-trade-smart .ts2-four-offers .ts2-join { font-size:12px; }
#page-trade-smart .ts2-offer-details { color:var(--reward-muted); margin-top:2px; font-size:11px; line-height:1.5; }
#page-trade-smart .ts2-offer-details summary { cursor:pointer; min-height:32px; padding:6px 0; }
#page-trade-smart .ts2-offer-details summary:focus-visible { outline:2px solid var(--reward-accent); outline-offset:2px; }
#page-trade-smart .ts2-offer-details .ts2-eligibility-note { margin:4px 0; font-size:11px; }
@media(max-width:899px) {
  #page-trade-smart .ts2-row.ts2-four-offers { grid-template-columns:repeat(2,minmax(0,1fr))!important; }
}
@media(max-width:540px) {
  #page-trade-smart .ts2-row.ts2-four-offers { grid-template-columns:1fr!important; }
}

/* The main offer uses an inverse monochrome surface, distinct from both the
   page canvas and the four compact, colored partner cards. */
#page-trade-smart .ts2-brand.ts2-okx-primary[data-venue="okx"] {
  --reward-surface:#111315;
  --reward-text:#ffffff;
  --reward-muted:#c5cbd2;
  --reward-accent:#ffffff;
  --reward-edge:#a3abb6;
  --reward-button:#ffffff;
  --reward-button-text:#111315;
  --reward-input:#23272d;
  --reward-input-border:#929ba8;
  grid-template-columns:minmax(0,1fr) minmax(260px,340px)!important;
  gap:18px 36px!important;
  padding:28px 32px!important;
  margin:12px 0 0;
  border:2px solid var(--reward-edge);
  border-radius:12px;
}
[data-theme="dark"] #page-trade-smart .ts2-brand.ts2-okx-primary[data-venue="okx"] {
  --reward-surface:#f3f5f7;
  --reward-text:#111315;
  --reward-muted:#4d5764;
  --reward-accent:#111315;
  --reward-edge:#ffffff;
  --reward-button:#111315;
  --reward-button-text:#ffffff;
  --reward-input:#ffffff;
  --reward-input-border:#7b8695;
}
#page-trade-smart .ts2-okx-primary .ts2-ribbon {
  background:var(--reward-button);
  color:var(--reward-button-text);
  border:0;
  border-radius:4px;
  padding:6px 10px;
  font-size:11px;
  font-weight:700;
  letter-spacing:.06em;
}
#page-trade-smart .ts2-okx-primary .ts2-name { flex-wrap:wrap; gap:10px; font-size:21px; }
#page-trade-smart .ts2-okx-primary .ts2-logo { width:36px; height:36px; flex:none; background:#ffffff; color:#111315; border-color:#a3abb6; }
#page-trade-smart .ts2-okx-primary .ts2-hook { display:flex; align-items:baseline; flex-wrap:wrap; gap:10px; margin:12px 0 0; font-size:20px; }
#page-trade-smart .ts2-okx-primary .ts2-hook em { font-size:64px; line-height:1; font-weight:700; letter-spacing:-.05em; }
#page-trade-smart .ts2-okx-primary .ts2-okx-reward-label { color:var(--reward-text); font-size:16px; line-height:1.4; margin:4px 0 12px; }
#page-trade-smart .ts2-okx-primary .ts2-perks { font-size:12px; line-height:1.6; max-width:580px; }
#page-trade-smart .ts2-okx-primary .ts2-eligibility-note { max-width:580px; }
#page-trade-smart .ts2-okx-primary .ts2-okx-action { padding-left:28px; border-left:1px solid var(--reward-edge); min-width:0; }
#page-trade-smart .ts2-okx-primary .ts2-join { min-height:54px; font-size:15px; font-weight:700; border-radius:7px; }
#page-trade-smart .ts2-okx-primary .ts2-tracking-note { max-width:none; line-height:1.5; }
@media(max-width:760px) {
  #page-trade-smart .ts2-brand.ts2-okx-primary[data-venue="okx"] { grid-template-columns:1fr!important; padding:22px!important; gap:18px!important; }
  #page-trade-smart .ts2-okx-primary .ts2-okx-action { border-left:0; border-top:1px solid var(--reward-edge); padding:16px 0 0; }
  #page-trade-smart .ts2-okx-primary .ts2-cta-row { margin-top:0; }
  #page-trade-smart .ts2-okx-primary .ts2-hook em { font-size:54px; }
}