:root {
  --bg-primary: #0a0e14;
  --bg-secondary: #12161d;
  --bg-tertiary: #1b212b;
  --bg-elevated: #202836;
  --border-color: #2a313d;
  --border-color-soft: #232933;
  --text-primary: #f2f6fc;
  --text-secondary: #93a1b3;
  --text-muted: #62707f;

  --color-green: #3fd97f;
  --color-green-bg: rgba(63, 217, 127, 0.14);
  --color-green-glow: rgba(63, 217, 127, 0.45);
  --color-red: #ff5c72;
  --color-red-bg: rgba(255, 92, 114, 0.14);
  --color-red-glow: rgba(255, 92, 114, 0.55);
  --color-yellow: #ffc857;
  --color-yellow-bg: rgba(255, 200, 87, 0.14);
  --color-yellow-glow: rgba(255, 200, 87, 0.45);
  --color-gray: #5b6675;
  --color-gray-bg: rgba(91, 102, 117, 0.16);
  --color-blue: #5b9dff;
  --color-blue-bg: rgba(91, 157, 255, 0.14);
  --color-blue-glow: rgba(91, 157, 255, 0.45);
  --color-purple: #c792ff;

  /* Carrier identity accents */
  --carrier-verizon: #5b9dff;
  --carrier-tmobile: #ef4fa0;
  --carrier-att: #ff9d42;

  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-mono: 'JetBrains Mono', monospace;
  --radius: 10px;
  --radius-lg: 16px;
  --shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
  --shadow-soft: 0 2px 10px rgba(0, 0, 0, 0.3);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

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

body {
  background-color: var(--bg-primary);
  background-image:
    radial-gradient(circle at 12% -10%, rgba(91, 157, 255, 0.08), transparent 40%),
    radial-gradient(circle at 88% 0%, rgba(199, 146, 255, 0.06), transparent 45%);
  background-attachment: fixed;
  color: var(--text-primary);
  font-family: var(--font-sans);
  line-height: 1.5;
  font-size: 14px;
  -webkit-font-smoothing: antialiased;
}

code {
  font-family: var(--font-mono);
}

/* ============================= Header ============================= */
.top-header {
  background: linear-gradient(180deg, var(--bg-secondary), rgba(18, 22, 29, 0.85));
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border-color);
  padding: 0.85rem 1.5rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: sticky;
  top: 0;
  z-index: 50;
}

.header-left {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.brand {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--text-primary);
}

.brand-icon {
  filter: drop-shadow(0 0 6px rgba(91, 157, 255, 0.5));
}

