:root {
  color-scheme: light;
  --ds-bg: #f6f7f9;
  --ds-surface: #ffffff;
  --ds-surface-muted: #f2f4f6;
  --ds-surface-subtle: #fafbfc;
  --ds-text: #191f28;
  --ds-text-secondary: #4e5968;
  --ds-text-muted: #8b95a1;
  --ds-border: #e5e8eb;
  --ds-border-strong: #b0b8c1;
  --ds-primary: #2563eb;
  --ds-primary-hover: #1d4ed8;
  --ds-primary-subtle: #eff6ff;
  --ds-success: #047857;
  --ds-success-subtle: #ecfdf5;
  --ds-warning: #c2410c;
  --ds-warning-subtle: #fff7ed;
  --ds-danger: #dc2626;
  --ds-danger-subtle: #fef2f2;
  --ds-focus: #60a5fa;
  --ds-sidebar: #24292f;
  --ds-sidebar-border: #3b424a;
  --ds-sidebar-text: #f7f9fa;
  --ds-sidebar-muted: #aeb7c2;
  --ds-radius-control: 6px;
  --ds-radius-panel: 8px;
  --ds-shadow-panel: 0 1px 2px rgb(25 31 40 / 6%);
  --ds-shadow-overlay: 0 16px 40px rgb(25 31 40 / 18%);
  --ds-row-height: 32px;
  --ds-header-height: 36px;
  --ds-total-height: 36px;
}

html,
body {
  background: var(--ds-bg);
  color: var(--ds-text);
  letter-spacing: 0;
}

.ds-app-shell {
  background: var(--ds-bg);
  color: var(--ds-text);
}

.ds-auth-shell {
  min-height: 100vh;
  color: var(--ds-text);
  background: var(--ds-bg);
}

.ds-login-page {
  position: relative;
  min-height: 100vh;
  overflow: hidden;
  isolation: isolate;
}

.ds-login-background {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
}

.ds-login-page::after {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(90deg, rgb(239 246 255 / 46%) 0%, rgb(255 255 255 / 12%) 52%, transparent 78%);
  content: "";
  pointer-events: none;
}

.ds-login-content {
  display: flex;
  align-items: center;
  min-height: 100vh;
  padding: 48px clamp(24px, 7vw, 112px);
}

.ds-login-panel {
  width: min(100%, 420px);
  padding: 36px;
  background: rgb(255 255 255 / 78%);
  border: 1px solid rgb(255 255 255 / 82%);
  border-radius: 8px;
  box-shadow: 0 18px 48px rgb(30 64 175 / 14%);
  backdrop-filter: blur(14px);
}

.ds-login-title {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 0;
  color: #153b73;
  font-size: 30px;
  line-height: 1.3;
  font-weight: 800;
  letter-spacing: 0;
}

.ds-login-title span:last-child {
  font-size: 20px;
  font-weight: 700;
}

.ds-login-form {
  display: grid;
  gap: 12px;
  margin-top: 28px;
}

.ds-login-field {
  width: 100%;
  min-height: 46px;
  padding-inline: 14px;
  background: rgb(255 255 255 / 88%);
}

.ds-login-error {
  padding: 10px 12px;
  color: #be123c;
  background: rgb(255 241 242 / 90%);
  border: 1px solid #fecdd3;
  border-radius: var(--ds-radius-control);
  font-size: 13px;
  line-height: 20px;
  font-weight: 600;
}

.ds-login-submit {
  width: 100%;
  min-height: 46px;
  margin-top: 4px;
}

.ds-auth-brand {
  color: #ffffff;
  background: var(--ds-sidebar);
}

.ds-auth-shell :where(button, a, input, select, textarea):focus-visible {
  outline: 2px solid var(--ds-focus);
  outline-offset: 2px;
}

.ds-app-shell :where(button, a, input, select, textarea):focus-visible {
  outline: 2px solid var(--ds-focus);
  outline-offset: 2px;
}

.ds-app-shell :where(.rounded-xl, .rounded-2xl, .rounded-3xl):not(.rounded-full) {
  border-radius: var(--ds-radius-panel);
}

.ds-app-shell .rounded-lg:not(.rounded-full) {
  border-radius: var(--ds-radius-control);
}

