/* ════════════════════════════════════════════════════════════════
   DTTASA Portal — Diagnostics Console
   Distinct visual identity from the rest of the portal.
   Operations / monitoring aesthetic: dark slate background, cyan
   accents, mono-typography for data, real-time animations.
   ════════════════════════════════════════════════════════════════ */

:root {
  --diag-bg-0:     #060912;
  --diag-bg-1:     #0d1525;
  --diag-bg-2:     #131e35;
  --diag-bg-3:     #1a2845;
  --diag-line:     rgba(127, 196, 255, 0.10);
  --diag-line-2:   rgba(127, 196, 255, 0.18);
  --diag-text:     #e5edfa;
  --diag-text-2:   rgba(229, 237, 250, 0.78);
  --diag-text-3:   rgba(229, 237, 250, 0.52);
  --diag-text-4:   rgba(229, 237, 250, 0.32);
  --diag-cyan:     #5bd0ff;
  --diag-cyan-d:   #2090d6;
  --diag-cyan-glow: rgba(91, 208, 255, 0.35);
  --diag-green:    #4ee598;
  --diag-amber:    #ffb347;
  --diag-red:      #ff5973;
  --diag-magenta:  #c66cff;
  --diag-violet:   #7a89ff;
  --diag-grid:     rgba(127, 196, 255, 0.05);
  --diag-mono:     'IBM Plex Mono', 'SF Mono', Menlo, monospace;
  --diag-sans:     'DM Sans', -apple-system, system-ui, sans-serif;
  --diag-ease:     cubic-bezier(.16, 1, .3, 1);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { width: 100%; min-height: 100vh; }
body {
  font-family: var(--diag-sans);
  background:
    radial-gradient(ellipse at 30% 0%, rgba(91, 208, 255, 0.08), transparent 60%),
    radial-gradient(ellipse at 100% 100%, rgba(198, 108, 255, 0.06), transparent 50%),
    linear-gradient(180deg, var(--diag-bg-0) 0%, var(--diag-bg-1) 100%);
  background-attachment: fixed;
  color: var(--diag-text);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* Grid overlay — subtle technical backdrop */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  background:
    linear-gradient(to right, var(--diag-grid) 1px, transparent 1px) 0 0 / 60px 60px,
    linear-gradient(to bottom, var(--diag-grid) 1px, transparent 1px) 0 0 / 60px 60px;
  mask-image: radial-gradient(ellipse at center, black 30%, transparent 80%);
  pointer-events: none;
  z-index: 0;
}

/* ── Auth gate ──────────────────────────────────────────────── */
.diag-gate {
  position: fixed; inset: 0; z-index: 9999;
  display: flex; align-items: center; justify-content: center;
  background: var(--diag-bg-0);
  animation: diagFadeIn .4s var(--diag-ease) both;
}
.diag-gate-orb {
  position: absolute; width: 480px; height: 480px;
  background: radial-gradient(circle, var(--diag-cyan-glow) 0%, transparent 70%);
  filter: blur(60px);
  animation: diagOrbDrift 14s ease-in-out infinite;
}
.diag-gate-card {
  position: relative;
  background: linear-gradient(135deg, rgba(255,255,255,0.04), rgba(255,255,255,0.01));
  border: 1px solid var(--diag-line-2);
  border-radius: 22px;
  padding: 44px 40px;
  width: 380px; max-width: calc(100vw - 32px);
  text-align: center;
  backdrop-filter: blur(22px); -webkit-backdrop-filter: blur(22px);
  box-shadow: 0 24px 80px rgba(0,0,0,0.5);
}
.diag-gate-icon {
  width: 64px; height: 64px; margin: 0 auto 18px;
  border-radius: 16px;
  background: linear-gradient(135deg, var(--diag-cyan), var(--diag-cyan-d));
  display: flex; align-items: center; justify-content: center;
  color: #06121f; font-size: 26px;
  box-shadow: 0 12px 36px rgba(91, 208, 255, 0.45);
}
.diag-gate-title {
  font-family: var(--diag-mono);
  font-size: 12px; font-weight: 700;
  letter-spacing: 3px; text-transform: uppercase;
  color: var(--diag-cyan);
  margin-bottom: 8px;
}
.diag-gate-sub {
  font-size: 14px; color: var(--diag-text-3);
  margin-bottom: 20px;
}
.diag-gate-spinner {
  width: 22px; height: 22px; margin: 0 auto;
  border: 2px solid var(--diag-line-2);
  border-top-color: var(--diag-cyan);
  border-radius: 50%;
  animation: diagSpin 0.8s linear infinite;
}
@keyframes diagSpin { to { transform: rotate(360deg); } }
@keyframes diagOrbDrift {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50%      { transform: translate(40px, -30px) scale(1.1); }
}
@keyframes diagFadeIn { from { opacity: 0; } to { opacity: 1; } }

/* ── Access denied ──────────────────────────────────────────── */
.diag-denied {
  position: fixed; inset: 0; z-index: 9998;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; padding: 32px;
}
.diag-denied-icon {
  width: 80px; height: 80px; border-radius: 50%;
  background: rgba(255, 89, 115, 0.12);
  border: 1px solid rgba(255, 89, 115, 0.3);
  display: flex; align-items: center; justify-content: center;
  color: var(--diag-red); font-size: 34px;
  margin-bottom: 24px;
}
.diag-denied-title {
  font-family: var(--diag-mono);
  font-size: 14px; font-weight: 700;
  letter-spacing: 3px; text-transform: uppercase;
  color: var(--diag-red);
  margin-bottom: 10px;
}
.diag-denied-msg {
  font-size: 14px; color: var(--diag-text-2);
  max-width: 360px; margin-bottom: 28px; line-height: 1.6;
}
.diag-btn-ghost {
  padding: 11px 22px; border-radius: 10px;
  background: transparent; border: 1px solid var(--diag-line-2);
  color: var(--diag-text); cursor: pointer;
  font-family: var(--diag-sans); font-weight: 600; font-size: 13px;
  transition: all .25s var(--diag-ease);
}
.diag-btn-ghost:hover { background: rgba(91, 208, 255, 0.08); border-color: var(--diag-cyan); color: var(--diag-cyan); }

/* ── Header ─────────────────────────────────────────────────── */
#diag-shell { position: relative; z-index: 1; padding-bottom: 80px; }
#diag-hdr {
  position: sticky; top: 0; z-index: 100;
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 28px;
  background: rgba(13, 21, 37, 0.85);
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--diag-line);
  animation: diagSlideDown .6s var(--diag-ease) both;
}
@keyframes diagSlideDown { from { transform: translateY(-100%); opacity: 0; } to { transform: none; opacity: 1; } }

.diag-hdr-left { display: flex; align-items: center; gap: 16px; }
.diag-hdr-back {
  width: 38px; height: 38px; border-radius: 10px;
  background: rgba(91, 208, 255, 0.08);
  border: 1px solid var(--diag-line-2);
  color: var(--diag-cyan); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: all .25s var(--diag-ease);
}
.diag-hdr-back:hover { background: rgba(91, 208, 255, 0.16); transform: translateX(-2px); }
.diag-hdr-brand { display: flex; align-items: center; gap: 12px; }
.diag-hdr-pulse {
  width: 12px; height: 12px; border-radius: 50%;
  background: var(--diag-cyan);
  box-shadow: 0 0 0 0 var(--diag-cyan-glow);
  animation: diagPulse 1.8s ease-out infinite;
}
@keyframes diagPulse {
  0%   { box-shadow: 0 0 0 0 rgba(91, 208, 255, 0.55); }
  70%  { box-shadow: 0 0 0 14px rgba(91, 208, 255, 0); }
  100% { box-shadow: 0 0 0 0 rgba(91, 208, 255, 0); }
}
.diag-hdr-eyebrow {
  font-family: var(--diag-mono); font-size: 10px;
  font-weight: 700; letter-spacing: 2.2px; text-transform: uppercase;
  color: var(--diag-text-3);
}
.diag-hdr-title {
  font-family: var(--diag-mono); font-size: 17px;
  font-weight: 700; letter-spacing: 1.2px;
  color: var(--diag-text);
  text-shadow: 0 0 24px rgba(91, 208, 255, 0.22);
}
.diag-hdr-right { display: flex; align-items: center; gap: 14px; }
.diag-hdr-clock {
  font-family: var(--diag-mono); font-size: 13px;
  font-weight: 600; letter-spacing: 1.4px;
  color: var(--diag-text-2);
  padding: 6px 14px; border-radius: 8px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--diag-line);
}
.diag-hdr-status {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 14px; border-radius: 8px;
  background: rgba(78, 229, 152, 0.08);
  border: 1px solid rgba(78, 229, 152, 0.25);
  font-family: var(--diag-mono); font-size: 10px;
  font-weight: 700; letter-spacing: 1.4px;
  color: var(--diag-green);
}
.diag-conn-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--diag-green);
  box-shadow: 0 0 8px var(--diag-green);
  animation: diagPulse 1.5s ease-out infinite;
}
.diag-hdr-status.warn { background: rgba(255, 179, 71, 0.08); border-color: rgba(255, 179, 71, 0.25); color: var(--diag-amber); }
.diag-hdr-status.warn .diag-conn-dot { background: var(--diag-amber); box-shadow: 0 0 8px var(--diag-amber); }
.diag-hdr-status.fail { background: rgba(255, 89, 115, 0.08); border-color: rgba(255, 89, 115, 0.25); color: var(--diag-red); }
.diag-hdr-status.fail .diag-conn-dot { background: var(--diag-red); box-shadow: 0 0 8px var(--diag-red); }
.diag-hdr-user-chip {
  display: flex; align-items: center; gap: 9px;
  padding: 5px 12px 5px 5px; border-radius: 30px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--diag-line);
}
.diag-hdr-av {
  width: 28px; height: 28px; border-radius: 50%;
  background: linear-gradient(135deg, var(--diag-cyan), var(--diag-violet));
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 11px; color: var(--diag-bg-0);
  letter-spacing: 0.5px;
}
.diag-hdr-user-chip span {
  font-size: 12px; font-weight: 600; color: var(--diag-text-2);
  max-width: 140px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* ── Stats strip ────────────────────────────────────────────── */
.diag-stats-strip {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 14px;
  padding: 22px 28px 8px;
}
.diag-stat {
  position: relative;
  display: flex; align-items: center; gap: 14px;
  padding: 18px 18px;
  background: linear-gradient(135deg, rgba(255,255,255,0.04), rgba(255,255,255,0.01));
  border: 1px solid var(--diag-line);
  border-radius: 14px;
  overflow: hidden;
  transition: transform .35s var(--diag-ease), border-color .35s var(--diag-ease), box-shadow .35s var(--diag-ease);
  animation: diagCardIn .55s var(--diag-ease) both;
}
@keyframes diagCardIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.diag-stat:nth-child(1) { animation-delay: .04s; }
.diag-stat:nth-child(2) { animation-delay: .08s; }
.diag-stat:nth-child(3) { animation-delay: .12s; }
.diag-stat:nth-child(4) { animation-delay: .16s; }
.diag-stat:nth-child(5) { animation-delay: .20s; }
.diag-stat:hover { transform: translateY(-2px); border-color: var(--diag-line-2); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35); }
.diag-stat::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, transparent, var(--diag-cyan), transparent);
  opacity: 0.6;
}
.diag-stat.warn::before { background: linear-gradient(90deg, transparent, var(--diag-amber), transparent); }
.diag-stat.info::before { background: linear-gradient(90deg, transparent, var(--diag-violet), transparent); }
.diag-stat.ok::before   { background: linear-gradient(90deg, transparent, var(--diag-green), transparent); }
.diag-stat-icon {
  width: 40px; height: 40px; border-radius: 11px;
  background: rgba(91, 208, 255, 0.10);
  display: flex; align-items: center; justify-content: center;
  color: var(--diag-cyan); font-size: 16px;
  flex-shrink: 0;
}
.diag-stat.warn .diag-stat-icon { background: rgba(255, 179, 71, 0.10); color: var(--diag-amber); }
.diag-stat.info .diag-stat-icon { background: rgba(122, 137, 255, 0.10); color: var(--diag-violet); }
.diag-stat.ok   .diag-stat-icon { background: rgba(78, 229, 152, 0.10); color: var(--diag-green); }
.diag-stat-body { flex: 1; min-width: 0; }
.diag-stat-val {
  font-family: var(--diag-mono); font-size: 26px; font-weight: 700;
  letter-spacing: -0.5px; color: var(--diag-text);
  line-height: 1; margin-bottom: 4px;
  transition: color .25s;
}
.diag-stat-val-text { font-size: 14px; letter-spacing: 0.5px; word-break: break-all; }
.diag-stat-lbl {
  font-family: var(--diag-mono); font-size: 9.5px;
  font-weight: 700; letter-spacing: 1.4px; text-transform: uppercase;
  color: var(--diag-text-3);
}
.diag-stat-spark {
  position: absolute; bottom: 0; left: 0; right: 0; height: 22px;
  opacity: 0.4; pointer-events: none;
}
.diag-stat-spark canvas { width: 100%; height: 100%; }

