:root{
  --ink:#16332A; --ink-2:#284E3D; --muted:#5A6A66;
  --gold:#B6813A; --gold-bright:#EEC379;
  --band:#16332A; --band-2:#0F271F;
  --line:#E2DECF; --soft:#F6F3EA; --soft-2:#FBF9F3; --paper:#F3EFE6;
  --ok:#1E7A50; --warn:#AF7B12; --err:#9A3B2E;
}
*{box-sizing:border-box;}
[hidden]{display:none !important;} /* перекрывает display:flex у .modal/.result-bar */
html,body{height:100%;}
body{margin:0; overflow:hidden; background:var(--paper); color:var(--ink);
  font-family:-apple-system,Segoe UI,Roboto,Inter,Arial,sans-serif; font-size:14px; line-height:1.45;}
/* Приложение — самодостаточный СКРОЛЛ-КОНТЕЙНЕР высотой в окно iframe. Bitrix отдаёт placement-iframe
   фиксированной высоты (напр. 600px) и не скроллит его (SDK-подгонка BX24.fitWindow тут недоступна —
   vibecode не передаёт нужные параметры) → без этого нижняя часть высокой формы недостижима. Вложенный
   overflow:auto скроллится независимо от настроек iframe. */
#app{height:100vh; overflow-y:auto; overflow-x:hidden; -webkit-overflow-scrolling:touch;
  max-width:1080px; margin:0 auto; padding:0 16px 120px;}

.topbar{position:sticky; top:0; z-index:20; display:flex; align-items:center; justify-content:space-between;
  gap:12px; padding:12px 4px; background:linear-gradient(160deg,var(--band),var(--band-2)); color:#fff;
  margin:0 -16px 18px; padding-left:18px; padding-right:18px; flex-wrap:wrap;}
