/* src/tools/regex-tester/tool.css */
.regex-root {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  font-family: inherit;
}

.regex-pattern-box {
  display: flex;
  align-items: center;
  background: #0f1117;
  border: 1px solid #2a2d3a;
  border-radius: 0.5rem;
  padding: 0.25rem 0.5rem;
  transition: border-color 0.15s ease;
}

.regex-pattern-box:focus-within {
  border-color: #4f8ef7;
}

.regex-slash {
  color: #6b7280;
  font-family: 'JetBrains Mono', monospace;
  font-size: 1.125rem;
  font-weight: 600;
  padding: 0 0.25rem;
  user-select: none;
}

.regex-input {
  flex: 1;
  background: transparent;
  border: none;
  color: #f0f2f8;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.875rem;
  padding: 0.5rem 0.25rem;
  outline: none;
}

.regex-flags-group {
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.flag-label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 0.25rem;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.75rem;
  font-weight: 600;
  color: #6b7280;
  background: #1a1d27;
  cursor: pointer;
  user-select: none;
  transition: all 0.15s ease;
}

.flag-label.active {
  background: rgba(79, 142, 247, 0.2);
  color: #4f8ef7;
  border: 1px solid rgba(79, 142, 247, 0.4);
}

.regex-presets-bar {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  overflow-x: auto;
  padding-bottom: 0.25rem;
}

.preset-chip {
  padding: 0.25rem 0.625rem;
  border-radius: 9999px;
  background: #13161f;
  border: 1px solid #2a2d3a;
  color: #9ca3af;
  font-size: 0.75rem;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.15s ease;
}

.preset-chip:hover {
  color: #f0f2f8;
  border-color: #4f8ef7;
}

.regex-editor-container {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}

@media (min-width: 768px) {
  .regex-editor-container {
    grid-template-columns: 1fr 1fr;
  }
}

.regex-panel {
  display: flex;
  flex-direction: column;
  background: #13161f;
  border: 1px solid #2a2d3a;
  border-radius: 0.75rem;
  overflow: hidden;
}

.regex-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.5rem 0.75rem;
  background: #1a1d27;
  border-bottom: 1px solid #2a2d3a;
  font-size: 0.8125rem;
  font-weight: 600;
}

.regex-textarea {
  width: 100%;
  min-height: 180px;
  background: #0f1117;
  border: none;
  padding: 0.75rem;
  color: #f0f2f8;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.8125rem;
  line-height: 1.5;
  resize: vertical;
  outline: none;
}

.regex-preview-box {
  min-height: 180px;
  max-height: 300px;
  overflow-y: auto;
  padding: 0.75rem;
  background: #0f1117;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.8125rem;
  line-height: 1.5;
  white-space: pre-wrap;
  word-break: break-all;
  color: #d1d5db;
}

.regex-match-hl {
  background: rgba(79, 142, 247, 0.35);
  color: #93c5fd;
  border-radius: 0.2rem;
  padding: 0.05rem 0.15rem;
  border-bottom: 2px solid #4f8ef7;
}

.regex-match-hl.alt {
  background: rgba(168, 85, 247, 0.35);
  color: #d8b4fe;
  border-bottom: 2px solid #a855f7;
}

.matches-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  max-height: 240px;
  overflow-y: auto;
  padding: 0.75rem;
}

.match-item {
  background: #0f1117;
  border: 1px solid #2a2d3a;
  border-radius: 0.375rem;
  padding: 0.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  font-size: 0.75rem;
}

.match-item-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-weight: 600;
  color: #4f8ef7;
}

.match-group-row {
  display: flex;
  gap: 0.5rem;
  color: #9ca3af;
  font-family: 'JetBrains Mono', monospace;
  padding-left: 0.5rem;
  border-left: 2px solid #2a2d3a;
}