:root {
  --bg: #f6f8fc;
  --panel: #ffffff;
  --ink: #0e1730;
  --muted: #667085;
  --line: #dfe5ef;
  --soft: #eef2f8;
  --primary: #6738f5;
  --primary-2: #7b4dff;
  --nav: #08142b;
  --nav-2: #101f3b;
  --good: #16b887;
  --warn: #f59e0b;
  --high: #ff7a2f;
  --critical: #f2243c;
  --low: #4c6fff;
  --info: #b8bbc3;
  --shadow: 0 14px 34px rgba(11, 24, 54, .07);
  --shadow-sm: 0 6px 18px rgba(11, 24, 54, .055);
  --radius: 12px;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

body.theme-dark {
  --bg: #0b1020;
  --panel: #111827;
  --ink: #edf2ff;
  --muted: #aab4c7;
  --line: #263348;
  --soft: #182235;
  --shadow: 0 18px 60px rgba(0,0,0,.38);
  --shadow-sm: 0 10px 26px rgba(0,0,0,.26);
}
body.theme-dark .main,
body.theme-dark .content {
  background: #0b1020;
}
body.theme-dark .topbar,
body.theme-dark .card,
body.theme-dark .modal-card,
body.theme-dark .modal-head,
body.theme-dark .project-switcher,
body.theme-dark input,
body.theme-dark select,
body.theme-dark textarea,
body.theme-dark .secondary,
body.theme-dark .settings-health,
body.theme-dark .settings-toggle,
body.theme-dark .display-mode-card,
body.theme-dark .session-item,
body.theme-dark .replay-stage {
  background: #111827;
  color: var(--ink);
  border-color: var(--line);
}
body.theme-dark .settings-hero,
body.theme-dark .settings-panel,
body.theme-dark .project-hero,
body.theme-dark .report-hero,
body.theme-dark .evidence-explanation {
  background: linear-gradient(135deg, #111827, #0f172a);
}
body.theme-dark .settings-meta-grid div,
body.theme-dark .report-block,
body.theme-dark .audit-event-list div,
body.theme-dark .replay-event-list button,
body.theme-dark .test-state-grid > div {
  background: #0f172a;
  border-color: var(--line);
}
body.theme-dark .session-item:hover,
body.theme-dark .session-item.active,
body.theme-dark .display-mode-card.active {
  background: #1b2440;
}
body.theme-dark.theme-compact .card,
body.theme-compact .card {
  border-radius: 12px;
}
body.theme-compact .content {
  padding-top: 24px;
}

* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; overflow: hidden; }
body { background: var(--bg); color: var(--ink); font-size: 15px; line-height: 1.45; }
button, input, select, textarea { font: inherit; }
button { cursor: pointer; }
button:disabled { cursor: not-allowed; opacity: .55; box-shadow: none; transform: none; }
button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 3px solid rgba(103,56,245,.28);
  outline-offset: 2px;
}

