:root {
  --dtf-bg: #f4f7fb;
  --dtf-surface: #ffffff;
  --dtf-surface-soft: #f8fafc;
  --dtf-text: #132238;
  --dtf-muted: #6b7b91;
  --dtf-border: #e4eaf2;
  --dtf-primary: #176bff;
  --dtf-primary-dark: #0f54d4;
  --dtf-primary-soft: #eaf2ff;
  --dtf-success: #0f9f6e;
  --dtf-success-soft: #e8f8f2;
  --dtf-warning: #e98a13;
  --dtf-warning-soft: #fff6e8;
  --dtf-danger: #df3f55;
  --dtf-danger-soft: #fff0f2;
  --dtf-shadow: 0 18px 48px rgba(29, 54, 89, .08);
  --dtf-radius: 18px;
}

body.dtf-standalone-app {
  min-width: 320px;
  min-height: 100vh;
  margin: 0 !important;
  padding: 0 !important;
  overflow-x: hidden;
  color: var(--dtf-text);
  background: var(--dtf-bg);
}

html.dtf-standalone-document {
  margin-top: 0 !important;
}

body.dtf-standalone-app #wpadminbar {
  display: none !important;
}

.dtf-standalone-main {
  width: 100%;
  min-height: 100vh;
  margin: 0;
  padding: 0;
}

body.dtf-standalone-app .dtf-shell {
  min-height: 100vh;
  border: 0;
  border-radius: 0;
}

body.dtf-standalone-app .dtf-app-layout,
body.dtf-standalone-app .dtf-login-required {
  min-height: 100vh;
}

@supports (min-height: 100dvh) {
  body.dtf-standalone-app,
  .dtf-standalone-main,
  body.dtf-standalone-app .dtf-shell,
  body.dtf-standalone-app .dtf-app-layout,
  body.dtf-standalone-app .dtf-login-required {
    min-height: 100dvh;
  }
}

.dtf-app-page .entry-content,
.dtf-app-page .page-content,
.dtf-app-page main .container,
.dtf-app-page .content-area {
  max-width: none !important;
}

.dtf-shell,
.dtf-shell * {
  box-sizing: border-box;
}

