/* =============================================================================
   Closematic AI · Client Portal — Premium Calm Intelligence
   -----------------------------------------------------------------------------
   The presentation layer of the approved Product Design (Desktop 1440, Tablet
   1180, Mobile 390, Small phone 360). Class names follow the design's own
   component vocabulary so a side-by-side read of prototype and implementation
   maps one-to-one:

     cm-*  shared primitives (button, input, alert, pill, tile, requirement)
     cp-*  client shell (top nav, tab bar, count, waiting row, mission nodes)
     lx-*  leads list · lm-* thread messages · lc-* composer
     pf-*  performance · pr-* profile rows · cal-* and ev calendar · st and ps-* posts
     ob-*  setup journey · pl-* fs sum-* self-service · lang-* language menu

   Values come from tokens.css. The only literal colours are white/navy alpha
   overlays used on the Navy Deep brand surfaces, exactly as in the design.

   Breakpoints (composition, not shrink):
     < 768px    mobile  — bottom tab bar, stacked flows, full-screen thread
     768–1199   tablet  — top nav, fluid 32px gutters, 5/7 column splits
     ≥ 1200     desktop — top nav, 1136px content column
   ========================================================================== */

:root {
  --cp-col: 71rem;            /* 1136 — the design's content column */
  --cp-gutter: 2rem;
  --cp-topbar: 4rem;          /* 64 */
  --cp-tabbar: 5rem;          /* 52 target + 6/22 padding */
  /* Legacy aliases still read by screens that have not changed (diag, admin). */
  --soft: var(--cm-bg-canvas);
  --line: var(--cm-border-default);
  --ts: var(--cm-text-secondary);
  --thread-bg: var(--cm-bg-canvas);
  --mov: var(--cm-duration-fast);
  --ease: var(--cm-ease-standard);
}

/* --- document & app root ------------------------------------------------- */
html { background: var(--cm-bg-canvas); }
body {
  margin: 0;
  background: var(--cm-bg-canvas);
  color: var(--cm-text-primary);
  font-family: var(--cm-font-sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
#app, #app:not(.no-nav), #app.no-nav, #app.results-page {
  width: 100%;
  max-width: none;
  margin: 0;
  border: 0;
  box-shadow: none;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  background: var(--cm-bg-canvas);
  padding: 0;
}
#app :is(h1, h2, h3, h4) { font-family: var(--cm-font-sans); color: inherit; font-weight: 600; margin: 0; text-wrap: balance; }
#app :is(p) { margin: 0; text-wrap: pretty; }
#app :is(button, input, select, textarea) { font-family: inherit; }
#app a { color: var(--cm-action-interactive); }
#app a:hover { color: var(--cm-action-interactive-hover); }
#app .ti { background-color: currentColor; flex: none; }
#app .ti.sm { width: 16px; height: 16px; }
#app .ti.md { width: 18px; height: 18px; }
#app .ti.lg { width: 24px; height: 24px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.cp-num, .hw-num { font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.cp-trunc { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }

/* --- primitives: links --------------------------------------------------- */
.cm-link { display: inline-flex; align-items: center; gap: 6px; padding: 0; border: 0; background: none; cursor: pointer; color: var(--cm-action-interactive); font: inherit; font-weight: 600; text-decoration: none; border-radius: 6px; transition: color var(--cm-duration-micro) var(--cm-ease-standard); }
/* AA: --cm-action-interactive is ~4.4:1 on canvas/soft surfaces, under 4.5 for 13-14px link text,
   so link TEXT uses the next brand step; hover goes one step darker. */
#app .cm-link { color: var(--cm-brand-600); }
#app .cm-link:hover { color: var(--cm-brand-700); text-decoration: underline; text-underline-offset: 3px; }
.cm-link:focus-visible { outline: 2px solid var(--cm-action-interactive); outline-offset: 3px; }
.cm-link.sm { font-size: var(--cm-text-ui); }
.cm-link[aria-disabled="true"] { color: var(--cm-text-muted); cursor: not-allowed; text-decoration: none; }

/* --- primitives: buttons ------------------------------------------------- */
.cm-btn {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  width: 100%; height: 48px; min-height: 48px; padding: 0 20px; border: 0; border-radius: var(--cm-radius-sm);
  background: var(--cm-action-primary); color: var(--cm-text-on-brand);
  font-family: inherit; font-size: var(--cm-text-base); font-weight: 600; letter-spacing: -.005em; line-height: 1.2;
  text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: background var(--cm-duration-fast) var(--cm-ease-standard), color var(--cm-duration-fast) var(--cm-ease-standard), border-color var(--cm-duration-fast) var(--cm-ease-standard), transform var(--cm-duration-micro) var(--cm-ease-standard);
}
#app .cm-btn { color: var(--cm-text-on-brand); }
#app .cm-btn:hover { background: var(--cm-action-primary-hover); color: var(--cm-text-on-brand); text-decoration: none; }
.cm-btn:active:not([aria-disabled="true"]):not(:disabled) { transform: scale(.98); }
.cm-btn:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--cm-bg-surface), 0 0 0 5px var(--cm-action-interactive); }
.cm-btn[aria-busy="true"] { background: var(--cm-action-primary-hover); cursor: progress; }
#app .cm-btn:is(:disabled, [aria-disabled="true"]):not([aria-busy="true"]) { background: var(--cm-bg-surface-soft); color: var(--cm-text-secondary); cursor: not-allowed; box-shadow: none; transform: none; }
.cm-btn.auto { width: auto; }
.cm-btn.sm { height: 40px; min-height: 40px; font-size: var(--cm-text-ui); padding: 0 14px; gap: 8px; }
.cm-btn.md { height: 44px; min-height: 44px; font-size: var(--cm-text-ui); padding: 0 16px; gap: 8px; }
#app .cm-btn--secondary { background: var(--cm-bg-surface); color: var(--cm-text-primary); box-shadow: inset 0 0 0 1px var(--cm-border-default); }
#app .cm-btn--secondary:hover { background: var(--cm-bg-surface-soft); color: var(--cm-text-primary); box-shadow: inset 0 0 0 1px var(--cm-border-strong); }
#app .cm-btn--ghost { background: transparent; color: var(--cm-text-primary); }
#app .cm-btn--ghost:hover { background: var(--cm-bg-surface-soft); color: var(--cm-text-primary); }
#app .cm-btn--danger-ghost { background: transparent; color: var(--cm-danger); }
#app .cm-btn--danger-ghost:hover { background: var(--cm-danger-soft); color: var(--cm-danger); }
#app .cm-btn--danger { background: var(--cm-danger); color: var(--cm-text-on-brand); }
#app .cm-btn--danger:hover { background: var(--cm-danger); filter: brightness(.92); color: var(--cm-text-on-brand); }
#app .cp-btn-sky { background: var(--cm-brand-sky); color: var(--cm-brand-navy-deep); }
#app .cp-btn-sky:hover { background: var(--cm-brand-200); color: var(--cm-brand-navy-deep); }
.cp-btn-sky:focus-visible { box-shadow: 0 0 0 2px var(--cm-brand-navy-deep), 0 0 0 5px var(--cm-brand-sky); }
#app .cp-btn-ondark { background: transparent; color: var(--cm-text-on-brand); box-shadow: inset 0 0 0 1px var(--cm-dark-border); }
#app .cp-btn-ondark:hover { background: rgba(255, 255, 255, .06); color: var(--cm-text-on-brand); }
.cp-btn-ondark:focus-visible { box-shadow: 0 0 0 3px rgba(139, 190, 221, .5); }
.cm-btn .ti { width: 18px; height: 18px; }
.cm-iconbtn {
  width: 40px; height: 40px; flex: none; display: inline-flex; align-items: center; justify-content: center;
  border: 0; border-radius: var(--cm-radius-xs); background: transparent; color: var(--cm-text-secondary);
  cursor: pointer; position: relative; text-decoration: none;
  transition: background var(--cm-duration-micro) var(--cm-ease-standard), color var(--cm-duration-micro) var(--cm-ease-standard);
}
#app .cm-iconbtn:hover { background: var(--cm-bg-surface-soft); color: var(--cm-text-primary); }
.cm-iconbtn:active { background: var(--cm-bg-surface-hover); }
.cm-iconbtn:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--cm-focus-ring); }
.cm-iconbtn.touch { width: 44px; height: 44px; }
.cm-iconbtn .ti { width: 20px; height: 20px; }

/* --- primitives: fields -------------------------------------------------- */
.cm-field { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.cm-label { display: block; font-size: var(--cm-text-ui); line-height: 20px; font-weight: 600; color: var(--cm-text-primary); }
.cm-input, .cm-select, .cm-textarea {
  display: block; width: 100%; height: 48px; padding: 0 16px; margin: 0;
  border: 1px solid var(--cm-border-default); border-radius: var(--cm-radius-sm);
  background: var(--cm-bg-surface); color: var(--cm-text-primary);
  font-family: inherit; font-size: var(--cm-text-base); font-weight: 500;
  -webkit-appearance: none; appearance: none;
  transition: border-color var(--cm-duration-micro) var(--cm-ease-standard), box-shadow var(--cm-duration-micro) var(--cm-ease-standard);
}
.cm-textarea { height: auto; min-height: 120px; padding: 12px 16px; line-height: 1.5; resize: vertical; }
.cm-select { padding-right: 40px; background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%); background-position: calc(100% - 20px) 21px, calc(100% - 15px) 21px; background-size: 5px 5px; background-repeat: no-repeat; }
.cm-input::placeholder, .cm-textarea::placeholder { color: var(--cm-text-muted); font-weight: 400; }
.cm-input:hover, .cm-select:hover, .cm-textarea:hover { border-color: var(--cm-border-strong); }
.cm-input:focus, .cm-select:focus, .cm-textarea:focus { outline: none; border-color: var(--cm-action-interactive); box-shadow: 0 0 0 3px var(--cm-focus-ring); }
.cm-input[aria-invalid="true"], .cm-input.is-invalid, .cm-textarea[aria-invalid="true"] { border-color: var(--cm-danger); }
.cm-input[aria-invalid="true"]:focus, .cm-input.is-invalid:focus { box-shadow: 0 0 0 3px rgba(200, 62, 62, .20); }
.cm-input[readonly], .cm-input:disabled, .cm-select:disabled { background: var(--cm-bg-surface-soft); color: var(--cm-text-secondary); border-color: var(--cm-border-soft); }
.cm-input.mono { font-family: var(--cm-font-mono); letter-spacing: .08em; }
.cm-pw { position: relative; }
.cm-pw .cm-input { padding-right: 56px; }
.cm-toggle {
  position: absolute; top: 4px; right: 4px; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center;
  border: 0; border-radius: var(--cm-radius-xs); background: transparent; color: var(--cm-text-secondary); cursor: pointer;
  transition: background var(--cm-duration-micro) var(--cm-ease-standard), color var(--cm-duration-micro) var(--cm-ease-standard);
}
.cm-toggle:hover { background: var(--cm-bg-surface-soft); color: var(--cm-text-primary); }
.cm-toggle:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--cm-focus-ring); }
.cm-toggle .ti { width: 20px; height: 20px; }
.cm-check { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; font-size: var(--cm-text-ui); font-weight: 500; color: var(--cm-text-secondary); cursor: pointer; }
.cm-check input { width: 18px; height: 18px; margin: 0; accent-color: var(--cm-brand-800); cursor: pointer; flex: none; }
.cm-err { display: flex; align-items: flex-start; gap: 6px; margin: 0; font-size: var(--cm-text-sm); line-height: 18px; font-weight: 500; color: var(--cm-danger); }
.cm-err:empty { display: none; }
.cm-hint { display: flex; align-items: flex-start; gap: 6px; margin: 0; font-size: var(--cm-text-sm); line-height: 18px; font-weight: 500; color: var(--cm-text-secondary); }
.cm-req-list { display: flex; flex-direction: column; gap: 6px; margin: 2px 0 0; padding: 0; list-style: none; }
.cm-req { display: flex; align-items: center; gap: 8px; font-size: var(--cm-text-sm); line-height: 18px; font-weight: 500; color: var(--cm-text-secondary); }
.cm-req .dot { width: 18px; height: 18px; border-radius: 50%; display: flex; align-items: center; justify-content: center; border: 1.5px solid var(--cm-border-strong); flex: none; transition: all var(--cm-duration-fast) var(--cm-ease-standard); }
.cm-req .dot .ti { width: 12px; height: 12px; opacity: 0; }
.cm-req.is-met { color: var(--cm-text-primary); }
.cm-req.is-met .dot { background: var(--cm-success); border-color: var(--cm-success); color: var(--cm-text-on-brand); }
.cm-req.is-met .dot .ti { opacity: 1; }
.cm-req.is-miss { color: var(--cm-danger); }
.cm-req.is-miss .dot { border-color: var(--cm-danger); }

