codex-copilot-dx 0.8.6 → 0.8.8

package/README.md

@@ -12,7 +12,7 @@ One in-process adapter listens on `127.0.0.1:2026` by default and exposes:
 - `POST /v1/responses/compact`
 - `GET /v1/models`
 
-Responses-only models and compaction use Copilot's Responses transport directly. For GPT models that advertise only Chat Completions, CCDX converts the supported text, image, and function-tool subset and rejects incompatible request shapes explicitly. Both streaming SSE and non-streaming responses are supported.
+Responses-only models and compaction use Copilot's Responses transport directly. For requests routed through Chat Completions, CCDX converts the supported text, image, and function-tool subset and rejects incompatible message content rather than turning it into JSON text. Chat `length` and `content_filter` finish reasons become incomplete Responses in both streaming and non-streaming modes. Both streaming SSE and non-streaming responses are supported.
 
 The adapter handles response history, encrypted reasoning state, function/custom tools, images, compaction, cancellation, retries, and usage metadata within the compatibility boundaries below. Routing prefers endpoint metadata from Copilot's live or cached catalog; when metadata is unavailable, a small built-in set identifies known Responses-only GPT models.
 
@@ -213,6 +213,12 @@ If a configured npm mirror has not synchronized the current release yet, use the
 
 ## Diagnostics
 
