/* =========================================================================
   Студия — дизайн-система мини-приложения
   Версия 2 «Матовый»: светлая тема по умолчанию, тёмная — как в Telegram или по выбору.
   ========================================================================= */

/* Шрифт Inter (Google Fonts, подключён в index.html), начертания 400 / 500 / 600. Жирнее 600 не бывает.
   Правила: «Production CRM — правила дизайна», раздел «Версия 2 — новый стиль». */

:root {
  /* Версия 2 · «Матовый» — светлая тема */
  --accent: #cfe0ec;      /* туман (синий, по умолчанию с 4.8.0); варианты: #cfe3c8 шалфей, #f0dccb, #ddd6ee. Текст на акценте всегда #111318 */
  --accent-ink: #111318;
  --bg: #f3f4f5;          /* фон экрана (сверху — свечение акцента, см. body) */
  --bg-glow: color-mix(in srgb, var(--accent) 95%, #ffffff);
  --bg-top: color-mix(in srgb, var(--accent) 40%, #f3f4f5);
  --card: #ffffff;        /* карточки и списки, радиус 24 */
  --surface: var(--card);
  --chip: #f0f1f3;        /* серые плашки, вторичные кнопки, круги иконок */
  --surface-2: var(--chip);
  --track: #ffffff;       /* подложка переключателя — белая капсула */
  --line: rgba(17, 19, 24, 0.07);
  --axis: rgba(17, 19, 24, 0.12);
  --faint: #a3a7b0;
  --ink: #111318;
  --ink-2: #3a3d45;
  --muted: #62666f;
  --cta: #111318;         /* главная кнопка, выбранный пункт переключателя */
  --cta-ink: #ffffff;
  --sel: var(--cta);
  --sel-ink: var(--cta-ink);
  --rose-bg: #f8e3e0;     /* просрочка, долг, «пропущен» */
  --rose: #9b4338;
  --rose-block: #f7e5e1;  /* блок «Горят» */
  --sand-bg: #f5ebd5;     /* «скоро», дедлайн через N часов */
  --sand: #7c6326;
  --green: #3f7a52;       /* прибыль, рост */
  --glass: rgba(255, 255, 255, 0.86);
  --glass-edge: rgba(17, 19, 24, 0.035);
  --card-shadow: inset 0 0 0 1px rgba(17, 19, 24, 0.035), 0 1px 2px rgba(17, 19, 24, 0.035);
  --float-shadow: inset 0 0 0 1px rgba(17, 19, 24, 0.035), 0 10px 30px rgba(17, 19, 24, 0.08);
  --sheet-top: color-mix(in srgb, var(--accent) 35%, #ffffff);
  --scrim: rgba(17, 19, 24, 0.28);

  /* Крупная карточка (шапки статистики, расходов, клиента; бывший «тёмный блок») — заливка акцентом */
  --dark: var(--accent);
  --dark-edge: transparent;
  --dark-btn: rgba(255, 255, 255, 0.62);
  --dark-line: rgba(17, 19, 24, 0.12);
  --dark-stack-1: color-mix(in srgb, var(--accent) 70%, #ffffff);
  --dark-stack-2: color-mix(in srgb, var(--accent) 40%, #ffffff);
  --on-dark: #111318;
  --on-dark-muted: rgba(17, 19, 24, 0.62);

  --hot: var(--rose);     /* срочное — всегда со словом */
  --hot-dot: var(--rose);
  --hot-on-dark: var(--rose);
  --debt-bg: var(--rose-bg);
  --debt-ink: var(--rose);
  --up: var(--green);     /* рост — всегда со стрелкой */
  --link: #3a5f86;
  --nav: var(--glass);
  --nav-line: transparent;
  --s1: #cfe0ec; --s2: #9fbfd8; --s3: #5f87a8; --s4: #2f4f6b; /* шкала этапов (пастельная) */
  --s1-ink: #111318; --s2-ink: #111318; --s3-ink: #ffffff; --s4-ink: #ffffff;
  --danger: var(--rose);
  --shadow: none;
  --radius: 24px;
  --radius-sm: 16px;

  /* Старые цветные метки сведены к трём: серая — свойство, розовая — проблема, песочная — «скоро» */
  --st-orange-bg: var(--sand-bg); --st-orange: var(--sand);
  --st-blue-bg: var(--chip);   --st-blue: var(--ink-2);
  --st-violet-bg: var(--chip); --st-violet: var(--ink-2);
  --st-red-bg: var(--rose-bg); --st-red: var(--rose);
  --st-green-bg: var(--chip);  --st-green: var(--green);
  --st-gray-bg: var(--chip);   --st-gray: var(--ink-2);
  --st-lime-bg: var(--chip);   --st-lime: var(--ink-2);
}

:root[data-theme="dark"] {
  --bg: #0c0d0f;
  --bg-glow: color-mix(in srgb, var(--accent) 26%, #111214);
  --bg-top: color-mix(in srgb, var(--accent) 10%, #0c0d0f);
  --card: #1a1b1f;
  --chip: #25272c;
  --track: #1a1b1f;
  --line: rgba(255, 255, 255, 0.07);
  --axis: rgba(255, 255, 255, 0.12);
  --faint: #5c6068;
  --ink: #f1f2f4;
  --ink-2: #c9ccd2;
  --muted: #8d929b;
  --cta: #f1f2f4;
  --cta-ink: #111318;
  --rose-bg: rgba(240, 196, 187, 0.14);
  --rose: #f0c4bb;
  --rose-block: rgba(240, 196, 187, 0.1);
  --sand-bg: rgba(236, 218, 178, 0.14);
  --sand: #e8d6ad;
  --green: #a6d6b4;
  --glass: rgba(26, 27, 31, 0.82);
  --glass-edge: rgba(255, 255, 255, 0.06);
  --card-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.05);
  --float-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06), 0 10px 30px rgba(0, 0, 0, 0.35);
  --sheet-top: color-mix(in srgb, var(--accent) 14%, #1a1b1f);
  --scrim: rgba(0, 0, 0, 0.5);

  --dark: color-mix(in srgb, var(--accent) 30%, #1a1b1f);
  --dark-btn: rgba(255, 255, 255, 0.1);
  --dark-line: rgba(255, 255, 255, 0.14);
  --dark-stack-1: color-mix(in srgb, var(--accent) 20%, #1a1b1f);
  --dark-stack-2: color-mix(in srgb, var(--accent) 12%, #1a1b1f);
  --on-dark: #f1f2f4;
  --on-dark-muted: #c9ccd2;
  --link: #a9c4e0;
  --s1: #23384a; --s2: #3d5f7d; --s3: #7fa4c4; --s4: #cfe0ec;
  --s1-ink: #f1f2f4; --s2-ink: #f1f2f4; --s3-ink: #111318; --s4-ink: #111318;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.35;
  -webkit-font-smoothing: antialiased;
}

button, input, select, textarea { font-family: inherit; }
a { color: inherit; }

#app { min-height: 100vh; }

/* ---------- Шапка ---------- */

#topbar {
  padding: 18px 20px 6px;
  background: var(--bg);
}
#topbar.nested {
  position: sticky;
  top: 0;
  z-index: 15;
  padding: 12px 16px 10px;
  display: flex;
  align-items: center;
  gap: 12px;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.hdr-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.hdr-hello { font-size: 14px; color: var(--muted); font-weight: 600; }
.hdr-date { font-size: 13px; color: var(--muted); margin-top: 2px; }
.avatar {
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--dark); color: var(--accent);
  display: grid; place-items: center;
  font-weight: 600; font-size: 17px; flex-shrink: 0;
}
.page-title {
  font-size: 32px; font-weight: 600; letter-spacing: -0.03em;
  margin: 14px 0 4px; line-height: 1.1;
}
.page-title.sm { font-size: 22px; margin: 0; letter-spacing: -0.02em; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.icon-btn {
  width: 42px; height: 42px; border-radius: 50%;
  border: none; background: var(--surface); color: var(--ink);
  display: grid; place-items: center; cursor: pointer; flex-shrink: 0;
  box-shadow: var(--shadow);
}
.icon-btn svg { width: 20px; height: 20px; }

/* ---------- Контент ---------- */

#view { padding: 8px 16px 120px; }

.section-head {
  display: flex; align-items: baseline; justify-content: space-between;
  margin: 22px 4px 10px;
}
.section-head:first-child { margin-top: 6px; }
.section-head h2 { font-size: 19px; font-weight: 600; letter-spacing: -0.02em; margin: 0; }
.section-head .count { font-size: 13px; font-weight: 600; color: var(--muted); }

.card {
  background: var(--surface);
  border-radius: var(--radius);
  padding: 16px;
  margin-bottom: 10px;
  box-shadow: var(--shadow);
}
.card.tap { cursor: pointer; transition: transform 0.12s ease; }
.card.tap:active { transform: scale(0.985); }

.muted { color: var(--muted); }
.small { font-size: 13px; }
.stack { display: flex; flex-direction: column; gap: 12px; }
.row { display: flex; align-items: center; gap: 10px; }
.row.between { justify-content: space-between; }
.wrap { flex-wrap: wrap; }
.grow { flex: 1; min-width: 0; }

/* ---------- Тёмная «главная» карточка ---------- */

.hero {
  background: var(--dark);
  color: var(--on-dark);
  border-radius: 26px;
  padding: 20px;
  margin-bottom: 14px;
  position: relative;
  overflow: hidden;
}
.hero::after {
  content: "";
  position: absolute; right: -40px; top: -40px;
  width: 160px; height: 160px; border-radius: 50%;
  background: var(--accent); opacity: 0.12;
  pointer-events: none;
}
.hero > * { position: relative; z-index: 1; }
.hero-label { font-size: 13px; color: var(--on-dark-muted); font-weight: 600; }
.hero-big { font-size: 40px; font-weight: 600; letter-spacing: -0.03em; line-height: 1.05; color: var(--accent); margin-top: 4px; }
.hero-title { font-size: 22px; font-weight: 600; letter-spacing: -0.02em; margin-top: 4px; }
.hero-sub { font-size: 14px; color: var(--on-dark-muted); margin-top: 4px; }
.hero-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 16px; position: relative; z-index: 1; }
.hero-stat { background: rgba(255, 255, 255, 0.07); border-radius: 16px; padding: 10px 12px; }
.hero-stat b { display: block; font-size: 22px; font-weight: 600; color: var(--on-dark); }
.hero-stat span { font-size: 12px; color: var(--on-dark-muted); font-weight: 600; }
.hero-stat.hot b { color: var(--accent); }
.hero .btn { position: relative; z-index: 1; margin-top: 16px; }

.progress { height: 8px; border-radius: 8px; background: rgba(255, 255, 255, 0.12); overflow: hidden; margin-top: 14px; }
.progress > i { display: block; height: 100%; background: var(--accent); border-radius: 8px; }
.card .progress { background: var(--surface-2); }
.card .progress > i { background: var(--st-green); }

/* ---------- Карточка проекта (с плашкой даты) ---------- */

.pcard { display: flex; gap: 14px; align-items: flex-start; }
.date-tile {
  width: 58px; flex-shrink: 0;
  border-radius: 16px;
  background: var(--surface-2);
  text-align: center;
  padding: 8px 4px 7px;
}
.date-tile .d { font-size: 22px; font-weight: 600; line-height: 1; letter-spacing: -0.02em; }
.date-tile .m { font-size: 12px; font-weight: 600; text-transform: uppercase; color: var(--muted); margin-top: 3px; letter-spacing: 0.04em; }
.date-tile .t { font-size: 12px; font-weight: 600; margin-top: 5px; color: var(--ink-2); }
.date-tile.today { background: var(--accent); color: var(--accent-ink); }
.date-tile.today .m, .date-tile.today .t { color: var(--accent-ink); }
.date-tile.soon { background: var(--dark); color: var(--on-dark); }
.date-tile.soon .m, .date-tile.soon .t { color: var(--on-dark-muted); }
.date-tile.none .d { font-size: 18px; color: var(--muted); }

.pcard-body { flex: 1; min-width: 0; }
.pcard-name { font-size: 17px; font-weight: 600; letter-spacing: -0.01em; line-height: 1.25; }
.pcard-meta { font-size: 14px; color: var(--muted); margin-top: 3px; font-weight: 600; }
.pcard-people { font-size: 13px; color: var(--ink-2); margin-top: 6px; display: flex; flex-wrap: wrap; gap: 4px 12px; font-weight: 600; }
.pcard-people span { display: inline-flex; align-items: center; gap: 5px; }
.pcard-people svg { width: 14px; height: 14px; color: var(--muted); }
.pcard-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }

.chip {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; font-weight: 600;
  padding: 5px 10px; border-radius: 999px;
  background: var(--st-gray-bg); color: var(--st-gray);
  margin-top: 8px;
}
.chip::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.chip.orange { background: var(--st-orange-bg); color: var(--st-orange); }
.chip.blue   { background: var(--st-blue-bg);   color: var(--st-blue); }
.chip.violet { background: var(--st-violet-bg); color: var(--st-violet); }
.chip.red    { background: var(--st-red-bg);    color: var(--st-red); }
.chip.green  { background: var(--st-green-bg);  color: var(--st-green); }
.chip.lime   { background: var(--st-lime-bg);   color: var(--st-lime); }

/* ---------- Кнопки ---------- */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; padding: 6px 20px; line-height: 1.2; text-align: center; max-width: 100%;
  border: none; border-radius: 16px;
  background: var(--dark); color: var(--on-dark);
  font-size: 15px; font-weight: 600;
  cursor: pointer; white-space: normal;
  transition: transform 0.12s ease, opacity 0.12s ease;
}
:root[data-theme="dark"] .btn { background: var(--accent); color: var(--accent-ink); }
.btn:active { transform: scale(0.97); }
.btn:disabled { opacity: 0.5; }
.btn.block { width: 100%; }
.btn.sm { min-height: 38px; padding: 5px 14px; font-size: 14px; border-radius: 12px; }
.btn.accent, :root[data-theme="dark"] .btn.accent { background: var(--accent); color: var(--accent-ink); }
.btn.ghost, :root[data-theme="dark"] .btn.ghost { background: var(--surface-2); color: var(--ink); }
.btn.danger, :root[data-theme="dark"] .btn.danger { background: var(--st-red-bg); color: var(--st-red); }
.btn svg { width: 18px; height: 18px; flex: none; }

.link-btn {
  background: none; border: none; padding: 6px 0;
  color: var(--st-blue); font-size: 14px; font-weight: 600; cursor: pointer;
}

/* ---------- Сегменты / фильтры ---------- */

.pills {
  display: flex; gap: 8px; overflow-x: auto;
  margin: 4px -16px 14px; padding: 2px 16px 6px;
  scrollbar-width: none;
}
.pills::-webkit-scrollbar { display: none; }
.pill {
  flex-shrink: 0;
  height: 40px; padding: 0 16px;
  border: none; border-radius: 999px;
  background: var(--surface); color: var(--ink-2);
  font-size: 14px; font-weight: 600; cursor: pointer;
  box-shadow: var(--shadow);
  display: inline-flex; align-items: center; gap: 6px;
}
.pill.active { background: var(--dark); color: var(--on-dark); }
:root[data-theme="dark"] .pill.active { background: var(--accent); color: var(--accent-ink); }
.pill .badge {
  min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px;
  background: var(--accent); color: var(--accent-ink);
  font-size: 12px; font-weight: 600; display: inline-grid; place-items: center;
}
:root[data-theme="dark"] .pill.active .badge { background: var(--dark); color: var(--accent); }

.segmented {
  display: grid; grid-template-columns: 1fr 1fr; gap: 4px;
  background: var(--surface-2); border-radius: 16px; padding: 4px;
}
.segmented button {
  height: 44px; border: none; border-radius: 12px;
  background: transparent; color: var(--muted);
  font-size: 14px; font-weight: 600; cursor: pointer;
}
.segmented button.active { background: var(--surface); color: var(--ink); box-shadow: var(--shadow); }
:root[data-theme="dark"] .segmented button.active { background: var(--dark); }

/* ---------- Поля ввода ---------- */

.field { margin-bottom: 16px; }
.field:last-child { margin-bottom: 0; }
.field > label, .label {
  display: block; font-size: 13px; font-weight: 600; color: var(--muted);
  margin: 0 0 7px 4px;
}
.field .hint { font-size: 13px; color: var(--muted); margin: 6px 4px 0; }

input[type="text"], input[type="number"], input[type="tel"], input[type="email"], input[type="search"], input[type="date"], select, textarea {
  width: 100%;
  height: 50px;
  padding: 0 16px;
  border: 2px solid transparent;
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  color: var(--ink);
  font-size: 16px; /* 16px — чтобы iOS не увеличивал страницу при вводе */
  font-weight: 600;
  outline: none;
  transition: border-color 0.15s ease, background 0.15s ease;
  -webkit-appearance: none;
  appearance: none;
}
select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%238c8c96' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center; padding-right: 40px;
}
textarea { height: auto; min-height: 110px; padding: 14px 16px; line-height: 1.5; resize: none; font-weight: 500; }
textarea.big-textarea { min-height: 200px; overflow-y: hidden; }
input::placeholder, textarea::placeholder { color: var(--muted); font-weight: 500; }
input:focus, select:focus, textarea:focus { border-color: var(--accent); background: var(--surface); }
input.invalid { border-color: var(--danger); }

/* ---------- Поле даты и времени ---------- */

.dt-row { display: grid; grid-template-columns: 1fr 104px 50px; gap: 8px; }
.dt-row input { text-align: center; letter-spacing: 0.04em; font-variant-numeric: tabular-nums; font-weight: 600; padding: 0 8px; }
.dt-cal { position: relative; width: 50px; height: 50px; }
.dt-cal .icon-btn { width: 50px; height: 50px; border-radius: var(--radius-sm); background: var(--surface-2); box-shadow: none; }
.dt-cal input[type="date"] { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; border: none; padding: 0; cursor: pointer; }
.quick { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
.quick button {
  height: 32px; padding: 0 12px; border-radius: 10px; border: none;
  background: var(--surface-2); color: var(--ink-2);
  font-size: 13px; font-weight: 600; cursor: pointer;
}
.quick button.on { background: var(--dark); color: var(--on-dark); }
:root[data-theme="dark"] .quick button.on { background: var(--accent); color: var(--accent-ink); }
.dt-preview { font-size: 13px; font-weight: 600; margin: 8px 4px 0; color: var(--st-green); min-height: 18px; }
.dt-preview.err { color: var(--danger); }
.dt-preview.muted { color: var(--muted); }

/* ---------- Выбор сотрудника ---------- */

.picker { display: flex; flex-direction: column; gap: 8px; }
.pick {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 14px; border-radius: 16px;
  background: var(--surface-2); border: 2px solid transparent;
  cursor: pointer; font-weight: 600; font-size: 15px; text-align: left;
  color: var(--ink); width: 100%;
}
.pick .ava {
  width: 36px; height: 36px; border-radius: 50%;
  background: var(--surface); display: grid; place-items: center;
  font-weight: 600; color: var(--ink-2); flex-shrink: 0;
}
.pick.on { border-color: var(--ink); background: var(--surface); }
:root[data-theme="dark"] .pick.on { border-color: var(--accent); }
.pick.on .ava { background: var(--accent); color: var(--accent-ink); }
.pick .check { margin-left: auto; opacity: 0; width: 20px; height: 20px; }
.pick.on .check { opacity: 1; }

/* ---------- Длинные тексты, файлы ---------- */

.long-text {
  white-space: pre-wrap; word-break: break-word;
  font-size: 15px; line-height: 1.5; margin-top: 8px; color: var(--ink-2);
}
.long-text.clamped {
  max-height: 9.4em; overflow: hidden;
  -webkit-mask-image: linear-gradient(to bottom, #000 55%, transparent);
  mask-image: linear-gradient(to bottom, #000 55%, transparent);
}
.revision-box { background: var(--st-red-bg); border-radius: 16px; padding: 12px 14px; margin-top: 12px; }
.revision-box .rb-title { font-size: 12px; font-weight: 600; color: var(--st-red); text-transform: uppercase; letter-spacing: 0.05em; }
.revision-box .long-text { color: var(--ink); }
.revision-box .att-chip { background: var(--surface); }

.att-list { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.att-chip {
  display: inline-flex; align-items: center; gap: 6px; max-width: 100%;
  border: none; background: var(--surface-2); color: var(--ink);
  border-radius: 12px; padding: 8px 12px;
  font-size: 13px; font-weight: 600; cursor: pointer;
}
.att-chip svg { width: 15px; height: 15px; flex-shrink: 0; }
.att-chip .nm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.att-chip:disabled { opacity: 0.5; }
.att-size { color: var(--muted); font-size: 12px; font-weight: 600; flex-shrink: 0; }

.file-btn { position: relative; overflow: hidden; }
.file-btn input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.file-list { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; }
.file-list:empty { display: none; }
.file-item {
  display: flex; align-items: center; gap: 10px;
  background: var(--surface-2); border-radius: 12px; padding: 8px 8px 8px 12px;
  font-size: 14px; font-weight: 600;
}
.file-item .nm { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.file-item button { border: none; background: var(--surface); color: var(--muted); width: 30px; height: 30px; border-radius: 50%; cursor: pointer; font-size: 16px; line-height: 1; }

/* ---------- Переписка ---------- */

.msg-list { display: flex; flex-direction: column; gap: 6px; margin-bottom: 10px; }
.msg { max-width: 82%; padding: 10px 14px; border-radius: 18px; font-size: 15px; white-space: pre-wrap; word-break: break-word; }
.msg-in { align-self: flex-start; background: var(--surface); border-bottom-left-radius: 6px; box-shadow: var(--shadow); }
.msg-out { align-self: flex-end; background: var(--dark); color: var(--on-dark); border-bottom-right-radius: 6px; }
.msg-time { font-size: 12px; opacity: 0.55; margin-top: 3px; }

.tag { display: inline-flex; align-items: center; background: var(--surface-2); border-radius: 999px; padding: 6px 12px; font-size: 13px; font-weight: 600; margin: 0 6px 6px 0; }
.hero .tag { background: rgba(255, 255, 255, 0.1); color: var(--on-dark); }

/* ---------- История (таймлайн) ---------- */

.timeline { position: relative; padding-left: 24px; margin-top: 4px; }
.timeline::before { content: ""; position: absolute; left: 6px; top: 8px; bottom: 8px; width: 2px; background: var(--line); border-radius: 2px; }
.tl-item { position: relative; padding: 0 0 20px; }
.tl-item::before {
  content: ""; position: absolute; left: -24px; top: 3px;
  width: 14px; height: 14px; border-radius: 50%;
  background: var(--bg); border: 3px solid var(--ink);
}
.tl-item:last-child { padding-bottom: 0; }
.tl-item:last-child::before { background: var(--accent); border-color: var(--accent); }
.tl-title { font-weight: 600; font-size: 15px; }
.tl-meta { font-size: 13px; color: var(--muted); margin-top: 2px; font-weight: 600; }
.tl-item .long-text { margin-top: 6px; }

/* ---------- Пустые состояния, загрузка ---------- */

.empty { text-align: center; padding: 36px 20px; color: var(--muted); font-size: 15px; font-weight: 600; }
.empty .em-ico {
  width: 64px; height: 64px; border-radius: 50%;
  background: var(--surface); box-shadow: var(--shadow);
  display: grid; place-items: center; margin: 0 auto 14px; color: var(--ink);
}
.empty .em-ico svg { width: 28px; height: 28px; }

.skeleton {
  height: 92px; border-radius: var(--radius); margin-bottom: 10px;
  background: linear-gradient(90deg, var(--surface) 0%, var(--surface-2) 50%, var(--surface) 100%);
  background-size: 200% 100%;
  animation: shimmer 1.2s infinite linear;
}
@keyframes shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }

/* ---------- Нижнее меню (плавающее) ---------- */

#tabbar {
  position: fixed; z-index: 20;
  left: 16px; right: 16px;
  bottom: calc(14px + env(safe-area-inset-bottom));
  height: 66px;
  background: var(--dark);
  border-radius: 26px;
  display: flex; align-items: center; justify-content: space-around;
  padding: 0 8px;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.22);
}
:root[data-theme="dark"] #tabbar { background: #1c1c22; border: 1px solid var(--line); }
#tabbar:empty, #tabbar.hidden { display: none; }
.tab-btn {
  height: 50px; min-width: 50px; padding: 0 16px;
  border: none; border-radius: 18px;
  background: transparent; color: var(--on-dark-muted);
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-size: 14px; font-weight: 600; cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease;
}
.tab-btn svg { width: 22px; height: 22px; }
.tab-btn .tab-label { display: none; }
.tab-btn.active { background: var(--accent); color: var(--accent-ink); }
.tab-btn.active .tab-label { display: inline; }

/* ---------- Плавающая кнопка «+» ---------- */

.fab {
  position: fixed; z-index: 19;
  right: 20px; bottom: calc(96px + env(safe-area-inset-bottom));
  width: 58px; height: 58px; border-radius: 20px;
  border: none; background: var(--accent); color: var(--accent-ink);
  display: grid; place-items: center; cursor: pointer;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.18);
}
.fab svg { width: 26px; height: 26px; }

/* ---------- Уведомление ---------- */

#toast {
  position: fixed; left: 50%; z-index: 100;
  bottom: calc(96px + env(safe-area-inset-bottom));
  transform: translateX(-50%) translateY(16px);
  background: var(--ink); color: var(--bg);
  padding: 12px 18px; border-radius: 16px;
  font-size: 14px; font-weight: 600;
  opacity: 0; pointer-events: none;
  transition: all 0.25s ease;
  max-width: calc(100vw - 40px); text-align: center;
}
#toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

.kv { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 8px 14px; font-size: 14px; margin: 0; }
.kv dt { color: var(--muted); font-weight: 600; }
.kv dd { margin: 0; font-weight: 600; text-align: right; }

.link-box { word-break: break-all; font-size: 14px; font-weight: 600; color: var(--st-blue); text-decoration: none; display: inline-flex; gap: 6px; align-items: center; margin-top: 8px; }
.link-box svg { width: 15px; height: 15px; flex-shrink: 0; }

.divider { height: 1px; background: var(--line); margin: 14px 0; }

/* =========================================================================
   Свайпы, доска, календарь, графики, анимации
   ========================================================================= */

/* ---------- Анимации переходов между экранами ---------- */
@keyframes in-right { from { transform: translateX(32%); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes in-left  { from { transform: translateX(-32%); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes in-fade  { from { transform: translateY(8px); opacity: 0; } to { transform: none; opacity: 1; } }
.anim-right { animation: in-right 0.28s cubic-bezier(0.2, 0.8, 0.2, 1); }
.anim-left  { animation: in-left 0.28s cubic-bezier(0.2, 0.8, 0.2, 1); }
.anim-fade  { animation: in-fade 0.22s ease-out; }
#view { overflow-x: hidden; }

/* ---------- Свайп влево (архив / удалить) ---------- */
.swipe { position: relative; margin-bottom: 10px; border-radius: var(--radius); }
.swipe.clip { overflow: hidden; }
.swipe:not(.clip) > .swipe-bg { visibility: hidden; }
.swipe > .card { margin-bottom: 0; position: relative; z-index: 1; touch-action: pan-y; will-change: transform; }
.swipe.moving > .card { transition: none; }
.swipe > .card { transition: transform 0.25s cubic-bezier(0.2, 0.8, 0.2, 1); }
.swipe-bg {
  position: absolute; inset: 0; border-radius: var(--radius);
  display: flex; justify-content: flex-end; align-items: stretch;
  overflow: hidden;
}
.swipe-bg button {
  border: none; width: 104px; color: #fff; font-weight: 600; font-size: 13px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  cursor: pointer;
}
.swipe-bg button svg { width: 22px; height: 22px; }
.swipe-bg .act-archive { background: #8a8a94; }
.swipe-bg .act-delete  { background: var(--danger); }
.swipe-bg .act-restore { background: var(--st-green); }
.swipe-hint { font-size: 13px; color: var(--muted); font-weight: 600; margin: -4px 4px 12px; }

/* ---------- Доска (как в Trello) ---------- */
.board {
  display: flex; gap: 12px; overflow-x: auto;
  scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
  margin: 0 -16px; padding: 2px 16px 12px;
  scrollbar-width: none;
}
.board::-webkit-scrollbar { display: none; }
.col {
  flex: 0 0 86%; scroll-snap-align: center; overflow: hidden;
  background: var(--surface-2); border-radius: 24px; padding: 12px;
  min-height: 55vh;
}
:root[data-theme="dark"] .col { background: #131317; }
.col-head { display: flex; align-items: center; justify-content: space-between; margin: 2px 4px 12px; }
.col-head h3 { margin: 0; font-size: 17px; font-weight: 600; letter-spacing: -0.01em; }
.col-head .n { min-width: 26px; height: 26px; border-radius: 13px; background: var(--dark); color: var(--on-dark); font-size: 13px; font-weight: 600; display: inline-grid; place-items: center; padding: 0 8px; }
:root[data-theme="dark"] .col-head .n { background: var(--accent); color: var(--accent-ink); }
.col .empty { padding: 24px 10px; font-size: 14px; }
.board-dots { display: flex; justify-content: center; gap: 6px; margin-top: 2px; }
.board-dots i { width: 6px; height: 6px; border-radius: 3px; background: var(--line); transition: all 0.2s ease; }
.board-dots i.on { width: 18px; background: var(--ink); }

.drag-handle {
  width: 32px; height: 32px; margin: -4px -6px 0 0; border-radius: 10px;
  display: grid; place-items: center; color: var(--muted);
  touch-action: none; cursor: grab; flex-shrink: 0; border: none; background: transparent;
}
.drag-handle svg { width: 18px; height: 18px; }
.swipe.dragging { z-index: 30; }
.swipe.dragging > .card { box-shadow: 0 18px 40px rgba(0, 0, 0, 0.22); transform: scale(1.02); transition: none; }

/* ---------- Дедлайн ---------- */
.dl { display: inline-flex; align-items: center; gap: 5px; font-size: 13px; font-weight: 600; padding: 4px 9px; border-radius: 999px; margin: 8px 0 0 6px; background: var(--surface-2); color: var(--ink-2); }
.dl svg { width: 13px; height: 13px; }
.dl.hot { background: var(--st-red-bg); color: var(--st-red); }
.dl.over { background: var(--danger); color: #fff; }
.rounds { display: inline-flex; align-items: center; font-size: 12px; font-weight: 600; padding: 4px 9px; border-radius: 999px; margin: 8px 0 0 6px; background: var(--st-orange-bg); color: var(--st-orange); }

/* ---------- Нижняя шторка выбора ---------- */
.sheet-back { position: fixed; inset: 0; z-index: 60; background: rgba(0, 0, 0, 0.35); opacity: 0; transition: opacity 0.2s ease; }
.sheet-back.show { opacity: 1; }
.sheet {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 61;
  background: var(--surface); border-radius: 26px 26px 0 0;
  padding: 10px 16px calc(20px + env(safe-area-inset-bottom));
  transform: translateY(100%); transition: transform 0.28s cubic-bezier(0.2, 0.8, 0.2, 1);
  max-height: 82vh; overflow-y: auto;
}
.sheet.show { transform: none; }
.sheet .grip { width: 40px; height: 5px; border-radius: 3px; background: var(--line); margin: 0 auto 12px; }
.sheet h3 { margin: 0 4px 12px; font-size: 19px; font-weight: 600; }
.sheet-list { display: flex; flex-direction: column; gap: 6px; }
.sheet-item {
  display: flex; align-items: center; gap: 12px; width: 100%;
  border: none; background: var(--surface-2); color: var(--ink);
  border-radius: 14px; padding: 13px 14px; font-size: 15px; font-weight: 600; text-align: left; cursor: pointer;
}
.sheet-item svg { width: 22px; height: 22px; flex: none; }
.sheet-item.on { background: var(--dark); color: var(--on-dark); }
:root[data-theme="dark"] .sheet-item.on { background: var(--accent); color: var(--accent-ink); }

/* ---------- Календарь ---------- */
.cal-card { padding: 14px 12px 12px; }
.cal-nav { display: flex; align-items: center; justify-content: space-between; margin: 0 4px 12px; }
.cal-nav h2 { margin: 0; font-size: 20px; font-weight: 600; letter-spacing: -0.02em; }
.cal-nav .icon-btn { width: 38px; height: 38px; background: var(--surface-2); box-shadow: none; }
.cal-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; touch-action: pan-y; }
.cal-wd { text-align: center; font-size: 12px; font-weight: 600; color: var(--muted); text-transform: uppercase; padding-bottom: 4px; }
.cal-day {
  aspect-ratio: 1 / 1.08; border: none; background: transparent; color: var(--ink);
  border-radius: 14px; font-size: 15px; font-weight: 600; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; padding: 0;
  font-variant-numeric: tabular-nums;
}
.cal-day.out { color: var(--muted); opacity: 0.45; }
.cal-day.today { background: var(--accent); color: var(--accent-ink); }
.cal-day.sel { background: var(--dark); color: var(--on-dark); }
:root[data-theme="dark"] .cal-day.sel { background: var(--ink); color: var(--bg); }
.cal-marks { display: flex; gap: 3px; height: 6px; align-items: center; }
.cal-marks i { width: 6px; height: 6px; border-radius: 3px; background: var(--ink); }
.cal-marks i.c-dl { background: var(--danger); }
.cal-marks b { font-size: 12px; font-weight: 600; line-height: 6px; }
.cal-day.sel .cal-marks i:not(.c-dl) { background: var(--accent); }
.cal-day.today .cal-marks i:not(.c-dl) { background: var(--accent-ink); }
.cal-legend { display: flex; gap: 14px; margin: 12px 6px 0; font-size: 13px; color: var(--muted); font-weight: 600; }
.cal-legend span { display: inline-flex; align-items: center; gap: 6px; }
.cal-legend i { width: 8px; height: 8px; border-radius: 4px; background: var(--ink); display: inline-block; }
.cal-legend i.c-dl { background: var(--danger); }

/* ---------- Плитки цифр ---------- */
.tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 10px; }
.tile { background: var(--surface); border-radius: 20px; padding: 14px; box-shadow: var(--shadow); }
.tile .t-label { font-size: 13px; color: var(--muted); font-weight: 600; }
.tile .t-value { font-size: 26px; font-weight: 600; letter-spacing: -0.02em; margin-top: 4px; font-variant-numeric: proportional-nums; }
.tile .t-sub { font-size: 12px; color: var(--muted); font-weight: 600; margin-top: 2px; }

/* ---------- Столбчатый график (одна серия) ---------- */
.chart { position: relative; padding-top: 22px; }
.chart-cols { display: grid; align-items: end; height: 150px; border-bottom: 1px solid var(--line); gap: 2px; }
.chart-col { position: relative; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; cursor: pointer; border: none; background: transparent; padding: 0; }
.chart-col i { display: block; width: 100%; max-width: 24px; border-radius: 4px 4px 0 0; background: var(--ink-2); min-height: 2px; transition: height 0.4s ease; }
.chart-col.sel i { background: var(--ink); }
:root[data-theme="dark"] .chart-col i { background: #5a5a63; }
:root[data-theme="dark"] .chart-col.sel i { background: var(--accent); }
.chart-col .cap { font-size: 12px; font-weight: 600; color: var(--ink); white-space: nowrap; margin-bottom: 4px; line-height: 1; }
.chart-col .cap[hidden] { display: none; }
.chart-x { display: grid; gap: 2px; margin-top: 6px; }
.chart-x span { text-align: center; font-size: 12px; font-weight: 600; color: var(--muted); }
.chart-x span.sel { color: var(--ink); }

/* ---------- Воронка ---------- */
.funnel-row { margin-bottom: 12px; }
.funnel-row:last-child { margin-bottom: 0; }
.funnel-top { display: flex; justify-content: space-between; font-size: 14px; font-weight: 600; margin-bottom: 6px; }
.funnel-top b { font-weight: 600; }
.funnel-top .pct { color: var(--muted); font-weight: 600; margin-left: 6px; }
.funnel-bar { height: 12px; border-radius: 6px; background: var(--surface-2); overflow: hidden; }
.funnel-bar i { display: block; height: 100%; border-radius: 6px; background: var(--ink); min-width: 4px; }
:root[data-theme="dark"] .funnel-bar i { background: var(--accent); }
.src-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.src-table th { text-align: right; font-size: 12px; color: var(--muted); font-weight: 600; padding: 0 0 8px; }
.src-table th:first-child, .src-table td:first-child { text-align: left; }
.src-table td { text-align: right; padding: 9px 0; border-top: 1px solid var(--line); font-weight: 600; font-variant-numeric: tabular-nums; }

.month-switch { display: flex; align-items: center; gap: 8px; margin-bottom: 14px; }
.month-switch .icon-btn { width: 40px; height: 40px; }
.month-switch .m { flex: 1; text-align: center; font-weight: 600; font-size: 16px; }

.contact-rows { display: flex; flex-direction: column; gap: 2px; }
.contact-row { display: flex; align-items: center; gap: 12px; padding: 10px 4px; font-weight: 600; font-size: 15px; color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--line); }
.contact-row:last-child { border-bottom: none; }
.contact-row svg { width: 18px; height: 18px; color: var(--muted); flex-shrink: 0; }
.contact-row .k { color: var(--muted); font-size: 13px; font-weight: 600; margin-left: auto; }
button.contact-row { width: 100%; background: none; border-top: 0; border-left: 0; border-right: 0; font-family: inherit; text-align: left; cursor: pointer; }

#toast.action.show { pointer-events: auto; cursor: pointer; }
#toast u { color: var(--accent); text-decoration: none; margin-left: 10px; font-weight: 600; }
:root[data-theme="dark"] #toast u { color: #3d5a00; }

/* много вкладок — компактнее */
#tabbar.many .tab-btn { padding: 0 10px; min-width: 44px; }
#tabbar.many .tab-btn.active .tab-label { font-size: 13px; }

/* ---------- Меню, ярлык «Домой», «потяни вниз — обновить» ---------- */
button.avatar { border: none; cursor: pointer; font-family: inherit; }
.home-chip { display: flex; align-items: center; gap: 6px; margin-top: 12px; }
.home-chip button {
  border: none; cursor: pointer; font-family: inherit; font-weight: 600; font-size: 14px;
  height: 36px; border-radius: 12px; padding: 0 14px;
  background: var(--accent); color: var(--accent-ink);
}
.home-chip button#home-x { width: 36px; padding: 0; background: var(--surface); color: var(--muted); font-size: 18px; box-shadow: var(--shadow); }

#ptr {
  position: fixed; top: 6px; left: 50%; z-index: 40;
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--surface); color: var(--ink); box-shadow: var(--shadow);
  display: grid; place-items: center;
  transform: translate(-50%, -60px); opacity: 0; transition: opacity 0.15s ease;
  pointer-events: none;
}
#ptr svg { width: 20px; height: 20px; }
#ptr.show { opacity: 1; }
#ptr.ready { background: var(--accent); color: var(--accent-ink); }
#ptr.spin { animation: ptr-spin 0.7s linear infinite; transform: translate(-50%, 40px); }
@keyframes ptr-spin { from { transform: translate(-50%, 40px) rotate(0); } to { transform: translate(-50%, 40px) rotate(360deg); } }

/* --- Несколько сотрудников в проекте --- */
.picker.multi .pick .pick-name { min-width: 0; }
.main-tag {
  display: none; margin-left: auto; font-size: 12px; font-weight: 600; letter-spacing: .02em;
  padding: 3px 8px; border-radius: 999px; background: var(--accent); color: var(--accent-ink);
}
.picker.many .pick.main .main-tag { display: inline-block; }
.picker.many .pick.main .check { margin-left: 8px; }
.main-tag.on { display: inline-block; margin-left: 6px; vertical-align: 1px; }
.dt-preview { white-space: pre-line; }

/* --- Где лежит материал --- */
.mat-line {
  display: flex; align-items: flex-start; gap: 7px; margin-top: 10px;
  font-size: 13px; font-weight: 600; color: var(--ink-2);
  background: var(--surface-2); border-radius: 12px; padding: 8px 10px; word-break: break-word;
}
.mat-line svg { width: 16px; height: 16px; flex-shrink: 0; margin-top: 1px; }
.mat-card .label { display: flex; align-items: center; gap: 6px; }
.mat-card .label svg { width: 16px; height: 16px; }
.mat-card.need { border: 2px dashed var(--danger); }
.kv dd.wrap { word-break: break-word; }

/* --- Команда проекта --- */
.team-group + .team-group { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line, rgba(0,0,0,.06)); }
.team-title { display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: var(--muted); margin: 0 0 8px 2px; }
.team-title svg { width: 16px; height: 16px; }
.team-row { display: flex; align-items: center; gap: 10px; padding: 6px 2px; font-weight: 600; }
.team-row .ava, .sheet-item .ava.sm {
  width: 32px; height: 32px; border-radius: 50%;
  display: inline-grid; place-items: center; font-weight: 600; font-size: 12px; flex-shrink: 0;
}
.team-row .icon-btn { width: 32px; height: 32px; box-shadow: none; background: var(--surface-2); }
.team-row .icon-btn svg { width: 16px; height: 16px; }
.picker.no-main .main-tag { display: none !important; }

/* --- Категории клиентов --- */
.cat-chips { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 8px; }
.cat { font-size: 12px; font-weight: 600; padding: 3px 9px; border-radius: 999px; background: var(--surface-2); color: var(--ink-2); }
.cat.green { background: var(--st-green-bg); color: var(--st-green); }
.cat.lime { background: var(--st-lime-bg); color: var(--st-lime); }
.cat.blue { background: var(--st-blue-bg); color: var(--st-blue); }
.cat.orange { background: var(--st-orange-bg); color: var(--st-orange); }
.cat.red { background: var(--st-red-bg); color: var(--st-red); }
.cat-chips.on-dark { margin: 8px 0 4px; }
.cat-chips.on-dark .cat { background: rgba(255,255,255,.12); color: #fff; }
.cat-filter { margin-bottom: 10px; }

/* Последняя забронированная съёмка — справа в карточке клиента */
.c-last {
  flex-shrink: 0; align-self: center; text-align: center; min-width: 58px;
  padding: 6px 8px; border-radius: 14px; background: var(--surface-2);
}
.c-last span { display: block; font-size: 12px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .03em; }
.c-last b { display: block; font-size: 17px; font-weight: 600; line-height: 1.2; }
.c-last i { display: block; font-style: normal; font-size: 12px; font-weight: 600; color: var(--muted); }

/* Три варианта в переключателе */
.segmented.three button { font-size: 13px; padding-left: 4px; padding-right: 4px; }

/* --- Отчёт по сотрудникам --- */
.rep-person { padding: 0; overflow: hidden; }
.rep-person summary { list-style: none; display: flex; align-items: center; gap: 12px; padding: 14px 16px; cursor: pointer; }
.rep-person summary::-webkit-details-marker { display: none; }
.rep-person summary .grow b { display: block; font-size: 15px; }
.rep-person .ava, .ava.lg {
  width: 38px; height: 38px; border-radius: 50%;
  display: inline-grid; place-items: center; font-weight: 600; flex-shrink: 0;
}
.ava.lg { width: 44px; height: 44px; font-size: 15px; }
.rep-main { font-size: 17px; font-weight: 600; white-space: nowrap; }
.rep-person[open] summary { border-bottom: 1px solid var(--line, rgba(0,0,0,.06)); }
.rep-items { padding: 6px 16px 12px; }
.rep-item { padding: 9px 0; border-bottom: 1px solid var(--line, rgba(0,0,0,.05)); cursor: pointer; font-size: 14px; }
.rep-item:last-child { border-bottom: none; }
.bad { color: var(--danger); font-weight: 600; }
.pick[disabled] { opacity: .6; cursor: default; }
.segmented.three { grid-template-columns: 1fr 1fr 1fr; }

/* ===== Пошаговое создание проекта ===== */
.wiz-head { margin: 0 2px 14px; }
.wiz-bars { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.wiz-bars i { height: 5px; border-radius: 3px; background: var(--line); transition: background .2s; }
.wiz-bars i.on { background: var(--accent); }
.wiz-title { font-size: 13px; font-weight: 600; color: var(--muted); margin-top: 8px; }
.wiz-nav { display: flex; gap: 10px; margin-top: 6px; }
.wiz-nav .btn.grow { flex: 1; }
.wiz-nav .btn.ghost { padding: 0 16px; }
.more-links { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 10px; }
.more-links .link-btn { display: inline-flex; align-items: center; gap: 4px; }
.more-links .link-btn svg { width: 15px; height: 15px; }
.calc-btn { width: 50px; height: 50px; border-radius: 14px; box-shadow: none; background: var(--surface-2); }
.sum-row { display: flex; align-items: baseline; gap: 10px; padding: 10px 2px; border-bottom: 1px solid var(--line); }
.sum-row:last-child { border-bottom: none; }
.sum-row .k { color: var(--muted); font-weight: 600; font-size: 14px; min-width: 88px; }
.sum-row .v { flex: 1; font-weight: 600; word-break: break-word; }
.sum-row .link-btn { font-size: 13px; }
.btn.ghost-dark { background: rgba(255,255,255,.1); color: #fff; }
.nowrap { white-space: nowrap; }
.ellipsis { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ===== Вкладки: много вкладок и счётчик ===== */
#tabbar.lots .tab-btn.active .tab-label { display: none; }
#tabbar.lots .tab-btn { padding: 0 8px; min-width: 42px; }
.tab-btn { position: relative; }
.tab-badge {
  position: absolute; top: 4px; right: 2px; min-width: 18px; height: 18px; padding: 0 5px;
  border-radius: 9px; background: var(--ink-2, #555); color: #fff; font-size: 12px; font-weight: 600; font-style: normal;
  display: grid; place-items: center; line-height: 1;
}
.tab-badge.hot { background: var(--danger); }

/* ===== Список чатов ===== */
.chat-item { display: flex; align-items: center; gap: 12px; }
.chat-item .grow b { display: block; font-size: 16px; }
.chat-item > svg { width: 18px; height: 18px; color: var(--muted); flex-shrink: 0; }
.chat-ava {
  width: 46px; height: 46px; border-radius: 50%; flex-shrink: 0; display: grid; place-items: center;
  background: var(--surface-2); font-weight: 600; font-size: 18px; color: var(--ink-2);
}
.chat-ava.ai { background: var(--dark); color: var(--accent); }
.chat-ava.ai svg { width: 24px; height: 24px; }
.chat-ava.big { width: 64px; height: 64px; }
.chat-ava.big svg { width: 32px; height: 32px; }
.chat-item.ai { background: var(--dark); color: var(--on-dark); }
.chat-item.ai .muted { color: rgba(255,255,255,.65); }
.chat-item.ai .chat-ava.ai { background: rgba(255,255,255,.1); }
.chat-side { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; flex-shrink: 0; }
.badge { min-width: 22px; height: 22px; padding: 0 7px; border-radius: 11px; background: var(--dark); color: var(--on-dark); font-size: 12px; font-weight: 600; font-style: normal; display: grid; place-items: center; }
.badge.hot { background: var(--danger); color: #fff; }

/* ===== Переписка ===== */
.chat-members { text-align: center; margin: 0 0 10px; }
.msgs { display: flex; flex-direction: column; gap: 6px; padding-bottom: 150px; }
.day-sep { text-align: center; margin: 10px 0 4px; }
.day-sep span { font-size: 12px; font-weight: 600; color: var(--muted); background: var(--surface-2); padding: 4px 10px; border-radius: 10px; }
.msg { max-width: 84%; align-self: flex-start; background: var(--surface); border-radius: 18px 18px 18px 6px; padding: 8px 12px 6px; box-shadow: var(--shadow); }
.msg.mine { align-self: flex-end; background: var(--accent); color: var(--accent-ink); border-radius: 18px 18px 6px 18px; }
.msg.tagged { box-shadow: 0 0 0 2px var(--danger) inset, var(--shadow); }
.msg-author { font-size: 13px; font-weight: 600; color: var(--muted); margin-bottom: 2px; }
.msg-text { font-size: 15px; line-height: 1.4; word-break: break-word; white-space: normal; }
.msg-text .mention { font-weight: 600; color: var(--st-blue); }
.msg.mine .msg-text .mention { color: inherit; text-decoration: underline; }
.msg-time { font-size: 12px; opacity: .6; text-align: right; margin-top: 2px; }
.msg-project { display: flex; align-items: center; gap: 6px; margin-top: 6px; padding: 6px 8px; border-radius: 10px; background: rgba(0,0,0,.06); font-size: 13px; font-weight: 600; cursor: pointer; }
.msg-project svg { width: 15px; height: 15px; flex-shrink: 0; }
.msg.ai { max-width: 94%; }
.msg-text.md p { margin: 0 0 6px; }
.msg-text.md ul, .msg-text.md ol { margin: 0 0 6px; padding-left: 20px; }
.msg-text.md li { margin: 2px 0; }
.msg-text.md code { background: var(--surface-2); padding: 1px 5px; border-radius: 5px; font-size: 13px; }
.typing { display: flex; gap: 5px; padding: 6px 2px; }
.typing i { width: 7px; height: 7px; border-radius: 50%; background: var(--muted); animation: blink 1.2s infinite; }
.typing i:nth-child(2) { animation-delay: .2s; }
.typing i:nth-child(3) { animation-delay: .4s; }
@keyframes blink { 0%, 80%, 100% { opacity: .25; } 40% { opacity: 1; } }
.ai-hello { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px; padding: 30px 20px; }
.ai-hello b { font-size: 18px; }
.steps { margin: 0; padding-left: 20px; line-height: 1.5; }
.steps li { margin-bottom: 8px; }
.steps code, .card code { background: var(--surface-2); padding: 1px 6px; border-radius: 6px; font-size: 13px; }

.composer {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
  padding: 8px 12px calc(10px + env(safe-area-inset-bottom));
  background: var(--bg, var(--surface-2)); border-top: 1px solid var(--line);
}
.composer-row { display: flex; align-items: flex-end; gap: 8px; }
.composer textarea {
  flex: 1; min-height: 44px; max-height: 140px; resize: none; padding: 11px 14px; border-radius: 22px; line-height: 1.35;
}
.composer .icon-btn { width: 44px; height: 44px; box-shadow: none; }
.composer .send-btn { background: var(--accent); color: var(--accent-ink); }
.composer .at-btn { background: var(--surface); }
.ai-sugg { margin: 0 0 8px; flex-wrap: wrap; }
.quick.ai-sugg button { white-space: normal; text-align: left; height: auto; min-height: 36px; padding: 8px 12px; line-height: 1.25; }
.mention-pop {
  position: absolute; left: 12px; right: 12px; bottom: calc(100% + 4px); max-height: 240px; overflow-y: auto;
  background: var(--surface); border-radius: 16px; box-shadow: 0 8px 30px rgba(0,0,0,.18); padding: 6px;
}
.mention-pop button { display: flex; align-items: center; gap: 10px; width: 100%; border: none; background: none; padding: 8px 10px; border-radius: 10px; font-weight: 600; font-size: 15px; color: var(--ink); text-align: left; }
.mention-pop button:active { background: var(--surface-2); }
.mention-pop .ava { width: 30px; height: 30px; border-radius: 50%; background: var(--surface-2); display: grid; place-items: center; font-size: 12px; font-weight: 600; }
.attach-chip { display: flex; align-items: center; gap: 8px; margin: 0 0 8px; padding: 8px 12px; border-radius: 14px; background: var(--surface); font-size: 14px; font-weight: 600; }
.attach-chip svg { width: 16px; height: 16px; flex-shrink: 0; }

/* ===== Калькулятор ===== */
.calc-pk .pick { align-items: flex-start; }
.calc-pk .pick b { margin-left: auto; padding-left: 8px; }
.calc-addons { display: flex; flex-direction: column; gap: 8px; }
.calc-add { display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px 14px; border-radius: 16px; background: var(--surface-2); border: 2px solid transparent; font-weight: 600; font-size: 15px; color: var(--ink); text-align: left; }
.calc-add .grow span { display: block; font-weight: 600; }
.calc-add.toggle.on { border-color: var(--ink); background: var(--surface); }
:root[data-theme="dark"] .calc-add.toggle.on { border-color: var(--accent); }
.calc-add .switch { width: 42px; height: 26px; border-radius: 13px; background: var(--line); position: relative; flex-shrink: 0; transition: background .2s; }
.calc-add .switch::after { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; transition: transform .2s; box-shadow: 0 1px 3px rgba(0,0,0,.2); }
.calc-add.on .switch { background: var(--accent); }
.calc-add.on .switch::after { transform: translateX(16px); }
.stepper { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.stepper button { width: 34px; height: 34px; border-radius: 50%; border: none; background: var(--surface); font-size: 20px; font-weight: 600; color: var(--ink); }
.stepper b { min-width: 18px; text-align: center; }
input[type="range"] { width: 100%; accent-color: var(--accent); margin: 6px 0 0; }
.calc-total { margin-top: 16px; padding: 14px 16px; border-radius: 18px; background: var(--dark); color: var(--on-dark); display: flex; flex-direction: column; gap: 6px; font-size: 14px; }
.calc-total .muted { color: rgba(255,255,255,.6); }
.calc-sum { margin-top: 6px; padding-top: 10px; border-top: 1px solid rgba(255,255,255,.15); font-size: 16px; }
.calc-sum b { font-size: 24px; color: var(--accent); }
.sheet.tall { max-height: 92vh; display: flex; flex-direction: column; }
.sheet-scroll { overflow-y: auto; flex: 1; margin: 0 -4px; padding: 0 4px; }

/* ===== Скрипт продаж ===== */
.script-sec summary { list-style: none; cursor: pointer; font-size: 16px; }
.script-sec summary::-webkit-details-marker { display: none; }
.script-sec[open] summary { margin-bottom: 10px; }
.phrase { padding: 10px 12px; border-radius: 14px; background: var(--surface-2); margin-bottom: 8px; }
.objection { font-size: 13px; font-weight: 600; color: var(--st-red); margin-bottom: 4px; }
.ph-text { font-size: 15px; line-height: 1.4; cursor: pointer; }
.ph-var { background: var(--st-lime-bg); color: var(--ink); border-radius: 5px; padding: 0 3px; font-weight: 600; }
.ph-actions { display: flex; gap: 16px; margin-top: 6px; }
.ph-actions .link-btn { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; }
.ph-actions svg { width: 14px; height: 14px; }
.script-tip { font-size: 14px; color: var(--muted); font-weight: 600; margin: 4px 2px 10px; }

/* ===== Данные студии ===== */
.price-row input, .price-row select { width: 100%; }
label.mini { display: flex; flex-direction: column; gap: 4px; font-size: 12px; font-weight: 600; color: var(--muted); }
label.mini input, label.mini select { font-size: 15px; color: var(--ink); }
.icon-btn.sm-x { width: 40px; height: 40px; box-shadow: none; background: var(--surface-2); }
.icon-btn.sm-x svg { width: 16px; height: 16px; }
select { height: 50px; border-radius: 14px; border: none; background: var(--surface-2); padding: 0 12px; font: inherit; font-weight: 600; }
/* Исправления: пузыри нового чата не наследуют pre-wrap старой переписки; hidden всегда скрывает */
.msgs .msg { white-space: normal; font-size: inherit; }
[hidden] { display: none !important; }

/* Архив по годам и месяцам */
.arch-years { margin-bottom: 10px; }
.arch-year { font-size: 22px; font-weight: 600; margin: 18px 2px 4px; letter-spacing: -.01em; }
.arch-year:first-child { margin-top: 4px; }
.arch-month { font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-2); margin: 12px 2px 6px; display: flex; gap: 6px; align-items: center; }
.arch-month span { background: var(--line, rgba(0,0,0,.08)); color: var(--ink-2); border-radius: 10px; padding: 1px 7px; font-size: 12px; letter-spacing: 0; }

/* Резервные копии */
.section-title { font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-2); }
.bk-status { font-size: 16px; margin: 2px 0 6px; }
.bk-row, .bk-sec { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; font: inherit; color: inherit; border: 0; cursor: pointer; }
.bk-ico { font-size: 22px; width: 32px; text-align: center; flex: none; }
.bk-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.bk-date { font-weight: 600; }
.bk-more svg { width: 18px; height: 18px; opacity: .45; }
.bk-check { width: 26px; height: 26px; border-radius: 8px; border: 2px solid var(--line); flex: none; display: grid; place-items: center; }
.bk-sec.on .bk-check { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.bk-check svg { width: 16px; height: 16px; }
.bk-warn { background: var(--st-orange-bg); color: var(--st-orange); }

/* Шапка: «Сохранить» вверху справа и меню «⋯» */
#topbar.nested { position: relative; }
.hdr-right { margin-left: auto; display: flex; align-items: center; gap: 6px; flex: none; }
.hdr-save {
  height: 36px; padding: 0 14px; border-radius: 12px; border: 0; font: inherit; font-weight: 600; font-size: 15px;
  background: var(--accent); color: var(--accent-ink); cursor: pointer;
}
.hdr-save:disabled { opacity: .38; }
.hdr-save:active { transform: scale(.96); }
#topbar.nested .page-title.sm { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.flash { animation: flash 1.6s ease; }
@keyframes flash { 0%, 40% { box-shadow: 0 0 0 3px var(--accent); } 100% { box-shadow: 0 0 0 0 transparent; } }

/* Ошибка у поля */
.field.err input, .field.err textarea, .field.err select, .field.err .quick { outline: 2px solid var(--st-red); outline-offset: 1px; border-radius: 12px; }
.field-err { color: var(--st-red); font-size: 13px; font-weight: 600; margin-top: 6px; }
.req { color: var(--st-red); }

/* Города и день рождения в карточке клиента */
.city-chips { margin-top: 8px; }
.city-sugg { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.bday-row { display: flex; gap: 8px; }
.bday-row select, .bday-row input { flex: 1; min-width: 0; }
.bday-card { background: var(--st-orange-bg); color: var(--ink); }
.bday-card b { color: var(--st-orange); }

/* Настройки уведомлений */
.pref-row { display: flex; gap: 12px; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--line); }
.pref-row:last-child { border-bottom: 0; }
.pref-row .grow { min-width: 0; }
.switch { position: relative; width: 50px; height: 30px; flex: none; }
.switch input { opacity: 0; width: 0; height: 0; position: absolute; }
.switch span { position: absolute; inset: 0; border-radius: 30px; background: var(--line); transition: background .2s; }
.switch span::after { content: ""; position: absolute; left: 3px; top: 3px; width: 24px; height: 24px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.25); transition: transform .2s; }
.switch input:checked + span { background: var(--accent); }
.switch input:checked + span::after { transform: translateX(20px); }
details.fold { background: var(--surface); border-radius: 18px; margin-bottom: 12px; padding: 0 16px; }
details.fold > summary { list-style: none; cursor: pointer; padding: 15px 0; font-weight: 600; display: flex; justify-content: space-between; align-items: center; }
details.fold > summary::-webkit-details-marker { display: none; }
details.fold > summary::after { content: "›"; font-size: 22px; color: var(--ink-3, #999); transform: rotate(90deg); transition: transform .2s; }
details.fold:not([open]) > summary::after { transform: rotate(0deg); }
details.fold > .fold-body { padding-bottom: 14px; }
details.fold > .fold-body > .card { box-shadow: none; padding: 0; margin: 0 0 12px; background: transparent; }
.hint-fold { margin-top: 6px; }
.hint-fold > summary { list-style: none; cursor: pointer; font-size: 14px; }
.hint-fold > summary::-webkit-details-marker { display: none; }
.card.pressing { transition: transform .45s ease; transform: scale(.975); }
.digest-preview { white-space: pre-wrap; background: var(--surface-2); border-radius: 14px; padding: 12px 14px; font-size: 14px; line-height: 1.45; }
#toast[data-type="warning"] { background: #f5b301; color: #1c1600; }
#toast[data-type="error"] { background: var(--st-red); color: #fff; }
#toast[data-type="success"]::before { content: "✓ "; color: var(--accent); }
.money-stat b { font-size: 19px !important; white-space: nowrap; }
.nowrap { white-space: nowrap; }

.bday-card svg { width: 18px; height: 18px; vertical-align: -3px; }
input[type="search"]::-webkit-search-cancel-button { -webkit-appearance: none; }
input[type="search"] { -webkit-appearance: none; appearance: none; }

/* Аватары: фото из Telegram поверх цветных инициалов */
/* Аватар по умолчанию: ровный круг с инициалами по центру, фото — поверх. Размер задают контексты ниже (.lg, .sm, строки списков). */
.ava {
  position: relative; overflow: hidden; flex: none;
  width: 36px; height: 36px; border-radius: 50%;
  display: inline-grid; place-items: center;
  font-size: 13px; font-weight: 600; line-height: 1; letter-spacing: 0; white-space: nowrap; text-transform: uppercase;
  background: hsl(var(--ava-h, 220) 60% 88%); color: hsl(var(--ava-h, 220) 45% 28%);
}
.ava.sm { width: 28px; height: 28px; font-size: 12px; }
.list-row .ava, .sched-card .ava { width: 38px; height: 38px; font-size: 13px; }
:root[data-theme="dark"] .ava { background: hsl(var(--ava-h, 220) 30% 26%); color: hsl(var(--ava-h, 220) 60% 82%); }
.ava img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }
.avatar { position: relative; overflow: hidden; }
.avatar img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* ===== 1.3: новый вид ===== */
/* Шапка: название экрана и аватар */
.hdr-title { display: flex; align-items: center; gap: 10px; min-width: 0; }
.hdr-row .page-title { margin: 0; }
.studio-logo { width: 32px; height: 32px; border-radius: 9px; object-fit: contain; background: var(--surface); flex: none; }

/* «Сегодня» */
.today-date { color: var(--muted); font-weight: 600; font-size: 14px; margin: -4px 2px 12px; }
.sec-hint { margin: -6px 2px 8px; }
.list-card { padding: 4px 14px; }
.list-row { display: flex; align-items: center; gap: 12px; width: 100%; padding: 12px 0; border: 0; background: none; font: inherit; color: inherit; text-align: left; cursor: pointer; border-bottom: 1px solid var(--line); }
.list-row:last-child { border-bottom: 0; }
.list-row .grow { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.list-row > svg { width: 18px; height: 18px; opacity: .4; flex: none; }
.lr-time { font-weight: 600; font-variant-numeric: tabular-nums; min-width: 44px; }
.lr-time.hot { color: var(--st-red); }
.lr-ico svg { width: 22px; height: 22px; color: var(--st-orange); }
.numbers-card .hero-stat { background: var(--surface-2); }
.numbers-card .hero-stat b { color: var(--ink); }
.numbers-card .hero-stat span { color: var(--muted); }
.hero-stat.hot b { color: #ff8a7a; }
.numbers-card .hero-stat.hot b { color: var(--st-red); }
.summary-line { color: var(--muted); font-size: 14px; font-weight: 600; margin: 0 2px 12px; }
.summary-line b { color: var(--ink); }
.summary-line b.hot { color: var(--st-red); }

/* Светлый блок вместо тёмного там, где главное — не цифра */
.hero.light { background: var(--surface); color: var(--ink); box-shadow: var(--shadow); }
.hero.light::after { display: none; }
.hero.light .hero-label { color: var(--muted); }
.hero.light .hero-stat { background: var(--surface-2); }
.hero.light .hero-stat b { color: var(--ink); }
.hero.light .hero-stat span { color: var(--muted); }
.hero.light .hero-stat.hot b { color: var(--st-red); }

/* Статусы: точка + текст, иконка этапа; цветной фон убран */
.chip.st { background: transparent; padding: 3px 0; gap: 5px; color: var(--ink-2); font-weight: 600; }
.chip.st::before { background: var(--dot, var(--st-gray)); }
.chip.st.orange { --dot: var(--st-orange); color: var(--ink-2); background: transparent; }
.chip.st.blue { --dot: var(--st-blue); color: var(--ink-2); background: transparent; }
.chip.st.violet { --dot: var(--st-violet); color: var(--ink-2); background: transparent; }
.chip.st.green { --dot: var(--st-green); color: var(--ink-2); background: transparent; }
.chip.st.lime { --dot: #9ccc00; color: var(--ink-2); background: transparent; }
.chip.st.gray { --dot: var(--st-gray); color: var(--muted); background: transparent; }
.chip.st::before { display: none; }
.chip.st svg { width: 15px; height: 15px; color: var(--dot, var(--st-gray)); stroke-width: 2.4; }
.pcard-status { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; margin-top: 6px; }
.pcard-status .chip { margin-top: 0; }
.pcard-status .dl { margin-top: 0; }

/* Страница проекта */
.main-action { margin: 2px 0 0; height: 54px; font-size: 16px; }
.main-pair { gap: 10px; margin: 2px 0 0; }
.main-pair .main-action { margin: 0; flex: 1 1 0; min-width: 0; }
.proj-tabs button { position: relative; }
.dot-hot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--st-red); vertical-align: 2px; }

/* Режим нового проекта — три карточки с иконками */
.mode-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.mode-cards button { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 14px 6px 12px; border-radius: 16px; border: 2px solid transparent; background: var(--surface-2); font: inherit; color: var(--ink); cursor: pointer; }
.mode-cards button svg { width: 24px; height: 24px; }
.mode-cards button b { font-size: 15px; }
.mode-cards button span { font-size: 12px; color: var(--muted); font-weight: 600; }
.mode-cards button.active { border-color: var(--ink); background: var(--surface); }

/* Акцент — только у главной кнопки и активной вкладки */
.msg.mine { background: var(--dark); color: var(--on-dark); }
:root[data-theme="dark"] .msg.mine { background: #2a2a31; color: #f1f1f4; }
.date-tile.today { background: var(--surface-2); color: var(--ink); box-shadow: inset 0 0 0 2px var(--ink); }
.date-tile.today .m, .date-tile.today .t { color: var(--ink-2); }
.home-chip button#home-add { background: var(--surface-2); color: var(--ink); }

/* Пустые экраны с кнопкой */
.empty-cta { margin-top: 14px; }

/* Галочка «готово» */
.done-pop { position: fixed; left: 50%; top: 42%; width: 84px; height: 84px; margin: -42px 0 0 -42px; border-radius: 50%; background: var(--accent); color: var(--accent-ink); display: grid; place-items: center; z-index: 120; pointer-events: none; animation: done-pop .9s ease forwards; }
.done-pop svg { width: 42px; height: 42px; stroke-width: 3; }
@keyframes done-pop { 0% { transform: scale(.4); opacity: 0; } 25% { transform: scale(1.08); opacity: 1; } 45% { transform: scale(1); } 80% { opacity: 1; } 100% { opacity: 0; transform: scale(.96); } }
/* Лёгкое появление экрана */
#view.anim-fade > :not(.view-host), #view.anim-fade > .view-host > * { animation: view-in .22s ease backwards; }
@keyframes view-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .done-pop, #view.anim-fade > *, #view.anim-fade > .view-host > * { animation: none !important; } }

/* Оформление */
.swatches { display: flex; flex-wrap: wrap; gap: 10px; }
.swatch { width: 40px; height: 40px; border-radius: 50%; border: 3px solid transparent; background: var(--sw); cursor: pointer; box-shadow: inset 0 0 0 1px rgba(0,0,0,.08); }
.swatch.on { border-color: var(--ink); }
.swatch.studio { width: auto; padding: 0 12px; border-radius: 20px; background: var(--surface-2); font: inherit; font-size: 13px; font-weight: 600; color: var(--ink); }
.logo-preview { width: 48px; height: 48px; border-radius: 12px; object-fit: contain; background: var(--surface-2); display: grid; place-items: center; color: var(--muted); }

/* Плотность «компактная» */
body.compact .card { padding: 12px 14px; margin-bottom: 8px; }
body.compact .pcard { gap: 10px; }
body.compact .date-tile { width: 50px; min-height: 54px; }
body.compact .pcard-name { font-size: 15px; }
body.compact .hero { padding: 16px; }
body.compact .section-head { margin: 14px 2px 8px; }

/* Углы «строгие» */
body.strict .card, body.strict .hero, body.strict .btn, body.strict .sheet, body.strict input, body.strict select, body.strict textarea,
body.strict .pill, body.strict .date-tile, body.strict .segmented, body.strict .segmented button, body.strict details.fold, body.strict .mode-cards button,
body.strict .hdr-save, body.strict #tabbar, body.strict .tab-btn, body.strict .quick button, body.strict .pick, body.strict .icon-btn { border-radius: 8px !important; }

/* ===== 1.4: команда ===== */
.conf { display: block; font-size: 13px; font-weight: 600; margin-top: 2px; }
.conf.ok { color: var(--st-green); }
.conf.wait { color: var(--muted); }
.conf.late, .conf.no { color: var(--st-red); }
.conf .link-btn { font-size: 13px; margin-left: 4px; }
.card.unconfirmed { box-shadow: inset 0 0 0 2px var(--st-red); }
.confirm-card { background: var(--st-orange-bg); }
.shoot-panel { background: var(--surface); border-radius: 22px; padding: 16px; margin: 10px 0 12px; box-shadow: var(--shadow); }
.shoot-panel .sp-label { font-size: 13px; font-weight: 600; color: var(--muted); }
.shoot-panel .sp-btn { margin-top: 12px; }
.shoot-panel .sp-btn.big { height: 60px; font-size: 18px; }
.shoot-panel.running { background: var(--dark); color: var(--on-dark); }
.shoot-panel.running .sp-label { color: var(--on-dark-muted); }
.sp-timer { font-size: 54px; font-weight: 600; letter-spacing: -.02em; font-variant-numeric: tabular-nums; line-height: 1.1; margin-top: 4px; }
.sp-left { font-weight: 600; color: var(--accent); }
.shoot-panel.running.over .sp-left { color: #ff8a7a; }
.shoot-panel.running .sp-btn { background: var(--accent); color: var(--accent-ink); }
.shoot-panel.done .sp-sum { font-weight: 600; margin-top: 4px; line-height: 1.4; }
.today-actions { gap: 8px; margin: -4px 0 12px; }
.task-row .t-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--line); flex: none; }
.task-row .t-dot.red { background: var(--st-red); }
.task-row .t-dot.orange { background: var(--st-orange); }
.task-row.over b { color: var(--st-red); }
.task-row.done b { text-decoration: line-through; color: var(--muted); }
.check-row { display: flex; gap: 12px; align-items: flex-start; padding: 10px 0; border-bottom: 1px solid var(--line); cursor: pointer; }
.check-row:last-child { border-bottom: 0; }
.check-row input { width: 22px; height: 22px; accent-color: var(--ink); flex: none; margin-top: 1px; }
.check-row input:checked + span { text-decoration: line-through; color: var(--muted); }
.task-client { padding: 10px 0; border-bottom: 1px solid var(--line); }
.task-client:last-child { border-bottom: 0; }
.task-client .quick { margin-top: 8px; }
.icon-btn.sm { width: 34px; height: 34px; }
.icon-btn.sm svg { width: 16px; height: 16px; }
.blacklist-card { background: var(--st-red-bg); color: var(--st-red); font-weight: 600; }
.blacklist-card b { color: var(--st-red); }
.bl-warn { margin-top: 6px; font-size: 14px; font-weight: 600; color: var(--st-orange); }
.bl-warn.danger { color: var(--st-red); }
.sheet-form { padding: 4px 0 8px; }

/* ---------- 1.4: деньги и качество ---------- */
.t-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: var(--line); flex: none; }
.t-dot.red { background: var(--st-red); }
.t-dot.orange { background: var(--st-orange); }
.t-dot.yellow { background: #e6b400; }
.good { color: var(--st-green) !important; }
.bad { color: var(--st-red) !important; }
.accent-text { color: var(--ink); }
.kv dd.good, .kv dd.bad { font-variant-numeric: tabular-nums; }
.staff-hero { display: flex; align-items: center; gap: 12px; }
.staff-hero .ava.lg { width: 52px; height: 52px; font-size: 18px; }
.staff-hero .grow { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.rating { display: inline-flex; align-items: center; justify-content: center; min-width: 38px; height: 26px; padding: 0 8px; border-radius: 999px; font-weight: 600; font-size: 13px; background: var(--surface-2); flex: none; }
.rating.good { background: var(--st-green-bg); }
.rating.mid { background: var(--st-orange-bg); color: var(--st-orange); }
.rating.low { background: var(--st-red-bg); }
.staff-hero .rating { font-size: 16px; height: 32px; min-width: 48px; }
.rate-row { display: flex; align-items: center; gap: 8px; padding: 6px 0; border-bottom: 1px solid var(--line); font-size: 14px; font-weight: 600; }
.rate-row:last-of-type { border-bottom: 0; }
.rate-row input { width: 92px; height: 38px; border-radius: 10px; border: 1px solid var(--line); background: var(--surface-2); color: var(--ink); padding: 0 10px; font: inherit; font-size: 14px; text-align: right; }
.type-row { display: grid; grid-template-columns: auto 1fr auto auto; gap: 6px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--line); }
.type-row:last-child { border-bottom: 0; }
.type-row input[type="text"], .type-row select { height: 36px; border-radius: 10px; border: 1px solid var(--line); background: var(--surface-2); color: var(--ink); padding: 0 8px; font: inherit; font-size: 14px; min-width: 0; }
.type-row input[data-k="amount"], .type-row input[data-k="percent"] { width: 72px; text-align: right; }
.type-row select { max-width: 110px; }
.switch-mini input { width: 20px; height: 20px; accent-color: var(--accent); }
.content-need { background: var(--st-green-bg); }
.list-row .count { font-size: 12px; font-weight: 600; background: var(--accent); color: var(--accent-ink); border-radius: 999px; padding: 2px 8px; }
.month-switch .icon-btn[disabled] { opacity: .3; }
.doc-paper { background: #fff !important; color: #111; font: 13.5px/1.5 "Times New Roman", serif; overflow-x: auto; }
.doc-paper p { margin: 0 0 6px; }
.doc-paper table { width: 100%; border-collapse: collapse; }
.doc-paper td { vertical-align: top; padding: 4px; border: 1px solid #ddd; }
.chip.orange { background: var(--st-orange-bg); color: var(--st-orange); }

/* ---------- Веб-версия и компьютер ---------- */
.web-login { max-width: 380px; margin: 12vh auto 0; text-align: center; padding: 0 8px; }
.web-login .wl-logo { width: 72px; height: 72px; margin: 0 auto 16px; border-radius: 22px; background: var(--ink, #141414); color: var(--accent); display: grid; place-items: center; }
.web-login .wl-logo svg { width: 36px; height: 36px; }
.web-login h1 { font-size: 28px; margin: 0 0 8px; }
.web-login p { margin: 0 0 22px; }
@media (min-width: 820px) {
  #app { max-width: 720px; margin: 0 auto; }
  #tabbar { left: calc(50% - 344px); right: calc(50% - 344px); }
  .fab { right: calc(50% - 340px); }
  .sheet { max-width: 640px; margin: 0 auto; left: 0; right: 0; }
  #view { padding-bottom: 130px; }
  .hero, .card { transition: box-shadow .15s; }
  .list-row:hover, .pcard:hover { filter: brightness(0.985); }
}
@media (min-width: 1200px) {
  #app { max-width: 820px; }
  #tabbar { left: calc(50% - 394px); right: calc(50% - 394px); }
  .fab { right: calc(50% - 390px); }
}
.sheet-item .grow { flex: 1; text-align: left; }
.trip-card .weather { font-weight: 600; font-size: 14px; }
.checklist-card .check-row { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--line); }
.checklist-card .check-row:last-of-type { border-bottom: 0; }
.checklist-card .check-row.done .grow { color: var(--muted); text-decoration: line-through; }
.checklist-card input[type=checkbox] { width: 20px; height: 20px; accent-color: var(--accent); flex: none; }
.bc-card.unread { box-shadow: inset 4px 0 0 var(--accent), var(--shadow); }
.sched-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.sched-grid .sd { position: relative; height: 38px; border: 0; border-radius: 10px; background: var(--surface-2); color: var(--ink); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; }
.sched-grid .sd.we { color: var(--muted); }
.sched-grid .sd.today { outline: 2px solid var(--ink); }
.sched-grid .sd.off { background: var(--st-orange-bg); color: var(--st-orange); }
.sched-grid .sd.vacation { background: var(--st-green-bg); color: var(--st-green); }
.sched-grid .sd.sick { background: var(--st-red-bg); color: var(--st-red); }
.sched-grid .sd i { position: absolute; right: 2px; top: 0; font-style: normal; font-size: 12px; }
.im-sample { overflow-x: auto; }
.im-sample table { border-collapse: collapse; font-size: 13px; }
.im-sample th, .im-sample td { padding: 4px 8px; border-bottom: 1px solid var(--line); white-space: nowrap; text-align: left; }
.ai-fill { margin-bottom: 10px; }
.ai-out { line-height: 1.55; }
.reg-body { line-height: 1.55; }
.sheet-item { display: flex; align-items: center; gap: 8px; }
a.btn { text-decoration: none; color: inherit; }
.checklist-card [data-chk-del] { color: var(--muted); }
.check-row .qty { width: 56px; height: 34px; border-radius: 10px; border: 1px solid var(--line); background: var(--surface-2); color: var(--ink); text-align: center; font: inherit; }
.offer-total dd b, .offer-total dt b { font-size: 16px; }
.rate-block { background: var(--surface-2); border-radius: 14px; padding: 8px 12px; margin-bottom: 10px; }
.rate-block .rate-row input { background: var(--surface); }
.rate-title { font-weight: 600; font-size: 14px; padding: 4px 0; }
.next-shoot { display: flex; align-items: center; gap: 14px; cursor: pointer; }
.next-shoot .ns-when { flex: none; min-width: 92px; padding: 10px 12px; border-radius: 16px; background: var(--dark, #141414); color: var(--accent); display: flex; flex-direction: column; }
.next-shoot .ns-when b { font-size: 15px; line-height: 1.2; }
.next-shoot .ns-when span { font-size: 12px; color: var(--on-dark-muted, #aaa); font-weight: 600; margin-top: 2px; }
.next-shoot .ns-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.next-shoot .ns-body b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.next-shoot > svg { width: 18px; height: 18px; opacity: .4; flex: none; }
/* Клиенты: инициалы слева, статус работы — только у текущих */
.client-card { display: flex; align-items: center; gap: 12px; padding: 12px 14px; }
.client-card .ava.lg { width: 46px; height: 46px; border-radius: 16px; font-size: 16px; font-weight: 600; display: grid; place-items: center; flex: none; }
.client-card .cc-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.client-card .cc-name { font-weight: 600; font-size: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.client-card .cc-meta { font-size: 13px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.client-card .cc-work { display: inline-flex; align-items: center; gap: 5px; font-size: 13px; font-weight: 600; margin-top: 3px; color: var(--ink-2, var(--ink)); }
.client-card .cc-work svg { width: 14px; height: 14px; }
.client-card .cc-work.shoot { color: var(--st-blue, #2b6fd6); }
.client-card .cc-work.edit { color: var(--st-orange); }
.client-card .cc-work.client { color: var(--st-green); }
.client-card > svg { width: 18px; height: 18px; opacity: .35; flex: none; }
.letter-head { font-size: 13px; font-weight: 600; color: var(--muted); margin: 14px 6px 6px; }
/* Чаты: иконки групп, аватар и имя, ответы */
.chat-ava svg { width: 20px; height: 20px; }
.chat-ava.ch-all { background: var(--st-blue-bg); color: var(--st-blue); }
.chat-ava.ch-sales { background: var(--st-green-bg); color: var(--st-green); }
.chat-ava.ch-production { background: var(--st-orange-bg); color: var(--st-orange); }
.chat-ava.ch-operators { background: var(--st-red-bg); color: var(--st-red); }
.chat-ava.ch-editors { background: #efe6ff; color: #7446d9; }
:root[data-theme="dark"] .chat-ava.ch-editors { background: #2c2344; color: #c3b0ff; }
.msg-line { display: flex; align-items: flex-end; gap: 8px; margin-top: 2px; position: relative; }
.msg-line.first { margin-top: 10px; }
.msg-line.mine { justify-content: flex-end; }
.msg-line .msg { margin: 0; max-width: 82%; }
.msg-ava { width: 30px !important; height: 30px !important; border-radius: 50% !important; font-size: 12px !important; flex: none; display: grid; place-items: center; font-weight: 600; }
.msg-ava-gap { width: 30px; flex: none; }
.msg-quote { border-left: 3px solid var(--accent); padding: 4px 8px; margin: 2px 0 6px; border-radius: 6px; background: rgba(0,0,0,.05); font-size: 13px; cursor: pointer; display: flex; flex-direction: column; }
.msg-quote span { color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 240px; }
.msg-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 4px; }
.msg-foot .msg-time { margin: 0; }
.msg-reply { border: 0; background: none; padding: 0; font: inherit; font-size: 12px; font-weight: 600; color: var(--muted); display: inline-flex; align-items: center; gap: 3px; cursor: pointer; opacity: .75; }
.msg-reply svg { width: 13px; height: 13px; }
.msg-line.reply-ready::before { content: "↩"; position: absolute; left: -26px; top: 50%; transform: translateY(-50%); font-size: 18px; color: var(--accent); }
.msg-line.flash .msg { box-shadow: 0 0 0 3px var(--accent); }
.reply-chip { border-left: 3px solid var(--accent); }
.ext-link { color: var(--st-blue); text-decoration: underline; word-break: break-all; }
.msg-text, .long-text, .pcard-meta, .hero-sub { overflow-wrap: anywhere; }
/* Длинные адреса и ссылки не вылезают за карточку */
.pcard, .pcard-body { min-width: 0; }
.pcard-body { flex: 1; overflow: hidden; }
.place-onsite { display: inline-flex; align-items: center; gap: 5px; max-width: 100%; min-width: 0; color: var(--st-blue); text-decoration: none; }
.place-onsite span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.link-box { max-width: 100%; overflow-wrap: anywhere; }
.kv dd a.ext-link { text-decoration: none; }
.pkg-card summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; }
.pkg-card summary::after { content: "›"; font-size: 20px; color: var(--muted); transition: transform .2s; }
.pkg-card[open] summary::after { transform: rotate(90deg); }
.pkg-card summary::-webkit-details-marker { display: none; }
/* Протяжка по нижней панели */
#tabbar { touch-action: none; user-select: none; -webkit-user-select: none; }
#tabbar.scrubbing .tab-btn.active:not(.scrub) { background: transparent; color: var(--on-dark-muted); }
#tabbar.scrubbing .tab-btn.scrub { background: var(--accent); color: var(--accent-ink); transform: scale(1.06); }
.card[data-open], [data-client] { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }
.card.pressing { transform: scale(0.98); transition: transform .3s; }
.sheet { will-change: transform; }
.kv dd { overflow-wrap: break-word; }
.kv dd a.ext-link { display: inline; word-break: normal; overflow-wrap: anywhere; }

/* Заметка клиента — нажать, чтобы изменить */
.note-item { display: block; width: 100%; background: none; border: 0; padding: 0; font: inherit; color: inherit; text-align: left; cursor: pointer; }
.note-item .muted svg { width: 12px; height: 12px; vertical-align: -1px; }

/* Подпись «дедлайн» в плитке даты не вылезает за край */
/* Плитка «дедлайн» в календаре: время + подпись, всё внутри плитки */
.date-tile.dl-tile { background: var(--st-red-bg); color: var(--st-red); display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 10px 4px; overflow: hidden; }
.date-tile.dl-tile .d { font-size: 17px; letter-spacing: -0.02em; white-space: nowrap; }
.date-tile.dl-tile .m { font-size: 12px; letter-spacing: 0.02em; color: var(--st-red); margin-top: 4px; white-space: nowrap; }

/* Сворачиваемые разделы на «Сегодня» */
.sec-toggle { display: inline-flex; align-items: center; gap: 4px; margin-left: 8px; padding: 4px 10px; border: 0; border-radius: 999px; background: var(--surface-2); color: var(--muted); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; }
.sec-toggle svg { width: 14px; height: 14px; transition: transform .2s; transform: rotate(-90deg); }
.sec.collapsed .sec-toggle svg { transform: rotate(90deg); }
.sec.collapsed > .sec-body { display: none; }
.sec > .section-head { cursor: pointer; }
.sec > .section-head { margin-top: 22px; align-items: center; }
.sec > .section-head h2 { flex: 1; min-width: 0; }

/* Кнопки в строке: не сжимаются уже своего текста — лишние переносятся на следующую строку */
.row { flex-wrap: wrap; }
.btn.grow { flex: 1 1 auto; min-width: min-content; }

/* --- Аккуратность: ничего не вылезает за края --- */
.kv dd { min-width: 0; overflow-wrap: anywhere; }
.kv dt { min-width: 0; }
.place-onsite { overflow: hidden; }
.link-box { display: flex; width: 100%; min-width: 0; word-break: normal; }
.link-box span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.contact-row { min-width: 0; overflow-wrap: anywhere; }
.src-table { font-size: 13px; table-layout: auto; }
.src-table th { font-size: 12px; padding: 0 0 8px 8px; white-space: nowrap; }
.src-table td { padding: 9px 0 9px 8px; white-space: nowrap; }
.src-table th:first-child, .src-table td:first-child { padding-left: 0; white-space: normal; }
.pcard-name, .pcard-meta, .hero-title { overflow-wrap: anywhere; }
.next-shoot .ns-when { min-width: 0; max-width: 112px; }
.next-shoot .ns-when b { overflow-wrap: anywhere; }
.next-shoot .ns-body b { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.composer textarea::placeholder, #msg-input::placeholder, #ai-input::placeholder { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Иконки в заголовках строк и карточек вместо смайликов */
.list-row b > svg, .card > b > svg, .card summary b > svg { width: 17px; height: 17px; vertical-align: -3px; margin-right: 3px; opacity: .85; }

/* Импорт переписки WhatsApp */
.wa-item { align-items: flex-start; cursor: pointer; }
.wa-item > input[type="checkbox"] { width: 22px; height: 22px; flex: none; margin-top: 2px; accent-color: var(--accent); }
.wa-item input[type="tel"] { width: 100%; }
#wa-body > .card:first-child, #im-pane > .card:first-child { margin-top: 12px; }

/* --- Переписки с клиентами (WhatsApp) --- */
.chats-seg button { display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
.chats-seg button svg { width: 16px; height: 16px; }
.chats-seg .badge { display: inline-grid; min-width: 20px; height: 20px; font-size: 12px; background: var(--danger, #e5484d); color: #fff; }
.wa-thread .grow b, .wa-thread .grow .muted { display: block; }
.wa-you { font-weight: 600; color: var(--ink-2, inherit); }
.wa-head { display: flex; align-items: center; gap: 12px; }
.wa-head .grow b { display: block; font-size: 16px; }
.wa-head .grow .muted { display: block; }
.wa-head .icon-btn { flex: none; }
.wa-legend { display: flex; gap: 14px; justify-content: center; margin: 2px 0 6px; }
.wa-legend span { display: inline-flex; align-items: center; gap: 6px; }
.wa-legend .dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
.wa-legend .dot.in { background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); }
.wa-legend .dot.out { background: var(--accent); }
.msg.wa-in .msg-author { color: var(--st-blue); }
.msg.wa-out .msg-author { color: var(--accent-ink); opacity: .7; }
.wa-msgs { padding-bottom: 110px; }
.wa-open { width: 100%; border: 0; font: inherit; color: inherit; text-align: left; }
.wa-open .chat-ava { background: var(--st-green-bg); color: var(--st-green); }
.msg.wa-out, :root[data-theme="dark"] .msg.wa-out { background: var(--accent); color: var(--accent-ink); }
.msg.wa-out .msg-text a { color: inherit; text-decoration: underline; }
.msg.wa-in { background: var(--surface); }
.wa-item .grow > b, .wa-item .grow > .muted { display: inline; }
.wa-item .grow > .muted.small:nth-of-type(2) { display: block; }
.wa-target { display: flex; align-items: center; gap: 8px; width: 100%; margin-top: 8px; padding: 10px 12px; border: 1px dashed var(--line); border-radius: 12px; background: none; color: inherit; font: inherit; font-size: 14px; text-align: left; cursor: pointer; }
.wa-target.linked { border-style: solid; background: var(--st-green-bg); border-color: transparent; }
.wa-target svg { width: 16px; height: 16px; flex: none; }
.wa-target .k { margin-left: auto; font-size: 12px; font-weight: 600; color: var(--st-blue); flex: none; }
.wa-sugg { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 6px; font-size: 13px; color: var(--muted); }
.wa-sugg button { border: 0; border-radius: 999px; padding: 4px 10px; background: var(--surface-2); color: var(--ink); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; }
.wa-item input[type="tel"] { margin-top: 8px; }
.wa-target .wt-text { flex: 1; min-width: 0; overflow-wrap: anywhere; }

/* Аватарки в чатах — нажимаются (карточка клиента / профиль сотрудника) */
.ava-tap { padding: 0; margin: 0; border: 0; background: none; border-radius: 50%; cursor: pointer; flex: none; line-height: 0; }
.ava-tap:active { transform: scale(.94); }
[data-person].msg-author, [data-open-card].msg-author { cursor: pointer; }
.wa-head [data-open-card] { cursor: pointer; }

/* ---------- Встречи (1.6) ---------- */
.mt-card { border: 0; display: block; width: 100%; text-align: left; font: inherit; color: inherit; cursor: pointer; }
.mt-card.cancelled { opacity: .55; }
.mt-card .pcard-body { min-width: 0; flex: 1; }
.mt-card .pcard-name { display: flex; align-items: flex-start; gap: 6px; }
.mt-card .pcard-name svg { width: 17px; height: 17px; flex: none; margin-top: 2px; opacity: .7; }
.mt-card .pcard-name span { min-width: 0; }
.mt-card .chip { margin-top: 8px; }
.mt-foot { display: flex; align-items: center; gap: 8px; margin-top: 8px; flex-wrap: wrap; }
.ava-stack { display: inline-flex; }
.ava-stack .ava { width: 26px; height: 26px; font-size: 12px; border: 2px solid var(--surface); margin-left: -8px; }
.ava-stack .ava:first-child { margin-left: 0; }
.ava-stack .ava.more { background: var(--surface-2); color: var(--ink-2); font-weight: 600; }
.mt-hero .mt-when { display: flex; align-items: flex-start; gap: 10px; margin-top: 12px; }
.mt-hero .mt-when > svg { width: 20px; height: 20px; flex: none; margin-top: 1px; opacity: .75; }
.mt-hero .mt-when > span { display: flex; flex-direction: column; gap: 2px; min-width: 0; overflow-wrap: anywhere; }
.mt-link { overflow-wrap: anywhere; }
.mt-answer .label { margin-bottom: 10px; }
.mt-answer.attn { border: 2px solid var(--accent); }
.danger-text { color: var(--st-red) !important; }
.segmented.four { grid-template-columns: repeat(4, 1fr); }
.segmented.four button { font-size: 13px; padding-left: 2px; padding-right: 2px; }
.segmented button svg { width: 16px; height: 16px; vertical-align: -3px; margin-right: 4px; }
.pick .pick-name { display: flex; flex-direction: column; min-width: 0; }
.pick .pick-name small { font-size: 12px; font-weight: 600; color: var(--muted); overflow-wrap: anywhere; }
#mf-cl-list .list-row .ava, #mf-client .list-row .ava { width: 34px; height: 34px; font-size: 12px; }
#mf-cl-q { margin-bottom: 4px; }

/* ---------- «Сегодня»: ближайшая съёмка крупно (1.6.4) ---------- */
.hero-shoot { margin-bottom: 6px; }
.hero-shoot > .card { padding: 18px; }
.hero-shoot .pcard { gap: 16px; }
.hero-shoot .date-tile { width: 76px; padding: 10px 4px 9px; border-radius: 18px; }
.hero-shoot .date-tile .d { font-size: 30px; }
.hero-shoot .date-tile .m { font-size: 12px; }
.hero-shoot .date-tile .t { font-size: 14px; margin-top: 6px; }
.hero-shoot .pcard-name { font-size: 20px; }
.hero-shoot .pcard-meta { font-size: 15px; }
.hero-shoot .shoot-panel { background: transparent; box-shadow: none; padding: 14px 0 0; margin: 14px 0 0; border-top: 1px solid var(--line); border-radius: 0; }
.hero-shoot .shoot-panel.running { background: var(--dark); color: var(--on-dark); padding: 16px; border-radius: 18px; border-top: 0; }
.hero-shoot .shoot-panel.done { padding-top: 12px; }
.hero-shoot .shoot-panel:not(.running):not(.done) .sp-label { display: none; } /* заголовок «Съёмка сегодня» уже над карточкой */

/* ---------- «Сегодня»: ближайшая съёмка в стиле «Мои съёмки» (1.6.5) ---------- */
.today-shoot { cursor: pointer; }
.today-shoot .btn { margin-top: 16px; }
.today-shoot .shoot-panel { background: transparent; box-shadow: none; color: inherit; padding: 0; margin: 16px 0 0; border-radius: 0; }
.today-shoot .shoot-panel .sp-label { color: var(--on-dark-muted); }
.today-shoot .shoot-panel .muted { color: var(--on-dark-muted); }
.today-shoot .shoot-panel .sp-btn { margin-top: 0; }
.today-shoot .shoot-panel.running .sp-btn, .today-shoot .shoot-panel.done .sp-btn { margin-top: 12px; }
.today-shoot .shoot-panel:not(.running):not(.done) .sp-label { display: none; }
.today-shoot .shoot-panel.running { background: rgba(255, 255, 255, 0.06); padding: 14px; border-radius: 18px; }

/* Финансовый отчёт */
.kv-row { display: flex; gap: 10px; align-items: baseline; padding: 6px 0; font-size: 15px; }
.kv-row .grow { flex: 1; min-width: 0; }

/* Комментарии команды */
.tc-list { display: grid; gap: 12px; margin-top: 10px; }
.tc-item { border-left: 3px solid var(--accent, #d4f64a); padding-left: 12px; }

/* =========================================================================
   2.0 — редизайн «B · Смелый»
   Один тёмный блок на экран, акцент — только у главной кнопки и активной вкладки,
   списки — строки в одном блоке с линией 1px, без теней и рамок, ничего не плавает.
   Этот раздел идёт последним и переопределяет старые стили выше.
   ========================================================================= */

/* ---------- Шапка ---------- */
#topbar { padding: 16px 20px 12px; }
#topbar.nested { padding: 16px 16px 12px; gap: 12px; background: var(--bg); backdrop-filter: none; -webkit-backdrop-filter: none; }
.hdr-row { min-height: 44px; }
.hdr-row .page-title, .page-title { font-size: 26px; line-height: 1.15; letter-spacing: -0.02em; margin: 0; }
.page-title.sm { font-size: 20px; letter-spacing: -0.01em; }
.hdr-date { font-size: 14px; font-weight: 600; color: var(--muted); margin: 0; }
.hdr-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.icon-btn { width: 44px; height: 44px; box-shadow: none; }
.icon-btn svg { width: 22px; height: 22px; }
.avatar { width: 44px; height: 44px; background: var(--sel); color: var(--sel-ink); font-size: 14px; }
#topbar.on-dark { background: var(--dark); color: var(--on-dark); }
#topbar.on-dark .icon-btn, #topbar.on-dark .hdr-pill { background: var(--dark-btn); color: var(--on-dark); }
.hdr-pill { height: 44px; padding: 0 12px 0 16px; border: 0; border-radius: 22px; background: var(--surface); color: var(--ink); font-size: 14px; font-weight: 600; display: inline-flex; align-items: center; gap: 4px; cursor: pointer; flex-shrink: 0; }
.hdr-pill svg { width: 18px; height: 18px; }
.hdr-save { height: 44px; border-radius: 12px; font-size: 14px; }
.fab { display: none !important; } /* ничего не плавает — «+» живёт в шапке */

/* ---------- Контент ---------- */
#view { padding: 0 16px calc(96px + env(safe-area-inset-bottom)); }
#topbar.nested + #view { padding-bottom: calc(28px + env(safe-area-inset-bottom)); }
.card { border-radius: 16px; box-shadow: none; margin-bottom: 12px; }
.card.tap:active { transform: none; opacity: 0.7; }
.muted { color: var(--muted); }
.small { font-size: 13px; }
.hot, .bad { color: var(--hot); }
.good { color: var(--up); }
.nowrap { white-space: nowrap; }
.tnum { font-variant-numeric: tabular-nums; }

/* Подзаголовок группы */
.section-head { display: flex; align-items: baseline; justify-content: flex-start; gap: 6px; margin: 16px 4px 6px; }
.section-head:first-child { margin-top: 4px; }
.section-head h2, .grp { font-size: 13px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); margin: 0; }
.section-head .count { font-size: 13px; font-weight: 600; letter-spacing: 0.04em; color: var(--muted); }
.section-head .count::before { content: "· "; }
.grp { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 16px 4px 6px; }
.grp > span:first-child { min-width: 0; }
.grp .grp-side { font-size: 12px; font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--muted); white-space: nowrap; }
.grp .grp-sum { font-size: 14px; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--ink); white-space: nowrap; }
.grp.hot { color: var(--hot); }
.sec-toggle { display: none; }
.foot-note { padding: 8px 4px 0; font-size: 13px; font-weight: 500; color: var(--muted); }

/* ---------- Главный (тёмный) блок ---------- */
.hero, .dark-blk {
  background: var(--dark); color: var(--on-dark);
  border-radius: 24px; padding: 18px 20px 20px; margin-bottom: 12px;
  box-shadow: inset 0 0 0 1px var(--dark-edge);
  display: flex; flex-direction: column; overflow: visible; position: relative;
}
.hero::after { display: none; }
.hero-label, .dk-label { font-size: 14px; font-weight: 500; color: var(--on-dark-muted); }
.hero-big { font-size: 36px; font-weight: 600; letter-spacing: -0.03em; line-height: 1.1; color: var(--on-dark); margin-top: 2px; }
.hero-title, .dk-title { font-size: 22px; font-weight: 600; letter-spacing: -0.02em; line-height: 1.2; margin-top: 6px; }
.dk-title.lg { font-size: 26px; line-height: 1.15; }
.hero-sub, .dk-sub { font-size: 14px; font-weight: 500; color: var(--on-dark-muted); margin-top: 4px; }
.dk-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 13px; }
.dk-hot { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: var(--hot-on-dark); white-space: nowrap; }
.dk-hot svg { width: 15px; height: 15px; stroke-width: 2.2; }
.dk-note { font-size: 13px; font-weight: 600; color: var(--on-dark-muted); white-space: nowrap; }
.dk-btns { display: flex; gap: 8px; margin-top: 14px; }
.dk-btn {
  height: 48px; padding: 0 18px; border: 0; border-radius: 14px; background: var(--dark-btn); color: var(--on-dark);
  font: inherit; font-size: 15px; font-weight: 600; cursor: pointer; white-space: nowrap;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-width: 0;
}
.dk-btn.main { flex: 1 1 0; background: var(--accent); color: var(--accent-ink); font-weight: 600; overflow: hidden; text-overflow: ellipsis; }
.dk-btn.sq { width: 48px; padding: 0; flex: none; }
.dk-btn svg { width: 18px; height: 18px; flex: none; }
.dk-btn:disabled { opacity: 0.5; }
.hero .btn, .dark-blk .btn { margin-top: 14px; }
.hero .btn.accent, .dark-blk .btn.accent { font-weight: 600; }
.hero .btn.ghost, .dark-blk .btn.ghost, :root[data-theme="dark"] .hero .btn.ghost, :root[data-theme="dark"] .dark-blk .btn.ghost { background: var(--dark-btn); color: var(--on-dark); }
.hero-stats, .dk-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; margin-top: 16px; }
.hero-stat, .dk-stat { background: none; border-radius: 0; padding: 0 12px; border-right: 1px solid var(--dark-line); display: flex; flex-direction: column; min-width: 0; }
.hero-stat:first-child, .dk-stat:first-child { padding-left: 0; }
.hero-stat:last-child, .dk-stat:last-child { border-right: 0; }
.hero-stat b, .dk-stat b { font-size: 22px; line-height: 1.15; font-weight: 600; color: var(--on-dark); white-space: nowrap; }
.hero-stat span, .dk-stat span { font-size: 12px; font-weight: 600; color: var(--on-dark-muted); }
.hero-stat.hot b { color: var(--on-dark); }
.hero.light { background: var(--dark); color: var(--on-dark); }
.hero.light .hero-label { color: var(--on-dark-muted); }
.hero.light .hero-stat { background: none; }
.hero.light .hero-stat b, .hero.light .hero-stat.hot b { color: var(--on-dark); }
.hero.light .hero-stat span { color: var(--on-dark-muted); }
.progress { height: 6px; border-radius: 3px; background: var(--dark-line); margin-top: 12px; }
.progress > i { border-radius: 3px; }
.card .progress { background: var(--track); }
.card .progress > i { background: var(--sel); }
.cat-chips.on-dark .cat { background: var(--dark-btn); color: var(--on-dark); }
.hero .cat { background: var(--dark-btn); color: var(--on-dark); }
/* «Стопка» под главным блоком: за ним есть ещё дела */
.stack-1 { margin: -12px 18px 0; height: 8px; border-radius: 0 0 14px 14px; background: var(--dark-stack-1); }
.stack-2 { margin: 0 36px; height: 7px; border-radius: 0 0 12px 12px; background: var(--dark-stack-2); }
.stack-next { padding: 8px 0 0; text-align: center; font-size: 13px; font-weight: 500; color: var(--muted); border: 0; background: none; width: 100%; font-family: inherit; cursor: pointer; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Шкала этапов «3 из 4» */
.steps4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; margin-top: 14px; }
.steps4 i { height: 6px; border-radius: 3px; background: #4a4a54; }
.steps4 i.done { background: #ffffff; }
.steps4 i.now { background: var(--accent); }
.steps4-cap { display: flex; justify-content: space-between; gap: 12px; margin-top: 6px; font-size: 12px; font-weight: 600; color: var(--on-dark-muted); }

/* ---------- Кнопки ---------- */
.btn {
  min-height: 48px; padding: 6px 18px; border-radius: 14px;
  background: var(--sel); color: var(--sel-ink); font-size: 15px; font-weight: 600;
}
:root[data-theme="dark"] .btn { background: var(--sel); color: var(--sel-ink); }
.btn:active { transform: none; opacity: 0.75; }
.btn.block { min-height: 52px; border-radius: 16px; font-size: 16px; }
.btn.sm { min-height: 44px; padding: 4px 14px; font-size: 14px; border-radius: 12px; }
.btn.accent, :root[data-theme="dark"] .btn.accent { background: var(--accent); color: var(--accent-ink); font-weight: 600; }
.btn.ghost, :root[data-theme="dark"] .btn.ghost { background: var(--surface-2); color: var(--ink); }
.btn.danger, :root[data-theme="dark"] .btn.danger { background: var(--debt-bg); color: var(--debt-ink); }
.view-host > .btn.ghost, .view-host > .row > .btn.ghost, .view-host > div:not(.card):not(.lst):not(.dark-blk):not(.hero) > .btn.ghost { background: var(--surface); }
.link-btn { color: var(--link); font-size: 14px; }
.lbtn {
  height: 44px; padding: 0 14px; border: 0; border-radius: 12px; background: var(--surface-2); color: var(--ink);
  font: inherit; font-size: 14px; font-weight: 600; white-space: nowrap; cursor: pointer; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
}
.lbtn svg { width: 18px; height: 18px; }
.lbtn:disabled { opacity: 0.5; }
.lbtn.on { background: var(--sel); color: var(--sel-ink); }
.dark-blk .lbtn { background: var(--dark-btn); color: var(--on-dark); }
.dark-blk .lbtn.main { background: var(--accent); color: var(--accent-ink); font-weight: 600; }

/* ---------- Переключатели и фильтры ---------- */
.segmented { background: var(--track); border-radius: 14px; padding: 4px; gap: 4px; }
.segmented button { height: 40px; border-radius: 10px; color: var(--ink-2); font-size: 14px; font-weight: 600; }
.segmented button.active, :root[data-theme="dark"] .segmented button.active { background: var(--surface); color: var(--ink); font-weight: 600; box-shadow: none; }
.segmented.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.segmented.four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.segmented.four button, .segmented.three button { font-size: 13px; padding: 0 2px; }
/* Переключатель разделов вкладки: выбранный — тёмный */
.seg-main { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 4px; padding: 4px; border-radius: 14px; background: var(--track); }
.seg-main button {
  height: 40px; border: 0; border-radius: 10px; background: none; color: var(--ink-2);
  font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; white-space: nowrap;
  display: flex; align-items: center; justify-content: center; gap: 6px; min-width: 0; padding: 0 2px;
}
.seg-main button.active { background: var(--sel); color: var(--sel-ink); font-weight: 600; }
.seg-main .cnt-b { min-width: 20px; height: 20px; box-sizing: border-box; padding: 0 6px; border-radius: 10px; background: var(--sel); color: var(--sel-ink); font-size: 12px; font-weight: 600; display: inline-flex; align-items: center; justify-content: center; font-style: normal; }
.seg-main button.active .cnt-b { background: var(--accent); color: var(--accent-ink); }
.pills { gap: 6px; margin: 12px -16px 0; padding: 0 16px; }
.pill { height: 44px; padding: 0 12px; border-radius: 22px; background: var(--surface); color: var(--ink-2); font-size: 13px; font-weight: 600; box-shadow: none; }
.pill.active, :root[data-theme="dark"] .pill.active { background: var(--sel); color: var(--sel-ink); font-weight: 600; }
.quick button { height: 44px; padding: 0 14px; border-radius: 12px; font-size: 14px; }
.quick button.on, :root[data-theme="dark"] .quick button.on { background: var(--sel); color: var(--sel-ink); }

/* ---------- Поля ---------- */
.field > label, .label { font-size: 13px; font-weight: 600; color: var(--muted); margin: 0 0 6px 4px; }
.field .hint { font-size: 13px; }
input[type="text"], input[type="number"], input[type="tel"], input[type="email"], input[type="search"], input[type="date"], select, textarea {
  height: 52px; border: 0; border-radius: 14px; box-shadow: inset 0 0 0 2px transparent;
}
textarea { height: auto; }
input:focus, select:focus, textarea:focus { background: var(--surface-2); box-shadow: inset 0 0 0 2px var(--ink); }
input.invalid { box-shadow: inset 0 0 0 2px var(--hot); }
.dt-cal, .dt-cal .icon-btn { width: 52px; height: 52px; }
.dt-row { grid-template-columns: 1fr 104px 52px; }
.dt-preview { color: var(--up); }
.dt-preview.err { color: var(--hot); }
.searchbar { height: 48px; padding: 0 14px; border-radius: 14px; background: var(--surface); display: flex; align-items: center; gap: 10px; color: var(--muted); }
.searchbar svg { width: 20px; height: 20px; flex: none; }
.searchbar input { flex: 1; min-width: 0; height: 44px; padding: 0; border-radius: 0; background: none; box-shadow: none; font-size: 16px; font-weight: 500; }
.searchbar input:focus { background: none; box-shadow: none; }
.view-host > input[type="search"], .view-host > .row > input[type="text"], input.search { background: var(--surface); height: 48px; font-weight: 500; }
.pick { border: 0; box-shadow: inset 0 0 0 2px transparent; border-radius: 14px; min-height: 56px; }
.pick.on, :root[data-theme="dark"] .pick.on { box-shadow: inset 0 0 0 2px var(--ink); background: var(--surface-2); border-color: transparent; }
.pick.on .ava { background: var(--sel); color: var(--sel-ink); }
.main-tag { background: var(--surface); color: var(--ink-2); }

/* ---------- Список: строки в одном блоке ---------- */
.lst { background: var(--surface); border-radius: 16px; display: flex; flex-direction: column; overflow: hidden; margin-bottom: 0; }
.lrow {
  display: flex; align-items: center; gap: 12px; min-height: 60px; padding: 10px 12px 10px 16px;
  border: 0; border-bottom: 1px solid var(--line); background: var(--surface); color: inherit;
  font: inherit; text-align: left; width: 100%; cursor: pointer; box-sizing: border-box; text-decoration: none;
}
.lst > .lrow:last-child, .lst > .swipe:last-child .lrow, .lrow.last { border-bottom: 0; }
.lrow.one { min-height: 50px; font-size: 15px; font-weight: 600; }
.lrow.act { min-height: 52px; font-size: 15px; font-weight: 600; }
.lrow.act svg { width: 20px; height: 20px; stroke-width: 2.2; flex: none; }
.lrow-main { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.lrow-t { font-size: 16px; font-weight: 600; display: flex; align-items: center; gap: 8px; min-width: 0; }
.lrow-t > span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.lrow-s { font-size: 14px; font-weight: 500; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lrow-s .hot { color: var(--hot); font-weight: 600; }
.lrow-s b { color: var(--ink); font-weight: 600; }
.lrow-time { width: 48px; flex-shrink: 0; font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums; }
.lrow-time.hot { color: var(--hot); }
.lrow-side { flex-shrink: 0; display: flex; flex-direction: column; align-items: flex-end; gap: 4px; font-size: 12px; font-weight: 600; color: var(--muted); }
.lrow-val { flex-shrink: 0; font-size: 15px; font-weight: 600; white-space: nowrap; font-variant-numeric: tabular-nums; }
.lrow > svg.chev, .chev { width: 18px; height: 18px; color: var(--muted); flex: none; }
.lrow-letter { width: 24px; flex-shrink: 0; text-align: center; font-size: 13px; font-weight: 600; color: var(--muted); }
.lrow.cl { padding: 8px 14px 8px 6px; gap: 10px; min-height: 64px; }
.lrow-ico { width: 44px; height: 44px; flex-shrink: 0; border-radius: 14px; background: var(--surface-2); display: flex; align-items: center; justify-content: center; }
.lrow-ico svg { width: 22px; height: 22px; }
.lrow-ico.sm { width: 36px; height: 36px; border-radius: 12px; }
.lrow-ico.sm svg { width: 18px; height: 18px; }
.lrow .ava { width: 36px; height: 36px; font-size: 13px; background: var(--track); color: var(--ink); flex-shrink: 0; }
.lrow-x { width: 44px; height: 44px; border: 0; background: none; color: var(--ink-2); display: flex; align-items: center; justify-content: center; cursor: pointer; flex-shrink: 0; margin-right: -4px; }
.lrow-x svg { width: 20px; height: 20px; }
.tagx { height: 20px; padding: 0 7px; border-radius: 10px; background: var(--surface-2); color: var(--ink-2); font-size: 12px; font-weight: 600; display: inline-flex; align-items: center; white-space: nowrap; flex-shrink: 0; }
.tagx.red { background: var(--debt-bg); color: var(--debt-ink); }
.tagx.lg { height: 26px; padding: 0 10px; border-radius: 13px; font-size: 13px; gap: 5px; }
.tagx svg { width: 14px; height: 14px; }
.cnt-b { min-width: 20px; height: 20px; box-sizing: border-box; padding: 0 6px; border-radius: 10px; background: var(--sel); color: var(--sel-ink); font-size: 12px; font-weight: 600; display: inline-flex; align-items: center; justify-content: center; font-style: normal; }
.cnt-b.hot { background: var(--hot-dot); color: #fff; }
/* пара «подпись — значение» */
.kvl { background: var(--surface); border-radius: 16px; padding: 0 16px; display: flex; flex-direction: column; }
.kvr { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding: 14px 0; border: 0; border-bottom: 1px solid var(--line); background: none; font: inherit; color: inherit; width: 100%; text-align: left; text-decoration: none; }
.kvr:last-child { border-bottom: 0; }
.kvr > span:first-child { font-size: 14px; font-weight: 500; color: var(--muted); flex-shrink: 0; }
.kvr > span:last-child, .kvr > a:last-child { font-size: 15px; font-weight: 600; text-align: right; min-width: 0; word-break: break-word; }
.kvr.tap { align-items: center; cursor: pointer; }
.kvr.tap > span:last-child { display: inline-flex; align-items: center; gap: 4px; font-size: 14px; white-space: nowrap; }
.kvr a, a.ext-link { color: var(--link); text-decoration: underline; }
.kvr.total > span:first-child { font-size: 16px; font-weight: 600; color: var(--ink); }
.kvr .big { font-size: 20px; font-weight: 600; letter-spacing: -0.02em; color: var(--ink); }
.kv { gap: 0 14px; }
.kv dt, .kv dd { padding: 12px 0; border-bottom: 1px solid var(--line); }
.kv dt { font-weight: 500; }
.kv dd { font-size: 15px; font-weight: 600; }
.kv dt:last-of-type, .kv dd:last-of-type { border-bottom: 0; }
/* Свайп строки влево — в архив: строка остаётся строкой списка */
.lst .swipe { margin: 0; border-radius: 0; }
.lst .swipe > .card { margin: 0; border-radius: 0; box-shadow: none; }
.lst .swipe-bg { border-radius: 0; }
.swipe { border-radius: 16px; margin-bottom: 12px; }
.swipe-bg { border-radius: 16px; }
.swipe-bg .act-archive { background: #6b6b76; }
.swipe-bg .act-delete { background: #c5281c; }
.swipe-bg .act-restore { background: #15803d; }
.swipe-hint { display: none; }
/* Старые списки (.list-card) — к тем же правилам */
.list-card { padding: 0 12px 0 16px; }
.list-row { min-height: 60px; padding: 10px 0; }
.list-row b { font-size: 16px; font-weight: 600; display: flex; align-items: center; gap: 6px; }
.list-row b svg { width: 18px; height: 18px; flex: none; }
.list-row .small { font-size: 14px; font-weight: 500; }
.list-row > svg { opacity: 1; color: var(--muted); }
.list-row .count { min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; background: var(--sel); color: var(--sel-ink); font-size: 12px; font-weight: 600; display: inline-flex; align-items: center; justify-content: center; flex: none; }
.lr-time { font-size: 15px; min-width: 48px; }
.lr-time.hot, .task-row.over b { color: var(--hot); }
.lr-ico svg { color: var(--ink-2); }
.summary-line { display: none; }
.letter-head { display: none; }

/* ---------- Метки ---------- */
.chip { height: 20px; padding: 0 7px; border-radius: 10px; font-size: 12px; font-weight: 600; margin-top: 6px; gap: 4px; }
.chip::before { display: none; }
.chip.st { padding: 0 7px; background: var(--surface-2); color: var(--ink-2); }
.chip.st svg { display: none; }
.dl { background: none; padding: 0; margin: 0; border-radius: 0; font-size: 14px; font-weight: 500; color: var(--muted); }
.dl svg { display: none; }
.dl.hot, .dl.over { background: none; color: var(--hot); font-weight: 600; }
.rounds { height: 20px; padding: 0 7px; border-radius: 10px; background: var(--surface-2); color: var(--ink-2); font-size: 12px; font-weight: 600; margin: 0; }
.cat { height: 20px; padding: 0 7px; border-radius: 10px; font-size: 12px; font-weight: 600; display: inline-flex; align-items: center; }
.badge { min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; background: var(--sel); color: var(--sel-ink); }
.badge.hot { background: var(--hot-dot); color: #fff; }
.dot-hot { background: var(--hot-dot); }
.card.unconfirmed { box-shadow: none; }
.mat-card.need { border: 0; }

/* ---------- Шкала ---------- */
.bar6 { height: 6px; border-radius: 3px; background: var(--track); display: flex; overflow: hidden; }
.bar6 > i { display: block; border-radius: 3px; background: var(--sel); }
.dark-blk .bar6, .st-head .bar6 { background: var(--dark-line); }
.dark-blk .bar6 > i, .st-head .bar6 > i { background: var(--accent); }
.bar-row { display: flex; flex-direction: column; gap: 6px; }
.bar-cap { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; font-size: 14px; }
.bar-cap > span:first-child { font-weight: 600; }
.bar-cap > span:last-child { font-weight: 500; color: var(--muted); white-space: nowrap; }
.bar-cap b { font-weight: 600; color: var(--ink); }
.st-head .bar-cap > span:last-child, .dark-blk .bar-cap > span:last-child { color: var(--on-dark-muted); }
.st-head .bar-cap b, .dark-blk .bar-cap b { color: var(--on-dark); }

/* ---------- Пусто, загрузка ---------- */
.empty { padding: 20px 16px; font-size: 14px; font-weight: 500; text-align: left; background: var(--surface); border-radius: 16px; }
.empty .em-ico { display: none; }
.empty-cta { margin-top: 12px; }
.col .empty, .card .empty { padding: 12px 0; background: none; }
.skeleton { height: 72px; border-radius: 16px; margin-bottom: 12px; }

/* ---------- Нижняя панель: на всю ширину ---------- */
#tabbar {
  left: 0; right: 0; bottom: 0; height: auto; border-radius: 0; box-shadow: none;
  background: var(--nav); border-top: 1px solid var(--nav-line);
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 0;
  padding: 8px 8px calc(10px + env(safe-area-inset-bottom));
}
:root[data-theme="dark"] #tabbar { background: var(--nav); border: 0; border-top: 1px solid var(--nav-line); }
.tab-btn, #tabbar.many .tab-btn, #tabbar.lots .tab-btn {
  height: auto; min-height: 52px; min-width: 0; padding: 0; border-radius: 0; background: none;
  display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 3px;
  font-size: 11px; font-weight: 600; color: var(--on-dark-muted);
}
.tab-btn .tab-ico { width: 56px; height: 30px; border-radius: 15px; display: flex; align-items: center; justify-content: center; position: relative; }
.tab-btn svg { width: 22px; height: 22px; }
.tab-btn .tab-label, #tabbar.lots .tab-btn.active .tab-label { display: block; font-size: 11px; }
.tab-btn.active { background: none; color: #ffffff; font-weight: 600; }
.tab-btn.active .tab-ico { background: var(--accent); color: var(--accent-ink); }
.tab-badge { top: -2px; right: 50%; margin-right: -30px; min-width: 18px; height: 18px; border-radius: 9px; background: #ffffff; color: #111113; font-size: 11px; box-shadow: 0 0 0 2px var(--nav); }
.tab-badge.hot { background: var(--hot-dot); color: #fff; }
#toast { bottom: calc(92px + env(safe-area-inset-bottom)); border-radius: 14px; }
#toast u { color: var(--accent); }
:root[data-theme="dark"] #toast u { color: #111113; text-decoration: underline; }
body.strict #tabbar, body.strict .tab-btn { border-radius: 0 !important; }
body.strict .tab-btn .tab-ico { border-radius: 8px; }

/* ---------- Шторка ---------- */
.sheet-back { background: rgba(0, 0, 0, 0.45); }
.sheet { border-radius: 28px 28px 0 0; padding: 10px 16px calc(28px + env(safe-area-inset-bottom)); max-height: 88vh; }
.sheet .grip { background: var(--axis); margin: 0 auto; }
.sheet h3 { margin: 0; padding: 14px 4px 10px; font-size: 20px; font-weight: 600; letter-spacing: -0.01em; }
.sheet .sheet-sub { padding: 0 4px 16px; margin-top: -8px; font-size: 14px; font-weight: 500; color: var(--muted); }
.sheet-list { gap: 0; }
.sheet-item { background: none; border-radius: 0; min-height: 56px; padding: 6px 4px; font-size: 16px; font-weight: 600; border-bottom: 1px solid var(--line); }
.sheet-item:last-child { border-bottom: 0; }
.sheet-item.on, :root[data-theme="dark"] .sheet-item.on { background: none; color: var(--ink); font-weight: 600; }
.sheet-item.on::after { content: ""; margin-left: auto; width: 8px; height: 8px; border-radius: 4px; background: var(--ink); flex: none; }
.sheet-item.rich { min-height: 68px; gap: 12px; }
.sheet-item.rich .lrow-t { font-size: 16px; font-weight: 600; }
.sheet-cancel { margin-top: 12px; height: 48px; width: 100%; border: 0; border-radius: 14px; background: var(--surface-2); color: var(--ink); font: inherit; font-size: 15px; font-weight: 600; cursor: pointer; }
.sheet-form .btn.block, .sheet .btn-main { margin-top: 20px; height: 52px; width: 100%; border: 0; border-radius: 16px; background: var(--accent); color: var(--accent-ink); font: inherit; font-size: 16px; font-weight: 600; cursor: pointer; }
:root[data-theme="dark"] .sheet-form .btn.block { background: var(--accent); color: var(--accent-ink); }
.sheet .fld { display: flex; flex-direction: column; gap: 6px; margin-top: 14px; }
.sheet .fld:first-of-type { margin-top: 0; }
.sheet .fld > span { padding-left: 4px; font-size: 13px; font-weight: 600; color: var(--muted); }
.sheet .fld input.lg { font-size: 18px; font-weight: 600; }
.sheet .fld-note { padding: 6px 4px 0; font-size: 13px; font-weight: 500; color: var(--muted); }
.sheet .qbtns { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.sheet .sheet-total { margin-top: 16px; padding: 12px 4px 0; border-top: 1px solid var(--line); display: flex; justify-content: space-between; align-items: baseline; gap: 12px; font-size: 14px; }
.sheet .sheet-total > span:first-child { font-weight: 500; color: var(--muted); }
.sheet .sheet-total > span:last-child { font-weight: 600; white-space: nowrap; }
.sheet .sheet-hist { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: 10px; }
.sheet .sheet-hist .row2 { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; font-size: 15px; }
.sheet .sheet-hist .row2 > span:last-child { font-weight: 600; white-space: nowrap; }
.stepper { height: 52px; box-sizing: border-box; padding: 0 4px; border-radius: 14px; background: var(--surface-2); display: flex; align-items: center; justify-content: space-between; }
.stepper button { width: 44px; height: 44px; border: 0; border-radius: 12px; background: var(--surface); color: var(--ink); display: flex; align-items: center; justify-content: center; cursor: pointer; }
.stepper button svg { width: 20px; height: 20px; }
.stepper b { font-size: 18px; font-weight: 600; }
.check-line { margin-top: 16px; padding: 12px 4px 0; border-top: 1px solid var(--line); display: flex; align-items: center; gap: 12px; min-height: 44px; font-size: 15px; font-weight: 600; cursor: pointer; }
.check-line input { width: 22px; height: 22px; margin: 0; accent-color: var(--ink); flex: none; }

/* ---------- «Сегодня» ---------- */
.today-date { display: none; }
.cnts { margin: 0; padding: 4px 4px 16px; display: flex; align-items: center; gap: 12px; font-size: 19px; line-height: 1.3; font-weight: 600; letter-spacing: -0.02em; white-space: nowrap; overflow-x: auto; scrollbar-width: none; }
.cnts::-webkit-scrollbar { display: none; }
.cnts > span { display: inline-flex; align-items: center; gap: 6px; flex-shrink: 0; }
.cnts i { font-style: normal; min-width: 12px; padding: 0 7px; border-radius: 7px; background: var(--accent); color: var(--accent-ink); text-align: center; }
.cnts.calm { color: var(--muted); font-size: 15px; font-weight: 600; letter-spacing: 0; }
.tline { display: flex; flex-direction: column; }
.tl-row { display: flex; align-items: stretch; gap: 10px; min-height: 52px; }
.tl-time { width: 44px; flex-shrink: 0; padding-top: 6px; font-size: 14px; font-weight: 600; font-variant-numeric: tabular-nums; text-align: right; }
.tl-time.hot { color: var(--hot); }
.tl-axis { width: 12px; flex-shrink: 0; display: flex; flex-direction: column; align-items: center; }
.tl-axis::before { content: ""; width: 2px; height: 10px; background: var(--axis); }
.tl-axis::after { content: ""; width: 2px; flex-grow: 1; background: var(--axis); }
.tl-row:first-child .tl-axis::before { background: transparent; }
.tl-row:last-child .tl-axis::after { background: transparent; }
.tl-axis i { width: 10px; height: 10px; border-radius: 5px; background: var(--ink); flex: none; }
.tl-axis i.hot { background: var(--hot-dot); }
.tl-axis i.ring { box-sizing: border-box; background: var(--bg); border: 2px solid var(--ink); }
.tl-body { flex: 1 1 0; min-width: 0; padding: 4px 0 10px; display: flex; flex-direction: column; gap: 1px; border: 0; background: none; font: inherit; color: inherit; text-align: left; cursor: pointer; }
.tl-row.card-row .tl-time { padding-top: 14px; }
.tl-row.card-row .tl-axis::before { height: 18px; }
.tl-row.card-row .tl-body { padding: 0 0 10px; }
.tl-card { width: 100%; box-sizing: border-box; display: flex; align-items: center; gap: 12px; padding: 12px 12px 12px 16px; border: 0; border-radius: 16px; background: var(--surface); color: inherit; font: inherit; text-align: left; cursor: pointer; }
.tl-card .lrow-ico { width: 40px; height: 40px; border-radius: 12px; background: var(--bg); }
.tl-now { min-height: 30px; }
.tl-now .tl-time { font-size: 13px; padding-top: 5px; }
.tl-now .tl-axis::before { height: 8px; }
.tl-now .tl-axis i { width: 12px; height: 12px; box-sizing: border-box; border-radius: 6px; border: 3px solid var(--ink); background: var(--accent); }
.tl-now .tl-body { flex-direction: row; align-items: center; gap: 8px; padding: 2px 0 8px; cursor: default; }
.tl-now .tl-body span { height: 22px; padding: 0 10px; border-radius: 11px; background: var(--ink); color: var(--bg); font-size: 12px; font-weight: 600; display: flex; align-items: center; }
.tl-now .tl-body::after { content: ""; flex-grow: 1; height: 1px; background: var(--axis); }
.month-line { margin: 16px 0 0; min-height: 48px; box-sizing: border-box; padding: 0 4px; border: 0; border-top: 1px solid var(--axis); background: none; display: flex; align-items: center; gap: 10px; width: 100%; font: inherit; color: inherit; text-align: left; cursor: pointer; }
.month-line > span:first-child { flex-grow: 1; font-size: 15px; font-weight: 500; color: var(--muted); }
.month-line b { font-weight: 600; color: var(--ink); }
.delta { display: inline-flex; align-items: center; gap: 3px; font-size: 14px; font-weight: 600; white-space: nowrap; }
.delta svg { width: 14px; height: 14px; stroke-width: 2.6; }
.delta.up { color: var(--up); }
.delta.down { color: var(--debt-ink); }
.delta.flat { color: var(--muted); }
.shoot-panel { background: none; box-shadow: none; padding: 0; margin: 14px 0 0; border-radius: 0; color: inherit; }
.view-host > .shoot-panel { background: var(--surface); border-radius: 16px; padding: 16px; margin: 0 0 12px; }
.today-shoot .shoot-panel { margin: 14px 0 0; }
.sp-btn { margin-top: 10px !important; }
.card.attn { padding: 0 12px 0 16px; }
.confirm-card .row { margin-top: 12px; }

/* ---------- Проекты: «горят», доска ---------- */
.dark-blk.list { padding: 6px 0 2px; }
.dark-blk.list .grp { padding: 12px 20px 6px; color: var(--hot-on-dark); display: flex; justify-content: flex-start; align-items: center; gap: 6px; }
.dark-blk.list .grp svg { width: 15px; height: 15px; stroke-width: 2.2; }
.dark-blk.list .lrow { background: none; border-bottom-color: var(--dark-btn); padding: 12px 14px 12px 20px; color: var(--on-dark); }
.dark-blk.list .lrow:last-child { border-bottom: 0; }
.dark-blk.list .lrow-s { color: var(--on-dark-muted); }
.dark-blk.list .lrow-s .hot { color: var(--hot-on-dark); }
.dark-blk.list .swipe > .card { background: var(--dark); }
.stiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; margin-top: 16px; }
.stile { height: 64px; padding: 0; border: 0; border-radius: 16px; background: var(--surface); color: var(--ink); font: inherit; cursor: pointer; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; }
.stile b { font-size: 20px; line-height: 1.1; font-weight: 600; }
.stile span { font-size: 12px; font-weight: 600; color: var(--muted); }
.stile.active { background: var(--dark); color: #ffffff; box-shadow: inset 0 0 0 1px var(--dark-edge); }
.stile.active b { color: var(--accent); }
.stile.active span { color: #ffffff; font-weight: 600; }
.stile.drop { box-shadow: inset 0 0 0 2px var(--ink); }
.drag-handle { width: 44px; height: 44px; margin: 0 -8px 0 0; border-radius: 0; color: var(--faint); }
.drag-handle svg { width: 20px; height: 20px; }
.swipe.dragging > .card { box-shadow: 0 10px 30px rgba(0, 0, 0, 0.18); transform: none; }
.board-dots, .board { display: none; }

/* ---------- Календарь ---------- */
.cal-card { padding: 8px 10px 14px; border-radius: 24px; margin: 16px 0 0; }
.cal-nav { margin: 0; }
.cal-nav h2 { font-size: 17px; letter-spacing: -0.01em; }
.cal-nav .icon-btn { width: 44px; height: 44px; background: none; }
.cal-grid { gap: 0; }
.cal-wd { font-size: 12px; font-weight: 600; text-transform: none; padding: 4px 0 2px; }
.cal-day { aspect-ratio: auto; height: 44px; border-radius: 0; gap: 2px; font-size: 15px; font-weight: 600; background: none !important; color: var(--ink); }
.cal-day > span:first-child { width: 32px; height: 30px; border-radius: 15px; display: flex; align-items: center; justify-content: center; }
.cal-day.out { color: var(--faint); opacity: 1; }
.cal-day.today { font-weight: 600; }
.cal-day.today > span:first-child { background: var(--accent); color: var(--accent-ink); }
.cal-day.sel > span:first-child { box-shadow: inset 0 0 0 2px var(--ink); }
.cal-day.today.sel > span:first-child { box-shadow: none; }
.cal-marks { gap: 3px; height: 6px; }
.cal-marks i, .cal-legend i { width: 5px; height: 5px; border-radius: 3px; background: var(--ink) !important; }
.cal-marks i.c-dl, .cal-legend i.c-dl { width: 9px; height: 3px; border-radius: 2px; background: var(--hot) !important; }
.cal-marks i.c-mt, .cal-legend i.c-mt { width: 6px; height: 6px; box-sizing: border-box; border-radius: 3px; border: 1.5px solid var(--ink); background: none !important; }
.cal-marks b { font-size: 12px; line-height: 6px; }
.cal-legend { gap: 16px; margin: 10px 10px 0; font-size: 12px; font-weight: 600; }

/* ---------- Клиент, проект ---------- */
.dk-name { font-size: 24px; line-height: 1.2; font-weight: 600; letter-spacing: -0.02em; }
.note-row { display: flex; flex-direction: column; gap: 2px; padding: 12px 16px; border: 0; border-bottom: 1px solid var(--line); background: none; font: inherit; color: inherit; text-align: left; width: 100%; cursor: pointer; }
.note-row > span:first-child { font-size: 15px; font-weight: 500; white-space: pre-wrap; word-break: break-word; }
.note-row > span:last-child { font-size: 13px; font-weight: 500; color: var(--muted); }
.two-acts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.two-acts button { min-height: 52px; border: 0; background: none; color: var(--ink); font: inherit; font-size: 15px; font-weight: 600; display: flex; align-items: center; justify-content: center; gap: 6px; cursor: pointer; }
.two-acts button:first-child { border-right: 1px solid var(--line); }
.two-acts button svg { width: 18px; height: 18px; stroke-width: 2.2; }
.proj-tabs { margin: 0 0 12px !important; }
.main-action { margin: 0; height: 48px; font-size: 15px; }
.pay-blk { background: var(--surface); border-radius: 16px; padding: 16px; display: flex; flex-direction: column; gap: 10px; }
.pay-top { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; font-size: 14px; font-weight: 500; color: var(--muted); }
.pay-top b { font-size: 22px; font-weight: 600; letter-spacing: -0.02em; color: var(--ink); }
.pay-top > span:last-child { font-size: 15px; font-weight: 600; color: var(--ink); }
.pay-acts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 2px; }
.team-card { padding: 0 !important; }
.timeline::before { background: var(--line); }
.tl-item::before { border-width: 2px; width: 12px; height: 12px; left: -23px; background: var(--surface); }
.tl-item:last-child::before { background: var(--ink); border-color: var(--ink); }
.tl-title { font-size: 15px; font-weight: 600; }
.tl-meta { font-size: 13px; font-weight: 500; }
.revision-box { background: var(--debt-bg); }
.revision-box .rb-title { color: var(--debt-ink); }

/* ---------- Чаты ---------- */
.ai-row { margin: 16px 0 0; padding: 14px 12px 14px 16px; border-radius: 24px; background: var(--dark); color: var(--on-dark); box-shadow: inset 0 0 0 1px var(--dark-edge); display: flex; align-items: center; gap: 12px; border: 0; width: 100%; font: inherit; text-align: left; cursor: pointer; box-sizing: border-box; }
.ai-row .lrow-ico { width: 46px; height: 46px; border-radius: 16px; background: var(--dark-btn); color: var(--accent); }
.ai-row .lrow-s { color: var(--on-dark-muted); white-space: normal; }
.ai-row .chev { color: var(--on-dark-muted); }
.lrow.chat { min-height: 68px; padding: 8px 14px 8px 12px; }
.msg, .msg-in { box-shadow: none; }
.msg.tagged { box-shadow: 0 0 0 2px var(--hot-dot) inset; }
.msg.mine, .msg-out { background: var(--dark); color: var(--on-dark); }
:root[data-theme="dark"] .msg.mine { background: #2a2a31; color: #f1f1f4; }

/* ---------- «Ещё» ---------- */
.prof { padding: 16px; gap: 14px; }
.prof-top { display: flex; align-items: center; gap: 12px; }
.prof-ava { width: 48px; height: 48px; flex-shrink: 0; border-radius: 24px; background: var(--accent); color: var(--accent-ink); font-size: 16px; font-weight: 600; display: flex; align-items: center; justify-content: center; position: relative; overflow: hidden; }
.prof-ava img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.prof-name { font-size: 17px; font-weight: 600; }
.prof-btns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.prof-btns .dk-btn { height: 44px; border-radius: 12px; font-size: 14px; padding: 0 8px; }
.mtiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 12px; }
.mtile { height: 76px; box-sizing: border-box; padding: 12px; border: 0; border-radius: 16px; background: var(--surface); color: var(--ink); font: inherit; text-align: left; cursor: pointer; display: flex; flex-direction: column; justify-content: space-between; }
.mtile b { font-size: 22px; line-height: 1; font-weight: 600; }
.mtile svg { width: 22px; height: 22px; }
.mtile span { font-size: 13px; font-weight: 600; }
.lrow.danger { color: var(--hot); }

/* ---------- Статистика ---------- */
.st-head { margin: 0 -16px; padding: 4px 20px 24px; border-radius: 0 0 28px 28px; background: var(--dark); color: var(--on-dark); display: flex; flex-direction: column; }
.st-big { margin-top: 2px; font-size: 46px; line-height: 1.08; font-weight: 600; letter-spacing: -0.035em; white-space: nowrap; }
.st-big.md { font-size: 38px; }
.st-delta { margin-top: 10px; display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 500; color: var(--on-dark-muted); }
.st-delta .pilld { height: 26px; padding: 0 10px 0 7px; border-radius: 13px; background: var(--accent); color: var(--accent-ink); font-size: 13px; font-weight: 600; display: inline-flex; align-items: center; gap: 3px; }
.st-delta .pilld.down { background: var(--dark-btn); color: var(--hot-on-dark); }
.st-delta .pilld svg { width: 14px; height: 14px; stroke-width: 2.6; }
.st-cols { margin-top: 22px; height: 132px; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); align-items: end; border-bottom: 1px solid var(--dark-line); }
.st-col { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 4px; height: 100%; border: 0; background: none; padding: 0; color: inherit; font: inherit; cursor: pointer; }
.st-col i { display: block; width: 24px; border-radius: 4px 4px 0 0; background: #6a6a76; min-height: 2px; }
.st-col.sel i { background: var(--accent); }
.st-col span { font-size: 12px; font-weight: 600; white-space: nowrap; visibility: hidden; }
.st-col.sel span { visibility: visible; }
.st-x { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); padding-top: 6px; font-size: 12px; font-weight: 600; color: var(--on-dark-muted); text-align: center; }
.st-x .sel { color: var(--on-dark); font-weight: 600; }
.st-plan { margin-top: 20px; padding-top: 14px; border-top: 1px solid var(--dark-line); display: flex; flex-direction: column; gap: 12px; }
.st-plan-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.st-plan-top > span { font-size: 13px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--on-dark-muted); }
.st-kpis { margin: 8px 4px 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.st-kpi { padding: 16px 12px 16px 0; display: flex; flex-direction: column; border-bottom: 1px solid var(--axis); min-width: 0; }
.st-kpi:nth-child(odd) { border-right: 1px solid var(--axis); }
.st-kpi:nth-child(even) { padding: 16px 0 16px 20px; }
.st-kpi:nth-last-child(-n + 2) { border-bottom: 0; }
.st-kpi b { font-size: 36px; line-height: 1.1; font-weight: 600; letter-spacing: -0.03em; white-space: nowrap; }
.st-kpi > span { font-size: 14px; font-weight: 600; color: var(--ink-2); }
.st-kpi .delta { margin-top: 2px; font-size: 13px; }
.st-kpi small { font-size: 13px; font-weight: 500; color: var(--muted); }
.st-card { margin-top: 12px; padding: 20px; border-radius: 24px; background: var(--surface); display: flex; flex-direction: column; }
.st-card h2 { margin: 0; font-size: 17px; font-weight: 600; letter-spacing: -0.01em; }
.st-card-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.st-card-top > span { font-size: 13px; font-weight: 600; color: var(--muted); }
.stagebar { display: flex; gap: 2px; height: 32px; font-size: 14px; font-weight: 600; margin-top: 14px; border-radius: 6px; overflow: hidden; }
.stagebar > div { flex-basis: 0; min-width: 24px; display: flex; align-items: center; justify-content: center; }
.stage-legend { display: flex; flex-wrap: wrap; column-gap: 14px; row-gap: 6px; margin-top: 14px; font-size: 13px; font-weight: 600; color: var(--ink-2); }
.stage-legend span { display: inline-flex; align-items: center; gap: 6px; }
.stage-legend i { width: 10px; height: 10px; border-radius: 3px; }
.fun { margin-top: 16px; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.fun-cap { font-size: 13px; font-weight: 600; color: var(--ink-2); margin-top: 8px; }
.fun-cap:first-child { margin-top: 0; }
.fun-cap span { color: var(--muted); font-weight: 500; }
.fun-bar { height: 36px; min-width: 44px; border-radius: 10px; background: var(--sel); color: var(--sel-ink); font-size: 15px; font-weight: 600; display: flex; align-items: center; justify-content: center; }
.fun-note { margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--line); font-size: 13px; font-weight: 500; color: var(--muted); }
.kpi-inline { margin-top: 4px; display: flex; align-items: baseline; gap: 8px; font-size: 14px; font-weight: 500; color: var(--muted); }
.kpi-inline b { font-size: 36px; line-height: 1.1; font-weight: 600; letter-spacing: -0.03em; color: var(--ink); }
.src-rows { display: flex; flex-direction: column; gap: 16px; margin-top: 16px; }
.src-row { display: flex; flex-direction: column; gap: 6px; }
.src-row .bar-cap > span { font-size: 15px; }
.src-row .bar-cap > span:last-child { font-weight: 600; color: var(--ink); }
.src-bar { height: 10px; display: flex; }
.src-bar i { display: block; min-width: 3px; border-radius: 0 4px 4px 0; background: var(--sel); }
.src-row small { font-size: 13px; font-weight: 500; color: var(--muted); }
.st-two { margin-top: 12px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.st-two button { padding: 16px; border: 0; border-radius: 24px; background: var(--surface); color: inherit; font: inherit; text-align: left; display: flex; flex-direction: column; gap: 4px; cursor: pointer; min-width: 0; }
.st-two .cap { font-size: 13px; font-weight: 600; color: var(--muted); }
.st-two b { font-size: 22px; line-height: 1.15; font-weight: 600; letter-spacing: -0.02em; white-space: nowrap; }
.st-two .bar6 { margin-top: 6px; }
.st-two small { font-size: 12px; font-weight: 600; color: var(--muted); }
.tiles { gap: 12px; margin-bottom: 12px; }
.tile { border-radius: 16px; box-shadow: none; padding: 16px; }
.tile .t-label { font-size: 13px; font-weight: 600; }
.tile .t-value { font-size: 24px; }
.month-switch .icon-btn { width: 44px; height: 44px; }
.funnel-bar { height: 6px; border-radius: 3px; background: var(--track); }
.funnel-bar i, :root[data-theme="dark"] .funnel-bar i { background: var(--sel); border-radius: 3px; }
.chart-col i, :root[data-theme="dark"] .chart-col i { background: var(--axis); }
.chart-col.sel i, :root[data-theme="dark"] .chart-col.sel i { background: var(--sel); }

/* ---------- Прочее: всё, что было с тенями и «плавало» ---------- */
#ptr, .home-chip button#home-x, .tile, .pill, .msg, .composer .icon-btn, .shoot-panel { box-shadow: none; }
.home-chip { display: none; }
.date-tile { border-radius: 12px; }
.date-tile.today, .date-tile.soon { background: var(--surface-2); color: var(--ink); box-shadow: none; }
.date-tile.soon .m, .date-tile.soon .t { color: var(--muted); }
.pcard-name { font-size: 16px; font-weight: 600; }
.pcard-meta { font-size: 14px; font-weight: 500; }
.done-pop { background: var(--sel); color: var(--sel-ink); }
.web-login .wl-logo { background: var(--dark); }
body.compact .lrow { min-height: 52px; padding-top: 6px; padding-bottom: 6px; }
body.compact .list-row { min-height: 52px; padding: 6px 0; }
body.strict .lst, body.strict .kvl, body.strict .dark-blk, body.strict .st-card, body.strict .lbtn, body.strict .dk-btn, body.strict .seg-main, body.strict .seg-main button,
body.strict .stile, body.strict .mtile, body.strict .tl-card, body.strict .pay-blk, body.strict .ai-row, body.strict .st-two button, body.strict .searchbar { border-radius: 8px !important; }
@media (min-width: 820px) {
  #tabbar { left: calc(50% - 360px); right: calc(50% - 360px); border-radius: 20px 20px 0 0; }
  #view { padding-bottom: calc(110px + env(safe-area-inset-bottom)); }
}
@media (min-width: 1200px) {
  #tabbar { left: calc(50% - 410px); right: calc(50% - 410px); }
}

/* ---------- 2.0: мелочи ---------- */
.card.lrow { border-radius: 0; margin: 0; box-shadow: none; }
.lst > .card.lrow:last-child { border-bottom: 0; }
.seg-main.scroll { grid-auto-columns: max-content; overflow-x: auto; scrollbar-width: none; margin: 0 -16px; padding: 4px 16px; background: none; border-radius: 0; gap: 6px; }
.seg-main.scroll::-webkit-scrollbar { display: none; }
.seg-main.scroll button { padding: 0 14px; height: 44px; border-radius: 22px; background: var(--surface); }
.seg-main.scroll button.active { background: var(--sel); }
.dark-blk .lrow-s .hot, .dark-blk .dk-sub .hot, .hero .dk-sub .hot { color: var(--hot-on-dark); }
.dark-blk[data-open] { cursor: pointer; }
.bk-ico { width: 44px; height: 44px; border-radius: 14px; background: var(--surface-2); display: flex; align-items: center; justify-content: center; }
.bk-ico svg { width: 22px; height: 22px; }
.todo-ring { display: inline-block; width: 16px; height: 16px; box-sizing: border-box; border: 2px solid var(--axis); border-radius: 8px; flex: none; }
.sd i { font-size: 12px; font-weight: 600; color: var(--muted); }
.conf { font-size: 13px; }
.lrow .link-btn { font-size: 14px; }
.lrow[hidden], .mtiles[hidden] { display: none; }
.kvl + .section-head, .lst + .section-head, .pay-blk + .grp { margin-top: 16px; }
.blacklist-card { background: var(--debt-bg); color: var(--debt-ink); }
.hdr-title .studio-logo { width: 32px; height: 32px; }
#hdr-add svg { stroke-width: 2.2; }
.sp-timer { font-variant-numeric: tabular-nums; }
.dark-blk.list { overflow: hidden; }
.dark-blk.list .swipe { margin: 0; border-radius: 0; }
.dark-blk.list .swipe-bg { border-radius: 0; }
.today-actions + .card.attn { margin-top: 16px; }
[data-pane]:not([hidden]) { display: flex; flex-direction: column; }
[data-pane] > .ov-base { order: -1; margin-bottom: 12px; }
[data-pane] > .section-head { margin-top: 4px; }

/* ---------- 2.1: техника и расходы компании ---------- */
.lrow-note { flex-shrink: 1; min-width: 0; font-size: 13px; font-weight: 500; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#gear-block:empty { display: none; }
#gear-block .grp { padding-top: 16px; }
.gear-foot { color: var(--ink); }
.gear-foot .lrow-main { flex: 0 0 auto; white-space: nowrap; }
.gear-foot .lrow-note { flex: 1 1 0; text-align: right; }
.gear-sum { padding: 14px 4px 0; font-size: 14px; font-weight: 500; color: var(--muted); }
.gear-sum b { font-weight: 600; color: var(--ink); }
.lrow-side .gear-free { font-size: 15px; font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; }
.qty-list { display: flex; flex-direction: column; margin-top: 6px; }
.qty-row { display: flex; align-items: center; gap: 12px; min-height: 64px; padding: 0 4px; border-bottom: 1px solid var(--line); }
.qty-row:last-child { border-bottom: 0; }
.qty-row input[type="checkbox"] { width: 26px; height: 26px; margin: 0 9px; flex: none; accent-color: var(--ink); }
label.qty-row { cursor: pointer; }
.qty-step { flex: none; display: flex; align-items: center; gap: 2px; }
.qty-step button { width: 44px; height: 44px; border: 0; border-radius: 12px; background: var(--surface-2); color: var(--ink); display: flex; align-items: center; justify-content: center; cursor: pointer; }
.qty-step button:disabled { color: var(--faint); cursor: default; }
.qty-step button svg { width: 18px; height: 18px; stroke-width: 2.4; }
.qty-step b { width: 32px; text-align: center; font-size: 17px; font-weight: 600; font-variant-numeric: tabular-nums; }
.qty-step b.zero { color: var(--muted); }
.qty-none { flex: none; font-size: 13px; font-weight: 600; color: var(--muted); }
.ql-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 0 4px 8px; margin-top: -8px; font-size: 14px; font-weight: 600; color: var(--ink-2); }
.ql-head .link-btn { min-height: 44px; font-size: 14px; font-weight: 600; white-space: nowrap; }
.searchbar.soft { background: var(--surface-2); }
.sheet-headrow { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.sheet-headrow h3 { flex: 1; min-width: 0; }
.gr-problem { display: flex; align-items: center; gap: 10px; min-height: 52px; width: 100%; padding: 0 4px; border: 0; border-top: 1px solid var(--line); background: none; color: var(--ink); font: inherit; font-size: 15px; font-weight: 600; text-align: left; cursor: pointer; }
.gr-problem svg { width: 20px; height: 20px; flex: none; }
.sheet .sheet-total { margin-top: 4px; }
.sheet-cancel.danger { background: none; color: var(--hot); }
.gear-missing { margin-bottom: 4px; padding: 4px 12px 0; border-radius: 14px; background: var(--debt-bg); }
.gear-missing .gm-row { display: flex; min-height: 52px; align-items: center; }
.gear-missing .lrow-s { color: var(--debt-ink); }
.gear-missing .lbtn { background: var(--surface); }
.check-line.plain { margin-top: 14px; padding-top: 0; border-top: 0; }
.sheet .fld-note.sheet-rule { margin-top: 8px; padding-top: 12px; border-top: 1px solid var(--line); }
.ce-head { gap: 0; }
.ce-head .dk-top { align-items: center; }
.ce-month { height: 44px; padding: 0 12px 0 16px; border-radius: 22px; gap: 4px; flex: none; }
.ce-head .st-big { margin-top: 2px; }
.ce-sub { margin-top: 6px; display: flex; align-items: center; flex-wrap: wrap; gap: 0 4px; }
.ce-delta { display: inline-flex; align-items: center; gap: 4px; font-weight: 600; }
.ce-delta svg { width: 15px; height: 15px; stroke-width: 2.4; }
.ce-delta.more { color: var(--hot-on-dark); }
.ce-delta.less { color: var(--on-dark); }
.ce-cols { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--dark-line); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ce-cols > div { display: flex; flex-direction: column; min-width: 0; }
.ce-cols > div:first-child { padding-right: 12px; border-right: 1px solid var(--dark-line); }
.ce-cols > div:last-child { padding-left: 16px; }
.ce-cols span { font-size: 12px; font-weight: 600; color: var(--on-dark-muted); }
.ce-cols b { font-size: 20px; line-height: 1.2; font-weight: 600; white-space: nowrap; }
.ce-cols b.neg { color: var(--hot-on-dark); }
.st-card .fld-note.ce-note { margin-top: 16px; padding: 12px 0 0; border-top: 1px solid var(--line); font-size: 13px; font-weight: 500; color: var(--muted); }
.grp + .st-card { margin-top: 0; border-radius: 16px; padding: 18px 16px; }

/* ---------- 2.2: вход по коду ---------- */
.wl-or { display: flex; align-items: center; gap: 12px; margin: 22px 0 12px; font-size: 13px; font-weight: 600; color: var(--muted); }
.wl-or::before, .wl-or::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.wl-code { display: flex; flex-direction: column; gap: 10px; }
.wl-code input { height: 52px; text-align: center; font-size: 20px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; font-variant-numeric: tabular-nums; }
.wl-code input::placeholder { font-weight: 600; letter-spacing: 0.14em; color: var(--faint); }
.code-big { margin: 4px 0 16px; padding: 18px 12px; border-radius: 16px; background: var(--surface-2); text-align: center; font-size: 32px; line-height: 1.2; font-weight: 600; letter-spacing: 0.12em; font-variant-numeric: tabular-nums; user-select: all; -webkit-user-select: all; }

/* ---------- 2.3: длинные подписи на кнопках, съёмочные дни, несколько съёмок в ближайший день ---------- */
/* Подпись не обрезается: если не помещается в строку — переносится на вторую */
.dk-btn { white-space: normal; text-align: center; line-height: 1.15; height: auto; min-height: 48px; padding: 6px 14px; }
.dk-btn.main { overflow: visible; text-overflow: clip; }
.dk-btns .dk-btn:not(.sq) { flex: 1 1 0; }
.lbtn { white-space: nowrap; }
.day-of { color: var(--muted); white-space: nowrap; }
#days-block .lrow.cur { background: var(--surface-2); cursor: default; }
#days-block .lrow-side .hot { color: var(--hot); font-weight: 600; }
.today-shoot.multi { gap: 0; }
.hero-shoots { display: flex; flex-direction: column; margin-top: 12px; border-top: 1px solid var(--dark-line); }
.hero-shoot { display: flex; align-items: center; gap: 14px; min-height: 60px; padding: 8px 0; border: 0; border-bottom: 1px solid var(--dark-line); background: none; color: var(--on-dark); font: inherit; text-align: left; cursor: pointer; }
.hero-shoot:last-child { border-bottom: 0; padding-bottom: 0; }
.hero-shoot > b { flex: none; width: 48px; font-size: 17px; font-weight: 600; font-variant-numeric: tabular-nums; }
.hero-shoot > span { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.hero-shoot .hs-t { font-size: 16px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hero-shoot .hs-s { font-size: 13px; font-weight: 500; color: var(--on-dark-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hero-shoot svg { width: 18px; height: 18px; flex: none; color: var(--on-dark-muted); }
.hero-shoot .hs-hot svg { color: var(--hot-on-dark); }

/* Строка «Деньги» на обзоре проекта: длинное значение переносится, а не обрезается */
#ov-money > span:last-child { display: flex; align-items: center; justify-content: flex-end; gap: 4px; min-width: 0; }
#ov-money-v { white-space: normal; text-align: right; }

/* 2.4: справочники косяков и бонусов — текст целиком, переносится */
.dict-row .lrow-t > span:first-child { white-space: normal; overflow: visible; text-overflow: clip; font-size: 15px; line-height: 1.3; }
.dict-row .lrow-s { white-space: normal; }
.dict-row.off .lrow-t { color: var(--muted); }
.lvl { font-weight: 600; }
.lvl-1 { color: var(--muted); } .lvl-2 { color: #d98a00; } .lvl-3, .lvl-4 { color: var(--hot); }
.pills.wrap { flex-wrap: wrap; overflow: visible; margin: 0; padding: 0; }
.pills.wrap .pill { height: 36px; padding: 0 14px; }

/* 2.4: график — календарь месяца с понедельника */
.sched-cal { padding: 12px 10px; }
.sched-grid.head { margin-bottom: 6px; }
.sched-grid.head span { text-align: center; font-size: 12px; font-weight: 600; color: var(--muted); }
.sched-grid.head span.we { color: var(--hot); opacity: .7; }
.sched-grid .sd.cal { height: auto; min-height: 50px; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; padding: 6px 2px 4px; gap: 2px; }
.sched-grid .sd.cal .n { font-size: 15px; font-weight: 600; line-height: 1.1; }
.sched-grid .sd.cal .tag { font-size: 9px; font-weight: 600; line-height: 1.1; text-transform: lowercase; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sched-grid .sd.cal .who { display: flex; flex-wrap: wrap; justify-content: center; gap: 2px; }
.sched-grid .sd.cal .who i { position: static; font-style: normal; font-size: 9px; font-weight: 600; line-height: 14px; min-width: 14px; padding: 0 2px; border-radius: 7px; background: var(--track); color: var(--ink); }
.sched-grid .sd.cal .who i.off { background: var(--st-orange-bg); color: var(--st-orange); }
.sched-grid .sd.cal .who i.vacation { background: var(--st-green-bg); color: var(--st-green); }
.sched-grid .sd.cal .who i.sick { background: var(--st-red-bg); color: var(--st-red); }
.sched-legend { display: flex; gap: 14px; justify-content: center; margin-top: 10px; font-size: 12px; color: var(--muted); font-weight: 600; }
.sched-legend i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 5px; vertical-align: -1px; }
.sched-legend i.off { background: var(--st-orange); } .sched-legend i.vacation { background: var(--st-green); } .sched-legend i.sick { background: var(--st-red); }
.lrow-s.wrap { white-space: normal; }

/* 2.4: протяжка по нижней панели — подсвечивается только иконка, как у активной вкладки, а не вся кнопка */
#tabbar.scrubbing .tab-btn, #tabbar.scrubbing .tab-btn.active, #tabbar.scrubbing .tab-btn.scrub { background: none; transform: none; }
#tabbar.scrubbing .tab-btn.active:not(.scrub) { color: var(--on-dark-muted); font-weight: 600; }
#tabbar.scrubbing .tab-btn.active:not(.scrub) .tab-ico { background: transparent; color: inherit; }
#tabbar.scrubbing .tab-btn.scrub { color: #ffffff; font-weight: 600; }
#tabbar.scrubbing .tab-btn.scrub .tab-ico { background: var(--accent); color: var(--accent-ink); transform: scale(1.06); }
.tab-btn .tab-ico { transition: background .15s, transform .15s; }
.tab-btn { -webkit-tap-highlight-color: transparent; }
.tab-btn:focus { outline: none; }
.tab-btn:focus-visible .tab-ico { outline: 2px solid var(--accent); outline-offset: 2px; }
#tabbar, #tabbar * { -webkit-touch-callout: none; }
.sched-cal .sched-grid { grid-template-columns: repeat(7, minmax(0, 1fr)); }

/* 2.5: приложение iPhone/Android (Capacitor) — шапка не уходит под вырез и строку состояния */
.native #topbar { padding-top: calc(env(safe-area-inset-top) + 8px); }
.native .web-login { padding-top: calc(env(safe-area-inset-top) + 32px); }
.native body { -webkit-user-select: none; user-select: none; }
.native input, .native textarea, .native .long-text, .native .doc-paper { -webkit-user-select: text; user-select: text; }
/* 2.6: вход по почте/телефону — обычный текст, а не «КОД-ДЛЯ-ВХОДА» */
.wl-code #wc-contact { text-transform: none; letter-spacing: normal; font-size: 17px; }
.wl-code #wc-code { letter-spacing: .3em; }
.wl-code #wc-code::placeholder { letter-spacing: normal; text-transform: none; font-size: 15px; }

/* 2.7: «Войти через Apple» — по правилам Apple: чёрная кнопка с логотипом */
.wl-apple { background: #000; color: #fff; display: flex; align-items: center; justify-content: center; gap: 8px; }
.wl-apple svg { width: 20px; height: 20px; margin-top: -2px; }
:root[data-theme="dark"] .wl-apple { background: #fff; color: #000; }

/* =========================================================================
   3.0 — Версия 2 «Матовый» (Luma + пастельные акценты). Главнее всего, что выше.
   Эталон: прототип «Матовый», светлая и тёмная тема.
   ========================================================================= */

html, body {
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  font-weight: 400;
  letter-spacing: -0.01em;
  font-feature-settings: "cv11", "ss01";
}
body {
  background-color: var(--bg);
  background-image:
    radial-gradient(140% 60% at 85% -8%, var(--bg-glow) 0%, transparent 75%),
    linear-gradient(180deg, var(--bg-top) 0%, var(--bg) 520px);
  background-repeat: no-repeat;
  background-size: 100% 760px;
}
:root[data-theme="dark"] body {
  background-image:
    radial-gradient(140% 60% at 85% -8%, var(--bg-glow) 0%, transparent 75%),
    linear-gradient(180deg, var(--bg-top) 0%, var(--bg) 520px);
}

/* ---------- Шапка ---------- */
#topbar { background: transparent; padding: 12px 16px 4px; }
#topbar.nested { background: color-mix(in srgb, var(--bg) 82%, transparent); }
.page-title { font-size: 32px; font-weight: 600; letter-spacing: -0.035em; line-height: 1.12; margin: 6px 4px 4px; }
.page-title.sm { font-size: 20px; font-weight: 600; letter-spacing: -0.02em; }
.hdr-actions { display: flex; align-items: center; gap: 8px; }
.icon-btn {
  width: 44px; height: 44px; background: var(--card); color: var(--ink);
  box-shadow: var(--card-shadow);
}
.icon-btn svg { width: 21px; height: 21px; }
.hdr-me { display: flex; align-items: center; gap: 10px; min-width: 0; border: 0; background: none; padding: 0; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.hdr-me .avatar { position: relative; overflow: hidden; }
.hdr-me-txt { display: flex; flex-direction: column; min-width: 0; }
.hdr-me-txt small { font-size: 13px; font-weight: 500; color: var(--muted); white-space: nowrap; }
.hdr-me-txt b { font-size: 15px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.avatar {
  width: 44px; height: 44px; font-size: 15px; font-weight: 600;
  background: linear-gradient(140deg, color-mix(in srgb, var(--accent) 80%, #8aa58f), color-mix(in srgb, var(--accent) 35%, #4d6a55));
  color: #ffffff; box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.6);
}
:root[data-theme="dark"] .avatar { box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.12); }
.avatar img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.studio-logo { display: none; }

/* ---------- Контент ---------- */
#view { padding: 8px 16px calc(112px + env(safe-area-inset-bottom)); }
.grp { padding: 22px 4px 10px; font-size: 17px; font-weight: 600; letter-spacing: -0.02em; text-transform: none; color: var(--ink); }
.grp > span:first-child { font-size: 17px; font-weight: 600; letter-spacing: -0.02em; text-transform: none; }
.grp .grp-count { font-size: 14px; font-weight: 500; letter-spacing: 0; color: var(--muted); white-space: nowrap; }
.grp.hot { color: var(--ink); }
.section-head h2 { font-size: 17px; font-weight: 600; }
.section-head .count { font-size: 14px; font-weight: 500; }
.card, .lst, .tile {
  background: var(--card); border-radius: 24px; box-shadow: var(--card-shadow);
}
.lst { overflow: hidden; }
.lst > .card, .lst .swipe > .card, .lst > .lrow { box-shadow: none; border-radius: 0; }
.lrow { border-bottom: 1px solid var(--line); gap: 12px; padding: 10px 14px 10px 16px; min-height: 64px; }
.lrow-t { font-size: 16px; font-weight: 600; letter-spacing: -0.01em; }
.lrow-s { font-size: 14px; font-weight: 400; color: var(--muted); }
.lrow-s .hot { color: var(--rose); font-weight: 500; }
.lrow-s b { font-weight: 500; }
.lrow-time { font-size: 14px; font-weight: 600; width: 44px; }
.lrow-ico, .lrow-ico.sm { width: 40px; height: 40px; border-radius: 20px; background: var(--chip); color: var(--ink-2); }
.lrow-ico svg, .lrow-ico.sm svg { width: 19px; height: 19px; }
.lrow > svg.chev, .chev { width: 18px; height: 18px; color: var(--faint); }
.lrow.danger { color: var(--rose); }
.muted { color: var(--muted); }

/* Метки: капсула 26, текст 12/600 */
.tagx, .tag {
  height: 26px; padding: 0 10px; border-radius: 13px; font-size: 12px; font-weight: 600;
  display: inline-flex; align-items: center; white-space: nowrap; flex-shrink: 0;
  background: var(--chip); color: var(--ink-2);
}
.tagx.hot, .tagx.debt, .tag.hot { background: var(--rose-bg); color: var(--rose); }
.tagx.soon { background: var(--sand-bg); color: var(--sand); }
.tagx.acc { background: var(--accent); color: var(--accent-ink); }

/* ---------- Кнопки: только капсулы ---------- */
.btn, .btn.block, .btn.sm, .sheet-form .btn.block, .sheet .btn-main {
  border-radius: 999px;
}
.btn { background: var(--cta); color: var(--cta-ink); font-weight: 600; min-height: 50px; }
:root[data-theme="dark"] .btn { background: var(--cta); color: var(--cta-ink); }
.btn.block { min-height: 56px; }
.btn.sm { min-height: 40px; }
.btn.accent, :root[data-theme="dark"] .btn.accent { background: var(--cta); color: var(--cta-ink); }
.btn.ghost, :root[data-theme="dark"] .btn.ghost { background: var(--chip); color: var(--ink); }
.btn.danger, :root[data-theme="dark"] .btn.danger { background: var(--rose-bg); color: var(--rose); }
.btn:active { opacity: 1; }
.lbtn { height: 40px; min-width: 108px; padding: 0 16px; border-radius: 20px; background: var(--chip); color: var(--ink); font-size: 14px; font-weight: 600; }
.lbtn.main, .lbtn.on { background: var(--cta); color: var(--cta-ink); }
.lbtn.sq { min-width: 40px; width: 40px; padding: 0; }
.link-btn { color: var(--link); }

/* Главная кнопка со стрелкой в круге */
.cta-arrow { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 6px 0 16px; border: 0; border-radius: 20px; background: var(--cta); color: var(--cta-ink); font: inherit; font-size: 14px; font-weight: 600; white-space: nowrap; cursor: pointer; max-width: 100%; overflow: hidden; }
.cta-arrow > span:first-child { overflow: hidden; text-overflow: ellipsis; }
.cta-arrow .arr { width: 28px; height: 28px; border-radius: 14px; background: var(--cta-ink); color: var(--cta); display: flex; align-items: center; justify-content: center; flex: none; }
.cta-arrow .arr svg { width: 14px; height: 14px; stroke-width: 2.3; }

/* ---------- Крупная карточка (бывший «тёмный блок») — заливка акцентом ---------- */
.hero, .dark-blk { border-radius: 24px; box-shadow: none; }
.dk-btn { border-radius: 999px; min-height: 50px; height: auto; }
.dk-btn.main, .dark-blk .lbtn.main { background: var(--cta); color: var(--cta-ink); }
.dark-blk .lbtn { background: var(--dark-btn); color: var(--on-dark); }
.steps4 i { background: var(--dark-line); }
.steps4 i.done { background: var(--on-dark); }
.steps4 i.now { background: var(--cta-ink); box-shadow: inset 0 0 0 1.5px var(--on-dark); }
.dark-blk .bar6 > i, .st-head .bar6 > i { background: var(--on-dark); }
.dark-blk.list { background: var(--rose-block); color: var(--ink); }
.dark-blk.list .grp { color: var(--rose); }
.dark-blk.list .lrow { color: var(--ink); border-bottom-color: rgba(155, 67, 56, 0.1); }
.dark-blk.list .lrow-s, .dark-blk.list .lrow-s .hot { color: var(--rose); }
.dark-blk.list .swipe > .card { background: var(--rose-block); }
.dark-blk.list .lbtn { background: rgba(255, 255, 255, 0.85); color: var(--ink); }
.dark-blk.list .lbtn.main { background: var(--cta); color: var(--cta-ink); }
:root[data-theme="dark"] .dark-blk.list .lbtn { background: rgba(255, 255, 255, 0.1); color: var(--ink); }
:root[data-theme="dark"] .dark-blk.list .lbtn.main { background: var(--cta); color: var(--cta-ink); }
:root[data-theme="dark"] .dark-blk.list .lrow { border-bottom-color: rgba(255, 255, 255, 0.06); }

/* ---------- Переключатели: белая капсула-подложка, выбранный — чёрная капсула ---------- */
.seg-main, .segmented { background: var(--track); border-radius: 999px; padding: 4px; box-shadow: var(--card-shadow); }
.seg-main button, .segmented button { height: 40px; border-radius: 999px; font-size: 14px; font-weight: 500; color: var(--ink-2); }
.seg-main button.active, .segmented button.active, :root[data-theme="dark"] .segmented button.active { background: var(--cta); color: var(--cta-ink); font-weight: 600; }
.seg-main.scroll { background: none; box-shadow: none; }
.seg-main.scroll button { border-radius: 20px; background: var(--card); box-shadow: var(--card-shadow); }
.seg-main.scroll button.active { background: var(--cta); color: var(--cta-ink); }
.pill { height: 40px; border-radius: 20px; background: var(--card); box-shadow: var(--card-shadow); font-weight: 500; }
.pill.active, :root[data-theme="dark"] .pill.active { background: var(--cta); color: var(--cta-ink); }
.quick button { border-radius: 20px; height: 40px; }
.quick button.on, :root[data-theme="dark"] .quick button.on { background: var(--cta); color: var(--cta-ink); }

/* ---------- Поля ---------- */
input[type="text"], input[type="search"], input[type="tel"], input[type="email"], input[type="number"], input:not([type]), select, textarea {
  border-radius: 16px;
}

/* ---------- Нижняя панель: плавающая капсула с 4 вкладками и круглая «Ещё» ---------- */
#tabbar, :root[data-theme="dark"] #tabbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
  display: flex; align-items: center; gap: 10px;
  padding: 8px 16px calc(14px + env(safe-area-inset-bottom));
  background: none; border: 0; box-shadow: none; border-radius: 0; height: auto;
  pointer-events: none;
}
#tabbar > * { pointer-events: auto; }
.tabcaps {
  flex: 1 1 0; min-width: 0; height: 64px; padding: 0 8px; border-radius: 32px;
  background: var(--glass); box-shadow: var(--float-shadow);
  -webkit-backdrop-filter: blur(24px) saturate(160%); backdrop-filter: blur(24px) saturate(160%);
  display: flex; align-items: center; justify-content: space-between; gap: 2px;
}
.tab-btn, #tabbar.many .tab-btn, #tabbar.lots .tab-btn {
  height: 48px; min-height: 48px; min-width: 48px; width: 48px; padding: 0; border: 0; border-radius: 24px;
  background: none; color: var(--muted); flex-direction: row; justify-content: center; gap: 7px;
  font-size: 14px; font-weight: 600; transition: background .2s, color .2s, width .25s cubic-bezier(.2,.8,.2,1);
}
.tab-btn .tab-ico { width: auto; height: auto; background: none !important; border-radius: 0; }
.tab-btn svg { width: 22px; height: 22px; }
.tab-btn .tab-label, #tabbar.lots .tab-btn.active .tab-label { display: none; font-size: 14px; }
.tab-btn.active, #tabbar.many .tab-btn.active, #tabbar.lots .tab-btn.active {
  width: auto; padding: 0 16px 0 13px; background: var(--accent); color: var(--accent-ink);
}
.tab-btn.active svg { width: 20px; height: 20px; }
.tab-btn.active .tab-label { display: inline; }
.tab-more {
  width: 64px; height: 64px; flex-shrink: 0; border: 0; border-radius: 32px; padding: 0;
  background: var(--glass); color: var(--ink); box-shadow: var(--float-shadow);
  -webkit-backdrop-filter: blur(24px) saturate(160%); backdrop-filter: blur(24px) saturate(160%);
  display: flex; align-items: center; justify-content: center; cursor: pointer; position: relative;
}
.tab-more svg { width: 22px; height: 22px; }
.tab-more.active { background: var(--accent); color: var(--accent-ink); }
.tab-badge { top: 4px; right: 4px; margin: 0; min-width: 18px; height: 18px; border-radius: 9px; background: var(--rose); color: #fff; font-size: 11px; font-weight: 600; box-shadow: 0 0 0 2px var(--card); }
:root[data-theme="dark"] .tab-badge { color: #111318; }
.tab-badge.hot { background: var(--rose); }
.tab-btn.active .tab-badge { top: 2px; right: 2px; }
#tabbar.scrubbing .tab-btn.active:not(.scrub) { background: none; color: var(--muted); width: 48px; padding: 0; }
#tabbar.scrubbing .tab-btn.active:not(.scrub) .tab-label { display: none; }
#tabbar.scrubbing .tab-btn.scrub { background: var(--accent); color: var(--accent-ink); }
#tabbar.scrubbing .tab-btn.scrub .tab-ico { background: none; transform: none; }
#toast { bottom: calc(96px + env(safe-area-inset-bottom)); border-radius: 20px; }
:root[data-theme="dark"] #toast u { color: inherit; }
body.strict .tabcaps, body.strict .tab-more { border-radius: 20px !important; }
body.strict .tab-btn { border-radius: 14px !important; }

/* ---------- Шторка: радиус 32, градиент акцента сверху, затемнение и размытие под ней ---------- */
.sheet-back { background: var(--scrim); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); transition: opacity .25s ease; }
.sheet {
  border-radius: 32px 32px 0 0; padding: 10px 16px calc(24px + env(safe-area-inset-bottom));
  background: linear-gradient(180deg, var(--sheet-top) 0%, var(--card) 200px);
  transition: transform .38s cubic-bezier(.2,.85,.25,1);
  box-shadow: 0 -10px 40px rgba(17, 19, 24, 0.12);
}
.sheet.closing { transition: transform .23s ease-in; }
.sheet .grip { width: 40px; height: 5px; background: var(--axis); }
.sheet h3 { font-size: 22px; font-weight: 600; letter-spacing: -0.025em; padding: 14px 4px 12px; }
.sheet-item { min-height: 60px; font-weight: 500; }
.sheet-item.rich { min-height: 68px; }
.sheet-item.rich .lrow-ico { width: 44px; height: 44px; border-radius: 22px; background: var(--chip); }
.sheet-cancel { height: 50px; border-radius: 999px; background: var(--chip); font-weight: 600; }
.sheet-form .btn.block, .sheet .btn-main, :root[data-theme="dark"] .sheet-form .btn.block {
  height: 56px; border-radius: 999px; background: var(--cta); color: var(--cta-ink);
}
.stepper { border-radius: 999px; }
.stepper button { border-radius: 22px; }
.sheet-x { width: 40px; height: 40px; border: 0; border-radius: 20px; background: var(--chip); color: var(--ink); display: flex; align-items: center; justify-content: center; cursor: pointer; flex: none; }
.sheet-x svg { width: 18px; height: 18px; stroke-width: 2.3; }

/* ---------- Шторка «Ещё» ---------- */
.more-sheet { padding-bottom: calc(16px + env(safe-area-inset-bottom)); min-height: 70vh; display: flex; flex-direction: column; }
.more-sheet .ms-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 4px 12px; }
.more-sheet .ms-head h3 { padding: 0; font-size: 28px; letter-spacing: -0.035em; }
.more-sheet .seg-main { margin-bottom: 14px; flex: none; }
.more-sheet .seg-main { grid-auto-columns: minmax(max-content, 1fr); }
.more-sheet .seg-main button { font-size: 14px; padding: 0 8px; }
@media (max-width: 400px) { .more-sheet .seg-main button { font-size: 13px; padding: 0 4px; } }
.more-sheet .ms-body { flex: 1 1 auto; }
.more-sheet .grp { padding: 16px 6px 8px; font-size: 13px; font-weight: 600; color: var(--muted); letter-spacing: 0; }
.more-sheet .grp > span:first-child { font-size: 13px; font-weight: 600; letter-spacing: 0; }
.more-sheet .lrow { min-height: 60px; }
.more-sheet .lst { box-shadow: var(--card-shadow); }
.ms-setup { width: 100%; display: flex; align-items: center; gap: 12px; padding: 14px 14px 14px 16px; border: 0; border-radius: 24px; background: var(--accent); color: var(--accent-ink); font: inherit; text-align: left; cursor: pointer; margin-bottom: 4px; }
.ms-setup .lrow-ico { background: rgba(255, 255, 255, 0.6); color: var(--accent-ink); }
.ms-setup b { display: block; font-size: 16px; font-weight: 600; }
.ms-setup .bar6 { margin-top: 8px; background: rgba(17, 19, 24, 0.1); }
.ms-setup .bar6 > i { background: var(--accent-ink); }
.ms-bug { margin-top: 16px; }
.ms-empty { padding: 24px 8px; text-align: center; color: var(--muted); font-size: 14px; }

/* ---------- Профиль ---------- */
.prof2-top { display: flex; align-items: center; gap: 16px; padding: 8px 4px 18px; }
.prof2-ava { width: 76px; height: 76px; border-radius: 38px; flex: none; position: relative; overflow: hidden; display: flex; align-items: center; justify-content: center; font-size: 24px; font-weight: 600; color: #fff; background: linear-gradient(140deg, color-mix(in srgb, var(--accent) 80%, #8aa58f), color-mix(in srgb, var(--accent) 35%, #4d6a55)); box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.6); }
.prof2-ava img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.prof2-name { font-size: 26px; font-weight: 600; letter-spacing: -0.03em; line-height: 1.15; }
.prof2-role { font-size: 14px; color: var(--muted); margin-top: 2px; }
.prof2-plan { padding: 16px 18px 18px; }
.prof2-plan .pp-top { display: flex; align-items: center; gap: 14px; }
.prof2-plan .pp-ico { width: 52px; height: 52px; border-radius: 18px; background: var(--accent); color: var(--accent-ink); display: flex; align-items: center; justify-content: center; flex: none; }
.prof2-plan .pp-ico svg { width: 22px; height: 22px; }
.prof2-plan small { font-size: 13px; color: var(--muted); }
.prof2-plan .pp-big { font-size: 22px; font-weight: 600; letter-spacing: -0.025em; }
.prof2-plan .bar6 { margin-top: 18px; background: var(--chip); }
.prof2-plan .bar6 > i { background: var(--accent); }
.prof2-plan .pp-kv { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 14px; }
.prof2-plan .pp-kv small { display: block; }
.prof2-plan .pp-kv b { font-size: 17px; font-weight: 600; }
.prof2-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 10px; }
.prof2-tile { min-height: 150px; display: flex; flex-direction: column; align-items: flex-start; gap: 4px; padding: 16px; border: 0; background: var(--card); border-radius: 24px; box-shadow: var(--card-shadow); color: var(--ink); font: inherit; text-align: left; cursor: pointer; }
.prof2-tile .lrow-ico { margin-bottom: auto; }
.prof2-tile b { font-size: 16px; font-weight: 600; margin-top: 14px; }
.prof2-tile small { font-size: 13px; color: var(--muted); }

/* ---------- «Сегодня» ---------- */
.td-title { margin: 14px 4px 0; font-size: 32px; line-height: 1.12; font-weight: 600; letter-spacing: -0.035em; }
.td-title span { display: block; color: var(--ink-2); opacity: .72; }
.cnts { padding: 14px 4px 4px; gap: 12px; font-size: 14px; font-weight: 500; letter-spacing: 0; color: var(--ink-2); }
.cnts > span { gap: 6px; }
.cnts > span + span::before { content: ""; width: 1px; height: 18px; background: var(--line); margin-right: 6px; }
.cnts i { min-width: 14px; height: 26px; padding: 0 8px; border-radius: 13px; background: var(--accent); color: var(--accent-ink); font-size: 15px; font-weight: 600; display: inline-flex; align-items: center; justify-content: center; }
.cnts.calm { font-size: 14px; color: var(--muted); }
.td-day { padding: 0; }
.td-row { display: flex; align-items: center; gap: 12px; min-height: 60px; padding: 8px 14px 8px 16px; border: 0; border-bottom: 1px solid var(--line); background: none; width: 100%; font: inherit; color: inherit; text-align: left; cursor: pointer; }
.td-row:last-child { border-bottom: 0; }
.td-row .tt { width: 44px; flex-shrink: 0; font-size: 14px; font-weight: 600; font-variant-numeric: tabular-nums; }
.td-row .dot { width: 8px; height: 8px; flex-shrink: 0; border-radius: 4px; background: var(--ink); }
.td-row .dot.ring { background: none; box-shadow: inset 0 0 0 1.5px var(--ink); }
.td-row.hot .tt { color: var(--rose); }
.td-row.hot .dot { background: var(--rose); }
.td-row.past .tt, .td-row.past .lrow-t { color: var(--muted); }

/* «Нужно решить»: стопка из трёх матовых карточек */
.deck-wrap { position: relative; margin: 0; padding-top: 27px; }
.deck-glow { position: absolute; left: -16px; right: -16px; top: -10px; bottom: -20px; pointer-events: none;
  background: radial-gradient(55% 60% at 30% 60%, var(--accent) 0%, transparent 70%), radial-gradient(50% 55% at 78% 40%, color-mix(in srgb, color-mix(in srgb, var(--accent) 62%, #5b6b62) 55%, transparent) 0%, transparent 70%); }
:root[data-theme="dark"] .deck-glow { opacity: .45; }
.deck { position: relative; }
.deck-card {
  position: relative; transform-origin: 50% 0; padding: 16px 18px 18px; border-radius: 28px;
  background: rgba(255, 255, 255, 0.62); color: var(--ink);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.95), 0 2px 6px rgba(17, 19, 24, 0.06), 0 18px 40px rgba(17, 19, 24, 0.14);
  -webkit-backdrop-filter: blur(22px) saturate(150%); backdrop-filter: blur(22px) saturate(150%);
  display: flex; flex-direction: column; touch-action: pan-y; user-select: none; -webkit-user-select: none;
  transition: transform .35s cubic-bezier(.2,.8,.2,1), opacity .35s;
}
:root[data-theme="dark"] .deck-card { background: rgba(40, 42, 48, 0.55); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1), 0 18px 40px rgba(0, 0, 0, 0.35); }
.deck-card.back { position: absolute; inset: 0; }
.deck-card .ci { display: flex; flex-direction: column; transition: opacity .25s; }
.deck-card.back .ci { opacity: 0; pointer-events: none; }
.deck-card.dragging { transition: none; }
.dc-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.dc-badge { height: 30px; padding: 0 12px; border-radius: 15px; background: rgba(255, 255, 255, 0.85); color: var(--ink-2); font-size: 13px; font-weight: 600; display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.dc-badge::before { content: ""; width: 6px; height: 6px; border-radius: 3px; background: currentColor; flex: none; }
.dc-badge.hot { color: var(--rose); }
.dc-badge.soon { color: var(--sand); }
.dc-ico { width: 34px; height: 34px; border-radius: 17px; background: rgba(255, 255, 255, 0.85); color: var(--ink-2); display: flex; align-items: center; justify-content: center; flex: none; border: 0; cursor: pointer; }
.dc-ico svg { width: 16px; height: 16px; }
:root[data-theme="dark"] .dc-badge, :root[data-theme="dark"] .dc-ico { background: rgba(255, 255, 255, 0.1); }
.dc-title { padding: 18px 6px 4px; text-align: center; font-size: 22px; line-height: 1.2; font-weight: 600; letter-spacing: -0.025em; overflow-wrap: anywhere; }
.dc-sub { padding: 0 6px; text-align: center; font-size: 15px; line-height: 1.4; color: var(--ink-2); }
.dc-foot { margin-top: 18px; display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.dc-foot > span { min-width: 0; font-size: 13px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dc-foot .cta-arrow { flex-shrink: 1; }
.deck-dots { position: relative; padding: 14px 0 4px; display: flex; justify-content: center; gap: 5px; }
.deck-dots i { width: 6px; height: 6px; border-radius: 3px; background: var(--line); transition: all .3s; }
:root[data-theme="dark"] .deck-dots i { background: rgba(255, 255, 255, 0.14); }
.deck-dots i.on { width: 18px; background: var(--ink); }

.month-line { margin: 20px 0 0; border-top: 0; padding: 0 16px; min-height: 56px; background: var(--card); border-radius: 24px; box-shadow: var(--card-shadow); }
.month-line b { font-weight: 600; }
.delta.up { color: var(--green); }
.delta.down { color: var(--rose); }

/* ---------- «Проекты» ---------- */
.pj-kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 12px; padding: 14px 0; }
.pj-kpis > div { padding: 0 14px; border-right: 1px solid var(--line); min-width: 0; }
.pj-kpis > div:last-child { border-right: 0; }
.pj-kpis b { display: block; font-size: 24px; font-weight: 600; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.pj-kpis b.hot { color: var(--rose); }
.pj-kpis span { font-size: 13px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; }
.pj-burn { border-radius: 24px; background: var(--rose-block); overflow: hidden; }
.pj-burn .lrow { border-bottom-color: rgba(155, 67, 56, 0.1); }
:root[data-theme="dark"] .pj-burn .lrow { border-bottom-color: rgba(255, 255, 255, 0.06); }
.pj-burn .lrow-s { color: var(--rose); }
.pj-burn .lbtn { background: rgba(255, 255, 255, 0.85); }
:root[data-theme="dark"] .pj-burn .lbtn { background: rgba(255, 255, 255, 0.1); }
.pj-burn .lbtn.main { background: var(--cta); color: var(--cta-ink); }
.pj-burn .swipe > .card { background: var(--rose-block); }
.lrow .lrow-ico + .lrow-main { margin-left: 0; }

/* ---------- Анимации ---------- */
@keyframes v2-in-right { from { transform: translateX(32px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes v2-in-left  { from { transform: translateX(-32px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes v2-fade     { from { opacity: 0; } to { opacity: 1; } }
@keyframes v2-spring   { 0% { transform: scale(.4); opacity: 0; } 60% { transform: scale(1.08); opacity: 1; } 100% { transform: scale(1); } }
.anim-right { animation: v2-in-right .3s cubic-bezier(.2,.8,.2,1); }
.anim-left  { animation: v2-in-left .3s cubic-bezier(.2,.8,.2,1); }
.anim-fade  { animation: v2-fade .22s ease; }
.no-anim, .no-anim * { animation: none !important; }
button, .lrow, .card.tap, .tab-btn, .tab-more, a.btn { transition: transform .12s ease, filter .12s ease, background-color .2s, color .2s; }
button:active:not(:disabled), .lrow[data-open]:active, .card.tap:active, a.btn:active { transform: scale(.97); filter: brightness(.97); }
.deck-card:active, .swipe .card:active, #tabbar.scrubbing .tab-btn:active, .sheet:active { transform: none; }
.done-ico { animation: v2-spring .55s .18s cubic-bezier(.2,.9,.3,1.3) both; }
@media (prefers-reduced-motion: reduce) {
  .anim-right, .anim-left, .anim-fade, .done-ico { animation: none; }
  .sheet, .deck-card { transition: none; }
}
/* Слабые Android в Telegram: стекло без размытия (класс ставит app.js) */
body.no-blur .tabcaps, body.no-blur .tab-more, body.no-blur .deck-card, body.no-blur .sheet-back, body.no-blur #topbar.nested, body.no-blur .icon-btn {
  -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
}
body.no-blur .tabcaps, body.no-blur .tab-more { background: var(--card); }
body.no-blur .deck-card { background: var(--card); }
.searchbar { height: 48px; border-radius: 24px; background: var(--card); box-shadow: var(--card-shadow); }
.searchbar svg { width: 19px; height: 19px; }
.attn { padding: 0; overflow: hidden; margin-top: 12px; }
.attn .list-row { min-height: 60px; padding: 10px 16px; border-bottom: 1px solid var(--line); }
.attn .list-row:last-child { border-bottom: 0; }
.attn .list-row b { font-weight: 600; display: inline-flex; align-items: center; gap: 8px; }
.attn .list-row b svg { width: 18px; height: 18px; color: var(--ink-2); }
.attn .count { background: var(--accent); color: var(--accent-ink); font-weight: 600; }
.empty .em-ico { background: var(--chip); color: var(--ink-2); }
.pj-burn > .swipe:last-child .lrow, .pj-burn > .lrow:last-child { border-bottom: 0; }
.pj-burn .swipe { margin: 0; border-radius: 0; }
#topbar.nested { background: color-mix(in srgb, var(--bg) 55%, transparent); -webkit-backdrop-filter: blur(20px) saturate(150%); backdrop-filter: blur(20px) saturate(150%); }

/* Шторка завершения */
.done-sheet { overflow: visible; text-align: center; padding-top: 34px; background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 38%, var(--card)) 0%, var(--card) 260px); }
.done-sheet .grip { display: none; }
.done-x { position: absolute; left: 50%; top: -20px; margin-left: -20px; width: 40px; height: 40px; border: 0; border-radius: 20px; background: color-mix(in srgb, var(--accent) 38%, var(--card)); box-shadow: 0 0 0 4px var(--scrim); color: var(--ink); display: flex; align-items: center; justify-content: center; cursor: pointer; z-index: 2; }
.done-x svg { width: 18px; height: 18px; }
.done-ico-wrap { position: relative; width: 150px; height: 140px; margin: 0 auto; display: flex; align-items: center; justify-content: center; }
.done-ico-wrap > i { position: absolute; border-radius: 50%; background: var(--accent); opacity: .85; }
.done-glow { position: absolute; inset: 10px 15px; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--accent) 75%, transparent) 0%, transparent 70%); }
.done-ico { position: relative; width: 76px; height: 76px; border-radius: 38px; background: var(--accent); color: var(--accent-ink); box-shadow: 0 0 0 10px color-mix(in srgb, var(--accent) 35%, transparent), 0 12px 30px rgba(60, 90, 65, 0.18); display: flex; align-items: center; justify-content: center; animation: v2-spring .55s .18s cubic-bezier(.2,.9,.3,1.3) both; }
.done-ico svg { width: 34px; height: 34px; stroke-width: 2.6; }
.sheet h3.done-title { padding: 6px 0 0; font-size: 28px; letter-spacing: -0.03em; }
.done-text { max-width: 290px; margin: 6px auto 0; font-size: 15px; color: var(--muted); }
.done-rows { margin-top: 20px; padding: 0 16px; border-radius: 20px; background: var(--chip); text-align: left; }
.done-rows > div { display: flex; justify-content: space-between; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line); font-size: 14px; }
.done-rows > div:last-child { border-bottom: 0; }
.done-rows span { color: var(--muted); }
.done-rows b { font-weight: 600; text-align: right; }
.done-sheet .btn-main { margin-top: 18px; }
.done-back { margin: 6px auto 0; height: 44px; padding: 0 16px; border: 0; background: none; color: var(--ink-2); font: inherit; font-size: 15px; font-weight: 500; cursor: pointer; display: block; }
#view.anim-fade > :not(.view-host), #view.anim-fade > .view-host > * { animation: none; }
/* Заголовки секций — обычными буквами (без капса) */
.section-head h2 { font-size: 17px; font-weight: 600; letter-spacing: -0.02em; text-transform: none; color: var(--ink); }
.section-title, .arch-month { font-size: 17px; font-weight: 600; letter-spacing: -0.02em; text-transform: none; color: var(--ink); }
.st-plan-top > span, .revision-box .rb-title, .c-last span, .date-tile .m, .cal-wd { text-transform: none; letter-spacing: 0; }
.dc-foot .cta-arrow { flex-shrink: 0; max-width: 72%; }
/* Вложенный экран: нижней панели нет (в тёмной теме правило выше её возвращало и она закрывала нижние кнопки) */
#tabbar.hidden, :root[data-theme] #tabbar.hidden, #tabbar:empty { display: none !important; }
/* Прайс: пакеты свёрнуты, раскрываются по нажатию */
.pkg-fold > summary { list-style: none; display: flex; align-items: center; gap: 12px; cursor: pointer; min-height: 44px; }
.pkg-fold > summary::-webkit-details-marker { display: none; }
.pkg-fold > summary .grow { display: flex; flex-direction: column; min-width: 0; }
.pkg-fold > summary b { font-weight: 600; font-size: 16px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pkg-fold > summary svg { width: 18px; height: 18px; color: var(--muted); transition: transform .2s; flex: none; }
.pkg-fold[open] > summary svg { transform: rotate(180deg); }
.calc-add { display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 6px 0; border-bottom: 1px solid var(--line); width: 100%; background: none; border-left: 0; border-right: 0; border-top: 0; font: inherit; color: inherit; text-align: left; }
.card > .calc-add:last-child { border-bottom: 0; }
.calc-add .grow { display: flex; flex-direction: column; font-weight: 500; }
.calc-add .stepper { height: 44px; gap: 4px; }
.calc-add .stepper b { min-width: 28px; text-align: center; font-size: 16px; }
.calc-add .stepper button { width: 38px; height: 38px; }
.calc-add.toggle .check { width: 28px; height: 28px; border-radius: 14px; background: var(--chip); color: transparent; display: flex; align-items: center; justify-content: center; }
.calc-add.toggle.on .check { background: var(--cta); color: var(--cta-ink); }
.calc-add.toggle .check svg { width: 16px; height: 16px; }
.calc-total .row { padding: 4px 0; font-size: 14px; }
.calc-total .calc-sum { margin-top: 8px; padding-top: 10px; border-top: 1px solid var(--line); font-size: 17px; }
.card.calc-total { margin-top: 12px; background: var(--accent); color: var(--accent-ink); gap: 2px; }
.card.calc-total .muted { color: rgba(17, 19, 24, 0.6); }
.card.calc-total .calc-sum { border-top-color: rgba(17, 19, 24, 0.12); }
.link-btn { display: inline-flex; align-items: center; gap: 6px; }
.link-btn svg { width: 18px; height: 18px; flex: none; }

/* Поле даты и времени (3.2): кнопки-капсулы, календарь месяца и сетка времени */
.dtp-row { display: flex; gap: 8px; align-items: center; }
.dtp-btn { flex: 1 1 0; min-width: 0; height: 50px; padding: 0 14px; border: 0; border-radius: 16px; background: var(--chip); color: var(--muted); font: inherit; font-size: 16px; display: flex; align-items: center; gap: 10px; cursor: pointer; box-shadow: inset 0 0 0 1px var(--line); }
.dtp-btn.set { color: var(--ink); }
.dtp-btn.open { box-shadow: inset 0 0 0 1.5px var(--ink); }
.dtp-btn > svg { width: 19px; height: 19px; flex: none; }
.dtp-btn > svg:last-child { width: 16px; height: 16px; color: var(--muted); }
.dtp-btn .grow { text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dtp-x { width: 40px; height: 40px; flex: none; border: 0; border-radius: 20px; background: none; color: var(--muted); display: flex; align-items: center; justify-content: center; cursor: pointer; }
.dtp-x svg { width: 18px; height: 18px; }
.dtp-pop { margin-top: 8px; padding: 12px; border-radius: 20px; background: var(--card); box-shadow: inset 0 0 0 1px var(--line), 0 12px 30px rgba(17, 19, 24, 0.1); animation: v2-fade .2s ease; }
.sheet .dtp-pop, .card .dtp-pop { box-shadow: inset 0 0 0 1px var(--line); }
.dtp-cal-head { display: flex; align-items: center; justify-content: space-between; padding: 2px 0 10px; }
.dtp-cal-head b { font-size: 17px; font-weight: 600; }
.dtp-nav { width: 40px; height: 40px; border: 0; border-radius: 20px; background: none; color: var(--ink-2); display: flex; align-items: center; justify-content: center; cursor: pointer; }
.dtp-nav svg { width: 18px; height: 18px; }
.dtp-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.dtp-wd span { text-align: center; font-size: 13px; color: var(--muted); padding: 4px 0 6px; }
.dtp-day { height: 42px; border: 0; border-radius: 12px; background: none; color: var(--ink-2); font: inherit; font-size: 16px; cursor: pointer; font-variant-numeric: tabular-nums; }
.dtp-day.today { box-shadow: inset 0 0 0 1.5px var(--accent); color: var(--ink); font-weight: 600; }
.dtp-day.on { background: var(--cta); color: var(--cta-ink); font-weight: 600; box-shadow: none; }
.dtp-times { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; max-height: 232px; overflow-y: auto; }
.dtp-time { height: 44px; border: 0; border-radius: 12px; background: var(--chip); color: var(--ink); font: inherit; font-size: 15px; cursor: pointer; font-variant-numeric: tabular-nums; }
.dtp-time.on { background: var(--cta); color: var(--cta-ink); font-weight: 600; }
.dtp-own { display: flex; align-items: center; gap: 10px; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line); font-size: 14px; color: var(--muted); }
.dtp-own input { flex: 1; height: 44px; font-size: 16px; }
.pick-btn { width: 100%; height: 50px; padding: 0 14px; border: 0; border-radius: 16px; background: var(--chip); color: var(--muted); font: inherit; font-size: 16px; display: flex; align-items: center; gap: 10px; cursor: pointer; box-shadow: inset 0 0 0 1px var(--line); }
.pick-btn.on { color: var(--ink); }
.pick-btn > svg { width: 19px; height: 19px; flex: none; }
.pick-btn > svg:last-child { width: 16px; height: 16px; color: var(--muted); }
.pick-btn .grow { text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mode-cards button span { display: none; }
.dtp-row .dtp-btn[data-dtp="date"] { flex: 1.4 1 0; }
.dtp-btn { font-size: 15px; gap: 8px; padding: 0 12px; }
.dtp-foot { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.dtp-foot .link-btn { font-size: 14px; flex: none; }
.dtp-foot .dt-preview { min-width: 0; }
#pd-link { min-width: 0; }

/* ---------- 4.0.5: правки ---------- */
/* «В календарь телефона» — маленькая круглая кнопка в углу карточки съёмки */
.dk-top-r { display: flex; align-items: center; gap: 8px; margin-left: auto; flex: none; }
.hero-ics { width: 36px; height: 36px; border-radius: 18px; border: 0; padding: 0; background: rgba(255, 255, 255, 0.55); color: inherit; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; flex: none; }
.hero-ics svg { width: 17px; height: 17px; }
:root[data-theme="dark"] .hero-ics { background: rgba(255, 255, 255, 0.12); }
/* плитки этапов на доске: выбранная — чёрная, цифра видна */
.stile.active, :root[data-theme="dark"] .stile.active { background: var(--cta); color: var(--cta-ink); box-shadow: none; }
.stile.active b { color: var(--cta-ink); }
.stile.active span { color: var(--cta-ink); opacity: .7; }
/* фильтры периода не прилипают к блоку ниже */
.month-switch + .pills { margin-bottom: 14px !important; }
/* ведомость */
.pay-row { align-items: center; }
.pay-row .grow { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pay-top { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.pay-bar { display: block; height: 5px; border-radius: 3px; background: var(--track); overflow: hidden; margin-top: 6px; }
.pay-bar i { display: block; height: 100%; border-radius: 3px; background: var(--accent); }
.pay-idle { display: flex; flex-wrap: wrap; gap: 8px; }
.pay-chip { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 14px 0 4px; border: 0; border-radius: 20px; background: var(--card); box-shadow: var(--card-shadow); font: inherit; font-size: 14px; font-weight: 500; color: var(--ink-2); cursor: pointer; }
.pay-chip .ava { width: 32px; height: 32px; font-size: 12px; }
.pay-top b { font-size: 16px; font-weight: 600; letter-spacing: -0.01em; }
.pay-top b:first-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------- 4.1.1 ---------- */
/* Время — барабаны как на iPhone */
.whl { position: relative; display: flex; align-items: center; justify-content: center; gap: 4px; height: 200px; margin: 4px 0 12px; }
.whl-band { position: absolute; left: 8px; right: 8px; top: 80px; height: 40px; border-radius: 12px; background: var(--chip); pointer-events: none; }
.whl-col { position: relative; z-index: 1; width: 84px; height: 200px; overflow-y: scroll; scroll-snap-type: y mandatory; scrollbar-width: none; -webkit-overflow-scrolling: touch; overscroll-behavior: contain;
  -webkit-mask-image: linear-gradient(transparent, #000 30%, #000 70%, transparent); mask-image: linear-gradient(transparent, #000 30%, #000 70%, transparent); }
.whl-col::-webkit-scrollbar { display: none; }
.whl-pad { height: 80px; }
.whl-it { display: block; width: 100%; height: 40px; border: 0; background: none; font: inherit; font-size: 22px; font-weight: 500; color: var(--muted); font-variant-numeric: tabular-nums; scroll-snap-align: center; cursor: pointer; padding: 0; transition: color .15s; }
.whl-it.on { color: var(--ink); font-weight: 600; }
.whl-sep { position: relative; z-index: 1; font-size: 22px; font-weight: 600; }
.whl-ok { margin-top: 0; }
/* «День по часам»: прошедшее приглушено, идущее — отмечено, черта «сейчас» */
.td-row.done { opacity: .72; }
.td-row.done .tt, .td-row.done .lrow-t { color: var(--ink-2); }
.td-row.live { background: color-mix(in srgb, var(--accent) 28%, transparent); }
.td-row.live .tt { color: var(--ink); }
/* роль сотрудника в списках выбора */
.pick-name { display: flex; align-items: center; gap: 8px; min-width: 0; flex-wrap: wrap; }
.role-tag { font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 9px; background: var(--chip); color: var(--ink-2); white-space: nowrap; }
.role-tag.r-operator { background: #dbe8f6; color: #2f5a86; }
.role-tag.r-editor { background: #e7defa; color: #5b3f8f; }
.role-tag.r-sales { background: #f6e6d3; color: #8a5a22; }
.role-tag.r-project_manager { background: #d9ecd9; color: #3a6b43; }
.role-tag.r-admin, .role-tag.r-owner { background: #e3e4e7; color: #3a3d45; }
:root[data-theme="dark"] .role-tag.r-operator { background: rgba(120, 170, 230, 0.18); color: #a9c8ec; }
:root[data-theme="dark"] .role-tag.r-editor { background: rgba(170, 140, 230, 0.18); color: #cdb9f2; }
:root[data-theme="dark"] .role-tag.r-sales { background: rgba(230, 170, 100, 0.18); color: #ecc79a; }
:root[data-theme="dark"] .role-tag.r-project_manager { background: rgba(130, 200, 140, 0.18); color: #b4dfb9; }
:root[data-theme="dark"] .role-tag.r-admin, :root[data-theme="dark"] .role-tag.r-owner { background: rgba(255, 255, 255, 0.1); color: #c9ccd2; }
/* чат: отметка вас — мягкий фон вместо красной рамки; упоминания без подчёркивания */
.msg.tagged, :root[data-theme="dark"] .msg.tagged { box-shadow: none; background: color-mix(in srgb, var(--accent) 38%, var(--card)); }
.msg-text .mention, .msg.mine .msg-text .mention { text-decoration: none; font-weight: 600; color: inherit; background: color-mix(in srgb, var(--accent) 55%, transparent); padding: 0 5px; border-radius: 6px; }
.msg.mine .msg-text .mention { background: rgba(255, 255, 255, 0.55); }
:root[data-theme="dark"] .msg.mine .msg-text .mention { background: rgba(0, 0, 0, 0.18); }
.quick .add { background: none; box-shadow: inset 0 0 0 1.5px var(--line); color: var(--ink-2); display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.quick .add svg { width: 16px; height: 16px; flex: none; }

/* ИИ-ассистент: карточка действия */
.ai-action { align-self: stretch; margin: 2px 0 6px; padding: 14px 16px; border-radius: 20px; background: var(--card); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--accent) 70%, transparent), var(--card-shadow); }
.ai-action.closed { opacity: .7; }
.aa-head { display: flex; align-items: center; gap: 8px; font-weight: 600; font-size: 15px; margin-bottom: 8px; }
.aa-head svg { width: 16px; height: 16px; }
.aa-row { display: flex; justify-content: space-between; gap: 12px; padding: 6px 0; border-top: 1px solid var(--line); font-size: 14px; }
.aa-row span { color: var(--muted); flex: none; }
.aa-row b { font-weight: 600; text-align: right; }
.aa-lbl { font-size: 12px; color: var(--muted); margin: 10px 0 6px; }
.aa-cands { display: flex; flex-direction: column; gap: 6px; }
.aa-cands button { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; text-align: left; padding: 10px 12px; border-radius: 14px; border: 0; background: var(--chip); font: inherit; color: inherit; cursor: pointer; }
.aa-cands button span { font-size: 12px; color: var(--muted); }
.aa-cands button.on { background: var(--accent); color: #111318; }
.aa-cands button.on span { color: rgba(17, 19, 24, 0.6); }
.aa-btns { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; }
.aa-status { margin-top: 10px; font-size: 13px; font-weight: 600; color: var(--muted); display: flex; align-items: center; gap: 6px; }
.aa-status.ok { color: var(--green); }
.aa-status svg { width: 16px; height: 16px; }
/* Своё название проекта — рядом с клиентом, приглушённо */
.lrow-pt { font-weight: 500; color: var(--muted); }

/* ---------- 4.4.0: удаление аккаунта ---------- */
.del-acc { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; min-height: 48px; margin-top: 32px; border: 0; background: none; color: var(--rose); font-weight: 600; font-size: 15px; line-height: 1.2; font-family: inherit; cursor: pointer; }
.del-acc svg { width: 18px; height: 18px; }
.da-h { font-size: 13px; font-weight: 500; color: var(--muted); margin: 16px 0 8px; }
.da-sub { font-size: 12px; color: var(--muted); margin: -4px 0 8px; }
.da-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.da-list li { display: flex; align-items: center; gap: 10px; font-size: 15px; color: var(--ink); }
.da-list svg { width: 16px; height: 16px; flex: none; }
.da-list.del svg { color: var(--rose); }
.da-list.keep svg { color: var(--muted); }
.da-btns { display: flex; flex-direction: column; gap: 8px; margin-top: 22px; }
.da-btns.desk { flex-direction: row; justify-content: flex-end; }
.btn.da-soft { background: var(--rose-bg); color: var(--rose); }
.btn.da-rose { background: var(--rose); color: #fff; }
.btn.da-rose:disabled { opacity: 0.8; }
.da-ico { width: 56px; height: 56px; border-radius: 28px; background: var(--rose-bg); color: var(--rose); display: grid; place-items: center; margin: 4px auto 12px; }
.da-ico svg { width: 22px; height: 22px; }
.da-c { text-align: center; }
.da-p { color: var(--ink-2); margin: 8px 0 0; line-height: 1.45; }
.da-note { background: var(--sand-bg); color: var(--sand); border-radius: 16px; padding: 14px 16px; line-height: 1.45; margin-top: 12px; }
.da-done { min-height: 70vh; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 24px; max-width: 420px; margin: 0 auto; }
.da-done h2 { margin: 18px 0 8px; font-size: 24px; letter-spacing: -0.03em; }
.da-done p { margin: 0 0 24px; color: var(--ink-2); line-height: 1.45; }
.da-ok { width: 72px; height: 72px; border-radius: 36px; background: var(--accent); color: #111318; display: grid; place-items: center; }
.da-ok svg { width: 30px; height: 30px; }
.bspin { display: inline-block; width: 16px; height: 16px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: msng-spin 0.7s linear infinite; margin-right: 8px; vertical-align: -3px; }
@keyframes msng-spin { to { transform: rotate(360deg); } }
.priv-link { display: block; margin: 4px auto 0; border: 0; background: none; color: var(--muted); font-weight: 500; font-size: 13px; line-height: 1.4; font-family: inherit; text-decoration: underline; cursor: pointer; padding: 10px; }

/* ---------- 4.4.0: экран входа ---------- */
.lgn { max-width: 400px; margin: 0 auto; padding: max(48px, env(safe-area-inset-top)) 20px 32px; display: flex; flex-direction: column; min-height: 100vh; min-height: 100dvh; }
.native .lgn { padding-top: calc(env(safe-area-inset-top) + 40px); }
.lg-logo { display: flex; justify-content: center; margin-bottom: 28px; }
.lg-logo .brand-logo img { height: 32px; width: auto; }
.lg-h { margin: 0; font-size: 26px; line-height: 1.15; font-weight: 600; letter-spacing: -0.03em; }
.lg-p { margin: 8px 0 0; color: var(--muted); font-size: 15px; line-height: 1.45; }
.lg-form { display: flex; flex-direction: column; margin-top: 22px; }
.lg-lbl { font-size: 13px; font-weight: 500; color: var(--muted); margin: 0 4px 8px; }
.lg-in { height: 52px; border-radius: 16px; border: 1.5px solid transparent; background: var(--field, var(--chip)); padding: 0 16px; font-weight: 500; font-size: 17px; line-height: 1; font-family: inherit; color: var(--ink); width: 100%; }
.lg-in:focus { outline: none; border-color: var(--ink); }
.lg-in.bad { border-color: var(--rose); }
.lg-code { text-transform: uppercase; letter-spacing: 0.08em; font-weight: 600; }
.lg-code::placeholder { text-transform: none; letter-spacing: normal; font-weight: 500; }
.lg-err { min-height: 18px; margin: 6px 4px 0; font-size: 13px; color: var(--rose); }
.lg-err:empty { min-height: 0; margin: 0; }
.lgn .btn.lg-main { margin-top: 14px; height: 46px; border-radius: 23px; background: var(--ink); color: var(--bg); font-weight: 600; }
.lgn .btn.lg-main:disabled { opacity: 0.35; }
.lg-methods { display: flex; flex-direction: column; gap: 8px; margin-top: 22px; }
.lg-methods .btn.lg-main { margin-top: 0; }
.lgn .btn.lg-alt { height: 46px; border-radius: 23px; background: var(--chip); color: var(--ink); font-weight: 600; }
.lgn .btn svg { width: 18px; height: 18px; margin-right: 8px; vertical-align: -3px; }
.lg-apple svg { margin-top: -2px; }
.lg-more svg { margin: 0 0 0 6px !important; }
#lg-hidden { display: flex; flex-direction: column; gap: 8px; }
#lg-hidden[hidden] { display: none; }
.lgn .wl-or { margin: 10px 0 4px; font-weight: 500; }
.lg-link { align-self: center; margin-top: 18px; border: 0; background: none; color: var(--ink); font-weight: 600; font-size: 13px; line-height: 1.4; font-family: inherit; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; padding: 6px; }
.lg-link.left { align-self: flex-start; margin: 6px 0 0 -6px; font-weight: 500; color: var(--ink-2); }
.lg-link:disabled { color: var(--muted); cursor: default; }
.lg-note { font-size: 13px; color: var(--muted); text-align: center; margin: 2px 0 0; }
.lg-hint { margin-top: 14px; font-size: 13px; color: var(--muted); line-height: 1.45; text-align: center; }
.lg-hint.bad { color: var(--rose); }
.lg-priv { margin-top: auto; padding-top: 32px; align-self: center; border: 0; background: none; color: var(--muted); font-weight: 500; font-size: 12px; line-height: 1.4; font-family: inherit; text-decoration: underline; cursor: pointer; }
.lgn.sub { padding-top: max(16px, env(safe-area-inset-top)); }
.lg-nav { display: grid; grid-template-columns: 44px 1fr 44px; align-items: center; margin: 0 -8px 12px; }
.lg-nav b { text-align: center; font-size: 17px; font-weight: 600; }
.lg-back { width: 44px; height: 44px; border-radius: 22px; border: 0; background: var(--card); color: var(--ink); display: grid; place-items: center; box-shadow: inset 0 0 0 1px var(--line); cursor: pointer; }
.lg-back svg { width: 20px; height: 20px; }
.otp { position: relative; display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; margin-top: 22px; cursor: text; }
.otp input { position: absolute; inset: 0; opacity: 0; width: 100%; height: 100%; font-size: 16px; border: 0; }
.otp-c { height: 54px; border-radius: 14px; background: var(--card); box-shadow: inset 0 0 0 1px var(--line); display: grid; place-items: center; font-size: 22px; font-weight: 600; font-variant-numeric: tabular-nums; }
.otp-c.cur { box-shadow: inset 0 0 0 2px var(--ink); }

/* ---------- 4.4.0: вторая строка проекта — до двух строк ---------- */
.lrow-s.pj { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
/* «Ещё»: вкладки листаются по горизонтали, «Настройки» не упирается в край */
#ms-tabs { grid-auto-columns: max-content; overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none; scroll-padding: 0 16px; }
#ms-tabs::-webkit-scrollbar { display: none; }
#ms-tabs button { padding: 0 16px; scroll-snap-align: start; white-space: nowrap; }
#ms-tabs::after { content: ""; flex: none; width: 12px; }
.ok-t { color: var(--good, #3f7a52); font-weight: 600; }
/* ---------- 4.4.0: пустые блоки — одна строка с действием ---------- */
.erows { display: flex; flex-direction: column; gap: 10px; margin: 6px 0 14px; }
.erow { display: flex; align-items: center; gap: 12px; min-height: 64px; padding: 10px 12px 10px 14px; border-radius: 22px; background: var(--card); box-shadow: inset 0 0 0 1px var(--line); }
.erow.slim { min-height: 48px; padding-top: 6px; padding-bottom: 6px; }
.erow-ico { width: 38px; height: 38px; flex: none; border-radius: 19px; background: var(--chip); color: var(--ink-2); display: grid; place-items: center; }
.erow.slim .erow-ico { width: 32px; height: 32px; }
.erow-ico svg { width: 18px; height: 18px; }
.erow-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.erow-main b { font-size: 15px; font-weight: 600; color: var(--ink); line-height: 1.25; }
.erow-main span { font-size: 13px; color: var(--muted); line-height: 1.3; }
.erow .erow-btn { flex: none; height: 38px; padding: 0 16px; border-radius: 19px; background: var(--ink); color: var(--bg); font-weight: 600; font-size: 14px; }
.sq-wd.is-empty { align-self: start; }
body.desk .erow { border-radius: 24px; box-shadow: inset 0 0 0 1px var(--line), 0 1px 2px rgba(17,19,24,.04); }
.st-nochart { margin: 16px 0 6px; padding: 20px 14px; border-radius: 18px; background: color-mix(in srgb, var(--on-dark, #fff) 8%, transparent); text-align: center; font-size: 14px; font-weight: 500; opacity: .85; }
/* ---------- 4.4.0: «Настройка студии» на «Сегодня» и в «Первой настройке» ---------- */
.setup-card { background: var(--card); border-radius: 24px; padding: 16px 16px 14px; box-shadow: inset 0 0 0 1px var(--line), 0 1px 2px rgba(17,19,24,.04); margin: 4px 0 14px; display: flex; flex-direction: column; gap: 12px; }
.su-top { display: flex; justify-content: space-between; align-items: baseline; }
.su-top b { font-size: 16px; font-weight: 600; }
.su-top span { font-size: 13px; color: var(--muted); }
.su-bar { height: 8px; border-radius: 4px; background: var(--chip); overflow: hidden; }
.su-bar i { display: block; height: 100%; background: var(--accent); border-radius: 4px; }
.su-next { display: flex; align-items: center; gap: 12px; }
.su-num { width: 38px; height: 38px; flex: none; border-radius: 19px; background: var(--chip); display: grid; place-items: center; font-weight: 600; font-size: 14px; color: var(--ink); }
.su-num.ok { background: var(--accent); color: #111318; }
.su-num svg { width: 16px; height: 16px; }
.su-t { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.su-t b { font-size: 15px; font-weight: 600; line-height: 1.25; }
.su-t span { font-size: 13px; color: var(--muted); line-height: 1.3; }
.setup-card .su-go { flex: none; height: 38px; padding: 0 16px; border-radius: 19px; background: var(--ink); color: var(--bg); font-weight: 600; }
.setup-card .su-all { align-self: flex-start; height: 38px; padding: 0 16px; border-radius: 19px; background: var(--chip); color: var(--ink); font-weight: 600; }
.setup-card.folded { flex-direction: row; align-items: center; justify-content: space-between; padding: 10px 8px 10px 16px; font-size: 14px; font-weight: 500; }
.setup-card.folded span { display: flex; align-items: center; gap: 8px; }
.setup-card.folded svg { width: 16px; height: 16px; }
.su-x { width: 44px; height: 44px; border: 0; border-radius: 22px; background: none; color: var(--muted); display: grid; place-items: center; cursor: pointer; }
.su-x svg { width: 18px; height: 18px; }
.su-row .su-num { width: 30px; height: 30px; font-size: 13px; margin-right: 10px; }
.su-row.done b { text-decoration: line-through; color: var(--muted); font-weight: 500; }
.su-later { font-size: 12px; font-weight: 600; padding: 4px 10px; border-radius: 12px; background: var(--chip); color: var(--ink-2); margin-right: 6px; white-space: nowrap; }
/* ---------- 4.4.0: доступность ---------- */
/* Масштабирование разрешено — поля не мельче 16 px, чтобы iOS не увеличивал страницу при вводе */
@media (pointer: coarse) {
  :where(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), select, textarea) { font-size: 16px; }
  label.mini input, label.mini select, .rate-row input, .type-row input[type="text"], .type-row select { font-size: 16px; }
}
/* Зоны нажатия не меньше 44×44: видимый круг остаётся прежним */
.lrow-x, .sheet-x { position: relative; }
.lrow-x::before, .sheet-x::before { content: ""; position: absolute; inset: -6px; }
.pills .pill, .pill-btn { position: relative; min-height: 40px; }
.pills .pill::before, .pill-btn::before { content: ""; position: absolute; inset: -2px 0; }
.pills { gap: 8px; }
.cal-grid .cal-day, .cal-grid > button { min-height: 44px; }
.cd-text { margin: 8px 0 18px; font-size: 16px; line-height: 1.45; color: var(--ink); }
.cd-btns { display: flex; flex-direction: column; gap: 6px; }
.cd-ok { min-height: 46px; border: 0; background: none; color: var(--rose); font-weight: 600; font-size: 15px; font-family: inherit; cursor: pointer; }
/* ---------- 4.4.0: лимиты ИИ ---------- */
.ai-limit { display: flex; align-items: center; gap: 10px; justify-content: space-between; background: var(--sand-bg); color: var(--sand); border-radius: 16px; padding: 10px 12px 10px 14px; margin: 0 0 8px; font-size: 14px; font-weight: 500; line-height: 1.4; }
.ai-limit .btn { flex: none; }
.ai-usage { font-size: 12px; color: var(--muted); text-align: center; margin-top: 6px; }
.ai-usage.low { color: var(--sand); }
.ai-usage.zero { color: var(--rose); }
.sq-card.setup-card { display: flex; flex-direction: column; gap: 14px; padding: 18px 20px; margin: 0; }
.sq-card.setup-card.folded { flex-direction: row; }

/* ---------- 4.4.1: «Нужно решить» — одна карточка, текст слева, тихая вторая кнопка ---------- */
.dc-title, .dc-sub { text-align: left; padding-left: 2px; padding-right: 2px; }
.dc-quiet { flex: none; height: 40px; padding: 0 12px; margin-left: -12px; border: 0; background: none; color: var(--ink-2); font-weight: 600; font-size: 14px; font-family: inherit; cursor: pointer; border-radius: 20px; }
.dc-quiet:active { background: rgba(255,255,255,.6); }
.deck-next { display: flex; align-items: center; gap: 4px; margin: 12px auto 0; height: 36px; padding: 0 12px; border: 0; background: none; color: var(--muted); font-size: 13px; font-weight: 600; font-family: inherit; cursor: pointer; }
.deck-next svg { width: 14px; height: 14px; }

/* ---------- 4.4.1: «День по часам» — вертикальная линия дня, «сейчас» — точкой на ней ---------- */
.cnts > .cnt-go { display: inline-flex; align-items: center; gap: 6px; flex-shrink: 0; border: 0; background: none; padding: 0; font: inherit; color: inherit; cursor: pointer; }
.cnts > .cnt-go + .cnt-go::before { content: ""; width: 1px; height: 18px; background: var(--line); margin-right: 6px; }
.td-day { position: relative; --rail-x: 75px; }
.td-day::before { content: ""; position: absolute; left: var(--rail-x); top: 18px; bottom: 18px; width: 2px; border-radius: 1px; background: var(--line); pointer-events: none; }
.td-day::after { content: ""; position: absolute; left: var(--rail-x); top: 18px; width: 2px; height: max(0px, calc(var(--now-y, 0px) - 18px)); border-radius: 1px; background: color-mix(in srgb, var(--ink) 35%, transparent); pointer-events: none; }
.td-row { position: relative; border-bottom: 0; }
.td-row .dot { position: relative; z-index: 1; box-shadow: 0 0 0 3px var(--card); }
.td-row .dot.ring { background: var(--card); box-shadow: inset 0 0 0 1.5px var(--ink), 0 0 0 3px var(--card); }
.td-row .lrow-s { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.td-now { position: relative; display: flex; align-items: center; gap: 12px; height: 30px; padding: 0 14px 0 16px; font-size: 12px; font-weight: 500; color: var(--ink-2); }
.td-now b { width: 44px; flex: none; font-size: 12px; font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; }
.td-now i { position: relative; z-index: 1; width: 10px; height: 10px; margin: 0 -1px; flex: none; border-radius: 50%; background: #34a853; box-shadow: 0 0 0 3px var(--card); }
.td-now i::after { content: ""; position: absolute; inset: -6px; border-radius: 50%; background: #34a853; opacity: .45; animation: now-pulse 1.8s ease-out infinite; z-index: -1; }
.td-now span { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--muted); }
@keyframes now-pulse { from { transform: scale(.6); opacity: .6; } to { transform: scale(1.6); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .td-now i::after { animation: none; } }
/* ---------- 4.4.1: вход — одна главная кнопка, остальные способы — строкой иконок ---------- */
.lgn .lg-main svg { width: 18px; height: 18px; margin-right: 8px; vertical-align: -3px; }
.lg-or { display: flex; align-items: center; gap: 12px; margin: 26px 0 14px; font-size: 13px; font-weight: 500; color: var(--muted); }
.lg-or::before, .lg-or::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.lg-alts { display: flex; justify-content: center; gap: 8px; flex-wrap: wrap; }
.lg-alt-ico { display: flex; flex-direction: column; align-items: center; gap: 6px; width: 72px; border: 0; background: none; padding: 0; font-family: inherit; cursor: pointer; color: var(--ink); }
.lg-alt-ico span { width: 56px; height: 56px; border-radius: 28px; background: var(--card); box-shadow: inset 0 0 0 1px var(--line), 0 1px 2px rgba(17,19,24,.05); display: grid; place-items: center; transition: transform .12s; }
.lg-alt-ico:active span { transform: scale(.94); }
.lg-alt-ico svg { width: 22px; height: 22px; }
.lg-alt-ico small { font-size: 12px; font-weight: 500; color: var(--ink-2); line-height: 1.25; text-align: center; }
.lg-alt-ico:disabled { opacity: .5; }

/* 4.4.1 — длинные должности и роли не выходят за рамки */
.section-head h2 { min-width: 0; overflow-wrap: anywhere; }
.section-head .count { white-space: nowrap; flex: none; }
.cat-chips { min-width: 0; max-width: 100%; }
.cat { display: inline-block; max-width: 100%; height: auto; min-height: 20px; line-height: 20px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; vertical-align: middle; box-sizing: border-box; }
.prof2-role, .sq-who, .sq-who span, .sq-profhead, .list-row .grow, .list-row .grow > b, .pcard-name { min-width: 0; overflow-wrap: anywhere; }

/* 4.4.1 — барабан времени: тянуть можно по всей ширине, не только по цифрам */
.whl { gap: 0; padding: 0 8px; }
.whl-col { flex: 1 1 0; width: auto; min-width: 0; touch-action: pan-y; cursor: grab; user-select: none; -webkit-user-select: none; }
.whl-col:active { cursor: grabbing; }
.whl-col[data-col="h"] .whl-it { text-align: right; padding-right: 22px; }
.whl-col[data-col="m"] .whl-it { text-align: left; padding-left: 22px; }
.whl-sep { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -54%); z-index: 2; pointer-events: none; }

/* 4.4.1 — ползунок размера текста */
.ap-size { display: flex; align-items: center; gap: 12px; margin-top: 6px; }
.ap-size input { flex: 1; min-width: 0; accent-color: var(--ink); height: 28px; }
.ap-a { flex: none; font-weight: 600; color: var(--ink-2); line-height: 1; }
.ap-a.s { font-size: 12px; }
.ap-a.l { font-size: 20px; }

/* 4.4.1 — день графика: статус каждого сотрудника */
.offd { display: flex; flex-direction: column; gap: 6px; max-height: 60vh; }
.offd-row { display: flex; flex-direction: column; gap: 8px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.offd-row:last-child { border-bottom: 0; }
.offd-who { display: flex; align-items: center; gap: 10px; min-width: 0; }
.offd-who b { font-weight: 600; font-size: 15px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.offd-who .ava { width: 30px; height: 30px; font-size: 11px; flex: none; }
.offd-seg { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; padding: 3px; border-radius: 12px; background: var(--surface-2); }
.offd-seg button { height: 32px; border: 0; border-radius: 9px; background: none; font: inherit; font-size: 13px; font-weight: 600; color: var(--ink-2); cursor: pointer; padding: 0 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.offd-seg button.on { background: var(--surface); color: var(--ink); box-shadow: 0 1px 3px rgba(17, 19, 24, .12); }
.offd-seg button.on.off { background: var(--st-orange-bg); color: var(--st-orange); }
.offd-seg button.on.vacation { background: color-mix(in srgb, var(--st-green) 16%, var(--surface)); color: var(--st-green); }
.offd-seg button.on.sick { background: var(--st-red-bg); color: var(--st-red); }
.rem-row .lrow-t span, .rem-row .lrow-s { white-space: normal; overflow: visible; text-overflow: clip; display: block; }

/* 4.4.2 — «Статистика»: без большой зелёной плашки. Белая карточка, нейтральные столбцы,
   цвет — только у выбранного месяца и у роста (как в Apple Health / Revolut). */
.st-head { margin: 4px 0 0; padding: 18px 20px 20px; border-radius: 24px; background: var(--surface); color: var(--ink); box-shadow: 0 1px 2px rgba(17, 19, 24, .04), 0 8px 24px rgba(17, 19, 24, .06);
  --on-dark: var(--ink); --on-dark-muted: var(--muted); --dark-line: var(--line); --dark-btn: var(--surface-2); --hot-on-dark: var(--st-red); }
.st-head .dk-label { margin-top: 0 !important; color: var(--muted); }
.st-head .st-delta .pilld { background: var(--st-green-bg); color: var(--st-green); }
.st-head .st-delta .pilld.down { background: var(--st-red-bg); color: var(--st-red); }
.st-col i { width: 28px; border-radius: 8px; background: var(--surface-2); }
:root[data-theme="dark"] .st-col i { background: rgba(255, 255, 255, .12); }
.st-col.sel i { background: var(--accent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ink) 12%, transparent); }
.st-head .bar6 { background: var(--surface-2); }
.st-head .bar6 > i, :root[data-theme="dark"] .st-head .bar6 > i { background: var(--ink); }
.st-head #plan-edit { background: var(--surface-2) !important; color: var(--ink) !important; }
.st-kpis { margin: 12px 0 0; padding: 4px 20px; border-radius: 24px; background: var(--surface); }
.st-kpi b { font-size: 32px; }
.fun-cap { margin-top: 12px; }
.fun-bar { height: 32px; border-radius: 10px; background: var(--accent); color: var(--accent-ink, #111318); font-size: 14px; }
/* Воронка (вкладка «Воронка»): воздух между строками, число и доля через точку */
.funnel-row { margin-bottom: 18px; }
.funnel-top { align-items: baseline; gap: 12px; margin-bottom: 8px; }
.funnel-top .pct { margin-left: 0; font-weight: 500; }
.funnel-top .pct::before { content: " · "; }
.funnel-bar { height: 8px; border-radius: 4px; }
.funnel-bar i { border-radius: 4px; }
.src-bar { height: 8px !important; border-radius: 4px; background: var(--surface-2); overflow: hidden; }
.src-bar i { height: 100%; border-radius: 4px; }
/* 4.4.2 — «сейчас»: просто зелёная точка, мигает; без тёмной обводки */
.td-now .now-dot { position: relative; z-index: 1; display: block; width: 10px; height: 10px; margin: 0 -1px; flex: none; border-radius: 50%; background: #34a853; box-shadow: none; border: 0; font-style: normal; }
.td-now .now-dot::after { content: ""; position: absolute; inset: -5px; border-radius: 50%; background: #34a853; opacity: .4; animation: now-pulse 1.6s ease-out infinite; }
@media (prefers-reduced-motion: reduce) { .td-now .now-dot::after { animation: none; opacity: .25; } }
/* 4.4.2 — плитки профиля компактные: иконка слева, текст рядом и переносится */
.prof2-tile { min-height: 0; flex-direction: row; align-items: center; gap: 12px; padding: 14px; border-radius: 20px; }
.prof2-tile .lrow-ico { margin: 0; flex: none; }
.prof2-tile .p2t { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.prof2-tile b { margin: 0; font-size: 15px; line-height: 1.2; }
.prof2-tile small { line-height: 1.25; overflow-wrap: anywhere; }
.rem-row.done { opacity: .6; }
/* 4.4.2 — выбор сотрудников: имя всегда видно, должность — короткой меткой, не шире строки */
.pick .pick-name { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 3px; }
.pick .pick-name .pn { font-weight: 600; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.role-tag { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pick .pick-name small { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.role-tag { display: inline-flex; gap: 4px; align-items: center; }
.role-tag .rt { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.role-tag .rt-more { flex: none; opacity: .8; }
/* 4.4.5 — клиенты: у каждого кружок с инициалами (раньше слева стояла буква алфавита только у первого на букву) */
.lrow.cl > .ava { width: 40px; height: 40px; font-size: 14px; flex: none; background: hsl(var(--ava-h, 220) 60% 88%); color: hsl(var(--ava-h, 220) 45% 28%); }
:root[data-theme="dark"] .lrow.cl > .ava { background: hsl(var(--ava-h, 220) 30% 26%); color: hsl(var(--ava-h, 220) 60% 82%); }

/* 4.5.0 — «Уведомления» (входящие) */
.ibx-bell { position: relative; }
.ibx-dot { position: absolute; top: 4px; right: 4px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px; background: var(--hot-dot, #d9473b); color: #fff; font-size: 10px; font-weight: 700; font-style: normal; line-height: 16px; text-align: center; box-shadow: 0 0 0 2px var(--card); }
.ibx-dot[hidden] { display: none; }
.ibx-top { display: flex; align-items: center; justify-content: space-between; margin: 0 4px 4px; }
.ibx-row .lrow-t span { white-space: normal; }
.ibx-row .ibx-prev { white-space: normal; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
.ibx-row .lrow-side { flex-direction: column; align-items: flex-end; gap: 6px; font-size: 12px; color: var(--muted); }
.ibx-row.unread .lrow-t { font-weight: 700; }
.ibx-row:not(.unread) .lrow-t { font-weight: 500; color: var(--ink-2); }
.ibx-new { width: 8px; height: 8px; border-radius: 50%; background: #34a853; display: block; }
.ibx-card { padding: 18px; }
.ibx-head { display: flex; gap: 12px; align-items: flex-start; }
.ibx-title { font-size: 17px; font-weight: 600; line-height: 1.3; }
.ibx-body { margin-top: 14px; font-size: 15px; line-height: 1.55; color: var(--ink); overflow-wrap: anywhere; }
.ibx-acts { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }

/* 4.5.1 — объявления: кто прочитал */
.bc-stat { display: flex; flex-direction: column; gap: 6px; width: 100%; margin-top: 12px; padding: 10px 12px; border: 0; border-radius: 12px; background: var(--surface-2); color: var(--ink-2); font: inherit; font-size: 13px; text-align: left; cursor: pointer; }
.bc-stat b { color: var(--ink); }
.bc-bar { height: 4px; border-radius: 2px; background: var(--line); overflow: hidden; }
.bc-bar i { display: block; height: 100%; background: #34a853; border-radius: 2px; }
.bc-more { display: inline-flex; align-items: center; gap: 2px; font-weight: 600; color: var(--ink); }
.bc-more svg { width: 14px; height: 14px; }
.bc-focus { box-shadow: 0 0 0 2px var(--accent), var(--card-shadow, none); }
.bcp { font-size: 13px; display: inline-flex; align-items: center; gap: 4px; }
.bcp svg { width: 14px; height: 14px; }
.bcp.ok { color: var(--st-green); font-weight: 600; }
.bcp.seen { color: var(--ink-2); }
.bcp.no { color: var(--muted); }
.bc-ppl .ava { background: hsl(var(--ava-h, 220) 60% 88%); color: hsl(var(--ava-h, 220) 45% 28%); }
/* 4.5.2 — удаление уведомлений */
.ibx-row { position: relative; }
.ibx-del { display: none; position: absolute; right: 8px; top: 50%; transform: translateY(-50%); width: 28px; height: 28px; border-radius: 50%; background: var(--surface-2); color: var(--ink-2); align-items: center; justify-content: center; cursor: pointer; }
.ibx-del svg { width: 14px; height: 14px; }
@media (hover: hover) { .ibx-row:hover .ibx-del { display: inline-flex; } .ibx-row:hover .lrow-side { visibility: hidden; } }
.ibx-top { min-height: 24px; }
.ibx-lst .card.lrow { background: var(--card); }

/* Пункты правок (чек-лист монтажёра) */
.rev-check:empty { display: none; }
.rev-check { margin-top: 10px; }
.rc-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; font-size: 14px; margin-bottom: 6px; }
.rc-head .rc-ok { color: var(--ok, #3f8a3a); font-weight: 600; }
.rc-list { display: flex; flex-direction: column; }
.rc-row { display: flex; gap: 10px; align-items: flex-start; padding: 8px 0; border-top: 1px solid var(--line); font-size: 15px; line-height: 1.35; cursor: pointer; }
.rc-row:first-child { border-top: 0; }
.rc-row input { width: 20px; height: 20px; margin-top: 1px; flex-shrink: 0; accent-color: var(--accent); }
.rc-row.done .grow { color: var(--muted); text-decoration: line-through; text-decoration-color: rgba(127,127,127,.5); }
.rc-tc { display: inline-block; font-variant-numeric: tabular-nums; font-size: 12px; font-weight: 700; padding: 1px 7px; border-radius: 8px; background: var(--surface-2); margin-right: 6px; }
@keyframes wa-ai-spin { to { transform: rotate(360deg); } }
#wa-ai.spin svg { animation: wa-ai-spin 0.9s linear infinite; }

/* Живые цифры: подсказка при наведении / первом нажатии и «из чего сложилась цифра» */
.hint-pop { position: fixed; z-index: 9999; max-width: 280px; padding: 10px 14px; border-radius: 14px; background: #15171a; color: #f2f4ef; box-shadow: 0 12px 40px rgba(0, 0, 0, 0.35); font-size: 13px; line-height: 1.4; pointer-events: none; opacity: 0; transform: translateY(4px); transition: opacity 0.12s, transform 0.12s; }
.hint-pop.on { opacity: 1; transform: none; }
.hint-pop b { display: block; font-size: 14px; font-weight: 700; margin-bottom: 2px; }
.hint-pop span { display: block; color: #c9cec4; }
.hint-pop em { display: block; margin-top: 6px; font-style: normal; font-size: 12px; color: var(--accent); }
:root[data-theme="dark"] .hint-pop { background: #f2f4ef; color: #15171a; }
:root[data-theme="dark"] .hint-pop span { color: #4a4f47; }
:root[data-theme="dark"] .hint-pop em { color: var(--link); }
[data-drill] { cursor: pointer; }
[data-hint]:not(button):not(.st-col) { cursor: default; }
[data-drill][data-hint] { cursor: pointer; }
.drill-head { margin: 4px 4px 12px; }
.drill-total { font-size: 30px; font-weight: 800; letter-spacing: -0.02em; margin-top: 4px; }
.lrow-t b { margin-left: auto; font-weight: 700; white-space: nowrap; }

/* Контакты: маленькая буква слева над группой, прилипает сверху (как в iPhone) */
.az-head { position: sticky; top: env(safe-area-inset-top); z-index: 3; margin: 10px -4px 0; padding: 6px 4px 4px; background: var(--bg); }
.az-head span { font-size: 13px; font-weight: 700; color: var(--muted); letter-spacing: 0; }

/* Компьютер: вместо свайпа — иконка «В архив» при наведении: строка сдвигает свои кнопки влево, иконка справа (правый клик — меню) */
.row-hover-act { display: none; }
@media (hover: hover) and (pointer: fine) {
  .swipe > .row-hover-act { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); z-index: 2; display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; padding: 0; border: 0; border-radius: 17px; background: var(--chip); color: var(--muted); cursor: pointer; opacity: 0; pointer-events: none; transition: opacity 0.12s; }
  .swipe > .row-hover-act svg { width: 16px; height: 16px; }
  .swipe > .card { transition: padding-right 0.12s; }
  .swipe:hover > .card { padding-right: 52px; }
  .swipe:hover > .row-hover-act, .swipe > .row-hover-act:focus-visible { opacity: 1; pointer-events: auto; }
  .swipe > .row-hover-act:hover { background: var(--st-red-bg); color: var(--st-red); }
}


/* Рейтинг 1–5 рядом с именем при назначении */
.pick-rate { flex: none; margin-left: auto; font-size: 12px; font-weight: 700; color: var(--ink-2); background: var(--chip); border-radius: 10px; padding: 2px 7px; }
.pick-rate.none { color: var(--muted); font-weight: 500; }
.rating.none { font-weight: 500; color: var(--muted); }

/* Пункты правок: «Весь ролик», файлы, комментарий менеджера */
.rc-tc.all { background: var(--chip); color: var(--ink-2); }
.rc-item + .rc-item { margin-top: 2px; }
.rc-att { display: flex; flex-wrap: wrap; gap: 6px; margin: 2px 0 6px 30px; }
.rc-note { margin: 0 0 6px 30px; font-size: 13px; color: var(--ink-2); background: var(--chip); border-radius: 10px; padding: 6px 10px; }
.rc-ep { margin: 10px 0 4px; font-size: 12px; font-weight: 700; color: var(--muted, #8a8f98); text-transform: uppercase; letter-spacing: .03em; }
.rc-line { display: flex; align-items: flex-start; gap: 6px; }
.rc-line > .rc-row { flex: 1; min-width: 0; }
.rc-addnote { flex: none; width: 32px; height: 32px; border: 0; border-radius: 16px; background: none; color: var(--muted); display: grid; place-items: center; cursor: pointer; }
.rc-addnote:hover { background: var(--chip); color: var(--ink); }
.rc-addnote svg { width: 16px; height: 16px; }
.rc-foot { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.rc-warn { margin-top: 8px; padding: 8px 10px; border-radius: 10px; background: var(--st-red-bg); color: var(--st-red); font-size: 13px; font-weight: 600; }

/* Серии сериала в проекте */
.ep-n { width: 28px; height: 28px; border-radius: 9px; background: var(--chip); display: grid; place-items: center; font-size: 13px; font-weight: 700; flex: none; }
.ep-fold > summary { list-style: none; padding: 10px 14px 4px; cursor: pointer; }
.ep-fold > summary::-webkit-details-marker { display: none; }

/* Демо-сервер: плашка «← На сайт» (showDemoPill) */
.demo-pill { position: fixed; z-index: 25; right: 12px; bottom: calc(92px + env(safe-area-inset-bottom)); display: flex; align-items: center; gap: 6px; padding: 6px 6px 6px 12px; border-radius: 999px; background: var(--dark, #111318); color: #f1f2f4; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25); font-size: 13px; font-weight: 500; max-width: calc(100vw - 24px); }
.demo-pill .dp-t { white-space: nowrap; opacity: 0.75; }
.demo-pill .dp-btn { display: inline-flex; align-items: center; height: 32px; padding: 0 12px; border-radius: 999px; background: #cfe0ec; color: #111318; font-weight: 600; text-decoration: none; white-space: nowrap; }
.demo-pill .dp-btn.ghost { background: rgba(255, 255, 255, 0.12); color: #f1f2f4; }
@media (max-width: 520px) { .demo-pill .dp-t { display: none; } }
body.desk .demo-pill { right: 16px; bottom: 16px; }

/* Вход и выход: за карточкой — размытый интерфейс CRM (loginShell) */
.lg-bg { position: fixed; inset: 0; z-index: 0; display: flex; gap: 16px; padding: 16px; filter: blur(8px); opacity: 0.9; pointer-events: none; overflow: hidden; }
.lg-bg i { display: block; height: 12px; border-radius: 6px; background: var(--line, rgba(127, 127, 127, 0.25)); margin: 10px 0; }
.lgb-side { display: none; width: 220px; flex: none; border-radius: 24px; background: var(--surface); padding: 18px; }
.lgb-main { flex: 1; min-width: 0; }
.lgb-top { height: 56px; border-radius: 18px; background: var(--surface); padding: 10px 18px; margin-bottom: 16px; }
.lgb-grid { display: grid; grid-template-columns: 1fr; gap: 12px; }
.lgb-card { height: 120px; border-radius: 22px; background: var(--surface); padding: 14px 18px; }
.lgb-tab { position: fixed; left: 16px; right: 16px; bottom: 14px; height: 66px; border-radius: 26px; background: var(--dark, #1c1c22); }
.lg-over { position: relative; z-index: 1; }
@media (min-width: 760px) {
  .lgb-side { display: block; }
  .lgb-grid { grid-template-columns: repeat(3, 1fr); }
  .lgb-tab { display: none; }
  .lgn.lg-over { min-height: 0; margin: 8vh auto; background: var(--surface); border-radius: 28px; box-shadow: 0 30px 80px -30px rgba(0, 0, 0, 0.45), inset 0 0 0 1px var(--line); padding: 36px 32px 28px; }
}
@media (max-width: 759px) { .lgn.lg-over { background: var(--bg); } }