:root {
  --primary: #6366f1;
  --primary-hover: #4f46e5;
  --bg-dark: #0f172a;
  --card-bg: rgba(30, 41, 59, 0.7);
  --text-main: #f8fafc;
  --text-dim: #94a3b8;
  --glass-border: rgba(255, 255, 255, 0.1);
  --success: #10b981;
  --error: #ef4444;
  --warning: #f59e0b;
  --info: #3b82f6;
  --gradient-1: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  --gradient-2: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
  --gradient-3: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Outfit", sans-serif;
}

body {
  background-color: var(--bg-dark);
  color: var(--text-main);
  overflow-x: hidden;
  min-height: 100vh;
}

/* Background Animations */
.background-blobs {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  filter: blur(80px);
  opacity: 0.6;
}

.blob {
  position: absolute;
  border-radius: 50%;
  animation: move 25s infinite alternate;
}

.blob-1 {
  width: 400px;
  height: 400px;
  background: var(--gradient-1);
  top: -100px;
  left: -100px;
}

.blob-2 {
  width: 350px;
  height: 350px;
  background: var(--gradient-2);
  top: 40%;
  right: -50px;
  animation-delay: -5s;
}

.blob-3 {
  width: 300px;
  height: 300px;
  background: var(--gradient-3);
  bottom: -50px;
  left: 20%;
  animation-delay: -10s;
}

@keyframes move {
  from {
    transform: translate(0, 0) scale(1);
  }
  to {
    transform: translate(100px, 100px) scale(1.1);
  }
}

/* Floating Particles */
.particles {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  pointer-events: none;
}

.particle {
  position: absolute;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.5);
  animation: float 15s infinite linear;
}

@keyframes float {
  0% {
    transform: translateY(0) rotate(0deg);
    opacity: 0;
  }
  10% {
    opacity: 0.5;
  }
  90% {
    opacity: 0.5;
  }
  100% {
    transform: translateY(-100vh) rotate(360deg);
    opacity: 0;
  }
}

