From 8b81f804f7feb73d07427342c6c619d6f5de04b6 Mon Sep 17 00:00:00 2001
From: ponzischeme89 <mattcohen0@gmail.com>
Date: Sun, 14 Jun 2026 09:26:07 +1200
Subject: [PATCH] v0.1.21 - Mix calculator composer restyle

Mirror the throughput composer's green design language on the mix calculator
inputs: brand-tinted composer surface with a calculator-icon header, green
48px fields, Mix Name disabled until a client is chosen, a darker readable
on-brand hint, and optional notes via the "+ Add a note" reveal.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 frontend/package.json                         |   2 +-
 .../mix-calculator/MixCalculatorEditor.svelte | 349 +++++++++++++-----
 .../MixCalculatorResultsPanel.svelte          | 124 +++----
 3 files changed, 306 insertions(+), 169 deletions(-)

diff --git a/frontend/package.json b/frontend/package.json
index d94d562..9a6ea71 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -1,6 +1,6 @@
 {
   "name": "hunter-app",
-  "version": "0.1.20",
+  "version": "0.1.21",
   "private": true,
   "type": "module",
   "scripts": {
diff --git a/frontend/src/lib/components/mix-calculator/MixCalculatorEditor.svelte b/frontend/src/lib/components/mix-calculator/MixCalculatorEditor.svelte
index 045bdb7..e363313 100644
--- a/frontend/src/lib/components/mix-calculator/MixCalculatorEditor.svelte
+++ b/frontend/src/lib/components/mix-calculator/MixCalculatorEditor.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
   import { onDestroy } from 'svelte';
+  import { Calculator, Info, TriangleAlert, X } from 'lucide-svelte';
   import { api } from '$lib/api';
   import { featureFlags } from '$lib/features';
   import { formatNumber } from '$lib/format';
@@ -51,6 +52,9 @@
   let batchSizeKg = $state(initialBatchSizeValue());
   let preparedByName = $state(initialPreparedByNameValue());
   let notes = $state(initialNotesValue());
+  // Notes are optional and stay hidden behind "+ Add a note" until needed,
+  // matching the throughput composer. Auto-open when a saved session has one.
+  let showNote = $state(Boolean(initialSession?.notes));
   let preview = $state<MixCalculatorPreview | MixCalculatorSession | null>(initialPreviewValue());
   let formError = $state('');
   let formHint = $state('Select a mix date and prepared by name, then choose a client to unlock mixes.');
@@ -158,6 +162,12 @@
     }
   }
 
