/* Apple.com design language (DESIGN-apple.md) — SF Pro / Inter system stack,
   single Action Blue accent, the Apple radius grammar (5 / 8 / 11 / 18 / pill),
   no decorative gradients, and a flat-chrome elevation model (no shadows on
   cards, buttons, or chrome — only hairlines, surface changes, and frosted
   backdrop-blur create separation). */

:root {
  /* SF Pro on Apple platforms (system-ui / -apple-system), Inter as the
     closest open-source substitute on everything else (per the spec). */
  --font: "SF Pro Text", system-ui, -apple-system, BlinkMacSystemFont, "Inter",
    "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-display: "SF Pro Display", system-ui, -apple-system, BlinkMacSystemFont,
    "Inter", "Helvetica Neue", Helvetica, Arial, sans-serif;

  --bg: #f5f5f7; /* canvas-parchment */
  --surface: rgba(255, 255, 255, 0.72);
  --surface-solid: #ffffff; /* canvas */
  --surface-pearl: #fafafc;
  --ink: #1d1d1f; /* near-black ink */
  --muted: #6e6e73;
  --hairline: #e0e0e0; /* spec hairline */
  --divider-soft: #f0f0f0;

  /* Single brand interactive color (Action Blue) + its focus/dark siblings. */
  --accent: #0066cc; /* Action Blue — the only interactive color */
  --accent-ink: #0058b0; /* darker press/hover tone */
  --accent-focus: #0071e3; /* focus-ring blue */
  --accent-on-dark: #2997ff; /* link blue on dark surfaces */

  /* Functional status colors (semantic data — not interactive chrome). */
  --critical: #ff3b30;
  --major: #ff9500;
  --minor: #ffcc00;
  --pass: #34c759;

  /* Apple radius grammar: none 0 · xs 5 · sm 8 · md 11 · lg 18 · pill 9999. */
  --radius-xs: 5px;
  --radius-sm: 11px; /* md — list cards / popovers */
  --radius: 18px; /* lg — primary cards / utility cards */
  --radius-pill: 9999px;

  /* Flat chrome: elevation comes from hairlines + surface changes, never a
     drop-shadow on UI. The spec reserves shadow for product imagery only. */
  --shadow: none;
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
}

body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--ink);
  letter-spacing: -0.01em; /* Inter runs slightly wider than SF Pro; nudge tight */
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Display headlines use SF Pro Display with the signature "Apple tight"
   negative tracking. Small uppercase labels keep their own positive tracking. */
.result-meta h1,
.placeholder-card h1,
.score-value,
.url-inject-title,
.auth-logo-text strong {
  font-family: var(--font-display);
  letter-spacing: -0.02em;
}

.muted {
  color: var(--muted);
}
.small {
  font-size: 13px;
}
.hidden {
  display: none !important;
}

/* ---------- Auth gate ---------- */
.auth-gate {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg);
}
.auth-gate.hidden {
  display: none !important;
}
.auth-card {
  background: var(--surface-solid);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  padding: 40px 36px 36px;
  width: 100%;
  max-width: 400px;
}
.auth-logo {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 32px;
}
.auth-logo-mark {
  width: 42px;
  height: 42px;
  border-radius: var(--radius-sm);
  background: var(--accent);
  color: #fff;
  font-weight: 700;
  font-size: 22px;
  display: grid;
  place-items: center;
  flex-shrink: 0;
}
.auth-logo-text {
  display: flex;
  flex-direction: column;
  line-height: 1.15;
}
.auth-logo-text strong {
  font-size: 17px;
}
.auth-logo-text span {
  font-size: 12px;
  color: var(--muted);
}
.auth-error {
  background: rgba(255, 59, 48, 0.08);
  border: 1px solid rgba(255, 59, 48, 0.25);
  color: #c4291f;
  border-radius: 11px;
  padding: 10px 14px;
  font-size: 13.5px;
  margin-bottom: 16px;
}
.auth-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.auth-input {
  width: 100%;
  padding: 11px 18px;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-pill);
  font-family: inherit;
  font-size: 15px;
  color: var(--ink);
  background: var(--surface-solid);
  transition: border-color 0.15s, box-shadow 0.15s;
}
.auth-input:focus {
  border-color: var(--accent);
  outline: 2px solid var(--accent-focus);
  outline-offset: 1px;
}
.auth-password-wrap {
  position: relative;
}
.auth-input-password {
  padding-right: 44px;
}
.auth-pw-toggle {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  border: none;
  background: transparent;
  cursor: pointer;
  color: var(--muted);
  padding: 4px;
  border-radius: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.auth-pw-toggle:hover {
  color: var(--ink);
}
.auth-submit {
  width: 100%;
  padding: 12px;
  border-radius: var(--radius-pill);
  border: none;
  background: var(--accent);
  color: #fff;
  font-family: inherit;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  margin-top: 4px;
  transition: background 0.15s, transform 0.05s;
}
.auth-submit:active {
  transform: scale(0.95);
}
.auth-submit:hover {
  background: var(--accent-ink);
}
.auth-submit:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}
.auth-toggle {
  margin: 18px 0 0;
  text-align: center;
  font-size: 13px;
  color: var(--muted);
}
.auth-toggle-link {
  border: none;
  background: transparent;
  color: var(--accent);
  cursor: pointer;
  font-family: inherit;
  font-size: 13px;
  padding: 0;
  margin-left: 4px;
}
.auth-toggle-link:hover {
  text-decoration: underline;
}

