/* ============================================================
   ABSTRICT · Features v8 CSS
   Clearance checks, PSU connectors, BIOS reminder,
   Build progression, Build diff, Fuzzy search, Dark auto
   ============================================================ */

/* === Clearance warnings === */
.clearance-warn {
  display: flex; align-items: flex-start; gap: 6px;
  padding: 6px 8px; margin-top: 6px;
  background: rgba(239,68,68,.08);
  border: 1px solid rgba(239,68,68,.18);
  border-radius: var(--radius);
  font-size: 10px; line-height: 1.35;
  color: var(--danger);
}
.clearance-warn svg { flex-shrink: 0; margin-top: 1px; }
.clearance-ok {
  display: flex; align-items: center; gap: 4px;
  padding: 3px 8px; margin-top: 4px;
  background: rgba(34,197,94,.08);
  border: 1px solid rgba(34,197,94,.18);
  border-radius: var(--radius);
  font-size: 9px; color: var(--success);
  font-family: var(--mono);
}

/* === PSU connector warning === */
.psu-connector-warn {
  display: flex; align-items: flex-start; gap: 6px;
  padding: 6px 8px; margin-top: 6px;
  background: rgba(245,158,11,.08);
  border: 1px solid rgba(245,158,11,.18);
  border-radius: var(--radius);
  font-size: 10px; line-height: 1.35;
  color: var(--warning);
}
.psu-connector-warn svg { flex-shrink: 0; margin-top: 1px; }

/* === BIOS reminder === */
.bios-warn {
  display: flex; align-items: flex-start; gap: 6px;
  padding: 6px 8px; margin-top: 6px;
  background: rgba(99,102,241,.08);
  border: 1px solid rgba(99,102,241,.18);
  border-radius: var(--radius);
  font-size: 10px; line-height: 1.35;
  color: var(--accent);
}
.bios-warn svg { flex-shrink: 0; margin-top: 1px; }

/* === Build progression === */
.build-progression {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 0;
}
.build-prog-bar {
  flex: 1; height: 6px; background: var(--border-subtle);
  border-radius: 3px; overflow: hidden;
}
.build-prog-fill {
  height: 100%; border-radius: 3px;
  background: var(--accent);
  transition: width 400ms var(--ease);
}
.build-prog-text {
  font-family: var(--mono); font-size: 10px; font-weight: 600;
  color: var(--text-secondary); white-space: nowrap;
}

/* === Build diff overlay === */
.diff-overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,.5); z-index: 200;
  display: flex; align-items: center; justify-content: center;
  backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
  animation: modalIn 200ms var(--ease-spring);
}
.diff-card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: 16px;
  max-width: 500px; width: 90vw; max-height: 70vh;
  overflow: auto; box-shadow: var(--shadow-lg);
}
.diff-card h3 { margin: 0 0 10px; font-size: 14px; font-weight: 600; }
.diff-row {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 8px; border-radius: var(--radius);
  font-size: 11px;
}
.diff-row.added { background: rgba(34,197,94,.08); color: var(--success); }
.diff-row.removed { background: rgba(239,68,68,.08); color: var(--danger); }
.diff-row.changed { background: rgba(245,158,11,.08); color: var(--warning); }
.diff-row.same { color: var(--text-muted); }
.diff-row .diff-slot {
  font-family: var(--mono); font-size: 9px; font-weight: 600;
  text-transform: uppercase; width: 60px; flex-shrink: 0;
}
.diff-row .diff-detail { flex: 1; min-width: 0; }
.diff-row .diff-icon { flex-shrink: 0; font-size: 12px; }

/* === Dark mode auto indicator === */
.dark-auto-indicator {
  font-size: 9px; color: var(--text-muted);
  font-family: var(--mono); margin-top: 2px;
}