:root{
  --bg:#f6f8fb;--card:#fff;--primary:#2563eb;--ok:#8ABD3C;--bad:#C8482B;--muted:#556276;
  --measure:72ch;                     /* комфортная ширина текста */
}
*{box-sizing:border-box}
body{font-family:Inter,Segoe UI,Roboto,Arial;margin:0;background:var(--bg);color:#111}
.wrap{max-width:1180px;margin:24px auto;padding:16px}
.header{display:flex;gap:8px;align-items:center;margin-bottom:12px;flex-wrap:wrap}
input[type=text],select{padding:10px;border:1px solid #d6dbe6;border-radius:8px;background:#fff}
input[type=text]{flex:1;min-width:260px}
button{padding:10px 14px;border:0;border-radius:8px;background:var(--primary);color:#fff;cursor:pointer}

.grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.card{background:var(--card);border:1px solid #eef3ff;border-radius:12px;padding:14px;box-shadow:0 6px 30px rgba(20,30,50,.06)}
.small{font-size:13px;color:var(--muted)}
.heading{font-size:18px;margin:0 0 8px}
.kv{display:grid;grid-template-columns:220px minmax(0,1fr);gap:8px}
.kv > div:nth-child(2n){
  max-width:var(--measure);
  overflow-wrap:anywhere;word-break:break-word;hyphens:auto;white-space:normal;
}
.kv a{word-break:break-all}

progress{width:100%}
pre{background:#0b1220;color:#e6eef8;padding:12px;border-radius:8px;overflow:auto}

.test{margin-top:10px}
.test .title{display:flex;align-items:center;gap:8px;font-weight:600}
.test .title + .small{
  max-width:var(--measure);overflow-wrap:anywhere;word-break:break-word;hyphens:auto;
}

/* clamped (для длинных текстов) */
.clamp{
  position:relative;max-height:92px;overflow:hidden;
}
.clamp.open{max-height:none}
.clamp .fade{
  content:"";position:absolute;inset:auto 0 0 0;height:48px;
  background:linear-gradient(to bottom, rgba(255, 255, 255, 0), #ffffffad 60%);
  display:block;
}
.clamp.open .fade{display:none}
.clamp-toggle{
  margin-top:6px;font-size:13px;background:#eef3ff;color:#2b3a52;border:1px solid #e1e7f7;border-radius:6px;padding:4px 8px;cursor:pointer;
}

/* таблицы заголовков */
.table{width:100%;border-collapse:collapse}
.table th,.table td{padding:6px 8px;border-bottom:1px solid #eef3ff;text-align:left}
.table th{font-size:12px;color:#556276}

/* адаптив */
@media(max-width:900px){
  .grid{grid-template-columns:1fr}
  .kv{grid-template-columns:1fr}
  .kv > div:nth-child(2n){max-width:100%}
  .wrap{padding:12px}
  .header{gap:6px}
}


/* === ГЛАВНАЯ СЕТКА: две равные колонки без переполнений === */
.grid{
  display:grid;
  grid-template-columns: minmax(0,1fr) minmax(0,1fr); /* не даём контенту расталкивать сетку */
  gap:12px;
  align-items:start;
}

/* карточки и их содержимое обязаны ужиматься внутри колонки */
.card{min-width:0}
.card > *{min-width:0}

/* kv-таблица: правая колонка растяжимая, но не переполняет */
.kv{
  display:grid;
  grid-template-columns: 220px minmax(0,1fr);
  gap:8px;
}

/* длинные тексты/URL не ломают макет */
.kv > div:nth-child(2n),
.card,
.small{
  overflow-wrap:anywhere;
  word-break:break-word;
  hyphens:auto;
}

/* таблицы и pre не должны расползаться */
.table{table-layout:fixed;width:100%}
.table th,.table td{word-wrap:break-word;overflow-wrap:anywhere}
pre,.scroll-x{overflow-x:auto;max-width:100%}

/* убираем горизонтальный скролл на странице из-за редких переполнений */
html,body{max-width:100%; overflow-x:hidden}

/* верхняя панель на мобилках — в колонку и на всю ширину */
.header{flex-wrap:wrap}
.header > *{min-width:0}
input[type=text]{width:100%}

/* === БРЕЙКПОИНТЫ === */
@media (max-width: 1024px){
  .grid{ grid-template-columns: 1fr; } /* одна колонка на планшет/небольшой экран */
}
@media (max-width: 600px){
  .header{ flex-direction:column; align-items:stretch; gap:6px; }
  #custom_user_agent{ width:100%; min-width:unset; }
  .kv{ grid-template-columns: 1fr; }   /* подписи над значением на узких экранах */
}


/* Header Score Card */
.scorecard{
  background:var(--card);border:1px solid #eef3ff;border-radius:12px;padding:14px;margin-bottom:12px;
  box-shadow:0 6px 30px rgba(20,30,50,.06);display:grid;grid-template-columns:1fr auto;gap:12px;align-items:center;min-width:0;
}
.score-title{font-weight:700;font-size:16px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.score-sub{font-size:12px;color:var(--muted)}
.progress-wrap{display:flex;align-items:center;gap:10px}
.progressbar{flex:1;height:8px;border-radius:999px;background:#e8eefb;overflow:hidden}
.progressbar > span{display:block;height:100%;background:var(--primary);width:0%}
.score-badges{font-size:12px;color:#2b3a52}
.badge{display:inline-flex;align-items:center;gap:6px;margin-right:12px}
.badge .ok{width:8px;height:8px;border-radius:50%;background:#8ABD3C}
.badge .warn{width:8px;height:8px;border-radius:50%;background:#f4b000}
.badge .err{width:8px;height:8px;border-radius:50%;background:#C8482B}
@media(max-width:900px){ .scorecard{grid-template-columns:1fr} }


.yes1 { font-size: 14px; background: #f3ffee; color: #2b3a52; border: 1px solid #e2f7e1; border-radius: 4px; padding: 2px 5px; width: fit-content; overflow-wrap: anywhere; word-break: break-word; hyphens: auto; }
.yes2 { font-size: 14px; background: #fff7ee; color: #2b3a52; border: 1px solid #f7eee1; border-radius: 4px; padding: 2px 5px; width: fit-content; overflow-wrap: anywhere; word-break: break-word; hyphens: auto; }
.yes3 { font-size: 14px; background: #ffeeee; color: #2b3a52; border: 1px solid #f7e1e1; border-radius: 4px; padding: 2px 5px; width: fit-content; overflow-wrap: anywhere; word-break: break-word; hyphens: auto; }



#progress-bar {
  position: fixed;
  top: 0;
  left: 0;
  height: 9px;
  margin-top: 2px;
  background: var(--primary);
  width: 0%;
  z-index: 9999;
  transition: width 0.3s ease, opacity 0.4s ease;
  opacity: 0;
}

.table th, .table td {
	padding: 3px 2px;
	font-size: 14px;
}


.lgt-progress{width:100%}
.lgt-progress-outer{width:100%}
.lgt-progress-inner{width:100%;background:#e8eefb;border-radius:999px;overflow:hidden}
.lgt-progress-bg{height:8px;border-radius:999px;background:var(--primary);transition:width .4s ease}
.basetest .title{display:flex;align-items:center;gap:8px;font-weight:600}
.basetest .okdot{width:18px;height:18px;display:inline-block}


/* masonry-поток для карточек: тесная укладка без «дыр» */
.grid.masonry{
  /* отключаем grid-поведение, включаем колонки */
  display: block;
  column-gap: 12px;
  column-fill: balance;
  /* можно вместо column-count задать column-width */
  column-count: 2;
}

/* мобильная одноколоночная раскладка */
@media (max-width: 900px){
  .grid.masonry{ column-count: 1; }
}

/* важное: запрещаем разрыв карточки между колонками */
.grid.masonry .card{
  break-inside: avoid;     /* современный синтаксис */
  -webkit-column-break-inside: avoid; /* Safari */
  page-break-inside: avoid;
  display: inline-block;   /* чтобы карточка уважала ширину колонки */
  width: 100%;
  margin: 0 0 12px;
}
.card pre{ white-space: pre-wrap; word-break: break-word; }
.card table{ width:100%; }
.card img{ max-width:100%; height:auto; display:block; }


/* Контейнер */
.tool-wrap{max-width:1120px;margin:24px auto;padding:0 16px}

/* Хедер */
.tool-hero{
  background:#fff;border:1px solid #eef3ff;border-radius:12px;
  padding:20px 22px;margin-bottom:16px;box-shadow:0 6px 30px rgba(20,30,50,.06)
}
.tool-hero h1{margin:0 0 8px;font-size:22px;line-height:1.25}
.tool-hero p{margin:0;color:#556276;font-size:14px}

/* Карточка формы */
.tool-form-card{
  background:#fff;border:1px solid #eef3ff;border-radius:12px;
  padding:18px 16px;margin-bottom:18px;box-shadow:0 6px 30px rgba(20,30,50,.06)
}
.form-grid{
  display:grid;grid-template-columns:1fr 1fr 1fr auto;gap:12px;align-items:end
}
.field{display:flex;flex-direction:column;gap:6px;min-width:0}
.field-full{grid-column:1/-1}
.field-actions{display:flex;align-items:flex-end}

/* Инпуты/селекты/кнопка */
.tool-form-card label{font-size:12px;color:#556276}
.tool-form-card input[type="text"], .tool-form-card select{
  width:100%;padding:11px 12px;border:1px solid #d6dbe6;border-radius:10px;
  background:#f9fbff;outline:none;transition:border .15s ease
}
.tool-form-card input[type="text"]:focus, .tool-form-card select:focus{
  border-color:#a8b5ff;background:#fff
}
.select-wrap{position:relative}
.select-wrap::after{
  content:"";position:absolute;right:10px;top:50%;width:0;height:0;pointer-events:none;
  border-left:6px solid transparent;border-right:6px solid transparent;border-top:6px solid #556276;transform:translateY(-25%)
}
.tool-form-card select{appearance:none;-webkit-appearance:none;padding-right:34px}

.btn-primary{
  padding:12px 18px;border:0;border-radius:10px;background:var(--primary,#2563eb);
  color:#fff;cursor:pointer;font-weight:600
}
.btn-primary[disabled]{opacity:.7;cursor:not-allowed}

/* Адаптив */
@media (max-width:900px){
  .form-grid{grid-template-columns:1fr}
  .field-actions{order:4}
}


.scorecard {
	display: flex;
	align-items: center;
	background: #fff;
	border: 1px solid #eef3ff;
	border-radius: 12px;
	overflow: hidden;
}