/* Цвета и шрифты — как в ДДС-Анализаторе, чтобы приложения выглядели одной семьёй. */
:root {
  --accent: #60C7BE;
  --accent-dark: #2F7A74;
  --accent-soft: #EAF7F5;
  --accent-soft-hover: #DBF1EE;
  --dark: #0B2426;
  --text-on-dark: #FFFFFF;
  --text-on-dark-mute: #B9D3D1;

  --bg: #F5F7F7;
  --panel: #FFFFFF;
  --panel-alt: #F1F6F6;
  --border: #DDE3E3;
  --grid: #EBEFEF;
  --text: #16262A;
  --text-mute: #5B6D6E;

  --danger: #D75C5C;
  --success-bg: #E8F6E9;
  --success-text: #2F7A35;
  --warn-bg: #FDF3E0;
  --warn-text: #8A6413;
  --danger-bg: #FBEAEA;
  --danger-text: #A53A3A;
  --pending-bg: #EAEAEA;

  --amount-in: #2F7A35;
  --amount-out: #A53A3A;
  --line: #2F7A74;

  /* Точность плана: зелёный — точно, синий — примерная сумма, лиловый — примерная дата, тёмно-красный — всё примерно. */
  --p-exact: #2F7A35;
  --p-sum: #2E6DB4;
  --p-date: #8A4FBF;
  --p-none: #8B1E2D;

  --font-sans: 'IBM Plex Sans', -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  --font-mono: 'IBM Plex Mono', 'SFMono-Regular', Menlo, Consolas, monospace;
  font-size: 15px;
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --accent-soft: #123834;
    --accent-soft-hover: #16423D;
    --bg: #0E1A1C;
    --panel: #142428;
    --panel-alt: #192B2E;
    --border: #294042;
    --grid: #1F3336;
    --text: #E7F1F0;
    --text-mute: #93ABAA;
    --success-bg: #14311A;
    --success-text: #8FE39A;
    --warn-bg: #3A2C10;
    --warn-text: #F4C97B;
    --danger-bg: #3A1717;
    --danger-text: #F29A9A;
    --pending-bg: #22383A;
    --amount-in: #8FE39A;
    --amount-out: #F29A9A;
    --line: #60C7BE;
    --p-exact: #7FD88B;
    --p-sum: #7FB0EE;
    --p-date: #C59BEA;
    --p-none: #E07A8A;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --accent-soft: #123834;
  --accent-soft-hover: #16423D;
  --bg: #0E1A1C;
  --panel: #142428;
  --panel-alt: #192B2E;
  --border: #294042;
  --grid: #1F3336;
  --text: #E7F1F0;
  --text-mute: #93ABAA;
  --success-bg: #14311A;
  --success-text: #8FE39A;
  --warn-bg: #3A2C10;
  --warn-text: #F4C97B;
  --danger-bg: #3A1717;
  --danger-text: #F29A9A;
  --pending-bg: #22383A;
  --amount-in: #8FE39A;
  --amount-out: #F29A9A;
  --line: #60C7BE;
  --p-exact: #7FD88B;
  --p-sum: #7FB0EE;
  --p-date: #C59BEA;
  --p-none: #E07A8A;
  color-scheme: dark;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; background: var(--bg); color: var(--text); font-family: var(--font-sans); line-height: 1.4; }
.num, .mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }

