/* ═══════════════════════════════════════════════════════════════════════════
   CONVÉS · Design System  —  maitre.bitcampers.com.br
   One stylesheet for every screen of the console. Source of the decisions:
   "MANUAL DE MARCA" (Projeto de Marca & Identidade Visual, Alexandre Brandl)
   documented in conves/docs/design-system.md and alive in /guia.

   Layers: tokens → base → layout → components → views → utilities.
   Rules: never hard-code a color, radius, shadow or font outside :root;
   components are .cv-* blocks with --modifiers and __elements.
   ═══════════════════════════════════════════════════════════════════════════ */

@import url('/css/fonts.css');

@layer tokens, base, layout, components, views, utilities;

/* ─────────────────────────────── 1. TOKENS ─────────────────────────────── */
@layer tokens {
  :root {
    /* Brand palette (manual p.28 "Paleta de cores" + logo files) */
    --cv-navy: #142346;        /* logo navy — primary */
    --cv-ink: #20273B;         /* "azul escuro traz seriedade" */
    --cv-ink-deep: #151A28;    /* dark slides of the manual */
    --cv-ink-night: #0E1320;
    --cv-slate: #2A3657;       /* secondary navy */
    --cv-sage: #6C9C7F;        /* green — natureza, crescimento */
    --cv-sage-strong: #4D7A60; /* sage with text contrast on white (4.9:1) */
    --cv-mint: #BAE2CA;        /* mint — the sun, accents */
    --cv-mint-soft: #DDF0E4;
    --cv-mint-wash: #EEF7F1;
    --cv-white: #FFFFFF;

    /* Supporting hues (sand & coral from the moodboard: rope, sun, fish) */
    --cv-sand: #C9A061;
    --cv-sand-soft: #F6EEDF;
    --cv-coral: #C2553F;
    --cv-coral-soft: #FAE9E4;

    /* Theme: light (default — "utilizar muito o branco de fundo") */
    --bg: #F6F5F1;
    --bg-elevated: #FBFAF7;
    --surface: #FFFFFF;
    --surface-2: #F9F8F4;
    --surface-sunken: #F1EFE9;
    --surface-inverse: var(--cv-ink-deep);
    --line: #E7E4DC;
    --line-strong: #D5D1C5;
    --line-focus: var(--cv-sage);
    --text: #18203A;
    --text-2: #4A5269;
    --text-3: #7B8194;
    --text-inverse: #F4F6F8;
    --text-accent: var(--cv-sage-strong);
    --link: var(--cv-navy);

    --primary: var(--cv-navy);
    --primary-hover: #1C2F5C;
    --primary-text: #FFFFFF;
    --accent: var(--cv-mint);
    --accent-text: var(--cv-navy);

    --success: var(--cv-sage-strong);
    --success-soft: var(--cv-mint-wash);
    --warning: #A67424;
    --warning-soft: var(--cv-sand-soft);
    --danger: var(--cv-coral);
    --danger-soft: var(--cv-coral-soft);
    --info: var(--cv-slate);
    --info-soft: #E9EDF6;
    /* Rain (Lote 39): the sea blue of the charts — rain bars, calendars, heat strips */
    --rain: #3B78B0;
    --rain-soft: #E3EEF8;

    /* Sidebar is always "night", in both themes */
    --nav-bg: var(--cv-ink-deep);
    --nav-bg-2: #1B2133;
    --nav-text: #C9CFDB;
    --nav-text-strong: #FFFFFF;
    --nav-muted: #7D869B;
    --nav-line: rgba(255, 255, 255, .07);
    --nav-active: rgba(186, 226, 202, .10);

    --cv-logo-ink: var(--cv-navy);
    --cv-logo-accent: var(--cv-sage);
    --cv-logo-sun: var(--cv-mint);

    /* Typography (Notulen Serif → Fraunces · Clarendon → Fraunces text ·
       interface → Inter · stickers "Comida de Origem" → Calistoga) */
    --font-display: 'Fraunces', 'Iowan Old Style', Georgia, serif;
    --font-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    --font-sticker: 'Calistoga', 'Fraunces', Georgia, serif;
    --font-mono: ui-monospace, 'SFMono-Regular', 'Cascadia Mono', Consolas, monospace;

    --fs-xs: .75rem;     /* 12 */
    --fs-sm: .8125rem;   /* 13 */
    --fs-md: .875rem;    /* 14 — interface base */
    --fs-lg: 1rem;       /* 16 */
    --fs-xl: 1.125rem;   /* 18 */
    --fs-2xl: 1.375rem;  /* 22 */
    --fs-3xl: 1.75rem;   /* 28 */
    --fs-4xl: 2.25rem;   /* 36 */
    --fs-5xl: 3rem;      /* 48 */
    --fs-6xl: 4rem;      /* 64 */
    --tracking-caps: .22em;  /* the manual's widely spaced caps */
    --lh-tight: 1.12;
    --lh-snug: 1.3;
    --lh-body: 1.55;

    /* Space (4 px grid) */
    --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; --sp-6: 24px;
    --sp-7: 32px; --sp-8: 40px; --sp-9: 48px; --sp-10: 64px; --sp-11: 80px;

    /* Shape */
    --r-xs: 6px; --r-sm: 8px; --r-md: 12px; --r-lg: 16px; --r-xl: 22px; --r-2xl: 28px; --r-pill: 999px;

    /* Depth — navy-tinted, layered */
    --shadow-xs: 0 1px 2px rgba(20, 35, 70, .06);
    --shadow-sm: 0 1px 2px rgba(20, 35, 70, .05), 0 2px 6px rgba(20, 35, 70, .05);
    --shadow-md: 0 2px 4px rgba(20, 35, 70, .04), 0 8px 24px rgba(20, 35, 70, .08);
    --shadow-lg: 0 4px 8px rgba(20, 35, 70, .05), 0 24px 56px rgba(20, 35, 70, .14);
    --shadow-focus: 0 0 0 3px rgba(108, 156, 127, .35);
    --ring: 0 0 0 1px var(--line);

    /* Motion */
    --ease: cubic-bezier(.2, .7, .2, 1);
    --ease-out: cubic-bezier(.16, 1, .3, 1);
    --t-fast: 140ms; --t-med: 240ms; --t-slow: 420ms;

    /* Layout */
    --nav-w: 272px;
    --topbar-h: 68px;
    --content-max: 1240px;
    --field-h: 44px;

    color-scheme: light;
  }

  /* Theme: night (toggle in the top bar; follows the system by default) */
  :root[data-theme="dark"] {
    --bg: #0E1320;
    --bg-elevated: #121828;
    --surface: #161D2D;
    --surface-2: #1A2234;
    --surface-sunken: #111725;
    --line: #263049;
    --line-strong: #34405E;
    --text: #EEF1F6;
    --text-2: #B4BCCC;
    --text-3: #818AA0;
    --text-accent: var(--cv-mint);
    --link: var(--cv-mint);
    --primary: var(--cv-mint);
    --primary-hover: #CDEBD9;
    --primary-text: var(--cv-ink-deep);
    --accent: var(--cv-mint);
    --success: #8CC3A1;
    --success-soft: rgba(140, 195, 161, .12);
    --warning: #DDB06B;
    --warning-soft: rgba(221, 176, 107, .12);
    --danger: #E58A76;
    --danger-soft: rgba(229, 138, 118, .12);
    --info: #9DB0DA;
    --info-soft: rgba(157, 176, 218, .12);
    --rain: #7FB2E0;
    --rain-soft: rgba(127, 178, 224, .14);
    --nav-bg: #0A0F1A;
    --nav-bg-2: #111827;
    --cv-logo-ink: #FFFFFF;
    --cv-logo-accent: var(--cv-mint);
    --shadow-xs: 0 1px 2px rgba(0, 0, 0, .3);
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, .35);
    --shadow-md: 0 8px 24px rgba(0, 0, 0, .35);
    --shadow-lg: 0 24px 56px rgba(0, 0, 0, .5);
    color-scheme: dark;
  }
}

/* ─────────────────────────────── 2. BASE ─────────────────────────────── */
@layer base {
  *, *::before, *::after { box-sizing: border-box; }
  html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
  html, body { margin: 0; }
  body {
    background: var(--bg);
    color: var(--text);
    font-family: var(--font-sans);
    font-size: var(--fs-md);
    line-height: var(--lh-body);
    font-feature-settings: 'cv11', 'ss01', 'tnum' 0;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    min-height: 100vh;
  }
  h1, h2, h3, h4 { margin: 0; font-family: var(--font-display); font-weight: 650; letter-spacing: -.01em; line-height: var(--lh-tight); color: var(--text); font-variation-settings: 'SOFT' 40, 'WONK' 0, 'opsz' 72; }
  h1 { font-size: var(--fs-4xl); font-weight: 700; }
  h2 { font-size: var(--fs-2xl); }
  h3 { font-size: var(--fs-xl); }
  h4 { font-size: var(--fs-lg); }
  p { margin: 0; }
  a { color: var(--link); text-decoration: none; text-underline-offset: 3px; }
  a:hover { text-decoration: underline; }
  img, svg { display: block; max-width: 100%; }
  button, input, select, textarea { font: inherit; color: inherit; }
  button { cursor: pointer; }
  ::selection { background: var(--cv-mint); color: var(--cv-navy); }
  :focus-visible { outline: 2px solid var(--line-focus); outline-offset: 2px; border-radius: var(--r-xs); }
  [hidden] { display: none !important; }
  hr { border: 0; border-top: 1px solid var(--line); margin: var(--sp-6) 0; }
  code, kbd, .mono { font-family: var(--font-mono); font-size: .92em; }
  .num { font-variant-numeric: tabular-nums; }

  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; scroll-behavior: auto !important; }
  }
}

/* ─────────────────────────────── 3. LAYOUT ─────────────────────────────── */
@layer layout {
  /* App shell: night sidebar + paper workspace */
  .cv-shell { display: grid; grid-template-columns: var(--nav-w) minmax(0, 1fr); min-height: 100vh; }
  .cv-main { display: flex; flex-direction: column; min-width: 0; }
  .cv-content { width: 100%; max-width: var(--content-max); margin: 0 auto; padding: var(--sp-7) var(--sp-8) var(--sp-10); }
  .cv-content--narrow { max-width: 920px; }
  .cv-content:focus { outline: none; }
  @media (min-width: 961px) { .cv-shell { background: linear-gradient(to right, var(--nav-bg) var(--nav-w), var(--bg) var(--nav-w)); } }

  .cv-stack { display: flex; flex-direction: column; gap: var(--sp-4); }
  .cv-stack--lg { gap: var(--sp-6); }
  .cv-stack--xl { gap: var(--sp-8); }
  .cv-row { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; }
  .cv-row--between { justify-content: space-between; }
  .cv-row--end { justify-content: flex-end; }
  .cv-grid { display: grid; gap: var(--sp-5); }
  .cv-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cv-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .cv-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .cv-grid--sidebar { grid-template-columns: minmax(0, 1fr) 340px; align-items: start; }
  .cv-span-2 { grid-column: span 2; }
  .cv-span-all { grid-column: 1 / -1; }

  @media (max-width: 1180px) {
    .cv-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .cv-grid--sidebar { grid-template-columns: minmax(0, 1fr); }
  }
  @media (max-width: 960px) {
    .cv-shell { grid-template-columns: minmax(0, 1fr); }
    .cv-content { padding: var(--sp-5) var(--sp-4) var(--sp-9); }
    .cv-grid--2, .cv-grid--3 { grid-template-columns: minmax(0, 1fr); }
    .cv-span-2 { grid-column: auto; }
  }
}

