/*
 * Тема PI-планирования — дизайн-система «PI-планирование» в фирменном стиле
 * «Газпром нефти» (Claude Design: artifact 3XqatoLPxNt62zYna4iLDu).
 *
 * Три слоя:
 *   1. Токены — светлая тема в :root, тёмная в [data-theme="dark"] (ставит
 *      theme.js до отрисовки; без выбора — как в системе).
 *   2. Компоненты системы — классы pi-* из components/bundle.css: AppHeader,
 *      Panel, DataTable, TreeTable, Tabs, Chip, Tag, Dialog, поля, кнопки.
 *   3. Совместимость — существующие классы страниц (.btn, .card, .panel,
 *      .tag, .chip, .tab, .lv, table.tree …) получают вид компонентов.
 *      Файл подключается ПОСЛЕ локального <style> страницы и перекрывает его.
 *
 * Цвета — «по открытым источникам», шрифты — временная замена: перед
 * внедрением сверить с брендбуком. Логотип не воспроизводится.
 */
@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@700;800&family=PT+Sans:wght@400;700&family=PT+Mono&display=swap");

/* ================================================================== */
/*  1. Токены                                                          */
/* ================================================================== */
:root {
  color-scheme: light;
  --brand-500: #1177c1;  --brand-600: #0d5f9c;  --brand-050: #e3eef9;
  --sky-200: #b4d2ee;    --on-brand: #ffffff;
  --accent-500: #f5821f; --on-accent: #1a0e00;
  --navy-900: #0a2240;   --navy-800: #16365e;   --on-navy: #ffffff;
  /* фирменные полосы — постоянные цвета, в тёмной теме не светлеют */
  --stripe-brand: #1177c1;
  --surface-100: #f4f7fb; --surface-200: #ffffff;
  --ink: #0a2240;        --ink-muted: #4a5a70;
  --border: #d3deea;     --border-control: #7a879c;
  --focus-ring: var(--brand-500);
  --danger-600: #b42318; --danger-050: #fff1f0; --on-danger: #ffffff;
  --success-600: #0b7a52; --success-050: #e7f6ef;
  --warning-600: #b54708; --warning-050: #fff6e5;
  --overlay: rgba(10,34,64,0.5);
  --table-head: #e9eef5; --row-hover: var(--surface-100); --row-selected: var(--brand-050);
  --row-epic: #f0f5fb;   --stage-cell: #dce9f6; --row-total: #e3e9f1;
  --cell-over: #fde3e0;  --field-readonly: #eef2f7;
  --shadow-card: 0 1px 2px rgba(10,34,64,0.06), 0 8px 24px rgba(10,34,64,0.10);
  --shadow-button: 0 2px 8px rgba(17,119,193,0.30);

  --font-sans: "PT Sans", "Segoe UI", system-ui, sans-serif;
  --font-display: Montserrat, "Segoe UI", system-ui, sans-serif;
  --font-mono: "PT Mono", ui-monospace, Consolas, monospace;
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px;
  --space-6: 24px; --space-8: 32px; --space-12: 48px;
  --radius-sm: 4px; --radius-md: 6px; --radius-lg: 12px; --radius-pill: 999px;

  /* переменные страниц → токены */
  --blue: var(--brand-500); --blue-d: var(--ink); --sub: var(--brand-500);
  --tot: var(--brand-050); --bg: var(--surface-100); --line: var(--border);
  --danger: var(--danger-600); --ok: var(--success-600); --warn: var(--warning-600);
  --accent: var(--accent-500);
}