/* --- primitives: feedback ------------------------------------------------ */
.cm-alert { display: flex; align-items: flex-start; gap: 12px; padding: 14px 16px; border-radius: var(--cm-radius-sm); font-size: var(--cm-text-ui); line-height: 20px; color: var(--cm-text-primary); }
.cm-alert > .ti { width: 20px; height: 20px; margin-top: 0; }
.cm-alert .cm-alert-body { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.cm-alert b, .cm-alert strong { font-weight: 600; }
.cm-alert-sub { color: var(--cm-text-secondary); }
.cm-alert--danger { background: var(--cm-danger-soft); }
.cm-alert--danger > .ti { color: var(--cm-danger); }
.cm-alert--warning { background: var(--cm-warning-soft); }
.cm-alert--warning > .ti { color: var(--cm-warning); }
.cm-alert--info { background: var(--cm-info-soft); }
.cm-alert--info > .ti { color: var(--cm-info); }
.cm-alert--success { background: var(--cm-success-soft); }
.cm-alert--success > .ti { color: var(--cm-success); }
.cm-alert--neutral { background: var(--cm-bg-surface-soft); }
.cm-alert--neutral > .ti { color: var(--cm-text-secondary); }
.cm-alert.is-row { align-items: center; }
.cm-alert .cm-btn { flex: none; }
.cm-pill { display: inline-flex; align-items: center; gap: 8px; height: 28px; padding: 0 12px; border-radius: var(--cm-radius-full); font-size: var(--cm-text-sm); font-weight: 600; white-space: nowrap; }
.cm-pill--client { background: var(--cm-brand-50); color: var(--cm-brand-700); box-shadow: inset 0 0 0 1px var(--cm-brand-100); }
.cm-pill--client::before, .cm-pill--dark::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.cm-pill--dark { background: rgba(139, 190, 221, .14); color: var(--cm-brand-sky); }
.cm-tile { width: 48px; height: 48px; border-radius: var(--cm-radius-sm); display: flex; align-items: center; justify-content: center; flex: none; }
.cm-tile .ti { width: 22px; height: 22px; }
.cm-tile.sm { width: 40px; height: 40px; }
.cm-tile.sm .ti { width: 20px; height: 20px; }
.cm-tile--info { background: var(--cm-info-soft); color: var(--cm-brand-600); }
.cm-tile--warning { background: var(--cm-warning-soft); color: var(--cm-warning-strong); }
.cm-tile--danger { background: var(--cm-danger-soft); color: var(--cm-danger); }
.cm-tile--neutral { background: var(--cm-bg-surface-soft); color: var(--cm-text-secondary); }
.cm-tile--success { background: var(--cm-success-soft); color: var(--cm-success); }
.cm-tile--brand { background: var(--cm-brand-800); color: var(--cm-text-on-brand); }
.cp-live { display: inline-flex; align-items: center; gap: 6px; font-size: var(--cm-text-sm); font-weight: 600; color: var(--cm-success); }
.cp-live i { width: 8px; height: 8px; border-radius: 50%; background: var(--cm-success); box-shadow: 0 0 0 3px var(--cm-success-soft); }
.cp-status { display: inline-flex; align-items: center; gap: 8px; font-size: var(--cm-text-sm); font-weight: 500; color: var(--cm-text-secondary); white-space: nowrap; }
.cp-dot { width: 8px; height: 8px; border-radius: 50%; flex: none; display: inline-block; }
.cp-dot.ok { background: var(--cm-success); }
.cp-dot.info { background: var(--cm-brand-500); }
.cp-dot.warn { background: var(--cm-warning); }
.cp-dot.off { background: transparent; box-shadow: inset 0 0 0 1.5px var(--cm-border-strong); }
.cp-dot.idle { background: var(--cm-border-strong); }
.cp-skel { background: linear-gradient(90deg, var(--cm-bg-surface-soft) 0%, var(--cm-bg-surface-hover) 50%, var(--cm-bg-surface-soft) 100%); background-size: 200% 100%; border-radius: 8px; animation: cp-shimmer 1.4s linear infinite; }
@keyframes cp-shimmer { from { background-position: 100% 0; } to { background-position: -100% 0; } }
.cp-toast {
  position: fixed; left: 50%; bottom: 32px; z-index: 60; transform: translateX(-50%);
  display: flex; align-items: center; gap: 10px; width: max-content; max-width: calc(100% - 32px); min-height: 48px;
  padding: 12px 20px; border-radius: var(--cm-radius-full); background: var(--cm-brand-navy-deep); color: var(--cm-text-on-brand);
  font-size: var(--cm-text-ui); font-weight: 600; box-shadow: var(--cm-shadow-lg); animation: cp-toast 260ms var(--cm-ease-standard) both;
}
@keyframes cp-toast { from { opacity: 0; transform: translate(-50%, 8px); } to { opacity: 1; transform: translate(-50%, 0); } }

/* Surfaces. A box only where the content needs one (CLAUDE.md §11). */
.cp-surface { background: var(--cm-bg-surface); border: 1px solid var(--cm-border-soft); border-radius: var(--cm-radius-md); }
.cp-card { background: var(--cm-bg-surface); border: 1px solid var(--cm-border-soft); border-radius: var(--cm-radius-md); padding: 28px; display: flex; flex-direction: column; gap: 20px; min-width: 0; }
.cp-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.cp-card-head > div { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.cp-h2 { font-size: var(--cm-text-xl); line-height: 1.3; font-weight: 600; letter-spacing: -.01em; }
.cp-sub { font-size: var(--cm-text-ui); line-height: 1.45; color: var(--cm-text-secondary); }
.cp-label { font-size: var(--cm-text-sm); font-weight: 500; color: var(--cm-text-secondary); }
.cp-empty-note { font-size: var(--cm-text-ui); line-height: 1.5; color: var(--cm-text-secondary); }

/* --- shell: page column -------------------------------------------------- */
.cp-main { flex: 1; min-width: 0; outline: none; }
.cp-page { width: 100%; max-width: calc(var(--cp-col) + 2 * var(--cp-gutter)); margin: 0 auto; padding: 40px var(--cp-gutter) 56px; display: flex; flex-direction: column; gap: 24px; }
.cp-page.narrow { max-width: calc(52rem + 2 * var(--cp-gutter)); }
.cp-page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; padding-bottom: 8px; }
.cp-page-head > div:first-child { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.cp-kicker { font-size: 15px; font-weight: 600; color: var(--cm-text-secondary); }
.cp-h1 { font-size: 36px; line-height: 1.1; font-weight: 600; letter-spacing: -.025em; }
.cp-lede { font-size: var(--cm-text-base); line-height: 1.5; color: var(--cm-text-secondary); }
.cp-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: var(--cm-text-sm); color: var(--cm-text-secondary); }
/* Decorative divider drawn by CSS (not a text node): it carries no information, so it stays faint. */
.cp-meta .sep::before { content: "\00B7"; color: var(--cm-border-strong); }
.cp-meta .ti { width: 14px; height: 14px; }
.cp-meta-i { display: inline-flex; align-items: center; gap: 6px; }
.cp-back { display: inline-flex; align-items: center; gap: 4px; align-self: flex-start; min-height: 32px; margin-bottom: -4px; font-size: var(--cm-text-ui); font-weight: 600; color: var(--cm-action-interactive); text-decoration: none; border-radius: 6px; }
#app .cp-back { color: var(--cm-brand-600); } /* AA on canvas, see .cm-link */
.cp-back .ti { width: 16px; height: 16px; }
.cp-back:focus-visible { outline: 2px solid var(--cm-action-interactive); outline-offset: 3px; }
.cp-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 24px; align-items: stretch; }
.cp-span-4 { grid-column: span 4; } .cp-span-5 { grid-column: span 5; } .cp-span-6 { grid-column: span 6; }
.cp-span-7 { grid-column: span 7; } .cp-span-8 { grid-column: span 8; } .cp-span-12 { grid-column: 1 / -1; }

/* --- shell: desktop/tablet top navigation -------------------------------- */
.cp-topbar { position: sticky; top: 0; z-index: 20; height: var(--cp-topbar); flex: none; background: var(--cm-bg-surface); border-bottom: 1px solid var(--cm-border-soft); }
.cp-topbar-in { max-width: calc(var(--cp-col) + 2 * var(--cp-gutter)); height: 100%; margin: 0 auto; padding: 0 var(--cp-gutter); display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.cp-topbar-l { display: flex; align-items: center; gap: 32px; min-width: 0; }
.cp-topbar-r { display: flex; align-items: center; gap: 8px; flex: none; }
.cp-brand { display: inline-flex; align-items: center; gap: 10px; border-radius: 8px; text-decoration: none; color: var(--cm-text-primary); flex: none; }
#app .cp-brand, #app .cp-brand:hover { color: var(--cm-text-primary); text-decoration: none; }
.cp-brand:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--cm-focus-ring); }
.cp-mark { width: 30px; height: 30px; border-radius: var(--cm-radius-xs); background: var(--cm-brand-800); display: flex; align-items: center; justify-content: center; flex: none; }
.cp-mark img, .cp-mark svg { width: 21px; height: 21px; display: block; }
.cp-word { font-size: 17px; font-weight: 700; letter-spacing: -.01em; white-space: nowrap; }
.cp-word span { font-weight: 500; color: var(--cm-text-secondary); }
.cp-brand.on-dark .cp-word { color: var(--cm-text-on-brand); }
.cp-brand.on-dark .cp-word span { color: var(--cm-brand-sky); }
.cp-brand.on-dark .cp-mark { background: transparent; width: 26px; height: 26px; }
.cp-brand.on-dark .cp-mark img { width: 26px; height: 26px; }
.cp-nav-list { display: flex; gap: 4px; }
.cp-nav {
  display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 14px; border-radius: var(--cm-radius-full);
  font-size: var(--cm-text-ui); font-weight: 600; color: var(--cm-text-secondary); text-decoration: none; white-space: nowrap;
  transition: background var(--cm-duration-micro) var(--cm-ease-standard), color var(--cm-duration-micro) var(--cm-ease-standard);
}
#app .cp-nav { color: var(--cm-text-secondary); }
#app .cp-nav:hover { background: var(--cm-bg-surface-soft); color: var(--cm-text-primary); text-decoration: none; }
.cp-nav:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--cm-focus-ring); }
#app .cp-nav[aria-current="page"] { background: var(--cm-brand-800); color: var(--cm-text-on-brand); }
.cp-count {
  min-width: 20px; height: 20px; padding: 0 6px; border-radius: var(--cm-radius-full);
  background: var(--cm-warning-soft); color: var(--cm-text-primary); box-shadow: inset 0 0 0 1px rgba(183, 121, 31, .35);
  font-size: var(--cm-text-xs); font-weight: 700; display: inline-flex; align-items: center; justify-content: center; font-variant-numeric: tabular-nums;
}
.cp-support { width: auto; }
.cp-avatar { width: 36px; height: 36px; border-radius: 50%; background: var(--cm-brand-100); color: var(--cm-brand-800); font-size: var(--cm-text-sm); font-weight: 700; display: flex; align-items: center; justify-content: center; letter-spacing: .01em; }
.cp-avatar-btn { width: 44px; height: 44px; }

/* --- shell: mobile tab bar ----------------------------------------------- */
.cp-tabbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 20;
  display: none; grid-template-columns: repeat(4, minmax(0, 1fr));
  background: rgba(255, 255, 255, .94); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
  border-top: 1px solid var(--cm-border-soft);
  padding: 6px max(8px, env(safe-area-inset-right)) max(22px, env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-left));
}
.cp-tab {
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  min-height: 52px; border-radius: var(--cm-radius-sm); color: var(--cm-text-secondary);
  font-size: var(--cm-text-xs); font-weight: 600; text-decoration: none;
}
#app .cp-tab { color: var(--cm-text-secondary); }
#app .cp-tab[aria-current="page"] { color: var(--cm-brand-800); }
.cp-tab .pillbg { width: 56px; height: 30px; border-radius: var(--cm-radius-full); display: flex; align-items: center; justify-content: center; transition: background var(--cm-duration-fast) var(--cm-ease-standard); }
.cp-tab .pillbg .ti { width: 22px; height: 22px; }
.cp-tab[aria-current="page"] .pillbg { background: var(--cm-brand-100); }
.cp-tab:active .pillbg { background: var(--cm-bg-surface-hover); }
.cp-tab:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--cm-focus-ring); }
.cp-tab .cp-count { position: absolute; top: 2px; left: 50%; margin-left: 6px; min-width: 18px; height: 18px; font-size: 11px; box-shadow: 0 0 0 2px var(--cm-bg-surface); }
.cp-tab .lbl { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 0 2px; }

/* Mobile page header (screens own their h1; the bar only carries actions). */
.cp-mhead { display: none; }

/* --- motion -------------------------------------------------------------- */
.entrando .cp-main { animation: cp-in 240ms var(--cm-ease-standard) both; }
@keyframes cp-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.cp-slide { animation: cp-slide 260ms var(--cm-ease-standard) both; }
@keyframes cp-slide { from { opacity: .4; transform: translateX(24px); } to { opacity: 1; transform: none; } }
.cp-rise { animation: cp-rise 300ms var(--cm-ease-standard) both; }
@keyframes cp-rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes cp-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes cp-pop { from { transform: translateY(-8px) scale(.98); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes cp-up { from { transform: translateY(24px); opacity: .3; } to { transform: none; opacity: 1; } }

/* --- brand loop (inline SVG, colours from tokens) ------------------------ */
.cp-loop path { stroke: var(--cm-brand-sky); }
.cp-loop circle { fill: var(--cm-brand-white); }
.cp-mark.dark { background: transparent; }

/* --- shell responsiveness ------------------------------------------------ */
.cp-topbar { order: -1; }
#app > .cp-tabbar { order: 99; }
@media (min-width: 768px) and (max-width: 1199px) {
  :root { --cp-gutter: 2rem; }
  .cp-nav { padding: 0 10px; }
  .cp-topbar-l { gap: 20px; }
}
@media (max-width: 899px) and (min-width: 768px) {
  .cp-support .lbl-sup { display: none; }
}
@media (max-width: 767px) {
  :root { --cp-gutter: 1rem; }
  .cp-topbar { display: none; }
  .cp-tabbar { display: grid; }
  #app:has(> .cp-tabbar) { padding-bottom: calc(80px + env(safe-area-inset-bottom)); }
  /* No top bar on phones: the page itself clears the notch / status bar (PWA standalone, Capacitor). */
  .cp-page { padding: calc(12px + env(safe-area-inset-top)) var(--cp-gutter) 24px; gap: 16px; }
  .cp-h1 { font-size: 28px; line-height: 1.15; letter-spacing: -.02em; }
  .cp-page-head { flex-direction: column; align-items: stretch; gap: 10px; padding-bottom: 0; }
  .cp-grid { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .cp-grid > [class*="cp-span-"] { grid-column: 1 / -1; }
  .cp-card { padding: 20px; gap: 16px; }
  .cp-mhead { display: flex; align-items: center; justify-content: space-between; min-height: 44px; }
  .cp-toast { bottom: calc(92px + env(safe-area-inset-bottom)); font-size: var(--cm-text-sm); padding: 10px 16px; border-radius: 16px; }
}
@media (max-width: 374px) {
  .cp-tab { font-size: 11px; }
  .cp-tab .pillbg { width: 48px; }
  .cp-h1 { font-size: 24px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; scroll-behavior: auto !important; }
  .cp-skel { animation: none; }
}

/* =============================================================================
   HOME · Growth Mission Control
   ========================================================================== */
.home-head .home-who { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.home-avatar { display: none; }
.mission-grid > div { display: flex; min-width: 0; }
.mission-grid > div > .cp-card { flex: 1; }

/* Lead Pulse — the one brand surface on an operational page. */
.hm-pulse-wrap { display: block; }
.pulse-hero { position: relative; overflow: hidden; background: var(--cm-brand-navy-deep); color: var(--cm-text-on-brand); border-radius: var(--cm-radius-xl); padding: 32px 32px 32px 36px; }
.pulse-loop { position: absolute; right: -120px; bottom: -260px; width: 640px; height: 640px; pointer-events: none; }
.pulse-loop path { stroke: rgba(139, 190, 221, .07); }
.pulse-hero-in { position: relative; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 32px; align-items: center; }
.pulse-hero-main { grid-column: span 7; display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.pulse-hero-main:only-child { grid-column: 1 / -1; }
.pulse-eyebrow { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.pulse-eyebrow > span:first-child { font-size: var(--cm-text-sm); font-weight: 600; color: var(--cm-brand-sky); letter-spacing: .02em; }
.pulse-chip { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px; border-radius: var(--cm-radius-full); background: var(--cm-warning-soft); color: var(--cm-text-primary); font-size: var(--cm-text-sm); font-weight: 700; }
.pulse-chip .ti { width: 14px; height: 14px; color: var(--cm-warning); }
.pulse-copy { display: flex; flex-direction: column; gap: 8px; }
#app .pulse-copy h2 { font-size: 32px; line-height: 1.15; font-weight: 600; letter-spacing: -.02em; color: var(--cm-text-on-brand); }
.pulse-copy p { font-size: var(--cm-text-base); line-height: 24px; color: var(--cm-dark-text-secondary); }
.pulse-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 6px; }
.pulse-actions .cta { padding: 0 24px; }
.pulse-actions .pulse-open { padding: 0 20px; }
.pulse-more { display: none; align-items: center; justify-content: space-between; min-height: 44px; padding: 0 4px; border-radius: var(--cm-radius-sm); font-size: var(--cm-text-ui); font-weight: 600; text-decoration: none; }
#app .pulse-more { color: var(--cm-text-on-brand); }
.pulse-more:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(139, 190, 221, .5); }
.pulse-hero.is-lead .pulse-more { display: flex; }
.pulse-also { grid-column: span 5; display: flex; flex-direction: column; gap: 8px; padding-left: 24px; border-left: 1px solid var(--cm-dark-border); min-width: 0; }
.pulse-also-h { font-size: var(--cm-text-sm); font-weight: 600; color: var(--cm-dark-text-secondary); padding: 0 12px; }
.pulse-also ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.cp-waiting { display: flex; align-items: center; gap: 12px; min-height: 60px; padding: 10px 12px; border-radius: var(--cm-radius-sm); text-decoration: none; transition: background var(--cm-duration-micro) var(--cm-ease-standard); }
#app .cp-waiting, #app .cp-waiting:hover { color: var(--cm-text-on-brand); text-decoration: none; }
.cp-waiting:hover { background: rgba(255, 255, 255, .06); }
.cp-waiting:active { background: rgba(255, 255, 255, .08); }
.cp-waiting:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(139, 190, 221, .5); }
.cp-av { width: 40px; height: 40px; border-radius: 50%; flex: none; display: flex; align-items: center; justify-content: center; font-size: var(--cm-text-ui); font-weight: 700; background: rgba(139, 190, 221, .16); color: var(--cm-brand-sky); }
.cp-av .ti { width: 18px; height: 18px; }
.cp-waiting-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.cp-waiting-txt .nm { font-size: 15px; font-weight: 600; }
.cp-waiting-txt .rw { font-size: var(--cm-text-sm); color: var(--cm-dark-text-secondary); }
.cp-waiting-time { font-size: var(--cm-text-sm); font-weight: 600; color: var(--cm-brand-sky); }

/* Calm pulse states (caught up · no leads yet · no signal). */
.pulse-calm { display: flex; align-items: center; gap: 20px; padding: 20px 24px; background: var(--cm-bg-surface); border: 1px solid var(--cm-border-soft); border-radius: var(--cm-radius-lg); }
.pulse-calm.is-signal { background: var(--cm-bg-surface-soft); border-color: transparent; }
.pulse-calm-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
#app .pulse-calm-txt h2 { font-size: var(--cm-text-xl); font-weight: 600; letter-spacing: -.01em; }
.pulse-calm-txt p { font-size: 15px; line-height: 22px; color: var(--cm-text-secondary); max-width: 40rem; }
.pulse-calm-act { display: flex; gap: 8px; flex: none; }

/* Growth Mission card. */
.mission-card { gap: 24px; }
.mission-roadmap { padding: 10px 0; }
.mission-roadmap .ti { width: 16px; height: 16px; }
.mission-trail { position: relative; }
.mission-rail { position: absolute; top: 15px; height: 2px; background: var(--cm-border-default); }
.mission-rail.is-done { background: var(--cm-brand-800); right: auto; }
.mission-steps { list-style: none; margin: 0; padding: 0; display: flex; position: relative; }
.cp-step { display: flex; flex-direction: column; align-items: center; gap: 8px; flex: 1; min-width: 0; position: relative; text-align: center; }
.cp-step-l { font-size: var(--cm-text-xs); line-height: 16px; font-weight: 500; color: var(--cm-text-primary); padding: 0 4px; overflow-wrap: anywhere; }
.cp-step.is-now .cp-step-l { font-weight: 600; }
.cp-step.is-locked .cp-step-l { color: var(--cm-text-secondary); }
.cp-node { width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; position: relative; z-index: 1; flex: none; }
.cp-node .ti { width: 16px; height: 16px; }
.cp-node.is-done { background: var(--cm-brand-800); color: var(--cm-text-on-brand); }
.cp-node.is-now { background: var(--cm-bg-surface); box-shadow: inset 0 0 0 2px var(--cm-brand-500), 0 0 0 4px var(--cm-brand-100); }
.cp-node.is-now::after { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--cm-brand-500); }
.cp-node.is-locked { background: var(--cm-bg-surface-soft); color: var(--cm-text-secondary); }
.cp-node.is-locked .ti { width: 14px; height: 14px; }
.mission-now { display: none; font-size: var(--cm-text-sm); color: var(--cm-text-secondary); margin-top: -8px; }
.mission-now b { color: var(--cm-text-primary); font-weight: 600; }
.mx-next { display: flex; align-items: center; gap: 16px; padding: 20px; border-radius: var(--cm-radius-md); background: var(--cm-bg-surface-soft); }
.mx-next-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.mx-next-t { font-size: 17px; line-height: 24px; font-weight: 600; }
.mission-cta { padding: 0 20px; }
.mission-sprint { display: flex; flex-direction: column; gap: 10px; }
.mission-sprint-l { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; font-size: var(--cm-text-ui); }
.mission-sprint-l b { font-weight: 600; }
.mission-sprint .dim, .mission-sprint-l .dim { color: var(--cm-text-secondary); }
.cp-progress { height: 8px; border-radius: var(--cm-radius-full); background: var(--cm-bg-surface-soft); overflow: hidden; }
.cp-progress span { display: block; height: 100%; border-radius: var(--cm-radius-full); background: var(--cm-brand-500); transition: width var(--cm-duration-slow) var(--cm-ease-standard); }

/* Quick wins. */
.wins-card { gap: 8px; }
.wins { list-style: none; margin: 0; padding: 0; }
.wins li + li { border-top: 1px solid var(--cm-border-soft); }
.win { display: flex; align-items: center; gap: 14px; padding: 14px 0; text-decoration: none; border-radius: var(--cm-radius-xs); }
#app .win, #app .win:hover { color: var(--cm-text-primary); text-decoration: none; }
.win:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--cm-focus-ring); }
.win-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.win-t { font-size: 15px; font-weight: 600; }
.win-s { font-size: var(--cm-text-sm); color: var(--cm-text-secondary); letter-spacing: 0; }
.wins-card .cp-empty-note { padding-top: 12px; }

