:root {
  --kd-bg: #f5f7fb;
  --kd-surface: #ffffff;
  --kd-surface-soft: #f8fafc;
  --kd-border: #e2e8f0;
  --kd-text: #0f172a;
  --kd-muted: #64748b;
  --kd-subtle: #94a3b8;
  --kd-blue: #2563eb;
  --kd-blue-soft: #eff6ff;
  --kd-cyan: #0891b2;
  --kd-green: #059669;
  --kd-amber: #d97706;
  --kd-purple: #7c3aed;
  --kd-sidebar: #0f172a;
  --kd-sidebar-soft: #1e293b;
  color-scheme: light;
  font-family: "Inter", system-ui, sans-serif;
  color: var(--kd-text);
  background: var(--kd-bg);
}

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

button, input, select, textarea { font-family: inherit; }

.brand-mark {
  background: var(--kd-blue);
  border-radius: 10px;
  box-shadow: none;
  font-family: "Inter", system-ui, sans-serif;
  letter-spacing: -.04em;
}

.loading-card, .state-card { background: var(--kd-bg); }
.state-card h1,
.workspace-header h1,
.detail-header h1,
.dashboard-header h1,
.project-card h2,
.coming-soon h1 {
  font-family: "Inter", system-ui, sans-serif;
  letter-spacing: -.035em;
}

.button {
  border-radius: 10px;
  background: var(--kd-blue);
  box-shadow: 0 1px 2px rgba(15, 23, 42, .1);
}
.button:hover { background: #1d4ed8; }

.auth-layout {
  grid-template-columns: minmax(0, .9fr) minmax(420px, 1.1fr);
  background: #fff;
}
.auth-intro {
  padding: clamp(44px, 7vw, 100px);
  background: var(--kd-sidebar);
}
.auth-intro .eyebrow { margin-top: 28px; color: #93c5fd !important; }
.auth-intro h1 {
  font-family: "Inter", system-ui, sans-serif;
  font-size: clamp(3rem, 7vw, 6rem);
  font-weight: 750;
  letter-spacing: -.07em;
}
.auth-intro > p:last-child { max-width: 480px; color: #cbd5e1; }
.auth-card { background: #fff; }

.office-layout { grid-template-columns: 232px minmax(0, 1fr); }
.sidebar {
  width: 232px;
  padding: 22px 14px 18px;
  background: var(--kd-sidebar);
  box-shadow: none;
  border-right: 1px solid rgba(255,255,255,.05);
}
.sidebar-brand { padding: 0 8px 24px; }
.sidebar-brand strong {
  font-family: "Inter", system-ui, sans-serif;
  font-size: 1rem;
  font-weight: 750;
  letter-spacing: -.02em;
}
.sidebar nav { gap: 5px; }
.nav-item {
  grid-template-columns: 20px 1fr;
  gap: 11px;
  min-height: 42px;
  padding: 10px 12px;
  border-radius: 9px;
  color: #94a3b8;
  font-size: .875rem;
  font-weight: 600;
}
.nav-item:hover { background: rgba(255,255,255,.06); color: #e2e8f0; }
.nav-item--active {
  background: var(--kd-sidebar-soft);
  color: #fff;
  box-shadow: inset 3px 0 #60a5fa;
}
.nav-icon { color: currentColor; font-size: .95rem; }
.nav-soon { display: none; }
.sidebar-footer {
  border-top-color: rgba(255,255,255,.08);
  color: #64748b;
  font-size: .75rem;
}

.workspace { padding: 34px clamp(24px, 4vw, 54px) 64px; }
.product-dashboard { max-width: 1480px; margin: 0 auto; }

.kd-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 28px;
}
.kd-title-group h1 {
  margin: 0;
  color: var(--kd-text);
  font-size: clamp(1.75rem, 3vw, 2.35rem);
  font-weight: 750;
  letter-spacing: -.045em;
}
.kd-title-group p {
  margin: 7px 0 0;
  color: var(--kd-muted);
  font-size: .94rem;
}
.kd-actions { display: flex; align-items: center; gap: 10px; }
.kd-live {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 38px;
  padding: 0 12px;
  border: 1px solid var(--kd-border);
  border-radius: 9px;
  background: #fff;
  color: var(--kd-muted);
  font-size: .78rem;
  font-weight: 600;
}
.kd-live::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--kd-green);
  box-shadow: 0 0 0 3px #d1fae5;
}
.kd-refresh {
  min-height: 38px;
  padding: 0 13px;
  border: 1px solid var(--kd-border);
  border-radius: 9px;
  background: #fff;
  color: #334155;
  font-size: .82rem;
  font-weight: 650;
  cursor: pointer;
}
.kd-refresh:hover { border-color: #cbd5e1; background: var(--kd-surface-soft); }

.kd-kpis {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin-bottom: 18px;
}
.kd-kpi {
  position: relative;
  min-width: 0;
  padding: 19px 20px;
  overflow: hidden;
  border: 1px solid var(--kd-border);
  border-radius: 14px;
  background: var(--kd-surface);
  box-shadow: 0 1px 2px rgba(15, 23, 42, .025);
}
.kd-kpi::after {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  background: var(--accent, var(--kd-blue));
}
.kd-kpi-label {
  margin: 0;
  color: var(--kd-muted);
  font-size: .76rem;
  font-weight: 650;
}
.kd-kpi-row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  margin-top: 13px;
}
.kd-kpi strong {
  color: var(--kd-text);
  font-size: 1.85rem;
  line-height: 1;
  letter-spacing: -.05em;
}
.kd-kpi small {
  color: var(--kd-subtle);
  font-size: .72rem;
  text-align: right;
}
.kd-kpi[data-tone="cyan"] { --accent: var(--kd-cyan); }
.kd-kpi[data-tone="green"] { --accent: var(--kd-green); }
.kd-kpi[data-tone="purple"] { --accent: var(--kd-purple); }

.kd-secondary-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 22px;
  margin: 0 0 20px;
  padding: 13px 17px;
  border: 1px solid var(--kd-border);
  border-radius: 12px;
  background: var(--kd-surface);
}
.kd-secondary-stat { display: flex; align-items: baseline; gap: 7px; }
.kd-secondary-stat strong { color: var(--kd-text); font-size: .95rem; }
.kd-secondary-stat span { color: var(--kd-muted); font-size: .76rem; }

.kd-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.65fr) minmax(290px, .85fr);
  gap: 16px;
  margin-bottom: 16px;
}
.kd-grid--equal { grid-template-columns: repeat(2, minmax(0, 1fr)); }

