/* =========================================
   TOOLS PAGES (Bigger type, same brand)
   подключается ПОСЛЕ main.css
========================================= */

:root{
  --tool-max: 980px;
}

/* чуть крупнее базовый текст на страницах инструментов */
.tool-page{
  font-size: 16.5px;
}

.tool-page .container{
  max-width: var(--tool-max);
}

/* tool header */
.tool-hero{
  padding: 38px 0 14px;
}
.tool-hero-card{
  border-radius: var(--radius2);
  border:1px solid rgba(255,255,255,.10);
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
  box-shadow: var(--shadow2);
  padding: 22px 20px;
  position:relative;
  overflow:hidden;
}
.tool-hero-card:before{
  content:"";
  position:absolute; inset:-2px;
  background:
    radial-gradient(640px 220px at 10% 0%, rgba(123,97,255,.20), transparent 60%),
    radial-gradient(520px 220px at 90% 0%, rgba(0,200,255,.16), transparent 60%);
  opacity:.85;
  pointer-events:none;
}
.tool-hero-card > *{position:relative}

.tool-kicker{
  display:inline-flex; align-items:center; gap:10px;
  font-size: 13px;
  color: rgba(255,255,255,.84);
  padding:8px 12px;
  border-radius: 999px;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.10);
  margin-bottom: 12px;
}
.tool-kicker .dot{
  width:8px; height:8px; border-radius:50%;
  background: var(--good);
  box-shadow: 0 0 0 6px rgba(35,255,170,.12);
}
.tool-title{
  margin:0;
  font-size: clamp(30px, 3.2vw, 42px);
  letter-spacing: -0.7px;
  line-height: 1.08;
}
.tool-sub{
  margin: 12px 0 0;
  color: var(--muted);
  font-size: 16px;
  line-height: 1.75;
  max-width: 75ch;
}

.tool-grid{
  margin-top: 14px;
  display:grid;
  grid-template-columns: 1fr;
  gap: 14px;
}

.tool-panel{
  border-radius: var(--radius2);
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
  box-shadow: 0 16px 60px rgba(0,0,0,.35);
  padding: 16px;
}

.tool-row{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  align-items:flex-start;
}

.tool-tabs{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin-bottom: 12px;
}

.tool-tab{
  padding:10px 12px;
  border-radius: 999px;
  background: rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.10);
  color: rgba(255,255,255,.86);
  font-weight: 800;
  font-size: 13px;
  cursor:pointer;
}
.tool-tab[aria-selected="true"]{
  background: linear-gradient(135deg, rgba(123,97,255,.95), rgba(0,200,255,.85));
  border-color: rgba(255,255,255,.16);
}

.tool-label{
  font-size: 13px;
  color: var(--muted2);
  font-weight: 750;
  margin: 0 0 8px;
}

.tool-textarea{
  width:100%;
  min-height: 170px;
  resize: vertical;
  border-radius: 16px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.22);
  color: rgba(255,255,255,.92);
  padding: 14px 14px;
  font-size: 16px;
  line-height: 1.6;
  outline:none;
}
.tool-textarea:focus{
  border-color: rgba(123,97,255,.55);
  box-shadow: 0 0 0 6px rgba(123,97,255,.12);
}

.tool-input{
  width:100%;
  border-radius: 14px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.22);
  color: rgba(255,255,255,.92);
  padding: 12px 12px;
  font-size: 16px;
  outline:none;
}
.tool-input:focus{
  border-color: rgba(0,200,255,.55);
  box-shadow: 0 0 0 6px rgba(0,200,255,.10);
}

.tool-actions{
  margin-top: 12px;
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}
.tool-btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding: 12px 16px;
  border-radius: 14px;
  border:1px solid rgba(255,255,255,.12);
  font-weight: 850;
  font-size: 14px;
  letter-spacing:.2px;
  cursor:pointer;
  transition: transform .2s ease, background .2s ease, border-color .2s ease, filter .2s ease;
}
.tool-btn.primary{
  background: linear-gradient(135deg, rgba(123,97,255,.95), rgba(0,200,255,.85));
  box-shadow: 0 18px 50px rgba(123,97,255,.18), 0 14px 40px rgba(0,200,255,.12);
}
.tool-btn.primary:hover{transform: translateY(-1px); filter:saturate(1.08)}
.tool-btn.ghost{
  background: rgba(255,255,255,.04);
  color: rgba(255,255,255,.88);
}
.tool-btn.ghost:hover{transform: translateY(-1px); background: rgba(255,255,255,.06)}