.brand-title {
  background: linear-gradient(90deg, #ffffff, #b9c8de);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.live-pill {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background: var(--color-green-bg);
  border: 1px solid rgba(63, 217, 127, 0.4);
  color: var(--color-green);
  padding: 0.25rem 0.7rem 0.25rem 0.6rem;
  border-radius: 20px;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.pulse-dot {
  position: relative;
  width: 7px;
  height: 7px;
  background-color: var(--color-green);
  border-radius: 50%;
  box-shadow: 0 0 8px var(--color-green-glow);
  animation: pulse-dot 2s infinite;
}

.pulse-ring {
  display: none;
}

@keyframes pulse-dot {
  0% { transform: scale(0.9); opacity: 0.85; }
  50% { transform: scale(1.5); opacity: 1; }
  100% { transform: scale(0.9); opacity: 0.85; }
}

.header-controls {
  display: flex;
  align-items: center;
  gap: 1.4rem;
}

.control-item {
  display: flex;
  align-items: center;
  gap: 0.55rem;
}

.control-label {
  font-size: 0.78rem;
  color: var(--text-secondary);
  font-weight: 500;
}

.select-dropdown {
  background: var(--bg-tertiary);
  border: 1px solid var(--border-color);
  color: var(--text-primary);
  padding: 0.35rem 0.65rem;
  border-radius: var(--radius);
  font-size: 0.8rem;
  outline: none;
  transition: border-color 0.15s ease;
}
.select-dropdown:hover,
.select-dropdown:focus {
  border-color: var(--color-blue);
}

.btn {
  background: var(--bg-tertiary);
  border: 1px solid var(--border-color);
  color: var(--text-primary);
  padding: 0.4rem 0.8rem;
  border-radius: var(--radius);
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 0.4rem;
  transition: all 0.18s var(--ease-out);
}

.btn:hover {
  background: var(--bg-elevated);
  border-color: rgba(91, 157, 255, 0.4);
  transform: translateY(-1px);
  box-shadow: var(--shadow-soft);
}
.btn:active { transform: translateY(0); }

.refresh-icon {
  display: inline-block;
  transition: transform 0.5s var(--ease-out);
}
.refresh-icon.spinning {
  animation: spin-once 0.6s var(--ease-out);
}
@keyframes spin-once {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* Switch */
.toggle-switch {
  position: relative;
  display: inline-block;
  width: 34px;
  height: 18px;
}
.toggle-switch input { opacity: 0; width: 0; height: 0; }
.slider {
  position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0;
  background-color: var(--bg-tertiary);
  transition: .2s; border-radius: 20px;
  border: 1px solid var(--border-color);
}
.slider:before {
  position: absolute; content: ""; height: 12px; width: 12px;
  left: 2px; bottom: 2px; background-color: var(--text-secondary);
  transition: .2s; border-radius: 50%;
}
input:checked + .slider { background-color: var(--color-blue); border-color: var(--color-blue); }
input:checked + .slider:before { transform: translateX(16px); background-color: #fff; }

/* ============================= Tabs Bar ============================= */
.env-tabs-bar {
  background-color: var(--bg-secondary);
  border-bottom: 1px solid var(--border-color);
  padding: 0 1.5rem;
  display: flex;
  gap: 0.35rem;
  overflow-x: auto;
  position: sticky;
  top: 57px;
  z-index: 40;
}

.env-tab {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.7rem 0.95rem;
  border-bottom: 2px solid transparent;
  color: var(--text-secondary);
  text-decoration: none;
  font-weight: 500;
  font-size: 0.88rem;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.18s var(--ease-out);
  border-radius: 6px 6px 0 0;
}

.env-tab:hover {
  color: var(--text-primary);
  background: rgba(255, 255, 255, 0.03);
}

.env-tab.active {
  color: var(--text-primary);
  border-bottom-color: var(--color-blue);
  background: linear-gradient(180deg, rgba(91, 157, 255, 0.1), rgba(91, 157, 255, 0.02));
}

.tab-indicator {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  display: inline-block;
  box-shadow: 0 0 0 rgba(0,0,0,0);
}

.tab-indicator.status-passed { background-color: var(--color-green); box-shadow: 0 0 8px var(--color-green-glow); }
.tab-indicator.status-warning { background-color: var(--color-yellow); box-shadow: 0 0 8px var(--color-yellow-glow); }
.tab-indicator.status-failed { background-color: var(--color-red); box-shadow: 0 0 8px var(--color-red-glow); animation: dot-pulse-red 1.6s infinite; }
.tab-indicator.status-no_data { background-color: var(--color-gray); }

@keyframes dot-pulse-red {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.45; }
}

.tab-badge {
  font-size: 0.68rem;
  font-weight: 600;
  padding: 0.1rem 0.45rem;
  border-radius: 12px;
  background: var(--bg-tertiary);
  color: var(--text-secondary);
  font-family: var(--font-mono);
}

.tab-skeleton {
  display: flex;
  gap: 0.5rem;
  padding: 0.85rem 0;
}
.skeleton-chip {
  width: 96px;
  height: 20px;
  border-radius: 6px;
  background: linear-gradient(90deg, var(--bg-tertiary) 25%, var(--bg-elevated) 37%, var(--bg-tertiary) 63%);
  background-size: 400% 100%;
  animation: shimmer 1.4s ease-in-out infinite;
}

@keyframes shimmer {
  0% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* ============================= Main Viewport ============================= */
.main-viewport {
  max-width: 1400px;
  margin: 0 auto;
  padding: 1.75rem 1.5rem 3rem;
}

.env-banner {
  background: linear-gradient(135deg, var(--bg-secondary), var(--bg-tertiary));
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  padding: 1.1rem 1.4rem;
  margin-bottom: 1.5rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.75rem;
  box-shadow: var(--shadow-soft);
}

.banner-title-area {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}

.banner-title-area h1 {
  font-size: 1.45rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  margin: 0;
}

.env-title-link {
  color: var(--text-primary);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  transition: color 0.15s ease;
}

.env-title-link:hover {
  color: var(--color-blue);
}

.env-title-link .ext-icon {
  font-size: 1rem;
  color: var(--color-blue);
  opacity: 0.8;
  transition: transform 0.15s ease;
}

.env-title-link:hover .ext-icon {
  transform: translate(2px, -2px);
  opacity: 1;
}

.meta-link {
  color: var(--color-blue);
  text-decoration: none;
  font-size: 0.85rem;
  font-weight: 500;
}
.meta-link:hover { text-decoration: underline; }

.live-queue-tag {
  color: var(--color-yellow);
  font-weight: 600;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  background: var(--color-yellow-bg);
  border: 1px solid rgba(255, 200, 87, 0.45);
  padding: 0.2rem 0.6rem;
  border-radius: 14px;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  cursor: pointer;
  transition: all 0.15s ease;
}

.live-queue-tag:hover {
  background: rgba(255, 200, 87, 0.25);
  border-color: var(--color-yellow);
  transform: translateY(-1px);
  box-shadow: 0 0 10px rgba(255, 200, 87, 0.3);
}

.queue-jobs-list {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}

.queue-job-item {
  background: var(--bg-tertiary);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  padding: 0.6rem 0.8rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  transition: border-color 0.15s ease;
}

.queue-job-item:hover {
  border-color: rgba(255, 255, 255, 0.15);
}

.queue-job-item.in_progress {
  border-color: rgba(255, 200, 87, 0.45);
  background: rgba(255, 200, 87, 0.04);
}

.queue-job-left {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  min-width: 0;
}

.queue-job-info {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  min-width: 0;
}

.queue-job-name {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.queue-job-runner {
  font-size: 0.7rem;
  color: var(--text-muted);
  text-transform: uppercase;
}

.queue-job-status-pill {
  font-size: 0.7rem;
  font-weight: 700;
  padding: 0.15rem 0.5rem;
  border-radius: 4px;
  font-family: var(--font-mono);
  flex-shrink: 0;
}

.queue-job-status-pill.in_progress {
  background: var(--color-yellow-bg);
  color: var(--color-yellow);
  border: 1px solid rgba(255, 200, 87, 0.4);
}

.queue-job-status-pill.queued {
  background: var(--color-gray-bg);
  color: var(--text-secondary);
  border: 1px solid var(--border-color);
}

.queue-job-status-pill.success {
  background: var(--color-green-bg);
  color: var(--color-green);
}

.queue-job-status-pill.failure {
  background: var(--color-red-bg);
  color: var(--color-red);
}

.banner-meta {
  display: flex;
  align-items: center;
  gap: 1.1rem;
  font-size: 0.83rem;
  color: var(--text-secondary);
  flex-wrap: wrap;
}

/* ============================= Status Rollup Hero ============================= */
.status-rollup-card {
  position: relative;
  overflow: hidden;
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  padding: 1.6rem 1.75rem;
  margin-bottom: 1.75rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 1.25rem;
  box-shadow: var(--shadow);
  transition: background 0.4s ease, border-color 0.4s ease;
}

.rollup-glow-orb {
  position: absolute;
  top: -60%;
  right: -10%;
  width: 420px;
  height: 420px;
  border-radius: 50%;
  filter: blur(60px);
  opacity: 0.35;
  pointer-events: none;
  background: var(--color-gray);
  transition: background 0.4s ease;
}

.status-rollup-card.status-operational {
  background: linear-gradient(120deg, rgba(63, 217, 127, 0.1), var(--bg-secondary) 60%);
  border-color: rgba(63, 217, 127, 0.35);
}
.status-rollup-card.status-operational .rollup-glow-orb { background: var(--color-green); animation: orb-drift 8s ease-in-out infinite; }

.status-rollup-card.status-degraded {
  background: linear-gradient(120deg, rgba(255, 200, 87, 0.12), var(--bg-secondary) 60%);
  border-color: rgba(255, 200, 87, 0.4);
}
.status-rollup-card.status-degraded .rollup-glow-orb { background: var(--color-yellow); animation: orb-drift 6s ease-in-out infinite; }

.status-rollup-card.status-outage {
  background: linear-gradient(120deg, rgba(255, 92, 114, 0.16), var(--bg-secondary) 60%);
  border-color: rgba(255, 92, 114, 0.5);
  animation: outage-pulse 2.2s ease-in-out infinite;
}
.status-rollup-card.status-outage .rollup-glow-orb { background: var(--color-red); animation: orb-drift 4s ease-in-out infinite; }

.status-rollup-card.status-no_data { border-color: var(--border-color); }

@keyframes orb-drift {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(-30px, 20px) scale(1.15); }
}

@keyframes outage-pulse {
  0%, 100% { box-shadow: var(--shadow), 0 0 0 rgba(255, 92, 114, 0); }
  50% { box-shadow: var(--shadow), 0 0 32px rgba(255, 92, 114, 0.35); }
}

.rollup-main {
  display: flex;
  align-items: center;
  gap: 1.1rem;
  position: relative;
  z-index: 1;
}

.rollup-icon-wrap {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 54px;
  height: 54px;
  flex-shrink: 0;
}

.rollup-icon {
  font-size: 2.1rem;
  position: relative;
  z-index: 1;
}

.rollup-icon-ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,0.06), transparent 70%);
}

.rollup-eyebrow {
  display: block;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  margin-bottom: 0.2rem;
}

.rollup-text h2 {
  font-size: 1.3rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--text-primary);
}

