:root{
  --bg:#F6F2EE; --card:#FFFFFF; --ink:#2E2A33; --muted:#8B8494;
  --rose:#E4766B; --rose-soft:#FBE9E5; --sage:#7FAE9B; --lilac:#A98BD6;
  --amber:#E5A93F; --line:#ECE6E0; --shadow:0 10px 30px rgba(64,48,58,.08);
  --radius:24px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--bg); color:var(--ink);
  font:16px/1.55 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  -webkit-font-smoothing:antialiased; padding-bottom:96px;
}
h1,h2,h3{margin:0; letter-spacing:-.02em}
p{margin:0}
button{font:inherit; cursor:pointer}
.wrap{width:100%; max-width:1120px; margin:0 auto; padding:0 18px}
.hidden{display:none !important}
.muted{color:var(--muted); font-size:14px}

/* ---------- шапка ---------- */
.topbar{
  position:sticky; top:0; z-index:30; background:rgba(246,242,238,.92);
  backdrop-filter:blur(10px); border-bottom:1px solid var(--line);
}
.topbar-in{display:flex; align-items:center; justify-content:space-between; gap:12px; padding-top:12px; padding-bottom:12px}
.brand{display:flex; align-items:center; gap:12px}
.brand-mark{
  width:44px;height:44px;border-radius:16px;display:grid;place-items:center;
  background:linear-gradient(140deg,var(--rose),#F0A08C); color:#fff; font-weight:700; font-size:22px;
  box-shadow:0 8px 18px rgba(228,118,107,.35);
}
.brand h1{font-size:20px; font-weight:700}
.brand-sub{font-size:12px; color:var(--muted)}
.topbar-actions{display:flex; align-items:center; gap:10px}
.month-pick{display:flex; align-items:center; gap:6px; background:var(--card); border:1px solid var(--line); border-radius:999px; padding:4px 8px}
.month-pick b{font-size:14px; min-width:104px; text-align:center}
.icon-btn{
  min-width:36px; height:36px; border-radius:12px; border:1px solid var(--line);
  background:var(--card); color:var(--ink); font-size:18px; line-height:1;
}
.icon-btn:hover{background:var(--rose-soft); color:var(--rose)}

/* ---------- вкладки ---------- */
.tabs{display:flex; gap:8px; overflow-x:auto; padding-top:14px; padding-bottom:14px; scrollbar-width:none}
.tabs::-webkit-scrollbar{display:none}
.tab{
  flex:0 0 auto; min-height:44px; padding:0 18px; border-radius:999px; border:1px solid var(--line);
  background:var(--card); color:var(--muted); font-weight:600; font-size:15px;
}
.tab.is-active{background:var(--ink); color:#fff; border-color:var(--ink)}

/* ---------- карточки ---------- */
.panel{display:flex; flex-direction:column; gap:16px; padding-bottom:24px}
.card{background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:20px; box-shadow:var(--shadow)}
.card-head{display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:14px; flex-wrap:wrap}
.card-head h2{font-size:18px}
.card-label{font-size:13px; text-transform:uppercase; letter-spacing:.08em; color:var(--muted); font-weight:700}
.grid-cards{display:grid; gap:16px; grid-template-columns:repeat(3,1fr)}
.balance-card{grid-column:span 2; background:linear-gradient(150deg,#FFFFFF 55%,#FBE9E5)}
.balance{font-size:40px; font-weight:800; letter-spacing:-.03em; margin:6px 0 2px}
.balance-split{display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-top:16px; padding-top:14px; border-top:1px dashed var(--line)}
.sum{font-size:22px; font-weight:700; margin:4px 0}
.income{color:var(--sage)} .expense{color:var(--rose)}

.btn{
  min-height:44px; padding:0 18px; border-radius:14px; border:1px solid transparent;
  background:var(--rose); color:#fff; font-weight:600; font-size:15px;
  box-shadow:0 6px 16px rgba(228,118,107,.28);
}
.btn:hover{filter:brightness(1.04)}
.btn.ghost{background:var(--card); color:var(--ink); border-color:var(--line); box-shadow:none}
.btn.ghost:hover{background:var(--rose-soft); color:var(--rose)}
.btn.small{min-height:38px; padding:0 14px; font-size:14px; border-radius:12px}
.btn.danger{background:#fff; color:var(--rose); border-color:#F3C9C3; box-shadow:none}
.btn.danger:hover{background:var(--rose-soft)}

/* ---------- прогресс ---------- */
.progress{height:10px; border-radius:999px; background:#F1EBE6; overflow:hidden; margin:10px 0 6px}
.progress.big{height:14px}
.progress span{display:block; height:100%; border-radius:999px; background:linear-gradient(90deg,var(--rose),#F2A48F); transition:width .5s ease}
.progress.ok span{background:linear-gradient(90deg,var(--sage),#A9D6C0)}
.progress.warn span{background:linear-gradient(90deg,var(--amber),#F2CE86)}
.progress.over span{background:linear-gradient(90deg,#D9564A,#EE8073)}

/* ---------- списки ---------- */
.list{display:flex; flex-direction:column}
.op{
  display:flex; align-items:center; gap:12px; padding:12px 2px; border-bottom:1px solid var(--line);
}
.op:last-child{border-bottom:0}
.dot{width:42px;height:42px;border-radius:14px;display:grid;place-items:center;font-size:20px;flex:0 0 auto}
.op-main{flex:1 1 auto; min-width:0}
.op-title{font-weight:600; font-size:15px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.op-sub{font-size:13px; color:var(--muted)}
.op-amount{font-weight:700; white-space:nowrap; font-size:15px}
.op-amount.income{color:var(--sage)} .op-amount.expense{color:var(--ink)}
.op-actions{display:flex; gap:6px}
.mini{
  min-width:36px;height:36px;border-radius:11px;border:1px solid var(--line);background:var(--card);
  color:var(--muted); font-size:14px; display:grid; place-items:center;
}
.mini:hover{background:var(--rose-soft); color:var(--rose)}
.row-end{display:flex; justify-content:flex-end; margin-top:12px}
.empty{padding:26px 10px; text-align:center; color:var(--muted)}

/* ---------- графики ---------- */
.bars{display:flex; flex-direction:column; gap:14px}
.bar-row{display:grid; grid-template-columns:minmax(96px,34%) 1fr auto; align-items:center; gap:12px}
.bar-label{font-size:14px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.bar-track{height:12px; background:#F3EDE8; border-radius:999px; overflow:hidden}
.bars.tall .bar-track{height:18px}
.bar-fill{height:100%; border-radius:999px; transition:width .6s ease}
.bar-val{font-size:14px; font-weight:700; white-space:nowrap}
.legend{display:flex; flex-wrap:wrap; gap:10px 18px; margin-top:16px}
.legend span{display:flex; align-items:center; gap:7px; font-size:14px; color:var(--muted)}
.legend i{width:12px;height:12px;border-radius:4px;display:inline-block}
.month-row{display:grid; grid-template-columns:92px 1fr; gap:12px; align-items:center; margin-bottom:12px}
.month-row b{font-size:14px}
.pair{display:flex; flex-direction:column; gap:5px}
.pair .bar-track{height:10px}
.table-wrap{overflow-x:auto; margin-top:14px}
table{width:100%; border-collapse:collapse; font-size:14px; min-width:420px}
th,td{padding:9px 8px; text-align:right; border-bottom:1px solid var(--line)}
th:first-child,td:first-child{text-align:left}
th{color:var(--muted); font-weight:600; font-size:13px}

/* ---------- бюджет / лимиты ---------- */
.form-row{display:flex; gap:12px; align-items:flex-end; flex-wrap:wrap}
.field{display:flex; flex-direction:column; gap:6px; font-size:13px; color:var(--muted); font-weight:600; flex:1 1 180px}
.field input,.field select{
  min-height:44px; border-radius:14px; border:1px solid var(--line); background:#FCFAF8;
  padding:0 14px; font-size:16px; color:var(--ink); font-weight:500; width:100%;
}
.field input:focus,.field select:focus{outline:2px solid var(--rose-soft); border-color:var(--rose)}
.field.sm{flex:0 0 auto}
.filters{display:flex; gap:8px; flex-wrap:wrap}
.limit-row{padding:12px 0; border-bottom:1px solid var(--line)}
.limit-row:last-child{border-bottom:0}
.limit-head{display:flex; justify-content:space-between; align-items:center; gap:10px; font-weight:600}
.limit-head input{
  width:130px; min-height:38px; border-radius:12px; border:1px solid var(--line); padding:0 10px;
  font-size:15px; text-align:right; background:#FCFAF8;
}

/* ---------- цели и долги ---------- */
.goal-list,.debt-list{display:grid; gap:14px; grid-template-columns:repeat(2,1fr)}
.goal{background:#FCFAF8; border:1px solid var(--line); border-radius:20px; padding:16px}
.goal h3{font-size:16px; margin-bottom:2px}
.goal .sum{font-size:19px}
.debt{background:#FCFAF8; border:1px solid var(--line); border-radius:20px; padding:16px}
.debt-head{display:flex; justify-content:space-between; align-items:flex-start; gap:10px}
.debt h3{font-size:16px}
.pay-list{margin:10px 0 0; padding:0; list-style:none; font-size:13px; color:var(--muted)}
.pay-list li{display:flex; justify-content:space-between; gap:10px; padding:5px 0; border-top:1px dashed var(--line)}
.debt-actions{display:flex; gap:8px; margin-top:12px; flex-wrap:wrap}

/* ---------- календарь ---------- */
.cal-nav{display:flex; align-items:center; justify-content:center; gap:14px; margin-bottom:12px}
.cal-grid{display:grid; grid-template-columns:repeat(7,1fr); gap:6px}
.cal-grid .dow{text-align:center; font-size:12px; color:var(--muted); font-weight:700; padding:4px 0}
.cal-cell{
  min-height:52px; border-radius:14px; border:1px solid var(--line); background:#FCFAF8; padding:6px;
  display:flex; flex-direction:column; gap:3px; font-size:12px; color:var(--ink);
}
.cal-cell.out{opacity:.35}
.cal-cell.today{border-color:var(--rose); background:#fff}
.cal-cell b{font-weight:700}
.cal-dots{display:flex; gap:3px; flex-wrap:wrap}
.cal-dots i{width:7px;height:7px;border-radius:50%; display:inline-block}
.cal-sum{font-size:12px; color:var(--muted); margin-top:auto}

/* ---------- модалки ---------- */
.modal-back{
  position:fixed; inset:0; z-index:60; background:rgba(46,42,51,.45);
  display:flex; align-items:center; justify-content:center; padding:18px; backdrop-filter:blur(3px);
}
.modal{
  background:var(--card); border-radius:26px; width:100%; max-width:460px; max-height:90vh; overflow:auto;
  padding:22px; box-shadow:0 24px 60px rgba(40,30,40,.28);
}
.modal-head{display:flex; justify-content:space-between; align-items:center; margin-bottom:16px}
.modal-head h2{font-size:19px}
.type-switch{display:grid; grid-template-columns:1fr 1fr; gap:6px; background:#F4EEE9; padding:5px; border-radius:16px; margin-bottom:16px}
.type-btn{min-height:40px; border:0; border-radius:12px; background:transparent; color:var(--muted); font-weight:600}
.type-btn.is-active{background:var(--card); color:var(--ink); box-shadow:0 3px 10px rgba(70,55,65,.10)}
.type-btn[data-type="expense"].is-active{color:var(--rose)}
.type-btn[data-type="income"].is-active{color:var(--sage)}
.modal form{display:flex; flex-direction:column; gap:12px}
.modal-actions{display:flex; gap:10px; justify-content:flex-end; margin-top:6px}
.modal-actions .btn{min-width:110px}
.fab{
  position:fixed; right:18px; bottom:22px; z-index:40; width:60px; height:60px; border-radius:22px; border:0;
  background:linear-gradient(140deg,var(--rose),#F0A08C); color:#fff; font-size:30px; line-height:1;
  box-shadow:0 14px 30px rgba(228,118,107,.42);
}
.toast{
  position:fixed; left:50%; transform:translateX(-50%); bottom:96px; z-index:70;
  background:var(--ink); color:#fff; padding:12px 20px; border-radius:999px; font-size:14px; font-weight:600;
  box-shadow:0 10px 24px rgba(40,30,40,.28);
}
.foot{padding:18px 18px 30px; text-align:center}

/* ---------- адаптация ---------- */
@media (max-width:1000px){
  .grid-cards{grid-template-columns:repeat(2,1fr)}
  .balance-card{grid-column:span 2}
  .goal-list,.debt-list{grid-template-columns:1fr}
}
@media (max-width:640px){
  body{padding-bottom:110px}
  .grid-cards{grid-template-columns:1fr}
  .balance-card{grid-column:span 1}
  .balance{font-size:34px}
  .balance-split{grid-template-columns:1fr; gap:8px}
  .card{padding:16px; border-radius:20px}
  .brand-sub{display:none}
  .btn.ghost#btnAddTop{display:none}
  .topbar-in{padding-top:10px; padding-bottom:10px}
  .bar-row{grid-template-columns:1fr auto; gap:6px}
  .bar-row .bar-track{grid-column:1 / -1}
  .month-pick b{min-width:86px; font-size:13px}
  .cal-cell{min-height:44px; padding:4px; font-size:11px}
  .limit-head{flex-direction:column; align-items:flex-start}
  .limit-head input{width:100%}
  .fab{width:56px; height:56px; right:14px; bottom:16px}
}

/* ---------- дополнения ---------- */
.brand-txt{min-width:0}
.limit-list{display:flex; flex-direction:column}
.cal-day-head{margin:18px 0 6px; padding-top:14px; border-top:1px dashed var(--line)}
.cal-day-head h3{font-size:16px}
.modal textarea{
  min-height:64px; border-radius:14px; border:1px solid var(--line); background:#FCFAF8;
  padding:10px 14px; font-size:16px; color:var(--ink); font-weight:500; width:100%;
  font-family:inherit; resize:vertical;
}
.modal textarea:focus{outline:2px solid var(--rose-soft); border-color:var(--rose)}

/* ---------- сенсорные кнопки и узкий экран ---------- */
.icon-btn{height:44px; min-width:44px}
.mini{height:44px; min-width:44px; font-size:15px}
.btn.small{min-height:44px}
@media (max-width:640px){
  .topbar-in{flex-wrap:wrap; gap:8px; row-gap:8px}
  .brand{flex:1 1 auto; min-width:0}
  .brand-mark{width:40px; height:40px; border-radius:14px; font-size:20px}
  .brand h1{font-size:18px}
  .topbar-actions{flex:0 0 auto; gap:8px}
  .month-pick{padding:3px 6px; gap:4px}
  .month-pick b{min-width:64px; font-size:13px}
  .op{gap:10px}
  .op-main{min-width:0}
  .op-title{white-space:normal; overflow:visible; text-overflow:clip}
}

@media (max-width:640px){
  .op{flex-wrap:wrap}
  .op-main{flex:1 1 auto; min-width:0}
  .op-amount{margin-left:auto; font-size:14px}
  .op-actions{width:100%; justify-content:flex-end; margin-top:2px}
  .filters{width:100%}
  .filters .field{flex:1 1 140px}
  .balance-split{gap:10px}
  .table-wrap{margin-left:-4px; margin-right:-4px}
}