/* ---------- User pill in topbar ---------- */
.user-pill {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}
.user-email {
  font-size: 13px;
  color: var(--muted);
  max-width: 180px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.logout-btn {
  font-size: 12px;
  padding: 5px 12px;
  border-radius: 999px;
  border: 1px solid var(--hairline);
  background: transparent;
  cursor: pointer;
  font-family: inherit;
  color: var(--muted);
  transition: background 0.12s;
}
.logout-btn:hover {
  background: rgba(0, 0, 0, 0.05);
  color: var(--ink);
}

/* ---------- Topbar ---------- */
.topbar {
  position: sticky;
  top: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 14px 24px;
  background: rgba(245, 245, 247, 0.8);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid var(--hairline);
}
.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}
.brand-mark {
  width: 36px;
  height: 36px;
  border-radius: var(--radius-sm);
  background: var(--accent);
  color: #fff;
  font-weight: 700;
  font-size: 20px;
  display: grid;
  place-items: center;
}
.brand-text {
  display: flex;
  flex-direction: column;
  line-height: 1.15;
}
.brand-text strong {
  font-size: 15px;
}
.brand-text span {
  font-size: 12px;
  color: var(--muted);
}
.audit-form {
  display: flex;
  flex: 1;
  gap: 10px;
  max-width: 760px;
}
.audit-form input {
  flex: 1;
  height: 40px;
  padding: 0 18px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--hairline);
  background: var(--surface-solid);
  font-size: 14px;
  font-family: inherit;
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.audit-form input:focus {
  border-color: var(--accent);
  outline: 2px solid var(--accent-focus);
  outline-offset: 1px;
}
.audit-form button {
  height: 40px;
  padding: 0 22px;
  border-radius: var(--radius-pill);
  border: none;
  background: var(--accent);
  color: #fff;
  font-size: 14px;
  font-weight: 590;
  font-family: inherit;
  cursor: pointer;
  transition: background 0.15s, transform 0.05s;
}
.audit-form button:hover {
  background: var(--accent-ink);
}
.audit-form button:active {
  transform: scale(0.95);
}
.audit-form button:disabled {
  opacity: 0.5;
  cursor: progress;
}
.audit-form .secondary-btn {
  background: var(--surface-solid);
  color: var(--accent-ink);
  border: 1px solid var(--hairline);
  padding: 0 18px;
}
.audit-form .secondary-btn:hover {
  background: var(--surface);
  border-color: var(--accent);
}
.phase-pill {
  flex-shrink: 0;
  font-size: 12px;
  font-weight: 590;
  color: var(--accent-ink);
  background: rgba(0, 102, 204, 0.1);
  padding: 6px 12px;
  border-radius: 999px;
}

/* Rule-file selector + upload live in the topbar, beside the URL input. */
.topbar .rules-switch {
  flex-shrink: 0;
  margin: 0;
  align-items: center;
}
.topbar .rules-select {
  height: 40px;
  max-width: 180px;
}
.topbar .upload-btn {
  height: 40px;
}
/* Upload success/error is a small transient toast anchored below the topbar. */
.topbar #rules-status {
  position: absolute;
  top: 100%;
  right: 24px;
  margin: 8px 0 0;
  max-width: 340px;
  z-index: 40;
  box-shadow: var(--shadow);
}

/* ---------- Layout ---------- */
.layout {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 18px;
  padding: 18px 28px;
  max-width: none;
  margin: 0 auto;
}
.sidebar {
  display: flex;
  flex-direction: column;
  gap: 20px;
  position: sticky;
  top: 92px;
  align-self: start;
}
.panel {
  background: var(--surface-solid);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  padding: 16px;
  box-shadow: var(--shadow);
}
.panel h2 {
  margin: 0 0 12px;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
}
.panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}
.panel-head h2 {
  margin: 0;
}
.link-btn {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  font-size: 12px;
  color: var(--danger, #ff3b30);
  font-weight: 500;
}
.link-btn:hover {
  text-decoration: underline;
}
.link-btn.hidden {
  display: none;
}
.plain-btn {
  border: none;
  background: rgba(0, 102, 204, 0.1);
  color: var(--accent-ink);
  border-radius: 999px;
  padding: 4px 10px;
  font: inherit;
  font-size: 12px;
  cursor: pointer;
}
.primary-wide {
  width: 100%;
  margin-top: 12px;
  height: 38px;
  border: none;
  border-radius: var(--radius-pill);
  background: var(--accent);
  color: #fff;
  font: inherit;
  font-weight: 590;
  cursor: pointer;
  transition: background 0.15s, transform 0.05s;
}
.primary-wide:active {
  transform: scale(0.95);
}
.primary-wide:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.links-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 36vh;
  overflow: auto;
  margin-top: 10px;
}
.link-row {
  display: grid;
  grid-template-columns: 18px 1fr;
  gap: 8px;
  align-items: start;
  padding: 8px;
  border: 1px solid var(--hairline);
  border-radius: 11px;
  background: rgba(245, 245, 247, 0.7);
  cursor: pointer;
}
.link-row input {
  margin-top: 2px;
}
.link-row strong {
  display: block;
  font-size: 12px;
  line-height: 1.2;
  color: var(--ink);
}
.link-row small {
  display: block;
  margin-top: 2px;
  font-size: 11px;
  line-height: 1.25;
  color: var(--muted);
  overflow-wrap: anywhere;
}
.link-preview {
  display: block;
  width: 100%;
  text-align: left;
  border: none;
  background: transparent;
  padding: 0;
  margin: 0;
  font: inherit;
  cursor: pointer;
}
.link-row.is-active {
  border-color: var(--accent);
  background: rgba(0, 102, 204, 0.08);
}
.link-row.is-active strong {
  color: var(--accent-ink);
}