/* ---------- шапка ---------- */
.topbar {
  background: var(--dark); color: var(--text-on-dark); padding: 16px 32px;
  display: flex; justify-content: space-between; align-items: flex-end; gap: 16px 24px; flex-wrap: wrap;
}
.topbar__brand { display: flex; align-items: center; gap: 14px; min-width: 0; }
.topbar__logo { flex-shrink: 0; width: 44px; height: 44px; border-radius: 50%; background: #fff; display: flex; align-items: center; justify-content: center; padding: 7px; }
.topbar__logo img { width: 100%; height: 100%; object-fit: contain; display: block; }
.topbar__title h1 { margin: 0 0 4px; font-size: 22px; letter-spacing: 0.02em; font-weight: 600; line-height: 1.1; }
.topbar__title p { margin: 0; color: var(--text-on-dark-mute); font-size: 13px; }
.topbar__right { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-left: auto; }
.topbar__pill {
  font: inherit; font-size: 12px; color: var(--text-on-dark-mute); border: 1px solid rgba(255,255,255,.18);
  border-radius: 999px; padding: 6px 12px; background: transparent; line-height: 1.2;
}
.btn--on-dark { cursor: pointer; }
.btn--on-dark:hover { border-color: var(--accent); color: var(--text-on-dark); }
.topbar__pill--warn { border-color: #F4C97B; color: #F4C97B; }

/* ---------- вкладки ---------- */
.tabs { display: flex; gap: 4px; padding: 0 32px; background: var(--panel); border-bottom: 1px solid var(--border); overflow-x: auto; position: sticky; top: 0; z-index: 20; }
.tabs button {
  font: inherit; font-size: 14px; background: none; border: 0; border-bottom: 3px solid transparent;
  padding: 12px 14px 10px; color: var(--text-mute); cursor: pointer; white-space: nowrap;
}
.tabs button:hover:not(:disabled) { color: var(--text); }
.tabs button[aria-current="page"] { color: var(--text); border-bottom-color: var(--accent-dark); font-weight: 600; }
.tabs button:disabled { opacity: .45; cursor: default; }
.tabs .tab-badge { display: inline-block; min-width: 18px; padding: 0 5px; margin-left: 6px; border-radius: 9px; background: var(--danger-bg); color: var(--danger-text); font-size: 11px; font-weight: 600; text-align: center; }

main { max-width: 1400px; margin: 0 auto; padding: 20px 32px 60px; }

.banner { margin: 12px 32px 0; padding: 10px 14px; border-radius: 8px; font-size: 13px; }
.banner--warn { background: var(--warn-bg); color: var(--warn-text); }

/* ---------- панели ---------- */
.panel { background: var(--panel); border: 1px solid var(--border); border-radius: 12px; padding: 20px 22px; margin-bottom: 18px; }
.panel h2 { margin: 0 0 6px; font-size: 17px; text-wrap: balance; }
.panel h3 { margin: 22px 0 8px; font-size: 14px; color: var(--text-mute); font-weight: 600; }
.panel__hint { margin: 0 0 14px; color: var(--text-mute); font-size: 13px; text-wrap: pretty; max-width: 900px; }
.panel__head { display: flex; align-items: center; justify-content: space-between; gap: 10px 16px; flex-wrap: wrap; margin-bottom: 8px; }
.panel__head h2 { margin: 0; }

.callout { padding: 10px 14px; border-radius: 8px; font-size: 13px; margin: 10px 0; }
.callout--warn { background: var(--warn-bg); color: var(--warn-text); }
.callout--ok { background: var(--success-bg); color: var(--success-text); }
.callout--danger { background: var(--danger-bg); color: var(--danger-text); }
.callout--info { background: var(--accent-soft); color: var(--text); }

.dropzone {
  border: 2px dashed var(--border); border-radius: 12px; padding: 28px 20px; text-align: center; cursor: pointer;
  background: var(--panel-alt); transition: background .15s, border-color .15s;
}
.dropzone:hover, .dropzone.dragover { background: var(--accent-soft-hover); border-color: var(--accent); }
.dropzone p { margin: 4px 0; }
.dropzone__hint { color: var(--text-mute); font-size: 12px; }
.start-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }

/* ---------- кнопки и поля ---------- */
.btn {
  font: inherit; font-size: 13px; padding: 7px 14px; border-radius: 8px; border: 1px solid var(--border);
  background: var(--panel); color: var(--text); cursor: pointer; white-space: nowrap;
}
.btn:hover { border-color: var(--accent-dark); }
.btn:focus-visible, .tabs button:focus-visible, input:focus-visible, select:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.btn--primary { background: var(--accent-dark); border-color: var(--accent-dark); color: #fff; }
.btn--primary:hover { background: var(--accent); border-color: var(--accent); }
.btn--ghost { background: transparent; color: var(--text-mute); }
.btn--danger { color: var(--danger); }
.btn--sm { padding: 3px 8px; font-size: 12px; border-radius: 6px; }
.btn--icon { padding: 3px 7px; font-size: 13px; border-radius: 6px; background: transparent; border-color: transparent; color: var(--text-mute); }
.btn--icon:hover { border-color: var(--border); color: var(--text); }
.btn:disabled { opacity: .6; cursor: default; }

input[type=text], input[type=date], input[type=number], select {
  font: inherit; font-size: 13px; color: var(--text); background: var(--panel); border: 1px solid var(--border);
  border-radius: 6px; padding: 5px 8px; max-width: 100%;
}
input.amount { width: 120px; text-align: right; font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
input[type=date] { width: 140px; }
label.field { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--text-mute); }
label.check { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; cursor: pointer; }
.form-row { display: flex; flex-wrap: wrap; gap: 12px 16px; align-items: flex-end; }

.seg { display: inline-flex; border: 1px solid var(--border); border-radius: 8px; overflow: hidden; }
.seg button { font: inherit; font-size: 13px; padding: 6px 12px; background: var(--panel); border: 0; color: var(--text-mute); cursor: pointer; }
.seg button + button { border-left: 1px solid var(--border); }
.seg button[aria-pressed="true"] { background: var(--accent-dark); color: #fff; }

/* ---------- таблицы ---------- */
.table-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: 8px; }
.table-wrap--tall { max-height: 640px; overflow: auto; }
table { border-collapse: collapse; width: 100%; font-size: 13px; }
th, td { padding: 6px 10px; border-bottom: 1px solid var(--grid); text-align: left; vertical-align: middle; }
th { background: var(--panel-alt); font-weight: 600; font-size: 12px; color: var(--text-mute); position: sticky; top: 0; z-index: 2; white-space: nowrap; }
td.num, th.num { text-align: right; white-space: nowrap; }
tr:last-child td { border-bottom: 0; }
tbody tr:hover td { background: var(--panel-alt); }
.muted { color: var(--text-mute); }
.small { font-size: 12px; }
.amount-in { color: var(--amount-in); }
.amount-out { color: var(--amount-out); }
.neg { color: var(--danger-text); font-weight: 600; }

.badge { display: inline-block; padding: 1px 7px; border-radius: 9px; font-size: 11px; font-weight: 600; white-space: nowrap; }
.badge--high { background: var(--success-bg); color: var(--success-text); }
.badge--medium { background: var(--warn-bg); color: var(--warn-text); }
.badge--low { background: var(--pending-bg); color: var(--text-mute); }
.badge--gap { background: var(--danger-bg); color: var(--danger-text); }
.badge--edited { background: var(--accent-soft); color: var(--accent-dark); }
.badge--terms { background: var(--panel-alt); color: var(--text-mute); border: 1px solid var(--border); font-weight: 500; }

.rule-title { font-weight: 500; }
.rule-meta { font-size: 12px; color: var(--text-mute); margin-top: 2px; display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: center; }
tr.is-off td { opacity: .55; }
tr.is-off td:first-child { opacity: 1; }
tr.history-row td { background: var(--panel-alt); }
/* Операции под правилом: ширина по экрану, а не по содержимому, чтобы не раздвигать таблицу правил. */
.tx-wrap { width: min(1240px, calc(100vw - 150px)); min-width: 600px; position: sticky; left: 10px; }
table.tx { table-layout: fixed; }
table.tx th, table.tx td { padding: 4px 6px; }
table.tx td { background: var(--panel); }
table.tx input[type=text], table.tx input[type=date], table.tx input.amount { width: 100%; }
table.tx tr.is-excluded td { opacity: .5; }
table.tx tr.is-excluded td:first-child { opacity: 1; }
input.days { width: 64px; }
.history-list { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 12px; font-family: var(--font-mono); color: var(--text-mute); }
.slot { display: flex; align-items: center; gap: 6px; }
.slot + .slot { margin-top: 4px; }

/* ---------- сводные цифры ---------- */
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; margin: 12px 0 16px; }
.kpi { border: 1px solid var(--border); border-radius: 10px; padding: 10px 12px; background: var(--panel); }
.kpi__label { font-size: 12px; color: var(--text-mute); }
.kpi__value { font-family: var(--font-mono); font-size: 18px; font-weight: 600; margin-top: 2px; font-variant-numeric: tabular-nums; }
.kpi__sub { font-size: 11px; color: var(--text-mute); margin-top: 2px; }
.kpi--danger { border-color: var(--danger); background: var(--danger-bg); }
.kpi--danger .kpi__value, .kpi--danger .kpi__label { color: var(--danger-text); }

.toolbar { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center; }

/* ---------- график ---------- */
.chart { position: relative; margin: 6px 0 4px; }
.chart svg { display: block; width: 100%; height: 260px; overflow: visible; }
.chart text { font-family: var(--font-sans); font-size: 11px; fill: var(--text-mute); }
.chart .grid { stroke: var(--grid); stroke-width: 1; }
.chart .zero { stroke: var(--text-mute); stroke-width: 1; opacity: .5; }
.chart .reserve { stroke: var(--danger); stroke-width: 1.5; stroke-dasharray: 5 4; fill: none; }
.chart .series { stroke: var(--line); stroke-width: 2; fill: none; stroke-linejoin: round; }
.chart .gap-band { fill: var(--danger-bg); }
.chart .cross { stroke: var(--text-mute); stroke-width: 1; }
.chart .dot { fill: var(--line); stroke: var(--panel); stroke-width: 2; }
.chart-legend { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 12px; color: var(--text-mute); }
.chart-legend span::before { content: ''; display: inline-block; width: 16px; height: 0; vertical-align: middle; margin-right: 6px; border-top: 2px solid var(--line); }
.chart-legend .lg-reserve::before { border-top: 2px dashed var(--danger); }
.chart-legend .lg-gap::before { height: 10px; border: 0; background: var(--danger-bg); border-radius: 2px; }
.chart-tip {
  position: fixed; z-index: 50; pointer-events: none; background: var(--panel); color: var(--text); border: 1px solid var(--border);
  border-radius: 8px; padding: 8px 10px; font-size: 12px; box-shadow: 0 4px 16px rgba(0,0,0,.12); min-width: 180px;
}
.chart-tip b { font-weight: 600; }
.chart-tip .row { display: flex; justify-content: space-between; gap: 14px; }
.chart-tip .row span:last-child { font-family: var(--font-mono); }

/* ---------- сводная таблица календаря ---------- */
.pivot th, .pivot td { padding: 5px 8px; }
.pivot th:first-child, .pivot td:first-child { position: sticky; left: 0; background: var(--panel); z-index: 1; min-width: 220px; max-width: 320px; }
.pivot th:first-child { z-index: 3; background: var(--panel-alt); }
.pivot tr.sec td { background: var(--accent-soft); font-weight: 600; }
.pivot tr.cat td { font-weight: 600; }
.pivot tr.cat td:first-child { padding-left: 16px; }
.pivot tr.item td:first-child { padding-left: 28px; font-weight: 400; }
.pivot tr.sum td { font-weight: 600; border-top: 1px solid var(--border); }
.pivot td.cell { cursor: pointer; }
.pivot td.cell:hover { background: var(--accent-soft-hover); }
.pivot td.gapcell { background: var(--danger-bg); color: var(--danger-text); font-weight: 600; }
.pivot th.gapcol { color: var(--danger-text); }
.pivot td.empty { color: var(--border); }

/* ---------- строки плана ---------- */
.lines td { white-space: nowrap; }
.lines td.title-cell { white-space: normal; min-width: 220px; }
td.title-cell { min-width: 220px; }
.lines tr.is-gap td { background: color-mix(in srgb, var(--danger-bg) 70%, transparent); }
.lines tr.is-paid td { opacity: .6; }
.lines tr.is-cancelled td { opacity: .45; text-decoration: line-through; }
.lines tr.is-cancelled td:last-child, .lines tr.is-cancelled td select { text-decoration: none; }
.lines input.note { width: 160px; }
.filter-chip { display: inline-flex; align-items: center; gap: 6px; background: var(--accent-soft); border-radius: 999px; padding: 3px 4px 3px 10px; font-size: 12px; }

/* ---------- разрывы ---------- */
.gap-card { border: 1px solid var(--danger); border-radius: 10px; padding: 14px 16px; margin-bottom: 14px; }
.gap-card h3 { margin: 0 0 4px; color: var(--danger-text); font-size: 15px; }
.gap-card .gap-facts { display: flex; flex-wrap: wrap; gap: 4px 20px; font-size: 13px; margin-bottom: 10px; }
.gap-card ul { margin: 6px 0 10px; padding-left: 20px; font-size: 13px; }

.steps { margin: 6px 0 0; padding-left: 20px; font-size: 13px; }
.steps li { margin: 3px 0; }

.toast {
  position: fixed; left: 50%; bottom: 76px; transform: translateX(-50%); background: var(--dark); color: #fff;
  padding: 10px 16px; border-radius: 8px; font-size: 13px; z-index: 60; max-width: calc(100% - 32px); box-shadow: 0 4px 20px rgba(0,0,0,.2);
}
.toast--error { background: var(--danger); }

.grid-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 18px; }

