/* Meric Feeds — светлая «стеклянная» тема кабинета.
   Кладётся в wwwroot/css/theme-glass.css и подключается в _Layout.cshtml
   ПОСЛЕ существующих стилей, чтобы перекрывать их.
   Классы намеренно с префиксом mf-, чтобы не конфликтовать с bootstrap. */

@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&display=swap');

:root {
  /* акцент */
  --mf-acc: #1f7ae0;
  --mf-acc-dark: #0f5fbd;
  --mf-acc-ink: #12558f;
  --mf-acc-deep: #0d4d86;

  /* текст */
  --mf-ink: #0f2340;
  --mf-ink-2: #25405c;
  --mf-ink-3: #3d5875;
  --mf-muted: #5a7391;
  --mf-muted-2: #6f8aa6;
  --mf-muted-3: #7d97b2;
  --mf-muted-4: #8ba3bd;

  /* статусы */
  --mf-ok: #0f9d70;
  --mf-warn: #c97a10;
  --mf-err: #e2574c;
  --mf-idle: #7d8fa3;
  --mf-ok-bg: rgba(15,157,112,.12);
  --mf-warn-bg: rgba(201,122,16,.13);
  --mf-err-bg: rgba(226,87,76,.13);
  --mf-idle-bg: rgba(125,143,163,.14);

  /* стекло */
  --mf-glass: rgba(255,255,255,.62);
  --mf-glass-soft: rgba(255,255,255,.55);
  --mf-glass-strong: rgba(255,255,255,.87);
  --mf-glass-bd: rgba(255,255,255,.9);
  --mf-blur: 18px;

  /* линии и подложки */
  --mf-line: rgba(31,122,224,.1);
  --mf-line-soft: rgba(31,122,224,.07);
  --mf-tint: rgba(31,122,224,.06);
  --mf-tint-2: rgba(31,122,224,.12);

  /* тени */
  --mf-sh-1: 0 4px 14px rgba(16,58,110,.07);
  --mf-sh-2: 0 10px 26px rgba(16,58,110,.08);
  --mf-sh-3: 0 20px 50px rgba(16,58,110,.2);
  --mf-sh-modal: 0 30px 70px rgba(16,58,110,.28);
  --mf-sh-acc: 0 8px 20px rgba(31,122,224,.34);

  /* радиусы */
  --mf-r-pill: 999px;
  --mf-r-sm: 11px;
  --mf-r-md: 14px;
  --mf-r-lg: 18px;
  --mf-r-xl: 20px;
  --mf-r-modal: 24px;
}

/* ── каркас страницы ───────────────────────────────────────────── */