.rollup-text p {
  font-size: 0.86rem;
  color: var(--text-secondary);
  margin-top: 0.15rem;
}

.rollup-pills {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-wrap: wrap;
  position: relative;
  z-index: 1;
}

.rollup-pill {
  font-size: 0.8rem;
  font-weight: 700;
  padding: 0.4rem 0.85rem;
  border-radius: 20px;
  font-family: var(--font-mono);
  transition: transform 0.15s var(--ease-out);
}
.rollup-pill:hover { transform: translateY(-1px); }

.rollup-pill.passed { background: var(--color-green-bg); color: var(--color-green); border: 1px solid rgba(63, 217, 127, 0.45); box-shadow: 0 0 14px rgba(63, 217, 127, 0.15); }
.rollup-pill.warning { background: var(--color-yellow-bg); color: var(--color-yellow); border: 1px solid rgba(255, 200, 87, 0.45); box-shadow: 0 0 14px rgba(255, 200, 87, 0.15); }
.rollup-pill.failed { background: var(--color-red-bg); color: var(--color-red); border: 1px solid rgba(255, 92, 114, 0.5); box-shadow: 0 0 14px rgba(255, 92, 114, 0.2); }
.rollup-pill.disc { background: var(--color-gray-bg); color: var(--text-secondary); border: 1px solid var(--border-color); }
.rollup-pill.live { background: var(--color-blue-bg); color: var(--color-blue); border: 1px solid rgba(91, 157, 255, 0.45); }

/* ============================= Intelligent Fleet Viewer & Diagnostics ============================= */
.intelligent-viewer-card {
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  padding: 1.4rem 1.6rem;
  margin-bottom: 1.75rem;
  box-shadow: var(--shadow);
  position: relative;
  overflow: hidden;
  transition: all 0.3s ease;
}

.intelligent-viewer-card.health-healthy {
  border-color: rgba(63, 217, 127, 0.3);
  background: linear-gradient(135deg, rgba(63, 217, 127, 0.05), var(--bg-secondary) 65%);
}

.intelligent-viewer-card.health-degraded {
  border-color: rgba(255, 200, 87, 0.4);
  background: linear-gradient(135deg, rgba(255, 200, 87, 0.07), var(--bg-secondary) 65%);
}

.intelligent-viewer-card.health-critical {
  border-color: rgba(255, 92, 114, 0.45);
  background: linear-gradient(135deg, rgba(255, 92, 114, 0.09), var(--bg-secondary) 65%);
}

.ai-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1rem;
}

.ai-title-wrap {
  display: flex;
  align-items: center;
  gap: 0.9rem;
}

.ai-avatar {
  font-size: 1.8rem;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  background: rgba(91, 157, 255, 0.12);
  border: 1px solid rgba(91, 157, 255, 0.3);
  border-radius: 12px;
  box-shadow: 0 0 16px rgba(91, 157, 255, 0.15);
  animation: ai-pulse 3s infinite ease-in-out;
}

@keyframes ai-pulse {
  0%, 100% { transform: scale(1); box-shadow: 0 0 12px rgba(91, 157, 255, 0.15); }
  50% { transform: scale(1.04); box-shadow: 0 0 22px rgba(91, 157, 255, 0.35); }
}

