console: rebuild the look in the assured-inspired language (approved direction)

Full styling reset to the approved mockup — from scratch, no functional change.

- PALETTE: clean white ground, warm near-black ink, ONE confident magenta-pink
  accent (#e5227f) reserved for action and active state. The accent keeps the
  --zk-blue-* token names it always had; only the values changed. Teal is the
  customer, amber a person; pink is "act / here", nothing else. Neutrals warmed,
  shadows softened to a plum-ink low alpha.
- TYPE: Plus Jakarta Sans — geometric-humanist, bold on headings (page title
  800, panel titles and figures 700+), the modern-product register assured has.
- SHAPE: the flat single-canvas is gone; back to clean rounded cards that float
  a little on the off-white — panels, metric tiles (money in the accent tint),
  the stage rail, the facts rail. Status ribbon in teal, the primary action a
  pink pill with an accent glow.

Same components, same data, same behaviour — only the surface.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

index.html

@@ -18,7 +18,7 @@
          kept in the fallback stack, and Geist Mono carries refs and figures. -->
     <link rel="preconnect" href="https://fonts.googleapis.com" />
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
-    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700&family=Geist+Mono:wght@400;500&display=swap" />
+    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=Geist+Mono:wght@400;500&display=swap" />
     <!-- Written next to the artifact at placement; carries this environment's
          VITE_ZINO_API_URL, which src/runtimeConfig.js reads off
          window.__RUNTIME_CONFIG__. Without it requireConfigValue throws and the

src/components/StageRail.css

@@ -5,11 +5,12 @@
   align-items: center;
   gap: var(--sp-6);
   flex-wrap: wrap;
-  margin: var(--sp-6) 0;
+  margin: 0 0 var(--sp-5);
-  padding: var(--sp-2) 0 var(--sp-5);
+  padding: var(--sp-6) var(--sp-7);
-  border: 0;
+  border: 1px solid var(--zk-line-soft);
-  border-bottom: 1px solid var(--zk-line);
+  border-radius: var(--r-md);
-  background: transparent;
+  box-shadow: var(--sh-sm);
+  background: var(--zk-white);
 }
 
 .rail ol {

src/index.css

@@ -22,64 +22,69 @@
 }
 
 :root {
-  /* Brand palette lifted from zurichkotak.com */
+  /* ── PALETTE — assured-inspired ──────────────────────────────
-  --zk-blue: #2167ae;
+     A clean white ground, warm near-black ink, and ONE confident accent:
-  --zk-blue-dark: #1a5490;
+     a magenta-pink, reserved for action and active state. The token names
-  --zk-blue-deep: #1a528b;
+     keep their history (the accent still lives under the --zk-blue-* names
-  --zk-navy: #23366f;
+     the whole app references), but the values are the new scheme. Teal is
-  --zk-blue-mid: #5495cf;
+     the customer, amber a person; the pink is "act / here", nothing else. */
-  --zk-blue-light: #91bfe3;
+  --zk-blue: #e5227f;         /* THE ACCENT (was brand blue) — pink */
-  --zk-cyan: #c7ebf9;
+  --zk-blue-dark: #c30f68;
-  --zk-teal: #0e7c74;
+  --zk-blue-deep: #c30f68;
-  --zk-teal-ink: #0b5f59;
+  --zk-navy: #2a1d3d;         /* a deep plum-ink for the logo / darkest text */
-  --zk-teal-tint: #e3f4f2;
+  --zk-blue-mid: #ee5fa0;
-  --zk-teal-line: #a5d8d3;
+  --zk-blue-light: #f6cfe3;   /* pink hairline / ring */
-  --zk-good: #1f9d63;
+  --zk-cyan: #fdebf4;         /* pink-soft */
+  --zk-teal: #0e9e8f;
+  --zk-teal-ink: #0a6b60;
+  --zk-teal-tint: #e2f5f2;
+  --zk-teal-line: #bfe6e1;
+  --zk-good: #18a558;
 
-  --zk-ink: #2b2e31;
+  --zk-ink: #1c1626;          /* warm near-black */
-  --zk-muted: #5d6162;
+  --zk-muted: #645d72;
-  --zk-grey: #a6adaf;
+  --zk-grey: #a49dae;
-  --zk-line: #dde4e3;
+  --zk-line: #e3e1ea;
-  --zk-line-soft: #eceeef;
+  --zk-line-soft: #ececf1;
-  --zk-tint: #f4f9fc;
+  --zk-tint: #faf9fb;         /* off-white section ground */
-  --zk-tint-blue: #ebf3fb;
+  --zk-sunk: #f5f3f8;         /* a touch deeper — hover / inset */
+  --zk-tint-blue: #fdebf4;    /* pink-soft (was tint-blue) */
   --zk-white: #fff;
-  --zk-danger: #d32f2f;
+  --zk-danger: #d64545;
 
-  /* Amber and red accents already used for people / lapsed renewals, named so
+  --zk-amber: #c77d1a;
-     they stop being magic hex literals scattered across four stylesheets. */
+  --zk-amber-ink: #9a5d10;
-  --zk-amber: #b5761f;
+  --zk-amber-tint: #fbf0dd;
-  --zk-amber-ink: #93500f;
+  --zk-amber-line: #ecd3a3;
-  --zk-amber-tint: #fdf1e7;
+  --zk-danger-ink: #b23636;
-  --zk-amber-line: #f0c69a;
+  --zk-danger-tint: #fbeaea;
-  --zk-danger-ink: #a3261f;
+  --zk-danger-line: #f0c9c9;
-  --zk-danger-tint: #fdeceb;
-  --zk-danger-line: #f0c2bd;
 
   /* ── Shape, depth, motion ────────────────────────────────────
-     One scale, used everywhere. The palette above is untouched; every shadow
+     Rounder than before and softer shadows — the assured cards read as
-     below is the brand navy at low alpha, so depth reads as part of the brand
+     objects that float a little, on a warm plum-ink low alpha rather than
-     rather than as generic grey haze. */
+     generic grey haze. */
-  --r-xs: 6px;
+  --r-xs: 8px;
-  --r-sm: 8px;
+  --r-sm: 10px;
-  --r-md: 12px;
+  --r-md: 14px;
-  --r-lg: 16px;
+  --r-lg: 18px;
-  --r-xl: 20px;
+  --r-xl: 22px;
   --r-pill: 999px;
 
-  --sh-xs: 0 1px 2px rgba(35, 54, 111, 0.05);
+  --sh-xs: 0 1px 2px rgba(28, 22, 38, 0.04);
-  --sh-sm: 0 1px 2px rgba(35, 54, 111, 0.05), 0 2px 6px -2px rgba(35, 54, 111, 0.07);
+  --sh-sm: 0 1px 2px rgba(28, 22, 38, 0.04), 0 4px 14px -8px rgba(28, 22, 38, 0.10);
-  --sh-md: 0 1px 2px rgba(35, 54, 111, 0.05), 0 10px 24px -8px rgba(35, 54, 111, 0.14);
+  --sh-md: 0 1px 2px rgba(28, 22, 38, 0.04), 0 8px 24px -10px rgba(28, 22, 38, 0.12);
-  --sh-lg: 0 2px 6px rgba(35, 54, 111, 0.06), 0 20px 42px -14px rgba(35, 54, 111, 0.22);
+  --sh-lg: 0 2px 6px rgba(28, 22, 38, 0.06), 0 24px 48px -16px rgba(28, 22, 38, 0.22);
+  --sh-accent: 0 6px 20px -6px rgba(229, 34, 127, 0.42);
 
-  --ring: 0 0 0 3px rgba(33, 103, 174, 0.16);
+  --ring: 0 0 0 3px rgba(229, 34, 127, 0.16);
 
   --ease: cubic-bezier(0.4, 0, 0.2, 1);
   --t-fast: 0.14s var(--ease);
   --t: 0.2s var(--ease);
 
-  --grad-blue: linear-gradient(135deg, var(--zk-blue) 0%, var(--zk-blue-deep) 100%);
+  --grad-blue: linear-gradient(135deg, var(--zk-blue) 0%, var(--zk-blue-dark) 100%);
-  --grad-blue-hover: linear-gradient(135deg, var(--zk-blue-dark) 0%, var(--zk-navy) 100%);
+  --grad-blue-hover: linear-gradient(135deg, var(--zk-blue-dark) 0%, #a80c59 100%);
 
   /* ── TYPE SCALE ───────────────────────────────────────────────
      The app had FIFTY-FOUR distinct font sizes, and forty of them sat
@@ -114,6 +119,8 @@
   --fw-normal: 400;
   --fw-medium: 500;
   --fw-semi: 600;
+  --fw-bold: 700;
+  --fw-x: 800;
 
   /* ── SPACING ──────────────────────────────────────────────────
      One rhythm. Panels breathe at 24-28px rather than 14-18px, which is
@@ -131,8 +138,8 @@
   /* Display and body are the SAME brand face — Zurich Sans has no bold,
      so headings and figures lean on weight 500 and tighter tracking, set per
      use, not on a second family. */
-  --font-display: 'Geist', 'Zurich Sans', system-ui, sans-serif;
+  --font-display: 'Plus Jakarta Sans', 'Geist', system-ui, sans-serif;
-  --font-zurich: 'Geist', 'Zurich Sans', system-ui, -apple-system, sans-serif;
+  --font-zurich: 'Plus Jakarta Sans', 'Geist', system-ui, -apple-system, sans-serif;
   --font-mono: 'Geist Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
 
   font-family: var(--font-zurich);

src/screens/screens.css

@@ -10,7 +10,7 @@
 .page__title {
   margin: 0;
   font-size: var(--fs-2xl);
-  font-weight: var(--fw-semi);
+  font-weight: var(--fw-x);
   letter-spacing: -0.022em;
   line-height: 1.2;
   color: var(--zk-ink);
@@ -309,14 +309,14 @@
 
 /* ---- panel ---- */
 .panel {
-  /* FLAT. Was a shadowed white card; now a plain section on the white
+  /* CARD. The assured look is clean white cards that float a little on the
-     canvas, set off by its heading and by space, not by a box. */
+     off-white ground — rounded, soft-shadowed, bounded. */
-  background: transparent;
+  background: var(--zk-white);
-  border: 0;
+  border: 1px solid var(--zk-line-soft);
-  border-radius: 0;
+  border-radius: var(--r-lg);
-  box-shadow: none;
+  box-shadow: var(--sh-sm);
-  padding: 0;
+  padding: var(--sp-6) var(--sp-7);
-  margin-bottom: var(--sp-8);
+  margin-bottom: var(--sp-5);
 }
 
 .panel__head {
@@ -330,7 +330,7 @@
 .panel__title {
   margin: 0;
   font-size: var(--fs-lg);
-  font-weight: var(--fw-semi);
+  font-weight: var(--fw-bold);
   letter-spacing: -0.018em;
   line-height: var(--lh-tight);
 }
@@ -404,12 +404,14 @@
   display: flex;
   align-items: flex-start;
   gap: 14px;
-  margin-bottom: 22px;
+  margin-bottom: var(--sp-5);
-  padding: 16px 20px;
+  padding: var(--sp-4) var(--sp-5);
-  border-radius: var(--r-lg);
+  border-radius: var(--r-md);
-  border: 1px solid var(--zk-blue-light);
+  border: 1px solid var(--zk-teal-line);
-  background: var(--zk-tint-blue);
+  background: var(--zk-teal-tint);
+  color: var(--zk-teal-ink);
 }
+.doing strong { color: var(--zk-teal-ink); }
 
 .doing div {
   display: flex;
@@ -618,9 +620,9 @@
 
 /* Rail panels are tighter than main panels — a 340px measure cannot afford
    32px of padding on each side. */
-.lead__side .panel { padding: 0; margin-bottom: var(--sp-6); }
+.lead__side .panel { padding: var(--sp-5) var(--sp-6); margin-bottom: var(--sp-4); }
 .lead__side .panel > .panel__head { padding: 0; margin-bottom: var(--sp-4); }
-.lead__side .panel--crew { padding: 0 0 var(--sp-6); border-bottom: 1px solid var(--zk-line); }
+.lead__side .panel--crew { border-bottom: 0; }
 /* rail headings sit at label size, not the big panel-title size — the rail is
    reference, and a 18px "Customer" heading would shout over the facts. */
 .lead__side .panel__title {
@@ -1107,16 +1109,26 @@
    22px against 12px labels. Premium and commission — the two numbers
    anyone actually came for — are bigger again. */
 .lmetrics {
-  display: flex;
+  display: grid;
-  flex-wrap: wrap;
+  grid-template-columns: repeat(4, 1fr);
-  gap: var(--sp-6) var(--sp-8);
+  gap: var(--sp-4);
-  padding: var(--sp-6) 0;
+  margin-bottom: var(--sp-5);
-  border-top: 1px solid var(--zk-line);
-  border-bottom: 1px solid var(--zk-line);
-  margin-bottom: 0;
 }
 
-.lm { min-width: 0; }
+.lm {
+  min-width: 0;
+  background: var(--zk-white);
+  border: 1px solid var(--zk-line-soft);
+  border-radius: var(--r-md);
+  box-shadow: var(--sh-sm);
+  padding: var(--sp-5);
+}
+/* Money leads: the two figures a renewal is about sit in the accent tint. */
+.lm--hero { background: var(--zk-tint-blue); border-color: var(--zk-blue-light); }
+.lm--hero .lm__v { color: var(--zk-blue-dark); }
+.lm--hero .lm__l { color: var(--zk-blue-dark); }
+
+@media (max-width: 1040px) { .lmetrics { grid-template-columns: 1fr 1fr; } }
 
 .lm__l {
   display: block;
@@ -1132,7 +1144,7 @@
   display: block;
   margin-bottom: var(--sp-1);
   font-size: var(--fs-xl);
-  font-weight: var(--fw-semi);
+  font-weight: var(--fw-x);
   line-height: var(--lh-tight);
   color: var(--zk-navy);
   font-variant-numeric: tabular-nums;
@@ -1821,17 +1833,17 @@
   display: inline-flex;
   align-items: center;
   gap: var(--sp-3);
-  padding: var(--sp-3) var(--sp-4) var(--sp-3) var(--sp-5);
+  padding: var(--sp-3) var(--sp-5) var(--sp-3) var(--sp-5);
   border: 0;
   border-radius: var(--r-md);
-  background: var(--zk-amber);
+  background: var(--zk-blue);
   color: #fff;
   cursor: pointer;
-  box-shadow: var(--sh-sm);
+  box-shadow: var(--sh-accent);
   transition: background var(--t-fast), box-shadow var(--t-fast), transform var(--t-fast);
 }
-.cta:hover { background: var(--zk-amber-ink); box-shadow: var(--sh-md); }
+.cta:hover { background: var(--zk-blue-dark); transform: translateY(-1px); }
-.cta:focus-visible { outline: 2px solid var(--zk-amber-ink); outline-offset: 2px; }
+.cta:focus-visible { outline: 2px solid var(--zk-blue-dark); outline-offset: 2px; }
 .cta__txt { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.2; }
 .cta__txt small {
   font-size: var(--fs-3xs);