/* ============================================================
   MMX Assistant — дизайн-токены и компоненты
   Светлая тема по умолчанию. Тёмная: data-theme="dark" на корне .app
   Готово к переносу в Jinja2 + HTMX + Alpine.js без фреймворков.
   ============================================================ */

.app {
  /* --- Поверхности --- */
  --bg: #F3F5F8;
  --surface: #FFFFFF;
  --surface-2: #F7F8FA;
  --surface-3: #ECEFF3;
  --border: #DFE3EA;
  --border-strong: #C3C9D4;
  /* --- Текст --- */
  --text: #171A20;
  --text-2: #4B5261;
  --text-3: #646B7A;
  --text-inv: #FFFFFF;
  /* --- Акцент (фирменный синий) --- */
  --accent: #2456D4;
  --accent-hover: #1B45B2;
  --accent-soft: #E6EDFC;
  --accent-text: #1E49BE;
  --accent-border: #B7C8F2;
  /* --- Жёлтое редактируемое поле (как в Excel) --- */
  --y-bg: #FFF3BF;
  --y-border: #E3C64B;
  --y-text: #3E3200;
  --y-label: #6B5600;
  /* --- Семантика статусов --- */
  --ok: #13733A;     --ok-bg: #DAF5E3;    --ok-bar: #22A35A;
  --warn: #A14E00;   --warn-bg: #FFEDCC;  --warn-bar: #F0962B;
  --err: #B42323;    --err-bg: #FCE1E1;   --err-bar: #E04646;
  --mute: #5C6472;   --mute-bg: #ECEFF3;  --mute-bar: #A3AAB8;
  --info: #1E49BE;   --info-bg: #E6EDFC;  --info-bar: #2456D4;
  /* --- Прочее --- */
  --shadow: 0 1px 2px rgba(16,24,40,.06), 0 4px 12px rgba(16,24,40,.06);
  --shadow-lg: 0 8px 24px rgba(16,24,40,.14), 0 2px 6px rgba(16,24,40,.08);
  --radius-sm: 6px; --radius: 8px; --radius-lg: 12px;
  --font: "Golos Text", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-display: "Unbounded", "Golos Text", sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  /* --- Размеры --- */
  --sidebar-w: 232px; --chat-w: 320px; --topbar-h: 56px;
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 20px; --s6: 24px; --s8: 32px; --s10: 40px;

  font-family: var(--font); font-size: 14px; line-height: 1.4;
  color: var(--text); background: var(--bg);
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
  box-sizing: border-box;
}
.app *, .app *::before, .app *::after { box-sizing: border-box; }

.app[data-theme="dark"] {
  --bg: #0F1217; --surface: #171B22; --surface-2: #1D222B; --surface-3: #252B35;
  --border: #2B313C; --border-strong: #3D4451;
  --text: #E8EBF1; --text-2: #AEB5C3; --text-3: #8E96A6; --text-inv: #FFFFFF;
  --accent: #3B6FE8; --accent-hover: #5A88F5; --accent-soft: #1B2A4F; --accent-text: #A8C0FF; --accent-border: #33508F;
  --y-bg: #352D0E; --y-border: #8C7420; --y-text: #F7E8A6; --y-label: #D9BE55;
  --ok: #58D48B; --ok-bg: #12301F; --ok-bar: #34C070;
  --warn: #F5B741; --warn-bg: #35260A; --warn-bar: #F0962B;
  --err: #F58787; --err-bg: #3D1717; --err-bar: #E04646;
  --mute: #AEB5C3; --mute-bg: #262C37; --mute-bar: #6B7384;
  --info: #A8C0FF; --info-bg: #1B2A4F; --info-bar: #5A88F5;
  --shadow: 0 1px 2px rgba(0,0,0,.4), 0 4px 12px rgba(0,0,0,.35);
  --shadow-lg: 0 8px 24px rgba(0,0,0,.5), 0 2px 6px rgba(0,0,0,.4);
}

