/* ============================================================
   MoneyAPP v2 · дизайн-система shadcn/ui — токены из утверждённого
   макета design/mockup-shadcn.html. Один шрифт Inter, tabular-nums.
   ============================================================ */
:root{
  --background:220 25% 97.5%;
  --foreground:240 10% 3.9%;
  --card:0 0% 100%;
  --muted:240 4.8% 95.9%;
  --muted-foreground:240 3.8% 46.1%;
  --border:240 5.9% 90%;
  --input:240 5.9% 90%;
  --primary:217 72% 56%;
  --primary-foreground:210 40% 98%;
  --secondary:240 4.8% 95.9%;
  --secondary-foreground:240 5.9% 10%;
  --accent:240 4.8% 95.9%;
  --destructive:0 65% 60%;
  --destructive-foreground:0 0% 98%;
  --ring:217 72% 56%;
  --radius:0.9rem;
  --chart-1:217 70% 60%;
  --chart-2:158 48% 48%;
  --chart-3:32 78% 58%;
  --chart-4:266 55% 68%;
  --chart-5:348 65% 64%;
  --success:152 52% 44%;
  --warning:38 80% 52%;
  --info:200 70% 52%;
}
.dark{
  --background:240 10% 3.9%;
  --foreground:0 0% 98%;
  --card:240 10% 3.9%;
  --muted:240 3.7% 15.9%;
  --muted-foreground:240 5% 64.9%;
  --border:240 3.7% 15.9%;
  --input:240 3.7% 15.9%;
  --primary:217 70% 66%;
  --primary-foreground:222 47% 11%;
  --secondary:240 3.7% 15.9%;
  --secondary-foreground:0 0% 98%;
  --accent:240 3.7% 15.9%;
  --destructive:0 60% 64%;
  --destructive-foreground:0 0% 98%;
  --ring:217 60% 60%;
  --chart-1:217 65% 66%;
  --chart-2:158 45% 56%;
  --chart-3:32 70% 63%;
  --chart-4:266 50% 72%;
  --chart-5:348 60% 68%;
  --success:152 45% 56%;
  --warning:40 70% 60%;
  --info:200 62% 62%;
}
*{box-sizing:border-box;margin:0;padding:0;border-color:hsl(var(--border))}
html{color-scheme:light}
html.dark{color-scheme:dark}
body{
  background:hsl(var(--background));color:hsl(var(--foreground));
  font:14px/1.5 Inter,ui-sans-serif,system-ui,sans-serif;
  -webkit-font-smoothing:antialiased;min-height:100vh;
}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
a{color:hsl(var(--primary))}
.num{font-variant-numeric:tabular-nums;letter-spacing:-.01em}
svg{flex:none}
.boot{padding:80px 20px;text-align:center;color:hsl(var(--muted-foreground));font-size:14px}

/* ---------- утилиты ---------- */
.row{display:flex;align-items:center;gap:8px}
.wrap{flex-wrap:wrap}
.col{display:flex;flex-direction:column;gap:20px}
.grow{flex:1;min-width:0}
.ml-auto{margin-left:auto}
.muted{color:hsl(var(--muted-foreground))}
.fs11{font-size:11px}.fs115{font-size:11.5px}.fs12{font-size:12px}.fs125{font-size:12.5px}.fs13{font-size:13px}.fs135{font-size:13.5px}
.b{font-weight:600}
.t-success{color:hsl(var(--success))}
.t-danger{color:hsl(var(--destructive))}
.t-info{color:hsl(var(--info))}
.t-warn{color:hsl(var(--warning))}
.t-primary{color:hsl(var(--primary))}
.truncate{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mt1{margin-top:4px}.mt2{margin-top:8px}.mt3{margin-top:12px}.mt4{margin-top:16px}
.mb2{margin-bottom:8px}.mb3{margin-bottom:12px}.mb4{margin-bottom:16px}.mb5{margin-bottom:20px}
body.hide-balances .priv{filter:blur(9px)}
.hoverable .hover-only{opacity:0;transition:opacity .15s}
.hoverable:hover .hover-only,.hoverable:focus-within .hover-only{opacity:1}
@keyframes fadeup{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}}
.fade{animation:fadeup .25s both}
/* Обёртка вкладок: только opacity. transform (даже фактически none в fill-фазе
   animation-fill-mode:both) вычисляется как единичная матрица и делает элемент
   containing block для position:fixed — тогда overlay модалок центрируется по всей
   высоте страницы и уезжает вниз. Opacity стекинг-контекст создаёт, containing block — нет. */
@keyframes fadein{from{opacity:0}to{opacity:1}}
.viewfade{animation:fadein .25s both}
@keyframes spin{to{transform:rotate(360deg)}}
.spin{animation:spin 1s linear infinite}
.center{display:grid;place-items:center}