.app-shell { display: flex; height: 100vh; width: 100%; overflow: hidden; }
.sidebar {
  width: 272px;
  flex: 0 0 272px;
  height: 100vh;
  background:
    radial-gradient(circle at 76% 94%, rgba(103,56,245,.25), transparent 34%),
    linear-gradient(180deg, #0a1731 0%, #08142b 46%, #071126 100%);
  color: #fff;
  position: fixed;
  left: 0;
  top: 0;
  padding: 18px 12px;
  display: flex;
  flex-direction: column;
  z-index: 30;
  overflow: hidden;
  overscroll-behavior: contain;
  box-shadow: 18px 0 44px rgba(8, 20, 43, .16);
}
.brand { display: flex; align-items: center; gap: 12px; padding: 0 10px 16px; border-bottom: 1px solid rgba(255,255,255,.08); flex: 0 0 auto; }
.brand-mark {
  width: 46px; height: 46px; border-radius: 12px;
  background: linear-gradient(145deg, #9f7aff, var(--primary));
  display: grid; place-items: center; font-weight: 900; box-shadow: 0 10px 26px rgba(103,56,245,.45);
}
.brand strong { display: block; font-size: 20px; line-height: 1.12; letter-spacing: 0; }
.brand span { color: #c7d2e8; display: block; margin-top: 5px; font-size: 13px; }
.nav-list {
  display: grid;
  gap: 4px;
  padding: 12px 0 18px;
  flex: 1 1 auto;
  align-content: start;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,.18) transparent;
}
.nav-list::-webkit-scrollbar { width: 6px; }
.nav-list::-webkit-scrollbar-thumb { background: rgba(255,255,255,.18); border-radius: 999px; }
.nav-group { display: grid; gap: 4px; }
.nav-group + .nav-group { margin-top: 10px; padding-top: 10px; border-top: 1px solid rgba(255,255,255,.08); }
.nav-group-title {
  color: rgba(231,238,255,.55);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .11em;
  text-transform: uppercase;
  padding: 0 12px 4px;
}
.nav-item {
  width: 100%; border: 0; color: #edf3ff; background: transparent;
  display: flex; align-items: center; gap: 10px; padding: 6px 10px;
  min-height: 36px;
  border-radius: 10px; text-align: left; transition: .18s ease; font-size: 14px; font-weight: 720;
}
.nav-item:hover { background: rgba(255,255,255,.08); color: #fff; }
.nav-item.active { background: linear-gradient(135deg, var(--primary), #5b2be7); box-shadow: 0 10px 24px rgba(103,56,245,.25); color: #fff; }
.nav-item.active .nav-icon { background: rgba(255,255,255,.16); border-color: rgba(255,255,255,.35); }
.nav-icon {
  width: 25px; height: 25px; border: 1px solid rgba(255,255,255,.28);
  border-radius: 8px; display: grid; place-items: center; font-size: 10px; flex: 0 0 auto;
  font-weight: 900; letter-spacing: .03em; background: rgba(255,255,255,.06);
}
.upgrade-card {
  margin: 8px 6px 0; padding: 15px; border-radius: 14px;
  background: linear-gradient(145deg, rgba(103,56,245,.62), rgba(34,24,85,.95));
  position: relative; min-height: 150px; overflow: hidden; flex: 0 0 auto;
}
.upgrade-card p { color: #d9def0; line-height: 1.38; margin: 8px 0 14px; font-size: 13px; }
.dismiss-upgrade { position: absolute; top: 12px; right: 12px; color: #cbbdff; }
.rocket { position: absolute; right: 20px; bottom: 38px; font-size: 40px; color: #a78bfa; transform: rotate(42deg); opacity: .9; }

.main {
  flex: 1;
  min-width: 0;
  height: 100vh;
  margin-left: 272px;
  overflow-y: auto;
  overflow-x: hidden;
  scroll-behavior: smooth;
}
.topbar {
  height: 70px;
  background: rgba(255,255,255,.9);
  backdrop-filter: blur(18px);
  border-bottom: 1px solid rgba(223,229,239,.9);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 30px;
  position: sticky;
  top: 0;
  z-index: 20;
  box-shadow: 0 10px 26px rgba(16, 24, 40, .035);
}
.topbar-left, .topbar-actions, .page-actions { display: flex; align-items: center; gap: 14px; }
.project-switcher {
  min-width: 360px; height: 46px; display: flex; align-items: center; gap: 10px;
  border: 1px solid var(--line); border-radius: 12px; padding: 0 14px; background: #fff; box-shadow: var(--shadow-sm);
}
.switcher-label { color: var(--muted); font-size: 12px; font-weight: 900; text-transform: uppercase; letter-spacing: .05em; }
.project-switcher select { border: 0; color: var(--ink); font-weight: 700; background: transparent; min-width: 0; flex: 1; outline: 0; }
.env-pill {
  border-radius: 999px;
  padding: 6px 9px;
  background: #eef4ff;
  color: var(--primary);
  font-size: 11px;
  font-weight: 900;
}
.env-pill.production { color: #b7182c; background: #ffe8ec; }
.env-pill.staging { color: #a85c00; background: #fff1d8; }
.env-pill.local { color: #2657c9; background: #edf1ff; }
.chevron { color: var(--muted); }
.icon-button {
  border: 1px solid transparent; background: transparent; color: inherit; min-width: 38px; height: 38px; border-radius: 10px;
  display: inline-grid; place-items: center; position: relative;
}
.icon-button:hover { background: var(--soft); }
.icon-button svg, .nav-icon svg {
  width: 19px;
  height: 19px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.nav-icon svg { width: 15px; height: 15px; }
.menu-toggle { display: none; }
.notify span {
  position: absolute; top: 2px; right: 1px; background: #f52238; color: #fff; border-radius: 999px;
  min-width: 17px; height: 17px; font-size: 11px; display: grid; place-items: center;
}
.profile { border: 0; border-left: 1px solid var(--line); background: transparent; padding-left: 18px; display: flex; align-items: center; gap: 12px; border-radius: 0; text-align: left; color: var(--ink); }
.profile:hover { background: transparent; }
.avatar, .persona-avatar {
  width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center;
  background: linear-gradient(145deg, #f6c08d, #354d7e); color: #fff; font-weight: 800;
}
.profile span { display: block; color: var(--muted); font-size: 12px; margin-top: 2px; }

.content { padding: 22px 30px 32px; }
.page-head { display: flex; justify-content: space-between; gap: 20px; align-items: flex-start; margin-bottom: 22px; }
h1 { margin: 0 0 6px; font-size: 25px; line-height: 1.18; letter-spacing: 0; }
h2 { margin: 0; font-size: 22px; line-height: 1.24; letter-spacing: 0; }
h3 { margin: 0; font-size: 16px; line-height: 1.3; letter-spacing: 0; }
p { margin: 0; }
#pageSubtitle, .muted { color: var(--muted); }
.primary, .secondary, .danger {
  border: 1px solid transparent; border-radius: 10px; padding: 11px 16px; font-weight: 800;
  min-height: 44px; transition: .18s ease; white-space: nowrap; display: inline-flex; align-items: center; justify-content: center; gap: 9px;
}
.primary { background: linear-gradient(135deg, var(--primary), #5b2be7); color: #fff; box-shadow: 0 9px 22px rgba(103,56,245,.25); }
.primary:hover { transform: translateY(-1px); box-shadow: 0 12px 25px rgba(103,56,245,.3); }
.secondary { background: #fff; color: var(--ink); border-color: var(--line); box-shadow: var(--shadow-sm); }
.danger { background: #fff1f3; color: var(--critical); border-color: #ffd1d8; }
.small { min-height: 40px; padding: 8px 13px; font-size: 13px; }
.btn-icon {
  width: 22px;
  height: 22px;
  border-radius: 7px;
  display: inline-grid;
  place-items: center;
  background: rgba(255,255,255,.18);
  color: currentColor;
  font-size: 9px;
  font-weight: 900;
}
.eyebrow {
  display: inline-flex;
  color: var(--primary);
  font-weight: 850;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .08em;
  margin-bottom: 8px;
}
.hero-status {
  padding: 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 14px;
  background:
    linear-gradient(135deg, rgba(103,56,245,.07), rgba(22,184,135,.06)),
    #fff;
}

.home-hero {
  padding: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 390px;
  min-height: 220px;
  background:
    radial-gradient(circle at 88% 16%, rgba(103,56,245,.20), transparent 34%),
    linear-gradient(135deg, #ffffff 0%, #fbfcff 52%, #f2efff 100%);
  border-color: #d8deea;
}
.home-hero-copy {
  padding: 28px;
  display: grid;
  align-content: center;
}
.home-hero-copy h2 {
  font-size: 31px;
  line-height: 1.14;
  max-width: 760px;
  margin: 0 0 10px;
}
.home-hero-copy p {
  color: #475467;
  font-size: 15px;
  line-height: 1.55;
  max-width: 760px;
}
.hero-meta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  margin-top: 18px;
}
.hero-meta-row span {
  border: 1px solid #dce3ee;
  background: rgba(255,255,255,.76);
  color: #42506a;
  border-radius: 999px;
  padding: 7px 11px;
  font-size: 12px;
  font-weight: 850;
}
.home-hero-panel {
  border-left: 1px solid rgba(103,56,245,.13);
  padding: 24px;
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr);
  gap: 18px;
  align-items: center;
  background: rgba(255,255,255,.52);
}
.hero-score-ring {
  width: 148px;
  height: 148px;
  border-radius: 50%;
  background: conic-gradient(var(--primary) var(--score), #e7ebf2 0);
  display: grid;
  place-items: center;
  position: relative;
}
.hero-score-ring:after {
  content: "";
  position: absolute;
  inset: 13px;
  border-radius: 50%;
  background: #fff;
  box-shadow: inset 0 0 0 1px #edf0f5;
}
.hero-score-ring strong,
.hero-score-ring span {
  position: relative;
  z-index: 1;
  grid-column: 1;
}
.hero-score-ring strong {
  align-self: end;
  font-size: 36px;
  line-height: 1;
}
.hero-score-ring span {
  align-self: start;
  margin-top: 6px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 850;
}
.hero-actions {
  display: grid;
  gap: 10px;
  align-content: center;
}
.hero-actions .primary,
.hero-actions .secondary { width: 100%; }
.home-kpis { margin-top: 16px; }
.home-kpis .kpi-card {
  border-top: 0;
  position: relative;
}
.home-kpis .kpi-card:before {
  content: "";
  position: absolute;
  left: 18px;
  top: 18px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--good);
}
.home-kpis .kpi-card.high:before { background: var(--high); }
.home-kpis .kpi-card.critical:before { background: var(--critical); }
.home-kpis .kpi-card span { padding-left: 18px; }
.kpi-top {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: center;
}
.kpi-top em {
  font-style: normal;
  border-radius: 999px;
  padding: 4px 7px;
  font-size: 10px;
  font-weight: 900;
  color: #536075;
  background: #f2f5fa;
}
.kpi-top em.up { color: #08734f; background: #ddf8ed; }
.kpi-top em.down { color: #b7182c; background: #ffe2e6; }
.kpi-card small {
  color: #667085;
  font-size: 12px;
  font-weight: 850;
}
.release-decision {
  display: grid;
  grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
  gap: 18px;
  padding: 20px;
  margin-top: 16px;
  background: linear-gradient(135deg, #ffffff, #fbfcff);
}
.release-decision h3 { font-size: 19px; margin-bottom: 7px; }
.release-decision p { color: var(--muted); line-height: 1.5; }
.decision-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}
.decision-grid div {
  border: 1px solid #e3e8f1;
  border-radius: 10px;
  background: #fff;
  padding: 12px;
  display: grid;
  gap: 6px;
}
.decision-grid span { color: var(--muted); font-size: 12px; font-weight: 800; }
.decision-grid strong { font-size: 14px; line-height: 1.25; }
.first-home {
  padding: 44px;
  text-align: center;
  max-width: 980px;
  margin: 40px auto;
}
.first-home h2 { font-size: 30px; margin-bottom: 10px; }
.first-home p { color: var(--muted); max-width: 650px; margin: 0 auto 22px; }
.onboarding-steps {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin: 24px 0;
  text-align: left;
}
.onboarding-steps div {
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 14px;
  background: #fbfcff;
}
.onboarding-steps span { display: block; color: var(--muted); font-size: 13px; margin-top: 5px; }
.home-command-strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin-top: 16px;
}
.home-command-strip button {
  border: 1px solid #dfe5ef;
  border-radius: 12px;
  background: #fff;
  padding: 14px;
  text-align: left;
  display: grid;
  gap: 5px;
  box-shadow: var(--shadow-sm);
  transition: .18s ease;
}
.home-command-strip button:hover {
  transform: translateY(-1px);
  border-color: #cbbdff;
  background: #fbf9ff;
}
.home-command-strip strong {
  font-size: 14px;
  line-height: 1.25;
}
.home-command-strip span {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
}
.card-subtitle {
  margin-top: 4px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
}
.mini-card-head {
  display: flex;
  justify-content: space-between;
  align-items: start;
  gap: 10px;
  margin-bottom: 16px;
}
.mini-card-head span {
  color: var(--muted);
  font-weight: 850;
  font-size: 12px;
}
.severity-card .donut-wrap {
  margin-top: 4px;
}
.home-issue-list { display: grid; }
.home-issue-row {
  border: 0;
  border-bottom: 1px solid #edf0f5;
  background: #fff;
  padding: 18px 20px;
  display: grid;
  grid-template-columns: 78px minmax(0, 1fr);
  grid-template-areas:
    "severity copy"
    "severity meta";
  gap: 8px 14px;
  align-items: center;
  text-align: left;
  color: var(--ink);
  width: 100%;
  min-width: 0;
}
.home-issue-row:hover { background: #fbf9ff; }
.home-issue-row > .badge { grid-area: severity; justify-self: start; align-self: start; }
.home-issue-row .priority-pill {
  grid-area: meta;
  justify-self: start;
  align-self: center;
  margin-top: 1px;
}
.home-issue-copy {
  grid-area: copy;
  display: grid;
  gap: 5px;
  min-width: 0;
}
.home-issue-copy strong {
  font-size: 15px;
  line-height: 1.35;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.home-issue-copy small {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.home-severity {
  display: grid;
  grid-template-columns: 170px minmax(0, 1fr);
  gap: 18px;
  align-items: center;
}
.home-severity .donut-wrap { display: contents; }
.home-severity .legend { min-width: 0; gap: 10px; }
.home-severity .legend-item { font-size: 13px; }
.home-severity .legend-item strong { font-size: 13px; }
.severity-bars {
  display: grid;
  gap: 10px;
  min-width: 0;
}
.severity-bar-row {
  border: 0;
  background: transparent;
  display: grid;
  grid-template-columns: minmax(82px, 1fr) auto;
  gap: 8px 10px;
  align-items: center;
  padding: 0;
  text-align: left;
}
.severity-bar-row span {
  color: #344054;
  font-weight: 850;
  font-size: 13px;
}
.severity-bar-row span i {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 3px;
  margin-right: 8px;
}
.severity-bar-row strong {
  font-size: 13px;
}
.severity-bar-row em {
  grid-column: 1;
  height: 7px;
  border-radius: 999px;
  background: #eef2f8;
  overflow: hidden;
}
.severity-bar-row em b {
  display: block;
  height: 100%;
  width: var(--w);
  border-radius: inherit;
  background: linear-gradient(90deg, var(--primary), #16b887);
}
.severity-bar-row small {
  color: var(--muted);
  font-size: 12px;
  justify-self: end;
}
.journey-result-list {
  display: grid;
  padding: 10px;
  gap: 7px;
}
.journey-result-row {
  border: 1px solid #edf1f7;
  background: linear-gradient(180deg, #fff, #fcfdff);
  border-radius: 12px;
  padding: 12px 14px;
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto;
  grid-template-areas:
    "avatar persona status"
    "avatar task score"
    "avatar friction friction";
  gap: 7px 14px;
  align-items: center;
  text-align: left;
  color: var(--ink);
  min-width: 0;
  box-shadow: 0 6px 16px rgba(16,24,40,.025);
}
.journey-result-row:hover {
  border-color: #d8cdfc;
  background: #fbf9ff;
  box-shadow: 0 10px 24px rgba(103,56,245,.07);
}
.journey-result-row > .persona-avatar { grid-area: avatar; width: 40px; height: 40px; }
.journey-persona, .journey-score {
  display: grid;
  gap: 4px;
  min-width: 0;
}
.journey-persona { grid-area: persona; }
.journey-task { grid-area: task; min-width: 0; }
.journey-result-row > .badge { grid-area: status; justify-self: end; }
.journey-score { grid-area: score; justify-self: stretch; align-self: center; }
.journey-persona strong, .journey-task {
  font-size: 14px;
  font-weight: 850;
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
}
.journey-persona small, .journey-friction {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
}
.journey-friction {
  grid-area: friction;
  background: #f7f9fd;
  border: 1px solid #edf1f7;
  border-radius: 9px;
  padding: 7px 10px;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.journey-score b {
  font-size: 14px;
  justify-self: end;
}
.journey-score i {
  width: 100%;
  height: 8px;
  border-radius: 999px;
  background: #eef2f8;
  overflow: hidden;
  position: relative;
}
.journey-score i:after {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: var(--w);
  background: linear-gradient(90deg, var(--primary), #16b887);
  border-radius: inherit;
}
.hero-status h2 {
  font-size: 25px;
  margin: 0 0 8px;
}
.hero-status p {
  color: var(--muted);
  line-height: 1.5;
  max-width: 760px;
}

.grid { display: grid; gap: 16px; }
.score-grid { grid-template-columns: 1.25fr repeat(6, 1fr); }
.dashboard-grid { grid-template-columns: 1.2fr 1.1fr 1.1fr; }
.lower-grid { grid-template-columns: 1.05fr 1.4fr; }
.two-col { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.three-col { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.kpi-grid { grid-template-columns: 1.25fr repeat(3, minmax(0, 1fr)); }
.overview-main { grid-template-columns: 1.25fr 1.15fr .95fr; margin-top: 14px; }
.home-main {
  grid-template-columns: minmax(0, 1.18fr) minmax(380px, .82fr);
  align-items: start;
  margin-top: 16px;
}
.home-side-stack {
  display: grid;
  gap: 16px;
  min-width: 0;
}
.overview-lower { grid-template-columns: 1fr 1fr; margin-top: 14px; }
.replay-layout { grid-template-columns: minmax(0, 1.45fr) minmax(320px, .7fr); }
.card {
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow); overflow: hidden; min-width: 0;
}
.flush { padding: 0 0 12px; border-bottom: 0; }
.kpi-card {
  padding: 18px;
  min-height: 132px;
  display: grid;
  align-content: space-between;
  border-top: 3px solid transparent;
}
.kpi-card span { color: var(--muted); font-weight: 750; }
.kpi-card strong { font-size: 30px; letter-spacing: 0; line-height: 1.05; }
.kpi-card p { color: var(--muted); line-height: 1.45; }
.kpi-card.good { border-top-color: var(--good); }
.kpi-card.high { border-top-color: var(--high); }
.kpi-card.critical { border-top-color: var(--critical); }
.card-pad { padding: 18px; }
.card-head {
  padding: 16px 18px; border-bottom: 1px solid var(--line); display: flex;
  justify-content: space-between; align-items: center; gap: 12px;
  min-width: 0;
}
.card-head > div { min-width: 0; }
.card-head h3, .card-subtitle {
  overflow: hidden;
  text-overflow: ellipsis;
}
.card-head a, .link-button { color: var(--primary); font-weight: 800; text-decoration: none; background: transparent; border: 0; padding: 0; font-size: 13px; white-space: nowrap; flex: 0 0 auto; }
.metric-card { padding: 18px 20px; min-height: 128px; display: flex; flex-direction: column; justify-content: space-between; }
.metric-title { display: flex; align-items: center; gap: 10px; color: #1c2742; font-weight: 750; }
.metric-icon { width: 24px; height: 24px; border-radius: 8px; display: grid; place-items: center; background: #ece8ff; color: var(--primary); font-size: 12px; }
.metric-main { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; }
.metric-value { font-size: 32px; font-weight: 850; letter-spacing: 0; }
.metric-value small { font-size: 13px; font-weight: 500; color: var(--muted); }
.metric-note { color: var(--good); font-size: 12px; font-weight: 700; }
.ring {
  width: 72px; height: 72px; border-radius: 50%;
  background: conic-gradient(var(--good) var(--angle), #e7ebf2 0);
  position: relative; flex: 0 0 auto;
}
.ring:after { content: ""; position: absolute; inset: 9px; background: white; border-radius: 50%; }

.table-wrap { overflow-x: auto; max-width: 100%; }
table { width: 100%; border-collapse: separate; border-spacing: 0; min-width: 640px; }
.report-history-table table { min-width: 0; }
.report-history-table td { white-space: normal; overflow-wrap: anywhere; }
th, td { padding: 15px 18px; border-bottom: 1px solid #edf0f5; text-align: left; font-size: 14px; vertical-align: middle; line-height: 1.35; }
th { color: #566176; font-size: 11px; font-weight: 850; background: #fbfcff; text-transform: uppercase; letter-spacing: .04em; }
tr:hover td { background: #fbfcff; }
.persona-cell { display: flex; align-items: center; gap: 10px; }
.persona-avatar { width: 34px; height: 34px; font-size: 12px; }
.badge {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; border-radius: 8px; padding: 6px 10px;
  font-weight: 850; font-size: 12px; white-space: nowrap; min-height: 28px;
}
.priority-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 28px;
  border-radius: 999px;
  padding: 5px 10px;
  font-size: 12px;
  font-weight: 850;
  color: #3b2a05;
  background: #fff4cf;
  border: 1px solid #ffe39a;
  white-space: nowrap;
}
.success { background: #dcf8ed; color: #08734f; }
.partial { background: #fff1d8; color: #a85c00; }
.failed { background: #ffe2e6; color: #b7182c; }
.ignored { background: #eff2f7; color: #5b6472; }
.critical { color: var(--critical); background: #ffe8ec; }
.high { color: var(--high); background: #fff0e8; }
.medium { color: var(--warn); background: #fff5d8; }
.low { color: var(--low); background: #edf1ff; }
.info { color: #656975; background: #f1f2f4; }

.issue-list { display: grid; }
.issue-row {
  display: grid; grid-template-columns: auto 1fr 88px; align-items: center; gap: 14px;
  padding: 16px 18px; border-bottom: 1px solid #edf0f5; cursor: pointer;
}
.issue-row.rich { grid-template-columns: auto minmax(0, 1fr) auto auto 88px; }
.issue-row:hover { background: #fbfcff; }
.issue-title { font-weight: 850; margin-bottom: 4px; font-size: 14px; }
.compact-issue-list {
  display: grid;
  gap: 12px;
  padding: 14px;
}
.compact-issue-card {
  border: 1px solid #e6ecf5;
  border-radius: 14px;
  background:
    linear-gradient(180deg, #fff, #fcfdff),
    radial-gradient(circle at 100% 0, rgba(20,184,166,.07), transparent 34%);
  padding: 14px;
  display: grid;
  gap: 12px;
  text-align: left;
  color: var(--ink);
  box-shadow: var(--shadow-sm);
  min-width: 0;
}
.compact-issue-card:hover {
  border-color: #cbbdff;
  background: #fbf9ff;
}
.compact-issue-top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}
.compact-issue-main {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 92px;
  gap: 14px;
  align-items: center;
}
.compact-issue-main strong {
  display: block;
  font-size: 15px;
  line-height: 1.3;
  overflow-wrap: anywhere;
}
.compact-issue-main small {
  display: block;
  margin-top: 5px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
}
.compact-issue-thumb {
  width: 92px;
  height: 58px;
  border-radius: 10px;
  justify-self: end;
}
.compact-issue-meta {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}
.compact-issue-meta span {
  border: 1px solid #edf1f7;
  border-radius: 10px;
  background: #fff;
  padding: 9px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 850;
  min-width: 0;
}
.compact-issue-meta b {
  display: block;
  color: var(--ink);
  margin-top: 2px;
  font-size: 13px;
}
.compact-issue-card p {
  border: 1px solid #edf1f7;
  border-radius: 10px;
  background: #f8faff;
  padding: 9px 11px;
  color: var(--muted);
  line-height: 1.4;
  font-size: 12px;
}
.access-finding-list {
  display: grid;
  gap: 12px;
  padding: 14px;
}
.access-finding-card {
  border: 1px solid #e6ecf5;
  border-radius: 14px;
  background:
    linear-gradient(180deg, #fff, #fcfdff),
    radial-gradient(circle at 100% 0, rgba(103,56,245,.07), transparent 35%);
  padding: 14px;
  display: grid;
  gap: 12px;
  text-align: left;
  color: var(--ink);
  box-shadow: var(--shadow-sm);
  min-width: 0;
}
.access-finding-card:hover {
  border-color: #cbbdff;
  background: #fbf9ff;
}
.access-finding-top {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.access-finding-main {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 92px;
  gap: 14px;
  align-items: center;
}
.access-finding-main strong {
  display: block;
  font-size: 15px;
  line-height: 1.3;
  overflow-wrap: anywhere;
}
.access-finding-main small {
  display: block;
  margin-top: 5px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
}
.access-thumb {
  width: 92px;
  height: 58px;
  border-radius: 10px;
  justify-self: end;
}
.access-persona-line {
  border: 1px solid #edf1f7;
  border-radius: 10px;
  background: #f8faff;
  padding: 9px 11px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
}
.access-evidence-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}
.access-evidence-grid span {
  border: 1px solid #edf1f7;
  border-radius: 10px;
  background: #fff;
  padding: 9px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 850;
}
.access-evidence-grid b {
  display: block;
  color: var(--ink);
  margin-top: 2px;
  font-size: 13px;
}
.access-finding-card p {
  color: #53617a;
  line-height: 1.45;
  font-size: 13px;
}
.thumb {
  width: 80px; height: 46px; border-radius: 6px; border: 1px solid var(--line);
  background: linear-gradient(135deg, #f8fafc, #cfd6e6); position: relative; overflow: hidden;
}
.thumb:after { content: ""; position: absolute; left: 10px; right: 10px; bottom: 8px; height: 8px; background: var(--critical); border-radius: 4px; opacity: .75; }
.thumb.has-real-shot,
.live-replay-screen.has-real-shot {
  background-repeat: no-repeat;
  background-size: cover;
  background-position: top center;
}
.thumb.has-real-shot:after { display: none; }
.thumb.has-real-shot span {
  background: rgba(9, 20, 43, .72);
  color: #fff;
  border-radius: 999px;
  padding: 5px 8px;
}
.screenshot-large {
  width: 100%;
  height: 210px;
  margin: 12px 0 16px;
  background:
    linear-gradient(135deg, rgba(255,255,255,.78), rgba(255,255,255,.15)),
    repeating-linear-gradient(0deg, #f8fafc 0, #f8fafc 28px, #e6ebf4 29px, #e6ebf4 30px),
    linear-gradient(135deg, #dfe6f2, #bdc9dc);
}
.chart-box { min-height: 240px; padding: 18px; display: grid; align-items: center; }
canvas { max-width: 100%; width: 100%; height: 260px; display: block; }
.donut-wrap { display: grid; grid-template-columns: 180px 1fr; gap: 20px; align-items: center; }
.donut {
  width: 170px; height: 170px; border-radius: 50%;
  background: conic-gradient(var(--critical) 0 20%, var(--high) 20% 51%, var(--warn) 51% 79%, var(--low) 79% 91%, var(--info) 91% 100%);
  position: relative; margin: auto;
}
.donut:after { content: "Total\A" attr(data-total); white-space: pre; position: absolute; inset: 49px; background: #fff; border-radius: 50%; display: grid; place-items: center; text-align: center; color: var(--muted); font-weight: 800; font-size: 14px; }
.legend { display: grid; gap: 13px; }
.legend-item { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.swatch { width: 10px; height: 10px; border-radius: 3px; display: inline-block; margin-right: 9px; }
.summary-list { display: grid; gap: 10px; }
.summary-list div { display: flex; justify-content: space-between; gap: 16px; color: #42506a; line-height: 1.35; }
.summary-list strong { color: var(--ink); }
.activity-list, .session-list, .report-blocks { display: grid; gap: 10px; }
.activity-item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 14px 20px;
  border-bottom: 1px solid #edf0f5;
}
.report-block {
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: #fbfcff;
}
.report-block p { color: var(--muted); line-height: 1.5; margin-top: 6px; }
.evidence-explanation {
  margin: 14px 0;
  padding: 18px;
  display: grid;
  grid-template-columns: minmax(240px, .8fr) minmax(0, 1.2fr);
  gap: 18px;
  align-items: start;
  background: linear-gradient(135deg, #fff, #f4fbff);
}
.evidence-explanation p {
  color: var(--muted);
  margin-top: 8px;
  line-height: 1.5;
}
.evidence-engine-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.evidence-engine-grid div {
  border: 1px solid var(--line);
  border-radius: 11px;
  padding: 12px;
  background: #fff;
  display: grid;
  gap: 4px;
}
.evidence-engine-grid div.on { border-color: #b9efd9; background: #f0fbf7; }
.evidence-engine-grid div.off { border-color: #ffe0a6; background: #fff8e8; }
.evidence-engine-grid span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.evidence-engine-grid strong { font-size: 14px; }
.evidence-engine-grid small { color: var(--muted); line-height: 1.35; }
.engine-status-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}
.engine-card {
  padding: 18px;
  display: grid;
  gap: 10px;
  min-height: 170px;
}
.engine-card h3 { font-size: 18px; }
.engine-card p { color: var(--muted); line-height: 1.45; }
.engine-card.on { border-color: #b9efd9; background: linear-gradient(180deg, #fff, #f0fbf7); }
.engine-card.off { border-color: #ffe0a6; background: linear-gradient(180deg, #fff, #fff8e8); }
.audit-log-list {
  display: grid;
  gap: 14px;
}
.audit-log-card { overflow: hidden; }
.audit-event-list {
  display: grid;
  gap: 8px;
  padding: 0 16px 16px;
}
.audit-event-list div {
  display: grid;
  grid-template-columns: 120px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 11px;
  background: #fbfcff;
}
.audit-event-list span {
  color: var(--primary);
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
}
.audit-event-list strong {
  overflow-wrap: anywhere;
  line-height: 1.35;
}
.settings-shell {
  display: grid;
  gap: 16px;
}
.settings-hero {
  padding: 22px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  background: linear-gradient(135deg, #fff, #f4fbff);
}
.settings-hero h2 { font-size: 28px; margin: 4px 0 8px; }
.settings-hero p { color: var(--muted); max-width: 680px; }
.settings-health {
  min-width: 220px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #fff;
  padding: 15px;
  display: grid;
  gap: 8px;
  box-shadow: var(--shadow-sm);
}
.settings-health strong { font-size: 17px; }
.settings-health small { color: var(--muted); overflow-wrap: anywhere; }
.settings-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 16px;
}
.settings-panel {
  padding: 20px;
  display: grid;
  gap: 16px;
}
.settings-section-head {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: flex-start;
}
.settings-section-head p {
  color: var(--muted);
  margin-top: 4px;
  line-height: 1.45;
}
.settings-meta-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.settings-meta-grid div {
  border: 1px solid var(--line);
  border-radius: 11px;
  background: #fbfcff;
  padding: 12px;
}
.settings-meta-grid span {
  display: block;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}
.settings-meta-grid strong {
  display: block;
  margin-top: 4px;
  overflow-wrap: anywhere;
}
.display-mode-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}
.display-mode-card {
  border: 1px solid var(--line);
  border-radius: 13px;
  background: #fff;
  padding: 14px;
  display: grid;
  gap: 7px;
  cursor: pointer;
  min-width: 0;
  box-shadow: var(--shadow-sm);
}
.display-mode-card input { position: absolute; opacity: 0; pointer-events: none; }
.display-mode-card > span {
  width: 38px;
  height: 38px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  color: var(--primary);
  background: #f0ecff;
  font-weight: 900;
}
.display-mode-card strong { font-size: 15px; }
.display-mode-card small { color: var(--muted); line-height: 1.35; }
.display-mode-card.active {
  border-color: #bdaaff;
  background: linear-gradient(180deg, #fff, #faf8ff);
  box-shadow: 0 16px 32px rgba(103,56,245,.13);
}
.settings-toggle-list {
  display: grid;
  gap: 10px;
}
.settings-toggle {
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
  padding: 14px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 12px;
  align-items: start;
}
.settings-toggle input { margin-top: 3px; width: 18px; height: 18px; }
.settings-toggle strong { display: block; }
.settings-toggle small { display: block; color: var(--muted); line-height: 1.35; margin-top: 3px; }
.danger-zone {
  background: linear-gradient(180deg, #fff, #fff8f9);
}
.screenshot-gallery {
  margin: 14px 0;
  overflow: hidden;
}
.screenshot-gallery-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  padding: 16px;
}
.screenshot-gallery figure {
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}
.screenshot-preview {
  min-height: 190px;
  background-size: cover;
  background-position: top center;
  background-repeat: no-repeat;
}
.screenshot-gallery figcaption {
  padding: 10px 12px;
  color: var(--muted);
  font-weight: 850;
  font-size: 13px;
}
.comparison-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}
.compare-metric {
  border: 1px solid var(--line);
  border-radius: 9px;
  padding: 12px;
  background: #fbfcff;
}
.compare-metric span { display: block; color: var(--muted); font-size: 12px; }
.compare-metric strong { display: block; font-size: 24px; margin: 6px 0 2px; }
.compare-metric em { font-style: normal; font-weight: 850; }
.good-text { color: var(--good); }
.bad-text { color: var(--critical); }
.compact { padding: 10px 12px; margin-top: 12px; border-radius: 9px; }

.replay-card { display: grid; grid-template-columns: minmax(0, 1fr) 210px; gap: 16px; padding: 16px; }
.replay-card.enhanced { grid-template-columns: minmax(0, 1.35fr) minmax(240px, .75fr); }
.home-replay {
  padding: 16px;
  display: grid;
  gap: 14px;
}
.home-replay-header {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  align-items: flex-start;
}
.home-replay-header h3 {
  font-size: 17px;
}
.home-replay-header p {
  color: var(--muted);
  margin-top: 4px;
}
.home-replay-frame {
  min-height: 290px;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid #d9e1ee;
  background:
    linear-gradient(120deg, rgba(9,16,34,.34), rgba(9,16,34,.05)),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='900' height='420' viewBox='0 0 900 420'%3E%3Crect width='900' height='420' fill='%23d9dee7'/%3E%3Crect x='0' y='0' width='900' height='62' fill='%23ffffff'/%3E%3Ctext x='35' y='39' font-family='Arial' font-size='18' font-weight='700' fill='%23111827'%3EESTORE%3C/text%3E%3Crect x='45' y='140' width='335' height='110' rx='12' fill='%23ffffff' fill-opacity='.25'/%3E%3Ctext x='58' y='184' font-family='Arial' font-size='34' font-weight='800' fill='%23ffffff'%3EFind the best%3C/text%3E%3Ctext x='58' y='224' font-family='Arial' font-size='34' font-weight='800' fill='%23ffffff'%3Eproducts for you%3C/text%3E%3Ccircle cx='635' cy='220' r='92' fill='%23878b94'/%3E%3Crect x='530' y='130' width='230' height='150' rx='16' fill='%2348505e'/%3E%3C/svg%3E") center/cover no-repeat;
  position: relative;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.45);
}
.home-replay-frame .play {
  width: 58px;
  height: 58px;
  font-size: 13px;
  font-weight: 900;
}
.replay-frame-label {
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 14px;
  background: rgba(8,14,28,.78);
  color: #fff;
  border-radius: 11px;
  padding: 12px 14px;
  display: flex;
  gap: 12px;
  align-items: center;
}
.replay-frame-label strong {
  color: #cbbdff;
}
.replay-frame-label span {
  min-width: 0;
  overflow-wrap: anywhere;
}
.timeline-scrubber {
  position: relative;
  height: 34px;
  border-radius: 999px;
  background: #f3f5fa;
  border: 1px solid #e2e8f1;
}
.timeline-scrubber:before {
  content: "";
  position: absolute;
  left: 15px;
  right: 15px;
  top: 50%;
  height: 4px;
  transform: translateY(-50%);
  border-radius: 999px;
  background: #dce3ee;
}
.timeline-scrubber button {
  position: absolute;
  left: calc(var(--x) * .9 + 5%);
  top: 50%;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 2px solid #fff;
  transform: translate(-50%, -50%);
  background: var(--primary);
  box-shadow: 0 2px 8px rgba(16,24,40,.2);
}
.timeline-scrubber button.warn { background: var(--warn); }
.timeline-scrubber button.fail { background: var(--critical); }
.timeline-scrubber button.active {
  width: 19px;
  height: 19px;
  box-shadow: 0 0 0 6px rgba(103,56,245,.16);
}
.home-replay-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.replay-screen {
  min-height: 260px; border-radius: 9px; overflow: hidden; border: 1px solid var(--line);
  background: linear-gradient(120deg, rgba(9,16,34,.35), rgba(9,16,34,.02)), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='900' height='420' viewBox='0 0 900 420'%3E%3Crect width='900' height='420' fill='%23d9dee7'/%3E%3Crect x='0' y='0' width='900' height='62' fill='%23ffffff'/%3E%3Ctext x='35' y='39' font-family='Arial' font-size='18' font-weight='700' fill='%23111827'%3EESTORE%3C/text%3E%3Crect x='45' y='140' width='335' height='110' rx='12' fill='%23ffffff' fill-opacity='.25'/%3E%3Ctext x='58' y='184' font-family='Arial' font-size='34' font-weight='800' fill='%23ffffff'%3EFind the best%3C/text%3E%3Ctext x='58' y='224' font-family='Arial' font-size='34' font-weight='800' fill='%23ffffff'%3Eproducts for you%3C/text%3E%3Ccircle cx='635' cy='220' r='92' fill='%23878b94'/%3E%3Crect x='530' y='130' width='230' height='150' rx='16' fill='%2348505e'/%3E%3C/svg%3E") center/cover no-repeat;
  position: relative;
}
.cursor-dot {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #fff;
  border: 4px solid var(--primary);
  box-shadow: 0 0 0 8px rgba(103,56,245,.18);
  transform: translate(-50%, -50%);
  transition: .35s ease;
  z-index: 3;
}
.play { position: absolute; inset: 0; margin: auto; width: 70px; height: 70px; border-radius: 50%; background: var(--primary); color: #fff; display: grid; place-items: center; font-size: 26px; box-shadow: 0 15px 35px rgba(103,56,245,.4); }
.replay-meta {
  position: absolute; left: 14px; right: 14px; bottom: 14px; border-radius: 9px;
  background: rgba(8, 14, 28, .72); color: #fff; display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; padding: 12px;
}
.replay-meta span { color: #cdd5e5; font-size: 11px; display: block; margin-bottom: 3px; }
.steps { display: grid; align-content: start; gap: 8px; }
.step { display: grid; grid-template-columns: 44px 1fr; gap: 8px; background: #f8faff; border: 1px solid #eef1f6; border-radius: 8px; padding: 9px; font-size: 12px; text-align: left; color: var(--ink); }
.step.active { border-color: #cbbdff; background: #f5f1ff; }
.step.warn { border-color: #ffd99a; background: #fff9ed; }
.step.fail { border-color: #ffbdc6; background: #fff4f6; }
.speed-controls { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 4px; }
.decision-log {
  border: 1px solid var(--line);
  border-radius: 9px;
  padding: 12px;
  background: #fbfcff;
  color: var(--muted);
  line-height: 1.45;
}
.session-item {
  border: 0;
  border-left: 3px solid transparent;
  border-bottom: 1px solid #edf0f5;
  padding: 14px 16px;
  background: #fff;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  text-align: left;
  width: 100%;
}
.session-item:hover, .session-item.active { background: #f6f2ff; border-left-color: var(--primary); }
.session-item strong { display: block; font-size: 15px; line-height: 1.2; }
.session-item small { display: block; color: var(--muted); margin-top: 4px; line-height: 1.35; }
.session-item em { font-style: normal; color: var(--muted); font-size: 12px; font-weight: 800; }

.toolbar { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.filters { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.filters input, .filters select { min-width: 170px; }
.field { display: grid; gap: 8px; margin-bottom: 16px; }
.field label { font-weight: 850; color: #344054; font-size: 13px; }
.field input, .field select, .field textarea {
  border: 1px solid #d7deea; border-radius: 10px; min-height: 46px; padding: 11px 13px; outline: 0; background: #fff; color: var(--ink); width: 100%;
  box-shadow: 0 1px 0 rgba(16,24,40,.02);
}
.field input::placeholder, .field textarea::placeholder { color: #98a2b3; }
.field textarea { min-height: 104px; resize: vertical; line-height: 1.45; }
.check-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.check-card { border: 1px solid #dce3ee; border-radius: 10px; padding: 13px; display: flex; gap: 10px; align-items: flex-start; background: #fff; line-height: 1.4; }
.check-card input { margin-top: 3px; }
.form-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 18px; flex-wrap: wrap; }
.stat-list { display: grid; gap: 12px; }
.stat-row { display: grid; grid-template-columns: 1fr auto; gap: 12px; align-items: center; }
.bar { height: 9px; background: #e9edf5; border-radius: 999px; overflow: hidden; margin-top: 6px; }
.bar span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--primary), #19c69a); width: var(--w); }

.progress-wrap { display: grid; gap: 16px; }
.progress-bar { height: 12px; border-radius: 999px; background: #edf1f8; overflow: hidden; }
.progress-bar span { height: 100%; width: 0%; display: block; background: linear-gradient(90deg, var(--primary), #16b887); transition: width .4s ease; }
.logs { height: 220px; overflow: auto; background: #09142b; color: #dce6ff; border-radius: 10px; padding: 14px; font-family: Consolas, monospace; font-size: 12px; display: grid; align-content: start; gap: 7px; }
.empty-state, .success-state, .error-state { padding: 36px; text-align: center; color: var(--muted); }
.success-state { color: #08734f; }
.error-state { color: #b7182c; }
.loading-state {
  min-height: 160px;
  display: grid;
  place-items: center;
  gap: 12px;
  color: var(--muted);
}
.loading-state span {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 4px solid #e7eaf3;
  border-top-color: var(--primary);
  animation: spin .8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.project-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  max-width: 1240px;
}
.project-card {
  display: grid;
  gap: 18px;
  padding: 18px;
  border-radius: 14px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.96), rgba(255,255,255,.98)),
    radial-gradient(circle at top right, rgba(103,56,245,.08), transparent 38%);
}
.project-card-head { display: flex; justify-content: space-between; gap: 14px; align-items: flex-start; min-width: 0; }
.project-card-head > div { min-width: 0; }
.project-card-head h3 { font-size: 16px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.project-card-head p { margin-top: 3px; font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mini-score strong { font-size: 34px; line-height: 1; }
.mini-score span { color: var(--muted); margin-left: 3px; }
.mini-score.good strong { color: var(--good); }
.mini-score.warn strong { color: var(--high); }
.mini-score.risk strong { color: var(--critical); }
.project-health-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(142px, auto); gap: 16px; align-items: end; }
.gate-chip {
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 12px 14px;
  min-width: 142px;
  background: #fbfcff;
}
.gate-chip span { display: block; color: var(--muted); font-size: 11px; font-weight: 900; }
.gate-chip strong { display: block; margin-top: 3px; font-size: 13px; line-height: 1.25; }
.gate-chip.fail { background: #fff2f4; border-color: #ffc2cb; }
.gate-chip.warn { background: #fff8e8; border-color: #ffe0a6; }
.gate-chip.pass { background: #f0fbf7; border-color: #b9efd9; }
.project-meta-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}
.project-meta-grid div {
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 11px 10px;
  background: #fbfcff;
  min-width: 0;
}
.project-meta-grid span { display: block; color: var(--muted); font-size: 11px; font-weight: 850; }
.project-meta-grid strong {
  display: block;
  margin-top: 4px;
  font-size: 13px;
  line-height: 1.2;
  overflow: hidden;
  text-overflow: ellipsis;
}
.project-owner {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  padding: 12px;
  border-radius: 12px;
  background: #f8faff;
  border: 1px solid #edf1f7;
}
.small-avatar { width: 32px; height: 32px; font-size: 11px; }
.project-owner small { display: block; color: var(--muted); }
.project-owner em {
  color: #53617a;
  background: #fff;
  border: 1px solid #edf1f7;
  border-radius: 999px;
  padding: 6px 9px;
  font-style: normal;
  font-size: 12px;
  font-weight: 800;
  justify-self: start;
  white-space: nowrap;
}
.project-owner em:first-of-type { grid-column: 2; }
.project-owner em:last-of-type { grid-column: 2; margin-top: -4px; }
.project-actions {
  display: grid;
  grid-template-columns: 1fr 1fr auto;
  gap: 10px;
  margin-top: 2px;
}
.project-actions .secondary,
.project-actions .danger {
  width: 100%;
}
.tests-summary, .report-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 18px;
  padding: 20px;
  margin-bottom: 14px;
  align-items: center;
}
.tests-summary p, .report-hero p { color: var(--muted); margin-top: 6px; }
.tests-summary-grid {
  display: grid;
  grid-template-columns: repeat(3, 110px);
  gap: 10px;
}
.tests-summary-grid div, .report-score {
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 12px;
  background: #fbfcff;
  text-align: center;
}
.tests-summary-grid span, .report-score span { display: block; color: var(--muted); font-size: 11px; font-weight: 900; }
.tests-summary-grid strong, .report-score strong { display: block; font-size: 24px; line-height: 1.1; }
.report-hero { background: linear-gradient(135deg, #fff, #f7f4ff); }
.report-score strong { font-size: 34px; color: var(--primary); }
.report-tabs { margin-bottom: 16px; }
.share-panel, .profile-panel { display: grid; gap: 16px; }
.report-preview-card {
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 18px;
  background: linear-gradient(135deg, #fff, #f7f4ff);
}
.report-preview-card p { color: var(--muted); margin: 8px 0 14px; }
.export-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}
.export-option {
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #fff;
  padding: 18px;
  text-align: left;
  display: grid;
  gap: 8px;
}
.export-option:hover { border-color: #cbbdff; background: #fbf9ff; }
.export-option span { color: var(--muted); font-size: 13px; }
.notification-list { display: grid; gap: 10px; }
.notification-item { display: grid; grid-template-columns: auto 1fr; gap: 12px; padding: 12px; border: 1px solid var(--line); border-radius: 12px; background: #fbfcff; }
.notification-item small { display: block; color: var(--muted); margin-top: 4px; }
.profile-large { display: flex; gap: 14px; align-items: center; padding: 16px; border: 1px solid var(--line); border-radius: 14px; background: #fbfcff; }
.template-grid.modal-template-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  padding: 0;
  overflow: visible;
}
.issue-modal-tabs {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 18px;
  padding: 5px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #f8faff;
}
.issue-modal-tabs span {
  padding: 9px 12px;
  border-radius: 9px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 850;
}
.issue-modal-tabs .active { background: #fff; color: var(--primary); box-shadow: var(--shadow-sm); }
.issue-section, .repro-card {
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 14px;
  background: #fff;
}
.two-mini { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.repro-card ol { margin: 10px 0 0; padding-left: 20px; color: var(--muted); line-height: 1.55; }

.tabs {
  display: inline-flex;
  padding: 5px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
  box-shadow: var(--shadow-sm);
  margin-bottom: 14px;
  max-width: 100%;
  overflow-x: auto;
}
.tab {
  border: 0;
  background: transparent;
  color: var(--muted);
  padding: 10px 14px;
  border-radius: 8px;
  font-weight: 800;
  white-space: nowrap;
}
.tab.active { background: var(--primary); color: #fff; }

.wizard { display: grid; gap: 18px; }
.wizard-steps {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 8px;
}
.wizard-steps span {
  min-height: 42px;
  border-radius: 8px;
  background: #f3f5fa;
  color: #667085;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 8px;
  font-size: 12px;
  font-weight: 850;
}
.wizard-steps span.active { background: var(--primary); color: #fff; }
.wizard-steps span.done { background: #e4f8f0; color: #08734f; }
.persona-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.persona-option {
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 13px;
  display: grid;
  grid-template-columns: auto auto 1fr;
  gap: 10px;
  align-items: start;
  background: #fff;
}
.persona-option p {
  grid-column: 1 / -1;
  color: var(--muted);
  line-height: 1.4;
}
.review-box {
  display: grid;
  gap: 10px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fbfcff;
  padding: 14px;
}
.review-box div {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  border-bottom: 1px solid #edf0f5;
  padding-bottom: 8px;
}
.review-box div:last-child { border-bottom: 0; padding-bottom: 0; }
.review-box span { color: var(--muted); }

.run-console { display: grid; gap: 16px; }
.audit-mode-card {
  border: 1px solid #c9eee8;
  border-radius: 12px;
  background: linear-gradient(135deg, #f0fbf7, #f7f4ff);
  padding: 14px;
  display: grid;
  gap: 5px;
}
.audit-mode-card strong {
  color: var(--ink);
  font-size: 14px;
}
.audit-mode-card p {
  color: var(--muted);
  line-height: 1.45;
}
.run-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.run-stat {
  border: 1px solid var(--line);
  border-radius: 9px;
  padding: 12px;
  background: #fbfcff;
}
.run-stat span { display: block; color: var(--muted); font-size: 12px; margin-bottom: 5px; }
.run-stat strong { font-size: 18px; }

.issue-detail {
  display: grid;
  grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
  gap: 20px;
}
.fix-assistant {
  border: 1px solid #d9cdfd;
  border-radius: 10px;
  padding: 14px;
  background: #faf8ff;
}
.fix-assistant pre {
  overflow: auto;
  background: #09142b;
  color: #dce6ff;
  border-radius: 8px;
  padding: 12px;
  font-size: 12px;
}
.integration-card {
  display: grid;
  gap: 14px;
  min-height: 250px;
}
.integration-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: linear-gradient(135deg, #ede7ff, #e5f8f3);
  color: var(--primary);
  display: grid;
  place-items: center;
  font-weight: 900;
}

.chart-tooltip {
  position: fixed;
  z-index: 100;
  pointer-events: none;
  opacity: 0;
  transform: translateY(-4px);
  background: #101828;
  color: #fff;
  border-radius: 8px;
  padding: 8px 10px;
  font-size: 12px;
  font-weight: 800;
  box-shadow: 0 12px 30px rgba(0,0,0,.22);
  transition: opacity .14s ease, transform .14s ease;
}
.chart-tooltip.show { opacity: 1; transform: translateY(0); }
.detail-top { display: flex; justify-content: space-between; gap: 14px; align-items: center; margin-bottom: 14px; }
.project-hero { padding: 22px; display: flex; justify-content: space-between; align-items: center; gap: 18px; margin-bottom: 16px; background: linear-gradient(135deg, rgba(103,56,245,.08), rgba(20,184,166,.07)), #fff; }
.project-hero h2 { font-size: 26px; margin: 0 0 8px; }
.project-hero p { color: var(--muted); }
.release-gate { min-width: 220px; border-radius: 12px; padding: 16px; border: 1px solid var(--line); background: #fff; }
.release-gate span, .release-gate small { display: block; color: var(--muted); }
.release-gate strong { display: block; font-size: 22px; margin: 5px 0; }
.release-gate.pass { border-color: #b9efd9; background: #f0fbf7; }
.release-gate.warn { border-color: #ffe0a6; background: #fff8e8; }
.release-gate.fail { border-color: #ffc2cb; background: #fff2f4; }
.release-panel { display: grid; grid-template-columns: minmax(240px, .7fr) minmax(0, 1fr) auto; align-items: center; gap: 18px; padding: 18px; margin-bottom: 14px; }
.env-list, .owner-grid, .command-grid, .template-grid, .persona-result-grid, .journey-chip-list, .screenshot-strip { display: grid; gap: 10px; }
.env-list div { display: flex; justify-content: space-between; gap: 12px; padding: 12px; border: 1px solid var(--line); border-radius: 9px; background: #fbfcff; }
.owner-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.owner-grid div { border: 1px solid var(--line); border-radius: 9px; padding: 12px; display: grid; gap: 6px; }
.owner-grid small { color: var(--muted); }
.command-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.template-panel { margin-bottom: 14px; }
.template-grid { grid-template-columns: repeat(5, minmax(180px, 1fr)); padding: 16px; overflow-x: auto; }
.template-card, .test-run-card { border: 1px solid var(--line); background: #fff; border-radius: 12px; padding: 15px; text-align: left; display: grid; gap: 8px; box-shadow: var(--shadow-sm); min-width: 0; line-height: 1.35; }
.template-card strong, .test-run-card strong { display: block; width: 100%; font-size: 14px; line-height: 1.35; overflow-wrap: normal; }
.template-card:hover, .test-run-card:hover { border-color: #cbbdff; background: #faf8ff; }
.template-card span, .template-card small, .test-run-card small { color: var(--muted); }
.test-card-list { display: grid; gap: 10px; padding: 14px; }
.test-history-panel { display: grid; gap: 16px; }
.test-state-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}
.test-state-grid > div {
  border: 1px solid var(--line);
  border-radius: 14px;
  background: linear-gradient(180deg, #fff, #fbfcff);
  padding: 15px;
  display: grid;
  gap: 8px;
  min-width: 0;
  box-shadow: var(--shadow-sm);
}
.test-state-grid span {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  color: var(--primary);
  background: #f0ecff;
  font-size: 12px;
  font-weight: 900;
}
.test-state-grid strong {
  font-size: 24px;
  line-height: 1;
  color: var(--ink);
}
.test-state-grid small {
  color: var(--muted);
  line-height: 1.35;
}
.mobile-only { display: none; }
.mini-run-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 5px; }
.mini-run-grid span { border-radius: 8px; background: #f5f7fb; padding: 8px; color: var(--muted); }
.mini-run-grid b { color: var(--ink); }
.timeline { display: grid; padding: 16px; }
.timeline-item { display: grid; grid-template-columns: 46px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 13px 0; border-bottom: 1px solid #edf0f5; }
.timeline-item span { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font-weight: 900; color: #fff; background: var(--good); }
.timeline-item.warn span { background: var(--warn); }
.timeline-item small { color: var(--muted); }
.persona-result-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.persona-result-grid > div { border: 1px solid var(--line); border-radius: 9px; padding: 12px; display: grid; gap: 8px; }
.persona-result-grid small { color: var(--muted); line-height: 1.35; }
.journey-chip-list { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 14px; }
.journey-chip { border-radius: 999px; background: #f0ecff; color: var(--primary); padding: 10px 13px; font-weight: 850; font-size: 13px; text-align: center; }
.screenshot-strip { grid-template-columns: repeat(3, 1fr); margin-top: 18px; }
.screenshot-tile { width: 100%; height: 96px; display: grid; place-items: center; color: var(--muted); font-weight: 800; }
.confidence-card { border: 1px solid #b9efd9; border-radius: 12px; background: #f0fbf7; padding: 14px; }
.confidence-card p { color: #16664b; margin-top: 8px; line-height: 1.45; }
.fix-block { border: 1px solid var(--line); border-radius: 10px; padding: 12px; margin-top: 10px; background: #fff; }
.fix-block p { color: var(--muted); margin-top: 5px; line-height: 1.45; }
.cursor-dot:after { content: ""; position: absolute; inset: -14px; border-radius: 50%; border: 2px solid rgba(103,56,245,.28); animation: pulse-click 1.2s ease-in-out infinite; }
@keyframes pulse-click { 0% { transform: scale(.6); opacity: .9; } 100% { transform: scale(1.5); opacity: 0; } }

.premium-replay {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(260px, .72fr);
  gap: 16px;
  padding: 16px;
}
.replay-stage {
  position: relative;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #fff;
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}
.replay-persona-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 14px;
  border-bottom: 1px solid #edf0f5;
  background: linear-gradient(180deg, #fff, #fbfcff);
}
.replay-persona-head strong { display: block; font-size: 15px; }
.replay-persona-head small { color: var(--muted); line-height: 1.35; }
.live-replay-screen {
  position: relative;
  min-height: 420px;
  overflow: hidden;
  background:
    linear-gradient(120deg, rgba(5,12,30,.52), rgba(5,12,30,.08)),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='900' height='460' viewBox='0 0 900 460'%3E%3Crect width='900' height='460' fill='%23dbe1eb'/%3E%3Crect y='0' width='900' height='62' fill='%23ffffff'/%3E%3Ctext x='36' y='39' font-family='Arial' font-size='18' font-weight='800' fill='%23111827'%3EESTORE%3C/text%3E%3Crect x='66' y='132' width='315' height='142' rx='16' fill='%23ffffff' fill-opacity='.22'/%3E%3Ctext x='86' y='182' font-family='Arial' font-size='34' font-weight='800' fill='%23ffffff'%3EFind products%3C/text%3E%3Ctext x='86' y='222' font-family='Arial' font-size='34' font-weight='800' fill='%23ffffff'%3Efaster%3C/text%3E%3Crect x='524' y='124' width='230' height='158' rx='18' fill='%23485161'/%3E%3Ccircle cx='635' cy='205' r='58' fill='%23939aa8'/%3E%3Crect x='86' y='298' width='122' height='40' rx='20' fill='%236738f5'/%3E%3C/svg%3E") center/cover no-repeat;
}
.animated-cursor {
  position: absolute;
  width: 22px;
  height: 22px;
  left: 18%;
  top: 65%;
  border-radius: 7px 7px 7px 0;
  background: #fff;
  box-shadow: 0 10px 22px rgba(0,0,0,.22);
  transform: rotate(-12deg);
  animation: replayCursor 6s ease-in-out infinite;
}
.click-ring {
  position: absolute;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  border: 2px solid rgba(103,56,245,.52);
  left: 51%;
  top: 53%;
  opacity: 0;
  animation: replayRing 6s ease-in-out infinite;
}
.scrubber {
  position: relative;
  left: auto;
  right: auto;
  bottom: auto;
  height: 42px;
  margin: 12px 14px 14px;
  border-radius: 14px;
  background: #152139;
  backdrop-filter: blur(12px);
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 14px;
  color: #fff;
}
.scrubber span {
  flex: 1;
  height: 7px;
  border-radius: 999px;
  background: rgba(255,255,255,.22);
  position: relative;
  overflow: hidden;
}
.scrubber span:before {
  content: "";
  position: absolute;
  inset: 0 42% 0 0;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--primary), var(--teal));
}
.scrubber i {
  position: relative;
  left: auto !important;
  flex: 0 0 9px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 0 5px rgba(255,255,255,.18);
}
.replay-event-list {
  display: grid;
  gap: 8px;
  align-content: start;
  max-height: 560px;
  overflow: auto;
  padding-right: 4px;
}
.replay-event-list button {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  text-align: left;
  border: 1px solid var(--line);
  border-radius: 11px;
  padding: 11px;
  background: #fff;
  color: var(--ink);
  font-weight: 800;
}
.replay-event-list button:hover {
  border-color: #cbbdff;
  background: #faf8ff;
}
.replay-event-list small {
  color: var(--primary);
  font-weight: 900;
}
@keyframes replayCursor {
  0%, 100% { left: 18%; top: 65%; }
  28% { left: 54%; top: 52%; }
  58% { left: 72%; top: 28%; }
  82% { left: 38%; top: 36%; }
}
@keyframes replayRing {
  24%, 32% { opacity: .9; transform: scale(.7); }
  44% { opacity: 0; transform: scale(1.35); }
}

.issue-workspace {
  display: grid;
  grid-template-columns: minmax(260px, .8fr) minmax(0, 1.35fr);
  gap: 18px;
  align-items: start;
}
.issue-sticky-summary {
  position: sticky;
  top: 78px;
  display: grid;
  gap: 12px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: linear-gradient(180deg, #fff, #fbfcff);
  padding: 16px;
  min-width: 0;
  box-shadow: var(--shadow-sm);
}
.issue-sticky-summary h2 {
  font-size: 20px;
  line-height: 1.2;
  overflow-wrap: anywhere;
}
.issue-summary div { align-items: flex-start; }
.issue-summary strong {
  text-align: right;
  overflow-wrap: anywhere;
}
.issue-tab-panel { min-width: 0; }
.real-tabs {
  display: flex;
  gap: 8px;
  padding: 6px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #f7f9fd;
  margin-bottom: 14px;
}
.real-tabs button {
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: var(--muted);
  font-weight: 900;
  min-height: 38px;
  padding: 0 14px;
  cursor: pointer;
  white-space: nowrap;
}
.real-tabs button.active {
  background: #fff;
  color: var(--primary);
  box-shadow: var(--shadow-sm);
}
.issue-panel { display: none; }
.issue-panel.active { display: grid; gap: 14px; }
.issue-panel .issue-section {
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
  padding: 14px;
}
.issue-evidence-shot { width: 100%; height: 150px; }

body.modal-lock {
  overflow: hidden;
}
.modal {
  position: fixed;
  inset: 0;
  background: rgba(6, 12, 28, .58);
  display: none;
  align-items: center;
  justify-content: center;
  padding: clamp(14px, 3vw, 34px);
  z-index: 50;
  backdrop-filter: blur(5px);
}
.modal.open { display: flex; }
.modal-card {
  width: min(760px, 100%);
  max-height: min(88dvh, 900px);
  overflow: hidden;
  background: linear-gradient(180deg, #fff, #fbfcff);
  border: 1px solid rgba(215, 222, 234, .95);
  border-radius: 18px;
  box-shadow: 0 30px 90px rgba(9, 20, 43, .34);
  display: flex;
  flex-direction: column;
}
.modal-run-new-ai-ux-test { width: min(1040px, 100%); }
.modal-issue-details { width: min(1180px, 100%); }
.modal-command-center { width: min(860px, 100%); }
.modal-test-templates { width: min(820px, 100%); }
.modal-share-report { width: min(720px, 100%); }
.modal-export-report,
.modal-notifications,
.modal-account,
.modal-new-project,
.modal-edit-project { width: min(640px, 100%); }
.modal-head {
  padding: 22px 24px;
  border-bottom: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  background:
    radial-gradient(circle at 88% 0%, rgba(103,56,245,.09), transparent 34%),
    rgba(255,255,255,.96);
  z-index: 2;
  flex: 0 0 auto;
}
.modal-head h2 {
  font-size: clamp(20px, 2.2vw, 24px);
  line-height: 1.18;
  letter-spacing: 0;
}
.modal-head .icon-button {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  font-size: 15px;
  color: var(--ink);
  background: #fff;
}
.modal-body {
  padding: 24px;
  overflow: auto;
  min-height: 0;
}
.modal-body > * {
  min-width: 0;
}
.modal-body .field {
  margin-bottom: 18px;
}
.modal-body input,
.modal-body select,
.modal-body textarea {
  font-size: 15px;
}
.modal-body .form-actions {
  padding-top: 6px;
}
.modal-body .primary,
.modal-body .secondary,
.modal-body .danger {
  white-space: nowrap;
}
.modal-run-new-ai-ux-test .audit-mode-card {
  margin-top: 6px;
}
.modal-run-new-ai-ux-test .form-actions,
.modal-share-report .form-actions,
.modal-account .form-actions,
.modal-new-project .form-actions,
.modal-edit-project .form-actions {
  border-top: 1px solid #edf0f5;
  margin-top: 20px;
  padding-top: 18px;
}
.modal-notifications .modal-body,
.modal-export-report .modal-body,
.modal-account .modal-body {
  padding: 20px;
}
.toast-stack { position: fixed; right: 18px; bottom: 18px; z-index: 80; display: grid; gap: 10px; }
.toast { background: #101828; color: #fff; padding: 12px 14px; border-radius: 9px; box-shadow: var(--shadow); max-width: 340px; }
.backdrop { display: none; }

.secondary.small, .danger.small, .primary.small { font-size: 13px; min-height: 40px; }
.page-actions .secondary, .page-actions .primary { min-width: 132px; }
.topbar-actions .icon-button { font-size: 12px; font-weight: 900; color: #111827; }
.action-menu-button { display: none; }
.command-center { display: grid; gap: 16px; }
.command-grid-premium { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.command-action {
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #fff;
  padding: 16px;
  text-align: left;
  display: grid;
  gap: 6px;
  box-shadow: var(--shadow-sm);
}
.command-action:hover { border-color: #cbbdff; background: #fbf9ff; }
.command-action span { color: var(--muted); font-size: 13px; line-height: 1.4; }
.project-loading-state {
  display: none;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  margin-bottom: 18px;
}
.project-skeleton {
  min-height: 300px;
  padding: 18px;
  display: grid;
  gap: 14px;
}
.project-skeleton span,
.project-skeleton b,
.project-skeleton i,
.project-skeleton em {
  display: block;
  border-radius: 999px;
  background: linear-gradient(90deg, #eef2f8, #f8faff, #eef2f8);
  background-size: 220% 100%;
  animation: shimmer 1.2s linear infinite;
}
.project-skeleton span { width: 45%; height: 18px; }
.project-skeleton b { width: 75%; height: 10px; }
.project-skeleton i { width: 100%; height: 90px; border-radius: 12px; }
.project-skeleton em { width: 62%; height: 40px; }
@keyframes shimmer { to { background-position: -220% 0; } }
.no-results-state {
  display: none;
  padding: 34px;
  text-align: center;
  max-width: 720px;
  margin-top: 18px;
}
.no-results-state.show { display: block; }
.no-results-state p { color: var(--muted); margin-top: 8px; }
.project-empty { max-width: 900px; margin: 0 auto; }
.test-report-hero .hero-meta-row { margin-top: 14px; }
.report-decision {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(420px, .9fr);
  gap: 18px;
  padding: 18px;
  margin: 14px 0;
  background: linear-gradient(135deg, #fff, #f8f6ff);
}
.report-decision p { color: var(--muted); margin-top: 6px; line-height: 1.5; }
.report-tabs-sticky {
  position: sticky;
  top: 82px;
  z-index: 12;
  margin: 14px 0;
  box-shadow: var(--shadow-sm);
}
.journey-chip.pass { background: #dcf8ed; color: #08734f; }
.journey-chip.warn { background: #fff1d8; color: #a85c00; }
.issue-detail > section:first-child {
  position: sticky;
  top: 74px;
  align-self: start;
}
.issue-evidence-shot {
  display: grid;
  place-items: center;
  color: var(--muted);
  font-weight: 850;
}
.issue-evidence-shot span {
  background: rgba(255,255,255,.86);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 8px 12px;
}
.fix-assistant {
  border: 1px solid #d8cdfc;
  border-radius: 14px;
  padding: 14px;
  background: linear-gradient(180deg, #fff, #fbf9ff);
}
.fix-assistant pre {
  max-height: 260px;
  overflow: auto;
  border-radius: 12px;
  border: 1px solid #1f2a44;
}
.confidence-card p {
  position: relative;
  padding-left: 18px;
}
.confidence-card p:before {
  content: "";
  position: absolute;
  left: 0;
  top: .65em;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--good);
}

@media (max-width: 1180px) {
  .score-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .dashboard-grid, .lower-grid { grid-template-columns: 1fr 1fr; }
  .dashboard-grid .card:last-child { grid-column: span 2; }
  .kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .overview-main, .overview-lower, .replay-layout, .home-main { grid-template-columns: 1fr 1fr; }
  .issue-row.rich { grid-template-columns: auto minmax(0, 1fr) auto; }
  .issue-row.rich .thumb, .issue-row.rich > .badge:last-of-type { display: none; }
  .template-grid { grid-template-columns: repeat(3, minmax(190px, 1fr)); }
  .test-state-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .release-panel { grid-template-columns: 1fr; }
  .home-hero { grid-template-columns: 1fr; }
  .home-hero-panel { border-left: 0; border-top: 1px solid rgba(103,56,245,.13); grid-template-columns: 150px 1fr; }
  .home-command-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .release-decision { grid-template-columns: 1fr; }
  .decision-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .journey-result-row {
    grid-template-columns: 42px minmax(0, 1fr) auto;
    grid-template-areas:
      "avatar persona status"
      "avatar task score"
      "avatar friction friction";
  }
  .journey-friction { white-space: normal; }
  .page-head { align-items: stretch; }
  .page-actions { display: none; }
  .action-menu-button { display: inline-flex; align-self: flex-start; }
  .report-decision { grid-template-columns: 1fr; }
  .evidence-explanation { grid-template-columns: 1fr; }
  .engine-status-grid, .screenshot-gallery-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .settings-layout { grid-template-columns: 1fr; }
  .settings-hero { align-items: stretch; flex-direction: column; }
  .premium-replay { grid-template-columns: 1fr; }
  .issue-workspace { grid-template-columns: 1fr; }
  .issue-sticky-summary { position: static; }
}

@media (max-width: 900px) {
  .sidebar { position: fixed; left: 0; top: 0; transform: translateX(-105%); transition: .22s ease; }
  .sidebar.open { transform: translateX(0); }
  .backdrop.open { display: block; position: fixed; inset: 0; background: rgba(2,8,20,.45); z-index: 15; }
  .main { margin-left: 0; width: 100%; }
  .menu-toggle { display: inline-grid; }
  .topbar { padding: 0 18px; }
  .content { padding: 20px 18px 28px; }
  .page-head { flex-direction: column; }
  .score-grid, .dashboard-grid, .lower-grid, .two-col, .three-col, .kpi-grid, .overview-main, .overview-lower, .replay-layout, .home-main { grid-template-columns: 1fr 1fr; }
  .dashboard-grid .card:last-child { grid-column: auto; }
  .project-switcher { min-width: 220px; }
  .replay-card { grid-template-columns: 1fr; }
  .replay-card.enhanced { grid-template-columns: 1fr; }
  .wizard-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .run-grid, .comparison-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .issue-detail { grid-template-columns: 1fr; }
  .project-hero { align-items: stretch; flex-direction: column; }
  .template-grid { grid-template-columns: repeat(2, minmax(190px, 1fr)); }
  .persona-result-grid, .owner-grid { grid-template-columns: 1fr; }
  .home-hero-copy { padding: 24px; }
  .home-hero-copy h2 { font-size: 27px; }
  .tests-summary, .report-hero { grid-template-columns: 1fr; }
  .tests-summary-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .export-grid, .modal-template-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .project-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .project-loading-state { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .project-meta-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .compact-issue-meta { grid-template-columns: 1fr; }
  .access-evidence-grid { grid-template-columns: 1fr; }
  .two-mini { grid-template-columns: 1fr; }
  .premium-replay { padding: 12px; }
  .live-replay-screen { min-height: 340px; }
  .modal-card {
    width: min(720px, 100%);
    max-height: calc(100dvh - 32px);
  }
  .modal-issue-details,
  .modal-run-new-ai-ux-test {
    width: min(760px, 100%);
  }
  .modal-head { padding: 18px 20px; }
  .modal-body { padding: 20px; }
}

@media (max-height: 900px) and (min-width: 901px) {
  .upgrade-card { display: none; }
  .sidebar { padding-top: 16px; padding-bottom: 12px; }
  .brand { padding-bottom: 14px; }
  .nav-list { padding-bottom: 12px; overflow-x: hidden; overflow-y: auto; }
  .nav-group + .nav-group { margin-top: 8px; padding-top: 8px; }
  .nav-item { min-height: 35px; }
}

@media (max-height: 760px) and (min-width: 901px) {
  .brand-mark { width: 40px; height: 40px; }
  .brand strong { font-size: 18px; }
  .brand span { font-size: 12px; margin-top: 2px; }
  .nav-group-title { padding-bottom: 2px; }
  .nav-item { min-height: 32px; padding-top: 4px; padding-bottom: 4px; }
  .nav-icon { width: 23px; height: 23px; }
}

@media (max-width: 620px) {
  body { font-size: 14px; }
  h1 { font-size: 22px; }
  h2 { font-size: 20px; }
  h3 { font-size: 15px; }
  .topbar { height: auto; min-height: 72px; align-items: stretch; flex-direction: column; padding: 12px; gap: 10px; }
  .topbar-left, .topbar-actions { justify-content: space-between; width: 100%; }
  .project-switcher { min-width: 0; flex: 1; height: 44px; }
  .switcher-label, .env-pill { display: none; }
  .profile div:not(.avatar) { display: none; }
  .content { padding: 16px 12px 24px; }
  .page-actions { width: 100%; overflow-x: auto; padding-bottom: 2px; }
  .primary, .secondary, .danger { padding: 10px 13px; min-height: 40px; }
  .hero-status { flex-direction: column; align-items: stretch; padding: 18px; }
  .hero-status h2 { font-size: 22px; }
  .home-hero { min-height: 0; }
  .home-hero-copy { padding: 20px; }
  .home-hero-copy h2 { font-size: 23px; }
  .home-hero-copy p { font-size: 14px; }
  .home-hero-panel { grid-template-columns: 1fr; padding: 18px; }
  .hero-score-ring { width: 128px; height: 128px; margin: 0 auto; }
  .hero-score-ring strong { font-size: 31px; }
  .home-command-strip { grid-template-columns: 1fr; }
  .hero-meta-row span { max-width: 100%; overflow-wrap: anywhere; }
  .score-grid, .dashboard-grid, .lower-grid, .two-col, .three-col, .kpi-grid, .overview-main, .overview-lower, .replay-layout, .home-main { grid-template-columns: 1fr; }
  .home-severity { grid-template-columns: 1fr; }
  .home-severity .donut { margin: 0 auto; }
  .decision-grid, .onboarding-steps { grid-template-columns: 1fr; }
  .evidence-engine-grid { grid-template-columns: 1fr; }
  .engine-status-grid, .screenshot-gallery-grid { grid-template-columns: 1fr; }
  .display-mode-grid, .settings-meta-grid { grid-template-columns: 1fr; }
  .settings-panel, .settings-hero { padding: 16px; }
  .settings-hero h2 { font-size: 22px; }
  .audit-event-list div { grid-template-columns: 1fr; }
  .release-decision { padding: 16px; }
  .journey-result-list { padding: 8px; }
  .journey-result-row {
    grid-template-columns: 40px minmax(0, 1fr);
    grid-template-areas:
      "avatar persona"
      "avatar task"
      "avatar status"
      "avatar score"
      "friction friction";
    align-items: start;
  }
  .journey-result-row > .badge { justify-self: start; }
  .journey-score b { justify-self: start; }
  .home-issue-row {
    grid-template-columns: 1fr;
    grid-template-areas:
      "severity"
      "copy"
      "meta";
  }
  .home-issue-copy strong, .home-issue-copy small { white-space: normal; }
  .home-replay-frame { min-height: 250px; }
  .home-replay-header { flex-direction: column; }
  .home-replay-actions .secondary { width: 100%; }
  .metric-card { min-height: 116px; }
  .donut-wrap { grid-template-columns: 1fr; }
  .check-grid { grid-template-columns: 1fr; }
  .issue-row { grid-template-columns: auto 1fr; }
  .issue-row.rich { grid-template-columns: 1fr; align-items: stretch; }
  .issue-row .thumb { display: none; }
  .compact-issue-main { grid-template-columns: 1fr; }
  .compact-issue-thumb { width: 100%; height: 90px; justify-self: stretch; }
  .compact-issue-meta { grid-template-columns: 1fr; }
  .compact-issue-list { padding: 10px; }
  .access-finding-main { grid-template-columns: 1fr; }
  .access-thumb { width: 100%; height: 90px; justify-self: stretch; }
  .access-evidence-grid { grid-template-columns: 1fr; }
  .access-finding-list { padding: 10px; }
  .replay-meta { grid-template-columns: 1fr; }
  .replay-screen { min-height: 300px; }
  .modal { align-items: flex-end; padding: 10px; }
  .modal-card { width: 100%; max-height: calc(100dvh - 20px); border-radius: 18px; }
  .modal-head { padding: 16px; align-items: flex-start; }
  .modal-head h2 { font-size: 20px; max-width: calc(100% - 52px); }
  .modal-head .icon-button { width: 40px; height: 40px; flex: 0 0 40px; }
  .modal-body { padding: 16px; }
  .modal-body .grid.two-col,
  .modal-body .two-mini,
  .modal-body .issue-workspace,
  .modal-body .export-grid,
  .modal-body .modal-template-grid,
  .modal-body .command-grid-premium,
  .modal-body .command-grid {
    grid-template-columns: 1fr;
  }
  .modal-body .form-actions {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
  }
  .modal-body .form-actions .primary,
  .modal-body .form-actions .secondary,
  .modal-body .form-actions .danger {
    width: 100%;
    min-height: 46px;
  }
  .modal-body .field input,
  .modal-body .field select,
  .modal-body .field textarea {
    min-height: 48px;
  }
  .modal-run-new-ai-ux-test .progress-wrap .logs { height: 180px; }
  .modal-issue-details .issue-sticky-summary { position: static; }
  .modal-issue-details .issue-evidence-shot { height: 130px; }
  .modal-share-report textarea { min-height: 128px; }
  .modal-template-grid {
    display: grid;
    grid-auto-flow: row;
    grid-auto-columns: unset;
    grid-template-columns: 1fr;
    overflow: visible;
    padding: 0;
    margin-inline: 0;
    scroll-snap-type: none;
  }
  .modal-template-grid .template-card {
    width: 100%;
    min-width: 0;
    scroll-snap-align: unset;
  }
  .wizard-steps { grid-template-columns: 1fr 1fr; }
  .persona-grid, .run-grid, .comparison-grid { grid-template-columns: 1fr; }
  .persona-option { grid-template-columns: auto auto minmax(0, 1fr); }
  .review-box div { flex-direction: column; gap: 4px; }
  .activity-item, .session-item { grid-template-columns: 1fr; }
  .filters, .toolbar { width: 100%; }
  .filters > * { flex: 1 1 100%; min-width: 0; }
  .detail-top { flex-direction: column; align-items: stretch; }
  .project-hero { padding: 18px; }
  .project-hero h2 { font-size: 22px; }
  .release-gate { min-width: 0; }
  .template-grid, .command-grid, .journey-chip-list, .screenshot-strip { grid-template-columns: 1fr; }
  .test-state-grid { grid-template-columns: 1fr; }
  .replay-persona-head { flex-direction: column; align-items: stretch; }
  .real-tabs { overflow-x: auto; flex-wrap: nowrap; }
  .real-tabs button { flex: 0 0 auto; }
  .issue-sticky-summary h2 { font-size: 18px; }
  .issue-summary div { flex-direction: column; gap: 4px; }
  .issue-summary strong { text-align: left; }
  .replay-event-list button { grid-template-columns: 1fr; }
  .tests-summary-grid, .export-grid, .modal-template-grid, .project-grid, .project-meta-grid { grid-template-columns: 1fr; }
  .command-grid-premium, .project-loading-state { grid-template-columns: 1fr; }
  .project-health-row { grid-template-columns: 1fr; align-items: stretch; }
  .project-owner { grid-template-columns: auto minmax(0, 1fr); }
  .project-owner em { grid-column: 2; justify-self: start; white-space: normal; }
  .project-actions { grid-template-columns: 1fr 1fr 1fr; }
  .gate-chip { min-width: 0; }
  .issue-detail > section:first-child { position: static; }
  .report-tabs-sticky { top: 132px; }
  .report-hero, .tests-summary { padding: 16px; }
  .timeline-item { grid-template-columns: 38px 1fr; }
  .timeline-item small { grid-column: 2; }
  .table-wrap:has(#testsTable) { display: none; }
  .mobile-only { display: grid; }
  .issue-row.rich { border: 1px solid #edf0f5; border-radius: 10px; margin: 10px; padding: 14px; background: #fff; }
  .issue-row.rich .priority-pill, .issue-row.rich .badge { justify-self: start; }

  .home-command-strip,
  .home-kpis,
  .journey-result-list,
  .issue-queue-card .issue-list,
  .compact-issue-list,
  .access-finding-list,
  .project-grid,
  .template-grid:not(.modal-template-grid),
  .test-state-grid,
  .engine-status-grid,
  .screenshot-gallery-grid,
  .journey-chip-list,
  .replay-event-list {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(248px, 86%);
    grid-template-columns: none;
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-inline: contain;
    scroll-snap-type: inline mandatory;
    scroll-padding-inline: 10px;
    gap: 12px;
    padding-inline: 10px;
    padding-bottom: 10px;
    margin-inline: -10px;
    -ms-overflow-style: none;
    scrollbar-width: none;
  }
  .home-command-strip::-webkit-scrollbar,
  .home-kpis::-webkit-scrollbar,
  .journey-result-list::-webkit-scrollbar,
  .issue-queue-card .issue-list::-webkit-scrollbar,
  .compact-issue-list::-webkit-scrollbar,
  .access-finding-list::-webkit-scrollbar,
  .project-grid::-webkit-scrollbar,
  .template-grid:not(.modal-template-grid)::-webkit-scrollbar,
  .test-state-grid::-webkit-scrollbar,
  .engine-status-grid::-webkit-scrollbar,
  .screenshot-gallery-grid::-webkit-scrollbar,
  .journey-chip-list::-webkit-scrollbar,
  .replay-event-list::-webkit-scrollbar {
    display: none;
  }
  .home-command-strip > *,
  .home-kpis > *,
  .journey-result-list > *,
  .issue-queue-card .issue-list > *,
  .compact-issue-list > *,
  .access-finding-list > *,
  .project-grid > *,
  .template-grid:not(.modal-template-grid) > *,
  .test-state-grid > *,
  .engine-status-grid > *,
  .screenshot-gallery-grid > *,
  .journey-chip-list > *,
  .replay-event-list > * {
    scroll-snap-align: start;
    min-width: 0;
  }
  .home-kpis .kpi-card,
  .issue-queue-card .issue-row.rich,
  .compact-issue-list .compact-issue-card,
  .access-finding-list .access-finding-card,
  .engine-status-grid .engine-card,
  .test-state-grid > div {
    height: 100%;
  }
  .issue-queue-card .issue-list,
  .compact-issue-list,
  .access-finding-list {
    align-content: stretch;
  }
  .issue-queue-card .issue-row.rich {
    margin: 0;
    width: 100%;
  }
  .project-grid {
    grid-auto-columns: minmax(284px, 90%);
  }
  .journey-result-list,
  .replay-event-list {
    align-content: stretch;
    max-height: none;
  }
  .replay-event-list button {
    align-content: start;
  }
  .screenshot-gallery-grid {
    padding-left: 10px;
    padding-right: 10px;
  }
}