.tool-hint{
  margin-top: 10px;
  color: var(--muted2);
  font-size: 13px;
  line-height: 1.65;
}

.tool-results-head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
  margin-bottom: 10px;
}
.tool-results-title{
  margin:0;
  font-size: 20px;
  font-weight: 900;
  letter-spacing: -.2px;
}
.tool-controls{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  align-items:center;
}

.select{
  appearance:none;
  padding: 10px 12px;
  border-radius: 14px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.22);
  color: rgba(255,255,255,.92);
  font-weight: 750;
}

.table-wrap{
  overflow:auto;
  border-radius: 16px;
  border:1px solid rgba(255,255,255,.08);
  background: rgba(0,0,0,.18);
}
.tool-table{
  width:100%;
  border-collapse: collapse;
  min-width: 760px;
}
.tool-table th, .tool-table td{
  padding: 12px 12px;
  border-bottom: 1px solid rgba(255,255,255,.06);
  text-align:left;
  vertical-align:top;
  font-size: 14px;
}
.tool-table th{
  position:sticky; top:0;
  background: rgba(10,14,26,.88);
  backdrop-filter: blur(10px);
  font-weight: 900;
  color: rgba(255,255,255,.88);
}
.tool-table td{
  color: rgba(255,255,255,.86);
}
.code-pill{
  font-family: var(--mono);
  padding: 6px 10px;
  border-radius: 999px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
  font-weight: 800;
  display:inline-block;
}
.code-2xx{border-color: rgba(35,255,170,.25)}
.code-3xx{border-color: rgba(0,200,255,.25)}
.code-4xx{border-color: rgba(255,211,107,.28)}
.code-5xx{border-color: rgba(255,105,180,.28)}

.details{
  font-family: var(--mono);
  font-size: 12px;
  color: rgba(255,255,255,.78);
  white-space: nowrap;
}

.tool-seo{
  margin-top: 14px;
}
.tool-seo h2{margin:0 0 10px; font-size: 22px}
.tool-seo h3{margin:18px 0 8px; font-size: 16px}
.tool-seo p{margin: 10px 0; color: var(--muted); line-height: 1.8}
.tool-seo ul{margin: 10px 0 0; padding-left: 18px}
.tool-seo li{margin: 8px 0; color: rgba(255,255,255,.80); line-height: 1.75}

@media (max-width: 720px){
  .tool-table{min-width: 620px}
  .tool-panel{padding: 14px}
}
/* ==============================
   FIX: TABLE WIDTH / LONG URLS
============================== */

/* таблица всегда в рамках панели, без вылезания */
.tool-panel { overflow: hidden; }

/* скролл только внутри table-wrap */
.table-wrap{
  max-width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
}

/* даём таблице нормальную ширину и не заставляем панель расширяться */
.tool-table{
  width: 100%;
  table-layout: fixed;      /* ключевой фикс */
  min-width: 920px;         /* можно 860-980 под себя */
}

