/* Демо-система в конструкторе: окно браузера + «ваша система» внутри.
 *
 * Осознанно другой мир, чем сайт. Портал — тёмный, бирюзовый, с крупной
 * дисплейной типографикой; система — светлая, индиговая, плотная, со своей
 * сеткой и своим шрифтом. Контраст работает на смысл: человек видит не
 * «ещё один блок сайта», а продукт, который ему соберут.
 *
 * Палитра системы намеренно не совпадает с брендовой: индиго + фиалка,
 * статусы — зелёный, янтарь, малиновый. Всё внутри .win, наружу не течёт.
 */

.win {
  --i: #4F46E5;            /* основной акцент системы */
  --i-2: #6D5EF8;
  --i-soft: #EEF0FF;
  --vi: #7C3AED;
  --ok: #15A34A;
  --ok-soft: #E9F9EF;
  --warn: #D97706;
  --warn-soft: #FEF4E6;
  --bad: #E11D48;
  --bad-soft: #FFEEF2;
  --pg: #F6F7FB;           /* фон приложения */
  --cd: #FFFFFF;           /* карточка */
  --tx: #131A2B;
  --tx-2: #5B647A;
  --tx-3: #9AA3B7;
  --ln: #E7E9F2;
  --ap-sans: "Inter", system-ui, sans-serif;
  --ap-head: "Manrope", "Inter", system-ui, sans-serif;

  container-type: inline-size;
  min-width: 0;            /* окно никогда не шире отведённого ему места */
  position: relative; border-radius: 14px; overflow: hidden; background: #fff;
  box-shadow: 0 40px 80px -40px rgba(0, 0, 0, .75), 0 0 0 1px rgba(255, 255, 255, .07);
  font-family: var(--ap-sans); color: var(--tx);
  display: flex; flex-direction: column;
}

