*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  /* ═══ QA.AI IDENTITY — "Inspection Console" ═══
     Ink/Panel = the console body. Signal = the one accent that means "verified/primary".
     Pass/Fail/Warn are semantic ONLY — never used decoratively elsewhere. */
  --bg:#0A0C10;--bg2:#14171F;--bg3:#1B1F29;--bg4:#232833;
  --border:rgba(255,255,255,0.08);--border2:rgba(255,255,255,0.16);
  --text:#ECEEF3;--text2:#8891A3;--text3:#545B6B;
  --green:#2FE6C9;--green-d:rgba(47,230,201,0.12);--green-g:rgba(47,230,201,0.24);   /* Signal Teal — primary brand + pass */
  --red:#FB5B5B;--red-d:rgba(251,91,91,0.12);                                        /* Fail / defect only */
  --amber:#F5B942;--amber-d:rgba(245,185,66,0.12);                                   /* Blocked / pending only */
  --blue:#6C8CFF;--blue-d:rgba(108,140,255,0.12);                                    /* Info / links */
  --purple:#9B8CFF;--purple-d:rgba(155,140,255,0.12);                                /* Senior QA / premium accent */
  --mono:'IBM Plex Mono',monospace;--sans:'Space Grotesk',sans-serif;--body:'IBM Plex Sans',sans-serif;
  --sw:230px;--r:10px;--rs:7px;
}
body, input, textarea, select, button { font-family: var(--body); }
h1,h2,h3,.view-header h1,.brand-name,.stat-num,.senior-badge,.run-btn-v2,.rt2-name,.step-num{ font-family: var(--sans); letter-spacing:-0.01em; }

/* ── SIGNATURE COMPONENT: the inspection stamp ─────────────────
   Used sparingly (GO/NO-GO verdict, hero, footer CTA) — the one bold,
   memorable element per the "spend your boldness in one place" principle. */
.stamp{
  display:inline-flex;align-items:center;gap:8px;
  font-family:var(--mono);font-weight:700;font-size:13px;letter-spacing:2.5px;text-transform:uppercase;
  padding:9px 20px;border:3px double currentColor;border-radius:3px;
  transform:rotate(-3deg);
  background:transparent;
  position:relative;
}
.stamp::before{content:'';position:absolute;inset:-3px;border:1px solid currentColor;border-radius:5px;opacity:0.3;}
.stamp.stamp-pass{color:var(--green);}
.stamp.stamp-fail{color:var(--red);}
.stamp.stamp-warn{color:var(--amber);}
.stamp.stamp-brand{color:var(--green);}
/* ═══ LIGHT MODE — same Inspection Console identity, on white ═════════════════════════ */
.light-mode {
  --bg: #FFFFFF;
  --bg2: #F7F9FA;
  --bg3: #EAF7F4;
  --bg4: #DCEEEA;
  --border: rgba(10,30,25,0.10);
  --border2: rgba(10,30,25,0.20);
  --text: #0A1410;
  --text2: #35473F;
  --text3: #5C7168;

  /* Signal Teal Primary Accent — same brand hue as dark mode, tuned for white */
  --green: #0F9B85;
  --green-d: rgba(15,155,133,0.08);
  --green-g: rgba(15,155,133,0.20);

  --red: #D4374A;
  --red-d: rgba(212,55,74,0.1);

  --amber: #C97A0A;
  --amber-d: rgba(201,122,10,0.1);

  --blue: #3159D4;
  --blue-d: rgba(49,89,212,0.1);

  --purple: #6B4FE0;
  --purple-d: rgba(107,79,224,0.1);
}

/* Glass & Mesh Background for Light Mode */
.light-mode body {
  background-image: 
    radial-gradient(ellipse at top left, rgba(15,155,133,0.06) 0%, transparent 40%),
    radial-gradient(ellipse at bottom right, rgba(107,79,224,0.06) 0%, transparent 40%),
    radial-gradient(ellipse at top right, rgba(212,55,74,0.03) 0%, transparent 40%);
  background-color: #FFFFFF;
  background-attachment: fixed;
}
.light-mode .grid-bg { 
  opacity: 0.5;
}

/* Crisp Clean High Contrast Physics */
.light-mode .card,
.light-mode .rcard,
.light-mode .stat-card,
.light-mode .run-panel-inner,
.light-mode .smart-discovery-banner {
  background: var(--bg2);
  border: 1px solid rgba(0, 0, 0, 0.12);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03), 0 1px 3px rgba(0, 0, 0, 0.04);
  background-clip: padding-box;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.light-mode .card:hover,
.light-mode .rcard:hover,
.light-mode .stat-card:hover {
  transform: translateY(-4px);
  border-color: rgba(15,155,133,0.4);
  box-shadow: 0 16px 40px rgba(15,155,133,0.12), 0 4px 12px rgba(8, 13, 28, 0.06);
}
.light-mode .ai-chat-fab {
  background: #0F9B85 !important;
  border-color: rgba(255,255,255,0.2) !important;
  box-shadow: 0 10px 40px rgba(15,155,133,0.45) !important;
  backdrop-filter: none;
}
.light-mode .ai-chat-fab svg {
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.2));
}

.light-mode .btn-primary, 
.light-mode .run-btn {
  background: #0F9B85;
  color: #FFFFFF;
  box-shadow: 0 4px 15px rgba(15,155,133,0.4);
  border: 1px solid rgba(255, 255, 255, 0.2);
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.light-mode .btn-primary:hover,
.light-mode .run-btn:hover {
  transform: translateY(-3px) scale(1.02);
  box-shadow: 0 10px 25px rgba(15,155,133,0.5);
  border-color: transparent;
  color: #FFFFFF;
}

/* High contrast inputs */
.light-mode input[type=url], 
.light-mode input[type=text], 
.light-mode input[type=number],
.light-mode input[type=password],
.light-mode textarea, 
.light-mode select {
  background: #FFFFFF;
  border: 1px solid rgba(0,0,0, 0.12);
  box-shadow: inset 0 2px 6px rgba(0,0,0,0.02);
  color: #0A1410;
}
.light-mode input[type=url]:focus,
.light-mode input[type=text]:focus,
.light-mode input[type=number]:focus,
.light-mode input[type=password]:focus,
.light-mode textarea:focus,
.light-mode select:focus {
  border-color: #0F9B85;
  box-shadow: inset 0 2px 6px rgba(0,0,0,0.02), 0 0 0 3px rgba(15,155,133,0.2);
}

/* Light Mode Sidebar Enhancements */
.light-mode .sidebar {
  background: linear-gradient(180deg, #F8FAFC 0%, #EEF2F6 100%);
  border-right: 1px solid rgba(0, 0, 0, 0.08);
  box-shadow: 6px 0 25px rgba(0, 0, 0, 0.04);
}
.light-mode .logo {
  border-bottom-color: rgba(0, 0, 0, 0.06);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.8) 0%, transparent 100%);
}
.light-mode .logo-icon {
  background: #FFFFFF;
  border-color: rgba(107, 79, 224, 0.25);
  box-shadow: 0 4px 12px rgba(107, 79, 224, 0.12);
}
.light-mode .logo-text {
  color: #0A1410;
}
.light-mode .logo-text span {
  background: linear-gradient(135deg, #3159D4, #6B4FE0);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.light-mode .ult-tag {
  background: rgba(107, 79, 224, 0.1);
  color: #6B4FE0;
  border-color: rgba(107, 79, 224, 0.25);
  box-shadow: none;
}
.light-mode .nav-section-text {
  color: #718096;
}
.light-mode .nav-section-line {
  background: linear-gradient(90deg, rgba(0, 0, 0, 0.08) 0%, transparent 100%);
}
.light-mode .nav-btn {
  color: #4A5568;
}
.light-mode .nav-btn svg {
  stroke: #718096;
}
.light-mode .nav-btn:hover {
  background: rgba(0, 0, 0, 0.04);
  color: #1A202C;
  border-color: rgba(0, 0, 0, 0.06);
}
.light-mode .nav-btn:hover svg {
  stroke: #0F9B85;
  filter: drop-shadow(0 0 4px rgba(15, 155, 133, 0.3));
}
.light-mode .nav-btn.active {
  background: rgba(15, 155, 133, 0.1);
  border-color: rgba(15, 155, 133, 0.35);
  color: #0F9B85;
  box-shadow: 0 2px 8px rgba(15, 155, 133, 0.08);
}
.light-mode .nav-btn.active::before {
  background: #0F9B85;
  box-shadow: 0 0 8px rgba(15, 155, 133, 0.4);
}
.light-mode .nav-btn.active svg {
  stroke: #0F9B85;
  filter: drop-shadow(0 0 6px rgba(15, 155, 133, 0.4));
}
.light-mode .sidebar-footer {
  border-top-color: rgba(0, 0, 0, 0.06);
  background: linear-gradient(180deg, #F1F5F9 0%, #E2E8F0 100%);
}
.light-mode .api-status-pod {
  background: #FFFFFF;
  border-color: rgba(0, 0, 0, 0.08);
}
.light-mode .status-engine-lbl {
  color: #718096;
}
.light-mode .status-text-val {
  color: #2D3748;
}
.light-mode .theme-toggle {
  background: #FFFFFF;
  border-color: rgba(0, 0, 0, 0.1);
  color: #2D3748;
}
.light-mode .theme-toggle:hover {
  background: #EDF2F7;
  color: #0F9B85;
  border-color: #0F9B85;
}
html{font-size:14px}
body{background:var(--bg);color:var(--text);font-family:var(--body);min-height:100vh;overflow-x:hidden;transition:background .3s,color .3s}
.grid-bg{position:fixed;inset:0;z-index:0;pointer-events:none;background-image:linear-gradient(rgba(47,230,201,0.025) 1px,transparent 1px),linear-gradient(90deg,rgba(47,230,201,0.025) 1px,transparent 1px);background-size:44px 44px}

/* ═══════════════════════════════════════════════════════
   CYBERPUNK OBSIDIAN SIDEBAR NAVIGATION CENTER
   ═══════════════════════════════════════════════════════ */
.sidebar {
  position: fixed;
  left: 0;
  top: 0;
  bottom: 0;
  width: var(--sw);
  background: linear-gradient(180deg, rgba(12, 16, 26, 0.98) 0%, rgba(7, 9, 14, 0.99) 100%);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border-right: 1px solid rgba(255, 255, 255, 0.07);
  box-shadow: 10px 0 35px rgba(0, 0, 0, 0.5);
  display: flex;
  flex-direction: column;
  z-index: 100;
  overflow-y: auto;
  overflow-x: hidden;
}

/* Sleek obsidian scrollbar */
.sidebar::-webkit-scrollbar {
  width: 4px;
}
.sidebar::-webkit-scrollbar-track {
  background: transparent;
}
.sidebar::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.08);
  border-radius: 4px;
}
.sidebar::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 229, 160, 0.35);
}

/* Brand Logo */
.logo {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 18px 16px 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.02) 0%, transparent 100%);
  flex-shrink: 0;
}
.logo-icon {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: linear-gradient(135deg, rgba(14, 20, 36, 0.95), rgba(7, 10, 18, 0.98));
  border: 1px solid rgba(0, 210, 255, 0.35);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 16px rgba(0, 210, 255, 0.25), inset 0 1px 1px rgba(255, 255, 255, 0.15);
  flex-shrink: 0;
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.25s ease, border-color 0.25s ease;
}
.logo:hover .logo-icon {
  transform: scale(1.06) rotate(2deg);
  border-color: rgba(167, 139, 250, 0.6);
  box-shadow: 0 0 22px rgba(167, 139, 250, 0.45), inset 0 1px 2px rgba(255, 255, 255, 0.25);
}
.logo-text {
  font-family: var(--sans);
  font-size: 15px;
  font-weight: 800;
  color: #ffffff;
  letter-spacing: -0.4px;
  display: flex;
  align-items: center;
  gap: 4px;
}
.logo-text span {
  background: linear-gradient(135deg, #00d2ff, #a78bfa);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.ult-tag {
  font-size: 8.5px;
  font-weight: 800;
  font-family: var(--mono);
  background: rgba(167, 139, 250, 0.14);
  color: #c084fc;
  border: 1px solid rgba(167, 139, 250, 0.32);
  padding: 2px 6px;
  border-radius: 5px;
  letter-spacing: 0.8px;
  margin-left: auto;
  box-shadow: 0 0 10px rgba(167, 139, 250, 0.2);
}

/* Navigation List */
.nav {
  flex: 1;
  padding: 12px 8px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.nav-section-label {
  display: flex;
  align-items: center;
  padding: 12px 10px 6px;
  gap: 8px;
}
.nav-section-text {
  font-size: 9px;
  font-weight: 800;
  color: #526079;
  letter-spacing: 1.3px;
  font-family: var(--mono);
  text-transform: uppercase;
}
.nav-section-line {
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.08) 0%, transparent 100%);
}

/* Navigation Button */
.nav-btn {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8.5px 12px;
  border-radius: 8px;
  background: transparent;
  border: 1px solid transparent;
  cursor: pointer;
  color: var(--text2);
  font-family: var(--sans);
  font-size: 12.5px;
  font-weight: 600;
  text-align: left;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  width: 100%;
}
.nav-btn svg {
  width: 15px;
  height: 15px;
  stroke: var(--text3);
  fill: none;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex-shrink: 0;
  transition: stroke 0.2s ease, filter 0.2s ease, transform 0.2s ease;
}

/* Hover State */
.nav-btn:hover {
  background: rgba(255, 255, 255, 0.04);
  color: #ffffff;
  border-color: rgba(255, 255, 255, 0.06);
  transform: translateX(3px);
}
.nav-btn:hover svg {
  stroke: #00d2ff;
  filter: drop-shadow(0 0 6px rgba(0, 210, 255, 0.5));
  transform: scale(1.08);
}

