@import url("../../hero/css/tokens.css");
@import url("../../hero/css/app.css");

*, *::before, *::after { box-sizing: border-box; }

:root {
  --loop-paper: #f8f7f3;
  --loop-surface: #fff;
  --loop-ink: #1b1a19;
  --loop-soft: #706c66;
  --loop-faint: #9b978f;
  --loop-line: #e6e2d9;
  --loop-accent: #5947e8;
  --loop-accent-soft: #efedff;
  --loop-good: #1d8354;
  --loop-good-soft: #e6f4eb;
  --loop-bad: #ba443e;
  --loop-bad-soft: #f8e9e6;
  --loop-warn: #a16b18;
  --loop-warn-soft: #fbf1dc;
  --loop-shadow: 0 14px 36px -20px rgba(27, 26, 25, .28);
}

html, body { margin: 0; min-width: 0; background: var(--loop-paper); }
body { overflow: hidden; color: var(--loop-ink); font: 400 14px/1.4 var(--hpd-font); -webkit-font-smoothing: antialiased; }
button { font: inherit; }

.loop-stage-fit {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--loop-paper);
}

.loop-stage {
  position: absolute;
  top: 0;
  left: 0;
  width: 1440px;
  height: 810px;
  overflow: hidden;
  transform-origin: 0 0;
  background: var(--loop-paper);
}

