/* ------------------------------
   Zend2 UI — single source of truth
   ------------------------------ */

:root {
  /* Typography */
  --z2-font: Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Apple Color Emoji","Segoe UI Emoji";
  --z2-size-lg: 1.125rem; /* 18px */
  --z2-size-md: 1rem;     /* 16px */
  --z2-size-sm: .875rem;  /* 14px */

  /* Colors */
  --z2-bg: #F6F8FB;
  --z2-surface: #FFFFFF;
  --z2-text: #0F172A; /* slate-900 */
  --z2-muted: #64748B; /* slate-500 */
  --z2-border-c: rgba(2,6,23,.08);

  --z2-brand: #5955F6; /* button */
  --z2-brand-ink: #FFFFFF;

  --z2-green: #16A34A;
  --z2-red:   #DC2626;
  --z2-blue:  #2563EB;
  --z2-amber: #D97706;

  /* Radii / shadow */
  --z2-radius: 16px;
  --z2-radius-sm: 10px;
  --z2-shadow: 0 8px 28px rgba(15,23,42,.06);

  /* Focus ring */
  --z2-ring: 0 0 0 4px rgb(89 85 246 / .15);
}

/* Base */
html,body { font-family: var(--z2-font); color: var(--z2-text); background-color: var(--z2-bg); }
.z2-container { max-width: 1080px; margin-inline: auto; padding-inline: 20px; }

/* Cards */
.z2-card {
  background: var(--z2-surface);
  border: 1px solid var(--z2-border-c);
  border-radius: var(--z2-radius);
  box-shadow: var(--z2-shadow);
  padding: 20px;
}
.z2-card + .z2-card { margin-top: 16px; }

.z2-card-hd {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 12px;
}
.z2-h3 { font-weight: 700; letter-spacing: -.01em; font-size: 1.125rem; }

/* Stats tiles (4-up) */
.z2-stats {
  display: grid; gap: 12px;
  grid-template-columns: repeat(4, minmax(0,1fr));
  margin-top: 8px; margin-bottom: 8px;
}
@media (max-width: 900px){ .z2-stats { grid-template-columns: repeat(2,minmax(0,1fr)); } }
@media (max-width: 520px){ .z2-stats { grid-template-columns: 1fr; } }

.z2-tile {
  border: 1px dashed var(--z2-border-c);
  border-radius: var(--z2-radius-sm);
  background: #FBFCFE;
  padding: 12px 14px;
}
.z2-k { font-size: .8125rem; color: var(--z2-muted); display:flex; align-items:center; gap:8px; }
.z2-v { font-weight: 600; margin-top: 6px; }

/* Rows (label/value/action) */
.z2-rows { margin-top: 12px; }
.z2-row {
  display: grid;
  grid-template-columns: 98px 1fr auto;
  align-items: center;
  gap: 14px;
  border-top: 1px solid var(--z2-border-c);
  padding: 10px 0;
}
.z2-row:first-child { border-top: 0; padding-top: 0; }
.z2-lbl { font-weight: 600; display:flex; align-items:center; gap:8px; }
.z2-val { color: var(--z2-text); }
.z2-act { display:flex; gap:8px; align-items:center; }
.z2-muted { color: var(--z2-muted); }

.z2-code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: .8125rem;
  background: #F3F4F6; border: 1px solid var(--z2-border-c);
  border-radius: 8px; padding: 2px 8px;
  white-space: nowrap;
}

