* { box-sizing: border-box; }
body { margin: 0; font: 14px/1.45 Arial, sans-serif; background: #f4f6fa; color: #222; }
#nav { display: flex; gap: 12px; align-items: center; padding: 8px 16px;
       background: #335593; color: #fff; }
#nav a, #nav button { color: #fff; background: none; border: none; cursor: pointer;
       font-size: 14px; text-decoration: underline; }
#nav .spacer { flex: 1; }
main { padding: 16px; max-width: 1400px; margin: 0 auto; }
.card { background: #fff; border: 1px solid #d5dbe7; border-radius: 6px;
        padding: 16px; margin-bottom: 12px; }
.list-item { display: flex; gap: 10px; align-items: center; padding: 8px 10px;
             border-bottom: 1px solid #eee; cursor: pointer; }
.list-item:hover { background: #eef2f9; }
.badge { font-size: 12px; padding: 2px 8px; border-radius: 10px; white-space: nowrap; }
.badge-editing { background: #fff3cd; color: #856404; }
.badge-agreed { background: #d4edda; color: #155724; }
.badge-deleted { background: #f8d7da; color: #721c24; }
.badge-new { background: #cce5ff; color: #004085; }
button { padding: 6px 14px; border: 1px solid #335593; background: #335593;
         color: #fff; border-radius: 4px; cursor: pointer; }
button.ghost { background: #fff; color: #335593; }
button.danger { background: #b02a37; border-color: #b02a37; }
button:disabled { opacity: .5; cursor: default; }
input, textarea, select { font: inherit; padding: 6px 8px; border: 1px solid #c4ccd9;
       border-radius: 4px; width: 100%; }
label { display: block; margin: 8px 0 2px; font-weight: bold; }
.error { color: #b02a37; margin: 8px 0; white-space: pre-line; }
.muted { color: #778; }
table.crit { width: 100%; border-collapse: collapse; }
table.crit td, table.crit th { border: 1px solid #d5dbe7; padding: 6px 8px;
       vertical-align: top; text-align: left; }
table.crit th { background: #335593; color: #fff; }
.cols { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start; }
.readonly-box { background: #f8f9fc; }
.notes-panel { border-top: 1px dashed #c4ccd9; margin-top: 12px; padding-top: 8px; }
.note { padding: 6px 0; border-bottom: 1px solid #eee; }
.note .meta { font-size: 12px; color: #778; }
.empty-missing { border-color: #b02a37 !important; background: #fff5f5; }
.tabs { display: flex; gap: 0; border-bottom: 2px solid #335593; margin-bottom: 4px; }
.tab { background: #fff; color: #335593; border: 1px solid #d5dbe7; border-bottom: none;
       border-radius: 6px 6px 0 0; margin-right: 4px; }
.tab-active { background: #335593; color: #fff; border-color: #335593; }
.ro-field { padding: 6px 8px; margin: 0; background: transparent; min-height: 31px;
            white-space: pre-wrap; }
.ro-area { min-height: 76px; }
.readonly-box label { color: #556; }
/* подсветка отличий рабочей версии от базовой (редактор барьера) */
.diff-changed { background: #fff3cd !important; border-color: #e0a800 !important; }
.diff-new { border-color: #28a745 !important; }
div.card.diff-new { box-shadow: inset 0 0 0 1px #28a745; }
.diff-removed { opacity: .55; }
.diff-removed .ro-field, .ro-field.diff-removed { text-decoration: line-through; }
/* зеркальное сравнение в редакторе барьера: левая колонка — readonly-копия правой */
.readonly-box input[readonly], .readonly-box textarea[readonly] {
  background: #eef1f6; color: #445; border-color: #dde3ec; cursor: default; }
.diff-removed input, .diff-removed textarea { text-decoration: line-through; }
.pair-focus { outline: 2px solid #335593; }
.btn-spacer { width: 34px; flex: none; }
.ghost-row, .ghost-card { visibility: hidden; }
.only-changed .cmp-same { display: none; }