.app-container {
  max-width: 1400px;
  margin: 0 auto;
  padding: 2rem;
  animation: fadeIn 1s ease-in-out;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

header {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-bottom: 3rem;
  padding: 1.5rem;
  background: var(--card-bg);
  backdrop-filter: blur(12px);
  border-radius: 1.5rem;
  border: 1px solid var(--glass-border);
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease;
}

header:hover {
  transform: translateY(-2px);
}

.header-tier {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.header-tier-1 {
  justify-content: space-between;
  flex-wrap: wrap;
}

.header-tier-2 {
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
}

.toolbar-left {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.toolbar-right {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.action-group {
  display: flex;
  gap: 0.5rem;
  align-items: center;
}

.action-group-primary {
  order: 1;
}

.action-group-data {
  order: 2;
}

.action-group-danger {
  order: 3;
}

@media (max-width: 768px) {
  .toolbar-right {
    width: 100%;
    justify-content: center;
  }
  
  .action-group {
    flex-direction: column;
    gap: 0.5rem;
  }
  
  .action-group button {
    width: 100%;
  }
}

.logo {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  animation: pulse 2s infinite;
}

.logo h1 {
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: -0.5px;
  background: linear-gradient(to right, #fff, #94a3b8);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  transition: transform 0.3s ease;
}

.logo:hover h1 {
  transform: scale(1.05);
}

/* Stats Display */
.stats-display {
  display: flex;
  gap: 1rem;
  font-size: 0.875rem;
  color: var(--text-dim);
}

.stats-display span {
  padding: 0.5rem 1rem;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 0.5rem;
  border: 1px solid var(--glass-border);
}

.stats-display span strong {
  color: var(--text-main);
}

.actions {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
}

/* View Toggle Switch */
.view-toggle-switch {
  display: flex;
  background: rgba(15, 23, 42, 0.6);
  border-radius: 2rem;
  padding: 0.25rem;
  border: 1px solid var(--glass-border);
  position: relative;
  height: 36px;
  width: 80px;
}

.toggle-option {
  flex: 1;
  border: none;
  cursor: pointer;
  background: transparent;
  color: var(--text-dim);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
  transition: color 0.3s ease;
  padding: 0;
}

.toggle-option:hover {
  color: var(--text-main);
}

.toggle-option.active {
  color: white;
}

.toggle-slider {
  position: absolute;
  top: 4px;
  left: 4px;
  width: 34px; /* (80 - 4*2) / 2 approx, adjusted */
  height: 26px; /* 36 - 4*2 */
  background: var(--primary);
  border-radius: 1.5rem;
  transition: transform 0.3s cubic-bezier(0.4, 0.0, 0.2, 1);
  z-index: 1;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

/* Logic for slider position based on active button is handled via class on parent usually,
   but here we have active class on buttons. Let's use sibling selector hacks or JS.
   Since JS sets .active on button, we can use :has() or similar, but for broad compatibility:
   We will update JS to also set a class on the container or modify the slider style directly.
   OR: simpler CSS approach:
*/

/* Default position (Grid active) */
.view-toggle-switch:has(#gridViewBtn.active) .toggle-slider {
  transform: translateX(0);
}

/* List active position */
.view-toggle-switch:has(#listViewBtn.active) .toggle-slider {
  transform: translateX(36px); /* 80 - 4 - 4 - 34 = 38 roughly, or just 100% + gap */
}

/* Fallback for browsers not supporting :has() - JS should add class to parent if needed,
   but most modern browsers support it. Let's add JS support just in case. */
.view-toggle-switch.mode-list .toggle-slider {
  transform: translateX(36px);
}

.separator {
  width: 1px;
  background: var(--glass-border);
  height: 24px;
  margin: 0 0.5rem;
  align-self: center;
}

.btn-primary,
.btn-secondary,
.btn-text {
  padding: 0.75rem 1.5rem;
  border-radius: 0.75rem;
  border: none;
  cursor: pointer;
  font-weight: 600;
  transition: all 0.3s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}

.btn-primary::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
  transition: left 0.5s;
}

.btn-primary:hover::before {
  left: 100%;
}

.btn-primary {
  background: var(--primary);
  color: white;
}

.btn-primary:hover {
  background: var(--primary-hover);
  transform: translateY(-2px);
  box-shadow: 0 10px 15px -3px rgba(99, 102, 241, 0.4);
}

.btn-secondary {
  background: rgba(255, 255, 255, 0.05);
  color: var(--text-main);
  border: 1px solid var(--glass-border);
}

.btn-secondary:hover {
  background: rgba(255, 255, 255, 0.1);
  transform: translateY(-2px);
}

.btn-text {
  background: transparent;
  color: var(--text-dim);
}

.btn-text:hover {
  color: var(--text-main);
}

/* Grid & Cards */
.api-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 1rem;
}

.api-card {
  background: var(--card-bg);
  backdrop-filter: blur(12px);
  border: 1px solid var(--glass-border);
  border-radius: 1rem;
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.api-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.1) 0%, rgba(16, 185, 129, 0.1) 100%);
  opacity: 0;
  transition: opacity 0.3s ease;
  z-index: 0;
}

.api-card:hover::before {
  opacity: 1;
}

.api-card > * {
  position: relative;
  z-index: 1;
}

.api-card:hover {
  transform: translateY(-5px) scale(1.01);
  box-shadow: 0 20px 40px -10px rgba(0, 0, 0, 0.3);
}

/* List View Styles */
.api-grid.view-list {
  grid-template-columns: 1fr;
  gap: 0.5rem; /* Compact gap */
}

.api-grid.view-list .api-card {
  flex-direction: row;
  align-items: center;
  padding: 0.75rem 1rem; /* Compact padding */
  gap: 1rem;
}

.api-grid.view-list .api-card:hover {
  transform: translateX(5px);
}

.api-grid.view-list .card-header {
  flex: 2;
  margin-bottom: 0;
  align-items: center;
  gap: 1rem;
  justify-content: flex-start;
}

.api-grid.view-list .card-header > div {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.api-grid.view-list .status-indicator {
  flex: 2;
  margin: 0;
  justify-content: center;
}

.api-grid.view-list .card-actions {
  flex: 1.5;
  margin-top: 0;
  justify-content: flex-end;
}

.api-grid.view-list .response-area {
  display: none !important; /* Force hide in list view for compactness, or make it collapsible below row */
}

/* Fix for response area in List view - if needed, we might need JS structure change,
   but for now let's keep it simple. If expanded, it might break row layout.
   Let's make response area full width if visible in list view
*/
.api-grid.view-list .api-card {
  flex-wrap: wrap;
}

.api-grid.view-list .response-area {
  width: 100%;
  margin-top: 0.5rem;
  order: 10;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
}

.card-header h3 {
  font-size: 1.125rem;
  font-weight: 600;
  margin-bottom: 0.25rem;
  background: linear-gradient(to right, var(--text-main), var(--primary));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  transition: transform 0.3s ease;
}

.card-header:hover h3 {
  transform: scale(1.02);
}

.type-badge {
  padding: 0.25rem 0.75rem;
  background: rgba(99, 102, 241, 0.2);
  color: #a5b4fc;
  border-radius: 1rem;
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* Type badge colors */
.type-badge.gemini { background: rgba(66, 133, 244, 0.2); color: #8ab4f8; }
.type-badge.mistral { background: rgba(0, 0, 0, 0.3); color: #fff; }
.type-badge.anthropic { background: rgba(255, 139, 0, 0.2); color: #ffb84d; }
.type-badge.cohere { background: rgba(0, 200, 150, 0.2); color: #00c896; }
.type-badge.openai-compatible { background: rgba(16, 185, 129, 0.2); color: #34d399; }
.type-badge.deepseek { background: rgba(59, 130, 246, 0.2); color: #60a5fa; }
.type-badge.groq { background: rgba(139, 92, 246, 0.2); color: #a78bfa; }
.type-badge.huggingface { background: rgba(255, 196, 9, 0.2); color: #facc15; }
.type-badge.replicate { background: rgba(236, 72, 153, 0.2); color: #f472b6; }
.type-badge.stability { background: rgba(14, 165, 233, 0.2); color: #38bdf8; }
.type-badge.elevenlabs { background: rgba(249, 115, 22, 0.2); color: #fb923c; }
.type-badge.assemblyai { background: rgba(99, 102, 241, 0.2); color: #a5b4fc; }
.type-badge.openai-whisper { background: rgba(16, 185, 129, 0.2); color: #34d399; }
.type-badge.google-healthcare { background: rgba(52, 211, 153, 0.2); color: #34d399; }
.type-badge.financial-modeling { background: rgba(52, 211, 153, 0.2); color: #34d399; }
.type-badge.legal-document { background: rgba(168, 85, 247, 0.2); color: #c084fc; }

.model-name {
  font-size: 0.875rem;
  color: var(--text-dim);
  margin-top: 0.25rem;
}

.status-indicator {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.875rem;
  margin: 0.5rem 0;
  flex-wrap: wrap;
}

.dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--text-dim);
}

.dot.status-online {
  background: var(--success);
  box-shadow: 0 0 10px var(--success);
  animation: glow 2s infinite alternate;
}

.dot.status-offline {
  background: var(--error);
  box-shadow: 0 0 10px var(--error);
}

.dot.status-checking {
  background: var(--warning);
  animation: pulse 1s infinite;
}

@keyframes glow {
  from {
    box-shadow: 0 0 10px var(--success);
  }
  to {
    box-shadow: 0 0 20px var(--success), 0 0 30px var(--success);
  }
}

@keyframes pulse {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0.4;
  }
  100% {
    opacity: 1;
  }
}

/* Performance Stats */
.perf-stats {
  display: flex;
  gap: 0.5rem;
  margin-left: auto;
}

.perf-latency {
  padding: 0.2rem 0.5rem;
  background: rgba(59, 130, 246, 0.2);
  color: #60a5fa;
  border-radius: 0.25rem;
  font-size: 0.75rem;
  font-weight: 600;
}

.perf-success {
  padding: 0.2rem 0.5rem;
  background: rgba(16, 185, 129, 0.2);
  color: #34d399;
  border-radius: 0.25rem;
  font-size: 0.75rem;
  font-weight: 600;
}

.card-actions {
  display: flex;
  gap: 0.5rem;
  margin-top: auto;
}

.card-actions button {
  flex: 1;
  padding: 0.6rem;
  font-size: 0.875rem;
}

/* Modal */
.modal {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(4px);
  z-index: 1000;
  justify-content: center;
  align-items: center;
  animation: fadeIn 0.3s ease-out;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.modal-content {
  width: 90%;
  max-width: 500px;
  padding: 2.5rem;
  border-radius: 1.5rem;
  border: 1px solid var(--glass-border);
  max-height: 90vh;
  overflow-y: auto;
  transform: scale(0.9);
  animation: modalScaleIn 0.3s ease-out forwards;
}

@keyframes modalScaleIn {
  to {
    transform: scale(1);
  }
}

.glass {
  background: rgba(30, 41, 59, 0.95);
}

.form-group {
  margin-bottom: 1.25rem;
}

.form-group label {
  display: block;
  margin-bottom: 0.5rem;
  font-size: 0.875rem;
  color: var(--text-dim);
}

.form-group input,
.form-group select {
  width: 100%;
  padding: 0.75rem 1rem;
  background: rgba(15, 23, 42, 0.5);
  border: 1px solid var(--glass-border);
  border-radius: 0.75rem;
  color: white;
  outline: none;
  font-size: 0.875rem;
}

.form-group input:focus,
.form-group select:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.2);
}

.form-group small {
  display: block;
  margin-top: 0.5rem;
  font-size: 0.75rem;
  color: var(--text-dim);
}

.form-group optgroup {
  font-weight: 600;
  background: var(--bg-dark);
}

.modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 1rem;
  margin-top: 2rem;
}

/* Response Log & Details */
.response-area {
  margin-top: 0.5rem;
  padding: 0.75rem;
  background: rgba(0, 0, 0, 0.3);
  border-radius: 0.5rem;
  font-size: 0.75rem;
  font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
  max-height: 250px; /* Tăng chiều cao để xem dễ hơn */
  overflow-y: auto;
  color: #cbd5e1;
  display: none;
  white-space: pre-wrap;
  word-break: break-all;
}

.detail-info {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin-bottom: 0.5rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid rgba(255,255,255,0.1);
}

.detail-row {
    display: flex;
    gap: 0.25rem;
    align-items: center;
}

.detail-row span {
    color: var(--text-dim);
}

.detail-row strong {
    color: var(--text-main);
}

.response-area.visible {
  display: block;
}

/* Comparison Table */
.comparison-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 1rem;
  font-size: 0.875rem;
}

.comparison-table th,
.comparison-table td {
  padding: 0.75rem;
  text-align: left;
  border-bottom: 1px solid var(--glass-border);
}

.comparison-table th {
  background: rgba(99, 102, 241, 0.1);
  color: var(--text-dim);
  font-weight: 600;
  text-transform: uppercase;
  font-size: 0.75rem;
  letter-spacing: 0.5px;
}

.comparison-table tr:hover {
  background: rgba(255, 255, 255, 0.02);
}

.score-bar {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-width: 120px;
}

.score-bar > div {
  flex: 1;
  height: 8px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 4px;
  overflow: hidden;
}

.score-fill {
  height: 100%;
  background: linear-gradient(to right, var(--warning), var(--success));
  border-radius: 4px;
  transition: width 0.3s ease;
}

.score-bar span {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--success);
  min-width: 40px;
}

/* Suggestion Card */
.suggestion-card {
  background: rgba(16, 185, 129, 0.1);
  border: 1px solid rgba(16, 185, 129, 0.3);
  border-radius: 1rem;
  padding: 1.5rem;
}

.suggestion-card h4 {
  color: var(--success);
  margin-bottom: 1rem;
  font-size: 1rem;
}

.suggestion-details {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.5rem;
  margin-bottom: 1rem;
}

.suggestion-details p {
  font-size: 0.875rem;
  color: var(--text-dim);
}

.suggestion-details strong {
  color: var(--text-main);
}

.alternatives {
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--glass-border);
}

.alternatives h5 {
  font-size: 0.875rem;
  color: var(--text-dim);
  margin-bottom: 0.5rem;
}

.alternatives ul {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.alternatives li {
  padding: 0.25rem 0.75rem;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 0.5rem;
  font-size: 0.75rem;
  color: var(--text-main);
}

/* Footer */
footer {
  margin-top: 3rem;
  text-align: center;
  padding: 2rem;
  color: var(--text-dim);
  font-size: 0.875rem;
  border-top: 1px solid var(--glass-border);
}

/* Responsive */
@media (max-width: 768px) {
  header {
    flex-direction: column;
    align-items: stretch;
  }
  
  .logo {
    justify-content: center;
  }
  
  .actions {
    justify-content: center;
  }
  
  .stats-display {
    justify-content: center;
    flex-wrap: wrap;
  }
  
  .api-grid {
    grid-template-columns: 1fr;
  }
  
  .suggestion-details {
    grid-template-columns: 1fr;
  }
}

/* Scrollbar */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: rgba(15, 23, 42, 0.5);
}

::-webkit-scrollbar-thumb {
  background: rgba(99, 102, 241, 0.3);
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: rgba(99, 102, 241, 0.5);
}