.loop-browser {
  position: absolute;
  z-index: 20;
  top: 0;
  left: 0;
  right: 0;
  height: 46px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 20px;
  background: #28272a;
  color: #c4c1c7;
  font-size: 12px;
}
.loop-browser span { width: 9px; height: 9px; border-radius: 50%; background: #79777b; }
.loop-browser b { position: absolute; left: 50%; transform: translateX(-50%); font-weight: 500; color: #aaa7ad; }
.loop-browser i { margin-left: auto; font-style: normal; font-size: 18px; color: #a7a3ab; }

.loop-camera { position: absolute; inset: 46px 0 0; transform-origin: 0 0; }
.loop-stack { position: relative; width: 1440px; height: 764px; }
.loop-panel { position: absolute; inset: 0; transform-origin: 50% 32%; pointer-events: none; will-change: opacity, transform, filter; }
.loop-product { position: absolute; inset: 14px 22px 18px; display: flex; overflow: hidden; border: 1px solid #dad5ca; border-radius: 16px; background: var(--loop-paper); box-shadow: 0 22px 52px -28px rgba(27,26,25,.36); }

.loop-sidebar { width: 218px; flex: none; display: flex; flex-direction: column; gap: 3px; padding: 18px 12px 14px; border-right: 1px solid var(--loop-line); background: #fbfaf7; }
.loop-brand { display: flex; align-items: center; gap: 8px; padding: 5px 8px 20px; white-space: nowrap; }
.loop-brand-mark { display: grid; width: 21px; height: 21px; place-items: center; border-radius: 6px; background: var(--loop-accent); color: white; font-size: 11px; font-weight: 700; }
.loop-brand strong { font-size: 14px; letter-spacing: -.02em; }
.loop-brand-switch { margin-left: auto; color: var(--loop-faint); font-size: 10px; }
.loop-nav-label { padding: 15px 9px 6px; color: var(--loop-faint); font-size: 9px; font-weight: 700; letter-spacing: .11em; text-transform: uppercase; }
.loop-nav-item { display: flex; align-items: center; gap: 9px; height: 31px; padding: 0 9px; border-radius: 7px; color: var(--loop-soft); font-size: 12px; }
.loop-nav-item.is-active { background: rgba(89,71,232,.09); color: var(--loop-accent); font-weight: 600; }
.loop-nav-icon { width: 13px; color: currentColor; text-align: center; font-size: 14px; }
.loop-sidebar-foot { display: flex; flex-direction: column; gap: 11px; margin-top: auto; padding: 11px 9px 2px; color: var(--loop-faint); font-size: 11px; }
.loop-sidebar-foot em { margin-left: 4px; padding: 2px 4px; border-radius: 4px; background: var(--loop-warn-soft); color: var(--loop-warn); font-size: 8px; font-style: normal; font-weight: 700; }

.loop-main { min-width: 0; flex: 1; background: var(--loop-paper); }
.loop-topbar { height: 45px; display: flex; align-items: center; padding: 0 22px; border-bottom: 1px solid var(--loop-line); background: var(--loop-surface); color: var(--loop-soft); }
.loop-crumb { display: flex; align-items: center; gap: 8px; font-size: 12px; }
.loop-crumb-mark { color: var(--loop-accent); font-size: 13px; }
.loop-top-actions { margin-left: auto; color: var(--loop-faint); font-size: 11px; }
.loop-main-body { height: calc(100% - 45px); overflow: hidden; padding: 27px 28px 24px; }
.loop-page-head { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 19px; }
.loop-page-head h1 { margin: 0; font-size: 25px; line-height: 1.1; letter-spacing: -.04em; }
.loop-page-head p { margin: 7px 0 0; color: var(--loop-soft); font-size: 12px; }
.loop-date-chip, .loop-pill { display: inline-flex; align-items: center; height: 27px; padding: 0 10px; border: 1px solid var(--loop-line); border-radius: 999px; color: var(--loop-soft); background: var(--loop-surface); font-size: 10.5px; white-space: nowrap; }

.loop-card { border: 1px solid var(--loop-line); border-radius: 11px; background: var(--loop-surface); box-shadow: var(--loop-shadow); }
.loop-card-head { display: flex; align-items: center; gap: 9px; min-height: 42px; padding: 0 15px; border-bottom: 1px solid var(--loop-line); font-size: 12px; }
.loop-card-head .loop-pill, .loop-card-head .loop-live { margin-left: auto; }
.loop-e-badge { display: grid; width: 19px; height: 19px; place-items: center; border-radius: 5px; background: var(--loop-accent-soft); color: var(--loop-accent); font-size: 10px; font-weight: 700; }
.loop-live { color: var(--loop-good); font-size: 10px; }
.loop-live::before { display: inline-block; width: 5px; height: 5px; margin-right: 5px; border-radius: 50%; background: currentColor; content: ""; }
.loop-summary-copy { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; padding: 15px; }
.loop-summary-copy p { min-height: 52px; margin: 0; color: var(--loop-soft); font-size: 11px; line-height: 1.55; }
.loop-summary-copy b, .loop-summary-copy strong { color: var(--loop-ink); font-weight: 600; }

.loop-section-label, .loop-mini-heading { display: flex; align-items: center; gap: 8px; color: var(--loop-ink); font-size: 12px; }
.loop-section-label > span:first-child { color: var(--loop-accent); }
.loop-section-label > span:last-child, .loop-mini-heading > span { margin-left: auto; color: var(--loop-faint); font-size: 10px; font-weight: 400; }
.loop-product--focused { display: block; }
.loop-product--focused .loop-focus-main { width: 100%; min-width: 0; background: var(--loop-paper); }
.loop-product--focused .loop-main-body { padding: 22px 28px 20px; }
.loop-prompt-screen { height: 100%; overflow: hidden; }
.loop-prompt-overview-card { padding: 16px 17px 13px; border: 1px solid var(--loop-line); border-radius: 11px; background: var(--loop-surface); box-shadow: var(--loop-shadow); }
.loop-prompt-topline { display: flex; align-items: center; justify-content: space-between; }
.loop-prompt-eyebrow, .loop-prompt-engine-label, .loop-prompt-meta-label { color: var(--loop-faint); font-size: 9px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.loop-prompt-navigation { display: flex; align-items: center; gap: 7px; color: var(--loop-soft); font-size: 10px; }
.loop-prompt-navigation strong { margin-right: 1px; color: var(--loop-ink); font-size: 10px; font-variant-numeric: tabular-nums; }
.loop-prompt-navigation span { display: grid; width: 25px; height: 25px; place-items: center; border: 1px solid var(--loop-line); border-radius: 7px; color: var(--loop-soft); background: var(--loop-surface); font-size: 16px; line-height: 1; }
.loop-prompt-overview-card h1 { max-width: 900px; margin: 12px 0 0; font-size: 23px; line-height: 1.12; letter-spacing: -.04em; text-wrap: balance; }
.loop-prompt-summary { max-width: 1040px; margin: 10px 0 0; color: var(--loop-soft); font-size: 12px; line-height: 1.45; text-wrap: pretty; }
.loop-prompt-engine-section { margin-top: 14px; }
.loop-prompt-engine-label { margin-bottom: 7px; }
.loop-prompt-engine-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
.loop-prompt-engine-card { display: flex; align-items: center; gap: 8px; min-height: 45px; padding: 8px 10px; border: 1px solid var(--loop-line); border-radius: 8px; background: #fbfbfc; }
.loop-prompt-engine-logo { width: 21px; height: 21px; flex: none; object-fit: contain; }
.loop-prompt-engine-card > span { min-width: 0; }
.loop-prompt-engine-card b, .loop-prompt-engine-card small { display: block; }
.loop-prompt-engine-card b { font-size: 10.5px; }
.loop-prompt-engine-card small { margin-top: 2px; color: var(--loop-soft); font-size: 8.5px; }
.loop-prompt-mentioned { margin-left: auto; color: var(--loop-soft); font-size: 9.5px; font-style: normal; white-space: nowrap; }
.loop-prompt-mentioned::before { display: inline-block; width: 6px; height: 6px; margin-right: 5px; border-radius: 50%; background: var(--loop-good); content: ""; }
.loop-prompt-meta-grid { display: grid; grid-template-columns: 1fr 1.4fr 1fr 1fr 1fr; gap: 12px; margin-top: 14px; padding-top: 11px; border-top: 1px solid var(--loop-line); }
.loop-prompt-meta-item strong { display: block; margin-top: 4px; color: var(--loop-ink); font-size: 10.5px; font-weight: 600; }
.loop-prompt-volume { display: flex; align-items: flex-end; gap: 2px; height: 15px; margin-top: 3px; }
.loop-prompt-volume i { width: 4px; border-radius: 1px; background: var(--loop-good); }
.loop-prompt-volume i:nth-child(1) { height: 6px; }.loop-prompt-volume i:nth-child(2) { height: 9px; }.loop-prompt-volume i:nth-child(3) { height: 12px; }.loop-prompt-volume i:nth-child(4) { height: 15px; }
.loop-prompt-status { display: inline-flex; margin-top: 3px; padding: 3px 8px; border: 1px solid #b7e3c4; border-radius: 999px; color: var(--loop-good); background: var(--loop-good-soft); font-size: 8.5px; font-weight: 600; }
.loop-prompt-overview { margin-top: 13px; }
.loop-prompt-overview h2 { margin: 0; font-size: 17px; letter-spacing: -.03em; }
.loop-prompt-overview > p { margin: 3px 0 8px; color: var(--loop-soft); font-size: 9.5px; }
.loop-prompt-panels { display: grid; grid-template-columns: minmax(0, 1.04fr) minmax(0, 1fr); gap: 10px; }
.loop-trajectory-card, .loop-leaderboard-card { min-width: 0; height: 224px; overflow: hidden; border: 1px solid var(--loop-line); border-radius: 10px; background: var(--loop-surface); box-shadow: var(--loop-shadow); }
.loop-prompt-panel-head { display: flex; align-items: center; gap: 8px; min-height: 37px; padding: 0 11px; border-bottom: 1px solid var(--loop-line); font-size: 10.5px; }
.loop-prompt-panel-head strong { font-size: 10.5px; white-space: nowrap; }
.loop-prompt-panel-chip { padding: 4px 7px; border: 1px solid var(--loop-line); border-radius: 5px; color: var(--loop-soft); font-size: 8.5px; white-space: nowrap; }
.loop-prompt-panel-actions { margin-left: auto; color: var(--loop-faint); font-size: 8.5px; white-space: nowrap; }
.loop-prompt-chart { display: flex; gap: 7px; padding: 13px 11px 5px; }
.loop-prompt-chart-y { display: flex; flex-direction: column; justify-content: space-between; height: 120px; color: var(--loop-faint); font-size: 8px; }
.loop-prompt-chart-main { position: relative; flex: 1; height: 120px; border-bottom: 1px solid var(--loop-line); background: repeating-linear-gradient(to bottom, transparent 0 38px, var(--loop-line) 39px 40px); }
.loop-prompt-chart-main svg { width: 100%; height: 100%; overflow: visible; }
.loop-prompt-chart-main path { fill: none; stroke-width: 2; }
.loop-prompt-chart-main .is-ather { stroke: #2aa77b; }.loop-prompt-chart-main .is-ola { stroke: #d18b1b; }.loop-prompt-chart-main .is-tvs { stroke: #dc4d35; }.loop-prompt-chart-main .is-hero { stroke: #cf4d7e; }
.loop-prompt-chart-x { display: flex; justify-content: space-between; margin: 4px 11px 0 36px; color: var(--loop-faint); font-size: 8px; }
.loop-measure-market { margin-top: 18px; }
.loop-measure-market .loop-trajectory-card, .loop-measure-market .loop-leaderboard-card { height: 290px; }
.loop-measure-market .loop-prompt-chart { padding-top: 17px; }
.loop-measure-market .loop-prompt-chart-y, .loop-measure-market .loop-prompt-chart-main { height: 155px; }
.loop-measure-market .loop-prompt-chart-x { margin-top: 7px; }
.loop-measure-live { display: inline-flex; align-items: center; gap: 5px; margin-left: auto; color: var(--loop-good); font-size: 8.5px; }
.loop-measure-live i { width: 5px; height: 5px; border-radius: 50%; background: currentColor; }
.loop-measure-growth-line { stroke-dasharray: 1; stroke-dashoffset: 1; }
.loop-measure-chart-note { display: flex; justify-content: space-between; margin: 18px 12px 0; padding-top: 12px; border-top: 1px solid var(--loop-line); color: var(--loop-soft); font-size: 9px; }
.loop-measure-chart-note span { display: inline-flex; align-items: center; gap: 6px; }.loop-measure-chart-note span i { width: 7px; height: 7px; border-radius: 50%; background: #2aa77b; }.loop-measure-chart-note strong { color: var(--loop-good); font-weight: 600; }
.loop-measure-market .loop-leaderboard-table th { height: 31px; }.loop-measure-market .loop-leaderboard-table td { height: 34px; }
.loop-measure-market .loop-prompt-chart-main path { stroke-width: 1.35; opacity: .72; }
.loop-measure-market .loop-prompt-chart-main .is-ather { stroke-width: 1.65; opacity: 1; }
.loop-leaderboard-table { width: 100%; border-collapse: collapse; font-size: 8.5px; }
.loop-leaderboard-table th { height: 31px; padding: 0 10px; color: var(--loop-faint); font-size: 7.5px; font-weight: 500; text-align: left; white-space: nowrap; }
.loop-leaderboard-table td { height: 25px; padding: 0 10px; border-top: 1px solid var(--loop-line); color: var(--loop-soft); }
.loop-leaderboard-table td:not(:first-child), .loop-leaderboard-table th:not(:first-child) { text-align: right; font-variant-numeric: tabular-nums; }
.loop-leaderboard-table td:first-child { display: flex; align-items: center; gap: 6px; min-width: 145px; }
.loop-leaderboard-rank { width: 12px; color: var(--loop-faint); font-variant-numeric: tabular-nums; }
.loop-leaderboard-brand { display: flex; align-items: center; gap: 5px; min-width: 0; color: var(--loop-ink); font-weight: 600; white-space: nowrap; }
.loop-leaderboard-brand small { padding: 2px 4px; border: 1px solid var(--loop-line); border-radius: 4px; color: var(--loop-faint); font-size: 7px; font-weight: 500; }
.loop-leaderboard-logo { width: 14px; height: 14px; flex: none; object-fit: contain; }
.loop-leaderboard-score { color: var(--loop-ink) !important; font-weight: 600; }
.loop-leaderboard-table .is-up { color: var(--loop-good); }.loop-leaderboard-table .is-down { color: var(--loop-bad); }
.loop-discover-screen { position: relative; height: 100%; overflow: hidden; }
.loop-discover-head { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 12px; }
.loop-discover-head h1 { margin: 0; font-size: 23px; line-height: 1.1; letter-spacing: -.04em; }
.loop-discover-head p { max-width: 600px; margin: 6px 0 0; color: var(--loop-soft); font-size: 11px; }
.loop-discover-sync { padding: 7px 11px; border: 1px solid var(--loop-line); border-radius: 6px; color: var(--loop-ink); background: var(--loop-surface); font-size: 10px; }
.loop-discover-sources { margin-bottom: 11px; }
.loop-discover-sources-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 7px; color: var(--loop-ink); font-size: 10px; }
.loop-discover-sources-head span { color: var(--loop-faint); font-size: 9px; }
.loop-discover-source-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.loop-discover-source-card { display: flex; align-items: center; gap: 7px; min-width: 0; min-height: 48px; padding: 8px 9px; border: 1px solid var(--loop-line); border-radius: 8px; background: var(--loop-surface); box-shadow: var(--loop-shadow); }
.loop-source-logo { display: block; width: 22px; height: 22px; flex: none; padding: 2px; border-radius: 6px; object-fit: contain; background: #fff; }
.loop-discover-source-card span:not(.loop-source-logo) { min-width: 0; }
.loop-discover-source-card b, .loop-discover-source-card small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.loop-discover-source-card b { font-size: 9.5px; }
.loop-discover-source-card small { margin-top: 2px; color: var(--loop-faint); font-size: 8px; }
.loop-discover-source-card em { margin-left: auto; color: var(--loop-soft); font-size: 8px; font-style: normal; white-space: nowrap; }
.loop-source-connected { width: 6px; height: 6px; flex: none; border-radius: 50%; background: var(--loop-good); }
.loop-discover-body { display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(280px, 1fr); gap: 11px; }
.loop-discover-queries, .loop-discover-reddit { min-width: 0; min-height: 242px; }
.loop-query-caption { padding: 9px 15px 7px; color: var(--loop-soft); font-size: 9px; }
.loop-query-table { table-layout: fixed; }
.loop-query-table th:first-child { width: 52%; }
.loop-query-table td { height: 25px; }
.loop-query-table td:first-child { max-width: none; }
.loop-parity-strip { display: flex; align-items: center; justify-content: space-between; min-height: 33px; padding: 0 15px; border-top: 1px solid var(--loop-line); color: var(--loop-soft); font-size: 9px; }
.loop-parity-strip b { color: var(--loop-accent); font-size: 9px; }
.loop-reddit-summary { padding: 11px 15px 8px; }
.loop-reddit-summary > strong, .loop-reddit-summary > span { display: block; }
.loop-reddit-summary > strong { font-size: 12px; }
.loop-reddit-summary > span { margin-top: 3px; color: var(--loop-soft); font-size: 9px; }
.loop-reddit-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; margin-top: 10px; }
.loop-reddit-stats b { padding: 6px 7px; border-radius: 6px; background: #f5f3ef; font-size: 15px; letter-spacing: -.04em; }
.loop-reddit-stats small { display: block; margin-top: 1px; color: var(--loop-faint); font-size: 8px; font-weight: 400; letter-spacing: 0; }
.loop-reddit-rows { border-top: 1px solid var(--loop-line); }
.loop-reddit-row { display: flex; align-items: flex-start; gap: 8px; min-height: 41px; padding: 8px 15px; border-bottom: 1px solid var(--loop-line); }
.loop-reddit-row:last-child { border-bottom: 0; }
.loop-reddit-bullet { width: 6px; height: 6px; flex: none; margin-top: 4px; border-radius: 50%; background: var(--loop-bad); }
.loop-reddit-bullet.medium { background: var(--loop-warn); }
.loop-reddit-row b, .loop-reddit-row small { display: block; }
.loop-reddit-row b { font-size: 9px; line-height: 1.25; }
.loop-reddit-row small { margin-top: 3px; color: var(--loop-faint); font-size: 8px; }
.loop-discover-synthesis { margin-top: 11px; }
.loop-synthesis-flow { display: flex; align-items: center; gap: 12px; padding: 13px 15px; }
.loop-synthesis-inputs { display: flex; flex-wrap: wrap; gap: 6px; flex: 1; }
.loop-synthesis-inputs span { padding: 5px 7px; border: 1px solid var(--loop-line); border-radius: 5px; color: var(--loop-soft); background: #fbfaf7; font-size: 8.5px; }
.loop-synthesis-arrow { color: var(--loop-accent); font-size: 18px; }
.loop-prompt-card { width: 46%; min-width: 280px; padding: 9px 11px; border: 1px solid #cfc9f9; border-radius: 7px; background: var(--loop-accent-soft); }
.loop-prompt-card span, .loop-prompt-card strong, .loop-prompt-card small { display: block; }
.loop-prompt-card span { color: var(--loop-accent); font-size: 8px; font-weight: 700; text-transform: uppercase; }
.loop-prompt-card strong { margin-top: 4px; font-size: 10px; line-height: 1.25; }
.loop-prompt-card small { margin-top: 5px; color: var(--loop-soft); font-size: 8px; }
.loop-discover-recommendation { display: flex; align-items: center; gap: 9px; min-height: 43px; margin-top: 11px; padding: 0 13px; border: 1px solid #cfc9f9; border-radius: 8px; background: var(--loop-surface); box-shadow: var(--loop-shadow); }
.loop-recommendation-icon { color: var(--loop-accent); font-size: 15px; }
.loop-discover-recommendation span:nth-child(2) { min-width: 0; }
.loop-discover-recommendation small, .loop-discover-recommendation b { display: block; }
.loop-discover-recommendation small { color: var(--loop-faint); font-size: 8px; }
.loop-discover-recommendation b { margin-top: 2px; font-size: 9.5px; }
.loop-discover-recommendation button { margin-left: auto; padding: 6px 9px; border: 0; border-radius: 5px; color: #fff; background: var(--loop-accent); font-size: 8.5px; white-space: nowrap; }
.loop-discover-callout { position: absolute; z-index: 2; display: flex; align-items: center; gap: 6px; padding: 5px 8px; border: 1px solid #d3cef8; border-radius: 999px; color: var(--loop-accent); background: rgba(255,255,255,.96); box-shadow: var(--loop-shadow); font-size: 8.5px; white-space: nowrap; }
.loop-discover-callout i { width: 6px; height: 6px; border-radius: 50%; background: var(--loop-accent); box-shadow: 0 0 0 3px var(--loop-accent-soft); }
.loop-discover-callout--sources { top: 43px; right: 220px; left: auto; }
.loop-discover-callout--synthesis { right: 24px; bottom: 49px; }
.loop-table { width: 100%; border-collapse: collapse; font-size: 9.5px; }
.loop-table th { padding: 7px 15px; color: var(--loop-faint); font-size: 8.5px; font-weight: 500; text-align: left; }
.loop-table td { height: 29px; padding: 0 15px; border-top: 1px solid var(--loop-line); color: var(--loop-soft); }
.loop-table td:not(:first-child), .loop-table th:not(:first-child) { text-align: right; font-variant-numeric: tabular-nums; }
.loop-table td:first-child { max-width: 250px; color: var(--loop-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.loop-prompt-meta { display: flex; align-items: center; gap: 10px; margin: -2px 0 14px; }
.loop-prompt-text { font-size: 12px; font-weight: 600; }
.loop-engine-chips { display: flex; gap: 5px; margin-left: auto; }
.loop-engine-chip { display: inline-flex; align-items: center; gap: 4px; padding: 4px 7px; border: 1px solid var(--loop-line); border-radius: 5px; color: var(--loop-soft); font-size: 8.5px; }
.loop-engine-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--loop-accent); }
.loop-engine-dot.e1 { background: #df8a64; }.loop-engine-dot.e2 { background: #4e9a89; }.loop-engine-dot.e3 { background: #b17fd5; }
.loop-response-table td:first-child { white-space: nowrap; }.loop-response-table td:first-child .loop-engine-dot { display: inline-block; margin-right: 5px; vertical-align: -1px; }.loop-source-dots { display: inline-flex; gap: 3px; }.loop-source-dots i { width: 6px; height: 6px; border-radius: 50%; background: var(--loop-accent); }.loop-source-dots i:nth-child(2) { background: var(--loop-good); }.loop-source-dots i:nth-child(3) { background: var(--loop-warn); }.loop-source-dots i.is-dim { opacity: .2; }
.loop-responses { position: absolute; left: 28px; right: 28px; top: 160px; }
.loop-response-table td:nth-child(2) { max-width: 255px; }
.loop-row-number { display: inline-block; width: 23px; color: var(--loop-faint); font: 9px var(--hpd-mono); }
.loop-mention { padding: 3px 7px; border-radius: 999px; background: var(--loop-good-soft); color: var(--loop-good); font-size: 8.5px; }
.loop-mention.no { background: #f0efec; color: var(--loop-faint); }
.loop-response-modal { position: absolute; z-index: 3; right: 45px; bottom: 54px; width: 480px; padding: 0 17px 14px; border: 1px solid #cfc9f9; border-radius: 11px; background: #fff; box-shadow: 0 22px 45px -18px rgba(27,26,25,.34); }
.loop-modal-head { display: flex; justify-content: space-between; padding: 13px 0 11px; border-bottom: 1px solid var(--loop-line); font-size: 11px; }.loop-modal-head span { color: var(--loop-faint); font-size: 15px; }
.loop-response-modal p { margin: 13px 0; color: var(--loop-soft); font-size: 10px; line-height: 1.55; }
.loop-brand-statuses { display: flex; gap: 14px; color: var(--loop-soft); font-size: 9px; }
.loop-mention-dot { display: inline-block; width: 7px; height: 7px; margin-right: 5px; border-radius: 50%; background: var(--loop-good); }.loop-mention-dot.cited { background: var(--loop-accent); }
.loop-modal-foot { display: flex; gap: 15px; margin-top: 13px; color: var(--loop-faint); font-size: 8.5px; }
.loop-gap-table { position: absolute; right: 28px; bottom: 28px; width: calc(100% - 56px); }
.loop-toggle { display: inline-flex; align-items: center; gap: 8px; margin-left: auto; color: var(--loop-accent); font-size: 9px; font-weight: 500; }.loop-toggle i { position: relative; width: 23px; height: 13px; border-radius: 999px; background: var(--loop-accent); }.loop-toggle i::after { position: absolute; top: 2px; right: 2px; width: 9px; height: 9px; border-radius: 50%; background: #fff; content: ""; }
.loop-gap-score { display: inline-flex; min-width: 27px; justify-content: center; padding: 3px 6px; border-radius: 999px; background: var(--loop-good-soft); color: var(--loop-good); font-weight: 700; }.loop-gap-score.high { background: var(--loop-bad-soft); color: var(--loop-bad); }

.loop-execute-grid { display: grid; grid-template-columns: 205px 1fr 225px; gap: 13px; }
.loop-analysis-progress, .loop-score-card { min-height: 430px; padding: 15px; border: 1px solid var(--loop-line); border-radius: 11px; background: var(--loop-surface); box-shadow: var(--loop-shadow); }
.loop-progress-step { display: flex; align-items: flex-start; gap: 8px; padding: 17px 0 0; color: var(--loop-soft); font-size: 9px; }.loop-progress-step span { display: grid; width: 15px; height: 15px; flex: none; place-items: center; border: 1px solid var(--loop-good); border-radius: 50%; color: var(--loop-good); font-size: 8px; }.loop-progress-step b { padding-top: 2px; font-weight: 500; line-height: 1.3; }
.loop-analysis-ready { margin-top: 21px; padding: 8px; border-radius: 6px; background: var(--loop-good-soft); color: var(--loop-good); font-size: 8px; }
.loop-insight-column { display: grid; gap: 9px; align-content: start; }.loop-insight-tile { padding: 13px; border: 1px solid var(--loop-line); border-radius: 10px; background: var(--loop-surface); box-shadow: var(--loop-shadow); }.loop-insight-tile > div:first-child { display: flex; justify-content: space-between; align-items: center; }.loop-insight-type { color: var(--loop-faint); font-size: 8.5px; text-transform: uppercase; }.loop-insight-tile h3 { margin: 10px 0 5px; font-size: 12px; }.loop-insight-tile p { margin: 0; color: var(--loop-soft); font-size: 9px; }.loop-insight-tile u { color: var(--loop-accent); text-decoration: none; }.loop-grounding { margin-top: 9px; padding: 6px 8px; border: 1px solid var(--loop-line); border-radius: 5px; color: var(--loop-faint); font-size: 8px; }
.loop-score-card { position: relative; }.loop-score-total { display: flex; align-items: baseline; gap: 7px; margin: 20px 0 14px; }.loop-score-total strong { font-size: 37px; letter-spacing: -.06em; }.loop-score-total span { color: var(--loop-faint); font-size: 9px; }.loop-factor { display: grid; grid-template-columns: 1fr 67px 22px; align-items: center; gap: 7px; margin-top: 13px; color: var(--loop-soft); font-size: 9px; }.loop-factor i { height: 5px; overflow: hidden; border-radius: 999px; background: #eeece7; }.loop-factor i b { display: block; height: 100%; border-radius: inherit; background: var(--loop-accent); }.loop-factor strong { color: var(--loop-ink); font-size: 9px; text-align: right; }.loop-high-pill { display: inline-block; margin-top: 21px; padding: 5px 8px; border-radius: 999px; background: var(--loop-good-soft); color: var(--loop-good); font-size: 8.5px; }

.loop-harness-timeline { margin-bottom: 16px; padding: 14px; border: 1px solid var(--loop-line); border-radius: 10px; background: var(--loop-surface); box-shadow: var(--loop-shadow); }.loop-harness-timeline .loop-mini-heading span { color: var(--loop-accent); }.loop-harness-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: 17px; }.loop-harness-step { position: relative; display: flex; flex-direction: column; gap: 6px; min-height: 52px; padding: 9px; border-left: 2px solid var(--loop-line); }.loop-harness-step.is-active { border-color: var(--loop-accent); background: var(--loop-accent-soft); }.loop-harness-step span { color: var(--loop-faint); font: 8px var(--hpd-mono); }.loop-harness-step b { font-size: 9px; line-height: 1.25; }.loop-harness-step i { color: var(--loop-good); font-size: 8px; font-style: normal; }
.loop-harness-grid { display: grid; grid-template-columns: 1fr 260px; gap: 13px; }.loop-artifact-card { min-height: 340px; padding: 18px; border: 1px solid #d7d0fa; border-radius: 11px; background: var(--loop-surface); box-shadow: var(--loop-shadow); }.loop-artifact-top { display: flex; align-items: center; gap: 9px; }.loop-doc-icon { display: grid; width: 26px; height: 30px; place-items: center; border: 1px solid var(--loop-accent); border-radius: 5px; color: var(--loop-accent); }.loop-artifact-top b, .loop-artifact-top small { display: block; }.loop-artifact-top b { font-size: 10px; }.loop-artifact-top small { margin-top: 2px; color: var(--loop-faint); font-size: 8px; }.loop-version-tabs { display: flex; gap: 3px; margin-left: auto; }.loop-version-tabs i, .loop-version-tabs b { padding: 4px 6px; border: 1px solid var(--loop-line); border-radius: 4px; color: var(--loop-faint); font-size: 8px; font-style: normal; }.loop-version-tabs b { border-color: var(--loop-accent); background: var(--loop-accent-soft); color: var(--loop-accent); }.loop-artifact-card h2 { max-width: 490px; margin: 45px 0 9px; font-size: 21px; letter-spacing: -.04em; }.loop-artifact-card p { max-width: 520px; margin: 0; color: var(--loop-soft); font-size: 10px; }.loop-artifact-lines { display: grid; gap: 7px; margin-top: 28px; }.loop-artifact-lines span { display: block; width: 82%; height: 5px; border-radius: 5px; background: #eeece7; }.loop-artifact-lines span:nth-child(2) { width: 67%; }.loop-artifact-lines span:nth-child(3) { width: 74%; }.loop-artifact-card footer { display: flex; justify-content: space-between; margin-top: 29px; padding-top: 12px; border-top: 1px solid var(--loop-line); color: var(--loop-faint); font-size: 9px; }.loop-artifact-card footer b { color: var(--loop-accent); font-weight: 600; }
.loop-integrations { min-height: 340px; padding: 13px; border: 1px solid var(--loop-line); border-radius: 11px; background: var(--loop-surface); box-shadow: var(--loop-shadow); }.loop-segmented { display: flex; padding: 3px; border-radius: 6px; background: #f0efec; font-size: 9px; }.loop-segmented b, .loop-segmented span { flex: 1; padding: 6px; border-radius: 4px; text-align: center; }.loop-segmented b { background: var(--loop-surface); color: var(--loop-ink); box-shadow: 0 2px 5px rgba(27,26,25,.09); }.loop-segmented span { color: var(--loop-faint); }.loop-integration-lanes { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; margin: 16px 0 7px; color: var(--loop-faint); font-size: 8px; }.loop-integration-card { display: flex; align-items: center; gap: 7px; min-height: 32px; border-top: 1px solid var(--loop-line); }.loop-integration-icon { display: block; width: 19px; height: 19px; flex: none; padding: 2px; border: 1px solid var(--loop-line); border-radius: 5px; object-fit: contain; background: #fff; }.loop-integration-card b, .loop-integration-card small { display: block; }.loop-integration-card b { font-size: 8.5px; font-weight: 500; }.loop-integration-card small { margin-top: 2px; color: var(--loop-faint); font-size: 7.5px; }.loop-integration-card em { margin-left: auto; color: var(--loop-faint); font-size: 7.5px; font-style: normal; }.loop-integration-card em.is-connected { color: var(--loop-good); }

.loop-measure-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 13px; }.loop-history-card, .loop-parity-card { min-height: 248px; border: 1px solid var(--loop-line); border-radius: 11px; background: var(--loop-surface); box-shadow: var(--loop-shadow); }.loop-history-row { display: flex; align-items: center; gap: 8px; min-height: 42px; padding: 0 15px; border-bottom: 1px solid var(--loop-line); }.loop-history-check { display: grid; width: 17px; height: 17px; place-items: center; border-radius: 50%; background: var(--loop-good-soft); color: var(--loop-good); font-size: 9px; }.loop-history-row b, .loop-history-row small { display: block; }.loop-history-row b { font-size: 10px; }.loop-history-row small { margin-top: 2px; color: var(--loop-faint); font-size: 8px; }.loop-history-row em { margin-left: auto; color: var(--loop-faint); font-size: 8px; font-style: normal; }.loop-payoff { display: flex; justify-content: space-between; padding: 16px 15px; }.loop-payoff b { color: var(--loop-good); font-size: 11px; }.loop-payoff span { color: var(--loop-faint); font-size: 8.5px; }.loop-parity-number { display: flex; align-items: baseline; gap: 8px; padding: 16px 15px 11px; }.loop-parity-number strong { font-size: 38px; letter-spacing: -.06em; }.loop-parity-number span { color: var(--loop-faint); font-size: 9px; }.loop-counter-row { display: flex; justify-content: space-between; padding: 7px 15px; color: var(--loop-soft); font-size: 9px; }.loop-counter-row b { color: var(--loop-ink); }.loop-parity-line { height: 5px; margin: 8px 15px; overflow: hidden; border-radius: 999px; background: #eeece7; }.loop-parity-line i { display: block; height: 100%; border-radius: inherit; background: var(--loop-accent); }.loop-measure-overview { margin-top: 16px; }.loop-measure-summary { padding: 14px 15px; }.loop-measure-summary p { margin: 0 0 13px; color: var(--loop-soft); font-size: 10px; }.loop-measure-summary p b { color: var(--loop-good); }.loop-tracked-row { display: flex; align-items: center; min-height: 43px; padding: 0 11px; border: 1px solid var(--loop-line); border-radius: 7px; font-size: 10px; }.loop-mini-meter { width: 77px; height: 5px; margin-left: auto; overflow: hidden; border-radius: 999px; background: #eeece7; }.loop-mini-meter i { display: block; width: 72%; height: 100%; background: var(--loop-good); }.loop-tracked-row > strong { width: 42px; margin-left: 10px; color: var(--loop-good); text-align: right; }.loop-queued { margin-left: 16px; color: var(--loop-accent); font-size: 8.5px; }

.loop-animated-block { will-change: opacity; }

@media (max-width: 850px) {
  .loop-product { inset: 8px; }.loop-sidebar { width: 180px; }.loop-main-body { padding: 20px; }.loop-product--focused .loop-main-body { padding: 18px; }.loop-discover-source-grid { grid-template-columns: repeat(2, 1fr); }.loop-discover-body { grid-template-columns: 1fr; }.loop-discover-synthesis { margin-top: 10px; }.loop-synthesis-flow { align-items: flex-start; }.loop-prompt-card { min-width: 240px; }.loop-execute-grid { grid-template-columns: 180px 1fr 200px; }
}