/* History */
.history-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 50vh;
  overflow: auto;
}
.history-list .empty {
  color: var(--muted);
  font-size: 13px;
  padding: 4px 2px;
}
.history-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background 0.12s;
}
.history-item:hover {
  background: rgba(0, 0, 0, 0.04);
}
.history-item.active {
  background: rgba(0, 102, 204, 0.1);
}
.history-score {
  width: 34px;
  height: 34px;
  flex-shrink: 0;
  border-radius: 8px;
  display: grid;
  place-items: center;
  font-weight: 700;
  font-size: 13px;
  color: #fff;
}
.history-meta {
  min-width: 0;
  flex: 1;
}
.h-del {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  border: none;
  background: none;
  border-radius: 5px;
  color: var(--muted);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.12s, background 0.12s, color 0.12s;
}
.history-item:hover .h-del {
  opacity: 1;
}
.h-del:hover {
  background: rgba(255, 59, 48, 0.12);
  color: var(--danger, #ff3b30);
}
.history-meta .h-title {
  font-size: 13px;
  font-weight: 560;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.history-meta .h-time {
  font-size: 11px;
  color: var(--muted);
}

.rules-switch {
  display: flex;
  gap: 6px;
  margin-bottom: 10px;
}
.rules-select {
  flex: 1;
  min-width: 0;
  height: 32px;
  border-radius: 8px;
  border: 1px solid var(--hairline);
  background: var(--surface-solid);
  font-family: inherit;
  font-size: 12px;
  padding: 0 8px;
  cursor: pointer;
  outline: none;
}
.rules-select:focus {
  border-color: var(--accent);
}
.upload-btn {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  height: 32px;
  padding: 0 12px;
  border-radius: 8px;
  background: var(--accent);
  color: #fff;
  font-size: 12px;
  font-weight: 590;
  cursor: pointer;
  transition: background 0.15s;
}
.upload-btn:hover {
  background: var(--accent-ink);
}
.rules-status {
  font-size: 12px;
  padding: 8px 10px;
  border-radius: 8px;
  margin-bottom: 10px;
  line-height: 1.4;
  white-space: pre-wrap;
}
.rules-status.ok {
  background: rgba(52, 199, 89, 0.14);
  color: #1c7a35;
}
.rules-status.err {
  background: rgba(255, 59, 48, 0.1);
  color: #c4291f;
}

.rules-meta div {
  margin-bottom: 6px;
  font-size: 12px;
}
.rules-meta code {
  font-size: 11px;
  background: rgba(0, 0, 0, 0.05);
  padding: 1px 5px;
  border-radius: 5px;
}

/* ---------- Placeholder ---------- */
.placeholder {
  display: grid;
  place-items: center;
  min-height: 60vh;
}
.placeholder-card {
  max-width: 560px;
  text-align: center;
  background: var(--surface-solid);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  padding: 40px;
  box-shadow: var(--shadow);
}
.placeholder-card h1 {
  font-size: 24px;
  margin: 0 0 14px;
  letter-spacing: -0.02em;
}
.placeholder-card p {
  color: var(--muted);
  line-height: 1.55;
  font-size: 15px;
  margin: 0 0 12px;
  text-align: justify;
}

/* ---------- Live Browser ---------- */
.browser-panel {
  background: var(--surface-solid);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
  margin-bottom: 20px;
}
.browser-chrome {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 12px 14px;
  border-bottom: 1px solid var(--hairline);
  background: var(--surface-pearl);
}
.traffic {
  display: flex;
  gap: 7px;
}
.traffic span {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  display: block;
}
.traffic span:nth-child(1) {
  background: #ff5f57;
}
.traffic span:nth-child(2) {
  background: #febc2e;
}
.traffic span:nth-child(3) {
  background: #28c840;
}
.browser-address {
  min-width: 0;
  padding: 8px 12px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid var(--hairline);
  font-size: 13px;
  color: var(--muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.browser-status {
  font-size: 12px;
  color: var(--accent-ink);
  white-space: nowrap;
}
.browser-screen {
  height: 600px;
  background: #fff;
  display: grid;
  place-items: start center;
  overflow-y: auto;
  overflow-x: hidden;
  position: relative;
}
.browser-screen img {
  width: 100%;
  display: block;
  background: #fff;
}
.browser-loader {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  background: #fff;
  color: var(--muted);
  font-size: 13px;
}
.browser-spinner {
  width: 32px;
  height: 32px;
  border: 3px solid var(--hairline);
  border-top-color: var(--accent-ink);
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
}
@keyframes spin {
  to { transform: rotate(360deg); }
}

/* ---------- Results ---------- */
.result-head {
  display: flex;
  gap: 14px;
  align-items: center;
  background: var(--surface-solid);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  padding: 10px 16px;
  box-shadow: var(--shadow);
  margin-bottom: 20px;
}
.score-card {
  flex-shrink: 0;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  position: relative;
}
.score-ring {
  position: relative;
  width: 64px;
  height: 64px;
}
.score-ring svg {
  transform: rotate(-90deg);
}
.score-center {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  flex-direction: column;
  text-align: center;
}
.score-value {
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1;
}
.score-label {
  font-size: 7px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted);
}
.result-meta {
  flex: 1;
  min-width: 0;
}
/* Title + a small "open page" link icon on one line. */
.result-title-row {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.result-meta h1 {
  font-size: 17px;
  margin: 0;
  letter-spacing: -0.02em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
.result-url-icon {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  color: var(--accent);
  text-decoration: none;
  transition: background 0.12s;
}
.result-url-icon:hover {
  background: rgba(0, 102, 204, 0.1);
}
/* These detail rows are intentionally not shown in the compact header — the
   full breakdown / categories / run metadata live in the downloadable report. */
#result-sub,
.breakdown,
.categories {
  display: none !important;
}
.report-actions {
  flex-shrink: 0;
  display: flex;
  gap: 8px;
  align-items: center;
  margin: 0;
}
.report-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  color: var(--accent-ink);
  text-decoration: none;
  border: 1px solid var(--hairline);
  background: var(--surface-solid);
  transition: background 0.12s, border-color 0.12s;
}
.report-icon-btn:hover {
  background: rgba(0, 102, 204, 0.08);
  border-color: rgba(0, 102, 204, 0.3);
}
.fix-codebase-btn {
  width: auto;
  height: auto;
  border-radius: 999px;
  padding: 6px 12px;
  gap: 6px;
  font-size: 12px;
  font-weight: 590;
  white-space: nowrap;
}
.fix-codebase-label {
  font-family: inherit;
}
.report-sheets-btn {
  color: #1a6e3c;
  border-color: rgba(26, 110, 60, 0.3);
}
.report-sheets-btn:hover {
  background: rgba(26, 110, 60, 0.08);
  border-color: rgba(26, 110, 60, 0.5);
}
.cat-chip {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
}
.cat-name {
  color: var(--muted);
  min-width: 78px;
}
.cat-bar {
  width: 70px;
  height: 6px;
  border-radius: 3px;
  background: rgba(0, 0, 0, 0.08);
  overflow: hidden;
}
.cat-bar > span {
  display: block;
  height: 100%;
  border-radius: 3px;
}
.cat-score {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  min-width: 22px;
  text-align: right;
}
.pf-badge {
  font-weight: 700;
  font-size: 13px;
  padding: 6px 14px;
  border-radius: 999px;
}
.pf-pass {
  background: rgba(52, 199, 89, 0.15);
  color: #1c7a35;
}
.pf-fail {
  background: rgba(255, 59, 48, 0.13);
  color: #c4291f;
}
.sev-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.05);
  font-weight: 560;
}
.sev-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
}
.dot-Critical {
  background: var(--critical);
}
.dot-Major {
  background: var(--major);
}
.dot-Minor {
  background: var(--minor);
}

/* Body split */
.result-body {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: 20px;
  align-items: start;
}

/* AI Advisory + Design-system summary shown side by side beneath the body. */
.result-extras {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: 20px;
  align-items: start;
  margin-top: 20px;
}
/* Collapse the row entirely when neither section has anything to show. */
.result-extras:not(:has(> *:not(.hidden))) {
  display: none;
}

/* ---------- Panel maximize / restore ---------- */
.toolbar-right {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.toolbar-right .filters {
  justify-content: flex-end;
}
.panel-max-btn {
  flex-shrink: 0;
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 8px;
  border: 1px solid var(--hairline);
  background: var(--surface-solid);
  color: var(--muted);
  cursor: pointer;
  transition: background 0.12s, color 0.12s, border-color 0.12s;
}
.panel-max-btn:hover {
  background: rgba(0, 102, 204, 0.08);
  color: var(--accent-ink);
  border-color: rgba(0, 102, 204, 0.3);
}
.findings-toolbar .panel-max-btn,
.toolbar-right .panel-max-btn {
  align-self: center;
}
.panel-max-btn svg {
  display: block;
}
.panel-max-btn .ico-max,
.panel-max-btn .ico-min {
  display: inline-flex;
}
.panel-max-btn .ico-min {
  display: none;
}
.maximizable.maximized .panel-max-btn .ico-max {
  display: none;
}
.maximizable.maximized .panel-max-btn .ico-min {
  display: inline-flex;
}

.panel-max-backdrop {
  position: fixed;
  inset: 0;
  z-index: 590;
  background: rgba(0, 0, 0, 0.42);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}
body.panel-max-open {
  overflow: hidden;
}

/* A maximized panel floats above everything as a full-viewport overlay and
   scrolls internally; restoring returns it to its place in the grid. */
.maximizable.maximized {
  position: fixed !important;
  inset: 16px !important;
  z-index: 600 !important;
  margin: 0 !important;
  width: auto !important;
  height: auto !important;
  max-width: none !important;
  max-height: none !important;
  overflow: auto !important;
  display: flex !important;
  flex-direction: column !important;
  background: var(--surface-solid) !important;
  border: 1px solid var(--hairline) !important;
  border-radius: var(--radius) !important;
  padding: 18px !important;
}
.findings-col {
  background: var(--surface-solid);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  padding: 18px;
  box-shadow: var(--shadow);
}
.findings-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}
.findings-toolbar h2 {
  margin: 0;
  font-size: 17px;
}
.filters {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.filter-btn {
  font-size: 12px;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid var(--hairline);
  background: transparent;
  cursor: pointer;
  font-family: inherit;
  color: var(--muted);
}
.filter-btn.active {
  background: var(--ink);
  color: #fff;
  border-color: var(--ink);
}

.finding-subfilters-row {
  padding: 6px 0 10px;
  border-bottom: 1px solid var(--hairline);
  margin-bottom: 12px;
}
.filters-sub {
  gap: 5px;
}
.filter-btn-sub {
  font-size: 11px;
  padding: 3px 9px;
}

.findings-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-height: 72vh;
  overflow: auto;
}
.finding {
  border: 1px solid var(--hairline);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  cursor: pointer;
  transition: border-color 0.12s, background 0.12s, box-shadow 0.12s;
}
.finding:hover {
  background: rgba(0, 0, 0, 0.02);
}
.finding.selected {
  border-color: var(--accent);
  outline: 2px solid var(--accent-focus);
  outline-offset: 1px;
}
.finding-top {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
  flex-wrap: wrap;
}
.rule-id {
  font-family: "SF Mono", ui-monospace, Menlo, monospace;
  font-size: 11px;
  background: rgba(0, 0, 0, 0.06);
  padding: 2px 7px;
  border-radius: 5px;
  color: var(--ink);
}
.sev-tag {
  font-size: 11px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 5px;
  color: #fff;
}
.sev-Critical {
  background: var(--critical);
}
.sev-Major {
  background: var(--major);
}
.sev-Minor {
  background: #b88600;
}
.diff-tag {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.03em;
  padding: 2px 7px;
  border-radius: 5px;
}
.diff-NEW {
  background: rgba(255, 59, 48, 0.14);
  color: #c4291f;
}
.diff-ONGOING {
  background: rgba(142, 142, 147, 0.18);
  color: #555;
}
.diff-RESOLVED {
  background: rgba(52, 199, 89, 0.16);
  color: #1c7a35;
}
.vp-tag {
  font-size: 10px;
  color: var(--muted);
  margin-left: auto;
}
.finding-msg {
  font-size: 13.5px;
  line-height: 1.45;
}
/* ---------- Finding sub-category groups ---------- */
.finding-group {
  margin-bottom: 6px;
}
.finding-group-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 4px 5px;
  margin-bottom: 6px;
  border-bottom: 1px solid var(--hairline);
}
.finding-group-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}
.finding-group-count {
  font-size: 11px;
  font-weight: 600;
  color: var(--muted);
  background: rgba(0, 0, 0, 0.05);
  border-radius: 99px;
  padding: 1px 7px;
}
.finding-group-body {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 14px;
}

