styles.css

:root {
  --bg-primary: #09090b;
  --bg-secondary: #18181b;
  --bg-tertiary: #27272a;
  --border: #3f3f46;
  --text-primary: #f4f4f5;
  --text-secondary: #a1a1aa;
  --accent: #10b981; /* Emerald */
  --accent-hover: #059669;
  --danger: #ef4444;
  --warning: #f59e0b;
}

* { box-sizing: border-box; font-family: 'Inter', sans-serif; }
body { background-color: var(--bg-primary); color: var(--text-primary); margin: 0; }

/* Gradio Overrides */
.gradio-container { max-width: 100% !important; padding: 0 !important; background: var(--bg-primary) !important; }
#header, #footer { padding: 20px 40px; border-bottom: 1px solid var(--border); display: flex; justify-content: space-between; align-items: center; }
.hidden { display: none !important; }

/* Custom UI Elements */
.btn-primary {
  background-color: var(--accent) !important;
  color: white !important;
  border: none !important;
  padding: 10px 20px !important;
  border-radius: 6px !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  transition: 0.2s !important;
}
.btn-primary:hover { background-color: var(--accent-hover) !important; }

.card {
  background-color: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 24px;
  margin-bottom: 16px;
}

/* Skeleton Loader */
.skeleton {
  background: linear-gradient(90deg, var(--bg-secondary) 25%, var(--bg-tertiary) 50%, var(--bg-secondary) 75%);
  background-size: 200% 100%;
  animation: skeleton-loading 1.5s infinite;
  height: 20px;
  border-radius: 4px;
  margin-bottom: 10px;
}
@keyframes skeleton-loading {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* SVG Icons */
.icon { width: 20px; height: 20px; fill: currentColor; display: inline-block; vertical-align: middle; margin-right: 8px; }