/* Тёмная тема: значения токенов «Тёмная» из tokens.json. */
:root[data-theme="dark"] {
  color-scheme: dark;
  --brand-500: #5aa9e6;  --brand-600: #9ccbf2;  --brand-050: #16304f;
  --on-brand: #0a1020;
  --surface-100: #0b1626; --surface-200: #15243a;
  --ink: #eef3f9;        --ink-muted: #a3b3c7;
  --border: #243852;     --border-control: #5d7392;
  --danger-600: #ff8a80; --danger-050: #2a1416; --on-danger: #2a0a08;
  --success-600: #3fcf95; --success-050: #12281f;
  --warning-600: #ffc566; --warning-050: #2a2010;
  --overlay: rgba(0,0,0,0.6);
  --table-head: #1c2d45; --row-hover: #1a2940;
  --row-epic: #1a2b44;   --stage-cell: #1f3a5c; --row-total: #22385a;
  --cell-over: #3d1a1d;  --field-readonly: #1a2a42;
  --shadow-card: 0 1px 2px rgba(0,0,0,0.4), 0 8px 24px rgba(0,0,0,0.35);
  --shadow-button: 0 4px 12px rgba(0,0,0,0.4);
}

/* ================================================================== */
/*  2. Компоненты системы (components/bundle.css)                      */
/* ================================================================== */
body {
  margin: 0;
  background: var(--surface-100) !important;
  color: var(--ink) !important;
  font-family: var(--font-sans) !important;
}
h1, h2, h3 { font-family: var(--font-display); letter-spacing: 0; }
a { color: var(--brand-600); }

.pi-ic, svg.i {
  width: 20px; height: 20px; flex: none; vertical-align: -4px;
  stroke: currentColor; fill: none; stroke-width: 1.75;
  stroke-linecap: round; stroke-linejoin: round;
}
svg.i.sm { width: 16px; height: 16px; vertical-align: -3px; }
svg.i.lg { width: 28px; height: 28px; }
:where(button, a, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--focus-ring); outline-offset: 2px;
}
.pi-muted { color: var(--ink-muted); }
.pi-mono, .code { font-family: var(--font-mono) !important; font-size: 13px; }
.pi-num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* --- AppHeader --- */
.pi-header { background: var(--navy-900) !important; color: var(--on-navy) !important;
             padding: 0 !important; position: static !important; }
.pi-header::after { content: none !important; }
.pi-header__bar { display: flex; justify-content: space-between; align-items: flex-start;
                  gap: var(--space-8); padding: var(--space-4) var(--space-8) var(--space-6); }
.pi-crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2);
             font: 400 13px/18px var(--font-sans); color: var(--sky-200); margin-bottom: var(--space-2); }
.pi-crumbs a { color: var(--sky-200) !important; text-decoration: none;
               display: inline-flex; align-items: center; gap: var(--space-1); }
.pi-crumbs a:hover { color: var(--on-navy) !important; text-decoration: underline; }
.pi-crumbs [aria-current] { color: var(--on-navy) !important; font-weight: 700; }
.pi-crumbs .pi-ic { width: 16px; height: 16px; vertical-align: 0; }
.pi-header__title { margin: 0 !important; font: 800 30px/38px var(--font-display) !important;
                    color: var(--on-navy) !important; }
.pi-header__desc { margin: var(--space-1) 0 0 !important; font: 400 14px/20px var(--font-sans) !important;
                   color: var(--sky-200) !important; opacity: 1 !important; max-width: 720px; }
.pi-header__side { display: flex; align-items: center; gap: var(--space-3);
                   padding-top: var(--space-1); white-space: nowrap; }
.pi-header__user { font: 400 13px/18px var(--font-sans); color: var(--sky-200); }
.pi-header__user b { color: var(--on-navy); font-weight: 700; }
.pi-header__help { height: 32px; padding: 0 var(--space-4); border-radius: var(--radius-pill);
                   border: 1px solid var(--sky-200); background: transparent; color: var(--on-navy) !important;
                   font: 700 14px/20px var(--font-sans); display: inline-flex; align-items: center;
                   gap: var(--space-2); cursor: pointer; text-decoration: none; box-sizing: border-box; }