/* ---------- AI Fix on-demand button + panel ---------- */
.finding-ai-fix-btn {
  border: none;
  background: rgba(0, 113, 227, 0.09);
  color: var(--accent-ink);
  cursor: pointer;
  font-family: inherit;
  font-size: 11.5px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 7px;
  transition: background 0.12s;
}
.finding-ai-fix-btn:hover { background: rgba(0, 113, 227, 0.18); }
.finding-ai-fix-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.ai-fix-panel {
  margin-top: 10px;
  border-radius: 10px;
  background: linear-gradient(135deg, #f0f6ff, #f5f5f7);
  border: 1px solid rgba(0, 113, 227, 0.18);
  overflow: hidden;
}
.ai-fix-loading, .ai-fix-error {
  padding: 12px 14px;
  font-size: 12.5px;
  color: var(--muted);
}
.ai-fix-error { color: #c4291f; }
.ai-fix-content { padding: 12px 14px; }
.ai-fix-summary {
  font-size: 12.5px;
  color: var(--ink);
  margin-bottom: 10px;
  line-height: 1.45;
}
.ai-fix-label {
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #888;
  margin-bottom: 3px;
  margin-top: 8px;
}
.ai-fix-label-fix { color: #1c7a35; }
.ai-fix-code-wrap { margin-bottom: 4px; }
.ai-fix-code {
  margin: 0;
  padding: 8px 10px;
  background: #1d1d1f;
  color: #e6e6e6;
  border-radius: 8px;
  font-family: "SF Mono", ui-monospace, Menlo, monospace;
  font-size: 11px;
  line-height: 1.5;
  overflow-x: auto;
  white-space: pre;
}
.ai-fix-fixed .ai-fix-code { background: #0d2d0d; color: #a8f0a8; }
.ai-fix-explanation {
  font-size: 12px;
  color: var(--muted);
  line-height: 1.5;
  margin-top: 10px;
  border-top: 1px solid var(--hairline);
  padding-top: 8px;
}

.finding-fix {
  font-size: 12.5px;
  color: var(--muted);
  margin-top: 6px;
  line-height: 1.4;
}
.finding-fix strong {
  color: var(--ink);
  font-weight: 590;
}

.advisory-section {
  margin-top: 14px;
  padding-top: 16px;
  border-top: 1px solid var(--hairline);
}
.advisory-toolbar {
  align-items: baseline;
}
.advisory-finding {
  cursor: default;
  background: var(--surface-pearl);
}
.confidence-tag,
.score-impact {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.02em;
  padding: 2px 7px;
  border-radius: 5px;
  background: rgba(0, 102, 204, 0.13);
  color: var(--accent-ink);
}
.score-impact {
  background: rgba(52, 199, 89, 0.14);
  color: #1c7a35;
}
.score-impact.muted {
  background: rgba(142, 142, 147, 0.16);
  color: var(--muted);
}

/* AI Advisory tabs (Screenshot Review / Design-System Review) */
.advisory-tabs {
  display: inline-flex;
  background: rgba(0, 0, 0, 0.05);
  border-radius: 11px;
  padding: 3px;
  gap: 3px;
  margin: 4px 0 14px;
}
.adv-tab {
  border: 1px solid transparent;
  background: transparent;
  font-family: inherit;
  font-size: 13px;
  font-weight: 560;
  padding: 6px 16px;
  border-radius: 8px;
  cursor: pointer;
  color: var(--muted);
}
.adv-tab.active {
  background: #fff;
  color: var(--ink);
  border: 1px solid var(--hairline);
}

/* Design-System Review (senior-designer opinion on extracted tokens) */
.token-review-note {
  padding: 14px 4px;
}
.token-overall {
  background: rgba(0, 102, 204, 0.05);
  border: 1px solid var(--hairline);
  border-radius: 11px;
  padding: 12px 14px;
  margin-bottom: 16px;
}
.token-overall-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 6px;
}
.token-overall p {
  margin: 0;
  color: var(--ink);
  font-size: 13.5px;
  line-height: 1.5;
}
.token-maturity {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(142, 142, 147, 0.18);
  color: #555;
}
.token-maturity-systematic {
  background: rgba(52, 199, 89, 0.16);
  color: #1c7a35;
}
.token-maturity-consistent {
  background: rgba(0, 102, 204, 0.14);
  color: var(--accent-ink);
}
.token-maturity-emerging {
  background: rgba(255, 149, 0, 0.16);
  color: #b86b00;
}
.token-maturity-ad-hoc {
  background: rgba(255, 59, 48, 0.14);
  color: #c4291f;
}
.token-dim {
  margin-bottom: 16px;
}
.token-dim-head {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 8px 2px;
}
.token-suggestion {
  margin-bottom: 8px;
}
.token-review-empty {
  padding: 14px 4px;
}
.token-dropped {
  margin-top: 14px;
  border-top: 1px dashed var(--hairline);
  padding-top: 12px;
}
.token-dropped > summary {
  cursor: pointer;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--muted);
}
.token-dropped-note {
  margin: 8px 0 10px;
}
.token-dropped-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 5px 2px;
  opacity: 0.72;
}
.token-soft-tag {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.02em;
  padding: 2px 7px;
  border-radius: 5px;
  background: rgba(142, 142, 147, 0.18);
  color: #555;
  margin-left: auto;
}
.token-soft-resolved {
  background: rgba(52, 199, 89, 0.14);
  color: #1c7a35;
}

/* Viewer */
.viewer-col {
  position: sticky;
  top: 92px;
}
.viewer-toolbar {
  display: flex;
  margin-bottom: 12px;
}
.viewport-tabs {
  display: inline-flex;
  background: rgba(0, 0, 0, 0.05);
  border-radius: 11px;
  padding: 3px;
  gap: 3px;
}
.vp-btn {
  border: 1px solid transparent;
  background: transparent;
  font-family: inherit;
  font-size: 13px;
  font-weight: 560;
  padding: 6px 16px;
  border-radius: 8px;
  cursor: pointer;
  color: var(--muted);
}
.vp-btn.active {
  background: #fff;
  color: var(--ink);
  border-color: var(--hairline);
}
.viewer {
  background: var(--surface-solid);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  padding: 12px;
  box-shadow: var(--shadow);
  max-height: 80vh;
  overflow: auto;
}

/* ---------- Inspector (finding-linked popup) ---------- */
.modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: rgba(0, 0, 0, 0.42);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  display: grid;
  place-items: center;
  padding: 24px;
}
.inspector {
  width: min(560px, 100%);
  max-height: 86vh;
  overflow: auto;
  background: var(--surface-solid);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  padding: 18px 20px;
  animation: insp-pop 0.14s ease-out;
}
@keyframes insp-pop {
  from {
    opacity: 0;
    transform: translateY(8px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
.insp-msg {
  font-size: 13px;
  line-height: 1.45;
  color: var(--ink);
  margin-bottom: 10px;
}
.finding-actions {
  margin-top: 10px;
}
.finding-inspect {
  border: 1px solid var(--hairline);
  background: #fff;
  font: inherit;
  font-size: 12px;
  font-weight: 560;
  color: var(--accent-ink);
  padding: 5px 12px;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s;
}
.finding-inspect:hover {
  background: rgba(0, 102, 204, 0.08);
  border-color: rgba(0, 102, 204, 0.3);
}
.inspector-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}
.insp-title {
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
}
.insp-rule {
  font-family: "SF Mono", ui-monospace, Menlo, monospace;
  font-size: 11px;
  background: rgba(0, 102, 204, 0.1);
  color: var(--accent-ink);
  padding: 2px 7px;
  border-radius: 5px;
}
.insp-close {
  margin-left: auto;
  border: none;
  background: none;
  font-size: 20px;
  line-height: 1;
  color: var(--muted);
  cursor: pointer;
}
.insp-close:hover {
  color: var(--ink);
}
.insp-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}
.insp-tag {
  font-family: "SF Mono", ui-monospace, Menlo, monospace;
  font-size: 12px;
  font-weight: 700;
  color: #9a3412;
  background: #fff3ec;
  padding: 2px 7px;
  border-radius: 5px;
}
.insp-selector {
  flex: 1;
  min-width: 0;
  font-family: "SF Mono", ui-monospace, Menlo, monospace;
  font-size: 11.5px;
  color: var(--ink);
  background: rgba(0, 0, 0, 0.05);
  padding: 4px 8px;
  border-radius: 5px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.insp-copy {
  flex-shrink: 0;
  border: 1px solid var(--hairline);
  background: #fff;
  font: inherit;
  font-size: 11px;
  padding: 4px 10px;
  border-radius: 8px;
  cursor: pointer;
}
.insp-copy:hover {
  background: rgba(0, 0, 0, 0.03);
}
.insp-trigger,
.insp-box {
  font-size: 12.5px;
  margin-bottom: 8px;
}
.insp-trigger-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 2px 0;
}
.insp-k {
  display: inline-block;
  min-width: 64px;
  color: var(--muted);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.insp-v {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: "SF Mono", ui-monospace, Menlo, monospace;
  font-size: 12px;
}
.insp-swatch {
  width: 12px;
  height: 12px;
  border-radius: 3px;
  border: 1px solid rgba(0, 0, 0, 0.2);
  display: inline-block;
}
.insp-styles {
  width: 100%;
  border-collapse: collapse;
  margin-top: 4px;
}
.insp-styles td {
  border-top: 1px solid var(--hairline);
  padding: 4px 6px;
  font-family: "SF Mono", ui-monospace, Menlo, monospace;
  font-size: 11.5px;
  vertical-align: top;
}
.insp-styles td:first-child {
  color: var(--muted);
  width: 42%;
  white-space: nowrap;
}
.insp-styles td:last-child {
  color: var(--ink);
}
.insp-styles tr.insp-hot td {
  background: rgba(255, 149, 0, 0.1);
}
.insp-styles tr.insp-hot td:last-child {
  font-weight: 700;
}
.viewer-stage {
  position: relative;
  width: 100%;
  line-height: 0;
}
.viewer-stage img {
  width: 100%;
  display: block;
  border-radius: 8px;
}
.overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.box {
  position: absolute;
  border: 2px solid transparent;
  border-radius: 3px;
  transition: opacity 0.15s;
}
.box.box-Critical {
  border-color: rgba(255, 59, 48, 0.5);
  background: rgba(255, 59, 48, 0.08);
}
.box.box-Major {
  border-color: rgba(255, 149, 0, 0.5);
  background: rgba(255, 149, 0, 0.08);
}
.box.box-Minor {
  border-color: rgba(184, 134, 0, 0.45);
  background: rgba(255, 204, 0, 0.08);
}
.box.box-active {
  border-width: 3px;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.7), 0 4px 14px rgba(0, 0, 0, 0.3);
  background: rgba(0, 102, 204, 0.12);
  border-color: var(--accent) !important;
  z-index: 5;
}

/* Loading & error */
.loading {
  display: grid;
  place-items: center;
  min-height: 50vh;
  gap: 18px;
}
.spinner {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 4px solid rgba(0, 0, 0, 0.1);
  border-top-color: var(--accent);
  animation: spin 0.8s linear infinite;
}
@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}
.error-box {
  background: rgba(255, 59, 48, 0.08);
  border: 1px solid rgba(255, 59, 48, 0.3);
  color: #c4291f;
  padding: 16px 18px;
  border-radius: var(--radius);
  font-size: 14px;
}

