@font-face { font-family: 'Gilroy'; src: url('/fonts/Gilroy-Regular.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Gilroy'; src: url('/fonts/Gilroy-Medium.woff2') format('woff2'); font-weight: 500; font-display: swap; }
@font-face { font-family: 'Gilroy'; src: url('/fonts/Gilroy-SemiBold.woff2') format('woff2'); font-weight: 600; font-display: swap; }

:root {
  --red: #EF3124;
  --red-hover: #D8281C;
  --red-tint: #FDECEA;
  --bg: #FFFFFF;
  --side: #FFFFFF;
  --plate: #F3F3F1;
  --cell: #FFFFFF;
  --field: #F8F7F5;
  --ink: #17171B;
  --ink-2: #4A4A52;
  --muted: #80808A;
  --line: #E8E6E1;
  --stage: #141416;
  --focus: #2F6FEB;
  /* Статусы */
  --ok: #19703F;      --ok-bg: #E3F4E8;     --ok-solid: #22A05A;
  --chg: #9A5B00;     --chg-bg: #FFF1D6;    --chg-solid: #F2A20C;
  --rej: #C02A1E;     --rej-bg: #FDE3E1;    --rej-solid: #EF3124;
  --part: #2459A6;    --part-bg: #E7F0FB;
  --wait: #6B6B73;    --wait-bg: #EFEEEA;   --wait-solid: #D9D7D1;
  --shadow-banner: 0 1px 2px rgba(20, 20, 25, .08), 0 6px 18px rgba(20, 20, 25, .08);
  color-scheme: light;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
html.lock { overflow: hidden; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 500 15px/1.5 'Gilroy', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; -webkit-font-smoothing: antialiased; }
button, input, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.ic { width: 1em; height: 1em; fill: currentColor; flex: none; }
[hidden] { display: none !important; }

.app { display: grid; grid-template-columns: 272px minmax(0, 1fr); min-height: 100vh; }

/* Боковая панель: клиент, итог одной строкой, простой список */
.side { position: sticky; top: 0; height: 100vh; height: 100dvh; display: flex; flex-direction: column; background: var(--side); border-right: 1px solid var(--line); }
.side-top { padding: 24px 20px 20px; }
.side-top h1 { margin: 0; font-size: 20px; line-height: 1.2; font-weight: 600; letter-spacing: -.01em; }
.side-top p { margin: 4px 0 0; color: var(--muted); font-size: 13px; }

.summary { margin: 0 20px 16px; }
.sum-row { display: flex; justify-content: space-between; font-size: 13px; color: var(--ink-2); }
.sum-row b { font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; }
.sum-bar { display: flex; height: 4px; margin-top: 8px; border-radius: 99px; overflow: hidden; background: var(--wait-bg); }
.sum-bar i { display: block; height: 100%; transition: width .4s ease; }
.sum-bar .ok { background: var(--ok-solid); }
.sum-bar .changes { background: var(--chg-solid); }
.sum-bar .rejected { background: var(--rej-solid); }
.sum-note { margin: 8px 0 0; font-size: 12px; color: var(--muted); }

.list { flex: 1; overflow-y: auto; padding: 0 10px 12px; border-top: 1px solid var(--line); padding-top: 8px; }
.item { display: flex; align-items: center; gap: 10px; min-height: 36px; padding: 0 10px; border-radius: 8px; color: var(--ink-2); text-decoration: none; transition: background .15s, color .15s; }
.item:hover { background: rgba(23, 23, 27, .04); color: var(--ink); }
.item.is-on { background: rgba(23, 23, 27, .06); color: var(--ink); }
.item-num { flex: none; width: 18px; font-size: 13px; color: var(--muted); font-variant-numeric: tabular-nums; }
.item-name { flex: 1; min-width: 0; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.item.is-on .item-name { font-weight: 600; }
.item-cnt { flex: none; display: inline-flex; align-items: center; gap: 4px; font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
.item-general { margin-top: 8px; }
.item-ico { display: grid; place-items: center; width: 8px; flex: none; margin-right: 18px; font-size: 15px; color: var(--muted); }

/* Точка статуса набора: пустой кружок — ждёт, заливка — решение */
.sdot { width: 8px; height: 8px; flex: none; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--wait-solid); }
.sdot.ok { background: var(--ok-solid); box-shadow: none; }
.sdot.changes { background: var(--chg-solid); box-shadow: none; }
.sdot.rejected { background: var(--rej-solid); box-shadow: none; }
.sdot.partial { background: linear-gradient(90deg, var(--ok-solid) 50%, transparent 50%); box-shadow: inset 0 0 0 1.5px var(--ok-solid); }

.side-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 12px; border-top: 1px solid var(--line); }
.export { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border: 0; border-radius: 8px; background: none; font-size: 13px; font-weight: 600; color: var(--ink-2); }
.export .ic { font-size: 15px; }
.export:hover { background: rgba(23, 23, 27, .05); color: var(--ink); }
.me { flex: none; margin-left: auto; padding: 6px 10px; border: 0; border-radius: 99px; background: none; font-size: 13px; color: var(--muted); white-space: nowrap; }
.me span { font-weight: 600; color: var(--ink); }
.me:hover { background: rgba(23, 23, 27, .05); }

/* Статус: цветной кружок и текст, без заливки */
.status { display: inline-flex; align-items: center; gap: 7px; font-size: 14px; font-weight: 600; color: var(--ink-2); white-space: nowrap; }
.status::before { content: ''; width: 9px; height: 9px; flex: none; border-radius: 50%; box-sizing: border-box; border: 1.5px solid var(--wait-solid); background: transparent; }
.status.ok::before { border-color: var(--ok-solid); background: var(--ok-solid); }
.status.changes::before { border-color: var(--chg-solid); background: var(--chg-solid); }
.status.rejected::before { border-color: var(--rej-solid); background: var(--rej-solid); }
.status.partial::before { border-color: var(--ok-solid); background: linear-gradient(90deg, var(--ok-solid) 50%, transparent 50%); }

/* Основная часть */
.main { min-width: 0; padding: 32px 40px 64px; }
.panel { max-width: 1240px; margin: 0 auto; }
.set-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 24px; }
.set-title { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; min-width: 0; }
.set-title h2 { margin: 0; font-size: 28px; line-height: 1.15; font-weight: 600; letter-spacing: -.02em; }
.set-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; }
.pager { display: flex; flex: none; gap: 6px; }
.pager button { display: grid; place-items: center; width: 36px; height: 36px; border: 1px solid var(--line); border-radius: 10px; background: var(--bg); color: var(--ink-2); font-size: 16px; transition: border-color .15s, color .15s; }
.pager button:hover:not(:disabled) { border-color: var(--ink); color: var(--ink); }
.pager button:disabled { opacity: .35; cursor: default; }