.ai-title-text {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.ai-eyebrow-row {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.ai-eyebrow {
  font-size: 0.73rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-blue);
}

.ai-health-badge {
  font-size: 0.68rem;
  font-weight: 700;
  padding: 0.12rem 0.45rem;
  border-radius: 4px;
  font-family: var(--font-mono);
  letter-spacing: 0.05em;
}

.ai-health-badge.healthy {
  background: var(--color-green-bg);
  color: var(--color-green);
  border: 1px solid rgba(63, 217, 127, 0.4);
}

.ai-health-badge.degraded {
  background: var(--color-yellow-bg);
  color: var(--color-yellow);
  border: 1px solid rgba(255, 200, 87, 0.4);
}

.ai-health-badge.critical {
  background: var(--color-red-bg);
  color: var(--color-red);
  border: 1px solid rgba(255, 92, 114, 0.45);
}

.ai-health-badge.no_data {
  background: rgba(140, 150, 165, 0.15);
  color: var(--color-gray);
  border: 1px solid rgba(140, 150, 165, 0.3);
}

.ai-headline {
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0;
}

.ai-body {
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
}

.ai-comment-box {
  background: rgba(15, 20, 30, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-left: 3px solid var(--color-blue);
  border-radius: 8px;
  padding: 0.9rem 1.1rem;
}

.ai-comment-text {
  font-size: 0.88rem;
  line-height: 1.55;
  color: var(--text-secondary);
  margin: 0;
}

.ai-comment-text strong {
  color: var(--text-primary);
}

.ai-comment-text code {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  background: rgba(255, 255, 255, 0.08);
  padding: 0.1rem 0.35rem;
  border-radius: 4px;
}

.ai-findings-container {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
}

.ai-empty-findings {
  font-size: 0.85rem;
  color: var(--text-muted);
  padding: 0.6rem 0.8rem;
  background: rgba(63, 217, 127, 0.04);
  border-radius: 8px;
  border: 1px dashed rgba(63, 217, 127, 0.25);
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.ai-finding-card {
  background: var(--bg-tertiary);
  border: 1px solid var(--border-color);
  border-radius: 10px;
  padding: 1.1rem 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  transition: border-color 0.2s ease;
}

.ai-finding-card.severity-critical {
  border-color: rgba(255, 92, 114, 0.4);
  background: linear-gradient(135deg, rgba(255, 92, 114, 0.04), var(--bg-tertiary) 70%);
}

.ai-finding-card.severity-warning {
  border-color: rgba(255, 200, 87, 0.35);
  background: linear-gradient(135deg, rgba(255, 200, 87, 0.04), var(--bg-tertiary) 70%);
}

.ai-finding-card.severity-info {
  border-color: rgba(91, 157, 255, 0.3);
}

.ai-finding-header {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.ai-finding-title-row {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  flex-wrap: wrap;
}

.ai-severity-tag {
  font-size: 0.68rem;
  font-weight: 700;
  padding: 0.12rem 0.45rem;
  border-radius: 4px;
  font-family: var(--font-mono);
}

.ai-severity-tag.critical {
  background: var(--color-red-bg);
  color: var(--color-red);
  border: 1px solid rgba(255, 92, 114, 0.4);
}

.ai-severity-tag.warning {
  background: var(--color-yellow-bg);
  color: var(--color-yellow);
  border: 1px solid rgba(255, 200, 87, 0.4);
}

.ai-severity-tag.info {
  background: var(--color-blue-bg);
  color: var(--color-blue);
  border: 1px solid rgba(91, 157, 255, 0.4);
}

.ai-category-badge {
  font-size: 0.68rem;
  font-weight: 600;
  text-transform: uppercase;
  color: var(--text-muted);
  background: rgba(255, 255, 255, 0.05);
  padding: 0.12rem 0.4rem;
  border-radius: 4px;
}

.ai-finding-title {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0;
}

.ai-finding-summary {
  font-size: 0.82rem;
  color: var(--text-secondary);
}

.ai-finding-reasoning {
  display: flex;
  flex-direction: column;
}

.ai-reasoning-bubble {
  background: rgba(91, 157, 255, 0.06);
  border: 1px solid rgba(91, 157, 255, 0.2);
  border-radius: 8px;
  padding: 0.75rem 0.9rem;
  display: flex;
  gap: 0.6rem;
  align-items: flex-start;
}

.ai-reasoning-icon {
  font-size: 1rem;
  line-height: 1.4;
}

.ai-reasoning-text {
  font-size: 0.83rem;
  line-height: 1.5;
  color: var(--text-primary);
}

.ai-evidence-bar {
  display: flex;
  gap: 0.9rem;
  flex-wrap: wrap;
  font-size: 0.75rem;
  color: var(--text-muted);
  background: rgba(0, 0, 0, 0.2);
  padding: 0.45rem 0.75rem;
  border-radius: 6px;
}

.ai-evidence-bar span strong {
  color: var(--text-primary);
}

.ai-evidence-bar code {
  font-family: var(--font-mono);
  color: var(--color-yellow);
}

.ai-fix-box {
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  padding: 0.85rem 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.ai-fix-title {
  font-size: 0.83rem;
  color: var(--color-green);
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.ai-fix-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}

.ai-step-item {
  display: flex;
  gap: 0.55rem;
  align-items: flex-start;
  font-size: 0.8rem;
  color: var(--text-secondary);
  line-height: 1.45;
}

.ai-step-num {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--color-green);
  background: rgba(63, 217, 127, 0.12);
  width: 18px;
  height: 18px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 0.1rem;
}

.ai-step-text code {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  background: rgba(255, 255, 255, 0.08);
  padding: 0.1rem 0.3rem;
  border-radius: 3px;
  color: var(--text-primary);
}

.ai-fix-actions {
  display: flex;
  gap: 0.6rem;
  flex-wrap: wrap;
  margin-top: 0.35rem;
}

.ai-command-box {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  background: rgba(10, 15, 22, 0.9);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 6px;
  padding: 0.4rem 0.65rem;
  width: 100%;
}

.ai-command-code {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: #79c0ff;
  overflow-x: auto;
  white-space: nowrap;
}

.btn-copy {
  background: rgba(255, 255, 255, 0.08);
  color: var(--text-primary);
  border: 1px solid rgba(255, 255, 255, 0.15);
  font-size: 0.72rem;
  padding: 0.25rem 0.55rem;
  border-radius: 4px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  white-space: nowrap;
  transition: all 0.15s ease;
}

.btn-copy:hover {
  background: rgba(255, 255, 255, 0.16);
  border-color: rgba(255, 255, 255, 0.3);
}

.btn-copy.copied {
  background: var(--color-green-bg);
  color: var(--color-green);
  border-color: rgba(63, 217, 127, 0.4);
}

/* Debug Drawer AI Diagnosis */
.ai-diagnosis-section {
  background: rgba(91, 157, 255, 0.04);
  border: 1px solid rgba(91, 157, 255, 0.2);
  border-radius: 8px;
  padding: 1rem;
}

.ai-diagnosis-card {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.ai-diag-summary {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0;
}

.ai-diag-root {
  display: flex;
  gap: 0.4rem;
  font-size: 0.8rem;
  align-items: center;
}

.ai-root-label {
  color: var(--text-muted);
}

.ai-root-val {
  color: var(--color-yellow);
  font-weight: 600;
}

.ai-diag-reasoning {
  display: flex;
  gap: 0.55rem;
  background: rgba(0, 0, 0, 0.25);
  padding: 0.65rem 0.8rem;
  border-radius: 6px;
  align-items: flex-start;
}

.ai-diag-reasoning .ai-reasoning-text {
  font-size: 0.8rem;
  line-height: 1.45;
  color: var(--text-secondary);
}

.ai-diag-fix {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  margin-top: 0.2rem;
}

.ai-fix-head {
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--color-green);
}

/* ============================= Embed Mode ============================= */
body.embed-mode .top-header {
  display: none !important;
}

body.embed-mode .env-tabs-bar {
  padding: 0 0.75rem !important;
  top: 0;
}

body.embed-mode.hide-tabs .env-tabs-bar {
  display: none !important;
}

body.embed-mode .main-viewport {
  padding: 0.85rem !important;
}

body.embed-mode .status-rollup-card {
  padding: 1.1rem 1.25rem;
  border-radius: var(--radius);
}

body.embed-mode .rollup-text h2 { font-size: 1.05rem; }
body.embed-mode .rollup-icon-wrap { width: 40px; height: 40px; }
body.embed-mode .rollup-icon { font-size: 1.6rem; }

body.embed-mode .env-banner {
  padding: 0.8rem 1rem;
  border-radius: var(--radius);
}

body.embed-mode .workstation-grid {
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 0.65rem;
}

body.embed-mode .matrix-row {
  grid-template-columns: 120px 1fr 1fr;
  padding: 0.6rem 0.85rem;
}

/* ============================= Sections ============================= */
.dashboard-section {
  margin-bottom: 2.25rem;
}

.section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.85rem;
}

.section-header h2 {
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: -0.005em;
}

.section-badge {
  font-size: 0.72rem;
  font-weight: 600;
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  color: var(--text-muted);
  padding: 0.25rem 0.6rem;
  border-radius: 4px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.lab-region {
  border-radius: var(--radius-lg);
  padding: 1rem;
  margin-bottom: 1.25rem;
}

.lab-region.region-us {
  background: linear-gradient(180deg, rgba(91, 157, 255, 0.05), transparent);
  border: 1px solid rgba(91, 157, 255, 0.12);
}

.lab-region.region-il {
  background: linear-gradient(180deg, rgba(199, 146, 255, 0.05), transparent);
  border: 1px solid rgba(199, 146, 255, 0.12);
}

.lab-group-title {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--text-secondary);
  margin-bottom: 0.85rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.lab-flag {
  font-size: 1rem;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,0.4));
}

.lab-loc {
  color: var(--text-muted);
  text-transform: none;
  font-weight: 500;
  letter-spacing: normal;
}

.lab-group-title code {
  font-size: 0.7rem;
  background: var(--bg-tertiary);
  border: 1px solid var(--border-color);
  padding: 0.1rem 0.4rem;
  border-radius: 4px;
  color: var(--text-muted);
}

/* ============================= Carrier Matrix (card/grid) ============================= */
.matrix-card {
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-soft);
}

.matrix-grid-head {
  display: grid;
  grid-template-columns: 200px 1fr 1fr;
  gap: 1rem;
  padding: 0.8rem 1.4rem;
  background: var(--bg-tertiary);
  border-bottom: 1px solid var(--border-color);
}

.matrix-col-label {
  color: var(--text-secondary);
  font-size: 0.72rem;
  text-transform: uppercase;
  font-weight: 700;
  letter-spacing: 0.04em;
}
.matrix-col-label em {
  font-style: normal;
  font-weight: 500;
  color: var(--text-muted);
  text-transform: none;
  letter-spacing: normal;
  margin-left: 0.3rem;
}

.matrix-grid-body {
  display: flex;
  flex-direction: column;
}

.matrix-row {
  display: grid;
  grid-template-columns: 200px 1fr 1fr;
  align-items: center;
  gap: 1rem;
  padding: 0.9rem 1.4rem;
  border-bottom: 1px solid var(--border-color-soft);
  position: relative;
  transition: background 0.15s ease;
}
.matrix-row:last-child { border-bottom: none; }
.matrix-row:hover { background: rgba(255, 255, 255, 0.02); }

.matrix-row::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.35rem;
  bottom: 0.35rem;
  width: 3px;
  border-radius: 0 3px 3px 0;
}
.matrix-row.carrier-accent-verizon::before { background: var(--carrier-verizon); }
.matrix-row.carrier-accent-tmobile::before { background: var(--carrier-tmobile); }
.matrix-row.carrier-accent-att::before { background: var(--carrier-att); }