body.mf {
  margin: 0;
  font-family: Manrope, system-ui, sans-serif;
  color: var(--mf-ink);
  font-feature-settings: 'tnum' 1;              /* табличные цифры */
  background:
    radial-gradient(900px 520px at 6% -8%,  rgba(120,190,255,.50), transparent 60%),
    radial-gradient(820px 500px at 94% 2%,  rgba(158,205,255,.42), transparent 62%),
    radial-gradient(760px 700px at 55% 104%, rgba(206,230,255,.60), transparent 65%),
    linear-gradient(180deg, #f4f9fe 0%, #e6effa 100%);
  background-attachment: fixed;
}
body.mf a { color: var(--mf-acc); text-decoration: none; }
body.mf a:hover { color: var(--mf-acc-dark); }

.mf-shell { min-height: 100vh; display: flex; }
.mf-main  { flex: 1; min-width: 1180px; display: flex; flex-direction: column; }
.mf-page  { padding: 18px 20px 32px; display: flex; flex-direction: column; gap: 12px; }

/* ── сайдбар ───────────────────────────────────────────────────── */

.mf-side {
  width: 242px; flex: 0 0 242px;
  padding: 16px 13px;
  display: flex; flex-direction: column; gap: 16px;
  /* меню стоит на месте, прокручивается только содержимое справа */
  position: sticky; top: 0; height: 100vh; overflow-y: auto;
  background: var(--mf-glass-soft);
  backdrop-filter: blur(var(--mf-blur));
  -webkit-backdrop-filter: blur(var(--mf-blur));
  border-right: 1px solid rgba(255,255,255,.8);
  box-shadow: 1px 0 26px rgba(16,58,110,.06);
}
.mf-side__group { font-size: 9.5px; font-weight: 800; letter-spacing: .1em; color: var(--mf-muted-4); padding: 12px 10px 5px; }
.mf-nav { display: flex; flex-direction: column; gap: 3px; }
.mf-nav a, .mf-nav button {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 11px;
  border: 1px solid transparent; border-radius: 12px;
  background: transparent; color: var(--mf-muted);
  font-size: 12.5px; font-weight: 600;
  cursor: pointer; text-align: left; transition: all .18s;
}
.mf-nav a:hover, .mf-nav button:hover { background: rgba(255,255,255,.85); color: var(--mf-acc-ink); }
.mf-nav a.active, .mf-nav button.active {
  background: linear-gradient(150deg, rgba(255,255,255,.95), rgba(255,255,255,.72));
  border-color: #fff; color: var(--mf-acc-deep); font-weight: 800;
  box-shadow: 0 6px 16px rgba(16,58,110,.12);
}
.mf-nav .count { margin-left: auto; font-size: 10.5px; font-weight: 700; color: var(--mf-muted); }

/* ── верхняя панель ────────────────────────────────────────────── */

.mf-top {
  position: sticky; top: 0; z-index: 30;
  display: flex; align-items: center; gap: 10px;
  padding: 11px 20px;
  background: rgba(255,255,255,.5);
  backdrop-filter: blur(var(--mf-blur));
  -webkit-backdrop-filter: blur(var(--mf-blur));
  border-bottom: 1px solid rgba(255,255,255,.75);
}
.mf-top__title { display: flex; flex-direction: column; line-height: 1.2; flex: 0 0 auto; white-space: nowrap; }
.mf-top__title b { font-size: 15.5px; font-weight: 800; letter-spacing: -.02em; }
.mf-top__title span { font-size: 11px; color: var(--mf-muted-2); font-weight: 500; }
.mf-top__right { display: flex; align-items: center; gap: 7px; margin-left: auto; }

/* ── кнопки: все скруглённые «пилюли» ──────────────────────────── */

.mf-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 14px;
  border-radius: var(--mf-r-pill);
  border: 1px solid var(--mf-glass-bd);
  background: rgba(255,255,255,.68);
  color: var(--mf-acc-ink);
  font-size: 12px; font-weight: 700; line-height: 1;
  cursor: pointer; box-shadow: 0 5px 15px rgba(16,58,110,.09);
  transition: all .18s;
}
.mf-btn:hover { background: #fff; transform: translateY(-1px); }
.mf-btn:active { transform: none; box-shadow: var(--mf-sh-1); }
.mf-btn:disabled { opacity: .5; cursor: default; transform: none; }

.mf-btn--primary {
  border-color: rgba(255,255,255,.55);
  background: linear-gradient(160deg, rgba(255,255,255,.34), rgba(255,255,255,.04)), var(--mf-acc);
  color: #fff;
  box-shadow: var(--mf-sh-acc), inset 0 1px 0 rgba(255,255,255,.5);
}
.mf-btn--primary:hover { background: linear-gradient(160deg, rgba(255,255,255,.34), rgba(255,255,255,.04)), var(--mf-acc); box-shadow: 0 12px 26px rgba(31,122,224,.42); transform: translateY(-1px); }

.mf-btn--danger { color: #a63b32; border-color: rgba(255,255,255,.75); background: rgba(255,255,255,.8); }
.mf-btn--sm { padding: 5px 12px; font-size: 11px; }
.mf-btn--icon { width: 30px; height: 30px; padding: 0; justify-content: center; }

/* группа фильтров-пилюль */
.mf-pills {
  display: inline-flex; gap: 4px; padding: 4px;
  border-radius: var(--mf-r-pill);
  background: var(--mf-glass-soft);
  border: 1px solid rgba(255,255,255,.85);
  box-shadow: var(--mf-sh-1);
}
.mf-pills > * {
  padding: 6px 13px; border-radius: var(--mf-r-pill);
  border: 1px solid transparent; background: transparent;
  color: var(--mf-muted); font-size: 11.5px; font-weight: 600; cursor: pointer;
}
.mf-pills > .active {
  background: rgba(255,255,255,.95); border-color: #fff;
  color: var(--mf-acc-deep); font-weight: 800;
  box-shadow: 0 5px 14px rgba(16,58,110,.14);
}

/* ── карточки и панели ─────────────────────────────────────────── */

.mf-card {
  padding: 15px 16px;
  border-radius: var(--mf-r-xl);
  /* без backdrop-filter: размытие на каждой панели заставляло браузер
     пересчитывать его при каждом кадре прокрутки — страница дёргалась.
     Плотность фона поднята, визуально стекло сохраняется. */
  background: rgba(255,255,255,.82);
  border: 1px solid var(--mf-glass-bd);
  box-shadow: var(--mf-sh-2);
}
.mf-card--flush { padding: 0; overflow: hidden; }
.mf-card__head { display: flex; align-items: center; gap: 10px; padding: 13px 16px; border-bottom: 1px solid var(--mf-line); }
.mf-card__title { font-size: 13px; font-weight: 800; }

.mf-kpi { display: grid; grid-template-columns: repeat(4, 1fr); gap: 11px; }
.mf-kpi .mf-card { padding: 14px 15px; }
.mf-kpi__label { font-size: 11px; color: var(--mf-muted-2); font-weight: 600; }
.mf-kpi__value { font-size: 25px; font-weight: 800; letter-spacing: -.03em; }
.mf-kpi__delta { font-size: 11px; font-weight: 700; }
.mf-kpi__note  { font-size: 10.5px; color: var(--mf-muted-4); margin-top: 3px; }

/* полоса-предупреждение */
.mf-alert {
  display: flex; align-items: center; gap: 11px;
  padding: 12px 15px; border-radius: 16px;
  background: linear-gradient(120deg, rgba(226,87,76,.10), rgba(255,255,255,.5));
  border: 1px solid rgba(226,87,76,.22);
  box-shadow: 0 8px 22px rgba(16,58,110,.07);
  font-size: 12.5px; font-weight: 700;
}
.mf-alert--warn { background: linear-gradient(120deg, rgba(201,122,16,.10), rgba(255,255,255,.5)); border-color: rgba(201,122,16,.22); }

/* ── таблицы (плотный режим) ───────────────────────────────────── */

.mf-table { display: flex; flex-direction: column; }
.mf-table__head, .mf-table__row { display: grid; gap: 9px; align-items: center; padding: 8px 15px; }
.mf-table__head {
  font-size: 9.5px; font-weight: 800; letter-spacing: .05em;
  color: var(--mf-muted-3); background: var(--mf-tint);
  border-bottom: 1px solid var(--mf-line);
  padding-top: 9px; padding-bottom: 9px;
}
.mf-table__row { border-bottom: 1px solid var(--mf-line-soft); font-size: 11.5px; transition: background .15s; }
.mf-table__row:nth-child(even) { background: rgba(255,255,255,.28); }
.mf-table__row:hover { background: rgba(31,122,224,.05); }
.mf-table__row.selected { background: rgba(31,122,224,.07); }
.mf-table__foot { display: flex; align-items: center; padding: 10px 15px; font-size: 11px; color: var(--mf-muted-2); font-weight: 600; }
.mf-num { font-weight: 700; }
.mf-mono { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 10.5px; color: var(--mf-muted-2); }

/* чекбокс строки */
.mf-check {
  width: 16px; height: 16px; padding: 0;
  border-radius: 6px; border: 1.5px solid rgba(31,122,224,.3);
  background: rgba(255,255,255,.8); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 9px; font-weight: 800;
}
.mf-check.on { background: var(--mf-acc); border-color: var(--mf-acc); }

/* ── бейджи статусов ──────────────────────────────────────────── */

.mf-badge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px; border-radius: var(--mf-r-pill);
  font-size: 11px; font-weight: 700; width: max-content;
}
.mf-badge::before { content: ''; width: 6px; height: 6px; border-radius: 99px; background: currentColor; }
.mf-badge--ok   { color: var(--mf-ok);   background: var(--mf-ok-bg); }
.mf-badge--warn { color: var(--mf-warn); background: var(--mf-warn-bg); }
.mf-badge--err  { color: var(--mf-err);  background: var(--mf-err-bg); }
.mf-badge--idle { color: var(--mf-idle); background: var(--mf-idle-bg); }
.mf-key { font-family: ui-monospace, Menlo, monospace; font-size: 10px; font-weight: 800; color: var(--mf-acc-ink); background: var(--mf-tint-2); padding: 4px 9px; border-radius: var(--mf-r-pill); }

/* ── полоса прогресса ─────────────────────────────────────────── */

.mf-bar { height: 5px; border-radius: 99px; background: var(--mf-tint-2); overflow: hidden; }
.mf-bar > i { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, var(--mf-acc), #6fbaff); }
.mf-bar--danger > i { background: linear-gradient(90deg, #e2574c, #f0a06a); }

/* ── поля ввода ───────────────────────────────────────────────── */

.mf-search {
  display: flex; align-items: center; gap: 8px;
  padding: 7px 13px; border-radius: var(--mf-r-pill);
  background: var(--mf-glass); border: 1px solid var(--mf-glass-bd);
  box-shadow: var(--mf-sh-1); width: 236px;
}
.mf-search input { border: none; background: transparent; font: inherit; font-size: 12px; color: var(--mf-ink); width: 100%; }
.mf-search input:focus { outline: none; }
.mf-input {
  width: 100%; padding: 11px 14px; border-radius: var(--mf-r-md);
  border: 1px solid rgba(31,122,224,.22); background: rgba(255,255,255,.9);
  font: inherit; font-size: 13px; color: var(--mf-ink);
}
.mf-input:focus { outline: none; border-color: var(--mf-acc); box-shadow: 0 0 0 3px rgba(31,122,224,.14); }
.mf-label { display: block; font-size: 11px; font-weight: 700; color: var(--mf-muted); margin-bottom: 6px; }
.mf-drop { height: 74px; border-radius: 13px; border: 1px dashed rgba(31,122,224,.28); background: rgba(255,255,255,.6); display: flex; align-items: center; justify-content: center; font-size: 11px; color: var(--mf-muted-4); }

/* ── модальное окно (заменяет вид существующего askConfirm) ────── */

.mf-overlay {
  position: fixed; inset: 0; z-index: 80;
  display: flex; align-items: center; justify-content: center;
  background: rgba(21,54,92,.28); backdrop-filter: blur(6px);
  animation: mf-fade .16s ease;
}
.mf-modal {
  width: 468px; padding: 21px; border-radius: var(--mf-r-modal);
  background: var(--mf-glass-strong); backdrop-filter: blur(26px);
  border: 1px solid rgba(255,255,255,.95); box-shadow: var(--mf-sh-modal);
  animation: mf-pop .2s ease;
}
.mf-modal__title { font-size: 15.5px; font-weight: 800; }
.mf-modal__text  { font-size: 12px; color: #4c6a89; line-height: 1.55; }
.mf-modal__foot  { display: flex; gap: 8px; }
.mf-modal__foot .mf-btn { padding: 12px 20px; font-size: 12.5px; }
.mf-modal__foot .mf-btn--primary { flex: 1; justify-content: center; font-weight: 800; }
.mf-note {
  display: flex; align-items: center; gap: 9px;
  padding: 11px 13px; border-radius: var(--mf-r-md);
  background: rgba(201,122,16,.1); border: 1px solid rgba(201,122,16,.22);
  font-size: 11px; color: #7a5a2a; line-height: 1.45;
}

/* ── тост ─────────────────────────────────────────────────────── */

.mf-toast {
  position: fixed; right: 20px; bottom: 20px; z-index: 90;
  display: flex; align-items: center; gap: 10px;
  padding: 12px 18px; border-radius: var(--mf-r-pill);
  background: rgba(255,255,255,.88); backdrop-filter: blur(20px);
  border: 1px solid rgba(255,255,255,.95); box-shadow: 0 16px 40px rgba(16,58,110,.2);
  font-size: 12px; font-weight: 700;
  animation: mf-pop .2s ease;
}
.mf-dot { width: 8px; height: 8px; border-radius: 99px; background: var(--mf-ok); box-shadow: 0 0 0 4px rgba(15,157,112,.16); }

/* ── прочее ───────────────────────────────────────────────────── */

@keyframes mf-pop  { from { opacity: 0; transform: translateY(10px) scale(.985); } to { opacity: 1; transform: none; } }
@keyframes mf-fade { from { opacity: 0; } to { opacity: 1; } }

body.mf ::-webkit-scrollbar { width: 10px; height: 10px; }
body.mf ::-webkit-scrollbar-thumb { background: rgba(31,122,224,.22); border-radius: 99px; border: 3px solid transparent; background-clip: content-box; }

/* Safari/Firefox без backdrop-filter: стекло становится плотнее, читаемость сохраняется */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .mf-card, .mf-side, .mf-top, .mf-modal, .mf-toast, .mf-btn { background: rgba(255,255,255,.94); }
}
@media (prefers-reduced-motion: reduce) {
  .mf-btn, .mf-nav a, .mf-nav button, .mf-table__row { transition: none; }
  .mf-modal, .mf-toast, .mf-overlay { animation: none; }
}
/* ════════════════════════════════════════════════════════════════
   Дополнения из EXAMPLES.md — классы, которых нет в базовой теме
   ════════════════════════════════════════════════════════════════ */

.mf-logo { width:31px; height:31px; border-radius:11px; display:flex; align-items:center; justify-content:center;
           color:#fff; font-weight:800; font-size:12.5px;
           background:linear-gradient(150deg, var(--mf-acc), #6fbaff); box-shadow:0 6px 14px rgba(31,122,224,.35); }
.mf-ellipsis { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.mf-thumb { width:34px; height:34px; border-radius:10px; display:flex; align-items:center; justify-content:center;
            background:rgba(31,122,224,.1); border:1px solid var(--mf-glass-bd); color:#5f8dbd; font-size:12px; overflow:hidden; }
.mf-thumb--empty { background:rgba(226,87,76,.1); color:var(--mf-err); }
.mf-thumb img { width:100%; height:100%; object-fit:cover; }
.mf-chip { display:inline-flex; align-items:center; gap:6px; padding:8px 13px; border-radius:var(--mf-r-pill);
           border:1px solid var(--mf-glass-bd); background:rgba(255,255,255,.7); color:var(--mf-muted);
           font-size:11px; font-weight:700; cursor:pointer; box-shadow:0 3px 10px rgba(16,58,110,.07); }
.mf-chip__box { width:13px; height:13px; border-radius:5px; border:1.5px solid rgba(31,122,224,.3);
                background:rgba(255,255,255,.9); display:flex; align-items:center; justify-content:center;
                color:#fff; font-size:8px; }
.mf-chip.on { background:rgba(31,122,224,.12); border-color:rgba(31,122,224,.25); color:var(--mf-acc-deep); }
.mf-chip.on .mf-chip__box { background:var(--mf-acc); border-color:var(--mf-acc); }
.mf-chip.on .mf-chip__box::after { content:'\2713'; }
.mf-check.on::after { content:'\2713'; }
.mf-bar--striped > i { background:repeating-linear-gradient(115deg, var(--mf-acc) 0 10px, #63b0ff 10px 20px);
                       background-size:28px 100%; animation:stripe 1s linear infinite; }
@keyframes stripe { from { background-position:0 0; } to { background-position:28px 0; } }
.mf-progress-note { font-size:10.5px; color:var(--mf-muted-3); font-weight:600; margin-top:6px; }
.mf-alert--ok { background:linear-gradient(120deg, rgba(15,157,112,.1), rgba(255,255,255,.5));
                border-color:rgba(15,157,112,.22); }
.mf-danger { padding:18px 19px; border-radius:var(--mf-r-xl);
             background:linear-gradient(140deg, rgba(226,87,76,.1), rgba(255,255,255,.55));
             border:1px solid rgba(226,87,76,.28); box-shadow:var(--mf-sh-2); }
.mf-danger__head { display:flex; align-items:center; gap:9px; font-size:14px; font-weight:800; }
.mf-danger__head i { color:var(--mf-err); font-size:16px; }
.mf-danger__head small { font-size:11px; font-weight:600; color:#7a4a45; }
.mf-overlay.danger .mf-btn--primary { background:#e2574c; box-shadow:0 8px 20px rgba(226,87,76,.34); }

/* ════════════════════════════════════════════════════════════════
   МОСТ: существующие классы кабинета (bootstrap + site.css) → стекло.
   Все страницы получают новый вид сразу; детальная переверстка идёт
   поверх, страница за страницей.
   ════════════════════════════════════════════════════════════════ */

body.mf .card-panel, body.mf .card {
  border-radius: var(--mf-r-xl) !important;
  background: rgba(255,255,255,.82) !important;
  border: 1px solid var(--mf-glass-bd) !important;
  box-shadow: var(--mf-sh-2) !important;
}
body.mf .card-panel { padding: 15px 16px; }
body.mf h4 { font-size: 16px; font-weight: 800; letter-spacing: -.02em; }
body.mf h5 { font-size: 14px; font-weight: 800; }
body.mf h6 { font-size: 13px; font-weight: 800; }
body.mf .text-muted, body.mf .small.text-muted { color: var(--mf-muted-2) !important; }

/* кнопки bootstrap → пилюли */
body.mf .btn {
  /* Скругление умеренное, а не «таблетка»: на кнопке в две строки полный радиус
     раздувает её в огромный овал — так и было на странице поставщиков. */
  border-radius: 12px;
  padding: 6px 12px;
  font-weight: 700; font-size: 12px;
  transition: all .18s; line-height: 1.3;
}
body.mf .btn-sm { padding: 4px 9px; font-size: 11px; border-radius: 10px; }
body.mf .btn-lg { padding: 9px 16px; font-size: 13px; border-radius: 13px; }
body.mf .btn:hover { transform: translateY(-1px); }
body.mf .btn-primary, body.mf .btn-success {
  border-color: rgba(255,255,255,.55);
  background: linear-gradient(160deg, rgba(255,255,255,.34), rgba(255,255,255,.04)), var(--mf-acc);
  color: #fff; box-shadow: var(--mf-sh-acc), inset 0 1px 0 rgba(255,255,255,.5);
}
body.mf .btn-primary:hover, body.mf .btn-success:hover { box-shadow: 0 12px 26px rgba(31,122,224,.42); }
body.mf .btn-outline-primary, body.mf .btn-outline-secondary, body.mf .btn-outline-success, body.mf .btn-light {
  border: 1px solid var(--mf-glass-bd);
  background: rgba(255,255,255,.68);
  color: var(--mf-acc-ink);
  box-shadow: 0 5px 15px rgba(16,58,110,.09);
}
body.mf .btn-outline-primary:hover, body.mf .btn-outline-secondary:hover, body.mf .btn-outline-success:hover, body.mf .btn-light:hover { background:#fff; color: var(--mf-acc-deep); }
body.mf .btn-danger, body.mf .btn-outline-danger {
  color: #a63b32; border: 1px solid rgba(226,87,76,.35);
  background: rgba(255,255,255,.8); box-shadow: 0 5px 15px rgba(16,58,110,.09);
}
body.mf .btn-danger:hover, body.mf .btn-outline-danger:hover { background: rgba(226,87,76,.1); color:#8f2f27; }

/* таблицы bootstrap → плотный режим */
body.mf .table { font-size: 11.5px; color: var(--mf-ink); margin-bottom: 0; --bs-table-bg: transparent; }
body.mf .table > thead th {
  font-size: 9.5px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase;
  color: var(--mf-muted-3); background: var(--mf-tint);
  border-bottom: 1px solid var(--mf-line); padding-top: 9px; padding-bottom: 9px;
}
body.mf .table td { border-color: var(--mf-line-soft); padding-top: 7px; padding-bottom: 7px; }
body.mf .table-striped > tbody > tr:nth-of-type(even) > * { background: rgba(255,255,255,.28); box-shadow: none; }
body.mf .table-hover > tbody > tr:hover > * { background: rgba(31,122,224,.05); box-shadow: none; }

/* бейджи bootstrap */
body.mf .badge { border-radius: var(--mf-r-pill); font-weight: 700; font-size: 10.5px; padding: 4px 10px; }
body.mf .badge.bg-success { background: var(--mf-ok-bg) !important; color: var(--mf-ok) !important; }
body.mf .badge.bg-danger  { background: var(--mf-err-bg) !important; color: var(--mf-err) !important; }
body.mf .badge.bg-warning { background: var(--mf-warn-bg) !important; color: var(--mf-warn) !important; }
body.mf .badge.bg-secondary, body.mf .badge.bg-light { background: var(--mf-idle-bg) !important; color: var(--mf-idle) !important; }
body.mf .badge.bg-primary { background: var(--mf-tint-2) !important; color: var(--mf-acc-deep) !important; }

/* формы */
body.mf .form-control, body.mf .form-select, body.mf textarea.form-control {
  border-radius: var(--mf-r-md);
  border: 1px solid rgba(31,122,224,.22);
  background: rgba(255,255,255,.9);
  font-size: 12.5px; color: var(--mf-ink);
}
body.mf .form-control:focus, body.mf .form-select:focus { border-color: var(--mf-acc); box-shadow: 0 0 0 3px rgba(31,122,224,.14); }
body.mf .input-group-text {
  border: 1px solid rgba(31,122,224,.22);
  background: var(--mf-tint); color: var(--mf-muted); font-size: 11.5px; font-weight: 600;
}
body.mf .input-group > :first-child { border-top-left-radius: var(--mf-r-md); border-bottom-left-radius: var(--mf-r-md); }
body.mf .input-group > :last-child { border-top-right-radius: var(--mf-r-md); border-bottom-right-radius: var(--mf-r-md); }
body.mf .form-check-input:checked { background-color: var(--mf-acc); border-color: var(--mf-acc); }

/* алерты bootstrap */
body.mf .alert { border-radius: 16px; font-size: 12.5px; font-weight: 600; }
body.mf .alert-success { background: linear-gradient(120deg, rgba(15,157,112,.1), rgba(255,255,255,.6)); border-color: rgba(15,157,112,.22); color: #0c6b4e; }
body.mf .alert-warning { background: linear-gradient(120deg, rgba(201,122,16,.1), rgba(255,255,255,.6)); border-color: rgba(201,122,16,.22); color: #7a5a2a; }
body.mf .alert-danger  { background: linear-gradient(120deg, rgba(226,87,76,.1), rgba(255,255,255,.6)); border-color: rgba(226,87,76,.22); color: #8f2f27; }
body.mf .alert-light, body.mf .alert-info { background: rgba(31,122,224,.06); border-color: rgba(31,122,224,.12); color: var(--mf-ink-3); }

/* прогресс bootstrap */
body.mf .progress { height: 6px; border-radius: 99px; background: var(--mf-tint-2); }
body.mf .progress-bar { background: linear-gradient(90deg, var(--mf-acc), #6fbaff); }
body.mf .progress-bar-striped { background-image: repeating-linear-gradient(115deg, var(--mf-acc) 0 10px, #63b0ff 10px 20px); background-size: 28px 100%; }

/* модалка bootstrap (askConfirm) */
body.mf .modal-content {
  border-radius: var(--mf-r-modal);
  background: var(--mf-glass-strong);
  backdrop-filter: blur(26px);
  border: 1px solid rgba(255,255,255,.95);
  box-shadow: var(--mf-sh-modal);
}
body.mf .modal-header, body.mf .modal-footer { border-color: var(--mf-line-soft); }
body.mf .modal-title { font-weight: 800; }
body.mf .modal-backdrop.show { opacity: 1; background: rgba(21,54,92,.28); }

/* тосты bootstrap */
body.mf .toast { border-radius: 16px; box-shadow: 0 16px 40px rgba(16,58,110,.2); }

/* пагинация */
body.mf .pagination .page-link { border-radius: var(--mf-r-pill); margin: 0 2px; border: 1px solid var(--mf-glass-bd); background: rgba(255,255,255,.68); color: var(--mf-acc-ink); font-size: 11.5px; font-weight: 700; }
body.mf .pagination .active > .page-link { background: var(--mf-acc); border-color: var(--mf-acc); color: #fff; }

/* моноширинные вставки */
body.mf code { color: var(--mf-acc-deep); }
body.mf pre { background: rgba(16,58,110,.05); border-radius: var(--mf-r-md); padding: 10px 12px; }

/* сайдбар: блок диска */
.mf-disk { padding: 11px 12px; border-radius: var(--mf-r-md); background: rgba(255,255,255,.55); border: 1px solid var(--mf-glass-bd); font-size: 10.5px; color: var(--mf-muted); }
.mf-disk b { color: var(--mf-ink-2); }

/* индикатор задач в топбаре */
.mf-tasks { display: inline-flex; align-items: center; gap: 7px; padding: 7px 13px; border-radius: var(--mf-r-pill); background: var(--mf-tint-2); color: var(--mf-acc-deep); font-size: 11px; font-weight: 700; }
.mf-tasks .pulse { width: 7px; height: 7px; border-radius: 99px; background: var(--mf-acc); animation: mfpulse 1.2s ease-in-out infinite; }
@keyframes mfpulse { 0%,100% { box-shadow: 0 0 0 0 rgba(31,122,224,.35); } 50% { box-shadow: 0 0 0 5px rgba(31,122,224,0); } }
.mf-avatar { width: 26px; height: 26px; border-radius: 99px; background: linear-gradient(150deg, var(--mf-acc), #6fbaff); color:#fff; display:flex; align-items:center; justify-content:center; font-size: 10.5px; font-weight: 800; }
.mf-profile { display: inline-flex; align-items:center; gap: 8px; padding: 5px 12px 5px 5px; border-radius: var(--mf-r-pill); background: rgba(255,255,255,.68); border: 1px solid var(--mf-glass-bd); box-shadow: var(--mf-sh-1); font-size: 11.5px; font-weight: 700; color: var(--mf-ink-2); }

/* футер */
.mf-footer { margin-top: auto; padding: 18px 20px 14px; font-size: 10.5px; color: var(--mf-muted-4); }

/* ── мобильная пригодность ─────────────────────────────────────── */
.mf-burger { display: none; }
@media (max-width: 900px) {
  .mf-main { min-width: 0; }
  .mf-side {
    position: fixed; top:0; bottom:0; left:0; z-index: 100;
    transform: translateX(-105%); transition: transform .22s ease;
    background: rgba(255,255,255,.96); width: 262px; overflow-y:auto;
  }
  body.mf.side-open .mf-side { transform: none; box-shadow: 0 0 60px rgba(16,58,110,.3); }
  .mf-burger { display: inline-flex; }
  .mf-kpi { grid-template-columns: repeat(2, 1fr) !important; }
  .mf-top { padding: 10px 12px; }
  .mf-search { display: none; }
  .mf-page { padding: 12px 10px 28px; }
  body.mf .btn, .mf-btn { min-height: 40px; }
  .table-responsive { overflow-x: auto; }
  body.mf .table > thead th { position: static; }
}

/* миниатюры в таблицах товаров */
body.mf .thumb { width:34px; height:34px; border-radius:10px; object-fit:cover;
                 border:1px solid var(--mf-glass-bd); background:rgba(31,122,224,.08); }
body.mf .mono { font-family:ui-monospace,Menlo,Consolas,monospace; font-size:10.5px; }
/* карточки-сетки списков */
.mf-grid2 { display:grid; grid-template-columns:repeat(2,1fr); gap:12px; align-items:start; }
@media (max-width:1100px){ .mf-grid2 { grid-template-columns:1fr; } }

/* 29.09 (владелец: «синий текст на синей кнопке не видно»): ссылка, оформленная кнопкой, наследовала цвет
   ссылки body.mf a — на синей кнопке текст пропадал. Правило для всех кнопок-ссылок кабинета. */
body.mf a.mf-btn { color: var(--mf-acc-ink); }
body.mf a.mf-btn:hover { color: var(--mf-acc-deep); }
body.mf a.mf-btn--primary, body.mf a.mf-btn--primary:hover, body.mf a.mf-btn--primary:focus { color: #fff; }
body.mf a.mf-btn--danger, body.mf a.mf-btn--danger:hover { color: #a63b32; }
body.mf a.btn-primary, body.mf a.btn-primary:hover, body.mf a.btn-success, body.mf a.btn-success:hover, body.mf a.btn-danger, body.mf a.btn-danger:hover { color: #fff; }
body.mf .mf-btn--primary .bi { color: inherit; }

/* дерево JSON (mf-jsontree.js) */
.jt-box { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 11px; line-height: 1.5; }
.jt-box details.jt > summary { cursor: pointer; list-style: none; user-select: none; }
.jt-box details.jt > summary::-webkit-details-marker { display: none; }
.jt-box details.jt > summary::before { content: "▸ "; color: var(--mf-muted-2); }
.jt-box details.jt[open] > summary::before { content: "▾ "; }
.jt-box .jt-leaf::before { content: "  "; white-space: pre; }
.jt-k { color: var(--mf-acc-ink); font-weight: 700; }
.jt-c { color: var(--mf-muted-2); }
.jt-m { color: var(--mf-muted-2); }
.jt-string { color: #2a6e2a; }
.jt-number { color: #b7500f; }
.jt-boolean, .jt-null { color: #7a4fb0; }
.jt-bar { margin-bottom: 4px; }

/* 29.09: справка «?» и статьи базы знаний */
.mf-help { display:inline-flex; align-items:center; justify-content:center; width:18px; height:18px; margin-left:6px; border-radius:99px;
  color: var(--mf-muted-2); background: rgba(31,122,224,.08); font-size:12px; vertical-align:middle; text-decoration:none; }
.mf-help:hover { color:#fff; background: var(--mf-acc); }
body.mf a.mf-help { color: var(--mf-muted-2); } body.mf a.mf-help:hover { color:#fff; }
h6 .mf-help, h4 .mf-help, .mf-top__title .mf-help { font-weight:400; }
.mf-help__modal { width: min(760px, 94vw); max-height: 88vh; display:flex; flex-direction:column; }
.mf-help__body { overflow:auto; flex:1; margin-top:8px; }
.kb-article { font-size:13px; line-height:1.55; color:#1f2d3d; }
.kb-article p { margin:0 0 8px; }
.kb-article h2.kb-h { font-size:17px; font-weight:800; margin:14px 0 6px; }
.kb-article h3.kb-h { font-size:14.5px; font-weight:800; margin:12px 0 4px; }
.kb-article h4.kb-h, .kb-article h5.kb-h { font-size:13px; font-weight:700; margin:10px 0 4px; }
.kb-article ul.kb-list, .kb-article ol.kb-list { margin:0 0 8px 18px; padding:0; }
.kb-article li { margin:2px 0; }
.kb-article code { font-family: ui-monospace, Menlo, Consolas, monospace; font-size:11.5px; background: rgba(31,122,224,.08); padding:1px 5px; border-radius:6px; }
.kb-article pre.kb-code { font-family: ui-monospace, Menlo, Consolas, monospace; font-size:11.5px; background: rgba(31,122,224,.06); padding:8px 10px; border-radius:10px; white-space:pre-wrap; }
.kb-article blockquote.kb-quote { border-left:3px solid #f5b74a; background:#fff6e0; padding:6px 10px; border-radius:8px; margin:6px 0 8px; }
.kb-article table.kb-table { border-collapse:collapse; width:100%; margin:6px 0 10px; font-size:12px; }
.kb-article table.kb-table th, .kb-article table.kb-table td { border-bottom:1px solid var(--mf-glass-bd); padding:4px 8px; text-align:left; vertical-align:top; }
.kb-article table.kb-table th { font-size:10.5px; text-transform:uppercase; letter-spacing:.4px; color: var(--mf-muted-2); }
.kb-article hr.kb-hr { border:0; border-top:1px solid var(--mf-glass-bd); margin:10px 0; }