/* ---------- Override tabs (Fixed / Rejected) ---------- */
.filter-fixed.active {
  background: #1c7a35;
  border-color: #1c7a35;
  color: #fff;
}
.filter-rejected.active {
  background: #7a1c1c;
  border-color: #7a1c1c;
  color: #fff;
}
.filter-fixed:not(.active) {
  color: #1c7a35;
  border-color: rgba(28, 122, 53, 0.35);
}
.filter-rejected:not(.active) {
  color: #7a1c1c;
  border-color: rgba(122, 28, 28, 0.35);
}

/* ---------- Override badges on finding cards ---------- */
.override-badge {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.03em;
  padding: 2px 8px;
  border-radius: 5px;
}
.override-badge-fixed {
  background: rgba(52, 199, 89, 0.18);
  color: #1c7a35;
}
.override-badge-rejected {
  background: rgba(255, 59, 48, 0.14);
  color: #c4291f;
}
.finding-overridden {
  opacity: 0.72;
}
.finding-override-btn {
  margin-left: auto;
  border: none;
  background: transparent;
  cursor: pointer;
  font-size: 16px;
  color: var(--muted);
  padding: 0 4px;
  border-radius: 5px;
  line-height: 1;
  flex-shrink: 0;
}
.finding-override-btn:hover {
  background: rgba(0, 0, 0, 0.07);
  color: var(--ink);
}
.rejection-reason {
  font-size: 12px;
  color: var(--muted);
  margin-top: 5px;
  font-style: italic;
}