/* Active State */
.nav-btn.active {
  background: linear-gradient(90deg, rgba(0, 229, 160, 0.13) 0%, rgba(0, 210, 255, 0.03) 100%);
  border-color: rgba(0, 229, 160, 0.28);
  color: #ffffff;
  font-weight: 700;
  box-shadow: 0 4px 14px rgba(0, 229, 160, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.05);
}
.nav-btn.active::before {
  content: '';
  position: absolute;
  left: 0;
  top: 6px;
  bottom: 6px;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: linear-gradient(180deg, #00e5a0, #00d2ff);
  box-shadow: 0 0 10px #00e5a0;
}
.nav-btn.active svg {
  stroke: #00e5a0;
  filter: drop-shadow(0 0 8px rgba(0, 229, 160, 0.65));
}

/* Sidebar Footer & Status Pod */
.sidebar-footer {
  padding: 12px 14px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  background: linear-gradient(180deg, rgba(7, 9, 14, 0.7) 0%, rgba(10, 14, 22, 0.95) 100%);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  flex-shrink: 0;
}
.api-status-pod {
  display: flex;
  align-items: center;
  gap: 9px;
  flex: 1;
  min-width: 0;
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid rgba(255, 255, 255, 0.05);
  padding: 6px 9px;
  border-radius: 8px;
}
.status-beacon-wrap {
  position: relative;
  width: 8px;
  height: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #526079;
  transition: all 0.3s ease;
  position: relative;
  z-index: 2;
}
.dot.on {
  background: #00e5a0;
  box-shadow: 0 0 8px #00e5a0;
}
.status-pulse-ring {
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  border: 1.5px solid transparent;
  pointer-events: none;
  transition: all 0.3s ease;
}
.dot.on + .status-pulse-ring {
  border-color: rgba(0, 229, 160, 0.6);
  animation: beaconPulse 2s cubic-bezier(0.25, 1, 0.5, 1) infinite;
}
@keyframes beaconPulse {
  0% { transform: scale(0.9); opacity: 0.9; }
  100% { transform: scale(2.3); opacity: 0; }
}
.status-meta {
  display: flex;
  flex-direction: column;
  min-width: 0;
  line-height: 1.2;
}
.status-engine-lbl {
  font-size: 8px;
  font-weight: 800;
  color: #64748b;
  letter-spacing: 0.9px;
  font-family: var(--mono);
}
.status-text-val {
  font-size: 10px;
  font-family: var(--mono);
  color: #94a3b8;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.theme-toggle {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: var(--text2);
  border-radius: 8px;
  cursor: pointer;
  font-size: 13px;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  flex-shrink: 0;
}
.theme-toggle:hover {
  background: rgba(0, 210, 255, 0.08);
  border-color: rgba(0, 210, 255, 0.3);
  color: #00d2ff;
  transform: rotate(15deg);
  box-shadow: 0 0 12px rgba(0, 210, 255, 0.2);
}
.no-scroll { overflow: hidden !important; }
.sidebar-backdrop { display: none; }

/* MAIN */
.main{margin-left:var(--sw);padding:24px 28px;position:relative;z-index:1}
.view{display:none;animation:fi .2s ease}
.view.active{display:block}
@keyframes fi{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}}
.view-header{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:18px;gap:12px}
.view-header h1{font-size:22px;font-weight:800;letter-spacing:-.5px;background:linear-gradient(135deg,var(--text),var(--text2));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.subtitle{font-size:11px;color:var(--text3);margin-top:2px}
kbd{background:var(--bg3);border:1px solid var(--border2);border-radius:3px;padding:1px 5px;font-size:10px;font-family:var(--mono)}

/* CARDS */
.card{background:var(--bg2);border:1px solid var(--border);border-radius:var(--r);padding:16px;margin-bottom:12px}
.card-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
.card-header h3{font-size:12px;font-weight:700;color:var(--text)}

/* BUTTONS */
.btn-primary{display:inline-flex;align-items:center;gap:6px;padding:9px 18px;border-radius:var(--rs);background:var(--green);color:#000;border:none;font-family:var(--sans);font-size:12px;font-weight:700;cursor:pointer;transition:all .15s;white-space:nowrap}
.btn-primary:hover{filter:brightness(1.1);box-shadow:0 0 16px var(--green-g)}
.btn-primary:disabled{opacity:.4;cursor:not-allowed}
.btn-ghost{display:inline-flex;align-items:center;gap:5px;padding:6px 12px;border-radius:var(--rs);background:none;color:var(--text2);border:1px solid var(--border2);cursor:pointer;font-family:var(--sans);font-size:11px;font-weight:600;transition:all .15s;white-space:nowrap}
.btn-ghost:hover{background:var(--bg3);color:var(--text)}
.btn-accent{display:inline-flex;align-items:center;gap:6px;padding:8px 16px;border-radius:var(--rs);background:var(--green-d);color:var(--green);border:1px solid var(--green);font-family:var(--sans);font-size:12px;font-weight:700;cursor:pointer;transition:all .15s;text-decoration:none}
.btn-accent:hover{background:var(--green);color:#000}
.mt8{margin-top:8px;display:inline-flex}
.export-excel{border-color:rgba(0,229,160,.3);color:var(--green)}
.export-excel:hover{background:var(--green-d)}

/* FREE BANNER */
.free-banner{background:linear-gradient(135deg,rgba(0,229,160,.07),transparent);border:1px solid rgba(0,229,160,.18);border-radius:var(--r);padding:14px 18px;display:flex;align-items:center;gap:12px;margin-bottom:18px;flex-wrap:wrap}
.fb-icon{font-size:22px;flex-shrink:0}.fb-title{font-size:13px;font-weight:700;color:var(--green)}.fb-sub{font-size:11px;color:var(--text2);margin-top:1px}

/* ═══════════════════════════════════════════════════════
   CYBERPUNK OBSIDIAN COMMAND CENTER — DASHBOARD V2
   ═══════════════════════════════════════════════════════ */

/* DASHBOARD HEADER & TELEMETRY CONTROLS */
.dash-header-bar{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:14px;margin-bottom:18px}
.dash-title-wrap h1{margin:0;font-size:24px;font-weight:900;letter-spacing:-0.5px;background:linear-gradient(135deg,#ffffff 40%,var(--cyan) 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent}
.dash-title-wrap .subtitle{margin-top:3px;font-size:12px;color:var(--text2);display:flex;align-items:center;gap:8px}
.telemetry-status-dot{width:7px;height:7px;border-radius:50%;background:var(--green);box-shadow:0 0 10px var(--green);display:inline-block;animation:telePulse 2s infinite}
@keyframes telePulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:0.4;transform:scale(1.25)}}

.dash-actions-group{display:flex;align-items:center;gap:10px}

/* TOP KPI STATS GRID */
.stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:18px}
.stat-card{background:linear-gradient(135deg,rgba(16,22,38,0.85),rgba(10,14,26,0.75));backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border:1px solid rgba(255,255,255,0.08);border-radius:14px;padding:16px 18px;display:flex;flex-direction:column;justify-content:space-between;position:relative;overflow:hidden;box-shadow:0 10px 30px rgba(0,0,0,0.4);transition:all .25s cubic-bezier(0.16,1,0.3,1);min-height:115px}
.stat-card:hover{transform:translateY(-3px);border-color:rgba(0,229,160,0.35);box-shadow:0 14px 36px rgba(0,0,0,0.5),0 0 20px rgba(0,229,160,0.12)}
.stat-card::after{content:'';position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,rgba(255,255,255,0.15),transparent)}

.stat-top-row{display:flex;align-items:center;justify-content:space-between;position:relative;z-index:2}
.stat-icon-wrap{width:38px;height:38px;border-radius:10px;display:flex;align-items:center;justify-content:center;position:relative}
.stat-icon-wrap svg{width:18px;height:18px;stroke-width:2;fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round}
.stat-icon-wrap.green{background:rgba(0,229,160,0.12);color:var(--green);box-shadow:0 0 16px rgba(0,229,160,0.15);border:1px solid rgba(0,229,160,0.2)}
.stat-icon-wrap.blue{background:rgba(0,210,255,0.12);color:var(--cyan);box-shadow:0 0 16px rgba(0,210,255,0.15);border:1px solid rgba(0,210,255,0.2)}
.stat-icon-wrap.red{background:rgba(255,77,106,0.12);color:var(--red);box-shadow:0 0 16px rgba(255,77,106,0.15);border:1px solid rgba(255,77,106,0.2)}
.stat-icon-wrap.amber{background:rgba(255,184,77,0.12);color:var(--amber);box-shadow:0 0 16px rgba(255,184,77,0.15);border:1px solid rgba(255,184,77,0.2)}

.stat-badge-pill{font-size:10px;font-weight:800;padding:2px 8px;border-radius:99px;font-family:var(--mono);display:inline-flex;align-items:center;gap:3px;letter-spacing:0.3px}
.trend-up{background:rgba(0,229,160,0.14);color:var(--green);border:1px solid rgba(0,229,160,0.25)}
.trend-down{background:rgba(255,77,106,0.14);color:var(--red);border:1px solid rgba(255,77,106,0.25)}
.trend-neutral{background:rgba(255,255,255,0.06);color:var(--text2);border:1px solid rgba(255,255,255,0.08)}

.stat-bottom-row{display:flex;align-items:flex-end;justify-content:space-between;margin-top:12px;position:relative;z-index:2}
.stat-lbl{font-size:11px;color:var(--text3);text-transform:uppercase;letter-spacing:.7px;font-weight:700}
.stat-num{font-size:28px;font-weight:900;letter-spacing:-0.5px;color:#ffffff;line-height:1;margin-top:3px;font-family:var(--sans)}

.stat-spark-wrap{position:absolute;right:0;bottom:0;width:120px;height:45px;pointer-events:none;opacity:0.6;transition:opacity .2s}
.stat-card:hover .stat-spark-wrap{opacity:0.9}
.stat-spark-svg{width:100%;height:100%}

/* QA HEALTH DIAGNOSTIC COCKPIT (BALANCED 3-COLUMN COMMAND CENTER) */
.qa-cockpit-card{grid-column:1 / -1;background:linear-gradient(135deg,rgba(16,23,40,0.92),rgba(9,13,24,0.88));backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border:1px solid rgba(0,229,160,0.25);border-radius:18px;padding:20px 24px;position:relative;overflow:hidden;box-shadow:0 14px 44px rgba(0,0,0,0.55),0 0 35px rgba(0,229,160,0.06);margin-bottom:18px}
.qa-cockpit-card::before{content:'';position:absolute;top:0;left:10%;right:10%;height:1px;background:linear-gradient(90deg,transparent,var(--green),var(--cyan),transparent);opacity:0.6}

.qa-cockpit-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px;padding-bottom:12px;border-bottom:1px solid rgba(255,255,255,0.06)}
.qa-cockpit-title-group{display:flex;align-items:center;gap:12px}
.cockpit-shield-icon{width:32px;height:32px;border-radius:8px;background:linear-gradient(135deg,rgba(0,229,160,0.2),rgba(0,210,255,0.2));border:1px solid rgba(0,229,160,0.3);display:flex;align-items:center;justify-content:center;font-size:16px;box-shadow:0 0 14px rgba(0,229,160,0.2)}
.qa-cockpit-title-group h3{margin:0;font-size:15px;font-weight:800;letter-spacing:-0.2px;color:#fff}
.qa-cockpit-title-group p{margin:2px 0 0;font-size:11px;color:var(--text3)}

.qa-cockpit-3col{display:grid;grid-template-columns:1fr 200px 1fr;gap:24px;align-items:center}
@media (max-width:850px){.qa-cockpit-3col{grid-template-columns:1fr;gap:20px}}

/* Center Radar Gauge */
.qa-radar-module{position:relative;width:180px;height:180px;margin:0 auto;display:flex;align-items:center;justify-content:center}
.qa-radar-svg-wrap{position:relative;width:100%;height:100%;display:flex;align-items:center;justify-content:center}
.qa-radar-svg{width:100%;height:100%;transform:rotate(-90deg);filter:drop-shadow(0 0 10px rgba(0,229,160,0.35))}
.radar-bg-circle{fill:none;stroke:rgba(255,255,255,0.05);stroke-width:10}
.radar-ticks-circle{fill:none;stroke:rgba(255,255,255,0.12);stroke-width:3;stroke-dasharray:3,9}
.radar-stroke{fill:none;stroke:url(#qaRadarGrad);stroke-width:10;stroke-linecap:round;stroke-dasharray:465;stroke-dashoffset:465;transition:stroke-dashoffset 1.4s cubic-bezier(0.16,1,0.3,1)}

.radar-scanner-beam{position:absolute;inset:12px;border-radius:50%;background:conic-gradient(from 0deg,rgba(0,229,160,0.22),transparent 60%);animation:radarSweep 4s linear infinite;pointer-events:none}
@keyframes radarSweep{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.radar-scanner-beam{animation:none}}

.radar-center-info{position:absolute;text-align:center;display:flex;flex-direction:column;align-items:center;justify-content:center;z-index:2}
.radar-score-digits{font-size:42px;font-weight:900;color:#ffffff;letter-spacing:-1.5px;line-height:1;font-family:var(--mono);text-shadow:0 0 20px rgba(0,229,160,0.4)}
.radar-status-tag{font-size:10px;font-weight:800;letter-spacing:1px;text-transform:uppercase;color:var(--green);background:rgba(0,229,160,0.15);border:1px solid rgba(0,229,160,0.3);padding:2px 10px;border-radius:99px;margin-top:4px}

/* Sub-metrics Columns */
.submetric-stack{display:flex;flex-direction:column;gap:16px}
.submetric-card{background:rgba(0,0,0,0.25);border:1px solid rgba(255,255,255,0.06);border-radius:10px;padding:10px 14px}
.submetric-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px;font-size:11px;font-weight:700}
.submetric-label{color:var(--text2);text-transform:uppercase;letter-spacing:.6px;display:flex;align-items:center;gap:6px}
.submetric-val{color:#fff;font-family:var(--mono);font-size:12px}
.submetric-bar-bg{height:7px;background:rgba(255,255,255,0.06);border-radius:99px;overflow:hidden;position:relative}
.submetric-bar-fill{height:100%;border-radius:99px;transition:width 1.2s cubic-bezier(0.16,1,0.3,1);box-shadow:0 0 10px currentColor}
.fill-coverage{background:linear-gradient(90deg,#00e5a0,#00d2ff);color:rgba(0,229,160,0.4)}
.fill-stability{background:linear-gradient(90deg,#00d2ff,#a78bfa);color:rgba(0,210,255,0.4)}
.fill-risk{background:linear-gradient(90deg,#38bdf8,#818cf8);color:rgba(56,189,248,0.4)}
.fill-automation{background:linear-gradient(90deg,#f59e0b,#10b981);color:rgba(16,185,129,0.4)}

/* Live Telemetry Ticker */
.qa-cockpit-ticker{display:flex;align-items:center;gap:10px;background:rgba(0,0,0,0.35);border:1px solid rgba(255,255,255,0.06);border-radius:10px;padding:10px 16px;font-size:12px;color:var(--text2);margin-top:18px}
.ticker-pulse-dot{width:8px;height:8px;border-radius:50%;background:var(--green);box-shadow:0 0 10px var(--green);flex-shrink:0;animation:tickerPulse 2s infinite}
@keyframes tickerPulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.3;transform:scale(1.3)}}
.ticker-text{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* DEDICATED 4-CHART PLATFORM ANALYTICS HUB */
.dash-analytics-hub{background:linear-gradient(135deg,rgba(14,20,34,0.85),rgba(10,14,26,0.8));backdrop-filter:blur(16px);border:1px solid rgba(255,255,255,0.08);border-radius:16px;padding:20px;margin-bottom:18px;box-shadow:0 10px 36px rgba(0,0,0,0.4)}
.analytics-header-row{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px;margin-bottom:18px;padding-bottom:12px;border-bottom:1px solid rgba(255,255,255,0.06)}
.analytics-title-group{display:flex;align-items:center;gap:10px}
.analytics-title-group h3{margin:0;font-size:15px;font-weight:800;color:#fff}
.analytics-controls{display:flex;align-items:center;gap:8px}

.analytics-grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
@media (max-width:1100px){.analytics-grid-4{grid-template-columns:repeat(2,1fr)}}
@media (max-width:600px){.analytics-grid-4{grid-template-columns:1fr}}

.chart-card-pod{background:rgba(0,0,0,0.25);border:1px solid rgba(255,255,255,0.06);border-radius:12px;padding:14px;display:flex;flex-direction:column;justify-content:space-between;transition:border-color .2s}
.chart-card-pod:hover{border-color:rgba(0,229,160,0.3)}
.chart-pod-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.chart-pod-title{font-size:11px;font-weight:700;color:var(--text2);text-transform:uppercase;letter-spacing:.6px}
.chart-pod-badge{font-size:9px;font-weight:800;font-family:var(--mono);padding:2px 6px;border-radius:99px;background:rgba(255,255,255,0.06);color:var(--text3)}

.chart-canvas-box{position:relative;width:100%;height:180px;min-height:180px;display:flex;align-items:center;justify-content:center}
.chart-canvas-box canvas{width:100%!important;height:100%!important}

/* Standby Empty State Overlay for Charts */
.chart-empty-overlay{position:absolute;inset:0;background:rgba(10,14,24,0.85);backdrop-filter:blur(4px);border-radius:8px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;text-align:center;padding:10px;z-index:5;pointer-events:none}
.chart-empty-overlay.hidden{display:none}
.chart-empty-icon{font-size:20px;opacity:0.7}
.chart-empty-text{font-size:10px;color:var(--text3);font-family:var(--mono);line-height:1.4}

/* AI QA ADVISOR & QUICK LAUNCH DUAL COLUMN */
.dash-dual-grid{display:grid;grid-template-columns:1.2fr 1fr;gap:16px;margin-bottom:18px}
@media (max-width:900px){.dash-dual-grid{grid-template-columns:1fr}}

.advisor-card-v2{background:linear-gradient(135deg,rgba(16,22,38,0.85),rgba(10,14,26,0.78));backdrop-filter:blur(16px);border:1px solid rgba(255,255,255,0.08);border-radius:16px;padding:18px;box-shadow:0 10px 30px rgba(0,0,0,0.4)}
.advisor-card-v2 .card-header{margin-bottom:14px;padding-bottom:10px;border-bottom:1px solid rgba(255,255,255,0.06)}

.advisor-items-container{display:flex;flex-direction:column;gap:10px}
.advisor-item-v2{background:rgba(0,0,0,0.25);border:1px solid rgba(255,255,255,0.06);border-left:3px solid var(--cyan);border-radius:10px;padding:12px 14px;display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:12px;transition:all .2s}
.advisor-item-v2:hover{background:rgba(0,0,0,0.4);border-color:rgba(255,255,255,0.14)}
.advisor-item-v2.crit{border-left-color:var(--red)}
.advisor-content{display:flex;align-items:center;gap:10px;min-width:0}
.advisor-item-icon{font-size:16px;flex-shrink:0}
.advisor-btn-v2{padding:6px 12px;border-radius:6px;background:linear-gradient(135deg,rgba(0,229,160,0.15),rgba(0,210,255,0.15));color:var(--green);border:1px solid rgba(0,229,160,0.3);font-size:11px;font-weight:700;cursor:pointer;white-space:nowrap;transition:all .2s;flex-shrink:0}
.advisor-btn-v2:hover{background:var(--green);color:#000;box-shadow:0 0 14px rgba(0,229,160,0.4)}

.quick-launch-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.ql-card{background:rgba(0,0,0,0.25);border:1px solid rgba(255,255,255,0.06);border-radius:10px;padding:12px 14px;cursor:pointer;transition:all .2s;display:flex;align-items:center;gap:10px}
.ql-card:hover{border-color:var(--cyan);background:rgba(0,210,255,0.06);transform:translateY(-2px)}
.ql-card-icon{font-size:20px}
.ql-card-info{min-width:0}
.ql-card-name{font-size:12px;font-weight:700;color:#fff}
.ql-card-desc{font-size:10px;color:var(--text3);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* RECENT TESTS & TEMPLATES ROW */
.dash-bottom-grid{display:grid;grid-template-columns:1fr 1.4fr;gap:16px}
@media (max-width:900px){.dash-bottom-grid{grid-template-columns:1fr}}

.templates-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
@media (max-width:700px){.templates-grid{grid-template-columns:repeat(2,1fr)}}
.template-card{background:rgba(0,0,0,0.25);border:1px solid rgba(255,255,255,0.06);border-radius:10px;padding:12px 14px;cursor:pointer;transition:all .2s}
.template-card:hover{border-color:var(--green);background:rgba(0,229,160,0.06);transform:translateY(-2px)}
.tc-icon{font-size:20px;margin-bottom:6px}
.tc-name{font-size:12px;font-weight:700;color:#fff}
.tc-desc{font-size:10px;color:var(--text3);margin-top:3px;line-height:1.3}

/* MODE TABS */
.mode-tabs{display:flex;gap:7px;margin-bottom:12px}
.mode-tab{flex:1;padding:9px;border-radius:var(--rs);border:1px solid var(--border2);background:var(--bg2);color:var(--text2);font-family:var(--sans);font-size:12px;font-weight:600;cursor:pointer;transition:all .15s}
.mode-tab:hover{background:var(--bg3);color:var(--text)}
.mode-tab.active{background:var(--green-d);border-color:var(--green);color:var(--green)}

/* RUNNER LAYOUT */
.runner-layout{display:grid;grid-template-columns:310px 1fr;gap:16px;align-items:start;min-width:0}.runner-layout>*{min-width:0}

/* FIELDS */
.field{margin-bottom:10px}
.field label{display:block;font-size:10px;font-weight:700;color:var(--text2);text-transform:uppercase;letter-spacing:.7px;margin-bottom:4px}
.opt{font-weight:400;text-transform:none;letter-spacing:0;color:var(--text3);font-size:10px}
input[type=url],input[type=text],input[type=password],input[type=number],textarea,select{width:100%;background:var(--bg3);border:1px solid var(--border);border-radius:var(--rs);padding:8px 11px;color:var(--text);font-family:var(--sans);font-size:12px;outline:none;transition:border-color .15s;-webkit-appearance:none;appearance:none}
input:focus,textarea:focus,select:focus{border-color:var(--green)}
input[type=range]{padding:0;height:4px;accent-color:var(--green)}
textarea{resize:vertical;min-height:50px;line-height:1.6}
select{cursor:pointer;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%238a8c9d' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 10px center;padding-right:28px}
code{font-family:var(--mono);font-size:10px;background:var(--bg3);padding:2px 5px;border-radius:4px;color:var(--green)}
.hint-text{font-size:10px;color:var(--text3);margin-top:4px}
.hint-text a{color:var(--green);text-decoration:none}

/* DROPZONE */
.dropzone{border:2px dashed var(--border2);border-radius:var(--r);padding:24px 16px;text-align:center;cursor:pointer;transition:all .2s;background:var(--bg3)}
.dropzone:hover,.dropzone.drag-over{border-color:var(--green);background:var(--green-d)}
.dz-icon{font-size:26px;margin-bottom:7px}.dz-title{font-size:13px;font-weight:700;color:var(--text);margin-bottom:3px}.dz-sub{font-size:11px;color:var(--text3)}
.img-preview{background:var(--bg3);border:1px solid var(--border);border-radius:var(--rs);padding:10px;text-align:center;margin-top:8px}
.img-preview img{max-height:160px;max-width:100%;border-radius:5px;object-fit:contain}
.img-meta{font-size:10px;font-family:var(--mono);color:var(--text3);margin-top:6px}

/* PRESET */
.preset-strip{display:flex;gap:5px;margin-bottom:10px;flex-wrap:wrap}
.preset-btn{padding:4px 10px;border-radius:99px;background:var(--bg3);border:1px solid var(--border2);color:var(--text2);font-family:var(--sans);font-size:10px;font-weight:700;cursor:pointer;transition:all .15s;white-space:nowrap}
.preset-btn:hover{border-color:var(--green);color:var(--green);background:var(--green-d)}

/* MODULES */
.modules-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:5px}
.mod input{display:none}
.mod-box{display:flex;align-items:center;gap:6px;padding:6px 9px;border-radius:var(--rs);border:1px solid var(--border);cursor:pointer;transition:all .15s;font-size:11px;font-weight:600;color:var(--text2)}
.mod-box:hover{border-color:var(--border2);color:var(--text)}
.mod-box span:first-child{font-size:12px}
.mod.on .mod-box,.mod input:checked+.mod-box{border-color:var(--green);background:var(--green-d);color:var(--green)}

/* REPORT TYPES */
.report-types{display:grid;grid-template-columns:1fr 1fr;gap:5px}
.rt-opt input{display:none}
.rt-box{display:flex;align-items:center;gap:7px;padding:8px 10px;border-radius:var(--rs);border:1px solid var(--border);cursor:pointer;transition:all .15s}
.rt-box:hover{border-color:var(--border2)}
.rt-icon{font-size:14px;flex-shrink:0}.rt-name{font-size:11px;font-weight:700;color:var(--text)}.rt-desc{font-size:9px;color:var(--text3);margin-top:1px}
.rt-opt:has(input:checked) .rt-box{border-color:var(--green);background:var(--green-d)}
.rt-opt:has(input:checked) .rt-name{color:var(--green)}

/* SETTINGS */
.depth-btns{display:flex;gap:5px;margin-top:4px}
.depth-btn{flex:1;padding:6px;border-radius:var(--rs);background:var(--bg3);border:1px solid var(--border);color:var(--text2);font-family:var(--sans);font-size:10px;font-weight:700;cursor:pointer;transition:all .15s}
.depth-btn:hover{border-color:var(--border2);color:var(--text)}
.depth-btn.active{border-color:var(--green);background:var(--green-d);color:var(--green)}
.include-checks{display:flex;flex-direction:column;gap:5px;margin-top:4px}
.chk-opt{display:flex;align-items:center;gap:7px;font-size:11px;color:var(--text2);cursor:pointer}
.chk-opt input{width:13px;height:13px;accent-color:var(--green)}

/* RUN BTN */
.run-btn{width:100%;padding:12px;border-radius:var(--r);border:none;background:var(--green);color:#000;font-family:var(--sans);font-size:13px;font-weight:800;cursor:pointer;transition:all .15s;display:flex;align-items:center;justify-content:center;gap:8px;margin-top:4px}
.run-btn:hover{filter:brightness(1.1);box-shadow:0 0 20px var(--green-g)}
.run-btn:disabled{opacity:.4;cursor:not-allowed}

/* IDLE */
.idle-card{border:1px dashed var(--border2)}
.idle-wrap{padding:32px 16px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:9px}
.idle-emoji{font-size:42px}.idle-wrap h3{font-size:16px;font-weight:700}.idle-wrap p{font-size:12px;color:var(--text2);line-height:1.7;max-width:300px}
.idle-pills{display:flex;flex-wrap:wrap;justify-content:center;gap:6px;margin-top:5px}
.idle-pills span{font-size:10px;padding:3px 10px;border-radius:99px;background:var(--bg3);border:1px solid var(--border);color:var(--text2)}

/* PROGRESS */
.prog-header{display:flex;align-items:center;gap:9px;margin-bottom:11px}
.pulse{width:9px;height:9px;border-radius:50%;background:var(--green);box-shadow:0 0 9px var(--green-g);animation:pulse 1s infinite;flex-shrink:0}
@keyframes pulse{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.35);opacity:.7}}
#prog-label{font-size:12px;font-weight:600;color:var(--text)}
.prog-track{height:4px;background:var(--bg4);border-radius:99px;margin-bottom:11px;overflow:hidden}
.prog-fill{height:100%;background:var(--green);border-radius:99px;width:0%;transition:width .5s ease;box-shadow:0 0 7px var(--green-g)}
.prog-step{display:flex;align-items:center;gap:8px;font-size:11px;font-family:var(--mono);color:var(--text3);padding:3px 0;transition:color .2s}
.prog-step.done{color:var(--green)}.prog-step.active{color:var(--text)}
.prog-dot{width:13px;height:13px;border-radius:50%;border:1.5px solid currentColor;display:flex;align-items:center;justify-content:center;font-size:8px;flex-shrink:0}

/* RESULTS */
.vt-btn{padding:4px 10px;border-radius:6px;border:1px solid var(--border2);background:none;color:var(--text2);font-family:var(--sans);font-size:10px;font-weight:600;cursor:pointer;transition:all .15s}
.vt-btn:hover{background:var(--bg3);color:var(--text)}
.vt-btn.active{background:var(--green-d);border-color:var(--green);color:var(--green)}
.result-chips{display:flex;gap:5px;flex-wrap:wrap;margin-bottom:9px}
.result-body{font-size:11.5px;line-height:1.9;color:var(--text);white-space:pre-wrap;word-break:break-word;max-height:460px;overflow-y:auto;font-family:var(--mono);padding:2px}
.result-body::-webkit-scrollbar{width:4px}.result-body::-webkit-scrollbar-thumb{background:var(--border2);border-radius:3px}
.export-bar{display:flex;gap:5px;flex-wrap:wrap;margin-top:12px;padding-top:12px;border-top:1px solid var(--border)}

/* TABLE VIEW */
.result-table-wrap{overflow-x:auto;overflow-y:auto;border-radius:var(--rs);border:1px solid var(--border);max-height:520px;width:100%;display:block}
.result-table{width:max-content;min-width:100%;border-collapse:collapse;font-size:11px;font-family:var(--mono)}
.result-table th{background:var(--bg4);color:var(--green);font-weight:700;padding:6px 8px;text-align:left;border-bottom:1px solid var(--border);white-space:nowrap;font-size:9.5px;text-transform:uppercase;letter-spacing:.4px;position:sticky;top:0;z-index:2}
.result-table td{padding:6px 8px;border-bottom:1px solid var(--border);vertical-align:top;color:var(--text2);line-height:1.5;max-width:220px;word-break:break-word}
.result-table tr:hover td{background:var(--bg3)}
.sev-critical,.sev-high{background:var(--red-d);color:var(--red);padding:2px 7px;border-radius:99px;font-weight:700;font-size:9px;white-space:nowrap;display:inline-block}
.sev-medium{background:var(--amber-d);color:var(--amber);padding:2px 7px;border-radius:99px;font-weight:700;font-size:9px;white-space:nowrap;display:inline-block}
.sev-low{background:var(--green-d);color:var(--green);padding:2px 7px;border-radius:99px;font-weight:700;font-size:9px;white-space:nowrap;display:inline-block}
.tc-checkbox{width:14px;height:14px;accent-color:var(--green);cursor:pointer}

/* TOOLS LAYOUT */
.tools-layout{display:grid;grid-template-columns:320px minmax(0,1fr);gap:16px;align-items:start;min-width:0}
.tools-layout>*{min-width:0}


/* TRACKER */
.tracker-summary-bar{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;margin-bottom:12px}
.tsb-card{background:var(--bg2);border:1px solid var(--border);border-radius:var(--rs);padding:10px;text-align:center}
.tsb-num{font-size:20px;font-weight:800;color:var(--text)}.tsb-lbl{font-size:10px;color:var(--text3);margin-top:2px}
.tc-row{background:var(--bg2);border:1px solid var(--border);border-radius:var(--rs);padding:12px 14px;margin-bottom:8px;transition:border-color .2s}
.tc-row.pass{border-left:3px solid var(--green)}
.tc-row.fail{border-left:3px solid var(--red)}
.tc-row.blocked{border-left:3px solid var(--amber)}
.tc-row-header{display:flex;align-items:center;gap:10px;margin-bottom:8px}
.tc-row-id{font-size:11px;font-weight:800;color:var(--green);font-family:var(--mono);flex-shrink:0}
.tc-row-title{font-size:12px;font-weight:700;color:var(--text);flex:1}
.tc-row-badge{font-size:9px;font-weight:700;padding:2px 7px;border-radius:99px;font-family:var(--mono)}
.tc-row-steps{font-size:11px;color:var(--text2);font-family:var(--mono);line-height:1.7;margin-bottom:10px;white-space:pre-line}
.tc-actions{display:flex;gap:6px;flex-wrap:wrap}
.tc-act-btn{padding:5px 14px;border-radius:6px;border:1px solid var(--border2);background:none;font-family:var(--sans);font-size:11px;font-weight:700;cursor:pointer;transition:all .15s}
.tc-act-pass{color:var(--green);border-color:rgba(0,229,160,.3)}.tc-act-pass:hover{background:var(--green-d)}
.tc-act-fail{color:var(--red);border-color:rgba(255,77,106,.3)}.tc-act-fail:hover{background:var(--red-d)}
.tc-act-block{color:var(--amber);border-color:rgba(255,184,77,.3)}.tc-act-block:hover{background:var(--amber-d)}
.tc-notes-input{width:100%;margin-top:6px;font-size:11px;padding:6px 9px;background:var(--bg3);border:1px solid var(--border);border-radius:6px;color:var(--text);font-family:var(--mono)}
.tc-done-badge{display:inline-flex;align-items:center;gap:5px;font-size:10px;font-weight:700;padding:3px 10px;border-radius:99px}
.tc-done-pass{background:var(--green-d);color:var(--green)}.tc-done-fail{background:var(--red-d);color:var(--red)}.tc-done-block{background:var(--amber-d);color:var(--amber)}

/* COMPARE */
.compare-layout{display:grid;grid-template-columns:1fr auto 1fr;gap:14px;align-items:start;margin-bottom:12px}
.compare-vs{font-size:16px;font-weight:800;color:var(--text3);align-self:center;text-align:center;padding:0 8px}
.compare-preview{background:var(--bg3);border-radius:var(--rs);padding:10px;margin-top:10px;font-size:11px;font-family:var(--mono);color:var(--text2)}
.diff-added{color:var(--green)}.diff-removed{color:var(--red)}.diff-changed{color:var(--amber)}

/* TEAM */
.member-row{display:flex;align-items:flex-start;gap:10px;padding:10px 12px;border:1px solid var(--border);border-radius:var(--rs);margin-bottom:8px;background:var(--bg2)}
.member-avatar{width:32px;height:32px;border-radius:50%;background:var(--green-d);border:1px solid rgba(0,229,160,.2);display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;color:var(--green);flex-shrink:0;font-family:var(--mono)}
.member-name{font-size:12px;font-weight:700;margin-bottom:4px}
.member-tcs{display:flex;flex-wrap:wrap;gap:4px}
.member-tc-tag{font-size:9px;font-family:var(--mono);padding:2px 6px;border-radius:4px;background:var(--blue-d);color:var(--blue)}

/* FRAMEWORK GRID */
.framework-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:6px;margin-top:4px}
.framework-btn{display:flex;align-items:center;gap:7px;padding:8px 10px;border-radius:var(--rs);border:1px solid var(--border2);background:var(--bg3);color:var(--text2);font-family:var(--sans);font-size:11px;font-weight:600;cursor:pointer;transition:all .15s}
.framework-btn:hover{border-color:var(--border2);color:var(--text)}
.framework-btn.active{border-color:var(--green);background:var(--green-d);color:var(--green)}
.framework-btn span:first-child{font-size:14px}

/* EXPLORATORY TIMER */
.exp-timer{font-size:18px;font-weight:800;font-family:var(--mono);color:var(--amber);padding:4px 10px;background:var(--amber-d);border-radius:var(--rs);min-width:70px;text-align:center}

/* REPORTS */
.reports-toolbar{display:flex;gap:8px;margin-bottom:14px}
.reports-toolbar input{flex:1}
.reports-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:10px}
.rcard{background:var(--bg2);border:1px solid var(--border);border-radius:var(--r);padding:14px;cursor:pointer;transition:all .15s}
.rcard:hover{border-color:var(--border2);transform:translateY(-2px)}
.rcard-url{font-size:12px;font-weight:700;color:var(--text);margin-bottom:3px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rcard-time{font-size:10px;font-family:var(--mono);color:var(--text3);margin-bottom:7px}
.rcard-tags{display:flex;gap:4px;flex-wrap:wrap;margin-bottom:8px}
.rcard-actions{display:flex;gap:4px;flex-wrap:wrap}

/* SETUP */
.setup-layout{display:grid;grid-template-columns:1fr 1fr;gap:12px;align-items:start}
.steps-list{display:flex;flex-direction:column}
.setup-step{display:flex;gap:11px;padding:11px 0;border-bottom:1px solid var(--border)}
.setup-step:last-child{border-bottom:none}
.step-num{width:24px;height:24px;border-radius:50%;background:var(--green);color:#000;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:800;flex-shrink:0;margin-top:1px}
.step-title{font-size:12px;font-weight:700;color:var(--text);margin-bottom:2px}.step-desc{font-size:11px;color:var(--text2);line-height:1.6}
.key-row{display:flex;gap:6px}.key-row input{flex:1}
.limits-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;margin-top:3px}
.limit-item{background:var(--bg3);border-radius:var(--rs);padding:9px;text-align:center}
.limit-num{font-size:20px;font-weight:800;color:var(--green)}.limit-lbl{font-size:10px;color:var(--text3);margin-top:1px}
.free-limits-card{border-color:rgba(0,229,160,.2)}

/* MISC */
.hidden{display:none!important}
.toast{position:fixed;bottom:20px;right:20px;z-index:9999;background:var(--bg2);border:1px solid var(--border2);border-radius:var(--rs);padding:10px 16px;font-size:12px;font-weight:600;color:var(--text);box-shadow:0 8px 30px rgba(0,0,0,.4);animation:su .2s ease}
.toast.success{border-color:var(--green);color:var(--green)}.toast.error{border-color:var(--red);color:var(--red)}
@keyframes su{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.error-box{background:var(--red-d);border:1px solid var(--red);border-radius:var(--rs);padding:10px 13px;font-size:11px;font-family:var(--mono);color:var(--text);text-align:left;max-width:400px;line-height:1.7;margin-top:7px;white-space:pre-wrap}
@media print{.sidebar,.config-col,.export-bar,.view-header button,.run-btn,.btn-ghost,.btn-primary,.mode-tabs,.vt-btn,.tools-input{display:none!important}.main{margin-left:0}.result-body{max-height:none}.runner-layout,.tools-layout{grid-template-columns:1fr}body{background:white;color:black}.card{background:white;border-color:#ddd}}
@media(max-width:1100px){.stats-grid{grid-template-columns:repeat(2,1fr)}.dash-grid{grid-template-columns:1fr}.runner-layout,.tools-layout{grid-template-columns:1fr}.setup-layout{grid-template-columns:1fr}.compare-layout{grid-template-columns:1fr;}.compare-vs{display:none}}
@media(max-width:700px){.sidebar{transform:translateX(-100%)}.main{margin-left:0;padding:14px}}
::-webkit-scrollbar{width:5px;height:5px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:var(--border2);border-radius:3px}

/* ═══ SCRIPT DOCTOR ═════════════════════════════════════ */
.doctor-how-banner{display:flex;align-items:center;justify-content:center;gap:0;margin-bottom:18px;background:linear-gradient(135deg,rgba(167,139,250,.07),rgba(0,229,160,.04));border:1px solid rgba(167,139,250,.2);border-radius:var(--r);padding:14px;flex-wrap:wrap;gap:4px}
.dhb-step{display:flex;align-items:center;gap:8px;padding:6px 14px}
.dhb-num{width:22px;height:22px;border-radius:50%;background:var(--purple);color:#000;font-size:11px;font-weight:800;display:flex;align-items:center;justify-content:center;flex-shrink:0;font-family:var(--mono)}
.dhb-txt{font-size:12px;font-weight:600;color:var(--text2)}
.dhb-arr{color:var(--text3);font-size:16px;margin:0 2px}
.doctor-common-errors{margin:10px 0 4px}
.dce-label{font-size:10px;font-weight:700;color:var(--text3);text-transform:uppercase;letter-spacing:.6px;margin-bottom:6px}
.dce-btn{padding:4px 10px;border-radius:6px;background:var(--bg3);border:1px solid var(--border2);color:var(--amber);font-family:var(--mono);font-size:10px;font-weight:700;cursor:pointer;margin:2px;transition:all .15s}
.dce-btn:hover{background:var(--amber-d);border-color:var(--amber)}
.doctor-section{background:var(--bg3);border:1px solid var(--border);border-radius:var(--rs);padding:12px 14px;margin-bottom:10px}
.ds-header{display:flex;align-items:center;justify-content:space-between;font-size:12px;font-weight:700;color:var(--text);margin-bottom:8px}
.ds-icon{margin-right:6px;font-size:14px}
.ds-body{font-size:12px;color:var(--text2);line-height:1.75}
.fix-item{display:flex;align-items:flex-start;gap:7px;padding:4px 0;font-size:11.5px;color:var(--text)}
.fix-item::before{content:"✓";color:var(--green);font-weight:800;flex-shrink:0;margin-top:1px}
.doctor-pulse-ring{width:56px;height:56px;border-radius:50%;border:3px solid var(--purple);border-top-color:transparent;animation:spin .9s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* ═══ RUN PANEL ═════════════════════════════════════════ */
.run-panel-inner{background:linear-gradient(135deg,rgba(0,229,160,.06),rgba(77,159,255,.03));border:1px solid rgba(0,229,160,.2);border-radius:var(--r);padding:16px;margin-top:10px}
.run-panel-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px;flex-wrap:wrap;gap:6px}
.run-panel-title{font-size:13px;font-weight:800;color:var(--green)}
.run-panel-fw{font-size:10px;font-family:var(--mono);color:var(--text3);background:var(--bg3);padding:3px 9px;border-radius:99px;border:1px solid var(--border2)}
.run-steps{display:flex;flex-direction:column;gap:10px}
.run-step{display:flex;gap:12px;align-items:flex-start}
.run-step-num{width:24px;height:24px;border-radius:50%;background:var(--green);color:#000;font-size:11px;font-weight:800;display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-top:1px;font-family:var(--mono)}
.run-step-body{flex:1}
.run-step-label{font-size:11px;font-weight:700;color:var(--text2);margin-bottom:5px}
.run-cmd-box{display:flex;align-items:center;gap:8px;background:var(--bg4);border:1px solid var(--border2);border-radius:var(--rs);padding:8px 11px;font-family:var(--mono)}
.run-cmd-box code{font-size:11px;color:var(--green);flex:1;word-break:break-all}
.run-copy-btn{padding:4px 10px;border-radius:5px;background:var(--green);color:#000;border:none;font-size:10px;font-weight:800;cursor:pointer;white-space:nowrap;flex-shrink:0;transition:all .15s}
.run-copy-btn:hover{filter:brightness(1.1)}
.run-action-btn{font-size:11px!important;padding:6px 12px!important}

/* ═══ SMART DISCOVERY BANNER ════════════════════════════ */
.smart-discovery-banner{background:linear-gradient(135deg,rgba(0,229,160,.08),rgba(77,159,255,.05));border:1px solid rgba(0,229,160,.25);border-radius:var(--r);padding:13px 14px}
.sdb-top{display:flex;align-items:flex-start;gap:10px;margin-bottom:10px}
.sdb-icon{font-size:20px;flex-shrink:0;margin-top:1px}
.sdb-title{font-size:12px;font-weight:800;color:var(--green);margin-bottom:2px}
.sdb-sub{font-size:10.5px;color:var(--text2);line-height:1.55}
.sdb-pills{display:flex;flex-wrap:wrap;gap:5px}
.sdb-pills span{font-size:9.5px;font-weight:700;font-family:var(--mono);padding:2px 7px;border-radius:99px;background:var(--bg3);border:1px solid var(--border2);color:var(--text2)}
/* Toggle switch */
.sdb-toggle{position:relative;flex-shrink:0;margin-left:auto;margin-top:2px}
.sdb-toggle input{opacity:0;width:0;height:0;position:absolute}
.sdb-knob{display:block;width:38px;height:21px;background:var(--bg4);border:1px solid var(--border2);border-radius:99px;cursor:pointer;transition:all .2s;position:relative}
.sdb-knob::after{content:'';position:absolute;top:3px;left:3px;width:13px;height:13px;border-radius:50%;background:var(--text3);transition:all .2s}
.sdb-toggle input:checked+.sdb-knob{background:var(--green);border-color:var(--green)}
.sdb-toggle input:checked+.sdb-knob::after{left:20px;background:#000}

/* ═══ PROFESSIONAL REPORT CARDS ═══════════════════════ */
.result-cards{max-height:640px;overflow-y:auto;padding-right:2px}
.result-cards::-webkit-scrollbar{width:5px}.result-cards::-webkit-scrollbar-thumb{background:var(--border2);border-radius:3px}

/* Stats header row */
.rc-header{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-bottom:16px}
.rc-stat{border-radius:10px;padding:12px 10px;text-align:center;border:1px solid var(--border)}
.rc-stat-n{font-size:26px;font-weight:800;letter-spacing:-1px;line-height:1;font-family:var(--mono)}
.rc-stat-l{font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:.6px;margin-top:4px;color:var(--text3)}
.rc-stat-blue{background:var(--blue-d);border-color:rgba(77,159,255,.2)}.rc-stat-blue .rc-stat-n{color:var(--blue)}
.rc-stat-red{background:var(--red-d);border-color:rgba(255,77,106,.2)}.rc-stat-red .rc-stat-n{color:var(--red)}
.rc-stat-green{background:var(--green-d);border-color:rgba(0,229,160,.2)}.rc-stat-green .rc-stat-n{color:var(--green)}
.rc-stat-amber{background:var(--amber-d);border-color:rgba(255,184,77,.2)}.rc-stat-amber .rc-stat-n{color:var(--amber)}
.rc-stat-critical{background:rgba(255,77,106,.15);border-color:rgba(255,77,106,.3)}.rc-stat-critical .rc-stat-n{color:var(--red)}

/* Module group block */
.rc-module-block{margin-bottom:18px}
.rc-module-label{display:flex;align-items:center;justify-content:space-between;padding:7px 12px;background:var(--bg3);border:1px solid var(--border);border-radius:8px 8px 0 0;border-bottom:none}
.rc-mod-name{font-size:11px;font-weight:800;color:var(--text);letter-spacing:.2px}
.rc-mod-count{font-size:10px;font-family:var(--mono);color:var(--text3)}
.rc-sev-label-critical{color:var(--red)}.rc-sev-label-high{color:var(--amber)}.rc-sev-label-medium{color:var(--blue)}.rc-sev-label-low{color:var(--green)}

/* TC cards grid */
.rc-cards-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:8px;padding:10px;background:var(--bg3);border:1px solid var(--border);border-radius:0 0 8px 8px}

/* Individual TC card */
.rc-card{background:var(--bg2);border:1px solid var(--border);border-radius:10px;padding:14px;display:flex;flex-direction:column;gap:9px;transition:all .18s;position:relative;overflow:hidden}
.rc-card::before{content:'';position:absolute;left:0;top:0;bottom:0;width:3px;border-radius:3px 0 0 3px}
.rc-card-tc[data-priority="critical"]::before{background:var(--red)}
.rc-card-tc[data-priority="high"]::before{background:var(--amber)}
.rc-card-tc[data-priority="medium"]::before{background:var(--blue)}
.rc-card-tc[data-priority="low"]::before{background:var(--green)}
.rc-card:hover{border-color:var(--border2);transform:translateY(-1px);box-shadow:0 4px 16px rgba(0,0,0,.3)}
.rc-checked{opacity:.6;background:rgba(0,229,160,.04);border-color:rgba(0,229,160,.2)}
.rc-checked::after{content:'✓ DONE';position:absolute;top:8px;right:10px;font-size:8px;font-weight:800;color:var(--green);background:var(--green-d);padding:2px 6px;border-radius:99px;font-family:var(--mono)}

/* Bug card variants */
.rc-card-bug.rc-bug-critical{border-color:rgba(255,77,106,.25);background:rgba(255,77,106,.03)}
.rc-card-bug.rc-card-bug.rc-bug-high{border-color:rgba(255,184,77,.2);background:rgba(255,184,77,.02)}
.rc-card-bug.rc-bug-critical::before{background:var(--red)}
.rc-card-bug.rc-bug-high::before{background:var(--amber)}
.rc-card-bug.rc-bug-medium::before{background:var(--blue)}
.rc-card-bug.rc-bug-low::before{background:var(--green)}

/* Card top row */
.rc-card-top{display:flex;align-items:center;justify-content:space-between;gap:6px}
.rc-card-id{font-size:10px;font-weight:800;font-family:var(--mono);color:var(--green);background:var(--green-d);padding:2px 8px;border-radius:99px;letter-spacing:.3px}
.rc-bug-id{color:var(--red);background:var(--red-d)}
.rc-mod-chip{font-size:9px;font-weight:700;font-family:var(--mono);color:var(--blue);background:var(--blue-d);padding:2px 7px;border-radius:99px}

/* Severity pills */
.rc-card-sev{font-size:9px;font-weight:800;padding:2px 8px;border-radius:99px;font-family:var(--mono);letter-spacing:.3px}
.rc-sev-critical{background:rgba(255,77,106,.15);color:var(--red);border:1px solid rgba(255,77,106,.25)}
.rc-sev-high{background:rgba(255,184,77,.15);color:var(--amber);border:1px solid rgba(255,184,77,.25)}
.rc-sev-medium{background:rgba(77,159,255,.12);color:var(--blue);border:1px solid rgba(77,159,255,.2)}
.rc-sev-low{background:var(--green-d);color:var(--green);border:1px solid rgba(0,229,160,.2)}

/* ── Test case Type (Positive/Negative) + Location — card & table use ── */
.rc-tc-type{font-size:9px;font-weight:800;padding:2px 8px;border-radius:99px;font-family:var(--mono);letter-spacing:.3px}
.rc-tc-type-pos{background:var(--green-d);color:var(--green);border:1px solid rgba(47,230,201,.25)}
.rc-tc-type-neg{background:var(--red-d);color:var(--red);border:1px solid rgba(251,91,91,.25)}
.rc-card-location{font-size:11px;color:var(--text2);margin:4px 0 8px;padding:6px 10px;background:var(--bg3);border-radius:6px;border-left:2px solid var(--green)}
.tc-type-badge{font-size:9px;font-weight:800;padding:2px 7px;border-radius:99px;font-family:var(--mono);white-space:nowrap}
.tc-type-pos{background:var(--green-d);color:var(--green)}
.tc-type-neg{background:var(--red-d);color:var(--red)}

/* Card title */
.rc-card-title{font-size:12.5px;font-weight:700;color:var(--text);line-height:1.4}

/* Card sections */
.rc-card-section{display:flex;flex-direction:column;gap:4px}
.rc-section-label{font-size:9px;font-weight:800;text-transform:uppercase;letter-spacing:.8px;color:var(--text3);font-family:var(--mono)}
.rc-steps{margin:0;padding-left:16px;display:flex;flex-direction:column;gap:3px}
.rc-steps li{font-size:11px;color:var(--text2);line-height:1.5}
.rc-expected{font-size:11px;color:var(--green);line-height:1.5;padding:5px 8px;background:var(--green-d);border-radius:5px;border-left:2px solid var(--green)}
.rc-watchfor{font-size:11px;color:var(--amber);line-height:1.5;padding:5px 8px;background:var(--amber-d);border-radius:5px;border-left:2px solid var(--amber)}
.rc-fix-text{font-size:11px;color:var(--blue);line-height:1.5;padding:5px 8px;background:var(--blue-d);border-radius:5px;border-left:2px solid var(--blue)}

/* Bug diff columns */
.rc-bug-diff{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.rc-diff-col{padding:6px 8px;border-radius:5px;display:flex;flex-direction:column;gap:3px}
.rc-diff-expected{background:var(--green-d);border:1px solid rgba(0,229,160,.15)}
.rc-diff-actual{background:var(--red-d);border:1px solid rgba(255,77,106,.15)}
.rc-diff-label{font-size:8.5px;font-weight:800;text-transform:uppercase;letter-spacing:.5px;font-family:var(--mono)}
.rc-diff-expected .rc-diff-label{color:var(--green)}
.rc-diff-actual .rc-diff-label{color:var(--red)}
.rc-diff-text{font-size:10.5px;line-height:1.5;color:var(--text2)}

/* Card footer */
.rc-card-footer{margin-top:auto;padding-top:8px;border-top:1px solid var(--border);display:flex;align-items:center;gap:8px}
.rc-check-wrap{display:flex;align-items:center;gap:5px;cursor:pointer;font-size:10px;color:var(--text3);font-weight:600;transition:color .15s}
.rc-check-wrap:hover{color:var(--green)}
.rc-check-wrap input{accent-color:var(--green);cursor:pointer}
.rc-status-sel{font-size:10px;padding:3px 7px;background:var(--bg3);color:var(--text2);border:1px solid var(--border2);border-radius:5px;font-family:var(--sans);cursor:pointer}
.rc-status-sel:focus{outline:none;border-color:var(--green)}

/* Checklist items */
.rc-checklist-list{border:1px solid var(--border);border-top:none;border-radius:0 0 8px 8px;overflow:hidden;background:var(--bg2)}
.rc-checklist-item{display:flex;align-items:flex-start;gap:10px;padding:11px 14px;border-bottom:1px solid var(--border);transition:background .15s}
.rc-checklist-item:last-child{border-bottom:none}
.rc-checklist-item:hover{background:var(--bg3)}
.rc-checklist-item[data-status="pass"]{background:rgba(0,229,160,.05)}
.rc-checklist-item[data-status="fail"]{background:rgba(255,77,106,.05)}
.rc-chk-left{display:flex;flex-direction:column;gap:3px;flex-shrink:0;padding-top:1px}
.rc-chk-btn{width:22px;height:22px;border-radius:5px;border:1px solid var(--border2);background:var(--bg3);cursor:pointer;font-size:10px;font-weight:800;display:flex;align-items:center;justify-content:center;transition:all .12s;color:var(--text3)}
.rc-chk-pass.rc-chk-active{background:var(--green);border-color:var(--green);color:#000}
.rc-chk-fail.rc-chk-active{background:var(--red);border-color:var(--red);color:#fff}
.rc-chk-block.rc-chk-active{background:var(--amber);border-color:var(--amber);color:#000}
.rc-chk-btn:hover{border-color:var(--border2);background:var(--bg4)}
.rc-chk-body{flex:1;display:flex;flex-direction:column;gap:3px}
.rc-chk-text{font-size:11.5px;color:var(--text);line-height:1.5;font-weight:500}
.rc-chk-expected{font-size:10px;color:var(--text3);line-height:1.4}
.rc-chk-status{flex-shrink:0;font-size:9px;font-weight:800;font-family:var(--mono)}
.rc-inline-pass{color:var(--green);background:var(--green-d);padding:2px 7px;border-radius:99px}
.rc-inline-fail{color:var(--red);background:var(--red-d);padding:2px 7px;border-radius:99px}
.rc-inline-block{color:var(--amber);background:var(--amber-d);padding:2px 7px;border-radius:99px}

/* Full report section cards */
.rc-section-card{background:var(--bg2);border:1px solid var(--border);border-radius:10px;padding:14px 16px;margin-bottom:8px}
.rc-section-title{font-size:12px;font-weight:800;color:var(--green);margin-bottom:8px;padding-bottom:7px;border-bottom:1px solid var(--border);letter-spacing:.2px}
.rc-section-body{font-size:11.5px;color:var(--text2);line-height:1.8;display:flex;flex-direction:column;gap:2px}
.rc-bullet{padding-left:12px;position:relative}.rc-bullet::before{content:'▸';position:absolute;left:0;color:var(--green)}
.rc-num{padding-left:4px;color:var(--text)}
.rc-inline-tc{font-family:var(--mono);font-size:10.5px;color:var(--green);background:var(--green-d);padding:2px 7px;border-radius:4px;display:inline-block;margin:1px 0}
.rc-table-row{display:flex;gap:4px;flex-wrap:wrap;margin:1px 0}
.rc-table-cell{font-size:10px;font-family:var(--mono);background:var(--bg3);border:1px solid var(--border);padding:2px 6px;border-radius:3px;color:var(--text2)}
.rc-fulltext{font-size:11px;font-family:var(--mono);white-space:pre-wrap;color:var(--text2);line-height:1.8}
.rc-empty{text-align:center;padding:32px;color:var(--text3);font-size:12px}
.rc-line:empty{display:none}

/* ═══ AI CHAT FAB & IFRAME ═════════════════════════════ */
.ai-chat-fab{position:fixed;bottom:25px;right:25px;width:56px;height:56px;border-radius:50%;background:linear-gradient(135deg,var(--green),var(--purple));color:#fff;border:1.5px solid rgba(255,255,255,0.15);cursor:pointer;z-index:10001;display:flex;align-items:center;justify-content:center;box-shadow:0 8px 32px rgba(47,230,201,0.3);transition:all .3s cubic-bezier(.4,0,.2,1);outline:none;overflow:hidden;backdrop-filter:blur(4px)}
.ai-chat-fab:hover{transform:scale(1.08) translateY(-3px);box-shadow:0 12px 40px rgba(31,81,255,0.4);border-color:rgba(255,255,255,0.3)}
.ai-chat-fab:active{transform:scale(.95)}
.ai-chat-fab-glow{position:absolute;top:-50%;left:-50%;width:200%;height:200%;background:radial-gradient(circle,rgba(255,255,255,0.3) 0%,transparent 70%);opacity:0;transition:opacity .3s}
.ai-chat-fab:hover .ai-chat-fab-glow{opacity:1;animation:pulse-glow 2s infinite}
@keyframes pulse-glow{0%{transform:scale(0.5);opacity:.3}50%{transform:scale(1);opacity:.1}100%{transform:scale(0.5);opacity:.3}}

.ai-chat-container{position:fixed;bottom:95px;right:25px;width:380px;height:500px;background:var(--bg2);border:1px solid var(--border);border-radius:20px;z-index:10002;overflow:hidden;box-shadow:0 24px 80px rgba(0,0,0,0.6);transform:scale(0.85) translateY(40px);opacity:0;pointer-events:none;transition:all .4s cubic-bezier(.4,0,.2,1);transform-origin:bottom right}
.ai-chat-container.open{transform:scale(1) translateY(0);opacity:1;pointer-events:auto}
.ai-chat-container iframe{width:100%;height:100%;border:none;border-radius:20px}
.ai-chat-backdrop{position:fixed;inset:0;background:rgba(0,0,0,0);backdrop-filter:blur(0px);z-index:10000;pointer-events:none;transition:all .4s ease;display:none}
.ai-chat-container.open ~ .ai-chat-backdrop{display:block;background:rgba(0,0,0,0.4);backdrop-filter:blur(3px);pointer-events:auto}

@media(max-width:480px) {
  .ai-chat-container{width:calc(100% - 40px);bottom:85px;left:20px;right:20px;height:70vh;transform-origin:bottom}
  .ai-chat-fab{bottom:20px;right:20px;width:50px;height:50px}
}

/* ═══ TEST CASE EDITOR ════════════════════════════════ */
.tc-edit-btn{background:none;border:1px solid var(--border2);color:var(--text3);border-radius:5px;padding:2px 8px;font-size:10px;cursor:pointer;transition:all .15s;margin-left:auto}
.tc-edit-btn:hover{color:var(--purple);border-color:var(--purple);background:var(--purple-d)}
.tc-edit-textarea{width:100%;background:var(--bg3);border:1px solid var(--border);border-radius:6px;padding:8px 10px;color:var(--text);font-family:var(--mono);font-size:11px;resize:vertical;line-height:1.6;outline:none;box-sizing:border-box}
.tc-edit-textarea:focus{border-color:var(--purple)}
.tc-edit-actions{display:flex;gap:6px;margin-top:8px}
.tc-save-btn{padding:5px 14px;border-radius:6px;border:none;background:var(--green);color:#000;font-size:11px;font-weight:700;cursor:pointer;font-family:var(--sans)}
.tc-save-btn:hover{filter:brightness(1.1)}
.tc-cancel-btn{padding:5px 14px;border-radius:6px;border:1px solid var(--border2);background:none;color:var(--text2);font-size:11px;font-weight:600;cursor:pointer;font-family:var(--sans)}
.tc-edited-badge{font-size:8px;font-weight:800;color:var(--purple);background:var(--purple-d);padding:2px 6px;border-radius:99px;font-family:var(--mono)}

/* ═══ RISK SCORE ══════════════════════════════════════ */
.risk-panel{display:flex;align-items:center;gap:20px;padding:16px;background:var(--bg2);border:1px solid var(--border);border-radius:var(--r);margin-bottom:14px;flex-wrap:wrap}
.risk-gauge-wrap{position:relative;width:90px;height:90px;flex-shrink:0}
.risk-gauge{width:90px;height:90px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-direction:column}
.risk-gauge-num{font-size:24px;font-weight:800;font-family:var(--mono);letter-spacing:-1px}
.risk-gauge-lbl{font-size:8px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:var(--text3)}
.risk-bars{flex:1;min-width:180px;display:flex;flex-direction:column;gap:8px}
.risk-bar-row{display:flex;align-items:center;gap:10px}
.risk-bar-label{font-size:10px;font-weight:700;color:var(--text2);width:65px;flex-shrink:0;text-transform:uppercase;letter-spacing:.3px}
.risk-bar-track{flex:1;height:6px;background:var(--bg4);border-radius:99px;overflow:hidden}
.risk-bar-fill{height:100%;border-radius:99px;transition:width .6s ease}
.risk-bar-val{font-size:10px;font-weight:800;font-family:var(--mono);width:30px;text-align:right}

/* ═══ PHASE 2 — GROUPED REPORTS ═══════════════════════ */
.reports-grouped{display:flex;flex-direction:column;gap:24px;width:100%}
.report-group{background:var(--bg2);border:1px solid var(--border);border-radius:var(--r);overflow:hidden}
.report-group-header{padding:12px 16px;background:var(--bg3);border-bottom:1px solid var(--border);display:flex;justify-content:space-between;align-items:center}
.report-group-url{font-size:13px;font-weight:800;color:var(--text);font-family:var(--mono)}
.report-group-count{font-size:10px;font-weight:700;color:var(--text3);background:var(--bg4);padding:2px 8px;border-radius:99px}
.report-group-list{padding:12px;display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:12px}

.rcard{background:var(--bg);padding:14px;border-radius:8px;border:1px solid var(--border);cursor:pointer;transition:all .2s;position:relative}
.rcard:hover{border-color:var(--purple);transform:translateY(-2px);box-shadow:0 10px 20px rgba(0,0,0,.2)}
.rcard-time{font-size:11px;color:var(--text3);margin-bottom:8px;display:flex;align-items:center}
.rcard-tags{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:12px}
.rcard-actions{display:flex;gap:4px;opacity:0.3;transition:opacity .2s}
.rcard:hover .rcard-actions{opacity:1}

/* AI SIMULATION BADGES */
.ai-predicted-mark{font-size:9px;color:var(--purple);font-weight:800;display:flex;align-items:center;gap:4px;margin-top:4px}

/* ═══ PHASE 3 — QA HEALTH & MAGIC BOX ═════════════════ */
.qa-health-badge{font-size:24px;font-weight:900;font-family:var(--mono);padding:4px 16px;border-radius:12px;background:var(--bg3);border:1px solid var(--border);color:var(--green);box-shadow:0 4px 12px rgba(0,0,0,0.1)}
.qa-health-badge.low{color:var(--red);border-color:var(--red)}
.qa-health-badge.med{color:var(--amber);border-color:var(--amber)}

#magic-input:focus{border-color:var(--purple);box-shadow:0 0 15px rgba(167,139,250,0.3);background:var(--bg2)}
#magic-btn:hover{background:var(--purple);color:#fff;transform:translateY(-1px);box-shadow:0 5px 15px rgba(167,139,250,0.4)}
#magic-btn:active{transform:translateY(0)}

/* ═══ MODERN EXPORT BUTTONS ═══════════════════════════ */
.img-anno-tools .btn-ghost span, .result-actions .btn-ghost span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-right: 6px;
  font-size: 14px;
}

/* ═══ PHASE 4 — ANNOTATION & CHARTS ═══════════════════ */
.img-anno-tools .btn-ghost.active{background:var(--purple-d);border-color:var(--purple);color:#fff}
.charts-row{gap:12px;margin-bottom:8px}
.chart-wrap{min-height:140px;flex:1}

/* ═══ RESPONSIVE BREAKPOINTS ═════════════════════════════════════ */
@media (max-width: 1200px) {
  .runner-layout { grid-template-columns: 1fr; }
  .stats-grid { grid-template-columns: repeat(2, 1fr); }
  .dash-grid { grid-template-columns: 1fr; }
  .charts-row { grid-template-columns: repeat(2, 1fr); }
  .f15-grid, .features-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 768px) {
  .sidebar { 
    width: 230px !important; /* Force width on mobile */
    transform: translateX(-100%); 
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    box-shadow: 4px 0 25px rgba(0,0,0,0.5);
    z-index: 200; /* Above main and grid */
  }
  .sidebar.mobile-open { transform: translateX(0); }
  .main { margin-left: 0; padding: 16px 12px; width: 100vw; }
  .view-header { flex-direction: column; align-items: flex-start; gap: 16px; }
  .stats-grid { grid-template-columns: 1fr; }
  .charts-row { grid-template-columns: 1fr; }
  .templates-grid { grid-template-columns: 1fr; }
  .tools-layout { flex-direction: column; }
  .f15-grid, .features-grid, .stats-row { grid-template-columns: 1fr; }
  .sw { padding: 60px 4%; }
  .hero-h1 { font-size: 42px; line-height: 1.1; }
  .s-block:not(:last-child)::after { display: none; }
  .n-links { display: none; }
  #mobile-toggle { 
    display: flex !important; 
    position: fixed;
    bottom: 20px;
    left: 20px;
    z-index: 10001; 
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: var(--green);
    color: #fff;
    border: none;
    font-size: 24px;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 15px rgba(0,0,0,0.4);
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  }
  .sidebar.mobile-open ~ #mobile-toggle { 
    left: calc(var(--sw) + 20px);
    transform: rotate(90deg);
  }
  .sidebar-backdrop {
    display: block !important;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0);
    z-index: 150;
    pointer-events: none;
    transition: all 0.3s ease;
    backdrop-filter: blur(0px);
    -webkit-backdrop-filter: blur(0px);
  }
  .sidebar.mobile-open ~ .sidebar-backdrop {
    background: rgba(0,0,0,0.6) !important;
    pointer-events: auto !important;
    backdrop-filter: blur(4px) !important;
    -webkit-backdrop-filter: blur(4px) !important;
  }
}

/* ═══════════════════════════════════════════════════════════════
   SENIOR QA TOOLKIT — All 8 Feature Styles
   ════════════════════════════════════════════════════════════════ */

/* Senior badge on each view header */
.senior-badge {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1.5px;
  padding: 4px 12px;
  border-radius: 99px;
  background: linear-gradient(135deg, rgba(0,229,160,0.15), rgba(167,139,250,0.15));
  border: 1px solid rgba(0,229,160,0.3);
  color: var(--green, #00E5A0);
  text-transform: uppercase;
  align-self: flex-start;
  white-space: nowrap;
}

/* Nav section tags */
.nav-feat-tag {
  margin-left: auto;
  background: rgba(0,229,160,0.15);
  color: var(--green, #00E5A0);
  font-size: 9px;
  font-weight: 800;
  padding: 2px 6px;
  border-radius: 99px;
  border: 1px solid rgba(0,229,160,0.25);
  min-width: 18px;
  text-align: center;
}

/* Senior QA nav buttons have a subtle teal tint */
.senior-nav-btn {
  border-left: 2px solid transparent;
  transition: all 0.2s;
}
.senior-nav-btn:hover, .senior-nav-btn.active {
  border-left-color: var(--green, #00E5A0);
  background: rgba(0,229,160,0.07) !important;
}

/* ── DASHBOARD: Senior Feature Tracker ──────────────────────── */
.senior-feature-tracker {
  background: linear-gradient(135deg, rgba(0,229,160,0.04), rgba(167,139,250,0.04));
  border: 1px solid rgba(0,229,160,0.2);
  border-radius: var(--r, 14px);
  padding: 16px 20px;
  margin-bottom: 16px;
}
.sft-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
}
.sft-all-badge {
  font-size: 10px;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 99px;
  background: rgba(0,229,160,0.15);
  color: var(--green, #00E5A0);
  border: 1px solid rgba(0,229,160,0.3);
  letter-spacing: 0.5px;
}
.sft-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}
@media(max-width:900px) { .sft-grid { grid-template-columns: repeat(2,1fr); } }
@media(max-width:500px) { .sft-grid { grid-template-columns: 1fr; } }
.sft-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: var(--bg3, #161F33);
  border: 1px solid var(--border, rgba(255,255,255,0.08));
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.2s;
  font-size: 12px;
}
.sft-item:hover { border-color: rgba(0,229,160,0.3); transform: translateY(-1px); }
.sft-num { font-size: 10px; font-weight: 800; color: var(--text3); min-width: 14px; }
.sft-name { flex: 1; font-weight: 600; color: var(--text2); font-size: 11px; }
.sft-status { font-size: 14px; }

/* ── EMPTY STATE ─────────────────────────────────────────────── */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60px 24px;
  text-align: center;
  background: var(--bg2, #0D1426);
  border: 1px dashed var(--border, rgba(255,255,255,0.08));
  border-radius: var(--r, 14px);
  gap: 12px;
}
.es-icon { font-size: 48px; opacity: 0.6; }
.es-title { font-size: 16px; font-weight: 700; color: var(--text2); }
.es-sub { font-size: 13px; color: var(--text3); line-height: 1.6; max-width: 420px; }

/* ── GO / NO-GO VERDICT BANNER — styled as a literal inspection stamp ──
   This is the signature "stamp" motif's most meaningful home: a real QA
   sign-off literally looks like this in the physical world. */
.gng-verdict-banner {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--r);
  padding: 32px 28px;
  font-family: var(--mono);
  font-size: 26px;
  font-weight: 700;
  text-align: center;
  letter-spacing: 3px;
  text-transform: uppercase;
  background: var(--bg2);
  position: relative;
  overflow: hidden;
}
.gng-verdict-banner::before{
  content:'';position:absolute;inset:10px;border:3px double currentColor;border-radius:6px;opacity:0.5;
  transform:rotate(-2deg);
}
.gng-verdict-banner::after{
  content:'';position:absolute;inset:14px;border:1px solid currentColor;border-radius:4px;opacity:0.25;
  transform:rotate(-2deg);
}
.gng-verdict-banner.go { color: var(--green); }
.gng-verdict-banner.nogo { color: var(--red); }
.gng-verdict-banner.conditional { color: var(--amber); }
.gng-counts {
  display: grid;
  grid-template-columns: repeat(2,1fr);
  gap: 8px;
  margin-bottom: 12px;
}
.gng-count-item { display: flex; flex-direction: column; gap: 4px; }

/* ── PAIRWISE SAVINGS BANNER ─────────────────────────────────── */
.pw-savings-banner {
  background: linear-gradient(135deg, rgba(8,145,178,0.1), rgba(8,145,178,0.05));
  border: 1px solid rgba(8,145,178,0.3);
  border-radius: 8px;
  padding: 10px 14px;
  font-size: 12px;
  color: #38bdf8;
  margin-bottom: 12px;
  font-weight: 600;
  display: none;
}
.pw-savings-banner.visible { display: block; }

/* ── TOOLS LAYOUT (shared with existing tools views) ─────────── */
.tools-layout {
  display: grid;
  grid-template-columns: 340px minmax(0,1fr);
  gap: 16px;
  align-items: start;
  min-width: 0;
}
.tools-layout > * { min-width: 0; }
@media(max-width:900px) { .tools-layout { grid-template-columns: 1fr; } }
.config-col { display: flex; flex-direction: column; gap: 12px; }
.result-col { display: flex; flex-direction: column; gap: 12px; }

/* ── RESULT BODY (shared) ────────────────────────────────────── */
.result-body {
  max-height: 60vh;
  overflow-y: auto;
  font-family: var(--mono, monospace);
  font-size: 12px;
  line-height: 1.7;
  white-space: pre-wrap;
  word-break: break-word;
  padding: 4px 0;
}
.result-body::-webkit-scrollbar { width: 4px; }
.result-body::-webkit-scrollbar-thumb { background: var(--bg3); border-radius: 10px; }

/* ── DEPTH / ACTION BUTTONS ──────────────────────────────────── */
.depth-btns { display: flex; gap: 6px; flex-wrap: wrap; }
.depth-btn {
  padding: 6px 14px;
  border-radius: 8px;
  border: 1px solid var(--border, rgba(255,255,255,0.08));
  background: var(--bg3, #161F33);
  color: var(--text2);
  font-size: 12px;
  cursor: pointer;
  transition: all 0.2s;
}
.depth-btn:hover { border-color: var(--green, #00E5A0); color: var(--text); }
.depth-btn.active {
  border-color: var(--green, #00E5A0);
  background: rgba(0,229,160,0.1);
  color: var(--green, #00E5A0);
  font-weight: 700;
}

/* ═══════════════════════════════════════════════════════════════
   TEST RUNNER REDESIGN — accessible, numbered-step layout
   ════════════════════════════════════════════════════════════════ */

/* ── Step cards ──────────────────────────────────────────────── */
.runner-step-card {
  background: var(--bg2, #0D1426);
  border: 1px solid var(--border, rgba(255,255,255,0.08));
  border-radius: var(--r, 14px);
  padding: 16px;
  margin-bottom: 12px;
}
.runner-step-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}
.runner-step-header h3 {
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
  margin: 0;
}
.step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--green), var(--purple));
  color: #fff;
  font-size: 12px;
  font-weight: 800;
  flex-shrink: 0;
}

/* ── Field labels — clearer, higher contrast for accessibility ── */
.field-label {
  display: block;
  font-size: 12px;
  font-weight: 700;
  color: var(--text2, #A1A7B5);
  margin-bottom: 6px;
}
.field-label .opt {
  font-weight: 400;
  color: var(--text3, #636D7E);
  text-transform: none;
  letter-spacing: 0;
}
.runner-input, .runner-textarea, .runner-select {
  width: 100%;
  background: var(--bg3, #161F33);
  border: 1.5px solid var(--border, rgba(255,255,255,0.08));
  border-radius: 10px;
  padding: 11px 14px;
  color: var(--text, #fff);
  font-family: var(--sans, inherit);
  font-size: 13px;
  outline: none;
  transition: border-color 0.15s;
  resize: vertical;
}
.runner-input:focus, .runner-textarea:focus, .runner-select:focus {
  border-color: var(--green);
  box-shadow: 0 0 0 3px rgba(31,81,255,0.15);
}
.field { margin-bottom: 12px; }
.field:last-child { margin-bottom: 0; }

/* ── Mode tabs inline (moved next to step title) ────────────── */
.mode-tabs-inline {
  display: flex;
  gap: 4px;
  margin-left: auto;
}
.mode-tabs-inline .mode-tab {
  padding: 5px 12px;
  font-size: 11px;
  border-radius: 8px;
  border: 1px solid var(--border, rgba(255,255,255,0.08));
  background: var(--bg3, #161F33);
  color: var(--text2);
  cursor: pointer;
  transition: all 0.15s;
}
.mode-tabs-inline .mode-tab.active {
  background: var(--green);
  color: #fff;
  border-color: var(--green);
}

/* ── Magic Box inline panel ──────────────────────────────────── */
.magic-box-inline {
  margin-top: 14px;
  padding: 12px;
  border-radius: 10px;
  border: 1px solid rgba(167,139,250,0.25);
  background: rgba(167,139,250,0.04);
}
.magic-label {
  font-size: 12px;
  font-weight: 700;
  color: var(--purple);
}

/* ── Module grid v2 — larger, higher-contrast tiles ─────────── */
.modules-grid-v2 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-top: 4px;
}
@media (max-width: 480px) { .modules-grid-v2 { grid-template-columns: repeat(2, 1fr); } }

.mod-inner-v2 {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 12px 6px;
  min-height: 64px;
  border-radius: 10px;
  border: 1.5px solid var(--border, rgba(255,255,255,0.08));
  cursor: pointer;
  transition: all 0.15s;
  position: relative;
  text-align: center;
}
.mod-icon-v2 { font-size: 18px; }
.mod-name-v2 {
  font-size: 10.5px;
  font-weight: 700;
  color: var(--text2);
  line-height: 1.2;
}
.mod-check-v2 {
  position: absolute;
  top: 4px;
  right: 6px;
  font-size: 11px;
  color: var(--green, #00E5A0);
  opacity: 0;
  transition: opacity 0.15s;
}
.mod.on .mod-inner-v2, .mod input:checked + .mod-inner-v2 {
  border-color: var(--green, #00E5A0);
  background: rgba(0,229,160,0.08);
}
.mod.on .mod-name-v2, .mod input:checked + .mod-inner-v2 .mod-name-v2 { color: var(--green, #00E5A0); }
.mod.on .mod-check-v2, .mod input:checked + .mod-inner-v2 .mod-check-v2 { opacity: 1; }
.mod-inner-v2:hover { border-color: var(--border2, rgba(255,255,255,0.16)); }
.mod-inner-v2:focus-within { outline: 2px solid var(--green); outline-offset: 2px; }

/* ── Live TC preview badge ───────────────────────────────────── */
.tc-preview-badge {
  margin-top: 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 10px 14px;
  border-radius: 10px;
  background: linear-gradient(135deg, rgba(31,81,255,0.08), rgba(138,31,255,0.05));
  border: 1px solid rgba(31,81,255,0.2);
  font-size: 12px;
  font-weight: 700;
  color: var(--green);
  flex-wrap: wrap;
}
.tc-badge-hint {
  font-size: 10px;
  font-weight: 500;
  color: var(--text3, #636D7E);
}

/* ── Report type v2 — larger touch targets ──────────────────── */
.report-types-v2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
@media (max-width: 480px) { .report-types-v2 { grid-template-columns: 1fr; } }
.rt2 input { display: none; }
.rt2-inner {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px;
  border-radius: 10px;
  border: 1.5px solid var(--border, rgba(255,255,255,0.08));
  cursor: pointer;
  transition: all 0.15s;
}
.rt2-inner:hover { border-color: var(--border2, rgba(255,255,255,0.16)); }
.rt2-icon { font-size: 20px; flex-shrink: 0; }
.rt2-name { font-size: 12.5px; font-weight: 700; color: var(--text); }
.rt2-desc { font-size: 10.5px; color: var(--text3); margin-top: 1px; }
.rt2:has(input:checked) .rt2-inner {
  border-color: var(--green);
  background: rgba(31,81,255,0.08);
}
.rt2:has(input:checked) .rt2-name { color: var(--green); }
.rt2-inner:focus-within { outline: 2px solid var(--green); outline-offset: 2px; }

/* ── Settings grid (always visible now, no accordion) ───────── */
.settings-grid {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.settings-item { display: flex; flex-direction: column; gap: 6px; }
.depth-hint-text {
  font-size: 10.5px;
  color: var(--text3, #636D7E);
  margin-top: 4px;
  line-height: 1.4;
}

/* ── Run button v2 — bigger, clearer, with live badge ────────── */
.run-btn-v2 {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 16px;
  border-radius: 12px;
  border: none;
  background: linear-gradient(135deg, var(--green), var(--purple));
  color: #fff;
  font-family: var(--sans, inherit);
  font-size: 15px;
  font-weight: 800;
  cursor: pointer;
  transition: transform 0.15s, filter 0.15s;
  box-shadow: 0 4px 20px rgba(31,81,255,0.3);
}
.run-btn-v2:hover { transform: translateY(-1px); filter: brightness(1.08); }
.run-btn-v2:active { transform: translateY(0); }
.run-btn-v2:disabled { opacity: 0.6; cursor: not-allowed; transform: none; }
.run-btn-badge {
  font-size: 11px;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 99px;
  background: rgba(255,255,255,0.2);
}
.run-shortcut-hint {
  text-align: center;
  font-size: 10.5px;
  color: var(--text3, #636D7E);
  margin-top: 8px;
}
.run-shortcut-hint kbd {
  background: var(--bg3, #161F33);
  border: 1px solid var(--border, rgba(255,255,255,0.08));
  border-radius: 4px;
  padding: 1px 5px;
  font-family: var(--mono, monospace);
}

/* ── Accessibility: focus visibility across all interactive runner elements ── */
.runner-layout button:focus-visible,
.runner-layout input:focus-visible,
.runner-layout select:focus-visible,
.runner-layout textarea:focus-visible,
.runner-layout label:focus-within {
  outline: 2px solid var(--green);
  outline-offset: 2px;
}

/* ── Responsive: stack to single column earlier for readability ── */
@media (max-width: 1100px) {
  .modules-grid-v2 { grid-template-columns: repeat(3, 1fr); }
}

/* ═══════════════════════════════════════════════════════════════
   SECURITY AUDIT — animated 16-category checklist + verdict banner
   ════════════════════════════════════════════════════════════════ */

.sec-row{
  display:flex;align-items:center;gap:12px;padding:10px 8px;border-bottom:1px solid var(--border);
  transition:background .25s ease;
}
.sec-row:last-child{border-bottom:none}
.sec-row-icon{width:22px;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:15px}
.sec-row-icon-final{animation:secPop .3s ease}
@keyframes secPop{from{transform:scale(0.4);opacity:0}to{transform:scale(1);opacity:1}}
.sec-row-body{flex:1;min-width:0}
.sec-row-title{font-size:12.5px;font-weight:600;color:var(--text)}
.sec-row-detail{font-size:11px;color:var(--text3);margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sec-row:hover .sec-row-detail{white-space:normal}
.sec-row-badge{font-size:10px;font-weight:800;padding:3px 9px;border-radius:99px;font-family:var(--mono);white-space:nowrap;flex-shrink:0}

.sec-badge-pending{background:var(--bg3);color:var(--text3)}
.sec-badge-pass{background:var(--green-d);color:var(--green)}
.sec-badge-fail{background:var(--red-d);color:var(--red)}
.sec-badge-warn{background:var(--amber-d);color:var(--amber)}
.sec-badge-na{background:var(--bg3);color:var(--text3)}
.sec-badge-unknown{background:var(--bg3);color:var(--text2)}

.sec-row-pending{opacity:0.55}
.sec-row-running{opacity:1;background:rgba(47,230,201,0.04)}
.sec-row-pass{background:rgba(47,230,201,0.03)}
.sec-row-fail{background:rgba(251,91,91,0.05)}
.sec-row-warn{background:rgba(245,185,66,0.04)}

/* Spinner shown while a check is queued/running */
.sec-spinner{
  width:14px;height:14px;border-radius:50%;
  border:2px solid var(--border2);border-top-color:var(--green);
  animation:secSpin .7s linear infinite;
  display:inline-block;
}
@keyframes secSpin{to{transform:rotate(360deg)}}
.sec-row-pending .sec-spinner{border-top-color:var(--text3);animation-duration:1.4s}

/* Overall verdict banner shown above the results table */
.sec-verdict{
  padding:14px 18px;border-radius:10px;font-size:13.5px;font-weight:600;margin-bottom:16px;
  border:1px solid var(--border);
}
.sec-verdict-pass{background:var(--green-d);color:var(--green);border-color:rgba(47,230,201,0.3)}
.sec-verdict-warn{background:var(--amber-d);color:var(--amber);border-color:rgba(245,185,66,0.3)}
.sec-verdict-fail{background:var(--red-d);color:var(--red);border-color:rgba(251,91,91,0.3)}

/* ═══════════════════════════════════════════════════════════════
   BUG WRITER — colored severity buttons, format chips, report renderer
   ════════════════════════════════════════════════════════════════ */

/* Severity buttons — each takes on its own color only when active, so the
   choice is visually obvious at a glance instead of every button looking
   identical except for the emoji. */
.bug-sev-btns .depth-btn.bug-sev-low.active{background:var(--green-d);border-color:var(--green);color:var(--green)}
.bug-sev-btns .depth-btn.bug-sev-medium.active{background:var(--amber-d);border-color:var(--amber);color:var(--amber)}
.bug-sev-btns .depth-btn.bug-sev-high.active{background:rgba(255,140,66,0.12);border-color:#ff8c42;color:#ff8c42}
.bug-sev-btns .depth-btn.bug-sev-critical.active{background:var(--red-d);border-color:var(--red);color:var(--red)}

/* Export format buttons — small icon already inline via emoji; just tidy hover state */
.bug-fmt-btns .depth-btn{display:flex;align-items:center;gap:5px}

/* Result header chips — severity + format shown next to the title after generating */
.bug-result-chip{
  display:inline-flex;align-items:center;font-size:10px;font-weight:700;
  padding:3px 10px;border-radius:99px;margin-left:8px;font-family:var(--mono);
  vertical-align:middle;
}
.bug-chip-low{background:var(--green-d);color:var(--green)}
.bug-chip-medium{background:var(--amber-d);color:var(--amber)}
.bug-chip-high{background:rgba(255,140,66,0.12);color:#ff8c42}
.bug-chip-critical{background:var(--red-d);color:var(--red)}
.bug-chip-auto{background:rgba(167,139,250,.15);color:var(--purple);border:1px solid rgba(167,139,250,.3)}
.bug-chip-fmt{background:var(--bg3);color:var(--text2);border:1px solid var(--border)}
.bug-sev-auto.active{border-color:var(--purple);background:rgba(167,139,250,.15);color:var(--purple)}
.bug-history-item{
  padding:10px 12px;background:var(--bg2);border:1px solid var(--border);border-radius:var(--rs);
  cursor:pointer;transition:all .15s;display:flex;justify-content:space-between;align-items:center;
}
.bug-history-item:hover{border-color:var(--green);background:var(--bg3)}

/* ── Rendered report markdown (shared: Bug Writer today, reusable elsewhere) ── */
.rpt-body{font-family:var(--body);line-height:1.7}
.rpt-section-label{
  font-family:var(--mono);font-size:11px;font-weight:700;letter-spacing:0.5px;
  text-transform:uppercase;color:var(--green);margin:14px 0 4px;
}
.rpt-body > .rpt-section-label:first-child{margin-top:0}
.rpt-p{font-size:13px;color:var(--text);margin-bottom:8px}
.rpt-list{margin:4px 0 12px 20px;font-size:13px;color:var(--text)}
.rpt-list li{margin-bottom:5px;line-height:1.6}
.rpt-hr{border:none;border-top:1px solid var(--border);margin:16px 0}
.rpt-body strong{color:var(--text);font-weight:700}

/* ═══════════════════════════════════════════════════════════════
   API TESTER — Live Request Runner
   ════════════════════════════════════════════════════════════════ */

.apitester-tabs{display:flex;gap:8px;margin-bottom:16px}
.apitester-tab{
  padding:9px 18px;border-radius:9px;border:1.5px solid var(--border);
  background:var(--bg2);color:var(--text2);font-size:13px;font-weight:600;
  cursor:pointer;transition:all .15s;
}
.apitester-tab:hover{border-color:var(--border2);color:var(--text)}
.apitester-tab.active{background:var(--green-d);border-color:var(--green);color:var(--green)}

/* Status badge — color reflects the real HTTP status class */
.live-result-meta-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:10px 0;border-bottom:1px solid var(--border);margin-bottom:10px}
.live-status-badge{font-family:var(--mono);font-weight:800;font-size:13px;padding:4px 12px;border-radius:8px}
.live-status-ok{background:var(--green-d);color:var(--green)}
.live-status-redirect{background:var(--blue-d);color:var(--blue)}
.live-status-clienterr{background:var(--amber-d);color:var(--amber)}
.live-status-servererr{background:var(--red-d);color:var(--red)}
.live-status-unknown{background:var(--bg3);color:var(--text2)}
.live-meta-chip{font-family:var(--mono);font-size:11px;color:var(--text2);background:var(--bg3);padding:4px 10px;border-radius:99px}

.live-headers-box{background:var(--bg3);border-radius:8px;padding:10px 12px;margin-bottom:10px;max-height:180px;overflow:auto}
.live-header-line{font-family:var(--mono);font-size:11px;color:var(--text2);padding:2px 0;word-break:break-all}
.live-header-key{color:var(--green);font-weight:600}
.live-header-val{color:var(--text2)}

/* Session history list */
.live-history-row{
  display:flex;align-items:center;gap:8px;padding:7px 8px;border-radius:7px;
  cursor:pointer;font-size:11px;transition:background .15s;
}
.live-history-row:hover{background:var(--bg3)}
.live-history-method{font-family:var(--mono);font-weight:700;color:var(--text2);min-width:44px}
.live-history-url{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--text2)}
.live-history-status{font-family:var(--mono);font-weight:700;padding:1px 7px;border-radius:6px;font-size:10px}
.live-history-time{font-family:var(--mono);color:var(--text3);font-size:10px}

/* ═══════════════════════════════════════════════════════════════
   CODE GENERATOR — Run Live panel (local runner integration)
   ════════════════════════════════════════════════════════════════ */
.live-run-cta{
  background:linear-gradient(135deg,rgba(47,230,201,.08),rgba(108,140,255,.04));
  border:1px solid rgba(47,230,201,.25);border-radius:var(--rs);
  padding:14px;margin-bottom:16px;
}
.live-run-cta .run-btn{width:100%}
.live-run-cta .hint-text{margin:8px 0 0;font-size:11px;color:var(--text3);line-height:1.6}
.live-run-cta .hint-text code{background:var(--bg3);padding:1px 5px;border-radius:4px;font-family:var(--mono);color:var(--green)}

.live-run-inner{
  background:var(--bg2);border:1px solid var(--border);border-radius:var(--rs);
  padding:16px;margin-top:12px;
}
.live-run-status{font-size:13px;font-weight:600;color:var(--text);margin-bottom:10px;display:flex;align-items:center}
#live-run-checklist{max-height:320px;overflow:auto}
.live-run-actions{margin-top:12px;display:flex;justify-content:flex-end}

.live-run-unavailable{
  background:var(--amber-d);border:1px solid rgba(245,185,66,.3);border-radius:var(--rs);
  padding:16px;margin-top:12px;font-size:13px;color:var(--text2);line-height:1.7;
}
.live-run-unavailable strong{color:var(--amber);display:block;margin-bottom:6px;font-size:13.5px}
.live-run-unavailable code{background:var(--bg3);padding:1px 6px;border-radius:4px;font-family:var(--mono);color:var(--text)}
.live-run-unavailable p{margin-top:6px}

/* ═══════════════════════════════════════════════════════════════
   BUG WRITER — Cyber Scanner Processing Animation
   ════════════════════════════════════════════════════════════════ */
.bug-scan-laser{
  position:absolute;top:0;left:0;right:0;height:2px;
  background:linear-gradient(90deg,transparent,rgba(0,255,178,.85),rgba(0,210,255,.9),transparent);
  box-shadow:0 0 16px rgba(0,255,178,.85),0 0 30px rgba(0,210,255,.6);
  animation:scanLaser 3s ease-in-out infinite alternate;
  z-index:1;pointer-events:none;
}
@keyframes scanLaser{
  0%{top:0%;opacity:0.3}
  50%{opacity:1}
  100%{top:100%;opacity:0.4}
}

.bug-radar-container{
  position:relative;width:96px;height:96px;
  display:flex;align-items:center;justify-content:center;
  margin:10px 0;
}
.bug-radar-core{
  position:relative;width:72px;height:72px;border-radius:50%;
  background:radial-gradient(circle,rgba(0,255,178,.15) 0%,rgba(167,139,250,.1) 70%,transparent 100%);
  border:2px solid rgba(0,255,178,.6);
  box-shadow:0 0 25px rgba(0,255,178,.35),inset 0 0 15px rgba(0,255,178,.2);
  display:flex;align-items:center;justify-content:center;
  animation:bugPulseCore 3s ease-in-out infinite alternate;
  z-index:3;
}
.bug-radar-icon{
  font-size:36px;
  display:inline-block;
  animation:bugFloat 2.5s ease-in-out infinite;
  filter:drop-shadow(0 0 10px rgba(0,255,178,.6));
}
.bug-radar-ripple{
  position:absolute;inset:0;border-radius:50%;
  border:1.5px solid rgba(0,255,178,.5);
  animation:radarRipple 2.6s cubic-bezier(0.1, 0.2, 0.4, 1) infinite;
  pointer-events:none;z-index:1;
}

@keyframes bugPulseCore{
  0%{transform:scale(0.96);box-shadow:0 0 15px rgba(0,255,178,.25)}
  100%{transform:scale(1.04);box-shadow:0 0 32px rgba(0,255,178,.5),0 0 15px rgba(167,139,250,.4)}
}
@keyframes bugFloat{
  0%,100%{transform:translateY(0) rotate(0deg)}
  50%{transform:translateY(-6px) rotate(5deg)}
}
@keyframes radarRipple{
  0%{transform:scale(0.7);opacity:1}
  100%{transform:scale(2.2);opacity:0}
}

/* Skeleton Shimmer Ticket Box */
.bug-skeleton-box{
  width:100%;max-width:440px;background:rgba(255,255,255,.02);
  border:1px solid rgba(255,255,255,.07);border-radius:var(--rs);
  padding:16px 18px;margin-top:4px;
}
.bug-skel-header{display:flex;gap:8px;margin-bottom:14px}
.bug-skel-pill{
  height:18px;border-radius:99px;
  background:linear-gradient(90deg,var(--bg3) 25%,rgba(255,255,255,.08) 50%,var(--bg3) 75%);
  background-size:200% 100%;animation:skelShimmer 1.8s infinite;
}
.bug-skel-line{
  height:10px;border-radius:6px;
  background:linear-gradient(90deg,var(--bg3) 25%,rgba(255,255,255,.08) 50%,var(--bg3) 75%);
  background-size:200% 100%;animation:skelShimmer 1.8s infinite;
}
.bug-skel-step{
  flex:1;height:36px;border-radius:6px;border:1px dashed rgba(255,255,255,.08);
  background:linear-gradient(90deg,var(--bg3) 25%,rgba(255,255,255,.06) 50%,var(--bg3) 75%);
  background-size:200% 100%;animation:skelShimmer 1.8s infinite;
}
@keyframes skelShimmer{
  0%{background-position:200% 0}
  100%{background-position:-200% 0}
}

.bug-status-pill{
  display:inline-flex;align-items:center;gap:6px;
  background:var(--bg3);border:1px solid var(--border);
  padding:4px 10px;border-radius:99px;font-size:10.5px;
  font-family:var(--mono);color:var(--text2);
}
.live-dot-pulse{
  width:6px;height:6px;border-radius:50%;background:var(--green);
  box-shadow:0 0 8px var(--green);
  animation:dotPulse 1.2s ease-in-out infinite alternate;
}
@keyframes dotPulse{
  0%{transform:scale(0.8);opacity:0.6}
  100%{transform:scale(1.3);opacity:1}
}

/* ═══════════════════════════════════════════════════════════════
   THEMED PROCESSING ANIMATIONS
   ════════════════════════════════════════════════════════════════ */

/* ── 1. TEST DATA LAB ANIMATION ── */
.data-lab-container{
  position:relative;width:90px;height:90px;
  display:flex;align-items:center;justify-content:center;margin:10px 0;
}
.data-lab-flask{
  position:relative;width:68px;height:68px;border-radius:50%;
  background:radial-gradient(circle,rgba(0,210,255,.15) 0%,rgba(47,230,201,.1) 60%,transparent 100%);
  border:2px solid rgba(0,210,255,.6);
  box-shadow:0 0 25px rgba(0,210,255,.35),inset 0 0 15px rgba(47,230,201,.2);
  display:flex;align-items:center;justify-content:center;
  animation:flaskGlow 2.8s ease-in-out infinite alternate;
  z-index:3;
}
.data-lab-icon{
  font-size:34px;display:inline-block;
  animation:flaskBounce 2s ease-in-out infinite;
  filter:drop-shadow(0 0 12px rgba(0,210,255,.7));
}
.data-bubble{
  position:absolute;bottom:15px;width:8px;height:8px;border-radius:50%;
  background:var(--cyan);opacity:0;
  box-shadow:0 0 8px var(--cyan);
  animation:bubbleFloat 2.2s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}
@keyframes flaskGlow{
  0%{transform:scale(0.96);box-shadow:0 0 16px rgba(0,210,255,.25)}
  100%{transform:scale(1.04);box-shadow:0 0 32px rgba(0,210,255,.6),0 0 18px rgba(47,230,201,.4)}
}
@keyframes flaskBounce{
  0%,100%{transform:translateY(0) rotate(0deg)}
  50%{transform:translateY(-5px) rotate(-4deg)}
}
@keyframes bubbleFloat{
  0%{bottom:15px;opacity:0;transform:scale(0.6)}
  40%{opacity:0.9}
  100%{bottom:65px;opacity:0;transform:scale(1.4)}
}

/* ── 2. EXPLORATORY SONAR COMPASS ANIMATION ── */
.exp-compass-container{
  position:relative;width:96px;height:96px;
  display:flex;align-items:center;justify-content:center;margin:10px 0;
}
.exp-compass-dial{
  position:relative;width:76px;height:76px;border-radius:50%;
  border:2px dashed rgba(245,158,11,.6);
  background:radial-gradient(circle,rgba(245,158,11,.12) 0%,rgba(239,68,68,.06) 70%,transparent 100%);
  box-shadow:0 0 25px rgba(245,158,11,.3),inset 0 0 15px rgba(245,158,11,.15);
  display:flex;align-items:center;justify-content:center;
  animation:compassSpin 12s linear infinite;
  z-index:2;
}
.exp-compass-needle{
  position:absolute;font-size:36px;
  animation:needleJitter 3s ease-in-out infinite;
  filter:drop-shadow(0 0 12px rgba(245,158,11,.8));
  z-index:3;
}
.exp-radar-sweep{
  position:absolute;inset:0;border-radius:50%;
  border-right:2px solid rgba(245,158,11,.8);
  animation:radarSweep 2.5s linear infinite;
  pointer-events:none;z-index:1;
}
@keyframes compassSpin{
  0%{transform:rotate(0deg)}
  100%{transform:rotate(360deg)}
}
@keyframes needleJitter{
  0%,100%{transform:rotate(0deg)}
  25%{transform:rotate(-18deg)}
  75%{transform:rotate(22deg)}
}
@keyframes radarSweep{
  0%{transform:rotate(0deg);opacity:1}
  100%{transform:rotate(360deg);opacity:0.3}
}

/* ── 3. API PROTOCOL ANALYZER ANIMATION ── */
.api-analyzer-container{
  position:relative;width:96px;height:96px;
  display:flex;align-items:center;justify-content:center;margin:10px 0;
}
.api-analyzer-core{
  position:relative;width:72px;height:72px;border-radius:18px;
  border:2px solid rgba(167,139,250,.6);
  background:radial-gradient(circle,rgba(167,139,250,.18) 0%,rgba(59,130,246,.08) 70%,transparent 100%);
  box-shadow:0 0 25px rgba(167,139,250,.35),inset 0 0 15px rgba(167,139,250,.2);
  display:flex;align-items:center;justify-content:center;
  animation:apiPulse 2.6s ease-in-out infinite alternate;
  z-index:3;
}
.api-analyzer-icon{
  font-size:34px;display:inline-block;
  animation:apiFloat 2.2s ease-in-out infinite;
  filter:drop-shadow(0 0 12px rgba(167,139,250,.8));
}
.api-packet-ring{
  position:absolute;inset:-6px;border-radius:24px;
  border:1.5px dashed rgba(167,139,250,.5);
  animation:packetRotate 6s linear infinite;
  pointer-events:none;z-index:1;
}
@keyframes apiPulse{
  0%{transform:scale(0.96);box-shadow:0 0 15px rgba(167,139,250,.25)}
  100%{transform:scale(1.04);box-shadow:0 0 32px rgba(167,139,250,.55),0 0 15px rgba(59,130,246,.4)}
}
@keyframes apiFloat{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-5px)}
}
@keyframes packetRotate{
  0%{transform:rotate(0deg)}
  100%{transform:rotate(360deg)}
}

/* ── 4. SENIOR QA AI REASONING CORE ── */
.senior-loading-card{
  padding:28px 20px;border-radius:var(--rs);
  background:radial-gradient(ellipse at top, rgba(167,139,250,.08) 0%, var(--bg2) 75%);
  border:1px solid rgba(167,139,250,.25);
  box-shadow:0 10px 30px rgba(0,0,0,.4);
  margin-top:12px;text-align:center;position:relative;overflow:hidden;
}
.senior-neural-pulse{
  width:64px;height:64px;border-radius:50%;margin:0 auto 12px;
  background:radial-gradient(circle,rgba(167,139,250,.25) 0%,rgba(0,255,178,.1) 60%,transparent 100%);
  border:2px solid rgba(167,139,250,.6);
  box-shadow:0 0 20px rgba(167,139,250,.4);
  display:flex;align-items:center;justify-content:center;
  font-size:30px;animation:bugPulseCore 2.5s ease-in-out infinite alternate;
}

/* ── 5. QUANTUM OPTICAL QA SCANNER (TEST RUNNER) ── */
.runner-scanner-container{
  position:relative;width:96px;height:96px;
  display:flex;align-items:center;justify-content:center;
  margin:10px auto 16px;
}
.runner-reticle-outer{
  position:absolute;inset:0;border-radius:50%;
  border:2px dashed rgba(0,229,160,.55);
  animation:targetRotate 14s linear infinite;
  box-shadow:0 0 20px rgba(0,229,160,.2);
}
.runner-reticle-inner{
  position:absolute;inset:10px;border-radius:50%;
  border:1.5px solid rgba(0,210,255,.5);
  animation:targetRotateRev 8s linear infinite;
}
.runner-scanner-core{
  position:relative;width:64px;height:64px;border-radius:50%;
  background:radial-gradient(circle,rgba(0,229,160,.25) 0%,rgba(0,210,255,.12) 60%,transparent 100%);
  border:2px solid var(--green);
  box-shadow:0 0 25px rgba(0,229,160,.5),inset 0 0 15px rgba(0,229,160,.3);
  display:flex;align-items:center;justify-content:center;
  animation:reticlePulse 2.8s ease-in-out infinite alternate;
  z-index:3;
}
.runner-scanner-icon{
  font-size:32px;display:inline-block;
  animation:runnerFloat 2.4s ease-in-out infinite;
  filter:drop-shadow(0 0 10px rgba(0,229,160,.8));
}
.runner-laser-sweep{
  position:absolute;inset:0;border-radius:50%;
  background:conic-gradient(from 0deg, transparent 0deg, rgba(0,229,160,.35) 60deg, transparent 75deg);
  animation:radarSweep 2.2s linear infinite;
  pointer-events:none;z-index:2;
}
.runner-crosshair-h{
  position:absolute;top:50%;left:-10px;right:-10px;height:1px;
  background:linear-gradient(90deg,transparent,rgba(0,229,160,.6),transparent);
  pointer-events:none;z-index:1;
}
.runner-crosshair-v{
  position:absolute;left:50%;top:-10px;bottom:-10px;width:1px;
  background:linear-gradient(180deg,transparent,rgba(0,229,160,.6),transparent);
  pointer-events:none;z-index:1;
}
@keyframes targetRotate{
  0%{transform:rotate(0deg)}
  100%{transform:rotate(360deg)}
}
@keyframes targetRotateRev{
  0%{transform:rotate(360deg)}
  100%{transform:rotate(0deg)}
}
@keyframes reticlePulse{
  0%{transform:scale(0.95);box-shadow:0 0 16px rgba(0,229,160,.3)}
  100%{transform:scale(1.05);box-shadow:0 0 32px rgba(0,229,160,.6),0 0 16px rgba(0,210,255,.5)}
}
@keyframes runnerFloat{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-4px)}
}

/* ── 6. AST CODE SYNTHESIZER MATRIX (CODE GENERATOR) ── */
.code-synth-container{
  position:relative;width:96px;height:96px;
  display:flex;align-items:center;justify-content:center;
  margin:10px auto 16px;
}
.code-bracket-ring{
  position:absolute;inset:0;border-radius:22px;
  border:2px dashed rgba(77,159,255,.55);
  animation:targetRotate 10s linear infinite;
  box-shadow:0 0 20px rgba(77,159,255,.25);
}
.code-compiler-core{
  position:relative;width:68px;height:68px;border-radius:18px;
  background:radial-gradient(circle,rgba(77,159,255,.22) 0%,rgba(167,139,250,.12) 65%,transparent 100%);
  border:2px solid rgba(77,159,255,.7);
  box-shadow:0 0 25px rgba(77,159,255,.45),inset 0 0 15px rgba(77,159,255,.25);
  display:flex;align-items:center;justify-content:center;
  animation:bracketPulse 2.6s ease-in-out infinite alternate;
  z-index:3;
}
.code-bracket-icon{
  font-family:var(--mono);font-size:24px;font-weight:800;color:var(--sapphire);
  letter-spacing:-1px;display:inline-block;
  animation:codeGlow 2.2s ease-in-out infinite alternate;
  filter:drop-shadow(0 0 12px rgba(77,159,255,.85));
}
.code-matrix-stream{
  position:absolute;inset:-6px;border-radius:26px;
  border:1px solid rgba(0,229,160,.3);
  box-shadow:0 0 12px rgba(0,229,160,.15);
  pointer-events:none;z-index:1;
  animation:targetRotateRev 15s linear infinite;
}
@keyframes bracketPulse{
  0%{transform:scale(0.96);box-shadow:0 0 16px rgba(77,159,255,.3)}
  100%{transform:scale(1.04);box-shadow:0 0 32px rgba(77,159,255,.65),0 0 18px rgba(0,229,160,.4)}
}
@keyframes codeGlow{
  0%{opacity:0.85;color:var(--sapphire);transform:scale(0.96)}
  100%{opacity:1;color:var(--green);transform:scale(1.06)}
}

/* ── 7. CYBER MEDIC SELF-HEALING ENGINE (SCRIPT DOCTOR) ── */
.doctor-medic-container{
  position:relative;width:96px;height:96px;
  display:flex;align-items:center;justify-content:center;
  margin:10px auto 16px;
}
.doctor-medic-core{
  position:relative;width:68px;height:68px;border-radius:50%;
  background:radial-gradient(circle,rgba(167,139,250,.25) 0%,rgba(239,68,68,.1) 70%,transparent 100%);
  border:2px solid rgba(167,139,250,.7);
  box-shadow:0 0 26px rgba(167,139,250,.45),inset 0 0 15px rgba(167,139,250,.2);
  display:flex;align-items:center;justify-content:center;
  animation:medicPulse 2.4s ease-in-out infinite alternate;
  z-index:3;
}
.doctor-medic-icon{
  font-size:32px;display:inline-block;
  animation:medicHeartbeat 1.8s ease-in-out infinite;
  filter:drop-shadow(0 0 12px rgba(167,139,250,.9));
}
.doctor-ecg-ring{
  position:absolute;inset:0;border-radius:50%;
  border:1.5px dashed rgba(167,139,250,.55);
  animation:targetRotate 10s linear infinite;
  pointer-events:none;z-index:1;
}
.doctor-heal-ripple{
  position:absolute;inset:0;border-radius:50%;
  border:1.5px solid rgba(0,229,160,.5);
  animation:radarRipple 2.2s cubic-bezier(0.1, 0.2, 0.4, 1) infinite;
  pointer-events:none;z-index:1;
}
@keyframes medicPulse{
  0%{transform:scale(0.96);box-shadow:0 0 16px rgba(167,139,250,.3)}
  100%{transform:scale(1.05);box-shadow:0 0 32px rgba(167,139,250,.65),0 0 15px rgba(239,68,68,.35)}
}
@keyframes medicHeartbeat{
  0%,100%{transform:scale(1)}
  15%{transform:scale(1.15)}
  30%{transform:scale(1)}
  45%{transform:scale(1.2)}
  60%{transform:scale(1)}
}

/* ═════════════════════════════════════════════════════════════════════
   ROADMAP MODULES: A11Y, VISUAL REGRESSION, PERF, CI/CD
══════════════════════════════════════════════════════════════════════ */

/* a11y Auditor styles */
.a11y-issue-card {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 14px 16px;
  margin-bottom: 12px;
  transition: border-color 0.2s;
}
.a11y-issue-card:hover { border-color: rgba(0,210,255,0.4); }
.a11y-sev-critical { border-left: 4px solid var(--ruby) !important; }
.a11y-sev-serious { border-left: 4px solid var(--amber) !important; }
.a11y-sev-moderate { border-left: 4px solid var(--violet) !important; }
.a11y-sev-minor { border-left: 4px solid var(--cyan) !important; }

.a11y-code-fix {
  background: rgba(0,0,0,0.4);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 10px 12px;
  font-family: var(--mono);
  font-size: 11.5px;
  color: var(--emerald);
  margin-top: 8px;
  overflow-x: auto;
  position: relative;
}

/* Visual Regression Split Slider */
#vis-slider-divider:hover {
  background: #FFF !important;
  box-shadow: 0 0 20px rgba(0,210,255,0.8) !important;
}
#vis-slider-divider:active {
  cursor: grabbing !important;
}
.vis-drop-active {
  border-color: var(--cyan) !important;
  background: rgba(0,210,255,0.06) !important;
}

/* Code block highlight boxes */
.code-export-box {
  background: #030508;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 16px;
  font-family: var(--mono);
  font-size: 12px;
  line-height: 1.7;
  color: #E2E8F0;
  overflow: auto;
}

/* ═══════════════════════════════════════════════════════════════
   TEST RUNNER ENHANCEMENTS — RECENT URLS, FILTERS & CARDS
   ═══════════════════════════════════════════════════════════════ */
.recent-urls-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 6px;
}
.recent-url-chip {
  display: inline-flex;
  align-items: center;
  font-size: 10.5px;
  font-family: var(--mono);
  color: var(--text2);
  background: var(--bg3);
  border: 1px solid var(--border);
  border-radius: 99px;
  padding: 2px 9px;
  cursor: pointer;
  transition: all .15s ease;
  max-width: 260px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.recent-url-chip:hover {
  color: var(--green);
  border-color: var(--green);
  background: var(--green-d);
}

.preset-btn-custom {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.preset-del-btn {
  font-size: 10px;
  opacity: 0.6;
  margin-left: 2px;
  cursor: pointer;
}
.preset-del-btn:hover {
  opacity: 1;
  color: var(--red);
}

/* ── RUNNER UNIFIED FILTER & SELECTION TOOLBAR ─────────────── */
.rc-stats-wrap {
  margin-top: 10px;
}
.rc-stats-wrap .rc-header {
  margin-bottom: 4px;
}

.runner-toolbar {
  background: var(--bg2, #0D1426);
  border: 1px solid var(--border, rgba(255, 255, 255, 0.08));
  border-radius: 10px;
  padding: 10px 12px;
  margin: 10px 0 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.runner-search-wrap {
  position: relative;
  width: 100%;
}

.runner-search-icon {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text3, #636D7E);
  pointer-events: none;
  width: 15px;
  height: 15px;
}

.runner-search-input {
  width: 100%;
  box-sizing: border-box;
  background: var(--bg3, #161F33);
  border: 1px solid var(--border, rgba(255, 255, 255, 0.08));
  border-radius: 8px;
  padding: 8px 32px 8px 36px;
  color: var(--text, #FFFFFF);
  font-size: 12px;
  font-family: var(--body, inherit);
  transition: all .2s ease;
}

.runner-search-input:focus {
  border-color: var(--green, #00E5A0);
  box-shadow: 0 0 0 2px rgba(0, 229, 160, 0.15);
  outline: none;
}

.runner-search-clear {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(255, 255, 255, 0.06);
  border: none;
  border-radius: 50%;
  width: 18px;
  height: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text3, #636D7E);
  cursor: pointer;
  font-size: 10px;
  transition: all .15s ease;
}

.runner-search-clear:hover {
  background: rgba(255, 255, 255, 0.15);
  color: var(--text, #FFFFFF);
}

.runner-toolbar-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.runner-filter-controls {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.runner-filter-select {
  background: var(--bg3, #161F33);
  border: 1px solid var(--border, rgba(255, 255, 255, 0.08));
  border-radius: 6px;
  padding: 5px 10px;
  color: var(--text, #FFFFFF);
  font-size: 11.5px;
  cursor: pointer;
  outline: none;
}

.runner-filter-select:focus {
  border-color: var(--green, #00E5A0);
}

.runner-pill-group {
  display: inline-flex;
  background: var(--bg3, #161F33);
  border: 1px solid var(--border, rgba(255, 255, 255, 0.08));
  border-radius: 6px;
  padding: 2px;
  gap: 2px;
}

.runner-pill {
  background: none;
  border: none;
  color: var(--text2, #A1A7B5);
  font-size: 11px;
  padding: 3px 9px;
  border-radius: 4px;
  cursor: pointer;
  transition: all .15s ease;
  font-weight: 500;
}

.runner-pill:hover {
  color: var(--text, #FFFFFF);
}

.runner-pill.active {
  background: var(--green-d, rgba(0, 229, 160, 0.15));
  color: var(--green, #00E5A0);
  font-weight: 700;
}

.runner-pill.pill-critical.active {
  background: var(--red-d, rgba(255, 77, 77, 0.15));
  color: var(--red, #FF4D4D);
}

.runner-pill.pill-high.active {
  background: var(--amber-d, rgba(255, 179, 0, 0.15));
  color: var(--amber, #FFB300);
}

.runner-selection-controls {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
}

.selection-status-badge {
  font-size: 11px;
  color: var(--text2, #A1A7B5);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--border, rgba(255, 255, 255, 0.08));
  padding: 3px 8px;
  border-radius: 4px;
  white-space: nowrap;
}

.runner-selection-controls .sel-btn {
  font-size: 11px;
  padding: 3px 8px;
}

/* Upgraded Card Styles */
.rc-card-tc.rc-card-unselected {
  opacity: 0.42;
  filter: grayscale(0.5);
  border-style: dashed;
}
.rc-card-select-wrap {
  display: flex;
  align-items: center;
  gap: 4px;
  cursor: pointer;
}
.rc-card-select-wrap input {
  accent-color: var(--green);
  width: 14px;
  height: 14px;
  cursor: pointer;
}
.rc-card-actions-strip {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-left: auto;
}
.rc-action-btn {
  background: none;
  border: 1px solid var(--border);
  border-radius: 4px;
  color: var(--text3);
  font-size: 10.5px;
  padding: 2px 7px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  transition: all .15s ease;
}
.rc-action-btn:hover {
  color: var(--green);
  border-color: var(--green);
  background: var(--green-d);
}
.rc-action-btn.rc-del-btn:hover {
  color: var(--red);
  border-color: var(--red);
  background: var(--red-d);
}
.rc-card-sev {
  cursor: pointer;
  user-select: none;
  transition: transform .12s ease;
}
.rc-card-sev:hover {
  transform: scale(1.08);
}
.rc-automation-anchor {
  font-family: var(--mono);
  font-size: 10.5px;
  color: var(--blue);
  background: var(--blue-d);
  border: 1px solid rgba(108,140,255,0.25);
  padding: 6px 10px;
  border-radius: 5px;
  margin-top: 4px;
  white-space: pre-wrap;
  word-break: break-all;
}

/* ── RUNNER & TEST BANK DROPDOWN MENUS ── */
.runner-dropdown-menu {
  animation: dropdownFadeIn .18s ease forwards;
}
@keyframes dropdownFadeIn {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: translateY(0); }
}
.runner-menu-item {
  background: transparent;
  border: none;
  text-align: left;
  padding: 8px 14px;
  color: var(--text2, #A1A7B5);
  font-size: 11.5px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  transition: all .12s ease;
  width: 100%;
  box-sizing: border-box;
}
.runner-menu-item:hover {
  background: rgba(59, 130, 246, 0.12);
  color: var(--text, #FFFFFF);
}

/* ── TEST BANK MODULE STYLING ── */
.testbank-card {
  background: var(--bg2, #0D1426);
  border: 1px solid var(--border, rgba(255, 255, 255, 0.08));
  border-radius: 10px;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  transition: all .2s ease;
  position: relative;
}
.testbank-card:hover {
  border-color: rgba(59, 130, 246, 0.4);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.35);
  transform: translateY(-1px);
}
.testbank-card.testbank-card-unselected {
  opacity: 0.55;
  border-style: dashed;
}
.testbank-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.testbank-card-id {
  font-family: var(--mono, monospace);
  font-size: 11px;
  font-weight: 700;
  color: var(--sapphire, #3b82f6);
  background: rgba(59, 130, 246, 0.12);
  padding: 2px 7px;
  border-radius: 4px;
  border: 1px solid rgba(59, 130, 246, 0.25);
}
.testbank-card-title {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--text, #FFFFFF);
  line-height: 1.35;
}
.testbank-badge-cat {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .5px;
  padding: 2px 6px;
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.05);
  color: var(--text3, #636D7E);
}




/* UI Polish Fixes */
.mobile-header {
  display: none !important;
}

@media (max-width: 768px) {
  .mobile-header {
    display: flex !important;
  }
  .sidebar {
    transform: translateX(-100%);
    transition: transform 0.3s ease;
    z-index: 1000;
  }
  .sidebar.mobile-open {
    transform: translateX(0);
  }
}

#view-dashboard {
  padding-bottom: 80px;
}

.testbank-card-id {
  white-space: nowrap;
  flex-shrink: 0;
}

.tools-layout {
  gap: 12px !important;
}