@media (max-width: 700px) {
  .topbar { padding: 14px 16px; }
  .tabs { padding: 0 8px; }
  main { padding: 14px 16px 40px; }
  .banner { margin: 10px 16px 0; }
  .panel { padding: 16px 14px; }
  .topbar__title p { display: none; }
  .pivot th:first-child, .pivot td:first-child { min-width: 150px; }
}

/* ---------- диалог ---------- */
.modal { position: fixed; inset: 0; z-index: 70; background: rgba(11, 36, 38, .55); display: flex; align-items: center; justify-content: center; padding: 16px; }
.modal[hidden] { display: none; }
.modal__card { background: var(--panel); color: var(--text); border-radius: 12px; padding: 20px 22px; max-width: 520px; width: 100%; box-shadow: 0 10px 40px rgba(0,0,0,.25); }
.modal__card h2 { margin: 0 0 8px; font-size: 18px; }
.modal__card p { margin: 0 0 8px; font-size: 14px; }

/* ---------- точность плана ---------- */
.prec-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 7px; vertical-align: 0; flex-shrink: 0; }
.prec-dot--exact { background: var(--p-exact); }
.prec-dot--sum { background: var(--p-sum); }
.prec-dot--date { background: var(--p-date); }
.prec-dot--none { background: var(--p-none); }
.prec-badge { background: transparent; border: 1px solid currentColor; font-weight: 600; }
.prec-badge--exact { color: var(--p-exact); }
.prec-badge--sum { color: var(--p-sum); }
.prec-badge--date { color: var(--p-date); }
.prec-badge--none { color: var(--p-none); }
.lines tr.prec-exact td:first-child { box-shadow: inset 4px 0 var(--p-exact); }
.lines tr.prec-sum td:first-child { box-shadow: inset 4px 0 var(--p-sum); }
.lines tr.prec-date td:first-child { box-shadow: inset 4px 0 var(--p-date); }
.lines tr.prec-none td:first-child { box-shadow: inset 4px 0 var(--p-none); }
.prec-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 18px; font-size: 12px; color: var(--text-mute); margin: 4px 0 12px;
  padding: 8px 12px; border: 1px solid var(--border); border-radius: 8px; background: var(--panel-alt); }