/* ---------- Override popup ---------- */
.override-backdrop {
  position: fixed;
  inset: 0;
  z-index: 100;
}
#url-inject-backdrop {
  background: rgba(0, 0, 0, 0.35);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.override-popup {
  position: absolute;
  z-index: 101;
  width: 260px;
  background: var(--surface-solid);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-sm);
  overflow: hidden;
}
.override-popup-inner {
  padding: 14px;
}
.override-popup-title {
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 10px;
}
.override-options {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.override-opt {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 12px;
  border-radius: 8px;
  border: 1px solid var(--hairline);
  background: transparent;
  cursor: pointer;
  font-family: inherit;
  font-size: 13px;
  font-weight: 560;
  text-align: left;
  transition: background 0.1s;
}
.override-opt:hover {
  background: rgba(0, 0, 0, 0.04);
}
.override-opt-fixed {
  color: #1c7a35;
  border-color: rgba(28, 122, 53, 0.3);
}
.override-opt-fixed:hover {
  background: rgba(52, 199, 89, 0.08);
}
.override-opt-rejected {
  color: #c4291f;
  border-color: rgba(196, 41, 31, 0.3);
}
.override-opt-rejected:hover {
  background: rgba(255, 59, 48, 0.07);
}
.override-icon {
  font-weight: 700;
}
.override-reason-wrap {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.override-reason {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid var(--hairline);
  border-radius: 8px;
  font-family: inherit;
  font-size: 13px;
  resize: none;
  color: var(--ink);
  background: var(--surface-solid);
}
.override-reason:focus {
  border-color: var(--accent);
  outline: 2px solid var(--accent-focus);
  outline-offset: 1px;
}
.override-reason-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}
.override-reason-btn {
  font-size: 12px;
  padding: 6px 12px;
  border-radius: 8px;
  border: 1px solid var(--hairline);
  cursor: pointer;
  font-family: inherit;
  background: transparent;
}
.override-reason-btn.primary-btn {
  background: #c4291f;
  border-color: #c4291f;
  color: #fff;
}
.override-reason-btn.plain-btn {
  color: var(--muted);
}
.override-undo-wrap {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.override-current-label {
  font-size: 13px;
  color: var(--muted);
  background: rgba(0, 0, 0, 0.04);
  border-radius: 8px;
  padding: 8px 10px;
}
.override-undo-btn {
  border: 1px solid var(--hairline);
  background: transparent;
  cursor: pointer;
  font-family: inherit;
  font-size: 13px;
  padding: 8px 12px;
  border-radius: 8px;
  color: var(--ink);
  transition: background 0.1s;
}
.override-undo-btn:hover {
  background: rgba(0, 0, 0, 0.05);
}

/* ---------- Password-protection pill (compact, re-open button) ---------- */
.auth-banner {
  display: flex;
  align-items: center;
  gap: 6px;
  background: rgba(255, 149, 0, 0.1);
  border: 1px solid rgba(255, 149, 0, 0.3);
  border-radius: 8px;
  padding: 6px 10px;
  margin-bottom: 10px;
}
.auth-banner-icon {
  font-size: 13px;
  flex-shrink: 0;
}
.auth-banner-label {
  font-size: 12px;
  font-weight: 590;
  color: #7a4500;
  flex: 1;
}
.auth-banner-open-btn {
  font-size: 11px;
  font-weight: 590;
  padding: 3px 9px;
  border-radius: 5px;
  border: 1px solid rgba(255, 149, 0, 0.45);
  background: rgba(255, 149, 0, 0.14);
  color: #7a4500;
  cursor: pointer;
  font-family: inherit;
  white-space: nowrap;
  transition: background 0.12s;
}
.auth-banner-open-btn:hover {
  background: rgba(255, 149, 0, 0.26);
}

/* ---------- URL injection popup ---------- */
.url-inject-popup {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 101;
  width: 480px;
  max-width: calc(100vw - 32px);
  background: var(--surface-solid);
  border: 2px solid rgba(255, 149, 0, 0.7);
  border-radius: var(--radius);
}
.url-inject-inner {
  padding: 22px;
}
.url-inject-header {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 16px;
}
.url-inject-icon {
  font-size: 22px;
  flex-shrink: 0;
  margin-top: 2px;
}
.url-inject-title {
  font-size: 15px;
  font-weight: 600;
  margin-bottom: 3px;
}
.url-inject-sub {
  font-size: 12.5px;
  color: var(--muted);
  line-height: 1.45;
}
.url-inject-close {
  margin-left: auto;
  border: none;
  background: transparent;
  cursor: pointer;
  font-size: 16px;
  color: var(--muted);
  padding: 2px 6px;
  border-radius: 5px;
  flex-shrink: 0;
}
.url-inject-close:hover {
  background: rgba(0, 0, 0, 0.07);
  color: var(--ink);
}
.url-inject-textarea {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--hairline);
  border-radius: 11px;
  font-family: "SF Mono", ui-monospace, Menlo, monospace;
  font-size: 12px;
  color: var(--ink);
  background: var(--surface-solid);
  resize: vertical;
  line-height: 1.6;
}
.url-inject-textarea:focus {
  border-color: var(--accent);
  outline: 2px solid var(--accent-focus);
  outline-offset: 1px;
}
.url-inject-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 14px;
}
.url-inject-confirm-btn {
  background: var(--accent);
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 8px 16px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 590;
  cursor: pointer;
  transition: background 0.12s;
}
.url-inject-confirm-btn:hover {
  background: var(--accent-ink);
}
.url-inject-confirm-btn:disabled {
  opacity: 0.6;
  cursor: progress;
}