/* Also on your plate (grouped rows). */
.pr-group { background: var(--cm-bg-surface); border: 1px solid var(--cm-border-soft); border-radius: var(--cm-radius-md); overflow: hidden; }
.pr-row { display: flex; align-items: center; gap: 16px; min-height: 60px; padding: 14px 20px; width: 100%; border: 0; border-top: 1px solid var(--cm-border-soft); background: transparent; font-family: inherit; font-size: var(--cm-text-ui); text-align: left; color: var(--cm-text-primary); text-decoration: none; }
#app .pr-row, #app .pr-row:hover { color: var(--cm-text-primary); text-decoration: none; }
.pr-group > .pr-row:first-child, .pr-group > :first-child > .pr-row { border-top: 0; }
a.pr-row, button.pr-row { cursor: pointer; transition: background var(--cm-duration-micro) var(--cm-ease-standard); }
a.pr-row:hover, button.pr-row:hover { background: var(--cm-bg-canvas); }
.pr-row:active { background: var(--cm-bg-surface-hover); }
a.pr-row:focus-visible, button.pr-row:focus-visible { outline: none; box-shadow: inset 0 0 0 3px var(--cm-focus-ring); }
.pr-row > .ti { width: 20px; height: 20px; color: var(--cm-text-secondary); }
.pr-row > .ti.chev { width: 18px; height: 18px; }
.plate { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.plate > .pr-row { border-top: 0; }
.plate > .pr-row + .pr-row { border-left: 1px solid var(--cm-border-soft); }
.plate-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.plate-t { font-size: 15px; font-weight: 600; }
.plate-s { font-size: var(--cm-text-sm); color: var(--cm-text-secondary); }

/* Results at a glance. */
.glance-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 40px; }
.glance-l { grid-column: span 5; display: flex; flex-direction: column; gap: 20px; min-width: 0; }
.glance-r { grid-column: span 7; min-width: 0; }
.glance-metrics { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: -16px; }
.glance-cell { display: flex; flex-direction: column; gap: 4px; min-width: 0; padding: 16px 16px 16px 0; text-decoration: none; border-radius: var(--cm-radius-xs); }
#app .glance-cell, #app .glance-cell:hover { color: var(--cm-text-primary); text-decoration: none; }
.glance-cell:focus-visible { outline: none; box-shadow: inset 0 0 0 3px var(--cm-focus-ring); }
.glance-cell:nth-child(2n) { border-left: 1px solid var(--cm-border-soft); padding-left: 16px; }
.glance-cell:nth-child(n+3) { border-top: 1px solid var(--cm-border-soft); }
.glance-v { display: flex; align-items: center; gap: 6px; font-size: 28px; line-height: 1.2; font-weight: 600; }
.glance-v.is-empty { color: var(--cm-text-muted); font-weight: 500; }
.glance-star { width: 22px !important; height: 22px !important; color: var(--cm-warning); }
.glance-d { font-size: var(--cm-text-sm); color: var(--cm-text-secondary); }
.pf-delta { display: inline-flex; align-items: center; gap: 4px; font-size: var(--cm-text-sm); font-weight: 500; color: var(--cm-text-secondary); font-variant-numeric: tabular-nums; }
.pf-delta .ti { width: 14px; height: 14px; }
.pf-delta.up .ti { color: var(--cm-success); }
.pf-delta.down .ti { color: var(--cm-text-secondary); }
.hm-note { font-size: var(--cm-text-xs); color: var(--cm-text-secondary); margin-top: -8px; }
.glance-sep { height: 1px; background: var(--cm-border-soft); }
.glance-google { display: flex; flex-direction: column; gap: 12px; text-decoration: none; border-radius: var(--cm-radius-xs); }
#app .glance-google, #app .glance-google:hover { color: var(--cm-text-primary); text-decoration: none; }
.glance-google:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--cm-focus-ring); }
#app .glance-google h3 { font-size: var(--cm-text-ui); font-weight: 600; }
.glance-google h3 span { font-weight: 500; color: var(--cm-text-secondary); }
.glance-actions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.glance-actions > div { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.glance-actions > div + div { border-left: 1px solid var(--cm-border-soft); padding-left: 16px; }
.glance-actions .cp-label { display: flex; align-items: center; gap: 6px; }
.glance-actions .cp-label .ti { width: 14px; height: 14px; }
.glance-actions b { font-size: var(--cm-text-xl); font-weight: 600; }
.glance-actions b.is-empty { color: var(--cm-text-muted); font-weight: 500; }
.glance-chart { display: flex; flex-direction: column; gap: 12px; }
.glance-chart-h { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px; }
#app .glance-chart-h h3 { font-size: var(--cm-text-ui); font-weight: 600; }
.glance-leg { display: flex; gap: 16px; }
.glance-leg span { display: inline-flex; align-items: center; gap: 8px; font-size: var(--cm-text-sm); color: var(--cm-text-secondary); }
.glance-leg i { width: 16px; height: 0; border-top: 2px solid var(--cm-brand-500); }
.glance-leg i.lg-dash { border-top: 2px dashed var(--cm-brand-300); }
.cp-chart { position: relative; }
.cp-chart svg { display: block; width: 100%; height: 200px; overflow: visible; }
.cp-chart .c-grid { stroke: var(--cm-border-soft); stroke-width: 1; vector-effect: non-scaling-stroke; }
.cp-chart .c-area { fill: var(--cm-brand-50); }
.cp-chart .c-line { fill: none; stroke: var(--cm-brand-500); stroke-width: 2; vector-effect: non-scaling-stroke; stroke-linejoin: round; }
.cp-chart .c-line.c-dash { stroke: var(--cm-brand-300); stroke-dasharray: 4 4; }
.cp-chart .cp-axis { list-style: none; margin: 8px 0 0; padding: 0; display: flex; justify-content: space-around; }
.cp-chart .cp-axis li { display: flex; flex-direction: column; align-items: center; gap: 2px; font-size: var(--cm-text-xs); color: var(--cm-text-secondary); }
.cp-chart .cp-axis li b { font-size: var(--cm-text-sm); font-weight: 600; color: var(--cm-text-primary); font-variant-numeric: tabular-nums; }
.cp-chart .cp-axis li b.is-empty, .cp-chart .cp-axis li b.empty { color: var(--cm-text-muted); }
.cp-chart .cp-axis li i { font-style: normal; font-size: 11px; }

.home-support { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 16px; padding: 8px 0; }
.home-support p { font-size: 15px; color: var(--cm-text-secondary); text-align: center; }

@media (min-width: 768px) and (max-width: 1199px) {
  .mission-grid .cp-span-7 { grid-column: span 7; }
  .mission-grid .cp-span-5 { grid-column: span 5; }
  .pulse-hero-main { grid-column: span 7; }
  .pulse-also { grid-column: span 5; }
  .mx-next { flex-direction: column; align-items: stretch; }
  .glance-l { grid-column: 1 / -1; }
  .glance-r { grid-column: 1 / -1; margin-top: 24px; }
}
@media (max-width: 1023px) and (min-width: 768px) {
  .mission-grid .cp-span-7, .mission-grid .cp-span-5 { grid-column: 1 / -1; }
  .pulse-hero-main, .pulse-also { grid-column: 1 / -1; }
  .pulse-also { border-left: 0; padding-left: 0; border-top: 1px solid var(--cm-dark-border); padding-top: 16px; margin-top: 20px; }
}
@media (max-width: 767px) {
  .home-head { gap: 10px; }
  .home-avatar { display: inline-flex; }
  .home-head .cp-meta { justify-content: flex-start; }
  .home-head .cp-meta .sep { display: none; }
  .pulse-hero { padding: 20px; border-radius: var(--cm-radius-lg); }
  .pulse-loop { right: -160px; bottom: -200px; width: 420px; height: 420px; }
  .pulse-hero-main { grid-column: 1 / -1; gap: 14px; }
  #app .pulse-copy h2 { font-size: 24px; }
  .pulse-copy { gap: 6px; }
  .pulse-copy p { font-size: 15px; }
  .pulse-actions { margin-top: 4px; }
  .pulse-actions .cta { width: 100%; }
  .pulse-actions .pulse-open { display: none; }
  .pulse-more { display: flex; }
  .pulse-also { display: none; }
  .pulse-calm { flex-wrap: wrap; padding: 16px; gap: 14px; }
  .pulse-calm-act { width: 100%; }
  .mission-card { gap: 20px; }
  #app .mission-card .cp-h2 { font-size: var(--cm-text-lg); }
  .mission-rail { top: 12px; }
  .cp-node { width: 26px; height: 26px; }
  .cp-node.is-now::after { width: 8px; height: 8px; }
  .cp-step-l { display: none; }
  .mission-now { display: block; }
  .mx-next { flex-direction: column; align-items: stretch; }
  .mission-cta { width: 100%; }
  .plate { grid-template-columns: minmax(0, 1fr); }
  .plate > .pr-row + .pr-row { border-left: 0; border-top: 1px solid var(--cm-border-soft); }
  .glance-l, .glance-r { grid-column: 1 / -1; }
  .glance-r { margin-top: 20px; }
  .glance-v { font-size: 24px; }
  .glance-actions b { font-size: var(--cm-text-lg); }
  .cp-chart svg { height: 160px; }
  .home-support { flex-direction: column; gap: 12px; }
  .home-support .cm-btn { width: 100%; }
}
@media (max-width: 1023px) {
  .glance-grid { grid-template-columns: minmax(0, 1fr); }
  .glance-l, .glance-r { grid-column: 1 / -1; }
}
.glance-open-s { display: none; }
#app .glance-card .cp-card-head .cm-link { flex: none; white-space: nowrap; }
@media (max-width: 767px) {
  .pulse-hero-in { display: block; }
  .glance-metrics { margin-top: -8px; }
  /* Phone order of the approved design: numbers, trend, then Google actions. */
  .glance-grid { display: flex; flex-direction: column; gap: 20px; }
  .glance-l { display: contents; }
  .glance-r { order: 1; margin-top: 0; }
  .glance-sep { order: 2; }
  .glance-google { order: 3; }
  .glance-open-l { display: none; }
  .glance-open-s { display: inline; }
}

/* =============================================================================
   LEADS · list + conversation (desktop split view, mobile full-screen thread)
   Hooks the proofs and handlers rely on (.conv, .thread, .msg, .bolha, .tm,
   [data-*]) are kept; their legacy look is reset first so only this layer
   paints them.
   ========================================================================== */
#app .lx-shell :is(.conv, .thread, .msg, .bolha, .tm, .audio, .diasep, .evento, .semnada, .lista-inbox, .ibusca, .onda, .tocar, .audio-play, .audio-topo, .compositor, .ligar, .voltar, .titulo-conversa, .sem-gravacao) {
  all: unset; box-sizing: border-box;
}
#app .lx-shell { display: flex; flex: none; min-height: 0; height: calc(100vh - var(--cp-topbar)); height: calc(100dvh - var(--cp-topbar)); overflow: hidden; background: var(--cm-bg-canvas); }
#app .lx-shell .lx-pane { width: 400px; flex: none; height: 100%; display: flex; flex-direction: column; background: var(--cm-bg-surface); border-right: 1px solid var(--cm-border-soft); min-width: 0; }
#app .lx-shell .lx-head { padding: 24px 20px 16px; display: flex; flex-direction: column; gap: 16px; }
#app .lx-shell .lx-titles { display: flex; flex-direction: column; gap: 4px; }
#app .lx-shell .lx-h1 { font-size: var(--cm-text-2xl); line-height: 1.15; font-weight: 600; letter-spacing: -.02em; }
#app .lx-shell .lx-sub { font-size: var(--cm-text-ui); color: var(--cm-text-secondary); min-height: 20px; }
#app .lx-shell .lx-waiting { display: inline-flex; align-items: center; gap: 6px; }
#app .lx-shell .lx-search { position: relative; display: block; }
#app .lx-shell .lx-search > .ti { position: absolute; left: 14px; top: 13px; width: 18px; height: 18px; color: var(--cm-text-secondary); pointer-events: none; }
#app .lx-shell .lx-search .cm-input { height: 44px; border-radius: var(--cm-radius-sm); padding-left: 42px; padding-right: 44px; background: var(--cm-bg-surface-soft); border-color: transparent; }
#app .lx-shell .lx-search .cm-input:focus { background: var(--cm-bg-surface); border-color: var(--cm-action-interactive); }
#app .lx-shell .lx-search .cm-input::-webkit-search-cancel-button { display: none; }
#app .lx-shell .lx-search-x { position: absolute; right: 2px; top: 2px; }
#app .lx-shell .lx-chips { display: flex; gap: 8px; flex-wrap: wrap; }
.lx-chip { height: 36px; padding: 0 14px; border-radius: var(--cm-radius-full); border: 1px solid var(--cm-border-default); background: var(--cm-bg-surface); font-family: inherit; font-size: var(--cm-text-ui); font-weight: 600; color: var(--cm-text-secondary); display: inline-flex; align-items: center; gap: 6px; cursor: pointer; text-decoration: none; transition: all var(--cm-duration-fast) var(--cm-ease-standard); }
#app .lx-chip { color: var(--cm-text-secondary); }
#app .lx-chip:hover { border-color: var(--cm-border-strong); color: var(--cm-text-primary); text-decoration: none; }
#app .lx-chip[aria-pressed="true"], #app .lx-chip[aria-current="page"] { background: var(--cm-brand-800); border-color: var(--cm-brand-800); color: var(--cm-text-on-brand); }
.lx-chip:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--cm-focus-ring); }
.lx-chip .n { font-variant-numeric: tabular-nums; opacity: .8; }
#app .lx-shell .lx-scroll { flex: 1; min-height: 0; overflow: auto; overscroll-behavior: contain; }
#app .lx-shell .lista-inbox { display: block; padding-bottom: 12px; }
#app .lx-shell .lx-ul { list-style: none; margin: 0; padding: 0 8px; display: flex; flex-direction: column; gap: 2px; }
#app .lx-shell .conv.lx-row {
  display: flex; align-items: center; gap: 12px; width: 100%; min-height: 76px; padding: 10px 12px;
  border-radius: var(--cm-radius-sm); color: var(--cm-text-primary); text-decoration: none; cursor: pointer;
  transition: background var(--cm-duration-micro) var(--cm-ease-standard);
}
#app .lx-shell .conv.lx-row:hover { background: var(--cm-bg-surface-soft); }
#app .lx-shell .conv.lx-row:active { background: var(--cm-bg-surface-hover); }
#app .lx-shell .conv.lx-row:focus-visible { box-shadow: 0 0 0 3px var(--cm-focus-ring); }
#app .lx-shell .conv.lx-row[aria-current="page"] { background: var(--cm-brand-50); }
#app .lx-shell .lx-av { width: 44px; height: 44px; border-radius: 50%; flex: none; display: flex; align-items: center; justify-content: center; background: var(--cm-brand-100); color: var(--cm-brand-800); font-size: 15px; font-weight: 700; }
#app .lx-shell .lx-av.is-num { background: var(--cm-bg-surface-hover); color: var(--cm-text-secondary); }
#app .lx-shell .lx-av .ti { width: 20px; height: 20px; }
#app .lx-shell .lx-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
#app .lx-shell .lx-line { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-width: 0; }
#app .lx-shell .lx-name { font-size: 15px; font-weight: 600; color: var(--cm-text-primary); }
#app .lx-shell .lx-time { font-size: var(--cm-text-xs); font-weight: 500; color: var(--cm-text-secondary); white-space: nowrap; font-variant-numeric: tabular-nums; }
#app .lx-shell .lx-prev { font-size: var(--cm-text-ui); line-height: 20px; color: var(--cm-text-secondary); display: flex; align-items: center; gap: 6px; min-width: 0; }
#app .lx-shell .lx-prev .ti { width: 16px; height: 16px; }
#app .lx-shell .conv.is-unread .lx-name { font-weight: 700; }
#app .lx-shell .conv.is-unread .lx-prev { color: var(--cm-text-primary); font-weight: 500; }
#app .lx-shell .conv.is-unread .lx-time { color: var(--cm-brand-600); font-weight: 700; }
#app .lx-shell .lx-flags { display: flex; gap: 6px; flex: none; }
.lx-wait { display: inline-flex; align-items: center; gap: 4px; height: 20px; padding: 0 8px; border-radius: var(--cm-radius-full); background: var(--cm-warning-soft); color: var(--cm-text-primary); font-size: var(--cm-text-xs); font-weight: 600; box-shadow: inset 0 0 0 1px rgba(183, 121, 31, .30); white-space: nowrap; }
.lx-wait .ti { width: 12px; height: 12px; color: var(--cm-warning); }
.lx-unread { min-width: 20px; height: 20px; padding: 0 6px; border-radius: var(--cm-radius-full); background: var(--cm-brand-800); color: var(--cm-text-on-brand); font-size: var(--cm-text-xs); font-weight: 700; display: inline-flex; align-items: center; justify-content: center; }
#app .lx-shell .lx-pages { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 12px 16px 20px; }
#app .lx-shell .semnada.lx-empty { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 48px 28px; text-align: center; }
#app .lx-shell .semnada.lx-empty .cm-tile { width: 44px; height: 44px; }
#app .lx-shell .semnada.lx-empty p { font-size: var(--cm-text-ui); line-height: 20px; color: var(--cm-text-secondary); max-width: 18rem; }
#app .lx-shell .lx-skel { padding: 0 20px; }
#app .lx-shell .lx-skel-row { display: flex; align-items: center; gap: 12px; height: 76px; }
#app .lx-shell .lx-skel-av { width: 44px; height: 44px; border-radius: 22px; flex: none; }
#app .lx-shell .lx-skel-t { flex: 1; display: flex; flex-direction: column; gap: 8px; }
#app .lx-shell .lx-skel-t .cp-skel { height: 12px; width: 140px; }
#app .lx-shell .lx-skel-t .cp-skel + .cp-skel { height: 10px; width: 85%; }

