/* Taxoon's pages: the app's own tokens (Shelest's design), dark first, light when the phone or computer asks for it. */
:root {
  --night: #0B111B;
  --surface: #121B29;
  --surface-high: #19243A;
  --outline: #2A3850;
  --ink: #E7ECF4;
  --ink-muted: #96A2B6;
  --cobalt: #7397FF;
  --cobalt-container: #1E2F5C;
  --wheat: #E8C35A;
  --income: #4CC48E;
  --glass: rgba(255, 255, 255, 0.05);
  --edge: rgba(255, 255, 255, 0.12);
  color-scheme: dark;
}
@media (prefers-color-scheme: light) {
  :root {
    --night: #F2F4F8;
    --surface: #FFFFFF;
    --surface-high: #E4E9F1;
    --outline: #CAD2DE;
    --ink: #111827;
    --ink-muted: #5B677A;
    --cobalt: #3D63DD;
    --cobalt-container: #DCE4FF;
    --wheat: #8A6300;
    --income: #0F7A4C;
    --glass: #FFFFFF;
    --edge: rgba(17, 24, 39, 0.10);
    color-scheme: light;
  }
}

/* The app's own Roboto (variable, OFL): the same letters, and the same centring in pills and bubbles, on every
   system (Windows' fallback font sits text off-centre). */
@font-face { font-family: "Taxoon Roboto"; src: url("roboto.ttf") format("truetype"); font-weight: 100 900; font-display: swap; }

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--night);
  color: var(--ink);
  font: 16px/1.6 "Taxoon Roboto", Roboto, system-ui, -apple-system, "Segoe UI", sans-serif;
}
a { color: var(--cobalt); }
.page { max-width: 880px; margin: 0 auto; padding: 24px 16px 48px; }

/* The two languages: one is shown, picked by shelest.js (Ukrainian without it). */
html:not(.en) [lang="en"], html.en [lang="uk"] { display: none !important; }

.top { display: flex; align-items: center; gap: 12px; }
.top .brand { display: flex; align-items: center; gap: 12px; color: var(--ink); text-decoration: none; font-weight: 500; font-size: 22px; letter-spacing: -0.2px; }
.top .brand svg { width: 44px; height: 44px; padding: 4px; border-radius: 12px; background: var(--surface-high); border: 1px solid var(--edge); }
.top .spacer { flex: 1; }
.langs { display: flex; gap: 4px; padding: 3px; border-radius: 999px; background: var(--glass); border: 1px solid var(--edge); }
.langs button {
  /* "font: … inherit" isn't valid shorthand, so each part is set: the label sits in the middle of its pill. */
  font-family: inherit; font-size: 13px; font-weight: 500; line-height: 1;
  display: inline-flex; align-items: center; justify-content: center; height: 30px; min-width: 42px;
  color: var(--ink-muted); background: none; border: 0; padding: 0 12px; border-radius: 999px; cursor: pointer;
}
.langs button[aria-pressed="true"] { background: var(--cobalt-container); color: var(--ink); }

.glass { background: var(--glass); border: 1px solid var(--edge); border-radius: 24px; }

footer { margin-top: 48px; padding-top: 20px; border-top: 1px solid var(--outline); color: var(--ink-muted); font-size: 14px; display: flex; flex-wrap: wrap; gap: 8px 20px; }
footer a { color: var(--ink-muted); }
.made { display: inline-flex; align-items: center; gap: 8px; }
.made .flag { width: 21px; height: 14px; border-radius: 3px; flex: none; }
/* In the header, a quiet pill; on a narrow phone just the flag. */
.top-made { color: var(--ink-muted); font-size: 13px; line-height: 1; height: 38px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--edge); }
@media (max-width: 480px) { .top-made > span { display: none !important; } .top-made { width: 38px; padding: 0; justify-content: center; } }