/* ---------- Типографика ---------- */
.app h1, .app h2, .app h3 { margin: 0; font-weight: 600; letter-spacing: -0.01em; }
.app h1 { font-size: 22px; line-height: 1.25; }
.app h2 { font-size: 17px; line-height: 1.3; }
.app h3 { font-size: 14px; line-height: 1.3; }
.app p { margin: 0; }
.app a { color: var(--accent-text); text-decoration: none; }
.app a:hover { text-decoration: underline; }
.t-display { font-family: var(--font-display); font-weight: 600; letter-spacing: -0.02em; }
.t-sec { font-family: var(--font-display); font-weight: 600; font-size: 13px; letter-spacing: .02em; text-transform: uppercase; color: var(--text-2); }
.t-2 { color: var(--text-2); }
.t-3 { color: var(--text-3); }
.t-sm { font-size: 12px; }
.t-xs { font-size: 11px; }
.t-cap { font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--text-3); }
.mono { font-family: var(--font-mono); font-size: 12.5px; }
.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.money { font-variant-numeric: tabular-nums; white-space: nowrap; }
.money-big { font-family: var(--font-display); font-weight: 600; font-size: 28px; line-height: 1.1; letter-spacing: -0.02em; white-space: nowrap; }
.money-xl { font-family: var(--font-display); font-weight: 700; font-size: 34px; line-height: 1.1; letter-spacing: -0.02em; white-space: nowrap; }
.ok { color: var(--ok); } .warn { color: var(--warn); } .err { color: var(--err); } .mute { color: var(--mute); }
.b { font-weight: 600; }
.nowrap { white-space: nowrap; }
.row { display: flex; align-items: center; gap: var(--s2); }
.col { display: flex; flex-direction: column; gap: var(--s2); }
.between { justify-content: space-between; }
.grow { flex: 1 1 auto; min-width: 0; }
.ico { width: 18px; height: 18px; flex: 0 0 auto; }
.ico-sm { width: 14px; height: 14px; flex: 0 0 auto; }
.ico-lg { width: 24px; height: 24px; flex: 0 0 auto; }

/* ---------- Кнопки ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 36px; padding: 0 14px; border-radius: var(--radius); border: 1px solid transparent; font: inherit; font-size: 14px; font-weight: 500; line-height: 1; cursor: pointer; white-space: nowrap; color: var(--text); background: transparent; }
.btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.btn-primary { background: var(--accent); color: var(--text-inv); }
.btn-primary:hover { background: var(--accent-hover); }
.btn-secondary { background: var(--surface); border-color: var(--border-strong); color: var(--text); }
.btn-secondary:hover { background: var(--surface-2); }
.btn-ghost { color: var(--text-2); }
.btn-ghost:hover { background: var(--surface-3); color: var(--text); }
.btn-danger { background: var(--err-bg); color: var(--err); border-color: transparent; }
.btn-danger:hover { background: var(--err); color: #fff; }
.btn-ok { background: var(--ok); color: #fff; }
.btn-icon { width: 36px; padding: 0; }
.btn-sm { height: 30px; padding: 0 10px; font-size: 13px; border-radius: var(--radius-sm); }
.btn-sm.btn-icon { width: 30px; }
.btn-lg { height: 44px; padding: 0 20px; font-size: 15px; }
.btn-xl { height: 56px; padding: 0 28px; font-size: 17px; font-weight: 600; border-radius: var(--radius-lg); }
.btn-block { width: 100%; }
.btn[disabled], .btn.is-disabled { opacity: .5; cursor: not-allowed; }
.btn.is-loading { position: relative; color: transparent; }
.btn.is-loading::after { content: ""; position: absolute; width: 16px; height: 16px; border-radius: 50%; border: 2px solid currentColor; border-top-color: transparent; color: var(--text-inv); animation: mmx-spin .8s linear infinite; }
.btn-secondary.is-loading::after { color: var(--text); }
@keyframes mmx-spin { to { transform: rotate(360deg); } }

/* ---------- Поля ---------- */
.label { display: block; font-size: 12px; font-weight: 500; color: var(--text-2); margin-bottom: 4px; }
.input { display: block; width: 100%; height: 36px; padding: 0 10px; border: 1px solid var(--border-strong); border-radius: var(--radius-sm); background: var(--surface); color: var(--text); font: inherit; font-size: 14px; font-variant-numeric: tabular-nums; }
.input::placeholder { color: var(--text-3); }
.input:focus { outline: 2px solid var(--accent); outline-offset: -1px; border-color: var(--accent); }
.input-y { background: var(--y-bg); border-color: var(--y-border); color: var(--y-text); font-weight: 600; }
.input-y:focus { outline-color: var(--y-border); }
.input-err { border-color: var(--err); }
.input-err:focus { outline-color: var(--err); }
.input-num { text-align: right; }
.input-sm { height: 30px; font-size: 13px; padding: 0 8px; }
.input-lg { height: 44px; font-size: 15px; padding: 0 12px; }
.textarea { height: auto; min-height: 96px; padding: 10px; line-height: 1.45; resize: vertical; }
.field { display: flex; flex-direction: column; gap: 0; }
.hint { font-size: 12px; color: var(--text-3); margin-top: 4px; }
.hint-err { color: var(--err); }
.input-wrap { position: relative; display: flex; align-items: center; }
.input-wrap .input { padding-right: 36px; }
.input-wrap .suffix { position: absolute; right: 10px; font-size: 13px; color: var(--text-3); pointer-events: none; }
.input-wrap .prefix-ico { position: absolute; left: 10px; color: var(--text-3); pointer-events: none; }
.input-wrap .input.has-ico { padding-left: 34px; }
.check { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; }
.check input { width: 18px; height: 18px; margin: 0; accent-color: var(--accent); }
.select { appearance: none; -webkit-appearance: none; padding-right: 30px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23646B7A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 8px center; background-size: 16px; }