/* ── Health row ─────────────────────────────────────────────── */
.diag-health-row {
  display: grid;
  grid-template-columns: 360px 1fr;
  gap: 14px;
  padding: 8px 28px;
}
.diag-card {
  background: linear-gradient(135deg, rgba(255,255,255,0.04), rgba(255,255,255,0.01));
  border: 1px solid var(--diag-line);
  border-radius: 14px;
  padding: 18px 20px;
  animation: diagCardIn .6s var(--diag-ease) .24s both;
}
.diag-card-hdr {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 14px;
}
.diag-card-eyebrow {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--diag-mono); font-size: 10.5px;
  font-weight: 700; letter-spacing: 1.6px; text-transform: uppercase;
  color: var(--diag-text-2);
}
.diag-card-eyebrow i { color: var(--diag-cyan); font-size: 11px; }
.diag-card-ts {
  font-family: var(--diag-mono); font-size: 10px;
  color: var(--diag-text-4); letter-spacing: 1px;
}

.diag-system-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
}
.diag-system-row {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 10px;
  align-items: center;
  padding: 10px 12px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--diag-line);
  border-radius: 10px;
  font-size: 12px;
  transition: background .25s, border-color .25s;
}
.diag-system-row:hover { background: rgba(255, 255, 255, 0.05); border-color: var(--diag-line-2); }
.diag-system-name { color: var(--diag-text-2); display: flex; align-items: center; gap: 8px; }
.diag-system-name i { font-size: 11px; width: 14px; text-align: center; }
.diag-system-val {
  font-family: var(--diag-mono); font-size: 11.5px;
  color: var(--diag-text); font-weight: 600;
}
.diag-system-pill {
  font-family: var(--diag-mono); font-size: 9px;
  font-weight: 800; letter-spacing: 1.2px;
  padding: 3px 9px; border-radius: 10px;
  text-transform: uppercase;
}
.diag-system-pill.ok   { background: rgba(78, 229, 152, 0.12); color: var(--diag-green); border: 1px solid rgba(78, 229, 152, 0.25); }
.diag-system-pill.warn { background: rgba(255, 179, 71, 0.12); color: var(--diag-amber); border: 1px solid rgba(255, 179, 71, 0.25); }
.diag-system-pill.fail { background: rgba(255, 89, 115, 0.12); color: var(--diag-red);   border: 1px solid rgba(255, 89, 115, 0.25); }
.diag-system-pill.idle { background: rgba(255, 255, 255, 0.05); color: var(--diag-text-3); border: 1px solid var(--diag-line); }

.diag-pages-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 10px;
}
.diag-page-tile {
  position: relative;
  padding: 12px 14px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--diag-line);
  border-radius: 10px;
  transition: all .25s var(--diag-ease);
}
.diag-page-tile:hover { background: rgba(91, 208, 255, 0.04); border-color: var(--diag-line-2); transform: translateY(-1px); }
.diag-page-tile.ok::before, .diag-page-tile.warn::before, .diag-page-tile.fail::before {
  content: ''; position: absolute; top: 0; left: 12px; right: 12px; height: 2px;
  border-radius: 2px;
}
.diag-page-tile.ok::before   { background: var(--diag-green); }
.diag-page-tile.warn::before { background: var(--diag-amber); }
.diag-page-tile.fail::before { background: var(--diag-red);   animation: diagPulseFast 1.2s ease-out infinite; }
@keyframes diagPulseFast {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255, 89, 115, 0); }
  50%      { box-shadow: 0 0 0 2px rgba(255, 89, 115, 0.4); }
}
.diag-page-name {
  font-size: 12px; font-weight: 600; color: var(--diag-text);
  margin-bottom: 6px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.diag-page-stat {
  display: flex; align-items: center; justify-content: space-between;
  font-family: var(--diag-mono); font-size: 10.5px;
}
.diag-page-count { font-weight: 700; color: var(--diag-text-2); }
.diag-page-count.ok   { color: var(--diag-green); }
.diag-page-count.warn { color: var(--diag-amber); }
.diag-page-count.fail { color: var(--diag-red); }
.diag-page-lastts {
  color: var(--diag-text-4); font-size: 10px;
}

/* ── Filter bar ─────────────────────────────────────────────── */
.diag-filter-bar {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 14px;
  align-items: center;
  padding: 18px 28px 12px;
  animation: diagCardIn .6s var(--diag-ease) .30s both;
}
.diag-filter-tabs { display: flex; gap: 4px; background: rgba(255,255,255,0.03); border: 1px solid var(--diag-line); border-radius: 10px; padding: 4px; }
.diag-fbtn {
  background: transparent; border: none;
  color: var(--diag-text-3); cursor: pointer;
  padding: 7px 14px; border-radius: 7px;
  font-family: var(--diag-sans); font-size: 12px; font-weight: 600;
  transition: all .2s;
  letter-spacing: 0.2px;
}
.diag-fbtn:hover { color: var(--diag-text); }
.diag-fbtn.active {
  background: linear-gradient(135deg, var(--diag-cyan), var(--diag-cyan-d));
  color: var(--diag-bg-0);
  box-shadow: 0 4px 14px var(--diag-cyan-glow);
}
.diag-fbtn-badge {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 18px; height: 18px; padding: 0 6px;
  margin-left: 6px;
  border-radius: 9px;
  background: #ff5973;
  color: #fff;
  font-size: 10px; font-weight: 800;
  letter-spacing: 0.4px;
  vertical-align: 1px;
  box-shadow: 0 0 0 1px rgba(255,89,115,.32), 0 0 12px rgba(255,89,115,.35);
  animation: diagFbtnBadgePulse 2.4s ease-in-out infinite;
}
@keyframes diagFbtnBadgePulse {
  0%, 100% { box-shadow: 0 0 0 1px rgba(255,89,115,.32), 0 0 12px rgba(255,89,115,.35); }
  50%      { box-shadow: 0 0 0 1px rgba(255,89,115,.48), 0 0 18px rgba(255,89,115,.55); }
}
.diag-fbtn.active .diag-fbtn-badge {
  background: rgba(0,0,0,.32);
  color: #fff;
  box-shadow: none;
  animation: none;
}
.diag-filter-search {
  position: relative;
  display: flex; align-items: center;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--diag-line);
  border-radius: 10px;
  padding: 0 14px;
  transition: border-color .25s, background .25s;
}
.diag-filter-search:focus-within { border-color: var(--diag-cyan); background: rgba(91, 208, 255, 0.04); }
.diag-filter-search i.fa-search { color: var(--diag-text-4); font-size: 12px; margin-right: 10px; }
.diag-filter-search input {
  flex: 1; background: transparent; border: none; outline: none;
  color: var(--diag-text); font-family: var(--diag-sans); font-size: 13px;
  padding: 11px 0;
}
.diag-filter-search input::placeholder { color: var(--diag-text-4); }
.diag-filter-clear {
  background: transparent; border: none; cursor: pointer;
  color: var(--diag-text-4); padding: 4px;
}
.diag-filter-clear:hover { color: var(--diag-red); }
.diag-filter-meta {
  display: flex; align-items: center; gap: 12px;
  font-family: var(--diag-mono); font-size: 11px;
  color: var(--diag-text-3); letter-spacing: 0.8px;
}
.diag-pause-btn {
  width: 34px; height: 34px; border-radius: 9px;
  background: rgba(91, 208, 255, 0.08);
  border: 1px solid var(--diag-line-2);
  color: var(--diag-cyan); cursor: pointer;
  transition: all .25s;
}
.diag-pause-btn:hover { background: rgba(91, 208, 255, 0.16); }
.diag-pause-btn.paused { background: rgba(255, 179, 71, 0.12); border-color: rgba(255, 179, 71, 0.3); color: var(--diag-amber); }

/* ── Feed section ───────────────────────────────────────────── */
.diag-feed-section { padding: 0 28px 28px; }
.diag-feed-hdr {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 12px;
}
.diag-feed-pulse {
  display: inline-block;
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--diag-cyan);
  box-shadow: 0 0 0 0 var(--diag-cyan-glow);
  animation: diagPulse 1.8s ease-out infinite;
  transition: background .3s;
}
.diag-feed-pulse.idle { background: var(--diag-text-4); animation: none; box-shadow: none; }

.diag-feed {
  position: relative;
  min-height: 200px;
  background: linear-gradient(135deg, rgba(255,255,255,0.02), rgba(255,255,255,0));
  border: 1px solid var(--diag-line);
  border-radius: 14px;
  overflow: hidden;
}

.diag-feed-empty {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 60px 24px;
  text-align: center;
  animation: diagCardIn .55s var(--diag-ease) both;
}
.diag-feed-empty-icon {
  width: 64px; height: 64px; border-radius: 50%;
  background: rgba(78, 229, 152, 0.10);
  border: 1px solid rgba(78, 229, 152, 0.3);
  display: flex; align-items: center; justify-content: center;
  color: var(--diag-green); font-size: 26px;
  margin-bottom: 18px;
}
.diag-feed-empty-title {
  font-family: var(--diag-mono); font-size: 13px;
  font-weight: 700; letter-spacing: 2px; text-transform: uppercase;
  color: var(--diag-green); margin-bottom: 8px;
}
.diag-feed-empty-sub {
  font-size: 13px; color: var(--diag-text-3); max-width: 320px; line-height: 1.5;
}

/* ── Error row ──────────────────────────────────────────────── */
.diag-row {
  display: grid;
  grid-template-columns: 80px 1fr auto;
  gap: 14px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--diag-line);
  cursor: pointer;
  transition: background .2s;
  animation: diagRowIn .45s var(--diag-ease) both;
  position: relative;
}
.diag-row.is-new {
  animation: diagRowFlash .55s var(--diag-ease) both, diagRowIn .45s var(--diag-ease) both;
}
@keyframes diagRowIn {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: none; }
}
@keyframes diagRowFlash {
  0%   { background: rgba(91, 208, 255, 0.20); }
  100% { background: transparent; }
}
.diag-row:last-child { border-bottom: none; }
.diag-row:hover { background: rgba(91, 208, 255, 0.04); }
.diag-row.expanded { background: rgba(255, 255, 255, 0.03); }
.diag-row::before {
  content: ''; position: absolute; top: 0; bottom: 0; left: 0; width: 3px;
}
.diag-row.kind-uncaught::before    { background: var(--diag-red); }
.diag-row.kind-rejection::before   { background: var(--diag-magenta); }
.diag-row.kind-caught::before      { background: var(--diag-amber); }
.diag-row.transient::before        { background: var(--diag-text-4); }
.diag-row.resolved { opacity: 0.55; }
.diag-row.resolved::before { background: var(--diag-green); }