.prec-legend__title { color: var(--text); font-weight: 600; }
.prec-legend__item { display: inline-flex; align-items: center; }
.prec-legend b { color: var(--text); margin-left: 4px; }

/* ---------- анализ истории ---------- */
.badge--in { background: var(--success-bg); color: var(--success-text); }
.badge--out { background: var(--danger-bg); color: var(--danger-text); }
.profile td { vertical-align: top; }
.profile tr.is-risk td { background: color-mix(in srgb, var(--danger-bg) 60%, transparent); }
.bar-cell { display: flex; align-items: center; gap: 8px; min-width: 150px; }
.profile th { white-space: normal; vertical-align: bottom; }
.bar { display: block; height: 10px; border-radius: 0 4px 4px 0; flex: 0 0 auto; }
.bar--in { background: var(--amount-in); }
.bar--out { background: var(--amount-out); }

/* ---------- сохранение правок ---------- */
.savebar { position: fixed; left: 50%; bottom: 20px; transform: translateX(-50%); z-index: 55; display: flex; align-items: center; gap: 12px;
  background: var(--warn-bg); color: var(--warn-text); border: 1px solid currentColor; border-radius: 10px; padding: 8px 10px 8px 14px;
  font-size: 13px; box-shadow: 0 6px 24px rgba(0,0,0,.15); max-width: calc(100% - 32px); }
