/* Дизайн-проход v2: глубина, тёплые поверхности, акцентные полосы, пилюли-вкладки. Подключается после app.css и перекрывает базовые правила. */
:root { --r: 20px; --r2: 14px; --sh: 0 1px 2px rgba(70, 25, 25, .04), 0 6px 18px -6px rgba(70, 25, 25, .10), 0 18px 40px -24px rgba(70, 25, 25, .14); --sh-h: 0 2px 4px rgba(70, 25, 25, .05), 0 14px 30px -10px rgba(70, 25, 25, .18), 0 28px 60px -30px rgba(70, 25, 25, .22); }
:root[data-theme="cream"], :root:not([data-theme]) { --bg: #f6f1ea; --bg2: #ede6dc; --card: #fffdfa; --panel: #fffdfa; --line: rgba(80, 30, 30, .08); --line2: rgba(80, 30, 30, .16); }
.content { background: radial-gradient(900px 400px at 100% 0%, rgba(245, 184, 28, .10), transparent 60%), radial-gradient(700px 420px at 0% 100%, rgba(200, 16, 46, .06), transparent 60%), var(--bg); }
:root[data-theme="night"] .content, :root[data-theme="fire"] .content { background: radial-gradient(900px 400px at 100% 0%, rgba(245, 184, 28, .07), transparent 60%), var(--bg); }
.page { padding: 24px 28px 64px; }

/* рельс: активный пункт — объёмная пилюля, иконки в плашках */
.rail { padding: 16px 14px 14px; }
.brand { padding-bottom: 18px; }
.nav a { padding: 8px 10px; border-radius: 14px; gap: 12px; font-weight: 500; color: rgba(255, 241, 238, .8); }
.nav a svg { width: 32px; height: 32px; padding: 7px; border-radius: 10px; background: rgba(0, 0, 0, .14); transition: .15s; }
.nav a:hover svg { background: rgba(0, 0, 0, .24); }
.nav a.on { background: rgba(0, 0, 0, .26); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06), inset 0 0 0 1px rgba(0, 0, 0, .12); font-weight: 600; }
.nav a.on svg { background: var(--gold); color: #2a1200; box-shadow: 0 4px 12px -4px rgba(245, 184, 28, .8); }
.nav a.on::before { display: none; }
.nav .grp { padding: 16px 12px 8px; color: rgba(255, 241, 238, .42); }
.rail .foot { background: rgba(0, 0, 0, .16); border: 0; border-radius: 16px; padding: 12px 14px; margin-top: 8px; }
.rf-mut { margin-top: 8px; }
.topbar .search { background: rgba(0, 0, 0, .18); border-color: rgba(255, 255, 255, .08); }
.topbar .user { background: rgba(0, 0, 0, .14); }
.min .nav a svg { width: 36px; height: 36px; padding: 8px; }

/* заголовок страницы */
.phead { margin-bottom: 22px; align-items: center; }
.phead h1 { font-size: 26px; font-weight: 600; letter-spacing: -.02em; }
.phead p { margin-top: 4px; color: var(--ink3); }
.phead .btn.pri { height: 42px; padding: 0 18px; border-radius: 14px; }

/* карточки: тёплая поверхность, тонкая кромка, подъём при наведении */
.card { border-radius: var(--r); padding: 20px; border: 1px solid var(--line); box-shadow: var(--sh); transition: box-shadow .2s; position: relative; }
.card:hover { box-shadow: var(--sh-h); }
.card.p0 > .tw { border-radius: var(--r); }
.card > header, .ch { margin-bottom: 16px; }
.card h3, .ch h3 { font-size: 15px; font-weight: 600; letter-spacing: -.01em; display: flex; align-items: center; gap: 10px; }
.card h3::before, .ch h3::before { content: ""; width: 4px; height: 16px; border-radius: 3px; background: linear-gradient(180deg, var(--gold), var(--acc)); flex-shrink: 0; }
.card h3 small { font-weight: 500; color: var(--ink3); }
.card .more { font-weight: 600; padding: 6px 10px; border-radius: 10px; background: var(--acc-soft); }
.card .more:hover { background: color-mix(in srgb, var(--acc) 22%, transparent); color: var(--acc); }
.tipbox { border-radius: 16px; padding: 14px 16px; background: linear-gradient(135deg, var(--gold-soft), transparent 80%), var(--card); border: 1px solid rgba(245, 184, 28, .45); }
.tipbox.red { background: linear-gradient(135deg, var(--acc-soft), transparent 80%), var(--card); }

/* KPI-плашки: цветная полоса сверху, крупные цифры */
.kpis { border-radius: var(--r); box-shadow: var(--sh); background: var(--card); }
.kpi { padding: 18px 18px 16px; min-height: 118px; }
.kpi::before { content: ""; position: absolute; left: 18px; right: 18px; top: 0; height: 3px; border-radius: 0 0 4px 4px; background: var(--acc); opacity: .9; }
.kpi:nth-child(6n+2)::before { background: var(--gold); } .kpi:nth-child(6n+3)::before { background: var(--info); } .kpi:nth-child(6n+4)::before { background: var(--vio); } .kpi:nth-child(6n+5)::before { background: var(--ok); } .kpi:nth-child(6n)::before { background: var(--orange); }
.kpi .l { font-size: 10.5px; letter-spacing: .14em; font-weight: 600; margin-top: 4px; }
.kpi .l svg { width: 38px; height: 38px; padding: 9px; border-radius: 12px; top: 16px; right: 16px; }
.kpi .v { font-size: 28px; font-weight: 600; margin-top: 10px; }
.kpi .d { margin-top: 8px; }
.kpi.acc { background: linear-gradient(135deg, var(--acc-soft), transparent 60%); }
.kpi[data-href]:hover { background: linear-gradient(180deg, var(--hover), transparent); }
.kpis2 { border-radius: var(--r); box-shadow: var(--sh); }
.kpi2 { padding: 18px 18px 62px; }
.kpi2 .v { font-size: 30px; font-weight: 600; }
.kpi2 .ico { width: 38px; height: 38px; border-radius: 12px; }

/* кнопки и поля */
.btn { height: 40px; padding: 0 16px; border-radius: 13px; font-weight: 600; box-shadow: 0 1px 0 rgba(255, 255, 255, .5) inset, 0 1px 2px rgba(70, 25, 25, .06); background: var(--card); }
.btn:hover { transform: translateY(-1px); box-shadow: 0 1px 0 rgba(255, 255, 255, .5) inset, 0 6px 14px -6px rgba(70, 25, 25, .25); }
.btn.pri { background: linear-gradient(180deg, #ffd95e, #f0ae12); border-color: #d99c0c; color: #2a1200; box-shadow: 0 1px 0 rgba(255, 255, 255, .55) inset, 0 8px 18px -8px rgba(245, 184, 28, .9); }
.btn.red { background: linear-gradient(180deg, #ea3a52, #c8102e); border-color: #a60e26; color: #fff; box-shadow: 0 1px 0 rgba(255, 255, 255, .25) inset, 0 8px 18px -8px rgba(200, 16, 46, .8); }
.btn.ok { background: linear-gradient(180deg, #34c985, #1ea868); border-color: #178f58; color: #fff; }
.btn.ghost { box-shadow: none; background: transparent; } .btn.ghost:hover { transform: none; box-shadow: none; }
.btn.sm { height: 32px; border-radius: 10px; }
.inp, select.inp, textarea.inp { height: 40px; border-radius: 12px; background: var(--inp); border: 1px solid var(--line2); box-shadow: inset 0 1px 2px rgba(70, 25, 25, .05); padding: 0 13px; }
textarea.inp { height: auto; padding: 10px 13px; }
.inp:focus { border-color: var(--gold); box-shadow: 0 0 0 4px var(--gold-soft), inset 0 1px 2px rgba(70, 25, 25, .04); }
label.f > span { font-size: 10.5px; letter-spacing: .1em; color: var(--ink3); }
.form { gap: 14px 16px; }
.seg { border-radius: 13px; padding: 4px; background: var(--bg2); border: 0; }
.seg button, .seg a { padding: 7px 13px; border-radius: 10px; font-weight: 500; }
.seg .on { background: var(--card); box-shadow: 0 1px 3px rgba(70, 25, 25, .14), 0 3px 8px -3px rgba(70, 25, 25, .18); font-weight: 600; }
.filters { gap: 10px; }

/* вкладки — пилюли в плашке */
.tabs { border: 0; background: var(--bg2); border-radius: 14px; padding: 4px; gap: 2px; margin-bottom: 20px; width: max-content; max-width: 100%; }
.tabs a { padding: 8px 14px; border-radius: 11px; border: 0; margin: 0; font-weight: 500; color: var(--ink2); }
.tabs a:hover { color: var(--ink); background: rgba(255, 255, 255, .4); }
.tabs a.on { background: var(--card); color: var(--ink); font-weight: 600; box-shadow: 0 1px 3px rgba(70, 25, 25, .14), 0 3px 8px -3px rgba(70, 25, 25, .18); }
.tabs a.on svg { color: var(--acc); }
.tabs a em { background: var(--acc-soft); color: var(--acc); }
:root[data-theme="night"] .tabs a:hover, :root[data-theme="fire"] .tabs a:hover { background: rgba(255, 255, 255, .05); }

/* таблицы */
.tbl th { font-size: 10.5px; letter-spacing: .1em; padding: 12px 14px; background: var(--panel2); color: var(--ink3); border-bottom: 1px solid var(--line); }
.tbl td { padding: 12px 14px; }
.tbl tbody tr:hover { background: var(--gold-soft); }
.tbl tr.click:hover td:first-child { box-shadow: inset 3px 0 0 var(--gold); }
.card.p0 .tbl th:first-child, .card.p0 .tbl td:first-child { padding-left: 20px; } .card.p0 .tbl th:last-child, .card.p0 .tbl td:last-child { padding-right: 20px; }
.tbl tfoot td { background: var(--panel2); }

/* пилюли, аватары, прогресс, пустые состояния */
.pill { padding: 4px 10px; border-radius: 20px; font-weight: 600; letter-spacing: .01em; }
.ava { box-shadow: 0 0 0 2px var(--card), 0 2px 6px rgba(70, 25, 25, .2); }
.prog { height: 8px; background: var(--bg2); }
.empty { padding: 40px 10px; }
.empty svg { width: 52px; height: 52px; padding: 13px; border-radius: 16px; background: var(--bg2); opacity: 1; color: var(--ink3); }

/* ленты, списки */
.feed > a, .feed > div { padding: 11px 4px; border-radius: 12px; transition: background .12s; margin: 0 -4px; }
.feed > a:hover { background: var(--hover); }
.tchip { border-radius: 10px; width: 34px; height: 34px; }
.al { border-radius: 16px; padding: 13px 14px; }

/* заказы: дорожки и карточки */
.lane { border-radius: 20px; padding: 10px; background: var(--bg2); border: 0; box-shadow: inset 0 0 0 1px var(--line); }
.lane > header { padding: 8px 10px 14px; font-size: 13px; font-weight: 600; }
.lane > header em { background: var(--card); box-shadow: 0 1px 2px rgba(70, 25, 25, .1); }
.oc { border-radius: 16px; box-shadow: var(--sh); border-color: transparent; }
.oc:hover { box-shadow: var(--sh-h); transform: translateY(-2px); }
.oc header b { font-size: 15px; }
.oc footer { background: var(--panel2); }
.stc { border-radius: 18px; padding: 16px 18px; }
.stc .si { width: 46px; height: 46px; border-radius: 14px; font-size: 22px; background: var(--gold-soft); }
.stc.on { border-color: var(--gold); box-shadow: 0 0 0 4px var(--gold-soft), var(--sh); }
.tk { border-radius: 18px; box-shadow: var(--sh); border-color: transparent; }
.tk header { padding: 11px 14px; }
.intbar { border-radius: 20px; padding: 14px 18px; background: linear-gradient(135deg, var(--card), var(--panel2)); }
.intbar .im b { font-size: 19px; }

/* 3D-сцена и стеклянные панели */
.hero { border-radius: 24px; border: 0; box-shadow: var(--sh-h); }
.g31 > div:first-child { display: flex; } .g31 > div:first-child > .hero { flex: 1; height: auto; min-height: 520px; }
.glass { border-radius: 16px; }
.hero .ctrls button.on { box-shadow: 0 4px 12px -4px rgba(245, 184, 28, .9); }

/* модалки */
.modal { border-radius: 24px; border: 0; box-shadow: 0 40px 90px -30px rgba(40, 10, 10, .55), 0 0 0 1px var(--line); }
.modal > header { padding: 22px 22px 10px 26px; } .mbody { padding: 8px 26px 20px; } .modal footer { padding: 16px 22px; background: var(--panel2); border-radius: 0 0 24px 24px; }
.modal h3 { font-size: 18px; }
.mwrap.side .modal { border-radius: 26px 0 0 26px; } .mwrap.side .modal footer { border-radius: 0; }

/* канбан, чек-листы, меню, маркетинг, чат, прогноз */
.kcol { border-radius: 20px; background: var(--bg2); border: 0; box-shadow: inset 0 0 0 1px var(--line); }
.kc { border-radius: 16px; border-color: transparent; }
.kc:hover { box-shadow: var(--sh-h); transform: translateY(-1px); }
.mc { border-radius: 20px; border-color: transparent; }
.mc .mimg { height: 108px; font-size: 50px; background: linear-gradient(160deg, #fff5dc, #fde7c4); }
:root[data-theme="night"] .mc .mimg, :root[data-theme="fire"] .mc .mimg { background: linear-gradient(160deg, var(--panel2), var(--bg2)); }
.mc .mb .pr { font-size: 17px; }
.promo, .cour, .cust, .integ, .rolec { border-radius: 18px; border-color: transparent; box-shadow: var(--sh); transition: .15s; }
.promo:hover, .cour:hover, .cust:hover, .integ:hover { box-shadow: var(--sh-h); transform: translateY(-1px); border-color: transparent; }
.promo .pi { border-radius: 16px; background: linear-gradient(160deg, var(--gold-soft), var(--orange-soft)); }
.post { border-radius: 20px; border-color: transparent; }
.post .pimg { background: linear-gradient(145deg, #c8102e, #7a0f1d); }
.profile-h { border-radius: 24px; background: linear-gradient(135deg, #b5192e, #7a0f1d); box-shadow: var(--sh-h); }
.chan { border-radius: 14px; } .chan.on { background: var(--gold-soft); }
.msg .bub { border-radius: 18px 18px 18px 6px; box-shadow: var(--sh); border-color: transparent; }
.msg.me .bub { border-radius: 18px 18px 6px 18px; }
.chat-in .inp { height: 44px; border-radius: 14px; }
.fc-day { border-radius: 18px; border-color: transparent; background: var(--card); box-shadow: var(--sh); }
.fc-day.td { background: linear-gradient(160deg, var(--gold-soft), var(--card)); box-shadow: 0 0 0 2px var(--gold), var(--sh); }
.heat .hc { border-radius: 8px; }
.sched .cell { border-radius: 8px; }
.map { border-radius: 22px; border: 0; box-shadow: var(--sh); }
.stations { gap: 14px; }

/* KPI-плашки: число колонок по числу плашек — без одиноких плашек во втором ряду */
.kpis:has(> :nth-child(4):last-child) { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.kpis:has(> :nth-child(5):last-child) { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.kpis:has(> :nth-child(6):last-child) { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.kpis:has(> :nth-child(7):last-child), .kpis:has(> :nth-child(8):last-child) { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1500px) { .kpis:has(> :nth-child(6):last-child) { grid-template-columns: repeat(3, minmax(0, 1fr)); } .kpis:has(> :nth-child(5):last-child) { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
@media (max-width: 1250px) { .kpis:has(> :nth-child(5):last-child) { grid-template-columns: repeat(3, minmax(0, 1fr)); } .kpis:has(> :nth-child(4):last-child), .kpis:has(> :nth-child(7):last-child), .kpis:has(> :nth-child(8):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 901px) { .kpis .kpi:nth-child(n+2) { border-left: 1px solid var(--line); } .kpis:has(> :nth-child(6):last-child) .kpi:nth-child(n+4), .kpis:has(> :nth-child(5):last-child) .kpi:nth-child(n+4), .kpis:has(> :nth-child(7):last-child) .kpi:nth-child(n+5), .kpis:has(> :nth-child(8):last-child) .kpi:nth-child(n+5) { border-top: 1px solid var(--line); } }
@media (max-width: 1500px) { .kpis:has(> :nth-child(6):last-child) .kpi:nth-child(4), .kpis:has(> :nth-child(5):last-child) .kpi:nth-child(4) { border-left: 0; } }
@media (min-width: 1501px) { .kpis:has(> :nth-child(6):last-child) .kpi, .kpis:has(> :nth-child(5):last-child) .kpi { border-top: 0 !important; } }
@media (max-width: 900px) { .kpis:has(> :nth-child(n)) { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* вход: ПК — шесть ячеек под ввод с клавиатуры, телефон — кнопки с цифрами */
.lg-in.m-cells .pad, .lg-in.m-cells .dots { display: none; }
.lg-in.m-pad .cells { display: none; }
.cells { position: relative; display: flex; justify-content: center; gap: 12px; margin: 6px 0 8px; cursor: text; }
.cells i { width: 50px; height: 62px; border-radius: 16px; border: 1.5px solid rgba(255, 255, 255, .18); background: rgba(0, 0, 0, .18); display: grid; place-items: center; transition: border-color .15s, box-shadow .15s, background .15s; }
.cells i::after { content: ""; width: 12px; height: 12px; border-radius: 50%; background: #fff; transform: scale(0); transition: transform .15s; }
.cells i.on { border-color: rgba(245, 184, 28, .7); background: rgba(245, 184, 28, .12); } .cells i.on::after { transform: scale(1); }
.cells i.cur { border-color: var(--gold); background: rgba(0, 0, 0, .26); box-shadow: 0 0 0 4px rgba(245, 184, 28, .22); }
.cells i.cur:not(.on)::after { width: 2px; height: 26px; border-radius: 2px; background: var(--gold); transform: none; animation: blink 1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0 } }
.cells input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; border: 0; color: transparent; caret-color: transparent; font-size: 16px; }
.cells.shake { animation: shake .4s; }
.lg-in.m-cells .lg-s::after { content: " с клавиатуры"; }

/* ===== ПРАВИЛО: иконки без фона. Никаких плашек, кружков и подложек под иконками — только цвет контура ===== */
.nav a svg, .nav a:hover svg, .nav a.on svg { width: 22px; height: 22px; padding: 0; background: none !important; box-shadow: none !important; border-radius: 0; }
.nav a svg { color: rgba(255, 241, 238, .72); } .nav a:hover svg { color: #fff; }
.nav a.on svg { color: var(--gold); filter: drop-shadow(0 0 6px rgba(245, 184, 28, .55)); }
.min .nav a svg { width: 24px; height: 24px; padding: 0; }
.kpi .l svg, .kpi:nth-child(n) .l svg { width: 26px; height: 26px; padding: 0; background: none !important; border-radius: 0; top: 18px; right: 18px; }
.kpi2 .ico, .kpi2 .ico.m, .kpi2 .ico.a, .kpi2 .ico.v, .kpi2 .ico.r, .kpi2 .ico.i, .kpi2 .ico.o { background: none !important; width: 26px; height: 26px; }
.kpi2 .ico svg { width: 26px; height: 26px; }
.tchip:has(svg) { background: none !important; width: 28px; min-width: 28px; padding: 0; } .tchip svg { width: 22px; height: 22px; }
.feed .tchip:has(svg) { color: var(--acc); }
.empty svg { width: 44px; height: 44px; padding: 0; background: none !important; border-radius: 0; color: var(--ink3); opacity: .7; }
.stc .si, .promo .pi, .chan .ci, .tl .e .ic, .integ .ii:has(svg) { background: none !important; box-shadow: none !important; }
.stc .si { width: 40px; font-size: 30px; } .promo .pi { width: 44px; font-size: 34px; } .chan .ci { width: 30px; font-size: 22px; }
.ic svg, .btn svg, .tabs a svg, .seg svg { background: none; }
.al > svg:first-child { width: 22px; height: 22px; }
.topbar .ic svg, .topbar .search svg { width: 21px; height: 21px; }
.tabbar svg { width: 23px; height: 23px; }

/* ===================== МОБИЛЬНАЯ ВЕРСИЯ (телефон, ≤ 900 px) ===================== */
.chback { display: none; }
@media (max-width: 900px) {
  .page { padding: 14px 12px 92px; }
  .phead { gap: 10px; margin-bottom: 16px; } .phead h1 { font-size: 21px; } .phead p { font-size: 12.5px; }
  .phead > .btn, .phead > a.btn { flex: 1 1 auto; }
  .phead .seg { width: 100%; overflow-x: auto; flex-wrap: nowrap; scrollbar-width: none; } .phead .seg::-webkit-scrollbar { display: none; }
  /* KPI: всегда две колонки, без обрезанных цифр */
  .kpis, .kpis:has(> *) { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .kpis .kpi { border-left: 0 !important; border-top: 0 !important; min-height: 104px; padding: 14px 12px 12px; }
  .kpis .kpi:nth-child(2n) { border-left: 1px solid var(--line) !important; } .kpis .kpi:nth-child(n+3) { border-top: 1px solid var(--line) !important; }
  .kpis .kpi:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .kpi::before { left: 12px; right: 12px; }
  .kpi .l { padding-right: 30px; font-size: 9.5px; letter-spacing: .1em; } .kpi .l svg, .kpi:nth-child(n) .l svg { width: 20px; height: 20px; top: 14px; right: 12px; }
  .kpi .v { font-size: 21px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .kpi .v small { font-size: 11px; } .kpi .d { font-size: 11px; }
  .kpis2, .kpis2:has(> *) { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .kpis2 .kpi2:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .kpi2 .v { font-size: 21px; overflow: hidden; text-overflow: ellipsis; }
  /* вкладки, фильтры, поиск */
  .tabs { width: 100%; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; } .tabs::-webkit-scrollbar { display: none; }
  .filters .seg, .seg { max-width: 100%; overflow-x: auto; flex-wrap: nowrap; scrollbar-width: none; }
  .filters .inp, .page .row > input.inp, .page .row > .inp { min-width: 0 !important; width: 100% !important; flex: 1 1 100%; }
  .card { padding: 16px 14px; } .card > header { gap: 8px; }
  /* 3D-сцена */
  .g31 > div:first-child { display: block; }
  .g31 > div:first-child > .hero, .hero { height: min(74vh, 600px) !important; min-height: 420px; flex: none; border-radius: 20px; }
  .hero .hud { left: 10px; right: 10px; top: 10px; flex-direction: column; align-items: stretch; gap: 8px; }
  .hero .ttl { padding: 9px 12px; align-self: flex-start; } .hero .ttl b { font-size: 14px; } .hero .ttl small { font-size: 10.5px; }
  .hero .ctrls { margin-left: 0; max-width: 100% !important; flex-wrap: nowrap; overflow-x: auto; justify-content: flex-start; scrollbar-width: none; padding: 4px; }
  .hero .ctrls::-webkit-scrollbar, .hero .zones::-webkit-scrollbar { display: none; }
  .hero .ctrls button { height: 30px; padding: 0 11px; font-size: 12px; flex-shrink: 0; }
  .hero .zones { left: 10px; right: 10px; bottom: 10px; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; pointer-events: auto; }
  .hero .zones button { flex-shrink: 0; padding: 7px 11px; font-size: 11.5px; }
  .tdrawer { left: 10px; right: 10px; top: auto; bottom: 58px; width: auto; max-height: 52%; transform: translateY(12px); }
  .tdrawer.show { transform: none; }
  .hero .loading { font-size: 13px; }
  /* кухня, заказы */
  .stations { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .stc { padding: 12px; gap: 10px; min-width: 0; } .stc > div { min-width: 0; } .stc b { font-size: 12.5px; } .stc span { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .stc .si { width: 30px; font-size: 24px; } .stc .sn { font-size: 18px; }
  .intbar { gap: 10px; } .intbar .im { min-width: 30%; }
  /* клиенты */
  .cust { flex-wrap: nowrap; gap: 10px; padding: 11px; } .cust .cn { flex: 1; min-width: 0; }
  .cust .cn b, .cust .cn span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .cust > div[style*="min-width"] { min-width: 0 !important; } .cust > div:last-of-type, .cust > svg { display: none; }
  /* доставка: карта по ширине экрана */
  .map { min-height: 0; aspect-ratio: 4 / 3; width: 100%; }
  .cour { padding: 11px 12px; }
  /* аналитика: тепловая карта листается вбок внутри карточки */
  .card:has(.heat) { overflow-x: auto; } .heat { min-width: 560px; }
  .fcg { grid-template-columns: repeat(7, minmax(84px, 1fr)); overflow-x: auto; } 
  .hb { grid-template-columns: 1fr 76px; } .hb .ht { grid-column: 1 / -1; }
  /* чат: список каналов или переписка */
  .chatw { grid-template-columns: 1fr; height: calc(100dvh - var(--top) - 64px - env(safe-area-inset-bottom)); }
  .chatw .chat-l { display: flex; border-right: 0; }
  .chatw.has-ch .chat-l { display: none; } .chatw:not(.has-ch) .chat-r { display: none; }
  .chback { display: grid; margin-left: -6px; }
  .chat-h { padding: 10px 12px; gap: 8px; flex-wrap: nowrap; } .chat-h > div { min-width: 0; } .chat-h b, .chat-h span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .chat-h .btn, .chat-h .pill { display: none; }
  .msgs { padding: 12px; } .msg { max-width: 86%; }
  .quick { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding: 8px 12px 0; } .quick button { flex-shrink: 0; }
  .chat-in { padding: 10px 12px; }
  /* прочее */
  .profile-h { flex-direction: column; align-items: flex-start; padding: 18px; } .profile-h h2 { font-size: 19px; }
  .roles { grid-template-columns: 1fr; }
  .lanes > .lane { min-height: 0; }
  .mcards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } .mc .mimg { height: 84px; font-size: 40px; } .mc .mb { padding: 10px 11px 12px; } .mc .mb b { font-size: 12px; min-height: 30px; }
  .topbar .crumbs { font-size: 15px; }
}
@media (max-width: 1100px) { .g21, .g12, .g31 { grid-template-columns: minmax(0, 1fr); } .grid > * { min-width: 0; } .chatw { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 900px) { .g2, .g3, .g4, .form { grid-template-columns: minmax(0, 1fr); } .chat-l, .chat-r { min-width: 0; } }
@media (max-width: 900px) { .stc .sn { flex-shrink: 0; margin-left: auto; padding-left: 4px; } .stc { overflow: hidden; } }