/* Klyrr – premium minimal UI */
:root {
  --klyrr-bg: #f8fafc;
  --klyrr-surface: #ffffff;
  --klyrr-text: #0f172a;
  --klyrr-muted: #64748b;
  --klyrr-border: #e2e8f0;
  --klyrr-accent: #6366f1;
  --klyrr-accent-soft: #eef2ff;
  --klyrr-success: #10b981;
  --klyrr-danger: #ef4444;
}

html.dark {
  --klyrr-bg: #0b0f19;
  --klyrr-surface: #111827;
  --klyrr-text: #f1f5f9;
  --klyrr-muted: #94a3b8;
  --klyrr-border: #1f2937;
  --klyrr-accent: #818cf8;
  --klyrr-accent-soft: #1e1b4b;
}

body {
  background: var(--klyrr-bg);
  color: var(--klyrr-text);
  font-family: "Inter", system-ui, -apple-system, sans-serif;
}

.klyrr-card {
  background: var(--klyrr-surface);
  border: 1px solid var(--klyrr-border);
  border-radius: 16px;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04);
}

.klyrr-nav {
  background: rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--klyrr-border);
}

html.dark .klyrr-nav {
  background: rgba(17, 24, 39, 0.85);
}

.klyrr-gradient {
  background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 50%, #a855f7 100%);
}

.klyrr-kpi-value {
  font-size: 1.75rem;
  font-weight: 600;
  letter-spacing: -0.02em;
}

.insight-card {
  border-left: 3px solid var(--klyrr-accent);
}

.chat-bubble-user {
  background: var(--klyrr-accent);
  color: white;
  border-radius: 16px 16px 4px 16px;
}

.chat-bubble-ai {
  background: var(--klyrr-accent-soft);
  border-radius: 16px 16px 16px 4px;
}

.progress-bar {
  height: 6px;
  border-radius: 999px;
  background: var(--klyrr-border);
  overflow: hidden;
}

.progress-bar > span {
  display: block;
  height: 100%;
  background: var(--klyrr-accent);
  border-radius: 999px;
  transition: width 0.4s ease;
}

.score-ring {
  width: 140px;
  height: 140px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: conic-gradient(var(--klyrr-accent) calc(var(--score) * 1%), var(--klyrr-border) 0);
  position: relative;
}

.score-ring::after {
  content: "";
  position: absolute;
  inset: 10px;
  border-radius: 50%;
  background: var(--klyrr-surface);
}

.score-ring span {
  position: relative;
  z-index: 1;
  font-size: 2rem;
  font-weight: 700;
}

.fade-in {
  animation: fadeIn 0.35s ease;
}

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