/* Layout: one column of cards on a cool green-grey ground. Pine is the money line, copper the "what if". */
@font-face { font-family: 'IBM Plex Sans'; font-weight: 400; font-display: swap; src: url('/fonts/sans/ibm-plex-sans-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family: 'IBM Plex Sans'; font-weight: 500; font-display: swap; src: url('/fonts/sans/ibm-plex-sans-latin-500-normal.woff2') format('woff2'); }
@font-face { font-family: 'Source Serif 4'; font-weight: 400; font-display: swap; src: url('/fonts/serif/source-serif-4-latin-400-normal.woff2') format('woff2'); }

:root {
  color-scheme: light;
  --color-bg: #f1f4f1; --color-panel: #ffffff; --color-fg: #15211c; --color-fg-muted: #5a6a62; --color-border-line: #dbe2dc;
  --color-ok: #1b7350; --color-warn: #9a6512; --color-bad: #b4352c;
  --s1: #1e6b52; --s2: #c0752a; --s3: #3f6c9b; --s4: #7a4e8a; --s5: #8a8b3a; --s6: #2f8f8f; --s7: #a84f6d; --s8: #6b7280;
  --cds-chart-grid: #e6ebe7; --cds-chart-axis: #b7c2bb; --cds-chart-reference: #7e8c84; --cds-chart-muted: #c3cdc6; --cds-chart-status-critical: #b4352c;
  --cds-surface-popover: #ffffff; --cds-border: #dbe2dc; --cds-shadow-popover: 0 6px 20px rgb(21 33 28 / .14); --cds-text-secondary: #5a6a62;
  --font-anthropic-sans: 'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-anthropic-serif: 'Source Serif 4', Georgia, 'Times New Roman', serif;
  --cds-font-size-caption: .8125rem; --cds-font-size-body: .9375rem; --cds-font-size-heading: 1.0625rem; --cds-font-size-title: 1.625rem;
  --cds-font-weight-medium: 500;
  --cds-gap-xs: .25rem; --cds-gap-sm: .5rem; --cds-gap-md: .75rem; --cds-gap-lg: 1.25rem; --cds-gap-xl: 2rem;
  --cds-pad-xs: .375rem; --cds-pad-sm: .625rem; --cds-pad-md: .875rem; --cds-pad-lg: 1.125rem; --cds-radius: .5rem;
  --cds-dur-slow: .3s; --cds-ease-out: cubic-bezier(.2, .7, .2, 1);
}
@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    --color-bg: #0f1513; --color-panel: #171f1c; --color-fg: #e7eeea; --color-fg-muted: #9aa9a1; --color-border-line: #2a3531;
    --color-ok: #57c49d; --color-warn: #e0b060; --color-bad: #ef8378;
    --s1: #4fb893; --s2: #e2a25c; --s3: #7fa9d6; --s4: #b58fc4; --s5: #bdbe6a; --s6: #5fc4c4; --s7: #d98aa6; --s8: #9ca3af;
    --cds-chart-grid: #232d29; --cds-chart-axis: #3d4a44; --cds-chart-reference: #7f8e86; --cds-chart-muted: #3f4c46; --cds-chart-status-critical: #ef8378;
    --cds-surface-popover: #1e2824; --cds-border: #33403a; --cds-shadow-popover: 0 6px 20px rgb(0 0 0 / .45); --cds-text-secondary: #9aa9a1;
  }
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--color-bg); color: var(--color-fg);
  font-family: var(--font-anthropic-sans); font-size: var(--cds-font-size-body); line-height: 1.45;
}
[hidden] { display: none !important; }

.mp-btn {
  appearance: none; display: inline-block; font: inherit; font-size: var(--cds-font-size-caption); line-height: 1.3; text-decoration: none; cursor: pointer;
  color: var(--color-fg); background: var(--color-panel); border: 1px solid var(--color-border-line); border-radius: var(--cds-radius);
  padding: var(--cds-pad-xs) var(--cds-pad-sm); white-space: nowrap;
}
.mp-btn:hover { border-color: var(--cds-chart-reference); }
.mp-btn.prim { background: var(--s1); border-color: var(--s1); color: var(--color-panel); font-weight: 500; }
.mp-btn.perigo { color: var(--color-bad); }
.mp-btn:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, a:focus-visible { outline: 2px solid var(--s1); outline-offset: 2px; }
.mp-btn:disabled { opacity: .6; cursor: default; }

.mp-auth { min-height: 100dvh; display: grid; place-items: center; padding: 1rem max(16px, env(safe-area-inset-left, 0px)); }
.mp-auth form { width: min(100%, 23rem); background: var(--color-panel); border: 1px solid var(--color-border-line); border-radius: var(--cds-radius); padding: 1.5rem; display: grid; gap: .875rem; }
.mp-auth h1 { margin: 0; font-family: var(--font-anthropic-serif); font-weight: 400; font-size: var(--cds-font-size-title); text-wrap: balance; }
.mp-auth p { margin: 0; color: var(--color-fg-muted); font-size: var(--cds-font-size-caption); }
.mp-auth label { display: grid; gap: .25rem; font-size: var(--cds-font-size-caption); color: var(--color-fg-muted); }
.mp-auth input { font: inherit; color: var(--color-fg); background: var(--color-bg); border: 1px solid var(--color-border-line); border-radius: var(--cds-radius); padding: .5rem .625rem; width: 100%; }
.mp-auth .mp-btn { padding: .5rem; font-size: var(--cds-font-size-body); }
.mp-erro { color: var(--color-bad); font-size: var(--cds-font-size-caption); min-height: 1.1em; margin: 0; }