/* Aisance Debt: debt payoff platform. Light theme sampled from the Долг.Нет reference:
   cool paper #F4F7F9, deep pine #154F46, chart green #1C895C, mint #E5F2ED. Type: Onest. */

:root {
  --bg: #F4F7F9;
  --bg-side: #F8FAFB;
  --surface: #FFFFFF;
  --surface-2: #FAFBFC;
  --hover: #F5F8F8;
  --line: #E9EEF1;
  --line-2: #F0F3F5;
  --line-3: #DCE3E7;

  --ink: #0F1B17;
  --ink-2: #55616A;
  --ink-3: #687279; /* 4.9:1 on white, 4.6:1 on the page background (WCAG AA for small text) */
  --ink-4: #B4BDC3;

  --brand: #154F46;
  --brand-2: #1A5E53;
  --brand-3: #0F3F38;
  --green: #1C895C;
  --green-2: #49AB50;
  --green-3: #2FA36B;
  --green-ink: #13704A;
  --green-bg: #E2F3EA;
  --mint: #E5F2ED;
  --mint-2: #EBF5F3;
  --mint-3: #F2F9F6;
  --active: #E5EFED;

  --amber: #93600A;
  --amber-bg: #FDF3D4;
  --amber-dot: #E3A21B;
  --amber-mark: #B7791F; /* the "upcoming" mark in the calendar: still amber, 3.6:1 on white */
  --red: #C8413A;
  --red-bg: #FDEDEB;
  --red-ink: #B7372F; /* red words on --red-bg: 5.1:1 (--red there is 4.3:1) */
  --blue: #2F63C9;
  --blue-bg: #EAF1FD;
  --violet: #6A4CC2;
  --violet-bg: #F1EDFB;

  --mist-1: #C8DAE1;
  --mist-2: #DCE8EC;
  --mist-3: #EDF3F5;

  /* validated categorical palette (debts): see README */
  --c1: #12805A; --c2: #E39A1B; --c3: #4F7BE8; --c4: #E0674F; --c5: #8A63D2; --c6: #2BA6C4; --c7: #C44D8E;

  --r-xl: 20px;
  --r: 16px;
  --r-md: 12px;
  --r-sm: 10px;
  --r-xs: 8px;

  --sh-1: 0 1px 2px rgba(16, 38, 33, .04), 0 2px 10px rgba(16, 38, 33, .035);
  --sh-2: 0 2px 6px rgba(16, 38, 33, .05), 0 12px 32px rgba(16, 38, 33, .08);
  --sh-3: 0 24px 64px rgba(12, 30, 26, .18), 0 4px 14px rgba(12, 30, 26, .08);

  --font: 'Onest', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --ease: cubic-bezier(.22, .9, .3, 1);
  --side-w: 252px;
  --rail-w: 318px;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
img, svg { display: block; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4, p { margin: 0; }
::selection { background: #CDEBDD; }
:focus-visible { outline: 2px solid rgba(28, 137, 92, .55); outline-offset: 2px; }
.num, .tnum { font-variant-numeric: tabular-nums; }
.muted { color: var(--ink-3); }
.soft { color: var(--ink-2); }
.pos { color: var(--green-ink); }
.neg { color: var(--red); }
.nowrap { white-space: nowrap; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.ico { width: 20px; height: 20px; flex: none; }
.ico-s { width: 16px; height: 16px; flex: none; }
.ico-l { width: 24px; height: 24px; flex: none; }

/* ---------- shell ---------- */
.app { display: grid; grid-template-columns: var(--side-w) minmax(0, 1fr); min-height: 100vh; }
.side {
  position: sticky; top: 0; height: 100vh;
  background: var(--bg-side);
  border-right: 1px solid var(--line-2);
  display: flex; flex-direction: column;
  padding: 26px 18px 18px;
  overflow-y: auto;
  scrollbar-width: none;
}
.side::-webkit-scrollbar { display: none; }
.logo { display: flex; align-items: center; gap: 12px; padding: 0 8px 26px; }
.logo-mark { width: 38px; height: 38px; flex: none; }
.logo-name { font-size: 23px; font-weight: 750; letter-spacing: -.03em; color: var(--brand); line-height: 1; }
.logo-tag { font-size: 12.5px; color: var(--ink-3); margin-top: 4px; line-height: 1.2; white-space: nowrap; }

.nav { display: flex; flex-direction: column; gap: 4px; }
.nav a {
  display: flex; align-items: center; gap: 13px;
  height: 46px; padding: 0 14px; border-radius: var(--r-md);
  color: var(--ink-2); font-size: 15px; font-weight: 500;
  transition: background .18s, color .18s;
  position: relative;
}
.nav a .ico { width: 22px; height: 22px; color: #6F7A82; transition: color .18s; }
.nav a:hover { background: #EEF3F2; color: var(--ink); }
.nav a.on { background: var(--active); color: var(--brand); font-weight: 650; }
.nav a.on .ico { color: var(--brand); }
.nav .badge { margin-left: auto; }
.side-foot { margin-top: auto; padding-top: 20px; display: flex; flex-direction: column; gap: 10px; }

.side-card {
  position: relative; overflow: hidden;
  background: linear-gradient(180deg, #EAF4EF 0%, #E2F0EA 100%);
  border-radius: var(--r); padding: 18px 18px 16px;
}
.side-card .art { height: 86px; margin: -4px -6px 6px; }
.side-card b { display: block; font-size: 15.5px; line-height: 1.3; font-weight: 700; color: var(--brand-3); letter-spacing: -.01em; }
.side-card span { display: block; font-size: 13px; color: var(--ink-2); margin-top: 6px; }
.side-card .mini-bar { margin-top: 12px; }

.main { min-width: 0; display: flex; flex-direction: column; }
.topbar {
  position: sticky; top: 0; z-index: 30;
  display: flex; align-items: center; gap: 14px;
  height: 72px; padding: 0 32px;
  background: rgba(244, 247, 249, .82);
  backdrop-filter: saturate(1.4) blur(14px);
  -webkit-backdrop-filter: saturate(1.4) blur(14px);
}
.topbar .burger { display: none; }
.topbar .t-logo { display: none; }
.search {
  position: relative; flex: 0 1 380px;
  display: flex; align-items: center; gap: 10px;
  height: 42px; padding: 0 14px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md);
  color: var(--ink-3);
  transition: border-color .2s, box-shadow .2s;
}
.search:focus-within { border-color: #B9D9CB; box-shadow: 0 0 0 4px rgba(28, 137, 92, .1); }
.search input { flex: 1; min-width: 0; border: 0; outline: 0; background: none; height: 100%; font-size: 14px; color: var(--ink); }
.search input::placeholder { color: var(--ink-3); }
.search kbd { font: 500 12px var(--font); color: var(--ink-3); border: 1px solid var(--line); border-radius: 6px; padding: 1px 6px; }
.search-pop {
  position: absolute; top: calc(100% + 8px); left: 0; right: 0;
  background: var(--surface); border-radius: var(--r-md); box-shadow: var(--sh-3);
  padding: 8px; display: none; max-height: 420px; overflow: auto; z-index: 40;
}
.search-pop.open { display: block; animation: pop .18s var(--ease); }
.search-pop .grp { font-size: 12px; color: var(--ink-3); padding: 8px 10px 4px; }
.search-pop a { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 9px; color: var(--ink); font-size: 14px; }
.search-pop a:hover, .search-pop a.sel { background: var(--hover); }
.search-pop a .r { margin-left: auto; color: var(--ink-3); font-size: 13px; }
.search-pop .none { padding: 14px 10px; color: var(--ink-3); font-size: 13.5px; }
.top-actions { margin-left: auto; display: flex; align-items: center; gap: 6px; }
.icon-btn {
  position: relative; width: 42px; height: 42px; border-radius: var(--r-md);
  display: grid; place-items: center; color: var(--ink-2);
  transition: background .18s, color .18s;
}
.icon-btn:hover { background: #E9EFF1; color: var(--ink); }
.icon-btn .dot { position: absolute; top: 10px; right: 11px; width: 8px; height: 8px; border-radius: 50%; background: #E5484D; box-shadow: 0 0 0 2px var(--bg); }
.avatar {
  width: 40px; height: 40px; border-radius: 50%; flex: none;
  display: grid; place-items: center;
  font-weight: 700; font-size: 14.5px; color: #fff;
  background: var(--brand);
  box-shadow: 0 0 0 3px #fff, 0 2px 8px rgba(21, 79, 70, .25);
}
.user-btn { display: flex; align-items: center; gap: 8px; padding: 4px 6px 4px 4px; border-radius: 14px; margin-left: 4px; }
.user-btn:hover { background: #E9EFF1; }
.user-btn .ico-s { color: var(--ink-3); }
.user-btn .avatar .ico-s { color: #fff; width: 20px; height: 20px; } /* no name yet: a person icon instead of a letter */

.page { padding: 4px 32px 48px; max-width: 1480px; width: 100%; }
.page.wide { max-width: none; }

/* ---------- page header ---------- */
.ph { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin: 6px 0 22px; flex-wrap: wrap; }
.ph h1 { font-size: 30px; line-height: 1.15; font-weight: 750; letter-spacing: -.028em; }
.ph p { color: var(--ink-2); font-size: 15px; margin-top: 7px; }
.ph .acts { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.back { display: inline-flex; align-items: center; gap: 6px; color: var(--ink-2); font-size: 14px; font-weight: 500; margin-bottom: 12px; position: relative; }
.back::after { content: ''; position: absolute; left: -8px; right: -8px; top: -4px; height: 40px; } /* a 40px tap area below the top bar, the text doesn't move */
.back:hover { color: var(--ink); }
.title-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }

/* ---------- layout ---------- */
.grid { display: grid; gap: 20px; }
.g-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.g-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.g-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.g-21 { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
.g-12 { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); }
.g-32 { grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); }
.g-plan { grid-template-columns: minmax(0, .92fr) minmax(0, 1.35fr); align-items: start; }
.ov { display: grid; grid-template-columns: minmax(0, 1fr) var(--rail-w); gap: 20px; align-items: start; }
.col, .rail-rest { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
.row { display: flex; align-items: center; gap: 12px; }
.row.wrap { flex-wrap: wrap; }
.sp { flex: 1; }
.mt-8 { margin-top: 8px; } .mt-12 { margin-top: 12px; } .mt-16 { margin-top: 16px; } .mt-20 { margin-top: 20px; } .mt-24 { margin-top: 24px; }

/* ---------- cards ---------- */
.card {
  background: var(--surface);
  border-radius: var(--r);
  box-shadow: var(--sh-1);
  border: 1px solid rgba(20, 44, 38, .045);
  padding: 22px 24px;
  min-width: 0;
  position: relative;
}
.card.flat { box-shadow: none; }
.card.pad-s { padding: 18px 20px; }
.card.pad-0 { padding: 0; }
.card.mint { background: linear-gradient(180deg, #EAF5F0 0%, #E3F1EB 100%); border-color: transparent; box-shadow: none; }
.card.dark { background: linear-gradient(160deg, #1F5A4B 0%, #143F37 100%); color: #fff; border: 0; }
.card-h { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 18px; min-height: 30px; }
.card-t { font-size: 18px; font-weight: 700; letter-spacing: -.015em; line-height: 1.25; }
.card-s { font-size: 13.5px; color: var(--ink-3); margin-top: 3px; }
.card-h .acts { display: flex; align-items: center; gap: 8px; }
.link { display: inline-flex; align-items: center; gap: 6px; color: var(--ink-2); font-size: 14px; font-weight: 550; border-radius: 8px; transition: color .15s; }
.link:hover { color: var(--brand); }
.link.green { color: var(--green-ink); }
.link.blue { color: var(--blue); }

/* ---------- KPI ---------- */
/* One anatomy on every page: label row, the number, one footnote. The label row has a fixed height and the
   footnote sits on the bottom edge, so numbers and footnotes line up across a row whatever the text. */
.kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.kpi { display: flex; flex-direction: column; min-width: 0; padding: 18px 20px 17px; }
.kpi-h { display: flex; align-items: center; gap: 10px; height: 34px; min-width: 0; }
.kpi-ic { width: 30px; height: 30px; flex: none; border-radius: 9px; display: grid; place-items: center; background: var(--mint-2); color: var(--brand); }
.kpi-ic .ico { width: 16px; height: 16px; }
.kpi-ic.bad { background: var(--red-bg); color: var(--red); }
.kpi .lbl { font-size: 13.5px; color: var(--ink-2); font-weight: 550; line-height: 1.25; min-width: 0; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.kpi .val { font-size: 28px; font-weight: 750; letter-spacing: -.03em; line-height: 1.1; margin-top: 12px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.kpi .foot { display: flex; align-items: center; gap: 6px; margin-top: auto; padding-top: 8px; min-width: 0; font-size: 13px; line-height: 1.35; color: var(--ink-3); }
.kpi .foot > span:not(.kpi-bar):not(.good) { min-width: 0; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } /* up to two lines, never cut mid-word */
.kpi .foot b { color: var(--ink-2); font-weight: 600; }
.kpi .foot b.soon { color: var(--amber); }
.kpi .foot .good { flex: none; display: inline-flex; align-items: center; gap: 2px; color: var(--green-ink); font-weight: 650; }
.kpi-bar { flex: 1 1 auto; min-width: 32px; max-width: 110px; height: 6px; margin-right: 4px; border-radius: 3px; background: #E6EDEA; overflow: hidden; }
.kpi-bar i { display: block; height: 100%; min-width: 0; border-radius: 3px; background: var(--green); transition: width .8s var(--ease); }
.tile {
  width: 52px; height: 52px; flex: none; border-radius: 14px;
  display: grid; place-items: center;
  background: var(--mint-2); color: var(--brand);
}
.tile .ico { width: 26px; height: 26px; }
.tile.s { width: 40px; height: 40px; border-radius: 12px; }
.tile.s .ico { width: 20px; height: 20px; }
.tile.xs { width: 34px; height: 34px; border-radius: 10px; }
.tile.xs .ico { width: 18px; height: 18px; }

.stat { min-width: 0; }
.stat .lbl { font-size: 13px; color: var(--ink-3); }
.stat .val { font-size: 20px; font-weight: 700; letter-spacing: -.02em; margin-top: 3px; }
.stat .val.l { font-size: 24px; }
.stat .sub { font-size: 12.5px; color: var(--ink-3); margin-top: 2px; }
.stats { display: grid; gap: 1px; background: var(--line-2); border-radius: var(--r-md); overflow: hidden; }
.stats > * { background: var(--surface); padding: 14px 16px; }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 44px; padding: 0 18px; border-radius: var(--r-md);
  font-size: 14.5px; font-weight: 650; white-space: nowrap;
  transition: background .18s, color .18s, border-color .18s, transform .12s, box-shadow .18s;
  user-select: none;
}
.btn:active { transform: scale(.98); }
.btn .ico { width: 18px; height: 18px; }
.btn-primary { background: var(--brand); color: #fff; box-shadow: 0 1px 2px rgba(21, 79, 70, .2), inset 0 1px 0 rgba(255, 255, 255, .08); }
.btn-primary:hover { background: var(--brand-2); }
.btn-secondary { background: var(--surface); color: var(--ink); border: 1px solid var(--line-3); }
.btn-secondary:hover { border-color: #C5D0D5; background: #FBFCFC; }
.btn-soft { background: var(--mint); color: var(--brand); }
.btn-soft:hover { background: #D9ECE4; }
.btn-ghost { color: var(--ink-2); height: 38px; padding: 0 12px; }
.btn-ghost:hover { background: #EDF2F2; color: var(--ink); }
.btn-danger { color: var(--red); background: var(--surface); border: 1px solid #F1D3D0; }
.btn-danger:hover { background: var(--red-bg); }
.btn-s { height: 36px; padding: 0 14px; font-size: 13.5px; border-radius: var(--r-sm); }
.btn-l { height: 50px; padding: 0 22px; font-size: 15px; }
.btn-block { width: 100%; }
.btn[disabled] { opacity: .45; pointer-events: none; }
.circle-btn { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--brand); color: #fff; flex: none; transition: transform .2s var(--ease), background .2s; }
.circle-btn:hover { background: var(--brand-2); transform: translateX(2px); }

/* ---------- pills, chips, badges ---------- */
.pill { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 11px; border-radius: var(--r-xs); font-size: 13px; font-weight: 600; white-space: nowrap; }
.pill.amber { background: var(--amber-bg); color: var(--amber); }
.pill.green { background: var(--green-bg); color: var(--green-ink); }
/* a long status (the account card) wraps instead of pushing the page sideways on narrow phones */
.acct-card .pill { max-width: 100%; height: auto; min-height: 28px; padding-top: 4px; padding-bottom: 4px; white-space: normal; line-height: 1.35; }
.pill.red { background: var(--red-bg); color: var(--red-ink); }
.pill.blue { background: var(--blue-bg); color: var(--blue); }
.pill.gray { background: #EEF2F4; color: var(--ink-2); }
.pill.violet { background: var(--violet-bg); color: var(--violet); }
.pill.s { height: 24px; font-size: 12px; padding: 0 9px; border-radius: 7px; }
.pill .ico-s { width: 14px; height: 14px; }
.badge { display: inline-flex; align-items: center; height: 20px; padding: 0 7px; border-radius: 6px; font-size: 12px; font-weight: 650; background: var(--blue-bg); color: var(--blue); }
.badge.green { background: var(--green-bg); color: var(--green-ink); }
.chips { display: flex; gap: 8px; flex-wrap: wrap; }
.chip {
  display: inline-flex; align-items: center; gap: 8px;
  height: 36px; padding: 0 14px; border-radius: var(--r-sm);
  font-size: 13.5px; font-weight: 550; color: var(--ink-2);
  background: var(--surface); border: 1px solid var(--line);
  transition: all .16s;
}
.chip:hover { border-color: var(--line-3); color: var(--ink); }
.chip.on { background: var(--brand); border-color: var(--brand); color: #fff; }
.chip .n { font-size: 12px; font-weight: 650; padding: 1px 7px; border-radius: 6px; background: #EEF2F4; color: var(--ink-2); }
.chip.on .n { background: rgba(255, 255, 255, .18); color: #fff; }
.chip .chip-x { width: 28px; height: 28px; margin-right: -8px; }
.qchip {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 14px; border-radius: var(--r-sm);
  border: 1px solid #CFE0F7; background: #F6F9FE; color: var(--blue);
  font-size: 13.5px; font-weight: 500; text-align: left; line-height: 1.35;
  transition: background .16s, border-color .16s;
}
.qchip:hover { background: #EDF3FD; border-color: #B7CFF3; }

/* ---------- tabs & segmented ---------- */
.tabs { display: flex; gap: 6px; border-bottom: 1px solid var(--line); margin-bottom: 22px; overflow-x: auto; scrollbar-width: none; }
.tabs::-webkit-scrollbar { display: none; }
.tabs a, .tabs button {
  position: relative; padding: 11px 16px 13px; font-size: 14.5px; font-weight: 550; color: var(--ink-3);
  white-space: nowrap; transition: color .16s;
}
.tabs a:hover, .tabs button:hover { color: var(--ink); }
.tabs .on { color: var(--brand); font-weight: 650; }
.tabs .on::after { content: ''; position: absolute; left: 10px; right: 10px; bottom: -1px; height: 2.5px; border-radius: 2px; background: var(--brand); }
.seg { display: inline-flex; padding: 4px; gap: 2px; background: #EDF1F3; border-radius: var(--r-md); }
.seg button { height: 34px; padding: 0 14px; border-radius: 9px; font-size: 13.5px; font-weight: 550; color: var(--ink-2); transition: all .16s; white-space: nowrap; }
.seg button:hover { color: var(--ink); }
.seg button.on { background: var(--surface); color: var(--ink); box-shadow: 0 1px 3px rgba(16, 38, 33, .1); font-weight: 650; }
.seg.dark button.on { background: var(--brand); color: #fff; }
.seg button:focus-visible { outline: 2px solid rgba(28, 137, 92, .45); outline-offset: -2px; }
/* inside a form field the control spans the field and the options share it evenly; a long option ("Встроенные правила",
   "Своя очередь") takes two lines in a narrow card instead of running into its neighbour or being cut (Settings at 901-1024px) */
.field > .seg { display: flex; }
.field > .seg button { flex: 1 1 0; min-width: 0; white-space: normal; line-height: 1.2; height: auto; min-height: 34px; padding: 5px 8px;
  display: flex; align-items: center; justify-content: center; text-align: center; } /* a single long word stays centred in its option */

/* ---------- forms ---------- */
.field { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.field > label, .field > .lab { font-size: 13px; color: var(--ink-2); font-weight: 500; }
.field .hint { font-size: 12.5px; color: var(--ink-3); }
.input, .select, .textarea {
  width: 100%; height: 46px; padding: 0 14px;
  background: var(--surface); border: 1px solid var(--line-3); border-radius: var(--r-md);
  font-size: 14.5px; color: var(--ink); outline: 0;
  transition: border-color .16s, box-shadow .16s;
}
.textarea { height: auto; min-height: 88px; padding: 12px 14px; resize: vertical; line-height: 1.5; }
.input:focus, .select:focus, .textarea:focus { border-color: var(--green); box-shadow: 0 0 0 4px rgba(28, 137, 92, .12); }
/* placeholders: 4.9:1 on white, readable in the sun, yet clearly lighter than typed text (--ink) */
.input::placeholder, .textarea::placeholder, .composer textarea::placeholder { color: var(--ink-3); opacity: 1; }
.input.err { border-color: var(--red); box-shadow: 0 0 0 4px rgba(200, 65, 58, .1); }
.select { appearance: none; -webkit-appearance: none; padding-right: 38px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%2355616A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; }
.affix { position: relative; }
.affix .pre, .affix .suf { position: absolute; top: 50%; transform: translateY(-50%); color: var(--ink-3); font-size: 14.5px; pointer-events: none; }
.affix .pre { left: 14px; }
.affix .suf { right: 14px; }
.affix .input.has-pre { padding-left: 28px; }
.affix .input.has-suf { padding-right: 34px; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 16px; }
.form-grid .full { grid-column: 1 / -1; }
/* lender picker: our own list instead of the native datalist */
.combo { position: relative; }
.combo .input { padding-right: 44px; }
.combo-btn { position: absolute; top: 3px; right: 3px; width: 40px; height: 40px; border-radius: 9px; display: grid; place-items: center; color: var(--ink-3); }
.combo-btn:hover { background: var(--hover); color: var(--ink); }
.combo-list {
  position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 5; display: none;
  max-height: 252px; overflow: auto; padding: 6px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); box-shadow: var(--sh-2);
}
.combo-list.open { display: block; transform-origin: top; animation: pop .16s var(--ease); }
.combo-list .grp { font-size: 12px; color: var(--ink-3); padding: 6px 10px 4px; }
.combo-list .opt { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 9px; font-size: 14px; color: var(--ink); cursor: pointer; }
.combo-list .opt .ico-s { flex: none; color: var(--ink-3); }
.combo-list .opt:hover, .combo-list .opt.sel { background: var(--hover); }
.combo-list .opt .r { margin-left: auto; font-size: 12.5px; color: var(--ink-3); }
.combo-list .opt.own, .combo-list .opt.own .ico-s { color: var(--brand); font-weight: 600; }
.combo-list .none { margin-top: 4px; padding: 9px 10px 6px; border-top: 1px solid var(--line-2); font-size: 12.5px; color: var(--ink-3); }

.switch { position: relative; display: inline-block; vertical-align: middle; width: 46px; height: 28px; flex: none; }
.switch input { position: absolute; opacity: 0; inset: -6px -4px; margin: 0; cursor: pointer; z-index: 1; } /* tap area 40px high, the look stays 28px */
.switch i { position: absolute; inset: 0; border-radius: 999px; background: #D8E0E4; transition: background .2s; }
.switch i::after { content: ''; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .18); transition: transform .22s var(--ease); }
.switch input:checked + i { background: var(--brand); }
.switch input:checked + i::after { transform: translateX(18px); }
.switch input:focus-visible + i { outline: 2px solid var(--green); outline-offset: 2px; }

.range { -webkit-appearance: none; appearance: none; width: 100%; height: 28px; background: transparent; outline: 0; --p: 30%; }
.range::-webkit-slider-runnable-track { height: 6px; border-radius: 6px; background: linear-gradient(90deg, var(--brand) 0 var(--p), #E1E8EB var(--p) 100%); }
.range::-moz-range-track { height: 6px; border-radius: 6px; background: #E1E8EB; }
.range::-moz-range-progress { height: 6px; border-radius: 6px; background: var(--brand); }
.range::-webkit-slider-thumb { -webkit-appearance: none; width: 22px; height: 22px; margin-top: -8px; border-radius: 50%; background: var(--brand); border: 4px solid #fff; box-shadow: 0 1px 6px rgba(16, 38, 33, .3); transition: transform .15s; }
.range::-moz-range-thumb { width: 14px; height: 14px; border-radius: 50%; background: var(--brand); border: 4px solid #fff; box-shadow: 0 1px 6px rgba(16, 38, 33, .3); }
.range:active::-webkit-slider-thumb { transform: scale(1.12); }
.range:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 5px rgba(28, 137, 92, .2); }
.range-legend { display: flex; justify-content: space-between; font-size: 12.5px; color: var(--ink-3); }

.check { width: 18px; height: 18px; border-radius: 5px; border: 1.5px solid var(--line-3); display: grid; place-items: center; background: #fff; flex: none; transition: all .15s; }
.check.on { background: var(--brand); border-color: var(--brand); color: #fff; }
.check svg { width: 12px; height: 12px; }

/* ---------- progress ---------- */
.bar { height: 8px; border-radius: 8px; background: #E8EEF0; overflow: hidden; position: relative; }
.bar > i { position: absolute; inset: 0 auto 0 0; width: 0; border-radius: 8px; background: linear-gradient(90deg, #5DBA64 0%, var(--green-2) 60%, #3E9E58 100%); transition: width 1s var(--ease); }
.bar.thin { height: 6px; }
.bar.thick { height: 12px; border-radius: 12px; }
.bar.on-mint { background: rgba(255, 255, 255, .85); }
.bar.brand > i { background: var(--brand); }
.bar.amber > i { background: #E3A21B; }
.bar.red > i { background: #D9534A; }
.bar-row { display: flex; align-items: center; gap: 12px; }
.bar-row .bar { flex: 1; }
.bar-row b { font-size: 14px; font-weight: 650; min-width: 38px; text-align: right; }

/* ---------- lender / debt tile ---------- */
.dtile { width: 44px; height: 44px; border-radius: 13px; display: grid; place-items: center; flex: none; position: relative; }
.dtile .ico { width: 22px; height: 22px; }
.dtile.s { width: 36px; height: 36px; border-radius: 11px; }
.dtile.s .ico { width: 18px; height: 18px; }
.dtile.l { width: 56px; height: 56px; border-radius: 16px; }
.dtile.l .ico { width: 28px; height: 28px; }
.dname { font-weight: 650; font-size: 15px; letter-spacing: -.005em; line-height: 1.3; }
.dsub { font-size: 13px; color: var(--ink-3); line-height: 1.35; margin-top: 2px; }
.dname, .dsub, .dd-head h1, .modal-h p { overflow-wrap: anywhere; } /* a long name without spaces must not widen the page */

/* ---------- table ---------- */
.tbl { width: 100%; border-collapse: collapse; }
.tbl th { text-align: left; font-size: 13px; font-weight: 500; color: var(--ink-3); padding: 0 12px 12px; white-space: nowrap; }
.tbl td { padding: 14px 12px; border-top: 1px solid var(--line-2); vertical-align: middle; font-size: 14px; }
.tbl th:first-child, .tbl td:first-child { padding-left: 4px; }
.tbl th:last-child, .tbl td:last-child { padding-right: 4px; }
.tbl tr.click { cursor: pointer; transition: background .15s; }
.tbl tr.click:hover td { background: var(--hover); }
.tbl .r { text-align: right; }
.tbl .amt { font-weight: 650; white-space: nowrap; }
.tbl .amt small { display: block; font-weight: 400; color: var(--ink-3); font-size: 12.5px; margin-top: 2px; }
.cell { display: flex; align-items: center; gap: 12px; min-width: 0; }
a.row-link { color: inherit; border-radius: 10px; }
a.row-link:focus-visible { outline-offset: 4px; }
.tbl tr.click:has(.row-link:focus-visible) td { background: var(--hover); }
@media (max-width: 900px) { /* rows are grids on phones: the whole row lights up, not each cell */
  .tbl.resp tr.click:has(.row-link:focus-visible) { background: var(--hover); border-radius: 12px; }
  .tbl.resp tr.click:has(.row-link:focus-visible) td { background: none; }
}
.cell > div { min-width: 0; }
.more-btn { width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center; color: var(--ink-3); }
.more-btn:hover { background: #EDF2F3; color: var(--ink); }
.more-btn:disabled { opacity: .35; pointer-events: none; }

/* ---------- lists ---------- */
.list { display: flex; flex-direction: column; }
.li { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-top: 1px solid var(--line-2); min-width: 0; }
.li:first-child { border-top: 0; padding-top: 0; }
.li:last-child { padding-bottom: 0; }
.li .grow { flex: 1; min-width: 0; }
.li .t { font-size: 14px; font-weight: 550; line-height: 1.35; }
.li .s { font-size: 12.5px; color: var(--ink-3); margin-top: 1px; }
/* a small pill in a list row has the class "s" too: it keeps its own size and colour (the calendar's status pills were grey on green, 4.3:1) */
.li .pill.s { font-size: 12px; margin-top: 0; }
.li .pill.s.green { color: var(--green-ink); }
.li .pill.s.red { color: var(--red-ink); }
.li .pill.s.gray { color: var(--ink-2); }
.li .pill.s.amber { color: var(--amber); }
.li .v { font-weight: 650; white-space: nowrap; }
a.li, button.li { width: 100%; text-align: left; transition: background .15s; border-radius: 10px; }
a.li:hover, button.li:hover { background: var(--hover); }
/* clickable rows in a divided list: even padding around the content, the hover fills a rounded row,
   dividers are straight inset lines that step aside under the hovered row */
.list:not(.art-list) > :is(a, button).li { position: relative; width: calc(100% + 24px); margin: 0 -12px; padding: 12px; border-top: 0; border-radius: 12px; }
.list:not(.art-list) > :is(a, button).li:first-child { margin-top: -12px; }
.list:not(.art-list) > :is(a, button).li:last-child { margin-bottom: -12px; }
.list:not(.art-list) > .li + :is(a, button).li::before { content: ''; position: absolute; left: 12px; right: 12px; top: 0; height: 1px; background: var(--line-2); transition: opacity .15s; }
.list:not(.art-list) > :is(a, button).li:hover::before, .list:not(.art-list) > :is(a, button).li:hover + .li::before { opacity: 0; }
.list > :is(a, button).li:focus-visible { outline-offset: -2px; }
.art-list .li { padding: 11px 8px; margin: 0 -8px; border-top: 0; }
.art-list .li .t { font-weight: 500; color: var(--ink); font-size: 13.5px; }

/* ---------- empty ---------- */
.empty { text-align: center; padding: 34px 20px; color: var(--ink-2); }
.empty .art { width: 180px; height: 110px; margin: 0 auto 14px; }
.empty b { display: block; font-size: 17px; color: var(--ink); margin-bottom: 6px; letter-spacing: -.01em; }
.empty p { font-size: 14px; max-width: 380px; margin: 0 auto 16px; }

/* ---------- tooltip ---------- */
.tip {
  position: fixed; z-index: 90; pointer-events: none;
  background: var(--surface); border-radius: 12px; box-shadow: var(--sh-2);
  border: 1px solid rgba(20, 44, 38, .06);
  padding: 10px 12px; min-width: 130px; max-width: 280px;
  font-size: 12.5px; color: var(--ink-2);
  opacity: 0; transform: translateY(4px); transition: opacity .12s, transform .12s;
}
.tip.on { opacity: 1; transform: translateY(0); }
.tip .t { font-size: 12.5px; color: var(--ink-3); margin-bottom: 4px; }
.tip .v { font-size: 15px; font-weight: 700; color: var(--ink); letter-spacing: -.01em; }
.tip .r { display: flex; align-items: center; gap: 8px; margin-top: 3px; }
.tip .r i { width: 12px; height: 3px; border-radius: 2px; flex: none; }
.tip .r i.sq { width: 9px; height: 9px; border-radius: 3px; }
.tip .r b { margin-left: auto; color: var(--ink); font-weight: 650; font-variant-numeric: tabular-nums; padding-left: 12px; }
.tip .e { margin-top: 6px; padding-top: 6px; border-top: 1px solid var(--line-2); color: var(--green-ink); font-weight: 600; }

/* ---------- charts ---------- */
.chart { position: relative; width: 100%; }
.chart svg { width: 100%; height: auto; overflow: visible; }
.chart .ax text, .chart text.ax { font-size: 12px; fill: var(--ink-3); font-family: var(--font); font-variant-numeric: tabular-nums; }
.chart .grid-l { stroke: #EEF2F4; stroke-width: 1; }
.chart .base-l { stroke: #DCE3E7; stroke-width: 1; }
.legend { display: flex; flex-wrap: wrap; gap: 8px 18px; font-size: 13px; color: var(--ink-2); }
.legend span { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
.legend i { width: 10px; height: 10px; border-radius: 50%; flex: none; }
.legend i.ln { width: 16px; height: 0; border-radius: 0; border-top: 2px solid; }
.legend i.dash { width: 18px; height: 0; border-radius: 0; border-top: 2px dashed; }
.legend i.sq { border-radius: 3px; }
.legend button { display: inline-flex; align-items: center; gap: 8px; color: inherit; font-size: 13px; padding: 2px 0; }
.legend button.off { color: var(--ink-3); } /* off: the words stay readable (4.9:1), the line sample fades */
.legend button.off i { opacity: .35; }
.chart-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.chart-table th { text-align: left; color: var(--ink-3); font-weight: 500; padding: 6px 8px; border-bottom: 1px solid var(--line); position: sticky; top: 0; background: #fff; }
.chart-table td { padding: 7px 8px; border-bottom: 1px solid var(--line-2); font-variant-numeric: tabular-nums; }
.chart-table-wrap { max-height: 300px; overflow: auto; }
.view-toggle { width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center; color: var(--ink-3); border: 1px solid var(--line); }
.view-toggle.on { color: var(--brand); border-color: #BFDCCF; background: var(--mint-3); }
@media (hover: hover) { .view-toggle:hover { color: var(--brand); border-color: #BFDCCF; background: var(--mint-3); } } /* a finger's tap leaves :hover on: the switch looked on after switching back */

/* ---------- donut legend ---------- */
/* a narrow card (a debt page or Analytics at 901-1280px) puts the legend under the donut instead of squeezing it to nothing */
.donut-wrap { display: flex; align-items: center; gap: 18px 22px; flex-wrap: wrap; justify-content: center; }
.donut-wrap .chart { width: 176px; flex: none; }
.dleg { flex: 1 1 200px; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.dleg .it { display: grid; grid-template-columns: 10px minmax(0, 1fr) auto; gap: 4px 10px; align-items: center; font-size: 13.5px; cursor: default; border-radius: 8px; transition: opacity .15s; }
.dleg .it i { width: 10px; height: 10px; border-radius: 50%; }
.dleg .it .n { color: var(--ink); font-weight: 550; min-width: 0; line-height: 1.3; overflow-wrap: anywhere; } /* a long name takes two lines, never cut */
.dleg .it .p { color: var(--ink-2); font-weight: 600; }
.dleg .it .a { grid-column: 2 / -1; color: var(--ink-3); font-size: 12.5px; margin-top: -3px; }
/* income legend: name over the amount, a long category takes two lines instead of being cut (pages-transactions.js) */
.dleg.wrap .it { grid-template-columns: 10px minmax(0, 1fr); align-items: start; align-content: start; }
.dleg.wrap .it i { margin-top: 5px; }
.dleg.wrap .it .n { white-space: normal; overflow-wrap: break-word; line-height: 1.3; }
.dleg.wrap .it .a { margin-top: 0; }
.dleg.wrap .it .a b { color: var(--ink-2); font-weight: 650; }
.dleg.dim .it { opacity: .38; }
.dleg.dim .it.hl { opacity: 1; }

/* ---------- overview specifics ---------- */
.hello h1 { font-size: 32px; }
.freedom { overflow: hidden; container-type: inline-size; }
.freedom .lbl { font-size: 14px; color: var(--ink-2); font-weight: 550; }
.freedom .date-hero { font-size: 42px; font-weight: 780; letter-spacing: -.035em; line-height: 1.05; color: var(--brand-3); margin-top: 6px; display: inline-block; white-space: nowrap; }
/* a long month ("Сентябрь 2034") gets smaller instead of wrapping: --n is the number of letters (pages-overview.js),
   one letter of this face is at most .58em wide, so n * .58em always fits the card */
.freedom .date-hero { font-size: min(42px, calc(100cqi / (var(--n, 8) * .58))); }
.freedom .date-hero.flip { animation: flip .5s var(--ease); }
.freedom .left { font-size: 14.5px; color: var(--ink); margin-top: 8px; font-weight: 500; }
.freedom .route { margin: 10px -24px 4px; height: 170px; }
.freedom .route svg { width: 100%; height: 100%; }
.freedom .foot { display: flex; align-items: center; justify-content: space-between; font-size: 13px; color: var(--ink-2); margin: 12px 0 8px; }
.freedom .foot b { color: var(--ink); font-weight: 650; }
@keyframes flip { 0% { transform: translateY(0); opacity: 1; } 45% { transform: translateY(-14px); opacity: 0; } 55% { transform: translateY(14px); opacity: 0; } 100% { transform: translateY(0); opacity: 1; } }

.insight { display: flex; gap: 12px; }
.insight .tile { width: 40px; height: 40px; border-radius: 12px; }
.insight .tile .ico { width: 20px; height: 20px; }
.insight p { font-size: 13.5px; color: var(--ink-2); line-height: 1.5; }
.insight p b { color: var(--ink); font-weight: 650; }
.ins-mark { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 650; color: var(--brand); }

.qa { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.qa button {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
  min-height: 100px; padding: 14px 8px; border-radius: var(--r-md);
  background: var(--surface-2); border: 1px solid var(--line-2);
  font-size: 13.5px; font-weight: 550; color: var(--ink); text-align: center; line-height: 1.25;
  transition: background .18s, border-color .18s, transform .18s var(--ease);
}
.qa button:hover { background: var(--mint-3); border-color: #CFE6DC; transform: translateY(-2px); }
.qa .tile { width: 42px; height: 42px; border-radius: 12px; background: #fff; box-shadow: 0 1px 3px rgba(16, 38, 33, .08); }
.qa .tile .ico { width: 21px; height: 21px; }
/* in a half-width card four in a row are narrower than their words (901-1100px, 1201-1440px): two rows of two instead */
.card:has(> .qa) { container-type: inline-size; }
@container (max-width: 367px) { .qa { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.promo-dark { overflow: hidden; min-height: 150px; display: flex; flex-direction: column; justify-content: space-between; padding: 22px 24px; }
.promo-dark b { font-size: 21px; line-height: 1.25; font-weight: 700; letter-spacing: -.015em; position: relative; z-index: 1; max-width: 62%; }
.promo-dark .art { position: absolute; right: -8px; bottom: -6px; width: 150px; height: 150px; }
.promo-dark .circle-btn { background: #fff; color: var(--brand); position: relative; z-index: 1; align-self: flex-end; }

.upload-cta { display: flex; gap: 16px; align-items: center; border: 1.5px dashed #C9DAD3; background: var(--mint-3); border-radius: var(--r-md); padding: 16px 18px; transition: border-color .2s, background .2s; cursor: pointer; }
.upload-cta:hover, .upload-cta.drag { border-color: var(--green); background: #EAF6F0; }
.upload-cta b { font-size: 14.5px; font-weight: 650; display: block; }
.upload-cta span { font-size: 13px; color: var(--ink-2); display: block; margin-top: 2px; }

/* ---------- debts page ---------- */
.debt-list { display: flex; flex-direction: column; }
.drow {
  display: grid; grid-template-columns: minmax(220px, 1.6fr) minmax(160px, 1.2fr) 100px 110px 80px 40px;
  align-items: center; gap: 18px; padding: 18px 8px; border-top: 1px solid var(--line-2); cursor: pointer; border-radius: 12px; transition: background .15s;
}
.drow:first-child { border-top: 0; }
.drow:hover { background: var(--hover); }
.drow .bal { font-size: 19px; font-weight: 750; letter-spacing: -.02em; }
.drow .bal small { font-size: 12.5px; font-weight: 400; color: var(--ink-3); letter-spacing: 0; margin-left: 6px; }
.drow .mini { font-size: 12px; color: var(--ink-3); }
.drow .mv { font-size: 14px; font-weight: 600; margin-top: 2px; }
.apr-hi { color: var(--red); }
.apr-mid { color: var(--amber); }
.apr-lo { color: var(--green-ink); }
.sum-strip { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; border-top: 1px solid var(--line); margin: 18px -24px -22px; }
.sum-strip > div { padding: 18px 24px; border-left: 1px solid var(--line-2); }
.sum-strip > div:first-child { border-left: 0; }
.sum-strip .lbl { font-size: 13px; color: var(--ink-3); }
.sum-strip .val { font-size: 22px; font-weight: 750; letter-spacing: -.02em; margin-top: 4px; }
.types { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 12px; }
.types button {
  display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 16px 6px; border-radius: var(--r-md);
  border: 1px solid var(--line); background: var(--surface-2); font-size: 12.5px; font-weight: 550; color: var(--ink-2); text-align: center; line-height: 1.25;
  transition: all .18s var(--ease);
}
.types button:hover { border-color: #CFE6DC; background: var(--mint-3); color: var(--ink); transform: translateY(-2px); }
.types .ico { width: 24px; height: 24px; color: var(--brand); }

/* debt detail */
.dd-head { display: flex; align-items: center; gap: 16px; }
.dd-head h1 { font-size: 28px; font-weight: 750; letter-spacing: -.025em; }
.save-card { display: flex; gap: 16px; }
.save-card > div { min-width: 0; }
.save-card .v { font-size: 24px; font-weight: 750; letter-spacing: -.02em; color: var(--brand-3); margin: 2px 0 6px; }
.save-card p { font-size: 13.5px; color: var(--ink-2); line-height: 1.5; }
.warn-box { display: flex; gap: 14px; padding: 16px 18px; border-radius: var(--r-md); background: #FFF8E6; border: 1px solid #F6E3B0; }
.warn-box .tile { background: #FFEFC7; color: var(--amber); }
.warn-box p { font-size: 13.5px; color: #5F4A12; line-height: 1.5; }
.warn-box b { color: #3E2F05; }
.cmp { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 12px; }
.cmp > div { background: rgba(255, 255, 255, .7); border-radius: 10px; padding: 10px 12px; }
.cmp .lbl { font-size: 12px; color: #7A6632; }
.cmp .val { font-size: 16px; font-weight: 700; color: #3E2F05; margin-top: 2px; }

/* ---------- plan ---------- */
.strat-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.strat { text-align: center; padding: 26px 24px 24px; display: flex; flex-direction: column; border: 1.5px solid transparent; transition: border-color .2s, box-shadow .2s; }
.strat.on { border-color: var(--green); box-shadow: 0 0 0 4px rgba(28, 137, 92, .08), var(--sh-1); }
.strat .art { height: 108px; margin: 0 auto 12px; width: 170px; }
.strat h3 { font-size: 23px; font-weight: 750; letter-spacing: -.02em; }
.strat .d { color: var(--ink-2); font-size: 14.5px; margin: 8px auto 18px; max-width: 250px; line-height: 1.45; }
.strat ul { list-style: none; margin: 0 auto 22px; padding: 0; text-align: left; display: flex; flex-direction: column; gap: 10px; }
.strat li { display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--ink-2); }
.strat li .ico-s { color: var(--green); }
.strat .nums { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; text-align: left; margin: 0 0 16px; padding: 14px 0; border-top: 1px solid var(--line-2); border-bottom: 1px solid var(--line-2); }
.strat .nums .lbl { font-size: 12.5px; color: var(--ink-3); }
.strat .nums .val { font-size: 18px; font-weight: 700; letter-spacing: -.015em; margin-top: 2px; }
.strat .btn { margin-top: auto; }
.reco { display: flex; align-items: center; gap: 18px; padding: 22px 24px; }
.reco .shield { width: 56px; height: 56px; flex: none; }
.reco h3 { font-size: 18px; font-weight: 700; color: var(--brand-3); letter-spacing: -.01em; }
.reco p { color: var(--ink-2); font-size: 14.5px; margin-top: 4px; line-height: 1.5; }
.reco p b { color: var(--ink); }
.reco-t { flex: 1; min-width: 0; }
/* plan header: savings and the date of freedom side by side */
.plan-sum { gap: 28px; }
.plan-sum-date { border-left: 1px solid var(--line-2); padding-left: 28px; }
.plan-sum-date .val { color: var(--brand-3); }

.order-list { display: flex; flex-direction: column; }
.order-list .li { padding: 13px 0; }
.num-badge { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: var(--mint-2); color: var(--brand); font-weight: 700; font-size: 14px; flex: none; }
.num-badge.done { background: var(--green-bg); color: var(--green-ink); }
.monthly-plan { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; margin-bottom: 16px; }
.monthly-plan > div { padding: 2px 16px; border-left: 1px solid var(--line-2); }
.monthly-plan > div:first-child { padding-left: 0; border-left: 0; }
.monthly-plan .val { font-size: 20px; font-weight: 750; letter-spacing: -.02em; white-space: nowrap; }
.monthly-plan .lbl { font-size: 12.5px; color: var(--ink-3); margin-top: 2px; }
/* three columns while each has room for its words; in a narrower card (a phone, 901-1200px beside the sidebar)
   one row per number, so "дополнительно" never runs into "в месяц" or across the divider */
div:has(> .monthly-plan) { container-type: inline-size; }
@container (max-width: 399px) {
  .monthly-plan { grid-template-columns: minmax(0, 1fr); row-gap: 8px; }
  .monthly-plan > div, .monthly-plan > div:first-child { padding: 0; border-left: 0; display: flex; align-items: baseline; gap: 10px; }
}

.stages { position: relative; display: grid; gap: 0; padding-top: 6px; }
.stages .track { position: absolute; left: 12px; right: 12px; top: 18px; height: 3px; border-radius: 3px; background: #E4EBEE; }
.stages .track i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 3px; background: var(--green); width: 0; transition: width 1.2s var(--ease); }
.stage { position: relative; padding-top: 34px; min-width: 0; }
.stage .dot { position: absolute; top: 0; left: 0; width: 26px; height: 26px; border-radius: 50%; background: #fff; border: 3px solid #D5DEE2; display: grid; place-items: center; }
.stage.done .dot { background: var(--green); border-color: var(--green); color: #fff; }
.stage.next .dot { border-color: var(--green); }
.stage.final .dot { border: 0; background: none; }
.stage .when { font-size: 13px; font-weight: 650; color: var(--green-ink); }
.stage.future .when { color: var(--ink-2); }
.stage .what { font-size: 12.5px; color: var(--ink-3); margin-top: 3px; }
.stage .who { font-size: 14px; font-weight: 650; margin-top: 2px; line-height: 1.3; }
/* a long lender name ("U.S. Department of Education (MOHELA)"): two lines at most, never into the next stage;
   4px keep the words of neighbouring stages apart ("Capital One" / "Chase") */
.stage { padding-right: 4px; }
.stage:last-child { padding-right: 0; }
.stage .who { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.stage .amt { font-size: 12.5px; color: var(--ink-3); margin-top: 2px; }

.sim-res { display: grid; grid-template-columns: minmax(0, 1.1fr) repeat(3, minmax(0, 1fr)); gap: 8px; }
.sim-res > div { padding: 14px 12px; border-radius: 10px; text-align: center; font-size: 17px; font-weight: 700; letter-spacing: -.015em; }
.sim-res .h { font-size: 13px; font-weight: 550; color: var(--ink-3); padding: 4px 12px; letter-spacing: 0; }
.sim-res .h.new { color: var(--green-ink); }
.sim-res .h.win span { display: inline-block; background: var(--green-bg); color: var(--green-ink); padding: 3px 10px; border-radius: 7px; font-weight: 650; }
.sim-res .rl { text-align: left; font-size: 13.5px; font-weight: 500; color: var(--ink-2); background: var(--surface-2); letter-spacing: 0; display: flex; align-items: center; }
.sim-res .cur { background: var(--surface-2); }
.sim-res .nw { background: var(--mint-3); }
.sim-res .gain { background: #EAF6EF; color: var(--green-ink); }
.sim-res .gain.none { color: var(--ink-3); background: var(--surface-2); }
.toggle-row { display: flex; align-items: flex-start; gap: 14px; padding: 14px 0; border-top: 1px solid var(--line-2); }
.toggle-row .switch { margin-top: 6px; }
.toggle-row .inline { flex-wrap: wrap; }
.toggle-row .inline .select { max-width: 150px; }
.toggle-row .grow { flex: 1; min-width: 0; }
.toggle-row .t { font-size: 13.5px; color: var(--ink-2); font-weight: 500; }
.toggle-row .v { font-size: 16px; font-weight: 700; margin-top: 1px; }
.toggle-row .inline { display: inline-flex; align-items: center; gap: 8px; margin-top: 6px; }
.toggle-row .inline .input { height: 36px; width: 92px; font-size: 14px; }
.toggle-row .inline .select { height: 36px; width: auto; font-size: 13px; }
.big-input { font-size: 28px; font-weight: 750; letter-spacing: -.02em; height: 64px; border-radius: 14px; padding-left: 34px; }
.big-affix .pre { font-size: 22px; font-weight: 700; color: var(--ink-2); left: 16px; }
.hint-card { display: flex; gap: 12px; padding: 14px 16px; border-radius: var(--r-md); background: var(--mint-3); font-size: 13.5px; color: var(--ink-2); line-height: 1.5; }
.hint-card b { color: var(--ink); }
/* one-time payment: amount, month and the add button; in a narrow card the amount takes its own line */
.ot-row { display: flex; flex-wrap: wrap; gap: 12px; }
.ot-row > .affix { flex: 1 1 170px; min-width: 0; }
.ot-when { flex: 1 1 200px; display: flex; gap: 12px; min-width: 0; }
.ot-when .select { flex: 1; min-width: 0; }
.ot-when .btn { flex: none; }

/* schedule table */
.sched { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.sched th { text-align: left; font-weight: 500; color: var(--ink-3); padding: 8px 10px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.sched td { padding: 11px 10px; border-bottom: 1px solid var(--line-2); font-variant-numeric: tabular-nums; }
.sched .r { text-align: right; }
.sched tr.close td { background: #F3FAF6; }
.sched .ev { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--green-ink); font-weight: 600; }
/* phones: month, payment and balance only; the interest goes under the payment and a closed debt gets
   its own full-width row (pages-plan.js schedHtml), so the key numbers fit without a sideways scroll */
.sched .s-narrow { display: none; }
@media (max-width: 640px) {
  .sched { font-size: 13.5px; }
  .sched th, .sched td { padding-left: 6px; padding-right: 6px; }
  .sched th:first-child, .sched td:first-child { padding-left: 0; }
  .sched th:nth-child(5), .sched td:nth-child(5) { padding-right: 0; }
  .sched .s-wide { display: none; }
  .sched small.s-narrow { display: block; margin-top: 1px; font-size: 12px; font-weight: 400; color: var(--ink-3); white-space: nowrap; }
  .sched tr.s-narrow { display: table-row; }
  .sched tr:has(+ .ev-row) td { border-bottom-color: transparent; }
  .sched .ev-row td { padding: 0 0 11px; }
}

/* ---------- transactions ---------- */
.flow-bar { display: flex; height: 42px; border-radius: 12px; overflow: hidden; gap: 2px; background: #fff; }
.flow-bar > i { display: block; height: 100%; min-width: 3px; transition: flex-grow .8s var(--ease), opacity .15s; cursor: default; }
.flow-bar > i:first-child { border-radius: 12px 0 0 12px; }
.flow-bar > i:last-child { border-radius: 0 12px 12px 0; }
.flow-bar.dim > i { opacity: .35; }
.flow-bar.dim > i.hl { opacity: 1; }
.cat-bars { display: flex; flex-direction: column; gap: 14px; }
.cat-bar { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; gap: 4px 12px; align-items: center; }
.cat-bar .tile { width: 34px; height: 34px; border-radius: 10px; grid-row: span 2; }
.cat-bar .tile .ico { width: 17px; height: 17px; }
.cat-bar .n { font-size: 14px; font-weight: 550; }
.cat-bar .v { font-size: 14px; font-weight: 650; text-align: right; }
.cat-bar .v small { font-weight: 400; color: var(--ink-3); font-size: 12.5px; margin-left: 6px; }
.cat-bar .bar { grid-column: 2 / -1; height: 6px; }
.cat-bar .bar > i { background: var(--green); }

.rec { display: flex; gap: 14px; padding: 16px 0; border-top: 1px solid var(--line-2); align-items: flex-start; }
.rec:first-child { border-top: 0; padding-top: 2px; }
.rec .grow { flex: 1; min-width: 0; }
.rec .t { font-size: 14.5px; font-weight: 650; letter-spacing: -.005em; line-height: 1.35; }
.rec .x { font-size: 13.5px; color: var(--ink-2); margin-top: 4px; line-height: 1.5; }
.rec .m { text-align: right; flex: none; }
.rec .m b { display: block; font-size: 16px; font-weight: 750; color: var(--green-ink); letter-spacing: -.01em; white-space: nowrap; }
.rec .m span { font-size: 12px; color: var(--ink-3); white-space: nowrap; }
.rec .m .switch { display: block; margin: 10px 0 0 auto; }
.rec.medium .m b { color: var(--ink-2); }
.found-hero { display: flex; align-items: center; gap: 20px; padding: 22px 24px; }
.found-hero .v { font-size: 38px; font-weight: 780; letter-spacing: -.03em; color: var(--brand-3); line-height: 1; }
.found-hero .arrow { color: var(--ink-3); }
.date-swap { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 14px; color: var(--ink-2); }
.date-swap s { color: var(--ink-3); }
.date-swap b { color: var(--green-ink); font-size: 16px; }

.tx-table td { padding: 12px 12px; }
.tx-desc { display: flex; align-items: center; gap: 12px; min-width: 0; }
.tx-desc .tile { width: 36px; height: 36px; border-radius: 10px; }
.tx-desc .tile .ico { width: 18px; height: 18px; }
.tx-desc .m { font-weight: 600; font-size: 14px; }
.tx-desc .o { font-size: 12px; color: var(--ink-3); max-width: 360px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cat-pill { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px; border-radius: 8px; font-size: 12.5px; font-weight: 550; background: #F1F4F6; color: var(--ink-2); white-space: nowrap; border: 0; cursor: pointer; }
.cat-pill:hover { background: #E8EDF0; }
.cat-pill .ico-s { width: 14px; height: 14px; }
.cat-pill.debt { background: var(--violet-bg); color: var(--violet); }
.cat-pill.income { background: var(--green-bg); color: var(--green-ink); }
.cat-pill.fees { background: var(--red-bg); color: var(--red-ink); }
.cat-pill.subscriptions { background: var(--blue-bg); color: var(--blue); }
.amt-in { color: var(--green-ink); }
.file-row { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 12px; background: var(--surface-2); border: 1px solid var(--line-2); }
.file-row .grow { flex: 1; min-width: 0; }
.file-row .t { font-weight: 600; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.file-row .s { font-size: 12.5px; color: var(--ink-3); }

/* ---------- upload / dropzone ---------- */
.drop {
  display: block; position: relative; border: 2px dashed #C6D8D0; border-radius: 18px; background: linear-gradient(180deg, #F7FBF9 0%, #F1F8F4 100%);
  padding: 34px 24px; text-align: center; transition: border-color .2s, background .2s, transform .2s var(--ease);
  cursor: pointer;
}
.drop:hover { border-color: #93C4AE; }
.drop.drag { border-color: var(--green); background: #E8F5EE; transform: scale(1.01); }
.drop input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.drop .art { width: 150px; height: 96px; margin: 0 auto 10px; }
.drop b { display: block; font-size: 18px; font-weight: 700; letter-spacing: -.01em; }
.drop p { color: var(--ink-2); font-size: 14px; margin: 6px auto 0; max-width: 420px; }
/* a touch screen can't drag a file: it only picks one */
.drop .drop-touch { display: none; }
@media (hover: none) { .drop .drop-mouse { display: none; } .drop .drop-touch { display: inline; } }
.fmt { display: flex; gap: 8px; justify-content: center; margin-top: 14px; flex-wrap: wrap; }
.fmt span { font-size: 12.5px; font-weight: 650; padding: 4px 10px; border-radius: 7px; background: #fff; border: 1px solid var(--line); color: var(--ink-2); }
.privacy { display: flex; gap: 12px; align-items: flex-start; font-size: 13px; color: var(--ink-2); line-height: 1.5; }
.privacy .ico { color: var(--green); margin-top: 1px; }
.bank-tips { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.bank-tip { padding: 12px 14px; border-radius: 12px; border: 1px solid var(--line-2); background: var(--surface-2); font-size: 13px; color: var(--ink-2); line-height: 1.45; }
.bank-tip b { display: block; color: var(--ink); font-size: 13.5px; margin-bottom: 2px; }
.steps-run { display: flex; flex-direction: column; gap: 14px; padding: 6px 0; }
.step-run { display: flex; align-items: center; gap: 12px; font-size: 14.5px; color: var(--ink-3); transition: color .3s; }
.step-run .st { width: 26px; height: 26px; border-radius: 50%; border: 2px solid var(--line-3); display: grid; place-items: center; flex: none; transition: all .3s; }
.step-run.run { color: var(--ink); }
.step-run.run .st { border-color: var(--green); border-top-color: transparent; animation: spin .8s linear infinite; }
.step-run.ok { color: var(--ink); }
.step-run.ok .st { background: var(--green); border-color: var(--green); color: #fff; animation: pop .3s var(--ease); }
.step-run .st svg { width: 14px; height: 14px; }
@keyframes spin { to { transform: rotate(360deg); } }
.map-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.preview-tbl { width: 100%; border-collapse: collapse; font-size: 13px; }
.preview-tbl td, .preview-tbl th { padding: 8px 10px; border-bottom: 1px solid var(--line-2); text-align: left; }
.preview-tbl th { color: var(--ink-3); font-weight: 500; }
.preview-tbl td.r, .preview-tbl th.r { text-align: right; }
.preview-wrap { max-height: 260px; overflow: auto; border: 1px solid var(--line); border-radius: 12px; }
.detect { display: flex; flex-wrap: wrap; gap: 8px; }

/* ---------- modal ---------- */
.overlay {
  position: fixed; inset: 0; z-index: 70; background: rgba(12, 28, 24, .34);
  backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
  display: grid; place-items: center; padding: 24px; overflow-y: auto;
  animation: fade .2s ease;
}
.overlay.out { animation: fade .18s ease reverse forwards; pointer-events: none; } /* no second click while it closes */
.modal {
  position: relative; width: 100%; max-width: 540px; background: var(--surface); border-radius: var(--r-xl);
  box-shadow: var(--sh-3); padding: 28px; animation: rise .28s var(--ease);
  max-height: calc(100vh - 48px); overflow-y: auto;
}
.modal.wide { max-width: 860px; }
.modal.mid { max-width: 680px; }
.modal-h { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 20px; }
.modal-h h2 { font-size: 22px; font-weight: 750; letter-spacing: -.02em; line-height: 1.25; }
.modal-h p { color: var(--ink-2); font-size: 14px; margin-top: 4px; }
.x-btn { width: 40px; height: 40px; border-radius: 10px; display: grid; place-items: center; color: var(--ink-3); flex: none; margin: -6px -8px 0 0; }
.x-btn:hover { background: #EEF2F3; color: var(--ink); }
.modal-f { display: flex; gap: 10px; justify-content: flex-end; margin-top: 24px; flex-wrap: wrap; }
.modal-f.split { justify-content: space-between; }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes rise { from { opacity: 0; transform: translateY(12px) scale(.985); } to { opacity: 1; transform: none; } }
@keyframes pop { from { opacity: 0; transform: scale(.94); } to { opacity: 1; transform: none; } }

.stepper { display: flex; align-items: center; gap: 10px; margin-bottom: 24px; }
.stepper .s { display: flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 550; color: var(--ink-3); white-space: nowrap; }
.stepper .s i { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font-style: normal; font-size: 12.5px; font-weight: 700; background: #EDF1F3; color: var(--ink-2); }
.stepper .s.on { color: var(--brand); }
.stepper .s.on i { background: var(--brand); color: #fff; }
.stepper .s.done i { background: var(--green-bg); color: var(--green-ink); }
.stepper .ln { flex: 1; height: 1.5px; background: var(--line); min-width: 16px; }
.pick-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.pick {
  display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 14px 6px; border-radius: 12px;
  border: 1.5px solid var(--line); background: #fff; font-size: 12.5px; font-weight: 550; color: var(--ink-2); text-align: center; line-height: 1.25; transition: all .15s;
}
.pick:hover { border-color: var(--line-3); }
.pick.on { border-color: var(--green); background: var(--mint-3); color: var(--brand); box-shadow: 0 0 0 3px rgba(28, 137, 92, .1); }
.pick .ico { width: 22px; height: 22px; color: var(--brand); }
.amount-opts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.amount-opts button { padding: 12px 8px; border-radius: 12px; border: 1.5px solid var(--line); text-align: center; transition: all .15s; }
.amount-opts button b { display: block; font-size: 16px; font-weight: 700; }
.amount-opts button span { display: block; font-size: 12px; color: var(--ink-3); margin-top: 2px; }
.amount-opts button:hover { border-color: var(--line-3); }
.amount-opts button.on { border-color: var(--brand); background: var(--brand); color: #fff; }
.amount-opts button.on span { color: rgba(255, 255, 255, .75); }
.where { background: linear-gradient(180deg, #F3F9F6 0%, #EDF6F1 100%); border-radius: 16px; padding: 20px; }
.where h4 { font-size: 15px; font-weight: 700; margin-bottom: 12px; }
.where .art { height: 88px; margin: 0 0 12px; }
.where ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.where li { display: flex; gap: 10px; font-size: 13px; color: var(--ink-2); line-height: 1.45; }
.where li .ico-s { color: var(--green); margin-top: 2px; }
.where .safe { display: flex; gap: 10px; margin-top: 16px; padding-top: 14px; border-top: 1px solid rgba(21, 79, 70, .1); font-size: 12.5px; color: var(--ink-2); }
.add-grid { display: grid; grid-template-columns: minmax(0, 1fr) 250px; gap: 24px; }
.confirm-list { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--line-2); border-radius: 12px; overflow: hidden; }
.confirm-list > div { background: var(--surface-2); padding: 12px 14px; }
.confirm-list .lbl { font-size: 12.5px; color: var(--ink-3); }
.confirm-list .val { font-size: 15px; font-weight: 650; margin-top: 2px; }

/* freedom (finish line) */
.fscene { position: relative; height: clamp(300px, 36vw, 430px); overflow: hidden; }
.fscene > svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.fscene .txt { position: absolute; left: 0; right: 0; bottom: 0; padding: 0 24px 64px; text-align: center; }
.fscene h1 { font-size: clamp(28px, 4vw, 44px); font-weight: 800; letter-spacing: -.03em; margin-top: 10px; }
/* the line under the title sits on the mountain: a light backdrop keeps it readable (4.5:1 and more) */
.fscene .txt p.soft { display: inline-block; padding: 8px 14px; border-radius: 14px; background: rgba(255, 255, 255, .86); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
.fstats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; padding: 0 24px; margin-top: -40px; position: relative; }
.fstats > div { background: #fff; border-radius: 14px; box-shadow: var(--sh-2); text-align: center; padding: 18px 12px; }
.fstats b { display: block; font-size: 22px; font-weight: 780; letter-spacing: -.02em; }
.fstats span { display: block; font-size: 13px; color: var(--ink-3); margin-top: 2px; }
@media (max-width: 900px) { .fstats { grid-template-columns: 1fr 1fr; padding: 0 14px; } .fscene .txt { padding-bottom: 54px; } }

/* celebration */
/* scrolls like any window when the screen is short (320x568, a phone on its side); the picture shrinks with the screen height */
.celebrate { text-align: center; overflow-x: hidden; overflow-y: auto; padding: 0; }
.celebrate .scene { height: min(230px, 30vh); position: relative; }
.celebrate .scene svg { width: 100%; height: 100%; }
.celebrate .body { padding: 8px 32px 30px; }
.celebrate h2 { font-size: 28px; font-weight: 780; letter-spacing: -.025em; }
.celebrate p { color: var(--ink-2); margin-top: 8px; font-size: 15px; }
canvas.confetti { position: fixed; inset: 0; pointer-events: none; z-index: 95; }

/* ---------- toast ---------- */
.toasts { position: fixed; left: 50%; bottom: 26px; transform: translateX(-50%); z-index: 130; display: flex; flex-direction: column; gap: 10px; align-items: center; pointer-events: none; }
.toast { display: flex; align-items: center; gap: 12px; background: #0F2721; color: #fff; padding: 12px 16px 12px 14px; border-radius: 14px; box-shadow: var(--sh-3); font-size: 14px; font-weight: 500; pointer-events: auto; animation: rise .3s var(--ease); max-width: min(560px, calc(100vw - 32px)); }
.toast .ico { color: #7FD6A8; }
.toast button { flex: none; min-height: 40px; padding: 0 8px; margin: -10px -8px -10px 2px; border-radius: 10px; color: #9FE3BE; font-weight: 650; } /* a 40px tap area inside the toast's own padding */
.toast.out { animation: fade .25s ease reverse forwards; }

/* ---------- popover ---------- */
.pop { position: absolute; z-index: 65; background: var(--surface); border-radius: 14px; box-shadow: var(--sh-3); padding: 8px; min-width: 200px; animation: pop .16s var(--ease); overflow-y: auto; overscroll-behavior: contain; } /* above the tab bar; a menu taller than the room it has scrolls (util.js Pop) */
.pop.notif { width: 360px; padding: 10px; }
.pop .h { padding: 8px 10px 10px; font-weight: 700; font-size: 15px; display: flex; justify-content: space-between; align-items: center; }
.pop a, .pop button.it { display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px; border-radius: 10px; font-size: 14px; text-align: left; color: var(--ink); }
.pop a:hover, .pop button.it:hover { background: var(--hover); }
.pop button.it.danger { color: var(--red); }
.pop .n-it { display: flex; gap: 12px; padding: 10px; border-radius: 10px; }
.pop .n-it:hover { background: var(--hover); }
.pop .n-it .t { font-size: 13.5px; font-weight: 600; line-height: 1.35; }
.pop .n-it .s { font-size: 12.5px; color: var(--ink-3); margin-top: 2px; line-height: 1.4; }

/* ---------- assistant ---------- */
.chat-wrap { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 20px; align-items: start; }
.chat-card { display: flex; flex-direction: column; height: calc(100vh - 196px); min-height: 520px; padding: 0; overflow: hidden; }
.chat { flex: 1; overflow-y: auto; padding: 24px 26px 8px; display: flex; flex-direction: column; gap: 18px; scroll-behavior: smooth; }
.msg { display: flex; gap: 12px; max-width: 820px; animation: rise .3s var(--ease); }
.msg.me { align-self: flex-end; flex-direction: row-reverse; }
.msg .ava { width: 38px; height: 38px; border-radius: 50%; flex: none; display: grid; place-items: center; background: linear-gradient(145deg, #E3F2EA, #CFE8DB); color: var(--brand); }
.msg .ava .ico { width: 20px; height: 20px; }
.msg.me .ava { background: var(--brand); color: #fff; font-weight: 700; font-size: 14px; }
.bubble { background: #F4F8FB; border-radius: 4px 16px 16px 16px; padding: 14px 16px; font-size: 14.5px; line-height: 1.55; color: var(--ink); min-width: 0; }
.msg.me .bubble { background: var(--brand); color: #fff; border-radius: 16px 4px 16px 16px; }
.bubble p + p { margin-top: 8px; }
.bubble b { font-weight: 650; }
.bubble .time { font-size: 12px; color: var(--ink-3); margin-top: 6px; }
.msg.me .bubble .time { color: rgba(255, 255, 255, .6); }
.bubble ol { margin: 10px 0 0; padding: 0; list-style: none; counter-reset: r; display: flex; flex-direction: column; gap: 10px; }
.bubble ol li { counter-increment: r; display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 2px 12px; background: #fff; border-radius: 12px; padding: 12px 14px 12px 12px; border: 1px solid var(--line-2); }
.bubble ol li::before { content: counter(r); grid-row: span 2; width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; background: var(--mint-2); color: var(--brand); font-weight: 700; font-size: 13.5px; }
.bubble ol li b { font-size: 14px; }
.bubble ol li span { font-size: 13.5px; color: var(--ink-2); }
.bubble .kv { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 8px; margin-top: 10px; }
.bubble .kv > div { background: #fff; border-radius: 10px; padding: 10px 12px; border: 1px solid var(--line-2); }
.bubble .kv .lbl { font-size: 12px; color: var(--ink-3); }
.bubble .kv .val { font-size: 16px; font-weight: 700; margin-top: 2px; letter-spacing: -.01em; }
.bubble .kv .val.g { color: var(--green-ink); }
.bubble .mini-chart { background: #fff; border-radius: 12px; border: 1px solid var(--line-2); padding: 12px 14px 8px; margin-top: 10px; }
.bubble .acts { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.bubble table { width: 100%; border-collapse: collapse; margin-top: 10px; background: #fff; border-radius: 10px; overflow: hidden; font-size: 13px; }
.bubble table td, .bubble table th { padding: 8px 10px; border-bottom: 1px solid var(--line-2); text-align: left; }
.bubble table th { color: var(--ink-3); font-weight: 500; }
.bubble table .r { text-align: right; }
.typing { display: inline-flex; gap: 4px; padding: 4px 2px; }
.typing i { width: 7px; height: 7px; border-radius: 50%; background: #9FB3AA; animation: blink 1.2s infinite; }
.typing i:nth-child(2) { animation-delay: .15s; }
.typing i:nth-child(3) { animation-delay: .3s; }
@keyframes blink { 0%, 60%, 100% { opacity: .25; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-3px); } }
.chat-foot { padding: 12px 22px 20px; border-top: 1px solid var(--line-2); background: #fff; }
.chat-sugg { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.composer { display: flex; align-items: flex-end; gap: 10px; background: var(--surface-2); border: 1px solid var(--line); border-radius: 16px; padding: 8px 8px 8px 16px; transition: border-color .2s, box-shadow .2s; }
.composer:focus-within { border-color: #B9D9CB; box-shadow: 0 0 0 4px rgba(28, 137, 92, .1); background: #fff; }
.composer textarea { flex: 1; border: 0; outline: 0; background: none; resize: none; font-size: 14.5px; line-height: 1.5; padding: 7px 0; max-height: 140px; min-height: 22px; }
.composer .send { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: var(--brand); color: #fff; flex: none; transition: background .15s, opacity .15s; }
.composer .send:disabled { opacity: .35; }
.recs3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.recs3 .card { padding: 18px; display: flex; flex-direction: column; gap: 8px; }
.recs3 .t { font-size: 14.5px; font-weight: 650; line-height: 1.35; }
.recs3 .x { font-size: 13px; color: var(--ink-2); line-height: 1.5; flex: 1; }
.ctx-list .li .t { font-size: 13.5px; }

/* ---------- calendar ---------- */
.cal { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
.cal .dow { font-size: 12.5px; color: var(--ink-3); text-align: center; padding: 4px 0 8px; }
.cal .day {
  position: relative; min-height: 92px; border-radius: 12px; padding: 8px 9px; background: var(--surface-2); border: 1px solid var(--line-2);
  display: flex; flex-direction: column; gap: 4px; text-align: left; transition: background .15s, border-color .15s; min-width: 0;
}
.cal .day:hover { border-color: var(--line-3); background: #fff; }
.cal .day.out { opacity: .35; }
.cal .day.today { border-color: var(--green); box-shadow: 0 0 0 3px rgba(28, 137, 92, .1); background: #fff; }
.cal .day.sel { background: var(--mint-3); border-color: #BFDCCF; }
.cal .day .dn { font-size: 13.5px; font-weight: 650; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.cal .day.today .dn { color: var(--brand); }
.cal .ev { display: flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 600; border-radius: 6px; padding: 3px 5px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; min-width: 0; }
.cal .ev .nm { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cal .ev.pay { background: #fff; border: 1px solid var(--line); color: var(--ink); }
.cal .ev.paid { background: var(--green-bg); color: var(--green-ink); border: 0; }
.cal .ev.late { background: var(--red-bg); color: var(--red-ink); }
.cal .ev.part { background: var(--amber-bg); color: var(--amber); }
.cal .ev.payday { background: #EAF1FD; color: var(--blue); }
.cal .ev.more { color: var(--ink-3); background: none; padding-left: 2px; }
/* a computer (901px+): a name that doesn't fit beside its mark goes under it and may take two lines ("Capital / One"),
   instead of "Cha…" in every narrow day cell */
@media (min-width: 901px) {
  .cal .day { padding: 8px 6px; }
  .cal .ev { flex-wrap: wrap; gap: 1px 4px; padding: 3px 4px; white-space: normal; }
  .cal .ev .nm { flex: 1 1 auto; white-space: normal; overflow: visible; overflow-wrap: anywhere; line-height: 1.25; }
  .cal { container-type: inline-size; }
}
@container (max-width: 600px) { /* 70-px days (901-1000px, 1201px): tighter cells, so "Discover" or "Financial" stay whole */
  .cal .day { padding: 6px 4px; }
  .cal .ev { padding: 2px; }
}
/* status marks (pages-analytics.js ST): a shape and a sign for each status, never the colour alone.
   Same marks in the legend, the day cells and the list, each with its name next to it or for screen readers */
.st-mark { width: 14px; height: 14px; flex: none; display: inline-block; vertical-align: -2px; }
.st-mark.pay { color: var(--amber-mark); }
.st-mark.paid { color: var(--green); }
.st-mark.late { color: var(--red); }
.st-mark.part { color: var(--amber-mark); }
.st-mark.payday { color: var(--blue); }
.cal .ev .st-mark { width: 12px; height: 12px; }
.legend .st-mark { width: 14px; height: 14px; }
.pill .st-mark { width: 13px; height: 13px; }
/* month title and arrows stay together; the legend moves under them when the row is full, and on a narrow phone
   "Сегодня" moves to the next line instead of pushing the page sideways */
.card-h:has(> .cal-head) { flex-wrap: wrap; }
.cal-head { display: flex; align-items: center; gap: 6px 10px; flex-wrap: wrap; flex: 0 1 auto; min-width: 0; }
.cal-head h3 { font-size: 20px; font-weight: 700; letter-spacing: -.015em; min-width: 170px; white-space: nowrap; }

/* ---------- mobile tab bar ---------- */
.tabbar { display: none; }
.scrim { display: none; }

/* ---------- entrance motion ---------- */
/* page change: a short settle, no fade, so content never blinks out */
.rise > * { animation: pageIn .3s var(--ease) both; }
@keyframes pageIn { from { transform: translateY(6px); } to { transform: none; } }


/* ---------- product tour ---------- */
.tour { position: fixed; inset: 0; z-index: 120; pointer-events: none; animation: fade .25s ease; }
.tour.out { animation: fade .22s ease reverse forwards; }
/* paused while a form from a live step is open: only the "still waiting" bar stays, above the form */
.tour.paused { animation: none; }
.tour.paused > :not(.tour-wait) { display: none; }
.tour-wait {
  position: fixed; top: 14px; left: 50%; transform: translateX(-50%);
  display: none; align-items: center; gap: 10px; width: max-content; max-width: calc(100vw - 24px);
  padding: 6px 6px 6px 10px; background: var(--surface); border-radius: 14px; box-shadow: var(--sh-3);
  font-size: 13.5px; line-height: 1.35; color: var(--ink-2); pointer-events: auto;
}
.tour.paused .tour-wait { display: flex; animation: waitIn .28s var(--ease); }
.tour-wait .tour-count, .tour-wait .btn { flex: none; }
.tour-wait .t { min-width: 0; }
/* --tour-wait-b: the bar's bottom edge plus a gap, measured when it shows (tour.js pause) */
body.tour-waiting .overlay { padding-top: var(--tour-wait-b, 76px); }
body.tour-waiting .modal { max-height: calc(100vh - var(--tour-wait-b, 76px) - 24px); }
@keyframes waitIn { from { opacity: 0; transform: translate(-50%, -8px); } to { opacity: 1; transform: translate(-50%, 0); } }
.tour-b { position: fixed; pointer-events: auto; background: transparent; }
.tour-spot {
  position: fixed; border-radius: 18px; pointer-events: none;
  box-shadow: 0 0 0 200vmax rgba(9, 26, 22, .56);
  transition: left .45s var(--ease), top .45s var(--ease), width .45s var(--ease), height .45s var(--ease), border-radius .45s var(--ease);
}
.tour-spot::after { content: ''; position: absolute; inset: -4px; border-radius: inherit; border: 2px solid rgba(255, 255, 255, .95); animation: tourPulse 2.2s ease-in-out infinite; }
.tour-spot.center::after { display: none; }
@keyframes tourPulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(111, 211, 155, .6); } 50% { box-shadow: 0 0 0 9px rgba(111, 211, 155, 0); } }
.tour-card {
  position: fixed; pointer-events: auto; width: 376px; max-width: calc(100vw - 24px);
  background: #fff; border-radius: 18px; padding: 18px 20px 16px;
  box-shadow: 0 24px 64px rgba(8, 24, 20, .3), 0 2px 8px rgba(8, 24, 20, .08);
  transition: opacity .22s ease, transform .22s var(--ease);
}
.tour-card.hide { opacity: 0; transform: translateY(8px) scale(.985); }
.tour-card.wide { width: 468px; }
.tour-card.final { width: 452px; }
.tour-art { height: 128px; margin: -6px -8px 12px; border-radius: 14px; overflow: hidden; background: linear-gradient(180deg, #EAF4EF 0%, #E2F0EA 100%); }
.tour-art svg { width: 100%; height: 100%; }
.tour-top { display: flex; align-items: center; justify-content: space-between; min-height: 26px; }
.tour-count { font-size: 12.5px; font-weight: 650; color: var(--green-ink); background: var(--green-bg); padding: 3px 9px; border-radius: 7px; }
.tour-card .x-btn { width: 30px; height: 30px; margin: -4px -8px 0 0; }
.tour-card h3 { font-size: 19px; font-weight: 750; letter-spacing: -.015em; margin: 10px 0 6px; line-height: 1.25; }
.tour-card p { font-size: 14px; color: var(--ink-2); line-height: 1.55; }
.tour-try { display: flex; align-items: center; gap: 8px; margin-top: 12px; padding: 9px 12px; border-radius: 10px; background: var(--mint-3); color: var(--brand); font-size: 13px; font-weight: 600; }
.tour-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 16px; flex-wrap: wrap; }
.tour-dots { display: flex; gap: 5px; }
.tour-dots i { width: 6px; height: 6px; border-radius: 3px; background: #DCE4E1; transition: width .25s var(--ease), background .25s; }
.tour-dots i.done { background: #A9D3BE; }
.tour-dots i.on { width: 18px; background: var(--brand); }
.tour-btns { display: flex; gap: 6px; margin-left: auto; flex-wrap: wrap; justify-content: flex-end; }
.tour-arrow { position: absolute; width: 14px; height: 14px; background: #fff; transform: rotate(45deg); border-radius: 3px; display: none; }
.tour-card[data-side="right"] .tour-arrow { display: block; left: -6px; }
.tour-card[data-side="left"] .tour-arrow { display: block; right: -6px; }
.tour-card[data-side="bottom"] .tour-arrow { display: block; top: -6px; }
.tour-card[data-side="top"] .tour-arrow { display: block; bottom: -6px; }
.tour-card.final .tour-dots, .tour-card.final .tour-btns { flex-basis: 100%; }
.tour-card.final .tour-btns [data-t="back"] { margin-right: auto; }
.toasts { z-index: 130; }
@media (max-width: 640px) {
  .tour-card, .tour-card.wide, .tour-card.final { width: calc(100vw - 24px); padding: 16px 16px 14px; }
  .tour-art { height: 104px; }
  .tour-card h3 { font-size: 17px; }
  .tour-card p { font-size: 13.5px; }
  .tour-card.final .tour-btns [data-t="back"] { display: none; }
  .tour-card.final .tour-btns .btn { flex: 1 1 0; justify-content: center; }
}
/* a phone on its side (320-420px high): a shorter picture keeps the first card's buttons on the screen */
@media (max-height: 420px) { .tour-art { height: 72px; margin-bottom: 8px; } }
@media (prefers-reduced-motion: reduce) { .tour-spot::after { animation: none; } }

/* ---------- responsive ---------- */
@media (max-width: 1360px) {
  :root { --rail-w: 296px; }
  .drow { grid-template-columns: minmax(200px, 1.5fr) minmax(150px, 1.1fr) 92px 100px 70px 36px; gap: 14px; }
  .types { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 1200px) {
  .ov { grid-template-columns: minmax(0, 1fr); }
  /* one column: the date of freedom goes right under the three numbers instead of after everything else */
  .ov > .col { display: contents; }
  .ov .kpis { order: -2; }
  .ov .freedom { order: -1; }
  .ov .rail-rest { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
  .chat-wrap { grid-template-columns: minmax(0, 1fr); }
  .chat-wrap > .col:last-child { display: none; }
  .g-21, .g-12, .g-32, .g-plan { grid-template-columns: minmax(0, 1fr); }
  .strat-cards { gap: 14px; }
}
@media (max-width: 1024px) {
  .g-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .strat-cards { grid-template-columns: minmax(0, 1fr); }
  .strat { display: grid; grid-template-columns: 150px minmax(0, 1fr); text-align: left; column-gap: 20px; align-items: center; }
  .strat .art { grid-row: span 5; width: 150px; margin: 0; }
  .strat .d { margin-left: 0; margin-right: 0; }
  .strat ul { margin-left: 0; }
  .add-grid { grid-template-columns: minmax(0, 1fr); }
  .add-grid .where { display: none; }
}
@media (max-width: 900px) {
  .app { grid-template-columns: minmax(0, 1fr); }
  /* closed, the menu is hidden from Tab and screen readers too (visibility), not only moved off the screen */
  .side { position: fixed; left: 0; top: 0; bottom: 0; width: 280px; z-index: 80; transform: translateX(-102%); visibility: hidden; transition: transform .3s var(--ease), visibility 0s linear .3s; box-shadow: var(--sh-3); padding-bottom: env(safe-area-inset-bottom); }
  .side.open { transform: none; visibility: visible; transition: transform .3s var(--ease); }
  .scrim { display: block; position: fixed; inset: 0; background: rgba(12, 28, 24, .3); z-index: 79; opacity: 0; pointer-events: none; transition: opacity .25s; }
  .scrim.on { opacity: 1; pointer-events: auto; }
  .topbar { padding: 0 16px; height: 64px; gap: 8px; }
  .topbar .burger { display: grid; }
  .topbar .t-logo { display: flex; align-items: center; gap: 8px; font-weight: 750; font-size: 19px; color: var(--brand); letter-spacing: -.03em; white-space: nowrap; }
  .topbar .t-logo .logo-mark { width: 30px; height: 30px; }
  .search { display: none; }
  .user-btn > .ico-s { display: none; }
  .page { padding: 4px 16px calc(110px + env(safe-area-inset-bottom)); }
  .ph h1 { font-size: 25px; }
  .ph > .card { width: 100%; justify-content: space-between; }
  .ph > .card .stat { flex: 1; }
  .ph > .card .val { white-space: nowrap; }
  .hello h1 { font-size: 26px; }
  .ph p { font-size: 14px; }
  .card { padding: 18px 16px; border-radius: 14px; }
  .card-h { flex-wrap: wrap; align-items: flex-start; row-gap: 10px; }
  .card-h .acts { flex-wrap: wrap; }
  .card-h .legend { gap: 6px 14px; }
  .kpi { padding: 16px; }
  .kpis { gap: 12px; }
  .grid, .col { gap: 14px; }
  .ov { gap: 14px; }
  .ov .rail-rest { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .g-2, .g-3, .g-4 { grid-template-columns: minmax(0, 1fr); }
  .qa { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tabbar {
    display: flex; position: fixed; left: 10px; right: 10px; bottom: max(10px, env(safe-area-inset-bottom)); z-index: 60; /* above the iPhone home indicator in the home-screen app */
    background: rgba(255, 255, 255, .92); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
    border-radius: 20px; box-shadow: 0 10px 30px rgba(12, 30, 26, .14); border: 1px solid rgba(20, 44, 38, .06);
    padding: 6px; justify-content: space-around;
  }
  .tabbar a { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 7px 2px 6px; border-radius: 14px; font-size: 12px; font-weight: 550; color: var(--ink-3); white-space: nowrap; }
  .tabbar a .ico { width: 22px; height: 22px; }
  .tabbar a.on { color: var(--brand); background: var(--active); }
  .tbl.resp thead { display: none; }
  .tbl.resp tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 12px; padding: 14px 0; border-top: 1px solid var(--line-2); }
  .tbl.resp td { border: 0; padding: 0; }
  .tbl.resp td.hide-m { display: none; }
  .tbl.resp td.m-full { grid-column: 1 / -1; }
  .drow { grid-template-columns: minmax(0, 1fr) auto; gap: 10px 14px; padding: 16px 4px; }
  .drow .hide-m { display: none; }
  .drow .m-full { grid-column: 1 / -1; }
  .sum-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 16px -16px -18px; }
  .sum-strip > div { padding: 14px 16px; border-top: 1px solid var(--line-2); }
  .sum-strip > div:nth-child(odd) { border-left: 0; }
  .types { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .monthly-plan .val { font-size: 18px; }
  .stages { grid-template-columns: minmax(0, 1fr) !important; gap: 14px; }
  .stages .track { left: 12px; right: auto; top: 12px; bottom: 12px; width: 3px; height: auto; }
  .stages .track i { width: 100% !important; height: var(--h, 0); transition: height 1.2s var(--ease); }
  .stage { padding: 0 0 0 40px; }
  .sim-res { grid-template-columns: 1fr 1fr 1fr 1fr; gap: 4px; }
  .sim-res > div { font-size: 14px; padding: 10px 6px; }
  .sim-res .h { font-size: 12px; padding: 4px; }
  .modal { padding: 22px 18px; border-radius: 18px; }
  .overlay { padding: 10px 10px calc(10px + env(safe-area-inset-bottom)); align-items: end; }
  body.tour-waiting .overlay { padding-top: var(--tour-wait-b, 88px); }
  body.tour-waiting .modal { max-height: calc(100vh - var(--tour-wait-b, 88px) - 10px - env(safe-area-inset-bottom)); max-height: calc(100dvh - var(--tour-wait-b, 88px) - 10px - env(safe-area-inset-bottom)); }
  .form-grid, .map-grid { grid-template-columns: minmax(0, 1fr); }
  .pick-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bank-tips { grid-template-columns: minmax(0, 1fr); }
  .cal .day { min-height: 58px; padding: 6px; }
  /* phones: an event is its status mark only (shape and colour); names and amounts are in the list below */
  .cal .ev, .cal .ev.pay, .cal .ev.paid, .cal .ev.part, .cal .ev.late, .cal .ev.payday { padding: 0; border: 0; border-radius: 0; background: none; overflow: visible; }
  .cal .ev .nm { display: none; }
  .cal .ev.more { display: none; }
  .cal .evs { display: flex; gap: 3px; flex-wrap: wrap; }
  .recs3 { grid-template-columns: minmax(0, 1fr); }
  .chat-card { height: calc(100dvh - 290px); min-height: 400px; }
  .ph-ai p { display: none; }
  .ph-ai { margin-bottom: 14px; }
  .chat { padding: 16px 14px 8px; }
  .chat-foot { padding: 10px 12px 12px; }
  .donut-wrap { flex-direction: column; align-items: stretch; }
  .donut-wrap .chart { margin: 0 auto; }
  .found-hero { flex-direction: column; align-items: flex-start; }
  .toasts { bottom: calc(96px + env(safe-area-inset-bottom)); }
  .freedom .date-hero { font-size: 38px; font-size: min(38px, calc(100cqi / (var(--n, 8) * .58))); }
}
/* phones: fixes from the 2026-09-25 mobile audit */
.btn-wrap { white-space: normal; height: auto; min-height: 42px; padding-top: 9px; padding-bottom: 9px; text-align: left; max-width: 100%; }
.pay-pick { width: auto; height: 36px; font-size: 13px; }
/* payment window: the debt's name takes up to two lines, and the picker (sized by its longest lender) gets at most
   about half the row instead of squeezing the name to "U.S. Depart..." */
.file-row:has(> .pay-pick) .t { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow-wrap: anywhere; line-height: 1.35; }
@media (min-width: 421px) { .file-row > .pay-pick { flex: 0 1 auto; min-width: 0; max-width: 48%; } }
.modal:focus { outline: none; } /* focused for screen readers when it opens, no ring */
.bubble-tbl { overflow-x: auto; max-width: 100%; }
#f-share { position: absolute; top: 18px; right: 18px; }
.pop.notif { width: min(360px, calc(100vw - 16px)); }
/* tap areas: on touch screens everything tappable is at least 40px. Controls that look small keep their look
   and get a larger invisible tap area (::after), so nothing around them moves */
@media (max-width: 900px), (pointer: coarse) {
  .more-btn, .view-toggle { width: 40px; height: 40px; }
  .btn-s, .btn-ghost, .seg button, .chip { height: 40px; }
  .field > .seg button { height: auto; min-height: 40px; }
  .qchip { padding-top: 11px; padding-bottom: 11px; }
  .toggle-row .inline .input, .toggle-row .inline .select { height: 40px; }
  .topbar .t-logo { min-height: 40px; }
  .range { height: 40px; }
  .pay-pick { height: 40px; } /* the debt picker in the payment window */
  .composer textarea { padding-top: 9px; padding-bottom: 9px; } /* the question field: 40px */
  .muted > .link[download] { padding-left: 12px; } /* CSV, PDF, OFX samples on Operations: each its own 40px */
}
.link, .legend button, .cat-pill, .chip-x, .tour-card .x-btn, .push-banner .x-btn { position: relative; }
.link::after, .legend button::after, .cat-pill::after { content: ''; position: absolute; left: -6px; right: -6px; top: 50%; height: max(100%, 40px); transform: translateY(-50%); }
.chip-x::after, .tour-card .x-btn::after, .tour-offer .x-btn::after, .push-banner .x-btn::after, .topbar .icon-btn::after { content: ''; position: absolute; left: 50%; top: 50%; width: max(100%, 40px); height: max(100%, 40px); transform: translate(-50%, -50%); }
@media (max-width: 900px) {
  .toasts { left: 16px; right: 16px; transform: none; }
  body:has(.tour-offer.on) .toasts { bottom: calc(300px + env(safe-area-inset-bottom)); } /* never over the tour offer's buttons */
  body:has(.tour-offer.on) .page { padding-bottom: calc(320px + env(safe-area-inset-bottom)); } /* the last card can scroll clear of it */
  .topbar .burger { flex: none; }
  .chat-sugg { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-left: -2px; padding-left: 2px; }
  .chat-sugg::-webkit-scrollbar { display: none; }
  .chat-sugg > * { flex: none; }
  .bubble .btn { white-space: normal; max-width: 100%; height: auto; min-height: 40px; text-align: left; }
}
@media (max-width: 640px) {
  .rec { flex-wrap: wrap; }
  .rec .grow { flex: 1 1 160px; min-width: 0; }
  .rec .m { margin-left: auto; }
  .found-hero .v { font-size: 30px; }
  .found-hero .btn { white-space: normal; height: auto; min-height: 40px; max-width: 100%; }
  #f-share { top: 12px; right: 12px; width: 40px; padding: 0; justify-content: center; } /* icon only: clear of the date pill */
  #f-share span { display: none; }
}
@media (max-width: 420px) {
  .modal-f { flex-direction: column-reverse; align-items: stretch; } /* narrow phones: the main action on top, full width, never below the fold */
  .modal-f .btn { width: 100%; justify-content: center; }
  .file-row { flex-wrap: wrap; }
  .pay-pick { width: 100%; }
  .tabs a, .tabs button { padding: 11px 10px 13px; }
}
@media (max-width: 360px) {
  .kpi .kpi-ic { display: none; }
  /* the burger keeps its full tap area, so the rest of the top bar tightens instead */
  .topbar { padding: 0 12px; gap: 4px; }
  .topbar .t-logo { font-size: 17px; gap: 6px; }
  .topbar .t-logo .logo-mark { width: 26px; height: 26px; }
  /* the name stays on one line: the tour's button goes, it is also in the profile menu and in Settings */
  .top-actions [data-act="tour"] { display: none; }
  .top-actions { gap: 2px; }
  .topbar .icon-btn { width: 38px; height: 38px; }
  .user-btn { margin-left: 2px; padding: 3px; }
  .cal-head h3 { min-width: 0; } /* 320px: the month and both arrows on one line */
  .plan-sum { gap: 14px; }
  .plan-sum-date { padding-left: 14px; }
  .plan-sum .val.l { font-size: 21px; } /* the date keeps to the card on 320px */
}

/* plan: payoff order rows */
.ord .ord-apr { font-size: 13px; font-weight: 600; min-width: 52px; text-align: right; }
.ord .ord-bal { min-width: 74px; text-align: right; }
.ord .ord-apr-m { display: none; }
@media (max-width: 640px) {
  .ord .tile, .ord .dtile { display: none; }
  .ord .ord-apr { display: none; }
  .ord .ord-apr-m { display: inline; }
  .ord .ord-bal { min-width: 0; }
  .ord .ord-mv { flex-direction: column; }
}
/* the same compact row in a narrow card on a computer (1201-1300px, beside the right column), so "Capital One" or
   "Toyota Financial" aren't cut; a very long name takes two lines (!important: the name's nowrap is set inline, pages-plan.js) */
.order-list { container-type: inline-size; }
@container (max-width: 360px) {
  .ord .tile, .ord .dtile { display: none; }
  .ord .ord-apr { display: none; }
  .ord .ord-apr-m { display: inline; }
  .ord .ord-bal { min-width: 0; }
  .ord .ord-mv { flex-direction: column; }
}
.ord .grow > .t { white-space: normal !important; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }

@media (min-width: 901px) and (max-width: 1100px) {
  /* sidebar still open, content narrow: debt rows and the overview table drop the rate and menu columns instead of scrolling sideways */
  .drow { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1.2fr) 92px 86px; gap: 14px; }
  .drow .hide-m, .tbl.resp .hide-m { display: none; }
  .g-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .g-3 > :nth-child(3):last-child { grid-column: 1 / -1; }
}
@media (max-width: 640px) {
  /* phones: the total takes the full row, the other two numbers share one, so the first screen isn't only three cards */
  .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kpis > .kpi:first-child { grid-column: 1 / -1; }
  .kpis > .kpi:not(:first-child) .val { font-size: 23px; }
  .kpis > .kpi:not(:first-child) .kpi-bar { display: none; }
  /* strategies: picture above the text instead of a 150px column that squeezes it */
  .strat { display: flex; }
  .strat .art { width: 130px; height: 84px; margin: 0 0 10px; }
  .reco { flex-wrap: wrap; align-items: flex-start; gap: 12px 14px; padding: 18px 16px; }
  .reco .shield { width: 44px; height: 44px; }
  .reco-t { flex: 1 1 calc(100% - 58px); }
  .reco > .pill, .reco > .circle-btn { margin-left: 58px; }
  .cmp-tbl .hide-m { display: none; }
  /* strategy comparison: each strategy is a small block with labelled numbers, no sideways scroll */
  .cmp-tbl thead { display: none; }
  .cmp-tbl tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 16px; padding: 14px 0; border-top: 1px solid var(--line-2); }
  .cmp-tbl tbody tr:first-child { border-top: 0; padding-top: 0; }
  .cmp-tbl td, .cmp-tbl td:first-child, .cmp-tbl td:last-child { border: 0; padding: 0; }
  .cmp-tbl td.cmp-name { grid-column: 1 / -1; }
  .cmp-tbl td[data-l]::before { content: attr(data-l); display: block; margin-bottom: 1px; font-size: 12.5px; font-weight: 500; color: var(--ink-3); white-space: nowrap; }
  /* simulator result: the row name goes above its three values, so no word has to break */
  .sim-res { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
  .sim-res > .h:first-child { display: none; }
  .sim-res .rl { grid-column: 1 / -1; background: none; padding: 10px 2px 0; font-weight: 600; }
  .sim-res > div { padding: 10px 6px; font-size: 15px; }
  .sim-res .h { padding: 4px; font-size: 12.5px; }
  /* add-debt steps: numbers only, the current step keeps its name */
  .stepper .s:not(.on) { font-size: 0; gap: 0; }
  .stepper .s:not(.on) i { font-size: 12.5px; }
}
@media (max-width: 420px) {
  .sim-res > div { padding: 10px 4px; }
  .sim-res .gain { font-size: 13px; }
  .qa button { min-height: 88px; font-size: 12.5px; }
  .types { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* legal pages (their layout is in funnel.css): the header is navigation, not text links, so no underline and 40px chips;
   on phones the privacy table turns into blocks with a label over each cell (data-label in privacy.html) */
.legal a.fn-brand, .legal .legal-nav a { text-decoration: none; }
.legal a.fn-brand { color: var(--brand); min-height: 40px; }
.solo a.fn-brand { min-height: 40px; } /* 404 and new password */
.legal .legal-nav a { height: 40px; padding: 0 14px; color: var(--ink-2); }
.legal .legal-nav a:hover { color: var(--ink); border-color: var(--line-3); }
.legal .legal-nav a.on { color: #fff; border-color: var(--brand); }
@media (max-width: 640px) {
  .legal td[data-label]::before { content: attr(data-label); display: block; margin-bottom: 1px; font-size: 12.5px; font-weight: 600; color: var(--ink-3); }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-delay: 0ms !important; transition-duration: .001ms !important; }
}
@media print {
  .side, .topbar, .tabbar, .qa, .btn { display: none !important; }
  .app { display: block; }
  body { background: #fff; }
  .card { box-shadow: none; border: 1px solid #ddd; break-inside: avoid; }
}

/* ---------- fixes: app logic (2026-09-28) ---------- */
/* form checks (U.check, U.fieldErr): the words under a field that is wrong */
.field-err { font-size: 12.5px; line-height: 1.4; color: var(--red); }
/* "День платежа не указан" + "Указать" (App.ui.noDay, App.ui.noDayNote): a bigger tap area without moving the text */
.due-unk { color: var(--ink-3); font-weight: 500; }
.due-set { font-size: 13px; font-weight: 650; padding: 8px 4px; margin: -8px -4px -8px 4px; }
.drow .mv .due-set, .tbl .due-set { display: flex; width: max-content; margin: -6px -4px -8px -4px; }
.kpi .foot:has(.due-set) { flex-direction: column; align-items: flex-start; gap: 0; } /* the day on one line, "Указать" under it */
.kpi .foot .due-set { flex: none; margin: -6px -4px -8px -4px; }
.stat .sub .due-set { margin-left: 2px; }
.due-note { margin-bottom: 18px; align-items: flex-start; }
.due-note .due-set { font-size: 13.5px; margin-left: 0; }
.due-note .due-why { margin-top: 4px; font-size: 12.5px; }
.push-card .due-note { margin: 12px 0 0; }
/* assistant: the example questions say they spend free questions */
.sugg-note { font-size: 12.5px; line-height: 1.4; color: var(--ink-3); margin: 0 0 8px; }
.ex-note { margin: -6px 0 10px; }
/* Settings without "План": the strategy and the yearly growth shown as they are, with a lock */
.strat-lock { gap: 10px; padding: 10px 10px 10px 12px; border-radius: var(--r-md); background: var(--surface-2); border: 1px solid var(--line); }
.strat-lock .grow { flex: 1; min-width: 0; font-size: 13.5px; line-height: 1.45; }
.strat-lock .grow b { color: var(--ink); }
.strat-lock .link, .growth-lock .link { font-size: 13.5px; }
.strat-lock .btn { flex: none; }
.growth-lock { display: flex; align-items: center; gap: 8px; height: 46px; padding: 0 14px; border-radius: var(--r-md); background: var(--surface-2); border: 1px solid var(--line); font-size: 14px; color: var(--ink-2); }
.growth-lock .link { margin-left: auto; }
@media (max-width: 420px) {
  .strat-lock { flex-wrap: wrap; align-items: flex-start; }
  .strat-lock .grow { flex-basis: calc(100% - 44px); }
  .strat-lock .btn { margin-left: 44px; }
}
/* the purchase "Готово" window closes with a cross too; the reminders banner's cross sits in its corner */
.paid-modal > .paid-x { position: absolute; top: 10px; right: 10px; margin: 0; z-index: 2; background: rgba(255, 255, 255, .9); }
.push-banner.has-x { position: relative; padding-right: 50px; }
.push-banner.has-x > .x-btn { position: absolute; top: 8px; right: 8px; }
/* the lender list opens upwards when the window has more room above the field */
.combo-list.up { top: auto; bottom: calc(100% + 6px); transform-origin: bottom; }
/* focus parked on the page when a closed window's button is gone: a place to continue from, no ring round the page */
main.page:focus { outline: none; }
/* debt page, "Уточнить" / "Указать": on narrow phones the button goes under the text instead of squeezing it */
.est-box { margin-bottom: 18px; align-items: center; }
.est-box p { flex: 1; }
@media (max-width: 420px) {
  .est-box { flex-wrap: wrap; align-items: flex-start; }
  .est-box p { flex-basis: calc(100% - 60px); }
  .est-box .btn { margin-left: 54px; }
}

/* ---------- Settings: the tariff card (what is open, what it includes, Claude questions this month) ---------- */
.tariff-list { list-style: none; margin: 2px 0 0; padding: 0; display: grid; gap: 8px; }
.tariff-list li { display: flex; gap: 8px; align-items: flex-start; font-size: 14px; line-height: 1.45; color: var(--ink-2); }
.tariff-list li .ico { flex: none; width: 16px; height: 16px; margin-top: 2px; color: var(--green-ink); }
.tariff-ai { margin-top: 16px; padding: 12px 14px; border-radius: var(--r-md); background: var(--surface-2); border: 1px solid var(--line); font-size: 13.5px; }
.tariff-ai .muted { font-size: 12.5px; margin: 8px 0 0; }
.tariff-ai.off { display: flex; gap: 8px; align-items: flex-start; color: var(--ink-2); line-height: 1.45; }
.tariff-ai.off .ico { flex: none; width: 16px; height: 16px; margin-top: 2px; color: var(--ink-3); }

/* statement in another currency: the rate it was converted at, editable */
.fx-note { display: flex; gap: 12px; padding: 14px 16px; border-radius: var(--r-md); background: var(--mint-3); font-size: 13.5px; color: var(--ink-2); line-height: 1.5; }
.fx-note .tile { width: 36px; height: 36px; border-radius: 10px; }
.fx-note .tile .ico { width: 18px; height: 18px; }
.fx-note b { color: var(--ink); display: block; }
.fx-note p { margin-top: 2px; }
.fx-note p a { color: var(--green-ink); text-decoration: underline; text-underline-offset: 2px; }
.fx-row { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 10px; margin-top: 10px; font-weight: 600; color: var(--ink); }
.fx-row .input { width: 112px; height: 40px; font-weight: 600; font-variant-numeric: tabular-nums; }
.fx-row .link { margin-left: 6px; font-weight: 500; font-size: 13.5px; }
.preview-tbl .orig, .tbl .amt small.orig { display: block; font-size: 12px; font-weight: 400; color: var(--ink-3); margin-top: 1px; }
@media (max-width: 560px) { .fx-row .link { margin-left: 0; flex-basis: 100%; justify-content: flex-start; } }
.preview-tbl .pv-cat { display: none; }
@media (max-width: 560px) {
  .preview-tbl .pv-c { display: none; }
  .preview-tbl .pv-cat { display: block; font-size: 12px; color: var(--ink-3); margin-top: 1px; }
  .preview-tbl td, .preview-tbl th { padding: 8px 8px; }
}
/* not financial advice: under every page, the assistant field and the upload result */
.page-foot { display: flex; gap: 8px; align-items: flex-start; margin-top: 32px; padding-top: 16px; border-top: 1px solid var(--line-2); color: var(--ink-3); font-size: 12.5px; line-height: 1.5; }
.page-foot .ico-s { flex: none; margin-top: 2px; }
.page-foot a, .fine a { color: var(--ink-2); text-decoration: underline; text-underline-offset: 2px; }
.page-foot a { position: relative; }
.page-foot a::after { content: ''; position: absolute; left: -6px; right: -6px; top: 50%; height: 40px; transform: translateY(-50%); } /* "Условия": a 40px tap area */
.fine { font-size: 12.5px; line-height: 1.5; color: var(--ink-3); }
.composer-fine { margin-top: 8px; text-align: center; }
@media print { .page-foot { margin-top: 16px; } }

/* ---------- fixes: visual QA (2026-09-28) ---------- */
@media (max-width: 900px) {
  /* phones: a window takes the whole height, and its buttons stay at the bottom edge while the content scrolls
     under them, so the main button is never below the fold (320x568, a phone on its side, "Другая" in the payment) */
  .modal { max-height: calc(100vh - 20px - env(safe-area-inset-bottom)); max-height: calc(100dvh - 20px - env(safe-area-inset-bottom)); }
  .modal > .modal-f { position: sticky; bottom: -22px; z-index: 3; margin: 12px -18px -22px; padding: 12px 18px 22px; background: var(--surface); border-top: 1px solid var(--line-2); }
  /* the celebration: the picture reaches the edges again, the buttons stay in view */
  .modal.celebrate { padding: 0; }
  .celebrate .body { padding: 8px 20px 0; }
  .celebrate .modal-f { position: sticky; bottom: 0; z-index: 3; margin: 16px -20px 0; padding: 12px 20px 18px; background: var(--surface); }
  /* "Готово" after a purchase: the list scrolls when the screen is short, "Смотреть мой план" stays in view */
  .modal.paid-modal { display: flex; flex-direction: column; }
  .paid-modal > * { flex: none; }
  .paid-modal > .paid-list { flex: 0 1 auto; min-height: 64px; overflow-y: auto; }
}
/* tour: the "still waiting" bar keeps to two lines on a narrow phone (the step number is on the tip card), and a tip
   squeezed beside a block (901-1200px, next to the sidebar) gets compact */
@media (max-width: 380px) { .tour-wait .tour-count { display: none; } }
.tour-card.narrow { padding: 16px 16px 14px; }
.tour-card.narrow h3 { font-size: 17px; }
.tour-card.narrow .tour-dots { display: none; }
/* debt page, "Платежи по плану" (pages-debts.js): in a narrow card (a phone, 901-1100px beside the sidebar) the interest
   moves under the payment, cells get tighter and a month may take two lines, so "Остаток" is never cut off */
.fut-tbl .amt small.fut-in { display: none; }
.fut-wrap { container-type: inline-size; }
@container (max-width: 359px) {
  .fut-tbl .fut-i { display: none; }
  .fut-tbl .amt small.fut-in { display: block; white-space: normal; }
  .fut-tbl th, .fut-tbl td { padding-left: 6px; padding-right: 6px; }
  .fut-tbl th:first-child, .fut-tbl td:first-child { padding-left: 2px; }
  .fut-tbl th:last-child, .fut-tbl td:last-child { padding-right: 2px; }
}
/* the tour offer in the corner (tour.js offer, --offer-h is its height): on a computer too the page scrolls its last
   card and the footer clear of it, and where a centred toast would reach it, the toast shows above it */
@media (min-width: 901px) {
  body:has(.tour-offer.on) .page { padding-bottom: calc(48px + var(--offer-h, 182px)); }
}
@media (min-width: 901px) and (max-width: 1300px) {
  body:has(.tour-offer.on) .toasts { bottom: calc(36px + var(--offer-h, 182px)); }
}
@media (max-height: 520px) and (min-width: 480px) {
  .paid-modal .paid-list { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 16px; margin: 12px 0 14px; } /* a phone on its side: two columns */
}
/* iPhone Safari zooms the whole page into a field smaller than 16px when it gets focus, and doesn't zoom back:
   on touch screens every field of the cabinet is 16px (the onboarding and sign-in fields already are) */
@media (pointer: coarse), (max-width: 900px) {
  .input:not(.big-input), .select, .textarea, .search input, .composer textarea { font-size: 16px; }
  .toggle-row .inline .input, .toggle-row .inline .select { font-size: 16px; }
}
.fx-row .select { width: auto; min-width: 0; max-width: 100%; height: 40px; flex: 1 1 200px; }
.fx-note .grow { min-width: 0; }
/* the signed-in account card: who, where the plan is, the everyday actions, and deleting set apart at the bottom */
.acct-card.signed { display: flex; flex-direction: column; }
.acct-kv { margin: 18px 0 0; display: grid; gap: 0; border: 1px solid var(--line-2); border-radius: var(--r-md); background: var(--surface-2); }
.acct-kv > div { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 12px; align-items: baseline; padding: 11px 14px; }
.acct-kv > div + div { border-top: 1px solid var(--line-2); }
.acct-kv dt { display: flex; align-items: center; gap: 7px; font-size: 13px; color: var(--ink-3); }
.acct-kv dt .ico-s { width: 15px; height: 15px; flex: none; }
.acct-kv dd { margin: 0; font-size: 14px; color: var(--ink); line-height: 1.45; }
.acct-kv dd .neg { color: var(--red-ink, var(--red)); }
.acct-acts { margin-top: 16px; gap: 8px; }
.acct-danger { margin-top: auto; padding-top: 16px; border-top: 1px solid var(--line-2); display: flex; align-items: center; gap: 14px; }
.acct-card.signed .acct-acts { margin-bottom: 24px; }
.acct-danger b { display: block; font-size: 14px; font-weight: 650; }
.acct-danger span { display: block; font-size: 12.5px; color: var(--ink-3); margin-top: 2px; line-height: 1.4; }
.acct-danger .btn { color: var(--red-ink, var(--red)); flex: none; }
.acct-danger .btn:hover { background: var(--red-bg); }
@media (max-width: 560px) { .acct-kv > div { grid-template-columns: 1fr; gap: 2px; } }
.tariff-card { display: flex; flex-direction: column; }
.tariff-cta { margin-top: auto; padding-top: 16px; }
.tariff-note { font-size: 12.5px; line-height: 1.45; color: var(--ink-3); margin: 0 0 10px; }
/* storage full or blocked: said for as long as saving fails */
.save-warn { position: fixed; left: 50%; bottom: calc(16px + env(safe-area-inset-bottom)); transform: translateX(-50%); z-index: 90; display: flex; align-items: center; gap: 12px; max-width: min(640px, calc(100vw - 32px)); padding: 12px 14px; border-radius: 14px; background: #FFF8E6; border: 1px solid #F6E3B0; color: #5F4A12; font-size: 13.5px; line-height: 1.45; box-shadow: 0 10px 30px rgba(15, 27, 23, .14); }
.save-warn .ico-s { flex: none; color: var(--amber); }
.save-warn .btn { flex: none; }
@media (max-width: 900px) { .save-warn { bottom: calc(96px + env(safe-area-inset-bottom)); flex-wrap: wrap; } }
.celebrate-undo { text-align: center; margin: 12px 0 0; }
.celebrate-undo .link { font-size: 13px; color: var(--ink-3); }
.pays-tbl td:last-child, .pays-tbl th:last-child { width: 44px; padding-left: 0; }
.pays-tbl .more-btn { color: var(--ink-3); }
.pays-tbl .more-btn:hover { color: var(--red-ink); }
/* chart legends: a very long lender name is cut, the page never scrolls sideways */
.legend > span { max-width: 100%; min-width: 0; }
.legend .lg-t { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 220px; min-width: 0; }

/* ---------- fixes: phone behaviour (2026-09-29) ---------- */
/* an iPhone on its side (viewport-fit=cover): the notch and the rounded corners take up to about 47px on the left
   or the right, and nothing to read or tap goes there */
.side { padding-left: max(18px, env(safe-area-inset-left)); }
.topbar { padding-right: max(32px, env(safe-area-inset-right)); }
.page { padding-right: max(32px, env(safe-area-inset-right)); }
@media (max-width: 900px) {
  .topbar { padding-left: max(16px, env(safe-area-inset-left)); padding-right: max(16px, env(safe-area-inset-right)); }
  .page { padding-left: max(16px, env(safe-area-inset-left)); padding-right: max(16px, env(safe-area-inset-right)); }
  .tabbar { left: max(10px, env(safe-area-inset-left)); right: max(10px, env(safe-area-inset-right)); }
  .toasts { left: max(16px, env(safe-area-inset-left)); right: max(16px, env(safe-area-inset-right)); }
}
@media (max-width: 360px) { .topbar { padding-left: max(12px, env(safe-area-inset-left)); padding-right: max(12px, env(safe-area-inset-right)); } }
/* the side menu open on a phone: the dimmed page behind it stays put under a finger (app.js menu) */
@media (max-width: 900px) {
  html.side-open, html.side-open body { overflow: hidden; }
  .scrim { touch-action: none; }
  .side { overscroll-behavior: contain; }
}
/* a text field with the phone keyboard up (util.js body.typing, touch screens only): nothing stays stuck to the bottom
   of the screen over the field, as Android in-app browsers shrink the page to the space above the keyboard */
body.typing .tabbar, body.typing .tour-offer { display: none; }
body.typing .modal > .modal-f { position: static; }
/* a field brought into view (by the browser or util.js) stays clear of the sticky top bar and of what is stuck to the
   bottom: the tab bar, the onboarding's button, a window's buttons (while typing they are gone, and so is the room) */
@media (max-width: 900px) {
  html { scroll-padding: 72px 0 calc(100px + env(safe-area-inset-bottom)); }
  html:has(> body.bare) { scroll-padding-top: 0; }
  html:has(> body.typing) { scroll-padding-bottom: 0; }
  .modal { scroll-padding-bottom: 88px; }
  body.typing .modal { scroll-padding-bottom: 0; }
}
/* page zoom 150% and more (a 390px phone is then 260px wide): the top bar and the tab bar fit without sideways
   scrolling; "Пройти обучение" is still in the profile menu */
@media (max-width: 299px) {
  .top-actions [data-act="tour"] { display: none; }
  .tabbar a { font-size: 11px; }
  .tabbar a span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
  .warn-box > div { min-width: 0; }
  .cmp { grid-template-columns: minmax(0, 1fr); } /* the debt page: "Только минимум" over "С твоим планом" */
  .seg { max-width: 100%; }
  .seg button { padding: 0 8px; } /* Analytics: "6 месяцев / Год / Весь путь" */
  .btn-l { white-space: normal; height: auto; min-height: 50px; padding-top: 8px; padding-bottom: 8px; max-width: 100%; } /* a long label takes two lines */
}
/* the numbers in the middle of the donut and the gauge are page text, not SVG text: a browser's forced dark mode
   (Samsung Internet, Chrome) recolours them with the page instead of leaving dark digits on a darkened card */
.donut-c { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; padding-top: 12px; text-align: center; pointer-events: none; }
.donut-c b { font-weight: 750; letter-spacing: -.3px; line-height: 1.2; color: var(--ink); }
.donut-c span { font-size: 12.5px; line-height: 1.3; color: var(--ink-3); margin-top: 3px; }
.gauge { position: relative; max-width: 260px; margin: 0 auto; container-type: inline-size; }
.gauge svg { width: 100%; height: auto; }
.gauge-c { position: absolute; left: 0; right: 0; top: 58%; top: 37.5cqi; text-align: center; pointer-events: none; } /* cqi: sized and placed with the drawing, 220 units wide */
.gauge-c b { display: block; font-size: 28px; font-size: 12.7cqi; font-weight: 750; letter-spacing: -.5px; line-height: 1.2; color: var(--ink); }
.gauge-c span { display: block; margin-top: 1cqi; font-size: 12.5px; font-size: 5.7cqi; line-height: 1.3; color: var(--ink-3); }