/* ---------- Бейджи, чипы, полосы статусов ---------- */
.badge { display: inline-flex; align-items: center; gap: 4px; height: 22px; padding: 0 8px; border-radius: 999px; font-size: 12px; font-weight: 600; line-height: 1; white-space: nowrap; background: var(--mute-bg); color: var(--mute); }
.badge-ok { background: var(--ok-bg); color: var(--ok); }
.badge-warn { background: var(--warn-bg); color: var(--warn); }
.badge-err { background: var(--err-bg); color: var(--err); }
.badge-info { background: var(--info-bg); color: var(--info); }
.badge-y { background: var(--y-bg); color: var(--y-label); border: 1px solid var(--y-border); letter-spacing: .04em; font-size: 11px; }
.badge-sq { border-radius: var(--radius-sm); }
.badge .dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.chip { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--border-strong); background: var(--surface); color: var(--text-2); font: inherit; font-size: 13px; font-weight: 500; cursor: pointer; white-space: nowrap; }
.chip:hover { background: var(--surface-2); }
.chip.is-active { background: var(--text); color: var(--surface); border-color: var(--text); }
.chip .cnt { font-size: 12px; opacity: .75; }
.chip .dot { width: 8px; height: 8px; border-radius: 50%; }
.bar { width: 3px; border-radius: 2px; align-self: stretch; flex: 0 0 3px; background: var(--mute-bar); }
.bar-ok { background: var(--ok-bar); } .bar-warn { background: var(--warn-bar); } .bar-err { background: var(--err-bar); } .bar-mute { background: var(--mute-bar); } .bar-info { background: var(--info-bar); }
.dot-ok { background: var(--ok-bar); } .dot-warn { background: var(--warn-bar); } .dot-err { background: var(--err-bar); } .dot-mute { background: var(--mute-bar); }

/* ---------- Аватар ---------- */
.avatar { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%; background: var(--accent-soft); color: var(--accent-text); font-size: 11px; font-weight: 700; flex: 0 0 auto; }
.avatar-sm { width: 22px; height: 22px; font-size: 10px; }
.avatar-lg { width: 40px; height: 40px; font-size: 14px; }
.avatar-dir { background: #EFE6FF; color: #5B2BB8; }
.avatar-acc { background: #E3F6F0; color: #0C6B52; }
.app[data-theme="dark"] .avatar-dir { background: #2E1F5C; color: #CDB8FF; }
.app[data-theme="dark"] .avatar-acc { background: #0F3A2E; color: #8FE3C5; }

/* ---------- Карточки, панели ---------- */
.card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); }
.card-p { padding: var(--s4); }
.card-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--border); }
.panel { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); }
.divider { height: 1px; background: var(--border); }

