:root {
  --ink: #211a2d;
  --muted: #746d80;
  --line: #e9e4f1;
  --violet: #7040e8;
  --frame: #f7f5fa;
  --surround: #190d35;
  --paper: #fff;
}

.crm-workspace {
  background:
    radial-gradient(ellipse at 12% 0%, #5939a833, transparent 34rem),
    var(--surround);
}

.workspace-frame {
  background: linear-gradient(145deg, #faf9fc, #f3f0f8);
  box-shadow: 0 28px 90px #0e061e55;
}

.workspace-header {
  border: 1px solid #eeeaf4;
  box-shadow: 0 8px 26px #24133b0a;
}

#primary-nav button {
  transition: background-color .18s ease, border-color .18s ease, color .18s ease, transform .18s ease;
}

#primary-nav button:hover,
.section-nav button:hover {
  transform: translateY(-1px);
}

#primary-nav button[aria-current="page"] {
  background: linear-gradient(135deg, #8159f2, #6335d5);
  border-color: #7044df;
  box-shadow: 0 5px 13px #7040e82b;
}

.section-nav {
  border: 1px solid #eeeaf4;
  box-shadow: 0 4px 14px #24133b08;
}

.section-nav button[aria-current="page"] {
  background: #eee8ff;
  color: #5127ba;
}

#view[data-page]:not([data-page="Dashboard"]) .panel,
#view[data-page="Dashboard"] .dash-tile,
#view[data-page="Dashboard"] .dash-greeting,
#view[data-page="Dashboard"] .dash-calendar {
  border: 1px solid #ebe6f2;
  box-shadow: 0 8px 24px #25133b08;
}

#view[data-page="Dashboard"] .dash-featured {
  background: linear-gradient(145deg, #8055f0, #5f31d5);
  border-color: #7042df;
  box-shadow: 0 12px 28px #6335d52b;
}

#view[data-page="Dashboard"] .dash-spot {
  background:
    radial-gradient(ellipse 120% 75% at 8% 105%, #eb557d, transparent 82%),
    radial-gradient(ellipse 130% 120% at 110% 0%, #090b58 3%, transparent 80%),
    linear-gradient(136deg, #321ac2 8%, #6718d8 48%, #382448 100%);
  box-shadow: 0 12px 30px #32147529;
}

#view[data-page] :is(input, select, textarea):focus-visible {
  border-color: #916ef0;
  box-shadow: 0 0 0 4px #8156f51c;
}

#view[data-page] :is(th, td) {
  border-bottom-color: #eeeaf4;
}

#view[data-page] th {
  background: #f5f2fb;
  color: #625a70;
}

#view[data-page] tbody tr:hover td {
  background: #fbf9ff;
}

#view[data-page] .tabs button.sel,
#view[data-page] .cal-filter-card.cal-filter-selected {
  background: linear-gradient(135deg, #8058ed, #683bd8);
  border-color: #7042df;
  color: #fff;
  box-shadow: 0 5px 14px #7040e82b;
}

#view[data-page] :is(.empty, .facts > div, .report-values > div) {
  background-color: #f8f6fb;
}

#view[data-page] :is(.cal-filter-card, .dash-cal-day, .dash-cal-event) {
  border-color: #ebe5f2;
}

#view[data-page] .dash-cal-day.dash-cal-selected {
  border-color: #8252ee;
  box-shadow: inset 0 0 0 1px #8252ee, 0 4px 12px #7040e81c;
  background: #f1eaff;
}

#view[data-page] .head:has(> .actions) > .actions {
  flex: 1 0 100%;
}

#view[data-page] .actions > :is(.delete-action, .revoke-action) {
  margin-inline-start: auto;
}

#view[data-page] .actions > :is(.delete-action, .revoke-action) ~ * {
  margin-inline-start: 0;
}

#view[data-page] :is(.delete-action, .revoke-action),
#view[data-page] .team-actions .delete-action,
dialog :is(.delete-action, .revoke-action) {
  border-color: #ffb8b2;
  background: #fff;
  color: #b42318;
}

#view[data-page] :is(.delete-action, .revoke-action):hover,
dialog :is(.delete-action, .revoke-action):hover {
  border-color: #ef8f88;
  background: #fff5f4;
  color: #a51d14;
}

:is(.workspace-header, #section-tools, #view, dialog) :focus-visible {
  outline-color: #8156f5;
}

@media (prefers-reduced-motion: reduce) {
  #primary-nav button,
  .section-nav button {
    transition: none;
  }

  #primary-nav button:hover,
  .section-nav button:hover {
    transform: none;
  }
}