/* Preview-only additions layered over the real QuantumScan style.css.
   New component styles proposed for the DEX/parity features - same visual language. */

/* Elegant slim preview ribbon (revision 2: replaces the loud purple bar) */
.preview-ribbon {
  position: fixed; top: 6px; left: 50%; transform: translateX(-50%); z-index: 9999;
  background: #ffffffe8; color: #421096; text-align: center;
  font-size: 11px; padding: 2px 14px; letter-spacing: 0.5px;
  border: 1px solid #d9ccf5; border-radius: 12px;
  box-shadow: 0 1px 4px rgba(66, 16, 150, 0.12); white-space: nowrap;
}
.preview-ribbon a { color: #6236ff; text-decoration: underline; }

/* Restore rounded table corners (same fix as production layout.html) */
.blocks-wallet .menu-container .blocks-content table,
.blocks-wallet .menu-container-mobile .blocks-content table {
  border-collapse: separate; border-spacing: 0;
}
.blocks-wallet .menu-container .blocks-content table tr:first-child th:first-child { border-top-left-radius: 6px; }
.blocks-wallet .menu-container .blocks-content table tr:first-child th:last-child { border-top-right-radius: 6px; }
.blocks-wallet .menu-container .blocks-content table tr:last-child td:first-child { border-bottom-left-radius: 6px; }
.blocks-wallet .menu-container .blocks-content table tr:last-child td:last-child { border-bottom-right-radius: 6px; }
.token-symbol { color: green; }

/* Wide tables scroll inside their card instead of overflowing the page */
.blocks-wallet .menu-container .blocks-content { overflow-x: auto; }

/* (7) 10px breathing room after the bottom-most component on every page */
.blocks-wallet .main-container > .menu-container:last-of-type,
.blocks-wallet .main-container > .menu-container-mobile:last-of-type,
.blocks-wallet .main-container > .menu-container-top:last-of-type {
  margin-bottom: 10px; padding-bottom: 10px;
}

/* Home chart/stat cards: 1, 2 or 4 per row (never an odd count above one).
   Column count is driven by CONTAINER queries against the content column
   itself -- not viewport breakpoints -- so any layout change (sidebar,
   margins, future column widths) adapts automatically. Cards flex between
   300 and 400px so four fit as soon as the column offers ~1260px. */
.blocks-wallet .main-container { container-type: inline-size; }
.blocks-wallet .home-card-grid {
  display: grid;
  /* Tracks stretch (1fr, not a 400px cap) so the strip's outer edges line up
     with the full-width table cards (.menu-container) above and below it. */
  grid-template-columns: repeat(2, minmax(300px, 1fr));
  gap: 20px;
  width: 100%;
  align-self: center;
  justify-content: center;
  margin-top: -10px;
}
.blocks-wallet .home-card-grid .medium-menu-items-row { min-width: 0; width: auto; }
/* The cards carry a legacy inline width:337px; inside the grid the track
   decides. */
.blocks-wallet .home-card-grid .menu-name-wrapper { width: 100% !important; gap: 8px; }
@container (min-width: 1260px) {
  .blocks-wallet .home-card-grid { grid-template-columns: repeat(4, minmax(300px, 1fr)); }
}
@container (max-width: 680px) {
  .blocks-wallet .home-card-grid { grid-template-columns: minmax(0, 1fr); }
}
/* Below the desktop breakpoint the table cards are .menu-container-mobile at
   calc(100vw - 30px); the card grid takes the same width so both leave the
   same gap to the browser edges. (The footer gets the same treatment next to
   its own base rule further down -- cascade order matters there.) */
@media (max-width: 1200px) {
  .blocks-wallet .home-card-grid { width: calc(100vw - 30px); }
}

/* Tab bar (same pattern as production txn-list-tabs) */
.txn-list-tabs { display: flex; flex-wrap: wrap; gap: 0; margin-bottom: 12px; border-bottom: 1px solid #dee2e6; }
.txn-list-tabs .txn-tab { padding: 10px 16px; font-size: medium; text-decoration: none; color: #000000; border-bottom: 2px solid transparent; margin-bottom: -1px; cursor: pointer; }
.txn-list-tabs .txn-tab:hover { color: #0a58ca; }
.txn-list-tabs .txn-tab-active { color: #212529; font-size: medium; font-weight: 600; cursor: default; border-bottom-color: #212529; }
/* Report-period nav cards hold nothing but a row of links, so they are stripped
   to the height of the pills themselves. */
.blocks-content.report-links-content { margin: 0; padding: 0; overflow: visible; }
/* Separate the pills from the card heading, but only where there is one --
   some strips render the pills alone and should stay flush. */
.top_toggle_btn + .blocks-content.report-links-content { margin-top: 10px; }
.blocks-content.report-links-content .txn-list-tabs.report-links {
  margin: 0; padding: 0; border-bottom: none; gap: 8px;
}
.blocks-content.report-links-content .txn-list-tabs.report-links .txn-tab {
  padding: 4px 14px; margin: 0; line-height: 1.4;
}
.menu-container:has(> .blocks-content.report-links-content),
.menu-container-mobile:has(> .blocks-content.report-links-content) {
  padding-bottom: 10px;
}
.menu-container > .blocks-content.report-links-content + *,
.report-links-content ~ * { margin-top: 0; }

/* Hash/address cell: the value and its expand/copy controls stay on one line,
   controls immediately to the right. Previously both floated, so in a narrow
   table cell the controls wrapped onto a line of their own beneath the value. */
.hash-cell { display: flex; align-items: center; gap: 6px; flex-wrap: nowrap; min-width: 0; }
.hash-cell .hash-cell-value { min-width: 0; display: inline-flex; align-items: center; gap: 4px; }
/* The failed-transaction marker sits inside the value; keep it from making that
   span taller than the row and knocking the controls out of alignment. */
.hash-cell .hash-cell-value img,
.hash-cell > img.txn-failed-icon { width: 18px !important; height: 18px; vertical-align: middle !important; margin: 0 !important; }

/* Detail rows show the full hash, so that variant is allowed to wrap and keeps
   its controls pinned to the top line rather than vertically centred. */
.hash-cell.hash-cell-wrap { flex-wrap: nowrap; align-items: flex-start; }
.hash-cell.hash-cell-wrap .hash-cell-value { display: inline; word-break: break-all; }
.hash-cell.hash-cell-wrap .expand-container,
.hash-cell.hash-cell-wrap .copy-container { margin-top: 3px; }
.hash-cell .expand-container,
.hash-cell .copy-container {
  float: none;
  display: inline-block;
  flex: 0 0 auto;
  vertical-align: middle;
  margin: 0;
  width: 18px;
  height: 18px;
  background-size: 18px 18px;
}

.tab-panel { display: none; width: 100%; min-width: 0; }
.tab-panel.tab-panel-active { display: block; }
.txn-list-tabs { width: 100%; min-width: 0; }

/* (5b) Theme-styled dropdowns */
select.qs-select {
  appearance: none; -webkit-appearance: none; -moz-appearance: none;
  background-color: #ffffff; color: #372339;
  border: 1px solid #d9ccf5; border-radius: 8px;
  padding: 5px 30px 5px 12px; font-size: 13px; cursor: pointer;
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%236236ff' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 10px center;
}
select.qs-select:hover, select.qs-select:focus { border-color: #6236ff; outline: none; box-shadow: 0 0 0 2px rgba(98, 54, 255, 0.12); }

/* Text/number inputs sharing the control look (report pages) -- same skin as
   qs-select minus the dropdown arrow. */
input.qs-select {
  background-color: #ffffff; color: #372339;
  border: 1px solid #d9ccf5; border-radius: 8px;
  padding: 5px 12px; font-size: 13px;
}
input.qs-select:hover, input.qs-select:focus { border-color: #6236ff; outline: none; box-shadow: 0 0 0 2px rgba(98, 54, 255, 0.12); }

/* DEX badge - identifies which DEX a pair/trade belongs to */
.dex-badge {
  display: inline-block; padding: 1px 8px; border-radius: 10px; font-size: 11px;
  background: #f1ecff; color: #421096; border: 1px solid #d9ccf5; vertical-align: middle; white-space: nowrap;
}
.dex-badge.dex-alt { background: #e8f7ff; color: #0a5875; border-color: #bfe6f5; }

/* Metadata quality / safety badges */
.quality-badge {
  display: inline-block; padding: 1px 8px; border-radius: 10px; font-size: 11px;
  background: #fff4e5; color: #8a5300; border: 1px solid #f0ddc0; vertical-align: middle; white-space: nowrap;
}
.quality-badge.quality-bad { background: #ffeaea; color: #8a1a1a; border-color: #f2cccc; }
.quality-badge.quality-ok { background: #eaf7ea; color: #1a6b1a; border-color: #cce8cc; }
/* (11) potential phishing */
.quality-badge.quality-phish { background: #ffe3e3; color: #a11212; border-color: #f0b8b8; font-weight: 600; }

/* (11) hidden-by-default phishing rows + reveal toggle row */
.phish-toggle-row td {
  background: #fdf6f6 !important; color: #a11212; font-size: 13px; cursor: pointer;
}
.phish-toggle-row td:hover { text-decoration: underline; }
.phish-row { display: none; }
.phish-row.phish-shown { display: table-row; }

/* (5d) Recognized assets (Q, WQ, Heisen, Y2Q) render as small chips sharing one
   color scheme, so copycats without the chip can't be mistaken for them. */
.tok {
  display: inline-block; padding: 0 6px; border-radius: 4px;
  font-weight: 600; font-size: 0.92em; line-height: 1.5; white-space: nowrap;
}
/* Function-name half of a method signature. Secondary accent, NOT the
   primary: row labels (.text-head) use the primary accent and the two sit
   on the same line in the mobile card. */
.sig-fn { color: var(--home-accent-2, #b1468d); font-weight: 600; }

/* On large viewports the 1400px card cap wasted the rest of the 95% content
   column and forced tables into needless horizontal scroll; let the cards
   use the full column there. */
@media (min-width: 1600px) {
  .blocks-wallet .menu-container,
  .blocks-wallet .menu-container-top,
  .site-footer {
    max-width: 100%;
  }
}

/* Q flow direction glyphs: orange up = Q went out, green down = Q came in.
   Semantic colors, identical in every theme; masked over the same
   circle-arrow icons the account list uses. */
.qflow {
  display: inline-block; width: 18px; height: 18px; vertical-align: -4px;
  background-color: currentColor;
}
.qflow-out {
  color: #d97706;
  -webkit-mask: url("img/arrow-up-circle-outline.svg") no-repeat center / 18px 18px;
  mask: url("img/arrow-up-circle-outline.svg") no-repeat center / 18px 18px;
}
.qflow-in {
  color: #0a7d4b;
  -webkit-mask: url("img/arrow-down-circle-outline.svg") no-repeat center / 18px 18px;
  mask: url("img/arrow-down-circle-outline.svg") no-repeat center / 18px 18px;
}

/* Divider between stacked items in one quantity cell (a token amount above,
   an incoming-Q amount below); rendered only when a cell holds both. */
.qty-sep {
  display: block;
  width: 72px;
  height: 1px;
  margin: 5px 0;
  background: var(--home-border, rgba(55, 35, 57, 0.18));
}

/* Home-page footer: the burger menu's links laid flat, on the theme surface. */
.site-footer {
  width: 100%;
  /* Full content-column width, so the footer's edges line up with the table
     cards (.menu-container) and the chart strip above. */
  max-width: 100%;
  align-self: center;
  margin-top: 12px;
  margin-bottom: 14px;
  padding: 12px 12px 14px;
  border-top: 1px solid var(--home-border, rgba(55, 35, 57, 0.12));
  background: var(--home-surface, rgba(255, 255, 255, 0.72));
  border-radius: 14px;
  box-shadow: 0px 8px 16px #00000014;
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: center;
}
.site-footer-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px 22px;
}
.site-footer-links a {
  color: var(--home-muted, #818181);
  text-decoration: none;
  font-size: 15px;
  transition: color 150ms ease;
}
.site-footer-links a:hover {
  color: var(--home-accent, #6236ff);
  text-decoration: underline;
}
.site-footer-social a { font-size: 14px; }
/* Same edge gaps as the mobile table cards (.menu-container-mobile). Must sit
   after the base .site-footer rule: equal specificity, cascade decides. */
@media (max-width: 1200px) {
  .site-footer { width: calc(100vw - 30px); }
}

.tok-q, .tok-wq, .tok-hei, .tok-y2q { background: #eae4ff; color: #4d28cf; }
.tok-generic { background: #f0f0f4; color: #555; font-weight: 500; }

/* (1) dual timestamps: absolute on top, relative beneath */
.dt-abs { display: block; white-space: nowrap; }
.dt-rel { display: block; font-size: 11px; color: #7a7a8c; white-space: nowrap; }

/* On mobile the chart panel's desktop side padding costs 40px of an already
   narrow card, leaving the canvas visibly inset. Trim it so the chart spans
   the card. */
.menu-container-mobile .chart-panel { padding-left: 4px; padding-right: 4px; }
.menu-container-mobile .chart-canvas-wrap { width: 100%; }

/* Report stat cards keep their desktop fixed width, which is wider than half a
   phone screen, so they stack one per row. Let them share the row instead. */
.menu-container-mobile .stat-boxes .stat-box {
  flex: 1 1 90px;
  min-width: 0;
  width: auto;
}

/* Mobile detail cards are label-then-value on one line ("Hash: 0x…"), so the
   absolute timestamp stays inline with its "Date:" label instead of dropping to
   its own line. The relative age keeps its own line directly beneath. */
.menu-container-mobile .dt-abs { display: inline; }
.menu-container-mobile .dt-rel { line-height: 1.2; }

/* The shared expand control floats left, which drags it in front of the value
   it belongs to. It is always rendered immediately after that value, so keep it
   inline everywhere -- including desktop tables that reuse the class. */
.expand-container-mobile {
  float: none;
  display: inline-block;
  vertical-align: middle;
  margin: 0 0 0 6px;
  width: 18px;
  height: 18px;
  background-size: 18px 18px;
}

/* (2) method-name chip shown under Type in txn tables */
.method-chip {
  display: inline-block; margin-top: 3px; padding: 0 7px; border-radius: 4px;
  font-family: Consolas, monospace; font-size: 11px;
  background: #eef1f6; color: #372339; border: 1px solid #d7deea; white-space: nowrap;
}

/* Account type badge */
.type-badge {
  display: inline-block; padding: 1px 8px; border-radius: 4px; font-size: 11px; font-weight: 600;
  background: #eef1f6; color: #372339; border: 1px solid #d7deea; vertical-align: middle;
}

/* Txn action summary line */
.txn-action {
  background: #f9f9ff; border: 1px solid #0000001f; border-radius: 6px;
  padding: 10px 14px; margin-bottom: 14px; font-size: 14px; color: #372339;
}
.txn-action .action-verb { font-weight: 700; color: #421096; }
/* Failed transactions get a red accent so the strip reads as a failure at a
   glance. The .home-experience prefix is required: the theme sheet styles
   .txn-action at the same specificity and loads after this file, so an
   unprefixed rule would lose the tie. */
.home-experience .txn-action.txn-action-failed,
.txn-action.txn-action-failed {
  border-left: 3px solid #a11212;
  background: #fdeeee;
}
/* Succeeded transactions take their colour from the active theme rather than a
   fixed green: every theme defines --home-accent, so the strip reads as part of
   the page it sits on instead of importing one palette into all of them. The
   unprefixed rule is the pre-theme fallback (the theme class is applied by JS
   after first paint) and keeps the green.

   Failure stays red in every theme on purpose — that colour is semantic, not
   decorative, and must not become, say, green under a theme whose accent is
   green. Only its ground is mixed into the theme surface so it still belongs. */
.txn-action.txn-action-ok {
  border-left: 3px solid #1a6b1a;
  background: #eaf7ea;
}
.home-experience .txn-action.txn-action-ok {
  border-left: 3px solid var(--home-accent);
  background: color-mix(in srgb, var(--home-accent) 12%, var(--home-surface-solid, #ffffff));
}
.home-experience .txn-action.txn-action-failed {
  background: color-mix(in srgb, #a11212 10%, var(--home-surface-solid, #ffffff));
}
/* The outcome is carried by the strip's colour, so the verb carries no colour of
   its own — coloured bold text on a coloured ground was doing the same job
   twice and read as an error even on success. It follows the theme's ink, which
   is near-black on the light themes and light on the dark ones, so the strip
   stays legible whatever ground the theme gives it. */
.txn-action.txn-action-ok .action-verb,
.txn-action.txn-action-failed .action-verb { color: #1b1b1b; }
.home-experience .txn-action.txn-action-ok,
.home-experience .txn-action.txn-action-failed,
.home-experience .txn-action.txn-action-ok .action-verb,
.home-experience .txn-action.txn-action-failed .action-verb { color: var(--home-ink); }
/* The revert reason is the actionable part of the strip, so it carries the
   danger colour rather than inheriting the body text colour. */
.revert-reason { color: #a11212; font-weight: 600; }
.home-experience[data-home-theme="midnight"] .revert-reason,
.home-experience[data-home-theme="terminal"] .revert-reason,
.home-experience[data-home-theme="neon"] .revert-reason { color: #ff6b6b; }
.home-experience[data-home-theme="midnight"] .txn-action.txn-action-failed,
.home-experience[data-home-theme="terminal"] .txn-action.txn-action-failed,
.home-experience[data-home-theme="neon"] .txn-action.txn-action-failed { border-left-color: #ff6b6b; }
.txn-action .route-hops { display: inline-flex; padding: 0; vertical-align: middle; }

/* Route hop visualization for multi-hop swaps */
.route-hops { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 6px 0; }
.route-hop { background: #f1ecff; border: 1px solid #d9ccf5; border-radius: 6px; padding: 4px 10px; font-size: 13px; }
.route-arrow { color: #6236ff; font-weight: 700; }

/* Direction badges IN/OUT/SELF */
.dir-badge { display: inline-block; min-width: 38px; text-align: center; padding: 1px 6px; border-radius: 4px; font-size: 11px; font-weight: 700; }
.dir-in { background: #eaf7ea; color: #1a6b1a; border: 1px solid #cce8cc; }
.dir-out { background: #fff4e5; color: #8a5300; border: 1px solid #f0ddc0; }
.dir-self { background: #eef1f6; color: #444; border: 1px solid #d7deea; }

/* Percentage bar for holders table */
.pct-bar-wrap { background: #eef1f6; border-radius: 4px; height: 8px; width: 120px; display: inline-block; vertical-align: middle; }
.pct-bar { background: #6236ff; border-radius: 4px; height: 8px; }

/* Stat row grid used on dex hub / summaries */
.stat-boxes { display: flex; flex-wrap: wrap; gap: 20px; margin-bottom: 10px; }
.stat-box {
  background: #f9f9ff; border: 1px solid #0000001f; border-radius: 8px; color: #0f4800;
  padding: 12px 18px; min-width: 150px;
}
.stat-box .medium-box-menu { display: block; }
.stat-box .medium-menu-value { font-size: 18px; }

/* (14) Charts page redesign: category pill bar + full-width panels */
.chart-pills {
  position: sticky; top: 0; z-index: 50; display: flex; flex-wrap: wrap; gap: 8px;
  background: #ffffffee; border: 1px solid #0000001f; border-radius: 10px;
  padding: 10px 14px; margin-bottom: 16px; backdrop-filter: blur(3px);
}
.chart-pill {
  display: inline-block; padding: 4px 16px; border-radius: 16px; font-size: 13px;
  color: #421096; background: #f1ecff; border: 1px solid #d9ccf5;
  text-decoration: none; cursor: pointer;
}
.chart-pill:hover { border-color: #6236ff; color: #421096; }
.chart-pill.pill-active { background: #6236ff; color: #ffffff; border-color: #6236ff; }
.chart-panel {
  background: #ffffffb8; border: 1px solid #0000001f; border-radius: 12px;
  padding: 16px 20px; margin-bottom: 16px;
}
.chart-panel .chart-panel-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px; margin-bottom: 4px; }
.chart-panel .chart-panel-title { font-weight: 700; font-size: 16px; color: #421096; }
.chart-panel .chart-panel-desc { font-size: 12px; color: #666; }
.chart-panel .chart-canvas-wrap { position: relative; height: 300px; width: 100%; }
.range-chips { margin-left: auto; display: flex; gap: 4px; }
.range-chip {
  font-size: 11px; padding: 1px 10px; border-radius: 10px; cursor: pointer;
  color: #523ba5; border: 1px solid #d9ccf5; background: #ffffff; user-select: none;
}
.range-chip.range-active { background: #6236ff; color: #ffffff; border-color: #6236ff; }
.chart-cat-title { font-size: 15px; font-weight: 700; color: #372339; margin: 18px 0 10px 2px; }

/* Search result rows */
.search-result-row { background: #ffffffb8; border: 1px solid #0000001f; border-radius: 8px; padding: 10px 14px; margin-bottom: 10px; }
.search-result-row .type-badge { margin-right: 10px; }

/* DEX hub: pill links to the other DEX pages */
.dex-nav { display: flex; flex-wrap: wrap; gap: 8px; margin: 2px 0 12px; }
.dex-nav a {
  display: inline-block; padding: 4px 14px; font-size: 13px; text-decoration: none;
  color: #4d28cf; background: #f6f2ff; border: 1px solid #d9ccf5; border-radius: 14px;
}
.dex-nav a:hover { border-color: #6236ff; background: #eae4ff; color: #4d28cf; }

/* Swap CTA link */
.trade-cta {
  display: inline-block; background: #B1468D; color: #fff !important; border-radius: 6px;
  padding: 6px 14px; text-decoration: none; font-size: 13px;
}
.trade-cta:hover { background: #9a3577; color: #fff; }

/* Two-column details table label cell */
table.styled-table td.detail-label { width: 260px; color: #555; }

/* Mono addresses in detail views */
.mono { font-family: Consolas, monospace; font-size: 13px; word-break: break-all; }

/* Raw hex panels (input data, logs bloom). Colors live here -- not inline --
   so the theme sheet can restyle them; dark themes put near-white ink on
   these, and a hardcoded light background made the text invisible. */
.hex-box { background: #f9f9ff; border: 1px solid #d7deea; border-radius: 6px; padding: 8px 10px; }

/* Contract list rows (dex hub, one contract per line) */
.contract-line { padding: 4px 0; font-size: 13px; }
.contract-line .contract-role { display: inline-block; width: 140px; color: #555; }

/* Signature panel annotations */
.sig-size { color: #777; font-size: 12px; }

/* (6) remarks textbox */
.remarks-box {
  width: 100%; max-width: 560px; font-family: Consolas, monospace; font-size: 13px;
  border: 1px solid #d7deea; border-radius: 6px; padding: 6px 10px;
  background: #fbfbff; color: #372339; resize: none;
}

/* (8) Mobile layout (menu-container-mobile visible below 1200px).
   Production look: the gradient header spans the full viewport, content cards
   are near full-width (capped at 100vw - 30px like production), and the
   search box is only as wide as the chart cards. */
@media (max-width: 1200px) {
  /* pagecontent is position:fixed; give it the full viewport so the gradient
     header and content column span edge to edge (production look). */
  .blocks-wallet .pagecontent { width: 100%; }
  .blocks-wallet .search-container {
    /* Keeps the desktop width where it fits; on phones the cap wins and the
       box spans 95% of the screen. */
    max-width: 95vw;
    box-sizing: border-box;
  }
  .blocks-wallet .search-container .text-small-gray { flex: 1; min-width: 0; }
  .blocks-wallet .searchtextbox { width: 100%; }
  /* Cards fill the viewport width like production mobile */
  .blocks-wallet .menu-container-mobile {
    width: calc(100vw - 30px);
    box-sizing: border-box;
  }
  /* Breathing room above and below the mobile pager (the shared pager
     partial carries no inline padding). */
  .blocks-wallet .menu-container-mobile .pagination-container {
    margin-top: 15px;
    padding-bottom: 10px;
  }
  /* Gap between the last card on the page and the bottom edge */
  .blocks-wallet .menu-container-mobile:last-of-type {
    margin-bottom: 15px !important;
  }
}

@media (max-width: 700px) {
  .blocks-wallet .main-container { min-width: unset; width: 100%; }
  .stat-boxes { gap: 10px; }
  .stat-box { min-width: calc(50vw - 30px); padding: 10px 12px; }
  .preview-ribbon { max-width: 92vw; white-space: normal; }
  .chart-pills { padding: 8px 10px; }
  .animate-character { font-size: 18px !important; }
  .logo-img { width: 44px; height: 44px; }
}

/* Search autocomplete dropdown (search-autocomplete.html): anchored under the
   header search box (.search-container is position:relative in style.css). */
.search-autocomplete {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  background: #ffffff;
  border: 1px solid #d9ccf5;
  border-radius: 10px;
  box-shadow: 0 10px 28px rgba(40, 20, 90, 0.20);
  z-index: 60;
  text-align: left;
  overflow: hidden;
}
.sa-group {
  padding: 9px 14px 3px 14px;
  font-size: 11px;
  letter-spacing: 1px;
  color: #8a7bb8;
  text-transform: uppercase;
  font-weight: bold;
}
.sa-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px;
  font-size: 13px;
  color: #333;
  cursor: pointer;
  text-decoration: none;
}
.sa-item:hover, .sa-item.sa-active { background: #f3efff; }
.sa-item .mono { font-size: 12px; color: #777; }
.sa-meta { margin-left: auto; font-size: 12px; color: #888; white-space: nowrap; }
.sa-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-top: 1px solid #eee7fb;
  padding: 9px 14px;
  font-size: 12px;
  background: #faf8ff;
}
.sa-footer .sa-keys { color: #999; }
@media (max-width: 700px) {
  .sa-meta { display: none; } /* keep rows on one line on phones */
}

/* Mobile table-of-contents card (shown when a page has multiple tables) */
.mobile-toc-card { padding: 10px 16px !important; margin-bottom: 10px; }
.mobile-toc { display: flex; flex-wrap: wrap; gap: 8px; }
.mobile-toc a {
  font-size: 13px; padding: 4px 12px; border-radius: 14px; text-decoration: none;
  color: #523ba5; border: 1px solid #d9ccf5; background: #ffffff; white-space: nowrap;
}
.mobile-toc a:active { background: #eae4ff; }

/* Help (?) modal: bootstrap.min.css loads after style.css and its
   .modal-content { position: relative } breaks the intended centering,
   pushing the box to the right edge. Re-assert the style.css layout. */
#myModal .modal-content {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  margin: 0;
  width: 60%;
  max-width: 500px;
  padding: 20px;
  border: 1px solid #888;
  border-radius: 10px;
  background-color: #fefefe;
}

/* Header title below the logo renders exactly as written (production style
   uppercases it; "Quantum Coin (Q)" must keep its casing) */
.animate-character { text-transform: none; }

/* Reduce the whitespace above the first menu item (Home) and below the last
   one; item spacing, fonts and icon sizes stay at production defaults */
.sidenav { padding-top: 10px; padding-bottom: 10px; }

/* Description label inside the gray chart box (below the plot area) */
.chart-desc {
  font-size: 12px; color: #5f5f6e; line-height: 1.45; padding: 8px 4px 0 4px;
}

/* Keep the search glyph optically and geometrically centered in its button. */
.search-button .anticon-search {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  margin: 0;
  line-height: 0;
}
.blocks-wallet .search-button .search-outline {
  display: block;
  width: 18px;
  height: 18px;
  position: static;
}

/* (20) Elegant informational note (replaces yellow preview-note) */
.info-note {
  background: #f9f9ff; border: 1px solid #d9ccf5; border-left: 3px solid #6236ff;
  border-radius: 6px; padding: 8px 12px; font-size: 13px; color: #372339; margin: 6px 0 14px 0;
}

/* Balance changes: one row per coin/token, every participant listed inside the
   same cell (replaces the former one-column-per-participant matrix, which grew
   unreadably wide as participants were added). */
.bal-change {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 10px;
    padding: 3px 0;
}
.bal-change-who {
    min-width: 190px;
}
.bal-change-val {
    word-break: break-all;
}
@media (max-width: 768px) {
    .bal-change-who {
        min-width: 0;
        width: 100%;
    }
}

/* Separator between the two tokens a pair-creation names. Tighter than
   .route-arrow, which carries swap-route spacing that reads as a gap here. */
.pair-sep { padding: 0 2px; color: #777; }

/* Token symbol chips link to their token page. The link must be invisible as a
   link -- same colour, no underline -- so the chip keeps the meaning its colour
   carries; only the pointer cursor tells you it is clickable. */
.tok-link,
.tok-link:hover,
.tok-link:visited,
.tok-link:active {
  color: inherit;
  text-decoration: none;
}
.tok-link .tok,
a .tok {
  cursor: pointer;
}

/* Chart card grids (validator list and validator detail): same behavior as the
   home page grid (.home-card-grid) -- 1, 2 or 4 cards per row driven by
   container queries against the content column, cards flexing between 300 and
   400px. The .blocks-wallet ancestor is required throughout:
   .blocks-wallet .menu-container-top sets display:flex at (0,2,0), which would
   outrank a bare .qs-chart-grid class. */
.blocks-wallet .qs-chart-grid {
  display: grid;
  /* Tracks stretch (1fr) so the strip's outer edges line up with the
     full-width table cards below -- same treatment as .home-card-grid. */
  grid-template-columns: repeat(2, minmax(300px, 1fr));
  gap: 20px;
  width: 100%;
  justify-content: center;
}
.blocks-wallet .qs-chart-grid .medium-menu-items-row { min-width: 0; width: auto; }
/* The cards carry a legacy inline width:337px; inside the grid the track
   decides. */
.blocks-wallet .qs-chart-grid .menu-name-wrapper { width: 100% !important; }
@container (min-width: 1260px) {
  .blocks-wallet .qs-chart-grid { grid-template-columns: repeat(4, minmax(300px, 1fr)); }
}
@container (max-width: 680px) {
  .blocks-wallet .qs-chart-grid { grid-template-columns: minmax(0, 1fr); }
}
/* When the card count is not divisible by four, cap the grid at two columns so
   the final row is still full. (0,3,0) beats the 4-column rule above at any
   container width. */
.blocks-wallet .qs-chart-grid.qs-chart-grid-pairs { grid-template-columns: repeat(2, minmax(300px, 1fr)); }
@container (max-width: 680px) {
  .blocks-wallet .qs-chart-grid.qs-chart-grid-pairs { grid-template-columns: minmax(0, 1fr); }
}
/* Same edge gaps as the mobile table cards (.menu-container-mobile at
   calc(100vw - 30px)) -- mirrors the home grid's mobile width. Track max is
   400px, so the single mobile column simply fills this narrower grid. */
@media (max-width: 1200px) {
  .blocks-wallet .qs-chart-grid { width: calc(100vw - 30px); }
}

/* Account page validator charts: exactly two cards, so a fixed two-column grid
   whose tracks stretch -- the strip's outer edges align with the full-width
   Account table card below (same treatment as the home grid). Desktop only:
   below 1200px this section is display:none (style.css) and the mobile copies
   render instead; the (0,3,0) grid rule must not resurrect it there. */
@media (min-width: 1201px) {
  .blocks-wallet .menu-container-top.acct-validator-charts {
    display: grid;
    grid-template-columns: repeat(2, minmax(300px, 1fr));
    width: 100%;
    justify-content: center;
  }
  .blocks-wallet .acct-validator-charts .medium-menu-items-row { min-width: 0; width: auto; }
  .blocks-wallet .acct-validator-charts .menu-name-wrapper { width: 100% !important; }
}

/* Token analytics tab: the two per-day charts sit inside the token card.
   Two stretching columns fill the card's width with a small side margin, and
   the strip gets breathing room above (base .menu-container-top pulls -10px). */
.blocks-wallet .menu-container-top.token-analytics-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(300px, 1fr));
  width: calc(100% - 24px);
  align-self: center;
  justify-content: center;
  margin-top: 16px;
}
.blocks-wallet .token-analytics-grid .medium-menu-items-row { min-width: 0; width: auto; }
.blocks-wallet .token-analytics-grid .menu-name-wrapper { width: 100% !important; }

/* Mobile chart stacks in a bare wrapper (account page #m-vcharts): the cards
   are the chrome, the wrapper just stacks them -- give the stack breathing
   room between cards, and stretch each card to the wrapper's width (the
   wrapper's align-items:center otherwise shrink-wraps them to content). */
.blocks-wallet .menu-container-mobile.mobile-bare { gap: 12px; }
.blocks-wallet .menu-container-mobile.mobile-bare .medium-menu-items-row { align-self: stretch; min-width: 0; }

/* Holders tab: the distribution chart and its histogram sit side by side when
   there is room, and stack below that. The chart keeps a fixed basis so it does
   not stretch; the table takes the remaining width. */
.holders-split {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  align-items: flex-start;
}
/* .blocks-wallet .menu-name-wrapper sets flex:1 and outranks a bare class, so
   this rule needs the same ancestor or the chart stretches to fill the row.
   480px: wide enough for the pie plus its below-chart legend rows. */
.blocks-wallet .holders-split-chart,
.holders-split-chart {
  flex: 0 0 480px;
  max-width: 100%;
}
/* The table decides whether the pair fits on one row, so it shrinks to its
   content instead of claiming the full row as styled-table does by default. */
.holders-split-table {
  flex: 0 1 auto;
  min-width: 0;
}
.holders-split-table .styled-table {
  width: auto;
  min-width: 300px;
}
/* Both halves are cards in their own right. Equal padding and no extra top
   margin is what makes the chart heading line up with the table heading. */
.blocks-wallet .holders-box,
.holders-box {
  border: 1px solid var(--home-border, #dfe3ec);
  border-radius: 8px;
  background: var(--home-surface-solid, #ffffff);
  padding: 12px 14px;
  margin: 0;
  box-sizing: border-box;
}
/* The note belongs to the table and must wrap at the table's width. Its own
   max-content width is one long line, which would otherwise decide the flex
   item's size; zero width removes it from that calculation, then min-width
   stretches it back over whatever width the table settled on. */
.holders-split-note {
  margin-top: 8px;
  width: 0;
  min-width: 100%;
}
@media (max-width: 820px) {
  .blocks-wallet .holders-split-chart,
  .holders-split-chart { flex-basis: 100%; }
  .holders-split-table { flex: 1 1 100%; }
  .holders-split-table .styled-table { width: 100%; }
}

/* Search spinner: occupies the button in place of the magnifier while a lookup
   is in flight, so the control itself reports progress rather than the page
   appearing to do nothing. Hidden until .is-searching is set on the container. */
.search-spinner { display: none; }
.search-container.is-searching .search-spinner {
  display: inline-block;
  width: 16px;
  height: 16px;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  animation: qs-spin 700ms linear infinite;
  vertical-align: middle;
}
.search-container.is-searching .anticon-search { display: none; }

/* Autocomplete empty state: informational row, not a link, not keyboard-
   navigable. */
.search-autocomplete .sa-empty { cursor: default; opacity: 0.8; }
@keyframes qs-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .search-container.is-searching .search-spinner { animation-duration: 2s; }
}

/* The token whose page you are on, highlighted wherever it appears alongside
   another symbol. Two different tokens can carry the same name on-chain, so a
   swap row like "TKA -> TKA" is otherwise unreadable; this marks which side is
   the one you navigated from. */
.token-symbol.tok-current {
  color: #421096;
  font-weight: 700;
  background: #f1ecff;
  border-radius: 4px;
  padding: 0 5px;
}

/* Pagination: the whole box is the click target, not just the digit inside it.
   .number already advertises cursor:pointer and carries the padding, but the
   anchor is inline, so the padded area around the number did nothing.

   The anchor's ::after is stretched over the nearest positioned ancestor. That
   has to be .number (which owns the padding), so .number-wrapper drops out of
   the positioning context here -- otherwise the overlay would stop at the
   wrapper's edge and leave the padding dead. */
.blocks-wallet .pagination-container .number-wrapper {
  position: static;
}
.blocks-wallet .pagination-container .number > a::after,
.blocks-wallet .pagination-container .number .number-wrapper > a::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  border-radius: 8px;
}

/* Mobile pagers can carry more boxes than fit one line; wrap rather than
   overflow, and keep the boxes tappable. */
@media (max-width: 820px) {
  .blocks-wallet .pagination-container { flex-wrap: wrap; gap: 6px; }
  .blocks-wallet .pagination-container .number { padding: 8px 10px; }
}

/* Mobile card control bar: the desktop header's selects, restacked. They are
   floated in the desktop header, which collapses in a narrow card. */
.mobile-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 8px 0 4px 0;
}
.mobile-controls > div { float: none !important; margin: 0 !important; }
.mobile-controls select.qs-select { margin: 0 !important; max-width: 100%; }

/* DEX overview, mobile: the section links sit in their own box at the top of
   the DEX card, above the summary, rather than trailing the summary table. */
.blocks-content.dex-nav-content {
  margin: 0;
  padding: 8px 0 10px 0;
  overflow: visible;
}
.blocks-content.dex-nav-content .dex-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
}

/* Multi-hop swap route: one line per hop, so the sequence reads as the trades
   it actually was rather than one long wrapped chain. Each line still wraps
   internally on a narrow screen. */
.route-steps { display: flex; flex-direction: column; gap: 6px; padding: 6px 0; }
.route-step { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.route-step-index {
  flex: 0 0 auto;
  min-width: 18px;
  height: 18px;
  line-height: 18px;
  text-align: center;
  border-radius: 50%;
  background: #ede7ff;
  color: #421096;
  border: 1px solid #d9ccf5;
  font-size: 11px;
  font-weight: 700;
}

/* Inside a mobile detail card the route is one field among many, so it keeps
   only the leading gap that separates it from its "Route:" label -- the block
   already ends the line, and the card's own line spacing follows it. */
.menu-container-mobile .route-steps { padding: 2px 0 0 0; gap: 4px; }