+### Local dashboard
+
+After starting `ccdx`, open [http://127.0.0.1:2026/](http://127.0.0.1:2026/) in a browser. If `ADAPTER_PORT` is customized, use that port instead. The dashboard shares the existing adapter listener; CCDX does not open a browser automatically or start another service. The page and its assets require both a loopback connection and a loopback Host header, even when LAN binding is enabled.
+
+The dashboard loads local status, a live GitHub Copilot model directory, and a summary of local usage metadata once when opened. Each section has an explicit Refresh control; nothing polls in the background. The live model table uses the same fresh account validation and selectable GPT filtering as `ccdx models`, never labels cached fallback data as online, and makes no inference request. A catalog listing does not guarantee inference access. The Usage table combines the current and rotated local usage logs, shows totals and up to 100 model rows, and contains no prompt, response body, or credential fields. The animation selector previews the existing themes and saves through the same settings writer as `ccdx animation`; changes take effect on the next adapter start, and `CCDX_TERMINAL_ANIMATION=off` still disables terminal motion. Dashboard data requests require a custom header that cross-site simple requests cannot send; animation writes also require a matching same-origin `Origin`. The dashboard does not initialize the optional image handler. The overview's known-model count is the adapter's current in-memory catalog, not the live table. A missing image-generation status does not prove the feature is disabled: use `ccdx image-status` to check setup. Recent upstream error prose may contain sensitive details, so review the page before sharing screenshots.
+
 Inspect only the local Codex configuration:
 
 ```bash
@@ -259,7 +265,7 @@ For the complete machine-readable status payload:
 curl -s http://127.0.0.1:2026/_ccdx/status | jq
 ```
 
-The status endpoint is restricted to the socket's real loopback address even when LAN binding is explicitly enabled. It reports fixed-size request counters, bounded TTFT/TPOT histograms, admission pressure, memory use, response-history size, image queue/cache and adaptive-history state, model-cache counts, token expiry state, and the ten most recent upstream `response.failed` diagnostics retained by the running process. Failure diagnostics include the event type, model, error code/message, response/request IDs when supplied upstream, and retry outcome. Common credential forms, long opaque encrypted values, and explicitly labelled input/prompt/tool-content echoes are redacted. They are cleared when the adapter restarts. No request/response bodies, credential fields, or account profiles are copied into status. Arbitrary upstream prose cannot be guaranteed free of sensitive content; review diagnostics before sharing them.
+The status endpoint is restricted to the socket's real loopback address even when LAN binding is explicitly enabled. It reports fixed-size HTTP request counters separately from bounded `completed` / `incomplete` / `failed` / `cancelled` response outcomes by model and origin, plus bounded incomplete-reason counts, TTFT/TPOT histograms, admission pressure, memory use, response-history size/tree concentration/lookup misses, image queue/cache and adaptive-history state, model-cache counts, token expiry state, and the ten most recent upstream `response.failed` diagnostics retained by the running process. HTTP errors without a model terminal remain "without terminal" and retain their known origin; they are not counted as model failures. History eviction markers are not failed-request counts; `ccdx status` warns near the cache limit without deleting or compressing history. Failure diagnostics include the event type, model, error code/message, response/request IDs when supplied upstream, and retry outcome. Common credential forms, long opaque encrypted values, and explicitly labelled input/prompt/tool-content echoes are redacted. They are cleared when the adapter restarts. No request/response bodies, credential fields, or account profiles are copied into status. Arbitrary upstream prose cannot be guaranteed free of sensitive content; review diagnostics before sharing them.
 
 `image_mcp` has its own HTTP route counter. After the image handler has been used, `image_generation` separately reports active, succeeded, failed, busy, cancelled, and chat-file delivery-failure counts, including tool errors returned with HTTP 200. A delivery failure can accompany a successful generation; it never causes another generation. Before handler initialization this field is `null`, meaning not observed, not necessarily disabled. Status never initializes that handler, reads its provider credential, installs guidance, or probes the provider. Input-image optimization metrics remain separate. `logging` reports pending records/bytes, queue caps, overflow drops, and write failures for usage and enabled debug-file logging.
 
@@ -367,7 +373,7 @@ Set `CCDX_LOG_PATH=1` to mirror terminal logs to `~/.local/share/codex-copilot-d
 
 Long computer-use sessions can accumulate screenshots that are sent again on later turns. This can increase local preparation time, upstream handshake latency, and the chance of a `413 Payload Too Large` response.
 
-The response-history cache is process-local and byte/entry bounded. Restarting the adapter discards it; a `previous_response_id` stored only in that process becomes unavailable. CCDX does not persist conversation history to disk. Clients can still submit explicit history in the request body, subject to the same limits.
+The response-history cache is process-local and byte/entry bounded. Restarting the adapter discards it; a `previous_response_id` stored only in that process becomes unavailable. CCDX does not persist conversation history to disk. Near-limit status diagnostics report the largest tree and actual lookup misses, but do not recover an already evicted ID or change the cache budget. Clients can still submit explicit history in the request body, subject to the same limits.
 
 CCDX attempts to downsample inline base64 images to model-appropriate pixel bounds, with a 2048 px long-edge fallback, and initially encodes them as WebP quality 82. It never replaces an image with a larger encoding and uses one global concurrency limit across direct images and function/custom-tool outputs. GIFs and non-inline references are not re-encoded. An encoding/decode failure keeps the original image; the final request-byte limit still applies.
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "codex-copilot-dx",
-  "version": "0.8.6",
+  "version": "0.8.8",
   "description": "Use Codex App with GitHub Copilot",
   "author": "Dale Xiao",
   "type": "module",

package/src/adapter.mjs

@@ -7,6 +7,7 @@ import {
   classifyAdapterRoute,
   createRequestMetrics,
   isLoopbackAddress,
+  isLoopbackHostHeader,
   runtimeStatusPayload,
 } from "./observability.mjs";
 import { createRequestId, runWithRequestContext } from "./request-context.mjs";
@@ -63,6 +64,8 @@ export {
 } from "./responses-request.mjs";
 
 const ADAPTER_RUNTIME_CONFIG = loadRuntimeConfig();
+const DASHBOARD_PATHS = new Set(["/", "/ui.css", "/ui.js"]);
+const DASHBOARD_API_PATHS = new Set(["/_ccdx/ui/animation", "/_ccdx/ui/models/live", "/_ccdx/ui/usage"]);
 
 export function requestPath(reqUrl) {
   return new URL(reqUrl || "/", "http://localhost").pathname;
@@ -200,6 +203,14 @@ export function createAdapterHandler(options = {}) {
     upstreamTimeoutMs,
   });
   const dispatch = async (req, res, pathname) => {
+    if (DASHBOARD_API_PATHS.has(pathname)) {
+      const { handleDashboardApi } = await import("./dashboard-api.mjs");
+      return handleDashboardApi(req, res, pathname, options.dashboardOptions);
+    }
+    if ((req.method === "GET" || req.method === "HEAD") && DASHBOARD_PATHS.has(pathname)) {
+      const { serveDashboard } = await import("./dashboard.mjs");
+      return serveDashboard(req, res, pathname);
+    }
     if (pathname === "/mcp/image") {
       if (imageMcpHandler) return imageMcpHandler(req, res);
       return import("./image-mcp.mjs").then(({ createImageMcpHandler }) => {
@@ -208,7 +219,7 @@ export function createAdapterHandler(options = {}) {
       });
     }
     if (req.method === "GET" && pathname === ADAPTER_STATUS_PATH) {
-      if (!isLoopbackAddress(req.socket?.remoteAddress)) {
+      if (!isLoopbackAddress(req.socket?.remoteAddress) || !isLoopbackHostHeader(req.headers?.host)) {
         res.writeHead(403, { "Content-Type": "application/json" });
         res.end(JSON.stringify({ error: "Runtime status is available only from loopback" }));
         return;
@@ -235,7 +246,7 @@ export function createAdapterHandler(options = {}) {
     }
 
     if (pathname === ADAPTER_CACHE_PATH) {
-      if (!isLoopbackAddress(req.socket?.remoteAddress)) {
+      if (!isLoopbackAddress(req.socket?.remoteAddress) || !isLoopbackHostHeader(req.headers?.host)) {
         res.writeHead(403, { "Content-Type": "application/json" });
         res.end(JSON.stringify({ error: "Cache control is available only from loopback" }));
         return;
@@ -373,7 +384,9 @@ export function createAdapterHandler(options = {}) {
 
     const trackRequest = pathname !== ADAPTER_HEALTH_PATH
       && pathname !== ADAPTER_STATUS_PATH
-      && pathname !== ADAPTER_CACHE_PATH;
+      && pathname !== ADAPTER_CACHE_PATH
+      && !DASHBOARD_API_PATHS.has(pathname)
+      && !((req.method === "GET" || req.method === "HEAD") && DASHBOARD_PATHS.has(pathname));
     const routeName = classifyAdapterRoute(req.method, pathname);
     const complete = trackRequest ? requestMetrics.begin(routeName) : () => {};
     const streamPerformance = trackRequest ? streamPerformanceMetrics.begin(routeName) : null;
@@ -389,7 +402,7 @@ export function createAdapterHandler(options = {}) {
       if (requestFinished) return;
       requestFinished = true;
       try { complete({ statusCode, aborted }); } catch {}
-      try { streamPerformance?.finish({ failed: aborted || statusCode >= 400 }); } catch {}
+      try { streamPerformance?.finish({ failed: aborted || statusCode >= 400, aborted }); } catch {}
       try { finishTerminalActivity(); } catch {}
     };
     const containUnexpectedError = (error) => {

package/src/cli-status.mjs

@@ -132,6 +132,7 @@ export async function readAdapterStatus({
 export function formatAdapterStatus({ baseUrl, data }, { commandName = "ccdx", cliVersion = data.version } = {}) {
   const requests = data.requests || {};
   const performance = data.stream_performance?.by_route?.responses || {};
+  const terminalOutcomes = performance.terminal_outcomes?.totals;
   const admission = data.admission || {};
   const history = data.response_history || {};
   const images = data.image_optimization || {};
@@ -150,11 +151,18 @@ export function formatAdapterStatus({ baseUrl, data }, { commandName = "ccdx", c
     adapterLine,
     status("info", `Requests: ${count(requests.completed)}/${count(requests.total)} completed, ${count(requests.active)} active, ${count(requests.status_4xx)} 4xx, ${count(requests.status_5xx)} 5xx, ${count(requests.aborted)} aborted`),
     status("info", `Responses stream: TTFT avg ${latency(performance.ttft_ms?.avg)} (${count(performance.ttft_ms?.samples)} samples), TPOT avg ${tpot(performance.tpot_us)}`),
+    ...(terminalOutcomes ? [status("info", `Model outcomes: ${count(terminalOutcomes.completed)} completed, ${count(terminalOutcomes.incomplete)} incomplete, ${count(terminalOutcomes.failed)} failed, ${count(terminalOutcomes.cancelled)} cancelled, ${count(terminalOutcomes.unknown)} without terminal`)] : []),
     status("info", `Admission: ${count(admission.activeRequests)} active, ${count(admission.queued)} queued, ${count(admission.rejected)} rejected, ${count(admission.timedOut)} timed out, wait avg ${latency(admission.waitMsAvg)}`),
     status("info", `Memory: RSS ${mebibytes(processStats.rss_bytes)}, heap ${mebibytes(processStats.heap_used_bytes)}`),
-    status("info", `History: ${mebibytes(history.bytes)} / ${mebibytes(limits.response_history_max_bytes)}, ${count(history.entries)} entries, ${count(history.evicted)} evicted`),
+    status("info", `History: ${mebibytes(history.bytes)} / ${mebibytes(limits.response_history_max_bytes)}, ${count(history.entries)} entries, ${count(history.evicted)} evicted ID markers`),
     status("info", `Image cache: ${count(images.cache_entries)} entries, ${cacheHitRate(images)} hits, ${mebibytes(images.cache_bytes)} / ${mebibytes(images.cache_max_bytes)}`),
   ];
+  if (Number.isFinite(history.tree_count)) {
+    const limit = Number(limits.response_history_max_bytes || history.maxBytes);
+    const nearLimit = Number.isFinite(limit) && limit > 0 && history.bytes / limit >= 0.9;
+    lines.push(status(nearLimit ? "warn" : "info",
+      `${nearLimit ? "History near limit" : "History diagnostics"}: largest tree ${mebibytes(history.largest_tree_bytes)} across ${count(history.tree_count)} trees; ${count(history.lookup_misses)} lookup misses, ${count(history.evicted_lookup_misses)} for evicted IDs`));
+  }
   if (imageHistory && typeof imageHistory === "object") {
     lines.push(status("info", `Visual history: ${count(imageHistory.active_recovery_trees)} recovery trees, ${count(imageHistory.adapted_requests)} adapted requests, ${count(imageHistory.historical_images_omitted)} older images omitted, ${count(imageHistory.timeouts_recorded)} timeouts`));
   }

package/src/dashboard/index.html

@@ -0,0 +1,78 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <meta name="color-scheme" content="dark">
+    <link rel="icon" href="data:,">
+    <link rel="stylesheet" href="/ui.css">
+    <script src="/ui.js" defer></script>
+    <title>CCDX · Local dashboard</title>
+  </head>
+  <body>
+    <div class="shell">
+      <header class="topbar">
+        <div class="brand">CCDX <span class="brand-detail">/ LOCAL STATUS</span></div>
+        <div class="topbar-actions"><span id="connection" class="badge neutral" role="status">READING</span><button id="refresh" type="button">Refresh</button></div>
+      </header>
+
+      <main>
+        <section class="intro">
+          <h1><span aria-hidden="true">$</span> ccdx status</h1>
+          <p id="updated">Reading status…</p>
+        </section>
+
+        <section class="overview" aria-label="Overview">
+          <article class="card"><h2>ADAPTER</h2><strong id="version">—</strong><p id="uptime">—</p></article>
+          <article class="card"><h2>COPILOT</h2><strong id="copilot">—</strong><p id="token">—</p></article>
+          <article class="card"><h2>KNOWN MODELS</h2><strong id="models">—</strong><p id="model-source">—</p></article>
+          <article class="card"><h2>REQUESTS</h2><strong id="requests">—</strong><p id="request-errors">—</p></article>
+        </section>
+
+        <section class="details" aria-label="Runtime details">
+          <article class="panel">
+            <div class="panel-heading"><h2>MODEL OUTCOMES</h2><span>RESPONSES</span></div>
+            <dl class="stats"><div><dt>Completed</dt><dd id="completed">—</dd></div><div><dt>Incomplete</dt><dd id="incomplete">—</dd></div><div><dt>Failed</dt><dd id="failed">—</dd></div><div><dt>Cancelled</dt><dd id="cancelled">—</dd></div></dl>
+            <p class="hint">HTTP 2xx != model completed.</p>
+          </article>
+          <article class="panel">
+            <div class="panel-heading"><h2>LOCAL HISTORY</h2><span>MEMORY</span></div>
+            <strong id="history">—</strong><progress id="history-meter" class="meter" max="100" value="0" aria-label="History cache usage"></progress>
+            <p id="history-detail" class="hint">—</p>
+          </article>
+          <article class="panel">
+            <div class="panel-heading"><h2>IMAGE GENERATION</h2><span>OPTIONAL</span></div>
+            <strong id="image">—</strong><p id="image-detail" class="hint">—</p>
+          </article>
+        </section>
+
+        <section class="panel dashboard-section" aria-label="Terminal animation">
+          <div class="panel-heading"><h2>TERMINAL ANIMATION</h2><span id="animation-state">READING</span></div>
+          <div id="animation-options" class="animation-options" role="group" aria-label="Animation theme"></div>
+          <div class="section-actions"><button id="save-animation" type="button" disabled>Save selection</button><span id="animation-note" role="status">Applies on next ccdx start.</span></div>
+        </section>
+
+        <section class="panel dashboard-section" aria-label="Live upstream models">
+          <div class="panel-heading"><h2>UPSTREAM GPT MODELS</h2><div class="heading-actions"><span id="models-state">CHECKING LIVE</span><button id="refresh-models" type="button">Refresh</button></div></div>
+          <p id="models-note" class="table-note">Querying GitHub Copilot…</p>
+          <div class="table-wrap"><table><thead><tr><th scope="col">MODEL</th><th scope="col">VENDOR</th><th scope="col">API</th><th scope="col">FLAG</th></tr></thead><tbody id="live-models-body"><tr><td colspan="4">Loading…</td></tr></tbody></table></div>
+          <p class="hint">Catalog listing does not guarantee inference access.</p>
+        </section>
+
+        <section class="panel dashboard-section" aria-label="Usage by model">
+          <div class="panel-heading"><h2>USAGE</h2><div class="heading-actions"><span id="usage-state">READING LOG</span><button id="refresh-usage" type="button">Refresh</button></div></div>
+          <p id="usage-note" class="table-note">Aggregating local usage metadata…</p>
+          <div class="table-wrap"><table class="usage-table"><thead><tr><th scope="col">MODEL</th><th scope="col">CALLS</th><th scope="col">INPUT</th><th scope="col">CACHE READ</th><th scope="col">OUTPUT</th><th scope="col">TOTAL</th></tr></thead><tbody id="usage-body"><tr><td colspan="6">Loading…</td></tr></tbody></table></div>
+        </section>
+
+        <section class="lower" aria-label="Recent failures">
+          <div class="panel-heading"><h2>RECENT UPSTREAM FAILURES</h2><span>response.failed</span></div>
+          <ol id="failures"><li class="empty">Reading…</li></ol>
+          <p class="hint">Upstream messages may contain sensitive text.</p>
+        </section>
+      </main>
+
+      <footer>LOCAL ONLY / NO BACKGROUND POLLING</footer>
+    </div>
+  </body>
+</html>

package/src/dashboard/ui.css

@@ -0,0 +1,83 @@
+:root { color-scheme: dark; font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; }
+* { box-sizing: border-box; }
+body { margin: 0; color: #e0e9df; background: #0b110d; font-size: 13px; }
+.shell { max-width: 1220px; margin: 0 auto; padding: 0 24px; }
+.topbar { min-height: 68px; display: flex; justify-content: space-between; align-items: center; gap: 20px; border-bottom: 1px solid #2a3a2e; }
+.brand { color: #a6f5a8; font-size: 16px; font-weight: 750; letter-spacing: .07em; white-space: nowrap; }
+.brand-detail { color: #78917d; font-size: 11px; font-weight: 500; letter-spacing: .03em; }
+.topbar-actions { display: flex; align-items: center; gap: 20px; }
+.badge { color: #a9b9aa; white-space: nowrap; font-size: 11px; font-weight: 650; text-transform: uppercase; }
+.badge::before { content: "●"; margin-right: 8px; }
+.badge.good { color: #84e99e; }
+.badge.bad { color: #ff947e; }
+button { border: 1px solid #45634b; border-radius: 2px; background: #152219; color: #b2f1bd; padding: 8px 13px; font: inherit; font-size: 11px; font-weight: 700; text-transform: uppercase; cursor: pointer; }
+button:hover { background: #203526; }
+button:focus-visible { outline: 2px solid #a6f5a8; outline-offset: 3px; }
+button:disabled { opacity: .55; cursor: wait; }
+.intro { display: flex; justify-content: space-between; align-items: baseline; gap: 20px; padding: 38px 0 25px; }
+h1 { margin: 0; font-size: clamp(20px, 3vw, 27px); font-weight: 650; letter-spacing: -.035em; }
+h1 span { color: #84e99e; }
+.intro p { margin: 0; color: #78917d; font-size: 11px; }
+.overview { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 11px; }
+.card, .panel, .lower { min-width: 0; background: #111a13; border: 1px solid #2b3b2f; border-radius: 2px; }
+.card { min-height: 139px; padding: 18px; }
+.card h2, .panel h2, .lower h2 { color: #83b98b; font-size: 11px; font-weight: 700; letter-spacing: .08em; margin: 0; }
+.card strong, .panel > strong { display: block; margin-top: 21px; color: #f0f6ec; font-size: 23px; font-weight: 650; line-height: 1.25; letter-spacing: -.035em; overflow-wrap: anywhere; }
+.card p { margin: 9px 0 0; color: #9aada0; font-size: 11px; line-height: 1.45; overflow-wrap: anywhere; }
+.details { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 11px; margin-top: 11px; }
+.panel { min-height: 205px; padding: 18px; }
+.panel-heading { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
+.panel-heading span { color: #6d8371; font-size: 10px; white-space: nowrap; }
+.stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 17px; margin: 26px 0 0; }
+.stats div { display: flex; justify-content: space-between; border-bottom: 1px solid #2b3b2f; padding-bottom: 8px; gap: 8px; }
+.stats dt { color: #9aada0; font-size: 11px; }
+.stats dd { margin: 0; font-size: 14px; font-weight: 650; }
+#incomplete { color: #e3c77c; }
+#failed { color: #ff9f91; }
+.hint { color: #78917d; font-size: 11px; line-height: 1.5; margin: 15px 0 0; overflow-wrap: anywhere; }
+.meter { display: block; width: 100%; height: 6px; border: 0; border-radius: 0; background: #2b3b2f; margin-top: 20px; appearance: none; }
+.meter::-webkit-progress-bar { background: #2b3b2f; }
+.meter::-webkit-progress-value { background: #84e99e; }
+.meter::-moz-progress-bar { background: #84e99e; }
+.dashboard-section { min-height: 0; margin-top: 11px; }
+.heading-actions { display: flex; align-items: center; gap: 16px; }
+.heading-actions button { padding: 5px 9px; }
+.animation-options { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 18px; }
+.theme-option { display: grid; grid-template-columns: 18px 76px minmax(0, 1fr); align-items: center; gap: 8px; min-width: 0; width: 100%; border: 1px solid #2b3b2f; padding: 10px; background: transparent; color: #e0e9df; text-align: left; text-transform: none; font-size: 11px; cursor: pointer; }
+.theme-option::before { content: "○"; color: #78917d; font-size: 17px; line-height: 1; }
+.theme-option[aria-pressed="true"] { border-color: #84e99e; background: #192a1d; }
+.theme-option[aria-pressed="true"]::before { content: "●"; color: #84e99e; }
+.theme-option:hover { background: #1a2a1e; }
+.theme-name { color: #e0e9df; font-size: 11px; white-space: nowrap; }
+.theme-name small { display: block; color: #78917d; font-size: 9px; margin-top: 2px; }
+.theme-preview { color: #657d69; white-space: pre; overflow: hidden; font-size: 11px; letter-spacing: 0; }
+.ansi-white { color: #f5fff5; }
+.ansi-159 { color: #9af5e9; }
+.ansi-123 { color: #75e4d9; }
+.ansi-87 { color: #5ad0d4; }
+.ansi-51 { color: #42b9d8; }
+.ansi-45 { color: #3ca2d0; }
+.ansi-39 { color: #4389c2; }
+.ansi-33 { color: #4775b2; }
+.section-actions { display: flex; align-items: center; gap: 15px; margin-top: 16px; }
+.section-actions span { color: #9aada0; font-size: 11px; }
+.table-note { margin: 15px 0 8px; color: #9aada0; font-size: 11px; }
+.table-wrap { width: 100%; overflow-x: auto; }
+table { width: 100%; border-collapse: collapse; font-size: 11px; }
+th { color: #83b98b; text-align: left; font-weight: 700; letter-spacing: .05em; }
+th, td { padding: 9px 12px 9px 0; border-bottom: 1px solid #2b3b2f; white-space: nowrap; }
+th:last-child, td:last-child { padding-right: 0; }
+td { color: #d8e2d8; }
+.usage-table th:not(:first-child), .usage-table td:not(:first-child) { text-align: right; }
+.usage-table tr.total-row td { color: #a6f5a8; font-weight: 700; }
+.lower { margin-top: 11px; padding: 18px; }
+.lower ol { list-style: none; margin: 16px 0 0; padding: 0; }
+.lower li { display: grid; grid-template-columns: minmax(150px, 1fr) minmax(0, 2fr); gap: 14px; padding: 9px 0; border-top: 1px solid #2b3b2f; font-size: 11px; }
+.lower li strong, .lower li span { overflow-wrap: anywhere; }
+.lower li strong { color: #e0e9df; font-weight: 650; }
+.lower li span, .lower li.empty { color: #9aada0; line-height: 1.5; }
+footer { color: #617966; font-size: 10px; letter-spacing: .05em; padding: 22px 0 30px; }
+@media (max-width: 1000px) { .animation-options { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
+@media (max-width: 900px) { .overview { grid-template-columns: repeat(2, minmax(0, 1fr)); } .details { grid-template-columns: repeat(2, minmax(0, 1fr)); } .details .panel:last-child { grid-column: 1 / -1; } }
+@media (max-width: 680px) { .animation-options { grid-template-columns: 1fr; } }
+@media (max-width: 620px) { .shell { padding: 0 16px; } .topbar { min-height: 60px; } .brand-detail { display: none; } .topbar-actions { gap: 11px; } .intro { display: block; padding: 29px 0 21px; } .intro p { margin-top: 9px; } .overview, .details { grid-template-columns: 1fr; } .details .panel:last-child { grid-column: auto; } .card { min-height: 122px; } .card strong { margin-top: 14px; } .lower li { display: block; } .lower li span { display: block; margin-top: 5px; } }