.pi-header__help:hover, .pi-header__help[aria-current] { background: var(--navy-800); }
/* «Что нового» — текстовая ссылка рядом с «Помощью»: тише пилюли */
.pi-header__link { height: 32px; padding: 0 var(--space-2); display: inline-flex; align-items: center;
                   gap: var(--space-2); border-radius: var(--radius-md); color: var(--sky-200) !important;
                   font: 700 14px/20px var(--font-sans); text-decoration: none; }
.pi-header__link:hover, .pi-header__link[aria-current] { background: var(--navy-800); color: var(--on-navy) !important; }
.pi-header__link:focus-visible { outline: 2px solid var(--sky-200); outline-offset: 2px; }
.pi-header__icon { width: 36px; height: 36px; display: inline-grid; place-items: center; border: 0;
                   border-radius: var(--radius-md); background: transparent; color: var(--sky-200) !important;
                   cursor: pointer; text-decoration: none; padding: 0; }
.pi-header__icon:hover, .pi-header__icon[aria-current] { background: var(--navy-800); color: var(--on-navy) !important; }
.pi-header__icon:focus-visible, .pi-header__help:focus-visible { outline: 2px solid var(--sky-200); outline-offset: 2px; }
.pi-header .pi-ic { vertical-align: 0; }
.pi-stripe { display: block; }
.pi-stripe__brand { position: relative; display: block; height: 6px; background: var(--stripe-brand); }
.pi-stripe__brand::before { content: ""; position: absolute; left: var(--space-8); top: 0;
                            width: 160px; height: 6px; background: var(--accent-500); }
.pi-stripe__sky { display: block; height: 3px; background: var(--sky-200); }

/* --- Button --- */
.pi-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
          border: 1px solid transparent; border-radius: var(--radius-md); font: 700 16px/24px var(--font-sans);
          cursor: pointer; text-decoration: none; transition: background-color .15s, border-color .15s; }
.pi-btn--sm { height: 32px; padding: 0 var(--space-3); font-size: 14px; line-height: 20px; }
.pi-btn--md { height: 40px; padding: 0 var(--space-4); }
.pi-btn--primary { background: var(--brand-500); color: var(--on-brand); box-shadow: var(--shadow-button); }
.pi-btn--primary:hover:not(:disabled) { background: var(--brand-600); }
.pi-btn--secondary { background: var(--surface-200); color: var(--ink); border-color: var(--border-control); }
.pi-btn--secondary:hover:not(:disabled) { border-color: var(--brand-500); color: var(--brand-600); }
.pi-btn--ghost-danger { background: transparent; color: var(--danger-600); }
.pi-btn--ghost-danger:hover:not(:disabled) { background: var(--danger-050); }

/* --- Карточки разделов и плитки главной --- */
.pi-grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-6);
             margin-bottom: var(--space-6); }
.pi-section { display: grid; grid-template-columns: 40px 1fr; gap: var(--space-2) var(--space-4);
              align-content: start; background: var(--surface-200); border: 1px solid var(--border);
              border-radius: var(--radius-md); padding: var(--space-6); text-decoration: none; color: var(--ink); }
.pi-section:hover { border-color: var(--brand-500); }
.pi-section__icon { width: 40px; height: 40px; display: grid; place-items: center;
                    border-radius: var(--radius-md); background: var(--brand-050); color: var(--brand-600);
                    grid-row: span 2; }
.pi-section__icon .pi-ic { vertical-align: 0; }
.pi-section__title { font: 700 18px/26px var(--font-display); margin: 0; color: var(--ink); }
.pi-section__text { margin: 0; font: 400 14px/20px var(--font-sans); color: var(--ink-muted); }
.pi-tile { display: flex; align-items: center; gap: var(--space-3); height: 64px; padding: 0 var(--space-4);
           background: var(--surface-200); border: 1px solid var(--border); border-radius: var(--radius-md);
           color: var(--ink); text-decoration: none; font: 700 15px/22px var(--font-sans); box-sizing: border-box; }
