/* fixes-1: shared Terminal + InScreener polish layer (loaded last on both pages) */

/* ── #2 Disabled primary buttons read as disabled, not as a broken orange CTA ── */
html body .btn-primary:disabled,
html body .pool-widget .btn-primary:disabled,
html body .swap-widget .btn-primary:disabled {
  background: rgba(255, 255, 255, 0.06);
  background-image: none;
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: #a39b93;
  box-shadow: none;
  cursor: not-allowed;
}

/* ── #6 Home "Latest swaps": give the table room, keep rows on one line ── */
@media (min-width: 1100px) {
  .mk-home-footer { grid-template-columns: minmax(260px, 0.55fr) minmax(0, 1.45fr); align-items: start; }
}
.mk-swaps-table th,
.mk-swaps-table td { white-space: nowrap; vertical-align: middle; }
.mk-swaps-table td { padding-top: 0.55rem; padding-bottom: 0.55rem; }

/* Horizontal-scroll affordance for any data table that can't fit */
.mk-table-scroll {
  background:
    linear-gradient(90deg, var(--mk-panel-bg-solid, #141311) 30%, rgba(20, 19, 17, 0)) left center / 28px 100% no-repeat local,
    linear-gradient(270deg, var(--mk-panel-bg-solid, #141311) 30%, rgba(20, 19, 17, 0)) right center / 28px 100% no-repeat local,
    radial-gradient(farthest-side at 0 50%, rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0)) left center / 14px 100% no-repeat scroll,
    radial-gradient(farthest-side at 100% 50%, rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0)) right center / 14px 100% no-repeat scroll;
}

/* ── #7 No sideways page scroll on phones (layout viewport must never exceed device width) ── */
html, body { overflow-x: clip; max-width: 100%; }

/* ── #9 Pair chart toolbar: wallet tracker is one aligned row; on phones the
      chip groups collapse into one swipeable row so the chart is above the fold ── */
.mk-chart-wallet { flex-wrap: nowrap; }
.mk-chart-wallet .mk-wallet-input {
  flex: 1 1 auto;
  min-width: 11.5rem;
  height: 36px;
  font-size: 0.8rem;
}
.mk-chart-wallet .mk-tool-chip { flex: 0 0 auto; height: 36px; display: inline-flex; align-items: center; }
.mk-chart-wallet .mk-wallet-summary,
.mk-chart-wallet > :not(input):not(button) { flex-basis: 100%; }
.mk-chart-wallet:has(.mk-wallet-summary) { flex-wrap: wrap; }

@media (max-width: 640px) {
  .mk-chart-topbar {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 0.4rem;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 0.25rem;
    margin-bottom: 0.5rem;
    mask-image: linear-gradient(90deg, #000 88%, transparent);
    -webkit-mask-image: linear-gradient(90deg, #000 88%, transparent);
  }
  .mk-chart-topbar::-webkit-scrollbar { display: none; }
  .mk-chart-topbar > .mk-chart-toolbar {
    flex: 0 0 auto;
    flex-wrap: nowrap;
    margin: 0;
    width: auto;
  }
  .mk-chart-topbar > .mk-chart-fallback-note { flex: 0 0 auto; white-space: nowrap; margin: 0; font-size: 11px; }
  .mk-chart-topbar > .mk-chart-toolbar--wallet { order: 10; }
  .mk-chart-topbar .mk-chart-wallet { width: auto; flex-wrap: nowrap; }
  .mk-chart-topbar .mk-chart-wallet .mk-wallet-input { width: 10rem; flex: 0 0 10rem; height: 32px; font-size: 12px; }
  .mk-chart-topbar > .mk-chart-toolbar + .mk-chart-toolbar {
    padding-left: 0.4rem;
    border-left: 1px solid rgba(255, 255, 255, 0.08);
  }
  .mk-chart-topbar button { font-size: 11px; }

  /* #8 Trades table → two-line rows, no sideways scroll */
  .mk-trades-table { min-width: 0 !important; width: 100%; }
  .mk-trades-table thead { display: none; }
  .mk-trades-table, .mk-trades-table tbody { display: block; }
  .mk-trades-table tr.mk-trade-row {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas: "side time price" "amt amt usd";
    column-gap: 0.6rem;
    row-gap: 0.15rem;
    align-items: baseline;
    padding: 0.65rem 0.15rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  }
  .mk-trades-table tr.mk-trade-row > td { padding: 0; border: 0; white-space: nowrap; font-size: 0.8rem; text-align: left; }
  .mk-trades-table tr.mk-trade-row > td:nth-child(1) { grid-area: time; color: var(--muted); overflow: hidden; text-overflow: ellipsis; }
  .mk-trades-table tr.mk-trade-row > td:nth-child(2) { grid-area: side; }
  .mk-trades-table tr.mk-trade-row > td:nth-child(3) { grid-area: price; text-align: right; color: var(--cream); }
  .mk-trades-table tr.mk-trade-row > td:nth-child(4) { grid-area: amt; color: var(--text); }
  .mk-trades-table tr.mk-trade-row > td:nth-child(5) { grid-area: usd; text-align: right; color: var(--muted); }
  .mk-trades-table tr.mk-trade-row > td:nth-child(n+6) { display: none; }
  .mk-trades-table tr:not(.mk-trade-row) > td { display: block; padding: 1rem 0.25rem; }
}

/* ===================================================================
   #10 — Type floor.
   Desktop (≥721px): nothing below 12px (selectors measured by scan.py).
   Phones: the ORIGINAL compact proportions stay the reference; only
   what was genuinely too small is lifted, in three tiers:
     · small-caps micro labels (nav labels, kickers, stat labels, th) ≥ 10.5px
     · UI chrome (buttons, chips, pills, meta, ticker)                ≥ 11px
     · body copy (paragraphs, hints, empty states, values)            ≥ 12px
   fix-2 lesson: a type floor must not flatten the hierarchy — micro
   labels stay visibly smaller than the body.
   =================================================================== */
@media (min-width: 721px) {
  html body :is(
    .bottom-nav-label, .mk-mobile-nav-item > span, .mk-mobile-nav-item em,
    .btn-connect, .lang-toggle, .lang-btn, .lang-menu button, .mk-header-wallet-btn,
    .nav-screener-arrow, .mk-nav--desktop > a, .mk-nav-cta, .mk-nav-watch,
    .ticker, .ticker > span,
    .listing-promo-title, .listing-promo-badge > span, .listing-promo-cta, .listing-promo-ghost,
    .start-path-kicker, .start-path-num, .start-path-step > strong, .start-path-now-hint,
    .start-path-cta, .start-path-dismiss,
    .footer-col > h3, .footer-copy, .footer-legal, .footer-tagline, .footer-trust, .mk-footer-head,
    .activity-filters > button, .seg-control > button, .activity-kicker,
    .chart-trades-chip, .chart-vol-chip, .chart-vol-ma-chip, .chart-kicker, .chart-sub, .chart-change,
    .pool-stat-tile > span, .pool-panel-kicker, .pair-info-kicker, .pair-info-label,
    #pair-pooled-label-0, #pair-pooled-label-1,
    #pair-mcap, #pair-pooled-0, #pair-pooled-1, #pair-vol-24h, #pair-vol-30d,
    #add-bal-fb, #add-bal-tlb, #add-name-0, #add-name-1,
    #stat-lock-label, #stat-price-label, #stat-reserve-label,
    .liq-preview-label, .live-swaps-meta, .lp-pair-name, p.hint, p.empty,
    .staking-kicker, .staking-desc, .staking-note, .staking-tagline, .staking-badge,
    .staking-cap-title, .staking-caps > li, .staking-caps li > strong, .staking-tg > span,
    .staking-open-btn, #stake-bot-handle-label,
    .rw-label, .rw-sub, .rw-panel-desc, .rw-stats dt,
    .mk-btn-ghost, .mk-btn-primary, .mk-addr-link, .mk-tx-link,
    .mk-pair-tab, .mk-period-btn, .mk-quote-chip, .mk-range-chip, .mk-screener-tab,
    .mk-tool-chip, .mk-toolbar-btn, .mk-type-chip, .mk-mrow-star,
    .mk-pair-cell, .mk-mrow-sub, .mk-screener-toolbar-meta, .mk-pair-sub, .mk-chart-fallback-note,
    .mk-community-desc, .mk-community-kicker, .mk-community-link-host, .mk-community-link-label,
    .mk-chart-leg-item, .mk-chart-leg-item > b, .mk-dex-stat-label, .mk-fb-ref, .mk-gainer-vol,
    .mk-marquee-chg, .mk-marquee-price,
    .mk-mlist-h-asset, .mk-mlist-h-chg, .mk-mlist-h-price,
    .mk-mrow-chg, .mk-mrow-dot, .mk-mrow-quote, .mk-mrow-rank, .mk-mrow-vol,
    .mk-pct-pill, .mk-price-quote, .mk-stat-chip-label, .mk-trade-side, .mk-trade-tick,
    .mk-trades-page-meta, td.mk-col-rank, td.mk-num,
    .rl-chain-label > span, .rl-panel-head > h2, .rl-type-chip, .rl-type-badge,
    .rl-cube-kicker, .rl-cube-sub, .rl-page-info, .rl-tx-time,
    table th
  ) {
    font-size: max(12px, 0.7rem);
  }
  html body #pane-rewards :is(.rw-label, .rw-sub, .rw-stats dt, .rw-panel-desc) { font-size: max(12px, 0.7rem); }
}

@media (max-width: 720px) {
  /* micro labels — small caps, ≥10.5px */
  html body :is(.bottom-nav-label, .mk-mobile-nav-item > span,
    .pair-info-label, .pool-stat-tile > span, #stat-lock-label, #stat-price-label, #stat-reserve-label,
    .staking-kicker, .staking-badge, .staking-cap-title, .start-path-kicker,
    .mk-mlist-h-asset, .mk-mlist-h-price, .mk-mlist-h-chg, table th,
    .mk-dex-stat-label, .mk-community-kicker, .rl-panel-head > h2, .rl-type-badge,
    .footer-col > h3, .mk-footer-head, .chart-kicker, .pool-panel-kicker, .pair-info-kicker,
    .listing-promo-badge > span, .rl-chain-label > span, .rl-cube-kicker, .mk-mrow-rank) {
    font-size: 10.5px;
  }
  html body #pane-rewards :is(.rw-label, .rw-stats dt) { font-size: 10.5px; }

  /* UI chrome — ≥11px (was 8–10.8px) */
  html body :is(.activity-filters > button, .seg-control > button,
    .btn-connect, .lang-toggle, .lang-btn, .mk-header-wallet-btn,
    .listing-promo-cta, .listing-promo-ghost, .start-path-num, .start-path-dismiss,
    .ticker, .ticker > span, .chart-change, .chart-trades-chip, .chart-vol-chip, .chart-vol-ma-chip,
    #pair-pooled-label-0, #pair-pooled-label-1, #add-name-0, #add-name-1, #add-bal-tlb, #add-bal-fb,
    .live-swaps-meta, .lp-pair-name, .staking-open-btn,
    .mk-screener-tab, .mk-period-btn, .mk-toolbar-btn, .mk-mrow-star, .mk-screener-toolbar-meta,
    .mk-mrow-quote, .mk-mrow-dot, .mk-mrow-vol, .mk-mrow-sub, .mk-mrow-chg, .mk-community-link-host,
    .mk-trades-page-meta, .mk-btn-ghost, .mk-btn-primary, .mk-pair-tab, .mk-chart-leg-item, .mk-chart-leg-item > b,
    .mk-trade-side, .rl-type-chip, .rl-cube-sub, .rl-tx-time, .rl-page-info, .mk-community-link-label,
    .listing-promo-title) {
    font-size: 11px;
  }

  /* body copy — ≥12px */
  html body :is(p.hint, p.empty, .chart-sub, .mk-pair-sub, .staking-desc, .staking-tagline, .staking-note,
    .staking-caps > li, .staking-caps li > strong, .start-path-now-hint,
    .footer-copy, .footer-legal, .mk-community-desc, .liq-preview-label) {
    font-size: 12px;
  }
  html body #pane-rewards :is(.rw-sub, .rw-panel-desc) { font-size: 12px; }
}

/* ===================================================================
   #11 — Touch targets ≥ 44×44 on phones, WITHOUT changing what you see.
   fix-2: v1 grew the visible controls (min-height 44px) and inflated
   the whole mobile UI. Now every small control keeps its original size
   and gets an invisible hit area: an absolutely positioned ::after whose
   inset is min(0, (100% − 44px) / 2) on each axis, so the hit box is
   exactly max(own size, 44px) and centred on the control. (Percentages
   in top/bottom resolve against height and left/right against width.)
   summary uses ::before (its ::after is the chevron).
   =================================================================== */
@media (max-width: 720px) {
  /* zero-specificity: any authored position (absolute/fixed/sticky) wins */
  :where(a.logo, .lang-toggle, .lang-menu button, .btn-connect:not(.is-loading),
    .listing-promo-cta, .listing-promo-ghost, .start-path-dismiss, .start-path-cta,
    .icon-btn, .btn-max, .btn-flip, .seg-control > button, .chart-vol-chip, .chart-vol-ma-chip, .chart-trades-chip,
    .footer-logo, .footer-link, .staking-tg, .activity-filters > button, .start-path-show,
    .mk-logo-link, .mk-header-wallet-btn, .mk-screener-tab, .mk-period-btn, .mk-toolbar-btn, .mk-mrow-star, .mk-star,
    .mk-btn-ghost, .mk-btn-primary, .rl-type-chip, .mk-pair-tab, .mk-range-chip, .mk-quote-chip, .mk-type-chip,
    .mk-tool-chip, .mk-exp-chip, .mk-addr-link, .mk-tx-link, .mk-row-boost) { position: relative; }
  html body :is(a.logo, .lang-toggle, .lang-menu button, .btn-connect:not(.is-loading),
    .listing-promo-cta, .listing-promo-ghost, .start-path-dismiss, .start-path-cta,
    .icon-btn, .btn-max, .btn-flip, .seg-control > button, .chart-vol-chip, .chart-vol-ma-chip, .chart-trades-chip,
    .footer-logo, .footer-link, .staking-tg, .activity-filters > button, .start-path-show,
    .mk-logo-link, .mk-header-wallet-btn, .mk-screener-tab, .mk-period-btn, .mk-toolbar-btn, .mk-mrow-star, .mk-star,
    .mk-btn-ghost, .mk-btn-primary, .rl-type-chip, .mk-pair-tab, .mk-range-chip, .mk-quote-chip, .mk-type-chip,
    .mk-tool-chip, .mk-exp-chip, .mk-addr-link, .mk-tx-link, .mk-row-boost) { overflow: visible; }
  html body :is(a.logo, .lang-toggle, .lang-menu button, .btn-connect:not(.is-loading),
    .listing-promo-cta, .listing-promo-ghost, .start-path-dismiss, .start-path-cta,
    .icon-btn, .btn-max, .btn-flip, .seg-control > button, .chart-vol-chip, .chart-vol-ma-chip, .chart-trades-chip,
    .footer-logo, .footer-link, .staking-tg, .activity-filters > button, .start-path-show,
    .mk-logo-link, .mk-header-wallet-btn, .mk-screener-tab, .mk-period-btn, .mk-toolbar-btn, .mk-mrow-star, .mk-star,
    .mk-btn-ghost, .mk-btn-primary, .rl-type-chip, .mk-pair-tab, .mk-range-chip, .mk-quote-chip, .mk-type-chip,
    .mk-tool-chip, .mk-exp-chip, .mk-addr-link, .mk-tx-link, .mk-row-boost)::after {
    content: "";
    position: absolute;
    inset: min(0px, calc((100% - 44px) / 2));
    border-radius: inherit;
    background: none;
  }
  :where(summary) { position: relative; }
  html body summary::before { content: ""; position: absolute; inset: min(0px, calc((100% - 44px) / 2)) 0; }
  /* the CTA label fits at 11px in en/zh/ru, so no ellipsis clipping is needed */
  html body .btn-connect { text-overflow: clip; max-width: none; }
}

/* ===================================================================
   #14 — Getting-started stepper on phones: one row, ALL labels kept
   (Connect · Fund · Pair · Add LP), original 11.7px labels and 15px
   numbers. Room comes from dropping the redundant "START" kicker and
   tightening the connector rules — not from hiding labels.
   =================================================================== */
@media (max-width: 720px) {
  html body .start-path-kicker { display: none; }
  html body .start-path-steps { gap: 0; overflow: visible; }
  html body .start-path-step { padding-inline: 0.1rem; gap: 0.28rem; }
  html body .start-path-step + .start-path-step::before { width: 0.45rem; margin-right: 0.12rem; }
  html body .start-path-dismiss { flex: none; }
}
@media (max-width: 374px) {
  html body .start-path-step { gap: 0.22rem; padding-inline: 0.05rem; }
  html body .start-path-step + .start-path-step::before { width: 0.3rem; margin-right: 0.08rem; }
  html body .start-path-step > strong { letter-spacing: -0.02em; }
}

/* #17 — chart unit chip, first item of the OHLC legend */
html body .mk-chart-leg-unit {
  display: inline-flex; align-items: center;
  padding: 0.12rem 0.45rem; margin-right: 0.35rem;
  border: 1px solid rgba(232, 93, 4, 0.35); border-radius: 4px;
  color: var(--orange-bright, #ff8a3d);
  font-size: max(12px, 0.7rem); letter-spacing: 0.02em; white-space: nowrap;
  max-width: 14rem; overflow: hidden; text-overflow: ellipsis;
}

/* ===================================================================
   #18 — One keyboard focus ring for both products. Only :focus-visible
   (mouse/touch clicks stay clean); 2px orange + dark halo reads on
   orange, cream and near-black surfaces alike.
   =================================================================== */
html body :is(a, button, select, summary, input, textarea, [tabindex], [role="button"], [role="tab"]):focus-visible {
  outline: 2px solid var(--orange-bright, #ff8a3d) !important;
  outline-offset: 2px !important;
  box-shadow: 0 0 0 4px rgba(6, 6, 6, 0.85);
}
html body :is(input, textarea, select):focus-visible { outline-offset: 0 !important; }

/* ===================================================================
   #19 — One header language for Terminal + InScreener (no rebrand:
   logos, names and product colours stay). Explorer nav adopts the
   Terminal pill nav; its "Terminal" jump link mirrors Terminal's
   "InScreener ↗" link; the wallet CTA is the same solid orange.
   =================================================================== */
html body .mk-nav {
  gap: 0.35rem;
  padding: 0;
  border: 0;
  background: none;
  box-shadow: none;
}
html body .mk-nav a {
  font-family: var(--mono);
  font-size: max(12px, 0.7rem);
  font-weight: 550;
  letter-spacing: 0.05em;
  padding: 0.45rem 0.75rem;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.035);
  color: rgba(232, 224, 212, 0.72);
  line-height: 1.2;
  transition: color .15s ease, background .15s ease, border-color .15s ease;
}
html body .mk-nav a:hover {
  color: var(--cream);
  border-color: rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.07);
}
html body .mk-nav a.active {
  color: var(--cream);
  border-color: rgba(232, 93, 4, 0.6);
  background: rgba(232, 93, 4, 0.18);
  box-shadow: inset 0 1px 0 rgba(255, 180, 100, 0.1);
}
html body .mk-nav .mk-nav-cta,
html body .mk-nav .mk-nav-cta.active {
  margin-left: 0;
  font-weight: 700;
  color: #fff0e4;
  border-color: rgba(240, 120, 40, 0.75);
  background: linear-gradient(180deg, rgba(232, 93, 4, 0.38) 0%, rgba(232, 93, 4, 0.18) 100%);
  box-shadow: inset 0 1px 0 rgba(255, 210, 160, 0.2), 0 0 0 1px rgba(232, 93, 4, 0.08);
}
html body .mk-nav .mk-nav-cta:hover {
  color: #fff;
  border-color: rgba(255, 150, 70, 0.95);
  background: linear-gradient(180deg, rgba(240, 120, 40, 0.5) 0%, rgba(232, 93, 4, 0.28) 100%);
}

/* wallet CTA — same control as Terminal's .btn-connect */
html body .mk-header-wallet-btn--primary {
  font-family: var(--mono);
  font-weight: 700;
  font-size: max(12px, 0.78rem);
  letter-spacing: 0.01em;
  padding: 0.5rem 0.95rem;
  border: 1px solid var(--orange, #e85d04);
  border-radius: 9px;
  background: linear-gradient(180deg, #f07828 0%, var(--orange, #e85d04) 100%);
  color: #0a0a0a;
  box-shadow: 0 1px 0 rgba(255, 210, 160, 0.25) inset, 0 6px 16px -8px rgba(232, 93, 4, 0.55);
}
html body .mk-header-wallet-btn--primary:hover {
  background: linear-gradient(180deg, #f88838 0%, #f07020 100%);
  border-color: #f07020;
  color: #0a0a0a;
}

/* language dropdown: identical box on both pages */
@media (min-width: 721px) {
  html body :is(.header-wallet, .mk-header) .lang-toggle { min-height: 36px; border-radius: 8px; }
}

/* ===================================================================
   #25 — Mobile screener header + rows
   =================================================================== */
@media (max-width: 720px) {
  /* wallet CTA compact so the logo never truncates */
  /* same compact CTA as Terminal's mobile .btn-connect */
  html body .mk-header-wallet-btn--primary { padding: 6px 9px; font-size: 11px; border-radius: 8px; }
  html body .mk-header-bar { gap: 0.4rem 0.5rem; }
  html body .mk-logo-link { min-width: max-content; }
  /* search keeps the page gutter instead of running edge to edge */
  html body .mk-header-search { padding-inline: 0; }
  html body .mk-header-search input { border-radius: 10px; }

  /* change pills: same muted tints as desktop .mk-pct-pill */
  html body .mk-mrow-chg.up   { color: #5ec48a; background: rgba(90, 154, 110, 0.16); }
  html body .mk-mrow-chg.down { color: #f07272; background: rgba(224, 85, 85, 0.16); }

}
/* sparkline-less rows: centre the empty dash in the chart cell */
html body td .ui-empty-val, html body .mk-spark .ui-empty-val { display: block; text-align: center; color: rgba(232, 224, 212, 0.38); }
@media (max-width: 640px) {
  html body .mk-header .mk-header-inner { padding-inline: 12px; box-sizing: border-box; }
}
@media (max-width: 720px) {
  html body .mk-header .mk-logo-text { max-width: none; overflow: visible; }
  html body .mk-header :is(.mk-logo-img, .mk-logo-link img) { width: 28px; height: 28px; }
  html body .mk-header .mk-logo-link { gap: 0.4rem; }
  html body .mk-header-wallet-btn--primary { letter-spacing: 0; }
  /* row meta: the quote ticker must never collapse; volume gives way */
  html body .mk-mrow-quote { flex-shrink: 0; overflow: visible; }
  html body .mk-mrow-vol { flex-shrink: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
  /* screener tabs: even spacing at the 12px floor */
  html body .mk-screener-tab { padding-inline: 0.2rem; letter-spacing: 0.02em; }
}
@media (max-width: 720px) {
  html body .mk-screener-tabs {
    display: flex; gap: 1.1rem; overflow-x: auto; scrollbar-width: none;
    -webkit-mask-image: linear-gradient(90deg, #000 88%, transparent);
            mask-image: linear-gradient(90deg, #000 88%, transparent);
  }
  html body .mk-screener-tabs::-webkit-scrollbar { display: none; }
  html body .mk-screener-tab { flex: 0 0 auto; padding-inline: 0.15rem; }
}
@media (max-width: 400px) {
  html body .mk-mrow-price { font-size: 0.86rem; letter-spacing: -0.02em; }
  html body .mk-mrow-col--asset { gap: 0.5rem; }
}

/* ===================================================================
   #28 — Corner brackets: they sat 1px outside rounded (12–14px) cards
   and appeared on only some of them. One rule for every card in both
   products: no brackets; the orange accent lives in borders/headers.
   =================================================================== */
html body :is(.widget, .terminal-glass, .hub-glass, .portfolio-hero, .pf-stack, .pf-lp-panel,
  .activity-panel, .rewards-claim-card, .rewards-section, .rewards-doc, .staking-hero, .staking-body,
  .pool-shell > .position-card, .pool-shell > .pool-hero-stats, .admin-layout .admin-card)::before,
html body :is(.widget, .terminal-glass, .hub-glass, .portfolio-hero, .pf-stack, .pf-lp-panel,
  .activity-panel, .rewards-claim-card, .rewards-section, .rewards-doc, .staking-hero, .staking-body,
  .pool-shell > .position-card, .pool-shell > .pool-hero-stats, .admin-layout .admin-card)::after {
  content: none;
  display: none;
}

/* ===================================================================
   #20 — Three width tiers instead of five ad-hoc widths:
     full    → Swap, Rewards (dashboards)
     content → Staking, Rank, Activity (880px reading column)
     form    → LP (520px, same column as a transaction form)
   =================================================================== */
html body :is(#pane-rankings > .rankings-shell, #pane-staking > .staking-shell, #pane-activity > .activity-panel) {
  width: 100%;
  max-width: 880px;
  margin-inline: auto;
  box-sizing: border-box;
}

/* ===================================================================
   #29 — Rewards board: the tall claim card spans two rows; periods +
   locks share row 1 at equal height; history sits under them (cols 2–3)
   instead of a full-width strip with one line of text.
   =================================================================== */
@media (min-width: 1180px) {
  html body #pane-rewards .rw-layout { align-items: stretch; }
  html body #pane-rewards .rw-claim { grid-row: 1 / span 2; align-self: stretch; }
  html body #pane-rewards #rw-period-panel,
  html body #pane-rewards #rw-locks-panel { grid-row: 1; align-self: stretch; }
  html body #pane-rewards #rw-history-panel { grid-column: 2 / -1; grid-row: 2; align-self: stretch; }
  html body #pane-rewards .rw-col-folds { grid-row: 3; }
}
@media (min-width: 900px) and (max-width: 1179.98px) {
  html body #pane-rewards .rw-layout { align-items: stretch; }
}

/* ===================================================================
   #22 — One empty value everywhere: a muted "—" in the body face
   (display faces draw the em dash as a long bar, e.g. Claimable).
   =================================================================== */
html body :is(.is-empty-val, .ui-empty-val) {
  font-family: var(--mono, ui-monospace, monospace);
  font-weight: 400;
  color: rgba(232, 224, 212, 0.38) !important;
  letter-spacing: 0;
}
html body #pane-rewards .rw-amt strong.is-empty-val { font-size: 1.6rem; }


/* ===================================================================
   #21 — One button family across tabs (Swap's is the reference):
   sentence case, display face, 10px radius, flat orange primary,
   quiet outlined secondary. MAX is the same text action everywhere.
   Filter chips (Activity, Mempool) share one pill style.
   =================================================================== */
html body :is(.btn-primary, .btn-secondary) {
  font-family: var(--display, inherit);
  font-weight: 650;
  letter-spacing: 0;
  text-transform: none;
  border-radius: 10px;
}
html body .btn-primary:not(:disabled) {
  background: var(--orange);
  border: 1px solid var(--orange);
  color: #140e0a;
  box-shadow: none;
}
html body .btn-primary:hover:not(:disabled) { filter: brightness(1.08); }
html body .btn-secondary { font-size: 0.92rem; }

html body .btn-max {
  border: 0;
  background: none;
  font-family: var(--display, inherit);
  font-size: 12px;
  font-weight: 650;
  letter-spacing: 0.02em;
  text-transform: none;
  color: var(--orange);
  padding-inline: 0.5rem;
  border-radius: 6px;
}
html body .btn-max:hover { background: rgba(232, 93, 4, 0.1); }

html body :is(.activity-filters button, .rl-type-chip) {
  font-family: var(--mono, inherit);
  font-size: 12px;
  letter-spacing: 0.02em;
  text-transform: none;
  padding: 0.4rem 0.75rem;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.03);
  color: rgba(232, 224, 212, 0.66);
}
html body :is(.activity-filters button, .rl-type-chip):hover { color: var(--cream); border-color: rgba(255, 255, 255, 0.16); }
html body :is(.activity-filters button, .rl-type-chip).active {
  color: var(--orange-bright, #ff8a3d);
  border-color: rgba(232, 93, 4, 0.55);
  background: rgba(232, 93, 4, 0.12);
}
html body .activity-filters { display: flex; flex-wrap: wrap; gap: 0.4rem; }

/* ===================================================================
   #31 — Long-form copy in IBM Plex Sans (the Plex Mono sibling — same
   family, no rebrand). Mono stays for numbers, labels, tickers, code.
   =================================================================== */
:root { --prose: "IBM Plex Sans", "Noto Sans SC", system-ui, -apple-system, "Segoe UI", sans-serif; }
html body :is(.staking-desc, .staking-note, .staking-tagline, .staking-caps li,
  .rw-panel-desc, .rewards-doc p, .rewards-doc li, .rw-fold p, .rw-fold li, details p, details li,
  .rankings-lead, .rk-desc, .rankings-shell .hint, .activity-panel > .hint,
  .footer-tagline, .footer-trust, .listing-promo-title,
  .mk-community-desc, .mk-monetize-desc, .mk-boost-desc, .mk-ad-desc,
  .modal p, .fountain-lead) {
  font-family: var(--prose);
  letter-spacing: 0;
  line-height: 1.6;
}
html body .staking-desc { font-size: 0.95rem; max-width: 68ch; }

/* ===================================================================
   #30 / #32 — Empty states look intentional: one centred block with a
   quiet mark, used by every list that has nothing to show yet
   (no swaps, no holders, connect-to-view, no periods…).
   =================================================================== */
html body p.empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  min-height: 6.5rem;
  margin: 0.5rem 0 0;
  padding: 1.25rem 1rem;
  border: 1px dashed rgba(255, 255, 255, 0.09);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.015);
  color: rgba(232, 224, 212, 0.6);
  font-size: max(12px, 0.8rem);
  line-height: 1.5;
  text-align: center;
}
html body p.empty::before {
  content: "";
  flex: none;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 1.5px solid rgba(232, 93, 4, 0.38);
  background: radial-gradient(circle, rgba(232, 93, 4, 0.55) 0 2.5px, transparent 3px);
}
html body :is(#pane-activity, #pane-rankings) p.empty { min-height: 13rem; }
@media (max-width: 720px) {
  html body p.empty { min-height: 0; padding: 0.9rem 0.75rem; gap: 0.45rem; }
  html body p.empty::before { width: 20px; height: 20px; }
  html body :is(#pane-activity, #pane-rankings) p.empty { min-height: 8rem; }
  /* Live activity sits above the fold: one quiet line, like the original panel */
  html body #live-swaps-feed p.empty { min-height: 0; flex-direction: row; justify-content: flex-start; padding: 0.95rem 0.85rem; border-style: solid; border-color: rgba(255,255,255,0.05); background: rgba(0,0,0,0.22); text-align: left; }
  html body #live-swaps-feed p.empty::before { width: 7px; height: 7px; border: 0; background: rgba(232, 93, 4, 0.55); }
}
@media (min-width: 721px) { html body #live-swaps-feed p.empty { min-height: 5rem; } }

/* #26 — More sheet: native list rows with chevrons; header CTA room */
html body .more-nav-sheet-body { display: grid; gap: 0.4rem; padding: 0.75rem 1rem 0.25rem; }
html body .more-nav-item:not(.hidden) {
  display: flex; align-items: center; justify-content: space-between;
  min-height: 52px; padding: 0 1rem; border-radius: 12px; text-decoration: none;
}
html body .more-nav-item:not(.hidden)::after {
  content: "›"; font-size: 1.25rem; line-height: 1; color: rgba(232, 224, 212, 0.4); margin-left: 0.75rem;
}
html body .more-nav-item.nav-screener-link:not(.hidden)::after { content: "↗"; font-size: 0.95rem; }
@media (max-width: 720px) {
  html body .header .btn-connect { max-width: 9.75rem; }
}
html body #pane-rewards .rw-list p.empty { margin: 0.75rem 0 0; padding: 1rem; min-height: 5.5rem; }

/* ===================================================================
   #27 — Mempool: operations stay on one line when there is room; the
   rollup-block strip fades at the right edge so it reads as scrollable.
   =================================================================== */
html body .rl-tx-op { max-width: none; }
@media (min-width: 900px) {
  html body .rl-tx-what { flex-wrap: nowrap; }
  html body .rl-tx-what .rl-tx-op { white-space: nowrap; }
}
html body .rl-chain {
  -webkit-mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 56px), transparent);
          mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 56px), transparent);
  padding-right: 56px;
  scrollbar-width: thin;
  scrollbar-color: rgba(232, 93, 4, 0.35) transparent;
}
/* #18 — the Terminal nav scrolls horizontally (overflow clips); give the ring room */
@media (min-width: 721px) {
  html body .header .nav { padding-block: 5px; margin-block: -5px; }
}
html body :is(.start-path-steps, .mk-screener-tabs, .mk-chart-topbar, .rl-chain) :focus-visible { outline-offset: -2px !important; }
@media (min-width: 641px) {
  html body .mk-header-search { max-width: 280px; }
}
/* pair header actions on phones: one even row of four, never a lone orphan */
@media (max-width: 640px) {
  html body .mk-actions--compact { display: flex; flex-wrap: nowrap; gap: 6px; width: 100%; }
  html body .mk-actions--compact > * { flex: 1 1 auto; min-width: 44px; padding-inline: 0.4rem; white-space: nowrap; justify-content: center; text-align: center; }
}

/* fix-2 — bottom nav keeps the original small-caps look; 10px is the legible
   floor that still fits "ACTIVITY" in a 60px column at 360 */
@media (max-width: 720px) {
  html body .bottom-nav-label { font-size: 10px; letter-spacing: 0.03em; }
  html body .bottom-nav button { letter-spacing: 0.03em; }
}
@media (max-width: 720px) {
  /* Activity filters: original compact 4-up grid, unified pill styling */
  html body .activity-filters { display: flex; flex-wrap: wrap; gap: 0.3rem; }
  html body .activity-filters > button { flex: 1 1 auto; }
  html body .activity-filters > button { min-width: 0; padding: 0.32rem 0.45rem; font-size: 10.5px; letter-spacing: -0.01em; border-radius: 999px; white-space: nowrap; overflow: visible; text-overflow: clip; }
  /* empty states: quieter on phones */
  html body :is(#pane-activity, #pane-rankings) p.empty { min-height: 5.5rem; }
  html body #pane-rewards p.empty { padding: 0.75rem; gap: 0; }
  html body #pane-rewards p.empty::before { display: none; }
}
/* fix-2: long pair names ellipsize instead of running under the price column */
html body .mk-mrow-base { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
html body .mk-mrow-base > * { vertical-align: middle; }
@media (max-width: 720px) {
  /* chart fallback note gets its own line instead of being clipped inside the scrolling chip row */
  html body .mk-chart-topbar { flex-wrap: wrap; row-gap: 0.4rem; }
  html body .mk-chart-fallback-note { flex: 1 0 100%; white-space: normal; order: 99; margin: 0; }
}
@media (max-width: 720px) {
  html body .mk-mrow-vol { overflow: visible; text-overflow: clip; }
  html body .mk-mrow { column-gap: 0.4rem; padding-block: 0.8rem; }
  html body :is(.mk-mrow-col--chg, .mk-mlist-h-chg) { min-width: 4.1rem; }
  html body .mk-mrow-chg { min-width: 4.1rem; padding-inline: 0.25rem; }
  /* each chart chip group stays inside the card; overflow scrolls within the group */
  html body .mk-chart-topbar > .mk-chart-toolbar { max-width: 100%; overflow-x: auto; scrollbar-width: none; }
  html body .mk-chart-topbar > .mk-chart-toolbar::-webkit-scrollbar { display: none; }
  html body .mk-chart-topbar { overflow: visible; -webkit-mask-image: none; mask-image: none; }
  html body .mk-chart-topbar > .mk-chart-toolbar + .mk-chart-toolbar { padding-left: 0; border-left: 0; }
  html body .mk-chart-topbar > .mk-chart-toolbar--wallet { flex: 1 0 100%; width: 100%; }
  html body .mk-chart-topbar .mk-chart-wallet { width: 100%; }
  html body .mk-chart-topbar .mk-chart-wallet .mk-wallet-input { flex: 1 1 auto; width: auto; min-width: 0; max-width: none; }
}
@media (max-width: 374px) {
  html body .mk-chart-toolbar--quote button { padding-inline: 0.5rem; }
}
@media (max-width: 720px) {
  /* hit-slop follow-ups (fix-2): let the promo bar and screener tab scroller show the invisible hit area */
  html body .listing-promo-bar { overflow: visible; }
  html body .mk-screener-tabs { padding-block: 5px; margin-block: -5px; }
  :where(html body .mk-mobile-nav-item) { position: relative; }
  html body .mk-mobile-nav-item::after { content: ""; position: absolute; inset: min(0px, calc((100% - 44px) / 2)); }
  /* chips packed in rows: extend sideways to 44px but only into half the row gap vertically, so no chip steals its neighbour's visible area */
  html body .activity-filters > button::after { inset: -0.15rem min(0px, calc((100% - 44px) / 2)); }
}
@media (max-width: 720px) {
  /* Mempool ops table: fit the card (ops wrap) instead of hiding half of each row behind a sideways scroller */
  html body .rl-tx-table { min-width: 0; }
  html body .rl-tx-what { flex-wrap: nowrap; align-items: flex-start; }
  html body .rl-tx-what .rl-tx-op { white-space: normal; overflow-wrap: anywhere; min-width: 0; }
}
@media (max-width: 720px) {
  html body .rl-tx-table :is(th, td):first-child { width: 1%; white-space: nowrap; padding-right: 0.9rem; }
  html body .rl-type-chips .rl-type-chip { padding-inline: 0.55rem; }
}
@media (max-width: 374px) {
  html body .rl-type-chips .rl-type-chip { padding-inline: 0.45rem; letter-spacing: -0.01em; }
}