.diag-row-ts {
  font-family: var(--diag-mono); font-size: 11px;
  color: var(--diag-text-3); letter-spacing: 0.5px;
  align-self: center;
  white-space: nowrap;
}
.diag-row-main { min-width: 0; }
.diag-row-line1 {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin-bottom: 4px;
}
.diag-row-code {
  font-family: var(--diag-mono); font-size: 10.5px;
  font-weight: 700; letter-spacing: 1px;
  padding: 2px 8px; border-radius: 5px;
  background: rgba(255, 89, 115, 0.10);
  color: var(--diag-red);
  border: 1px solid rgba(255, 89, 115, 0.22);
}
.diag-row.kind-rejection .diag-row-code { background: rgba(198, 108, 255, 0.10); color: var(--diag-magenta); border-color: rgba(198, 108, 255, 0.22); }
.diag-row.kind-caught    .diag-row-code { background: rgba(255, 179, 71, 0.10); color: var(--diag-amber); border-color: rgba(255, 179, 71, 0.22); }
.diag-row.transient      .diag-row-code { background: rgba(229, 237, 250, 0.05); color: var(--diag-text-3); border-color: var(--diag-line); }
.diag-row-scope {
  font-family: var(--diag-mono); font-size: 10.5px;
  color: var(--diag-cyan); letter-spacing: 0.3px;
}
.diag-row-msg {
  font-size: 13px; color: var(--diag-text);
  line-height: 1.45;
  overflow: hidden; text-overflow: ellipsis;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  word-break: break-word;
}
.diag-row-line3 {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin-top: 5px;
  font-family: var(--diag-mono); font-size: 10.5px;
  color: var(--diag-text-3); letter-spacing: 0.3px;
}
.diag-row-line3 span i { font-size: 9px; margin-right: 4px; opacity: 0.7; }
.diag-row-meta { display: flex; align-items: center; gap: 8px; }
.diag-row-arrow {
  align-self: center;
  color: var(--diag-text-4);
  font-size: 12px;
  transition: transform .3s var(--diag-ease);
}
.diag-row.expanded .diag-row-arrow { transform: rotate(90deg); color: var(--diag-cyan); }

/* Expanded panel — animates opacity + slight translate. The previous
   max-height keyframe locked the panel at 800px and silently truncated
   content on mobile (tabs with long stacks / many KVs). No max-height
   cap now; the page itself scrolls. */
.diag-row-detail {
  grid-column: 1 / -1;
  margin-top: 14px;
  padding: 14px 16px;
  background: var(--diag-bg-0);
  border: 1px solid var(--diag-line);
  border-radius: 10px;
  animation: diagDetailIn .32s var(--diag-ease) both;
}
@keyframes diagDetailIn {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: none; }
}
.diag-detail-section { margin-bottom: 14px; }
.diag-detail-section:last-child { margin-bottom: 0; }
.diag-detail-label {
  font-family: var(--diag-mono); font-size: 9.5px;
  font-weight: 700; letter-spacing: 1.6px; text-transform: uppercase;
  color: var(--diag-text-3);
  margin-bottom: 8px;
}
.diag-detail-stack {
  font-family: var(--diag-mono); font-size: 11px;
  color: var(--diag-text-2); line-height: 1.55;
  white-space: pre-wrap; word-break: break-word;
  max-height: 420px; overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 12px;
  background: rgba(0, 0, 0, 0.25);
  border: 1px solid var(--diag-line);
  border-radius: 8px;
}
.diag-detail-meta {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 8px;
}
.diag-detail-kv {
  padding: 8px 10px;
  background: rgba(255,255,255,0.02);
  border: 1px solid var(--diag-line);
  border-radius: 7px;
  font-family: var(--diag-mono); font-size: 11px;
}
.diag-detail-kv-key { color: var(--diag-text-4); margin-bottom: 3px; font-size: 9.5px; letter-spacing: 1px; text-transform: uppercase; }
.diag-detail-kv-val { color: var(--diag-text); word-break: break-word; }
.diag-detail-bread { display: flex; flex-direction: column; gap: 4px; }
.diag-detail-bread-row {
  display: flex; align-items: center; gap: 8px;
  font-family: var(--diag-mono); font-size: 11px;
  color: var(--diag-text-2);
  padding: 6px 10px;
  background: rgba(255,255,255,0.02);
  border-radius: 6px;
}
.diag-detail-bread-row i { font-size: 9px; color: var(--diag-cyan); flex-shrink: 0; }
.diag-detail-bread-row .diag-bread-ts { color: var(--diag-text-4); margin-left: auto; font-size: 10px; }

.diag-detail-actions {
  display: flex; gap: 8px;
  margin-top: 12px;
  flex-wrap: wrap;
}
.diag-btn {
  padding: 8px 14px; border-radius: 8px;
  font-family: var(--diag-sans); font-size: 12px; font-weight: 600;
  cursor: pointer;
  transition: all .25s var(--diag-ease);
  display: inline-flex; align-items: center; gap: 7px;
}
.diag-btn-resolve {
  background: rgba(78, 229, 152, 0.10);
  border: 1px solid rgba(78, 229, 152, 0.3);
  color: var(--diag-green);
}
.diag-btn-resolve:hover { background: rgba(78, 229, 152, 0.22); }
.diag-btn-resolve.done { background: rgba(78, 229, 152, 0.04); cursor: default; }
.diag-btn-copy {
  background: rgba(91, 208, 255, 0.08);
  border: 1px solid var(--diag-line-2);
  color: var(--diag-cyan);
}
.diag-btn-copy:hover { background: rgba(91, 208, 255, 0.18); }

/* Toast */
#diag-toast {
  position: fixed; bottom: 32px; left: 50%;
  transform: translateX(-50%) translateY(80px);
  background: rgba(13, 21, 37, 0.95);
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  border: 1px solid var(--diag-cyan);
  color: var(--diag-text);
  padding: 12px 22px; border-radius: 30px;
  display: flex; align-items: center; gap: 10px;
  font-size: 13px; font-weight: 600;
  box-shadow: 0 18px 50px rgba(0,0,0,0.55);
  opacity: 0; pointer-events: none;
  transition: all .35s var(--diag-ease);
  z-index: 9999;
}
#diag-toast.show { transform: translateX(-50%) translateY(0); opacity: 1; }
#diag-toast i { color: var(--diag-cyan); }
#diag-toast.error { border-color: var(--diag-red); }
#diag-toast.error i { color: var(--diag-red); }

/* ── Responsive ─────────────────────────────────────────────── */
@media (max-width: 1100px) {
  .diag-stats-strip { grid-template-columns: repeat(3, 1fr); }
  .diag-stat:nth-child(4), .diag-stat:nth-child(5) { grid-column: span 1; }
  .diag-health-row { grid-template-columns: 1fr; }
}
@media (max-width: 820px) {
  #diag-hdr { padding: 12px 16px; gap: 10px; }
  .diag-hdr-title { font-size: 14px; }
  .diag-hdr-clock { display: none; }
  .diag-hdr-user-chip span { max-width: 100px; font-size: 11px; }
  .diag-stats-strip { grid-template-columns: 1fr 1fr; padding: 18px 16px 8px; }
  .diag-stat-spark { display: none; }
  .diag-health-row { padding: 8px 16px; }
  .diag-filter-bar { grid-template-columns: 1fr; padding: 14px 16px; }
  .diag-feed-section { padding: 0 16px 20px; }
  .diag-row { grid-template-columns: 70px 1fr; padding: 12px 14px; gap: 10px; }
  .diag-row-arrow { display: none; }
}
@media (max-width: 540px) {
  .diag-hdr-eyebrow { display: none; }
  .diag-stats-strip { grid-template-columns: 1fr; }
  .diag-pages-grid { grid-template-columns: 1fr 1fr; }
  .diag-detail-meta { grid-template-columns: 1fr; }
}

/* ════════════════════════════════════════════════════════════
   Tabbed detail panel — full diagnostic bundle
   ════════════════════════════════════════════════════════════ */
.diag-tab-nav{
  display:flex;flex-wrap:wrap;gap:4px;
  padding:4px;margin-bottom:14px;
  background:rgba(0,0,0,0.30);
  border:1px solid var(--diag-line);
  border-radius:10px;
  overflow-x:auto;
}
.diag-tab{
  display:inline-flex;align-items:center;gap:6px;
  padding:7px 12px;border-radius:7px;
  background:transparent;border:none;cursor:pointer;
  color:var(--diag-text-3);
  font-family:var(--diag-sans);font-size:11.5px;font-weight:600;
  letter-spacing:.3px;white-space:nowrap;
  transition:color .2s, background .25s var(--diag-ease), box-shadow .25s var(--diag-ease);
}
.diag-tab i{font-size:10px;}
.diag-tab:hover{color:var(--diag-text);}
.diag-tab.on{
  background:linear-gradient(135deg,var(--diag-cyan),var(--diag-cyan-d));
  color:var(--diag-bg-0);
  box-shadow:0 3px 12px var(--diag-cyan-glow);
}
.diag-tab-body{animation:diagTabIn .3s var(--diag-ease) both;}
@keyframes diagTabIn{from{opacity:0;transform:translateY(4px);}to{opacity:1;transform:none;}}

/* Empty-tab placeholder */
.diag-empty-tab{
  padding:30px 18px;text-align:center;
  color:var(--diag-text-3);font-size:13px;
  background:rgba(0,0,0,0.20);
  border:1px dashed var(--diag-line);
  border-radius:10px;
}
.diag-empty-tab i{
  display:block;font-size:22px;margin-bottom:10px;
  color:var(--diag-text-4);
}

/* Network trail table */
.diag-trail-tbl{
  width:100%;border-collapse:collapse;
  font-family:var(--diag-mono);font-size:11px;
}
.diag-trail-tbl thead th{
  text-align:left;padding:8px 10px;
  color:var(--diag-text-3);font-weight:700;
  letter-spacing:1px;text-transform:uppercase;font-size:9.5px;
  border-bottom:1px solid var(--diag-line);
}
.diag-trail-tbl tbody td{
  padding:9px 10px;
  color:var(--diag-text-2);
  border-bottom:1px solid var(--diag-line);
}
.diag-trail-tbl tbody tr:last-child td{border-bottom:none;}
.diag-trail-tbl tbody tr:hover td{background:rgba(91,208,255,0.03);}
.diag-net-method{
  display:inline-block;padding:1px 7px;border-radius:5px;
  background:rgba(91,208,255,0.10);color:var(--diag-cyan);
  font-weight:700;font-size:10px;letter-spacing:1px;
}
.diag-net-url{
  max-width:340px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  color:var(--diag-text);
}
.diag-net-status{
  display:inline-block;padding:1px 8px;border-radius:5px;
  font-weight:700;font-size:10.5px;
  background:rgba(255,255,255,0.05);color:var(--diag-text-2);
  border:1px solid var(--diag-line);
}
.diag-net-status.ok  {background:rgba(78,229,152,0.10);color:var(--diag-green);border-color:rgba(78,229,152,0.25);}
.diag-net-status.warn{background:rgba(255,179,71,0.10);color:var(--diag-amber);border-color:rgba(255,179,71,0.25);}
.diag-net-status.fail{background:rgba(255,89,115,0.10);color:var(--diag-red);  border-color:rgba(255,89,115,0.25);}
.diag-net-ms{color:var(--diag-text-3);font-size:10.5px;}