#app .lx-shell .lx-empty-pane { flex: 1; min-width: 0; display: flex; align-items: center; justify-content: center; padding: 24px; }
#app .lx-shell .lx-empty-in { max-width: 360px; display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: center; }
#app .lx-shell .lx-empty-mark { width: 64px; height: 64px; border-radius: var(--cm-radius-lg); background: var(--cm-brand-800); display: flex; align-items: center; justify-content: center; }
#app .lx-shell .lx-empty-in h2 { font-size: var(--cm-text-xl); font-weight: 600; margin-top: 6px; }
#app .lx-shell .lx-empty-in p { font-size: 15px; line-height: 22px; color: var(--cm-text-secondary); }

/* Conversation. */
#app .lx-shell .lx-thread-pane { position: relative; flex: 1; min-width: 0; display: flex; flex-direction: column; min-height: 0; animation: cp-fade 220ms var(--cm-ease-standard) both; }
#app .lx-shell .lx-thread-head { position: relative; height: 68px; flex: none; display: flex; align-items: center; gap: 12px; padding: 0 24px; background: var(--cm-bg-surface); border-bottom: 1px solid var(--cm-border-soft); }
#app .lx-shell .lx-back { display: none; }
#app .lx-shell .lx-contact-h { flex: 1; min-width: 0; font-size: inherit; }
#app .lx-shell .lx-contact { all: unset; box-sizing: border-box; flex: 1; min-width: 0; width: 100%; display: flex; align-items: center; gap: 12px; padding: 6px; border-radius: var(--cm-radius-sm); min-height: 44px; cursor: pointer; color: var(--cm-text-primary); }
#app .lx-shell .lx-contact:hover { background: var(--cm-bg-surface-soft); }
#app .lx-shell .lx-contact:focus-visible { box-shadow: 0 0 0 3px var(--cm-focus-ring); }
#app .lx-shell .lx-contact-txt { display: flex; flex-direction: column; min-width: 0; }
#app .lx-shell .lx-contact-name { display: flex; align-items: center; gap: 4px; font-size: var(--cm-text-base); font-weight: 600; min-width: 0; }
#app .lx-shell .lx-contact-name .ti { width: 16px; height: 16px; color: var(--cm-text-secondary); }
#app .lx-shell .lx-contact-sub { font-size: var(--cm-text-sm); font-weight: 400; color: var(--cm-text-secondary); }
#app .lx-shell .lx-call.ligar { display: inline-flex; align-items: center; justify-content: center; gap: 8px; width: auto; height: 40px; min-height: 40px; padding: 0 16px; border-radius: var(--cm-radius-sm); background: var(--cm-bg-surface); color: var(--cm-text-primary); box-shadow: inset 0 0 0 1px var(--cm-border-default); font-size: var(--cm-text-ui); font-weight: 600; cursor: pointer; text-decoration: none; }
#app .lx-shell .lx-call.ligar:hover { background: var(--cm-bg-surface-soft); }
#app .lx-shell .lx-call.ligar:focus-visible { box-shadow: 0 0 0 3px var(--cm-focus-ring); }
#app .lx-shell .lx-call .ti { width: 18px; height: 18px; }
#app .lx-shell .thread.lx-log { flex: 1; min-height: 0; overflow: auto; overscroll-behavior: contain; display: flex; flex-direction: column; padding: 24px 32px; background: var(--cm-bg-canvas); }
#app .lx-shell .thread .evento { display: flex; justify-content: center; align-items: center; gap: 8px; padding: 4px 0 8px; font-size: var(--cm-text-sm); color: var(--cm-text-secondary); }
#app .lx-shell .thread .diasep { align-self: center; height: 26px; padding: 0 12px; border-radius: var(--cm-radius-full); background: var(--cm-bg-surface); box-shadow: 0 0 0 1px var(--cm-border-soft); font-size: var(--cm-text-xs); font-weight: 600; color: var(--cm-text-secondary); display: inline-flex; align-items: center; margin: 12px 0 8px; }
#app .lx-shell .thread .msg { display: flex; flex-direction: column; max-width: 72%; align-self: flex-start; align-items: flex-start; margin-bottom: 4px; }
#app .lx-shell .thread .msg.saiu { align-self: flex-end; align-items: flex-end; }
#app .lx-shell .thread .msg.fim { margin-bottom: 6px; }
#app .lx-shell .thread .msg .bolha { display: block; padding: 9px 14px; font-size: 15px; line-height: 21px; border-radius: 18px; white-space: pre-wrap; overflow-wrap: anywhere; background: var(--cm-bg-surface); color: var(--cm-text-primary); box-shadow: 0 0 0 1px var(--cm-border-soft); }
#app .lx-shell .thread .msg.saiu .bolha { background: var(--cm-brand-800); color: var(--cm-text-on-brand); box-shadow: none; }
#app .lx-shell .thread .msg.seq:not(.saiu) .bolha { border-top-left-radius: 6px; }
#app .lx-shell .thread .msg:not(.fim):not(.saiu) .bolha { border-bottom-left-radius: 6px; }
#app .lx-shell .thread .msg.seq.saiu .bolha { border-top-right-radius: 6px; }
#app .lx-shell .thread .msg.saiu:not(.fim) .bolha { border-bottom-right-radius: 6px; }
#app .lx-shell .thread .msg .bolha.vazia { font-style: italic; color: var(--cm-text-secondary); }
#app .lx-shell .thread .msg.saiu .bolha.vazia { color: var(--cm-text-on-brand); }
/* The legacy drawn tail (app.css ::before) has no place in this design: runs are shaped by the corner radii above. */
#app .lx-shell .thread .msg .bolha::before, #app .lx-shell .thread .msg .audio::before { content: none; }
#app .lx-shell .thread .msg.enviando .bolha { opacity: .72; }
#app .lx-shell .thread .msg.incerto .bolha { background: var(--cm-bg-surface); color: var(--cm-text-primary); box-shadow: inset 0 0 0 1.5px var(--cm-warning); }
#app .lx-shell .thread .msg .tm { display: flex; align-items: center; gap: 6px; margin: 4px 6px 6px; font-size: var(--cm-text-xs); font-weight: 500; color: var(--cm-text-secondary); font-variant-numeric: tabular-nums; }
#app .lx-shell .thread .msg .tm .ti { width: 14px; height: 14px; }
#app .lx-shell .thread .lx-callrow { max-width: 100%; }
#app .lx-shell .thread .audio.lx-call { display: flex; flex-direction: column; gap: 12px; width: 300px; max-width: 100%; padding: 12px 14px; border-radius: 18px; background: var(--cm-bg-surface); box-shadow: 0 0 0 1px var(--cm-border-soft); color: var(--cm-text-primary); }
#app .lx-shell .thread .saiu .audio.lx-call { background: var(--cm-brand-50); box-shadow: 0 0 0 1px var(--cm-brand-100); }
#app .lx-shell .lx-call-top { display: flex; align-items: center; gap: 12px; }
#app .lx-shell .lx-call-tile { width: 36px; height: 36px; border-radius: 10px; }
#app .lx-shell .lx-call-tile .ti { width: 18px; height: 18px; }
#app .lx-shell .lx-call-txt { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
#app .lx-shell .lx-call-t { font-size: var(--cm-text-ui); font-weight: 600; }
#app .lx-shell .lx-call-d { font-size: var(--cm-text-sm); color: var(--cm-text-secondary); }
#app .lx-shell .lx-call-play { display: flex; align-items: center; gap: 12px; }
#app .lx-shell .audio-play { display: flex; align-items: center; gap: 12px; flex: 1; min-width: 0; }
#app .lx-shell .tocar.lm-play { width: 36px; height: 36px; flex: none; border-radius: 50%; background: var(--cm-brand-800); color: var(--cm-text-on-brand); display: flex; align-items: center; justify-content: center; cursor: pointer; }
#app .lx-shell .tocar.lm-play:focus-visible { box-shadow: 0 0 0 3px var(--cm-focus-ring); }
#app .lx-shell .tocar.lm-play .ti { width: 16px; height: 16px; }
#app .lx-shell .tocar.baixando { opacity: .6; cursor: progress; }
#app .lx-shell .onda.lx-track { flex: 1; min-width: 0; height: 24px; display: flex; align-items: center; gap: 2px; }
#app .lx-shell .onda.lx-track span { flex: 1; min-height: 3px; border-radius: 1px; background: var(--cm-border-default); transition: background var(--cm-duration-fast) linear; }
#app .lx-shell .onda.lx-track span.tocada { background: var(--cm-brand-500); }
#app .lx-shell .lx-call-len { font-size: var(--cm-text-xs); color: var(--cm-text-secondary); }
#app .lx-shell .sem-gravacao { font-size: var(--cm-text-sm); color: var(--cm-text-secondary); }
#app .lx-shell .semnada.lx-empty[data-vazio] { margin: auto; }
#app .lx-shell .lx-loading { flex: 1; }

#app .lx-shell .lx-composer-wrap { flex: none; background: var(--cm-bg-surface); border-top: 1px solid var(--cm-border-soft); padding: 12px 24px 14px; }
#app .lx-shell .compositor.lx-composer { display: flex; align-items: flex-end; gap: 10px; }
.lc-input { display: block; width: 100%; min-height: 44px; max-height: 136px; padding: 11px 16px; border: 1px solid var(--cm-border-default); border-radius: 22px; background: var(--cm-bg-surface); font-family: inherit; font-size: var(--cm-text-base); line-height: 21px; color: var(--cm-text-primary); resize: none; overflow-y: auto; }
/* Legacy `.compositor` rules still load from app.css: restate the shape in scope. */
#app .lx-shell .lx-composer .lc-input { border-radius: 22px; }
#app .lx-shell .lx-composer .lc-send { border-radius: 50%; }
.lc-input::placeholder { color: var(--cm-text-muted); }
.lc-input:focus { outline: none; border-color: var(--cm-action-interactive); box-shadow: 0 0 0 3px var(--cm-focus-ring); }
.lc-input:disabled { background: var(--cm-bg-surface-soft); color: var(--cm-text-secondary); }
.lc-send { width: 44px; height: 44px; min-height: 44px; flex: none; border-radius: 50%; border: 0; background: var(--cm-brand-800); color: var(--cm-text-on-brand); display: flex; align-items: center; justify-content: center; cursor: pointer; transition: background var(--cm-duration-fast) var(--cm-ease-standard), transform var(--cm-duration-micro) var(--cm-ease-standard); }
.lc-send:hover { background: var(--cm-brand-900); }
.lc-send:active { transform: scale(.94); }
.lc-send:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--cm-bg-surface), 0 0 0 5px var(--cm-action-interactive); }
.lc-send .ti { width: 20px; height: 20px; }
.lx-composer:has(.lc-input:placeholder-shown) .lc-send, .lc-send:disabled { background: var(--cm-bg-surface-soft); color: var(--cm-text-secondary); cursor: default; }
#app .lx-shell .lx-composer-err:not(:empty) { padding: 8px 0 0 16px; }
#app .lx-shell .lx-composer-hint { font-size: var(--cm-text-xs); color: var(--cm-text-secondary); padding: 6px 0 0 16px; }

