:root {
  --bg: #f6f7f9; --card: #fff; --ink: #1d2733; --muted: #6b7681; --line: #e3e6ea;
  --blue: #1f4e79; --blue-l: #dbe7f3; --green: #2e7d4f; --green-l: #d9efe2; --amber: #a86a00; --amber-l: #fbefd5;
  --red: #b3261e; --red-l: #f9dedc; --grey-l: #eceef0;
}
* { box-sizing: border-box; }
body { margin: 0; font: 14px/1.45 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; color: var(--ink); background: var(--bg); }
a { color: var(--blue); text-decoration: none; }
a:hover { text-decoration: underline; }
main { padding: 16px 20px 40px; max-width: 1500px; margin: 0 auto; }
h1 { font-size: 22px; margin: 4px 0 14px; }
h2 { font-size: 16px; margin: 22px 0 8px; }
.top { display: flex; align-items: center; gap: 20px; padding: 10px 20px; background: var(--card); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 5; }
.brand { font-weight: 700; color: var(--ink); }
.top nav { display: flex; gap: 4px; flex: 1; flex-wrap: wrap; }
.top nav a { padding: 6px 10px; border-radius: 6px; color: var(--muted); }
.top nav a.on { background: var(--blue-l); color: var(--blue); }
.card { background: var(--card); border: 1px solid var(--line); border-radius: 8px; padding: 14px 16px; margin-bottom: 14px; }
.row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.muted { color: var(--muted); }
.small { font-size: 12px; }
.btn { display: inline-block; padding: 6px 12px; border: 1px solid var(--line); border-radius: 6px; background: var(--card); color: var(--ink); cursor: pointer; font: inherit; }
.btn:hover { text-decoration: none; border-color: #c5cbd1; }
.btn.primary { background: var(--blue); border-color: var(--blue); color: #fff; }
.btn.danger { color: var(--red); }
.btn.small { padding: 2px 8px; font-size: 12px; }
input, select, textarea { font: inherit; padding: 5px 8px; border: 1px solid #cdd2d8; border-radius: 6px; background: #fff; }
input[type=number] { width: 80px; }
label { display: flex; flex-direction: column; gap: 3px; font-size: 12px; color: var(--muted); }
.form-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 10px 14px; align-items: end; }
.form-grid .wide { grid-column: span 2; }
table { border-collapse: collapse; width: 100%; }
th, td { padding: 6px 8px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: middle; }
th { font-size: 12px; color: var(--muted); font-weight: 600; }
td.num, th.num { text-align: right; white-space: nowrap; }
.badge { display: inline-block; padding: 1px 8px; border-radius: 10px; font-size: 12px; white-space: nowrap; }
.badge.draft { background: var(--amber-l); color: var(--amber); }
.badge.confirmed { background: var(--green-l); color: var(--green); }
.badge.cancelled { background: var(--grey-l); color: var(--muted); }
.flag { font-weight: 700; color: var(--red); }
.flag.warn { color: var(--amber); }
.problems li { margin: 3px 0; }
.problems .shortage { color: var(--red); }
.problems .tentative, .problems .turnover { color: var(--amber); }
tr.bad td { background: var(--red-l); }
tr.warn td { background: var(--amber-l); }
.totals td { border: 0; padding: 3px 8px; }
.totals .big { font-size: 16px; font-weight: 700; }
/* календарь */
.cal-wrap { overflow-x: auto; background: var(--card); border: 1px solid var(--line); border-radius: 8px; }
.cal { border-collapse: separate; border-spacing: 0; min-width: 100%; }
.cal th, .cal td { border-bottom: 1px solid var(--line); padding: 0; height: 30px; }
.cal th.d, .cal td.d { width: 28px; min-width: 28px; text-align: center; font-size: 11px; border-left: 1px solid #f0f2f4; }
.cal th.d.we { background: #f3f4f6; }
.cal th.d.today { background: var(--blue); color: #fff; }
.cal td.name { position: sticky; left: 0; background: var(--card); padding: 4px 10px; min-width: 260px; max-width: 320px; border-right: 1px solid var(--line); z-index: 1; }
.cal td.name .t { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cal td.on.draft { background: var(--amber-l); }
.cal td.on.confirmed { background: var(--green-l); }
.cal td.on.cancelled { background: var(--grey-l); }
.cal td.on.ev.draft { background: #f2cd7d; }
.cal td.on.ev.confirmed { background: #8fcaa6; }
.cal td.on.ev.cancelled { background: #d3d6da; }
.legend { display: flex; gap: 14px; flex-wrap: wrap; font-size: 12px; color: var(--muted); margin: 8px 0; }
.legend i { display: inline-block; width: 14px; height: 10px; border-radius: 2px; margin-right: 4px; vertical-align: middle; }
/* шкала позиции */
.tl { display: flex; gap: 2px; align-items: flex-end; overflow-x: auto; padding-bottom: 4px; }
.tl .day { width: 26px; min-width: 26px; text-align: center; font-size: 10px; color: var(--muted); }
.tl .bar { height: 90px; display: flex; flex-direction: column-reverse; background: var(--grey-l); border-radius: 3px; overflow: hidden; }
.tl .bar .c { background: #6fb58b; }
.tl .bar .dr { background: #f2cd7d; }
.tl .bar .over { background: var(--red); }
.tl .day.today { color: var(--blue); font-weight: 700; }
@media (max-width: 700px) {
  main { padding: 12px; }
  .top { gap: 10px; padding: 8px 12px; flex-wrap: wrap; }
  .form-grid .wide { grid-column: span 1; }
}
/* финальная версия */
.narrow { max-width: 420px; margin: 40px auto; display: flex; flex-direction: column; gap: 10px; }
.who { display: flex; align-items: center; gap: 8px; }
textarea { width: 100%; resize: vertical; }
.card > label { margin-top: 8px; }
.sep { padding: 10px 0; border-bottom: 1px dashed var(--line); }
.sep:last-child { border-bottom: 0; }
details.more { margin-top: 4px; }
details.more > div { display: grid; gap: 6px; padding: 6px 0; min-width: 220px; }
details.more summary { cursor: pointer; color: var(--blue); }
td .row label { color: var(--ink); }
/* варианты интерфейса */
.views { display: flex; gap: 4px; align-items: center; justify-content: flex-end; margin: -6px 0 6px; flex-wrap: wrap; }
.views a { padding: 3px 10px; border-radius: 12px; font-size: 12px; color: var(--muted); border: 1px solid var(--line); background: var(--card); }
.views a.on { background: var(--blue); color: #fff; border-color: var(--blue); text-decoration: none; }
.tabs-layout { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 16px; align-items: start; }
.tabs-side { position: sticky; top: 64px; }
.tabbar { display: flex; gap: 2px; border-bottom: 2px solid var(--line); margin: 6px 0 14px; flex-wrap: wrap; }
.tabbar a { padding: 8px 14px; color: var(--muted); border-bottom: 2px solid transparent; margin-bottom: -2px; }
.tabbar a.on { color: var(--blue); border-bottom-color: var(--blue); font-weight: 600; text-decoration: none; }
.stack { display: flex; flex-direction: column; gap: 6px; }
.stack .btn { text-align: center; }
.side-row { display: flex; justify-content: space-between; gap: 8px; padding: 3px 0; }
.side-row.big { font-size: 16px; border-top: 1px solid var(--line); margin-top: 4px; padding-top: 6px; }
.xl-wrap { overflow-x: auto; padding: 0; }
.xl th, .xl td { padding: 4px 8px; border: 1px solid var(--line); }
.xl th { background: #eef1f4; }
.xl-section td { background: #f3f6f9; }
.xl-total td { border: 0; padding: 3px 8px; }
@media (max-width: 1000px) { .tabs-layout { grid-template-columns: 1fr; } .tabs-side { position: static; } }
/* главная */
.dash { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 14px; }
.dash .card { margin: 0; }
.dash h2 { margin: 0 0 8px; }
.kpi { display: flex; gap: 22px; flex-wrap: wrap; }
.kpi div b { display: block; font-size: 22px; }
.list li { margin: 4px 0; }
.chip { display: inline-block; font-size: 11px; padding: 0 6px; border-radius: 8px; margin-right: 4px; }
.chip.out { background: var(--blue-l); color: var(--blue); }
.chip.back { background: var(--grey-l); color: var(--ink); }
.chip.ev { background: var(--green-l); color: var(--green); }
/* календарь-сетка */
.month { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.month .dow { background: #eef1f4; padding: 4px 6px; font-size: 12px; color: var(--muted); }
.month .cell { background: var(--card); min-height: 96px; padding: 4px; font-size: 12px; }
.month .cell.other { background: #fafbfc; color: #b3b9c0; }
.month .cell.today .dn { background: var(--blue); color: #fff; border-radius: 10px; padding: 0 6px; }
.month .ev { display: block; margin: 2px 0; padding: 1px 5px; border-radius: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--ink); }
.month .ev.confirmed { background: var(--green-l); } .month .ev.confirmed.main { background: #8fcaa6; }
.month .ev.draft { background: var(--amber-l); } .month .ev.draft.main { background: #f2cd7d; }
.month .ev.cancelled { background: var(--grey-l); color: var(--muted); }

/* ---------------------------------------------------------------- компактно (поверх всего выше) */
body { font-size: 13px; line-height: 1.35; }
main { padding: 10px 14px 30px; max-width: 1600px; }
h1 { font-size: 18px; margin: 2px 0 8px; }
h2 { font-size: 14px; margin: 12px 0 6px; }
.top { padding: 6px 14px; gap: 12px; }
.top nav a { padding: 4px 8px; }
.card { padding: 10px 12px; margin-bottom: 10px; border-radius: 6px; }
.btn { padding: 4px 10px; border-radius: 5px; }
.btn.small { padding: 1px 7px; font-size: 11.5px; }
input, select, textarea { padding: 3px 6px; border-radius: 5px; font-size: 13px; }
label { font-size: 11.5px; gap: 2px; }
.form-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 6px 10px; }
th, td { padding: 3px 6px; }
th { font-size: 11.5px; }
.badge { font-size: 11px; padding: 0 7px; }
p { margin: 6px 0; }
.legend { margin: 4px 0; gap: 10px; }
.views { margin: -4px 0 4px; }
.views a { padding: 1px 8px; font-size: 11.5px; }
.cal th, .cal td { height: 24px; }
.cal th.d, .cal td.d { width: 24px; min-width: 24px; }
.cal td.name { min-width: 220px; padding: 2px 8px; }
.tabs-layout { gap: 10px; grid-template-columns: minmax(0, 1fr) 260px; }
.tabs-side { top: 46px; }
.tabbar { margin: 4px 0 8px; }
.tabbar a { padding: 5px 10px; }
.side-row { padding: 2px 0; }
.dash { gap: 10px; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.kpi div b { font-size: 18px; }
.month .cell { min-height: 72px; padding: 3px; }
.xl th, .xl td { padding: 2px 6px; }
.problems li { margin: 2px 0; }
.list li { margin: 2px 0; }
td input[name=qty] { padding: 1px 4px; }
.sep { padding: 6px 0; }

/* ---------------------------------------------------------------- меню «Оформление» */
.theme-menu { position: relative; }
.theme-menu summary { list-style: none; cursor: pointer; }
.theme-menu summary::-webkit-details-marker { display: none; }
.theme-menu > div { position: absolute; right: 0; top: 28px; z-index: 20; background: var(--card); border: 1px solid var(--line);
  border-radius: 6px; box-shadow: 0 6px 20px rgba(0,0,0,.12); padding: 4px; min-width: 230px; display: flex; flex-direction: column; }
.theme-menu > div a { padding: 5px 8px; border-radius: 4px; color: var(--ink); display: flex; flex-direction: column; }
.theme-menu > div a span { font-size: 11px; color: var(--muted); }
.theme-menu > div a.on, .theme-menu > div a:hover { background: var(--blue-l); text-decoration: none; }

  gap: 8px; padding: 14px 10px; background: #1e2a38; border: 0; }

/* ---------------------------------------------------------------- оформление «Таблица» (Excel, 1С) */
body.theme-sheet { --bg: #ffffff; --line: #d0d0d0; --blue: #1d6b41; --blue-l: #e3efe7; font-family: "Segoe UI", Arial, sans-serif; }
body.theme-sheet .top { background: #217346; border: 0; }
body.theme-sheet .top .brand, body.theme-sheet .top nav a, body.theme-sheet .who .muted { color: #fff; }
body.theme-sheet .top nav a.on { background: #fff; color: #217346; }
body.theme-sheet .top .btn { border-radius: 0; }
body.theme-sheet .top .btn.primary { background: #fff; color: #217346; border-color: #fff; }
body.theme-sheet .card, body.theme-sheet .btn, body.theme-sheet input, body.theme-sheet select, body.theme-sheet textarea,
body.theme-sheet .badge, body.theme-sheet .views a, body.theme-sheet .cal-wrap, body.theme-sheet .month { border-radius: 0; }
body.theme-sheet .card { border-color: #c8c8c8; box-shadow: none; }
body.theme-sheet .btn { background: #f3f3f3; border-color: #adadad; }
body.theme-sheet .btn.primary { background: #217346; border-color: #217346; color: #fff; }
body.theme-sheet table th, body.theme-sheet table td { border: 1px solid #d4d4d4; }
body.theme-sheet table th { background: #f2f2f2; color: #333; }
body.theme-sheet .totals td, body.theme-sheet .xl-total td { border: 0; }
body.theme-sheet .tabbar a.on { color: #217346; border-bottom-color: #217346; }
body.theme-sheet .views a.on { background: #217346; border-color: #217346; }
body.theme-sheet h1, body.theme-sheet h2 { font-weight: 600; }

/* ---------------------------------------------------------------- оформление «Тёмное» */
body.theme-dark { --bg: #14181d; --card: #1c2229; --ink: #e4e8ec; --muted: #97a2ad; --line: #2c343d;
  --blue: #6ea8e6; --blue-l: #233449; --green: #6cc391; --green-l: #1f3a2c; --amber: #e8b45a; --amber-l: #3d3220;
  --red: #f07c73; --red-l: #3e2423; --grey-l: #2a3139; color-scheme: dark; }
body.theme-dark input, body.theme-dark select, body.theme-dark textarea { background: #12161b; color: var(--ink); border-color: #38424d; }
body.theme-dark .btn { background: #232a32; color: var(--ink); border-color: #38424d; }
body.theme-dark .btn.primary { background: #3d7cc9; border-color: #3d7cc9; color: #fff; }
body.theme-dark .top { background: #1a1f25; }
body.theme-dark .brand { color: var(--ink); }
body.theme-dark th, body.theme-dark .xl th, body.theme-dark .month .dow { background: #222a32; }
body.theme-dark .xl-section td { background: #202830; }
body.theme-dark .cal td.name { background: var(--card); }
body.theme-dark .cal th.d.we, body.theme-dark .month .cell.other { background: #181d23; }
body.theme-dark .month .cell { background: var(--card); }
body.theme-dark .cal td.on.ev.confirmed, body.theme-dark .month .ev.confirmed.main { background: #2f7a50; }
body.theme-dark .cal td.on.ev.draft, body.theme-dark .month .ev.draft.main { background: #8a6a24; }
body.theme-dark .month .ev { color: var(--ink); }
body.theme-dark tr.bad td { background: #3a2222; }
body.theme-dark tr.warn td { background: #352c1c; }

/* ================================================================ живые элементы (все темы) */
:root {
  --accent1: #3b82f6; --accent2: #8b5cf6;                       /* градиент рамок и акцентов */
  --bar-conf1: #34b27b; --bar-conf2: #1f9d6a; --bar-conf-ev: #0f7a50;
  --bar-draft1: #f6c45b; --bar-draft2: #eea935; --bar-draft-ev: #c98510;
  --bar-cancel: #c4cad1; --today: #ef4444; --weekend: rgba(15, 23, 42, .035);
}
.dash { align-items: start; }                                    /* карточки не тянутся по самой высокой */
.ico { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round;
  stroke-linejoin: round; vertical-align: -3px; margin-right: 5px; opacity: .85; }
.hello { margin: 0; font-size: 12px; color: var(--muted); letter-spacing: .02em; }
/* карточка с градиентной рамкой и акцентной полосой сверху */
.card { position: relative; border: 1px solid transparent;
  background: linear-gradient(var(--card), var(--card)) padding-box,
              linear-gradient(135deg, color-mix(in srgb, var(--accent1) 35%, var(--line)), var(--line) 40%, var(--line) 60%,
                              color-mix(in srgb, var(--accent2) 35%, var(--line))) border-box; }
.dash .card::before, .kpi::before { content: ''; position: absolute; left: 12px; right: 12px; top: -1px; height: 3px;
  border-radius: 0 0 3px 3px; background: linear-gradient(90deg, var(--accent1), var(--accent2)); opacity: .85; }
.card:hover { box-shadow: 0 4px 18px rgba(15, 23, 42, .06); }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--accent1);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent1) 22%, transparent); }
.kpi .load { min-width: 220px; }
.bar { display: block; height: 6px; border-radius: 6px; background: var(--grey-l); margin: 4px 0 2px; overflow: hidden; }
.bar > i { display: block; height: 100%; border-radius: 6px; background: linear-gradient(90deg, var(--accent1), var(--accent2)); }

/* ---------------------------------------------------------------- календарь-диаграмма */
.gantt { background: var(--card); border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.g-head, .g-row { display: grid; grid-template-columns: 230px minmax(0, 1fr); }
.g-head { position: sticky; top: 0; z-index: 2; background: var(--card); border-bottom: 1px solid var(--line); }
.g-days, .g-track { display: grid; grid-template-columns: repeat(var(--n), minmax(22px, 1fr)); position: relative; }
.g-days div { text-align: center; padding: 4px 0 3px; font-size: 11px; color: var(--muted); line-height: 1.1; }
.g-days div b { display: block; font-size: 12.5px; color: var(--ink); font-weight: 600; }
.g-days div.we { background: var(--weekend); }
.g-days div.today b { color: #fff; background: var(--today); border-radius: 10px; margin: 0 auto; width: 22px; }
.g-name { padding: 6px 10px; border-right: 1px solid var(--line); overflow: hidden; }
.g-name a { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 600; }
.g-name span { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.g-row { border-bottom: 1px solid var(--line); }
.g-row:last-child { border-bottom: 0; }
.g-row:hover { background: color-mix(in srgb, var(--accent1) 4%, transparent); }
.g-track { align-items: center; min-height: 40px; }
.g-track > i { grid-row: 1; height: 100%; border-left: 1px solid color-mix(in srgb, var(--line) 55%, transparent); }
.g-track > i.we { background: var(--weekend); }
.g-track > i.today { box-shadow: inset 2px 0 0 var(--today); }
.g-bar { grid-row: 1; position: relative; height: 26px; margin: 0 2px; border-radius: 13px; overflow: hidden;
  display: flex; align-items: center; color: #fff; font-size: 12px; text-decoration: none; z-index: 1;
  box-shadow: 0 2px 6px rgba(15, 23, 42, .15); transition: transform .12s, box-shadow .12s; }
.g-bar:hover { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(15, 23, 42, .22); text-decoration: none; }
.g-bar span { position: relative; z-index: 1; padding: 0 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .25); }
.g-bar.confirmed { background: linear-gradient(90deg, var(--bar-conf1), var(--bar-conf2)); }
.g-bar.draft { background: repeating-linear-gradient(135deg, var(--bar-draft1) 0 8px, var(--bar-draft2) 8px 16px); color: #3b2a05; }
.g-bar.draft span { text-shadow: none; }
.g-bar.cancelled { background: var(--bar-cancel); color: #555; text-decoration: line-through; }
.g-ev { position: absolute; top: 0; bottom: 0; background: var(--bar-conf-ev); opacity: .55; }
.g-bar.draft .g-ev { background: var(--bar-draft-ev); opacity: .35; }
.g-bar.short { box-shadow: 0 0 0 2px var(--red), 0 2px 8px rgba(220, 38, 38, .35); }
.g-bar.cut-l { border-top-left-radius: 0; border-bottom-left-radius: 0; margin-left: 0; }
.g-bar.cut-r { border-top-right-radius: 0; border-bottom-right-radius: 0; margin-right: 0; }
.g-bar.cut-r::after { content: '›'; position: absolute; right: 4px; font-weight: 700; z-index: 1; }
.g-flag { display: inline-block; width: 15px; height: 15px; line-height: 15px; text-align: center; border-radius: 50%;
  background: #fff; color: var(--red); margin-right: 5px; font-size: 11px; }
.g-flag.warn { color: var(--amber); }
.g-empty { padding: 18px; }
/* сетка месяца — тоже полосы с градиентом */
.month .ev.confirmed { background: linear-gradient(90deg, color-mix(in srgb, var(--bar-conf1) 30%, var(--card)), color-mix(in srgb, var(--bar-conf2) 30%, var(--card))); }
.month .ev.confirmed.main { background: linear-gradient(90deg, var(--bar-conf1), var(--bar-conf2)); color: #fff; }
.month .ev.draft.main { background: repeating-linear-gradient(135deg, var(--bar-draft1) 0 6px, var(--bar-draft2) 6px 12px); }
.month .ev { border-radius: 8px; }

/* ---------------------------------------------------------------- загрузка картинок и компании */
input[type=file]::file-selector-button { font: inherit; border: 1px solid var(--line); border-radius: 6px; padding: 3px 10px;
  background: var(--card); color: var(--ink); cursor: pointer; margin-right: 8px; }
.upload { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  min-height: 130px; padding: 10px; border: 1.5px dashed color-mix(in srgb, var(--accent1) 35%, var(--line)); border-radius: 12px;
  background: color-mix(in srgb, var(--accent1) 3%, var(--card)); cursor: pointer; transition: border-color .15s, background .15s; }
.upload:hover { border-color: var(--accent1); background: color-mix(in srgb, var(--accent1) 7%, var(--card)); }
.upload.changed { border-style: solid; border-color: var(--green); }
.upload input[type=file] { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.upload img { max-width: 100%; max-height: 86px; object-fit: contain; }
.upload-title { position: absolute; top: 6px; left: 10px; font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.upload-empty { color: var(--muted); font-size: 12px; }
.upload .pick { font-size: 12px; color: var(--accent1); font-weight: 600; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.entity { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 14px; padding: 12px; margin: 10px 0;
  border: 1px solid var(--line); border-radius: 12px; }
.entity-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 12px; align-content: start; }
.entity-fields .wide { grid-column: 1 / -1; }
.entity-stamps { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.entity-save { grid-column: 1 / -1; display: flex; justify-content: flex-end; }
.add-entity summary { list-style: none; display: inline-block; cursor: pointer; }
@media (max-width: 900px) { .entity { grid-template-columns: 1fr; } }

/* ---------------------------------------------------------------- значок ⓘ с пояснением */
.info { display: inline-flex; align-items: center; justify-content: center; width: 15px; height: 15px; border-radius: 50%;
  font: italic 700 10px/1 Georgia, serif; color: var(--accent1); border: 1.3px solid currentColor; cursor: help;
  position: relative; vertical-align: 1px; margin-left: 3px; text-transform: none; letter-spacing: 0; }
/* само пояснение — один плавающий блок .tip-pop, его ставит скрипт в base.html в пределах окна */
.tip-pop { position: fixed; z-index: 1000; max-width: 320px; padding: 8px 10px; border-radius: 8px; pointer-events: none;
  background: #1f2937; color: #f9fafb; font: 400 12px/1.45 system-ui, "Segoe UI", sans-serif;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .28); opacity: 0; transition: opacity .12s; }
.tip-pop.on { opacity: 1; }

/* ---------------------------------------------------------------- «Требует внимания» на главной */
.tips h2 { margin: 0 0 6px; display: flex; align-items: center; gap: 6px; }
.tips .count { font-size: 11px; font-weight: 700; color: #fff; background: var(--accent1); border-radius: 9px; padding: 0 7px; }
.pills { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.pills a { display: inline-flex; align-items: center; gap: 6px; padding: 3px 11px; border-radius: 999px; background: var(--card);
  border: 1px solid var(--line); color: var(--ink); text-decoration: none; font-size: 12.5px; transition: border-color .12s, box-shadow .12s; }
.pills a:hover { border-color: var(--accent1); box-shadow: 0 2px 8px rgba(16, 64, 40, .12); text-decoration: none; }
.pills a i { width: 8px; height: 8px; border-radius: 50%; flex: none; background: #9aa8a0; }
.pills a.bad i { background: var(--red); box-shadow: 0 0 0 3px color-mix(in srgb, var(--red) 18%, transparent); }
.pills a.warn i { background: var(--amber); }
.pills a.bad { font-weight: 600; }
.sec { display: grid; grid-template-columns: 120px 1fr 44px; gap: 8px; align-items: center; margin: 5px 0; }
.sec b { text-align: right; white-space: nowrap; }
.loadcard { cursor: pointer; }
.loadcard .sec { grid-template-columns: 120px 1fr auto; }
.loadcard[data-unit=pct] .u-rub, .loadcard[data-unit=rub] .u-pct { display: none; }
.loadcard .u-rub small { font-weight: 400; color: var(--muted); }
.unit-switch { margin-left: auto; display: inline-flex; border: 1px solid var(--line); border-radius: 6px; overflow: hidden; }
.unit-switch button { border: 0; background: var(--card); color: var(--muted); font: inherit; font-size: 12px; padding: 1px 9px; cursor: pointer; }
.loadcard[data-unit=pct] .unit-switch [data-u=pct], .loadcard[data-unit=rub] .unit-switch [data-u=rub] { background: var(--accent1); color: #fff; }
.g-pct { position: relative; z-index: 1; margin-left: auto; padding: 0 8px; font-style: normal; font-size: 11px; font-weight: 700;
  opacity: .9; white-space: nowrap; }

/* ================================================================ «Таблица» — основное оформление (зелёное, как Excel) */
body.theme-sheet {
  --bg: #f4f7f5; --card: #ffffff; --ink: #1c2b23; --muted: #5f7068; --line: #d5e0d9;
  --blue: #1e7145; --blue-l: #e3f1e8; --accent1: #1e7a4a; --accent2: #3fae72;
  --green: #1e7a4a; --green-l: #dff2e6; --amber: #b7791f; --amber-l: #fdf3dc; --red: #c53030; --red-l: #fde8e8;
  --bar-conf1: #3fae72; --bar-conf2: #1e7a4a; --bar-conf-ev: #0f4f2e; --today: #d9480f;
  font-family: "Segoe UI", Arial, sans-serif;
  background: linear-gradient(180deg, #e9f2ec 0, #f4f7f5 220px) fixed;
}
body.theme-sheet .top { background: linear-gradient(90deg, #17583a 0%, #1e7145 45%, #26885a 100%); border: 0;
  box-shadow: 0 2px 10px rgba(16, 64, 40, .25); }
body.theme-sheet .top .brand { color: #fff; letter-spacing: .02em; }
body.theme-sheet .top nav a { color: rgba(255, 255, 255, .88); border-radius: 6px; }
body.theme-sheet .top nav a:hover { background: rgba(255, 255, 255, .12); text-decoration: none; }
body.theme-sheet .top nav a.on { background: #fff; color: #17583a; box-shadow: 0 2px 6px rgba(0, 0, 0, .15); }
body.theme-sheet .who .muted { color: rgba(255, 255, 255, .85); }
body.theme-sheet .top .btn { border-radius: 6px; background: rgba(255, 255, 255, .12); color: #fff; border-color: rgba(255, 255, 255, .35); }
body.theme-sheet .top .btn.primary { background: #fff; color: #17583a; border-color: #fff; font-weight: 600; }
body.theme-sheet .card, body.theme-sheet .btn, body.theme-sheet input, body.theme-sheet select, body.theme-sheet textarea,
body.theme-sheet .views a, body.theme-sheet .month, body.theme-sheet .gantt { border-radius: 6px; }
body.theme-sheet .card { background: linear-gradient(#fff, #fff) padding-box,
  linear-gradient(135deg, #8cc9a6, #d5e0d9 30%, #d5e0d9 70%, #a9d8bc) border-box; border: 1px solid transparent;
  box-shadow: 0 1px 2px rgba(16, 64, 40, .05); }
body.theme-sheet .card:hover { box-shadow: 0 6px 18px rgba(16, 64, 40, .09); }
body.theme-sheet h1 { font-weight: 700; color: #17442e; }
body.theme-sheet h2 { font-weight: 600; color: #17442e; padding-left: 8px; border-left: 3px solid #3fae72; }
body.theme-sheet .btn { background: #fff; border-color: #b9cfc2; color: #1c2b23; }
body.theme-sheet .btn:hover { border-color: #1e7a4a; background: #f2f9f4; }
body.theme-sheet .btn.primary { background: linear-gradient(180deg, #2a8a58, #1e7145); border-color: #1a6640; color: #fff; }
body.theme-sheet .btn.primary:hover { background: linear-gradient(180deg, #2f9861, #1e7a4a); }
body.theme-sheet .btn.danger { color: var(--red); }
body.theme-sheet table th, body.theme-sheet table td { border: 1px solid #dde7e1; }
body.theme-sheet table th { background: linear-gradient(180deg, #f3f9f5, #e6f1ea); color: #2c4a3a; border-bottom: 2px solid #9fcfb3; }
body.theme-sheet table tr:hover td { background: #f3faf5; }
body.theme-sheet .totals td, body.theme-sheet .xl-total td, body.theme-sheet .entity td { border: 0; }
body.theme-sheet .totals tr:hover td, body.theme-sheet .xl-total:hover td { background: transparent; }
body.theme-sheet .xl-section td { background: #ecf5ef; font-weight: 600; }
body.theme-sheet .tabbar a.on { color: #1e7145; border-bottom-color: #1e7145; }
body.theme-sheet .views a.on { background: #1e7145; border-color: #1e7145; }
body.theme-sheet .badge { border-radius: 4px; }
body.theme-sheet .badge.confirmed { background: #dff2e6; color: #17663f; }
body.theme-sheet .kpi div b { color: #17583a; }
body.theme-sheet .g-head { background: linear-gradient(180deg, #f3f9f5, #e9f3ed); }
body.theme-sheet .g-days div.today b { background: #1e7145; }
body.theme-sheet .info { color: #1e7a4a; }
body.theme-sheet .tips li { border-radius: 6px; }
body.theme-sheet .upload { border-color: #a9d8bc; background: #f6fbf8; }
body.theme-sheet .theme-menu > div a.on, body.theme-sheet .theme-menu > div a:hover { background: #e3f1e8; }

/* ---------------------------------------------------------------- строка состояния и «О программе» */
body { padding-bottom: 30px; }
.statusbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; display: flex; gap: 18px; align-items: center;
  padding: 4px 14px; font-size: 11.5px; color: var(--muted); background: var(--card); border-top: 1px solid var(--line);
  white-space: nowrap; overflow-x: auto; }
.statusbar .dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin-right: 5px; background: #b8c2bc; vertical-align: 1px; }
.statusbar .dot.ok { background: var(--green); } .statusbar .dot.warn { background: var(--amber); }
.statusbar .about-link { margin-left: auto; }
body.theme-sheet .statusbar { background: linear-gradient(90deg, #17583a, #1e7145 45%, #26885a); color: rgba(255, 255, 255, .85); border: 0; }
body.theme-sheet .statusbar a, body.theme-sheet .statusbar b { color: #fff; }
body.theme-sheet .statusbar .dot.ok { background: #8ff0b8; } body.theme-sheet .statusbar .dot.off { background: rgba(255, 255, 255, .45); }
dialog.about { border: 0; border-radius: 10px; padding: 18px 22px; max-width: 560px; color: var(--ink); background: var(--card);
  box-shadow: 0 20px 60px rgba(0, 0, 0, .3); }
dialog.about::backdrop { background: rgba(10, 30, 20, .35); }
dialog.about li { margin: 5px 0; }


/* ---------------------------------------------------------------- мини-календарь загрузки на главной */
.heat-card { margin-top: 10px; }
.heat-card h2 { display: flex; align-items: center; gap: 6px; }
.heat-legend { margin-left: auto; display: inline-flex; align-items: center; gap: 3px; font-weight: 400; }
.heat-legend i { width: 12px; height: 12px; border-radius: 3px; display: inline-block; }
.heat { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.heat-dow { font-size: 11px; color: var(--muted); text-align: center; }
.hc { position: relative; display: block; height: 46px; border-radius: 6px; padding: 3px 6px; text-decoration: none;
  color: var(--ink); border: 1px solid transparent; transition: transform .1s, box-shadow .1s; overflow: hidden; }
.hc:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(16, 64, 40, .15); text-decoration: none; }
.hc .d { font-size: 12px; font-weight: 600; }
.hc .d small { font-weight: 400; color: var(--muted); }
.hc .marks { position: absolute; left: 6px; bottom: 3px; font-size: 11px; color: var(--muted); display: flex; gap: 2px; align-items: center; }
.hc .cnt { position: absolute; right: 6px; bottom: 3px; font-size: 10.5px; font-weight: 700; color: var(--accent1); }
.hc .sh { width: 7px; height: 7px; border-radius: 50%; background: var(--red); display: inline-block; margin-left: 2px; }
:root { --heat0: #eef2f7; --heat1: #dbe7f5; --heat2: #a9c8ea; --heat3: #6aa3dc; --heat4: #2f74c0; --heat-we: #e6ebf2; }
body.theme-sheet { --heat0: #f1f4f2; --heat1: #d7efe0; --heat2: #a9dcbd; --heat3: #6cc392; --heat4: #2f9e63; --heat-we: #e9eeeb; }
body.theme-dark { --heat0: #222a32; --heat1: #1d3a46; --heat2: #1f5f73; --heat3: #2389a8; --heat4: #36b4d8; --heat-we: #1d242b; }
.hc.l0, .heat-legend .l0 { background: var(--heat0); }
.hc.l1, .heat-legend .l1 { background: var(--heat1); }
.hc.l2, .heat-legend .l2 { background: var(--heat2); }
.hc.l3, .heat-legend .l3 { background: var(--heat3); }
.hc.l4, .heat-legend .l4 { background: var(--heat4); }
.hc.l3 .d, .hc.l4 .d, .hc.l4 .marks, .hc.l4 .cnt, .hc.l3 .cnt { color: #fff; }
.hc.we.l0 { background: var(--heat-we); }
.hc.past { opacity: .5; }
.hc.today { border-color: var(--accent1); box-shadow: inset 0 0 0 1px var(--accent1); }
.hc.draft::after { content: ""; position: absolute; right: 0; top: 0; width: 16px; height: 16px;
  background: repeating-linear-gradient(135deg, #f0b83a 0 3px, transparent 3px 6px); border-bottom-left-radius: 6px; }

/* ---------------------------------------------------------------- удаление сметы из списка */
.row-act { width: 32px; text-align: center; }
.trash { border: 0; background: transparent; cursor: pointer; padding: 3px; border-radius: 5px; color: var(--muted);
  opacity: 0; transition: opacity .12s, background .12s, color .12s; }
.trash svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; display: block; }
tr:hover .trash, .trash:focus-visible { opacity: 1; }
.trash:hover { color: var(--red); background: var(--red-l); }
@media (hover: none) { .trash { opacity: .6; } }