.pi-tile .pi-ic { color: var(--brand-600); vertical-align: 0; }
.pi-tile__arrow { margin-left: auto; color: var(--ink-muted) !important; }
.pi-tile:hover { border-color: var(--brand-500); }

/* --- Tag: метки свойств, различаются формой --- */
.pi-tag { display: inline-flex; align-items: center; gap: var(--space-1); height: 22px; padding: 0 var(--space-2);
          border-radius: var(--radius-sm); font: 700 12px/16px var(--font-sans); white-space: nowrap;
          box-sizing: border-box; vertical-align: middle; }
.pi-tag .pi-ic { width: 14px; height: 14px; stroke-width: 2; vertical-align: 0; }
.pi-tag--solid { background: var(--ink); color: var(--surface-200); }
.pi-tag--outline { background: transparent; color: var(--brand-600); box-shadow: inset 0 0 0 1.5px var(--brand-600); }
.pi-tag--dashed { background: transparent; color: var(--ink-muted); border: 1.5px dashed var(--border-control); }
.pi-tag--warning { background: var(--warning-050); color: var(--warning-600); }
.pi-tag--accent { background: var(--accent-500); color: var(--on-accent); }
.pi-tag--neutral { background: var(--surface-100); color: var(--ink-muted); box-shadow: inset 0 0 0 1px var(--border); }

/* ================================================================== */
/*  3. Совместимость: классы страниц → компоненты                      */
/* ================================================================== */

/* --- Каркас: pi-main, между панелями 24px --- */
main { max-width: 1600px !important; padding: var(--space-6) var(--space-8) var(--space-12) !important;
       box-sizing: border-box; }
.muted, .mini, .cmt, .hint, .lead, .sub-lead { color: var(--ink-muted) !important; }
label { color: var(--ink); }

/* --- Panel: .card и .panel --- */
.card, .panel {
  background: var(--surface-200) !important; color: var(--ink);
  border: 1px solid var(--border) !important; border-radius: var(--radius-md) !important;
  box-shadow: none !important; margin-bottom: var(--space-6) !important;
}
.card { padding: var(--space-6) !important; }
.card > h2, .panel-head h2 {
  font: 700 24px/32px var(--font-display) !important; color: var(--ink) !important;
  border: 0 !important; padding: 0 !important; margin: 0 0 var(--space-1) !important;
}
.card > h2 .mini { font: 400 14px/20px var(--font-sans); }
.panel-head p { font: 400 14px/20px var(--font-sans) !important; max-width: 820px; }
.panel-head { padding: var(--space-6) var(--space-6) 0 !important; border-bottom: 0 !important; }
.panel-body { padding: var(--space-4) var(--space-6) var(--space-6) !important; }

/* --- Button: .btn и варианты. В панелях — sm 32px. --- */
.btn {
  display: inline-flex !important; align-items: center; justify-content: center; gap: var(--space-2);
  min-height: 32px; padding: 0 var(--space-3) !important; box-sizing: border-box;
  font: 700 14px/20px var(--font-sans) !important; border-radius: var(--radius-md) !important;
  cursor: pointer; text-decoration: none !important; filter: none !important;
  transition: background-color .15s, border-color .15s, color .15s;
}
.btn:not(.ghost):not(.btn-ghost):not(.btn-danger):not(.danger):not(.btn-success),
.btn.btn-primary {
  background: var(--brand-500) !important; color: var(--on-brand) !important;
  border: 1px solid transparent !important; box-shadow: var(--shadow-button) !important;
}
.btn:not(.ghost):not(.btn-ghost):not(.btn-danger):not(.danger):not(.btn-success):hover:not(:disabled),
.btn.btn-primary:hover:not(:disabled) { background: var(--brand-600) !important; }
.btn.ghost, .btn.btn-ghost, .btn.btn-success {
  background: var(--surface-200) !important; color: var(--ink) !important;
  border: 1px solid var(--border-control) !important; box-shadow: none !important;
}
.btn.ghost:hover:not(:disabled), .btn.btn-ghost:hover:not(:disabled), .btn.btn-success:hover:not(:disabled) {
  border-color: var(--brand-500) !important; color: var(--brand-600) !important;
}
/* Удаление в строке — ghost-danger */
.btn.btn-danger, .btn.danger {
  background: transparent !important; color: var(--danger-600) !important;
  border: 1px solid transparent !important; box-shadow: none !important;
}
.btn.btn-danger:hover:not(:disabled), .btn.danger:hover:not(:disabled) { background: var(--danger-050) !important; }
.btn:active:not(:disabled) { transform: translateY(1px); }
.btn:disabled, .btn[disabled] { opacity: .55; cursor: not-allowed; box-shadow: none !important; }

