/* LifeOS — «пульт видеоинженера».
   Цвет несёт смысл, а не украшает: синий — Инженер, янтарный — Контент, зелёный — Личное (как tally-индикаторы камер),
   красный «в эфире» — то, что идёт сейчас. Главная кнопка — нейтральная (тёмная в светлой теме, светлая в тёмной).
   Системные шрифты (SF на iPhone, Segoe UI Variable на ПК); моноширинный — только для таймкода. Без декоративных градиентов. */
:root {
  --font: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI Variable Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", "Cascadia Mono", Consolas, Menlo, monospace;
  /* шкала размеров текста */
  --fs-xs: 12.5px; --fs-sm: 13.5px; --fs-md: 15px; --fs-lg: 18px; --fs-xl: 24px; --fs-xxl: 30px;

  /* светлая тема — «студия днём» */
  --bg: #eff1f4;
  --side-bg: #e9ecf0;
  --glass: #ffffff;
  --glass-strong: #ffffff;
  --fill: #f2f4f7;
  --fill-hover: #e7eaef;
  --stroke: #dfe3e9;
  --edge: #dfe3e9;
  --text: #1b1e23;
  /* вторичный и бледный текст — не ниже 4.5:1 */
  --muted: #5d6470;
  --faint: #646b78;
  /* главная кнопка, отмеченные галочки и чипы — нейтральные «чернила» */
  --accent: #1b1e23; --accent-text: #ffffff;
  --primary: #0b62c4; --link: #0b62c4;
  /* цвета-тексты (бейджи, суммы), не ниже 4.5:1; полосы и метки направлений — в --c-* */
  --blue: #0b62c4; --purple: #a85407; --green: #0b7543; --orange: #b45309; --red: #c81e30; --teal: #0b62c4;
  --c-work: #2f7de1; --c-content: #e0861a; --c-family: #1f9d63; --c-personal: #e0861a;
  --live: #c9282e;
  --shadow: 0 1px 2px rgba(20, 24, 31, .06), 0 1px 3px rgba(20, 24, 31, .04);
  --shadow-lg: 0 18px 50px rgba(20, 24, 31, .18);
  --blur: none;
  --page-bg: var(--bg);
  /* старые имена оставлены для совместимости — без градиентов */
  --grad: var(--c-work);
  --nav-on: var(--glass);
  /* Скругления — одна шкала, у каждого размера своя роль:
     xs — индикаторы и полоски, sm — метки, пилюли, мелкие вставки, md — кнопки, поля, строки списков,
     lg — карточки и панели, xl — всплывающие поверхности (окна, мобильное меню), full — таблетки и круги */
  --r-xs: 4px; --r-sm: 8px; --r-md: 12px; --r-lg: 16px; --r-xl: 22px; --r-full: 999px;
  --radius: var(--r-lg);
  font-family: var(--font); font-size: var(--fs-md); line-height: 1.45; color-scheme: light;
}
/* тёмная тема — «пульт»: графит, а не чёрный */
:root[data-theme="dark"] {
  --bg: #16181c;
  --side-bg: #131519;
  --glass: #1d2025;
  --glass-strong: #23262c;
  --fill: #262a31;
  --fill-hover: #2f343c;
  --stroke: #30343c;
  --edge: #30343c;
  --text: #e8eaee;
  --muted: #a3a9b6;
  --faint: #8a91a0;
  --accent: #e8eaee; --accent-text: #16181c;
  --primary: #6aa9ff; --link: #6aa9ff;
  --blue: #6aa9ff; --purple: #f2a93b; --green: #4cc38a; --orange: #f5a524; --red: #ff6b6b; --teal: #6aa9ff;
  --c-work: #4c9aff; --c-content: #f2a93b; --c-family: #4cc38a; --c-personal: #f2a93b;
  --live: #ff5a52;
  --shadow: none;
  --shadow-lg: 0 24px 70px rgba(0, 0, 0, .55);
  --page-bg: var(--bg);
  --nav-on: var(--glass-strong);
  color-scheme: dark;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; color: var(--text); }
