: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,textarea{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:22px;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;flex-wrap:wrap}
.quick-add-input{width:280px}
.period-switch,.segmented{display:flex;background:#171c21;border:1px solid var(--line);border-radius:8px;padding:3px;gap:2px;flex-wrap:wrap}
.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,textarea{background:#171d22;border:1px solid var(--line);border-radius:7px;color:var(--text);padding:9px 12px;outline:none;font-size:14px;font-family:inherit;resize:vertical}
input:focus,select:focus,textarea:focus{border-color:#8aaa58}
.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.empty{background:#252f27;color:#c2cbb8}
.balance-hero.empty .eyebrow{color:#86957d}
.balance-hero.empty .live-pill{border-color:#ffffff22;color:#c2cbb8}
.balance-hero.empty .live-pill i{background:#86957d}
.balance-hero.empty .hero-bottom{color:#86957d}
.balance-hero.empty .hero-orbit{border-color:#ffffff0c}
.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:26px;letter-spacing:-1px;margin-left:4px}
.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)}

/* ---------- Метрики ---------- */
.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;font-weight:800}
.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}
.category-surface{min-height:180px}
.arrow-link{border:0;background:none;color:var(--lime);font-size:12px}

/* ---------- Задачи: компактный список ---------- */
.task-list-compact{display:grid;gap:2px;margin-top:14px}
.task-row{display:flex;align-items:flex-start;gap:12px;padding:12px 6px;border-bottom:1px solid #ffffff0a;cursor:pointer;border-radius:6px;transition:background .15s}
.task-row:hover{background:#ffffff05}
.task-row:last-child{border:0}
.task-row.is-done .task-title{text-decoration:line-through;color:#75818a}
.task-check{width:20px;height:20px;border-radius:50%;border:2px solid #4b5760;background:transparent;flex:none;margin-top:2px;position:relative;padding:0}
.task-check.done{background:var(--green);border-color:var(--green)}
.task-check.done::after{content:'✓';position:absolute;inset:0;display:grid;place-items:center;color:#0f1612;font-size:13px;font-weight:800}
.task-body{min-width:0;flex:1}
.task-title{font-size:14px;font-weight:600;display:block;line-height:1.35;word-break:break-word}
.task-meta{display:flex;gap:8px;margin-top:5px;font-size:11px;color:var(--muted);align-items:center;flex-wrap:wrap}
.priority-pill{--pc:#72a9ff;color:var(--pc);border:1px solid color-mix(in srgb,var(--pc) 35%,transparent);padding:2px 7px;border-radius:10px;font:10px var(--mono);letter-spacing:.3px;white-space:nowrap}
.task-cat{background:#2c363d;color:#b7c1c8;padding:2px 7px;border-radius:10px;font-size:11px}
.task-due{font:11px var(--mono);color:#aab4bc}
.task-due.overdue{color:var(--red)}
.task-nomove{font-size:11px}
.task-comment{display:block;margin-top:6px;color:#75818a;font-size:12px;line-height:1.4;word-break:break-word}
.empty-note{padding:20px;text-align:center;color:#75818a;font-size:13px}
.empty-state{padding:52px 20px;text-align:center;color:#75818a}
.empty-state b{display:block;color:#cbd4d9;margin-bottom:6px;font-size:14px}
.empty-state span{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-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);color:#aab4bc}

/* ---------- Секции ---------- */
.section-row{display:flex;justify-content:space-between;align-items:center;margin:5px 0 22px;flex-wrap:wrap;gap:12px}
.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;flex-wrap:wrap}
.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:12px 18px;border-bottom:1px solid #ffffff09;font-size:13px;vertical-align:middle}
.data-table tr:last-child td{border-bottom:0}
.data-table tr.is-done td{color:#75818a}
.task-title-cell b{display:block;font-weight:600;font-size:13px}
.task-title-cell small{display:block;color:#75818a;font-size:11px;margin-top:3px;max-width:380px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.green-text{color:var(--green)!important}
.red-text{color:var(--red)!important}
.blue-text{color:var(--blue)!important}
.muted-text{color:#75818a!important}
.row-actions{display:flex;gap:6px;justify-content:flex-end}
.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)}

/* ---------- Планирование (7 дней) ---------- */
.week-grid{display:grid;grid-template-columns:repeat(7,minmax(200px,1fr));gap:10px;overflow-x:auto;padding-bottom:8px}
.day-col{background:var(--panel);border:1px solid #ffffff0a;border-radius:10px;padding:14px;display:flex;flex-direction:column;min-height:280px}
.day-head{display:flex;justify-content:space-between;align-items:center;padding-bottom:10px;border-bottom:1px solid var(--line);margin-bottom:10px}
.day-head b{font-size:13px;display:block}
.day-head small{font:11px var(--mono);color:var(--muted)}
.day-count{font:11px var(--mono);color:#aab4bc;background:#2c363d;padding:2px 8px;border-radius:10px}
.day-tasks{flex:1}
.day-tasks .task-row{padding:8px 0;gap:8px;border-bottom:1px dashed #ffffff0a}
.day-tasks .task-title{font-size:12px}
.day-tasks .task-meta{font-size:10px;gap:5px}
.day-add{margin-top:10px;height:32px;border:1px dashed #4b5760;background:transparent;color:#aab4bc;border-radius:6px;font-size:12px}
.day-add:hover{border-color:var(--lime);color:var(--lime)}

/* ---------- Аналитика ---------- */
.analytics-summary{display:grid;grid-template-columns:repeat(4,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)}
.check-line{display:flex;flex-direction:row!important;align-items:center;gap:8px;color:#9aa6ae;font-size:12px;align-self:end}
.check-line input{accent-color:var(--lime);width:16px;height:16px;padding:0}
.full{width:100%}
.backup-surface{margin-top:15px;display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap}
.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}

/* ---------- Футер ---------- */
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(600px,100%);background:#1c242b;border:1px solid #3a454d;border-radius:13px;padding:28px;box-shadow:0 24px 90px #000b;max-height:90vh;overflow: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{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)}

/* Drag-and-drop планирование */
#weekGrid .task-row[draggable="true"] { cursor: grab; }
#weekGrid .task-row[draggable="true"]:active { cursor: grabbing; }
#weekGrid .task-row[draggable="false"] { cursor: not-allowed; opacity: .7; }
.task-row.dragging { opacity: .3; transform: scale(.98); }
.day-col.drag-over {
  border-color: var(--lime);
  background: linear-gradient(180deg,#c6f36a10,#c6f36a05);
  box-shadow: 0 0 0 2px #c6f36a44 inset;
}
.day-col.drag-over .day-head { border-bottom-color: var(--lime); }
.day-col.drag-over .day-head b { color: var(--lime); }

/* История изменений в модалке */
.history-block{
  margin-top:18px;
  padding-top:16px;
  border-top:1px solid #2b343d;
}
.history-head{
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  margin-bottom:10px;
}
.history-head b{font-size:13px;color:#d7e0e5}
.history-head span{font:11px var(--mono);color:#75818a}
.history-list{
  max-height:220px;
  overflow-y:auto;
  display:grid;
  gap:6px;
  padding-right:4px;
}
.history-item{
  display:grid;
  grid-template-columns:110px 1fr;
  gap:10px;
  padding:7px 9px;
  background:#171d22;
  border-radius:6px;
  border-left:2px solid #c6f36a55;
  font-size:12px;
}
.history-time{
  font:11px var(--mono);
  color:#75818a;
  white-space:nowrap;
}
.history-text{color:#cbd4d9;line-height:1.4;word-break:break-word}
.history-empty{
  text-align:center;
  color:#75818a;
  font-size:12px;
  padding:14px;
  background:#171d22;
  border-radius:6px;
}
.history-list::-webkit-scrollbar{width:6px}
.history-list::-webkit-scrollbar-thumb{background:#3a454d;border-radius:3px}

/* ---------- Адаптив ---------- */
@media(max-width:1150px){
  .main{padding:26px 26px;margin-left:240px}
  .sidebar{width:240px}
  .topbar{align-items:flex-start;flex-direction:column}
  .hero-grid{grid-template-columns:1fr 1fr}
  .analytics-summary{grid-template-columns:1fr 1fr}
  .week-grid{grid-template-columns:repeat(4,minmax(180px,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,.analytics-grid{grid-template-columns:1fr}
  .week-grid{grid-template-columns:repeat(2,minmax(180px,1fr))}
}
@media(max-width:580px){
  .metrics,.analytics-summary{grid-template-columns:1fr 1fr}
  .quick-add-input{width:100%;order:3}
  .top-actions{gap:7px}
  .button span{display:none}
  .recent-row{grid-template-columns:36px 1fr 90px}
  .op-comment{display:none}
  .backup-surface{align-items:flex-start;flex-direction:column}
  .filter-total{width:100%;text-align:right}
  .hero-value{font-size:44px}
  .main{padding:18px 12px}
  .surface{padding:16px}
  .modal{padding:20px 16px}
  .modal-form{grid-template-columns:1fr}
  .week-grid{grid-template-columns:1fr}
}