/* ════════════════════════════════════════════════════════════════
   МПК — единая дизайн-система (светлая / тёмная тема)
   Подключать ПЕРВЫМ (до собственного styles.css приложения).
   Тему ставит сниппет (см. AGENT_BRIEF) через html[data-theme].
   Канон: N:\8. Разработка\mpk_portal\mpk-theme.css
   ════════════════════════════════════════════════════════════════ */
:root{
  --bg:#eef0f4; --card:#ffffff; --ink:#1d2330; --muted:#7a8396;
  --line:#e4e8f0; --soft:#f6f7fa;
  --red:#e1212a; --red-d:#b5161e;
  --good:#1d9e75; --good-bg:#d8f0e6;
  --info:#3b6fd4; --info-bg:#dde7fb;
  --warn:#e0951a; --warn-bg:#fbeccf;
  --danger:#e1212a;
  --radius:16px; --radius-sm:10px;
  --shadow:0 6px 22px rgba(20,30,60,.08);
  --font:"Segoe UI",system-ui,-apple-system,Roboto,Arial,sans-serif;
}
html[data-theme="dark"]{
  --bg:#11141b; --card:#1a1f29; --ink:#e7ebf3; --muted:#8b94a7;
  --line:#2a313f; --soft:#222836;
  --red:#ff4d57; --red-d:#e23b44;
  --good:#2bb88a; --good-bg:#143a2c;
  --info:#5b8def; --info-bg:#18243d;
  --warn:#e6ab3f; --warn-bg:#3a2f13;
  --shadow:0 6px 22px rgba(0,0,0,.45);
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--font);font-size:15px;line-height:1.45}
a{color:var(--info)}
h1,h2,h3{letter-spacing:-.3px}

/* ── контейнер ── */
.mpk-wrap{max-width:1200px;margin:0 auto;padding:20px}

/* ── шапка ── */
.mpk-top{display:flex;align-items:center;gap:16px;padding:13px 22px;background:var(--card);
  border-radius:var(--radius);box-shadow:var(--shadow);margin-bottom:18px}
.mpk-top .logo{height:30px;flex:none}
.mpk-top .ttl{font-weight:800;font-size:18px;letter-spacing:-.3px;line-height:1.1}
.mpk-top .ttl small{display:block;font-weight:600;font-size:11.5px;color:var(--muted);letter-spacing:0;text-transform:none}
.mpk-top .sp{flex:1}

/* ── карточка ── */
.mpk-card{background:var(--card);border-radius:var(--radius);box-shadow:var(--shadow);padding:18px 20px;margin-bottom:18px}
.mpk-card > h2{margin:0 0 14px;font-size:13px;text-transform:uppercase;letter-spacing:.5px;color:var(--muted);font-weight:700}

/* ── кнопки ── */
.mpk-btn{border:0;border-radius:var(--radius-sm);padding:9px 16px;font-size:14px;font-weight:700;cursor:pointer;
  background:var(--red);color:#fff;transition:background .15s;font-family:var(--font)}
.mpk-btn:hover{background:var(--red-d)}
.mpk-btn.ghost{background:var(--soft);color:var(--ink)}
.mpk-btn:disabled{opacity:.5;cursor:not-allowed}

/* ── таблица ── */
.mpk-table{width:100%;border-collapse:collapse;font-size:14px}
.mpk-table th{text-align:left;font-size:11.5px;text-transform:uppercase;letter-spacing:.3px;color:var(--muted);
  font-weight:700;padding:10px 12px;border-bottom:2px solid var(--line);background:var(--card)}
.mpk-table td{padding:10px 12px;border-bottom:1px solid var(--line)}
.mpk-table tbody tr:hover td{background:var(--soft)}

/* ── формы ── */
.mpk-input,.mpk-select{padding:10px 12px;border:1px solid var(--line);border-radius:var(--radius-sm);
  font-size:14px;background:var(--card);color:var(--ink);font-family:var(--font)}
.mpk-input:focus,.mpk-select:focus{outline:2px solid var(--info);outline-offset:0;border-color:transparent}

/* ── чипы ── */
.mpk-chip{display:inline-flex;align-items:center;gap:6px;padding:3px 10px;border-radius:999px;font-size:12.5px;font-weight:700}
.mpk-chip.good{background:var(--good-bg);color:var(--good)}
.mpk-chip.info{background:var(--info-bg);color:var(--info)}
.mpk-chip.warn{background:var(--warn-bg);color:var(--warn)}

/* ── тёмный скроллбар ── */
html[data-theme="dark"] ::-webkit-scrollbar{width:11px;height:11px}
html[data-theme="dark"] ::-webkit-scrollbar-thumb{background:#333b4a;border-radius:6px}
html[data-theme="dark"] ::-webkit-scrollbar-track{background:transparent}