/* ---------- карточки ---------- */
.card{
  background:hsl(var(--card));border:1px solid hsl(var(--border) / .65);
  border-radius:calc(var(--radius) + 4px);
  box-shadow:0 1px 2px rgb(16 24 40 / .04),0 10px 28px rgb(16 24 40 / .05);
}
.dark .card{box-shadow:0 1px 2px rgb(0 0 0 / .3)}
.card-h{padding:20px 20px 0;display:flex;flex-direction:column;gap:4px}
.card-t{display:flex;align-items:center;gap:8px;font-size:14px;font-weight:600}
.card-d{font-size:12.5px;color:hsl(var(--muted-foreground))}
.card-c{padding:20px}
.card-c.tight{padding-top:12px}

/* ---------- кнопки ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:7px;white-space:nowrap;
  border-radius:calc(var(--radius) - 2px);font-size:12.5px;font-weight:500;
  height:32px;padding:0 12px;transition:.15s;border:1px solid transparent;
  background:hsl(var(--primary));color:hsl(var(--primary-foreground));
}
.btn:hover{opacity:.9}
.btn:disabled{opacity:.5;pointer-events:none}
.btn:focus-visible{outline:2px solid hsl(var(--ring));outline-offset:2px}
.btn.md{height:36px;padding:0 16px;font-size:13.5px}
.btn.icon{width:32px;padding:0}
.btn.secondary{background:hsl(var(--secondary));color:hsl(var(--secondary-foreground))}
.btn.outline{background:transparent;border-color:hsl(var(--input));color:hsl(var(--foreground))}
.btn.outline:hover{background:hsl(var(--accent));opacity:1}
.btn.ghost{background:transparent;color:hsl(var(--foreground))}
.btn.ghost:hover{background:hsl(var(--accent));opacity:1}
.btn.ghost.muted-btn{color:hsl(var(--muted-foreground))}
.btn.ghost.muted-btn:hover{color:hsl(var(--foreground))}
.btn.danger{background:hsl(var(--destructive));color:hsl(var(--destructive-foreground))}
.btn.ghost-danger{background:transparent;color:hsl(var(--destructive))}
.btn.ghost-danger:hover{background:hsl(var(--destructive) / .1)}

/* ---------- бейджи ---------- */
.badge{
  display:inline-flex;align-items:center;gap:4px;border-radius:calc(var(--radius) - 4px);
  padding:2px 8px;font-size:11px;font-weight:600;line-height:1.5;
  background:hsl(var(--secondary));color:hsl(var(--secondary-foreground));
}
.badge.primary{background:hsl(var(--primary));color:hsl(var(--primary-foreground))}
.badge.outline{background:transparent;border:1px solid hsl(var(--border))}
.badge.red{background:hsl(var(--destructive));color:hsl(var(--destructive-foreground))}
.badge.success{background:hsl(var(--success) / .15);color:hsl(var(--success))}
.badge.warning{background:hsl(var(--warning) / .15);color:hsl(var(--warning))}
.badge.info{background:hsl(var(--info) / .15);color:hsl(var(--info))}
.badge.sm{padding:1px 6px;font-size:10.5px}

/* ---------- формы ---------- */
.input,.select select,textarea.input{
  height:34px;width:100%;border-radius:calc(var(--radius) - 2px);
  border:1px solid hsl(var(--input));background:transparent;padding:0 11px;
  font:500 13px Inter,sans-serif;color:hsl(var(--foreground));outline:none;
}
textarea.input{height:auto;min-height:100px;padding:10px 11px;line-height:1.6;resize:vertical}
.input::placeholder,textarea.input::placeholder{color:hsl(var(--muted-foreground))}
.input:focus,.select select:focus,textarea.input:focus{outline:2px solid hsl(var(--ring));outline-offset:-1px}
.select{position:relative}
.select select{appearance:none;padding-right:28px}
.select select option{color:hsl(var(--foreground));background:hsl(var(--card))}
.select::after{
  content:"";position:absolute;right:11px;top:50%;width:7px;height:7px;pointer-events:none;
  border-right:1.7px solid hsl(var(--muted-foreground));border-bottom:1.7px solid hsl(var(--muted-foreground));
  transform:translateY(-70%) rotate(45deg);
}
.combo{position:relative}
.combo-tg{
  position:absolute;right:2px;top:2px;bottom:2px;width:28px;display:grid;place-items:center;
  color:hsl(var(--muted-foreground));background:none;border:none;cursor:pointer;border-radius:8px;
}
.combo-tg:hover{color:hsl(var(--foreground))}
.combo-pop{
  position:absolute;left:0;right:0;top:calc(100% + 4px);z-index:60;padding:4px;
  background:hsl(var(--background));border:1px solid hsl(var(--border));border-radius:10px;
  box-shadow:0 10px 28px rgb(9 9 11 / .16);max-height:220px;overflow-y:auto;
}
.combo-opt{padding:7px 10px;border-radius:7px;font-size:13px;color:hsl(var(--foreground));cursor:pointer}
.combo-opt.hi{background:hsl(var(--accent))}

