:root{font-family:Inter,system-ui,-apple-system,"Segoe UI",sans-serif;color:#28313c;background:#f5f7f9;font-size:16px}*{box-sizing:border-box}body{margin:0}.topbar{height:57px;background:#fff;border-bottom:1px solid #e3e7eb;display:flex;align-items:center;gap:27px;padding:0 28px;position:sticky;top:0;z-index:5}.brand{font-weight:750;color:#1e72d4;text-decoration:none;font-size:1.1rem;display:flex;align-items:center;gap:7px}.brand-mark{background:#2674d8;color:#fff;width:22px;height:22px;border-radius:5px;display:grid;place-items:center;font-weight:900}.topbar nav{display:flex;gap:22px;height:100%;align-items:center;white-space:nowrap}.topbar nav a{font-size:.9rem;text-decoration:none;color:#5a6673;height:100%;display:flex;align-items:center;border-bottom:2px solid transparent}.topbar nav a.active{color:#2374d8;border-color:#2374d8;font-weight:650}.mode{margin-left:auto;color:#64717c;font-size:.82rem;white-space:nowrap}.mode i{display:inline-block;width:8px;height:8px;background:#2aae66;border-radius:50%}main{max-width:1280px;margin:auto;padding:25px 34px 44px}.balance-strip{background:#fff;border:1px solid #e3e8ed;border-radius:6px;padding:18px 22px;min-height:112px;position:relative;display:flex;align-items:center;justify-content:space-between;box-shadow:0 1px 2px #2430400a}.minor{margin:0;color:#78838f;font-size:.76rem;text-transform:uppercase;letter-spacing:.05em}.balance-strip h1{margin:4px 0 5px;font-size:2rem;letter-spacing:-.04em;color:#27313a}.plain-button{border:0;background:transparent;padding:0;color:#2674d8;font-size:.86rem;cursor:pointer}.attention{display:flex;gap:8px;align-self:flex-start}.attention button{border:1px solid #f0d5bb;background:#fff7ef;color:#a55a1d;border-radius:4px;padding:7px 9px;text-transform:uppercase;font-size:.7rem;font-weight:700}.account-popover{position:absolute;top:92px;left:20px;background:#fff;z-index:3;width:min(520px,90vw);padding:14px;border:1px solid #dce2e8;border-radius:5px;box-shadow:0 8px 22px #25314326}.account-row{display:flex;justify-content:space-between;padding:7px 3px;border-bottom:1px solid #eef1f4;font-size:.9rem}.account-row:last-child{border:0}.positive{color:#198c53}.negative{color:#d0524e}.toolbar{display:flex;align-items:center;justify-content:space-between;padding:22px 0 13px;gap:15px}.period{display:flex;align-items:center;gap:11px;text-transform:uppercase;font-size:.84rem;letter-spacing:.04em}.period button{border:0;background:transparent;font-size:1.6rem;color:#607080;line-height:1;cursor:pointer}.actions{display:flex;gap:8px;flex-wrap:wrap}.actions button{font-weight:700;text-transform:uppercase;letter-spacing:.03em;font-size:.72rem;border-radius:4px;padding:9px 13px;cursor:pointer}.action{color:#fff;border:1px solid}.expense{background:#e3655d;border-color:#dc584f}.income{background:#319a62;border-color:#278552}.transfer{background:#9fa9b4;border-color:#929da8}.light{color:#667482;background:#fff;border:1px solid #d9e0e6}.actions button:disabled,.segmented button:disabled{opacity:.52;cursor:not-allowed}.summary-row{display:flex;align-items:center;gap:25px;background:#eef3f7;border:1px solid #e1e8ed;border-radius:5px;padding:12px 15px;color:#62707d;font-size:.86rem}.summary-row strong{margin-left:6px;color:#26313c}.summary-row span:first-child strong{color:#198c53}.summary-row span:nth-child(2) strong{color:#d0524e}.summary-row small{margin-left:auto;color:#79848e}.filter-panel{background:#fff;border:1px solid #e0e6eb;border-radius:5px;margin-top:18px;padding:13px;display:flex;gap:12px;align-items:center;flex-wrap:wrap}.filter-panel input{height:36px;min-width:260px;flex:1;border:1px solid #ccd5de;border-radius:4px;padding:0 11px;font-size:.9rem}.segmented{display:flex;border:1px solid #d3dbe2;border-radius:4px;overflow:hidden}.segmented button{border:0;border-right:1px solid #d3dbe2;background:#fff;padding:9px 11px;text-transform:uppercase;font-size:.68rem;color:#63717e;cursor:pointer}.segmented button:last-child{border-right:0}.segmented button.selected{background:#edf5ff;color:#2374d8;font-weight:800}.flow{margin-top:18px;border:1px solid #dde4ea;background:#fff;border-radius:5px;overflow:hidden}.flow-head{padding:15px 18px 11px;display:flex;justify-content:space-between;align-items:center}.flow-head h2,.side-card h2{font-size:1.05rem;margin:0;color:#27313c}.flow-head span{font-size:.8rem;color:#7b8792}.legend,.transaction{display:grid;grid-template-columns:110px 130px minmax(260px,1.8fr) minmax(150px,1fr) 95px;gap:14px;align-items:center}.legend{padding:9px 18px;background:#f6f8fa;border-top:1px solid #e6ebef;border-bottom:1px solid #e3e8ed;color:#78848e;text-transform:uppercase;font-size:.66rem;font-weight:700}.transaction{padding:12px 18px;border-bottom:1px solid #edf0f2;font-size:.86rem}.transaction:last-child{border:0}.transaction:hover{background:#fafcff}.date-cell{color:#687581;font-variant-numeric:tabular-nums}.value{font-weight:700;font-variant-numeric:tabular-nums}.details strong{display:block;font-weight:650;color:#2e3944}.details small,.transaction small{display:block;color:#7a8793;margin-top:2px}.project-tag{display:inline-block;margin-top:4px;padding:2px 6px;background:#eef3f7;color:#64717d;border-radius:3px;font-size:.72rem}.status{font-size:.66rem;font-weight:750;text-transform:uppercase;color:#697784}.status.planned{color:#b47a19}.bottom-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:20px}.side-card{background:#fff;border:1px solid #dfe6eb;border-radius:5px;padding:17px}.project-row,.order-row{display:grid;grid-template-columns:1fr auto;gap:12px;padding:12px 0;border-bottom:1px solid #edf0f2;font-size:.86rem}.project-row:last-child,.order-row:last-child{border:0}.project-row span,.order-row span{color:#78848f;font-size:.78rem}.order-row{grid-template-columns:48px 1fr auto}.safety-note{color:#7b8792;font-size:.78rem;text-align:center;margin:28px 0 0}@media(max-width:800px){.topbar{padding:0 14px;gap:16px}.topbar nav{overflow:auto;gap:15px}.topbar nav a:nth-child(n+5),.mode{display:none}main{padding:16px}.balance-strip{min-height:120px}.attention{display:none}.toolbar{align-items:flex-start;flex-direction:column}.summary-row{flex-wrap:wrap;gap:12px}.summary-row small{width:100%;margin:0}.legend{display:none}.transaction{grid-template-columns:86px 100px 1fr}.transaction .contractor,.transaction .account-cell{display:none}.bottom-grid{grid-template-columns:1fr}.filter-panel input{min-width:100%}}

/* Диалог прихода/расхода */
article.transaction { cursor: pointer; }
article.transaction:hover { background: #f4f7fd; }
dialog#opDialog { border: none; border-radius: 16px; padding: 24px; width: min(460px, 92vw); box-shadow: 0 24px 64px rgba(23, 32, 56, .25); }
dialog#opDialog::backdrop { background: rgba(23, 32, 56, .45); }
#opDialog h2 { margin: 0 0 12px; font-size: 18px; }
#opForm { display: grid; gap: 12px; }
#opForm label { display: grid; gap: 4px; font-size: 12px; font-weight: 600; color: #55607a; }
#opForm input, #opForm select { font: inherit; font-weight: 400; color: #172038; border: 1px solid #d5dcea; border-radius: 8px; padding: 8px 10px; background: #fff; width: 100%; box-sizing: border-box; }
#opForm input:focus, #opForm select:focus { outline: 2px solid #2773df33; border-color: #2773df; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.form-actions { display: flex; align-items: center; gap: 8px; margin-top: 4px; }
.form-spacer { flex: 1; }
.form-error { margin: 0; color: #c02626; font-size: 13px; }
#opDialog button.danger { background: #fceaea; color: #c02626; border: none; border-radius: 8px; padding: 8px 14px; font: inherit; font-weight: 600; cursor: pointer; }
#opDialog button.danger:hover { background: #f8d7d7; }

/* Вкладки */
.view-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin: 8px 0 12px; }
.view-head h2 { margin: 0; }
.view-note { color: #7a839c; font-size: 13px; }
.settings-hub { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 14px; margin: 16px 0; }
.setting-card { position: relative; min-height: 116px; text-align: left; background: #fff; border: 1px solid #e3e8ed; border-radius: 10px; padding: 19px 56px 18px 18px; cursor: pointer; font: inherit; box-shadow: 0 1px 2px #2430400a; }
.setting-card:hover { border-color: #b8d5f4; box-shadow: 0 6px 18px #24304016; }
.setting-name { display: block; color: #27313c; font-size: 16px; font-weight: 750; }
.setting-note { display: block; margin-top: 9px; color: #7a839c; font-size: 13px; line-height: 1.35; }
.setting-card .arrow { position: absolute; top: 17px; right: 16px; width: 30px; height: 30px; display: grid; place-items: center; border-radius: 50%; background: #eef3f7; color: #27313c; }
.setting-card:hover .arrow { background: #2773df; color: #fff; }
.section-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; }
.section-heading .card-section { margin-top: 0; }
.settings-category-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.settings-category-grid h4 { margin: 5px 0 7px; font-size: 13px; text-transform: uppercase; letter-spacing: .04em; color: #55607a; }
.compact-list { border: 1px solid #e6eaf4; border-radius: 8px; overflow: auto; max-height: 300px; }
.compact-row { width: 100%; display: flex; justify-content: space-between; gap: 12px; padding: 9px 11px; border: 0; border-bottom: 1px solid #f0f3fa; background: #fff; color: #28313c; text-align: left; font: inherit; cursor: pointer; }
.compact-row:last-child { border-bottom: 0; }
.compact-row:hover { background: #f4f7fd; }.compact-row small { color: #7a839c; }
.minor-line { color: #7a839c; font-size: 13px; margin: 0 0 14px; }
.table-wrap { background: #fff; border: 1px solid #e6eaf4; border-radius: 14px; overflow: auto; }
.data-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.data-table th { text-align: left; font-size: 12px; letter-spacing: .04em; text-transform: uppercase; color: #7a839c; padding: 12px 16px; border-bottom: 1px solid #e6eaf4; white-space: nowrap; }
.data-table td { padding: 11px 16px; border-bottom: 1px solid #f0f3fa; vertical-align: middle; }
.data-table tr:last-child td { border-bottom: none; }
.data-table .num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.row-list { background: #fff; border: 1px solid #e6eaf4; border-radius: 14px; padding: 4px 0; max-height: 70vh; overflow: auto; }
.row-line { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 9px 16px; border-bottom: 1px solid #f0f3fa; }
.row-line:last-child { border-bottom: none; }
.chip { display: inline-block; padding: 3px 10px; border-radius: 999px; background: #eef1f8; color: #55607a; font-size: 12px; font-weight: 600; white-space: nowrap; }
.chip.positive { background: #e7f5ea; color: #1e7c3a; }
.chip.negative { background: #fceaea; color: #c02626; }
#view-contractors input[type="search"] { border: 1px solid #d5dcea; border-radius: 8px; padding: 7px 10px; font: inherit; width: min(280px, 60vw); }

/* ОПиУ */
.period-fields { display: flex; gap: 10px; align-items: center; }
.period-fields label { display: flex; gap: 6px; align-items: center; font-size: 13px; color: #55607a; }
.period-fields input[type="month"] { border: 1px solid #d5dcea; border-radius: 8px; padding: 6px 8px; font: inherit; }
.pnl-table td:first-child, .pnl-table th:first-child { position: sticky; left: 0; background: #fff; min-width: 220px; }
.pnl-table tr.section-row td { background: #f4f7fd; font-weight: 700; font-size: 13px; letter-spacing: .03em; text-transform: uppercase; color: #55607a; padding: 8px 16px; }
.pnl-table tr.totals-row td { background: #fafbfe; border-top: 2px solid #e6eaf4; }
.pnl-table .muted { color: #c3cadb; }

/* Справочники */
.view-tools { display: flex; gap: 10px; align-items: center; }
.select-line { display: flex; gap: 6px; align-items: center; }
.select-line select { flex: 1; }
.mini-add { width: 34px; height: 38px; border: 1px solid #d5dcea; border-radius: 8px; background: #fff; color: #2773df; font-size: 18px; font-weight: 700; cursor: pointer; }
.mini-add:hover { background: #eef4ff; }
.row-line[data-id] { cursor: pointer; }
.row-line[data-id]:hover { background: #f4f7fd; }
.data-table tbody tr[data-id] { cursor: pointer; }
.data-table tbody tr[data-id]:hover { background: #f4f7fd; }

/* Диалог справочника — те же правила, что для формы операций */
dialog#dictDialog { border: none; border-radius: 16px; padding: 24px; width: min(460px, 92vw); box-shadow: 0 24px 64px rgba(23, 32, 56, .25); }
dialog#dictDialog::backdrop { background: rgba(23, 32, 56, .45); }
#dictDialog h2 { margin: 0 0 12px; font-size: 18px; }
#dictForm { display: grid; gap: 12px; }
#dictForm label { display: grid; gap: 4px; font-size: 12px; font-weight: 600; color: #55607a; }
#dictForm input, #dictForm select { font: inherit; font-weight: 400; color: #172038; border: 1px solid #d5dcea; border-radius: 8px; padding: 8px 10px; background: #fff; width: 100%; box-sizing: border-box; }
#dictForm input:focus, #dictForm select:focus { outline: 2px solid #2773df33; border-color: #2773df; }
#dictDialog button.danger { background: #fceaea; color: #c02626; border: none; border-radius: 8px; padding: 8px 14px; font: inherit; font-weight: 600; cursor: pointer; }
#dictDialog button.danger:hover { background: #f8d7d7; }

/* Переводы */
.value.neutral { color: #55607a; }

/* Принять плановую */
#opDialog button.accept { background: #e7f5ea; color: #1e7c3a; border: none; border-radius: 8px; padding: 8px 14px; font: inherit; font-weight: 600; cursor: pointer; }
#opDialog button.accept:hover { background: #d9eedd; }

/* Переключатель периода */
.period-label { background: none; border: none; cursor: pointer; padding: 0 6px; }
.period-label:hover strong { color: #2773df; }

.flow-tools { display: flex; gap: 12px; align-items: center; }

/* Заказы и реквизиты */
#dictForm textarea { font: inherit; font-weight: 400; color: #172038; border: 1px solid #d5dcea; border-radius: 8px; padding: 8px 10px; background: #fff; width: 100%; box-sizing: border-box; resize: vertical; }
#dictForm textarea:focus { outline: 2px solid #2773df33; border-color: #2773df; }
.data-table tbody tr[data-id] td .chip { pointer-events: none; }

/* Карточка контрагента */
.card-grid { display: grid; grid-template-columns: minmax(280px, 420px) 1fr; gap: 16px; align-items: start; }
.card-line { display: flex; justify-content: space-between; gap: 12px; padding: 6px 0; border-bottom: 1px solid #f0f3fa; }
.card-line:last-child { border-bottom: none; }
.card-line span:first-child { color: #55607a; }
.card-section { margin: 18px 0 8px; }
.row-actions { display: flex; gap: 8px; align-items: center; }
.row-actions button.accept { background: #e7f5ea; color: #1e7c3a; border: none; border-radius: 8px; padding: 5px 10px; font: inherit; font-size: 12px; font-weight: 600; cursor: pointer; }
.row-actions button.accept:hover { background: #d9eedd; }
.check-line { flex-direction: row !important; align-items: center; gap: 6px !important; font-weight: 400 !important; }
@media (max-width: 900px) { .card-grid { grid-template-columns: 1fr; } }
@media (max-width: 700px) { .settings-category-grid { grid-template-columns: 1fr; } .section-heading { flex-direction: column; } }
[hidden] { display: none !important; }
.status.overdue { color: #c02626; }
.account-cell { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.transaction-accept { border: 0; border-radius: 6px; padding: 6px 9px; background: #e7f5ea; color: #1e7c3a; font: inherit; font-size: 12px; font-weight: 700; cursor: pointer; }
.transaction-accept:hover { background: #d9eedd; }
.transaction-accept:disabled { opacity: .55; cursor: wait; }
.details .transaction-accept { margin-top: 8px; }
.plan-hint { margin: -4px 18px 10px; color: #6f7d89; font-size: .8rem; }

/* Диалог заказа */
dialog#orderDialog { border: none; border-radius: 16px; padding: 24px; width: min(460px, 92vw); box-shadow: 0 24px 64px rgba(23, 32, 56, .25); }
dialog#orderDialog::backdrop { background: rgba(23, 32, 56, .45); }
#orderDialog h2 { margin: 0 0 12px; font-size: 18px; }
#orderForm { display: grid; gap: 12px; }
#orderForm label { display: grid; gap: 4px; font-size: 12px; font-weight: 600; color: #55607a; }
#orderForm input, #orderForm select { font: inherit; font-weight: 400; color: #172038; border: 1px solid #d5dcea; border-radius: 8px; padding: 8px 10px; background: #fff; width: 100%; box-sizing: border-box; }
#orderForm input:focus, #orderForm select:focus { outline: 2px solid #2773df33; border-color: #2773df; }
#orderPositions { color: #55607a; }

/* Чат контрагента и вкладки карточки */
.chat-card { display: flex; flex-direction: column; min-height: 420px; }
.chat-list { flex: 1; max-height: 560px; overflow-y: auto; display: flex; flex-direction: column; gap: 12px; padding-right: 4px; }
.chat-msg { background: #f4f7fd; border-radius: 12px; padding: 10px 12px; }
.chat-author { font-weight: 700; font-size: 13px; }
.chat-author small { font-weight: 400; color: #7a839c; margin-left: 6px; }
.chat-text { margin-top: 4px; white-space: pre-line; }
.chat-files { margin-top: 6px; color: #2773df; font-size: 13px; }
.chat-form { display: flex; gap: 8px; margin-top: 12px; }
.chat-form input { flex: 1; font: inherit; border: 1px solid #d5dcea; border-radius: 8px; padding: 8px 10px; }
.chat-send { background: #2773df; color: #fff; border: none; border-radius: 8px; width: 40px; cursor: pointer; font-size: 16px; }
.card-tabs { margin: 16px 0 12px; }
#ctab-money h3.card-section:first-child { margin-top: 0; }

/* Фильтр */
#filterPanel[hidden] { display: none; }
.filter-row { display: flex; gap: 8px; flex-wrap: wrap; width: 100%; }
.filter-row input, .filter-row select { height: 36px; box-sizing: border-box; border: 1px solid #ccd5de; border-radius: 4px; padding: 0 8px; font: inherit; font-size: .9rem; background: #fff; color: #2e3944; flex: 1; min-width: 170px; }
#filterToggle.selected { background: #edf5ff; color: #2374d8; border-color: #9ec5f0; font-weight: 700; }

/* Хаб отчётов как в Финологе */
.hub-title { margin: 4px 0 16px; }
.reports-hub { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 18px; }
.report-card { position: relative; text-align: left; background: #fff; border: 1px solid #e3e8ed; border-radius: 8px; padding: 22px 20px 26px; min-height: 110px; cursor: pointer; font: inherit; box-shadow: 0 1px 2px #2430400a; transition: box-shadow .15s; }
.report-card:hover { box-shadow: 0 6px 18px #2430401f; }
.report-card .rc-name { display: block; font-weight: 750; font-size: 1.02rem; color: #27313c; padding-right: 40px; }
.report-card .sub { display: block; margin-top: 3px; color: #98a3ad; font-size: .95rem; }
.report-card .arrow { position: absolute; top: 20px; right: 18px; width: 34px; height: 34px; border-radius: 50%; background: #eef3f7; color: #27313c; display: grid; place-items: center; font-size: 1rem; }
.report-card:hover .arrow { background: #2773df; color: #fff; }


/* Вход и настройки */
.login-box { max-width: 420px; margin: 60px auto; background: #fff; border: 1px solid #e3e8ed; border-radius: 8px; padding: 28px; }
.login-box h2 { margin: 0 0 16px; }
.login-box form { display: grid; gap: 12px; }
.login-box label { display: grid; gap: 4px; font-size: 13px; color: #55607a; }
.login-box input { border: 1px solid #ccd5de; border-radius: 4px; height: 38px; padding: 0 10px; font-size: .95rem; }
#userBadge { color: #2674d8; font-weight: 600; white-space: nowrap; }
#logoutBtn { white-space: nowrap; }