/* Domotony — абсолютный минимализм: белый фон, чёрный текст, тонкие линии. */
:root {
  --bg: #FFFFFF;
  --panel: #FFFFFF;
  --line: #E8E8E8;
  --line2: #CFCFCF;
  --text: #111111;
  --muted: #777777;
  --accent: #111111;
  --accent-soft: #F2F2F2;
  --ok: #111111;
  --warn: #555555;
  --err: #111111;
  --r: 8px;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body {
  min-height: 100vh; display: flex; flex-direction: column;
  margin: 0; background: var(--bg); color: var(--text);
  font: 15px/1.55 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}
a { color: inherit; text-decoration-color: var(--line2); text-underline-offset: 3px; }
a:hover { color: var(--accent); }
h1, h2, h3 { font-family: Georgia, "Times New Roman", serif; font-weight: 400; letter-spacing: -.01em; }
h1 { font-size: 28px; margin: 8px 0 20px; }
h2 { font-size: 20px; margin: 28px 0 12px; }
h3 { font-size: 16px; margin: 20px 0 8px; font-family: inherit; font-weight: 600; }
.muted { color: var(--muted); }
.small { font-size: 13px; }
.nowrap { white-space: nowrap; }
.right { text-align: right; }

/* шапка */
header {
  display: flex; align-items: center; gap: 24px; padding: 14px 24px;
  border-bottom: 1px solid var(--line); background: var(--bg); position: sticky; top: 0; z-index: 5;
}
.brand { font-family: Georgia, serif; font-size: 20px; text-decoration: none; }
nav { display: flex; gap: 18px; flex: 1; flex-wrap: wrap; }
nav a { text-decoration: none; color: var(--muted); }
nav a.on, nav a:hover { color: var(--text); }
.who { color: var(--muted); font-size: 13px; }
.who a { margin-left: 10px; }
.count { background: var(--accent); color: #fff; border-radius: 9px; padding: 0 7px; font-size: 12px; margin-left: 4px; }

main { flex: 1 0 auto; width: 100%; max-width: 980px; margin: 0 auto; padding: 24px 24px 80px; }
main.narrow { max-width: 420px; padding-top: 10vh; }

/* сообщения */
.flash { background: var(--accent-soft); border-radius: var(--r); padding: 10px 14px; margin-bottom: 16px; }
.errors { border-left: 3px solid var(--err); background: #F5F5F5; padding: 10px 14px; border-radius: 0 var(--r) var(--r) 0; margin: 0 0 18px; }
.errors ul { margin: 4px 0 0; padding-left: 18px; }
.note { border-left: 3px solid var(--line2); background: #FAFAFA; padding: 10px 14px; border-radius: 0 var(--r) var(--r) 0; margin: 12px 0; }

/* формы */
label { display: block; font-size: 13px; color: var(--muted); margin: 0 0 4px; }
input[type=text], input[type=password], input[type=date], input[type=datetime-local], input[type=time], input[type=email], input:not([type]), select, textarea {
  width: 100%; font: inherit; color: var(--text); background: #fff; border: 1px solid var(--line2);
  border-radius: 8px; padding: 8px 10px; outline: none;
}
input:focus, select:focus, textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
input.short { width: 110px; }
input.mini { width: 72px; padding: 5px 8px; }
textarea { min-height: 72px; resize: vertical; }
.field { margin-bottom: 14px; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }
.grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 16px; }
.grid4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0 16px; }
.span2 { grid-column: span 2; }
.opt { display: flex; align-items: center; gap: 8px; margin: 6px 0; color: var(--text); font-size: 15px; flex-wrap: wrap; }
.opt input[type=radio], .opt input[type=checkbox] { accent-color: var(--accent); width: 16px; height: 16px; margin: 0; }
.chips { display: flex; gap: 8px; flex-wrap: wrap; }
.chip { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--line2); border-radius: 20px;
        padding: 4px 12px; background: #fff; color: var(--text); font-size: 14px; cursor: pointer; margin: 0; }
.chip input { accent-color: var(--accent); margin: 0; }
.chip:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); }
.inline { display: flex; gap: 8px; align-items: center; }
.inline > input { flex: 1; }

