@font-face {
  font-family: "PT Sans";
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  src: local("PT Sans"), url("/assets/fonts/pt-sans-web-regular.woff2") format("woff2");
}

@font-face {
  font-family: "PT Sans";
  font-weight: 700;
  font-style: normal;
  font-display: swap;
  src: local("PT Sans Bold"), url("/assets/fonts/pt-sans-web-bold.woff2") format("woff2");
}

:root {
  color-scheme: light;
  --ink: #17191d;
  --muted: #727780;
  --line: #e3e5e8;
  --soft: #f6f7f8;
  --surface: #ffffff;
  --yellow: #ffd21a;
  --yellow-deep: #e4b600;
  --success: #218446;
  --danger: #b42318;
  font-family: "PT Sans", Arial, sans-serif;
  font-synthesis: none;
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; background: var(--soft); color: var(--ink); }
body { min-width: 320px; }
button, input, select, textarea { font: inherit; }
button { cursor: pointer; }
button:disabled { cursor: wait; opacity: .56; }
.logo-dark { display: none; }
.boot-loader { min-height: 100vh; display: grid; place-items: center; color: var(--muted); }

.primary {
  border: 1px solid var(--yellow-deep);
  border-radius: 9px;
  padding: 11px 16px;
  background: var(--yellow);
  color: #161616;
  font-weight: 750;
  box-shadow: 0 1px 0 #fff7 inset;
}
.primary:hover:not(:disabled) { background: #ffda3d; }
.secondary {
  border: 1px solid #cfd2d7;
  border-radius: 9px;
  padding: 11px 16px;
  background: var(--surface);
  color: var(--ink);
  font-weight: 700;
}
.secondary:hover { border-color: #d2aa00; background: #fffdf3; }

.login-page {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 28px;
  background:
    radial-gradient(circle at 20% 20%, #ffd21a26 0 140px, transparent 141px),
    radial-gradient(circle at 85% 78%, #ffd21a1f 0 190px, transparent 191px),
    #111216;
}
.login-card {
  width: min(430px, 100%);
  padding: 38px;
  border: 1px solid #ffffff1c;
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 30px 80px #0008;
}
.login-logo { width: 108px; height: auto; display: block; margin-bottom: 24px; }
.login-card h1 { margin: 13px 0 8px; font-size: 28px; letter-spacing: -.03em; }
.login-card > p { margin: 0 0 25px; color: var(--muted); }
.service-label { display: inline-flex; padding: 6px 10px; border-radius: 999px; background: #fff2b3; font-size: 12px; font-weight: 800; }
.login-card form, .employee-form, .product-form { display: grid; gap: 17px; }
.login-card label, .employee-form > label { display: grid; gap: 8px; font-size: 13px; font-weight: 650; }
.login-card input, .employee-form input, .employee-form select, .product-form input, .product-form select {
  width: 100%;
  border: 1px solid #cfd2d7;
  border-radius: 9px;
  padding: 12px 13px;
  background: #fff;
  color: var(--ink);
  outline: none;
}
.login-card input:focus, .employee-form input:focus, .employee-form select:focus, .product-form input:focus, .product-form select:focus { border-color: #d6a900; box-shadow: 0 0 0 3px #ffd21a33; }
.password-field { position: relative; }
.password-field input { padding-right: 92px; }
.show-password { position: absolute; right: 8px; top: 50%; translate: 0 -50%; border: 0; padding: 7px; background: transparent; color: #696d74; font-size: 12px; }
.login-submit { width: 100%; margin-top: 4px; padding: 13px; }
.login-security { display: block; margin-top: 20px; text-align: center; color: #878b93; }
.notice.error, .dialog-error { border: 1px solid #e9aaa5; border-radius: 8px; padding: 11px 12px; background: #fff2f1; color: var(--danger); font-size: 13px; }

.app-shell { min-height: 100vh; display: grid; grid-template-columns: 230px minmax(0, 1fr); }
.app-sidebar {
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  flex-direction: column;
  background: #17181b;
  color: #fff;
  border-right: 1px solid #000;
}
.brand-block { height: 83px; display: flex; align-items: center; gap: 13px; padding: 0 22px; border-bottom: 1px solid #ffffff13; }
.brand-block img { width: 82px; }
.brand-block span { padding-left: 12px; border-left: 1px solid #ffffff2d; color: var(--yellow); font-size: 13px; font-weight: 800; letter-spacing: .04em; }
.app-sidebar nav { display: grid; gap: 6px; padding: 20px 12px; }
.app-sidebar nav button { display: flex; align-items: center; gap: 12px; width: 100%; border: 0; border-radius: 9px; padding: 12px 13px; background: transparent; color: #c9cbd0; text-align: left; }
.app-sidebar nav button:hover { color: #fff; background: #ffffff0c; }
.app-sidebar nav button.active { background: var(--yellow); color: #151515; font-weight: 750; }
.sidebar-account { margin-top: auto; display: grid; gap: 6px; padding: 18px; border-top: 1px solid #ffffff13; }
.sidebar-account span { color: #969aa2; font-size: 11px; }
.sidebar-account b { overflow: hidden; text-overflow: ellipsis; font-size: 12px; }
.sidebar-account button { justify-self: start; border: 0; padding: 5px 0; background: transparent; color: var(--yellow); font-size: 12px; }

.app-main { min-width: 0; padding: 30px clamp(20px, 3vw, 44px) 50px; }
#page { max-width: 1700px; margin: 0 auto; }
.catalog-tabs { display: flex; gap: 28px; margin-bottom: 26px; border-bottom: 1px solid var(--line); overflow-x: auto; }
.catalog-tabs button { flex: 0 0 auto; border: 0; border-bottom: 3px solid transparent; padding: 4px 1px 13px; background: transparent; color: #696e76; font-weight: 700; }
.catalog-tabs button:hover { color: var(--ink); }
.catalog-tabs button.active { border-bottom-color: var(--yellow-deep); color: var(--ink); }
.catalog-tabs button span { display: inline-grid; place-items: center; min-width: 22px; margin-left: 5px; border-radius: 999px; padding: 2px 6px; background: var(--soft); color: var(--muted); font-size: 10px; }
.page-header { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 24px; }
.eyebrow { color: #9a7600; font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.page-header h1 { margin: 5px 0 5px; font-size: 30px; letter-spacing: -.035em; }
.page-header p { margin: 0; color: var(--muted); }
.sync-button { display: flex; align-items: center; gap: 8px; white-space: nowrap; }
.sync-button span { font-size: 18px; }
.page-actions { display: flex; align-items: center; gap: 10px; }
.placeholder-card { min-height: 260px; display: grid; place-content: center; gap: 8px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); color: var(--muted); text-align: center; box-shadow: 0 2px 7px #16161608; }
.placeholder-card b { color: var(--ink); font-size: 18px; }

.summary-strip { display: grid; grid-template-columns: 170px minmax(230px, .7fr) minmax(300px, 1.4fr); gap: 0; margin-bottom: 18px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); overflow: hidden; }
.summary-strip > div { padding: 15px 18px; border-right: 1px solid var(--line); }
.summary-strip > div span, .summary-strip > div b { display: block; }
.summary-strip > div span { margin-bottom: 5px; color: var(--muted); font-size: 11px; }
.summary-strip > div b { font-size: 15px; }
.search-box { display: flex; align-items: center; gap: 9px; padding: 10px 15px; }
.search-box span { color: #999; font-size: 24px; }
.search-box input { width: 100%; border: 0; padding: 8px 0; background: transparent; color: inherit; outline: none; }

.catalog-layout { display: grid; grid-template-columns: 230px minmax(0, 1fr); gap: 18px; align-items: start; }
.category-panel, .product-panel, .employees-card { border: 1px solid var(--line); border-radius: 12px; background: var(--surface); box-shadow: 0 2px 7px #16161608; overflow: hidden; }
.category-panel { max-height: calc(100vh - 220px); overflow: auto; }
.category-heading { position: sticky; top: 0; z-index: 1; display: flex; justify-content: space-between; padding: 15px 16px; border-bottom: 1px solid var(--line); background: var(--surface); font-weight: 750; }
.category-heading b { display: grid; place-items: center; min-width: 25px; height: 21px; border-radius: 20px; background: var(--soft); color: var(--muted); font-size: 11px; }
.category-list { padding-bottom: 9px; }
.category-item { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; border: 0; padding: 10px 14px 10px calc(14px + var(--depth, 0) * 13px); background: transparent; color: #4f545c; text-align: left; font-size: 12px; }
.category-item:hover { background: var(--soft); }
.category-item.active { background: #fff4bd; color: #392e00; font-weight: 750; }
.category-item b { color: #9a9da3; font-size: 10px; }

.product-panel { min-width: 0; }
.table-meta { display: flex; align-items: center; justify-content: space-between; gap: 18px; min-height: 52px; padding: 10px 15px; border-bottom: 1px solid var(--line); color: var(--muted); font-size: 12px; }
.table-meta label { display: flex; align-items: center; gap: 8px; }
.table-meta select { border: 1px solid var(--line); border-radius: 7px; padding: 6px 28px 6px 9px; background: var(--surface); color: inherit; }
.table-scroll { overflow: auto; }
.product-table { width: 100%; min-width: 1450px; border-collapse: collapse; font-size: 12px; }
.product-table th { position: sticky; top: 0; z-index: 1; padding: 11px 13px; border-bottom: 2px solid #e4b600; background: #fafafa; color: #71757c; text-align: left; font-size: 10px; font-weight: 750; letter-spacing: .02em; white-space: nowrap; }
.product-table td { padding: 11px 13px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.product-table th:last-child, .product-table td:last-child { min-width: 155px; }
.product-table tbody tr:hover { background: #fffdf3; }
.product-table .number { text-align: right; white-space: nowrap; }
.product-name { min-width: 230px; max-width: 390px; }
.product-name b, .product-name small { display: block; }
.product-name b { line-height: 1.35; }
.product-name small { margin-top: 4px; color: var(--muted); font-size: 10px; }
code { padding: 4px 6px; border-radius: 5px; background: var(--soft); color: #4c5159; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.cell-badge { display: inline-block; padding: 4px 7px; border: 1px solid #dfe1e4; border-radius: 6px; background: #fafafa; white-space: nowrap; }
.stock-badge { display: inline-grid; place-items: center; min-width: 36px; padding: 4px 7px; border-radius: 999px; background: #e8f7ed; color: var(--success); font-weight: 800; }
.row-actions { display: flex; align-items: center; gap: 5px; white-space: nowrap; }
.row-actions button { border: 1px solid var(--line); border-radius: 7px; padding: 7px 9px; background: var(--surface); color: var(--ink); }
.row-actions button:hover { border-color: #d2aa00; }
.row-actions .danger-action { color: var(--danger); }
.table-loader, .empty-state { min-height: 180px; display: grid; place-content: center; gap: 7px; color: var(--muted); text-align: center; }
.empty-state b { color: var(--ink); }
.pagination { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 14px 16px; color: var(--muted); font-size: 12px; }
.pagination > div { display: flex; align-items: center; gap: 5px; }
.pagination button { min-width: 34px; height: 34px; border: 1px solid var(--line); border-radius: 7px; background: var(--surface); color: inherit; }
.pagination button:hover:not(:disabled) { border-color: #d2aa00; }
.pagination button.active { border-color: var(--yellow-deep); background: var(--yellow); color: #111; font-weight: 800; }

.employees-card { overflow-x: auto; }
.employee-row { display: grid; grid-template-columns: minmax(230px, 1.4fr) .8fr .7fr .8fr 110px; gap: 18px; align-items: center; min-width: 850px; padding: 15px 18px; border-bottom: 1px solid var(--line); font-size: 13px; }
.employee-row:last-child { border: 0; }
.employee-head { background: #fafafa; color: var(--muted); font-size: 10px; font-weight: 750; text-transform: uppercase; }
.employee-row span b, .employee-row span small { display: block; }
.employee-row span small { margin-top: 4px; color: var(--muted); }
.status { display: inline-block; border-radius: 999px; padding: 5px 8px; font-style: normal; font-size: 11px; }
.status.active { background: #e8f7ed; color: var(--success); }
.status.disabled { background: #f1f1f2; color: #777b82; }
.edit-employee { border: 1px solid var(--line); border-radius: 7px; padding: 8px 10px; background: var(--surface); }

.employee-dialog, .product-dialog { width: min(540px, calc(100% - 30px)); border: 0; border-radius: 14px; padding: 0; background: var(--surface); color: var(--ink); box-shadow: 0 30px 90px #0008; }
.product-dialog { width: min(780px, calc(100% - 30px)); max-height: calc(100vh - 30px); overflow: auto; }
.employee-dialog::backdrop, .product-dialog::backdrop { background: #0c0d10aa; backdrop-filter: blur(2px); }
.employee-form, .product-form { padding: 25px; }
.employee-form header, .product-form header { display: flex; align-items: start; justify-content: space-between; margin-bottom: 5px; }
.employee-form h2, .product-form h2 { margin: 5px 0 0; }
.dialog-close { border: 0; padding: 0 5px; background: transparent; color: #777; font-size: 28px; }
.employee-form label small { color: var(--muted); font-weight: 400; }
.employee-form footer, .product-form footer { display: flex; justify-content: flex-end; gap: 10px; margin-top: 6px; }
.product-form footer { position: sticky; bottom: -25px; margin: 6px -25px -25px; padding: 14px 25px; border-top: 1px solid var(--line); background: var(--surface); }
.employee-form footer > button:not(.primary), .product-form footer > button:not(.primary) { border: 1px solid var(--line); border-radius: 9px; padding: 10px 15px; background: var(--surface); color: var(--ink); }
.product-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 15px; }
.product-form-grid label { display: grid; align-content: start; gap: 7px; font-size: 13px; font-weight: 700; }
.product-form-grid .wide-field { grid-column: 1 / -1; }
.access-switch { grid-template-columns: auto 1fr !important; align-items: center; padding: 13px; border: 1px solid var(--line); border-radius: 9px; background: var(--soft); }
.access-switch input { width: 19px !important; height: 19px; }
.access-switch span b, .access-switch span small { display: block; }
.access-switch span small { margin-top: 3px; }

.money-totals, .cash-flow-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-bottom: 18px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface);
  overflow: hidden;
  box-shadow: 0 2px 7px #16161608;
}
.money-totals > div, .cash-flow-summary > div { min-width: 0; padding: 17px 19px; border-right: 1px solid var(--line); }
.money-totals > div:last-child, .cash-flow-summary > div:last-child { border-right: 0; }
.money-totals span, .money-totals b, .cash-flow-summary span, .cash-flow-summary b { display: block; }
.money-totals span, .cash-flow-summary span { margin-bottom: 6px; color: var(--muted); font-size: 11px; }
.money-totals b, .cash-flow-summary b { overflow: hidden; text-overflow: ellipsis; font-size: 17px; white-space: nowrap; }
.income-text { color: var(--success); }
.expense-text { color: var(--danger); }

.money-filter-card, .money-table-card {
  margin-bottom: 18px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface);
  overflow: hidden;
  box-shadow: 0 2px 7px #16161608;
}
.money-filter-form { display: grid; grid-template-columns: minmax(220px, 1.5fr) repeat(4, minmax(140px, .8fr)); gap: 13px; padding: 17px; }
.money-filter-form label, .money-form-grid label { display: grid; gap: 6px; color: var(--muted); font-size: 11px; font-weight: 700; }
.money-filter-form input, .money-filter-form select, .money-form-grid input, .money-form-grid select, .money-form-grid textarea {
  width: 100%; min-width: 0; border: 1px solid #cfd2d7; border-radius: 8px; padding: 9px 10px; background: var(--surface); color: var(--ink); outline: none;
}
.money-filter-form input:focus, .money-filter-form select:focus, .money-form-grid input:focus, .money-form-grid select:focus, .money-form-grid textarea:focus { border-color: #d6a900; box-shadow: 0 0 0 3px #ffd21a33; }
.filter-actions { grid-column: 1 / -1; display: flex; justify-content: flex-end; gap: 8px; }
.filter-actions button:not(.primary) { border: 1px solid var(--line); border-radius: 8px; padding: 9px 12px; background: var(--surface); color: var(--ink); }
.saved-filters { display: flex; align-items: center; gap: 16px; min-height: 55px; padding: 11px 17px; border-top: 1px solid var(--line); background: var(--soft); }
.saved-filters > b { flex: 0 0 auto; font-size: 12px; }
.saved-filters > div { display: flex; flex-wrap: wrap; gap: 7px; }
.saved-filter-empty { color: var(--muted); font-size: 12px; }
.saved-filter-chip { display: inline-flex; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); overflow: hidden; }
.saved-filter-chip button { border: 0; padding: 6px 9px; background: transparent; color: var(--ink); font-size: 11px; }
.saved-filter-chip button:last-child { padding-left: 2px; color: var(--danger); font-size: 15px; }

.money-table { width: 100%; min-width: 1100px; border-collapse: collapse; font-size: 12px; }
.money-table th { position: sticky; top: 0; z-index: 1; padding: 11px 13px; border-bottom: 2px solid #e4b600; background: #fafafa; color: #71757c; text-align: left; font-size: 10px; font-weight: 750; white-space: nowrap; }
.money-table td { padding: 12px 13px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.money-table tbody tr:hover { background: #fffdf3; }
.money-table .number { text-align: right; white-space: nowrap; }
.money-date b, .money-date small, .payment-type b, .payment-type small { display: block; }
.money-date small, .payment-type small { margin-top: 4px; color: var(--muted); font-size: 10px; }
.direction-badge, .source-badge { display: inline-flex; border-radius: 999px; padding: 5px 8px; font-size: 10px; font-weight: 800; white-space: nowrap; }
.direction-badge.income { background: #e8f7ed; color: var(--success); }
.direction-badge.expense { background: #fff0ef; color: var(--danger); }
.source-badge { background: var(--soft); color: var(--muted); }
.source-badge.abcp { background: #eef2ff; color: #4052a1; }
.source-badge.manual { background: #fff4bd; color: #735c00; }
.money-amount { font-size: 13px; font-weight: 800; }
.money-amount.income { color: var(--success); }
.money-amount.expense { color: var(--danger); }

.money-dialog { width: min(720px, calc(100% - 30px)); max-height: calc(100vh - 30px); border: 0; border-radius: 14px; padding: 0; background: var(--surface); color: var(--ink); box-shadow: 0 30px 90px #0008; overflow: auto; }
.money-dialog::backdrop { background: #0c0d10aa; backdrop-filter: blur(2px); }
.money-operation-form { display: grid; gap: 17px; padding: 25px; }
.money-operation-form header { display: flex; align-items: start; justify-content: space-between; }
.money-operation-form h2 { margin: 5px 0 0; }
.money-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 15px; }
.money-form-grid .wide-field { grid-column: 1 / -1; }
.money-form-grid textarea { resize: vertical; }
.immutable-note { border: 1px solid #ead786; border-radius: 9px; padding: 11px 12px; background: #fffbed; color: #6e5b0b; font-size: 12px; }
.money-operation-form footer { display: flex; justify-content: flex-end; gap: 10px; }
.money-operation-form footer > button:not(.primary) { border: 1px solid var(--line); border-radius: 9px; padding: 10px 15px; background: var(--surface); color: var(--ink); }

.cash-balance-card { margin-bottom: 18px; padding: clamp(28px, 5vw, 55px); border-radius: 16px; background: #17181b; color: #fff; text-align: center; box-shadow: 0 16px 40px #1113; }
.cash-balance-card > span { display: block; color: #bfc1c6; font-size: 13px; font-weight: 700; }
.cash-balance-card strong { display: block; margin: 14px 0 9px; color: var(--yellow); font-size: clamp(48px, 8vw, 92px); line-height: .95; letter-spacing: -.055em; }
.cash-balance-card strong small { font-size: .42em; letter-spacing: 0; }
.cash-balance-card p { max-width: 690px; margin: 0 auto; color: #a9acb2; font-size: 12px; line-height: 1.5; }

.invoice-summary { display: grid; grid-template-columns: 180px minmax(260px, 1fr); margin-bottom: 18px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); overflow: hidden; }
.invoice-summary > div { padding: 15px 18px; border-right: 1px solid var(--line); }
.invoice-summary > div:last-child { border-right: 0; }
.invoice-summary span, .invoice-summary b { display: block; }
.invoice-summary span { margin-bottom: 5px; color: var(--muted); font-size: 11px; }
.invoice-summary b { font-size: 15px; }
.invoice-filter-card, .invoice-table-card { margin-bottom: 18px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); box-shadow: 0 2px 7px #16161608; overflow: hidden; }
.invoice-filter-form { display: grid; grid-template-columns: minmax(220px, 1.4fr) repeat(4, minmax(135px, .8fr)); gap: 13px; padding: 17px; }
.invoice-filter-form label { display: grid; gap: 6px; color: var(--muted); font-size: 11px; font-weight: 700; }
.invoice-filter-form input, .invoice-filter-form select, .invoice-form-grid input, .invoice-form-grid select, .invoice-item-editor input {
  width: 100%; min-width: 0; border: 1px solid #cfd2d7; border-radius: 8px; padding: 9px 10px; background: var(--surface); color: var(--ink); outline: none;
}
.invoice-filter-form input:focus, .invoice-filter-form select:focus, .invoice-form-grid input:focus, .invoice-form-grid select:focus, .invoice-item-editor input:focus { border-color: #d6a900; box-shadow: 0 0 0 3px #ffd21a33; }
.invoice-table { width: 100%; min-width: 1560px; border-collapse: collapse; font-size: 12px; }
.invoice-table th { position: sticky; top: 0; z-index: 1; padding: 11px 13px; border-bottom: 2px solid #e4b600; background: #fafafa; color: #71757c; text-align: left; font-size: 10px; font-weight: 750; white-space: nowrap; }
.invoice-table td { padding: 12px 13px; border-bottom: 1px solid var(--line); vertical-align: top; }
.invoice-table tbody tr:hover { background: #fffdf3; }
.invoice-table .number { text-align: right; white-space: nowrap; }
.invoice-table td > b, .invoice-table td > small, .invoice-number b, .invoice-number small, .invoice-number em, .invoice-counterparty b, .invoice-counterparty small { display: block; }
.invoice-table td > small, .invoice-number small, .invoice-counterparty small { margin-top: 4px; color: var(--muted); font-size: 10px; line-height: 1.35; }
.invoice-number em { margin-top: 5px; color: #8a6b00; font-size: 10px; font-style: normal; }
.invoice-products { min-width: 260px; }
.invoice-products b, .invoice-products small { display: block; }
.invoice-products b { max-width: 330px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.invoice-products small { margin: 3px 0 7px; color: var(--muted); font-size: 10px; }
.invoice-products em { color: #8a6b00; font-size: 10px; font-style: normal; }
.muted-text { color: var(--muted); }
.edit-invoice { border: 1px solid var(--line); border-radius: 7px; padding: 8px 10px; background: var(--surface); color: var(--ink); }
.edit-invoice:hover { border-color: #d2aa00; }

.invoice-dialog { width: min(1180px, calc(100% - 30px)); max-height: calc(100vh - 30px); border: 0; border-radius: 14px; padding: 0; background: var(--surface); color: var(--ink); box-shadow: 0 30px 90px #0008; overflow: auto; }
.invoice-dialog::backdrop { background: #0c0d10aa; backdrop-filter: blur(2px); }
.invoice-form { display: grid; gap: 17px; padding: 25px; }
.invoice-form header { display: flex; align-items: start; justify-content: space-between; }
.invoice-form h2 { margin: 5px 0 0; }
.invoice-source-note { border: 1px solid #d8c76f; border-radius: 9px; padding: 10px 12px; background: #fffbed; color: #6e5b0b; font-size: 12px; }
.invoice-form-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.invoice-form-grid label, .invoice-item-editor label { display: grid; gap: 6px; color: var(--muted); font-size: 11px; font-weight: 700; }
.invoice-form-grid .checkbox-field { grid-template-columns: auto 1fr; align-items: center; align-self: end; min-height: 38px; border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; color: var(--ink); }
.invoice-form-grid .checkbox-field input, .invoice-item-editor .item-vat input { width: 17px; height: 17px; }
.invoice-items-editor { border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.invoice-items-heading { display: flex; align-items: center; justify-content: space-between; gap: 15px; padding: 13px 15px; border-bottom: 1px solid var(--line); background: var(--soft); }
.invoice-items-heading b, .invoice-items-heading span { display: block; }
.invoice-items-heading span { margin-top: 3px; color: var(--muted); font-size: 11px; }
.invoice-item-list { display: grid; }
.invoice-item-editor { display: grid; grid-template-columns: minmax(220px, 1.7fr) repeat(7, minmax(90px, .65fr)) auto auto; gap: 9px; align-items: end; padding: 13px 15px; border-bottom: 1px solid var(--line); }
.invoice-item-editor:last-child { border-bottom: 0; }
.invoice-item-editor .item-vat { display: flex; align-items: center; gap: 6px; min-height: 36px; color: var(--ink); white-space: nowrap; }
.remove-invoice-item { border: 0; padding: 9px 4px; background: transparent; color: var(--danger); white-space: nowrap; }
.invoice-form footer { position: sticky; bottom: -25px; display: flex; justify-content: flex-end; gap: 10px; margin: 0 -25px -25px; padding: 14px 25px; border-top: 1px solid var(--line); background: var(--surface); }
.invoice-form footer > button:not(.primary) { border: 1px solid var(--line); border-radius: 9px; padding: 10px 15px; background: var(--surface); color: var(--ink); }

.toast { position: fixed; right: 22px; bottom: 22px; z-index: 20; max-width: min(420px, calc(100% - 44px)); border-radius: 10px; padding: 13px 16px; background: #1d7c3e; color: #fff; box-shadow: 0 12px 35px #0005; font-size: 13px; }
.toast.error { background: #a92a22; }

@media (max-width: 1050px) {
  .app-shell { grid-template-columns: 180px minmax(0, 1fr); }
  .brand-block { padding: 0 15px; }
  .brand-block img { width: 54px; }
  .brand-block span { padding-left: 9px; }
  .catalog-layout { grid-template-columns: 200px minmax(0, 1fr); }
  .summary-strip { grid-template-columns: 150px 220px minmax(260px, 1fr); }
  .money-filter-form { grid-template-columns: repeat(3, minmax(140px, 1fr)); }
  .money-search { grid-column: span 2; }
  .money-totals, .cash-flow-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .money-totals > div:nth-child(2), .cash-flow-summary > div:nth-child(2) { border-right: 0; }
  .money-totals > div:nth-child(-n+2), .cash-flow-summary > div:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
  .invoice-filter-form { grid-template-columns: repeat(3, minmax(140px, 1fr)); }
  .invoice-search { grid-column: span 2; }
  .invoice-form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .invoice-item-editor { grid-template-columns: repeat(4, minmax(110px, 1fr)); }
  .invoice-item-editor .item-name { grid-column: span 2; }
}

@media (max-width: 760px) {
  .app-shell { display: block; }
  .app-sidebar { position: sticky; z-index: 10; width: 100%; height: auto; display: grid; grid-template-columns: 84px 1fr auto; align-items: center; }
  .brand-block { height: 62px; border: 0; }
  .app-sidebar nav { display: flex; padding: 8px; }
  .app-sidebar nav button { width: auto; padding: 10px; }
  .sidebar-account { margin: 0; border: 0; padding: 10px 14px; }
  .app-main { padding: 22px 14px 40px; }
  .page-header { align-items: flex-start; flex-direction: column; }
  .page-header .primary { width: 100%; justify-content: center; }
  .page-actions { width: 100%; align-items: stretch; flex-direction: column; }
  .page-actions button { width: 100%; justify-content: center; }
  .summary-strip { grid-template-columns: 1fr 1fr; }
  .summary-strip > div:nth-child(2) { border-right: 0; }
  .search-box { grid-column: 1 / -1; border-top: 1px solid var(--line); }
  .catalog-layout { grid-template-columns: 1fr; }
  .category-panel { max-height: 260px; }
  .pagination { align-items: flex-start; flex-direction: column; }
  .product-form-grid { grid-template-columns: 1fr; }
  .product-form-grid .wide-field { grid-column: auto; }
  .money-filter-form, .money-form-grid { grid-template-columns: 1fr; }
  .money-search, .money-form-grid .wide-field { grid-column: auto; }
  .filter-actions { align-items: stretch; flex-direction: column; }
  .saved-filters { align-items: flex-start; flex-direction: column; }
  .money-totals, .cash-flow-summary { grid-template-columns: 1fr; }
  .money-totals > div, .cash-flow-summary > div { border-right: 0; border-bottom: 1px solid var(--line); }
  .money-totals > div:last-child, .cash-flow-summary > div:last-child { border-bottom: 0; }
  .invoice-summary, .invoice-filter-form, .invoice-form-grid, .invoice-item-editor { grid-template-columns: 1fr; }
  .invoice-summary > div { border-right: 0; border-bottom: 1px solid var(--line); }
  .invoice-summary > div:last-child { border-bottom: 0; }
  .invoice-search, .invoice-item-editor .item-name { grid-column: auto; }
  .invoice-items-heading { align-items: stretch; flex-direction: column; }
  .login-card { padding: 28px 23px; }
}

@media (prefers-color-scheme: dark) {
  :root { color-scheme: dark; --ink: #f3f4f5; --muted: #a2a6ad; --line: #393b40; --soft: #151619; --surface: #212226; }
  .logo-light { display: none; }
  .logo-dark { display: block; }
  .login-card { background: #202125; }
  .service-label { background: #4a401e; color: #ffde59; }
  .login-card input, .employee-form input, .employee-form select, .product-form input, .product-form select, .money-filter-form input, .money-filter-form select, .money-form-grid input, .money-form-grid select, .money-form-grid textarea, .invoice-filter-form input, .invoice-filter-form select, .invoice-form-grid input, .invoice-form-grid select, .invoice-item-editor input { border-color: #474a50; background: #18191c; color: var(--ink); }
  .notice.error, .dialog-error { border-color: #75403d; background: #38201f; color: #ffaaa4; }
  .product-table th, .money-table th, .invoice-table th, .employee-head { background: #292a2e; }
  .product-table tbody tr:hover, .money-table tbody tr:hover, .invoice-table tbody tr:hover { background: #2a281f; }
  .category-item.active { background: #423a1d; color: #ffe16a; }
  code, .cell-badge { border-color: #414349; background: #2c2d31; color: #d7d9dc; }
  .stock-badge, .status.active { background: #183623; color: #79dfa0; }
  .direction-badge.income { background: #183623; color: #79dfa0; }
  .direction-badge.expense { background: #40201e; color: #ffaaa4; }
  .source-badge.abcp { background: #252d4d; color: #aebcff; }
  .source-badge.manual { background: #423a1d; color: #ffe16a; }
  .immutable-note { border-color: #635721; background: #332f1c; color: #e5d990; }
  .invoice-source-note { border-color: #635721; background: #332f1c; color: #e5d990; }
}