/* Utro · цвета продукта и оформление результата (итог дня к плану, провал по часам, деньги на 30 дней). */
:root {
  --brand: #a65f0e; --brand-2: #9e5a0c; --brand-ink: #7a4307; --brand-soft: #faecd8; --brand-line: #ebcfa6;
  --accent: #2c3e75; --accent-soft: #e9edf7; --accent-ink: #253462;
}
.ut { display: flex; flex-direction: column; gap: 12px; }

/* итог вчерашнего дня */
.ut-head { display: flex; flex-direction: column; gap: 6px; }
.ut-no { font-size: 13px; color: var(--muted); font-weight: 500; }
.ut-day { display: flex; align-items: center; gap: 26px; }
.ut-rev { flex: none; display: flex; align-items: baseline; gap: 10px; line-height: 1; }
.ut-rev > span { font-size: 16px; font-weight: 650; color: var(--ink-2); }
.ut-rev b { font-size: 34px; letter-spacing: -.025em; color: var(--brand); font-variant-numeric: tabular-nums; white-space: nowrap; }
.ut-plan { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.ut-plan-t { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; font-size: 14px; color: var(--ink-2); white-space: nowrap; }
.ut-plan-t b { font-size: 17px; color: var(--ink); }
.ut-bar { position: relative; height: 12px; border-radius: 6px; background: var(--line-2); box-shadow: inset 0 0 0 1px var(--line); overflow: hidden; }
.ut-bar i { position: absolute; left: 0; top: 0; bottom: 0; width: var(--p); border-radius: 6px; background: linear-gradient(90deg, #d39a4f, var(--brand)); transform-origin: 0 50%; }
.ut-bar i.w-h { opacity: 1; transform: scaleX(0); transition: transform 1.1s var(--ease); }
.ut-bar i.w-h.in { transform: none; }

/* две карточки: провал и деньги */
.ut-body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; align-items: stretch; }
.ut-card { position: relative; min-width: 0; display: flex; flex-direction: column; gap: 7px; padding: 11px 12px 10px; border: 1px solid var(--line);
  border-radius: 14px; background: #fff; }
.ut-ch { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; font-size: 12.5px; font-weight: 750; letter-spacing: .06em; text-transform: uppercase; color: var(--brand-ink); }
.ut-ch span:last-child { color: var(--muted); font-weight: 600; letter-spacing: .01em; text-transform: none; font-size: 13px; }
.ut-c2 .ut-ch span:first-child { color: var(--accent-ink); }
.ut-pts { display: flex; flex-wrap: wrap; gap: 4px; min-height: 26px; }
.ut-pt { display: inline-flex; align-items: center; gap: 3px; padding: 3px 7px 3px 5px; border-radius: 7px; background: var(--good-soft); color: var(--good-ink);
  font-size: 13px; font-weight: 600; white-space: nowrap; }
.ut-pt svg, .ut-fix svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 3.2; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.ut-who { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.ut-who b { font-size: 19px; letter-spacing: -.01em; }
.ut-dev { font-size: 13.5px; font-weight: 700; color: var(--bad-ink); background: var(--bad-soft); padding: 3px 9px; border-radius: 7px; }

.ut-svg { display: block; width: 100%; height: auto; overflow: visible; }
.ut-svg text { font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
.ut-grid { fill: none; stroke: #e9edeb; stroke-width: 1; }
.ut-grid path { fill: none; stroke: #e9edeb; stroke-width: 1; }
.ut-axis, .ut-zero { fill: none; stroke: #3c4743; stroke-width: 1.6; }
.ut-xl text, .ut-yl text { font-size: 13px; font-weight: 500; fill: #6f7b76; }
.ut-norm { fill: none; stroke: #97a29d; stroke-width: 2; stroke-dasharray: 5 4; }
.ut-harea { fill: color-mix(in srgb, var(--brand) 11%, transparent); }
.ut-hline { fill: none; stroke: var(--brand); stroke-width: 2.8; stroke-linejoin: round; stroke-linecap: round; }
.ut-band rect { fill: color-mix(in srgb, var(--bad) 10%, transparent); }
.ut-band path { fill: none; stroke: var(--bad); stroke-width: 1.4; stroke-dasharray: 4 3; }
.ut-lost { fill: color-mix(in srgb, var(--bad) 22%, transparent); }
.ut-why text, .ut-call .d { paint-order: stroke; stroke: #fff; stroke-width: 4px; stroke-linejoin: round; }
.ut-why .a { font-size: 14.5px; font-weight: 750; fill: var(--bad-ink); }
.ut-why .b { font-size: 13.5px; font-weight: 650; fill: var(--bad); }
.ut-leg { display: flex; flex-wrap: wrap; gap: 4px 16px; font-size: 13px; color: var(--ink-2); }
.ut-leg span { display: inline-flex; align-items: center; gap: 7px; }
.ut-leg span::before { content: ""; width: 20px; border-top: 2.8px solid var(--brand); }
.ut-leg .b::before { border-top: 2px dashed #97a29d; }

/* деньги: кривая остатка, день разрыва, перенос платежа */
.ut-gday { fill: color-mix(in srgb, var(--good) 13%, transparent); transition: fill .6s; }
.ut-red { fill: color-mix(in srgb, var(--bad) 20%, transparent); transition: fill .6s; }
.ut-cfill { fill: color-mix(in srgb, var(--accent) 9%, transparent); }
.ut-cline { fill: none; stroke: var(--accent); stroke-width: 2.8; stroke-linejoin: round; stroke-linecap: round; }
.ut-ghost { fill: none; stroke: var(--bad); stroke-width: 1.6; stroke-dasharray: 4 4; }
.ut-was { font-size: 13px; font-weight: 700; fill: var(--bad); paint-order: stroke; stroke: #fff; stroke-width: 4px; stroke-linejoin: round; }
.ut-cdot { fill: var(--good); stroke: #fff; stroke-width: 2.5; transition: fill .5s; }
.ut-lane { fill: none; stroke: var(--line); stroke-width: 1.5; }
.ut-ticks circle { fill: #aab3c8; }
.ut-call .d { font-size: 13px; font-weight: 750; fill: var(--good-ink); transition: fill .5s; }
.ut-gp rect { fill: var(--good); transition: fill .5s; }
.ut-gp text { font-size: 13px; font-weight: 750; fill: #fff; font-variant-numeric: tabular-nums; }
.ut-arc, .ut-arh { fill: none; stroke: var(--accent); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.ut-mvw { transition: transform 1.3s var(--ease); }
.ut-mv circle, .ut-mv rect { fill: var(--accent); }
.ut-mv text { font-size: 13px; font-weight: 700; fill: #fff; }
.ut-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 52px; margin-top: auto; }
.ut-fix { display: inline-flex; align-items: center; gap: 7px; padding: 10px 14px; border-radius: 11px; font-size: 14px; font-weight: 700; line-height: 1.25;
  background: var(--good-soft); color: var(--good-ink); border: 1px solid color-mix(in srgb, var(--good) 28%, transparent);
  transition: background .4s, color .4s, border-color .4s, box-shadow .25s, opacity .45s var(--ease), transform .2s var(--ease); }
.ut-fix .pre { display: none; align-items: center; gap: 8px; }
.ut-fix .post { display: inline-flex; align-items: center; gap: 6px; }
.ut-fix .pre svg { width: 15px; height: 15px; stroke-width: 2.6; }
.ut-fix.press { transform: scale(.94); box-shadow: 0 0 0 6px color-mix(in srgb, var(--accent) 26%, transparent); }
.ut-stamp { flex: none; --rot: -6deg; display: flex; flex-direction: column; align-items: center; gap: 1px; margin-right: 6px; padding: 5px 13px;
  border: 3px solid #15803d; border-radius: 10px; color: #15803d; background: rgba(255, 255, 255, .92); text-transform: uppercase;
  box-shadow: inset 0 0 0 2px rgba(21, 128, 61, .22); white-space: nowrap; }
.ut-stamp b { font-size: 15px; letter-spacing: .07em; font-weight: 850; }
.ut-stamp span { font-size: 13px; font-weight: 700; letter-spacing: .03em; }

/* до решения владельца: разрыв красный, кнопка переноса ждёт нажатия */
.ut.pre .ut-gday { fill: color-mix(in srgb, var(--bad) 15%, transparent); }
.ut.pre .ut-red { fill: color-mix(in srgb, var(--bad) 62%, transparent); }
.ut.pre .ut-cdot { fill: var(--bad); }
.ut.pre .ut-call .d { fill: var(--bad-ink); }
.ut.pre .ut-gp rect { fill: var(--bad); }
.ut.pre .ut-mvw { transform: translateX(var(--dx)); }
.ut.pre .ut-fix { background: var(--accent); color: #fff; border-color: var(--accent); box-shadow: 0 10px 20px -10px var(--accent); }
.ut.pre .ut-fix.press { box-shadow: 0 0 0 6px color-mix(in srgb, var(--accent) 26%, transparent); }
.ut.pre .ut-fix .pre { display: inline-flex; }
.ut.pre .ut-fix .post { display: none; }

/* сводка в Telegram (левая колонка) */
.ut-tg { display: flex; flex-direction: column; gap: 8px; min-width: 250px; }
.ut-tg p { margin: 0; display: flex; gap: 9px; font-size: 15px; line-height: 1.42; }
.ut-tg p i { flex: none; width: 9px; height: 9px; margin-top: 7px; border-radius: 50%; background: var(--good); }
.ut-tg p i.y { background: var(--warn); }
.ut-tg p i.r { background: var(--bad); }
.ut-kb { display: flex; flex-direction: column; gap: 5px; margin-top: 3px; }
.ut-kb span { padding: 7px 10px; border-radius: 9px; text-align: center; font-size: 14px; font-weight: 650; background: var(--accent-soft); color: var(--accent-ink); }
.ut-kb span.go { background: var(--accent); color: #fff; }
.ut-kb span.on { box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 28%, transparent); }

/* снимки итога и миниатюры: без переходов; ?qa=1 (снимки в виртуальном времени): кадр показывает состояние без полупрозрачных переходов */
.w-final .ut *, .w-th-in .ut * { transition: none !important; animation: none !important; }
.ut-qa .w-h, .ut-qa .w-d, .ut-qa .w-stamp, .ut-qa .w-result, .ut-qa .w-msg, .ut-qa .w-note, .ut-qa .ut * { transition: none !important; animation: none !important; }

@container (max-width: 700px) {
  .ut-body { grid-template-columns: minmax(0, 1fr); }
  .ut-day { flex-direction: column; align-items: stretch; gap: 10px; }
  .ut-rev b { font-size: 30px; }
  .ut-hsvg .ut-xl text { font-size: 15px; }
  .ut-why .a { font-size: 17px; }
  .ut-why .b { font-size: 15.5px; }
  .ut-call .d, .ut-was { font-size: 14.5px; }
  .ut-foot { flex-wrap: wrap; }
}