/* MOST COFFEE · панель кофейни (fin.mostcoffee.ru) — макеты экранов.
   Визуальный язык нового сайта mostcoffee.ru, его админки «Финансы»:
   Montserrat (текст) + Atyp Display (заголовки и крупные цифры), зелёный акцент #007a0a,
   серый фон #f4f6f8, белые карточки с рамкой и радиусом 16, кнопки и поля 10, таблицы и плашки как в админке.
   Токены и размеры — из Новый сайт/DESIGN.md, apps/web/app/globals.css и макетов docs/design-canvas-2026-10/A-fin*.dc.html. */

@font-face { font-family: "Atyp Display"; src: url("fonts/AtypDisplay-Semibold.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Atyp Display"; src: url("fonts/AtypDisplay-Bold.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Montserrat"; src: url("fonts/Montserrat-Variable.ttf") format("truetype"); font-weight: 100 900; font-style: normal; font-display: swap; }
/* Знак рубля: в Montserrat его рисунок не фирменный — как на сайте, берём системный (globals.css, unicode-range U+20BD). */
@font-face { font-family: "Montserrat"; src: local("Helvetica Neue"), local("Arial"), local("Roboto"), local("Segoe UI"); unicode-range: U+20BD; font-weight: 100 900; }
@font-face { font-family: "Atyp Display"; src: local("Helvetica Neue"), local("Arial"), local("Roboto"), local("Segoe UI"); unicode-range: U+20BD; font-weight: 600; }
@font-face { font-family: "Atyp Display"; src: local("Helvetica Neue"), local("Arial"), local("Roboto"), local("Segoe UI"); unicode-range: U+20BD; font-weight: 700; }

:root {
  /* — токены сайта (DESIGN.md) — */
  --color-bg: #f4f6f8;          /* --color-surface: серое поле админки */
  --color-card: #ffffff;
  --color-text: #14181c;
  --color-muted: #4f585f;       /* --color-text-muted */
  --color-hint: #626b72;        /* --color-text-hint */
  --color-border: rgba(16, 24, 32, .10);
  --color-border-med: rgba(16, 24, 32, .16);
  --color-accent: #007a0a;
  --color-accent-hover: #006009;
  --color-accent-ink: #00590a;  /* текст на бледно-зелёной подложке */
  --color-accent-bg: #e9f4ea;
  --color-warn-bg: #fdf1d6;
  --color-warn-ink: #7a4b00;
  --color-warn-border: #f6e0a0;
  --color-danger-bg: #fbe9e9;
  --color-danger-ink: #a32019;
  --color-danger: #c4423a;
  --color-ok-border: #c3e6cb;
  --color-danger-border: #f5c6cb;
  --color-teal: #12505f;
  --color-teal-bg: #e3eef0;
  --color-track: #eef0f3;
  --color-surface-2: #f0f2f5;
  --color-surface-3: #e8ebef;
  --color-head: #f9fafb;
  --color-grey: #9aa3ab;

  /* — имена, которыми пользуются сами макеты (раньше «бумага») — теперь указывают на токены сайта — */
  --ink: var(--color-text);
  --ink2: var(--color-muted);
  --muted: var(--color-hint);
  --paper: var(--color-bg);
  --card: var(--color-card);
  --sunk: var(--color-surface-2);
  --line: var(--color-border-med);
  --line2: var(--color-border);
  --taupe: var(--color-hint);
  --beige: var(--color-muted);
  --gold: #d9a21b;
  --gold-ink: var(--color-warn-ink);
  --gold-soft: var(--color-warn-bg);
  --green: var(--color-accent);
  --green-ink: var(--color-accent-ink);
  --green-soft: var(--color-accent-bg);
  --red: var(--color-danger);
  --red-ink: var(--color-danger-ink);
  --red-soft: var(--color-danger-bg);

  --display: "Atyp Display", "Montserrat", system-ui, sans-serif;
  --body: "Montserrat", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "Montserrat", system-ui, sans-serif;   /* моноширинного на сайте нет: цифры — табличные Montserrat */
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font: 400 14px/20px var(--body);
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4, p { margin: 0; }
h1, h2, h3 { font-family: var(--display); font-weight: 700; letter-spacing: .01em; }
button, input, select { font: inherit; color: inherit; margin: 0; }
:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.num, .mono { font-variant-numeric: tabular-nums; }
.only-m { display: none !important; }
b, strong { font-weight: 600; }

/* ───────── каркас ───────── */
.app { display: flex; min-height: 100vh; }

.side {
  width: 256px; flex: none;
  background: var(--color-card);
  border-right: 1px solid var(--color-border);
  display: flex; flex-direction: column;
  padding: 16px 12px 16px;
}
.brand { padding: 2px 10px 14px; display: flex; align-items: center; gap: 10px; }
.brand img { display: block; width: 30px; height: 30px; flex: none; }
.brand .nm { display: block; font: 700 13px/16px var(--display); letter-spacing: .06em; text-transform: uppercase; color: var(--color-text); }
.brand small { display: block; margin-top: 2px; font-size: 11px; line-height: 14px; color: var(--color-hint); }

.nav-label {
  display: flex; align-items: center; gap: 8px; margin: 18px 10px 6px;
  font-size: 11px; line-height: 16px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--color-muted);
}
.nav { display: flex; flex-direction: column; gap: 2px; }
.nav a {
  display: flex; align-items: center; gap: 10px;
  height: 34px; padding: 0 10px; border-radius: 8px;
  font-size: 14px; font-weight: 500; color: var(--color-text); white-space: nowrap;
}
.nav a svg { width: 18px; height: 18px; flex: none; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.nav a:hover { background: var(--color-bg); }
.nav a.on { background: var(--color-accent-bg); color: var(--color-accent-ink); font-weight: 600; }
.nav .count {
  margin-left: auto; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px;
  background: var(--color-warn-bg); color: var(--color-warn-ink); font-size: 11px; line-height: 20px; font-weight: 700; text-align: center;
}
.side .grow { flex: 1; }
.who { display: flex; align-items: center; gap: 10px; padding: 14px 10px 0; border-top: 1px solid var(--color-border); margin-top: 16px; }
.avatar {
  width: 32px; height: 32px; border-radius: 50%; flex: none;
  background: var(--color-accent-bg); color: var(--color-accent-ink); font: 700 14px/32px var(--display); text-align: center;
}
.who b { display: block; font-weight: 600; color: var(--color-text); font-size: 13px; line-height: 16px; }
.who span { font-size: 12px; color: var(--color-hint); }
.who span a { color: var(--color-accent-ink); font-weight: 600; }

.main { flex: 1; min-width: 0; padding: 0 32px 56px; }
.top {
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  padding: 24px 0 18px;
}
.top h1 { font-size: 28px; line-height: 32px; }
.top .sub { color: var(--color-muted); margin-top: 6px; max-width: 760px; font-size: 14px; line-height: 20px; }
.top-r { display: flex; align-items: center; gap: 12px; flex: none; }
.demo {
  display: inline-flex; align-items: center; height: 22px; padding: 0 9px; border-radius: 11px;
  font-size: 12px; font-weight: 600; white-space: nowrap;
  color: var(--color-warn-ink); background: var(--color-warn-bg);
}
.me { display: flex; align-items: center; gap: 9px; font-size: 13px; font-weight: 600; color: var(--color-text); }
.me .avatar { width: 30px; height: 30px; line-height: 30px; font-size: 13px; }

/* ───────── сетка и карточки ───────── */
.grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 16px; margin-bottom: 16px; }
.c3 { grid-column: span 3; } .c4 { grid-column: span 4; } .c5 { grid-column: span 5; }
.c6 { grid-column: span 6; } .c7 { grid-column: span 7; } .c8 { grid-column: span 8; }
.c9 { grid-column: span 9; } .c12 { grid-column: span 12; }

.card { background: var(--color-card); border: 1px solid var(--color-border); border-radius: 16px; padding: 18px 20px; }
.card.flat { background: transparent; }
.card h2 { font-size: 18px; line-height: 22px; }
.card .hint { color: var(--color-muted); font-size: 12px; line-height: 16px; margin-top: 4px; }
.card-h { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 14px; }
.card-h .side-note { font-size: 12px; color: var(--color-muted); }

.lbl { font-size: 12px; line-height: 16px; font-weight: 500; color: var(--color-muted); }
.big { font: 700 40px/44px var(--display); letter-spacing: 0; font-variant-numeric: tabular-nums; }
.big .u, .mid .u { font: 500 .42em var(--body); color: var(--color-muted); letter-spacing: 0; margin-left: 4px; }
.mid { font: 700 28px/32px var(--display); letter-spacing: 0; font-variant-numeric: tabular-nums; }
.note { font-size: 13px; line-height: 18px; color: var(--color-muted); }
.muted { color: var(--color-hint); }
.up { color: var(--color-accent-ink); } .down { color: var(--color-danger-ink); } .warn { color: var(--color-warn-ink); }

/* светофор */
.tl { display: inline-flex; align-items: center; gap: 5px; vertical-align: middle; }
.tl i { width: 10px; height: 10px; border-radius: 50%; background: #d9dde1; display: block; }
.tl.g i:nth-child(1) { background: var(--color-accent); }
.tl.y i:nth-child(2) { background: var(--gold); }
.tl.r i:nth-child(3) { background: var(--color-danger); }
.st { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; }
.st.g { color: var(--color-accent-ink); } .st.y { color: var(--color-warn-ink); } .st.r { color: var(--color-danger-ink); }

/* карточка «Деньги» — на сайте плашки красного статуса, без тёмных панелей: красный держит цифра и подпись */
.card.dark { border-color: var(--color-danger-border); }
.card.dark .big { color: var(--color-danger-ink); }
.card.dark .lbl, .card.dark .note { color: var(--color-muted); }
.card.dark .st.r { color: var(--color-danger-ink); }

/* полоса показателя со светофорными зонами */
.zone { position: relative; height: 10px; border-radius: 5px; display: flex; overflow: visible; margin: 14px 0 6px; }
.zone b { display: block; height: 100%; }
.zone b:first-child { border-radius: 5px 0 0 5px; } .zone b:last-child { border-radius: 0 5px 5px 0; }
.zone .zg { background: var(--color-ok-border); } .zone .zy { background: var(--color-warn-border); } .zone .zr { background: var(--color-danger-border); }
.zone .pin { position: absolute; top: -5px; width: 3px; height: 20px; background: var(--color-text); border-radius: 2px; transform: translateX(-1px); }
.zone-l { display: flex; justify-content: space-between; font-size: 11px; color: var(--color-hint); }

.strip { display: grid; grid-template-columns: repeat(3, 1fr); }
.strip > div { padding: 2px 26px; }
.strip > div:first-child { padding-left: 0; }
.strip > div + div { border-left: 1px solid var(--color-border); }

/* «Требует внимания» */
.att { list-style: none; margin: 0; padding: 0; }
.att li { display: grid; grid-template-columns: 12px 1fr; gap: 12px; padding: 12px 0; border-top: 1px solid rgba(16, 24, 32, .08); align-items: start; }
.att li:first-child { border-top: 0; padding-top: 2px; }
.att .dot { width: 8px; height: 8px; border-radius: 50%; margin-top: 6px; }
.att .dot.r { background: var(--color-danger); } .att .dot.y { background: var(--gold); }
.att b { font-weight: 600; display: block; }
.att span { color: var(--color-muted); font-size: 12px; line-height: 16px; display: block; margin-top: 2px; }
.att a.go { display: block; font-size: 12px; line-height: 16px; font-weight: 600; color: var(--color-accent-ink); white-space: nowrap; margin-top: 2px; }

/* таблицы */
.scroll { overflow-x: auto; }
table { border-collapse: collapse; width: 100%; }
.tbl { font-size: 13px; line-height: 18px; }
.tbl th { font-weight: 600; font-size: 12px; color: var(--color-muted); text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--color-border); white-space: nowrap; }
.tbl td { padding: 10px 12px; border-bottom: 1px solid rgba(16, 24, 32, .06); vertical-align: middle; }
.tbl th.r, .tbl td.r { text-align: right; }
.tbl tr:last-child td { border-bottom: 0; }
.tbl td.n { font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
.tbl tfoot td { font-weight: 700; border-top: 1px solid var(--color-border-med); border-bottom: 0; }
.tbl td:first-child, .tbl th:first-child { padding-left: 0; }
.tbl td:last-child, .tbl th:last-child { padding-right: 0; }

.bar { height: 6px; border-radius: 3px; background: var(--color-track); position: relative; min-width: 80px; }
.bar i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 3px; background: var(--color-accent); }

/* кнопки, поля */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 40px; padding: 0 16px; background: var(--color-accent); color: rgba(255, 255, 255, .97); border: 0; border-radius: 10px; font-weight: 600; font-size: 14px; cursor: pointer; white-space: nowrap; }
.btn:hover { background: var(--color-accent-hover); }
.btn svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.btn.ghost { background: var(--color-card); color: var(--color-text); border: 1px solid var(--color-border-med); }
.btn.ghost:hover { background: var(--color-bg); }
.btn.sm { height: 32px; padding: 0 12px; font-size: 13px; border-radius: 8px; }
.btn.off { background: var(--color-surface-3); color: var(--color-hint); }
.seg { display: inline-flex; gap: 8px; }
.seg a { display: inline-flex; align-items: center; height: 32px; padding: 0 12px; border-radius: 16px; border: 1px solid var(--color-border-med); background: var(--color-card); font-size: 13px; font-weight: 500; white-space: nowrap; }
.seg a.on { background: var(--color-text); color: #fff; border-color: var(--color-text); }
.inp, .sel { display: block; width: 100%; background: var(--color-card); border: 1px solid var(--color-border-med); border-radius: 10px; padding: 0 12px; font-size: 14px; color: var(--color-text); height: 40px; line-height: 38px; }
.inp.mono { font-variant-numeric: tabular-nums; }
.sel { display: flex; align-items: center; justify-content: space-between; gap: 8px; color: var(--color-hint); }
.sel.filled { color: var(--color-text); }
.sel::after { content: ""; width: 7px; height: 7px; border-right: 1.8px solid var(--color-hint); border-bottom: 1.8px solid var(--color-hint); transform: rotate(45deg) translate(-2px, -2px); flex: none; }
.sel.open { border-color: var(--color-accent); box-shadow: 0 0 0 3px rgba(0, 122, 10, .18); }
.field label { display: block; font-size: 13px; font-weight: 600; color: var(--color-text); margin-bottom: 6px; }
.field .help { font-size: 12px; line-height: 16px; color: var(--color-muted); margin-top: 6px; }
.ck { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--color-muted); }
.ck i { width: 16px; height: 16px; border: 1.5px solid #b9c2c8; border-radius: 4px; background: var(--color-card); display: block; flex: none; position: relative; }
.ck.on i { background: var(--color-accent); border-color: var(--color-accent); }
.ck.on i::after { content: ""; position: absolute; left: 4px; top: 1px; width: 4px; height: 8px; border-right: 2px solid #fff; border-bottom: 2px solid #fff; transform: rotate(45deg); }

.pill { display: inline-flex; align-items: center; height: 22px; font-size: 12px; font-weight: 600; padding: 0 9px; border-radius: 11px; white-space: nowrap; }
.pill.g { background: var(--color-accent-bg); color: var(--color-accent-ink); }
.pill.y { background: var(--color-warn-bg); color: var(--color-warn-ink); }
.pill.r { background: var(--color-danger-bg); color: var(--color-danger-ink); }
.pill.n { background: var(--color-surface-2); color: var(--color-muted); }

/* значки источника данных — как плашки «сайт» в админке */
.src { display: inline-flex; align-items: center; height: 20px; font-size: 11px; font-weight: 600; padding: 0 7px; border-radius: 6px; margin-left: 8px; vertical-align: 1px; white-space: nowrap; }
.src.kassa { background: var(--color-accent-bg); color: var(--color-accent-ink); }
.src.dd { background: var(--color-teal-bg); color: var(--color-teal); }
.src.hand { background: var(--color-text); color: #fff; }
.src.norm { background: var(--color-surface-2); color: var(--color-muted); font-style: italic; }

/* ───────── ДДС ───────── */
.dds { border-collapse: separate; border-spacing: 0; font-size: 13px; width: 100%; min-width: 980px; }
.dds th, .dds td { padding: 0 10px; height: 34px; border-bottom: 1px solid rgba(16, 24, 32, .06); white-space: nowrap; }
.dds thead th { height: 58px; background: var(--color-head); color: var(--color-text); font-weight: 600; font-size: 12px; text-align: right; vertical-align: bottom; padding-bottom: 8px; border-bottom: 1px solid var(--color-border); position: sticky; top: 0; z-index: 3; }
.dds thead th small { display: block; font-weight: 400; font-size: 11px; color: var(--color-hint); white-space: normal; line-height: 14px; }
.dds thead th.nov small { width: 92px; margin-left: auto; }
.dds thead th:first-child { text-align: left; left: 0; z-index: 4; color: var(--color-muted); }
.dds td { text-align: right; font-variant-numeric: tabular-nums; }
.dds td:first-child { text-align: left; font-variant-numeric: normal; position: sticky; left: 0; z-index: 2; min-width: 268px; border-right: 1px solid var(--color-border); }
.dds tr.l1 td { background: var(--color-surface-2); font-weight: 700; height: 38px; }
.dds tr.l2 td { background: var(--color-card); font-weight: 600; }
.dds tr.l3 td { background: var(--color-card); }
.dds tr.l3 td:first-child { padding-left: 34px; color: var(--color-muted); }
.dds tr.l2 td:first-child { padding-left: 22px; }
.dds tr.tot td { background: var(--color-surface-3); font-weight: 700; }
.dds tr.bal td { background: var(--color-text); color: #fff; font-weight: 600; border-bottom-color: var(--color-text); }
.dds tr.bal td:first-child { border-right-color: #3a4249; }
.dds tr.move td { background: var(--color-card); font-style: italic; color: var(--color-muted); }
.dds td.nov, .dds th.nov { background: #fffaf0 !important; }
.dds th.nov { color: var(--color-warn-ink); }
.dds tr.l1 td.nov { background: var(--color-warn-bg) !important; }
.dds tr.tot td.nov { background: #f1e6c6 !important; }
.dds tr.bal td.nov { background: #3a3220 !important; }
.dds tr.un td { background: var(--color-danger-bg); color: var(--color-danger-ink); font-weight: 700; }
.dds tr.un td.nov { background: #f7d9d9 !important; }
.dds tr.un td:first-child { box-shadow: inset 3px 0 0 var(--color-danger); }
.dds .flag { font: 600 11px var(--body); color: var(--color-danger-ink); background: var(--color-danger-bg); border-radius: 6px; padding: 2px 7px; margin-left: 8px; }
.dds .dash { color: #b9c2c8; }
.dds .neg { color: var(--color-danger-ink); }
.dds tr.bal .neg { color: #ff9b94; }
.dds .pos { color: var(--color-accent-ink); }
.dds .calc { font-variant-numeric: tabular-nums; }
.dds .picked { outline: 2px solid var(--color-accent); outline-offset: -2px; background: var(--color-accent-bg) !important; }

.banner { display: flex; align-items: center; gap: 12px; background: var(--color-danger-bg); border: 1px solid rgba(163, 32, 25, .22); color: var(--color-danger-ink); border-radius: 12px; padding: 12px 16px; font-size: 14px; line-height: 20px; margin-bottom: 16px; }
.banner a { font-weight: 600; margin-left: auto; white-space: nowrap; color: var(--color-danger-ink); }

/* нераспределённые */
.unal td { vertical-align: top; padding-top: 14px; padding-bottom: 14px; }
.unal .who2 b { display: block; font-weight: 600; }
.unal .who2 span { color: var(--color-hint); font-size: 12px; }
.unal .purpose { color: var(--color-muted); max-width: 270px; }
.unal .amount { font: 700 15px var(--body); font-variant-numeric: tabular-nums; white-space: nowrap; text-align: right; }
.unal tr.edit td { background: #f3faf4; }
.unal tr.tray td { background: #f3faf4; padding: 0 12px 18px 0; border-bottom: 1px solid var(--color-border); }
.guess { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 13px; }
.guess .pill { white-space: normal; height: auto; min-height: 22px; padding-top: 2px; padding-bottom: 2px; }
.menu { background: var(--color-card); border: 1px solid var(--color-border-med); border-radius: 12px; padding: 12px 14px 14px; box-shadow: 0 16px 48px rgba(26, 22, 20, .12); }
.menu .q { background: var(--color-bg); border: 1px solid var(--color-border); border-radius: 8px; padding: 7px 10px; color: var(--color-hint); font-size: 13px; margin-bottom: 10px; }
.menu .cols { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 2px 14px; }
.menu h4 { margin: 8px 0 2px; font: 700 11px/16px var(--body); letter-spacing: .06em; text-transform: uppercase; color: var(--color-muted); }
.menu .it { padding: 6px 8px; border-radius: 6px; font-size: 13px; }
.menu .it.hov { background: var(--color-accent-bg); color: var(--color-accent-ink); font-weight: 600; }
.preview { background: var(--color-card); border: 1px solid var(--color-ok-border); border-radius: 12px; padding: 14px 16px; }
.preview .row { display: flex; justify-content: space-between; gap: 12px; padding: 4px 0; font-size: 13px; }

/* ───────── тепловая карта ───────── */
.heat { display: grid; grid-template-columns: 34px repeat(15, minmax(0, 1fr)) 78px; gap: 3px; align-items: center; }
.heat .hh { font-size: 11px; color: var(--color-hint); text-align: center; font-variant-numeric: tabular-nums; }
.heat .dn { font-weight: 600; font-size: 13px; }
.heat .tot { font-size: 12px; font-variant-numeric: tabular-nums; text-align: right; color: var(--color-muted); }
.hc { height: 36px; border-radius: 6px; display: grid; place-items: center; font: 600 11px var(--body); font-variant-numeric: tabular-nums; }
.legend { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--color-muted); }
.legend i { width: 22px; height: 12px; border-radius: 3px; display: block; }

.stack { display: flex; height: 12px; border-radius: 6px; overflow: hidden; gap: 2px; }
.stack b { display: block; }
.sw { width: 10px; height: 10px; border-radius: 3px; display: inline-block; margin-right: 8px; }

/* ───────── вход ───────── */
.login-page { min-height: 100vh; display: flex; flex-direction: column; }
.login-top { background: var(--color-card); border-bottom: 1px solid var(--color-border); padding: 14px 32px; display: flex; align-items: center; justify-content: space-between; }
.login-top .brand { padding: 0; }
.login-top .brand img { width: 34px; height: 34px; }
.login-body { flex: 1; padding: 48px 32px 64px; display: grid; grid-template-columns: 1fr 1fr; gap: 32px; max-width: 1180px; margin: 0 auto; width: 100%; align-items: start; }
.stage-l { font-size: 12px; font-weight: 600; color: var(--color-muted); margin-bottom: 10px; }
.login-card { background: var(--color-card); border: 1px solid var(--color-border); border-radius: 16px; padding: 36px 36px 30px; }
.login-card h1 { font-size: 30px; line-height: 34px; }
.login-card p.lead { color: var(--color-muted); margin-top: 12px; font-size: 15px; line-height: 22px; }
.login-card .btn { width: 100%; justify-content: center; height: 46px; font-size: 15px; margin-top: 24px; }
.codeboxes { display: flex; gap: 10px; margin-top: 18px; }
.codeboxes span { flex: 1; height: 56px; border: 1px solid var(--color-border-med); background: var(--color-card); border-radius: 10px; display: grid; place-items: center; font: 700 26px var(--display); font-variant-numeric: tabular-nums; color: var(--color-text); }
.codeboxes span.cur { border-color: var(--color-accent); box-shadow: 0 0 0 3px rgba(0, 122, 10, .18); }
.codeboxes.dim span { background: var(--color-bg); }
.login-card .fine { margin-top: 16px; font-size: 13px; line-height: 18px; color: var(--color-muted); }
.sent { display: flex; gap: 12px; align-items: flex-start; background: var(--color-accent-bg); border: 1px solid var(--color-ok-border); border-radius: 12px; padding: 13px 16px; margin-top: 20px; color: var(--color-accent-ink); }
.sent svg { width: 20px; height: 20px; flex: none; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; margin-top: 2px; }
.login-foot { text-align: center; color: var(--color-muted); font-size: 12px; padding-bottom: 28px; }

/* ───────── прочее ───────── */
.check { display: grid; grid-template-columns: 14px 1fr auto auto; gap: 14px; align-items: center; padding: 13px 0; border-top: 1px solid rgba(16, 24, 32, .08); }
.check:first-of-type { border-top: 0; }
.check .dot { width: 10px; height: 10px; border-radius: 50%; }
.check .dot.g { background: var(--color-accent); } .check .dot.y { background: var(--gold); } .check .dot.r { background: var(--color-danger); }
.check b { font-weight: 600; display: block; }
.check span.s { color: var(--color-muted); font-size: 12px; line-height: 16px; display: block; margin-top: 2px; }

.drop { border: 1.5px dashed #b9c2c8; border-radius: 16px; padding: 30px 24px; display: flex; align-items: center; gap: 24px; background: var(--color-card); }
.drop svg { width: 44px; height: 44px; stroke: var(--color-accent); fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.drop h2 { font-size: 20px; line-height: 24px; }
.drop p { color: var(--color-muted); margin-top: 4px; font-size: 13px; line-height: 18px; }
.drop .btn { margin-left: auto; }

.ok { color: var(--color-accent-ink); font-weight: 600; } .bad { color: var(--color-danger-ink); font-weight: 600; }
.conf { white-space: nowrap; display: inline-flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 500; }
.conf i { width: 10px; height: 10px; border-radius: 50%; display: block; }
.conf, .conf.guess { display: inline-flex; flex-wrap: nowrap; }
.conf i { flex: none; }
.conf.exact i { background: var(--color-accent); }
.conf.guess i { background: transparent; border: 2px solid var(--gold); }

.log { list-style: none; margin: 0; padding: 0; }
.log li { display: grid; grid-template-columns: 112px 100px 1fr; gap: 14px; padding: 11px 0; border-top: 1px solid rgba(16, 24, 32, .08); font-size: 13px; line-height: 18px; }
.log li:first-child { border-top: 0; }
.log time { font-size: 12px; font-variant-numeric: tabular-nums; color: var(--color-hint); padding-top: 1px; }
.log b { font-weight: 600; }

.tabbar { display: none; }
.m-top { display: none; }

/* ───────── телефон ───────── */
@media (max-width: 820px) {
  .only-d { display: none !important; }
  .only-m { display: block !important; }
  .side { display: none; }
  .app { display: block; }
  .m-top { display: flex; align-items: center; justify-content: space-between; background: var(--color-card); border-bottom: 1px solid var(--color-border); padding: 10px 16px; position: sticky; top: 0; z-index: 20; }
  .m-top .demo { font-size: 11px; }
  .main { padding: 0 16px 96px; }
  .top { flex-direction: column; align-items: flex-start; gap: 12px; padding: 20px 0 14px; }
  .top h1 { font-size: 24px; line-height: 28px; }
  .top .sub { font-size: 13px; }
  .top-r { display: none; }
  .grid { gap: 12px; margin-bottom: 12px; }
  .c3, .c4, .c5, .c6, .c7, .c8, .c9, .c12 { grid-column: span 12; }
  .card { padding: 16px 16px; border-radius: 16px; }
  .big { font-size: 34px; line-height: 38px; }
  .strip { grid-template-columns: 1fr; }
  .strip > div { padding: 14px 0; }
  .strip > div + div { border-left: 0; border-top: 1px solid var(--color-border); }
  .strip > div:first-child { padding-top: 0; }
  .hc { font-size: 0; height: 26px; }
  .heat { grid-template-columns: 26px repeat(15, minmax(0, 1fr)); gap: 2px; }
  .heat .tot { display: none; }
  .tabbar { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; background: var(--color-card); border-top: 1px solid var(--color-border); padding: 6px 6px 12px; }
  .tabbar a { display: flex; flex-direction: column; align-items: center; gap: 3px; font-size: 11px; font-weight: 500; color: var(--color-muted); padding: 4px 0; border-radius: 8px; }
  .tabbar a svg { width: 21px; height: 21px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
  .tabbar a.on { color: var(--color-accent-ink); font-weight: 600; }
  .banner { flex-wrap: wrap; }
  .dds td:first-child { min-width: 142px; white-space: normal; line-height: 1.25; padding-left: 10px; font-size: 12.5px; }
  .dds tr.l3 td:first-child { padding-left: 18px; }
  .dds tr.l2 td:first-child { padding-left: 12px; }
  .dds th, .dds td { padding: 0 9px; }
  .dds { min-width: 0; }
  .dds .flag { display: none; }
  .login-top { padding: 12px 16px; } .login-top .brand img { width: 30px; height: 30px; }
  .login-body { grid-template-columns: 1fr; padding: 24px 16px 40px; gap: 24px; }
  .login-card { padding: 24px 20px; } .login-card h1 { font-size: 24px; line-height: 28px; }
  .drop { flex-direction: column; align-items: flex-start; padding: 22px 18px; }
  .drop .btn { margin-left: 0; }
  .log li { grid-template-columns: 1fr; gap: 2px; }
}

/* ───────── дополнения ───────── */
.svgt { font: 500 10px "Montserrat", system-ui, sans-serif; fill: #626b72; font-variant-numeric: tabular-nums; }
.svgt.b { fill: #14181c; font-weight: 700; }
.svgt.sm { font-size: 11px; }
.m-top .mk { display: flex; align-items: center; gap: 10px; }
.m-top .mk img { width: 28px; height: 28px; display: block; }
.m-top .mk b { font: 700 13px var(--display); color: var(--color-text); letter-spacing: .06em; text-transform: uppercase; }
.pbar { position: relative; height: 14px; background: var(--color-track); border-radius: 7px; margin: 34px 0 30px; }
.pbar .fact { position: absolute; left: 0; top: 0; bottom: 0; background: var(--color-accent); border-radius: 7px 0 0 7px; }
.pbar .fc { position: absolute; top: 0; bottom: 0; background: var(--color-accent-bg); border: 1.5px dashed var(--color-accent); border-left: 0; border-radius: 0 7px 7px 0; }
.pbar .tick { position: absolute; top: -6px; bottom: -6px; width: 2px; background: var(--color-text); }
.pbar .tk { position: absolute; font-size: 12px; white-space: nowrap; color: var(--color-muted); line-height: 1.25; }
.pbar .tk.top { top: -32px; } .pbar .tk.bot { top: 24px; }
.pbar .tk b { font-weight: 600; color: var(--color-text); display: block; font-size: 12px; }
.opiu td { height: 50px; line-height: 1.2; padding-top: 6px; padding-bottom: 6px; }
.opiu td:first-child { min-width: 270px; }
.opiu td small { display: block; font-size: 11px; font-weight: 400; font-variant-numeric: tabular-nums; color: var(--color-hint); margin-top: 2px; }
.opiu tr.l1 td small, .opiu tr.tot td small { color: var(--color-muted); font-weight: 400; }
.opiu td.normc .v { color: var(--color-hint); font-style: italic; border-bottom: 1px dashed #b9c2c8; }
.opiu td.normc small { color: var(--color-hint); font-style: italic; font-family: var(--body); white-space: normal; max-width: 112px; margin-left: auto; line-height: 1.2; }
.opiu tr.ref td { background: transparent; font-weight: 400; }
.opiu .sign { color: var(--color-hint); display: inline-block; width: 14px; }
.opiu tr.l3 td:first-child { padding-left: 30px; }
.opiu tr.l1 td, .opiu tr.tot td { height: 54px; }
.pill.dot::before { content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: currentColor; margin-right: 6px; opacity: .7; }
.rowflex { display: flex; gap: 16px; align-items: center; }
.kv { display: grid; grid-template-columns: 1fr auto; gap: 8px 16px; font-size: 14px; }
.kv .n { font-variant-numeric: tabular-nums; text-align: right; }
@media (max-width: 820px) {
  .opiu td:first-child { min-width: 150px; }
  .opiu { min-width: 0; }
}
.check .dot.n { background: #c7cdd4; }
@media (max-width: 820px) { .hm { display: none; } }
@media (max-width: 820px) {
  .banner span { flex: 1 1 calc(100% - 40px); }
  .banner a { margin-left: 34px; }
  .unal { min-width: 0 !important; }
  .unal thead { display: none; }
  .unal, .unal tbody, .unal tfoot, .unal tr, .unal td { display: block; width: auto !important; min-width: 0 !important; }
  .unal tr { padding: 14px 0; border-bottom: 1px solid var(--color-border); }
  .unal tr.edit { padding: 14px 10px; border-radius: 10px; }
  .unal tr.tray { padding: 0 0 12px; border-bottom: 1px solid var(--color-border-med); }
  .unal td, .unal tr.tray td { padding: 3px 0 !important; border: 0 !important; text-align: left; background: transparent !important; }
  .unal .amount { text-align: left; font-size: 18px; }
  .unal .purpose { max-width: none; }
  .unal tr.tray td:first-child { margin-bottom: 10px; }
  .menu .cols { grid-template-columns: 1fr 1fr; }
  .unal tfoot tr td:nth-child(n+2) { display: none; }
  .unal tfoot .amount { display: block; }
  .card-h { flex-wrap: wrap; }
}
@media (max-width: 820px) { .unal tr.tray { display: none; } }
@media (max-width: 820px) {
  .unal tr:not(.edit):not(.guessrow):not(.tray) td:nth-child(n+5) { display: none; }
  .unal tr.guessrow td:nth-child(n+6) { display: none; }
  .unal tr:not(.edit):not(.tray) { padding: 10px 0; }
  .unal tr:not(.edit):not(.tray) td.purpose { display: none; }
  .unal tr:not(.edit):not(.tray) td:nth-child(1) { display: inline-block; width: auto !important; margin-right: 10px; }
}
@media (max-width: 820px) { .unal tfoot tr td:nth-child(2) { display: block !important; font-size: 18px; } .unal tfoot tr td:last-child { display: none !important; } }

@media (max-width: 820px) { .be-lbl { left: auto !important; right: 0; } }

/* ───────── сеть: переключатель кофейни ───────── */
.shop { position: relative; margin: 2px 0 4px; }
.shop-btn { display: flex; align-items: center; gap: 10px; padding: 8px 12px 8px 10px; background: var(--color-card); border: 1px solid var(--color-border-med); border-radius: 10px; cursor: pointer; }
.shop-btn > svg { width: 20px; height: 20px; flex: none; stroke: var(--color-accent-ink); fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.shop-btn .t { flex: 1; min-width: 0; }
.shop-btn small { display: block; font-size: 11px; line-height: 14px; color: var(--color-hint); }
.shop-btn b { display: block; font: 700 14px/18px var(--display); letter-spacing: .01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.shop-btn::after { content: ""; width: 7px; height: 7px; flex: none; border-right: 1.8px solid var(--color-hint); border-bottom: 1.8px solid var(--color-hint); transform: rotate(45deg) translate(-2px, -2px); }
.shop.is-open .shop-btn { border-color: var(--color-accent); box-shadow: 0 0 0 3px rgba(0, 122, 10, .18); }
.shop.is-open .shop-btn::after { transform: rotate(225deg) translate(-2px, -2px); }
.shop-menu { position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 60; background: var(--color-card); border: 1px solid var(--color-border-med); border-radius: 12px; padding: 6px; box-shadow: 0 16px 48px rgba(26, 22, 20, .16); }
.shop-menu .it { display: flex; align-items: flex-start; gap: 10px; padding: 9px 8px; border-radius: 8px; }
.shop-menu .it.on { background: var(--color-accent-bg); }
.shop-menu .it > svg:first-child { width: 18px; height: 18px; flex: none; margin-top: 1px; stroke: var(--color-accent-ink); fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.shop-menu .it > div { flex: 1; min-width: 0; }
.shop-menu .it b { display: block; font-size: 13px; line-height: 18px; font-weight: 600; }
.shop-menu .it span { display: block; font-size: 12px; line-height: 16px; color: var(--color-muted); }
.shop-menu .it.on b { color: var(--color-accent-ink); }
.shop-menu .ck-i { width: 16px; height: 16px; flex: none; margin-top: 1px; stroke: var(--color-accent-ink); fill: none; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.shop-menu .sep { height: 1px; background: var(--color-border); margin: 4px 6px; }
.shop-menu .grp { padding: 8px 8px 4px; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--color-muted); }
.sl { width: 10px; height: 10px; border-radius: 50%; flex: none; display: block; margin: 4px 4px 0 3px; }
.sl.g { background: var(--color-accent); } .sl.y { background: var(--gold); } .sl.r { background: var(--color-danger); }
.sd { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 7px; vertical-align: 1px; }
.sd.g { background: var(--color-accent); } .sd.y { background: var(--gold); } .sd.r { background: var(--color-danger); }

/* «сеть в среднем» под цифрами */
.netavg { display: flex; align-items: center; gap: 6px; margin-top: 8px; font-size: 12px; line-height: 16px; color: var(--color-hint); }
.netavg svg { width: 14px; height: 14px; flex: none; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.netavg b { font-weight: 600; color: var(--color-muted); }

.pill.t { background: var(--color-teal-bg); color: var(--color-teal); }
.pill.b { background: var(--color-text); color: #fff; }

/* ───────── экран «Сеть» ───────── */
.kpi { display: grid; grid-template-columns: repeat(7, 1fr); }
.kpi > div { padding: 2px 16px; min-width: 0; }
.kpi > div:first-child { padding-left: 0; }
.kpi > div + div { border-left: 1px solid var(--color-border); }
.kpi .v { font: 700 24px/30px var(--display); font-variant-numeric: tabular-nums; margin-top: 8px; white-space: nowrap; }
.kpi .v .u { font: 500 12px var(--body); color: var(--color-muted); margin-left: 3px; }
.kpi .note { font-size: 12px; line-height: 16px; margin-top: 4px; }
.netT { font-size: 13px; line-height: 18px; }
.netT th { white-space: normal; vertical-align: bottom; line-height: 15px; }
.netT td { padding: 12px 6px; vertical-align: middle; }
.netT th { padding: 10px 6px; }
.netT td small { display: block; font-size: 11px; line-height: 14px; color: var(--color-hint); margin-top: 2px; white-space: nowrap; }
.netT td.n { text-align: right; }
.netT th.r { text-align: right; }
.netT .nm { display: flex; align-items: center; gap: 12px; white-space: nowrap; }
.netT .nm b { display: block; font-weight: 600; font-size: 14px; }
.netT .nm div span { display: block; font-size: 12px; color: var(--color-hint); }
.netT .tl { flex: none; }
.netT tr.sum td { background: var(--color-surface-2); font-weight: 600; border-top: 1px solid var(--color-border-med); border-bottom: 0; }
.netT tr.med td { background: var(--color-head); color: var(--color-muted); font-style: italic; border-bottom: 0; }
.netT tr.sum td small, .netT tr.med td small { font-weight: 400; }
.netT .red { color: var(--color-danger-ink); font-weight: 600; }
.netT tr.rowbad td { background: #fffafa; }
.legend-l { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--color-ink2, var(--color-muted)); }
.legend-l i { width: 18px; height: 3px; border-radius: 2px; display: block; }
.sc { background: var(--color-card); border: 1px solid var(--color-border); border-radius: 16px; padding: 16px; margin-bottom: 10px; }
.sc.alert { border-color: var(--color-danger-border); }
.sc-h { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.sc-h b { display: block; font: 700 17px/20px var(--display); }
.sc-h div span { display: block; font-size: 12px; color: var(--color-hint); }
.sc-g { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 14px; }
.sc-g .l { font-size: 11px; line-height: 14px; color: var(--color-hint); }
.sc-g .v { font: 700 16px/20px var(--display); font-variant-numeric: tabular-nums; margin-top: 2px; }
.sc-g .v small { display: block; font: 400 11px/14px var(--body); color: var(--color-hint); margin-top: 1px; }
.sc.sum { background: var(--color-surface-2); border-color: transparent; }

/* ───────── плашки-подсказки, форма подключения ───────── */
.hintbox { display: flex; align-items: flex-start; gap: 12px; background: var(--color-teal-bg); border: 1px solid #c9dde1; color: var(--color-teal); border-radius: 12px; padding: 12px 16px; font-size: 14px; line-height: 20px; margin-bottom: 16px; }
.hintbox svg { width: 20px; height: 20px; flex: none; margin-top: 0; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.fgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 40px; }
.fcol > .field { margin-top: 16px; }
.fcol > .field:first-of-type { margin-top: 0; }
.fh { display: flex; align-items: center; gap: 10px; margin: 0 0 14px; font: 700 15px/20px var(--display); }
.fh i { width: 24px; height: 24px; border-radius: 50%; background: var(--color-accent-bg); color: var(--color-accent-ink); font: 700 12px/24px var(--display); text-align: center; font-style: normal; }
.fcol .fh:not(:first-child) { margin-top: 26px; padding-top: 22px; border-top: 1px solid var(--color-border); }
.inp.ph { color: var(--color-hint); }
.res { display: flex; align-items: flex-start; gap: 10px; margin-top: 12px; background: var(--color-accent-bg); border: 1px solid var(--color-ok-border); color: var(--color-accent-ink); border-radius: 10px; padding: 10px 14px; font-size: 13.5px; line-height: 19px; }
.res svg { width: 18px; height: 18px; flex: none; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; margin-top: 1px; }
.lockline { display: flex; align-items: center; gap: 8px; margin-top: 8px; font-size: 12px; line-height: 16px; color: var(--color-muted); }
.lockline svg { width: 14px; height: 14px; flex: none; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.addlink { display: inline-flex; align-items: center; gap: 6px; margin-top: 10px; font-size: 13px; font-weight: 600; color: var(--color-accent-ink); }
.addlink svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; }
.shopsT td { vertical-align: top; padding-top: 14px; padding-bottom: 14px; }
.shopsT .nm b { display: block; font-weight: 600; font-size: 14px; }
.shopsT small { display: block; font-size: 12px; line-height: 16px; color: var(--color-hint); margin-top: 2px; }
.shopsT .ln { font-size: 13px; line-height: 18px; }

@media (max-width: 820px) {
  .m-top { flex-direction: column; align-items: stretch; gap: 8px; padding: 10px 16px 12px; }
  .m-top .m-row { display: flex; align-items: center; justify-content: space-between; }
  .m-top .shop { margin: 0; }
  .m-top .shop-btn { padding: 6px 12px 6px 10px; }
  .kpi { grid-template-columns: 1fr 1fr; gap: 16px 0; }
  .kpi > div { padding: 0 12px 0 0; }
  .kpi > div + div { border-left: 0; }
  .kpi > div:nth-child(even) { padding-left: 14px; border-left: 1px solid var(--color-border); }
  .kpi .v { font-size: 22px; }
  .fgrid { grid-template-columns: 1fr; }
  .fcol .fh:not(:first-child) { margin-top: 22px; }
}
.chips { display: flex; gap: 4px; flex-wrap: wrap; }
.shopsT .nm { display: flex; align-items: flex-start; gap: 12px; }
.shopsT .nm .tl { margin-top: 5px; }
.shopsT .ln, .shopsT .nm b { white-space: nowrap; }

/* ───────── телефон: «Кофейни» и «Доступ» ───────── */
.kvl { margin: 0; }
.kvl > div { display: grid; grid-template-columns: 96px 1fr; gap: 12px; padding: 10px 0; border-top: 1px solid var(--color-border); }
.kvl dt { font-size: 12px; line-height: 18px; color: var(--color-hint); }
.kvl dd { margin: 0; font-size: 13.5px; line-height: 18px; min-width: 0; overflow-wrap: anywhere; }
.kvl dd small { display: block; font-size: 12px; line-height: 16px; color: var(--color-hint); margin-top: 2px; }
.kvl dd .ln + .ln { margin-top: 2px; }
.sc-act { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-top: 12px; border-top: 1px solid var(--color-border); }
.sc-act .rm { color: var(--color-danger-ink); font-weight: 600; font-size: 13px; }
.sc-h .avatar { flex: none; }
@media (max-width: 820px) {
  .card-h:has(> .btn) { flex-direction: column; align-items: stretch; gap: 12px; }
  .card-h > .btn { order: -1; width: 100%; height: 44px; }
  .row2 { grid-template-columns: 1fr; gap: 0; }
  .row2 .field { margin-bottom: 14px; }
  .chk .btn, .rowflex[data-m="stack"] .btn { width: 100%; height: 44px; }
  .rowflex[data-m="stack"] { flex-direction: column; align-items: stretch; gap: 10px; }
  .inp, .sel { height: 44px; line-height: 42px; }
  .inp.mono { overflow-wrap: anywhere; }
  .field .help { font-size: 12.5px; }
}
.sc .kas { margin-bottom: 12px; }
.sc .kas small { display: block; margin-top: 6px; font-size: 12px; line-height: 16px; color: var(--color-hint); }
.sc-h > div:not(.tl):not(.avatar) { min-width: 0; }
@media (max-width: 820px) {
  .sel { overflow: hidden; white-space: nowrap; }
  .sel.filled { text-overflow: ellipsis; }
  .fcol .res { margin-bottom: 4px; }
  .fcol .fh:not(:first-child) { margin-top: 26px; }
  .kvl dd .chips { margin: -1px 0; }
}
@media (max-width: 820px) { .fgrid { grid-template-columns: minmax(0, 1fr); } .fcol { min-width: 0; } }
@media (max-width: 820px) { .sel { white-space: normal; height: auto; min-height: 44px; line-height: 20px; padding-top: 10px; padding-bottom: 10px; } }

/* ---- Экран «ОПИУ» (app/templates/pnl.html, app/money/pnl_views.py): таблица на базе .dds, без inline-стилей и скриптов ---- */
.pnl-scroll { overflow-x: auto; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; }
.pnl { min-width: 0; }
.pnl th, .pnl td { min-width: 104px; }
.pnl td:first-child, .pnl th:first-child { min-width: 220px; }
.pnl tbody td { height: auto; padding-top: 5px; padding-bottom: 5px; vertical-align: top; }
.pnl td:first-child { white-space: normal; line-height: 17px; }
.pnl td .sm { display: block; font-size: 10.5px; line-height: 13px; color: var(--color-hint); font-weight: 400; white-space: normal; font-variant-numeric: tabular-nums; }
.pnl td:first-child .sm { max-width: 260px; }
.pnl td:not(:first-child) .sm { white-space: nowrap; }
.pnl .sb { font-weight: 600; }
.pnl .sb.k { color: var(--color-teal); }
.pnl .sb.d { color: var(--color-accent-ink); }
.pnl .sb.c, .pnl .sb.n { color: var(--color-warn-ink); }
.pnl td.est .n { color: var(--color-muted); font-style: italic; }
.pnl td.est .sm { font-style: italic; }
.pnl .est-m { color: var(--color-warn-ink); }
.pnl tr.l3 td:first-child { padding-left: 14px; }
.pnl tr.memo td { background: var(--color-surface-2); }
.pnl thead th small.fl { white-space: nowrap; width: auto; margin-left: auto; font-weight: 600; }
.pnl thead th small.fl.bad { color: var(--color-warn-ink); }
.pnl thead th small.fl.go { color: var(--color-teal); }
.pnl thead th small.fl.none { color: var(--color-hint); }
.pnl tr.tot td .n { font-weight: 700; }
.sb-legend { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 0 0 14px; font-size: 13px; color: var(--color-muted); }
.sb-legend .sb { font-weight: 600; font-size: 12px; }
.sb-legend .sb.k { color: var(--color-teal); }
.sb-legend .sb.d { color: var(--color-accent-ink); }
.sb-legend .sb.c, .sb-legend .sb.n { color: var(--color-warn-ink); }
.why-r.est { font-style: italic; }
.parts { margin-bottom: 14px; }
.parts li { display: flex; justify-content: space-between; gap: 16px; }
.card-h.pad, .note.pad, .empty.pad { padding-left: 24px; padding-right: 24px; }
.card-h.pad { padding-top: 20px; margin-bottom: 4px; }
.refs { min-width: 640px; }
.ops { min-width: 780px; }
.ops .dt { font-size: 13px; white-space: nowrap; }
.ops td.act { min-width: 240px; }
.ops .amount { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ops .amount.neg { color: var(--color-danger-ink); }
.ops .amount.pos { color: var(--color-accent-ink); }
.ops td { vertical-align: top; }
.ops .who2 b { display: block; font-weight: 600; }
.ops .who2 span { display: block; color: var(--color-hint); font-size: 12px; }
.ops .purpose { color: var(--color-muted); max-width: 270px; }
.refs td:first-child, .refs th:first-child { padding-left: 24px; }
.refs td:last-child, .refs th:last-child { padding-right: 24px; }
@media (max-width: 820px) {
  .pnl th, .pnl td { min-width: 96px; }
  .pnl td:first-child, .pnl th:first-child { min-width: 120px; max-width: 132px; }
  /* список операций: карточки вместо таблицы, «Перекинуть» остаётся под рукой */
  .ops { min-width: 0; }
  .ops thead { display: none; }
  .ops, .ops tbody, .ops tr, .ops td { display: block; width: auto; min-width: 0 !important; }
  .ops tr { padding: 12px 0; border-bottom: 1px solid var(--color-border); }
  .ops td { padding: 2px 0 !important; border: 0 !important; text-align: left; }
  .ops .amount { text-align: left; font-size: 18px; }
  .ops td.dt { display: inline-block; margin-right: 10px; }
  .ops .purpose { max-width: none; }
  .pnl td:first-child .sm { display: none; }
  .card-h.pad, .note.pad, .empty.pad { padding-left: 16px; padding-right: 16px; }
  .refs { min-width: 560px; }
  .refs td:first-child, .refs th:first-child { padding-left: 16px; }
}

/* ДДС на телефоне: списки платежей (детализация, предположения, нераспределённые) — карточки со ВСЕМИ полями. Общие правила `.unal`
   прячут колонки с пятой и «назначение» (они писались под другую таблицу), и «Статья» с «Перекинуть» пропадали. */
@media (max-width: 820px) {
  .unal.dl tr:not(.edit):not(.guessrow):not(.tray) td:nth-child(n+2),
  .unal.dl tr:not(.edit):not(.guessrow):not(.tray) td.purpose { display: block; }
  .unal.dl td.act, .unal.dl td.hint-c { padding-top: 6px !important; }
  .unal.dl .af select.inp { width: 100%; }
}