.spc-wrap { max-width: 1100px; margin: 24px auto; padding: 0 16px; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; }
.spc-card { background: #fff; border: 1px solid #e8e8e8; border-radius: 14px; padding: 18px; box-shadow: 0 8px 24px rgba(0,0,0,0.04); }
.spc-header h2 { margin: 0 0 6px; font-size: 22px; }
.spc-header p { margin: 0 0 14px; color: #555; }

.spc-controls { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; margin-bottom: 14px; }
.spc-control { background: #fafafa; border: 1px solid #eee; border-radius: 12px; padding: 10px; font-size: 14px; }
.spc-control input[type="number"] { width: 90px; margin-left: 8px; }

.spc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.spc-col h3 { margin: 0 0 8px; font-size: 16px; }
.spc-col textarea { width: 100%; min-height: 180px; padding: 10px; border-radius: 12px; border: 1px solid #ddd; resize: vertical; }
.spc-or { text-align: center; margin: 8px 0; color: #777; font-size: 13px; }
.spc-hint { margin-top: 6px; color: #777; font-size: 12px; }

.spc-actions { display: flex; align-items: center; gap: 12px; margin-top: 14px; }
.spc-btn { background: #0b5cff; color: #fff; border: 0; border-radius: 12px; padding: 10px 16px; cursor: pointer; font-weight: 600; }
.spc-btn:hover { opacity: 0.95; }
.spc-status { font-size: 14px; color: #333; }
.spc-status.spc-error { color: #b00020; }

.spc-results { margin-top: 16px; border-top: 1px solid #eee; padding-top: 14px; }
.spc-metrics { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; margin-bottom: 14px; }
.spc-metric { background: #fafafa; border: 1px solid #eee; border-radius: 12px; padding: 10px; }
.spc-metric-label { font-size: 12px; color: #666; }
.spc-metric-val { font-size: 18px; font-weight: 700; margin-top: 4px; }

.spc-highlight-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.spc-highlight-box { border: 1px solid #eee; border-radius: 12px; padding: 12px; background: #fff; min-height: 220px; overflow: auto; line-height: 1.7; font-size: 14px; }
.spc-highlight-box mark { padding: 0 2px; border-radius: 4px; }

.spc-matches { margin-top: 14px; }
.spc-match-item { border: 1px solid #eee; border-radius: 12px; padding: 10px; margin-bottom: 10px; background: #fafafa; }
.spc-match-len { font-weight: 700; font-size: 13px; margin-bottom: 6px; color: #333; }
.spc-match-text { font-size: 13px; color: #333; line-height: 1.6; }

@media (max-width: 900px) {
  .spc-controls { grid-template-columns: 1fr; }
  .spc-grid { grid-template-columns: 1fr; }
  .spc-metrics { grid-template-columns: 1fr 1fr; }
  .spc-highlight-grid { grid-template-columns: 1fr; }
}