dialog.ficha.lx-pop { width: min(320px, calc(100% - 32px)); max-width: none; margin: auto; padding: 16px; border: 0; border-radius: var(--cm-radius-md); background: var(--cm-bg-surface); color: var(--cm-text-primary); box-shadow: var(--cm-shadow-lg); animation: cp-pop 180ms var(--cm-ease-standard) both; font-family: var(--cm-font-sans); }
dialog.ficha.lx-pop::backdrop { background: rgba(9, 33, 47, .28); }
.lx-pop-body { display: flex; flex-direction: column; gap: 12px; }
.lx-pop-top { display: flex; align-items: flex-start; gap: 12px; }
.lx-pop-top .lx-av { width: 44px; height: 44px; border-radius: 50%; flex: none; display: flex; align-items: center; justify-content: center; background: var(--cm-brand-100); color: var(--cm-brand-800); font-size: 15px; font-weight: 700; }
.lx-pop-top .lx-av.is-num { background: var(--cm-bg-surface-hover); color: var(--cm-text-secondary); }
.lx-pop-id { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.lx-pop-id .ficha-nome { margin: 0; font-size: var(--cm-text-base); font-weight: 600; overflow-wrap: anywhere; }
.lx-pop-id .ficha-campo { margin: 0; }
.lx-pop-actions { display: flex; gap: 8px; }
.lx-pop-actions .cm-btn { flex: 1; }
#app ~ dialog .cm-btn, dialog .cm-btn { color: var(--cm-text-on-brand); }
dialog .cm-btn--secondary { background: var(--cm-bg-surface); color: var(--cm-text-primary); box-shadow: inset 0 0 0 1px var(--cm-border-default); }

@media (min-width: 768px) and (max-width: 1199px) {
  #app .lx-shell .lx-pane { width: 340px; }
  #app .lx-shell .thread.lx-log { padding: 20px 24px; }
}
@media (max-width: 767px) {
  #app .lx-shell { height: auto; min-height: 0; overflow: visible; background: var(--cm-bg-surface); }
  #app .lx-shell.lx-list-view .lx-pane { width: 100%; height: auto; border-right: 0; }
  #app .lx-shell .lx-head { padding: calc(12px + env(safe-area-inset-top)) 16px 12px; }
  #app .lx-shell .lx-h1 { font-size: 28px; }
  #app .lx-shell .lx-scroll { overflow: visible; }
  #app .lx-shell .lx-ul { padding: 0 4px; }
  #app .lx-shell .lx-chip { height: 40px; }
  #app .lx-shell .lx-empty-pane { display: none; }
  #app .lx-shell.lx-thread-view { position: fixed; inset: 0; z-index: 25; height: 100vh; height: 100dvh; background: var(--cm-bg-canvas); }
  #app .lx-shell.lx-thread-view .lx-sidebar { display: none; }
  #app:has(.lx-thread-view) .cp-tabbar { display: none; }
  #app:has(.lx-thread-view) { padding-bottom: 0; }
  #app .lx-shell .lx-thread-head { height: calc(60px + env(safe-area-inset-top)); padding: env(safe-area-inset-top) 8px 0 4px; gap: 4px; }
  #app .lx-shell .lx-back { display: inline-flex; color: var(--cm-text-primary); }
  #app .lx-shell .lx-contact { padding: 4px; gap: 10px; }
  #app .lx-shell .lx-thread-head .lx-av { width: 40px; height: 40px; font-size: var(--cm-text-ui); }
  #app .lx-shell .lx-call.ligar { width: 44px; height: 44px; padding: 0; box-shadow: none; background: transparent; color: var(--cm-text-primary); }
  #app .lx-shell .lx-call-l { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  #app .lx-shell .thread.lx-log { padding: 12px 12px 8px; }
  #app .lx-shell .thread .msg { max-width: 85%; }
  #app .lx-shell .lx-composer-wrap { padding: 8px 12px max(10px, env(safe-area-inset-bottom)); }
}

/* =============================================================================
   PERFORMANCE
   ========================================================================== */
.cp-seg { display: inline-flex; padding: 3px; border-radius: var(--cm-radius-sm); background: var(--cm-bg-surface-soft); gap: 2px; flex-wrap: wrap; }
.cp-seg-b { height: 32px; min-height: 32px; padding: 0 12px; display: inline-flex; align-items: center; gap: 6px; border: 0; border-radius: 9px; background: transparent; font-family: inherit; font-size: var(--cm-text-sm); font-weight: 600; color: var(--cm-text-secondary); cursor: pointer; transition: background var(--cm-duration-fast) var(--cm-ease-standard), color var(--cm-duration-fast) var(--cm-ease-standard); }
.cp-seg-b:hover { color: var(--cm-text-primary); }
.cp-seg-b[aria-pressed="true"] { background: var(--cm-bg-surface); color: var(--cm-text-primary); box-shadow: var(--cm-shadow-sm), 0 0 0 1px var(--cm-border-soft); }
.cp-seg-b:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--cm-focus-ring); }
.cp-state { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 64px 24px; text-align: center; }
.cp-state p { font-size: 15px; line-height: 22px; color: var(--cm-text-secondary); max-width: 28rem; }