.ds-sidebar {
  background: var(--ds-sidebar);
  color: var(--ds-sidebar-text);
  border-right: 1px solid var(--ds-sidebar-border);
  box-shadow: 1px 0 3px rgb(25 31 40 / 12%);
}

.ds-sidebar-brand,
.ds-sidebar-footer {
  border-color: var(--ds-sidebar-border);
}

.ds-sidebar-brand-mark {
  background: #3971d6;
  border-radius: var(--ds-radius-control);
}

.ds-sidebar-subtitle,
.ds-nav-group-label,
.ds-sidebar-role {
  color: var(--ds-sidebar-muted);
}

.ds-nav-group-label {
  letter-spacing: 0;
  text-transform: none;
}

.ds-nav-item {
  color: #d1d7de;
  border-radius: var(--ds-radius-control);
  min-height: 36px;
}

.ds-nav-item:hover {
  color: #ffffff;
  background: rgb(255 255 255 / 8%);
}

.ds-nav-item.is-active {
  color: #ffffff;
  background: #3b4754;
  box-shadow: inset 3px 0 0 #7fb0ff;
}

.ds-nav-item .ds-nav-icon {
  color: #aeb7c2;
}

.ds-nav-item.is-active .ds-nav-icon {
  color: #a9c8ff;
}

.ds-nav-active-dot {
  background: #8db8ff;
}

.ds-sidebar-account,
.ds-sidebar-action {
  color: #d1d7de;
  border-radius: var(--ds-radius-control);
}

.ds-sidebar-account:hover,
.ds-sidebar-action:hover {
  color: #ffffff;
  background: rgb(255 255 255 / 8%);
}

.ds-sidebar-avatar {
  background: #3971d6;
}

.ds-app-header {
  min-height: 60px;
  background: rgb(255 255 255 / 96%);
  border-color: var(--ds-border);
  box-shadow: 0 1px 2px rgb(25 31 40 / 4%);
}

.ds-page-title {
  color: var(--ds-text);
  font-size: 20px;
  line-height: 28px;
  font-weight: 700;
}

.ds-page-subtitle {
  color: var(--ds-text-muted);
  font-size: 12px;
  line-height: 18px;
}

.ds-icon-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  height: 36px;
  color: var(--ds-text-secondary);
  border-radius: var(--ds-radius-control);
  transition: color 150ms ease, background-color 150ms ease, border-color 150ms ease;
}

.ds-icon-button:hover {
  color: var(--ds-primary);
  background: var(--ds-surface-muted);
}

.ds-header-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 32px;
  padding: 0 10px;
  color: var(--ds-text-secondary);
  background: var(--ds-surface-muted);
  border: 1px solid transparent;
  border-radius: var(--ds-radius-control);
  font-size: 12px;
}

a.ds-header-chip:hover {
  border-color: var(--ds-border);
  background: var(--ds-surface-subtle);
}

.ds-panel {
  overflow: hidden;
  background: var(--ds-surface);
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius-panel);
  box-shadow: var(--ds-shadow-panel);
}

.ledger-page-header {
  position: relative;
  z-index: 40;
  overflow: visible;
}

.ledger-period-menu {
  z-index: 50;
}

.ds-panel-header {
  background: var(--ds-surface-subtle);
  border-color: var(--ds-border);
}

.ds-panel-title {
  color: var(--ds-text);
  font-size: 16px;
  line-height: 24px;
  font-weight: 700;
}

.ds-panel-description {
  color: var(--ds-text-muted);
  font-size: 12px;
  line-height: 18px;
}

.ds-metric-card {
  border-width: 1px;
  border-style: solid;
  border-radius: var(--ds-radius-panel);
  box-shadow: var(--ds-shadow-panel);
}

.ds-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 36px;
  padding: 0 14px;
  border: 1px solid transparent;
  border-radius: var(--ds-radius-control);
  font-size: 14px;
  line-height: 20px;
  font-weight: 600;
  white-space: nowrap;
  transition: color 150ms ease, background-color 150ms ease, border-color 150ms ease;
}

.ds-button-primary {
  color: #ffffff;
  background: var(--ds-primary);
}

.ds-button-primary:hover {
  background: var(--ds-primary-hover);
}