.carrier-name-cell {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  font-weight: 700;
  font-size: 0.9rem;
}

.carrier-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  display: none;
}

.matrix-cell {
  display: flex;
}

.carrier-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.4rem 0.8rem 0.4rem 0.4rem;
  border-radius: 30px;
  font-size: 0.78rem;
  font-weight: 600;
  font-family: var(--font-mono);
  cursor: pointer;
  transition: transform 0.15s var(--ease-out), box-shadow 0.15s ease;
}
.carrier-pill:hover { transform: translateY(-1px) scale(1.015); }

/* Lanes with no reported test result have nothing to open. */
.carrier-pill.inert { cursor: default; }
.carrier-pill.inert:hover { transform: none; box-shadow: none; }

.carrier-pill-label {
  white-space: normal;
  line-height: 1.2;
}

.carrier-pill.passed { background: var(--color-green-bg); color: var(--color-green); border: 1px solid rgba(63, 217, 127, 0.4); }
.carrier-pill.passed:hover { box-shadow: 0 0 16px rgba(63, 217, 127, 0.2); }
.carrier-pill.failed { background: var(--color-red-bg); color: var(--color-red); border: 1px solid rgba(255, 92, 114, 0.45); }
.carrier-pill.failed:hover { box-shadow: 0 0 16px rgba(255, 92, 114, 0.25); }
.carrier-pill.disconnected { background: var(--color-gray-bg); color: var(--text-muted); border: 1px solid var(--border-color); }
.carrier-pill.standby { background: var(--bg-tertiary); color: var(--text-secondary); border: 1px solid rgba(91, 157, 255, 0.25); }
.carrier-pill.running { background: var(--color-yellow-bg); color: var(--color-yellow); border: 1px solid rgba(255, 200, 87, 0.45); animation: pill-glow-yellow 1.8s ease-in-out infinite; }
.carrier-pill.unsupported { background: var(--bg-tertiary); color: var(--text-muted); border: 1px dashed var(--border-color); }

