/* =========================================================================
   Компьютерная версия msng (окно от 1024 px, класс body.desk ставит desk.js).
   Правила «Компьютерная версия (16:9)» + токены «Версии 2». Мобильная раскладка не меняется.
   ========================================================================= */

/* Логотип на экране входа и загрузки (и в телефоне, и на компьютере) */
.brand-logo { display: flex; flex-direction: column; align-items: center; gap: 8px; margin: 0 auto 20px; }
.brand-logo img { height: 40px; width: auto; display: block; }
.brand-logo .bl-dark { display: none; }
.bl-studio { font-size: 13px; color: var(--muted); }
:root[data-theme="dark"] .brand-logo .bl-light { display: none; }
:root[data-theme="dark"] .brand-logo .bl-dark { display: block; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .brand-logo .bl-light { display: none; }
  :root:not([data-theme="light"]) .brand-logo .bl-dark { display: block; }
}
.boot-logo { min-height: 70vh; display: flex; align-items: center; justify-content: center; animation: sq-fade .5s ease both; }
.boot-logo .brand-logo { margin: 0; }
@keyframes sq-fade { from { opacity: 0; } }

body.desk {
  --sq-ground: #f3f4f5;
  --sq-side: rgba(255, 255, 255, 0.52);
  --sq-side-line: rgba(255, 255, 255, 0.75);
  --sq-panel: #f6f7f8;
  --sq-line-in: rgba(17, 19, 24, 0.045);
  --sq-shadow: 0 1px 2px rgba(17, 19, 24, 0.04), 0 12px 32px rgba(17, 19, 24, 0.06);
  --sq-field: #f3f4f6;
  --sq-track: rgba(17, 19, 24, 0.08);
  --sq-hero: var(--accent);
  --sq-hero-ink: #111318;
  --sq-hero-muted: rgba(17, 19, 24, 0.6);
  --sq-soft: color-mix(in srgb, var(--accent) 45%, var(--card));
  --sq-scrim: rgba(17, 19, 24, 0.28);
  --sq-ease: cubic-bezier(.2, .85, .25, 1);
  height: 100dvh; overflow: hidden; margin: 0;
  padding: 16px max(16px, env(safe-area-inset-right)) 16px max(16px, env(safe-area-inset-left));
  background:
    radial-gradient(70% 60% at 0% 0%, color-mix(in srgb, var(--accent) 85%, transparent) 0%, transparent 70%),
    radial-gradient(60% 60% at 100% 100%, color-mix(in srgb, var(--accent) 45%, transparent) 0%, transparent 70%),
    var(--sq-ground);
  background-size: auto; background-repeat: no-repeat;
}
:root[data-theme="dark"] body.desk {
  --sq-ground: #0e0f11;
  --sq-side: rgba(30, 32, 36, 0.55);
  --sq-side-line: rgba(255, 255, 255, 0.07);
  --sq-panel: #141518;
  --sq-line-in: rgba(255, 255, 255, 0.045);
  --sq-shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 12px 32px rgba(0, 0, 0, 0.25);
  --sq-field: #222429;
  --sq-track: rgba(255, 255, 255, 0.1);
  --sq-hero: color-mix(in srgb, var(--accent) 28%, #1b1c20);
  --sq-hero-ink: #f1f2f4;
  --sq-hero-muted: #b5bac2;
  --sq-soft: color-mix(in srgb, var(--accent) 16%, var(--card));
  --sq-scrim: rgba(0, 0, 0, 0.55);
  background:
    radial-gradient(70% 60% at 0% 0%, color-mix(in srgb, var(--accent) 22%, transparent) 0%, transparent 70%),
    radial-gradient(60% 60% at 100% 100%, color-mix(in srgb, var(--accent) 12%, transparent) 0%, transparent 70%),
    var(--sq-ground);
}
body.desk #tabbar, body.desk .fab, body.desk #hdr-add { display: none !important; }

/* ---------- Каркас ---------- */
.sq-app { height: 100%; display: grid; grid-template-columns: 268px minmax(0, 1fr); gap: 14px; }
.sq-side {
  border-radius: 28px; background: var(--sq-side); box-shadow: inset 0 0 0 1px var(--sq-side-line), var(--sq-shadow);
  -webkit-backdrop-filter: blur(24px) saturate(150%); backdrop-filter: blur(24px) saturate(150%);
  display: flex; flex-direction: column; min-height: 0; padding: 20px 14px 14px;
}
.sq-brand { display: flex; align-items: center; gap: 11px; padding: 2px 8px 16px; }
/* Логотип msng: только слово (иконку «m» рядом не ставим — получится две «m»); в свёрнутом меню — «m» в чёрном квадрате */
.sq-bword { display: block; color: var(--ink); line-height: 0; }
.sq-bword svg { display: block; height: 26px; width: auto; }
.sq-brand #sq-studio { display: block; font-size: 12px; color: var(--muted); margin-top: 6px; }
.sq-bmark { display: none; width: 34px; height: 34px; border-radius: 11px; background: var(--cta); color: var(--cta-ink); align-items: center; justify-content: center; flex: none; }
body.sq-navmini .sq-bmark { display: flex; }
body.sq-navmini .sq-brand > div { display: none; }
.sq-nav { flex: 1; min-height: 0; overflow: auto; scrollbar-width: none; display: flex; flex-direction: column; gap: 2px; padding-bottom: 8px; }
.sq-nav::-webkit-scrollbar { display: none; }
.sq-gh { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 14px 10px 6px; font: inherit; font-size: 12px; font-weight: 500; color: var(--muted); background: none; border: 0; cursor: pointer; text-align: left; }
div.sq-gh { cursor: default; }
.sq-gh svg { width: 14px; height: 14px; transition: transform .2s; }
.sq-gh[aria-expanded="false"] svg { transform: rotate(-90deg); }
.sq-gsp { height: 10px; }
.sq-gb { display: flex; flex-direction: column; gap: 2px; }
.sq-gb[hidden] { display: none; }
.sq-ni {
  display: flex; align-items: center; gap: 11px; width: 100%; height: 40px; padding: 0 10px; border-radius: 20px; border: 0; background: none;
  font: inherit; font-size: 14px; font-weight: 500; color: var(--ink-2); text-align: left; cursor: pointer; transition: background .15s, color .15s, transform .12s;
}
.sq-ni:hover { background: color-mix(in srgb, var(--card) 55%, transparent); color: var(--ink); }
.sq-ni[aria-current="page"] { background: var(--card); color: var(--ink); font-weight: 600; box-shadow: var(--sq-shadow); }
.sq-ni .ic { width: 28px; height: 28px; border-radius: 14px; display: flex; align-items: center; justify-content: center; color: var(--ink-2); flex: none; }
.sq-ni .ic svg { width: 17px; height: 17px; }
.sq-ni[aria-current="page"] .ic { background: var(--accent); color: #111318; }
.sq-ni .tx { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; }
.sq-badge { min-width: 22px; height: 22px; padding: 0 7px; border-radius: 11px; background: var(--cta); color: var(--cta-ink); font-size: 12px; font-weight: 600; display: flex; align-items: center; justify-content: center; font-variant-numeric: tabular-nums; }
.sq-badge.hot { background: var(--rose); color: #fff; }
.sq-me {
  margin-top: 8px; display: flex; align-items: center; gap: 10px; padding: 10px; border-radius: 22px; border: 0; width: 100%; text-align: left; cursor: pointer; font: inherit; color: inherit;
  background: color-mix(in srgb, var(--card) 70%, transparent); box-shadow: inset 0 0 0 1px var(--sq-side-line);
}
.sq-me[aria-current] { background: var(--card); }
.sq-me .avatar { width: 38px; height: 38px; font-size: 13px; position: relative; overflow: hidden; flex: none; border-radius: 50%; display: flex; align-items: center; justify-content: center; }
.sq-me-t { flex: 1; min-width: 0; }
.sq-me-t b { display: block; font-size: 14px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sq-me-t small { display: block; font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sq-me > svg { width: 16px; height: 16px; color: var(--muted); }

.sq-main { border-radius: 28px; background: var(--sq-panel); box-shadow: inset 0 0 0 1px var(--sq-line-in), var(--sq-shadow); min-height: 0; display: flex; flex-direction: column; overflow: hidden; }
.sq-top { display: flex; align-items: center; gap: 10px; padding: 14px 18px 0; position: relative; z-index: 30; }
.sq-search { flex: 1; max-width: 560px; height: 46px; border-radius: 23px; background: var(--card); box-shadow: inset 0 0 0 1px var(--sq-line-in); display: flex; align-items: center; gap: 10px; padding: 0 8px 0 16px; color: var(--muted); position: relative; }
.sq-search:focus-within { box-shadow: inset 0 0 0 2px var(--ink); }
.sq-sic svg { width: 18px; height: 18px; display: block; }
.sq-search input { flex: 1; min-width: 0; border: 0; outline: 0; background: none; color: var(--ink); font: inherit; font-size: 14px; height: 100%; }
.sq-search input::-webkit-search-cancel-button { display: none; }
.sq-search input:focus, .sq-search input:focus-visible { outline: none; box-shadow: none; }
.sq-kbd { height: 30px; padding: 0 10px; border-radius: 15px; background: var(--chip); font-size: 12px; font-weight: 500; color: var(--ink-2); display: flex; align-items: center; white-space: nowrap; }
.sq-sres { position: absolute; top: 54px; left: 0; right: 0; max-height: min(520px, 70vh); overflow: auto; border-radius: 22px; background: var(--card); box-shadow: inset 0 0 0 1px var(--sq-line-in), 0 20px 50px rgba(17, 19, 24, 0.18); padding: 6px; z-index: 50; animation: sq-pop .2s var(--sq-ease); color: var(--ink); }
.sq-sh { font-size: 12px; font-weight: 500; color: var(--muted); padding: 10px 10px 4px; }
.sq-sempty { padding: 16px; color: var(--muted); font-size: 14px; }
.sq-sres button, .sq-menu button { display: flex; align-items: center; gap: 12px; width: 100%; padding: 8px 10px; border-radius: 16px; text-align: left; border: 0; background: none; font: inherit; color: var(--ink); cursor: pointer; }
.sq-sres button:hover, .sq-sres button.on, .sq-menu button:hover { background: var(--chip); }
.sq-sres b, .sq-menu b { display: block; font-size: 14px; font-weight: 600; }
.sq-sres small, .sq-menu small { display: block; font-size: 12px; color: var(--muted); }
.sq-sq { width: 38px; height: 38px; border-radius: 19px; background: var(--chip); color: var(--ink-2); display: flex; align-items: center; justify-content: center; flex: none; }
.sq-sq svg { width: 18px; height: 18px; }
.sq-sq.acc { background: var(--accent); color: #111318; }
.sq-sq.ink { background: var(--cta); color: var(--cta-ink); width: 30px; height: 30px; }
.sq-sq.ink svg { width: 15px; height: 15px; }
.sq-sp { flex: 1; }
.sq-sw { display: flex; gap: 6px; align-items: center; }
.sq-sw button { width: 22px; height: 22px; border-radius: 11px; border: 0; padding: 0; cursor: pointer; box-shadow: inset 0 0 0 1px rgba(17, 19, 24, 0.12); }
.sq-sw button[aria-pressed="true"] { outline: 2px solid var(--ink); outline-offset: 2px; }
.sq-circle { width: 46px; height: 46px; border-radius: 23px; background: var(--card); box-shadow: inset 0 0 0 1px var(--sq-line-in); display: flex; align-items: center; justify-content: center; color: var(--ink); position: relative; border: 0; cursor: pointer; transition: transform .12s; flex: none; }
.sq-circle svg { width: 19px; height: 19px; }
.sq-circle.sm { width: 34px; height: 34px; }
.sq-circle.sm svg { width: 16px; height: 16px; }
.sq-dot { position: absolute; top: 11px; right: 12px; width: 8px; height: 8px; border-radius: 4px; background: var(--rose); box-shadow: 0 0 0 2px var(--card); }
.sq-dot[hidden] { display: none; }
.sq-rel { position: relative; }
.sq-create { height: 46px; padding: 0 20px; border-radius: 23px; background: var(--cta); color: var(--cta-ink); font: inherit; font-weight: 600; font-size: 14px; display: inline-flex; align-items: center; gap: 8px; border: 0; cursor: pointer; white-space: nowrap; transition: transform .12s; }
.sq-create svg { width: 17px; height: 17px; }
.sq-menu { position: absolute; top: 58px; right: 0; width: 280px; border-radius: 22px; background: var(--card); box-shadow: inset 0 0 0 1px var(--sq-line-in), 0 20px 50px rgba(17, 19, 24, 0.18); padding: 6px; z-index: 40; animation: sq-pop .2s var(--sq-ease); }
.sq-bellmenu { width: 320px; }
@keyframes sq-pop { from { opacity: 0; transform: translateY(8px) scale(.98); } }
.sq-scroll { flex: 1; min-height: 0; overflow: auto; padding: 4px 18px 22px; scroll-behavior: auto; }

/* содержимое мобильной версии внутри панели */
body.desk #app { max-width: none; margin: 0; min-height: 0; }
body.desk #view { padding: 0 6px 24px; overflow: visible; }
body.desk.sq-twocol #app { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(360px, 0.95fr); column-gap: 14px; align-items: start; }
body.desk.sq-twocol #topbar { grid-column: 1 / -1; }
body.desk.sq-split-chat #app { grid-template-columns: minmax(280px, 0.8fr) minmax(0, 1.6fr); }

/* ---------- Шапка экрана ---------- */
body.desk #topbar.sq-ph { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; padding: 18px 6px 16px; background: none; position: static; flex-wrap: wrap; backdrop-filter: none; -webkit-backdrop-filter: none; min-height: 0; border: 0; box-shadow: none; }
body.desk #topbar .sq-ph-l { min-width: 0; flex: 1 1 320px; }
body.desk #topbar .page-title { margin: 0; font-size: 30px; line-height: 1.1; font-weight: 600; letter-spacing: -0.035em; text-wrap: balance; white-space: normal; overflow: visible; }
body.desk #topbar .sq-sub { margin: 4px 0 0; color: var(--muted); font-size: 14px; }
body.desk #topbar .sq-sub[hidden] { display: none; }
.sq-crumbs { display: flex; align-items: center; gap: 6px; color: var(--muted); font-size: 13px; margin-bottom: 6px; flex-wrap: wrap; }
.sq-crumbs button { border: 0; background: none; padding: 0; font: inherit; color: var(--muted); cursor: pointer; }
.sq-crumbs button:hover { color: var(--ink); }
.sq-crumbs svg { width: 13px; height: 13px; }
body.desk #topbar .hdr-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
body.desk #topbar .hdr-right { display: flex; align-items: center; gap: 8px; }
body.desk #topbar .icon-btn { width: 46px; height: 46px; border-radius: 23px; background: var(--card); box-shadow: inset 0 0 0 1px var(--sq-line-in); }
body.desk #topbar .hdr-save { height: 46px; padding: 0 20px; border-radius: 23px; }
/* сегменты разделов — справа от заголовка */
body.desk #topbar .sq-seg, body.desk #topbar .seg-main {
  display: inline-flex; width: auto; padding: 4px; margin: 0; border-radius: 24px; background: var(--card); box-shadow: inset 0 0 0 1px var(--sq-line-in); gap: 2px; overflow: visible; grid-auto-columns: auto;
}
body.desk #topbar .sq-seg button, body.desk #topbar .seg-main button { height: 36px; padding: 0 16px; border-radius: 18px; font-size: 13px; font-weight: 500; color: var(--ink-2); white-space: nowrap; background: none; box-shadow: none; min-width: 0; }
body.desk #topbar .sq-seg button.active, body.desk #topbar .seg-main button.active { background: var(--cta); color: var(--cta-ink); font-weight: 600; }
body.desk #topbar .sq-pills { display: inline-flex; gap: 2px; padding: 4px; border-radius: 24px; background: var(--card); box-shadow: inset 0 0 0 1px var(--sq-line-in); margin: 0; overflow: visible; flex-wrap: nowrap; }
body.desk #topbar .sq-pills .pill { height: 36px; padding: 0 14px; border-radius: 18px; font-size: 13px; background: none; box-shadow: none; border: 0; }
body.desk #topbar .sq-pills .pill.active { background: var(--cta); color: var(--cta-ink); }
/* кнопки в шапке (в том числе главные действия проекта) */
.sq-btn, body.desk #topbar .sq-projbtn {
  height: 46px; padding: 0 20px; border-radius: 23px; background: var(--cta); color: var(--cta-ink); font: inherit; font-weight: 600; font-size: 14px;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; white-space: nowrap; border: 0; cursor: pointer; transition: transform .12s, filter .12s; box-shadow: none; width: auto; min-width: 0; margin: 0;
}
.sq-btn svg, body.desk #topbar .sq-projbtn svg { width: 17px; height: 17px; }
.sq-btn.sm { height: 38px; padding: 0 16px; border-radius: 19px; font-size: 13px; }
.sq-btn.sm svg { width: 15px; height: 15px; }
.sq-btn.ghost, body.desk #topbar .sq-projbtn:not(.main) { background: var(--chip); color: var(--ink); }
body.desk #topbar .sq-projbtn .arr { display: none; }
.sq-btn:hover, .sq-create:hover { filter: brightness(1.08); }
.sq-btn.ghost:hover { filter: brightness(0.97); }
:root[data-theme="dark"] .sq-btn.ghost:hover { filter: brightness(1.15); }
.sq-btn:active, .sq-create:active, .sq-circle:active, .sq-ni:active, .sq-rb:active, .sq-kc:active, body.desk .lrow:active, body.desk .lbtn:active { transform: scale(.97); }

/* ---------- Анимации ---------- */
body.desk #view.anim-fade, body.desk #view.anim-right, body.desk #view.anim-left { animation: sq-in .32s cubic-bezier(.2, .8, .2, 1) both; }
@keyframes sq-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
body.desk #view.no-anim { animation: none; }

/* ---------- Общие блоки ---------- */
.sq-card { display: block; width: 100%; text-align: left; font: inherit; color: inherit; border: 0; background: var(--card); border-radius: 24px; box-shadow: inset 0 0 0 1px var(--sq-line-in), var(--sq-shadow); min-width: 0; height: 100%; overflow: hidden; }
button.sq-card { cursor: pointer; transition: transform .12s; }
button.sq-card:active { transform: scale(.985); }
.sq-card.pad { padding: 18px 20px; }
.sq-ch { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 16px 20px 8px; }
.sq-ch h3 { margin: 0; font-size: 16px; font-weight: 600; letter-spacing: -0.02em; }
.sq-meta { font-size: 13px; color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.sq-row { display: flex; align-items: center; gap: 12px; min-height: 58px; padding: 8px 16px; border-top: 1px solid var(--line); text-align: left; width: 100%; background: none; border-left: 0; border-right: 0; border-bottom: 0; font: inherit; color: inherit; }
.sq-ch + .sq-row { border-top: 0; }
.sq-row.click { cursor: pointer; transition: background .15s; }
.sq-row.click:hover { background: color-mix(in srgb, var(--chip) 60%, transparent); }
.sq-row .t2 { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.sq-row .t2 b { font-size: 15px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sq-row .t2 span { font-size: 13px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sq-row .t2 span.hot { color: var(--rose); }
.sq-rside { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; flex: none; }
.sq-row-sb { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.sq-pill { height: 26px; padding: 0 10px; border-radius: 13px; font-size: 12px; font-weight: 600; display: inline-flex; align-items: center; white-space: nowrap; flex: none; background: var(--chip); color: var(--ink-2); font-variant-numeric: tabular-nums; }
.sq-pill.sm { height: 20px; padding: 0 7px; font-size: 11px; }
.sq-pill.acc { background: var(--accent); color: #111318; }
.sq-pill.rose { background: var(--rose-bg); color: var(--rose); }
.sq-pill.sand { background: var(--sand-bg); color: var(--sand); }
.sq-rb { min-width: 104px; height: 38px; padding: 0 14px; border-radius: 19px; background: var(--chip); color: var(--ink); font: inherit; font-size: 13px; font-weight: 600; border: 0; cursor: pointer; flex: none; transition: transform .12s; }
.sq-rb.cta { background: var(--cta); color: var(--cta-ink); }
.sq-big { font-size: 30px; font-weight: 600; letter-spacing: -0.035em; line-height: 1.1; font-variant-numeric: tabular-nums; }
.sq-big.hot { color: var(--rose); }
.sq-bar { height: 8px; border-radius: 4px; background: var(--sq-track); overflow: hidden; margin: 10px 0 6px; }
.sq-bar i { display: block; height: 100%; border-radius: 4px; background: var(--accent); }
:root[data-theme="dark"] .sq-bar i { background: color-mix(in srgb, var(--accent) 80%, #fff); }
.sq-chartlbl { fill: var(--muted); font-size: 11px; font-family: inherit; }
.sq-chartlbl.strong { fill: var(--ink); font-weight: 600; }
.sq-hint { margin: 12px 6px 0; font-size: 13px; color: var(--muted); }

/* ---------- Окна вместо шторок ---------- */
body.desk .sheet-back { background: var(--sq-scrim); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); transition: opacity .2s ease; z-index: 80; }
body.desk .sheet {
  left: 50%; right: auto; top: 50%; bottom: auto; margin: 0; z-index: 81;
  width: min(560px, calc(100vw - 40px)); max-width: none; max-height: calc(100dvh - 60px); overflow-y: auto;
  border-radius: 30px; padding: 22px 24px 24px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 34%, var(--card)) 0%, var(--card) 240px);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.25);
  opacity: 0; transform: translate(-50%, calc(-50% + 16px)) scale(.98);
  transition: transform .32s var(--sq-ease), opacity .2s ease;
}
:root[data-theme="dark"] body.desk .sheet { background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 14%, var(--card)) 0%, var(--card) 240px); }
body.desk .sheet.show { opacity: 1; transform: translate(-50%, -50%); }
body.desk .sheet.closing { transition: transform .2s ease-in, opacity .2s ease-in; }
body.desk .sheet .grip { display: none; }
body.desk .sheet.tall { max-height: calc(100dvh - 60px); }
body.desk .sheet h3 { padding-top: 0; font-size: 22px; letter-spacing: -0.025em; }
body.desk .toast, body.desk #toast { z-index: 120; }

/* ---------- «Сегодня»: виджеты ---------- */
.sq-wgrid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 14px; grid-auto-flow: dense; align-items: stretch; }
.sq-wd { min-width: 0; position: relative; display: flex; flex-direction: column; }
.sq-wbody { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.sq-wbody > * { flex: 1; }
.sq-wgrid.editing .sq-wd { border-radius: 28px; outline: 2px dashed color-mix(in srgb, var(--ink) 18%, transparent); outline-offset: 4px; cursor: grab; animation: sq-wig .5s ease; }
@keyframes sq-wig { 0% { transform: scale(.985); } 100% { transform: none; } }
.sq-wgrid.editing .sq-wbody { pointer-events: none; }
.sq-wd.dragging { opacity: .35; }
.sq-wd.over { outline-color: var(--ink) !important; }
.sq-wbar { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.sq-whandle { display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; flex: 1; }
.sq-whandle svg { width: 14px; height: 14px; }
.sq-wsz { display: flex; padding: 3px; border-radius: 16px; background: var(--card); box-shadow: inset 0 0 0 1px var(--sq-line-in); }
.sq-wsz button { height: 26px; min-width: 30px; padding: 0 8px; border-radius: 13px; font: inherit; font-size: 12px; font-weight: 600; color: var(--ink-2); border: 0; background: none; cursor: pointer; }
.sq-wsz button[aria-pressed="true"] { background: var(--cta); color: var(--cta-ink); }
.sq-wx { width: 32px; height: 32px; border-radius: 16px; background: var(--card); box-shadow: inset 0 0 0 1px var(--sq-line-in); display: flex; align-items: center; justify-content: center; border: 0; cursor: pointer; color: var(--ink); }
.sq-wx svg { width: 14px; height: 14px; }
.sq-wadd { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 14px; height: auto; }
.sq-wempty { color: var(--muted); display: flex; align-items: center; min-height: 120px; }
@media (max-width: 1180px) { .sq-wd { grid-column: span 6 !important; } }
/* Сводка дня */
.sq-hero { border-radius: 28px; background: var(--sq-hero); color: var(--sq-hero-ink); position: relative; overflow: hidden; padding: 26px 28px; min-height: 240px; display: flex; flex-direction: column; justify-content: space-between; gap: 18px; }
.sq-hero::before { content: ""; position: absolute; inset: -30% -10% auto auto; width: 70%; height: 140%; border-radius: 50%; background: radial-gradient(closest-side, rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0)); pointer-events: none; }
:root[data-theme="dark"] .sq-hero::before { background: radial-gradient(closest-side, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0)); }
.sq-hero > * { position: relative; }
.sq-hero-top { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 500; color: var(--sq-hero-muted); }
.sq-htitle { margin: 0; font-size: 46px; line-height: 1.02; font-weight: 600; letter-spacing: -0.045em; max-width: 640px; text-wrap: balance; }
.sq-cnts { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 16px; }
.sq-cnts > span { display: inline-flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 500; }
.sq-cnts i { min-width: 30px; height: 30px; padding: 0 9px; border-radius: 15px; background: rgba(255, 255, 255, 0.7); color: #111318; display: inline-flex; align-items: center; justify-content: center; font-style: normal; font-weight: 600; }
:root[data-theme="dark"] .sq-cnts i { background: rgba(255, 255, 255, 0.14); color: #fff; }
.sq-cnts > span.zero { opacity: .5; }
.sq-empty.sm { padding: 24px 16px; }
.sq-empty.sm .sq-ecirc { width: 44px; height: 44px; }
.sq-empty.sm .sq-ecirc svg { width: 20px; height: 20px; }
body.desk #hdr-search { display: none; }
.sq-hero .td-title { margin: 0; padding: 0; font-size: 46px; line-height: 1.02; font-weight: 600; letter-spacing: -0.045em; max-width: 620px; color: inherit; text-wrap: balance; }
.sq-hero .td-title span { display: inline; font-size: inherit; color: inherit; font-weight: inherit; margin-left: .25em; }
.sq-hero .cnts { margin: 16px 0 0; padding: 0; overflow: visible; flex-wrap: wrap; gap: 16px; }
.sq-hero .cnts > span { background: none; box-shadow: none; padding: 0; height: auto; color: inherit; font-size: 15px; font-weight: 500; gap: 8px; }
.sq-hero .cnts i { min-width: 30px; height: 30px; padding: 0 9px; border-radius: 15px; background: rgba(255, 255, 255, 0.7); color: #111318; display: inline-flex; align-items: center; justify-content: center; font-style: normal; font-weight: 600; }
:root[data-theme="dark"] .sq-hero .cnts i { background: rgba(255, 255, 255, 0.14); color: #fff; }
/* виджеты из мобильных блоков */
.sq-wbody > .today-shoot { margin: 0; border-radius: 28px; height: 100%; }
.sq-wbody .td-day { box-shadow: none; border-radius: 0; background: none; margin: 0; }
.sq-wbody .sq-card .lst { box-shadow: none; border-radius: 0; background: none; margin: 0; }
.sq-deckw { display: flex; flex-direction: column; min-height: 100%; background: var(--card); border-radius: 24px; box-shadow: inset 0 0 0 1px var(--sq-line-in), var(--sq-shadow); overflow: hidden; padding: 0 16px 14px; }
.sq-deckw .sq-ch { padding: 16px 4px 4px; }
.sq-deckw .deck-card { box-shadow: inset 0 0 0 1px var(--line) !important; }
.sq-deckw .deck-glow { opacity: .55; }

.sq-deckctl { display: flex; gap: 6px; align-items: center; }
.sq-deckw .deck-wrap { margin: 0; flex: 1; }
.sq-hidden-grp { display: none !important; }
.sq-income { display: flex; flex-direction: column; gap: 6px; }
.sq-income svg { margin-top: auto; }
.sq-plan .muted.small { font-variant-numeric: tabular-nums; }
.sq-tasks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 14px; align-items: start; }
.sq-tasks > .grp, .sq-tasks > .section-head { grid-column: span 1; }
.sq-tgrp { min-width: 0; }
.sq-tgrp > .card { margin-bottom: 12px; }
.sq-tasks > .today-actions:empty { display: none; }
.sq-tasks > .month-line { grid-column: 1 / -1; }
.sq-week { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; padding: 0 16px 16px; }
.sq-wday { border-radius: 16px; padding: 10px; min-height: 120px; background: var(--sq-field); color: inherit; border: 0; font: inherit; text-align: left; display: flex; flex-direction: column; gap: 4px; cursor: pointer; min-width: 0; transition: transform .12s; }
.sq-wday:hover { filter: brightness(.98); }
.sq-wday.today { background: var(--accent); color: #111318; }
.sq-wday b { font-size: 12px; font-weight: 600; }
.sq-wday span { font-size: 12px; line-height: 1.3; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; word-break: break-word; }
.sq-wday span.dl { color: var(--rose); font-weight: 600; }
.sq-wday.today span.dl { color: #7a2a20; }
.sq-wday span.mt, .sq-wday span.none, .sq-wday span.more { color: var(--muted); }
.sq-wday.today span.mt, .sq-wday.today span.more { color: rgba(17, 19, 24, 0.6); }

/* ---------- «Проекты» ---------- */
.sq-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-bottom: 14px; }
.sq-kpis .sq-card { height: auto; }
.sq-cols2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; align-items: start; }
.sq-cols2 > div { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.sq-pgroup { height: auto; }
.sq-pgroup .lst, .sq-pgroup .pj-burn { box-shadow: none; border-radius: 0; background: none; margin: 0; padding: 0; }
.sq-pgroup.burn { background: var(--rose-bg); box-shadow: none; }
.sq-pgroup.burn .lrow, .sq-pgroup.burn .swipe, .sq-pgroup.burn .card { background: transparent !important; }
.sq-pgroup.burn .lbtn:not(.main) { background: var(--card); }
body.desk #proj-sub > .seg-main, body.desk #proj-sub .stiles { display: none; }
/* Доска */
.sq-kan { display: grid; grid-template-columns: repeat(4, minmax(220px, 1fr)); gap: 12px; overflow-x: auto; padding-bottom: 6px; }
.sq-col { background: color-mix(in srgb, var(--card) 55%, transparent); border-radius: 24px; padding: 10px; box-shadow: inset 0 0 0 1px var(--sq-line-in); min-height: 320px; display: flex; flex-direction: column; gap: 8px; transition: background .15s; }
.sq-col.over { background: var(--sq-soft); }
.sq-colh { display: flex; align-items: center; justify-content: space-between; padding: 6px 8px 4px; }
.sq-colh b { font-size: 14px; font-weight: 600; }
.sq-kc { background: var(--card); border-radius: 18px; padding: 12px 14px; box-shadow: inset 0 0 0 1px var(--sq-line-in), var(--sq-shadow); cursor: grab; display: flex; flex-direction: column; gap: 6px; text-align: left; user-select: none; transition: transform .12s, opacity .15s; }
.sq-kc:active { cursor: grabbing; }
.sq-kc.drag { opacity: .4; }
.sq-kc b { font-size: 14px; font-weight: 600; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sq-kc > span { font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sq-kc:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
/* Календарь месяца + список дня */
.sq-cal { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(300px, 0.75fr); gap: 14px; align-items: start; }
.sq-cal .cal-card { margin: 0; padding: 18px 20px; }
.sq-cal .cal-grid { gap: 6px; }
.sq-cal .cal-day { min-height: 92px; height: auto; border-radius: 16px; background: var(--card); box-shadow: inset 0 0 0 1px var(--sq-line-in); padding: 8px; display: flex; flex-direction: column; align-items: stretch; justify-content: flex-start; gap: 4px; text-align: left; aspect-ratio: auto; }
.sq-cal .cal-day > span:first-child { font-size: 13px; font-weight: 600; }
.sq-cal .cal-day.out { opacity: .45; }
.sq-cal .cal-day.today { box-shadow: inset 0 0 0 2px var(--ink); background: var(--card); color: var(--ink); }
.sq-cal .cal-day.sel { background: var(--sq-soft); color: var(--ink); }
.sq-ev { font-size: 11px; font-weight: 500; padding: 3px 7px; border-radius: 8px; background: var(--accent); color: #111318; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; }
.sq-ev.dl { background: var(--rose-bg); color: var(--rose); }
.sq-ev.mt { background: var(--chip); color: var(--ink-2); }
.sq-ev.more { background: none; color: var(--muted); padding: 0 2px; }
.sq-calday > .grp:first-child { padding-top: 4px; }

/* ---------- Проект ---------- */
body.desk .proj-head { background: var(--card); color: var(--ink); box-shadow: inset 0 0 0 1px var(--sq-line-in), var(--sq-shadow); }
body.desk .proj-head .dk-label, body.desk .proj-head .steps4-cap { color: var(--muted); }
body.desk .proj-head .dk-title { color: var(--ink); }
body.desk .proj-head .steps4 i { background: var(--sq-track); }
body.desk .proj-head .steps4 i.done { background: var(--ink); }
body.desk .proj-head .steps4 i.now { background: var(--accent); }
body.desk .proj-head .dk-hot { background: var(--rose-bg); color: var(--rose); }
body.desk .proj-tabs { display: inline-flex; width: auto; padding: 4px; border-radius: 24px; background: var(--card); box-shadow: inset 0 0 0 1px var(--sq-line-in); gap: 2px; margin: 14px 0; }
body.desk .proj-tabs button { height: 36px; padding: 0 18px; border-radius: 18px; font-size: 13px; flex: none; }
.sq-ovcols { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(320px, 0.9fr); gap: 14px; align-items: start; }
.sq-ovl, .sq-ovr { min-width: 0; display: flex; flex-direction: column; }
.sq-ovl > *:first-child, .sq-ovr > *:first-child { margin-top: 0; }
.sq-ovr > .grp:first-child, .sq-ovl > .grp:first-child { padding-top: 0; }

/* ---------- Клиенты: таблица ---------- */
body.desk.sq-twocol #view .searchbar { margin-bottom: 0; }
.sq-thead, body.desk #client-list .lrow.cl { display: grid; grid-template-columns: 30px minmax(150px, 1.1fr) minmax(0, 1.4fr) 110px 96px; align-items: center; column-gap: 12px; }
.sq-thead { padding: 14px 16px 6px; font-size: 12px; font-weight: 500; color: var(--muted); }
.sq-thead span:first-child { grid-column: 1 / 3; }
.sq-thead span:nth-child(3), .sq-thead span:nth-child(4) { text-align: right; }
body.desk #client-list .lrow.cl .lrow-main, body.desk #client-list .lrow.cl .lrow-side { display: contents; }
body.desk #client-list .lrow.cl .lrow-t { grid-column: 2; min-width: 0; }
body.desk #client-list .lrow.cl .lrow-s { grid-column: 3; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin: 0; }
body.desk #client-list .lrow.cl .lrow-side > span:first-child { grid-column: 5; grid-row: 1; text-align: right; font-size: 13px; color: var(--muted); }
body.desk #client-list .lrow.cl .lrow-side > .tagx { grid-column: 4; grid-row: 1; justify-self: end; }
body.desk #client-list .lrow.cl { cursor: pointer; }
body.desk #client-list .lrow.cl:hover { background: color-mix(in srgb, var(--chip) 60%, transparent); }
.sq-selrow, body.desk .lrow.sq-selrow, body.desk .card.lrow.sq-selrow { background: var(--sq-soft) !important; }
/* правая колонка */
.sq-pane { position: sticky; top: 0; align-self: start; max-height: calc(100dvh - 32px - 60px - 26px); overflow: auto; border-radius: 28px; min-width: 0; scrollbar-width: thin; }
.sq-pane[hidden] { display: none; }
.sq-pane-host { padding-bottom: 8px; }
.sq-pane .dark-blk:first-child, .sq-pane .card:first-child { margin-top: 0; }
body.desk:not(.sq-twocol) .sq-pane { display: none; }

/* ---------- Чаты ---------- */
body.desk.sq-split-chat .sq-pane { display: grid; grid-template-columns: minmax(0, 1fr); height: calc(100dvh - 32px - 60px - 140px); max-height: none; overflow: hidden; background: var(--card); box-shadow: inset 0 0 0 1px var(--sq-line-in), var(--sq-shadow); }
body.desk.sq-split-chat .sq-pane:has(.sq-scrside) { grid-template-columns: minmax(0, 1fr) 280px; }
body.desk.sq-split-chat .sq-pane-host { display: flex; flex-direction: column; min-height: 0; overflow: auto; padding: 12px 14px 0; }
body.desk.sq-split-chat .sq-pane-host .msgs { flex: 1; }
body.desk .sq-pane .composer, body.desk .sq-fw .composer { position: sticky; bottom: 0; left: auto; right: auto; width: auto; margin: 0 -14px; padding: 10px 14px 12px; background: var(--card); border-top: 1px solid var(--line); box-shadow: none; z-index: 2; }
body.desk .sq-pane .wa-head, body.desk .sq-fw .wa-head { box-shadow: none; background: var(--sq-field); }
.sq-scrside { border-left: 1px solid var(--line); overflow: auto; min-height: 0; }
.sq-scr { display: flex; flex-direction: column; gap: 8px; padding: 14px; }
.sq-scrh { display: flex; flex-direction: column; gap: 2px; padding: 2px 4px 6px; }
.sq-scrh b { font-size: 15px; font-weight: 600; }
.sq-scrh span { font-size: 12px; color: var(--muted); }
.sq-scri { display: flex; flex-direction: column; gap: 3px; text-align: left; padding: 10px 12px; border-radius: 16px; background: var(--sq-field); border: 0; font: inherit; color: inherit; cursor: pointer; transition: background .15s, transform .12s; }
.sq-scri:hover { background: var(--sq-soft); }
.sq-scri:active { transform: scale(.98); }
.sq-scri b { font-size: 13px; font-weight: 600; }
.sq-scri span { font-size: 12px; color: var(--ink-2); line-height: 1.4; }
.sq-fbtn { width: 34px; height: 34px; border-radius: 17px; display: inline-flex; align-items: center; justify-content: center; color: var(--ink-2); background: var(--chip); flex: none; margin-left: 8px; cursor: pointer; }
.sq-fbtn svg { width: 15px; height: 15px; }
.sq-fbtn:hover { background: var(--cta); color: var(--cta-ink); }
/* плавающие окна */
.sq-fw { position: fixed; z-index: 70; border-radius: 22px; background: var(--card); box-shadow: inset 0 0 0 1px var(--sq-line-in), 0 24px 60px rgba(17, 19, 24, 0.22); display: flex; flex-direction: column; overflow: hidden; resize: both; min-width: 300px; min-height: 300px; max-width: calc(100vw - 20px); max-height: calc(100vh - 20px); animation: sq-pop .25s var(--sq-ease); }
.sq-fw[hidden] { display: none; }
.sq-fwh { display: flex; align-items: center; gap: 8px; padding: 10px 10px 10px 12px; background: var(--sq-soft); cursor: move; user-select: none; touch-action: none; flex: none; }
.sq-fwh .ava { width: 30px; height: 30px; font-size: 11px; flex: none; }
.sq-fwh b { font-size: 14px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sq-fwb { width: 30px; height: 30px; border-radius: 15px; display: flex; align-items: center; justify-content: center; color: var(--ink-2); border: 0; background: none; cursor: pointer; flex: none; }
.sq-fwb svg { width: 15px; height: 15px; }
.sq-fwb:hover, .sq-fwb.on { background: var(--card); color: var(--ink); }
.sq-fwbody { flex: 1; min-height: 0; display: flex; }
.sq-fwmain { flex: 1; min-width: 0; overflow: auto; padding: 10px 14px 0; display: flex; flex-direction: column; }
.sq-fwmain .msgs { flex: 1; }
.sq-fwscr { width: 220px; border-left: 1px solid var(--line); overflow: auto; flex: none; }
.sq-fwscr[hidden] { display: none; }
.sq-fwscr .sq-scr { padding: 10px; }
.sq-dock { position: fixed; left: 50%; bottom: 16px; transform: translateX(-50%); display: flex; gap: 8px; padding: 6px; border-radius: 26px; z-index: 69; background: color-mix(in srgb, var(--card) 80%, transparent); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); box-shadow: inset 0 0 0 1px var(--sq-line-in), 0 12px 30px rgba(17, 19, 24, 0.15); max-width: calc(100vw - 40px); overflow-x: auto; }
.sq-dock[hidden] { display: none; }
.sq-dk { display: flex; align-items: center; gap: 8px; height: 40px; padding: 0 8px 0 7px; border-radius: 20px; background: var(--card); box-shadow: inset 0 0 0 1px var(--sq-line-in); font: inherit; font-size: 13px; font-weight: 600; white-space: nowrap; border: 0; color: var(--ink); cursor: pointer; }
.sq-dk .ava { width: 26px; height: 26px; font-size: 10px; }
.sq-dkx { width: 24px; height: 24px; border-radius: 12px; display: flex; align-items: center; justify-content: center; color: var(--muted); }
.sq-dkx svg { width: 12px; height: 12px; }
.sq-dkx:hover { background: var(--chip); color: var(--ink); }
.sq-dockhint { position: fixed; left: 0; right: 0; bottom: 0; height: 110px; background: linear-gradient(transparent, color-mix(in srgb, var(--accent) 60%, transparent)); pointer-events: none; z-index: 68; display: flex; align-items: flex-end; justify-content: center; padding-bottom: 22px; font-weight: 600; color: #111318; }

/* ---------- Настройки: рейка ---------- */
.sq-setgrid { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 14px; align-items: start; }
.sq-railbox { position: relative; width: 64px; align-self: stretch; }
.sq-rail { position: sticky; top: 0; width: 64px; display: flex; flex-direction: column; gap: 4px; padding: 8px; border-radius: 24px; background: var(--card); box-shadow: inset 0 0 0 1px var(--sq-line-in), var(--sq-shadow); overflow: hidden; z-index: 20; transition: width .25s cubic-bezier(.2, .8, .2, 1), box-shadow .25s; }
.sq-rail:hover, .sq-rail:has(:focus-visible) { width: 290px; box-shadow: inset 0 0 0 1px var(--sq-line-in), 0 24px 50px rgba(17, 19, 24, 0.16); }
.sq-rail .sq-rb { display: flex; align-items: center; justify-content: flex-start; gap: 10px; width: 100%; min-width: 0; height: 46px; padding: 0; border-radius: 23px; background: none; color: var(--ink-2); font-weight: 500; text-align: left; }
.sq-rail .sq-rb:hover { background: var(--chip); color: var(--ink); }
.sq-rail .sq-rb.on { background: var(--accent); color: #111318; }
.sq-rail .ri { width: 46px; height: 46px; flex: none; display: flex; align-items: center; justify-content: center; }
.sq-rail .ri svg { width: 19px; height: 19px; }
.sq-rail .rl { white-space: nowrap; font-size: 14px; opacity: 0; transition: opacity .15s; }
.sq-rail:hover .rl, .sq-rail:has(:focus-visible) .rl { opacity: 1; transition-delay: .08s; }
.sq-setbody { min-width: 0; max-width: 980px; }
.sq-setbody > .view-host > .grp:first-child { padding-top: 0; }

/* ---------- Мобильные блоки внутри панели: чуть плотнее и шире ---------- */
body.desk .grp { padding: 18px 6px 8px; }
body.desk .lst, body.desk .card, body.desk .kvl { box-shadow: inset 0 0 0 1px var(--sq-line-in), var(--sq-shadow); }
body.desk .lrow { cursor: pointer; }
body.desk .lrow:hover { background: color-mix(in srgb, var(--chip) 45%, transparent); }
body.desk div.lrow:not([data-open]):not([data-client]):hover { background: none; }
body.desk .searchbar { max-width: 640px; }
body.desk .web-login { max-width: 420px; margin: 8vh auto 0; }

/* ---------- Переключатель месяца и фильтры в разделах ---------- */
body.desk #view .month-switch { display: inline-flex; width: auto; align-items: center; gap: 4px; padding: 4px; margin: 0 8px 14px 0; border-radius: 24px; background: var(--card); box-shadow: inset 0 0 0 1px var(--sq-line-in); vertical-align: top; }
body.desk #view .month-switch .icon-btn { width: 36px; height: 36px; border-radius: 18px; box-shadow: none; background: var(--chip); }
body.desk #view .month-switch .icon-btn svg { width: 17px; height: 17px; }
body.desk #view .month-switch .m { min-width: 150px; font-size: 14px; padding: 0 8px; }
body.desk #view .month-switch + .pills { display: inline-flex; width: auto; margin: 0 0 14px !important; padding: 4px; gap: 2px; border-radius: 24px; background: var(--card); box-shadow: inset 0 0 0 1px var(--sq-line-in); vertical-align: top; overflow: visible; }
body.desk #view .month-switch + .pills .pill { height: 36px; border-radius: 18px; background: none; box-shadow: none; border: 0; padding: 0 14px; }
/* выбранный фильтр в разделах — акцентом (в шапке сегменты остаются чёрными) */
body.desk #view .pill.active, :root[data-theme="dark"] body.desk #view .pill.active { background: var(--accent); color: #111318; }
body.desk #view .seg-main button.active, body.desk #view .segmented button.active { background: var(--accent); color: #111318; }
/* воронка: толстые полосы акцентного цвета */
body.desk .funnel-bar { height: 26px; border-radius: 9px; background: var(--sq-track); margin-top: 6px; }
body.desk .funnel-bar i, :root[data-theme="dark"] body.desk .funnel-bar i { background: var(--accent); border-radius: 9px; }

/* ---------- Разделы карточками в колонки ---------- */
.sq-mas { column-gap: 14px; margin-top: 4px; }
.sq-mas.c2 { column-count: 2; }
.sq-mas.c3 { column-count: 3; }
.sq-mas.cg3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 14px; align-items: start; }
.sq-mg { break-inside: avoid; display: flow-root; margin-bottom: 14px; }
.sq-mg > .section-head:first-child, .sq-mg > .grp:first-child { padding-top: 2px; margin-top: 0; }
.sq-mg .field input, .sq-mg .field select { width: 100%; }
@media (max-width: 1280px) { .sq-mas.c3 { column-count: 2; } .sq-mas.cg3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
body.desk #view .btn.block#q-save { width: auto; display: inline-flex; padding: 0 26px; margin: 0 0 8px auto; }
.sq-qsave { display: flex; justify-content: flex-end; margin: -4px 0 6px; }

/* ---------- График и выходные — как календарь ---------- */
.sq-sched { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(300px, 0.75fr); gap: 14px; align-items: start; }
.sq-sched > .sched-cal { margin: 0; padding: 18px 20px; }
.sq-schedr > *:first-child { margin-top: 0; padding-top: 4px; }
body.desk .sched-cal .sched-grid { gap: 6px; }
body.desk .sched-grid.head span { font-size: 12px; font-weight: 500; color: var(--muted); padding: 4px 0; }
body.desk .sched-grid.head span.we { color: var(--muted); opacity: 1; }
body.desk .sched-grid .sd.cal { min-height: 92px; height: auto; border-radius: 16px; background: var(--card); box-shadow: inset 0 0 0 1px var(--sq-line-in); padding: 8px; align-items: stretch; justify-content: flex-start; gap: 4px; text-align: left; outline: 0; }
body.desk .sched-grid .sd.cal:hover { background: var(--sq-soft); }
body.desk .sched-grid .sd.cal .n { font-size: 13px; font-weight: 600; }
body.desk .sched-grid .sd.cal.we .n { color: var(--muted); }
body.desk .sched-grid .sd.cal.today { box-shadow: inset 0 0 0 2px var(--ink); outline: 0; }
body.desk .sched-grid .sd.cal .who { flex-direction: column; justify-content: flex-start; align-items: stretch; gap: 3px; }
body.desk .sched-grid .sd.cal .who i { font-size: 11px; font-weight: 500; line-height: 1.2; padding: 3px 7px; border-radius: 8px; text-align: left; min-width: 0; }
body.desk .sched-grid .sd.cal .tag { align-self: stretch; font-size: 11px; font-weight: 500; padding: 3px 7px; border-radius: 8px; background: rgba(255, 255, 255, 0.5); text-transform: none; }
body.desk .sched-grid .sd.cal.off, body.desk .sched-grid .sd.cal.vacation, body.desk .sched-grid .sd.cal.sick { box-shadow: none; }
body.desk .sched-legend { justify-content: flex-start; margin-top: 14px; }

/* =========================================================================
   Разделы, собранные под компьютер (desk-views.js): плитки, таблицы, графики, формы
   ========================================================================= */
.sq-kpi { height: auto; }
.sq-kpi .muted { font-size: 14px; margin-top: 2px; }
.sq-delta { margin-top: 6px; font-size: 13px; font-weight: 500; color: var(--muted); }
.sq-delta.up { color: var(--green); }
.sq-delta.down { color: var(--rose); }
.sq-big.good, .sq-tbl .good { color: var(--green); }
.sq-tbl .hot { color: var(--rose); }
.sq-spl { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(320px, 0.9fr); gap: 14px; align-items: start; }
.sq-stack { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.sq-stack > .sq-card, .sq-spl > .sq-card { height: auto; }
.sq-pad { padding: 4px 20px 18px; }
.sq-subh { font-size: 12px; font-weight: 500; color: var(--muted); padding: 14px 16px 6px; border-top: 1px solid var(--line); }
.view-host > .sq-card + .sq-card, .view-host > .sq-card + .sq-hint { margin-top: 14px; }
.sq-chartbox { padding: 0 16px 14px; }
.sq-gridl { stroke: var(--line); stroke-width: 1; }
.sq-bar-acc { fill: var(--accent); }
.sq-bar-mute { fill: var(--sq-track); }
.sq-herocard { border-radius: 28px; background: var(--sq-hero); color: var(--sq-hero-ink); padding: 20px 22px; position: relative; overflow: hidden; }
.sq-herocard > * { position: relative; }
.sq-herocard b { font-size: 16px; font-weight: 600; }
.sq-herop { margin: 12px 0 0; font-size: 14px; color: var(--sq-hero-muted); }
.sq-planrow { margin-top: 14px; font-size: 14px; }
.sq-planrow .num { color: var(--sq-hero-muted); }
.sq-planrow .num b { color: var(--sq-hero-ink); font-size: 14px; }
.sq-hbar { height: 8px; border-radius: 4px; background: rgba(17, 19, 24, 0.1); overflow: hidden; margin-top: 8px; }
.sq-hbar i { display: block; height: 100%; border-radius: 4px; background: var(--sq-hero-ink); }
.sq-card .sq-hbar { background: var(--sq-track); }
.sq-card .sq-hbar i { background: var(--accent); }
:root[data-theme="dark"] .sq-card .sq-hbar i { background: color-mix(in srgb, var(--accent) 80%, #fff); }
:root[data-theme="dark"] .sq-herocard .sq-hbar { background: rgba(255, 255, 255, 0.14); }
.sq-hbar.thin { height: 5px; margin-top: 6px; }
.sq-btn.white { background: rgba(255, 255, 255, 0.75); color: #111318; }
:root[data-theme="dark"] .sq-btn.white { background: rgba(255, 255, 255, 0.14); color: #fff; }
.sq-stagebar { display: flex; height: 34px; border-radius: 12px; overflow: hidden; gap: 2px; }
.sq-stagebar > div { display: flex; align-items: center; justify-content: center; font-weight: 600; font-size: 13px; color: #111318; background: color-mix(in srgb, var(--accent) calc(var(--o) * 100%), var(--card)); min-width: 28px; }
.sq-legend { margin-top: 10px; font-size: 12px; color: var(--muted); }
.sq-fun { display: flex; flex-direction: column; gap: 8px; }
.sq-funrow { display: grid; grid-template-columns: 120px 1fr 32px; gap: 10px; align-items: center; font-size: 13px; }
.sq-funrow b { text-align: right; font-weight: 600; }
.sq-funtrack { height: 26px; border-radius: 9px; background: var(--sq-track); overflow: hidden; }
.sq-funtrack i { display: block; height: 100%; border-radius: 9px; background: var(--accent); }
/* таблица */
.sq-tw { overflow-x: auto; }
.sq-tbl { width: 100%; border-collapse: collapse; font-size: 14px; }
.sq-tbl th { font-size: 12px; font-weight: 500; color: var(--muted); text-align: left; padding: 10px 12px; white-space: nowrap; }
.sq-tbl td { padding: 12px; border-top: 1px solid var(--line); vertical-align: middle; }
.sq-tbl th:first-child, .sq-tbl td:first-child { padding-left: 20px; }
.sq-tbl th:last-child, .sq-tbl td:last-child { padding-right: 16px; }
.sq-tbl td b { font-weight: 600; }
.sq-tbl .r { text-align: right; white-space: nowrap; }
.sq-tbl .small { font-size: 13px; }
.sq-tbl tr.click { cursor: pointer; }
.sq-tbl tr.click:hover td { background: color-mix(in srgb, var(--chip) 60%, transparent); }
.sq-who { display: flex; align-items: center; gap: 10px; min-width: 0; }
.sq-who .ava, .sq-who .avatar { width: 34px; height: 34px; font-size: 12px; flex: none; }
.sq-who .t2 { display: flex; flex-direction: column; min-width: 0; }
.sq-who .t2 span { font-size: 12px; color: var(--muted); }
.sq-dotc { width: 6px; height: 6px; border-radius: 3px; background: currentColor; display: inline-block; margin-right: 6px; }
.sq-chev { width: 16px; height: 16px; }
/* сегменты внутри карточки (фильтры) — выбранный акцентом */
.sq-cseg { display: inline-flex; padding: 4px; border-radius: 22px; background: var(--chip); gap: 2px; }
.sq-cseg button { height: 32px; padding: 0 14px; border-radius: 16px; border: 0; background: none; font: inherit; font-size: 13px; font-weight: 500; color: var(--ink-2); cursor: pointer; white-space: nowrap; }
.sq-cseg button[aria-pressed="true"] { background: var(--accent); color: #111318; font-weight: 600; }
/* пустое состояние */
.sq-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 8px; padding: 44px 20px; color: var(--muted); }
.sq-ecirc { width: 56px; height: 56px; border-radius: 28px; background: var(--chip); color: var(--ink-2); display: flex; align-items: center; justify-content: center; margin-bottom: 4px; }
.sq-ecirc svg { width: 24px; height: 24px; }
.sq-empty b { color: var(--ink); font-size: 17px; font-weight: 600; }
.sq-empty span { font-size: 14px; max-width: 420px; }
.sq-empty .sq-btn { margin-top: 8px; }
/* формы */
.sq-inp { width: 100%; height: 48px; border-radius: 16px; background: var(--sq-field); border: 0; outline: 0; padding: 0 16px; font: inherit; font-size: 15px; color: var(--ink); }
.sq-inp:focus { box-shadow: inset 0 0 0 2px var(--ink); }
.sq-ta { height: auto; min-height: 150px; padding: 14px 16px; line-height: 1.5; resize: vertical; max-width: 760px; display: block; }
.sq-actions { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 10px; max-width: 760px; }
.sq-togrow { cursor: pointer; }
.sq-tog { appearance: none; -webkit-appearance: none; width: 44px; height: 26px; border-radius: 13px; background: var(--sq-track); position: relative; cursor: pointer; flex: none; margin: 0; transition: background .2s; }
.sq-tog::after { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 10px; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2); transition: transform .2s; }
.sq-tog:checked { background: var(--ink); }
.sq-tog:checked::after { transform: translateX(18px); }
.sq-row > .num { flex: none; }
#topbar .sq-dvbtn .sq-chev { margin-left: -2px; }

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

/* ---------- Страница проекта и карточка клиента: блоки — карточками с шапкой ---------- */
.sq-abs > .lst, .sq-abs > .card, .sq-abs > .kvl, .sq-abs > .list-card, .sq-abs > .timeline, .sq-details > .kvl { box-shadow: none !important; background: none !important; border-radius: 0 !important; margin: 0 !important; }
.sq-abs > .foot-note { padding: 0 16px 14px; }
.sq-ovl > .sq-card, .sq-ovr > .sq-card, .sq-ovr > .sq-mtiles { margin-bottom: 14px; }
.sq-ovl > .sq-card + .sq-card, .sq-ovr > .sq-card + .sq-card { margin-top: 0; }
.sq-details .kvr { align-items: center; gap: 12px; }
.sq-details .kvr > span:nth-child(2) { flex: 1; }
.sq-kvi { width: 30px; height: 30px; }
.sq-kvi svg { width: 15px; height: 15px; }
.sq-mtiles { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.sq-mtiles .sq-card { height: auto; text-align: left; }
.sq-mtiles .sq-big { font-size: 26px; margin-top: 2px; }
.sq-pane .hero.dark-blk { position: relative; background: var(--sq-hero); color: var(--sq-hero-ink); }
.sq-pane .hero.dark-blk .dk-sub, .sq-pane .hero.dark-blk .hero-stat span { color: var(--sq-hero-muted); }
.sq-clava { position: absolute; top: 20px; right: 22px; width: 46px; height: 46px; border-radius: 23px; background: linear-gradient(140deg, #b9cdb6, #6f8a74); color: #fff; font-weight: 600; font-size: 15px; display: flex; align-items: center; justify-content: center; }
.sq-pane .hero.dark-blk .hero-title { padding-right: 60px; }
.sq-pane .dk-btns { flex-wrap: wrap; gap: 8px; }
.sq-pane .dk-btn.sq-lbl, .sq-pane .dk-btn.main { height: 46px; font-size: 14px; }
.sq-pane .dk-btn.sq-lbl { width: auto; padding: 0 14px; gap: 8px; background: rgba(255, 255, 255, 0.75); color: #111318; flex: none; }
:root[data-theme="dark"] .sq-pane .dk-btn.sq-lbl { background: rgba(255, 255, 255, 0.14); color: #fff; }
.sq-pane .dk-btn.main { background: var(--cta); color: var(--cta-ink); white-space: nowrap; flex: none; width: auto; padding: 0 18px; }
.sq-pane .sq-abs .chev, .sq-pane .sq-abs .lrow > svg:last-child { display: none; }

/* ---------- 4.1.3: ровные колонки календаря, «Неделя» в маленьком виджете ---------- */
.sq-cal .cal-grid { grid-template-columns: repeat(7, minmax(0, 1fr)); }
.sq-cal .cal-day { min-width: 0; overflow: hidden; }
/* Виджет «Неделя» узкий (S/M) — дни списком: «пн 12 · события» в строку */
.sq-card:has(> .sq-week) { container-type: inline-size; }
@container (max-width: 640px) {
  .sq-week { grid-template-columns: 1fr; gap: 4px; }
  .sq-wday { min-height: 0; flex-direction: row; align-items: center; gap: 8px; padding: 8px 12px; border-radius: 12px; }
  .sq-wday b { flex: none; width: 46px; }
  .sq-wday span { -webkit-line-clamp: 1; flex: 1 1 0; min-width: 0; white-space: nowrap; text-overflow: ellipsis; display: block; }
  .sq-wday span.more, .sq-wday span.none { flex: none; }
  .sq-wday span + span:not(.more) { display: none; }
}
/* Узкий виджет (окно ~1200 px): заголовок в одну строку, низ карточки «Нужно решить» — в две строки */
.sq-ch h3 { white-space: nowrap; flex: none; }
.sq-card:has(.sq-deckw) { container-type: inline-size; }
.sq-card:has(.sq-deckw) .sq-ch { gap: 8px; }
.sq-card:has(.sq-deckw) [data-deck-count] { white-space: nowrap; }
@container (max-width: 320px) { .sq-card [data-deck-count] { display: none; } }
.sq-deckw { container-type: inline-size; }
@container (max-width: 380px) {
  .sq-deckw .dc-foot { flex-direction: column; align-items: stretch; gap: 8px; }
  .sq-deckw .dc-foot > span { white-space: normal; text-align: center; }
  .sq-deckw .dc-foot .cta-arrow { justify-content: space-between; max-width: none; width: 100%; }
}
/* Проект → «Деньги»: карточки 2×2, кнопки по ширине текста */
body.desk #money-pane.sq-money { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; align-items: start; }
body.desk #money-pane.sq-money > .sq-card { margin: 0; }
body.desk #money-pane.sq-money .sq-card > .pay-blk, body.desk #money-pane.sq-money .sq-card > .kvl, body.desk #money-pane.sq-money .sq-card > .lst { box-shadow: none; background: none; margin: 0; }
body.desk #money-pane.sq-money .pay-blk { padding: 0 16px 16px; }
body.desk #money-pane.sq-money .pay-acts { display: flex; justify-content: flex-start; gap: 8px; }
body.desk #money-pane.sq-money .pay-acts .lbtn { flex: none; width: auto; padding: 0 16px; }
body.desk #money-pane.sq-money .foot-note { padding: 0 16px 14px; }
@media (max-width: 1180px) { body.desk #money-pane.sq-money { grid-template-columns: 1fr; } }
/* Формы: колонка ≤760 px, одна главная кнопка внизу по ширине текста (без дубля «Далее/Сохранить» в шапке) */
body.desk #view > .view-host:has(> .wiz-nav), body.desk #view > .view-host:has(#tf-title), body.desk #view > .view-host:has(#cf-save), body.desk #view > .view-host:has(#pe-save) { max-width: 760px; }
body.desk .wiz-nav { justify-content: flex-start; }
body.desk .wiz-nav .btn.grow { flex: none; min-width: 220px; }
body.desk .wiz-nav #wz-back[style*="hidden"] { display: none; }
body.desk #hdr-save { display: none; }

/* =========================================================================
   4.2.0 — остальные разделы по прототипу (desk-views-2.js)
   ========================================================================= */
.sq-g2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; align-items: start; }
.sq-g3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; align-items: stretch; margin-bottom: 14px; }
.sq-g4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; align-items: stretch; }
.sq-g2 > .sq-card, .sq-g3 > .sq-card, .sq-g4 > .sq-card { height: auto; }
.sq-g3 > .sq-card, .sq-g3 > .sq-herocard { height: 100%; }
.sq-kpis.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.sq-mb { margin-bottom: 14px; }
.view-host .good, .sq-row .good { color: var(--green); }
.view-host .num.hot, .sq-row .hot { color: var(--rose); }
.w5 { font-weight: 500 !important; }
/* зелёный блок: подпись, крупная сумма, строки */
.sq-hm { font-size: 13px; font-weight: 500; color: var(--sq-hero-muted); }
.sq-herobig { font-size: 34px; font-weight: 600; letter-spacing: -0.04em; line-height: 1.1; margin-top: 4px; }
.sq-herodelta { margin-top: 6px; font-size: 13px; font-weight: 500; color: var(--sq-hero-muted); }
.sq-herocard.click { cursor: pointer; }
.sq-herokv { display: flex; gap: 28px; margin-top: 14px; }
.sq-herokv span { display: block; font-size: 12px; color: var(--sq-hero-muted); }
.sq-heroline { display: flex; justify-content: space-between; gap: 12px; padding: 9px 0; border-top: 1px solid rgba(17, 19, 24, 0.1); font-size: 14px; }
:root[data-theme="dark"] .sq-heroline { border-top-color: rgba(255, 255, 255, 0.12); }
.sq-heroline b { font-size: 14px; }
.sq-heroact { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.sq-inp.white { background: rgba(255, 255, 255, 0.7); margin-top: 14px; }
:root[data-theme="dark"] .sq-inp.white { background: rgba(255, 255, 255, 0.1); color: #fff; }
/* полосы «по статьям / источникам» */
.sq-bars { display: flex; flex-direction: column; gap: 12px; }
.sq-barrow .sq-row-sb { font-size: 14px; }
.sq-barl { display: flex; align-items: center; gap: 6px; min-width: 0; }
.sq-barrow b { font-weight: 600; font-size: 14px; }
.sq-legend2 { display: flex; gap: 14px; font-size: 12px; color: var(--muted); }
.sq-legend2 span { display: inline-flex; align-items: center; gap: 6px; }
.sq-legend2 i { width: 10px; height: 10px; border-radius: 3px; background: var(--sq-track); display: inline-block; }
.sq-legend2 i.acc { background: var(--accent); }
/* воронка: центрированные полосы этапов */
.sq-fstages { display: flex; flex-direction: column; gap: 10px; }
.sq-fstage { display: grid; grid-template-columns: 130px minmax(0, 1fr) 48px; gap: 12px; align-items: center; font-size: 14px; font-weight: 500; }
.sq-fstage > .muted { text-align: right; font-size: 13px; }
.sq-fbarw { display: flex; justify-content: center; }
.sq-fbar { height: 44px; border-radius: 14px; display: flex; align-items: center; justify-content: center; font-weight: 600; color: #111318; background: color-mix(in srgb, var(--accent) calc(var(--o) * 100%), var(--sq-track)); }
/* команда: карточки людей */
.sq-person { display: flex; flex-direction: column; gap: 12px; }
.sq-person .sq-who { align-items: center; }
.sq-person .sq-who .t2 { flex: 1; }
.sq-person .sq-who .t2 b { font-size: 15px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sq-person .sq-who .ava.lg { width: 48px; height: 48px; font-size: 16px; }
.sq-rate { flex: none; height: 30px; min-width: 30px; padding: 0 8px; border-radius: 15px; background: var(--chip); font-size: 13px; font-weight: 600; display: flex; align-items: center; justify-content: center; }
.sq-pills { display: flex; flex-wrap: wrap; gap: 6px; }
.sq-pbtns { display: flex; gap: 6px; margin-top: auto; }
.sq-pbtns .sq-btn { flex: 1; padding: 0 10px; }
/* график: неделя × сотрудники */
.sq-wtbl th.c, .sq-wtbl td.c { text-align: center; padding-left: 6px; padding-right: 6px; }
.sq-wtbl th.we { color: color-mix(in srgb, var(--muted) 70%, transparent); }
.sq-wtbl th.today { color: var(--ink); font-weight: 600; }
.sq-wtbl td.today { background: color-mix(in srgb, var(--accent) 14%, transparent); }
.sq-cell { border: 0; background: none; font: inherit; color: inherit; cursor: pointer; min-width: 84px; min-height: 34px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; }
.sq-cell:hover { background: var(--chip); }
.sq-cell:disabled { opacity: .5; }
.sq-work { font-size: 12px; color: var(--muted); }
.sq-icbtn { width: 44px; padding: 0 !important; justify-content: center; }
/* косяки и бонусы */
.sq-w80 { width: 84px; text-align: right; font-size: 13px; flex: none; }
.sq-row .ava { width: 34px; height: 34px; font-size: 12px; flex: none; }
/* регламенты */
.sq-regs { display: grid; grid-template-columns: minmax(260px, 340px) minmax(0, 1fr); gap: 14px; align-items: start; }
.sq-reglist .sq-row:first-child { border-top: 0; }
.sq-reglist .sq-row.sel { background: color-mix(in srgb, var(--accent) 22%, transparent); }
.sq-reglist .sq-row .t2 b { white-space: normal; }
.sq-doc { padding: 26px 30px; max-width: 760px; height: auto; }
.sq-doc h2 { margin: 4px 0 14px; font-size: 24px; font-weight: 600; letter-spacing: -0.03em; }
.sq-docbody { font-size: 15px; line-height: 1.6; color: var(--ink-2); max-width: 65ch; }
.sq-docbody h3 { margin: 18px 0 4px; font-size: 16px; font-weight: 600; color: var(--ink); }
.sq-docbody p { margin: 0 0 10px; }
.sq-docnote { margin-top: 14px; font-size: 13px; color: var(--muted); }
.sq-docact { display: flex; gap: 8px; align-items: center; margin-top: 22px; flex-wrap: wrap; }
.sq-docact .muted { display: inline-flex; align-items: center; gap: 6px; }
.sq-docact svg { width: 16px; height: 16px; }
/* калькулятор: позиции слева (мобильные блоки в карточках), итог справа */
.sq-calc { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(320px, 0.8fr); gap: 14px; align-items: start; }
.sq-calchero { position: sticky; top: 0; padding: 22px 24px; }
.sq-calchero .sq-herobig { font-size: 44px; margin: 4px 0 14px; }
.sq-est > .card { background: var(--card); border-radius: 24px; box-shadow: inset 0 0 0 1px var(--sq-line-in), var(--sq-shadow); margin: 0; padding: 6px 16px; }
.sq-est .calc-total { display: none !important; }
.sq-est .sq-abs > .card { padding: 0 16px 6px; }
.sq-est .calc-add { min-height: 56px; }
/* КП: настройки слева, документ справа */
.sq-offer { display: grid; grid-template-columns: minmax(300px, 420px) minmax(0, 1fr); gap: 14px; align-items: start; }
.sq-form { display: flex; flex-direction: column; gap: 12px; }
.sq-fld { display: flex; flex-direction: column; gap: 6px; font-size: 13px; color: var(--muted); }
.sq-fld2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.sq-ta.sm { min-height: 84px; }
.sq-qty { width: 64px; height: 36px; text-align: center; padding: 0 6px; flex: none; }
.sq-paperbox { background: var(--sq-field); box-shadow: none; padding: 24px; height: auto; position: sticky; top: 0; }
.sq-paper { max-width: 620px; margin: 0 auto; background: #fff; color: #111318; border-radius: 18px; padding: 36px 40px; box-shadow: 0 20px 50px rgba(17, 19, 24, 0.12); min-height: 360px; }
.sq-ph { display: flex; justify-content: space-between; gap: 16px; align-items: flex-start; }
.sq-pmeta { font-size: 12px; color: #62666f; }
.sq-ptitle { font-size: 24px; font-weight: 600; letter-spacing: -0.03em; margin-top: 6px; }
.sq-pbrand { text-align: right; font-weight: 600; }
.sq-pbrand small { display: block; font-size: 12px; font-weight: 400; color: #62666f; }
.sq-ptbl { width: 100%; border-collapse: collapse; margin-top: 26px; font-size: 14px; }
.sq-ptbl td { padding: 10px 0; border-top: 1px solid rgba(17, 19, 24, 0.08); }
.sq-ptbl td.num { text-align: right; white-space: nowrap; }
.sq-ptbl tr.disc td { color: #3f7a52; }
.sq-ptbl tr.tot td { border-top: 2px solid #111318; padding-top: 14px; font-weight: 600; }
.sq-ptbl tr.tot td.num { font-size: 22px; }
.sq-pnote { margin: 20px 0 0; font-size: 14px; color: #3a3d45; line-height: 1.5; }
.sq-pfoot { margin: 14px 0 0; font-size: 13px; color: #62666f; }
.sq-pempty { margin: 40px 0 0; color: #62666f; text-align: center; }
.sq-paperact { display: flex; justify-content: center; gap: 8px; margin-top: 18px; }
/* промокоды */
.sq-code { letter-spacing: 0.04em; }
/* скрипт продаж */
.sq-step { align-items: flex-start; padding-top: 14px; padding-bottom: 14px; }
.sq-step .t2 { gap: 6px; }
.sq-step .t2 b { white-space: normal; }
.sq-phrase { display: flex; align-items: flex-start; gap: 10px; width: 100%; text-align: left; border: 0; background: var(--sq-field); border-radius: 14px; padding: 10px 12px; font: inherit; font-size: 14px; line-height: 1.5; color: var(--ink-2); cursor: pointer; }
.sq-phrase svg { width: 15px; height: 15px; flex: none; margin-left: auto; margin-top: 3px; color: var(--muted); }
.sq-phrase:hover { filter: brightness(0.97); }
.sq-tip { font-size: 13px; color: var(--muted); padding-left: 10px; border-left: 2px solid var(--accent); }
.sq-stext { margin: 0; font-size: 14px; color: var(--ink-2); line-height: 1.5; white-space: normal; }
/* профиль */
.sq-profhead { display: flex; align-items: center; gap: 16px; margin-bottom: 18px; }
.sq-profhead .ava.xl { width: 72px; height: 72px; border-radius: 36px; font-size: 24px; }
.sq-profname { font-size: 24px; font-weight: 600; letter-spacing: -0.03em; }
.sq-tile { display: flex; flex-direction: column; gap: 4px; cursor: pointer; height: auto; }
.sq-tile .sq-sq { margin-bottom: 6px; }
.sq-tile b { font-size: 15px; font-weight: 600; }
.sq-row.danger, .sq-row.danger .t2 b { color: var(--rose); }
@media (max-width: 1280px) {
  .sq-g4 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .sq-calc, .sq-offer { grid-template-columns: minmax(0, 1fr) minmax(300px, 0.9fr); }
}
@media (max-width: 1180px) {
  .sq-g2, .sq-regs { grid-template-columns: minmax(0, 1fr); }
  .sq-g3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sq-g4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.sq-sq.sm { width: 30px; height: 30px; border-radius: 15px; }
.sq-sq.sm svg { width: 15px; height: 15px; }
.sq-wtbl td:first-child { min-width: 220px; }
.sq-person .sq-who .t2 span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sq-profgrid { align-items: start; }
.sq-profgrid > .sq-herocard { height: auto; }
.sq-regs > .sq-card { height: auto; }
/* Настройки: оставшиеся мобильные экраны внутри рейки */
body.desk .sq-setmob { max-width: 860px; }
body.desk .sq-setmob > .card, body.desk .sq-setmob > .sq-abs { margin-bottom: 12px; }
body.desk .sq-setmob #gear-list > .sq-abs { margin-bottom: 12px; }
body.desk .sq-setmob .btn.block, body.desk .sq-setmob > .btn, body.desk .sq-setmob .btn-main { width: auto; min-width: 220px; display: inline-flex; padding: 0 22px; }
body.desk .sq-setmob .card .btn.block { margin-top: 6px; }
body.desk .sq-setmob .card:has(> .field > [data-req]) { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 14px; }
body.desk .sq-setmob .card:has(> .field > [data-req]) > .btn { grid-column: 1 / -1; justify-self: start; }
.sq-narrow { max-width: 760px; }
.sq-done { font-weight: 500 !important; color: var(--muted); text-decoration: line-through; }

/* ---------- 4.2.1: разделы Цифр / Команды / Продаж — вкладками под заголовком ---------- */
body.desk #topbar .sq-gtabs { flex: 1 0 100%; order: 3; display: flex; gap: 6px; flex-wrap: wrap; margin-top: 4px; }
body.desk #topbar .sq-gtabs button { height: 38px; padding: 0 14px 0 12px; border-radius: 19px; border: 0; background: var(--card); box-shadow: inset 0 0 0 1px var(--sq-line-in); color: var(--ink-2); font: inherit; font-size: 13px; font-weight: 500; display: inline-flex; align-items: center; gap: 8px; cursor: pointer; white-space: nowrap; }
body.desk #topbar .sq-gtabs button svg { width: 16px; height: 16px; opacity: .75; }
body.desk #topbar .sq-gtabs button:hover { background: var(--chip); }
body.desk #topbar .sq-gtabs button[aria-current="page"] { background: var(--cta); color: var(--cta-ink); box-shadow: none; font-weight: 600; }
body.desk #topbar .sq-gtabs button[aria-current="page"] svg { opacity: 1; }

/* ---------- Полосы прокрутки: тонкие, в цвет темы ---------- */
body.desk, body.desk * { scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--ink) 18%, transparent) transparent; }
body.desk ::-webkit-scrollbar { width: 10px; height: 10px; }
body.desk ::-webkit-scrollbar-track { background: transparent; }
body.desk ::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--ink) 16%, transparent); border-radius: 10px; border: 3px solid transparent; background-clip: padding-box; }
body.desk ::-webkit-scrollbar-thumb:hover { background-color: color-mix(in srgb, var(--ink) 30%, transparent); }
body.desk ::-webkit-scrollbar-corner { background: transparent; }
/* Сводка дня: плашки «требует внимания» */
.sq-hattn { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; position: relative; }
.sq-hchip { height: 36px; padding: 0 6px 0 12px; border-radius: 18px; border: 0; background: rgba(255, 255, 255, 0.72); color: #111318; font: inherit; font-size: 13px; font-weight: 600; display: inline-flex; align-items: center; gap: 8px; cursor: pointer; }
.sq-hchip:hover { background: rgba(255, 255, 255, 0.9); }
.sq-hchip svg { width: 15px; height: 15px; }
.sq-hchip i { font-style: normal; min-width: 24px; height: 24px; padding: 0 7px; border-radius: 12px; background: #111318; color: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: 12px; }
:root[data-theme="dark"] .sq-hchip { background: rgba(255, 255, 255, 0.12); color: #fff; }
:root[data-theme="dark"] .sq-hchip i { background: var(--accent); color: #111318; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .sq-hchip { background: rgba(255, 255, 255, 0.12); color: #fff; } :root:not([data-theme="light"]) .sq-hchip i { background: var(--accent); color: #111318; } }
span.sq-rb { display: inline-flex; align-items: center; justify-content: center; }

/* 4.4.1 — имя и должность в карточке сотрудника: до 2 строк вместо обрезки */
.sq-person .sq-who { align-items: flex-start; }
.sq-person .sq-who .t2 b, .sq-person .sq-who .t2 > span { white-space: normal; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; overflow-wrap: anywhere; }
.sq-person .sq-who .t2 b { line-height: 1.25; }
.sq-person .sq-who .t2 > span { margin-top: 2px; line-height: 1.3; }

/* 4.4.1 — шапка переписки (имя клиента) не уезжает вверх; пустая правая колонка до выбора диалога */
body.desk.sq-split-chat .sq-pane-host .wa-head, body.desk .sq-fw .wa-head { position: sticky; top: -12px; z-index: 3; margin-top: 0; }
body.desk.sq-split-chat .sq-pane-host .wa-head { background: var(--card); box-shadow: 0 1px 0 var(--line); border-radius: 0; margin: -12px -14px 8px; padding: 12px 14px; }
.sq-pick { height: 100%; min-height: 260px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; text-align: center; color: var(--muted); padding: 24px; }
.sq-pick svg { width: 28px; height: 28px; opacity: .6; }
.sq-pick b { color: var(--ink); font-size: 16px; font-weight: 600; }
.sq-pick span { font-size: 13px; max-width: 280px; }

/* 4.4.1 — график: месяц календарём */
.sch-card { padding-bottom: 16px; }
.sch-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; padding: 0 16px; }
.sch-h { padding-bottom: 6px; }
.sch-h span { font-size: 12px; font-weight: 600; color: var(--muted); text-align: left; padding-left: 10px; }
.sch-h span.we { color: var(--rose); }
.sch-d { min-height: 96px; border: 0; border-radius: 14px; background: var(--sq-field); padding: 8px 8px 10px; display: flex; flex-direction: column; align-items: stretch; gap: 3px; text-align: left; font: inherit; color: var(--ink); cursor: pointer; transition: background .15s, box-shadow .15s; min-width: 0; }
.sch-d:hover { box-shadow: inset 0 0 0 1.5px var(--line-strong, rgba(17,19,24,.18)); }
.sch-d.we { background: color-mix(in srgb, var(--sq-field) 70%, transparent); }
.sch-d.past .sch-n { color: var(--muted); }
.sch-d.today { box-shadow: inset 0 0 0 2px var(--ink); }
.sch-n { font-size: 14px; font-weight: 600; margin-bottom: 2px; }
.sch-p { font-size: 12px; font-weight: 600; line-height: 1.2; padding: 3px 7px; border-radius: 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; background: var(--st-orange-bg); color: var(--st-orange); }
.sch-p.vac { background: color-mix(in srgb, var(--st-green) 16%, var(--card)); color: var(--st-green); }
.sch-p.sick { background: var(--st-red-bg); color: var(--st-red); }
.sch-more { font-size: 11px; color: var(--muted); padding-left: 2px; }
.sch-legend { display: flex; gap: 16px; padding: 14px 16px 0; font-size: 12px; color: var(--muted); }
.sch-legend i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 6px; vertical-align: -1px; background: var(--st-orange-bg); box-shadow: inset 0 0 0 1.5px var(--st-orange); }
.sch-legend i.vac { background: var(--st-green-bg); box-shadow: inset 0 0 0 1.5px var(--st-green); }
.sch-legend i.sick { background: var(--st-red-bg); box-shadow: inset 0 0 0 1.5px var(--st-red); }
/* 4.4.2 — плитки профиля: в строку, иконка слева, шеврон справа */
.sq-tile { flex-direction: row; align-items: center; gap: 12px; text-align: left; padding: 14px 16px !important; }
.sq-tile .sq-sq { margin: 0; flex: none; }
.sq-tile .t2 { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.sq-tile .t2 b { font-size: 15px; font-weight: 600; }
.sq-tile .t2 span { overflow-wrap: anywhere; }
.sq-tile > svg { flex: none; width: 18px; height: 18px; color: var(--muted); }
/* 4.4.2 — профиль на компьютере: одна колонка под аватаром; настройки и выход внизу, а не справа в углу */
.sq-profhead, .sq-profcol { max-width: 720px; }
.sq-profcol { display: flex; flex-direction: column; gap: 14px; margin-top: 16px; }
.sq-proftiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.sq-profcol > .sq-card { margin: 0; }
.sq-proft { min-width: 0; }
.sq-proft .muted { overflow-wrap: anywhere; }
.sq-prof { display: block; width: 100%; max-width: 720px; }
body.desk #client-list .lrow.cl .ava { width: 30px; height: 30px; font-size: 11px; grid-column: 1; background: hsl(var(--ava-h, 220) 60% 88%); color: hsl(var(--ava-h, 220) 45% 28%); }
/* 4.5.0 — колокольчик: последние уведомления */
.sq-bellmenu { width: 380px; max-height: 70vh; overflow: auto; }
.sq-bellibx { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); margin: 4px 0; }
.sq-ibxlist { box-shadow: none; background: none; border-radius: 0; }
.sq-ibxlist .lrow { min-height: 0; padding: 10px 12px; }
.sq-ibxlist .lrow-ico { width: 32px; height: 32px; }
/* 4.5.2 — колокольчик как везде: заголовок, список, «Все уведомления» */
.sq-bellmenu { padding: 6px 0; }
.sq-bellhead { display: flex; align-items: center; justify-content: space-between; padding: 8px 14px 10px; }
.sq-bellhead b { font-size: 16px; font-weight: 600; }
.sq-bellhead > span { display: flex; align-items: center; gap: 10px; }
.sq-bellhead .link-btn { font-size: 13px; }
.sq-ib-gear { width: 30px; height: 30px; border: 0; border-radius: 50%; background: none; color: var(--muted); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.sq-ib-gear:hover { background: var(--surface-2); color: var(--ink); }
.sq-ib-gear svg { width: 16px; height: 16px; }
.sq-bellibx { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); margin: 0; }
.sq-ib-empty { padding: 28px 14px; text-align: center; color: var(--muted); font-size: 14px; }
.sq-ib-all { display: block; width: 100%; padding: 12px 14px 6px; border: 0; background: none; font: inherit; font-size: 14px; font-weight: 600; color: var(--ink); text-align: center; cursor: pointer; }
.sq-ib-all:hover { text-decoration: underline; }
.sq-bellmenu .sq-bellhead .link-btn { width: auto; padding: 4px 8px; white-space: nowrap; border-radius: 10px; font-size: 13px; font-weight: 600; color: var(--ink-2); }
.sq-bellmenu .sq-ib-gear { width: 30px; height: 30px; padding: 0; justify-content: center; border-radius: 50%; }
.sq-bellmenu .sq-ib-all { display: block; width: 100%; padding: 12px 14px 8px; border-radius: 0; text-align: center; font-size: 14px; font-weight: 600; }
.sq-bellmenu .sq-ib-all:hover { background: none; text-decoration: underline; }
.sq-bellmenu .sq-ibxlist .lrow { border-radius: 0; align-items: flex-start; }
.sq-bellmenu .sq-ibxlist .lrow:hover { background: var(--chip); }
.sq-ibxlist .card.lrow { margin: 0; box-shadow: none; background: none; border-radius: 0; }

/* Статистика: откуда деньги */
.sq-revkpi { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin: 4px 0 14px; }
.sq-revkpi b { display: block; font-size: 20px; font-weight: 700; letter-spacing: -0.01em; }
.sq-revkpi span { display: block; font-size: 12px; color: var(--muted); margin-top: 2px; }
.sq-subl { font-size: 12px; font-weight: 500; color: var(--muted); margin: 4px 0 8px; }
.sq-revrow { display: grid; grid-template-columns: minmax(0, 1fr) minmax(80px, 140px) 52px; gap: 10px; align-items: center; font-size: 13px; padding: 5px 0; }
.sq-revrow > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sq-revrow b { text-align: right; font-weight: 600; }
.sq-revtrack { height: 10px; border-radius: 5px; background: var(--sq-track); overflow: hidden; }
.sq-revtrack i { display: block; height: 100%; border-radius: 5px; background: var(--accent); }
.sq-revlinks { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.sq-revpage { max-width: 860px; }
.sq-revpage .st-card { box-shadow: inset 0 0 0 1px var(--sq-line-in), var(--sq-shadow); }
.sq-colsep { margin: 10px 4px 2px; padding-top: 10px; border-top: 1px dashed var(--line); font-size: 12px; font-weight: 600; color: var(--muted); }

/* ИИ-ассистент — выезжающая панель справа */
.sq-aibtn.on { background: var(--accent); color: var(--accent-ink); }
.sq-aid { position: fixed; top: 16px; right: 16px; bottom: 16px; width: 420px; max-width: calc(100vw - 32px); z-index: 60; display: flex; flex-direction: column; background: var(--card); border-radius: 24px; box-shadow: inset 0 0 0 1px var(--line), 0 30px 80px rgba(17, 19, 24, 0.22); transform: translateX(calc(100% + 40px)); transition: transform 0.24s cubic-bezier(0.2, 0.8, 0.2, 1); }
.sq-aid.open { transform: none; }
.sq-aih { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 14px 14px 12px 20px; border-bottom: 1px solid var(--line); }
.sq-aih b { display: inline-flex; align-items: center; gap: 8px; font-size: 16px; }
.sq-aih b svg { width: 18px; height: 18px; }
.sq-aib { flex: 1; min-height: 0; overflow: hidden; padding: 0 14px; display: flex; flex-direction: column; }
.sq-aib .msgs { flex: 1; min-height: 0; overflow-y: auto; padding: 12px 2px 8px; margin: 0; }
.sq-aib .composer { position: relative; bottom: auto; left: auto; right: auto; width: auto; margin: 0 -14px; padding: 10px 14px 12px; background: var(--card); border-top: 1px solid var(--line); box-shadow: none; z-index: 2; border-radius: 0 0 24px 24px; }

/* Доска: дата съёмки, метка «Прошла» и кнопка «Отснято» */
.sq-kc > .sq-kd { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; color: var(--ink); }
.sq-kc > .sq-kd svg { width: 14px; height: 14px; color: var(--muted); }
.sq-kpills { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; min-width: 0; }
.sq-kpills .sq-pill { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sq-kbtn { height: 26px; padding: 0 10px; border-radius: 13px; border: 0; background: var(--ink); color: var(--card); font-size: 12px; font-weight: 600; cursor: pointer; }

/* Настройки: меню слева прокручивается само, страница при этом стоит на месте */
.sq-rail { max-height: calc(100vh - 120px); overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none; }
.sq-rail::-webkit-scrollbar { display: none; }

/* Логотип kök: синий на светлой теме, белый на тёмной */
.sq-bword { color: #163659; }
.sq-bmark { background: #163659; color: #fff; }
:root[data-theme="dark"] .sq-bword { color: #f1f2f4; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .sq-bword { color: #f1f2f4; } }

/* «Ссылка для клиента» в проекте: строка целиком — кнопка, не растягивается на всю ширину */
body.desk .pd-link-box { max-width: 420px; }
.pd-link { width: 100%; text-align: left; border: 0; font: inherit; color: inherit; cursor: pointer; }