/* Capture Scanner — dark-chrome theme, cold red accent. Vanilla, no deps. */

.cs-app {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin: 1.5rem 0 1rem;
}
@media (max-width: 768px) { .cs-app { grid-template-columns: 1fr; } }

.cs-pane {
  background: #16161a;
  border: 1px solid #3a3a44;
  border-radius: 6px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.cs-panehead {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 12px;
  font: 600 0.78rem/1 Inter, system-ui, sans-serif;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #7a7a88;
  background: linear-gradient(#1a1a20, #131317);
  border-bottom: 1px solid #3a3a44;
}
.cs-btn {
  background: #1e1e24;
  color: #c8c8d0;
  border: 1px solid #55556a;
  border-radius: 4px;
  padding: 3px 10px;
  font: 600 0.72rem Inter, sans-serif;
  cursor: pointer;
}
.cs-btn:hover { border-color: #CC0000; color: #e8e8f0; }

#cs-input {
  flex: 1;
  min-height: 260px;
  resize: vertical;
  border: 0;
  outline: 0;
  padding: 14px;
  background: #0c0c0f;
  color: #c8c8d0;
  font: 400 0.95rem/1.65 "JetBrains Mono", ui-monospace, monospace;
}
.cs-output {
  flex: 1;
  min-height: 260px;
  padding: 14px;
  background: #0c0c0f;
  color: #c8c8d0;
  font: 400 0.95rem/1.7 Inter, system-ui, sans-serif;
  overflow-y: auto;
}
.cs-empty { color: #55556a; font-style: italic; }

/* highlight marks */
.cs-output mark, .cs-legend mark {
  border-radius: 3px;
  padding: 0 2px;
  color: #e8e8f0;
}
.cs-judg-asserted { background: rgba(204, 0, 0, 0.30); box-shadow: inset 0 -2px 0 #CC0000; }
.cs-judg-attrib   { background: rgba(0, 150, 150, 0.20); box-shadow: inset 0 -2px 0 #008a8a; }
.cs-voice-strip   { background: rgba(122, 92, 255, 0.26); box-shadow: inset 0 -2px 0 #7a5cff; }
.cs-voice-review  { background: rgba(122, 92, 255, 0.10); }

/* degree-of-capture gauge */
.cs-degree {
  background: #16161a;
  border: 1px solid #3a3a44;
  border-radius: 6px;
  padding: 14px 16px;
  margin: 0.6rem 0;
}
.cs-degree-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 8px;
}
.cs-degree-head span {
  font: 700 0.8rem Inter, sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #7a7a88;
}
.cs-degree-head b { font: 800 1.1rem Inter, sans-serif; color: #e8e8f0; }
.cs-degree-track {
  height: 12px;
  background: #0c0c0f;
  border: 1px solid #3a3a44;
  border-radius: 6px;
  overflow: hidden;
}
.cs-degree-fill {
  height: 100%;
  width: 0;
  border-radius: 6px 0 0 6px;
  transition: width 0.25s ease;
  background: #008a8a;
}
.cs-degree-fill.cs-band-low { background: #008a8a; }
.cs-degree-fill.cs-band-moderate { background: #c07000; }
.cs-degree-fill.cs-band-high { background: #CC0000; }
.cs-degree-note {
  margin: 10px 0 0;
  font: 400 0.9rem/1.55 Inter, sans-serif;
  color: #a8a8b4;
}

/* scoreboard */
.cs-scoreboard {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin: 0.5rem 0;
}
.cs-stat {
  flex: 1;
  min-width: 120px;
  background: #16161a;
  border: 1px solid #3a3a44;
  border-radius: 6px;
  padding: 12px 14px;
  text-align: center;
}
.cs-stat b { display: block; font: 800 1.9rem Inter, sans-serif; color: #e8e8f0; }
.cs-stat span { font: 600 0.72rem Inter, sans-serif; text-transform: uppercase; letter-spacing: 0.04em; color: #7a7a88; }
.cs-s-asserted { border-color: #CC0000; }
.cs-s-asserted b { color: #ff4444; }

.cs-verdict {
  margin: 0.4rem 0 1rem;
  padding: 10px 14px;
  border-radius: 6px;
  font: 500 0.92rem/1.5 Inter, sans-serif;
  background: #16161a;
  border-left: 3px solid #55556a;
}
.cs-verdict.cs-ok { border-left-color: #008a8a; color: #9fe0e0; }
.cs-verdict.cs-flag { border-left-color: #CC0000; color: #e8c8c8; }

.cs-legend {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 1rem 0;
  font: 400 0.88rem/1.5 Inter, sans-serif;
  color: #a8a8b4;
}
.cs-legend mark { margin-right: 6px; }

.cs-note { margin-top: 1.5rem; }
.cs-note h3 { color: #e8e8f0; margin: 1.2rem 0 0.4rem; font: 800 1.05rem Inter, sans-serif; }
.cs-note p { color: #c8c8d0; line-height: 1.7; }
.cs-note a { color: #ff6a6a; }