/* Console echo feed */
.diag-console-feed{
  display:flex;flex-direction:column;gap:4px;
  background:rgba(0,0,0,0.30);
  border:1px solid var(--diag-line);
  border-radius:8px;
  padding:10px 12px;
  max-height:340px;overflow-y:auto;
}
.diag-console-line{
  display:flex;align-items:flex-start;gap:10px;
  font-family:var(--diag-mono);font-size:11px;
  padding:5px 0;
  border-bottom:1px solid rgba(255,255,255,0.03);
}
.diag-console-line:last-child{border-bottom:none;}
.diag-console-ts{color:var(--diag-text-4);font-size:10px;flex-shrink:0;min-width:64px;}
.diag-console-lvl{
  flex-shrink:0;font-weight:800;font-size:9.5px;
  letter-spacing:1.5px;text-transform:uppercase;
  padding:1px 7px;border-radius:5px;align-self:flex-start;margin-top:1px;
}
.diag-console-line.warn  .diag-console-lvl{background:rgba(255,179,71,0.15);color:var(--diag-amber);}
.diag-console-line.error .diag-console-lvl{background:rgba(255,89,115,0.15);color:var(--diag-red);}
.diag-console-msg{flex:1;color:var(--diag-text-2);word-break:break-word;line-height:1.45;}

/* System health row — sparkline column */
.diag-system-row{
  grid-template-columns:1fr 80px auto auto !important;
}
.diag-system-spark{
  width:80px;height:22px;display:block;
}