+  // Collapse the note field again, discarding anything typed.
+  function dismissNote() {
+    notes = '';
+    showNote = false;
+  }
+
   function clearForm() {
     clientName = '';
     productId = 0;
@@ -165,6 +175,7 @@
     batchSizeKg = '';
     preparedByName = $clientSession?.name ?? '';
     notes = '';
+    showNote = false;
     preview = null;
     formError = '';
     formHint = 'Select a mix date and prepared by name, then choose a client to unlock mixes.';
@@ -287,11 +298,11 @@
   {/if}
 
   <section class="editor-grid">
-    <article class="form-card">
-      <div class="section-header">
-        <div>
-          <h3>Session Inputs</h3>
-          <p>Batch size drives the scale factor. Total bags are derived from the selected mix unit size.</p>
+    <article class="composer">
+      <div class="composer-head">
+        <div class="composer-title">
+          <span class="composer-icon"><Calculator size={18} strokeWidth={2.2} /></span>
+          <h2>Mix calculator</h2>
         </div>
         {#if selectedProduct}
           <div class="product-pill">
@@ -301,12 +312,13 @@
         {/if}
       </div>
 
+      <div class="composer-body">
       {#if formError}
-        <p class="message error">{formError}</p>
+        <p class="message error"><TriangleAlert size={16} strokeWidth={2.2} /> <span>{formError}</span></p>
       {/if}
 
       {#if !formError && formHint}
-        <p class="message hint">{formHint}</p>
+        <p class="message hint"><Info size={16} strokeWidth={2.2} /> <span>{formHint}</span></p>
       {/if}
 
       <div class="field-grid">
@@ -350,11 +362,27 @@
           <span>Batch size (kg)</span>
           <input bind:value={batchSizeKg} disabled={!canEdit} inputmode="decimal" min="0" placeholder="Batch size" type="number" />
         </label>
+      </div>
 
-        <label class="full-width">
-          <span>Notes</span>
-          <textarea bind:value={notes} disabled={!canEdit} placeholder="Optional production notes or shift context" rows="4"></textarea>
-        </label>
+      <div class="note-area">
+        {#if showNote}
+          <div class="note-field">
+            <textarea
+              class="note-input"
+              bind:value={notes}
+              disabled={!canEdit}
+              placeholder="Note (optional) — production notes or shift context"
+              rows="3"
+            ></textarea>
+            {#if canEdit}
+              <button type="button" class="note-dismiss" title="Remove note" aria-label="Remove note" onclick={dismissNote}>
+                <X size={16} strokeWidth={2.4} />
+              </button>
+            {/if}
+          </div>
+        {:else if canEdit}
+          <button type="button" class="link-button" onclick={() => (showNote = true)}>+ Add a note</button>
+        {/if}
       </div>
 
       {#if canEdit && selectedProduct}
@@ -371,12 +399,13 @@
             <span>{previewLoading ? 'Calculating...' : 'Calculate mix'}</span>
           </button>
 
-          <button class="danger-button" disabled={previewLoading} type="button" onclick={clearForm}>
+          <button class="secondary-button" disabled={previewLoading} type="button" onclick={clearForm}>
             <span class="button-icon" style="--button-icon-url: url('/icons/trash.svg');" aria-hidden="true"></span>
             <span>Clear</span>
           </button>
         </div>
       {/if}
+      </div>
     </article>
 
     <MixCalculatorResultsPanel
@@ -400,13 +429,12 @@
 
 <style>
   h2,
-  h3,
   p {
     margin: 0;
   }
 
   .eyebrow {
-    color: #7d8d84;
+    color: var(--color-text-muted);
     font-size: 0.78rem;
     font-weight: 600;
     letter-spacing: 0.08em;
@@ -425,9 +453,8 @@
     flex-wrap: wrap;
   }
 
-  .section-header p,
   .calculation-note span {
-    color: var(--muted);
+    color: var(--color-text-secondary);
   }
 
   .action-row {
@@ -443,21 +470,68 @@
     gap: 1rem;
   }
 
-  .form-card,
-  .locked-card {
-    border: 1px solid var(--line);
-    border-radius: 0.8rem;
-    background: var(--panel);
-    box-shadow: var(--shadow);
+  /* The composer mirrors the throughput "Add a packing run" surface: a quiet
+     brand-tinted gradient panel that reads as a distinct, on-brand workspace.
+     Theme tokens keep it correct in dark mode. */
+  .composer {
+    border: 1px solid color-mix(in srgb, var(--color-brand) 16%, var(--color-border));
+    border-radius: 0.9rem;
+    background: linear-gradient(
+      180deg,
+      color-mix(in srgb, var(--color-brand) 7%, var(--color-bg-surface)),
+      color-mix(in srgb, var(--color-brand) 4%, var(--color-bg-surface))
+    );
+    /* Native selects open within the viewport, so the card can stay open for
+       a clean rounded edge without clipping anything. */
+    overflow: visible;
   }
 
-  .form-card,
-  .locked-card {
-    padding: 1.2rem;
+  .composer-head {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 1rem 1.4rem;
+    flex-wrap: wrap;
+    padding: 1.3rem 1.45rem 1.05rem;
+  }
+
+  .composer-title {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.6rem;
+  }
+
+  /* Brand-tinted badge echoing the throughput overview's section icon. */
+  .composer-icon {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+    width: 2rem;
+    height: 2rem;
+    border-radius: 0.5rem;
+    background: var(--color-brand-tint);
+    color: var(--color-brand);
+  }
+
+  .composer-title h2 {
+    margin: 0;
+    font-size: clamp(1.25rem, 2vw, 1.7rem);
+    line-height: 1.05;
+    letter-spacing: -0.03em;
+    color: var(--color-text-primary);
+  }
+
+  .composer-body {
+    padding: 0 1.45rem 1.4rem;
   }
 
   .locked-card {
     max-width: 42rem;
+    padding: 1.2rem;
+    border: 1px solid var(--color-border);
+    border-radius: var(--radius-panel);
+    background: var(--color-bg-surface);
   }
 
   .locked-card h2 {
@@ -465,33 +539,28 @@
     font-size: clamp(1.7rem, 3vw, 2.1rem);
   }
 
-  .section-header {
-    display: flex;
-    align-items: flex-start;
-    justify-content: space-between;
-    gap: 1rem;
-    margin-bottom: 1rem;
-  }
-
-  .section-header h3 {
-    font-size: 1.15rem;
-    font-weight: 700;
-  }
-
+  /* Quick brand-tinted chip echoing the selected mix's unit, matching the pill
+     language used across the app. */
   .product-pill {
-    display: grid;
-    gap: 0.14rem;
-    padding: 0.72rem 0.82rem;
-    border: 1px solid var(--line);
-    border-radius: 0.65rem;
-    background: var(--panel-soft);
+    display: inline-flex;
+    align-items: baseline;
+    gap: 0.4rem;
+    padding: 0.4rem 0.78rem;
+    border: 1px solid color-mix(in srgb, var(--color-brand) 18%, var(--color-border));
+    border-radius: 999px;
+    background: var(--color-brand-tint);
+    color: var(--color-success-text);
+  }
+
+  .product-pill strong {
+    font-size: 0.95rem;
   }
 
   .product-pill span {
-    color: var(--muted);
-    font-size: 0.78rem;
+    font-size: 0.76rem;
     text-transform: uppercase;
     letter-spacing: 0.06em;
+    opacity: 0.85;
   }
 
   .field-grid {
@@ -510,67 +579,155 @@
     font-weight: 600;
   }
 
-  .full-width {
-    grid-column: 1 / -1;
+  /* Optional note, revealed by "+ Add a note" — mirrors the throughput composer. */
+  .note-area {
+    margin-top: 0.9rem;
   }
 
-  input,
-  select,
-  textarea {
+  .link-button {
+    padding: 0.25rem 0;
+    background: none;
+    border: 0;
+    color: var(--color-brand);
+    font-size: 0.95rem;
+    font-weight: 600;
+    cursor: pointer;
+  }
+
+  .link-button:hover {
+    text-decoration: underline;
+  }
+
+  .note-field {
+    display: flex;
+    align-items: flex-start;
+    gap: 0.45rem;
+  }
+
+  .note-input {
+    flex: 1 1 auto;
+    min-width: 0;
+  }
+
+  .note-dismiss {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+    width: 48px;
+    height: 48px;
+    padding: 0;
+    border: 1px solid color-mix(in srgb, var(--color-brand) 14%, var(--color-border));
+    border-radius: 0.8rem;
+    background: var(--color-bg-surface);
+    color: var(--color-text-secondary);
+    cursor: pointer;
+    transition:
+      border-color 140ms ease,
+      color 140ms ease,
+      background-color 140ms ease;
+  }
+
+  .note-dismiss:hover {
+    border-color: var(--color-text-muted);
+    color: var(--color-text-primary);
+    background: var(--color-bg-app);
+  }
+
+  .note-dismiss:focus-visible {
+    outline: 3px solid var(--color-brand);
+    outline-offset: 2px;
+  }
+
+  /* White fields on the green tint, with brand-tinted borders and a 48px touch
+     target — the same input language as the throughput composer. */
+  .composer input,
+  .composer select,
+  .composer textarea {
     width: 100%;
-    padding: 0.78rem 0.82rem;
-    border: 1px solid var(--line-strong);
-    border-radius: 0.6rem;
-    background: var(--color-input-bg);
-    color: var(--text);
+    min-height: 48px;
+    padding: 0.62rem 0.78rem;
+    border: 1px solid color-mix(in srgb, var(--color-brand) 14%, var(--color-border));
+    border-radius: 0.8rem;
+    font-size: 0.98rem;
+    background: var(--color-bg-surface);
+    color: var(--color-text-primary);
     transition:
       border-color 160ms ease,
       box-shadow 160ms ease;
   }
 
-  input::placeholder,
-  textarea::placeholder {
+  .composer input::placeholder,
+  .composer textarea::placeholder {
     color: var(--color-text-muted);
     opacity: 1;
   }
 
-  input:focus-visible,
-  select:focus-visible,
-  textarea:focus-visible {
-    outline: none;
+  .composer input:focus-visible,
+  .composer select:focus-visible,
+  .composer textarea:focus-visible {
+    outline: 3px solid var(--color-brand);
+    outline-offset: 1px;
     border-color: var(--color-brand);
-    box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-brand) 18%, transparent);
   }
 
-  textarea {
+  .composer textarea {
+    min-height: 6.5rem;
     resize: vertical;
   }
 
+  /* The Mix Name select stays locked until a client is chosen; make that state
+     unmistakable rather than looking like an empty, clickable field. */
+  .composer input:disabled,
+  .composer select:disabled,
+  .composer textarea:disabled {
+    background: color-mix(in srgb, var(--color-bg-app) 70%, var(--color-bg-surface));
+    border-color: var(--color-border);
+    color: var(--color-text-muted);
+    cursor: not-allowed;
+  }
+
   .calculation-note {
     display: grid;
     gap: 0.2rem;
     margin-top: 1rem;
     padding: 0.92rem;
-    border-radius: 0.65rem;
-    background: var(--panel-soft);
+    border: 1px solid var(--color-border);
+    border-radius: var(--radius-row);
+    background: var(--color-bg-app);
   }
 
   .message {
+    display: flex;
+    align-items: center;
+    gap: 0.55rem;
     margin-bottom: 0.85rem;
-    padding: 0.75rem 0.85rem;
-    border-radius: 0.6rem;
-    font-size: 0.9rem;
+    padding: 0.72rem 0.9rem;
+    border-radius: 0.7rem;
+    font-size: 0.92rem;
+    font-weight: 500;
+  }
+
+  .message :global(svg) {
+    flex-shrink: 0;
   }
 
   .message.error {
-    background: #fff1f0;
-    color: #b2463f;
+    background: color-mix(in srgb, var(--color-error) 12%, var(--color-bg-surface));
+    color: var(--color-error);
+    border: 1px solid color-mix(in srgb, var(--color-error) 30%, transparent);
   }
 
+  /* Readable on-brand hint: a white-ish surface with a green info icon, instead
+     of low-contrast grey that washed out against the composer's tint. */
   .message.hint {
-    background: var(--panel-soft);
-    color: var(--muted);
-    border: 1px solid var(--line);
+    background: color-mix(in srgb, var(--color-brand) 16%, var(--color-bg-app));
+    color: var(--color-text-primary);
+    border: 1px solid color-mix(in srgb, var(--color-brand) 26%, var(--color-border));
+  }
+
+  .message.hint :global(svg) {
+    color: var(--color-brand);
   }
 
   .action-row {
@@ -578,15 +735,14 @@
   }
 
   .primary-button,
-  .secondary-button,
-  .danger-button {
+  .secondary-button {
     display: inline-flex;
     align-items: center;
     justify-content: center;
     gap: 0.5rem;
     padding: 0.78rem 0.96rem;
-    border-radius: 0.6rem;
-    border: 1px solid var(--line-strong);
+    border-radius: var(--radius-control);
+    border: 1px solid var(--color-border);
     font-weight: 600;
     cursor: pointer;
     transition:
@@ -597,26 +753,29 @@
   .primary-button {
     border: none;
     background: var(--color-brand);
-    color: #fff;
+    color: var(--color-on-brand);
+  }
+
+  /* Composer buttons take the throughput composer's chunkier 48px shape. */
+  .composer .action-row .primary-button,
+  .composer .action-row .secondary-button {
+    min-height: 48px;
+    padding: 0.62rem 1.28rem;
+    border-radius: 0.8rem;
+    font-weight: 700;
   }
 
   .secondary-button {
-    background: #fff;
-    color: #304038;
-  }
-
-  .danger-button {
-    background: #c63d32;
-    color: #fff;
-    border-color: #c63d32;
+    background: var(--color-bg-surface);
+    color: var(--color-text-primary);
   }
 
   .primary-button:hover:not(:disabled) {
-    background: #126a33;
+    background: var(--color-brand-hover);
   }
 
   .primary-button:active:not(:disabled) {
-    background: #0f5a2b;
+    background: var(--color-brand-hover);
   }
 
   .secondary-button:hover:not(:disabled) {
@@ -624,14 +783,8 @@
     background: var(--color-bg-app);
   }
 
-  .danger-button:hover:not(:disabled) {
-    background: #b2352b;
-    border-color: #b2352b;
-  }
-
   .primary-button:focus-visible,
-  .secondary-button:focus-visible,
-  .danger-button:focus-visible {
+  .secondary-button:focus-visible {
     outline: 3px solid color-mix(in srgb, var(--color-brand) 45%, transparent);
     outline-offset: 2px;
   }
@@ -658,10 +811,6 @@
   }
 
   @media (max-width: 720px) {
-    .section-header {
-      flex-direction: column;
-    }
-
     .field-grid {
       grid-template-columns: 1fr;
     }
diff --git a/frontend/src/lib/components/mix-calculator/MixCalculatorResultsPanel.svelte b/frontend/src/lib/components/mix-calculator/MixCalculatorResultsPanel.svelte
index c4d969a..37dd4d9 100644
--- a/frontend/src/lib/components/mix-calculator/MixCalculatorResultsPanel.svelte
+++ b/frontend/src/lib/components/mix-calculator/MixCalculatorResultsPanel.svelte
@@ -49,18 +49,14 @@
 </script>
 
 <article class="result-card">
-  <div class="section-header">
-    <div>
-      <h3>Calculated Output</h3>
-      <p>{preview ? 'Snapshot of the scaled raw material requirements.' : 'Run the calculation to preview the session output.'}</p>
-    </div>
-    {#if sessionNumber}
+  {#if sessionNumber}
+    <div class="result-toolbar">
       <div class="session-chip">
         <span>Session</span>
         <strong>{sessionNumber}</strong>
       </div>
-    {/if}
-  </div>
+    </div>
+  {/if}
 
   {#if preview}
     <div class="metric-row">
@@ -186,55 +182,50 @@
 </article>
 
 <style>
-  h3,
   p {
     margin: 0;
   }
 
-  .section-header p,
   .metric-card p,
   .summary-grid span,
   .empty-state span {
-    color: var(--muted);
+    color: var(--color-text-muted);
   }
 
   .result-card,
   .metric-card {
-    border: 1px solid var(--line);
-    border-radius: 0.8rem;
-    background: var(--panel);
-    box-shadow: var(--shadow);
+    border: 1px solid var(--color-border);
+    background: var(--color-bg-surface);
   }
 
   .result-card {
     padding: 1.2rem;
+    border-radius: var(--radius-panel);
   }
 
-  .section-header {
+  .metric-card {
+    border-radius: var(--radius-row);
+  }
+
+  .result-toolbar {
     display: flex;
-    align-items: flex-start;
-    justify-content: space-between;
-    gap: 1rem;
+    justify-content: flex-end;
     margin-bottom: 1rem;
   }
 
-  .section-header h3 {
-    font-size: 1.15rem;
-    font-weight: 700;
-  }
-
   .session-chip {
-    display: grid;
-    gap: 0.14rem;
-    padding: 0.72rem 0.82rem;
-    border: 1px solid var(--line);
-    border-radius: 0.65rem;
-    background: var(--panel-soft);
+    display: inline-flex;
+    align-items: baseline;
+    gap: 0.4rem;
+    padding: 0.4rem 0.78rem;
+    border: 1px solid var(--color-border);
+    border-radius: 999px;
+    background: var(--color-bg-app);
   }
 
   .session-chip span {
-    color: var(--muted);
-    font-size: 0.78rem;
+    color: var(--color-text-muted);
+    font-size: 0.76rem;
     text-transform: uppercase;
     letter-spacing: 0.06em;
   }
@@ -256,7 +247,7 @@
 
   .metric-card span {
     display: block;
-    color: var(--muted);
+    color: var(--color-text-muted);
     font-size: 0.84rem;
   }
 
@@ -271,9 +262,10 @@
     gap: 0.45rem;
     margin-top: 1rem;
     padding: 0.92rem;
-    border-radius: 0.65rem;
-    background: #fdf6e9;
-    color: #8a5a00;
+    border: 1px solid color-mix(in srgb, var(--color-warning) 35%, transparent);
+    border-radius: var(--radius-row);
+    background: var(--color-warning-tint);
+    color: var(--color-warning-text);
   }
 
   .summary-grid {
@@ -283,9 +275,9 @@
 
   .summary-grid div {
     padding: 0.88rem 0.92rem;
-    border: 1px solid var(--line);
-    border-radius: 0.65rem;
-    background: var(--panel-soft);
+    border: 1px solid var(--color-border);
+    border-radius: var(--radius-row);
+    background: var(--color-bg-app);
   }
 
   .summary-grid span {
@@ -318,11 +310,11 @@
   td {
     padding: 0.9rem 0.85rem;
     text-align: left;
-    border-bottom: 1px solid var(--line);
+    border-bottom: 1px solid var(--color-border);
   }
 
   th {
-    color: var(--muted);
+    color: var(--color-text-muted);
     font-size: 0.78rem;
     font-weight: 700;
     letter-spacing: 0.06em;
@@ -352,7 +344,7 @@
 
   .sort-head:hover,
   .sort-head.active {
-    color: var(--text);
+    color: var(--color-text-primary);
   }
 
   .sort-head.active :global(svg) {
@@ -372,8 +364,8 @@
     justify-content: center;
     gap: 0.5rem;
     padding: 0.78rem 0.96rem;
-    border-radius: 0.6rem;
-    border: 1px solid var(--line-strong);
+    border-radius: var(--radius-control);
+    border: 1px solid var(--color-border);
     font-weight: 600;
     cursor: pointer;
     transition:
@@ -384,20 +376,20 @@
   .primary-button {
     border: none;
     background: var(--color-brand);
-    color: #fff;
+    color: var(--color-on-brand);
   }
 
   .secondary-button {
-    background: #fff;
-    color: #304038;
+    background: var(--color-bg-surface);
+    color: var(--color-text-primary);
   }
 
   .primary-button:hover:not(:disabled) {
-    background: #126a33;
+    background: var(--color-brand-hover);
   }
 
   .primary-button:active:not(:disabled) {
-    background: #0f5a2b;
+    background: var(--color-brand-hover);
   }
 
   .secondary-button:hover:not(:disabled) {
@@ -422,7 +414,7 @@
     gap: 0;
     border-radius: 1rem;
     overflow: hidden;
-    border: 1px solid var(--line);
+    border: 1px solid var(--color-border);
   }
 
   .empty-shimmer-metrics {
@@ -430,8 +422,8 @@
     grid-template-columns: repeat(3, minmax(0, 1fr));
     gap: 0.75rem;
     padding: 1rem;
-    border-bottom: 1px solid var(--line);
-    background: var(--panel-soft);
+    border-bottom: 1px solid var(--color-border);
+    background: var(--color-bg-app);
   }
 
   .shimmer-metric {
@@ -439,9 +431,9 @@
     flex-direction: column;
     gap: 0.5rem;
     padding: 0.85rem;
-    border: 1px solid var(--line);
+    border: 1px solid var(--color-border);
     border-radius: 0.85rem;
-    background: var(--panel);
+    background: var(--color-bg-surface);
   }
 
   .empty-state-copy {
@@ -451,14 +443,14 @@
     gap: 0.5rem;
     padding: 2rem 1.5rem;
     text-align: center;
-    background: var(--panel);
-    border-bottom: 1px solid var(--line);
+    background: var(--color-bg-surface);
+    border-bottom: 1px solid var(--color-border);
   }
 
   .empty-state-copy strong {
     font-size: 0.98rem;
     font-weight: 700;
-    color: var(--text);
+    color: var(--color-text-primary);
   }
 
   .empty-state-copy span {
@@ -494,7 +486,7 @@
   .empty-shimmer-rows {
     display: flex;
     flex-direction: column;
-    background: var(--panel-soft);
+    background: var(--color-bg-app);
   }
 
   .shimmer-row {
@@ -503,7 +495,7 @@
     gap: 1rem;
     align-items: center;
     padding: 0.78rem 1rem;
-    border-bottom: 1px solid var(--line);
+    border-bottom: 1px solid var(--color-border);
   }
 
   .shimmer-row:last-child {
@@ -516,7 +508,7 @@
     background: linear-gradient(
       90deg,
       var(--color-border) 25%,
-      color-mix(in srgb, var(--color-border) 40%, white) 50%,
+      color-mix(in srgb, var(--color-border) 45%, var(--color-bg-surface)) 50%,
       var(--color-border) 75%
     );
     background-size: 200% 100%;
@@ -539,10 +531,6 @@
   }
 
   @media (max-width: 720px) {
-    .section-header {
-      flex-direction: column;
-    }
-
     .summary-grid {
       grid-template-columns: 1fr;
     }
@@ -566,14 +554,14 @@
     }
 
     tbody tr {
-      border: 1px solid var(--line);
+      border: 1px solid var(--color-border);
       border-radius: 1rem;
-      background: var(--panel-soft);
+      background: var(--color-bg-app);
       overflow: hidden;
     }
 
     tbody td {
-      border-bottom: 1px solid var(--line);
+      border-bottom: 1px solid var(--color-border);
     }
 
     tbody td:last-child {
@@ -584,7 +572,7 @@
       content: attr(data-label);
       display: block;
       margin-bottom: 0.24rem;
-      color: var(--muted);
+      color: var(--color-text-muted);
       font-size: 0.72rem;
       font-weight: 700;
       letter-spacing: 0.06em;