*{margin:0;padding:0;box-sizing:border-box}
:root{
  --bg:#f0f1ec;--bg2:#e8e9e4;--white:#fafaf8;
  --border:#d8d9d4;--border-light:#e5e5e0;
  --text:#2c2e2a;--text2:#6b6e66;--text3:#9a9d94;
  --accent:#7a9e7e;--accent2:#6b8e6f;--accent-light:#e8f0e9;--accent-pale:#f2f7f3;
  --red:#c26155;--red-bg:#faf0ee;
  --orange:#b89240;--orange-bg:#faf5ea;
  --blue:#5a7ea6;--blue-bg:#eaf0f6;
  --green-dark:#4a7a4e;--green-val:#5e8c62;
  --paid-bg:rgba(122,158,126,.22);--charge-bg:rgba(122,158,126,.10);
  --sel-bg:#fdf8e1;--sel-border:#e8dfa0;
  --hover-ci:#f7f7f4;
  --sidebar-w:220px;
}
html,body{height:100%;overflow:hidden}
body{font-family:'Inter',sans-serif;background:var(--bg);color:var(--text);font-size:12px;line-height:1.4}
a{text-decoration:none;color:inherit}

/* LOGIN */
.login-overlay{position:fixed;inset:0;background:var(--bg);z-index:9999;display:flex;align-items:center;justify-content:center}
.login-box{background:var(--white);width:320px;padding:32px 28px;border:1px solid var(--border)}
.login-box .logo{display:flex;align-items:center;gap:8px;margin-bottom:24px}
.login-box .logo .bar{width:3px;height:16px;background:var(--accent)}
.login-box .logo span{font-size:12px;font-weight:700;letter-spacing:.5px;text-transform:uppercase}
.login-box h2{font-size:15px;font-weight:600;margin-bottom:3px}
.login-box .sub{font-size:11px;color:var(--text2);margin-bottom:22px}
.login-error{background:var(--red-bg);color:var(--red);padding:8px 12px;font-size:11px;font-weight:500;margin-bottom:14px;border:1px solid rgba(194,97,85,.2)}
.fg{margin-bottom:12px}
.fg label{display:block;font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:.6px;color:var(--text3);margin-bottom:4px}
.fg input{width:100%;height:34px;background:var(--bg);border:1px solid var(--border);padding:0 10px;font-family:inherit;font-size:12px;outline:none}
.fg input:focus{border-color:var(--accent)}
.btn-go{width:100%;height:34px;background:var(--accent);color:#fff;border:none;font-family:inherit;font-size:12px;font-weight:600;cursor:pointer;margin-top:6px}
.btn-go:hover{background:var(--accent2)}

/* APP */
.app{display:flex;height:100vh}
.app.on{opacity:1}

/* SIDEBAR */
.side{width:var(--sidebar-w);min-width:var(--sidebar-w);background:var(--white);border-right:1px solid var(--border);display:flex;flex-direction:column}
.side-head{padding:12px 14px;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:7px}
.side-head .bar{width:3px;height:12px;background:var(--accent)}
.side-head span{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.3px}
.side-body{flex:1;overflow-y:auto}
.side-body::-webkit-scrollbar{width:3px}
.side-body::-webkit-scrollbar-thumb{background:var(--border)}


.uk-row{display:flex;align-items:center;padding:6px 14px 6px 28px;cursor:pointer;gap:6px;border-left:3px solid transparent;transition:background .08s}
.uk-row:hover{background:var(--bg)}
.uk-row.on{background:var(--accent-pale);border-left-color:var(--accent)}
.uk-row .nm{flex:1;font-size:11px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.uk-row.on .nm{color:var(--accent2);font-weight:600}
.uk-row .ct{font-size:9px;font-weight:700;color:var(--text3);background:var(--bg2);padding:1px 5px;min-width:18px;text-align:center}
.uk-row.on .ct{background:var(--accent);color:#fff}

.nav-item{display:flex;align-items:center;padding:9px 14px;cursor:pointer;gap:8px;border-left:3px solid transparent;transition:background .08s}
.nav-item:hover{background:var(--bg)}
.nav-item.active{background:var(--accent-pale);border-left-color:var(--accent)}
.nav-item .ni-icon{width:16px;height:16px;color:var(--text3);flex-shrink:0}
.nav-item.active .ni-icon{color:var(--accent2)}
.nav-item .ni-name{flex:1;font-size:11px;font-weight:600}
.nav-item.active .ni-name{color:var(--accent2)}
.nav-item .ni-badge{font-size:9px;font-weight:700;color:var(--text3);background:var(--bg2);padding:1px 6px}
.nav-item.active .ni-badge{background:var(--accent);color:#fff}

.side-foot{padding:10px 14px;border-top:1px solid var(--border);display:flex;align-items:center;gap:7px}
.side-foot .av{width:24px;height:24px;background:var(--accent-light);color:var(--accent2);display:flex;align-items:center;justify-content:center;font-size:9px;font-weight:700}
.side-foot .ui{flex:1}
.side-foot .un{font-size:10px;font-weight:600}
.side-foot .ur{font-size:9px;color:var(--text3)}
.side-foot .lo{background:none;border:none;cursor:pointer;color:var(--text3);padding:2px;display:inline-flex}
.side-foot .lo:hover{color:var(--red)}

/* MAIN */
.main{flex:1;display:flex;flex-direction:column;overflow:hidden}

.top{height:44px;min-height:44px;background:var(--white);border-bottom:1px solid var(--border);display:flex;align-items:center;padding:0 16px;gap:10px}
.top h1{font-size:13px;font-weight:700;letter-spacing:.2px}
.top .pipe{width:1px;height:18px;background:var(--border)}
.year-picker{position:relative}
.year-btn{display:inline-flex;align-items:center;gap:5px;height:26px;padding:0 8px 0 11px;background:var(--bg);border:1px solid var(--border);font-family:inherit;font-size:12px;font-weight:600;color:var(--text);cursor:pointer}
.year-btn svg{width:13px;height:13px;color:var(--text2);transition:transform .15s}
.year-btn:hover{background:var(--bg2)}
.year-btn.on{border-color:var(--accent);color:var(--accent)}
.year-btn.on svg{transform:rotate(180deg);color:var(--accent)}
.year-menu{display:none;position:absolute;top:calc(100% + 3px);left:0;z-index:30;min-width:90px;max-height:280px;overflow-y:auto;background:var(--bg);border:1px solid var(--border);box-shadow:0 6px 18px rgba(0,0,0,.12);padding:3px}
.year-menu.open{display:block}
.year-opt{display:block;padding:5px 12px;font-size:12px;font-weight:500;color:var(--text2);white-space:nowrap}
.year-opt:hover{background:var(--bg2);color:var(--text)}
.year-opt.on{background:var(--accent);color:#fff}
.top .fill{flex:1}
.top .srch{position:relative}
.top .srch input{width:180px;height:26px;background:var(--bg);border:1px solid var(--border-light);padding:0 8px 0 26px;font-family:inherit;font-size:11px;outline:none;transition:width .15s}
.top .srch input:focus{border-color:var(--accent);width:240px}
.top .srch svg{position:absolute;left:7px;top:50%;transform:translateY(-50%);width:12px;height:12px;color:var(--text3)}
.top .inf{font-size:11px;color:var(--text2)}
.top .inf b{font-weight:700;color:var(--text)}


.mh-row{display:flex;background:var(--white);border-bottom:1px solid var(--border)}
.mh-info{width:430px;min-width:430px;padding:0 14px;display:flex;align-items:center;gap:8px;font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:var(--text3);border-right:1px solid var(--border)}
.mh-grid{flex:1;display:grid;grid-template-columns:repeat(12,1fr)}
.mh-cell{display:flex;align-items:center;justify-content:center;font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:.3px;color:var(--text3);padding:7px 0;border-right:1px solid var(--border-light)}
.mh-cell:last-child{border-right:none}
.mh-cell.now{color:var(--accent2);background:var(--accent-pale)}
/* Шапка месяца ведёт на страницу формирования сумм — она кликабельна. */
.mh-cell{text-decoration:none;cursor:pointer;transition:background .1s,color .1s}
.mh-cell:hover{background:var(--accent-light);color:var(--accent2)}

.rows{flex:1;overflow-y:auto;overflow-x:hidden}
.rows::-webkit-scrollbar{width:4px}
.rows::-webkit-scrollbar-thumb{background:var(--border)}

/* Гармошка УК: заголовок группы со сводкой, липнет при прокрутке */
.uk-accordion-header{display:flex;align-items:center;gap:8px;padding:6px 14px;background:var(--bg2);border-bottom:1px solid var(--border);cursor:pointer;user-select:none;min-height:32px;position:sticky;top:0;z-index:3}
.uk-accordion-header:hover{background:var(--border-light)}
.uk-acc-arrow{width:12px;height:12px;color:var(--text3);flex-shrink:0;transition:transform .15s}
.uk-accordion-header.open .uk-acc-arrow{transform:rotate(90deg)}
.uk-acc-star{color:#d4a72c;font-size:14px;line-height:1}
.uk-acc-name{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.3px;color:var(--text)}
.uk-acc-cnt{font-size:9px;font-weight:700;color:#fff;background:var(--accent);padding:1px 6px;min-width:20px;text-align:center}
.uk-acc-stats{display:flex;gap:6px;margin-left:auto}
.uk-acc-stat{font-size:9px;font-weight:600;padding:1px 5px}
.uk-acc-stat.g{background:var(--accent-light);color:var(--accent2)}
.uk-acc-stat.x{background:var(--bg);color:var(--text3)}
.uk-acc-stat.r{background:var(--red-bg);color:var(--red)}
.uk-acc-stat.o{background:var(--orange-bg);color:var(--orange)}
.uk-acc-stat.sum{background:none;color:var(--text2);font-variant-numeric:tabular-nums}

.crow{display:flex;border-bottom:1px solid var(--border);min-height:56px}
.crow.dim{opacity:.5}
.crow.dim:hover{opacity:.7}

.ci{width:430px;min-width:430px;padding:7px 14px;display:flex;gap:8px;border-right:1px solid var(--border);align-items:center;cursor:pointer;transition:background .1s;position:relative}
.ci:hover{background:var(--hover-ci)}
/* Звезда всегда на виду: по ней же видно, избранный договор или нет */
.ci-fav{position:absolute;right:6px;top:6px;width:20px;height:20px;display:flex;align-items:center;justify-content:center;background:none;border:none;color:var(--border);font-size:14px;line-height:1;cursor:pointer;padding:0;z-index:2}
.ci-fav:hover{color:#d4a72c}
.ci-fav.on{color:#d4a72c}
.ci-bar{width:3px;align-self:stretch;flex-shrink:0}
.ci-bar.g{background:var(--accent)}.ci-bar.r{background:var(--red)}.ci-bar.d{background:var(--blue)}.ci-bar.x{background:var(--border)}
.ci-body{flex:1;min-width:0}
.ci-line1{display:flex;align-items:center;gap:6px;margin-bottom:2px}
.ci-num{font-size:12px;font-weight:700}
.ci-tag{font-size:8px;font-weight:700;text-transform:uppercase;letter-spacing:.3px;padding:1px 5px}
.ci-tag.g{background:var(--accent-light);color:var(--accent2)}
.ci-tag.r{background:var(--red-bg);color:var(--red)}
.ci-tag.d{background:var(--blue-bg);color:var(--blue)}
.ci-tag.x{background:var(--bg2);color:var(--text3)}
.ci-who{font-size:11px;color:var(--text2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ci-row2{display:flex;gap:10px;margin-top:2px}
.ci-row2 span{font-size:10px;color:var(--text3)}
.ci-amt{text-align:right;min-width:90px;display:flex;flex-direction:column;align-items:flex-end;justify-content:center;padding-left:6px;gap:1px}
.ci-amt .v{font-size:12px;font-weight:700;font-variant-numeric:tabular-nums}
.ci-amt .v2{font-size:10px;font-weight:500;font-variant-numeric:tabular-nums;color:var(--text2)}

.cg{flex:1;display:grid;grid-template-columns:repeat(12,1fr)}
.cc{border-right:1px solid var(--border-light);display:flex;align-items:center;justify-content:center;position:relative;transition:background .06s}
.cc:last-child{border-right:none}
.cc:hover{outline:1px solid var(--accent);outline-offset:-1px;z-index:1}
.cc .cv{font-size:9px;font-weight:600;font-variant-numeric:tabular-nums}
.cc.paid{background:var(--paid-bg)}.cc.paid .cv{color:var(--green-dark)}
.cc.future{background:repeating-linear-gradient(45deg,transparent,transparent 3px,rgba(0,0,0,.018) 3px,rgba(0,0,0,.018) 6px)}

/* totals row */
.totals-row{display:flex;background:var(--white);border-top:2px solid var(--accent);min-height:38px;flex-shrink:0}
.tot-info{width:430px;min-width:430px;padding:8px 14px;display:flex;align-items:center;gap:12px;border-right:1px solid var(--border);background:var(--accent-pale)}
.tot-label{font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.6px;color:var(--accent2)}
.tot-sum{font-size:12px;font-weight:700;font-variant-numeric:tabular-nums;color:var(--text)}
.tot-sub{font-size:10px;font-weight:500;font-variant-numeric:tabular-nums;color:var(--text2)}
.tot-grid{flex:1;display:grid;grid-template-columns:repeat(12,1fr)}
.tot-cell{border-right:1px solid var(--border-light);display:flex;align-items:center;justify-content:center;background:var(--accent-pale);font-size:10px;font-weight:700;font-variant-numeric:tabular-nums;color:var(--accent2);padding:4px 2px}
.tot-cell:last-child{border-right:none}
.tot-cell.has{background:rgba(122,158,126,.15)}
.tot-cell.zero{color:var(--text3);font-weight:500}

/* GENERIC PAGE */
.page{display:none;flex-direction:column;flex:1;overflow:hidden}
.page.show{display:flex}
.page-top{height:44px;min-height:44px;background:var(--white);border-bottom:1px solid var(--border);display:flex;align-items:center;padding:0 16px;gap:10px}
.page-top h1{font-size:13px;font-weight:700}
.page-top .fill{flex:1}
.page-top .srch{position:relative}
.page-top .srch input{width:200px;height:26px;background:var(--bg);border:1px solid var(--border-light);padding:0 8px 0 26px;font-family:inherit;font-size:11px;outline:none}
.page-top .srch input:focus{border-color:var(--accent);width:260px}
.page-top .srch svg{position:absolute;left:7px;top:50%;transform:translateY(-50%);width:12px;height:12px;color:var(--text3)}
.page-top .cnt{font-size:11px;color:var(--text2)}
.page-top .cnt b{font-weight:700;color:var(--text)}
.page-top .uk-filter{height:26px;background:var(--bg);border:1px solid var(--border-light);font-family:inherit;font-size:11px;color:var(--text);padding:0 6px;outline:none;max-width:200px}
.page-top .uk-filter:focus{border-color:var(--accent)}
.cp-uk-list{max-height:150px;overflow:auto;border:1px solid var(--border-light);background:var(--bg);padding:5px 7px;display:flex;flex-direction:column;gap:3px}
.cp-uk-item{display:flex;align-items:center;gap:6px;font-size:11px;font-weight:400;cursor:pointer}
.cp-uk-item input{margin:0}

.tbl-wrap{flex:1;overflow:auto}
.tbl-wrap::-webkit-scrollbar{width:4px;height:4px}
.tbl-wrap::-webkit-scrollbar-thumb{background:var(--border)}
table.tbl{width:100%;border-collapse:collapse;font-size:11px}
table.tbl th{position:sticky;top:0;background:var(--white);border-bottom:1px solid var(--border);padding:8px 12px;text-align:left;font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:.4px;color:var(--text3);white-space:nowrap;z-index:2}
table.tbl td{padding:8px 12px;border-bottom:1px solid var(--border-light);vertical-align:top}
table.tbl tr:hover td{background:rgba(122,158,126,.03)}
table.tbl tr.row-click{cursor:pointer}
table.tbl tr.row-click:hover td{background:rgba(122,158,126,.09)}
.tbl .tag{display:inline-block;font-size:9px;font-weight:700;padding:1px 6px;text-transform:uppercase;letter-spacing:.3px}
.tbl .tag.g{background:var(--accent-light);color:var(--accent2)}
.tbl .tag.r{background:var(--red-bg);color:var(--red)}
.tbl .tag.o{background:var(--orange-bg);color:var(--orange)}
.tbl .tag.b{background:var(--blue-bg);color:var(--blue)}
.tbl .tag.x{background:var(--bg2);color:var(--text3)}
.tbl .mono{font-variant-numeric:tabular-nums;font-weight:600}

.bot{height:30px;min-height:30px;background:var(--white);border-top:1px solid var(--border);display:flex;align-items:center;padding:0 16px;gap:14px;font-size:10px;color:var(--text3)}
.bot .ld{display:flex;align-items:center;gap:4px}
.bot .ld .sq{width:8px;height:8px;border:1px solid var(--border)}

/* UK accordion in main area */

/* Favorite star */

/* Expand/collapse buttons */
.btn-toggle-top{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;background:var(--bg);border:1px solid var(--border);font-size:10px;color:var(--text3);cursor:pointer;font-family:inherit}
.btn-toggle-top:hover{background:var(--bg2);color:var(--text)}

/* Row actions */
.row-actions{white-space:nowrap;text-align:right}
.row-actions a{font-size:10px;color:var(--accent2);font-weight:600;margin-right:6px}
.row-actions a:hover{text-decoration:underline}
.link-btn{background:none;border:none;font-family:inherit;font-size:10px;color:var(--red);font-weight:600;cursor:pointer;padding:0}
.link-btn:hover{text-decoration:underline}
.tbl-link{color:var(--accent2);font-weight:600}
.tbl-link:hover{text-decoration:underline}

/* Status filter */
.status-filter{display:flex}
.sf-btn{display:inline-flex;align-items:center;justify-content:center;height:26px;padding:0 10px;background:var(--bg);border:1px solid var(--border);font-family:inherit;font-size:11px;font-weight:500;color:var(--text2);margin-left:-1px}
.sf-btn:first-child{margin-left:0}
.sf-btn.on{background:var(--accent);color:#fff;border-color:var(--accent);z-index:1;position:relative}
.sf-btn:hover:not(.on){background:var(--bg2)}

/* Add button in top bar */
.btn-add-top{display:inline-flex;align-items:center;height:26px;padding:0 10px;background:var(--accent);color:#fff;font-family:inherit;font-size:11px;font-weight:600;white-space:nowrap;border:none;cursor:pointer}
.btn-add-top:hover{background:var(--accent2)}
.btn-carry{display:inline-flex;align-items:center;height:26px;padding:0 10px;background:var(--blue-bg);color:var(--blue);border:1px solid var(--blue);font-family:inherit;font-size:11px;font-weight:600;white-space:nowrap;cursor:pointer}
.btn-carry:hover{background:var(--blue);color:#fff}

/* Pagination */
.pagination{display:flex;align-items:center;gap:4px;padding:8px 16px;background:var(--white);border-top:1px solid var(--border);min-height:36px}
.pg-btn{display:inline-flex;align-items:center;justify-content:center;min-width:28px;height:26px;padding:0 6px;background:var(--bg);border:1px solid var(--border);font-family:inherit;font-size:11px;font-weight:500;color:var(--text2)}
.pg-btn:hover{background:var(--bg2)}
.pg-btn.on{background:var(--accent);color:#fff;border-color:var(--accent)}
.pg-dots{font-size:11px;color:var(--text3);padding:0 2px}
.pg-info{font-size:10px;color:var(--text3);margin-left:8px}

/* ─── Form page ─── */
.form-page{max-width:640px;margin:0 auto;padding:24px 20px}
.form-header{display:flex;align-items:center;gap:16px;margin-bottom:24px}
.form-header h1{font-size:16px;font-weight:700}
.form-back{display:inline-flex;align-items:center;gap:4px;font-size:11px;font-weight:600;color:var(--accent2)}
.form-back:hover{text-decoration:underline}
.form-body{background:var(--white);border:1px solid var(--border);padding:24px}
.form-errors{margin-bottom:16px;padding:10px 14px;background:var(--red-bg);border:1px solid rgba(194,97,85,.2);font-size:11px;color:var(--red)}
.form-error{margin-bottom:2px}
.form-group{margin-bottom:14px}
.form-group.has-error label{color:var(--red)}
.form-group label{display:block;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.4px;color:var(--text3);margin-bottom:4px}
.form-group input,.form-group select,.form-group textarea{width:100%;background:var(--bg);border:1px solid var(--border);padding:7px 10px;font-family:inherit;font-size:12px;outline:none}
.form-group input:focus,.form-group select:focus,.form-group textarea:focus{border-color:var(--accent)}
.form-group input[type="checkbox"]{width:auto;margin-right:6px}
.form-group textarea{resize:vertical;min-height:60px}
.form-help{font-size:10px;color:var(--text3);margin-top:2px;display:block}
.form-actions{display:flex;gap:8px;margin-top:20px}
.btn-save{height:34px;padding:0 20px;background:var(--accent);color:#fff;border:none;font-family:inherit;font-size:12px;font-weight:600;cursor:pointer}
.btn-save:hover{background:var(--accent2)}
.btn-cancel{display:inline-flex;align-items:center;height:34px;padding:0 16px;background:var(--bg);border:1px solid var(--border);font-family:inherit;font-size:12px;font-weight:500;color:var(--text2)}
.btn-cancel:hover{background:var(--bg2)}

/* ─── Detail page ─── */
.detail-page{max-width:1000px;margin:0 auto;padding:24px 20px}
.detail-header{display:flex;align-items:center;gap:16px;margin-bottom:24px;flex-wrap:wrap}
.detail-title{display:flex;align-items:center;gap:10px;flex:1}
.detail-title h1{font-size:16px;font-weight:700}
.detail-actions{display:flex;gap:8px}
.btn-edit{display:inline-flex;align-items:center;height:28px;padding:0 12px;background:var(--accent);color:#fff;font-family:inherit;font-size:11px;font-weight:600}
.btn-edit:hover{background:var(--accent2)}
.btn-del{height:28px;padding:0 12px;background:var(--red-bg);color:var(--red);border:1px solid rgba(194,97,85,.2);font-family:inherit;font-size:11px;font-weight:600;cursor:pointer}
.btn-del:hover{background:rgba(194,97,85,.15)}

.detail-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:16px;margin-bottom:24px}
.detail-card{background:var(--white);border:1px solid var(--border);padding:16px}
.detail-card h3{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.4px;color:var(--text3);margin-bottom:12px;padding-bottom:6px;border-bottom:1px solid var(--border-light)}
.detail-card dl{display:grid;grid-template-columns:auto 1fr;gap:4px 12px}
.detail-card dt{font-size:11px;color:var(--text3);font-weight:500}
.detail-card dd{font-size:11px;font-weight:500}

.detail-section{margin-bottom:24px}
.detail-section-head{display:flex;align-items:center;gap:12px;margin-bottom:10px}
.detail-section-head h2{font-size:13px;font-weight:700}
.btn-add{display:inline-flex;align-items:center;height:24px;padding:0 10px;background:var(--accent-light);color:var(--accent2);font-family:inherit;font-size:10px;font-weight:600}
.btn-add:hover{background:var(--accent);color:#fff}

.detail-tbl{font-size:11px}
.detail-tbl th{font-size:9px}

.charges-year{margin-bottom:12px}
.charges-year h3{font-size:12px;font-weight:700;margin-bottom:6px}
.charges-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:6px}
.charge-item{background:var(--white);border:1px solid var(--border-light);padding:8px 10px;display:flex;flex-wrap:wrap;gap:4px 10px;align-items:center;font-size:11px}
.charge-item.paid{border-left:3px solid var(--accent);background:var(--paid-bg)}
.charge-item.debt{border-left:3px solid var(--red);background:var(--red-bg)}
.charge-month{font-weight:600;color:var(--text2)}
.charge-amount{font-weight:700;font-variant-numeric:tabular-nums}
.charge-status{font-size:10px;color:var(--text3)}
.charge-actions{margin-left:auto}
.charge-actions a{font-size:10px;color:var(--accent2);font-weight:600;margin-right:4px}
.charge-actions a:hover{text-decoration:underline}

.empty-msg{font-size:11px;color:var(--text3);padding:12px 0}

@media(max-width:1200px){
  .ci{width:340px;min-width:340px}
  .mh-info{width:340px;min-width:340px}
  .tot-info{width:340px;min-width:340px}
}

/* ─── Кнопка «+ УК» (теперь в шапке панели УК) ─── */
.uk-add-btn{margin-left:auto;height:20px;padding:0 8px;background:var(--accent-light);color:var(--accent2);border:none;font-family:inherit;font-size:10px;font-weight:700;cursor:pointer;white-space:nowrap}
.uk-add-btn:hover{background:var(--accent);color:#fff}

/* ─── UK row edit affordance ─── */
/* ─── Панель УК внутри раздела договоров ─────────────────────────── */
.cwork{flex:1;display:flex;min-height:0}
.ctbl{flex:1;display:flex;flex-direction:column;min-width:0}
.ukp{width:206px;min-width:206px;background:var(--white);border-right:1px solid var(--border);display:flex;flex-direction:column;min-height:0}
.ukp-head{display:flex;align-items:center;gap:8px;padding:8px 12px;border-bottom:1px solid var(--border);min-height:34px}
.ukp-title{flex:1;font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:.4px;color:var(--text3)}
.ukp-list{flex:1;overflow-y:auto;padding-bottom:8px}
.ukp-list::-webkit-scrollbar{width:4px}
.ukp-list::-webkit-scrollbar-thumb{background:var(--border)}
/* Отступ слева здесь не нужен: в меню он отбивал вложенность, а тут список
   сам по себе. */
.ukp .uk-row{padding-left:12px}
.ukp .uk-row-wrap .uk-row{padding-right:30px}

.uk-row-wrap{position:relative}
.uk-row-wrap .uk-row{padding-right:30px}
.uk-edit-btn{position:absolute;right:8px;top:50%;transform:translateY(-50%);width:20px;height:20px;display:none;align-items:center;justify-content:center;background:var(--white);border:1px solid var(--border);color:var(--text2);font-size:10px;cursor:pointer;padding:0;line-height:1}
.uk-row-wrap:hover .uk-edit-btn{display:flex}
.uk-edit-btn:hover{background:var(--accent);color:#fff;border-color:var(--accent)}

/* ─── Drawer ─── */
.drawer-overlay{position:fixed;inset:0;background:rgba(44,46,42,.32);z-index:998;opacity:0;visibility:hidden;transition:opacity .2s}
.drawer-overlay.show{opacity:1;visibility:visible}
.drawer{position:fixed;top:0;right:0;width:420px;max-width:92vw;height:100vh;background:var(--white);border-left:1px solid var(--border);box-shadow:-4px 0 24px rgba(44,46,42,.12);z-index:999;display:flex;flex-direction:column;transform:translateX(100%);transition:transform .22s cubic-bezier(.4,0,.2,1)}
.drawer.show{transform:translateX(0)}
.drawer-head{display:flex;align-items:center;padding:14px 18px;border-bottom:1px solid var(--border);flex-shrink:0}
.drawer-head h2{font-size:13px;font-weight:700;flex:1}
.drawer-close{width:26px;height:26px;background:none;border:none;font-size:20px;line-height:1;color:var(--text3);cursor:pointer;padding:0}
.drawer-close:hover{color:var(--text)}
.drawer-body{flex:1;overflow-y:auto;padding:18px}
.drawer-body::-webkit-scrollbar{width:4px}
.drawer-body::-webkit-scrollbar-thumb{background:var(--border)}
.drawer-row{display:grid;grid-template-columns:1fr 1fr;gap:0 12px}
.drawer-check{display:flex;align-items:center;font-size:12px;font-weight:500;text-transform:none;letter-spacing:0;color:var(--text);cursor:pointer}
.drawer-err{margin-bottom:14px;padding:10px 12px;background:var(--red-bg);border:1px solid rgba(194,97,85,.2);font-size:11px;color:var(--red)}
.drawer-err div{margin-bottom:2px}
.drawer-err div:last-child{margin-bottom:0}
.form-group.has-error input,.form-group.has-error select{border-color:var(--red)}
.drawer-meta{margin:4px 0 14px;font-size:10px;color:var(--text3)}
.drawer-actions{display:flex;align-items:center;gap:8px;margin-top:20px;padding-top:16px;border-top:1px solid var(--border-light);flex-wrap:wrap}
.drawer-actions .fill{flex:1}

/* ─── Contract quick actions (п.14) ─── */
.ct-quick{margin-bottom:16px;padding:10px 12px;background:var(--bg2);border:1px solid var(--border-light)}
.ctq-row{display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.ctq-row+.ctq-row{margin-top:8px}
.ctq-cap{font-size:10px;font-weight:600;color:var(--text3);text-transform:uppercase;letter-spacing:.3px;margin-right:2px}
.ctq-st,.ctq-btn{display:inline-flex;align-items:center;height:26px;padding:0 10px;background:var(--bg);border:1px solid var(--border);font-family:inherit;font-size:11px;font-weight:500;color:var(--text2);cursor:pointer;text-decoration:none}
.ctq-st:hover,.ctq-btn:hover{background:var(--border-light);color:var(--text)}
.ctq-st.on{background:var(--accent);border-color:var(--accent);color:#fff;font-weight:600}
.ctq-btn.on{border-color:var(--accent);color:var(--accent)}

/* Удаление договора из карточки — мягкое, в «Удалённые» */
.ct-danger{display:flex;align-items:center;gap:10px;margin-top:14px;padding-top:14px;border-top:1px solid var(--border-light)}
.ct-del-btn{height:30px;padding:0 12px;background:var(--white);border:1px solid var(--red);font-family:inherit;font-size:11px;font-weight:600;color:var(--red);cursor:pointer;flex-shrink:0}
.ct-del-btn:hover{background:var(--red);color:#fff}
.ct-del-note{font-size:10px;color:var(--text3);line-height:1.4}

/* Раздел «Удалённые договоры» */
.del-lead{font-size:11.5px;color:var(--text3);line-height:1.5;max-width:640px;margin:2px 0 14px}
.del-acts{display:flex;gap:8px;justify-content:flex-end;white-space:nowrap}
.del-restore{height:26px;padding:0 12px;background:var(--accent);border:none;font-family:inherit;font-size:10.5px;font-weight:600;color:#fff;cursor:pointer}
.del-restore:hover{background:var(--accent2)}
.del-purge{height:26px;padding:0 12px;background:var(--white);border:1px solid var(--border);font-family:inherit;font-size:10.5px;font-weight:600;color:var(--text3);cursor:pointer}
.del-purge:hover{border-color:var(--red);color:var(--red)}

/* ─── Исходящие и журнал действий операторов ─── */
.og-way{display:inline-block;font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:.3px;padding:2px 6px;border-radius:2px}
.og-way.auto{background:var(--blue-bg);color:var(--blue)}
.og-way.manual{background:var(--bg2);color:var(--text2)}
.og-src{font-size:10.5px;color:var(--text3)}
.og-act{display:inline-block;font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:.3px;padding:2px 6px;border-radius:2px;background:var(--bg2);color:var(--text2)}
.og-act.PAGE_DELETE{background:var(--red-bg,#fdecec);color:var(--red)}
.og-act.CP_CREATE{background:var(--accent-light);color:var(--green-dark)}
.og-act.CP_LINK{background:var(--blue-bg);color:var(--blue)}

/* ─── Contract change history (п.12) ─── */
.ct-history{margin:14px 0 4px;padding-top:14px;border-top:1px solid var(--border-light)}
.ct-history-head{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.4px;color:var(--text3);margin-bottom:10px}
.ct-history-list{display:flex;flex-direction:column;gap:0}
.ct-hist-empty{font-size:11px;color:var(--text3)}
.ct-hist-item{padding:8px 0;border-bottom:1px solid var(--border-light)}
.ct-hist-item:last-child{border-bottom:0}
.ct-hist-top{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:3px}
.ct-hist-kind{display:inline-flex;align-items:center;height:17px;padding:0 7px;font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:.3px;background:var(--bg2);color:var(--text2);border-radius:2px}
.ct-hist-kind.k-CREATED{background:#e6f0e6;color:#3a7a3a}
.ct-hist-kind.k-STATUS{background:#e6eef7;color:#3a6ea5}
.ct-hist-kind.k-DUPLICATED{background:#f3ecdb;color:#9a7b30}
.ct-hist-kind.k-CHARGES{background:#f0e6f0;color:#8a4a8a}
.ct-hist-at{font-size:10px;color:var(--text3);white-space:nowrap}
.ct-hist-sum{font-size:11px;color:var(--text);line-height:1.4}

/* ─── Status toggle pill ─── */
.drawer-status-top{display:flex;justify-content:flex-end;margin-bottom:14px}
.uk-status-toggle{display:inline-flex;align-items:center;gap:7px;height:28px;padding:0 14px;border:1px solid var(--border);background:var(--bg);font-family:inherit;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.3px;cursor:pointer;transition:background .12s,border-color .12s,color .12s}
.uk-status-toggle .uk-status-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0}
.uk-status-toggle.work{background:var(--accent-light);border-color:var(--accent);color:var(--accent2)}
.uk-status-toggle.work .uk-status-dot{background:var(--accent)}
.uk-status-toggle.archive{background:var(--bg2);border-color:var(--border);color:var(--text2)}
.uk-status-toggle.archive .uk-status-dot{background:var(--text3)}
.uk-status-toggle:hover{filter:brightness(.97)}

/* ─── Month cell drawer ─── */
.drawer-head > div:first-child{flex:1}
.drawer-sub{font-size:10px;color:var(--text3);margin-top:2px}
.mc-actions{display:flex;align-items:center;gap:6px;margin-bottom:14px;padding-bottom:12px;border-bottom:1px solid var(--border-light)}
/* Плашка счёта — постоянная часть карточки месяца */
.mc-inv{background:var(--bg);border:1px solid var(--border);padding:10px 12px;margin-bottom:14px}
.mc-inv.empty{border-style:dashed}
.mc-inv-head{display:flex;align-items:center;gap:8px;margin-bottom:8px}
.mc-inv-title{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.4px;color:var(--text3)}
.mc-inv-badge{font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:.3px;padding:2px 6px}
.mc-inv-badge.none{background:var(--bg2);color:var(--text3)}
.mc-inv-badge.have{background:var(--blue-bg);color:var(--blue)}
.mc-inv-badge.sent{background:var(--accent-light);color:var(--green-dark)}
.mc-inv-open{font-size:10.5px;font-weight:600;color:var(--accent2);text-decoration:none}
.mc-inv-open:hover{text-decoration:underline}
.mc-inv-cancel{height:22px;padding:0 8px;background:var(--white);border:1px solid var(--border);font-family:inherit;font-size:9.5px;font-weight:600;color:var(--text2);cursor:pointer}
.mc-inv-cancel:hover{border-color:var(--red);color:var(--red)}
.mc-inv-move{height:22px;padding:0 8px;background:var(--white);border:1px solid var(--border);font-family:inherit;font-size:9.5px;font-weight:600;color:var(--text2);cursor:pointer}
.mc-inv-move:hover{border-color:var(--accent2);color:var(--accent2)}
.mc-move{margin-top:10px;padding:10px;background:var(--bg2);border:1px solid var(--border)}
.mc-move-note{font-size:10.5px;color:var(--text3);line-height:1.4;margin-bottom:8px}
.mc-move-search{width:100%;height:30px;padding:0 8px;border:1px solid var(--border);background:var(--white);font-family:inherit;font-size:12px;box-sizing:border-box}
.mc-move-search:focus{outline:none;border-color:var(--accent2)}
.mc-move-results{margin-top:6px;max-height:180px;overflow-y:auto;display:flex;flex-direction:column;gap:2px}
.mc-move-item{display:flex;flex-direction:column;gap:1px;align-items:flex-start;text-align:left;padding:6px 8px;background:var(--white);border:1px solid var(--border);font-family:inherit;cursor:pointer}
.mc-move-item:hover{border-color:var(--accent2);background:var(--blue-bg)}
.mc-move-num{font-size:12px;font-weight:700;color:var(--text);font-variant-numeric:tabular-nums}
.mc-move-cp{font-size:10px;color:var(--text3)}
.mc-move-empty{font-size:11px;color:var(--text3);padding:6px 2px}
.mc-move-err{margin-top:6px;font-size:10.5px;color:var(--red)}
.mc-inv-line{font-size:14px;font-weight:600;color:var(--text);font-variant-numeric:tabular-nums}
.mc-inv-note{font-size:10px;color:var(--text3);margin-top:4px}
.mc-inv-fields{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.mc-inv-f{display:flex;flex-direction:column;gap:4px;min-width:0}
.mc-inv-f label{font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.3px;color:var(--text3)}
.mc-inv-f input{height:32px;background:var(--white);border:1px solid var(--border);padding:0 9px;font-family:inherit;font-size:12px;color:var(--text);outline:none;min-width:0}
.mc-inv-f input:focus{border-color:var(--accent)}
.mc-inv-file{display:flex;align-items:center;gap:8px;margin-top:10px}
.mc-inv-btn{height:28px;padding:0 10px;background:var(--white);border:1px solid var(--border);font-family:inherit;font-size:10.5px;color:var(--text2);cursor:pointer;flex-shrink:0}
.mc-inv-btn:hover{border-color:var(--accent);color:var(--accent2)}
.mc-inv-fname{font-size:10.5px;color:var(--text3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mc-inv-drop{width:18px;height:18px;border:none;background:none;color:var(--text3);font-size:15px;line-height:1;cursor:pointer;padding:0;flex-shrink:0}
.mc-inv-drop:hover{color:var(--red)}
.mc-inv-empty{font-size:10.5px;color:var(--text3);margin-top:10px;line-height:1.5}
.mc-inv-ocr{font-size:10.5px;margin-top:8px;padding:6px 8px;line-height:1.45}
.mc-inv-ocr.busy{background:var(--bg2);color:var(--text3)}
.mc-inv-ocr.ok{background:var(--accent-light);color:var(--green-dark)}
.mc-inv-ocr.warn{background:var(--red-bg);color:var(--red)}
.mc-letter-btn{height:30px;padding:0 12px;background:var(--white);border:1px solid var(--border);font-family:inherit;font-size:11px;color:var(--text2);cursor:pointer}
.mc-letter-btn:hover:not(:disabled){border-color:var(--accent);color:var(--accent2)}
.mc-letter-btn:disabled{opacity:.45;cursor:not-allowed}
.mc-letter-hint{font-size:10px;color:var(--text3);margin-top:8px;text-align:right}
.ds-nofiles{font-size:10.5px;color:var(--text3);background:var(--bg);border:1px dashed var(--border);padding:10px;text-align:center}
.mc-act-btn{display:inline-flex;align-items:center;height:24px;padding:0 10px;background:var(--accent-light);color:var(--accent2);font-family:inherit;font-size:10px;font-weight:600;white-space:nowrap}
.mc-act-btn:hover{background:var(--accent);color:#fff}

/* clickable month cells */
.cc{cursor:pointer}
/* 7-colour matrix scheme (TZ §5.5) by registry stage + payment state */
/* registry stage dots inside a cell */
/* Ячейка месяца: сумма к оплате прижата вправо вверх, слева от неё номер
   счёта. Красная, пока начисление не отмечено оплаченным. */
.cc{align-items:flex-start;justify-content:flex-start;padding:3px 4px 0}
.cc-top{display:flex;align-items:baseline;justify-content:space-between;gap:3px;width:100%}
.cc-inv{font-size:8px;font-weight:600;color:var(--text3);font-variant-numeric:tabular-nums;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:46%}
.cc .cv{margin-left:auto;text-align:right;white-space:nowrap}
.cc .cv.due{color:var(--red)}
.cc.paid .cv.due,.cc.paid .cv{color:var(--green-dark)}
.cc-tags{position:absolute;bottom:2px;left:4px;display:flex;gap:3px;align-items:center}
.cc-tag{width:6px;height:6px;border-radius:1px;display:block}
/* Конвертик статуса счёта. Цвет через currentColor у обводки: зелёный —
   отправлен, красный и крупнее — счёт есть, но ещё не отправлен. */
.cc-tag.sent,.cc-tag.unsent{width:auto;height:auto;background:none;display:flex}
.cc-tag.sent{color:var(--green-val)}
.cc-tag.sent svg{width:11px;height:8px;display:block}
.cc-tag.unsent{color:var(--red)}
.cc-tag.unsent svg{width:15px;height:11px;display:block;stroke-width:2}
/* paid sub-total in summary row */
.tot-cell{flex-direction:column;line-height:1.15}
.tot-charge{display:block}
.tot-paid{display:block;font-size:8px;font-weight:600;color:var(--green-dark)}
/* favorites-only toggle active */
.btn-toggle-top.on{background:var(--accent);color:#fff;border-color:var(--accent)}

/* ─── KPI dashboard ─── */
.dash-body{flex:1;overflow:auto;padding:16px}
.kpi-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:12px;margin-bottom:16px}
.kpi{background:var(--white);border:1px solid var(--border);padding:14px 16px}
.kpi-lbl{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.4px;color:var(--text3);margin-bottom:8px}
.kpi-val{font-size:20px;font-weight:700;font-variant-numeric:tabular-nums}
.kpi-sub{font-size:12px;font-weight:500;color:var(--text3)}
.dash-cols{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:16px}
@media(max-width:1100px){.dash-cols{grid-template-columns:1fr}}
.dash-card{background:var(--white);border:1px solid var(--border);padding:14px 16px}
.dash-card h3{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.4px;color:var(--text3);margin-bottom:10px;display:flex;align-items:center;gap:8px}
.dash-cnt{font-size:9px;font-weight:700;color:#fff;background:var(--accent);padding:1px 6px}

/* ─── Registries ─── */
.reg-form{display:flex;align-items:center;gap:6px}
.reg-select,.reg-filters .sf-btn{height:26px}
.reg-select{background:var(--bg);border:1px solid var(--border);font-family:inherit;font-size:11px;padding:0 6px;outline:none}
.reg-select:focus{border-color:var(--accent)}
.reg-filters{display:flex;align-items:center;gap:0;flex-wrap:wrap}
.reg-flabel{font-size:10px;color:var(--text3);margin-right:6px;text-transform:uppercase;letter-spacing:.3px}
.reg-filters .sf-btn{padding:0 7px;font-size:10px}
.reg-progress{display:inline-block;width:70px;height:6px;background:var(--bg2);vertical-align:middle;overflow:hidden}
.reg-progress-bar{height:100%;background:var(--accent)}
.reg-progress-lbl{font-size:10px;color:var(--text2);margin-left:6px;font-variant-numeric:tabular-nums}

/* Registry detail table */
.reg-tbl th{text-align:center}
.reg-tbl td:first-child,.reg-tbl td:nth-child(2){text-align:left}
.reg-subhead th{font-size:8px;font-weight:600;color:var(--text3);padding:4px 8px;text-transform:none;letter-spacing:0}
.reg-stage{text-align:center;white-space:nowrap}
.reg-chk{display:inline-flex;align-items:center;cursor:pointer}
.reg-chk input{width:16px;height:16px;cursor:pointer;accent-color:var(--accent)}
.reg-date,.reg-text,.reg-num{display:block;margin:3px auto 0;background:var(--bg);border:1px solid var(--border-light);font-family:inherit;font-size:10px;padding:2px 4px;outline:none}
.reg-date{width:110px}
.reg-text{width:110px}
.reg-num{width:90px;text-align:right}
.reg-date:focus,.reg-text:focus,.reg-num:focus{border-color:var(--accent)}

/* ─── Picker field (FK select via drawer) ─── */
.picker-btn{display:flex;align-items:center;gap:6px;width:100%;height:33px;background:var(--bg);border:1px solid var(--border);font-family:inherit;font-size:12px;padding:0 10px;cursor:pointer;text-align:left}
.picker-btn:hover{border-color:var(--accent)}
.picker-label{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.picker-label.placeholder{color:var(--text3)}
.picker-caret{color:var(--text3);font-size:10px}

/* Picker drawer stacks above the contract drawer */
.picker-overlay{z-index:1000}
.picker-drawer{z-index:1001;width:380px}
.picker-srch{position:relative;margin-bottom:10px}
.picker-srch input{width:100%;height:34px;background:var(--bg);border:1px solid var(--border);padding:0 10px 0 30px;font-family:inherit;font-size:12px;outline:none}
.picker-srch input:focus{border-color:var(--accent)}
.picker-srch svg{position:absolute;left:9px;top:50%;transform:translateY(-50%);width:13px;height:13px;color:var(--text3)}
.picker-list{display:flex;flex-direction:column}
.picker-item{display:flex;flex-direction:column;gap:1px;padding:9px 10px;border:1px solid var(--border-light);border-bottom:none;cursor:pointer;background:var(--white)}
.picker-item:last-child{border-bottom:1px solid var(--border-light)}
.picker-item:hover{background:var(--accent-pale)}
.picker-item .pi-label{font-size:12px;font-weight:600}
.picker-item .pi-sub{font-size:10px;color:var(--text3)}
.picker-item.pi-clear .pi-label{color:var(--text3);font-weight:500}
.picker-empty{padding:14px;text-align:center;font-size:11px;color:var(--text3)}

/* ─── Загрузка счетов ─────────────────────────────────────────── */
.up-wrap{flex:1;display:flex;min-height:0;overflow:hidden}
/* The column sits right of the menu and is 50 characters wide, per spec. */
.up-col{width:50ch;min-width:50ch;display:flex;flex-direction:column;border-right:1px solid var(--border);background:var(--white);min-height:0}

.up-drop{margin:12px;padding:18px 12px;border:1.5px dashed var(--border);background:var(--bg);text-align:center;cursor:pointer;flex-shrink:0;transition:border-color .15s,background .15s}
.up-drop:hover{border-color:var(--accent);background:var(--accent-pale)}
.up-drop.over{border-color:var(--accent);background:var(--accent-light)}
.up-drop svg{width:22px;height:22px;color:var(--text3);margin-bottom:6px}
.up-drop:hover svg,.up-drop.over svg{color:var(--accent2)}
.up-drop-t{font-size:12px;font-weight:600;color:var(--text)}
.up-drop-s{font-size:10px;color:var(--text3);margin-top:2px}
.up-drop-bar{height:3px;background:var(--border-light);margin-top:10px}
.up-drop-bar i{display:block;height:100%;background:var(--accent);width:0;transition:width .2s}

.up-list{flex:1;overflow-y:auto;padding:0 12px 12px}
.up-list::-webkit-scrollbar{width:3px}
.up-list::-webkit-scrollbar-thumb{background:var(--border)}
.up-empty{font-size:11px;color:var(--text3);text-align:center;padding:20px 0}

.up-card{position:relative;border:1px solid var(--border);background:var(--white);padding:9px 10px;margin-bottom:8px;cursor:pointer;transition:border-color .15s,background .15s}
.up-card:hover{background:var(--hover-ci)}
.up-card.on{border-color:var(--accent);background:var(--accent-pale)}
.up-card-top{display:flex;align-items:center;gap:6px}
.up-card-name{flex:1;font-size:11px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.up-card-meta{font-size:9.5px;color:var(--text3);margin-top:3px}
.up-card-desc{width:100%;margin-top:6px;height:24px;background:var(--bg);border:1px solid var(--border-light);padding:0 6px;font-family:inherit;font-size:10.5px;color:var(--text);outline:none}
.up-card-desc:focus{border-color:var(--accent);background:var(--white)}
.up-card-del{position:absolute;top:6px;right:6px;width:16px;height:16px;border:none;background:none;color:var(--text3);font-size:15px;line-height:1;cursor:pointer;padding:0;opacity:0}
.up-card:hover .up-card-del{opacity:1}
.up-card-del:hover{color:var(--red)}
/* Подвал карточки: описание тянется, чип архива справа от него */
.up-card-foot{display:flex;align-items:stretch;gap:6px;margin-top:6px}
.up-card-foot .up-card-desc{flex:1;margin-top:0}
/* В архив / вернуть — чип, всегда на виду у исполненной загрузки */
.up-card-arch{flex-shrink:0;height:24px;padding:0 9px;border:1px solid var(--border);background:var(--white);font-family:inherit;font-size:10px;font-weight:600;color:var(--text2);cursor:pointer;white-space:nowrap}
.up-card-arch:hover{border-color:var(--accent);color:var(--accent2)}
.up-card-arch.back{color:var(--accent2);border-color:var(--border)}
/* Признак исполнения: все счета в сетке (зелёный) либо частично */
.up-done{color:var(--green-val);font-weight:700;margin-left:6px}
.up-partial{color:var(--text3);font-weight:600;margin-left:6px}
/* Переключатель Активные / Архив над списком загрузок */
.up-viewsw{display:flex;gap:6px;margin-bottom:8px}
.up-viewsw button{flex:1;height:26px;border:1px solid var(--border);background:var(--white);font-family:inherit;font-size:10.5px;font-weight:600;color:var(--text2);cursor:pointer}
.up-viewsw button.on{background:var(--accent);border-color:var(--accent);color:#fff}
.up-viewsw button b{font-weight:700}
.up-card-bar{height:2px;background:var(--border-light);margin-top:7px}
.up-card-bar i{display:block;height:100%;background:var(--accent);transition:width .3s}

.up-badge{font-size:9px;font-weight:700;padding:1px 5px;flex-shrink:0}
.up-badge.n{background:var(--bg2);color:var(--text2)}
.up-badge.d{background:var(--accent);color:#fff}
.up-badge.s{background:var(--blue);color:#fff}
.up-badge.e{background:var(--red);color:#fff}
.up-warn{color:var(--orange);font-weight:700;margin-left:6px}
.up-dupcnt{color:var(--red);font-weight:700;margin-left:6px}

.up-detail{flex:1;display:flex;flex-direction:column;min-width:0;overflow-y:auto;padding:14px 16px}
.up-detail-empty{font-size:11px;color:var(--text3);text-align:center;padding:32px 0}
.up-dhead{display:flex;align-items:flex-start;gap:12px;padding-bottom:10px;border-bottom:1px solid var(--border);margin-bottom:12px}
.up-dhead-l{flex:1;min-width:0}
.up-dname{display:block;font-size:13px;font-weight:700;color:var(--text);text-decoration:none;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.up-dname:hover{color:var(--accent2);text-decoration:underline}
.up-dmeta{font-size:10px;color:var(--text3);margin-top:3px}
.up-split-btn{height:28px;padding:0 14px;background:var(--accent);color:#fff;border:none;font-family:inherit;font-size:11px;font-weight:600;cursor:pointer;flex-shrink:0}
.up-split-btn:hover:not(:disabled){background:var(--accent2)}
.up-split-btn:disabled{background:var(--border);color:var(--text3);cursor:default}
.up-relink-btn{height:28px;padding:0 14px;background:var(--white);color:var(--text2);border:1px solid var(--border);font-family:inherit;font-size:11px;font-weight:600;cursor:pointer;flex-shrink:0}
.up-relink-btn:hover:not(:disabled){border-color:var(--accent);color:var(--accent2)}
.up-relink-btn:disabled{color:var(--text3);cursor:default}

.up-dprog{display:flex;align-items:center;gap:8px;margin-bottom:12px}
.up-dprog-bar{flex:1;height:4px;background:var(--border-light)}
.up-dprog-bar i{display:block;height:100%;background:var(--blue);transition:width .3s}
.up-dprog span{font-size:10px;color:var(--text2);white-space:nowrap}
.up-derr{background:var(--red-bg);color:var(--red);font-size:10px;padding:8px 10px;margin-bottom:12px;white-space:pre-wrap;font-family:ui-monospace,monospace}

.up-pages{display:flex;flex-direction:column;gap:6px}
.up-page{position:relative;display:flex;gap:10px;border:1px solid var(--border-light);background:var(--white);padding:8px 10px}
.up-page.clickable{cursor:pointer}
.up-page.clickable:hover{border-color:var(--accent);background:var(--sel-bg)}
.up-page.unmatched{border-left:2px solid var(--orange);background:var(--orange-bg)}
.up-page.copy{opacity:.82}
/* Повтор: документ уже приезжал раньше — в ячейки и письма он не идёт */
.up-page.dup{border-left:2px solid var(--red);background:var(--red-bg)}
.up-page.dup .up-ptitle{text-decoration:line-through;color:var(--text3)}
.up-pdup{font-size:10px;color:var(--red);margin-top:3px;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.up-pdup a{color:var(--red);font-weight:600}
.up-pdup-keep{height:18px;padding:0 6px;background:var(--white);border:1px solid var(--border);font-family:inherit;font-size:9px;color:var(--text2);cursor:pointer}
.up-pdup-keep:hover{border-color:var(--accent);color:var(--accent2)}
.up-pdel{position:absolute;top:6px;right:6px;width:18px;height:18px;border:none;background:none;color:var(--text3);font-size:15px;line-height:1;cursor:pointer;padding:0;opacity:0}
.up-page:hover .up-pdel{opacity:1}
.up-pdel:hover{color:var(--red)}
.up-dupbar{display:flex;align-items:center;gap:10px;background:var(--red-bg);border:1px solid var(--red);padding:7px 10px;margin-bottom:8px}
.up-dupbar-txt{font-size:10.5px;color:var(--red);line-height:1.4}
.up-dupbar-btn{height:24px;padding:0 10px;background:var(--red);color:#fff;border:none;font-family:inherit;font-size:10px;font-weight:600;cursor:pointer;flex-shrink:0}
.up-dupbar-btn:hover{opacity:.85}
/* Отметка страницы для заведения в базу */
.up-applybar{display:flex;align-items:center;gap:10px;background:var(--bg);border:1px solid var(--border);padding:7px 10px;margin-bottom:8px}
.up-applyall{display:flex;align-items:center;gap:6px;font-size:10.5px;font-weight:600;color:var(--text2);cursor:pointer}
.up-applytxt{font-size:10.5px;color:var(--text3)}
.up-apply-btn{height:24px;padding:0 10px;background:var(--accent);color:#fff;border:none;font-family:inherit;font-size:10px;font-weight:600;cursor:pointer;flex-shrink:0}
.up-apply-btn:hover:not(:disabled){opacity:.85}
.up-apply-btn:disabled{background:var(--border);color:var(--text3);cursor:default}
.up-psel{display:flex;align-items:flex-start;padding-top:2px;cursor:pointer}
.up-pn{font-size:10px;font-weight:700;color:var(--text3);min-width:18px;text-align:right;padding-top:2px}
.up-pamt{color:var(--text2)}
.up-psup{font-size:9.5px;color:var(--text3);margin-top:2px}
.up-pbody{flex:1;min-width:0}
.up-ptitle-row{display:flex;align-items:center;gap:6px}
.up-ptag{font-size:8.5px;font-weight:700;padding:1px 4px;flex-shrink:0}
.up-ptag.inv{background:var(--accent);color:#fff}
.up-ptag.upd{background:var(--blue);color:#fff}
.up-ptag.act{background:var(--green-val);color:#fff}
.up-ptag.recon{background:var(--orange);color:#fff}
.up-ptag.unk{background:var(--border);color:var(--text2)}
.up-ptag.dup{background:var(--red);color:#fff}
.up-ptitle{font-size:11.5px;font-weight:600;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.up-page.clickable:hover .up-ptitle{color:var(--accent2)}
.up-pmeta{font-size:9.5px;color:var(--text3);margin-top:2px}
/* Ярлык договора: сразу видно, где номер не распознан */
.up-pdog{font-weight:600}
.up-pdog.ok{color:var(--text2)}
.up-pdog.raw{color:var(--orange)}
.up-pdog.none{color:var(--red)}
.up-pcp{display:flex;align-items:center;gap:8px;margin-top:5px}
.up-cp-ok{font-size:10.5px;color:var(--green-val);font-weight:600}
.up-cp-no{font-size:10.5px;color:var(--orange);font-weight:600}
.up-cp-btn{height:20px;padding:0 8px;background:var(--white);border:1px solid var(--border);font-family:inherit;font-size:9.5px;color:var(--text2);cursor:pointer}
.up-cp-btn:hover{border-color:var(--accent);color:var(--accent2)}
.up-pdesc{width:100%;margin-top:5px;height:24px;background:var(--bg);border:1px solid var(--border-light);padding:0 6px;font-family:inherit;font-size:11px;color:var(--text);outline:none}
.up-pdesc:focus{border-color:var(--accent);background:var(--white)}
/* На ненайденной странице в описании лежит пометка «в базе не найден» —
   её надо видеть сразу, поэтому здесь оно яркое и заметное. */
.up-page.unmatched .up-pdesc{background:var(--orange-bg);border-color:var(--orange);color:var(--orange);font-weight:600}

/* Удалённые: документ убран из работы, но лежит до ухода загрузки в архив */
.up-delbar{background:var(--bg);border:1px solid var(--border);padding:7px 10px;margin-bottom:8px;font-size:10.5px;color:var(--text2);line-height:1.45}
.up-page.gone{opacity:.75;border-left:2px solid var(--border)}
.up-page.gone .up-ptitle{text-decoration:line-through;color:var(--text3)}
.up-pgone-open{font-size:10px;color:var(--text2);align-self:center;flex-shrink:0}
.up-pgone-open:hover{color:var(--accent2)}
.up-pgone-back{height:22px;padding:0 10px;background:var(--white);border:1px solid var(--border);font-family:inherit;font-size:9.5px;font-weight:600;color:var(--text2);cursor:pointer;align-self:center;flex-shrink:0}
.up-pgone-back:hover{border-color:var(--accent);color:var(--accent2)}
/* Карточка документа: удаление и возврат — справа, подальше от «Сохранить» */
.upe-del{height:30px;padding:0 12px;background:var(--white);border:1px solid var(--red);font-family:inherit;font-size:11px;font-weight:600;color:var(--red);cursor:pointer}
.upe-del:hover{background:var(--red);color:#fff}
.upe-restore{height:30px;padding:0 12px;background:var(--white);border:1px solid var(--accent);font-family:inherit;font-size:11px;font-weight:600;color:var(--accent2);cursor:pointer}
.upe-restore:hover{background:var(--accent);color:#fff}
.upe-dup{background:var(--red-bg);border:1px solid var(--red);padding:8px 10px;margin-bottom:12px;font-size:10.5px;color:var(--red);line-height:1.5}
.upe-dup a{color:var(--red);font-weight:600;text-decoration:underline}
.upe-dup .up-pdup-keep{margin-left:6px}

.up-pick-doc{background:var(--bg);border:1px solid var(--border-light);padding:8px 10px;margin-bottom:12px}
.up-pick-t{font-size:11px;font-weight:600}
.up-pick-s{font-size:10px;color:var(--text2);margin-top:3px}
.up-pick-new{width:100%;height:28px;background:var(--white);border:1px dashed var(--border);font-family:inherit;font-size:11px;font-weight:600;color:var(--text2);cursor:pointer;margin:8px 0}
.up-pick-new:hover{border-color:var(--accent);color:var(--accent2)}
.up-was{color:var(--text3)}
/* Исходная пачка уехала на Яндекс.Диск — на сервере её больше нет */
.up-cloud{margin-left:6px;font-size:9.5px;font-weight:600;color:var(--blue);background:var(--blue-bg);padding:1px 5px}
.up-cloud.err{color:var(--red);background:var(--red-bg)}

/* ─── Отправки ────────────────────────────────────────────────── */
.up-disp-btn{height:28px;padding:0 14px;background:var(--white);color:var(--text2);border:1px solid var(--border);font-family:inherit;font-size:11px;font-weight:600;cursor:pointer;flex-shrink:0}
.up-disp-btn:hover:not(:disabled){border-color:var(--accent);color:var(--accent2)}
.up-disp-btn:disabled{color:var(--text3);cursor:default}

.up-tabs{display:flex;gap:2px;border-bottom:1px solid var(--border);margin-bottom:12px}
.up-tab{height:28px;padding:0 12px;background:none;border:none;border-bottom:2px solid transparent;font-family:inherit;font-size:11px;font-weight:600;color:var(--text3);cursor:pointer;margin-bottom:-1px}
.up-tab:hover{color:var(--text2)}
.up-tab.on{color:var(--accent2);border-bottom-color:var(--accent)}
.up-tab b{font-weight:700;margin-left:4px;color:var(--text3)}
.up-tab.on b{color:var(--accent2)}

.up-disps{display:flex;flex-direction:column;gap:8px}
.ds-card{cursor:pointer}
.ds-card.sent{border-left:2px solid var(--accent)}
.ds-card-subj{font-size:10px;color:var(--text2);margin-top:4px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

.ds-drawer{width:520px}
.ds-drawer .drawer-body{display:flex;flex-direction:column}
.ds-drawer textarea{width:100%;background:var(--bg);border:1px solid var(--border);padding:8px 10px;font-family:inherit;font-size:11.5px;line-height:1.5;color:var(--text);outline:none;resize:vertical}
.ds-drawer textarea:focus{border-color:var(--accent);background:var(--white)}
.ds-drawer input[type=text]{width:100%;height:32px;background:var(--bg);border:1px solid var(--border);padding:0 10px;font-family:inherit;font-size:12px;outline:none}
.ds-drawer input[type=text]:focus{border-color:var(--accent);background:var(--white)}

.ds-hint{font-size:10px;color:var(--text3);margin-top:4px}
.ds-hint.warn{color:var(--orange)}
.ds-hint.ok{color:var(--green-val)}
/* Карточка документа: период, строка контрагента */
.upe-period{display:flex;gap:6px}
.upe-period select{flex:1}
.upe-period input{width:72px}
.upe-cp{display:flex;align-items:center;gap:8px}
.upe-cp-name{flex:1;font-size:11.5px;font-weight:600;color:var(--green-val)}
.upe-cp-name.none{color:var(--orange)}
.ds-save{display:flex;align-items:center;gap:6px;margin-top:8px;font-size:10.5px;color:var(--text2);cursor:pointer;background:var(--sel-bg);border:1px solid var(--sel-border);padding:6px 8px}
.ds-save input{cursor:pointer}
.ds-sent{background:var(--accent-light);color:var(--green-dark);font-size:10.5px;font-weight:600;padding:8px 10px;margin-bottom:12px;border:1px solid rgba(122,158,126,.3)}
.ds-count{font-weight:400;color:var(--text3)}

.ds-files{display:flex;flex-direction:column;gap:4px;margin-bottom:8px}
.ds-file{display:flex;align-items:center;gap:8px;background:var(--bg);border:1px solid var(--border-light);padding:6px 8px}
.ds-file.extra{background:var(--blue-bg);border-color:rgba(90,126,166,.25)}
.ds-file-n{flex:1;font-size:10.5px;color:var(--text);text-decoration:none;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ds-file-n:hover{color:var(--accent2);text-decoration:underline}
.ds-file-t{font-size:8.5px;font-weight:700;color:var(--blue);flex-shrink:0}
.ds-file-x{width:16px;height:16px;border:none;background:none;color:var(--text3);font-size:14px;line-height:1;cursor:pointer;padding:0;flex-shrink:0}
.ds-file-x:hover{color:var(--red)}
.ds-add{width:100%;height:28px;background:var(--white);border:1px dashed var(--border);font-family:inherit;font-size:11px;font-weight:600;color:var(--text2);cursor:pointer}
.ds-add:hover{border-color:var(--accent);color:var(--accent2)}

/* Отправка через WhatsApp: открыть чат и скачать вложения архивом */
.ds-wa{margin-top:14px;padding:10px;background:var(--bg);border:1px solid var(--border-light)}
.ds-wa-row{display:flex;gap:8px}
.ds-wa-btn{display:flex;align-items:center;gap:6px;height:30px;padding:0 12px;background:#25d366;border:none;font-family:inherit;font-size:11px;font-weight:600;color:#fff;cursor:pointer}
.ds-wa-btn:hover:not(:disabled){background:#1eb85a}
.ds-wa-btn:disabled{background:var(--border);color:var(--text3);cursor:default}
.ds-wa-dl{height:30px;padding:0 12px;background:var(--white);border:1px solid var(--border);font-family:inherit;font-size:11px;font-weight:600;color:var(--text2);cursor:pointer}
.ds-wa-dl:hover{border-color:var(--accent);color:var(--accent2)}
/* Отмена отправки — тем же чипом, но красным акцентом на наведение */
.ds-mark.cancel:hover{border-color:var(--red);color:var(--red)}

.ds-foot{display:flex;align-items:center;gap:8px;padding:12px 18px;border-top:1px solid var(--border);flex-shrink:0}
.ds-foot .fill{flex:1}
.ds-mark{height:30px;padding:0 12px;background:var(--white);border:1px solid var(--border);font-family:inherit;font-size:11px;color:var(--text2);cursor:pointer}
.ds-mark:hover{border-color:var(--accent);color:var(--accent2)}
.ds-save-btn{height:30px;padding:0 14px;background:var(--white);border:1px solid var(--border);font-family:inherit;font-size:11px;font-weight:600;color:var(--text2);cursor:pointer}
.ds-save-btn:hover{border-color:var(--accent);color:var(--accent2)}
.ds-send{height:30px;padding:0 16px;background:var(--accent);color:#fff;border:none;font-family:inherit;font-size:11px;font-weight:600;cursor:pointer}
.ds-send:hover:not(:disabled){background:var(--accent2)}
.ds-send:disabled{background:var(--border);color:var(--text3);cursor:default}
.ds-send.off{background:var(--text3)}

/* ─── Настройки почты и пакетная отправка ─────────────────────── */
.es-open{display:flex;align-items:center;gap:6px;height:26px;padding:0 10px;background:var(--white);border:1px solid var(--border);font-family:inherit;font-size:11px;color:var(--text2);cursor:pointer}
.es-open:hover{border-color:var(--accent);color:var(--accent2)}
.es-open svg{width:13px;height:13px}
.es-open #esState.warn{color:var(--orange);font-weight:600}
.es-open #esState.test{color:var(--blue);font-weight:600}
.es-ok{background:var(--accent-light);color:var(--green-dark);font-size:10.5px;font-weight:600;padding:8px 10px;margin-bottom:12px;border:1px solid rgba(122,158,126,.3)}
.es-meta{font-size:10px;color:var(--text3);margin-top:4px}
.es-test-row{display:flex;gap:6px}
.es-test-row input{flex:1}
.es-test-mode{background:var(--blue-bg);border:1px solid rgba(90,126,166,.25);padding:8px 10px}
#esDrawer select{width:100%;height:32px;background:var(--bg);border:1px solid var(--border);padding:0 8px;font-family:inherit;font-size:12px;outline:none}
#esDrawer select:focus{border-color:var(--accent)}
#esDrawer input[type=text],#esDrawer input[type=password]{width:100%;height:32px;background:var(--bg);border:1px solid var(--border);padding:0 10px;font-family:inherit;font-size:12px;outline:none}
#esDrawer input[type=text]:focus,#esDrawer input[type=password]:focus{border-color:var(--accent);background:var(--white)}
.up-tabs .fill{flex:1}
.up-sendall{height:24px;padding:0 12px;margin-bottom:2px;background:var(--accent);color:#fff;border:none;font-family:inherit;font-size:10.5px;font-weight:600;cursor:pointer}
.up-sendall:hover{background:var(--accent2)}
.es-check{display:flex;align-items:flex-start;gap:7px;font-size:11px;font-weight:400;text-transform:none;letter-spacing:0;color:var(--text);cursor:pointer}
.es-check input{margin-top:1px;cursor:pointer;flex-shrink:0}
.es-check b{font-weight:600}
/* Адрес ящика в подписи чекбокса — как введён, а не капсом от .form-group label. */
.es-check,.es-check b,.es-check span{text-transform:none}
/* Ответ почтового сервера — многострочный; без этого схлопнется в одну строку. */
#esErr,#dsErr{white-space:pre-wrap;line-height:1.45}

/* ─── Drawer месяца: три денежных поля в строку ──────────────────── */
.mc-money{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:14px}
.mc-money-f{display:flex;flex-direction:column;gap:4px;min-width:0}
.mc-money-f label{font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.3px;color:var(--text3)}
.mc-money-in{height:36px;background:var(--bg);border:1px solid var(--border);padding:0 9px;font-family:inherit;font-size:14px;font-weight:600;text-align:right;font-variant-numeric:tabular-nums;color:var(--text);outline:none;min-width:0}
.mc-money-in:focus{border-color:var(--accent);background:var(--white)}
.mc-money-in.paid{color:var(--green-dark)}
.mc-money-in.debt{background:var(--red-bg);border-color:var(--red);color:var(--red);cursor:default}
/* Долг закрыт — фон нейтральный; переплата не долг, поэтому зелёная. */
.mc-money-in.debt.none{background:var(--bg2);border-color:var(--border);color:var(--text3)}
.mc-money-in.debt.over{background:var(--paid-bg);border-color:var(--accent2);color:var(--green-dark)}
.mc-money-f.has-error .mc-money-in{border-color:var(--red)}

/* ─── Проводки по оплате в ячейке ─────────────────────────────────── */
/* Мелкий плотный список: в ячейке он идёт довеском к суммам и не должен
   оттеснять вниз ни примечание, ни кнопки. */
.mc-pay{border:1px solid var(--border-light);background:var(--white);padding:8px 10px 9px;margin-bottom:14px}
.mc-pay-head{display:flex;align-items:center;gap:6px;margin-bottom:6px}
.mc-pay-title{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.3px;color:var(--text3)}
.mc-pay-count{font-size:10px;font-weight:700;color:var(--text3);background:var(--bg2);padding:0 5px}
.mc-pay-all{background:none;border:none;padding:0;font-family:inherit;font-size:10.5px;font-weight:600;color:var(--accent2);cursor:pointer}
.mc-pay-all:hover{text-decoration:underline}
.mc-pay-empty{font-size:10.5px;color:var(--text3)}
table.mc-pay-tbl{width:100%;border-collapse:collapse;font-size:10.5px}
table.mc-pay-tbl th{text-align:left;font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:.3px;color:var(--text3);padding:0 6px 3px 0;border-bottom:1px solid var(--border-light)}
table.mc-pay-tbl td{padding:3px 6px 3px 0;border-bottom:1px solid var(--border-light);white-space:nowrap}
table.mc-pay-tbl tr:last-child td{border-bottom:none}
table.mc-pay-tbl th:last-child,table.mc-pay-tbl td:last-child{padding-right:0}
table.mc-pay-tbl th:nth-child(2),table.mc-pay-tbl th:nth-child(3),
table.mc-pay-tbl td.money{text-align:right;font-variant-numeric:tabular-nums;font-weight:600}
table.mc-pay-tbl td.money.debt{color:var(--red)}
table.mc-pay-tbl td.money.over{color:var(--green-dark)}
table.mc-pay-tbl td.money.none{color:var(--text3);font-weight:400}
table.mc-pay-tbl td.who{color:var(--text2);font-weight:400;white-space:normal}
/* В отдельном drawer'е места больше — там же и шрифт покрупнее. */
table.mc-pay-tbl.full{font-size:11.5px}
table.mc-pay-tbl.full td{padding:5px 8px 5px 0}
.mc-pay-sum{font-size:11px;color:var(--text2);margin-bottom:10px}

/* ─── Цвет ячейки: по факту, а не по этапам ──────────────────────── */
/* Белая — счёт ещё не выставлен. */
.cc.plain{background:var(--white)}
.cc.plain .cv{color:var(--text2)}
/* Красная — счёт есть, долг остался. */
.cc.red{background:var(--red-bg)}
.cc.red .cv,.cc.red .cv.due{color:var(--red)}
/* Зелёная — оплачено полностью. */
.cc.paid{background:var(--paid-bg)}
.cc.paid .cv,.cc.paid .cv.due{color:var(--green-dark)}
.cc-rest{position:absolute;bottom:2px;right:4px;font-size:8px;font-weight:600;color:var(--red);font-variant-numeric:tabular-nums}

/* ─── Месяц = реестр на выставление счетов ───────────────────────── */
.mo-app{display:flex;height:100vh;overflow:hidden}
.mo-side{width:230px;min-width:230px;background:var(--white);border-right:1px solid var(--border);display:flex;flex-direction:column}
.mo-side-head{padding:12px 14px;border-bottom:1px solid var(--border)}
.mo-back{font-size:11px;color:var(--text2);text-decoration:none;font-weight:600}
.mo-back:hover{color:var(--accent2)}
.mo-side-title{margin-top:8px;font-size:9.5px;font-weight:700;text-transform:uppercase;letter-spacing:.4px;color:var(--text3)}
.mo-uks{flex:1;overflow-y:auto;padding:4px}
.mo-uks::-webkit-scrollbar{width:4px}
.mo-uks::-webkit-scrollbar-thumb{background:var(--border)}
.mo-uk{display:flex;align-items:center;gap:6px;padding:6px 9px;text-decoration:none;color:var(--text2);font-size:11px;border-left:2px solid transparent}
.mo-uk:hover{background:var(--bg2);color:var(--text)}
.mo-uk.on{background:var(--accent-pale);border-left-color:var(--accent);color:var(--accent2);font-weight:600}
.mo-uk-name{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mo-uk-cnt{font-size:9.5px;font-weight:600;color:var(--text3);background:var(--bg2);padding:1px 5px;min-width:20px;text-align:center}
.mo-uk.on .mo-uk-cnt{background:var(--white);color:var(--accent2)}

.mo-main{flex:1;display:flex;flex-direction:column;min-width:0}
.mo-top{height:46px;min-height:46px;background:var(--white);border-bottom:1px solid var(--border);display:flex;align-items:center;gap:10px;padding:0 14px}
.mo-top h1{font-size:16px;font-weight:700;margin:0;white-space:nowrap}
.mo-nav{width:22px;height:22px;display:flex;align-items:center;justify-content:center;background:var(--bg);border:1px solid var(--border);color:var(--text2);text-decoration:none;font-size:14px;line-height:1;flex-shrink:0}
.mo-nav:hover{border-color:var(--accent);color:var(--accent2)}
.mo-scope{font-size:11px;color:var(--text3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:280px}
.mo-fill{flex:1}
.mo-search input{height:26px;width:210px;background:var(--bg);border:1px solid var(--border-light);padding:0 8px;font-family:inherit;font-size:11px;outline:none}
.mo-search input:focus{border-color:var(--accent)}

.mo-bar{display:flex;align-items:center;gap:7px;padding:8px 14px;background:var(--bg2);border-bottom:1px solid var(--border);flex-wrap:wrap}
.mo-btn{height:28px;padding:0 12px;background:var(--white);color:var(--text2);border:1px solid var(--border);font-family:inherit;font-size:11px;font-weight:600;cursor:pointer;white-space:nowrap}
.mo-btn:hover:not(:disabled){border-color:var(--accent);color:var(--accent2)}
.mo-btn.primary{background:var(--accent);color:#fff;border-color:var(--accent)}
.mo-btn.primary:hover:not(:disabled){background:var(--accent2)}
.mo-btn.save{background:#2e7d4f;color:#fff;border-color:transparent}
.mo-btn:disabled{background:var(--border-light);color:var(--text3);border-color:var(--border-light);cursor:default}
.mo-selinfo{font-size:10.5px;color:var(--text2);font-weight:600}

.mo-msg{padding:7px 14px;font-size:11px;background:var(--bg2);border-bottom:1px solid var(--border)}
.mo-msg.ok{background:var(--paid-bg);color:var(--green-dark)}
.mo-msg.err{background:var(--red-bg);color:var(--red)}

.mo-table{flex:1;overflow-y:auto;background:var(--white)}
.mo-table::-webkit-scrollbar{width:5px}
.mo-table::-webkit-scrollbar-thumb{background:var(--border)}
.mo-row{display:grid;grid-template-columns:34px 150px 1fr 105px 120px 190px 110px 100px 170px;align-items:center;gap:8px;padding:5px 12px;border-bottom:1px solid var(--border-light);font-size:11.5px}
.mo-row.mo-header{background:var(--bg2);font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:.3px;color:var(--text3);position:sticky;top:0;z-index:2;padding-top:6px;padding-bottom:6px;line-height:1.25}
.mo-row.mo-header span{font-weight:400;text-transform:none;letter-spacing:0}
.mo-row.paid{background:var(--paid-bg)}
.mo-row:hover:not(.mo-header){background:var(--accent-pale)}
.mo-c-star{display:flex;justify-content:center}
.mo-star,.mo-star-all{width:20px;height:20px;background:none;border:none;color:var(--border);font-size:14px;line-height:1;cursor:pointer;padding:0}
.mo-star:hover,.mo-star-all:hover{color:#d4a72c}
.mo-star.on,.mo-star-all.on{color:#d4a72c}
.mo-c-num a{font-weight:600;color:var(--text);text-decoration:none;font-variant-numeric:tabular-nums}
.mo-c-num a:hover{color:var(--accent2)}
.mo-dates{display:block;font-size:9px;color:var(--text3);margin-top:1px}
.mo-c-cp{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mo-uk-tag{display:block;font-size:9px;color:var(--text3);margin-top:1px}
.mo-c-permonth{text-align:right;font-size:10.5px;color:var(--text2);font-variant-numeric:tabular-nums}
.mo-c-amt,.mo-c-paid{text-align:right}
.mo-c-debt{text-align:right}
.mo-in{width:100%;height:26px;background:var(--bg);border:1px solid var(--border-light);padding:0 6px;font-family:inherit;font-size:11.5px;font-variant-numeric:tabular-nums;outline:none}
.mo-in.amt,.mo-in.paid{text-align:right;font-weight:600}
.mo-in.amt{color:var(--red)}
.mo-in.paid{color:var(--green-dark)}
.mo-in.notes{font-size:10.5px;color:var(--text2)}
.mo-in:focus{border-color:var(--accent);background:var(--white)}
.mo-fixed{font-size:11.5px;font-weight:600;color:var(--green-dark);font-variant-numeric:tabular-nums}
.mo-debt-v{font-size:11.5px;font-weight:600;font-variant-numeric:tabular-nums;color:var(--text3)}
.mo-debt-v.has{color:var(--red)}
.mo-debt-v.over{color:var(--green-dark)}
.mo-c-inv{display:flex;align-items:center;gap:5px;min-width:0}
.mo-inv{font-size:10px;font-weight:600;color:var(--blue);text-decoration:none;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mo-inv:hover{text-decoration:underline}
.mo-inv-none{color:var(--text3)}
.mo-badge{font-size:8px;font-weight:700;text-transform:uppercase;padding:1px 4px;border:1px solid;flex-shrink:0}
.mo-badge.sent{background:#faf3cf;border-color:#c4b44a;color:#8a7a30}
.mo-empty{padding:28px;text-align:center;color:var(--text3);font-size:12px}

.mo-foot{display:flex;align-items:center;gap:14px;padding:9px 14px;font-size:11.5px;background:var(--white);border-top:2px solid var(--accent);flex-wrap:wrap;flex-shrink:0}
.mo-foot b{font-variant-numeric:tabular-nums}
.mo-foot-paid{color:var(--green-dark)}
.mo-foot-debt{color:var(--red)}
.mo-sep{width:1px;height:14px;background:var(--border)}
.mo-hint{font-size:9.5px;color:var(--text3)}
.mo-attach{margin:14px 0;padding:10px;background:var(--bg2);border:1px solid var(--border-light)}
.mo-attach-t{font-size:9.5px;font-weight:700;text-transform:uppercase;letter-spacing:.3px;color:var(--text3);margin-bottom:5px}
.mo-attach-f{font-size:11px;color:var(--text2)}
.mo-attach-warn{margin-top:6px;font-size:10.5px;color:var(--red);font-weight:600}

/* ─── Инструкция ─────────────────────────────────────────────────── */
/* Собрана на переменных приложения: страница должна читаться как его
   часть, а не как вставленный со стороны документ. */
.doc-scroll{flex:1;overflow:auto;background:var(--bg)}
.doc-scroll::-webkit-scrollbar{width:4px;height:4px}
.doc-scroll::-webkit-scrollbar-thumb{background:var(--border)}
.doc{max-width:1060px;margin:0 auto;padding:0 28px 72px;display:grid;grid-template-columns:196px minmax(0,1fr);gap:40px;align-items:start}

.doc-nav{position:sticky;top:0;padding:34px 0 0;display:flex;flex-direction:column;gap:1px}
.doc-nav a{padding:5px 0 5px 12px;border-left:2px solid var(--border);font-size:11.5px;line-height:1.35;color:var(--text3);text-decoration:none}
.doc-nav a:hover{color:var(--text)}
.doc-nav a.on{color:var(--accent2);border-left-color:var(--accent);font-weight:700}
.doc-nav-gap{height:12px}

.doc-body{padding:34px 0 0;min-width:0}
.doc-head{padding-bottom:18px;border-bottom:2px solid var(--text)}
.doc-head h2{font-size:26px;font-weight:700;letter-spacing:-.01em;margin:0 0 10px;line-height:1.15}
.doc-lead{font-size:14px;line-height:1.6;color:var(--text2);max-width:60ch;margin:0}

/* Маршрут: семь шагов одной полосой — видно весь путь до чтения */
/* flex, а не grid: при переносе последний ряд растягивается, а не оставляет
   пустую серую ячейку — семь шагов на шесть колонок не делятся. */
.doc-route{display:flex;flex-wrap:wrap;gap:1px;background:var(--border-light);border:1px solid var(--border-light);margin:22px 0 0}
.doc-route a{flex:1 1 92px;background:var(--white);padding:11px 12px 13px;text-decoration:none;color:inherit}
.doc-route a:hover{background:var(--accent-pale)}
.doc-route i{display:block;font-style:normal;font-size:9.5px;font-weight:700;color:var(--accent2);margin-bottom:4px;letter-spacing:.08em}
.doc-route b{display:block;font-size:11.5px;font-weight:600;line-height:1.3}

.doc-sec{margin-top:44px;scroll-margin-top:16px}
.doc-sh{display:flex;align-items:baseline;gap:12px;padding-bottom:9px;border-bottom:1px solid var(--border);margin-bottom:16px}
.doc-n{font-size:22px;font-weight:300;color:var(--accent);font-variant-numeric:tabular-nums;line-height:1}
.doc-sh h3{font-size:18px;font-weight:700;letter-spacing:-.01em;margin:0;line-height:1.25}
.doc-body h4{font-size:12.5px;font-weight:700;margin:22px 0 7px}
.doc-body p{font-size:13px;line-height:1.65;margin:0 0 11px;max-width:64ch;color:var(--text)}
.doc-body ul{font-size:13px;line-height:1.6;margin:0 0 13px;padding-left:20px;max-width:64ch}
.doc-body li{margin-bottom:5px}
.doc-body li::marker{color:var(--text3)}
.doc-body b{font-weight:700}

/* Названия кнопок выглядят кнопками: инструкция вся про то, что нажать */
.doc-body .k{display:inline-block;background:var(--white);border:1px solid var(--border);padding:0 5px;font-size:11.5px;font-weight:600;white-space:nowrap;box-shadow:0 1px 0 var(--border-light)}
.doc-body .k.go{background:var(--accent-light);border-color:var(--accent);color:var(--accent2)}
.doc-body .k.warn{background:var(--red-bg);border-color:var(--red);color:var(--red)}
/* Текст, который оператор видит на экране, а не нажимает */
.doc-body .scr{font-size:12px;color:var(--text2);background:var(--bg2);padding:0 4px}

.doc-note{border-left:3px solid var(--accent);background:var(--accent-pale);padding:11px 14px;margin:0 0 14px;max-width:64ch}
.doc-note.caution{border-left-color:var(--orange);background:var(--orange-bg)}
.doc-note.danger{border-left-color:var(--red);background:var(--red-bg)}
.doc-note p{margin:0 0 6px;font-size:12.5px}
.doc-note p:last-child{margin:0}
.doc-note .lbl{display:block;font-size:9.5px;font-weight:700;text-transform:uppercase;letter-spacing:.09em;color:var(--accent2);margin-bottom:5px}
.doc-note.caution .lbl{color:var(--orange)}
.doc-note.danger .lbl{color:var(--red)}

/* Дословная цитата того, что показывает система */
.doc-quote{background:var(--bg2);border:1px solid var(--border);padding:10px 13px;margin:0 0 14px;max-width:64ch;font-size:12.5px;line-height:1.5}
.doc-quote b{color:var(--red);font-weight:700}

.doc-tbl{overflow-x:auto;margin:0 0 14px;max-width:64ch}
.doc-tbl table{border-collapse:collapse;width:100%;font-size:12.5px;min-width:320px}
.doc-tbl th{text-align:left;font-size:9.5px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--text3);padding:0 12px 6px 0;border-bottom:1px solid var(--border)}
.doc-tbl td{padding:8px 12px 8px 0;border-bottom:1px solid var(--border-light);vertical-align:top}
.doc-tbl tr:last-child td{border-bottom:none}
.doc-tbl th:last-child,.doc-tbl td:last-child{padding-right:0}
.doc-tbl .sw{display:inline-block;width:11px;height:11px;border:1px solid var(--border);vertical-align:-1px;margin-right:7px}

.doc-fix{border-top:1px solid var(--border-light);padding:13px 0;max-width:64ch}
.doc-fix:first-of-type{border-top:none;padding-top:0}
.doc-fix h4{margin:0 0 4px}
.doc-fix p{margin:0;color:var(--text2)}

.doc-foot{margin-top:36px;padding-top:16px;border-top:1px solid var(--border);font-size:11.5px;line-height:1.6;color:var(--text3);max-width:64ch}

@media (max-width:1000px){
  .doc{grid-template-columns:minmax(0,1fr);gap:0;padding:0 20px 56px}
  .doc-nav{position:static;flex-direction:row;flex-wrap:wrap;gap:5px;padding-top:26px}
  .doc-nav a{border-left:none;border:1px solid var(--border);padding:4px 9px;font-size:11px}
  .doc-nav a.on{border-color:var(--accent)}
  .doc-nav-gap{display:none}
  .doc-body{padding-top:26px}
}

/* Печать инструкции: оператору нужен лист на стену или PDF в письмо.
   Прячем всё, что относится к экрану, — меню, оглавление, шапку раздела. */
@media print{
  /* Экранная раскладка держит всё внутри одного экрана: html/body по 100%
     с overflow:hidden, .app на 100vh, прокрутка внутри .doc-scroll. На печати
     это обрезало документ до одной страницы — снимаем ограничения по высоте. */
  html, body{height:auto !important;overflow:visible !important}
  .side, .page-top, .doc-nav{display:none !important}
  .app, .main, .page, .doc-scroll{display:block !important;overflow:visible !important;height:auto !important;max-height:none !important;flex:none !important}
  .doc{display:block;max-width:none;padding:0}
  .doc-body{padding:0}
  .doc-sec{page-break-inside:avoid;margin-top:26px}
  .doc-note, .doc-quote, .doc-tbl, .doc-fix{page-break-inside:avoid}
  .doc-route{page-break-after:avoid}
  .doc-body p, .doc-body ul{max-width:none}
  /* Цветные плашки на чёрно-белом принтере сливаются — оставляем рамку */
  .doc-note{background:none !important;border:1px solid #999;border-left-width:3px}
  .doc-body .k{box-shadow:none}
  body{background:#fff}
}

/* ─── Раздел «Загрузка оплат» ─────────────────────────────────────── */
/* Раскладка и плашки те же, что у загрузки счетов, — а гамма другая:
   оператор работает в двух похожих разделах подряд и должен видеть, в каком
   он сейчас. Меняем не каждое правило, а сами переменные: всё, что внутри
   раздела красится акцентом, синеет разом. */
.pay-sec{
  --accent:#5a7ea6;--accent2:#48688a;
  --accent-light:#e4edf5;--accent-pale:#f0f5fa;
  --green-dark:#3f6285;--green-val:#4a6c90;
  --paid-bg:rgba(90,126,166,.18);--charge-bg:rgba(90,126,166,.09);
  background:linear-gradient(var(--accent-pale),var(--bg) 220px);
}
.pay-sec .page-top{background:var(--accent-pale);border-bottom-color:#c9d6e3}
.pay-kind{
  font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;
  color:var(--accent2);background:var(--accent-light);padding:2px 7px;margin-left:2px;
}

.pay-card-wait{font-size:9px;font-weight:700;color:var(--orange);background:var(--orange-bg);padding:0 5px;margin-left:6px}
.pay-card-done{font-size:9px;font-weight:700;color:var(--accent2);background:var(--accent-light);padding:0 5px;margin-left:6px}

.pay-docs{flex:1;overflow:auto;padding:0 14px 14px}
table.pay-tbl{width:100%;border-collapse:collapse;font-size:11px}
table.pay-tbl th{
  position:sticky;top:0;z-index:2;background:var(--white);text-align:left;
  padding:7px 8px;font-size:9px;font-weight:700;text-transform:uppercase;
  letter-spacing:.4px;color:var(--text3);border-bottom:1px solid var(--border);
}
table.pay-tbl td{padding:7px 8px;border-bottom:1px solid var(--border-light);vertical-align:top}
table.pay-tbl tr:hover td{background:rgba(90,126,166,.04)}
table.pay-tbl tr.done td{background:rgba(90,126,166,.07)}
table.pay-tbl tr.dup td{background:var(--bg2);color:var(--text3)}
.pay-tbl .c{width:26px}
.pay-tbl .num{text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums;font-weight:600}
.pay-tbl .act{width:1%;white-space:nowrap;text-align:right}
.pay-tbl b{font-weight:700}
.pay-sub{display:block;font-size:9.5px;color:var(--text3);font-weight:400;line-height:1.4}
.pay-sub.warn{color:var(--red)}
.pay-open{display:inline-block;margin-top:2px;font-size:9.5px;color:var(--accent2);font-weight:600}
.pay-open:hover{text-decoration:underline}

.pay-state{display:inline-block;font-size:9px;font-weight:700;padding:1px 6px;text-transform:uppercase;letter-spacing:.3px}
.pay-state.ok{background:var(--accent-light);color:var(--accent2)}
.pay-state.warn{background:var(--orange-bg);color:var(--orange)}
.pay-state.none{background:var(--red-bg);color:var(--red)}
.pay-state.done{background:rgba(122,158,126,.2);color:var(--green-dark)}
.pay-state.dup{background:var(--bg2);color:var(--text3)}
.pay-charge{margin-top:4px;font-weight:600}
.pay-note{margin-top:3px;font-size:9.5px;color:var(--text2);line-height:1.4;max-width:46ch}
.pay-cands{display:flex;flex-wrap:wrap;gap:4px;margin-top:5px}
.pay-cand{
  background:var(--bg);border:1px solid var(--border);padding:2px 7px;
  font-family:inherit;font-size:9.5px;font-weight:600;color:var(--text2);cursor:pointer;
}
.pay-cand:hover{background:var(--accent-light);border-color:var(--accent);color:var(--accent2)}
.pay-act{
  display:inline-block;margin-left:5px;background:var(--bg);border:1px solid var(--border);
  padding:3px 8px;font-family:inherit;font-size:10px;font-weight:600;color:var(--text2);cursor:pointer;
}
.pay-act:hover{background:var(--accent-light);border-color:var(--accent);color:var(--accent2)}
.pay-act.warn:hover{background:var(--red-bg);border-color:var(--red);color:var(--red)}