/* Live event ticker */
.diag-ticker-section{
  margin:0 28px 14px;
  background:linear-gradient(135deg,rgba(255,255,255,0.04),rgba(255,255,255,0.01));
  border:1px solid var(--diag-line);border-radius:12px;
  padding:10px 16px;
  animation:diagCardIn .55s var(--diag-ease) .28s both;
  overflow:hidden;
}
.diag-ticker-label{
  font-family:var(--diag-mono);font-size:10px;font-weight:700;
  letter-spacing:1.6px;text-transform:uppercase;color:var(--diag-text-3);
  margin-bottom:6px;
}
.diag-ticker-label i{color:var(--diag-cyan);margin-right:6px;font-size:11px;}
.diag-ticker{
  display:flex;flex-wrap:wrap;gap:8px;
  min-height:30px;
}
.diag-ticker-item{
  display:inline-flex;align-items:center;gap:7px;
  padding:5px 10px;border-radius:14px;
  background:rgba(255,255,255,0.04);
  border:1px solid var(--diag-line);
  font-size:11px;color:var(--diag-text-2);
  animation:diagTickerIn .35s var(--diag-ease) both;
  max-width:380px;
}
.diag-ticker-item i{font-size:10px;}
.diag-ticker-item em{font-style:normal;color:var(--diag-text-3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:200px;}
.diag-ticker-t{
  font-family:var(--diag-mono);font-size:9.5px;color:var(--diag-text-4);
  margin-left:4px;letter-spacing:.4px;
}
.diag-ticker-cyan   { border-color:rgba(91,208,255,0.30); }
.diag-ticker-cyan   i { color:var(--diag-cyan); }
.diag-ticker-gold   { border-color:rgba(240,200,50,0.30); }
.diag-ticker-gold   i { color:#f0c832; }
.diag-ticker-violet { border-color:rgba(122,137,255,0.30); }
.diag-ticker-violet i { color:var(--diag-violet); }
.diag-ticker-green  { border-color:rgba(78,229,152,0.30); }
.diag-ticker-green  i { color:var(--diag-green); }
.diag-ticker-empty{
  font-family:var(--diag-mono);font-size:11px;color:var(--diag-text-4);
  letter-spacing:.5px;
}
@keyframes diagTickerIn{
  from{opacity:0;transform:translateX(-10px) scale(.95);}
  to  {opacity:1;transform:none;}
}

/* Mobile — tabbed detail panel */
@media (max-width: 820px){
  .diag-tab-nav{flex-wrap:nowrap;overflow-x:auto;}
  .diag-tab{flex-shrink:0;}
  .diag-trail-tbl{font-size:10.5px;}
  .diag-net-url{max-width:140px;}
  .diag-system-row{grid-template-columns:1fr auto auto !important;}
  .diag-system-spark{display:none;}
  .diag-ticker-section{margin:0 16px 12px;}
}
@media (max-width: 540px){
  .diag-tab{padding:8px 10px;font-size:11.5px;gap:5px;}
  /* Keep the icon — it's the only thing visible when the strip scrolls past
     a non-active tab on tight screens. Override the previous "display:none"
     on icons so icon-only mode actually works. */
  .diag-tab i{display:inline-flex !important;font-size:11px;opacity:.85;}
  /* Compact every non-active tab to icon-only; active tab keeps its label so
     the user always knows where they are in the strip. */
  .diag-tab:not(.on) .diag-tab-lbl{display:none;}
  .diag-tab.on{padding:8px 12px;}
  .diag-tab.on .diag-tab-lbl{display:inline-flex;}
}

/* ════════════════════════════════════════════════════════════
   v3 ADDITIONS — Logo · Session timer · Avatar photo · Visitors
   ════════════════════════════════════════════════════════════ */

/* DTTASA logo in header */
.diag-hdr-logo-wrap{
  display:flex;align-items:center;
  margin-right:4px;
  animation:diagLogoIn .55s var(--diag-ease) .15s both;
}
@keyframes diagLogoIn{from{opacity:0;transform:translateX(-8px);}to{opacity:1;transform:none;}}
.diag-hdr-logo{
  width:38px;height:38px;border-radius:9px;
  object-fit:contain;
  background:rgba(255,255,255,0.04);
  border:1px solid var(--diag-line);
  padding:4px;
  filter:drop-shadow(0 0 12px rgba(91,208,255,0.15));
  transition:filter .3s var(--diag-ease),transform .25s var(--diag-ease);
}
.diag-hdr-logo:hover{
  transform:scale(1.08) rotate(-2deg);
  filter:drop-shadow(0 0 18px rgba(91,208,255,0.35));
}
.diag-hdr-logo-fallback{
  font-family:var(--diag-mono);font-size:10px;font-weight:800;
  letter-spacing:2px;color:var(--diag-cyan);
  width:38px;height:38px;border-radius:9px;
  border:1px solid var(--diag-line-2);
  align-items:center;justify-content:center;
  background:rgba(91,208,255,0.06);
}

/* Header session timer */
.diag-hdr-session{
  display:flex;align-items:center;gap:7px;
  padding:6px 12px;border-radius:8px;
  background:rgba(91,208,255,0.06);
  border:1px solid var(--diag-line);
  font-family:var(--diag-mono);font-size:11px;font-weight:700;
  color:var(--diag-cyan);letter-spacing:1px;
  transition:background .25s var(--diag-ease);
}
.diag-hdr-session i{font-size:10px;opacity:.8;}
.diag-hdr-session:hover{background:rgba(91,208,255,0.12);}

/* Header user-chip — full name + photo support */
.diag-hdr-user-chip span{
  max-width:160px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.diag-hdr-av{overflow:hidden;}
.diag-hdr-av img{display:block;}

/* Recent Visitors section */
.diag-visitors-section{
  margin:0 28px 16px;
  background:linear-gradient(135deg,rgba(255,255,255,0.04),rgba(255,255,255,0.01));
  border:1px solid var(--diag-line);
  border-radius:14px;
  padding:16px 18px;
  animation:diagCardIn .6s var(--diag-ease) .34s both;
}
.diag-visitors-list{
  display:flex;flex-direction:column;gap:8px;
  margin-top:10px;
}
.diag-visitors-empty{
  font-family:var(--diag-mono);font-size:11px;
  color:var(--diag-text-4);letter-spacing:.5px;
  padding:14px 0;text-align:center;
}
.diag-visitor-row{
  display:grid;
  grid-template-columns:36px 1fr auto;
  gap:12px;align-items:center;
  padding:10px 12px;
  background:rgba(255,255,255,0.02);
  border:1px solid var(--diag-line);
  border-radius:10px;
  transition:background .25s var(--diag-ease),border-color .25s var(--diag-ease),transform .25s var(--diag-ease);
  animation:diagCardIn .45s var(--diag-ease) both;
}
.diag-visitor-row:hover{
  background:rgba(91,208,255,0.04);
  border-color:var(--diag-line-2);
  transform:translateX(2px);
}
.diag-visitor-av{
  width:36px;height:36px;border-radius:50%;
  background:linear-gradient(135deg,var(--diag-cyan),var(--diag-violet));
  display:flex;align-items:center;justify-content:center;
  font-family:var(--diag-mono);font-size:11px;font-weight:800;
  color:var(--diag-bg-0);
  overflow:hidden;
  letter-spacing:.5px;
}
.diag-visitor-av img{width:100%;height:100%;object-fit:cover;border-radius:50%;display:block;}
.diag-visitor-body{min-width:0;}
.diag-visitor-name{
  font-size:13px;font-weight:600;color:var(--diag-text);
  display:flex;align-items:center;gap:8px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.diag-visitor-you{
  display:inline-block;padding:1px 7px;border-radius:4px;
  background:linear-gradient(135deg,var(--diag-cyan),var(--diag-cyan-d));
  color:var(--diag-bg-0);
  font-family:var(--diag-mono);font-size:8.5px;font-weight:900;
  letter-spacing:1.5px;line-height:1.5;
}
.diag-visitor-sub{
  font-size:11px;color:var(--diag-text-3);
  margin-top:2px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.diag-visitor-meta{
  text-align:right;
  font-family:var(--diag-mono);
}
.diag-visitor-when{font-size:10.5px;color:var(--diag-text-3);letter-spacing:.4px;}
.diag-visitor-dur{
  font-size:11px;font-weight:700;color:var(--diag-text-2);
  margin-top:3px;letter-spacing:.5px;
}
.diag-visitor-dur.live{
  color:var(--diag-green);
  position:relative;padding-left:14px;
}
.diag-visitor-dur.live::before{
  content:'';position:absolute;left:0;top:50%;transform:translateY(-50%);
  width:8px;height:8px;border-radius:50%;
  background:var(--diag-green);box-shadow:0 0 8px var(--diag-green);
  animation:diagPulse 1.5s ease-out infinite;
}

/* ════════════════════════════════════════════════════════════
   Mobile polish — make every section breathe on iPhone widths
   ════════════════════════════════════════════════════════════ */
@media (max-width: 820px){
  #diag-hdr{padding:11px 14px;flex-wrap:wrap;gap:8px;}
  .diag-hdr-left{gap:10px;flex:1;min-width:0;}
  .diag-hdr-right{gap:8px;flex-wrap:wrap;}
  .diag-hdr-logo{width:34px;height:34px;}
  .diag-hdr-text{display:none;}              /* keep just the pulse dot */
  .diag-hdr-session{padding:5px 10px;font-size:10px;}
  .diag-hdr-clock{padding:5px 10px;font-size:11px;}
  .diag-hdr-status{padding:5px 10px;}
  .diag-hdr-user-chip{padding:4px 10px 4px 4px;}
  .diag-hdr-user-chip span{max-width:100px;font-size:11px;}
  .diag-visitors-section{margin:0 14px 14px;}
  .diag-visitor-meta{text-align:right;font-size:10px;}
}
@media (max-width: 540px){
  .diag-hdr-logo{width:32px;height:32px;}
  .diag-hdr-session{display:none;}            /* timer compresses out */
  .diag-hdr-clock{display:none;}
  .diag-hdr-status{padding:5px 8px;}
  .diag-visitor-row{grid-template-columns:32px 1fr;gap:10px;padding:10px;}
  .diag-visitor-meta{grid-column:1 / -1;text-align:left;display:flex;justify-content:space-between;gap:10px;padding-top:4px;border-top:1px dashed var(--diag-line);}
  .diag-visitor-when,.diag-visitor-dur{font-size:10px;}
}
@media (max-width: 400px){
  #diag-hdr{padding:10px 10px;}
  .diag-hdr-pulse{width:10px;height:10px;}
}

/* ── Escalation trail block in the error detail panel ───────── */
.diag-escalation-context{
  margin-top:14px;padding:12px 14px;border-radius:10px;
  background:rgba(255,167,38,.06);border:1px solid rgba(255,167,38,.22);
}
.diag-escalation-title{
  font-size:10px;font-weight:800;letter-spacing:1.5px;text-transform:uppercase;
  color:#ffb74d;margin-bottom:10px;display:flex;align-items:center;gap:8px;
}
.diag-escalation-row{
  display:flex;justify-content:space-between;align-items:center;gap:12px;
  padding:6px 0;font-size:12px;color:rgba(242,247,238,.78);
  border-bottom:1px dashed rgba(255,255,255,.08);
}
.diag-escalation-row:last-of-type{border-bottom:0;}
.diag-escalation-row>span:first-child{color:rgba(242,247,238,.55);font-weight:600;}
.diag-escalation-note{
  margin-top:8px;padding:8px 10px;background:rgba(0,0,0,.22);border-radius:6px;
  font-size:12px;color:rgba(242,247,238,.86);line-height:1.45;
  border-left:2px solid rgba(255,167,38,.5);
}
@media (max-width: 540px){
  .diag-escalation-row{flex-direction:column;align-items:flex-start;gap:2px;}
  .diag-escalation-row>span:last-child{font-size:11px;color:rgba(242,247,238,.55);}
}

/* ── Stat-card sub label (extra context under the value) ────── */
.diag-stat-sub{
  font-size:10px;font-weight:600;letter-spacing:.5px;color:rgba(242,247,238,.45);
  margin-top:3px;line-height:1.3;
}

/* ── Recently Resolved section — full audit trail with notes ── */
.diag-resolved-section{
  margin-top:18px;padding:18px 20px;border-radius:14px;
  background:rgba(76,214,87,.04);border:1px solid rgba(76,214,87,.18);
}
.diag-resolved-section .diag-card-eyebrow{color:#4cd657;}
.diag-resolved-list{display:flex;flex-direction:column;gap:10px;margin-top:10px;}
.diag-resolved-empty{
  padding:18px;text-align:center;font-size:13px;color:rgba(242,247,238,.5);
  background:rgba(0,0,0,.18);border-radius:10px;border:1px dashed rgba(76,214,87,.22);
}
.diag-resolved-card{
  padding:14px 16px;border-radius:10px;cursor:pointer;
  background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.10);
  transition:all .25s cubic-bezier(.16,1,.3,1);
  border-left:3px solid #4cd657;
}
.diag-resolved-card:hover{
  background:rgba(255,255,255,.07);border-color:rgba(76,214,87,.4);transform:translateX(2px);
}
.diag-resolved-line1{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:5px;}
.diag-resolved-code{font-weight:700;font-size:13px;color:#f0c832;letter-spacing:.3px;}
.diag-resolved-scope{
  font-size:10px;letter-spacing:1px;text-transform:uppercase;color:rgba(242,247,238,.45);
  padding:2px 7px;border-radius:4px;background:rgba(255,255,255,.06);
}
.diag-resolved-ttr{
  font-size:11px;font-weight:600;color:#4cd657;display:inline-flex;gap:5px;align-items:center;
  padding:2px 7px;border-radius:4px;background:rgba(76,214,87,.10);
}
.diag-resolved-msg{
  font-size:13px;color:rgba(242,247,238,.86);margin-bottom:8px;line-height:1.45;
}
.diag-resolved-meta{
  display:flex;flex-wrap:wrap;gap:14px;font-size:11px;color:rgba(242,247,238,.55);
  margin-bottom:8px;
}
.diag-resolved-meta span{display:inline-flex;gap:5px;align-items:center;}
.diag-resolved-note{
  font-size:12px;color:rgba(242,247,238,.82);background:rgba(0,0,0,.22);
  padding:9px 12px;border-radius:7px;line-height:1.5;
  border-left:2px solid #4cd657;
}
.diag-resolved-note.empty{color:rgba(242,247,238,.4);font-style:italic;border-left-color:rgba(255,255,255,.12);}
.diag-resolved-note i{color:rgba(76,214,87,.55);margin-right:5px;}
@media (max-width: 540px){
  .diag-resolved-section{padding:14px 12px;}
  .diag-resolved-card{padding:12px;}
  .diag-resolved-meta{gap:10px;font-size:10px;}
}

/* ── Section spacing — reflects 2026-05-22 re-order: Live Error Feed sits
   directly under the Filter Bar (no large top margin needed), and Recently
   Resolved sits at the bottom (modest top margin to separate from Page
   Visitors audit above). */
.diag-feed-section{margin-top:14px;padding-top:6px;}
.diag-resolved-section{margin-top:22px;margin-bottom:8px;}

/* ── Resolved pager + counter ───────────────────────────────── */
.diag-resolved-pager{
  display:flex;justify-content:space-between;align-items:center;gap:14px;
  margin-top:14px;padding-top:14px;border-top:1px solid rgba(255,255,255,.08);
}
.diag-pager-btn{
  display:inline-flex;align-items:center;gap:6px;
  padding:7px 14px;border-radius:8px;cursor:pointer;
  background:rgba(255,255,255,.06);color:rgba(242,247,238,.86);
  border:1px solid rgba(255,255,255,.14);
  font-size:12px;font-weight:600;letter-spacing:.4px;
  transition:all .2s cubic-bezier(.16,1,.3,1);
}
.diag-pager-btn:hover:not(:disabled){background:rgba(76,214,87,.14);border-color:rgba(76,214,87,.45);color:#4cd657;}
.diag-pager-btn:disabled{opacity:.32;cursor:not-allowed;}
.diag-pager-counter{
  font-size:12px;font-weight:600;color:rgba(242,247,238,.62);
  letter-spacing:.4px;flex:1;text-align:center;
}
.diag-resolved-opener{
  margin-left:auto;font-size:11px;color:rgba(76,214,87,.55);
  display:inline-flex;align-items:center;
}
.diag-resolved-card:hover .diag-resolved-opener{color:#4cd657;}

/* ── Detail overlay modal — full forensic report focus view ─── */
.diag-detail-overlay{
  position:fixed;inset:0;z-index:10000;
  background:rgba(12,17,9,.78);backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  display:flex;align-items:flex-start;justify-content:center;
  padding:48px 24px;overflow-y:auto;
  animation:diagOverlayIn .25s cubic-bezier(.16,1,.3,1);
}
@keyframes diagOverlayIn{
  from{opacity:0;}
  to{opacity:1;}
}
.diag-detail-modal{
  position:relative;width:100%;max-width:920px;
  background:#172213;border:1px solid rgba(255,255,255,.18);
  border-radius:14px;padding:24px 28px 28px;
  box-shadow:0 24px 60px rgba(0,0,0,.55);
  animation:diagModalIn .35s cubic-bezier(.16,1,.3,1);
}
@keyframes diagModalIn{
  from{opacity:0;transform:translateY(-12px);}
  to{opacity:1;transform:none;}
}
/* Exit animation (was a hard u-hide snap). _closeDetailModal adds .closing, then
   removes u-hide on animationend. */
.diag-detail-overlay.closing{animation:diagOverlayOut .22s cubic-bezier(.16,1,.3,1) forwards;}
.diag-detail-overlay.closing .diag-detail-modal{animation:diagModalOut .22s cubic-bezier(.16,1,.3,1) forwards;}
@keyframes diagOverlayOut{ from{opacity:1;} to{opacity:0;} }
@keyframes diagModalOut{ from{opacity:1;transform:none;} to{opacity:0;transform:translateY(-10px);} }
.diag-detail-modal-close{
  position:absolute;top:14px;right:14px;width:36px;height:36px;
  border-radius:10px;background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.14);color:rgba(242,247,238,.78);
  cursor:pointer;display:flex;align-items:center;justify-content:center;
  font-size:14px;transition:all .2s ease;
}
.diag-detail-modal-close:hover{background:rgba(255,72,72,.16);border-color:rgba(255,72,72,.45);color:#ff7088;}
.diag-detail-modal-hdr{
  padding-right:48px;padding-bottom:14px;margin-bottom:18px;
  border-bottom:1px solid rgba(255,255,255,.10);
}
.diag-detail-modal-row1{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-bottom:8px;}
.diag-detail-modal-code{
  font-weight:800;font-size:18px;color:#f0c832;letter-spacing:.3px;
}
.diag-detail-modal-scope{
  font-size:10px;letter-spacing:1.2px;text-transform:uppercase;
  color:rgba(242,247,238,.55);padding:2px 8px;border-radius:5px;
  background:rgba(255,255,255,.06);
}
.diag-detail-modal-pill{
  font-size:10px;font-weight:800;letter-spacing:1px;text-transform:uppercase;
  padding:3px 9px;border-radius:5px;
}
.diag-detail-modal-pill.ok{background:rgba(76,214,87,.14);color:#4cd657;}
.diag-detail-modal-pill.warn{background:rgba(255,167,38,.16);color:#ffb74d;}
.diag-detail-modal-pill.red{background:rgba(255,72,72,.16);color:#ff7088;}
.diag-detail-modal-msg{
  font-size:14px;color:rgba(242,247,238,.92);line-height:1.5;margin-bottom:10px;
}
.diag-detail-modal-meta{
  display:flex;flex-wrap:wrap;gap:16px;font-size:11px;color:rgba(242,247,238,.55);
}
.diag-detail-modal-meta span{display:inline-flex;gap:5px;align-items:center;}
.diag-detail-modal-body .diag-tab-nav{margin-bottom:14px;}
.diag-detail-modal-body .diag-tab-body{
  max-height:60vh;overflow-y:auto;padding-right:6px;
}
@media (max-width: 640px){
  .diag-detail-overlay{padding:24px 12px;}
  .diag-detail-modal{padding:18px 16px 22px;border-radius:12px;}
  .diag-detail-modal-code{font-size:15px;}
  .diag-detail-modal-msg{font-size:13px;}
  .diag-detail-modal-meta{gap:10px;font-size:10px;}
  .diag-detail-modal-body .diag-tab-body{max-height:65vh;}
}
@media (max-width: 540px){
  .diag-resolved-pager{flex-direction:column;align-items:stretch;gap:10px;}
  .diag-pager-counter{order:-1;text-align:center;}
  .diag-pager-btn{justify-content:center;}
}

/* ════════════════════════════════════════════════════════════════
   COMPREHENSIVE MOBILE OVERHAUL (2026-05-22)
   ────────────────────────────────────────────────────────────────
   Enterprise-grade responsive pass — overrides earlier fragmented
   rules above. Single source of truth for every layout-affecting
   media-query below 1100px.
   ════════════════════════════════════════════════════════════════ */

/* ---- 1. Enterprise-grade scrolling tab nav ---- */
/* Inline detail panel + modal both use .diag-tab-nav > .diag-tab. On any
   width that can't fit all 12 tabs in one row, the bar becomes a smooth
   horizontally-scrollable strip with snap points, hidden scrollbar, and
   subtle fade gradients on both edges so users see there's more to swipe. */
.diag-tab-nav{
  position:relative;
  flex-wrap:nowrap !important;
  overflow-x:auto;overflow-y:hidden;
  scroll-snap-type:x proximity;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;-ms-overflow-style:none;
  padding:4px;
  mask-image:linear-gradient(90deg,transparent 0,#000 18px,#000 calc(100% - 18px),transparent 100%);
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 18px,#000 calc(100% - 18px),transparent 100%);
}
.diag-tab-nav::-webkit-scrollbar{display:none;height:0;width:0;}
.diag-tab{
  flex:0 0 auto !important;
  scroll-snap-align:start;
  white-space:nowrap;
  min-height:38px;           /* tap-friendly even with compact padding */
}
/* No mask on desktop where all tabs fit; restore at >=1024px */
@media (min-width: 1024px){
  .diag-tab-nav{mask-image:none;-webkit-mask-image:none;}
}

/* ---- 2. Tab body — vertical scrolling inside any narrow container ---- */
.diag-tab-body{
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
}
.diag-tab-body pre,
.diag-tab-body code{
  white-space:pre-wrap;
  word-break:break-word;
  overflow-wrap:anywhere;
}
.diag-tab-body table{
  display:block;
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  max-width:100%;
}

/* ---- 3. Network trail table — let it scroll horizontally on narrow ---- */
.diag-trail-tbl{min-width:520px;}
@media (max-width: 600px){
  .diag-net-url{max-width:200px;}
}

/* ---- 4. Header — tighten on narrow widths without losing brand ---- */
@media (max-width: 820px){
  #diag-hdr{flex-wrap:wrap;gap:8px;padding:10px 14px;}
  .diag-hdr-logo{width:32px;height:32px;}
  .diag-hdr-pulse{display:none;}
  .diag-hdr-eyebrow{font-size:9px;}
  .diag-hdr-title{font-size:13px;}
}
@media (max-width: 540px){
  #diag-hdr{padding:10px 12px;gap:6px;}
  .diag-hdr-back .diag-hdr-back-lbl,
  .diag-hdr-back span:not([class]){display:none;}    /* arrow-only on tiny */
  .diag-hdr-left{gap:8px;flex:1 1 auto;min-width:0;}
  .diag-hdr-right{gap:6px;}
  .diag-hdr-user-chip{padding:4px 8px;}
  .diag-hdr-user-chip span{max-width:72px;font-size:10.5px;}
  .diag-hdr-status{padding:4px 8px;font-size:9.5px;}
  .diag-hdr-clock{display:none;}
}

/* ---- 5. Stat strip — clean two-up then single column ---- */
@media (max-width: 820px){
  .diag-stats-strip{
    grid-template-columns:repeat(2, minmax(0, 1fr));
    padding:14px 14px 6px;gap:10px;
  }
  .diag-stat{padding:12px 12px;}
  .diag-stat-icon{width:34px;height:34px;font-size:14px;}
  .diag-stat-val{font-size:22px;}
  .diag-stat-lbl{font-size:10px;}
  .diag-stat-spark{display:none;}
}
@media (max-width: 400px){
  .diag-stats-strip{grid-template-columns:1fr;}
  .diag-stat-val{font-size:24px;}
}

/* ---- 6. Filter bar — wrap cleanly, full-width search ---- */
@media (max-width: 820px){
  .diag-filter-bar{
    grid-template-columns:1fr !important;
    padding:12px 14px;gap:10px;
  }
  .diag-filter-tabs{
    display:flex;flex-wrap:wrap;gap:6px;
  }
  .diag-fbtn{flex:1 1 calc(50% - 6px);min-height:38px;font-size:11.5px;}
  .diag-filter-search{width:100%;}
  .diag-filter-meta{display:flex;justify-content:space-between;align-items:center;font-size:11px;}
}

/* ---- 7. Error rows — already narrow-aware, just ensure padding + arrow hide ---- */
@media (max-width: 540px){
  .diag-row{grid-template-columns:60px 1fr;padding:11px 12px;gap:8px;}
  .diag-row-ts{font-size:10.5px;}
  .diag-row-line1{flex-wrap:wrap;gap:6px;}
  .diag-row-code{font-size:12px;}
  .diag-row-msg{font-size:12.5px;}
  .diag-row-line3{flex-wrap:wrap;gap:8px;font-size:10.5px;}
  .diag-row-arrow{display:none;}
}

/* ---- 8. Inline detail actions — wrap & full-width buttons on small ---- */
@media (max-width: 540px){
  .diag-detail-actions{
    display:flex;flex-direction:column;gap:8px;align-items:stretch;
  }
  .diag-detail-actions .diag-btn{
    width:100%;justify-content:center;min-height:42px;font-size:12.5px;
  }
}

/* ---- 9. Detail-overlay modal — full bleed on phones ---- */
@media (max-width: 640px){
  .diag-detail-overlay{
    padding:0;
    align-items:stretch;
  }
  .diag-detail-modal{
    border-radius:0;
    max-width:100%;width:100%;
    padding:18px 14px calc(22px + env(safe-area-inset-bottom,0px));
    padding-top:calc(18px + env(safe-area-inset-top,0px));
    min-height:100vh;
    box-shadow:none;
  }
  .diag-detail-modal-close{
    top:calc(10px + env(safe-area-inset-top,0px));
    right:10px;width:38px;height:38px;
  }
  .diag-detail-modal-hdr{padding-right:54px;}
  .diag-detail-modal-body .diag-tab-body{
    max-height:none;     /* full-page modal — no inner scroll needed */
    overflow-x:auto;
  }
}
@media (max-width: 400px){
  .diag-detail-modal-code{font-size:14px;}
  .diag-detail-modal-msg{font-size:12.5px;}
}

/* ---- 10. Resolved section + pager + cards ---- */
@media (max-width: 820px){
  .diag-resolved-section{margin:0 14px;padding:14px 14px;}
}
@media (max-width: 540px){
  .diag-resolved-section{margin:0 12px;padding:12px 12px;border-radius:12px;}
  .diag-resolved-card{padding:11px 12px;}
  .diag-resolved-line1{flex-wrap:wrap;gap:6px;}
  .diag-resolved-code{font-size:12.5px;}
  .diag-resolved-msg{font-size:12.5px;}
  .diag-resolved-meta{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:6px 10px;font-size:10.5px;
  }
  .diag-resolved-meta span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
  .diag-resolved-pager{flex-direction:column;align-items:stretch;gap:8px;padding-top:12px;}
  .diag-pager-counter{order:-1;font-size:11.5px;}
  .diag-pager-btn{justify-content:center;min-height:42px;}
}

/* ---- 11. Visitors + system + page health — already addressed, keep tight ---- */
@media (max-width: 820px){
  .diag-visitors-section,
  .diag-card-system,
  .diag-card-pages,
  .diag-ticker-section,
  .diag-feed-section{margin-left:14px;margin-right:14px;}
}

/* ---- 12. Escalation context block ---- */
@media (max-width: 540px){
  .diag-escalation-context{padding:10px 12px;}
  .diag-escalation-row{flex-direction:column;align-items:flex-start;gap:2px;padding:5px 0;}
  .diag-escalation-row > span:first-child{font-size:10.5px;}
  .diag-escalation-row > span:last-child{font-size:11px;color:rgba(242,247,238,.55);}
  .diag-escalation-note{font-size:11.5px;}
}

/* ---- 13. Touch-friendly mins enforced site-wide on diagnostics ---- */
@media (max-width: 820px){
  .diag-btn,
  .diag-fbtn,
  .diag-pager-btn,
  .diag-pause-btn,
  .diag-hdr-back,
  .diag-hdr-icon-btn{min-height:42px;}
  .diag-tab{min-height:38px;padding:8px 12px;}
}

/* ---- 14. Reduce motion (respect OS setting) ---- */
@media (prefers-reduced-motion: reduce){
  .diag-tab-body,
  .diag-detail-overlay,
  .diag-detail-modal,
  .diag-row,
  .diag-stat{animation:none !important;transition:none !important;}
}

/* ════════════════════════════════════════════════════════════════
   FIXES (2026-05-22 evening) — bleed, scroll, modal background
   ════════════════════════════════════════════════════════════════ */
/* Tab body & all panel containers get an explicit dark base so the green
   tint of the resolved-section (or any parent) never bleeds through. */
.diag-tab-body{
  background:rgba(8,12,7,0.55);
  border-radius:8px;
  padding:14px 14px;
  min-height:120px;
}
.diag-detail-modal-body .diag-tab-body{
  background:rgba(8,12,7,0.50);
}
.diag-detail-modal{
  background:#0f1610;             /* darker, neutral; no green tint */
  border:1px solid rgba(255,255,255,0.16);
}
.diag-detail-modal-body{
  background:transparent;          /* let modal bg show */
}
/* Inline expanded row — when the detail is inside a row that's inside
   the resolved-section, give the wrapper its own solid color. */
.diag-row.expanded > .diag-row-detail,
.diag-row-detail{
  background:rgba(8,12,7,0.55);
  border-top:1px solid rgba(255,255,255,0.08);
  border-radius:0 0 10px 10px;
  padding:14px 14px 16px;
  margin-top:6px;
}

/* ════════════════════════════════════════════════════════════════
   PAGE VISITORS — portal-wide audit section
   ════════════════════════════════════════════════════════════════ */
.diag-pagevisits-section{
  margin:18px 28px 16px;
  background:linear-gradient(135deg,rgba(91,208,255,0.06),rgba(91,208,255,0.01));
  border:1px solid rgba(91,208,255,0.18);
  border-radius:14px;
  padding:16px 18px;
  animation:diagCardIn .6s var(--diag-ease,cubic-bezier(.16,1,.3,1)) .42s both;
}
.diag-pagevisits-section .diag-card-eyebrow{color:#5bd0ff;}
.diag-pagevisits-list{display:flex;flex-direction:column;gap:10px;margin-top:10px;}
.diag-pv-card{
  padding:13px 14px;border-radius:10px;cursor:pointer;
  background:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,0.10);
  transition:all .25s cubic-bezier(.16,1,.3,1);
  border-left:3px solid rgba(91,208,255,0.55);
}
.diag-pv-card:hover{
  background:rgba(255,255,255,0.07);
  border-color:rgba(91,208,255,0.45);
  transform:translateX(2px);
}
.diag-pv-line1{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:5px;}
.diag-pv-name{font-weight:700;font-size:13px;color:#f0c832;letter-spacing:.2px;}
.diag-pv-type{
  font-size:9.5px;font-weight:800;letter-spacing:1.4px;text-transform:uppercase;
  padding:2px 7px;border-radius:5px;
  background:rgba(255,255,255,0.06);color:rgba(242,247,238,0.62);
}
.diag-pv-type.t-staff{background:rgba(76,214,87,0.16);color:#4cd657;}
.diag-pv-type.t-applicant{background:rgba(245,158,11,0.16);color:#ffb74d;}
.diag-pv-type.t-token-bearer{background:rgba(255,72,72,0.16);color:#ff7088;}
.diag-pv-type.t-anonymous{background:rgba(255,255,255,0.06);color:rgba(242,247,238,0.55);}
.diag-pv-live{
  font-size:10px;font-weight:800;letter-spacing:1.4px;text-transform:uppercase;
  color:#4cd657;
  animation:diagPvPulse 1.8s ease-in-out infinite;
}
@keyframes diagPvPulse{50%{opacity:.45;}}
.diag-pv-line2{
  display:flex;flex-wrap:wrap;gap:14px;font-size:11px;color:rgba(242,247,238,0.62);
  margin-bottom:6px;
}
.diag-pv-line2 span{display:inline-flex;gap:5px;align-items:center;}
.diag-pv-opener{
  font-size:11px;color:rgba(91,208,255,0.62);
  display:inline-flex;gap:5px;align-items:center;
}
.diag-pv-card:hover .diag-pv-opener{color:#5bd0ff;}

/* ── Page-visit modal body ─────────────────────────────────── */
.diag-pv-modal-meta-grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:10px;margin-bottom:18px;
  padding:14px;border-radius:10px;
  background:rgba(0,0,0,0.22);border:1px solid rgba(255,255,255,0.08);
}
.diag-pv-modal-meta-grid > div{display:flex;flex-direction:column;gap:3px;min-width:0;}
.diag-pv-modal-meta-grid .lbl{
  font-size:9.5px;letter-spacing:1.4px;text-transform:uppercase;
  color:rgba(242,247,238,0.45);font-weight:700;
}
.diag-pv-modal-meta-grid .val{
  font-size:12px;color:rgba(242,247,238,0.86);
  word-break:break-word;
}
.diag-pv-modal-meta-grid .val.ua{font-family:var(--diag-mono);font-size:10.5px;color:rgba(242,247,238,0.62);}

.diag-pv-actions-title{
  font-size:11px;font-weight:800;letter-spacing:1.4px;text-transform:uppercase;
  color:#5bd0ff;margin-bottom:10px;display:flex;align-items:center;gap:8px;
}
.diag-pv-actions-list{
  display:flex;flex-direction:column;gap:6px;
  padding:12px;border-radius:10px;
  background:rgba(0,0,0,0.22);border:1px solid rgba(255,255,255,0.08);
  max-height:50vh;overflow-y:auto;
}
.diag-pv-actions-empty{
  padding:14px;text-align:center;font-size:12px;color:rgba(242,247,238,0.45);
}
.diag-pv-action{
  display:grid;grid-template-columns:60px 1fr auto;gap:10px;align-items:baseline;
  padding:7px 10px;border-radius:7px;background:rgba(255,255,255,0.03);
  font-size:11.5px;color:rgba(242,247,238,0.85);
}
.diag-pv-action-time{
  font-family:var(--diag-mono,monospace);font-size:10px;color:rgba(91,208,255,0.8);
  font-weight:600;letter-spacing:.4px;
}
.diag-pv-action-label{font-weight:700;color:rgba(242,247,238,0.92);}
.diag-pv-action-target,
.diag-pv-action-detail{
  font-family:var(--diag-mono,monospace);font-size:10.5px;color:rgba(242,247,238,0.62);
  text-align:right;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  grid-column:1 / -1;text-align:left;
}
@media (max-width: 820px){
  .diag-pagevisits-section{margin:14px 14px;}
}
@media (max-width: 540px){
  .diag-pagevisits-section{margin:12px 12px;padding:12px;border-radius:12px;}
  .diag-pv-card{padding:11px 12px;}
  .diag-pv-line2{gap:8px;font-size:10.5px;}
  .diag-pv-action{grid-template-columns:55px 1fr;}
  .diag-pv-modal-meta-grid{grid-template-columns:1fr;padding:12px;}
}

/* Device meta grid — span helpers for long values (UA, session id) */
.diag-pv-modal-meta-grid > .span2{grid-column:1 / -1;}
.diag-pv-modal-meta-grid .val.pl{font-weight:700;color:#5bd0ff;}

/* ════════════════════════════════════════════════════════════════
   STAT-STRIP MOBILE POLISH (2026-05-22 late)
   ────────────────────────────────────────────────────────────────
   Fix: "Top Error Code" stat had `word-break:break-all` + 14px font
   which still overflowed cramped 2-up layouts at ≤540px because the
   underlying value (e.g. "permission-denied · 5") is long. Resolved
   sub-label "0 lifetime · avg 1.2h" also needed a more forgiving
   wrap rule.
   ════════════════════════════════════════════════════════════════ */
.diag-stat{
  min-width:0;                    /* let body shrink below intrinsic */
  overflow:hidden;                /* never let stat-val push out */
}
.diag-stat-body{min-width:0;overflow:hidden;}
/* Top Error Code value — clamp + wrap on long codes like "permission-denied" */
.diag-stat-val-text{
  font-size:14px;
  letter-spacing:.3px;
  white-space:normal;
  word-break:break-word;
  overflow-wrap:anywhere;
  line-height:1.25;
  /* clamp to 2 lines so the card height stays consistent */
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
  text-overflow:ellipsis;
}
/* Sub-label — give it room to wrap and shrink slightly on mobile */
.diag-stat-sub{
  white-space:normal;
  word-break:break-word;
  overflow-wrap:anywhere;
  line-height:1.35;
}
@media (max-width: 820px){
  .diag-stat-val-text{font-size:13px;}
  .diag-stat-sub{font-size:9.5px;letter-spacing:.3px;}
}
@media (max-width: 540px){
  .diag-stat{padding:11px;}
  .diag-stat-icon{width:30px;height:30px;font-size:12px;}
  .diag-stat-val{font-size:20px;}
  .diag-stat-val-text{font-size:12.5px;-webkit-line-clamp:3;}
  .diag-stat-lbl{font-size:9px;}
  .diag-stat-sub{font-size:9px;}
}
@media (max-width: 400px){
  .diag-stat-val-text{font-size:12px;}
}

/* ════════════════════════════════════════════════════════════════
   PAGINATION TRANSITION POLISH — cards fade-in on page change
   so navigation feels deliberate, not jarring.
   ════════════════════════════════════════════════════════════════ */
.diag-resolved-card,
.diag-pv-card{
  animation:diagPageItemIn .35s cubic-bezier(.16,1,.3,1) both;
}
.diag-resolved-card:nth-child(1),.diag-pv-card:nth-child(1){animation-delay:.02s;}
.diag-resolved-card:nth-child(2),.diag-pv-card:nth-child(2){animation-delay:.05s;}
.diag-resolved-card:nth-child(3),.diag-pv-card:nth-child(3){animation-delay:.08s;}
.diag-resolved-card:nth-child(4),.diag-pv-card:nth-child(4){animation-delay:.11s;}
.diag-resolved-card:nth-child(5),.diag-pv-card:nth-child(5){animation-delay:.14s;}
.diag-resolved-card:nth-child(6),.diag-pv-card:nth-child(6){animation-delay:.17s;}
@keyframes diagPageItemIn{
  from{opacity:0;transform:translateY(6px);}
  to  {opacity:1;transform:none;}
}
.diag-pager-btn{
  transition:background .25s cubic-bezier(.16,1,.3,1), border-color .25s, color .25s, transform .15s;
}
.diag-pager-btn:not(:disabled):active{transform:scale(.97);}
@media (prefers-reduced-motion: reduce){
  .diag-resolved-card,.diag-pv-card{animation:none !important;}
}

/* ════════════════════════════════════════════════════════════════
   PAGE HEALTH MATRIX — extended states (idle) + visits chip
   ════════════════════════════════════════════════════════════════ */
.diag-page-tile.idle{
  opacity:.72;
  border-style:dashed;
}
.diag-page-tile.idle::before{
  background:rgba(242,247,238,0.32);
}
.diag-page-tile.idle .diag-page-name{color:rgba(242,247,238,0.62);}
.diag-page-visits{
  font-weight:600;
  color:rgba(91,208,255,0.78);
  font-family:var(--diag-mono,monospace);
  font-size:10.5px;
  padding:1px 6px;border-radius:4px;
  background:rgba(91,208,255,0.06);
}
.diag-page-tile.ok   .diag-page-visits{color:rgba(76,214,87,0.85);background:rgba(76,214,87,0.07);}
.diag-page-tile.warn .diag-page-visits{color:rgba(255,167,38,0.85);background:rgba(255,167,38,0.06);}
.diag-page-tile.fail .diag-page-visits{color:rgba(255,72,72,0.92);background:rgba(255,72,72,0.07);}
.diag-page-stat{flex-wrap:wrap;gap:6px;}
@media (max-width: 540px){
  .diag-page-stat{font-size:10.5px;}
  .diag-page-visits{font-size:10px;}
}

/* ════════════════════════════════════════════════════════════════
   PORTAL HEALTH BANNER (top of Diagnostics)
   ════════════════════════════════════════════════════════════════ */
.diag-portal-health{
  margin:0 28px 16px;padding:16px 22px;
  display:flex;align-items:center;gap:18px;flex-wrap:wrap;
  border-radius:14px;
  border:1px solid var(--diag-line);
  background:linear-gradient(135deg,rgba(255,255,255,0.05),rgba(255,255,255,0.01));
  transition:all .35s cubic-bezier(.16,1,.3,1);
  animation:diagCardIn .55s cubic-bezier(.16,1,.3,1) .08s both;
}
.diag-portal-health[data-mood="ok"]{
  background:linear-gradient(135deg,rgba(76,214,87,0.12),rgba(76,214,87,0.02));
  border-color:rgba(76,214,87,0.32);
  box-shadow:0 0 22px rgba(76,214,87,0.10);
}
.diag-portal-health[data-mood="warn"]{
  background:linear-gradient(135deg,rgba(255,167,38,0.13),rgba(255,167,38,0.02));
  border-color:rgba(255,167,38,0.38);
  box-shadow:0 0 24px rgba(255,167,38,0.13);
}
.diag-portal-health[data-mood="fail"]{
  background:linear-gradient(135deg,rgba(255,72,72,0.16),rgba(255,72,72,0.02));
  border-color:rgba(255,72,72,0.45);
  box-shadow:0 0 26px rgba(255,72,72,0.18);
  animation:diagCardIn .55s cubic-bezier(.16,1,.3,1) .08s both, diagPhFailPulse 2.2s ease-in-out infinite;
}
@keyframes diagPhFailPulse{
  50%{box-shadow:0 0 36px rgba(255,72,72,0.30);}
}
.diag-ph-dot{
  width:14px;height:14px;border-radius:50%;flex-shrink:0;
  background:rgba(242,247,238,0.32);
  box-shadow:0 0 0 6px rgba(242,247,238,0.06);
}
.diag-portal-health[data-mood="ok"] .diag-ph-dot{background:#4cd657;box-shadow:0 0 0 6px rgba(76,214,87,0.18);animation:diagDotPulse 2.4s ease-in-out infinite;}
.diag-portal-health[data-mood="warn"] .diag-ph-dot{background:#ffb74d;box-shadow:0 0 0 6px rgba(255,167,38,0.20);animation:diagDotPulse 2s ease-in-out infinite;}
.diag-portal-health[data-mood="fail"] .diag-ph-dot{background:#ff5773;box-shadow:0 0 0 6px rgba(255,72,72,0.22);animation:diagDotPulse 1.3s ease-in-out infinite;}
@keyframes diagDotPulse{0%,100%{transform:scale(1);}50%{transform:scale(1.18);}}
.diag-ph-text{flex:1;min-width:200px;}
.diag-ph-headline{
  font-family:var(--diag-sans);font-size:15px;font-weight:800;
  color:var(--diag-text);letter-spacing:.2px;line-height:1.2;
}
.diag-ph-sub{
  font-family:var(--diag-mono);font-size:11px;color:var(--diag-text-3);
  margin-top:4px;letter-spacing:.3px;line-height:1.35;
}
.diag-ph-counters{display:flex;gap:8px;flex-wrap:wrap;}
.diag-ph-chip{
  display:inline-flex;align-items:center;gap:6px;
  padding:5px 10px;border-radius:8px;
  font-family:var(--diag-mono);font-size:11px;font-weight:700;letter-spacing:.4px;
  background:rgba(255,255,255,0.05);color:var(--diag-text-2);
  border:1px solid var(--diag-line);
}
.diag-ph-chip.ok{color:#4cd657;border-color:rgba(76,214,87,0.32);}
.diag-ph-chip.warn{color:#ffb74d;border-color:rgba(255,167,38,0.32);}
.diag-ph-chip.fail{color:#ff7088;border-color:rgba(255,72,72,0.32);}
.diag-ph-chip.idle{color:rgba(242,247,238,0.55);}

@media (max-width: 820px){
  .diag-portal-health{margin:0 14px 12px;padding:14px 16px;gap:14px;}
}
@media (max-width: 540px){
  .diag-portal-health{margin:0 12px 10px;padding:12px 14px;flex-direction:column;align-items:flex-start;}
  .diag-ph-text{width:100%;}
  .diag-ph-headline{font-size:13.5px;}
  .diag-ph-sub{font-size:10.5px;}
  .diag-ph-counters{width:100%;}
  .diag-ph-chip{font-size:10.5px;padding:4px 9px;}
}

/* ════════════════════════════════════════════════════════════════
   PAGE HEALTH LEGEND (above the grid)
   ════════════════════════════════════════════════════════════════ */
.diag-pages-legend{
  display:flex;flex-wrap:wrap;gap:14px;
  padding:8px 12px;margin:0 0 12px;
  border-radius:9px;
  background:rgba(0,0,0,0.18);
  border:1px solid rgba(255,255,255,0.06);
}
.diag-legend-item{
  display:inline-flex;align-items:center;gap:6px;
  font-family:var(--diag-mono);font-size:11px;font-weight:600;
  color:var(--diag-text-3);letter-spacing:.3px;
}
.diag-legend-item strong{color:var(--diag-text-2);font-weight:800;}
.diag-legend-dot{
  width:9px;height:9px;border-radius:50%;flex-shrink:0;display:inline-block;
}
.diag-legend-dot.ok  {background:#4cd657;box-shadow:0 0 0 3px rgba(76,214,87,0.18);}
.diag-legend-dot.warn{background:#ffb74d;box-shadow:0 0 0 3px rgba(255,167,38,0.18);}
.diag-legend-dot.fail{background:#ff5773;box-shadow:0 0 0 3px rgba(255,72,72,0.18);}
.diag-legend-dot.idle{background:rgba(242,247,238,0.45);box-shadow:0 0 0 3px rgba(242,247,238,0.10);}
@media (max-width: 540px){
  .diag-pages-legend{gap:8px;padding:7px 10px;}
  .diag-legend-item{font-size:10px;}
}

/* ════════════════════════════════════════════════════════════════
   BACKEND TAB rendering — kv-grid + ok/warn/fail value colouring
   ════════════════════════════════════════════════════════════════ */
.diag-detail-kv-grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:8px;
  padding:10px;border-radius:8px;
  background:rgba(0,0,0,0.18);
  border:1px solid rgba(255,255,255,0.05);
}
.diag-detail-kv-grid .diag-detail-kv{margin:0;padding:6px 8px;}
.diag-detail-kv-grid .span2{grid-column:1 / -1;}
.diag-detail-kv-val.ok{color:#4cd657;font-weight:700;}
.diag-detail-kv-val.warn{color:#ffb74d;font-weight:700;}
.diag-detail-kv-val.fail{color:#ff7088;font-weight:700;}
@media (max-width: 540px){
  .diag-detail-kv-grid{grid-template-columns:1fr;}
}

/* ════════════════════════════════════════════════════════════════
   LIVE ACTIVITY — currently-active sessions pinned at top
   ════════════════════════════════════════════════════════════════ */
.diag-live-activity{
  margin:0 28px 16px;padding:16px 18px;
  border-radius:14px;
  background:linear-gradient(135deg,rgba(76,214,87,0.06),rgba(91,208,255,0.02));
  border:1px solid rgba(76,214,87,0.20);
  animation:diagCardIn .55s cubic-bezier(.16,1,.3,1) .05s both;
}
.diag-live-activity .diag-card-eyebrow{color:#4cd657;}
.diag-live-list{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));
  gap:10px;margin-top:12px;
}
.diag-live-empty{
  grid-column:1/-1;
  padding:14px;text-align:center;
  font-family:var(--diag-mono);font-size:11.5px;letter-spacing:.4px;
  color:rgba(242,247,238,0.55);
  display:flex;align-items:center;justify-content:center;gap:10px;
  background:rgba(0,0,0,0.16);border-radius:9px;
  border:1px dashed rgba(255,255,255,0.10);
}
.diag-live-empty-dot{
  width:8px;height:8px;border-radius:50%;
  background:rgba(76,214,87,0.55);
  box-shadow:0 0 0 4px rgba(76,214,87,0.10);
  animation:diagLivePulse 1.6s ease-in-out infinite;
}
@keyframes diagLivePulse{
  0%,100%{transform:scale(1);opacity:1;}
  50%{transform:scale(1.4);opacity:.5;}
}
.diag-live-card{
  display:grid;grid-template-columns:38px 1fr;gap:10px;align-items:center;
  padding:10px 12px;border-radius:10px;cursor:pointer;
  background:rgba(255,255,255,0.04);
  border:1px solid rgba(76,214,87,0.22);
  transition:all .25s cubic-bezier(.16,1,.3,1);
}
.diag-live-card:hover{
  background:rgba(255,255,255,0.07);
  border-color:rgba(76,214,87,0.55);
  transform:translateY(-1px);
}
.diag-live-card.stale{
  border-color:rgba(255,255,255,0.12);
  opacity:.62;
  background:rgba(255,255,255,0.02);
}
.diag-live-av{
  width:38px;height:38px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,rgba(76,214,87,0.20),rgba(91,208,255,0.10));
  color:#f0c832;
  font-weight:800;font-size:13px;letter-spacing:.5px;
  border:1px solid rgba(76,214,87,0.30);
}
.diag-live-card.stale .diag-live-av{
  background:rgba(255,255,255,0.06);
  color:rgba(242,247,238,0.55);
  border-color:rgba(255,255,255,0.10);
}
.diag-live-body{min-width:0;}
.diag-live-row1{
  display:flex;align-items:center;gap:7px;flex-wrap:wrap;
  margin-bottom:3px;
}
.diag-live-name{
  font-weight:700;font-size:13px;color:var(--diag-text);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:160px;
}
.diag-live-pulse{
  width:8px;height:8px;border-radius:50%;
  background:#4cd657;
  box-shadow:0 0 0 4px rgba(76,214,87,0.18);
  animation:diagLivePulse 1.5s ease-in-out infinite;
  flex-shrink:0;
}
.diag-live-stale-tag{
  font-size:9px;font-weight:800;letter-spacing:1.2px;text-transform:uppercase;
  padding:1px 6px;border-radius:4px;
  background:rgba(255,167,38,0.10);color:#ffb74d;
}
.diag-live-row2{
  display:flex;gap:11px;flex-wrap:wrap;align-items:center;
  font-size:10.5px;color:rgba(242,247,238,0.62);
}
.diag-live-row2 span{display:inline-flex;gap:5px;align-items:center;min-width:0;}
.diag-live-page{
  font-weight:600;color:rgba(91,208,255,0.85);
  font-family:var(--diag-mono);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:140px;
}
.diag-live-time{color:rgba(242,247,238,0.75);}
.diag-live-platform{
  font-size:9.5px;letter-spacing:.4px;
  padding:1px 6px;border-radius:4px;
  background:rgba(255,255,255,0.05);color:rgba(242,247,238,0.55);
}
@media (max-width: 820px){
  .diag-live-activity{margin:0 14px 12px;padding:14px 14px;}
}
@media (max-width: 540px){
  .diag-live-activity{margin:0 12px 10px;padding:12px;border-radius:12px;}
  .diag-live-list{grid-template-columns:1fr;}
  .diag-live-card{padding:9px 10px;grid-template-columns:32px 1fr;gap:8px;}
  .diag-live-av{width:32px;height:32px;font-size:11.5px;}
  .diag-live-name{font-size:12px;max-width:120px;}
  .diag-live-row2{font-size:10px;gap:8px;}
}

/* Page Health tile — small slug under the friendly label, so both names are visible. */
.diag-page-slug{
  font-family:var(--diag-mono);font-size:9.5px;letter-spacing:.4px;
  color:rgba(242,247,238,0.42);margin-top:2px;margin-bottom:6px;
}

/* CRITICAL — utilities.css loads AFTER diagnostics.css in this page, so
   `.diag-detail-overlay { display:flex }` was beating `.u-hide { display:none }`
   in the cascade. Result: the overlay sat invisible-but-active over the whole
   page absorbing every click (filter tabs, keypad, anything). Force hide. */
.diag-detail-overlay.u-hide{display:none !important;}

/* ── Data-Source Assurance strip ─────────────────────────────────
   Confirms Diagnostics is reading PRODUCTION (raw SDK, routing-immune)
   and surfaces live portal test-mode + session demo state + WAT time. */
.diag-datasource{
  margin:0 28px 16px;padding:14px 22px;
  display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap;
  border-radius:14px;
  border:1px solid rgba(76,214,87,0.32);
  background:linear-gradient(135deg,rgba(76,214,87,0.12),rgba(76,214,87,0.02));
  box-shadow:0 0 22px rgba(76,214,87,0.08);
  animation:diagCardIn .55s cubic-bezier(.16,1,.3,1) .06s both;
}
.diag-ds-main{display:flex;align-items:center;gap:14px;min-width:0;}
.diag-ds-dot{
  width:13px;height:13px;border-radius:50%;flex-shrink:0;
  background:#4cd657;box-shadow:0 0 0 6px rgba(76,214,87,0.18);
  animation:diagDotPulse 2.4s ease-in-out infinite;
}
.diag-ds-text{min-width:0;}
.diag-ds-headline{font-size:14px;font-weight:800;letter-spacing:.3px;color:#eafff0;display:flex;align-items:center;gap:8px;}
.diag-ds-headline strong{color:#4cd657;letter-spacing:1px;}
.diag-ds-headline i{color:#4cd657;font-size:13px;}
.diag-ds-sub{font-size:11.5px;color:rgba(242,247,238,0.62);margin-top:3px;line-height:1.45;max-width:640px;}
.diag-ds-meta{display:flex;align-items:center;gap:8px;flex-wrap:wrap;}
.diag-ds-chip{
  display:inline-flex;align-items:center;gap:6px;
  padding:6px 11px;border-radius:9px;
  font-size:11px;font-weight:700;letter-spacing:.4px;
  color:rgba(242,247,238,0.78);
  background:rgba(255,255,255,0.05);
  border:1px solid var(--diag-line,rgba(255,255,255,0.14));
  white-space:nowrap;
}
.diag-ds-chip i{opacity:.7;font-size:11px;}
.diag-ds-chip strong{color:#eafff0;font-weight:800;}
.diag-ds-chip-warn{
  color:#ffd9a0;
  background:linear-gradient(135deg,rgba(255,167,38,0.16),rgba(255,167,38,0.04));
  border-color:rgba(255,167,38,0.45);
}
.diag-ds-chip-warn strong{color:#ffb74d;}
.diag-ds-ts{font-variant-numeric:tabular-nums;}
@media(max-width:820px){
  .diag-datasource{margin:0 14px 12px;padding:13px 16px;gap:12px;}
}
@media(max-width:640px){
  .diag-datasource{margin:0 12px 10px;flex-direction:column;align-items:flex-start;gap:10px;}
  .diag-ds-meta{width:100%;}
}

/* ── WS1 Phase 3 · IT resolution acknowledgment note ── */
.diag-itack{margin-top:12px;padding:12px 14px;border-radius:10px;font-size:12.5px;line-height:1.5;}
.diag-itack.pending{background:rgba(245,167,38,.10);border:1px solid rgba(245,167,38,.3);color:#ffd9a0;}
.diag-itack.done{background:rgba(76,214,87,.10);border:1px solid rgba(76,214,87,.3);color:rgba(242,247,238,.9);}
.diag-itack-note{margin-top:6px;font-style:italic;color:rgba(242,247,238,.78);border-left:2px solid rgba(76,214,87,.5);padding-left:10px;}