@keyframes pill-glow-yellow {
  0%, 100% { box-shadow: 0 0 0 rgba(255, 200, 87, 0); }
  50% { box-shadow: 0 0 12px rgba(255, 200, 87, 0.3); }
}

/* ============================= Device phone-frame silhouettes ============================= */
.device-icon-frame {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 48px;
  flex-shrink: 0;
  background: linear-gradient(160deg, #1d2531, #12161d);
  border: 1.6px solid var(--border-color);
  color: var(--text-muted);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.05), 0 2px 6px rgba(0,0,0,0.35);
  transition: all 0.2s var(--ease-out);
}

.device-icon-frame .device-glyph {
  width: 14px;
  height: 14px;
  color: inherit;
}

.device-icon-frame.ios {
  border-radius: 9px;
}
.device-icon-frame.android {
  border-radius: 5px;
}

.device-icon-frame .device-frame-notch {
  position: absolute;
  top: 4px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--bg-primary);
}
.device-icon-frame.ios .device-frame-notch {
  width: 11px;
  height: 3.5px;
  border-radius: 3px;
}
.device-icon-frame.android .device-frame-notch {
  width: 3.5px;
  height: 3.5px;
  border-radius: 50%;
}

.device-icon-frame--sm {
  width: 20px;
  height: 30px;
}
.device-icon-frame--sm .device-glyph {
  width: 9px;
  height: 9px;
}
.device-icon-frame--sm .device-frame-notch {
  top: 2.5px;
}
.device-icon-frame--sm.ios .device-frame-notch { width: 7px; height: 2.5px; }
.device-icon-frame--sm.android .device-frame-notch { width: 2.5px; height: 2.5px; }

.device-icon-frame.status-passed {
  border-color: rgba(63, 217, 127, 0.55);
  color: var(--color-green);
  box-shadow: 0 0 0 1px rgba(63, 217, 127, 0.2), 0 0 10px rgba(63, 217, 127, 0.35);
}
.device-icon-frame.status-failed {
  border-color: rgba(255, 92, 114, 0.6);
  color: var(--color-red);
  box-shadow: 0 0 0 1px rgba(255, 92, 114, 0.25), 0 0 12px rgba(255, 92, 114, 0.4);
  animation: frame-pulse-red 1.8s ease-in-out infinite;
}
.device-icon-frame.status-disconnected {
  border-color: var(--border-color);
  color: var(--text-muted);
  opacity: 0.5;
}
.device-icon-frame.status-skipped {
  border-color: var(--border-color);
  color: var(--text-muted);
  opacity: 0.6;
}
.device-icon-frame.status-standby {
  border-color: rgba(91, 157, 255, 0.3);
  color: var(--text-secondary);
  opacity: 0.85;
}
.device-icon-frame.status-running {
  border-color: rgba(255, 200, 87, 0.6);
  color: var(--color-yellow);
  box-shadow: 0 0 0 1px rgba(255, 200, 87, 0.25), 0 0 12px rgba(255, 200, 87, 0.4);
  animation: frame-pulse-yellow 1.4s ease-in-out infinite;
}

@keyframes frame-pulse-red {
  0%, 100% { box-shadow: 0 0 0 1px rgba(255, 92, 114, 0.25), 0 0 10px rgba(255, 92, 114, 0.3); }
  50% { box-shadow: 0 0 0 1px rgba(255, 92, 114, 0.4), 0 0 18px rgba(255, 92, 114, 0.55); }
}