.dtf-shell {
  position: relative;
  width: 100%;
  min-height: 820px;
  margin: 0;
  color: var(--dtf-text);
  background: var(--dtf-bg);
  border: 1px solid var(--dtf-border);
  border-radius: 24px;
  overflow: hidden;
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

.dtf-shell button,
.dtf-shell input,
.dtf-shell select,
.dtf-shell textarea {
  font: inherit;
}

.dtf-shell button,
.dtf-shell a {
  -webkit-tap-highlight-color: transparent;
}

.dtf-app-layout {
  display: grid;
  grid-template-columns: 248px minmax(0, 1fr);
  min-height: 820px;
}

.dtf-sidebar {
  position: relative;
  z-index: 20;
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 22px 16px 18px;
  color: #dce8fb;
  background:
    radial-gradient(circle at 25% 5%, rgba(65, 138, 255, .28), transparent 28%),
    linear-gradient(180deg, #102b50 0%, #0d203d 100%);
}

.dtf-brand {
  display: flex;
  align-items: center;
  gap: 11px;
  min-height: 44px;
  padding: 0 10px 20px;
  color: #fff;
}

.dtf-brand-mark,
.dtf-login-mark {
  display: inline-grid;
  place-items: center;
  width: 38px;
  height: 38px;
  flex: 0 0 auto;
  color: #fff;
  background: linear-gradient(135deg, #1d7aff, #5ea3ff);
  border-radius: 12px;
  box-shadow: 0 9px 22px rgba(23, 107, 255, .3);
  font-weight: 800;
  letter-spacing: -.5px;
}

.dtf-brand strong {
  display: block;
  color: #fff;
  font-size: 15px;
  line-height: 1.2;
}

.dtf-brand small {
  display: block;
  margin-top: 3px;
  color: #90acd0;
  font-size: 11px;
}

.dtf-nav-label {
  margin: 16px 12px 8px;
  color: #7391b7;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .11em;
  text-transform: uppercase;
}

.dtf-nav {
  display: grid;
  gap: 4px;
}

.dtf-nav-button {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 43px;
  padding: 10px 12px;
  color: #b8cae1;
  background: transparent;
  border: 0;
  border-radius: 12px;
  cursor: pointer;
  text-align: left;
  transition: color .18s ease, background .18s ease, transform .18s ease;
}

.dtf-nav-button:hover {
  color: #fff;
  background: rgba(255,255,255,.07);
  transform: translateX(2px);
}

.dtf-nav-button.is-active {
  color: #fff;
  background: linear-gradient(90deg, rgba(54, 132, 255, .28), rgba(54, 132, 255, .12));
  box-shadow: inset 3px 0 0 #4f94ff;
}

.dtf-nav-button svg,
.dtf-icon {
  width: 19px;
  height: 19px;
  flex: 0 0 auto;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.dtf-sidebar-footer {
  margin-top: auto;
  padding: 14px 8px 0;
}

.dtf-mini-profile {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px;
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 14px;
  background: rgba(255,255,255,.045);
}

.dtf-mini-profile img,
.dtf-avatar {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  object-fit: cover;
}

.dtf-mini-profile strong {
  display: block;
  max-width: 132px;
  color: #fff;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12px;
}

.dtf-mini-profile small {
  display: block;
  max-width: 132px;
  color: #89a9d0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 9px;
}

.dtf-mini-profile a {
  color: #89a9d0;
  font-size: 11px;
  text-decoration: none;
}

.dtf-app-main {
  min-width: 0;
  background: var(--dtf-bg);
}

.dtf-topbar {
  position: relative;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 72px;
  padding: 13px 26px;
  background: rgba(255,255,255,.92);
  border-bottom: 1px solid var(--dtf-border);
  backdrop-filter: blur(14px);
}

.dtf-topbar-left,
.dtf-topbar-right,
.dtf-toolbar,
.dtf-inline {
  display: flex;
  align-items: center;
  gap: 10px;
}

.dtf-workspace-select {
  min-width: 210px;
  max-width: 290px;
  height: 42px;
  padding: 0 36px 0 13px;
  color: var(--dtf-text);
  background: #f7f9fc;
  border: 1px solid var(--dtf-border);
  border-radius: 12px;
  outline: none;
  font-weight: 650;
}

.dtf-mobile-menu {
  display: none;
  width: 40px;
  height: 40px;
  place-items: center;
  color: var(--dtf-text);
  background: #f7f9fc;
  border: 1px solid var(--dtf-border);
  border-radius: 11px;
}

.dtf-content {
  min-height: 720px;
  padding: 26px;
}

.dtf-page-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 22px;
}

.dtf-page-title {
  margin: 0;
  color: var(--dtf-text);
  font-size: clamp(22px, 2.4vw, 30px);
  line-height: 1.15;
  letter-spacing: -.03em;
}

.dtf-page-subtitle {
  margin: 7px 0 0;
  color: var(--dtf-muted);
  font-size: 13px;
}

.dtf-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 40px;
  padding: 9px 14px;
  color: var(--dtf-text);
  background: #fff;
  border: 1px solid var(--dtf-border);
  border-radius: 11px;
  box-shadow: none;
  cursor: pointer;
  text-decoration: none !important;
  font-weight: 700;
  font-size: 13px;
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease, background .16s ease;
}

.dtf-button:hover {
  border-color: #cbd6e5;
  box-shadow: 0 8px 20px rgba(29,54,89,.08);
  transform: translateY(-1px);
}

.dtf-button:disabled {
  opacity: .55;
  cursor: wait;
  transform: none;
}

.dtf-button-primary {
  color: #fff !important;
  background: linear-gradient(135deg, var(--dtf-primary), #3882ff);
  border-color: transparent;
  box-shadow: 0 9px 22px rgba(23,107,255,.22);
}

.dtf-button-primary:hover {
  background: linear-gradient(135deg, var(--dtf-primary-dark), var(--dtf-primary));
}

.dtf-button-danger {
  color: var(--dtf-danger) !important;
  background: var(--dtf-danger-soft);
  border-color: #ffd7dc;
}

.dtf-button-soft {
  color: var(--dtf-primary) !important;
  background: var(--dtf-primary-soft);
  border-color: transparent;
}

.dtf-button-icon {
  width: 38px;
  height: 38px;
  min-height: 38px;
  padding: 0;
}

.dtf-cards {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 15px;
  margin-bottom: 18px;
}

.dtf-card,
.dtf-panel {
  min-width: 0;
  background: var(--dtf-surface);
  border: 1px solid var(--dtf-border);
  border-radius: var(--dtf-radius);
  box-shadow: 0 1px 1px rgba(30,55,90,.02);
}

.dtf-metric {
  position: relative;
  padding: 19px;
  overflow: hidden;
}

.dtf-metric::after {
  content: "";
  position: absolute;
  top: -28px;
  right: -28px;
  width: 88px;
  height: 88px;
  background: var(--metric-soft, var(--dtf-primary-soft));
  border-radius: 50%;
  opacity: .65;
}

.dtf-metric-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  color: var(--dtf-muted);
  font-size: 12px;
  font-weight: 650;
}

.dtf-metric-icon {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  color: var(--metric-color, var(--dtf-primary));
  background: var(--metric-soft, var(--dtf-primary-soft));
  border-radius: 10px;
}

.dtf-metric-value {
  display: block;
  margin-top: 14px;
  color: var(--dtf-text);
  font-size: clamp(20px, 2.1vw, 27px);
  line-height: 1.2;
  letter-spacing: -.025em;
}

.dtf-metric-foot {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
  color: var(--dtf-muted);
  font-size: 11px;
}

.dtf-positive { color: var(--dtf-success) !important; }
.dtf-negative { color: var(--dtf-danger) !important; }
.dtf-warning-text { color: var(--dtf-warning) !important; }
.dtf-muted { color: var(--dtf-muted) !important; }

.dtf-grid-2 {
  display: grid;
  grid-template-columns: minmax(0, 1.65fr) minmax(280px, .85fr);
  gap: 18px;
  margin-bottom: 18px;
}

.dtf-grid-equal {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  margin-bottom: 18px;
}

.dtf-panel {
  padding: 20px;
}

.dtf-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 18px;
}

.dtf-panel-title {
  margin: 0;
  color: var(--dtf-text);
  font-size: 15px;
  font-weight: 800;
  letter-spacing: -.01em;
}

.dtf-panel-caption {
  margin: 4px 0 0;
  color: var(--dtf-muted);
  font-size: 11px;
}

.dtf-chart-bars {
  display: grid;
  grid-template-columns: repeat(6, minmax(30px,1fr));
  align-items: end;
  gap: 12px;
  height: 230px;
  padding-top: 16px;
}

.dtf-chart-group {
  display: grid;
  grid-template-rows: 1fr auto;
  gap: 8px;
  height: 100%;
  text-align: center;
}

.dtf-chart-columns {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 4px;
  min-height: 0;
}

.dtf-bar {
  width: min(17px, 38%);
  min-height: 3px;
  border-radius: 6px 6px 2px 2px;
  transition: height .35s ease;
}

.dtf-bar-income { background: linear-gradient(180deg, #36c395, #0f9f6e); }
.dtf-bar-expense { background: linear-gradient(180deg, #ff8595, #df3f55); }
.dtf-chart-label { color: var(--dtf-muted); font-size: 11px; }

.dtf-legend {
  display: flex;
  align-items: center;
  gap: 16px;
  color: var(--dtf-muted);
  font-size: 11px;
}

.dtf-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-right: 5px;
  border-radius: 50%;
}

.dtf-donut-wrap {
  display: grid;
  grid-template-columns: 150px minmax(0,1fr);
  align-items: center;
  gap: 20px;
}

.dtf-donut {
  position: relative;
  width: 145px;
  height: 145px;
  border-radius: 50%;
  background: conic-gradient(#dfe7f1 0 100%);
}

.dtf-donut::after {
  content: "";
  position: absolute;
  inset: 25px;
  background: #fff;
  border-radius: 50%;
  box-shadow: 0 0 0 1px rgba(228,234,242,.8);
}

.dtf-category-list,
.dtf-clean-list,
.dtf-alert-list {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.dtf-category-row,
.dtf-list-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-width: 0;
}

.dtf-category-name,
.dtf-row-main {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.dtf-category-name span:last-child,
.dtf-row-copy {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dtf-alert {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  padding: 12px;
  border: 1px solid var(--dtf-border);
  border-radius: 13px;
  background: #fbfcfe;
}

.dtf-alert-icon {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  flex: 0 0 auto;
  color: var(--dtf-warning);
  background: var(--dtf-warning-soft);
  border-radius: 9px;
}

.dtf-alert.is-danger .dtf-alert-icon {
  color: var(--dtf-danger);
  background: var(--dtf-danger-soft);
}

.dtf-alert strong,
.dtf-list-row strong {
  display: block;
  color: var(--dtf-text);
  font-size: 12px;
}

.dtf-alert p,
.dtf-list-row small {
  display: block;
  margin: 2px 0 0;
  color: var(--dtf-muted);
  font-size: 10px;
}

.dtf-progress {
  position: relative;
  height: 8px;
  margin-top: 10px;
  overflow: hidden;
  background: #edf1f6;
  border-radius: 999px;
}

.dtf-progress > span {
  display: block;
  width: var(--progress,0%);
  max-width: 100%;
  height: 100%;
  background: var(--bar-color,var(--dtf-primary));
  border-radius: inherit;
}

.dtf-progress.is-over > span { background: var(--dtf-danger); }

.dtf-table-card {
  padding: 0;
  overflow: hidden;
}

.dtf-table-wrap {
  width: 100%;
  overflow-x: auto;
}

.dtf-table {
  width: 100%;
  border-collapse: collapse;
  background: #fff;
}

.dtf-table th {
  padding: 12px 15px;
  color: #7d8ba0;
  background: #f8fafc;
  border-bottom: 1px solid var(--dtf-border);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .045em;
  text-align: left;
  text-transform: uppercase;
  white-space: nowrap;
}

.dtf-table td {
  padding: 13px 15px;
  border-bottom: 1px solid #edf1f5;
  color: #33445a;
  font-size: 12px;
  vertical-align: middle;
}

.dtf-table tbody tr:last-child td { border-bottom: 0; }
.dtf-table tbody tr:hover { background: #fbfdff; }
.dtf-table .dtf-amount { font-weight: 800; text-align: right; white-space: nowrap; }
.dtf-table .dtf-actions { text-align: right; white-space: nowrap; }

.dtf-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 24px;
  padding: 4px 8px;
  color: #4b5b70;
  background: #f0f3f7;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 750;
  white-space: nowrap;
}

.dtf-badge-success { color: #087550; background: var(--dtf-success-soft); }
.dtf-badge-warning { color: #a45b00; background: var(--dtf-warning-soft); }
.dtf-badge-danger { color: #b52138; background: var(--dtf-danger-soft); }
.dtf-badge-info { color: #145dcc; background: var(--dtf-primary-soft); }
.dtf-badge .dtf-icon { width:12px;height:12px; }

.dtf-toolbar {
  flex-wrap: wrap;
  margin-bottom: 16px;
  padding: 12px;
  background: #fff;
  border: 1px solid var(--dtf-border);
  border-radius: 15px;
}

.dtf-toolbar .dtf-input,
.dtf-toolbar .dtf-select {
  width: auto;
  min-width: 145px;
  height: 39px;
}

.dtf-toolbar .dtf-search { flex: 1 1 210px; }

.dtf-input,
.dtf-select,
.dtf-textarea {
  width: 100%;
  color: var(--dtf-text);
  background: #fff;
  border: 1px solid #dce4ee;
  border-radius: 11px;
  outline: none;
  transition: border-color .16s ease, box-shadow .16s ease;
}

.dtf-input,
.dtf-select {
  min-height: 42px;
  padding: 9px 11px;
}

.dtf-textarea {
  min-height: 84px;
  padding: 10px 11px;
  resize: vertical;
}

.dtf-input:focus,
.dtf-select:focus,
.dtf-textarea:focus {
  border-color: #79aaff;
  box-shadow: 0 0 0 3px rgba(23,107,255,.11);
}

.dtf-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 15px;
}

.dtf-field-full { grid-column: 1 / -1; }

.dtf-field label {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 6px;
  color: #415168;
  font-size: 11px;
  font-weight: 750;
}

.dtf-field-help {
  margin: 5px 0 0;
  color: var(--dtf-muted);
  font-size: 10px;
}

.dtf-check {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  color: #4e5e73;
  font-size: 12px;
}

.dtf-check input { margin-top: 2px; }

.dtf-account-grid,
.dtf-goal-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 15px;
}

.dtf-account-card,
.dtf-goal-card {
  position: relative;
  padding: 18px;
  overflow: hidden;
}

.dtf-account-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 4px;
  height: 100%;
  background: var(--account-color,var(--dtf-primary));
}

.dtf-account-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.dtf-account-icon {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  color: var(--account-color,var(--dtf-primary));
  background: color-mix(in srgb, var(--account-color,var(--dtf-primary)) 11%, white);
  border-radius: 12px;
}

.dtf-account-balance {
  display: block;
  margin-top: 18px;
  color: var(--dtf-text);
  font-size: 21px;
  letter-spacing: -.02em;
}

.dtf-card-menu {
  display: flex;
  gap: 5px;
}

.dtf-tiny-button {
  display: inline-grid;
  place-items: center;
  width: 29px;
  height: 29px;
  padding: 0;
  color: var(--dtf-muted);
  background: #f6f8fb;
  border: 0;
  border-radius: 8px;
  cursor: pointer;
}

.dtf-tiny-button:hover { color: var(--dtf-primary); background: var(--dtf-primary-soft); }
.dtf-tiny-button.is-danger:hover { color: var(--dtf-danger); background: var(--dtf-danger-soft); }

.dtf-budget-item {
  padding: 17px;
}

.dtf-budget-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 15px;
}

.dtf-calendar-layout {
  display: grid;
  grid-template-columns: minmax(0,1.55fr) minmax(280px,.75fr);
  gap: 18px;
}

.dtf-calendar {
  display: grid;
  grid-template-columns: repeat(7, minmax(0,1fr));
  gap: 1px;
  overflow: hidden;
  background: var(--dtf-border);
  border: 1px solid var(--dtf-border);
  border-radius: 14px;
}

.dtf-calendar-weekday,
.dtf-calendar-day {
  background: #fff;
}

.dtf-calendar-weekday {
  padding: 8px 4px;
  color: var(--dtf-muted);
  font-size: 10px;
  font-weight: 800;
  text-align: center;
  text-transform: uppercase;
}

.dtf-calendar-day {
  min-height: 91px;
  padding: 7px;
}

.dtf-calendar-day.is-out { background: #f8fafc; color: #a5afbc; }
.dtf-calendar-day.is-today { box-shadow: inset 0 0 0 2px var(--dtf-primary); }
.dtf-day-number { display:block; margin-bottom:5px; font-size:10px; font-weight:800; }
.dtf-calendar-event {
  display: block;
  max-width: 100%;
  margin: 3px 0;
  padding: 3px 5px;
  overflow: hidden;
  color: #25528d;
  background: #eaf2ff;
  border-radius: 5px;
  font-size: 8px;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dtf-calendar-event.is-paid { color:#087550;background:#e8f8f2; }
.dtf-calendar-event.is-overdue { color:#b52138;background:#fff0f2; }

.dtf-line-chart {
  display: block;
  width: 100%;
  height: 250px;
  overflow: visible;
}

.dtf-line-chart .grid { stroke: #e7edf4; stroke-width: 1; }
.dtf-line-chart .income { fill: none; stroke: var(--dtf-success); stroke-width: 3; }
.dtf-line-chart .expense { fill: none; stroke: var(--dtf-danger); stroke-width: 3; }
.dtf-line-chart .area-income { fill: rgba(15,159,110,.08); }

.dtf-empty {
  display: grid;
  place-items: center;
  min-height: 240px;
  padding: 35px;
  color: var(--dtf-muted);
  text-align: center;
}

.dtf-empty-icon {
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  margin: 0 auto 13px;
  color: var(--dtf-primary);
  background: var(--dtf-primary-soft);
  border-radius: 18px;
}

.dtf-empty h3 { margin:0 0 6px;color:var(--dtf-text);font-size:16px; }
.dtf-empty p { max-width:380px;margin:0 0 15px;font-size:12px; }

.dtf-loading,
.dtf-boot {
  display: grid;
  place-items: center;
  align-content: center;
  min-height: 430px;
  color: var(--dtf-muted);
}

.dtf-spinner {
  display: inline-block;
  width: 28px;
  height: 28px;
  margin-bottom: 10px;
  border: 3px solid #dce8f7;
  border-top-color: var(--dtf-primary);
  border-radius: 50%;
  animation: dtf-spin .75s linear infinite;
}

@keyframes dtf-spin { to { transform: rotate(360deg); } }

.dtf-modal-backdrop {
  position: fixed;
  z-index: 999999;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 20px;
  background: rgba(12,28,50,.55);
  backdrop-filter: blur(5px);
  animation: dtf-fade .16s ease;
}

.dtf-modal {
  width: min(620px, 100%);
  max-height: min(760px, calc(100vh - 40px));
  overflow: auto;
  background: #fff;
  border-radius: 20px;
  box-shadow: 0 30px 90px rgba(5,20,43,.25);
  animation: dtf-pop .18s ease;
}

.dtf-modal-sm { width: min(460px,100%); }
.dtf-modal-lg { width: min(780px,100%); }

.dtf-modal-head {
  position: sticky;
  z-index: 2;
  top: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 18px 20px;
  background: rgba(255,255,255,.96);
  border-bottom: 1px solid var(--dtf-border);
  backdrop-filter: blur(12px);
}

.dtf-modal-head h2 { margin:0;color:var(--dtf-text);font-size:18px;letter-spacing:-.02em; }
.dtf-modal-body { padding:20px; }
.dtf-modal-foot {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding: 16px 20px;
  background: #f8fafc;
  border-top: 1px solid var(--dtf-border);
}

@keyframes dtf-fade { from { opacity:0; } }
@keyframes dtf-pop { from { opacity:0;transform:translateY(10px) scale(.985); } }

.dtf-toast-stack {
  position: fixed;
  z-index: 1000000;
  top: 20px;
  right: 20px;
  display: grid;
  gap: 9px;
}

.dtf-toast {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  width: min(360px, calc(100vw - 40px));
  padding: 13px 15px;
  color: #fff;
  background: #18324f;
  border-radius: 13px;
  box-shadow: 0 18px 45px rgba(10,30,56,.22);
  animation: dtf-pop .18s ease;
}

.dtf-toast.is-error { background:#a92337; }
.dtf-toast.is-success { background:#087550; }

.dtf-onboarding {
  display: grid;
  grid-template-columns: minmax(300px,.8fr) minmax(480px,1.2fr);
  min-height: 820px;
  background: #fff;
}

.dtf-onboarding-side {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 42px;
  overflow: hidden;
  color: #fff;
  background:
    radial-gradient(circle at 80% 15%, rgba(78,151,255,.42), transparent 31%),
    linear-gradient(145deg,#102b50,#0c1e38);
}

.dtf-onboarding-side::after {
  content:"";
  position:absolute;
  right:-100px;
  bottom:-100px;
  width:320px;
  height:320px;
  border:60px solid rgba(255,255,255,.035);
  border-radius:50%;
}

.dtf-onboarding-side h1 { max-width:480px;margin:34px 0 14px;font-size:clamp(30px,4vw,49px);line-height:1.05;letter-spacing:-.045em; }
.dtf-onboarding-side p { max-width:440px;color:#aac0dc;font-size:14px; }
.dtf-onboarding-points { display:grid;gap:12px;margin-top:30px; }
.dtf-onboarding-point { display:flex;align-items:center;gap:10px;color:#d8e6f6;font-size:12px; }
.dtf-onboarding-point span { display:grid;place-items:center;width:26px;height:26px;color:#7db0ff;background:rgba(77,145,255,.15);border-radius:8px; }
.dtf-onboarding-main { display:grid;place-items:center;padding:40px;background:#f8fafc; }
.dtf-onboarding-card { width:min(600px,100%);padding:28px;background:#fff;border:1px solid var(--dtf-border);border-radius:22px;box-shadow:var(--dtf-shadow); }
.dtf-onboarding-card h2 { margin:0 0 6px;color:var(--dtf-text);font-size:23px;letter-spacing:-.03em; }
.dtf-onboarding-card > p { margin:0 0 24px;color:var(--dtf-muted);font-size:12px; }
.dtf-onboarding-card-wide { width:min(860px,100%); }
.dtf-onboarding-steps { display:grid;gap:9px;margin-top:30px; }
.dtf-onboarding-step { display:flex;align-items:center;gap:10px;color:#8da9cc;font-size:12px; }
.dtf-onboarding-step span { display:grid;place-items:center;width:27px;height:27px;flex:0 0 auto;color:#afc5e0;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.08);border-radius:9px;font-size:11px;font-weight:800; }
.dtf-onboarding-step.is-active { color:#fff; }
.dtf-onboarding-step.is-active span { color:#fff;background:#2878ef;border-color:#5c9cff; }
.dtf-choice-grid-4 { grid-template-columns:repeat(4,minmax(0,1fr)); }
.dtf-onboard-account { position:relative;display:grid;grid-template-columns:1.3fr .8fr .7fr .8fr auto;gap:10px;align-items:end;margin-bottom:10px;padding:14px;background:#f8fafc;border:1px solid var(--dtf-border);border-radius:14px; }
.dtf-onboard-account > .dtf-tiny-button { margin-bottom:8px; }
.dtf-onboarding-actions { display:flex;align-items:center;gap:10px;margin:24px -28px -28px;padding:17px 28px;background:#f8fafc;border-top:1px solid var(--dtf-border);border-radius:0 0 22px 22px; }
.dtf-onboarding-actions > span { flex:1; }
.dtf-recovery-list { display:grid;gap:10px; }
.dtf-recovery-list article { display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px;background:#f8fafc;border:1px solid var(--dtf-border);border-radius:14px; }
.dtf-recovery-list strong,.dtf-recovery-list small { display:block; }
.dtf-recovery-list small { margin-top:3px;color:var(--dtf-muted);font-size:11px; }

.dtf-choice-grid {
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  gap: 10px;
  margin-bottom: 20px;
}

.dtf-choice {
  position: relative;
  display: grid;
  gap: 6px;
  min-height: 104px;
  padding: 14px;
  color: #415168;
  background: #fff;
  border: 1px solid var(--dtf-border);
  border-radius: 14px;
  cursor: pointer;
}

.dtf-choice input { position:absolute;opacity:0; }
.dtf-choice:has(input:checked) { color:var(--dtf-primary);border-color:#81adff;background:#f4f8ff;box-shadow:0 0 0 3px rgba(23,107,255,.08); }
.dtf-choice strong { color:var(--dtf-text);font-size:12px; }
.dtf-choice small { color:var(--dtf-muted);font-size:10px; }

.dtf-login-required {
  display: grid;
  place-items: center;
  min-height: 520px;
  padding: 30px;
  background: #f4f7fb;
  border: 1px solid var(--dtf-border);
  border-radius: 24px;
}

.dtf-login-card { width:min(430px,100%);padding:38px;text-align:center;background:#fff;border:1px solid var(--dtf-border);border-radius:22px;box-shadow:var(--dtf-shadow); }
.dtf-login-card .dtf-login-mark { margin:0 auto 18px; }
.dtf-login-card h2 { margin:0 0 8px;font-size:23px; }
.dtf-login-card p { margin:0 0 20px;color:var(--dtf-muted); }

.dtf-callout {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 18px;
  padding: 15px;
  color: #25528d;
  background: #edf5ff;
  border: 1px solid #d5e7ff;
  border-radius: 14px;
}
.dtf-callout strong { display:block;color:#174b8b; }
.dtf-callout p { margin:3px 0 0;font-size:11px; }
.dtf-callout > .dtf-badge:last-child { margin-left:auto; }
.dtf-callout-danger { color:#8e2636;background:var(--dtf-danger-soft);border-color:#ffd1d7; }
.dtf-callout-danger strong { color:#a12639; }

.dtf-readonly-note {
  min-height: 42px;
  padding: 11px 12px;
  color: #52657d;
  background: #f4f7fb;
  border: 1px solid var(--dtf-border);
  border-radius: 10px;
  font-size: 11px;
}

.dtf-member-cell { display:flex;align-items:center;gap:10px;min-width:210px; }
.dtf-member-cell img { width:38px;height:38px;object-fit:cover;border-radius:50%; }
.dtf-member-cell span { min-width:0; }
.dtf-member-cell strong,.dtf-member-cell small { display:block; }
.dtf-member-cell small { margin-top:2px;color:var(--dtf-muted);font-size:10px; }
.dtf-role-select { min-width:155px; }

.dtf-role-grid {
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: 10px;
}
.dtf-role-grid > div { padding:13px;background:#f8fafc;border:1px solid var(--dtf-border);border-radius:12px; }
.dtf-role-grid strong,.dtf-role-grid span { display:block; }
.dtf-role-grid strong { margin-bottom:4px;color:var(--dtf-text);font-size:12px; }
.dtf-role-grid span { color:var(--dtf-muted);font-size:10px;line-height:1.55; }

.dtf-copy-row { display:flex;gap:8px; }
.dtf-copy-row .dtf-input { min-width:0; }

.dtf-settings-layout { display:grid;grid-template-columns:200px minmax(0,1fr);gap:18px; }
.dtf-settings-nav { display:grid;align-content:start;gap:5px; }
.dtf-settings-nav button { justify-content:flex-start; }
.dtf-settings-stack { display:grid;gap:18px; }
.dtf-cards-compact { grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); }
.dtf-kpi-list { display:grid;gap:0; }
.dtf-kpi-list > div { display:flex;align-items:flex-start;justify-content:space-between;gap:14px;padding:11px 0;border-bottom:1px solid var(--dtf-border); }
.dtf-kpi-list > div:last-child { border-bottom:0; }
.dtf-kpi-list span { color:var(--dtf-muted);font-size:11px; }
.dtf-kpi-list strong { text-align:right;font-size:12px; }
.dtf-link-button { padding:0;color:var(--dtf-primary);background:transparent;border:0;cursor:pointer;text-align:left;font-weight:700; }
.dtf-link-button:hover { text-decoration:underline; }
.dtf-summary-row td { background:#f7faff;font-weight:800; }
.dtf-table-scroll { max-height:480px;overflow:auto; }

.dtf-forecast-chart { width:100%;min-height:250px;overflow:hidden; }
.dtf-forecast-chart svg { display:block;width:100%;height:250px;overflow:visible; }
.dtf-forecast-chart .zero { stroke:#b8c4d4;stroke-width:1;stroke-dasharray:5 5;vector-effect:non-scaling-stroke; }
.dtf-forecast-chart .area { fill:rgba(23,107,255,.09); }
.dtf-forecast-chart .line { fill:none;stroke:var(--dtf-primary);stroke-width:2.5;vector-effect:non-scaling-stroke; }
.dtf-forecast-chart circle { fill:#fff;stroke:var(--dtf-primary);stroke-width:2;vector-effect:non-scaling-stroke; }
.dtf-chart-axis { display:flex;justify-content:space-between;gap:16px;margin-top:7px;color:var(--dtf-muted);font-size:10px; }
.dtf-scenario { margin-bottom:18px; }

.dtf-notification-list,.dtf-check-list { display:grid;gap:9px; }
.dtf-notification { display:flex;align-items:flex-start;gap:11px;width:100%;padding:12px;color:var(--dtf-text);background:#fff;border:1px solid var(--dtf-border);border-radius:13px;cursor:pointer;text-align:left; }
.dtf-notification:hover { border-color:#a9c8ff;background:#f8fbff; }
.dtf-notification.is-unread { background:#f3f7ff;border-color:#c8dbff;box-shadow:inset 3px 0 0 var(--dtf-primary); }
.dtf-notification > span:last-child { min-width:0; }
.dtf-notification strong,.dtf-notification small,.dtf-notification em { display:block; }
.dtf-notification small { margin-top:3px;color:var(--dtf-muted);font-size:11px; }
.dtf-notification em { margin-top:5px;color:#93a0b2;font-size:9px;font-style:normal; }
.dtf-cron-status { margin-top:20px;padding-top:16px;border-top:1px solid var(--dtf-border); }
.dtf-cron-status h3 { margin:0 0 7px;font-size:12px; }

.dtf-bulk-bar { position:sticky;z-index:5;top:0;display:flex;align-items:center;gap:9px;margin-bottom:12px;padding:10px 12px;background:#edf4ff;border:1px solid #cfe0ff;border-radius:13px;box-shadow:0 9px 24px rgba(24,74,145,.08); }
.dtf-bulk-bar > span { margin-right:auto;color:#285a99;font-size:11px;font-weight:700; }
.dtf-splits { display:grid;gap:8px; }
.dtf-split-row { display:grid;grid-template-columns:minmax(120px,1fr) minmax(120px,1fr) 130px auto;gap:8px;align-items:end;padding:10px;background:#f8fafc;border:1px solid var(--dtf-border);border-radius:12px; }
.dtf-chip-checks { display:flex;flex-wrap:wrap;gap:8px; }
.dtf-chip-checks label { cursor:pointer; }
.dtf-chip-checks input { position:absolute;opacity:0;pointer-events:none; }
.dtf-chip-checks span { display:inline-flex;padding:7px 10px;color:#52657d;background:#f7f9fc;border:1px solid var(--dtf-border);border-radius:999px;font-size:10px; }
.dtf-chip-checks input:checked + span { color:#0f5bd7;background:#edf4ff;border-color:#8fb8ff; }
.dtf-permission-grid { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-bottom:18px; }
.dtf-details { margin-top:8px;padding-top:8px;border-top:1px dashed var(--dtf-border); }
.dtf-details summary { color:var(--dtf-primary);cursor:pointer;font-size:11px;font-weight:700; }
.dtf-detail-grid { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:12px 0; }
.dtf-detail-grid > div { padding:11px;background:#f8fafc;border:1px solid var(--dtf-border);border-radius:11px; }
.dtf-detail-grid span,.dtf-detail-grid strong { display:block; }
.dtf-detail-grid span { color:var(--dtf-muted);font-size:9px;text-transform:uppercase;letter-spacing:.05em; }
.dtf-detail-grid strong { margin-top:4px;overflow-wrap:anywhere;font-size:11px; }
.dtf-file-list { display:grid;gap:7px;margin-top:8px; }
.dtf-file-list > * { display:flex;align-items:center;justify-content:space-between;gap:10px;padding:9px;background:#f8fafc;border:1px solid var(--dtf-border);border-radius:10px; }
.dtf-audit-compare { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:16px; }
.dtf-audit-compare h3 { margin:0 0 7px;font-size:12px; }
.dtf-audit-compare pre { max-height:420px;margin:0;padding:13px;overflow:auto;color:#d9e7f5;background:#10233e;border-radius:12px;font:11px/1.55 ui-monospace,SFMono-Regular,Menlo,monospace;white-space:pre-wrap;overflow-wrap:anywhere; }
.dtf-category-chip { display:inline-flex;align-items:center;gap:7px;padding:6px 9px;background:#f7f9fc;border:1px solid var(--dtf-border);border-radius:9px;font-size:11px; }
.dtf-category-chip i { width:8px;height:8px;border-radius:50%;background:var(--chip-color); }
.dtf-chip-wrap { display:flex;flex-wrap:wrap;gap:8px; }
.dtf-file-drop { padding:24px;text-align:center;background:#f8fafc;border:1px dashed #b9c7d8;border-radius:14px; }

.dtf-pagination { display:flex;align-items:center;justify-content:space-between;gap:12px;padding:13px 15px;border-top:1px solid var(--dtf-border); }
.dtf-pagination span { color:var(--dtf-muted);font-size:11px; }

@media (max-width: 1180px) {
  .dtf-cards { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .dtf-account-grid,.dtf-goal-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .dtf-grid-2,.dtf-calendar-layout { grid-template-columns:1fr; }
  .dtf-onboard-account { grid-template-columns:repeat(2,minmax(0,1fr)) auto; }
}

@media (max-width: 920px) {
  .dtf-app-layout { grid-template-columns:1fr; }
  .dtf-sidebar { position:absolute;top:0;bottom:0;left:0;width:248px;transform:translateX(-102%);transition:transform .2s ease;box-shadow:18px 0 50px rgba(4,18,36,.24); }
  .dtf-shell.is-menu-open .dtf-sidebar { transform:translateX(0); }
  .dtf-shell.is-menu-open::after { content:"";position:absolute;z-index:15;inset:0;background:rgba(12,28,50,.36); }
  .dtf-mobile-menu { display:grid; }
  .dtf-onboarding { grid-template-columns:1fr; }
  .dtf-onboarding-side { min-height:360px;padding:32px; }
  .dtf-onboarding-side h1 { margin-top:20px; }
}

@media (max-width: 680px) {
  .dtf-shell { border-radius:16px; }
  .dtf-content { padding:18px 13px; }
  .dtf-topbar { padding:11px 13px; }
  .dtf-topbar-right .dtf-avatar { display:none; }
  .dtf-workspace-select { min-width:0;max-width:160px;width:160px; }
  .dtf-button .dtf-button-label-mobile { display:none; }
  .dtf-page-head { align-items:flex-start; }
  .dtf-cards,.dtf-grid-equal,.dtf-budget-grid,.dtf-account-grid,.dtf-goal-grid,.dtf-form-grid { grid-template-columns:1fr; }
  .dtf-field-full { grid-column:auto; }
  .dtf-cards { gap:10px; }
  .dtf-metric { padding:16px; }
  .dtf-donut-wrap { grid-template-columns:1fr;justify-items:center; }
  .dtf-chart-bars { gap:5px;height:190px; }
  .dtf-calendar-day { min-height:72px;padding:4px; }
  .dtf-calendar-event { height:5px;padding:0;font-size:0;border-radius:3px; }
  .dtf-calendar-weekday { font-size:8px; }
  .dtf-toolbar > * { flex:1 1 100%;width:100% !important; }
  .dtf-settings-layout { grid-template-columns:1fr; }
  .dtf-role-grid { grid-template-columns:1fr; }
  .dtf-copy-row { align-items:stretch;flex-direction:column; }
  .dtf-settings-nav { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .dtf-onboarding-main { padding:18px 12px; }
  .dtf-onboarding-side { min-height:330px;padding:26px; }
  .dtf-onboarding-card { padding:20px; }
  .dtf-choice-grid { grid-template-columns:1fr; }
  .dtf-choice { min-height:auto; }
  .dtf-onboard-account,.dtf-split-row,.dtf-permission-grid,.dtf-detail-grid,.dtf-audit-compare { grid-template-columns:1fr; }
  .dtf-onboard-account > .dtf-tiny-button { position:absolute;top:8px;right:8px;margin:0; }
  .dtf-onboarding-actions { flex-wrap:wrap;margin:20px -20px -20px;padding:14px 20px; }
  .dtf-onboarding-actions > span { display:none; }
  .dtf-onboarding-actions .dtf-button { flex:1 1 auto; }
  .dtf-recovery-list article { align-items:stretch;flex-direction:column; }
  .dtf-bulk-bar { align-items:stretch;flex-wrap:wrap; }
  .dtf-modal-backdrop { padding:0;align-items:end; }
  .dtf-modal { width:100%;max-height:92vh;border-radius:20px 20px 0 0; }
}

@media (prefers-reduced-motion: reduce) {
  .dtf-shell *, .dtf-shell *::before, .dtf-shell *::after { animation-duration:.01ms !important;transition-duration:.01ms !important; }
}