button, .btn {
  display: inline-block; font: inherit; font-size: 14px; border-radius: 8px; padding: 8px 16px; cursor: pointer;
  border: 1px solid var(--line2); background: #fff; color: var(--text); text-decoration: none; line-height: 1.4;
}
button:hover, .btn:hover { border-color: var(--text); color: var(--text); }
.primary { background: var(--text); color: #fff; border-color: var(--text); }
.primary:hover { background: #000; color: #fff; }
.accent { background: var(--accent); color: #fff; border-color: var(--accent); }
.accent:hover { background: #000; color: #fff; border-color: #000; }
.link { border: none; background: none; padding: 0; color: var(--muted); text-decoration: underline;
        text-decoration-color: var(--line2); text-underline-offset: 3px; }
.link:hover { color: var(--accent); }
.danger:hover { border-color: var(--err); color: var(--err); }
.actions { display: flex; gap: 10px; align-items: center; margin-top: 24px; flex-wrap: wrap; }
.actions .spacer { flex: 1; }

/* блоки */
.panel { border-top: 1px solid var(--line); padding: 20px 0 8px; margin-bottom: 8px; }
.panel h3:first-child, .panel h2:first-child { margin-top: 0; }
.sect { border-top: 1px solid var(--line); padding: 14px 0 6px; }
.sect:first-child { border-top: none; padding-top: 0; }
.sect > .t { font-weight: 600; margin-bottom: 6px; }
details > summary { cursor: pointer; color: var(--muted); list-style: none; }
details > summary::before { content: "›"; display: inline-block; width: 14px; transition: transform .15s; }
details[open] > summary::before { transform: rotate(90deg); }

/* таблицы */
table { width: 100%; border-collapse: collapse; }
th { text-align: left; font-weight: 400; color: var(--muted); font-size: 13px; padding: 6px 10px; border-bottom: 1px solid var(--line); }
td { padding: 9px 10px; border-bottom: 1px solid var(--line); vertical-align: top; }
tr:last-child td { border-bottom: none; }
table.list tbody tr:hover { background: #F7F7F7; }
table.form td { padding: 5px 8px; vertical-align: middle; }
table.kv td:first-child { color: var(--muted); width: 38%; }
.num { font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }

/* статусы */
.st { display: inline-block; font-size: 12px; border-radius: 10px; padding: 1px 9px; border: 1px solid var(--line2); color: var(--muted); white-space: nowrap; }
.st.made { border-color: var(--line2); color: var(--text); }
.st.sent { border-color: var(--text); color: var(--text); }
.st.ok { border-color: var(--text); background: var(--text); color: #fff; }
.st.no { text-decoration: line-through; }
.dev { color: var(--muted); font-size: 12px; font-style: italic; }
.tag { font-size: 12px; color: var(--muted); border: 1px solid var(--line); border-radius: 6px; padding: 0 6px; }

/* мастер */
.steps { display: flex; gap: 4px; margin: 0 0 24px; flex-wrap: wrap; }
.steps button { border: none; background: none; padding: 4px 10px 4px 0; color: var(--muted); font-size: 13px; }
.steps button b { display: inline-block; width: 22px; height: 22px; line-height: 22px; text-align: center;
                  border-radius: 50%; border: 1px solid var(--line2); margin-right: 6px; font-weight: 400; }
.steps .on { color: var(--text); }
.steps .on b { background: var(--text); color: #fff; border-color: var(--text); }
.steps .done b { border-color: var(--text); color: var(--text); }

.calc { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 14px 0; margin: 8px 0 16px; }
.calc .total { font-family: Georgia, serif; font-size: 26px; }

/* ход формирования */
.log { font: 13px/1.7 ui-monospace, Menlo, Consolas, monospace; background: #FAFAFA; border: 1px solid var(--line);
       border-radius: var(--r); padding: 14px 16px; min-height: 160px; white-space: pre-wrap; }
.spin { display: inline-block; width: 12px; height: 12px; border: 2px solid var(--line2); border-top-color: var(--accent);
        border-radius: 50%; animation: s 0.8s linear infinite; vertical-align: -1px; margin-right: 8px; }
@keyframes s { to { transform: rotate(360deg); } }

.search { display: flex; gap: 10px; margin-bottom: 16px; }
.search input { flex: 1; }
.search select { width: auto; }
.empty { text-align: center; color: var(--muted); padding: 60px 0; }
.howto { margin: 8px 0 28px; padding-left: 22px; line-height: 2; }
.howto li::marker { color: var(--muted); }
.img-prev { max-height: 60px; max-width: 200px; background: repeating-conic-gradient(#f0f0f0 0 25%, #fff 0 50%) 0 0/12px 12px;
            border: 1px solid var(--line); border-radius: 6px; padding: 4px; }
footer { flex-shrink: 0; text-align: center; color: var(--muted); font-size: 12px; padding: 20px 0; }

/* первый экран «Кто вы?» */
.roles { display: flex; flex-direction: column; gap: 18px; }
.roles a { font-size: 22px; text-decoration: none; color: var(--text); font-family: Georgia, serif; }
.roles a:hover { text-decoration: underline; text-decoration-color: var(--line2); }

/* дизайнер: выбор ИП, строка ИП, приглашение */
.ipline { display: flex; align-items: center; gap: 10px; color: var(--muted); font-size: 14px; margin-top: 6px; }
.ipline img { height: 28px; }
.ipgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px; margin-top: 16px; }
.ipcard { display: flex; flex-direction: column; gap: 14px; padding: 22px; border: 1px solid var(--line2); border-radius: var(--r);
          text-decoration: none; min-height: 120px; justify-content: space-between; }
.ipcard:hover { border-color: var(--text); color: var(--text); }
.ipcard img { height: 36px; align-self: flex-start; }
.tabs { display: flex; gap: 20px; border-bottom: 1px solid var(--line); margin: 20px 0 18px; }
.tabs a { text-decoration: none; color: var(--muted); padding-bottom: 8px; }
.tabs a.on { color: var(--text); border-bottom: 2px solid var(--text); }

@media (max-width: 720px) {
  header { flex-wrap: wrap; gap: 8px 18px; padding: 12px 16px; }
  .who { margin-left: auto; }
  nav { order: 3; flex: 0 0 100%; flex-wrap: nowrap; overflow-x: auto; gap: 16px; white-space: nowrap; padding-bottom: 2px; }
  main { padding: 16px 16px 60px; }
  .grid2, .grid3, .grid4 { grid-template-columns: 1fr; }
  .span2 { grid-column: auto; }
  .hide-m { display: none; }
  table.list td, table.list th { padding: 8px 6px; }
}

/* формулы расчёта */
.formula { margin: 10px 0 4px; font-size: 14px; }
.formula .fl { font-variant-numeric: tabular-nums; padding: 1px 0; }
.formula .fl-total { font-weight: 600; }
.formula .legend { color: var(--muted); font-size: 13px; margin-top: 8px; line-height: 1.6; }
.formula .legend b { color: var(--text); font-weight: 600; }
.coef { margin: 4px 0 10px; }
.coef .opt { margin-bottom: 0; }
.coef-hint { margin-left: 24px; }
select.kval { width: auto; padding: 3px 8px; font-size: 14px; }
.coef input.kval { width: 58px; padding: 3px 6px; font-size: 14px; display: inline-block; }
.cvalue { margin: 10px 0 12px; }
.cv-title { font-size: 14px; margin-bottom: 4px; }
.cvalue .inline { justify-content: flex-start; }
.cvalue .inline > input { flex: 0 0 96px; }

/* v6: категории по группам этапов */
.catgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 8px 16px; }
.catrow { display: flex; align-items: center; justify-content: space-between; gap: 12px;
          border: 1px solid var(--line); border-radius: 8px; padding: 6px 6px 6px 12px; }
.catrow select { width: auto; min-width: 110px; }
.spnote { margin: 8px 0 0; padding: 10px 12px; border-left: 2px solid var(--text); font-size: 13px; line-height: 1.5; }
.spnote div + div { margin-top: 2px; }

/* v6: Тони — цифровой помощник */
.tony { margin: 0 0 20px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 8px; }
.tony b { font-weight: 600; }
.tony .small { margin-top: 4px; }
.progress { height: 2px; background: var(--line); margin: 4px 0 16px; }
.progress > i { display: block; height: 2px; background: var(--text); }
.tony-line { display: flex; justify-content: space-between; gap: 12px; font-size: 13px; margin-top: -8px; }
.record { margin: 16px 0; padding: 14px; border: 1px solid var(--text); border-radius: 8px; }
.record .big { font-size: 22px; font-weight: 600; }
.testusers { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; }
.testusers button { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; text-align: left; width: 100%; height: auto; padding: 10px 14px; }
.testusers button b { white-space: normal; }
.testusers button span { white-space: normal; line-height: 1.4; }

/* v7: шаг «Этапы и бюджет» — блоки друг под другом */
.budget .bblock { margin-top: 28px; padding-top: 18px; border-top: 1px solid var(--line); }
.budget .bblock:first-of-type { margin-top: 18px; }
.budget h4 { margin: 0 0 10px; font-size: 15px; font-weight: 600; }
.budget .bstage { margin: 6px 0 0; }
.budget .bstage + .bstage { margin-top: 10px; }
.budget .bhead { font-size: 15px; }
.budget .bbody { margin: 8px 0 6px 26px; }
.budget .bline { display: flex; flex-wrap: wrap; gap: 8px 24px; align-items: flex-end; margin-top: 8px; }
.budget .bline .field { margin: 0; }
.budget .plain { padding: 8px 0; }
.budget select.catsel { width: auto; min-width: 120px; }
.budget table.zones { width: 100%; border-collapse: collapse; margin-top: 10px; }
.budget table.zones th { text-align: left; font-weight: 400; color: var(--muted); font-size: 12px; padding: 0 6px 4px 0; }
.budget table.zones td { padding: 4px 6px 4px 0; vertical-align: top; }
.budget table.zones td:first-child { padding-top: 12px; }
.budget table.zones td:first-child { width: 22px; }
.budget table.zones td input.mini { width: 84px; }
.budget table.zones td input.zname, .budget table.zones td input.mini, .budget table.zones td select.catsel { height: 42px; box-sizing: border-box; }
.budget table.zones td:nth-child(2) input.zname { width: 100%; min-width: 180px; }
.budget table.pay td, .budget table.pay th { padding: 8px 10px; }
.budget table.pay tr.sum td { border-top: 1px solid var(--text); }
.budget .okline { margin-top: 12px; font-weight: 500; }
@media (max-width: 640px) {
  .budget .bbody { margin-left: 0; }
  .budget table.zones td:nth-child(2) input.zname { min-width: 120px; }
}

/* v7: подсветка незаполненных и ошибочных полей — чёрно-белая */
.field.bad input, .field.bad select, .field.bad textarea { border: 2px solid var(--text); }
.field .ferr { font-size: 12px; color: var(--muted); margin-top: 4px; }
/* v7: маска паспорта — серые нули остаются, пока не введены цифры */
.maskwrap { position: relative; display: block; }
.maskwrap input { position: relative; background: transparent; z-index: 1; }
.maskghost { position: absolute; z-index: 0; color: #B5B5B5; pointer-events: none; white-space: pre; }
.maskghost .tr { color: transparent; }
@media (max-width: 640px) {
  .budget table.zones thead { display: none; }
  .budget table.zones tr { display: grid; grid-template-columns: 22px 1fr 1fr 1fr; gap: 6px; padding: 6px 0; border-bottom: 1px solid var(--line); align-items: center; }
  .budget table.zones td { padding: 0; }
  .budget table.zones td:nth-child(2) { grid-column: 2 / -1; }
  .budget table.zones td:first-child { grid-row: span 2; }
  .budget table.zones td input.mini, .budget table.zones select.catsel { width: 100%; min-width: 0; }
}

/* v7.1: цвета как в Договоре — тёмно-синий #1F2A44, голубой #EDF2F9, зебра таблиц #F2F2F2 */
:root { --navy: #1F2A44; --blue-soft: #EDF2F9; --zebra: #F2F2F2; --accent: var(--navy); --accent-soft: var(--blue-soft); }
h1, h2, h3, h4, .brand { color: var(--navy); }
.primary, .accent { background: var(--navy); border-color: var(--navy); color: #fff; }
.primary:hover, .accent:hover { background: #141C2F; border-color: #141C2F; color: #fff; }
.steps .on b { background: var(--navy); border-color: var(--navy); }
.steps .done b { border-color: var(--navy); color: var(--navy); }
.progress > i { background: var(--navy); }
.count { background: var(--navy); }
/* таблицы: шапка тёмно-синяя с белым текстом, строки через одну — серые */
table.list thead th, table.kv thead th { background: var(--navy); color: #fff; border-bottom: none; font-size: 13px; padding: 8px 10px; }
table.list thead th:first-child { border-radius: 6px 0 0 0; }
table.list thead th:last-child { border-radius: 0 6px 0 0; }
table.list tbody tr:nth-child(even) td, table.kv tr:nth-child(even) td { background: var(--zebra); }
table.list tbody tr:hover td { background: #E9EDF4; }
table.list td, table.kv td { border-bottom: none; }
.budget table.pay tr.sum td { background: #fff; border-top: 2px solid var(--navy); }
/* приветствие Тони и рекорд — как вторая страница Договора: голубая заливка, жирная синяя линия слева */
.tony, .record { background: var(--blue-soft); border: none; border-left: 4px solid var(--navy); border-radius: 0 var(--r) var(--r) 0; padding: 12px 16px; }
.tony b, .record .big { color: var(--navy); }
/* формулы: подпись над формулой, расшифровка — мельче и с отступом, как примечание */
.formula .fb { margin: 0 0 12px; }
.formula .fb-t { color: var(--navy); font-weight: 600; font-size: 13px; margin-bottom: 2px; }
.formula .fb .fl { padding-left: 16px; }
.formula .fb-total { border-top: 1px solid var(--line); padding-top: 10px; }
.formula .fb-total .fl { font-weight: 600; }
.formula .legend, .legend { margin-left: 24px; font-size: 12.5px; line-height: 1.55; }
.skillform { display: flex; flex-direction: column; gap: 0; }
.skillform .opt { margin: 0; color: var(--text); }

/* v8: первый экран — Тони печатает приветствие, роли плашками */
main.hello-main { max-width: 640px; padding-top: 18vh; }
.hello-brand { position: fixed; top: 22px; left: 28px; font-family: Georgia, "Times New Roman", serif; font-size: 22px;
               color: var(--navy); text-decoration: none; z-index: 2; }
.hello-t { font-family: Georgia, "Times New Roman", serif; font-size: 34px; line-height: 1.3; color: var(--navy);
           margin: 0 0 28px; min-height: 2.6em; font-weight: 400; }
.caret { display: inline-block; width: 2px; height: 1.05em; background: var(--navy); margin-left: 3px;
         vertical-align: -0.15em; animation: blink 1s steps(1) infinite; }
body.typing .caret { animation: none; }
@keyframes blink { 50% { opacity: 0; } }
.hello-q { font-size: 17px; color: var(--muted); margin: 0 0 14px; }
.hello-roles { display: flex; flex-direction: column; gap: 10px; }
.hello-role { display: flex; align-items: center; justify-content: space-between; gap: 16px; text-decoration: none;
              border: 1px solid var(--line); border-radius: 12px; padding: 14px 18px; background: #fff;
              transition: border-color .15s, background .15s; }
.hello-role b { display: block; font-size: 17px; font-weight: 500; color: var(--text); }
.hello-role .hint { display: block; font-size: 13px; color: var(--muted); margin-top: 2px; }
.hello-role .arr { color: var(--line2); font-size: 18px; transition: color .15s, transform .15s; }
.hello-role:hover { border-color: var(--navy); background: var(--blue-soft); }
.hello-role:hover .arr { color: var(--navy); transform: translateX(3px); }
.js-reveal { opacity: 0; transform: translateY(6px); transition: opacity .35s ease, transform .35s ease; }
.js-reveal.on { opacity: 1; transform: none; }
.hello-svc { position: fixed; left: 28px; bottom: 18px; font-size: 12px; color: #B0B0B0; text-decoration: none; }
.hello-svc:hover { color: var(--muted); }
@media (max-width: 640px) {
  main.hello-main { padding-top: 90px; }
  .hello-t { font-size: 26px; }
  .hello-brand { left: 16px; top: 16px; }
  .hello-svc { position: static; display: block; margin: 32px 0 0; }
}

/* v8.1: Тони говорит как на главной — крупно, по буквам, без плашек */
.ty-off { color: transparent; }
.caret { display: inline-block; width: 2px; height: 1.05em; background: var(--navy); margin: 0 -1px;
         vertical-align: -0.15em; animation: blink 1s steps(1) infinite; }
.typing .caret { animation: none; }
[data-type].typed .caret, [data-type]:not(.typing) .caret { display: none; }
.tony-say { font-family: Georgia, "Times New Roman", serif; color: var(--navy); font-size: 26px; line-height: 1.3;
            font-weight: 400; margin: 0 0 18px; }
.tony-say.sm { font-size: 19px; margin: -4px 0 14px; }
.tony-note { font-size: 13px; color: var(--muted); margin: 14px 0 0; }
/* табло секундомера */
.clock { font-variant-numeric: tabular-nums; letter-spacing: .02em; }
.clock.near { color: var(--navy); font-weight: 600; }
.score { margin: 18px 0 22px; }
.score .digits { font-size: 56px; line-height: 1; color: var(--navy); font-variant-numeric: tabular-nums; font-weight: 300; letter-spacing: .02em; }
.score .cap { font-size: 13px; color: var(--muted); margin-top: 6px; }
.toast { position: fixed; right: 24px; bottom: 24px; background: var(--navy); color: #fff; padding: 14px 18px; border-radius: 10px;
         font-size: 15px; max-width: 320px; opacity: 0; transform: translateY(10px); transition: opacity .35s, transform .35s; z-index: 50; }
.toast.on { opacity: 1; transform: none; }
.testbox { border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; }
.testbox b { color: var(--text); }
/* v8.2: приветствие всегда в одну строку — размер шрифта подстраивается под ширину экрана */
.hello-t { white-space: nowrap; font-size: min(34px, calc((100vw - 40px) / 17.5)); min-height: 0; }
main.hello-main { max-width: 700px; }
/* v8.3: обозначения в расшифровке — обычным шрифтом, как и текст */
.formula .legend b, .legend b { font-weight: 400; color: inherit; }
/* v8.3: сопровождение по месяцам — повторённый пакет светлым */
.budget select.pksel { width: auto; min-width: 260px; }
.budget select.pksel.inherit { color: #A8A8A8; }
.budget table.months td:first-child { width: 60px; }
table.acts td { padding: 4px 6px; vertical-align: middle; }
table.acts td:nth-child(2) { width: 170px; }
table.acts td:nth-child(4) { width: 100px; }
table.acts input.mini { width: 84px; }
/* v8.4: месяцы сопровождения — сеткой по 3 в ряд */
.budget .mgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px 16px; margin-top: 10px; }
.budget .mgrid .mcell { display: flex; flex-direction: column; gap: 2px; }
.budget .mgrid select.pksel { width: 100%; min-width: 0; }
@media (max-width: 760px) { .budget .mgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 460px) { .budget .mgrid { grid-template-columns: 1fr; } }
/* таблица бюджета на шаге «Проверка» */
table.btable { margin-top: 2px; }
table.btable td, table.btable th { padding: 6px 8px; }
table.btable tr.sum td { background: #fff; border-top: 2px solid var(--navy); }
table.kv table.btable td { color: var(--text); background: #fff; width: auto; }
table.kv table.btable tbody tr:nth-child(even) td { background: var(--zebra); }
table.kv table.btable tr.sum td { background: #fff; }
table.btable th { white-space: nowrap; }
.tscroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.budget table.pay th { white-space: nowrap; }
.budget table.pay td:nth-child(2) .muted { white-space: nowrap; }
main { min-width: 0; }
.tscroll { max-width: 100%; }
@media (max-width: 640px) {
  table.kv td { display: block; width: auto !important; }
  table.kv td:first-child { padding-bottom: 0; }
  td.right.nowrap:has(.btn) { white-space: normal; }
  td.right.nowrap .btn { margin: 2px 0; }
}
@media (max-width: 640px) {
  table.kv, table.kv > tbody, table.kv > tbody > tr { display: block; width: 100%; }
  table.small, table.small > tbody, table.small > tbody > tr, table.small td { display: block; width: 100%; }
  table.small td.right { text-align: left; }
  table.small form.inline { flex-wrap: wrap; justify-content: flex-start !important; }
}
/* v8.6: кружки шагов — цифра строго по центру; кликабельны пройденные шаги; «проверь» — точка */
.steps button b { display: inline-flex; align-items: center; justify-content: center; line-height: 1;
                  width: 24px; height: 24px; padding: 0; font-variant-numeric: tabular-nums; vertical-align: middle; }
.steps button { display: inline-flex; align-items: center; cursor: pointer; }
.steps button:disabled { cursor: default; opacity: .55; }
.steps button:not(:disabled):not(.on):hover { color: var(--navy); }
.steps button.recheck b { position: relative; }
.steps button.recheck b::after { content: ""; position: absolute; top: -2px; right: -2px; width: 7px; height: 7px;
                                 border-radius: 50%; background: var(--navy); border: 1px solid #fff; }
/* v8.6: шаг «Проверка» — данные всех шагов таблицами, куда попадут */
.rsec { margin: 22px 0 0; }
.rsec-h { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.rsec-h h3 { margin: 0 0 8px; }
table.review td.lbl { color: var(--muted); width: 32%; }
table.review td.dst { color: var(--muted); font-size: 12.5px; white-space: nowrap; width: 1%; }
@media (max-width: 640px) { table.review td.dst { white-space: normal; } }
table.review { table-layout: fixed; }
table.review th { white-space: nowrap; }
table.review td.dst { white-space: normal; width: auto; }
table.review td { overflow-wrap: anywhere; }
/* v9: шаг «Условия Договора» */
table.terms td { vertical-align: middle; padding: 6px 10px; }
table.terms input.short { width: 110px; }
table.terms .chg { border: 2px solid var(--navy); }
table.terms .dev { margin-top: 2px; }
/* v9: коэффициенты κ в бюджете */
.budget .klabel { margin: 10px 0 4px; }
/* коэффициенты κ — столбиком, окошки строго друг под другом (решение 30.09) */
.budget .kbox { display: grid; grid-template-columns: 16px minmax(0, max-content) 10px 52px auto; column-gap: 8px; row-gap: 5px;
  align-items: center; margin-top: 8px; justify-content: start; }
.budget .kchip { display: contents; cursor: pointer; }
.budget .kchip input[type=checkbox] { margin: 0; width: 16px; height: 16px; accent-color: var(--navy); }
.budget .kchip .kname { font-size: 13px; white-space: nowrap; }
.budget .kchip.on .kname { color: var(--navy); font-weight: 600; }
.budget .kchip .kx { color: var(--muted); font-size: 12px; text-align: center; }
.budget .kchip input.kval, .kval { width: 52px; padding: 2px 4px; font-size: 13px; text-align: center; border: 1px solid var(--line2);
  border-radius: 6px; background: #fff; min-width: 0; }
.kchip .koff, .koff { font-size: 11px; color: #9a5b00; white-space: nowrap; }
@media (max-width: 600px) { .budget .kchip .kname { white-space: normal; } }

/* расчёт бюджета разделами, как в Договоре (решение 30.09) */
.formula .fg { border: 1px solid var(--line2); border-radius: 8px; overflow: hidden; margin: 0 0 10px; background: #fff; }
.formula .fg > summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center;
  gap: 12px; background: var(--navy); color: #fff; padding: 8px 12px; font-weight: 600; font-size: 14px; }
.formula .fg > summary::-webkit-details-marker { display: none; }
.formula .fg > summary .fg-t::before { content: "▾"; display: inline-block; width: 16px; transition: transform .15s; }
.formula .fg:not([open]) > summary .fg-t::before { transform: rotate(-90deg); }
.formula .fg-s { white-space: nowrap; }
.formula .fgr { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; padding: 8px 12px; }
.formula .fgr:nth-of-type(even) { background: #F2F2F2; }
.formula .fgl { min-width: 0; }
.formula .fgl .fl { padding-left: 0; overflow-wrap: anywhere; }
.formula .fgv { white-space: nowrap; font-weight: 600; font-variant-numeric: tabular-nums; }
.formula .fgtotal { display: flex; justify-content: space-between; gap: 12px; background: var(--navy); color: #fff;
  padding: 10px 12px; border-radius: 8px; font-weight: 600; }
.formula .fgline { color: var(--muted); font-size: 12px; margin-top: 4px; overflow-wrap: anywhere; }

/* подсказки к параметрам: наведение (компьютер) или «?» (телефон) */
.th { position: relative; cursor: help; border-bottom: 1px dotted #b8bfcc; outline: none; }
.th .tq { display: none; margin-left: 4px; width: 16px; height: 16px; border-radius: 50%; border: 1px solid #b8bfcc;
  color: var(--muted); font-size: 11px; line-height: 14px; text-align: center; vertical-align: 1px; font-weight: 400; }
.th .tt { display: none; position: absolute; left: 0; top: calc(100% + 6px); z-index: 50; width: max-content; max-width: 300px;
  background: #fff; color: var(--text); border: 1px solid var(--line2); border-radius: 8px; box-shadow: 0 6px 20px rgba(31,42,68,.12);
  padding: 8px 10px; font-size: 12.5px; font-weight: 400; line-height: 1.45; white-space: normal; text-align: left; }
.th:hover .tt, .th:focus .tt, .th.open .tt { display: block; }
@media (hover: none) {
  .th { border-bottom: none; }
  .th .tq { display: inline-block; }
  .th:hover .tt { display: none; }
  .th.open .tt { display: block; position: fixed; left: 16px; right: 16px; top: auto; bottom: 16px; max-width: none; width: auto; }
}
/* индекс ¹: изменение уйдёт на согласование партнёру */
sup.ap { color: var(--muted); font-size: 10px; margin-left: 1px; font-weight: 400; }
.apnote { color: var(--muted); font-size: 12px; margin-top: 10px; }
.apnote sup { font-size: 10px; }

/* шаг 6: все поля в одном створе */
table.terms { table-layout: fixed; width: 100%; min-width: 560px; }
table.terms col.c-lab { width: 46%; }
table.terms col.c-q { width: 18%; }
table.terms td, table.terms th { vertical-align: middle; }
table.terms input.short { width: 96px; }
table.terms textarea { width: 100%; }

/* неактивная кнопка — видно, что нажать нельзя (решение 30.09) */
button:disabled, button.accent:disabled, button.primary:disabled { background: #C9CED8; border-color: #C9CED8; color: #fff; cursor: not-allowed; }
button:disabled:hover { background: #C9CED8; border-color: #C9CED8; }
.why { color: var(--muted); margin: 6px 0 0; }
.hint-under { color: var(--muted); font-size: 12px; margin-top: 4px; }

/* согласование с партнёром и переписка (решение 30.09) */
table.agree { table-layout: fixed; width: 100%; min-width: 620px; }
table.agree col.a-p { width: 30%; } table.agree col.a-w { width: 28%; } table.agree col.a-v { width: 13%; } table.agree col.a-s { width: 16%; }
table.agree td { vertical-align: top; }
table.agree .v-up { color: var(--navy); font-weight: 600; }
table.agree .v-down { color: #9B1C1C; font-weight: 600; }
table.agree .v-text { font-weight: 600; white-space: pre-wrap; overflow-wrap: anywhere; }
table.agree:not(.m-view) tbody tr td { background: #fff; }
table.agree tr.athread td { padding-top: 0; border-top: none; }
table.agree:not(.m-view) tbody tr.ar:nth-of-type(4n+3) td, table.agree:not(.m-view) tbody tr.ar:nth-of-type(4n+3) + tr.athread td { background: #F2F2F2; }
.st { font-size: 12px; padding: 2px 8px; border-radius: 10px; white-space: nowrap; }
.st-pending { background: #EDF2F9; color: var(--navy); }
.st-approved { background: #E7F3EC; color: #1E6B3A; }
.st-rejected { background: #FBEAEA; color: #9B1C1C; }
.msg { font-size: 13px; margin: 4px 0; overflow-wrap: anywhere; }
.msg-sys { color: var(--muted); }
input.msgin { width: 100%; font-size: 13px; padding: 5px 8px; margin: 4px 0 2px; }
.chat .msg { border-left: 3px solid var(--line2); padding-left: 8px; }
.panel.project { margin-bottom: 16px; }

/* первое знакомство (решение 30.09) */
.intro { max-width: 720px; margin: 40px auto 0; }
.intro .icard { min-height: 150px; }
.intro .tony-say { font-size: 26px; line-height: 1.35; }
.intro .idots { display: flex; gap: 6px; margin: 18px 0 10px; }
.intro .idots span { width: 8px; height: 8px; border-radius: 50%; background: var(--line2); }
.intro .idots span.on { background: var(--navy); }
@media (max-width: 600px) { .intro .tony-say { font-size: 20px; } .intro { margin-top: 16px; } }

/* анкета специалиста (решение 30.09) */
.req { color: #9B1C1C; }
.profile .pgrid { display: grid; grid-template-columns: 150px 1fr; gap: 20px; align-items: start; }
.pphoto img, .pphoto .nophoto { width: 150px; height: 180px; object-fit: cover; border-radius: 8px; border: 1px solid var(--line2); display: block; margin-bottom: 8px; }
.nophoto { display: flex; align-items: center; justify-content: center; color: var(--muted); background: #F2F2F2; font-size: 13px; }
.pphoto label input { font-size: 12px; margin-top: 4px; width: 100%; }
table.plist { table-layout: fixed; width: 100%; min-width: 620px; }
table.plist td { padding: 4px 6px 4px 0; }
table.plist input { width: 100%; }
table.plist input.yr, table.plist input.yr2 { text-align: center; }
table.plist th:nth-child(3), table.plist th:nth-child(4) { width: 90px; }
.consent { padding: 8px 0; border-bottom: 1px solid var(--line); }
.spec-head { display: flex; gap: 16px; align-items: center; margin: 10px 0 16px; }
.sphoto { width: 96px; height: 116px; object-fit: cover; border-radius: 8px; border: 1px solid var(--line2); flex: 0 0 auto; }
.lrow { padding: 4px 0; }
.uthumb { width: 36px; height: 44px; object-fit: cover; border-radius: 4px; border: 1px solid var(--line2); vertical-align: middle; }
@media (max-width: 600px) { .profile .pgrid { grid-template-columns: 1fr; } .pphoto img, .pphoto .nophoto { width: 120px; height: 144px; } }

/* ================================================================================================
   Дизайн в стиле настроек iPhone (решение 30.09): два цвета фона — светло-серая страница и белые
   карточки; тонкие линии вместо заливок и зебры; текст чёрный, пояснения серые;
   синий #007AFF — только то, что нажимается (ссылки, кнопки, выбор).
   ================================================================================================ */
:root { --ios-bg: #F2F2F7; --ios-card: #FFFFFF; --ios-line: #E5E5EA; --ios-blue: #007AFF; --ios-gray: #8E8E93;
        --navy: #007AFF; --blue-soft: #FFFFFF; --zebra: #FFFFFF; --accent: #007AFF; --accent-soft: #FFFFFF;
        --line: #E5E5EA; --line2: #D1D1D6; --muted: #8E8E93; }
body { background: var(--ios-bg); }
header { background: rgba(242, 242, 247, .94); border-bottom: 1px solid var(--ios-line); backdrop-filter: blur(8px); }
h1, h2, h3, h4, .brand { color: #000; }
h2 { font-size: 13px; font-family: inherit; text-transform: uppercase; letter-spacing: .03em; color: var(--ios-gray);
     font-weight: 400; margin: 28px 0 8px 16px; }
h3 { font-size: 17px; }
a { color: var(--ios-blue); text-decoration: none; }
a:hover { color: var(--ios-blue); text-decoration: underline; text-decoration-color: rgba(0, 122, 255, .35); }
nav a { color: var(--ios-gray); }
nav a.on, nav a:hover { color: #000; text-decoration: none; }
.who a { color: var(--ios-blue); }
.brand, .brand:hover { color: #000; text-decoration: none; }

/* карточки */
.panel, .card, .bblock, .rsec, .fg, .hello-role, .empty { background: var(--ios-card); border: none !important;
  border-radius: 12px; box-shadow: none; }
.panel { padding: 14px 16px; }

/* кнопки: синие; второстепенные — белые с синим текстом */
button, .btn { border-radius: 10px; }
.primary, .accent, button.primary, button.accent { background: var(--ios-blue); border-color: var(--ios-blue); color: #fff; }
.primary:hover, .accent:hover { background: #0062CC; border-color: #0062CC; color: #fff; }
button:not(.primary):not(.accent):not(.link), .btn { background: #fff; color: var(--ios-blue); border: 1px solid var(--ios-line); }
button.link, .link { color: var(--ios-blue); background: none; border: none; }
button:disabled, button.accent:disabled, button.primary:disabled { background: #E5E5EA !important; border-color: #E5E5EA !important;
  color: #fff !important; cursor: not-allowed; }

/* таблицы: без тёмных шапок и зебры — серые подписи колонок и тонкие линии */
table.list, table.kv, table.btable { background: var(--ios-card); border-radius: 12px; overflow: hidden; }
table.list thead th, table.kv thead th, table.btable thead th { background: transparent !important; color: var(--ios-gray) !important;
  font-weight: 400; font-size: 12px; border-bottom: 1px solid var(--ios-line) !important; }
table.list tbody tr:nth-child(even) td, table.kv tr:nth-child(even) td, table.kv table.btable tbody tr:nth-child(even) td,
table.agree:not(.m-view) tbody tr.ar:nth-of-type(4n+3) td, table.agree:not(.m-view) tbody tr.ar:nth-of-type(4n+3) + tr.athread td
  { background: transparent !important; }
table.list td, table.kv td { border-bottom: 1px solid var(--ios-line); }
table.list tr:last-child td, table.kv tr:last-child td { border-bottom: none; }
table.agree tr.ar td { border-bottom: none; }
.budget table.pay tr.sum td, table.btable tr.sum td { border-top: 1px solid var(--line2); background: transparent; }

/* заметки и ошибки — белые карточки с тонкой полосой слева */
.note, .flash { background: var(--ios-card); border-left: 3px solid var(--ios-blue); border-radius: 10px; }
.errors { background: var(--ios-card); border-left: 3px solid #FF3B30; border-radius: 10px; }
.tony, .record { background: var(--ios-card); border-left: 3px solid var(--ios-blue); border-radius: 10px; }
.tony b, .record .big, .tony-say, .hello-t, .score .digits { color: #000; }
.toast { background: #000; }

/* шаги анкеты, прогресс, счётчики */
.steps .on b { background: var(--ios-blue); border-color: var(--ios-blue); color: #fff; }
.steps .done b { border-color: var(--ios-blue); color: var(--ios-blue); }
.progress > i, .count { background: var(--ios-blue); }

/* выбор: плашки белые, выбранная — синяя рамка и синий текст */
.chip, .kchip, .opt.bhead { background: #fff; }
.chip:has(input:checked), .budget .kchip.on { border-color: var(--ios-blue) !important; color: var(--ios-blue); background: #fff !important; }
input[type=checkbox], input[type=radio] { accent-color: var(--ios-blue) !important; }
.budget .kchip.on .kname { color: var(--ios-blue); }
table.terms .chg { border: 2px solid var(--ios-blue); }

/* расчёт на шаге 5: белые карточки, серый заголовок над каждой, итог справа */
.formula .fg { border: none; margin-bottom: 14px; }
.formula .fg > summary { background: transparent; color: var(--ios-gray); font-weight: 400; font-size: 12px; text-transform: uppercase;
  letter-spacing: .03em; padding: 10px 16px 6px; border-bottom: 1px solid var(--ios-line); }
.formula .fg > summary .fg-s { color: #000; font-weight: 600; text-transform: none; letter-spacing: 0; font-size: 14px; }
.formula .fg > summary .fg-t::before { color: var(--ios-blue); }
.formula .fgr:nth-of-type(even) { background: transparent; }
.formula .fgr { border-bottom: 1px solid var(--ios-line); padding: 10px 16px; }
.formula .fgr:last-child { border-bottom: none; }
.formula .fb-t { color: #000; }
.formula .fgtotal { background: var(--ios-card); color: #000; border-radius: 12px; padding: 12px 16px; font-size: 16px; }
.formula .fgtotal b { font-weight: 700; }

/* согласование: статусы */
table.agree .v-up { color: var(--ios-blue); }
table.agree .v-down { color: #FF3B30; }
.st-pending { background: #F2F2F7; color: #000; }
.st-approved { background: #F2F2F7; color: #34C759; }
.st-rejected { background: #F2F2F7; color: #FF3B30; }
.intro .idots span.on { background: var(--ios-blue); }
.caret { background: var(--ios-blue); }
.hello-role:hover { background: #fff; }
.hello-role:hover .arr { color: var(--ios-blue); }
.formula .fg > summary::before { content: none; display: none; }
.formula .fg > summary .fg-t { flex: 1; }
/* таблицы не обрезаются: скругление — без overflow, широкие прокручиваются в своей обёртке */
table.list, table.kv, table.btable { overflow: visible; }
.tscroll { border-radius: 12px; }
/* шапка на телефоне: пункты меню переносятся, ничего не вылезает */
@media (max-width: 700px) {
  header { flex-wrap: wrap; gap: 8px 16px; padding: 10px 16px; }
  nav { gap: 6px 14px; }
  .who { width: 100%; display: flex; flex-wrap: wrap; gap: 4px 12px; }
  .who a { margin-left: 0; }
}
@media (max-width: 700px) { nav { width: 100%; min-width: 0; flex: 1 1 100%; } nav a { white-space: normal; } }
@media (max-width: 700px) { .panel { overflow-x: auto; } table.form input { min-width: 70px; } }
table.ptab { width: 100%; }
table.ptab td:first-child { width: 46%; }
table.ptab input { max-width: 130px; }
table.ptab.parts td:first-child { width: 40%; }
.budget .startline { align-items: center; margin: 0 0 14px; }

/* консультация: строки — сетка; на телефоне тема под датой и временем */
.crows { margin-top: 12px; }
.crow { display: grid; grid-template-columns: 28px 180px 1fr 96px; gap: 8px; align-items: center; margin-bottom: 8px; }
.crow.chead { margin-bottom: 4px; }
@media (max-width: 640px) {
  .crow { grid-template-columns: 22px 1fr 84px; }
  .crow .ctopic { grid-column: 2 / 4; grid-row: 2; }
  .crow.chead span:nth-child(3) { display: none; }
  .crow { padding-bottom: 8px; border-bottom: 1px solid var(--line, #E5E5EA); }
}

/* версия 10.1 (замечания 30.09): как на iPhone — кнопки белые, синие только надписи; ссылка «‹ Назад» над заголовком */
.primary, .accent, button.primary, button.accent, a.btn.primary, a.btn.accent {
  background: #fff !important; color: var(--ios-blue) !important; border: 1px solid var(--ios-line) !important; font-weight: 600; }
.primary:hover, .accent:hover, button.primary:hover, button.accent:hover { background: #F2F2F7 !important; color: var(--ios-blue) !important; }
button:disabled, button.accent:disabled, button.primary:disabled { background: #fff !important; color: #C7C7CC !important;
  border-color: var(--ios-line) !important; }
.steps .on b { background: #fff; color: var(--ios-blue); border: 2px solid var(--ios-blue); }
a.back { display: inline-block; font-size: 15px; color: var(--ios-blue); margin: 0 0 6px; }
a.back:hover { text-decoration: none; opacity: .75; }
a.back + .muted.small { margin-top: 0; }

/* прайс ИП: окошки строго в створе — одинаковые колонки */
table.ptab { table-layout: fixed; width: 100%; }
table.ptab td:first-child, table.ptab th:first-child { width: 40%; }
table.ptab td, table.ptab th { padding-left: 8px; padding-right: 8px; }
table.ptab input { width: 100%; max-width: 120px; box-sizing: border-box; }
@media (max-width: 640px) { table.ptab { table-layout: auto; } table.ptab td:first-child { width: auto; } table.ptab input { min-width: 64px; } }

/* шаг «Проверка»: все таблицы по одним линиям — Поле 28% · Значение 44% · Куда 28% (бюджет — те же линии) */
table.review { table-layout: fixed; width: 100%; }
table.review td.lbl { width: auto; }
table.review td.dst { width: auto; white-space: normal; }
table.review th, table.review td { text-align: left; overflow-wrap: anywhere; }
@media (max-width: 640px) { table.review { table-layout: auto; } }
/* согласование: решение у каждой строки — две белые кнопки */
table.agree td.adec { white-space: normal; }
table.agree td.adec button { margin: 2px 4px 2px 0; }
table.agree col.a-p { width: 24%; } table.agree col.a-w { width: 24%; } table.agree col.a-v { width: 11%; } table.agree col.a-s { width: 30%; }
table.review td, table.review th, table.btable.review td, table.btable.review th { padding: 9px 10px; }

/* согласование на телефоне: строка — карточкой, кнопки решения видны без прокрутки */
@media (max-width: 640px) {
  table.agree, table.agree tbody, table.agree tr, table.agree td { display: block; width: auto !important; }
  table.agree thead, table.agree colgroup { display: none; }
  table.agree tr.ar { padding: 10px 0 0; border-top: 1px solid var(--ios-line); }
  table.agree tr.ar td { padding: 2px 10px; text-align: left !important; }
  table.agree td[data-label]::before { content: attr(data-label) ": "; color: var(--ios-gray); font-size: 13px; }
  table.agree td.adec { padding-top: 8px !important; }
  table.agree tr.athread td { padding: 6px 10px 10px; }
  .agree-wrap, table.agree { overflow: visible; }
  table.agree .msgin { width: 100%; box-sizing: border-box; }
}

/* фото специалиста: крупнее; без фото — серый силуэт, как в «Контактах» iPhone */
.sphoto { width: 140px; height: 168px; border-radius: 12px; border: none; }
.nophoto { background: #E5E5EA url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 360'%3E%3Ccircle cx='150' cy='120' r='50' fill='%23AEAEB2'/%3E%3Cellipse cx='150' cy='310' rx='110' ry='120' fill='%23AEAEB2'/%3E%3C/svg%3E") center / cover no-repeat;
  color: transparent !important; font-size: 0 !important; border: none !important; overflow: hidden; }
.pphoto img, .pphoto .nophoto { border-radius: 12px; border: none; }

/* ============ папка проекта (версия 10.3) — как «Файлы» на iPhone ============ */
.pf-head h1 { margin-bottom: 2px; }
.pf-crumbs { display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: center; font-size: 13px; color: var(--ios-gray); margin: 10px 0 14px; }
.pf-crumbs b { color: #000; font-weight: 600; }
.pf-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.pf-tile { background: #fff; border-radius: 16px; padding: 18px 18px 16px; color: #000; display: flex; flex-direction: column;
  gap: 6px; min-height: 150px; transition: transform .12s ease, box-shadow .12s ease; }
.pf-tile:hover { text-decoration: none; color: #000; box-shadow: 0 6px 22px rgba(0,0,0,.06); transform: translateY(-1px); }
.pf-tile .fi { width: 52px; height: 42px; }
.pf-tname { font-size: 17px; font-weight: 600; margin-top: 4px; }
.pf-thint { font-size: 13px; color: var(--ios-gray); line-height: 1.35; flex: 1; }
.pf-tcount { font-size: 12px; color: var(--ios-gray); }
.fi-folder .f-back { fill: #9CC8FF; }
.fi-folder .f-front { fill: #5AA9FF; }
.fi-folder .f-mark { fill: none; stroke: #fff; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.fi-folder .f-mark-fill { fill: #fff; }
.fi-file .d-page { fill: #fff; stroke: #C7C7CC; stroke-width: 1.5; }
.fi-file .d-fold { fill: #F2F2F7; stroke: #C7C7CC; stroke-width: 1.5; stroke-linejoin: round; }
.fk-pdf .d-page { stroke: #FF6B5E; } .fk-img .d-page { stroke: #34C759; } .fk-doc .d-page { stroke: #5AA9FF; }
.fk-xls .d-page { stroke: #30B566; } .fk-cad .d-page { stroke: #AF52DE; } .fk-zip .d-page { stroke: #8E8E93; }
.pf-list { background: #fff; border-radius: 14px; overflow: hidden; }
.pf-row { display: flex; align-items: center; gap: 14px; padding: 12px 16px; border-bottom: 1px solid var(--ios-line);
  color: #000; position: relative; }
.pf-row:last-child { border-bottom: none; }
a.pf-row:hover { background: #F9F9FB; text-decoration: none; color: #000; }
.pf-row .fi-folder { width: 34px; height: 28px; flex: 0 0 auto; }
.pf-row .fi-file { width: 26px; height: 32px; flex: 0 0 auto; margin: 0 4px; }
.pf-ext { position: absolute; left: 18px; top: 32px; width: 30px; text-align: center; font-size: 7.5px; font-weight: 700;
  color: var(--ios-gray); letter-spacing: .02em; }
.pf-main { flex: 1; min-width: 0; }
.pf-name { font-size: 15px; overflow-wrap: anywhere; }
.pf-meta { font-size: 12.5px; color: var(--ios-gray); margin-top: 2px; }
.pf-chev { color: #C7C7CC; font-size: 22px; line-height: 1; }
.pf-act { display: flex; gap: 14px; align-items: center; font-size: 14px; flex: 0 0 auto; }
.pf-act form { margin: 0; }
.pf-del { color: #FF3B30 !important; font-size: 14px; padding: 0; }
.pf-hist { font-size: 12.5px; color: var(--ios-gray); margin-top: 4px; }
.pf-hist summary { cursor: pointer; color: var(--ios-blue); }
.pf-drop { background: #fff; border: 1.5px dashed #C7C7CC; border-radius: 14px; padding: 18px; text-align: center;
  margin-bottom: 12px; display: flex; flex-direction: column; align-items: center; gap: 4px; transition: .15s; }
.pf-drop.on { border-color: var(--ios-blue); background: #F5F9FF; }
.pf-up { width: 26px; height: 26px; fill: none; stroke: var(--ios-blue); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.pf-drop .link { font-size: inherit; }
.pf-empty { background: #fff; border-radius: 14px; padding: 28px 16px; text-align: center; color: var(--ios-gray); }
.pf-mk { display: flex; gap: 8px; margin-top: 14px; max-width: 520px; }
.pf-mk input { flex: 1; }
.pf-rm { margin-top: 10px; }
@media (max-width: 640px) {
  .pf-tiles { grid-template-columns: 1fr; }
  .pf-tile { min-height: 0; }
  .pf-row { flex-wrap: wrap; }
  .pf-act { width: 100%; padding-left: 48px; }
}
/* карточка договора: папка проекта сверху */
.pf-card { display: flex; align-items: center; gap: 16px; background: #fff; border-radius: 14px; padding: 14px 16px; color: #000; }
.pf-card:hover { text-decoration: none; color: #000; box-shadow: 0 6px 22px rgba(0,0,0,.06); }
.pf-card .fi-folder { width: 44px; height: 36px; }
.pf-card .pf-main b { font-size: 16px; }

/* специалисты: поиск, фильтр, роли с категориями (версия 10.3) */
.sp-tools { display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: center; margin-bottom: 10px; }
.sp-tools input[type=search] { flex: 1 1 260px; max-width: 360px; }
.rcat { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 3px 0; }
.rcat.off { opacity: .6; }
.rcat .opt { margin: 0; min-width: 190px; }
.catpick { width: auto; padding: 4px 8px; font-size: 13px; }
.catpick.nocat { color: #FF3B30; }
.invite-box .chips { margin: 0; }
.sp-tools input[type=search] { border: 1px solid var(--ios-line); border-radius: 10px; padding: 9px 12px; background: #fff; font: inherit; }
.rcat { display: grid; grid-template-columns: 240px 170px; gap: 10px; align-items: center; }
.rcat .opt { min-width: 0; }
@media (max-width: 640px) { .rcat { grid-template-columns: 1fr; gap: 2px; margin-bottom: 6px; } }
/* специалисты на телефоне — карточками */
@media (max-width: 640px) {
  table.splist, table.splist tbody, table.splist tr, table.splist td { display: block; width: auto; }
  table.splist thead { display: none; }
  table.splist tr.sprow { padding: 12px 12px 8px; border-bottom: 1px solid var(--ios-line); }
  table.splist tr.sprow[hidden] { display: none; }
  table.splist td { padding: 2px 0 !important; border: none !important; text-align: left !important; white-space: normal !important; }
  table.splist .rcat .opt { white-space: nowrap; }
}

/* статусы (замечание 30.09, версия 10.4): как на iPhone — светлая плашка, цветной текст, одна ширина;
   в списке договоров номера и статусы Приложений — двумя ровными колонками */
.st { display: inline-block; min-width: 96px; text-align: center; box-sizing: border-box; font-size: 12.5px; line-height: 1.5;
  padding: 2px 10px; border-radius: 8px; border: none !important; background: #F2F2F7; color: #8E8E93; text-decoration: none; }
.st.made { background: #F2F2F7; color: #000; }
.st.sent { background: #EAF3FF; color: #007AFF; }
.st.ok { background: #E8F7EC; color: #248A3D; }
.st.no { background: #F2F2F7; color: #FF3B30; text-decoration: none; }
.st.draft { background: #F2F2F7; color: #8E8E93; }
.appst { display: grid; grid-template-columns: max-content max-content; gap: 6px 12px; align-items: center; }
.appst .an { white-space: nowrap; }
/* 11: фильтр специалистов — несколько ролей и категорий */
.sp-tools .spf-row { display: flex; align-items: center; gap: 8px 12px; width: 100%; flex-wrap: wrap; }
.sp-tools .spf-l { width: 84px; flex: 0 0 84px; font-size: 13px; color: var(--muted); }
.sp-tools .chip input { position: absolute; opacity: 0; pointer-events: none; }
.sp-tools .chip { position: relative; cursor: pointer; user-select: none; padding: 6px 14px; }
.sp-tools .spf-hint { width: 100%; }
@media (max-width: 600px) { .sp-tools .spf-l { width: 100%; flex-basis: 100%; } }
/* 11: Приложения на этап — только действия; выполненные — одной строкой */
.app-panel { padding: 12px 16px; }
.app-panel.app-done { padding: 10px 16px; }
.app-head { display: grid; grid-template-columns: 1fr auto; gap: 8px 12px; align-items: center; }
.app-head .app-title { min-width: 0; }
.app-head .st { justify-self: end; }
.app-head .app-btns { grid-column: 1 / -1; display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.app-head .app-btns:empty { display: none; }
.app-todo { margin-top: 8px; border-top: 1px solid var(--ios-line); }
.app-row { display: grid; grid-template-columns: 1fr auto; gap: 8px 12px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--ios-line); font-size: 14px; }
.app-row:last-child { border-bottom: 0; padding-bottom: 0; }
.app-act { display: flex; gap: 8px; align-items: center; justify-content: flex-end; flex-wrap: wrap; margin: 0; }
.app-act select { width: auto; max-width: 260px; }
@media (max-width: 600px) { .app-row { grid-template-columns: 1fr; } .app-act { justify-content: flex-start; } .app-act select { max-width: 100%; } }
/* 11: сегментный переключатель как в iOS */
.seg { display: inline-flex; flex-wrap: wrap; background: #E9E9EE; border-radius: 10px; padding: 2px; gap: 2px; max-width: 100%; }
.seg label { position: relative; margin: 0; cursor: pointer; }
.seg input { position: absolute; opacity: 0; pointer-events: none; }
.seg span { display: block; padding: 6px 14px; border-radius: 8px; font-size: 13px; color: #111; white-space: nowrap; }
.seg input:checked + span { background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.12); font-weight: 600; }
.seg a { display: block; padding: 6px 14px; border-radius: 8px; font-size: 13px; color: #111; text-decoration: none; white-space: nowrap; }
.seg a.on { background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.12); font-weight: 600; }
@media (max-width: 600px) { .seg span, .seg a { white-space: normal; padding: 6px 10px; } }
/* 11: экспликация — помещения и изделия на одних линиях */
.ex-room { padding: 12px 16px; --excols: 84px minmax(160px, 1fr) 104px 150px 36px; }
.ex-room:has(select[name$=_vc]) { --excols: 84px minmax(160px, 1fr) 104px 150px 230px 36px; }
.ex-grid, .ex-item, .ex-cap { display: grid; grid-template-columns: var(--excols); gap: 8px 12px; align-items: end; }
.ex-grid .field { margin: 0; }
.ex-room input, .ex-room select { height: 42px; box-sizing: border-box; }
.ex-grid .ex-del, .ex-item .ex-del { grid-column: -2; justify-self: center; align-self: center; }
.ex-grid .ex-del { padding-top: 20px; font-size: 0; }
.ex-grid .ex-del::before { content: "×"; font-size: 20px; }
.ex-cap { margin: 10px 0 2px; font-size: 12px; color: var(--muted); }
.ex-cap span:nth-child(1) { grid-column: 2; } .ex-cap span:nth-child(2) { grid-column: 3; } .ex-cap span:nth-child(3) { grid-column: 4 / span 2; }
.ex-item { margin: 6px 0; align-items: center; }
.ex-item > input[name$=_name] { grid-column: 2; }
.ex-item > input.ex-m { grid-column: 3; }
.ex-item > select { grid-column: 4 / span 2; }
.ex-item .ex-del { font-size: 20px; }
.ex-items:empty { display: none; }
.ex-rhead, .ex-item-ro { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.ex-item-ro { padding: 6px 0 0 20px; font-size: 14px; }
@media (max-width: 760px) {
  .ex-room, .ex-room:has(select[name$=_vc]) { --excols: minmax(0, 1fr) minmax(0, 1fr) 36px; }
  .ex-grid .field { min-width: 0; }
  .ex-grid .field:has([name$=_floor]), .ex-grid .field:has([name$=_area]) { grid-column: 1; }
  .ex-grid .field:has([name$=_no]), .ex-grid .field:has([name$=_kind]) { grid-column: 2; }
  .ex-grid .field:has([name$=_name]), .ex-grid .field:has([name$=_vc]) { grid-column: 1 / span 2; }
  .ex-room:has(.ex-fl[hidden]) .ex-grid .field:has([name$=_no]) { grid-column: 1; }
  .ex-room:has(.ex-fl[hidden]) .ex-grid .field:has([name$=_name]) { grid-column: 2; }
  .ex-grid .ex-del { grid-column: 3; grid-row: 1; }
  .ex-grid .field[hidden] { display: none; }
  .ex-cap { display: none; }
  .ex-item { grid-template-columns: minmax(0, 1fr) 80px 36px; padding-left: 12px; border-left: 2px solid var(--ios-line); }
  .ex-item > input[name$=_name] { grid-column: 1; } .ex-item > input.ex-m { grid-column: 2; }
  .ex-item > select { grid-column: 1 / span 2; } .ex-item .ex-del { grid-column: 3; grid-row: 1; }
}
/* 11: ход проекта, работы, команда */
.hub { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-bottom: 12px; }
.hub-tile { display: block; background: #fff; border: 1px solid var(--ios-line); border-radius: 12px; padding: 12px 14px; text-decoration: none; color: inherit; min-width: 0; }
.hub-tile:hover { border-color: var(--line2); }
.hub-t { font-size: 13px; color: var(--muted); }
.hub-v { font-size: 17px; font-weight: 600; margin: 2px 0; }
.hub-s { font-size: 13px; color: var(--muted); }
.tag-late { color: #FF3B30; font-weight: 600; }
.tag-early { color: #248A3D; font-weight: 600; }
.tag-ok { color: #248A3D; }
@media (max-width: 760px) { .hub { grid-template-columns: 1fr; } }
.works { padding: 6px 16px; }
.works-h { font-weight: 600; font-size: 14px; padding: 8px 0 4px; }
.work-row { display: grid; grid-template-columns: 1fr auto; gap: 12px; align-items: center; padding: 10px 0; border-top: 1px solid var(--ios-line);
  text-decoration: none; color: inherit; }
.work-main { min-width: 0; font-size: 14px; }
.work-go { color: var(--ios-blue); font-size: 14px; white-space: nowrap; }
.team { padding: 4px 16px 12px; }
.team-row { display: grid; grid-template-columns: 150px minmax(0, 1fr) minmax(0, 1fr); gap: 4px 14px; padding: 10px 0; border-bottom: 1px solid var(--ios-line); font-size: 14px; }
.team-role { color: var(--muted); font-size: 13px; padding-top: 1px; }
.team-c { color: var(--muted); overflow-wrap: anywhere; }
.team-cab { padding-top: 12px; }
.team-inv { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
@media (max-width: 700px) { .team-row { grid-template-columns: 1fr; gap: 2px; } }
/* 11: стандартные документы */
.std-row { display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: baseline; padding: 8px 0; border-bottom: 1px solid var(--ios-line); }
.std-up { display: grid; grid-template-columns: 200px 170px minmax(0, 1fr) minmax(0, 1fr); gap: 8px 12px; align-items: end; margin-top: 12px; }
.std-up .actions { grid-column: 1 / -1; }
@media (max-width: 760px) { .std-up { grid-template-columns: 1fr; } }
.std-card { background: #fff; border: 1px solid var(--ios-line); border-radius: 12px; padding: 14px 16px; margin-bottom: 12px; }
.std-card .std-acts { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 8px; }
/* 11: живой ГПР */
.gpr-sum { display: flex; flex-wrap: wrap; gap: 8px 24px; align-items: flex-end; margin: 0 0 12px; font-size: 14px; }
.gpr-sum > div { display: flex; flex-direction: column; }
.gpr-sum .muted { font-size: 12px; }
.gpr-modes { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center; margin: 6px 0 6px; }
.gpr-to { gap: 8px; }
.gpr-to input[type=date] { width: auto; }
.gpr-mhint { margin: 0 0 10px; }
.gpr { --lw: 300px; background: #fff; border: 1px solid var(--ios-line); border-radius: 12px; overflow-x: auto; overflow-y: hidden; margin-bottom: 8px; }
.gpr-in { width: calc(var(--lw) + var(--tw) + 16px); position: relative; }
.gpr-row { display: flex; height: 34px; border-bottom: 1px solid #F0F0F3; }
.gpr-row:last-child { border-bottom: 0; }
.gpr-head { height: 40px; border-bottom: 1px solid var(--ios-line); }
.gpr-l { position: sticky; left: 0; z-index: 4; flex: 0 0 var(--lw); width: var(--lw); background: #fff; border-right: 1px solid var(--ios-line);
  display: flex; align-items: center; gap: 8px; padding: 0 10px; font-size: 13px; text-decoration: none; color: inherit; min-width: 0; }
.gpr-head .gpr-l { font-size: 12px; color: var(--muted); }
a.gpr-l:hover { background: #F7F7FA; }
.gpr-n { color: var(--muted); width: 20px; text-align: right; flex: 0 0 20px; font-size: 12px; }
.gpr-w { display: flex; flex-direction: column; min-width: 0; flex: 1; line-height: 1.2; }
.gpr-wt, .gpr-ws { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gpr-ws { font-size: 11px; color: var(--muted); }
.gpr-st { flex: 0 0 auto; font-size: 12px; display: flex; gap: 4px; }
.gpr-rs { display: inline-block; width: 16px; height: 16px; border-radius: 8px; background: #FF9500; color: #fff; font-size: 11px; text-align: center; line-height: 16px; font-weight: 700; }
.gpr-t { position: relative; flex: 0 0 var(--tw); width: var(--tw); margin-left: 8px; }
.gpr-mon { position: absolute; top: 4px; font-size: 11px; font-weight: 600; white-space: nowrap; padding-left: 3px; }
.gpr-tick { position: absolute; top: 21px; font-size: 10px; color: var(--muted); padding-left: 2px; }
.gpr-body { position: relative; }
.gpr-bg { position: absolute; top: 0; bottom: 0; left: calc(var(--lw) + 8px); width: var(--tw); z-index: 0; pointer-events: none; }
.gpr-bg i { position: absolute; top: 0; bottom: 0; width: var(--px); background: #F4F4F7; }
.gpr-bg b { position: absolute; top: 0; bottom: 0; width: 1px; background: #E5E5EA; }
.gpr-today { position: absolute; top: 0; bottom: 0; width: 0; border-left: 2px solid #FF3B30; z-index: 3; }
.gpr-target { position: absolute; top: 0; bottom: 0; width: 0; border-left: 2px dashed #007AFF; z-index: 3; }
.gpr-body .gpr-row { position: relative; z-index: 1; background: transparent; }
.gpr-bar { position: absolute; top: 9px; height: 14px; border-radius: 4px; z-index: 2; }
.gpr-bar.c-done { background: #34C759; } .gpr-bar.c-plan { background: #AEAEB2; } .gpr-bar.c-late { background: #FF3B30; }
.gpr-bar.k-review { opacity: .38; } .gpr-bar.k-fix { opacity: .78; }
.gpr-ghost { position: absolute; top: 27px; height: 3px; border-radius: 2px; background: #8E8E93; opacity: .45; z-index: 1; }
.gpr-meet { position: absolute; top: 12px; width: 8px; height: 8px; margin-left: -4px; border-radius: 50%; background: #fff; border: 1.5px solid #111; z-index: 3; }
.gpr-pay { position: absolute; top: 2px; width: 7px; height: 7px; margin-left: -3.5px; transform: rotate(45deg); border: 1.5px solid #248A3D; background: #248A3D; z-index: 3; }
.gpr-pay.p-final { background: #fff; }
.gpr-legend { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 4px 0 8px; align-items: center; }
.gpr-legend span { display: inline-flex; align-items: center; gap: 6px; }
.lg { display: inline-block; width: 18px; height: 10px; border-radius: 3px; }
.lg.c-done { background: #34C759; } .lg.c-plan { background: #AEAEB2; } .lg.c-late { background: #FF3B30; }
.lg-ghost { height: 3px; background: #8E8E93; opacity: .6; } .lg-rev { background: #34C759; opacity: .38; }
.lg-meet { width: 8px; height: 8px; border-radius: 50%; border: 1.5px solid #111; }
.lg-pay { width: 7px; height: 7px; transform: rotate(45deg); background: #248A3D; border-radius: 0; }
.lg-today { width: 0; height: 12px; border-left: 2px solid #FF3B30; border-radius: 0; }
.rs-unit { padding: 8px 0; border-bottom: 1px solid var(--ios-line); }
.rs-line { margin-top: 4px; }
.rs-st { margin-left: 6px; font-size: 12px; } .rs-open { color: #FF9500; } .rs-accepted { color: #248A3D; } .rs-rejected { color: #FF3B30; }
@media (max-width: 700px) { .gpr { --lw: 150px; } .gpr-ws { display: none; } .gpr-n { display: none; } }
/* 11: сдача материалов */
.slots { padding: 4px 16px 14px; }
.slot { padding: 10px 0; border-bottom: 1px solid var(--ios-line); }
.slot-h { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; gap: 10px; align-items: center; }
.slot-mark { width: 20px; height: 20px; border-radius: 10px; border: 1.5px solid var(--line2); display: inline-flex; align-items: center; justify-content: center; font-size: 12px; color: #fff; }
.slot.ok .slot-mark { background: #34C759; border-color: #34C759; }
.slot-t { min-width: 0; font-size: 14px; }
.slot-up { margin: 0; }
.slot-up label.btn { cursor: pointer; margin: 0; }
.slot-f { display: flex; gap: 8px; align-items: baseline; margin: 6px 0 0 32px; font-size: 13px; min-width: 0; }
.slot-f a { overflow-wrap: anywhere; }
.slot-send { padding-top: 12px; }
.slot-send button[disabled] { opacity: .45; cursor: not-allowed; }
.dl-file { display: flex; gap: 10px; align-items: baseline; padding: 4px 0; font-size: 14px; min-width: 0; }
.dl-file a { overflow-wrap: anywhere; }
.answer { display: flex; gap: 10px; flex-wrap: wrap; align-items: flex-start; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--ios-line); }
.answer form { margin: 0; }
.answer-rem { flex: 1 1 280px; }
.answer-rem > summary { list-style: none; display: inline-block; cursor: pointer; }
.answer-rem > summary::-webkit-details-marker { display: none; }
.answer-rem[open] > summary { margin-bottom: 10px; }
.answer-in { display: grid; gap: 4px; margin-top: 8px; max-width: 520px; }
.hist { padding: 10px 0; border-bottom: 1px solid var(--ios-line); }
.hist:last-child { border-bottom: 0; }
.hist-ans { margin-top: 6px; padding: 8px 10px; border-radius: 8px; font-size: 14px; }
.hist-ans.ok { background: #EAF8EE; } .hist-ans.rem { background: #FFF4E5; }
.rs-dec { gap: 8px; margin-top: 6px; flex-wrap: wrap; } .rs-dec input { flex: 1 1 200px; }
.rs-add { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; } .rs-add input { flex: 1 1 260px; }
@media (max-width: 600px) { .slot-h { grid-template-columns: 22px 1fr; } .slot-h > form, .slot-h > a.btn { grid-column: 2; justify-self: start; } .slot-f { margin-left: 32px; } }
.inv-row { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: center; margin-top: 6px; min-width: 0; }
.inv-row input { flex: 1 1 220px; min-width: 0; font-size: 12px; padding: 4px 8px; }
.inv-row form { margin: 0; }
.ex-cap:has(+ .ex-items:not(:has(.ex-item))) { display: none; }
.unit-start { display: flex; gap: 8px 12px; align-items: center; flex-wrap: wrap; margin-bottom: 12px; }
.unit-start button { white-space: nowrap; }
.nowrap { white-space: nowrap; }
/* 11.1: строки как в настройках iPhone — цветной значок, название, статус, «›» */
.ios-list { background: #fff; border: 1px solid var(--ios-line); border-radius: 12px; overflow: hidden; margin: 0 0 14px; }
.ios-row { display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 8px 14px; color: #111; text-decoration: none; position: relative; }
.ios-row + .ios-row::before { content: ""; position: absolute; top: 0; left: 55px; right: 0; border-top: 1px solid var(--ios-line); }
a.ios-row:hover { background: #F7F7FA; color: #111; }
a.ios-row:active { background: #EDEDF2; }
.ios-ic { --c: #8E8E93; flex: 0 0 29px; width: 29px; height: 29px; border-radius: 7px; background: var(--c); color: var(--c);
  display: inline-flex; align-items: center; justify-content: center; overflow: hidden; }
.ios-ic svg { width: 19px; height: 19px; fill: none; stroke: #fff; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2; }
.ios-ic img { width: 100%; height: 100%; object-fit: contain; background: #fff; }
.ic-green { --c: #34C759; } .ic-blue { --c: #007AFF; } .ic-orange { --c: #FF9500; } .ic-purple { --c: #AF52DE; }
.ic-red { --c: #FF3B30; } .ic-gray { --c: #8E8E93; } .ic-teal { --c: #30B0C7; } .ic-indigo { --c: #5856D6; } .ic-yellow { --c: #FFCC00; }
.ios-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.ios-t { font-size: 15px; line-height: 1.3; overflow-wrap: anywhere; }
.ios-s { font-size: 12.5px; color: var(--muted); line-height: 1.3; margin-top: 1px; overflow-wrap: anywhere; }
.ios-st { flex: 0 1 auto; font-size: 14px; color: var(--muted); text-align: right; max-width: 45%; line-height: 1.3; }
.ios-st.warn { color: #FF3B30; } .ios-st.ok { color: #248A3D; }
.ios-badge { flex: 0 0 auto; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; background: #FF3B30; color: #fff; font-size: 12px; font-weight: 600;
  display: inline-flex; align-items: center; justify-content: center; }
.ios-chev { flex: 0 0 auto; color: #C7C7CC; font-size: 22px; line-height: 1; margin-left: 2px; }
@media (max-width: 600px) { .ios-st { max-width: 42%; font-size: 13px; } }
.h2-note { font-family: -apple-system, "Segoe UI", Roboto, Arial, sans-serif; font-size: 13px; color: var(--muted); text-transform: none; letter-spacing: 0; margin-left: 8px; }
.std-links { margin: -8px 0 12px 2px; }
/* 11.1: подсказки на графике */
.gpr-bar, .gpr-meet, .gpr-pay { cursor: pointer; }
.gpr-bar:focus, .gpr-meet:focus, .gpr-pay:focus, .gpr-flag:focus { outline: 2px solid #007AFF; outline-offset: 1px; }
.gpr-flag { position: absolute; top: 5px; width: 14px; height: 14px; border-radius: 7px; background: #FF9500; color: #fff; font-size: 10px; font-weight: 700;
  line-height: 14px; text-align: center; z-index: 4; cursor: pointer; box-shadow: 0 0 0 1.5px #fff; }
.gtip { position: absolute; z-index: 50; max-width: 320px; background: rgba(28,28,30,.94); color: #fff; font-size: 12.5px; line-height: 1.45;
  padding: 8px 11px; border-radius: 10px; white-space: pre-line; box-shadow: 0 6px 20px rgba(0,0,0,.18); pointer-events: none; }
.lg-flag { width: 14px; height: 14px; border-radius: 7px; background: #FF9500; color: #fff; font-size: 10px; font-weight: 700; text-align: center; line-height: 14px; font-style: normal; }
/* 11.1: календарь как в iPhone */
.cal-top { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px 16px; }
.cal-top h1 { margin-bottom: 8px; }
.cal-filter { display: flex; gap: 8px 12px; flex-wrap: wrap; align-items: center; margin: 4px 0 12px; }
.cal-filter select { width: auto; max-width: 100%; }
.cal-mine input { position: absolute; opacity: 0; pointer-events: none; }
.cal-mine { position: relative; cursor: pointer; padding: 6px 14px; }
.cal-month { background: #fff; border: 1px solid var(--ios-line); border-radius: 14px; padding: 12px 10px 8px; }
.cal-mhead { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 2px 6px 10px; }
.cal-mhead b { font-size: 20px; font-weight: 700; letter-spacing: -.01em; }
.cal-nav { display: inline-flex; align-items: center; gap: 14px; }
.cal-nav a { color: #FF3B30; text-decoration: none; font-size: 22px; line-height: 1; padding: 2px 4px; }
.cal-nav a.cal-today { font-size: 15px; }
.cal-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); row-gap: 2px; }
.cal-wd { text-align: center; font-size: 11px; font-weight: 600; color: var(--muted); padding: 2px 0 6px; text-transform: uppercase; }
.cal-day { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 4px 0 6px; text-decoration: none; color: #111; border-top: 1px solid #F0F0F3; min-height: 54px; }
.cal-day:hover { background: #F7F7FA; }
.cal-n { width: 32px; height: 32px; border-radius: 16px; display: inline-flex; align-items: center; justify-content: center; font-size: 17px; }
.cal-day.off .cal-n { color: #8E8E93; }
.cal-day.out .cal-n { color: #C7C7CC; }
.cal-day.today .cal-n { color: #FF3B30; font-weight: 600; }
.cal-day.sel .cal-n { background: #111; color: #fff; font-weight: 600; }
.cal-day.sel.today .cal-n { background: #FF3B30; color: #fff; }
.cal-dots { display: flex; gap: 3px; height: 6px; }
.cal-dots i, .cal-legend i { display: inline-block; width: 6px; height: 6px; border-radius: 3px; }
.c-blue { background: #007AFF; } .c-orange { background: #FF9500; } .c-indigo { background: #5856D6; } .c-green { background: #34C759; }
.c-yellow { background: #FFCC00; } .c-purple { background: #AF52DE; } .c-teal { background: #30B0C7; } .c-gray { background: #8E8E93; } .c-red { background: #FF3B30; }
.cal-dayh { margin-top: 20px; }
.cal-dayh.is-today { color: #FF3B30; }
.cal-empty { margin: -4px 0 8px; }
.cal-list { background: #fff; border: 1px solid var(--ios-line); border-radius: 12px; overflow: hidden; }
.cal-ev { display: grid; grid-template-columns: 4px 72px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 10px 14px 10px 10px; text-decoration: none; color: #111; position: relative; }
.cal-ev + .cal-ev::before { content: ""; position: absolute; top: 0; left: 96px; right: 0; border-top: 1px solid var(--ios-line); }
a.cal-ev:hover { background: #F7F7FA; }
.cal-bar { width: 4px; align-self: stretch; border-radius: 2px; min-height: 34px; }
.cal-time { font-size: 13px; color: var(--muted); font-variant-numeric: tabular-nums; }
.cal-main { display: flex; flex-direction: column; min-width: 0; }
.cal-t { font-size: 15px; line-height: 1.3; overflow-wrap: anywhere; }
.cal-s { font-size: 12.5px; color: var(--muted); line-height: 1.3; overflow-wrap: anywhere; }
.cal-ev.done .cal-t { color: #8E8E93; }
.cal-ev.done .cal-bar { opacity: .45; }
.cal-del { margin: 0; } .cal-del button { font-size: 20px; }
.cal-legend { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 14px 0 10px; color: var(--muted); }
.cal-legend span { display: inline-flex; align-items: center; gap: 6px; }
.cal-add { margin: 8px 0 0; }
.cal-add > summary { list-style: none; display: inline-block; cursor: pointer; }
.cal-add > summary::-webkit-details-marker { display: none; }
.cal-add[open] > summary { margin-bottom: 10px; }
.cal-addgrid { display: grid; grid-template-columns: minmax(0, 1fr) 160px 110px 160px; gap: 8px 12px; }
@media (max-width: 700px) {
  .cal-addgrid { grid-template-columns: 1fr 1fr; } .cal-addgrid .field:first-child { grid-column: 1 / -1; }
  .cal-ev { grid-template-columns: 4px 64px minmax(0, 1fr) auto; gap: 8px; }
  .cal-ev + .cal-ev::before { left: 86px; }
  .cal-day { min-height: 46px; } .cal-n { width: 30px; height: 30px; font-size: 16px; }
  .cal-month { padding: 10px 4px 6px; }
}
.meet-opts { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0 12px; }
.meet-opt { position: relative; }
.meet-opt input { position: absolute; opacity: 0; pointer-events: none; }
.meet-opt span { display: inline-block; padding: 8px 14px; border: 1px solid var(--line2); border-radius: 10px; background: #fff; cursor: pointer; font-size: 14px; }
.meet-opt input:checked + span { border-color: #007AFF; color: #007AFF; box-shadow: 0 0 0 1px #007AFF inset; }
.meet-new { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px 12px; }
@media (max-width: 700px) { .meet-new { grid-template-columns: 1fr; } }
@media (max-width: 720px) { nav { flex-wrap: wrap; overflow: visible; white-space: normal; row-gap: 6px; } nav a { white-space: nowrap; } }
.cal-day:hover, .cal-day:focus { color: #111; }
.cal-time { white-space: nowrap; }
.cal-add > summary::before, .answer-rem > summary::before { content: none !important; display: none !important; }
@media (max-width: 700px) { .cal-time { font-size: 12px; } }
.gpr-sum { align-items: flex-start; } .gpr-sum > div > .small { font-size: 13px; }
.cal-ev.late .cal-time { color: #FF3B30; }
/* 11.1: стартовая страница — лицо Domotony */
main.land-main { max-width: 1040px; padding-top: 0; }
.land-top { display: flex; align-items: center; justify-content: space-between; padding: 22px 0 0; }
.land-brand { font-family: Georgia, "Times New Roman", serif; font-size: 24px; color: #000; text-decoration: none; letter-spacing: -.01em; }
.land-brand b { font-weight: 400; color: #007AFF; }
.land-link { color: var(--muted); text-decoration: none; font-size: 14px; }
.land-hero { padding: 9vh 0 4vh; max-width: 900px; }
.land-tony { font-size: 15px; color: var(--muted); margin: 0 0 18px; min-height: 1.4em; }
.land-h { font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", Roboto, Arial, sans-serif; font-weight: 700;
  font-size: clamp(34px, 6.2vw, 64px); line-height: 1.04; letter-spacing: -.035em; margin: 0 0 22px; color: #000; }
.land-h span { color: #8E8E93; }
.land-lead { font-size: clamp(16px, 1.9vw, 19px); line-height: 1.55; color: #3A3A3C; margin: 0; max-width: 680px; }
.land-who { max-width: 560px; padding-bottom: 6vh; }
.land-q { font-size: 13px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); margin: 0 0 8px 14px; }
.land-roles .ios-row { min-height: 60px; }
.land-roles .ios-t { font-size: 16px; font-weight: 500; }
.land-sec { padding: 4vh 0; border-top: 1px solid var(--ios-line); }
.land-sec h2 { margin: 0 0 16px; }
.land-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.land-card { background: #fff; border-radius: 16px; padding: 18px 18px 16px; border: 1px solid var(--ios-line); }
.land-card .ios-ic { width: 36px; height: 36px; flex-basis: 36px; border-radius: 9px; margin-bottom: 12px; }
.land-card .ios-ic svg { width: 23px; height: 23px; }
.land-card b { display: block; font-size: 16px; margin-bottom: 4px; }
.land-card p { margin: 0; font-size: 14px; line-height: 1.5; color: #636366; }
.land-road { list-style: none; margin: 0; padding: 0; position: relative; max-width: 720px; }
.land-road::before { content: ""; position: absolute; left: 7px; top: 8px; bottom: 8px; width: 2px; background: var(--ios-line); }
.land-road li { display: flex; gap: 16px; padding: 0 0 20px; position: relative; }
.land-road b { font-size: 16px; }
.land-road p { margin: 2px 0 0; font-size: 14px; color: #636366; line-height: 1.5; }
.land-dot { flex: 0 0 16px; width: 16px; height: 16px; border-radius: 8px; background: #fff; border: 2px solid #C7C7CC; margin-top: 3px; position: relative; z-index: 1; }
.land-dot.now { background: #34C759; border-color: #34C759; box-shadow: 0 0 0 4px rgba(52,199,89,.18); }
.land-svc { display: inline-block; margin: 2vh 0 0; font-size: 12px; color: #B0B0B0; text-decoration: none; }
.land-svc:hover { color: var(--muted); }
.land-main .js-reveal { opacity: 0; transform: translateY(8px); transition: opacity .5s, transform .5s; }
.land-main .js-reveal.on { opacity: 1; transform: none; }
@media (max-width: 860px) { .land-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .land-grid { grid-template-columns: 1fr; } .land-hero { padding-top: 6vh; } .land-top { padding-top: 14px; } }

/* 11.1.2: платежи — две строки на этап (◆ предоплата, ◇ окончательный расчёт) */
.budget table.pay tr.pstage td { border-top: 1px solid var(--line2); }
.budget table.pay tr.ppay td { border-top: 0; padding-top: 3px; padding-bottom: 3px; font-size: 14px; color: var(--text); }
.budget table.pay tr.ppay td:nth-child(2) { padding-left: 22px; }
.budget table.pay .pmark { display: inline-block; width: 16px; color: var(--navy); }
.budget table.pay tr.sum + tr.sum td { border-top: 0; }
/* 11.1.2: каналы связи с данными */
table.chdet { border-collapse: collapse; margin-top: 8px; width: 100%; }
table.chdet td { padding: 3px 8px 3px 0; border: 0; vertical-align: top; word-break: break-word; }
table.chdet td:first-child { width: 42%; }
/* 11.1.2: расценки на шаге 5, таблица {Kint} */
.budget .bsub { font-weight: 600; margin: 12px 0 6px; font-size: 14px; }
.budget table.brates { margin-bottom: 6px; }
.kint { margin: 8px 0 10px; padding: 10px 12px; background: #fff; border: 1px solid var(--line2); border-radius: 10px; }
.kint table.kint-t { margin-top: 6px; width: 100%; }
.kint table.kint-t input.zname { width: 100%; min-width: 0; }
input.xs { width: 44px !important; min-width: 0; }
/* 11.1.2: загрузка файлов по частям */
.upbox { position: fixed; inset: 0; background: rgba(0,0,0,.28); display: flex; align-items: center; justify-content: center; z-index: 1000; padding: 16px; }
.upcard { background: #fff; border-radius: 14px; padding: 18px 20px; width: 100%; max-width: 420px; box-shadow: 0 10px 30px rgba(0,0,0,.18); }
.upname { margin: 6px 0 10px; word-break: break-all; }
.upbar { height: 8px; background: #E5E5EA; border-radius: 4px; overflow: hidden; }
.upbar i { display: block; height: 100%; width: 0; background: #007AFF; transition: width .2s; }
.upinfo { margin-top: 6px; }
.uperr { color: var(--err, #c62828); margin-top: 8px; font-size: 14px; }
.upbtns { margin-top: 10px; }
/* 11.1.2: дата — три списка */
.dmy { display: inline-flex; gap: 6px; flex-wrap: wrap; max-width: 100%; }
.dmy select { width: auto; min-width: 0; padding-right: 26px; }
.dmy select.dmy-d { min-width: 64px; }
.dmy select.dmy-m { min-width: 112px; }
.dmy select.dmy-y { min-width: 76px; }
.budget table.brates { width: auto; max-width: 100%; }
.budget table.brates td, .budget table.brates th { padding: 4px 10px 4px 0; }
.budget table.brates td:first-child { min-width: 230px; }
.budget table.brates input.short { width: 104px; }
@media (max-width: 600px) {
  .budget table.brates td:first-child { min-width: 0; width: auto; white-space: normal; }
  .budget table.brates col.c-lab { width: auto; }
  .budget table.brates input.short { width: 76px; }
  .budget table.brates th, .budget table.brates td { padding-right: 6px; }
}
.budget table.terms.brates { min-width: 0; table-layout: auto; }
@media (max-width: 600px) { .budget table.terms.brates { width: 100%; } }
.budget table.pay tr.ppay td { white-space: normal; }
.show-m { display: none; }
@media (max-width: 600px) {
  .show-m { display: block; }
  .budget table.terms.brates input.short { width: 62px; padding-left: 6px; padding-right: 4px; }
  .budget table.terms.brates td:first-child { font-size: 14px; }
  .budget table.pay { min-width: 0 !important; width: 100%; }
}
@media (max-width: 600px) {
  .budget table.pay td:nth-child(2) .muted { white-space: normal; }
  .budget table.pay td, .budget table.pay th { padding-left: 4px; padding-right: 4px; }
  .budget table.pay tr.ppay td:nth-child(2) { padding-left: 10px; }
}
@media (max-width: 600px) { .budget table.pay th { white-space: normal; } }
/* 11.1.2: таблица {Kint} — одна строка: № · помещение · м² (и на телефоне) */
.budget .kint table.kint-t tr, .kint table.kint-t tr { display: grid; grid-template-columns: 48px 1fr 84px; gap: 6px; padding: 3px 0; border-bottom: 0; align-items: center; }
.budget .kint table.kint-t tr[hidden], .kint table.kint-t tr[hidden] { display: none; }
.budget .kint table.kint-t thead, .kint table.kint-t thead { display: block; }
.budget .kint table.kint-t td, .budget .kint table.kint-t th, .kint table.kint-t td, .kint table.kint-t th { padding: 0; width: auto; grid-row: auto; grid-column: auto; }
.budget .kint table.kint-t td input, .kint table.kint-t td input { width: 100% !important; min-width: 0 !important; height: 40px; box-sizing: border-box; }
.kint table.kint-t tbody { display: block; }
/* каналы связи: кто — подзаголовком, ниже канал и данные */
table.chdet td.chwho { padding-top: 8px; color: var(--muted); font-size: 13px; }
table.chdet td:first-child { width: 38%; }
table.chdet td { word-break: break-word; overflow-wrap: anywhere; }

/* 11.1.3 (замечание 6.1): внутри любой белой карточки — отступы со всех сторон, текст не касается рамки */
.rsec, .card, .fg { padding: 14px 16px; }
.empty { padding-left: 16px; padding-right: 16px; }
.rsec > h3:first-child, .rsec-h h3, .card > h2:first-child, .card > h3:first-child { margin-top: 0; }
.rsec > .tscroll:last-child, .rsec > :last-child { margin-bottom: 0; }
/* 11.1.3: пароль с «глазом» */
.pwwrap { position: relative; display: block; }
.pwwrap input { padding-right: 46px !important; width: 100%; box-sizing: border-box; }
button.pweye, button.pweye:not(.primary):not(.accent):not(.link) { position: absolute; right: 4px; top: 50%; transform: translateY(-50%);
  width: 38px; height: 34px; padding: 0; margin: 0; border: 0 !important; background: transparent !important; color: #8E8E93; cursor: pointer;
  display: flex; align-items: center; justify-content: center; box-shadow: none; }
button.pweye:hover { color: var(--ios-blue); }
/* 11.1.3: календарь — быстрый переход месяц / год, предварительные события черновиков */
.cal-jump { display: inline-flex; gap: 6px; align-items: center; margin: 0; }
.cal-jump select { width: auto; font-weight: 600; font-size: 17px; padding: 6px 28px 6px 10px; }
.cal-ev.draft .cal-bar { opacity: .45; }
.cal-ev.draft .cal-t { font-style: italic; }
/* 11.1.3: ГПР — масштаб и закреплённые области (6.6–6.8) */
.gpr { overflow: auto; max-height: calc(100vh - 140px); overscroll-behavior: contain; cursor: grab; position: relative; }
.gpr.grab { cursor: grabbing; user-select: none; }
.gpr .gpr-head { position: sticky; top: 0; z-index: 6; background: #fff; }
.gpr .gpr-head .gpr-l { z-index: 7; }
.gpr .gpr-head .gpr-t { background: #fff; }
.gpr-bg i { width: var(--pxk, var(--px)); }
.gpr-tick { white-space: nowrap; }
.gpr-tick.mon { font-weight: 600; }
.gpr-zoom { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin: 6px 0 8px; }
.gpr-zoom button { min-width: 40px; padding: 6px 12px; }
.gpr-zhint { margin-left: 4px; }
.gpr a.gpr-l { cursor: pointer; }
.gpr-cur { background: #fff; z-index: 2; padding-right: 6px; }
.gpr.zout .gpr-bg i { display: none; }
/* 11.1.3: финансы */
.fin-sub { margin-top: -12px; }
.fin-period { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: flex-end; margin: 0 0 14px; }
.fin-custom { display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-end; margin: 0; }
.fin-custom .field { margin: 0; }
.fin-custom label { font-size: 12px; }
.fin-ip select { width: auto; }
.fin-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; margin-bottom: 8px; }
.fin-tile { background: #fff; border-radius: 12px; padding: 14px 16px; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.fin-tile b { font-size: 22px; font-weight: 600; letter-spacing: -.01em; }
.fin-tile.warn b { color: #FF3B30; }
.fin-l { font-size: 13px; color: var(--muted); }
.fin-s { font-size: 12px; color: var(--muted); }
.fin-avrow { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.fin-avrow > div { display: flex; flex-direction: column; gap: 2px; }
.fin-avrow b { font-size: 19px; font-weight: 600; }
.fin-pos { color: #FF9500; } .fin-neg { color: #FF3B30; }
.fin-say { margin: 10px 0 0; }
table.fin-t { width: 100%; }
table.fin-t td, table.fin-t th { padding: 8px 10px; vertical-align: top; }
.fin-add { margin-top: 10px; }
.fin-add > summary { display: inline-block; list-style: none; cursor: pointer; }
.fin-add > summary::-webkit-details-marker { display: none; }
.fin-form { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: flex-end; margin-top: 10px; }
.fin-form .field { margin: 0; min-width: 0; }
.fin-form input:not([type=hidden]), .fin-form select { max-width: 100%; }
@media (max-width: 600px) {
  .fin-avrow { grid-template-columns: 1fr; }
  .fin-tiles { grid-template-columns: 1fr 1fr; }
  .fin-tile b { font-size: 18px; }
  table.fin-proj { min-width: 640px; }
}
/* 11.1.3: счета и акты в карточке */
.money-row { display: flex; flex-wrap: wrap; gap: 6px 16px; align-items: center; justify-content: space-between; padding: 10px 0; border-top: 1px solid var(--line); }
.money-row:first-child { border-top: 0; padding-top: 0; }
.money-main { min-width: 0; flex: 1 1 260px; }
.money-pays { font-size: 13px; color: var(--muted); margin-top: 2px; }
.money-act { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.money-act form { margin: 0; display: inline-flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.money-act input.short { width: 110px; }
.st-paid { color: #248A3D; } .st-part { color: #FF9500; } .st-unpaid { color: var(--muted); }
.st-auto, .st-signed { color: #248A3D; } .st-wait { color: #FF9500; } .st-refused { color: #FF3B30; }
@media (max-width: 600px) {
  table.fin-t td, table.fin-t th { padding: 7px 5px; font-size: 13px; }
  table.fin-t td:first-child, table.fin-t th:first-child { padding-left: 10px; }
  table.fin-t td:last-child, table.fin-t th:last-child { padding-right: 10px; }
  table.fin-t th { font-size: 12px; }
  table.fin-proj { min-width: 560px; }
}

/* 11.1.3: шапка календаря и части этапа — не вылезают за карточку на телефоне */
.cal-mhead { flex-wrap: wrap; }
@media (max-width: 600px) {
  .cal-jump select { font-size: 15px; padding: 5px 24px 5px 8px; }
  .cal-nav { gap: 8px; }
}
table.form.parts-t { width: 100%; table-layout: fixed; }
table.form.parts-t th:last-child, table.form.parts-t td:last-child { width: 34%; }
table.form.parts-t input { width: 100%; max-width: 100%; box-sizing: border-box; }
table.form.fgrid { width: 100%; table-layout: fixed; }
table.form.fgrid th:first-child, table.form.fgrid td:first-child { width: 26px; }
table.form.fgrid th { overflow-wrap: anywhere; hyphens: auto; }
table.form.fgrid input:not([type=checkbox]) { width: 100%; max-width: 100%; min-width: 0; box-sizing: border-box; }
@media (max-width: 760px) {
  table.form.fgrid { table-layout: auto; }
  table.form.fgrid tr.fg-h { display: none; }
  table.form.fgrid tr { padding: 6px 0 10px; border-top: 1px solid var(--line); }
  table.form.fgrid td { width: 100% !important; padding: 3px 0; border: 0; }
  table.form.fgrid td:first-child { font-weight: 600; }
  table.form.fgrid td[data-l]::before { content: attr(data-l); display: block; font-size: 12px; color: var(--muted); margin-bottom: 2px; }
  table.form.fgrid td[data-l]:has(input[type=checkbox]) { display: flex; flex-direction: row-reverse; justify-content: flex-end; align-items: center; gap: 8px; }
  table.form.fgrid td[data-l]:has(input[type=checkbox])::before { display: inline; margin: 0; font-size: 14px; color: inherit; }
  table.form.fgrid td input[type=checkbox] { margin: 0; width: 18px; height: 18px; min-width: 0; }
}
footer { padding: 20px 16px; }

/* 11.1.4 — окно подтверждения (7.1) */
.cfm-back { position: fixed; inset: 0; background: rgba(0,0,0,.35); display: flex; align-items: center; justify-content: center; z-index: 1000; padding: 16px; }
.cfm-back[hidden] { display: none; }
.cfm { background: #fff; border-radius: 14px; max-width: 420px; width: 100%; padding: 20px 20px 16px; box-shadow: 0 10px 40px rgba(0,0,0,.2); }
.cfm-t { font-size: 17px; font-weight: 600; margin-bottom: 8px; overflow-wrap: anywhere; }
.cfm-x { font-size: 14px; color: var(--muted); line-height: 1.45; }
.cfm-b { display: flex; gap: 10px; justify-content: flex-end; margin-top: 18px; flex-wrap: wrap; }
.cfm-b button { min-width: 110px; }
.cfm-ok { background: #FF3B30 !important; color: #fff !important; border-color: #FF3B30 !important; }
body.cfm-open { overflow: hidden; }
button.link.danger-link { color: #FF3B30; }
.std-gr { font-size: 15px; margin: 14px 0 6px; color: var(--muted); font-weight: 600; }

/* 7.6: предпросмотр подписи как в документе — 10 мм ≈ 38 px, увеличено вдвое для наглядности */
.sig-prev { margin-top: 12px; }
.sig-page { margin-top: 8px; background: #fff; border: 1px solid var(--ios-line); border-radius: 10px; padding: 18px 16px; display: flex; flex-wrap: wrap; gap: 12px 40px; align-items: flex-end; font-family: Montserrat, sans-serif; font-size: 19px; color: #555; }
.sig-page span { display: inline-flex; align-items: flex-end; gap: 8px; }
.sig-page img { height: 76px; width: auto; max-width: 100%; }
.sig-line { display: inline-block; width: 150px; border-bottom: 1px solid #555; margin-bottom: 4px; }
.note.warn-note { background: #FFF6E0; border-color: #F5D58A; }
.sig-page span { min-width: 0; max-width: 100%; flex-wrap: wrap; }
.sig-page img { max-width: 100%; object-fit: contain; object-position: left bottom; }
@media (max-width: 600px) { .sig-page { font-size: 15px; } .sig-page img { height: 60px; } .sig-line { width: 110px; } }

/* 7.23: «Подготовленные материалы» на телефоне — галочка слева от названия, без съехавшей шапки */
@media (max-width: 640px) {
  table.form.fmat tr.fg-h { display: none; }
  table.form.fmat > tbody > tr { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 4px 10px; padding: 8px 0; border-top: 1px solid var(--line); }
  table.form.fmat > tbody > tr > td { display: block; width: auto; padding: 0; border: 0; }
  table.form.fmat > tbody > tr > td:first-child { order: 2; flex: 1 1 0; min-width: 0; }
  table.form.fmat > tbody > tr > td[data-l] { order: 1; display: inline-flex; align-items: center; gap: 6px; }
  table.form.fmat:not(.fmat1) > tbody > tr > td[data-l]::after { content: attr(data-l); font-size: 12px; color: var(--muted); }
  table.form.fmat input[type=checkbox] { margin: 2px 0 0; width: 18px; height: 18px; }
}
.sect.sect-auto .t { color: var(--muted); }

/* 7.36: переписка по проекту — как в мессенджере */
.chat { background: #E9E4DC; border-radius: 14px; padding: 14px 16px; display: flex; flex-direction: column; gap: 6px; max-height: calc(100vh - 290px); min-height: 240px; overflow-y: auto; }
.chat-day { text-align: center; margin: 8px 0 4px; }
.chat-day span { background: #fff; color: var(--muted); font-size: 12px; padding: 3px 10px; border-radius: 10px; box-shadow: 0 1px 1px rgba(0,0,0,.06); }
.chat-msg { display: flex; }
.chat-msg.mine { justify-content: flex-end; }
.chat-b { max-width: min(78%, 560px); background: #fff; border-radius: 10px 10px 10px 2px; padding: 7px 10px 5px; box-shadow: 0 1px 1px rgba(0,0,0,.08); overflow-wrap: anywhere; }
.chat-msg.mine .chat-b { background: #DCF8C6; border-radius: 10px 10px 2px 10px; }
.chat-who { font-size: 12px; font-weight: 600; color: #007AFF; margin-bottom: 2px; }
.chat-item { font-size: 12px; color: var(--muted); border-left: 3px solid #34C759; padding-left: 6px; margin: 2px 0 4px; }
.chat-t { font-size: 14px; white-space: pre-wrap; line-height: 1.4; }
.chat-time { font-size: 11px; color: var(--muted); text-align: right; margin-top: 2px; }
.chat-ev { text-align: center; }
.chat-ev span { display: inline-block; max-width: 90%; font-size: 12.5px; padding: 5px 12px; border-radius: 10px; background: #FFF6D6; color: #5c4b00; line-height: 1.4; }
.chat-ev i { display: block; font-style: normal; font-size: 11px; opacity: .7; }
.chat-ev.chat-ok span { background: #E3F6E8; color: #1E6B3A; }
.chat-ev.chat-price span { background: #FDEBEB; color: #9B1C1C; }
.chat-ev.chat-prop span { background: #E6F0FF; color: #1D4E9E; }
.chat-form { display: flex; gap: 8px; margin-top: 10px; align-items: flex-end; }
.chat-form textarea { flex: 1; min-width: 0; resize: vertical; }
@media (max-width: 600px) { .chat { max-height: calc(100vh - 250px); padding: 10px 12px; } .chat-b { max-width: 88%; } }
/* 7.38: расценки специалистов */
table.rates-t td, table.rates-t th { padding: 7px 10px; }
table.rates-t tr.rates-stage td { background: #F7F8FA; padding-top: 10px; }
table.rates-t .rate-in { width: 120px; text-align: right; }
table.rates-cmp td.r-cheap { color: #1E6B3A; } table.rates-cmp td.r-dear { color: #B42318; }
@media (max-width: 600px) {
  table.rates-t, table.rates-cmp { min-width: 0; width: 100%; }
  table.rates-t thead, table.rates-cmp thead { display: none; }
  table.rates-t tr, table.rates-cmp tr { display: block; border-bottom: 1px solid #E6E8EC; padding: 8px 0; }
  table.rates-t td, table.rates-cmp td { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 3px 10px; border: 0; text-align: right; white-space: normal; }
  table.rates-t td:first-child, table.rates-cmp td:first-child { display: block; text-align: left; font-weight: 500; padding-bottom: 6px; }
  table.rates-t td[data-l]::before, table.rates-cmp td[data-l]::before { content: attr(data-l); color: #8A8F98; font-size: 13px; text-align: left; font-weight: 400; }
  table.rates-t tr.rates-stage { padding: 0; border: 0; } table.rates-t tr.rates-stage td { padding: 10px 6px; }
  table.rates-t .rate-in { width: 130px; }
}
/* 11.1.5: вкладки — «полёт», как на Mac: инерция, бросок мышью, пружинка у краёв, стрелки при наведении */
header { flex-wrap: nowrap; }
.nav-wrap { flex: 1 1 auto; min-width: 0; position: relative; }
header nav { width: 100%; display: flex; flex-wrap: nowrap !important; overflow-x: auto; overflow-y: hidden;
  white-space: nowrap !important; gap: 4px !important; row-gap: 0 !important; padding: 2px 0; scrollbar-width: none;
  overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; touch-action: pan-x pan-y;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 var(--fl, 0px), #000 calc(100% - var(--fr, 0px)), transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 var(--fl, 0px), #000 calc(100% - var(--fr, 0px)), transparent 100%); }
header nav::-webkit-scrollbar { display: none; }
header nav.drag { cursor: grabbing; user-select: none; }
header nav a { flex: 0 0 auto; white-space: nowrap !important; padding: 5px 12px; border-radius: 8px; line-height: 20px;
  transition: background .15s; -webkit-user-drag: none; }
header nav a.on { background: rgba(0, 0, 0, .07); color: #000; }
header nav a:hover { background: rgba(0, 0, 0, .04); }
header .nav-wrap button.nav-ar { position: absolute; top: 50%; transform: translateY(-50%); width: 28px; height: 28px; padding: 0; border-radius: 14px;
  border: 1px solid var(--ios-line) !important; background: rgba(255, 255, 255, .92) !important; color: #3A3A3C !important; font-size: 18px; line-height: 24px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, .12); opacity: 0; pointer-events: none; transition: opacity .2s; z-index: 3; min-width: 0; }
.nav-ar.l { left: 0; } .nav-ar.r { right: 0; }
.nav-wrap:hover .nav-ar.show { opacity: 1; pointer-events: auto; }
@media (hover: none) { .nav-ar { display: none; } }
/* кружок с инициалами и меню */
header .who { flex: 0 0 auto; position: relative; margin-left: 4px; }
header .who button.me-btn { width: 34px; height: 34px; min-width: 0; padding: 0; border-radius: 17px; border: 0 !important; background: #8E8E93 !important; color: #fff !important;
  font-size: 13px; font-weight: 600; letter-spacing: .02em; cursor: pointer; }
header .who button.me-btn:hover, header .who button.me-btn[aria-expanded="true"] { background: #636366 !important; }
.me-menu { position: absolute; right: 0; top: 42px; min-width: 200px; background: #fff; border: 1px solid var(--ios-line);
  border-radius: 12px; box-shadow: 0 8px 24px rgba(0, 0, 0, .14); padding: 6px 0; z-index: 20; }
.me-menu .me-name { padding: 8px 16px 10px; font-size: 13px; color: var(--muted); border-bottom: 1px solid var(--ios-line);
  margin-bottom: 4px; white-space: normal; }
.me-menu a { display: block; padding: 9px 16px; margin: 0 !important; color: #111; text-decoration: none; font-size: 15px; }
.me-menu a:hover { background: #F2F2F7; }
@media (max-width: 900px) {
  header { flex-wrap: wrap; gap: 6px 12px; padding: 10px 16px; }
  header .brand { order: 1; }
  header .who { order: 2; margin-left: auto; width: auto; display: block; }
  .nav-wrap { order: 3; flex: 0 0 calc(100% + 32px); margin: 0 -16px; }
  header nav { padding: 2px 16px; box-sizing: border-box; }
}
.draft-list { margin: 0; padding-left: 20px; } .draft-list li { margin: 6px 0; }
.draft-btn { border-color: #D92D20 !important; color: #D92D20 !important; }
/* 11.1.5: страница входа — как в версии 11 */
main.hello-main { max-width: 640px; padding-top: 16vh; }
.hello-brand { color: #000; }
.hello-t { color: #000; }
.hello .land-roles .ios-row { min-height: 62px; }
@media (max-width: 640px) { main.hello-main { padding-top: 90px; } }
/* 11.1.5: ГПР — высота по экрану, колесо листает, полный экран */
.gpr { overscroll-behavior: auto; }
.gpr-exitbtn { display: none; }
.gpr-box.full { position: fixed; inset: 0; z-index: 1000; background: var(--ios-bg, #F2F2F7); padding: 12px 16px 16px; display: flex; flex-direction: column; }
.gpr-box.full .gpr-fullbtn { display: none; }
.gpr-box.full .gpr-exitbtn { display: inline-block; }
.gpr-box.full .gpr { margin: 0; }
body.gpr-fullmode { overflow: hidden; }
.gtip { z-index: 1100; }
/* 11.1.5: админ в чужом кабинете — красная полоса сверху */
.imp-bar { position: sticky; top: 0; z-index: 30; height: 32px; display: flex; align-items: center; justify-content: center; gap: 14px;
  background: #D92D20; color: #fff; font-size: 13px; padding: 0 12px; white-space: nowrap; overflow: hidden; }
.imp-bar form { margin: 0; display: inline; }
.imp-bar button { background: rgba(255,255,255,.18) !important; color: #fff !important; border: 1px solid rgba(255,255,255,.55) !important;
  padding: 2px 10px; font-size: 12.5px; border-radius: 8px; min-width: 0; }
body.imp > header { top: 32px; }
@media (max-width: 420px) { .imp-bar { font-size: 12px; gap: 8px; justify-content: space-between; } }
/* 11.1.5: «Пользователи» админа */
.ppl-h { font-size: 15px; font-weight: 600; margin: 22px 0 8px; color: #3A3A3C; }
.ppl-row { gap: 12px; }
.ppl-ava { flex: 0 0 34px; width: 34px; height: 34px; border-radius: 17px; background: #8E8E93; color: #fff; font-size: 12.5px; font-weight: 600;
  display: inline-flex; align-items: center; justify-content: center; }
.ppl-row form { margin: 0 0 0 auto; flex: 0 0 auto; }
.ppl-row .ios-main { min-width: 0; }
.ppl-row .ios-s { overflow-wrap: anywhere; }
.imp-bar .imp-t { overflow: hidden; text-overflow: ellipsis; min-width: 0; }
@media (max-width: 520px) { .imp-bar .hide-s { display: none; } }
/* 11.1.5: договор специалиста с ИП */
.agr-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; align-items: start; }
.agr { margin: 0; }
.agr h3 { margin: 0 0 10px; }
.agr-big { font-size: 17px; margin: 0 0 4px; }
.agr-kv { display: flex; justify-content: space-between; gap: 12px; padding: 7px 0; border-bottom: 1px solid var(--ios-line); }
.agr-kv:last-of-type { border-bottom: 0; }
.agr-kv span { color: #3A3A3C; } .agr-kv b { white-space: nowrap; font-weight: 600; }
.agr-up { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 12px; }
.agr-up input[type=file] { max-width: 100%; }
.agr-form .field { margin: 0 0 10px; }
.agr-row2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.agr-steps { margin: 0; padding-left: 20px; } .agr-steps li { margin: 0 0 8px; line-height: 1.45; }
.info { display: inline-flex; width: 18px; height: 18px; border-radius: 9px; align-items: center; justify-content: center; font-size: 12px;
  color: var(--muted); cursor: help; vertical-align: 1px; font-weight: 400; }
.info:hover, .info:focus { color: #007AFF; outline: none; }
@media (max-width: 760px) { .agr-grid { grid-template-columns: 1fr; } .agr-row2 { grid-template-columns: 1fr; } }
/* 11.1.5: финансы специалиста */
.fs-h { font-size: 13px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); font-weight: 500; margin: 18px 0 8px; }
.fs-f { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin: 6px 0 0; }
.fs-f > * { flex: 0 0 auto; }
.fin-tiles.fs-one { grid-template-columns: minmax(0, 1fr); max-width: 640px; }
.fs-f input[type=date] { width: auto; padding: 4px 8px; font-size: 13px; }
@media (max-width: 600px) {
  table.fs-t thead { display: none; }
  table.fs-t tr { display: block; border-bottom: 1px solid var(--ios-line); padding: 8px 0; }
  table.fs-t td { display: flex; justify-content: space-between; gap: 10px; padding: 3px 10px; border: 0; }
  table.fs-t td:first-child { display: block; }
  table.fs-t td[data-l]::before { content: attr(data-l); color: #8A8F98; font-size: 13px; }
}
/* 11.1.6: док как на Mac — плавающая полупрозрачная плашка со значками по центру сверху */
header { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 12px;
  padding: 10px 24px; background: rgba(242, 242, 247, .82); border-bottom: 0; }
header .brand { justify-self: start; }
header .who { justify-self: end; margin-left: 0; }
.nav-wrap { min-width: 0; max-width: 100%; justify-self: center; background: rgba(255, 255, 255, .62); border: 1px solid rgba(255, 255, 255, .9);
  box-shadow: 0 6px 24px rgba(0, 0, 0, .10), 0 0 0 .5px rgba(0, 0, 0, .06); border-radius: 18px;
  -webkit-backdrop-filter: blur(18px) saturate(1.6); backdrop-filter: blur(18px) saturate(1.6); }
header nav.dock { gap: 6px !important; padding: 7px 10px 5px; align-items: flex-start; }
header nav.dock.fits { overflow: visible; -webkit-mask-image: none; mask-image: none; }
header nav a.dk { position: relative; display: flex; flex-direction: column; align-items: center; padding: 0 2px; transition: padding .12s ease-out; background: none !important;
  border-radius: 0; line-height: 1; -webkit-tap-highlight-color: transparent; -webkit-touch-callout: none; user-select: none; }
.dk-ic { flex: 0 0 40px !important; width: 40px !important; height: 40px !important; border-radius: 10px !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .18); transform-origin: 50% 0; transition: transform .12s ease-out; will-change: transform; }
.dk-ic svg { width: 25px !important; height: 25px !important; }
.dk-dot { display: block; width: 4px; height: 4px; border-radius: 2px; margin-top: 4px; background: transparent; }
.dk.on .dk-dot { background: #3A3A3C; }
.dk-n { position: absolute; top: -5px; right: -5px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: #FF3B30; color: #fff;
  font-size: 11px; font-weight: 600; display: inline-flex; align-items: center; justify-content: center; font-style: normal; z-index: 2; box-shadow: 0 0 0 2px #fff; }
.dk-tip { position: fixed; z-index: 60; padding: 4px 9px; border-radius: 7px; background: rgba(40, 40, 42, .88); color: #fff; font-size: 12.5px;
  white-space: nowrap; pointer-events: none; opacity: 0; transition: opacity .12s; transform: translateX(-50%); }
.dk-tip.on { opacity: 1; }
@media (max-width: 900px) {
  header { grid-template-columns: minmax(0, 1fr) auto; padding: 10px 16px 8px; row-gap: 8px; }
  .nav-wrap { grid-column: 1 / -1; grid-row: 2; order: 0; flex: none; margin: 0; width: auto; }
  header .who { grid-column: 2; grid-row: 1; }
  header nav.dock { padding: 6px 8px 4px; box-sizing: border-box; }
  .dk-ic { flex-basis: 38px !important; width: 38px !important; height: 38px !important; }
}
.card-acts { margin: 6px 0 20px; }