diff --git a/docs/userscript-validation.md b/docs/userscript-validation.md
index 6576532..ab982c9 100644
--- a/docs/userscript-validation.md
+++ b/docs/userscript-validation.md
@@ -94,10 +94,10 @@ primary button already released is canceled without saving.
 
 For every resize, project the saved preference into the current viewport while
 keeping the header reachable. Enlarging the viewport restores the saved
-coordinates. The trading panel is 480 px wide and the CMC panel is 500 px wide,
-each limited by the viewport. Without a saved preference, one panel uses the
+coordinates. Both panels are 384 px wide, limited by the viewport. Without a
+saved preference, one panel uses the
 right edge with a 16 px margin and a 60 px top offset. When both are present,
-viewports at least 1028 px wide place them side by side, with CMC to the left of
+viewports at least 816 px wide place them side by side, with CMC to the left of
 trading and a 16 px gap. Smaller viewports split the available height into two
 scrollable panels with 8 px outer margins and an 8 px vertical gap. These defaults
 are never persisted. Saved positions remain authoritative, even when a user's
@@ -150,6 +150,14 @@ Taker activity uses separate buy and sell volume bars; its numeric field is clea
 labelled as the buy/sell ratio. Click or focus a chart to inspect its values and
 dated observations; arrow keys select points and Escape closes the detail.
 
+Compact rows use 4 px vertical padding and 26 px charts. The footer states the
+shared five-minute sampling period and distinguishes settled funding history;
+individual observation counts appear in the opened history detail. The funding
+row also retains its settled-history caption, last settled value, current rate,
+confirmed interval, and countdown. The composite heading opens the voting rules
+with native `details`/`summary`; its current open state survives display refreshes.
+Body text remains 13 px on desktop and annotations remain at least 11 px.
+
 All Binance requests use the existing `https://www.binance.com` origin:
 
 | Display | Endpoint | Source fields |
@@ -237,6 +245,17 @@ denominators do not produce a ratio. Null, empty, or invalid provider numbers st
 unavailable, while genuine zero stays zero. Treasury holdings retain their token
 unit and cannot become a holder-address count.
 
+Compact rows keep their brief interpretation visible. Secondary notes are in the
+interpretation button's tooltip and expanded explanation, and token units share
+the value line when space allows. Automatic table layout reserves the complete
+width of a small token price or 24-hour change before wrapping prose; browser
+checks compare text ranges against their own cells as well as overall overflow.
+Body text remains 12 px on desktop and
+annotations remain at least 11 px. The generated-panel browser scenarios require
+both default panels, all metric rows, and both footers to fit a 1366-by-768 desktop
+without scrolling in Chinese and English. Narrow screens retain separate scroll
+areas and no horizontal overflow.
+
 Interpretations describe what the value supports. The volume ratio's 50% threshold
 is explicitly a descriptive convention, not a statistical anomaly or trading
 signal. Valuation comparisons need peers, volume changes need history, DEX
@@ -251,6 +270,23 @@ embeds unchanged generated artifacts and labelled example data. It supports both
 languages, light/dark themes, and each panel separately, without external network
 requests. It is not live Binance or Tampermonkey evidence.
 
+### Compact layout validation (2026-10-09)
+
+Trading-data `1.2.1` and CMC-data `0.2.1` passed the full 2528-test Node suite,
+all 39 panel browser scenarios, both builds, generated syntax checks, test lint,
+metadata/install URL checks, and independent source review. Six new browser
+scenarios verify complete default panels on a 1366-by-768 screen and precise
+small prices staying inside their value cells at 1366/320 px in both languages.
+Resize scenarios wait for browser rendering frames before reading geometry.
+
+At the same 1600-by-1056 preview viewport, the Chinese trading panel decreased
+from approximately 897 to 500 px high and CMC from 779 to 567 px. English heights
+decreased from 913 to 534 px and 826 to 618 px. Both widths are now 384 px, with
+unchanged 13/12 px desktop body text and a minimum 11 px annotation size. The
+four preview combinations again have no panel overlap, horizontal overflow,
+page errors, or external HTTP requests. These are offline rendering results;
+the installed Tampermonkey scripts and live Binance pages were not operated.
+
 ### Data-panel implementation validation (2026-10-09)
 
 The trading-data `1.2.0` and CMC-data `0.2.0` implementations passed independent
diff --git a/e2e/binance-orderbook/helpers/data-panels-host.js b/e2e/binance-orderbook/helpers/data-panels-host.js
index 6b13977..e0c0f86 100644
--- a/e2e/binance-orderbook/helpers/data-panels-host.js
+++ b/e2e/binance-orderbook/helpers/data-panels-host.js
@@ -8,11 +8,11 @@ export const DATA_PANEL_NOW = Date.UTC(2026, 9, 9, 0, 0, 0);
 export const POSITION_AUDIT_KEY = '__data_panel_fixture_position_writes__';
 export const DATA_PANELS = Object.freeze([
   {
-    name: 'trading', id: 'jh-binance-trading-data-panel', width: 480,
+    name: 'trading', id: 'jh-binance-trading-data-panel', width: 384,
     key: 'jh_binance_trading_data_pos', artifact: 'binance-trading-data',
   },
   {
-    name: 'cmc', id: 'jh-binance-cmc-data-panel', width: 500,
+    name: 'cmc', id: 'jh-binance-cmc-data-panel', width: 384,
     key: 'jh_binance_cmc_data_pos', artifact: 'binance-coinmarketcap-data',
   },
 ]);