/* --- Поля: плотные 36px (pi-field--sm), в таблицах — инлайн 30px --- */
input:not([type=checkbox]):not([type=radio]):not([type=file]), select, textarea {
  font-family: var(--font-sans) !important; font-size: 14px !important; line-height: 20px;
  color: var(--ink) !important; background-color: var(--surface-200) !important;
  border: 1px solid var(--border-control) !important; border-radius: var(--radius-sm) !important;
  box-sizing: border-box;
}
input:not([type=checkbox]):not([type=radio]):not([type=file]), select {
  height: 36px; padding: 0 10px !important;
}
textarea { padding: 8px 10px !important; }
input::placeholder, textarea::placeholder { color: var(--ink-muted); opacity: 1; }
input:not([type=checkbox]):not([type=radio]):hover, select:hover, textarea:hover { border-color: var(--ink-muted) !important; }
input:focus, select:focus, textarea:focus {
  outline: 2px solid var(--focus-ring) !important; outline-offset: 2px !important;
  border-color: var(--brand-500) !important;
}
input[readonly], input:disabled, select:disabled, textarea:disabled {
  background-color: var(--field-readonly) !important; border-color: var(--border) !important;
}
input:disabled, select:disabled, textarea:disabled { color: var(--ink-muted) !important; cursor: not-allowed; }
input[type=checkbox], input[type=radio] { accent-color: var(--brand-500); width: 18px; height: 18px; }
table input:not([type=checkbox]):not([type=radio]), table select { height: 30px; padding: 0 8px !important; }

/* --- DataTable --- */
table { border-collapse: separate !important; border-spacing: 0; font: 400 14px/20px var(--font-sans);
        color: var(--ink); }
th {
  height: 36px; padding: 0 var(--space-3) !important;
  background: var(--table-head) !important; color: var(--ink) !important;
  font: 700 13px/18px var(--font-sans) !important;
  border: 0 !important; border-bottom: 1px solid var(--border) !important;
}
td {
  height: 40px; padding: 0 var(--space-3) !important;
  border: 0 !important; border-bottom: 1px solid var(--border) !important;
  vertical-align: middle;
}
tbody tr:hover td { background-color: var(--row-hover); }
tbody tr.sel td { background: var(--row-selected) !important; }
tbody tr.sel td:first-child { box-shadow: inset 3px 0 0 var(--brand-500); }
tr.total td, tfoot td { background: var(--row-total) !important; font-weight: 700; }

/* --- TreeTable: бэклог и типовой бэклог --- */
table.tree td { height: 36px; padding: 0 var(--space-2) !important; }
/* Дерево шире экрана — прокручивается по горизонтали, колонки не сжимаются
   до нечитаемого (обёртка таблицы — overflow-x: auto). */
table.tree { min-width: 1480px; }
table.tree td select { min-width: 72px; }
table.tree .title-cell { min-width: 240px; }
table.tree th { padding: 0 var(--space-2) !important; }
table.tree tr.lvl1 td { background: var(--row-epic) !important; }
tr.lvl1 .title-cell input { font-weight: 700 !important; color: var(--ink) !important; }
.lv { display: inline-grid !important; place-items: center; min-width: 28px; height: 20px;
      padding: 0 4px !important; border-radius: var(--radius-sm) !important;
      font: 700 11px/14px var(--font-sans) !important; letter-spacing: .02em; box-sizing: border-box; }