body { background: var(--page-bg); background-color: var(--bg); background-attachment: fixed; -webkit-font-smoothing: antialiased; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
a { color: var(--link); text-decoration: none; }
/* рамка фокуса с клавиатуры — на всём, что нажимается (мышью не показывается) */
:focus { outline: none; }
:focus-visible { outline: 2px solid var(--link); outline-offset: 2px; }
/* у полей своя подсветка (рамка + ореол), второй контур не нужен */
input:focus-visible, select:focus-visible, textarea:focus-visible { outline: none; }
h1, h2, h3 { font-weight: 700; }
::selection { background: color-mix(in srgb, var(--accent) 30%, transparent); }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-thumb { background: var(--fill-hover); border-radius: var(--r-md); border: 3px solid transparent; background-clip: content-box; }
*::-webkit-scrollbar-track { background: transparent; }

/* белые карточки с мягкой тенью */
.glass, .card, .modal, .toast, .calcard {
  background: var(--glass);
  border: 1px solid var(--stroke);
  box-shadow: var(--shadow);
}

/* каркас: слева меню, справа небольшая шапка (поиск, итоги месяца, направление, кнопки) и содержимое */
.layout { display: grid; grid-template-columns: 236px minmax(0, 1fr); height: 100vh; }
.side { background: var(--side-bg); border-right: 1px solid var(--stroke); padding: 18px 14px; display: flex; flex-direction: column; gap: 14px; overflow-y: auto; }
.brand { display: flex; align-items: center; gap: 10px; font-size: 21px; font-weight: 800; letter-spacing: -.02em; color: var(--text); padding: 2px 8px 6px; }
.brand i { width: 30px; height: 30px; border-radius: var(--r-sm); background: var(--accent); position: relative; }
.brand i::after { content: ""; position: absolute; inset: 8px; border-radius: var(--r-xs); border: 2.2px solid var(--accent-text); transform: rotate(45deg); }
/* «tally»-точка на логотипе — красный индикатор, как у камеры в эфире */
.brand i::before { content: ""; position: absolute; right: -3px; top: -3px; width: 9px; height: 9px; border-radius: 50%; background: var(--live); border: 2px solid var(--side-bg); }
.side .spaces { display: none; }
.nav { display: flex; flex-direction: column; gap: 3px; }
.nav button { position: relative; width: 100%; text-align: left; border: 0; background: transparent; padding: 11px 14px; border-radius: var(--r-md); display: flex; align-items: center; gap: 12px; color: var(--muted); font-weight: 600; font-size: 14.5px; transition: background .15s, color .15s; }
.nav button:hover { background: var(--fill); color: var(--text); }
/* активный раздел — светлая «клавиша» с полоской-индикатором слева, без градиента */
.nav button.on { background: var(--nav-on); color: var(--text); box-shadow: var(--shadow); }
.nav button.on::before { content: ""; position: absolute; left: 0; top: 10px; bottom: 10px; width: 3px; border-radius: 0 var(--r-xs) var(--r-xs) 0; background: var(--c-work); }
.nav button.on:hover { background: var(--nav-on); }
.ico { display: inline-flex; width: 24px; height: 24px; align-items: center; justify-content: center; flex: none; }
.ico svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.nav .count { margin-left: auto; font-size: 11px; font-weight: 700; background: var(--red); color: #fff; border-radius: var(--r-full); padding: 1px 8px; }
.col { display: flex; flex-direction: column; min-width: 0; min-height: 0; height: 100vh; }
.top { display: flex; align-items: center; gap: 14px; margin: 14px 28px 0; padding: 8px 10px 8px 14px; background: var(--glass); border: 1px solid var(--stroke); border-radius: var(--r-lg); box-shadow: var(--shadow); flex: none; }
.gsearch { position: relative; flex: 1; max-width: 420px; min-width: 140px; }
.gsearch input[type=search] { background: var(--fill); border-radius: var(--r-md); padding: 9px 14px 9px 38px; }
.gsearch .ico { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); color: var(--faint); pointer-events: none; }
.gsearch .ico svg { width: 18px; height: 18px; }
.sres { position: absolute; left: 0; right: 0; top: calc(100% + 8px); z-index: 30; background: var(--glass-strong); border: 1px solid var(--stroke); border-radius: var(--r-lg); box-shadow: var(--shadow-lg); padding: 6px; max-height: 60vh; overflow-y: auto; min-width: 320px; }
.sres .row { padding: 8px 10px; cursor: pointer; }
.sres .kind { font-size: 11.5px; font-weight: 700; color: var(--primary); background: color-mix(in srgb, var(--primary) 12%, transparent); border-radius: var(--r-full); padding: 2px 9px; flex: none; }
.topnums { display: flex; gap: 22px; margin-left: auto; padding: 0 6px; }
.topnums > div { display: grid; gap: 0; line-height: 1.25; }
.topnums .tl { font-size: 11.5px; color: var(--muted); font-weight: 600; }
.topnums b { font-size: 15px; font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap; }
.top .spaces { display: flex; gap: 2px; background: var(--fill); padding: 3px; border-radius: var(--r-full); margin: 0; }
.spaces button { border: 0; background: transparent; padding: 7px 12px; border-radius: var(--r-full); color: var(--muted); font-size: 13px; font-weight: 600; white-space: nowrap; transition: background .18s, color .18s; }
.spaces button.on { background: var(--glass-strong); color: var(--primary); box-shadow: 0 2px 8px rgba(16, 40, 80, .12); }
.spaces button.on[data-space="content"] { color: var(--c-content); }
.spaces button.on[data-space="personal"] { color: var(--c-family); }
:root[data-theme="dark"] .spaces button.on { color: var(--text); background: var(--fill-hover); box-shadow: none; }
.tools { display: flex; gap: 8px; align-items: center; }
.round { position: relative; width: 38px; height: 38px; border-radius: 50%; padding: 0; display: inline-grid; place-content: center; background: var(--glass); color: var(--muted); border: 1px solid var(--stroke); transition: background .15s, color .15s; }
.round:hover { color: var(--primary); background: var(--fill); }
.round .ico svg { width: 19px; height: 19px; }
.round .dot { position: absolute; top: -3px; right: -3px; min-width: 17px; height: 17px; padding: 0 4px; border-radius: var(--r-full); background: var(--red); color: #fff; font-size: 10.5px; font-weight: 700; display: grid; place-content: center; border: 2px solid var(--glass); }
.round.me { background: var(--fill-hover); color: var(--text); font-weight: 700; font-size: 14px; border-color: transparent; }
.main { flex: 1; min-height: 0; overflow-y: auto; padding: 4px 28px 60px; }
.page-head { display: flex; align-items: flex-end; gap: 10px; flex-wrap: wrap; margin: 14px 0 18px; }
.page-head h1 { margin: 0; font-size: 30px; line-height: 1.15; letter-spacing: -.025em; font-weight: 800; flex: 1; min-width: 200px; }
.page-head h1 small { display: block; font-size: 14px; font-weight: 500; color: var(--muted); letter-spacing: 0; margin-bottom: 4px; }
@media (max-width: 1240px) { .topnums { display: none; } .top .spaces { margin-left: auto; } }

/* кнопки и поля */
.btn { border: 0; background: var(--fill); padding: 10px 18px; border-radius: var(--r-md); font-weight: 600; color: var(--text); transition: background .15s, transform .1s; text-decoration: none; display: inline-block; }
.btn:hover { background: var(--fill-hover); }
.btn:active { transform: scale(.97); }
.btn.primary { background: var(--accent); color: var(--accent-text); }

.btn.primary:hover { background: color-mix(in srgb, var(--accent) 88%, #fff); }
.btn:not(.primary):not(.danger):not(.ghost):not([class*="tint"]) { background: var(--glass-strong); border: 1px solid var(--stroke); }
.btn:not(.primary):not(.danger):not(.ghost):not([class*="tint"]):hover { background: var(--fill); }
.btn.danger { color: var(--red); background: color-mix(in srgb, var(--red) 14%, transparent); }
.btn.small { padding: 5px 12px; font-size: 13px; }
.btn.ghost { background: transparent; color: var(--muted); }
.btn.tint-work { background: color-mix(in srgb, var(--c-work) 12%, transparent); color: var(--c-work); }
.btn.tint-content { background: color-mix(in srgb, var(--c-content) 12%, transparent); color: var(--c-content); }
.btn.tint-personal { background: color-mix(in srgb, var(--c-family) 12%, transparent); color: var(--c-family); }

input[type=text], input[type=password], input[type=search], input[type=datetime-local], input[type=date], input[type=time], input[type=number], select, textarea {
  background: var(--fill); border: 1px solid transparent; border-radius: var(--r-md); padding: 11px 14px; width: 100%; transition: border-color .15s, background .15s;
}
input::placeholder, textarea::placeholder { color: var(--faint); }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--accent); background: var(--glass-strong); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 16%, transparent); }
select { appearance: none; -webkit-appearance: none; padding-right: 32px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%238e8e93' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center; }
select option { background: #fff; color: #2c2c2d; }
:root[data-theme="dark"] select option { background: #1d1f24; color: #f2f4f7; }
textarea { min-height: 110px; resize: vertical; }
input[type=datetime-local], input[type=date], input[type=time] { color-scheme: light; }
:root[data-theme="dark"] input[type=datetime-local], :root[data-theme="dark"] input[type=date], :root[data-theme="dark"] input[type=time] { color-scheme: dark; }
.check { appearance: none; -webkit-appearance: none; width: 23px; height: 23px; flex: none; border-radius: 50%; border: 1.7px solid var(--faint); background: transparent; display: inline-grid; place-content: center; padding: 0; margin: 0; cursor: pointer; transition: background .15s, border-color .15s; }
.check:checked { background: var(--accent); border-color: var(--accent); }
.check:checked::after { content: ""; width: 11px; height: 6px; border-left: 2.2px solid var(--accent-text); border-bottom: 2.2px solid var(--accent-text); transform: rotate(-45deg) translate(1px, -1px); }
.quick { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.quick input[type=text] { flex: 1; min-width: 180px; }
.quick select { width: auto; }

/* карточки и списки */
.card { border-radius: var(--radius); padding: 20px 22px; border-color: transparent; }
:root[data-theme="dark"] .card, :root[data-theme="dark"] .calcard, :root[data-theme="dark"] .tile { border: 1px solid var(--stroke); box-shadow: none; }

:root[data-theme="dark"] .modal { border: 1px solid var(--stroke); }

:root[data-theme="dark"] .tile { background: var(--glass); }
.card h2 { margin: 0 0 8px; font-size: 18px; letter-spacing: -.01em; }
.grid2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(330px, 1fr)); gap: 14px; }
.stack { display: flex; flex-direction: column; gap: 14px; }
.empty { color: var(--muted); padding: 10px; }
.card.empty { padding: 20px 22px; }
.row.static { cursor: default; }
.row.static:hover { background: transparent; }
.row.static .grow { cursor: default; }
.row { display: flex; align-items: center; gap: 12px; padding: 10px 10px; border-radius: var(--r-md); transition: background .12s; }
.row:hover { background: var(--fill); }
.row .grow { flex: 1; min-width: 0; cursor: pointer; }
.row .title { overflow: hidden; text-overflow: ellipsis; font-weight: 500; }
.row .sub { color: var(--muted); font-size: 13px; margin-top: 1px; }
.done .title { text-decoration: line-through; color: var(--muted); }
.prio { width: 4px; align-self: stretch; border-radius: var(--r-xs); background: transparent; flex: none; margin: 2px 0; }
.prio.p2 { background: var(--orange); } .prio.p3 { background: var(--red); }
.badge { font-size: 12px; font-weight: 600; padding: 3px 10px; border-radius: var(--r-full); background: var(--fill); color: var(--muted); white-space: nowrap; }
.badge.bad { background: color-mix(in srgb, var(--red) 18%, transparent); color: var(--red); }
.badge.warn { background: color-mix(in srgb, var(--orange) 20%, transparent); color: var(--orange); }
.badge.ok { background: color-mix(in srgb, var(--green) 18%, transparent); color: var(--green); }
.badge.s-work { background: color-mix(in srgb, var(--c-work) 22%, transparent); color: var(--teal); }
.badge.s-content { background: color-mix(in srgb, var(--c-content) 22%, transparent); color: var(--purple); }
.badge.s-personal { background: color-mix(in srgb, var(--c-family) 20%, transparent); color: var(--green); }
.chips { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }

/* календарь */
.calcard { border-radius: var(--r-xl); padding: 20px 22px 22px; border-color: transparent; }
.cal-bar { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 12px; }
.cal-bar .title { font-size: 22px; font-weight: 700; letter-spacing: -.02em; flex: 1; min-width: 150px; text-transform: capitalize; }
.cal-bar .btn.nav-arrow { width: 36px; height: 36px; padding: 0; display: inline-grid; place-content: center; font-size: 20px; line-height: 1; }
.month { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 3px; }
.month .dow { padding: 4px 0 6px; text-align: center; color: var(--muted); font-size: 12.5px; font-weight: 550; }
.cell { min-height: 98px; border-radius: var(--r-md); background: transparent; border: 1px solid var(--stroke); padding: 6px; display: flex; flex-direction: column; gap: 3px; cursor: pointer; overflow: hidden; transition: background .12s; }
.cell:hover { background: var(--fill); }
.cell.other { opacity: .38; }
.cell .num { font-size: 13px; font-weight: 600; min-width: 24px; height: 24px; display: grid; place-content: center; align-self: flex-start; border-radius: var(--r-full); color: var(--muted); }
.cell.today { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 5%, transparent); }
.cell.today .num { background: var(--live); color: #fff; }
.compact .cell { min-height: 84px; }
/* событие в календаре: нейтральная плашка + полоска цвета направления слева (как tally), текст обычного цвета — читается в обеих темах */
.pill { --c: var(--c-work); font-size: 12.5px; font-weight: 550; line-height: 1.35; padding: 2px 7px 2px 6px; border-left: 3px solid var(--c); border-radius: var(--r-xs) var(--r-sm) var(--r-sm) var(--r-xs); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; background: color-mix(in srgb, var(--c) 9%, var(--fill)); color: var(--text); cursor: pointer; }
.pill:hover { background: color-mix(in srgb, var(--c) 16%, var(--fill)); }
.pill .t { color: var(--muted); font-variant-numeric: tabular-nums; margin-right: 4px; }
.pill.cat-content, .dayitem.cat-content, .ecard.cat-content { --c: var(--c-content); }
.pill.cat-family, .dayitem.cat-family, .ecard.cat-family { --c: var(--c-family); }
.pill.cat-personal, .dayitem.cat-personal, .ecard.cat-personal { --c: var(--c-personal); }
/* задача — без заливки, пунктирная полоска: «запланировано», а не «событие» */
.pill.task { background: transparent; border-left-style: dashed; }
.pill.task.done, .pill.done { text-decoration: line-through; opacity: .5; }
.dayitem.done > div:not(.time) > div:first-child { text-decoration: line-through; }
.dayitem.done { opacity: .55; }
.more { font-size: 12px; color: var(--muted); padding-left: 6px; }
.week { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
.week .col { background: var(--fill); border-radius: var(--r-lg); padding: 10px 8px; min-height: 230px; display: flex; flex-direction: column; gap: 4px; }
.week .col.today { box-shadow: inset 0 0 0 1.6px var(--accent); }
.week .col h3 { margin: 0 0 6px; font-size: 13px; font-weight: 600; color: var(--muted); text-transform: capitalize; cursor: pointer; }
.dayitem { --c: var(--c-work); position: relative; display: flex; gap: 12px; align-items: center; padding: 11px 14px 11px 20px; border-radius: var(--r-lg); background: color-mix(in srgb, var(--c) 7%, var(--glass)); margin-bottom: 6px; cursor: pointer; }
.dayitem::before { content: ""; position: absolute; left: 7px; top: 9px; bottom: 9px; width: 4px; border-radius: var(--r-xs); background: var(--c); }
.dayitem.task::before { background: transparent; box-shadow: inset 0 0 0 1.4px var(--c); }
.dayitem .time { color: var(--muted); width: 96px; flex: none; font-size: 13px; font-variant-numeric: tabular-nums; }
.legend { display: flex; gap: 14px; flex-wrap: wrap; color: var(--muted); font-size: 13px; padding-top: 12px; }
.legend span::before { content: ""; display: inline-block; width: 9px; height: 9px; border-radius: var(--r-xs); background: var(--c); margin-right: 6px; }

/* проекты и заметки */
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; }
.ecard { --c: var(--c-work); position: relative; cursor: pointer; padding-left: 28px; transition: background .15s, border-color .15s; }
.ecard::before { content: ""; position: absolute; left: 12px; top: 18px; bottom: 18px; width: 4px; border-radius: var(--r-xs); background: var(--c); }
/* наведение — подсветка, без сдвига вёрстки */
.ecard:hover, .ncard:hover { background: var(--glass-strong); border-color: color-mix(in srgb, var(--c, var(--stroke)) 35%, var(--stroke)); }
.ecard .when { font-weight: 600; color: var(--muted); margin-bottom: 2px; font-size: var(--fs-sm); font-variant-numeric: tabular-nums; }
.ecard .name { font-size: 17px; font-weight: 600; letter-spacing: -.01em; }
.ecard .meta { color: var(--muted); font-size: 13.5px; margin-top: 3px; }
.ncard { cursor: pointer; transition: transform .15s; }
.ncard h3 { margin: 0 0 6px; font-size: 16px; }
.ncard p { margin: 0; color: var(--muted); white-space: pre-wrap; max-height: 98px; overflow: hidden; font-size: 14px; }
.bar { height: 8px; background: var(--fill); border-radius: var(--r-xs); overflow: hidden; margin-top: 10px; }
.bar > i { display: block; height: 100%; background: var(--c-work); border-radius: var(--r-xs); }

/* окна */
#modal-root .overlay { position: fixed; inset: 0; background: rgba(20, 30, 50, .38); -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px); display: flex; align-items: flex-start; justify-content: center; padding: 5vh 12px; overflow-y: auto; z-index: 50; animation: fade .18s ease-out; }
.modal { border-radius: var(--r-xl); width: min(740px, 100%); animation: rise .24s cubic-bezier(.2, .8, .2, 1); border-color: transparent; box-shadow: var(--shadow-lg); }
.modal header { display: flex; align-items: center; padding: 18px 22px 8px; gap: 10px; }
.modal header h2 { margin: 0; font-size: 20px; letter-spacing: -.02em; flex: 1; }
.modal .body { padding: 8px 22px 16px; display: grid; gap: 14px; }
.modal footer { display: flex; gap: 8px; padding: 12px 22px 20px; justify-content: flex-end; flex-wrap: wrap; }
.modal footer .spacer { flex: 1; }
.field { display: grid; gap: 5px; }
.field > label { font-size: 13px; font-weight: 600; color: var(--muted); padding-left: 4px; }
.two { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.three { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px; }
.listedit { display: grid; gap: 6px; }
.listedit .li { display: flex; gap: 8px; align-items: center; }
.listedit .li input[type=text] { flex: 1; }
.listedit .li input[type=datetime-local] { width: 220px; }
.folderbox { background: var(--fill); border-radius: var(--r-lg); padding: 12px 14px; display: grid; gap: 10px; }
.folderbox label.opt { display: flex; align-items: center; gap: 10px; cursor: pointer; }
.folderbox .tree { font-size: 13px; color: var(--muted); line-height: 1.6; }
.folderbox .tree b { color: var(--text); font-weight: 550; }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes rise { from { opacity: 0; transform: translateY(18px) scale(.985); } to { opacity: 1; transform: none; } }

#toasts { position: fixed; right: 18px; bottom: 18px; display: flex; flex-direction: column; gap: 10px; z-index: 80; max-width: min(400px, calc(100vw - 36px)); }
.toast { border-radius: var(--r-lg); padding: 14px 16px; animation: rise .22s ease-out; box-shadow: var(--shadow-lg); }
.toast.err { box-shadow: inset 0 0 0 1.5px var(--red), var(--shadow); }
.toast .t { font-weight: 600; margin-bottom: 4px; }
.toast .acts { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 10px; }

.settings-row { display: flex; align-items: flex-end; gap: 10px; flex-wrap: wrap; padding: 6px 0; }
.settings-row > .grow { flex: 1; min-width: 240px; }
.subcard { background: var(--fill); border-radius: var(--r-lg); padding: 14px 16px; margin-top: 10px; display: grid; gap: 10px; }
.subcard h3 { margin: 0; font-size: 16px; }
.muted { color: var(--muted); }
.hint { color: var(--muted); font-size: 13.5px; margin: 4px 0 8px; }
code { background: var(--fill); padding: 2px 8px; border-radius: var(--r-sm); font-size: 13px; word-break: break-all; }

/* контакты, исполнители и документы проекта */
.stack-sm { display: grid; gap: 8px; }
.avatar { width: 38px; height: 38px; border-radius: 50%; flex: none; display: grid; place-content: center; font-weight: 650; background: color-mix(in srgb, var(--c-work) 24%, transparent); color: var(--text); }
.avatar.org { border-radius: var(--r-md); background: color-mix(in srgb, var(--c-content) 24%, transparent); }
.field .opt, .perf .opt { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; white-space: nowrap; font-weight: 500; }
.perf { display: grid; gap: 4px; padding: 8px; border-radius: var(--r-lg); background: var(--fill); }
.perf-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.perf-row select { flex: 1 1 200px; min-width: 0; }
.perf-row input[type=text] { flex: 1 1 140px; min-width: 0; }
.perf-row input.fee { flex: 0 1 110px; }
.perf-info { padding: 0 2px; line-height: 1.4; }
.req-info { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin: 0; }
.docs { display: grid; gap: 6px; }
.doc { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 8px 10px; border-radius: var(--r-lg); background: var(--fill); }
.doc .grow { flex: 1 1 200px; min-width: 0; cursor: pointer; }
.doc .title { font-weight: 500; overflow: hidden; text-overflow: ellipsis; }
.doc .sub { color: var(--muted); font-size: 13px; }
.doc.missing .title { text-decoration: line-through; opacity: .7; }
.doc.pending { border: 1px dashed var(--muted); background: transparent; }
.doc-acts { display: flex; gap: 6px; flex-wrap: wrap; }
.doc-acts a.btn { text-decoration: none; }
.doc-add { margin-top: 6px; }
.file-in { max-width: 100%; }

/* метки важности и финансы */
.badge.m-iu { background: color-mix(in srgb, var(--red) 20%, transparent); color: var(--red); }
.badge.m-i { background: color-mix(in srgb, var(--teal) 20%, transparent); color: var(--teal); }
.badge.m-u { background: color-mix(in srgb, var(--orange) 22%, transparent); color: var(--orange); }
.badge.m-later { background: var(--fill); color: var(--muted); }
.tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.tile { background: var(--glass); border: 1px solid transparent; box-shadow: var(--shadow); border-radius: var(--radius); padding: 16px 18px; display: grid; gap: 2px; min-width: 0; }
.tile .tl, .mini-nums .tl { font-size: 13px; color: var(--muted); font-weight: 550; }
.tile .tv { font-size: 26px; font-weight: 800; letter-spacing: -.02em; overflow-wrap: anywhere; }
.tile .ts { font-size: 12.5px; color: var(--muted); }
.tile.inc .tv, .inc { color: var(--green); }
.tile.neg .tv, .over { color: var(--red); }
.tile.tax .tv { color: var(--orange); }

.warnbox { background: color-mix(in srgb, var(--orange) 16%, transparent); }
.catbar { display: grid; gap: 4px; margin: 8px 0; }
.catbar .cb-top { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2px 10px; font-size: 14px; }
.catbar .cb-top > span:last-child { margin-left: auto; text-align: right; font-variant-numeric: tabular-nums; }
.catbar .bar.over i { background: var(--red); }
.row.tx .tx-date { width: 52px; flex: none; color: var(--muted); font-size: 13px; }
.row.tx.planned .amount { opacity: .7; }
.amount { font-weight: 650; white-space: nowrap; font-variant-numeric: tabular-nums; }
.amount.income { color: var(--green); }
.finance-mini { cursor: pointer; }
.mini-nums { display: flex; gap: 28px; flex-wrap: wrap; }
.mini-nums > div { display: grid; gap: 2px; }
.mini-nums b { font-size: 20px; }
.projfin { display: grid; gap: 4px; }
.fin-line { display: flex; gap: 14px; flex-wrap: wrap; font-size: 14px; color: var(--muted); padding: 2px 4px 6px; }
.fin-line b { color: var(--text); }
@media (max-width: 860px) { .tiles { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .nav button .lbl { display: none; } }

/* кредиты, подписки, итоги */
.loan { display: grid; gap: 12px; }
.loan.closed { opacity: .7; }
.loan-head { display: flex; align-items: flex-start; gap: 10px; cursor: pointer; }
.loan-head h3 { margin: 0 0 2px; font-size: 18px; }
.loan-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.loan-grid > div { display: grid; gap: 1px; min-width: 0; }
.loan-grid b { font-size: 18px; overflow-wrap: anywhere; }
.loan-grid .tl, .loan-grid .ts { font-size: 12.5px; color: var(--muted); }
.payprog { display: grid; gap: 6px; padding: 4px 4px 8px; }
.payprog .cb-top { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2px 10px; font-size: 14px; }
.tablewrap { overflow-x: auto; }
table.cmp { width: 100%; border-collapse: collapse; font-size: 14px; font-variant-numeric: tabular-nums; }
table.cmp th { text-align: left; color: var(--muted); font-weight: 600; font-size: 13px; padding: 6px 10px 6px 0; white-space: nowrap; }
table.cmp td { padding: 8px 10px 8px 0; border-top: 1px solid var(--edge, rgba(128,128,128,.18)); white-space: nowrap; }
table.cmp tr.cur td { font-weight: 650; }
.good { color: var(--green); font-weight: 600; }
.bad2 { color: var(--red); font-weight: 600; }
.warn2 { color: var(--amber, #b7791f); font-weight: 600; }
.verdict ul { margin: 6px 0 0; padding-left: 20px; display: grid; gap: 4px; }
.verdict h2 { margin-bottom: 4px; }
.yearchart { display: grid; grid-template-columns: repeat(12, 1fr); gap: 6px; align-items: end; height: 170px; margin: 10px 0 16px; }
.ycol { display: grid; grid-template-rows: 1fr auto; height: 100%; gap: 4px; border-radius: var(--r-md); padding: 2px; }
.ycol.cur { background: var(--fill); }
.ybars { display: flex; align-items: flex-end; justify-content: center; gap: 3px; height: 100%; }
.ybars i { display: block; width: 42%; max-width: 16px; min-height: 2px; border-radius: 4px 4px 2px 2px; }
.ybars .yi { background: var(--green); }
.ybars .ye { background: var(--orange); }
.yl { text-align: center; font-size: 11.5px; color: var(--muted); }
@media (max-width: 860px) { .loan-grid { grid-template-columns: repeat(2, 1fr); } .yearchart { gap: 3px; } }

.mini-side { margin-top: 8px; }
.mini-label { font-size: 13px; font-weight: 600; color: var(--muted); margin-bottom: 4px; }
.navrow .ico { color: var(--accent); }
.btn:disabled { opacity: .35; cursor: default; }

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

/* телефон и узкое окно: белая панель внизу с синими иконками, как в мобильной версии Livento */
@media (max-width: 860px) {
  .layout { display: block; height: 100vh; }
  .col { display: contents; }
  .top { display: none; }
  .main { height: 100vh; padding: 14px 14px 190px; }
  .side { position: fixed; left: 10px; right: 10px; bottom: calc(10px + env(safe-area-inset-bottom)); z-index: 40; border-radius: var(--r-xl); padding: 8px; gap: 6px; flex-direction: column; background: var(--glass); box-shadow: 0 10px 40px rgba(16, 40, 80, .22); border: 1px solid var(--stroke); overflow: visible; }
  .brand { display: none; }
  .side .spaces { margin: 0; display: grid; grid-template-columns: repeat(4, 1fr); background: var(--fill); padding: 3px; border-radius: var(--r-full); }
  .spaces button { padding: 6px 2px; font-size: 12px; overflow: hidden; text-overflow: ellipsis; }
  .nav { flex-direction: row; justify-content: space-between; }
  .nav button { flex-direction: column; gap: 2px; padding: 6px 2px; font-size: 11px; align-items: center; justify-content: center; flex: 1; border-radius: var(--r-lg); color: var(--primary); width: auto; text-align: center; }
  .nav button.on { background: color-mix(in srgb, var(--primary) 12%, transparent); color: var(--primary); box-shadow: none; }
  .side { border-right: 0; }
  .nav button .lbl { font-size: 10px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
  .nav .count { position: absolute; top: 0; left: 50%; margin: 0 0 0 8px; padding: 0 6px; font-size: 11px; }
  .nav button.on:hover, .nav button:hover { background: transparent; color: var(--primary); }
  .nav button.on:hover { background: color-mix(in srgb, var(--primary) 12%, transparent); }
  .page-head h1 { font-size: 26px; }
  .cell { min-height: 64px; padding: 3px; border-radius: var(--r-md); }
  .pill { font-size: 11.5px; padding: 1px 4px 1px 4px; border-left-width: 2px; }
  .week { grid-template-columns: 1fr; }
  .two, .three { grid-template-columns: 1fr 1fr; gap: 8px; }
  .two > *, .three > * { min-width: 0; }
  .listedit .li input[type=datetime-local] { width: 175px; }
  #modal-root .overlay { padding: 0; align-items: flex-end; }
  .modal { border-radius: var(--r-xl) var(--r-xl) 0 0; width: 100%; max-height: 94vh; overflow-y: auto; }
  #toasts { left: 12px; right: 12px; bottom: 170px; max-width: none; }
}

/* телефон и планшет: элементы подстраиваются под ширину экрана (размеры плавно меняются от узких телефонов к планшетам) */
@media (max-width: 860px) {
  :root { font-size: clamp(13.5px, 3.6vw, 15px); }
  .main { padding: 10px clamp(10px, 3.4vw, 18px) 190px; }
  .page-head { gap: 8px; margin: 6px 0 12px; align-items: center; }
  .page-head h1 { font-size: clamp(21px, 6.4vw, 28px); min-width: 0; flex: 1 1 100%; }
  .page-head h1 small { font-size: clamp(12px, 3.3vw, 14px); margin-bottom: 2px; }
  .page-head > .btn { flex: 0 0 auto; }
  .btn { padding: clamp(6px, 1.9vw, 9px) clamp(11px, 3.4vw, 16px); font-size: clamp(13px, 3.5vw, 14.5px); border-radius: var(--r-md); }
  .btn.small { padding: 4px clamp(8px, 2.6vw, 12px); font-size: clamp(12px, 3.2vw, 13px); }
  
  .chips { gap: 5px; }
  .chip { padding: clamp(5px, 1.5vw, 7px) clamp(10px, 3vw, 14px); font-size: clamp(12.5px, 3.3vw, 14px); }
  input[type=text], input[type=password], input[type=search], input[type=datetime-local], input[type=date], input[type=time], input[type=number], select, textarea { padding: 9px 12px; font-size: 16px; border-radius: var(--r-md); } /* 16px: иначе Safari на iPhone приближает страницу при вводе */
  textarea { min-height: 84px; }
  .card { padding: clamp(12px, 3.6vw, 18px); border-radius: var(--r-lg); }
  .card h2 { font-size: clamp(15.5px, 4.4vw, 18px); margin-bottom: 6px; }
  .calcard { padding: clamp(12px, 3.6vw, 18px); border-radius: var(--r-lg); }
  .cal-bar { gap: 6px; margin-bottom: 8px; }
  .cal-bar .title { font-size: clamp(17px, 5vw, 21px); flex: 1 1 100%; order: 3; }
  .cal-bar .btn.nav-arrow { width: 30px; height: 30px; font-size: 17px; }
  .month { gap: 2px; }
  .month .dow { font-size: 11.5px; padding: 2px 0 4px; }
  .cell { min-height: clamp(52px, 13vw, 84px); border-radius: var(--r-sm); }
  .cell .num { font-size: 12px; min-width: 20px; height: 20px; }
  .week .col { min-height: 0; padding: 8px; border-radius: var(--r-md); }
  .tiles { gap: 8px; }
  .tile { padding: 12px 14px; border-radius: var(--r-lg); }
  .tile .tl { font-size: 12px; }
  .tile .tv { font-size: clamp(18px, 5.4vw, 24px); }
  .row { padding: 8px 6px; gap: 9px; flex-wrap: wrap; row-gap: 3px; border-radius: var(--r-md); }
  .row .grow { flex: 1 1 140px; }
  .row .sub { font-size: 12.5px; }
  .badge { font-size: 11.5px; padding: 2px 8px; }
  .check { width: 21px; height: 21px; }
  .modal header { padding: 14px 16px 4px; }
  .modal header h2 { font-size: 18px; }
  .modal .body { padding: 6px 16px 12px; gap: 10px; }
  .modal footer { padding: 8px 16px calc(14px + env(safe-area-inset-bottom)); gap: 6px; position: sticky; bottom: 0; background: var(--glass); border-top: 1px solid var(--stroke); }
  .field > label { font-size: 12px; }
  .subcard { padding: 12px; border-radius: var(--r-md); }
  .settings-row { gap: 8px; }
  .settings-row > .grow { min-width: 0; flex: 1 1 100%; }
  .quick { gap: 6px; }
  .quick input[type=text] { min-width: 0; flex: 1 1 100%; }
  .quick select { flex: 1 1 40%; }
  .loan-grid b { font-size: 16px; }
  .spaces button { font-size: clamp(11.5px, 3.2vw, 13px); }
  .side { padding: 6px; border-radius: var(--r-xl); left: 8px; right: 8px; }
  .nav button { padding: 5px 2px; border-radius: var(--r-md); }
  .ico svg { width: 20px; height: 20px; }
  .avatar { width: 34px; height: 34px; }
  #toasts { bottom: 150px; }
}
@media (max-width: 400px) {
  .tiles { grid-template-columns: 1fr 1fr; }
  .two, .three { grid-template-columns: 1fr; }
  .btn { font-size: 13px; }
  .page-head .btn { padding: 6px 11px; }
}

.login { min-height: 100vh; display: grid; place-content: center; padding: 20px; }
.login .card { width: min(380px, 92vw); display: grid; gap: 14px; }
.login .brand { padding: 0; display: flex !important; }
[hidden] { display: none !important; }

/* быстрый выбор месяца, этапы в календаре, точки дней на телефоне, строки проектов в задачах */
.cal-bar .title.titlebtn { background: transparent; border: 0; padding: 0; color: inherit; font: inherit; text-align: left; cursor: pointer; display: flex; align-items: center; gap: 6px; }
.cal-bar .title.titlebtn:hover { color: var(--accent); }
.cal-bar .caret { font-size: 13px; opacity: .6; }
.ypick { display: flex; align-items: center; justify-content: center; gap: 14px; margin-bottom: 14px; }
.ypick-year { font-size: 22px; font-weight: 700; min-width: 90px; text-align: center; }
.monthpick { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.monthpick .btn { justify-content: center; padding: 12px 0; }
.pill.stage { background: transparent; color: var(--muted); }
.dayitem.stage { background: transparent; box-shadow: inset 0 0 0 1.4px color-mix(in srgb, var(--c) 45%, transparent); }
.cell .dots { display: none; }
.entry-mark { --c: var(--c-work); width: 23px; height: 23px; border-radius: var(--r-sm); flex: none; border: 1.7px solid var(--c); background: color-mix(in srgb, var(--c) 22%, transparent); }
.entry-mark.cat-content { --c: var(--c-content); } .entry-mark.cat-family { --c: var(--c-family); } .entry-mark.cat-personal { --c: var(--c-personal); }
.people .row { padding: 6px 4px; }
@media (max-width: 860px) {
  .calcard { padding: 8px 6px 10px; border-radius: var(--r-lg); }
  .cal-bar { padding: 0 4px; }
  .month { gap: 1px; }
  .cell { min-height: 50px; padding: 4px 2px; border-radius: var(--r-sm); align-items: center; gap: 2px; }
  .cell .num { align-self: center; }
  .cell .pill, .cell .more { display: none; }
  .cell .dots { display: flex; gap: 3px; align-items: center; justify-content: center; flex-wrap: wrap; min-height: 8px; }
  .cell .dots i { width: 6px; height: 6px; border-radius: 50%; background: var(--c-work); }
  .cell .dots i.cat-content { background: var(--c-content); } .cell .dots i.cat-family { background: var(--c-family); }
  .cell .dots b { font-size: 9px; line-height: 6px; color: var(--muted); }
  .cell.today .dots i { background: var(--accent); }
}

/* экран «Документы» */
.docgroup h3 { display: flex; align-items: center; gap: 8px; margin: 0 0 6px; }
.count-s { font-size: 12px; font-weight: 600; color: var(--muted); background: var(--fill); border-radius: var(--r-md); padding: 1px 8px; }
.badge.proj { cursor: pointer; border: 0; font: inherit; font-size: 12px; max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chips .spacer { flex: 1; }

.listedit .taskli { flex-wrap: wrap; }
.listedit .taskli input[type=text] { flex: 1 1 260px; min-width: 0; width: auto; }
.listedit .taskli input[type=date] { flex: 0 0 150px; width: 150px; }
.listedit .taskli input[type=time] { flex: 0 0 105px; width: 105px; }

/* поля внутри серых блоков должны быть видны на фоне блока */
.subcard input[type=text], .subcard input[type=password], .subcard input[type=search], .subcard input[type=number],
.subcard input[type=date], .subcard input[type=time], .subcard input[type=datetime-local], .subcard select, .subcard textarea {
  background: var(--glass-strong); border-color: var(--stroke);
}
.subcard input:focus, .subcard select:focus, .subcard textarea:focus { border-color: var(--accent); }
/* бейджи внутри серых строк документов не должны сливаться с фоном */
.doc .badge { background: var(--glass-strong); border: 1px solid var(--stroke); }
.doc .badge.bad { background: color-mix(in srgb, var(--red) 18%, var(--glass-strong)); border-color: transparent; }
.badge.proj { color: var(--primary); }

.perf-hist { margin-top: 8px; }
.perf-hist summary { cursor: pointer; color: var(--muted); font-weight: 600; padding: 6px 10px; }

/* работа без связи */
.offline-pill { position: fixed; right: 12px; bottom: calc(14px + env(safe-area-inset-bottom, 0px)); z-index: 60; border: 0; border-radius: var(--r-full); padding: 4px 12px; font: inherit; font-size: 12px; opacity: .92; font-weight: 550; background: var(--text, #222); color: var(--bg, #fff); box-shadow: 0 4px 16px rgba(0,0,0,.25); cursor: pointer; max-width: calc(100vw - 32px); }
.offline-pill[hidden] { display: none; }
/* помощник: кнопка и чат справа */
.ai-fab { position: fixed; right: 16px; bottom: calc(52px + env(safe-area-inset-bottom, 0px)); z-index: 59; width: 46px; height: 46px; border-radius: 50%; border: 0; cursor: pointer; background: var(--accent); color: var(--accent-text); box-shadow: 0 6px 20px rgba(0,0,0,.28); display: grid; place-items: center; padding: 0; }
.ai-fab .ico, .ai-fab .ico svg { width: 22px; height: 22px; }
.ai-fab:hover { filter: brightness(1.1); }
.ai-head .ico { width: 18px; height: 18px; opacity: .8; }
.ai-empty { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; font-size: 13px; opacity: .85; }
.ai-empty .chip { text-align: left; }
.ai-fab[hidden] { display: none; }
.ai-panel { position: fixed; top: 0; right: 0; bottom: 0; width: min(400px, 100vw); z-index: 58; display: flex; flex-direction: column; background: var(--card, var(--bg, #fff)); color: var(--text, #222); border-left: 1px solid var(--line, #ddd); box-shadow: -8px 0 30px rgba(0,0,0,.25); }
.ai-panel[hidden] { display: none; }
.ai-head { display: flex; align-items: center; gap: 6px; padding: 12px 14px; border-bottom: 1px solid var(--line, #ddd); }
.ai-head .spacer { flex: 1; }
.ai-list { flex: 1; overflow: auto; padding: 12px; display: flex; flex-direction: column; gap: 8px; }
.ai-msg { max-width: 92%; padding: 8px 11px; border-radius: var(--r-md); white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.4; font-size: 14px; }
.ai-msg.me { align-self: flex-end; background: var(--accent); color: var(--accent-text); }
.ai-msg.bot { align-self: flex-start; background: color-mix(in srgb, currentColor 8%, transparent); }
.ai-msg .btn { margin-top: 6px; }
.ai-done { margin-top: 6px; font-size: 12.5px; opacity: .85; }
.ai-input { display: flex; gap: 8px; align-items: flex-end; padding: 10px 12px calc(10px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--line, #ddd); }
.ai-input textarea { flex: 1; resize: none; min-height: 38px; height: 38px; max-height: 120px; padding: 8px 10px; font: inherit; font-size: 14px; line-height: 1.35; }
.ai-input .btn { height: 38px; min-width: 42px; padding: 0 12px; font-size: 16px; }
.steps { padding-left: 20px; margin: 0; display: grid; gap: 4px; }

/* ===== числа моноширинным шрифтом в тёмной теме, карточка «до проекта», телефонная панель ===== */
:root { --mono: ui-monospace, "Cascadia Mono", "SF Mono", Consolas, Menlo, monospace; }
/* числа — системным шрифтом с цифрами одной ширины (моноширинный оставлен только для таймкода) */
.tile .tv, .topnums b, .mini-nums b,
.loan-grid b { font-variant-numeric: tabular-nums; letter-spacing: -.01em; }

.dash-add { display: contents; }
.nextup { cursor: pointer; }
.nextup .tl { font-size: 13px; color: var(--muted); font-weight: 600; }
/* карточка «до проекта» — главный акцент экрана: таймкод ДД:ЧЧ:ММ:СС и полоска цвета направления */
.nextup { position: relative; padding-left: 26px; }
.nextup::before { content: ""; position: absolute; left: 0; top: 16px; bottom: 16px; width: 4px; border-radius: 0 var(--r-xs) var(--r-xs) 0; background: var(--c-work); }
.nextup.sp-content::before { background: var(--c-content); }
.nextup.sp-personal::before { background: var(--c-family); }
.nextup .tl b { color: var(--text); font-weight: 650; }
.tc { display: flex; align-items: flex-start; gap: 2px; margin: 8px 0 6px; font-family: var(--mono); font-variant-numeric: tabular-nums; color: var(--text); }
.tc-g { display: grid; justify-items: center; gap: 2px; }
.tc-g b { font-size: clamp(32px, 9vw, 46px); line-height: 1; font-weight: 600; letter-spacing: .01em; }
.tc-g small { font-family: var(--font); font-size: var(--fs-xs); color: var(--muted); font-weight: 500; }
.tc-sep { font-size: clamp(32px, 9vw, 46px); line-height: 1; color: var(--faint); padding: 0 1px; }
.mob-spaces { display: none; }
.btn.big { display: flex; align-items: center; text-align: left; width: 100%; justify-content: flex-start; gap: 12px; padding: 14px 16px; font-size: 16px; border-radius: var(--r-lg); }
.settings-row.inline { flex-wrap: nowrap; align-items: center; justify-content: space-between; }
.settings-row.inline > span { flex: 1 1 auto; }
.settings-row.edit { flex-wrap: nowrap; align-items: center; }
.settings-row.edit > .grow { flex: 1 1 auto; min-width: 0; }

@media (max-width: 860px) {
  .main { padding: 10px 14px 120px; }
  .dash-add { display: none; }
  /* плавающая нижняя панель */
  .side { left: 50%; right: auto; width: auto; max-width: calc(100vw - 16px); transform: translateX(-50%); bottom: calc(14px + env(safe-area-inset-bottom)); padding: 8px; border-radius: var(--r-full); flex-direction: row; }
  .side .spaces { display: none; }
  .nav { gap: 2px; align-items: center; }
  .nav button, .nav button:hover { flex: none; width: 48px; height: 48px; padding: 0; border-radius: 50%; color: var(--muted); }
  .nav button .lbl { display: none; }
  .nav button.on, .nav button.on:hover { background: var(--fill-hover); color: var(--primary); }
  .nav button.add, .nav button.add:hover { width: 56px; height: 56px; border-radius: 50%; background: var(--accent); color: var(--accent-text); margin: 0 2px; }
  .nav button.add .ico svg { width: 26px; height: 26px; stroke-width: 2.3; }
  .nav .count { top: 2px; left: auto; right: 2px; margin: 0; }
  .offline-pill { bottom: calc(96px + env(safe-area-inset-bottom, 0px)); right: 10px; }
  /* на телефоне помощник открывается из меню «Ещё»: плавающая кнопка налезала на содержимое */
  .ai-fab { display: none; }
  .ai-panel { z-index: 70; }
  #toasts { bottom: 100px; }

  /* направления под заголовком: компактная полоса, которая прокручивается */
  .mob-spaces { display: flex; gap: 6px; margin: 0 0 12px; overflow-x: auto; scrollbar-width: none; }
  .mob-spaces::-webkit-scrollbar { display: none; }
  .mob-spaces button { flex: 1 0 auto; height: 36px; padding: 0 14px; border-radius: var(--r-md); border: 1px solid var(--stroke); background: var(--glass); color: var(--muted); font-weight: 600; font-size: 14px; }
  .mob-spaces button.on { background: var(--accent); border-color: var(--accent); color: var(--accent-text); }
  :root[data-theme="dark"] .mob-spaces button.on { background: var(--fill-hover); border-color: var(--fill-hover); color: var(--text); }

  /* меньше крупных кнопок: компактные чипы и кнопки, поиск на всю ширину */
  .page-head { margin: 4px 0 10px; }
  .page-head .btn { padding: 6px 12px; font-size: 13px; }
  .chips { gap: 6px; row-gap: 6px; }
  .chip { padding: 6px 12px; font-size: 13px; line-height: 1.2; }
  .main input[type=search] { width: 100% !important; max-width: none !important; }
  .stack { gap: 12px; }

  /* карточки проектов: цветная полоса не должна заходить на текст */
  .card.ecard { padding-left: 28px; }
  .ecard::before { left: 11px; top: 14px; bottom: 14px; width: 4px; }
  .ecard .name { font-size: 16px; overflow-wrap: anywhere; }

  /* строки с подписью и полем, флажки, правка списков */
  label.row { flex-wrap: nowrap; align-items: center; }
  .settings-row.edit .btn.small { width: 36px; height: 36px; padding: 0; justify-content: center; flex: none; }
  .settings-row.inline input { width: 96px; flex: none; }
  .settings-row.inline input[type=time] { width: 128px; }
  .row .btn { padding: 4px 10px; font-size: 12.5px; }
  .subcard { gap: 6px; }
  .subcard .settings-row { padding: 2px 0; }
}

/* нижняя панель: шесть равных ячеек, значки точно по центру ячеек */
@media (max-width: 860px) {
  .side { width: min(calc(100vw - 24px), 372px); max-width: none; }
  .nav { display: grid; grid-template-columns: repeat(6, 1fr); gap: 0; width: 100%; justify-items: center; align-items: center; }
  .nav button, .nav button.add { margin: 0; justify-content: center; align-items: center; }
  .nav button .ico { display: grid; place-items: center; width: 24px; height: 24px; }
  .nav button .ico svg { display: block; }
  .nav button[aria-label="Ещё"] .ico svg { stroke-width: 3.6; }
  .nav .count { right: 6px; }
}

/* ===== Финансы: одна строка управления ===== */
.fin-bar { display: flex; flex-wrap: wrap; gap: 8px 10px; align-items: center; }
.fin-bar .fin-section { flex: 1 1 180px; min-width: 150px; }
.fin-bar .fin-section select { width: 100%; font-weight: 600; }
.fin-bar select { height: 40px; }
.seg { display: inline-flex; padding: 3px; border-radius: var(--r-md); border: 1px solid var(--stroke); background: var(--fill); }
.seg-b { border: 0; background: transparent; color: inherit; font: inherit; font-weight: 600; font-size: 14px; height: 32px; padding: 0 14px; border-radius: var(--r-sm); cursor: pointer; opacity: .7; }
.seg-b.on { background: var(--accent); color: var(--accent-text); opacity: 1; }
.fin-period { display: flex; align-items: center; gap: 8px; flex: 1 1 100%; }
.fin-period select { width: auto; flex: none; }
.stepper { display: flex; align-items: center; gap: 4px; flex: 1; min-width: 0; }
.stepper .nav-arrow { width: 36px; height: 36px; padding: 0; display: inline-grid; place-content: center; font-size: 20px; line-height: 1; flex: none; }
.stepper-title { flex: 1; min-width: 0; border: 0; background: transparent; color: inherit; font: inherit; font-weight: 700; font-size: 17px; text-align: center; text-transform: capitalize; cursor: pointer; padding: 6px 4px; }
@media (min-width: 861px) { .fin-period { flex: 0 1 340px; } .stepper-title { min-width: 150px; } }
@media (max-width: 860px) {
  .fin-bar { gap: 8px; }
  .fin-bar .fin-section { flex: 1 1 0; min-width: 0; }
  .seg-b { padding: 0 12px; }
}
.fin-bar select { border: 1px solid var(--stroke); background-color: var(--fill); }
@media (max-width: 860px) { .warnbox { font-size: 13.5px; padding: 12px 14px; } }

/* ===== Файлы ===== */
.files-bar { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; }
.files-bar select { width: auto; max-width: 100%; height: 40px; border: 1px solid var(--stroke); background-color: var(--fill); }
.crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 2px; min-width: 0; }
.crumb { border: 0; background: transparent; color: inherit; font: inherit; font-weight: 600; padding: 6px 8px; border-radius: var(--r-md); cursor: pointer; max-width: 60vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.crumb:hover { background: var(--fill-hover); }
.crumb-sep { color: var(--faint); }
.files-tools .files-search { flex: 1 1 200px; min-width: 0; }
.files-list { padding: 6px; }
.file-row { flex-wrap: nowrap; }
.file-row .grow { min-width: 0; }
.file-row .title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.file-row .ico, .file-ico .ico { width: 22px; height: 22px; color: var(--muted); }
.file-ico { flex: none; display: grid; place-content: center; }
.upload-status { padding: 10px 14px; border-radius: var(--r-md); background: var(--fill); font-weight: 600; word-break: break-all; }
@media (max-width: 860px) { .file-row .btn.small:not(.ghost) { display: none; } .crumb { padding: 6px; } }

/* ===== Схемы площадки ===== */
.screens { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; }
.screen-card { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.sc-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.sc-head .title { font-weight: 700; font-size: 16px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mini-mask { display: grid; gap: 1px; width: 100%; max-height: 150px; background: var(--stroke); border: 1px solid var(--stroke); border-radius: var(--r-sm); overflow: hidden; }
.mini-mask i { background: var(--primary); opacity: .75; min-width: 0; }
.mini-mask i.off { background: var(--fill); opacity: 1; }
.sc-nums { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 12px; }
.sc-nums div { display: flex; flex-direction: column; min-width: 0; }
.sc-nums span { font-size: 12px; color: var(--muted); }
.sc-nums b { font-size: 15px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-variant-numeric: tabular-nums; }
.screen-card .quick .btn.small { flex: 0 0 auto; }
.mask-grid { display: grid; gap: 2px; max-width: 560px; margin: 4px 0; }
.mask-cell { border: 1px solid var(--stroke); background: var(--fill); color: inherit; font: inherit; font-weight: 600; border-radius: var(--r-xs); padding: 0; cursor: pointer; min-width: 0; line-height: 1; display: grid; place-content: center; }
.mask-cell:hover { border-color: var(--primary); }
.mask-cell.off { background: transparent; border-style: dashed; color: var(--faint); }
.pattern-preview { max-width: 100%; overflow: hidden; border-radius: var(--r-sm); border: 1px solid var(--stroke); background: #000; line-height: 0; }
.pattern-preview canvas { width: 100%; height: auto; display: block; image-rendering: pixelated; }
.screen-calc { font-variant-numeric: tabular-nums; }
@media (max-width: 860px) { .screens { grid-template-columns: 1fr; } }

/* расстановка экранов */
.stage-svg { width: 100%; height: auto; display: block; margin: 0 auto; background: var(--fill); border-radius: var(--r-md); touch-action: none; user-select: none; -webkit-user-select: none; }
.stage-grid { stroke: var(--stroke); fill: none; }
.stage-screen { cursor: grab; }
.stage-screen:active { cursor: grabbing; }
.sc-lines { stroke: rgba(255,255,255,.6); fill: none; }
.sc-edge { fill: none; stroke: rgba(255,255,255,.95); }
.sc-off { fill: var(--fill); }
.sc-label { fill: var(--text); font-weight: 700; pointer-events: none; }
.layout-tools .btn.small { flex: 0 0 auto; }
.layout-tools select { width: auto; min-width: 170px; height: 32px; padding-top: 0; padding-bottom: 0; }
details.more { border: 1px solid var(--stroke); border-radius: var(--r-md); padding: 8px 12px; }
details.more summary { cursor: pointer; font-weight: 600; }

/* пиксельный холст */
.cv-bounds { fill: rgba(128,128,128,.10); stroke: var(--muted); stroke-dasharray: 3 3; }
.cv-limit { fill: none; stroke: var(--orange); stroke-dasharray: 8 6; }
.cv-guide { stroke: var(--pink, #FF2D55); pointer-events: none; }
.cv-top { fill: #ffd400; pointer-events: none; }
.stage-screen.picked .sc-edge { stroke: #fff; }
.sc-label.cv-in { fill: #fff; paint-order: stroke; stroke: rgba(0,0,0,.55); stroke-width: 0.12em; }
.warn { padding: 10px 12px; border-radius: var(--r-md); background: color-mix(in srgb, var(--orange) 16%, transparent); color: var(--text); font-size: 14px; }
label.inl { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; color: var(--muted); }
label.inl input[type=text] { width: 84px; flex: none; height: 32px; padding: 0 8px; }

.swatches { display: flex; flex-wrap: wrap; gap: 8px; }
.swatch { width: 28px; height: 28px; border-radius: 50%; border: 2px solid transparent; padding: 0; cursor: pointer; }
.swatch.on { border-color: var(--text); box-shadow: 0 0 0 2px var(--bg, #fff) inset; }

/* питание, камеры, схема */
.seg.wide { display: flex; overflow-x: auto; }
.seg.wide .seg-b { flex: 1 0 auto; }
.line-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding: 8px 0; border-top: 1px solid var(--stroke); }
.line-row.over { background: color-mix(in srgb, var(--orange) 10%, transparent); }
.line-dot { width: 26px; height: 26px; border-radius: 50%; border: 3px solid transparent; padding: 0; cursor: pointer; flex: none; }
.line-dot.on { border-color: var(--text); }
.line-f { display: flex; align-items: center; gap: 4px; min-width: 110px; }
.line-f.grow { flex: 1 1 140px; }
.line-f.narrow { min-width: 0; flex: 0 0 auto; }
.line-f input { height: 34px; }
.line-f.narrow input { width: 64px; }
.line-sum { font-size: 13px; color: var(--muted); flex: 1 1 100%; }
.pw-grid { display: grid; gap: 2px; width: 100%; max-width: 760px; }
.pw-cell { border: 0; border-radius: var(--r-xs); color: #fff; font-weight: 700; font-size: 11px; min-height: 22px; padding: 0; cursor: pointer; }
.pw-cell.free { background: var(--stroke); }
.pw-grid i.off { background: transparent; }
.okbox { padding: 10px 12px; border-radius: var(--r-md); background: color-mix(in srgb, #3fa66b 16%, transparent); font-size: 14px; }
.stage-cam { cursor: grab; }
.cam-body { fill: #1b1f27; stroke: #fff; stroke-width: 12; }
.cam-lens { fill: #7fb4ff; }
.dg-box { fill: var(--glass-strong); stroke-width: 3; }
.dg-title { font-size: 24px; font-weight: 700; fill: var(--text); pointer-events: none; }
.dg-sub { font-size: 18px; fill: var(--muted); pointer-events: none; }
.dg-ip { font-size: 18px; font-weight: 600; fill: #3b82c4; pointer-events: none; }
.dg-ip.bad { fill: #d33; }
.dg-node { cursor: grab; }
.dg-link { fill: none; stroke: var(--muted); stroke-width: 3; }
.dg-link.auto { stroke-dasharray: 8 6; }
.dg-label { font-size: 16px; fill: var(--text); paint-order: stroke; stroke: var(--fill); stroke-width: 4px; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.stack.tight { gap: 6px; }
label.inl.chk { font-size: 15px; color: var(--text); }

.ruler { font-size: 1em; fill: var(--muted); pointer-events: none; font-variant-numeric: tabular-nums; }
.cv-floor { stroke: var(--text); opacity: .55; }
.cv-dim { stroke: #d33; stroke-dasharray: 10 8; }
.dim-label { fill: #d33; font-weight: 700; paint-order: stroke; stroke: var(--fill); stroke-width: 6px; pointer-events: none; }
.grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }

.pdf-frame { width: 100%; height: min(78vh, 900px); border: 1px solid var(--stroke); border-radius: var(--r-md); background: #fff; }

.diagram-wrap { overflow-x: auto; border-radius: var(--r-md); background: var(--fill); }
.diagram-wrap .stage-svg { margin: 0; border-radius: 0; }
.eq-pick { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 8px; }
.eq-pick .btn { text-align: left; }

.dg-port { fill: var(--fill, #fff); stroke-width: 3; cursor: crosshair; }
.dg-port.in { stroke: #3fa66b; }
.dg-port.out { stroke: #d9822b; }
.dg-port.loop { stroke: #9b6bd1; stroke-dasharray: 4 3; }
.dg-port:hover { fill: var(--muted); }
.dg-port-label { font-size: 16px; fill: var(--text); pointer-events: none; }
.dg-link.tmp { stroke-dasharray: 6 5; pointer-events: none; }
.io-row { display: grid; grid-template-columns: 96px 1fr 1fr auto; gap: 6px; align-items: center; }
.io-add { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 6px; }
.io-count { width: 52px; }
@media (max-width: 560px) { .io-row { grid-template-columns: 1fr 1fr; } }
.io-add input, .io-add select { width: auto; }
.io-add input.io-count { width: 64px; flex: 0 0 64px; }
.io-add select { flex: 1 1 150px; min-width: 0; }

.eq-filter { display: flex; flex-wrap: wrap; gap: 8px; }
/* чип — единый стиль (раньше было два противоречащих определения) */
.chip { display: inline-flex; align-items: center; gap: 8px; height: 34px; padding: 0 14px; border-radius: var(--r-full); border: 1px solid var(--stroke); background: var(--fill); color: var(--muted); font: inherit; font-weight: 600; font-size: 14px; cursor: pointer; transition: background .15s, color .15s; }
.chip:hover { background: var(--fill-hover); color: var(--text); }
.chip b { font-weight: 600; font-size: 12px; opacity: .6; }
.chip.on { background: var(--accent); color: var(--accent-text); border-color: transparent; }
.chip.on b { opacity: .85; }
.dg-hit { fill: none; stroke: transparent; stroke-width: 18px; cursor: pointer; pointer-events: stroke; }
.dg-linkg:hover .dg-link, .dg-linkg.sel .dg-link { stroke-width: 6px; }
.dg-del { opacity: 0; cursor: pointer; transition: opacity .12s; pointer-events: none; }
.dg-linkg:hover .dg-del, .dg-linkg.sel .dg-del { opacity: 1; pointer-events: all; }
.dg-del circle { fill: #d33; stroke: #fff; stroke-width: 2px; }
.dg-del text { fill: #fff; font-size: 20px; font-weight: 700; text-anchor: middle; pointer-events: none; }
.dg-port.bi { stroke: #2fa8b8; }
.combo { position: relative; }
.combo-list { position: absolute; z-index: 30; left: 0; right: 0; top: calc(100% + 4px); max-height: 260px; overflow-y: auto; margin: 0; padding: 4px; list-style: none; background: var(--glass-strong, #fff); border: 1px solid var(--stroke); border-radius: var(--r-md); box-shadow: 0 12px 32px rgba(0,0,0,.25); backdrop-filter: blur(14px); }
.combo-group { padding: 8px 10px 4px; font-size: 12px; font-weight: 700; opacity: .6; }
.combo-opt { padding: 8px 10px; border-radius: var(--r-sm); cursor: pointer; font-size: 14px; }
.combo-opt:hover, .combo-opt.on { background: var(--accent); color: var(--accent-text); }
.combo-empty { padding: 10px; font-size: 13px; opacity: .7; }
.io-row { grid-template-columns: 150px minmax(0, 1fr) minmax(0, 1.4fr) auto auto; }
.io-row select[hidden] { display: none; }
.io-add .combo { flex: 1 1 200px; min-width: 0; }
@media (max-width: 560px) { .io-row { grid-template-columns: 1fr 1fr; } .io-row .combo { grid-column: 1 / -1; } }
.combo input { width: 100%; }

.dg-link { stroke-width: 4px; }
.dg-port.bk { stroke-dasharray: 3 2; }
.dg-port.used { stroke-dasharray: none; }

/* сверка с банком */
.bank-box { display: grid; gap: 10px; min-width: min(680px, 100%); }
.bank-list { display: grid; gap: 2px; max-height: 46vh; overflow: auto; border: 1px solid var(--line, #ddd); border-radius: var(--r-sm); padding: 4px; }
.bank-row { display: grid; grid-template-columns: auto 1fr minmax(110px, 160px) auto; gap: 8px; align-items: center; padding: 5px 6px; border-radius: var(--r-sm); }
.bank-row:nth-child(even) { background: color-mix(in srgb, currentColor 4%, transparent); }
.bank-row.dim { opacity: .55; }
.bank-title { overflow-wrap: anywhere; }
.bank-title .badge { margin-left: 6px; }
.bank-cat { width: 100%; padding: 4px 6px; font-size: 13px; }
.bank-pick { display: grid; gap: 3px; }
.tripbox { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--line, #ddd); display: grid; gap: 6px; }
.bank-sum { font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; font-weight: 600; }
.bank-sum.inc { color: var(--ok, #1a7f4b); }
@media (max-width: 640px) { .bank-row { grid-template-columns: auto 1fr auto; } .bank-row > .bank-cat, .bank-row > .bank-pick { grid-column: 2 / 4; } }

/* ===== сенсорные экраны (iPhone, iPad, сенсорный ноутбук): цель для пальца не меньше 44 px =====
   Кнопки и поля становятся выше; у мелких элементов (галочки, чипы, переключатели) растёт невидимая
   область касания, а вид почти не меняется. С мышью всё остаётся компактным. */
@media (pointer: coarse) {
  .btn, .seg-b, .crumb, .mob-spaces button, .spaces button { min-height: 44px; }
  .btn.small { min-height: 40px; padding-top: 8px; padding-bottom: 8px; font-size: 14px; }
  .btn, .seg-b, .crumb, .mob-spaces button, .spaces button { display: inline-flex; align-items: center; justify-content: center; }
  .btn.big { justify-content: flex-start; }
  .round { width: 44px; height: 44px; }
  .chip { height: 40px; }
  .check { width: 26px; height: 26px; }
  .chip, .check, .btn.small { position: relative; }
  /* невидимое расширение области касания до 44+ px */
  .chip::after { content: ""; position: absolute; inset: -4px -2px; }
  .check::after { inset: auto; }
  .check::before { content: ""; position: absolute; inset: -9px; border-radius: 50%; }
  .btn.small::after { content: ""; position: absolute; inset: -3px 0; }
  input[type=text], input[type=password], input[type=search], input[type=date], input[type=time], input[type=datetime-local], input[type=number], select { min-height: 44px; font-size: 16px; }
  textarea { font-size: 16px; }
  .chips { gap: 8px; }
}
/* иконки внутри текста и кнопок (вместо эмодзи) */
.with-ico { display: inline-flex; align-items: center; gap: 6px; }
p.with-ico, div.with-ico, b.with-ico { display: flex; }
.btn .ico, .with-ico .ico { width: 1.15em; height: 1.15em; flex: none; }
.btn .ico svg, .with-ico .ico svg, .ico-s .ico svg { width: 100%; height: 100%; }
.btn:has(> .ico) { display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
.btn > .ico:only-child { margin: 0 -4px; }
.ico-s { display: inline-flex; color: var(--muted); }
.ico-s .ico { width: 15px; height: 15px; }
.ok-t { color: var(--green); }
.warn-t { color: var(--orange); }
/* большие кнопки-пункты меню — по левому краю, даже с иконкой */
.btn.big, .btn.big:has(> .ico) { justify-content: flex-start; }

/* ===== кнопка «Создать» и её меню ===== */
.cm { position: relative; display: inline-flex; }
.cm > .btn .ico { width: 18px; height: 18px; }
.cm-pop { position: absolute; right: 0; top: calc(100% + 6px); z-index: 40; min-width: 240px; padding: 6px; display: grid; gap: 2px;
  background: var(--glass-strong); border: 1px solid var(--stroke); border-radius: var(--r-lg); box-shadow: var(--shadow-lg); animation: cm-in .14s ease-out; }
@keyframes cm-in { from { opacity: 0; transform: translateY(-4px); } }
.cm-item { display: flex; align-items: center; gap: 12px; width: 100%; padding: 10px 12px; border: 0; background: transparent; border-radius: var(--r-md); text-align: left; color: var(--text); font-weight: 600; cursor: pointer; }
.cm-item:hover, .cm-item:focus-visible { background: var(--fill); }
.cm-t { display: grid; line-height: 1.25; }
.cm-t small { font-size: var(--fs-xs); font-weight: 500; color: var(--muted); }
.cm-ico { display: inline-flex; width: 20px; justify-content: center; color: var(--muted); }
.cm-ico .ico, .cm-ico .ico svg { width: 19px; height: 19px; }
/* цвет направления — точка-индикатор, как tally на камере */
.cm-dot { width: 10px; height: 10px; margin: 0 5px; border-radius: 50%; background: var(--c-work); flex: none; }
.sp-content .cm-dot { background: var(--c-content); }
.sp-personal .cm-dot { background: var(--c-family); }
.cm-sheet { display: grid; gap: 4px; }
.cm-sheet .cm-item { padding: 14px 12px; font-size: 16px; }
/* на телефоне «Создать» в шапке не нужен — есть «+» в нижнем меню; другие меню (выписка) остаются */
@media (max-width: 860px) { .page-head .cm-create { display: none; } }
@media (prefers-reduced-motion: reduce) { .cm-pop { animation: none; } }
/* в нижнем меню телефона активный раздел — подсветкой круга, без боковой полоски */
@media (max-width: 860px) { .nav button.on::before { display: none; } }

/* ===== Дашборд ===== */
/* отсчёт и сводка дня — рядом на широком экране */
.dash-top { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 14px; align-items: stretch; }
.dash-top > .card { margin: 0; }
.dash-top:has(> :only-child) { grid-template-columns: 1fr; }
@media (max-width: 1100px) { .dash-top { grid-template-columns: 1fr; } }
.card h2 small { font-size: var(--fs-sm); font-weight: 500; color: var(--muted); margin-left: 10px; letter-spacing: 0; }
.card h2 .count-s { margin-left: 8px; vertical-align: 2px; }
.count-s.bad { background: color-mix(in srgb, var(--red) 16%, transparent); color: var(--red); }
/* загрузка: группы с подзаголовком, строки с полоской-индикатором вместо меток */
.load-group { display: grid; gap: 2px; margin-top: 8px; }
.load-group h3 { margin: 6px 0 2px; font-size: var(--fs-sm); font-weight: 650; color: var(--muted); display: flex; align-items: center; gap: 8px; }
.load-row { position: relative; padding-left: 16px; }
.load-row::before { content: ""; position: absolute; left: 4px; top: 10px; bottom: 10px; width: 3px; border-radius: var(--r-xs); background: var(--orange); }
.load-row.lr-bad::before { background: var(--red); }
.load-row > .sub { white-space: nowrap; font-variant-numeric: tabular-nums; }
.load-more > summary { cursor: pointer; color: var(--link); font-size: var(--fs-sm); font-weight: 600; padding: 6px 4px; list-style: none; }
.load-more > summary::-webkit-details-marker { display: none; }
.load-more[open] > summary { color: var(--muted); }
/* ===== раскрывающийся блок настроек (Финансы и др.) ===== */
/* стрелка всегда слева, заголовок и подпись переносятся рядом с ней */
.fold > summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; column-gap: 10px; row-gap: 2px; }
.fold > summary > small { grid-column: 2; }
.fold > summary::-webkit-details-marker { display: none; }
.fold > summary::before { content: ""; width: 8px; height: 8px; border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted); transform: rotate(-45deg); transition: transform .15s; align-self: center; margin-right: 2px; }
.fold[open] > summary::before { transform: rotate(45deg); }
.fold-t { font-size: var(--fs-lg); font-weight: 650; }
.fold > summary small { color: var(--muted); font-size: var(--fs-sm); }
.fold-body { border-top: 1px solid var(--stroke); margin-top: 16px; padding-top: 16px; display: grid; gap: 10px; }
.fold-body h2 { margin: 0; font-size: var(--fs-md); }
@media (prefers-reduced-motion: reduce) { .fold > summary::before { transition: none; } }
/* ===== карточки проектов ===== */
.ecard-tags { margin-top: 10px; display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
/* «Заявка» — пунктиром: проект ещё не подтверждён (как «предварительно» в занятости) */
.badge.tentative { background: transparent; border: 1px dashed var(--faint); padding-top: 2px; padding-bottom: 2px; }
.ecard .dir { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-xs); color: var(--muted); font-weight: 600; margin-left: auto; }
.ecard .dir::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--c); }
/* ===== задачи: группы по сроку, направление точкой ===== */
.grp-h { display: flex; align-items: center; gap: 8px; margin: 14px 10px 4px; font-size: var(--fs-sm); font-weight: 650; color: var(--muted); }
.grp-h:first-child { margin-top: 2px; }
.grp-h.grp-overdue { color: var(--red); }
.grp-h.grp-today { color: var(--text); }
.dir-tag { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-xs); font-weight: 600; color: var(--muted); white-space: nowrap; }
.dir-tag::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--c-work); flex: none; }
.dir-tag.s-content::before { background: var(--c-content); }
.dir-tag.s-personal::before { background: var(--c-family); }
/* ===== настройки: разделы и раскрывающиеся блоки ===== */
.set-search { max-width: 420px; }
.set-group { display: grid; gap: 8px; }
.set-group[hidden] { display: none; }
.set-gh { margin: 14px 0 0; font-size: var(--fs-sm); font-weight: 650; color: var(--muted); }
.set-fold { padding: 14px 18px; }
.set-fold[hidden] { display: none; }
.set-fold > summary .fold-t { font-size: var(--fs-md); }
.set-fold .fold-body { margin-top: 12px; padding-top: 12px; }
.set-fold .fold-body > h2 { display: none; }

/* =====================================================================
   0.44.0 — оформление Liquid Glass (по руководству Apple):
   слой навигации — прозрачное стекло поверх фона, содержимое — матовые секции,
   капсулы, концентрические скругления, одна скорость анимаций 0,45 с.
   ===================================================================== */
/* Inter — замена SF Pro на Windows (на iPhone/iPad берётся системный SF) */
@font-face { font-family: "Inter"; font-style: normal; font-weight: 300 700; font-display: swap; src: url(fonts/inter-cyrillic.woff2) format("woff2"); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 300 700; font-display: swap; src: url(fonts/inter-latin-ext.woff2) format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 300 700; font-display: swap; src: url(fonts/inter-latin.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

:root {
  /* SF Pro на Apple-устройствах; на Windows ближайшая замена — Inter. Один шрифт на всё, включая таймер */
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter", "Segoe UI Variable Text", sans-serif;
  --mono: var(--font);
  --fs-xs: 12px; --fs-sm: 13px; --fs-md: 15px; --fs-lg: 17px; --fs-xl: 22px; --fs-xxl: 34px;
  --bg: #dfe9f5; --side-bg: transparent;
  --text: #0b0b0f; --muted: rgba(40,40,52,.68); --faint: rgba(40,40,52,.6);
  --fill: rgba(120,120,128,.14); --fill-hover: rgba(120,120,128,.22);
  --stroke: rgba(60,60,67,.14); --edge: rgba(60,60,67,.14);
  --accent: #0088ff; --accent-text: #fff; --primary: #0088ff; --link: #0068d9;
  --blue: #0068d9; --teal: #0068d9; --green: #248a3d; --orange: #c93400; --purple: #c93400; --red: #d70015;
  --c-work: #0088ff; --c-content: #ff8d28; --c-family: #34c759; --c-personal: #ff8d28;
  --live: #ff383c;
  --shadow: none; --shadow-lg: 0 24px 64px rgba(10,30,60,.22);
  /* шкала скруглений, концентрическая: окно 26 → внутри с отступом 10 → 16 → 10 */
  --r-xs: 6px; --r-sm: 10px; --r-md: 16px; --r-lg: 26px; --r-xl: 34px; --radius: 26px;

  /* фон-обои: нужен, чтобы стекло было видно; приглушён, чтобы текст читался */
  --wall:
    radial-gradient(60% 55% at 12% 8%, #a9d4ff 0%, transparent 60%),
    radial-gradient(50% 60% at 92% 18%, #c7b8ff 0%, transparent 62%),
    radial-gradient(70% 60% at 78% 96%, #7fc4ff 0%, transparent 60%),
    radial-gradient(55% 50% at 6% 92%, #ffd8b0 0%, transparent 58%),
    linear-gradient(160deg, #eaf2fb 0%, #d6e6f7 45%, #cfe0f4 100%);

  /* стекло навигации: прозрачное, с бликом по краю */
  --lg-bg: rgba(255,255,255,.34);
  --lg-bg-strong: rgba(255,255,255,.62);
  --lg-edge: rgba(255,255,255,.7);
  --lg-hi: inset 0 1px 1px rgba(255,255,255,.95), inset 0 -1px 1px rgba(255,255,255,.35), inset 0 0 0 .5px rgba(255,255,255,.4), inset 0 0 24px rgba(255,255,255,.18);
  --lg-drop: 0 10px 30px rgba(20,50,90,.14), 0 1px 3px rgba(20,50,90,.08);
  --lg-blur: blur(26px) saturate(185%) brightness(1.04);
  /* стекло содержимого: плотнее, чтобы текст читался */
  --card-bg: rgba(255,255,255,.7);
  --card-edge: rgba(255,255,255,.75);
  --card-blur: blur(30px) saturate(160%);

  --spring: cubic-bezier(.32,1.42,.5,1);
  --ease: cubic-bezier(.2,.8,.2,1);
}
:root[data-theme="dark"] {
  --bg: #05070d;
  --text: #fff; --muted: rgba(235,235,245,.66); --faint: rgba(235,235,245,.58);
  --fill: rgba(118,118,128,.26); --fill-hover: rgba(118,118,128,.36);
  --stroke: rgba(255,255,255,.1); --edge: rgba(255,255,255,.1);
  --accent: #0091ff; --primary: #0091ff; --link: #3ea6ff;
  --blue: #3ea6ff; --teal: #3ea6ff; --green: #30d158; --orange: #ff9230; --purple: #ff9230; --red: #ff4245;
  --c-work: #0091ff; --c-content: #ff9230; --c-family: #30d158; --c-personal: #ff9230;
  --live: #ff4245;
  --wall:
    radial-gradient(55% 50% at 10% 6%, rgba(40,110,255,.55) 0%, transparent 62%),
    radial-gradient(50% 55% at 95% 20%, rgba(130,70,255,.42) 0%, transparent 60%),
    radial-gradient(70% 60% at 75% 100%, rgba(0,150,255,.38) 0%, transparent 60%),
    radial-gradient(50% 45% at 5% 95%, rgba(255,120,60,.22) 0%, transparent 60%),
    linear-gradient(160deg, #0a1022 0%, #070b18 50%, #05070d 100%);
  --lg-bg: rgba(60,64,80,.28);
  --lg-bg-strong: rgba(40,42,52,.72);
  --lg-edge: rgba(255,255,255,.16);
  --lg-hi: inset 0 1px 1px rgba(255,255,255,.28), inset 0 -1px 1px rgba(255,255,255,.06), inset 0 0 0 .5px rgba(255,255,255,.08), inset 0 0 24px rgba(255,255,255,.04);
  --lg-drop: 0 12px 36px rgba(0,0,0,.5);
  --card-bg: rgba(28,28,34,.66);
  --card-edge: rgba(255,255,255,.09);
}

/* ===== Шрифт и фон ===== */
body { font-family: var(--font); font-size: 15px; letter-spacing: -.01em; background: var(--wall) fixed, var(--bg); background-color: var(--bg); }
.layout, .main { background: transparent; }

/* ===== Слой навигации: прозрачное стекло, парит над фоном ===== */
.side {
  margin: 10px 0 10px 10px; height: calc(100vh - 20px); border-radius: 26px; padding: 14px 10px;
  background: var(--lg-bg); backdrop-filter: var(--lg-blur); -webkit-backdrop-filter: var(--lg-blur);
  border: 1px solid var(--lg-edge); box-shadow: var(--lg-hi), var(--lg-drop);
}
.nav { gap: 2px; }
/* пункт меню: 26 − 10 отступ = 16 */
.nav button { border-radius: 16px; padding: 9px 12px; font-weight: 500; font-size: 15px; color: var(--text);
  transition: background .25s var(--ease), transform .4s var(--spring); }
.nav button .ico { color: var(--accent); }
.nav button:hover { background: rgba(255,255,255,.28); }
:root[data-theme="dark"] .nav button:hover { background: rgba(255,255,255,.07); }
.nav button.on { background: var(--accent); color: #fff; box-shadow: 0 4px 14px color-mix(in srgb, var(--accent) 30%, transparent); font-weight: 600; }
.nav button.on .ico { color: #fff; }
.nav button.on::before { display: none; }

.col { position: relative; }
.top {
  position: absolute; z-index: 30; top: 10px; left: 16px; right: 16px; margin: 0;
  border-radius: 999px; padding: 6px 8px;
  background: var(--lg-bg); backdrop-filter: var(--lg-blur); -webkit-backdrop-filter: var(--lg-blur);
  border: 1px solid var(--lg-edge); box-shadow: var(--lg-hi), var(--lg-drop);
}
/* эффект края прокрутки */
.col::before { content: ""; position: absolute; z-index: 25; left: 0; right: 0; top: 0; height: 80px; pointer-events: none;
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  -webkit-mask-image: linear-gradient(#000 35%, transparent); mask-image: linear-gradient(#000 35%, transparent); }
.main { padding-top: 84px; }
.gsearch input[type=search] { border-radius: 999px; background: rgba(255,255,255,.4); border: 0; }
:root[data-theme="dark"] .gsearch input[type=search] { background: rgba(255,255,255,.08); }
.round { border-radius: 50%; background: var(--lg-bg); border: 1px solid var(--lg-edge); box-shadow: var(--lg-hi); }
.sres { border-radius: 26px; background: var(--lg-bg-strong); backdrop-filter: var(--lg-blur); -webkit-backdrop-filter: var(--lg-blur); border: 1px solid var(--lg-edge); box-shadow: var(--lg-hi), var(--shadow-lg); }
.sres .kind { border-radius: 999px; }

/* ===== Сегментный переключатель: одна капсула, бегунок-стекло (ПК, телефон, финансы, календарь) ===== */
.top .spaces, .mob-spaces, .seg, .cal-bar .chips {
  display: inline-flex; gap: 0; padding: 3px; border-radius: 999px; border: 0;
  background: var(--fill); box-shadow: inset 0 0 0 .5px var(--stroke);
}
.top .spaces button, .mob-spaces button, .seg-b, .cal-bar .chips > .chip {
  flex: 1 1 0; height: 32px; padding: 0 14px; margin: 0; border: 0 !important; border-radius: 999px !important;
  background: transparent; color: var(--text); font-weight: 500; font-size: 14px; opacity: 1; box-shadow: none;
  transition: background .35s var(--spring), box-shadow .35s var(--ease);
}
.top .spaces button.on, .top .spaces button.on[data-space], .mob-spaces button.on, .seg-b.on, .cal-bar .chips > .chip.on {
  background: #fff; color: var(--text); font-weight: 600;
  box-shadow: 0 3px 10px rgba(0,0,0,.12), 0 0 0 .5px rgba(0,0,0,.04), inset 0 1px 0 rgba(255,255,255,.9);
}
:root[data-theme="dark"] .top .spaces button.on, :root[data-theme="dark"] .mob-spaces button.on, :root[data-theme="dark"] .seg-b.on, :root[data-theme="dark"] .cal-bar .chips > .chip.on {
  background: rgba(255,255,255,.2); color: #fff; box-shadow: inset 0 1px 0 rgba(255,255,255,.25), 0 3px 10px rgba(0,0,0,.3);
}

/* ===== Слой содержимого: матовое стекло, плотное ради читаемости ===== */
.card, .calcard, .tile {
  background: var(--card-bg); backdrop-filter: var(--card-blur); -webkit-backdrop-filter: var(--card-blur);
  border: 1px solid var(--card-edge) !important; box-shadow: 0 1px 0 rgba(255,255,255,.5) inset, 0 6px 24px rgba(20,50,90,.06) !important;
  border-radius: 26px;
}
:root[data-theme="dark"] .card, :root[data-theme="dark"] .calcard, :root[data-theme="dark"] .tile { box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 8px 30px rgba(0,0,0,.35) !important; }
.card { padding: 20px; }
.calcard { padding: 16px; }
.tile { padding: 16px 18px; }

/* типографика по шкале Apple */
.page-head h1 { font-size: 34px; font-weight: 700; letter-spacing: .01em; line-height: 1.12; }
.page-head h1 small { font-size: 13px; color: var(--muted); font-weight: 500; letter-spacing: 0; }
h2, .card h2 { font-size: 20px; font-weight: 600; letter-spacing: .01em; }
.cal-bar .title { font-size: 22px; font-weight: 700; letter-spacing: .01em; }
.tile .tl { font-size: 13px; font-weight: 500; }
.tile .tv { font-size: 28px; font-weight: 700; letter-spacing: 0; }

/* таймер: тот же шрифт, тонкие цифры одинаковой ширины, как часы в iOS */
.tc { font-family: var(--font); font-variant-numeric: tabular-nums; gap: 4px; }
.tc-g b { font-weight: 400; font-size: clamp(40px, 10vw, 56px); letter-spacing: -.01em; }
.tc-sep { font-weight: 400; font-size: clamp(40px, 10vw, 56px); color: var(--faint); }
.tc-g small { font-size: 12px; font-weight: 500; }
.nextup::before { border-radius: 999px; }

/* концентрические скругления внутри карточек 26 → 16 → 10 */
.row, .dayitem, .subcard, .folderbox, .perf, .doc, .week .col, .warn, .okbox, .upload-status, .bank-list, details.more, .ai-msg { border-radius: 16px; }
.cell { border-radius: 14px; }
.cell .num { border-radius: 50%; }
.pill { border-radius: 7px; font-weight: 500; }
.bar, .bar > i { border-radius: 999px; }
.check { border-radius: 50%; }
.avatar { border-radius: 50%; }
.count-s, .badge, .nav .count, .round .dot, .offline-pill { border-radius: 999px; }
.badge { font-weight: 600; }
code { border-radius: 8px; }

/* ===== Кнопки: капсулы ===== */
.btn { border-radius: 999px; font-weight: 600; padding: 9px 18px; color: var(--text);
  background: var(--lg-bg); backdrop-filter: var(--lg-blur); -webkit-backdrop-filter: var(--lg-blur);
  border: 1px solid var(--lg-edge); box-shadow: var(--lg-hi), 0 2px 8px rgba(20,50,90,.06);
  transition: transform .4s var(--spring), background .2s var(--ease); }
.card .btn, .calcard .btn, .modal .btn { background: var(--fill); border-color: transparent; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; }
.btn:active { transform: scale(.95); }
.btn.primary, .card .btn.primary, .calcard .btn.primary, .modal .btn.primary { background: var(--accent); color: #fff; border: 1px solid rgba(255,255,255,.28);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.4), 0 4px 14px color-mix(in srgb, var(--accent) 32%, transparent); }
.btn.big { border-radius: 20px; }
.chip { border-radius: 999px; border: 0; background: var(--fill); font-weight: 500; }
.chip.on { background: color-mix(in srgb, var(--accent) 16%, transparent); color: var(--accent); }
.ai-fab { border-radius: 50%; background: var(--lg-bg); color: var(--accent); backdrop-filter: var(--lg-blur); -webkit-backdrop-filter: var(--lg-blur); border: 1px solid var(--lg-edge); box-shadow: var(--lg-hi), var(--lg-drop); }

/* ===== Поля ввода: капсулы, многострочные — 18 ===== */
input[type=text], input[type=password], input[type=search], input[type=datetime-local], input[type=date], input[type=time], input[type=number], select {
  border-radius: 999px !important; border: 0; background: var(--fill); box-shadow: none; padding-left: 16px; padding-right: 16px; min-height: 40px; }
textarea { border-radius: 18px !important; border: 0; background: var(--fill); box-shadow: none; }
input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 3px solid color-mix(in srgb, var(--accent) 45%, transparent); outline-offset: 0; }

/* ===== Меню и окна: стекло, вырастают из кнопки ===== */
.cm-pop, .combo-list { border-radius: 26px; padding: 8px; background: var(--lg-bg-strong);
  backdrop-filter: var(--lg-blur); -webkit-backdrop-filter: var(--lg-blur);
  border: 1px solid var(--lg-edge); box-shadow: var(--lg-hi), var(--shadow-lg);
  transform-origin: top right; animation: lg-morph .42s var(--spring); }
.cm-item, .combo-opt { border-radius: 18px; }
@keyframes lg-morph { from { opacity: 0; transform: scale(.6); filter: blur(6px); } to { opacity: 1; transform: none; filter: none; } }
.modal { border-radius: 34px; background: var(--lg-bg-strong); backdrop-filter: var(--lg-blur); -webkit-backdrop-filter: var(--lg-blur);
  border: 1px solid var(--lg-edge) !important; box-shadow: var(--lg-hi), var(--shadow-lg); animation: lg-morph .45s var(--spring); }

/* ===== Телефон ===== */
@media (max-width: 860px) {
  .col::before { display: none; }
  .main { padding-top: 10px; }
  body { font-size: 17px; }
  .page-head h1 { font-size: 34px; }
  /* таб-бар: плавающая стеклянная капсула */
  .side { margin: 0; height: auto; border-radius: 999px; padding: 6px;
    background: var(--lg-bg); border: 1px solid var(--lg-edge); box-shadow: var(--lg-hi), var(--lg-drop); }
  .nav button, .nav button:hover { border-radius: 50%; color: var(--text); background: transparent; box-shadow: none; }
  .nav button .ico { color: var(--text); }
  .nav button.on, .nav button.on:hover { background: rgba(255,255,255,.55); color: var(--accent); box-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 2px 8px rgba(0,0,0,.08); }
  :root[data-theme="dark"] .nav button.on { background: rgba(255,255,255,.16); box-shadow: inset 0 1px 0 rgba(255,255,255,.2); }
  .nav button.on .ico { color: var(--accent); }
  .nav button.add, .nav button.add:hover { background: var(--accent); color: #fff; box-shadow: inset 0 1px 0 rgba(255,255,255,.4), 0 4px 14px color-mix(in srgb, var(--accent) 35%, transparent); }
  .nav button.add .ico { color: #fff; }
  /* направления: ползунок на всю ширину, как на ПК */
  .mob-spaces { display: flex; width: 100%; margin: 0 0 14px; overflow: visible; }
  .mob-spaces button { flex: 1 1 0; padding: 0 6px; height: 34px; font-size: 14px; }
  .seg { display: flex; }
  .card { padding: 18px; }
  .modal { margin: 8px; width: calc(100% - 16px); border-radius: 36px; }
  input[type=text], input[type=password], input[type=search], select { min-height: 44px; }
}

/* ===== Доступность ===== */
@media (prefers-reduced-transparency: reduce) {
  .side, .top, .btn, .cm-pop, .modal, .card, .calcard, .tile, .sres, .combo-list { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }
  .side, .top, .cm-pop, .modal, .sres { background: #f5f5f7 !important; }
  .card, .calcard, .tile { background: #fff !important; }
  :root[data-theme="dark"] .side, :root[data-theme="dark"] .top, :root[data-theme="dark"] .card, :root[data-theme="dark"] .calcard, :root[data-theme="dark"] .tile { background: #1c1c1e !important; }
  .col::before { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .btn:active { transform: none; }
}
@media (prefers-contrast: more) {
  .side, .top, .btn, .cm-pop, .modal, .card, .calcard, .tile { border: 1.5px solid var(--text) !important; }
  :root { --muted: rgba(20,20,30,.85); }
}

/* ----- анимации: одна скорость 0,45 с везде ----- */
:root { --dur: .45s; }

/* бегунок у всех групп выбора: направления, Работа/Личное, Месяц/Неделя, фильтры, меню */
.top .spaces, .mob-spaces, .seg, .chips, .nav { position: relative; }
.top .spaces > button, .mob-spaces > button, .seg > .seg-b, .chips > .chip, .nav > button { position: relative; z-index: 1; }
.lg-thumb { position: absolute; left: 0; top: 0; z-index: 0; pointer-events: none; border-radius: 999px;
  transition: transform var(--dur) var(--spring), width var(--dur) var(--spring), height var(--dur) var(--ease), opacity var(--dur);
  background: #fff; box-shadow: 0 3px 10px rgba(0,0,0,.12), 0 0 0 .5px rgba(0,0,0,.04), inset 0 1px 0 rgba(255,255,255,.9); }
.lg-thumb.moving { animation: lg-stretch var(--dur) var(--ease); }
@keyframes lg-stretch { 40% { scale: 1.07 .88; } 100% { scale: 1 1; } }
:root[data-theme="dark"] .lg-thumb { background: rgba(255,255,255,.2); box-shadow: inset 0 1px 0 rgba(255,255,255,.25), 0 3px 10px rgba(0,0,0,.3); }
.top .spaces button.on, .mob-spaces button.on, .seg-b.on, .chips > .chip.on { background: transparent !important; box-shadow: none !important; }

/* фильтры: вместо чёрной заливки — голубая подложка и синий текст */
.chips > .chip { background: var(--fill); color: var(--text); transition: color var(--dur) var(--ease); }
.chips > .chip.on { color: var(--accent) !important; font-weight: 600; }
.chips:has(> .lg-thumb) > .chip.on { background: transparent !important; }
.chips > .lg-thumb { background: color-mix(in srgb, var(--accent) 16%, #fff); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 35%, transparent); }
:root[data-theme="dark"] .chips > .lg-thumb { background: color-mix(in srgb, var(--accent) 30%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 50%, transparent); }
:root[data-theme="dark"] .chips > .chip.on { color: #fff !important; }
.cal-bar .chips > .lg-thumb { background: #fff; box-shadow: 0 3px 10px rgba(0,0,0,.12); }
.cal-bar .chips > .chip.on { color: var(--text) !important; }

.nav > .lg-thumb { border-radius: 16px; background: var(--accent); box-shadow: 0 4px 14px color-mix(in srgb, var(--accent) 30%, transparent); }
.nav button.on { background: transparent !important; box-shadow: none !important; }
@media (max-width: 860px) {
  .nav > .lg-thumb { border-radius: 50%; background: rgba(255,255,255,.6); box-shadow: inset 0 1px 0 rgba(255,255,255,.95), 0 2px 8px rgba(0,0,0,.1); }
  :root[data-theme="dark"] .nav > .lg-thumb { background: rgba(255,255,255,.16); }
}

/* наведение и цвет — та же скорость */
.nav button, .btn, .chip, .row, .cm-item, .round, .ecard, .seg-b, .spaces button, .mob-spaces button {
  transition: color var(--dur) var(--ease), background var(--dur) var(--ease), box-shadow var(--dur) var(--ease), filter var(--dur) var(--ease), transform var(--dur) var(--spring); }
.btn:hover { filter: brightness(1.06); box-shadow: var(--lg-hi), 0 6px 18px rgba(20,50,90,.12); }
.btn.primary:hover { filter: brightness(1.1); }
.row:hover, .cm-item:hover { background: var(--fill); }
.round:hover { background: var(--lg-bg-strong); }
.card.ecard:hover { box-shadow: 0 1px 0 rgba(255,255,255,.5) inset, 0 10px 30px rgba(20,50,90,.12) !important; }

/* нажатие: сжатие, отпускание — пружина 0,45 */
.btn:active, .chip:active, .round:active, .seg-b:active, .spaces button:active, .mob-spaces button:active, .nav button:active { transform: scale(.94); }

/* смена раздела и содержимого: растворение 0,45 */
.main.enter > * { animation: lg-in var(--dur) var(--ease) both; }
@keyframes lg-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
#modal-root .overlay { animation: lg-fade var(--dur) var(--ease); }
@keyframes lg-fade { from { opacity: 0; } }
.cm-pop, .modal, .combo-list { animation-duration: var(--dur) !important; }
@media (max-width: 860px) {
  .modal { animation: lg-sheet var(--dur) var(--spring); }
  @keyframes lg-sheet { from { transform: translateY(70%); opacity: .4; } to { transform: none; opacity: 1; } }
}

/* ===== Телефон: разгрузка Задач и «ИП по направлениям» ===== */
@media (max-width: 860px) {
  /* фильтры одной строкой с прокруткой, без переноса на две строки */
  .chips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin: 0 -14px; padding: 2px 14px;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 14px, #000 calc(100% - 24px), transparent); mask-image: linear-gradient(90deg, transparent, #000 14px, #000 calc(100% - 24px), transparent); }
  .chips::-webkit-scrollbar { display: none; }
  .chips > .chip { flex: none; height: 34px; }

  /* строка задачи: кружок слева, название на всю ширину, ниже одна строка: срок · направление */
  .row:has(> .check) { display: grid !important; grid-template-columns: 28px 1fr; column-gap: 12px; row-gap: 6px; align-items: start; padding: 12px 8px !important; }
  .row:has(> .check) > .prio { display: none; }
  .row > .check { grid-row: 1 / span 2; margin-top: 1px; }
  .row > .grow { grid-column: 2; }
  .row .title { font-size: 16px; font-weight: 500; white-space: normal; line-height: 1.3; }
  .row .sub { font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 2px; }
  .row:has(> .check) > :not(.prio):not(.check):not(.grow) { grid-column: 2; justify-self: start; }
  .row > .lg-meta { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
  .row .badge { font-size: 12px; padding: 2px 9px; }
  .row .dir-tag { font-size: 12px; color: var(--muted); }
  /* категории: одна колонка, название слева, сумма справа в одну строку */
  .grid2 { grid-template-columns: 1fr !important; }
  .catbar .cb-top { flex-wrap: nowrap; font-size: 15px; }
  .catbar .cb-top > span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .catbar .cb-top > span:last-child { white-space: nowrap; font-weight: 600; }
  .catbar .bar { height: 8px; }
}

/* «ИП по направлениям» */
.lg-dir { display: grid; grid-template-columns: 1fr auto; gap: 6px 12px; padding: 12px 0; align-items: baseline; }
.lg-dir + .lg-dir { border-top: 1px solid var(--stroke); }
.lg-dir .n { font-weight: 600; font-size: 16px; display: flex; align-items: center; gap: 8px; }
.lg-dir .n i { width: 10px; height: 10px; border-radius: 50%; background: var(--c); }
.lg-dir .v { font-weight: 700; font-size: 20px; font-variant-numeric: tabular-nums; text-align: right; }
.lg-dir .bar { grid-column: 1 / -1; height: 8px; }
.lg-dir .bar > i { background: var(--c) !important; }
.lg-dir .m { grid-column: 1 / -1; font-size: 13px; color: var(--muted); font-variant-numeric: tabular-nums; }

@media (prefers-reduced-motion: reduce) { .lg-thumb { transition: none; } }

/* ===== Значок меню, как у Apple ===== */
/* выбор значения (pop-up button): ⌃⌄ справа */
select { -webkit-appearance: none; appearance: none; padding-right: 40px !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='16' viewBox='0 0 12 16' fill='none' stroke='%238a8a8e' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.5 6 6 2.5 9.5 6'/%3E%3Cpath d='M2.5 10 6 13.5 9.5 10'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important; background-position: right 16px center !important; background-size: 10px 14px !important; cursor: pointer; }
/* кнопка, открывающая меню (pull-down button): ⌄ после текста */
.btn[aria-haspopup]::after, .cal-bar .titlebtn::after { content: ""; display: inline-block; width: 11px; height: 11px; margin-left: 8px; vertical-align: 0;
  background: currentColor; opacity: .75;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.5 4.5 6 8l3.5-3.5'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.5 4.5 6 8l3.5-3.5'/%3E%3C/svg%3E") center / contain no-repeat;
  transition: rotate var(--dur) var(--spring); }
.btn[aria-haspopup][aria-expanded="true"]::after { rotate: 180deg; }
.cal-bar .titlebtn .caret { display: none; }
/* ===== Настройки: сгруппированный список, как в «Настройках» iPhone ===== */
.set-group { gap: 0 !important; }
.set-group > .set-gh { padding: 0 20px 8px; }
.set-group > .set-fold { border-radius: 0 !important; margin: 0 !important; box-shadow: none !important; border-width: 0 !important; position: relative; }
.set-group > .set-fold:first-of-type { border-radius: 26px 26px 0 0 !important; }
.set-group > .set-fold:last-of-type { border-radius: 0 0 26px 26px !important; }
.set-group > .set-fold:first-of-type:last-of-type { border-radius: 26px !important; }
.set-group > .set-fold + .set-fold::before { content: ""; position: absolute; left: 20px; right: 0; top: 0; height: 1px; background: var(--stroke); }
.set-group { margin-bottom: 22px; }
/* стрелка раскрытия — справа, как у Apple */
.fold > summary { grid-template-columns: minmax(0, 1fr) auto !important; }
.fold > summary > .fold-t, .fold > summary > span:first-child { grid-column: 1; grid-row: 1; }
.fold > summary > small { grid-column: 1 !important; }
.fold > summary::before { grid-column: 2; grid-row: 1 / span 2; transform: rotate(45deg) !important; width: 8px; height: 8px; margin-right: 4px; transition: transform var(--dur) var(--spring) !important; }
.fold:not([open]) > summary::before { transform: rotate(-45deg) !important; }

/* ===== Окна ===== */
.modal footer:empty { display: none; }
.modal footer { background: var(--lg-bg-strong) !important; backdrop-filter: var(--lg-blur); -webkit-backdrop-filter: var(--lg-blur); border-top: 1px solid var(--stroke) !important; }
.modal .body > * { min-width: 0; }
.modal .body input, .modal .body select, .modal .body textarea { max-width: 100%; box-sizing: border-box; }

/* список разделов в «Ещё»: одна группа строк со стрелкой справа */
.stack-sm:has(> .btn.big) { gap: 0 !important; }
.stack-sm > .btn.big { border-radius: 0 !important; margin: 0; background: var(--glass-strong, #fff) !important; color: var(--text) !important; font-weight: 500;
  border: 0 !important; box-shadow: none !important; backdrop-filter: none !important; padding: 14px 16px; position: relative; }
:root[data-theme="dark"] .stack-sm > .btn.big { background: rgba(255,255,255,.08) !important; }
.stack-sm > .btn.big .ico { color: var(--accent); }
.stack-sm > .btn.big:first-of-type { border-radius: 22px 22px 0 0 !important; }
.stack-sm > .btn.big:last-of-type { border-radius: 0 0 22px 22px !important; }
.stack-sm > .btn.big + .btn.big::before { content: ""; position: absolute; left: 50px; right: 0; top: 0; height: 1px; background: var(--stroke); }
.stack-sm > .btn.big::after { content: ""; margin-left: auto; width: 8px; height: 8px; border-right: 2px solid var(--faint); border-bottom: 2px solid var(--faint); transform: rotate(-45deg); flex: none; }

@media (max-width: 860px) {
  #modal-root .overlay { padding: 0 !important; }
  .modal { margin: 0 8px 8px !important; width: calc(100vw - 16px) !important; max-width: none !important; box-sizing: border-box; overflow-x: hidden; }
  .modal .body { padding-left: 16px !important; padding-right: 16px !important; }
  /* в настройках и файлах направления не нужны */
  .main:has(.set-search) .mob-spaces { display: none; }
  /* Файлы: поиск на всю ширину, кнопки строкой ниже */
  .files-tools { flex-wrap: wrap; }
  .files-tools .files-search { flex: 1 1 100%; }
  /* календарь: переключатель вида на всю ширину */
  .cal-bar .chips { flex: 1 1 100%; display: flex; }
  .cal-bar .chips > .chip { flex: 1 1 0; }
  /* контакты: длинное имя не должно сжимать метку */
  .row .badge { flex: none; }
}
:root[data-theme="dark"] .nav > .lg-thumb { background: var(--accent); box-shadow: 0 4px 14px color-mix(in srgb, var(--accent) 35%, transparent); }
@media (max-width: 860px) { :root[data-theme="dark"] .nav > .lg-thumb { background: rgba(255,255,255,.16); box-shadow: inset 0 1px 0 rgba(255,255,255,.2); } }
.stack-sm:has(> .btn.big) { display: grid; }
.stack-sm > .btn.big { display: flex !important; align-items: center; gap: 12px; filter: none !important; }
.stack-sm > .btn.big.primary { color: var(--accent) !important; font-weight: 600; }
@media (max-width: 860px) { .modal { padding-bottom: 0 !important; } .modal footer { margin-bottom: 0; bottom: 0; } }

.modal footer { background: rgba(255,255,255,.9) !important; backdrop-filter: blur(30px) saturate(180%) !important; }
:root[data-theme="dark"] .modal footer { background: rgba(30,30,36,.92) !important; }


/* ===== Поиск рядом с фильтрами ===== */
.chips-row { display: flex; flex-wrap: wrap; gap: 8px 10px; align-items: center; }
.chips-row > input { flex: 0 1 300px; min-width: 0; }
@media (max-width: 860px) {
  .chips-row { display: grid; gap: 10px; }
  .chips-row > input { width: 100%; }
}

/* ===== Телефон: две стеклянные кнопки внизу и меню, которые из них вырастают ===== */
.dock { display: none; }
@media (max-width: 860px) {
  .main { padding-bottom: 110px !important; }
  .dock { display: block; }
  .dock-btn { position: fixed; z-index: 60; bottom: calc(18px + env(safe-area-inset-bottom)); width: 60px; height: 60px; border-radius: 50%;
    display: grid; place-items: center; padding: 0; cursor: pointer; color: var(--accent);
    background: var(--lg-bg); border: 1px solid var(--lg-edge);
    backdrop-filter: blur(22px) saturate(190%) brightness(1.05); -webkit-backdrop-filter: blur(22px) saturate(190%) brightness(1.05);
    box-shadow: var(--lg-hi), 0 8px 26px rgba(20,50,90,.18);
    transition: transform var(--dur) var(--spring), rotate var(--dur) var(--spring), background var(--dur) var(--ease); }
  :root[data-theme="dark"] .dock-btn { box-shadow: var(--lg-hi), 0 8px 26px rgba(0,0,0,.5); }
  .dock-btn:active { transform: scale(1.08); filter: brightness(1.12); }
  .dock-btn .ico svg { width: 26px; height: 26px; }
  .dock-menu { left: 18px; }
  .dock-menu[aria-expanded="true"] { background: var(--lg-bg-strong); }
  .dock-menu .count { position: absolute; top: -2px; right: -2px; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px;
    background: var(--red); color: #fff; font-size: 11px; font-weight: 700; display: grid; place-items: center; }
  /* «Создать»: тонированное стекло — синее, но полупрозрачное */
  .dock-plus { right: 18px; color: #fff; background: color-mix(in srgb, var(--accent) 72%, transparent); border-color: rgba(255,255,255,.45);
    box-shadow: inset 0 1px 1px rgba(255,255,255,.7), inset 0 -1px 1px rgba(255,255,255,.2), inset 0 0 18px rgba(255,255,255,.18), 0 8px 26px color-mix(in srgb, var(--accent) 38%, transparent); }
  .dock-plus .ico svg { width: 28px; height: 28px; stroke-width: 2.4; }
  .dock-plus[aria-expanded="true"] { rotate: 45deg; }

  .dock-pop { position: fixed; z-index: 61; bottom: calc(90px + env(safe-area-inset-bottom)); display: grid; gap: 0; padding: 8px; border-radius: 30px;
    background: var(--lg-bg); border: 1px solid var(--lg-edge);
    backdrop-filter: blur(30px) saturate(200%) brightness(1.06); -webkit-backdrop-filter: blur(30px) saturate(200%) brightness(1.06);
    box-shadow: var(--lg-hi), 0 18px 50px rgba(20,50,90,.25);
    animation: lg-pop var(--dur) var(--spring); max-height: calc(100vh - 120px); overflow-y: auto; }
  :root[data-theme="dark"] .dock-pop { box-shadow: var(--lg-hi), 0 18px 50px rgba(0,0,0,.6); }
  .dock-pop[hidden] { display: none; }
  .dock-sections { left: 14px; width: min(272px, calc(100vw - 28px)); transform-origin: 30px calc(100% + 40px); }
  .dock-create { right: 14px; width: min(250px, calc(100vw - 28px)); transform-origin: calc(100% - 30px) calc(100% + 40px); }
  @keyframes lg-pop { from { opacity: 0; transform: scale(.35); filter: blur(8px); } to { opacity: 1; transform: none; filter: none; } }
  .dock-item, .dock-create .cm-item { display: flex; align-items: center; gap: 14px; min-height: 46px; padding: 0 14px; border: 0; border-radius: 22px;
    background: transparent; color: var(--text); font: inherit; font-size: 16px; font-weight: 500; text-align: left; cursor: pointer;
    transition: background var(--dur) var(--ease); }
  .dock-create .cm-item { min-height: 54px; }
  .dock-item .ico, .dock-create .cm-ico { color: var(--accent); }
  .dock-item .ico svg { width: 22px; height: 22px; }
  .dock-item .count { margin-left: auto; min-width: 22px; padding: 1px 7px; border-radius: 999px; background: var(--red); color: #fff; font-size: 12px; font-weight: 700; text-align: center; }
  .dock-item:active, .dock-create .cm-item:active { background: var(--fill); }
  .dock-item.on { background: color-mix(in srgb, var(--accent) 16%, rgba(255,255,255,.35)); color: var(--accent); font-weight: 600; }
  :root[data-theme="dark"] .dock-item.on { background: color-mix(in srgb, var(--accent) 30%, transparent); color: #fff; }
  .dock-pop hr { border: 0; height: 1px; background: var(--stroke); margin: 4px 14px; }
  .dock-scrim { position: fixed; inset: 0; z-index: 59; background: rgba(0,0,0,.12); animation: lg-fade var(--dur) var(--ease); }
  .dock-scrim[hidden] { display: none; }
  /* пока открыто окно, кнопки не мешают */
  body:has(#modal-root .overlay) .dock-btn { opacity: 0; pointer-events: none; }
}
@media (prefers-reduced-transparency: reduce) {
  .dock-btn, .dock-pop { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; background: var(--glass-strong, #f5f5f7) !important; }
  .dock-plus { background: var(--accent) !important; }
}

/* напоминания: стеклянная карточка; на телефоне — над кнопками и не поверх открытого меню */
.toast { border-radius: 22px !important; background: var(--lg-bg-strong) !important; border: 1px solid var(--lg-edge) !important;
  backdrop-filter: var(--lg-blur); -webkit-backdrop-filter: var(--lg-blur); box-shadow: var(--lg-hi), var(--shadow-lg) !important; }
.toast .acts { display: flex; flex-wrap: wrap; gap: 6px; }
@media (max-width: 860px) {
  #toasts { bottom: calc(92px + env(safe-area-inset-bottom)) !important; }
  .toast .acts { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .toast .acts .btn { flex: none; }
  body:has(.dock-scrim:not([hidden])) #toasts { opacity: 0; pointer-events: none; }
}
/* поля телефона, почты и ссылки — как остальные поля */
input[type=tel], input[type=email], input[type=url] { border-radius: 999px !important; border: 0; background: var(--fill); box-shadow: none; padding-left: 16px; padding-right: 16px; min-height: 40px; }
@media (max-width: 860px) { input[type=tel], input[type=email], input[type=url] { min-height: 44px; } }
/* пока открыто окно, напоминания не закрывают его кнопки (появятся снова после закрытия) */
body:has(#modal-root .overlay) #toasts { opacity: 0; pointer-events: none; }
/* ===== 0.45.0 — уточнения по руководствам Apple ===== */
/* крупные стеклянные панели плотнее: текст на них читается при любом фоне */
.side, .top { background: rgba(255,255,255,.56); }
:root[data-theme="dark"] .side, :root[data-theme="dark"] .top { background: rgba(44,46,56,.58); }
/* стеклянная кнопка при нажатии оживает: чуть растёт и светлеет (как стекло у Apple), отпускается с пружиной */
.btn:active, .round:active { transform: scale(1.05); filter: brightness(1.1); }
/* «Увеличение контраста»: системные цвета Apple для этого режима */
@media (prefers-contrast: more) {
  :root { --accent: #1e6ef4; --primary: #1e6ef4; --link: #1e6ef4; --c-work: #1e6ef4; --c-content: #c55300; --c-personal: #c55300; --c-family: #008932; --red: #e9152d; }
  :root[data-theme="dark"] { --accent: #5cb8ff; --primary: #5cb8ff; --link: #5cb8ff; --c-work: #5cb8ff; --c-content: #ffa056; --c-personal: #ffa056; --c-family: #4ad968; --red: #ff6165; }
}
@media (max-width: 860px) {
  /* при прокрутке содержимое мягко размывается у верхнего края экрана, как под строкой состояния iPhone */
  body::before { content: ""; position: fixed; z-index: 30; left: 0; right: 0; top: 0; height: calc(env(safe-area-inset-top) + 30px); pointer-events: none;
    backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
    -webkit-mask-image: linear-gradient(#000 40%, transparent); mask-image: linear-gradient(#000 40%, transparent); }
  /* блоки с содержимым — без размытия под ними (на телефоне это тяжело при прокрутке), но чуть плотнее — выглядят так же */
  .card, .calcard, .tile { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; background: rgba(255,255,255,.8) !important; }
  :root[data-theme="dark"] .card, :root[data-theme="dark"] .calcard, :root[data-theme="dark"] .tile { background: rgba(30,30,36,.8) !important; }
  .card .btn, .calcard .btn { backdrop-filter: none; -webkit-backdrop-filter: none; }
}
@media (prefers-reduced-motion: reduce) { .btn:active, .round:active, .dock-btn:active { transform: none; filter: none; } }
/* ===== 0.46.0 — паспорт и документы контакта ===== */
.two > .span2 { grid-column: 1 / -1; }
.doc-row { align-items: center; }
.doc-row > a.grow { color: inherit; text-decoration: none; min-width: 0; }
.doc-row .doc-ico { color: var(--accent); flex: none; }
.perf-info .btn { margin-left: 8px; vertical-align: middle; }
@media (max-width: 860px) { .perf-info .btn { margin: 6px 0 0; } }
.pfold > summary .fold-t { font-size: var(--fs-md); }
.pfold .fold-body { margin-top: 12px; padding-top: 12px; }
@media (max-width: 860px) { .pfold .two { grid-template-columns: 1fr 1fr; } }
/* «Мои данные»: текст целиком, как уйдёт в сообщение */
.mydata { margin: 0; padding: 14px 16px; border-radius: 16px; background: var(--fill); font: inherit; font-size: 15px; line-height: 1.55; white-space: pre-wrap; user-select: text; }

/* ===== 0.48.0 — вкладки окна проекта ===== */
.mtabs { position: sticky; top: 0; z-index: 3; display: flex; width: 100%;
  background: color-mix(in srgb, var(--glass-strong, #fff) 88%, transparent) !important;
  backdrop-filter: blur(20px) saturate(180%); -webkit-backdrop-filter: blur(20px) saturate(180%); }
:root[data-theme="dark"] .mtabs { background: color-mix(in srgb, #2c2c32 90%, transparent) !important; }
.mtabs .seg-b { flex: 1 1 0; white-space: nowrap; display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
.tab-n { min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: var(--fill-hover); color: var(--muted); font-size: 12px; font-weight: 600; display: inline-grid; place-items: center; }
.mtabs .seg-b.on .tab-n { background: color-mix(in srgb, var(--accent) 18%, transparent); color: var(--accent); }
.mtab-pane { display: grid; gap: 14px; align-content: start; min-height: min(420px, 55vh); }
.mtab-pane[hidden] { display: none; }
@media (max-width: 860px) {
  .mtabs { overflow-x: auto; scrollbar-width: none; }
  .mtabs::-webkit-scrollbar { display: none; }
  .mtabs .seg-b { flex: 0 0 auto; padding: 0 14px; }
  .mtab-pane { min-height: 50vh; }
}
.mtabs .seg-b .ico svg { width: 17px; height: 17px; }
.mtabs .seg-b.on .ico { color: var(--accent); }
@media (max-width: 860px) {
  /* на телефоне — как панель вкладок iOS: значок, под ним подпись; все пять помещаются */
  .mtabs { overflow: visible; }
  .mtabs .seg-b { flex: 1 1 0; flex-direction: column; gap: 2px; height: 50px !important; padding: 0 2px !important; font-size: 11px !important; position: relative; }
  .mtabs .seg-b .ico svg { width: 20px; height: 20px; }
  .mtabs .tab-n { position: absolute; top: 3px; right: calc(50% - 22px); min-width: 16px; height: 16px; padding: 0 4px; font-size: 10px; }
}
/* выбор файла — капсула, как остальные кнопки */
input[type=file]::file-selector-button { border: 0; border-radius: 999px; padding: 8px 14px; margin-right: 10px; background: var(--fill); color: var(--text); font: inherit; font-weight: 600; cursor: pointer; }
input[type=file] { color: var(--muted); font-size: 14px; }

/* ===== 0.49.0 — перестановка пунктов чек-листа ===== */
.listedit .li { transition: transform var(--dur) var(--spring); }
.listedit .li.dragging { transition: none; position: relative; z-index: 5; }
.listedit .li.dragging input[type=text] { background: var(--glass-strong, #fff); box-shadow: 0 10px 28px rgba(20,50,90,.22); }
:root[data-theme="dark"] .listedit .li.dragging input[type=text] { background: #3a3a42; box-shadow: 0 10px 28px rgba(0,0,0,.5); }
.drag-h { flex: none; width: 36px; height: 36px; display: grid; place-items: center; border: 0; padding: 0; border-radius: 50%;
  background: transparent; color: var(--faint); cursor: grab; touch-action: none; -webkit-user-select: none; user-select: none; }
.drag-h:hover { background: var(--fill); color: var(--text); }
.drag-h:active, .li.dragging .drag-h { cursor: grabbing; color: var(--accent); }
.drag-h .ico svg { width: 20px; height: 20px; }
@media (pointer: coarse) { .drag-h { width: 44px; height: 44px; } }
@media (prefers-reduced-motion: reduce) { .listedit .li { transition: none; } }

/* ===== 0.50.0 — контент проекта: таблица, доска, телефон ===== */
.ct-page .page-head .btn, .ct-page .page-head .cm > .btn { display: inline-flex; align-items: center; gap: 6px; }
.ct-open { border: 0; background: none; padding: 0; margin: 0; font: inherit; color: inherit; text-align: left; cursor: pointer; }
.ct-open:hover { color: var(--link); }
.ct-sum { display: flex; gap: 18px; align-items: center; flex-wrap: wrap; padding: 14px 18px !important; }
.ct-prog { display: grid; gap: 6px; min-width: 190px; font-size: 14px; color: var(--muted); }
.ct-prog b { color: var(--text); font-size: 17px; }
.ct-prog .bar { width: 190px; height: 8px; }
.ct-prog .bar > i { background: var(--c-family) !important; }
.ct-filter .chip b { margin-left: 6px; color: var(--muted); font-weight: 600; }
.ct-bar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.ct-bar .seg { width: auto; }
.ct-bar .seg-b { flex: none; padding: 0 18px; }
.ct-bar .btn { display: inline-flex; align-items: center; gap: 6px; }
.ct-wrap { padding: 6px 8px !important; overflow-x: auto; }
table.ct { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.ct th { font-size: 12px; color: var(--muted); font-weight: 600; text-align: left; padding: 10px 8px; border-bottom: 1px solid var(--stroke); white-space: nowrap; }
.ct th small { display: block; font-weight: 500; font-size: 11px; }
.ct td { padding: 6px 8px; border-bottom: 1px solid var(--stroke); vertical-align: middle; white-space: nowrap; }
.ct .c { text-align: center; }
.ct-g { width: 36px; padding: 0 !important; }
.ct-name { font-weight: 600; min-width: 200px; white-space: normal !important; }
.ct tr.kid .ct-name { font-weight: 500; padding-left: 28px; }
.ct tr.grp td { background: color-mix(in srgb, var(--fill) 70%, transparent); font-weight: 700; font-size: 14.5px; }
.ct tr.grp .count-s { margin-left: 6px; }
.ct-addin { margin-left: 10px; font-size: 12px !important; padding: 4px 10px !important; opacity: 0; transition: opacity var(--dur) var(--ease); }
.ct tr.grp:hover .ct-addin, .ct-addin:focus-visible { opacity: 1; }
.ct-caret { display: inline-grid; place-items: center; width: 26px; height: 26px; margin-right: 4px; border: 0; padding: 0; border-radius: 50%; background: transparent; color: var(--muted); cursor: pointer; vertical-align: middle; }
.ct-caret svg { width: 16px; height: 16px; transition: transform var(--dur) var(--spring); }
.collapsed .ct-caret svg { transform: rotate(-90deg); }
.ct-grpsum { color: var(--muted); font-weight: 500 !important; text-align: right; font-size: 13px !important; }
.ct-chk { display: inline-grid; place-items: center; width: 22px; height: 22px; padding: 0; border-radius: 7px; border: 1.5px solid color-mix(in srgb, var(--text) 25%, transparent); background: transparent; color: #fff; cursor: pointer; vertical-align: middle; }
.ct-chk.on { background: var(--accent); border-color: var(--accent); }
.ct-chk svg { width: 14px; height: 14px; stroke-width: 2.6; }
.ct-mode { font-size: 12px; font-weight: 700; color: var(--link); }
.ct-mode.m-loop { color: var(--c-content); }
.ct-mode.m-out { color: var(--muted); }
.ct-st { display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 600; white-space: nowrap; cursor: pointer; }
.st-wait { background: color-mix(in srgb, var(--red) 16%, transparent); color: var(--red); }
.st-work { background: color-mix(in srgb, var(--accent) 16%, transparent); color: var(--link); }
.st-review { background: color-mix(in srgb, #ffcc00 32%, transparent); color: #7a5600; }
.st-fix { background: color-mix(in srgb, #af52de 18%, transparent); color: #8e3fb5; }
.st-done { background: color-mix(in srgb, var(--c-family) 20%, transparent); color: var(--green); }
.st-up { background: var(--fill-hover); color: var(--muted); }
:root[data-theme="dark"] .st-review { color: #ffd60a; }
:root[data-theme="dark"] .st-fix { color: #da8fff; }
.ct-pop { min-width: 220px; z-index: 90; }
.ct-pop .cm-item.on, .cm-sheet .cm-item.on { font-weight: 600; }
.ct-mats { display: flex; gap: 4px; flex-wrap: wrap; }
.ct td .ct-mats { flex-wrap: nowrap; }
.ct-m { display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 5px; border: 0; border-radius: 999px; font: inherit; font-size: 11px; font-weight: 700; }
.ct-m.ok { background: color-mix(in srgb, var(--c-family) 20%, transparent); color: var(--green); }
.ct-m.no { background: color-mix(in srgb, var(--red) 16%, transparent); color: var(--red); }
.ct-m.na { background: var(--fill); color: var(--muted); }
.ct-mats.big .ct-m { height: 36px; padding: 0 14px; font-size: 13px; display: inline-flex; gap: 4px; align-items: center; cursor: pointer; transition: background var(--dur) var(--ease), color var(--dur) var(--ease); }
.ct-mats.big svg { width: 14px; height: 14px; stroke-width: 2.4; }
.ct-who { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; }
.ct-who i { font-style: normal; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: color-mix(in srgb, var(--accent) 16%, transparent); color: var(--link); font-size: 11px; font-weight: 700; }
.ct-link { color: var(--link); display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; }
.ct-link:hover { background: var(--fill); }
.ct-link svg { width: 17px; height: 17px; }
.ct-dash { color: var(--faint); }
.ct-com { color: var(--muted); white-space: normal !important; min-width: 150px; }
/* перестановка: куда встанет строка */
[data-ct] { position: relative; }
tr.drop-before td { box-shadow: inset 0 2px 0 var(--accent); }
tr.drop-after td { box-shadow: inset 0 -2px 0 var(--accent); }
.ct-plist .drop-before { box-shadow: 0 -2px 0 var(--accent); }
.ct-plist .drop-after { box-shadow: 0 2px 0 var(--accent); }
.ct-dragging { opacity: .5; }
/* доска */
.ct-board { display: grid; grid-template-columns: repeat(6, minmax(180px, 1fr)); gap: 10px; align-items: start; overflow-x: auto; padding-bottom: 6px; }
.ct-col { background: color-mix(in srgb, var(--fill) 60%, transparent); border-radius: 22px; padding: 10px; display: grid; gap: 8px; min-height: 260px; align-content: start; transition: background var(--dur) var(--ease), box-shadow var(--dur) var(--ease); }
.ct-col.over { background: color-mix(in srgb, var(--accent) 14%, transparent); box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--accent) 45%, transparent); }
.ct-colh { display: flex; justify-content: space-between; align-items: center; padding: 2px 2px 6px; }
.ct-card { background: var(--card-bg); border: 1px solid var(--card-edge); border-radius: 16px; padding: 10px 12px; display: grid; gap: 6px; box-shadow: 0 2px 8px rgba(20,50,90,.06); cursor: grab; touch-action: pan-y; transition: box-shadow var(--dur) var(--ease); }
.ct-card.ct-lift { position: relative; z-index: 20; box-shadow: 0 18px 40px rgba(20,50,90,.28); cursor: grabbing; transition: none; }
.ct-card .t { font-weight: 600; font-size: 14px; }
.ct-card .sub { font-size: 12px; color: var(--muted); }
.ct-cg { font-size: 11px; font-weight: 600; color: var(--muted); }
.ct-cf { display: flex; justify-content: space-between; align-items: center; min-height: 30px; }
.ct-cfa { display: flex; align-items: center; }
.ct-card .drag-h { width: 30px; height: 30px; }
.ct-empty p { margin: 0 0 12px; }
/* окно строки */
.ct-stpick { display: flex; flex-wrap: wrap; gap: 6px; }
.ct-stpick .ct-st { padding: 8px 14px; font-size: 13px; opacity: .6; transition: opacity var(--dur) var(--ease), box-shadow var(--dur) var(--ease); }
.ct-stpick .ct-st.sel { opacity: 1; box-shadow: inset 0 0 0 2px currentColor; }
.ct-scr { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.ct-scrb { display: flex; gap: 10px; align-items: center; padding: 10px 12px; border: 0; border-radius: 16px; background: var(--fill); color: var(--text); font: inherit; text-align: left; cursor: pointer; transition: background var(--dur) var(--ease); }
.ct-scrb span:last-child { display: grid; }
.ct-scrb small { color: var(--muted); font-size: 12px; }
.ct-scrb.on { background: color-mix(in srgb, var(--accent) 14%, transparent); }
.ct-res { flex: 0 0 130px !important; width: 130px; }
/* блок в окне проекта */
.ct-mini { display: grid; gap: 8px; }
.ct-mini-h { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.ct-mini-h h3 { margin: 0; }
.ct-mini .bar > i { background: var(--c-family) !important; }
/* телефон */
.ct-plist { padding: 4px 12px !important; }
.ct-pgrp { display: flex; align-items: center; gap: 6px; padding: 12px 0 8px; border-bottom: 1px solid var(--stroke); font-weight: 700; font-size: 16px; }
.ct-pgrp .grow { flex: 1; }
.ct-prow { display: grid; grid-template-columns: 1fr auto; gap: 4px 10px; padding: 10px 0; border-bottom: 1px solid var(--stroke); align-items: center; }
.ct-prow.kid { padding-left: 16px; }
.ct-prow .t { font-weight: 600; font-size: 15px; }
.ct-prow .sub { font-size: 13px; color: var(--muted); }
.ct-pr { display: flex; align-items: center; gap: 4px; justify-content: flex-end; }
@media (max-width: 860px) {
  .ct-page .page-head h1 { flex-basis: 100%; }
  .ct-page .page-head { flex-wrap: wrap; }
  .ct-sum { gap: 12px; }
  .ct-prog, .ct-prog .bar { width: 100%; }
  .ct-filter { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; width: 100%; }
  .ct-board { grid-template-columns: repeat(6, 78vw); scroll-snap-type: x mandatory; }
  .ct-col { scroll-snap-align: start; }
}
.ct th.c { white-space: normal; min-width: 70px; max-width: 120px; line-height: 1.25; }
.ct-com { max-width: 260px; }

/* ===== 0.51.0 — шаблоны контента ===== */
.tpl-rows { display: grid; gap: 6px; }
.tpl-row { display: flex; align-items: center; gap: 6px; padding: 4px 6px; border-radius: 16px; position: relative; }
.tpl-row.grp { background: color-mix(in srgb, var(--fill) 70%, transparent); }
.tpl-row.grp input[type=text] { font-weight: 700; }
.tpl-row.kid { padding-left: 22px; }
.tpl-row > input[type=text]:not(.tpl-dur) { flex: 1 1 160px; min-width: 0; }
.tpl-dur { flex: 0 0 76px; width: 76px; }
.tpl-mode { flex: 0 0 92px; width: 92px; }
.tpl-tag { font-size: 12px; font-weight: 600; color: var(--muted); }
.tpl-in { flex: none; width: 34px; padding: 0 !important; }
.tpl-in.on { color: var(--link); }
.tpl-a, .tpl-mats .ct-m { cursor: pointer; min-width: 26px; height: 26px; }
.tpl-mats { flex-wrap: nowrap; }
.tpl-row.drop-before { box-shadow: 0 -2px 0 var(--accent); }
.tpl-row.drop-after { box-shadow: 0 2px 0 var(--accent); }
.chev-r { color: var(--faint); display: inline-grid; }
.chev-r svg { width: 18px; height: 18px; transform: rotate(-90deg); }
@media (max-width: 860px) {
  .tpl-row:not(.grp) { flex-wrap: wrap; }
  .tpl-row:not(.grp) > input[type=text]:not(.tpl-dur) { flex-basis: calc(100% - 90px); }
  .tpl-mats { order: 9; }
}
.tpl-dur { flex: 0 0 92px; width: 92px; }
.tpl-mode { flex: 0 0 112px; width: 112px; }
/* удаление строки контента */
.ct-dc { width: 34px; padding: 0 4px !important; }
.ct-del { display: inline-grid; place-items: center; width: 30px; height: 30px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--faint); cursor: pointer; opacity: .35; transition: opacity var(--dur) var(--ease), background var(--dur) var(--ease), color var(--dur) var(--ease); }
.ct-del svg { width: 15px; height: 15px; }
.ct tr:hover .ct-del, .ct-del:focus-visible { opacity: 1; }
.ct-del:hover { background: color-mix(in srgb, var(--red) 14%, transparent); color: var(--red); }
.ct-plist .ct-del { opacity: .7; width: 36px; height: 36px; }
.toast-undo { display: inline-flex; align-items: center; gap: 10px; }
@media (pointer: coarse) { .ct-del { opacity: .7; width: 40px; height: 40px; } }

/* ===== 0.52.0 — ссылка для заказчика и комментарии ===== */
.ct-cbtn { display: inline-flex; align-items: center; gap: 4px; height: 30px; min-width: 30px; padding: 0 8px; border: 0; border-radius: 999px; background: transparent; color: var(--faint); font: inherit; font-size: 12px; font-weight: 600; cursor: pointer; justify-content: center; transition: background var(--dur) var(--ease), color var(--dur) var(--ease); }
.ct-cbtn svg { width: 16px; height: 16px; }
.ct-cbtn:hover { background: var(--fill); color: var(--text); }
.ct-cbtn.has { color: var(--link); background: color-mix(in srgb, var(--accent) 12%, transparent); }
.ct-cbtn.new { color: #fff; background: var(--accent); }
.ct th svg { width: 15px; height: 15px; vertical-align: middle; }
.ct-thread { display: grid; gap: 10px; max-height: 50vh; overflow: auto; padding: 4px 0; }
.ct-msg { max-width: 85%; padding: 9px 13px; border-radius: 18px; font-size: 14px; line-height: 1.4; white-space: pre-wrap; overflow-wrap: anywhere; }
.ct-msg small { display: block; font-size: 11px; font-weight: 600; color: var(--muted); margin-bottom: 2px; }
.ct-msg.them { background: var(--fill); justify-self: start; }
.ct-msg.me { background: var(--accent); color: #fff; justify-self: end; }
.ct-msg.me small { color: rgba(255,255,255,.85); }
.share-url { display: flex; gap: 8px; align-items: center; }
.share-url input { flex: 1; min-width: 0; font-size: 13px; }
.btn.has-new { color: #fff !important; background: var(--accent) !important; }
.badge.new-com { background: var(--accent); color: #fff; }
@media (max-width: 860px) { .share-url { flex-wrap: wrap; } .share-url .btn { width: 100%; justify-content: center; } }
.funnel-st { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 10px 14px; border-radius: 16px; background: var(--fill); font-size: 14px; }
.dotst { width: 10px; height: 10px; border-radius: 50%; flex: none; }
.dotst.ok { background: var(--c-family); box-shadow: 0 0 0 3px color-mix(in srgb, var(--c-family) 25%, transparent); }
.dotst.off { background: var(--red); }

/* ---- новые сообщения заказчиков: красная точка и подсветка, как непрочитанное в iOS ---- */
.badge.new-com { display: inline-flex; align-items: center; gap: 6px; background: var(--red); color: #fff; border: 0; cursor: pointer; }
.badge.new-com .msg-dot { background: #fff; width: 7px; height: 7px; margin: 0; }
.ct-cbtn.new { color: #fff; background: var(--red); }
.btn.has-new { color: #fff !important; background: var(--red) !important; }
table.ct tr.has-new > td { background: color-mix(in srgb, var(--red) 9%, transparent); }
table.ct tr.has-new > td:first-child { box-shadow: inset 3px 0 0 var(--red); }
.count-s.new { background: var(--red); color: #fff; }
.card.inbox { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--red) 40%, transparent), var(--shadow, none); }
.msg-row { width: 100%; display: flex; align-items: flex-start; gap: 12px; text-align: left; border: 0; background: transparent; color: inherit; font: inherit; cursor: pointer; }
.msg-dot { display: inline-block; width: 10px; height: 10px; margin-top: 6px; border-radius: 50%; background: var(--red); flex: none; }
.msg-body { min-width: 0; display: grid; gap: 1px; }
.msg-head { display: flex; align-items: baseline; gap: 10px; }
.msg-head b { font-weight: 650; }
.msg-where { font-size: 13px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.msg-text { font-size: 14px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; white-space: normal; }
.msg-time { margin-left: auto; flex: none; font-size: 12px; color: var(--faint); white-space: nowrap; }
.ct-newline { display: flex; align-items: center; gap: 10px; color: var(--red); font-size: 12px; font-weight: 700; }
.ct-newline::before, .ct-newline::after { content: ''; flex: 1; height: 1px; background: color-mix(in srgb, var(--red) 50%, transparent); }
.ct-msg.them.new { background: color-mix(in srgb, var(--red) 12%, var(--fill)); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--red) 70%, transparent); }

/* переписка с исполнителями и их ссылки */
.ct-chan { width: max-content; max-width: 100%; overflow-x: auto; margin-bottom: 6px; }
.ct-chan .seg-b { display: inline-flex; align-items: center; gap: 6px; padding: 0 14px; }
.msg-role { font-size: 11px; font-weight: 700; color: var(--orange); background: color-mix(in srgb, var(--orange) 14%, transparent); border-radius: 999px; padding: 1px 8px; }
.ct-pnote { display: block; margin-top: 2px; font-size: 12px; font-weight: 500; color: var(--muted); white-space: normal; }
.perf-link { align-items: center; flex-wrap: wrap; gap: 8px; }
.perf-url { font-size: 12px; overflow-wrap: anywhere; color: var(--link); }

/* версия файла строки контента */
.ct-linkv { display: inline-flex; align-items: center; gap: 4px; }
.ct-prow .sub .ct-ver { margin-left: 6px; }
.ct-ver { white-space: nowrap; font-size: 11px; font-weight: 700; color: var(--link); background: color-mix(in srgb, var(--accent) 14%, transparent); border-radius: 999px; padding: 1px 7px; }
.ct-verbox .hint { margin: 0; }
.ct-prow.has-new { box-shadow: inset 3px 0 0 var(--red); background: color-mix(in srgb, var(--red) 8%, transparent); }