@keyframes frame-pulse-yellow {
  0%, 100% { box-shadow: 0 0 0 1px rgba(255, 200, 87, 0.25), 0 0 8px rgba(255, 200, 87, 0.3); }
  50% { box-shadow: 0 0 0 1px rgba(255, 200, 87, 0.4), 0 0 16px rgba(255, 200, 87, 0.55); }
}

/* ============================= Workstation Grid ============================= */
.workstation-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  gap: 1rem;
}

.workstation-card {
  position: relative;
  background: linear-gradient(165deg, var(--bg-secondary), var(--bg-tertiary) 130%);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  padding: 1.1rem 1.1rem 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  overflow: hidden;
  transition: transform 0.18s var(--ease-out), box-shadow 0.18s var(--ease-out), border-color 0.18s ease;
}

.workstation-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow);
  border-color: rgba(255, 255, 255, 0.12);
}

.workstation-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--border-color);
}

.ws-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid var(--border-color);
  padding-bottom: 0.6rem;
}

.ws-title {
  font-size: 0.92rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.ws-region-tag {
  font-size: 0.7rem;
  font-weight: 700;
  background: var(--bg-tertiary);
  padding: 0.15rem 0.5rem;
  border-radius: 12px;
  color: var(--text-muted);
  border: 1px solid var(--border-color);
  font-family: var(--font-mono);
}

.dev-carrier-badge {
  font-size: 0.68rem;
  font-weight: 700;
  padding: 0.12rem 0.45rem;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-family: var(--font-mono);
}
.dev-carrier-badge.carrier-verizon { color: var(--carrier-verizon); background: rgba(91,157,255,0.12); border: 1px solid rgba(91,157,255,0.3); }
.dev-carrier-badge.carrier-tmobile { color: var(--carrier-tmobile); background: rgba(239,79,160,0.12); border: 1px solid rgba(239,79,160,0.3); }
.dev-carrier-badge.carrier-att { color: var(--carrier-att); background: rgba(255,157,66,0.12); border: 1px solid rgba(255,157,66,0.3); }

.ws-devices {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}

.ws-device-row {
  background: var(--bg-tertiary);
  border: 1px solid var(--border-color);
  border-radius: 10px;
  padding: 0.65rem 0.8rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  transition: all 0.15s var(--ease-out);
}

.ws-device-row:hover {
  border-color: rgba(91, 157, 255, 0.4);
  background: rgba(91, 157, 255, 0.04);
  transform: translateY(-1px);
}

.ws-device-row.status-passed { box-shadow: inset 3px 0 0 0 rgba(63, 217, 127, 0.55); }
.ws-device-row.status-failed { box-shadow: inset 3px 0 0 0 rgba(255, 92, 114, 0.6); background: rgba(255, 92, 114, 0.04); }
.ws-device-row.status-running { box-shadow: inset 3px 0 0 0 rgba(255, 200, 87, 0.6); background: rgba(255, 200, 87, 0.04); }
.ws-device-row.status-standby { box-shadow: inset 3px 0 0 0 rgba(91, 157, 255, 0.3); }
.ws-device-row.status-disconnected { box-shadow: inset 3px 0 0 0 var(--border-color); opacity: 0.75; }

.ws-device-main {
  display: flex;
  align-items: center;
  gap: 0.7rem;
}

.dev-info {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  flex: 1;
  min-width: 0;
}

.dev-platform-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}

.dev-platform {
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  color: var(--text-primary);
}

.dev-conn-badge {
  font-size: 0.68rem;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.1rem 0.4rem;
  border-radius: 10px;
  font-family: var(--font-mono);
}

.dev-conn-badge.connected {
  background: var(--color-green-bg);
  color: var(--color-green);
  border: 1px solid rgba(63, 217, 127, 0.3);
}

.dev-conn-badge.disconnected {
  background: var(--color-gray-bg);
  color: var(--text-muted);
  border: 1px solid var(--border-color);
}

.dev-sub {
  font-size: 0.73rem;
  color: var(--text-secondary);
  font-family: var(--font-mono);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dev-runs-container {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  border-top: 1px dashed var(--border-color-soft);
  padding-top: 0.45rem;
}

.dev-run-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.72rem;
  font-weight: 600;
  padding: 0.2rem 0.5rem;
  border-radius: 6px;
  font-family: var(--font-mono);
  cursor: pointer;
  transition: all 0.15s ease;
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  color: var(--text-primary);
}

.dev-run-chip:hover {
  transform: translateY(-1px);
  box-shadow: 0 2px 6px rgba(0,0,0,0.3);
}

.dev-run-chip.passed {
  background: var(--color-green-bg);
  color: var(--color-green);
  border-color: rgba(63, 217, 127, 0.4);
}

.dev-run-chip.failed {
  background: var(--color-red-bg);
  color: var(--color-red);
  border-color: rgba(255, 92, 114, 0.5);
  animation: chip-glow-red 2s infinite;
}

.dev-run-chip.running {
  background: var(--color-yellow-bg);
  color: var(--color-yellow);
  border-color: rgba(255, 200, 87, 0.4);
}

.dev-standby-label {
  font-size: 0.72rem;
  color: var(--text-muted);
  font-style: italic;
  font-family: var(--font-mono);
}

@keyframes chip-glow-red {
  0%, 100% { box-shadow: 0 0 4px rgba(255, 92, 114, 0.2); }
  50% { box-shadow: 0 0 10px rgba(255, 92, 114, 0.4); }
}

/* Tab Switch Loader */
.tab-loading-overlay {
  opacity: 0.5;
  pointer-events: none;
  filter: grayscale(0.2);
  transition: opacity 0.2s ease;
}

