/* LP SEO — веб-UI ревью (W5). Без внешних ресурсов: только этот файл. */
:root {
  --border: #d7d7d2;
  --muted: #767672;
  --accent: #2456a5;
}
* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: "Segoe UI", Arial, sans-serif;
  font-size: 15px;
  color: #1c1c1c;
  background: #f6f6f4;
}
.topbar {
  display: flex; align-items: center; gap: 24px;
  background: #24292f; color: #fff; padding: 10px 20px;
}
.topbar .brand { font-weight: 600; }
.topbar nav a { color: #cfd8e3; text-decoration: none; margin-right: 16px; }
.topbar nav a:hover { color: #fff; }
.llm-badge { margin-left: auto; font-size: 12px; color: #9fb0c4;
             border: 1px solid #3d444d; border-radius: 10px; padding: 2px 9px; }
main { max-width: 1200px; margin: 0 auto; padding: 20px; }
h1 { font-size: 22px; margin: 8px 0 14px; }
h2 { font-size: 17px; margin: 22px 0 8px; }
a { color: var(--accent); }
code { background: #ecece8; padding: 1px 4px; border-radius: 3px; font-size: 13px; }
pre {
  background: #272c33; color: #e6e6e6; padding: 10px; border-radius: 6px;
  overflow-x: auto; font-size: 13px;
}

.flashes { margin-bottom: 12px; }
.flash {
  padding: 8px 12px; border-radius: 6px; margin-bottom: 6px;
  border: 1px solid var(--border); background: #fff;
}
.flash-ok   { border-color: #7cb87c; background: #eef7ee; }
.flash-warn { border-color: #d9b44a; background: #fdf6e0; }
.flash-err  { border-color: #d98080; background: #fdeaea; }

.counters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.counter {
  display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px;
  border: 1px solid var(--border); border-radius: 18px; background: #fff;
  text-decoration: none; color: inherit;
}
.counter.active { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent) inset; }

.filters { display: flex; gap: 14px; align-items: center; margin-bottom: 14px; }
.filters select { padding: 3px 6px; font: inherit; }

table.pages {
  width: 100%; border-collapse: collapse;
  background: #fff; border: 1px solid var(--border);
}
table.pages th, table.pages td {
  padding: 7px 10px; border-bottom: 1px solid var(--border);
  text-align: left; vertical-align: top;
}
table.pages thead th { background: #efefec; font-weight: 600; }
table.pages tbody tr:hover { background: #f6f9ff; }
td.num, th.num { text-align: right; white-space: nowrap; }
td.chk, th.chk { width: 28px; text-align: center; }
td.dt { white-space: nowrap; color: var(--muted); font-size: 13px; }

.badge {
  display: inline-block; padding: 2px 8px; border-radius: 10px;
  font-size: 12px; white-space: nowrap;
}
.badge-keyword      { background: #f0f0ee; color: #6b6b64; }
.badge-mapped       { background: #d9efe0; color: #1d5c37; }
.badge-no_combo     { background: #f3e3d3; color: #7a4a10; }
.badge-selection_ok { background: #fff0d4; color: #7a5210; }
.badge-branch       { background: #eef; color: #335; font-size: 11px; }
.gen-bar            { margin: 0 0 14px; }
td.group            { color: #666; font-size: 13px; }

/* каталог фильтров в карточке (ручной подбор комбинации) */
.filter-box          { border: 1px solid #ddd; border-radius: 6px;
                       margin: 8px 0; padding: 4px 10px; background: #fafaf8; }
.filter-box summary  { cursor: pointer; font-weight: 600; padding: 4px 0; }
.picked-count        { float: right; color: #1d7a3f; font-weight: 600; font-size: 13px; }
.filter-box .val-search { width: 100%; margin: 6px 0; box-sizing: border-box; }
.filter-box .val-list   { max-height: 340px; overflow-y: auto; }
.val-row             { display: block; padding: 1px 0; font-size: 13px; }
/* подуровни скрыты до раскрытия галочкой родителя (JS ставит inline display) */
.val-row.lvl1        { padding-left: 22px; display: none; }
.val-row.lvl2        { padding-left: 44px; display: none; }
.catalog-view .val-row { color: #555; }
.badge-generated { background: #dbe9ff; color: #1c4d8f; }
.badge-approved  { background: #d9f2d9; color: #216321; }
.badge-rejected  { background: #f8dcdc; color: #8f1c1c; }
.badge-exported  { background: #e9defa; color: #5a2ea6; }

.bulk-bar { display: flex; align-items: center; gap: 10px; margin-top: 10px; flex-wrap: wrap; }
.bulk-bar input[type="text"] { padding: 6px 8px; border: 1px solid var(--border); border-radius: 5px; font: inherit; }

.btn {
  padding: 6px 14px; border: 1px solid var(--border); border-radius: 6px;
  background: #fff; cursor: pointer; font: inherit;
}
.btn:hover { border-color: #999; }
.btn.ok     { background: #2e7d32; border-color: #2e7d32; color: #fff; }
.btn.danger { background: #b03030; border-color: #b03030; color: #fff; }

.grid { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
@media (max-width: 900px) { .grid { grid-template-columns: 1fr; } }

.col form label { display: block; margin-bottom: 10px; font-size: 13px; color: #44443f; }
.col form .hint { color: var(--muted); font-weight: normal; }
.col form input[type="text"], .col form textarea {
  display: block; width: 100%; margin-top: 3px; padding: 6px 8px;
  border: 1px solid var(--border); border-radius: 5px;
  font: inherit; font-size: 14px; background: #fff;
}
.col form textarea { resize: vertical; }
.col form input[disabled], .col form textarea[disabled] { background: #eee; color: #888; }

.review-actions { display: flex; gap: 16px; align-items: flex-start; flex-wrap: wrap; }
.review-actions form { display: flex; gap: 8px; align-items: flex-start; }
.review-actions textarea {
  width: 300px; padding: 6px 8px; border: 1px solid var(--border);
  border-radius: 5px; font: inherit; font-size: 14px;
}

.note-box {
  border-left: 4px solid #d9b44a; background: #fdf6e0;
  padding: 8px 12px; margin-bottom: 12px;
}
.meta-line { color: var(--muted); font-size: 14px; }
.muted { color: var(--muted); }
.crumbs { margin: 0 0 4px; font-size: 14px; }
.empty { color: var(--muted); font-style: italic; }

/* расход токенов и лимиты */
.budget-box { background: #fff; border: 1px solid var(--border); border-radius: 6px;
              padding: 8px 12px; margin: 0 0 14px; }
.budget-box summary { cursor: pointer; }
.budget-chip { display: inline-block; margin-right: 10px; padding: 1px 9px;
               background: #eef3fb; border-radius: 10px; font-size: 13px; }
.budget-chip.over { background: #fdeaea; color: #8f1c1c; font-weight: 600; }
.budget-form { display: flex; flex-wrap: wrap; gap: 14px; align-items: center;
               margin: 8px 0; }
.budget-form label.inline { display: inline-flex; align-items: center; gap: 6px;
                            font-size: 13px; margin: 0; }
.budget-bar { position: relative; height: 16px; background: #eee; border-radius: 8px;
              overflow: hidden; margin: 5px 0; }
.budget-fill { position: absolute; left: 0; top: 0; bottom: 0; background: #7fb07f; }
.budget-fill.over { background: #c96a6a; }
.budget-bar-label { position: relative; font-size: 11px; padding-left: 8px;
                    line-height: 16px; color: #333; }

/* дерево карты семантики (/tree) */
.legend { display: flex; flex-wrap: wrap; gap: 14px; margin: 0 0 14px;
          font-size: 13px; color: var(--muted); }
.legend-item { display: inline-flex; align-items: center; gap: 5px; }
.dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%;
       border: 1px solid rgba(0,0,0,.15); flex: none; }
.dot-keyword      { background: #d8d8d2; }
.dot-mapped       { background: #46a86a; }
.dot-no_combo     { background: #d98f36; }
.dot-selection_ok { background: #e8c33c; }
.dot-generated    { background: #4a86d8; }
.dot-approved     { background: #2e7d32; }
.dot-rejected     { background: #c04a4a; }
.dot-exported     { background: #7d4fc4; }
.dot-none         { background: #fff; }

.tree { background: #fff; border: 1px solid var(--border); border-radius: 6px;
        padding: 8px 12px; }
.tree details { margin: 2px 0; }
.tree summary { cursor: pointer; padding: 3px 0; }
.tree summary:hover { background: #f6f9ff; }
.group-title { font-weight: 600; }
.group-counts { margin-left: 8px; }
.mini-count { display: inline-flex; align-items: center; gap: 3px;
              margin-right: 7px; font-size: 12px; color: var(--muted); }
.group-actions, .leaf-actions { display: inline-flex; gap: 6px; margin-left: 8px;
                                vertical-align: middle; }
.group-actions form, .leaf-actions form { display: inline; }
.tree-children { border-left: 1px dotted #ccc; margin-left: 7px; padding-left: 13px; }
.tree-leaf { display: flex; align-items: center; gap: 7px; padding: 2px 0;
             font-size: 14px; }
.tree-leaf .hint { color: var(--muted); font-size: 12px; }
.tree-leaf:hover { background: #f6f9ff; }
.btn-mini { padding: 2px 9px; font-size: 12px; border-radius: 4px; }
.flash-target { box-shadow: 0 0 0 2px var(--accent); border-radius: 4px; }

dl.sel {
  display: grid; grid-template-columns: max-content 1fr; gap: 4px 14px;
  background: #fff; border: 1px solid var(--border); border-radius: 6px;
  padding: 10px 12px; margin: 0 0 10px;
}
dl.sel dt { font-weight: 600; }
dl.sel dd { margin: 0; }
details summary { cursor: pointer; color: var(--accent); margin-bottom: 6px; }

/* --- вход в UI --- */
.topbar .logout-form { margin: 0; }
.login-page { display: flex; align-items: center; justify-content: center;
              min-height: 100vh; }
.login-box {
  width: 320px; background: #fff; border: 1px solid var(--border);
  border-radius: 8px; padding: 22px 24px;
}
.login-box h1 { margin: 0 0 16px; font-size: 19px; }
.login-box label { display: block; margin-bottom: 12px; font-size: 13px;
                   color: var(--muted); }
.login-box input { display: block; width: 100%; margin-top: 4px; padding: 7px 9px;
                   font: inherit; border: 1px solid var(--border); border-radius: 4px; }
.login-box .btn { width: 100%; padding: 8px; }