.ds-button-secondary {
  color: var(--ds-text-secondary);
  background: var(--ds-surface);
  border-color: var(--ds-border);
}

.ds-button-secondary:hover {
  background: var(--ds-surface-muted);
  border-color: var(--ds-border-strong);
}

.ds-button-danger {
  color: #ffffff;
  background: var(--ds-danger);
}

.ds-button:disabled,
.ds-button[aria-disabled="true"] {
  cursor: not-allowed;
  opacity: 0.48;
}

.ds-field {
  min-height: 36px;
  padding: 7px 10px;
  color: var(--ds-text);
  background: var(--ds-surface);
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius-control);
  font-size: 14px;
  line-height: 20px;
}

.ds-field:hover {
  border-color: var(--ds-border-strong);
}

.ds-field:focus {
  border-color: var(--ds-focus);
  box-shadow: 0 0 0 3px rgb(96 165 250 / 18%);
  outline: none;
}

.ds-app-shell main :where(
  input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="hidden"]):not([class~="border-0"]):not([class~="bg-transparent"]),
  select,
  textarea
) {
  color: var(--ds-text);
  background-color: var(--ds-surface);
  border-color: var(--ds-border);
  border-radius: var(--ds-radius-control);
}

.ds-app-shell main :where(
  input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="hidden"]):not([class~="border-0"]):not([class~="bg-transparent"]),
  select,
  textarea
):hover {
  border-color: var(--ds-border-strong);
}

.ds-app-shell main :where(
  input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="hidden"]):not([class~="border-0"]):not([class~="bg-transparent"]),
  select,
  textarea
):focus {
  border-color: var(--ds-focus);
  box-shadow: 0 0 0 3px rgb(96 165 250 / 18%);
  outline: none;
}

.ds-app-shell main [class~="bg-blue-600"],
.ds-app-shell main [class~="bg-violet-600"],
.ds-app-shell main [class~="bg-[#6f96f3]"] {
  background-color: var(--ds-primary);
}

.ds-app-shell main [class~="hover:bg-blue-700"]:hover,
.ds-app-shell main [class~="hover:bg-violet-700"]:hover,
.ds-app-shell main [class~="hover:bg-[#5f87ea]"]:hover {
  background-color: var(--ds-primary-hover);
}

.ds-app-shell main [class~="bg-emerald-600"],
.ds-app-shell main [class~="bg-green-600"] {
  background-color: var(--ds-success);
}

.ds-app-shell main [class~="hover:bg-emerald-700"]:hover,
.ds-app-shell main [class~="hover:bg-green-700"]:hover {
  background-color: #036649;
}

.ds-app-shell main [class~="bg-rose-600"],
.ds-app-shell main [class~="bg-rose-700"],
.ds-app-shell main [class~="bg-red-600"] {
  background-color: var(--ds-danger);
}

.ds-app-shell main [class~="hover:bg-rose-700"]:hover,
.ds-app-shell main [class~="hover:bg-rose-800"]:hover,
.ds-app-shell main [class~="hover:bg-red-700"]:hover {
  background-color: #b91c1c;
}

.ds-app-shell main :where(
  .fixed.inset-0[class*="bg-black"],
  .fixed.inset-0[class*="bg-slate"]
) {
  background-color: rgb(25 31 40 / 34%);
}

.ds-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  min-height: 24px;
  padding: 2px 8px;
  border: 1px solid var(--ds-border);
  border-radius: 999px;
  color: var(--ds-text-secondary);
  background: var(--ds-surface-subtle);
  font-size: 12px;
  line-height: 18px;
  font-weight: 600;
  white-space: nowrap;
}

.ds-segmented {
  display: inline-flex;
  gap: 2px;
  padding: 3px;
  background: var(--ds-surface-muted);
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius-panel);
}

.ds-segment {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 32px;
  padding: 0 12px;
  color: var(--ds-text-secondary);
  border-radius: var(--ds-radius-control);
  font-size: 13px;
  line-height: 20px;
  font-weight: 600;
}

.ds-segment:hover {
  color: var(--ds-text);
}

.ds-segment.is-active {
  color: var(--ds-primary);
  background: var(--ds-surface);
  box-shadow: 0 1px 2px rgb(25 31 40 / 8%);
}

