.spq-shell {
  --spq-blue: #315dff;
  --spq-ink: #191821;
  --spq-muted: #5b5770;
  --spq-line: #d6e2ff;
  margin: 0 0 20px;
  padding: 22px;
  border: 1px solid var(--spq-line);
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 12px 32px rgba(27, 50, 93, .07);
  color: var(--spq-ink);
  font-family: Involve, system-ui, sans-serif;
}
.spq-shell[data-context="crm"] {
  border-color: #c8d5e3;
  border-radius: 10px;
  box-shadow: 0 5px 15px rgba(8, 38, 72, .07);
}
.spq-head { display: flex; gap: 18px; align-items: flex-start; justify-content: space-between; }
.spq-eyebrow { display: block; margin-bottom: 5px; color: var(--spq-blue); font-size: 14px; font-weight: 800; letter-spacing: .03em; text-transform: uppercase; }
.spq-head h2 { margin: 0; color: var(--spq-ink); font-size: 21px; line-height: 1.2; font-weight: 800; }
.spq-head p { max-width: 720px; margin: 7px 0 0; color: var(--spq-muted); font-size: 14px; line-height: 1.5; }
.spq-head-note { flex: 0 0 auto; max-width: 230px; padding: 7px 10px; border: 1px solid #dbe5f0; border-radius: 999px; color: #53657a; background: #f7f9fc; font-size: 14px; font-weight: 700; line-height: 1.3; text-align: center; }
.spq-metrics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 18px; }
.spq-metric { min-width: 0; padding: 13px 14px; border: 1px solid #e0e8f2; border-radius: 10px; background: #f8fbff; }
.spq-metric span, .spq-metric small { display: block; color: var(--spq-muted); font-size: 14px; line-height: 1.3; }
.spq-metric strong { display: block; margin: 4px 0 3px; color: var(--spq-ink); font-size: 22px; line-height: 1; font-variant-numeric: tabular-nums; }
.spq-list { display: grid; gap: 10px; margin-top: 12px; }
.spq-loading, .spq-empty, .spq-error { min-height: 84px; display: flex; gap: 10px; align-items: center; justify-content: center; padding: 18px; border: 1px dashed #cbd8e7; border-radius: 10px; color: var(--spq-muted); background: #fbfdff; font-size: 14px; text-align: center; }
.spq-loading span { width: 17px; height: 17px; border: 2px solid #c9d7ff; border-top-color: var(--spq-blue); border-radius: 50%; animation: spq-spin .8s linear infinite; }
.spq-error { color: #a42639; border-color: #f0b8c2; background: #fff7f8; }
@keyframes spq-spin { to { transform: rotate(360deg); } }
.spq-card { position: relative; overflow: hidden; border: 1px solid #dce5ef; border-radius: 11px; background: #fff; }
.spq-card::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 4px; background: #e5a019; }
.spq-card[data-severity="critical"]::before, .spq-card[data-severity="high"]::before { background: #d9273e; }
.spq-card[data-severity="normal"]::before { background: #159564; }
.spq-card-main { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; gap: 13px; align-items: start; padding: 15px 15px 15px 18px; }
.spq-rank { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 9px; color: var(--spq-blue); background: #eef4ff; font-size: 14px; font-weight: 850; }
.spq-card-body { min-width: 0; }
.spq-card-kicker { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-bottom: 5px; }
.spq-type, .spq-state { display: inline-flex; align-items: center; min-height: 27px; padding: 0 9px; border-radius: 999px; color: #315dff; background: #eef4ff; font-size: 14px; font-weight: 800; }
.spq-state { color: #4d6075; background: #edf1f5; }
.spq-state.is-observed { color: #06733f; background: #dcf7e9; }
.spq-state.is-executed { color: #6c4b00; background: #fff0cc; }
.spq-card h3 { margin: 0; color: var(--spq-ink); font-size: 16px; line-height: 1.3; font-weight: 800; }
.spq-reason { margin: 5px 0 0; color: var(--spq-muted); font-size: 14px; line-height: 1.45; }
.spq-manager { margin-top: 6px; color: #40546b; font-size: 14px; font-weight: 700; }
.spq-dimensions { display: grid; grid-template-columns: repeat(4, minmax(118px, 1fr)); gap: 7px; margin-top: 11px; }
.spq-dimension { min-width: 0; padding: 8px 9px; border: 1px solid #e5ebf2; border-radius: 8px; background: #fafcff; }
.spq-dimension small { display: block; color: #718298; font-size: 14px; font-weight: 800; letter-spacing: .025em; text-transform: uppercase; }
.spq-dimension span { display: block; overflow: hidden; margin-top: 3px; color: #273c55; font-size: 14px; font-weight: 700; line-height: 1.3; text-overflow: ellipsis; white-space: nowrap; }
.spq-actions { display: flex; flex-direction: column; gap: 7px; align-items: stretch; min-width: 150px; }
.spq-button { min-height: 38px; display: inline-flex; gap: 6px; align-items: center; justify-content: center; padding: 0 12px; border: 1px solid #b9c9da; border-radius: 8px; color: #243b55; background: #fff; font: inherit; font-size: 14px; font-weight: 800; text-decoration: none; cursor: pointer; white-space: nowrap; }
.spq-button:hover { color: var(--spq-blue); border-color: var(--spq-blue); background: #edf4ff; }
.spq-button.is-primary { color: #fff; border-color: var(--spq-blue); background: var(--spq-blue); }
.spq-button.is-primary:hover { color: #fff; background: #2148d8; }
.spq-button[aria-expanded="true"] { color: var(--spq-blue); border-color: #8eafff; background: #eef4ff; }
.spq-evidence { padding: 0 15px 15px 65px; }
.spq-evidence[hidden] { display: none; }
.spq-evidence-box { padding: 14px; border: 1px solid #cddbec; border-radius: 10px; background: #f8fbff; }
.spq-evidence-head { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: space-between; margin-bottom: 11px; }
.spq-evidence-head strong { color: var(--spq-ink); font-size: 14px; }
.spq-subject-link { color: var(--spq-blue); font-size: 14px; font-weight: 800; text-decoration: none; }
.spq-evidence-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.spq-evidence-step { min-width: 0; padding: 10px; border: 1px solid #dce5ef; border-radius: 9px; background: #fff; }
.spq-evidence-step small { display: flex; gap: 5px; align-items: center; color: #65788e; font-size: 14px; font-weight: 850; letter-spacing: .025em; text-transform: uppercase; }
.spq-level { width: 7px; height: 7px; flex: 0 0 auto; border-radius: 50%; background: #98a8ba; }
.spq-level.is-fact { background: #159564; }
.spq-level.is-correlation { background: #e5a019; }
.spq-level.is-hypothesis { background: #7788a0; }
.spq-evidence-step strong { display: block; margin-top: 7px; color: #203650; font-size: 14px; line-height: 1.35; }
.spq-evidence-step p { margin: 5px 0 0; color: #5f7186; font-size: 14px; line-height: 1.4; }
.spq-causality { margin: 10px 0 0; color: #6a7b8f; font-size: 14px; line-height: 1.45; }

html.dark .spq-shell { --spq-ink: #f4f8ff; --spq-muted: #cad7f0; --spq-line: #25406d; border-color: #25406d; background: #101a33; box-shadow: 0 18px 42px rgba(0, 0, 0, .2); }
html.dark .spq-head-note, html.dark .spq-state { color: #cad7f0; border-color: #315074; background: #152447; }
html.dark .spq-metric, html.dark .spq-loading, html.dark .spq-empty { border-color: #25406d; background: #0d1830; }
html.dark .spq-card { border-color: #25406d; background: #101a33; }
html.dark .spq-rank, html.dark .spq-type, html.dark .spq-button[aria-expanded="true"] { color: #9cc6ff; background: #152447; }
html.dark .spq-dimension, html.dark .spq-evidence-step { border-color: #25406d; background: #0d1830; }
html.dark .spq-dimension small, html.dark .spq-dimension span, html.dark .spq-manager, html.dark .spq-evidence-step strong, html.dark .spq-evidence-step p { color: #cad7f0; }
html.dark .spq-button { color: #dce8f7; border-color: #315074; background: #101a33; }
html.dark .spq-button.is-primary { color: #fff; border-color: var(--spq-blue); background: var(--spq-blue); }
html.dark .spq-evidence-box { border-color: #315074; background: #0b162b; }

@media (max-width: 980px) {
  .spq-card-main { grid-template-columns: 34px minmax(0, 1fr); }
  .spq-actions { grid-column: 2; flex-direction: row; min-width: 0; }
  .spq-dimensions { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .spq-evidence-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .spq-shell { padding: 16px; border-radius: 12px; }
  .spq-head { flex-direction: column; gap: 10px; }
  .spq-head-note { max-width: none; }
  .spq-metrics { grid-template-columns: 1fr; }
  .spq-metric { display: grid; grid-template-columns: 1fr auto; gap: 2px 10px; align-items: center; }
  .spq-metric strong { grid-column: 2; grid-row: 1 / span 2; }
  .spq-card-main { grid-template-columns: 28px minmax(0, 1fr); gap: 10px; padding: 14px 12px 14px 15px; }
  .spq-rank { width: 28px; height: 28px; }
  .spq-dimensions { grid-template-columns: 1fr; }
  .spq-actions { grid-column: 1 / -1; flex-direction: column; }
  .spq-evidence { padding: 0 12px 12px; }
  .spq-evidence-grid { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .spq-loading span { animation: none; }
}