/* ============================= Slide-out Debug Drawer ============================= */
.drawer-overlay {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(6, 8, 12, 0.65);
  backdrop-filter: blur(4px);
  opacity: 0;
  visibility: hidden;
  transition: all 0.25s ease;
  z-index: 998;
}

.drawer-overlay.open {
  opacity: 1;
  visibility: visible;
}

.debug-drawer {
  position: fixed;
  top: 0; right: 0; bottom: 0;
  width: 600px;
  max-width: 92vw;
  background: linear-gradient(165deg, var(--bg-secondary), var(--bg-primary) 140%);
  border-left: 1px solid var(--border-color);
  box-shadow: -12px 0 40px rgba(0,0,0,0.5);
  transform: translateX(100%);
  transition: transform 0.3s var(--ease-out);
  z-index: 999;
  display: flex;
  flex-direction: column;
}

.debug-drawer.open {
  transform: translateX(0);
}

.drawer-header {
  padding: 1.3rem 1.4rem;
  border-bottom: 1px solid var(--border-color);
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: rgba(255,255,255,0.015);
}

.drawer-title-box {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  min-width: 0;
}

.drawer-title-box h3 {
  font-family: var(--font-mono);
  font-size: 0.95rem;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.status-badge {
  font-size: 0.72rem;
  font-weight: 800;
  padding: 0.28rem 0.6rem;
  border-radius: 6px;
  letter-spacing: 0.03em;
  flex-shrink: 0;
}
.status-badge.passed { background: var(--color-green); color: #06210f; box-shadow: 0 0 12px var(--color-green-glow); }
.status-badge.failed { background: var(--color-red); color: #2b0308; box-shadow: 0 0 12px var(--color-red-glow); }
.status-badge.disconnected { background: var(--color-gray); color: #fff; }

.drawer-close-btn {
  background: var(--bg-tertiary);
  border: 1px solid var(--border-color);
  color: var(--text-secondary);
  font-size: 1rem;
  cursor: pointer;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: all 0.15s ease;
}
.drawer-close-btn:hover {
  color: var(--text-primary);
  background: var(--color-red-bg);
  border-color: var(--color-red);
  transform: rotate(90deg);
}

.drawer-content {
  padding: 1.4rem;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 1.4rem;
}

.drawer-section {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}

.drawer-section-title {
  font-size: 0.75rem;
  text-transform: uppercase;
  color: var(--text-secondary);
  font-weight: 700;
  letter-spacing: 0.04em;
}

.error-banner {
  background: var(--color-red-bg);
  border: 1px solid rgba(255, 92, 114, 0.4);
  color: #ffb3bc;
  padding: 0.85rem 1rem;
  border-radius: var(--radius);
  font-family: var(--font-mono);
  font-size: 0.83rem;
  white-space: pre-wrap;
  word-break: break-word;
  display: flex;
  gap: 0.6rem;
  align-items: flex-start;
  box-shadow: inset 0 0 24px rgba(255, 92, 114, 0.08);
}

.error-banner-icon {
  flex-shrink: 0;
  filter: drop-shadow(0 0 4px rgba(255, 92, 114, 0.6));
}

.error-banner-text {
  flex: 1;
}

.meta-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.7rem 1.1rem;
  background: var(--bg-tertiary);
  border: 1px solid var(--border-color-soft);
  padding: 0.9rem 1rem;
  border-radius: var(--radius);
  font-size: 0.8rem;
}

.meta-row {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
}

.meta-k { color: var(--text-muted); font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.03em; }
.meta-v { color: var(--text-primary); font-weight: 600; }

.screenshot-container {
  background: var(--bg-tertiary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius);
  padding: 0;
  text-align: center;
  overflow: hidden;
  box-shadow: var(--shadow-soft);
}

.device-chrome-bar {
  display: flex;
  gap: 0.35rem;
  padding: 0.55rem 0.7rem;
  background: var(--bg-elevated);
  border-bottom: 1px solid var(--border-color);
}

.device-chrome-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--border-color);
}
.device-chrome-dot:nth-child(1) { background: var(--color-red); opacity: 0.7; }
.device-chrome-dot:nth-child(2) { background: var(--color-yellow); opacity: 0.7; }
.device-chrome-dot:nth-child(3) { background: var(--color-green); opacity: 0.7; }

.screenshot-img {
  display: block;
  max-width: 100%;
  max-height: 420px;
  margin: 0.6rem auto;
  border-radius: 6px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.5);
}

/* Drawer loading skeleton */
.drawer-skeleton {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
}
.skeleton-line, .skeleton-block {
  border-radius: 6px;
  background: linear-gradient(90deg, var(--bg-tertiary) 25%, var(--bg-elevated) 37%, var(--bg-tertiary) 63%);
  background-size: 400% 100%;
  animation: shimmer 1.4s ease-in-out infinite;
}
.skeleton-line { height: 14px; }
.skeleton-block { height: 96px; border-radius: var(--radius); }

/* ============================= Responsive ============================= */
@media (max-width: 900px) {
  .top-header {
    flex-wrap: wrap;
    gap: 0.75rem;
  }
  .header-controls {
    width: 100%;
    justify-content: space-between;
  }
  .status-rollup-card {
    flex-direction: column;
    align-items: flex-start;
  }
  .matrix-grid-head,
  .matrix-row {
    grid-template-columns: 1fr;
    gap: 0.6rem;
  }
  .matrix-grid-head .matrix-col-label:not(:first-child) { display: none; }
  .matrix-cell {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.3rem;
  }
  .matrix-cell::before {
    content: attr(data-label);
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--text-muted);
  }
  .workstation-grid {
    grid-template-columns: 1fr;
  }
}

.env-tabs-error {
  padding: 0.5rem 0.9rem;
  font-size: 0.8rem;
  color: var(--color-red);
}