/* Login-credentials popup */
#login-cred-backdrop {
  background: rgba(0, 0, 0, 0.35);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
#login-cred-popup {
  border-color: rgba(0, 122, 255, 0.7);
}
.cred-label {
  display: block;
  font-size: 12px;
  font-weight: 590;
  color: var(--muted);
  margin: 10px 0 5px;
}
.cred-input {
  width: 100%;
  padding: 9px 12px;
  border: 1px solid var(--hairline);
  border-radius: 10px;
  font-family: inherit;
  font-size: 13px;
  color: var(--ink);
  background: var(--surface-solid);
}
.cred-input:focus {
  border-color: var(--accent);
  outline: 2px solid var(--accent-focus);
  outline-offset: 1px;
}
.login-cred-error {
  margin-top: 12px;
  padding: 9px 12px;
  border-radius: 10px;
  background: rgba(255, 59, 48, 0.1);
  border: 1px solid rgba(255, 59, 48, 0.3);
  color: #b42318;
  font-size: 12.5px;
  line-height: 1.45;
}

@media (max-width: 1100px) {
  .layout {
    grid-template-columns: 1fr;
  }
  .sidebar {
    position: static;
  }
  .result-body {
    grid-template-columns: 1fr;
  }
  .viewer-col {
    position: static;
  }
}