.lv-1 { background: var(--ink) !important; color: var(--surface-200) !important; }
.lv-2 { background: var(--brand-500) !important; color: var(--on-brand) !important; }
.lv-3 { background: var(--surface-200) !important; color: var(--ink) !important;
        box-shadow: inset 0 0 0 1px var(--border-control); }
/* Ячейка «Этап» — строже, чем «tr.lvl1 td»: стоит в строке эпика. */
table tr td.stage-cell {
  width: 44px; min-width: 44px; padding: var(--space-3) 0 var(--space-2) !important;
  background: var(--stage-cell) !important; border-right: 1px solid var(--border) !important;
  vertical-align: middle; text-align: center;
}
table tr td.stage-cell .vert {
  writing-mode: vertical-rl; transform: rotate(180deg); margin: 0 auto;
  font: 700 13px/18px var(--font-sans) !important; color: var(--ink) !important;
  white-space: normal !important; max-height: 180px;
}
table tr td.stage-cell button { height: 24px; min-height: 24px; padding: 0 6px !important;
                                font-size: 12px !important; margin-top: var(--space-2); }
table tr td.stage-cell.none { background: var(--surface-100) !important; }
table tr td.stage-cell.none .vert { color: var(--ink-muted) !important; }

/* --- Ошибки и превышения --- */
tr.stage-bad td { background: var(--cell-over) !important; }
tr.stage-bad td:first-child { box-shadow: inset 3px 0 0 var(--danger-600); }
tr.stage-bad input[type=date] { border-color: var(--danger-600) !important; }
.err, .stage-msg, .budget-note.over { color: var(--danger-600) !important; }
.ok, .ok-msg { color: var(--success-600) !important; }
input.bad { border-color: var(--danger-600) !important; background-color: var(--cell-over) !important; }

/* --- Alert: .msg --- */
.msg { border-radius: var(--radius-md) !important; font: 400 15px/22px var(--font-sans) !important; }
.msg.err, .msg.ok { padding: var(--space-3) var(--space-4) !important; }
.msg.err, .err-line { background: var(--danger-050) !important; color: var(--danger-600) !important; }
.msg.ok { background: var(--success-050) !important; color: var(--success-600) !important; }

/* --- Badge: .tag (пилюля с точкой) --- */
.tag {
  display: inline-flex !important; align-items: center; gap: var(--space-1); height: 24px;
  padding: 0 10px !important; box-sizing: border-box; border-radius: var(--radius-pill) !important;
  font: 700 12px/16px var(--font-sans) !important; letter-spacing: .02em; white-space: nowrap;
  background: var(--brand-050) !important; color: var(--brand-600) !important; box-shadow: none !important;
}
.tag::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.tag.kcp { background: var(--accent-500) !important; color: var(--on-accent) !important; }
.tag.ok { background: var(--success-050) !important; color: var(--success-600) !important; }
.tag.warn { background: var(--warning-050) !important; color: var(--warning-600) !important; }

/* --- Chip --- */
.chip {
  display: inline-flex !important; align-items: center; gap: 6px; min-height: 32px;
  padding: 0 var(--space-3) !important; box-sizing: border-box; border-radius: var(--radius-pill) !important;
  font: 400 14px/20px var(--font-sans) !important;
  background: var(--brand-050) !important; color: var(--ink) !important; box-shadow: none !important;
}
.chip:has(button) { padding-right: 4px !important; }
.chip button { width: 24px; height: 24px; display: inline-grid; place-items: center; border-radius: 50%;
               background: transparent !important; color: var(--ink-muted) !important; border: 0 !important;
               cursor: pointer; padding: 0 !important; }