.savebar--ok { background: var(--success-bg); color: var(--success-text); }
@keyframes flash-row { from { background: var(--accent-soft-hover); } to { background: transparent; } }
.lines tr.flash td { animation: flash-row 2.4s ease-out; }
tr.is-regular td:first-child { box-shadow: inset 3px 0 var(--success-text); }

/* ---------- классы платежей ---------- */
.class-panel { border-left: 4px solid var(--border); }
.class-panel--sales { border-left-color: var(--amount-in); }
.class-panel--mandatory { border-left-color: var(--accent-dark); }
.class-panel--variable { border-left-color: var(--warn-text); }
.class-panel--oneoff { border-left-color: var(--text-mute); }
.class-note { color: var(--accent-dark); }

/* ---------- всплывающее пояснение ---------- */
.tip { position: relative; display: inline-flex; align-items: center; gap: 3px; cursor: help; border-bottom: 1px dotted var(--text-mute); }
.tip:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 3px; }
.tip__icon { color: var(--text-mute); font-size: 12px; }
.tip__text { position: absolute; left: 0; top: calc(100% + 8px); z-index: 40; width: 300px; max-width: calc(100vw - 32px);
  background: var(--dark); color: #fff; font-size: 12px; font-weight: 400; line-height: 1.45; padding: 8px 10px; border-radius: 8px;
  box-shadow: 0 6px 20px rgba(0,0,0,.2); opacity: 0; visibility: hidden; transition: opacity .12s; pointer-events: none; white-space: normal; }
