:root{
  --green:#6f9683;          /* шапка */
  --green-dark:#5c8270;
  --accent:#2fa06a;         /* активный текст/подчёркивание */
  --bg:#eceeed;             /* фон */
  --card:#ffffff;
  --text:#2b2f2e;
  --muted:#9aa0a0;
  --line:#eef0ef;
  --yellow:#f5b81e;         /* кнопка + */
  --red:#f0544a;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
}
*{box-sizing:border-box; -webkit-tap-highlight-color:transparent;}
html,body{margin:0; padding:0; background:var(--bg); color:var(--text);
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",Roboto,sans-serif;
  -webkit-font-smoothing:antialiased;}
.hidden{display:none !important;}
button{font-family:inherit; cursor:pointer;}
input{font-family:inherit;}
svg{display:block;}

/* ---------- Вход ---------- */
.login{position:fixed; inset:0; display:flex; align-items:center; justify-content:center; padding:24px; background:var(--bg);}
.login-card{width:100%; max-width:340px; text-align:center;}
.login-logo{width:76px; height:76px; margin:0 auto 16px; border-radius:20px;
  background:var(--green); color:#fff; font-size:40px;
  display:flex; align-items:center; justify-content:center; font-weight:700;}
.login h1{font-size:28px; margin:0 0 28px; color:var(--text);}
.login input{width:100%; padding:15px 16px; margin-bottom:12px; border:1px solid var(--line);
  border-radius:12px; background:#fff; color:var(--text); font-size:17px;}
.btn-primary{width:100%; padding:15px; border:none; border-radius:12px; background:var(--green);
  color:#fff; font-size:17px; font-weight:600; margin-top:4px;}
.err{color:var(--red); font-size:14px; margin-top:12px; min-height:18px; text-align:center;}

/* ---------- Шапка ---------- */
.app{max-width:520px; margin:0 auto; padding-bottom:40px;}
.header{background:var(--green); color:#fff; padding:calc(var(--safe-top) + 4px) 12px 0;}
.header-top{display:flex; align-items:center; justify-content:space-between; gap:8px;}
.hdr-icon{width:40px; height:40px; display:flex; align-items:center; justify-content:center;
  background:none; border:none; color:#fff; padding:8px;}
.hdr-icon svg{width:24px; height:24px;}
.header-center{text-align:center; flex:1;}
.header-title{font-size:15px; opacity:.95;}
.header-title-lg{font-size:18px; font-weight:600;}
.balance{font-size:30px; font-weight:700; letter-spacing:-0.5px; margin-top:2px;}
.tabs{display:flex; margin-top:2px;}
.tab{flex:1; padding:9px 0 11px; border:none; background:none; color:rgba(255,255,255,.72);
  font-size:15px; font-weight:600; letter-spacing:.4px; position:relative;}
.tab.active{color:#fff;}
.tab.active::after{content:""; position:absolute; left:25%; right:25%; bottom:3px; height:3px;
  border-radius:3px; background:#fff;}

/* ---------- Карточка с кольцом ---------- */
.card{background:var(--card); border-radius:18px; margin:-4px 12px 0; padding:14px 12px 10px;
  box-shadow:0 4px 16px rgba(0,0,0,.06); position:relative;}
.period-types{display:flex; gap:2px; justify-content:space-between; overflow-x:auto;
  scrollbar-width:none;}
.period-types::-webkit-scrollbar{display:none;}
.ptype{white-space:nowrap; padding:6px 10px; border:none; border-radius:16px; background:none;
  color:var(--muted); font-size:15px; font-weight:500;}
.ptype.active{color:var(--accent); font-weight:700;}
.period-nav{display:flex; align-items:center; justify-content:center; gap:10px; margin:8px 0 2px;}
.nav-btn{background:none; border:none; color:#b7bcbb; font-size:24px; line-height:1; padding:2px 8px;}
.period-label{font-size:16px; color:var(--text); min-width:130px; text-align:center;
  font-weight:600; text-decoration:underline; text-underline-offset:4px; text-decoration-color:#d7dbda;}
.today-btn{font-size:15px; color:#c2c7c6;}
.donut-wrap{position:relative; width:230px; height:230px; margin:6px auto 4px;
  display:flex; align-items:center; justify-content:center;
  touch-action:pan-y; user-select:none; -webkit-user-select:none; will-change:transform;}
#donut{width:230px; height:230px; transform:rotate(-90deg);}
.donut-center{position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  pointer-events:none;}
.donut-total{font-size:30px; font-weight:600; color:#6b7170;}
.fab{position:absolute; right:18px; bottom:14px; width:58px; height:58px; border-radius:50%;
  border:none; background:var(--yellow); color:#fff; font-size:32px; line-height:1;
  box-shadow:0 6px 16px rgba(245,184,30,.5); z-index:5;}
.fab.mic{right:86px; background:var(--green); box-shadow:0 6px 16px rgba(111,150,131,.5);
  display:flex; align-items:center; justify-content:center;}
.fab.mic svg{width:26px; height:26px;}
.fab.mic.listening{background:var(--red); animation:pulse 1s ease-in-out infinite;
  box-shadow:0 0 0 0 rgba(240,84,74,.6);}
@keyframes pulse{50%{box-shadow:0 0 0 14px rgba(240,84,74,0);}}
.voice-hint{background:#eaf3ee; color:#2f7a55; border-radius:12px; padding:10px 14px;
  font-size:14px; margin-bottom:14px; line-height:1.4;}

/* ---------- Список категорий ---------- */
.cat-list{padding:10px 12px 0;}
.cat-row{display:flex; align-items:center; gap:14px; padding:14px 16px; background:var(--card);
  border-radius:16px; margin-bottom:10px; box-shadow:0 2px 8px rgba(0,0,0,.04);}
.cat-row .circle{width:44px; height:44px; border-radius:50%; display:flex; align-items:center;
  justify-content:center; color:#fff; flex-shrink:0;}
.cat-row .circle svg{width:26px; height:26px;}
.cat-name{flex:1; font-size:18px; font-weight:500; white-space:nowrap; overflow:hidden;
  text-overflow:ellipsis;}
.cat-pct{color:var(--muted); font-size:16px; margin-right:6px; min-width:44px; text-align:right;}
.cat-amount{font-size:18px; font-weight:600; white-space:nowrap;}
.empty{text-align:center; color:var(--muted); padding:36px 20px; font-size:16px;}

/* ---------- Экран добавления ---------- */
.page{position:fixed; inset:0; background:var(--bg); z-index:40; overflow-y:auto;
  max-width:520px; margin:0 auto;}
.add-header{padding-bottom:0;}
.add-body{padding:20px 18px calc(var(--safe-bottom) + 30px);}
.amount-row{display:flex; align-items:center; justify-content:center; gap:10px; margin:6px 0 8px;}
.amount-input{width:auto; max-width:60%; border:none; border-bottom:2px solid var(--line);
  background:none; color:var(--text); font-size:40px; font-weight:600; text-align:center; outline:none;
  padding:4px 8px;}
.amount-cur{font-size:26px; font-weight:600; color:var(--accent);}
.field-label{color:var(--muted); font-size:14px; margin:18px 2px 8px;}
.account-name{color:var(--accent); font-size:18px; font-weight:600;}
.field{width:100%; padding:13px 14px; border:1px solid var(--line); border-radius:12px;
  background:#fff; color:var(--text); font-size:16px;}
.tx-cats{display:grid; grid-template-columns:repeat(4,1fr); gap:10px 6px;}
.tx-cat{background:none; border:none; display:flex; flex-direction:column; align-items:center;
  gap:6px; padding:4px 2px;}
.tx-cat .circle{width:56px; height:56px; border-radius:50%; display:flex; align-items:center;
  justify-content:center; color:#fff; border:3px solid transparent; transition:.15s;}
.tx-cat.active .circle{border-color:var(--text);}
.tx-cat .circle svg{width:30px; height:30px;}
.tx-cat .lbl{font-size:12px; color:var(--text); text-align:center; max-width:64px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.tx-cat.more .circle{background:#c9cecd;}
.date-quick{display:flex; gap:10px; flex-wrap:wrap; align-items:center;}
.dq{border:none; background:#fff; border:1px solid var(--line); border-radius:12px;
  padding:8px 14px; text-align:center; color:var(--text); font-size:15px; line-height:1.2;}
.dq .d1{font-weight:600;} .dq .d2{font-size:12px; color:var(--muted);}
.dq.active{background:var(--green); border-color:var(--green); color:#fff;}
.dq.active .d2{color:rgba(255,255,255,.85);}
.dq-cal{width:44px; height:44px; display:flex; align-items:center; justify-content:center;
  border:1px solid var(--line); border-radius:12px; background:#fff; position:relative;}
.dq-cal svg{width:24px; height:24px;}
.dq-cal input{position:absolute; inset:0; opacity:0;}
.btn-save{margin-top:26px;}

/* ---------- Графики ---------- */
#charts-page .tab{font-size:13px; letter-spacing:0; padding:12px 2px;}
.charts-body{padding:14px 8px calc(var(--safe-bottom) + 30px);}
.chart-card{background:#fff; border-radius:16px; padding:14px 8px 10px;
  box-shadow:0 2px 10px rgba(0,0,0,.05);}
.chart-title{font-size:16px; font-weight:600; margin-bottom:4px;}
.chart-sub{font-size:13px; color:var(--muted); margin-bottom:14px;}
.chart-svg{width:100%; height:auto; display:block;}
.chart-legend{display:flex; gap:16px; justify-content:center; flex-wrap:wrap; margin-top:12px;}
.chart-legend .lg{display:flex; align-items:center; gap:6px; font-size:13px; color:var(--text);}
.chart-legend .dot{width:11px; height:11px; border-radius:50%; flex-shrink:0;}
.chart-legend.wrap{justify-content:flex-start; gap:8px 14px; margin-top:14px;
  max-height:150px; overflow-y:auto;}
.chart-tip{display:flex; align-items:center; gap:7px; justify-content:center;
  background:#eef3f0; color:#5a6560; border-radius:10px; padding:8px 12px; font-size:14px;
  margin-bottom:10px; min-height:18px;}
.chart-tip.active{background:#eaf3ee; color:var(--text);}
.chart-tip .dot{width:12px; height:12px; border-radius:50%; flex-shrink:0;}
.chart-tip b{font-weight:600;}
.year-nav{display:flex; align-items:center; justify-content:center; gap:16px; margin:4px 0 10px;}
.year-nav .ylabel{font-size:16px; font-weight:600; min-width:90px; text-align:center;}
.year-nav .ynav{width:34px; height:34px; border-radius:50%; border:none; background:#eef0ef;
  color:var(--text); font-size:20px; line-height:1;}
.year-nav .ynav:disabled{opacity:.35;}
.chart-note{color:var(--muted); font-size:13px; text-align:center; margin-top:14px; padding:0 10px; line-height:1.5;}
.hbar-row{display:flex; align-items:center; gap:10px; margin-bottom:12px;}
.hbar-ic{width:34px; height:34px; border-radius:50%; display:flex; align-items:center;
  justify-content:center; color:#fff; flex-shrink:0;}
.hbar-ic svg{width:20px; height:20px;}
.hbar-mid{flex:1; min-width:0;}
.hbar-top{display:flex; justify-content:space-between; font-size:14px; margin-bottom:4px;}
.hbar-name{font-weight:500; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.hbar-right{display:flex; align-items:baseline; gap:8px; white-space:nowrap; margin-left:8px;}
.hbar-pct{color:var(--muted); font-size:13px;}
.hbar-amt{font-weight:600; white-space:nowrap;}
.hbar-track{height:8px; background:#eef0ef; border-radius:5px; overflow:hidden;}
.hbar-fill{height:100%; border-radius:5px;}
.seg-mini{display:flex; background:#e2e5e4; border-radius:11px; padding:3px; margin-bottom:14px;}
.seg-mini button{flex:1; padding:8px; border:none; background:none; color:var(--muted);
  font-size:14px; font-weight:600; border-radius:9px;}
.seg-mini button.active{background:#fff; color:var(--text); box-shadow:0 1px 3px rgba(0,0,0,.1);}

/* ---------- Инвестиции ---------- */
.hdr-right{display:flex; align-items:center;}
.invest-body{padding:16px 14px calc(var(--safe-bottom) + 90px); position:relative;}
.inv-summary{background:var(--green); color:#fff; border-radius:16px; padding:18px 18px 16px;
  box-shadow:0 4px 14px rgba(111,150,131,.35);}
.inv-sum-label{font-size:14px; opacity:.9;}
.inv-sum-current{font-size:32px; font-weight:700; letter-spacing:-0.5px; margin:2px 0 10px;}
.inv-sum-row{display:flex; justify-content:space-between; align-items:baseline; font-size:15px;}
.inv-sum-row b{font-weight:600;}
.inv-pl{font-weight:700;}
.inv-pl.pos{color:#c8f7d4;} .inv-pl.neg{color:#ffd0cc;}
.inv-rates{text-align:center; color:var(--muted); font-size:13px; margin:12px 0 6px; line-height:1.5;}
.inv-chart-card{background:#fff; border-radius:16px; padding:14px 12px 10px; margin:6px 0 4px;
  box-shadow:0 2px 8px rgba(0,0,0,.04);}
.inv-chart-wait{color:var(--muted); font-size:14px; text-align:center; padding:14px 6px 8px; line-height:1.5;}
.inv-section-title{font-size:14px; color:var(--muted); margin:16px 4px 8px; font-weight:600;}
.inv-row{display:flex; align-items:center; gap:12px; padding:14px; background:#fff; border-radius:14px;
  margin-bottom:10px; box-shadow:0 2px 8px rgba(0,0,0,.04);}
.inv-ic{width:44px; height:44px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  font-size:22px; flex-shrink:0;}
.inv-ic.usd{background:#e3f2e8;} .inv-ic.gold{background:#fdf3d9;}
.inv-mid{flex:1; min-width:0;}
.inv-name{font-size:16px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.inv-sub{font-size:13px; color:var(--muted); margin-top:2px;}
.inv-right{text-align:right; white-space:nowrap;}
.inv-cur{font-size:16px; font-weight:600;}
.inv-badge{display:inline-block; font-size:12px; font-weight:600; padding:2px 7px; border-radius:8px; margin-top:3px;}
.inv-badge.pos{background:#e3f7e9; color:#1c9c4d;} .inv-badge.neg{background:#fde7e5; color:#d1382e;}
.inv-badge.zero{background:#eef0ef; color:#8e8e98;}
.inv-fab{position:fixed; right:24px; bottom:calc(var(--safe-bottom) + 24px); z-index:45;}
.field-hint{font-size:12px; color:var(--muted); margin:6px 2px 0; line-height:1.4;}

/* ---------- Долги ---------- */
.debt-summary{color:#fff; border-radius:16px; padding:18px; margin-bottom:8px; text-align:center;}
.debt-summary.pos{background:var(--accent);}      /* партнёр должен мне — в мою пользу */
.debt-summary.neg{background:var(--red);}         /* я должен партнёру */
.debt-summary.zero{background:#9aa0a0;}            /* в расчёте */
.debt-summary .inv-sum-label{opacity:.9;}
.debt-summary .inv-sum-current{margin:4px 0 0;}
.debt-row{display:flex; align-items:center; gap:12px; padding:13px 14px; background:#fff;
  border-radius:14px; margin-bottom:10px; box-shadow:0 2px 8px rgba(0,0,0,.04);}
.debt-mid{flex:1; min-width:0;}
.debt-comment{font-size:16px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.debt-sub{font-size:13px; color:var(--muted); margin-top:2px;}
.debt-amt{font-size:16px; font-weight:700; white-space:nowrap; margin-left:8px;}
.debt-amt.mine{color:var(--accent);}       /* в мою пользу */
.debt-amt.partner{color:var(--red);}        /* в пользу партнёра */
.debt-day{font-size:13px; color:var(--muted); margin:16px 4px 8px; font-weight:600;}

/* ---------- Модальные листы ---------- */
.modal{position:fixed; inset:0; background:rgba(0,0,0,.4); z-index:50;
  display:flex; align-items:flex-end; justify-content:center;}
.sheet{width:100%; max-width:520px; background:var(--bg); border-radius:20px 20px 0 0;
  padding:14px 16px calc(var(--safe-bottom) + 24px); max-height:92vh; overflow-y:auto;
  animation:slideup .22s ease;}
@keyframes slideup{from{transform:translateY(100%);} to{transform:translateY(0);}}
.sheet-head{display:flex; align-items:center; justify-content:space-between; margin-bottom:14px;}
.sheet-title{font-size:16px; font-weight:600;}
.sheet-cancel{background:none; border:none; color:var(--accent); font-size:16px; font-weight:500;}
.menu-user{color:var(--muted); font-size:14px; margin-bottom:14px;}
.seg{display:flex; background:#e2e5e4; border-radius:11px; padding:3px; margin-bottom:16px;}
.seg-btn{flex:1; padding:9px; border:none; background:none; color:var(--muted); font-size:14px;
  font-weight:600; border-radius:9px;}
.seg-btn.active{background:#fff; color:var(--text); box-shadow:0 1px 3px rgba(0,0,0,.1);}
.mgr-cats{margin-bottom:14px;}
.mgr-row{display:flex; align-items:center; gap:12px; padding:10px 12px; background:#fff;
  border-radius:12px; margin-bottom:8px;}
.mgr-row .circle{width:36px; height:36px; border-radius:50%; display:flex; align-items:center;
  justify-content:center; color:#fff; flex-shrink:0;}
.mgr-row .circle svg{width:22px; height:22px;}
.mgr-row .t{flex:1; font-size:16px;}
.mgr-row.archived{opacity:.5;}
.mgr-hide{background:#eef0ef; border:none; color:var(--muted); font-size:13px; font-weight:600;
  padding:6px 10px; border-radius:8px; white-space:nowrap;}
.mgr-del{background:none; border:none; color:var(--red); font-size:22px; line-height:1; padding:0 4px;}
.new-cat{background:#fff; border-radius:12px; padding:12px; margin-bottom:16px;}
.new-cat-row{display:flex; gap:8px; margin-bottom:10px;}
.btn-small{padding:12px 16px; border:none; border-radius:12px; background:var(--green);
  color:#fff; font-size:15px; font-weight:600; white-space:nowrap;}
.picker-label{font-size:13px; color:var(--muted); margin:4px 0 8px;}
.icon-picker{display:flex; gap:8px; flex-wrap:wrap; margin-bottom:10px;}
.icon-picker .pi{width:40px; height:40px; border-radius:50%; display:flex; align-items:center;
  justify-content:center; color:#fff; border:2px solid transparent;}
.icon-picker .pi.active{border-color:var(--text);}
.icon-picker .pi svg{width:24px; height:24px;}
.color-picker{display:flex; gap:8px; flex-wrap:wrap;}
.color-picker .pc{width:30px; height:30px; border-radius:50%; border:2px solid transparent;}
.color-picker .pc.active{border-color:var(--text); transform:scale(1.1);}
.btn-logout{width:100%; padding:14px; border:none; border-radius:12px; background:#fff;
  color:var(--red); font-size:16px; font-weight:600;}
.tx-list{}
.tx-item{display:flex; align-items:center; gap:12px; padding:12px 12px; background:#fff;
  border-radius:12px; margin-bottom:8px;}
.tx-item .circle{width:36px; height:36px; border-radius:50%; display:flex; align-items:center;
  justify-content:center; color:#fff; flex-shrink:0;}
.tx-item .circle svg{width:22px; height:22px;}
.tx-item .ti-mid{flex:1; min-width:0;}
.tx-item .ti-cat{font-size:15px; font-weight:500;}
.tx-item .ti-date{font-size:13px; color:var(--muted);}
.tx-item .ti-amount{font-weight:600;}
.tx-item .ti-del{background:none; border:none; color:var(--muted); font-size:20px; padding:0 4px;}