/* traceroute/traceroute.css — локальные стили страницы traceroute */

/* контейнер не трогаем — он уже в style.css */
.tr-page{ padding-top: 18px; }

.tr-card{
  margin-bottom: 18px;
}

.tr-header{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap: 12px;
  margin-bottom: 10px;
}

.tr-title{
  margin: 0;
  font-size: 38px;
  line-height: 1.05;
  letter-spacing: .2px;
}

.tr-subtitle{
  margin-top: 8px;
  opacity: .92;
  font-size: 14px;
}

.tr-badge{
  display:inline-block;
  margin-left: 10px;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.16);
  background: rgba(0,0,0,.16);
  font-size: 12px;
}

.tr-form{ margin-top: 10px; }

.tr-field{ margin-bottom: 12px; }
.tr-field--full{ grid-column: 1 / -1; }

.tr-label{
  display:block;
  margin-bottom: 8px;
  font-weight: 600;
  opacity: .95;
}

.tr-hint{
  margin-top: 8px;
  font-size: 13px;
  opacity: .9;
}

.tr-input{
  width: 100%;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.16);
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.95);
  padding: 12px 14px;
  outline: none;
  font-size: 15px;
}

.tr-input::placeholder{ color: rgba(255,255,255,.70); }

.tr-input:focus{
  border-color: rgba(255,255,255,.28);
  background: rgba(255,255,255,.08);
}

.tr-grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr); /* было 4 -> ломало сетку */
  gap: 12px;
}

.tr-check{
  display:flex;
  align-items:center;
  gap: 10px;
  font-weight: 600;
}

.tr-actions{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap: 12px;
  margin-top: 8px;
}

.tr-run, .tr-copy, .tr-clear{
  min-width: 170px;
}

.tr-status{
  flex: 1 1 auto;
  min-height: 18px;
  opacity: .92;
  font-weight: 600;
}

.tr-h2{
  margin: 0 0 12px 0;
  font-size: 22px;
}

.tr-output{
  width: 100%;
  min-height: 220px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(0,0,0,.18);
  padding: 14px;
  overflow: auto;
  white-space: pre-wrap;
  word-break: break-word;
  font-size: 14px;
  line-height: 1.4;
}

/* Mobile */
@media (max-width: 860px){
  .tr-title{ font-size: 32px; }
  .tr-grid{ grid-template-columns: 1fr; }
  .tr-run, .tr-copy, .tr-clear{ width: 100%; }
  .tr-status{ width: 100%; }
}