/* колонки: URL и Final URL — режем красиво */
.tool-table th:nth-child(1),
.tool-table td:nth-child(1),
.tool-table th:nth-child(5),
.tool-table td:nth-child(5){
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* URL ссылка — тоже в одну строку, без растягивания */
.url-cell a{
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Details — не раздувает строку */
.details{
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ==============================
   LOADER OVERLAY (WAIT STATE)
============================== */

.tool-loading{
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(7,10,18,.72);
  backdrop-filter: blur(10px);
}

.tool-loading.is-on{ display:flex; }

.tool-loading-card{
  width: min(520px, calc(100% - 40px));
  border-radius: var(--radius2);
  border:1px solid rgba(255,255,255,.10);
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
  box-shadow: var(--shadow2);
  padding: 18px 18px;
  position: relative;
  overflow: hidden;
}

.tool-loading-card:before{
  content:"";
  position:absolute; inset:-2px;
  background:
    radial-gradient(620px 220px at 20% 0%, rgba(123,97,255,.22), transparent 60%),
    radial-gradient(520px 220px at 90% 0%, rgba(0,200,255,.16), transparent 60%);
  opacity:.85;
  pointer-events:none;
}

.tool-loading-card > *{ position:relative; }

.spinner{
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 3px solid rgba(255,255,255,.16);
  border-top-color: rgba(0,200,255,.95);
  animation: spin .8s linear infinite;
  margin-bottom: 12px;
}

@keyframes spin { to { transform: rotate(360deg); } }

.loading-title{
  margin:0;
  font-weight: 900;
  letter-spacing: -.2px;
  font-size: 18px;
}
.loading-text{
  margin: 8px 0 0;
  color: var(--muted);
  line-height: 1.65;
  font-size: 14px;
}

.btn[disabled], .tool-btn[disabled]{
  opacity: .55;
  cursor: not-allowed;
  transform: none !important;
}

/* ==============================
   CODE HIGHLIGHTS IN TEXT
============================== */

.code-hl{
  display:inline-block;
  padding: 4px 10px;
  border-radius: 999px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
  font-family: var(--mono);
  font-weight: 900;
  font-size: 13px;
  letter-spacing: .1px;
}

.code-hl.ok{
  border-color: rgba(35,255,170,.35);
  background: rgba(35,255,170,.08);
}

.code-hl.redir{
  border-color: rgba(0,200,255,.35);
  background: rgba(0,200,255,.08);
}

.code-hl.warn{
  border-color: rgba(255,211,107,.40);
  background: rgba(255,211,107,.10);
}

.code-hl.bad{
  border-color: rgba(255,105,180,.40);
  background: rgba(255,105,180,.10);
}
/* =========================
HTTP Status Checker — content + FAQ (CARD STYLE like table)
Replace previous .tool-content styles with this block
========================== */

/* outer spacing */
.tool-content{
  margin-top: 18px;
}

/* make it behave like other panels/cards */
.tool-content__inner{
  max-width: 100%;
  margin: 0;
  padding: 0;
}

/* the actual card */
.tool-content__card{
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 20px;
  padding: 18px 18px;
  box-shadow: 0 10px 40px rgba(0,0,0,.25);
}

/* typography */
.tool-content h2{
  margin: 0 0 10px;
  font-size: 22px;
  line-height: 1.15;
  letter-spacing: -0.02em;
}
.tool-content h3{
  margin: 16px 0 8px;
  font-size: 16px;
  line-height: 1.2;
  opacity: .95;
}
.tool-content h4{
  margin: 0 0 8px;
  font-size: 14px;
  opacity: .95;
}
.tool-content p{
  margin: 0 0 12px;
  line-height: 1.7;
  color: rgba(255,255,255,.82);
}
.tool-content strong{ color: rgba(255,255,255,.95); }

/* lists */
.tool-list, .tool-steps{
  margin: 10px 0 14px;
  padding-left: 18px;
  color: rgba(255,255,255,.82);
}
.tool-list li, .tool-steps li{
  margin: 8px 0;
  line-height: 1.6;
}

/* note block */
.tool-note{
  margin: 12px 0 16px;
  padding: 12px 14px;
  border-radius: 16px;
  background: rgba(0,0,0,.16);
  border: 1px solid rgba(255,255,255,.10);
}

/* 2-column cards like “table style”, not huge */
.tool-grid2{
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 12px;
  margin: 12px 0 18px;
}
@media (max-width: 840px){
  .tool-grid2{ grid-template-columns: 1fr; }
  .tool-content__card{ padding: 16px 14px; }
}

/* mini cards */
.tool-card{
  border-radius: 18px;
  padding: 14px 14px 12px;
  background: rgba(0,0,0,.14);
  border: 1px solid rgba(255,255,255,.10);
}
.tool-card p{ margin: 0 0 10px; }
.tool-card ul{
  margin: 0;
  padding-left: 18px;
  color: rgba(255,255,255,.82);
}
.tool-card li{ margin: 6px 0; }

/* FAQ in same clean card style */
.faq{ margin-top: 10px; }
.faq-item{
  border-radius: 16px;
  background: rgba(0,0,0,.14);
  border: 1px solid rgba(255,255,255,.10);
  margin: 10px 0;
  overflow: hidden;
}
.faq-item summary{
  list-style: none;
  cursor: pointer;
  padding: 12px 14px;
  font-weight: 750;
  color: rgba(255,255,255,.92);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.faq-item summary::-webkit-details-marker{ display: none; }
.faq-item summary:after{
  content: "+";
  font-weight: 900;
  opacity: .75;
}
.faq-item[open] summary:after{ content: "–"; }
.faq-body{ padding: 0 14px 12px; }
.faq-body p{ margin: 0; line-height: 1.7; color: rgba(255,255,255,.82); }