:root {
  --accent: #9a5a2a;
  --accent-soft: #f5e7db;
  --surface: rgba(255, 255, 255, 0.92);
  --surface-border: rgba(226, 232, 240, 0.88);
  --sidebar-surface: rgba(255, 255, 255, 0.94);
  --sidebar-border: rgba(226, 232, 240, 0.96);

  --tone-blue: #5b73ff;
  --tone-blue-soft: rgba(91, 115, 255, 0.14);
  --tone-gold: #d79c2d;
  --tone-gold-soft: rgba(215, 156, 45, 0.14);
  --tone-emerald: #1f9d7a;
  --tone-emerald-soft: rgba(31, 157, 122, 0.14);
  --tone-plum: #8c5de6;
  --tone-plum-soft: rgba(140, 93, 230, 0.14);
  --tone-rose: #dd6a92;
  --tone-rose-soft: rgba(221, 106, 146, 0.14);
  --tone-ink: #243449;
  --tone-ink-soft: rgba(36, 52, 73, 0.14);
}

html,
body {
  min-height: 100%;
  margin: 0;
}

body {
  font-family: "Manrope", sans-serif;
  color: #0f172a;
  background:
    radial-gradient(circle at top center, rgba(207, 220, 255, 0.7), transparent 34%),
    radial-gradient(circle at left center, rgba(255, 235, 214, 0.34), transparent 26%),
    linear-gradient(180deg, #f8fafc 0%, #edf3fa 100%);
}

.theme-admin {
  --accent: #4662d9;
  --accent-soft: #e8edff;
}

.theme-partner {
  --accent: #9a5a2a;
  --accent-soft: #f5e7db;
}

.theme-host {
  --accent: #1f8a74;
  --accent-soft: #dff4ee;
}

.theme-participant {
  --accent: #a47a1f;
  --accent-soft: #f7edd5;
}

.theme-client {
  --accent: #7657d8;
  --accent-soft: #ece6ff;
}

.surface-card {
  background: var(--surface);
  border: 1px solid var(--surface-border);
  box-shadow: 0 18px 40px -34px rgba(15, 23, 42, 0.22);
  backdrop-filter: blur(10px);
}

.sidebar-panel {
  background:
    radial-gradient(circle at top left, rgba(196, 210, 255, 0.26), transparent 32%),
    linear-gradient(180deg, var(--sidebar-surface) 0%, rgba(255, 255, 255, 0.96) 100%);
  border-color: var(--sidebar-border);
  box-shadow: 0 24px 46px -38px rgba(15, 23, 42, 0.2);
  overscroll-behavior: contain;
}

.accent-badge {
  background: linear-gradient(135deg, #111827 0%, #1f2937 100%);
  color: white;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1);
}

.accent-text {
  color: var(--accent);
}

.accent-soft-bg {
  background: var(--accent-soft);
}

.tone-badge {
  color: #fff;
  background: linear-gradient(135deg, var(--tone) 0%, color-mix(in srgb, var(--tone) 68%, #111827) 100%);
}

.chart-surface {
  border: 1px solid rgba(226, 232, 240, 0.92);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7);
}

.donut-shell {
  position: relative;
  width: 176px;
  height: 176px;
  border-radius: 9999px;
}

.donut-shell::after {
  content: "";
  position: absolute;
  inset: 26px;
  border-radius: 9999px;
  background: white;
  box-shadow: inset 0 0 0 1px rgba(226, 232, 240, 0.92);
}

.legend-dot {
  width: 0.8rem;
  height: 0.8rem;
  border-radius: 9999px;
  background: var(--tone);
}

.chart-canvas {
  aspect-ratio: 320 / 152;
}

.chart-grid line {
  stroke: rgba(148, 163, 184, 0.22);
  stroke-width: 1;
  stroke-dasharray: 3 6;
}

.chart-area {
  fill: var(--tone-soft);
  opacity: 0.65;
}

.chart-line {
  fill: none;
  stroke: var(--tone);
  stroke-width: 3.25;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.chart-point {
  position: absolute;
  width: 0.625rem;
  height: 0.625rem;
  margin-left: -0.3125rem;
  margin-bottom: -0.3125rem;
  border-radius: 9999px;
  background: var(--tone);
  border: 2px solid #fff;
  box-shadow: 0 6px 12px -10px rgba(15, 23, 42, 0.45);
}

.cohort-cell {
  background: color-mix(in srgb, var(--tone) var(--cell-percent), white);
  border: 1px solid color-mix(in srgb, var(--tone) 12%, #e2e8f0);
}

.sidebar-panel::-webkit-scrollbar,
main::-webkit-scrollbar {
  width: 10px;
}

.sidebar-panel::-webkit-scrollbar-thumb,
main::-webkit-scrollbar-thumb {
  border-radius: 9999px;
  border: 2px solid transparent;
  background-clip: padding-box;
}

.sidebar-panel::-webkit-scrollbar-thumb {
  background-color: rgba(148, 163, 184, 0.22);
}

main::-webkit-scrollbar-thumb {
  background-color: rgba(148, 163, 184, 0.28);
}

.tone-blue {
  --tone: var(--tone-blue);
  --tone-soft: var(--tone-blue-soft);
}

.tone-gold {
  --tone: var(--tone-gold);
  --tone-soft: var(--tone-gold-soft);
}

.tone-emerald {
  --tone: var(--tone-emerald);
  --tone-soft: var(--tone-emerald-soft);
}

.tone-plum {
  --tone: var(--tone-plum);
  --tone-soft: var(--tone-plum-soft);
}

.tone-rose {
  --tone: var(--tone-rose);
  --tone-soft: var(--tone-rose-soft);
}

.tone-ink {
  --tone: var(--tone-ink);
  --tone-soft: var(--tone-ink-soft);
}

.tone-default {
  background: white;
}

.tone-muted {
  background: #f8fafc;
}

.tone-strong {
  background: #fff7ed;
}