/* ─────────────────────────────────────────────────────────────────────
   YUHA · v2 design system
   Tokens + base typography + chrome (sidebar + topbar) + primitives.
   Single family (Inter), no decorative serifs, no italic flourishes.
   Responsive — desktop sidebar / tablet collapsed sidebar / mobile bottom-nav.
   Scoped under [data-ui="v2"] so v1 styles are untouched.
   ───────────────────────────────────────────────────────────────────── */

[data-ui="v2"] {
  /* ── Tokens ────────────────────────────────────────────────────── */

  /* Colour — keep current teal exactly */
  --teal:        #0d9488;
  --teal-2:      #14b8a6;
  --teal-deep:   #0f766e;
  --teal-soft:   #ccfbf1;
  --teal-tint:   #f0fdfa;

  /* Neutrals */
  --bg:          #fafaf8;
  --paper:       #ffffff;
  --paper-2:     #f7f7f4;
  --line:        #ececea;
  --line-2:      #e3e3df;
  --ink:         #0f1a16;
  --ink-soft:    #3a4744;
  --ink-2:       #5c6b66;
  --ink-3:       #8a9591;

  /* Accents — use sparingly, one per data-domain */
  --plum:        #7c5cff;        /* sleep */
  --plum-soft:   #efe9ff;
  --warm:        #f59e0b;        /* warnings, stress */
  --warm-soft:   #fef3c7;
  --rose:        #ef4444;        /* alerts, HR high */
  --rose-soft:   #fee2e2;
  --indigo:      #4f46e5;        /* informational */
  --indigo-soft: #e0e7ff;

  /* Brand-source colours (logos only) */
  --strava:      #FC5200;
  --garmin:      #0073bd;
  --google:      #34a853;  /* Google Health (Fitbit & Pixel) brand mark */

  /* Spacing scale — 4 / 8 / 12 / 16 / 24 / 32 / 48 */
  --s-1:  4px;
  --s-2:  8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 24px;
  --s-6: 32px;
  --s-7: 48px;

  /* Radii */
  --r-sm:  8px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-xl: 20px;
  --r-2xl: 28px;
  --r-pill: 999px;

  /* Shadows — modern, layered, refined */
  --shadow-1:
    0 1px 2px rgba(15,26,22,0.04),
    0 2px 8px -2px rgba(15,26,22,0.05);
  --shadow-2:
    0 1px 2px rgba(15,26,22,0.04),
    0 4px 12px -2px rgba(15,26,22,0.06),
    0 12px 28px -8px rgba(15,26,22,0.10);
  --shadow-3:
    0 2px 4px rgba(15,26,22,0.05),
    0 12px 24px -8px rgba(15,26,22,0.10),
    0 32px 60px -16px rgba(15,26,22,0.18);
  --shadow-hover:
    0 1px 2px rgba(15,26,22,0.04),
    0 8px 20px -4px rgba(15,26,22,0.10),
    0 20px 40px -12px rgba(15,26,22,0.12);
  --ring-focus: 0 0 0 3px rgba(13,148,136,0.20);

  /* Card inner highlight — gives that "paper" lift */
  --bevel-card:
    inset 0 1px 0 rgba(255,255,255,0.7),
    inset 0 -1px 0 rgba(15,26,22,0.025);

  /* Type scale */
  --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --font-num: 'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;

  /* z-index */
  --z-sidebar: 10;
  --z-topbar:  20;
  --z-mobnav:  30;
  --z-modal:   100;

  /* Layout */
  --sidebar-w: 248px;
  --sidebar-w-collapsed: 72px;
  --topbar-h: 64px;
  --content-max: 1180px;
}

/* ── Reset / base ────────────────────────────────────────────────── */

[data-ui="v2"] *,
[data-ui="v2"] *::before,
[data-ui="v2"] *::after { box-sizing: border-box; }

[data-ui="v2"] html,
[data-ui="v2"] body { margin:0; padding:0; }

/* v1 sets `body { display: flex; flex-direction: column; }` in its mobile
   media query. Combined with v1's `html, body { height: 100%; overflow:
   hidden; }`, on small viewports the body's intrinsic width can collapse
   to its smallest in-flow flex item (a hidden script tag at ~0–8px),
   shrinking #desktopApp and breaking the dashboard layout. Force html
   and body to fill the viewport horizontally so flex children can't
   pull them in. */
[data-ui="v2"] html,
[data-ui="v2"] body {
  width: 100%;
  min-width: 100vw;
}

[data-ui="v2"] body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  font-size: 14px;
  line-height: 1.5;
  font-feature-settings: 'cv11' 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

[data-ui="v2"] a { color: var(--teal-deep); text-decoration: none; }
[data-ui="v2"] a:hover { color: var(--teal); }

[data-ui="v2"] ::selection { background: var(--teal-soft); color: var(--teal-deep); }

[data-ui="v2"] button { font-family: inherit; }
[data-ui="v2"] input, [data-ui="v2"] select, [data-ui="v2"] textarea {
  font-family: inherit;
  font-size: inherit;
  color: inherit;
}

/* ── Typography ──────────────────────────────────────────────────── */

[data-ui="v2"] .h-display {
  font-weight: 600;
  font-size: 28px;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin: 0;
}
[data-ui="v2"] .h-display-lg {
  font-weight: 700;
  font-size: 40px;
  line-height: 1.05;
  letter-spacing: -0.025em;
}
[data-ui="v2"] .h-page {
  font-weight: 600;
  font-size: 22px;
  line-height: 1.25;
  letter-spacing: -0.015em;
  color: var(--ink);
  margin: 0;
}
[data-ui="v2"] .h-card {
  font-weight: 600;
  font-size: 16px;
  line-height: 1.35;
  letter-spacing: -0.005em;
  color: var(--ink);
  margin: 0;
}
[data-ui="v2"] .h-eyebrow {
  font-weight: 600;
  font-size: 11px;
  line-height: 1.3;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-2);
  margin: 0;
}
[data-ui="v2"] .body-lg { font-size: 15px; line-height: 1.55; color: var(--ink-soft); }
[data-ui="v2"] .body    { font-size: 14px; line-height: 1.5;  color: var(--ink-soft); }
[data-ui="v2"] .body-sm { font-size: 13px; line-height: 1.5;  color: var(--ink-2); }
[data-ui="v2"] .meta    { font-size: 12px; line-height: 1.45; color: var(--ink-2); }

/* Tabular figures — use on any number that lives in a column */
[data-ui="v2"] .tnum,
[data-ui="v2"] .num-lg,
[data-ui="v2"] .num-md {
  font-family: var(--font-num);
  font-feature-settings: 'tnum' 1, 'cv11' 1;
}
[data-ui="v2"] .num-lg {
  font-weight: 700;
  font-size: 36px;
  line-height: 1;
  letter-spacing: -0.025em;
  color: var(--ink);
}
[data-ui="v2"] .num-md {
  font-weight: 600;
  font-size: 22px;
  line-height: 1.1;
  letter-spacing: -0.015em;
  color: var(--ink);
}
[data-ui="v2"] .num-lg .unit,
[data-ui="v2"] .num-md .unit {
  font-weight: 500;
  font-size: 0.42em;
  color: var(--ink-2);
  margin-left: 4px;
  letter-spacing: 0;
}

/* ── App shell ───────────────────────────────────────────────────── */

[data-ui="v2"] .shell {
  display: grid;
  grid-template-columns: var(--sidebar-w) minmax(0, 1fr);
  min-height: 100vh;
  max-width: 1440px;
  margin: 0 auto;
  background: var(--bg);
}

[data-ui="v2"] .side {
  position: sticky;
  top: 0;
  height: 100vh;
  z-index: var(--z-sidebar);
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 20px 12px;
  border-right: 1px solid var(--line);
  background: var(--paper-2);
}

[data-ui="v2"] .brand {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 8px 18px;
}
[data-ui="v2"] .brand-mark {
  width: 32px;
  height: 32px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  background: transparent;
  color: #fff;
  flex: none;
  overflow: hidden;
}
/* When the brand mark contains the real YUHA icon image */
[data-ui="v2"] .brand-mark img,
[data-ui="v2"] .l-brand-mark img,
[data-ui="v2"] .s-brand-mark img {
  width: 100%;
  height: 100%;
  border-radius: inherit;
  object-fit: cover;
  display: block;
}
[data-ui="v2"] .brand-name {
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.015em;
  color: var(--ink);
}

[data-ui="v2"] .nav-label {
  padding: 14px 12px 6px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-3);
}

[data-ui="v2"] .nav-item {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 9px 12px;
  border-radius: var(--r-md);
  font-size: 13.5px;
  font-weight: 500;
  color: var(--ink-soft);
  cursor: pointer;
  user-select: none;
  background: transparent;
  border: none;
  width: 100%;
  text-align: left;
  transition: background 0.12s ease, color 0.12s ease;
}
[data-ui="v2"] .nav-item:hover {
  background: var(--paper);
  color: var(--ink);
}
[data-ui="v2"] .nav-item.active {
  background: var(--paper);
  color: var(--ink);
  font-weight: 600;
  box-shadow: var(--shadow-1), inset 0 0 0 1px var(--line);
}
[data-ui="v2"] .nav-item.active .nav-ico { color: var(--teal); }
[data-ui="v2"] .nav-ico {
  width: 18px;
  height: 18px;
  flex: none;
  color: var(--ink-2);
}
[data-ui="v2"] .nav-spacer { flex: 1; }

[data-ui="v2"] .source-pill {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: var(--r-md);
  background: var(--paper);
  border: 1px solid var(--line);
  margin: 2px 0;
  font-size: 12px;
  color: var(--ink-soft);
}
[data-ui="v2"] .source-pill .dot {
  width: 8px;
  height: 8px;
  border-radius: var(--r-pill);
  flex: none;
}

[data-ui="v2"] .me {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px;
  margin-top: 8px;
  border-radius: var(--r-lg);
  background: var(--paper);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-1);
}
[data-ui="v2"] .me-avatar {
  width: 32px;
  height: 32px;
  border-radius: var(--r-md);
  background: var(--teal);
  color: #fff;
  font-weight: 600;
  font-size: 13px;
  display: grid;
  place-items: center;
  flex: none;
}
[data-ui="v2"] .me-info { flex: 1; min-width: 0; }
[data-ui="v2"] .me-name {
  font-size: 13px;
  font-weight: 600;
  line-height: 1.2;
  color: var(--ink);
}
[data-ui="v2"] .me-link {
  font-size: 11px;
  color: var(--ink-2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ── Topbar ──────────────────────────────────────────────────────── */

[data-ui="v2"] .main { min-width: 0; }

[data-ui="v2"] .topbar {
  position: sticky;
  top: 0;
  z-index: var(--z-topbar);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  padding: 14px 24px;
  min-height: var(--topbar-h);
  background: rgba(250, 250, 248, 0.85);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(236,236,234,0.7);
}
[data-ui="v2"] .topbar-title {
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--ink);
  margin: 0;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
[data-ui="v2"] .topbar-right {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

[data-ui="v2"] .content {
  padding: 24px 24px 96px;
  max-width: var(--content-max);
}

/* ── Pills & badges ──────────────────────────────────────────────── */

[data-ui="v2"] .pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 11px;
  border-radius: var(--r-pill);
  background: var(--paper);
  border: 1px solid var(--line);
  font-size: 12px;
  font-weight: 500;
  color: var(--ink-soft);
  white-space: nowrap;
  box-shadow: var(--shadow-1);
}
[data-ui="v2"] .pill .dot {
  width: 6px;
  height: 6px;
  border-radius: var(--r-pill);
  background: var(--ink-3);
  flex: none;
}
[data-ui="v2"] .pill.green {
  background: var(--teal-tint);
  border-color: var(--teal-soft);
  color: var(--teal-deep);
}
[data-ui="v2"] .pill.green .dot { background: var(--teal); }
[data-ui="v2"] .pill.warm {
  background: var(--warm-soft);
  border-color: #fde68a;
  color: #92400e;
}
[data-ui="v2"] .pill.warm .dot { background: var(--warm); }
[data-ui="v2"] .pill.rose {
  background: var(--rose-soft);
  border-color: #fecaca;
  color: #991b1b;
}
[data-ui="v2"] .pill.rose .dot { background: var(--rose); }

[data-ui="v2"] .badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  border-radius: var(--r-sm);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
[data-ui="v2"] .badge.green { background: var(--teal-soft); color: var(--teal-deep); }
[data-ui="v2"] .badge.warm  { background: var(--warm-soft); color: #92400e; }
[data-ui="v2"] .badge.rose  { background: var(--rose-soft); color: #991b1b; }
[data-ui="v2"] .badge.gray  { background: var(--paper-2); color: var(--ink-2); border: 1px solid var(--line); }
[data-ui="v2"] .badge.strava { background: #ffe8da; color: var(--strava); }
[data-ui="v2"] .badge.garmin { background: #d6ecf9; color: var(--garmin); }

/* ── Buttons ─────────────────────────────────────────────────────── */

[data-ui="v2"] .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 16px;
  border-radius: var(--r-md);
  border: 1px solid transparent;
  font-size: 13px;
  font-weight: 600;
  line-height: 1;
  color: var(--ink);
  background: var(--paper);
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
  transition: background 0.12s ease, border-color 0.12s ease, transform 0.06s ease;
}
[data-ui="v2"] .btn:active { transform: translateY(1px); }
[data-ui="v2"] .btn:focus-visible { outline: none; box-shadow: var(--ring-focus); }
[data-ui="v2"] .btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }

[data-ui="v2"] .btn.primary {
  background: var(--teal);
  color: #fff;
  border-color: var(--teal);
  box-shadow: 0 1px 0 rgba(255,255,255,0.15) inset, var(--shadow-1);
}
[data-ui="v2"] .btn.primary:hover { background: var(--teal-deep); border-color: var(--teal-deep); }

[data-ui="v2"] .btn.outline {
  background: var(--paper);
  border-color: var(--line);
  color: var(--ink);
  box-shadow: var(--shadow-1);
}
[data-ui="v2"] .btn.outline:hover { border-color: var(--line-2); background: var(--paper-2); }

[data-ui="v2"] .btn.ghost {
  background: transparent;
  border-color: transparent;
  color: var(--ink-soft);
}
[data-ui="v2"] .btn.ghost:hover { background: var(--paper); }

[data-ui="v2"] .btn.dark {
  background: var(--ink);
  color: #fff;
  border-color: var(--ink);
}
[data-ui="v2"] .btn.dark:hover { background: #1f2a26; border-color: #1f2a26; }

[data-ui="v2"] .btn.danger {
  background: var(--paper);
  color: var(--rose);
  border-color: var(--rose);
}
[data-ui="v2"] .btn.danger:hover { background: var(--rose-soft); }

[data-ui="v2"] .btn.sm { padding: 7px 12px; font-size: 12px; border-radius: var(--r-sm); }
[data-ui="v2"] .btn.lg { padding: 13px 22px; font-size: 14px; border-radius: var(--r-md); }
[data-ui="v2"] .btn.block { display: flex; width: 100%; }

[data-ui="v2"] .icbtn {
  display: inline-grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: var(--r-md);
  border: 1px solid var(--line);
  background: var(--paper);
  color: var(--ink-2);
  cursor: pointer;
  transition: background 0.12s ease, color 0.12s ease;
}
[data-ui="v2"] .icbtn:hover { background: var(--paper-2); color: var(--ink); }
[data-ui="v2"] .icbtn.flush { border: none; box-shadow: none; background: transparent; }

/* ── Cards ───────────────────────────────────────────────────────── */

[data-ui="v2"] .card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  padding: 20px;
  box-shadow: var(--shadow-1), var(--bevel-card);
  position: relative;
  transition: box-shadow 0.18s ease, transform 0.18s ease, border-color 0.18s ease;
}
[data-ui="v2"] .card.interactive { cursor: pointer; }
[data-ui="v2"] .card.interactive:hover {
  box-shadow: var(--shadow-hover), var(--bevel-card);
  transform: translateY(-1px);
  border-color: var(--line-2);
}
[data-ui="v2"] .card.flat { box-shadow: none; }
[data-ui="v2"] .card.elev { box-shadow: var(--shadow-2), var(--bevel-card); }
[data-ui="v2"] .card.tinted { background: var(--paper-2); }
[data-ui="v2"] .card.warm-tint { background: linear-gradient(160deg, #fff8e6 0%, #fff1d2 100%); border-color: #fde68a; }

[data-ui="v2"] .card-pad-sm { padding: 14px 16px; }
[data-ui="v2"] .card-pad-lg { padding: 28px; }

/* Stat tile */
[data-ui="v2"] .stat {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 16px 18px;
  box-shadow: var(--shadow-1), var(--bevel-card);
}
[data-ui="v2"] .stat .lbl {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ink-2);
  display: flex;
  align-items: center;
  gap: 6px;
}
[data-ui="v2"] .stat .val {
  font-family: var(--font-num);
  font-feature-settings: 'tnum' 1;
  font-weight: 700;
  font-size: 26px;
  line-height: 1.05;
  letter-spacing: -0.02em;
  margin-top: 8px;
  color: var(--ink);
}
[data-ui="v2"] .stat .val .unit {
  font-weight: 500;
  font-size: 12px;
  color: var(--ink-2);
  margin-left: 3px;
}
[data-ui="v2"] .stat .delta {
  font-size: 11px;
  font-weight: 600;
  margin-top: 6px;
  display: inline-flex;
  align-items: center;
  gap: 3px;
}
[data-ui="v2"] .stat .delta.up { color: var(--teal-deep); }
[data-ui="v2"] .stat .delta.down { color: #991b1b; }

/* ── Form fields ─────────────────────────────────────────────────── */

[data-ui="v2"] .field { display: block; }
[data-ui="v2"] .field label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 6px;
}
[data-ui="v2"] .field input,
[data-ui="v2"] .field select,
[data-ui="v2"] .field textarea {
  width: 100%;
  padding: 11px 13px;
  border-radius: var(--r-md);
  border: 1px solid var(--line);
  background: var(--paper);
  font-size: 14px;
  color: var(--ink);
  transition: border-color 0.12s ease, box-shadow 0.12s ease;
}
[data-ui="v2"] .field input:focus,
[data-ui="v2"] .field select:focus,
[data-ui="v2"] .field textarea:focus {
  outline: none;
  border-color: var(--teal);
  box-shadow: var(--ring-focus);
}
[data-ui="v2"] .field .hint {
  font-size: 11px;
  color: var(--ink-2);
  margin-top: 4px;
}

/* ── Weekly chart card (Last 7 Days section) ────────────────────── */

[data-ui="v2"] .wc-stack {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}

[data-ui="v2"] .wc {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  padding: 20px 22px;
  box-shadow: var(--shadow-1), var(--bevel-card);
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 24px;
  align-items: stretch;
  transition: box-shadow 0.18s ease, border-color 0.18s ease;
}
[data-ui="v2"] .wc:hover {
  box-shadow: var(--shadow-2), var(--bevel-card);
  border-color: var(--line-2);
}

[data-ui="v2"] .wc-side {
  display: flex;
  flex-direction: column;
  gap: 6px;
  border-right: 1px solid var(--line);
  padding-right: var(--s-5);
}
[data-ui="v2"] .wc-hdr {
  display: flex;
  align-items: center;
  gap: 8px;
}
[data-ui="v2"] .wc-icon {
  width: 32px;
  height: 32px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  background: var(--paper-2);
  border: 1px solid var(--line);
  font-size: 16px;
  flex: none;
}
[data-ui="v2"] .wc-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: -0.005em;
}
[data-ui="v2"] .wc-trend {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 2px 7px;
  border-radius: var(--r-pill);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
[data-ui="v2"] .wc-trend.up   { background: var(--teal-soft); color: var(--teal-deep); }
[data-ui="v2"] .wc-trend.down { background: var(--rose-soft); color: #991b1b; }
[data-ui="v2"] .wc-trend.flat { background: var(--paper-2); color: var(--ink-2); border: 1px solid var(--line); }

[data-ui="v2"] .wc-val {
  font-family: var(--font-num);
  font-feature-settings: 'tnum' 1;
  font-weight: 700;
  font-size: 32px;
  line-height: 1.05;
  letter-spacing: -0.025em;
  color: var(--ink);
  margin-top: 6px;
}
[data-ui="v2"] .wc-val .unit {
  font-weight: 500;
  font-size: 13px;
  color: var(--ink-2);
  margin-left: 3px;
}
[data-ui="v2"] .wc-val-lbl {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ink-2);
  margin-top: 2px;
}
[data-ui="v2"] .wc-meta {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding-top: 10px;
}
[data-ui="v2"] .wc-meta-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 6px;
  font-size: 11.5px;
  color: var(--ink-2);
}
[data-ui="v2"] .wc-meta-row b {
  font-weight: 700;
  color: var(--ink-soft);
  font-feature-settings: 'tnum' 1;
}

[data-ui="v2"] .wc-main {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
[data-ui="v2"] .wc-chart {
  flex: 1;
  width: 100%;
  height: 120px;
  min-height: 96px;
  display: block;
}
[data-ui="v2"] .wc-summary {
  font-size: 13px;
  line-height: 1.5;
  color: var(--ink-soft);
  padding-top: 10px;
  border-top: 1px solid var(--line);
  margin-top: 10px;
}

/* Variants by metric — colour the chart accent + icon background */
[data-ui="v2"] .wc.distance .wc-icon { background: var(--teal-tint); border-color: var(--teal-soft); color: var(--teal-deep); }
[data-ui="v2"] .wc.sleep    .wc-icon { background: var(--plum-soft); border-color: #d9d0ff; color: #5b3df0; }
[data-ui="v2"] .wc.steps    .wc-icon { background: #ecfdf5; border-color: #d1fae5; color: #047857; }
[data-ui="v2"] .wc.rhr      .wc-icon { background: var(--rose-soft); border-color: #fecaca; color: #b91c1c; }
[data-ui="v2"] .wc.stress   .wc-icon { background: var(--warm-soft); border-color: #fde68a; color: #92400e; }
[data-ui="v2"] .wc.vo2      .wc-icon { background: var(--indigo-soft); border-color: #c7d2fe; color: #3730a3; }

/* Mobile: stack side and main */
@media (max-width: 720px) {
  [data-ui="v2"] .wc {
    grid-template-columns: 1fr;
    padding: 18px 18px;
    gap: 14px;
  }
  [data-ui="v2"] .wc-side {
    border-right: none;
    border-bottom: 1px solid var(--line);
    padding-right: 0;
    padding-bottom: 14px;
  }
  [data-ui="v2"] .wc-meta { padding-top: 6px; }
  [data-ui="v2"] .wc-val { font-size: 28px; }
}

/* ── Tabs (inline) ───────────────────────────────────────────────── */

[data-ui="v2"] .tabs {
  display: flex;
  gap: 0;
  border-bottom: 1px solid var(--line);
  margin: var(--s-5) 0 0;
  overflow-x: auto;
  scrollbar-width: none;
}
[data-ui="v2"] .tabs::-webkit-scrollbar { display: none; }
[data-ui="v2"] .tab {
  padding: 12px 16px;
  font-size: 13px;
  font-weight: 500;
  color: var(--ink-2);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  white-space: nowrap;
  background: transparent;
  border-left: none;
  border-right: none;
  border-top: none;
}
[data-ui="v2"] .tab.active {
  color: var(--ink);
  border-bottom-color: var(--teal);
  font-weight: 600;
}

/* ── Layout helpers ──────────────────────────────────────────────── */

[data-ui="v2"] .row { display: flex; align-items: center; gap: var(--s-3); }
[data-ui="v2"] .row.between { justify-content: space-between; flex-wrap: wrap; }
[data-ui="v2"] .col { display: flex; flex-direction: column; }
[data-ui="v2"] .grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-3); }
[data-ui="v2"] .grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-3); }
[data-ui="v2"] .grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s-3); }

[data-ui="v2"] .gap-2 { gap: var(--s-2); }
[data-ui="v2"] .gap-3 { gap: var(--s-3); }
[data-ui="v2"] .gap-4 { gap: var(--s-4); }
[data-ui="v2"] .mt-3 { margin-top: var(--s-3); }
[data-ui="v2"] .mt-4 { margin-top: var(--s-4); }
[data-ui="v2"] .mt-5 { margin-top: var(--s-5); }
[data-ui="v2"] .mt-6 { margin-top: var(--s-6); }

/* ── Mobile bottom nav ───────────────────────────────────────────── */

[data-ui="v2"] .mob-nav {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: var(--z-mobnav);
  padding: 6px 4px calc(6px + env(safe-area-inset-bottom)) 4px;
  background: rgba(255,255,255,0.96);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-top: 1px solid var(--line);
}
[data-ui="v2"] .mob-nav-row {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 2px;
}
[data-ui="v2"] .mob-tab {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: 8px 4px 6px;
  border: none;
  background: transparent;
  color: var(--ink-2);
  font-size: 10px;
  font-weight: 600;
  border-radius: var(--r-md);
  cursor: pointer;
  min-height: 52px;
}
[data-ui="v2"] .mob-tab.active { color: var(--teal); }
[data-ui="v2"] .mob-tab svg { width: 22px; height: 22px; }

/* ── Responsive breakpoints ──────────────────────────────────────── */

/* Tablet — collapse sidebar to icon strip */
@media (max-width: 1024px) {
  [data-ui="v2"] .shell { grid-template-columns: var(--sidebar-w-collapsed) minmax(0, 1fr); }
  [data-ui="v2"] .nav-item { justify-content: center; padding: 11px 0; }
  [data-ui="v2"] .nav-item span.label,
  [data-ui="v2"] .nav-label,
  [data-ui="v2"] .source-pill .label,
  [data-ui="v2"] .me-info,
  [data-ui="v2"] .brand-name { display: none; }
  [data-ui="v2"] .source-pill { justify-content: center; padding: 8px 0; }
  [data-ui="v2"] .me { padding: 8px; justify-content: center; }
  [data-ui="v2"] .topbar { padding: 14px 20px; }
  [data-ui="v2"] .content { padding: 20px 20px 96px; }
}

/* Mobile — hide sidebar entirely, show bottom nav */
@media (max-width: 720px) {
  [data-ui="v2"] .shell { grid-template-columns: minmax(0, 1fr); }
  [data-ui="v2"] .side { display: none; }
  [data-ui="v2"] .mob-nav { display: block; }
  [data-ui="v2"] .topbar { padding: 12px 16px; }
  [data-ui="v2"] .content { padding: 16px 16px calc(96px + env(safe-area-inset-bottom)); }
  [data-ui="v2"] .h-display { font-size: 24px; }
  [data-ui="v2"] .h-display-lg { font-size: 32px; }
  [data-ui="v2"] .num-lg { font-size: 30px; }
  [data-ui="v2"] .grid-3 { grid-template-columns: 1fr 1fr; }
  [data-ui="v2"] .grid-4 { grid-template-columns: 1fr 1fr; }
}

/* ═══════════════════════════════════════════════════════════════════════
   STEP 2 — Chrome integration with the live v1 markup.

   These rules retarget the live app's existing sidebar / topbar / mobile-
   nav classes (`.sidebar`, `.sb-item`, `.top-nav`, `.mob-tab` etc.) and
   restyle them to match the v2 design language.

   • No HTML changes — every onclick (`sbNav('chat')`, `openProfileModal()`,
     `logout()` …) keeps working unchanged.
   • All rules scoped under `[data-ui="v2"]` so v1 users see byte-identical
     v1 chrome.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Desktop app shell — minimal override ──
   v1's `.desktop-app { position: fixed; inset: 0 }` already spans the full
   viewport. We only swap the background; do NOT set max-width / margin /
   min-height — those interact badly with `position: fixed` + `inset: 0`
   and collapse the shell to a few pixels wide. Inner content surfaces
   (.dash-scroll, .acts-scroll, etc.) own their max-width. */
[data-ui="v2"] .desktop-app {
  background: var(--bg);
}

/* ── Sidebar ── */
[data-ui="v2"] .sidebar {
  width: var(--sidebar-w);
  background: var(--paper-2);
  border-right: 1px solid var(--line);
  padding: 20px 12px;
  gap: 2px;
}

/* Brand block at the top of the sidebar */
[data-ui="v2"] .sb-logo {
  height: auto;
  padding: 6px 8px 18px;
  border-bottom: none;
  margin-bottom: 0;
  gap: 12px;
}
/* Replace the gradient + "Y" text with the real icon PNG */
[data-ui="v2"] .sb-logo-icon {
  width: 36px;
  height: 36px;
  border-radius: 11px;
  background:
    url('/static/icon-192.png') center center / cover no-repeat,
    var(--teal);
  font-size: 0;            /* hide the legacy "Y" text content */
  color: transparent;
  box-shadow: none;
  flex-shrink: 0;
}
[data-ui="v2"] .sb-logo-name {
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.015em;
  color: var(--ink);
  text-transform: lowercase;
}

/* Nav items */
[data-ui="v2"] .sb-nav { padding: 4px 4px; gap: 2px; }
[data-ui="v2"] .sb-item {
  padding: 9px 12px;
  border-radius: var(--r-md);
  font-size: 13.5px;
  font-weight: 500;
  color: var(--ink-soft);
  gap: 11px;
  background: transparent;
  border: 1px solid transparent;
  transition: background 0.12s ease, color 0.12s ease, box-shadow 0.12s ease;
}
[data-ui="v2"] .sb-item:not(.sb-active):hover {
  background: var(--paper);
  color: var(--ink);
}
[data-ui="v2"] .sb-item.sb-active {
  background: var(--paper);
  color: var(--ink);
  font-weight: 600;
  box-shadow: var(--shadow-1), inset 0 0 0 1px var(--line);
}
[data-ui="v2"] .sb-item.sb-active .sb-icon { color: var(--teal); }
[data-ui="v2"] .sb-icon { color: var(--ink-2); width: 22px; }
[data-ui="v2"] .sb-icon svg { width: 22px; height: 22px; }

/* Sources label + connected pills */
[data-ui="v2"] .sb-sources-label {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-3);
  padding: 14px 12px 6px;
}
[data-ui="v2"] .sb-sources { padding: 0 4px; gap: 4px; display: flex; flex-direction: column; }
[data-ui="v2"] .sb-src-item {
  padding: 8px 10px;
  border-radius: var(--r-md);
  background: var(--paper);
  border: 1px solid var(--line);
  gap: 8px;
}
[data-ui="v2"] .sb-src-name {
  font-size: 12px;
  font-weight: 500;
  color: var(--ink-soft);
}

/* ── Connected-sources badges in the sidebar (.sb-src-badge) ──
   app.js emits these — paper-card pill with a brand-coloured dot.
   Override the v1 `background: #fff1eb / #ebf5ff` tinted backgrounds with
   the cleaner v2 pattern: paper bg + line border + ink-soft text + a
   small brand-coloured dot. */
[data-ui="v2"] .sb-src-badge {
  display: flex !important;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: var(--r-md);
  background: var(--paper) !important;
  border: 1px solid var(--line);
  color: var(--ink-soft) !important;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  box-shadow: var(--shadow-1);
  margin: 0;
}
[data-ui="v2"] .sb-src-badge .sb-src-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
  opacity: 1;
}
[data-ui="v2"] .sb-src-badge.strava .sb-src-dot { background: var(--strava); }
[data-ui="v2"] .sb-src-badge.garmin .sb-src-dot { background: var(--garmin); }
/* Google Health uses YUHA's GH brand green — same #34a853 used on the
   activity-source pill and the Sources card brand mark, so users see the
   same colour everywhere a GH-sourced thing appears. */
[data-ui="v2"] .sb-src-badge.google .sb-src-dot { background: var(--google); }
[data-ui="v2"] .sb-src-badge.active .sb-src-dot { background: var(--teal); }
[data-ui="v2"] .sb-src-badge.inactive .sb-src-dot { background: var(--ink-3); }
[data-ui="v2"] .sb-src-none {
  font-size: 11.5px;
  color: var(--ink-3);
  padding: 6px 10px;
}

/* Bottom — me card */
[data-ui="v2"] .sb-bottom {
  padding: 14px 4px 0;
  border-top: 1px solid var(--line);
  gap: 8px;
}
[data-ui="v2"] .sb-user {
  padding: 10px;
  border-radius: var(--r-lg);
  background: var(--paper);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-1);
  gap: 10px;
}
[data-ui="v2"] .sb-user:hover { background: var(--paper); border-color: var(--line-2); }
[data-ui="v2"] .sb-avatar {
  width: 32px;
  height: 32px;
  border-radius: var(--r-md);
  background: var(--teal);
  color: #fff;
  font-size: 13px;
  font-weight: 600;
}
[data-ui="v2"] .sb-user-name { font-size: 13px; font-weight: 600; color: var(--ink); }
[data-ui="v2"] .sb-user-sub  { font-size: 11px; color: var(--ink-2); }

[data-ui="v2"] .sb-signout-btn {
  margin: 0 4px;
  padding: 9px 12px;
  border-radius: var(--r-md);
  background: transparent;
  border: 1px solid var(--line);
  color: var(--ink-2);
  font-size: 12px;
  font-weight: 600;
  transition: background 0.12s ease, border-color 0.12s ease, color 0.12s ease;
}
[data-ui="v2"] .sb-signout-btn:hover {
  background: var(--paper);
  border-color: var(--line-2);
  color: var(--ink);
}

/* ── Top nav ── */
[data-ui="v2"] .top-nav {
  height: var(--topbar-h);
  padding: 0 24px;
  background: rgba(250, 250, 248, 0.85);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(236,236,234,0.7);
}
[data-ui="v2"] .top-nav-page {
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--ink);
}
[data-ui="v2"] .top-nav-right { gap: 8px; }
[data-ui="v2"] .top-nav-sync {
  font-size: 12px;
  font-weight: 500;
  color: var(--ink-2);
  padding: 5px 11px;
  border-radius: var(--r-pill);
  background: var(--paper);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-1);
}
[data-ui="v2"] .top-nav-sync .sync-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--teal);
}
[data-ui="v2"] .top-nav-divider {
  width: 1px; height: 20px;
  background: var(--line);
  margin: 0 6px;
}
[data-ui="v2"] .top-nav-avatar {
  width: 32px; height: 32px;
  border-radius: var(--r-md);
  background: var(--teal);
  color: #fff;
  font-size: 13px; font-weight: 600;
  border: none;
  box-shadow: var(--shadow-1);
}
[data-ui="v2"] .top-nav-avatar:hover { border: none; box-shadow: var(--shadow-2); }

/* Mobile menu button (left of top nav) */
[data-ui="v2"] .mob-menu-btn {
  width: 36px; height: 36px;
  border-radius: var(--r-md);
  border: 1px solid var(--line);
  background: var(--paper);
  color: var(--ink-2);
}
[data-ui="v2"] .mob-menu-btn:hover { background: var(--paper-2); color: var(--ink); }

/* Tier pill */
[data-ui="v2"] .tier-pill {
  padding: 5px 11px;
  border-radius: var(--r-pill);
  background: var(--paper);
  border: 1px solid var(--line);
  font-size: 12px;
  font-weight: 500;
  color: var(--ink-soft);
  box-shadow: var(--shadow-1);
}
/* Variant overrides. The base rule above is (0,2,0) and outweighs the v1
   variant classes (0,1,0), so without these the premium pill rendered
   white text on a white background (blank). Restore them at higher
   specificity. */
[data-ui="v2"] .tier-pill.tier-pill-premium {
  background: linear-gradient(135deg, #14b8a6, #0f766e);
  border: 0;
  color: #fff;
  box-shadow: 0 2px 8px rgba(13,148,136,.28);
}
[data-ui="v2"] .tier-pill.tier-pill-warn { border-color: #f59e0b; }
[data-ui="v2"] .tier-pill.tier-pill-over { border-color: #dc2626; background: #fef2f2; }

/* ── Mobile bottom-nav (`.mob-tabbar` + `.mob-tab`) ── */
[data-ui="v2"] .mob-tabbar {
  background: rgba(255,255,255,0.96);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-top: 1px solid var(--line);
  padding: 6px 4px calc(6px + env(safe-area-inset-bottom)) 4px;
}
[data-ui="v2"] .mob-tab {
  border-radius: var(--r-md);
  color: var(--ink-2);
  font-size: 10px;
  font-weight: 600;
  min-height: 52px;
}
[data-ui="v2"] .mob-tab.mob-active,
[data-ui="v2"] .mob-tab.active { color: var(--teal); }
[data-ui="v2"] .mob-tab .mob-tab-icon svg { width: 26px; height: 26px; }
[data-ui="v2"] .mob-tab-icon svg { width: 26px; height: 26px; }


/* ═══════════════════════════════════════════════════════════════════════
   STEP 3 — Pre-auth (#auth-overlay) markup is replaced wholesale by
   /static/v2/integrate.js with the exact v2 mockup structure (.l-nav,
   .l-shell, .l-h1, .l-preview, .l-mini, .l-chat-hero, .s-card etc.).

   The CSS below is taken VERBATIM from /static/v2/landing.html and
   /static/v2/signin.html — same selectors, same values. Already scoped
   under [data-ui="v2"], so nothing leaks to v1.
   ═══════════════════════════════════════════════════════════════════════ */

/* When v2 takes over the pre-auth screen, hide the v1 page-background
   styling that #auth-overlay carried, since we set the body/page bg in
   the v2 rules below. The auth-overlay container itself stays as the
   positioned shell. */
[data-ui="v2"] #auth-overlay {
  background: transparent;
  flex-direction: column;
  overflow-y: auto;
  display: flex;
  align-items: stretch;
}
[data-ui="v2"] #auth-overlay .auth-left,
[data-ui="v2"] #auth-overlay .auth-right { display: none; }   /* old panels hidden — v2 root replaces them */

/* The legacy .auth-view container had max-width: 360px and flex-column
   centering — that's what squished the v2 grid into a 360px column.
   Reset all the v1 layout rules so .l-shell can use the full width. */
[data-ui="v2"] #auth-overlay .auth-view {
  max-width: none;
  width: 100%;
  flex: none;
  display: block;
  justify-content: initial;
  align-items: initial;
}
[data-ui="v2"] #auth-overlay .auth-view.hidden { display: none !important; }
[data-ui="v2"] #auth-overlay .auth-logo-fixed { max-width: none; }

/* Background gradients for the pre-auth pages */
[data-ui="v2"] #auth-overlay,
[data-ui="v2"].pre-auth body {
  background:
    radial-gradient(ellipse 1100px 600px at 90% -200px, rgba(13,148,136,0.14) 0%, transparent 55%),
    radial-gradient(ellipse 800px 480px at -10% 120%, rgba(124,92,255,0.08) 0%, transparent 60%),
    var(--bg);
}

/* ─── Top nav (.l-nav, .l-brand, .l-brand-mark, .l-brand-name) ─── */
[data-ui="v2"] .l-nav {
  max-width: 1280px;
  margin: 0 auto;
  padding: 28px 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  width: 100%;
}
[data-ui="v2"] .l-brand {
  display: flex; align-items: center; gap: 14px;
  cursor: pointer;
  text-decoration: none;
  background: none;
  border: none;
  padding: 0;
  font-family: inherit;
}
[data-ui="v2"] .l-brand-mark {
  width: 52px; height: 52px;
  border-radius: 16px;
  flex: none;
  background: transparent;
  box-shadow: 0 6px 16px -4px rgba(13,148,136,0.35);
  overflow: hidden;
}
[data-ui="v2"] .l-brand-mark img {
  width: 100%; height: 100%; border-radius: inherit;
  object-fit: cover; display: block;
}
[data-ui="v2"] .l-brand-name {
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--ink);
  line-height: 1;
}
[data-ui="v2"] .l-nav-right { display: flex; align-items: center; gap: 8px; }
[data-ui="v2"] .l-nav-right .btn { padding: 10px 18px; font-size: 14px; }

/* ─── Hero shell (.l-shell, .l-left) ─── */
[data-ui="v2"] .l-shell {
  max-width: 1280px;
  margin: 0 auto;
  padding: 48px 40px 96px;
  display: grid;
  grid-template-columns: minmax(420px, 1.1fr) minmax(0, 1fr);
  gap: 80px;
  align-items: center;
  min-height: calc(100vh - 108px);
  width: 100%;
}
[data-ui="v2"] .l-shell.l-shell-signin {
  /* Form card is the primary surface — give it slightly more width
     and pin it to the top so a tall right-side preview can't visually
     dominate. align-items:start lets the columns size to their own
     content instead of stretching the form card vertically.
     justify-content:space-between pushes the right column to the
     opposite edge so any extra horizontal space falls between the
     two cards instead of at the far right. */
  grid-template-columns: minmax(420px, 540px) minmax(0, 460px);
  justify-content: space-between;
  gap: 96px;
  align-items: start;
  padding: 96px 40px 96px;
}
[data-ui="v2"] .l-shell.l-shell-signin .l-right {
  max-width: 460px;
  align-self: start;
}

[data-ui="v2"] .l-left { max-width: 560px; }

[data-ui="v2"] .l-h1 {
  font-size: 72px;
  font-weight: 700;
  line-height: 1.02;
  letter-spacing: -0.035em;
  color: var(--ink);
  margin: 0 0 24px;
}
[data-ui="v2"] .l-h1 .accent {
  background: linear-gradient(180deg, var(--teal-deep) 0%, var(--teal) 60%, #2dd4bf 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: var(--teal-deep);
}
[data-ui="v2"] .l-lede {
  font-size: 20px;
  line-height: 1.5;
  color: var(--ink-soft);
  max-width: 480px;
  margin: 0 0 40px;
  font-weight: 400;
}
[data-ui="v2"] .l-ctas {
  display: flex; gap: 12px; flex-wrap: wrap;
  margin-bottom: 32px;
}
[data-ui="v2"] .l-ctas .btn { padding: 16px 26px; font-size: 15px; }
[data-ui="v2"] .l-ctas .btn.primary {
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.30),
    inset 0 -1px 0 rgba(0,0,0,0.18),
    0 8px 20px -4px rgba(13,148,136,0.45);
}
[data-ui="v2"] .l-trust {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  font-size: 13px;
  color: var(--ink-2);
}
[data-ui="v2"] .l-trust-sep { width: 4px; height: 4px; border-radius: 50%; background: var(--ink-3); }

/* Hero three-bullet stack (replaced the trust line 2026-05-29).
   Each bullet is icon-on-left + bold lead + body copy. Kept tight so the
   hero stays above-the-fold on common laptop heights. */
[data-ui="v2"] .l-bullets {
  list-style: none;
  margin: 28px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
  max-width: 560px;
}
[data-ui="v2"] .l-bullets li {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  font-size: 15px;
  line-height: 1.5;
  color: var(--ink-2);
}
[data-ui="v2"] .l-bullets li strong {
  color: var(--ink);
  font-weight: 600;
}
[data-ui="v2"] .l-bullet-icon {
  flex: 0 0 auto;
  font-size: 18px;
  line-height: 1.4;
  width: 28px;
  text-align: center;
}

/* ─── Right column (.l-right) ─── */
[data-ui="v2"] .l-right {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 14px;
  width: 100%;
  max-width: 500px;
  margin: 0 auto;
  min-width: 0;
}

/* Big readiness preview */
[data-ui="v2"] .l-preview {
  width: 100%;
  background:
    radial-gradient(ellipse 480px 260px at 100% 0%, rgba(13,148,136,0.22) 0%, transparent 55%),
    radial-gradient(ellipse 320px 180px at 0% 100%, rgba(124,92,255,0.14) 0%, transparent 60%),
    linear-gradient(160deg, #effbf6 0%, #ffffff 60%, #fffaf0 100%);
  border: 1px solid #b9e8df;
  border-radius: 28px;
  padding: 28px;
  box-shadow:
    0 1px 2px rgba(15,26,22,0.04),
    0 16px 40px -10px rgba(13,148,136,0.22),
    0 32px 80px -20px rgba(15,26,22,0.18),
    inset 0 1px 0 rgba(255,255,255,0.9);
  position: relative;
  overflow: hidden;
}
[data-ui="v2"] .l-preview::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px;
  background: linear-gradient(90deg, var(--teal-deep), var(--teal), #2dd4bf, var(--plum));
}
[data-ui="v2"] .l-preview-top {
  display: flex; align-items: center; justify-content: space-between;
  font-size: 12px; font-weight: 600;
  color: var(--ink-2);
  margin-bottom: 24px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
[data-ui="v2"] .l-preview-top .when {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px;
  border-radius: var(--r-pill);
  background: rgba(255,255,255,0.7);
  border: 1px solid rgba(13,148,136,0.18);
  color: var(--teal-deep);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  backdrop-filter: blur(6px);
}
[data-ui="v2"] .l-preview-row {
  display: flex; align-items: center; gap: 24px;
}
[data-ui="v2"] .l-ring {
  position: relative;
  width: 140px; height: 140px;
  flex: none;
  display: grid; place-items: center;
}
[data-ui="v2"] .l-ring svg {
  position: absolute; inset: 0; width: 100%; height: 100%;
  transform: rotate(-90deg);
}
[data-ui="v2"] .l-ring-num {
  font-family: var(--font-num);
  font-feature-settings: 'tnum' 1;
  font-weight: 700;
  font-size: 56px;
  line-height: 1;
  letter-spacing: -0.04em;
  background: linear-gradient(180deg, var(--teal-deep) 0%, var(--teal) 70%, #2dd4bf 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: var(--teal-deep);
  z-index: 1;
}
[data-ui="v2"] .l-ring-denom {
  position: absolute; bottom: 28px;
  font-size: 11px; font-weight: 600; color: var(--ink-2);
  z-index: 1;
}
[data-ui="v2"] .l-preview-info { flex: 1; min-width: 0; }
[data-ui="v2"] .l-preview-info .verdict {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 12px;
  border-radius: var(--r-pill);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: linear-gradient(135deg, #ccfbf1, #a7f3d8);
  color: var(--teal-deep);
  border: 1px solid rgba(13,148,136,0.20);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.6),
    0 1px 2px rgba(13,148,136,0.10);
  margin-bottom: 10px;
}
[data-ui="v2"] .l-preview-info .verdict .dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: currentColor;
}
[data-ui="v2"] .l-preview-info h3 {
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin: 4px 0 4px;
  line-height: 1.3;
}
[data-ui="v2"] .l-preview-info p {
  font-size: 13px;
  line-height: 1.5;
  color: var(--ink-2);
  margin: 0;
}

/* Smaller supporting cards (.l-mini variants) */
[data-ui="v2"] .l-mini {
  background: linear-gradient(180deg, #ffffff 0%, #fcfcfa 100%);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  padding: 14px 16px;
  box-shadow: var(--shadow-1), var(--bevel-card);
}
[data-ui="v2"] .l-mini-eyebrow {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-2);
  display: flex; align-items: center; gap: 6px;
  margin-bottom: 10px;
}
[data-ui="v2"] .l-brief-row {
  display: flex; gap: 10px; align-items: flex-start;
  padding: 8px 0;
}
[data-ui="v2"] .l-brief-row + .l-brief-row { border-top: 1px solid var(--line); }
[data-ui="v2"] .l-brief-row .em { font-size: 16px; line-height: 1.2; flex: none; }
[data-ui="v2"] .l-brief-row .txt { font-size: 13px; line-height: 1.4; color: var(--ink-soft); }
[data-ui="v2"] .l-brief-row .txt b { color: var(--ink); font-weight: 600; }

[data-ui="v2"] .l-insight {
  background: linear-gradient(160deg, #f5f3ff 0%, #ffffff 70%, #fafaf8 100%);
  border-color: #d9d0ff;
}
[data-ui="v2"] .l-insight-tag {
  display: inline-block;
  padding: 3px 8px;
  border-radius: 6px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: var(--plum-soft);
  color: #5b3df0;
  border: 1px solid #d9d0ff;
}
[data-ui="v2"] .l-insight h3 {
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.005em;
  color: var(--ink);
  margin: 8px 0 0;
  line-height: 1.35;
}

[data-ui="v2"] .l-chat {
  background: linear-gradient(180deg, #ffffff 0%, #fcfcfa 100%);
  padding: 14px 16px;
  display: flex; flex-direction: column; gap: 10px;
}
[data-ui="v2"] .l-chat-msg { display: flex; gap: 14px; align-items: flex-start; max-width: 88%; }
[data-ui="v2"] .l-chat-msg.from-me { align-self: flex-end; flex-direction: row-reverse; }
[data-ui="v2"] .l-chat-av {
  width: 26px; height: 26px;
  border-radius: 8px;
  flex: none;
  display: grid; place-items: center;
  color: #fff;
  font-size: 12px;
  font-weight: 700;
}
[data-ui="v2"] .l-chat-av.yuha {
  background: linear-gradient(160deg, var(--teal-2), var(--teal-deep));
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.25), inset 0 -1px 0 rgba(0,0,0,0.18);
}
[data-ui="v2"] .l-chat-av.me {
  background: linear-gradient(160deg, #9747ff, #6a2ee0);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.25), inset 0 -1px 0 rgba(0,0,0,0.18);
}
[data-ui="v2"] .l-chat-bubble {
  padding: 9px 12px;
  border-radius: 14px;
  font-size: 13px;
  line-height: 1.45;
  box-shadow: var(--shadow-1);
}
[data-ui="v2"] .l-chat-msg.from-yuha .l-chat-bubble {
  background: var(--paper-2);
  border: 1px solid var(--line);
  color: var(--ink-soft);
  border-bottom-left-radius: 5px;
}
[data-ui="v2"] .l-chat-msg.from-yuha .l-chat-bubble b { color: var(--ink); font-weight: 600; }
[data-ui="v2"] .l-chat-msg.from-me .l-chat-bubble {
  background: linear-gradient(180deg, var(--teal-2) 0%, var(--teal) 100%);
  color: #fff;
  border-bottom-right-radius: 5px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.25), 0 4px 10px -2px rgba(13,148,136,0.30);
}

/* ─── SIGN-IN form card (.s-card, .s-eyebrow, .s-h1 …) ─── */
[data-ui="v2"] .s-card {
  background: linear-gradient(180deg, #ffffff 0%, #fcfcfa 100%);
  border: 1px solid var(--line);
  border-radius: 28px;
  padding: 44px 40px;
  box-shadow:
    0 1px 2px rgba(15,26,22,0.04),
    0 16px 40px -10px rgba(15,26,22,0.10),
    0 32px 80px -20px rgba(15,26,22,0.18),
    inset 0 1px 0 rgba(255,255,255,0.9);
  position: relative;
  overflow: hidden;
}
[data-ui="v2"] .s-card::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px;
  background: linear-gradient(90deg, var(--teal-deep), var(--teal), #2dd4bf, var(--plum));
}
[data-ui="v2"] .s-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: var(--r-pill);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  background: var(--teal-soft);
  color: var(--teal-deep);
  border: 1px solid #a7f3d8;
  margin-bottom: 16px;
}
[data-ui="v2"] .s-eyebrow .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--teal); }
[data-ui="v2"] .s-h1 {
  font-size: 44px;
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.05;
  color: var(--ink);
  margin: 0 0 12px;
}
[data-ui="v2"] .s-h1 .accent {
  background: linear-gradient(180deg, var(--teal-deep) 0%, var(--teal) 60%, #2dd4bf 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: var(--teal-deep);
}
[data-ui="v2"] .s-sub {
  font-size: 15px;
  color: var(--ink-soft);
  line-height: 1.5;
  margin: 0 0 32px;
}
[data-ui="v2"] .s-form { display: flex; flex-direction: column; gap: 16px; }
[data-ui="v2"] .s-form .field input {
  padding: 14px 16px;
  font-size: 15px;
  width: 100%;
  border-radius: var(--r-md);
  border: 1px solid var(--line);
  background: var(--paper);
  color: var(--ink);
  font-family: inherit;
  transition: border-color 0.12s ease, box-shadow 0.12s ease;
  outline: none;
}
[data-ui="v2"] .s-form .field input:focus {
  border-color: var(--teal);
  box-shadow: var(--ring-focus);
}
[data-ui="v2"] .s-form .field input::placeholder { color: var(--ink-3); }
[data-ui="v2"] .s-form .field label {
  font-size: 12px;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 6px;
  display: block;
}
[data-ui="v2"] .s-row-end { display: flex; justify-content: flex-end; }
[data-ui="v2"] .s-link {
  font-size: 13px; font-weight: 600;
  color: var(--teal-deep); text-decoration: none; cursor: pointer;
}
[data-ui="v2"] .s-link:hover { color: var(--teal); }
[data-ui="v2"] .s-form .btn.primary {
  padding: 16px 24px;
  font-size: 15px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.30),
    inset 0 -1px 0 rgba(0,0,0,0.18),
    0 8px 20px -4px rgba(13,148,136,0.45);
}
[data-ui="v2"] .s-foot {
  margin-top: 28px;
  padding-top: 22px;
  border-top: 1px solid var(--line);
  font-size: 13.5px;
  color: var(--ink-2);
  text-align: center;
}
[data-ui="v2"] .s-foot .s-link { margin-left: 4px; }

/* Auth-error / auth-success blocks (re-used inside the v2 form card) */
[data-ui="v2"] .auth-error {
  background: var(--rose-soft);
  color: #991b1b;
  border: 1px solid #fecaca;
  border-radius: var(--r-md);
  padding: 10px 14px;
  font-size: 13px;
  margin-bottom: 6px;
  display: none;
}
[data-ui="v2"] .auth-error.show { display: block; }
[data-ui="v2"] .auth-success {
  background: var(--teal-tint);
  color: var(--teal-deep);
  border: 1px solid var(--teal-soft);
  border-radius: var(--r-md);
  padding: 10px 14px;
  font-size: 13px;
}

/* Chat-hero on the right of sign-in (preview only — not interactive) */
[data-ui="v2"] .l-chat-hero {
  width: 100%;
  background:
    radial-gradient(ellipse 480px 260px at 100% 0%, rgba(13,148,136,0.20) 0%, transparent 55%),
    radial-gradient(ellipse 320px 180px at 0% 100%, rgba(124,92,255,0.14) 0%, transparent 60%),
    linear-gradient(160deg, #effbf6 0%, #ffffff 60%, #fffaf0 100%);
  border: 1px solid #b9e8df;
  border-radius: 28px;
  padding: 28px 28px 18px;
  box-shadow:
    0 1px 2px rgba(15,26,22,0.04),
    0 16px 40px -10px rgba(13,148,136,0.22),
    0 32px 80px -20px rgba(15,26,22,0.18),
    inset 0 1px 0 rgba(255,255,255,0.9);
  position: relative;
  overflow: hidden;
}
[data-ui="v2"] .l-chat-hero::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px;
  background: linear-gradient(90deg, var(--teal-deep), var(--teal), #2dd4bf, var(--plum));
}
[data-ui="v2"] .l-chat-top {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 18px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-size: 12px; font-weight: 600; color: var(--ink-2);
}
[data-ui="v2"] .l-chat-top .when {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px;
  border-radius: var(--r-pill);
  background: rgba(255,255,255,0.7);
  border: 1px solid rgba(13,148,136,0.18);
  color: var(--teal-deep);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
}
[data-ui="v2"] .l-chat-stream {
  display: flex; flex-direction: column; gap: 12px;
}
[data-ui="v2"] .l-chat-hero .l-chat-msg {
  display: flex; gap: 10px; align-items: flex-start;
  max-width: 88%;
}
[data-ui="v2"] .l-chat-hero .l-chat-msg.from-me {
  align-self: flex-end;
  flex-direction: row-reverse;
}
[data-ui="v2"] .l-chat-hero .l-chat-av {
  width: 30px; height: 30px;
  border-radius: 10px;
}
[data-ui="v2"] .l-chat-hero .l-chat-bubble {
  padding: 11px 14px;
  border-radius: 16px;
  font-size: 13.5px;
  line-height: 1.5;
}
[data-ui="v2"] .l-chat-hero .l-chat-msg.from-yuha .l-chat-bubble {
  background: rgba(255,255,255,0.85);
  border: 1px solid var(--line);
  color: var(--ink-soft);
  border-bottom-left-radius: 6px;
  backdrop-filter: blur(6px);
}
[data-ui="v2"] .l-chat-hero .l-chat-msg.from-me .l-chat-bubble {
  background: linear-gradient(180deg, var(--teal-2) 0%, var(--teal) 100%);
  color: #fff;
  border-bottom-right-radius: 6px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.25), 0 6px 14px -4px rgba(13,148,136,0.40);
}
[data-ui="v2"] .l-chat-data {
  margin-top: 8px;
  padding: 10px 12px;
  background: var(--paper-2);
  border: 1px solid var(--line);
  border-radius: 10px;
  display: flex; align-items: center; gap: 10px;
}
[data-ui="v2"] .l-chat-data-ico {
  width: 32px; height: 32px;
  border-radius: 8px;
  flex: none;
  display: grid; place-items: center;
  color: #fff;
  background: linear-gradient(160deg, var(--teal-2), var(--teal));
}
[data-ui="v2"] .l-chat-data-info { flex: 1; min-width: 0; }
[data-ui="v2"] .l-chat-data-info .nm { font-size: 12.5px; font-weight: 600; color: var(--ink); }
[data-ui="v2"] .l-chat-data-info .meta { font-size: 11px; color: var(--ink-2); margin-top: 1px; }

/* Compact readiness mini under chat-hero */
[data-ui="v2"] .l-readiness-mini {
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: 14px;
  align-items: center;
}
[data-ui="v2"] .l-rmini-ring {
  position: relative; width: 64px; height: 64px;
  display: grid; place-items: center;
}
[data-ui="v2"] .l-rmini-ring svg {
  position: absolute; inset: 0; width: 100%; height: 100%;
  transform: rotate(-90deg);
}
[data-ui="v2"] .l-rmini-ring .num {
  font-family: var(--font-num);
  font-feature-settings: 'tnum' 1;
  font-weight: 700;
  font-size: 22px;
  letter-spacing: -0.025em;
  color: var(--teal-deep);
  z-index: 1;
}
[data-ui="v2"] .l-readiness-mini .info .verdict {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 9px;
  border-radius: var(--r-pill);
  font-size: 10px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  background: linear-gradient(135deg, #ccfbf1, #a7f3d8);
  color: var(--teal-deep);
  border: 1px solid rgba(13,148,136,0.20);
}
[data-ui="v2"] .l-readiness-mini .info .verdict .dot { width: 5px; height: 5px; border-radius: 50%; background: currentColor; }
[data-ui="v2"] .l-readiness-mini .info .ttl {
  font-size: 13.5px; font-weight: 600;
  color: var(--ink); margin-top: 6px;
  line-height: 1.35;
}

/* Footer (.l-foot) */
[data-ui="v2"] .l-foot {
  max-width: 1280px;
  margin: 0 auto;
  padding: 20px 40px 40px;
  display: flex; justify-content: space-between; align-items: center;
  gap: var(--s-3);
  font-size: 12px;
  color: var(--ink-3);
  flex-wrap: wrap;
  width: 100%;
}
[data-ui="v2"] .l-foot a { color: var(--ink-2); text-decoration: none; margin-left: 20px; }
[data-ui="v2"] .l-foot a:hover { color: var(--teal-deep); }
/* Inline email in the copyright string — no extra margin so it stays
   flush against the "·" separator. */
[data-ui="v2"] .l-foot .l-foot-mail { margin-left: 0; }

/* Responsive — pre-auth */
@media (max-width: 1024px) {
  [data-ui="v2"] .l-shell { gap: 56px; padding: 40px 32px 80px; }
  [data-ui="v2"] .l-h1 { font-size: 60px; }
}
@media (max-width: 980px) {
  [data-ui="v2"] .l-shell.l-shell-signin {
    grid-template-columns: 1fr;
    gap: 36px;
    padding: 16px 24px 64px;
    min-height: 0;
  }
  [data-ui="v2"] .l-shell.l-shell-signin .s-card { padding: 36px 28px; }
  [data-ui="v2"] .l-shell.l-shell-signin .l-right { max-width: none; order: 2; }
}
@media (max-width: 820px) {
  [data-ui="v2"] .l-shell {
    grid-template-columns: 1fr;
    gap: 48px;
    padding: 24px 24px 64px;
    min-height: 0;
  }
  [data-ui="v2"] .l-nav { padding: 20px 24px; }
  [data-ui="v2"] .l-h1 { font-size: 44px; }
  [data-ui="v2"] .l-lede { font-size: 17px; margin-bottom: 32px; }
  [data-ui="v2"] .l-right { max-width: none; }
  [data-ui="v2"] .l-preview { padding: 24px; }
  [data-ui="v2"] .l-preview-row { gap: 18px; }
  [data-ui="v2"] .l-ring { width: 120px; height: 120px; }
  [data-ui="v2"] .l-ring-num { font-size: 48px; }
  [data-ui="v2"] .l-foot { padding: 16px 24px 32px; }
}
@media (max-width: 540px) {
  [data-ui="v2"] .s-card { padding: 28px 22px; }
  [data-ui="v2"] .s-h1 { font-size: 32px; }
}
@media (max-width: 480px) {
  [data-ui="v2"] .l-brand-mark { width: 44px; height: 44px; border-radius: 14px; }
  [data-ui="v2"] .l-brand-name { font-size: 22px; }
  [data-ui="v2"] .l-h1 { font-size: 40px; }
  [data-ui="v2"] .l-preview-row { flex-direction: column; align-items: flex-start; }
}


/* ═══════════════════════════════════════════════════════════════════════
   STEP 4 — Chat content (post-auth #viewChat).

   Re-styles the v1 chat surface to match the approved v2 mockup at
   /static/v2/chat.html. CSS-only; app.js renders the same DOM as today
   (.msg-row.user / .msg-row.ai / .av / .bubble / .glass-input / etc.).
   ═══════════════════════════════════════════════════════════════════════ */

/* Page background — drop the teal gradient, use v2 cream */
[data-ui="v2"] #viewChat {
  background: var(--bg);
}
/* Prevent any wide content (chart canvas, embedded data card, table) from
   pushing horizontal scroll on the chat surface. v1 set overflow:hidden on
   #viewChat too — explicit here for clarity. */
[data-ui="v2"] #viewChat,
[data-ui="v2"] #viewChat .chat-wrap,
[data-ui="v2"] #viewChat #messages,
[data-ui="v2"] #viewChat .input-area {
  overflow-x: hidden;
  max-width: 100%;
}
/* Anything embedded inside a bubble (charts, data cards, race intel,
   pending-activity card, route preview, weekly summary, etc.) must never
   exceed bubble width. */
[data-ui="v2"] #viewChat .bubble * {
  max-width: 100%;
}
[data-ui="v2"] #viewChat .bubble canvas,
[data-ui="v2"] #viewChat .bubble svg,
[data-ui="v2"] #viewChat .bubble img,
[data-ui="v2"] #viewChat .bubble table {
  max-width: 100%;
  height: auto;
  display: block;
}
[data-ui="v2"] #viewChat .bubble pre,
[data-ui="v2"] #viewChat .bubble code {
  max-width: 100%;
  white-space: pre-wrap;
  word-break: break-word;
  overflow-wrap: anywhere;
}
[data-ui="v2"] #viewChat .bubble {
  word-break: break-word;
  overflow-wrap: anywhere;
}

/* Composer must always be visible — never let it get pushed below the
   mobile bottom-nav. flex-shrink:0 on the input-area + ensure glass-input
   doesn't squash its bottom row. */
[data-ui="v2"] #viewChat .input-area { flex-shrink: 0; }
[data-ui="v2"] #viewChat .glass-input { flex-shrink: 0; }
[data-ui="v2"] #viewChat .glass-input-bottom { flex-shrink: 0; }

/* Welcome card (shown when no messages yet) */
[data-ui="v2"] #viewChat .welcome {
  text-align: center;
  padding: 36px 24px 24px;
  margin: 8px auto 32px;
  max-width: 640px;
  width: 100%;
}
[data-ui="v2"] #viewChat .welcome-icon {
  font-size: 44px;
  display: inline-grid;
  place-items: center;
  width: 72px;
  height: 72px;
  border-radius: 22px;
  background: linear-gradient(160deg, var(--teal-tint), #ffffff);
  border: 1px solid var(--teal-soft);
  box-shadow:
    0 1px 2px rgba(15,26,22,0.04),
    0 12px 32px -8px rgba(13,148,136,0.20),
    inset 0 1px 0 rgba(255,255,255,0.9);
  margin-bottom: 20px;
}
[data-ui="v2"] #viewChat .welcome h2 {
  font-size: 32px;
  font-weight: 700;
  letter-spacing: -0.025em;
  color: var(--ink);
  line-height: 1.1;
  margin: 0 0 12px;
}
[data-ui="v2"] #viewChat .welcome p {
  font-size: 15px;
  line-height: 1.55;
  color: var(--ink-soft);
  max-width: 460px;
  margin: 0 auto 20px;
}
[data-ui="v2"] #viewChat .welcome .src-chips {
  display: flex;
  gap: 8px;
  justify-content: center;
  flex-wrap: wrap;
  margin: 12px 0 24px;
}
[data-ui="v2"] #viewChat .welcome .src {
  padding: 6px 12px;
  border-radius: var(--r-pill);
  background: var(--paper);
  border: 1px solid var(--line);
  font-size: 12px;
  font-weight: 500;
  color: var(--ink-soft);
  box-shadow: var(--shadow-1);
}
[data-ui="v2"] #viewChat .welcome .src.strava { color: var(--strava); border-color: #ffd0b8; background: #fff5ef; }
[data-ui="v2"] #viewChat .welcome .src.garmin { color: var(--garmin); border-color: #b8dcef; background: #eff7fc; }

/* Message rows + avatars */
[data-ui="v2"] #viewChat #messages {
  padding: 24px 32px 16px;
  max-width: 920px;
  margin: 0 auto;
  width: 100%;
}
[data-ui="v2"] #viewChat .msg-row {
  padding: 6px 0;
  gap: 10px;
}
[data-ui="v2"] #viewChat .av {
  width: 32px;
  height: 32px;
  border-radius: 11px;
  font-size: 13px;
  font-weight: 700;
  margin-top: 2px;
}
[data-ui="v2"] #viewChat .msg-row.ai .av {
  background: linear-gradient(160deg, var(--teal-2), var(--teal-deep));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.25),
    inset 0 -1px 0 rgba(0,0,0,0.18);
  border: none;
}
[data-ui="v2"] #viewChat .msg-row.user .av {
  background: linear-gradient(160deg, #9747ff, #6a2ee0);
  color: #fff;
  border: none;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.25),
    inset 0 -1px 0 rgba(0,0,0,0.18);
}

/* Bubble redesign */
[data-ui="v2"] #viewChat .msg-body { padding: 0 4px; gap: 6px; }
[data-ui="v2"] #viewChat .bubble {
  padding: 13px 18px;
  border-radius: 18px;
  font-size: 14px;
  line-height: 1.55;
  box-shadow: var(--shadow-1);
}
[data-ui="v2"] #viewChat .msg-row.user .bubble {
  background: linear-gradient(180deg, var(--teal-2) 0%, var(--teal) 100%);
  color: #fff;
  border: none;
  border-bottom-right-radius: 6px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.25),
    0 6px 16px -6px rgba(13,148,136,0.40);
  max-width: 78%;
}
[data-ui="v2"] #viewChat .msg-row.user .bubble strong,
[data-ui="v2"] #viewChat .msg-row.user .bubble b { color: #fff; font-weight: 700; }
[data-ui="v2"] #viewChat .msg-row.ai .bubble {
  background: var(--paper);
  border: 1px solid var(--line);
  color: var(--ink-soft);
  border-bottom-left-radius: 6px;
  padding-right: 44px;        /* room for copy button */
  box-shadow: var(--shadow-1);
}
[data-ui="v2"] #viewChat .msg-row.ai .bubble p,
[data-ui="v2"] #viewChat .msg-row.ai .bubble { color: var(--ink-soft); }
[data-ui="v2"] #viewChat .msg-row.ai .bubble strong,
[data-ui="v2"] #viewChat .msg-row.ai .bubble b,
[data-ui="v2"] #viewChat .msg-row.ai .bubble p strong { color: var(--ink); font-weight: 600; }
[data-ui="v2"] #viewChat .msg-row.ai .bubble em { color: var(--ink-2); font-style: italic; }

[data-ui="v2"] #viewChat .bubble-copy-btn {
  background: transparent;
  border: none;
  color: var(--ink-3);
  border-radius: 8px;
  width: 26px;
  height: 26px;
}
[data-ui="v2"] #viewChat .msg-row.ai:hover .bubble-copy-btn,
[data-ui="v2"] #viewChat .bubble-copy-btn:focus-visible { opacity: 1; background: var(--paper-2); color: var(--ink); }

/* Composer redesign */
[data-ui="v2"] #viewChat .input-area {
  background: linear-gradient(to top,
    var(--bg) 60%,
    rgba(250,250,248,0) 100%);
  /* Trimmed bottom padding from 24 → 10 — the 24px combined with
     input-inner's own padding-bottom + hint margin was leaving a
     visible band of empty grey under the composer. */
  padding: 12px 32px 10px;
}
[data-ui="v2"] #viewChat .input-inner {
  max-width: 920px;
  margin: 0 auto;
  width: 100%;
}
[data-ui="v2"] #viewChat .chips-wrapper {
  margin-bottom: 10px;
}
[data-ui="v2"] #viewChat .chips {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
[data-ui="v2"] #viewChat .chips .chip,
[data-ui="v2"] #viewChat .chips > * {
  padding: 7px 12px;
  border-radius: var(--r-pill);
  background: var(--paper);
  border: 1px solid var(--line);
  font-size: 12.5px;
  font-weight: 500;
  color: var(--ink-soft);
  cursor: pointer;
  box-shadow: var(--shadow-1);
  transition: background 0.12s ease, border-color 0.12s ease, color 0.12s ease;
}
[data-ui="v2"] #viewChat .chips .chip:hover,
[data-ui="v2"] #viewChat .chips > *:hover {
  background: var(--teal-tint);
  border-color: var(--teal-soft);
  color: var(--teal-deep);
}

[data-ui="v2"] #viewChat .glass-input {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 20px;
  box-shadow: var(--shadow-2), var(--bevel-card);
  padding: 4px 4px 4px 4px;
  transition: border-color 0.12s ease, box-shadow 0.12s ease;
}
[data-ui="v2"] #viewChat .glass-input:focus-within {
  border-color: var(--teal);
  box-shadow: var(--shadow-2), var(--bevel-card), var(--ring-focus);
}
[data-ui="v2"] #viewChat .glass-input #input {
  background: transparent;
  border: none;
  padding: 12px 12px 8px;
  font-family: inherit;
  font-size: 14px;
  line-height: 1.55;
  color: var(--ink);
  min-height: 78px;
  max-height: 220px;
  resize: none;
  outline: none;
  width: 100%;
}
[data-ui="v2"] #viewChat .glass-input #input::placeholder { color: var(--ink-3); }

[data-ui="v2"] #viewChat .glass-input-bottom {
  padding: 4px 6px 4px 8px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  border-top: 1px solid transparent;
}
[data-ui="v2"] #viewChat .glass-input-bottom .mode-bar {
  display: flex;
  align-items: center;
  gap: 6px;
}

/* + button */
[data-ui="v2"] #viewChat .plus-btn {
  width: 36px; height: 36px;
  border-radius: var(--r-md);
  border: none;
  background: transparent;
  color: var(--ink-2);
  cursor: pointer;
  display: grid;
  place-items: center;
  font-size: 20px;
  font-weight: 500;
  transition: background 0.12s ease, color 0.12s ease;
}
[data-ui="v2"] #viewChat .plus-btn:hover {
  background: var(--paper-2);
  color: var(--ink);
}
[data-ui="v2"] #viewChat .plus-menu {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-3);
  padding: 6px;
  /* No overflow:hidden — the later STEP 23 rule sets z-index/position;
     keeping overflow visible avoids clipping the menu's first item when
     the chat bubble above pushes a stacking context onto it. */
}
[data-ui="v2"] #viewChat .plus-menu-item {
  padding: 9px 12px;
  border-radius: var(--r-md);
  font-size: 13px;
  color: var(--ink-soft);
  display: flex;
  align-items: center;
  gap: 10px;
}
[data-ui="v2"] #viewChat .plus-menu-item:hover { background: var(--paper-2); color: var(--ink); }
[data-ui="v2"] #viewChat .plus-menu-item.plus-menu-danger { color: #991b1b; }
[data-ui="v2"] #viewChat .plus-menu-item.plus-menu-danger:hover { background: var(--rose-soft); }

/* "Ideas" suggestions toggle */
[data-ui="v2"] #viewChat .suggestions-toggle {
  padding: 7px 12px;
  border-radius: var(--r-pill);
  border: 1px solid var(--line);
  background: var(--paper);
  color: var(--ink-soft);
  font-size: 12.5px;
  font-weight: 500;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: inherit;
  box-shadow: var(--shadow-1);
}
[data-ui="v2"] #viewChat .suggestions-toggle:hover {
  background: var(--teal-tint);
  border-color: var(--teal-soft);
  color: var(--teal-deep);
}
[data-ui="v2"] #viewChat .suggestions-toggle .toggle-chevron {
  font-size: 12px;
  color: var(--ink-3);
}

/* Send button */
[data-ui="v2"] #viewChat #send {
  width: 36px; height: 36px;
  border-radius: 12px;
  border: none;
  cursor: pointer;
  display: grid;
  place-items: center;
  background: linear-gradient(180deg, var(--teal-2) 0%, var(--teal) 100%);
  color: #fff;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.25),
    0 6px 14px -4px rgba(13,148,136,0.40);
  transition: background 0.12s ease;
}
[data-ui="v2"] #viewChat #send:hover {
  background: linear-gradient(180deg, var(--teal) 0%, var(--teal-deep) 100%);
}
[data-ui="v2"] #viewChat #send:disabled {
  opacity: 0.4;
  background: var(--ink-3);
  box-shadow: none;
}

/* Keyboard hint under composer */
[data-ui="v2"] #viewChat .hint {
  font-size: 11px;
  color: var(--ink-3);
  text-align: center;
  margin-top: 8px;
}

/* Long-message bubble UX */
[data-ui="v2"] #viewChat .bubble-divider-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  background: transparent;
  border: none;
  padding: 8px 0;
  margin: 12px 0 0;
  font-family: inherit;
  cursor: pointer;
  color: var(--ink-2);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
[data-ui="v2"] #viewChat .bubble-divider-line {
  flex: 1;
  height: 1px;
  background: var(--line);
}
[data-ui="v2"] #viewChat .bubble-divider-text { color: var(--ink-2); }
[data-ui="v2"] #viewChat .bubble-divider-chev { color: var(--ink-3); transition: transform 0.18s ease; }

/* Insight cards on welcome screen */
[data-ui="v2"] #viewChat .insight-cards {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  max-width: 480px;
  margin: 0 auto;
}
[data-ui="v2"] #viewChat .icard {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 14px 16px;
  box-shadow: var(--shadow-1), var(--bevel-card);
  text-align: left;
  cursor: pointer;
  transition: box-shadow 0.18s ease, border-color 0.18s ease;
}
[data-ui="v2"] #viewChat .icard:hover {
  border-color: var(--line-2);
  box-shadow: var(--shadow-2), var(--bevel-card);
}
[data-ui="v2"] #viewChat .icard-skeleton {
  background: linear-gradient(90deg, var(--paper-2) 0%, var(--paper) 50%, var(--paper-2) 100%);
  background-size: 200% 100%;
  animation: v2-skel 1.4s ease-in-out infinite;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  height: 80px;
}
@keyframes v2-skel {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* Mobile spacing — v1 already pushes .desktop-app 60px above the
   #mob-bottom-nav (see .desktop-app { bottom: calc(60px + safe-area) }
   in static/style.css). We just need to tighten the v2 composer so it
   doesn't grow tall and hide the send button. Use v1's 768px breakpoint
   for parity. */
@media (max-width: 768px) {
  [data-ui="v2"] #viewChat #messages { padding: 16px 14px 8px; }
  [data-ui="v2"] #viewChat .input-area { padding: 8px 12px 12px; }
  [data-ui="v2"] #viewChat .input-inner { max-width: 100%; }

  /* Compact composer — match v1's mobile sizing. Textarea grows
     organically up to 140px as the user types. */
  [data-ui="v2"] #viewChat .glass-input {
    border-radius: 16px;
    padding: 4px;
  }
  [data-ui="v2"] #viewChat .glass-input #input {
    min-height: 28px;
    max-height: 140px;
    padding: 10px 12px 6px;
    font-size: 14px;
  }
  [data-ui="v2"] #viewChat .glass-input-bottom {
    padding: 2px 4px 4px 6px;
  }
  [data-ui="v2"] #viewChat .glass-input-bottom .mode-bar {
    flex-wrap: nowrap;
    gap: 4px;
  }

  /* Hide keyboard hint on mobile */
  [data-ui="v2"] #viewChat .hint { display: none; }

  /* Tighter welcome */
  [data-ui="v2"] #viewChat .welcome { padding: 20px 0 16px; max-width: 100%; }
  [data-ui="v2"] #viewChat .welcome-icon { width: 56px; height: 56px; font-size: 32px; border-radius: 18px; margin-bottom: 14px; }
  [data-ui="v2"] #viewChat .welcome h2 { font-size: 22px; }
  [data-ui="v2"] #viewChat .welcome p { font-size: 13.5px; }

  /* Bubble rows fill mobile width */
  [data-ui="v2"] #viewChat .msg-row { max-width: 100%; }
  [data-ui="v2"] #viewChat .msg-row.user .bubble { max-width: 88%; }

  /* Insight cards single-column on small screens */
  [data-ui="v2"] #viewChat .insight-cards { grid-template-columns: 1fr; }
}


/* ═══════════════════════════════════════════════════════════════════════
   STEP 5 — Activities list (#viewActivities) + Activity Detail (.actd-*).

   Mirrors /static/v2/activities.html for the list and the activity-detail
   structure for the detail page. CSS-only; app.js renders the same DOM
   classes (.acts-filters, .acts-chip, .acts-quick-log, .act-card,
   .act-hdr, .act-stats-bar, .act-footer, .actd-hero, .actd-stats, etc.).

   NOTE: km/miles conversion for splits + pace distribution is handled
   in app.js (_actdFmtPace + _distUnit checks). Splits are still computed
   per-km on the backend — fixing that is a separate backend task.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Outer container ─────────────────────────────────────────────────── */
[data-ui="v2"] #viewActivities { background: var(--bg); }
[data-ui="v2"] #viewActivities .acts-scroll {
  padding: 24px 32px 48px;
  max-width: 1180px;
  margin: 0 auto;
  width: 100%;
  overflow-x: hidden;
}

/* ── Filter chips ────────────────────────────────────────────────────── */
[data-ui="v2"] .acts-filters {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: var(--s-4);
}
[data-ui="v2"] .acts-chip {
  padding: 6px 12px;
  border-radius: var(--r-pill);
  border: 1px solid var(--line);
  background: var(--paper);
  color: var(--ink-soft);
  font-size: 12.5px;
  font-weight: 500;
  cursor: pointer;
  font-family: inherit;
  box-shadow: var(--shadow-1);
  transition: background 0.12s ease, border-color 0.12s ease, color 0.12s ease;
}
[data-ui="v2"] .acts-chip:hover {
  background: var(--paper-2);
  border-color: var(--line-2);
  color: var(--ink);
}
[data-ui="v2"] .acts-chip.acts-chip-active {
  background: var(--teal-tint);
  border-color: var(--teal-soft);
  color: var(--teal-deep);
  font-weight: 700;
}
[data-ui="v2"] .acts-chip.acts-chip-active::before {
  content: "";
  display: inline-block;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--teal);
  margin-right: 6px;
  vertical-align: 1px;
}

/* ── Quick-log banner ────────────────────────────────────────────────── */
[data-ui="v2"] .acts-quick-log {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 18px;
  background: linear-gradient(160deg, #fffaeb 0%, #fef3c7 100%);
  border: 1px solid #fde68a;
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-1), var(--bevel-card);
  margin-bottom: var(--s-5);
}
[data-ui="v2"] .acts-quick-log-text {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 13px;
  color: #7a5a2c;
  line-height: 1.45;
}
[data-ui="v2"] .acts-quick-log-text strong { color: #5a3f11; font-weight: 600; }
[data-ui="v2"] .acts-quick-log-ico {
  width: 36px; height: 36px;
  flex: none;
  border-radius: 11px;
  background: linear-gradient(160deg, #fbbf24, #d97706);
  color: #fff;
  display: grid;
  place-items: center;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.20);
  font-size: 16px;
}
[data-ui="v2"] .acts-quick-log-btn {
  padding: 9px 14px;
  border-radius: var(--r-md);
  border: none;
  background: var(--ink);
  color: #fff;
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  flex: none;
  transition: background 0.12s ease;
}
[data-ui="v2"] .acts-quick-log-btn:hover { background: #1f2a26; }

/* ── Activity card ───────────────────────────────────────────────────── */
[data-ui="v2"] .acts-stack {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-top: var(--s-4);
}
[data-ui="v2"] .act-card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-1), var(--bevel-card);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: box-shadow 0.18s ease, border-color 0.18s ease;
}
[data-ui="v2"] .act-card:hover {
  box-shadow: var(--shadow-2), var(--bevel-card);
  border-color: var(--line-2);
}

/* AI summary strip on top of each card */
[data-ui="v2"] .act-summary {
  padding: 12px 18px;
  border-bottom: 1px solid var(--line);
  background: linear-gradient(180deg, #fafffe 0%, #ffffff 100%);
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--ink-soft);
  display: flex;
  gap: 10px;
}
[data-ui="v2"] .act-summary::before {
  content: "✨";
  font-size: 14px;
  flex: none;
  margin-top: 1px;
}
[data-ui="v2"] .act-summary b { color: var(--ink); font-weight: 600; }
[data-ui="v2"] .act-summary-pending {
  color: var(--ink-3);
  font-style: italic;
}

/* Header row */
[data-ui="v2"] .act-hdr {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 18px 12px;
}
[data-ui="v2"] .act-icon {
  width: 36px; height: 36px;
  border-radius: 11px;
  background: linear-gradient(160deg, var(--teal-2), var(--teal));
  color: #fff;
  display: grid;
  place-items: center;
  font-size: 16px;
  flex: none;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.20), inset 0 -1px 0 rgba(0,0,0,0.18);
}
[data-ui="v2"] .act-titles { flex: 1; min-width: 0; }
[data-ui="v2"] .act-title {
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.005em;
  color: var(--ink);
  line-height: 1.25;
}
[data-ui="v2"] .act-meta {
  font-size: 12px;
  color: var(--ink-2);
  margin-top: 2px;
}

/* Source pill (.act-src-pill or rendered from _sourcePill) */
[data-ui="v2"] .act-src-pill {
  padding: 3px 8px;
  border-radius: var(--r-sm);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* Map */
[data-ui="v2"] #viewActivities .act-map {
  position: relative;
  height: 200px;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: linear-gradient(120deg, #e9f0e4, #e0eadb);
}

/* Stats row */
[data-ui="v2"] .act-stats-bar {
  display: flex;
  padding: 14px 18px;
  align-items: center;
}
[data-ui="v2"] .act-stat {
  flex: 1;
  text-align: center;
  min-width: 0;
}
[data-ui="v2"] .act-stat-val {
  font-family: var(--font-num);
  font-feature-settings: 'tnum' 1;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.015em;
  color: var(--ink);
  line-height: 1.1;
}
[data-ui="v2"] .act-stat-lbl {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-2);
  margin-top: 4px;
}
[data-ui="v2"] .act-stat-divider {
  width: 1px;
  height: 28px;
  background: var(--line);
  flex: none;
}

/* Footer */
[data-ui="v2"] .act-footer {
  padding: 10px 16px;
  border-top: 1px solid var(--line);
  background: var(--paper-2);
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}
[data-ui="v2"] .act-footer .act-kudos,
[data-ui="v2"] .act-footer .act-kudos-meta {
  margin-right: auto;
  font-size: 12px;
  color: var(--ink-2);
  align-self: center;
  font-feature-settings: 'tnum' 1;
}
[data-ui="v2"] .act-detail-btn,
[data-ui="v2"] .act-ask-btn {
  padding: 7px 12px;
  border-radius: var(--r-sm);
  border: 1px solid var(--line);
  background: var(--paper);
  color: var(--ink);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  box-shadow: var(--shadow-1);
  transition: background 0.12s ease, border-color 0.12s ease;
}
[data-ui="v2"] .act-detail-btn:hover { background: var(--paper-2); border-color: var(--line-2); }
[data-ui="v2"] .act-ask-btn {
  background: var(--teal);
  border-color: var(--teal);
  color: #fff;
  box-shadow: 0 1px 0 rgba(255,255,255,0.15) inset, var(--shadow-1);
}
[data-ui="v2"] .act-ask-btn:hover { background: var(--teal-deep); border-color: var(--teal-deep); }

/* Load more */
[data-ui="v2"] .acts-loadmore-wrap {
  text-align: center;
  margin-top: var(--s-5);
}
[data-ui="v2"] .acts-loadmore {
  padding: 10px 18px;
  border-radius: var(--r-md);
  border: 1px solid var(--line);
  background: var(--paper);
  color: var(--ink);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  box-shadow: var(--shadow-1);
}
[data-ui="v2"] .acts-loadmore:hover { background: var(--paper-2); border-color: var(--line-2); }


/* ═══════════════════════════════════════════════════════════════════════
   ACTIVITY DETAIL (.actd-*)
   ═══════════════════════════════════════════════════════════════════════ */

/* Hero */
[data-ui="v2"] .actd-hero {
  background:
    radial-gradient(ellipse 540px 280px at 100% 0%, rgba(13,148,136,0.18) 0%, transparent 55%),
    linear-gradient(160deg, #f7fefb 0%, #ffffff 60%, #fffaf0 100%);
  border: 1px solid #b9e8df;
  border-radius: var(--r-2xl);
  padding: 22px 26px;
  box-shadow: var(--shadow-1), var(--bevel-card);
  position: relative;
  overflow: hidden;
}
[data-ui="v2"] .actd-hero::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px;
  background: linear-gradient(90deg, var(--teal-deep), var(--teal), #2dd4bf, var(--plum));
}
[data-ui="v2"] .actd-hero-row {
  display: flex;
  align-items: center;
  gap: 16px;
}
[data-ui="v2"] .actd-sport-ico {
  width: 48px; height: 48px;
  border-radius: 14px;
  background: linear-gradient(160deg, var(--teal-2), var(--teal));
  color: #fff;
  display: grid;
  place-items: center;
  font-size: 22px;
  flex: none;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.20), inset 0 -1px 0 rgba(0,0,0,0.18);
}
[data-ui="v2"] .actd-hero-text { flex: 1; min-width: 0; }
[data-ui="v2"] .actd-title {
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--ink);
  line-height: 1.15;
}
[data-ui="v2"] .actd-meta {
  font-size: 13px;
  color: var(--ink-2);
  margin-top: 4px;
}
[data-ui="v2"] .actd-src-pill {
  padding: 4px 10px;
  border-radius: var(--r-sm);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  background: rgba(255,255,255,0.7);
  border: 1px solid var(--line);
  color: var(--src-c, var(--teal-deep));
  align-self: flex-start;
}
[data-ui="v2"] .actd-kudos {
  font-size: 12px;
  color: var(--ink-2);
  margin-top: 10px;
}

/* AI summary in the activity-detail hero — same content the user sees
   under each card on My Activities, surfaced here for context. Mirrors
   the .act-summary styling but with margins suited to the hero card. */
[data-ui="v2"] .actd-summary {
  margin-top: 14px;
  padding: 12px 16px;
  background: linear-gradient(180deg, #fafffe 0%, #ffffff 100%);
  border: 1px solid var(--line);
  border-radius: 12px;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--ink-soft);
  display: flex;
  gap: 10px;
}
[data-ui="v2"] .actd-summary::before {
  content: "✨";
  font-size: 16px;
  flex: none;
  margin-top: 1px;
}
[data-ui="v2"] .actd-summary b,
[data-ui="v2"] .actd-summary strong { color: var(--ink); font-weight: 600; }

/* Stats grid */
[data-ui="v2"] .actd-stats {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 12px;
  margin-top: var(--s-5);
}
[data-ui="v2"] .actd-stat {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 14px 16px;
  box-shadow: var(--shadow-1), var(--bevel-card);
}
[data-ui="v2"] .actd-stat-lbl {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-2);
}
[data-ui="v2"] .actd-stat-val {
  font-family: var(--font-num);
  font-feature-settings: 'tnum' 1;
  font-weight: 700;
  font-size: 22px;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin-top: 6px;
  line-height: 1.05;
}
[data-ui="v2"] .actd-stat-unit {
  font-weight: 500;
  font-size: 12px;
  color: var(--ink-2);
  margin-left: 3px;
}

/* Section titles */
[data-ui="v2"] .actd-section { margin-top: var(--s-6); }
[data-ui="v2"] .actd-section-title {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-2);
  margin: 0 0 var(--s-3);
}
[data-ui="v2"] .actd-section-sub {
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink-3);
  margin-left: 4px;
}

/* Map container */
[data-ui="v2"] .actd-map {
  height: 280px;
  border-radius: var(--r-xl);
  border: 1px solid var(--line);
  overflow: hidden;
  box-shadow: var(--shadow-1);
}

/* Performance charts grid */
[data-ui="v2"] .actd-charts-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 12px;
}
[data-ui="v2"] .actd-chart-card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 14px 16px;
  box-shadow: var(--shadow-1), var(--bevel-card);
}
[data-ui="v2"] .actd-chart-title {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: -0.005em;
  margin-bottom: 4px;
}
/* Plain-language description below the chart title — explains the chart
   in 1-2 sentences so a non-runner can read it at a glance. */
[data-ui="v2"] .actd-chart-desc {
  font-size: 12px;
  line-height: 1.45;
  color: var(--ink-2);
  margin-bottom: 10px;
}
/* Chart wrap is a hair taller now to make room for the new x/y axis
   titles without squashing the data. */
[data-ui="v2"] .actd-chart-wrap {
  height: 180px;
  position: relative;
}
[data-ui="v2"] .actd-chart-wrap canvas { max-width: 100%; max-height: 100%; }

/* Splits table */
[data-ui="v2"] .actd-splits-wrap {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-1), var(--bevel-card);
  overflow-x: auto;
}
[data-ui="v2"] .actd-splits {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
[data-ui="v2"] .actd-splits thead th {
  text-align: left;
  padding: 12px 16px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-2);
  background: var(--paper-2);
  border-bottom: 1px solid var(--line);
}
[data-ui="v2"] .actd-splits tbody td {
  padding: 10px 16px;
  border-bottom: 1px solid var(--line);
  color: var(--ink-soft);
  font-feature-settings: 'tnum' 1;
}
[data-ui="v2"] .actd-splits tbody tr:last-child td { border-bottom: none; }
[data-ui="v2"] .actd-splits .actd-spl-num {
  color: var(--teal);
  font-weight: 700;
}

/* Pace distribution */
[data-ui="v2"] .actd-pd {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 18px 22px;
  box-shadow: var(--shadow-1), var(--bevel-card);
  display: flex;
  flex-direction: column;
  gap: 14px;
}
[data-ui="v2"] .actd-pd-row { display: flex; flex-direction: column; gap: 6px; }
[data-ui="v2"] .actd-pd-row-top {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  font-size: 12.5px;
}
[data-ui="v2"] .actd-pd-label { font-weight: 500; color: var(--ink); }
[data-ui="v2"] .actd-pd-row.actd-pd-peak .actd-pd-label { font-weight: 700; }
[data-ui="v2"] .actd-pd-unit { font-weight: 500; color: var(--ink-3); margin-left: 2px; }
[data-ui="v2"] .actd-pd-val {
  font-family: var(--font-num);
  font-feature-settings: 'tnum' 1;
  color: var(--ink-2);
}
[data-ui="v2"] .actd-pd-bar {
  height: 14px;
  background: var(--paper-2);
  border: 1px solid var(--line);
  border-radius: 7px;
  overflow: hidden;
}
[data-ui="v2"] .actd-pd-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, #7c5cff, #5b3df0);
  border-radius: 7px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.30);
}
[data-ui="v2"] .actd-pd-row.actd-pd-peak .actd-pd-bar-fill {
  background: linear-gradient(90deg, var(--teal-2), var(--teal-deep));
}

/* HR zones */
[data-ui="v2"] .actd-zones {
  display: flex;
  flex-direction: column;
  gap: 12px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 18px 22px;
  box-shadow: var(--shadow-1), var(--bevel-card);
}
[data-ui="v2"] .actd-zone { display: flex; flex-direction: column; gap: 6px; }
[data-ui="v2"] .actd-zone-row {
  display: flex;
  justify-content: space-between;
  font-size: 12.5px;
}
[data-ui="v2"] .actd-zone-name { font-weight: 600; color: var(--ink); }
[data-ui="v2"] .actd-zone-pct { color: var(--ink-2); font-feature-settings: 'tnum' 1; }
[data-ui="v2"] .actd-zone-bar {
  height: 10px;
  background: var(--paper-2);
  border: 1px solid var(--line);
  border-radius: 5px;
  overflow: hidden;
}
[data-ui="v2"] .actd-zone-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, #16b49c, #d97706);
  border-radius: 5px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.30);
}

/* Training Effect */
[data-ui="v2"] .actd-te-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
}
[data-ui="v2"] .actd-te-tile {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 14px 16px;
  box-shadow: var(--shadow-1), var(--bevel-card);
}
[data-ui="v2"] .actd-te-lbl {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-2);
}
[data-ui="v2"] .actd-te-val {
  font-family: var(--font-num);
  font-feature-settings: 'tnum' 1;
  font-weight: 700;
  font-size: 26px;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin: 6px 0 8px;
  line-height: 1;
}
[data-ui="v2"] .actd-te-of {
  font-weight: 500;
  font-size: 13px;
  color: var(--ink-2);
  margin-left: 3px;
}
[data-ui="v2"] .actd-te-bar {
  height: 8px;
  background: var(--paper-2);
  border: 1px solid var(--line);
  border-radius: 4px;
  overflow: hidden;
}
[data-ui="v2"] .actd-te-bar-fill { height: 100%; border-radius: 4px; }
[data-ui="v2"] .actd-te-bar-fill.aerobic { background: linear-gradient(90deg, var(--teal-2), var(--teal-deep)); }
[data-ui="v2"] .actd-te-bar-fill.anaerobic { background: linear-gradient(90deg, var(--warm), #b45309); }

/* Movement breakdown */
[data-ui="v2"] .actd-movement {
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 18px 22px;
  box-shadow: var(--shadow-1), var(--bevel-card);
}
[data-ui="v2"] .actd-mv { display: flex; flex-direction: column; gap: 6px; }
[data-ui="v2"] .actd-mv-row { display: flex; justify-content: space-between; font-size: 12.5px; }
[data-ui="v2"] .actd-mv-name { color: var(--ink); font-weight: 500; }
[data-ui="v2"] .actd-mv-val { color: var(--ink-2); font-feature-settings: 'tnum' 1; }
[data-ui="v2"] .actd-mv-bar {
  height: 8px;
  background: var(--paper-2);
  border: 1px solid var(--line);
  border-radius: 4px;
  overflow: hidden;
}
[data-ui="v2"] .actd-mv-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--teal-2), var(--teal));
  border-radius: 4px;
}

/* Mobile */
@media (max-width: 768px) {
  [data-ui="v2"] #viewActivities .acts-scroll { padding: 16px 14px 32px; }
  [data-ui="v2"] .acts-quick-log { padding: 12px 14px; flex-wrap: wrap; }
  [data-ui="v2"] .acts-quick-log-text { font-size: 12.5px; }
  [data-ui="v2"] .acts-quick-log-btn { width: 100%; }
  [data-ui="v2"] .act-stats-bar { padding: 12px 14px; }
  [data-ui="v2"] .act-stat-val { font-size: 16px; }
  [data-ui="v2"] .act-footer { padding: 10px 12px; flex-wrap: wrap; }
  [data-ui="v2"] #viewActivities .act-map { height: 160px; }
  [data-ui="v2"] .actd-hero { padding: 18px 16px; }
  [data-ui="v2"] .actd-title { font-size: 20px; }
  [data-ui="v2"] .actd-stats { grid-template-columns: repeat(2, 1fr); }
  [data-ui="v2"] .actd-charts-grid { grid-template-columns: 1fr; }
  [data-ui="v2"] .actd-pd, [data-ui="v2"] .actd-zones, [data-ui="v2"] .actd-movement {
    padding: 14px 16px;
  }
}


/* ── Activities summary card — injected at the top of #viewActivities ── */
[data-ui="v2"] .acts-summary {
  background:
    radial-gradient(ellipse 540px 280px at 100% 0%, rgba(13,148,136,0.18) 0%, transparent 55%),
    linear-gradient(160deg, #f7fefb 0%, #ffffff 60%, #fffaf0 100%);
  border: 1px solid #b9e8df;
  border-radius: var(--r-2xl);
  padding: 24px 28px;
  box-shadow:
    0 1px 2px rgba(15,26,22,0.04),
    0 12px 32px -8px rgba(13,148,136,0.18),
    inset 0 1px 0 rgba(255,255,255,0.9);
  position: relative;
  overflow: hidden;
  margin-bottom: var(--s-5);
  /* .acts-scroll is a flex column with flex-shrink: 1 children by default.
     With many activity cards below, flex squashed the summary to ~38px and
     overflow:hidden clipped the values. flex-shrink: 0 keeps natural size. */
  flex-shrink: 0;
}
/* Same protection for sibling items so they keep their natural height */
[data-ui="v2"] #viewActivities .acts-filters,
[data-ui="v2"] #viewActivities .acts-quick-log,
[data-ui="v2"] #viewActivities .acts-loadmore-wrap {
  flex-shrink: 0;
}
[data-ui="v2"] .acts-summary::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px;
  background: linear-gradient(90deg, var(--teal-deep), var(--teal), #2dd4bf, var(--plum));
}
[data-ui="v2"] .acts-sum-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  align-items: center;
}
[data-ui="v2"] .acts-sum-cell { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
[data-ui="v2"] .acts-sum-cell .lbl {
  font-size: 11px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-2);
}
[data-ui="v2"] .acts-sum-cell .val {
  font-family: var(--font-num);
  font-feature-settings: 'tnum' 1;
  font-weight: 700;
  font-size: 30px;
  line-height: 1.05;
  letter-spacing: -0.025em;
  color: var(--ink);
}
[data-ui="v2"] .acts-sum-cell .val .unit {
  font-size: 13px; font-weight: 500; color: var(--ink-2); margin-left: 3px;
}
[data-ui="v2"] .acts-sum-cell.headline .val {
  background: linear-gradient(180deg, var(--teal-deep), var(--teal) 70%, #2dd4bf);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
  color: var(--teal-deep);
}
[data-ui="v2"] .acts-sum-cell .delta {
  font-size: 11.5px; font-weight: 600;
  color: var(--ink-2);
}
[data-ui="v2"] .acts-sum-cell .delta.up   { color: var(--teal-deep); }
[data-ui="v2"] .acts-sum-cell .delta.down { color: #991b1b; }
[data-ui="v2"] .acts-sum-foot {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid rgba(13,148,136,0.18);
  display: flex; align-items: center; gap: 8px;
  font-size: 13px;
  color: var(--ink-soft);
}
[data-ui="v2"] .acts-sum-foot .em { font-size: 14px; }

/* Mobile — collapse the 4-cell row to 2x2 */
@media (max-width: 768px) {
  [data-ui="v2"] .acts-summary { padding: 18px 18px; }
  [data-ui="v2"] .acts-sum-row { grid-template-columns: 1fr 1fr; gap: 14px 20px; }
  [data-ui="v2"] .acts-sum-cell .val { font-size: 22px; }
  [data-ui="v2"] .acts-sum-foot { font-size: 12.5px; }
}


/* ═══════════════════════════════════════════════════════════════════════
   STEP 6 — Dashboard (#viewDash). Matches /static/v2/dashboard.html.

   v1 → v2 class mapping (markup not changed; CSS retargets):
     .dash-hero-zone / .dash-hero / .hero-greeting / .hero-name / .hero-badge
     .dash-readiness + .drd-* (readiness card)
     .yuha-take (one-liner)
     .dash-metrics + .mc + .mc-bar (4 weekly metric tiles)
     .three-col / .two-col / .one-col + recent activity cards
     .wc-card / .wc-stat-* (Last-7-Days chart cards)
     Goals row from _goalsRowHtml
   ═══════════════════════════════════════════════════════════════════════ */

[data-ui="v2"] #viewDash { background: var(--bg); overflow: hidden; }
[data-ui="v2"] #viewDash .dash-scroll {
  padding: 24px 32px 48px;
  max-width: 1180px;
  margin: 0 auto;
  width: 100%;
  display: flex; flex-direction: column;
  gap: var(--s-4);
  overflow-x: hidden;
}
@media (max-width: 768px) {
  [data-ui="v2"] #viewDash .dash-scroll { padding: 16px 14px 32px; gap: 14px; }
}

/* ── HERO zone — match v2 mockup: ONE unified card containing greeting +
   readiness. v1's markup has two separate elements (.dash-hero +
   .dash-readiness). We make `.dash-hero-zone` the visual card and let the
   inner elements blend in (transparent bg, no own borders/shadows).
   ──────────────────────────────────────────────────────────────────── */
[data-ui="v2"] #viewDash .dash-hero-zone {
  display: flex; flex-direction: column;
  gap: 0;
  background:
    radial-gradient(ellipse 720px 360px at 95% 0%,    rgba(13,148,136,0.20) 0%, transparent 55%),
    radial-gradient(ellipse 480px 280px at -5% 100%,  rgba(124,92,255,0.12) 0%, transparent 60%),
    linear-gradient(160deg, #effbf6 0%, #ffffff 55%, #fffaf0 100%);
  border: 1px solid #b9e8df;
  border-radius: 24px;
  padding: 18px 22px 20px;
  margin-bottom: 0;
  isolation: auto;
  color: var(--ink);
  overflow: hidden;
  box-shadow:
    0 1px 2px rgba(15,26,22,0.04),
    0 12px 32px -8px rgba(13,148,136,0.18),
    inset 0 1px 0 rgba(255,255,255,0.9);
  position: relative;
}
[data-ui="v2"] #viewDash .dash-hero-zone::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px;
  background: linear-gradient(90deg, var(--teal-deep), var(--teal), #2dd4bf, var(--plum));
  pointer-events: none;
}
[data-ui="v2"] #viewDash .dash-hero-zone::after {
  content: none;
  background: none;
}

/* Greeting block at the top of the unified card */
[data-ui="v2"] #viewDash .dash-hero-zone .dash-hero {
  background: transparent !important;
  border: none;
  border-radius: 0;
  padding: 0;
  margin-bottom: 10px;
  box-shadow: none;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}
[data-ui="v2"] #viewDash .dash-hero-zone .dash-hero::before {
  display: none !important;
}
[data-ui="v2"] #viewDash .dash-hero-zone .dash-hero .hero-left {
  display: flex; flex-direction: column; gap: 6px;
  flex: 1; min-width: 0;
}
[data-ui="v2"] #viewDash .dash-hero-zone .dash-hero .hero-greeting {
  font-size: 13px; font-weight: 500;
  color: var(--ink-2);
  text-shadow: none;
}
[data-ui="v2"] #viewDash .dash-hero-zone .dash-hero .hero-name {
  font-size: 22px; font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--ink);
  text-shadow: none;
  line-height: 1.15;
  margin: 0;
}
[data-ui="v2"] #viewDash .dash-hero-zone .dash-hero .hero-badges {
  display: flex; flex-wrap: wrap; gap: 5px;
  margin-top: 0;
  align-self: flex-start;
  flex-direction: column;
  align-items: flex-end;
}
[data-ui="v2"] #viewDash .dash-hero-zone .dash-hero .hero-badge {
  background: rgba(255,255,255,0.7) !important;
  border: 1px solid rgba(13,148,136,0.18);
  color: var(--teal-deep);
  font-size: 12px; font-weight: 600;
  padding: 5px 11px;
  border-radius: var(--r-pill);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

/* Strip v1's dark-glass treatment on inner elements when zone is paper-bg */
[data-ui="v2"] .dash-hero-zone .dash-readiness .drd-score,
[data-ui="v2"] .dash-hero-zone .dash-readiness .drd-head,
[data-ui="v2"] .dash-hero-zone .dash-readiness .drd-plan,
[data-ui="v2"] .dash-hero-zone .dash-readiness .drd-plan-text,
[data-ui="v2"] .dash-hero-zone .dash-readiness .drd-reco,
[data-ui="v2"] .dash-hero-zone .dash-readiness-building .drd-title,
[data-ui="v2"] .dash-hero-zone .dash-readiness-building .drd-sub {
  color: var(--ink-soft);
}
[data-ui="v2"] .dash-hero-zone .dash-readiness .drd-head { color: var(--ink); }
[data-ui="v2"] .dash-hero-zone .dash-readiness-building .drd-title { color: var(--ink-2); }

/* Score ring background track — light grey, not white */
[data-ui="v2"] .dash-hero-zone .dash-readiness .drd-ring circle:first-of-type {
  stroke: var(--line) !important;
}

/* Action buttons — restore v2 outline/primary look on the paper card */
[data-ui="v2"] .dash-hero-zone .dash-readiness .drd-btn {
  background: var(--paper);
  border: 1px solid var(--line);
  color: var(--ink);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
[data-ui="v2"] .dash-hero-zone .dash-readiness .drd-btn-primary {
  background: var(--teal);
  border-color: var(--teal);
  color: #fff;
}
[data-ui="v2"] .dash-hero-zone .dash-readiness .drd-btn-primary:hover {
  background: var(--teal-deep);
  border-color: var(--teal-deep);
}

/* Greeting card inside the zone — restore v2 paper-gradient bg + accent
   strip (v1's `.dash-hero-zone .dash-hero { background: transparent }` would
   otherwise leave the inner card with no surface). */
[data-ui="v2"] .dash-hero-zone .dash-hero {
  background:
    radial-gradient(ellipse 720px 360px at 95% 0%,    rgba(13,148,136,0.16) 0%, transparent 55%),
    radial-gradient(ellipse 480px 280px at -5% 100%,  rgba(124,92,255,0.10) 0%, transparent 60%),
    linear-gradient(160deg, #effbf6 0%, #ffffff 55%, #fffaf0 100%);
  border: 1px solid #b9e8df;
  border-radius: var(--r-2xl);
  padding: 24px 28px;
  margin-bottom: 0;
  color: var(--ink);
  position: relative;
  overflow: hidden;
}
[data-ui="v2"] .dash-hero-zone .dash-hero::before {
  display: block !important;
  content: "" !important;
  position: absolute !important; left: 0 !important; right: 0 !important; top: 0 !important;
  bottom: auto !important;
  height: 3px !important;
  background: linear-gradient(90deg, var(--teal-deep), var(--teal), #2dd4bf, var(--plum)) !important;
}
[data-ui="v2"] .dash-hero-zone .hero-greeting {
  color: var(--ink-2);
  text-shadow: none;
}
[data-ui="v2"] .dash-hero-zone .hero-name {
  color: var(--ink);
  text-shadow: none;
}
[data-ui="v2"] .dash-hero-zone .hero-badge {
  background: rgba(255,255,255,0.7);
  border: 1px solid rgba(13,148,136,0.18);
  color: var(--teal-deep);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

/* The greeting block */
[data-ui="v2"] .dash-hero {
  background:
    radial-gradient(ellipse 720px 360px at 95% 0%,    rgba(13,148,136,0.16) 0%, transparent 55%),
    radial-gradient(ellipse 480px 280px at -5% 100%,  rgba(124,92,255,0.10) 0%, transparent 60%),
    linear-gradient(160deg, #effbf6 0%, #ffffff 55%, #fffaf0 100%);
  border: 1px solid #b9e8df;
  border-radius: var(--r-2xl);
  padding: 24px 28px;
  box-shadow:
    0 1px 2px rgba(15,26,22,0.04),
    0 12px 32px -8px rgba(13,148,136,0.16),
    inset 0 1px 0 rgba(255,255,255,0.9);
  position: relative;
  overflow: hidden;
}
[data-ui="v2"] .dash-hero::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px;
  background: linear-gradient(90deg, var(--teal-deep), var(--teal), #2dd4bf, var(--plum));
}
[data-ui="v2"] .dash-hero .hero-left {
  display: flex; flex-direction: column; gap: 8px;
}
[data-ui="v2"] .dash-hero .hero-greeting {
  font-size: 13px; font-weight: 500;
  color: var(--ink-2);
  letter-spacing: 0.005em;
}
[data-ui="v2"] .dash-hero .hero-name {
  font-size: 28px; font-weight: 700;
  letter-spacing: -0.025em;
  color: var(--ink);
  line-height: 1.1;
  margin: 0;
}
[data-ui="v2"] .dash-hero .hero-badges {
  display: flex; flex-wrap: wrap; gap: 6px;
  margin-top: 4px;
}
[data-ui="v2"] .dash-hero .hero-badge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 11px;
  border-radius: var(--r-pill);
  background: rgba(255,255,255,0.7);
  border: 1px solid rgba(13,148,136,0.18);
  color: var(--teal-deep);
  font-size: 12px; font-weight: 600;
  backdrop-filter: blur(6px);
}

/* ── READINESS CARD (.dash-readiness + .drd-*) ─────────────────────── */
/* When inside .dash-hero-zone (the unified hero card), the readiness is
   the body of the same card — transparent bg, no own border/shadow.
   When standalone (rare), give it the paper-card look. */
[data-ui="v2"] .dash-readiness {
  background: linear-gradient(180deg, #ffffff 0%, #fcfcfa 100%);
  border: 1px solid var(--line);
  border-radius: var(--r-2xl);
  padding: 24px 28px;
  box-shadow: var(--shadow-1), var(--bevel-card);
  display: grid;
  grid-template-columns: 160px 1fr;
  gap: 24px;
  align-items: center;
  position: relative;
  overflow: hidden;
  color: var(--ink);
}
[data-ui="v2"] .dash-hero-zone .dash-readiness,
[data-ui="v2"] .dash-hero-zone .dash-readiness.drd-ready,
[data-ui="v2"] .dash-hero-zone .dash-readiness.drd-caution,
[data-ui="v2"] .dash-hero-zone .dash-readiness.drd-rest,
[data-ui="v2"] .dash-hero-zone .dash-readiness-building {
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
  box-shadow: none !important;
  display: grid;
  grid-template-columns: 132px 1fr;
  gap: 18px;
  align-items: center;
  position: relative;
  overflow: visible;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  color: var(--ink);
}
[data-ui="v2"] .dash-hero-zone .dash-readiness::before {
  content: none !important;
}
[data-ui="v2"] .dash-readiness::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px;
  background: linear-gradient(90deg, var(--teal-deep), var(--teal), #2dd4bf);
}
[data-ui="v2"] .dash-readiness.drd-caution::before {
  background: linear-gradient(90deg, #b45309, var(--warm));
}
[data-ui="v2"] .dash-readiness.drd-rest::before {
  background: linear-gradient(90deg, #991b1b, var(--rose));
}

[data-ui="v2"] .dash-readiness .drd-ring-wrap {
  position: relative;
  width: 132px; height: 132px;
  display: grid; place-items: center;
}
[data-ui="v2"] .dash-readiness .drd-ring {
  width: 132px !important;
  height: 132px !important;
}
[data-ui="v2"] .dash-readiness .drd-score {
  position: absolute;
  font-family: var(--font-num);
  font-feature-settings: 'tnum' 1;
  font-weight: 700;
  font-size: 46px;
  letter-spacing: -0.035em;
  line-height: 1;
  background: linear-gradient(180deg, var(--teal-deep), var(--teal) 70%, #2dd4bf);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text;
  color: var(--teal-deep);
}
[data-ui="v2"] .dash-readiness.drd-caution .drd-score {
  background: linear-gradient(180deg, #b45309, var(--warm));
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text;
  color: #b45309;
}
[data-ui="v2"] .dash-readiness.drd-rest .drd-score {
  background: linear-gradient(180deg, #991b1b, var(--rose));
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text;
  color: #991b1b;
}

[data-ui="v2"] .dash-readiness .drd-body {
  display: flex; flex-direction: column; gap: 6px;
}
[data-ui="v2"] .dash-readiness .drd-hdr {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px;
  border-radius: var(--r-pill);
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.06em; text-transform: uppercase;
  background: linear-gradient(135deg, var(--teal-soft), #a7f3d8);
  color: var(--teal-deep);
  border: 1px solid rgba(13,148,136,0.20);
  align-self: flex-start;
  margin-bottom: 4px;
}
[data-ui="v2"] .dash-readiness.drd-caution .drd-hdr {
  background: linear-gradient(135deg, var(--warm-soft), #fde68a);
  color: #92400e;
  border-color: rgba(245,158,11,0.25);
}
[data-ui="v2"] .dash-readiness.drd-rest .drd-hdr {
  background: linear-gradient(135deg, var(--rose-soft), #fecaca);
  color: #991b1b;
  border-color: rgba(239,68,68,0.25);
}
[data-ui="v2"] .dash-readiness .drd-section { display: none; }   /* hidden — verdict label is enough */
[data-ui="v2"] .dash-readiness .drd-sep { display: none; }
[data-ui="v2"] .dash-readiness .drd-label { color: inherit; }

[data-ui="v2"] .dash-readiness .drd-head {
  font-size: 18px; font-weight: 600;
  letter-spacing: -0.005em;
  color: var(--ink);
  line-height: 1.35;
  margin-top: 2px;
}
[data-ui="v2"] .dash-readiness .drd-plan {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin-top: 6px;
}
[data-ui="v2"] .dash-readiness .drd-plan-text {
  font-size: 13px; color: var(--ink-soft);
}
[data-ui="v2"] .dash-readiness .drd-plan-chip {
  font-size: 11px; font-weight: 600;
  padding: 3px 10px;
  border-radius: var(--r-pill);
  background: var(--teal-soft);
  color: var(--teal-deep);
  border: 1px solid #a7f3d8;
}
[data-ui="v2"] .dash-readiness .drd-reco {
  font-size: 13px; line-height: 1.5;
  color: var(--ink-2);
  margin-top: 4px;
}
[data-ui="v2"] .dash-readiness .drd-actions {
  display: flex; gap: 8px;
  margin-top: 12px;
}
[data-ui="v2"] .dash-readiness .drd-btn {
  padding: 9px 16px;
  border-radius: var(--r-md);
  border: 1px solid var(--line);
  background: var(--paper);
  color: var(--ink);
  font-size: 13px; font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  box-shadow: var(--shadow-1);
}
[data-ui="v2"] .dash-readiness .drd-btn-primary {
  background: var(--teal);
  border-color: var(--teal);
  color: #fff;
}
[data-ui="v2"] .dash-readiness .drd-btn-primary:hover {
  background: var(--teal-deep);
  border-color: var(--teal-deep);
}

/* Building / no-auth empty state */
[data-ui="v2"] .dash-readiness-building {
  grid-template-columns: 56px 1fr;
}
[data-ui="v2"] .dash-readiness-building .drd-ico {
  width: 56px; height: 56px;
  border-radius: 16px;
  background: linear-gradient(160deg, var(--teal-tint), #fff);
  border: 1px solid var(--teal-soft);
  display: grid; place-items: center;
  font-size: 26px;
  color: var(--teal-deep);
}
[data-ui="v2"] .dash-readiness-building .drd-title {
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--ink-2);
}
[data-ui="v2"] .dash-readiness-building .drd-sub {
  font-size: 14px; color: var(--ink-soft);
  margin-top: 4px;
}
[data-ui="v2"] .dash-readiness-building .drd-inline-btn {
  margin-top: 10px;
  padding: 7px 13px;
  border-radius: var(--r-md);
  border: 1px solid var(--teal);
  background: var(--teal);
  color: #fff;
  font-size: 12.5px; font-weight: 600;
  cursor: pointer;
  font-family: inherit;
}
[data-ui="v2"] .dash-readiness-building .drd-inline-ghost {
  background: var(--paper);
  border-color: var(--line);
  color: var(--ink);
}

/* YUHA take (.yuha-take) — one-liner narrative */
[data-ui="v2"] .yuha-take {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 16px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-1), var(--bevel-card);
  font-size: 13.5px;
  color: var(--ink-soft);
  line-height: 1.5;
}
[data-ui="v2"] .yuha-take .yt-ico { font-size: 16px; flex: none; }

/* ── Section header (.sh, .sh-title) ──────────────────────────────── */
[data-ui="v2"] .sh {
  margin: var(--s-4) 0 6px;
}
[data-ui="v2"] .sh-title {
  font-size: 15px; font-weight: 600;
  letter-spacing: -0.005em;
  color: var(--ink);
}

/* ── Recent activity strip (.three-col / .two-col / .one-col) ─── */
[data-ui="v2"] #viewDash .three-col,
[data-ui="v2"] #viewDash .two-col,
[data-ui="v2"] #viewDash .one-col {
  display: grid; gap: 12px;
}
[data-ui="v2"] #viewDash .three-col { grid-template-columns: 1fr 1fr 1fr; }
[data-ui="v2"] #viewDash .two-col   { grid-template-columns: 1fr 1fr; }
[data-ui="v2"] #viewDash .one-col   { grid-template-columns: 1fr; }
@media (max-width: 980px) {
  [data-ui="v2"] #viewDash .three-col { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 720px) {
  [data-ui="v2"] #viewDash .three-col,
  [data-ui="v2"] #viewDash .two-col { grid-template-columns: 1fr; }
}

/* The dashboard last-activity card (different from .acts-list cards) */
[data-ui="v2"] .dash-act-card,
[data-ui="v2"] #viewDash .act-card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-1), var(--bevel-card);
  overflow: hidden;
  cursor: pointer;
  transition: box-shadow 0.18s ease, border-color 0.18s ease;
}
[data-ui="v2"] .dash-act-card:hover,
[data-ui="v2"] #viewDash .act-card:hover {
  box-shadow: var(--shadow-2), var(--bevel-card);
  border-color: var(--line-2);
}

/* ── Weekly metric tiles (.dash-metrics + .mc) ────────────────────── */
[data-ui="v2"] .dash-metrics {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}
[data-ui="v2"] .dash-metrics.dash-metrics-3col { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 720px) {
  [data-ui="v2"] .dash-metrics { grid-template-columns: repeat(2, 1fr); }
}

[data-ui="v2"] .mc {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 16px 18px;
  box-shadow: var(--shadow-1), var(--bevel-card);
  display: flex; flex-direction: column; gap: 8px;
  transition: box-shadow 0.18s ease, border-color 0.18s ease;
  cursor: pointer;
}
[data-ui="v2"] .mc:hover {
  box-shadow: var(--shadow-2), var(--bevel-card);
  border-color: var(--line-2);
}
[data-ui="v2"] .mc-top {
  display: flex; justify-content: space-between; align-items: center;
}
[data-ui="v2"] .mc-icon {
  font-size: 18px;
}
[data-ui="v2"] .mc-delta {
  font-size: 11px; font-weight: 600;
  font-feature-settings: 'tnum' 1;
}
[data-ui="v2"] .mc-delta.up,
[data-ui="v2"] .mc-delta.flat   { color: var(--teal-deep); }
[data-ui="v2"] .mc-delta.down   { color: #991b1b; }
[data-ui="v2"] .mc-val {
  font-family: var(--font-num);
  font-feature-settings: 'tnum' 1;
  font-weight: 700;
  font-size: 22px;
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--ink);
}
[data-ui="v2"] .mc-unit {
  font-size: 12px; font-weight: 500;
  color: var(--ink-2);
  margin-left: 3px;
}
[data-ui="v2"] .mc-cta-val {
  font-size: 14px; font-weight: 600;
  color: var(--teal-deep);
}
[data-ui="v2"] .mc-lbl {
  font-size: 11px; font-weight: 600;
  letter-spacing: 0.05em; text-transform: uppercase;
  color: var(--ink-2);
}
[data-ui="v2"] .mc-sub-lbl {
  font-weight: 500; letter-spacing: 0; text-transform: none;
  color: var(--ink-3);
  margin-left: 4px;
}
[data-ui="v2"] .mc-bar {
  height: 6px;
  background: var(--paper-2);
  border-radius: var(--r-pill);
  overflow: hidden;
  margin-top: 4px;
}
[data-ui="v2"] .mc-bar-fill {
  height: 100%;
  border-radius: var(--r-pill);
}
[data-ui="v2"] .mc-bar-fill.teal   { background: var(--teal); }
[data-ui="v2"] .mc-bar-fill.purple { background: var(--plum); }
[data-ui="v2"] .mc-bar-fill.orange { background: var(--warm); }
[data-ui="v2"] .mc-bar-fill.green  { background: var(--teal-2); }
[data-ui="v2"] .mc.mc-empty { cursor: pointer; }

/* ── Last 7 Days chart strip (.dash-weekly-charts + .wc-card) ─── */
[data-ui="v2"] .dash-weekly-charts {
  display: flex; flex-direction: column; gap: 12px;
  margin-top: 4px;
}
[data-ui="v2"] .dash-wc-loading,
[data-ui="v2"] .dash-wc-empty {
  padding: 24px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-1), var(--bevel-card);
  text-align: center;
  color: var(--ink-2);
  font-size: 13px;
}
[data-ui="v2"] .dash-wc-spinner {
  width: 24px; height: 24px;
  margin: 0 auto 10px;
  border: 2px solid var(--line);
  border-top-color: var(--teal);
  border-radius: 50%;
  animation: v2-spin 0.7s linear infinite;
}
@keyframes v2-spin { to { transform: rotate(360deg); } }

/* Stacked layout: header → stats row → chart → summary.
   The v2 mockup uses side-by-side stats+chart, but v1's wc-card emits
   stacked children (.wc-hdr, .wc-stats, .wc-chart-wrap, .wc-summary).
   A previous experiment at side-by-side via grid-template-areas had an
   invalid (non-rectangular) `summ` area — the browser ignored the
   template and the chart/summary overlapped. Stacked is reliable and
   matches the mockup's intent (one card per metric with a chart). */
[data-ui="v2"] .wc-card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  padding: 18px 20px;
  box-shadow: var(--shadow-1), var(--bevel-card);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
[data-ui="v2"] .wc-card.wc-card-empty {
  background: var(--paper-2);
  border-style: dashed;
}
[data-ui="v2"] .wc-card .wc-chart-wrap {
  height: 130px;
  margin: 0;
}
[data-ui="v2"] .wc-hdr {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 0;
}
[data-ui="v2"] .wc-icon {
  width: 28px; height: 28px;
  border-radius: 9px;
  background: var(--paper-2);
  border: 1px solid var(--line);
  display: grid; place-items: center;
  font-size: 14px;
}
[data-ui="v2"] .wc-title {
  font-size: 13px; font-weight: 600;
  color: var(--ink);
  letter-spacing: -0.005em;
}
[data-ui="v2"] .wc-trend,
[data-ui="v2"] .wc-trend-chip {
  margin-left: auto;
  display: inline-flex; align-items: center; gap: 3px;
  padding: 2px 8px;
  border-radius: var(--r-pill);
  font-size: 10px; font-weight: 700;
  letter-spacing: 0.04em; text-transform: uppercase;
}
[data-ui="v2"] .wc-trend.up,
[data-ui="v2"] .wc-trend-chip.up   { background: var(--teal-soft); color: var(--teal-deep); }
[data-ui="v2"] .wc-trend.down,
[data-ui="v2"] .wc-trend-chip.down { background: var(--rose-soft); color: #991b1b; }
[data-ui="v2"] .wc-trend.flat,
[data-ui="v2"] .wc-trend-chip.flat { background: var(--paper-2); color: var(--ink-2); border: 1px solid var(--line); }

[data-ui="v2"] .wc-stats {
  display: flex; align-items: baseline; justify-content: space-between; gap: 8px;
  margin-bottom: 0;
}
[data-ui="v2"] .wc-stat-main { display: flex; flex-direction: column; }
[data-ui="v2"] .wc-stat-val {
  font-family: var(--font-num);
  font-feature-settings: 'tnum' 1;
  font-weight: 700;
  font-size: 26px;
  letter-spacing: -0.025em;
  color: var(--ink);
  line-height: 1;
}
[data-ui="v2"] .wc-stat-unit {
  font-size: 12px; font-weight: 500;
  color: var(--ink-2);
  margin-left: 3px;
}
[data-ui="v2"] .wc-stat-lbl {
  font-size: 11px; font-weight: 600;
  letter-spacing: 0.05em; text-transform: uppercase;
  color: var(--ink-2);
  margin-top: 4px;
}
[data-ui="v2"] .wc-stat-side {
  text-align: right;
  display: flex; flex-direction: column; gap: 4px;
}
[data-ui="v2"] .wc-stat-avg {
  font-size: 12px; color: var(--ink-2);
  font-feature-settings: 'tnum' 1;
}
[data-ui="v2"] .wc-baseline {
  font-size: 11px; color: var(--ink-3);
}

[data-ui="v2"] .wc-summary {
  font-size: 12.5px; line-height: 1.5;
  color: var(--ink-soft);
  padding-top: 10px;
  border-top: 1px solid var(--line);
}

/* ── Race / WinWatch / Daily-plan cards on the dashboard ─────────── */
[data-ui="v2"] #viewDash .ww-col,
[data-ui="v2"] #viewDash .ww-empty {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-1), var(--bevel-card);
  padding: 16px 18px;
}
[data-ui="v2"] #viewDash .ww-col-lbl {
  font-size: 10px; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--ink-2);
}
[data-ui="v2"] #viewDash .ww-col-headline {
  font-size: 14px; font-weight: 600;
  color: var(--ink);
  margin-top: 6px;
  line-height: 1.35;
}
[data-ui="v2"] #viewDash .ww-col-detail {
  font-size: 12.5px; color: var(--ink-2);
  margin-top: 4px; line-height: 1.5;
}
[data-ui="v2"] #viewDash .ww-col-cta {
  font-size: 11.5px; font-weight: 600;
  color: var(--teal-deep);
  margin-top: 8px;
}


/* ═══════════════════════════════════════════════════════════════════════
   STEP 6b — Below-hero dashboard cards (daily plan, nutrition, race
   brief, daily brief = restyled win+watch). Targets v1 classes.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Daily plan card (.dash-daily-plan + .dp-*) ──────────────────── */
[data-ui="v2"] #viewDash .dash-daily-plan {
  background: linear-gradient(180deg, #ffffff 0%, #fcfcfa 100%);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  padding: 16px 18px;
  box-shadow: var(--shadow-1), var(--bevel-card);
  position: relative;
}
[data-ui="v2"] #viewDash .dp-hdr {
  display: flex; align-items: center; gap: 8px;
  margin-bottom: 10px;
  padding: 0;
  background: none;
  border: none;
}
[data-ui="v2"] #viewDash .dp-title {
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--ink-2);
}
[data-ui="v2"] #viewDash .dp-headline {
  font-size: 13px; font-weight: 500;
  color: var(--ink-soft);
  flex: 1;
  letter-spacing: 0;
  text-transform: none;
}
[data-ui="v2"] #viewDash .dp-hide-btn {
  background: transparent;
  border: none;
  color: var(--ink-3);
  width: 24px; height: 24px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 16px;
  display: grid; place-items: center;
  font-family: inherit;
}
[data-ui="v2"] #viewDash .dp-hide-btn:hover { background: var(--paper-2); color: var(--ink); }

[data-ui="v2"] #viewDash .dp-plan-badge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px;
  border-radius: var(--r-pill);
  background: var(--teal-tint);
  color: var(--teal-deep);
  border: 1px solid var(--teal-soft);
  font-size: 11px; font-weight: 600;
  margin-bottom: 10px;
  cursor: pointer;
  font-family: inherit;
}

/* Today block — most prominent inside the daily plan card */
[data-ui="v2"] #viewDash .dp-today {
  background: var(--paper-2);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 14px 16px;
  margin-bottom: 12px;
}
[data-ui="v2"] #viewDash .dp-today.dp-today-done {
  background: var(--teal-tint);
  border-color: var(--teal-soft);
}
[data-ui="v2"] #viewDash .dp-today.dp-today-skipped {
  background: var(--paper-2); border-color: var(--line); opacity: 0.7;
}
[data-ui="v2"] #viewDash .dp-today-top {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  margin-bottom: 4px;
}
[data-ui="v2"] #viewDash .dp-today-session {
  font-size: 16px; font-weight: 600;
  letter-spacing: -0.005em;
  color: var(--ink);
  flex: 1;
}
[data-ui="v2"] #viewDash .dp-intensity {
  display: inline-flex; align-items: center;
  padding: 3px 9px;
  border-radius: var(--r-sm);
  font-size: 10px; font-weight: 700;
  letter-spacing: 0.06em; text-transform: uppercase;
  background: color-mix(in srgb, var(--ic, var(--teal)) 18%, transparent);
  color: var(--ic, var(--teal-deep));
  border: 1px solid color-mix(in srgb, var(--ic, var(--teal)) 30%, transparent);
}
[data-ui="v2"] #viewDash .dp-today-meta {
  font-size: 12px; color: var(--ink-2);
  margin-bottom: 8px;
}
[data-ui="v2"] #viewDash .dp-dur {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 12px; color: var(--ink-2);
  font-feature-settings: 'tnum' 1;
}
[data-ui="v2"] #viewDash .dp-today-guidance {
  font-size: 13px; color: var(--ink-soft);
  line-height: 1.5;
  margin-bottom: 10px;
}
[data-ui="v2"] #viewDash .dp-today-actions {
  display: flex; flex-wrap: wrap; gap: 6px;
}
[data-ui="v2"] #viewDash .dp-cta {
  padding: 8px 14px;
  border-radius: var(--r-md);
  border: 1px solid var(--teal);
  background: var(--teal);
  color: #fff;
  font-size: 12.5px; font-weight: 600;
  cursor: pointer;
  font-family: inherit;
}
[data-ui="v2"] #viewDash .dp-cta:hover { background: var(--teal-deep); border-color: var(--teal-deep); }
[data-ui="v2"] #viewDash .dp-cta-secondary {
  background: var(--paper);
  border-color: var(--line);
  color: var(--ink);
}
[data-ui="v2"] #viewDash .dp-cta-secondary:hover { background: var(--paper-2); border-color: var(--line-2); }
[data-ui="v2"] #viewDash .dp-cta-undo {
  background: transparent; border: none;
  color: var(--ink-3); font-size: 11px;
  cursor: pointer; font-family: inherit;
  margin-left: auto;
}
[data-ui="v2"] #viewDash .dp-cta-undo:hover { color: var(--ink); }

[data-ui="v2"] #viewDash .dp-completed-badge {
  display: inline-flex; align-items: center;
  padding: 4px 10px;
  border-radius: var(--r-pill);
  background: color-mix(in srgb, var(--cc, var(--teal)) 18%, transparent);
  color: var(--cc, var(--teal-deep));
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.04em;
}

/* Upcoming day-strip (TOMORROW, MON …) */
[data-ui="v2"] #viewDash .dp-upcoming {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
[data-ui="v2"] #viewDash .dp-upcoming-item {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 10px 12px;
  display: flex; flex-direction: column; gap: 2px;
}
[data-ui="v2"] #viewDash .dp-upcoming-item.dp-up-done {
  background: var(--teal-tint);
  border-color: var(--teal-soft);
}
[data-ui="v2"] #viewDash .dp-up-day {
  font-size: 10px; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--ink-2);
}
[data-ui="v2"] #viewDash .dp-up-session {
  font-size: 13px; font-weight: 600;
  color: var(--ink);
}
[data-ui="v2"] #viewDash .dp-up-meta {
  font-size: 11.5px; color: var(--ink-2);
}
[data-ui="v2"] #viewDash .dp-up-check {
  color: var(--teal);
  margin-left: 4px;
}

[data-ui="v2"] #viewDash .dp-feel-prompt {
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--ink-2);
  margin-top: 12px; margin-bottom: 8px;
}
[data-ui="v2"] #viewDash .dp-feel-chips {
  display: flex; gap: 6px; flex-wrap: wrap;
}
[data-ui="v2"] #viewDash .dp-feel-chip {
  padding: 6px 10px;
  border-radius: var(--r-pill);
  border: 1px solid var(--line);
  background: var(--paper);
  color: var(--ink-soft);
  font-size: 11.5px; font-weight: 500;
  cursor: pointer; font-family: inherit;
  box-shadow: var(--shadow-1);
}
[data-ui="v2"] #viewDash .dp-feel-chip:hover {
  background: var(--teal-tint);
  border-color: var(--teal-soft);
  color: var(--teal-deep);
}
[data-ui="v2"] #viewDash .dp-feel-badge {
  display: inline-flex;
  padding: 4px 10px;
  border-radius: var(--r-pill);
  background: var(--teal-soft);
  color: var(--teal-deep);
  font-size: 11px; font-weight: 600;
  margin-top: 8px;
}
[data-ui="v2"] #viewDash .dp-hidden-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px;
  border-radius: var(--r-pill);
  background: var(--paper);
  border: 1px solid var(--line);
  color: var(--ink-soft);
  font-size: 12px; font-weight: 500;
  cursor: pointer;
  box-shadow: var(--shadow-1);
}

/* ── Nutrition card on dashboard (.nutr-card) ─────────────────────── */
[data-ui="v2"] #viewDash .card.nutr-card,
[data-ui="v2"] #viewDash .nutr-card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  padding: 16px 18px;
  box-shadow: var(--shadow-1), var(--bevel-card);
}
[data-ui="v2"] #viewDash .nutr-card .card-hdr {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  font-size: 13px; font-weight: 600;
  color: var(--ink);
  margin-bottom: 10px;
  padding: 0;
  background: none;
  border: none;
}
[data-ui="v2"] #viewDash .nutr-card .card-hdr-pill {
  font-size: 10px; font-weight: 700;
  letter-spacing: 0.04em; text-transform: uppercase;
  padding: 3px 8px;
  border-radius: var(--r-sm);
  background: var(--paper-2);
  color: var(--ink-2);
  border: 1px solid var(--line);
}
[data-ui="v2"] #viewDash .nutr-card .card-hdr-pill.good {
  background: var(--teal-soft);
  color: var(--teal-deep);
  border-color: #a7f3d8;
}
[data-ui="v2"] #viewDash .nutr-card .card-hdr-pill.fair {
  background: var(--warm-soft);
  color: #92400e;
  border-color: #fde68a;
}
[data-ui="v2"] #viewDash .nutr-headline {
  font-family: var(--font-num);
  font-feature-settings: 'tnum' 1;
  font-size: 22px; font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--ink);
  line-height: 1.1;
  margin-bottom: 8px;
}
[data-ui="v2"] #viewDash .nutr-headline strong { font-weight: 700; }
[data-ui="v2"] #viewDash .nutr-bar {
  height: 6px;
  background: var(--paper-2);
  border-radius: var(--r-pill);
  overflow: hidden;
  margin-bottom: 8px;
}
[data-ui="v2"] #viewDash .nutr-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--warm), #ea580c);
  border-radius: var(--r-pill);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.30);
}
[data-ui="v2"] #viewDash .nutr-last {
  font-size: 12px; color: var(--ink-2);
  margin-bottom: 10px;
}
[data-ui="v2"] #viewDash .nutr-empty-msg {
  font-size: 14px; font-weight: 600; color: var(--ink);
  margin-bottom: 4px;
}
[data-ui="v2"] #viewDash .nutr-empty-sub {
  font-size: 12.5px; color: var(--ink-2);
  margin-bottom: 10px;
  line-height: 1.45;
}
[data-ui="v2"] #viewDash .nutr-log-btn {
  width: 100%;
  padding: 10px 14px;
  border-radius: var(--r-md);
  border: 1px solid var(--line);
  background: var(--paper);
  color: var(--ink);
  font-size: 13px; font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  box-shadow: var(--shadow-1);
}
[data-ui="v2"] #viewDash .nutr-log-btn.primary {
  background: var(--teal);
  border-color: var(--teal);
  color: #fff;
}
[data-ui="v2"] #viewDash .nutr-log-btn.primary:hover { background: var(--teal-deep); border-color: var(--teal-deep); }

/* ── Win + Watch as Daily Brief look ──────────────────────────────── */
[data-ui="v2"] #viewDash .ww-col,
[data-ui="v2"] #viewDash .ww-col-empty {
  background: linear-gradient(180deg, #ffffff 0%, #fcfcfa 100%);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  padding: 14px 16px;
  box-shadow: var(--shadow-1), var(--bevel-card);
  cursor: pointer;
  transition: border-color 0.12s ease, box-shadow 0.12s ease;
}
[data-ui="v2"] #viewDash .ww-col:hover {
  border-color: var(--line-2);
  box-shadow: var(--shadow-2), var(--bevel-card);
}
[data-ui="v2"] #viewDash .ww-col-hdr {
  display: flex; align-items: center; gap: 6px;
  margin-bottom: 6px;
}
[data-ui="v2"] #viewDash .ww-col-icon { font-size: 16px; }
[data-ui="v2"] #viewDash .ww-col-lbl {
  font-size: 10px; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--ink-2);
}
[data-ui="v2"] #viewDash .ww-col-headline {
  font-size: 14px; font-weight: 600;
  color: var(--ink);
  line-height: 1.35;
  letter-spacing: -0.005em;
  margin-bottom: 4px;
}
[data-ui="v2"] #viewDash .ww-col-soft { color: var(--ink-2); font-weight: 500; }
[data-ui="v2"] #viewDash .ww-col-detail {
  font-size: 12px; color: var(--ink-2);
  line-height: 1.5;
}
[data-ui="v2"] #viewDash .ww-col-cta {
  font-size: 11px; font-weight: 600;
  color: var(--teal-deep);
  margin-top: 8px;
}

/* Win/watch row container */
[data-ui="v2"] #viewDash .ww-row,
[data-ui="v2"] #viewDash .ww-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
@media (max-width: 720px) {
  [data-ui="v2"] #viewDash .ww-row,
  [data-ui="v2"] #viewDash .ww-grid,
  [data-ui="v2"] #viewDash .dp-upcoming { grid-template-columns: 1fr; }
}

/* ── Recent Activity card on dashboard (.act-card on #viewDash) ── */
[data-ui="v2"] #viewDash .act-card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-1), var(--bevel-card);
  overflow: hidden;
}
[data-ui="v2"] #viewDash .act-map {
  border-radius: 0;
  overflow: hidden;
}
[data-ui="v2"] #viewDash .act-body {
  padding: 14px 16px;
  display: flex; flex-direction: column;
  gap: 4px;
}
[data-ui="v2"] #viewDash .act-meta {
  font-size: 12px; color: var(--ink-2);
}
[data-ui="v2"] #viewDash .act-title {
  font-size: 16px; font-weight: 600;
  letter-spacing: -0.005em;
  color: var(--ink);
}
/* v1 emits .act-stats as <div class="as-item"><div class="as-val">…</div>
   <div class="as-lbl">…</div></div> with <div class="as-sep"></div>
   between items. The previous v2 rule treated ANY direct child as a
   stat column, so .as-sep got 1fr width + a right border — rendering
   as a fat grey rectangle between values. Now we explicitly target
   .as-item as columns and .as-sep as a hairline vertical divider. */
[data-ui="v2"] #viewDash .act-stats {
  display: flex; align-items: center; gap: 0;
  padding: 14px 16px;
  border-top: 1px solid var(--line);
}
[data-ui="v2"] #viewDash .act-stats .as-item {
  flex: 1;
  text-align: center;
  min-width: 0;
  background: transparent;
  border: none;
  padding: 0;
}
[data-ui="v2"] #viewDash .act-stats .as-val {
  font-family: var(--font-num);
  font-feature-settings: 'tnum' 1;
  font-size: 17px; font-weight: 700;
  letter-spacing: -0.015em;
  color: var(--ink);
  line-height: 1.1;
}
[data-ui="v2"] #viewDash .act-stats .as-lbl {
  font-size: 10px; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--ink-2);
  margin-top: 4px;
}
[data-ui="v2"] #viewDash .act-stats .as-sep {
  flex: 0 0 1px;
  width: 1px;
  align-self: stretch;
  background: var(--line);
  margin: 4px 0;
  border: none;
  text-align: initial;
}
[data-ui="v2"] #viewDash .act-footer {
  padding: 10px 16px;
  border-top: 1px solid var(--line);
  background: var(--paper-2);
}
[data-ui="v2"] #viewDash .act-kudos {
  font-size: 12px;
  color: var(--ink-2);
}


/* ── Dashboard skeleton (loading flash) — match v2 hero look ──
   v1's `.dash-skel-hero-zone` has a dark teal gradient that briefly
   flashes before the connected dashboard renders. Replace with the v2
   gradient + accent strip so the FOUC matches the final state. */
[data-ui="v2"] #viewDash #dashSkeleton {
  display: flex; flex-direction: column; gap: 14px;
}
[data-ui="v2"] #viewDash .dash-skel-hero-zone {
  background:
    radial-gradient(ellipse 720px 360px at 95% 0%,    rgba(13,148,136,0.20) 0%, transparent 55%),
    radial-gradient(ellipse 480px 280px at -5% 100%,  rgba(124,92,255,0.12) 0%, transparent 60%),
    linear-gradient(160deg, #effbf6 0%, #ffffff 55%, #fffaf0 100%) !important;
  border: 1px solid #b9e8df;
  border-radius: 24px;
  padding: 18px 22px 20px;
  position: relative;
  overflow: hidden;
}
[data-ui="v2"] #viewDash .dash-skel-hero-zone::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px;
  background: linear-gradient(90deg, var(--teal-deep), var(--teal), #2dd4bf, var(--plum));
}
[data-ui="v2"] #viewDash .dash-skel-greet {
  background: rgba(13,148,136,0.10) !important;
}
[data-ui="v2"] #viewDash .dash-skel-readiness {
  background: rgba(13,148,136,0.06) !important;
  border: 1px solid rgba(13,148,136,0.10);
}
[data-ui="v2"] #viewDash .dash-skel-section-title,
[data-ui="v2"] #viewDash .dash-skel-recent,
[data-ui="v2"] #viewDash .dash-skel-wc,
[data-ui="v2"] #viewDash .dash-skel-hero,
[data-ui="v2"] #viewDash .dash-mc-skel {
  background: var(--paper-2) !important;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
}


/* ═══════════════════════════════════════════════════════════════════════
   STEP 6c — Pixel-match dashboard hero (.v2h-card injected by integrate.js)
   Mirrors /static/v2/dashboard.html hero exactly.
   ═══════════════════════════════════════════════════════════════════════ */

/* Once .v2h-card is inside the wrapping .dash-hero-zone, the zone's own
   background / border / shadow / accent strip would show through behind
   the new card and produce a nested-card / double-border look. Strip
   the zone's visuals so only .v2h-card paints. */
[data-ui="v2"] #viewDash .dash-hero-zone:has(.v2h-card),
[data-ui="v2"] #viewDash .dash-hero-zone.v2h-zone-flat {
  background: none !important;
  border: none !important;
  padding: 0 !important;
  margin: 0 !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  overflow: visible !important;
}
[data-ui="v2"] #viewDash .dash-hero-zone:has(.v2h-card)::before,
[data-ui="v2"] #viewDash .dash-hero-zone:has(.v2h-card)::after,
[data-ui="v2"] #viewDash .dash-hero-zone.v2h-zone-flat::before,
[data-ui="v2"] #viewDash .dash-hero-zone.v2h-zone-flat::after {
  content: none !important;
  display: none !important;
  background: none !important;
}

[data-ui="v2"] #viewDash .v2h-card {
  background:
    radial-gradient(ellipse 720px 360px at 95% 0%,    rgba(13,148,136,0.20) 0%, transparent 55%),
    radial-gradient(ellipse 480px 280px at -5% 100%,  rgba(124,92,255,0.12) 0%, transparent 60%),
    linear-gradient(160deg, #effbf6 0%, #ffffff 55%, #fffaf0 100%);
  border: 1px solid #b9e8df;
  border-radius: 28px;
  padding: 24px 28px;
  box-shadow:
    0 1px 2px rgba(15,26,22,0.04),
    0 12px 32px -8px rgba(13,148,136,0.18),
    inset 0 1px 0 rgba(255,255,255,0.9);
  position: relative;
  overflow: hidden;
}
[data-ui="v2"] #viewDash .v2h-card::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px;
  background: linear-gradient(90deg, var(--teal-deep), var(--teal), #2dd4bf, var(--plum));
}
[data-ui="v2"] #viewDash .v2h-card.v2h-card-caution::before {
  background: linear-gradient(90deg, #b45309, #d97706, #fbbf24);
}
[data-ui="v2"] #viewDash .v2h-card.v2h-card-rest::before {
  background: linear-gradient(90deg, #991b1b, #dc2626, #fca5a5);
}

/* Top row: greeting + badges */
[data-ui="v2"] #viewDash .v2h-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 16px;
}
[data-ui="v2"] #viewDash .v2h-greet {
  font-size: 14px; font-weight: 500;
  color: var(--ink-2);
}
[data-ui="v2"] #viewDash .v2h-badges {
  display: flex; flex-wrap: wrap; gap: 6px;
  align-items: center;
}
[data-ui="v2"] #viewDash .v2h-badge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 12px;
  border-radius: var(--r-pill);
  background: rgba(255,255,255,0.7);
  border: 1px solid rgba(13,148,136,0.18);
  color: var(--teal-deep);
  font-size: 12px; font-weight: 600;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

/* Main row: BIG score on the left + content on the right */
[data-ui="v2"] #viewDash .v2h-main {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 28px;
  align-items: center;
  margin-bottom: 18px;
}
@media (max-width: 720px) {
  [data-ui="v2"] #viewDash .v2h-main {
    grid-template-columns: 140px 1fr;
    gap: 16px;
  }
}

[data-ui="v2"] #viewDash .v2h-ring-wrap {
  position: relative;
  width: 200px;
  height: 200px;
  display: grid; place-items: center;
}
[data-ui="v2"] #viewDash .v2h-ring {
  position: absolute;
  inset: 0;
  width: 100% !important;
  height: 100% !important;
}
[data-ui="v2"] #viewDash .v2h-score-inner {
  position: relative;
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 2px;
  z-index: 1;
}
[data-ui="v2"] #viewDash .v2h-score-num {
  font-family: var(--font-num);
  font-feature-settings: 'tnum' 1;
  font-weight: 700;
  font-size: 88px;
  line-height: 0.95;
  letter-spacing: -0.045em;
}
[data-ui="v2"] #viewDash .v2h-score-num.v2h-score-ready {
  background: linear-gradient(180deg, var(--teal-deep), var(--teal) 70%, #2dd4bf);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text;
  color: var(--teal-deep);
}
[data-ui="v2"] #viewDash .v2h-score-num.v2h-score-caution {
  background: linear-gradient(180deg, #b45309, #d97706 70%, #fbbf24);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text;
  color: #b45309;
}
[data-ui="v2"] #viewDash .v2h-score-num.v2h-score-rest {
  background: linear-gradient(180deg, #991b1b, #dc2626 70%, #fca5a5);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text;
  color: #991b1b;
}
[data-ui="v2"] #viewDash .v2h-score-denom {
  font-size: 16px; font-weight: 500;
  color: var(--ink-2);
}
@media (max-width: 720px) {
  [data-ui="v2"] #viewDash .v2h-ring-wrap { width: 140px; height: 140px; }
  [data-ui="v2"] #viewDash .v2h-score-num { font-size: 56px; }
  [data-ui="v2"] #viewDash .v2h-score-denom { font-size: 12px; }
}

/* Content right of the score */
[data-ui="v2"] #viewDash .v2h-content {
  display: flex; flex-direction: column;
  gap: 8px;
  min-width: 0;
}
[data-ui="v2"] #viewDash .v2h-verdict {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 5px 14px 5px 12px;
  border-radius: var(--r-pill);
  font-size: 12px; font-weight: 700;
  letter-spacing: 0.06em; text-transform: uppercase;
  align-self: flex-start;
  border: 1px solid transparent;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.6),
    0 1px 2px rgba(0,0,0,0.05);
}
[data-ui="v2"] #viewDash .v2h-verdict-ready {
  background: linear-gradient(135deg, #ccfbf1 0%, #a7f3d8 100%);
  color: var(--teal-deep);
  border-color: rgba(13,148,136,0.20);
}
[data-ui="v2"] #viewDash .v2h-verdict-caution {
  background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
  color: #92400e;
  border-color: rgba(245,158,11,0.25);
}
[data-ui="v2"] #viewDash .v2h-verdict-rest {
  background: linear-gradient(135deg, #fee2e2 0%, #fecaca 100%);
  color: #991b1b;
  border-color: rgba(239,68,68,0.25);
}
[data-ui="v2"] #viewDash .v2h-verdict .dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: currentColor;
}

[data-ui="v2"] #viewDash .v2h-headline {
  font-size: 22px; font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--ink);
  line-height: 1.3;
  margin: 0;
  max-width: 640px;
}
[data-ui="v2"] #viewDash .v2h-rec {
  font-size: 14px; line-height: 1.55;
  color: var(--ink-soft);
  margin: 0;
  max-width: 600px;
}
[data-ui="v2"] #viewDash .v2h-plan {
  font-size: 13px; color: var(--ink-soft);
  display: inline-flex; align-items: center; gap: 8px;
  flex-wrap: wrap;
  margin-top: 2px;
}
[data-ui="v2"] #viewDash .v2h-plan-chip {
  display: inline-flex;
  padding: 3px 10px;
  border-radius: var(--r-pill);
  background: var(--teal-soft);
  color: var(--teal-deep);
  border: 1px solid #a7f3d8;
  font-size: 11px; font-weight: 600;
}

/* 7-day trend mini-chart card */
[data-ui="v2"] #viewDash .v2h-trend {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 8px 14px;
  margin-top: 6px;
  border-radius: var(--r-md);
  background: rgba(255,255,255,0.7);
  border: 1px solid rgba(13,148,136,0.20);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  align-self: flex-start;
}
[data-ui="v2"] #viewDash .v2h-trend-lbl {
  font-size: 11px; font-weight: 600;
  letter-spacing: 0.05em; text-transform: uppercase;
  color: var(--ink-2);
}
[data-ui="v2"] #viewDash .v2h-trend svg { display: block; }
[data-ui="v2"] #viewDash .v2h-trend-now {
  font-family: var(--font-num);
  font-feature-settings: 'tnum' 1;
  font-size: 13px; font-weight: 700;
  color: var(--teal-deep);
}
[data-ui="v2"] #viewDash .v2h-trend-delta {
  font-size: 11px; font-weight: 600;
  color: var(--teal-deep);
  padding: 2px 6px;
  border-radius: var(--r-sm);
  background: var(--teal-soft);
}

/* CTAs */
[data-ui="v2"] #viewDash .v2h-cta {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 4px;
}
[data-ui="v2"] #viewDash .v2h-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 11px 18px;
  border-radius: var(--r-md);
  border: 1px solid transparent;
  font-size: 13px; font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  transition: background 0.12s ease, border-color 0.12s ease;
}
[data-ui="v2"] #viewDash .v2h-btn-primary {
  background: var(--teal);
  border-color: var(--teal);
  color: #fff;
  box-shadow: 0 1px 0 rgba(255,255,255,0.15) inset, var(--shadow-1);
}
[data-ui="v2"] #viewDash .v2h-btn-primary:hover {
  background: var(--teal-deep);
  border-color: var(--teal-deep);
}
[data-ui="v2"] #viewDash .v2h-btn-outline {
  background: var(--paper);
  border-color: var(--line);
  color: var(--ink);
  box-shadow: var(--shadow-1);
}
[data-ui="v2"] #viewDash .v2h-btn-outline:hover {
  background: var(--paper-2);
  border-color: var(--line-2);
}

/* Mobile */
@media (max-width: 720px) {
  [data-ui="v2"] #viewDash .v2h-card { padding: 18px 18px; border-radius: 20px; }
  [data-ui="v2"] #viewDash .v2h-headline { font-size: 18px; }
  [data-ui="v2"] #viewDash .v2h-rec { font-size: 13px; }
  [data-ui="v2"] #viewDash .v2h-cta { flex-direction: column; }
  [data-ui="v2"] #viewDash .v2h-btn { width: 100%; justify-content: center; }
}

/* ═══════════════════════════════════════════════════════════════════════
   STEP 6d — Below-hero pixel-match sections (Daily Brief, This Week, Goals)
   Injected by integrate.js — see /static/v2/dashboard.html for the source.
   ═══════════════════════════════════════════════════════════════════════ */

/* Utility — hide elements that v2 replaces but v1 still emits (.ww-card,
   non-v2 chart cards). Kept in DOM in case v1 logic needs them. */
[data-ui="v2"] #viewDash .v2-hide { display: none !important; }

/* When Recent Activity grid had ww-card as its 3rd cell, hiding it via
   .v2-hide leaves an empty grid column. .v2-recent-2 collapses the grid
   from 3 columns to 2 so the visible cards (activity, nutrition) fill
   the row evenly. .v2-recent-3 (set after we inject .v2-race-card)
   guarantees a 3-col grid even if the parent had .two-col. */
[data-ui="v2"] #viewDash .three-col.v2-recent-2 {
  grid-template-columns: 1fr 1fr !important;
}
[data-ui="v2"] #viewDash .v2-recent-3 {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 12px !important;
}
@media (max-width: 1024px) {
  [data-ui="v2"] #viewDash .v2-recent-3 {
    grid-template-columns: 1fr 1fr !important;
  }
}
@media (max-width: 720px) {
  [data-ui="v2"] #viewDash .three-col.v2-recent-2,
  [data-ui="v2"] #viewDash .v2-recent-3 {
    grid-template-columns: 1fr !important;
  }
}

/* ── Recent Activity: 3rd-slot race-countdown card (.v2-race-card) ── */
[data-ui="v2"] #viewDash .v2-race-card {
  background:
    radial-gradient(ellipse 220px 140px at 90% 0%, rgba(13,148,136,0.22) 0%, transparent 60%),
    linear-gradient(160deg, #f7fefb 0%, #d6f5ec 100%);
  border: 1px solid #a7f3d8;
  border-radius: var(--r-xl);
  padding: 20px;
  box-shadow:
    0 1px 2px rgba(15,26,22,0.04),
    0 6px 18px -4px rgba(13,148,136,0.18),
    inset 0 1px 0 rgba(255,255,255,0.8);
  display: flex;
  flex-direction: column;
  gap: 10px;
  cursor: pointer;
  transition: box-shadow 0.18s ease, transform 0.18s ease, border-color 0.18s ease;
}
[data-ui="v2"] #viewDash .v2-race-card:hover {
  transform: translateY(-1px);
  box-shadow:
    0 1px 2px rgba(15,26,22,0.04),
    0 12px 24px -6px rgba(13,148,136,0.28),
    inset 0 1px 0 rgba(255,255,255,0.8);
  border-color: #6ee7b7;
}
[data-ui="v2"] #viewDash .v2-race-eyebrow {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--teal-deep);
}
[data-ui="v2"] #viewDash .v2-race-days {
  font-family: var(--font-num);
  font-feature-settings: 'tnum' 1;
  font-weight: 700;
  font-size: 44px;
  line-height: 0.95;
  letter-spacing: -0.025em;
  color: var(--teal-deep);
}
[data-ui="v2"] #viewDash .v2-race-days .unit {
  font-family: var(--font-sans, inherit);
  font-feature-settings: normal;
  font-size: 13px;
  font-weight: 500;
  color: var(--teal);
  letter-spacing: 0;
  margin-left: 6px;
}
[data-ui="v2"] #viewDash .v2-race-line {
  font-size: 12.5px;
  color: var(--ink-soft);
  line-height: 1.45;
}
[data-ui="v2"] #viewDash .v2-race-line b {
  color: var(--teal-deep);
  font-weight: 700;
}
[data-ui="v2"] #viewDash .v2-race-cta {
  margin-top: auto;
  align-self: flex-start;
  background: var(--teal);
  border: 1px solid var(--teal);
  color: #fff;
  padding: 8px 14px;
  border-radius: var(--r-md);
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  box-shadow: 0 1px 0 rgba(255,255,255,0.15) inset, var(--shadow-1);
  transition: background 0.12s ease;
}
[data-ui="v2"] #viewDash .v2-race-cta:hover {
  background: var(--teal-deep);
  border-color: var(--teal-deep);
}

/* ── Daily Brief (3-stanza newspaper-style section) ─────────────────── */
[data-ui="v2"] #viewDash .v2-brief {
  background: linear-gradient(180deg, #ffffff 0%, #fcfcfa 100%);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  padding: 0;
  overflow: hidden;
  box-shadow: var(--shadow-1), var(--bevel-card);
  margin-top: 14px;
}
[data-ui="v2"] #viewDash .v2b-hdr {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px 12px;
}
[data-ui="v2"] #viewDash .v2b-title {
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.005em;
  color: var(--ink);
  display: flex;
  align-items: center;
  gap: 8px;
}
[data-ui="v2"] #viewDash .v2b-date {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-2);
}
[data-ui="v2"] #viewDash .v2b-body {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid var(--line);
}
[data-ui="v2"] #viewDash .v2b-stanza {
  padding: 18px 20px;
  cursor: pointer;
  transition: background 0.12s ease;
  border-right: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 130px;
}
[data-ui="v2"] #viewDash .v2b-stanza:last-child { border-right: none; }
[data-ui="v2"] #viewDash .v2b-stanza:hover { background: var(--paper-2); }
[data-ui="v2"] #viewDash .v2b-stanza-hd {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-2);
}
[data-ui="v2"] #viewDash .v2b-stanza-hd .em { font-size: 14px; }
[data-ui="v2"] #viewDash .v2b-stanza-line {
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
  line-height: 1.35;
  letter-spacing: -0.005em;
}
[data-ui="v2"] #viewDash .v2b-stanza-meta {
  font-size: 12.5px;
  color: var(--ink-2);
  line-height: 1.45;
}
[data-ui="v2"] #viewDash .v2b-stanza-cta {
  margin-top: auto;
  font-size: 11px;
  font-weight: 600;
  color: var(--teal);
  display: flex;
  align-items: center;
  gap: 4px;
}

/* ── This Week 4-tile metrics grid ──────────────────────────────────── */
[data-ui="v2"] #viewDash .sh.v2-week-hd,
[data-ui="v2"] #viewDash .sh.v2-goals-hd {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin: 24px 0 10px;
}
[data-ui="v2"] #viewDash .sh.v2-week-hd .sh-title,
[data-ui="v2"] #viewDash .sh.v2-goals-hd .sh-title {
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--ink);
}
[data-ui="v2"] #viewDash .sh.v2-week-hd .sh-sub,
[data-ui="v2"] #viewDash .sh.v2-goals-hd .sh-sub,
[data-ui="v2"] #viewDash .sh.v2-goals-hd .sh-link {
  font-size: 12px;
  color: var(--ink-2);
}
[data-ui="v2"] #viewDash .sh.v2-goals-hd .sh-link {
  color: var(--teal);
  font-weight: 600;
  cursor: pointer;
}

[data-ui="v2"] #viewDash .v2-week {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}
@media (max-width: 1024px) {
  [data-ui="v2"] #viewDash .v2-week { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 480px) {
  [data-ui="v2"] #viewDash .v2-week { grid-template-columns: 1fr; }
}
[data-ui="v2"] #viewDash .v2w-tile {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 16px 18px;
  box-shadow: var(--shadow-1), var(--bevel-card);
  display: flex;
  flex-direction: column;
  gap: 8px;
  cursor: pointer;
  transition: box-shadow 0.18s ease, border-color 0.18s ease, transform 0.18s ease;
}
[data-ui="v2"] #viewDash .v2w-tile:hover {
  box-shadow: var(--shadow-2), var(--bevel-card);
  border-color: var(--line-2);
  transform: translateY(-1px);
}
[data-ui="v2"] #viewDash .v2w-eyebrow {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-2);
}
[data-ui="v2"] #viewDash .v2w-val {
  font-family: var(--font-num);
  font-feature-settings: 'tnum' 1;
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -0.025em;
  color: var(--ink);
  line-height: 1.05;
}
[data-ui="v2"] #viewDash .v2w-val .unit {
  font-family: var(--font-sans, inherit);
  font-feature-settings: normal;
  font-size: 11.5px;
  font-weight: 500;
  color: var(--ink-2);
  letter-spacing: 0;
  margin-left: 2px;
}
[data-ui="v2"] #viewDash .v2w-val-empty {
  font-family: var(--font-sans, inherit);
  font-feature-settings: normal;
  font-size: 16px;
  font-weight: 600;
  color: var(--teal-deep);
  letter-spacing: -0.005em;
}
[data-ui="v2"] #viewDash .v2w-bar {
  height: 6px;
  background: var(--paper-2);
  border-radius: var(--r-pill);
  overflow: hidden;
}
[data-ui="v2"] #viewDash .v2w-bar > span {
  display: block;
  height: 100%;
  border-radius: var(--r-pill);
  transition: width 0.35s ease;
}
[data-ui="v2"] #viewDash .v2w-tile.distance .v2w-bar > span { background: var(--teal); }
[data-ui="v2"] #viewDash .v2w-tile.sleep    .v2w-bar > span { background: var(--plum, #7c5cff); }
[data-ui="v2"] #viewDash .v2w-tile.move     .v2w-bar > span { background: var(--teal); }
[data-ui="v2"] #viewDash .v2w-tile.nut      .v2w-bar > span { background: linear-gradient(90deg, #f59e0b, #ea580c); }
[data-ui="v2"] #viewDash .v2w-foot {
  font-size: 11px;
  color: var(--ink-2);
  display: flex;
  justify-content: space-between;
  gap: 6px;
}

/* ── Active Goals row ────────────────────────────────────────────────── */
[data-ui="v2"] #viewDash .v2-goals {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 24px;
}
[data-ui="v2"] #viewDash .v2-goal-row {
  display: grid;
  grid-template-columns: 1fr 110px 60px;
  gap: 16px;
  align-items: center;
  padding: 14px 16px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-1), var(--bevel-card);
  cursor: pointer;
  transition: box-shadow 0.18s ease, border-color 0.18s ease, transform 0.18s ease;
}
[data-ui="v2"] #viewDash .v2-goal-row:hover {
  border-color: var(--line-2);
  box-shadow: var(--shadow-2), var(--bevel-card);
  transform: translateY(-1px);
}
[data-ui="v2"] #viewDash .v2-goal-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: -0.005em;
}
[data-ui="v2"] #viewDash .v2-goal-meta {
  font-size: 11.5px;
  color: var(--ink-2);
  margin-top: 2px;
}
[data-ui="v2"] #viewDash .v2-goal-bar {
  height: 6px;
  background: var(--paper-2);
  border-radius: var(--r-pill);
  overflow: hidden;
}
[data-ui="v2"] #viewDash .v2-goal-bar > span {
  display: block;
  height: 100%;
  background: var(--teal);
  border-radius: var(--r-pill);
}
[data-ui="v2"] #viewDash .v2-goal-row.below .v2-goal-bar > span {
  background: var(--warm, #f59e0b);
}
[data-ui="v2"] #viewDash .v2-goal-pct {
  font-family: var(--font-num);
  font-feature-settings: 'tnum' 1;
  text-align: right;
  font-size: 14px;
  font-weight: 700;
  color: var(--ink);
}
[data-ui="v2"] #viewDash .v2-goals-empty {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  background: var(--paper);
  border: 1px dashed var(--line-2);
  border-radius: var(--r-lg);
  color: var(--ink-2);
  font-size: 14px;
  cursor: pointer;
}
[data-ui="v2"] #viewDash .v2-goals-empty strong { color: var(--ink); font-weight: 600; }

/* Mobile collapse for goal rows */
@media (max-width: 720px) {
  [data-ui="v2"] #viewDash .v2-goal-row {
    grid-template-columns: 1fr 60px;
  }
  [data-ui="v2"] #viewDash .v2-goal-bar { display: none; }
  [data-ui="v2"] #viewDash .v2b-body { grid-template-columns: 1fr; }
  [data-ui="v2"] #viewDash .v2b-stanza {
    border-right: none;
    border-bottom: 1px solid var(--line);
    min-height: 0;
  }
  [data-ui="v2"] #viewDash .v2b-stanza:last-child { border-bottom: none; }
}


/* ═══════════════════════════════════════════════════════════════════════
   STEP 7 — app-v2.js Dashboard renderer (.v2d-*)
   Owns the dashboard view directly (no DOM injection). Mirrors the
   /static/v2/dashboard.html mockup pixel-for-pixel.
   ═══════════════════════════════════════════════════════════════════════ */

[data-ui="v2"] #viewDash #dashContent {
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 0;
}

/* ── Shared bits ──────────────────────────────────────────────────── */
[data-ui="v2"] .v2d-sec-hd {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin: 8px 0 -4px;
}
[data-ui="v2"] .v2d-sec-title {
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--ink);
}
[data-ui="v2"] .v2d-sec-sub {
  font-size: 12px;
  color: var(--ink-2);
}
[data-ui="v2"] .v2d-sec-link {
  font-size: 12px;
  color: var(--teal);
  font-weight: 600;
  cursor: pointer;
}
[data-ui="v2"] .v2d-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: var(--r-pill);
  background: rgba(255,255,255,0.7);
  border: 1px solid rgba(13,148,136,0.18);
  color: var(--teal-deep);
  font-size: 12px;
  font-weight: 600;
}
[data-ui="v2"] .v2d-pill.gray {
  background: var(--paper-2);
  border-color: var(--line);
  color: var(--ink-2);
}
[data-ui="v2"] .v2d-pill .dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: currentColor;
}
[data-ui="v2"] .v2d-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 11px 18px;
  border-radius: var(--r-md);
  border: 1px solid transparent;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  transition: background 0.12s ease, border-color 0.12s ease;
}
[data-ui="v2"] .v2d-btn.sm  { padding: 8px 14px; font-size: 12.5px; }
[data-ui="v2"] .v2d-btn.primary {
  background: var(--teal);
  border-color: var(--teal);
  color: #fff;
  box-shadow: 0 1px 0 rgba(255,255,255,0.15) inset, var(--shadow-1);
}
[data-ui="v2"] .v2d-btn.primary:hover {
  background: var(--teal-deep);
  border-color: var(--teal-deep);
}
[data-ui="v2"] .v2d-btn.outline {
  background: var(--paper);
  border-color: var(--line);
  color: var(--ink);
  box-shadow: var(--shadow-1);
}
[data-ui="v2"] .v2d-btn.outline:hover {
  background: var(--paper-2);
  border-color: var(--line-2);
}
[data-ui="v2"] .v2d-empty {
  background: var(--paper-2);
  border: 1px dashed var(--line-2);
  border-radius: var(--r-lg);
  padding: 24px;
  text-align: center;
  color: var(--ink-2);
  font-size: 13px;
}
[data-ui="v2"] .v2-error {
  padding: 40px;
  text-align: center;
  color: var(--ink-2);
}

/* ── Hero ─────────────────────────────────────────────────────────── */
[data-ui="v2"] .v2d-hero {
  background:
    radial-gradient(ellipse 720px 360px at 95% 0%,    rgba(13,148,136,0.20) 0%, transparent 55%),
    radial-gradient(ellipse 480px 280px at -5% 100%,  rgba(124,92,255,0.12) 0%, transparent 60%),
    linear-gradient(160deg, #effbf6 0%, #ffffff 55%, #fffaf0 100%);
  border: 1px solid #b9e8df;
  border-radius: 28px;
  padding: 28px 32px;
  box-shadow:
    0 1px 2px rgba(15,26,22,0.04),
    0 12px 32px -8px rgba(13,148,136,0.18),
    0 4px 12px -4px rgba(13,148,136,0.10),
    inset 0 1px 0 rgba(255,255,255,0.9);
  position: relative;
  overflow: hidden;
}
[data-ui="v2"] .v2d-hero::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--teal-deep), var(--teal), #2dd4bf, var(--plum));
}
[data-ui="v2"] .v2d-hero.v2d-hero-caution {
  background:
    radial-gradient(ellipse 720px 360px at 95% 0%, rgba(245,158,11,0.18) 0%, transparent 55%),
    linear-gradient(160deg, #fffbeb 0%, #ffffff 55%, #fff7ed 100%);
  border-color: #fde68a;
}
[data-ui="v2"] .v2d-hero.v2d-hero-caution::before {
  background: linear-gradient(90deg, #b45309, #d97706, #fbbf24);
}
[data-ui="v2"] .v2d-hero.v2d-hero-rest {
  background:
    radial-gradient(ellipse 720px 360px at 95% 0%, rgba(239,68,68,0.18) 0%, transparent 55%),
    linear-gradient(160deg, #fef2f2 0%, #ffffff 55%, #fff5f5 100%);
  border-color: #fca5a5;
}
[data-ui="v2"] .v2d-hero.v2d-hero-rest::before {
  background: linear-gradient(90deg, #991b1b, #dc2626, #fca5a5);
}

[data-ui="v2"] .v2d-hero-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 18px;
}
[data-ui="v2"] .v2d-hero-greet {
  font-size: 13px;
  font-weight: 500;
  color: var(--ink-2);
}
[data-ui="v2"] .v2d-hero-badges {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

[data-ui="v2"] .v2d-hero-row {
  display: flex;
  align-items: center;
  gap: 28px;
  flex-wrap: wrap;
}
[data-ui="v2"] .v2d-score {
  position: relative;
  width: 168px; height: 168px;
  flex: none;
  display: grid;
  place-items: center;
}
[data-ui="v2"] .v2d-score-ring {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
}
[data-ui="v2"] .v2d-score-inner {
  position: relative;
  display: flex;
  align-items: baseline;
  gap: 4px;
  z-index: 1;
}
[data-ui="v2"] .v2d-score-num {
  font-family: var(--font-num);
  font-feature-settings: 'tnum' 1;
  font-weight: 700;
  font-size: 72px;
  line-height: 0.9;
  letter-spacing: -0.045em;
  background: linear-gradient(180deg, var(--teal-deep), var(--teal) 70%, #2dd4bf);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text;
  color: var(--teal-deep);
}
[data-ui="v2"] .v2d-hero-caution .v2d-score-num {
  background: linear-gradient(180deg, #b45309, #d97706 70%, #fbbf24);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  color: #b45309;
}
[data-ui="v2"] .v2d-hero-rest .v2d-score-num {
  background: linear-gradient(180deg, #991b1b, #dc2626 70%, #fca5a5);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  color: #991b1b;
}
[data-ui="v2"] .v2d-score-denom {
  font-size: 14px;
  font-weight: 600;
  color: var(--ink-2);
}

[data-ui="v2"] .v2d-hero-content {
  flex: 1;
  min-width: 240px;
}
[data-ui="v2"] .v2d-verdict {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px 6px 12px;
  border-radius: var(--r-pill);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 10px;
  border: 1px solid transparent;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.6), 0 1px 2px rgba(0,0,0,0.05);
}
[data-ui="v2"] .v2d-verdict-ready {
  background: linear-gradient(135deg, #ccfbf1, #a7f3d8);
  color: var(--teal-deep);
  border-color: rgba(13,148,136,0.20);
}
[data-ui="v2"] .v2d-verdict-caution {
  background: linear-gradient(135deg, #fef3c7, #fde68a);
  color: #92400e;
  border-color: rgba(245,158,11,0.25);
}
[data-ui="v2"] .v2d-verdict-rest {
  background: linear-gradient(135deg, #fee2e2, #fecaca);
  color: #991b1b;
  border-color: rgba(239,68,68,0.25);
}
[data-ui="v2"] .v2d-verdict .dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: currentColor;
}
[data-ui="v2"] .v2d-hero-headline {
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--ink);
  margin: 4px 0 0;
  max-width: 540px;
}

[data-ui="v2"] .v2d-hero-rec {
  font-size: 14px;
  line-height: 1.55;
  color: var(--ink-soft);
  margin: 10px 0 0;
  max-width: 600px;
}

/* 7-day trend mini-chart */
[data-ui="v2"] .v2d-trend {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  margin-top: 12px;
  border-radius: var(--r-md);
  background: rgba(255,255,255,0.6);
  border: 1px solid rgba(13,148,136,0.18);
  backdrop-filter: blur(8px);
}
[data-ui="v2"] .v2d-trend-lbl {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ink-2);
}
[data-ui="v2"] .v2d-trend svg { display: block; }
[data-ui="v2"] .v2d-trend-now {
  font-family: var(--font-num);
  font-feature-settings: 'tnum' 1;
  font-size: 13px;
  font-weight: 700;
  color: var(--teal-deep);
}
[data-ui="v2"] .v2d-trend-delta {
  font-size: 11px;
  font-weight: 600;
  color: var(--teal-deep);
  padding: 2px 6px;
  border-radius: var(--r-sm);
  background: var(--teal-soft);
}

[data-ui="v2"] .v2d-hero-cta {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 18px;
}

/* Building state */
[data-ui="v2"] .v2d-hero-build-body {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  margin-top: 8px;
}
[data-ui="v2"] .v2d-hero-icon {
  font-size: 32px;
  line-height: 1;
}
[data-ui="v2"] .v2d-hero-build-title {
  font-size: 16px;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 4px;
}
[data-ui="v2"] .v2d-hero-build-sub {
  font-size: 13px;
  color: var(--ink-soft);
  margin-bottom: 12px;
  max-width: 540px;
}

/* ── Daily Brief (3 stanzas) ──────────────────────────────────────── */
[data-ui="v2"] .v2d-brief {
  background: linear-gradient(180deg, #ffffff, #fcfcfa);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  overflow: hidden;
  box-shadow: var(--shadow-1), var(--bevel-card);
}
[data-ui="v2"] .v2d-brief-hdr {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px 12px;
}
[data-ui="v2"] .v2d-brief-title {
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.005em;
  color: var(--ink);
  display: flex;
  align-items: center;
  gap: 8px;
}
[data-ui="v2"] .v2d-brief-date {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-2);
}
[data-ui="v2"] .v2d-brief-body {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid var(--line);
}
[data-ui="v2"] .v2d-stanza {
  padding: 18px 20px;
  cursor: pointer;
  transition: background 0.12s ease;
  border-right: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 130px;
}
[data-ui="v2"] .v2d-stanza:last-child { border-right: none; }
[data-ui="v2"] .v2d-stanza:hover { background: var(--paper-2); }
[data-ui="v2"] .v2d-stanza-hd {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-2);
}
[data-ui="v2"] .v2d-stanza-hd .em { font-size: 14px; }
[data-ui="v2"] .v2d-stanza-line {
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
  line-height: 1.35;
  letter-spacing: -0.005em;
}
[data-ui="v2"] .v2d-stanza-meta {
  font-size: 12.5px;
  color: var(--ink-2);
  line-height: 1.45;
}
[data-ui="v2"] .v2d-stanza-cta {
  margin-top: auto;
  font-size: 11px;
  font-weight: 600;
  color: var(--teal);
}

/* ── Recent Activity (3-card row) ─────────────────────────────────── */
[data-ui="v2"] .v2d-recent {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}

/* Activity card */
[data-ui="v2"] .v2d-act-card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-1), var(--bevel-card);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  cursor: pointer;
  transition: box-shadow 0.18s ease, transform 0.18s ease, border-color 0.18s ease;
}
[data-ui="v2"] .v2d-act-card:hover {
  box-shadow: var(--shadow-2), var(--bevel-card);
  transform: translateY(-1px);
  border-color: var(--line-2);
}
[data-ui="v2"] .v2d-act-map {
  position: relative;
  height: 130px;
  background: linear-gradient(120deg, #e9f0e4, #e0eadb);
  overflow: hidden;
}
[data-ui="v2"] .v2d-act-map-placeholder {
  width: 100%; height: 100%;
  display: grid;
  place-items: center;
}
[data-ui="v2"] .v2d-act-source {
  position: absolute;
  top: 10px; right: 10px;
  padding: 3px 8px;
  border-radius: var(--r-sm);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
[data-ui="v2"] .v2d-act-source-strava { background: #ffe8da; color: #FC5200; }
[data-ui="v2"] .v2d-act-source-garmin { background: #d6ecf9; color: #0073bd; }
[data-ui="v2"] .v2d-act-source-manual { background: var(--paper-2); color: var(--ink-2); }
[data-ui="v2"] .v2d-act-sport {
  position: absolute;
  bottom: 10px; left: 10px;
  width: 32px; height: 32px;
  border-radius: var(--r-md);
  background: var(--paper);
  box-shadow: var(--shadow-1);
  display: grid;
  place-items: center;
  font-size: 16px;
}
[data-ui="v2"] .v2d-act-body {
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
[data-ui="v2"] .v2d-act-meta {
  font-size: 11.5px;
  color: var(--ink-2);
}
[data-ui="v2"] .v2d-act-title {
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.005em;
  color: var(--ink);
}
[data-ui="v2"] .v2d-act-stats {
  display: flex;
  align-items: center;
  gap: 0;
  padding-top: 10px;
  border-top: 1px solid var(--line);
  margin-top: 4px;
}
[data-ui="v2"] .v2d-act-stat {
  flex: 1;
  text-align: left;
}
[data-ui="v2"] .v2d-act-sep {
  flex: 0 0 1px;
  align-self: stretch;
  background: var(--line);
  margin: 4px 14px;
}
[data-ui="v2"] .v2d-act-stat-val {
  font-family: var(--font-num);
  font-feature-settings: 'tnum' 1;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--ink);
}
[data-ui="v2"] .v2d-act-stat-val .unit {
  font-weight: 500;
  font-size: 11px;
  color: var(--ink-2);
  margin-left: 2px;
}
[data-ui="v2"] .v2d-act-stat-lbl {
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-2);
  margin-top: 2px;
}
[data-ui="v2"] .v2d-act-foot {
  font-size: 12px;
  color: var(--ink-2);
  padding-top: 6px;
}
[data-ui="v2"] .v2d-act-empty {
  background: var(--paper-2);
  border: 1px dashed var(--line-2);
}
[data-ui="v2"] .v2d-act-empty-body {
  padding: 28px 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  text-align: center;
}
[data-ui="v2"] .v2d-act-empty-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
}
[data-ui="v2"] .v2d-act-empty-sub {
  font-size: 12px;
  color: var(--ink-2);
}

/* Nutrition card */
[data-ui="v2"] .v2d-nut-card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  padding: 18px 20px;
  box-shadow: var(--shadow-1), var(--bevel-card);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
[data-ui="v2"] .v2d-nut-card.v2d-nut-empty {
  background: var(--paper-2);
}
[data-ui="v2"] .v2d-nut-hdr {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
[data-ui="v2"] .v2d-nut-eyebrow {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-2);
}
[data-ui="v2"] .v2d-nut-cals {
  font-family: var(--font-num);
  font-feature-settings: 'tnum' 1;
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -0.025em;
  color: var(--ink);
  line-height: 1.05;
}
[data-ui="v2"] .v2d-nut-cals .unit {
  font-family: var(--font-sans, inherit);
  font-feature-settings: normal;
  font-size: 12px;
  font-weight: 500;
  color: var(--ink-2);
  letter-spacing: 0;
  margin-left: 4px;
}
[data-ui="v2"] .v2d-nut-bar {
  height: 8px;
  background: var(--paper-2);
  border-radius: var(--r-pill);
  overflow: hidden;
}
[data-ui="v2"] .v2d-nut-bar > span {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, #f59e0b, #ea580c);
  border-radius: var(--r-pill);
}
[data-ui="v2"] .v2d-nut-foot {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  color: var(--ink-2);
}
[data-ui="v2"] .v2d-nut-foot b { color: var(--ink); }
[data-ui="v2"] .v2d-nut-empty-msg {
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
}
[data-ui="v2"] .v2d-nut-empty-sub {
  font-size: 12.5px;
  color: var(--ink-2);
  line-height: 1.45;
}

/* Race countdown card */
[data-ui="v2"] .v2d-race-card {
  background:
    radial-gradient(ellipse 200px 140px at 90% 0%, rgba(13,148,136,0.18) 0%, transparent 60%),
    linear-gradient(160deg, #f7fefb, #d6f5ec);
  border: 1px solid var(--teal-soft);
  border-radius: var(--r-xl);
  padding: 20px;
  box-shadow:
    0 1px 2px rgba(15,26,22,0.04),
    0 6px 18px -4px rgba(13,148,136,0.18),
    inset 0 1px 0 rgba(255,255,255,0.8);
  display: flex;
  flex-direction: column;
  gap: 10px;
  cursor: pointer;
  transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}
[data-ui="v2"] .v2d-race-card:hover {
  transform: translateY(-1px);
  border-color: #6ee7b7;
  box-shadow:
    0 1px 2px rgba(15,26,22,0.04),
    0 12px 24px -6px rgba(13,148,136,0.28),
    inset 0 1px 0 rgba(255,255,255,0.8);
}
[data-ui="v2"] .v2d-race-eyebrow {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--teal-deep);
}
[data-ui="v2"] .v2d-race-days {
  font-family: var(--font-num);
  font-feature-settings: 'tnum' 1;
  font-weight: 700;
  font-size: 44px;
  line-height: 0.95;
  letter-spacing: -0.025em;
  color: var(--teal-deep);
}
[data-ui="v2"] .v2d-race-days .unit {
  font-family: var(--font-sans, inherit);
  font-feature-settings: normal;
  font-size: 13px;
  font-weight: 500;
  color: var(--teal);
  letter-spacing: 0;
  margin-left: 6px;
}
[data-ui="v2"] .v2d-race-line {
  font-size: 12.5px;
  color: var(--ink-soft);
  line-height: 1.45;
}
[data-ui="v2"] .v2d-race-line b {
  color: var(--teal-deep);
  font-weight: 700;
}
[data-ui="v2"] .v2d-race-empty .v2d-race-empty-line {
  font-size: 13px;
  color: var(--ink-soft);
  line-height: 1.5;
}

/* ── This Week (4 tiles) ──────────────────────────────────────────── */
[data-ui="v2"] .v2d-week {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}
[data-ui="v2"] .v2d-tile {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 16px 18px;
  box-shadow: var(--shadow-1), var(--bevel-card);
  display: flex;
  flex-direction: column;
  gap: 8px;
  cursor: pointer;
  transition: box-shadow 0.18s ease, border-color 0.18s ease, transform 0.18s ease;
}
[data-ui="v2"] .v2d-tile:hover {
  box-shadow: var(--shadow-2), var(--bevel-card);
  border-color: var(--line-2);
  transform: translateY(-1px);
}
[data-ui="v2"] .v2d-tile-eyebrow {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-2);
}
[data-ui="v2"] .v2d-tile-val {
  font-family: var(--font-num);
  font-feature-settings: 'tnum' 1;
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -0.025em;
  color: var(--ink);
  line-height: 1.05;
}
[data-ui="v2"] .v2d-tile-val .unit {
  font-family: var(--font-sans, inherit);
  font-feature-settings: normal;
  font-size: 11.5px;
  font-weight: 500;
  color: var(--ink-2);
  letter-spacing: 0;
  margin-left: 2px;
}
[data-ui="v2"] .v2d-tile-empty {
  font-family: var(--font-sans, inherit);
  font-feature-settings: normal;
  font-size: 16px;
  font-weight: 600;
  color: var(--teal-deep);
  letter-spacing: -0.005em;
}
[data-ui="v2"] .v2d-tile-bar {
  height: 6px;
  background: var(--paper-2);
  border-radius: var(--r-pill);
  overflow: hidden;
}
[data-ui="v2"] .v2d-tile-bar > span {
  display: block;
  height: 100%;
  border-radius: var(--r-pill);
  transition: width 0.35s ease;
}
[data-ui="v2"] .v2d-tile.distance .v2d-tile-bar > span { background: var(--teal); }
[data-ui="v2"] .v2d-tile.sleep    .v2d-tile-bar > span { background: var(--plum, #7c5cff); }
[data-ui="v2"] .v2d-tile.move     .v2d-tile-bar > span { background: var(--teal); }
[data-ui="v2"] .v2d-tile.nut      .v2d-tile-bar > span { background: linear-gradient(90deg, #f59e0b, #ea580c); }
[data-ui="v2"] .v2d-tile-foot {
  font-size: 11px;
  color: var(--ink-2);
  display: flex;
  justify-content: space-between;
  gap: 6px;
}

/* ── Last 7 Days charts (side-by-side stat panel + chart) ─────────── */
[data-ui="v2"] .v2d-charts {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
[data-ui="v2"] .v2d-chart-card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-1), var(--bevel-card);
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 0;
  overflow: hidden;
}
[data-ui="v2"] .v2d-chart-side {
  padding: 18px 20px;
  border-right: 1px solid var(--line);
  background: var(--paper-2);
  display: flex;
  flex-direction: column;
  gap: 8px;
}
[data-ui="v2"] .v2d-chart-hdr {
  display: flex;
  align-items: center;
  gap: 8px;
}
[data-ui="v2"] .v2d-chart-icon {
  width: 28px; height: 28px;
  border-radius: 9px;
  background: var(--paper);
  border: 1px solid var(--line);
  display: grid; place-items: center;
  font-size: 14px;
}
[data-ui="v2"] .v2d-chart-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
}
[data-ui="v2"] .v2d-chart-trend {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 2px 8px;
  border-radius: var(--r-pill);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
[data-ui="v2"] .v2d-chart-trend-up   { background: var(--teal-soft); color: var(--teal-deep); }
[data-ui="v2"] .v2d-chart-trend-down { background: #fee2e2; color: #991b1b; }
[data-ui="v2"] .v2d-chart-trend-flat { background: var(--paper); color: var(--ink-2); border: 1px solid var(--line); }
[data-ui="v2"] .v2d-chart-val {
  font-family: var(--font-num);
  font-feature-settings: 'tnum' 1;
  font-size: 28px;
  font-weight: 700;
  letter-spacing: -0.025em;
  color: var(--ink);
  line-height: 1;
}
[data-ui="v2"] .v2d-chart-val .unit {
  font-family: var(--font-sans, inherit);
  font-feature-settings: normal;
  font-size: 12px;
  font-weight: 500;
  color: var(--ink-2);
  letter-spacing: 0;
  margin-left: 3px;
}
[data-ui="v2"] .v2d-chart-val-lbl {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-2);
}
[data-ui="v2"] .v2d-chart-meta {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 12px;
}
[data-ui="v2"] .v2d-chart-meta-row {
  display: flex;
  justify-content: space-between;
  color: var(--ink-2);
}
[data-ui="v2"] .v2d-chart-meta-row b { color: var(--ink); font-weight: 600; }
[data-ui="v2"] .v2d-chart-main {
  padding: 18px 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
}
[data-ui="v2"] .v2d-chart-canvas-wrap {
  height: 130px;
  position: relative;
}
[data-ui="v2"] .v2d-chart-summary {
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--ink-soft);
  padding: 10px 12px;
  background: var(--paper-2);
  border-left: 3px solid var(--teal);
  border-radius: 4px;
}

/* ── Active Goals row ─────────────────────────────────────────────── */
[data-ui="v2"] .v2d-goals {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
[data-ui="v2"] .v2d-goal-row {
  display: grid;
  grid-template-columns: 1fr 110px 60px;
  gap: 16px;
  align-items: center;
  padding: 14px 16px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-1), var(--bevel-card);
  cursor: pointer;
  transition: box-shadow 0.18s ease, border-color 0.18s ease, transform 0.18s ease;
}
[data-ui="v2"] .v2d-goal-row:hover {
  border-color: var(--line-2);
  box-shadow: var(--shadow-2), var(--bevel-card);
  transform: translateY(-1px);
}
[data-ui="v2"] .v2d-goal-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: -0.005em;
}
[data-ui="v2"] .v2d-goal-meta {
  font-size: 11.5px;
  color: var(--ink-2);
  margin-top: 2px;
}
[data-ui="v2"] .v2d-goal-bar {
  height: 6px;
  background: var(--paper-2);
  border-radius: var(--r-pill);
  overflow: hidden;
}
[data-ui="v2"] .v2d-goal-bar > span {
  display: block;
  height: 100%;
  background: var(--teal);
  border-radius: var(--r-pill);
}
[data-ui="v2"] .v2d-goal-row.below .v2d-goal-bar > span {
  background: var(--warm, #f59e0b);
}
[data-ui="v2"] .v2d-goal-pct {
  font-family: var(--font-num);
  font-feature-settings: 'tnum' 1;
  text-align: right;
  font-size: 14px;
  font-weight: 700;
  color: var(--ink);
}
[data-ui="v2"] .v2d-goals-empty {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  background: var(--paper);
  border: 1px dashed var(--line-2);
  border-radius: var(--r-lg);
  color: var(--ink-2);
  font-size: 14px;
  cursor: pointer;
}
[data-ui="v2"] .v2d-goals-empty strong { color: var(--ink); font-weight: 600; }

/* Mobile */
@media (max-width: 1024px) {
  [data-ui="v2"] .v2d-recent { grid-template-columns: 1fr 1fr; }
  [data-ui="v2"] .v2d-recent > :nth-child(3) { grid-column: span 2; }
  [data-ui="v2"] .v2d-week { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 720px) {
  [data-ui="v2"] .v2d-hero { padding: 22px 18px; border-radius: 20px; }
  [data-ui="v2"] .v2d-score-num { font-size: 64px; }
  [data-ui="v2"] .v2d-brief-body { grid-template-columns: 1fr; }
  [data-ui="v2"] .v2d-stanza { border-right: none; border-bottom: 1px solid var(--line); min-height: 0; }
  [data-ui="v2"] .v2d-stanza:last-child { border-bottom: none; }
  [data-ui="v2"] .v2d-recent { grid-template-columns: 1fr; }
  [data-ui="v2"] .v2d-recent > :nth-child(3) { grid-column: auto; }
  [data-ui="v2"] .v2d-week { grid-template-columns: 1fr; }
  [data-ui="v2"] .v2d-chart-card { grid-template-columns: 1fr; }
  [data-ui="v2"] .v2d-chart-side { border-right: none; border-bottom: 1px solid var(--line); }
  [data-ui="v2"] .v2d-goal-row { grid-template-columns: 1fr 60px; }
  [data-ui="v2"] .v2d-goal-bar { display: none; }
}


/* ═══════════════════════════════════════════════════════════════════════
   STEP 8 — Insights view (.v2i-*)
   Mirrors /static/v2/insights.html mockup. Renders into existing
   #insightCardsBody container; v1 tabs/reports stay below for now.
   ═══════════════════════════════════════════════════════════════════════ */

/* v2 used to force flex-column on #insightCardsBody so .v2i-banner +
   .v2i-grid stacked. The shared themed render replaced that with a single
   .ins-ag-grid container, so this override is no longer needed and would
   override the grid display set by static/style.css. */

/* ── Skeleton ─────────────────────────────────────────────────────── */
[data-ui="v2"] .v2i-skel-wrap {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
}
[data-ui="v2"] .v2i-skel {
  height: 140px;
  background: linear-gradient(90deg, var(--paper-2) 0%, #f3f3f1 50%, var(--paper-2) 100%);
  background-size: 200% 100%;
  border-radius: var(--r-xl);
  animation: v2i-shimmer 1.4s linear infinite;
}
@keyframes v2i-shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ── Weekly Health Score banner ───────────────────────────────────── */
[data-ui="v2"] .v2i-banner {
  background:
    radial-gradient(ellipse 540px 280px at 100% 0%, rgba(13,148,136,0.18) 0%, transparent 55%),
    linear-gradient(160deg, #f7fefb 0%, #ffffff 60%, #fffaf0 100%);
  border: 1px solid #b9e8df;
  border-radius: 24px;
  padding: 22px 26px;
  box-shadow:
    0 1px 2px rgba(15,26,22,0.04),
    0 12px 32px -8px rgba(13,148,136,0.18),
    inset 0 1px 0 rgba(255,255,255,0.9);
  display: grid;
  grid-template-columns: 130px 1fr;
  gap: 24px;
  align-items: center;
  position: relative;
  overflow: hidden;
}
[data-ui="v2"] .v2i-banner::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px;
  background: linear-gradient(90deg, var(--teal-deep), var(--teal), #2dd4bf, var(--plum));
}
[data-ui="v2"] .v2i-score {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
[data-ui="v2"] .v2i-score-num {
  font-family: var(--font-num);
  font-feature-settings: 'tnum' 1;
  font-weight: 700;
  font-size: 64px;
  line-height: 0.95;
  letter-spacing: -0.04em;
  background: linear-gradient(180deg, var(--teal-deep) 0%, var(--teal) 70%, #2dd4bf 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: var(--teal-deep);
}
[data-ui="v2"] .v2i-score-num .denom {
  font-size: 16px;
  font-weight: 500;
  color: var(--ink-2);
  margin-left: 2px;
  -webkit-text-fill-color: var(--ink-2);
}
[data-ui="v2"] .v2i-score-lbl {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-2);
  margin-top: 4px;
}
[data-ui="v2"] .v2i-comps {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
[data-ui="v2"] .v2i-comp {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 11px;
  border-radius: var(--r-pill);
  font-size: 12px;
  font-weight: 500;
  background: rgba(255,255,255,0.7);
  border: 1px solid var(--line);
  color: var(--ink-soft);
  backdrop-filter: blur(6px);
}
[data-ui="v2"] .v2i-comp .d {
  width: 6px; height: 6px;
  border-radius: 50%;
  flex: none;
}
[data-ui="v2"] .v2i-comp b {
  font-weight: 700;
  color: var(--ink);
  font-feature-settings: 'tnum' 1;
}
[data-ui="v2"] .v2i-banner-foot {
  grid-column: 1 / -1;
  padding-top: 12px;
  border-top: 1px solid rgba(13,148,136,0.18);
  font-size: 12.5px;
  color: var(--ink-soft);
}

/* ── Insight cards grid ───────────────────────────────────────────── */
[data-ui="v2"] .v2i-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
}
[data-ui="v2"] .v2i-card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  padding: 18px 20px;
  box-shadow: var(--shadow-1), var(--bevel-card);
  display: flex;
  flex-direction: column;
  gap: 8px;
  transition: box-shadow 0.18s ease, border-color 0.18s ease, transform 0.18s ease;
}
[data-ui="v2"] .v2i-card:hover {
  box-shadow: var(--shadow-2), var(--bevel-card);
  border-color: var(--line-2);
  transform: translateY(-1px);
}
[data-ui="v2"] .v2i-card-hd {
  display: flex;
  align-items: center;
  gap: 8px;
}
[data-ui="v2"] .v2i-tag {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: var(--r-pill);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border: 1px solid;
}
[data-ui="v2"] .v2i-tag-teal   { background: var(--teal-soft);          color: var(--teal-deep); border-color: #a7f3d8; }
[data-ui="v2"] .v2i-tag-plum   { background: rgba(124,92,255,0.10);     color: #5b3df0;          border-color: #c7b5ff; }
[data-ui="v2"] .v2i-tag-warm   { background: rgba(245,158,11,0.10);     color: #b45309;          border-color: #fde68a; }
[data-ui="v2"] .v2i-tag-rose   { background: rgba(239,68,68,0.10);      color: #991b1b;          border-color: #fca5a5; }
[data-ui="v2"] .v2i-tag-indigo { background: rgba(79,70,229,0.10);      color: #4338ca;          border-color: #a5b4fc; }
[data-ui="v2"] .v2i-badge {
  display: inline-flex;
  align-items: center;
  padding: 3px 8px;
  border-radius: var(--r-pill);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
[data-ui="v2"] .v2i-badge.stale {
  background: var(--paper-2);
  color: var(--ink-2);
  border: 1px solid var(--line);
}
[data-ui="v2"] .v2i-badge.conf-excellent { background: var(--teal-soft); color: var(--teal-deep); }
[data-ui="v2"] .v2i-badge.conf-good      { background: var(--teal-soft); color: var(--teal-deep); opacity: 0.8; }
[data-ui="v2"] .v2i-badge.conf-fair      { background: #fef3c7;          color: #92400e; }
[data-ui="v2"] .v2i-badge.conf-low       { background: var(--paper-2);   color: var(--ink-2); border: 1px solid var(--line); }
[data-ui="v2"] .v2i-card h3 {
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--ink);
  line-height: 1.35;
  margin: 0;
}
[data-ui="v2"] .v2i-card p {
  font-size: 13px;
  color: var(--ink-soft);
  line-height: 1.55;
  margin: 0;
}
[data-ui="v2"] .v2i-card-relates {
  margin-top: 6px;
  padding-top: 10px;
  border-top: 1px solid var(--line);
  font-size: 11.5px;
  color: var(--ink-2);
  display: flex;
  align-items: center;
  gap: 4px;
  cursor: pointer;
}
[data-ui="v2"] .v2i-card-relates a {
  color: var(--teal-deep);
  font-weight: 600;
  text-decoration: none;
}
[data-ui="v2"] .v2i-empty {
  padding: 48px 20px;
  text-align: center;
  color: var(--ink-2);
  font-size: 14px;
  background: var(--paper);
  border: 1px dashed var(--line-2);
  border-radius: var(--r-xl);
}

/* Mobile */
@media (max-width: 720px) {
  [data-ui="v2"] .v2i-banner {
    grid-template-columns: 1fr;
    padding: 18px 18px;
  }
  [data-ui="v2"] .v2i-grid { grid-template-columns: 1fr; }
  [data-ui="v2"] .v2i-skel-wrap { grid-template-columns: 1fr; }
}


/* ═══════════════════════════════════════════════════════════════════════
   STEP 9 — Goals view (.v2g-*)
   Mirrors /static/v2/goals.html mockup. Renders into existing #goalsList.
   ═══════════════════════════════════════════════════════════════════════ */

[data-ui="v2"] #viewGoals #goalsList {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

[data-ui="v2"] .v2g-card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  padding: 20px 22px;
  box-shadow: var(--shadow-1), var(--bevel-card);
  display: flex;
  flex-direction: column;
  gap: 14px;
}
[data-ui="v2"] .v2g-card.below {
  background: linear-gradient(180deg, #fffbf3 0%, var(--paper) 100%);
  border-color: #fde68a;
}
[data-ui="v2"] .v2g-card.done {
  background: linear-gradient(180deg, #f0fdf4 0%, var(--paper) 100%);
  border-color: #86efac;
}

[data-ui="v2"] .v2g-hdr {
  display: grid;
  grid-template-columns: 76px 1fr auto;
  gap: 16px;
  align-items: center;
}
[data-ui="v2"] .v2g-ring {
  position: relative;
  width: 76px; height: 76px;
}
[data-ui="v2"] .v2g-ring svg {
  width: 100%; height: 100%;
}
[data-ui="v2"] .v2g-ring-pct {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -55%);
  font-family: var(--font-num);
  font-feature-settings: 'tnum' 1;
  font-weight: 700;
  font-size: 18px;
  letter-spacing: -0.025em;
  color: var(--ink);
}
[data-ui="v2"] .v2g-ring-lbl {
  position: absolute;
  bottom: 8px; left: 50%;
  transform: translateX(-50%);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-2);
}

[data-ui="v2"] .v2g-info {
  min-width: 0;
}
[data-ui="v2"] .v2g-title {
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin-bottom: 8px;
}
[data-ui="v2"] .v2g-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  row-gap: 6px;
}
[data-ui="v2"] .v2g-meta-cell {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
[data-ui="v2"] .v2g-meta-lbl {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-2);
}
[data-ui="v2"] .v2g-meta-val {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
  font-feature-settings: 'tnum' 1;
}
[data-ui="v2"] .v2g-meta-val .delim {
  color: var(--ink-2);
  margin: 0 5px;
  font-weight: 400;
}
[data-ui="v2"] .v2g-meta-val .sub {
  color: var(--ink-2);
  font-weight: 500;
}

[data-ui="v2"] .v2g-status {
  display: inline-flex;
  align-items: center;
  padding: 5px 12px;
  border-radius: var(--r-pill);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  white-space: nowrap;
  border: 1px solid transparent;
}
[data-ui="v2"] .v2g-status-on    { background: var(--teal-soft); color: var(--teal-deep); border-color: #a7f3d8; }
[data-ui="v2"] .v2g-status-pred  { background: rgba(13,148,136,0.10); color: var(--teal-deep); border-color: rgba(13,148,136,0.20); }
[data-ui="v2"] .v2g-status-below { background: #fef3c7; color: #92400e; border-color: #fde68a; }
[data-ui="v2"] .v2g-status-done  { background: #dcfce7; color: #166534; border-color: #86efac; }

/* Weekly bars */
[data-ui="v2"] .v2g-week {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
[data-ui="v2"] .v2g-bars {
  position: relative;
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 6px;
  height: 84px;
  padding: 4px 0 18px;
}
[data-ui="v2"] .v2g-bar-day {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  position: relative;
  height: 100%;
}
[data-ui="v2"] .v2g-bar {
  width: 100%;
  border-radius: 3px 3px 0 0;
  min-height: 2px;
}
[data-ui="v2"] .v2g-bar.hit   { background: var(--teal); }
[data-ui="v2"] .v2g-bar.miss  { background: rgba(245,158,11,0.6); }
[data-ui="v2"] .v2g-bar.empty { background: var(--paper-2); }
[data-ui="v2"] .v2g-bar-lbl {
  position: absolute;
  bottom: 0;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--ink-2);
}
[data-ui="v2"] .v2g-bar-target {
  position: absolute;
  left: 0; right: 0;
  height: 1.5px;
  background: var(--teal-deep);
  opacity: 0.4;
  pointer-events: none;
}
[data-ui="v2"] .v2g-week-foot {
  font-size: 11.5px;
  color: var(--ink-2);
}

/* Insight line */
[data-ui="v2"] .v2g-insight {
  font-size: 13px;
  line-height: 1.55;
  color: var(--ink-soft);
  background: var(--paper-2);
  border-left: 3px solid var(--teal);
  padding: 10px 14px;
  border-radius: 4px;
}
[data-ui="v2"] .v2g-insight b {
  color: var(--ink);
}

/* Footer actions */
[data-ui="v2"] .v2g-foot {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}
[data-ui="v2"] .v2g-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: var(--r-md);
  border: 1px solid var(--line);
  background: var(--paper);
  color: var(--ink);
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  transition: border-color 0.12s ease, background 0.12s ease;
}
[data-ui="v2"] .v2g-btn:hover {
  border-color: var(--line-2);
  background: var(--paper-2);
}
[data-ui="v2"] .v2g-btn-icon {
  padding: 7px 10px;
  margin-left: auto;
}
[data-ui="v2"] .v2g-btn-icon + .v2g-btn-icon {
  margin-left: 0;
}

/* Mobile */
@media (max-width: 720px) {
  [data-ui="v2"] .v2g-hdr {
    grid-template-columns: 60px 1fr;
  }
  [data-ui="v2"] .v2g-ring { width: 60px; height: 60px; }
  [data-ui="v2"] .v2g-ring-pct { font-size: 14px; }
  [data-ui="v2"] .v2g-status {
    grid-column: 1 / -1;
    align-self: flex-start;
  }
  [data-ui="v2"] .v2g-meta { gap: 10px; }
}


/* ═══════════════════════════════════════════════════════════════════════
   STEP 10 — Sources view (.v2s-*)
   Mirrors /static/v2/sources.html mockup. Renders into existing
   #sourcesConnected and #sourcesAvailable containers.
   ═══════════════════════════════════════════════════════════════════════ */

[data-ui="v2"] #viewSources #sourcesConnected,
[data-ui="v2"] #viewSources #sourcesAvailable {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
[data-ui="v2"] .v2s-section-hd {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 12px 0 4px;
}
[data-ui="v2"] .v2s-eyebrow {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-2);
}
[data-ui="v2"] .v2s-count {
  font-size: 12px;
  font-weight: 600;
  color: var(--ink-2);
  background: var(--paper-2);
  padding: 2px 8px;
  border-radius: var(--r-pill);
}
[data-ui="v2"] .v2s-grid {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
[data-ui="v2"] .v2s-card {
  display: grid;
  grid-template-columns: 56px 1fr auto;
  gap: 14px;
  align-items: center;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  padding: 16px 18px;
  box-shadow: var(--shadow-1), var(--bevel-card);
  transition: box-shadow 0.18s ease, border-color 0.18s ease;
}
[data-ui="v2"] .v2s-card:hover {
  box-shadow: var(--shadow-2), var(--bevel-card);
  border-color: var(--line-2);
}
[data-ui="v2"] .v2s-card.v2s-coming { opacity: 0.85; }
[data-ui="v2"] .v2s-logo {
  width: 48px; height: 48px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  font-size: 22px;
  font-weight: 700;
  color: #fff;
  background: var(--ink-2);
  letter-spacing: -0.02em;
}
[data-ui="v2"] .v2s-logo.strava  { background: #FC5200; }
[data-ui="v2"] .v2s-logo.garmin  { background: #0073bd; }
[data-ui="v2"] .v2s-logo.apple   { background: #000;     }
[data-ui="v2"] .v2s-logo.fitbit  { background: #00B0B9;  }
[data-ui="v2"] .v2s-logo.google  { background: #4285F4;  }
[data-ui="v2"] .v2s-logo.oura    { background: #1f2937;  }
[data-ui="v2"] .v2s-logo.whoop   { background: #d6ff5b; color: #000; }
[data-ui="v2"] .v2s-logo.polar   { background: #e60012;  }
/* Strava brand-asset variant — uses the official "Powered by Strava" SVG
   from developers.strava.com instead of a colored square + letter. No
   background, width auto so the chevron + wordmark isn't squished. */
[data-ui="v2"] .v2s-logo.v2s-logo-asset {
  width: 56px; min-width: 56px;
  height: 48px;
  background: none; border-radius: 0;
  padding: 2px;
  overflow: hidden;
}
/* Constrain the "Powered by Strava" lockup with explicit px maxes — height:100%
   can't resolve against the auto-sized grid row (it ballooned to the SVG's
   natural 176x60 and overflowed the 56px column). max-width:100% resolves
   against the definite-width track; max-height caps it. */
[data-ui="v2"] .v2s-logo.v2s-logo-asset img {
  max-width: 100%;
  max-height: 40px;
  width: auto;
  height: auto;
  display: block;
}
/* Strava brand-compliant connect button — official orange (#FC5200).
   .primary in the selector raises specificity to (0,3,0) so it beats
   `.v2s-btn.primary` (the teal default), which is defined later in the
   file and would otherwise win at equal specificity. */
[data-ui="v2"] .v2s-btn.primary.v2s-btn-strava { background: #FC5200; color: #fff; border-color: #FC5200; }
[data-ui="v2"] .v2s-btn.primary.v2s-btn-strava:hover { background: #e34800; border-color: #e34800; }
[data-ui="v2"] .v2s-logo.suunto  { background: #003e7e;  }
[data-ui="v2"] .v2s-logo.coros   { background: #0f0f0f;  }
[data-ui="v2"] .v2s-name {
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.005em;
  color: var(--ink);
  margin-bottom: 4px;
}
[data-ui="v2"] .v2s-meta {
  font-size: 12.5px;
  color: var(--ink-2);
  line-height: 1.5;
}
[data-ui="v2"] .v2s-meta b { color: var(--ink); font-weight: 600; }
[data-ui="v2"] .v2s-err {
  margin-top: 6px;
  font-size: 12px;
  color: #b91c1c;
  background: #fef2f2;
  border: 1px solid #fecaca;
  border-radius: 6px;
  padding: 6px 10px;
}
[data-ui="v2"] .v2s-actions {
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: flex-end;
}
[data-ui="v2"] .v2s-btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: flex-end;
}
[data-ui="v2"] .v2s-badge {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: var(--r-pill);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
}
[data-ui="v2"] .v2s-badge.green { background: var(--teal-soft); color: var(--teal-deep); border: 1px solid #a7f3d8; }
[data-ui="v2"] .v2s-badge.err   { background: #fee2e2;          color: #991b1b;          border: 1px solid #fca5a5; }
[data-ui="v2"] .v2s-badge.gray  { background: var(--paper-2);   color: var(--ink-2);     border: 1px solid var(--line); }

[data-ui="v2"] .v2s-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 12px;
  border-radius: var(--r-md);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  border: 1px solid var(--line);
  background: var(--paper);
  color: var(--ink);
  transition: background 0.12s ease, border-color 0.12s ease;
}
[data-ui="v2"] .v2s-btn.sm { padding: 5px 10px; font-size: 11.5px; }
[data-ui="v2"] .v2s-btn.outline {
  background: var(--paper);
  border-color: var(--line);
}
[data-ui="v2"] .v2s-btn.outline:hover {
  background: var(--paper-2);
  border-color: var(--line-2);
}
[data-ui="v2"] .v2s-btn.ghost {
  background: transparent;
  border-color: var(--line);
  color: var(--ink-soft);
}
[data-ui="v2"] .v2s-btn.ghost:hover {
  background: var(--paper-2);
  color: var(--ink);
}
[data-ui="v2"] .v2s-btn.primary {
  background: var(--teal);
  border-color: var(--teal);
  color: #fff;
}
[data-ui="v2"] .v2s-btn.primary:hover {
  background: var(--teal-deep);
  border-color: var(--teal-deep);
}

[data-ui="v2"] .v2s-loading,
[data-ui="v2"] .v2s-error {
  padding: 24px;
  text-align: center;
  font-size: 13px;
  color: var(--ink-2);
}

@media (max-width: 720px) {
  [data-ui="v2"] .v2s-card {
    grid-template-columns: 44px 1fr;
  }
  [data-ui="v2"] .v2s-logo { width: 44px; height: 44px; font-size: 20px; }
  [data-ui="v2"] .v2s-actions {
    grid-column: 1 / -1;
    align-items: flex-start;
  }
  [data-ui="v2"] .v2s-btn-row { justify-content: flex-start; }
}


/* ═══════════════════════════════════════════════════════════════════════
   STEP 11 — Plan view (.v2p-*)
   Mirrors /static/v2/plan.html mockup. Renders into existing #tpContent.
   ═══════════════════════════════════════════════════════════════════════ */

[data-ui="v2"] #tpContent {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

/* Loading + empty + error */
[data-ui="v2"] .v2p-loading {
  padding: 60px 24px;
  text-align: center;
  color: var(--ink-2);
  font-size: 14px;
}
[data-ui="v2"] .v2p-spinner {
  width: 28px; height: 28px;
  margin: 0 auto 12px;
  border: 2px solid var(--line);
  border-top-color: var(--teal);
  border-radius: 50%;
  animation: v2i-shimmer 0s; /* reset */
  animation: v2-spin 0.7s linear infinite;
}
[data-ui="v2"] .v2p-empty {
  padding: 60px 24px;
  text-align: center;
  background: var(--paper);
  border: 1px dashed var(--line-2);
  border-radius: var(--r-xl);
}
[data-ui="v2"] .v2p-empty-icon {
  font-size: 48px;
  margin-bottom: 16px;
  opacity: 0.5;
}
[data-ui="v2"] .v2p-empty h2 {
  font-size: 20px;
  font-weight: 600;
  margin: 0 0 8px;
  color: var(--ink);
}
[data-ui="v2"] .v2p-empty p {
  font-size: 14px;
  color: var(--ink-2);
  margin: 0 auto 20px;
  max-width: 440px;
  line-height: 1.55;
}

/* Hero */
[data-ui="v2"] .v2p-hero {
  background:
    radial-gradient(ellipse 540px 280px at 100% 0%, rgba(13,148,136,0.16) 0%, transparent 55%),
    linear-gradient(160deg, #f7fefb 0%, #ffffff 60%, #fffaf0 100%);
  border: 1px solid #b9e8df;
  border-radius: 24px;
  padding: 24px 28px;
  box-shadow:
    0 1px 2px rgba(15,26,22,0.04),
    0 12px 32px -8px rgba(13,148,136,0.18),
    inset 0 1px 0 rgba(255,255,255,0.9);
  display: flex;
  flex-direction: column;
  gap: 18px;
  position: relative;
  overflow: hidden;
}
[data-ui="v2"] .v2p-hero::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px;
  background: linear-gradient(90deg, var(--teal-deep), var(--teal), #2dd4bf, var(--plum));
}
[data-ui="v2"] .v2p-hero-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  flex-wrap: wrap;
}
[data-ui="v2"] .v2p-hero-top h2 {
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--ink);
  margin: 4px 0 0;
}
[data-ui="v2"] .v2p-hero-top h2 .accent {
  background: linear-gradient(180deg, var(--teal-deep), var(--teal) 60%, #2dd4bf);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text;
  color: var(--teal-deep);
}
[data-ui="v2"] .v2p-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--teal-deep);
}
[data-ui="v2"] .v2p-hero-actions {
  display: flex;
  gap: 6px;
}
[data-ui="v2"] .v2p-discard {
  color: #b91c1c;
}
[data-ui="v2"] .v2p-discard:hover {
  background: #fee2e2;
  border-color: #fecaca;
  color: #991b1b;
}

/* Hero meta cells */
[data-ui="v2"] .v2p-meta {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 14px;
  padding: 14px;
  background: rgba(255,255,255,0.6);
  border: 1px solid rgba(13,148,136,0.18);
  border-radius: var(--r-lg);
  backdrop-filter: blur(6px);
}
[data-ui="v2"] .v2p-meta-cell {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
[data-ui="v2"] .v2p-meta-lbl {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-2);
}
[data-ui="v2"] .v2p-meta-val {
  font-family: var(--font-num);
  font-feature-settings: 'tnum' 1;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.025em;
  color: var(--ink);
  line-height: 1;
}
[data-ui="v2"] .v2p-meta-val .sub {
  font-family: var(--font-sans, inherit);
  font-feature-settings: normal;
  font-size: 11.5px;
  font-weight: 500;
  color: var(--ink-2);
  letter-spacing: 0;
  margin-left: 4px;
}

/* Progress bar */
[data-ui="v2"] .v2p-progress { display: flex; flex-direction: column; gap: 10px; }
[data-ui="v2"] .v2p-progress-row {
  display: flex;
  justify-content: space-between;
  font-size: 12.5px;
  color: var(--ink-2);
}
[data-ui="v2"] .v2p-progress-row b {
  color: var(--ink);
  font-weight: 700;
}
[data-ui="v2"] .v2p-progress-bar {
  height: 8px;
  background: rgba(255,255,255,0.6);
  border-radius: var(--r-pill);
  border: 1px solid rgba(13,148,136,0.18);
  overflow: hidden;
}
[data-ui="v2"] .v2p-progress-bar > span {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--teal-deep), var(--teal), #2dd4bf);
  border-radius: var(--r-pill);
  transition: width 0.35s ease;
}

/* Phase chips */
[data-ui="v2"] .v2p-phases {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
[data-ui="v2"] .v2p-phase {
  flex: 1;
  min-width: 80px;
  padding: 8px 10px;
  border-radius: var(--r-md);
  background: rgba(255,255,255,0.6);
  border: 1px solid var(--line);
  text-align: center;
}
[data-ui="v2"] .v2p-phase.done {
  background: var(--teal-soft);
  border-color: #a7f3d8;
}
[data-ui="v2"] .v2p-phase.active {
  background: rgba(13,148,136,0.10);
  border: 2px solid var(--teal);
}
[data-ui="v2"] .v2p-phase-lbl {
  font-size: 12px;
  font-weight: 700;
  color: var(--ink);
}
[data-ui="v2"] .v2p-phase-wk {
  font-size: 10px;
  color: var(--ink-2);
  margin-top: 2px;
}

/* This week sessions */
[data-ui="v2"] .v2p-sessions {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
[data-ui="v2"] .v2p-session {
  display: grid;
  grid-template-columns: 70px 1fr;
  gap: 14px;
  padding: 14px 16px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-1);
}
[data-ui="v2"] .v2p-session-race {
  background: linear-gradient(180deg, #fffbf3 0%, var(--paper) 100%);
  border-color: #fde68a;
}
[data-ui="v2"] .v2p-session-day {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-2);
  padding-top: 2px;
}
[data-ui="v2"] .v2p-session-lbl {
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 2px;
}
[data-ui="v2"] .v2p-session-meta {
  font-size: 12px;
  color: var(--ink-2);
}
[data-ui="v2"] .v2p-session-guidance {
  font-size: 12.5px;
  color: var(--ink-soft);
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px solid var(--line);
}

/* All weeks list */
[data-ui="v2"] .v2p-weeks {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
[data-ui="v2"] .v2p-week-row {
  display: grid;
  grid-template-columns: 70px 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 10px 14px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  font-size: 13px;
}
[data-ui="v2"] .v2p-week-row.done {
  background: var(--paper-2);
  color: var(--ink-2);
  opacity: 0.85;
}
[data-ui="v2"] .v2p-week-row.current {
  background: linear-gradient(180deg, #f7fefb 0%, var(--paper) 100%);
  border-color: var(--teal-soft);
  border-left: 3px solid var(--teal);
}
[data-ui="v2"] .v2p-week-num {
  font-weight: 700;
  font-size: 12px;
  color: var(--ink-2);
  letter-spacing: 0.04em;
}
[data-ui="v2"] .v2p-week-row.current .v2p-week-num { color: var(--teal-deep); }
[data-ui="v2"] .v2p-week-phase {
  font-weight: 600;
  color: var(--ink);
}
[data-ui="v2"] .v2p-week-stats {
  font-size: 11.5px;
  color: var(--ink-2);
  margin-top: 1px;
}
[data-ui="v2"] .v2p-week-tick {
  color: var(--teal-deep);
  font-weight: 700;
}
[data-ui="v2"] .v2p-week-now {
  background: var(--teal);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: var(--r-pill);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* Section header used by Plan */
[data-ui="v2"] .v2-sec-hd {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin: 8px 0 -4px;
}
[data-ui="v2"] .v2-sec-title {
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--ink);
}
[data-ui="v2"] .v2-sec-sub {
  font-size: 12px;
  color: var(--ink-2);
}
[data-ui="v2"] .v2-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 11px 18px;
  border-radius: var(--r-md);
  border: 1px solid transparent;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  transition: background 0.12s ease, border-color 0.12s ease;
}
[data-ui="v2"] .v2-btn.sm  { padding: 8px 14px; font-size: 12.5px; }
[data-ui="v2"] .v2-btn.primary {
  background: var(--teal);
  border-color: var(--teal);
  color: #fff;
}
[data-ui="v2"] .v2-btn.primary:hover { background: var(--teal-deep); border-color: var(--teal-deep); }
[data-ui="v2"] .v2-btn.outline {
  background: var(--paper);
  border-color: var(--line);
  color: var(--ink);
}
[data-ui="v2"] .v2-btn.outline:hover { background: var(--paper-2); border-color: var(--line-2); }
[data-ui="v2"] .v2-btn.ghost {
  background: transparent;
  border-color: var(--line);
  color: var(--ink-soft);
}
[data-ui="v2"] .v2-btn.ghost:hover { background: var(--paper-2); color: var(--ink); }

@media (max-width: 720px) {
  [data-ui="v2"] .v2p-hero { padding: 18px 18px; }
  [data-ui="v2"] .v2p-meta { grid-template-columns: 1fr 1fr; gap: 10px; }
  [data-ui="v2"] .v2p-phases { flex-direction: column; }
  [data-ui="v2"] .v2p-phase { flex: 1 1 auto; }
  [data-ui="v2"] .v2p-week-row { grid-template-columns: 50px 1fr auto; }
}


/* ═══════════════════════════════════════════════════════════════════════
   STEP 12 — Activities view (.v2a-* + restyle of v1 .act-card markup)
   Mirrors /static/v2/activities.html mockup. Doesn't replace v1's
   loadActivities — just restyles the markup it emits to v2 design.
   The activities summary card on top is still injected by integrate.js.
   ═══════════════════════════════════════════════════════════════════════ */

[data-ui="v2"] #actsScroll {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 0;
}

/* Filter chips */
[data-ui="v2"] #actsFilters {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
[data-ui="v2"] .acts-chip {
  padding: 7px 14px;
  border-radius: var(--r-pill);
  background: var(--paper);
  border: 1px solid var(--line);
  color: var(--ink-soft);
  font-size: 12.5px;
  font-weight: 500;
  cursor: pointer;
  font-family: inherit;
  transition: background 0.12s ease, border-color 0.12s ease;
}
[data-ui="v2"] .acts-chip:hover {
  background: var(--paper-2);
  border-color: var(--line-2);
}
[data-ui="v2"] .acts-chip-active,
[data-ui="v2"] .acts-chip.active {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--paper);
}

/* Quick-log banner */
[data-ui="v2"] .acts-quick-log {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  background: linear-gradient(180deg, #f7fefb 0%, var(--paper) 100%);
  border: 1px solid var(--teal-soft);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-1);
}
[data-ui="v2"] .acts-quick-log-text {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  color: var(--ink-soft);
  line-height: 1.5;
}
[data-ui="v2"] .acts-quick-log-ico {
  font-size: 22px;
  flex: none;
}
[data-ui="v2"] .acts-quick-log-text strong { color: var(--ink); }
[data-ui="v2"] .acts-quick-log-btn {
  background: var(--teal);
  border: 1px solid var(--teal);
  color: #fff;
  padding: 9px 16px;
  border-radius: var(--r-md);
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  flex: none;
}
[data-ui="v2"] .acts-quick-log-btn:hover {
  background: var(--teal-deep);
  border-color: var(--teal-deep);
}

/* Activity cards (v1 .act-card markup, restyled) */
[data-ui="v2"] #actsList {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
[data-ui="v2"] #actsList .act-card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  padding: 0;
  overflow: hidden;
  box-shadow: var(--shadow-1), var(--bevel-card);
  transition: box-shadow 0.18s ease, border-color 0.18s ease;
}
[data-ui="v2"] #actsList .act-card:hover {
  box-shadow: var(--shadow-2), var(--bevel-card);
  border-color: var(--line-2);
}
[data-ui="v2"] #actsList .act-card .act-hdr {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
}
[data-ui="v2"] #actsList .act-card .act-icon {
  width: 36px; height: 36px;
  border-radius: 10px;
  background: var(--paper-2);
  border: 1px solid var(--line);
  display: grid;
  place-items: center;
  font-size: 18px;
  flex: none;
}
[data-ui="v2"] #actsList .act-card .act-titles {
  flex: 1;
  min-width: 0;
}
[data-ui="v2"] #actsList .act-card .act-title {
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.005em;
  color: var(--ink);
  margin-bottom: 2px;
}
[data-ui="v2"] #actsList .act-card .act-meta {
  font-size: 12px;
  color: var(--ink-2);
}
[data-ui="v2"] #actsList .act-card .act-src-pill {
  flex: none;
  padding: 3px 8px;
  border-radius: var(--r-sm);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
[data-ui="v2"] #actsList .act-card .act-src-pill.strava { background: #ffe8da; color: #FC5200; }
[data-ui="v2"] #actsList .act-card .act-src-pill.garmin { background: #d6ecf9; color: #0073bd; }
[data-ui="v2"] #actsList .act-card .act-src-pill.manual { background: var(--paper-2); color: var(--ink-2); }

[data-ui="v2"] #actsList .act-card .act-route-map,
[data-ui="v2"] #actsList .act-card .act-map-wrap {
  height: 180px;
  background: linear-gradient(120deg, #e9f0e4, #e0eadb);
}

[data-ui="v2"] #actsList .act-card .act-stats-bar {
  display: flex;
  align-items: center;
  padding: 14px 18px;
  border-top: 1px solid var(--line);
  gap: 0;
}
[data-ui="v2"] #actsList .act-card .act-stat {
  flex: 1;
  text-align: center;
  min-width: 0;
}
[data-ui="v2"] #actsList .act-card .act-stat-val {
  font-family: var(--font-num);
  font-feature-settings: 'tnum' 1;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.015em;
  color: var(--ink);
  line-height: 1.1;
}
[data-ui="v2"] #actsList .act-card .act-stat-val .unit,
[data-ui="v2"] #actsList .act-card .act-stat-val .stat-unit {
  font-weight: 500;
  font-size: 11px;
  color: var(--ink-2);
  margin-left: 2px;
}
[data-ui="v2"] #actsList .act-card .act-stat-lbl {
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-2);
  margin-top: 4px;
}
[data-ui="v2"] #actsList .act-card .act-stat + .act-stat {
  border-left: 1px solid var(--line);
  margin-left: 0;
  padding-left: 0;
}

[data-ui="v2"] #actsList .act-card .act-footer {
  display: flex;
  gap: 8px;
  padding: 10px 16px;
  border-top: 1px solid var(--line);
  background: var(--paper-2);
}
[data-ui="v2"] #actsList .act-card .act-detail-btn,
[data-ui="v2"] #actsList .act-card .act-ask-btn {
  padding: 8px 14px;
  border-radius: var(--r-md);
  border: 1px solid var(--line);
  background: var(--paper);
  color: var(--ink);
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  transition: background 0.12s ease, border-color 0.12s ease;
}
[data-ui="v2"] #actsList .act-card .act-detail-btn:hover,
[data-ui="v2"] #actsList .act-card .act-ask-btn:hover {
  background: var(--paper-2);
  border-color: var(--line-2);
}
[data-ui="v2"] #actsList .act-card .act-ask-btn {
  margin-left: auto;
}
[data-ui="v2"] #actsList .act-card .act-kudos-meta {
  font-size: 12px;
  color: var(--ink-2);
  padding: 8px 18px;
  border-top: 1px solid var(--line);
  background: var(--paper-2);
}

/* Activities summary card (already injected by integrate.js) */
[data-ui="v2"] .acts-summary {
  background:
    radial-gradient(ellipse 540px 280px at 100% 0%, rgba(13,148,136,0.14) 0%, transparent 55%),
    linear-gradient(180deg, var(--paper) 0%, #fcfcfa 100%);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  padding: 18px 20px;
  box-shadow: var(--shadow-1), var(--bevel-card);
}
[data-ui="v2"] .acts-sum-row {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 18px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 12px;
}
[data-ui="v2"] .acts-sum-cell {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
[data-ui="v2"] .acts-sum-cell .lbl {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-2);
}
[data-ui="v2"] .acts-sum-cell .val {
  font-family: var(--font-num);
  font-feature-settings: 'tnum' 1;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.025em;
  color: var(--ink);
  line-height: 1;
}
[data-ui="v2"] .acts-sum-cell.headline .val { font-size: 28px; }
[data-ui="v2"] .acts-sum-cell .val .unit {
  font-family: var(--font-sans, inherit);
  font-feature-settings: normal;
  font-size: 12px;
  font-weight: 500;
  color: var(--ink-2);
  letter-spacing: 0;
  margin-left: 2px;
}
[data-ui="v2"] .acts-sum-cell .delta {
  font-size: 11px;
  font-weight: 600;
  color: var(--ink-2);
}
[data-ui="v2"] .acts-sum-cell .delta.up { color: var(--teal-deep); }
[data-ui="v2"] .acts-sum-cell .delta.down { color: #b91c1c; }
[data-ui="v2"] .acts-sum-foot {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  color: var(--ink-soft);
  line-height: 1.5;
}
[data-ui="v2"] .acts-sum-foot .em { font-size: 14px; }

@media (max-width: 720px) {
  [data-ui="v2"] .acts-sum-row { grid-template-columns: 1fr 1fr; }
  [data-ui="v2"] #actsList .act-card .act-stats-bar {
    flex-wrap: wrap;
  }
}


/* ═══════════════════════════════════════════════════════════════════════
   STEP 13 — Profile modal (.pm-*) restyle
   v1 emits .pm-* markup in #profileModal. We don't replace the renderer
   — just paint v2 styling over it so it matches the v2 design.
   ═══════════════════════════════════════════════════════════════════════ */

[data-ui="v2"] #profileModal .pm-card {
  background: var(--paper);
  border-radius: 24px;
  border: 1px solid var(--line);
  box-shadow: 0 24px 56px -12px rgba(15,26,22,0.18), var(--bevel-card);
}
[data-ui="v2"] #profileModal .pm-top-bar {
  height: 4px;
  background: linear-gradient(90deg, var(--teal-deep), var(--teal), #2dd4bf, var(--plum));
  border-radius: 24px 24px 0 0;
}
[data-ui="v2"] #profileModal .pm-header {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 22px 26px 18px;
  border-bottom: 1px solid var(--line);
}
[data-ui="v2"] #profileModal .pm-avatar {
  width: 64px; height: 64px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--teal-deep), var(--teal));
  color: #fff;
  display: grid; place-items: center;
  font-size: 26px;
  font-weight: 600;
  letter-spacing: -0.01em;
}
[data-ui="v2"] #profileModal .pm-user-name {
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--ink);
}
[data-ui="v2"] #profileModal .pm-user-email {
  font-size: 12.5px;
  color: var(--ink-2);
  margin-top: 2px;
}
[data-ui="v2"] #profileModal .pm-tabs {
  display: flex;
  gap: 4px;
  padding: 8px;
  border-bottom: 1px solid var(--line);
  background: var(--paper-2);
}
[data-ui="v2"] #profileModal .pm-tab {
  flex: 1;
  padding: 10px 14px;
  border-radius: var(--r-md);
  border: none;
  background: transparent;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-2);
  cursor: pointer;
  font-family: inherit;
  transition: background 0.12s ease, color 0.12s ease;
}
[data-ui="v2"] #profileModal .pm-tab:hover {
  background: var(--paper);
  color: var(--ink);
}
[data-ui="v2"] #profileModal .pm-tab.active {
  background: var(--paper);
  color: var(--teal-deep);
  box-shadow: var(--shadow-1);
}
[data-ui="v2"] #profileModal .pm-body {
  padding: 22px 26px;
}
[data-ui="v2"] #profileModal .pm-field label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-2);
  margin-bottom: 6px;
  display: block;
}
[data-ui="v2"] #profileModal .pm-field input,
[data-ui="v2"] #profileModal .pm-field select,
[data-ui="v2"] #profileModal .pm-field textarea {
  width: 100%;
  padding: 10px 14px;
  border-radius: var(--r-md);
  border: 1px solid var(--line);
  background: var(--paper);
  font-size: 14px;
  font-family: inherit;
  color: var(--ink);
  transition: border-color 0.12s ease, box-shadow 0.12s ease;
}
[data-ui="v2"] #profileModal .pm-field input:focus,
[data-ui="v2"] #profileModal .pm-field select:focus,
[data-ui="v2"] #profileModal .pm-field textarea:focus {
  outline: none;
  border-color: var(--teal);
  box-shadow: 0 0 0 3px rgba(13,148,136,0.12);
}
[data-ui="v2"] #profileModal .pm-save-btn,
[data-ui="v2"] #profileModal #pm-save-btn {
  background: var(--teal);
  border: 1px solid var(--teal);
  color: #fff;
  padding: 11px 22px;
  border-radius: var(--r-md);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
}
[data-ui="v2"] #profileModal .pm-save-btn:hover,
[data-ui="v2"] #profileModal #pm-save-btn:hover {
  background: var(--teal-deep);
  border-color: var(--teal-deep);
}


/* ═══════════════════════════════════════════════════════════════════════
   STEP 14 — Chat view restyle (light touch — bubble + composer)
   ═══════════════════════════════════════════════════════════════════════ */

[data-ui="v2"] #viewChat .chat-msg.from-me .bubble {
  background: var(--teal);
  color: #fff;
  border-radius: 18px 18px 4px 18px;
}
[data-ui="v2"] #viewChat .chat-msg.from-yuha .bubble {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 18px 18px 18px 4px;
  color: var(--ink);
  box-shadow: var(--shadow-1);
}
[data-ui="v2"] #viewChat .chat-input,
[data-ui="v2"] #viewChat .composer-input {
  border-radius: var(--r-md);
  border-color: var(--line);
}
[data-ui="v2"] #viewChat .chat-input:focus-within,
[data-ui="v2"] #viewChat .composer-input:focus-within {
  border-color: var(--teal);
  box-shadow: 0 0 0 3px rgba(13,148,136,0.10);
}
[data-ui="v2"] #viewChat .chip,
[data-ui="v2"] #viewChat .suggestion {
  background: var(--paper);
  border: 1px solid var(--line);
  color: var(--ink-soft);
  border-radius: var(--r-pill);
  font-size: 12.5px;
  font-weight: 500;
}
[data-ui="v2"] #viewChat .chip:hover,
[data-ui="v2"] #viewChat .suggestion:hover {
  background: var(--paper-2);
  color: var(--ink);
}


/* ═══════════════════════════════════════════════════════════════════════
   STEP 15 — Insights tooltips + tabs body + report stats/charts
   ═══════════════════════════════════════════════════════════════════════ */

/* ⓘ tooltip on insight cards and the weekly health-score banner */
[data-ui="v2"] .v2i-info-wrap {
  position: relative;
  display: inline-flex;
  margin-left: auto;
}
[data-ui="v2"] .v2i-info-btn {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: var(--paper);
  color: var(--ink-2);
  display: grid;
  place-items: center;
  cursor: pointer;
  padding: 0;
  font-family: inherit;
  transition: background 0.12s ease, color 0.12s ease, border-color 0.12s ease;
}
[data-ui="v2"] .v2i-info-btn:hover {
  background: var(--paper-2);
  color: var(--ink);
  border-color: var(--line-2);
}
[data-ui="v2"] .v2i-tooltip {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 240px;
  max-width: 320px;
  background: #1f2937;
  color: #f3f4f6;
  padding: 12px 14px;
  border-radius: var(--r-md);
  font-size: 12px;
  font-weight: 500;
  line-height: 1.5;
  box-shadow: 0 12px 32px -8px rgba(0,0,0,0.35);
  opacity: 0;
  pointer-events: none;
  transform: translateY(-4px);
  transition: opacity 0.15s ease, transform 0.15s ease;
  z-index: 100;
}
[data-ui="v2"] .v2i-tooltip::before {
  content: "";
  position: absolute;
  top: -5px;
  right: 7px;
  width: 10px;
  height: 10px;
  background: #1f2937;
  transform: rotate(45deg);
}
[data-ui="v2"] .v2i-info-wrap.open .v2i-tooltip {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}
[data-ui="v2"] .v2i-tt-body { color: #f3f4f6; }
[data-ui="v2"] .v2i-tt-scale {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid rgba(255,255,255,0.15);
  font-size: 11px;
  color: #d1d5db;
}
[data-ui="v2"] .v2i-tt-dot {
  display: inline-block;
  width: 8px; height: 8px;
  border-radius: 50%;
  margin-right: 4px;
  vertical-align: middle;
}

/* Weekly health banner — wrap the comps + tip into a flex row */
[data-ui="v2"] .v2i-comps-wrap {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  flex-wrap: wrap;
}
[data-ui="v2"] .v2i-info-wrap-banner {
  margin-left: auto;
  margin-top: 2px;
}

/* Reports tab body styling */
[data-ui="v2"] #viewReports .reports-tabs {
  display: flex;
  gap: 4px;
  padding: 6px;
  background: var(--paper-2);
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  margin: 18px 0 14px;
}
[data-ui="v2"] #viewReports .reports-tabs .rtab {
  flex: 1;
  padding: 9px 16px;
  border-radius: var(--r-pill);
  border: none;
  background: transparent;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-2);
  cursor: pointer;
  font-family: inherit;
  transition: background 0.12s ease, color 0.12s ease;
}
[data-ui="v2"] #viewReports .reports-tabs .rtab:hover {
  background: var(--paper);
  color: var(--ink);
}
[data-ui="v2"] #viewReports .reports-tabs .rtab.active {
  background: var(--paper);
  color: var(--teal-deep);
  box-shadow: var(--shadow-1);
}
[data-ui="v2"] #viewReports .ins-reports-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 24px 0 6px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-2);
}
[data-ui="v2"] #viewReports .ins-reports-divider span {
  position: relative;
  padding: 0 14px;
}
[data-ui="v2"] #viewReports .ins-reports-divider::before,
[data-ui="v2"] #viewReports .ins-reports-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--line);
}
[data-ui="v2"] #viewReports .ins-reports-divider::before { display: none; }

/* Tab body header */
[data-ui="v2"] .v2i-tab-hd {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}
[data-ui="v2"] .v2i-tab-hd-title {
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--ink);
}
[data-ui="v2"] .v2i-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border-radius: var(--r-pill);
  background: var(--paper);
  border: 1px solid var(--line);
  font-size: 12px;
  font-weight: 600;
  color: var(--ink-2);
}
[data-ui="v2"] .v2i-pill .dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--teal);
}

/* Stat tiles */
[data-ui="v2"] .v2i-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 10px;
  margin-bottom: 16px;
}
[data-ui="v2"] .v2i-stat {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 14px 16px;
  box-shadow: var(--shadow-1);
}
[data-ui="v2"] .v2i-stat-lbl {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-2);
  margin-bottom: 6px;
}
[data-ui="v2"] .v2i-stat-val {
  font-family: var(--font-num);
  font-feature-settings: 'tnum' 1;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.025em;
  color: var(--ink);
  line-height: 1;
}
[data-ui="v2"] .v2i-stat-val .unit {
  font-family: var(--font-sans, inherit);
  font-feature-settings: normal;
  font-size: 11px;
  font-weight: 500;
  color: var(--ink-2);
  margin-left: 2px;
}
[data-ui="v2"] .v2i-stat-delta {
  font-size: 11px;
  font-weight: 600;
  color: var(--ink-2);
  margin-top: 4px;
}
[data-ui="v2"] .v2i-stat-delta.pos { color: var(--teal-deep); }
[data-ui="v2"] .v2i-stat-delta.neg { color: #b91c1c; }

/* Chart cards (used by report tabs) */
[data-ui="v2"] .v2i-chart-card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  padding: 18px 20px;
  box-shadow: var(--shadow-1), var(--bevel-card);
  margin-bottom: 14px;
}
[data-ui="v2"] .v2i-chart-hd {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}
[data-ui="v2"] .v2i-chart-sub {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-2);
}
[data-ui="v2"] .v2i-chart-title {
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin-top: 4px;
}
[data-ui="v2"] .v2i-chart-canvas-wrap {
  height: 220px;
  position: relative;
}

[data-ui="v2"] .v2i-loading {
  padding: 36px 16px;
  text-align: center;
  color: var(--ink-2);
  font-size: 13px;
}
[data-ui="v2"] .v2i-error {
  padding: 18px;
  text-align: center;
  font-size: 13px;
  color: #991b1b;
  background: #fef2f2;
  border: 1px solid #fca5a5;
  border-radius: var(--r-lg);
}


/* ═══════════════════════════════════════════════════════════════════════
   STEP 16 — Goal setup / edit modal (.gsm-*)
   v1 emits .gsm-* markup in #goalSetupModal. We don't replace the
   renderer — just paint v2 styling over it.
   ═══════════════════════════════════════════════════════════════════════ */

[data-ui="v2"] #goalSetupModal.gsm-backdrop {
  background: rgba(15, 26, 22, 0.5);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  z-index: 9999;
}

[data-ui="v2"] #goalSetupModal .gsm-card {
  background: var(--paper);
  border-radius: 24px;
  border: 1px solid var(--line);
  box-shadow:
    0 24px 56px -12px rgba(15,26,22,0.30),
    var(--bevel-card);
  max-width: 460px;
  overflow: hidden;
  position: relative;
}
[data-ui="v2"] #goalSetupModal .gsm-card::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--teal-deep), var(--teal), #2dd4bf, var(--plum));
}

[data-ui="v2"] #goalSetupModal .gsm-hdr {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 24px 26px 18px;
  border-bottom: 1px solid var(--line);
}
[data-ui="v2"] #goalSetupModal .gsm-icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--teal-soft), #a7f3d8);
  display: grid;
  place-items: center;
  font-size: 24px;
  flex: none;
}
[data-ui="v2"] #goalSetupModal .gsm-hdr-txt {
  flex: 1;
  min-width: 0;
}
[data-ui="v2"] #goalSetupModal .gsm-title {
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin-bottom: 4px;
}
[data-ui="v2"] #goalSetupModal .gsm-sub {
  font-size: 12.5px;
  color: var(--ink-2);
  line-height: 1.5;
}
[data-ui="v2"] #goalSetupModal .gsm-close {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  border: none;
  background: transparent;
  color: var(--ink-2);
  font-size: 18px;
  cursor: pointer;
  font-family: inherit;
  display: grid;
  place-items: center;
  flex: none;
  transition: background 0.12s ease, color 0.12s ease;
}
[data-ui="v2"] #goalSetupModal .gsm-close:hover {
  background: var(--paper-2);
  color: var(--ink);
}

[data-ui="v2"] #goalSetupModal .gsm-body {
  padding: 22px 26px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
[data-ui="v2"] #goalSetupModal .gsm-row {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
[data-ui="v2"] #goalSetupModal .gsm-lbl {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-2);
}
[data-ui="v2"] #goalSetupModal .gsm-input {
  width: 100%;
  padding: 11px 14px;
  border-radius: var(--r-md);
  border: 1px solid var(--line);
  background: var(--paper);
  font-size: 14px;
  font-family: inherit;
  color: var(--ink);
  transition: border-color 0.12s ease, box-shadow 0.12s ease;
}
[data-ui="v2"] #goalSetupModal .gsm-input:focus {
  outline: none;
  border-color: var(--teal);
  box-shadow: 0 0 0 3px rgba(13,148,136,0.12);
}
[data-ui="v2"] #goalSetupModal .gsm-hint {
  font-size: 11.5px;
  color: var(--ink-2);
  margin-top: 2px;
}

/* Race distance segmented */
[data-ui="v2"] #goalSetupModal .gsm-seg {
  display: flex;
  gap: 4px;
  padding: 4px;
  background: var(--paper-2);
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
}
[data-ui="v2"] #goalSetupModal .gsm-seg button {
  flex: 1;
  padding: 7px 10px;
  border-radius: var(--r-pill);
  border: none;
  background: transparent;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ink-2);
  cursor: pointer;
  font-family: inherit;
  transition: background 0.12s ease, color 0.12s ease;
}
[data-ui="v2"] #goalSetupModal .gsm-seg button:hover {
  background: var(--paper);
  color: var(--ink);
}
[data-ui="v2"] #goalSetupModal .gsm-seg button.active,
[data-ui="v2"] #goalSetupModal .gsm-seg button.gsm-seg-active {
  background: var(--paper);
  color: var(--teal-deep);
  box-shadow: var(--shadow-1);
}

/* Target value with suffix */
[data-ui="v2"] #goalSetupModal .gsm-tval-wrap {
  position: relative;
}
[data-ui="v2"] #goalSetupModal .gsm-tval-wrap .gsm-input {
  padding-right: 56px;
}
[data-ui="v2"] #goalSetupModal .gsm-tval-suffix {
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 12.5px;
  color: var(--ink-2);
  pointer-events: none;
}

[data-ui="v2"] #goalSetupModal .gsm-err {
  background: #fef2f2;
  border: 1px solid #fca5a5;
  color: #991b1b;
  font-size: 12.5px;
  padding: 10px 12px;
  border-radius: var(--r-md);
}

[data-ui="v2"] #goalSetupModal .gsm-ftr {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 16px 26px 22px;
  border-top: 1px solid var(--line);
  background: var(--paper-2);
}
[data-ui="v2"] #goalSetupModal .gsm-cancel {
  padding: 10px 18px;
  border-radius: var(--r-md);
  border: 1px solid var(--line);
  background: var(--paper);
  color: var(--ink);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  transition: background 0.12s ease, border-color 0.12s ease;
}
[data-ui="v2"] #goalSetupModal .gsm-cancel:hover {
  background: var(--paper-2);
  border-color: var(--line-2);
}
[data-ui="v2"] #goalSetupModal .gsm-save {
  padding: 10px 22px;
  border-radius: var(--r-md);
  border: 1px solid var(--teal);
  background: var(--teal);
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  transition: background 0.12s ease, border-color 0.12s ease;
}
[data-ui="v2"] #goalSetupModal .gsm-save:hover {
  background: var(--teal-deep);
  border-color: var(--teal-deep);
}


/* ═══════════════════════════════════════════════════════════════════════
   STEP 17 — Onboarding (no-source dashboard) — .dhn-* + .dash-step*
   v1 _renderDashNoSrc emits this markup; we just restyle for v2.
   ═══════════════════════════════════════════════════════════════════════ */

[data-ui="v2"] #viewDash .dash-hero-nosrc {
  background:
    radial-gradient(ellipse 720px 360px at 95% 0%, rgba(13,148,136,0.20) 0%, transparent 55%),
    radial-gradient(ellipse 480px 280px at -5% 100%, rgba(124,92,255,0.12) 0%, transparent 60%),
    linear-gradient(160deg, #effbf6 0%, #ffffff 55%, #fffaf0 100%);
  border: 1px solid #b9e8df;
  border-radius: 28px;
  padding: 36px 32px;
  display: grid;
  grid-template-columns: 1fr 200px;
  gap: 24px;
  align-items: center;
  box-shadow:
    0 1px 2px rgba(15,26,22,0.04),
    0 12px 32px -8px rgba(13,148,136,0.18),
    inset 0 1px 0 rgba(255,255,255,0.9);
  position: relative;
  overflow: hidden;
}
[data-ui="v2"] #viewDash .dash-hero-nosrc::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--teal-deep), var(--teal), #2dd4bf, var(--plum));
}

[data-ui="v2"] #viewDash .dhn-date {
  font-size: 13px;
  font-weight: 500;
  color: var(--ink-2);
  margin-bottom: 8px;
}
[data-ui="v2"] #viewDash .dhn-title {
  font-size: 32px;
  font-weight: 700;
  letter-spacing: -0.025em;
  color: var(--ink);
  margin-bottom: 12px;
  line-height: 1.1;
}
[data-ui="v2"] #viewDash .dhn-sub {
  font-size: 14px;
  line-height: 1.55;
  color: var(--ink-soft);
  margin-bottom: 22px;
  max-width: 520px;
}
[data-ui="v2"] #viewDash .dhn-cta-row {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
[data-ui="v2"] #viewDash .dhn-cta-btn {
  padding: 11px 20px;
  border-radius: var(--r-md);
  background: var(--teal);
  border: 1px solid var(--teal);
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  transition: background 0.12s ease, border-color 0.12s ease;
}
[data-ui="v2"] #viewDash .dhn-cta-btn:hover {
  background: var(--teal-deep);
  border-color: var(--teal-deep);
}
[data-ui="v2"] #viewDash .dhn-cta-secondary {
  background: var(--paper);
  border-color: var(--line);
  color: var(--ink);
}
[data-ui="v2"] #viewDash .dhn-cta-secondary:hover {
  background: var(--paper-2);
  border-color: var(--line-2);
}

[data-ui="v2"] #viewDash .dhn-right {
  display: grid;
  place-items: center;
}
[data-ui="v2"] #viewDash .dhn-illus {
  width: 160px;
  height: 160px;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(13,148,136,0.15), rgba(124,92,255,0.10));
  display: grid;
  place-items: center;
  font-size: 64px;
  border: 1px solid rgba(13,148,136,0.18);
}

/* Setup steps */
[data-ui="v2"] #viewDash .sh {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin: 24px 0 12px;
}
[data-ui="v2"] #viewDash .sh-title {
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--ink);
}

[data-ui="v2"] #viewDash .dash-setup-steps {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
[data-ui="v2"] #viewDash .dash-step {
  display: grid;
  grid-template-columns: 36px 1fr auto;
  gap: 14px;
  align-items: center;
  padding: 16px 18px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-1);
  transition: border-color 0.12s ease, background 0.12s ease;
}
[data-ui="v2"] #viewDash .dash-step.active {
  background: linear-gradient(180deg, #f7fefb 0%, var(--paper) 100%);
  border-color: var(--teal-soft);
  border-left: 3px solid var(--teal);
  padding-left: 15px;
}
[data-ui="v2"] #viewDash .dash-step.done {
  background: var(--paper-2);
  opacity: 0.8;
}
[data-ui="v2"] #viewDash .dash-step-num {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--paper-2);
  border: 1px solid var(--line);
  display: grid;
  place-items: center;
  font-size: 14px;
  font-weight: 700;
  color: var(--ink-2);
}
[data-ui="v2"] #viewDash .dash-step.active .dash-step-num {
  background: var(--teal);
  border-color: var(--teal);
  color: #fff;
}
[data-ui="v2"] #viewDash .dash-step.done .dash-step-num {
  background: var(--teal-soft);
  border-color: #a7f3d8;
  color: var(--teal-deep);
}
[data-ui="v2"] #viewDash .dash-step-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 2px;
}
[data-ui="v2"] #viewDash .dash-step-sub {
  font-size: 12.5px;
  color: var(--ink-2);
  line-height: 1.45;
}
[data-ui="v2"] #viewDash .dash-step-action {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-2);
}
[data-ui="v2"] #viewDash .dash-step.done .dash-step-action {
  color: var(--teal-deep);
}
[data-ui="v2"] #viewDash .dash-step-actions-2 {
  display: flex;
  align-items: center;
  gap: 10px;
}
[data-ui="v2"] #viewDash .dash-step-or {
  font-size: 11px;
  color: var(--ink-2);
}
[data-ui="v2"] #viewDash .dash-step-link {
  display: inline-flex;
  padding: 7px 14px;
  border-radius: var(--r-md);
  background: var(--teal);
  color: #fff;
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.12s ease;
}
[data-ui="v2"] #viewDash .dash-step-link:hover {
  background: var(--teal-deep);
}

/* Onboarding preview cards */
[data-ui="v2"] #viewDash .dash-preview-card {
  position: relative;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  padding: 18px 20px;
  height: 160px;
  overflow: hidden;
  box-shadow: var(--shadow-1);
}
[data-ui="v2"] #viewDash .dash-preview-blur {
  filter: blur(4px);
  opacity: 0.4;
}
[data-ui="v2"] #viewDash .dpb-bar {
  background: var(--paper-2);
  border-radius: 6px;
}
[data-ui="v2"] #viewDash .dash-preview-lock {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: rgba(255,255,255,0.7);
  backdrop-filter: blur(2px);
}
[data-ui="v2"] #viewDash .dpl-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
}
[data-ui="v2"] #viewDash .dpl-link {
  font-size: 12px;
  font-weight: 600;
  color: var(--teal-deep);
  cursor: pointer;
}
[data-ui="v2"] #viewDash .dpl-link:hover {
  text-decoration: underline;
}

@media (max-width: 720px) {
  [data-ui="v2"] #viewDash .dash-hero-nosrc {
    grid-template-columns: 1fr;
    padding: 24px 22px;
  }
  [data-ui="v2"] #viewDash .dhn-right { display: none; }
  [data-ui="v2"] #viewDash .dhn-title { font-size: 24px; }
  [data-ui="v2"] #viewDash .dash-step { grid-template-columns: 32px 1fr; }
  [data-ui="v2"] #viewDash .dash-step-action,
  [data-ui="v2"] #viewDash .dash-step-actions-2 {
    grid-column: 1 / -1;
    justify-self: start;
  }
}


/* ═══════════════════════════════════════════════════════════════════════
   STEP 18 — Activity Detail modal (.actd-*)
   v1 emits the detail screen markup; we just paint v2 styling.
   ═══════════════════════════════════════════════════════════════════════ */

[data-ui="v2"] .actd-scroll {
  background: var(--bg);
  padding: 16px 22px 80px;
}
[data-ui="v2"] .actd-back-row {
  margin-bottom: 14px;
}
[data-ui="v2"] .actd-back-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  border-radius: var(--r-pill);
  border: 1px solid var(--line);
  background: var(--paper);
  color: var(--ink-soft);
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  transition: background 0.12s ease, border-color 0.12s ease;
}
[data-ui="v2"] .actd-back-btn:hover {
  background: var(--paper-2);
  border-color: var(--line-2);
  color: var(--ink);
}
[data-ui="v2"] .actd-back-arrow {
  font-size: 14px;
  font-weight: 700;
}

/* Hero */
[data-ui="v2"] .actd-hero {
  background:
    radial-gradient(ellipse 540px 280px at 100% 0%, rgba(13,148,136,0.16) 0%, transparent 55%),
    linear-gradient(160deg, #f7fefb 0%, #ffffff 60%, #fffaf0 100%);
  border: 1px solid #b9e8df;
  border-radius: 24px;
  padding: 22px 26px;
  box-shadow:
    0 1px 2px rgba(15,26,22,0.04),
    0 12px 32px -8px rgba(13,148,136,0.18),
    inset 0 1px 0 rgba(255,255,255,0.9);
  position: relative;
  overflow: hidden;
  margin-bottom: 16px;
}
[data-ui="v2"] .actd-hero::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px;
  background: linear-gradient(90deg, var(--teal-deep), var(--teal), #2dd4bf, var(--plum));
}
[data-ui="v2"] .actd-hero-row {
  display: flex;
  align-items: center;
  gap: 14px;
}
[data-ui="v2"] .actd-sport-ico {
  width: 56px;
  height: 56px;
  border-radius: 14px;
  background: var(--paper);
  border: 1px solid rgba(13,148,136,0.18);
  display: grid;
  place-items: center;
  font-size: 28px;
  flex: none;
  box-shadow: var(--shadow-1);
}
[data-ui="v2"] .actd-hero-text { flex: 1; min-width: 0; }
[data-ui="v2"] .actd-title {
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -0.025em;
  color: var(--ink);
  margin-bottom: 4px;
}
[data-ui="v2"] .actd-meta {
  font-size: 12.5px;
  color: var(--ink-2);
}
[data-ui="v2"] .actd-src-pill {
  flex: none;
  padding: 5px 12px;
  border-radius: var(--r-pill);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  background: rgba(255,255,255,0.7);
  border: 1px solid rgba(13,148,136,0.18);
  color: var(--src-c, var(--teal-deep));
}
[data-ui="v2"] .actd-kudos {
  margin-top: 10px;
  font-size: 12.5px;
  color: var(--ink-2);
}

/* Stats grid */
[data-ui="v2"] .actd-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 10px;
  margin-bottom: 18px;
}
[data-ui="v2"] .actd-stat {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 14px 16px;
  box-shadow: var(--shadow-1);
}
[data-ui="v2"] .actd-stat-lbl {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-2);
  margin-bottom: 6px;
}
[data-ui="v2"] .actd-stat-val {
  font-family: var(--font-num);
  font-feature-settings: 'tnum' 1;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.025em;
  color: var(--ink);
  line-height: 1;
}
[data-ui="v2"] .actd-stat-unit {
  font-family: var(--font-sans, inherit);
  font-feature-settings: normal;
  font-size: 11px;
  font-weight: 500;
  color: var(--ink-2);
  letter-spacing: 0;
  margin-left: 2px;
}

/* Sections */
[data-ui="v2"] .actd-section {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  padding: 18px 20px;
  box-shadow: var(--shadow-1), var(--bevel-card);
  margin-bottom: 14px;
}
[data-ui="v2"] .actd-section-title {
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin: 0 0 12px;
}
[data-ui="v2"] .actd-map {
  height: 280px;
  border-radius: var(--r-lg);
  overflow: hidden;
  border: 1px solid var(--line);
}

/* Performance charts grid */
[data-ui="v2"] .actd-charts-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}
[data-ui="v2"] .actd-chart-card {
  background: var(--paper-2);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 12px 14px;
}
[data-ui="v2"] .actd-chart-title {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 8px;
}
[data-ui="v2"] .actd-chart-wrap {
  height: 140px;
  position: relative;
}

/* Splits table */
[data-ui="v2"] .actd-splits {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
[data-ui="v2"] .actd-splits thead th {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-2);
  text-align: left;
  padding: 8px 10px;
  border-bottom: 1px solid var(--line);
}
[data-ui="v2"] .actd-splits tbody td {
  padding: 10px;
  border-bottom: 1px solid var(--line);
  color: var(--ink);
  font-feature-settings: 'tnum' 1;
}
[data-ui="v2"] .actd-splits tbody tr:last-child td { border-bottom: none; }
[data-ui="v2"] .actd-splits .actd-spl-num {
  font-weight: 700;
  color: var(--teal-deep);
  width: 40px;
}

/* Loading + error */
[data-ui="v2"] .actd-loading {
  padding: 80px 20px;
  text-align: center;
  color: var(--ink-2);
  font-size: 14px;
}
[data-ui="v2"] .actd-spinner {
  width: 28px; height: 28px;
  margin: 0 auto 12px;
  border: 2px solid var(--line);
  border-top-color: var(--teal);
  border-radius: 50%;
  animation: v2-spin 0.7s linear infinite;
}
[data-ui="v2"] .actd-error {
  padding: 60px 24px;
  text-align: center;
  background: var(--paper);
  border: 1px dashed var(--line-2);
  border-radius: var(--r-xl);
}
[data-ui="v2"] .actd-error-icon {
  font-size: 40px;
  margin-bottom: 12px;
}
[data-ui="v2"] .actd-error-msg {
  color: var(--ink-2);
  font-size: 14px;
  margin-bottom: 16px;
}
[data-ui="v2"] .actd-cta {
  padding: 9px 18px;
  border-radius: var(--r-md);
  background: var(--teal);
  border: 1px solid var(--teal);
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
}
[data-ui="v2"] .actd-cta:hover {
  background: var(--teal-deep);
  border-color: var(--teal-deep);
}

@media (max-width: 720px) {
  [data-ui="v2"] .actd-charts-grid { grid-template-columns: 1fr; }
  [data-ui="v2"] .actd-hero { padding: 18px 18px; }
  [data-ui="v2"] .actd-title { font-size: 20px; }
  [data-ui="v2"] .actd-sport-ico { width: 48px; height: 48px; font-size: 22px; }
}


/* ═══════════════════════════════════════════════════════════════════════
   STEP 19 — Sidebar polish (.sb-*)
   ═══════════════════════════════════════════════════════════════════════ */

[data-ui="v2"] #sidebar {
  background: var(--paper);
  border-right: 1px solid var(--line);
  /* No top padding — .sb-logo fills the first 64px so its bottom border
     aligns with the top-nav's bottom border (also at y=64). */
  padding: 0 14px 20px;
}
[data-ui="v2"] .sb-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  /* Match the top-nav's 64px height so the two horizontal lines
     (sidebar's sb-logo border and main's top-nav border) sit at the
     same y-coordinate. Negative margins extend the border across the
     sidebar's 14px horizontal padding so it reads as one continuous
     header rule. */
  height: 64px;
  margin: 0 -14px 12px;
  padding: 0 22px;
  border-bottom: 1px solid var(--line);
  box-sizing: border-box;
}
[data-ui="v2"] .sb-logo-icon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: linear-gradient(135deg, var(--teal-deep), var(--teal));
  color: #fff;
  display: grid;
  place-items: center;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -0.02em;
  box-shadow: var(--shadow-1);
}
[data-ui="v2"] .sb-logo-name {
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--ink);
}
[data-ui="v2"] .sb-nav {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
[data-ui="v2"] .sb-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: var(--r-md);
  font-size: 13.5px;
  font-weight: 500;
  color: var(--ink-soft);
  cursor: pointer;
  transition: background 0.12s ease, color 0.12s ease;
}
[data-ui="v2"] .sb-item:hover {
  background: var(--paper-2);
  color: var(--ink);
}
[data-ui="v2"] .sb-item.sb-active {
  background: var(--teal-soft);
  color: var(--teal-deep);
  font-weight: 600;
}
[data-ui="v2"] .sb-icon {
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  flex: none;
  color: currentColor;
}
[data-ui="v2"] .sb-icon svg {
  width: 18px;
  height: 18px;
}
[data-ui="v2"] .sb-item.sb-active .sb-icon { color: var(--teal-deep); }

/* User block at bottom of sidebar */
[data-ui="v2"] #sidebar .sb-user {
  margin-top: auto;
  padding: 12px;
  border-top: 1px solid var(--line);
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  border-radius: var(--r-md);
  transition: background 0.12s ease;
}
[data-ui="v2"] #sidebar .sb-user:hover {
  background: var(--paper-2);
}
[data-ui="v2"] #sidebar .sb-avatar {
  width: 32px; height: 32px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--teal-deep), var(--teal));
  color: #fff;
  display: grid;
  place-items: center;
  font-size: 13px;
  font-weight: 600;
  flex: none;
}
[data-ui="v2"] #sidebar .sb-user-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
}
[data-ui="v2"] #sidebar .sb-user-link {
  font-size: 11px;
  color: var(--ink-2);
}


/* ═══════════════════════════════════════════════════════════════════════
   STEP 20 — Mobile bottom nav (#mob-bottom-nav .mob-tab)
   ═══════════════════════════════════════════════════════════════════════ */

[data-ui="v2"] #mob-bottom-nav {
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-top: 1px solid var(--line);
  padding: 6px 8px calc(6px + env(safe-area-inset-bottom, 0px));
  box-shadow: 0 -4px 16px -4px rgba(15,26,22,0.06);
}
[data-ui="v2"] #mob-bottom-nav .mob-tab {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  padding: 8px 6px;
  border-radius: var(--r-md);
  background: transparent;
  border: none;
  color: var(--ink-2);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.02em;
  font-family: inherit;
  cursor: pointer;
  transition: color 0.12s ease, background 0.12s ease;
}
[data-ui="v2"] #mob-bottom-nav .mob-tab:hover {
  background: var(--paper-2);
  color: var(--ink);
}
[data-ui="v2"] #mob-bottom-nav .mob-tab.mob-active {
  color: var(--teal-deep);
}
[data-ui="v2"] #mob-bottom-nav .mob-tab.mob-active .mob-tab-icon {
  background: var(--teal-soft);
  border-radius: var(--r-md);
}
[data-ui="v2"] #mob-bottom-nav .mob-tab-icon {
  display: grid;
  place-items: center;
  width: 36px;
  height: 28px;
  margin-bottom: 1px;
  transition: background 0.12s ease;
}
[data-ui="v2"] #mob-bottom-nav .mob-tab-icon svg {
  width: 20px;
  height: 20px;
}
[data-ui="v2"] #mob-bottom-nav .mob-tab-lbl {
  font-size: 10px;
}


/* ═══════════════════════════════════════════════════════════════════════
   STEP 21 — Toasts (#oauthToast) + Confirm dialog (#yuha-confirm-*)
   v1 emits the markup; we just paint v2 styling.
   ═══════════════════════════════════════════════════════════════════════ */

[data-ui="v2"] #oauthToast {
  position: fixed;
  left: 50%;
  /* Explicitly override v1's `top:16px` — without this, both `top` and
     `bottom` apply, stretching the box to ~100vh tall and rendering as
     a giant green capsule (the bug user reported on Sources sync click). */
  top: auto;
  bottom: calc(28px + env(safe-area-inset-bottom, 0px));
  height: auto;
  width: auto;
  transform: translate(-50%, 16px);
  min-width: 240px;
  max-width: 88vw;
  padding: 12px 18px;
  background: #1f2937;
  color: #f3f4f6;
  border-radius: var(--r-pill);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: -0.005em;
  box-shadow:
    0 8px 24px -4px rgba(15,26,22,0.30),
    0 2px 6px rgba(15,26,22,0.10);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
  z-index: 10000;
  text-align: center;
  white-space: nowrap;
}
[data-ui="v2"] #oauthToast.show {
  opacity: 1;
  transform: translate(-50%, 0);
  pointer-events: auto;
}
[data-ui="v2"] #oauthToast.ok {
  background: #064e3b;
  color: #d1fae5;
  border: 1px solid #047857;
}
[data-ui="v2"] #oauthToast.error {
  background: #7f1d1d;
  color: #fee2e2;
  border: 1px solid #b91c1c;
}
[data-ui="v2"] #oauthToast.info {
  background: var(--ink);
  color: var(--paper);
}

/* Confirm dialog */
[data-ui="v2"] #yuha-confirm-overlay {
  position: fixed;
  inset: 0;
  background: rgba(15, 26, 22, 0.5);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10001;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.18s ease;
}
[data-ui="v2"] #yuha-confirm-overlay.open {
  opacity: 1;
  pointer-events: auto;
}
[data-ui="v2"] #yuha-confirm-box {
  background: var(--paper);
  border-radius: 20px;
  border: 1px solid var(--line);
  box-shadow: 0 24px 56px -12px rgba(15,26,22,0.30), var(--bevel-card);
  padding: 26px 28px 22px;
  max-width: 420px;
  width: 92vw;
  text-align: center;
  position: relative;
  overflow: hidden;
  transform: translateY(8px) scale(0.98);
  transition: transform 0.18s ease;
}
[data-ui="v2"] #yuha-confirm-overlay.open #yuha-confirm-box {
  transform: translateY(0) scale(1);
}
[data-ui="v2"] #yuha-confirm-box::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px;
  background: linear-gradient(90deg, var(--teal-deep), var(--teal), #2dd4bf, var(--plum));
}
[data-ui="v2"] #yuha-confirm-icon {
  font-size: 36px;
  margin: 4px 0 10px;
  line-height: 1;
}
[data-ui="v2"] #yuha-confirm-title {
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin-bottom: 6px;
}
[data-ui="v2"] #yuha-confirm-msg {
  font-size: 13.5px;
  color: var(--ink-soft);
  line-height: 1.55;
  margin-bottom: 18px;
}
[data-ui="v2"] .yuha-confirm-btns {
  display: flex;
  gap: 8px;
  justify-content: center;
}
[data-ui="v2"] .yuha-confirm-cancel {
  padding: 10px 20px;
  border-radius: var(--r-md);
  border: 1px solid var(--line);
  background: var(--paper);
  color: var(--ink);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  transition: background 0.12s ease, border-color 0.12s ease;
}
[data-ui="v2"] .yuha-confirm-cancel:hover {
  background: var(--paper-2);
  border-color: var(--line-2);
}
[data-ui="v2"] #yuha-confirm-ok {
  padding: 10px 22px;
  border-radius: var(--r-md);
  border: 1px solid var(--teal);
  background: var(--teal);
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  transition: background 0.12s ease, border-color 0.12s ease;
}
[data-ui="v2"] #yuha-confirm-ok:hover {
  background: var(--teal-deep);
  border-color: var(--teal-deep);
}
[data-ui="v2"] #yuha-confirm-ok.warn {
  background: #dc2626;
  border-color: #dc2626;
}
[data-ui="v2"] #yuha-confirm-ok.warn:hover {
  background: #b91c1c;
  border-color: #b91c1c;
}


/* ═══════════════════════════════════════════════════════════════════════
   STEP 22 — Sources sync polish (button states, sync badges)
   The .v2s-card markup already styled in STEP 10 — this layer adds
   in-flight + done states for the Sync button.
   ═══════════════════════════════════════════════════════════════════════ */

/* Spin animation (reused for sync button + spinners) */
@keyframes v2-spin-fast {
  to { transform: rotate(360deg); }
}

/* When the sync button text starts with ⟳ (set by syncStrava/syncGarmin),
   apply a gentle spinning hint via background. The button is already disabled
   so users can't click again. */
[data-ui="v2"] .v2s-btn:disabled,
[data-ui="v2"] .v2s-btn[disabled] {
  cursor: progress;
  opacity: 0.85;
  position: relative;
  padding-left: 28px;
}
[data-ui="v2"] .v2s-btn:disabled::before,
[data-ui="v2"] .v2s-btn[disabled]::before {
  content: "";
  position: absolute;
  left: 10px;
  top: 50%;
  width: 12px; height: 12px;
  margin-top: -6px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: v2-spin-fast 0.7s linear infinite;
  opacity: 0.7;
}

/* Pulse the active badge while a sync is in-flight (the button is disabled
   in syncStrava/syncGarmin until pollSyncComplete resolves). */
[data-ui="v2"] .v2s-card:has(.v2s-btn[disabled]) .v2s-badge.green {
  animation: v2s-pulse 1.4s ease-in-out infinite;
}
@keyframes v2s-pulse {
  0%, 100% { opacity: 1;   }
  50%      { opacity: 0.55; }
}

/* When sync just succeeded, briefly flash a green tint on the card so users
   feel the action took effect. App.js calls bustCache() which re-renders the
   card; the new card briefly carries .v2s-just-synced (added by JS — see
   below) and we fade it out. */
[data-ui="v2"] .v2s-card.v2s-just-synced {
  animation: v2s-flash 1.6s ease-out;
}
@keyframes v2s-flash {
  0%   { background: var(--teal-soft); border-color: #a7f3d8; }
  100% { background: var(--paper);     border-color: var(--line); }
}

/* Empty available-list state (no more platforms to add) */
[data-ui="v2"] #sourcesAvailable:empty::before {
  content: "All available platforms connected. More integrations coming soon.";
  display: block;
  padding: 18px;
  text-align: center;
  font-size: 12.5px;
  color: var(--ink-2);
  background: var(--paper-2);
  border: 1px dashed var(--line-2);
  border-radius: var(--r-lg);
}

/* No-sources state (nothing connected at all) — surfaces a clear "Connect
   your first source" hero instead of just empty space. v1's .src-card-empty
   sometimes renders, but the cleaner v2 path is via #sourcesAvailable
   showing "Connect →" buttons. We polish the empty connected-section pill
   to match. */
[data-ui="v2"] #sourcesSectionConnected:empty { display: none !important; }

/* Auth-error highlight on Garmin source card */
[data-ui="v2"] .v2s-card:has(.v2s-badge.err) {
  border-color: #fca5a5;
  background: linear-gradient(180deg, #fff5f5 0%, var(--paper) 100%);
}
[data-ui="v2"] .v2s-card:has(.v2s-badge.err):hover {
  border-color: #f87171;
}


/* ═══════════════════════════════════════════════════════════════════════
   STEP 23 — Chat full pass (.msg-row, .bubble, glass input, plus menu)
   v1 class names (NOT .chat-msg from STEP 14 — those didn't exist).
   ═══════════════════════════════════════════════════════════════════════ */

/* Chat container layout */
[data-ui="v2"] #viewChat .chat-wrap {
  background: var(--bg);
}
[data-ui="v2"] #viewChat #messages {
  padding: 24px 0 12px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
[data-ui="v2"] #viewChat #msg-spacer { display: none; }

/* Welcome screen — first paint when chat is empty */
[data-ui="v2"] #viewChat .welcome {
  text-align: center;
  padding: 48px 24px 32px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}
[data-ui="v2"] #viewChat .welcome-icon {
  width: 72px;
  height: 72px;
  border-radius: 18px;
  background: linear-gradient(135deg, var(--teal-deep), var(--teal));
  color: #fff;
  display: grid;
  place-items: center;
  font-size: 32px;
  box-shadow: 0 12px 32px -8px rgba(13,148,136,0.30);
}
[data-ui="v2"] #viewChat .welcome h2 {
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -0.025em;
  color: var(--ink);
  margin: 0;
}
[data-ui="v2"] #viewChat .welcome h2 #chatUserName {
  background: linear-gradient(180deg, var(--teal-deep), var(--teal) 70%, #2dd4bf);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: var(--teal-deep);
}
[data-ui="v2"] #viewChat .welcome p {
  font-size: 14px;
  color: var(--ink-soft);
  line-height: 1.55;
  max-width: 480px;
  margin: 0;
}
[data-ui="v2"] #viewChat .welcome .src-chips {
  display: flex;
  gap: 8px;
  margin-top: 8px;
  flex-wrap: wrap;
  justify-content: center;
}
[data-ui="v2"] #viewChat .welcome .src {
  padding: 6px 14px;
  border-radius: var(--r-pill);
  background: var(--paper);
  border: 1px solid var(--line);
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ink-soft);
}
[data-ui="v2"] #viewChat .welcome .src.strava { color: #FC5200; border-color: #ffe8da; background: #ffe8da; }
[data-ui="v2"] #viewChat .welcome .src.garmin { color: #0073bd; border-color: #d6ecf9; background: #d6ecf9; }

[data-ui="v2"] #viewChat .insight-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 10px;
  margin-top: 12px;
  width: 100%;
  max-width: 540px;
}
[data-ui="v2"] #viewChat .icard-skeleton {
  height: 86px;
  background: linear-gradient(90deg, var(--paper-2) 0%, #f3f3f1 50%, var(--paper-2) 100%);
  background-size: 200% 100%;
  border-radius: var(--r-lg);
  border: 1px solid var(--line);
  animation: v2i-shimmer 1.4s linear infinite;
}

/* Day dividers between chat sessions */
[data-ui="v2"] #viewChat .day-divider,
[data-ui="v2"] #viewChat .history-sep {
  text-align: center;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-2);
  padding: 16px 0 8px;
  position: relative;
}
[data-ui="v2"] #viewChat .day-divider::before,
[data-ui="v2"] #viewChat .day-divider::after,
[data-ui="v2"] #viewChat .history-sep::before,
[data-ui="v2"] #viewChat .history-sep::after {
  content: "";
  display: inline-block;
  width: 60px;
  height: 1px;
  background: var(--line);
  margin: 0 12px;
  vertical-align: middle;
}

/* Message rows */
[data-ui="v2"] #viewChat .msg-row {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  max-width: 720px;
  margin: 0 auto;
  padding: 0 16px;
}
[data-ui="v2"] #viewChat .msg-row.user {
  flex-direction: row-reverse;
}
[data-ui="v2"] #viewChat .av {
  width: 30px;
  height: 30px;
  border-radius: 9px;
  display: grid;
  place-items: center;
  font-size: 13px;
  font-weight: 600;
  flex: none;
  margin-top: 2px;
}
[data-ui="v2"] #viewChat .msg-row.ai .av {
  background: linear-gradient(135deg, var(--teal-deep), var(--teal));
  color: #fff;
  box-shadow: 0 2px 6px rgba(13,148,136,0.20);
}
[data-ui="v2"] #viewChat .msg-row.user .av {
  background: linear-gradient(135deg, #7c5cff, #a78bfa);
  color: #fff;
}
[data-ui="v2"] #viewChat .msg-body {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
  max-width: 100%;
}

/* Bubble */
[data-ui="v2"] #viewChat .bubble {
  display: inline-block;
  padding: 12px 16px;
  border-radius: 18px;
  font-size: 14px;
  line-height: 1.55;
  letter-spacing: -0.005em;
  max-width: 640px;
  word-wrap: break-word;
  position: relative;
}
[data-ui="v2"] #viewChat .msg-row.user .bubble {
  background: var(--teal);
  color: #fff;
  border-radius: 18px 18px 4px 18px;
  align-self: flex-end;
}
[data-ui="v2"] #viewChat .msg-row.user .bubble b,
[data-ui="v2"] #viewChat .msg-row.user .bubble strong {
  color: #fff;
  font-weight: 600;
}
[data-ui="v2"] #viewChat .msg-row.ai .bubble {
  background: var(--paper);
  border: 1px solid var(--line);
  color: var(--ink);
  border-radius: 18px 18px 18px 4px;
  box-shadow: var(--shadow-1);
  padding-right: 40px;   /* leave space for the floating copy button */
}
[data-ui="v2"] #viewChat .msg-row.ai .bubble p strong,
[data-ui="v2"] #viewChat .msg-row.ai .bubble strong {
  color: #0f172a;
  font-weight: 700;
}
[data-ui="v2"] #viewChat .msg-row.ai .bubble code {
  background: var(--paper-2);
  padding: 1px 6px;
  border-radius: 4px;
  font-size: 12.5px;
  color: var(--teal-deep);
}

/* Screenshot upload bubble */
[data-ui="v2"] #viewChat .screenshot-bubble {
  padding: 4px;
  background: rgba(255,255,255,0.15);
  border-radius: 14px;
}
[data-ui="v2"] #viewChat .screenshot-preview {
  display: block;
  max-width: 280px;
  width: 100%;
  border-radius: 10px;
}
[data-ui="v2"] #viewChat .screenshot-bubble-cap {
  font-size: 11.5px;
  margin-top: 6px;
  padding: 0 6px 4px;
  opacity: 0.85;
}

/* Copy button on AI bubble */
[data-ui="v2"] #viewChat .copy-btn,
[data-ui="v2"] #viewChat .ai-copy-btn {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 26px;
  height: 26px;
  border-radius: 6px;
  border: 1px solid var(--line);
  background: var(--paper);
  color: var(--ink-2);
  display: grid;
  place-items: center;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.15s ease, background 0.12s ease, color 0.12s ease;
}
[data-ui="v2"] #viewChat .msg-row.ai:hover .copy-btn,
[data-ui="v2"] #viewChat .msg-row.ai:hover .ai-copy-btn {
  opacity: 1;
}
[data-ui="v2"] #viewChat .copy-btn:hover,
[data-ui="v2"] #viewChat .ai-copy-btn:hover {
  background: var(--paper-2);
  color: var(--ink);
}
@media (hover: none) {
  [data-ui="v2"] #viewChat .msg-row.ai .copy-btn,
  [data-ui="v2"] #viewChat .msg-row.ai .ai-copy-btn { opacity: 0.55; }
}

/* Embedded chart inside an AI bubble */
[data-ui="v2"] #viewChat .bubble-chart,
[data-ui="v2"] #viewChat .chart-card {
  margin-top: 10px;
  padding: 12px 14px;
  background: var(--paper-2);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
}
[data-ui="v2"] #viewChat .bubble-chart-hdr {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-2);
}
[data-ui="v2"] #viewChat .bubble-chart-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
  margin: 4px 0 8px;
}

/* Embedded data card (race intel etc.) */
[data-ui="v2"] #viewChat .bubble-data {
  margin-top: 10px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: var(--teal-soft);
  border: 1px solid #a7f3d8;
  border-radius: var(--r-lg);
}
[data-ui="v2"] #viewChat .bubble-data-ico {
  width: 32px; height: 32px;
  border-radius: 8px;
  background: var(--teal);
  color: #fff;
  display: grid;
  place-items: center;
  flex: none;
}
[data-ui="v2"] #viewChat .bubble-data-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
}
[data-ui="v2"] #viewChat .bubble-data-meta {
  font-size: 11.5px;
  color: var(--ink-soft);
  margin-top: 2px;
}

/* Suggestion chips */
[data-ui="v2"] #viewChat .chips-wrapper {
  padding: 0 16px 10px;
  max-width: 720px;
  margin: 0 auto;
  width: 100%;
}
[data-ui="v2"] #viewChat .chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: center;
}
[data-ui="v2"] #viewChat .chip {
  padding: 7px 14px;
  border-radius: var(--r-pill);
  background: var(--paper);
  border: 1px solid var(--line);
  color: var(--ink-soft);
  font-size: 12.5px;
  font-weight: 500;
  cursor: pointer;
  font-family: inherit;
  transition: background 0.12s ease, border-color 0.12s ease, color 0.12s ease;
}
[data-ui="v2"] #viewChat .chip:hover {
  background: var(--paper-2);
  border-color: var(--line-2);
  color: var(--ink);
}

/* Glass input area.
   Lift the entire input region into its own stacking context that wins
   over the messages list above. Without this, chat bubbles' chart cards
   (which create stacking contexts via backdrop-filter / box-shadow /
   hover transform) paint above the + dropdown menu and clip its top
   item. `isolation: isolate` forces a new stacking context on
   .input-area regardless of what the v1 backdrop-filter does. */
[data-ui="v2"] #viewChat .input-area {
  position: relative;
  z-index: 50;
  isolation: isolate;
  background: linear-gradient(180deg, transparent 0%, var(--bg) 30%);
  padding-top: 8px;
}
/* And ensure overflow doesn't clip when the menu pops up over messages */
[data-ui="v2"] #viewChat .input-area,
[data-ui="v2"] #viewChat .input-inner,
[data-ui="v2"] #viewChat .glass-input,
[data-ui="v2"] #viewChat .glass-input-bottom,
[data-ui="v2"] #viewChat .mode-bar,
[data-ui="v2"] #viewChat .plus-wrap {
  overflow: visible !important;
}
[data-ui="v2"] #viewChat .input-inner {
  max-width: 720px;
  margin: 0 auto;
  /* Bottom padding trimmed (16 → 4) to match the trim on .input-area
     above — together they kill the wide grey band under the composer
     without overlapping the hint text. */
  padding: 0 16px 4px;
}
[data-ui="v2"] #viewChat .glass-input {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 4px 4px 4px 14px;
  box-shadow: 0 8px 24px -6px rgba(15,26,22,0.08);
  transition: border-color 0.12s ease, box-shadow 0.12s ease;
}
[data-ui="v2"] #viewChat .glass-input:focus-within {
  border-color: var(--teal);
  box-shadow: 0 0 0 3px rgba(13,148,136,0.10), 0 8px 24px -6px rgba(15,26,22,0.08);
}
[data-ui="v2"] #viewChat #input {
  width: 100%;
  background: transparent;
  border: none;
  outline: none;
  resize: none;
  font-size: 14px;
  font-family: inherit;
  color: var(--ink);
  padding: 12px 0 4px;
  min-height: 24px;
  max-height: 200px;
}
[data-ui="v2"] #viewChat #input::placeholder {
  color: var(--ink-2);
}

[data-ui="v2"] #viewChat .glass-input-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 4px 0 0;
}
[data-ui="v2"] #viewChat .mode-bar {
  display: flex;
  gap: 6px;
  align-items: center;
}

/* + button + menu */
[data-ui="v2"] #viewChat .plus-wrap {
  position: relative;
}
[data-ui="v2"] #viewChat .plus-btn {
  width: 36px;
  height: 36px;
  border-radius: var(--r-md);
  border: 1px solid var(--line);
  background: var(--paper);
  color: var(--ink-soft);
  font-size: 18px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  transition: background 0.12s ease, border-color 0.12s ease;
}
[data-ui="v2"] #viewChat .plus-btn:hover {
  background: var(--paper-2);
  border-color: var(--line-2);
  color: var(--ink);
}
/* The + dropdown overlays chat bubbles + sleep-stage charts. Those carry
   their own stacking contexts (box-shadow + transform on hover create
   them implicitly), so a plain z-index:100 on the menu wasn't enough —
   the user reported the top "Upload screenshot" item rendering behind
   the chart legend. Lift .plus-wrap into its own stacking context with
   a high z-index so all its descendants render above siblings. */
[data-ui="v2"] #viewChat .plus-wrap {
  position: relative;
  z-index: 9000;
}
[data-ui="v2"] #viewChat .plus-menu {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 0;
  min-width: 220px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: 0 16px 40px -8px rgba(15,26,22,0.18);
  padding: 6px;
  display: none;
  z-index: 9001;
}
[data-ui="v2"] #viewChat .plus-menu.open {
  display: block;
}
[data-ui="v2"] #viewChat .plus-menu-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  border-radius: var(--r-md);
  font-size: 13px;
  color: var(--ink);
  cursor: pointer;
  transition: background 0.12s ease;
}
[data-ui="v2"] #viewChat .plus-menu-item:hover {
  background: var(--paper-2);
}
[data-ui="v2"] #viewChat .plus-menu-item.plus-menu-danger {
  color: #b91c1c;
}
[data-ui="v2"] #viewChat .plus-menu-item.plus-menu-danger:hover {
  background: #fef2f2;
}
[data-ui="v2"] #viewChat .plus-menu-icon {
  font-size: 16px;
  width: 24px;
  text-align: center;
  flex: none;
}

/* Suggestions toggle button */
[data-ui="v2"] #viewChat .suggestions-toggle {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 8px 12px;
  border-radius: var(--r-md);
  border: 1px solid var(--line);
  background: var(--paper);
  color: var(--ink-soft);
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  transition: background 0.12s ease, border-color 0.12s ease, color 0.12s ease;
}
[data-ui="v2"] #viewChat .suggestions-toggle:hover {
  background: var(--paper-2);
  border-color: var(--line-2);
  color: var(--ink);
}
[data-ui="v2"] #viewChat .toggle-chevron {
  font-size: 9px;
  margin-left: 2px;
}

/* Send button */
[data-ui="v2"] #viewChat #send {
  width: 36px;
  height: 36px;
  border-radius: var(--r-md);
  border: none;
  background: var(--teal);
  color: #fff;
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: background 0.12s ease, transform 0.12s ease;
}
[data-ui="v2"] #viewChat #send:hover {
  background: var(--teal-deep);
  transform: translateY(-1px);
}
[data-ui="v2"] #viewChat #send:disabled {
  background: var(--paper-2);
  color: var(--ink-2);
  cursor: not-allowed;
  transform: none;
}

/* Typing indicator */
[data-ui="v2"] #viewChat .typing-bubble {
  display: inline-flex;
  gap: 4px;
  padding: 14px 18px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 18px;
  box-shadow: var(--shadow-1);
}
[data-ui="v2"] #viewChat .typing-bubble span {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--ink-2);
  animation: v2-typing 1.2s ease-in-out infinite;
}
[data-ui="v2"] #viewChat .typing-bubble span:nth-child(2) { animation-delay: 0.15s; }
[data-ui="v2"] #viewChat .typing-bubble span:nth-child(3) { animation-delay: 0.30s; }
@keyframes v2-typing {
  0%, 60%, 100% { opacity: 0.3; transform: translateY(0); }
  30%           { opacity: 1;   transform: translateY(-3px); }
}

/* Save / Discard pending-activity buttons */
[data-ui="v2"] #viewChat .pending-act-card {
  margin-top: 10px;
  padding: 12px 14px;
  background: var(--paper-2);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
}
[data-ui="v2"] #viewChat .pending-act-actions {
  display: flex;
  gap: 8px;
  margin-top: 10px;
}
[data-ui="v2"] #viewChat .pending-act-save,
[data-ui="v2"] #viewChat .pending-act-discard {
  padding: 8px 14px;
  border-radius: var(--r-md);
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  border: 1px solid;
}
[data-ui="v2"] #viewChat .pending-act-save {
  background: var(--teal);
  border-color: var(--teal);
  color: #fff;
}
[data-ui="v2"] #viewChat .pending-act-save:hover {
  background: var(--teal-deep);
}
[data-ui="v2"] #viewChat .pending-act-discard {
  background: var(--paper);
  border-color: var(--line);
  color: var(--ink-soft);
}
[data-ui="v2"] #viewChat .pending-act-discard:hover {
  background: var(--paper-2);
  border-color: var(--line-2);
  color: var(--ink);
}

@media (max-width: 720px) {
  [data-ui="v2"] #viewChat .msg-row { padding: 0 12px; }
  [data-ui="v2"] #viewChat .bubble { font-size: 14px; }
  [data-ui="v2"] #viewChat .input-inner { padding: 0 12px 12px; }
  [data-ui="v2"] #viewChat .welcome { padding: 32px 16px 20px; }
  [data-ui="v2"] #viewChat .welcome h2 { font-size: 22px; }
}


/* ═══════════════════════════════════════════════════════════════════════
   STEP 24 — Auth pages polish (loading button, animated errors, etc.)
   Builds on STEP 3 — adds the in-flight + error/success states v1 emits
   when the user submits signin / signup / forgot / reset.
   ═══════════════════════════════════════════════════════════════════════ */

/* Animate the auth-error block on appearance — slide-down + fade-in.
   v1 toggles it visible by setting style.display='block' OR adding .show.
   We support both paths. */
[data-ui="v2"] .auth-error,
[data-ui="v2"] #signin-error,
[data-ui="v2"] #signup-error,
[data-ui="v2"] #forgot-error,
[data-ui="v2"] #reset-error {
  background: var(--rose-soft, #fee2e2);
  color: #991b1b;
  border: 1px solid #fecaca;
  border-radius: var(--r-md);
  padding: 11px 14px;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.45;
  margin-bottom: 8px;
  display: none;
  animation: v2-auth-error-in 0.22s ease-out;
  position: relative;
  padding-left: 36px;
}
[data-ui="v2"] .auth-error::before,
[data-ui="v2"] #signin-error::before,
[data-ui="v2"] #signup-error::before,
[data-ui="v2"] #forgot-error::before,
[data-ui="v2"] #reset-error::before {
  content: "⚠";
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 14px;
  font-weight: 700;
  color: #b91c1c;
}
/* v1 calls element.style.display='block' (via JS) OR adds .show class.
   Both should trigger the animation. */
[data-ui="v2"] .auth-error[style*="block"],
[data-ui="v2"] .auth-error.show,
[data-ui="v2"] #signin-error[style*="block"],
[data-ui="v2"] #signup-error[style*="block"],
[data-ui="v2"] #forgot-error[style*="block"],
[data-ui="v2"] #reset-error[style*="block"] {
  display: block !important;
}
@keyframes v2-auth-error-in {
  0%   { opacity: 0; transform: translateY(-6px); max-height: 0; padding-top: 0; padding-bottom: 0; }
  60%  { opacity: 1; }
  100% { opacity: 1; transform: translateY(0);    max-height: 200px; }
}

/* Success block — same pattern, teal */
[data-ui="v2"] .auth-success,
[data-ui="v2"] #forgot-success,
[data-ui="v2"] #reset-success {
  background: var(--teal-soft);
  color: var(--teal-deep);
  border: 1px solid #a7f3d8;
  border-radius: var(--r-md);
  padding: 11px 14px 11px 36px;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.45;
  margin-bottom: 8px;
  display: none;
  animation: v2-auth-error-in 0.22s ease-out;
  position: relative;
}
[data-ui="v2"] .auth-success::before,
[data-ui="v2"] #forgot-success::before,
[data-ui="v2"] #reset-success::before {
  content: "✓";
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 14px;
  font-weight: 700;
  color: var(--teal-deep);
}
[data-ui="v2"] .auth-success[style*="block"],
[data-ui="v2"] #forgot-success[style*="block"],
[data-ui="v2"] #reset-success[style*="block"] {
  display: block !important;
}

/* Submit button loading state.
   v1 sets btn.disabled=true and btn.textContent='Signing in…' / 'Creating…'.
   We add a CSS spinner on :disabled so the user sees the in-flight state
   without needing JS changes. */
[data-ui="v2"] .s-form .btn.primary:disabled,
[data-ui="v2"] .s-form .btn.primary[disabled] {
  background: linear-gradient(135deg, var(--teal-deep), var(--teal));
  border-color: var(--teal-deep);
  color: rgba(255, 255, 255, 0.85);
  cursor: progress;
  position: relative;
  padding-left: 48px;
  /* Suppress the inline arrow svg while loading — the spinner replaces it */
}
[data-ui="v2"] .s-form .btn.primary:disabled svg,
[data-ui="v2"] .s-form .btn.primary[disabled] svg {
  display: none;
}
[data-ui="v2"] .s-form .btn.primary:disabled::before,
[data-ui="v2"] .s-form .btn.primary[disabled]::before {
  content: "";
  position: absolute;
  left: 22px;
  top: 50%;
  width: 14px; height: 14px;
  margin-top: -7px;
  border: 2px solid rgba(255, 255, 255, 0.4);
  border-top-color: #fff;
  border-radius: 50%;
  animation: v2-spin-fast 0.7s linear infinite;
}

/* When the input has invalid state (red ring) — triggered by JS adding
   .invalid class or by browser :invalid pseudo-class on required fields. */
[data-ui="v2"] .s-form .field input.invalid,
[data-ui="v2"] .s-form .field input:user-invalid {
  border-color: #fca5a5;
  background: #fff8f8;
}
[data-ui="v2"] .s-form .field input.invalid:focus,
[data-ui="v2"] .s-form .field input:user-invalid:focus {
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.10);
  border-color: #ef4444;
}

/* Subtle entrance for the auth card itself when the page first loads.
   Skip on reduced-motion users. */
[data-ui="v2"] .s-card,
[data-ui="v2"] .l-shell .l-left,
[data-ui="v2"] .l-shell .l-right {
  animation: v2-auth-fade-in 0.36s ease-out;
}
@keyframes v2-auth-fade-in {
  0%   { opacity: 0; transform: translateY(8px); }
  100% { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  [data-ui="v2"] .s-card,
  [data-ui="v2"] .l-shell .l-left,
  [data-ui="v2"] .l-shell .l-right,
  [data-ui="v2"] .auth-error,
  [data-ui="v2"] .auth-success,
  [data-ui="v2"] #signin-error,
  [data-ui="v2"] #signup-error,
  [data-ui="v2"] #forgot-error,
  [data-ui="v2"] #reset-error,
  [data-ui="v2"] #forgot-success,
  [data-ui="v2"] #reset-success {
    animation: none;
  }
}

/* Subtle hover lift on the auth card */
[data-ui="v2"] .s-card {
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
[data-ui="v2"] .s-card:hover {
  transform: translateY(-2px);
}


/* ═══════════════════════════════════════════════════════════════════════
   STEP 25 — PWA install banner (#pwaInstallBanner)
   Bottom-bar prompt that appears on Android Chrome when the app
   becomes installable (beforeinstallprompt fires).
   ═══════════════════════════════════════════════════════════════════════ */

[data-ui="v2"] #pwaInstallBanner {
  position: fixed;
  left: 50%;
  bottom: calc(20px + env(safe-area-inset-bottom, 0px));
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px 12px 18px;
  min-width: 320px;
  max-width: calc(100vw - 24px);
  background: var(--ink);
  color: var(--paper);
  border-radius: var(--r-pill);
  box-shadow:
    0 12px 32px -8px rgba(15,26,22,0.30),
    0 4px 12px rgba(15,26,22,0.12);
  z-index: 9998;
  animation: v2-pwa-slide-up 0.32s ease-out;
}
@keyframes v2-pwa-slide-up {
  0%   { opacity: 0; transform: translate(-50%, 16px); }
  100% { opacity: 1; transform: translate(-50%, 0);    }
}

[data-ui="v2"] #pwaInstallBanner .pwa-install-icon {
  font-size: 18px;
  flex: none;
}
[data-ui="v2"] #pwaInstallBanner .pwa-install-text {
  flex: 1;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.92);
}
[data-ui="v2"] #pwaInstallBanner .pwa-install-btn {
  padding: 8px 16px;
  border-radius: var(--r-pill);
  border: none;
  background: var(--teal);
  color: #fff;
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  flex: none;
  transition: background 0.12s ease;
}
[data-ui="v2"] #pwaInstallBanner .pwa-install-btn:hover {
  background: var(--teal-deep);
}
[data-ui="v2"] #pwaInstallBanner .pwa-install-dismiss {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: none;
  background: rgba(255, 255, 255, 0.10);
  color: rgba(255, 255, 255, 0.65);
  font-size: 14px;
  cursor: pointer;
  font-family: inherit;
  display: grid;
  place-items: center;
  flex: none;
  transition: background 0.12s ease, color 0.12s ease;
}
[data-ui="v2"] #pwaInstallBanner .pwa-install-dismiss:hover {
  background: rgba(255, 255, 255, 0.18);
  color: #fff;
}

@media (max-width: 540px) {
  [data-ui="v2"] #pwaInstallBanner {
    left: 12px; right: 12px;
    transform: none;
    min-width: 0;
    width: auto;
  }
  @keyframes v2-pwa-slide-up {
    0%   { opacity: 0; transform: translateY(16px); }
    100% { opacity: 1; transform: translateY(0);    }
  }
  [data-ui="v2"] #pwaInstallBanner .pwa-install-text { font-size: 12.5px; }
}


/* ═══════════════════════════════════════════════════════════════════════
   STEP 26 — Settings inside the Profile modal Account tab
   - Toggle switches (.digest-toggle / .digest-slider)
   - Section titles + descriptions (.pm-section-title)
   - Test-email / test-push buttons
   - Push category rows
   - Quiet-hours selectors
   - Change-password section
   ═══════════════════════════════════════════════════════════════════════ */

/* Section titles */
[data-ui="v2"] #profileModal .pm-section-title {
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.005em;
  color: var(--ink);
  margin: 0 0 8px;
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Subtle horizontal dividers v1 emits as inline-styled <div> */
[data-ui="v2"] #profileModal #pm-tab-account > div[style*="border-top"] {
  border-top: 1px solid var(--line) !important;
  border-color: var(--line) !important;
  margin: 28px 0 !important;
}

/* Toggle switch (used by digest + push) */
[data-ui="v2"] .digest-toggle {
  position: relative;
  display: inline-block;
  width: 44px;
  height: 24px;
  flex: none;
}
[data-ui="v2"] .digest-toggle input {
  opacity: 0;
  width: 0;
  height: 0;
}
[data-ui="v2"] .digest-slider {
  position: absolute;
  inset: 0;
  background: var(--paper-2);
  border: 1px solid var(--line);
  border-radius: 14px;
  cursor: pointer;
  transition: background 0.18s ease, border-color 0.18s ease;
}
[data-ui="v2"] .digest-slider::before {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 18px;
  height: 18px;
  background: var(--paper);
  border-radius: 50%;
  box-shadow: 0 1px 3px rgba(15,26,22,0.18);
  transition: transform 0.22s cubic-bezier(0.32, 0.72, 0, 1);
}
[data-ui="v2"] .digest-toggle input:checked + .digest-slider {
  background: var(--teal);
  border-color: var(--teal);
}
[data-ui="v2"] .digest-toggle input:checked + .digest-slider::before {
  transform: translateX(20px);
  background: #fff;
}
[data-ui="v2"] .digest-toggle input:focus-visible + .digest-slider {
  box-shadow: 0 0 0 3px rgba(13,148,136,0.22);
}
[data-ui="v2"] .digest-toggle input:disabled + .digest-slider {
  opacity: 0.55;
  cursor: not-allowed;
}

/* Inputs / selects (.pm-input) — match the modal field styling */
[data-ui="v2"] #profileModal .pm-input {
  width: 100%;
  padding: 10px 14px;
  border-radius: var(--r-md);
  border: 1px solid var(--line);
  background: var(--paper);
  font-size: 14px;
  font-family: inherit;
  color: var(--ink);
  transition: border-color 0.12s ease, box-shadow 0.12s ease;
}
[data-ui="v2"] #profileModal .pm-input:focus {
  outline: none;
  border-color: var(--teal);
  box-shadow: 0 0 0 3px rgba(13,148,136,0.12);
}

/* Test buttons (digest test, push test) — outlined ghost style */
[data-ui="v2"] #digest-test-btn,
[data-ui="v2"] #push-test-btn {
  background: var(--paper) !important;
  border: 1px solid var(--line) !important;
  color: var(--ink-soft) !important;
  border-radius: var(--r-md) !important;
  padding: 10px 14px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  font-family: inherit !important;
  transition: background 0.12s ease, border-color 0.12s ease, color 0.12s ease;
}
[data-ui="v2"] #digest-test-btn:hover,
[data-ui="v2"] #push-test-btn:hover {
  background: var(--paper-2) !important;
  border-color: var(--line-2) !important;
  color: var(--ink) !important;
}

/* Status messages */
[data-ui="v2"] #profileModal .pm-msg,
[data-ui="v2"] #profileModal #digest-msg,
[data-ui="v2"] #profileModal #digest-test-msg,
[data-ui="v2"] #profileModal #push-status-msg,
[data-ui="v2"] #profileModal #push-prefs-msg,
[data-ui="v2"] #profileModal #push-test-msg,
[data-ui="v2"] #profileModal #digest-tz-note {
  font-size: 12px;
  color: var(--ink-2);
  margin: 6px 0 0;
  line-height: 1.45;
}
[data-ui="v2"] #profileModal .pm-msg.success {
  color: var(--teal-deep);
  font-weight: 600;
}
[data-ui="v2"] #profileModal .pm-msg.error {
  color: #b91c1c;
  font-weight: 600;
}

/* Push category rows — JS injects into #push-categories-list */
[data-ui="v2"] #push-categories-list > * {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  font-size: 13px;
  color: var(--ink);
}
[data-ui="v2"] #push-categories-list > * + * {
  margin-top: 6px;
}

/* iOS warning note inside push section */
[data-ui="v2"] #profileModal #push-ios-note {
  display: inline-block;
  padding: 8px 12px;
  background: #fffbeb;
  border: 1px solid #fde68a;
  color: #92400e !important;
  border-radius: var(--r-md);
  font-size: 12px;
  font-weight: 500 !important;
  line-height: 1.5;
  margin-top: 6px;
}

/* Save buttons (.pm-save inside Account tab) — already styled in STEP 13,
   add a subtle teal-shadow lift */
[data-ui="v2"] #profileModal #pm-tab-account .pm-save {
  margin-top: 14px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.20),
    0 6px 14px -4px rgba(13,148,136,0.30);
  transition: background 0.12s ease, transform 0.12s ease, box-shadow 0.12s ease;
}
[data-ui="v2"] #profileModal #pm-tab-account .pm-save:hover {
  transform: translateY(-1px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.20),
    0 8px 20px -4px rgba(13,148,136,0.45);
}

/* Long descriptive paragraphs inside Account tab — soften */
[data-ui="v2"] #profileModal #pm-tab-account p[style*="font-size:12.5px"],
[data-ui="v2"] #profileModal #pm-tab-account p[style*="font-size:11.5px"] {
  color: var(--ink-2) !important;
  line-height: 1.55 !important;
}


/* ═══════════════════════════════════════════════════════════════════════
   STEP 27 — Reports stat-tile polish
   Fixes the Training Load tab where ACWR's "(High injury risk)" string
   was jammed into the value field, and acute-load showed unrounded
   "28.33000000 km" because of float arithmetic. Server-side now rounds
   numbers and emits a separate `status_kind` for colour coding; this
   CSS adds the chip + tightens tile alignment.
   ═══════════════════════════════════════════════════════════════════════ */

[data-ui="v2"] .v2i-stats {
  /* Slightly narrower min — 6 tiles fit cleanly on 1280 px */
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  align-items: stretch;
}
[data-ui="v2"] .v2i-stat {
  /* Uniform tile height even when one tile carries a status chip */
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  min-height: 92px;
  gap: 6px;
}
[data-ui="v2"] .v2i-stat-lbl {
  /* Truncate the icon+label combo on a single line */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: 0;
}
[data-ui="v2"] .v2i-stat-val {
  /* Long values (e.g. "14.5 km/wk") shouldn't wrap. Scale font down with clamp
     so it shrinks gracefully when the tile is narrow. */
  font-size: clamp(16px, 1.4vw + 8px, 22px);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  letter-spacing: -0.025em;
}

/* Status chip below the value (e.g. ACWR "Optimal" / "Caution" / "High risk") */
[data-ui="v2"] .v2i-stat-chip {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  padding: 2px 8px;
  border-radius: var(--r-pill);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border: 1px solid transparent;
  white-space: nowrap;
  margin-top: 2px;
}
[data-ui="v2"] .v2i-stat-chip-good    { background: var(--teal-soft); color: var(--teal-deep); border-color: #a7f3d8; }
[data-ui="v2"] .v2i-stat-chip-warn    { background: #fef3c7;          color: #92400e;          border-color: #fde68a; }
[data-ui="v2"] .v2i-stat-chip-danger  { background: #fee2e2;          color: #991b1b;          border-color: #fca5a5; }
[data-ui="v2"] .v2i-stat-chip-low     { background: var(--paper-2);   color: var(--ink-2);     border-color: var(--line); }
[data-ui="v2"] .v2i-stat-chip-neutral { background: var(--paper-2);   color: var(--ink-2);     border-color: var(--line); }

/* When a tile carries a chip, the value can sit a touch tighter */
[data-ui="v2"] .v2i-stat:has(.v2i-stat-chip) .v2i-stat-val {
  margin-bottom: 0;
}

/* Section header above stats — "Training Load · Last 12 weeks" type chrome */
[data-ui="v2"] .v2i-tab-hd .v2i-pill {
  flex: none;
}


/* ═══════════════════════════════════════════════════════════════════════
   STEP 28 — Reports redesign (diagnosis banner, ACWR gauge, stat groups,
   trend deltas, sparklines, "why this matters" footer).
   Applies to all three report tabs (Sleep / Training Load / Readiness)
   when the server emits the new fields.
   ═══════════════════════════════════════════════════════════════════════ */

/* Diagnosis banner — plain-English status line above the chart */
[data-ui="v2"] .v2i-diagnosis {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 16px;
  border-radius: var(--r-lg);
  border: 1px solid;
  margin-bottom: 14px;
  font-size: 14px;
  line-height: 1.5;
  font-weight: 500;
}
[data-ui="v2"] .v2i-diagnosis-ico {
  flex: none;
  font-size: 18px;
  line-height: 1;
  margin-top: 1px;
}
[data-ui="v2"] .v2i-diagnosis-txt { color: var(--ink); }
[data-ui="v2"] .v2i-diagnosis-good {
  background: linear-gradient(180deg, #f0fdf4, var(--paper));
  border-color: #86efac;
}
[data-ui="v2"] .v2i-diagnosis-warn {
  background: linear-gradient(180deg, #fffbeb, var(--paper));
  border-color: #fde68a;
}
[data-ui="v2"] .v2i-diagnosis-danger {
  background: linear-gradient(180deg, #fef2f2, var(--paper));
  border-color: #fca5a5;
}
[data-ui="v2"] .v2i-diagnosis-low,
[data-ui="v2"] .v2i-diagnosis-neutral {
  background: var(--paper-2);
  border-color: var(--line);
}

/* Hero chart card — bigger emphasis since chart is now the lead */
[data-ui="v2"] .v2i-chart-card.v2i-chart-hero {
  margin-bottom: 16px;
}
[data-ui="v2"] .v2i-chart-card.v2i-chart-hero .v2i-chart-canvas-wrap {
  height: 240px;
}

/* ACWR gauge */
[data-ui="v2"] .v2i-gauge-card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  padding: 18px 20px 22px;
  box-shadow: var(--shadow-1), var(--bevel-card);
  margin-bottom: 16px;
}
[data-ui="v2"] .v2i-gauge-hd {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}
[data-ui="v2"] .v2i-gauge-eyebrow {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-2);
}
[data-ui="v2"] .v2i-gauge-val {
  font-family: var(--font-num);
  font-feature-settings: 'tnum' 1;
  font-size: 28px;
  font-weight: 700;
  letter-spacing: -0.025em;
  color: var(--ink);
  margin-top: 2px;
  display: flex;
  align-items: center;
  gap: 10px;
}
[data-ui="v2"] .v2i-gauge-val .v2i-stat-chip {
  font-size: 10px;
  vertical-align: middle;
}
[data-ui="v2"] .v2i-gauge-track {
  position: relative;
  height: 14px;
  background: var(--paper-2);
  border-radius: 7px;
  overflow: hidden;
}
[data-ui="v2"] .v2i-gauge-zone {
  position: absolute;
  top: 0; bottom: 0;
  height: 100%;
}
[data-ui="v2"] .v2i-gauge-zone-low    { background: linear-gradient(180deg, rgba(148,163,184,0.40), rgba(148,163,184,0.20)); }
[data-ui="v2"] .v2i-gauge-zone-good   { background: linear-gradient(180deg, rgba(16,185,129,0.55),  rgba(16,185,129,0.30)); }
[data-ui="v2"] .v2i-gauge-zone-warn   { background: linear-gradient(180deg, rgba(251,191,36,0.55),  rgba(251,191,36,0.30)); }
[data-ui="v2"] .v2i-gauge-zone-danger { background: linear-gradient(180deg, rgba(239,68,68,0.55),   rgba(239,68,68,0.30)); }
[data-ui="v2"] .v2i-gauge-tick {
  position: absolute;
  top: 0; bottom: 0;
  width: 1.5px;
  background: rgba(255,255,255,0.55);
  pointer-events: none;
}
[data-ui="v2"] .v2i-gauge-marker {
  position: absolute;
  top: -3px;
  bottom: -3px;
  width: 4px;
  margin-left: -2px;
  background: var(--ink);
  border-radius: 2px;
  box-shadow: 0 2px 6px rgba(15,26,22,0.30);
}
[data-ui="v2"] .v2i-gauge-marker::before {
  content: "";
  position: absolute;
  top: -6px; left: 50%;
  transform: translateX(-50%);
  width: 10px; height: 10px;
  background: var(--ink);
  border-radius: 50%;
  border: 2px solid var(--paper);
}
[data-ui="v2"] .v2i-gauge-labels {
  position: relative;
  height: 18px;
  margin-top: 8px;
}
[data-ui="v2"] .v2i-gauge-lbl {
  position: absolute;
  top: 0;
  transform: translateX(-50%);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
}
[data-ui="v2"] .v2i-gauge-lbl-low    { color: var(--ink-2); }
[data-ui="v2"] .v2i-gauge-lbl-good   { color: #047857; }
[data-ui="v2"] .v2i-gauge-lbl-warn   { color: #b45309; }
[data-ui="v2"] .v2i-gauge-lbl-danger { color: #b91c1c; }

/* Stat groups (Volume / Load / Capacity) */
[data-ui="v2"] .v2i-stat-group {
  margin-bottom: 18px;
}
[data-ui="v2"] .v2i-group-hd {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--ink-2);
  margin-bottom: 8px;
  padding-left: 2px;
}
[data-ui="v2"] .v2i-stats-grouped {
  /* Tighter density inside groups since the parent gives them context */
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}

/* Trend delta inside a tile */
[data-ui="v2"] .v2i-stat-delta {
  font-size: 11px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  margin-top: 4px;
}
[data-ui="v2"] .v2i-stat-delta-good,
[data-ui="v2"] .v2i-stat-delta-pos     { color: var(--teal-deep); }
[data-ui="v2"] .v2i-stat-delta-warn    { color: #b45309; }
[data-ui="v2"] .v2i-stat-delta-danger,
[data-ui="v2"] .v2i-stat-delta-neg     { color: #b91c1c; }
[data-ui="v2"] .v2i-stat-delta-neutral { color: var(--ink-2); }

/* Inline sparkline (e.g. TSB 12-week) — uses currentColor so the line
   adopts the tile's chip colour where present. */
[data-ui="v2"] .v2i-stat-spark {
  display: block;
  margin-top: 6px;
  color: var(--teal);
}

/* Optional hint line under the value */
[data-ui="v2"] .v2i-stat-hint {
  font-size: 11px;
  color: var(--ink-2);
  margin-top: 4px;
  font-style: italic;
  line-height: 1.4;
}

/* "Why this matters" explainer footer */
[data-ui="v2"] .v2i-explainer {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 14px;
  border-radius: var(--r-md);
  background: var(--paper-2);
  border: 1px solid var(--line);
  margin-top: 18px;
  font-size: 12.5px;
  color: var(--ink-soft);
  line-height: 1.55;
}
[data-ui="v2"] .v2i-explainer-ico {
  flex: none;
  font-size: 14px;
  line-height: 1;
  margin-top: 1px;
}


/* ═══════════════════════════════════════════════════════════════════════
   STEP 29 — Hydration tile + 5-column This Week grid
   The week row had 4 tiles; adding Hydration makes it 5.
   ═══════════════════════════════════════════════════════════════════════ */

[data-ui="v2"] .v2d-week.v2d-week-5 {
  grid-template-columns: repeat(5, 1fr);
}
@media (max-width: 1280px) {
  [data-ui="v2"] .v2d-week.v2d-week-5 {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media (max-width: 720px) {
  [data-ui="v2"] .v2d-week.v2d-week-5 {
    grid-template-columns: 1fr 1fr;
  }
}
@media (max-width: 480px) {
  [data-ui="v2"] .v2d-week.v2d-week-5 {
    grid-template-columns: 1fr;
  }
}

/* Hydration tile bar — soft sky-blue gradient */
[data-ui="v2"] .v2d-tile.water .v2d-tile-bar > span {
  background: linear-gradient(90deg, #38bdf8, #0284c7);
}
[data-ui="v2"] .v2d-tile.water .v2d-tile-eyebrow {
  color: #075985;
}

/* ─────────────────────────────────────────────────────────────────────
   Plan v2 — ports of v1 features into the v2 UI
   - Course-intel header card  (.v2pci-*)
   - Adherence verdict          (.v2pa-*)
   - Suggestions                (.v2psug-*)
   - Per-session state badges   (.v2p-state-*)
   - Per-week summary chips     (.v2p-ws-*)
   ────────────────────────────────────────────────────────────────────*/

[data-ui="v2"] .v2pci {
  margin: 0 0 18px;
  border: 1px solid var(--v2-border, #e5e7eb);
  border-radius: 14px;
  background: linear-gradient(180deg, #f8fafc 0%, #fff 100%);
  overflow: hidden;
}
[data-ui="v2"] .v2pci-summary {
  list-style: none; cursor: pointer;
  padding: 14px 18px;
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px; user-select: none;
}
[data-ui="v2"] .v2pci-summary::-webkit-details-marker { display: none; }
[data-ui="v2"] .v2pci-headline { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
[data-ui="v2"] .v2pci-name {
  font-size: 15px; font-weight: 700; color: #0f172a;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
[data-ui="v2"] .v2pci-where { font-size: 12.5px; color: #64748b; }
[data-ui="v2"] .v2pci-tags { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
[data-ui="v2"] .v2pci-tag {
  font-size: 11.5px; font-weight: 600;
  color: #0d9488; background: rgba(13,148,136,0.08);
  padding: 4px 10px; border-radius: 12px; text-transform: capitalize;
}
[data-ui="v2"] .v2pci-chevron { font-size: 13px; color: #94a3b8; transition: transform 0.18s; }
[data-ui="v2"] .v2pci[open] .v2pci-chevron { transform: rotate(180deg); }
[data-ui="v2"] .v2pci-body {
  padding: 4px 18px 16px;
  border-top: 1px solid #e2e8f0;
  display: flex; flex-direction: column; gap: 14px;
}
[data-ui="v2"] .v2pci-stats {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px; margin-top: 12px;
}
[data-ui="v2"] .v2pci-stat {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px; background: #fff;
  border: 1px solid #e5e7eb; border-radius: 10px;
}
[data-ui="v2"] .v2pci-stat-icon { font-size: 18px; }
[data-ui="v2"] .v2pci-stat-meta { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
[data-ui="v2"] .v2pci-stat-lbl {
  font-size: 10.5px; font-weight: 600; color: #64748b;
  text-transform: uppercase; letter-spacing: 0.04em;
}
[data-ui="v2"] .v2pci-stat-val {
  font-size: 13.5px; font-weight: 700; color: #0f172a; text-transform: capitalize;
}
[data-ui="v2"] .v2pci-section { display: flex; flex-direction: column; gap: 8px; }
[data-ui="v2"] .v2pci-section-title {
  font-size: 12px; font-weight: 700; color: #475569;
  text-transform: uppercase; letter-spacing: 0.04em;
}
[data-ui="v2"] .v2pci-hills {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 8px;
}
[data-ui="v2"] .v2pci-hill {
  background: #fff; border: 1px solid #e5e7eb;
  border-left: 3px solid #f59e0b; border-radius: 8px;
  padding: 8px 12px;
}
[data-ui="v2"] .v2pci-hill-name { font-size: 13px; font-weight: 600; color: #0f172a; }
[data-ui="v2"] .v2pci-hill-meta { font-size: 11.5px; color: #64748b; margin-top: 2px; }
[data-ui="v2"] .v2pci-notes {
  font-size: 13px; color: #475569; line-height: 1.5;
  background: #fff; padding: 10px 12px;
  border: 1px solid #e5e7eb; border-radius: 8px;
}
[data-ui="v2"] .v2pci-adapt {
  background: #f0fdf4; border: 1px solid #bbf7d0; border-radius: 10px; padding: 12px 14px;
}
[data-ui="v2"] .v2pci-adapt .v2pci-section-title { color: #047857; }
[data-ui="v2"] .v2pci-adapt-list {
  margin: 0; padding-left: 18px;
  font-size: 12.5px; color: #065f46; line-height: 1.55;
  display: flex; flex-direction: column; gap: 4px;
}
[data-ui="v2"] .v2pci-adapt-list li::marker { color: #10b981; }

/* Adherence verdict card */
[data-ui="v2"] .v2pa {
  margin: 0 0 14px; padding: 14px 16px;
  background: #fff; border: 1px solid var(--v2-border, #e5e7eb);
  border-left: 4px solid #94a3b8; border-radius: 12px;
  display: flex; flex-direction: column; gap: 10px;
}
[data-ui="v2"] .v2pa-on_track  { border-left-color: #10b981; background: linear-gradient(180deg, #f0fdf4 0%, #fff 60%); }
[data-ui="v2"] .v2pa-slipping  { border-left-color: #f59e0b; background: linear-gradient(180deg, #fffbeb 0%, #fff 60%); }
[data-ui="v2"] .v2pa-off_plan  { border-left-color: #ef4444; background: linear-gradient(180deg, #fef2f2 0%, #fff 60%); }
[data-ui="v2"] .v2pa-complete  {
  border-left-color: #0d9488; background: linear-gradient(180deg, #ecfdf5 0%, #fff 60%);
  flex-direction: row; gap: 14px; align-items: center;
}
[data-ui="v2"] .v2pa-icon { font-size: 32px; line-height: 1; }
[data-ui="v2"] .v2pa-top {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
}
[data-ui="v2"] .v2pa-pill {
  font-size: 11px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase;
  padding: 4px 10px; border-radius: 999px; background: #f1f5f9; color: #0f172a;
}
[data-ui="v2"] .v2pa-on_track .v2pa-pill { background: #d1fae5; color: #065f46; }
[data-ui="v2"] .v2pa-slipping .v2pa-pill { background: #fef3c7; color: #92400e; }
[data-ui="v2"] .v2pa-off_plan .v2pa-pill { background: #fee2e2; color: #991b1b; }
[data-ui="v2"] .v2pa-trend { font-size: 11.5px; color: #64748b; font-weight: 600; }
[data-ui="v2"] .v2pa-body { display: flex; flex-direction: column; gap: 6px; }
[data-ui="v2"] .v2pa-headline { font-size: 15px; font-weight: 700; color: #0f172a; }
[data-ui="v2"] .v2pa-subline  { font-size: 13px; color: #475569; line-height: 1.5; }
[data-ui="v2"] .v2pa-signals  { display: flex; flex-direction: column; gap: 6px; margin-top: 6px; }
[data-ui="v2"] .v2pa-sig {
  display: flex; gap: 8px; align-items: flex-start;
  padding: 7px 10px; border-radius: 8px;
  font-size: 12.5px; line-height: 1.45;
}
[data-ui="v2"] .v2pa-sig-high   { background: #fef2f2; color: #991b1b; border: 1px solid #fecaca; }
[data-ui="v2"] .v2pa-sig-medium { background: #fffbeb; color: #92400e; border: 1px solid #fde68a; }
[data-ui="v2"] .v2pa-sig-low    { background: #f0fdf4; color: #065f46; border: 1px solid #bbf7d0; }
[data-ui="v2"] .v2pa-sig-icon   { font-weight: 700; min-width: 14px; }

/* Suggestion cards */
[data-ui="v2"] .v2psugs { display: flex; flex-direction: column; gap: 10px; margin-bottom: 14px; }
[data-ui="v2"] .v2psug {
  background: #fff; border: 1px solid var(--v2-border, #e5e7eb);
  border-left: 4px solid #f59e0b; border-radius: 12px;
  padding: 14px 16px; display: flex; flex-direction: column; gap: 8px;
}
[data-ui="v2"] .v2psug-high   { border-left-color: #ef4444; background: linear-gradient(180deg, #fef2f2 0%, #fff 60%); }
[data-ui="v2"] .v2psug-medium { border-left-color: #f59e0b; background: linear-gradient(180deg, #fffbeb 0%, #fff 60%); }
[data-ui="v2"] .v2psug-low    { border-left-color: #10b981; background: linear-gradient(180deg, #f0fdf4 0%, #fff 60%); }
[data-ui="v2"] .v2psug-top {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
}
[data-ui="v2"] .v2psug-sev {
  font-size: 10.5px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.05em;
  padding: 3px 10px; border-radius: 999px; background: #f1f5f9; color: #0f172a;
}
[data-ui="v2"] .v2psug-high .v2psug-sev   { background: #fee2e2; color: #991b1b; }
[data-ui="v2"] .v2psug-medium .v2psug-sev { background: #fef3c7; color: #92400e; }
[data-ui="v2"] .v2psug-low .v2psug-sev    { background: #d1fae5; color: #065f46; }
[data-ui="v2"] .v2psug-affected { font-size: 11.5px; font-weight: 600; color: #64748b; text-align: right; }
[data-ui="v2"] .v2psug-headline { font-size: 14.5px; font-weight: 700; color: #0f172a; line-height: 1.4; }
[data-ui="v2"] .v2psug-rationale { font-size: 12.5px; color: #475569; line-height: 1.5; }
[data-ui="v2"] .v2psug-actions { display: flex; gap: 8px; margin-top: 4px; }

/* Per-session completion state badges + card colour cues */
[data-ui="v2"] .v2p-state {
  font-size: 10.5px; font-weight: 700;
  padding: 2px 8px; border-radius: 999px;
  letter-spacing: 0.02em; margin-left: 6px;
}
[data-ui="v2"] .v2p-state-done    { background: #d1fae5; color: #047857; }
[data-ui="v2"] .v2p-state-swapped { background: #fed7aa; color: #c2410c; }
[data-ui="v2"] .v2p-state-skipped { background: #f1f5f9; color: #475569; }
[data-ui="v2"] .v2p-state-missed  { background: #fee2e2; color: #b91c1c; }
[data-ui="v2"] .v2p-state-today   { background: #cffafe; color: #0e7490; }
[data-ui="v2"] .v2p-session-done    { background: #f0fdf4; }
[data-ui="v2"] .v2p-session-swapped { background: #fffbeb; }
[data-ui="v2"] .v2p-session-skipped { background: #f8fafc; opacity: 0.85; }
[data-ui="v2"] .v2p-session-missed  { background: #fef2f2; opacity: 0.92; }
[data-ui="v2"] .v2p-session-today   { background: #ecfeff; box-shadow: 0 0 0 1px rgba(14,165,233,0.2); }

/* Per-week summary line */
[data-ui="v2"] .v2p-wk-summary {
  display: flex; flex-wrap: wrap; gap: 10px;
  font-size: 12px; font-weight: 600;
  margin: 6px 0 12px; padding: 8px 12px;
  background: #f8fafc; border: 1px solid #e2e8f0;
  border-radius: 8px; align-items: center;
}
[data-ui="v2"] .v2p-ws-done    { color: #047857; }
[data-ui="v2"] .v2p-ws-swapped { color: #c2410c; }
[data-ui="v2"] .v2p-ws-skipped { color: #475569; }
[data-ui="v2"] .v2p-ws-missed  { color: #b91c1c; }
[data-ui="v2"] .v2p-ws-pending { color: #64748b; font-weight: 500; }
[data-ui="v2"] .v2p-ws-adh     { color: #0f172a; }

@media (max-width: 480px) {
  [data-ui="v2"] .v2pci-summary { padding: 12px 14px; }
  [data-ui="v2"] .v2pci-body { padding: 4px 14px 14px; }
  [data-ui="v2"] .v2pci-stats { grid-template-columns: 1fr 1fr; }
  [data-ui="v2"] .v2pci-hills { grid-template-columns: 1fr; }
}

/* Expandable week cards — replaces the flat .v2p-week-row clickability gap.
 * Each week is a <details> with the summary acting as the row. Body
 * reveals the full session list + per-week summary chips on click. */
[data-ui="v2"] .v2p-week-card {
  border: 1px solid var(--v2-border, #e5e7eb);
  border-radius: 12px;
  background: #fff;
  margin-bottom: 8px;
  overflow: hidden;
  transition: box-shadow 0.15s;
}
[data-ui="v2"] .v2p-week-card[open] { box-shadow: 0 1px 4px rgba(0,0,0,0.04); }
[data-ui="v2"] .v2p-week-card.current {
  border-color: rgba(13,148,136,0.4);
  background: linear-gradient(180deg, #f0fdfa 0%, #fff 60%);
}
[data-ui="v2"] .v2p-week-card.done summary { opacity: 0.78; }

[data-ui="v2"] .v2p-week-card > summary {
  list-style: none;
  cursor: pointer;
  display: flex; align-items: center; gap: 14px;
  padding: 12px 16px;
  user-select: none;
}
[data-ui="v2"] .v2p-week-card > summary::-webkit-details-marker { display: none; }
[data-ui="v2"] .v2p-week-chevron {
  margin-left: 6px;
  font-size: 13px;
  color: #94a3b8;
  transition: transform 0.18s;
}
[data-ui="v2"] .v2p-week-card[open] .v2p-week-chevron { transform: rotate(180deg); }

[data-ui="v2"] .v2p-week-body {
  padding: 4px 16px 14px;
  border-top: 1px solid #f1f5f9;
  display: flex; flex-direction: column; gap: 8px;
}
[data-ui="v2"] .v2p-empty-row {
  font-size: 12.5px; color: #94a3b8; padding: 6px 0; font-style: italic;
}

/* Override the legacy flat .v2p-week-row when it now lives inside summary.
 * The flex layout from the old rule still applies (ours composes cleanly). */
[data-ui="v2"] .v2p-week-card > summary .v2p-week-row {
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  margin: 0 !important;
  flex: 1;
  display: flex; align-items: center; gap: 14px;
}

/* Course-intel map + elevation profile (v2 plan) */
[data-ui="v2"] .v2pci-map {
  width: 100%;
  height: 220px;
  border-radius: 10px;
  background: #f1f5f9;
  border: 1px solid #e5e7eb;
  overflow: hidden;
  position: relative;
}
[data-ui="v2"] .v2pci-map .leaflet-container { border-radius: 10px; }
[data-ui="v2"] .v2pci-map-foot {
  font-size: 11px; color: #64748b;
  margin-top: 6px; font-style: italic;
}
[data-ui="v2"] .v2pci-elev {
  width: 100%; height: 90px; display: block;
  border: 1px solid #e5e7eb; border-radius: 10px;
  background: #fff;
}
[data-ui="v2"] .v2pci-elev-foot {
  display: flex; justify-content: space-between;
  font-size: 11px; color: #64748b; margin-top: 4px;
}
@media (max-width: 480px) {
  [data-ui="v2"] .v2pci-map { height: 180px; }
  [data-ui="v2"] .v2pci-elev { height: 70px; }
}

/* Per-session edit / comment UI on the v2 plan tab. */
[data-ui="v2"] .v2p-session {
  position: relative;
}
[data-ui="v2"] .v2p-session-actions {
  display: flex; gap: 4px;
  position: absolute; top: 6px; right: 6px;
  opacity: 0; transition: opacity 0.15s;
}
[data-ui="v2"] .v2p-session:hover .v2p-session-actions,
[data-ui="v2"] .v2p-session:focus-within .v2p-session-actions {
  opacity: 1;
}
[data-ui="v2"] .v2p-sa-btn {
  background: rgba(255,255,255,0.94);
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  width: 28px; height: 28px;
  font-size: 12px; cursor: pointer; color: #64748b;
  padding: 0; line-height: 1;
}
[data-ui="v2"] .v2p-sa-btn:hover { background: #f0fdfa; color: #0d9488; border-color: #0d9488; }

/* The "you edited this" mark next to a session label */
[data-ui="v2"] .v2p-edit-mark {
  font-size: 10px; color: #0d9488;
  margin-left: 4px; vertical-align: super;
  cursor: help;
}

/* Inline comment chips on each session card */
[data-ui="v2"] .v2p-cmts {
  margin-top: 6px;
  display: flex; flex-direction: column; gap: 4px;
}
[data-ui="v2"] .v2p-cmt {
  display: flex; align-items: flex-start; gap: 6px;
  background: rgba(13,148,136,0.06);
  border-left: 2px solid rgba(13,148,136,0.4);
  border-radius: 6px;
  padding: 6px 8px 6px 10px;
  font-size: 12px;
}
[data-ui="v2"] .v2p-cmt-body { flex: 1; min-width: 0; }
[data-ui="v2"] .v2p-cmt-text { color: #0f172a; line-height: 1.4; word-break: break-word; }
[data-ui="v2"] .v2p-cmt-when {
  font-size: 10.5px; color: #94a3b8; margin-top: 2px;
}
[data-ui="v2"] .v2p-cmt-del {
  background: none; border: none; cursor: pointer;
  font-size: 14px; color: #94a3b8; padding: 0 4px;
  align-self: flex-start;
}
[data-ui="v2"] .v2p-cmt-del:hover { color: #dc2626; }
/* Armed (first-click) state of the comment-delete button — second
 * click executes the delete; auto-reverts after 4s if no second click. */
[data-ui="v2"] .v2p-cmt-del-armed {
  background: #fef2f2; color: #b91c1c;
  font-size: 10.5px; padding: 2px 8px;
  border-radius: 6px; border: 1px solid #fecaca;
  font-weight: 700; line-height: 1.2;
}

/* Edit / comment overlay (bottom-sheet on mobile, centered modal desktop) */
[data-ui="v2"] .tp-sov,
.tp-sov {
  position: fixed; inset: 0; z-index: 1100;
  background: rgba(15,23,42,0.55);
  display: flex; align-items: flex-end; justify-content: center;
  opacity: 0; pointer-events: none;
  transition: opacity 0.18s;
}
.tp-sov.open { opacity: 1; pointer-events: auto; }
.tp-sov-sheet {
  background: #fff; width: 100%; max-width: 520px;
  max-height: 88vh; overflow-y: auto;
  border-radius: 20px 20px 0 0;
  padding: 14px 22px 24px;
  transform: translateY(100%); transition: transform 0.22s ease;
  position: relative;
}
.tp-sov.open .tp-sov-sheet { transform: translateY(0); }
.tp-sov-grip {
  width: 40px; height: 4px; background: #cbd5e1;
  border-radius: 2px; margin: 0 auto 12px;
}
.tp-sov-close {
  position: absolute; top: 12px; right: 14px;
  background: none; border: none; cursor: pointer;
  font-size: 18px; color: #94a3b8; padding: 4px 8px; border-radius: 6px;
}
.tp-sov-close:hover { background: #f1f5f9; color: #0f172a; }
.tp-sov-hd { margin-bottom: 14px; padding-right: 30px; }
.tp-sov-title { font-size: 16px; font-weight: 800; color: #0f172a; }
.tp-sov-sub   { font-size: 12px; color: #94a3b8; margin-top: 2px; line-height: 1.4; }
.tp-sov-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 12px;
  margin-bottom: 14px;
}
.tp-sov-lbl {
  display: flex; flex-direction: column; gap: 4px;
  font-size: 11px; font-weight: 700; color: #64748b;
  text-transform: uppercase; letter-spacing: 0.04em;
}
.tp-sov-lbl-wide { grid-column: 1 / -1; }
.tp-sov-lbl select,
.tp-sov-lbl input,
.tp-sov-lbl textarea {
  font-family: inherit; font-size: 14px; font-weight: 500;
  text-transform: none; letter-spacing: 0; color: #0f172a;
  background: #fff;
  border: 1px solid #e5e7eb; border-radius: 8px;
  padding: 9px 12px;
  width: 100%; box-sizing: border-box;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.tp-sov-lbl select:focus,
.tp-sov-lbl input:focus,
.tp-sov-lbl textarea:focus {
  outline: none; border-color: #0d9488;
  box-shadow: 0 0 0 3px rgba(13,148,136,0.12);
}
.tp-sov-lbl textarea { resize: vertical; min-height: 70px; }
.tp-sov-cta {
  display: flex; gap: 8px; justify-content: flex-end;
  padding-top: 4px;
}

@media (min-width: 720px) {
  .tp-sov { align-items: center; }
  .tp-sov-sheet { border-radius: 16px; max-height: 80vh; }
}
@media (max-width: 480px) {
  .tp-sov-grid { grid-template-columns: 1fr; }
  /* Always show edit/comment buttons on touch — no hover on mobile */
  [data-ui="v2"] .v2p-session-actions { opacity: 1; }
}

/* ─── Today's Session — recovery banner variant ──────────────────────
   Default .v2d-tsession-swap uses the amber readiness color (set
   inline / inherited). When yesterday was a heavy session, we surface
   a stronger banner with a red/orange treatment so the user clearly
   sees this is more important than a generic readiness nudge. */
[data-ui="v2"] .v2d-tsession-swap-recovery {
  background: linear-gradient(135deg, #fff7ed 0%, #ffedd5 100%);
  border: 1px solid #f97316;
}
[data-ui="v2"] .v2d-tsession-swap-recovery .v2d-tsession-swap-hd {
  color: #9a3412;
}
[data-ui="v2"] .v2d-tsession-swap-recovery .v2d-tsession-swap-body {
  color: #7c2d12;
}

/* Phase 1 of todays-session-design — state-aware variants */
[data-ui="v2"] .v2d-tsession-post .v2d-tsession-body {
  background: linear-gradient(135deg, #f0fdf4 0%, #ecfdf5 100%);
  border-radius: 12px;
  padding: 16px 18px;
}
[data-ui="v2"] .v2d-tsession-post-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(96px, 1fr));
  gap: 10px;
  margin-top: 12px;
}
[data-ui="v2"] .v2d-tsession-post-stat {
  background: #ffffff;
  border: 1px solid #d1fae5;
  border-radius: 8px;
  padding: 10px 12px;
  text-align: center;
}
[data-ui="v2"] .v2d-tsession-post-val {
  font-size: 22px;
  font-weight: 700;
  color: #065f46;
  line-height: 1.1;
}
[data-ui="v2"] .v2d-tsession-post-lbl {
  font-size: 10.5px;
  color: #047857;
  margin-top: 4px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* Loose end #4 — Plan tab today_overlay banner */
[data-ui="v2"] .v2p-today-overlay {
  background: linear-gradient(135deg, #fff7ed 0%, #ffedd5 100%);
  border: 1px solid #f97316;
  border-radius: 10px;
  padding: 12px 14px;
  margin: 14px 0;
}
[data-ui="v2"] .v2p-today-overlay-hd {
  font-size: 14px;
  color: #9a3412;
  margin-bottom: 4px;
}
[data-ui="v2"] .v2p-today-overlay-icon { font-size: 18px; margin-right: 6px; }
[data-ui="v2"] .v2p-today-overlay-body {
  font-size: 13px;
  color: #7c2d12;
  line-height: 1.5;
}

/* Loose end #5 — race-day card variant */
[data-ui="v2"] .v2d-tsession-race {
  background: linear-gradient(160deg, #fee2e2 0%, #fef2f2 100%);
  border: 2px solid #ef4444;
}
[data-ui="v2"] .v2d-tsession-race .v2d-tsession-title {
  color: #991b1b;
}
[data-ui="v2"] .v2d-tsession-race .v2d-tsession-icon {
  font-size: 24px;
}
[data-ui="v2"] .v2d-tsession-race .v2d-tsession-label {
  color: #7f1d1d;
}

/* Loose end #3 — v2 reflection block (active_completed coaching note) */
[data-ui="v2"] .v2d-tsession-reflection {
  margin-top: 10px;
  padding: 10px 12px;
  border-radius: 8px;
  border-left: 3px solid #94a3b8;
  background: #f8fafc;
}
[data-ui="v2"] .v2d-tsession-reflection-hd {
  font-size: 13px;
  color: #0f172a;
  line-height: 1.35;
}
[data-ui="v2"] .v2d-tsession-reflection-icon {
  margin-right: 6px;
}
[data-ui="v2"] .v2d-tsession-reflection-body {
  margin-top: 4px;
  font-size: 12.5px;
  line-height: 1.5;
  color: #475569;
}
[data-ui="v2"] .v2d-tsession-reflection-celebrate {
  background: #f0fdf4;
  border-left-color: #10b981;
}
[data-ui="v2"] .v2d-tsession-reflection-celebrate .v2d-tsession-reflection-hd { color: #065f46; }
[data-ui="v2"] .v2d-tsession-reflection-watch {
  background: #fffbeb;
  border-left-color: #f59e0b;
}
[data-ui="v2"] .v2d-tsession-reflection-watch .v2d-tsession-reflection-hd { color: #92400e; }