/* ── хром браузера ───────────────────────────────────────────────────────── */
.win-bar { display: flex; align-items: center; gap: 12px; padding: 9px 12px; background: #E9EBF2; border-bottom: 1px solid #DADDE8 }
.win-dots { display: flex; gap: 6px; flex: none }
.win-dots i { width: 11px; height: 11px; border-radius: 99px; background: #C6CAD8 }
.win-dots i:nth-child(1) { background: #F2695E }
.win-dots i:nth-child(2) { background: #F5BC4F }
.win-dots i:nth-child(3) { background: #61C554 }
.win-tab {
  display: flex; align-items: center; gap: 8px; background: #fff; border-radius: 8px 8px 0 0;
  padding: 7px 14px; margin-bottom: -10px; font-size: 12px; color: var(--tx-2); max-width: 260px;
  border: 1px solid #DADDE8; border-bottom: 0;
}
.win-tab b { width: 14px; height: 14px; border-radius: 4px; background: var(--i); color: #fff; font-size: 9px; display: grid; place-items: center; flex: none }
.win-tab span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.win-bar .sp { flex: 1 }
.win-full {
  flex: none; border: 1px solid #D2D6E4; background: #fff; border-radius: 7px; cursor: pointer;
  width: 30px; height: 28px; display: grid; place-items: center; color: var(--tx-2); transition: .18s;
}
.win-full:hover { border-color: var(--i); color: var(--i) }
.win-full svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.8 }

.win-nav { display: flex; align-items: center; gap: 8px; padding: 9px 12px; background: #fff; border-bottom: 1px solid var(--ln) }
.win-nav button {
  flex: none; width: 28px; height: 28px; border: 0; border-radius: 8px; background: transparent;
  color: var(--tx-2); cursor: pointer; display: grid; place-items: center; font-size: 14px; transition: .15s;
}
.win-nav button:hover:not(:disabled) { background: #F0F1F7; color: var(--tx) }
.win-nav button:disabled { color: #CBD0DE; cursor: default }
.win-url {
  flex: 1; display: flex; align-items: center; gap: 8px; min-width: 0;
  background: #F2F3F8; border-radius: 99px; padding: 7px 14px; font-size: 12px; color: var(--tx-2);
}
.win-url i { font-style: normal; font-size: 10px; color: var(--ok) }
.win-url span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.win-url b { color: var(--tx); font-weight: 500 }

/* полоска загрузки: короткая, только чтобы переход читался как переход */
.win-load { height: 2px; background: transparent; overflow: hidden }
.win-load.on::after { content: ''; display: block; height: 2px; width: 40%; background: linear-gradient(90deg, var(--i), var(--vi)); animation: winload .6s var(--ease, ease) }
@keyframes winload { from { transform: translateX(-100%) } to { transform: translateX(300%) } }

/* ── каркас приложения ───────────────────────────────────────────────────── */
.ap { display: grid; grid-template-columns: 208px minmax(0, 1fr); background: var(--pg); height: 560px; position: relative; min-width: 0; overflow: hidden }
.win.full .ap { height: calc(100vh - 104px) }

.ap-side { background: #0F1230; color: #C7CCE4; display: flex; flex-direction: column; padding: 14px 10px; gap: 4px; overflow-y: auto }
.ap-brand { display: flex; align-items: center; gap: 9px; padding: 4px 8px 14px; font-family: var(--ap-head); font-weight: 800; font-size: 14px; color: #fff }
.ap-brand i { width: 24px; height: 24px; border-radius: 7px; background: linear-gradient(135deg, var(--i), var(--vi)); display: grid; place-items: center; font-style: normal; font-size: 12px; flex: none }
.ap-nav { display: flex; flex-direction: column; gap: 2px }
.ap-nav button {
  display: flex; align-items: center; gap: 10px; width: 100%; text-align: left;
  background: transparent; border: 0; border-radius: 9px; padding: 9px 10px; cursor: pointer;
  font: inherit; font-size: 13px; color: #A9B0CE; transition: background .15s, color .15s;
}
.ap-nav button:hover { background: rgba(255, 255, 255, .06); color: #fff }
.ap-nav button.on { background: linear-gradient(135deg, var(--i), var(--vi)); color: #fff; font-weight: 600 }
.ap-nav svg { width: 15px; height: 15px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.7 }
.ap-nav .cnt { margin-left: auto; font-size: 10px; background: rgba(255, 255, 255, .12); border-radius: 99px; padding: 2px 7px }
.ap-nav button.on .cnt { background: rgba(255, 255, 255, .24) }
.ap-side .ap-hint { margin-top: auto; font-size: 11px; color: #6E769B; padding: 12px 10px 4px; line-height: 1.45 }

.ap-main { display: flex; flex-direction: column; min-width: 0 }
.ap-top { display: flex; align-items: center; gap: 12px; padding: 12px 18px; background: var(--cd); border-bottom: 1px solid var(--ln); min-width: 0 }
.ap-search { flex: 1 1 90px; min-width: 0; max-width: 320px; display: flex; align-items: center; gap: 8px; background: var(--pg); border: 1px solid var(--ln); border-radius: 9px; padding: 8px 12px }
.ap-search input { min-width: 0; border: 0; background: transparent; outline: 0; font: inherit; font-size: 13px; width: 100%; color: var(--tx) }
.ap-search svg { width: 14px; height: 14px; flex: none; stroke: var(--tx-3); fill: none; stroke-width: 1.8 }
.ap-top .sp { flex: 1 }
.ap-chip { font-size: 12px; color: var(--tx-2); border: 1px solid var(--ln); border-radius: 8px; padding: 7px 11px; background: var(--cd); cursor: pointer }
.ap-chip:hover { border-color: var(--i); color: var(--i) }
.ap-bell { position: relative; width: 32px; height: 32px; border: 1px solid var(--ln); border-radius: 9px; background: var(--cd); cursor: pointer; display: grid; place-items: center }
.ap-bell:hover { border-color: var(--i) }
.ap-bell svg { width: 15px; height: 15px; stroke: var(--tx-2); fill: none; stroke-width: 1.7 }
.ap-bell b { position: absolute; top: -5px; right: -5px; min-width: 16px; height: 16px; border-radius: 99px; background: var(--bad); color: #fff; font-size: 9px; display: grid; place-items: center; padding: 0 4px }
.ap-user { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--tx-2); flex: none }
.ap-user i { width: 30px; height: 30px; border-radius: 99px; background: linear-gradient(135deg, var(--i), var(--vi)); color: #fff; display: grid; place-items: center; font-style: normal; font-size: 11px; font-weight: 700 }

.ap-body { flex: 1; min-width: 0; overflow-y: auto; overflow-x: hidden; padding: 18px; display: flex; flex-direction: column; gap: 14px; scroll-behavior: smooth }
.ap-body::-webkit-scrollbar { width: 10px }
.ap-body::-webkit-scrollbar-thumb { background: #DDE0EC; border-radius: 99px; border: 3px solid var(--pg) }

/* заголовок страницы + подвкладки */
.ap-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap }
.ap-head h3 { font-family: var(--ap-head); font-size: 19px; font-weight: 800; letter-spacing: -.02em; color: var(--tx) }
.ap-head p { font-size: 12px; color: var(--tx-2); margin-top: 3px }
.ap-btn { border: 0; border-radius: 9px; background: var(--i); color: #fff; font: inherit; font-size: 13px; font-weight: 600; padding: 9px 15px; cursor: pointer; transition: background .15s }
.ap-btn:hover { background: var(--i-2) }
.ap-btn.ghost { background: var(--cd); border: 1px solid var(--ln); color: var(--tx-2) }
.ap-btn.ghost:hover { border-color: var(--i); color: var(--i) }
.ap-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--ln); margin-top: 2px }
.ap-tabs button {
  border: 0; background: transparent; font: inherit; font-size: 13px; color: var(--tx-2);
  padding: 9px 13px; cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.ap-tabs button:hover { color: var(--tx) }
.ap-tabs button.on { color: var(--i); border-bottom-color: var(--i); font-weight: 600 }

.ap-crumbs { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--tx-3) }
.ap-crumbs button { border: 0; background: none; font: inherit; color: var(--i); cursor: pointer; padding: 0 }
.ap-crumbs button:hover { text-decoration: underline }

/* ── кирпичики интерфейса ────────────────────────────────────────────────── */
.k-grid { display: grid; gap: 12px }
.k-4 { grid-template-columns: repeat(4, minmax(0, 1fr)) }
.k-3 { grid-template-columns: repeat(3, minmax(0, 1fr)) }
.k-2 { grid-template-columns: repeat(2, minmax(0, 1fr)) }
.k-21 { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr) }

.card2 { background: var(--cd); border: 1px solid var(--ln); border-radius: 12px; padding: 14px 16px }
.card2 > h4 { font-family: var(--ap-head); font-size: 13px; font-weight: 700; color: var(--tx); display: flex; align-items: center; justify-content: space-between; gap: 10px }
.card2 > h4 em { font-style: normal; font-size: 11px; font-weight: 500; color: var(--tx-3) }

.kpi small { display: block; font-size: 11px; color: var(--tx-2) }
.kpi b { display: block; margin-top: 5px; font-family: var(--ap-head); font-size: 21px; font-weight: 800; letter-spacing: -.02em }
.kpi .tr { display: inline-flex; align-items: center; gap: 4px; margin-top: 7px; font-size: 11px; border-radius: 99px; padding: 3px 8px }
.kpi .tr.up { background: var(--ok-soft); color: var(--ok) }
.kpi .tr.down { background: var(--bad-soft); color: var(--bad) }
.kpi .tr.flat { background: #F1F2F7; color: var(--tx-2) }

/* столбики */
.k-bars { display: flex; align-items: flex-end; gap: 7px; height: 108px; margin-top: 14px }
.k-bars i { position: relative; flex: 1; height: var(--h); min-height: 4px; border-radius: 5px 5px 0 0; background: #DFE2F5 }
.k-bars i.acc { background: linear-gradient(180deg, var(--i-2), var(--i)) }
.k-bars i em { position: absolute; left: 0; right: 0; bottom: -17px; text-align: center; font-style: normal; font-size: 10px; color: var(--tx-3) }
.k-bars + .k-legend { margin-top: 24px }
.k-legend { display: flex; gap: 14px; flex-wrap: wrap; font-size: 11px; color: var(--tx-2) }
.k-legend i { display: inline-block; width: 9px; height: 9px; border-radius: 3px; margin-right: 6px }

/* кольцо */
.k-ring { display: flex; align-items: center; gap: 16px; margin-top: 10px }
.k-ring svg { width: 92px; height: 92px; flex: none; transform: rotate(-90deg) }
.k-ring circle { fill: none; stroke-width: 12 }
.k-ring .val { position: relative }
.k-ring .lines { display: flex; flex-direction: column; gap: 7px; font-size: 12px; color: var(--tx-2) }
.k-ring .lines b { color: var(--tx) }

/* воронка */
.k-fun { display: flex; flex-direction: column; gap: 6px; margin-top: 10px }
.k-fun div { display: flex; align-items: center; gap: 10px; font-size: 12px }
.k-fun span { flex: none; width: 92px; color: var(--tx-2) }
.k-fun i { height: 22px; border-radius: 6px; background: linear-gradient(90deg, var(--i), var(--vi)); width: var(--w); opacity: var(--o, 1) }
.k-fun b { font-size: 11px; color: var(--tx-2); font-weight: 600 }

/* таблица */
.k-tbl { width: 100%; border-collapse: collapse; font-size: 12.5px; background: var(--cd); border: 1px solid var(--ln); border-radius: 12px; overflow: hidden }
.k-tbl th { text-align: left; font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--tx-3); font-weight: 600; padding: 10px 14px; background: #FAFBFF; border-bottom: 1px solid var(--ln) }
.k-tbl td { padding: 11px 14px; border-bottom: 1px solid var(--ln); color: var(--tx) }
.k-tbl tr:last-child td { border-bottom: 0 }
.k-tbl tbody tr.go { cursor: pointer; transition: background .14s }
.k-tbl tbody tr.go:hover { background: #F7F8FF }
.k-tbl .who { display: flex; align-items: center; gap: 9px }
.k-tbl .av { width: 26px; height: 26px; border-radius: 99px; display: grid; place-items: center; font-size: 10px; font-weight: 700; color: #fff; flex: none }
.k-tbl .mut { color: var(--tx-2); font-size: 11.5px }

.tag { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 600; border-radius: 99px; padding: 4px 10px; white-space: nowrap }
.tag.i { background: var(--i-soft); color: var(--i) }
.tag.ok { background: var(--ok-soft); color: var(--ok) }
.tag.warn { background: var(--warn-soft); color: var(--warn) }
.tag.bad { background: var(--bad-soft); color: var(--bad) }
.tag.gray { background: #F1F2F7; color: var(--tx-2) }

/* канбан */
.k-board { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; align-items: start }
.k-col { background: #EFF1F8; border-radius: 12px; padding: 10px; display: flex; flex-direction: column; gap: 8px; min-height: 150px }
.k-col > h5 { font-size: 11px; letter-spacing: .04em; text-transform: uppercase; color: var(--tx-2); display: flex; justify-content: space-between; align-items: center }
.k-col > h5 b { background: var(--cd); border-radius: 99px; padding: 2px 7px; font-size: 10px; color: var(--tx-2) }
.k-card { background: var(--cd); border: 1px solid var(--ln); border-radius: 10px; padding: 11px; cursor: pointer; transition: transform .16s, box-shadow .16s, border-color .16s }
.k-card:hover { transform: translateY(-2px); box-shadow: 0 8px 18px -10px rgba(20, 30, 80, .35); border-color: #C9CEEA }
.k-card b { display: block; font-size: 12.5px; font-weight: 600 }
.k-card p { font-size: 11.5px; color: var(--tx-2); margin-top: 4px }
.k-card .ft { display: flex; align-items: center; justify-content: space-between; margin-top: 9px; gap: 8px }
.k-card .av { width: 22px; height: 22px; border-radius: 99px; display: grid; place-items: center; font-size: 9px; font-weight: 700; color: #fff }

/* лента событий */
.k-feed { display: flex; flex-direction: column; gap: 0; margin-top: 8px }
.k-feed div { display: grid; grid-template-columns: 58px minmax(0, 1fr); gap: 12px; padding: 9px 0; border-top: 1px dashed var(--ln); font-size: 12px }
.k-feed div:first-child { border-top: 0 }
.k-feed time { color: var(--tx-3); font-size: 11px }
.k-feed p { color: var(--tx-2) }
.k-feed p b { color: var(--tx); font-weight: 600 }

/* календарь */
.k-cal { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px }
.k-day { background: var(--cd); border: 1px solid var(--ln); border-radius: 11px; padding: 9px; min-height: 128px; display: flex; flex-direction: column; gap: 6px }
.k-day > span { font-size: 10.5px; text-transform: uppercase; letter-spacing: .05em; color: var(--tx-3) }
.k-ev { border-radius: 8px; padding: 7px 8px; font-size: 11px; line-height: 1.3; cursor: pointer; border-left: 3px solid }
.k-ev.a { background: var(--i-soft); border-color: var(--i); color: #2C2A9C }
.k-ev.b { background: var(--ok-soft); border-color: var(--ok); color: #0E6B32 }
.k-ev.c { background: var(--warn-soft); border-color: var(--warn); color: #92500B }
.k-ev:hover { filter: brightness(.97) }

/* чек-лист задач */
.k-todo { display: flex; flex-direction: column; gap: 8px }
.k-todo label { display: flex; align-items: flex-start; gap: 11px; background: var(--cd); border: 1px solid var(--ln); border-radius: 10px; padding: 12px 14px; cursor: pointer; font-size: 12.5px; transition: border-color .15s, background .15s }
.k-todo label:hover { border-color: #C9CEEA }
.k-todo input { display: none }
.k-todo .bx { width: 19px; height: 19px; border: 1.5px solid #C6CBDD; border-radius: 6px; flex: none; display: grid; place-items: center; color: transparent; font-size: 11px; margin-top: 1px }
.k-todo input:checked + .bx { background: var(--ok); border-color: var(--ok); color: #fff }
.k-todo input:checked ~ .tx { text-decoration: line-through; color: var(--tx-3) }
.k-todo .tx b { display: block; font-weight: 600 }
.k-todo .tx span { display: block; font-size: 11.5px; color: var(--tx-2); margin-top: 3px }
.k-todo .tag { margin-left: auto; flex: none }

/* разговор */
.k-talk { display: flex; flex-direction: column; gap: 10px }
.k-talk div { display: flex; gap: 10px; font-size: 12.5px; line-height: 1.5 }
.k-talk em { flex: none; width: 74px; font-style: normal; color: var(--tx-3); font-size: 11.5px }
.k-talk q { quotes: none; background: #F4F5FA; border-radius: 10px; padding: 9px 12px }
.k-talk .me q { background: var(--i-soft); color: #2C2A9C }
.k-wave { display: flex; align-items: center; gap: 3px; height: 40px; margin-top: 6px }
.k-wave i { flex: 1; background: #D9DDF3; border-radius: 2px; height: var(--h) }
.k-wave i.acc { background: var(--i) }

/* оценки */
.k-score { display: flex; flex-direction: column; gap: 10px; margin-top: 10px }
.k-score > div { display: grid; grid-template-columns: minmax(0, 1fr) 108px 34px; gap: 10px; align-items: center; font-size: 12px }
.k-score i { display: block; height: 7px; border-radius: 99px; background: #EDEFF7; position: relative }
.k-score i::after { content: ''; position: absolute; inset: 0 auto 0 0; width: var(--w); border-radius: 99px; background: linear-gradient(90deg, var(--i), var(--vi)) }
.k-score b { text-align: right; font-size: 12px; color: var(--tx-2) }

/* документ: скан + распознанное */
.k-doc { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px }
.k-scan { background: #F4F5FA; border: 1px solid var(--ln); border-radius: 11px; padding: 16px; display: flex; flex-direction: column; gap: 7px; min-height: 210px }
.k-scan span { height: 8px; border-radius: 3px; background: #DFE2F0 }
.k-scan span.t { width: 45%; height: 12px; background: #C9CEE4 }
.k-scan span.s { width: 70% }
.k-scan span.hl { background: rgba(79, 70, 229, .28); box-shadow: 0 0 0 3px rgba(79, 70, 229, .1) }
.k-fields { display: flex; flex-direction: column; gap: 8px }
.k-field { display: flex; justify-content: space-between; gap: 12px; align-items: center; background: var(--cd); border: 1px solid var(--ln); border-radius: 9px; padding: 9px 12px; font-size: 12px }
.k-field span { color: var(--tx-2) }
.k-field b { font-weight: 600 }

/* правая панель-карточка */
.ap-drawer {
  position: absolute; top: 0; right: 0; bottom: 0; width: min(400px, 78%); background: var(--cd);
  border-left: 1px solid var(--ln); box-shadow: -24px 0 60px -30px rgba(15, 20, 60, .45);
  transform: translateX(102%); transition: transform .32s cubic-bezier(.22, .61, .36, 1);
  display: flex; flex-direction: column; z-index: 5;
}
.ap-drawer.on { transform: none }
.ap-drawer header { display: flex; align-items: flex-start; gap: 12px; padding: 15px 16px; border-bottom: 1px solid var(--ln) }
.ap-drawer header h4 { font-family: var(--ap-head); font-size: 15px; font-weight: 700 }
.ap-drawer header p { font-size: 11.5px; color: var(--tx-2); margin-top: 3px }
.ap-drawer .x { margin-left: auto; border: 0; background: #F2F3F8; border-radius: 8px; width: 28px; height: 28px; cursor: pointer; color: var(--tx-2); flex: none }
.ap-drawer .x:hover { background: #E7E9F3; color: var(--tx) }
.ap-drawer .bd { padding: 14px 16px; overflow-y: auto; display: flex; flex-direction: column; gap: 12px }

/* всплывающие уведомления */
.ap-toasts { position: absolute; right: 16px; bottom: 16px; display: flex; flex-direction: column; gap: 8px; z-index: 8; pointer-events: none }
.ap-toast {
  background: #12172E; color: #fff; border-radius: 11px; padding: 11px 15px; font-size: 12.5px;
  display: flex; align-items: center; gap: 10px; box-shadow: 0 18px 40px -20px rgba(0, 0, 0, .7);
  animation: toastIn .3s cubic-bezier(.22,.61,.36,1) both;
}
.ap-toast i { width: 18px; height: 18px; border-radius: 99px; background: var(--ok); display: grid; place-items: center; font-style: normal; font-size: 10px; flex: none }
@keyframes toastIn { from { opacity: 0; transform: translateY(12px) } to { opacity: 1; transform: none } }

/* панель уведомлений */
.ap-notes { position: absolute; top: 56px; right: 16px; width: 300px; background: var(--cd); border: 1px solid var(--ln); border-radius: 12px; box-shadow: 0 24px 50px -24px rgba(15, 20, 60, .4); z-index: 7; display: none; overflow: hidden }
.ap-notes.on { display: block; animation: toastIn .22s both }
.ap-notes h5 { font-size: 12px; padding: 12px 14px; border-bottom: 1px solid var(--ln); font-family: var(--ap-head) }
.ap-notes div { padding: 11px 14px; border-bottom: 1px solid var(--ln); font-size: 12px; color: var(--tx-2) }
.ap-notes div:last-child { border-bottom: 0 }
.ap-notes div b { display: block; color: var(--tx); font-weight: 600; margin-bottom: 2px }

/* пустой экран, пока не отмечены боли */
.ap-empty { display: grid; place-items: center; height: 100%; text-align: center; padding: 30px; color: var(--tx-2) }
.ap-empty b { display: block; font-family: var(--ap-head); font-size: 16px; color: var(--tx); margin-bottom: 8px }
.ap-empty span { font-size: 13px }

/* ── полноэкранный режим ─────────────────────────────────────────────────── */
.win.full {
  position: fixed; inset: 0; z-index: 200; border-radius: 0; height: 100vh;
  animation: winOpen .28s cubic-bezier(.22,.61,.36,1) both;
}
@keyframes winOpen { from { opacity: 0; transform: scale(.985) } to { opacity: 1; transform: none } }
body.win-open { overflow: hidden }
.win-esc { display: none }
.win.full .win-esc { display: inline; font-size: 11px; color: var(--tx-3); margin-right: 10px }

/* ── адаптив ─────────────────────────────────────────────────────────────
   Считаем по ширине окна системы, а не экрана: одно и то же окно живёт и
   врезкой на главной, и во весь экран — плотность должна меняться с ним. */
@container (max-width: 1000px) {
  .k-4 { grid-template-columns: repeat(2, minmax(0, 1fr)) }
  .k-21, .k-doc { grid-template-columns: minmax(0, 1fr) }
  .k-board { grid-template-columns: repeat(2, minmax(0, 1fr)) }
  .k-cal { grid-template-columns: repeat(3, minmax(0, 1fr)) }
  .ap { grid-template-columns: 176px minmax(0, 1fr) }
  .ap-nav button { font-size: 12.5px; padding: 8px 9px }
  .k-tbl .hide-s { display: none }
  .ap-search { max-width: 200px }
}
@container (max-width: 620px) {
  .ap { grid-template-columns: 58px minmax(0, 1fr) }
  .ap-brand span, .ap-nav button span, .ap-nav .cnt, .ap-side .ap-hint { display: none }
  .ap-nav button { justify-content: center; padding: 11px 0 }
  .k-3, .k-2, .k-board { grid-template-columns: minmax(0, 1fr) }
  .k-cal { grid-template-columns: repeat(2, minmax(0, 1fr)) }
  .ap-chip, .ap-user span { display: none }
  .ap-body { padding: 13px }
  .ap-drawer { width: 100% }
}
@media (max-width: 700px) {
  .ap { height: 440px }
  .win-tab { display: none }
  .win.full .ap { height: calc(100vh - 96px) }
}

/* Таблицы в узком окне: данные должны быть доступны, а не срезаны краем.
   Поэтому таблица живёт в своей горизонтальной прокрутке — как в любой
   нормальной системе, где колонок больше, чем ширины. */
.k-wrap { overflow-x: auto; border-radius: 12px; -webkit-overflow-scrolling: touch }
.k-wrap .k-tbl { min-width: 480px }
.k-wrap::-webkit-scrollbar { height: 8px }
.k-wrap::-webkit-scrollbar-thumb { background: #D8DCEA; border-radius: 99px }