*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --bg:        #111111;
  --bg2:       #1a1a1a;
  --bg3:       #222222;
  --accent:    #FF0000;
  --accent2:   #CC0000;
  --green:     #00c853;
  --yellow:    #ffd600;
  --red:       #FF0000;
  --orange:    #ff6d00;
  --text:      #f0f0f0;
  --muted:     #888888;
  --border:    #2a2a2a;
  --radius:    10px;
}

html, body {
  min-height: 100%;
  background: var(--bg);
  color: var(--text);
  font-family: 'Segoe UI', system-ui, sans-serif;
  font-size: 15px;
}

/* ── Header ── */
header {
  background: #0a0a0a;
  border-bottom: 2px solid var(--accent);
  padding: 0.65rem 1.5rem;
  position: sticky; top: 0; z-index: 100;
}
.header-inner {
  max-width: 960px; margin: 0 auto;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
}
.logo { display: flex; align-items: center; gap: .75rem; }
.logo-img { height: 28px; width: auto; display: block; }
.logo-divider { width: 1px; height: 22px; background: #333; }
.logo-sub { font-size: .72rem; color: var(--muted); letter-spacing: .5px; text-transform: uppercase; }
.header-right { display: flex; align-items: center; gap: .75rem; }
.client-info-wrap { display: flex; flex-direction: column; align-items: flex-end; gap: .05rem; }
.public-ip {
  font-size: .9rem; font-weight: 700; font-family: monospace;
  color: var(--text); letter-spacing: .5px;
}
.public-ip::before { content: ''; }
.local-ip { font-size: .65rem; color: var(--muted); font-family: monospace; }

.btn-icon {
  background: transparent; color: transparent;
  border: 1px solid transparent; border-radius: 7px;
  width: 32px; height: 32px; font-size: .95rem;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  transition: color .25s, background .25s, border-color .25s;
}
.btn-icon:hover { color: var(--accent); background: var(--bg3); border-color: var(--border); }

/* ── Main ── */
main { max-width: 960px; margin: 0 auto; padding: 1.25rem 1rem 3rem; }

/* ── Conclusion banner ── */
.conclusion {
  display: flex; align-items: center; gap: 1rem;
  padding: .9rem 1.25rem;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  margin-bottom: 1.25rem;
  background: var(--bg2);
  transition: border-color .3s, background .3s;
}
.conclusion.hidden { display: none; }
.conclusion.ok     { border-color: rgba(0,200,83,.5);  background: rgba(0,200,83,.06); }
.conclusion.warn   { border-color: rgba(255,109,0,.5); background: rgba(255,109,0,.06); }
.conclusion.bad    { border-color: rgba(255,0,0,.4);   background: rgba(255,0,0,.06); }
.conclusion.mixed  { border-color: rgba(255,214,0,.5); background: rgba(255,214,0,.06); }

.conclusion-icon { font-size: 2rem; flex-shrink: 0; }
.conclusion-title  { font-size: .95rem; font-weight: 700; }
.conclusion-detail { font-size: .8rem; color: var(--muted); margin-top: .2rem; line-height: 1.45; }

/* ── Action ── */
.action-section { text-align: center; margin-bottom: 1.5rem; }
.btn-start {
  background: var(--accent);
  color: #fff; font-weight: 800; font-size: 1rem; letter-spacing: 2.5px;
  border: none; border-radius: 4px; padding: .85rem 3rem;
  cursor: pointer; transition: background .2s, transform .15s;
  box-shadow: 0 4px 20px rgba(255,0,0,.35);
  text-transform: uppercase;
}
.btn-start:hover  { background: var(--accent2); transform: scale(1.02); }
.btn-start:active { transform: scale(.98); }
.btn-start:disabled { opacity: .35; cursor: not-allowed; transform: none; }
.status-msg { margin-top: .6rem; font-size: .8rem; color: var(--muted); min-height: 1.2em; }
.status-msg.error { color: var(--accent); }
.btn-support {
  margin-top: .75rem;
  background: transparent; color: var(--muted);
  border: 1px solid var(--border); border-radius: 4px;
  padding: .45rem 1.25rem; font-size: .8rem; cursor: pointer;
  transition: color .2s, border-color .2s;
}
.btn-support:hover { color: var(--text); border-color: var(--muted); }

/* ── Targets table ── */
.targets-section {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}

.targets-header {
  display: grid;
  grid-template-columns: 1fr 72px 72px 72px 90px 90px 80px;
  gap: .5rem;
  padding: .5rem 1rem;
  background: var(--bg3);
  font-size: .68rem;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 1px;
  border-bottom: 1px solid var(--border);
}

/* ── Target row ── */
.target-row {
  display: grid;
  grid-template-columns: 1fr 72px 72px 72px 90px 90px 80px;
  gap: .5rem;
  align-items: center;
  padding: .7rem 1rem;
  border-bottom: 1px solid var(--border);
  transition: background .2s;
}
.target-row:last-child { border-bottom: none; }
.target-row.testing { background: rgba(255,0,0,.03); }
.target-row.done-ok   { border-left: 3px solid var(--green); }
.target-row.done-warn { border-left: 3px solid var(--yellow); }
.target-row.done-bad  { border-left: 3px solid var(--accent); }

.target-name-wrap { display: flex; flex-direction: column; gap: .1rem; min-width: 0; }
.target-name  { font-size: .88rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.target-url   { font-size: .65rem; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-family: monospace; }
.target-badge {
  display: inline-block; font-size: .56rem; font-weight: 700;
  padding: .08rem .35rem; border-radius: 3px; letter-spacing: .6px; margin-top: .12rem; align-self: flex-start;
}
.badge-ref       { background: rgba(136,136,136,.12); color: var(--muted);  border: 1px solid rgba(136,136,136,.25); }
.badge-icmp      { background: rgba(0,200,83,.12);    color: var(--green);  border: 1px solid rgba(0,200,83,.25); }
.badge-speedtest { background: rgba(255,0,0,.12);     color: var(--accent); border: 1px solid rgba(255,0,0,.25); }
.badge-wan       { background: rgba(255,109,0,.12);   color: var(--orange); border: 1px solid rgba(255,109,0,.25); }
.badge-custom    { background: rgba(255,214,0,.12);   color: var(--yellow); border: 1px solid rgba(255,214,0,.25); }

.target-metric {
  font-size: .92rem; font-weight: 700; text-align: right;
  font-family: monospace; color: var(--text);
}
.target-metric.good  { color: var(--green); }
.target-metric.warn  { color: var(--yellow); }
.target-metric.bad   { color: var(--accent); }
.target-metric.muted { color: var(--muted); font-weight: 400; }

.target-status-wrap { display: flex; align-items: center; justify-content: flex-end; gap: .4rem; }
.status-dot {
  width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0;
  background: var(--muted);
}
.status-dot.ok      { background: var(--green);  box-shadow: 0 0 6px var(--green); }
.status-dot.warn    { background: var(--yellow); box-shadow: 0 0 6px var(--yellow); }
.status-dot.bad     { background: var(--accent); box-shadow: 0 0 6px var(--accent); }
.status-dot.testing { background: var(--accent); animation: pulse 1s infinite; }
.status-label { font-size: .68rem; color: var(--muted); }

/* Progress bar inside row */
.target-progress-wrap {
  grid-column: 1 / -1;
  height: 2px; background: var(--bg3); border-radius: 1px; overflow: hidden;
  margin-top: -.35rem;
}
.target-progress { height: 100%; width: 0%; background: var(--accent); transition: width .4s; border-radius: 1px; }

/* ── Divider ── */
.divider { border: none; border-top: 1px solid var(--border); margin: 1.5rem 0; }

/* ── Monitor ── */
.monitor-header {
  display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; margin-bottom: .75rem;
}
.monitor-header h2 { font-size: .88rem; font-weight: 700; text-transform: uppercase; letter-spacing: .8px; color: var(--muted); }
.monitor-legend { display: flex; gap: .25rem; flex-wrap: wrap; flex: 1; }
.leg-item { display: flex; align-items: center; gap: .3rem; font-size: .7rem; color: var(--muted); cursor: pointer; user-select: none; padding: .2rem .4rem; border-radius: 4px; transition: background .15s; }
.leg-item:hover { background: rgba(255,255,255,.05); }
.leg-item.leg-hidden { opacity: .25; }
.leg-item.leg-hidden .leg-dot { filter: grayscale(1); }
.leg-dot  { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.btn-monitor {
  background: transparent; color: var(--accent); border: 1px solid var(--accent);
  border-radius: 4px; padding: .3rem .85rem; font-size: .78rem; font-weight: 600;
  cursor: pointer; white-space: nowrap; letter-spacing: .5px;
  transition: background .2s;
}
.btn-monitor:hover  { background: rgba(255,0,0,.08); }
.btn-monitor.active { background: rgba(255,0,0,.12); }
.chart-wrap {
  background: var(--bg2); border: 1px solid var(--border); border-radius: var(--radius);
  padding: .75rem; position: relative; min-height: 180px;
  display: flex; align-items: center; justify-content: center;
}
#chartCanvas { display: block; width: 100%; height: 160px; }
.chart-empty { position: absolute; font-size: .8rem; color: var(--muted); text-align: center; pointer-events: none; }

/* ── Config panel ── */
.panel { position: fixed; inset: 0; z-index: 999; display: flex; justify-content: flex-end; }
.panel-overlay { position: absolute; inset: 0; background: rgba(0,0,0,.7); }
.panel-box {
  position: relative; background: var(--bg2); border-left: 1px solid var(--border);
  width: 100%; max-width: 440px; height: 100%; overflow-y: auto;
  padding: 1.5rem; display: flex; flex-direction: column; gap: 1rem;
}
.panel-header { display: flex; align-items: center; justify-content: space-between; }
.panel-header h3 { font-size: .95rem; font-weight: 700; }
.config-note { font-size: .76rem; color: var(--muted); line-height: 1.5; padding: .75rem; background: var(--bg3); border-radius: 8px; }

/* Config target item */
.config-target-item {
  background: var(--bg3); border: 1px solid var(--border); border-radius: var(--radius);
  padding: .85rem 1rem; display: flex; flex-direction: column; gap: .4rem;
}
.config-target-top { display: flex; align-items: center; gap: .5rem; }
.config-target-top input[type=text],
.config-target-top input[type=url] {
  flex: 1; background: var(--bg); color: var(--text);
  border: 1px solid var(--border); border-radius: 5px;
  padding: .35rem .6rem; font-size: .82rem; outline: none;
}
.config-target-top input:focus { border-color: var(--accent); }
.config-target-row { display: flex; gap: .5rem; align-items: center; }
.config-target-row label { font-size: .7rem; color: var(--muted); white-space: nowrap; }
.config-target-row input { flex: 1; background: var(--bg); color: var(--text); border: 1px solid var(--border); border-radius: 5px; padding: .3rem .6rem; font-size: .8rem; outline: none; }
.config-target-row input:focus { border-color: var(--accent); }
.config-target-row select { background: var(--bg); color: var(--text); border: 1px solid var(--border); border-radius: 5px; padding: .3rem .5rem; font-size: .76rem; cursor: pointer; }
.btn-remove { background: none; border: none; color: var(--muted); cursor: pointer; font-size: 1.1rem; padding: .2rem; opacity: .6; transition: color .15s, opacity .15s; }
.btn-remove:hover { opacity: 1; color: var(--accent); }

.btn-add-target {
  background: transparent; color: var(--accent); border: 1px dashed rgba(255,0,0,.4);
  border-radius: 6px; padding: .5rem; font-size: .8rem; cursor: pointer; text-align: center;
  transition: background .2s, border-color .2s;
}
.btn-add-target:hover { background: rgba(255,0,0,.06); border-color: var(--accent); }

.panel-actions { display: flex; gap: .6rem; justify-content: flex-end; margin-top: auto; padding-top: 1rem; flex-wrap: wrap; }
.btn-primary   { background: var(--accent); color: #fff; border: none; border-radius: 5px; padding: .5rem 1.5rem; font-weight: 700; cursor: pointer; transition: background .2s; }
.btn-primary:hover { background: var(--accent2); }
.btn-secondary { background: var(--bg3); color: var(--text); border: 1px solid var(--border); border-radius: 5px; padding: .5rem 1.1rem; cursor: pointer; font-size: .85rem; transition: border-color .2s; }
.btn-secondary:hover { border-color: var(--muted); }

@media (max-width: 600px) {
  .targets-header,
  .target-row { grid-template-columns: 1fr 60px 60px 60px 70px; }
  .th-ul, .th-jitter, .target-row > :nth-child(3), .target-row > :nth-child(6) { display: none; }
}

@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:.35} }