:root{--bg:#101317;--side:#15191e;--panel:#191f25;--panel2:#202830;--line:#2b343d;--text:#edf2f4;--muted:#87939d;--lime:#c6f36a;--blue:#72a9ff;--green:#8edb73;--red:#ff777d;--font:'Segoe UI',Arial,sans-serif;--mono:Consolas,monospace}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--text);font:16px var(--font);letter-spacing:-.15px}
button,input,select{font:inherit}button{cursor:pointer}.app{min-height:100vh}

/* ---------- Сайдбар ---------- */
.sidebar{width:260px;position:fixed;inset:0 auto 0 0;background:var(--side);border-right:1px solid #ffffff0b;padding:28px 18px 20px;display:flex;flex-direction:column;z-index:5}
.brand{display:flex;align-items:center;gap:12px;padding:0 10px 34px}
.brand-mark{width:40px;height:40px;border-radius:12px;background:var(--lime);color:#182018;font-size:28px;display:grid;place-items:center;font-weight:800}
.brand b{font-size:18px;letter-spacing:-.7px;display:block}
.brand small{display:block;color:#72808a;font:10px var(--mono);letter-spacing:1.4px;margin-top:2px}
.side-label,.eyebrow,.kicker{font:11px var(--mono);letter-spacing:1.4px;color:#74818c}
.side-label{padding:0 11px 12px}
.nav{display:grid;gap:5px}
.nav-item{height:46px;border:0;background:transparent;color:#9ca8b1;text-align:left;border-radius:8px;padding:0 12px;display:flex;align-items:center;gap:12px;font-size:15px;transition:.18s}
.nav-item span{font-size:20px;width:20px;text-align:center;color:#71808b}
.nav-item:hover{background:#ffffff08;color:white}
.nav-item.active{background:#c6f36a14;color:var(--lime);font-weight:700}
.nav-item.active span{color:var(--lime)}
.side-bottom{margin-top:auto}
.db-indicator{display:flex;align-items:center;gap:10px;padding:14px 10px;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.db-indicator>i{width:9px;height:9px;border-radius:50%;background:#eab308;box-shadow:0 0 0 4px #eab30818;flex:none}
.db-indicator.connected>i{background:var(--lime);box-shadow:0 0 0 4px #c6f36a18}
.db-indicator.needs-permission>i{background:#eab308}
.db-indicator b{font-size:12px;display:block}
.db-indicator small{font-size:11px;color:var(--muted);display:block;margin-top:2px;max-width:170px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.side-connect{margin:14px 0 24px;width:100%;height:42px;border:1px solid #c6f36a55;background:#c6f36a0d;color:var(--lime);border-radius:7px;text-align:left;padding:0 14px;font-size:13px;font-weight:700}
.side-connect span{float:right;font-size:16px}
.side-foot{font:10px/1.8 var(--mono);color:#59656e;padding:0 10px;letter-spacing:.5px}

/* ---------- Основное ---------- */
.main{margin-left:260px;padding:32px 44px 22px;max-width:1700px}
.topbar{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:32px}
.kicker{color:var(--lime);margin-bottom:8px}
.topbar h1{font-size:32px;letter-spacing:-1.2px;margin:0;font-weight:700}
.top-actions{display:flex;align-items:center;gap:10px}
.period-switch,.segmented{display:flex;background:#171c21;border:1px solid var(--line);border-radius:8px;padding:3px;gap:2px}
.period-switch button,.segmented button{border:0;background:none;color:#89959e;padding:8px 13px;border-radius:6px;font-size:13px}
.period-switch button.selected,.segmented button.on{background:#2c363d;color:var(--lime)}
input,select{background:#171d22;border:1px solid var(--line);border-radius:7px;color:var(--text);padding:9px 12px;outline:none;font-size:14px}
input:focus,select:focus{border-color:#8aaa58}
.top-actions input{width:160px}
.button{height:42px;padding:0 16px;border-radius:7px;border:1px solid transparent;font-size:13px;font-weight:800;display:inline-flex;align-items:center;justify-content:center;gap:7px;transition:.2s}
.button:hover{transform:translateY(-1px);filter:brightness(1.08)}
.button-primary{background:var(--lime);color:#192016}
.button-outline{background:#202830;color:#d7e0e5;border-color:#35414a}

.view{display:none;animation:appear .22s ease}
.view.active{display:block}
@keyframes appear{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}}

/* ---------- Hero ---------- */
.hero-grid{display:grid;grid-template-columns:1.5fr 1fr;gap:16px}
.balance-hero{min-height:240px;position:relative;overflow:hidden;background:var(--lime);color:#182018;border-radius:12px;padding:26px 28px;transition:background .25s,color .25s}
.balance-hero.negative{background:#7a2530;color:#f5e8e8}
.balance-hero.negative .eyebrow{color:#cba1a6}
.balance-hero.negative .live-pill{border-color:#ffffff33;color:#f5e8e8}
.balance-hero.negative .live-pill i{background:#ffb0b0}
.balance-hero.negative .hero-bottom{color:#cba1a6}
.balance-hero.negative .hero-period{color:#e8b8bc}
.balance-hero.negative .hero-orbit{border-color:#ffffff14}
.hero-top,.hero-bottom{position:relative;z-index:1;display:flex;justify-content:space-between;align-items:center}
.balance-hero .eyebrow{color:#52643a}
.live-pill{font:10px var(--mono);letter-spacing:1px;border:1px solid #3b4d2638;border-radius:20px;padding:7px 11px}
.live-pill i{display:inline-block;width:6px;height:6px;border-radius:50%;background:#365225;margin-right:6px}
.hero-value{position:relative;z-index:1;font-size:clamp(42px,5vw,66px);font-weight:800;letter-spacing:-4px;margin:28px 0 20px}
.hero-value em{font-style:normal;font-size:30px;letter-spacing:-1px}
.hero-bottom{font-size:12px;color:#52643a}
.hero-period{font:12px var(--mono)}
.hero-orbit{position:absolute;border:1px solid #293e1c25;border-radius:50%;width:290px;height:290px;right:-85px;top:-110px}
.orbit-two{width:215px;height:215px;right:-48px;top:-72px}

.period-net{background:var(--panel);border:1px solid #ffffff0a;border-radius:12px;padding:26px;display:flex;flex-direction:column;justify-content:center}
.period-net .eyebrow{color:#82909b}
.net-value{font-size:38px;font-weight:800;letter-spacing:-1.7px;margin:14px 0 0}
.period-net p{color:var(--muted);font-size:13px;margin:2px 0 22px}
.net-line{height:6px;background:#30383e;border-radius:10px;overflow:hidden;display:flex}
.net-line span:first-child{background:var(--green)}
.net-line span:last-child{background:var(--red)}
.net-legend{display:flex;justify-content:space-between;margin-top:12px;font-size:12px;color:#9aa5ad}
.net-legend span{display:flex;align-items:center;gap:6px}
.net-legend b{color:#e8edf0;font:12px var(--mono);margin-left:3px}
.green-dot,.red-dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--green)}
.red-dot{background:var(--red)}

/* ---------- Метрики ---------- */
.metrics{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:16px 0}
.metric{background:var(--panel);border:1px solid #ffffff09;border-radius:10px;padding:18px 20px}
.metric-label{display:flex;align-items:center;gap:8px;color:#aab4bc;font-size:13px}
.metric-icon{width:26px;height:26px;border-radius:7px;display:grid;place-items:center;font-size:15px}
.metric-icon.green{color:var(--green);background:#8edb7315}
.metric-icon.red{color:var(--red);background:#ff777d15}
.metric-icon.blue{color:var(--blue);background:#72a9ff15}
.metric strong{display:block;font:26px var(--mono);margin:10px 0 3px;letter-spacing:-1px}
.metric small{font-size:12px;color:#697680}

/* ---------- Поверхности ---------- */
.content-grid{display:grid;grid-template-columns:1.45fr 1fr;gap:15px}
.surface{background:var(--panel);border:1px solid #ffffff0a;border-radius:11px;padding:22px;min-width:0}
.surface-head{display:flex;align-items:center;justify-content:space-between;gap:12px}
.surface-head h2,.section-row h2,.backup-surface h2{font-size:19px;letter-spacing:-.5px;margin:6px 0 0}
.chart-key{display:flex;gap:16px;color:#9ca8b1;font-size:12px}
.chart-key i{margin-right:6px}
.chart-surface canvas{display:block;width:100%;height:245px;margin-top:14px}
.category-surface{min-height:325px}
.donut-wrap{position:relative;width:100%;height:207px;margin-top:10px}
.donut-wrap canvas{width:100%;height:207px}
.donut-center{position:absolute;left:42%;top:50%;transform:translate(-50%,-50%);text-align:center;pointer-events:none}
.donut-center b{display:block;font:17px var(--mono)}
.donut-center small{font-size:11px;color:var(--muted)}
.category-legend{display:grid;grid-template-columns:1fr 1fr;gap:8px 14px}
.legend-item{font-size:12px;color:#aab4bc;display:flex;align-items:center;gap:7px;min-width:0}
.legend-item i{width:8px;height:8px;border-radius:2px;flex:none}
.legend-item span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.legend-item b{margin-left:auto;font:11px var(--mono);color:#dce3e7}
.arrow-link{border:0;background:none;color:var(--lime);font-size:12px}

/* ---------- Последние операции ---------- */
.recent-surface{margin-top:15px}
.recent-row{display:grid;grid-template-columns:40px minmax(140px,1fr) 140px 140px;align-items:center;gap:14px;padding:14px 2px;border-bottom:1px solid #ffffff0a}
.recent-row:last-child{border:0}
.op-symbol{width:34px;height:34px;border-radius:9px;display:grid;place-items:center;font-size:16px;background:#8edb7315;color:var(--green)}
.op-symbol.expense{background:#ff777d15;color:var(--red)}
.op-name b{font-size:13px;display:block}
.op-name small{font-size:11px;color:var(--muted)}
.op-comment{font-size:12px;color:#82909b;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.op-amount{text-align:right;font:13px var(--mono)}
.op-amount.income{color:var(--green)}
.op-amount.expense{color:var(--red)}

/* ---------- Секции ---------- */
.section-row{display:flex;justify-content:space-between;align-items:center;margin:5px 0 22px}
.section-row h2{font-size:26px;margin:6px 0}
.section-row p{margin:0;color:var(--muted);font-size:13px}
.filter-row{display:flex;gap:12px;align-items:center;margin-bottom:14px}
.filter-total{margin-left:auto;color:var(--muted);font:12px var(--mono)}

/* ---------- Таблицы ---------- */
.table-surface{padding:0;overflow:hidden}
.data-table{width:100%;border-collapse:collapse}
.data-table th{text-align:left;color:#77848e;font:11px var(--mono);letter-spacing:.7px;padding:15px 18px;border-bottom:1px solid var(--line)}
.data-table td{padding:14px 18px;border-bottom:1px solid #ffffff09;font-size:13px}
.data-table tr:last-child td{border-bottom:0}
.data-table .money{font:13px var(--mono)}
.green-text{color:var(--green)!important}
.red-text{color:var(--red)!important}
.row-actions{display:flex;gap:6px}
.row-actions button{border:1px solid var(--line);background:#242c33;color:#b7c1c8;border-radius:5px;width:30px;height:29px;font-size:13px}
.row-actions button:hover{color:var(--lime)}

/* ---------- Аналитика ---------- */
.analytics-summary{display:grid;grid-template-columns:repeat(3,1fr);gap:13px;margin-bottom:15px}
.analytics-summary>div{background:#171d22;border:1px solid var(--line);border-radius:9px;padding:16px}
.analytics-summary small{display:block;color:var(--muted);font-size:12px}
.analytics-summary b{display:block;font:22px var(--mono);margin-top:8px}
.analytics-grid{grid-template-columns:1fr 1fr}
.bar-list{display:grid;gap:17px;margin-top:24px}
.bar-row-head{display:flex;justify-content:space-between;font-size:12px;margin-bottom:8px}
.bar-row-head span:last-child{font:12px var(--mono);color:#b6c0c7}
.bar-track{height:7px;background:#303941;border-radius:8px;overflow:hidden}
.bar-fill{height:100%;border-radius:8px;background:var(--lime)}

/* ---------- Импорт ---------- */
.import-grid{display:grid;grid-template-columns:1fr 1.15fr;gap:15px}
.import-grid h2{font-size:19px;margin:9px 0}
.import-grid p{line-height:1.7}
.template-list{display:grid;gap:8px;margin-top:18px}
.template-list button{display:flex;justify-content:space-between;background:#202830;border:1px solid var(--line);color:#e0e7eb;border-radius:7px;padding:12px 14px;font-size:13px}
.template-list button span{color:var(--lime);font:12px var(--mono)}
.upload-box{border:1px dashed #53616b;border-radius:9px;padding:22px 14px;text-align:center;display:flex;align-items:center;flex-direction:column;gap:7px;margin:16px 0 12px}
.upload-symbol{font-size:28px;color:var(--lime)}
.upload-box b{font-size:13px}
.upload-box small{color:var(--muted);font-size:12px}
.upload-box input,.backup-actions input{position:absolute;inset:0;opacity:0;width:100%;cursor:pointer}
.upload-box .button,.backup-actions label{position:relative;overflow:hidden}
.check{display:flex;align-items:center;gap:8px;color:var(--muted);font-size:12px;margin:10px 0}
.check input{accent-color:var(--lime)}
.full{width:100%}
.backup-surface{margin-top:15px;display:flex;justify-content:space-between;align-items:center;gap:20px}
.backup-surface p{font-size:12px}
.backup-actions{display:flex;gap:9px;flex-wrap:wrap}
.muted{color:var(--muted)}
.import-result{margin-top:15px}
.hidden{display:none!important}
.preview-table{overflow:auto;margin-top:13px}
.preview-table tr.bad{background:#ff777d12}
.preview-table tr.warn{background:#eab30812}
.status-good{color:var(--green)}
.status-bad{color:var(--red)}
.status-warn{color:#e8c45a}
.empty-note,.empty-state{padding:26px;text-align:center;color:#75818a;font-size:13px}
.empty-state{padding:52px 20px}
.empty-state b{display:block;color:#cbd4d9;margin-bottom:6px;font-size:14px}
.empty-state span{font-size:12px}

/* ---------- Футер ---------- */
footer{display:flex;justify-content:space-between;margin-top:28px;padding:15px 2px;border-top:1px solid #ffffff0a;color:#5d6972;font:11px var(--mono);letter-spacing:.6px}
footer i{color:var(--lime);font-style:normal}
#footerDb{color:#75818a}

/* ---------- Модалка ---------- */
.modal-layer{position:fixed;inset:0;background:#06090dcc;z-index:20;display:grid;place-items:center;padding:20px}
.modal{position:relative;width:min(560px,100%);background:#1c242b;border:1px solid #3a454d;border-radius:13px;padding:28px;box-shadow:0 24px 90px #000b;max-height:90vh;overflow-y:auto}
.modal-x{position:absolute;right:16px;top:12px;background:none;border:0;color:#9aa6ae;font-size:26px}
.modal h2{margin:0 0 8px;font-size:22px}
.modal p,.modal li{color:#9aa6ae;font-size:13px;line-height:1.7}
.modal-form{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:16px}
.modal-form label{display:grid;gap:6px;color:#9aa6ae;font-size:12px}
.modal-form .wide{grid-column:1/-1}
.modal-form .button{grid-column:1/-1;margin-top:4px}

/* ---------- Toast ---------- */
.toast-stack{position:fixed;right:20px;bottom:20px;z-index:30;display:grid;gap:8px}
.toast{background:#263139;border:1px solid #48565f;border-radius:8px;padding:13px 17px;font-size:13px;box-shadow:0 10px 30px #0008;max-width:360px}
.toast.error{border-color:var(--red)}
.toast.success{border-color:var(--lime)}

/* ---------- Адаптив ---------- */
@media(max-width:1150px){
  .main{padding:26px 26px;margin-left:240px}
  .sidebar{width:240px}
  .topbar{align-items:flex-start;flex-direction:column}
  .top-actions{width:100%;flex-wrap:wrap}
  .hero-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:850px){
  .sidebar{width:70px;padding:18px 8px}
  .brand{padding:0 5px 35px}
  .brand>div:last-child,.side-label{display:none}
  .nav-item{font-size:0;justify-content:center;padding:0}
  .nav-item span{font-size:22px}
  .db-indicator{justify-content:center;padding:12px 0}
  .db-indicator>div,.side-connect,.side-foot{display:none}
  .main{margin-left:70px;padding:22px 16px}
  .hero-grid,.content-grid,.import-grid{grid-template-columns:1fr}
  .hero-grid{gap:10px}
  .period-net{min-height:190px}
}
@media(max-width:580px){
  .metrics,.analytics-summary{grid-template-columns:1fr}
  .top-actions{gap:7px}
  .period-switch{order:2}
  .top-actions input{width:140px}
  .button span{display:none}
  .recent-row{grid-template-columns:36px 1fr 100px}
  .op-comment{display:none}
  .backup-surface{align-items:flex-start;flex-direction:column}
  .filter-row{flex-wrap:wrap}
  .filter-total{width:100%;text-align:right}
  .section-row{align-items:flex-start;gap:12px}
  .hero-value{font-size:44px}
  .main{padding:18px 12px}
  .surface{padding:16px}
  .modal{padding:20px 16px}
  .modal-form{grid-template-columns:1fr}
}