:root{
  --bg-color:#F8FAFC;--card-bg:#FFFFFF;--text-main:#0F172A;--text-muted:#64748B;
  --accent-blue:#2563EB;--accent-hover:#1D4ED8;--accent-soft:#EFF6FF;
  --accent-warning:#DF1C1C;--bg-warning:#FFF1F1;--green:#10B981;--green-soft:#ECFDF5;
  --border-color:rgba(0,0,0,0.04);--border-line:#EEF2F6;
  --shadow-natural:0 4px 6px -1px rgba(0,0,0,0.05),0 2px 4px -1px rgba(0,0,0,0.03);
  --shadow-large:0 10px 15px -3px rgba(0,0,0,0.06),0 4px 6px -2px rgba(0,0,0,0.04);
  --safe-b:env(safe-area-inset-bottom,0px);
}
*{box-sizing:border-box;margin:0;padding:0;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;-webkit-tap-highlight-color:transparent;}
body{background:var(--bg-color);color:var(--text-main);display:flex;justify-content:center;height:100vh;overflow:hidden;}
.app-container{width:100%;max-width:430px;height:100%;background:var(--bg-color);position:relative;display:flex;flex-direction:column;box-shadow:var(--shadow-large);}
.header{padding:22px 20px 14px;background:var(--card-bg);text-align:center;z-index:10;border-bottom:1px solid var(--border-color);}
.header h1{font-size:19px;font-weight:600;letter-spacing:-0.4px;}
.header p{font-size:12px;color:var(--text-muted);margin-top:3px;}
.header .sync-dot{display:inline-block;width:7px;height:7px;border-radius:50%;margin-right:5px;vertical-align:middle;}
.sync-on{background:var(--green);}.sync-off{background:#CBD5E1;}
.screens-container{flex:1;position:relative;overflow-y:auto;overflow-x:hidden;}
.screen{display:none;padding:20px;flex-direction:column;gap:22px;min-height:100%;animation:fadeIn .25s ease;}
.screen.active{display:flex;}
@keyframes fadeIn{from{opacity:0;transform:translateY(8px);}to{opacity:1;transform:none;}}

.ai-banner{background:var(--bg-warning);border:1px solid rgba(223,28,28,0.15);padding:14px 16px;border-radius:12px;display:flex;gap:12px;align-items:flex-start;}
.ai-banner.ok{background:var(--accent-soft);border-color:rgba(37,99,235,0.15);}
.ai-banner.good{background:var(--green-soft);border-color:rgba(16,185,129,0.18);}
.ai-banner .ic{font-size:18px;line-height:1.2;flex-shrink:0;}
.ai-banner h4{font-size:14px;font-weight:600;color:var(--accent-warning);}
.ai-banner.ok h4{color:var(--accent-blue);}.ai-banner.good h4{color:var(--green);}
.ai-banner p{font-size:13px;color:var(--text-main);margin-top:2px;line-height:1.4;}

.mic-wrapper{display:flex;flex-direction:column;align-items:center;gap:10px;padding:6px 0;}
.mic-button{width:104px;height:104px;border-radius:50%;background:var(--accent-blue);color:#fff;border:none;display:flex;align-items:center;justify-content:center;box-shadow:0 10px 26px rgba(37,99,235,0.38);cursor:pointer;transition:transform .15s,background .2s;position:relative;}
.mic-button:active{transform:scale(0.95);background:var(--accent-hover);}
.mic-button svg{width:40px;height:40px;fill:currentColor;}
.mic-button.listening{background:var(--accent-warning);box-shadow:0 10px 28px rgba(223,28,28,0.4);}
.mic-button.listening::after{content:'';position:absolute;inset:-10px;border-radius:50%;border:3px solid var(--accent-warning);opacity:.5;animation:pulse 1.3s infinite;}
@keyframes pulse{0%{transform:scale(1);opacity:.5;}100%{transform:scale(1.35);opacity:0;}}
.mic-label{font-size:15px;font-weight:500;color:var(--text-main);}
.transcript{font-size:14px;color:var(--text-muted);font-style:italic;text-align:center;min-height:18px;}
#home-savings:empty{display:none;}
.advice-actions{margin-top:12px;}
.btn-sm{width:auto;display:inline-block;padding:9px 16px;font-size:13px;border-radius:10px;}
.advice-actions .muted{font-size:13px;color:var(--text-muted);font-weight:600;}

.action-buttons{display:flex;gap:14px;width:100%;}
.action-card{flex:1;background:var(--card-bg);padding:15px;border-radius:14px;display:flex;flex-direction:column;align-items:center;gap:9px;box-shadow:var(--shadow-natural);border:1px solid var(--border-color);cursor:pointer;transition:transform .15s;}
.action-card:active{transform:translateY(2px);}
.action-card svg{width:24px;height:24px;fill:var(--accent-blue);}
.action-card span{font-size:13px;font-weight:500;text-align:center;}
.link-btn{background:none;border:none;color:var(--accent-blue);font-size:14px;font-weight:500;cursor:pointer;padding:4px;width:100%;}

.recent-section{width:100%;display:flex;flex-direction:column;gap:12px;}
.section-title{font-size:13px;font-weight:600;color:var(--text-muted);text-transform:uppercase;letter-spacing:0.5px;}
.accordion-item{background:var(--card-bg);border-radius:12px;box-shadow:var(--shadow-natural);border:1px solid var(--border-color);overflow:hidden;}
.accordion-header{padding:15px 16px;display:flex;justify-content:space-between;align-items:center;cursor:pointer;user-select:none;}
.accordion-header-left{display:flex;align-items:center;gap:12px;}
.accordion-header-left .icon{width:32px;height:32px;border-radius:8px;background:var(--accent-soft);color:var(--accent-blue);display:flex;align-items:center;justify-content:center;font-size:16px;}
.category-name{font-size:15px;font-weight:500;}
.category-sum{font-size:15px;font-weight:600;}
.accordion-arrow{width:18px;height:18px;fill:var(--text-muted);transition:transform .2s;}
.accordion-content{max-height:0;overflow:hidden;transition:max-height .25s ease-out;background:#FAFBFC;}
.expanded .accordion-content{border-top:1px solid var(--border-color);max-height:3000px;}
.expanded .accordion-arrow{transform:rotate(180deg);}
.expense-row{padding:11px 16px 11px 60px;display:flex;justify-content:space-between;align-items:center;font-size:14px;border-bottom:1px solid rgba(0,0,0,0.02);}
.expense-row:last-child{border-bottom:none;}
.expense-name{color:var(--text-main);}
.expense-date{font-size:11px;color:var(--text-muted);margin-top:2px;}
.expense-amount{font-weight:500;}
.expense-right{display:flex;align-items:center;gap:8px;min-height:24px;}
.trash-btn{background:none;border:none;color:#94A3B8;cursor:pointer;padding:6px 8px;border-radius:8px;opacity:0;transition:opacity .2s,color .15s,background .15s,transform .1s;display:flex;align-items:center;justify-content:center;}
.trash-btn svg{width:20px;height:20px;fill:currentColor;display:block;}
.expense-row:hover .trash-btn,.trash-btn:focus{opacity:0.7;}
.trash-btn:active{transform:scale(0.9);}
.expense-row.trash-active{background:var(--bg-warning);transition:background .2s;}
.expense-row.trash-active .expense-name,
.expense-row.trash-active .expense-date,
.expense-row.trash-active .expense-amount{opacity:0.45;text-decoration:line-through;}
.expense-row.trash-active .trash-btn{opacity:1;color:#fff;background:var(--accent-warning);padding:6px 14px;border-radius:8px;animation:trashPulse .4s ease;}
.expense-row.trash-active .trash-btn svg{fill:#fff;}
@keyframes trashPulse{0%{transform:scale(0.6);}60%{transform:scale(1.15);}100%{transform:scale(1);}}
.longpress-hint{font-size:11px;color:var(--text-muted);text-align:center;margin-top:6px;font-style:italic;}
.empty{text-align:center;color:#94A3B8;font-size:14px;padding:24px 10px;background:var(--card-bg);border-radius:12px;border:1px solid var(--border-color);}

.period{display:flex;gap:8px;}
.period button{flex:1;font-size:13px;padding:9px;border-radius:10px;border:1px solid var(--border-color);background:var(--card-bg);color:var(--text-muted);cursor:pointer;}
.period button.active{background:var(--text-main);color:#fff;border-color:var(--text-main);}

.balance-card{background:var(--card-bg);border-radius:16px;padding:20px;box-shadow:var(--shadow-natural);border:1px solid var(--border-color);}
.balance-top{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:14px;}
.balance-top .lbl{font-size:13px;color:var(--text-muted);}
.balance-top .val{font-size:26px;font-weight:700;letter-spacing:-0.5px;margin-top:2px;}
.balance-top .saved{text-align:right;font-size:12px;color:var(--text-muted);}
.balance-top .saved b{display:block;font-size:15px;color:var(--green);font-weight:600;}
.donut-wrap{display:flex;align-items:center;gap:16px;flex-wrap:wrap;}
.donut{width:130px;height:130px;border-radius:50%;flex:0 0 auto;position:relative;}
.donut::after{content:'';position:absolute;inset:24px;background:var(--card-bg);border-radius:50%;}
.donut-center{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;z-index:1;}
.donut-center .t{font-size:11px;color:#94A3B8;}
.donut-center .v{font-size:14px;font-weight:700;}
.legend{flex:1;min-width:150px;}
.legend-item{display:flex;align-items:center;gap:8px;font-size:13px;padding:3px 0;}
.legend-dot{width:10px;height:10px;border-radius:3px;flex:0 0 auto;}
.legend-name{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.legend-val{font-weight:600;}
.legend-pct{color:#94A3B8;font-size:12px;width:38px;text-align:right;}

.methodology-card{background:var(--card-bg);border-radius:14px;padding:18px;box-shadow:var(--shadow-natural);border:1px solid var(--border-color);display:flex;flex-direction:column;gap:12px;}
.methodology-title{font-size:15px;font-weight:600;color:var(--accent-blue);display:flex;align-items:center;gap:8px;}
.methodology-title .ic{font-size:18px;}
.methodology-text{font-size:13.5px;line-height:1.5;color:var(--text-main);}
.methodology-text b{font-weight:600;}
.split-row{display:flex;gap:8px;margin-top:2px;}
.split-col{flex:1;text-align:center;background:#F8FAFC;border-radius:10px;padding:8px 4px;}
.split-col .p{font-size:16px;font-weight:700;}
.split-col .l{font-size:10px;color:var(--text-muted);margin-top:1px;}
.methodology-progress{background:#F1F5F9;height:7px;border-radius:4px;overflow:hidden;margin-top:2px;}
.progress-bar{height:100%;width:0;border-radius:4px;transition:width .5s ease-out;background:var(--accent-blue);}
.progress-bar.good{background:var(--green);}
.progress-bar.warn{background:var(--accent-warning);}
.bars{display:flex;align-items:flex-end;gap:8px;height:110px;padding-top:6px;}
.bar-col{flex:1;display:flex;flex-direction:column;align-items:center;gap:6px;height:100%;justify-content:flex-end;}
.bar{width:70%;max-width:32px;background:var(--accent-blue);border-radius:6px 6px 0 0;min-height:3px;}
.bar-lbl{font-size:10px;color:#94A3B8;}
.bar-val{font-size:10px;color:var(--text-muted);font-weight:600;}

.field{margin-bottom:10px;}
.field label{display:block;font-size:12px;color:var(--text-muted);margin-bottom:4px;}
.field input,.field select{width:100%;font-size:15px;font-family:inherit;color:var(--text-main);background:#F8FAFC;border:1px solid var(--border-line);border-radius:10px;padding:11px 12px;outline:none;}
.field input:focus,.field select:focus{border-color:var(--accent-blue);background:#fff;}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:10px;}
.amount-big input{font-size:24px;font-weight:600;text-align:center;}
.btn{border:none;border-radius:11px;font-size:15px;font-weight:550;font-family:inherit;padding:13px 16px;cursor:pointer;width:100%;transition:transform .1s;}
.btn:active{transform:scale(0.98);}
.btn-primary{background:var(--accent-blue);color:#fff;}
.btn-ghost{background:#EEF2F6;color:var(--text-main);}
.btn-danger{background:var(--bg-warning);color:var(--accent-warning);}
.btn-row{display:flex;gap:10px;margin-top:4px;}
.card{background:var(--card-bg);border-radius:14px;padding:18px;box-shadow:var(--shadow-natural);border:1px solid var(--border-color);}
.card h2{font-size:15px;margin-bottom:12px;}
.muted{color:var(--text-muted);font-size:13px;}

.bottom-nav{background:var(--card-bg);display:flex;justify-content:space-around;padding:10px 16px calc(20px + var(--safe-b));box-shadow:0 -1px 3px rgba(0,0,0,0.03);border-top:1px solid var(--border-color);z-index:10;}
.nav-item{display:flex;flex-direction:column;align-items:center;gap:5px;color:var(--text-muted);cursor:pointer;transition:color .2s;width:70px;}
.nav-item.active{color:var(--accent-blue);}
.nav-item svg{width:24px;height:24px;fill:currentColor;}
.nav-item span{font-size:11px;font-weight:500;}

.sheet{position:fixed;inset:0;z-index:100;display:flex;align-items:flex-end;justify-content:center;}
.sheet.hidden{display:none;}
.sheet-backdrop{position:absolute;inset:0;background:rgba(15,23,42,0.4);animation:fadeIn .2s;}
.sheet-card{position:relative;width:100%;max-width:430px;background:var(--bg-color);border-radius:20px 20px 0 0;padding:14px 20px calc(20px + var(--safe-b));max-height:88vh;overflow-y:auto;animation:slideUp .25s ease;}
@keyframes slideUp{from{transform:translateY(100%);}to{transform:none;}}
.sheet-handle{width:40px;height:4px;border-radius:2px;background:#CBD5E1;margin:2px auto 12px;}
.sheet-card h3{font-size:16px;margin-bottom:14px;text-align:center;}
.toast{position:fixed;left:50%;bottom:calc(96px + var(--safe-b));transform:translateX(-50%) translateY(20px);background:var(--text-main);color:#fff;font-size:14px;padding:11px 18px;border-radius:24px;opacity:0;pointer-events:none;transition:all .25s;z-index:200;}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0);}
.hidden{display:none!important;}


.day-header{display:flex;justify-content:space-between;align-items:center;padding:8px 4px 6px;font-size:12px;color:var(--text-muted);text-transform:uppercase;letter-spacing:0.5px;font-weight:600;}
.day-header .day-label{font-weight:600;}
.day-header .day-total{font-weight:500;color:var(--text-main);}

.op-row{display:flex;align-items:center;gap:10px;padding:12px 14px 12px 0;background:var(--card-bg);border:1px solid var(--border-color);border-radius:12px;margin-bottom:6px;box-shadow:var(--shadow-natural);position:relative;overflow:hidden;cursor:pointer;transition:transform .1s,background .15s;}
.op-row:active{transform:scale(0.995);}
.op-row.trash-active{background:var(--bg-warning);}
.op-row.trash-active .op-line1,.op-row.trash-active .op-line2,.op-row.trash-active .op-amount{opacity:0.4;text-decoration:line-through;}

/* Аккордеоны на главном экране */
.recent-accordion .accordion-header{padding:14px 16px;}
.recent-accordion .accordion-header-left{gap:12px;}
.recent-accordion .accordion-header-left .icon{width:38px;height:38px;font-size:17px;}
.recent-accordion .accordion-header-right{display:flex;align-items:center;gap:10px;}
.recent-accordion .category-name{font-size:15px;font-weight:600;}
.recent-accordion .category-sum{font-size:16px;font-weight:700;letter-spacing:-0.3px;}
.category-sub{font-size:11.5px;color:var(--text-muted);margin-top:2px;font-weight:500;}
.accordion-empty{padding:14px 16px 14px 70px;font-size:13px;color:#94A3B8;font-style:italic;}
.accordion-more{display:flex;align-items:center;justify-content:center;padding:13px 16px;font-size:13px;color:var(--accent-blue);font-weight:600;cursor:pointer;border-top:1px solid var(--border-color);background:#FAFBFC;transition:background .15s;}
.accordion-more:active{background:#EEF2F6;}
.recent-accordion .accordion-content .op-row{border-radius:0;margin-bottom:0;box-shadow:none;border-left:none;border-right:none;border-top:1px solid rgba(0,0,0,0.02);border-bottom:1px solid rgba(0,0,0,0.02);}
.recent-accordion .accordion-content .op-row:first-child{border-top:none;}
.recent-accordion .accordion-content .op-row:last-child{border-bottom:none;}
.hint{font-size:11px;color:var(--text-muted);font-weight:500;text-transform:none;letter-spacing:0;margin-left:6px;opacity:0.85;}

/* Периоды дашборда — 5 кнопок */
.period{flex-wrap:wrap;}
.period button{flex:1 1 0;min-width:0;font-size:12px;padding:8px 4px;}
.op-stripe{width:4px;align-self:stretch;flex-shrink:0;border-radius:2px;}
.op-main{flex:1;min-width:0;padding-left:12px;}
.op-line1{font-size:14px;font-weight:500;color:var(--text-main);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.op-line2{font-size:11.5px;color:var(--text-muted);margin-top:3px;display:flex;align-items:center;gap:4px;flex-wrap:wrap;}
.op-type-badge{font-size:10px;font-weight:600;padding:2px 6px;border-radius:6px;display:inline-block;line-height:1.3;}
.op-right{display:flex;flex-direction:column;align-items:flex-end;gap:6px;flex-shrink:0;}
.op-amount-row{display:flex;align-items:center;gap:6px;}
.op-amount{font-size:15px;font-weight:700;letter-spacing:-0.3px;}
.sync-ic{font-size:13px;line-height:1;display:inline-block;}
.sync-ok{opacity:0.85;}
.sync-err{filter:hue-rotate(0deg);animation:syncBlink 1.5s ease infinite;}
.sync-pending{animation:syncSpin 1.2s linear infinite;display:inline-block;}
.sync-no{opacity:0.4;}
@keyframes syncBlink{0%,100%{opacity:1;}50%{opacity:0.4;}}
@keyframes syncSpin{0%{transform:rotate(0deg);}100%{transform:rotate(360deg);}}