/* Решения согласующих: имя и две кнопки, оба человека в одну строку */
.decisions { display: flex; flex-wrap: wrap; gap: 12px 24px; }
.decision { display: flex; align-items: center; gap: 10px; }
.decision-name { font-size: 15px; font-weight: 600; }
.seg { display: flex; gap: 6px; }
.seg-btn { padding: 7px 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--bg); font-size: 13px; font-weight: 600; color: var(--ink-2); white-space: nowrap; transition: border-color .15s, background .15s, color .15s; }
.seg-btn:hover { border-color: var(--ink); color: var(--ink); }
.seg-btn.is-on[data-state=ok] { border-color: var(--ok-solid); background: var(--ok-solid); color: #fff; }
.seg-btn.is-on[data-state=changes] { border-color: var(--chg-solid); background: var(--chg-solid); color: #fff; }
.seg-btn.is-on[data-state=rejected] { border-color: var(--rej-solid); background: var(--rej-solid); color: #fff; }

/* Все макеты набора — на одном поле и в одной сетке колонок */
.gallery { margin-top: 28px; padding: 22px; border-radius: 18px; background: var(--plate); }
.grid, .singles { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }
.grid { margin-top: 14px; }
.singles { margin-top: 32px; row-gap: 24px; }
.group-title { margin: 0; font-size: 17px; line-height: 1.25; font-weight: 600; text-wrap: balance; }
.group-sub { margin: 3px 0 0; font-size: 14px; color: var(--ink-2); }
.block-main .thread { margin-top: 14px; }
.block-single { display: flex; flex-direction: column; }
.block-single .block-head { margin-top: 10px; }
.block-single .group-title { font-size: 15px; }
.block-single .group-sub { font-size: 13px; }
.block-single .thread { margin-top: auto; padding-top: 10px; }
.gallery .send textarea, .gallery .msg { background: var(--cell); }

.tile { display: block; width: 100%; padding: 0; border: 0; background: none; text-align: left; cursor: zoom-in; }
.tile-img { display: grid; place-items: center; aspect-ratio: 1; padding: 12px; border-radius: 12px; background: rgba(255, 255, 255, .6); transition: background .2s; }
.tile-img img { display: block; max-width: 100%; height: auto; box-shadow: var(--shadow-banner); transition: transform .25s ease; }
.tile:hover .tile-img { background: #fff; }
.tile:hover .tile-img img { transform: translateY(-2px); }
.tile-cap { display: block; margin-top: 6px; font-size: 13px; color: var(--ink-2); font-variant-numeric: tabular-nums; }

/* Обсуждение */
.thread-block { margin-top: 28px; }
.thread-block h3 { margin: 0 0 12px; font-size: 17px; font-weight: 600; }
.msgs { list-style: none; margin: 0 0 10px; padding: 0; display: grid; gap: 8px; }
.msgs:empty { display: none; }
.msg { padding: 10px 12px; border-radius: 12px; background: var(--field); }
.msg-head { display: flex; align-items: baseline; gap: 10px; font-size: 13px; color: var(--muted); }
.msg-head b { font-size: 14px; font-weight: 600; color: var(--ink); }
.msg p { margin: 3px 0 0; white-space: pre-wrap; overflow-wrap: anywhere; font-weight: 400; color: var(--ink); }
.del { margin-left: auto; display: inline-grid; place-items: center; width: 28px; height: 28px; margin-top: -6px; margin-bottom: -6px; border: 0; border-radius: 8px; background: none; color: var(--muted); font-size: 15px; }
.del:hover { background: var(--plate); color: var(--ink); }
.del.is-armed { width: auto; padding: 0 10px; background: var(--rej-bg); color: var(--rej); font-size: 13px; font-weight: 600; }
.empty { margin: 0 0 12px; color: var(--muted); font-size: 14px; }

.send { position: relative; }
.send textarea { display: block; width: 100%; min-height: 46px; max-height: 260px; padding: 12px 50px 12px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--field); font-weight: 400; line-height: 1.45; resize: none; transition: border-color .15s, background .15s; }
.send textarea::placeholder { color: var(--muted); }
.send textarea:focus { outline: none; border-color: var(--ink); background: #fff; }
.thread-compact .send textarea { font-size: 14px; }
.send-btn { position: absolute; right: 6px; bottom: 6px; display: grid; place-items: center; width: 34px; height: 34px; border: 0; border-radius: 9px; background: var(--ink); color: #fff; font-size: 16px; transition: background .15s, color .15s; }
.send-btn:not(:disabled):hover { background: #2D2D33; }
.send-btn:disabled { background: transparent; color: var(--muted); cursor: default; }

.btn { display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; border: 0; border-radius: 10px; background: var(--ink); color: #fff; font-size: 14px; font-weight: 600; transition: background .15s; }
.btn:hover { background: #2D2D33; }
.btn-ghost { background: var(--plate); color: var(--ink); }
.btn-ghost:hover { background: var(--line); }

.general-lead { margin: 8px 0 24px; color: var(--muted); }

/* Просмотр баннера */
.lb { position: fixed; inset: 0; z-index: 50; display: grid; grid-template-columns: minmax(0, 1fr) 400px; background: var(--stage); }
.lb-stage { position: relative; display: grid; place-items: center; min-height: 0; padding: 48px 84px; overflow: hidden; touch-action: pan-y; }
.lb-stage img { display: block; max-width: 100%; max-height: calc(100vh - 96px); max-height: calc(100dvh - 96px); width: auto; height: auto; box-shadow: 0 10px 40px rgba(0, 0, 0, .45); }
.lb-nav { position: absolute; top: 50%; translate: 0 -50%; display: grid; place-items: center; width: 52px; height: 52px; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .08); color: #fff; font-size: 22px; transition: background .15s; }
.lb-nav:hover { background: rgba(255, 255, 255, .18); }
.lb-nav:disabled { opacity: .25; cursor: default; }
.lb-prev { left: 18px; }
.lb-next { right: 18px; }
.lb-side { display: flex; flex-direction: column; min-height: 0; padding: 28px 24px 24px; background: #fff; overflow-y: auto; }
.lb-head { padding-right: 44px; margin-bottom: 20px; }
.lb-set { margin: 0; font-size: 14px; color: var(--muted); }
.lb-size { margin: 4px 0 0; font-size: 26px; line-height: 1.15; font-weight: 600; font-variant-numeric: tabular-nums; }
.lb-count { margin: 6px 0 0; font-size: 13px; color: var(--muted); font-variant-numeric: tabular-nums; }
.lb-group { margin: 14px 0 0; padding: 10px 12px; border-radius: 10px; background: var(--field); font-size: 14px; color: var(--ink-2); }
.lb-group b { font-weight: 600; color: var(--ink); }
.lb-close { position: absolute; top: 18px; right: 18px; display: grid; place-items: center; width: 40px; height: 40px; border: 0; border-radius: 50%; background: var(--plate); color: var(--ink); font-size: 18px; }
.lb-close:hover { background: var(--line); }

/* Окно имени */
.who { width: min(400px, calc(100vw - 32px)); padding: 24px; border: 0; border-radius: 18px; background: #fff; color: var(--ink); box-shadow: 0 20px 60px rgba(0, 0, 0, .25); }
.who::backdrop { background: rgba(20, 20, 22, .45); }
.who h3 { margin: 0; font-size: 20px; font-weight: 600; }
.who p { margin: 6px 0 16px; color: var(--muted); font-size: 14px; }
.who input { width: 100%; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--field); }
.who input:focus { outline: none; border-color: var(--ink); background: #fff; }
.who-row { display: flex; justify-content: flex-end; gap: 8px; margin-top: 16px; }
.who-names { display: flex; flex-wrap: wrap; gap: 8px; }
.who-name { padding: 10px 18px; border: 1px solid var(--line); border-radius: 99px; background: #fff; font-size: 15px; font-weight: 600; transition: border-color .15s; }
.who-name:hover { border-color: var(--ink); }
.who-name.is-on { border-color: var(--ink); background: var(--ink); color: #fff; }
.who-other { display: block; margin-top: 18px; }
.who-other span { display: block; margin-bottom: 6px; font-size: 13px; color: var(--muted); }

.toast { position: fixed; left: 50%; bottom: 24px; z-index: 80; translate: -50% 16px; display: flex; align-items: center; gap: 16px; max-width: calc(100vw - 32px); padding: 12px 18px; border-radius: 12px; background: var(--ink); color: #fff; font-size: 14px; opacity: 0; pointer-events: none; transition: opacity .2s, translate .2s; }
.toast.is-on { opacity: 1; translate: -50% 0; pointer-events: auto; }
.toast-act { flex: none; margin: -6px -8px -6px 0; padding: 6px 10px; border: 0; border-radius: 8px; background: rgba(255, 255, 255, .12); color: #fff; font-size: 14px; font-weight: 600; }
.toast-act:hover { background: rgba(255, 255, 255, .2); }

@media (max-width: 1180px) {
  .grid, .singles { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .main { padding: 20px 24px 56px; }
}

@media (max-width: 900px) {
  .export { display: none; }
  .app { display: block; }
  .side { position: sticky; top: 0; z-index: 20; height: auto; border-right: 0; border-bottom: 1px solid var(--line); }
  .side-top { padding: 14px 16px 8px; }
  .side-top h1 { font-size: 18px; }
  .side-top p, .summary { display: none; }
  .list { display: flex; gap: 6px; overflow-x: auto; padding: 4px 16px 12px; border-top: 0; scrollbar-width: none; }
  .list::-webkit-scrollbar { display: none; }
  .item { flex: none; gap: 8px; min-height: 34px; padding: 0 12px; border: 1px solid var(--line); background: var(--bg); }
  .item.is-on { border-color: var(--ink); background: var(--bg); }
  .item-name { max-width: 150px; font-size: 13px; }
  .item-cnt { display: none; }
  .item-general { margin-top: 0; }
  .side-foot { position: absolute; top: 10px; right: 8px; padding: 0; border: 0; }
  .main { padding: 16px 16px 48px; }
  .set-title h2 { font-size: 24px; }
  .set-actions, .decisions { width: 100%; }
  .decision { width: 100%; }
  .decision-name { width: 52px; flex: none; }
  .seg { flex: 1; }
  .seg-btn { flex: 1; }
  .pager { position: absolute; top: 0; right: 0; }
  .panel { position: relative; }
  .set-title { padding-right: 84px; }
  .lb { grid-template-columns: 1fr; grid-template-rows: auto minmax(0, 1fr); }
  .lb-stage { padding: 60px 12px 16px; }
  .lb-stage img { max-height: 50vh; max-height: 50dvh; }
  .lb-nav { width: 40px; height: 40px; font-size: 18px; background: rgba(255, 255, 255, .12); }
  .lb-prev { left: 8px; }
  .lb-next { right: 8px; }
  .lb-side { border-radius: 18px 18px 0 0; padding: 20px 16px 24px; }
  .lb-head { padding-right: 0; margin-bottom: 16px; }
  .lb-close { top: 12px; right: 12px; background: rgba(255, 255, 255, .12); color: #fff; }
}

@media (max-width: 640px) {
  .gallery { margin: 0 -8px; padding: 16px 12px; }
  .grid, .singles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .singles { row-gap: 20px; }
  .tile-img { padding: 10px; }
  .seg-btn { padding: 8px 4px; font-size: 12px; line-height: 1.15; white-space: normal; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}