/* CARDTOOLS · components — переиспользуемые элементы: панели, кнопки, формы,
   теги, отчёты, таблицы, списки, индикаторы */

/* ---------- индикаторы ---------- */
.dot{width:7px;height:7px;flex:none;border-radius:50%;background:var(--green);animation:pulse 2.2s infinite}
.dot.red{background:var(--red);animation-name:pulse-red}
.dot.amber{background:var(--amber);animation-name:pulse-amber}

/* переключатель языка */
.lang-switch{display:inline-flex;border:1px solid var(--line-2);border-radius:4px;overflow:hidden;background:#fff}
.lang-seg{
  font:700 9.5px var(--mono);letter-spacing:.12em;padding:4px 11px;cursor:pointer;
  background:transparent;color:var(--ink-3);border:0;border-right:1px solid var(--line-2);
  transition:background .15s,color .15s;
}
.lang-seg:last-child{border-right:0}
.lang-seg:hover{color:var(--ink);background:var(--paper-2)}
.lang-seg.active{background:var(--ink);color:#fff}

/* ---------- заголовки страниц ---------- */
.page-head{margin-bottom:26px}
.kicker{display:flex;align-items:center;gap:12px;font:600 10.5px var(--mono);text-transform:uppercase;letter-spacing:.18em;color:var(--accent)}
.kicker::before{content:'';width:26px;height:2px;background:var(--accent)}
.title{font-family:var(--display);font-weight:800;font-size:clamp(25px,3.2vw,38px);line-height:1.12;letter-spacing:-.01em;margin-top:12px}
.title .outline{color:transparent;-webkit-text-stroke:1.6px var(--ink)}
.lede{margin-top:12px;color:var(--ink-2);max-width:62ch;font-size:15px}

/* ---------- статистическая лента ---------- */
.stat-strip{display:flex;flex-wrap:wrap;border:1px solid var(--line);border-radius:7px;background:#fff;overflow:hidden;margin:26px 0}
.stat{flex:1 1 180px;padding:15px 20px;border-right:1px solid var(--line);transition:background .2s}
.stat:hover{background:var(--paper-2)}
.stat:last-child{border-right:0}
.stat .v{font-family:var(--display);font-weight:700;font-size:23px;letter-spacing:-.01em}
.stat .unit{font:600 12px var(--mono);color:var(--ink-2);margin-left:2px}
.stat .l{font:500 10px var(--mono);text-transform:uppercase;letter-spacing:.12em;color:var(--ink-3);margin-top:4px}

/* ---------- панели ---------- */
.panel{border:1px solid var(--line);border-radius:7px;background:#fff;overflow:hidden}
.panel-head{display:flex;align-items:center;gap:12px;padding:12px 18px;border-bottom:1px solid var(--line);background:linear-gradient(#fff,var(--paper-2))}
.panel-title{font:600 11px var(--mono);text-transform:uppercase;letter-spacing:.14em;color:var(--ink)}
.panel-head .hint{margin-left:auto;font:500 10px var(--mono);color:var(--ink-3);letter-spacing:.08em}
.live{margin-left:auto;display:flex;align-items:center;gap:6px;font:700 9.5px var(--mono);letter-spacing:.18em;color:var(--red)}
.live .dot{background:var(--red);animation-name:pulse-red}
.live.ok{color:var(--green)}
.live.ok .dot{background:var(--green);animation-name:pulse}

/* ---------- кнопки ---------- */
.btn{
  display:inline-flex;align-items:center;gap:9px;cursor:pointer;
  font:600 13px var(--body);padding:11px 19px;border-radius:5px;
  border:1px solid var(--ink);background:var(--ink);color:#fff;
  transition:background .18s,border-color .18s,transform .12s,box-shadow .18s;
}
.btn .arr{font-family:var(--mono);transition:transform .2s}
.btn:hover{background:var(--accent);border-color:var(--accent);transform:translateY(-1px);box-shadow:0 5px 14px rgba(0,56,224,.28)}
.btn:hover .arr{transform:translateX(3px)}
.btn:active{transform:translateY(0);box-shadow:none}
.btn.is-loading{opacity:.55;pointer-events:none}
.btn.ghost{background:#fff;color:var(--ink);border-color:var(--line-2)}
.btn.ghost:hover{border-color:var(--ink);background:var(--paper-2);box-shadow:none;transform:none}

/* ---------- формы ---------- */
.form-panel{padding:22px}
.field{margin-bottom:16px}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.label{display:block;font:600 10px var(--mono);text-transform:uppercase;letter-spacing:.14em;color:var(--ink-2);margin-bottom:7px}
.input,select.input,textarea.input{
  width:100%;font:500 13.5px/1.5 var(--mono);color:var(--ink);
  padding:11px 13px;border:1px solid var(--line-2);border-radius:5px;background:#fff;
  transition:border-color .15s,box-shadow .15s;appearance:none;
}
select.input{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%235d5d57' stroke-width='1.5' fill='none'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 13px center;padding-right:34px}
textarea.input{resize:vertical;min-height:120px}
.input::placeholder{color:var(--ink-3)}
.input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.check{display:flex;align-items:center;gap:9px;font:500 12.5px var(--mono);color:var(--ink-2);cursor:pointer;user-select:none}
.check input{accent-color:var(--accent);width:15px;height:15px}
.form-actions{display:flex;align-items:center;gap:10px;margin-top:20px}
.form-note{margin-left:auto;font:500 10.5px var(--mono);color:var(--ink-3)}

/* ---------- зона результата ---------- */
.result{margin-top:22px;min-height:140px}
.result:first-child{margin-top:0}
.empty{border:1.5px dashed var(--line-2);border-radius:7px;padding:44px 20px;text-align:center;color:var(--ink-3);font-size:13px;background:rgba(255,255,255,.6)}
.empty .glyph{display:block;font-family:var(--mono);font-size:20px;margin-bottom:8px;opacity:.55;animation:blink 2.4s infinite}

/* скелетон загрузки */
.skel{padding:22px;display:grid;gap:13px;border:1px solid var(--line);border-radius:7px;background:#fff}
.skel .line{height:12px;border-radius:3px;background:linear-gradient(90deg,var(--paper-2) 25%,#ebebe4 50%,var(--paper-2) 75%);background-size:200% 100%;animation:shimmer 1.1s infinite}

/* ---------- отчёт ---------- */
.report{border:1px solid var(--line);border-radius:7px;background:#fff;animation:fadeUp .35s both;overflow:hidden}
.report-head{display:flex;align-items:center;flex-wrap:wrap;gap:12px;padding:14px 20px;border-bottom:1px solid var(--line);background:var(--paper-2)}
.report-label{font:600 9.5px var(--mono);text-transform:uppercase;letter-spacing:.16em;color:var(--ink-3)}
.report-query{font:700 15px var(--mono);letter-spacing:.02em}
.report-time{margin-left:auto;font:500 10.5px var(--mono);color:var(--ink-3)}
.score{display:flex;align-items:center;gap:9px}
.score-label{font:600 9.5px var(--mono);text-transform:uppercase;letter-spacing:.14em;color:var(--ink-3)}
.score-bar{width:110px;height:6px;background:#fff;border:1px solid var(--line-2);border-radius:3px;overflow:hidden}
.score-bar i{display:block;height:100%;animation:grow .9s cubic-bezier(.2,.7,.3,1) both}
.score-bar.ok i{background:var(--green)}.score-bar.warn i{background:var(--amber)}.score-bar.bad i{background:var(--red)}
.score-num{font:700 14px var(--mono)}

.kv{display:grid;grid-template-columns:1fr 1fr}
.kv-row{display:flex;justify-content:space-between;align-items:baseline;gap:14px;padding:11px 20px;border-bottom:1px solid var(--line)}
.kv-row:nth-child(odd){border-right:1px solid var(--line)}
.kv .k{font:500 10px var(--mono);text-transform:uppercase;letter-spacing:.1em;color:var(--ink-3);flex:none}
.kv .v{font:500 13px var(--mono);text-align:right;word-break:break-word}
.report-foot{padding:13px 20px;border-top:1px solid var(--line);display:flex;align-items:center;gap:10px;flex-wrap:wrap;background:var(--paper-2)}
.foot-label{font:600 9.5px var(--mono);text-transform:uppercase;letter-spacing:.14em;color:var(--ink-3)}
.review-list{padding:14px 20px;border-top:1px solid var(--line);background:var(--paper-2)}
.review-head{display:block;font:600 9.5px var(--mono);text-transform:uppercase;letter-spacing:.14em;color:var(--ink-3);margin-bottom:10px}
.review-row{padding:9px 0;border-top:1px solid var(--line)}
.review-row:first-of-type{border-top:0}
.review-top{display:flex;align-items:center;gap:9px;margin-bottom:4px}
.review-stars{font:12px/1 var(--mono);color:var(--amber);letter-spacing:1px}
.review-author{font:600 11px var(--mono);color:var(--ink)}
.review-text{display:block;font:500 12.5px/1.5 var(--mono);color:var(--ink-2);word-break:break-word}
.review-tags{display:flex;flex-wrap:wrap;gap:5px;margin-top:6px}

.whois{font:500 11.5px/1.7 var(--mono);color:var(--ink-2);background:var(--paper-2);border-top:1px solid var(--line);padding:14px 20px;overflow-x:auto}
.whois b{color:var(--accent-ink);font-weight:600}

/* ---------- чипы и теги ---------- */
.chip{display:inline-flex;align-items:center;gap:6px;font:600 10.5px var(--mono);letter-spacing:.04em;padding:4px 10px;border-radius:3px;border:1px solid}
.chip::before{content:'';width:5px;height:5px;border-radius:50%;background:currentColor}
.chip.ok{color:var(--green);border-color:#bfe5d2;background:var(--green-soft)}
.chip.warn{color:var(--amber);border-color:#f0d9ae;background:var(--amber-soft)}
.chip.bad{color:var(--red);border-color:#f3c4be;background:var(--red-soft)}
.chip.mute{color:var(--ink-2);border-color:var(--line-2);background:var(--paper-2)}
.tag{font:700 9.5px var(--mono);text-transform:uppercase;letter-spacing:.08em;padding:3px 8px;border-radius:3px}
.tag.ok{background:var(--green-soft);color:var(--green)}
.tag.warn{background:var(--amber-soft);color:var(--amber)}
.tag.bad{background:var(--red-soft);color:var(--red)}
.tag.mute{background:var(--paper-3);color:var(--ink-2)}
.tag.run{background:var(--accent-soft);color:var(--accent);animation:blink .9s infinite}

/* ---------- списки-инфопанели ---------- */
.info-list{list-style:none}
.info-list li{display:flex;gap:12px;align-items:baseline;padding:10px 18px;border-bottom:1px solid var(--line);font-size:12.5px;color:var(--ink-2);transition:background .15s}
.info-list li:hover{background:var(--paper-2)}
.info-list li:last-child{border-bottom:0}
.info-list .idx{font:700 10px var(--mono);color:var(--ink-3);flex:none}
.info-list b{color:var(--ink);font-weight:600}
.mini-item{display:flex;align-items:center;gap:10px;padding:9px 18px;border-bottom:1px solid var(--line);font:500 12px var(--mono)}
.mini-item:last-child{border-bottom:0}
.mini-item .t{margin-left:auto;color:var(--ink-3);font-size:10px}

/* ---------- таблицы ---------- */
.tbl-wrap{overflow-x:auto}
.tbl{width:100%;border-collapse:collapse;font:500 12.5px var(--mono)}
.tbl th{font:600 9.5px var(--mono);text-transform:uppercase;letter-spacing:.12em;color:var(--ink-3);text-align:left;padding:10px 16px;border-bottom:1px solid var(--line);background:var(--paper-2);white-space:nowrap}
.tbl td{padding:10px 16px;border-bottom:1px solid var(--line);vertical-align:middle}
.tbl tbody tr{animation:fadeUp .35s both;transition:background .12s}
.tbl tbody tr:hover{background:var(--paper-2)}
.tbl tbody tr:last-child td{border-bottom:0}
.tbl .mut{color:var(--ink-3)}
.tbl tr.row-bad{background:var(--red-soft)}
.tbl tr.row-bad:hover{background:#fbe3e1}
.ping-ok{color:var(--green);font-weight:600}
.ping-warn{color:var(--amber);font-weight:600}
.ping-bad{color:var(--red);font-weight:600}
.copy{
  font:600 9.5px var(--mono);letter-spacing:.06em;cursor:pointer;color:var(--ink-3);
  background:#fff;border:1px solid var(--line-2);border-radius:3px;padding:2px 7px;margin-left:8px;
  transition:.15s;
}
.copy:hover{color:var(--accent);border-color:var(--accent);background:var(--accent-soft)}
.copy.done{color:var(--green);border-color:var(--green);background:var(--green-soft)}

/* ---------- сводка чекера ---------- */
.sum-strip{display:grid;grid-template-columns:repeat(4,1fr);border-bottom:1px solid var(--line)}
.sum{padding:14px 18px;border-right:1px solid var(--line)}
.sum:last-child{border-right:0}
.sum .n{font-family:var(--display);font-weight:700;font-size:20px}
.sum .n.bad{color:var(--red)}.sum .n.ok{color:var(--green)}
.sum .l{font:500 9.5px var(--mono);text-transform:uppercase;letter-spacing:.12em;color:var(--ink-3);margin-top:3px}

/* ---------- баннер доступа ---------- */
/* ---------- boot error ---------- */
.boot-error{max-width:560px;margin:80px auto;text-align:center}
.boot-error h2{font-family:var(--display);font-size:22px;margin-bottom:12px}
.boot-error code{display:inline-block;margin-top:14px;font:600 13px var(--mono);background:var(--paper-2);border:1px solid var(--line-2);border-radius:5px;padding:10px 16px}

/* ---------- адаптив ---------- */
@media (max-width:900px){
  .kv{grid-template-columns:1fr}
  .kv-row:nth-child(odd){border-right:0}
  .field-row{grid-template-columns:1fr}
  .sum-strip{grid-template-columns:1fr 1fr}
  .sum{border-bottom:1px solid var(--line)}
}