/* Complementary dembrandt design-system lens — visually distinct from the
   authoritative per-element findings, with a clear "not scored" framing. */
.dembrandt-section {
  margin-top: 28px;
  padding: 18px;
  border: 1px dashed var(--hairline);
  border-radius: var(--radius-sm);
  background: rgba(0, 102, 204, 0.04);
}
.dembrandt-toolbar {
  align-items: baseline;
}
.ds-subhead {
  font-size: 16px;
  margin: 16px 0 10px;
}
.ds-table-block {
  margin-bottom: 16px;
}
.ds-table-block h4 {
  font-size: 14px;
  margin: 0 0 4px;
}
.ds-rb-line {
  margin-bottom: 8px;
}
.ds-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.ds-table th,
.ds-table td {
  text-align: left;
  padding: 5px 8px;
  border-bottom: 1px solid var(--hairline);
}
.ds-table th {
  color: var(--muted);
  font-weight: 600;
}
.ds-check {
  border: 1px solid var(--hairline);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  margin: 8px 0;
  background: var(--surface-solid);
}
.ds-check-top {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 6px;
}
.ds-dev {
  margin: 5px 0;
  font-size: 13px;
}
.ds-pill {
  font-size: 11px;
  font-weight: 700;
  border-radius: 999px;
  padding: 2px 9px;
  background: rgba(0, 0, 0, 0.06);
  color: var(--muted);
}
.ds-pill-ok {
  background: #d8f5dd;
  color: #1a7f37;
}
.ds-pill-warn {
  background: #fff1cf;
  color: #8a6d00;
}
.dembrandt-note {
  margin: 4px 0;
}

/* ----------------------------------------------------------------------------
   Desktop "single-screen" dashboard (≥1101px): the whole page never scrolls —
   the app fills the viewport and each region scrolls internally. The screenshot
   viewer is reduced to fit its column, and the AI Advisory + Design-system
   summary sit side by side in a bottom row that also scrolls internally.
   This is layout-only; it changes no behavior.
---------------------------------------------------------------------------- */
@media (min-width: 1101px) {
  html,
  body {
    height: 100%;
  }
  body {
    overflow: hidden; /* the body itself never scrolls */
  }

  /* Make the logged-in app a full-height column: topbar fixed, layout fills. */
  #app:not(.hidden) {
    height: 100vh;
    display: flex;
    flex-direction: column;
  }
  .topbar {
    flex: 0 0 auto;
  }
  .layout {
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
  }

  .sidebar {
    position: static;
    max-height: 100%;
    overflow-y: auto;
    padding-right: 4px;
  }

  /* The content column owns the only fallback scroll (e.g. live-browser phase);
     in the results phase everything is sized to fit so it stays still. */
  .content {
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
  }

  #results:not(.hidden) {
    height: 100%;
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: 16px;
  }
  .result-head {
    flex: 0 0 auto;
    margin-bottom: 0;
  }

  /* Top row (findings + screenshot) and bottom row (advisory + design-system)
     share the remaining height ~58/42, each scrolling inside. */
  .result-body {
    flex: 58 1 0;
    min-height: 0;
    margin-bottom: 0;
    align-items: stretch;
  }
  .result-extras {
    flex: 42 1 0;
    min-height: 0;
    margin-top: 0;
    align-items: stretch;
  }

  /* Left findings card: toolbar pinned, list scrolls. */
  .findings-col {
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }
  .findings-col > .findings-toolbar {
    flex: 0 0 auto;
  }
  .findings-col > #findings-list {
    flex: 1 1 auto;
    min-height: 0;
    max-height: none;
  }

  /* Screenshot viewer: reduced to fill its column height, scrolls internally. */
  .viewer-col {
    position: static;
    min-height: 0;
    display: flex;
    flex-direction: column;
  }
  .viewer {
    flex: 1 1 auto;
    min-height: 0;
    max-height: none;
  }

  /* Both bottom sections become self-contained scroll cards. */
  .result-extras > #advisory-section,
  .result-extras > #dembrandt-section {
    min-height: 0;
    margin: 0;
    overflow: auto;
  }
  .result-extras > #advisory-section {
    border: 1px solid var(--hairline);
    border-radius: var(--radius);
    background: var(--surface-solid);
    padding: 16px;
  }
  /* The advisory section's own inner list must not add a second scrollbar. */
  .result-extras #advisory-list.findings-list {
    max-height: none;
  }
}

/* Narrow screens keep the natural stacked flow (page scroll allowed). */
@media (max-width: 1100px) {
  .result-extras {
    grid-template-columns: 1fr;
  }
}