.tip:hover .tip__text, .tip:focus .tip__text, .tip:focus-within .tip__text { opacity: 1; visibility: visible; }

/* ---------- подсказки ИИ ---------- */
.badge--ai { background: #EFE7F8; color: #6B3FA0; }
:root[data-theme="dark"] .badge--ai { background: #2D2140; color: #C59BEA; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .badge--ai { background: #2D2140; color: #C59BEA; } }
.nowrap { white-space: nowrap; }
.spinner { display: inline-block; width: 12px; height: 12px; border: 2px solid var(--border); border-top-color: var(--accent-dark); border-radius: 50%;
  animation: spin .8s linear infinite; vertical-align: -2px; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- таблицы с ограниченной высотой ---------- */
/* Высота по умолчанию (6–7 строк) задаётся из app.js только если строк больше; поле тянется вниз за правый нижний угол. */
.table-wrap--box { overflow: auto; resize: vertical; position: relative; }
/* Длинные пояснения в таблицах правил — две строки, полный текст по наведению. */
.class-panel .note-text { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.class-panel td.title-cell { min-width: 300px; }
.table-wrap--box thead th { position: sticky; top: 0; z-index: 2; }

/* Компактные строки в таблицах правил: 6–7 строк на экране. */
.class-panel table td { padding-top: 4px; padding-bottom: 4px; }
.class-panel table select, .class-panel table input[type=text], .class-panel table input[type=date], .class-panel table input[type=number] { padding: 3px 6px; font-size: 12px; }
.class-panel .slot + .slot { margin-top: 2px; }
.class-panel .rule-meta { margin-top: 1px; }