* { box-sizing: border-box; }
body { font-family: "Liberation Sans", Arial, sans-serif; margin: 0; color: #1a1a1a;
       background: #f7f8fa; font-size: 14px; }
nav { background: #0d4d8c; color: #fff; display: flex; gap: 18px; padding: 10px 22px;
      align-items: center; }
nav a { color: #cfe0f0; text-decoration: none; }
nav a:hover { color: #fff; }
nav .brand { font-weight: bold; font-size: 16px; margin-right: 12px; }
nav .spacer { flex: 1; }
.mode-badge { background: #e0a800; color: #222; font-weight: bold; padding: 2px 10px;
              border-radius: 10px; font-size: 12px; }
main { max-width: 1280px; margin: 0 auto; padding: 20px; }
h1 { font-size: 20px; } h2 { font-size: 15px; margin-top: 24px; color: #0d4d8c; }
.muted { color: #666; } .small { font-size: 12px; } .num { text-align: right; }
.error { color: #c0392b; }
code { background: #eee; padding: 1px 4px; border-radius: 3px; font-size: 12px; }

.cards { display: flex; gap: 12px; flex-wrap: wrap; margin: 12px 0; }
.card { background: #fff; border: 1px solid #dde3ea; border-radius: 8px;
        padding: 14px 18px; min-width: 110px; text-align: center; }
.card-num { font-size: 24px; font-weight: bold; color: #0d4d8c; }
.card-label { font-size: 11px; color: #777; }

.alerts { margin: 10px 0; }
.alert { background: #fff3cd; border-left: 4px solid #e0a800; padding: 8px 12px;
         margin-bottom: 6px; border-radius: 4px; }
.alert.critical { background: #f8d7da; border-left-color: #c0392b; }
.alert-kind { font-weight: bold; margin-right: 8px; }

.tbl { width: 100%; border-collapse: collapse; background: #fff; margin: 10px 0; }
.tbl th, .tbl td { padding: 7px 10px; border-bottom: 1px solid #e6eaf0;
                   text-align: left; vertical-align: top; }
.tbl th { background: #f0f4f9; font-size: 12px; color: #556; }
.crow:hover { background: #f4f8fc; }
.icons { white-space: nowrap; }
.timeline { font-size: 12px; color: #667; max-width: 260px; }
.subrow td { display: none; }
.subrow.open td { display: table-cell; }
.subcell { background: #f4f8fc; padding: 8px 16px !important; }
.contact-row { display: flex; gap: 10px; align-items: center; padding: 4px 0;
               border-bottom: 1px dashed #dde; font-size: 13px; flex-wrap: wrap; }
.contact-row.row-saved { background: #d4edda; transition: background .2s; }
.email { font-family: monospace; word-break: break-all; }

.badge { display: inline-block; padding: 1px 8px; border-radius: 10px;
         font-size: 11px; background: #e8edf3; color: #445; }
.badge.primary { background: #d4edda; color: #1d6b2f; }
.badge.risk, .badge.chk-fail { background: #f8d7da; color: #8b1c24; }
.badge.ok, .badge.chk-ok { background: #d4edda; color: #1d6b2f; }
.badge.warn, .badge.chk-warn { background: #fff3cd; color: #7a5b00; }
.badge.chk-skipped { background: #e2e3e5; color: #555; }
.badge.cls-personal { background: #d4edda; color: #1d6b2f; }
.badge.cls-corporate { background: #cfe2f3; color: #0d4d8c; }
.badge.cls-undefined { background: #e2e3e5; color: #555; }
.badge.cls-risky { background: #f8d7da; color: #8b1c24; }
.badge.st-running { background: #d4edda; color: #1d6b2f; }
.badge.st-paused { background: #fef3c7; color: #b45320; }
.badge.st-stopped_loss { background: #f8d7da; color: #8b1c24; }
.badge.st-draft, .badge.st-checking, .badge.st-finished { background: #e2e3e5; color: #555; }
.badge.st-ready { background: #cfe2f3; color: #0d4d8c; }

/* плашки результата действия (?ok= / ?err= / ?queued=) */
.flash { padding: 8px 12px; border-radius: 4px; margin: 10px 0; }
.flash.ok { background: #d4edda; border-left: 4px solid #1d6b2f; color: #1d6b2f; }
.flash.err { background: #f8d7da; border-left: 4px solid #c0392b; color: #8b1c24; }

/* мини-чек-лист запуска кампании в шапке */
.steps-mini { display: flex; gap: 8px; align-items: center; margin: 0 0 14px;
              font-size: 12px; }
.steps-mini .step { padding: 3px 10px; border-radius: 12px; background: #e2e3e5;
                    color: #555; }
.steps-mini .step.cur { background: #cfe2f3; color: #0d4d8c; font-weight: bold; }
.steps-mini .step.done { background: #d4edda; color: #1d6b2f; }
.steps-mini .step-arrow { color: #98a; }

/* Спам-скор: шкалы с зонами и маркерами «сейчас» / «ожидаемо в бою» */
.spam-eng { margin: 8px 0 14px; min-width: 300px; }
.spam-scale { position: relative; display: flex; height: 12px; border-radius: 6px;
              overflow: hidden; margin-top: 5px; }
.spam-scale .zone { height: 100%; }
.z-green { background: #bfe3c6; }
.z-yellow { background: #ffe9a8; }
.z-orange { background: #ffcda1; }
.z-red { background: #f3b3ba; }
.spam-scale .marker { position: absolute; top: -2px; bottom: -2px; width: 3px;
                      background: #1a1a1a; border-radius: 2px; }
.spam-scale .marker.battle { top: 50%; bottom: auto; width: 9px; height: 9px;
                             margin: -4.5px 0 0 -4.5px; background: #0369A1;
                             border: 2px solid #fff; border-radius: 50%; }
.spam-scale-marks { position: relative; height: 13px; font-size: 10px; color: #99a; }
.spam-scale-marks span { position: absolute; transform: translateX(-50%); }
.legend-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%;
              background: #0369A1; vertical-align: baseline; }
.spam-rules { margin: 6px 0 2px; }
.spam-rules td { border-bottom: 1px solid #f0f2f6; padding: 3px 8px; }
.spam-pts { font-weight: bold; white-space: nowrap; width: 1%; }
.spam-pts.neg { color: #1d6b2f; }
.battle-tag { background: #e3f0fa; color: #0369A1; border-radius: 8px;
              padding: 0 6px; font-size: 10px; white-space: nowrap; }

.btn, .btn-small { background: #0d4d8c; color: #fff; border: 0; border-radius: 4px;
                   padding: 8px 16px; cursor: pointer; text-decoration: none;
                   display: inline-block; font-size: 13px; }
.btn-small { padding: 3px 10px; font-size: 12px; }
.btn.go { background: #1d6b2f; } .btn.go[disabled] { background: #aaa; }
.btn.stop { background: #c0392b; }
.btn-small.go { background: #1d6b2f; } .btn-small.go[disabled] { background: #aaa; }
.btn-small.stop { background: #c0392b; }
.btn-small.ghost { background: #fff; color: #0d4d8c; border: 1px solid #0d4d8c; }
.btn-small.ghost:hover { background: #e2eefb; }
.btn-small.del { background: #fff; color: #c0392b; border: 1px solid #c0392b; }
.btn-small.del:hover { background: #f8d7da; }
.actions .btn-small { min-width: 110px; text-align: center; }

/* главная: полоса переключения кампаний */
.camp-bar { display: flex; gap: 10px; flex-wrap: wrap; align-items: center;
            background: #fff; border: 1px solid #dde3ea; border-radius: 10px;
            box-shadow: 0 1px 4px #0001; padding: 10px 16px; margin-bottom: 16px; }
.camp-bar-label { font-size: 13px; font-weight: bold; color: #667; }
.camp-pill { background: #f0f4f9; border: 1px solid #c8d2de; border-radius: 18px;
             padding: 7px 18px; color: #0d4d8c; text-decoration: none;
             font-size: 14px; }
.camp-pill:hover { border-color: #0d4d8c; }
.camp-pill.active { background: #0d4d8c; color: #fff; border-color: #0d4d8c; }
.camp-pill.active .badge { background: #ffffff33; color: #fff; }
.camp-add { background: #fff; border: 1px dashed #0d4d8c; font-weight: bold; }
.camp-add:hover { background: #e2eefb; }
.camp-head { display: flex; gap: 18px; align-items: center; flex-wrap: wrap;
             margin: 6px 0 14px; }
.camp-head h1 { margin: 0; }
.camp-head h1 .badge { margin-left: 8px; vertical-align: 3px; }
.camp-head .actions { margin-bottom: 0; margin-left: auto; display: flex;
                      gap: 8px; align-items: stretch; }
.camp-head .actions form { margin: 0; display: flex; }
/* кнопки шапки одинаковой высоты: у ghost/del есть рамка — даём такую же
   прозрачную остальным и выравниваем содержимое */
.camp-head .actions .btn-small { display: inline-flex; align-items: center;
  justify-content: center; min-width: 110px; box-sizing: border-box;
  border: 1px solid transparent; line-height: 1.25; }
.camp-head .actions .btn-small.ghost { border-color: #0d4d8c; }
.camp-head .actions .btn-small.del { border-color: #c0392b; }

/* компактные карточки дашборда */
.cards.compact .card { padding: 8px 14px; min-width: 90px; }
.cards.compact .card-num { font-size: 18px; }

/* главная: двухколоночная раскладка и панели */
.ws-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
           gap: 18px; align-items: start; }
@media (max-width: 1100px) { .ws-grid { grid-template-columns: 1fr; } }
.panel { background: #fff; border: 1px solid #dde3ea; border-radius: 8px;
         box-shadow: 0 1px 3px #0001; padding: 14px 18px; margin-bottom: 16px;
         overflow-x: auto; }
.panel > h2 { margin: 0 0 10px; }
.panel canvas { max-width: 100%; }
.param-grid { display: grid; gap: 1px; background: #dde3ea;
              border: 1px solid #dde3ea; border-radius: 8px; overflow: hidden;
              box-shadow: 0 1px 3px #0001; margin-bottom: 16px;
              grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
.param { background: #fff; padding: 10px 14px; }
.param-label { font-size: 11px; color: #6b7280; text-transform: uppercase;
               letter-spacing: .3px; margin-bottom: 3px; }
.param-value { font-size: 13px; }
.stat-line { font-size: 12px; color: #445; margin: 8px 0; }

/* компактная таблица ящиков в узкой колонке */
.mb-tbl { font-size: 12px; }
.mb-tbl th, .mb-tbl td { padding: 5px 8px; }
.mb-warmup { margin-top: 8px; }
.mb-warmup > summary { cursor: pointer; font-size: 13px; color: #0d4d8c;
                       font-weight: bold; padding: 6px 0; }

.filters { display: flex; gap: 10px; align-items: center; flex-wrap: wrap;
           background: #fff; padding: 10px 14px; border-radius: 8px;
           border: 1px solid #dde3ea; margin-bottom: 10px; }
.filters input[type=text], .filters input:not([type]), .filters select,
.campform input, .campform textarea, .addform input, form textarea, form select {
  padding: 6px 8px; border: 1px solid #c8d2de; border-radius: 4px; font-size: 13px; }
.bulkbar { display: flex; gap: 8px; align-items: center; margin: 8px 0; }
.inline-input { width: 140px; }
.pager { margin: 12px 0; display: flex; gap: 14px; align-items: center; }
.pager a { color: #0d4d8c; }

.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
@media (max-width: 900px) { .two-col { grid-template-columns: 1fr; } }
.kv { border-collapse: collapse; width: 100%; }
.kv td { padding: 5px 8px; border-bottom: 1px solid #e6eaf0; }
.kv td:first-child { color: #667; width: 160px; }
.note-item { background: #fff; border: 1px solid #e6eaf0; border-radius: 6px;
             padding: 8px 10px; margin-bottom: 6px; }
.progress { width: 120px; height: 8px; background: #dde3ea; border-radius: 4px;
            overflow: hidden; }
.progress .bar { height: 100%; background: #1d6b2f; }
.unread { font-weight: bold; }
.letter { background: #fff; border: 1px solid #dde3ea; border-radius: 8px;
          padding: 18px; margin-top: 10px; }
.letter pre { white-space: pre-wrap; font-family: inherit; }
.tpl-preview { background: #fff; border: 1px solid #dde3ea; border-radius: 8px;
               padding: 12px; white-space: pre-wrap; font-size: 12px; max-height: 400px;
               overflow: auto; }
.attach-card { display: flex; align-items: center; gap: 12px; background: #fff;
               border: 1px solid #dde3ea; border-radius: 8px; padding: 12px 14px; }
.attach-icon { font-size: 22px; }
.attach-meta { display: flex; flex-direction: column; gap: 2px; flex: 1; }
.attach-btn { white-space: nowrap; }
.actions { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.campform label { display: block; margin: 12px 0; }
.campform input[name=subject], .campform input[name=name],
.campform input[name=target_url], .campform textarea { width: 100%; }
.w70 { width: 70px; }
.login-body { display: flex; align-items: center; justify-content: center;
              min-height: 100vh; }
.login-form { background: #fff; padding: 30px; border-radius: 10px; width: 320px;
              box-shadow: 0 2px 12px #0001; display: flex; flex-direction: column; gap: 10px; }
.login-form input { padding: 8px; border: 1px solid #c8d2de; border-radius: 4px; }
.login-form button { background: #0d4d8c; color: #fff; border: 0; padding: 9px;
                     border-radius: 4px; cursor: pointer; }
.addform { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
.risks { display: flex; gap: 6px; flex-wrap: wrap; }

/* вариативные блоки шаблона письма (спинтакс) */
.tpl-label { font-size: 12px; color: #667; margin: 10px 0 4px; font-weight: bold; }
.tpl-editable { font-size: 13px; max-height: none; overflow: visible; }
.spin-group { background: #fff3cd; border-bottom: 2px dashed #e0a800; border-radius: 3px;
              position: relative; cursor: help; padding: 0 2px; }
.spin-popup { display: none; position: absolute; z-index: 30; top: 100%; left: 0;
  min-width: 420px; max-width: 600px; background: #fff; border: 1px solid #c8d2de;
  border-radius: 8px; box-shadow: 0 6px 18px #0003; padding: 8px 10px;
  white-space: normal; cursor: default; font-size: 12px; line-height: 1.4;
  max-height: 320px; overflow-y: auto; }
.spin-group:hover .spin-popup, .spin-group:focus-within .spin-popup { display: block; }
.spin-title { display: block; color: #667; margin-bottom: 6px; }
.spin-variant { display: flex; gap: 8px; align-items: flex-start; padding: 4px 0;
  border-top: 1px dashed #e6eaf0; }
.spin-vnum { flex: 0 0 18px; color: #98a; text-align: right; }
.spin-vtext { flex: 1; word-break: break-word; }
.spin-vops { display: flex; gap: 4px; flex: 0 0 auto; }
.spin-op { border: 1px solid #c8d2de; background: #f4f8fc; border-radius: 4px;
  cursor: pointer; padding: 1px 7px; font-size: 12px; line-height: 1.5; }
.spin-op:hover { background: #e2eefb; }
.spin-del:hover { background: #f8d7da; }
.spin-plus { width: 100%; color: #0d4d8c; font-weight: bold; }
.spin-editing .spin-editform { display: flex; gap: 6px; align-items: center;
  flex: 1; flex-wrap: wrap; }
.spin-input { flex: 1; min-width: 220px; padding: 4px 6px; border: 1px solid #c8d2de;
  border-radius: 4px; font-size: 12px; }
.spin-save { background: #d4edda; }
.spin-error { color: #c0392b; flex-basis: 100%; }

/* подсказка «?» — пояснение термина при наведении */
.help { position: relative; display: inline-block; width: 15px; height: 15px;
  line-height: 15px; text-align: center; border-radius: 50%; background: #b9c6d4;
  color: #fff; font-size: 11px; font-weight: bold; cursor: help; margin-left: 4px;
  vertical-align: 1px; user-select: none; }
.help:hover, .help:focus { background: #0d4d8c; }
.help-pop { display: none; position: absolute; z-index: 1000; top: 125%; left: 50%;
  transform: translateX(-50%); width: 250px; max-width: min(250px, 86vw);
  background: #2c3e50; color: #fff;
  border-radius: 6px; padding: 8px 10px; font-size: 12px; font-weight: normal;
  line-height: 1.45; white-space: normal; text-align: left; cursor: default;
  box-shadow: 0 4px 14px #0004; }
/* у крайних иконок подсказка не уходит за край экрана */
th:first-child .help-pop, td:first-child .help-pop, .param:first-child .help-pop {
  left: -6px; transform: none; }
th:last-child .help-pop, td:last-child .help-pop, .param:last-child .help-pop {
  left: auto; right: -6px; transform: none; }
.help:hover .help-pop, .help:focus .help-pop { display: block; }

/* полный вывод Google «Режим ИИ» по компании */
.ai-full { white-space: pre-wrap; background: #f6f8fa; border: 1px solid #dde4ea;
  border-radius: 6px; padding: 12px 14px; font-size: 13px; line-height: 1.5;
  max-width: 960px; overflow-wrap: anywhere; }

/* подсветка контактов в выводе ИИ */
.hl-email { background: #fff2b8; border-radius: 3px; padding: 0 2px; }
.hl-site { background: #d9ecff; border-radius: 3px; padding: 0 2px; }
.review-box { margin: 10px 0; padding: 10px 14px; border: 1px dashed #b9c6d4;
  border-radius: 6px; display: inline-block; }
.review-box.done { border: 1px solid #27ae60; background: #eafaf1; }