/* Раздел «Аналитика» — деньги, производство, маржа и исполнители.
   Только переменные кабинета (app.css) + несколько своих цветов для графиков.
   Все классы с префиксом an-, чужие экраны не затрагиваются. Телефон и планшет — снизу файла. */

.an {
  /* Состояния денег на графиках (проверены на различимость, в т.ч. при дальтонизме) */
  --an-paid: #1A7D49;      /* оплачено */
  --an-exp: #0A4DA6;       /* ожидается в срок */
  --an-over: #D92D20;      /* просрочено */
  --an-week: #E08A00;      /* на этой неделе */
  --an-later: #199E9E;     /* позже этого месяца */
  --an-none: #98A2B3;      /* без срока / не разложено */
  --an-master: #6941C6;    /* работа мастеров */
  --an-grid: #EAECF0;
  --an-shadow: 0 1px 3px rgba(16,24,40,.06);
  --an-hatch: repeating-linear-gradient(135deg, #C6CCD6 0 2px, #EEF0F4 2px 6px);
  display: block;
}

/* ---------- Шапка: вкладки и период ---------- */
.an-head { margin-bottom: 18px; align-items: flex-end; }
.an-tabs {
  display: inline-flex; gap: 3px; padding: 3px; background: var(--surface-sunken);
  border: 1px solid var(--line); border-radius: 11px; max-width: 100%;
}
.an-tab {
  display: inline-flex; align-items: center; gap: 7px; white-space: nowrap;
  padding: 8px 15px; border-radius: 8px; border: 1px solid transparent; background: transparent;
  font-family: var(--body); font-size: 13.5px; font-weight: 700; color: var(--ink-dim);
  text-decoration: none; transition: color .12s, background .12s, border-color .12s;
}
.an-tab:hover { color: var(--ink); }
.an-tab.on {
  color: var(--accent); background: var(--bg-card); border-color: var(--line-bright);
  box-shadow: 0 1px 2px rgba(16,24,40,.12);
}
.an-tab svg { flex: none; }

.an-bar {
  display: flex; align-items: center; gap: 10px 14px; flex-wrap: wrap;
  margin-bottom: 20px; padding: 10px 12px;
  background: var(--bg-card); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--an-shadow);
}
.an-bar-lbl {
  font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-faint);
  padding-left: 4px;
}
.an-seg { display: inline-flex; gap: 2px; padding: 3px; background: var(--surface-sunken); border: 1px solid var(--line); border-radius: 9px; }
.an-seg button {
  border: none; background: transparent; border-radius: 6px; padding: 6px 13px;
  font-family: var(--body); font-size: 13px; font-weight: 700; color: var(--ink-dim); white-space: nowrap;
}
.an-seg button:hover { color: var(--ink); }
.an-seg button.on { background: var(--accent); color: #fff; box-shadow: 0 1px 3px rgba(10,77,166,.35); }
.an-step { display: inline-flex; align-items: center; gap: 2px; }
.an-step button {
  width: 32px; height: 32px; border-radius: 8px; border: 1px solid var(--line-bright); background: var(--bg-card);
  color: var(--ink-dim); display: inline-flex; align-items: center; justify-content: center;
}
.an-step button:hover { color: var(--accent); border-color: var(--accent); }
.an-step b { min-width: 148px; text-align: center; font-size: 14px; font-weight: 700; color: var(--ink); padding: 0 6px; }
.an-link {
  border: none; background: none; padding: 4px 2px; color: var(--accent);
  font-family: var(--body); font-size: 13px; font-weight: 700; text-decoration: none; cursor: pointer;
}
.an-link:hover { text-decoration: underline; }
.an-custom { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.an-custom input, .an-search {
  background: var(--bg); border: 1px solid var(--line-bright); border-radius: 8px;
  padding: 7px 10px; color: var(--ink); font-family: var(--body); font-size: 14px; outline: none; min-width: 0;
}
.an-custom input:focus, .an-search:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(10,77,166,.15); }
.an-cmp { margin-left: auto; font-size: 12.5px; color: var(--ink-faint); }
.an-cmp b { color: var(--ink-dim); font-weight: 600; }

/* ---------- Сетка страницы ---------- */
.an-body { display: flex; flex-direction: column; gap: 18px; transition: opacity .15s; }
.an-body.stale { opacity: .55; pointer-events: none; }
.an-cols { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 18px; align-items: start; }
.an-stack { display: flex; flex-direction: column; gap: 18px; min-width: 0; }

.an-card {
  background: var(--bg-card); border: 1px solid var(--line); border-radius: 14px;
  padding: 20px 22px; box-shadow: var(--an-shadow); min-width: 0;
}
.an-card-h { display: flex; align-items: flex-start; gap: 10px 14px; flex-wrap: wrap; margin-bottom: 16px; }
.an-card-h h3 { font-family: var(--disp); font-size: 16.5px; font-weight: 700; letter-spacing: -.005em; color: var(--ink); line-height: 1.3; }
.an-card-h .sub { font-size: 12.5px; color: var(--ink-dim); margin-top: 2px; line-height: 1.45; }
.an-card-h .grow { flex: 1 1 220px; min-width: 0; }
.an-card-h .tools { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.an-eyebrow {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  font-size: 11px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; color: var(--ink-faint);
}
.an-eyebrow i { font-style: normal; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--ink-dim); font-size: 12.5px; }
.an-num { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.an-muted { color: var(--ink-faint); }
.an-empty {
  padding: 26px 18px; text-align: center; color: var(--ink-dim); font-size: 13.5px; line-height: 1.6;
  border: 1px dashed var(--line-bright); border-radius: 12px; background: var(--surface-sunken);
}
.an-empty b { color: var(--ink); }

/* «Как считается» */
.an-how { margin-top: 14px; font-size: 12.5px; color: var(--ink-dim); line-height: 1.6; }
.an-how summary {
  cursor: pointer; display: inline-flex; align-items: center; gap: 6px; list-style: none;
  color: var(--accent); font-weight: 700; padding: 4px 0;
}
.an-how summary::-webkit-details-marker { display: none; }
.an-how summary::before { content: "?"; width: 16px; height: 16px; border-radius: 50%; border: 1.5px solid currentColor;
  display: inline-flex; align-items: center; justify-content: center; font-size: 10.5px; font-weight: 800; }
.an-how[open] summary { margin-bottom: 6px; }
.an-how ul { margin: 0 0 0 18px; }
.an-how li { margin-bottom: 3px; }
.an-how b { color: var(--ink); font-weight: 600; }

/* ---------- Главный блок «Ждёт оплаты» ---------- */
.an-hero { padding: 24px 26px 20px; position: relative; overflow: hidden; }
.an-hero::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--navy); }
.an-hero-top { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr); gap: 22px 28px; align-items: end; }
.an-hero-val {
  font-family: var(--mono); font-weight: 700; font-size: 42px; line-height: 1.05; letter-spacing: -.035em;
  color: var(--ink); margin-top: 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.an-hero-sub { font-size: 13.5px; color: var(--ink-dim); margin-top: 8px; }

.an-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; }
.an-kpis.n3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.an-kpis.n4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.an-kpis.n6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
/* восемь плиток (сделки): два ровных ряда по четыре, а не семь и одна */
.an-kpis.n8 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.an-kpi {
  display: flex; flex-direction: column; gap: 7px; text-align: left; min-width: 0;
  background: var(--bg-card); border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px;
  font-family: var(--body); color: var(--ink); box-shadow: var(--an-shadow);
  transition: border-color .12s, box-shadow .15s, transform .12s;
}
button.an-kpi { cursor: pointer; }
button.an-kpi:hover { border-color: var(--accent); box-shadow: 0 6px 18px rgba(16,24,40,.10); transform: translateY(-1px); }
button.an-kpi.on { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(10,77,166,.14); }
.an-kpi .l {
  display: flex; align-items: center; gap: 7px; font-size: 11px; font-weight: 700; letter-spacing: .05em;
  text-transform: uppercase; color: var(--ink-dim); line-height: 1.3;
}
.an-kpi .l::before { content: ""; width: 8px; height: 8px; border-radius: 2px; background: var(--tone, var(--ink-faint)); flex: none; }
.an-kpi .v { font-family: var(--mono); font-weight: 700; font-size: 23px; line-height: 1.1; letter-spacing: -.03em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.an-kpi .v.count { font-size: 30px; }
/* шесть плиток в ряд: на обычном мониторе сумма в миллионы не помещалась и обрезалась многоточием */
@media (min-width: 1101px) {
  .an-kpis.n6 .an-kpi .v:not(.count) { font-size: clamp(16px, 1.32vw, 23px); }
  /* три плитки рядом с главной суммой: семизначная сумма на ноутбуке стояла впритык */
  .an-hero .an-kpi .v:not(.count) { font-size: clamp(16px, 1.45vw, 23px); }
}
.an-kpi .s { font-size: 12px; color: var(--ink-dim); line-height: 1.4; }
.an-kpi .s b { color: var(--ink); font-weight: 600; }
.an-kpi.flat { box-shadow: none; background: var(--surface-sunken); }
.an-kpi.alarm .v { color: var(--an-over); }
.t-red { --tone: var(--an-over); } .t-amber { --tone: var(--an-week); } .t-blue { --tone: var(--an-exp); }
.t-green { --tone: var(--an-paid); } .t-violet { --tone: var(--an-master); } .t-teal { --tone: var(--an-later); }
.t-gray { --tone: var(--an-none); } .t-navy { --tone: var(--navy); }

/* изменение к прошлому периоду */
.an-delta {
  display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 700; white-space: nowrap;
  padding: 2px 8px; border-radius: 999px; background: var(--surface-sunken); color: var(--ink-dim); border: 1px solid var(--line);
}
.an-kpi > .an-delta { align-self: flex-start; }
.an-kpi > .an-meter { align-self: stretch; }
.an-delta.up { color: var(--an-paid); background: var(--margin-soft); border-color: rgba(26,125,73,.25); }
.an-delta.down { color: #B42318; background: rgba(217,45,32,.07); border-color: rgba(217,45,32,.25); }

/* ---------- Полосы: разбивка, проект, метр ---------- */
.an-split { margin-top: 22px; }
.an-track { display: flex; gap: 2px; height: 12px; border-radius: 6px; overflow: hidden; background: var(--an-grid); }
.an-track > i { display: block; min-width: 3px; height: 100%; }
.an-track > i:first-child { border-radius: 6px 0 0 6px; }
.an-track > i:last-child { border-radius: 0 6px 6px 0; }
.an-track > i:only-child { border-radius: 6px; }
.an-track.thin { height: 8px; }
.an-track.empty { background: var(--an-grid); }
.c-paid { background: var(--an-paid); } .c-exp { background: var(--an-exp); } .c-over { background: var(--an-over); }
.c-week { background: var(--an-week); } .c-later { background: var(--an-later); } .c-master { background: var(--an-master); }
.c-none { background: var(--an-hatch); } .c-gray { background: #C6CCD6; }
.an-legend { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.an-leg {
  display: inline-flex; align-items: center; gap: 8px; text-align: left;
  border: 1px solid var(--line); background: var(--bg-card); border-radius: 10px; padding: 7px 12px 7px 10px;
  font-family: var(--body); font-size: 12.5px; color: var(--ink-dim); line-height: 1.3;
}
button.an-leg { cursor: pointer; transition: border-color .12s, background .12s; }
button.an-leg:hover { border-color: var(--accent); }
button.an-leg.on { border-color: var(--accent); background: var(--client-soft); }
.an-leg .sw { width: 10px; height: 10px; border-radius: 3px; flex: none; }
.an-leg .tx { display: flex; flex-direction: column; min-width: 0; }
.an-leg b { font-family: var(--mono); font-weight: 700; color: var(--ink); font-size: 13px; white-space: nowrap; }
.an-leg.plain { border: none; padding: 0; background: none; }
.an-meter { height: 8px; border-radius: 4px; background: #D6E3F5; overflow: hidden; }
.an-meter > i { display: block; height: 100%; border-radius: 4px; background: var(--an-exp); }
.an-meter.green { background: #CFE8DA; } .an-meter.green > i { background: var(--an-paid); }
.an-meter.gray { background: var(--an-grid); } .an-meter.gray > i { background: #7B8799; }

/* ---------- График поступлений ---------- */
.an-chart { position: relative; width: 100%; }
.an-chart svg { display: block; width: 100%; overflow: visible; }
.an-chart text { font-family: var(--mono); font-size: 11px; fill: var(--ink-faint); }
.an-chart text.xl.cur { fill: var(--ink); font-weight: 700; }
.an-chart text.val { fill: var(--ink-dim); font-weight: 600; }
.an-chart .grid { stroke: var(--an-grid); stroke-width: 1; }
.an-chart .base { stroke: var(--line-bright); stroke-width: 1; }
.an-chart .hit { fill: transparent; cursor: pointer; outline: none; }
.an-chart .slot.hover .band, .an-chart .slot:focus-within .band { fill: rgba(10,77,166,.06); }
.an-chart .band { fill: transparent; }
.an-chart .band.cur { fill: rgba(10,77,166,.035); }
.an-tip {
  position: absolute; z-index: 5; pointer-events: none; min-width: 190px; max-width: 260px;
  background: var(--ink); color: #fff; border-radius: 10px; padding: 10px 12px; font-size: 12.5px; line-height: 1.5;
  box-shadow: 0 12px 30px rgba(16,24,40,.28); opacity: 0; transition: opacity .1s;
}
.an-tip.show { opacity: 1; }
.an-tip .t { font-weight: 700; margin-bottom: 4px; }
.an-tip .r { display: flex; align-items: center; gap: 8px; }
.an-tip .r i { width: 10px; height: 3px; border-radius: 2px; flex: none; }
.an-tip .r span { color: rgba(255,255,255,.72); flex: 1; }
.an-tip .r b { font-family: var(--mono); font-weight: 700; white-space: nowrap; }
.an-tip .h { margin-top: 5px; color: rgba(255,255,255,.6); font-size: 11.5px; }
.an-tails { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 12px; font-size: 12.5px; color: var(--ink-dim); }
.an-tails b { font-family: var(--mono); color: var(--ink); font-weight: 700; }

/* ---------- Фильтры-чипы ---------- */
.an-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.an-chip {
  display: inline-flex; align-items: center; gap: 7px; white-space: nowrap;
  border: 1px solid var(--line-bright); background: var(--bg-card); border-radius: 999px; padding: 6px 12px;
  font-family: var(--body); font-size: 13px; font-weight: 600; color: var(--ink-dim);
  transition: border-color .12s, color .12s, background .12s;
}
.an-chip:hover { border-color: var(--accent); color: var(--ink); }
.an-chip.on { background: var(--accent); border-color: var(--accent); color: #fff; }
.an-chip em { font-style: normal; font-family: var(--mono); font-size: 11.5px; font-weight: 700; opacity: .75; }
.an-chip .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--tone, var(--ink-faint)); }
.an-chip.on .dot { box-shadow: 0 0 0 2px rgba(255,255,255,.55); }

/* ---------- Списки: строка-таблица на широком экране, карточка на узком ---------- */
.an-list { border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
/* вкладка «Сделки»: на телефоне строка складывается в две */
@media (max-width: 640px) {
  .an-row.g-stage { grid-template-columns: minmax(0, 1fr) auto !important; }
  .an-row.g-stage > span:nth-child(3) { grid-column: 1 / -1; order: 3; }
  .an-row.g-stage > span:nth-child(2) { display: none; }
  .an-row.g-wait { grid-template-columns: 1fr 1fr !important; }
  .an-row.g-wait > span:nth-child(1), .an-row.g-wait > span:nth-child(2) { grid-column: 1 / -1; }
  .an-row.g-wait > span:nth-child(3) { text-align: left !important; }
}
.an-row, .an-hrow { display: grid; gap: 4px 16px; align-items: center; padding: 11px 16px; }
.an-hrow {
  background: var(--surface-sunken); font-size: 11px; font-weight: 700; letter-spacing: .05em;
  text-transform: uppercase; color: var(--ink-faint); padding-top: 9px; padding-bottom: 9px;
}
.an-row { border-top: 1px solid var(--line); color: var(--ink); text-decoration: none; font-size: 13.5px; transition: background .1s; min-height: 48px; }
a.an-row:hover, button.an-row:hover { background: var(--surface-sunken); }
button.an-row { width: 100%; text-align: left; border-left: none; border-right: none; border-bottom: none; background: none; font-family: var(--body); cursor: pointer; }
.an-row .nm { font-weight: 600; line-height: 1.35; min-width: 0; overflow-wrap: anywhere; }
.an-row .dim { color: var(--ink-dim); font-size: 12.5px; line-height: 1.4; min-width: 0; overflow-wrap: anywhere; }
.an-row .amt { font-family: var(--mono); font-weight: 700; font-size: 14px; white-space: nowrap; text-align: right; color: var(--navy); }
.an-row .r, .an-hrow .r { text-align: right; }
.an-foot {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  border-top: 1.5px solid var(--line-bright); background: var(--surface-sunken); padding: 11px 16px; font-size: 13px; font-weight: 700;
}
.an-foot b { font-family: var(--mono); }
.an-more { display: block; width: 100%; border: none; border-top: 1px solid var(--line); background: var(--bg-card);
  padding: 12px; font-family: var(--body); font-size: 13px; font-weight: 700; color: var(--accent); cursor: pointer; }
.an-more:hover { background: var(--surface-sunken); }

/* сетки колонок под разные списки */
.g-pay { grid-template-columns: 172px minmax(0, 1.25fr) minmax(0, 1fr) 96px 150px;
  grid-template-areas: "due project stage share amount"; }
.g-pay > .a-due { grid-area: due; } .g-pay > .a-project { grid-area: project; } .g-pay > .a-stage { grid-area: stage; }
.g-pay > .a-share { grid-area: share; } .g-pay > .a-amount { grid-area: amount; }
.g-work { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1.1fr) 150px 172px minmax(0, .9fr);
  grid-template-areas: "stage project status dates exec"; }
.g-work > .a-stage { grid-area: stage; } .g-work > .a-project { grid-area: project; } .g-work > .a-status { grid-area: status; }
.g-work > .a-dates { grid-area: dates; } .g-work > .a-exec { grid-area: exec; }
.g-act { grid-template-columns: 110px minmax(0, 1.3fr) 130px 130px 130px 130px;
  grid-template-areas: "num project status total paid owed"; }
.g-act > .a-num { grid-area: num; } .g-act > .a-project { grid-area: project; } .g-act > .a-status { grid-area: status; }
.g-act > .a-total { grid-area: total; } .g-act > .a-paid { grid-area: paid; } .g-act > .a-owed { grid-area: owed; }

/* подписи срока */
.an-due { display: flex; flex-direction: column; gap: 3px; align-items: flex-start; }
.an-due .dt { font-family: var(--mono); font-size: 13px; font-weight: 600; color: var(--ink); white-space: nowrap; }
.an-tag {
  display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; font-size: 11.5px; font-weight: 700;
  padding: 2px 8px; border-radius: 999px; border: 1px solid var(--line-bright); color: var(--ink-dim); background: var(--surface-sunken);
}
.an-tag.red { color: #B42318; border-color: rgba(217,45,32,.35); background: rgba(217,45,32,.07); }
.an-tag.amber { color: #93570A; border-color: rgba(224,138,0,.4); background: rgba(224,138,0,.10); }
.an-tag.blue { color: var(--accent); border-color: rgba(10,77,166,.3); background: var(--client-soft); }
.an-tag.green { color: var(--an-paid); border-color: rgba(26,125,73,.3); background: var(--margin-soft); }
.an-tag.violet { color: var(--an-master); border-color: rgba(105,65,198,.3); background: var(--master-soft); }

/* ---------- Проекты: полоса «договор → оплачено → ожидается → просрочено» ---------- */
.an-proj { display: block; padding: 14px 16px; border-top: 1px solid var(--line); color: var(--ink); text-decoration: none; transition: background .1s; }
.an-proj:first-child { border-top: none; }
a.an-proj:hover { background: var(--surface-sunken); }
.an-proj-h { display: flex; align-items: baseline; gap: 8px 12px; flex-wrap: wrap; margin-bottom: 9px; }
.an-proj-h .nm { font-weight: 700; font-size: 14px; line-height: 1.35; min-width: 0; overflow-wrap: anywhere; }
.an-proj-h .tot { margin-left: auto; font-family: var(--mono); font-weight: 700; font-size: 14px; white-space: nowrap; }
.an-proj-h .tot small { font-family: var(--body); font-weight: 500; font-size: 12px; color: var(--ink-faint); margin-right: 6px; }
.an-proj-n { display: flex; flex-wrap: wrap; gap: 4px 18px; margin-top: 9px; font-size: 12.5px; color: var(--ink-dim); }
.an-proj-n span { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.an-proj-n i { width: 8px; height: 8px; border-radius: 2px; flex: none; }
.an-proj-n b { font-family: var(--mono); font-weight: 700; color: var(--ink); }
.an-proj-n .warn b { color: #B42318; }

/* ---------- Что проверить / что делать ---------- */
.an-issue, .an-todo {
  display: flex; gap: 12px; align-items: flex-start; padding: 12px 16px; border-top: 1px solid var(--line);
  color: var(--ink); text-decoration: none; transition: background .1s; min-height: 48px;
}
.an-issue:first-child, .an-todo:first-child { border-top: none; }
a.an-issue:hover, a.an-todo:hover { background: var(--surface-sunken); }
.an-ico {
  width: 30px; height: 30px; border-radius: 9px; flex: none; display: inline-flex; align-items: center; justify-content: center;
  background: var(--surface-sunken); color: var(--ink-dim); border: 1px solid var(--line);
}
.an-ico.red { background: rgba(217,45,32,.08); color: var(--an-over); border-color: rgba(217,45,32,.22); }
.an-ico.amber { background: rgba(224,138,0,.10); color: #B26E00; border-color: rgba(224,138,0,.3); }
.an-ico.blue { background: var(--client-soft); color: var(--accent); border-color: rgba(10,77,166,.2); }
.an-ico.violet { background: var(--master-soft); color: var(--an-master); border-color: rgba(105,65,198,.22); }
.an-ico.green { background: var(--margin-soft); color: var(--an-paid); border-color: rgba(26,125,73,.22); }
.an-issue .tx, .an-todo .tx { flex: 1; min-width: 0; }
.an-issue .tx > span, .an-todo .tx > span { display: block; }
.an-issue .tx > br, .an-todo .tx > br { display: none; }
.an-issue .tt, .an-todo .tt { font-size: 13.5px; font-weight: 600; line-height: 1.4; overflow-wrap: anywhere; }
.an-issue .ss, .an-todo .ss { font-size: 12.5px; color: var(--ink-dim); line-height: 1.45; margin-top: 1px; overflow-wrap: anywhere; }
.an-issue .am, .an-todo .am { font-family: var(--mono); font-weight: 700; font-size: 13.5px; white-space: nowrap; color: var(--ink); padding-top: 2px; }
.an-group-h {
  padding: 9px 16px; background: var(--surface-sunken); border-top: 1px solid var(--line);
  font-size: 11px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: var(--ink-faint);
  display: flex; justify-content: space-between; gap: 10px;
}
.an-group-h:first-child { border-top: none; }

/* ---------- Работа сделана — оплаты нет ---------- */
.an-gap { padding: 14px 16px; border-top: 1px solid var(--line); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 12px 24px; align-items: center;
  color: var(--ink); text-decoration: none; }
.an-gap:first-child { border-top: none; }
a.an-gap:hover { background: var(--surface-sunken); }
.an-gap .nm { font-weight: 700; font-size: 14px; line-height: 1.35; overflow-wrap: anywhere; }
.an-gap .dim { font-size: 12.5px; color: var(--ink-dim); margin-top: 3px; line-height: 1.45; }
.an-pair { display: grid; grid-template-columns: 108px minmax(0, 1fr) 46px; gap: 5px 10px; align-items: center; font-size: 12px; color: var(--ink-dim); }
.an-pair b { font-family: var(--mono); font-weight: 700; color: var(--ink); text-align: right; }

/* ---------- Маржа / загрузка ---------- */
.an-mrow { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1.2fr) 132px 132px 84px; gap: 4px 16px; align-items: center;
  padding: 12px 16px; border-top: 1px solid var(--line); color: var(--ink); text-decoration: none; font-size: 13.5px; min-height: 48px; }
a.an-mrow:hover { background: var(--surface-sunken); }
.an-mrow .pc { font-family: var(--mono); font-weight: 700; text-align: right; white-space: nowrap; }
.an-mrow .pc.low { color: #93570A; } .an-mrow .pc.neg { color: #B42318; }
.an-lrow { display: grid; grid-template-columns: minmax(0, 220px) minmax(0, 1fr) 150px; gap: 4px 16px; align-items: center;
  width: 100%; text-align: left; padding: 11px 16px; border: none; border-top: 1px solid var(--line); background: none;
  font-family: var(--body); color: var(--ink); font-size: 13.5px; cursor: pointer; min-height: 48px; }
.an-lrow:first-child { border-top: none; }
.an-lrow:hover { background: var(--surface-sunken); }
.an-lrow .cnt { display: flex; align-items: center; justify-content: flex-end; gap: 8px; flex-wrap: wrap; font-size: 12.5px; color: var(--ink-dim); }
.an-lrow .cnt b { font-family: var(--mono); font-size: 14px; color: var(--ink); }
.an-lbar { display: flex; gap: 2px; height: 14px; align-items: stretch; }
.an-lbar > i { display: block; border-radius: 0 4px 4px 0; min-width: 4px; }
.an-lbar > i + i { border-radius: 4px; }

/* ---------- Список за цифрой (выезжает справа, на телефоне — снизу) ---------- */
.an-veil { position: fixed; inset: 0; z-index: 92; background: rgba(0,21,61,.36); backdrop-filter: blur(2px); animation: fade .2s both; }
.an-sheet {
  position: absolute; top: 0; right: 0; bottom: 0; width: min(560px, 96vw); background: var(--bg-card);
  border-left: 1px solid var(--line); box-shadow: -12px 0 32px rgba(16,24,40,.12);
  display: flex; flex-direction: column; animation: slide .25s cubic-bezier(.2,.9,.3,1) both;
}
.an-sheet-h { padding: 22px 24px 14px; border-bottom: 1px solid var(--line); display: flex; gap: 12px; align-items: flex-start; }
.an-sheet-h h3 { font-family: var(--disp); font-size: 18px; font-weight: 700; line-height: 1.3; }
.an-sheet-h .sub { font-size: 12.5px; color: var(--ink-dim); margin-top: 3px; line-height: 1.45; }
.an-sheet-h .tot { font-family: var(--mono); font-weight: 700; font-size: 20px; margin-top: 8px; letter-spacing: -.02em; }
.an-x { margin-left: auto; flex: none; width: 36px; height: 36px; border-radius: 9px; border: 1px solid var(--line-bright);
  background: var(--bg-card); color: var(--ink-dim); display: inline-flex; align-items: center; justify-content: center; }
.an-x:hover { color: var(--ink); border-color: var(--ink-faint); }
.an-sheet-b { overflow-y: auto; flex: 1; -webkit-overflow-scrolling: touch; }
.an-sheet-b .an-row { padding-left: 24px; padding-right: 24px; }
.an-sheet-b .an-empty { margin: 20px 24px; }
/* в выезжающем списке всегда «карточная» раскладка */
.an-sheet .g-pay { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "project amount" "stage amount" "due share"; }
.an-sheet .g-work { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "stage status" "project project" "dates dates" "exec exec"; }
.an-sheet .g-act { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "project owed" "num status" "total paid"; }
.an-sheet .g-pay > .a-share, .an-sheet .g-act > .a-paid, .an-sheet .g-act > .a-owed { text-align: right; }
.an-sheet .an-due { flex-direction: row; align-items: center; flex-wrap: wrap; gap: 6px 8px; }
.an-sheet .lbl { display: inline; }
.an-narrow { display: none; }
.lbl { display: none; color: var(--ink-faint); font-family: var(--body); font-weight: 500; font-size: 12px; margin-right: 5px; }

/* ---------- Компактные виджеты для других экранов (PMAnalyticsWidgets) ---------- */
.an-w { background: var(--bg-card); border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; box-shadow: var(--an-shadow); }
.an-w-h { display: flex; align-items: baseline; gap: 8px 12px; flex-wrap: wrap; margin-bottom: 10px; }
.an-w-h b { font-size: 13.5px; font-weight: 700; }
.an-w-h a { margin-left: auto; font-size: 12.5px; font-weight: 700; }
.an-w-next { margin-top: 10px; font-size: 12.5px; color: var(--ink-dim); }
.an-w-next b { color: var(--ink); font-family: var(--mono); }

/* ============================================================
   Планшет и телефон
   ============================================================ */
@media (max-width: 1100px) {
  .an-cols { grid-template-columns: 1fr; }
  .an-kpis.n6 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .an-kpis.n4, .an-kpis.n8 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .an-hero-top { grid-template-columns: 1fr; align-items: start; }
  .g-pay { grid-template-columns: 160px minmax(0, 1.2fr) minmax(0, 1fr) 140px;
    grid-template-areas: "due project stage amount" "due project stage share"; }
  .g-pay > .a-share { text-align: right; }
  .an-hrow.g-pay { grid-template-areas: "due project stage amount"; }
  .an-hrow.g-pay > .a-share { display: none; }
  .g-work { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) 150px 172px;
    grid-template-areas: "stage project status dates" "exec exec exec exec"; }
  .an-hrow.g-work { grid-template-areas: "stage project status dates"; }
  .an-hrow.g-work > .a-exec { display: none; }
  .g-work > .a-exec:empty { display: none; }
  .g-act { grid-template-columns: 96px minmax(0, 1fr) 120px 120px 120px;
    grid-template-areas: "num project total paid owed" "num status total paid owed"; }
  .an-hrow.g-act { grid-template-areas: "num project total paid owed"; }
  .an-hrow.g-act > .a-status { display: none; }
  .an-mrow { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) 124px 84px; }
  .an-mrow > .a-master { display: none; }
}

@media (max-width: 760px) {
  .an-head { gap: 12px; }
  .an-tabs { display: flex; width: 100%; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .an-tabs::-webkit-scrollbar { display: none; }
  .an-tab { flex: 1 0 auto; justify-content: center; min-height: 44px; padding: 8px 14px; }
  .an-bar { padding: 10px; gap: 10px; }
  .an-bar-lbl { display: none; }
  .an-seg { display: flex; width: 100%; }
  .an-seg button { flex: 1; min-height: 44px; padding: 6px 4px; }
  .an-step { width: 100%; }
  .an-step button { width: 44px; height: 44px; flex: none; }
  .an-step b { flex: 1; min-width: 0; }
  .an-custom { width: 100%; display: grid; grid-template-columns: 1fr 1fr; }
  .an-custom input { font-size: 16px; min-height: 44px; width: 100%; }
  .an-custom .an-go { grid-column: 1 / -1; min-height: 44px; }
  .an-custom > span { display: none; }
  .an-cmp { margin-left: 0; width: 100%; }
  .an-search { font-size: 16px; min-height: 44px; width: 100%; }

  .an-card { padding: 16px 14px; border-radius: 13px; }
  .an-hero { padding: 18px 16px 16px 18px; }
  .an-hero-val { font-size: 32px; }
  .an-kpis, .an-kpis.n3, .an-kpis.n4, .an-kpis.n6, .an-kpis.n8 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .an-kpis.n3 > :first-child:nth-last-child(3) { grid-column: 1 / -1; }
  .an-kpi { padding: 12px 13px; min-height: 44px; }
  .an-kpi .v { font-size: 19px; }
  .an-kpi .v.count { font-size: 26px; }
  .an-legend { gap: 6px; }
  button.an-leg { flex: 1 1 100%; min-height: 44px; }
  button.an-leg .tx { flex: 1; flex-direction: row; align-items: baseline; justify-content: space-between; gap: 10px; }
  .an-leg.plain { margin-right: 6px; }
  .an-chips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin: 0 -14px; padding: 2px 14px; }
  .an-chips::-webkit-scrollbar { display: none; }
  .an-chip { min-height: 44px; padding: 8px 14px; flex: none; }
  .an-card-h .tools { width: 100%; flex-wrap: nowrap; }
  .an-card-h .tools .an-seg { flex: 1; width: auto; min-width: 0; }
  .an-card-h .tools .an-link { flex: none; white-space: nowrap; }
  .an-link { min-height: 44px; display: inline-flex; align-items: center; gap: 6px; }
  .an-how summary { min-height: 44px; }
  .an-more { min-height: 48px; }

  /* таблицы → карточки */
  .an-hrow { display: none; }
  .an-row { padding: 13px 14px; gap: 5px 12px; }
  .g-pay { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "project amount" "stage amount" "due share"; }
  .g-pay > .a-share { text-align: right; }
  .g-work { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "stage status" "project project" "dates dates" "exec exec"; }
  .g-act { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "project owed" "num status" "total paid"; }
  .g-act > .a-paid, .g-act > .a-owed { text-align: right; }
  .an-due { flex-direction: row; align-items: center; flex-wrap: wrap; gap: 6px 8px; }
  .lbl { display: inline; }
  .an-foot { padding: 12px 14px; }
  .an-proj { padding: 14px; }
  .an-proj-h .tot { margin-left: 0; width: 100%; }
  .an-issue, .an-todo { padding: 12px 14px; }
  .an-gap { grid-template-columns: 1fr; padding: 14px; }
  .an-mrow { grid-template-columns: minmax(0, 1fr) auto; padding: 13px 14px; }
  .an-mrow > .a-bar { grid-column: 1 / -1; order: 5; }
  .an-mrow > .a-margin { display: none; }
  .an-narrow { display: inline; }
  .an-lrow { grid-template-columns: minmax(0, 1fr) auto; padding: 12px 14px; }
  .an-lrow > .an-lbar { grid-column: 1 / -1; order: 5; }

  .an-sheet { top: auto; left: 0; width: 100%; max-height: 88vh; border-left: none; border-top: 1px solid var(--line);
    border-radius: 18px 18px 0 0; animation: an-up .25s cubic-bezier(.2,.9,.3,1) both; }
  .an-sheet-h { padding: 18px 16px 12px; }
  .an-sheet-b .an-row { padding-left: 16px; padding-right: 16px; }
  .an-x { width: 44px; height: 44px; }
}
@keyframes an-up { from { transform: translateY(40px); opacity: 0; } }

/* палец вместо мыши: зоны нажатия не меньше 44 px и на планшете */
@media (pointer: coarse) {
  .an-tab, .an-chip, button.an-leg, .an-link, .an-how summary { min-height: 44px; }
  .an-seg button { min-height: 44px; }
  .an-step button { width: 44px; height: 44px; }
  .an-custom input, .an-search { font-size: 16px; min-height: 44px; }
}

@media print {
  .an-bar, .an-tabs, .an-how, .an-more { display: none !important; }
  .an-card { box-shadow: none; break-inside: avoid; }
}

/* ============================================================
   Шапка кабинета на средних ширинах (общая, не только аналитика)
   С пунктом «Аналитика» меню стало шире: на экранах уже ~1300 px шапка распирала
   страницу вбок (на планшетах 768–1024 это было и до него). Здесь — страховка,
   чтобы раздел не вносил горизонтальную прокрутку. При слиянии блок стоит
   перенести в app.css рядом с правилами .topbar.
   ============================================================ */
@media (min-width: 641px) and (max-width: 1320px) {
  .topbar .ws { display: none; }
}
@media (min-width: 641px) and (max-width: 1200px) {
  .topbar { gap: 12px; padding: 0 18px; }
  .topbar .brand-mark { font-size: 0; gap: 0; flex: none; }   /* остаётся знак-логотип */
  .topbar .spacer { display: none; }
  .topbar .nav {
    flex: 1 1 0; min-width: 0; margin-left: 4px; padding-right: 22px;
    overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch;
    -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 26px), transparent);
    mask-image: linear-gradient(90deg, #000 calc(100% - 26px), transparent);
  }
  .topbar .nav::-webkit-scrollbar { display: none; }
  .topbar .nav a { flex: none; white-space: nowrap; }
  .topbar .nav a.on { background: rgba(10,77,166,.10); }      /* как на телефоне: пилюля при прокрутке едет криво */
  .topbar .nav .slide-pill { display: none; }
  .topbar .user { flex: none; max-width: 190px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .topbar .btn-ghost { flex: none; }
}