.kd-panel {
  min-width: 0;
  padding: 21px;
  border: 1px solid var(--kd-border);
  border-radius: 14px;
  background: var(--kd-surface);
  box-shadow: 0 1px 2px rgba(15, 23, 42, .025);
}
.kd-panel-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 20px;
}
.kd-panel-head h2 {
  margin: 0;
  font-size: .98rem;
  font-weight: 700;
  letter-spacing: -.02em;
}
.kd-panel-head p {
  margin: 5px 0 0;
  color: var(--kd-muted);
  font-size: .76rem;
}
.kd-period {
  flex: 0 0 auto;
  padding: 5px 9px;
  border-radius: 7px;
  background: var(--kd-surface-soft);
  color: var(--kd-muted);
  font-size: .7rem;
  font-weight: 650;
}

.kd-growth-chart { position: relative; min-height: 226px; }
.kd-chart-svg { width: 100%; height: 190px; display: block; overflow: visible; }
.kd-chart-grid { stroke: #e2e8f0; stroke-width: .5; }
.kd-chart-area { fill: url(#kdGrowthArea); }
.kd-chart-line {
  fill: none;
  stroke: var(--kd-blue);
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.kd-chart-dot { fill: #fff; stroke: var(--kd-blue); stroke-width: 1.5; }
.kd-axis {
  display: flex;
  justify-content: space-between;
  color: var(--kd-subtle);
  font-size: .68rem;
}
.kd-empty {
  min-height: 150px;
  display: grid;
  place-items: center;
  color: var(--kd-subtle);
  font-size: .83rem;
}

.kd-activity-list { display: grid; gap: 17px; }
.kd-activity-row { display: grid; gap: 7px; }
.kd-activity-label {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  color: var(--kd-muted);
  font-size: .76rem;
}
.kd-activity-label strong { color: var(--kd-text); font-size: .78rem; }
.kd-bar {
  height: 8px;
  overflow: hidden;
  border-radius: 999px;
  background: #eef2f7;
}
.kd-bar > span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--bar-color, var(--kd-blue));
}

.kd-retention { display: grid; gap: 18px; }
.kd-retention-row {
  display: grid;
  grid-template-columns: 48px 1fr 42px;
  align-items: center;
  gap: 12px;
}
.kd-retention-row span:first-child { color: #334155; font-size: .8rem; font-weight: 650; }
.kd-retention-row strong { color: var(--kd-text); font-size: .82rem; text-align: right; }
.kd-retention .kd-bar { height: 10px; }
.kd-cohort-list {
  display: grid;
  gap: 9px;
  margin-top: 20px;
  padding-top: 17px;
  border-top: 1px solid var(--kd-border);
}
.kd-cohort-row {
  display: grid;
  grid-template-columns: 1fr 64px 64px;
  gap: 10px;
  color: var(--kd-muted);
  font-size: .73rem;
}
.kd-cohort-row strong { color: #334155; }

.kd-subscriptions {
  display: grid;
  grid-template-columns: 132px 1fr;
  align-items: center;
  gap: 26px;
}
.kd-donut {
  width: 128px;
  height: 128px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: conic-gradient(
    var(--kd-purple) 0 var(--plus-stop),
    var(--kd-blue) var(--plus-stop) var(--trial-stop),
    #dbe3ee var(--trial-stop) 100%
  );
}
.kd-donut::after {
  content: "";
  grid-area: 1 / 1;
  width: 78px;
  height: 78px;
  border-radius: 50%;
  background: #fff;
}
.kd-donut-label { z-index: 1; grid-area: 1 / 1; text-align: center; }
.kd-donut-label strong { display: block; font-size: 1.25rem; letter-spacing: -.04em; }
.kd-donut-label span { color: var(--kd-muted); font-size: .65rem; }
.kd-legend { display: grid; gap: 12px; }
.kd-legend-row {
  display: grid;
  grid-template-columns: 9px 1fr auto;
  align-items: center;
  gap: 9px;
  color: var(--kd-muted);
  font-size: .76rem;
}
.kd-legend-row i { width: 9px; height: 9px; border-radius: 3px; }
.kd-legend-row strong { color: var(--kd-text); }

.kd-usage-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}
.kd-usage-card {
  padding: 15px;
  border: 1px solid var(--kd-border);
  border-radius: 11px;
  background: var(--kd-surface-soft);
}
.kd-usage-card span { display: block; color: var(--kd-muted); font-size: .72rem; }
.kd-usage-card strong { display: block; margin-top: 7px; font-size: 1.2rem; letter-spacing: -.035em; }
.kd-usage-card small { display: block; margin-top: 4px; color: var(--kd-subtle); font-size: .66rem; }

.kd-table-wrap { overflow-x: auto; }
.kd-table { width: 100%; border-collapse: collapse; }
.kd-table th {
  padding: 0 12px 10px;
  color: var(--kd-subtle);
  font-size: .67rem;
  font-weight: 700;
  letter-spacing: .07em;
  text-align: left;
  text-transform: uppercase;
}
.kd-table td {
  padding: 13px 12px;
  border-top: 1px solid var(--kd-border);
  color: #475569;
  font-size: .78rem;
  vertical-align: middle;
}
.kd-user-button {
  padding: 0;
  border: 0;
  background: none;
  color: var(--kd-text);
  font-weight: 650;
  text-align: left;
  cursor: pointer;
}
.kd-user-button:hover { color: var(--kd-blue); }
.kd-email { max-width: 240px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kd-badge {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 0 8px;
  border-radius: 999px;
  background: #f1f5f9;
  color: #475569;
  font-size: .67rem;
  font-weight: 700;
}
.kd-badge--plus { background: #f3e8ff; color: #6d28d9; }
.kd-badge--trial { background: #eff6ff; color: #1d4ed8; }
.kd-link-button {
  padding: 0;
  border: 0;
  background: none;
  color: var(--kd-blue);
  font-size: .76rem;
  font-weight: 650;
  cursor: pointer;
}

/* Bestaande beheerpagina's in dezelfde zakelijke stijl */
.eyebrow { color: var(--kd-blue) !important; }
.workspace-header, .detail-header { margin-bottom: 28px; }
.workspace-header h1, .detail-header h1 { font-size: clamp(1.8rem, 4vw, 2.5rem); }
.project-card,
.detail-main,
.detail-side,
.work-list,
.users-list,
.access-card,
.audit-card {
  border-color: var(--kd-border);
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 1px 2px rgba(15, 23, 42, .03);
}
.project-card h2 { font-size: 1.25rem; }
.project-status, .status-pill { background: var(--kd-blue-soft); color: #1d4ed8; }
.user-row { border-color: var(--kd-border); }
.user-row b { color: var(--kd-blue); }
.user-search input, .plus-form input, .plus-form select {
  border-color: var(--kd-border);
  border-radius: 9px;
}
.access-badge { border-radius: 12px; background: #f1f5f9; }
.access-badge--plus { background: #f3e8ff; color: #6d28d9; }
.access-badge--trial { background: #eff6ff; color: #1d4ed8; }

@media (max-width: 1100px) {
  .kd-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kd-grid, .kd-grid--equal { grid-template-columns: 1fr; }
}

@media (max-width: 760px) {
  .office-layout { display: block; }
  .sidebar { width: min(290px, 86vw); }
  .mobile-topbar {
    min-height: 58px;
    padding: 9px 14px;
    background: rgba(255,255,255,.96);
    border-bottom-color: var(--kd-border);
  }
  .mobile-topbar .sidebar-brand { color: var(--kd-text); }
  .mobile-menu-button { background: #eef2f7; color: #334155; }
  .workspace { padding: 22px 15px 72px; }
  .kd-header { align-items: stretch; flex-direction: column; margin-bottom: 20px; }
  .kd-actions { justify-content: space-between; }
  .kd-live { flex: 1; }
  .kd-kpis { gap: 10px; }
  .kd-kpi { padding: 16px; }
  .kd-kpi strong { font-size: 1.55rem; }
  .kd-secondary-stats { gap: 10px 18px; }
  .kd-panel { padding: 17px; }
  .kd-subscriptions { grid-template-columns: 112px 1fr; gap: 18px; }
  .kd-donut { width: 108px; height: 108px; }
  .kd-donut::after { width: 66px; height: 66px; }
  .kd-usage-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kd-table th:nth-child(2), .kd-table td:nth-child(2) { display: none; }
  .auth-layout { grid-template-columns: 1fr; }
  .auth-intro { min-height: 34vh; padding: 38px 26px; }
  .auth-intro h1 { font-size: 3rem; }
}

@media (max-width: 460px) {
  .kd-kpis { grid-template-columns: 1fr 1fr; }
  .kd-kpi { min-height: 108px; }
  .kd-kpi-row { align-items: flex-start; flex-direction: column; gap: 8px; }
  .kd-kpi small { text-align: left; }
  .kd-panel-head { align-items: flex-start; }
  .kd-subscriptions { grid-template-columns: 1fr; justify-items: center; }
  .kd-legend { width: 100%; }
  .kd-usage-grid { grid-template-columns: 1fr 1fr; }
  .kd-cohort-row { grid-template-columns: 1fr 54px 54px; }
}

@media (prefers-reduced-motion: reduce) {
  * { scroll-behavior: auto !important; transition: none !important; }
}