/* uuid-generator — extracted from inline <style> */
/* --- Hero UUID Display --- */
.evvy-uuid-display {
  position: relative;
  background: var(--bs-body-bg, #fff);
  border: 2px solid var(--evvy-border-color, #DEE2E6);
  border-radius: var(--evvy-radius-lg, 12px);
  padding: 1.5rem 3.5rem 1.5rem 1.5rem;
  font-family: 'SF Mono', 'Fira Code', 'Cascadia Code', 'Consolas', 'Liberation Mono', monospace;
  font-size: 1.35rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  color: var(--evvy-text-primary, #333);
  word-break: break-all;
  line-height: 1.6;
  min-height: 3.5rem;
  display: flex;
  align-items: center;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.evvy-uuid-display:empty::before {
  content: 'Click Generate to create a UUID';
  color: var(--evvy-gray-200, #CCC);
  font-style: italic;
  font-weight: 400;
  font-size: 1rem;
  letter-spacing: 0;
}
[data-bs-theme="dark"] .evvy-uuid-display {
  background: var(--evvy-gray-100, #1E1E1E);
  border-color: var(--evvy-border-color, #333);
  color: var(--evvy-text-primary, #E0E0E0);
}

/* --- Copy Button Overlay --- */
.evvy-copy-btn {
  position: absolute;
  top: 50%;
  right: 0.75rem;
  transform: translateY(-50%);
  background: none;
  border: none;
  cursor: pointer;
  padding: 0.35rem;
  color: var(--evvy-text-secondary, #666);
  font-size: 1.125rem;
  transition: color 0.15s ease;
  line-height: 1;
}
.evvy-copy-btn:hover { color: var(--cluster-dark); }

/* --- Bulk Output --- */
.evvy-uuid-output {
  width: 100%;
  min-height: 120px;
  max-height: 300px;
  overflow-y: auto;
  font-family: 'SF Mono', 'Fira Code', 'Cascadia Code', 'Consolas', 'Liberation Mono', monospace;
  font-size: 0.8125rem;
  line-height: 1.8;
  padding: 1rem 1.25rem;
  border: 1px solid var(--evvy-border-color, #DEE2E6);
  border-radius: var(--evvy-radius-lg, 12px);
  background: var(--bs-body-bg, #fff);
  color: var(--evvy-text-primary, #333);
  resize: vertical;
  white-space: pre;
}
[data-bs-theme="dark"] .evvy-uuid-output {
  background: var(--evvy-gray-100, #1E1E1E);
  border-color: var(--evvy-border-color, #333);
  color: var(--evvy-text-primary, #E0E0E0);
}

/* --- Validation Badges --- */
.evvy-uuid-valid,
.evvy-uuid-invalid {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1rem;
  border-radius: var(--evvy-radius, 8px);
  font-weight: 600;
  font-size: 0.9375rem;
}
.evvy-uuid-valid {
  background: rgba(40, 167, 69, 0.08);
  border: 1px solid rgba(40, 167, 69, 0.25);
  color: #28A745;
}
.evvy-uuid-invalid {
  background: rgba(220, 53, 69, 0.08);
  border: 1px solid rgba(220, 53, 69, 0.25);
  color: #DC3545;
}
[data-bs-theme="dark"] .evvy-uuid-valid {
  background: rgba(40, 167, 69, 0.12);
  border-color: rgba(40, 167, 69, 0.3);
  color: #5cb85c;
}
[data-bs-theme="dark"] .evvy-uuid-invalid {
  background: rgba(220, 53, 69, 0.12);
  border-color: rgba(220, 53, 69, 0.3);
  color: #e57373;
}
.evvy-uuid-meta {
  display: flex;
  gap: 1.25rem;
  margin-top: 0.5rem;
  font-size: 0.8125rem;
  color: var(--evvy-text-secondary, #666);
}
.evvy-uuid-meta strong {
  color: var(--evvy-text-primary, #333);
}
[data-bs-theme="dark"] .evvy-uuid-meta strong {
  color: var(--evvy-text-primary, #E0E0E0);
}

/* --- Generate Button --- */
.evvy-generate-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  width: 100%;
  padding: 0.9rem 1.5rem;
  font-size: 1.0625rem;
  font-weight: 700;
  border: none;
  border-radius: var(--evvy-radius-lg, 12px);
  background: var(--cluster-dark, #1A2333);
  color: #fff;
  cursor: pointer;
  transition: background 0.15s ease, transform 0.1s ease, box-shadow 0.15s ease;
}
.evvy-generate-btn:hover {
  background: color-mix(in srgb, var(--cluster-dark, #1A2333) 85%, #fff);
  box-shadow: 0 4px 16px color-mix(in srgb, var(--cluster-dark, #1A2333) 30%, transparent);
}
.evvy-generate-btn:active {
  transform: scale(0.98);
}

/* --- Bulk Copy Row --- */
.evvy-bulk-copy-row {
  display: flex;
  justify-content: flex-end;
  margin-top: 0.5rem;
}

/* --- Validator Textarea --- */
.evvy-validate-textarea {
  width: 100%;
  min-height: 60px;
  font-family: 'SF Mono', 'Fira Code', 'Cascadia Code', 'Consolas', 'Liberation Mono', monospace;
  font-size: 0.9375rem;
  line-height: 1.6;
  padding: 0.875rem 1.25rem;
  border: 2px solid var(--evvy-border-color, #DEE2E6);
  border-radius: var(--evvy-radius-lg, 12px);
  background: var(--bs-body-bg, #fff);
  color: var(--evvy-text-primary, #333);
  resize: vertical;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
  outline: none;
}
.evvy-validate-textarea::placeholder {
  color: var(--evvy-gray-200, #CCC);
  font-style: italic;
}
.evvy-validate-textarea:focus {
  border-color: var(--cluster-dark, #1A2333);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--cluster-dark, #1A2333) 12%, transparent);
}
[data-bs-theme="dark"] .evvy-validate-textarea {
  background: var(--evvy-gray-100, #1E1E1E);
  border-color: var(--evvy-border-color, #333);
  color: var(--evvy-text-primary, #E0E0E0);
}

/* --- Timestamp Decode Output --- */
.evvy-timestamp-output {
  padding: 0.75rem 1rem;
  background: rgba(37, 99, 235, 0.06);
  border: 1px solid rgba(37, 99, 235, 0.2);
  border-radius: var(--evvy-radius, 8px);
  font-size: 0.875rem;
  color: var(--evvy-text-primary, #333);
}
[data-bs-theme="dark"] .evvy-timestamp-output {
  background: rgba(96, 165, 250, 0.1);
  border-color: rgba(96, 165, 250, 0.25);
  color: var(--evvy-text-primary, #E0E0E0);
}

/* --- Responsive --- */
@media (max-width: 575.98px) {
  .evvy-uuid-display {
    font-size: 0.95rem;
    padding: 1.125rem 3rem 1.125rem 1rem;
    letter-spacing: 0.01em;
  }
  .evvy-uuid-output {
    font-size: 0.75rem;
  }
  .evvy-uuid-meta {
    flex-direction: column;
    gap: 0.25rem;
  }
}

/* ===== Dark-mode contrast fixes (cluster-dark backgrounds) ===== */
[data-bs-theme="dark"] .evvy-generate-btn { color: var(--evvy-dark-text); }