/* ---------- Таблица ---------- */
.table-wrap { overflow-x: auto; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); }
.table { width: 100%; border-collapse: collapse; font-size: 13px; }
.table th { text-align: left; font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--text-3); padding: 10px 10px; border-bottom: 1px solid var(--border); background: var(--surface-2); white-space: nowrap; }
.table th.num, .table td.num { text-align: right; }
.table td { padding: 8px 10px; border-bottom: 1px solid var(--border); vertical-align: top; }
.table tr:last-child td { border-bottom: 0; }
.table tbody tr:hover td { background: var(--surface-2); }
.table .sub { display: block; font-size: 12px; color: var(--text-3); margin-top: 2px; }
.table tr.total td { font-weight: 600; background: var(--surface-2); border-top: 1px solid var(--border-strong); }
.table td.bar-cell { padding: 0; width: 4px; }
.table td.bar-cell span { display: block; width: 4px; height: 100%; min-height: 40px; }
.table .th-sort { display: inline-flex; align-items: center; gap: 4px; cursor: pointer; }
.table-dense th { padding: 8px 8px; } .table-dense td { padding: 6px 8px; }
.table .input { height: 30px; font-size: 13px; }
.table tr.alt td { background: var(--surface-2); border-bottom: 1px solid var(--border); padding-top: 6px; padding-bottom: 6px; }