/* ─────────────────────────────── 4. COMPONENTS ─────────────────────────────── */
@layer components {

  /* 4.1 Logo */
  .cv-logo { height: auto; }
  .cv-logo__ink { fill: var(--cv-logo-ink); }
  .cv-logo__accent { fill: var(--cv-logo-accent); }
  .cv-logo__sun { stroke: var(--cv-logo-sun); }
  .on-dark { --cv-logo-ink: #FFFFFF; --cv-logo-accent: var(--cv-mint); --cv-logo-sun: var(--cv-mint); }

  /* 4.2 Eyebrow & display text */
  .cv-eyebrow { font-family: var(--font-sans); font-size: var(--fs-xs); font-weight: 600; letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--text-accent); }
  .cv-display { font-family: var(--font-display); font-weight: 700; font-size: clamp(2rem, 3.2vw, var(--fs-5xl)); line-height: 1.04; letter-spacing: -.02em; font-variation-settings: 'SOFT' 50, 'WONK' 0, 'opsz' 144; }
  .cv-display em { font-style: italic; font-weight: 500; color: var(--text-accent); }
  .cv-lede { font-size: var(--fs-lg); color: var(--text-2); line-height: var(--lh-body); max-width: 62ch; }
  .cv-muted { color: var(--text-3); }
  .cv-sticker { font-family: var(--font-sticker); letter-spacing: -.01em; line-height: .95; }

  /* 4.3 Buttons */
  .cv-btn {
    --btn-bg: var(--surface); --btn-fg: var(--text); --btn-bd: var(--line-strong); --btn-bg-hover: var(--surface-2);
    display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2);
    height: 40px; padding: 0 var(--sp-5); border-radius: var(--r-pill);
    border: 1px solid var(--btn-bd); background: var(--btn-bg); color: var(--btn-fg);
    font-weight: 600; font-size: var(--fs-md); letter-spacing: .005em; white-space: nowrap;
    transition: background var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease), color var(--t-fast);
    position: relative; user-select: none; text-decoration: none !important;
  }
  .cv-btn:hover { background: var(--btn-bg-hover); }
  .cv-btn:active { transform: translateY(1px); }
  .cv-btn:focus-visible { outline: none; box-shadow: var(--shadow-focus); }
  .cv-btn svg { width: 18px; height: 18px; flex: none; }
  .cv-btn--primary { --btn-bg: var(--primary); --btn-fg: var(--primary-text); --btn-bd: var(--primary); --btn-bg-hover: var(--primary-hover); box-shadow: 0 1px 0 rgba(255,255,255,.08) inset, var(--shadow-sm); }
  .cv-btn--accent { --btn-bg: var(--cv-mint); --btn-fg: var(--cv-navy); --btn-bd: var(--cv-mint); --btn-bg-hover: #CBEAD7; }
  .cv-btn--ghost { --btn-bg: transparent; --btn-bd: transparent; --btn-bg-hover: var(--surface-sunken); --btn-fg: var(--text-2); }
  .cv-btn--danger { --btn-bg: var(--surface); --btn-fg: var(--danger); --btn-bd: color-mix(in srgb, var(--danger) 40%, transparent); --btn-bg-hover: var(--danger-soft); }
  .cv-btn--lg { height: var(--field-h); padding: 0 var(--sp-6); font-size: var(--fs-lg); }
  .cv-btn--sm { height: 32px; padding: 0 var(--sp-4); font-size: var(--fs-sm); }
  .cv-btn--block { width: 100%; }
  .cv-btn--icon { width: 40px; padding: 0; }
  .cv-btn--icon.cv-btn--sm { width: 32px; }
  .cv-btn[disabled], .cv-btn[aria-disabled="true"] { opacity: .5; pointer-events: none; }
  .cv-btn.is-loading { color: transparent !important; pointer-events: none; }
  .cv-btn.is-loading::after {
    content: ''; position: absolute; width: 18px; height: 18px; border-radius: 50%;
    border: 2px solid var(--btn-fg); border-right-color: transparent; animation: cv-spin .7s linear infinite;
  }

  /* 4.4 Fields */
  .cv-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
  .cv-label { font-size: var(--fs-sm); font-weight: 600; color: var(--text-2); display: flex; align-items: center; gap: var(--sp-2); }
  .cv-label__opt { font-weight: 400; color: var(--text-3); }
  .cv-input, .cv-select, .cv-textarea {
    width: 100%; height: var(--field-h); padding: 0 var(--sp-4);
    background: var(--surface); color: var(--text);
    border: 1px solid var(--line-strong); border-radius: var(--r-md);
    transition: border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease), background var(--t-fast);
    font-size: var(--fs-md);
  }
  .cv-textarea { height: auto; min-height: 104px; padding: var(--sp-3) var(--sp-4); resize: vertical; line-height: var(--lh-body); }
  .cv-select { appearance: none; padding-right: 40px; background-image: linear-gradient(45deg, transparent 50%, var(--text-3) 50%), linear-gradient(135deg, var(--text-3) 50%, transparent 50%); background-position: calc(100% - 20px) 19px, calc(100% - 15px) 19px; background-size: 5px 5px; background-repeat: no-repeat; }
  .cv-input::placeholder, .cv-textarea::placeholder { color: var(--text-3); opacity: .8; }
  .cv-input:hover, .cv-select:hover, .cv-textarea:hover { border-color: color-mix(in srgb, var(--line-strong) 60%, var(--text-3)); }
  .cv-input:focus, .cv-select:focus, .cv-textarea:focus { outline: none; border-color: var(--line-focus); box-shadow: var(--shadow-focus); }
  .cv-input--readonly { display: flex; align-items: center; background: var(--surface-sunken); color: var(--text); font-weight: 650; border-color: transparent; }
  .cv-input[readonly] { background: var(--surface-sunken); color: var(--text-2); }
  .cv-input--mono { font-family: var(--font-mono); letter-spacing: .04em; }
  .cv-hint { font-size: var(--fs-xs); color: var(--text-3); }
  .cv-error { font-size: var(--fs-xs); color: var(--danger); font-weight: 500; }
  .cv-field.has-error .cv-input, .cv-field.has-error .cv-select, .cv-field.has-error .cv-textarea { border-color: var(--danger); box-shadow: 0 0 0 3px color-mix(in srgb, var(--danger) 16%, transparent); }
  .cv-input-group { position: relative; display: flex; align-items: center; }
  .cv-input-group .cv-input { padding-right: 48px; }
  .cv-input-group .cv-input--lead { padding-left: 42px; padding-right: var(--sp-4); }
  .cv-input-group__lead { position: absolute; left: 14px; color: var(--text-3); pointer-events: none; }
  .cv-input-group__lead svg { width: 18px; height: 18px; }
  .cv-input-group__btn { position: absolute; right: 4px; height: 36px; width: 40px; border: 0; background: transparent; color: var(--text-3); border-radius: var(--r-sm); display: grid; place-items: center; }
  .cv-input-group__btn:hover { color: var(--text); background: var(--surface-sunken); }
  .cv-input-group__btn svg { width: 18px; height: 18px; }
  .cv-input-group__btn--text { width: auto; padding: 0 var(--sp-3); font-size: var(--fs-sm); font-weight: 600; color: var(--text-accent); }

  .cv-form-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--sp-5) var(--sp-4); }
  .cv-form-grid > * { grid-column: span 12; }
  .cv-col-2 { grid-column: span 2 !important; } .cv-col-3 { grid-column: span 3 !important; } .cv-col-4 { grid-column: span 4 !important; }
  .cv-col-5 { grid-column: span 5 !important; } .cv-col-6 { grid-column: span 6 !important; } .cv-col-7 { grid-column: span 7 !important; }
  .cv-col-8 { grid-column: span 8 !important; } .cv-col-9 { grid-column: span 9 !important; }
  @media (max-width: 760px) { .cv-form-grid > * { grid-column: span 12 !important; } }

  /* OTP — six boxes */
  .cv-otp { display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; }
  .cv-otp input {
    width: 100%; aspect-ratio: 1 / 1.12; max-height: 64px; text-align: center;
    font-family: var(--font-display); font-weight: 650; font-size: 1.75rem; font-variant-numeric: tabular-nums;
    border: 1px solid var(--line-strong); border-radius: var(--r-md); background: var(--surface);
    transition: border-color var(--t-fast), box-shadow var(--t-fast), transform var(--t-fast);
    caret-color: var(--cv-sage);
  }
  .cv-otp input:focus { outline: none; border-color: var(--line-focus); box-shadow: var(--shadow-focus); transform: translateY(-1px); }
  .cv-otp input.is-filled { border-color: var(--cv-navy); }
  .cv-otp.is-error input { border-color: var(--danger); animation: cv-shake .36s var(--ease); }

  /* Switch */
  .cv-switch { display: inline-flex; align-items: center; gap: var(--sp-3); cursor: pointer; user-select: none; }
  .cv-switch input { position: absolute; opacity: 0; width: 1px; height: 1px; }
  .cv-switch__track { width: 40px; height: 24px; border-radius: var(--r-pill); background: var(--line-strong); position: relative; transition: background var(--t-med) var(--ease); flex: none; }
  .cv-switch__track::after { content: ''; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: var(--shadow-sm); transition: transform var(--t-med) var(--ease-out); }
  .cv-switch input:checked + .cv-switch__track { background: var(--cv-sage); }
  .cv-switch input:checked + .cv-switch__track::after { transform: translateX(16px); }
  .cv-switch input:focus-visible + .cv-switch__track { box-shadow: var(--shadow-focus); }

  /* Checkbox */
  .cv-check { display: inline-flex; align-items: center; gap: var(--sp-2); cursor: pointer; }
  .cv-check input { appearance: none; width: 18px; height: 18px; border: 1.5px solid var(--line-strong); border-radius: 5px; display: grid; place-items: center; background: var(--surface); margin: 0; transition: all var(--t-fast); }
  .cv-check input:checked { background: var(--cv-navy); border-color: var(--cv-navy); }
  .cv-check input:checked::after { content: ''; width: 9px; height: 5px; border: 2px solid #fff; border-top: 0; border-right: 0; transform: rotate(-45deg) translate(1px, -1px); }
  :root[data-theme="dark"] .cv-check input:checked { background: var(--cv-mint); border-color: var(--cv-mint); }
  :root[data-theme="dark"] .cv-check input:checked::after { border-color: var(--cv-ink-deep); }

  /* Segmented control */
  .cv-segmented { display: inline-flex; padding: 4px; background: var(--surface-sunken); border-radius: var(--r-pill); gap: 2px; border: 1px solid var(--line); }
  .cv-segmented button { white-space: nowrap; border: 0; background: transparent; height: 32px; padding: 0 var(--sp-4); border-radius: var(--r-pill); font-weight: 600; font-size: var(--fs-sm); color: var(--text-2); display: inline-flex; align-items: center; gap: 6px; transition: all var(--t-fast) var(--ease); }
  .cv-segmented button svg { width: 16px; height: 16px; }
  .cv-segmented button[aria-pressed="true"], .cv-segmented button[aria-selected="true"] { background: var(--surface); color: var(--text); box-shadow: var(--shadow-sm); }
  .cv-segmented--level button { min-width: 78px; justify-content: center; padding: 0 var(--sp-3); }
  .cv-segmented--level button[data-level="2"][aria-pressed="true"] { background: var(--cv-navy); color: #fff; }
  .cv-segmented--level button[data-level="1"][aria-pressed="true"] { background: var(--cv-mint); color: var(--cv-navy); }
  :root[data-theme="dark"] .cv-segmented--level button[data-level="2"][aria-pressed="true"] { background: var(--cv-mint); color: var(--cv-ink-deep); }
  :root[data-theme="dark"] .cv-segmented--level button[data-level="1"][aria-pressed="true"] { background: rgba(186, 226, 202, .18); color: var(--cv-mint); }

  /* 4.5 Cards & panels */
  .cv-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-xl); box-shadow: var(--shadow-xs); position: relative; }
  .cv-card__header { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sp-4); padding: var(--sp-6) var(--sp-6) 0; }
  .cv-card__title { font-family: var(--font-display); font-size: var(--fs-xl); font-weight: 650; display: flex; align-items: center; gap: var(--sp-3); }
  .cv-card__title svg { width: 20px; height: 20px; color: var(--text-accent); }
  .cv-card__subtitle { color: var(--text-3); font-size: var(--fs-sm); margin-top: 4px; }
  .cv-card__body { padding: var(--sp-6); }
  .cv-card__footer { padding: var(--sp-4) var(--sp-6); border-top: 1px solid var(--line); display: flex; justify-content: flex-end; gap: var(--sp-3); background: var(--surface-2); border-radius: 0 0 var(--r-xl) var(--r-xl); }
  .cv-card--flush .cv-card__body { padding: 0; }
  .cv-card--interactive { transition: transform var(--t-med) var(--ease), box-shadow var(--t-med) var(--ease), border-color var(--t-med); }
  .cv-card--interactive:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); border-color: var(--line-strong); }
  .cv-card--inverse { background: var(--surface-inverse); color: var(--text-inverse); border-color: transparent; }
  .cv-card--inverse .cv-card__subtitle { color: #9AA3B6; }
  .cv-card--inverse h2, .cv-card--inverse h3, .cv-text-inverse { color: #fff; }
  .cv-card--inverse .cv-kv dt { color: #8F99AE; }

  .cv-section-title { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-4); margin-bottom: var(--sp-4); }
  .cv-section-title h2 { font-size: var(--fs-xl); }

  /* 4.6 Badges, tags, status dots */
  .cv-badge { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 10px; border-radius: var(--r-pill); font-size: var(--fs-xs); font-weight: 600; letter-spacing: .01em; background: var(--surface-sunken); color: var(--text-2); white-space: nowrap; border: 1px solid transparent; }
  .cv-badge svg { width: 13px; height: 13px; }
  .cv-badge--success { background: var(--success-soft); color: var(--success); }
  .cv-badge--warning { background: var(--warning-soft); color: var(--warning); }
  .cv-badge--danger { background: var(--danger-soft); color: var(--danger); }
  .cv-badge--info { background: var(--info-soft); color: var(--info); }
  .cv-badge--navy { background: var(--cv-navy); color: #fff; }
  .cv-badge--outline { background: transparent; border-color: var(--line-strong); }
  .cv-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--text-3); flex: none; }
  .cv-dot--ok { background: var(--cv-sage); box-shadow: 0 0 0 3px color-mix(in srgb, var(--cv-sage) 25%, transparent); }
  .cv-dot--warn { background: var(--cv-sand); }
  .cv-dot--off { background: var(--cv-coral); }
  .cv-dot--pulse { animation: cv-pulse 2.4s var(--ease) infinite; }

  /* 4.7 Avatar */
  .cv-avatar { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; flex: none; background: var(--cv-mint); color: var(--cv-navy); font-weight: 700; font-size: var(--fs-sm); letter-spacing: .02em; }
  .cv-avatar--sm { width: 32px; height: 32px; font-size: var(--fs-xs); }
  .cv-avatar--lg { width: 56px; height: 56px; font-size: var(--fs-lg); }
  .cv-avatar--navy { background: var(--cv-slate); color: #fff; }
  .cv-avatar--baptiste { background: radial-gradient(120% 120% at 30% 20%, #253A68 0%, var(--cv-navy) 55%, #0E1830 100%); color: var(--cv-mint); position: relative; overflow: hidden; font-family: var(--font-display); font-weight: 700; font-size: 1.35rem; }
  .cv-avatar--baptiste::after { content: ''; position: absolute; inset: -40%; background: repeating-linear-gradient(-45deg, rgba(186, 226, 202, .14) 0 1px, transparent 1px 5px); transform: translate(38%, -38%); border-radius: 50%; width: 70%; height: 70%; }

  /* 4.8 Tables */
  .cv-table-wrap { overflow-x: auto; border-radius: var(--r-lg); }
  .cv-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: var(--fs-md); }
  .cv-table th { text-align: left; font-size: var(--fs-xs); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--text-3); padding: var(--sp-3) var(--sp-4); border-bottom: 1px solid var(--line); background: var(--surface-2); white-space: nowrap; }
  .cv-table td { padding: var(--sp-4); border-bottom: 1px solid var(--line); vertical-align: middle; }
  .cv-table tbody tr { transition: background var(--t-fast); }
  .cv-table tbody tr:hover { background: var(--surface-2); }
  .cv-table tbody tr:last-child td { border-bottom: 0; }
  .cv-table__actions { text-align: right; white-space: nowrap; }
  .cv-table__primary { font-weight: 600; color: var(--text); }
  .cv-table__secondary { font-size: var(--fs-sm); color: var(--text-3); }
  .cv-table tr.is-muted td { opacity: .55; }

  /* 4.9 Tabs (underline) */
  .cv-tabs { display: flex; gap: var(--sp-6); border-bottom: 1px solid var(--line); margin-bottom: var(--sp-6); overflow-x: auto; scrollbar-width: none; }
  .cv-tabs a, .cv-tabs button { border: 0; background: none; padding: var(--sp-3) 0; font-weight: 600; color: var(--text-3); position: relative; white-space: nowrap; text-decoration: none; display: inline-flex; align-items: center; gap: var(--sp-2); }
  .cv-tabs a svg, .cv-tabs button svg { width: 16px; height: 16px; }
  .cv-tabs a:hover, .cv-tabs button:hover { color: var(--text); }
  .cv-tabs [aria-current="page"], .cv-tabs [aria-selected="true"] { color: var(--text); }
  .cv-tabs [aria-current="page"]::after, .cv-tabs [aria-selected="true"]::after { content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; border-radius: 2px; background: var(--cv-sage); }

  .cv-toolbar { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); flex-wrap: wrap; padding: var(--sp-5) var(--sp-6) 0; }
  .cv-toolbar__filters { display: flex; gap: var(--sp-3); flex-wrap: wrap; flex: 1; }
  .cv-toolbar__filters .cv-input-group { flex: 1; min-width: 240px; max-width: 380px; }
  .cv-toolbar__filters .cv-select { width: 220px; }

  /* 4.10 Callouts */
  .cv-callout { display: flex; gap: var(--sp-3); padding: var(--sp-4) var(--sp-5); border-radius: var(--r-lg); background: var(--info-soft); color: var(--text); border: 1px solid color-mix(in srgb, var(--info) 18%, transparent); font-size: var(--fs-md); }
  .cv-callout svg { width: 20px; height: 20px; flex: none; color: var(--info); margin-top: 1px; }
  .cv-callout--success { background: var(--success-soft); border-color: color-mix(in srgb, var(--success) 20%, transparent); }
  .cv-callout--success svg { color: var(--success); }
  .cv-callout--warning { background: var(--warning-soft); border-color: color-mix(in srgb, var(--warning) 22%, transparent); }
  .cv-callout--warning svg { color: var(--warning); }
  .cv-callout--danger { background: var(--danger-soft); border-color: color-mix(in srgb, var(--danger) 22%, transparent); }
  .cv-callout--danger svg { color: var(--danger); }
  .cv-callout__title { font-weight: 650; margin-bottom: 2px; }

  /* 4.11 Toasts */
  .cv-toasts { position: fixed; z-index: 90; right: var(--sp-6); bottom: var(--sp-6); display: flex; flex-direction: column; gap: var(--sp-3); pointer-events: none; }
  .cv-toast { pointer-events: auto; min-width: 300px; max-width: 420px; display: flex; gap: var(--sp-3); align-items: flex-start; padding: var(--sp-4) var(--sp-5); border-radius: var(--r-lg); background: var(--cv-ink-deep); color: #EEF1F6; box-shadow: var(--shadow-lg); animation: cv-toast-in var(--t-slow) var(--ease-out); font-size: var(--fs-md); }
  .cv-toast svg { width: 20px; height: 20px; flex: none; color: var(--cv-mint); margin-top: 1px; }
  .cv-toast--error svg { color: #F2A08F; }
  .cv-toast.is-leaving { animation: cv-toast-out var(--t-med) var(--ease) forwards; }

  /* 4.12 Dialog */
  .cv-dialog { border: 0; padding: 0; border-radius: var(--r-2xl); background: var(--surface); color: var(--text); box-shadow: var(--shadow-lg); width: min(560px, calc(100vw - 32px)); max-height: calc(100vh - 48px); }
  .cv-dialog--wide { width: min(760px, calc(100vw - 32px)); }
  .cv-dialog::backdrop { background: rgba(14, 19, 32, .55); backdrop-filter: blur(3px); }
  .cv-dialog[open] { animation: cv-dialog-in var(--t-slow) var(--ease-out); }
  .cv-dialog__header { padding: var(--sp-6) var(--sp-7) var(--sp-2); display: flex; justify-content: space-between; gap: var(--sp-4); align-items: flex-start; }
  .cv-dialog__header h2 { font-size: var(--fs-2xl); }
  .cv-dialog__body { padding: var(--sp-4) var(--sp-7) var(--sp-6); overflow-y: auto; max-height: calc(100vh - 220px); }
  .cv-dialog__footer { padding: var(--sp-4) var(--sp-7); border-top: 1px solid var(--line); display: flex; justify-content: flex-end; gap: var(--sp-3); background: var(--surface-2); }

  /* 4.13 Skeleton & spinner */
  .cv-skeleton { background: linear-gradient(90deg, var(--surface-sunken) 0%, color-mix(in srgb, var(--surface-sunken) 40%, var(--surface)) 50%, var(--surface-sunken) 100%); background-size: 200% 100%; animation: cv-shimmer 1.4s linear infinite; border-radius: var(--r-sm); min-height: 12px; }
  .cv-skeleton--text { height: 12px; margin: 8px 0; }
  .cv-spinner { width: 20px; height: 20px; border-radius: 50%; border: 2px solid var(--line-strong); border-top-color: var(--cv-sage); animation: cv-spin .8s linear infinite; }

  /* 4.14 Empty state */
  .cv-empty { text-align: center; padding: var(--sp-10) var(--sp-6); color: var(--text-3); }
  .cv-empty__art { width: 120px; margin: 0 auto var(--sp-5); color: var(--cv-sage); opacity: .9; }
  .cv-empty h3 { color: var(--text); margin-bottom: var(--sp-2); }

  /* 4.15 Progress ring */
  .cv-ring { width: 64px; height: 64px; transform: rotate(-90deg); }
  .cv-ring__track { stroke: var(--line); }
  .cv-ring__value { stroke: var(--cv-sage); stroke-linecap: round; transition: stroke-dashoffset 900ms var(--ease-out); }

  /* 4.16 Key/value list */
  .cv-kv { display: grid; grid-template-columns: max-content 1fr; gap: var(--sp-3) var(--sp-6); font-size: var(--fs-md); }
  .cv-kv dt { color: var(--text-3); }
  .cv-kv dd { margin: 0; font-weight: 500; }

  /* 4.17 Divider with wave (brand pattern) */
  .cv-wave-divider { height: 14px; color: var(--cv-mint); opacity: .9; }

  /* 4.18 Tooltip (CSS only) */
  [data-tip] { position: relative; }
  [data-tip]:hover::after, [data-tip]:focus-visible::after {
    content: attr(data-tip); position: absolute; left: 50%; bottom: calc(100% + 8px); transform: translateX(-50%);
    background: var(--cv-ink-deep); color: #fff; font-size: var(--fs-xs); font-weight: 500; padding: 6px 10px; border-radius: var(--r-sm); white-space: nowrap; z-index: 50; box-shadow: var(--shadow-md); pointer-events: none;
  }

  /* 4.19 Recovery codes */
  .cv-codes { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-2) var(--sp-6); padding: var(--sp-5); border-radius: var(--r-lg); background: var(--surface-sunken); font-family: var(--font-mono); font-size: var(--fs-lg); letter-spacing: .06em; }

  /* 4.20 Patterns — waves of the manual */
  .cv-pattern-waves { background-image: url('/img/pattern-waves.svg'); background-size: 220px auto; background-repeat: repeat; }

  /* 4.21 Icons (js/core/icons.js) */
  .cv-icon { width: 20px; height: 20px; flex: none; }

  /* 4.22 Weather illustrations (weatherIcon(), the hatched sun of the logo) */
  .cv-wx { width: 64px; height: 64px; overflow: visible; }
  .cv-wx .wx-sun-disc { fill: color-mix(in srgb, var(--cv-mint) 35%, transparent); }
  .cv-wx .wx-sun-hatch { fill: none; stroke: var(--cv-sage); stroke-width: 1.1; stroke-linecap: round; }
  .cv-wx .wx-sun-ring { fill: none; stroke: var(--cv-sage); stroke-width: 1.6; }
  .cv-wx .wx-rays { fill: none; stroke: var(--cv-sand); stroke-width: 2; stroke-linecap: round; }
  .cv-wx .wx-cloud { fill: var(--surface); stroke: var(--cv-navy); stroke-width: 2; stroke-linejoin: round; }
  .cv-wx .wx-cloud--dark { fill: var(--cv-slate); }
  .cv-wx .wx-cloud-back { fill: var(--cv-mint-soft); stroke: var(--cv-sage); stroke-width: 1.6; }
  .cv-wx .wx-drop { fill: none; stroke: var(--cv-sage); stroke-width: 2.4; stroke-linecap: round; }
  .cv-wx .wx-bolt { fill: var(--cv-sand); stroke: var(--cv-navy); stroke-width: 1.4; stroke-linejoin: round; }
  .cv-wx .wx-fog { fill: none; stroke: var(--text-3); stroke-width: 2.4; stroke-linecap: round; }
  :root[data-theme="dark"] .cv-wx .wx-cloud { fill: var(--surface-2); stroke: var(--cv-mint); }
  .cv-hero .cv-wx .wx-cloud, .on-dark .cv-wx .wx-cloud { fill: rgba(255, 255, 255, .08); stroke: #fff; }
  .cv-hero .cv-wx .wx-sun-ring, .cv-hero .cv-wx .wx-sun-hatch { stroke: var(--cv-mint); }
}

/* ─────────────────────────────── 5. VIEWS ─────────────────────────────── */
@layer views {

  /* 5.1 Sidebar */
  .cv-nav { position: sticky; top: 0; height: 100vh; background: var(--nav-bg); color: var(--nav-text); display: flex; flex-direction: column; overflow: hidden; z-index: 30; }
  .cv-nav::after { /* the waves at the bottom of the sidebar */
    content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 180px; pointer-events: none;
    background: url('/img/pattern-waves-night.svg') bottom left / 280px auto repeat-x; opacity: .9;
    mask-image: linear-gradient(to top, #000 0%, transparent 100%); -webkit-mask-image: linear-gradient(to top, #000 0%, transparent 100%);
  }
  .cv-nav__brand { padding: var(--sp-6) var(--sp-6) var(--sp-5); display: flex; align-items: center; justify-content: space-between; }
  .cv-nav__brand .cv-logo { width: 156px; }
  .cv-nav__scroll { flex: 1; overflow-y: auto; padding: var(--sp-2) var(--sp-4) var(--sp-6); position: relative; z-index: 1; scrollbar-width: thin; scrollbar-color: #2A3348 transparent; }
  .cv-nav__group { margin-top: var(--sp-5); }
  .cv-nav__group-title { font-size: 11px; font-weight: 600; letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--nav-muted); padding: 0 var(--sp-3) var(--sp-2); }
  .cv-nav__link { display: flex; align-items: center; gap: var(--sp-3); height: 42px; padding: 0 var(--sp-3); border-radius: var(--r-md); color: var(--nav-text); font-weight: 500; text-decoration: none !important; position: relative; transition: background var(--t-fast), color var(--t-fast); }
  .cv-nav__link svg { width: 19px; height: 19px; flex: none; opacity: .85; }
  .cv-nav__link:hover { background: rgba(255, 255, 255, .04); color: var(--nav-text-strong); }
  .cv-nav__link[aria-current="page"] { background: var(--nav-active); color: var(--nav-text-strong); }
  .cv-nav__link[aria-current="page"] svg { color: var(--cv-mint); opacity: 1; }
  .cv-nav__link[aria-current="page"]::before { content: ''; position: absolute; left: -16px; top: 10px; bottom: 10px; width: 3px; border-radius: 0 3px 3px 0; background: var(--cv-mint); }
  .cv-nav__link .cv-badge { margin-left: auto; height: 20px; background: rgba(186, 226, 202, .14); color: var(--cv-mint); }
  .cv-nav__settings { position: relative; z-index: 1; padding: var(--sp-2) var(--sp-4) var(--sp-3); }
  .cv-nav__settings .cv-nav__link[aria-current="page"]::before { left: -16px; }
  /* The single Configurações screen: section headers inside it are second level */
  .cv-settings__tabs { margin-top: calc(var(--sp-2) * -1); }
  .cv-settings .cv-page .cv-page-header { margin-bottom: var(--sp-6); align-items: center; }
  .cv-settings .cv-page .cv-page-header h1 { font-size: var(--fs-3xl); margin-top: 0; }
  .cv-settings .cv-page .cv-page-header .cv-eyebrow { display: none; }
  .cv-nav__footer { position: relative; z-index: 1; padding: var(--sp-4); border-top: 1px solid var(--nav-line); background: color-mix(in srgb, var(--nav-bg) 80%, transparent); backdrop-filter: blur(6px); }
  .cv-nav__user { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-2); border-radius: var(--r-md); }
  .cv-nav__user-name { color: #fff; font-weight: 600; font-size: var(--fs-md); line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .cv-nav__user-role { color: var(--nav-muted); font-size: var(--fs-xs); }
  .cv-nav__user .cv-btn { margin-left: auto; --btn-fg: var(--nav-muted); --btn-bg-hover: rgba(255, 255, 255, .06); }
  .cv-nav__user .cv-btn:hover { color: #fff; }
  .cv-nav__close { display: none; }

  /* 5.2 Top bar */
  .cv-topbar { position: sticky; top: 0; z-index: 20; height: var(--topbar-h); display: flex; align-items: center; gap: var(--sp-4); padding: 0 var(--sp-8); background: color-mix(in srgb, var(--bg) 82%, transparent); backdrop-filter: saturate(1.4) blur(14px); border-bottom: 1px solid color-mix(in srgb, var(--line) 70%, transparent); }
  .cv-topbar__menu { display: none; }
  .cv-topbar__crumbs { display: flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-sm); color: var(--text-3); min-width: 0; }
  .cv-topbar__crumbs strong { color: var(--text); font-weight: 600; }
  .cv-topbar__crumbs svg { width: 14px; height: 14px; }
  .cv-topbar__right { margin-left: auto; display: flex; align-items: center; gap: var(--sp-2); }
  .cv-topbar__status { display: inline-flex; align-items: center; gap: var(--sp-2); height: 32px; padding: 0 var(--sp-3); border-radius: var(--r-pill); border: 1px solid var(--line); background: var(--surface); font-size: var(--fs-xs); font-weight: 600; color: var(--text-2); }

  @media (max-width: 960px) {
    .cv-nav { position: fixed; inset: 0 auto 0 0; width: min(300px, 86vw); transform: translateX(-102%); transition: transform var(--t-slow) var(--ease-out); box-shadow: var(--shadow-lg); }
    .cv-shell.is-nav-open .cv-nav { transform: none; }
    .cv-shell.is-nav-open::before { content: ''; position: fixed; inset: 0; background: rgba(14, 19, 32, .5); z-index: 25; }
    .cv-nav__close { display: grid; }
    .cv-topbar { padding: 0 var(--sp-4); }
    .cv-topbar__menu { display: inline-flex; }
    .cv-topbar__status { display: none; }
  }

  /* 5.3 Page header */
  .cv-page-header { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--sp-6); margin-bottom: var(--sp-7); flex-wrap: wrap; }
  .cv-page-header h1 { font-size: var(--fs-4xl); margin-top: var(--sp-2); }
  .cv-page-header h1 em { font-style: italic; font-weight: 400; color: var(--text-accent); }
  .cv-page-header p { color: var(--text-2); margin-top: var(--sp-2); max-width: 64ch; }
  .cv-page { animation: cv-page-in var(--t-slow) var(--ease-out); }

  /* 5.4 Login */
  .cv-auth { min-height: 100vh; display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(420px, .92fr); background: var(--bg-elevated); }
  .cv-auth__art { position: relative; overflow: hidden; background: radial-gradient(120% 90% at 85% 0%, #22325E 0%, var(--cv-navy) 38%, var(--cv-ink-deep) 100%); color: #fff; display: flex; flex-direction: column; justify-content: space-between; padding: var(--sp-9) var(--sp-10); isolation: isolate; }
  .cv-auth__art .cv-logo { width: 188px; }
  .cv-auth__hero { position: relative; z-index: 2; max-width: 520px; }
  .cv-auth__hero .cv-eyebrow { color: var(--cv-mint); }
  .cv-auth__title { font-family: var(--font-display); font-weight: 700; font-size: clamp(2.6rem, 4.6vw, 4.4rem); line-height: .98; letter-spacing: -.025em; margin: var(--sp-5) 0 var(--sp-5); color: #fff; font-variation-settings: 'SOFT' 60, 'WONK' 0, 'opsz' 144; }
  .cv-auth__title em { font-style: italic; font-weight: 400; color: var(--cv-mint); }
  .cv-auth__copy { color: #B9C2D4; font-size: var(--fs-lg); max-width: 44ch; }
  .cv-auth__foot { position: relative; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: var(--sp-5); color: #8F99AE; font-size: var(--fs-sm); }
  .cv-auth__foot .cv-sticker { color: var(--cv-mint); font-size: 1.35rem; }
  .cv-auth__boat { position: absolute; z-index: 1; right: 7%; bottom: 15%; width: min(30%, 300px); opacity: .95; --cv-logo-ink: rgba(255, 255, 255, .96); --cv-logo-sun: var(--cv-mint); filter: drop-shadow(0 30px 40px rgba(0, 0, 0, .25)); animation: cv-bob 9s ease-in-out infinite; transform-origin: 50% 90%; }
  .cv-auth__sea { position: absolute; z-index: 1; left: 0; right: 0; bottom: 0; height: 28%; overflow: hidden; }
  .cv-auth__sea svg { max-width: none; position: absolute; bottom: 0; left: 0; width: 200%; height: 100%; animation: cv-sea 26s linear infinite; }
  .cv-auth__sea svg:nth-child(2) { animation-duration: 38s; opacity: .55; bottom: 10px; }
  .cv-auth__panel { display: flex; flex-direction: column; justify-content: center; align-items: center; padding: var(--sp-9) var(--sp-8); position: relative; }
  .cv-auth__card { width: 100%; max-width: 420px; }
  .cv-auth__card h2 { font-size: var(--fs-4xl); font-weight: 700; letter-spacing: -.02em; }
  .cv-auth__card .cv-lede { font-size: var(--fs-md); margin-top: var(--sp-2); }
  .cv-auth__mobile-logo { display: none; width: 170px; margin-bottom: var(--sp-8); }
  .cv-auth__steps { display: flex; gap: 6px; margin-bottom: var(--sp-6); }
  .cv-auth__steps span { height: 4px; flex: 1; border-radius: 4px; background: var(--line); transition: background var(--t-med); }
  .cv-auth__steps span.is-done { background: var(--cv-sage); }
  .cv-auth__steps span.is-current { background: var(--cv-navy); }
  :root[data-theme="dark"] .cv-auth__steps span.is-current { background: var(--cv-mint); }
  .cv-auth__secure { display: flex; align-items: center; justify-content: center; gap: var(--sp-2); margin-top: var(--sp-7); font-size: var(--fs-xs); color: var(--text-3); }
  .cv-auth__secure svg { width: 14px; height: 14px; color: var(--cv-sage); }
  .cv-auth__legal { position: absolute; bottom: var(--sp-6); font-size: var(--fs-xs); color: var(--text-3); }
  .cv-auth__switch { display: flex; justify-content: space-between; align-items: center; margin-top: var(--sp-4); font-size: var(--fs-sm); }
  .cv-linkbtn { border: 0; background: none; padding: 0; color: var(--text-accent); font-weight: 600; font-size: inherit; }
  .cv-linkbtn:hover { text-decoration: underline; }
  .cv-linkbtn[disabled] { color: var(--text-3); text-decoration: none; cursor: default; }
  .cv-pw-rules { display: grid; gap: 6px; margin-top: var(--sp-2); font-size: var(--fs-sm); color: var(--text-3); }
  .cv-pw-rules li { display: flex; align-items: center; gap: var(--sp-2); list-style: none; transition: color var(--t-fast); }
  .cv-pw-rules li svg { width: 14px; height: 14px; opacity: .3; transition: opacity var(--t-fast); }
  .cv-pw-rules li.is-ok svg { opacity: 1; }
  .cv-pw-rules li.is-ok { color: var(--success); }
  .cv-pw-rules ul { margin: 0; padding: 0; display: grid; gap: 6px; }
  .cv-meter { height: 6px; border-radius: 6px; background: var(--line); overflow: hidden; }
  .cv-meter span { display: block; height: 100%; width: 0; border-radius: 6px; background: var(--cv-coral); transition: width var(--t-med) var(--ease), background var(--t-med); }
  .cv-meter[data-score="2"] span { width: 50%; background: var(--cv-sand); }
  .cv-meter[data-score="3"] span { width: 75%; background: var(--cv-sage); }
  .cv-meter[data-score="4"] span { width: 100%; background: var(--cv-sage-strong); }
  .cv-meter[data-score="1"] span { width: 25%; }

  @media (max-width: 1080px) {
    .cv-auth { grid-template-columns: minmax(0, 1fr); }
    .cv-auth__art { display: none; }
    .cv-auth__mobile-logo { display: block; }
  }

  /* 5.5 Início, Radar, Vendas — the day of the house (Lote 39: the Lote 37
     look — navy hero with waves, Fraunces numbers, weather illustrations —
     carrying only information that serves a decision, D-062). */

  /* Hero: navy night with the manual's waves */
  .cv-hero { position: relative; overflow: hidden; border-radius: var(--r-2xl); padding: var(--sp-8) var(--sp-8) var(--sp-7); background: radial-gradient(90% 140% at 100% 0%, #24376A 0%, var(--cv-navy) 42%, var(--cv-ink-deep) 100%); color: #fff; isolation: isolate; box-shadow: var(--shadow-md); }
  .cv-hero::after { content: ''; position: absolute; right: -40px; bottom: -36px; width: 62%; height: 120px; background: url('/img/pattern-waves-night.svg') bottom right / 300px auto repeat-x; opacity: .55; z-index: -1; mask-image: linear-gradient(to left, #000 20%, transparent); -webkit-mask-image: linear-gradient(to left, #000 20%, transparent); }
  .cv-hero__grid { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--sp-8); align-items: end; }
  .cv-hero .cv-eyebrow { color: var(--cv-mint); display: inline-flex; align-items: center; gap: var(--sp-2); }
  .cv-hero .cv-eyebrow svg { width: 15px; height: 15px; }
  .cv-hero__title { font-family: var(--font-display); font-size: clamp(2rem, 3.3vw, 3.1rem); font-weight: 700; line-height: 1.04; letter-spacing: -.022em; margin-top: var(--sp-3); color: #fff; font-variation-settings: 'SOFT' 60, 'WONK' 0, 'opsz' 144; }
  .cv-hero__title em { font-style: italic; font-weight: 400; color: var(--cv-mint); }
  .cv-hero__meta { display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-3); margin-top: var(--sp-5); }
  .cv-pill { display: inline-flex; align-items: center; gap: var(--sp-2); min-height: 32px; padding: 4px var(--sp-3); border-radius: var(--r-pill); font-size: var(--fs-sm); font-weight: 500; background: rgba(255, 255, 255, .07); color: #DCE2EC; border: 1px solid rgba(255, 255, 255, .1); }
  a.cv-pill:hover { background: rgba(255, 255, 255, .12); text-decoration: none; color: #fff; }
  .cv-pill svg { width: 16px; height: 16px; color: var(--cv-mint); }
  .cv-pill b { color: #fff; font-weight: 650; font-variant-numeric: tabular-nums; }
  .cv-pill--rain { background: color-mix(in srgb, var(--cv-coral) 26%, transparent); border-color: color-mix(in srgb, var(--cv-coral) 55%, transparent); color: #FFE3DC; }
  .cv-pill--rain svg { color: #FFB4A3; }
  .cv-pill--wind { background: color-mix(in srgb, var(--cv-sand) 24%, transparent); border-color: color-mix(in srgb, var(--cv-sand) 50%, transparent); color: #FBEBD0; }
  .cv-pill--wind svg { color: var(--cv-sand); }
  .cv-pill--ok { background: color-mix(in srgb, var(--cv-mint) 14%, transparent); border-color: color-mix(in srgb, var(--cv-mint) 35%, transparent); }
  .cv-hero__now { text-align: right; min-width: 210px; }
  .cv-hero__now-temp { font-family: var(--font-display); font-size: 4.25rem; font-weight: 300; line-height: .9; letter-spacing: -.04em; display: flex; align-items: flex-start; justify-content: flex-end; gap: var(--sp-3); }
  .cv-hero__now-temp sup { font-size: 1.6rem; margin-top: 8px; font-weight: 400; color: var(--cv-mint); }
  .cv-hero__now-temp .cv-wx { width: 68px; height: 68px; }
  .cv-hero__now-label { color: #C9D1DF; margin-top: var(--sp-2); font-size: var(--fs-md); }
  .cv-hero__now-sub { color: #8F99AE; font-size: var(--fs-xs); margin-top: 2px; }
  .cv-hero__src { position: absolute; top: var(--sp-5); right: var(--sp-5); }
  .cv-hero .cv-source { color: #8F99AE; }
  .cv-hero .cv-source:hover { color: #fff; background: rgba(255, 255, 255, .08); }

  /* Key figures */
  .cv-kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-5); }
  .cv-kpis--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .cv-kpi { padding: var(--sp-6); display: flex; flex-direction: column; gap: var(--sp-2); min-width: 0; }
  .cv-kpi__label { display: flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-xs); font-weight: 600; letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--text-accent); }
  .cv-kpi__label svg { width: 16px; height: 16px; }
  .cv-kpi__value { font-family: var(--font-display); font-size: 2.6rem; font-weight: 400; letter-spacing: -.03em; line-height: 1.02; font-variant-numeric: tabular-nums; margin-top: var(--sp-1); }
  .cv-kpi__value small { font-family: var(--font-sans); font-size: var(--fs-lg); color: var(--text-3); font-weight: 500; letter-spacing: 0; margin-left: 4px; }
  .cv-kpi__sub { font-size: var(--fs-sm); color: var(--text-2); }
  .cv-kpi__sub b { color: var(--text); font-weight: 650; }
  .cv-kpi__foot { margin-top: auto; padding-top: var(--sp-3); font-size: var(--fs-xs); color: var(--text-3); display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; }
  .cv-kpi__foot a { color: var(--text-accent); font-weight: 600; }
  .cv-delta { display: inline-flex; align-items: center; gap: 4px; font-weight: 650; font-size: var(--fs-sm); padding: 2px 8px; border-radius: var(--r-pill); }
  .cv-delta svg { width: 14px; height: 14px; }
  .cv-delta--up { color: var(--success); background: var(--success-soft); }
  .cv-delta--down { color: var(--danger); background: var(--danger-soft); }
  .cv-delta--wet { color: var(--rain); background: var(--rain-soft); }
  .cv-delta--dry { color: #8A6420; background: var(--cv-sand-soft); }
  :root[data-theme="dark"] .cv-delta--dry { color: var(--cv-sand); }

  /* Rain so far × the normal range (p25–p75) */
  .cv-gauge { position: relative; height: 34px; margin-top: var(--sp-3); }
  .cv-gauge__track { position: absolute; left: 0; right: 0; top: 13px; height: 8px; border-radius: 8px; background: var(--surface-sunken); }
  .cv-gauge__band { position: absolute; top: 13px; height: 8px; left: var(--from); width: var(--w); background: color-mix(in srgb, var(--rain) 28%, transparent); border-radius: 8px; }
  .cv-gauge__mean { position: absolute; top: 8px; height: 18px; width: 2px; left: var(--at); background: var(--rain); border-radius: 2px; }
  .cv-gauge__now { position: absolute; top: 6px; width: 22px; height: 22px; margin-left: -11px; left: var(--at); border-radius: 50%; background: var(--surface); border: 3px solid var(--cv-navy); box-shadow: var(--shadow-sm); }
  :root[data-theme="dark"] .cv-gauge__now { border-color: var(--cv-mint); }
  .cv-gauge__legend { display: flex; justify-content: space-between; font-size: var(--fs-xs); color: var(--text-3); }

  /* Mini daily bars (rain of the month, sales) */
  .cv-spark { display: flex; align-items: flex-end; gap: 2px; height: 44px; margin-top: var(--sp-2); }
  .cv-spark span { flex: 1; min-width: 2px; height: var(--h, 2%); min-height: 2px; border-radius: 2px 2px 0 0; background: color-mix(in srgb, var(--rain) 70%, transparent); }
  .cv-spark span.is-zero { background: var(--line); }
  .cv-spark--money span { background: color-mix(in srgb, var(--cv-sage) 75%, transparent); }

  /* Day cards (forecast) */
  .cv-forecast { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-5); }
  .cv-day { padding: var(--sp-6); display: flex; flex-direction: column; gap: var(--sp-4); overflow: hidden; min-width: 0; }
  .cv-day__head { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--sp-3); }
  .cv-day__name { font-family: var(--font-display); font-size: var(--fs-2xl); font-weight: 650; display: flex; align-items: center; gap: var(--sp-2); }
  .cv-day__date { font-size: var(--fs-sm); color: var(--text-3); margin-top: 2px; }
  .cv-day__window { display: inline-flex; align-items: center; gap: 6px; margin-top: var(--sp-2); font-size: var(--fs-sm); font-weight: 600; color: var(--text-accent); }
  .cv-day__window svg { width: 15px; height: 15px; }
  .cv-day__window.is-closed { color: var(--text-3); font-weight: 500; }
  .cv-day__window.is-special { color: #8A6420; }
  :root[data-theme="dark"] .cv-day__window.is-special { color: var(--cv-sand); }
  .cv-day__icon { width: 76px; height: 76px; margin: -6px -6px 0 0; flex: none; }
  .cv-day__temps { display: flex; align-items: baseline; gap: var(--sp-3); }
  .cv-day__max { font-family: var(--font-display); font-size: 2.75rem; font-weight: 400; letter-spacing: -.03em; line-height: 1; }
  .cv-day__min { font-size: var(--fs-xl); color: var(--text-3); font-weight: 500; }
  .cv-day__label { font-weight: 600; color: var(--text-2); }
  .cv-day__facts { display: grid; gap: var(--sp-2); padding-top: var(--sp-4); border-top: 1px dashed var(--line); font-size: var(--fs-sm); color: var(--text-2); }
  .cv-day__facts div { display: flex; align-items: center; gap: var(--sp-2); }
  .cv-day__facts div > span:last-child { margin-left: auto; text-align: right; }
  .cv-day__facts svg { width: 16px; height: 16px; color: var(--text-3); flex: none; }
  .cv-day__facts b { color: var(--text); font-weight: 600; font-variant-numeric: tabular-nums; }
  .cv-day__facts .is-alert, .cv-day__facts .is-alert svg, .cv-day__facts .is-alert b { color: var(--danger); }
  .cv-day--today { border-color: color-mix(in srgb, var(--cv-sage) 45%, var(--line)); box-shadow: 0 0 0 4px color-mix(in srgb, var(--cv-mint) 35%, transparent), var(--shadow-sm); }
  .cv-day.has-alert { border-color: color-mix(in srgb, var(--danger) 45%, var(--line)); box-shadow: 0 0 0 4px color-mix(in srgb, var(--cv-coral) 16%, transparent), var(--shadow-sm); }
  .cv-day--closed .cv-day__icon, .cv-day--closed .cv-day__temps { opacity: .55; }
  .cv-day__flag { display: inline-flex; align-items: center; gap: 4px; height: 22px; padding: 0 8px; border-radius: var(--r-pill); font-family: var(--font-sans); font-size: 11px; font-weight: 650; letter-spacing: .06em; text-transform: uppercase; background: var(--danger-soft); color: var(--danger); }
  .cv-day__flag svg { width: 12px; height: 12px; }

  /* Radar chart: 2 h before opening → 2 h after closing (Lote 39) */
  .cv-rchart { --cols: 15; display: grid; grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); gap: 3px; margin-top: var(--sp-2); }
  .cv-rchart__col { position: relative; display: grid; grid-template-rows: 16px 92px 20px 18px; align-items: end; justify-items: center; border-radius: 6px; padding: 4px 0 2px; }
  .cv-rchart__col.is-open { background: color-mix(in srgb, var(--cv-mint) 26%, transparent); }
  .cv-rchart__col.is-open.is-first { border-top-left-radius: 10px; border-bottom-left-radius: 10px; }
  .cv-rchart__col.is-past { opacity: .42; }
  .cv-rchart__mm { font-size: 10px; font-weight: 650; color: var(--rain); font-variant-numeric: tabular-nums; align-self: end; }
  .cv-rchart__plot { position: relative; width: 100%; height: 92px; display: flex; align-items: flex-end; justify-content: center; }
  .cv-rchart__bar { width: 62%; max-width: 16px; height: var(--h, 2%); min-height: 3px; border-radius: 4px 4px 1px 1px; background: color-mix(in srgb, var(--rain) 30%, transparent); transition: height var(--t-slow) var(--ease-out); }
  .cv-rchart__col.is-rain .cv-rchart__bar { background: var(--rain); }
  .cv-rchart__col.is-rain.is-open .cv-rchart__bar { background: linear-gradient(180deg, var(--cv-coral), color-mix(in srgb, var(--cv-coral) 70%, var(--danger))); }
  .cv-rchart__wind { position: absolute; top: 2px; left: 50%; transform: translateX(-50%); width: 18px; height: 18px; display: grid; place-items: center; border-radius: 50%; background: var(--warning-soft); color: var(--warning); }
  .cv-rchart__wind svg { width: 12px; height: 12px; }
  .cv-rchart__temp { font-size: 11px; color: var(--text-2); font-variant-numeric: tabular-nums; }
  .cv-rchart__hour { font-size: 11px; color: var(--text-3); font-variant-numeric: tabular-nums; font-weight: 500; }
  .cv-rchart__col.is-open .cv-rchart__hour { color: var(--text); font-weight: 650; }
  .cv-rchart__legend { display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-4); font-size: var(--fs-xs); color: var(--text-3); margin-top: var(--sp-2); }
  .cv-rchart__legend i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 6px; vertical-align: -1px; }
  .cv-rchart__legend .k-open { background: color-mix(in srgb, var(--cv-mint) 45%, transparent); }
  .cv-rchart__legend .k-rain { background: var(--cv-coral); }
  .cv-rchart__legend .k-prob { background: color-mix(in srgb, var(--rain) 40%, transparent); }
  .cv-rchart__legend .k-wind { background: var(--warning); border-radius: 50%; }
  .cv-forecast > .cv-day:not(:first-child) .cv-rchart__legend { display: none; }
  .cv-rchart-empty { display: grid; place-items: center; height: 150px; border-radius: var(--r-lg); background: var(--surface-2); color: var(--text-3); font-size: var(--fs-sm); text-align: center; padding: var(--sp-4); }

  /* Alerts list (Radar) */
  .cv-alerts { border-radius: var(--r-xl); padding: var(--sp-5) var(--sp-6); background: var(--danger-soft); border: 1px solid color-mix(in srgb, var(--danger) 35%, transparent); }
  .cv-alerts__list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-2); }
  .cv-alerts__item { display: grid; grid-template-columns: 22px 170px 120px minmax(0, 1fr); align-items: center; gap: var(--sp-3); padding: var(--sp-3) var(--sp-4); border-radius: var(--r-md); background: var(--surface); }
  .cv-alerts__item svg { width: 20px; height: 20px; color: var(--danger); }
  .cv-alerts__item--vento svg { color: var(--warning); }
  .cv-alerts__day { font-weight: 650; }
  .cv-alerts__time { font-family: var(--font-display); font-size: var(--fs-xl); font-weight: 650; font-variant-numeric: tabular-nums; }

  /* Sections */
  .cv-block { margin-top: var(--sp-8); }
  .cv-block__head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--sp-4); margin-bottom: var(--sp-5); flex-wrap: wrap; }
  .cv-block__head h2 { font-size: var(--fs-2xl); font-weight: 650; }
  .cv-block__head h2 em { font-style: italic; font-weight: 400; color: var(--text-accent); }
  .cv-block__head p { color: var(--text-3); font-size: var(--fs-sm); margin-top: 4px; max-width: 72ch; }
  .cv-source { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 6px; color: var(--text-3); flex: none; }
  .cv-source:hover { color: var(--text); background: var(--surface-sunken); text-decoration: none; }
  .cv-source svg { width: 13px; height: 13px; }
  .cv-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-3); margin-top: var(--sp-6); padding-top: var(--sp-4); border-top: 1px solid var(--line); font-size: var(--fs-xs); color: var(--text-3); }
  .cv-foot a { color: inherit; text-decoration: underline; text-decoration-color: var(--line-strong); }

  /* Findings (plain-language results of the history) */
  .cv-findings { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-3); }
  .cv-findings li { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: var(--sp-3); align-items: start; font-size: var(--fs-md); color: var(--text-2); line-height: 1.5; }
  .cv-findings li > span:first-child { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: var(--cv-mint-wash); color: var(--cv-sage-strong); }
  .cv-findings li > span:first-child svg { width: 18px; height: 18px; }
  .cv-findings li.f-chuva > span:first-child, .cv-findings li.f-forte > span:first-child { background: var(--rain-soft); color: var(--rain); }
  .cv-findings li.f-vento > span:first-child { background: var(--warning-soft); color: var(--warning); }
  .cv-findings li.f-fonte > span:first-child { background: var(--surface-sunken); color: var(--text-3); }
  .cv-findings li.f-fonte { font-size: var(--fs-sm); color: var(--text-3); }
  .cv-findings b { color: var(--text); font-weight: 650; }
  :root[data-theme="dark"] .cv-findings li > span:first-child { color: var(--cv-mint); }

  /* Rain frequency by hour (heat strip) */
  .cv-heat { display: grid; grid-template-columns: repeat(var(--cols, 15), minmax(0, 1fr)); gap: 3px; }
  .cv-heat__cell { display: grid; grid-template-rows: 40px 18px; gap: 4px; text-align: center; }
  .cv-heat__sq { border-radius: 6px; display: grid; place-items: center; font-size: 11px; font-weight: 650; font-variant-numeric: tabular-nums; color: var(--text-2); background: color-mix(in srgb, var(--rain) var(--p, 0%), var(--surface-sunken)); }
  .cv-heat__sq.is-strong { color: #fff; }
  .cv-heat__cell.is-closed .cv-heat__sq { opacity: .45; }
  .cv-heat__h { font-size: 11px; color: var(--text-3); font-variant-numeric: tabular-nums; }
  .cv-heat__cell:not(.is-closed) .cv-heat__h { color: var(--text); font-weight: 600; }

  /* Weekday bars */
  .cv-wbars { display: grid; gap: var(--sp-2); }
  .cv-wbars__row { display: grid; grid-template-columns: 44px minmax(0, 1fr) 64px; gap: var(--sp-3); align-items: center; font-size: var(--fs-sm); }
  .cv-wbars__name { font-weight: 600; text-transform: capitalize; }
  .cv-wbars__track { height: 12px; border-radius: 6px; background: var(--surface-sunken); overflow: hidden; display: flex; }
  .cv-wbars__fill { height: 100%; width: var(--w, 0%); background: var(--rain); border-radius: 6px; }
  .cv-wbars__fill--money { background: var(--cv-sage); }
  .cv-wbars__val { text-align: right; color: var(--text-3); font-variant-numeric: tabular-nums; }
  .cv-wbars__row.is-closed { opacity: .45; }

  /* Month calendar (each day: rain with the house open) */
  .cv-cal { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
  .cv-cal__wd { font-size: 10px; text-transform: uppercase; letter-spacing: .08em; color: var(--text-3); text-align: center; font-weight: 600; }
  .cv-cal__d { aspect-ratio: 1; border-radius: 8px; display: grid; place-items: center; font-size: 11px; font-weight: 600; font-variant-numeric: tabular-nums; background: var(--surface-2); color: var(--text-3); position: relative; }
  .cv-cal__d.is-dry { background: var(--cv-mint-wash); color: var(--cv-sage-strong); }
  .cv-cal__d.is-garoa { background: color-mix(in srgb, var(--rain) 22%, var(--surface)); color: var(--rain); }
  .cv-cal__d.is-chuva { background: var(--rain); color: #fff; }
  .cv-cal__d.is-closed { background: transparent; border: 1px dashed var(--line); }
  .cv-cal__d.is-wind::after { content: ''; position: absolute; top: 3px; right: 3px; width: 6px; height: 6px; border-radius: 50%; background: var(--warning); }
  .cv-cal__d.is-empty { background: transparent; }
  .cv-cal__legend { display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-4); font-size: var(--fs-xs); color: var(--text-3); margin-top: var(--sp-3); }
  .cv-cal__legend i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 6px; vertical-align: -1px; }
  .cv-year { padding: var(--sp-5); }
  .cv-year__head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: var(--sp-3); }
  .cv-year__y { font-family: var(--font-display); font-size: var(--fs-2xl); font-weight: 650; }
  .cv-year__stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-2); margin-top: var(--sp-4); }
  .cv-year__stats div { display: flex; flex-direction: column; }
  .cv-year__stats b { font-family: var(--font-display); font-size: var(--fs-xl); font-weight: 600; font-variant-numeric: tabular-nums; }
  .cv-year__stats span { font-size: var(--fs-xs); color: var(--text-3); }

  /* Month chips (choose the month of the history) */
  .cv-chips { display: flex; flex-wrap: wrap; gap: 6px; }
  .cv-chip { height: 30px; padding: 0 12px; border-radius: var(--r-pill); border: 1px solid var(--line); background: var(--surface); color: var(--text-2); font-size: var(--fs-sm); font-weight: 500; }
  .cv-chip:hover { border-color: var(--line-strong); color: var(--text); }
  .cv-chip[aria-pressed="true"] { background: var(--primary); border-color: var(--primary); color: var(--primary-text); }

  /* Upcoming special dates */
  .cv-dates { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-2); }
  .cv-dates li { display: grid; grid-template-columns: 54px minmax(0, 1fr) auto; gap: var(--sp-4); align-items: center; padding: var(--sp-3) var(--sp-4); border-radius: var(--r-md); background: var(--surface-2); }
  .cv-dates__d { text-align: center; line-height: 1.05; }
  .cv-dates__d b { display: block; font-family: var(--font-display); font-size: var(--fs-2xl); font-weight: 650; }
  .cv-dates__d span { font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--text-3); font-weight: 600; }
  .cv-dates__name { font-weight: 600; }
  .cv-dates__sub { font-size: var(--fs-xs); color: var(--text-3); }
  .cv-dates__h { font-size: var(--fs-sm); font-weight: 650; font-variant-numeric: tabular-nums; }
  .cv-dates__h.is-closed { color: var(--text-3); font-weight: 500; }

  /* Vendas: daily revenue bars coloured by the weather of the day */
  .cv-vchart { display: flex; align-items: flex-end; gap: 2px; height: 200px; padding-top: var(--sp-2); border-bottom: 1px solid var(--line); }
  .cv-vchart span { flex: 1; min-width: 2px; height: var(--h, 1%); border-radius: 3px 3px 0 0; background: var(--line-strong); }
  .cv-vchart span.is-seco { background: var(--cv-sage); }
  .cv-vchart span.is-garoa { background: color-mix(in srgb, var(--rain) 55%, transparent); }
  .cv-vchart span.is-chuva { background: var(--rain); }
  .cv-vchart__axis { display: flex; justify-content: space-between; font-size: var(--fs-xs); color: var(--text-3); margin-top: var(--sp-2); }
  .cv-compare { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-3); }
  .cv-compare > div { padding: var(--sp-4); border-radius: var(--r-lg); background: var(--surface-2); display: flex; flex-direction: column; gap: 2px; }
  .cv-compare__k { font-size: var(--fs-xs); color: var(--text-3); text-transform: uppercase; letter-spacing: .08em; font-weight: 600; display: flex; align-items: center; gap: 6px; }
  .cv-compare__k i { width: 10px; height: 10px; border-radius: 3px; flex: none; }
  .cv-compare__v { font-family: var(--font-display); font-size: var(--fs-2xl); font-weight: 600; font-variant-numeric: tabular-nums; }
  .cv-compare__s { font-size: var(--fs-xs); color: var(--text-3); }
  .k-seco { background: var(--cv-sage); } .k-garoa { background: color-mix(in srgb, var(--rain) 55%, transparent); } .k-chuva { background: var(--rain); } .k-nodata { background: var(--line-strong); }

  /* Missing data with the next step (.cv-nextstep) */
  .cv-nextstep { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--sp-5); align-items: center; padding: var(--sp-6); border-radius: var(--r-xl); border: 1px dashed var(--line-strong); background: var(--surface-2); }
  .cv-nextstep > svg { width: 40px; height: 40px; color: var(--text-accent); }
  .cv-nextstep__title { font-family: var(--font-display); font-size: var(--fs-xl); font-weight: 650; }
  .cv-nextstep p { color: var(--text-2); margin-top: 4px; max-width: 70ch; }
  .cv-nextstep__actions { display: flex; gap: var(--sp-3); margin-top: var(--sp-4); flex-wrap: wrap; }

  /* Radar (Lote 39): marks, open-air verdict, same day in previous years, week table */
  .cv-mark { display: inline-flex; align-items: center; gap: 4px; height: 22px; padding: 0 8px; border-radius: var(--r-pill); font-size: 11.5px; font-weight: 600; white-space: nowrap; background: var(--surface-sunken); color: var(--text-2); max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
  .cv-mark svg { width: 12px; height: 12px; flex: none; }
  .cv-mark--holiday { background: var(--danger-soft); color: var(--danger); }
  .cv-mark--date { background: var(--cv-sand-soft); color: #8A6420; }
  .cv-mark--pay { background: var(--success-soft); color: var(--success); }
  .cv-mark--event { background: var(--info-soft); color: var(--info); }
  :root[data-theme="dark"] .cv-mark--date { color: var(--cv-sand); }
  .cv-signals { display: flex; flex-wrap: wrap; gap: 6px; }
  .cv-signals:empty { display: none; }
  .cv-day--radar .cv-day__temps { align-items: baseline; flex-wrap: wrap; }
  .cv-day--radar .cv-day__label { margin-left: var(--sp-2); }
  .cv-outdoor { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: var(--sp-2); align-items: start; padding: var(--sp-3); border-radius: var(--r-md); font-size: var(--fs-sm); color: var(--text-2); }
  .cv-outdoor svg { width: 18px; height: 18px; }
  .cv-outdoor b { color: var(--text); }
  .cv-outdoor.is-ok { background: var(--success-soft); } .cv-outdoor.is-ok svg { color: var(--success); }
  .cv-outdoor.is-partial { background: var(--warning-soft); } .cv-outdoor.is-partial svg { color: var(--warning); }
  .cv-outdoor.is-blocked { background: var(--danger-soft); } .cv-outdoor.is-blocked svg { color: var(--danger); }
  .cv-corr { border-top: 1px dashed var(--line); padding-top: var(--sp-3); display: grid; gap: 6px; }
  .cv-corr__title { font-size: var(--fs-xs); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--text-3); }
  .cv-corr__row { display: grid; grid-template-columns: 62px minmax(0, 1fr) auto; gap: 4px var(--sp-2); align-items: center; font-size: var(--fs-sm); }
  .cv-corr__y { font-weight: 650; font-variant-numeric: tabular-nums; }
  .cv-corr__money { font-weight: 650; font-variant-numeric: tabular-nums; text-align: right; }
  .cv-corr__marks { grid-column: 2 / -1; display: flex; flex-wrap: wrap; gap: 4px; }
  .cv-corr__marks:empty { display: none; }
  .cv-corr__ref { font-size: var(--fs-xs); color: var(--text-3); margin-top: 2px; }
  .cv-corr__ref b { color: var(--text); }
  .cv-wxcell { display: inline-flex; align-items: center; gap: 5px; font-size: var(--fs-sm); font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
  .cv-wxcell svg { width: 15px; height: 15px; }
  .cv-wxcell.is-dry { color: var(--cv-sage-strong); }
  .cv-wxcell.is-rain { color: var(--rain); }
  .cv-wxcell.is-closed, .cv-wxcell.is-none { color: var(--text-3); font-weight: 500; }
  .cv-wxcell.is-forecast { font-style: italic; }
  .cv-wxcell__wind { display: inline-flex; align-items: center; gap: 2px; margin-left: 4px; color: var(--warning); }
  :root[data-theme="dark"] .cv-wxcell.is-dry { color: var(--cv-mint); }
  .cv-wk { table-layout: fixed; }
  .cv-wk th:first-child { width: 96px; }
  .cv-wk thead th span { display: block; font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--text-3); font-size: 11px; margin-top: 2px; }
  .cv-wk td, .cv-wk tbody th, .cv-wk tfoot th { vertical-align: top; padding: var(--sp-3) var(--sp-4); border-bottom: 1px solid var(--line); }
  .cv-wk tbody th { font-weight: 650; font-size: var(--fs-sm); text-align: left; }
  .cv-wk td.is-today { background: color-mix(in srgb, var(--cv-mint) 22%, transparent); }
  .cv-wk__d { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; }
  .cv-wk__date { font-size: var(--fs-xs); color: var(--text-3); font-variant-numeric: tabular-nums; min-width: 34px; }
  .cv-wk__money { font-size: var(--fs-sm); font-weight: 650; margin-top: 4px; font-variant-numeric: tabular-nums; }
  .cv-wk__marks { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
  .cv-wk__marks:empty { display: none; }
  .cv-wk tfoot th, .cv-wk tfoot td { background: var(--surface-2); font-size: var(--fs-xs); color: var(--text-2); border-bottom: 0; }
  .cv-wk tfoot b { color: var(--text); }
  .cv-cmp { display: grid; gap: 2px; }
  .cv-cmp__row { display: grid; grid-template-columns: minmax(0, 1fr) 88px 88px; gap: var(--sp-3); padding: 6px 0; border-bottom: 1px solid var(--line); font-size: var(--fs-sm); align-items: baseline; }
  .cv-cmp__row b { text-align: right; font-variant-numeric: tabular-nums; font-weight: 650; }
  .cv-cmp__row b + b { color: var(--text-3); font-weight: 500; }
  .cv-cmp__head span { font-size: var(--fs-xs); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--text-3); text-align: right; }
  .cv-wbars__row.is-current .cv-wbars__name { color: var(--text-accent); }
  .cv-wbars__row.is-current .cv-wbars__fill { background: var(--cv-navy); }
  :root[data-theme="dark"] .cv-wbars__row.is-current .cv-wbars__fill { background: var(--cv-mint); }
  @media (max-width: 960px) { .cv-wk { table-layout: auto; min-width: 720px; } }

  /* Oráculo (Lote 40): the week's outlook and the sessions */
  .cv-outlook { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-5); }
  .cv-outlook__list { list-style: none; margin: var(--sp-2) 0 0; padding: 0; display: grid; gap: 6px; font-size: var(--fs-sm); color: var(--text); }
  .cv-outlook__list li { padding-left: 14px; position: relative; }
  .cv-outlook__list li::before { content: ''; position: absolute; left: 0; top: .55em; width: 6px; height: 6px; border-radius: 50%; background: var(--cv-sage); }
  .cv-outlook__list--past { margin-top: var(--sp-3); padding-top: var(--sp-3); border-top: 1px dashed var(--line); color: var(--text-2); }
  .cv-outlook__list--past li::before { background: var(--line-strong); }
  .cv-outlook__past { font-size: var(--fs-xs); color: var(--text-3); margin-top: var(--sp-2); padding-top: var(--sp-2); border-top: 1px dashed var(--line); }
  .cv-outlook__past b { color: var(--text-2); margin-right: 4px; }
  .cv-oracle__tabs { position: sticky; top: var(--topbar-h); z-index: 10; background: var(--bg); }
  @media (max-width: 1180px) { .cv-outlook { grid-template-columns: minmax(0, 1fr); } }

  /* Configurações → Dados: upload zones */
  .cv-drop { display: grid; place-items: center; gap: var(--sp-2); text-align: center; padding: var(--sp-7) var(--sp-5); border: 2px dashed var(--line-strong); border-radius: var(--r-xl); background: var(--surface-2); cursor: pointer; transition: border-color var(--t-fast), background var(--t-fast); }
  .cv-drop:hover, .cv-drop.is-over { border-color: var(--cv-sage); background: var(--cv-mint-wash); }
  .cv-drop > svg { width: 34px; height: 34px; color: var(--text-accent); }
  .cv-drop__title { font-weight: 650; }
  .cv-drop__hint { font-size: var(--fs-sm); color: var(--text-3); max-width: 46ch; }
  .cv-drop input { display: none; }
  .cv-progress { height: 8px; border-radius: 8px; background: var(--surface-sunken); overflow: hidden; margin-top: var(--sp-3); }
  .cv-progress span { display: block; height: 100%; width: var(--w, 0%); background: var(--cv-sage); transition: width var(--t-fast); }
  .cv-progress.is-busy span { width: 100%; background: linear-gradient(90deg, var(--cv-sage) 0%, var(--cv-mint) 50%, var(--cv-sage) 100%); background-size: 200% 100%; animation: cv-stripes 1.2s linear infinite; }
  @keyframes cv-stripes { to { background-position: -200% 0; } }

  .cv-baptiste__text { font-family: var(--font-display); font-weight: 400; font-size: 1.12rem; line-height: 1.55; color: var(--text); max-width: 72ch; margin-top: 4px; }
  .cv-table__foot td { color: var(--text-3); font-size: var(--fs-sm); border-top: 1px solid var(--line-strong); }
  [data-history].is-loading { opacity: .5; transition: opacity var(--t-fast); }
  .cv-baptiste__name { font-family: var(--font-display); font-weight: 650; font-size: var(--fs-xl); }
  .cv-baptiste__typing { display: inline-flex; gap: 5px; align-items: center; height: 24px; }
  .cv-baptiste__typing i { width: 7px; height: 7px; border-radius: 50%; background: var(--cv-sage); animation: cv-typing 1.2s infinite var(--ease); }
  .cv-baptiste__typing i:nth-child(2) { animation-delay: .15s; }
  .cv-baptiste__typing i:nth-child(3) { animation-delay: .3s; }

  @media (max-width: 1180px) {
    .cv-forecast, .cv-kpis, .cv-kpis--4 { grid-template-columns: minmax(0, 1fr); }
    .cv-hero__grid { grid-template-columns: minmax(0, 1fr); } .cv-hero__now { text-align: left; } .cv-hero__now-temp { justify-content: flex-start; }
    .cv-alerts__item { grid-template-columns: 22px 1fr; } .cv-alerts__item > span:nth-child(n+3) { grid-column: 2; }
    .cv-compare { grid-template-columns: minmax(0, 1fr); }
  }
  @media (max-width: 720px) { .cv-hero { padding: var(--sp-6); } .cv-rchart__col { grid-template-rows: 14px 72px 18px 16px; } .cv-rchart__plot { height: 72px; } }

  /* 5.6 Settings */
  .cv-settings-section { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: var(--sp-8); padding: var(--sp-7) 0; border-top: 1px solid var(--line); }
  .cv-settings-section:first-child { border-top: 0; padding-top: 0; }
  .cv-settings-section__intro h3 { font-size: var(--fs-xl); }
  .cv-settings-section__intro p { color: var(--text-3); font-size: var(--fs-sm); margin-top: var(--sp-2); }
  @media (max-width: 960px) { .cv-settings-section { grid-template-columns: minmax(0, 1fr); gap: var(--sp-4); } }
  .cv-savebar { position: sticky; bottom: var(--sp-5); z-index: 15; display: flex; align-items: center; gap: var(--sp-4); padding: var(--sp-3) var(--sp-3) var(--sp-3) var(--sp-5); margin-top: var(--sp-6); border-radius: var(--r-pill); background: var(--cv-ink-deep); color: #E9EDF3; box-shadow: var(--shadow-lg); transform: translateY(140%); opacity: 0; transition: transform var(--t-slow) var(--ease-out), opacity var(--t-med); pointer-events: none; }
  .cv-savebar.is-visible { transform: none; opacity: 1; pointer-events: auto; }
  .cv-savebar:not(.is-visible) { height: 0; padding-top: 0; padding-bottom: 0; margin-top: 0; overflow: hidden; }
  .cv-savebar__text { flex: 1; font-size: var(--fs-md); }
  .cv-savebar .cv-btn--ghost { --btn-fg: #B9C2D4; --btn-bg-hover: rgba(255,255,255,.06); }
  .cv-hours { display: grid; gap: var(--sp-2); }
  .cv-hours__row { display: grid; grid-template-columns: 150px auto 1fr; gap: var(--sp-4); align-items: center; padding: var(--sp-2) var(--sp-3); border-radius: var(--r-md); }
  .cv-hours__row:nth-child(odd) { background: var(--surface-2); }
  .cv-hours__day { font-weight: 600; }
  .cv-hours__times { display: flex; align-items: center; gap: var(--sp-2); color: var(--text-3); }
  .cv-hours__times .cv-input { width: 92px; height: 38px; text-align: center; }
  .cv-hours__row.is-closed .cv-hours__times { opacity: .4; pointer-events: none; }
  .cv-map-chip { display: inline-flex; align-items: center; gap: var(--sp-2); padding: var(--sp-2) var(--sp-3); border-radius: var(--r-md); background: var(--surface-sunken); font-size: var(--fs-sm); color: var(--text-2); }
  .cv-map-chip svg { width: 16px; height: 16px; color: var(--cv-sage); }

  .cv-perm-table td:first-child { min-width: 220px; }
  .cv-perm-table .cv-segmented { transform-origin: left center; }
  .cv-role-card { padding: var(--sp-5); cursor: pointer; text-align: left; width: 100%; border: 1px solid var(--line); background: var(--surface); border-radius: var(--r-lg); transition: all var(--t-fast); display: flex; flex-direction: column; gap: 6px; }
  .cv-role-card:hover { border-color: var(--line-strong); }
  .cv-role-card[aria-pressed="true"] { border-color: var(--cv-sage); box-shadow: 0 0 0 3px color-mix(in srgb, var(--cv-mint) 45%, transparent); }
  .cv-role-card__name { font-weight: 700; font-family: var(--font-display); font-size: var(--fs-lg); display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); }
  .cv-role-card__desc { font-size: var(--fs-sm); color: var(--text-3); }

  .cv-qr { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--sp-6); align-items: center; }
  .cv-qr img { width: 200px; height: 200px; border-radius: var(--r-lg); border: 1px solid var(--line); background: #fff; padding: 8px; }
  @media (max-width: 640px) { .cv-qr { grid-template-columns: minmax(0, 1fr); } }

  /* 5.7 Style guide page */
  .cv-swatch { border-radius: var(--r-lg); overflow: hidden; border: 1px solid var(--line); background: var(--surface); }
  .cv-swatch__chip { height: 96px; }
  .cv-swatch__meta { padding: var(--sp-3) var(--sp-4); font-size: var(--fs-sm); }
  .cv-swatch__meta b { display: block; font-weight: 650; }
  .cv-swatch__meta code { color: var(--text-3); }
  .sw-navy { background: var(--cv-navy); } .sw-ink { background: var(--cv-ink); } .sw-deep { background: var(--cv-ink-deep); } .sw-slate { background: var(--cv-slate); }
  .sw-sage { background: var(--cv-sage); } .sw-sage-strong { background: var(--cv-sage-strong); } .sw-mint { background: var(--cv-mint); } .sw-mint-wash { background: var(--cv-mint-wash); }
  .sw-paper { background: #F6F5F1; } .sw-rain { background: var(--rain); } .sw-sand { background: var(--cv-sand); } .sw-coral { background: var(--cv-coral); } .sw-white { background: #fff; }
}

/* ─────────────────────────────── 6. UTILITIES & MOTION ─────────────────────────────── */
@layer utilities {
  .u-mt-1 { margin-top: var(--sp-1); } .u-mt-2 { margin-top: var(--sp-2); } .u-mt-3 { margin-top: var(--sp-3); } .u-mt-4 { margin-top: var(--sp-4); } .u-mt-5 { margin-top: var(--sp-5); } .u-mt-6 { margin-top: var(--sp-6); } .u-mt-8 { margin-top: var(--sp-8); }
  .u-mb-2 { margin-bottom: var(--sp-2); } .u-mb-4 { margin-bottom: var(--sp-4); } .u-mb-6 { margin-bottom: var(--sp-6); }
  .u-text-sm { font-size: var(--fs-sm); } .u-text-xs { font-size: var(--fs-xs); } .u-text-lg { font-size: var(--fs-lg); }
  .u-text-right { text-align: right; } .u-center { text-align: center; }
  .u-strong { font-weight: 650; }
  .u-grow { flex: 1; } .u-nowrap { white-space: nowrap; }
  .u-sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .u-fade-in { animation: cv-fade-in var(--t-slow) var(--ease-out) both; }
  .u-delay-1 { animation-delay: 60ms; } .u-delay-2 { animation-delay: 120ms; } .u-delay-3 { animation-delay: 180ms; } .u-delay-4 { animation-delay: 240ms; } .u-delay-5 { animation-delay: 300ms; }
}

@keyframes cv-spin { to { transform: rotate(360deg); } }
@keyframes cv-shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }
@keyframes cv-fade-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes cv-page-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes cv-toast-in { from { opacity: 0; transform: translateY(12px) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes cv-toast-out { to { opacity: 0; transform: translateY(8px); } }
@keyframes cv-dialog-in { from { opacity: 0; transform: translateY(10px) scale(.985); } to { opacity: 1; transform: none; } }
@keyframes cv-shake { 0%, 100% { transform: none; } 20% { transform: translateX(-5px); } 40% { transform: translateX(5px); } 60% { transform: translateX(-3px); } 80% { transform: translateX(3px); } }
@keyframes cv-pulse { 0%, 100% { box-shadow: 0 0 0 3px color-mix(in srgb, var(--cv-sage) 25%, transparent); } 50% { box-shadow: 0 0 0 6px color-mix(in srgb, var(--cv-sage) 6%, transparent); } }
@keyframes cv-typing { 0%, 60%, 100% { transform: translateY(0); opacity: .45; } 30% { transform: translateY(-4px); opacity: 1; } }
@keyframes cv-bob { 0%, 100% { transform: rotate(-1.2deg) translateY(0); } 50% { transform: rotate(1.4deg) translateY(-6px); } }
@keyframes cv-sea { from { transform: translateX(0); } to { transform: translateX(-50%); } }

@layer utilities {
  .u-center > .cv-avatar { margin-left: auto; margin-right: auto; }
}

@layer views {
  /* Style guide only */
  .g-logo-v { width: 150px; }
  .g-logo-m { width: 48px; }
  .g-pattern { height: 120px; }
  .g-pattern--night { background: url('/img/pattern-waves-night.svg') 0 0 / 220px auto repeat, var(--cv-ink-deep); }
}