/* ---------- свой список категорий (иконки + создание на месте) ---------- */
.csel{position:relative}
.csel-btn{
  display:flex;align-items:center;gap:8px;width:100%;height:34px;padding:0 11px;
  border:1px solid hsl(var(--input));border-radius:calc(var(--radius) - 2px);
  background:transparent;font:500 13px Inter,sans-serif;color:hsl(var(--foreground));
  cursor:pointer;text-align:left;
}
.csel-btn:hover{background:hsl(var(--accent)/.6)}
.csel-ic{display:grid;place-items:center;flex:none}
.csel-pop{
  position:absolute;left:0;right:0;top:calc(100% + 4px);z-index:70;
  background:hsl(var(--background));border:1px solid hsl(var(--border));
  border-radius:12px;box-shadow:0 12px 32px rgb(9 9 11 / .18);overflow:hidden;
  min-width:240px;
}
/* у нижних полей внутри модалки раскрываем вверх — иначе список срезает край */
.csel-pop.up{top:auto;bottom:calc(100% + 4px)}
.csel-search{display:flex;align-items:center;gap:7px;padding:9px 11px;border-bottom:1px solid hsl(var(--border)/.7)}
.csel-search input{
  flex:1;min-width:0;border:0;background:none;outline:none;
  font:500 13px Inter,sans-serif;color:hsl(var(--foreground));
}
.csel-list{max-height:260px;overflow-y:auto;padding:4px}
.csel-it{
  display:flex;align-items:center;gap:9px;width:100%;padding:8px 9px;border:0;
  background:none;border-radius:8px;font:500 13px Inter,sans-serif;
  color:hsl(var(--foreground));cursor:pointer;text-align:left;
}
.csel-it:hover{background:hsl(var(--accent))}
.csel-it.on{background:hsl(var(--primary)/.1);color:hsl(var(--primary))}
.csel-new{
  display:flex;align-items:center;gap:8px;width:100%;padding:11px 12px;border:0;
  border-top:1px solid hsl(var(--border)/.7);background:hsl(var(--muted)/.5);
  font:600 13px Inter,sans-serif;color:hsl(var(--primary));cursor:pointer;text-align:left;
}
.csel-new:hover{background:hsl(var(--accent))}
.csel-new:disabled{opacity:.6;pointer-events:none}