diff --git a/e2e/binance-orderbook/specs/data-panel-position.pw.js b/e2e/binance-orderbook/specs/data-panel-position.pw.js
index 9db5eaa..b1c3a80 100644
--- a/e2e/binance-orderbook/specs/data-panel-position.pw.js
+++ b/e2e/binance-orderbook/specs/data-panel-position.pw.js
@@ -119,7 +119,7 @@ test('user restores both separate panel preferences after a smaller viewport', a
   await resize(page, SMALL);
 
   // Then only the displayed positions clamp, leaving each original preference unchanged.
-  await assertPositions(page, { trading: { left: 160, top: 372 }, cmc: { left: 140, top: 372 } });
+  await assertPositions(page, { trading: { left: 256, top: 372 }, cmc: { left: 256, top: 372 } });
   expect(await readPositions(page)).toEqual(INITIAL);
   expect(await readWrites(page)).toEqual([]);
   await page.screenshot({ path: testInfo.outputPath('small-clamped.png') });
@@ -145,7 +145,7 @@ test('user keeps large-screen preferences when a small tab opens reloads and clo
   await fixture.open(small, { viewport: SMALL });
 
   // Then the small tab displays reachable headers while both tabs retain the original preferences.
-  await assertPositions(small, { trading: { left: 160, top: 372 }, cmc: { left: 140, top: 372 } });
+  await assertPositions(small, { trading: { left: 256, top: 372 }, cmc: { left: 256, top: 372 } });
   expect(await readPositions(page)).toEqual(INITIAL);
   expect(await readWrites(page)).toEqual([]);
 
@@ -154,7 +154,7 @@ test('user keeps large-screen preferences when a small tab opens reloads and clo
   await installPanels(small);
 
   // Then reload and initialization leave the shared preferences untouched.
-  await assertPositions(small, { trading: { left: 160, top: 372 }, cmc: { left: 140, top: 372 } });
+  await assertPositions(small, { trading: { left: 256, top: 372 }, cmc: { left: 256, top: 372 } });
   expect(await readPositions(page)).toEqual(INITIAL);
   expect(await readWrites(page)).toEqual([]);
 
@@ -304,7 +304,7 @@ for (const panel of PANELS) {
     await nextFrames(page);
 
     // Then the viewport adjustment is temporary and cannot become a completed drag preference.
-    await assertPositions(page, { trading: { left: 160, top: 372 }, cmc: { left: 140, top: 372 } });
+    await assertPositions(page, { trading: { left: 256, top: 372 }, cmc: { left: 256, top: 372 } });
     expect(await readPositions(page)).toEqual(INITIAL);
     expect(await readWrites(page)).toEqual([]);
 
@@ -359,14 +359,14 @@ test('user keeps responsive default panel positions without creating a saved pre
   await resize(page, SMALL);
   const trading = await page.locator(`#${PANELS[0].id}`).boundingBox();
   const cmc = await page.locator(`#${PANELS[1].id}`).boundingBox();
-  expect(trading).toMatchObject({ x: 144, y: 8, width: 480 });
-  expect(cmc).toMatchObject({ x: 124, width: 500 });
+  expect(trading).toMatchObject({ x: 240, y: 8, width: 384 });
+  expect(cmc).toMatchObject({ x: 240, width: 384 });
   expect(cmc.y - trading.y - trading.height).toBeCloseTo(8, 1);
   expect(cmc.y + cmc.height).toBeLessThanOrEqual(SMALL.height);
   await resize(page, LARGE);
 
   // Then the original right inset and separate desktop columns return without new position keys.
-  await assertPositions(page, { trading: { left: 1104, top: 60 }, cmc: { left: 588, top: 60 } });
+  await assertPositions(page, { trading: { left: 1200, top: 60 }, cmc: { left: 800, top: 60 } });
   expect(await readPositions(page)).toEqual({ trading: null, cmc: null });
   expect(await readWrites(page)).toEqual([]);
 
diff --git a/e2e/binance-orderbook/specs/data-panels-presentation.pw.js b/e2e/binance-orderbook/specs/data-panels-presentation.pw.js
index 2ac2f8d..116f277 100644
--- a/e2e/binance-orderbook/specs/data-panels-presentation.pw.js
+++ b/e2e/binance-orderbook/specs/data-panels-presentation.pw.js
@@ -1,5 +1,5 @@
 import { test, expect } from '../test.js';
-import { tradingDataset } from '../../../test/helpers/data-media-migration-host.js';
+import { cmcDetail, tradingDataset } from '../../../test/helpers/data-media-migration-host.js';
 import {
   createDataPanelsFixture, installDataPanels, DATA_PANEL_NOW, DATA_PANELS, POSITION_AUDIT_KEY,
 } from '../helpers/data-panels-host.js';
@@ -146,6 +146,68 @@ test('user sees the calibrated countdown advance while historical nodes and upda
 });
 
 for (const locale of ['zh-CN', 'en']) {
+  for (const width of [1366, 320]) {
+    test(`user reads a tiny CMC price and ${locale} changes inside their own column at ${width}px`, async ({ page, context }) => {
+      // Given a token price needs all fourteen fractional digits to remain distinguishable from zero
+      const detail = cmcDetail();
+      detail.statistics.price = 0.00000000001234;
+      const fixture = await createDataPanelsFixture(context, { detail });
+
+      // When the complete CMC panel renders at the requested width
+      await fixture.open(page, { locale, panels: ['cmc'], viewport: { width, height: 768 } });
+      const cmc = page.locator('#jh-binance-cmc-data-panel');
+
+      // Then the precise price and changes remain readable without crossing into another column
+      await expect(cmc.locator('[data-metric="price"] .cmc-number')).toHaveText('$0.00000000001234');
+      const crossing = await cmc.evaluate(panel => [...panel.querySelectorAll('.cmc-number, .cmc-change, .cmc-unit')].flatMap(node => {
+        const range = document.createRange();
+        range.selectNodeContents(node);
+        const text = range.getBoundingClientRect();
+        const cell = node.closest('td').getBoundingClientRect();
+        return text.left < cell.left || text.right > cell.right
+          ? [{ text: node.textContent, left: text.left - cell.left, right: text.right - cell.right }]
+          : [];
+      }));
+      expect(crossing).toEqual([]);
+      const body = await cmc.locator('[id$="-body"]').evaluate(element => ({ width: element.clientWidth, scrollWidth: element.scrollWidth }));
+      expect(body.scrollWidth).toBeLessThanOrEqual(body.width);
+      expect(fixture.errors).toEqual([]);
+    });
+  }
+
+  test(`user reads every ${locale} data row on a laptop without scrolling and can open the signal rules`, async ({ page, context }) => {
+    // Given both panels have complete data and no saved position on a laptop-sized screen
+    const fixture = await createDataPanelsFixture(context, { dataset: presentationDataset() });
+
+    // When the generated scripts render their default expanded panels
+    await fixture.open(page, { locale, viewport: { width: 1366, height: 768 } });
+    const trading = page.locator('#jh-binance-trading-data-panel');
+    await expect(trading.locator('[data-role="current-funding"]')).toHaveText('0.00378%');
+
+    // Then all rows and both footers fit without vertical or horizontal scrolling
+    await expect(trading.locator('tr[data-metric]')).toHaveCount(8);
+    await expect(page.locator('#jh-binance-cmc-data-panel tr[data-metric]')).toHaveCount(12);
+    for (const { id } of DATA_PANELS) {
+      const body = page.locator(`#${id}-body`);
+      const dimensions = await body.evaluate(element => ({
+        height: element.clientHeight, scrollHeight: element.scrollHeight,
+        width: element.clientWidth, scrollWidth: element.scrollWidth,
+      }));
+      expect(dimensions.scrollHeight).toBeLessThanOrEqual(dimensions.height);
+      expect(dimensions.scrollWidth).toBeLessThanOrEqual(dimensions.width);
+      await expect(page.locator(`#${id}-footer`)).toBeInViewport({ ratio: 1 });
+    }
+    await expect(trading.locator('.td-method-note')).toBeHidden();
+
+    // When the user asks for the composite signal methodology
+    await trading.locator('.td-composite-line').click();
+
+    // Then the settled-rate voting rule is available on demand
+    await expect(trading.locator('.td-method-note')).toBeVisible();
+    await expect(trading.locator('.td-method-note')).toContainText(locale === 'zh-CN' ? '资金费率投票使用最新已结算值' : 'the funding vote uses the latest settled rate');
+    expect(fixture.errors).toEqual([]);
+  });
+
   test(`user reads ${locale} panels in both themes on a narrow screen without tiny text or horizontal overflow`, async ({ page, context }) => {
     // Given both generated panels are rendered on a narrow viewport in the light theme
     const fixture = await createDataPanelsFixture(context, { dataset: presentationDataset() });
@@ -155,6 +217,7 @@ for (const locale of ['zh-CN', 'en']) {
     // When the user changes to the dark theme and narrows the viewport further
     await page.emulateMedia({ colorScheme: 'dark' });
     await page.setViewportSize({ width: 320, height: 680 });
+    await completedLayoutFrames(page);
 
     // Then theme colors change while every visible annotation stays readable and within its panel width
     const readings = await page.evaluate(ids => ids.map(id => {
@@ -206,11 +269,12 @@ for (const installation of [['trading', 'cmc'], ['cmc', 'trading']]) {
     await expect(cmc.locator('#jh-binance-cmc-data-panel-footer a')).toHaveText('CMC data-api');
 
     // Then each desktop panel has its own column regardless of installation order
-    expect(await trading.boundingBox()).toMatchObject({ x: 1104, y: 60, width: 480 });
-    expect(await cmc.boundingBox()).toMatchObject({ x: 588, y: 60, width: 500 });
+    expect(await trading.boundingBox()).toMatchObject({ x: 1200, y: 60, width: 384 });
+    expect(await cmc.boundingBox()).toMatchObject({ x: 800, y: 60, width: 384 });
 
     // When the viewport becomes too narrow for adjacent columns
     await page.setViewportSize({ width: 320, height: 680 });
+    await completedLayoutFrames(page);
 
     // Then both headers stay reachable above separate scrolling bodies with an eight-pixel gap
     const readings = await page.evaluate(ids => ids.map(id => {
@@ -262,6 +326,7 @@ for (const panel of DATA_PANELS) {
     // When the user closes one panel and resizes the surviving panel's viewport
     await page.locator(`#${panel.id}-close`).click();
     await page.setViewportSize({ width: 1360, height: 900 });
+    await completedLayoutFrames(page);
 
     // Then the remaining panel projects its saved preference and closing writes no coordinates
     await expect(page.locator(`#${panel.id}`)).toBeHidden();
@@ -298,7 +363,7 @@ test('user releases a stationary CMC header after the trading panel mounts witho
 
   // When trading mounts and automatically moves the CMC panel into the adjacent column
   await installDataPanels(page, { panels: ['trading'] });
-  await expect.poll(async () => (await page.locator('#jh-binance-cmc-data-panel').boundingBox()).x).toBe(588);
+  await expect.poll(async () => (await page.locator('#jh-binance-cmc-data-panel').boundingBox()).x).toBe(800);
   await page.mouse.up();
   await completedLayoutFrames(page);
 
@@ -318,7 +383,7 @@ test('user releases a stationary CMC header after its peer closes without saving
   // When keyboard activation closes trading while the mouse remains pressed on CMC
   await page.locator('#jh-binance-trading-data-panel-close').focus();
   await page.keyboard.press('Enter');
-  await expect.poll(async () => (await page.locator('#jh-binance-cmc-data-panel').boundingBox()).x).toBe(1084);
+  await expect.poll(async () => (await page.locator('#jh-binance-cmc-data-panel').boundingBox()).x).toBe(1200);
   await page.mouse.up();
   await completedLayoutFrames(page);
 
@@ -335,7 +400,7 @@ test('user keeps the one saved panel coordinate when the other panel uses an aut
 
   // When the desktop shrinks and then returns to its original size
   await page.setViewportSize({ width: 1000, height: 760 });
-  await expect.poll(async () => (await page.locator('#jh-binance-cmc-data-panel').boundingBox()).x).toBe(500);
+  await expect.poll(async () => (await page.locator('#jh-binance-cmc-data-panel').boundingBox()).x).toBe(616);
   await page.setViewportSize({ width: 1600, height: 1200 });
   await completedLayoutFrames(page);
 
@@ -353,7 +418,7 @@ test('user saves a collapsed panel lower once and expands a body that fits the r
   await expect(panel.locator('[data-role="current-funding"]')).toHaveText('0.00378%');
   await expect(panel.locator('[data-role="funding-period"]')).toHaveText('当前 · 4小时');
   const initial = await panel.boundingBox();
-  const target = { left: 80, top: 600 };
+  const target = { left: 80, top: 900 };
   await page.locator('#jh-binance-trading-data-panel-collapse').click();
   await expect(page.locator('#jh-binance-trading-data-panel-body')).toBeHidden();
   await page.mouse.move(initial.x + 14, initial.y + 14);
diff --git a/scripts/binance-coinmarketcap-data.user.js b/scripts/binance-coinmarketcap-data.user.js
index 4cd33a5..3e7db63 100644
--- a/scripts/binance-coinmarketcap-data.user.js
+++ b/scripts/binance-coinmarketcap-data.user.js
@@ -3,7 +3,7 @@
 // @namespace    binance.coinmarketcap.data
 // @icon         data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2064%2064%22%3E%3Crect%20width%3D%2264%22%20height%3D%2264%22%20rx%3D%2214%22%20fill%3D%22%23f0b90b%22%2F%3E%3Ctext%20x%3D%2232%22%20y%3D%2249%22%20text-anchor%3D%22middle%22%20font-family%3D%22Arial%2C%20sans-serif%22%20font-size%3D%2242%22%20font-weight%3D%22800%22%20fill%3D%22%23111827%22%3EJ%3C%2Ftext%3E%3C%2Fsvg%3E
 // @icon64       data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2064%2064%22%3E%3Crect%20width%3D%2264%22%20height%3D%2264%22%20rx%3D%2214%22%20fill%3D%22%23f0b90b%22%2F%3E%3Ctext%20x%3D%2232%22%20y%3D%2249%22%20text-anchor%3D%22middle%22%20font-family%3D%22Arial%2C%20sans-serif%22%20font-size%3D%2242%22%20font-weight%3D%22800%22%20fill%3D%22%23111827%22%3EJ%3C%2Ftext%3E%3C%2Fsvg%3E
-// @version      0.2.0
+// @version      0.2.1
 // @author       jackhai9
 // @description  Show localized CoinMarketCap valuation, supply, and metric interpretations on Binance futures pages
 // @match        https://www.binance.com/*/futures/*
@@ -578,7 +578,7 @@
       box-shadow: 0 6px 24px #00000020;
       font-family: BinancePlex, system-ui, -apple-system, sans-serif;
       font-size: 12px;
-      line-height: 1.4;
+      line-height: 1.35;
       text-align: left;
       overflow: hidden;
       user-select: none;
@@ -590,7 +590,7 @@
       align-items: center;
       justify-content: space-between;
       gap: 6px;
-      padding: 8px 10px;
+      padding: 5px 8px;
       flex: 0 0 auto;
       cursor: move;
       background: var(--cmc-head);
@@ -601,47 +601,46 @@
     ${scope} #${panelId}-symbol { color: var(--cmc-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
     ${scope} .cmc-controls { display: flex; gap: 2px; flex: 0 0 auto; }
     ${scope} button { font: inherit; cursor: pointer; color: inherit; background: transparent; border: 0; }
-    ${scope} .cmc-controls button { min-width: 25px; min-height: 26px; font-size: 16px; padding: 2px 4px; color: var(--cmc-muted); }
+    ${scope} .cmc-controls button { min-width: 24px; min-height: 24px; font-size: 16px; padding: 2px 4px; color: var(--cmc-muted); }
     ${scope} button:focus-visible, ${scope} a:focus-visible { outline: 2px solid var(--cmc-accent); outline-offset: 2px; border-radius: 3px; }
     ${scope} #${panelId}-body { min-height: 0; overflow: auto; overscroll-behavior: contain; }
-    ${scope} table { width: 100%; table-layout: fixed; border-collapse: collapse; }
-    ${scope} .cmc-name-col { width: 31%; }
+    /* Reserve space for complete prices and changes before wrapping the surrounding prose. */
+    ${scope} table { width: 100%; table-layout: auto; border-collapse: collapse; }
+    ${scope} .cmc-name-col { width: 33%; }
     ${scope} .cmc-value-col { width: 26%; }
-    ${scope} .cmc-reading-col { width: 43%; }
+    ${scope} .cmc-reading-col { width: 41%; }
     ${scope} thead { position: sticky; top: 0; z-index: 1; background: var(--cmc-head); }
-    ${scope} thead th { color: var(--cmc-muted); font-size: 11px; font-weight: 500; padding: 7px 10px; text-align: left; }
+    ${scope} thead th { color: var(--cmc-muted); font-size: 11px; font-weight: 500; padding: 4px 6px; text-align: left; }
     ${scope} thead th:nth-child(2) { text-align: right; }
-    ${scope} tbody th, ${scope} tbody td { padding: 9px 10px; border-top: 1px solid var(--cmc-border); vertical-align: middle; overflow-wrap: anywhere; }
+    ${scope} tbody th, ${scope} tbody td { padding: 4px 6px; border-top: 1px solid var(--cmc-border); vertical-align: middle; overflow-wrap: anywhere; }
     ${scope} .cmc-name { text-align: left; font-weight: 500; }
-    ${scope} small { display: block; margin-top: 3px; font-size: 11px; line-height: 1.4; color: var(--cmc-muted); }
+    ${scope} small { display: block; margin-top: 1px; font-size: 11px; line-height: 1.35; color: var(--cmc-muted); }
     ${scope} .cmc-value { text-align: right; font-variant-numeric: tabular-nums; }
-    ${scope} .cmc-number { display: block; font-weight: 650; white-space: nowrap; }
+    ${scope} .cmc-number { display: inline-block; font-weight: 650; white-space: nowrap; }
+    ${scope} .cmc-unit { display: inline-block; margin: 0 0 0 4px; }
     ${scope} .cmc-change { font-size: 11px; white-space: nowrap; }
     ${scope} .cmc-change[data-tone="positive"], ${scope} [data-tone="positive"] .cmc-reading-text { color: var(--cmc-buy); }
     ${scope} .cmc-change[data-tone="negative"], ${scope} [data-tone="negative"] .cmc-reading-text { color: var(--cmc-sell); }
     ${scope} .cmc-change[data-tone="neutral"] { color: var(--cmc-muted); }
     ${scope} .cmc-key { background: color-mix(in srgb, var(--color-PrimaryYellow, #f0b90b) 7%, var(--cmc-bg)); }
     ${scope} .cmc-group th, ${scope} .cmc-group td { border-top-width: 2px; }
-    ${scope} .cmc-reading-button { display: flex; align-items: flex-start; justify-content: space-between; gap: 5px; width: 100%; padding: 0; line-height: inherit; text-align: left; }
+    ${scope} .cmc-reading-button { display: flex; align-items: center; justify-content: space-between; gap: 3px; width: 100%; min-height: 24px; padding: 0; line-height: inherit; text-align: left; }
     ${scope} .cmc-reading-text { font-weight: 500; }
     ${scope} [data-tone="missing"] .cmc-reading-text { color: var(--cmc-muted); }
     ${scope} [data-tone="active"] .cmc-reading-text { color: var(--cmc-accent); }
     ${scope} .cmc-info { color: var(--cmc-muted); flex: 0 0 auto; font-size: 11px; }
-    ${scope} .cmc-explanation td { padding: 10px 12px; color: var(--cmc-muted); background: var(--cmc-head); font-size: 11px; line-height: 1.6; user-select: text; }
+    ${scope} .cmc-explanation td { padding: 6px 8px; color: var(--cmc-muted); background: var(--cmc-head); font-size: 11px; line-height: 1.5; user-select: text; }
     ${scope} .cmc-explanation strong { color: var(--cmc-text); margin-right: 8px; font-weight: 600; }
     ${scope} .cmc-status { padding: 10px 0; color: var(--cmc-muted); }
     ${scope} .cmc-error-title { font-weight: 600; color: var(--cmc-sell); margin-bottom: 4px; }
-    ${scope} #${panelId}-footer { padding: 8px 10px; color: var(--cmc-muted); font-size: 11px; border-top: 1px solid var(--cmc-border); }
-    ${scope} .cmc-source-line { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 5px 10px; }
+    ${scope} #${panelId}-footer { padding: 5px 8px; color: var(--cmc-muted); font-size: 11px; border-top: 1px solid var(--cmc-border); }
+    ${scope} .cmc-source-line { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 3px 8px; }
     ${scope} #${panelId}-footer a { color: var(--cmc-accent); text-decoration: none; }
     ${scope} .cmc-times { font-variant-numeric: tabular-nums; }
     @media (max-width: 540px) {
       ${scope} { font-size: 11px; }
-      ${scope} tbody th, ${scope} tbody td { padding: 8px 6px; }
-      ${scope} thead th { padding: 7px 6px; }
-      ${scope} .cmc-name-col { width: 31%; }
-      ${scope} .cmc-value-col { width: 27%; }
-      ${scope} .cmc-reading-col { width: 42%; }
+      ${scope} tbody th, ${scope} tbody td { padding: 4px; }
+      ${scope} thead th { padding: 4px; }
       ${scope} .cmc-info { display: none; }
     }
   `;
@@ -649,11 +648,12 @@
 
   // src/shared/data-panel-layout.js
   var DATA_PANEL_LAYOUT_EVENT = "jh-data-panels-layout-change";
+  var DATA_PANEL_WIDTH = 384;
   var PANEL_IDS = Object.freeze({
     trading: "jh-binance-trading-data-panel",
     cmc: "jh-binance-cmc-data-panel"
   });
-  var TWO_COLUMN_WIDTH = 480 + 500 + 48;
+  var TWO_COLUMN_WIDTH = DATA_PANEL_WIDTH * 2 + 48;
   function hasVisibleDataPanelPeer(document2, kind) {
     const peer = document2.getElementById(PANEL_IDS[kind === "trading" ? "cmc" : "trading"]);
     return peer !== null && peer.style.display !== "none";
@@ -667,7 +667,7 @@
     const sectionHeight = Math.max(48, Math.floor((viewportHeight - 24) / 2));
     const targetTop = stacked ? kind === "trading" ? 8 : 16 + sectionHeight : 60;
     const top = Math.max(0, Math.min(targetTop, viewportHeight - 48));
-    const peerWidth = hasPeer && !stacked && kind === "cmc" ? 480 + 16 : 0;
+    const peerWidth = hasPeer && !stacked && kind === "cmc" ? DATA_PANEL_WIDTH + 16 : 0;
     const targetLeft = viewportWidth - panelWidth - 16 - peerWidth;
     const left = Math.max(0, Math.min(Math.max(stacked ? 8 : 16, targetLeft), viewportWidth - panelWidth));
     const availableHeight = Math.max(48, viewportHeight - top - 8);
@@ -683,7 +683,6 @@
     const PANEL_ID = "jh-binance-cmc-data-panel";
     const STORAGE_POS_KEY = "jh_binance_cmc_data_pos";
     const STORAGE_COLLAPSED_KEY = "jh_binance_cmc_data_collapsed";
-    const PANEL_WIDTH = 500;
     const REFRESH_MS = 30 * 1e3;
     const ROUTE_WATCHDOG_MS = 5e3;
     const CMC_MAP_API = "https://api.coinmarketcap.com/data-api/v1/cryptocurrency/map";
@@ -931,7 +930,7 @@
       }
       panel = document.createElement("div");
       panel.id = PANEL_ID;
-      panel.style.width = PANEL_WIDTH + "px";
+      panel.style.width = DATA_PANEL_WIDTH + "px";
       const collapsed = loadCollapsed();
       panel.innerHTML = [
         "<style>",
@@ -1080,13 +1079,13 @@
             detailId,
             '" aria-label="',
             escapeHtml(row.label + " · " + uiText(CMC_COPY.details)),
+            '" title="',
+            escapeHtml(row.note),
             '">',
             '<span class="cmc-reading-text">',
             escapeHtml(row.interpretation),
             '</span><span class="cmc-info" aria-hidden="true">ⓘ</span>',
-            "</button><small>",
-            escapeHtml(row.note),
-            "</small></td>",
+            "</button></td>",
             "</tr>",
             '<tr id="',
             detailId,
@@ -1096,7 +1095,9 @@
             escapeHtml(row.label),
             "</strong>",
             escapeHtml(row.explanation),
-            "</td></tr>"
+            "<small>",
+            escapeHtml(row.note),
+            "</small></td></tr>"
           ].join("");
         }).join("");
         rowsEl.innerHTML = lastRowsHtml;
@@ -1340,7 +1341,7 @@
       };
     }
     function keepPanelInViewport(panel) {
-      const width = panel.offsetWidth || PANEL_WIDTH;
+      const width = panel.offsetWidth || DATA_PANEL_WIDTH;
       const normalized = calculateDataPanelLayout({
         kind: "cmc",
         panelWidth: width,
@@ -1358,7 +1359,7 @@
     function savePanelPosition(panel) {
       if (!panel) return;
       const rect = panel.getBoundingClientRect();
-      const normalized = normalizeSavedPosition({ left: rect.left, top: rect.top }, panel.offsetWidth || PANEL_WIDTH);
+      const normalized = normalizeSavedPosition({ left: rect.left, top: rect.top }, panel.offsetWidth || DATA_PANEL_WIDTH);
       if (!normalized) return;
       savePosition(normalized.left, normalized.top);
       keepPanelInViewport(panel);
diff --git a/scripts/binance-trading-data.user.js b/scripts/binance-trading-data.user.js
index 3b13ba7..44f897e 100644
--- a/scripts/binance-trading-data.user.js
+++ b/scripts/binance-trading-data.user.js
@@ -3,7 +3,7 @@
 // @namespace    binance.trading.data
 // @icon         data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2064%2064%22%3E%3Crect%20width%3D%2264%22%20height%3D%2264%22%20rx%3D%2214%22%20fill%3D%22%23f0b90b%22%2F%3E%3Ctext%20x%3D%2232%22%20y%3D%2249%22%20text-anchor%3D%22middle%22%20font-family%3D%22Arial%2C%20sans-serif%22%20font-size%3D%2242%22%20font-weight%3D%22800%22%20fill%3D%22%23111827%22%3EJ%3C%2Ftext%3E%3C%2Fsvg%3E
 // @icon64       data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2064%2064%22%3E%3Crect%20width%3D%2264%22%20height%3D%2264%22%20rx%3D%2214%22%20fill%3D%22%23f0b90b%22%2F%3E%3Ctext%20x%3D%2232%22%20y%3D%2249%22%20text-anchor%3D%22middle%22%20font-family%3D%22Arial%2C%20sans-serif%22%20font-size%3D%2242%22%20font-weight%3D%22800%22%20fill%3D%22%23111827%22%3EJ%3C%2Ftext%3E%3C%2Fsvg%3E
-// @version      1.2.0
+// @version      1.2.1
 // @author       jackhai9
 // @description  Bilingual futures metrics with historical trends, current funding, settlement countdown, and indicator signals.
 // @match        https://www.binance.com/*/futures/*
@@ -406,6 +406,7 @@
     title: localizedText("交易数据", "Trading data"),
     metric: localizedText("指标", "Metric"),
     history: localizedText("历史趋势", "History"),
+    historyNote: localizedText("趋势按5分钟采样；费率曲线为历史结算。", "History: 5m samples; funding shows settlements."),
     value: localizedText("数值", "Value"),
     collapse: localizedText("收起面板", "Collapse panel"),
     expand: localizedText("展开面板", "Expand panel"),
@@ -722,6 +723,34 @@ ${item.value}`;
     return { element: button, count: observations.length, destroy };
   }
 
+  // src/shared/data-panel-layout.js
+  var DATA_PANEL_LAYOUT_EVENT = "jh-data-panels-layout-change";
+  var DATA_PANEL_WIDTH = 384;
+  var PANEL_IDS = Object.freeze({
+    trading: "jh-binance-trading-data-panel",
+    cmc: "jh-binance-cmc-data-panel"
+  });
+  var TWO_COLUMN_WIDTH = DATA_PANEL_WIDTH * 2 + 48;
+  function hasVisibleDataPanelPeer(document2, kind) {
+    const peer = document2.getElementById(PANEL_IDS[kind === "trading" ? "cmc" : "trading"]);
+    return peer !== null && peer.style.display !== "none";
+  }
+  function calculateDataPanelLayout({ kind, panelWidth, viewportWidth, viewportHeight, savedPosition, hasPeer }) {
+    if (kind !== "trading" && kind !== "cmc") throw new Error("Unknown data panel kind");
+    if (savedPosition !== null) {
+      return { ...savedPosition, maxHeight: Math.max(48, viewportHeight - savedPosition.top - 8) };
+    }
+    const stacked = hasPeer && viewportWidth < TWO_COLUMN_WIDTH;
+    const sectionHeight = Math.max(48, Math.floor((viewportHeight - 24) / 2));
+    const targetTop = stacked ? kind === "trading" ? 8 : 16 + sectionHeight : 60;
+    const top = Math.max(0, Math.min(targetTop, viewportHeight - 48));
+    const peerWidth = hasPeer && !stacked && kind === "cmc" ? DATA_PANEL_WIDTH + 16 : 0;
+    const targetLeft = viewportWidth - panelWidth - 16 - peerWidth;
+    const left = Math.max(0, Math.min(Math.max(stacked ? 8 : 16, targetLeft), viewportWidth - panelWidth));
+    const availableHeight = Math.max(48, viewportHeight - top - 8);
+    return { left, top, maxHeight: stacked ? Math.min(sectionHeight, availableHeight) : availableHeight };
+  }
+
   // src/binance-trading-data/panel-view.js
   var PANEL_ID = "jh-binance-trading-data-panel";
   var INITIAL_FUNDING_STATE = Object.freeze({
@@ -754,19 +783,19 @@ ${item.value}`;
       border: 1px solid var(--td-border);
       border-radius: 10px;
       box-shadow: 0 6px 24px #00000020;
-      font: 400 13px/1.45 BinancePlex, system-ui, -apple-system, sans-serif;
+      font: 400 13px/1.35 BinancePlex, system-ui, -apple-system, sans-serif;
       text-align: left;
       overflow: hidden;
     }
     ${scope} * { box-sizing: border-box; }
     ${scope} [hidden] { display: none !important; }
     ${scope} #${PANEL_ID}-header {
-      display: flex; align-items: center; gap: 7px; min-height: 49px;
-      padding: 10px 12px; flex: 0 0 auto; cursor: move; user-select: none;
+      display: flex; align-items: center; gap: 6px; min-height: 35px;
+      padding: 5px 8px; flex: 0 0 auto; cursor: move; user-select: none;
       border-bottom: 1px solid var(--td-border); background: var(--td-head);
     }
-    ${scope} .td-grip { color: var(--td-muted); font-size: 16px; flex: 0 0 auto; }
-    ${scope} .td-title { margin: 0; font-size: 15px; font-weight: 600; white-space: nowrap; }
+    ${scope} .td-grip { color: var(--td-muted); font-size: 14px; flex: 0 0 auto; }
+    ${scope} .td-title { margin: 0; font-size: 14px; font-weight: 600; white-space: nowrap; }
     ${scope} #${PANEL_ID}-symbol {
       min-width: 0; color: var(--td-muted); font-size: 12px;
       overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
@@ -775,31 +804,31 @@ ${item.value}`;
     ${scope} button { font: inherit; cursor: pointer; border: 0; color: inherit; background: transparent; }
     ${scope} .td-actions button {
       display: flex; align-items: center; justify-content: center;
-      width: 26px; height: 26px; padding: 2px; border-radius: 4px;
+      width: 24px; height: 24px; padding: 2px; border-radius: 4px;
       color: var(--td-muted); font-size: 17px;
     }
     ${scope} button:hover { background: var(--td-highlight); }
     ${scope} button:focus-visible { outline: 2px solid var(--td-focus); outline-offset: 2px; }
     ${scope} #${PANEL_ID}-body { min-height: 0; overflow: auto; overscroll-behavior: contain; }
     ${scope} table { width: 100%; table-layout: fixed; border-collapse: collapse; }
-    ${scope} .td-name-col { width: 36%; }
-    ${scope} .td-trend-col { width: 31%; }
-    ${scope} .td-value-col { width: 33%; }
+    ${scope} .td-name-col { width: 42%; }
+    ${scope} .td-trend-col { width: 28%; }
+    ${scope} .td-value-col { width: 30%; }
     ${scope} thead { position: sticky; top: 0; z-index: 1; background: var(--td-head); }
-    ${scope} thead th { color: var(--td-muted); font-size: 11px; font-weight: 500; padding: 8px 10px; text-align: left; }
+    ${scope} thead th { color: var(--td-muted); font-size: 11px; font-weight: 500; padding: 4px 6px; text-align: left; }
     ${scope} thead th:nth-child(2) { text-align: center; }
     ${scope} thead th:last-child { text-align: right; }
-    ${scope} tbody th, ${scope} tbody td { padding: 10px; vertical-align: middle; border-top: 1px solid var(--td-border); }
+    ${scope} tbody th, ${scope} tbody td { padding: 4px 6px; vertical-align: middle; border-top: 1px solid var(--td-border); }
     ${scope} .td-name { color: var(--td-muted); text-align: left; font-weight: 400; overflow-wrap: anywhere; }
-    ${scope} .td-trend { padding: 8px 3px; text-align: center; }
+    ${scope} .td-trend { padding: 4px 2px; text-align: center; }
     ${scope} .td-value { text-align: right; font-variant-numeric: tabular-nums; }
     ${scope} .td-number { font-weight: 500; overflow-wrap: anywhere; }
     ${scope} .jh-td-flash { animation: jh-td-value-change 1s ease-out; }
     @keyframes jh-td-value-change { from { background: color-mix(in srgb, var(--td-chart) 25%, transparent); } to { background: transparent; } }
-    ${scope} small { display: block; margin-top: 3px; font-size: 11px; font-weight: 400; color: var(--td-muted); }
-    ${scope} .td-value small { line-height: 1.4; }
+    ${scope} small { display: block; margin-top: 1px; font-size: 11px; font-weight: 400; color: var(--td-muted); }
+    ${scope} .td-value small { line-height: 1.35; }
     ${scope} .td-spark-button { display: block; width: 100%; padding: 0; border-radius: 4px; color: var(--td-chart); touch-action: pan-y; }
-    ${scope} .td-sparkline { display: block; width: 100%; height: 44px; overflow: visible; }
+    ${scope} .td-sparkline { display: block; width: 100%; height: 26px; overflow: visible; }
     ${scope} .td-spark-path { fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
     ${scope} .td-spark-reference { stroke: var(--td-border); stroke-width: 1; }
     ${scope} .td-spark-guide { stroke: var(--td-muted); stroke-width: 1; pointer-events: none; }
@@ -807,11 +836,11 @@ ${item.value}`;
     ${scope} .td-spark-hit { fill: transparent; pointer-events: all; }
     ${scope} .td-buy-bar { fill: var(--td-buy); }
     ${scope} .td-sell-bar { fill: var(--td-sell); }
-    ${scope} .td-no-history { display: block; padding: 9px 0; color: var(--td-muted); font-size: 11px; }
+    ${scope} .td-no-history { display: block; padding: 3px 0; color: var(--td-muted); font-size: 11px; }
     ${scope} .td-trend-caption, ${scope} .td-last-settled { font-size: 11px; }
     ${scope} .td-last-settled { display: block; margin-top: 2px; color: var(--td-text); font-variant-numeric: tabular-nums; }
     ${scope} .td-last-value { display: inline-block; white-space: nowrap; }
-    ${scope} .td-legend { display: flex; justify-content: center; gap: 9px; margin-top: 3px; color: var(--td-muted); font-size: 11px; }
+    ${scope} .td-legend { display: flex; justify-content: center; gap: 6px; margin-top: 1px; color: var(--td-muted); font-size: 11px; }
     ${scope} .td-legend span { display: inline-flex; align-items: center; gap: 3px; }
     ${scope} .td-legend i { display: inline-block; width: 5px; height: 7px; background: var(--td-buy); }
     ${scope} .td-legend span:last-child i { background: var(--td-sell); }
@@ -825,30 +854,29 @@ ${item.value}`;
     ${scope} .td-funding-row { background: var(--td-highlight); }
     ${scope} .td-funding-row .td-name { color: var(--td-text); font-weight: 500; }
     ${scope} .td-funding-row .td-number { font-size: 14px; font-weight: 600; }
-    ${scope} .td-current-label { color: var(--td-text); margin: 0 0 3px; }
+    ${scope} .td-current-label { color: var(--td-text); margin: 0 0 1px; }
     ${scope} .td-countdown { font-variant-numeric: tabular-nums; }
-    ${scope} .td-history-detail td { padding: 10px 12px; background: var(--td-head); }
+    ${scope} .td-history-detail td { padding: 6px 8px; background: var(--td-head); }
     ${scope} .td-history-inspection { display: flex; flex-wrap: wrap; gap: 5px 12px; font-size: 11px; color: var(--td-muted); user-select: text; }
     ${scope} .td-history-inspection strong { flex: 1 0 100%; color: var(--td-text); font-size: 12px; font-weight: 500; }
     ${scope} .td-history-value { color: var(--td-text); font-variant-numeric: tabular-nums; }
-    ${scope} #${PANEL_ID}-composite { padding: 12px; border-top: 1px solid var(--td-border); }
-    ${scope} .td-composite-line { display: flex; justify-content: space-between; gap: 8px; font-weight: 600; }
+    ${scope} #${PANEL_ID}-composite { padding: 6px 8px; border-top: 1px solid var(--td-border); }
+    ${scope} .td-composite-line { display: flex; justify-content: space-between; gap: 6px; font-weight: 600; list-style: none; cursor: pointer; }
+    ${scope} .td-composite-line::-webkit-details-marker { display: none; }
+    ${scope} .td-composite-line:focus-visible { outline: 2px solid var(--td-focus); outline-offset: 2px; }
+    ${scope} .td-composite-info { margin-left: 4px; color: var(--td-muted); font-size: 11px; font-weight: 400; }
     ${scope} .td-bias { white-space: nowrap; }
-    ${scope} .td-vote-track { display: flex; height: 5px; margin-top: 10px; border-radius: 5px; overflow: hidden; background: var(--td-border); }
+    ${scope} .td-vote-track { display: flex; height: 3px; margin-top: 4px; border-radius: 3px; overflow: hidden; background: var(--td-border); }
     ${scope} .td-vote-track span:first-child { background: var(--td-buy); }
     ${scope} .td-vote-track span:last-child { background: var(--td-sell); margin-left: auto; }
-    ${scope} .td-composite-votes { margin-top: 8px; }
-    ${scope} .td-method-note { line-height: 1.5; }
-    ${scope} #${PANEL_ID}-footer { padding: 9px 12px; color: var(--td-muted); font-size: 11px; border-top: 1px solid var(--td-border); font-variant-numeric: tabular-nums; }
-    ${scope} .td-footer-line { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 5px 10px; }
+    ${scope} .td-composite-votes { margin-top: 3px; }
+    ${scope} .td-method-note { margin-top: 4px; line-height: 1.4; }
+    ${scope} #${PANEL_ID}-footer { padding: 5px 8px; color: var(--td-muted); font-size: 11px; border-top: 1px solid var(--td-border); font-variant-numeric: tabular-nums; }
+    ${scope} .td-footer-line { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 3px 8px; }
     @media (max-width: 540px) {
       ${scope} { font-size: 12px; }
-      ${scope} #${PANEL_ID}-header { padding: 9px 10px; gap: 6px; }
-      ${scope} .td-title { font-size: 14px; }
-      ${scope} .td-name-col { width: 34%; }
-      ${scope} .td-value-col { width: 35%; }
-      ${scope} thead th, ${scope} tbody th, ${scope} tbody td { padding: 9px 5px; }
-      ${scope} .td-trend { padding: 8px 3px; }
+      ${scope} thead th, ${scope} tbody th, ${scope} tbody td { padding: 4px; }
+      ${scope} .td-trend { padding: 4px 2px; }
       ${scope} .td-funding-row .td-number { font-size: 13px; }
     }
   `;
@@ -858,7 +886,7 @@ ${item.value}`;
     style.textContent = styles();
     panel.append(style);
     Object.assign(panel.style, {
-      width: "480px",
+      width: `${DATA_PANEL_WIDTH}px`,
       maxWidth: "calc(100vw - 16px)",
       maxHeight: "calc(100vh - 24px)",
       display: "flex",
@@ -913,7 +941,8 @@ ${item.value}`;
     const footer = identify(node("footer"), "footer");
     const footerLine = node("div", "td-footer-line");
     footerLine.append(role(node("span"), "updated-at"), role(node("span"), "elapsed"));
-    footer.append(footerLine);
+    const historyNote = node("small", "td-history-note");
+    footer.append(footerLine, historyNote);
     body.append(table, composite, footer);
     panel.append(header, body);
     let currentModel = null;
@@ -935,6 +964,7 @@ ${item.value}`;
       panel.setAttribute("aria-label", panelTitle);
       table.setAttribute("aria-label", panelTitle);
       setText(title, panelTitle);
+      setText(historyNote, tradingText("historyNote", locale));
       for (const heading of headings) setText(heading, tradingText(heading.dataset.copy, locale));
       const collapseTitle = tradingText(collapsed ? "expand" : "collapse", locale);
       collapseButton.title = collapseTitle;
@@ -1024,7 +1054,7 @@ ${formatHistoryTime(state.current.time, locale)}`;
         indicator,
         locale,
         onInspect(record, action) {
-          setText(detailTitle, `${record.name} · ${record.label}`);
+          setText(detailTitle, `${record.name} · ${formatHistoryCount(id, chart.count, locale)}`);
           setText(detailTime, record.time);
           detailTime.dateTime = new Date(record.timestamp).toISOString();
           setText(detailValue, record.value);
@@ -1039,8 +1069,9 @@ ${formatHistoryTime(state.current.time, locale)}`;
       });
       charts.push(chart);
       if (chart.count > 0) chart.element.setAttribute("aria-controls", detailRow.id);
-      trend.append(chart.element, node("small", "td-trend-caption", formatHistoryCount(id, chart.count, locale)));
+      trend.append(chart.element);
       if (isFunding) {
+        trend.append(node("small", "td-trend-caption", formatHistoryCount(id, chart.count, locale)));
         const settled = node("span", "td-last-settled");
         settled.append(document2.createTextNode(`${tradingText("last", locale)} `), node("span", "td-last-value", indicator.display));
         trend.append(settled);
@@ -1088,8 +1119,15 @@ ${formatHistoryTime(state.current.time, locale)}`;
     }
     function renderComposite(model) {
       const signal = model.longCount === model.shortCount ? "neutral" : model.longCount > model.shortCount ? "long" : "short";
-      const line = node("div", "td-composite-line");
-      line.append(node("span", "", tradingText("composite", locale)), node("span", `td-bias td-signal-${signal}`, `${tradingText(signal, locale)} ${model.longCount}:${model.shortCount}`));
+      const method = node("details", "td-method");
+      method.open = composite.querySelector(".td-method")?.open === true;
+      const line = node("summary", "td-composite-line");
+      const label = node("span", "", tradingText("composite", locale));
+      const info = node("span", "td-composite-info", "ⓘ");
+      info.setAttribute("aria-hidden", "true");
+      label.append(info);
+      line.append(label, node("span", `td-bias td-signal-${signal}`, `${tradingText(signal, locale)} ${model.longCount}:${model.shortCount}`));
+      method.append(line, node("small", "td-method-note", tradingText("simplifiedNote", locale)));
       const track = node("div", "td-vote-track");
       const votes = formatVotes(model, locale);
       track.setAttribute("role", "img");
@@ -1099,7 +1137,7 @@ ${formatHistoryTime(state.current.time, locale)}`;
         bar.style.width = `${model.total > 0 ? count / model.total * 100 : 0}%`;
         track.append(bar);
       }
-      composite.replaceChildren(line, track, node("small", "td-composite-votes", votes), node("small", "td-method-note", tradingText("simplifiedNote", locale)));
+      composite.replaceChildren(method, track, node("small", "td-composite-votes", votes));
     }
     function render(model) {
       const previousValues = new Map(currentModel !== null && currentModel.symbol === model.symbol ? currentModel.indicators.map((indicator) => [indicator.id, indicator.value]) : []);
@@ -1145,33 +1183,6 @@ ${formatHistoryTime(state.current.time, locale)}`;
     };
   }
 
-  // src/shared/data-panel-layout.js
-  var DATA_PANEL_LAYOUT_EVENT = "jh-data-panels-layout-change";
-  var PANEL_IDS = Object.freeze({
-    trading: "jh-binance-trading-data-panel",
-    cmc: "jh-binance-cmc-data-panel"
-  });
-  var TWO_COLUMN_WIDTH = 480 + 500 + 48;
-  function hasVisibleDataPanelPeer(document2, kind) {
-    const peer = document2.getElementById(PANEL_IDS[kind === "trading" ? "cmc" : "trading"]);
-    return peer !== null && peer.style.display !== "none";
-  }
-  function calculateDataPanelLayout({ kind, panelWidth, viewportWidth, viewportHeight, savedPosition, hasPeer }) {
-    if (kind !== "trading" && kind !== "cmc") throw new Error("Unknown data panel kind");
-    if (savedPosition !== null) {
-      return { ...savedPosition, maxHeight: Math.max(48, viewportHeight - savedPosition.top - 8) };
-    }
-    const stacked = hasPeer && viewportWidth < TWO_COLUMN_WIDTH;
-    const sectionHeight = Math.max(48, Math.floor((viewportHeight - 24) / 2));
-    const targetTop = stacked ? kind === "trading" ? 8 : 16 + sectionHeight : 60;
-    const top = Math.max(0, Math.min(targetTop, viewportHeight - 48));
-    const peerWidth = hasPeer && !stacked && kind === "cmc" ? 480 + 16 : 0;
-    const targetLeft = viewportWidth - panelWidth - 16 - peerWidth;
-    const left = Math.max(0, Math.min(Math.max(stacked ? 8 : 16, targetLeft), viewportWidth - panelWidth));
-    const availableHeight = Math.max(48, viewportHeight - top - 8);
-    return { left, top, maxHeight: stacked ? Math.min(sectionHeight, availableHeight) : availableHeight };
-  }
-
   // src/binance-trading-data/index.user.js
   (function() {
     "use strict";
@@ -1182,7 +1193,6 @@ ${formatHistoryTime(state.current.time, locale)}`;
     const PANEL_ID2 = "jh-binance-trading-data-panel";
     const STORAGE_POS_KEY = "jh_binance_trading_data_pos";
     const STORAGE_COLLAPSED_KEY = "jh_binance_trading_data_collapsed";
-    const PANEL_WIDTH = 480;
     const DEBUG = false;
     const PERIOD_MS = 5 * 60 * 1e3;
     const FIRST_DELAY = 5e3;
@@ -1606,7 +1616,7 @@ ${formatHistoryTime(state.current.time, locale)}`;
       };
     }
     function keepPanelInViewport(panel) {
-      const width = panel.offsetWidth || PANEL_WIDTH;
+      const width = panel.offsetWidth || DATA_PANEL_WIDTH;
       const normalized = calculateDataPanelLayout({
         kind: "trading",
         panelWidth: width,
@@ -1623,7 +1633,7 @@ ${formatHistoryTime(state.current.time, locale)}`;
     function savePanelPosition(panel) {
       if (!panel) return;
       const rect = panel.getBoundingClientRect();
-      const normalized = normalizeSavedPosition({ left: rect.left, top: rect.top }, panel.offsetWidth || PANEL_WIDTH);
+      const normalized = normalizeSavedPosition({ left: rect.left, top: rect.top }, panel.offsetWidth || DATA_PANEL_WIDTH);
       if (!normalized) return;
       savePosition(normalized.left, normalized.top);
       keepPanelInViewport(panel);
diff --git a/src/binance-coinmarketcap-data/index.user.js b/src/binance-coinmarketcap-data/index.user.js
index 21a8ba0..f1690ad 100644
--- a/src/binance-coinmarketcap-data/index.user.js
+++ b/src/binance-coinmarketcap-data/index.user.js
@@ -3,7 +3,7 @@
 // @namespace    binance.coinmarketcap.data
 // @icon         data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2064%2064%22%3E%3Crect%20width%3D%2264%22%20height%3D%2264%22%20rx%3D%2214%22%20fill%3D%22%23f0b90b%22%2F%3E%3Ctext%20x%3D%2232%22%20y%3D%2249%22%20text-anchor%3D%22middle%22%20font-family%3D%22Arial%2C%20sans-serif%22%20font-size%3D%2242%22%20font-weight%3D%22800%22%20fill%3D%22%23111827%22%3EJ%3C%2Ftext%3E%3C%2Fsvg%3E
 // @icon64       data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2064%2064%22%3E%3Crect%20width%3D%2264%22%20height%3D%2264%22%20rx%3D%2214%22%20fill%3D%22%23f0b90b%22%2F%3E%3Ctext%20x%3D%2232%22%20y%3D%2249%22%20text-anchor%3D%22middle%22%20font-family%3D%22Arial%2C%20sans-serif%22%20font-size%3D%2242%22%20font-weight%3D%22800%22%20fill%3D%22%23111827%22%3EJ%3C%2Ftext%3E%3C%2Fsvg%3E
-// @version      0.2.0
+// @version      0.2.1
 // @author       jackhai9
 // @description  Show localized CoinMarketCap valuation, supply, and metric interpretations on Binance futures pages
 // @match        https://www.binance.com/*/futures/*
@@ -30,7 +30,7 @@ import {
 import { buildCmcMetricRows, numberOrNull } from './metrics.js';
 import { CMC_COPY, formatLocalizedText, resolveUiLocaleFromPathname } from './ui-copy.js';
 import { cmcPanelStyles } from './panel-styles.js';
-import { calculateDataPanelLayout, DATA_PANEL_LAYOUT_EVENT, hasVisibleDataPanelPeer } from '../shared/data-panel-layout.js';
+import { calculateDataPanelLayout, DATA_PANEL_LAYOUT_EVENT, DATA_PANEL_WIDTH as PANEL_WIDTH, hasVisibleDataPanelPeer } from '../shared/data-panel-layout.js';
 
 (function () {
   'use strict';
@@ -42,7 +42,6 @@ import { calculateDataPanelLayout, DATA_PANEL_LAYOUT_EVENT, hasVisibleDataPanelP
   const PANEL_ID = 'jh-binance-cmc-data-panel';
   const STORAGE_POS_KEY = 'jh_binance_cmc_data_pos';
   const STORAGE_COLLAPSED_KEY = 'jh_binance_cmc_data_collapsed';
-  const PANEL_WIDTH = 500;
   const REFRESH_MS = 30 * 1000;
   const ROUTE_WATCHDOG_MS = 5_000;
   const CMC_MAP_API = 'https://api.coinmarketcap.com/data-api/v1/cryptocurrency/map';
@@ -437,11 +436,11 @@ import { calculateDataPanelLayout, DATA_PANEL_LAYOUT_EVENT, hasVisibleDataPanelP
             '<td class="cmc-value"><span class="cmc-number" data-role="metric-value">', escapeHtml(row.value), '</span>',
               row.unit ? '<small class="cmc-unit">' + escapeHtml(row.unit) + '</small>' : '', change,
             '</td>',
-            '<td><button type="button" class="cmc-reading-button" data-expand-metric="', row.id, '" aria-expanded="', String(expanded), '" aria-controls="', detailId, '" aria-label="', escapeHtml(row.label + ' · ' + uiText(CMC_COPY.details)), '">',
+            '<td><button type="button" class="cmc-reading-button" data-expand-metric="', row.id, '" aria-expanded="', String(expanded), '" aria-controls="', detailId, '" aria-label="', escapeHtml(row.label + ' · ' + uiText(CMC_COPY.details)), '" title="', escapeHtml(row.note), '">',
               '<span class="cmc-reading-text">', escapeHtml(row.interpretation), '</span><span class="cmc-info" aria-hidden="true">ⓘ</span>',
-            '</button><small>', escapeHtml(row.note), '</small></td>',
+            '</button></td>',
           '</tr>',
-          '<tr id="', detailId, '" class="cmc-explanation"', expanded ? '' : ' hidden', '><td colspan="3"><strong>', escapeHtml(row.label), '</strong>', escapeHtml(row.explanation), '</td></tr>',
+          '<tr id="', detailId, '" class="cmc-explanation"', expanded ? '' : ' hidden', '><td colspan="3"><strong>', escapeHtml(row.label), '</strong>', escapeHtml(row.explanation), '<small>', escapeHtml(row.note), '</small></td></tr>',
         ].join('');
       }).join('');
       rowsEl.innerHTML = lastRowsHtml;
diff --git a/src/binance-coinmarketcap-data/panel-styles.js b/src/binance-coinmarketcap-data/panel-styles.js
index 80b2878..df1e395 100644
--- a/src/binance-coinmarketcap-data/panel-styles.js
+++ b/src/binance-coinmarketcap-data/panel-styles.js
@@ -26,7 +26,7 @@ export function cmcPanelStyles(panelId) {
       box-shadow: 0 6px 24px #00000020;
       font-family: BinancePlex, system-ui, -apple-system, sans-serif;
       font-size: 12px;
-      line-height: 1.4;
+      line-height: 1.35;
       text-align: left;
       overflow: hidden;
       user-select: none;
@@ -38,7 +38,7 @@ export function cmcPanelStyles(panelId) {
       align-items: center;
       justify-content: space-between;
       gap: 6px;
-      padding: 8px 10px;
+      padding: 5px 8px;
       flex: 0 0 auto;
       cursor: move;
       background: var(--cmc-head);
@@ -49,47 +49,46 @@ export function cmcPanelStyles(panelId) {
     ${scope} #${panelId}-symbol { color: var(--cmc-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
     ${scope} .cmc-controls { display: flex; gap: 2px; flex: 0 0 auto; }
     ${scope} button { font: inherit; cursor: pointer; color: inherit; background: transparent; border: 0; }
-    ${scope} .cmc-controls button { min-width: 25px; min-height: 26px; font-size: 16px; padding: 2px 4px; color: var(--cmc-muted); }
+    ${scope} .cmc-controls button { min-width: 24px; min-height: 24px; font-size: 16px; padding: 2px 4px; color: var(--cmc-muted); }
     ${scope} button:focus-visible, ${scope} a:focus-visible { outline: 2px solid var(--cmc-accent); outline-offset: 2px; border-radius: 3px; }
     ${scope} #${panelId}-body { min-height: 0; overflow: auto; overscroll-behavior: contain; }
-    ${scope} table { width: 100%; table-layout: fixed; border-collapse: collapse; }
-    ${scope} .cmc-name-col { width: 31%; }
+    /* Reserve space for complete prices and changes before wrapping the surrounding prose. */
+    ${scope} table { width: 100%; table-layout: auto; border-collapse: collapse; }
+    ${scope} .cmc-name-col { width: 33%; }
     ${scope} .cmc-value-col { width: 26%; }
-    ${scope} .cmc-reading-col { width: 43%; }
+    ${scope} .cmc-reading-col { width: 41%; }
     ${scope} thead { position: sticky; top: 0; z-index: 1; background: var(--cmc-head); }
-    ${scope} thead th { color: var(--cmc-muted); font-size: 11px; font-weight: 500; padding: 7px 10px; text-align: left; }
+    ${scope} thead th { color: var(--cmc-muted); font-size: 11px; font-weight: 500; padding: 4px 6px; text-align: left; }
     ${scope} thead th:nth-child(2) { text-align: right; }
-    ${scope} tbody th, ${scope} tbody td { padding: 9px 10px; border-top: 1px solid var(--cmc-border); vertical-align: middle; overflow-wrap: anywhere; }
+    ${scope} tbody th, ${scope} tbody td { padding: 4px 6px; border-top: 1px solid var(--cmc-border); vertical-align: middle; overflow-wrap: anywhere; }
     ${scope} .cmc-name { text-align: left; font-weight: 500; }
-    ${scope} small { display: block; margin-top: 3px; font-size: 11px; line-height: 1.4; color: var(--cmc-muted); }
+    ${scope} small { display: block; margin-top: 1px; font-size: 11px; line-height: 1.35; color: var(--cmc-muted); }
     ${scope} .cmc-value { text-align: right; font-variant-numeric: tabular-nums; }
-    ${scope} .cmc-number { display: block; font-weight: 650; white-space: nowrap; }
+    ${scope} .cmc-number { display: inline-block; font-weight: 650; white-space: nowrap; }
+    ${scope} .cmc-unit { display: inline-block; margin: 0 0 0 4px; }
     ${scope} .cmc-change { font-size: 11px; white-space: nowrap; }
     ${scope} .cmc-change[data-tone="positive"], ${scope} [data-tone="positive"] .cmc-reading-text { color: var(--cmc-buy); }
     ${scope} .cmc-change[data-tone="negative"], ${scope} [data-tone="negative"] .cmc-reading-text { color: var(--cmc-sell); }
     ${scope} .cmc-change[data-tone="neutral"] { color: var(--cmc-muted); }
     ${scope} .cmc-key { background: color-mix(in srgb, var(--color-PrimaryYellow, #f0b90b) 7%, var(--cmc-bg)); }
     ${scope} .cmc-group th, ${scope} .cmc-group td { border-top-width: 2px; }
-    ${scope} .cmc-reading-button { display: flex; align-items: flex-start; justify-content: space-between; gap: 5px; width: 100%; padding: 0; line-height: inherit; text-align: left; }
+    ${scope} .cmc-reading-button { display: flex; align-items: center; justify-content: space-between; gap: 3px; width: 100%; min-height: 24px; padding: 0; line-height: inherit; text-align: left; }
     ${scope} .cmc-reading-text { font-weight: 500; }
     ${scope} [data-tone="missing"] .cmc-reading-text { color: var(--cmc-muted); }
     ${scope} [data-tone="active"] .cmc-reading-text { color: var(--cmc-accent); }
     ${scope} .cmc-info { color: var(--cmc-muted); flex: 0 0 auto; font-size: 11px; }
-    ${scope} .cmc-explanation td { padding: 10px 12px; color: var(--cmc-muted); background: var(--cmc-head); font-size: 11px; line-height: 1.6; user-select: text; }
+    ${scope} .cmc-explanation td { padding: 6px 8px; color: var(--cmc-muted); background: var(--cmc-head); font-size: 11px; line-height: 1.5; user-select: text; }
     ${scope} .cmc-explanation strong { color: var(--cmc-text); margin-right: 8px; font-weight: 600; }
     ${scope} .cmc-status { padding: 10px 0; color: var(--cmc-muted); }
     ${scope} .cmc-error-title { font-weight: 600; color: var(--cmc-sell); margin-bottom: 4px; }
-    ${scope} #${panelId}-footer { padding: 8px 10px; color: var(--cmc-muted); font-size: 11px; border-top: 1px solid var(--cmc-border); }
-    ${scope} .cmc-source-line { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 5px 10px; }
+    ${scope} #${panelId}-footer { padding: 5px 8px; color: var(--cmc-muted); font-size: 11px; border-top: 1px solid var(--cmc-border); }
+    ${scope} .cmc-source-line { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 3px 8px; }
     ${scope} #${panelId}-footer a { color: var(--cmc-accent); text-decoration: none; }
     ${scope} .cmc-times { font-variant-numeric: tabular-nums; }
     @media (max-width: 540px) {
       ${scope} { font-size: 11px; }
-      ${scope} tbody th, ${scope} tbody td { padding: 8px 6px; }
-      ${scope} thead th { padding: 7px 6px; }
-      ${scope} .cmc-name-col { width: 31%; }
-      ${scope} .cmc-value-col { width: 27%; }
-      ${scope} .cmc-reading-col { width: 42%; }
+      ${scope} tbody th, ${scope} tbody td { padding: 4px; }
+      ${scope} thead th { padding: 4px; }
       ${scope} .cmc-info { display: none; }
     }
   `;
diff --git a/src/binance-trading-data/index.user.js b/src/binance-trading-data/index.user.js
index 8d5fd05..e1041ee 100644
--- a/src/binance-trading-data/index.user.js
+++ b/src/binance-trading-data/index.user.js
@@ -3,7 +3,7 @@
 // @namespace    binance.trading.data
 // @icon         data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2064%2064%22%3E%3Crect%20width%3D%2264%22%20height%3D%2264%22%20rx%3D%2214%22%20fill%3D%22%23f0b90b%22%2F%3E%3Ctext%20x%3D%2232%22%20y%3D%2249%22%20text-anchor%3D%22middle%22%20font-family%3D%22Arial%2C%20sans-serif%22%20font-size%3D%2242%22%20font-weight%3D%22800%22%20fill%3D%22%23111827%22%3EJ%3C%2Ftext%3E%3C%2Fsvg%3E
 // @icon64       data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2064%2064%22%3E%3Crect%20width%3D%2264%22%20height%3D%2264%22%20rx%3D%2214%22%20fill%3D%22%23f0b90b%22%2F%3E%3Ctext%20x%3D%2232%22%20y%3D%2249%22%20text-anchor%3D%22middle%22%20font-family%3D%22Arial%2C%20sans-serif%22%20font-size%3D%2242%22%20font-weight%3D%22800%22%20fill%3D%22%23111827%22%3EJ%3C%2Ftext%3E%3C%2Fsvg%3E
-// @version      1.2.0
+// @version      1.2.1
 // @author       jackhai9
 // @description  Bilingual futures metrics with historical trends, current funding, settlement countdown, and indicator signals.
 // @match        https://www.binance.com/*/futures/*
@@ -27,7 +27,7 @@ import {
 import { resolveUiLocaleFromPathname } from '../binance-orderbook-trade/contracts/panel-copy.js';
 import { computeTradingSignals, parseCurrentFunding, parseFundingInterval, parseHistory } from './market-data.js';
 import { createTradingDataView } from './panel-view.js';
-import { calculateDataPanelLayout, DATA_PANEL_LAYOUT_EVENT, hasVisibleDataPanelPeer } from '../shared/data-panel-layout.js';
+import { calculateDataPanelLayout, DATA_PANEL_LAYOUT_EVENT, DATA_PANEL_WIDTH as PANEL_WIDTH, hasVisibleDataPanelPeer } from '../shared/data-panel-layout.js';
 
 (function () {
   'use strict';
@@ -42,7 +42,6 @@ import { calculateDataPanelLayout, DATA_PANEL_LAYOUT_EVENT, hasVisibleDataPanelP
   const PANEL_ID = 'jh-binance-trading-data-panel';
   const STORAGE_POS_KEY = 'jh_binance_trading_data_pos';
   const STORAGE_COLLAPSED_KEY = 'jh_binance_trading_data_collapsed';
-  const PANEL_WIDTH = 480;
   const DEBUG = false;
 
   const PERIOD_MS = 5 * 60 * 1000;  // 数据周期 5 分钟
diff --git a/src/binance-trading-data/panel-view.js b/src/binance-trading-data/panel-view.js
index e6e0737..a441acc 100644
--- a/src/binance-trading-data/panel-view.js
+++ b/src/binance-trading-data/panel-view.js
@@ -1,5 +1,6 @@
 import { formatFundingPercent } from './market-data.js';
 import { createHistoryChart } from './sparkline.js';
+import { DATA_PANEL_WIDTH } from '../shared/data-panel-layout.js';
 import {
   formatFundingPeriod, formatHistoryCount, formatHistoryTime, formatVotes,
   tradingMetricText, tradingText,
@@ -32,19 +33,19 @@ function styles() {
       border: 1px solid var(--td-border);
       border-radius: 10px;
       box-shadow: 0 6px 24px #00000020;
-      font: 400 13px/1.45 BinancePlex, system-ui, -apple-system, sans-serif;
+      font: 400 13px/1.35 BinancePlex, system-ui, -apple-system, sans-serif;
       text-align: left;
       overflow: hidden;
     }
     ${scope} * { box-sizing: border-box; }
     ${scope} [hidden] { display: none !important; }
     ${scope} #${PANEL_ID}-header {
-      display: flex; align-items: center; gap: 7px; min-height: 49px;
-      padding: 10px 12px; flex: 0 0 auto; cursor: move; user-select: none;
+      display: flex; align-items: center; gap: 6px; min-height: 35px;
+      padding: 5px 8px; flex: 0 0 auto; cursor: move; user-select: none;
       border-bottom: 1px solid var(--td-border); background: var(--td-head);
     }
-    ${scope} .td-grip { color: var(--td-muted); font-size: 16px; flex: 0 0 auto; }
-    ${scope} .td-title { margin: 0; font-size: 15px; font-weight: 600; white-space: nowrap; }
+    ${scope} .td-grip { color: var(--td-muted); font-size: 14px; flex: 0 0 auto; }
+    ${scope} .td-title { margin: 0; font-size: 14px; font-weight: 600; white-space: nowrap; }
     ${scope} #${PANEL_ID}-symbol {
       min-width: 0; color: var(--td-muted); font-size: 12px;
       overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
@@ -53,31 +54,31 @@ function styles() {
     ${scope} button { font: inherit; cursor: pointer; border: 0; color: inherit; background: transparent; }
     ${scope} .td-actions button {
       display: flex; align-items: center; justify-content: center;
-      width: 26px; height: 26px; padding: 2px; border-radius: 4px;
+      width: 24px; height: 24px; padding: 2px; border-radius: 4px;
       color: var(--td-muted); font-size: 17px;
     }
     ${scope} button:hover { background: var(--td-highlight); }
     ${scope} button:focus-visible { outline: 2px solid var(--td-focus); outline-offset: 2px; }
     ${scope} #${PANEL_ID}-body { min-height: 0; overflow: auto; overscroll-behavior: contain; }
     ${scope} table { width: 100%; table-layout: fixed; border-collapse: collapse; }
-    ${scope} .td-name-col { width: 36%; }
-    ${scope} .td-trend-col { width: 31%; }
-    ${scope} .td-value-col { width: 33%; }
+    ${scope} .td-name-col { width: 42%; }
+    ${scope} .td-trend-col { width: 28%; }
+    ${scope} .td-value-col { width: 30%; }
     ${scope} thead { position: sticky; top: 0; z-index: 1; background: var(--td-head); }
-    ${scope} thead th { color: var(--td-muted); font-size: 11px; font-weight: 500; padding: 8px 10px; text-align: left; }
+    ${scope} thead th { color: var(--td-muted); font-size: 11px; font-weight: 500; padding: 4px 6px; text-align: left; }
     ${scope} thead th:nth-child(2) { text-align: center; }
     ${scope} thead th:last-child { text-align: right; }
-    ${scope} tbody th, ${scope} tbody td { padding: 10px; vertical-align: middle; border-top: 1px solid var(--td-border); }
+    ${scope} tbody th, ${scope} tbody td { padding: 4px 6px; vertical-align: middle; border-top: 1px solid var(--td-border); }
     ${scope} .td-name { color: var(--td-muted); text-align: left; font-weight: 400; overflow-wrap: anywhere; }
-    ${scope} .td-trend { padding: 8px 3px; text-align: center; }
+    ${scope} .td-trend { padding: 4px 2px; text-align: center; }
     ${scope} .td-value { text-align: right; font-variant-numeric: tabular-nums; }
     ${scope} .td-number { font-weight: 500; overflow-wrap: anywhere; }
     ${scope} .jh-td-flash { animation: jh-td-value-change 1s ease-out; }
     @keyframes jh-td-value-change { from { background: color-mix(in srgb, var(--td-chart) 25%, transparent); } to { background: transparent; } }
-    ${scope} small { display: block; margin-top: 3px; font-size: 11px; font-weight: 400; color: var(--td-muted); }
-    ${scope} .td-value small { line-height: 1.4; }
+    ${scope} small { display: block; margin-top: 1px; font-size: 11px; font-weight: 400; color: var(--td-muted); }
+    ${scope} .td-value small { line-height: 1.35; }
     ${scope} .td-spark-button { display: block; width: 100%; padding: 0; border-radius: 4px; color: var(--td-chart); touch-action: pan-y; }
-    ${scope} .td-sparkline { display: block; width: 100%; height: 44px; overflow: visible; }
+    ${scope} .td-sparkline { display: block; width: 100%; height: 26px; overflow: visible; }
     ${scope} .td-spark-path { fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
     ${scope} .td-spark-reference { stroke: var(--td-border); stroke-width: 1; }
     ${scope} .td-spark-guide { stroke: var(--td-muted); stroke-width: 1; pointer-events: none; }
@@ -85,11 +86,11 @@ function styles() {
     ${scope} .td-spark-hit { fill: transparent; pointer-events: all; }
     ${scope} .td-buy-bar { fill: var(--td-buy); }
     ${scope} .td-sell-bar { fill: var(--td-sell); }
-    ${scope} .td-no-history { display: block; padding: 9px 0; color: var(--td-muted); font-size: 11px; }
+    ${scope} .td-no-history { display: block; padding: 3px 0; color: var(--td-muted); font-size: 11px; }
     ${scope} .td-trend-caption, ${scope} .td-last-settled { font-size: 11px; }
     ${scope} .td-last-settled { display: block; margin-top: 2px; color: var(--td-text); font-variant-numeric: tabular-nums; }
     ${scope} .td-last-value { display: inline-block; white-space: nowrap; }
-    ${scope} .td-legend { display: flex; justify-content: center; gap: 9px; margin-top: 3px; color: var(--td-muted); font-size: 11px; }
+    ${scope} .td-legend { display: flex; justify-content: center; gap: 6px; margin-top: 1px; color: var(--td-muted); font-size: 11px; }
     ${scope} .td-legend span { display: inline-flex; align-items: center; gap: 3px; }
     ${scope} .td-legend i { display: inline-block; width: 5px; height: 7px; background: var(--td-buy); }
     ${scope} .td-legend span:last-child i { background: var(--td-sell); }
@@ -103,30 +104,29 @@ function styles() {
     ${scope} .td-funding-row { background: var(--td-highlight); }
     ${scope} .td-funding-row .td-name { color: var(--td-text); font-weight: 500; }
     ${scope} .td-funding-row .td-number { font-size: 14px; font-weight: 600; }
-    ${scope} .td-current-label { color: var(--td-text); margin: 0 0 3px; }
+    ${scope} .td-current-label { color: var(--td-text); margin: 0 0 1px; }
     ${scope} .td-countdown { font-variant-numeric: tabular-nums; }
-    ${scope} .td-history-detail td { padding: 10px 12px; background: var(--td-head); }
+    ${scope} .td-history-detail td { padding: 6px 8px; background: var(--td-head); }
     ${scope} .td-history-inspection { display: flex; flex-wrap: wrap; gap: 5px 12px; font-size: 11px; color: var(--td-muted); user-select: text; }
     ${scope} .td-history-inspection strong { flex: 1 0 100%; color: var(--td-text); font-size: 12px; font-weight: 500; }
     ${scope} .td-history-value { color: var(--td-text); font-variant-numeric: tabular-nums; }
-    ${scope} #${PANEL_ID}-composite { padding: 12px; border-top: 1px solid var(--td-border); }
-    ${scope} .td-composite-line { display: flex; justify-content: space-between; gap: 8px; font-weight: 600; }
+    ${scope} #${PANEL_ID}-composite { padding: 6px 8px; border-top: 1px solid var(--td-border); }
+    ${scope} .td-composite-line { display: flex; justify-content: space-between; gap: 6px; font-weight: 600; list-style: none; cursor: pointer; }
+    ${scope} .td-composite-line::-webkit-details-marker { display: none; }
+    ${scope} .td-composite-line:focus-visible { outline: 2px solid var(--td-focus); outline-offset: 2px; }
+    ${scope} .td-composite-info { margin-left: 4px; color: var(--td-muted); font-size: 11px; font-weight: 400; }
     ${scope} .td-bias { white-space: nowrap; }
-    ${scope} .td-vote-track { display: flex; height: 5px; margin-top: 10px; border-radius: 5px; overflow: hidden; background: var(--td-border); }
+    ${scope} .td-vote-track { display: flex; height: 3px; margin-top: 4px; border-radius: 3px; overflow: hidden; background: var(--td-border); }
     ${scope} .td-vote-track span:first-child { background: var(--td-buy); }
     ${scope} .td-vote-track span:last-child { background: var(--td-sell); margin-left: auto; }
-    ${scope} .td-composite-votes { margin-top: 8px; }
-    ${scope} .td-method-note { line-height: 1.5; }
-    ${scope} #${PANEL_ID}-footer { padding: 9px 12px; color: var(--td-muted); font-size: 11px; border-top: 1px solid var(--td-border); font-variant-numeric: tabular-nums; }
-    ${scope} .td-footer-line { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 5px 10px; }
+    ${scope} .td-composite-votes { margin-top: 3px; }
+    ${scope} .td-method-note { margin-top: 4px; line-height: 1.4; }
+    ${scope} #${PANEL_ID}-footer { padding: 5px 8px; color: var(--td-muted); font-size: 11px; border-top: 1px solid var(--td-border); font-variant-numeric: tabular-nums; }
+    ${scope} .td-footer-line { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 3px 8px; }
     @media (max-width: 540px) {
       ${scope} { font-size: 12px; }
-      ${scope} #${PANEL_ID}-header { padding: 9px 10px; gap: 6px; }
-      ${scope} .td-title { font-size: 14px; }
-      ${scope} .td-name-col { width: 34%; }
-      ${scope} .td-value-col { width: 35%; }
-      ${scope} thead th, ${scope} tbody th, ${scope} tbody td { padding: 9px 5px; }
-      ${scope} .td-trend { padding: 8px 3px; }
+      ${scope} thead th, ${scope} tbody th, ${scope} tbody td { padding: 4px; }
+      ${scope} .td-trend { padding: 4px 2px; }
       ${scope} .td-funding-row .td-number { font-size: 13px; }
     }
   `;
@@ -138,7 +138,7 @@ export function createTradingDataView({ document, panel, locale, collapsed, onCo
   style.textContent = styles();
   panel.append(style);
   Object.assign(panel.style, {
-    width: '480px', maxWidth: 'calc(100vw - 16px)', maxHeight: 'calc(100vh - 24px)',
+    width: `${DATA_PANEL_WIDTH}px`, maxWidth: 'calc(100vw - 16px)', maxHeight: 'calc(100vh - 24px)',
     display: 'flex', flexDirection: 'column',
   });
   const node = (tag, className = '', text = '') => {
@@ -191,7 +191,8 @@ export function createTradingDataView({ document, panel, locale, collapsed, onCo
   const footer = identify(node('footer'), 'footer');
   const footerLine = node('div', 'td-footer-line');
   footerLine.append(role(node('span'), 'updated-at'), role(node('span'), 'elapsed'));
-  footer.append(footerLine);
+  const historyNote = node('small', 'td-history-note');
+  footer.append(footerLine, historyNote);
   body.append(table, composite, footer);
   panel.append(header, body);
 
@@ -216,6 +217,7 @@ export function createTradingDataView({ document, panel, locale, collapsed, onCo
     panel.setAttribute('aria-label', panelTitle);
     table.setAttribute('aria-label', panelTitle);
     setText(title, panelTitle);
+    setText(historyNote, tradingText('historyNote', locale));
     for (const heading of headings) setText(heading, tradingText(heading.dataset.copy, locale));
     const collapseTitle = tradingText(collapsed ? 'expand' : 'collapse', locale);
     collapseButton.title = collapseTitle;
@@ -310,7 +312,7 @@ export function createTradingDataView({ document, panel, locale, collapsed, onCo
     const chart = createHistoryChart({
       document, indicator, locale,
       onInspect(record, action) {
-        setText(detailTitle, `${record.name} · ${record.label}`);
+        setText(detailTitle, `${record.name} · ${formatHistoryCount(id, chart.count, locale)}`);
         setText(detailTime, record.time);
         detailTime.dateTime = new Date(record.timestamp).toISOString();
         setText(detailValue, record.value);
@@ -325,8 +327,9 @@ export function createTradingDataView({ document, panel, locale, collapsed, onCo
     });
     charts.push(chart);
     if (chart.count > 0) chart.element.setAttribute('aria-controls', detailRow.id);
-    trend.append(chart.element, node('small', 'td-trend-caption', formatHistoryCount(id, chart.count, locale)));
+    trend.append(chart.element);
     if (isFunding) {
+      trend.append(node('small', 'td-trend-caption', formatHistoryCount(id, chart.count, locale)));
       const settled = node('span', 'td-last-settled');
       settled.append(document.createTextNode(`${tradingText('last', locale)} `), node('span', 'td-last-value', indicator.display));
       trend.append(settled);
@@ -379,8 +382,15 @@ export function createTradingDataView({ document, panel, locale, collapsed, onCo
 
   function renderComposite(model) {
     const signal = model.longCount === model.shortCount ? 'neutral' : model.longCount > model.shortCount ? 'long' : 'short';
-    const line = node('div', 'td-composite-line');
-    line.append(node('span', '', tradingText('composite', locale)), node('span', `td-bias td-signal-${signal}`, `${tradingText(signal, locale)} ${model.longCount}:${model.shortCount}`));
+    const method = node('details', 'td-method');
+    method.open = composite.querySelector('.td-method')?.open === true;
+    const line = node('summary', 'td-composite-line');
+    const label = node('span', '', tradingText('composite', locale));
+    const info = node('span', 'td-composite-info', 'ⓘ');
+    info.setAttribute('aria-hidden', 'true');
+    label.append(info);
+    line.append(label, node('span', `td-bias td-signal-${signal}`, `${tradingText(signal, locale)} ${model.longCount}:${model.shortCount}`));
+    method.append(line, node('small', 'td-method-note', tradingText('simplifiedNote', locale)));
     const track = node('div', 'td-vote-track');
     const votes = formatVotes(model, locale);
     track.setAttribute('role', 'img');
@@ -390,7 +400,7 @@ export function createTradingDataView({ document, panel, locale, collapsed, onCo
       bar.style.width = `${model.total > 0 ? count / model.total * 100 : 0}%`;
       track.append(bar);
     }
-    composite.replaceChildren(line, track, node('small', 'td-composite-votes', votes), node('small', 'td-method-note', tradingText('simplifiedNote', locale)));
+    composite.replaceChildren(method, track, node('small', 'td-composite-votes', votes));
   }
 
   function render(model) {
diff --git a/src/binance-trading-data/ui-copy.js b/src/binance-trading-data/ui-copy.js
index 6d53e97..fb0001a 100644
--- a/src/binance-trading-data/ui-copy.js
+++ b/src/binance-trading-data/ui-copy.js
@@ -6,6 +6,7 @@ const COPY = Object.freeze({
   title: localizedText('交易数据', 'Trading data'),
   metric: localizedText('指标', 'Metric'),
   history: localizedText('历史趋势', 'History'),
+  historyNote: localizedText('趋势按5分钟采样；费率曲线为历史结算。', 'History: 5m samples; funding shows settlements.'),
   value: localizedText('数值', 'Value'),
   collapse: localizedText('收起面板', 'Collapse panel'),
   expand: localizedText('展开面板', 'Expand panel'),
diff --git a/src/shared/data-panel-layout.js b/src/shared/data-panel-layout.js
index b590e36..a3e5958 100644
--- a/src/shared/data-panel-layout.js
+++ b/src/shared/data-panel-layout.js
@@ -1,10 +1,11 @@
 export const DATA_PANEL_LAYOUT_EVENT = 'jh-data-panels-layout-change';
+export const DATA_PANEL_WIDTH = 384;
 
 const PANEL_IDS = Object.freeze({
   trading: 'jh-binance-trading-data-panel',
   cmc: 'jh-binance-cmc-data-panel',
 });
-const TWO_COLUMN_WIDTH = 480 + 500 + 48;
+const TWO_COLUMN_WIDTH = DATA_PANEL_WIDTH * 2 + 48;
 
 export function hasVisibleDataPanelPeer(document, kind) {
   const peer = document.getElementById(PANEL_IDS[kind === 'trading' ? 'cmc' : 'trading']);
@@ -21,7 +22,7 @@ export function calculateDataPanelLayout({ kind, panelWidth, viewportWidth, view
   const sectionHeight = Math.max(48, Math.floor((viewportHeight - 24) / 2));
   const targetTop = stacked ? kind === 'trading' ? 8 : 16 + sectionHeight : 60;
   const top = Math.max(0, Math.min(targetTop, viewportHeight - 48));
-  const peerWidth = hasPeer && !stacked && kind === 'cmc' ? 480 + 16 : 0;
+  const peerWidth = hasPeer && !stacked && kind === 'cmc' ? DATA_PANEL_WIDTH + 16 : 0;
   const targetLeft = viewportWidth - panelWidth - 16 - peerWidth;
   const left = Math.max(0, Math.min(Math.max(stacked ? 8 : 16, targetLeft), viewportWidth - panelWidth));
   const availableHeight = Math.max(48, viewportHeight - top - 8);
diff --git a/test/dom/data-media-remaining-boundaries.test.js b/test/dom/data-media-remaining-boundaries.test.js
index afa1f61..f60be2a 100644
--- a/test/dom/data-media-remaining-boundaries.test.js
+++ b/test/dom/data-media-remaining-boundaries.test.js
@@ -85,7 +85,7 @@ for (const kind of ['trading', 'cmc']) {
   });
 
   for (const viewport of [
-    { name: 'document client dimensions', clientWidth: 640, clientHeight: 360, displayed: { left: '400px', top: '312px' } },
+    { name: 'document client dimensions', clientWidth: 640, clientHeight: 360, displayed: { left: '256px', top: '312px' } },
     { name: 'an unavailable viewport', clientWidth: 0, clientHeight: 0, displayed: { left: '0px', top: '32px' } },
   ]) {
     test(`user keeps the saved ${kind} preference while ${viewport.name} constrain its display`, { timeout: 5_000 }, async t => {
@@ -109,8 +109,7 @@ for (const kind of ['trading', 'cmc']) {
 
       // Then the viewport affects displayed styles without saving them and removal creates no replacement
       assert.deepEqual(position, { left: 900, top: 900 });
-      const expectedLeft = viewport.clientWidth ? String(viewport.clientWidth - (kind === 'trading' ? 480 : 500)) + 'px' : '0px';
-      assert.deepEqual(panelPosition, { ...viewport.displayed, left: expectedLeft });
+      assert.deepEqual(panelPosition, viewport.displayed);
       assert.equal(host.panel(), null);
       assert.equal(host.window.localStorage.getItem(`${prefix}_pos`), '{"left":900,"top":900}');
       assert.deepEqual(host.errors, []);
diff --git a/test/unit/binance-data-panel-lifecycle-regressions.test.js b/test/unit/binance-data-panel-lifecycle-regressions.test.js
index e3721d4..2935ab5 100644
--- a/test/unit/binance-data-panel-lifecycle-regressions.test.js
+++ b/test/unit/binance-data-panel-lifecycle-regressions.test.js
@@ -119,7 +119,7 @@ for (const kind of ['trading', 'cmc']) {
     else await completeCmcData(host, cmcDetail(), { map: false });
 
     // Then a new current-symbol refresh renders after route reactivation
-    assert.equal(host.panel().style.width, kind === 'trading' ? '480px' : '500px');
+    assert.equal(host.panel().style.width, '384px');
     assert.match(host.element('symbol').textContent, /^BTC/);
     assert.ok(host.network.requests.length > beforePause);
   });
@@ -152,7 +152,7 @@ for (const kind of ['trading', 'cmc']) {
     const firstRow = host.element('rows').firstElementChild;
 
     // Then the table keeps three semantic columns and aligned tabular numeric values
-    assert.equal(host.panel().style.width, kind === 'trading' ? '480px' : '500px');
+    assert.equal(host.panel().style.width, '384px');
     assert.equal(host.element('rows').tagName, 'TBODY');
     assert.equal(firstRow.children.length, 3);
     assert.equal(firstRow.firstElementChild.getAttribute('scope'), 'row');