/* Shared Wexside chrome header for app pages — paste into HTML */

/* Bridge: keep mk/tk/ad modules, paint page with wex tokens */
body.wx.mk-page,
body.wx.tk-page,
body.wx.ad-page,
body.wx.nl-dash-page {
  background: var(--wx-bg);
  color: var(--wx-text);
}

body.wx .mk,
body.wx .tk,
body.wx .ad,
body.wx .nl-dash {
  padding-top: calc(var(--wx-nav-h) + 1.25rem);
}

body.wx .mk-hero h1,
body.wx .tk-bar h1,
body.wx .ad-head h1,
body.wx .nl-dash-profile h1 {
  font-family: var(--wx-display);
}

body.wx .mk-seg-btn.on,
body.wx .tk-create,
body.wx .ad-btn-primary,
body.wx .nl-btn-primary,
body.wx .nl-dash-download {
  background: var(--wx-accent) !important;
  border-color: transparent !important;
  color: #121218 !important;
}

body.wx .mk-seg-btn,
body.wx .mk-bal-btn,
body.wx .ad-btn-ghost,
body.wx .tk-back,
body.wx .mk-back {
  border-radius: var(--wx-radius-pill) !important;
}

body.wx .mk-list .mk-card,
body.wx .tk-list .tk-item,
body.wx .ad-panel,
body.wx .nl-dash-panel,
body.wx .nl-dash-card {
  background: var(--wx-card) !important;
  border: 1px solid var(--wx-border) !important;
  border-radius: var(--wx-radius) !important;
}

body.wx .ad-side,
body.wx .ad-side-btn.on,
body.wx .side .wx-btn.on {
  background: rgba(176, 164, 227, 0.14) !important;
  color: #fff !important;
}

body.wx .ad-side-btn:hover,
body.wx .side .wx-btn:hover {
  border-color: rgba(176, 164, 227, 0.45) !important;
}

body.wx .plan-pick .plan-card.on,
body.wx .plan-pick button.on {
  border-color: var(--wx-accent) !important;
  box-shadow: 0 0 0 1px var(--wx-accent);
}

body.wx input,
body.wx select,
body.wx textarea {
  border-radius: 12px;
}

body.wx .toast {
  z-index: 10050;
}

@media (max-width: 960px) {
  body.wx .ad {
    grid-template-columns: 1fr !important;
  }

  body.wx .ad-side {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
  }

  body.wx .ad-side-label {
    width: 100%;
  }
}