/* ---------- визуал банковской карты (диалог реквизитов) ---------- */
.bankcard{
  position:relative;aspect-ratio:1.586;border-radius:16px;padding:20px;color:#fff;
  display:flex;flex-direction:column;overflow:hidden;
  background:linear-gradient(135deg,var(--cc) 0%,color-mix(in srgb,var(--cc) 55%,#09090b) 100%);
  box-shadow:0 14px 34px rgb(9 9 11 / .3);
}
.bankcard::after{ /* мягкий блик */
  content:"";position:absolute;inset:-40% -30% auto auto;width:70%;aspect-ratio:1;
  border-radius:50%;background:rgb(255 255 255 / .1);pointer-events:none;
}
.bankcard .bc-top{display:flex;align-items:flex-start;gap:10px;font-size:12.5px;font-weight:600}
.bankcard .bc-type{margin-left:auto;font-size:12px;font-weight:800;letter-spacing:.12em;opacity:.95}
.bankcard .bc-chip{
  width:40px;height:29px;border-radius:6px;margin:14px 0 auto;
  background:linear-gradient(135deg,#f0d489,#b8942f);
  box-shadow:inset 0 0 0 1px rgb(0 0 0 / .15);
}
.bankcard .bc-num{
  font-size:19px;font-weight:600;letter-spacing:.09em;margin-bottom:12px;
  font-variant-numeric:tabular-nums;
}
.bankcard .bc-bot{display:flex;align-items:flex-end;gap:18px;font-size:12px}
.bankcard .bc-cap{font-size:8.5px;font-weight:700;letter-spacing:.1em;opacity:.7;margin-bottom:2px}
.bankcard .bc-val{font-weight:600;font-variant-numeric:tabular-nums}
.bankcard .bc-holder{margin-left:auto;text-align:right;max-width:45%}

/* строки копирования под картой */
.cprow{
  display:flex;align-items:center;gap:10px;width:100%;padding:9px 12px;border-radius:10px;
  border:1px solid hsl(var(--border) / .7);background:transparent;cursor:pointer;text-align:left;
  font-size:13px;color:hsl(var(--foreground));transition:.13s;
}
.cprow:hover{background:hsl(var(--accent))}
.cprow .k{font-size:10.5px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:hsl(var(--muted-foreground));width:96px;flex:none}
.cprow .v{font-weight:600;font-variant-numeric:tabular-nums}
.cprow .v.empty{font-weight:500;color:hsl(var(--muted-foreground))}

/* ---------- мастер первого запуска ---------- */
.wz-ov{
  position:fixed;inset:0;z-index:120;display:grid;place-items:center;padding:16px;
  background:rgb(9 9 11 / .5);backdrop-filter:blur(4px);
}
.wz{
  width:100%;max-width:620px;max-height:92vh;display:flex;flex-direction:column;
  background:hsl(var(--card));border:1px solid hsl(var(--border));border-radius:16px;
  box-shadow:0 18px 50px rgb(9 9 11 / .3);overflow:hidden;animation:fadeup .25s both;
}
.wz-head{padding:18px 20px 0;border-bottom:1px solid hsl(var(--border) / .7)}
.bx-lg{
  width:34px;height:34px;flex:none;border-radius:10px;display:grid;place-items:center;
  background:hsl(var(--primary));color:hsl(var(--primary-foreground));
}
.wz-steps{display:flex;gap:4px;margin:14px -4px -1px;overflow-x:auto;scrollbar-width:none}
.wz-steps::-webkit-scrollbar{display:none}
.wz-step{
  display:flex;align-items:center;gap:5px;flex:none;padding:8px 12px;
  font-size:11.5px;font-weight:600;color:hsl(var(--muted-foreground));
  border-bottom:2px solid transparent;white-space:nowrap;
}
.wz-step.on{color:hsl(var(--primary));border-bottom-color:hsl(var(--primary))}
.wz-step.past{color:hsl(var(--success))}
.wz-body{padding:20px;overflow-y:auto;flex:1;min-height:0}
.wz-foot{
  display:flex;align-items:center;gap:8px;padding:14px 20px;
  border-top:1px solid hsl(var(--border) / .7);background:hsl(var(--muted) / .4);
}
.wz-ok,.wz-warn,.wz-err{
  display:flex;align-items:flex-start;gap:9px;border-radius:11px;padding:11px 13px;
  font-size:12.5px;line-height:1.5;
}
.wz-ok{background:hsl(var(--success) / .1);border:1px solid hsl(var(--success) / .35)}
.wz-warn{background:hsl(var(--warning) / .1);border:1px solid hsl(var(--warning) / .4)}
.wz-err{background:hsl(var(--destructive) / .1);color:hsl(var(--destructive));border:1px solid hsl(var(--destructive) / .3)}
.wz-cards{
  border:1px solid hsl(var(--border) / .7);border-radius:11px;padding:8px 12px;
  max-height:170px;overflow-y:auto;
}
.wz-pick{
  display:flex;align-items:flex-start;gap:10px;cursor:pointer;margin-bottom:8px;
  border:1px solid hsl(var(--input));border-radius:11px;padding:12px 13px;transition:.13s;
}
.wz-pick:hover{background:hsl(var(--accent) / .5)}
.wz-pick.on{border-color:hsl(var(--primary));background:hsl(var(--primary) / .06)}
.lbl{display:flex;align-items:center;gap:5px;margin-bottom:6px;font-size:10.5px;font-weight:600;letter-spacing:.07em;text-transform:uppercase;color:hsl(var(--muted-foreground))}
.chk{width:15px;height:15px;flex:none;cursor:pointer;accent-color:hsl(var(--primary))}
.field{min-width:0}

/* прогресс */
.track{height:8px;width:100%;border-radius:99px;background:hsl(var(--secondary));overflow:hidden}
.track i{display:block;height:100%;border-radius:99px;background:hsl(var(--primary));transition:width .3s}
.track.thin{height:6px}
.sep{border:0;border-top:1px solid hsl(var(--border) / .6);margin:12px 0}

/* иконка-плашка */
.icbox{display:grid;place-items:center;flex:none;border-radius:10px}

/* чипы */
.chip{
  display:inline-flex;align-items:center;gap:6px;border:1px solid hsl(var(--input));
  border-radius:99px;padding:7px 13px;font-size:12.5px;font-weight:500;transition:.13s;
}
.chip:hover{background:hsl(var(--accent))}
.chip.on{background:hsl(var(--primary));border-color:hsl(var(--primary));color:hsl(var(--primary-foreground))}

/* ---------- шапка ---------- */
.top{
  position:sticky;top:0;z-index:40;border-bottom:1px solid hsl(var(--border) / .7);
  background:hsl(var(--background) / .85);backdrop-filter:blur(8px);
}
/* Единая высота всех элементов шапки: без неё бренд/вкладки/кнопки/аватар
   были 30/36/32/34 и выглядели вразнобой. --hh — общая высота ряда. */
/* nowrap, а не wrap: при нехватке места перенос срабатывает РАНЬШЕ сжатия,
   поэтому аватар сбрасывало на вторую строку вместо того, чтобы ужать
   вкладки. Теперь ряд один, а .tabs при тесноте скроллится внутри себя. */
.top-in{display:flex;flex-wrap:nowrap;align-items:center;gap:10px;padding:10px 22px;--hh:34px}
.top-in .btn{height:var(--hh)}
.top-in .btn.icon{width:var(--hh)}
.brand{display:flex;align-items:center;gap:9px;font-weight:700;letter-spacing:-.02em}
.brand .bx{width:var(--hh,34px);height:var(--hh,34px);border-radius:9px;background:hsl(var(--primary));color:hsl(var(--primary-foreground));display:grid;place-items:center;flex:none}
/* min-width:0 обязателен: иначе вкладки распирают шапку по своей ширине,
   аватар не влезает и flex-wrap сбрасывает его на вторую строку */
.tabs{display:flex;align-items:center;gap:2px;background:hsl(var(--muted));border-radius:calc(var(--radius) + 2px);padding:3px;min-width:0;max-width:100%;overflow-x:auto;scrollbar-width:none;height:var(--hh,34px)}
.tabs::-webkit-scrollbar{display:none}
.tab{
  display:flex;flex:none;align-items:center;gap:6px;border-radius:calc(var(--radius) - 1px);
  padding:6px 12px;font-size:13px;font-weight:500;color:hsl(var(--muted-foreground));transition:.15s;
}
/* Подпись вкладки. Свой класс, а не формовый .lbl: тот тянул margin-bottom:6px
   (текст уезжал на 3px выше иконки) и жёсткий muted-цвет (подпись не подсвечивалась
   на активной вкладке и при наведении). Типографику .lbl сохраняем. */
.tab-lbl{font-size:10.5px;font-weight:600;letter-spacing:.07em;text-transform:uppercase;color:inherit}
.tab:hover{color:hsl(var(--foreground))}
.tab.on{background:hsl(var(--card));color:hsl(var(--foreground));box-shadow:0 1px 3px rgb(0 0 0 / .1)}
.tab.on svg{color:hsl(var(--primary))}
.tab .n{font-size:10px;font-weight:700;background:hsl(var(--destructive));color:hsl(var(--destructive-foreground));border-radius:99px;padding:0 6px;line-height:16px}
.ava{width:var(--hh,34px);height:var(--hh,34px);flex:none;border-radius:99px;background:hsl(var(--primary) / .15);color:hsl(var(--primary));display:grid;place-items:center;font-size:13px;font-weight:700}

/* ---------- каркас ---------- */
main{padding:26px 22px 90px}
.page-h{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-bottom:18px;row-gap:8px}
.page-h h1{display:flex;align-items:center;gap:8px;font-size:18px;font-weight:700;letter-spacing:-.02em}
/* minmax(0,1fr) + min-width:0 у детей: без этого grid-трек не сжимается ниже
   min-content содержимого и на узком экране появляется горизонтальный скролл */
.g2{display:grid;gap:20px;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:start}
.g-ov{display:grid;gap:20px;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);align-items:start}
.g-ib{display:grid;gap:20px;grid-template-columns:minmax(0,1fr) 300px;align-items:start}
.g4{display:grid;gap:12px;grid-template-columns:repeat(4,minmax(0,1fr))}
.g2>*,.g-ov>*,.g-ib>*,.g4>*,.gform>*,.col>*{min-width:0}
.gform{display:grid;gap:12px;grid-template-columns:1fr 1fr}
.gform .full{grid-column:1/-1}

/* ---------- обзор ---------- */
.stat .s-l{display:flex;align-items:center;justify-content:space-between;font-size:12px;font-weight:500;color:hsl(var(--muted-foreground))}
.stat .s-v{margin-top:8px;font-size:21px;font-weight:700;letter-spacing:-.03em}
.stat .s-s{margin-top:8px;display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-size:11.5px;color:hsl(var(--muted-foreground))}
.trend{display:inline-flex;align-items:center;gap:4px;border-radius:99px;padding:2px 8px;font-size:10.5px;font-weight:600;white-space:nowrap}
.trend.up{background:hsl(var(--success) / .13);color:hsl(var(--success))}
.trend.down{background:hsl(var(--destructive) / .1);color:hsl(var(--destructive))}
.trend.flat{background:hsl(var(--muted));color:hsl(var(--muted-foreground))}
.banner{
  display:flex;flex-wrap:wrap;align-items:center;gap:11px;margin-bottom:18px;
  border:1px solid hsl(var(--primary) / .25);border-radius:calc(var(--radius) + 4px);
  background:hsl(var(--primary) / .06);padding:12px 16px;font-size:13px;row-gap:8px;
}
.cta{cursor:pointer;transition:.15s;border-color:hsl(var(--warning) / .4)!important;
  background:linear-gradient(135deg,hsl(var(--warning) / .09),transparent 60%),hsl(var(--card))}
.cta:hover{transform:translateY(-2px)}
.cta.ok{border-color:hsl(var(--success) / .4)!important;
  background:linear-gradient(135deg,hsl(var(--success) / .09),transparent 60%),hsl(var(--card))}
.list-row{display:flex;align-items:center;gap:12px;padding:11px 0}
.list-row + .list-row{border-top:1px solid hsl(var(--border) / .6)}

/* ---------- лента ---------- */
.day-h{display:flex;align-items:baseline;gap:8px;padding:20px 4px 10px;font-size:12px;font-weight:600;color:hsl(var(--muted-foreground))}
.tx{
  display:flex;align-items:center;gap:13px;margin-bottom:8px;padding:13px 16px;
  border-radius:calc(var(--radius) + 4px);background:hsl(var(--card));cursor:pointer;
  box-shadow:0 1px 2px rgb(16 24 40 / .03);transition:.13s;
}
.dark .tx{box-shadow:none;border:1px solid hsl(var(--border) / .5)}
.tx:hover{background:hsl(var(--accent))}
.tx.open{background:hsl(var(--accent))}
.tx .t-n{display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-size:13.5px;font-weight:600}
.tx .t-m{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-top:2.5px;font-size:11.5px;color:hsl(var(--muted-foreground))}
.tx .amt{text-align:right}
.tx .amt .v{font-size:14px;font-weight:600}
.tx .amt .r{margin-top:1px;display:flex;justify-content:flex-end;align-items:center;gap:4px;font-size:11px;color:hsl(var(--muted-foreground))}
.accdot{display:inline-block;width:7px;height:7px;border-radius:2px}
.bulkbar{
  display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-bottom:12px;
  border:1px solid hsl(var(--ring) / .4);border-radius:calc(var(--radius) + 4px);
  background:hsl(var(--accent) / .6);padding:8px 14px;font-size:13px;font-weight:500;row-gap:8px;
}
.editor{margin-bottom:8px}

/* ---------- инбокс ---------- */
.q-it{display:flex;width:100%;align-items:center;gap:10px;border-radius:calc(var(--radius) + 2px);padding:11px 12px;text-align:left}
.q-it:hover{background:hsl(var(--accent))}
.q-it.on{background:hsl(var(--accent));outline:1px solid hsl(var(--ring) / .5)}
.amount-big{margin:10px 0 8px;font-size:32px;font-weight:700;letter-spacing:-.04em}
.task-meta{display:flex;flex-wrap:wrap;gap:14px;font-size:12.5px;color:hsl(var(--muted-foreground))}
.task-meta b{color:hsl(var(--foreground))}

/* ---------- анализ ---------- */
.donut{width:186px;height:186px;flex:none;border-radius:50%;position:relative;
  -webkit-mask:radial-gradient(circle,transparent 53px,#000 54px);mask:radial-gradient(circle,transparent 53px,#000 54px)}
.donut-c{position:absolute;inset:0;display:grid;place-items:center;text-align:center;pointer-events:none}
.donut-hold{position:relative;width:186px;height:186px;flex:none}
.leg-row{display:flex;align-items:center;gap:10px;padding:8px 0;font-size:13px}
.leg-row + .leg-row{border-top:1px solid hsl(var(--border) / .5)}
.leg-row .sw{width:10px;height:10px;flex:none;border-radius:3px}
.bars{display:flex;align-items:flex-end;gap:12px;height:150px;padding-top:8px}
.bars .bm{flex:1;display:flex;height:100%;flex-direction:column;align-items:center;justify-content:flex-end;gap:6px}
.bars .duo{display:flex;align-items:flex-end;gap:3px;height:100%}
.bars .duo i{display:block;width:12px;border-radius:4px 4px 2px 2px}
.bars .lb{font-size:11px;font-weight:500;color:hsl(var(--muted-foreground))}
.bars .bm.cur .lb{color:hsl(var(--foreground));font-weight:700}

/* ---------- долги ---------- */
.avatar{width:36px;height:36px;flex:none;border-radius:99px;background:hsl(var(--muted));display:grid;place-items:center;font-size:13px;font-weight:700}

/* ---------- модалка / тост ---------- */
.overlay{position:fixed;inset:0;z-index:100;display:grid;place-items:center;background:rgb(9 9 11 / .45);backdrop-filter:blur(3px);padding:16px}
/* Прокрутка внутри модалок/списков не должна «пробиваться» на элемент за ними
   (scroll chaining). Ловим все скроллеры: сами модалки и вложенные списки. */
.dlg,.wz-body,.wz-cards,.csel-list,.combo-pop,.sheet,
.overlay [style*="overflow-y:auto"],.overlay [style*="overflow-y: auto"]{overscroll-behavior:contain}
[style*="overflow-y:auto"]{overscroll-behavior:contain}
.dlg{width:100%;max-width:440px;max-height:90vh;overflow-y:auto}
.dlg.wide{max-width:640px}
.toast{
  position:fixed;bottom:28px;left:50%;z-index:130;transform:translateX(-50%);
  display:flex;align-items:center;gap:8px;border-radius:calc(var(--radius) - 2px);
  padding:10px 16px;font-size:13px;font-weight:600;box-shadow:0 8px 24px rgb(0 0 0 / .25);
  background:hsl(var(--foreground));color:hsl(var(--background));
}
.toast.err{background:hsl(var(--destructive));color:hsl(var(--destructive-foreground))}
.bigin{width:100%;border:0;outline:0;background:none;text-align:center;
  font:700 40px Inter,sans-serif;letter-spacing:-.03em;color:hsl(var(--foreground));font-variant-numeric:tabular-nums}
.bigin::placeholder{color:hsl(var(--muted-foreground) / .4)}
.segm{display:flex;background:hsl(var(--muted));border-radius:calc(var(--radius) - 1px);padding:4px;margin-bottom:18px}
.segm button{flex:1;display:flex;align-items:center;justify-content:center;gap:6px;border-radius:calc(var(--radius) - 3px);padding:7px;font-size:13px;font-weight:500;color:hsl(var(--muted-foreground))}
.segm button.on{background:hsl(var(--card));color:hsl(var(--foreground));box-shadow:0 1px 3px rgb(0 0 0 / .1)}

/* ---------- внутри Telegram Mini App ---------- */
/* Telegram рисует свою шапку сверху и «домашнюю» полосу снизу на iPhone —
   уводим контент из-под них через safe-area. */
html.in-tg .top{padding-top:env(safe-area-inset-top,0px)}
html.in-tg main{
  padding-left:max(14px,env(safe-area-inset-left));
  padding-right:max(14px,env(safe-area-inset-right));
  padding-bottom:calc(70px + env(safe-area-inset-bottom,0px));
}

/* ---------- адаптив ---------- */
@media(max-width:1120px){
  .g-ov,.g-ib{grid-template-columns:minmax(0,1fr)}
}
@media(max-width:960px){
  .g2{grid-template-columns:minmax(0,1fr)}
  .g4{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .tab span.tab-lbl{display:none}
  .hdr-name{display:none}
  .gform{grid-template-columns:1fr}
}
@media(max-width:640px){
  .top-in{padding:8px 14px;gap:8px}
  main{padding:16px 14px 70px}
  .col,.g2,.g-ov,.g-ib{gap:12px}
  .g4{gap:10px}
  .card-c{padding:14px}
  .card-h{padding:14px 14px 0}
  .hdr-cash{display:none}
  .stat .s-v{font-size:18px}
  .amount-big{font-size:26px}
  .bigin{font-size:32px}
  .tx{padding:11px 12px;gap:10px}
  .tx .amt .r{display:none}
  .donut,.donut-hold{width:150px;height:150px}
}

/* ================= ТЕЛЕФОН: раскладка «нативный iOS» =================
   Навигация вниз под большой палец, крупная шапка раздела, читаемая
   типографика (15–17px) и тап-таргеты не меньше 44px по Apple HIG.
   Всё внутри ≤640px — десктоп не затрагивается. */
@media(max-width:640px){
  body{font-size:16px}

  /* шапка: только бренд и действия, вкладки уехали вниз */
  .top{position:static}
  .tabs{display:none}
  .top-in{padding:10px 16px;gap:10px;flex-wrap:nowrap}
  .brand{font-size:16px}
  .ava{width:36px;height:36px;font-size:14px}

  /* крупный заголовок раздела (включается ниже, после базового display:none) */
  .m-head{padding:10px 16px 12px}
  .m-head h1{display:flex;align-items:center;gap:9px;font-size:28px;font-weight:800;letter-spacing:-.03em;line-height:1.15}
  .m-sub{margin-top:3px;font-size:15px;color:hsl(var(--muted-foreground))}
  /* заголовок и описание раздела дублировали бы крупную шапку.
     Прячем только прямых потомков: в «Истории» в page-h лежат контролы. */
  .page-h h1,.page-h > .muted{display:none}
  .page-h{gap:10px;margin:0 14px 14px}
  .page-h:empty{display:none}

  main{padding:0 0 calc(78px + env(safe-area-inset-bottom,0px))}
  .card{border-radius:16px;margin:0 14px}
  .col,.g2,.g-ov,.g-ib{gap:14px}

  /* типографика: мелкие служебные размеры больше не годятся */
  .fs11,.fs115,.fs12,.fs125{font-size:14px}
  .fs13,.fs135{font-size:15px}
  .card-t{font-size:17px}
  .card-d{font-size:14px;line-height:1.5}
  .lbl{font-size:13px;letter-spacing:.02em;text-transform:none;margin-bottom:7px}
  .badge{font-size:12px;padding:3px 9px}
  .badge.sm{font-size:11.5px;padding:2px 7px}
  .muted{line-height:1.5}

  /* нажимаемое — минимум 44px */
  .btn{min-height:44px;height:auto;padding:0 16px;font-size:15px;border-radius:12px}
  .btn.md{min-height:48px;font-size:16px}
  .btn.icon{width:44px;min-height:44px;padding:0}
  /* 26px, а не 44: строка операции сама кликабельна (64px), и полноразмерный
     чекбокс перехватывал бы нажатия по строке */
  .chk{width:26px;height:26px;margin-right:2px}
  .input,.select select{height:46px;font-size:16px;border-radius:12px}
  textarea.input{font-size:16px}
  .chip{padding:10px 15px;font-size:15px;min-height:44px}
  .combo-opt{padding:12px 12px;font-size:15px}
  .csel-btn{height:46px;font-size:16px;border-radius:12px}
  .csel-search input{font-size:16px}
  .csel-search{padding:12px}
  .csel-it{padding:12px 10px;font-size:16px;min-height:48px}
  .csel-list{max-height:44vh}
  .csel-new{padding:14px 12px;font-size:16px;min-height:52px}
  .cprow{padding:13px 14px;font-size:15px}
  .cprow .k{font-size:12px;width:auto;min-width:78px}

  /* строки списков: выше и читаемее */
  .tx{padding:13px 14px;gap:12px;min-height:64px}
  .tx .t-n{font-size:16px;gap:7px}
  .tx .t-m{font-size:14px;margin-top:3px}
  .tx .amt .v{font-size:16px}
  .day-h{font-size:13px;padding:14px 4px 7px}
  .icbox{width:44px !important;height:44px !important}

  /* Модалки — почти на весь экран, снизу. padding-bottom обязателен: модалка
     прижата к краю, и последняя кнопка («Сохранить») уходила под домашнюю
     полосу iPhone и панель Telegram — на экране она была, а нажать нельзя. */
  .overlay{padding:0;place-items:end center}
  .dlg{
    max-width:100%;max-height:92vh;border-radius:20px 20px 0 0;
    animation:sheetup .22s both;
    padding-bottom:calc(10px + env(safe-area-inset-bottom,0px));
  }
  .wz{max-height:94vh;border-radius:20px 20px 0 0}
  .wz-ov{padding:0;place-items:end center}
  .wz-foot{padding-bottom:calc(14px + env(safe-area-inset-bottom,0px))}
}

@keyframes sheetup{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}

/* Крупная шапка раздела и нижняя навигация — только на телефоне.
   На десктопе заголовки рисуют сами вью, а вкладки живут в шапке. */
.m-head{display:none}
.tabbar{display:none}
@media(max-width:640px){
  .m-head{display:block}
  .tabbar{
    display:flex;position:fixed;left:0;right:0;bottom:0;z-index:90;
    border-top:1px solid hsl(var(--border));background:hsl(var(--background) / .94);
    backdrop-filter:blur(10px);padding:6px 4px calc(6px + env(safe-area-inset-bottom,0px));
  }
  .tb{
    flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;
    padding:6px 2px;min-height:50px;border:0;background:none;font-size:11px;
    font-weight:600;color:hsl(var(--muted-foreground));transition:color .13s;
  }
  .tb.on{color:hsl(var(--primary))}
  /* Пока открыта модалка — прячем навигацию: она перекрывала нижние кнопки
     диалога («Сохранить» физически не нажималась, тап уходил во вкладку). */
  body:has(.overlay) .tabbar,
  body:has(.wz-ov) .tabbar{display:none}
  /* Тост поднимаем над нижней навигацией (~68px) и home-полосой iPhone —
     иначе он ложился прямо на панель и уходил под home-индикатор. */
  .toast{bottom:calc(80px + env(safe-area-inset-bottom,0px));left:16px;right:16px;transform:none;justify-content:center}
  /* при открытой модалке навигация скрыта — можно опустить тост ниже */
  body:has(.overlay) .toast,body:has(.wz-ov) .toast{bottom:calc(20px + env(safe-area-inset-bottom,0px))}
  .tb-ic{position:relative;display:grid;place-items:center}
  .tb-n{
    position:absolute;top:-5px;left:11px;min-width:17px;padding:0 4px;
    background:hsl(var(--destructive));color:hsl(var(--destructive-foreground));
    border-radius:99px;font-size:10px;font-weight:700;line-height:17px;text-align:center;
  }
  /* лист «Ещё» */
  .sheet-ov{
    position:fixed;inset:0;z-index:110;display:grid;place-items:end center;
    background:rgb(9 9 11 / .45);backdrop-filter:blur(3px);
  }
  .sheet{
    width:100%;background:hsl(var(--card));border-radius:20px 20px 0 0;
    padding:8px 10px calc(14px + env(safe-area-inset-bottom,0px));
    animation:sheetup .22s both;box-shadow:0 -8px 40px rgb(9 9 11 / .28);
  }
  .sheet-grip{width:38px;height:4px;border-radius:99px;background:hsl(var(--border));margin:6px auto 10px}
  .sheet-it{
    display:flex;align-items:center;gap:13px;width:100%;min-height:54px;padding:0 12px;
    border:0;background:none;border-radius:13px;font-size:16px;font-weight:500;
    color:hsl(var(--foreground));text-align:left;
  }
  .sheet-it.on{background:hsl(var(--primary)/.1);color:hsl(var(--primary))}
  .sheet-it:active{background:hsl(var(--accent))}
}