.chip button:hover { background: var(--surface-200) !important; color: var(--danger-600) !important; }
/* Системные значения — без крестика: surface-100 и контур */
.chip.sys, .chip:not(:has(button)) {
  background: var(--surface-100) !important; box-shadow: inset 0 0 0 1px var(--border) !important;
}

/* --- Tabs: подчёркивание, счётчик-пилюля --- */
.tabs { display: flex; gap: var(--space-1) !important; border-bottom: 1px solid var(--border);
        margin-bottom: var(--space-6) !important; overflow-x: auto; }
.tab {
  position: relative; display: inline-flex !important; align-items: center; gap: var(--space-2);
  height: 44px; padding: 0 var(--space-4) !important; border: 0 !important; border-radius: 0 !important;
  background: none !important; box-shadow: none !important;
  font: 700 15px/22px var(--font-sans) !important; color: var(--ink-muted) !important;
  cursor: pointer; white-space: nowrap;
}
.tab:hover { color: var(--ink) !important; }
.tab.active { color: var(--ink) !important; }
.tab.active::after { content: ""; position: absolute; left: var(--space-2); right: var(--space-2);
                     bottom: 0; height: 3px; border-radius: 3px 3px 0 0; background: var(--brand-500); }
.tab .count { min-width: 20px; height: 20px; padding: 0 6px !important; box-sizing: border-box;
              border-radius: var(--radius-pill) !important; display: inline-grid !important; place-items: center;
              font: 700 12px/16px var(--font-sans) !important; margin: 0 !important;
              background: var(--surface-100) !important; color: var(--ink-muted) !important;
              box-shadow: inset 0 0 0 1px var(--border); }
.tab.active .count { background: var(--brand-500) !important; color: var(--on-brand) !important; box-shadow: none; }

/* --- Dialog --- */
dialog {
  border: 0 !important; border-radius: var(--radius-lg) !important; box-shadow: var(--shadow-card) !important;
  background: var(--surface-200) !important; color: var(--ink) !important;
  font: 400 15px/22px var(--font-sans);
}
dialog h3 { font: 700 18px/26px var(--font-display) !important; color: var(--ink) !important; }
dialog::backdrop { background: var(--overlay); }
dialog .btn { min-height: 40px; padding: 0 var(--space-4) !important; font-size: 16px !important; }
/* Подтверждение — всегда удаление: кнопка danger */
#confirm_dialog #cf_ok {
  background: var(--danger-600) !important; color: var(--on-danger) !important;
  border-color: transparent !important; box-shadow: none !important;
}
#confirm_dialog #cf_ok:hover { filter: brightness(.92) !important; }

/* --- Справка --- */
nav.toc > h2 { font: 700 13px/18px var(--font-sans) !important; text-transform: uppercase;
              letter-spacing: .06em; color: var(--ink-muted) !important; margin: 0 0 var(--space-3) !important; }
nav.toc a.active { background: var(--row-selected) !important; box-shadow: inset 3px 0 0 var(--brand-500);
                   color: var(--ink) !important; font-weight: 700; }
nav.toc a:hover { background: var(--row-hover) !important; }
article code { background: var(--surface-100) !important; border: 1px solid var(--border);
               border-radius: var(--radius-sm); color: var(--ink) !important; }

/* ================================================================== */
/*  Узкий экран: только вход и главная                                 */
/* ================================================================== */
@media (max-width: 720px) {
  .pi-header__bar { flex-direction: column; gap: var(--space-3); padding: var(--space-3) var(--space-4) var(--space-4); }
  .pi-header__title { font-size: 24px !important; line-height: 32px !important; }
  .pi-hide-sm { display: none !important; }
  .pi-stripe__brand::before { left: var(--space-4); width: 96px; }
  main { padding: var(--space-4) !important; }
  .pi-grid-3 { grid-template-columns: 1fr; gap: var(--space-4); }
}