/* Performance reads on the plain surface: sections are separated by rules, not cards. */
#app.results-page .cp-main { background: var(--cm-bg-surface); }
.pf-page { gap: 32px; padding-bottom: 64px; }
.pf-h2 { font-size: 22px; line-height: 28px; font-weight: 600; letter-spacing: -.015em; }
.pf-h2.sm { font-size: var(--cm-text-lg); line-height: 24px; }
.pf-h3 { font-size: 15px; font-weight: 600; }
.pf-sub { font-size: 15px; line-height: 22px; color: var(--cm-text-secondary); }
.pf-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; }
.pf-head-t { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.pf-head-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.pf-sec { display: flex; flex-direction: column; gap: 28px; padding-top: 40px; border-top: 1px solid var(--cm-border-default); }
.pf-sec[hidden] { display: none !important; }
.pf-rule { height: 1px; background: var(--cm-border-soft); }
.pf-val { font-size: 32px; line-height: 38px; font-weight: 600; letter-spacing: -.02em; font-variant-numeric: tabular-nums; color: var(--cm-text-primary); }
.pf-val.sm { font-size: var(--cm-text-2xl); line-height: 30px; }
.pf-val.is-na { color: var(--cm-text-muted); font-weight: 500; }
.pf-na { display: inline-flex; align-items: center; gap: 6px; font-size: var(--cm-text-xs); font-weight: 600; color: var(--cm-text-secondary); border: 1px dashed var(--cm-border-strong); border-radius: var(--cm-radius-full); padding: 2px 8px; width: fit-content; margin: 0; }
.pf-delta.is-na { color: var(--cm-text-secondary); } /* AA: muted is 3.6:1 */
.pf-empty { font-size: var(--cm-text-ui); line-height: 1.5; color: var(--cm-text-secondary); }
.pf-alert { padding: 16px 20px; border-radius: var(--cm-radius-md); gap: 16px; }
.pf-alert b { font-size: 15px; }
.pf-alert .cm-btn { padding: 0 18px; }

.pf-top { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 48px; align-items: stretch; }
.pf-top-l { grid-column: span 4; display: flex; min-width: 0; }
.pf-top-r { grid-column: span 8; padding-top: 4px; min-width: 0; }
.pf-health { flex: 1; background: var(--cm-bg-surface-soft); border-radius: var(--cm-radius-lg); padding: 28px; display: flex; flex-direction: column; gap: 16px; }
#app .pf-health-h { font-size: 15px; font-weight: 600; color: var(--cm-text-secondary); }
.pf-health-row { display: flex; align-items: center; gap: 16px; }
.pf-score { width: 72px; height: 72px; flex: none; border-radius: 50%; border: 2px dashed var(--cm-border-strong); display: flex; align-items: center; justify-content: center; font-size: 22px; font-weight: 600; color: var(--cm-text-secondary); }
.pf-health-t { display: flex; flex-direction: column; gap: 4px; }
.pf-health-t strong { font-size: 22px; font-weight: 600; letter-spacing: -.01em; }
.pf-more summary { list-style: none; display: inline-flex; padding: 6px 0; cursor: pointer; }
.pf-more summary::-webkit-details-marker { display: none; }
.pf-more summary .ti { width: 16px; height: 16px; transition: transform var(--cm-duration-fast) var(--cm-ease-standard); }
.pf-more[open] summary .ti { transform: rotate(180deg); }
.pf-more p { font-size: var(--cm-text-ui); line-height: 21px; color: var(--cm-text-secondary); margin-top: 8px; animation: cp-fade 220ms var(--cm-ease-standard) both; }
.pf-pipeline { display: flex; flex-direction: column; gap: 20px; }
.pf-cols { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.pf-col { display: flex; flex-direction: column; gap: 4px; min-width: 0; padding: 4px 0; }
.pf-col + .pf-col { border-left: 1px solid var(--cm-border-soft); padding-left: 20px; }
.pf-reply, .pf-partial { padding: 12px 14px; }
.pf-setup { display: flex; flex-direction: column; gap: 8px; }
.pf-setup-l { display: flex; justify-content: space-between; font-size: var(--cm-text-ui); }
.pf-setup-l span:first-child { font-weight: 600; }
.pf-setup-l span:last-child { color: var(--cm-text-secondary); }

.pf-gbp { display: flex; flex-direction: column; gap: 32px; }
.pf-gbp[aria-busy="true"] { opacity: .6; transition: opacity var(--cm-duration-base) var(--cm-ease-standard); }
.pf-gbp-bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-top: -12px; }
.pf-gbp-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; font-size: var(--cm-text-sm); color: var(--cm-text-secondary); }
.pf-snap { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px; border-radius: var(--cm-radius-full); background: var(--cm-warning-soft); color: var(--cm-text-primary); font-size: var(--cm-text-sm); font-weight: 600; box-shadow: inset 0 0 0 1px rgba(183, 121, 31, .3); }
.pf-snap .ti { width: 14px; height: 14px; }
.pf-period { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.pf-period .cm-select { height: 40px; min-height: 40px; font-size: var(--cm-text-ui); width: auto; min-width: 9.5rem; background-position: calc(100% - 18px) 17px, calc(100% - 13px) 17px; }
.pf-period-sep { color: var(--cm-text-secondary); }
.pf-period-err:empty { display: none; }
.pf-gbp-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 48px; }
.pf-gbp-l { grid-column: span 4; display: flex; flex-direction: column; gap: 28px; min-width: 0; }
.pf-gbp-r { grid-column: span 8; min-width: 0; }
.pf-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.pf-pair-rule { gap: 0; border-top: 1px solid var(--cm-border-soft); padding-top: 12px; }
.pf-pair-rule > .pf-metric + .pf-metric { border-left: 1px solid var(--cm-border-soft); padding-left: 16px; }
.pf-metric { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.pf-metric-l { display: flex; align-items: center; gap: 6px; }
.pf-metric-l .ti { width: 14px; height: 14px; }
.pf-views { display: flex; flex-direction: column; gap: 20px; }
.pf-split-bar { display: flex; flex-direction: column; gap: 8px; }
.pf-bar { display: flex; height: 8px; gap: 3px; }
.pf-bar span { background: var(--cm-brand-500); border-radius: 4px; }
.pf-bar span.alt { background: var(--cm-brand-300); }
.pf-bar-l { display: flex; justify-content: space-between; gap: 8px; flex-wrap: wrap; font-size: var(--cm-text-ui); }
.pf-bar-l span { display: inline-flex; align-items: center; gap: 6px; }
.pf-bar-l .ti { width: 14px; height: 14px; color: var(--cm-text-secondary); }
.pf-bar-l b { font-weight: 600; }
.pf-bar-l em { font-style: normal; color: var(--cm-text-secondary); }
.pf-chart { display: flex; flex-direction: column; gap: 12px; }
.pf-chart-h { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.pf-linesvg { display: block; width: 100%; height: 220px; overflow: visible; }
.pf-linesvg .c-area { fill: var(--cm-brand-50); }
.pf-linesvg .c-line { fill: none; stroke: var(--cm-brand-500); stroke-width: 2; stroke-linejoin: round; }
.cp-axis { list-style: none; margin: 8px 0 0; padding: 0; display: flex; justify-content: space-around; gap: 4px; }
.cp-axis li { display: flex; flex-direction: column; align-items: center; gap: 2px; font-size: var(--cm-text-xs); color: var(--cm-text-secondary); min-width: 0; }
.cp-axis li b { font-size: var(--cm-text-sm); font-weight: 600; color: var(--cm-text-primary); font-variant-numeric: tabular-nums; }
.cp-axis li b.empty { color: var(--cm-text-muted); }
.cp-axis li i { font-style: normal; font-size: 11px; }
.pf-table summary { cursor: pointer; font-size: var(--cm-text-sm); font-weight: 600; color: var(--cm-brand-600); padding: 6px 0; width: fit-content; }
.pf-table table { width: 100%; border-collapse: collapse; margin-top: 8px; font-size: var(--cm-text-sm); }
.pf-table th, .pf-table td { text-align: left; padding: 8px 0; border-top: 1px solid var(--cm-border-soft); font-weight: 500; }
.pf-table td { text-align: right; font-variant-numeric: tabular-nums; }
.pf-did { display: flex; flex-direction: column; gap: 14px; }
.pf-actions { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); }
.pf-actions > .pf-metric + .pf-metric { border-left: 1px solid var(--cm-border-soft); padding-left: 20px; }

.pf-split { flex-direction: row; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 48px; }
.pf-split-l { grid-column: span 8; min-width: 0; }
.pf-split-r { grid-column: span 4; min-width: 0; }
.pf-trend, .pf-searches { display: flex; flex-direction: column; gap: 16px; }
.pf-bars { display: flex; flex-direction: column; gap: 12px; }
.pf-bars .cp-seg { align-self: flex-end; margin-top: -48px; }
.pf-barsvg { display: block; width: 100%; height: 200px; }
.pf-barsvg rect { fill: var(--cm-brand-300); }
.pf-barsvg rect:last-child { fill: var(--cm-brand-800); }
.pf-kw { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.pf-kw li { display: flex; flex-direction: column; gap: 6px; padding: 12px 0; border-top: 1px solid var(--cm-border-soft); }
.pf-kw li:first-child { border-top: 0; padding-top: 4px; }
.pf-kw-l { display: flex; justify-content: space-between; gap: 12px; font-size: var(--cm-text-ui); font-weight: 600; }
.pf-kw-l b { font-weight: 600; white-space: nowrap; }
.pf-kw-l b.is-na { color: var(--cm-text-muted); }
.pf-kw-l em { font-style: normal; font-weight: 500; color: var(--cm-text-secondary); }
.pf-hbar { height: 8px; border-radius: var(--cm-radius-full); background: var(--cm-bg-surface-soft); overflow: hidden; }
.pf-hbar span { display: block; height: 100%; border-radius: var(--cm-radius-full); background: var(--cm-brand-500); }

.pf-rep { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 48px; }
.pf-rep-l { grid-column: span 4; display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.pf-rep-r { grid-column: span 8; display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.pf-rep-h { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.pf-rep-meta { font-size: var(--cm-text-sm); color: var(--cm-text-secondary); }
.pf-rep-meta b { color: var(--cm-text-primary); font-weight: 600; }
.pf-rating { display: flex; align-items: center; gap: 10px; }
.pf-big { font-size: 40px; line-height: 1; font-weight: 600; letter-spacing: -.02em; }
.pf-big.is-na { color: var(--cm-text-muted); }
.pf-rating .ti { width: 24px; height: 24px; color: var(--cm-warning); }
.pf-rating span { font-size: var(--cm-text-ui); color: var(--cm-text-secondary); }
.pf-posts { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.pf-posts li + li { border-top: 1px solid var(--cm-border-soft); }
.pf-post { display: flex; align-items: center; gap: 16px; padding: 14px 0; text-decoration: none; border-radius: var(--cm-radius-xs); }
#app .pf-post, #app .pf-post:hover { color: var(--cm-text-primary); text-decoration: none; }
a.pf-post:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--cm-focus-ring); }
.pf-thumb { width: 60px; height: 60px; border-radius: var(--cm-radius-sm); flex: none; background: var(--cm-bg-surface-soft); display: flex; align-items: center; justify-content: center; color: var(--cm-text-secondary); object-fit: cover; overflow: hidden; }
.pf-thumb .ti { width: 20px; height: 20px; }
.pf-post-t { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pf-post-t b { font-size: 15px; font-weight: 600; }
.pf-post-s { font-size: var(--cm-text-ui); color: var(--cm-text-secondary); display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
.pf-diario { gap: 16px; }
.pf-work { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 48px; }
.pf-work li { display: flex; align-items: center; gap: 14px; padding: 10px 0; }
.pf-work-ic { width: 36px; height: 36px; flex: none; border-radius: 10px; background: var(--cm-bg-surface-soft); display: flex; align-items: center; justify-content: center; color: var(--cm-brand-700); }
.pf-work-ic .ti { width: 18px; height: 18px; }
.pf-work-t { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pf-work-t b { font-size: 15px; font-weight: 600; }
.pf-work-t span { font-size: var(--cm-text-sm); color: var(--cm-text-secondary); }
.pf-note { display: flex; align-items: center; gap: 8px; font-size: var(--cm-text-xs); color: var(--cm-text-secondary); }
.pf-note .ti { width: 14px; height: 14px; }

@media (min-width: 768px) and (max-width: 1199px) {
  .pf-top { column-gap: 32px; }
  .pf-top-l { grid-column: span 5; }
  .pf-top-r { grid-column: span 7; }
  .pf-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 16px; }
  .pf-col:nth-child(3) { border-left: 0; padding-left: 0; }
  .pf-gbp-grid, .pf-split, .pf-rep { column-gap: 32px; }
  .pf-gbp-l { grid-column: span 5; } .pf-gbp-r { grid-column: span 7; }
  .pf-actions { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 16px; }
  .pf-actions > .pf-metric:nth-child(4) { border-left: 0; padding-left: 0; }
  .pf-split-l { grid-column: span 7; } .pf-split-r { grid-column: span 5; }
  .pf-rep-l { grid-column: span 5; } .pf-rep-r { grid-column: span 7; }
}
@media (max-width: 1023px) and (min-width: 768px) {
  .pf-top-l, .pf-top-r, .pf-gbp-l, .pf-gbp-r, .pf-split-l, .pf-split-r, .pf-rep-l, .pf-rep-r { grid-column: 1 / -1; }
  .pf-top-r, .pf-gbp-r, .pf-split-r, .pf-rep-r { margin-top: 28px; }
}
@media (max-width: 767px) {
  .pf-page { gap: 24px; }
  .pf-top, .pf-gbp-grid, .pf-split, .pf-rep { grid-template-columns: minmax(0, 1fr); row-gap: 24px; }
  .pf-top > *, .pf-gbp-grid > *, .pf-split > *, .pf-rep > * { grid-column: 1 / -1 !important; }
  .pf-health { padding: 20px; }
  .pf-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pf-col { padding: 12px 0; }
  .pf-col:nth-child(odd) { border-left: 0; padding-left: 0; }
  .pf-col:nth-child(n+3) { border-top: 1px solid var(--cm-border-soft); }
  .pf-col + .pf-col { padding-left: 16px; }
  .pf-col:nth-child(odd) { padding-left: 0; }
  .pf-val { font-size: 28px; line-height: 34px; }
  .pf-sec { padding-top: 28px; gap: 20px; }
  .pf-head { flex-direction: column; align-items: stretch; gap: 12px; }
  .pf-gbp-bar { margin-top: -4px; }
  .pf-period { width: 100%; }
  .pf-period .pf-period-f { flex: 1; }
  .pf-period .cm-select { width: 100%; min-width: 0; }
  /* Phone: the actions read as a list — label on the left, number on the right. */
  .pf-actions { grid-template-columns: minmax(0, 1fr); }
  .pf-actions > .pf-metric, .pf-actions > .pf-metric + .pf-metric { flex-direction: row; align-items: center; justify-content: space-between; gap: 12px; min-height: 48px; padding: 8px 0; border-left: 0; }
  .pf-actions > .pf-metric + .pf-metric { border-top: 1px solid var(--cm-border-soft); }
  .pf-bars .cp-seg { align-self: flex-start; margin-top: 0; }
  .pf-work { grid-template-columns: minmax(0, 1fr); }
  .pf-alert { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: start; gap: 12px; }
  .pf-alert .cm-btn { grid-column: 1 / -1; width: 100%; }
}
.pf-chart-empty { height: 100%; min-height: 220px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; border: 1px dashed var(--cm-border-default); border-radius: var(--cm-radius-md); padding: 24px; text-align: center; color: var(--cm-text-secondary); }
.pf-chart-empty .ti { width: 24px; height: 24px; color: var(--cm-text-muted); }
.pf-chart-empty p { font-size: var(--cm-text-ui); max-width: 22rem; }
.pf-gbp-r .pf-chart { height: 100%; }

/* =============================================================================
   PROFILE
   ========================================================================== */
.pr-plan { display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: 12px 24px; margin: 0 0 16px; }
.pr-plan[hidden] { display: none; }
.pr-plan dt { font-size: var(--cm-text-sm); color: var(--cm-text-secondary); }
.pr-plan dd { margin: 2px 0 0; font-weight: 600; }
.pr-plan dd small { display: block; margin-top: 4px; font-weight: 400; font-size: var(--cm-text-sm); color: var(--cm-text-secondary); }
.pr-locked { display: flex; flex-wrap: wrap; gap: 6px; }
.pr-locked .cm-pill { height: 26px; font-size: var(--cm-text-xs); background: var(--cm-bg-surface-soft); color: var(--cm-text-secondary); }
.pr-locked .ti { width: 12px; height: 12px; }
.pr-page { gap: 28px; padding-bottom: 72px; }
.pr-hero { display: flex; align-items: center; gap: 24px; }
.pr-mark { width: 72px; height: 72px; border-radius: var(--cm-radius-lg); background: var(--cm-brand-800); color: var(--cm-brand-sky); display: flex; align-items: center; justify-content: center; font-size: 26px; font-weight: 700; flex: none; }
.pr-mark .ti { width: 30px; height: 30px; }
.pr-hero-t { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.pr-h1 { font-size: var(--cm-text-3xl); line-height: 1.15; font-weight: 600; letter-spacing: -.02em; }
.pr-hero-s { font-size: 15px; color: var(--cm-text-secondary); }
.pr-hero-m { font-size: var(--cm-text-sm); color: var(--cm-text-secondary); }
.pr-hero-m b { color: var(--cm-text-primary); font-weight: 600; }
.pr-status { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.pr-status > .pr-row { border-top: 0; flex-direction: column; align-items: flex-start; gap: 6px; padding: 18px 24px; }
.pr-status > .pr-row + .pr-row { border-left: 1px solid var(--cm-border-soft); }
.pr-stat .cp-label { display: flex; align-items: center; gap: 6px; }
.pr-stat .cp-label .ti { width: 14px; height: 14px; }
.pr-stat-v { display: flex; align-items: center; gap: 8px; font-size: var(--cm-text-base); font-weight: 600; }
.pr-layout { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 48px; align-items: start; margin-top: 12px; }
.pr-rail { grid-column: span 3; position: sticky; top: calc(var(--cp-topbar) + 24px); display: flex; flex-direction: column; gap: 2px; }
.pr-anchor { display: flex; align-items: center; gap: 10px; height: 40px; padding: 0 12px; border-radius: var(--cm-radius-xs); font-size: var(--cm-text-ui); font-weight: 500; color: var(--cm-text-secondary); text-decoration: none; transition: background var(--cm-duration-micro) var(--cm-ease-standard), color var(--cm-duration-micro) var(--cm-ease-standard); }
#app .pr-anchor { color: var(--cm-text-secondary); }
#app .pr-anchor:hover { background: var(--cm-bg-surface-soft); color: var(--cm-text-primary); text-decoration: none; }
#app .pr-anchor[aria-current="true"] { background: var(--cm-brand-50); color: var(--cm-brand-800); font-weight: 600; }
.pr-anchor:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--cm-focus-ring); }
.pr-anchor .ti { width: 16px; height: 16px; }
.pr-content { grid-column: span 9; display: flex; flex-direction: column; gap: 48px; min-width: 0; }
.pr-sec { display: flex; flex-direction: column; gap: 16px; scroll-margin-top: calc(var(--cp-topbar) + 24px); outline: none; }
.pr-sec-h { display: flex; flex-direction: column; gap: 4px; }
.pr-h2 { font-size: var(--cm-text-xl); font-weight: 600; letter-spacing: -.01em; }
.pr-h3 { font-size: var(--cm-text-base); font-weight: 600; }
.pr-sub { font-size: var(--cm-text-ui); color: var(--cm-text-secondary); }
.pr-text { font-size: var(--cm-text-ui); line-height: 21px; color: var(--cm-text-secondary); }
.pr-dl { margin: 0; }
.pr-dl dd { margin: 0; }
.pr-k { font-size: var(--cm-text-ui); color: var(--cm-text-secondary); width: 180px; flex: none; margin: 0; }
.pr-v { font-size: 15px; font-weight: 500; color: var(--cm-text-primary); flex: 1; min-width: 0; overflow-wrap: anywhere; }
.pr-hint { padding: 0 4px; }
.pr-hint .ti { width: 16px; height: 16px; margin-top: 1px; }
.pr-row-t { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; font-size: 15px; font-weight: 600; color: var(--cm-text-primary); }
.pr-row-t small { font-size: var(--cm-text-sm); font-weight: 400; color: var(--cm-text-secondary); }
.pr-row-x { font-size: var(--cm-text-sm); color: var(--cm-text-secondary); }
#app .pr-danger .pr-row-t, #app .pr-danger > .ti:first-child { color: var(--cm-danger); }
.pr-muted .pr-row-t { color: var(--cm-text-secondary); }
.pr-pad { padding: 24px; display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }
.pr-pad > .cm-alert, .pr-pad > .pr-code, .pr-pad > .pr-text { align-self: stretch; }
.pr-card { padding: 20px; display: flex; align-items: flex-start; gap: 16px; }
.pr-card-t { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.pr-card-t > p { font-size: var(--cm-text-ui); line-height: 21px; color: var(--cm-text-secondary); }
.pr-gbp-estado { font-size: var(--cm-text-base) !important; font-weight: 600; color: var(--cm-text-primary) !important; padding-top: 12px; }
.pr-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.pr-actions:empty, .pr-actions:has(> [hidden]:only-child) { display: none; }
.pr-locs { display: flex; flex-direction: column; gap: 8px; margin-top: 4px; }
.radio-row { display: flex; align-items: center; gap: 14px; width: 100%; min-height: 64px; padding: 12px 16px; border: 1px solid var(--cm-border-default); border-radius: var(--cm-radius-sm); cursor: pointer; background: var(--cm-bg-surface); font-family: inherit; text-align: left; color: var(--cm-text-primary); }
.radio-row:hover { border-color: var(--cm-border-strong); }
.radio-row:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--cm-focus-ring); }
.radio-row[aria-busy="true"], .radio-row.is-on { border-color: var(--cm-brand-800); box-shadow: inset 0 0 0 1px var(--cm-brand-800); background: var(--cm-brand-50); }
.ob-radio { width: 20px; height: 20px; flex: none; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--cm-border-strong); display: flex; align-items: center; justify-content: center; }
.radio-row[aria-busy="true"] .ob-radio, .radio-row.is-on .ob-radio { box-shadow: inset 0 0 0 6px var(--cm-brand-800); }
.pr-loc-t { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pr-loc-n { font-size: 15px; font-weight: 600; }
.pr-loc-a { font-size: var(--cm-text-sm); color: var(--cm-text-secondary); }
.pr-code { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 20px; border-radius: var(--cm-radius-md); background: var(--cm-bg-surface-soft); }
.pr-code-l { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.pr-code-v { font-family: var(--cm-font-mono); font-size: 34px; font-weight: 600; letter-spacing: .18em; color: var(--cm-text-primary); font-variant-numeric: tabular-nums; }
.pr-code-exp { font-size: var(--cm-text-sm); color: var(--cm-text-secondary); }
.cp-switch { position: relative; width: 46px; height: 28px; flex: none; border-radius: var(--cm-radius-full); background: var(--cm-border-strong); transition: background var(--cm-duration-fast) var(--cm-ease-standard); }
.cp-switch::after { content: ""; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: var(--cm-bg-surface); box-shadow: 0 1px 3px rgba(9, 33, 47, .25); transition: transform var(--cm-duration-fast) var(--cm-ease-standard); }
[aria-checked="true"] > .cp-switch { background: var(--cm-brand-800); }
[aria-checked="true"] > .cp-switch::after { transform: translateX(18px); }
.pr-switch-row:disabled { cursor: not-allowed; opacity: .7; }
.pr-lang { flex-wrap: wrap; }
.pr-lang .locale-selector { margin-left: auto; }
.pr-skel-k { width: 120px; height: 12px; }
.pr-skel-v { width: 220px; height: 12px; }
.pr-sub-native:empty { display: none; }

/* The language selector (auth + profile) shares one control. */
#app .locale-selector { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 0; }
#app .locale-selector label { font-size: var(--cm-text-sm); font-weight: 600; color: var(--cm-text-secondary); margin: 0; }
#app .locale-selector select { height: 42px; min-height: 42px; min-width: 168px; padding: 0 40px 0 14px; border: 1px solid var(--cm-border-default); border-radius: var(--cm-radius-sm); background-color: var(--cm-bg-surface); color: var(--cm-text-primary); font-family: inherit; font-size: var(--cm-text-ui); font-weight: 600; -webkit-appearance: none; appearance: none; cursor: pointer; background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%); background-position: calc(100% - 20px) 18px, calc(100% - 15px) 18px; background-size: 5px 5px; background-repeat: no-repeat; }
#app .locale-selector select:focus-visible { outline: none; border-color: var(--cm-action-interactive); box-shadow: 0 0 0 3px var(--cm-focus-ring); }
#app .locale-selector [data-language-feedback] { flex-basis: 100%; font-size: var(--cm-text-sm); color: var(--cm-text-secondary); margin: 0; }
#app .locale-selector [data-language-feedback]:empty { display: none; }
#app .pr-lang .locale-selector label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

@media (min-width: 768px) and (max-width: 1199px) {
  .pr-layout { column-gap: 32px; }
  .pr-rail { grid-column: span 4; }
  .pr-content { grid-column: span 8; }
}
@media (max-width: 1023px) {
  .pr-layout { grid-template-columns: minmax(0, 1fr); margin-top: 0; }
  .pr-rail { display: none; }
  .pr-content { grid-column: 1 / -1; }
}
@media (max-width: 767px) {
  .pr-page { gap: 20px; padding-top: calc(24px + env(safe-area-inset-top)); }
  .pr-hero { flex-direction: column; text-align: center; gap: 16px; }
  .pr-hero-t { align-items: center; }
  .pr-mark { width: 64px; height: 64px; font-size: 22px; }
  .pr-h1 { font-size: 28px; }
  .pr-status { grid-template-columns: minmax(0, 1fr); }
  .pr-status > .pr-row { flex-direction: row; align-items: center; justify-content: space-between; padding: 14px 16px; min-height: 52px; }
  .pr-status > .pr-row + .pr-row { border-left: 0; border-top: 1px solid var(--cm-border-soft); }
  .pr-content { gap: 32px; }
  .pr-sec { scroll-margin-top: 16px; }
  .pr-row { padding: 14px 16px; }
  .pr-k { width: 120px; }
  .pr-dl .pr-row { flex-direction: column; align-items: flex-start; gap: 2px; }
  .pr-card { flex-direction: column; }
  .pr-code { flex-direction: column; align-items: flex-start; }
  .pr-code-v { font-size: 28px; }
  .pr-lang .locale-selector { margin-left: 0; width: 100%; }
  #app .pr-lang .locale-selector select { width: 100%; }
}

/* =============================================================================
   CALENDAR
   ========================================================================== */
.cl-mhead { display: none; }
.cl-dback { margin-bottom: -16px; }
.cl-head { align-items: flex-end; }
.cl-next { position: relative; display: flex; align-items: center; gap: 20px; padding: 24px; border-radius: var(--cm-radius-xl); background: var(--cm-brand-navy-deep); color: var(--cm-text-on-brand); overflow: hidden; }
.cl-next-when { min-width: 52px; min-height: 52px; flex: none; border-radius: var(--cm-radius-sm); background: rgba(255, 255, 255, .08); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0; padding: 4px 8px; text-align: center; }
.cl-next-when span { font-size: 10px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--cm-brand-sky); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cl-next-when b { font-size: var(--cm-text-base); font-weight: 700; font-variant-numeric: tabular-nums; }
.cl-next-t { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.cl-next-k { font-size: var(--cm-text-sm); font-weight: 600; color: var(--cm-brand-sky); }
#app .cl-next-t h2 { font-size: var(--cm-text-xl); font-weight: 600; letter-spacing: -.01em; color: var(--cm-text-on-brand); }
.cl-next-t p { font-size: var(--cm-text-ui); color: var(--cm-dark-text-secondary); }
.cl-next-ai { display: inline-flex; align-items: center; gap: 6px; font-size: var(--cm-text-sm); font-weight: 600; color: var(--cm-brand-sky); }
.cl-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 24px; align-items: start; }
.cl-grid-l { grid-column: span 7; min-width: 0; }
.cl-grid-r { grid-column: span 5; min-width: 0; }
.cl-cal { padding: 20px; gap: 12px; }
.cl-cal-h { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 4px 4px 8px; }
.cl-month { font-size: var(--cm-text-xl); font-weight: 600; letter-spacing: -.01em; }
.cl-cal-nav { display: flex; align-items: center; gap: 4px; }
.cl-cal-nav .cm-iconbtn:disabled { opacity: .35; cursor: not-allowed; }
.cal-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.cal-wd { height: 28px; display: flex; align-items: center; justify-content: center; font-size: var(--cm-text-xs); font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--cm-text-secondary); }
.cal-day { position: relative; height: 68px; border: 0; border-radius: var(--cm-radius-sm); background: transparent; font-family: inherit; font-size: 15px; font-weight: 500; color: var(--cm-text-primary); cursor: pointer; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; padding-top: 10px; gap: 6px; transition: background var(--cm-duration-micro) var(--cm-ease-standard); }
button.cal-day:hover { background: var(--cm-bg-surface-soft); }
.cal-day:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--cm-focus-ring); }
.cal-day .n { width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-variant-numeric: tabular-nums; }
.cal-day.is-today .n { box-shadow: inset 0 0 0 1.5px var(--cm-brand-500); color: var(--cm-brand-600); font-weight: 700; }
.cal-day.is-sel .n { background: var(--cm-brand-800); color: var(--cm-text-on-brand); box-shadow: none; font-weight: 700; }
.cal-day.is-out { color: var(--cm-text-secondary); cursor: default; } /* AA: muted digits were 3.8:1 */
.cal-day.is-past .n { color: var(--cm-text-secondary); }
.cal-day.is-past.is-sel .n { color: var(--cm-text-on-brand); }
.cal-dots { display: flex; gap: 3px; height: 6px; }
.cal-dots i { width: 6px; height: 6px; border-radius: 50%; background: var(--cm-brand-500); }
.cal-day.is-past .cal-dots i { background: var(--cm-border-strong); }
.cl-day { padding: 20px; gap: 8px; }
.cl-day-h { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 0 4px 8px; }
.cl-day-h > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cl-day-t { font-size: var(--cm-text-xl); font-weight: 600; letter-spacing: -.01em; }
.cl-group + .cl-group { margin-top: 8px; }
.cl-group-h { font-size: var(--cm-text-sm); font-weight: 600; color: var(--cm-text-secondary); padding: 8px 4px 4px; text-transform: none; }
.cl-evs { display: flex; flex-direction: column; gap: 2px; }
.ev { border-radius: var(--cm-radius-sm); }
#app .cl-evs .ev.ag-linha { display: block; margin: 0; padding: 0; border: 0; background: transparent; }
#app .cl-evs .ev.ag-linha[open] { background: var(--cm-bg-canvas); }
#app .ev-body.ag-meta { display: flex; flex-direction: column; flex-wrap: nowrap; align-items: stretch; margin-top: 0; gap: 14px; }
#app .cl-next-cta.ag-conversa { font-family: inherit; font-size: var(--cm-text-ui); font-weight: 600; padding: 0 18px; border-radius: var(--cm-radius-sm); }
.cal-wd .wd-s { display: none; }
.cl-empty-note { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 32px 16px; text-align: center; }
.ev[open] { background: var(--cm-bg-canvas); }
.ev-sum { list-style: none; display: flex; align-items: stretch; gap: 16px; padding: 14px 16px; border-radius: var(--cm-radius-sm); cursor: pointer; transition: background var(--cm-duration-micro) var(--cm-ease-standard); }
.ev-sum::-webkit-details-marker { display: none; }
.ev-sum:hover { background: var(--cm-bg-surface-soft); }
.ev[open] > .ev-sum { background: var(--cm-brand-50); }
.ev-sum:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--cm-focus-ring); }
.ev-t { width: 72px; flex: none; font-size: var(--cm-text-ui); font-weight: 600; font-variant-numeric: tabular-nums; padding-top: 1px; }
.ev-bar { width: 3px; border-radius: 2px; background: var(--cm-brand-500); flex: none; }
.ev.is-cancelled .ev-bar { background: var(--cm-border-strong); }
.ev.is-cancelled .ev-ttl { text-decoration: line-through; color: var(--cm-text-secondary); }
.ev.is-past .ev-t, .ev.is-past .ev-ttl { color: var(--cm-text-secondary); }
.ev-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ev-ttl { font-size: 15px; font-weight: 600; }
.ev-sub { font-size: var(--cm-text-sm); color: var(--cm-text-secondary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ev-chev { width: 18px; height: 18px; color: var(--cm-text-secondary); transition: transform var(--cm-duration-fast) var(--cm-ease-standard); }
.ev[open] .ev-chev { transform: rotate(180deg); }
.ev-body { padding: 8px 16px 16px 108px; display: flex; flex-direction: column; gap: 14px; animation: cp-fade 220ms var(--cm-ease-standard) both; }
.ev-facts { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.ev-facts li { display: flex; align-items: center; gap: 10px; font-size: var(--cm-text-ui); color: var(--cm-text-primary); }
.ev-facts .ti { width: 16px; height: 16px; color: var(--cm-text-secondary); }
.ev-acts { display: flex; gap: 8px; flex-wrap: wrap; }

/* Shared dialog (manual appointment, confirmations). */
dialog.cp-dialog { width: min(480px, calc(100% - 32px)); max-height: calc(100dvh - 32px); margin: auto; padding: 24px; border: 0; border-radius: var(--cm-radius-lg); background: var(--cm-bg-surface); color: var(--cm-text-primary); box-shadow: var(--cm-shadow-lg); font-family: var(--cm-font-sans); overflow: auto; animation: cp-pop 200ms var(--cm-ease-standard) both; }
dialog.cp-dialog::backdrop { background: rgba(9, 33, 47, .28); }
.cp-dialog-f { display: flex; flex-direction: column; gap: 16px; }
.cp-dialog-h { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.cp-dialog-h h2 { font-size: var(--cm-text-xl); font-weight: 600; margin: 0; }
.cp-dialog-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.cp-dialog-a { display: flex; gap: 8px; flex-wrap: wrap; }
.cp-dialog-l { display: grid; gap: 6px; margin: 0; padding-left: 20px; font-size: var(--cm-text-ui); color: var(--cm-text-secondary); }
dialog .cm-alert-body > div { margin-top: 8px; }

@media (min-width: 768px) and (max-width: 1199px) {
  .cl-grid-l { grid-column: span 7; } .cl-grid-r { grid-column: span 5; }
  .cal-day { height: 56px; padding-top: 6px; gap: 4px; }
}
@media (max-width: 1023px) and (min-width: 768px) {
  .cl-grid { grid-template-columns: minmax(0, 1fr); }
  .cl-grid-l, .cl-grid-r { grid-column: 1 / -1; }
}
@media (max-width: 767px) {
  .cl-page { padding-top: 0; }
  .cl-mhead { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; min-height: calc(56px + env(safe-area-inset-top)); margin: 0 calc(-1 * var(--cp-gutter)); padding: env(safe-area-inset-top) 8px 0; background: var(--cm-bg-canvas); position: sticky; top: 0; z-index: 5; }
  .cl-mback { align-self: center; margin: 0; padding: 0 8px; min-height: 44px; color: var(--cm-text-primary) !important; font-weight: 500; font-size: 15px; }
  .cl-mtitle { margin: 0; font-size: 17px; font-weight: 600; line-height: 22px; text-align: center; color: var(--cm-text-primary); }
  .cl-mhead > :last-child { justify-self: end; }
  .cl-dback, .cl-head { display: none; }
  .cal-wd .wd-l { display: none; }
  .cal-wd .wd-s { display: inline; }
  .cl-next { flex-wrap: wrap; padding: 16px; border-radius: var(--cm-radius-lg); gap: 14px; }
  .cl-next-cta { width: 100%; }
  .cl-grid { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .cl-grid-l, .cl-grid-r { grid-column: 1 / -1; }
  .cl-cal { padding: 12px; }
  .cal-day { height: 48px; padding-top: 4px; gap: 3px; font-size: var(--cm-text-ui); }
  .cal-day .n { width: 34px; height: 34px; }
  .cal-dots i { width: 5px; height: 5px; }
  .ev-sum { padding: 12px; gap: 12px; }
  .ev-t { width: 64px; }
  .ev-body { padding: 4px 12px 14px 12px; }
  .cp-dialog-2 { grid-template-columns: minmax(0, 1fr); }
  dialog.cp-dialog { width: 100%; max-width: none; max-height: 100dvh; height: 100dvh; border-radius: 0; margin: 0; }
}

/* =============================================================================
   AUTH — public shell (sign in, recovery, set password, invite, self-service)
   ========================================================================== */
#app.login-page, #app:has(> .au-page) { background: var(--cm-bg-surface); }
.au-page { display: flex; flex: 1; width: 100%; min-height: 100vh; min-height: 100dvh; padding: 16px; gap: 16px; background: var(--cm-bg-surface); box-sizing: border-box; }
.au-brand { position: relative; flex: none; width: min(37.5rem, 42vw); min-height: calc(100dvh - 32px); border-radius: var(--cm-radius-2xl); background: var(--cm-brand-navy-deep); color: var(--cm-text-on-brand); overflow: hidden; padding: 48px; display: flex; flex-direction: column; justify-content: space-between; box-sizing: border-box; }
.au-brand-glow { position: absolute; inset: 0; background: radial-gradient(90% 60% at 0% 100%, rgba(139, 190, 221, .16), rgba(139, 190, 221, 0) 70%); pointer-events: none; }
.au-brand-loop { position: absolute; right: -300px; bottom: -250px; width: 900px; height: 900px; pointer-events: none; }
.au-brand-loop path { stroke: var(--cm-brand-sky); stroke-opacity: .09; }
.au-brand-loop circle { fill: var(--cm-bg-surface); fill-opacity: .1; }
.au-brand-logo { position: relative; display: block; width: 160px; height: auto; }
.au-brand-copy { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 20px; max-width: 28.75rem; }
#app .au-brand-copy h2 { font-size: 44px; line-height: 1.1; letter-spacing: -.025em; font-weight: 600; color: var(--cm-text-on-brand); }
.au-brand-copy p { font-size: 17px; line-height: 26px; color: var(--cm-dark-text-secondary); }
.au-brand-copy small { align-self: stretch; margin-top: 28px; padding-top: 28px; border-top: 1px solid rgba(255, 255, 255, .12); font-size: var(--cm-text-sm); color: var(--cm-dark-text-secondary); }
.au-side { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.au-top { display: flex; align-items: center; justify-content: flex-end; gap: 16px; min-height: 64px; padding: 8px 32px 0; }
.au-top-logo { display: none; }
.au-main { flex: 1; display: flex; align-items: center; justify-content: center; padding: 32px; outline: none; }
.au-col { width: 100%; max-width: 25rem; display: flex; flex-direction: column; gap: 24px; }
.au-head { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
#app .au-head h1 { font-size: 32px; line-height: 38px; letter-spacing: -.02em; font-weight: 600; color: var(--cm-text-primary); }
.au-head p { font-size: var(--cm-text-base); line-height: 24px; color: var(--cm-text-secondary); }
.au-head .cm-pill { height: 26px; margin-bottom: 4px; }
.au-form { display: flex; flex-direction: column; gap: 20px; }
.au-form .cm-field > label { font-size: var(--cm-text-ui); font-weight: 600; color: var(--cm-text-primary); }
.au-form .cm-input { height: 48px; }
.au-form .cm-btn { width: 100%; height: 48px; }
.au-form .cm-err { margin: 0; font-size: var(--cm-text-sm); color: var(--cm-danger); }
.au-row { display: flex; justify-content: flex-end; margin-top: -4px; }
.au-forgot { min-height: 32px; font-size: var(--cm-text-ui); }
.au-pw { position: relative; }
.au-pw .cm-input { width: 100%; padding-right: 52px; box-sizing: border-box; }
.au-pw-toggle { position: absolute; top: 50%; right: 4px; transform: translateY(-50%); display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: var(--cm-radius-sm); background: transparent; color: var(--cm-text-secondary); cursor: pointer; }
.au-pw-toggle:hover { color: var(--cm-text-primary); }
.au-pw-toggle:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--cm-focus-ring); }
.au-pw-toggle .ti { width: 20px; height: 20px; }
#aviso:empty { display: none; }
#aviso .cm-alert p { margin: 0; }
.au-new { display: flex; flex-direction: column; align-items: stretch; gap: 12px; padding-top: 24px; border-top: 1px solid var(--cm-border-soft); text-align: center; }
.au-new > p:first-child { font-size: var(--cm-text-ui); color: var(--cm-text-secondary); }
.au-new .cm-btn { width: 100%; height: 48px; }
.au-new .cm-btn:disabled { opacity: 1; color: var(--cm-text-secondary); background: var(--cm-bg-surface-soft); border-color: var(--cm-border-soft); cursor: not-allowed; }
.au-soon { font-size: var(--cm-text-sm); color: var(--cm-text-secondary); }
.au-back { align-self: flex-start; border: 0; background: transparent; padding: 0; font-family: inherit; cursor: pointer; margin-bottom: -8px; }
.au-tile { width: 48px; height: 48px; }
.au-help { font-size: var(--cm-text-sm); color: var(--cm-text-secondary); }
.au-stack { display: flex; flex-direction: column; gap: 12px; }
.au-stack .cm-btn { width: 100%; height: 48px; }
.au-footer { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding: 16px 48px 24px 64px; font-size: var(--cm-text-sm); color: var(--cm-text-secondary); }
.au-footer p { margin: 0; }
.au-footer a { font-weight: 600; text-decoration: none; }
#app .au-footer nav a { font-weight: 500; color: var(--cm-text-secondary); }
.au-footer nav { display: flex; gap: 16px; }
.au-footer a:focus-visible { outline: 2px solid var(--cm-action-interactive); outline-offset: 3px; border-radius: 4px; }
.au-lang { position: relative; display: inline-flex; align-items: center; gap: 0; }
#app .au-lang select { height: 40px; min-height: 40px; min-width: 0; padding: 0 36px 0 40px; border: 0; border-radius: var(--cm-radius-sm); background: transparent; background-image: none; font-family: inherit; font-size: var(--cm-text-ui); font-weight: 500; color: var(--cm-text-primary); -webkit-appearance: none; appearance: none; cursor: pointer; }
#app .au-lang select:hover { background: var(--cm-bg-surface-soft); }
#app .au-lang select:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--cm-focus-ring); }
.au-lang .ti { position: absolute; top: 50%; transform: translateY(-50%); pointer-events: none; color: var(--cm-text-secondary); }
.au-lang .ti-world { left: 12px; width: 18px; height: 18px; }
.au-lang .ti-chevron-down { right: 12px; width: 14px; height: 14px; }
#app .au-lang [data-language-feedback] { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
#app .au-lang label { position: absolute; }

@media (max-width: 1199px) {
  .au-brand { width: min(30rem, 40vw); padding: 40px; }
  #app .au-brand-copy h2 { font-size: 40px; }
  .au-footer { padding: 16px 32px 24px; }
}
@media (max-width: 1023px) {
  .au-page { padding: 0; gap: 0; }
  .au-brand { display: none; }
  .au-top { position: sticky; top: 0; z-index: 5; justify-content: space-between; min-height: 56px; padding: 0 12px 0 20px; padding-top: env(safe-area-inset-top); background: var(--cm-brand-navy-deep); }
  .au-top-logo { display: block; width: 136px; height: auto; }
  #app .au-lang select { color: var(--cm-text-on-brand); padding-left: 36px; }
  #app .au-lang label { color: var(--cm-text-on-brand); }
  #app .au-lang select:hover { background: rgba(255, 255, 255, .08); }
  #app .au-lang select option { color: var(--cm-text-primary); background: var(--cm-bg-surface); }
  .au-lang .ti { color: var(--cm-dark-text-secondary); }
  .au-lang .ti-world { left: 10px; }
  .au-main { align-items: flex-start; padding: 48px 32px 32px; }
  .au-footer { justify-content: center; text-align: center; padding: 16px 20px calc(24px + env(safe-area-inset-bottom)); }
}
@media (max-width: 767px) {
  .au-main { padding: 40px 20px 24px; }
  .au-col { max-width: none; gap: 22px; }
  #app .au-head h1 { font-size: 28px; line-height: 34px; }
  .au-footer { flex-direction: column; gap: 8px; }
}
@media (max-width: 359px) {
  .au-main { padding: 32px 16px 20px; }
  .au-top { padding-left: 16px; }
  .au-top-logo { width: 120px; }
}
.au-invite { display: flex; flex-direction: column; gap: 24px; }
#app [hidden] { display: none !important; }

/* =============================================================================
   GROWTH JOURNEY — onboarding dialog (js/trava.js + screens/journey.js)
   ========================================================================== */
dialog.trava.jx { margin: auto; width: min(100% - 48px, 67.5rem); height: min(100dvh - 48px, 48.75rem); max-height: none; display: grid; grid-template-columns: 18.75rem minmax(0, 1fr); border-radius: var(--cm-radius-2xl); background: var(--cm-bg-surface); color: var(--cm-text-primary); box-shadow: var(--cm-shadow-lg, 0 24px 64px rgba(9, 33, 47, .28)); font-family: var(--cm-font-sans); overflow: hidden; }
dialog.trava.jx:not([open]) { display: none; }
dialog.trava.jx::backdrop { background: rgba(9, 33, 47, .45); opacity: 1; }
.jx-rail { position: relative; display: flex; flex-direction: column; gap: 22px; min-height: 0; padding: 32px 20px 24px 30px; background: var(--cm-brand-navy-deep); color: var(--cm-text-on-brand); overflow-y: auto; overscroll-behavior: contain; }
.jx-rail:empty { display: none; }
.jx-rail-top { display: flex; flex-direction: column; gap: 6px; padding-right: 10px; }
.jx-brand { display: inline-flex; align-items: center; gap: 10px; margin-bottom: 20px; font-size: 17px; font-weight: 700; letter-spacing: -.01em; }
.jx-brand .cp-mark { width: 28px; height: 28px; background: transparent; }
.jx-word span { font-weight: 500; color: var(--cm-brand-sky); }
.jx-rail-t::first-letter { text-transform: uppercase; }
.jx-rail-t { font-size: 20px; font-weight: 600; line-height: 26px; letter-spacing: -.01em; }
.jx-rail-s { font-size: var(--cm-text-sm); color: var(--cm-dark-text-secondary); }
.jx-track { height: 4px; margin-top: 8px; border-radius: 2px; background: rgba(255, 255, 255, .12); overflow: hidden; }
.jx-track span { display: block; height: 100%; border-radius: 2px; background: var(--cm-brand-sky); transition: width var(--cm-duration-base, 240ms) var(--cm-ease-standard); }
.jx-steps { display: flex; flex-direction: column; gap: 8px; }
.jx-ph { margin-top: 8px; font-size: var(--cm-text-xs); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--cm-brand-sky); }
.jx-steps ol { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.jx-step { display: flex; align-items: center; gap: 12px; min-height: 42px; padding: 0 10px; border-radius: var(--cm-radius-sm); font-size: 15px; color: var(--cm-dark-text-secondary); }
.jx-step-t { display: flex; flex-direction: column; gap: 1px; min-width: 0; padding: 6px 0; }
.jx-step-t small { font-size: var(--cm-text-xs); font-weight: 500; color: var(--cm-dark-text-secondary); }
.jx-step.is-done { color: var(--cm-text-on-brand); }
.jx-step.is-now { background: rgba(255, 255, 255, .07); color: var(--cm-text-on-brand); font-weight: 600; }
.jx-step.is-locked { opacity: .6; }
.jx-step em { margin-left: auto; padding: 2px 8px; border-radius: 6px; background: rgba(255, 255, 255, .08); font-size: var(--cm-text-xs); font-style: normal; font-weight: 600; color: var(--cm-dark-text-secondary); }
.jx-dot { display: grid; place-items: center; flex: none; width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--cm-dark-border); box-sizing: border-box; }
.jx-dot .ti { width: 12px; height: 12px; }
.jx-dot.is-done { border: 0; background: var(--cm-brand-sky); color: var(--cm-brand-navy-deep); }
.jx-dot.is-now { border-color: var(--cm-brand-sky); box-shadow: inset 0 0 0 4px var(--cm-brand-navy-deep), inset 0 0 0 10px var(--cm-brand-sky); }
.jx-dot.is-locked { border: 0; color: var(--cm-dark-text-secondary); }
.jx-rail-foot { display: flex; align-items: center; gap: 8px; margin-top: auto; padding-top: 12px; font-size: var(--cm-text-sm); color: var(--cm-dark-text-secondary); }
.jx-rail-foot .ti { width: 14px; height: 14px; }
.jx-main { position: relative; display: flex; flex-direction: column; min-width: 0; min-height: 0; }
dialog.trava.jx .trava-head { position: relative; display: flex; flex-wrap: wrap; align-items: flex-start; gap: 6px 16px; padding: 24px 40px 0; border: 0; background: transparent; }
.jx-head-t { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
dialog.trava.jx .trava-fechar { position: static; margin-left: auto; display: inline-flex; align-items: center; gap: 8px; width: auto; height: 40px; min-height: 40px; padding: 0 12px; border: 0; border-radius: var(--cm-radius-sm); background: transparent; font-family: inherit; font-size: var(--cm-text-ui); font-weight: 500; color: var(--cm-text-primary); cursor: pointer; }
dialog.trava.jx .trava-fechar:hover { background: var(--cm-bg-surface-soft); }
dialog.trava.jx .trava-fechar:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--cm-focus-ring); }
dialog.trava.jx .trava-fechar .ti { width: 18px; height: 18px; font-size: inherit; }
dialog.trava.jx .trava-fechar[hidden] { display: none; }
dialog.trava.jx .trava-head .trava-falta, dialog.trava.jx .trava-head .trava-recusa { flex-basis: 100%; margin: 0; font-size: var(--cm-text-ui); color: var(--cm-text-secondary); }
dialog.trava.jx .trava-head .trava-falta:not(:empty) { order: 2; padding: 10px 14px; border-radius: var(--cm-radius-sm); background: var(--cm-warning-soft); color: var(--cm-text-primary); font-weight: 500; }
dialog.trava.jx .trava-head .trava-recusa:empty { display: none; }
dialog.trava.jx .trava-corpo { flex: 1; min-height: 0; display: flex; flex-direction: column; padding: 0; overflow-y: auto; overscroll-behavior: contain; background: transparent; }
dialog.trava.jx .quiz { flex: 1; display: flex; flex-direction: column; min-height: 100%; gap: 0; }
dialog.trava.jx .obar { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
dialog.trava.jx [data-pergunta] { flex: 1; display: flex; flex-direction: column; }
dialog.trava.jx .phase.now.jx-card { flex: 1; display: flex; flex-direction: column; gap: 12px; margin: 0; padding: 36px 40px 0; border: 0; border-radius: 0; background: transparent; color: var(--cm-text-primary); box-shadow: none; }
.jx-kicker { display: flex; align-items: center; gap: 10px; font-size: var(--cm-text-ui); font-weight: 600; color: var(--cm-action-interactive); }
.jx-opt { padding: 2px 10px; border-radius: var(--cm-radius-full); background: var(--cm-bg-surface-soft); font-size: var(--cm-text-sm); font-weight: 600; color: var(--cm-text-primary); }
dialog.trava.jx .phhead.jx-title { margin: 0; display: block; }
dialog.trava.jx .phhead.jx-title span { font-family: var(--cm-font-sans); font-size: 30px; font-weight: 600; line-height: 36px; letter-spacing: -.02em; color: var(--cm-text-primary); }
dialog.trava.jx .jx-desc, dialog.trava.jx .phase.now > .desc { margin: 0; max-width: 40rem; font-size: 17px; line-height: 26px; color: var(--cm-text-secondary); }
dialog.trava.jx .tform { flex: 1; display: flex; flex-direction: column; gap: 14px; margin-top: 16px; }
dialog.trava.jx .tform > :not(.qacoes) { max-width: 35rem; }
dialog.trava.jx .tform .dica { margin: 0 0 6px; }
dialog.trava.jx .tform label, dialog.trava.jx .tform .rot { margin: 0 0 4px; font-size: var(--cm-text-ui); font-weight: 600; color: var(--cm-text-primary); }
dialog.trava.jx .tform input[type=text], dialog.trava.jx .tform input[type=number], dialog.trava.jx .tform input[type=tel], dialog.trava.jx .tform input[type=email], dialog.trava.jx .tform input[type=url], dialog.trava.jx .tform textarea, dialog.trava.jx .tform select, dialog.trava.jx .tform input:not([type]) { width: 100%; min-height: 48px; padding: 0 14px; border: 1px solid var(--cm-border-default); border-radius: var(--cm-radius-sm); background: var(--cm-bg-surface); font-family: inherit; font-size: var(--cm-text-base); color: var(--cm-text-primary); box-sizing: border-box; outline: none; box-shadow: none; }
dialog.trava.jx .tform textarea { min-height: 120px; padding: 12px 14px; }
dialog.trava.jx .tform input:focus, dialog.trava.jx .tform textarea:focus, dialog.trava.jx .tform select:focus { border-color: var(--cm-action-interactive); box-shadow: 0 0 0 3px var(--cm-focus-ring); outline: none; }
dialog.trava.jx .tform input[aria-invalid=true]:not(:focus-visible) { outline: none; border-color: var(--cm-danger); }
dialog.trava.jx .tform input::placeholder, dialog.trava.jx .tform textarea::placeholder { color: var(--cm-text-muted); }
dialog.trava.jx .tform .busca i { left: 14px; width: 18px; height: 18px; color: var(--cm-text-secondary); }
dialog.trava.jx .tform .busca input { padding-left: 42px; }
dialog.trava.jx .tform .dica, dialog.trava.jx .tform .falta { font-size: var(--cm-text-sm); line-height: 18px; color: var(--cm-text-secondary); }
dialog.trava.jx .tform .falta:empty { display: none; }
dialog.trava.jx .tform .recusa-campo { color: var(--cm-danger); }
dialog.trava.jx .tform .sim-nao button { min-height: 48px; padding: 0 20px; border: 1px solid var(--cm-border-default); border-radius: var(--cm-radius-sm); background: var(--cm-bg-surface); font-family: inherit; font-size: var(--cm-text-base); font-weight: 600; color: var(--cm-text-primary); cursor: pointer; }
dialog.trava.jx .tform .sim-nao button[aria-pressed=true] { border-color: var(--cm-brand-800); background: var(--cm-brand-800); color: #fff; }
dialog.trava.jx .tform .chip { border: 1px solid var(--cm-border-default); background: var(--cm-brand-50); color: var(--cm-text-primary); }
dialog.trava.jx .tform .chip button { color: var(--cm-action-interactive); }
dialog.trava.jx .tform .sugestoes { border: 1px solid var(--cm-border-soft); border-radius: var(--cm-radius-sm); background: var(--cm-bg-surface); padding: 4px; }
dialog.trava.jx .tform .sugestoes button { border-radius: 8px; background: transparent; color: var(--cm-text-primary); }
dialog.trava.jx .tform .sugestoes button:hover, dialog.trava.jx .tform .sugestoes button:focus-visible { background: var(--cm-bg-surface-soft); }
dialog.trava.jx .tform .sugestoes .n { color: var(--cm-text-primary); }
dialog.trava.jx .tform .sugestoes .via, dialog.trava.jx .tform .sugestoes .vazio { color: var(--cm-text-secondary); }
dialog.trava.jx .tform input[type=file] { width: 100%; min-height: 160px; padding: 24px; border: 1px dashed var(--cm-border-strong); border-radius: var(--cm-radius-md); background: var(--cm-bg-canvas); color: var(--cm-text-secondary); box-sizing: border-box; }
dialog.trava.jx .tform input[type=file]::file-selector-button { margin-right: 12px; min-height: 40px; padding: 0 16px; border: 1px solid var(--cm-border-default); border-radius: var(--cm-radius-sm); background: var(--cm-bg-surface); font-family: inherit; font-weight: 600; color: var(--cm-text-primary); }
dialog.trava.jx .qacoes.jx-foot, dialog.trava.jx .qacoes { position: sticky; bottom: 0; z-index: 1; display: flex; align-items: center; gap: 12px; margin: auto -40px 0; padding: 20px 40px; border-top: 1px solid var(--cm-border-soft); background: var(--cm-bg-surface); }
.jx-sp { flex: 1; }
.jx-saved { display: inline-flex; align-items: center; gap: 6px; font-size: var(--cm-text-sm); color: var(--cm-text-secondary); }
.jx-saved .ti { width: 14px; height: 14px; color: var(--cm-success); }
.jx-saved[hidden] { display: none; }
.jx-saved[data-estado="salvando"] .ti { color: var(--cm-text-muted); }
dialog.trava.jx .pular { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; margin: 0; padding: 0 12px; border: 0; border-radius: var(--cm-radius-sm); background: transparent; font-family: inherit; font-size: var(--cm-text-ui); font-weight: 600; color: var(--cm-text-primary); text-decoration: none; cursor: pointer; }
dialog.trava.jx .pular:hover { background: var(--cm-bg-surface-soft); }
dialog.trava.jx .pular .ti { width: 16px; height: 16px; }
dialog.trava.jx .cta { width: auto; min-height: 48px; height: 48px; margin: 0; padding: 0 22px; border: 0; border-radius: var(--cm-radius-sm); background: var(--cm-brand-800); font-family: inherit; font-size: var(--cm-text-base); font-weight: 600; color: #fff; display: inline-flex; align-items: center; justify-content: center; gap: 10px; cursor: pointer; }
dialog.trava.jx .cta:hover { background: var(--cm-brand-700); }
dialog.trava.jx .cta:disabled { opacity: .55; cursor: wait; }
dialog.trava.jx .cta .ti { width: 18px; height: 18px; }
dialog.trava.jx .link-btn { align-self: flex-start; padding: 0; border: 0; background: none; font-family: inherit; font-weight: 600; color: var(--cm-action-interactive); text-decoration: underline; cursor: pointer; }
dialog.trava.jx .note, dialog.trava.jx .embreve { padding: 12px 14px; border-radius: var(--cm-radius-sm); background: var(--cm-bg-surface-soft); font-size: var(--cm-text-ui); color: var(--cm-text-primary); }
.jx-end { align-items: flex-start; justify-content: center; }
.jx-end-ic { width: 52px; height: 52px; }
.jx-loading { display: flex; flex-direction: column; gap: 14px; padding: 48px 40px; outline: none; }
.jx-sk1 { width: 30%; height: 16px; } .jx-sk2 { width: 70%; height: 32px; } .jx-sk3 { width: 55%; height: 48px; margin-top: 16px; }
.jx-retry { padding: 0 40px 40px; }
dialog.trava.jx .cm-alert.erro { margin: 40px 40px 16px; }
dialog.trava.jx .onboarding-selector, dialog.trava.jx .onboarding-times, dialog.trava.jx .onboarding-day { color: var(--cm-text-primary); }
@media (max-width: 1023px) {
  dialog.trava.jx { grid-template-columns: 15rem minmax(0, 1fr); }
  .jx-rail { padding: 24px 14px 20px 20px; }
}
@media (max-width: 767px) {
  dialog.trava.jx { width: 100%; height: 100dvh; max-width: none; max-height: none; border-radius: 0; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); }
  /* Phone: the rail becomes the light step bar of the approved design —
     progress count centred, "Finish later" on the right, the track below. */
  .jx-rail { display: block; padding: 0 20px 12px; padding-top: env(safe-area-inset-top); background: var(--cm-bg-surface); color: var(--cm-text-primary); overflow: visible; }
  .jx-rail-top { gap: 0; padding: 0; }
  .jx-brand, .jx-steps, .jx-rail-foot, .jx-rail-t { display: none; }
  .jx-rail-s { display: flex; align-items: center; justify-content: center; height: 56px; font-size: var(--cm-text-ui); font-weight: 600; color: var(--cm-text-primary); }
  .jx-track { margin-top: 0; background: var(--cm-border-soft); }
  .jx-track span { background: var(--cm-brand-800); }
  dialog.trava.jx .trava-head { position: fixed; top: calc(env(safe-area-inset-top) + 6px); right: 8px; padding: 0; z-index: 2; }
  dialog.trava.jx .trava-fechar { height: 44px; color: var(--cm-text-primary); }
  dialog.trava.jx .trava-fechar .ti { display: none; }
  .jx-sp { display: none; }
  dialog.trava.jx .trava-head .trava-falta, dialog.trava.jx .trava-head .trava-recusa { display: none; }
  dialog.trava.jx .phase.now.jx-card { padding: 24px 20px 0; }
  dialog.trava.jx .phhead.jx-title span { font-size: 24px; line-height: 30px; }
  dialog.trava.jx .jx-desc { font-size: var(--cm-text-base); line-height: 24px; }
  dialog.trava.jx .qacoes.jx-foot, dialog.trava.jx .qacoes, dialog.trava.jx .tform .qacoes { margin: auto -20px 0; padding: 12px 20px calc(12px + env(safe-area-inset-bottom)); flex-wrap: wrap; }
  .jx-saved { display: none; }
  dialog.trava.jx .cta { flex: 1 1 auto; }
}
@media (prefers-reduced-motion: reduce) { .jx-track span { transition: none; } }