.brand{font-weight:700; letter-spacing:.3px; display:flex; align-items:center; gap:8px;}
.brand .dot{width:8px;height:8px;border-radius:50%;background:var(--gold-bright);}
.brand .muted{color:#A9BDB2; font-weight:500; font-size:12px;}
.topbar-actions{display:flex; align-items:center; gap:8px; flex-wrap:wrap;}
.save-state{font-size:12px; color:#A9BDB2;}

.loader{padding:40px; text-align:center; color:var(--muted);}

.card{background:#fff; border:1px solid var(--line); border-radius:12px; padding:18px 20px; margin-bottom:18px;
  box-shadow:0 6px 22px rgba(20,30,25,.06);}
.sheet-title{font-size:13px; text-transform:uppercase; letter-spacing:1.4px; color:var(--gold);
  margin:0 0 16px; padding-bottom:10px; border-bottom:1px solid var(--line);}

.field{margin-bottom:14px; display:flex; flex-direction:column; gap:5px;}
.field>label{font-size:12px; font-weight:600; color:var(--ink-2);}
.grid-2{display:grid; grid-template-columns:1fr 1fr; gap:14px;}
.grid-3{display:grid; grid-template-columns:1fr 1fr 1fr; gap:14px;}
@media(max-width:720px){ .grid-2,.grid-3{grid-template-columns:1fr;} }

input,select,textarea{font:inherit; color:var(--ink); background:var(--soft-2);
  border:1px solid var(--line); border-radius:8px; padding:8px 10px; width:100%;}
input:focus,select,textarea:focus{outline:none; border-color:var(--gold); background:#fff;}
textarea{resize:vertical;}
.num{max-width:160px;}
.hint{font-size:11.5px; color:var(--muted); margin:4px 0 0;}

.segmented{display:inline-flex; border:1px solid var(--line); border-radius:999px; overflow:hidden; background:var(--soft);}
.segmented button{border:0; background:transparent; padding:8px 14px; cursor:pointer; font:inherit; color:var(--muted);}
.segmented button.on{color:#fff; font-weight:600;}
.segmented button.on[data-v="possible"]{background:var(--ok);}
.segmented button.on[data-v="conditional"]{background:var(--warn);}
.segmented button.on[data-v="impossible"]{background:var(--err);}

.inline{display:flex; align-items:center; gap:14px; flex-wrap:wrap;}
.radio{display:inline-flex; align-items:center; gap:6px; font-size:13px; cursor:pointer;}
.radio input{width:auto;}

.list{display:flex; flex-direction:column; gap:8px;}
.list-head{display:flex; align-items:center; justify-content:space-between; margin-bottom:6px;}
.row{display:grid; gap:8px; align-items:center; background:var(--soft-2); border:1px solid var(--line);
  border-radius:8px; padding:8px;}
.row.roadmap{grid-template-columns:1.4fr 1.2fr 1fr 80px 28px;}
.row.source{grid-template-columns:1.6fr .8fr 130px 28px;}
.row.stage{grid-template-columns:28px 1fr 150px 28px;}
.row .idx{text-align:center; font-weight:700; color:var(--gold);}
.row input,.row select{padding:6px 8px;}
@media(max-width:720px){ .row.roadmap,.row.source,.row.stage{grid-template-columns:1fr;} }
.iconbtn{border:0; background:transparent; color:var(--err); cursor:pointer; font-size:16px; line-height:1;}

.stages .stage .amount{text-align:right; font-variant-numeric:tabular-nums;}
.balance{margin-top:10px; font-size:13px; padding:8px 12px; border-radius:8px; display:flex;
  justify-content:space-between; gap:10px; align-items:center;}
.balance.ok{background:#E7F1EB; color:var(--ok); border:1px solid #BFE0CC;}
.balance.bad{background:#F4E5E2; color:var(--err); border:1px solid #E2C3BD;}
.balance b{font-variant-numeric:tabular-nums;}

.btn{border:1px solid var(--line); background:#fff; color:var(--ink); border-radius:8px;
  padding:8px 14px; cursor:pointer; font:inherit; font-weight:600;}
.btn:hover{border-color:var(--gold);}
.btn.primary{background:linear-gradient(150deg,var(--gold-bright),var(--gold)); color:var(--band-2); border-color:transparent;}
.btn.ghost{background:transparent; color:#fff; border-color:rgba(255,255,255,.4);}
.topbar .btn.ghost:hover{border-color:#fff;}
.btn.tiny{padding:4px 10px; font-size:12px; font-weight:600;}
.btn.ghost.tiny{color:var(--ink); border-color:var(--line);}
.btn:disabled{opacity:.5; cursor:not-allowed;}
/* Выпадающее меню открытых линий в верхней панели: как кнопка, но компактнее и с обрезкой длинного
   названия. Белый фон + тёмный текст (наследует .btn) → пункты списка читаемы на любом фоне. */
.select-line{max-width:230px; text-overflow:ellipsis; padding-right:10px;}
.select-line:disabled{opacity:.6;}

.advanced{margin-top:6px;}
.advanced summary{cursor:pointer; color:var(--muted); font-size:12px; margin-bottom:10px;}

/* Статус-бар результата последнего действия — сразу под верхней панелью кнопок (виден без прокрутки вниз). */
.status-bar{background:#fbfaf6; border-bottom:1px solid var(--line); padding:11px 20px;}

.result-bar{position:fixed; left:0; right:0; bottom:0; z-index:30; background:#fff; border-top:1px solid var(--line);
  box-shadow:0 -6px 22px rgba(20,30,25,.10); padding:12px 20px; display:flex; align-items:center;
  justify-content:space-between; gap:14px; flex-wrap:wrap;}
.result-msg{font-size:13px;}
.result-msg .ok{color:var(--ok); font-weight:600;}
.result-msg .err{color:var(--err); font-weight:600;}
.result-actions{display:flex; gap:8px;}

.modal{position:fixed; inset:0; z-index:50; background:rgba(15,30,25,.55); display:flex; align-items:center; justify-content:center; padding:18px;}
.modal-inner{background:#fff; border-radius:12px; width:min(920px,96vw); height:min(92vh,1200px); display:flex; flex-direction:column; overflow:hidden;}
.modal-head{display:flex; align-items:center; justify-content:space-between; padding:10px 14px; border-bottom:1px solid var(--line); font-weight:600;}
#previewFrame{border:0; width:100%; height:100%; background:var(--paper);}

/* Модалка подтверждения текста сообщения — компактная, по высоте контента. */
.send-modal-inner{width:min(640px,96vw); height:auto; max-height:92vh;}
.send-modal-body{padding:16px 18px; overflow-y:auto; display:flex; flex-direction:column; gap:14px;}
.send-target{font-size:13px; color:var(--ink); background:var(--soft-2, #faf8f1); border:1px solid var(--line); border-left:3px solid var(--gold); border-radius:8px; padding:9px 12px; white-space:pre-line;}
.send-field{display:flex; flex-direction:column; gap:6px; font-size:12px; color:var(--muted);}
.send-field input, .send-field textarea{font:inherit; font-size:14px; color:var(--ink); border:1px solid var(--line); border-radius:8px; padding:9px 11px; width:100%; resize:vertical;}
.send-field textarea{min-height:150px; line-height:1.5;}
.send-modal-actions{display:flex; gap:8px; justify-content:flex-end; padding:12px 18px; border-top:1px solid var(--line);}

.spin{display:inline-block; width:13px; height:13px; border:2px solid currentColor; border-right-color:transparent; border-radius:50%; animation:s .7s linear infinite; vertical-align:-2px; margin-right:6px;}
@keyframes s{to{transform:rotate(360deg);}}