@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,400;0,9..144,500;0,9..144,600;0,9..144,700;1,9..144,400&family=Mulish:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,400&display=swap');

:root {
  --mf-paper: #F4F3FA;
  --mf-card: #FFFFFF;
  --mf-warm: #FCFCFD;
  --mf-cream: #EEEAF8;
  --mf-calm: #E7E9F8;

  --mf-ink: #15163D;
  --mf-ink-soft: #40406B;
  --mf-muted: #6F7391;
  --mf-faint: #A5A6C0;

  --mf-violet: #7361FA;
  --mf-violet-deep: #5A38E8;
  --mf-violet-dark: #4B2FD4;
  --mf-violet-bright: #8B6EFA;
  --mf-violet-soft: #EDE8FF;

  --mf-leaf: #2E7D5B;
  --mf-amber: #E8A33D;
  --mf-gold: #F0AA00;

  --mf-line: #E7E4F3;
  --mf-line-soft: rgba(112, 78, 250, .08);

  --mf-r-sm: 9px;
  --mf-r: 14px;
  --mf-r-lg: 20px;
  --mf-r-xl: 22px;
  --mf-pill: 44px;

  --mf-shadow-xs: 0 1px 3px rgba(21, 22, 61, .08);
  --mf-shadow: 0 1px 2px rgba(21, 22, 61, .05), 0 8px 24px rgba(112, 78, 250, .07);
  --mf-shadow-lg: 0 18px 44px -12px rgba(21, 22, 61, .28), 0 4px 12px -4px rgba(21, 22, 61, .12);

  --mf-serif: 'Fraunces', Georgia, serif;
  --mf-sans: 'Mulish', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

html.dark {
  --mf-paper: #15132B;
  --mf-card: #1F1C3B;
  --mf-warm: #1A1833;
  --mf-cream: #2A2742;
  --mf-calm: #2B2A4E;

  --mf-ink: #EFEDF8;
  --mf-ink-soft: #C7C2E0;
  --mf-muted: #9A95B8;
  --mf-faint: #6E6991;

  --mf-line: #2E2952;
  --mf-line-soft: rgba(139, 110, 250, .16);

  --mf-shadow-xs: none;
  --mf-shadow: none;
  --mf-shadow-lg: none;
}

body,
input,
select,
textarea,
button,
.font-sans {
  font-family: var(--mf-sans);
  font-weight: 400;
  letter-spacing: -0.005em;
}

body {
  background: var(--mf-paper);
  color: var(--mf-ink-soft);
}

h1, h2, h3,
#content h1,
#content h2,
.text-important,
.font-display {
  font-family: var(--mf-serif);
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--mf-ink);
}

#content h4,
#content h5,
fieldset.module > h2 {
  font-family: var(--mf-sans);
  font-weight: 700;
  letter-spacing: 0;
}

.rounded-default {
  border-radius: var(--mf-r);
}

#content > div > .bg-white,
#content form > div > .bg-white,
#content .border-base-200,
fieldset.module,
.unfold-card,
.mindfulness-card {
  background: var(--mf-card);
  border: 1px solid var(--mf-line);
  border-radius: var(--mf-r-lg);
  box-shadow: var(--mf-shadow);
}

#content .border,
#content .border-base-200 {
  border-color: var(--mf-line);
}

button,
input[type="submit"],
.button,
a.button,
.unfold-button,
#content .bg-primary-600 {
  border-radius: var(--mf-pill);
  font-family: var(--mf-sans);
  font-weight: 700;
  letter-spacing: 0;
  transition: transform .22s cubic-bezier(.22, 1, .36, 1), box-shadow .22s, filter .22s;
}

button:hover,
input[type="submit"]:hover,
.button:hover,
a.button:hover {
  transform: translateY(-2px);
}

.button.default,
input[type="submit"].default,
#content .bg-primary-600 {
  background: var(--mf-violet);
  box-shadow: 0 4px 18px rgba(112, 78, 250, .25);
}

.button.default:hover,
input[type="submit"].default:hover {
  background: var(--mf-violet-deep);
  box-shadow: 0 10px 30px rgba(90, 56, 232, .3);
}

input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="url"],
input[type="tel"],
input[type="search"],
input[type="date"],
input[type="time"],
input[type="datetime-local"],
select,
textarea {
  border-radius: var(--mf-r);
  border: 1px solid var(--mf-line);
  background: var(--mf-card);
  color: var(--mf-ink);
  transition: border-color .15s, box-shadow .15s;
}

input:focus,
select:focus,
textarea:focus {
  outline: none;
  border-color: var(--mf-violet);
  box-shadow: 0 0 0 3px rgba(112, 78, 250, .14);
}

#content table {
  border-radius: var(--mf-r);
  overflow: hidden;
}

#content thead th {
  font-family: var(--mf-sans);
  font-weight: 700;
  font-size: 12.5px;
  letter-spacing: .02em;
  text-transform: uppercase;
  color: var(--mf-muted);
  background: var(--mf-cream);
}

#content tbody tr:hover {
  background: var(--mf-violet-soft);
}

#nav-sidebar,
.unfold-sidebar {
  background: var(--mf-card);
  border-right: 1px solid var(--mf-line);
}

#nav-sidebar a,
.unfold-sidebar a {
  border-radius: var(--mf-r);
  font-weight: 500;
}

#nav-sidebar a:hover,
.unfold-sidebar a:hover {
  background: var(--mf-violet-soft);
  color: var(--mf-violet-dark);
}

.unfold-login-container,
.unfold-login-container form,
.unfold-login-container > div {
  border-radius: var(--mf-r-xl);
  box-shadow: var(--mf-shadow-lg);
}

.mf-tracker {
  display: flex;
  gap: 3px;
  align-items: flex-end;
  flex-wrap: nowrap;
  overflow-x: auto;
  padding-bottom: 4px;
}

.mf-tracker-cell {
  flex: 1 1 auto;
  min-width: 4px;
  height: 38px;
  border-radius: var(--mf-r-sm);
}

.dash-grid { display: flex; flex-direction: column; gap: 20px; padding-bottom: 32px; }
.dash-row { display: grid; gap: 20px; }
.dash-row-kpi { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.dash-row-halves { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.dash-row-split { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }

.dash-kpi-label {
  color: var(--mf-muted);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  margin: 0 0 6px;
}

.dash-kpi-value {
  font-family: var(--mf-serif);
  color: var(--mf-ink);
  font-size: 32px;
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: -.03em;
  margin: 0;
}

.dash-hint,
.dash-empty {
  color: var(--mf-muted);
  font-size: 13.5px;
  line-height: 1.55;
}

.dash-empty { padding: 48px 0; text-align: center; margin: 0; }

@media (max-width: 1280px) {
  .dash-row-kpi { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 1024px) {
  .dash-row-split,
  .dash-row-halves { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 640px) {
  .dash-row-kpi { grid-template-columns: minmax(0, 1fr); }
  .dash-kpi-value { font-size: 26px; }
}