/* Dorax Finance — design system (v14), from the owner's third DESIGN.md (a "midnight code editor" reference) on top of the iOS web-app behaviour.
   Canvas: #000000 since v27 (owner); cards and panels stay #121212, so they stand a step in front of it. Before v27: #121212, one surface. A card is the canvas with a 1px #2E2E2E border; nothing has a shadow and nothing has a gradient.
   One chromatic colour: green (#3ECF8E). It marks the logo, the main action, links, focus, the active item and "on". Everything else is grey.
   Amber and red stay because money needs them (late, over plan, negative amounts); category colours stay because they tell categories apart.
   Type: Inter (the reference's suggested substitute for Circular), weights 400 and 500 only, tracking -0.007em everywhere.
   Source Code Pro for small labels, with wide tracking; figures in tables use it without the tracking.
   Shape: pills for buttons, tags and segmented controls; 16px cards and sheets; 8px fields.
   Accessibility over the reference where they disagree: the main button is deep green with light text (the reference's light text on bright
   green is 1.9:1), field borders are lighter than #393939 so they reach 3:1, and keyboard focus keeps a visible 2px outline.
   iOS feel on phones is unchanged: navigation bar with a large title that collapses, floating tab bar, bottom sheets with a handle,
   44px targets, 16px inputs. Dark is the only theme. */
:root {
  color-scheme: dark;
  /* surfaces and ink */
  --bg: #000000; --surface: #070707; --surface-2: #171717; --surface-3: #242424; --well: #1C1C1C; --lift: #171717; --badge: #242424; --pit: #0D0D0D;
  --line: #1A1A1A; --line-strong: #393939; --graphite: #4D4D4D; --field: #666666;
  --ink: #EDEDED; --ink-strong: #FAFAFA; --ink-2: #B4B4B4; --ink-3: #909090;
  /* roles */
  --primary: #006239; --primary-hover: #00754A; --primary-ink: #FAFAFA; --primary-line: rgba(62, 207, 142, .45);
  --btn: transparent; --btn-hover: rgba(255, 255, 255, .04); --btn-line: #393939;
  --select: #242424; --select-ink: #FAFAFA;
  --brand: #3ECF8E; --link: #3ECF8E; --focus: #3ECF8E; --ring: #3ECF8E; --on-brand: #121212;
  --brand-deep: #006239; --brand-edge: #1F4B37;
  --edge: 0 0 0 0 transparent;
  --edge-strong: 0 0 0 1px var(--line);
  --glass: rgba(0, 0, 0, .86); --glass-line: #2E2E2E;
  --float: 0 0 0 0 transparent;
  --pos: #3ECF8E; --neg: #FF9592;
  --good: #3ECF8E; --warn: #FFCA16; --crit: #FF6465; --info: #B4B4B4;
  --good-bg: rgba(62, 207, 142, .10); --warn-bg: rgba(255, 202, 22, .10); --crit-bg: rgba(255, 100, 101, .11); --info-bg: rgba(255, 255, 255, .06);
  --track: #2E2E2E; --hover-line: #666666; --knob: #FAFAFA; --switch-off: #393939; --switch-on: #3ECF8E;
  /* charts (validated on this surface: lightness band, chroma, colour-blind separation, contrast) */
  --s1: #1FA390; --s2: #C98500; --s3: #4A8FE8; --s4: #D95926; --s5: #9085E9; --s6: #D55181; --s7: #6AA637;
  --col: #3ECF8E; --col-muted: #626262; --grid: #1F1F1F;
  --cur: rgba(255, 255, 255, .05); --cur-sum: rgba(255, 255, 255, .085);
  --scrim: rgba(0, 0, 0, .6);
  /* type and shape */
  /* v22 (owner): Apple's typefaces. SF Pro and SF Mono are the system fonts on Apple devices and may not be embedded on a website, so they are asked for
     through the system font; where they are not installed (Windows, Android) the text falls back to Inter and Source Code Pro, the closest web fonts. */
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", "Inter", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, "Source Code Pro", Consolas, monospace;
  --fig: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Inter", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --r-card: 16px; --r-lg: 16px; --r: 8px; --r-sm: 8px; --r-mid: 16px; --pill: 9999px; --rail: 248px;
  --safe-t: env(safe-area-inset-top, 0px); --safe-b: env(safe-area-inset-bottom, 0px);
  /* motion */
  --ease: cubic-bezier(.16, 1, .3, 1); --ease-in: cubic-bezier(.4, 0, 1, 1); --ease-ios: cubic-bezier(.32, .72, 0, 1); --t1: 150ms; --t2: 220ms; --t3: 380ms;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; -webkit-tap-highlight-color: transparent; background: var(--bg); }
html, body { height: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--font); font-size: 14px; line-height: 1.43; letter-spacing: -.016em; -webkit-font-smoothing: antialiased; font-feature-settings: "calt", "kern", "liga"; }
button, a, label, select, summary { touch-action: manipulation; }
h1, h2, h3, p { margin: 0; }
h1, h2, h3 { text-wrap: balance; color: var(--ink-strong); }
b, strong { color: var(--ink-strong); font-weight: 600; }
h1, h2, h3, h4 { font-weight: 600; }
th, dt, summary, legend, optgroup { font-weight: 500; }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: var(--link); text-underline-offset: 2px; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: var(--r); }
.num { font-family: var(--mono); font-size: .93em; font-variant-numeric: tabular-nums; letter-spacing: 0; }
.mono { font-family: var(--mono); font-size: 12px; }
.muted { color: var(--ink-3); }
.pos { color: var(--pos); }
.neg { color: var(--neg); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.sm-only { display: none; }