.ds-table-shell {
  overflow: auto;
  background: var(--ds-surface);
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius-panel);
}

.ds-data-table {
  color: var(--ds-text-secondary);
  font-size: 13px;
  line-height: 20px;
  font-variant-numeric: tabular-nums;
}

.ds-data-table thead th {
  color: var(--ds-text-secondary);
  background: var(--ds-surface-muted);
  border-color: var(--ds-border);
  font-size: 12px;
  line-height: 18px;
  font-weight: 700;
}

.ds-data-table tbody td {
  min-height: var(--ds-row-height);
  border-color: var(--ds-border);
}

.ds-data-table tfoot td,
.ds-data-table .ds-total-row > td {
  min-height: var(--ds-total-height);
  color: var(--ds-text);
  background: #edf2f7;
  border-color: var(--ds-border-strong);
  font-weight: 700;
}

.ds-amount,
.ds-data-table :where(.tabular-nums, [data-amount]) {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.ds-loading-overlay {
  background: rgb(25 31 40 / 28%);
  backdrop-filter: blur(1px);
}

.ds-modal-overlay {
  background-color: rgb(25 31 40 / 34%);
  backdrop-filter: blur(2px);
}

.ds-modal {
  color: var(--ds-text);
  background: var(--ds-surface);
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius-panel);
  box-shadow: var(--ds-shadow-overlay);
}

.ds-modal-header {
  background: var(--ds-surface);
  border-color: var(--ds-border);
}

.ds-drawer {
  color: var(--ds-text);
  background: var(--ds-surface);
  border-left: 1px solid var(--ds-border);
  box-shadow: -12px 0 32px rgb(25 31 40 / 12%);
}

.ds-loading-panel {
  min-width: 184px;
  padding: 20px 24px;
  color: var(--ds-text);
  background: var(--ds-surface);
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius-panel);
  box-shadow: var(--ds-shadow-overlay);
}

.ds-spinner {
  width: 32px;
  height: 32px;
  border: 3px solid #dbeafe;
  border-top-color: var(--ds-primary);
  border-radius: 999px;
}

.ds-skeleton {
  position: relative;
  overflow: hidden;
  background: var(--ds-surface-muted);
  border-radius: 4px;
}

.ds-skeleton::after {
  position: absolute;
  inset: 0;
  content: "";
  transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, rgb(255 255 255 / 70%), transparent);
  animation: ds-skeleton 1.4s infinite;
}

@keyframes ds-skeleton {
  100% { transform: translateX(100%); }
}

@media (max-width: 1279px) and (min-width: 1024px) {
  .ds-data-table {
    font-size: 12px;
  }

  .ds-data-table :where(th, td) {
    padding-left: 6px;
    padding-right: 6px;
  }
}

@media (max-width: 767px) {
  .ds-login-background {
    object-position: 66% center;
  }

  .ds-login-page::after {
    background: rgb(255 255 255 / 18%);
  }

  .ds-login-content {
    align-items: flex-start;
    justify-content: center;
    padding: 56px 20px 32px;
  }

  .ds-login-panel {
    padding: 28px 24px;
    background: rgb(255 255 255 / 82%);
  }

  .ds-login-title {
    font-size: 26px;
  }

  .ds-login-title span:last-child {
    font-size: 18px;
  }

  .ds-app-header {
    min-height: 56px;
    padding-left: 12px;
    padding-right: 12px;
  }

  .ds-page-title {
    font-size: 18px;
    line-height: 24px;
  }

  .ds-toolbar {
    align-items: stretch;
    flex-direction: column;
  }

  .ds-toolbar :where(.ds-field, .ds-button) {
    width: 100%;
  }

  .ds-toolbar > :where(label, div) {
    width: 100%;
    min-width: 0;
  }

  .ds-toolbar-actions {
    display: grid;
    grid-template-columns: 1fr;
    margin-left: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ds-app-shell *,
  .ds-app-shell *::before,
  .ds-app-shell *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

@media print {
  .ds-panel,
  .ds-table-shell {
    border-radius: 0;
    box-shadow: none;
  }

  .ds-loading-overlay {
    display: none !important;
  }
}