/* ---------- Каркас ---------- */
.shell { min-height: 100vh; display: flex; flex-wrap: wrap; align-items: stretch; }
.sidebar { width: var(--sidebar-w); flex: 0 0 var(--sidebar-w); background: var(--surface); border-right: 1px solid var(--border); display: flex; flex-direction: column; padding: 12px; gap: 2px; }
.logo { display: flex; align-items: center; gap: 10px; padding: 6px 8px 14px; }
.logo-mark { width: 28px; height: 28px; border-radius: 7px; background: var(--accent); color: #fff; display: flex; align-items: center; justify-content: center; font-family: var(--font-display); font-weight: 700; font-size: 11px; letter-spacing: -0.02em; }
.logo-name { font-weight: 700; font-size: 14px; }
.logo-name span { color: var(--text-3); font-weight: 500; }
.nav-item { display: flex; align-items: center; gap: 10px; height: 36px; padding: 0 10px; border-radius: var(--radius); color: var(--text-2); font-size: 14px; font-weight: 500; text-decoration: none; }
.nav-item:hover { background: var(--surface-3); color: var(--text); text-decoration: none; }
.nav-item.is-active { background: var(--accent-soft); color: var(--accent-text); }
.nav-item .cnt { margin-left: auto; font-size: 11px; font-weight: 700; background: var(--err); color: #fff; min-width: 18px; height: 18px; border-radius: 9px; display: inline-flex; align-items: center; justify-content: center; padding: 0 5px; }
.nav-sep { height: 1px; background: var(--border); margin: 8px 4px; }
.nav-foot { margin-top: auto; padding: 10px; background: var(--surface-2); border-radius: var(--radius); font-size: 11.5px; line-height: 1.5; color: var(--text-3); }
.nav-foot b { color: var(--text-2); font-weight: 600; }
.main { flex: 999 1 560px; min-width: 0; display: flex; flex-direction: column; }
.topbar { height: var(--topbar-h); background: var(--surface); border-bottom: 1px solid var(--border); display: flex; align-items: center; gap: 12px; padding: 0 20px; flex-wrap: wrap; }
.search { position: relative; width: 360px; max-width: 100%; }
.search .input { padding-left: 34px; height: 36px; background: var(--surface-2); border-color: var(--border); }
.search .ico { position: absolute; left: 10px; top: 9px; color: var(--text-3); }
.search kbd { position: absolute; right: 8px; top: 8px; font: 11px var(--font-mono); color: var(--text-3); border: 1px solid var(--border-strong); border-radius: 4px; padding: 1px 5px; background: var(--surface); }
.bell { position: relative; }
.bell .cnt { position: absolute; top: 4px; right: 4px; min-width: 16px; height: 16px; border-radius: 8px; background: var(--err); color: #fff; font-size: 10px; font-weight: 700; display: flex; align-items: center; justify-content: center; padding: 0 4px; }
.timer { display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 12px 0 10px; border-radius: var(--radius); background: var(--ok-bg); color: var(--ok); font-weight: 600; font-size: 13px; }
.timer .pulse { width: 8px; height: 8px; border-radius: 50%; background: var(--ok-bar); }
.page { padding: 20px 24px 32px; display: flex; flex-direction: column; gap: 16px; flex: 1 1 auto; }
.page-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.toolbar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

/* ---------- Чат ассистента ---------- */
.chat { width: var(--chat-w); flex: 0 0 var(--chat-w); background: var(--surface); border-left: 1px solid var(--border); display: flex; flex-direction: column; }
.chat-head { height: var(--topbar-h); display: flex; align-items: center; justify-content: space-between; padding: 0 12px 0 16px; border-bottom: 1px solid var(--border); font-weight: 600; }
.chat-body { flex: 1 1 auto; padding: 16px; display: flex; flex-direction: column; gap: 12px; overflow: auto; }
.msg { max-width: 92%; padding: 10px 12px; border-radius: 12px; font-size: 13.5px; line-height: 1.45; }
.msg-user { align-self: flex-end; background: var(--accent); color: #fff; border-bottom-right-radius: 4px; }
.msg-ai { align-self: flex-start; background: var(--surface-3); color: var(--text); border-bottom-left-radius: 4px; }
.msg-card { align-self: stretch; border: 1px solid var(--border); border-radius: 10px; padding: 10px 12px; font-size: 13px; background: var(--surface); }
.msg-card .k { color: var(--text-3); font-size: 12px; }
.msg-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.chat-foot { padding: 12px; border-top: 1px solid var(--border); display: flex; gap: 8px; }
.fab { position: absolute; right: 24px; bottom: 24px; width: 52px; height: 52px; border-radius: 50%; background: var(--accent); color: #fff; border: 0; box-shadow: var(--shadow-lg); display: flex; align-items: center; justify-content: center; cursor: pointer; }

/* ---------- Вкладки ---------- */
.tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--border); overflow-x: auto; }
.tab { height: 40px; padding: 0 14px; border: 0; background: none; font: inherit; font-size: 14px; font-weight: 500; color: var(--text-2); cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap; display: inline-flex; align-items: center; gap: 6px; }
.tab:hover { color: var(--text); }
.tab.is-active { color: var(--accent-text); border-bottom-color: var(--accent); }
.tab .cnt { font-size: 11px; background: var(--surface-3); color: var(--text-2); border-radius: 999px; padding: 1px 6px; }
.seg { display: inline-flex; background: var(--surface-3); border-radius: var(--radius); padding: 3px; gap: 2px; }
.seg button { height: 28px; padding: 0 12px; border: 0; border-radius: 6px; background: transparent; font: inherit; font-size: 13px; font-weight: 500; color: var(--text-2); cursor: pointer; }
.seg button.is-active { background: var(--surface); color: var(--text); box-shadow: var(--shadow); }

/* ---------- Доска ---------- */
.board { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(236px, 1fr); gap: 12px; overflow-x: auto; padding-bottom: 8px; }
.lane { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.lane-head { display: flex; align-items: center; justify-content: space-between; font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--text-3); padding: 0 2px 2px; }
.lane-head.is-late { color: var(--err); }
.lane-head .cnt { font-weight: 600; background: var(--surface-3); color: var(--text-2); border-radius: 999px; padding: 1px 7px; font-size: 11px; }
.kcard { display: flex; gap: 10px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 10px 10px 10px 8px; cursor: pointer; text-decoration: none; color: inherit; }
.kcard:hover { border-color: var(--border-strong); box-shadow: var(--shadow); text-decoration: none; }
.kcard .body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.kcard .title { font-weight: 600; font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kcard .meta { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 12px; color: var(--text-3); }
.kcard.is-done { opacity: .6; }
.kcard.is-done .title { text-decoration: line-through; }

/* ---------- Степпер ---------- */
.stepper { display: flex; align-items: flex-start; gap: 0; overflow-x: auto; padding: 4px 0; }
.step { display: flex; flex-direction: column; align-items: center; gap: 6px; min-width: 96px; flex: 1 0 96px; position: relative; font-size: 12px; color: var(--text-3); text-align: center; }
.step::before { content: ""; position: absolute; top: 11px; left: 50%; width: 100%; height: 2px; background: var(--border-strong); z-index: 0; }
.step:last-child::before { display: none; }
.step .pt { position: relative; z-index: 1; width: 24px; height: 24px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--surface); border: 2px solid var(--border-strong); color: var(--text-3); font-size: 11px; font-weight: 700; }
.step.is-done .pt { background: var(--ok-bar); border-color: var(--ok-bar); color: #fff; }
.step.is-done::before { background: var(--ok-bar); }
.step.is-current .pt { background: var(--accent); border-color: var(--accent); color: #fff; box-shadow: 0 0 0 4px var(--accent-soft); }
.step.is-current { color: var(--accent-text); font-weight: 600; }
.step.is-locked .pt { background: var(--surface-3); border-color: var(--border); color: var(--text-3); }
.step .when { font-size: 11px; color: var(--text-3); font-weight: 400; }
.vsteps { display: flex; flex-direction: column; }
.vstep { display: grid; grid-template-columns: 24px 1fr; gap: 0 12px; position: relative; padding-bottom: 14px; }
.vstep::before { content: ""; position: absolute; left: 11px; top: 24px; bottom: 0; width: 2px; background: var(--border-strong); }
.vstep:last-child::before { display: none; }
.vstep.is-done::before { background: var(--ok-bar); }
.vstep .pt { width: 24px; height: 24px; border-radius: 50%; border: 2px solid var(--border-strong); background: var(--surface); display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; color: var(--text-3); }
.vstep.is-done .pt { background: var(--ok-bar); border-color: var(--ok-bar); color: #fff; }
.vstep.is-current .pt { background: var(--accent); border-color: var(--accent); color: #fff; box-shadow: 0 0 0 4px var(--accent-soft); }
.vstep.is-current .name { color: var(--accent-text); font-weight: 600; }
.vstep.is-locked .pt { background: var(--surface-3); border-color: var(--border); }
.vstep .name { font-size: 13.5px; font-weight: 500; line-height: 24px; }
.vstep .when { font-size: 12px; color: var(--text-3); }

/* ---------- Панель расчёта ---------- */
.calc { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 16px; display: flex; flex-direction: column; gap: 14px; }
.calc-big { background: var(--y-bg); border: 1px solid var(--y-border); border-radius: var(--radius); padding: 10px 14px; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.calc-big .l { font-size: 12px; font-weight: 600; color: var(--y-label); line-height: 1.3; }
.calc-big .v { font-family: var(--font-display); font-weight: 700; font-size: 36px; letter-spacing: -0.02em; color: var(--y-text); background: transparent; border: 0; width: 96px; text-align: right; padding: 0; }
.calc-big .v:focus { outline: 2px solid var(--y-border); border-radius: 4px; }
.calc-row { display: flex; justify-content: space-between; gap: 12px; font-size: 13px; padding: 4px 0; }
.calc-row .k { color: var(--text-2); }
.calc-row .v { font-variant-numeric: tabular-nums; white-space: nowrap; }
.calc-row.sub .k { padding-left: 14px; color: var(--text-3); font-size: 12px; }
.calc-row.sub .v { color: var(--text-3); font-size: 12px; }
.calc-row.strong { font-weight: 600; border-top: 1px solid var(--border); padding-top: 8px; margin-top: 2px; }
.calc-total { border-top: 2px solid var(--text); padding-top: 12px; }
.calc-total .k { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--text-2); }
.alert { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border-radius: var(--radius); font-size: 13px; line-height: 1.4; }
.alert-warn { background: var(--warn-bg); color: var(--warn); }
.alert-err { background: var(--err-bg); color: var(--err); }
.alert-ok { background: var(--ok-bg); color: var(--ok); }
.alert-info { background: var(--info-bg); color: var(--info); }
.alert .ico { margin-top: 1px; }

/* ---------- Загрузка файлов, документы ---------- */
.dropzone { border: 1.5px dashed var(--border-strong); border-radius: var(--radius-lg); padding: 20px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; color: var(--text-3); font-size: 13px; text-align: center; background: var(--surface-2); }
.dropzone b { color: var(--text-2); font-weight: 600; }
.filechip { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px 0 8px; border-radius: 6px; background: var(--surface-3); font-size: 12.5px; color: var(--text-2); }
.docrow { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); }
.docrow .thumb { width: 40px; height: 52px; border-radius: 4px; background: var(--surface-3); border: 1px solid var(--border); display: flex; align-items: center; justify-content: center; color: var(--text-3); flex: 0 0 auto; }
.preview { background: var(--surface-3); border: 1px solid var(--border); border-radius: var(--radius); aspect-ratio: 1/1.3; display: flex; align-items: center; justify-content: center; color: var(--text-3); font-size: 12px; }

/* ---------- Модальные окна, тосты, уведомления ---------- */
.overlay { position: absolute; inset: 0; background: rgba(10, 14, 22, .45); display: flex; align-items: center; justify-content: center; padding: 24px; z-index: 10; }
.modal { width: 100%; max-width: 480px; background: var(--surface); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); padding: 20px; display: flex; flex-direction: column; gap: 14px; }
.modal h2 { font-size: 17px; }
.modal .actions { display: flex; gap: 8px; justify-content: flex-end; flex-wrap: wrap; }
.toast { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: var(--radius); background: var(--text); color: var(--surface); font-size: 13.5px; box-shadow: var(--shadow-lg); max-width: 360px; }
.toast .ico { color: var(--ok-bar); }
.toast.toast-err .ico { color: var(--err-bar); }
.notif { position: absolute; right: 0; top: 44px; width: 380px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); z-index: 20; overflow: hidden; }
.notif-item { display: flex; gap: 10px; padding: 10px 14px; border-bottom: 1px solid var(--border); font-size: 13px; line-height: 1.4; text-decoration: none; color: inherit; }
.notif-item:hover { background: var(--surface-2); text-decoration: none; }
.notif-item.is-unread { background: var(--accent-soft); }
.notif-item .when { font-size: 11.5px; color: var(--text-3); margin-top: 2px; }
.notif-item .udot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); margin-top: 6px; flex: 0 0 auto; }
.notif-item.is-read .udot { background: transparent; }

/* ---------- Плитки, график ---------- */
.kpi { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 14px 16px; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.kpi .k { font-size: 12px; color: var(--text-3); font-weight: 500; }
.kpi .v { font-family: var(--font-display); font-weight: 600; font-size: 24px; letter-spacing: -0.02em; line-height: 1.1; white-space: nowrap; }
.kpi .d { font-size: 12px; color: var(--text-3); }
.bars { display: flex; align-items: flex-end; gap: 10px; height: 160px; padding-top: 8px; }
.bars .bcol { flex: 1 1 0; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 6px; height: 100%; min-width: 0; }
.bars .bv { width: 100%; max-width: 44px; background: var(--accent); border-radius: 4px 4px 0 0; }
.bars .bv.is-muted { background: var(--accent-border); }
.bars .bl { font-size: 11px; color: var(--text-3); }

/* ---------- Календарная сетка табеля ---------- */
.cal { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.cal .dh { font-size: 11px; font-weight: 600; text-transform: uppercase; color: var(--text-3); text-align: center; padding: 4px 0; }
.cal .d { aspect-ratio: 1 / .78; border: 1px solid var(--border); border-radius: 6px; padding: 5px 6px; display: flex; flex-direction: column; justify-content: space-between; background: var(--surface); font-size: 12px; min-width: 0; }
.cal .d .n { color: var(--text-3); font-size: 11px; }
.cal .d .c { font-weight: 700; font-size: 13px; }
.cal .d.is-off { background: var(--surface-3); }
.cal .d.is-out { opacity: .35; }
.cal .d.c-ok { background: var(--ok-bg); } .cal .d.c-ok .c { color: var(--ok); }
.cal .d.c-warn { background: var(--warn-bg); } .cal .d.c-warn .c { color: var(--warn); }
.cal .d.c-err { background: var(--err-bg); } .cal .d.c-err .c { color: var(--err); }
.cal .d.c-info { background: var(--info-bg); } .cal .d.c-info .c { color: var(--info); }
.cal .d.is-today { outline: 2px solid var(--accent); outline-offset: -2px; }
.legend { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 12px; color: var(--text-2); }
.legend .sw { display: inline-block; width: 14px; height: 14px; border-radius: 3px; border: 1px solid var(--border); margin-right: 6px; vertical-align: -2px; }

/* ---------- Скелетон ---------- */
.sk { background: linear-gradient(90deg, var(--surface-3) 25%, var(--surface-2) 50%, var(--surface-3) 75%); background-size: 200% 100%; animation: mmx-sk 1.4s ease infinite; border-radius: 4px; height: 12px; }
@keyframes mmx-sk { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }

/* ---------- Телефон ---------- */
.phone { width: 390px; min-height: 844px; background: var(--bg); position: relative; display: flex; flex-direction: column; overflow: hidden; }
.m-top { height: 52px; display: flex; align-items: center; gap: 8px; padding: 0 8px 0 16px; background: var(--surface); border-bottom: 1px solid var(--border); flex: 0 0 auto; }
.m-top h1 { font-size: 18px; flex: 1 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.m-body { flex: 1 1 auto; padding: 12px 16px 96px; display: flex; flex-direction: column; gap: 12px; }
.m-nav { position: absolute; left: 0; right: 0; bottom: 0; height: 64px; background: var(--surface); border-top: 1px solid var(--border); display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); z-index: 5; }
.m-nav a { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; font-size: 10.5px; font-weight: 500; color: var(--text-3); text-decoration: none; }
.m-nav a.is-active { color: var(--accent-text); }
.m-nav a:hover { text-decoration: none; }
.m-cta { position: absolute; left: 0; right: 0; bottom: 64px; padding: 10px 16px; background: linear-gradient(to top, var(--bg) 70%, transparent); z-index: 4; }
.mcard { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 12px 12px 12px 10px; display: flex; gap: 10px; text-decoration: none; color: inherit; }
.mcard:hover { text-decoration: none; }
.mcard .body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.mcard .title { font-weight: 600; font-size: 14px; }
.mcard .meta { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: 12px; color: var(--text-3); flex-wrap: wrap; }
.sheet { position: absolute; left: 0; right: 0; bottom: 64px; background: var(--surface); border-radius: 16px 16px 0 0; box-shadow: 0 -8px 24px rgba(16,24,40,.16); padding: 8px 16px 16px; display: flex; flex-direction: column; gap: 10px; z-index: 6; }
.sheet .grab { width: 40px; height: 4px; border-radius: 2px; background: var(--border-strong); margin: 0 auto 4px; }
.m-list { display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; }
.m-row { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-bottom: 1px solid var(--border); min-height: 52px; text-decoration: none; color: inherit; }
.m-row:last-child { border-bottom: 0; }
.m-row:hover { text-decoration: none; }
.m-row .k { color: var(--text-3); font-size: 13px; }
.m-row .v { margin-left: auto; font-weight: 500; white-space: nowrap; }
.m-sec { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--text-3); padding: 4px 2px 0; }