/* Badges */
.z2-badge {
  display:inline-flex; align-items:center; gap:6px;
  height: 28px; padding: 0 10px;
  border-radius: 999px; font-weight: 700; font-size: .8125rem;
  border: 1px solid var(--z2-border-c); background:#F8FAFC;
}
.z2-badge--pass  { color: #065F46; background: #ECFDF5; border-color: #A7F3D0; }
.z2-badge--fail  { color: #7F1D1D; background: #FEF2F2; border-color: #FECACA; }
.z2-badge--warn  { color: #7C2D12; background: #FFF7ED; border-color: #FDE68A; }
.z2-badge--info  { color: #1E3A8A; background: #EFF6FF; border-color: #BFDBFE; }

/* Buttons */
.z2-btn {
  display:inline-flex; align-items:center; gap:8px;
  height: 44px; padding: 0 16px;
  border-radius: 12px; border:1px solid transparent; font-weight:700;
}
.z2-btn--primary { background: var(--z2-brand); color: var(--z2-brand-ink); }
.z2-btn--ghost   { background: #FFFFFF; border-color: var(--z2-border-c); color: var(--z2-text); }
.z2-btn[disabled]{ opacity:.5; cursor:not-allowed; pointer-events:none; }

/* Copy button in actions */
.z2-copy {
  display:inline-flex; align-items:center; gap:8px;
  height: 36px; padding: 0 12px; border-radius: 10px;
  background:#FFFFFF; border:1px solid var(--z2-border-c);
}

/* Icons */
.z2-ic { width: 18px; height: 18px; }
.z2-ic--muted { opacity:.6 }

/* Utilities */
.z2-row-ico { display:flex; align-items:center; gap:8px; }

/* --- DNS Leak: spacing + overflow polish --------------------- */
/* More room inside cards and below headings */
.z2-card { padding: 24px; }
.z2-card-hd { margin-bottom: 16px; }
.z2-card > p { margin: 0 0 12px 0; }

/* Stats tiles: more gap + padding so boxes don't look glued */
.z2-stats { gap: 16px; margin-top: 14px; margin-bottom: 6px; }
.z2-tile { padding: 16px; border-radius: 12px; display: flex; flex-direction: column; }
.z2-k { line-height: 1.2; }
.z2-v { margin-top: 8px; }

/* Domain chip: ellipsize long hostnames instead of overflowing */
.z2-chip {
  display: inline-flex; align-items: center;
  max-width: 100%;
  background: #F3F4F6;
  border: 1px solid var(--z2-border-c);
  border-radius: 999px;
  padding: 4px 10px;
  font-size: .875rem;
  line-height: 1.1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* If you keep .z2-code for other places, ensure it can wrap when needed */
.z2-code--wrap { white-space: normal; overflow-wrap: anywhere; }

/* ===== Zend2 UI — Global layout polish for ALL result cards ===== */

/* Global spacing tokens */
:root{
  --z2-pad-card: 24px;
  --z2-gap-grid: 16px;
  --z2-pad-tile: 16px;
  --z2-gap-row: 14px;
}

/* Card + header spacing */
.z2-card{ padding: var(--z2-pad-card); }
.z2-card-hd{ margin-bottom: 14px; }

/* Standard description line under each title */
.z2-desc{
  margin: 6px 0 16px;
  color: var(--z2-muted);
  line-height: 1.45;
}

/* 4-up stats grid used everywhere */
.z2-stats{
  display:grid;
  gap: var(--z2-gap-grid);
  grid-template-columns: repeat(4, minmax(0,1fr));
  margin-top: 12px;
  margin-bottom: 6px;
}
@media (max-width: 1024px){ .z2-stats{ grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 560px){ .z2-stats{ grid-template-columns: 1fr; } }

/* Stat tile */
.z2-tile{
  padding: var(--z2-pad-tile);
  border-radius: 12px;
  background:#FBFCFE;
  border:1px dashed var(--z2-border-c);
  display:flex; flex-direction:column;
}
.z2-k{ line-height: 1.2; }
.z2-v{ margin-top: 8px; min-width: 0; }

/* Rows under the grid */
.z2-rows{ margin-top: 12px; }
.z2-row{
  display:grid; align-items:center; gap: var(--z2-gap-row);
  grid-template-columns: 98px 1fr auto;
  border-top:1px solid var(--z2-border-c); padding:10px 0;
}
.z2-row:first-child{ border-top:0; padding-top:0; }

/* Universal pill */
.z2-pill{
  display:inline-block; max-width:100%;
  padding: 4px 10px; border-radius:9999px;
  background:#F3F4F6; border:1px solid var(--z2-border-c);
  font-weight:600; font-size:.95rem; line-height:1.1;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}

/* Single-line ellipsis utility */
.z2-clip{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

/* Monospace pill */
.z2-pill--mono{
  font-family: ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;
  font-size:.875rem;
}

/* Make icons align */
.z2-ic{ width:18px; height:18px; flex:0 0 18px; }

:root{
  --bg:#f7f9fc; --card:#fff; --text:#0f172a; --muted:#667085; --border:#e7eaf0;
  --shadow:0 12px 30px rgba(17,24,39,.08);
  --brand:#5b61ff;
  --pass:#16a34a; --pass-10:#ecfdf5; --pass-br:#86efac;
  --warn:#f59e0b; --warn-10:#fff7ed; --warn-br:#fed7aa;
  --fail:#ef4444; --fail-10:#fef2f2; --fail-br:#fecaca;
  --info:#0ea5e9; --info-10:#f0f9ff; --info-br:#bae6fd;
  --r-xl:20px; --r-lg:16px; --r-md:12px;
  --font: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Inter, Roboto, "Helvetica Neue", Arial;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
}

*{box-sizing:border-box}
html,body{margin:0;background:var(--bg);color:var(--text);font:15px/1.55 var(--font)}

/* layout & headings */
.z2-wrap{max-width:1120px;margin:40px auto;padding:0 20px}
.z2-h1{font-weight:900;letter-spacing:-.02em;margin:0 0 8px;font-size:clamp(28px,3.8vw,40px)}
.z2-lead{color:var(--muted);margin:6px 0 0;font-size:clamp(14px,2.1vw,16px)}
.z2-section{margin-bottom:56px}

/* form bar */
.z2-bar{margin-top:20px;display:grid;grid-template-columns:1fr auto;gap:14px}
.z2-input{height:54px;border-radius:16px;border:1px solid var(--border);background:#fff;padding:0 16px;font-size:16px;font-weight:600;color:var(--text);box-shadow:inset 0 1px 0 rgba(0,0,0,.02)}
.z2-btn{appearance:none;border:1px solid transparent;border-radius:16px;height:52px;padding:0 18px;font-weight:800;cursor:pointer;transition:.2s}
.z2-btn:active{transform:translateY(1px)}
.z2-btn--primary{background:var(--brand);color:#fff}
.z2-btn--ghost{background:#fff;border-color:var(--border);color:#111827}

/* icons */
.z2-ic{width:18px;height:18px;display:inline-block;vertical-align:-3px}
.z2-ic20{width:20px;height:20px}
.z2-ic--muted{color:#94a3b8}
.z2-row-ico{display:inline-flex;gap:8px;align-items:center}

/* card */
.z2-card{background:var(--card);border:1px solid var(--border);border-radius:var(--r-xl);box-shadow:var(--shadow);overflow:hidden;margin-top:22px}
.z2-card-hd{display:grid;grid-template-columns:1fr auto;gap:12px;align-items:end;padding:18px 20px 6px;border-bottom:1px solid var(--border)}
.z2-h2{margin:0;font-weight:900;letter-spacing:-.01em;font-size:20px}
.z2-cap{color:var(--muted);margin-top:6px;font-size:13px}
.z2-badge{display:inline-flex;gap:8px;align-items:center;min-width:64px;justify-content:center;padding:8px 12px;border-radius:999px;border:1px solid transparent;font-size:12px;font-weight:900}
.z2-badge--pass{background:var(--pass-10);color:var(--pass);border-color:var(--pass-br)}
.z2-badge--warn{background:var(--warn-10);color:var(--warn);border-color:var(--warn-br)}
.z2-badge--fail{background:var(--fail-10);color:var(--fail);border-color:var(--fail-br)}
.z2-badge--info{background:var(--info-10);color:var(--info);border-color:var(--info-br)}
.z2-card-bd{padding:18px 20px}

/* stats grid */
.z2-stats{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.z2-tile{background:#f8fafc;border:1px solid var(--border);border-radius:var(--r-lg);padding:16px}
.z2-k{color:var(--muted);font-size:12px}
.z2-v{margin-top:8px;font-weight:900;letter-spacing:.1px;word-break:break-word}
.z2-code{display:inline-block;background:#eef2f6;color:#111827;border-radius:10px;padding:3px 8px;font:12.5px/1.45 var(--mono)}

/* checklist */
.z2-list{margin-top:14px;border:1px dashed var(--border);border-radius:16px;overflow:hidden}
.z2-row{display:grid;grid-template-columns:110px 200px 1fr auto;gap:12px;align-items:center;padding:12px 14px}
.z2-row+.z2-row{border-top:1px dashed var(--border)}
.z2-pill{display:inline-flex;gap:8px;align-items:center;justify-content:center;min-width:80px;height:28px;padding:0 10px;border-radius:999px;border:1px solid transparent;font:12px/1 var(--font);font-weight:900}
.z2-pill--pass{background:var(--pass-10);color:var(--pass);border-color:var(--pass-br)}
.z2-pill--warn{background:var(--warn-10);color:var(--warn);border-color:var(--warn-br)}
.z2-pill--fail{background:var(--fail-10);color:var(--fail);border-color:var(--fail-br)}
.z2-pill--info{background:var(--info-10);color:var(--info);border-color:var(--info-br)}
.z2-lbl{font-weight:900}
.z2-val{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.z2-copy{border:1px solid var(--border);background:#fff;border-radius:12px;padding:8px 12px;font-weight:900}
.z2-copy:hover{background:#f8fafc}

/* notes */
.z2-note{margin-top:16px;background:#fff;border:1px solid var(--border);border-radius:16px;padding:14px}
.z2-note .t{font-weight:900;margin-bottom:6px}
.z2-note .p{color:var(--muted)}

/* responsive */
@media (max-width:820px){
  .z2-bar{grid-template-columns:1fr}
  .z2-stats{grid-template-columns:1fr}
  .z2-row{grid-template-columns:120px 1fr}
  .z2-val,.z2-act{grid-column:2/3}
}

/* test helpers */
.hidden{display:none !important}